Iconography and the Responsive Web

  • 253 views
Uploaded 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. …

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

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
253
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
15
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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