Design That Understands The Brand

A website is much more than a collection of images with some fancy animations, text and some 'calls to action' thrown in for good measure. A website must reach out to its target audience to maximize success for the site owner. This is something that a web designer must keep in mind throughout the entire development process. I am still learning about this myself however, in the following article I aim to focus on some of the things I have encountered and how I try to implement these in order to stay true to the brand of the client.

Somewhere along the way, when a designer is deep in the middle of the design process it is often the case that they lose focus of the brand that they are designing for. This loss of focus can stem from 'inspiration' from another source or it could be that the designer has simply gotten lost in the cosmetics of trying to create a flashy website. It can be hard to find the way back after this. Nowadays, there is so much competition out there that it is sometimes not even a question of getting ahead but instead, merley keeping in touch. For this reason, among others, it is crucial for a company to stay true to their brand at all times. One of the ways of doing this is having a website which delivers on making the brand prominent throughout a users visit to the site. Keeping this at the forefront of a project will help create better designs and this is something which I have seen from reading numerous resources written by experienced web designers. I have only covered information that I have enountered to date therefore this is nowehere near a definitve guide and I would encourage designers to post any useful thoughts in the comments section.

Investigation

As I mentioned I have seen some great resources out there on the web whilst searching for some tips that I could utilise to help focus on creating websites that truly reflect their owner's brand. The first and some would argue most important tip I encountered was the first impression. When a user visits your website for the very first time you only get one chance to impress them. Having a website that is bundled together with no responsiveness is obviously not going to suggest to the user that your brand is slick and trustworthy. The first step is to design a truly interactive website that will engage the user and tell the story of your brand as they navigate each web page on your site. One of the first things that will help with this is to ensure that you have a great colour scheme that will enhance the users experience without overwhelming them. Something I have noticed already in my web development career is that a brand with certain colours does not always transfer well to the web. There are some colours which are just not meant for the web. Bright, garish pink is an example of one such colour. There is no way for instance, that you can get away with an entire bright pink background. It will simply overwhelm the user not to mention the fact that it will hurt their eyes.

So, what can you do in this instance? You have landed a big client who has a brand with bright eccentric colours which look good on print and merchandise etc. but this will not simply translate well to a website. The trick is to tone these colors down without losing the identity of the brand. Let's say for example the company brand which you are designing for is Google (I know, what a sweet job that would be!). We all know that their logo is multicoloured as it contains four different colours at present. You know that you must include their logo on their new website which means that straightaway you have introduced these colours to each web page. Now you must try and use subtle splashes of these colurs throughout the website but maintain some colours which are not directly contained within the brand logo but that are to feature heavily throughout. In the example we have described, this could mean that you will choose a white background with grey or black text. Then you could have buttons that use a colour from the Google logo and some of the links could have a coloured hover effect that reflects each colour on the logo. This is subtle. There are no large 'in your face' areas with these garish colours. These little subtleties maintain the company's identity whilst simultaneously delivering a clean and modern website that contains all of the latest trends. Take a look at the example below which is a screenshot from the Google drive landing page. You can see that there is a tiny strip representing the brand and the rest of the colours feature trendy and clean design principles.

Simplistic Logos

Just like an idea, the most successful logos are almost always the simplest ones. Logo design trends have changed dramatically over the years and this is something which I have learned whilst looking for inspiration for a logo concept. In just the same way that the nicest websites have become a clutter free zone with oceans of white space, logos have toned down aswell. Gone are the extravigant patterns of logos such as eBay's wonky almost Microsoft Word like ensemble of letters (see below).

It is crazy to think that someone thought eBay's first logo design was trendy. That was then though and this is now and less is more in logo design at the moment. Another perfect example of this is the evolution of Nike's iconic tick logo. It started out having text that could barely be seen as it was printed over the top of the tick. Then in 1978 perhaps they realised nobody could actually read the text and moved it above the icon. For the 80's version they added a blocky background because well, basically everything was blocky in the 80's! Fast forward to the present day and we are presented with the simplest version possible - the tick with no text (see below).

Strive for Consistency

While the logo and tag line are of vital importance in maintaining and reinforcing your brand, it is also important to nail the smaller details. When we mention the word brand, often the first thoughts we have involve a logo and a nifty slogan. However to communicate the brand it is important to be consistent in other areas such as font types. Some designers insist on un-plugging from the design Matrix and approaching their work typography-first. There is even a book to this end called 'Web Design Is 95% Typography' by Oliver Reichenstein and this has resulted in a lot of designers rethinking their strategy and shifting their focus to typography that translates well to all device screen sizes. Almost everything we search on the web consists of articles and stories which are ranked by google therefore it is important that they are actually readable.  Consistent typefaces must be selected or designed with the following all carefully chosen: correct line height, adequate spacing before and after, consistent font colours and a subtle variation between headline and body fonts. Furthermore, non-web fonts should be tested in each browser because these do not always look as crisp as well known 'web-safe' font types. Watch out for free fonts designed to replicate a paid version. I have experienced blurry character edges which are not noticeable to everyone. If like me, you are OTT on the finer details then this is something you will notice. This is not to say that all free fonts that closely mirror a paid for typeface are bad. You can get lucky and there are some great designers out there creating high spec, web specific fonts to help the web design community. Having no more than two fonts that do a great job in solidifying the companies brand is a must in terms of brand identification.

The one common tone that resonates throughout the paragraphs described above is that simplicity is the key to great design which reinforces the brand being designed for. There are much more factors not described which I have still to encounter however executing the points mentioned will go a long way to designing websites that garner positive attention and allow the brand being designed for to go from strength to strength.