Modern Day Hieroglyphics

Was lucky enough to be a speaker at Grand Rapids Dev Day this year (March 12). The talk is setup for a 30 minute session to give developers an overview on iconography.

Slide 1

Introduction slide. Giving those waiting for the talk to look at some icons in 2 different styles.

Slide 2

What really makes a pictogram is the ability for it to be quickly recognized. Here in the talk I go into ambiguity and the ways people might interpret an icon in certain contexts.

Slide 3

Explaining the difference between a logo and a system icon. This talk primarily focuses on the use of system icons.

Slide 4

So, the talk is about modern day icons and how and why we use them. The key to their use is for them to make the action or elements quicker to recognize. There is the idea of using icons to represent categories and for larger applications icons can also mix into the branding.

Slide 5

Quickly recognized icons we're familiar with. The save icon, which lets us save 1.44MB of data. And the file icon which when pressed takes your digital document and turns it into a piece of paper I assume.

Slide 6

More serious slide, quickly recognizable icons can by themselves represent the action without text or tooltips. A common example seen in many applications now-a-days is the fly out menu.

Slide 7

Screen space especially on mobile devices is more limited and showing category defining data on each item with text can add clutter. One way around this is to use icons. Files / Folders, People / Groups, and Important Items can be represented this way. Categories can also be top level navigation items or filters as seen in a permission screen.

Slide 8

Branding is one slide I could talk about for a while, but will keep this brief. Branded icons are icons that fit a consistent style, but do not match the operating system's built in guidelines. This is usually not recommended, but can be done for applications with a strong brand recognition. Skype, Office, and Facebook have this, while others will opt for consistency with the OS.

Slide 9

We now have a high level overview of icons, but what makes up a good icon. To understand this we start with the base guidelines that all icons start with. This are determined by the style and built around a grid. In this case we're going to use Material Design to illustrate this. Material Design system icons are built on a 24dp (display pixel) grid.

Slide 10

One quick concept when working with icons to grasp is the idea of proportions. Each icon takes up a certain area of the grid, but for them to view in a uniform way vertically and horizontally next to each other they may need to fill out the grid differently. A good example of this is a circle and a square, visually they look uniform, but the circle is taller and wider.

Slide 11

To extend more on this idea of uniformity lets look into each of the ways an icon can be consistent. This slide is self explanatory, but know that icons can work together if all of these don't match. The most important ones are width, curves, and fill/stroke. To make things easy most icon packs ship with a uniform style, but keep these in mind if cases when a 3rd party icon needs to be adapted where the pack is missing a specifically needed icon.

Slide 12

Now a lot of people work in web, and there are two main ways you can make use of icons. Not going into which is better or worse, but just how to use them and how they work. Webfonts are becoming the norm for including many icons and making quick use. This works by taking advantage of the Private Use Area of the unicode spec. A font can include 6,400 user defined characters. The next is SVG or Scalable Vector Graphics which are supported now in all major browsers and can be inline included with the <svg /> tag or referenced via the <img /> tag.

Slide 13

Webfonts like 'Font Awesome' and 'Material Design Icons' allow quick inclusion into a page, but require loading every icon, so are less ideal when only a handful of icons are required.

Slide 14

Scalable Vector Graphics have a nice advantage in that they can be included inline either by hand our by third party JavaScript libraries and styled via CSS.

Slide 15

Touching on accessibility really quick before diving into more designer topics. Remembering that visually impaired users will not be able to see your icons it will be important to add some accessibility markup. This can be done a few ways aria-label lets you reword whatever is in a button with a custom description. Ligatures are not ideal, but some webfonts support them and is the idea that letters next to one another should be represented by another unicode. In this example Plus would swap for the webfont's plus symbol. In a lot of cases an icon is a representation of an action and not the noun, so this can add confusion. The more ideal solution is to use sr-only markup as seen in the Bootstrap framework.

Slide 16

Self explanatory slide of all the terms I'll be using in the demo and how they relate to vector objects.

Slide 17

The demo details the process one would go through working with a designer or the steps a developer can take to create an icon.

Microsoft Build 2015 Approaches

Just 9 days until Microsoft Build 2015. There are many open questions on the minds of developers and designers this year. Over the three day conference most of these will be answered (hopefully). For those not attending here is a twitter list of people to follow and be sure to scroll down to learn about the Build recap events.

Build 2015

Everyone seems pretty excited to checkout the HoloLens demo myself included. Still vague what we will actually be seeing in the demo, but I think simply seeing the Minecraft demo would hold most over until the release. Would be nice to see some sample 'hello world' apps running.


Like the last two years I will be going to the Visual Studio talks and UX talks. This is the year for Microsoft to take their UX more seriously like we've seen from Google as of late. Expecting to see at least one hamburger UX presentation, and will probably discuss the revised iconography that is being introduced in Windows 10 [for Phones] with the Microsoft designers.

C Sharp will be a major focus like in the previous years. Will be nice to see how Xamarin and Unity are shown along side the Microsoft developer ecosystem this year.

As entitled as it sounds, not having a Lumia 1020 successor is making me want to jump to another platform for their phones. I'm hoping something will be shown off (before the rumored OnePlusTwo release).


Every year the best part, next to the great talks, is meeting everyone in the Microsoft developer ecosystem. Almost everyone from twitter that is active in the community will be there again this year (drop in Euro made it difficult for some).


For another year in a row I wish Microsoft would stop the gifts and use the ticket prices toward expanding the conference in other ways (better food / more demos / student discounts).

Not able to attend Build?

Across the world Microsoft will be holding recap events of Microsoft Build. The Chicago event especially will be one not to miss. Tim Heuer will be delivering the opening keynote. David Catuhe (Babylon.js), Jerry Nixon, and Jeff Burtoft will also be there presenting.


Register for Wednesday June 10th if you are in the Chicago area.