Ungerboeck Digital - Blog



Blog Like an Egyptian

Kevin Zink
Aug 25, 2016
website iconography

As texting became ubiquitous, users began to expect quick interpretation of acronyms, emojis and variations of "leet" speak. Often times, text messages rely on iconography in order to convey information in a concise manner. As iconography gained mainstream acceptance and viewports reduced in size, user interface conventions began to morph. Incorporation of icon-based navigation/menus began to surge in order to reduce the footprint of individual navigation items while still allowing the user to easily determine functionality.

That Was Then

Icons were often used in early systems in order to conserve memory and display space on low powered/low resolution devices. Memory and resolution are no longer an issue. Maintaining real-estate for important, non-navigation information is. One of the most successful additions to the icon arsenal has been the advent of the "hamburger" menu. Although this icon has proven itself as a staple of a vast number of mobile views, it is anything but recent. Various internet sources reference Norm Cox as the original designer as part of the interface for Xerox Star personal workstation as early as 1981.

This icon, however, is far from the top of the list. A floppy disc (what are those?) still continues to represent "Save" functionality. A rotary handset (do you mean an old phone?) often represents contact information.  An envelope (you still send paper?) will designate the e-mail functionality. And a magnifying glass (thanks Sherlock) is often tied to a site search.

You may notice that many of the above icons are derived from past manual instruments that performed similar, if non-virtaul, functions. These objects continue to influence our design decisions.

Just a decade ago, including iconography within a website often meant creating graphical icons for each individual instance - one for each color, size, orientation, etc. This meant multiple trips to the server for the user as well as numerous steps for a designer/developer to introduce new icons into the mix.  

The server issues were mostly removed by the advent of sprite-sheets. Taking their cue from game programmers, developers found that they could create a single sprite-sheet containing all instances of all icons and simply display a specified region (via CSS cropping) when an individual icon was required.  Although solving a number of existing issues, this introduced several new issues including reliance upon CSS as well as difficulty in managing sprite-sheets/CSS if an icon needed to be resized/reformatted or a new instance included.

This Is Now

Today those issues have been solved, mostly, via the use of font sets. Utilizing a service such a Font Awesome or Google Fonts, developers were enabled to quickly reference a hosted font, based on vectors, allowing them to resize, color, cast shadows, transform, rotate, etc. Services such as IcoMoon extended this functionality and have given designers the ability to select from a plethora of existing icons or upload local SVG files in order to generate custom font sets.

Once the correct reference link has been created, developers and editors are able to use the icons as they would any other character within a font family. The only drawback to this technique is that the fonts are single layer and, as such, cannot contain -- without a decent amount of work -- multiple color blocks within a single instance.

What does this mean for your site? This means that you can use any number of symbols within your navigation structure and not worry about ever-changing requirements on  size, color, or layouts within existing sites. Hieroglyphics are dead! Long live hieroglyphics.


Let's Talk

Looking to know more? Drop us a note through the form below.

636.300.5606  |  100 Ungerboeck Park, O'Fallon, Missouri, 63368