10 ways web design and branding need to work together

10 ways web design and branding need to work together

Jon Dodd

Jon Dodd
5th December 2019

Odds are, if you’re running (or helping to run) a business, you’ll either have a website or be in need of one. The web, and designing for it, can be a minefield if approached without proper consideration and time.

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 perhaps 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 making your branding work for the web, especially if you’re working with brand 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 you’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 being able to navigate the site in general.

To check your colours, you can use contrast checkers like this one. Make sure 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 you 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 you are) and tone of voice (how you 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.

With imagery, try and choose or shoot images that have a lot of outer space to crop left, right, top, and 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 crop the image.

Quite a common design pattern currently is large banner images with text overlaid, so the cropping might need to happen there in order to retain height. With text over images, also consider having a few images that are more abstract than showing specifics, so they are more suitable for this sort of use.

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 that we’re doing at our studio is putting the logo quite large on its own for review, when sending new branding concepts. I find we’re repeating the same sentiment that people will never likely view it in this way, and so clients should zoom out before confirming their feedback. We’re now starting to put in place a better way of presenting logo designs, which still means the option of the logo isn’t influenced by its surroundings too much, but also so 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 you should always look at your 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 you’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. 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. 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). If you’re unsure and tackling this yourself, see if you can get some assistance at this stage.

4. Audience

Design without an audience is a slightly pointless task, and whether you’re a startup or a business with 10+ years experience, you’ll have some thoughts around who you’re wanting to connect with.

During the audience conversations in the branding phase, make sure you keep documentation about what audience your 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 initial meetings so they can hear about it and get involved 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 copywriter) be sure to check that there are clear and direct references to what you do/offer and that it isn’t too abstract. A 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 the more descriptive text is the one that gets the focus when Google is indexing the page. For longer text, review it for keywords. Doing this by no means guarantees you’ll end up on page one of a search, but it will help your SEO efforts.

In addition to the more traditional notion of content on the page, be sure to compare things such as button copy, how you refer to elements such as the basket/bag/cart, and the labels for more interactive elements, to check 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 your brand are available in web format and you can get the license for them. You can either do this by using a free font which allows for web conversion (which a web designer 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 fonts.

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, you can’t ask everyone to install your font prior to using the site, so you’ll need to embed the font file itself somewhere in order to display it.

7. Brand assets and availability

Once the branding is complete, you’ll ideally then produce brand guidelines that 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, and image library all in one central online location, as this will save a great deal of time for you and your web designers in the future.

Saving them locally to your computer (and external hard drive / USB stick too) 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 creation, 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.  

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 a particular page.

Review your brand guidelines with a web designer to see if anything in them could be a restriction, such as 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 web designers present at meetings about audience, so they can hear first-hand and contribute.

If branding and web design are running consecutively then be sure to have key milestones shared with each party, so that as the branding is taking shape web designers can help comment on some of the points, but similarly the brand designers can then see the brand be applied and suggest changes if needs 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 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, 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.

This difference of opinions might not even happen on your 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. You’re all aiming for that same goal for the business, so working together, being visible and understanding the different roles in the project will help to give a fluid and exciting end result for your venture.