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!

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