Practices > Graphic Assets

[emmadwhite]

@kpettinga Dave has a question for you here.

How had you seen the graphical aspects and type-sizing working for the practices? Dave assumed that the titles would be replaced by graphics, so I’d need those assets.

Attached is the page for reference. @kpettinga can you export the assets for him if that's the solution we go with?

[kpettinga]

yeah these should be graphics, ill export

[kpettinga]

Here's a zip of pngs with @2x versions: https://www.dropbox.com/s/axextvudtt9f8ps/practices_assets.zip?dl=0 @davekellam

[emmadwhite]

@davekellam you had asked "why is that layout/treatment different on the News & Events page" and it's just another way to access the practices content. If you want to remove it from the News & Events Page that's fine.

[davekellam]

Thanks for the assets @kpettinga! Do they align with the current practices treatment @emmadwhite?

I've done a lot of backend work recently and am be a bit behind on the front-end/sass world. @kpettinga Is there a technique that you use with CodeKit to produce the code for 2x images, or is it something you've tended to implement manually?

[emmadwhite]

@davekellam these are good to go from my perspective. @kpettinga can you answer on the 2x images?

[kpettinga]

@davekellam, usually I manually create the code for @2x images with "device-pixel-ratio" media query. Here it is:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {

/* Retina-specific stuff here */

}

_ Kirk Pettinga Developer — Objective Subject http://www.objectivesubject.com/ 231 Front Street, 3rd Floor Brooklyn, NY 11201 Kirk@ObjectiveSubject.com @kirkpettinga https://twitter.com/kirkpettinga +1 718 801-8075 office

On Fri, Nov 7, 2014 at 2:41 AM, Emma White notifications@github.com wrote:

Assigned #22 https://github.com/ObjectiveSubject/carr-mcclellan/issues/22 to @kpettinga https://github.com/kpettinga.

— Reply to this email directly or view it on GitHub https://github.com/ObjectiveSubject/carr-mcclellan/issues/22#event-189528547 .

[davekellam]

Doesn't quite match up here... there are graphics for Pro Bono, Executive Briefing and Mergers & Acquisitions (which don't have a category), but no images for Creditors Rights/Bankruptcy or Trust Estates Litigation.

[emmadwhite]

@davekellam.

These won’t be perfect, but here’s a good starting point:

Corporate & Business Law

• Text Changed to “Business & Corporate”
• Use Asset: practice_corporate.png

Business Litigation

• Use Asset: practice_business.png

Construction Law

• Text Changed to “Construction”
• Use Asset: practice_construction.png

Creditors’ Rights & Bankruptcy

• Use Asset: practice_executive.png

Employment Practices

• Text Changed to “Employment”
• Use Asset: practice_employment.png

Intellectual Property, Privacy & Data Security

• Text Changed to “Intellectual Property”
• Use Asset: practice_intellectual_property.png

Real Estate Law

• Tex Changed to “Real Estate”
• Use Asset: practice_real_estate.png

Taxation Law

• Text Changed to “Tax”
• Use Asset: practice_taxation.png

Trusts & Estates Litigation

• Use Asset:practice_mergers.png

On Nov 7, 2014, at 3:11 PM, Dave Kellam notifications@github.com wrote:

Doesn't quite match up here... there are graphics for Pro Bono, Executive Briefing and Mergers & Acquisitions (which don't have a category), but no images for Creditors Rights/Bankruptcy or Trust Estates Litigation.

— Reply to this email directly or view it on GitHub https://github.com/ObjectiveSubject/carr-mcclellan/issues/22#issuecomment-62229340.

[emmadwhite]

@kpettinga any thoughts? As you can see there are only 9 practices areas and the layout doesn't really accommodate it. We also have all these icons to pull from (https://www.dropbox.com/sh/kdf7qqzz8ffhxls/AAD0VbKJo-Vq-3Thvd_qw-7fa?dl=0) , but I like the simplicity of what we have started here.

[kpettinga]

@emmadwhite, we could probably move to a 3x3 grid. I'll adjust the image assets to use the new icons.

_ Kirk Pettinga Developer — Objective Subject http://www.objectivesubject.com/ 231 Front Street, 3rd Floor Brooklyn, NY 11201 Kirk@ObjectiveSubject.com @kirkpettinga https://twitter.com/kirkpettinga +1 718 801-8075 office

