Designing Icons and WordPress Admin Icons

From a talk at WordPress London in January 2013

Transcript

1. Laura Kalbag
   @laurakalbag laurakalbag.com
   Designing WordPress
   Admin Icons
   

   View Slide

2. Why use icons?
   

   View Slide

3. “inform, translate and warn”
   — Jon Hicks
   The Icon Handbook
   

   View Slide

4. We use them as…
   

   View Slide

5. navigation
   Icons: Symbolicons
   

   View Slide

6. shorthand
   Icons: Pixicon
   

   View Slide

7. status
   Icons: Coquette
   

   View Slide

8. emotion
   Icons: IconTexto
   

   View Slide

9. instruction
   Icons: Gestures by Prekesh
   

   View Slide

10. action
    Icons: Lino
    

    View Slide

11. And we’re most likely to come
    across them as…
    

    View Slide

12. favicons
    WordPress
    

    View Slide

13. pictograms
    Icon: Symbolicons
    

    View Slide

14. app icons
    Silverback app
    

    View Slide

15. What makes icons great?
    

    View Slide

16. View Slide

17. Sketch Beta
    

    View Slide

18. consistency
    Icon: Pixicons
    

    View Slide

19. Consistency
    • size
    • colour
    • style
    • lines
    • light
    • angle
    

    View Slide

20. WordPress admin icons
    

    View Slide

21. the dissection
    Icon: Symbolicons
    

    View Slide

22. mostly one-colour
    slightly muted colours
    not angled, face-on flat
    solid 1px outlines
    minimal detail
    subtle gradient
    light source from the top
    multiple objects overlap
    

    View Slide

23. What do you need to make?
    Icon: Symbolicons
    

    View Slide

24. 28px greyscale icon on a
    transparent background
    

    View Slide

25. 28px colour icon on a
    transparent background
    

    View Slide

26. 32px greyscale icon on a
    transparent background
    

    View Slide

27. but then there’s blue…
    Icon: Symbolicons
    

    View Slide

28. 28px blue tint icon on a
    transparent background
    

    View Slide

29. 32px blue tint icon on a
    transparent background
    

    View Slide

30. So altogether that makes…
    • 28px greyscale icon
    • 28px colour icon
    • 32px greyscale icon
    • 28px blue tint icon
    • 32px blue tint icon
    

    View Slide

31. but then there’s hi-DPI…
    Icon: Pixicons
    

    View Slide

32. Which then makes…
    • 28px greyscale icon
    • 28px colour icon
    • 32px greyscale icon
    • 28px blue tint icon
    • 32px blue tint icon
    

    View Slide

33. Which then makes…
    • 28px greyscale icon
    • 28px colour icon
    • 32px greyscale icon
    • 28px blue tint icon
    • 32px blue tint icon
    

    View Slide

34. Which then makes…
    • 28px greyscale icon
    • 28px colour icon
    • 32px greyscale icon
    • 28px blue tint icon
    • 32px blue tint icon
    

    View Slide

35. Which then makes…
    • 28px greyscale icon
    • 28px colour icon
    • 32px greyscale icon
    • 28px blue tint icon
    • 32px blue tint icon
    • 56px greyscale icon
    • 56px colour icon
    • 64px greyscale icon
    • 56px blue tint icon
    • 64px blue tint icon
    

    View Slide

36. So let’s be sensible…
    Icon: Pixicons
    

    View Slide

37. We want to make
    • 28px greyscale icon
    • 28px colour icon
    • 32px greyscale icon
    • 56px greyscale icon
    • 56px colour icon
    • 64px greyscale icon
    

    View Slide

38. Icon: Symbolicons
    Live WordPress admin icon
    

    View Slide

39. Icon: Pixicons
    Laura Kalbag
    @laurakalbag laurakalbag.com
    

    View Slide