From a talk at WordPress London in January 2013
Laura Kalbag@laurakalbag laurakalbag.comDesigning WordPressAdmin Icons
View Slide
Why use icons?
“inform, translate and warn”— Jon HicksThe Icon Handbook
We use them as…
navigationIcons: Symbolicons
shorthandIcons: Pixicon
statusIcons: Coquette
emotionIcons: IconTexto
instructionIcons: Gestures by Prekesh
actionIcons: Lino
And we’re most likely to comeacross them as…
faviconsWordPress
pictogramsIcon: Symbolicons
app iconsSilverback app
What makes icons great?
Sketch Beta
consistencyIcon: Pixicons
Consistency• size• colour• style• lines• light• angle
WordPress admin icons
the dissectionIcon: Symbolicons
mostly one-colourslightly muted coloursnot angled, face-on flatsolid 1px outlinesminimal detailsubtle gradientlight source from the topmultiple objects overlap
What do you need to make?Icon: Symbolicons
28px greyscale icon on atransparent background
28px colour icon on atransparent background
32px greyscale icon on atransparent background
but then there’s blue…Icon: Symbolicons
28px blue tint icon on atransparent background
32px blue tint icon on atransparent 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• 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: SymboliconsLive WordPress admin icon
Icon: PixiconsLaura Kalbag@laurakalbag laurakalbag.com