Deciding on the right layout is one of the very first steps in creating a website, and is crucial to get right. Serving as the foundations of your design, the website layout can greatly impact how communicative and intuitive your site will be.
What is a website layout?
A website layout is the arrangement of all visual elements on the webpage and the resulting relationships between them. Through the intentional positioning of page elements, the layout can enhance the site’s message, as well as its usability.
Layout is a key component of website design. It determines the sequence in which page elements are registered amongst visitors, which elements draw the most attention, and the overall balance achieved in the design.
Put plainly, a good website layout can lead visitors’ focus in the right direction. It can help them gravitate towards what matters most first, and then continue to the following sections in order of significance.
Choosing a website layout
When approaching the task of choosing the right layout for your website, there are two main factors to take into account:
Accommodate your content: A website layout should enhance and support your message, participating in telling the story you wish to deliver. Some website layouts are best used for showcasing products or works, while others convey factual information quickly and efficiently (like a blog or a news platform). The layout you choose should be fitting for your type of content.
Use common layouts: While there’s room for creativity, the well-known, tried-and-tested website layouts are usually the best option. These classic layouts tend to feel familiar to users, as they build on their existing expectations or past experiences of other websites. A familiar layout will result in a more intuitive, easy-to-use interface.
Below we’ve highlighted ten of the most effective and widespread website layouts, explaining what makes them work and which type of content is the best fit for each. The following examples are all website layout templates by Wix, fully customizable to match your style and needs:
10 best website layouts
Z-pattern layout
F-pattern layout
Fullscreen image layout
Split screen layout
Asymmetrical layout
Single column layout
Box-based layout
Cards layout
Magazine layout
Horizontal strips layouts
01. Z-pattern layout
When coming across a new webpage, we immediately glance over it to take in the gist of things. This speedy scan, called skim reading, is often done in the shape of the letter Z or in zig-zag form. Our eyes move from the top left corner to the top right corner, then down to the bottom left, and finally to the right again.
The Z-pattern website layout utilizes this reading habit of ours by spreading all of the important information across the Z shape. The logo is usually placed in the upper left-hand corner, so that it registers first. Across from it, in the rightmost corner, you could place the navigation menu along with a prominent call-to-action.
The diagonal part of the Z-pattern, spanning across the page from top to bottom, is where the most attention-grabbing information should go. This can be achieved by use of captivating visuals and a concise line of text, introducing what the website is all about.
The bottom of the Z-pattern should be the culmination of everything that’s been leading up to it thus far. Whether you’ve been building up anticipation for buying a product or booking a service, now is the time to get site visitors on board. Place your most important call-to-action (CTA) button at the very end of the Z shape, encouraging users to take action.
Ideal for: Pages that are highly visual and contain minimal written copy. Landing pages that serve a specific conversion purpose are usually a perfect fit.
📷
02. F-pattern layout
Much like the Z-pattern layout, this design is also based on a common page scanning behavior. In websites that are more text-heavy, we tend to skim or read the information in an F shape. This means that the top horizontal part of the page gets the bulk of our attention, and our eyes go vertically downwards from there, with the left-hand side serving as our focal point.
When using the F-pattern layout, make sure to invest resources into the top part of your page, where visitors are likely to linger a little longer. Write website content that introduces the remainder of the page in a compelling manner. This top part of the F shape usually includes a headline, a subtitle, and a featured image.
The vertical line of the F-pattern on the left-hand side of the page is meant to help make the text more appealing. This can be done using imagery, icons, or with formatting elements such as bullet points or numbering.
Ideal for: Websites that mainly revolve around text. When creating a blog, for example, this website layout is applicable for both the homepage and the individual blog post pages.
📷
03. Fullscreen image layout
This website layout includes a short bit of text on top of a featured image that’s either large or fullscreen. A single visual placed front-and-center can result in an eye-catching and immersive homepage design. It simultaneously serves to communicate a message effectively and instantaneously.
Large media features can convey a lot about who you are and what it is that you do - in as much as a glimpse. The visual itself can be anything from a photograph to an illustration or video. Either way, it has to be of high quality and relevant to your service, product, or overall vibe.
In this type of website layout, the fullscreen visual is accompanied by a short line of text to further explain what the site is all about. Craft a strong header or a catchy slogan to introduce what you offer as a business, making visitors excited to find out more.
Lastly, this layout usually looks just as great on its mobile website version, too.
Ideal for: Businesses that want to highlight a specific niche or product. For example, restaurant websites can proudly display a particular dish, while a wedding website can show the happy couple.
📷
04. Split screen layout
The split screen layout is a major web design trend. By vertically splitting the screen down the middle, it creates a perfectly symmetrical balance, an important principle of design. This neat division into two parts allows for each section to express an entirely different idea - or alternatively, to refer to the same idea from two different angles.
The website layout template shown here presents a dining experience with an eye-catching visual to the left, and text and matching vector art to the right. The layout enables both sides to fully complement each other, rather than compete for attention. This same design can also work well in cases where site visitors are asked to choose between two opposing options, such as ‘Men's’ and ‘Women’s’ categories in an eCommerce website.
To make the most of the split screen layout, consider incorporating some motion by making each half of the screen behave slightly differently. For example, you could employ parallax scrolling effects on just one side of the screen. Another option is to extend this layout onto the second fold of your design too, but swap the content on the two sides of the screen for added visual interest.
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.
📷
05. Asymmetrical layout
Similar to the split screen layout, this stylish website layout also divides up the screen. Only that this time, the two parts are not equal in size and weight. This shift of balance from one side to the other creates visual tension and makes the page feel more dynamic. It’s a bold design, serving as a powerful tool for generating - and retaining - user engagement.
Through a non-uniform distribution of scale, color, and width across the page, visitors’ focus can be drawn to specific elements over others. To achieve this, give certain elements more visual weight, so that they act as focal points.
Decide which part of your content you wish to highlight. This can be anything from a photo of a product to an online form that users are required to fill out. Then, make it stand out using high color contrast, enlarged proportions, and other kinds of visual emphasis.
Ideal for: Websites that are going for the contemporary and innovative look, and are interested in driving user engagement. A business website or the portfolio of a design agency are good examples.
📷
06. Single column layout
This website layout includes all of its content in one vertical column. It’s a simple, straightforward design (and in fact, it’s the one used on this very page).
The navigation here is just as easy to understand - visitors immediately know to scroll down the page for more information. However, there’s one important website navigation tip to keep in mind for this layout. Be sure to add a ‘Back to Top’ button or a fixed floating menu, to help users explore your site further.
When using the single column layout for text-heavy sites, remember to break up the text every so often with imagery, headers, or sub-headers.
Ideal for: Long-form content websites, or websites that display content in chronological order. These can be anything from blogs to social media feeds.
📷
07. Box-based layout
The box-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 and instead amount to a unified look. Each box leads to a different webpage, where users can learn more about the topic they’re interested in most.
A recommended practice is to add a large featured box to serve as the header and tie the different boxes together. The featured box can include the page’s title and a brief explanation of its content. Another tip is to curate the visuals in each of the boxes so that they work together well, adding to a cohesive brand identity.
If you’re building a website on Wix, the Wix Pro Gallery is a great way to create this layout. With quality image display, you’ll enjoy full control over your box-based layout, starting with the number of columns and rows, and down to their size and spacing.
Ideal for: Content-rich websites. This layout is a good solution for a graphic design portfolio, with each box leading to a different project page.
📷
08. Cards layout
Much like the box-based layout, the cards layout uses boxes or other rectangular containers to display diverse content. This website layout is non-hierarchical, meaning that no one item stands out over the others, and all of the information is treated equally.
With all cards carrying identical features (in terms of size, font, etc.), it’s easy to import the content into each one. This results in a modular design that’s a good fit for all screen sizes. It also allows for intuitive and approachable browsing despite the large amount of information, improving the user experience.
Ideal for: Content-rich websites. This website layout is perfect for a vlog or an online store.
📷
09. Magazine layout
Deriving inspiration from printed newspapers, the magazine website layout is based on a multi-column grid to create complex visual hierarchy. By implementing containers that can be modified individually, the magazine layout lets you prioritize major headlines over smaller articles.
This can be done either by size (larger images and headlines are the first to command our attention), element placement (the article at the top of the page will usually be the first we read), or with the amount of design detail provided (an article with an added photo draws more focus than one with just plain text).
Note that the magazine layout also utilizes the F shape skim reading pattern, catering to readers’ 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.
Ideal for: Content-heavy websites such as news publications or blogs.
📷
10. Horizontal strips layout
This website layout breaks up the long scroll of the webpage into full-width strips. With each strip functioning as a fullscreen fold (or close to fullscreen), this diversified layout builds user anticipation with a different surprise every time they scroll down.
To make each strip different from the one before, try to switch it up from one to the next. This can be done by using a different shade from your website color scheme in each strip, or by including images on some strips and written copy on others. In addition, by incorporating scroll effects on your strip, you’ll be able to infuse this layout with a sense of motion and depth.
Ideal for: Long-scroll websites. One-page websites can especially benefit from this layout.
📷
Now create your website in the intelligent Click here to see our other services click here!
Make your sign up now on our blog so you do not miss anything!
* Source https://www.wix.com/blog/
Comments