Stornoway Isle of lewis scotland uk 07425 767360
Website Design Layouts - 10 Examples Of Best Layout Formats For Maximum Visual Impact
A website’s layout is the framework that determines the website’s structure and design, it is the arrangement of all visual elements on a web page. Through the intentional positioning of page elements, the relationships between them can be controlled to better guide the user experience (UX).
All sites have a grid system that sits beneath the website design. These columns and rows provide order to the site's content and guides the viewer's eye around the page. Every website has an underlying grid upon which the designer has built the layout.
Because of its visual significance, a good website layout with visual balance can guide visitors to focus on the most salient content, enhancing a website’s 'message' and usability (UI).
Web designers work to find the most effective way to display information on a website by the use of different designs and layouts depending on the site's intended function and use.
Listed below are several common individual layout schemes that can be used on a stand-alone basis or can be combined to create multiple layouts across a site.
1. Z-Pattern Layout
When viewing a new web page, the visitor usually attempts to skim read it in the shape of a letter Z or in zig-zag form. A Z-pattern website layout utilises this reading habit by spreading important information across a Z-shape. The eyes scan from top left to right, then reverse across and down to the bottom left, to finish at the bottom right of the page.
This website layout is ideal for pages that are highly visual, and landing pages that serve a specific conversion purpose are usually a perfect fit.
2. F-Pattern Layout
Much like the Z-pattern layout, this design is also based on a common page scanning behaviour. With web pages that are more text-heavy, the viewer tends to skim or read the information in an F-shape. This means that the top horizontal part of the page gets the bulk of attention, and the eyes then go vertically downwards from there, with the left-hand side of the site tending to serve as the main focal point.
This layout is also good for sites with a large main image where the lines of text are placed in an F-pattern over the image, creating an uncluttered focal point.
An F-pattern layout is suitable for websites that mainly revolve around text, and large images. When creating a blog, for example, this website layout is applicable for both the home page and the individual blog post pages.
3. Full Screen Image Layout
With an extra large visual placed front-and-centre, a full screen image layout can result in an eye-catching and immersive home page design. Large media features can convey a lot of relevant information giving an immediate impact. This type of layout is ideal for mobile devices.
A full screen image layout is excellent for businesses that want to highlight a specific niche or product and who have very powerful imagery in their promotional material.
4. Split Screen Layout
By vertically splitting the screen down the middle, a split screen layout creates a symmetrical balance. This division into two parts allows for each section to express an entirely different idea—or alternatively, to support one idea but with a binary choice of attributes. It allows the viewer to make quick choices and helps to secure immediate engagement.
A split screen layout is ideal for websites that offer two significantly different types of content, or websites that want to evenly combine written copy and imagery. Online stores that segment users by age, gender or behavior are a good fit for this layout.
5. Asymmetrical Layout
Similar to the split screen, this website layout also divides up the website composition - but this time the two parts are not equal in size and weight. This asymmetrical shift of balance from one side to the other creates visual movement, making the entire design feel more dynamic.
An asymmetrical layout is ideal for websites that wish to convey a contemporary and innovative look, and that are interested in driving user engagement. A business website or online portfolio of a design agency are good examples.
6. Single Column Layout
This website layout includes all of its content in one vertical column. It’s a simple, straightforward design which creates an excellent reading experience because it focuses the viewer on the content with no distractions to either side.
This is an ideal layout for long-form content websites, or websites that display content in chronological order - anything from blogs to social media feeds.
7. Box-Based Layout
The box-based, or grid-based, website layout merges multiple pieces of content into one geometric design. With each bit of information neatly constrained into a box, the elements don’t overshadow one another, giving a unified look. Each box leads to a different web page, where viewers can learn more about each topic of interest.
This is an ideal layout for a website that includes many important pages. For example, it’s a good solution for a graphic design portfolio, where each box can be conveniently linked to the home page design so that it leads to a different project page.
8. Cards Layout
Much like the box-based layout, a cards layout uses multiple boxes or other rectangular-shaped containers to display diverse content. This website layout is for the most part non-hierarchical, meaning that no one item truly stands out over the others, and all of the information is treated equally.
A cards layout is ideal for a content-rich website, especially perfect for a vlog (video-blog) or online store.
9. Magazine Layout
Deriving inspiration from printed newspapers, the magazine website layout is based on a multi-column grid to create a complex visual hierarchy. By implementing containers that can be modified individually, a magazine layout allows for prioritising major headlines over smaller articles.
Note that the magazine layout also utilises the F-Shape skim reading pattern, as mentioned earlier, which mitigates against viewers’ decreasing attention spans. Combining the F-Pattern with a more complex grid enables large quantities of information to be broken down into digestible reads, while retaining a sense of order and a clean, uncluttered design.
The magazine layout is an ideal choice for content-heavy websites such as news publications or blogs.
10. Horizontal Strips Layout
This website layout breaks up the long scroll of the web page into full-width strips. With each strip functioning as a full screen fold (or close to full screen), the diversified composition builds user anticipation, structuring the content in a balanced, organised way.
This layout is particularly beneficial when it comes to one-page websites, especially with long scroll designs.
Takeaway
Research has shown that it takes less than one second for a user to form an opinion about a website, and that 94% of a website user's first impressions are design related.
Users have expectations of what different categories of websites should look like, with designs that conform to that presumption perceived as highly appealing. Research has shown that websites with low visual complexity and high prototypicality (how representative a design looks for a certain category of website) were perceived as highly appealing.
It is therefore essential that web design layouts should be familiar and conventional to attract and retain a viewer's interest.