iconography and the responsive web
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
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