Building a website can be nerve-wracking.
Underneath all the design decisions that you have to make, is something even more important: your website’s layout.
The layout provides a framework that structures your site in a way that makes sense, is easy to navigate, and lets your content shine. But if you spend any time at all online, you’ll have noticed that many websites look similar — due to their layout.
This isn’t necessarily a bad thing, according to visual designer and art director Antonio Pratas. He argues that a handful of recognizable web layouts have become standard because they’re functional, and users automatically understand how they work.
But just because you’re using a common framework doesn’t mean that your site has to look like everyone else’s. In this article, we’ll be looking at seven layouts that are practical, yet versatile enough to adapt to different needs and visual styles.
01. Freeform Grid
Most websites are designed using some sort of grid to ensure that things like spacing and alignment are on point. Using a grid can most certainly improve your designs, but certain grid arrangements have been overused or are simply too limiting.
This is where a freeform grid can come in handy. It’s usually not bounded by any lines or containers and features plenty of white space for a clean, modern look. This framework offers a loose, flexible structure that can be adapted to fit the site’s content.
Instead of being limited by one type of grid unit, this type of layout might mix and match different sizes and shapes like puzzle pieces, combine multiple units into one, or even leave parts of the grid blank.
The elements that make up the grid vary in shape and size, creating a visually interesting arrangement.
Andrei Hancu’s design for an online furniture shop is even less structured. You can see some organization based on geometric shapes, but not everything aligns perfectly.
Particularly on the top half of the page, the product images seem to float off by themselves in a freeform pattern. This, along with the vibrant colors, makes that section extra eye-catching.
The portfolio website of Your Local Studio is very minimal, featuring a menu of images that reveals textual descriptions only when you mouse over them.
There’s an invisible dividing line that stretches vertically down the center of the layout to give it some structure, but some images extend over the line or shift to either side of it in different ways.
BASIC’s website, on the other hand, mixes things up by varying the height of its grid rows, as well as the number of units in each row:
To learn more about the benefits of designing with a grid, take a look at 15 Reasons Why A Grid Based Approach Will Improve Your Designs.
02. Fixed Sidebar
Navigation is an important part of any website—and the menu is the first thing most users look for. One of the most common ways to keep a menu in sight is placing it in a fixed sidebar.
That means that even while you’re scrolling through the rest of the website’s content, the menu stays stationary and always visible.
Sidebars can also contain content other than or in addition to a menu, perhaps social media links, contact information, or anything else that you want to visitors to find easily.
This website for an event and party styling company, designed by Promise Tangeman (with lettering by Lindsay Letters), features an angled sidebar with custom embellishments for a more artistic take on this type of layout.
This layout’s flexibility allows the museum to change the featured imagery and colors to match changing exhibits:
Kelli Murray designed the blog section of her website with a versatile and non-traditional sidebar that contains multiple separate sections.
In addition to a typical menu of post categories, it includes imagery, items from her online shop, links to other areas of the website, subscription options, a search bar, and more. The nice thing about a sidebar is that it can be whatever you need it to be.
For a simple, no-fuss approach to laying out a website, some designers opt for a primarily text-based design. This type of design is typically light on imagery with a black, white, or solid-colored background.
The overall effect can be clean and minimal, but the typography is typically on the larger side and has some character to prevent the design from looking flat and uninteresting.
Here, Impossible Bureau’s homepage features large, sans-serif text against a black background, but for a nice visual surprise, the columns light up with a vibrant gradient when you select one of the menu options:
Next up, The Minimalists’ website by Hamza Ishaq features a colorful checkerboard menu centered around a logo:
Jake Ranallo’s design punches up the text by including some hand-drawn style fonts and adding some icons and pops of color:
Lastly, this website for an email marketing company designed by Michael Maguire uses a simple homepage setup that emphasizes the “mail” in “email” and features type, color coding, and simple animations for an unexpectedly engaging yet simple site layout.
04. Two Columns
Since almost all websites involve vertical scrolling, it’s important to consider how your content will display in that direction. For a versatile framework, try arranging your content into two columns.
This allows you to take advantage of both horizontal and vertical layout techniques while keeping your content well organized.
In contrast, this personal project from Aude Degrassat has been constructed using a distinct grid of both columns and rows that keeps its shape, while the content shifts as you scroll down:
This site (designed by Robert Larsen) features clearly defined columns with uniform shapes, interrupted by occasional full-width elements for some variety:
Get Bowtied’s e-commerce website theme features a number of layout options, one of which is a two-column grid featuring large images. The responsive design offers a flexible arrangement that adapts to the device it’s being viewed on.
05. Arranged Around Focal Point(s)
Most designs benefit from a clear focal point. Whether an image, typography, or something else, a focal point gives viewers a place to start exploring your design and often points out important information.
But it can be tricky to effectively use focal points in web designs when so many sites are content-heavy. Let’s look at some designs that have managed to pull it off creatively and effectively:
For a website designed to showcase a product, it makes sense to make that product the center of attention. Ginventory has done that for its app’s website, showing how the app itself works with a series of animated screens:
JP Teixeira has taken a more static approach to his design for a fast food restaurant by placing a focal point in each horizontal section of the site. The typography has been arranged around the shape of the food photography to direct your gaze to each point.
JJ Lee’s design also uses product photography to create multiple focal points:
We’ve discussed the importance of focal points and other basic design principles in 12 Ways Designers Know When a Design Looks Good – And How You Can Too.
06. Headline + Image Gallery
This layout is kind of a combination of a text-based design and a basic grid. It’s a popular one for portfolio or e-commerce websites and usually features some sort of large headline at the top — perhaps an “about me” type of statement or a business description — followed by a gallery of images, usually something like a selection of featured work or product photos.
Eduardo Nunes’ portfolio website is a typical example, with bold typography and a selection of projects:
Bonhomme takes a similar approach, with the addition of an image sidebar that rotates through close-up shots of different projects in the gallery.
Design agency Shellshock mixes things up for its own site by including two galleries and adding extra information about the company in the form of text and icons to break up the imagery.
The “Hello” headline that you see here is an approach that has been popular for this type of website to project a friendly, relatable tone.
Another portfolio site from Sylvia Prats features pops of neon blue and a gallery that’s a continuous grid of images instead of evenly spaced photos:
Our last layout category is one that’s become increasingly popular thanks to the adoption of Google’s material design principles.
Modular layouts (also sometimes referred to as card or block layouts) are different than your typical grid in that every area of the site is enclosed in a container (or module).
This gives each design element a distinct space and often creates a streamlined look. As responsive design has become a must for websites, designers turned to modules as a format that could transform to fit different display methods.
Here, Great Simple’s design for an online menswear shop takes this trend in an visually engaging direction with a mix of typography and imagery:
The folks at SocioDesign took a similar approach in their designs for a marketing consultancy, extending the modular concept across multiple pages of the website, as you can see below. Though the layouts of the pages vary, they’re united by a neutral, sophisticated color palette.
And That’s a Wrap
Recognizable website layouts don’t have to be boring — we hope these examples have shown how they can be used in interesting and creative ways. Do you have a versatile layout that you like to use that wasn’t covered here? Feel free to share in the comments.