$30 off During Our Annual Pro Sale. View Details »

Designing Icons and WordPress Admin Icons

Laura Kalbag
January 17, 2013

Designing Icons and WordPress Admin Icons

From a talk at WordPress London in January 2013

Laura Kalbag

January 17, 2013
Tweet

More Decks by Laura Kalbag

Other Decks in Design

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