We Heart Harmony

by Michael Mesker

The interfaces we design for our clients are populated by wide array of buttons, menus, icons, and forms. They are often embellished or touched with some treatment unique to the client's brand or aesthetic. As responsible UX designers, we are naturally trying to create a harmonized visual experience. And as you can probably imagine, creating and executing these embellishments across the site in an interesting way is often half the 'fun' of what we do. Of course when you are having fun, its easy to get carried away and make a dropdown menu a bit too complicated looking, or a certain button overly detailed. To remedy this, we have started creating "Interface Harmony" documents for our projects. 

We originally came across the idea through a post by fellow designer Nathan Borror. Upon reading that post, we had a "wow, that's so obvious" moment, fell completely in love with idea, and then went to work figuring out where we could incorporate it into our existing process when working on the recent re-launch of Vocalo.org for Chicago Public Media.

Reduced-size example of an Interface Harmony document
Example of an Interface Harmony document at 50% size

To create these documents, we mine our design mockups for every aspect of the interface, then gather them all onto one ginormous Photoshop file. We then document the different states of interaction for each button, menu, etc, and make sure the look and feel is consistent and predictable. From this bird's-eye point of view, we have a fantastic way for us to evaluate our efforts, review how each element visually relates to one another, and make educated adjustments. We always find something to refine or simplify. We heart simplification.

We also heart teamwork! We are dedicated to figuring out the best method of working with our front-end developers to make our designs easier to implement. With that in mind, the process of creating a few interface harmony documents uncovered some logical 'after-market' uses.

Simply as a by-product of laying out the elements onto a single canvas, the document becomes a valuable reference tool for our front-end developers. In tandem with the style guide, it provides pixel-perfect representations of what they need to recreate. By seeing the interface elements removed from the page designs, it gives them an easy to digest visual education of the site, in ways a style guide or collection of page mockups just can't. From a teamwork perspective, this is awesome.

Vertical rhythm, FTW!
Vertical rhythm, FTW!

Taking that idea a bit further, we layered in the vertical rhythm grid (on which all of the interface elements are designed around) to provide an even higher-level understanding of the design system at work. The vertical rhythm grid provides the front-end developers with a 'quick-read' on an element's measurements and structure. Meaning, much less time spent measuring pixels in Photoshop. Everyone can heart that.

In summary, we've elaborated on our design documentation process to not only include a style guide, but an easy to scan interface harmony document, that is useful to both the UX and front-end development teams. We like it!