In web design, presentation is everything. Of course, the quality of your content matters too, but customers will never fully appreciate your articles, products, or perfectly written services page if the first thing they see on your website is a chaotic mess. The way you structure your web pages makes a big difference, and some types of website layouts work better than others.
But the best web design layout guidelines change depending on your industry, branding, and technical capacity; it can be difficult to find the right layout for you. So below, we compile the 5 most common and most effective website layouts, with examples and expert tips to help you present yourself the right way.
1. Focus the spotlight on one aspect
—
Recommended for:
- landing pages that revolve around a single, high-priority call-to-action
- home pages that focus on a single image or call-to-action
- radial, circular, or spiral patterns
Our first web design layout guidelines are for simple pages that have one distinct part that requires all the attention. All other elements on the page are positioned to give focus to one main element, whether it’s a call-to-action (CTA) like an email signup or an image like a logo or product photo.
This type of website layout is typical for home pages and landing pages—the first thing the visitor sees is the suggested action or highlighted image, with everything else (including navigation menus) secondary. In Visuable Ltd’s above design for Angela Gorrell, the “latest lectures” is the central focus, based on its central location and the ample empty space around the button.
This style uses graphic design principles like leading lines, composition, utilizing empty space, and color contrast to attract attention to a singular element, making it perfect for pages with a singular goal to increase conversions. All secondary elements like additional text are positioned in a way to shift focus instead onto the main element.
For example, the above BedroomVillas design by Limuntus encourages people to enter their ideal destination and dates right away, with a relaxing visual to further entice visitors to their site. Likewise, Ananya Roy’s design for Copper Compass persuades visitors to sign up immediately with the fill-in form displayed prominently.
Both of these website layout examples use a similar strategy: offsetting the central focus with a boxed background of a contrasting color. The main CTA button is also offset with a strong, attention-grabbing color, such as a deep blue to stand out against the softer orange.
This layout style is also a good fit for radial, circular, or spiral patterns. In this case, you can arrange your secondary page elements around a primary element, such as a logo or other standalone image. Take a look at how the Wikipedia homepage arranges its language menu around its detailed logo, while still drawing attention to the search bar, its main CTA.
This layout style is also a good fit for radial, circular, or spiral patterns. In this case, you can arrange your secondary page elements around a primary element, such as a logo or other standalone image. Take a look at how the Wikipedia homepage arranges its language menu around its detailed logo, while still drawing attention to the search bar, its main CTA.
2. Highlight multiple options with an organized grid
—
Recommended for:
- ecommerce product catalogs
- large content galleries such as articles, blogs, or work samples
The spotlight layout works great if you’re only promoting one thing, but what if you want to promote a lot of things at once? For that, using an organized grid works best: you’re able to display multiple things at once and let your visitors browse for the one they’re looking for.
Grids typically make use of a design element called “cards,” which are like self-contained boxes that include all the necessary information. Usually, cards contain an interesting image, a title, and sometimes a brief textual description.
Moreover, cards and organized grid layouts are perfect for responsive design, giving them a huge advantage for mobile devices. Cards have excellent flexibility, so they’re easy to rearrange to fit any screen size no matter the device, as opposed to layouts with fixed dimensions that need to be resized for each new screen setting.
For ecommerce, like the Ninth Avenue design by ThyDesigns, cards also frequently contain the sales price. The online beauty store Bliss even includes the product’s rating to further help shoppers decide what to buy.
The downside to grids is that their look can be a bit boring, especially if there are a lot of cards to scroll through. You can liven up your grid layouts with a little creativity.
For example, the confectionary Bon Bon Bon foregoes lines so that each of their cards blend with the background and create a looser, freer feel. Some brands can even cross grids with an asymmetrical layout (explained below) for an edgier and more dynamic look.
You don’t need to be an ecommerce site to utilize a grid layout. Just look at the below site for the Brain Wellness Institute, designed by Smashing Boys. The site organizes their standard business pages like ‘Mission’ and ‘Services’, into an easy-to-read grid, including powerful imagery for each. This use of layout not only helps them stand out from other commercial websites, it also accents their business themes of stability and organization for mental wellness.
3. Make reading easier with Z-pattern
—
Recommended for:
- business websites
- pages designed to explain or introduce new ideas
The Z-pattern gets its name from the eye-tracking studies in the yesteryears of web design. By monitoring where people looked on a website, they found that most people look left-to-right in a row, then move down and start a new row left-to-right.
When visualized, their eyes seem to trace a letter Z, over and over again from the top row to the bottom row. It mimics our eye movements reading, where we read left-to-right, and when we finish a line we move down to the next line, starting at the left again.
Web designers found that they can take advantage of this natural eye pattern by designing web page layouts accordingly. Information is displayed in a row left-to-right, and then there’s a small “pause” between rows as the user looks downwards to start a new row. It works well as an organic method for breaking up information into small, digestible bits.
There are different strategies for separating rows, depending on your own personal style. Denisa M.’s design for Silex couples images with text in each row, but alternates which side the text is on make the page more dynamic. The web app design by KR Designs takes a similar approach, although they change up what kind of information goes in each row to keep the visuals interesting.
Alternatively, you can differentiate what goes into each row and still maintain a Z pattern, as long as the visitor continues to read left-to-right before moving down. DSKY’s design for Figgy & Plum breaks up rows by changing the background color on top of changing how the content is displayed. Mica Porto’s design for DirectNine sets up each row differently so that it’s clear where the breaks come.
4. Encourage browsing with a single column
—
Recommended for:
- social media and forum sites
- long-scroll business sites
- pages with lists like notifications or messages
Another common type of website layout is the single-column site, popular on most social media sites like Twitter, Instagram and Facebook for facilitating browsing over long periods of time. If you don’t like one piece of content, just keep scrolling to the next one! It’s such a simple mechanism, but works wonders by entertaining people for hours.
The standard procedure is to list content vertically via cards, with only one fully visible on the screen at a time. This encourages users to focus on one piece of content at a time, without overwhelming them. It also makes responsive design easier since all cards use the same width, so you don’t have to worry too much about what devices visitors are using.
The layout worked so well for social media that it’s since been co-opted by businesses and commercial sites. While these sites don’t display cards of posts, they still break up their content into individual screens that are only visible one at a time. This allows businesses to communicate what they want (who they are, what they do, why you need them) without overwhelming the visitor.
The TheraVape site designed by arosto and the Tu Biomics site designed by Yagnik K. are both excellent examples of how to use this layout for business sites. Both sites break up their text into small, easy-to-read passages, and then separate these passages with background changes and different visuals. This lets visitors take in the points one at a time, enhancing memorability and recognition later.
Business sites can take this layout a step further by unifying each piece of content with a connective visual. Matt Brown’s portfolio site, designed by 2ché, uses a science theme, so the connective visual is a lab pipe that runs through each different lab equipment at each stopping point. Designer Tushar K∎ uses a similar technique for the 2bak website, connecting each image with a stylized road, complete with miniature vehicles.
5. Stand out with asymmetrical layouts
Recommended for:
- edgy or cutting-edge brands
Finally, we end with a type of website layout that eschews organization and embraces chaos. Asymmetry, by definition, creates an atmosphere of intentional imbalance or disarray. It’s a poor choice for traditional and highly formal brands, but for brands that want to come across as edgy, counter-cultural, or ahead-of-their time, it’s the perfect match.
For example, look how the New Yorker organizes the news stories on their home page. The New Yorker has a branding reputation as “alternative” mainstream media (despite its popularity), and so the asymmetrical layout helps build the atmosphere it’s going for.
Smaller businesses that want to stand out can also take advantage of this layout style. Both arosto’s design for Agency X and Infinityデザイナー’s design for Si Vales Valeo use the same method—a meaningful hero image in the background, with asymmetrical diamond patterns overlaid on top. This makes their brands come across as cutting-edge and modern, even if it doesn’t appeal to more conservative-minded visitors.
The Geo Waves layout, designed by Adam Muflihun, takes a unique spin on the asymmetrical layout by adding animated effects. The static layout itself is asymmetrical, with a large block on the left and two smaller blocks on the right. By adding animation and moving effects in different places and at different times, it makes the entire page seem more vibrant and alive. It’s just fun to watch, and that’s a major appeal in any website design.
Types of website layouts for different needs
—
There’s no one “best” type of website layout; the right one for you depends on your goals and branding. Consider how much content you have to display; smaller sites can get away with the spotlight or Z pattern, but if you have a lot to say you might want to use a grid or single column. Your branding personality, too, should determine not only the layout but the style you use with your layout.
If you’re having trouble deciding, try browsing online and make a note of which layouts are used by the sites you like. You might find you’re particularly drawn to one type more than the others, and maybe your target customers will be as well.
