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
Express

emotion
Save

space
Icons in design
2
Typeface

Design
Logo

Design
Icon

Design
Typeface

Design
Logo

Design
Icon

Design
Typeface

Design
Logo

Design
Icon

Design
Typeface

Design
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}!
}!
!...
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)
Changeicon
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 fonts
2. Pure CSS Icons
3. SVG Icons
1. Icon fonts
2. 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

al...
1. Icon fonts
2. Pure CSS Icons
3. SVG Icons
#packman {!
width: 0px; height: 0px;!
border-right: 60px solid transparent;!
border-top: 60px solid #009cdf;!
border-left:...
(CSS icons by Louis Harboe)
Require CSS
knowledge
Maintenance

difficulties
No asset

needed

Pure CSS Icons
Easy to change

CSS properties
1. Icon fonts
2. 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 f...
The Future of icons
5
Adapting to 

New Technology
3D Printing
Duplicate

product
Materials

low
Nozzle

jam
Product

glitch
Fingerprint 

verification
Product

lifespan
Fume hood

requ...
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
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Iconography and the Responsive Web
Upcoming SlideShare
Loading in...5
×

Iconography and the Responsive Web

520

Published on

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."

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
520
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Iconography and the Responsive Web

  1. 1. Iconography and the Responsive Web @joe_harrison
  2. 2. greatfridays.com
  3. 3. Why Icons?
  4. 4. 1. What are icons? 2. Icons in design 4. Current techniques 5. The Future 3. Responsive Icons
  5. 5. 1 What are icons?
  6. 6. Icons are graphic symbols that represent objects, concepts or functions.
  7. 7. Ideograms App IconsPictograms
  8. 8. Icons inform us
  9. 9. They signpost
  10. 10. They warn us
  11. 11. They express emotion
  12. 12. (Icons by Justin Pervorse)
  13. 13. They transcend language
  14. 14. They save space
  15. 15. Inform WarnSignpost Transcend language Express emotion Save space
  16. 16. Icons in design 2
  17. 17. Typeface Design Logo Design Icon Design
  18. 18. Typeface Design Logo Design Icon Design
  19. 19. Typeface Design Logo Design Icon Design
  20. 20. Typeface Design Logo Design Icon Design
  21. 21. The modern web poses new challenges
  22. 22. (Image credit: Brad Frost)
  23. 23. Retina Revolution
  24. 24. 72 dpi Retina Future
  25. 25. Responsive Design High Screen Resolutions Multiple Devices
  26. 26. Responsive Icons 3
  27. 27. iconsbyhour.co.uk
  28. 28. @media (max-width: 1000px) {! ! #icon_1 {display:block}! }! ! @media (max-width: 900px) {! ! #icon_2 {display:block}! }! ! @media (max-width: 800px) {! ! #icon_3 {display:block}! }! ! ..
  29. 29. responsiveicons.co.uk
  30. 30. 20,000+ views in 24 hours 30,000 15,000 Oct 20 Oct 27
  31. 31. 3,000+ tweets
  32. 32. Re-implimentation
  33. 33. Collaboration (blogs) (Pen by Nicholas Hoizey)
  34. 34. Changeicon Change complexity
  35. 35. (Article by Ilya Pukhalski)
  36. 36. Collaboration with developers produces the best results. Never be afraid to release a prototype, even if unfinished.
  37. 37. Current Techniques 4
  38. 38. 1. Icon fonts 2. Pure CSS Icons 3. SVG Icons
  39. 39. 1. Icon fonts 2. Pure CSS Icons 3. SVG Icons
  40. 40. .icon {! font-family: ‘icon_font’;! color: 6CC254#! }
  41. 41. Icon fonts Positioning inconsistencies Easy to change CSS properties Limited complexity (e.g colour) Single file for all icons
  42. 42. 1. Icon fonts 2. Pure CSS Icons 3. SVG Icons
  43. 43. #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#;! }
  44. 44. (CSS icons by Louis Harboe)
  45. 45. Require CSS knowledge Maintenance difficulties No asset needed Pure CSS Icons Easy to change CSS properties
  46. 46. 1. Icon fonts 2. Pure CSS Icons 3. SVG Icons
  47. 47. Raster Vector .png .svg
  48. 48. (Icons by Nick Frost & Greg Lapin)
  49. 49. PNG fallbacks SVG Icons Compatibility with old browsers Detail & colour flexibility Simple to make Easy to animate Low file size
  50. 50. The Future of icons 5
  51. 51. Adapting to New Technology
  52. 52. 3D Printing
  53. 53. Duplicate product Materials low Nozzle jam Product glitch Fingerprint verification Product lifespan Fume hood required Order materials
  54. 54. Adapting to Future Human Needs
  55. 55. Proximity-sensitive icons
  56. 56. What are icons? Icons in design Current techniques The Future Responsive Icons Story
  57. 57. Thank you @joe_harrison
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×