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

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
200
Ethical Design
Avatar for Laura Kalbag laurakalbag
1
3k
Accessibility By Design
Avatar for Laura Kalbag laurakalbag
1
130
Designing For Accessibility
Avatar for Laura Kalbag laurakalbag
2
180
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
100
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
1
540

Other Decks in Design

See All in Design
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
1.2k
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
430
Decksh keywords
Avatar for Anthony Starks ajstarks
0
110
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.4k
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON vivion
8
19k
Design dependencies
Avatar for Teba_eleven teba_eleven
0
140
広い関与の可能性に どう向き合うのか？ 私たちは。｜Timee MarketingDesign 2026-06-18
Avatar for bebe bebe
0
250
Of Ordination and Rebellion exploration sketches
Avatar for Rachel Poon rezaline
0
170
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
Avatar for 松村 大貴｜Butterfly Lab株式会社 dmattsun
2
180
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
330
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
230
Claudeもくもく会、はじめませんか？
Avatar for yusukeiyoda yusukeiyoda
0
120

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
420
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
810
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Design in an AI World
Avatar for tapps tapps
1
260
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
410
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.4k

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