Post on 05-Dec-2014
description
W E B D E S I G N BEST PRACTICES
for non-designers
@lisawood
#wcbos
LISA WOODPresident, Sprout New Media !We help you make peace with your online marketing
@lisawoodsproutnewmedia.com
web design & development • marketing strategy consulting
facebook.com/sproutnewmedia
“ Design is
thinkingmade visual.”– Saul Bass
@lisawood
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
(yes, this is the entire page)
HOW TO MAKE SURE YOUR DESIGNS DON’T SUCK
@lisawood
FIRST, ASK THE QUESTIONSWho 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
?????
COLOR@lisawood
@lisawood
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
TWO MAIN COLORS
@lisawood
TWO MAIN COLORS ACCENT
@lisawood
AaBbCc
TYPOGRAPHYTypography: (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
Sans-SerifSerif
wide
light
all caps
handwritten
Classic
Displaynarrow
Calligraphy
@lisawood
• 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
LINE HEIGHTLorem 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
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
PLEASE BE KIND. !
CHOOSE RESPONSIBLY
GRIDS + LAYOUT
@lisawood
@lisawood
@lisawood
@lisawood
@lisawood
@lisawood
– 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
@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
@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.
XLET THINGS BREATHE
@lisawood
less is more
@lisawood
IMAGES
“Design is not just what it looks like, it's how it feels”– Steve Jobs
photo credit: @mcwsports
THIS IS A PAGE
@lisawood
THIS IS A PAGEThis is text on a page. This is more boring text on a page. blah blah blah blah blah blah
@lisawood
THIS IS A PAGEThis is text on a page. This is more boring text on a page. blah blah blah blah blah blah
@lisawood
THIS IS A PAGEThis is text on a page. This is more boring text on a page. blah blah blah blah blah blah
see the difference?
@lisawood
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
– Victor Papanek
“The only important thing about design is how it relates to people”
@lisawood
image credit: bengisukelesoglu.com
LISA WOODSprout New Media
@lisawoodsproutnewmedia.com
web design & development • marketing strategy consulting
facebook.com/sproutnewmedia