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
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
0
210
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
6
890
高卒公務員から Webデザイナーになるまで
Avatar for kinomi kinomidesign
0
110
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.4k
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.3k
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
320
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
250
CursorでAI活用のナレッジベースを構築する
Avatar for 神崎 kanzaki
0
790
kintone Style Book
Avatar for kintone kintone
3
2.1k
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
110
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
350
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
210

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.2k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k
Visualization
Avatar for Eitan Lees eitanlees
149
16k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k

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