Thinking about your Branding? – Here are implications of Web Design

Most companies would prefer their website image to co-ordinate with their other branding – their logo, colour scheme, fonts, headed paper, brochures etc.

Now as a graphic designer you have millions of options with print – almost unlimited variations in fonts, colours and layout options. Unfortunately only a tiny fraction of these options are available to web designers – so the web severely restricts your creativity.

Therefore the ideal senario for branding is to look at the (often significant) restrictions imposed by the web and work from there.

Some web site design restrictions and search engine optimisation considerations when looking at your branding:

Use of Text and Images:

It is fair to say that logos etc often do not use common fonts, therefore they have to be images on web pages. This is often because graphic designers do their thing and then web designers come along after the brand is built and have to make the best of it. One consequence of this can be a lack of continuity of design on the web page as the main brand font cannot be matched except by using more images.

Fonts:

Websites were restricted to only using a few fonts readily available on all computers however this has changed as some companies like Google have now made available a library of fonts that can be used on websites at no cost.

This gives web designers far more flexibility but these fonts are not the ones commonly available on computers so the issue of matching fonts still exists and causes difficulty.

Some variation of letter spacing, word spacing and line spacing is possible.

Words should be real text not hidden in graphics:

As a general principle of web design – words should always be in html text and not graphics when ever possible. There are variety of reasons for this including

• disability accessibility (texts can be read to people with sight issues),
• search engine optimisation (words in graphics are invisible) and
• web page performance (graphics are much slower than text). 

Therefore ideally any words in a logo, slogan or other important branding feature should use the common fonts available on the web so they can be html text rather than (hidden in) an image.

Alt (Alternative text) tags:

A few descriptive words are normally attached to any images (called alt tags) so you could use images to maintain your brand presentation and put all the words in the alt tag.

The search engines will be able to read the alt tag. BUT words in alt tags have the lowest value of importance of all words on a web page to search engines.

So if search engine performance is important it is clearly better to use text and not images for words which matter to give us a better opportunity of maximising search engine performance.

Hidden text:

I have heard the use of images justified by statements like “you can hide all the words you want on web pages for the search engines”. RUBBISH, I am afraid dating back to the very early days of the web when search engines were really dumb.

Colours

Web safe palette:

The web uses what is referred to as the web safe colour palette:

• This is a limited main palette of 256 colours (although variation outside this is usually possible with care) as opposed to the millions available for print.
• Most colours used by printers are not available to web designers.
• Pantone: There are mostly no equivalents to pantone colours on the web so don’t expect to quote pantone colours to web designers, they need RGB or HEX values.

Also do not expect that the colours you see on your screen to match what you see printed on paper or other screens!

Contrast:

Accessibility requirements include very high contrast limits between foreground and background colours.

This means you cannot use pale colours on pale backgrounds or dark colours on dark backgrounds. Do check with a suitable tool as the acceptable limits are actually much more restrictive than you might imagine. This catches many designers out. See Tanaguru contrast finder – tool to evaluate your colour choices and provide alternative suggestions.

Colour matching Images to text and backgrounds:

This is where the web safe palette has the most impact. Colours on images and colours on text and backgrounds must use the web safe palette to match.

Web Page Layout

Options for layout of web pages are basic compared to print.

Print is a static medium – layout is fixed and only has to suit the content of the printed page at that one point in time.

Websites are a moving, evolving medium which has to cope with:

• content now, next week, next month, next year…
• variable screen sizes, from very small (smart phones and tablets) to very large
• variable browsers
• variable web enabled technologies

Missed Opportunities

It is a great shame when web site opportunities are missed because brands are set in isolation without understanding the impact of web design.

Web designers often seem to find themselves having to deliver second best to fit in with graphics and branding because decisions are made and expectations set without considering the limitations of the web.

It is just so unnecessary.