5 Tips for Designing Your Website’s Layout


One of the most important things when building a website is the layout. Being able to find your way around a website easily is important for keeping users on the site. People’s attention spans for online content are becoming shorter and shorter. Have you ever struggled to find a page on a website? Or where to find contact details? I know I have, and it can be very frustrating. Not a feeling you want potential customers to have.


It is your website after all, so it still needs to have a shared identity with you, your brand or your line of work. The website layout should be functional but also personalised. Whether a modern and sleek website or a stylized and vibrant expression of your personality it should be easily navigated.


So how can you avoid frustrating your website’s users? Hopefully the following tips to improve your website’s layout will help.


  1. Pre-planning and design principles
  2. Homepage layout
  3. Clear and effective design
  4. Ease of navigation
  5. Mobile Friendly design


Pre-planning and Design Principles

Before building your website it’s important to have key design decisions already planned out. By planning out your design before commencing the build stage you can have a better idea of things like branding continuity through each page.


It’s important to have continuity across things like headers so that you have a clear identity across each page. For instance, your homepage could have a video header that helps to clearly identify it. That way users instinctively know what pages they are on, especially returning users who use the site regularly.


By planning the overall design of your website layout, it will be more consistent and easily navigated.


Homepage Layout

The homepage is the first sight of your website a user will have. If it’s a potential customer, then it’s important that gives clear paths to follow and is clutter free. By having a minimalistic homepage, it helps the user be guided to the pages and content you want them to be guided to. For instance, if your website is an online store you might want your front page to guide a customer to your latest sale page.


By having a clutter free design, you can draw the customer’s eyes to a large header with a link to the latest sale. As this is the main thing on the page it’s more likely that the customer will click that link. This is a better approach than, for instance, having a homepage with a lot of pictures and links to multiple different and unrelated products also cluttering the page.


Part of the homepage layout design is to remember that it is meant to be the start of your preferred customer journey. A customer journey is the path you want a customer to follow that will lead them to a purchase. If you have a sale on end of season stock you’re trying to clear, it’s better to have that be the first destination for a website user.


Another important part of the homepage is that from there you can access all other pages on the website. This can be achieved by having a sidebar, dropdown bar etc. containing links to the other main pages of the website.


Clear and Effective Design

What we mean by clear and effective design is that there is a clear template for each page that follows across the website, and that this template is simple to understand, browse and use. By having this uniformity across your website, it not only promotes your brand identity but also helps users know where everything is and can easily find what they’re looking for on each page.


By ensuring it is clear and effective you make the website easy to navigate.


Ease of Navigation

Ease of navigation is paramount to an effective website. We’ve found the best practice when building a web page is to always ask if each page could be ‘easier’ to navigate, within itself and to other pages. Do you have to scroll down a whole page to find the information for a product? Is it hard to find a certain page from another? For example, is it hard to find the contact page from a product page?


Easily navigating a page should by definition be simple. One piece of information should clearly lead into the next. This can be done simply with numbering or arrows for instance. However, this isn’t always the most visually pleasing of options so perhaps a Parallax may help, by clearly showing new information as you scroll down.


For clear ease of navigation, you can always look at other websites. www.apple.com is great for displaying information for their products as you scroll down the page, but always has the navigation bar available at the top of the page.


What If a customer wants to ask a question about a product before ordering? In this instance it might be a good idea to have a live chat widget or a message box under the product image to ask a question instead of them using the navigation bar. This way they stay on the product page and find the information they want without leaving it.


These are the sort of design choices that need to be made and adapted as the website is built to maintain or improve the ease of navigation.


Mobile Friendly Design

More and more mobile devices are being used by people as their main browsing device. If your website isn’t mobile friendly, then you’re losing out on not only a larger percentage of internet users but also potential customers. By designing your website layout with mobile users in mind then you tend to have a more well-designed website as a by-product. For instance, navigation will be even better if it’s designed with mobile users in mind.


As with everything when designing and building your website it’s important to test each page, button and potential user action to ensure that it works the way it was intended. This is doubly important with the mobile design as it wouldn’t be good if a purchase button, for instance, worked on the PC browser version but not on a mobile phone or tablet.

Pin It on Pinterest

Share This

Share this post with your friends!