On Mon, Nov 10, 2014 at 7:48 AM, Emma White notifications@github.com wrote:

@kpettinga https://github.com/kpettinga any thoughts? As you can see there are only 9 practices areas and the layout doesn't really accommodate it. We also have all these icons to pull from ( https://www.dropbox.com/sh/kdf7qqzz8ffhxls/AAD0VbKJo-Vq-3Thvd_qw-7fa?dl=0) , but I like the simplicity of what we have started here.

— Reply to this email directly or view it on GitHub https://github.com/ObjectiveSubject/carr-mcclellan/issues/22#issuecomment-62328349 .

[emmadwhite]

Great idea!!!

[davekellam]

This was converted to a 3x3 grid (good call!). Added in the temp graphics, they can be replaced with more appropriate ones.

[emmadwhite]

Thanks @davekellam can you change the text as well?

[davekellam]

Change what text?

[emmadwhite]

Above I made notes where the text should be changed. Here it is again:

Corporate & Business Law

• Change Text to “Business & Corporate”

Construction Law

• Change Text to “Construction”

Employment Practices

• Change Text to “Employment”

Intellectual Property, Privacy & Data Security

• Change Text to “Intellectual Property”

Real Estate Law

• Change Text to “Real Estate”

Taxation Law

• Change Text to “Tax”

[davekellam]

Under the hood, in the html, it should reflect the names given in the category. The "text" you're seeing is from the graphic/png, so it needs to be changed in the original file and exported.

[emmadwhite]

ok! Assigning to @kpettinga

[davekellam]

While you're at it, you may want to create graphics for the three Industries as well.

[davekellam]

I'm out this evening, until at least 1am EST, so @kpettinga feel free to have at the css and pushing to github. It's easy enough to avoid stepping on each other's toes, except for the merge conflict that you can sometimes get with different generated css/js (usually just have to run codekit again). Should be able to answer any question when you're back.

[kpettinga]

Thanks @davekellam, I'll update the text in those graphics.

@emmadwhite, did we get icons created for the industries? If not, I think we should consult with David about what kind of graphic treatment those should have. For instance, do they get the "abstract line" kind of thing or something else?

[kpettinga]

@emmadwhite as I've been reworking these practice images, I'm curious whether we should use an icon (as opposed to an abstract line) for all of them. Was that the original idea?

[emmadwhite]

@kpettinga when we designed the site, we didn't have the icon library designed yet so we used the abstract containing shapes which are part of the system. We don't want to tie specific icons to specific practices so that's why we went with the abstract containing shapes. The closed circle is not in the system.

We can use a mixture of both the containing shapes and literal icons. Blake might be able to weigh in here as well.

On Nov 11, 2014, at 2:08 AM, Kirk Pettinga notifications@github.com wrote:

@emmadwhite as I've been reworking these practice images, I'm curious whether we should use an icon (as opposed to an abstract line) for all of them. Was that the original idea?

— Reply to this email directly or view it on GitHub.

[emmadwhite]

@blakeolmstead let us know if you have thoughts on this thread! You can see the practice areas mosaic here: http://www.objectivesubjectlabs.com/carr-mcclellan/

[blakeolmstead]

Corporate/Business Law: column or the scales Business Litigation: gavel Construction: crane Executive Briefing: briefcase Employment Practices: people I.P. & Data Security: lock Real Estate: OK as-is or house Taxation Law: column or scales (whichever wasn't used on corporate) Mergers & Acquisitions: merge or cycle

This gives all areas icons instead of containing shapes. If we want to mix containing shapes back in for the sake of variety, I would use shapes instead of icons on Taxation Law, Construction Law, Executive Briefing, and perhaps Corporate & Business Law.

[kpettinga]

@emmadwhite, I would agree with @blakeolmstead here that we should use icons for all of them. I updated the assets and uploaded to the site so you can take a look.

[emmadwhite]

Looks good!

Executive Briefing + Mergers and Acquisitions aren’t practice areas.

These should be replaced with:

Trusts & Estates Litigation Creditors’ Rights & Bankruptcy=

[kpettinga]

ok should be all set @blakeolmstead @emmadwhite

[emmadwhite]

Looks good to me! @blakeolmstead if you agree, please close this issue.

[blakeolmstead]

Awesome. I'll close, but if possible, can the file folders be scaled down a bit? That one icon looks bigger than the others! Thanks!

[emmadwhite]

Assigned to @kpettinga