The Zen of Website Design

Have you seen Gordon Ramsay’s Kitchen Nightmares? Or Alex Polizzi’s The Hotel Inspector?

What do you think these television programmes have in common with a website?

Well, in almost every meeting, the TV consulting expert will ask the business owner or manager to consider subtracting unnecessary, extraneous or poorly performing elements from the business to bring about a renewed purpose and focus.

Here’s a few examples:

• An overloaded menu is redesigned and does better with fewer options
• A hotel reception area is decluttered to improve the first impression
• A gaudy dining space is recomposed to create a greater experience

“Killing your darlings” for the greater good is a sentiment shared in many disciplines, from architecture to engineering, from music to photography, from writing to gardening, from hotels and kitchens and of course, in marketing and advertising.

Why Less is More in Website Design

We live in an abundant economy. The internet has given everyone a platform, everyone a voice.

Hundreds and thousands of websites are springing up daily and it’s a problem for those sites that do not appeal to the visitor.

You may be operating in a single industry, but your competition includes the rest of the internet itself.

The distractions internet users face are unlimited, whether it be chatting with friends on social sites or laughing at pictures of cats. Website visitors are fickle because there are so other places to go and other things to do online.

• Is your website overloaded?
• Is it busy and frustrating?
• Are you giving visitors a reason to “bounce”?

The Worst Website Ever

The website screenshot below is a caricature on bad design. You can visit this website at http://www.theworldsworstwebsiteever.com.

Take a look at the gimmicks and pointless design elements:

Benefits of Minimal Web Design

A zen approach to design is in vouge, perhaps to try to aesthetically negate the very real problem of information overload.

Make no mistake though, a simple approach is no fad.

Think of it this way: if we’re to be bombarded with information and have marketers compete for our attention, the way these propositions are presented should be palatable enough to get past our internal mental defences that tell us “No”.

There is nothing worse than landing on a website that is so laden with information that it will not even load quickly.

“Don’t use a lot where a little will do.”

-Proverb

By adding too many design elements they will compete with each other and possibly alienate the website visitor.

Here’s a few key points to remember:

• Simple navigation gives a better user experience
• Faster loading websites are the antidote to a decreasing online attention span
• Responsive mobile design is easier to manage when there’s less HTML containers and fewer iterations of the CSS

Space Has Value

White space is like silence – just because it exists, it doesn’t need to be filled.

Space works well in combination with design features in the foreground: the eye is drawn to what you want visitors to pay attention to.

White space in web design (aka negative space) makes the difference between a layout that’s ordered and easy to comprehend versus a headache.

Buttons, links, text, and other media all need room to breath. The spacing between them improves overall composition and forms the overall “picture” and general experience.

• Compositional white space – Space for margins, padding, and general layout
• Visual white space – space for graphics, icons, buttons
• Textual white space – Space between headers/paragraphs and lines of text

Consistent Action Colours

Anything on your site that can be “clicked” should ideally use the SAME colour throughout the whole site.

This is to train your website visitors to recognise what is supposed to be clicked and what isn’t.

A short video on this subject has been prepared – One clickable website link/action colour.

Of course, there are exceptions to action colour rules.

For example, this Ilkeston railway website uses the same blue colour links throughout. However, the navigation bar uses different colours to represent a railway signalling system.

Graphic Logo Concepts

One area many businesses struggle with is logo design.

In an attempt to come off as impressive they’ll insist on a creation that, unbeknown to them, might confuse the viewer or send the wrong message entirely.

Website logo minimalism is about visually distilling the idea to its basic elements to highlight something very particular about your business.

This is where market research and business planning plays its part: let your target audience be the first thought, not an after thought.

Watch the video Design Discussion 1: Graphic Logo Concepts

Website Planning Spreadsheet

Marketers with a finger on the pulse of consumer habits understand the importance of using design and layout to control attention.

The website navigation bar, for example, is usually at the top of the page. But what links to which pages should you include here?

It is useful to factor the organisational structure into the design. In what order do you want visitors to look at pages?

It might be a good idea for you to look at this website blueprint spreadsheet and video. The spreadsheet is a template you can use to create order instead of settling for chaos in the absence of a good system.

Website navigation may be more of a “back end” decision but it will affect the “front end” appearance. Think of it as architecture.

Analysis

• Minimal design is not to be confused with laziness or lack of ideas
• Don’t use more than two typefaces on your website – settle for a harmonious mood
• Avoid using multiple colours for links and buttons
• You are creating a business website, not a pub fruit machine(!)

Designing Your Website

Design is about purpose, intentions and experience. We design everything, from our diets to our personal fashion preferences.

Design is anything and everything and it is worth thinking carefully about.

Are you from the Derby or Nottingham area? If you’d like to get started with a new website design and development, see the new website guide section.

Alternatively, contact us for friendly, honest advice.