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.

Ghost CSS Formatting Images

I recently switched to using the awesome Ghost blogging platform and while styling I was stuck finding a way to format images next to each other in a grid pattern. I came up with a quick solution that looks like:

Ghost Image Columns

In my site I wanted to pull the images to the left and right 10px outside of the <p> element. This makes them standout a bit more from the text that has a 20px margin.

Ghost Grid

Using the markdown syntax ![]() place each image on their own line (up to 4 in a row) for them to resize into a neat column format. Preview an example in my Microsoft Build 2016 post.

.post p {
    position: relative;
}

.post p * {
    box-sizing: border-box;
}

/* One Image */
.post p img:first-child:nth-last-child(1) {
    width: calc(100% + 20px);
    border: 1px solid #DDD;
    margin: 5px -10px 0 -10px;
}

/* Two Images */
.post p img:first-child:nth-last-child(2),
.post p img:first-child:nth-last-child(2) ~ img {
    width: calc(50% + 4px);
    border: 1px solid #DDD;
}
.post p img:first-child:nth-last-child(2) {
    margin-left: -10px;
}
.post p img:first-child:nth-last-child(2) ~ img {
    position: absolute;
    right: -10px;
}

/* Three Images */
.post p img:first-child:nth-last-child(3),
.post p img:first-child:nth-last-child(3) ~ img {
    width: 33.3333%;
    border: 1px solid #DDD;
}
.post p img:first-child:nth-last-child(3) {
    margin-left: -10px;
}
.post p img:first-child:nth-last-child(3) ~ img:nth-child(2) {
    position: absolute;
    right: 33.3333%;
}
.post p img:first-child:nth-last-child(3) ~ img {
    position: absolute;
    right: -10px;
}

/* Four Images */
.post p img:first-child:nth-last-child(4),
.post p img:first-child:nth-last-child(4) ~ img {
    width: calc(25% - 3px);
    border: 1px solid #DDD;
}
.post p img:first-child:nth-last-child(4) {
    margin-left: -10px;
}
.post p img:first-child:nth-last-child(4) ~ img:nth-child(2) {
    position: absolute;
    left: calc(25% - 4px);
}
.post p img:first-child:nth-last-child(4) ~ img:nth-child(3) {
    position: absolute;
    right: calc(25% - 4px);
}
.post p img:first-child:nth-last-child(4) ~ img {
    position: absolute;
    right: -10px;
}

New Site

New site is online... still a few bugs to work out, but really liking the Ghost blog platform. Will take a while to copy all the old posts over.

I forgot how far back these posts go and I rarely ever post. Guess this blog has been up for a few years now (2011?).

Material Design Icons v1.6.50

The release for v1.6.50 was announced today and can now be downloaded. This is a pretty nice update and includes around 100 icons, 20 various icon fixes, and some new SCSS file improvements.

npm install mdi
bower install mdi

Like always this release could not have been done without all the work from the contributors on the team. Impossible to do this without them as the project has scaled in scope and users.

This is one of the rare releases that comes with breaking changes to those using the SCSS files. To make things easier from now on the _icons.scss contains only the loop logic, while the actual icon list is in _variables.scss.

@each $key, $value in $mdi-icons {
    .#{$mdi-css-prefix}-#{$key}:before {
        content: char($value);
    }
}

Thanks for all those that helped out in this release and will be starting on some of the high priority issues shortly after taking a break.