Web Design Best Practices for Non-Designers

W E B D E S I G N

BEST PRACTICES
for non-designers
#wcbos

@lisawood

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

“thinking
Design is

made

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

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

ACCENT

@lisawood

https://kuler.adobe.com/create/color-wheel/
@lisawood

http://colourlovers.com
@lisawood

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

handwritten

Serif
Sans-Serif

Classic

all caps
wide

light

Calligraphy

narrow

Display
@lisawood

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

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

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

http://www.typeconnection.com/matches.php

PLEASE

BE KIND.

!

CHOOSE
RESPONSIBLY

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

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.

lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet.
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

LET THINGS BREATHE

X

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.
placerat ac blandit ut, iaculis et augue. Nulla non felis vel risus convallis malesuada.

lobortis in odio eget interdum. Cras sed felis ultrices, pulvinar arcu sit amet.
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

IMAGES

“Design is not just what it looks like, it's how it feels”
photo credit: @mcwsports

– Steve Jobs

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

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

TIPS + BEST PRACTICES
be mindful of licensing

give credit to the photographer

use images that are relevant to the content

use images that reﬂect the mood of the page

quality counts

web resolution = 72dpi (and optimize!)

JPG format or PNG formats

watch sight lines

@lisawood

“The only important thing about design

is how it relates to people”

– Victor Papanek

@lisawood

image credit: bengisukelesoglu.com

LISA WOOD
Sprout New Media

web design & development • marketing strategy consulting

@lisawood
facebook.com/sproutnewmedia

sproutnewmedia.com

Web Design Best Practices for Non-Designers

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (15)

Ähnlich wie Web Design Best Practices for Non-Designers

Ähnlich wie Web Design Best Practices for Non-Designers (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web Design Best Practices for Non-Designers