The Handcrafted Interface

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.

Example of the copy-to icon and move slot icon.

The “copy-to” icon and “move slot” icon both echo the shape of the slot to better convey the idea of duplicating or moving the slot in the playlist.

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

Concept sketches

Concept sketches for the “copy-to” icon.

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.

Editing the icon

Editing the icon in Adobe Illustrator.

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.

Icon being mapped to a character

The “copy-to” icon is mapped to the “next page” character.

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 atypic 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.

Some of the new icons

Some of the icons in the new Retriever interface.

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.

This entry was posted in Design, Digital Signage and tagged , , , . Bookmark the permalink.

Comments are closed.

It looks like you are trying to teach an old dog new tricks!


Get Chrome

Support for this browser has ended. Please update to a modern browser such as Chrome, Firefox, Safari, or IE 10+. (Chrome is our favorite.)


Login

You can still login to edit your Retriever, although previews will be more accurate if you update your browser first.