Website layout ideas and examples

Building a website(opens in a new tab or window) can be nerve-wracking. Underneath all the design decisions that you have to make, is something even more important: your website’s layout.

Your website 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(opens in a new tab or window), according to visual designer and art director Antonio Pratas(opens in a new tab or window). He argues that a handful of recognizable web layouts have become standard because they’re functional, and users automatically understand how they work.

In this article, we’ll be looking at seven website layout examples that are practical, yet versatile enough to adapt to different needs and visual styles.

01. Freeform grid

Screen Shot 2016-02-15 at 12.48.19 PM

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(opens in a new tab or window), 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.

This first example, a website concept(opens in a new tab or window) from Jonas Emmertsen(opens in a new tab or window) and Henrik Ellersgaard(opens in a new tab or window), has been laid out using a grid (see image to the left), but the divisions in the final design aren’t predictable.

The elements that make up the grid vary in shape and size, creating a visually interesting arrangement.


Jonas Emmertsen and Henrik Ellersgaard

Andrei Hancu(opens in a new tab or window)’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(opens in a new tab or window) 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(opens in a new tab or window)’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:



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.

Trefecta’s website(opens in a new tab or window), developed by Build in Amsterdam,(opens in a new tab or window) features a traditional left-hand sidebar with the company’s logo and a simple menu:



This website for an event and party styling company, designed by Promise Tangeman(opens in a new tab or window) (with lettering by Lindsay Letters(opens in a new tab or window)), features an angled sidebar with custom embellishments for a more artistic take on this type of layout.


Fresh Ink

Fabrique(opens in a new tab or window)’s design for the Van Gogh Museum(opens in a new tab or window) 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(opens in a new tab or window) 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(opens in a new tab or window)’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(opens in a new tab or window) features a colorful checkerboard menu centered around a logo:

Screen Shot 2016-02-15 at 2.05.44 PM

Hamza Ishaq

Jake Ranallo(opens in a new tab or window)’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(opens in a new tab or window) 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.


Honest Bear

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(opens in a new tab or window)’s take on this style for Parcours Canada(opens in a new tab or window), 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(opens in a new tab or window) 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(opens in a new tab or window)) features clearly defined columns with uniform shapes, interrupted by occasional full-width elements for some variety:


Hekbak Ceramics

Get Bowtied(opens in a new tab or window)’s e-commerce website theme(opens in a new tab or window) 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.


Get Bowtied

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(opens in a new tab or window) has done that for its app’s website, showing how the app itself works with a series of animated screens:







JP Teixeira(opens in a new tab or window) 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.


JO Teixeira

JJ Lee(opens in a new tab or window)’s design also uses product photography to create multiple focal points:


Passion Bicycle

In contrast, this website template(opens in a new tab or window) by Glenn(opens in a new tab or window) is built around a single focal point, which makes sense for a site designed to promote an individual like a singer or other artist.


Template Monster

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(opens in a new tab or window)’ portfolio website is a typical example, with bold typography and a selection of projects:


Eduardo Nunes

Bonhomme(opens in a new tab or window) 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(opens in a new tab or window) 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(opens in a new tab or window) features pops of neon blue and a gallery that’s a continuous grid of images instead of evenly spaced photos:


Sylvia Prats

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(opens in a new tab or window)’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(opens in a new tab or window) 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(opens in a new tab or window)’s design for Sodigital(opens in a new tab or window) layers modules on top of photography and also features interesting uses of color and transparency for a twist on the modular layout.



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.

Related articles

See all

Bring your ideas to life in minutes

Express yourself with the world's easiest design program.