Jason VanLue)

The Symphony of Design

DATE: 02.11.13 • READING TIME: 15min

When we look at art our visual sense communicates to our brain and we perceive things like color, lines, imagery, depth, and perspective. All of these combine to form an emotional cocktail that tells the story of the piece; that communicates to us through a visual language.

I love art. Last summer my wife and I had the opportunity to travel to Paris for the first time. When I planned out the schedule, there was no question The Louvre would be a first-day stop. You know those audio tours you can take, where you put on a grimy set of headphones that eighty other people have worn before you? Yeah I hate those.

But imagine if you were walking through The Louvre with an audio tour and all of a sudden the paintings disappeared from their frames, the sculptures sunk into the floor, and all that was left was an auditory description of what you should be seeing. Sure, it's communication, but it just wouldn't be the same would it?

All language is unique and beautiful in its own way. When you admire a piece of art, or appreciate a form of design, it's like you experience the visual form of music. When I stand in front of Gèricault's Raft of the Medusa a symphony of visual sound begins to play in my mind. A quite different but equally pleasing symphony plays when I admire the vastness of Veronese's The Wedding Feast at Cana (almost 10 meters tall). The point is that there is a visual language, and the characteristics of that language evoke certain emotions, feelings, and even actions. By definition, a visual language is:

"A system of communication using visual elements."

As a designer, part of my job is to solve problems for my users. Often, in the digital space, these problems are solved by compelling users to take a certain action. To encourage them to do something or understand something.

In the digital space we accomplish this primarily through the use of visual cues. Our design is on the screen, and unless these screens yell at you, the design is what compels you do a certain thing. So it's important for us to understand that the visual language of our design must be like a symphony, not a cacophony. A symphony is harmony between many sounds; it's music that ebbs and flows. A cacophony is everything playing at once; it’s just noise.

In many ways art and design are very different, and it stands to reason that the visual language of each should also be different. Art's visual language might illicit a more emotional response, or an appreciation for the specific artistic elements by themselves (color, line, etc). Alternatively, the language of digital design might be action-oriented towards a particular goal. Here are a few common purposes of the digital visual language:

  • Drives user action
  • Provides user feedback
  • Enhances the user experience
  • Provides navigation / way-finding
  • Optimizes content

So how do we develop a visual language? I think it follows a similar path to how we develop a brand. When I'm designing a brand, and in particular developing core brand standards, I consider four main things:

  1. Color
  2. Typography
  3. Imagery
  4. Messaging

All of these are individual elements in our visual language. Going back to our symphony example, consider each of these elements as a piece of the orchestra. If one is out of tune—that is, maybe it doesn't fit the brand persona, or is in conflict with the identity of the brand—than the symphony becomes a cacophony. However, if each element is perfectly tuned to itself and to other elements, the result is a beautiful harmony of design.

To extend this point, I'm a big Lord of the Rings fan. I read the books annually, and the LotR score composed by Howard Shore is one of my favorite collections of music. I recently watched a special where Shore talked about his composition and explained a lot of his decisions within the score while also conducting the Lord of the Rings Symphony. I found it fascinating how he sought to create a unique sound for each 'land' and people group throughout the story. For instance, he uses the Irish Whistle at the beginning to represent The Shire, but notes that as the Hobbits mature throughout the story the sound should mature as well. By the end of the composition, The Shire sound has matured to that of a flute.

When developing our visual language, we consider the four items mentioned above, and apply them to three main questions:

In this design, what is our…?

A) Tone & Voice
B) Hierarchy
C) Consistency

A) Tone & Voice

Once we have a brand persona defined, we can draw our tone and voice from that. This affects all four of our core standards. We want to make sure our tone and voice is consistent with our brand persona, and that we infuse it across all of our design.

COLOR

What is our color palette? For every design we should be developing a complementary palette of colors that represent the look, feel, and tone of the brand. I'll typically break down my palette into levels, usually in this order:

  • Brand (top-level colors included in the logo / identity)
  • Primary
  • Secondary
  • Alternate / Sub-brand (if necessary)

TYPOGRAPHY

What is our font stack? As with color, we need to determine the brand tone, and choose fonts that complement each other and support the tone. Is our tone playful, somber, serious, modern? I'll typically break down the font stack into a few levels, but feel free to add or remove as needed for your design: Headings (primary, secondary, alternate — or by h1, h2, h3, etc) Hero / Special (if you want to creatively set apart certain sections of content)

  • Body Copy
  • Callouts (blockquotes, special aside blocks, etc)
  • Buttons / Action Blocks
  • Links

IMAGERY

What images are you using? Imagery is a powerful tool that we can utilize in a number of different ways. Imagery often provides an important human element that is lacking in digital design. But we must be purposeful in our selection of imagery. It must resonate with our users, and be intentional. Otherwise it’s just decoration, and gets in the way of optimal function.

When we ask ourselves “is this the right place for this image”, we must also ask ourselves “is this the right type of image?” Is it relevant to the user? Does it fit within the brand’s voice, tone, and feel? On the whole, I think it’s not that we aren’t optimizing placement of images; it’s that we’re not optimizing the type of images.

MESSAGING

What is your message? And just as importantly, in what voice should your message be written? Unfortunately, content is the oft forgotten element in digital design. But it's not just integrating content; it's integrating the right content.

MailChimp is a great example of a brand who knows their voice and message. They've even developed a site called Voice & Tone. They've allowed their brand persona to permeate the tone and the voice of their messaging, imagery, typography, and color used throughout their app and elsewhere. Their visual language is harmonic because of the intentional effort they put into each.

