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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Taking the Drama Out Of Pixel Perfection

  • 363 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
363
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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