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
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?
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