10 Shining Examples of Grid Based Web Design and Best Practices

The grid is not just a cool-sounding word (why sci-fi loves it), but it’s also an incredibly simple and effective principle for website design. By sticking to a grid, you can make your website look sexy and clean, have it be highly readable, scannable, and navigate-able for your visitors (increasing their chances of returning), and make it easier on yourself since you’re following an existing framework when designing your website. To help with design inspiration, you’ll even get 10 shining examples of grid-based website design.

Before diving into the examples, you’ll get the best practices of effective grid-based website design. They are what was learned from looking at the 10 website designs – what makes a grid-based design effective. Of course, they’re not the only practices or rules, but they are a starting point if you’re just beginning to get into grid-based design.

Without further ado, here are the best grid-based design practices, followed by 10 shining examples of grid-based website design…

5 Best Practices of Effective Grid-Based Website Design

From analyzing the 10 shining grid-based website designs, here are 5 best practices learned in order to create an effective grid-based website design:

• 1. Limit the number of elements – this is forehead-slapping obvious, for sure, but bears repeating: the more elements, the bigger the clutter, so keep it easy for you and your visitors by reducing as much as possible.
• 2. Vary the sizes of each grid – monotony tires the eyes and makes nothing stand out, so include variety in the sizes of the individual grids (not so ones next to each other are varying, but the size of the individual grid boxes for each group of grids).
• 3. Vary the arrangement of grid sections – similar to #2: avoid monotony by having some grids expand vertically, others horizontally, some groups be forming a square, others rectangles, and so forth.
• 4. Don’t have each grid too close together (or too far apart) – the right spacing makes your website highly readable, navigate-able, and scannable, so feel it out when spacing the individual grid squares and grid sections next to each other (or ask others if it’s too close/far if in doubt).
• 5. Have a single big square or rectangle for the featured website element – continuing from #2, have the featured website element—the one you want to draw immediate attention to—big one single big square or rectangle, as this will make it stand out from a grid section that’s a similar size and shape but is broken up by a lot of smaller grid squares.

Okay, now onto the good stuff…

10 Shining Examples of Grid-Based Website Design

365Mag

The international electronic music magazine website manages to juggle a lot with a multi-column design, breaking each column down into square and rectangular grids. It’s an example of how a grid helps to keep a lot of content and information manageable for both the creator and the visitor.

Beatport

The design for electronic music’s most popular online store is literally a futuristic user interface – like some console. A huge amount of information is kept manageable, techno-looking, and fun.

Bleep

The design for Warp Records’ online music store is just like the music it stocks – slick yet quirky, futuristic yet classic, chin-stroking yet let-hair-down fun.

BPitch Control

One of Berlin’s top electronic record labels puts the focus on the artists and their latest releases in their website’s design. Like Bleep, the design reflects the futuristic yet classic aesthetic. Gotta love vectors.

BT

Another example of an effective artist site’s grid layout, this time for composer/electronic artist BT’s website. An awesome subtle touch: the “_BT” keeps things techno-futuristic without needing to resort to elaborate fonts or crazy visual flourishes.

Groove Armada

Groove Armada’s artist website does an excellent job balancing the flashiness with a user-friendly interface and useful content.

Kompakt

The Cologne, Germany-based electronic record label and shop not only uses a clean grid to arrange the content, but cleverly—not to mention cheekily—uses the grid for the navigation menu as well, having each of the pages be a record on a square.

Nine Inch Nails

Yet another example of an artist’s website using a grid layout effectively. The black-and-rust design immediately shows that NIN is darker, cinematic, industrial music.

Plaid

An effective website design with no menu items – nice. A no-nonsense 3 column layout gives you all you need to know about the duo: news/blog, when and where you can see them perform next, and what’s the latest stuff they released.

Warp

Warp Records’ home base balances the abstract and obtuse thanks to a grid-based design. Admittedly not the cleanest website out there, the design is featured here specifically for the aforementioned reason – it’s a good example of how a grid can be a foundation, keeping your website design grounded and easy-enough-to-navigate as you push the visual style to the experimental edges.

Clean Grid-based Website Design

These 10 examples have hopefully shown the advantages to having a grid-based website design. When done effectively, it looks clean and is highly readable, navigate-able, and scannable – great for the visitor, who will now more likely return for more. And it makes adding future elements easy for you, since you simply add some more individual grid squares to a section, or add a new grid section below or next to an existing one. No need to figure out some weird spacing or whatnot.

No go forth, and use the power of the Matrix- er, power of the grid, to create your effective and clean website design.

Over to you: Do you like designing grid-based websites? What effective techniques and tips have you picked up? Any websites that are your favorite examples? Feel free to share in the comments section below.

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →