Web Design Best Practices for Non-Designers

324 views

Published on

Presentation slides from WordCamp Boston 2013.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
324
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design Best Practices for Non-Designers

  1. 1. W E B D E S I G N BEST PRACTICES for non-designers #wcbos @lisawood
  2. 2. LISA WOOD President, Sprout New Media ! We help you make peace with your online marketing web design & development • marketing strategy consulting @lisawood facebook.com/sproutnewmedia sproutnewmedia.com
  3. 3. “thinking Design is made visual. ” – Saul Bass @lisawood
  4. 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
  5. 5. (yes, this is the entire page)
  6. 6. http://cavs.mit.edu/
  7. 7. HOW TO MAKE SURE YOUR DESIGNS DON’T SUCK @lisawood
  8. 8. FIRST, ASK THE QUESTIONS 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?
 ?? ? Who is the client? ? Is there existing branding to consider? ? @lisawood
  9. 9. COLOR @lisawood
  10. 10. @lisawood
  11. 11. 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
  12. 12. TWO MAIN COLORS @lisawood
  13. 13. TWO MAIN COLORS ACCENT @lisawood
  14. 14. https://kuler.adobe.com/create/color-wheel/ @lisawood
  15. 15. http://colourlovers.com @lisawood
  16. 16. 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 AaBbCc @lisawood
  17. 17. handwritten Serif Sans-Serif Classic all caps wide light Calligraphy narrow Display @lisawood
  18. 18. FONT GUIDELINES • Clear, easy to read • choose 1-2 at most • opposites attract • line height is important • virtually unlimited choices for web fonts When you use too many fonts they all fight for your attention @lisawood
  19. 19. 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. X 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. @lisawood
  20. 20. VISUAL HIERARCHY H1 Headline Hierarchy gives a page structure and guides the reader through the content. H2 Headline Structure makes the page easier to scan and easier to read overall H3 Headline Use a combination of 1-2 fonts, colors, and/or weights. This example uses a different color and font for the H3 headline. @lisawood
  21. 21. google.com/fonts @lisawood
  22. 22. fontsquirrel.com
  23. 23. http://www.typeconnection.com/matches.php
  24. 24. PLEASE BE KIND. ! CHOOSE RESPONSIBLY
  25. 25. GRIDS + LAYOUT @lisawood
  26. 26. @lisawood
  27. 27. @lisawood
  28. 28. @lisawood
  29. 29. @lisawood
  30. 30. @lisawood
  31. 31. WHITESPACE & PADDING “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” – Antoine de Saint-Exupery @lisawood
  32. 32. LET THINGS BREATHE 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. @lisawood
  33. 33. LET THINGS BREATHE X 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. @lisawood
  34. 34. @lisawood
  35. 35. @lisawood
  36. 36. less is more @lisawood
  37. 37. IMAGES “Design is not just what it looks like, it's how it feels” photo credit: @mcwsports – Steve Jobs
  38. 38. THIS IS A PAGE @lisawood
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. TIPS + BEST PRACTICES 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 @lisawood
  43. 43. compfight.com
  44. 44. istockphoto.com
  45. 45. “The only important thing about design is how it relates to people” – Victor Papanek @lisawood
  46. 46. image credit: bengisukelesoglu.com
  47. 47. LISA WOOD Sprout New Media web design & development • marketing strategy consulting @lisawood facebook.com/sproutnewmedia sproutnewmedia.com

×