When we think of creating a consistent “brand voice” for marketing purposes, we usually think of our direct communications: Our blogs, emails, or web copy. It’s easy to forget that there’s another communication channel that needs the same devotion to your established brand persona—your website design.
Communicating Through Web Design
You don’t need to be a web designer to see how crucial your website design is for communicating with your customers. It can even be more important from a certain perspective. While web copy and published content speaks to your consumers directly, your website design influences your audience indirectly. Every design choice produces a psychological impact on your readers that’s hard to quantify but powerful all the same.
But this type of subtle messaging needs to be congruent with your other materials and your brand voice overall. If it’s not, prospects near the point of conversion may get frustrated about your mixed messaging.
Research published in Contemporary Research in E-Branding had some interesting things to say about this subject. Researchers found that when the user’s goals were congruent with the website’s design elements (such as navigation), users were more likely to experience “flow”—the creative state of absolute absorption in a task. From a UX design standpoint, achieving this flow is an ideal outcome.
So, how do you assess your web design to make sure your brand voice is congruent with your other choices? We’ll be looking at four different elements.
Visual Hierarchy
Your visual hierarchy, as a quick refresher, involves the way you structure and sort content on your page. The idea is that items of highest importance (headers, CTAs, etc.) will have the most visual weight, featuring the biggest font size or the boldest colors. These will be the first elements that draw your readers’ eyes, and they should telegraph the most important information about your company. As you travel down the page, content becomes smaller and less prominent as it becomes less relevant.
Look at Spotify for a quick example. A somewhat minimalist approach, Spotify has only three things on its home page: Hero text, description, and CTA. It’s a simple hierarchy that gives visitors exactly what they need to know. While this works as an example of visual hierarchy, it doesn’t go a long way in showing off Spotify’s laid-back voice.
For a better example of design/voice congruence, check out Dropbox. It follows the same hierarchal structure, but in this case, the design features striking images, contrasting color boxes, and simple, explanatory animations. Dropbox does it right—the company’s voice is informal, friendly, and creative. All of these elements are supported in the web design. Their choice of web copy is approachable, and the sharply contrasting colors of its background suggest creative potential and imagination.
Keep these important elements in mind as you build your website.
Font Choice
Next, look at your font choice. This one’s a little more intuitive than visual hierarchy. Some fonts were designed to be flashy and artistic, while others were made to be more subdued and versatile. But whichever you choose, you’re telegraphing information to your viewers about your brand. This is easiest to see in specialty companies with distinguished markets and personas, such as jewelry retailers.
In this example, Kay uses a font with sharp lines and modulated strokes to create a clean and friendly layout. It’s not over-the-top elegant or overly casual; it’s part of a cohesive web design layout that supports trust and approachability—two great goals for a luxury retailer.
Balance and Spacing
While you’re at it, make sure your layout’s white space and overall balance supports your voice. While there’s some room for interpretation here, most companies want to strike a good visual balance with their content—not too cluttered, and not too open.
Look at your brand’s voice and see which end of the spectrum makes more sense. Generally, sites focused on fun and entertainment can get by with more cluttered layouts, as users aren’t on a mission and won’t be frustrated if they can’t find what they want. But if you have a site designed to attract and draw leads down a marketing funnel, you’ll do best with minimal layouts and simple navigation.
Don’t take spacing for granted! Research shows that using white space to balance your content effectively increases comprehension by 20 percent.
Color Choice
Color also plays a big role in how users perceive your site. It’s known that color increases brand recognition by 80 percent; and when you consider how much information colors can telegraph to readers, it’s no surprise that it’s such an important part of brand recognition.
Research into the psychology of color design shows that we tie strong emotional associations to each color on the spectrum. Blues are considered trustworthy, strong, and safe, which is why it’s a preferred option for tech companies like Dell and Facebook. Others, such as red, ignite passion and excitement, used by the likes of Coca-Cola, Target, and Netflix. There’s a great infographic here that lists plenty of examples of this in action.
Clearly, you’re sending your viewers a message when you choose a particular color. You need to look at what your brand does and what type of emotional connection you’re trying to create, and leverage the colors that make sense for that persona. Don’t use soothing tones if you’re trying to get readers excited, and don’t pummel them with color if you’re trying to calm them down.
Consistency In All Web Design
Consistency in messaging creates consistency in voice, and the messaging put forth by your website design is no exception. Look at the above issues and learn more about what subconscious information you’re giving to your readers. For the best possible UX, these messages need to be aligned with the direct communications you’re presenting. This is the best way to educate users about your company and help keep them engaged as they explore your brand.
