Iconography and the Responsive Web
@joe_harrison
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
