A Website Is Not A Poster: AIGA Design Workshop

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 and frustration. You will learn specific guidelines to let go of that control while still creating beautiful, functional web designs. We will also discuss how to understand the technologies powering the web from a design perspective, as well as collaborate with developers to ensure a successful project without all the usual struggles. Presented at AIGA Design Camp 2015

Transcript

1. A WEBSITE IS NOT A POSTER DESIGNING SUCCESSFULLY FOR THE WEB Flickr:  derrickcollins  
2. @marktimemedia I Design THINGS.   USUALLY WORDPRESS.   HI, I’M MICHELLE.  
3. @marktimemedia {DEVELOPERS} I ALSO DO A LOT OF WORK WITH   Can’t we all just get along?
4. @marktimemedia A WEBSITE IS LIKE A POSTER? Principles of hierarchy Communicating a message Getting attention Inspiring call to action Flickr:  Ma0hew  Kenwrick  
5. @marktimemedia 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. @marktimemedia PRINT DESIGN IS ABOUT Flickr:  The  Other  Dan   CONTROL  
7. @marktimemedia STATIC ENVIRONMENT Long, precise process Defined stopping point Shared understanding of goals
8. @marktimemedia WEB DESIGN IS ABOUT Flickr:  intermayer   LETTING GO OF CONTROL
9. @marktimemedia DYNAMIC ENVIRONMENT Different Devices Different Resolutions Different Content Flickr:  Jeremy  Keith  
10. @marktimemedia IF PRINTING WERE LIKE WEB DESIGN WE’D BUILD A NEW TO OUTPUT EACH DESIGN PRINTER Flickr:  Kenoir  
11. @marktimemedia PRINT DESIGN IS LIKE A SYMPHONY Flickr:  Alsal  Photography  
12. @marktimemedia WEB DESIGN IS LIKE JAZZ Flickr:  Tom  Marcello  
13. @marktimemedia YOU, THE COMPOSER Flickr:  el_finco  
14. @marktimemedia DESIGN FOR A Flickr:  Basial   PAGE  
15. @marktimemedia DESIGN FOR A Flickr:  Prince  Lang  Gallery   SYSTEM  
16. @marktimemedia WHAT IS A DESIGN SYSTEM?
17. @marktimemedia AESTHETIC RULES  
18. @marktimemedia ELEMENT RULES Flickr:  halDeak  
19. @marktimemedia Flickr:  Prince  Lang  Gallery  
20. @marktimemedia CATALOGUE DESIGN Flickr:  Zsolt  LesF  
21. @marktimemedia BRAND GUIDES Flickr:  Fluid  Design  
22. @marktimemedia WHY DO WE NEED A SYSTEM?
23. @marktimemedia PURPOSEFUL CONTENT-FIRST DESIGN Flickr:  
24. @marktimemedia DIGITAL IS A LIVING PROCESS
25. @marktimemedia CONTENT IS NEVER Flickr:  Idrose   PERFECT
26. @marktimemedia TRADITIONAL SOLUTIONS
27. @marktimemedia WE’RE DOING UNNECCESARY WORK
28. @marktimemedia WHERE DOES DESIGN FIT IN THIS WORKFLOW?
29. @marktimemedia DESIGNERS ARE PROBLEM SOLVERS
30. @marktimemedia DESIGN IS HOW IT WORKS
31. @marktimemedia NOT CHANGING THE PROCESS, JUST THE PRODUCT Flickr:  Pete  Fletch  
32. @marktimemedia HOW DO WE DESIGN FOR SYSTEMS?
33. @marktimemedia DEFINE THE RULES Flickr:  Ma0  J  Newman  
34. @marktimemedia DESIGN FOR PATTERNS NOT PAGES Flickr:  svenwerk  
35. @marktimemedia CONTENT TYPES
36. @marktimemedia SPECIFIC COMPONENTS
37. @marktimemedia MODULES
38. @marktimemedia TEMPLATES
39. @marktimemedia DELIVERABLES
40. @marktimemedia STYLE TILES http://styletil.es
41. @marktimemedia SITE ELEMENTS
42. @marktimemedia GRIDS & WIREFRAMES
43. @marktimemedia ANNOTATED MOCKUPS https://www.specctr.com/
44. @marktimemedia PATTERN LIBRARY http://www.bbc.co.uk/gel
45. @marktimemedia Flickr:  Fm  ellis   TEST THE  
46. @marktimemedia DESIGN FOR CONTENT IMPERFECT  
47. @marktimemedia DESIGN FOR THE SYSTEM NOT FOR THE DEVICE
48. @marktimemedia THE RULES Flickr:  Harvard  Avenue  
49. @marktimemedia EXCEPTIONS ADD Flickr:  Nick  Sherman   COMPLEXITY  
50. @marktimemedia CHOOSE COMPLEXITY WISELY Flickr:  Nick  Sherman  
51. @marktimemedia COLLABORATING WITH DEVELOPERS
52. @marktimemedia RESPECT EACH OTHER THE PROCESS
53. @marktimemedia INCLUDE THE DEVELOPER EARLY
54. @marktimemedia SPEAKING A COMMON   LANGUAGE  
55. @marktimemedia A WEB DESIGNER SHOULD BE ABLE TO READ AND UNDERSTAND HTML & CSS EVEN IF THEY DON’T WANT TO WRITE IT
56. @marktimemedia UGH, WHY DO I HAVE TO KNOW THAT STUFF!? Isn’t all that scary code what the developers are for?
57. @marktimemedia JUST AS A PRINT DESIGNER NEEDS TO UNDERSTAND THE PRINTING PROCESS… … A WEB DESIGNER NEEDS TO UNDERSTAND THE TOOLS THAT BUILD THEIR DESIGNS
58. @marktimemedia HTML/CSS IS THE BLUEPRINT Flickr:  enfilm  
59. @marktimemedia SEMANTIC MARKUP: IT’S ABOUT Flickr:  See-­‐ming  Lee  李思明  SML     MEANING
60. @marktimemedia 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?
61. @marktimemedia <header> <section> <article> <aside> <nav>
62. @marktimemedia TYPOGRAPHIC HIERARCHY: HOW IMPORTANT IS THIS? Flickr:  Xosé  Castro     Headings Paragraphs Lists Blockquotes Hierarchical meaning, not just visual styling
63. @marktimemedia <h1> <h3> <p> <ol> <blockquote> <code> <p> <p> <h3> <p>
64. @marktimemedia CSS AS DESIGN COMMUNICATION Flickr:  xutheinsun  
65. @marktimemedia Colors Fonts Margins Padding Headings Paragraphs Lists Links Icons Buttons Forms Tooltips Navigation Asides POSSIBLE REUSABLE ELEMENTS:
66. @marktimemedia INCLUDED IN A STYLE GUIDE http://www.coding.smashingmagazine.com
67. @marktimemedia EVALUATING DEVELOPMENT WORK Flickr:  Kovah.de  
68. @marktimemedia QUALITY   VS PIXEL PERFECTION Flickr:  stephenjohnbryde    
69. @marktimemedia Flickr:   Flickr:  stephenjohnbryde     SPECIFIC   FEEDBACK
70. @marktimemedia Flickr:  stephenjohnbryde     WHEN IT DOESN’T WORK
71. @marktimemedia Flickr:  stephenjohnbryde     KEEP THE CONVERSATION GOING
72. @marktimemedia QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/aiga-website-not-poster