Your SlideShare is downloading. ×
Taking the Drama Out Of Pixel Perfection
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Taking the Drama Out Of Pixel Perfection

373
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
373
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Taking the Drama Out of Pixel PerfectionSamantha Metheny October Third Twenty Twelve
  • 2. Politics = Drama
  • 3. Creatives are deep.But need not be dramatic.
  • 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. 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. 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. Creative Roles: DEVELOPER  Advanced coding and programming  Database structure  JavaScript @SamanthaABQFacebook.com/SamanthaDesign
  • 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. 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. 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. Moqups.com @SamanthaABQFacebook.com/SamanthaDesign
  • 12. Omni Giraffe @SamanthaABQFacebook.com/SamanthaDesign
  • 13. ProtoShare @SamanthaABQFacebook.com/SamanthaDesign
  • 14. UXPin @SamanthaABQFacebook.com/SamanthaDesign
  • 15. Invision @SamanthaABQFacebook.com/SamanthaDesign
  • 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. 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. Recognize Pitfalls  Common struggles in the design team / development team relationship @SamanthaABQFacebook.com/SamanthaDesign
  • 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. 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. 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. 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. 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. 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. 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. Ewok break “Allayoo tu nuv.” -Ewoks @SamanthaABQFacebook.com/SamanthaDesign
  • 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. 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