The kind of web design addressed in this article is the most typical: one that describes what you offer and culminates in a call to action. What you say about yourself is not what we’re interested in here. We are interested in visual tools that keep the visitor engaged until they hit the “call to action” button.
Web Design and the legacy of the Swiss Design Movement
First comes the truism that what we need to engage with here is an uncluttered, clean, simple website as most peoples’ taste is formed by minimal design memorably pioneered by the Swiss design movement, starting in the 1950s. Within this comes another truism, which is that to keep your visitor’s attention so that they don’t get distracted and click away, the best formula is to keep them scrolling down a long page which eventually answers all their questions.
So, within this overall context, let’s get down to greater detail. Here’s where we start to differentiate more between “standard” and “different.”
Designing the Header
Because they are the navigation tool headers should be designed to be pretty standard. We know that whereas visitors love interesting content, they don’t want the bother of your site being hard to navigate. So, they want a ‘normal’ layout with the logo at the left, and the menu across the top, starting with ‘Home’ – which could be the logo itself – and ending with ‘Contact’. That’s the header done. Now for the page.
The Long, Long Explanatory Page
Imagine your long page as having bigger, grabbier things at the top, working their way down to smaller, more detailed things at the bottom. This is because the landing area, the first part a visitor will see on their screen, needs to keep them there. Succinct, large text, white space, and a large image, preferably one that moves. The visitor must know they’ve come to the right place. Now, we start them scrolling.
Keep the Eye Moving
We know that what we need to be doing here is answering all their questions, one after another. So, we have more detailed content here, but it must be kept short. Long paragraphs will just be scrolled past. We must keep the eye moving from topic to topic, making it easier to keep scrolling than making the effort to look away.
These things help: Headings, subheadings, boxes, circles, pictures and shapes. We must lead the eye easily across and down and across again. Remarkably, this can be achieved very successfully with something as obvious as an arrow.
More subtly, there can be tiered shapes, tiered colours. Faces, too. Everyone is fascinated by other people and they love real, engaging faces. They will look at a heading that the face is looking at. So simple as to be almost old fashioned, but so powerful. We find interesting things by scanning other peoples’ faces to look for what they think is interesting.
Effective Colour in Web Design
Now for colour. Corporate colours should be muted and inviting. They should follow upon one another in a manner that creates constant minute differences but without sudden jumps.
For instance, we should avoid dark blocks of colour that look like the visitor has reached a footer, or they could click away. This applies also to social media icons, which should be in muted colours, and recognised by shape only, to keep our visitor on the page.
That Crucial Button
Lastly, our Call to Action button. This needs to stand out, even from our corporate colour scheme. In fact, it is advisable to use a specially bright colour that doesn’t occur anywhere else. The impression of “difference” can also be created by contrast, for example an orange button on a blue-grey ground, or by space, giving the button an air of significance.
If there are multiple Calls to Action (for instance, selecting an item, adding it to a cart, and then paying) these buttons all need to be given significance. This can create design opportunities for more intense foci within the generally more muted background.
This has been your Web Design Map
And that is our visual overview. We hope you have a clear understanding now of the general guidelines that a website needs to follow in its use of visual tools. We hope you feel empowered by realising that while web design has many elements, it does not need to be a dangerous trek into unknown territory without a map.
Having a grasp of the overall picture you will need to create will free you up to explore more interesting content and detail, without fearing that it might derail you.
Now that you have a map and your destination is clear, enjoy the journey!
Table of Contents
