10 Web Design Considerations When Redefining (or Just Refining) Your Brand

In this article I’ll be exploring how to consider this important part of your business when it comes to branding, rebranding, or even simply refining your brand, to ensure the two compliment each other, and ultimately work together to push your business and its objectives.

At Alloneword a large part of what we do is work with startups on their branding and website design needs, which being under one roof has obvious benefits in terms of understanding the whole process of both areas of design. We help to guide clients through the process. This isn’t always possible though, as you may currently have a solid web designer you use who doesn’t offer branding, or even your preferred branding agency doesn’t facilitate web design.

Reviewing our recent projects and the conversations that came up again and again, I’ve put together a list of 10 considerations to act as advice and further research when it comes to approaching a branding project working with specialists who maybe aren’t web experts…

1. Colours, accessibility and visual hierarchy

The number one faux pas when choosing brand colours is lack of consideration to their application. Branding is a tricky one, as we’re really abstracting everything up a level, beyond websites, flyers, signage etc and coming up with a set of rules and principles that can be applied to a number of different mediums with a consistent aesthetic. With that can sometimes come being so removed from the possible applications that colours can be chosen to be complementary to each other and align to the brand values and tone of voice, but when trying to use them in a real life context, the design can lack the usability it needs.

The main thing to consider with colour is contrast and legibility. If you’re not overly familiar with the web then you may not have come across the term of ‘accessibility’ when designing for the web, which simply put is the practice of making websites usable for people with disabilities. A large part of that comes down to people with visual impairment being able to have access to text with a good enough contrast between the text colour and background colour, plus be able to navigate the site in general. I once joined an agency who had just completed a rebrand and web design for a cancer research charity, and I was asked to review the work. Being exposed to web accessibility for a long time by this point, my first thought was that (sadly) cancer, and even some of the treatment that’s used to combat it, causes visual impairment, so I wanted to investigate that first. What I found was that the primary brand colour (a pale blue) and the white text used around the site on top of it didn’t have sufficient colour contrast. This was difficult as the branding had just been completed and was being rolled out elsewhere, so we had to put a setting in the site so users could activate a high contrast mode, which worked well, but was messy and led to a lot of stress for the agency. To check your colours, you can use a contrast checker like https://webaim.org/resources/contrastchecker/ and be sure that you’re doing this early in the branding process, well before any web design takes place. There’s no point falling in love with colours if they aren’t usable.

The other main consideration with colour is that you and your web designers have enough in their arsenal to set a clear visual hierarchy with the web design. All web pages will have an objective and things we want a user to focus on, so having a palette that’s too monotone will mean this isn’t achievable, and too many equally stand out colours will make pages too busy and hard for a user to get their bearings.

2. Imagery

Any good branding process will first explore what the brand values (who we are) and tone of voice (how we say it) are, which then cascades down to everything else, from font choice and sizing, to the use of white space. At this stage start to think about what imagery you’ll have access to in terms of lifestyle photography and stock photos, so they align to these principles. This will help to keep your brand consistent, but also help your web designers know what they have to play with when it comes to photography, so that can influence their design. 

With the imagery, try and choose or shoot images that have a lot of outer space to crop left/right/top/bottom (basically not to have important parts of the image at the side) as when put into a web page, the web developer might need to have the image cropping slightly if its being used on smaller screens to retain height. Quite a common design pattern currently (which of course doesn’t mean you have to follow it) is large banner images with text overlaid, so the cropping might need to happen there in order to retain height. With text over the images also consider having a few images that are more abstract than showing specifics, so they are more suitable for this sort of use. We’re working with a client currently who sell childrens winter jackets, and in addition to their lifestyle imagery of children in the jackets, have really nice shots of clouds in the sky, rain on a window etc, which work perfectly for design such as this.

3. Logo sizing, format and complexity

While a brand is more than a logo, you’ll always find a lot of focus and attention goes into creating the logomark, as it’s one of the most bespoke elements to your brand, and will feature on pretty much everything you produce, including the website. One mistake I’ve realised recently that we’re doing at our studio, is when sending some new branding concepts, we’re putting the logo quite large on its own for review. The feedback if often apt, but I do find we’re repeating the same sentiment that people will never likely view it in this way, and so they should zoom out before confirming feedback. Were now starting to put in place a better way of presenting it, which still means the option of the logo isn’t influenced by its surroundings too much, but also the client is seeing it at a more natural size.

Lots of computers and devices now have a very sharp (often referred to as retina) display, so it means we can afford to have more complexity than we used to, but we should always look at our logo and discuss if anything is surplus to requirements. The most successful logos in history have been the simplest (Nike, Apple, FedEx, BBC) so this is good brand practice anyway, but we’ll also enjoy the benefit of the fact that it will easily render and be identifiable on a website, which is usually quite small (as it should be) in the header of a website. Again, you may choose to break this mould, but it’s still a worthwhile consideration.

Make sure that the end result of your logo is something that is in vector format, which is a file format which makes shapes out of lines rather than pixels, so you can scale up indefinitely and will stay sharp regardless of how good screens get in the future. These file formats are usually .SVG (best for web), or .EPS and .PDF (which can then be given to a web designer to convert into .SVG) and if you’re unsure and tackling this yourself, see if you can get some assistance on this stage.

4. Audience

Design without an audience is a slightly pointless task, and whether your a startup or a business with 10+ years experience, you’ll have some thoughts around who you’re wanting to connect with. Branding discussions should always start with some time considering this, as what you respond well to maybe isn’t the same as what Brenda who is 50 and works in a garden centre (as an example) will respond to. These conversations shouldn’t stop as soon as the branding is looking like it’s starting to conclude, and there are useful kicking off point for opening up discussions with your web designers about different user types to the website and what they might want to achieve, so we can start to think about how we best serve their needs.

