Quick… what do you think of when you see:
If Disney’s marketers and advertisers have done their jobs well, you probably thought of “magical”, “exciting”, “happy”, or “family friendly” feelings. Disney gives off a powerful brand image and identity because of its impressive (and comprehensive!) branding. It is through consistent branding that when people think “Disney”, they think of joy, fun, and childlike wonder (and not of other things, like, maybe long lines or expensive tickets).
Unfortunately, not all companies excel at branding as Disney does, and many struggle with portraying identity because of a lack of cohesive and uniform online branding. Non-uniform online branding is bad, as it weakens brand message, brand image and trustworthiness.
This article covers three elements that content teams and marketers can leverage to strengthen and unify online brand image: TLC, or Type, Color, Layout.
“Type is the clothing our words wear” by Beatrice Warde is the favorite quote of Isovera’s in-house Variable Fonts and Responsive Typography expert Jason Pamental. What this quote boils down to, is that type gives words a voice, tone, and emotion that can dramatically impact how those words are read. In this case of online branding, type is needed to set website tone and help users pick up brand image- even without reading text (don’t forget- content is there to be read, and typeface should make that easier, not distracting!). Type is incredibly important because it sets website tone and affects brand perception and image.
Just think: web designers don’t design websites for children using fancy, cursive scripts like Vivaldi. Likewise, they don’t create websites for college students using casual, loopy typeface like Comic Sans (if you just cringed, don’t worry- we did too). Why? Because type would not match brand image. Even if you’ve never heard of “Vivaldi” or “Comic Sans”, hopefully you still see the disconnect between what brand image wants to tell, and what typeface says (in the child website example, brand image wants to be “kid accessible and fun”, but font says “classy, elegant, and upscale”)!
→ Quick Tip: Struggling with type? Consider matching your logo type to text or header type for a more uniform theme and brand image. Alternatively, consider keeping typeface and variations simple and uniform throughout a page. If you’re unsure about a typeface, ask “where would I expect to see type like this in real life”- if the place doesn’t match intended website audiences, maybe that typeface isn’t the best choice for portraying brand image.
What is the difference between the content layout and brand image of the lorem-pages on the images below?
While the first layout is something you might expect to see on an e-commerce or art site, the second image is something you might expect to see on a service based company, or an educational website. This example shows that layout reinforces and shares the purpose of a brand; layout can feature and enhance the call to actions of a website (such as putting items into a shopping cart versus reading and learning about an item).
Brand image consistency can also be created with header, button, and caption layout, not just content layout. Once a layout style that represents brand identity is created, it should be used throughout the website consistently to fully show brand image. This allows for uniformity within brand image, as well as between brand image and personality.
→ Quick Tip: Struggling with layout? Consider focusing on creating a webpage that delivers the content that the user is looking for, not just what is most “aesthetically pleasing”. For instance, a website for scientific academia will most likely feature text, whereas a website for upcoming art gallery exhibits may be primarily comprised of images.
Have you ever noticed that Whole Food’s logo is green, or that Smartwater labels are blue? These color choices are no coincidence- they have been workshopped and focus group tested to ensure that they represent a specific brand image. Website colors are no different when it comes to consistent branding; they are a staple part of a website’s identity.
Because color is so paramount to identity, a website’s color palette is incredibly important to leverage when working with a website. If a quick glance at a green and tan notebook gets you to think “eco-friendly”, shouldn’t looking at a website’s colors do the same? Ultimately, color is important because it paints brand image- color shows what a website represents.
→ Quick Tip: Struggling with color palette? Consider basing your website’s theme colors off of your logo. Because a logo is such a prominent part of a webpage, (in fact, a Missouri University study found it to be the first seen part of a site) matching logo and website colors is an easy win (be mindful though- if your logo has several colors, it’s best to choose only 1 - 2 colors so you don’t inundate site users with distracting visuals).
This post has covered the TLC of leveraging content for a uniform brand image
Type: sets the tone of your website to match brand image
Layout: communicates brand image through your website
Color: shows, illuminates, and personifies your brand image
Working within the digital solutions industry, our team at Isovera finds that even when teams nail the TLC of branding, they sometimes still struggle with inconsistent content (usually small things, like inconsistent page logo colors, or inconsistent header styles). Often this has nothing to do with website content, but instead with website platforms; if a weak content management system platform is used, it creates content consistency obstacles.
At Isovera, we use Drupal to keep client brand images customized and consistent, and implements tools and practices like Pattern Lab and atomic design. These tools and practices help us create seamless uniformity throughout websites, and online branding consistency.