Is your website layout doing more damage than you think?

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.

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.

Jonas Emmertsen and Henrik Ellersgaard

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.

Andrei Hancu

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.

Your Local Studio

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:

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.

Fresh Ink

Fabrique’s design for the Van Gogh Museum includes a brightly colored sidebar with a subtle texture in the background. The larger size leaves room to place some copy, as well as menu buttons.

This layout’s flexibility allows the museum to change the featured imagery and colors to match changing exhibits:

Van Gogh Museum

Van Gogh Museum

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.

Kelli Murray

03. Text-based

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:

Impossible Bureau

Next up, The Minimalists’ website by Hamza Ishaq features a colorful checkerboard menu centered around a logo:

Hamza Ishaq

Jake Ranallo’s design punches up the text by including some hand-drawn style fonts and adding some icons and pops of color:

The Means

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.

Locomotive’s take on this style for Parcours Canada, a travel website, features some layering and overlapping of design elements for an almost collage-like feel:

Parcours Canada

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:

Aude Degrassat

Aude Degrassat

Aude Degrassat

This site (designed byRobert Larsen) features clearly defined columns with uniform shapes, interrupted by occasional full-width elements for some variety:

Hekbak Ceramics

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:

Ginventory

Ginventory

Ginventory

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.

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:

Eduardo Nunes

Bonhomme takes a similar approach, with the addition of an image sidebar that rotates through close-up shots of different projects in the gallery.

Bonhomme

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.

Shellshock

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:

07. Modular

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:

Good Mens Goods

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.

KAE Brand Identity

KAE Brand Identity

KAE Brand Identity

KAE Brand Identity

Lastly, Adam Bałazy’s design for Sodigital layers modules on top of photography and also features interesting uses of color and transparency for a twist on the modular layout.

Sodigital

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.