typography and user experience in web design

62
SARA CANNON HTTP://RAN.GE

Upload: sara-cannon

Post on 17-Nov-2014

1.504 views

Category:

Design


0 download

DESCRIPTION

Typography - the most often neglected part of the internet sometimes, but arguably one of the most important. Oliver Reichenstein of information Architects once said that "Web Design is 95% Typography." This holds true. Not only is type use to convey information, but it is also used to navigate and perform tasks. This stat is overwhelming to think about considering how little we actually discuss type in our industry. Type on the web has many roles: it is an interface, a brand, sets tone, and directs the user. Typography has many roles and can either add or take away from User Experience. In this beautiful and exciting talk we’re going to look at various ways type is used, implemented, and dissect the role that it plays in user experience on the web.

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