iconography and the responsive web

94
Iconography and the Responsive Web @joe_harrison

Upload: future-insights

Post on 28-Jan-2015

114 views

Category:

Design


2 download

DESCRIPTION

Slides from May's London Web Meet-up Joe Harrison, Lead Designer currently working for Great Fridays who talked about Iconography and the Responsive Web. You can view the video here: https://vimeo.com/96571680 "Icons have become the native language of modern day devices. They are the most efficient way to communicate information in a limited space, and are universally ingrained into the digital and physical worlds. Icons can enrich a user’s experience of a product or service, and express character and feeling. But iconography needs to adapt for the future. Retina displays, responsive websites and a multitude of screen sizes pose new challenges and opportunities for both designers and developers. How can we achieve crisp, legible and scalable icons that are perfectly optimised for every device? This talk will focus on current solutions from leading experts in the field, and will reveal what the future might have in store."

TRANSCRIPT

Page 1: Iconography and the Responsive Web

Iconography and the Responsive Web

@joe_harrison

Page 2: Iconography and the Responsive Web
Page 3: Iconography and the Responsive Web

greatfridays.com

Page 4: Iconography and the Responsive Web

Why Icons?

Page 5: Iconography and the Responsive Web

1. What are icons?

2. Icons in design

4. Current techniques

5. The Future

3. Responsive Icons

Page 6: Iconography and the Responsive Web

1

What are icons?

Page 7: Iconography and the Responsive Web

Icons are graphic symbols that represent objects, concepts or functions.

Page 8: Iconography and the Responsive Web

Ideograms App IconsPictograms

Page 9: Iconography and the Responsive Web

Icons inform us

Page 10: Iconography and the Responsive Web
Page 11: Iconography and the Responsive Web

They signpost

Page 12: Iconography and the Responsive Web
Page 13: Iconography and the Responsive Web

They warn us

Page 14: Iconography and the Responsive Web
Page 15: Iconography and the Responsive Web

They express emotion

Page 16: Iconography and the Responsive Web

(Icons by Justin Pervorse)

Page 17: Iconography and the Responsive Web

They transcend language

Page 18: Iconography and the Responsive Web
Page 19: Iconography and the Responsive Web

They save space

Page 20: Iconography and the Responsive Web
Page 21: Iconography and the Responsive Web

Inform WarnSignpost

Transcend language

Expressemotion

Savespace

Page 22: Iconography and the Responsive Web

Icons in design

2

Page 23: Iconography and the Responsive Web

TypefaceDesign

Logo Design

Icon Design

Page 24: Iconography and the Responsive Web

TypefaceDesign

Logo Design

Icon Design

Page 25: Iconography and the Responsive Web
Page 26: Iconography and the Responsive Web
Page 27: Iconography and the Responsive Web
Page 28: Iconography and the Responsive Web

TypefaceDesign

Logo Design

Icon Design

Page 29: Iconography and the Responsive Web
Page 30: Iconography and the Responsive Web
Page 31: Iconography and the Responsive Web
Page 32: Iconography and the Responsive Web

TypefaceDesign

Logo Design

Icon Design

Page 33: Iconography and the Responsive Web

The modern web poses new challenges

Page 34: Iconography and the Responsive Web

(Image credit: Brad Frost)

Page 35: Iconography and the Responsive Web

Retina Revolution

Page 36: Iconography and the Responsive Web
Page 37: Iconography and the Responsive Web

72 dpi Retina Future

Page 38: Iconography and the Responsive Web
Page 39: Iconography and the Responsive Web

Responsive Design

High Screen Resolutions

Multiple Devices

Page 40: Iconography and the Responsive Web

Responsive Icons

3

Page 41: Iconography and the Responsive Web
Page 42: Iconography and the Responsive Web
Page 43: Iconography and the Responsive Web
Page 44: Iconography and the Responsive Web
Page 45: Iconography and the Responsive Web

iconsbyhour.co.uk

Page 46: Iconography and the Responsive Web
Page 47: Iconography and the Responsive Web
Page 48: Iconography and the Responsive Web
Page 49: Iconography and the Responsive Web
Page 50: Iconography and the Responsive Web
Page 51: Iconography and the Responsive Web

