Designing the Visual System

The visual system doesn’t happen in a vacuum, it gets developed over many iterations and experiments with color, type, layout and texture. The process starts with research. After reading over my notes from the research process, I identified the type of look and feel I was going for. Actionable keywords were chosen, and a series of moodboards were developed. Find out more about this process here.

The system doesn’t start as a list of swatches and typefaces on a page, it gets developed through iteration and experimentation. It also needs to work across channels, digitally in the form of apps, social media posts, emails and websites, as well as in physical space through posters, books, and environmental graphics. In order to do this, I’ve chosen to develop a brand poster. The poster has many of the elements of the system—different typefaces, levels of text hierarchy, imagery, patterns and texture, and photo treatment.

Sketches for the Brand Poster

I actually start this stage with writing. I determine what the headline, subheads, and any body text will say, that way, when I move on to sketching, I know what specifically the poster will be communicating, and have a place to start when determining hierarchy. From there, I move onto sketching. I create many possible layouts, playing with a few different design directions that reflect my keywords. This gives me direction when I get into digital comping. I know what kinds of images to look for, typefaces to use, and layouts to experiment with.

Digital comping allows me to get more detail. I refine my initial ideas for layout and hierarchy, add color and imagery, and really dig into how the system might work. It’s not enough to just list out the ideas, you really have to experiment to see how it might function in different use cases.

Once I have a direction, I run additional tests in type, color, and imagery. I test the messaging, and make sure it is reflected across all of my decisions. In this case, I’m looking at visibility–will this poster blend into the background or draw attention? Is there a clear call to action, do people know what it’s for, and where to go to find out more? Does it feel empowering, or does it feel more like charity? All of these things will be tweaked and adjusted over several rounds and likely again as other deliverables are added to the system.

Now I start working on the one sheet—which is basically an overview of the elements of the system. These are the swatches, typefaces, and general rules I and other designers will use when utilizing the system. I’ve made decisions through working on the posters, and I record them here. I’ll continue to update this as new decisions are made and functionality is required.

The first round of the visual system. This document will be updated over time, as the brand system develops.