website design priniciples

Top 10 Website Design Principles You Can Use TODAY!

I’m going to delve deeper into the wonderful world of Web design, looking closely at why it is important and what goes into creating a site that appeals to users and turns visitors into paying customers.

Your website is like a virtual showroom – the place where people come to look around, hoping to be impressed with what they see and find whatever it is they are looking for. Your homepage is like the reception desk of this showroom – the first thing that the person will typically see when they visit.

Now, the reception is key in making customers feel welcome and comfortable in their surroundings. It is clean, well presented and manned by happy, courteous staff that go out of their way to make sure customers have an enjoyable experience and are able to find everything they need with minimum fuss.

In order to maximise your potential and increase leads and conversions, you have to make your website the best showroom around and your homepage the friendly, cheerful face that greets the customer when they arrive.

You only have a fraction of a second to impress a visitor; if they do not instantly like what they see when they land on your website, there’s a strong chance that you have lost them for good – to your competitors.

When it comes to effective Web design, beauty is in the eye of the beholder. In the words of the late, great Steve Jobs: “Design is not just what it looks and feels like, design is how it works.”

How good your website looks and how easy it is to use is judged, not by you, but by those that use your site. Every aspect of your website, down to the finest detail, has to be geared towards the customer and making that all-important good first impression.

There are ten principles that go into making a website visually attractive, engaging, and easy to use, and each one is critical to a successful product. These are:

1. Purpose
2. Communication
3. Navigation
4. Load time
5. Colours
6. Images
7. Typography
8. Grid-based layout
9. ‘F’ pattern design
10. Mobile friendliness

Let us look at each one of these principles in greater depth.

Top 10 Website Design Principles

Purpose

You will already know the purpose of your business; otherwise, you wouldn’t have arrived at where you are today. Good website design requires you to take this purpose and give it to customers on the internet. Business websites are different to social media and entertainment websites in that people will very rarely visit your site randomly. They will be coming to you for a reason – usually because you have appeared in a list of search results based on what they are looking for.

So what are they looking for – information, interaction, transaction? Whatever it is, you have to make sure they find it as quickly as possible.

Every page on your website has to have a clearly defined purpose and be able to fulfil a specific need efficiently and effectively. You need to be mindful of this purpose throughout the design of your site.

Communication

Communication is something we will be talking about in more detail in our next video on content, but it is a principle that cannot be overlooked in web design. The internet has become an information super highway. People want to digest as much information as they can, as quickly and as easily as possible. Therefore, it is essential that you are clearly able give them what they seek. The design of your website will play a key role in pointing people towards information. This will be done using menus and submenus, categories and tags. A visitor must always be able to get from A to B in as few clicks as possible, which brings us nicely onto the next principle …

Navigation

In a study by leading internet-marketing resource, Econsultancy, more than nine out of ten respondents agreed with the statement “good user experience just makes sense.” You can spend as much time and money in creating and commissioning content for your website as you like, but if a user cannot find it, they can’t read it.

Navigation is all about how easy it is for people to move around your website. A visitor does not want to have to work hard in finding the information they need, and nor should they. The more effort they have to put in, the quicker they will lose interest – and lost interest means lost revenue.

There is an unwritten rule in Web design that most people follow and that is that a user should be able to get to their desired location within three clicks.

You cannot just expect people to automatically understand how your website is organised, so you need to make it as simple as possible for them to get around. As with communication, this comes from good organisation and the use of primary and secondary navigation, menus, clickable buttons and breadcrumbs, which allow a user to retrace their steps from the homepage to a page they are currently viewing.

When considering navigation, it is important that you are not too hung up about your homepage. If your site has multiple pages, then there’s a good chance search engines will rank these pages simultaneously, meaning people can access your website in many ways. Because of this, every page will need to be well organised to encourage further exploration.

Load Time

Most people that use the Web are notoriously impatient, and that probably includes you and me. A website that does not load quickly is a huge turn-off – one that is guaranteed to result in lost revenue.

Forty per cent of people will abandon a webpage if it takes more than three seconds to load, and the change in a website bounce rate spikes to 100 per cent when a page takes four seconds or more to load. If people are made to wait for eight seconds or more to explore your page, the bounce rate increases to 150 per cent.

Just a one second delay in page response can result in a seven per cent reduction in conversions. Slow websites create a poor user experience and a poor user experience is basically free advertising for your competitors.

Loading times will also affect an AdWords Quality Score and search engine ranking. Page Speed is included in Google’s ranking algorithm on both desktop and mobile and can be the difference in how two websites of equal authority and relevance are listed in search engine results pages.

However you look at it, there is no place for a slow website. In order to ensure a page loads quickly, all images must be optimised in size and scale, and hosting servers must be efficient and reliable.

Without getting all technical on you, pages should also be cached to save the web server the trouble of rendering the same page repeatedly every time someone visits, and HTTP requests should be minimised by reducing the time it takes to download the content on a page.

Colours

Colours influence us all; warm colours such as red and yellow invoke reactions of cheerful optimism and excitement, while cool colours such as green or blue promote honesty and peace.

