Iconography and the Responsive Web
Upcoming SlideShare
Loading in...5
×
 

Iconography and the Responsive Web

on

  • 237 views

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

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

Statistics

Views

Total Views
237
Views on SlideShare
235
Embed Views
2

Actions

Likes
1
Downloads
9
Comments
0

1 Embed 2

http://www.slideee.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Iconography and the Responsive Web Iconography and the Responsive Web Presentation 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 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}! }! ! @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)
  • 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 all icons
  • 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: 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 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 file size
  • 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 required Order materials
  • 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