Transcript
Page 1: Typography and User Experience in Web Design

SARA CANNON HTTP://RAN.GE

Page 2: Typography and User Experience in Web Design

Sara CannonPartner & Creative Director at Range http://ran.ge

@saracannon !

slideshare.net/saracannon

Page 3: Typography and User Experience in Web Design

WEB DESIGN IS

95%TYPOGRAPHY

- OLIVER REICHENSTEIN

Page 4: Typography and User Experience in Web Design

NYTimes

Page 5: Typography and User Experience in Web Design
Page 6: Typography and User Experience in Web Design

CNN

Page 7: Typography and User Experience in Web Design

CNN with MIN - min.artequalswork.com

Page 8: Typography and User Experience in Web Design

Craigslist

Page 9: Typography and User Experience in Web Design

Craigslist Redesign Concept by Lance Culbreth

Page 10: Typography and User Experience in Web Design

Hyperlink

Button

hyperlink

Page 11: Typography and User Experience in Web Design

BAD TYPOGRAPHY

=BAD USER EXPERIENCE

Page 12: Typography and User Experience in Web Design

Drudge Report

Page 13: Typography and User Experience in Web Design
Page 14: Typography and User Experience in Web Design

Drudge Report

Page 15: Typography and User Experience in Web Design

Drudge Report

Page 16: Typography and User Experience in Web Design

Huffington Post

Page 17: Typography and User Experience in Web Design
Page 18: Typography and User Experience in Web Design

Huffington Post

Page 19: Typography and User Experience in Web Design

GOOD TYPOGRAPHY

=GOOD USER EXPERIENCE

Page 20: Typography and User Experience in Web Design

Medium

Page 21: Typography and User Experience in Web Design

Medium

Page 22: Typography and User Experience in Web Design

Medium

Page 23: Typography and User Experience in Web Design

nautil.us

Page 24: Typography and User Experience in Web Design

nautil.us

Page 25: Typography and User Experience in Web Design

refinery29.com

Page 26: Typography and User Experience in Web Design

AdAge

Page 27: Typography and User Experience in Web Design

IN COMMUNICATION

THE ROLE OF TYPE IN

type

Page 28: Typography and User Experience in Web Design

rsq.com

Page 29: Typography and User Experience in Web Design

WhoaNellyCatering.com

Page 30: Typography and User Experience in Web Design

Moon Camp

Page 31: Typography and User Experience in Web Design

Moon Camp

Page 32: Typography and User Experience in Web Design

Digital Storytelling

Page 33: Typography and User Experience in Web Design

nytimes.com/projects/2012/snow-fall

Page 34: Typography and User Experience in Web Design

theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded

Page 35: Typography and User Experience in Web Design

pitchfork.com/features/articles/9467-wax-and-wane-the-tough-realities-behind-vinyls-comeback

Page 36: Typography and User Experience in Web Design

madebyfriends.co/drones

Page 37: Typography and User Experience in Web Design

http://aquatilis.tv

Page 38: Typography and User Experience in Web Design

http://aquatilis.tv

Page 39: Typography and User Experience in Web Design

http://aquatilis.tv

Page 40: Typography and User Experience in Web Design

IN NAVIGATION

THE ROLE OF TYPE IN

type

Page 41: Typography and User Experience in Web Design
Page 42: Typography and User Experience in Web Design
Page 43: Typography and User Experience in Web Design
Page 44: Typography and User Experience in Web Design
Page 45: Typography and User Experience in Web Design

vox.com

Where’s the Menu?!

Page 46: Typography and User Experience in Web Design
Page 47: Typography and User Experience in Web Design
Page 48: Typography and User Experience in Web Design
Page 49: Typography and User Experience in Web Design
Page 50: Typography and User Experience in Web Design

IN PREFORMING TASKS

THE ROLE OF TYPE IN

type

Page 51: Typography and User Experience in Web Design
Page 52: Typography and User Experience in Web Design
Page 53: Typography and User Experience in Web Design

UserTesting.com

Page 54: Typography and User Experience in Web Design
Page 55: Typography and User Experience in Web Design
Page 56: Typography and User Experience in Web Design
Page 57: Typography and User Experience in Web Design
Page 58: Typography and User Experience in Web Design
Page 59: Typography and User Experience in Web Design
Page 60: Typography and User Experience in Web Design
Page 61: Typography and User Experience in Web Design

abookapart.com/products/on-web-typography

Page 62: Typography and User Experience in Web Design

READABILITY


Top Related