Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Designing Icons and WordPress Admin Icons

Avatar for Laura Kalbag Laura Kalbag
January 17, 2013
Design
1.2k
2

Designing Icons and WordPress Admin Icons

From a talk at WordPress London in January 2013

Avatar for Laura Kalbag

Laura Kalbag

January 17, 2013

More Decks by Laura Kalbag

See All by Laura Kalbag
Ethical Design
Avatar for Laura Kalbag laurakalbag
1
140
Intro to UX
Avatar for Laura Kalbag laurakalbag
1
220
Ethical Design
Avatar for Laura Kalbag laurakalbag
1
3k
Accessibility By Design
Avatar for Laura Kalbag laurakalbag
1
150
Designing For Accessibility
Avatar for Laura Kalbag laurakalbag
2
190
Indie Design
Avatar for Laura Kalbag laurakalbag
4
2.2k
WAI-ARIA in 10
Avatar for Laura Kalbag laurakalbag
1
290
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
0
110
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
1
550

Other Decks in Design

See All in Design
Design dependencies
Avatar for Teba_eleven teba_eleven
0
170
Jun Wei | Information Design & Presentation Portfolio
Avatar for Wong Jun Wei wjw100788
PRO
0
100
プレゼンスライド作成で意識していること
Avatar for きみちゃん kimichan
0
120
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
Avatar for Chris Hass deadlinepoet
0
370
凡庸を落とすハーネス
Avatar for Hiromi Maeo hiromimaeo
2
910
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
250
明日から真似できる、AIでデザインシステムを活用する方法
Avatar for viviON vivion
0
680
富山デザイン勉強会_プレゼンテーション.pdf
Avatar for keita keita_yoshikawa
0
150
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
3
2.8k
デザインワークフローの最前線。 ログラスでのAI活用の現在地
Avatar for Kaori Ueda ukaoli
1
3.1k
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
2k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
200

Featured

See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
560
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.8k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
11k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
230
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
600
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
430
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
3
4.3k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
520
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
610

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