Web Design Best Practices for Non-Designers

Presentation slides from WordCamp Boston 2013

Transcript

1. WEB D E S I G N BEST PRACTICES for non-designers @lisawood #wcbos
2. LISA WOOD President, Sprout New Media ! We help you make peace with your online marketing @lisawood sproutnewmedia.com web design & development • marketing strategy consulting facebook.com/sproutnewmedia
3. “Design is thinking made visual.” – Saul Bass @lisawood
4. Design tells a story… ! but sometimes the details get a little messed up… ! …and we don’t want your site to look like this… @lisawood
8. (yes, this is the entire page)
9. http://cavs.mit.edu/
10. HOW TO MAKE SURE YOUR DESIGNS DON’T SUCK @lisawood
11. FIRST, ASK THE QUESTIONS Who is the client? Who is the client’s customer? What’s the purpose of the website? What do we need it to DO? What’s the customer’s pain?
 Is there existing branding to consider? @lisawood ?? ? ? ?
12. COLOR @lisawood
13. @lisawood
14. RAINBOWS ARE FOR SKITTLES Keep it SIMPLE. ! Use one or two main colors and one accent color. ! It’s ok to use different shades of the same color. ! You don’t need to count black or white in your color scheme. @lisawood
15. TWO MAIN COLORS @lisawood
16. TWO MAIN COLORS ACCENT @lisawood
17. https://kuler.adobe.com/create/color-wheel/ @lisawood
18. http://colourlovers.com @lisawood
19. AaBbCc TYPOGRAPHY Typography: (from the Greek words τύπος (typos) = form and γραφή (graphe) = writing) is the art and technique of arranging type in order to make language visible. k @lisawood
20. Sans-Serif Serif wide light all caps handwritten Classic Display narrow Calligraphy @lisawood
21. • Clear, easy to read • choose 1-2 at most • opposites attract • line height is important • virtually unlimited choices for web fonts FONT GUIDELINES When you use too many fonts they all fight for your attention @lisawood
22. LINE HEIGHT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Duis lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet, semper mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Duis lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet, semper mauris. X @lisawood
23. VISUAL HIERARCHY H1 Headline H2 Headline H3 Headline Hierarchy gives a page structure and guides the reader through the content. Structure makes the page easier to scan and easier to read overall Use a combination of 1-2 fonts, colors, and/or weights. This example uses a different color and font for the H3 headline. @lisawood
24. google.com/fonts @lisawood
25. fontsquirrel.com
26. http://www.typeconnection.com/matches.php
27. PLEASE BE KIND. ! CHOOSE RESPONSIBLY
28. GRIDS + LAYOUT @lisawood
31. @lisawood
32. @lisawood
33. @lisawood
34. @lisawood
35. @lisawood
40. – Antoine de Saint-Exupery “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” WHITESPACE & PADDING @lisawood
41. @lisawood Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Duis lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet, interdum diam non, convallis purus. Nunc odio arcu, placerat ac dolor sit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Duis lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Duis lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet. LET THINGS BREATHE
42. @lisawood Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Duis lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet, interdum diam non, convallis purus. Nunc odio arcu, placerat ac dolor sit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Duis lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum malesuada est a pretium. In id semper magna. Aliquam eget neque elementum, interdum diam non, convallis purus. Nunc odio arcu, placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada. Duis lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet. X LET THINGS BREATHE
43. @lisawood
44. @lisawood
45. less is more @lisawood
46. IMAGES “Design is not just what it looks like, it's how it feels” – Steve Jobs photo credit: @mcwsports
47. THIS IS A PAGE @lisawood
48. THIS IS A PAGE This is text on a page. This is more boring text on a page. blah blah blah blah blah blah @lisawood
49. THIS IS A PAGE This is text on a page. This is more boring text on a page. blah blah blah blah blah blah @lisawood
50. THIS IS A PAGE This is text on a page. This is more boring text on a page. blah blah blah blah blah blah see the difference? @lisawood
51. be mindful of licensing give credit to the photographer use images that are relevant to the content use images that reflect the mood of the page quality counts web resolution = 72dpi (and optimize!) JPG format or PNG formats watch sight lines TIPS + BEST PRACTICES @lisawood
52. compfight.com
53. istockphoto.com
54. – Victor Papanek “The only important thing about design is how it relates to people” @lisawood
55. image credit: bengisukelesoglu.com
56. LISA WOOD Sprout New Media @lisawood sproutnewmedia.com web design & development • marketing strategy consulting facebook.com/sproutnewmedia