Presentation slides from WordCamp Boston 2013.

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

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’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

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. 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

20. handwritten
Serif
Sans-Serif
Classic
all caps
wide
light
Calligraphy
narrow
Display
@lisawood

21. 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

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.
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

23. 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

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. 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

41. 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

42. 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

43. @lisawood

44. @lisawood

45. less is more
@lisawood

46. IMAGES
“Design is not just what it looks like, it's how it feels”
photo credit: @mcwsports
– Steve Jobs

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. 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

52. compfight.com

53. istockphoto.com

54. “The only important thing about design
is how it relates to people”
– Victor Papanek
@lisawood

55. image credit: bengisukelesoglu.com

56. LISA WOOD
Sprout New Media
web design & development • marketing strategy consulting
@lisawood
facebook.com/sproutnewmedia
sproutnewmedia.com