The Art of Web Design, 101

the art of web design

fromscratchdesign.comslideshare.net/kellyhousholder

@kellyhousholder

Girl designed by iconsmind.com from the thenounproject.com

fromscratchdesign.comslideshare.net/kellyhousholder

Do what you’re good at.

Computer designed by Philip Glenn from the thenounproject.com

1) What makes web design unique?

2) File Setup / File Prep

3) Working with a developer

Every layout, font, color and graphic can should be a deliberate, data informed decision.

Computer designed by Philip Glenn from the thenounproject.com

But where do you get this data?

Besides making your website better (!!) it helps yourclient relationships.

Your clients will trust that you are making good decisions,based on data.

Follow the leader(s)

“Overall we executed about 500 a/b tests on our web pages in a 20 month period which increased donation conversions by 49% and sign up conversions by 161%”

Kyle Rush, Obama Digital Team. Currently head of Optimization at Optimizely.

kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/

kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/

+19%

source: Optimizely Sony Customer Case Study

“Testing helps you make decisions based on objective results, not subjective guesses.”

EVELIEN GEERENSWEB MERCHANDISER, SONY

Optimizely Customer Stories

blog.optimizely.com/2014/02/14/72-people-who-ab-test/

signal vs noise, air bnb

CopyBlogger: 10 Commandments

Google Analytics

OLD CLIENT WEBSITE EXAMPLE

Carousels: slow load, bad conversions

Carousels: slow load, bad conversions

ERIK RUNYONWEEDYGARDEN

Vimeo Stats

Computer designed by Nate Eul from the thenounproject.com

Site strategy.

Pretend to be the user. What do you want a user to click first?

How do things work? Think through every

scenario.

What is the most logical step to take next?

How would your experience be different on a

smartphone?

Person Icon designed by Paulo Sá Ferreira from the Noun Project

Person Icon designed by Paulo Sá Ferreira fromthe Noun Project

Watch and improve.Learn from your mistakes.

Learn from other people’s mistakes.

Person Icon designed by Paulo Sá Ferreira fromthe Noun Project

Design for the future.What kind of content will the client need to add

a few months from now?

Are they launching new products?

Will they want to add new photos? New pages?

fast > fancyDesigny things that can increase page load

big beautiful image: 123 KB

simple overlay: 45 KB

Buy our product, yo!

BUY NOW

example CTA

Using fonts loadedfrom multiple sources.

(stick to one!)

more font weights and styles = more page load

proxima nova, typekit

typography.com

145K 328K

typography.com

Icon Font:

fontawesome.io

SVG icons:

thenounproject.com

What fonts to choose?

jessicahische.is/thinkingthoughts

Photo cred: Hische

blog.typekit.com

google ‘dashicons’ - on github. icons already being loaded with WordPress.

typography.com/blog

typography.com/cloud/the-fonts

1) What makes web design unique?

2) File Setup / File Prep

3) Working with a developer

designsprint.net

Download their sample Illustrator CC template.

Design multiple screensat once.

Export a PDF the size of your testing device.

Practice using a grid.

“...Uniformity and consistency are key to creating a website that your users

will find easy to navigate...”

All About Grid Systems (webdesign.tutsplus.com)

by Rachel Shillcock

“The grid system is an aid, not a guarantee. It permits a number of

possible uses and each designer can look for a solution appropriate to his

personal style. ”

Josef Müller-Brockmann

www.thegridsystem.org

gridsetapp.com

gridsetapp.com

Create transparent overlays of screensizes.

320

768

1024

320768

1) What makes web design unique?

2) File Setup / File Prep

3) Working with a developer

Kick ass WordPress developer who knows their shit

... and doesn’t bail halfway through the project

...makes me look good

...responds to emails

...delivers on time

...is willing to work with me to get the design right

...contributes to the WordPress community

Don’t ask for references,get in touch with the clients in their

portfolio.

Search for recommendeddevelopers from WordPress

sites you trust.

Talk to yourdeveloper

beforedesigning.

Talk about workflow. Ask how they like to recieve

design files. (icon from thenounproject.com)

Talk about workflow. Ask how they like to recieve

design files. (icon from thenounproject.com)

The end.

fromscratchdesign.comslideshare.net/kellyhousholder

@ kellyhousholder

Girl designed by iconsmind.com from the thenounproject.com

Exporting Funtimes.

Exporting tips:

- larger file types and complex designs have trouble

exporting.

- simplify your file

- put a single artboard in a new file and try exporting

- images can bog it down

- drop shadows can bog it down, try removing them

PROTIP: Grouping items in .AI puts them in a group in PSD after exporting. This makes labeling hella easier.

Web design tips:

Create a ‘style guide’ for text on a full width/blog post

page with example mockup for block quote, ordered lists,

numbered lists, italics, decimals, dashes, numbers, bullets,

headings

Use drop shadows sparingly. Drop shadows with only one

side are very difficult. Drop shadows that are radial - (or

on opposite sides of an element) are also difficult

Don’t forget hover states! Button behavior, drop down

behavior, hyperlinks, hover messages, etc!

PSD file tips:

- lable everything really well!

- Put groups of layers in sequences that make sense.

Header, sidebar, footer, widgets, etc.

PROTIP: Drop shadows, opacities, gradients and grouped illustrator symbols DO NOT export well to PS. Ask your developer what they need from you regarding these items.

Gradients:

Since these do not export from .AI to .PSD, the dev

will need:

1) start color and percentage

2) stop color and percentage

3) direction

4) 0-100 placement of the gradient

- bgradients are harder with responsive layouts, be

mindful of the container of your gradient