10 Recommended Website Layout Ideas to Get You Started


Best website layouts three examples in brown, orange and blue

This post was last updated on December 19, 2021.


Deciding on the right layout is one of the first steps in website design. Serving as the foundations of your site, a website layout can greatly impact how communicative and intuitive you are online.


From asymmetrical designs to classic patterns and split screens, this article includes 10 website layout ideas that will help you get it right the first time.



What is a website layout?


A website layout is the arrangement of all visual elements on a webpage. Through the intentional positioning of page elements, we can control the relationship between them to better guide the user experience.


Acting as a key component of web design, a layout determines the sequence in which page elements are registered among visitors, which elements draw the most attention, and the visual overall balance of the site. Because of its visual significance, a website layout can enhance a website’s message and usability.


Put plainly, a good website layout can lead visitors’ focus in the right direction—gravitating them toward what matters most first, and then continue to the following sections in order of significance. A layout can also be used to enhance your design, create interesting interactions and show that you’re up-to-date with web design trends.



How to choose the right 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


The layout you choose should be fitting for your type of content. Why? A website layout needs to help tell the story you wish to deliver to visitors. Hence, choose one whose arrangement will enhance and support your message.


Some types of website layouts are best used for showcasing products or works, making them more suitable for online stores or portfolio websites. Others convey factual information quickly and efficiently, and might work better for creating a blog or news platform.



Use common layouts


While there’s room for creativity, the most 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 existing expectations, past experiences and the principles of design.


Since a familiar layout will result in a more intuitive, easy-to-use interface, we’ve highlighted 10 of the most effective and widespread website layout ideas below. We’ll explain what makes them work and which type of website is the best fit for each.


The visual examples included are all website layout templates by Wix, fully customizable to match your style and needs:



10 best website layout ideas


  1. Z-pattern layout

  2. F-pattern layout

  3. Fullscreen image layout

  4. Split screen layout

  5. Asymmetrical layout

  6. Single column layout

  7. Box-based layout

  8. Cards layout

  9. Magazine layout

  10. 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 by spreading important information across a Z shape.


Using this layout, a logo is usually placed in the upper left-hand corner of the homepage, so that it registers first. Across from it, in the rightmost corner, it’s common to 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 that represents what the website is all about.


Toward the bottom of this Z-pattern, users should find your most important call-to-action (CTA). Whether you’ve been building up anticipation to purchase a product or book a service, now’s the time to get visitors on board and encourage them to take action.


This website layout idea is great for pages that are highly visual, and landing pages that serve a specific conversion purpose are usually a perfect fit.



Best website layouts example of z pattern layout


02. F-pattern layout


Much like the Z-pattern layout, this design is also based on a common page scanning behavior. With webpages 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 tending to serve as our focal point.


When using the F-pattern layout, make sure to invest resources on the top fold of your page, where visitors are likely to linger longer. This usually includes a headline, subtitle and featured image—content that can introduce the remainder of the site in a compelling manner. You can also include anchor texts to lead visitors towards information and a navigation menu to guide them to the parts of your website that are most relevant.


The vertical line of the F-pattern on the left-hand side of the page can help make the text more appealing. This can be done using imagery, icons, or with formatting elements such as bullet points or numbering.


An F-pattern layout is suitable 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.



best website layouts f pattern example


03. Fullscreen image layout


With an extra large visual placed front-and-center, a fullscreen image layout can result in an eye-catching and immersive homepage design. Large media features can convey a lot about who you are and what you do in as much as a glimpse. The great thing about this layout is that it looks great on mobile devices, too.


The visual you use can be anything from a photograph to an illustration or video. Either way, it should be high quality and relevant to your service, product or overall feel in order to take full advantage of this layout.


Your fullscreen image should also be 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, exciting visitors to explore more.


A fullscreen image layout is great for businesses that want to highlight a specific niche or product and who have great visuals in their arsenal of marketing assets. For example, photography websites will proudly reveal new series or styles of photographs for sale, while a wedding website can make a heartwarming impression with a photo of the happy couple.



fulls screen website layout example template


04. Split screen layout


By vertically splitting the screen down the middle, a split screen layout creates a perfectly symmetrical balance. This neat division into two parts allows for each section to express an entirely different idea—or alternatively, to support one 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.


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.



example of split screen website layout image of carrots on one side, text on the other


05. Asymmetrical layout


Similar to the split screen, this stylish 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.


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 in your own website layout, you’ll want to give certain elements more visual weight—making them bigger, bolder or brighter—so 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 call-to-action encouraging people to sign up. Then, make it stand out using high color contrast, enlarged proportions, and other types of visual emphasis.


An asymmetrical layout is ideal for websites that are going for the contemporary and innovative look, and are interested in driving user engagement. A business website or online portfolio of a design agency are good examples.



best website layouts example using assymetrical template


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).


Navigating a single column layout is easy —visitors immediately know to scroll down the page for more information. However, there’s one important website navigation tip to keep in mind using this layout:add a “Back to Top” button or a fixed 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, line breaks, headers or sub-headers. This is a great layout idea for long-form content websites, or websites that display content in chronological order— anything from blogs to social media feeds.



food blog template example of single column website layout


07. 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—resulting in 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 one large featured box to serve as your website’s header and tie different boxes together below. The featured box can include the page’s title and a brief explanation of its content, along with a menu for navigation. Another tip is to curate the visuals in each of the boxes so that they work together well, creating 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 images displayed, you’ll enjoy full control over your box-based layout, starting with the number of columns and rows, down to their size and spacing.


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 you can conveniently link each box of the homepage design so that it leads to a different project page.



box website layout example on art portoflio website template (with purple and yellow color scheme)


08. Cards layout


Much like the box-based layout, a cards layout uses multiple boxes or other rectangular-esque 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.


With all cards carrying identical features (in terms of size, font, etc.), it’s easy to import your content into each one. This results in a modular design that’s a good fit for all screen sizes, and allows for intuitive and approachable browsing despite the large amount of information, improving the user experience.


A cards layout is a great idea for a content-rich website, especially perfect for a vlog or online store.



example of cards website layout using online store template for beauty products


09. 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 lets you prioritize major headlines over smaller articles.


This can be done by playing with the size of your elements (larger images and headlines are the first to command our attention), 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, as mentioned earlier, 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.


The magazine layout is a fantastic choice for content-heavy websites such as news publications or blogs.



website layout news magazine example


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), the diversified composition builds user anticipation with a different surprise each time they scroll.


To make each strip different from the one before, try 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 effects like parallax scrolling on your strip, you’ll be able to infuse this layout with a sense of motion and depth in the website background.


This layout is particularly beneficial when it comes to one page websites, especially with long scroll designs.



website layout example with horizontal strips


By Jenna Romano

Web Design Expert & Writer


By Eden Spivak

Design Expert & Writer


Make_an_Impact_Online.png

This Blog was created with Wix Blog