10 Commandments of Visual Communication

When it comes to visual communication, what you see is what you get. There are no second chances, no redos. Visuals are an enormously effective form of communication, but they’re also fairly unforgiving. Studies have shown time and again that visual recognition is highly superior to other sensory recognitions, and it’s no wonder! The eyes are the windows to the soul, right? Or something like that…

LET’S CONSIDER THE WAY VISUAL COMMUNICATION AFFECTS DESIGN.

A person’s very first impression of a website, app, or advertisement is solidified in their minds within seconds of first seeing it, and, depending on the quality of design and the effectiveness of the visual elements, it could make or break someone’s brand loyalty and future receptivity to the product.

There are a lot of good designers in the industry, no doubt. However, great designers take their art a step further by heavily weighing the use of each visual element in their overall design scheme.


PLAY THEM COOL COLORS

 

visual communication color wheelPlaying with colors definitely becomes more intuitive with experience. A designer new to the industry might need to keep his/her color wheel stapled to their forehead for easy reference, while seasoned professionals simply feel out what works best.

It’s widely known that there are some colors that should never be used together (my pet peeve is the combination of grey and brown) because they don’t draw enough contrast and can create a faded look. There is also such a thing as too much, so stay far away from colors that compete with one another, and keep your color palette simple and limited.

The color choices you make also have a big impact on the hierarchy of a user interface. You wouldn’t want to emphasize an element of little value with a color that draws an extreme contrast. Save those “money-maker” colors for the most important elements on the page so that the attention will be focused on what’s most important.

It’s easy to get into a color rhythm; by that I mean it’s easy to make routine choices and to rely on color combinations that you’ve seen succeed in the past. Having go-to options is always a great thing, but don’t forget to stay inspired and discover new ways to match tones so that your work always feels fresh.


KNOW YOUR TYPE

 

visual communication typographyI’m extremely picky when it comes to typography, especially when it’s for a user interface. I tend to prefer elegant type, and I don’t like mixing crazy fonts. Think of the lady you know (because we all know her) who constantly wears a huge, bulky necklace with a big, glittery pair of earrings and an enormous, blingy bracelet. She thinks she’s looking foxy, but in reality she’s overdone it and is even a bit distracting. That’s what happens, digitally, when there’s too much going on with typography.

A good rule is to always err on the side of less is more. Focus on one standout font and play with its different contrast and weight options. Treat your main type selection like a prized piece of art, and take time to appreciate it without distraction.


SHAPE YOUR DESIGN

 

shapes visual communication commandment 3I love simple geometric shapes, largely because they can be used to symbolize so much without people consciously realizing that they are doing so. My graduation project was based on the translation of poems into basic shapes, and I had the best time working on it. It took me out of the world of clean lines and elegant type and forced me to think more abstractly.

It’s important to consider the use and placement of shapes because the brain of a user will process the shape they see before they even realize what they’re looking at. It’s an efficient way to support content and the overall message you’re trying to communicate. Shapes are a bit like road signs; you see them, they direct and influence you, but sometimes you don’t even consciously realize you’ve passed them by.


EVERY ELEMENT HAS A PLACE

hierarchy visual communication commandments 4

Have you ever looked at someone else’s design work and thought, “I’m not quite sure what it is, but there’s something off about that?” Nine times out of ten, it’s because hierarchy was not well thought through. Hierarchy brings about harmony, and harmony simple means that a design feels natural and pleasing to the user.

Hierarchy principles exist for a reason, the main one being that the user’s eye must gravitate to the most valuable information for a product to be effective. It keeps him/her from being intimidated by the noise and clutter of the data, and it ensures that the most important thing is very obviously the most important thing. Some would say that rules are made to be broken, and to that I’d say this: you can break the rules of hierarchy, but if you do so it should be done intentionally and without disturbing the user.


LINES SPEAK YOUR MOODS

lines visual communications commandments 5

If you think of a design piece as a house, lines are the walls that help separate information into sections so it’s communicated clearly. They create a clean, organized layout that emphasizes key elements on the page so the elements don’t get lost. Lines can stand alone or be part of a larger shape, and, like shapes, they influence the way a user reads a design. Vertical lines imply feelings of dynamics and speed, while horizontal lines tend to create a sense of serenity and calm. The use of lines in visual design might seem like an afterthought to the untrained eye, but to a designer they are a critical component of his or her work.


ALL ABOUT ICONOGRAPHY

iconography visual communication commandments 6

Iconography plays a huge role in a user interface. The images within a design set the tone for what the user is going to experience as he/she navigates the interface, probably more so than any other element. As I mentioned at the start of this post, people are visual by nature. Imagery speaks loudly, and there’s no room for error when you’re building an image into your design.

Translating a concept into an image can be hard. The most important thing to remember is that the purpose of the image must be clear. The user has to be able to look at the image and immediately understand why it has been selected to be part of the UI. If you use an icon, the symbol needs to be universally understood, or at least fully understood by the specific group of people the product is targeting. If an icon or symbol can’t be clearly understood, it’s best to stick with text so there’s no potential for uncertainty.


NO ROOM FOR GREY AREAS

 

contrast visual communication commandments 7Contrast matters for every element of design (typography, shape, hierarchy, colors, etc.). It can make or break a user’s experience with an interface. When there’s not enough contrast built into a design, it becomes difficult for a user to navigate their way through the information that’s being presented. When there’s too much contrast, the user’s eye is drawn away from the critical information and instead focuses on the design itself because the elements pop too much and demand their full attention. I’m all for creating designs that users can appreciate; however, when their eyes are drawn more to the design than to the important information, a designer has effectively failed.

Take your time and make sure that you treat contrast in your designs with the respect it deserves. Play around with different levels until it sits just right for you. Ask coworkers and fellow designers to offer feedback. It’s just that important.


KEEP THINGS ALIGNED

order visual communication commandments 8

I like order, and I’d wager that the majority of mankind likes it too. Even if a person is not good at keeping things in order, they tend to appreciate the concept. In design, order is part of a well-planned hierarchy. When things are organized, a user is more likely to have a calm, distraction-free experience with an interface. When things are disorganized, a user’s eye is quick to catch the flaw and he/she immediately feels a sense of discomfort as they attempt to continue navigating their way through the information. Make order a priority as you build out your design concepts; the users will thank you for it!


SIZE MATTERS

weights visual communication commandments 9I already talked about font weight briefly, but let me emphasize how important it is to consider the diversity of weights available within a font. The use of different weights is a great way to help hierarchize a design while keeping it very clean.

It’s important to select the right font weight for each element in your design, allowing the individual element to dictate which weight is the best fit. Don’t randomly change weights; always consider its effect on the element at hand, and take weight choice on a case-by-case basis. It should serve a purpose, like highlighting a concept, an action, or a title.


LESS SPACE IS MORE SPACE

space visual communication commandments 10And again we’re back to the less-is-more concept. Space must be used smartly in user interfaces. In the same way that silences and calculated pauses are effective when giving a speech, negative spaces allow the user to breathe a little, and to understand and digest the information they’ve been given.

We have all experienced interfaces that don’t contain not enough negative space. There’s nothing worse than feeling overwhelmed by too much data, is there? If breathing room, visually-speaking, is not intentionally created, you can be certain the user won’t clearly understand the message you’re trying to get across.

AND THERE YOU HAVE THEM!

You can hang your hat on the 10 Commandments of Visual Communication. Imagine what kind of incredible art we’d all be spitting out if every designer stopped to consider these 10 things before they embarked on a new design journey. It’s a lofty idea, but let’s don’t discount it completely. Maybe it simply starts with you and me.