Loading ...
9 Examples of Creative Use of Grids in Web Design
Grids 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.
Live in Montreal? Check out Montreal web design services by RPMstudios.
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.
Just a feeling? hehe
Good looking examples either way.
Should always have some sort of grid laid out for a design, in most cases..
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.
Pretty cool use of grids! I love #7 just because the colors are pretty refreshing and the site looks very much organized!
These designs shows some nice use of Grids, number 8 is my favourite.
i think i’d have to say i’m most impressed by the simplicity of the second one.
Such a cool list, beautiful grid work!
These are some great samples. Grid-based websites always look really nice, which is why I love using Grid 960 for my web projects.
thanks for sharing.
have been visiting ur site for several days. really like what you posted. btw i’m doing report about this area. do you happen to know any other good websites or perhaps forums that I can get more info? thanks a lot.
[...] http://divitodesign.com/inspiration/9-examples-creative-use-grids-web-design/ [...]
[...] http://divitodesign.com/inspiration/9-examples-creative-use-grids-web-design/ [...]
[...] Examples of the Grid [...]
[...] Benefits Of Slicing Images Principles Of Beautiful Web Design 9 Examples Of Creative Use Of Grids In Web Design Greek [...]
Great post. Thanks for sharing. I’ve bookmarked your blog and will be checking back for updates.
excellent examples of good collection of web pages, view the design of other very inspired us when designing our websites we posted …
Wow, they look stunning!
I’m quite inspired right now =]
Awesome. Made something nice?
I had a higher expectation of out-of-box grids layout before I entered, but nonetheless thanks
[...] http://divitodesign.com/inspiration/9-examples-creative-use-grids-web-design/ [...]
Great post. I suppose this is what they call grunge web design right? cipro
I’m no programmer but really learn a lot from this post. I’ve heard about using grids on web design before but I can’t apply it yet.
Blogspot Question: How can I make my current blog appear on my personal webpage?
Redirecting through 301; http://divitodesign.com/seo/redirect-search-engine-friendly/
Hello! Do you use Twitter? I’d want to follow you if that would be okay. I’m definitely taking pleasure in your website and look forward to new content.