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
   

   View Slide

2. Tim G. Thomas
   @TIMGTHOMAS
   

   View Slide

3. Vectra AI
   AUSTIN, TX • VECTRA.AI
   

   View Slide

4. A Brief History
   

   View Slide

5. A BRIEF HISTORY
   The Windy Castle
   

   View Slide

6. A BRIEF HISTORY
   The Windy Castle
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. Designing With Icons
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. Icons and the Web
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    vimeo.com/286891021
    

    View Slide

41. ICONS AND THE WEB
    Implementation
    Background images
    Inline
    
    

    View Slide

42. ICONS AND THE WEB
    Implementation
    Background images
    Inline
    

    .element {
    background-image:
    url('path/image.svg');
    }
    

    View Slide

43. ICONS AND THE WEB
    Implementation
    Background images
    Inline
    

    
    
    
    

    View Slide

44. ICONS AND THE WEB
    Implementation
    Background images
    Inline
    

    
    
    
    

    View Slide

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

    View Slide

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

    Read me!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. Further Reading
    

    View Slide

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
    

    View Slide

52. Thanks!
    @TIMGTHOMAS
    

    View Slide