the art of web design, 101
DESCRIPTION
A design talk geared towards designers who are new to the world of web design. I’ll cover items such as: how web design is unique from other kinds of design (such as print), how to leverage research and analytics to create data informed designs, steps to become a proficient web designer and how to choose and work with developers. If there are folks in the room using Illustrator or PSD, I'll show you how to set up Illustrator files for web design and prep files for a developer.TRANSCRIPT
![Page 1: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/1.jpg)
the art of web design
fromscratchdesign.comslideshare.net/kellyhousholder
@kellyhousholder
Girl designed by iconsmind.com from the thenounproject.com
![Page 2: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/2.jpg)
fromscratchdesign.comslideshare.net/kellyhousholder
Do what you’re good at.
Computer designed by Philip Glenn from the thenounproject.com
![Page 3: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/3.jpg)
1) What makes web design unique?
2) File Setup / File Prep
3) Working with a developer
![Page 4: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/4.jpg)
Every layout, font, color and graphic can should be a deliberate, data informed decision.
Computer designed by Philip Glenn from the thenounproject.com
![Page 5: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/5.jpg)
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.
![Page 6: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/6.jpg)
Follow the leader(s)
![Page 7: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/7.jpg)
“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/
![Page 8: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/8.jpg)
kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/
+19%
![Page 9: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/9.jpg)
source: Optimizely Sony Customer Case Study
“Testing helps you make decisions based on objective results, not subjective guesses.”
EVELIEN GEERENSWEB MERCHANDISER, SONY
![Page 10: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/10.jpg)
Optimizely Customer Stories
blog.optimizely.com/2014/02/14/72-people-who-ab-test/
signal vs noise, air bnb
![Page 11: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/11.jpg)
CopyBlogger: 10 Commandments
![Page 12: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/12.jpg)
Google Analytics
![Page 13: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/13.jpg)
OLD CLIENT WEBSITE EXAMPLE
Carousels: slow load, bad conversions
![Page 14: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/14.jpg)
Carousels: slow load, bad conversions
ERIK RUNYONWEEDYGARDEN
![Page 15: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/15.jpg)
Vimeo Stats
![Page 16: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/16.jpg)
![Page 17: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/17.jpg)
Computer designed by Nate Eul from the thenounproject.com
Site strategy.
![Page 18: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/18.jpg)
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
![Page 19: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/19.jpg)
Person Icon designed by Paulo Sá Ferreira fromthe Noun Project
Watch and improve.Learn from your mistakes.
Learn from other people’s mistakes.
![Page 20: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/20.jpg)
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?
![Page 21: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/21.jpg)
fast > fancyDesigny things that can increase page load
![Page 22: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/22.jpg)
big beautiful image: 123 KB
![Page 23: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/23.jpg)
simple overlay: 45 KB
![Page 24: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/24.jpg)
Buy our product, yo!
BUY NOW
example CTA
![Page 25: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/25.jpg)
Using fonts loadedfrom multiple sources.
(stick to one!)
![Page 26: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/26.jpg)
more font weights and styles = more page load
![Page 27: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/27.jpg)
proxima nova, typekit
![Page 28: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/28.jpg)
typography.com
145K 328K
![Page 29: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/29.jpg)
typography.com
![Page 30: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/30.jpg)
Icon Font:
fontawesome.io
![Page 31: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/31.jpg)
![Page 32: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/32.jpg)
SVG icons:
thenounproject.com
![Page 33: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/33.jpg)
![Page 34: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/34.jpg)
What fonts to choose?
jessicahische.is/thinkingthoughts
![Page 35: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/35.jpg)
Photo cred: Hische
![Page 36: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/36.jpg)
blog.typekit.com
![Page 37: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/37.jpg)
![Page 38: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/38.jpg)
google ‘dashicons’ - on github. icons already being loaded with WordPress.
typography.com/blog
typography.com/cloud/the-fonts
![Page 39: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/39.jpg)
![Page 40: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/40.jpg)
1) What makes web design unique?
2) File Setup / File Prep
3) Working with a developer
![Page 41: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/41.jpg)
designsprint.net
Download their sample Illustrator CC template.
![Page 42: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/42.jpg)
![Page 43: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/43.jpg)
Design multiple screensat once.
![Page 44: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/44.jpg)
![Page 45: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/45.jpg)
Export a PDF the size of your testing device.
![Page 46: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/46.jpg)
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
![Page 47: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/47.jpg)
“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
![Page 48: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/48.jpg)
gridsetapp.com
![Page 49: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/49.jpg)
gridsetapp.com
![Page 50: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/50.jpg)
Create transparent overlays of screensizes.
![Page 51: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/51.jpg)
320
768
1024
![Page 52: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/52.jpg)
320768
![Page 53: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/53.jpg)
1) What makes web design unique?
2) File Setup / File Prep
3) Working with a developer
![Page 54: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/54.jpg)
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
![Page 55: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/55.jpg)
Don’t ask for references,get in touch with the clients in their
portfolio.
![Page 56: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/56.jpg)
Search for recommendeddevelopers from WordPress
sites you trust.
![Page 57: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/57.jpg)
Talk to yourdeveloper
beforedesigning.
![Page 58: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/58.jpg)
Talk about workflow. Ask how they like to recieve
design files. (icon from thenounproject.com)
![Page 59: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/59.jpg)
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
![Page 60: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/60.jpg)
Exporting Funtimes.
![Page 61: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/61.jpg)
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.
![Page 62: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/62.jpg)
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!
![Page 63: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/63.jpg)
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.
![Page 64: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/64.jpg)
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
![Page 65: The Art of Web Design, 101](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e48285906b597718b46cd/html5/thumbnails/65.jpg)