iconography and the responsive web

Iconography and the Responsive Web

@joe_harrison

greatfridays.com

Why Icons?

1. What are icons?

2. Icons in design

4. Current techniques

5. The Future

3. Responsive Icons

1

What are icons?

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

Ideograms App IconsPictograms

Icons inform us

They signpost

They warn us

They express emotion

(Icons by Justin Pervorse)

They transcend language

They save space

Inform WarnSignpost

Transcend language

Expressemotion

Savespace

Icons in design

2

TypefaceDesign

Logo Design

Icon Design

TypefaceDesign

Logo Design

Icon Design

TypefaceDesign

Logo Design

Icon Design

TypefaceDesign

Logo Design

Icon Design

The modern web poses new challenges

(Image credit: Brad Frost)

Retina Revolution

72 dpi Retina Future

Responsive Design

High Screen Resolutions

Multiple Devices

Responsive Icons

3

iconsbyhour.co.uk

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

responsiveicons.co.uk

20,000+ views in 24 hours

30,000

15,000

Oct 20 Oct 27

3,000+ tweets

Re-implimentation

Collaboration (blogs)

(Pen by Nicholas Hoizey)

Ch

ange

ico

n

Change complexity

(Article by Ilya Pukhalski)

Collaboration with developers produces the best results.

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

Current Techniques

4

1. Icon fonts2. Pure CSS Icons

3. SVG Icons

1. Icon fonts2. Pure CSS Icons

3. SVG Icons

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

Icon fonts

Positioning inconsistencies

Easy to change CSS properties

Limited complexity (e.g colour)

Single file for all icons

1. Icon fonts2. Pure CSS Icons

3. SVG Icons

#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#;!}

(CSS icons by Louis Harboe)

Require CSS knowledge

Maintenancedifficulties

No asset needed

Pure CSS Icons

Easy to change CSS properties

1. Icon fonts2. Pure CSS Icons

3. SVG Icons

Raster Vector

.png .svg

(Icons by Nick Frost & Greg Lapin)

PNG fallbacks

SVG Icons

Compatibility with old browsers

Detail & colour flexibility

Simple to make

Easy to animate

Low file size

The Future of icons

5

Adapting to New Technology

3D Printing

Duplicateproduct

Materialslow

Nozzlejam

Product glitch

Fingerprint verification

Product lifespan

Fume hood required

Ordermaterials

Adapting to Future Human Needs

Proximity-sensitive icons

What are icons?

Icons in design

Current techniques

The Future

Responsive Icons Story

Thank you

@joe_harrison