When it comes to branding, tone is the combination of several different visual components that all work together to give a certain impression or feeling. All too often, people think of tone as being solely verbal, however we’re going to explain (and show) how both verbal and visual elements must work together to create a brand’s tone.

The ways in which a brand embodies a certain look and feel happens through defining the brand’s personality traits and their voice, while also taking into consideration who their audience may be and what is appropriate for their subject matter.  Once the personality traits and voice have been defined, the visuals can come to life through the brand’s website, which gives even more life to the brand through the interaction design, the incorporation of video and animation and the ways in which the brand takes advantage of its messaging opportunities.

Defining a Brand’s Personality

A brand’s personality is the basis of who the company or organization is, and who it wants to be. How goofy or serious a brand is, is rooted in the nature of its business, but is often also a direct result of the stakeholders within the company and what image they are comfortable portraying.

A successful brand lives and breathes its personality as an organization, both internally and externally. Personality traits are adjectives that describe the brand as if it were a person. They are often determined in the very beginning stages of a company’s existence, whether they are documented formally or not. Descriptors such as sincere, friendly, quirky, inviting, rugged, and sophisticated can all be used to define a brand and set the organization apart within its industry.

Typically, a combination of 3-5 words encapsulates the essence of a brand. While honing it down to a single word may work for some brands, it can be very limiting in its execution. Even describing a person in one word only shows a piece of who they are, not the full range of their personality. The same approach should be taken with a brand.

Defining a Brand’s Voice and Style

In addition to personality, another important aspect of a brand’s tone is the style of its voice. A brand’s voice takes those personality traits and works through how a person like that would sound when they speak. Are they enthusiastic or mellow? Formal or casual? The visuals for a brand are just as important and impactful as the messaging. It’s crucial for both the messaging and visuals of a brand to be aligned. When these two are not aligned, customers (and potential customers) can be confused, unimpressed, and unsure of what the brand is all about.

When considering how a brand should sound, the first and most obvious step should be understanding who the audience for the brand is. For example, charities and non-profits who deal in delicate situations may want a voice that is light hearted, but not comical or goofy to risk coming off as insincere. Another example would be a jeweler. First, they might look at their price point and the demographics of consumers likely to buy their product. If the company is selling expensive and extremely high-end products, then they might want to maintain a voice that is elegant and sophisticated. If instead their products are more moderately priced, they can get away with a tone that is witty, laid-back or even playful. The appropriateness of the tone for a brand’s audience and subject matter is as important as the execution of the visuals and voice for the brand to be successful.

Ways in Which Tone is Expressed

The tone of a brand’s website is expressed through a combination of its:

  • Visual design
  • Images & photography
  • Video & animation
  • Interaction design
  • Messaging and voice

While a single element conveys a particular tone on its own, it’s how all these pieces work together on the website that paints the full picture.

Visual Design

The design elements, color palette and layout are all pieces that make up the visual design of a brand’s website.

Enthusiasm

Color combinations that are bright and saturated give off a sense of energy and enthusiasm, working well for brands that are upbeat, positive, friendly and welcoming. They might also utilize illustrations and sans serif typography to maintain that vibe through the whole brand.

Drama

Brands looking for more drama will typically use black as a primary color in their palette, with an accent color or two used sparingly. These brands will typically capitalize on dark or moody photography styles and will let that be the main focus of the look and feel. This approach works well for athletic companies, luxury cars, and brands with an edge.

Modern

A softer palette that uses a lot of white with pops of saturated colors comes off as modern and sleek, often seen in the technology and software industries. Within those industries, you will also see lots of sleek thin lines and very simple iconography.

Feminine

More feminine brands, such as bridal resources (e.g. wedding dress boutique), will use a lot of white with softer pastels or earth tones. They’ll also use organic lines and shapes with a variety of mature typeface styles such as scripts, modern serifs and thin san serifs with open letter spacing and counterforms.

Even though there are similarities between like brands, there is plenty of room for each one to express themselves in their own way by building on the other elements that play into their overall tone. Here are two recent branded websites that we did here at Zion & Zion. With the Venezia’s website, a fun pizza brand, we wanted to of course take advantage of delicious food photography, but also play up the brand through lots of interesting design elements and typography.

example from venezia

Example of design elements and typography from Venezia’s

For Modesto Dairy Solutions, a B2B client of ours, we wanted to convey their local, farm-like vibe through the use of a neutral palette paired with raw photography of their dairy supply equipment in their imperfect environments.

example from modesto

