7 Deadly Web Design Sins You Might be Making
-
Upload
kissmetrics-on-slideshare -
Category
Design
-
view
13.419 -
download
1
Transcript of 7 Deadly Web Design Sins You Might be Making
![Page 1: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/1.jpg)
Joe Putnam, Growth Marketer at iSpionage
7 Deadly Web Design Sins You Might Be Making January 29, 2015
![Page 2: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/2.jpg)
@ThueLMadsen #KISSwebinar
Join the conversation on Twi!er
![Page 3: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/3.jpg)
Joe Putnam - @JosephPutnam – www.ispionage.com Joe Putnam is a growth marketer at iSpionage and previously helped companies like Rejoiner, SlideShare, KISSmetrics, and Crazy Egg with their content marketing. He’s been doing internet marketing for 5 years now and dabbles in everything from content production to conversion rate optimization and PPC marketing.
![Page 4: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/4.jpg)
@JosephPutnam #KISSwebinar
Join the conversation on Twi!er
![Page 5: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/5.jpg)
1 Web design is challenging
○ Fonts that are too small
○ Rotating sliders/carousels
○ Low contrast fonts
○ Poor line height for text
○ Line lengths that are too long
○ Improper use of accent colors
○ Violating common design principles
2 7 deadly sins of web design
3
Table of Contents
![Page 6: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/6.jpg)
WATCH WEBINAR RECORDING NOW
![Page 7: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/7.jpg)
1
“As a medium for the display of information, the printed
page is superb. It affords enough resolution to meet the
eye’s demand…It lets the reader control the mode and
rate of inspection…Those positive a"ributes all relate, as
‘indicated,’ to the display function. The tallies that could
be made for storage, organization, and retrieval
functions are less favorable.”
— J.C. Licklider from Libraries of the Future (1965)
![Page 8: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/8.jpg)
1. We’re still learning how to best design for the web.
2. A lot of people need to be on the same page. (Designers,
business owners, marketers, developers, etc.)
3. We now have to design for multiple devices.
4. Most people copy other sites when that’s not always a good
idea.
5. There are so many options when it comes to fonts,
typography, layouts, etc.
Reasons Why Web Design Is So Challenging
![Page 9: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/9.jpg)
7 Deadly Sins of Web Design
![Page 10: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/10.jpg)
Fonts that are too small 1
![Page 11: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/11.jpg)
www.feedthebot.com/mobile/legible-font-size.html
Make sure your fonts are easy to read.
![Page 12: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/12.jpg)
Headline: 41 px; Proxima Nova Sub-headline: 16 px; Proxima Nova Body: 14 px; Helvetica
![Page 13: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/13.jpg)
Body Font: 16 px; Helvetica Sidebar Font: 14 px; Helvetica
![Page 14: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/14.jpg)
2
![Page 15: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/15.jpg)
RULES TO FOLLOW
○ Be sure your fonts are easy to read. ○ Make sure your fonts have a good hierarchy. ○ Never use a font smaller than 14 px.
![Page 16: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/16.jpg)
LOG IN WITH GOOGLE
Start Your Free KISSmetrics Trial
![Page 17: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/17.jpg)
Rotating sliders/carousels 2
![Page 18: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/18.jpg)
![Page 19: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/19.jpg)
“We have tested rotating offers many times and have
found it to be a poor way of presenting homepage
content.”
— Chris Goward from Wider Funnel
“Rotating banners are absolutely evil and should be
removed immediately.”
— Tim Ash from Site Tuners
![Page 20: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/20.jpg)
1% clicks on slider 84% of those on slider #1
“I didn’t have time to read it. It keeps flashing too quickl
y.
TWO STUDIES
![Page 21: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/21.jpg)
![Page 22: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/22.jpg)
RULE TO FOLLOW
Don’t use moving sliders unless there’s a convincing reason to do so.
![Page 23: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/23.jpg)
Low contrast fonts 3
![Page 24: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/24.jpg)
Example #2
Example #1
![Page 25: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/25.jpg)
h!p://contrastrebellion.com/
![Page 26: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/26.jpg)
h!p://evernote.com
![Page 27: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/27.jpg)
www.hubspot.com
![Page 28: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/28.jpg)
www.lakepointervresort.com
![Page 29: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/29.jpg)
h!p://www.helpscout.net
![Page 30: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/30.jpg)
RULES TO FOLLOW
○ Always use high contrast fonts. ○ Think twice before using reverse type and only use it sparingly.
![Page 31: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/31.jpg)
Poor line height for text 4
![Page 32: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/32.jpg)
www.pearsonified.com/typography
![Page 33: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/33.jpg)
www.pearsonified.com/typography
![Page 34: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/34.jpg)
RULE TO FOLLOW
Use the Golden Ratio Typography calculator to find the best line height for your font size and line length.
![Page 35: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/35.jpg)
Line heights that are too long 5
![Page 36: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/36.jpg)
h!p://baymard.com/blog/line-length-readability
![Page 37: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/37.jpg)
h!p://blog.marketo.com
![Page 38: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/38.jpg)
RULE TO FOLLOW
Make sure your line length doesn’t become too long causing your content to be difficult to read.
![Page 39: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/39.jpg)
Improper use of accent colors 6
![Page 40: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/40.jpg)
h!p://grasshopper.com/
![Page 41: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/41.jpg)
www.c12recoverydrink.com/
![Page 42: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/42.jpg)
RULE TO FOLLOW
Be sure to use accent colors for what it’s meant for—drawing a!ention to calls to action.
![Page 43: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/43.jpg)
Violating common design principles
7
![Page 44: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/44.jpg)
“Faced with the prospect of using a convention, there’s
a great temptation for designers to reinvent the
wheel, largely because they feel (not incorrectly) that
they’ve been hired to do something new and different,
and not the same old thing…Innovate when you know
you have a be"er idea…but take advantage of
conventions when you don’t.”
— Steve Krug in Don’t Make Me Think
![Page 45: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/45.jpg)
Found by @ascho!mueller www.weta.me
![Page 46: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/46.jpg)
h!p://neilpatel.com/
![Page 47: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/47.jpg)
RULE TO FOLLOW
Think twice before a!empting to reinvent the wheel when it comes to common web design conventions.
![Page 48: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/48.jpg)
Questions?
Joe Putnam Growth Marketer
iSpionage @josephputnam
Thue Madsen Marketing Operations Specialist
KISSmetrics @thuelmadsen
![Page 49: 7 Deadly Web Design Sins You Might be Making](https://reader030.fdocuments.us/reader030/viewer/2022032420/55a51cf91a28ab3b5a8b4795/html5/thumbnails/49.jpg)
THANK YOU
Joe Putnam www.ispionage.com/kissmetrics