Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Icons and WordPress Admin Icons

95b99419138620c939f1582fc0cd8b9b?s=47 Laura Kalbag
January 17, 2013
Design
2
870

Designing Icons and WordPress Admin Icons

From a talk at WordPress London in January 2013

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

January 17, 2013
Tweet

More Decks by Laura Kalbag

See All by Laura Kalbag
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
82
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
140
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
2.8k
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
69
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
2
83
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
4
1.5k
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
170
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
0
46
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
360

Other Decks in Design

See All in Design
D4ad7f4022b9b86c2da92a718df3aeba?s=48 doyung
0
110
738333c70c6a98e7a101723c53254c06?s=48 marucoguma
1
530
5d2e1fa8c731ec227fda8adee714cc9d?s=48 ka3zu1ma10
0
200
E1e5be595b41fe3cf014cab6b2ef2a85?s=48 geoffreydorne
1
110
A8cc43c01d74d9e6c05542c3fddf9204?s=48 agirlwithapen
0
130
0f4339e081f24aac1a2b186dfd91ff3f?s=48 mirandab
0
290
4c5a5e7a3a5ce7c4c894c8d0d2d42809?s=48 soapya
0
120
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
0
110
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
4
7.6k
E9bc93cfc82dc07a1b3eca5a2394dbb6?s=48 fmerian
PRO
0
130
5390b35b57f0295fdf420ce58528d7a1?s=48 jonoda
1
400
A59f1440588fd8d0447a8e96b8c9b8c5?s=48 hara_mei
0
390

Featured

See All Featured
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.5k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
331
36k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
780
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
48
2.9k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
700
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
189
14k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
334
29k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
69
3.1k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
17
2k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.2k

Transcript

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

  2. Why use icons?

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

  4. We use them as…

  5. navigation Icons: Symbolicons

  6. shorthand Icons: Pixicon

  7. status Icons: Coquette

  8. emotion Icons: IconTexto

  9. instruction Icons: Gestures by Prekesh

  10. action Icons: Lino

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

  12. favicons WordPress

  13. pictograms Icon: Symbolicons

  14. app icons Silverback app

  15. What makes icons great?

  16. None

  17. Sketch Beta

  18. consistency Icon: Pixicons

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

    light • angle

  20. WordPress admin icons

  21. the dissection Icon: Symbolicons

  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

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

  24. 28px greyscale icon on a transparent background

  25. 28px colour icon on a transparent background

  26. 32px greyscale icon on a transparent background

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

  28. 28px blue tint icon on a transparent background

  29. 32px blue tint icon on a transparent background

  30. So altogether that makes… • 28px greyscale icon • 28px

    colour icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon

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

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

    icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon

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

    icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon

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

    icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon

  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

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

  37. We want to make • 28px greyscale icon • 28px

    colour icon • 32px greyscale icon • 56px greyscale icon • 56px colour icon • 64px greyscale icon

  38. Icon: Symbolicons Live WordPress admin icon

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