Modesto uses custom photography to create a neutral palette

Images & Photography

Whether it’s product images in a virtual empty space, a lifestyle shot of a happy group of people, or a photo of someone interacting with a product, one of the biggest impacts on a brand’s tone for the website is the photography. The subject matter helps to drive the nature of the image, but it’s the execution of that subject that determines the tone for the brand.

Lifestyle images that want to feel warm and almost dreamlike will take advantage of sunlight glares and will have a warm temperature to the image. Images that want to come off as futuristic and high tech will have a lot of contrast and will typically have a cooler, or slightly bluish/grey temperature.

You can see in the two examples that both images are about the lifestyle aspect of owning a car, but the tone of the color and the execution of the shoot allows for two dramatically different feelings to be conveyed.

two tone example of mood

Lifestyle images conveying multiple messages

One of the more recent trends in web design, thanks in part to compression abilities and faster internet speeds, is the incorporation of more video as part of the interactive experience. Sometimes this feature is used as an animated background for a section of the site, which helps give the page life and depth. In rarer cases, the video makes up a majority of the website where, through code, the user is actually able to control the animation with their mouse. This lends itself to a very rich interactive experience.

In addition to incorporating video, a lot of websites trying to stay on trend will incorporate animation. There are many ways to do this, one of the most popular being to initiate animation as the user scrolls. This technique can work for a variety of brands. It gives off the impression that a brand is forward-thinking, current with trends, and committed to maximizing their online experience.

Here at Zion & Zion, we are always looking for ways to deepen engagement with our users. Often, based on the brand and the tone we are trying to convey, incorporating video and animation is a way to do so.

One example of this is a page of high importance on the Goodwill of Central Arizona website. We wanted to inform users of their unique and often misunderstood mission, in a visually interesting way since their brand exemplifies hope, enthusiasm and friendliness (with even a little bit of quirkiness). The page is full of color and professional custom photography, paired with animated elements guiding users down the page that bounce in an appropriately playful way for the ).

Interaction Design

One of the most important pieces of an online brand is the interaction design of the website itself. Interaction design is often an area that is pushed aside (due to lack of time) and decided upon last minute. In reality, it’s an element that is just as important as the visual design, photography and messaging. The interactions throughout a website can range from simple and straightforward for more corporate clients, all the way to completely unique and game-like for those brands that are willing to take a chance with entertaining their users.

Interaction design includes everything from completely interactive web pages that allow the user to control what they see all the way down to what happens when you hover over a clickable button.

We had the opportunity, for our client TruckWorks, to tell the story of their unique, and highly sophisticated process for engineering and manufacturing truck-mounted fluid tanks. Rather than talking about it, we opted for a substantially more interactive approach. For this page of the website, we decided to make it slightly game-like, where the user could control their experience through the virtual space. As a user scrolls, they come across each step of the process, allowing them to go in and out of rooms to gather more information. Here is a video of what interacting with the page is like for a user.

TruckWorks is a brand defined by both the ruggedness that is the truck industry, and the sophistication that comes with top of the line engineering capabilities and solutions. This allowed for a visual brand that balanced both aspects (ruggedness and sophistication) beautifully, and was a brand we knew could benefit from this type of functionality to further define the tone of their website in a way that made sense for them.

 

Messaging & Voice

The final element to defining the tone of a brand’s website comes down to the copy: the headlines, navigation elements, callouts, subheads, buttons and body copy. There is so much opportunity for truly customizing the user experience beyond the visuals.

The navigation can be one place to add in some character, however special care should be taken to make sure the navigational labels are clear so that the user understands what information they will be getting when they click. For example, a link that says “Careers” is perfect for more corporate companies, while an informal setting can get away with being a little more conversational by saying something like “Work with us.” Both labels clearly mean the same thing to the user, but the second option shows how a subtle change allows the brand to add in pops of their personality.

For our client Primp and Blow, we took advantage of their header images to bring more brand messaging into the website that gave emphasis to their mature and girl-next-door tone.

animation primp and blow

Primp and Blow using page headlines to convey strong brand messaging

Conclusion

The tone of a brand as portrayed through a website is what makes all websites so different from one another. Without that personalization all website experiences would be exactly the same and therefor, forgettable.

In the last decade, brands have come a long way, understanding that there are so many opportunities within a website to speak to a captive audience, since this is often the first impression a user will have of the company. As the interactive space constantly evolves, we can expect to see brands push themselves further to create a unique experience through their website that will create valuable, loyal customers for life.