Designing for the Web

A talk I gave at NYU's computer science department about designing for the web.

Transcript

1. Designing for the Web ... or how to think about form
2. About Me ... and what I do
5. What is web design? ... and how do I approach it?
7. “Before you have focused your thoughts you are all over the place, because you are searching. You are feeling. You are looking for things. You do not know what you are doing. You are lost. You are in a maze. So thinking is the number one in the design process. The design is the product of your thinking” - Paul Rand
8. Design without thinking ... is the biggest problem for the new designer
9. ... and you don’t want to do this ...
12. ... so what is design?
13. “Design is relationships. Design is the relationship between form and content” - Paul Rand
14. Content Form = Design
15. Web design is not about making stuff pretty Web design is not about using large fonts Web design is not about choosing hip colors Web design is not about javascript animations Web design is not about following trends Web design is not about dark-gray gradients Web design is not about prettifying Web design is about finding a form that fits your content This form is often the simplest and clearest form possible You can only do this by thinking about your content
17. Danger DANGER!!!
18. Danger
19. The bad thing ... is that simplifying is really hard (especially on the web)
24. Another kind of definition is that design is a system of relationships between all of the aspects of the problem, which means the relationship between you and the piece of canvas, [...] you and the eraser, you and the pen. The relationship between the elements proportions, which mean the relationship of sizes. I can go on all day. This is one of the reasons why design is so difficult to accomplish. Because every time you do something, the potential for making mistakes is enormous. The process of designing is from complexity to simplicity. The part of complexity if filled with all kinds of horrible problems.” - Paul Rand
25. The good thing ... is that you can learn to think (about relationships)
26. My Process ... is to think about relationships
27. One relationship ... is between the content and the shapes
29. Random Positioning
30. Grouped
31. Grouped Similar
32. Complex Negative Space
33. Simple Negative Space
34. Align Left
35. Align Center
39. Menu Bar Image of person Heading Body text
40. Menu Bar Image of person Heading Body text
41. Menu Bar
42. Menu Bar Image
43. Menu Bar Image Heading
44. Menu Bar Image Heading Body text
45. Menu Bar Image Heading Body text
46. Menu Bar Image Heading Body text
47. Menu Bar Image Heading Body text
48. Menu Bar Image Heading Body text
49. Menu Bar Image Heading Body text
54. www.960.gs http://blueprintcss.org/ http://twitter.github.com/bootstrap/ ... or build your own Grid Systems
55. Another relationship ... is between the content and the fonts
69. http://www.gummisig.com/blog
70. http://line25.com/articles/a-showcase-of- beautiful-typography-in-web-design http://webdesignledger.com/inspiration/40- examples-of-beautiful-typography-in-web- design
71. A third relationship ... is between the content and colors
74. Feminine
76. Playful
78. Digital
81. More examples ... of people who think about relationships
82. Sed ut perspiciatis unde omnis iste natus November 12, 1951
85. Trends ... stay away from them
86. http://8020.com/ http://metalabdesign.com/ http://www.odopod.com/ http://erskinedesign.com/ http://kyanmedia.com/ http://agenda26.com/ http://www.inspira-uk.com/ http://blueskyskills.co.uk/ http://www.geotecsurveys.com/
87. Do all of this well ... and users will stay on your site
89. Readings ... a list of books you may want to read
90. Paul Rand - A Designer’s Art Paul Rand - Design, Form and Chaos Bulletins of the Serving library http://www.servinglibrary.org/ Dot Dot Dot Magazine http://www.dot-dot-dot.us/ Kimberly Elam - Grid Systems Josef Albers - Interaction of Color
91. Questions?