Your SlideShare is downloading. ×
0
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Web Design Best Practices for Non-Designers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Design Best Practices for Non-Designers

164

Published on

Presentation slides from WordCamp Boston 2013.

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
164
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. W E B D E S I G N BEST PRACTICES for non-designers #wcbos @lisawood
  • 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. “thinking Design is 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
  • 5. (yes, this is the entire page)
  • 6. http://cavs.mit.edu/
  • 7. HOW TO MAKE SURE YOUR DESIGNS DON’T SUCK @lisawood
  • 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. COLOR @lisawood
  • 10. @lisawood
  • 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. TWO MAIN COLORS @lisawood
  • 13. TWO MAIN COLORS ACCENT @lisawood
  • 14. https://kuler.adobe.com/create/color-wheel/ @lisawood
  • 15. http://colourlovers.com @lisawood
  • 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. handwritten Serif Sans-Serif Classic all caps wide light Calligraphy narrow Display @lisawood
  • 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. 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. 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. google.com/fonts @lisawood
  • 22. fontsquirrel.com
  • 23. http://www.typeconnection.com/matches.php
  • 24. PLEASE BE KIND. ! CHOOSE RESPONSIBLY
  • 25. GRIDS + LAYOUT @lisawood
  • 26. @lisawood
  • 27. @lisawood
  • 28. @lisawood
  • 29. @lisawood
  • 30. @lisawood
  • 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. 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. 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. @lisawood
  • 35. @lisawood
  • 36. less is more @lisawood
  • 37. IMAGES “Design is not just what it looks like, it's how it feels” photo credit: @mcwsports – Steve Jobs
  • 38. THIS IS A PAGE @lisawood
  • 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. 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. 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. 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. compfight.com
  • 44. istockphoto.com
  • 45. “The only important thing about design is how it relates to people” – Victor Papanek @lisawood
  • 46. image credit: bengisukelesoglu.com
  • 47. LISA WOOD Sprout New Media web design & development • marketing strategy consulting @lisawood facebook.com/sproutnewmedia sproutnewmedia.com

×