Upload
kellyhousholder
View
107
Download
0
Embed Size (px)
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.
Citation preview
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