Designing Icons and WordPress Admin Icons

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

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
78
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
130
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
2.8k
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
55
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
2
77
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
4
1.4k
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
170
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
0
40
95b99419138620c939f1582fc0cd8b9b?s=48 laurakalbag
1
310

Other Decks in Design

See All in Design
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
0
16k
5696bd82fd62181c65c8bb3c168d49c1?s=48 solmetts
0
170
65906910d67fb68d5c8222322a7683e3?s=48 ryuuuuukun
1
570
D14a5a0ac27e24a0b2865c9c33dede87?s=48 uxinlux
1
1.6k
6957dcf9e6e3d9243fa0a06228bfb7c0?s=48 coppelux
1
350
Cf9808b306096a913709da756edeb665?s=48 uxevents
0
180
95aaab3d693889550fd2e7ae02f2f789?s=48 takaking22
1
200
C66a4b0ef3d970bfbe5cc00df63804d8?s=48 polverelli
1
190
Db55023c0d14b56bf6d687da8479692c?s=48 jy27
0
130
91e7aee9769836f448a9f1ce91255749?s=48 mathatelle
1
780
Db4b4f2b80639dfa21296832bae16935?s=48 cotolier_risa
1
130
53686ab0d1d54666a9ca00dd0086a68f?s=48 kobiebrett
1
390

Featured

See All Featured
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
35k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
253
36k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
189
8.2k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
193
15k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
333
15k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
240
20k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
115
4.7k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
620
40k
78b475797a14c84799063c7cd073962f?s=48 holman
446
130k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.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