B) Hierarchy

At the heart of poor user experiences is a lack of hierarchy. There is an ebb and flow to language—in Ferris Bueller when the professor is droning on there is no ebb or flow to his voice, and what ends up happening? All the students fall asleep. It's the same for written, and visual language . Hierarchy is especially relevant in typography, and we'll focus on this standard.

TYPOGRAPHY

We've already covered how to organize your fonts to communicate tone, and that applies to hierarchy as well. What I've come to realize about most users is that they are rarely able to articulate why something is wrong but they are able to tell you that something is wrong. If your type hierarchy is jacked they'll know, and they'll have a sub-optimal experience.

To illustrate this point let's look at Mashable's recent redesign. There are portions of the design that I like, and I can understand why the design team made some of the changes they did. But the lack of hierarchy in their type is a bit baffling.

If you take a quick glance at Mashable's homepage, can you tell what are key headings, primary stories, ads, links, key calls to action, etc? Maybe if you looked hard enough, or were familiar enough with the site. But at first glance, it's confusing and even a bit unnerving. I usually go elsewhere. To optimize typographic hierarchy in your design you have to look at a few things:

  • The font itself
  • The size
  • The color
  • The line height
  • Additional attributes (text-decoration, letter-spacing, block width, etc)

Make sure that your primary styles look primary, and cascade down appropriately. Part of a symphony—and the harmony that makes that symphony—is rhythm. Your design should have a typography rhythm. You can set the typographic hierarchy or rhythm manually, or if you're into using Sass and Compass, you can tap into the beauty that is Vertical Rhythm. You can learn more from Nick Walsh's Design Orlando talk, or we have a Code School course that covers it, but here's the gist:

Richard Rutter explains Vertical Rhythm (VR) as,

"the spacing and arrangement of text as the reader descends the page"

Rutter notes that VR is contributed to by three factors: font size, line height and margin or padding. All of these factors must be calculated with care to ensure that the rhythm is maintained.

To establish your VR you set your baseline font-size and base line-height:

$base-font-size: 16px;

$base-line-height: 24px;

@include establish-baseline;

From there you can adjust various elements while keeping that baseline proportionally intact. For example:

h1 {@include adjust-font-size-to(50px);}

h2 {@include adjust-font-size-to(35px);}

h3 {

    @include adjust-font-size-to(24px);
@include adjust-leading-to(2);
text-transform: uppercase;
} blockquote { @include adjust-font-size-to(28px);
background: #ccc;
font-style: italic;
}

It's a quick and easy way to set your typographic hierarchy and ensure that it retains its proportional integrity, and degrades elegantly.

C) Consistency

Consistency ties everything together and involves all four standards. Your design must have consistent color, consistent typography, consistent imagery, and consistent messaging. I would argue that it is better for a design to be consistent than trendy. In other words, consistency in style (even if the style is basic) is more valuable than the style itself.

To illustrate the importance of consistency, here's a bad example from Code School (I can say this because I'm at fault).

In the 'Course Syllabus' section we noticed a lot of clicks on the level titles, as if users thought those headings were links to the specific level of the course. The problem is, they aren't links. Our analytics data revealed that we weren't being consistent in our use of color, and more specifically in link styles. In this case we failed in a lot of ways (sad trombone). We failed to apply appropriate color standards, typographic hierarchy, and consistency in link styles.

Style guides are incredibly helpful to help maintain consistency. I try to graft building a style guide into the workflow for every project, even the smallest. Sometimes this means a simple PSD style guide will suffice; other times we need to further define our styles by building a front-end style guide. We've developed both for Code School.

By maintaining a PSD style guide it's much easier for us to throw together quick mocks of concepts using the appropriate styles. It makes us faster, but I also find it protects against the inevitable 'progressive redesign'. And by that I don't mean appropriate iteration. I mean adding in new styles or changing old ones either because you don't remember what the existing styles are, or because you just don't like them anymore. Change is good, but it has to be intentional change. The effort required to make sweeping changes to a visual style guide usually prevents unnecessary and flippant tweaks.

Additionally by maintaining a robust front-end style guide, it's easy for us to prototype concepts in the browser, and more importantly maintain a consistency across our code. We've discovered a huge benefit in how we interface with our dev team as well. They now have a resource to access to keep them accountable as much as the designers, so any front-end code that's being developed is within guidelines and on brand.

Without consistency, it's hard to have a true identity. Consistency is essential to building a positive experience for your users, and to creating a beautiful symphony in your design.

Wrap Up

I'll close with a lesson from Frederick Law Olmstead, America's 'father of landscape architecture'. Olmstead had a principle that he designed by:

Subordinate Details to the Whole

Olmsted felt that what separated his work from a gardener was “the elegance of design,” (i.e. one should subordinate all elements to the overall design and the effect it is intended to achieve). He warned against thinking “of trees, turf, water, rocks, bridges, as things of beauty in themselves.” In his work, these details were threads in a larger fabric. That’s why he avoided decorative plantings and structures in favor of a landscapes that appeared organic and true.

In the same way that Olmsted noted the difference between designer and gardener, we need to note the difference between a designer and a decorator. A decorator focuses on one item for the sake of that item. A designer focuses on all of the items, and weaves them together in a beautiful symphony of design. Be a designer, not a decorator. Compose a visual language, and enjoy the beautiful harmonies it will bring.

Talk to Me On Twitter