@media (max-width: 1000px) {!! #icon_1 {display:block}!}!!@media (max-width: 900px) {!! #icon_2 {display:block}!}!!@media (max-width: 800px) {!! #icon_3 {display:block}!}!!..

Page 52: Iconography and the Responsive Web
Page 53: Iconography and the Responsive Web

responsiveicons.co.uk

Page 54: Iconography and the Responsive Web

20,000+ views in 24 hours

30,000

15,000

Oct 20 Oct 27

Page 55: Iconography and the Responsive Web

3,000+ tweets

Page 56: Iconography and the Responsive Web
Page 57: Iconography and the Responsive Web
Page 58: Iconography and the Responsive Web
Page 59: Iconography and the Responsive Web
Page 60: Iconography and the Responsive Web
Page 61: Iconography and the Responsive Web
Page 62: Iconography and the Responsive Web

Re-implimentation

Page 63: Iconography and the Responsive Web

Collaboration (blogs)

(Pen by Nicholas Hoizey)

Page 64: Iconography and the Responsive Web
Page 65: Iconography and the Responsive Web
Page 66: Iconography and the Responsive Web

Ch

ange

ico

n

Change complexity

Page 67: Iconography and the Responsive Web
Page 68: Iconography and the Responsive Web

(Article by Ilya Pukhalski)

Page 69: Iconography and the Responsive Web

Collaboration with developers produces the best results.

Never be afraid to release a prototype, even if unfinished.

Page 70: Iconography and the Responsive Web

Current Techniques

4

Page 71: Iconography and the Responsive Web

1. Icon fonts2. Pure CSS Icons

3. SVG Icons

Page 72: Iconography and the Responsive Web

1. Icon fonts2. Pure CSS Icons

3. SVG Icons

Page 73: Iconography and the Responsive Web

.icon {! font-family: ‘icon_font’;! color: 6CC254#!}

Page 74: Iconography and the Responsive Web
Page 75: Iconography and the Responsive Web

Icon fonts

Positioning inconsistencies

Easy to change CSS properties

Limited complexity (e.g colour)

Single file for all icons

Page 76: Iconography and the Responsive Web

1. Icon fonts2. Pure CSS Icons

3. SVG Icons

Page 77: Iconography and the Responsive Web

#packman {! width: 0px; height: 0px;! border-right: 60px solid transparent;! border-top: 60px solid #009cdf;! border-left: 60px solid #009cdf;! border-bottom: 60px solid #009cdf;! border-top-left-radius: 60px;! border-top-right-radius: 60px;! border-bottom-left-radius: 60px;! border-bottom-right—radius: 60px;! color: 6CC254#;!}

Page 78: Iconography and the Responsive Web

(CSS icons by Louis Harboe)

Page 79: Iconography and the Responsive Web

Require CSS knowledge

Maintenancedifficulties

No asset needed

Pure CSS Icons

Easy to change CSS properties

Page 80: Iconography and the Responsive Web

1. Icon fonts2. Pure CSS Icons

3. SVG Icons

Page 81: Iconography and the Responsive Web

Raster Vector

.png .svg

Page 82: Iconography and the Responsive Web

(Icons by Nick Frost & Greg Lapin)

Page 83: Iconography and the Responsive Web
Page 84: Iconography and the Responsive Web

PNG fallbacks

SVG Icons

Compatibility with old browsers

Detail & colour flexibility

Simple to make

Easy to animate

Low file size

Page 85: Iconography and the Responsive Web

The Future of icons

5

Page 86: Iconography and the Responsive Web

Adapting to New Technology

Page 87: Iconography and the Responsive Web

3D Printing

Page 88: Iconography and the Responsive Web

Duplicateproduct

Materialslow

Nozzlejam

Product glitch

Fingerprint verification

Product lifespan

Fume hood required

Ordermaterials

Page 89: Iconography and the Responsive Web

Adapting to Future Human Needs

Page 90: Iconography and the Responsive Web
Page 91: Iconography and the Responsive Web

Proximity-sensitive icons

Page 92: Iconography and the Responsive Web

What are icons?

Icons in design

Current techniques

The Future

Responsive Icons Story

Page 93: Iconography and the Responsive Web
Page 94: Iconography and the Responsive Web

Thank you

@joe_harrison