Uncategorized

The Handcrafted Interface

Mike

When creating anything great, it is important to consider every detail. Every part in an engine, every stitch in a garment, every brushstroke in a painting, contributes to the quality of the whole. This is also true for application development. Developing an application like the Retriever requires the consideration of many disparate parts and functions — not only in the code, but graphically as well.

The icons in the new user interface were designed specifically for the Retriever. Although a few are standard interface shapes, many were conceived exclusively for this interface, and all were handcrafted in Adobe Illustrator. This allows for a consistency — and accurate symbolization — that might not otherwise be attainable.

The Process

For each symbol, we began with the function it represented. We sketched out different symbols and discussed which one most clearly communicated the idea behind it. By designing icons that are clear and concise, we create an interface that is intuitive and simple.

After we decided on a shape for each icon, we drew it in Illustrator using a grid for precision. Care was taken to shape each curve smoothly, to round each corner consistently, and to weight each glyph appropriately. Most of these details can only be seen at large sizes, but they add a subtle cohesiveness to the collection.

The set of icons was then imported to IcoMoon. IcoMoon is a web application for creating icon fonts. They have a library of icons that are ready to use, but designers can also import their own vector graphics. This is useful for projects like the Retriever that require custom symbols to represent certain features.

Once in IcoMoon, each icon was mapped to an appropriate character. This allows for an appropriate fallback should the icon font fail to load. For example, by mapping the “scheduling” icon to the “watch” character (⌚) it is semantically correct and would still show as a clock without the font.

Next, the icon set was downloaded as both a font and as an image-sprite. Having the icons in a font provides several advantages. First, it is vector. That means it can be scaled as needed, plus it looks crisp and sharp on high resolution displays like Apple’s retina display. Second, the whole set is contained in a single file, so there is only one http request, meaning a faster page load time. It is also more flexible for things like coloring the glyphs or adding drop-shadows.

The image-sprite (all the icons in one image) is also beneficial. Modern browsers have no problem using an atypical font, providing it is supplied correctly, but some older browsers have no support or only partial support for loading such fonts. In those cases, the image-sprite is provided as a fallback.

Thus, the Retriever’s custom icons are provided as a font for browsers that will load them. If the browser cannot load the font, it loads the same icons as an image — not as sharp or flexible, but still the correct icons. If there is still some problem, the icons show up as characters that closely approximate what the original icon represented. This provides each user the best possible experience.

A good user experience is what it is all about. We work hard to consider every detail to make the Retriever intuitive and easy to use. Handcrafted icons are only a small part of a handcrafted digital signage solution, but at the Retriever, we believe that even the small details can make a big impact.

The new Retriever interface is scheduled for release later this summer (2013). Upgrading to the new version will be included for all existing users at no extra charge, so there is no reason to wait. Check us out right now at RetrieverDigitalSignage.com and start using digital signage that is handcrafted and easy-to-use.

Mike Baldridge

Mike Baldridge

Mike Baldridge is a graphic designer and web developer for DRM Productions. He has put these combined skills to use developing a library of slide templates for the Retriever. When he’s not working, Mike enjoys digital painting as well as some traditional drawing.