During the audience conversations in the branding phase, make sure you keep documentation about what audience the brand is appealing to so you’ve got something to rely on more than memory later down the line. If the branding and web design is happening back to back as a larger scope of work, it might also be worth seeing if your web designers can be involved in the meetings around brand audience so they can hear about it first hand.

5. Keywords and micro-copy

Content is a large part of what makes a brand, and this can be anything from a tagline to the full mission statement of the company. As with other brand elements, the brand values and tone of voice should feed into this content writing. When writing (or reviewing content from a copy writer) be sure to check that within the text there are clear and direct reference to what you’re doing/offering and that it isn’t too abstract. We normally suggest that we have a tagline and a positioning statement to be used separately or together so that we’re getting the important messaging and text on the page. Tagline is more akin to the famous “Just do it”, but you’ll probably want a nice solid and descriptive headline such as “high quality sports and activewear clothing”. This way web developers can make the tagline visually large and the positioning statement relatively small, but within the code the more descriptive text the one that gets focus when Google is indexing the page.

For longer text, review it for keywords of what you’d prefer the website to appear in search results. Doing this by no means means you’ll end up on page one of a search, and if you’re looking for that I’d highly recommend speaking to a specialist search engine optimisation agency, but it will give you a fighting chance.

In addition to the more traditional notion of content on the page, be sure to compare things such as button text, how you refer to elements such as the basket/bag/cart, and the labels for more interactive elements, to see if they align with your brand tone of voice. Having the word ‘Bag’ for the basket page on a jewellery website for example can seem a lot more premium and high end than ‘Cart’.

6. Fonts

Fonts are great, and can convey so much more than the words they are spelling. The practice of font design and creation is also highly active and there are literally tens of thousands to choose from. It all depends on your brand, so there isn’t any one right or wrong font, but ALWAYS make sure you check that the font(s) chosen for the brand are available in web format and you’ll have the license for them. You can either do this either using a free font which allows for web conversion (which a web design will be able to advise on), purchasing a font and then making sure you select options for both desktop and web usage, or by using a web font hosting service such as Typekit or Fonts.com, which allow you to pay a small monthly fee for a font which would otherwise be unaffordable to buy outright.

Ultimately fonts being used online (the ones you read within a website) and offline (the ones you or your designers have installed on a computer to use) are very different in terms of how they need to work. For an offline font on your computer, only you need to have it to see it. With an online font on a website, we can’t ask everyone to install our font prior to using the site, so we need to embed the font file itself somewhere in order to then display it. Because of this reason, licenses have started to separate out in order for you to have one and not the other.

7. Brand assets and availability

Once the branding is complete, you’ll ideally then get a brand guidelines or reference card document which details fonts to be used, colours and their exact web/print reference code, and general principles for applying the brand. Look to have this, along with all the file formats of the logo, font files, image library all in one central online location, as this will save a great deal of time in terms of back and forth with your web designers needing certain assets as they go through the process.

Saving them locally to your computer (and external hard drive / USB stick too if you want to be extra careful) is advisable, but look to free services such as Google Drive or Dropbox to place these files with a shareable link you can then easily distribute as needed.

8. Adaptability

Brand application is hard to predict at the time of creating the brand, as you know you need a website, but what form that will take is yet to be specified, and there might be other material such as apps or interactive displays that just aren’t on the horizon yet as you’re still yet to see where the business takes you. The final brand should be a firm set of principles, but still fluid enough that it doesn’t restrict the design of anything going forward. In design there is a penchant for grids and grid systems, which can be lovely, but not always possible to stick to in web design depending on the functionality and goals of that particular page. Review your brand guidelines with a web designer to see if anything in them could be a restriction, such as preset grids, strict sizing rules for fonts (as this will need to change depending on the screen size), or even how text and icons appear over images.

9. Process visibility

I touched upon this in section four in terms of having the web designers present at meetings about audience, so they can hear first hand and contribute, which is useful all round but may not always be doable with locations or schedules. If the two strands of work are running consecutively then be sure to have key milestones shared with each party, so that as the branding is taking shape the web designers can help comment on some of the points as we’ve discussed, but also the brand designers can then see the brand be applied and suggest changes if need be. This feedback triangle can sometimes get tricky though, which brings us on nicely to the concluding point…

10. Chicken vs egg

Overall branding will always come before the web design, but as we’ve explored, once you get going the two will need to work together and support each other. The question really is which of these comes first in terms of importance, and which discipline gets the final say if there is a conflict of a decision to be made. This isn’t to say there will be conflict in the traditional sense of the word, but if, for example, the brand dictates one thing and the web design requires another.

Previous to starting our studio I was the Creative Director of a larger design agency, which had both branding and web design teams, so I was well versed in handling these conversations and discussion, but it’s still a hard one to call. My general rule of thumb was that if the decision would result in a knock on detrimental effect to the website (such as large images everywhere causing a slow load time), hindered usability or simply wasn’t possible within code, then the website had the final say, but if the decision more was about stylistic treatment then it was a bit more open ended, but that’s not to say the brand team had the final say, and it just meant then it was more about all parties making their case.

Overall, these difference of opinions aren’t guaranteed to appear on every project, and working with the teams that have a positive and collaborative mindset means that the discussions can be really encouraging and a chance to all learn from each other. We’re all aiming for that same goal for the business, so working together, being visible and understanding of each others role in the project will help to give a fluid and exciting end result for your venture.