Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Taking the Drama Out Of Pixel Perfection


Published on

  • Be the first to comment

  • Be the first to like this

Taking the Drama Out Of Pixel Perfection

  1. 1. Taking the Drama Out of Pixel PerfectionSamantha Metheny October Third Twenty Twelve
  2. 2. Politics = Drama
  3. 3. Creatives are deep.But need not be dramatic.
  4. 4. What I’ll Cover:  “Pixel perfection” definition  Define creative roles  Discuss modern web design camps  Take out the drama  <frustration> Photoshop? Fireworks? </frustration>  We’re past pixel perfection now
  5. 5. 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
  6. 6. Creative Roles: DESIGNER  “Graphical” design  (Ideally) the basic HTML and CSS  (Often) a Photoshop or other print-style mock-up  Icons, typography, color schemes
  7. 7. Creative Roles: DEVELOPER  Advanced coding and programming  Database structure  JavaScript
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11.
  12. 12. Omni Giraffe
  13. 13. ProtoShare
  14. 14. UXPin
  15. 15. Invision
  16. 16. 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
  17. 17. Take Out the Drama  Both designers and developers (and des/dev) can do things with a little more grace by recognizing pitfalls.
  18. 18. Recognize Pitfalls  Common struggles in the design team / development team relationship
  19. 19. 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
  20. 20. 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
  21. 21. Graceful teamwork:  BOTH des and dev arrive at table at same time and MORE OFTEN  Increase number and frequency of meetings
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. Ewok break “Allayoo tu nuv.” -Ewoks
  27. 27. 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!
  28. 28. Resources:  Article: “Pixel Perfection When Rotating, Nudging and Pasting in Photoshop” when-rotating-pasting-and-nudging/  Article: “Refining Your Design in Adobe Fireworks”  Virtual Seminar: Ethan Marcotte: Comps vs. Code: Case Studies on Collaboration Between Site Designers & Developers.