A Website Is Not A Poster: Designing Successfully For The Web

In the world of print, designers have control over every point and pica, but with all the variables inherent to the web, that same desire for control leads to headaches, frustration, and bad practices. You will learn specific guidelines to let go of that control and design more effectively for the web, as well as how to collaborate with developers to ensure a successful project without all the usual struggles.

Transcript

1. A WEBSITE IS NOT A POSTER DESIGNING SUCESSFULLY FOR THE WEB Flickr:  dcmaster  
2. HI, I’M MICHELLE @marktimemedia i do design for print&web&wordpress
3. HI, I’M MICHELLE @marktimemedia i also do a lot of work with developers Can’t we all just get along?
4. A WEBSITE IS LIKE A POSTER? Principles of hierarchy Communicating a message Getting attention Inspiring call to action Flickr:  Ma0hew  Kenwrick  
5. A WEBSITE IS LIKE A POSTER? Principles of hierarchy Communicating a message Getting attention Inspiring call to action ANY OTHER FREAKIN’ TYPE OF DESIGN Flickr:  Ma0hew  Kenwrick  
6. BUT IT’S ALSO VERY UNIQUE
7. PRINT DESIGN IS ABOUT CONTROL Flickr:  The  Other  Dan  
8. PRINT DESIGN Long, precise process Defined stopping point Shared understanding of goals
9. THE WEB IS ABOUT LETTING GO OF CONTROL Flickr:  intermayer  
10. DYNAMIC ENVIRONMENT Di erent Browsers Di erent Devices Di erent Resolutions Flickr:  Jeremy  Keith  
11. AGILE & ITERATIONS Evolving Content Building In The Browser Flickr:  Stéfan    
12. Flickr:  slworking2   DISCONNECT BETWEEN DESIGNER & DEVELOPER
13. IT WOULD BE LIKE BUILDING A PRINTER TO FIT YOUR DESIGN IF PRINTING WERE LIKE WEB DESIGN… Flickr:  Kenoir  
14. ADDRESS THE DISCONNECT
15. COLLABORATION AND COMMUNICATION Flickr:  the  rik  pics  
16. Flickr:  slworking2   INCLUDE THE DEVELOPER EARLY
17. COMMUNICATE YOUR WORKFLOWS Flickr:  siddhu2020  
18. BE READY TO EXPLAIN “WHY” Flickr:  birgerking  
19. REMEMBER: THERE IS NO “YOU SUCK” IN TEAM Flickr:  siddhu2020  
20. RESPECT EACH OTHER Flickr:  photography.andreas  
21. Flickr:  h.koppdelaney   What do you have in common? Design & Development are both about How Things Work REMEMBER THE BIG PICTURE
22. DESIGNER BEST PRACTICES Flickr:  derrickcollins   Make the developer love you!
23. 1. THE DESIGN PROCESS Flickr:  Mike  Rohde  
24. DESIGN ELEMENTS RATHER THAN LITERAL MOCKUPS http://styletil.es
25. CONSIDER CONSISTENCY & REUSABILITY OF ELEMENTS
26. ACCOUNT FOR THE EXTREMES
27. COMPATIBILITY WITH AVAILABLE TECHNOLOGIES http://html5readiness.com
28. UNDERSTAND THE TOOLS CMS Starter themes/frameworks Specific grids HTML/CSS Flickr:  carlaarena  
29. A WEB DESIGNER SHOULD BE ABLE TO READ AND UNDERSTAND HTML & CSS EVEN IF THEY DON’T WANT TO WRITE IT
30. UGH, WHY DO I HAVE TO KNOW THAT STUFF!? Isn’t all that scary code stu what the developers are for?
31. JUST AS A PRINT DESIGNER NEEDS TO UNDERSTAND THE PRINTING PROCESS… … A WEB DESIGNER NEEDS TO UNDERSTAND THE TOOLS THAT BUILD THEIR DESIGNS
32. HTML/CSS IS THE BLUEPRINT Flickr:  enfilm  
33. SEMANTIC MARKUP: IT’S ABOUT MEANING Flickr:  See-­‐ming  Lee  李思明  SML    
34. LAYOUT HIERARCHY : WHAT IS THIS? <div> <section> <article> <aside> <nav> <header> <sidebar> Image:  Jenna  Marbles  h0p://www.youtube.com/watch?v=t4sXjJJjcWQ   What Are This?
35. TYPOGRAPHIC HIERARCHY: HOW IMPORTANT IS THIS? Flickr:  Xosé  Castro     Headings Paragraphs Lists Blockquotes Hierarchical meaning, not just visual styling
36. Semantics Hierarchy Web Typography Pixels/Resolution How CSS Works Box Model Options available for customizations: •  CSS3 e ects •  JavaScript libraries •  Web fonts Image:  Github  
37. DON’T PANIC: THERE ARE PLENTY OF PLACES TO LEARN THIS STUFF http://www.w3schools.com/css/ http://learncss.tutsplus.com/ http://css-tricks.com/ http://www.lynda.com http://coding.smashingmagazine.com http://www.adobe.com/devnet/dreamweaver/css.html http://www.codeschool.com/paths/html-css
38. 2. THE BUILD PROCESS Flickr:  elidr  
39. DELIVERABLES IN A FORMAT THE DEVELOPER CAN USE
40. FILE TYPE AND RESOLUTION you talked to the developer about this, right?
41. Avoid using layer e ects for anything besides images Use vectors when possible, but based on whole pixels Use non-destructive editing and e ects RGB at 72ppi… usually
42. LABEL, GROUP, ORGANIZE, LABEL, AND DID I MENTION LABEL?
43. DESCRIBE FUNCTIONALITY
44. PROVIDE ALL IMAGE ASSETS Embedded, Pre-cropped/sized, Sliced, Or Exportable from their own file
45. BUILDING CSS STYLE GUIDES remember that discussion on hierarchy? time to take it a step further.
46. INCLUDED IN YOUR STYLE GUIDE Colors Headings Text Lists Fonts Links Buttons Forms Icons Tooltips Navigation Asides POSSIBLE REUSABLE ELEMENTS:
47. CSS COMMENTS EXAMPLE http://www.coding.smashingmagazine.com
48. PATTERN LIBRARY EXAMPLE http://www.bbc.co.uk/gel
49. 3. THE REVIEW & REVISION PROCESS Flickr:  Jeff  Youngstrom  
50. UNDERSTANDABLE VERSION CONTROL & NOTATE CHANGES Image:  SixRevisions  
51. FOCUS ON CONSISTENCY OF BRAND & USABILITY, NOT PIXEL-PERFECTION
52. A NON-EXHAUSTIVE LIST OF COOL RESOURCES Building a Live Style Guide/ Pattern Library http://warpspire.com/kss/ http://kaleistyleguide.com http://pea.rs/ http://patternprimer.adactio.com (https://github.com/adactio/ Pattern-Primer) Better Practices for Design Files http://styletil.es http://photoshopetiquette.com/ http://mattgemmell.com/2012/02/02/how- designers-can-help-developers/ http://www.dtelepathy.com/blog/design/25-best- practices-collaborative-work-photoshop http://www.noupe.com/how-tos/when-designers- and-developers-work-together.html
53. QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/web-not-poster Flickr:  dcmaster