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
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.
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.
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.
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.
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’s artist website does an excellent job balancing the flashiness with a user-friendly interface and useful content.
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.
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 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.
- Using Images to Enhance the CSS Hover Effect
- Out of the Way: Corner Navigation in Web Design
- 10 Beautiful Examples of Illustration in Web Design
- The Beauty of Ultra-Minimal Web Design
- How Close-Up Portraits Bring Humanity to Web Design
- 8 Fantastic Examples of Isometric Illustrations in Web Design
- Using ‘Spotty’ Backgrounds in Web Design to Grab Attention
- 20 Creative Examples of Pricing Page Web Layouts for Inspiration