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

538 views

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 @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

×