by Ben Dunkle (@EmpireOfLight)
WordSesh, December 2013
desigining dashicons
About the talk
This presentation will cover:
-
the history of my role as icon designer for the WordPress project
- the emerging "flat" paradigm for interface design, and how it impacts the icon designs
- A Demonstration on making icon fonts using Adobe Photoshop, Adobe Illustrator, GlyphsMini App, Font Squirrel, and IcoMoon.io
About me
-
WordPress guy
-
core designer for wordpress.org
-
admin of Buffalo WordPress users group
-
professor at Canisius College, Buffalo NY
A little history
2004/5 or something
2.0 "Duke"
2.5 - a modern interface
2.7: Coltrane
3.x: retina
"Retina all the things" (http://core.trac.wordpress.org/ticket/21019)
2013: MP6
2013: wordpress.com admin overhaul
3.8: new dashboard
dAshicons as "flat" design
- simpler, fewer details
-
tighter or sharp edges
-
consistent or no shading
- high contrast
- flexible
- embrace the medium
- easier
windows 8
mobile apps
coffley
letterpress
clear
icons
vs
ICON Technology : Bitmap
- difficult to update
- not scalable
- not semantic
Icon technology : vector
- easy (somewhat) to update
-
scalable
-
more semantic
vector icon formats
-
icon fonts: "can be instantly customized — size, color, drop shadow, and anything that can be done with the power of CSS." (fontawesome.com)
-
SVG: Open source vector file format, with varying levels of support on the web
-
CSS: Exciting but probably limited; i.e. http://nicolasgallagher.com/pure-css-gui-icons/
- Problem with all formats: rendering, especially font-smoothing, varies across browsers and devices. Not so with bitmap fonts
options for plugin authors
- Keep using pngs
- spec a dashicon
- use an icon font
- use an SVG
A quick icon in Photoshop/Illustrator
Converting the icon to SVG with http://webcodertools.com/imagetobase64converter
Converting the icon to font with http://icomoon.io
Adding the icon to your plugin a-la https://gist.github.com/helenhousandi/f7f6995795c4d58aa41e
Choosing an existing Dashicon ala http://melchoyce.github.io/dashicons/
Till Kruess' thing https://github.com/tillkruess/MP6-Icon-Examples