Web Design Best Practices for Non-Designers

56

Click here to load reader

description

Presentation slides from WordCamp Boston 2013.

Transcript of Web Design Best Practices for Non-Designers

Page 1: Web Design Best Practices for Non-Designers

W E B D E S I G N BEST PRACTICES

for non-designers

@lisawood

#wcbos

Page 2: Web Design Best Practices for Non-Designers

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

Page 3: Web Design Best Practices for Non-Designers

“ Design is

thinkingmade visual.”– Saul Bass

@lisawood

Page 4: Web Design Best Practices for Non-Designers

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

Page 5: Web Design Best Practices for Non-Designers
Page 6: Web Design Best Practices for Non-Designers
Page 7: Web Design Best Practices for Non-Designers
Page 8: Web Design Best Practices for Non-Designers

(yes, this is the entire page)

Page 9: Web Design Best Practices for Non-Designers

http://cavs.mit.edu/

Page 10: Web Design Best Practices for Non-Designers

HOW TO MAKE SURE YOUR DESIGNS DON’T SUCK

@lisawood

Page 11: Web Design Best Practices for Non-Designers

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

?????

Page 12: Web Design Best Practices for Non-Designers

COLOR@lisawood

Page 13: Web Design Best Practices for Non-Designers

@lisawood

Page 14: Web Design Best Practices for Non-Designers

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

Page 15: Web Design Best Practices for Non-Designers

TWO MAIN COLORS

@lisawood

Page 16: Web Design Best Practices for Non-Designers

TWO MAIN COLORS ACCENT

@lisawood

Page 17: Web Design Best Practices for Non-Designers

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

Page 18: Web Design Best Practices for Non-Designers

http://colourlovers.com@lisawood

Page 19: Web Design Best Practices for Non-Designers

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

Page 20: Web Design Best Practices for Non-Designers

Sans-SerifSerif

wide

light

all caps

handwritten

Classic

Displaynarrow

Calligraphy

@lisawood

Page 21: Web Design Best Practices for Non-Designers

• 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

Page 22: Web Design Best Practices for Non-Designers

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

Page 23: Web Design Best Practices for Non-Designers

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

Page 24: Web Design Best Practices for Non-Designers

google.com/fonts

@lisawood

Page 25: Web Design Best Practices for Non-Designers

fontsquirrel.com

Page 26: Web Design Best Practices for Non-Designers

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

Page 27: Web Design Best Practices for Non-Designers

PLEASE BE KIND. !

CHOOSE RESPONSIBLY

Page 28: Web Design Best Practices for Non-Designers

GRIDS + LAYOUT

@lisawood

Page 29: Web Design Best Practices for Non-Designers
Page 30: Web Design Best Practices for Non-Designers
Page 31: Web Design Best Practices for Non-Designers

@lisawood

Page 32: Web Design Best Practices for Non-Designers

@lisawood

Page 33: Web Design Best Practices for Non-Designers

@lisawood

Page 34: Web Design Best Practices for Non-Designers

@lisawood

Page 35: Web Design Best Practices for Non-Designers

@lisawood

Page 36: Web Design Best Practices for Non-Designers
Page 37: Web Design Best Practices for Non-Designers
Page 38: Web Design Best Practices for Non-Designers
Page 39: Web Design Best Practices for Non-Designers
Page 40: Web Design Best Practices for Non-Designers

– 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

Page 41: Web Design Best Practices for Non-Designers

@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

Page 42: Web Design Best Practices for Non-Designers

@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

Page 43: Web Design Best Practices for Non-Designers

@lisawood

Page 44: Web Design Best Practices for Non-Designers

@lisawood

Page 45: Web Design Best Practices for Non-Designers

less is more

@lisawood

Page 46: Web Design Best Practices for Non-Designers

IMAGES

“Design is not just what it looks like, it's how it feels”– Steve Jobs

photo credit: @mcwsports

Page 47: Web Design Best Practices for Non-Designers

THIS IS A PAGE

@lisawood

Page 48: Web Design Best Practices for Non-Designers

THIS IS A PAGEThis is text on a page. This is more boring text on a page. blah blah blah blah blah blah

@lisawood

Page 49: Web Design Best Practices for Non-Designers

THIS IS A PAGEThis is text on a page. This is more boring text on a page. blah blah blah blah blah blah

@lisawood

Page 50: Web Design Best Practices for Non-Designers

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

Page 51: Web Design Best Practices for Non-Designers

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

Page 52: Web Design Best Practices for Non-Designers

compfight.com

Page 53: Web Design Best Practices for Non-Designers

istockphoto.com

Page 54: Web Design Best Practices for Non-Designers

– Victor Papanek

“The only important thing about design is how it relates to people”

@lisawood

Page 55: Web Design Best Practices for Non-Designers

image credit: bengisukelesoglu.com

Page 56: Web Design Best Practices for Non-Designers

LISA WOODSprout New Media

@lisawoodsproutnewmedia.com

web design & development • marketing strategy consulting

facebook.com/sproutnewmedia