Taking the Drama Out Of Pixel Perfection

Taking the Drama Out of Pixel Perfection

Samantha MethenyOctober ThirdTwenty Twelve

Politics = Drama

Creatives are deep.

But need not be dramatic.

@SamanthaABQ

Facebook.com/SamanthaDesign

What I’ll Cover: ““Pixel perfection” definitionPixel perfection” definition Define creative rolesDefine creative roles Discuss modern web design campsDiscuss modern web design camps Take out the dramaTake out the drama <frustration> Photoshop? Fireworks? <frustration> Photoshop? Fireworks? </frustration></frustration>

We’re past pixel perfection nowWe’re past pixel perfection now

@SamanthaABQ


What is pixel perfection?

Striving for ultimate consistency Margins, padding, font usage, borders & backgrounds, colors

Comp --> Iterations --> QA --> Pre-launch --> Looks exactly like what was planned

@SamanthaABQ


Creative Roles: DESIGNER

“Graphical” design (Ideally) the basic HTML and CSS (Often) a Photoshop or other print-style mock-up

Icons, typography, color schemes

@SamanthaABQ


Creative Roles: DEVELOPER

Advanced coding and programming Database structure JavaScript

@SamanthaABQ


Creative Roles: OVERLAP

Layout, navigation, flow User interaction with site Content (images & text) Scrolling and linking Browser differences Operating system differences View on many different devices

@SamanthaABQ


Pixel Perfect Camp Or, “it’s all drawn out and conveyed from the very beginning and the site will look exactly like this … ”

PROS CONS

@SamanthaABQ


Wireframe, then code Sketch out the basic site structure, either on paper or with one of the cool tools out there. (Moqups, Omni Giraffe, ProtoShare,UXPin, Invision)

PROS CONS

@SamanthaABQ


Moqups.com

@SamanthaABQ


Omni Giraffe

@SamanthaABQ


ProtoShare

@SamanthaABQ


UXPin

@SamanthaABQ


Invision

@SamanthaABQ


Design in the Browser

Jeffrey Zeldman: “Content precedes design. Design in the absence of content isn’t design. It’s decoration.”

Sometimes called “refresh-and-test” PROS CONS

@SamanthaABQ


Take Out the Drama Both designers and developers (and des/dev) can do things with a little more grace by recognizing pitfalls.

@SamanthaABQ


Recognize Pitfalls Common struggles in the design team / development team relationship

@SamanthaABQ


Designers’ struggles Might not remember importance of exact alignment (or at least a clear representation of it)

Might forget about color differences Artwork too detailed, exported in a wonky way, or just plain doesn’t work

@SamanthaABQ


Developers’ struggles:

Might forget, or not be aware of, creative requirements imposed by client

Might forget that the coding skills in the design world differ

Some designers are code rock stars And some aren’t

@SamanthaABQ


Graceful teamwork: BOTH des and dev arrive at table at same time and MORE OFTEN

Increase number and frequency of meetings

@SamanthaABQ


Graceful DESIGNERS: Mockups use good hierarchies and layering

Use CSS-only dropdown menus Ease focus on designing with pixels and focus more on percentages and ratios

Learn HTML and CSS; consider becoming an expert

Export site assets in a useful format

@SamanthaABQ


MORE for DESIGNERS: Use correctly sized (for Web) grid Pay special attention to the X and Y coordinates

Illustrate effect details like hover states

Use HEX colors in designs Recognize that some colors won’t match perfectly

And that’s the reality

@SamanthaABQ


Graceful DEVELOPERS: Sit in design meetings from the START of the project, if possible

Communicate with the design team Web specs Browser rendering differences Code capabilities Pros and Cons of nav styles Pros and Cons of various scripts

@SamanthaABQ


Pop Psych for ALL: The tools you’re using aren’t as important as HOW you work together

Be open and honest Don’t be afraid to make mistakes Use workflow tools to keep track of progress and check in often

Respect each other Know thyself

@SamanthaABQ


Ewok break

“Allayoo tu nuv.” -Ewoks

@SamanthaABQ


No one right answer Our work styles and design techniques are as varied as we are

“Perfection” is relative And, actually, it’s irrelevant. :) Good night!

@SamanthaABQFacebook.com/SamanthaDesign

Resources: Article: “Pixel Perfection When Rotating, Nudging and Pasting in

Photoshop” http://www.smashingmagazine.com/2011/04/14/mastering-photoshop-pixel-perfection-when-rotating-pasting-and-nudging/

Article: “Refining Your Design in Adobe Fireworks”

http://fireworks.smashingmagazine.com/2012/05/07/refining-

designs-adobe-fireworks/

Virtual Seminar: Ethan Marcotte: Comps vs. Code: Case Studies on

Collaboration Between Site Designers & Developers.

http://www.uie.com/events/virtual_seminars/comps_code/

Taking the Drama Out Of Pixel Perfection

Documents