Skip Navigation
Madison, Wisconsin
Powderkeg Web Design
November 4, 2013

6 Examples of Grid-Based Websites

Brittany
Brittany
6 Examples of Grid-Based Websites

When designing a website, structure is crucial. Having “good bones” will organize content in an intuitive way and provide consistency throughout the whole website. It will also, surprisingly, provide flexibility down the line for making changes and updating content. The ultimate example of a website with good structure is one with a grid-based layout. Take a look at the examples I have below:

 

Dynamit

 

Dynamit

This did layout incorporates a little bit of everything from their studio – portfolio samples, Instagram photos, employee information and more. You get a quick snapshot of what they are all about and the  grid layout provides flexibility for mixing all of these elements together.

 

 

42 Angels

 

42Angels

The grid structure on their home page includes a mix of text, photos and graphic in a modern, organized way. If you explore the rest of their site, you’ll see this carried throughout.

 

 

Mercer Tavern

 

MercerTavern

The overall design of this site incorporated modern and vintage in a really great way. The layout, the typography, the illustrations, the colors – all neat and clean. If you take a closer look, you’ll see that they are including a lot of information on the homepage, but the grid organization helps it not seem so overwhelming.

 

 

The Hungry Workshop

 

TheHungryWorkshop

While the last example of a grid layout showed how it helped the neat and clean appearance, it’s a little different for this one. Yes, it’s neat and clean, but the effect is different because the images are so vibrant and colorful. The structure provides such a great opportunity to showcase a ton of their work in a small space while providing an over-arching mood when they are all combined.

 

 

Where They At

 

WhereTheyAt

Same kind of concept as the last two, different mood entirely. The mouse-over effects make this site fun to interact with!

 

Faebric

 

Faebric

What more is there to say? I think Faebric does a great job of utilizing the grid.

—-

What do you think of the grid layout concept? I know I’m sold!