What is a website layout?

Website layout determines the way key elements of your website’s content, such as images, copy blocks, colour, negative space, and calls to action are applied on each of your web pages.

As well as impacting your website’s design, the website layouts you opt for also have a bearing on your site’s navigation and user journey.

When used correctly, layout design should draw attention to important elements on your website’s landing pages, for example, menu items and call to action buttons. A good layout can also help to engage a user’s attention for longer, boosting session times.

Quick tips:

Featured image

Common in blogs, portfolio pages, and online stores, a featured image layout usually comprises of thumbnails arranged in a grid system that a user can click on to open a new page.

As website templates go, featured images are great for navigating content-heavy sites like portfolio websites in just a few clicks.

Realise that colours matter

In marketing, colour cues are commonly used to subtly influence user behaviour.

When deciding on your website’s colour scheme, we recommend limiting your palette to 2-3 colours, and using white space to add more visual weight your layout.

Asymmetrical layout

In an asymmetrical web layout you create a visual hierarchy of sorts that means that some page elements become the natural focal point over others on the page.

This can be achieved by using different sized images and copy blocks, or even a split screen layout where all the content is arranged on one side of a web page while the other half remains totally free.

Magazine layout

Magazine layouts mimic the style of news sites online, and typically consist of a H1 followed by text arranged in vertical columns.

Because large volumes of text can be intimidating to an online audience, inserting stock photos or your own high quality images within the copy can make the content more digestible.

F-shaped layout

The F pattern layout is one of the most common website layouts.

In this web design, you intentionally create active space to the right of each landing page, by weighting content to the left hand side (thus achieving an f shaped pattern). It’s similar in concept to z pattern layouts (where content is horizontally bookended and centre aligned).

You’ll find the f shape layout offered in many DIY website builder platforms, and its also a web designer favourite too.

One column

One column sites follow a single column layout where the text on one page is arranged in a vertical column.

As web layouts go it requires very little in the way of web design skills. It’s also the ideal layout for long form articles. In fact, you may well have spotted that this is the layout we’ve utilised for this post.

Single column layouts allow you to achieve consistent design that’s optimised for mobile devices, which makes them great for search engines. The approach also works well when you have a lot of information on the same page or you’re designing a one page website.

Why should you choose one layout over another?

Whether you’re promoting a coffee shop or designing an online store, your site visitors should be forefront in your mind when choosing your own website layout, after all satisfied clients are your goal.

Also of paramount importance is ensuring built in features are prominently displayed. A full screen photo, for instance, can often convert as well as copy.

How your site is laid out for mobile users should also be a top priority. Split screen designs look great on larger screens but are not well optimised for mobile. The better you can make the user experience of your mobile site, the higher you’ll appear in search results.

Leave a Reply