Subtractive Visual Design
Visual design is an act of problem solving. You have a message to communicate and you seek to find a visual way to express this message. During the design process, you create graphics and text and organize them on the screen in the most effective way you can.
The most typical way to design is with an additive strategy. During the additive process, you add more visual elements to a design, such as color, texture and decorative flourishes. For example, you might add a lightly patterned background, a gradient fill in a text box and a shadow behind an eLearning character. I know I do this to make a design more interesting and appealing. Although the additive design process works, does it detract from the message in the end?
What would happen if you tried the opposite approach, known as subtractive design? You remove every extraneous visual attribute and element to strip things down to the essence of what you want to communicate. You ask yourself or an associate, does this background help or hinder the message? Do these colors move my purpose forward? In subtractive design, less is more.
A Stronger Focus
The advantage of the subtractive design process is that it gives your work focus. For example, in eLearning courses every screen or slide should have one purpose. It might be to convey a concept, to illustrate a process with a diagram or to provide an interaction. When you use a subtractive design strategy, you are likely to improve the focus of your designs by removing unnecessary clutter. This helps ensure your message is clear.
Subtractive Design In Action
Let’s look at a few examples, that I admit are a bit extreme. Suppose someone is creating a course for new supervisors at an automotive plant. This person is using a workplace theme for the course and the bulletin board serves as the user interface. The purpose of the menu below is to help users navigate.
But to make the board look realistic, the designer uses a stock photo with papers of all different sizes and colors, lots of pins and a few photos. The realism works, but it defeats the purpose. A menu should be easy to read and use.
Using the subtractive design approach, we remove every item that is not essential for creating the menu. We take off the photos, extra paper and pins, leaving the uncluttered and easy to decipher menu below.
In the extreme case below, the focus is supposed to be on the interaction. An instructional designer might choose a clock background like this because it suggests time and productivity. The problem is that a very busy background becomes a distraction. Your eyes aren’t sure where to focus.
In addition, the brightly colored text box appropriately attracts our attention, but the color is a bit hard on the eyes. Without that background, the color won’t need to be as bright. Finally, the logo in the bottom right is extraneous. There is no need to place a logo on every screen during a learning experience. Logos take the focus away from the real purpose. This type of design screams for the subtractive approach.
Let’s examine the design and remove everything that is extraneous. We can remove the logo, the busy background and the over-saturated color and still convey the intended message. The subdued design shows that we want to focus on the interaction.
If you use this approach, you may find your work begins to have more power and greater focus. It takes practice to find the right balance between simplicity and a pleasing aesthetic. Perhaps the solution shown above is too simple. What do you think?
Try out subtractive design and let us know what you discover in the Comments below.
Get The eLearning Coach delivered to your Inbox every month, with articles, tips and resources.