Taking the Drama Out Of Pixel Perfection


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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 @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  7. 7. Creative Roles: DEVELOPER  Advanced coding and programming  Database structure  JavaScript @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  11. 11. Moqups.com @SamanthaABQFacebook.com/SamanthaDesign
  12. 12. Omni Giraffe @SamanthaABQFacebook.com/SamanthaDesign
  13. 13. ProtoShare @SamanthaABQFacebook.com/SamanthaDesign
  14. 14. UXPin @SamanthaABQFacebook.com/SamanthaDesign
  15. 15. Invision @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  17. 17. Take Out the Drama  Both designers and developers (and des/dev) can do things with a little more grace by recognizing pitfalls. @SamanthaABQFacebook.com/SamanthaDesign
  18. 18. Recognize Pitfalls  Common struggles in the design team / development team relationship @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  21. 21. Graceful teamwork:  BOTH des and dev arrive at table at same time and MORE OFTEN  Increase number and frequency of meetings @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  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 @SamanthaABQFacebook.com/SamanthaDesign
  26. 26. Ewok break “Allayoo tu nuv.” -Ewoks @SamanthaABQFacebook.com/SamanthaDesign
  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! @SamanthaABQFacebook.com/SamanthaDesign
  28. 28. 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/ @SamanthaABQFacebook.com/SamanthaDesign