Skip to main content

28 Mar 2017

5 things to consider for your website when branding your organisation

By: Nadine Ishani

Over the years, we've designed a LOT of websites. Brand guidelines and assets are amongst the first things we ask for when we're working on a project. We've worked with organisations who have established brands and comprehensive guidelines. We've also worked with people who want to use the web project to contribute to a refresh or updating of an existing brand.

Sometimes we collaborate with the brand agency or designer to develop the online branding together. Sometimes we're handed print brand guidelines to interpret for online. Sometimes we're just handed a logo. Essentially, the more guidance you can give us about what you want or expect, the more easily we're going to be able to deliver against it.

Here's a quick run through of the top 5 things we find it useful to have. The list is in priority order, from must have items, through to nice to haves...

1. Logo

So far so simple, eh?

Formats

Do you have copies of the logo in a variety of formats? Can you unearth the original files that were supplied to you? You're going to need to hand over any logos in .eps format so make sure you track a copy of those files down as a minimum.

Usage

Firstly, have you considered about how your logo will appear across all the channels you use? For example, if the logo is landscape, then won't easily work as a Twitter or Facebook avatar. Given that the avatar is all people are guaranteed to see in their Twitter feeds etc... it's wise to have an alternative for this use. 

Secondly, are there any rules about how the logo should be positioned? For example, are there rules about whether the logo should be left or right aligned? What colours can be used with it?

2. Colours

Speaking of which... what is your colour palette? Give your web agency a list of the colours in your palette - using hexcodes. If the colours have a particular function, then outline what that is and how the colours should be used.

In order for a design to be considered accessible, there needs to be a certain level of contrast between the colour of the text and the background. If you have any ideas of combinations you'd like to use in your marketing collateral then it's worth checking the contrast and accessiblity of those combos before you sign them off with your brand agency. 

If it's too late in the day to do this - do not fear. This is something your trusty web agency can absolutely advise on. We can suggest various solutions but your branding will be more robust and consistent if you know what combinations work across the board. 

Just because you send 9 colours over to your website designer, doesn't mean that we have to use them all. If you're happy for us to refine - or even define - the use of your colours then say so. If you just have one colour, tell your agency if you want to stick with shades of that or expand the colour palette.

For example, The Place's colour palette went from this:

 

to this:

 

3. Typefaces and fonts

The most common font-related problems we've encountered is that the chosen font is either not available as a web font or the license is too expensive. If it is available on license, does it work across all devices and browsers? If not, are you happy for your website designer to find a web first, free font that will work across the board?

Another common problem is that the typeface only comes in caps - with no lowercase option. Block caps completely disguises the shape of a word which makes it much harder for people to read. 

We've actually done this to ourselves but we have a new website coming soon and we've fixed it on there (keep your eyes peeled!).

Are there any heading styles that we should be seeking to mimic? Or are you happy for us to make suggestions for the website?

4. The Marketing Mix

I've already mentioned creating avatars for digital channels but it's always helpful for your website designer to see how you actually use your branding IRL. Often brands will develop once they're put into practice and variations from the brand guidelines may evolve once they're in use. 

Make sure your digital agency has copies of brochures, flyers, business cards etc... basically any marketing collateral that will be used alongside the website. if you've got a brochure in development, get them a copy of the draft designs so they can see any changes. Share anything you've learnt with us - what works and doesn't work.

This will also allow designers to pick up on any other formatting you use for things like dates and times and implement it online.

The more context the designer has for the world that the website is part of, the better they can create something that complements your offline marketing effectively.

5. Photography

If you have a key set of images that you use for a specific function share those and be clear about their intended usage. If there's a stylised treatment or layout that you want to include across your marketing collateral then make sure that the guidelines you had over include relevant details.

More generally though, it's worth sharing some high res, uncropped photographs/imagery with your designers. They can then use them in the designs to show how real content will look. Supplying real text content for key pages as well will make the designs you see much more 'realistic' and make it easier for you to get feedback from 

Brand Guidelines

Ideally a brand document would outline most, if not all, of these things. If you don't have one currently then this exercise can help you to start putting one together. Anything website specific that comes out of the web design can then be added to create a more comprehensive document that you can share and use internally to help manage your brand over time. 

If you're working your way through a branding project at the moment then it's worth thinking about each of these items and asking your designer to provide these details.

If you've finished a branding project and need to roll it out on your website - give us a shout!

Reading Museum logo reveal from square to rectangular version Logo reveal gif by Adam Koszary at MERL

Get in touch about your next project!