Pro Yearly is on sale from $80 to $50! »

Designing Icons and WordPress Admin Icons

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

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
79
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
140
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
2.8k
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
60
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
2
78
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
4
1.4k
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
170
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
0
42
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
330

Other Decks in Design

See All in Design
D5e3eb191ed8781efead75efbc6eff85?s=48 sooplove
1
260
0f4b62fb20e708465c81d5588264b663?s=48 migi1982
5
3.2k
92151711459a4e3a191f791238f6259d?s=48 chiemitaki
2
550
Ed8d0bfdd4badbac64cefb21a5c7ae88?s=48 allenzhangart
0
450
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
1
510
3936605ddd7a28da251afef2593be433?s=48 mariosakata
0
420
7e0c7d1a8943ab11891a7e304eb384cd?s=48 tthhmmss
1
110
07d788425ce835a38da4ab23a537b407?s=48 gavaru
0
190
1db31cd7a801c73129dbce8163a49b08?s=48 sevendex
0
140
12703c2561e45c51802855707969a9b0?s=48 antondraws
0
110
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
0
170
C01957d985c20b5b27b7e7684eae3c32?s=48 yutaromurakami
1
110

Featured

See All Featured
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.8k
245cee81a9c424266e5e401d844ea881?s=48 lara
15
2.5k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
143
19k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
29
3.3k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
232
810k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
199
19k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
92
2.9k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
13
930
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
585
200k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k

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