the importance of brand identity for web design

Sep 10, 2019

When developing a new website, you may consider developing a brand identity, but then say ‘great nice to have….but time and money just won’t allow me this option.’

We get it. We work with small to medium sized businesses every day and often, the need for a website comes just at that time when there is an urgency to grow the business or pivot in a different direction.

But here’s the thing, a website that isn’t built with a brand strategy or identity is like letting your toddler go into your closet and pick your work outfit for the day. You could get lucky and get something that works all thrown together, but you run a high risk of having an outfit that doesn’t work together and most importantly doesn’t represent you as a person. This is similar to accelerating web design before considering your brand identity.

Shelving brand identity can ultimately slow down the process and make it even more expensive. If you consider the brand after web design, there will be a lot of additional updates. The poor man pays twice as they say.

When you develop a brief for your new website design, it’s essential to have a clear brand identity in place first.  A stunning website takes deliberate thought and actions, starting with having clarity over your brand identity.

What is a brand identity?

A brand identity is more than just a logo. It is made up of the name, the mark, the tag line, the colour palette, fonts, typesetting, copy tone of voice and photography style. All of these elements should come together to proudly express the personality of your business, what you believe in, your values, your level of quality and the promises you make.

A brand identity done well imbues trust, credibility and connection.

How do you create a brand identity?

Before you develop a brand identity you should ideally develop a brand strategy, which is a process of discovery, usually with a brand strategist, to clearly map out and define your ‘why’ story, your competitors and competitive position, industry and world trends and a well-rounded empirical view of the key customers that you know you attract. (not who you want to attract).

The workshop should also explore products and services, prices points, business goals, a SWOT analysis, brand values and beliefs, benefits (functional and emotional), personality and archetypes.

All of this thinking can then be crafted to create a brand essence – a three to five word sentence that can be used to summarise what your brand stands for. This essence can be used as a tagline if you wish. With the help of your marketing expert or copywriter, a mission/vision statement is crafted along with an elevator pitch and a value proposition statement.

Sometimes the brand strategist can also help with a messaging matrix that can include key ‘belief statements’ to be used across your website.

These outputs all form the basis of the end strategy, and should ideally then be handed over to a graphic designer to develop a brand identity, to include a logo, colour palette, font recommendations and image style.

Once the identity is developed and agreed upon, a style-guide should form a part of the identity project and this should be handed over along with font names, colours and logo elements to the website designer before they commence the build.

Above is an example of a style guide, developed for the Calgary Chamber of Commerce.

See the full extensive version here.

What forms a best practice website brief?

Below is the pathway of an ideal web design process:

  1. Understand your brand: Brand strategy > Brand identity design > style guide and brand elements handover.
  2. Content development: Source or shoot photography and write the content.
  3. Brief the website designer: website design > wireframe development and approval > website development> testing and approvals > Go live.

The biggest benefit of having a Brand identity developed before you start your website is time. You will already have clarity about what you want, and it will help  your UX and web designer enormously in understanding your vision. What’s more it will reduce the number of changes, re-designs and misunderstanding when it comes to them meeting the brief.

If your business is predominantly driven by your website, it is imperative that your brand identity is designed with the website included as one of the main mediums that it will be applied to.

Your web or graphic designer should:

  1. Choose readable and web friendly fonts.

Fonts are so evocative on a website. They immediately communicate your personality, tone, pace, style.

Readability is important too.

It’s important to try and select no more than 2 x font types across the website.

Try and choose different weights and sizes instead of multiple font types.

Below is a list of the most web friendly fonts:

  • Montserrat
  • Proxima Nova
  • Roboto
  • Lato
  • Open Sans
  • SF Pro
  • Helvetica
  • Poppins.

2. Consider typesetting

The spaces between lines of text, the weight and size of headlines and sub-headlines and the amount of negative space all contribute to an overall positive or negative user experience.

The ideal font size of 16px or higher. This ensures good readability over screen sizes.

People don’t read every word on a website, they skim, filtering the critical information only. Less is more when it comes to copy on a website. Say it as succinctly as possible,

Ideally allow 1.5 space between lines and include lots of white space.

The aim is the make the next step for the user really clear and easy.

Ask that your graphic designer developing your brand identity specify the following rules as a part of your brand identity:

Headline, sub-headline and paragraph font, size and weighting.

It will ensure that you are clear on this and can apply it consistently across the entire website.

3. Define a colour palette

When designing a brand identity you might have a mono logo (black and white) but a couple of accent colours. These colours can be useful on a website to inform button colours, navigation bar menu colours, photographic colour palette and more.

When your designer develops the brand identity ask them to provide direct examples of how the colours can be applied on your website via buttons or elsewhere.

If you want to have a play around with colour combinations or you need a hex code, try – it’s so much fun!

4. Photography

    1. So often a good website is let down by bad or amateur photography. Firstly it pays to understand the style of photography for your brand. Is it colourful and fun? Is it muted and professional? Should it always feature a person to humanise your brand? Do you want your photos to be aspirational? Is it minimalist or pop?

      Start a Pinterest board of websites that you like and try and find a consistent photographic theme that you can emanate.

      Here is a great article by Shopify on some of the details to consider when developing photography for your brand and website.

    Wrapping it up

    There are so many elements to take into consideration when designing your website, such as having an understanding of user experience, information hierarchy, how much text to place on a page and where to put call to actions. With the help of a web design professional such as like Arthur St Digital, you can achieve this.

    We create user centric, customised WordPress websites, and if you don’t yet have a brand identity, we can help you create one with our in-house brand strategist and graphic designer.

    Give us a call today if you would like to chat further about your website.

    Digital Marketing Specialist – Social Impact Role

    Digital Marketing Specialist – Social Impact Role

    Join a purpose driven Geelong based agency: Arthur St Digital is a successful digital marketing agency that puts clients first. We service a growing list of brands and businesses, attracting interesting and diverse work across a range of digital applications. We work...

    will you chat on WeChat?

    will you chat on WeChat?

    The parent company of WeChat recently held the Tencent Global Partners Conference at Chengdu.
    Wait… What is WeChat?