Workshop: A Website Is Not A Poster

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 Different Browsers Different Devices Different 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. EDUCATE EACH OTHER Flickr:  photography.andreas  
22. Flickr:  h.koppdelaney   You have the same goals: Deliver a quality project within scope and within budget REMEMBER THE BIG PICTURE
23. DESIGNER BEST PRACTICES Flickr:  derrickcollins   Make the developer love you!
24. 1. THE DESIGN PROCESS Flickr:  Mike  Rohde  
25. THE MOST IMPORTANT QUESTION: WHAT DOES THIS DO?
26. DESIGN ELEMENTS RATHER THAN LITERAL MOCKUPS http://styletil.es
27. DISPLAY MOCKUPS IN CONTEXT
28. ACCOUNT FOR THE EXTREMES: CONTENT
29. ACCOUNT FOR THE EXTREMES: DISPLAY SIZE http://3them.es
30. CONSIDER CONSISTENCY & REUSABILITY OF ELEMENTS
31. DESIGN THE HIDDEN ELEMENTS
32. UNDERSTAND THE TOOLS WordPress CMS Specific grids/frameworks WP starter themes/frameworks Specific plugins HTML/CSS Flickr:  carlaarena  
33. Understand the CMS (WordPress) UNDERSTANDING WORDPRESS
34. DESIGNING FOR WORDPRESS Separation of content, layout, & functionality Database, themes, & plugins Use of content types Taxonomies, posts/pages, & custom post types Relationships between data Template Hierarchy Data organization for ease of use
35. Understand the CMS (WordPress) UNDERSTANDING CSS GRIDS & FRAMEWORKS
36. DESIGNING FOR CSS GRIDS & FRAMEWORKS Content width Existing margins, gutters, columns Responsive considerations Grids vs. frameworks Framework elements Buttons, tables, alerts, tabs, icons, etc.
37. Understand the CMS (WordPress) UNDERSTANDING WP FRAMEWORKS & STARTER THEMES
38. DESIGNING FOR FRAMEWORKS WordPress framework vs. design framework Parent/Child themes Theme options vs. custom Custom functionality Custom widgets & other elements
39. DESIGNING FOR STARTER THEMES Styling for existing/included libraries Needs customization
40. Understand the CMS (WordPress) UNDERSTANDING PLUGINS
41. DESIGNING FOR PLUGINS: SOME QUESTIONS TO ASK How do they look by default? How easy is it to overwrite existing styles? How easy is it to add new classes/functionality? What new elements are being introduced?
42. DESIGNING FOR PLUGINS: EXAMPLE ELEMENTS Forms (ex: Gravity Forms) Fields, inputs, buttons, etc. eCommerce (ex: WooCommerce) Product pages, shopping carts, product search results Social (ex: BuddyPress/bbPress) Profile pages, notifications, forums, messages
43. Understand the CMS (WordPress) UNDERSTANDING HTML/CSS
44. A WEB DESIGNER SHOULD BE ABLE TO READ AND UNDERSTAND HTML & CSS EVEN IF THEY DON’T WANT TO WRITE IT
45. UGH, WHY DO I HAVE TO KNOW THAT STUFF!? Isn’t all that scary code stuff what the developers are for?
46. JUST AS A PRINT DESIGNER NEEDS TO UNDERSTAND THE PRINTING PROCESS… … A WEB DESIGNER NEEDS TO UNDERSTAND THE TOOLS THAT BUILD THEIR DESIGNS
47. HTML/CSS IS THE BLUEPRINT Flickr:  enfilm  
48. SEMANTIC MARKUP: IT’S ABOUT MEANING Flickr:  See-­‐ming  Lee  李思明  SML    
49. 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?
50. <header> <section> <article> <aside> <nav>
51. TYPOGRAPHIC HIERARCHY: HOW IMPORTANT IS THIS? Flickr:  Xosé  Castro     Headings Paragraphs Lists Blockquotes Hierarchical meaning, not just visual styling
52. <h1> <h3> <p> <ol> <blockquote> <code> <p> <p> <p> <h3>
53. COMPATIBILITY WITH AVAILABLE TECHNOLOGIES http://html5readiness.com
54. Semantics Hierarchy Web Typography Pixels/Resolution How CSS Works Box Model Options available for customizations: •  CSS3 effects •  JavaScript libraries •  Web fonts Image:  Github  
55. 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
56. 2. THE BUILD PROCESS Flickr:  elidr  
57. DELIVERABLES IN A FORMAT THE DEVELOPER CAN USE
58. FILE TYPE AND RESOLUTION you talked to the developer about this, right?
59. Avoid using layer effects for anything besides images Use vectors when possible, but based on whole pixels Use non-destructive editing and effects RGB color, Retina/HDPI support
60. PROVIDE ALL IMAGE ASSETS Embedded, Pre-cropped/sized, Sliced, Or Exportable from their own file
61. LABEL, GROUP, ORGANIZE, LABEL, AND DID I MENTION LABEL?
62. DESCRIBE FUNCTIONALITY
63. DESCRIBE SIZES, COLORS, ETC.
64. SPECCTR FOR ADOBE http://www.specctr.com/
65. MACAW: NEW DESIGN WORKFLOW
66. BUILDING CSS STYLE GUIDES remember that discussion on hierarchy? time to take it a step further.
67. INCLUDED IN YOUR STYLE GUIDE Colors Headings Text Lists Fonts Links Buttons Forms Icons Tooltips Navigation Asides POSSIBLE REUSABLE ELEMENTS:
68. LAYOUT/MOCKUP OF ELEMENTS
69. CSS COMMENTS EXAMPLE http://www.coding.smashingmagazine.com
70. PATTERN LIBRARY EXAMPLE http://www.bbc.co.uk/gel
71. PEARS: WORDPRESS PATTERN LIBRARY http://pea.rs/
72. BRAD FROST: ATOMIC DESIGN http://pattern-lab.info/
73. 3. THE REVIEW & REVISION PROCESS Flickr:  Jeff  Youngstrom  
74. TAKE AN ACTIVE ROLE IN CSS ALONGSIDE DEVELOPER
75. UNDERSTANDABLE VERSION CONTROL & NOTATE CHANGES
76. FOCUS ON CONSISTENCY OF BRAND & USABILITY, NOT PIXEL-PERFECTION
77. CLIENT EDUCATION Flickr:  Pink  Sherbet  Photography  
78. A NON-EXHAUSTIVE LIST OF COOL RESOURCES Building a Live Style Guide/ Pattern Library http://pea.rs/ http://pattern-lab.info/ http://warpspire.com/kss/ http://kaleistyleguide.com 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
79. QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/web-not-poster-workshop Flickr:  dcmaster