Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing Icons and WordPress Admin Icons
Search
Laura Kalbag
January 17, 2013
Design
2
1.1k
Designing Icons and WordPress Admin Icons
From a talk at WordPress London in January 2013
Laura Kalbag
January 17, 2013
Tweet
Share
More Decks by Laura Kalbag
See All by Laura Kalbag
Ethical Design
laurakalbag
1
120
Intro to UX
laurakalbag
1
170
Ethical Design
laurakalbag
1
2.9k
Accessibility By Design
laurakalbag
1
110
Designing For Accessibility
laurakalbag
2
160
Indie Design
laurakalbag
4
2k
WAI-ARIA in 10
laurakalbag
1
250
Designing for Accessibility
laurakalbag
0
77
Designing for Accessibility
laurakalbag
1
520
Other Decks in Design
See All in Design
CMS管理画面のアクセシビリティ
magi1125
8
2.3k
Bulletproof Design System with TypeScript
takanorip
6
3.8k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
320
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
850
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.7k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
670
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
320
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.3k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
400
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
330
The Spectacular Lies of Maps
axbom
PRO
1
200
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
Scaling GitHub
holman
461
140k
Statistics for Hackers
jakevdp
799
220k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing for humans not robots
tammielis
253
25k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Being A Developer After 40
akosma
90
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
Laura Kalbag @laurakalbag laurakalbag.com Designing WordPress Admin Icons
Why use icons?
“inform, translate and warn” — Jon Hicks The Icon Handbook
We use them as…
navigation Icons: Symbolicons
shorthand Icons: Pixicon
status Icons: Coquette
emotion Icons: IconTexto
instruction Icons: Gestures by Prekesh
action Icons: Lino
And we’re most likely to come across them as…
favicons WordPress
pictograms Icon: Symbolicons
app icons Silverback app
What makes icons great?
None
Sketch Beta
consistency Icon: Pixicons
Consistency • size • colour • style • lines •
light • angle
WordPress admin icons
the dissection Icon: Symbolicons
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
What do you need to make? Icon: Symbolicons
28px greyscale icon on a transparent background
28px colour icon on a transparent background
32px greyscale icon on a transparent background
but then there’s blue… Icon: Symbolicons
28px blue tint icon on a transparent background
32px blue tint icon on a transparent background
So altogether that makes… • 28px greyscale icon • 28px
colour icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon
but then there’s hi-DPI… Icon: Pixicons
Which then makes… • 28px greyscale icon • 28px colour
icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon
Which then makes… • 28px greyscale icon • 28px colour
icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon
Which then makes… • 28px greyscale icon • 28px colour
icon • 32px greyscale icon • 28px blue tint icon • 32px blue tint icon
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
So let’s be sensible… Icon: Pixicons
We want to make • 28px greyscale icon • 28px
colour icon • 32px greyscale icon • 56px greyscale icon • 56px colour icon • 64px greyscale icon
Icon: Symbolicons Live WordPress admin icon
Icon: Pixicons Laura Kalbag @laurakalbag laurakalbag.com