Great web design is all about usability - if your customers can't find their way around your website then they're going to leave pretty quickly. Among other things, usability means having an intuitive and consistent structure to your web pages. In this blog post we're going to break down some example pages and show why we, as web designers, choose to design pages in a certain way.
The header refers to the top of the page, typically everything down to the main navigation of the site. Because it's at the top of the page, it's always the first thing that your visitors will see when the page loads, and so it needs to clearly identify your website, the visitor's location within the site, and usually links so that they can contact you - by email, phone or social media. For visitors coming to the site for the first time, your main navigation items will give visitors a sense of the most important parts of your website.
Your header will need to change size and shape between different devices, but it should look the same so that a visitor who previously visited on their phone is reassured when they come back on a laptop and recognise the style of your site. A lot of websites use "sticky" headers that get smaller once you start scrolling down the page, but stay stuck to the top of the screen for easier navigation.
Your logo is the most obvious way to identify your website, and it's common to place it either on the left side of the page (in languages that read left-to-right, like English) or in the centre of the page. Placing it in the centre makes the site feel more balanced, but can look very busy if you have a lot of other features in your header. The logo should be big enough to draw attention, but not too big so that it dominates the header. Most visitors expect that clicking on the logo will take them back to the home page.
The website's main navigation is the bar of links that usually appears horizontally in the header. Navigation will frequently be in a bold colour to make it stand out, and rolling the mouse over a link will show a set of drop-down links that are called secondary navigation - pages within a particular section. For complex sites with deep structures, we recommend only showing one level of links - a lot of visitors struggle to use an extra level of navigation here, and in this case, we'd suggest vertical secondary navigation on the internal pages of the site to aid navigation (more on that later).
The navigation usually starts with a Home link. Studies show that people will look at navigation links on the left of the page more than those on the right (for left-to-right languages), so it's important to place the most important sections of your site on the left and work along to the less important sections. The one exception here is that it's become convention to put the Contact link as the last link in your navigation.
More studies have shown that the maximum number of navigation links that people can easily understand is between eight and ten, so try to structure your website so that you don't have more than this number of top-level links in your site structure. In a pinch, you can cheat slightly and remove the Home link, because most people know that clicking the logo will take them back to the home page.
The header should include at a minimum a phone number and email address, both of which should be links that visitors can click to contact you. Some of your website visitors will much prefer to fill in an online contact form, but a good number will just want to write you an email, so be sure to include both options to encourage your visitors to get in touch. Your phone number(s) should be formatted in the international format, e.g. +44 1208 226522. To make it easier for your visitors, you might want to add little icons next to your contact links, and also include links to reach you on WhatsApp or other contact methods that are common in your sector. If your organisation relies on donations, this would be the perfect place for a big "Donate Now!" button.
If your website includes a members-only area, the header is the perfect place to include a form so that they can log in. This is often hidden by default and pops up when the visitor clicks a button or link. This popup should also include a link so that members can reset a forgotten password, and a registration link to encourage new people to sign up.
If your website has lots of information, your visitors might benefit from a search form. We usually recommend using Google Site Search which is free to use and does a great job of indexing the website and allows complex searches. The only downside is that it sometimes shows adverts on the results page if you're not a charity.
The header is also a perfect place to put your social media links, unless it's looking a bit busy in which case you might want to move it into the footer. The links you add here will depend on your industry - if you're a new recruitment startup then you'll want to link to your LinkedIn page, but if you run a self-catering holiday company then you'll want to link to your TripAdvisor page and show lots of lovely photos on your Instagram. It's tempting to include links to dozens of different channels, but try to keep it to four or five to avoid overwhelming your visitors.
Scrolling down the page beyond the header, we come to the body of the page, which will be different on every page of your website.
Page content - linear on mobile
Calls to action
Newsletter sign up
Social media links