8 ways to make your brand work for web

There is much more to a brand than just a logo. Here are some extra considerations to make in the digital space.

Making your brand work hard for web

There are some considerations unique to digital that will help ensure your brand is fit for purpose. Some of these may seem obvious, but it’s surprising how often they are overlooked.

If you are going through a brand review, redesign or refresh then you’ll need to think about how it appears on digital devices.

In this post we talk about 8 things to think about, to make sure your brand is working hard online.

1) Logo

To be effective online, your logo needs to legible and clear at a range of sizes. Ensure that all of the words can be read (including straplines!) at small sizes. Given the portrait orientation of most phones, it’s also important to ensure the proportions work well on these small screens. 

Some brands are exploring the notion of responsive logos. These are logos that adapt and change to smaller screen sizes. These smaller versions are still recognisable, and offer more flexibility to be used in a mobile website header. This won’t work for all brands, but can be a good option if you need to hide some complex visual elements on smaller screens.

Your logo needs to be designed to be legible on mobile devices

2) Colour contrast

Accessibility means making our designs usable by all people – regardless of ability or disability. We need to ensure that text has sufficient contrast to be legible for all users.

Colours used for text – including text on coloured backgrounds – should pass an accessibility test. It’s best not to assume that just because you can read something, that everyone will be able to. So always check with a tool like the WebAIM contrast checker.

The industry standard for accessibility is the Web Content Accessibility Guidelines (WCAG). Here at Pixel Fridge, we always ensure that our colour choices meet AA-level as a minimum, and in certain cases we would even recommend AAA-level contrast.

Always run your colours through a contrast checker

3) Colour conversion

Another consideration when selecting your brand palette is the conversion between RGB and CMYK.

RGB, which is used for on-screen colour, has a wider range of colours compared to CMYK, which is used for print production.

You’ll need your brand palette to work in both formats for consistency, but not all RGB colours can be produced in CMYK. Ensure that the brand colours you have selected convert accurately. If you desire brighter colours for your palette that cannot be produced using CMYK, consider using spot colours for print to match your on-screen RGB colours. This can have a big impact on print costs, but is sometimes necessary to achieve the desired effect.

Understanding the differences between colour formats is helpful when selecting brand colours

4) Typography

Choosing a unique typeface for your brand enables you to convey meaning beyond the words that you write. There are several considerations, other than aesthetics, that you should bear in mind.

It is important to select a typeface with a sufficient number of font weights to enable a clear visual hierarchy. Will users be able to distinguish between headers, subheaders and body text? The selected typeface should be highly legible for use online. For long-form content, it is worth considering a serif typeface as they can be easier to read at smaller sizes. 

It’s also important to select a typeface that has webfonts available, and to understand the costs associated with licensing them. Some brands opt for a different typeface for their on-screen and print outputs. Where possible these should be consistent across all touchpoints.

Typography is key in creating a unique look and feel for your brand, and online this is no different. However, being creative with typography needs to be balanced with usability and legibility. Stylistic choices, such as using all caps for long sentences or paragraphs, can negatively affect legibility to the point where users won’t be able to quickly scan your content and won’t engage as deeply or for as long.

A clear type hierarchy and legible fonts increase the scannability of your text

5) Icons and illustrations

For some brands, icons or illustrations play a leading role in their visual identity, and they can be incredibly effective at supporting text content online. Any illustrations that you use will need to be licensed specifically for online use.

Ensuring that you have a consistent set of functional icons for your website is useful. Using a comprehensive set of SVG icons is ideal, as these can include semantic information such as a title or description that can be accessed by screen reader technology.

Icons can be custom designed, or sourced from an icon library or icon font. Here at Pixel Fridge, we’re big fans of the Noun Project for vector icons, and FontAwesome as a brilliant icon font to get start with.

Icons can draw attention to important content on your website

6) Photography

Does your brand rely on large glossy images? While these can be very alluring, they do have a big impact on load times.

Ever tried to load an image-heavy site on a ropey 3G connection? No fun. Although photography can be really impactful, it isn’t the only option. It can be helpful to consider how alternative visuals such as graphic elements, icons and illustrations contribute to your brand identity. These can be loaded as SVGs which are much less bandwidth-intensive.

Rather than using full width images, smaller imagery and illustrations can be just as effective

7) Movement

One of the joys of design for online is that it doesn’t need to be static. Transitions and animations (when used with a ‘less is more’ mentality) can enhance engagement. They can also be used tactically in order to ‘nudge’ users towards high-priority messages or important calls to action.

How your brand moves needs to feel in line with the overall tone you are trying to convey, so making this a consideration from the outset can be helpful. Is your brand slick, or bouncy? Is it aspirational or down-to-earth? Movement really can communicate a personality, so it’s important to make sure that personality fits with the overall brand. (Image credit)

Movement can enhance your brand personality online

8) Copywriting

It is important than ever for your messaging to be clear and your copy to be concise when writing for web.

Research shows that users are more likely to scan content online, and only read a small amount of your website copy. Because of this, your headlines need to work hard to convey your intent and your tone of voice needs to be spot on. It’s likely that your brand with have more general tone of voice guidelines, but it’s important to make sure web best practices are considered in these too.

We’ve written lots more about writing copy for the web in another post here on the Pixel Fridge blog.

Clear messaging is key to online success

Share this post

Related Posts