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
2
1.2k

Designing Icons and WordPress Admin Icons

From a talk at WordPress London in January 2013

Avatar for Laura Kalbag

Laura Kalbag

January 17, 2013
Tweet

More Decks by Laura Kalbag

See All by Laura Kalbag
Ethical Design
Avatar for Laura Kalbag laurakalbag
1
120
Intro to UX
Avatar for Laura Kalbag laurakalbag
1
180
Ethical Design
Avatar for Laura Kalbag laurakalbag
1
2.9k
Accessibility By Design
Avatar for Laura Kalbag laurakalbag
1
110
Designing For Accessibility
Avatar for Laura Kalbag laurakalbag
2
160
Indie Design
Avatar for Laura Kalbag laurakalbag
4
2.1k
WAI-ARIA in 10
Avatar for Laura Kalbag laurakalbag
1
250
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
0
80
Designing for Accessibility
Avatar for Laura Kalbag laurakalbag
1
520

Other Decks in Design

See All in Design
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
140
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
1.6k
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
160
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
Avatar for Isao utm529f
0
1.3k
21 Ways to Call American Airlines Customer Care Full Guide USA
Avatar for Sonny americanhub
0
220
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
570
そのUIコンポーネント、これから先も使えますか？―Headless UI,Open UI,グローバルデザインシステム
Avatar for sakito sakito
2
2k
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
180
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
0
210
街・都市という眼差し。まちづくりにおける規範と実践
Avatar for S.SAKAMON sakamon
0
160
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
1
250
Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css
Avatar for ふじえもん fujiemon
0
680

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
40
3.7k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
115
20k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k

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