When we talk about website design we very rarely talk on such a microscopic view as page by page. And why not? It can be so useful talking a website through page by page, especially for the novice, as this can reinforce the purpose behind your website and what pages should be included or given a miss. Common mistakes on websites we see are either too many unnecessary pages or too few, with no real structure. This guide on web page design will help you decide what should be included on each page for the best user experience and performance possible from your website.
First things first, when designing any page you should have a clear purpose for having it on the site.
Know the Purpose
It’s no good putting your fingers to keyboard if you don’t know what you should be writing for. It’s important to know what the purpose is for having each page on your website and that there is a clear reason, otherwise why is it there? It should be useful for both your business and the web users viewing it. If it doesn’t add value to your business then it would only draw attention away from the great range of products/services you offer.
Depending on how you’ll be driving traffic to the website, they’ll be certain design choices more applicable than others. For example, if you’re using paid advertising, a landing page designed to convert visitors into leads only would be the best options, whereas, if you were using SEO to drive traffic, then more in-depth content would be expected in order to rank high on search engines like Google.
Some websites are solely about driving towards one core goal, like contacting them for a quote. In which case, it’d be standard to see buttons for “get a quote” throughout every page on the website.
A product page usually features a product image, title, description, buy button, and pricing, as well as reviews and other features that would likely increase a user’s decision to buy.
A contact page is used to help web users get in touch with a business so would likely feature additions like an email address, a phone number, an address, a contact form, and even potentially a map for directions.
Those are just some examples of pages that should have a clear layout that shouldn’t be altered too much, keeping it simple can also work wonders so a contact page should look and feel like a contact page.
What features will you use
When designing a website it’s tempting to try and use as many features and softwares as you possibly can to try and impress web visitors. This, more often than not, will look cluttered and hide the main purpose of your page. So be sure to think about whether a feature will actually benefit your users first. If it will be of benefit, then great add it in, but also think about the placements of each feature on the page and what would be most important for visitors to see first.
In nearly all web designs it’s advised to have at least one high quality image on the page that’s relevant to the page it’s displayed on to draw the focus of users. Sometimes overlaying text on these images can be helpful to conserve a little space or maybe an animation would be better suited?
There are so many website features you could add, but we think the key takeaway would be to place important images and text first so the user knows exactly what the page is about when they land on it.
Components of a web page design
Some sections of a website will be a constant throughout the web design such as the header and footer, so here’s a bit about each component of any web page:
The header is at the top of every web page with the logo and menu navigation. It’s a global feature that’s carried throughout the website, mainly used for easy navigation between pages.
The body of each page can be different and should be, these are unique to the page they’re displayed for and include the bulk of the design and content for the web page.
The footer is at the bottom of every web page and is usually another global feature like the header. This may have menu navigation for pages similar to the header with disclaimers about copyright, and privacy policies.
User testing
Part of ensuring your web page works the way it was designed to is through monitoring it’s usage and recognising any ‘snag’ points creating a barrier for users. Hotjar is a tool that records web page visits anonymously, showing you a user’s experience on the website through recorded visits. This can be used to adapt pages and notice issues early on.
With all these pages on your website, how do you know which page to update first? Well, every website should have analytics of some sort installed. If you view your webpages on analytics and sort by pageviews, you can see the top performing pages, these are ones you should start with.
Asking your work colleagues would also be a good idea if you have them look through the business website, what do they think could be added? Having people you know look through might bring about better feedback and good ideas.
Designing with SEO in mind
Designing with SEO in mind means designing for users and search engine bots. It combines technical content formatting with what a web searcher is wanting to find on your web page.
Technical formatting involves understanding the level of headings you apply to pages for example it’s recommended every page has one h1 (the largest heading) to represent the purpose of the page. As well as paragraphs to contain the bulk of the content. Google’s search bots analyse all of this and understand what your page is about based on the keywords you have in your content and title, and the quality of it all.
This is where writing for search engine bots and users fits hand in glove. Google’s ranking algorithms are designed to mimic how a web user would judge a website, so writing for users, for the most part, is writing for Google. Though it is well worth being aware of technical factors on-page like meta titles and descriptions, as well as writing enough relevant content on the subject of the page.
As an agency, we use all kinds of tools to help us deliver high quality SEO for our clients. One tool we think is easy to use for those with no budget to spend on tools would be https://www.seoptimer.com/, it’s a quick SEO audit tool that can analyse any web page, just enter the URL.
Explore Conversion Rate Optimisation
CRO or conversion rate optimisation is the process of changing a web page to increase the chances a user will take a desired action, like enquiring.
To begin this process, we should understand what a user would need to take our action. So for enquiring, we should add a contact form, email address, and phone number – to ensure our contact details are seen. Then we can think about encouraging a user to enquire. So we could add calls to action throughout the page; these are buttons that could say “get in touch” or “enquire today” with a link to the contact page – or adding “get in touch with our team” to the end of paragraphs. Call to actions work well at drawing attention to our action of enquiring, while the contact details and contact form give them the means to enquire.
Conclusion
And that about wraps up our guide on web page design. Using the devices we’ve talked about will really help shape your web pages and website as a whole, whilst performing optimally to generate business from your website.