Colour certainly has a psychological effect on the user and this is something that every website must take into account. Colours should always be chosen in a way that suits the subject of the website, always with the mood of the user in mind.

A well thought out palette goes a long way in helping to enhance the user experience. If you look at some of the most successful websites, they all use colours that create harmony and balance. White space is often used to create a modern, orderly look, while contrasting colours for text and background are essential in promoting a positive reading experience.

Some colours, such as those linked to emotion should never be overused. These work best when used sparingly on buttons or to encourage a call to action.

Colour is a very powerful weapon in Web design. The colour of a website is the first thing a visitor sees and the last thing they remember.

Images

‘A picture speaks a thousand words’ – an overused phrase, I know, but how you use images on your website will have a significant impact on its success. The brain processes visuals 60,000 times faster than text and 40 per cent of people respond better to images, so embracing them definitely makes sense.

The use of images and their benefits as a type of content is something we will look at in greater detail in the next video, however, the use of photos in prominent positions on your website can help greatly in appealing to your audience.

The best way to sell anything is to give it the opportunity to sell itself. Say for example, your business sells kitchens. A striking photo of one of your kitchens fitted in a customer’s home featured prominently on your homepage will sell more than any description. That is why so many e-commerce websites – eBay and Amazon being good examples – are image heavy.

Good corporate photos of you and your team can also be hugely rewarding. A customer is much more likely to trust a business if they can put a face to the name.

Typography

On average, 95 per cent of a website is filled with content. Typography is the art of displaying this content in the best possible light. Well-known graphic designer Ellen Lupton, once said, “Typography is what language looks like.” And for this reason, it is so closely linked to Web design.

For obvious reasons, typography is often used interchangeably with font. However, while both are equally important in Web design, typography is much more of a science – one that requires the correct choice of typeface, colour, line length, point size, layout, and design integration.

However, it is not all about creating the prettiest designs. Typography has a huge influence over the way a visitor will judge a website. Think about your own internet habits … Whenever you visit a website, you can often tell from the first glance whether the message is fun, serious or corporate, simply by looking at the typography.

In a world where first impressions count for everything, websites are defined by the logo or heading at the top of the page. The way in which typography is used can be the difference in a customer sticking around or hotfooting it over to the competition.

Content, as we will discuss in the next video, is hugely influential in building a great website. Nevertheless, it is nothing on its own. It has to be well presented and look attractive to the reader. Great typography cannot turn bad content into good content, but it can work wonders in making the reader feel compelled to read it, by straightening, tidying, and maintaining consistency throughout the site.

In terms of the actual body of content, Sans Serif fonts such as Arial and Verdana in 16px are the easiest to read online. In order to keep content organised and streamlined, you should not overdo it on typefaces and point sizes – no more than three of each.

Grid-Based Layout

Web users like structure; it is cleaner, tidier, and easier to digest. Content that is spread randomly across a site is a huge turn off and gives the impression of unprofessionalism. A grid-based layout is the most commonly used, and, indeed, most successful, Web design technique.

A grid-layout offers visually appealing simplicity. People like to view content that is arranged into columns; this has been proven over the years with newsletters, photographs, and movies formatted for widescreen viewing. Columns encourage the user to focus on the content.

A grid layout can be created before any of the content is added to the site, allowing the dimensions, columns, and horizontal elements to be designed in advance. This allows a site to maximise its potential in terms of navigation and allows the most important content to be positioned so that it can be viewed without scrolling.

Grids are also perfect for responsive themes and offer great scope for ad accommodation – if you are looking to generate extra income in this way.

F-Pattern Design

Successful Web design always puts the needs of the user first, and this means building a website that gives in to their natural viewing behaviours. In studies of eye movements, scientists have identified that people scan computer screens in an ‘F’ pattern, with most of the content seen featured at the top and left of the screen.

Your website should never try and force the visual flow of the viewer; instead, it should work in harmony with their natural behaviour in ensuring information is displayed from left to right and top to bottom in order of importance. This is why so many websites you see feature sidebars at the right side of the screen.

Users will not read each and every word on a page. If you have something to say, say it at the top.

Mobile Friendliness

Seven in ten people in the UK own a smartphone and almost two-thirds own a tablet. Mobile is a platform you simply cannot afford to ignore.

How you appear on mobile will be a determining factor in your success. According to Australian digital agency Margin Media, 48 per cent of users say that if they arrive on a business site that is not working well on mobile, they take it as an indication of a business simply not caring.

Another telling statistic is the fact that 46 per cent of mobile users report having difficultly interacting with a webpage and 44% complain navigation was difficult.

This indicates two things: that businesses are not trying hard enough on mobile; and that there is an opportunity for you to outperform the competition.

Mobile websites can be built from the bottom up or, more commonly, rebuilt using responsive web design – a process that involves developing one site that automatically adjusts to suit the platform of the user.

Forty-eight per cent of people cite Web design as the number one factor is deciding the credibility of a business and 94 per cent cite the design as being the reason they mistrust or reject a website. These ten principles can be used to help craft a website that appeals to your target audience, increasing traffic and engagement and, ultimately benefiting your bottom line.