As of the most recent alteration, this entry is current as of 19 December 2021.
The information in this thread was last revised on December 19, 2021.
One of the first things to do when making a website is to settle on a good layout. A website’s layout, which serves as its framework, can significantly affect how accessible and user-friendly your site ultimately is.
This post will give you 10 website layout ideas to help you get it right the first time, ranging from asymmetrical designs to classic patterns and split screens.
What is a website layout?
The layout of a website is the planning and placement of its visual elements. Page elements can have their relationships influenced for the better through strategic placement. A website’s aesthetic balance, the order in which page items are perceived by visitors, and the focus of individual visitors’ attention are all outcomes of the layout. Having a well-designed website layout can improve both the site’s message and its usability.
Simply put, a well-designed website may guide users’ attention in the appropriate direction, drawing it first to what’s most important and then moving on to the subsequent sections in descending order of importance. As a bonus, you can use a layout to demonstrate your familiarity with modern web design practices while simultaneously improving your design and fostering engaging user interactions.
How to choose the right website layout
There are two primary considerations to make when settling on a design for your website’s layout:
Don’t be afraid to adjust your material
Your material will determine the best possible format for your work. Why? To convey the message you want to convey to visitors, your website’s design needs to aid in doing so. Pick one whose structure complements and strengthens your argument.
When it comes to displaying goods or works, certain website designs are better suited to e-commerce or portfolio sites. Some are more suited to producing a blog or a news site because of the efficient and succinct way they present information.
Apply standard formats
Website designs can be creative, but in most cases, it’s best to stick to the standard fare. Users are more likely to feel at ease when using these tried-and-true designs, as they are based on established conventions and design tenets.
All of the screenshots are based on Wix website layout templates, which may be modified to fit your specific requirements and aesthetic preferences.
10 best website layout ideas
- 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 we come across a new website, we scan it to get an overview. Skim reading, also known as scanning, is a style of rapid reading in which the reader makes a zigzag motion across the text. Our gaze travels from left to right across the screen, then down to left, and back to right. Z-pattern web design makes use of this pattern of scanning by dispersing key details throughout a Z-shape.
It is common to practice positioning a company logo at the top left corner of the homepage in this style, where it will catch the eye immediately. Right next to it, in the upper-right corner, most websites put their menu bar and an obvious CTA.
The most important details should be presented along the diagonal of the Z-pattern, which runs from top to bottom of the page. Attractive images and a single, clear sentence summarising the site’s purpose can help accomplish this.
Your primary call to action should be located at the base of this Z-shape (CTA). Now is the time to get visitors on board and push them to take action, whether they have been contemplating making a purchase or booking a service.
Website landing pages with a focused conversion goal benefit greatly from this design concept.
02. F-pattern layout
Similar to the Z-pattern layout, this one takes into account how readers often skim web pages. We skim or read in an F-shape across the text on more word-heavy websites. This means that we focus primarily on the left half of the page, although we do spend some time scanning the top of the page horizontally.
Using the F-shape layout, focus your attention and resources above the fold, where users will spend the most time. A compelling introduction to the rest of the site often consists of a headline, subtitle, and featured image. Anchor texts can direct readers to certain sections of your site, and a menu can help readers find exactly what they’re looking for.
The F-vertical pattern’s line on the left side of the page can make the text easier on the eyes. Images, icons, and list formats like bullets and numbers are all useful tools for this purpose.
In general, an F-pattern design works well for content-heavy websites. This website design can be used for both the main page and individual blog posts when making a blog, for instance.
03. Fullscreen image layout
Full-screen picture layouts can make for captivating and immersive home page designs by featuring a large, central vision. Massive media features can tell an audience a lot about you and your accomplishments with just a glance. This design is fantastic because it adapts well to mobile viewing.
Any type of visual, from a photograph to an image or even a video, can be used as a visual aid. You may make the most of this format by using high-quality images and text that speak to your business, product, or general vibe.
A line of text next to your full-screen image that summarises the site’s purpose is essential. Develop an engaging header or motto to explain your business’s offerings and entice site visitors to read further.
If you have fantastic graphics to promote your brand and a certain specialty or product, a fullscreen image layout is a perfect choice. For instance, a photography website might flaunt its latest series or style of images for sale, while a wedding website might use a picture of the newlyweds to win over visitors’ hearts.
04. Split screen layout
A split screen layout achieves this symmetry by splitting the screen vertically down the middle. This clean split in two allows for each component to represent a different thought, or to provide support for the same idea from two perspectives.
Here, we see a website layout sample that features an enticing visual depicting a dining experience on the left side, with accompanying text and vector artwork on the right. The design allows for the two sides to mutually benefit from one another rather than struggle for the spotlight. Similar layouts can be effective when users are presented with polarising options, such as when browsing an online store’s “Men’s” and “Women’s” sections.
Use motion by making each half of the screen do something somewhat different to make the most of the split screen arrangement. Parallax scrolling effects, for instance, could be used on one side of the screen only. You could also continue this format across the second fold of your design, but switch the content on the left and right sides of the screen to increase the aesthetic variety.
Websites that have two distinctly different kinds of material, or that wish to evenly balance textual information and visuals, can benefit from a split-screen design. This design works well for e-commerce websites that offer discounts to customers based on their age, gender, or past purchases.
05. Asymmetrical layout
This fashionable website design utilizes a split-screen format in which the website’s composition is split in two, although in this case, the two halves are not of equal size and significance. This uneven distribution of weight lends the overall composition a sense of motion and vitality.
You can emphasize certain parts of a page over others by using a non-standard scale, color, and width distribution. To accomplish this, you should emphasize key aspects by making them larger, bolder, or brighter in your website’s layout.
Decide what inside your material you want to stand out. Whether it’s a picture of the product itself or a call to action to get them to join up, everything goes here. Then, draw the viewer’s attention to it by using techniques like using contrasting colors, making it bigger than life, etc.
Websites that are going for a modern and unique look and are hoping to boost user engagement might benefit greatly from an asymmetrical layout. Examples include a company’s official website or a design firm’s online portfolio.
06. Single-column layout
The entirety of this site’s material is presented in a single, vertical column. It’s an uncomplicated layout (like the one used for this page) that anyone can understand and put to use.
When presented with a single column, users know exactly where to look for additional content: below the fold. One crucial navigational consideration to keep in mind while employing this layout is the inclusion of a “Back to Top” button or a permanently displayed menu.
Use images, line breaks, headers, and sub-headers to break up the content on a single-column layout for sites with a lot of text. Any website that displays its content in chronological order, from blogs to social media feeds, would benefit greatly from adopting this design principle.
07. Box-based layout
Site content is often combined into one cohesive geometric shape using a box-based or grid-based layout. With everything contained in its little box, the various parts don’t compete for attention and the whole thing ends up looking more polished and professional. Users can click on any box to be taken to a specific webpage devoted to that topic.
The best way to unify the various boxes on your site is to include a large featured box as the header. You can include a menu and a short description of the page’s content in the featured box. Another piece of advice is to make sure the images you use in each of the boxes complement one another and present a unified brand.
Wix’s Pro Gallery is a fantastic tool for achieving this look while developing a website with Wix. You may modify every aspect of the box-based arrangement, from the number of columns and rows to the size and spacing of the individual boxes, and all while seeing high-quality photographs.
A fantastic design for a site with numerous vital pages. For a graphic designer’s portfolio, for instance, it’s a practical answer because each homepage box may be linked to a separate project page.
08. Cards layout
A card layout, like the box-based style, makes use of several boxes or other rectangular-shaped containers to showcase a variety of information. The website’s layout is mostly non-hierarchical, which means that nothing is given more prominence than anything else and all content is given equal weight.
Since all the cards are the same (in terms of size, font, etc.), copying and pasting your text into them is a breeze. The resulting modular layout is suitable for usage with a wide variety of display sizes and makes it easy to navigate even though there is a great deal of content.
Any website that has a lot of content, like a vlog or an online store, would benefit greatly from a card style.
09. Magazine layout
Taking cues from traditional newspaper layouts, the magazine’s online home features a multi-column grid that establishes a sophisticated hierarchy of visual elements. Individually modifiable containers in a magazine layout allow you to give more prominence to large headlines while yet giving adequate space to tiny content.
You can achieve this by varying the size of your elements (bigger photos and headlines are the first to capture our attention), moving them about the page (the article at the top of the page is usually the first to be read), or by providing more or less design information (an article with an added photo draws more focus than one with just plain text).
To accommodate readers’ decreased attention spans, the magazine layout follows the F shape skim reading pattern, as was explained above. The F-pattern, when combined with a more complicated grid, facilitates the division of enormous amounts of data into manageable chunks that are easy to read while yet maintaining a feeling of order and a minimal aesthetic.
Websites with many articles, like newspapers or blogs, benefit greatly from the magazine design.
10. Horizontal strips layout
This design divides the long scroll of the page into full-width sections. Each strip can be thought of as a fullscreen or near-fullscreen fold, and the varied composition creates suspense by promising something new with every page turn.
To make each comic strip unique from the rest, try using graphics in some panels while focusing on text for others. You may give this design a sense of motion and depth by using effects like parallax scrolling on your strip in the website’s background.
Having a single-page website with a long scroll design is a perfect application for this design.
