Icons and the Web: Symbols of the Modern Age

Af7acd01448753af3dfd648c3f5ea287?s=47 timgthomas
January 30, 2019

Icons and the Web: Symbols of the Modern Age

Icons have been a staple of software for decades, and come in as many varieties as the tools used to make them. From humble beginnings as precisely-pixelated pictograms, icons are now entering a renaissance of high-density displays, vector formats, and an almost cult-like following. In this session, you'll learn the inner workings of modern icon design, explore various techniques for adding symbology to your web apps, and discover how to bring your interfaces into the modern age!

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

January 30, 2019
Tweet

Transcript

  1. Icons and the Web SYMBOLS OF THE MODERN AGE

  2. Tim G. Thomas @TIMGTHOMAS

  3. Vectra AI AUSTIN, TX • VECTRA.AI

  4. A Brief History

  5. A BRIEF HISTORY The Windy Castle

  6. A BRIEF HISTORY The Windy Castle

  7. A BRIEF HISTORY Symbols In Antiquity Icons as Discovery Icons

    as Art Icons as Language
  8. A BRIEF HISTORY Symbols In Antiquity Icons as Discovery Icons

    as Art Icons as Language
  9. A BRIEF HISTORY Symbols In Antiquity Icons as Discovery Icons

    as Art Icons as Language
  10. A BRIEF HISTORY Symbols In Antiquity Icons as Discovery Icons

    as Art Icons as Language
  11. A BRIEF HISTORY Symbols In Antiquity Icons as Discovery Icons

    as Art Icons as Language Icons as Language (Reprise)
  12. Designing With Icons

  13. DESIGNING WITH ICONS Icons in the Wild Navigation Categorization Status

    Affordance
  14. DESIGNING WITH ICONS Icons in the Wild Navigation Categorization Status

    Affordance
  15. DESIGNING WITH ICONS Icons in the Wild Navigation Categorization Status

    Affordance
  16. DESIGNING WITH ICONS Icons in the Wild Navigation Categorization Status

    Affordance
  17. DESIGNING WITH ICONS Icons in the Wild Navigation Categorization Status

    Affordance
  18. DESIGNING WITH ICONS Choosing Icons Language barriers Space constraints Brand

    identity Emotional connection Grounding concepts
  19. DESIGNING WITH ICONS Choosing Icons Language barriers Space constraints Brand

    identity Emotional connection Grounding concepts
  20. DESIGNING WITH ICONS Choosing Icons Language barriers Space constraints Brand

    identity Emotional connection Grounding concepts
  21. DESIGNING WITH ICONS Choosing Icons Language barriers Space constraints Brand

    identity Emotional connection Grounding concepts
  22. DESIGNING WITH ICONS Choosing Icons Language barriers Space constraints Brand

    identity Emotional connection Grounding concepts
  23. DESIGNING WITH ICONS Choosing Icons Language barriers Space constraints Brand

    identity Emotional connection Grounding concepts
  24. DESIGNING WITH ICONS (Not) Choosing Icons Unfamiliar Concepts Increased Noise

    Off-Brand
  25. DESIGNING WITH ICONS (Not) Choosing Icons Unfamiliar Concepts Increased Noise

    Off-Brand
  26. DESIGNING WITH ICONS (Not) Choosing Icons Unfamiliar Concepts Increased Noise

    Off-Brand
  27. DESIGNING WITH ICONS (Not) Choosing Icons Unfamiliar Concepts Increased Noise

    Off-Brand
  28. DESIGNING WITH ICONS Design Philosophy Simple Consistent Unique Memorable Families

  29. DESIGNING WITH ICONS Design Philosophy Simple Consistent Unique Memorable Families

  30. DESIGNING WITH ICONS Design Philosophy Simple Consistent Unique Memorable Families

  31. DESIGNING WITH ICONS Design Philosophy Simple Consistent Unique Memorable Families

  32. DESIGNING WITH ICONS Design Philosophy Simple Consistent Unique Memorable Families

  33. DESIGNING WITH ICONS Design Philosophy Simple Consistent Unique Memorable Families

  34. Icons and the Web

  35. ICONS AND THE WEB Enter the Web Wingdings Images Icon

    Fonts SVG
  36. ICONS AND THE WEB Enter the Web Wingdings Images Icon

    Fonts SVG
  37. ICONS AND THE WEB Enter the Web Wingdings Images Icon

    Fonts SVG ☎
  38. ICONS AND THE WEB Enter the Web Wingdings Images Icon

    Fonts SVG ICON BY GREG BECK THENOUNPROJECT.COM
  39. ICONS AND THE WEB Enter the Web Wingdings Images Icon

    Fonts SVG ICON BY LANDAN LLOYD THENOUNPROJECT.COM
  40. ICONS AND THE WEB Enter the Web Wingdings Images Icon

    Fonts SVG
 vimeo.com/286891021
  41. ICONS AND THE WEB Implementation Background images Inline <use>

  42. ICONS AND THE WEB Implementation Background images Inline <use>
 .element

    { background-image: url('path/image.svg'); }
  43. ICONS AND THE WEB Implementation Background images Inline <use>
 <svg>

    <path d="..." /> </svg>
  44. ICONS AND THE WEB Implementation Background images Inline <use>
 <svg>

    <use xlink:href=""></use> </svg>
  45. ICONS AND THE WEB Accessibility Screen Readers Color Contrast Similarity

    Pixel Ratios
  46. ICONS AND THE WEB Accessibility Screen Readers Color Contrast Similarity

    Pixel Ratios
 <title>Read me!</title>
  47. ICONS AND THE WEB Accessibility Screen Readers Color Contrast Similarity

    Pixel Ratios
  48. ICONS AND THE WEB Accessibility Screen Readers Color Contrast Similarity

    Pixel Ratios
  49. ICONS AND THE WEB Accessibility Screen Readers Color Contrast Similarity

    Pixel Ratios
  50. Further Reading

  51. FURTHER READING Further Reading bit.ly/ndclondon-icons vimeo.com/286891021 css-tricks.com/accessible-svgs icomoon.io/#icons developer.apple.com/design/human-interface-guidelines developer.apple.com/videos/play/wwdc2017/822

    en.wikipedia.org/wiki/Castle_of_the_Winds nature.com/articles/s41586-018-0514-3 nature.com/articles/s41586-018-0679-9
  52. Thanks! @TIMGTHOMAS