9 Examples of Creative Use of Grids in Web Design
Written by Stefan Vervoort on January 11, 2010Grids are used in newspapers and book design, but also on the web. On the web however, grids are used differently. Web designers have a lot of possibilities to use the grid for ordering information and content.
For this reason, I have gathered 9 websites with grids used out-of-the-box to show you what is possible and what works best. Enjoy these websites!
1. Form+Logic is an identity studio whose website uses a nice grid to display their latest clients. By using enough space between the different projects, the layout appeals quiet and relaxing.
2. Max Voltar – the personal blog of Tim van Damme – just had a re-design. The new design features a sleek grid design for the homepage and a very smart sidebar.
3. Ate Bits is the home of three important products. These products are pushed forward by the great use of the grid in this layout.
4. Swish Life Magazine offers a somewhat classical grid, with a lot of content. The colors and whitespace used are perfect for an online magazine.
5. Art in my Coffee features a collection of “Coffee Art” in a graphical rich grid layout. The colors are well chosen and the listed photographs are beautifully designed.
6. These Software developers did structure their website correctly and know the way grids work on the web.
7. Kari Jobe is an Christian singer. The website features a grungy look fitting perfectly in the 3-column grid, which makes the site structured and clear.
8. The Versions website is there to sell the Versions app. All the information needed for potential clients is fit in a black and lovely-looking grid.
9. TracerMedia offers one product, and that’s featured before the fold. Under that, they explain a lot of information about their company in a lovely 5-column grid.
10. Great Works is a webdesign studio located at four locations, and that’s why the 4-column grid really works for this website.
This article is written by:
Name: Stefan Vervoort
URL: http://www.divitodesign.com
Description: I am a 18-year-old webdesigner and blogger from Waalwijk, the Netherlands. I also blog at WPTOY and work at DivitoMedia.
Loading ...
Great round up Stefan. I like the numbers 2 and 6 the most. But I can agree they are all good examples of creative use of grids.
Some great examples of how to use grids effectively in web design. Using grids is a technique which can be used in any type of design, “The constructive grid works as an instrument for
ordering typography and pictorial conception”, Brockmann.
Nice selection of sites, they really are stunning. Number 5 is my favourite, what a nice use of grids!
grids are especially useful in news website design.
Amazing how these “out of the box” items can have such a professional look and customized feel to them.
Grid is fundamental in any design. I can’t design without thinking about planning the grid first.
Yes it is. I can’t design without thinking of that either, but there are a lot of designers that doesn’t even know grids.
Greate article, I should probably use grid more myself. I really like the numbers 2 and 4
I have a feeling that some of those links are payed
~ K.
Nice examples, #2 does something for me…I can’t say what but it wins in my opinion hands down, not that this was a contest
Personally I don’t like the “block” look. I prefer a look that is more fluid.
I have never used such themes.
But they are good.
Nice use of grids, keep it up.
I thought php and wordpress blogs generally eliminated tables, i’ve always thought of them as being old fashioned and a thing of the past because of wordpress and new content management systems. Then again im not to up to date on coding. So no surprises I guess.
1 nifty trick to make your photos look great
The first one form logic has very nice look to it and probably is has the best Out of the whole list. The tracermedia also looks very professional.
Very cool! I have bookmarked this page so I use the help when working on my next grid layout! Thank you for sharing
I like the 8 bits or transition one. Although they are all very cool! Keep up the good work.
I bookmarked this link. it very helpful. i will design it for my blog. i like 1 n 2 most. they are revolution of Grid design. thanks for sharing
This is very helpful. thank you for sharing this post. I like the transition one.
Aw, this was a really quality post. In theory I’d like to write like this too – taking time and real effort to make a good article… but what can I say… I procrastinate alot and never seem to get something done
Great collection of designs.
Let’s dissect each example and see what is at work as far as grid is concerned. I’m wondering. You tell me.
What type of grid is the first example, form+Logic? Possible examples are root rects, Fibonacci Golden rects, etc.
I’m thinking that since this is a design firm, they know to stay within the grid, as opposed just putting three columns and letting them be expandable vertically, thus breaking the grid.
I’m using a measuring tool to do my analysis. What is everyone else using?
Any reason the designer picks this grid?
I look forward to what you folks have to say. Thanks!
very nice display, i think i’d have to say i’m most impressed by the simplicity of the second one.