Grid Style in Web design is a way of keeping calm in the middle of all the chaos on the Internet highway. In this article we'll be having a look at what this style is, how it's done and get some nice examples to illustrate.
Grid Style in Web Design
What Is It?
Basically this style means that you divide your website into grids (of different sizes according to your taste), and that way you're getting more of a system. Make horizontal and vertical lines that intersect at given intervals and you have the basic concept.
Looking back in history this style has been used since the 1930's in print and typography, but it has just become popular in web design the recent years. On of the more popular grid-types is the 360 and Blueprint.
Why Would I Want One?
By using a grid system you will most likely get a better look, it will be easier to structure your content and do enhancements later on. While some people feel that this puts a lid on creativity, it's important to understand that you can still have many creative choices even if you're using this system. New visitors to your site are more likely to find it easier to both navigate and absorb your featured information.
How Do I Do It?
As with all design, you should start by making a sketch/mock-up of what you're going for. When going for a grid system you set up the mathematical aspect before considering the actual aesthetics. Obviously your content will come into play from the beginning, as you'll want a grid that supports what you want to communicate. The whole process can be quite an amount of work and calculations, but you will get a result that looks tidy and gives a clean look.
30 Great Examples of Grid Style in Web Design
Here we've collected some examples of websites that use some form of grid styled layout. As you can see there are many ways of doing this, and it gives a cleaner and more professional look compared to many other sites out there.
Kokori & Moi ( http://www.kokoromoi.com/ )
Shape creative and digital studio
Mister ( http://www.studiomister.com/ )
We hope you've enjoyed our picks and seen that this style has a lot of possibilities and usually leaves a clean and professional look. There aren't any rules for how you have to fill up your grid, it's all about keeping what you have in a system.
Want to Learn More?
If you find this topic interesting and want to learn more about it, we have collected some resources for you to start out with here:
- Designing with grid-based approach - This article was written a while back, but is a great place to read more and also learn a few things about this style that you didn't know already.
- Grid-based design 101 - Another great take on this style. Great to read for those that aren't necessarily into reading lots and lots of pages on the topic.
- Developing the grid that supports your design - Good little article showing some examples of how you can calculate your grid and set it up.
- The Grid System - Great resource for articles, tutorials and more. A must for designers that are interested in the grid style!
Now, What's Your Opinion?
We hope this article has helped you a bit in understanding what this style is about, given you some great examples to be inspired by and provided some resources that can help you further. As usual we'd love to hear your comments!
beautiful showcase.
A great website with a grid design and a great resource for web designers and developers is VisualWebBlog. It's graphical grid design makes it intuitive to browse and search for relevant articles.
Great examples
Thanks Hilde
These are all great, but I have always been a big fan of Velasco's design... I'm trying to look up more sites for inspiration that use a grid and don't come off as blocky or geometric :)
thanks for that nice article , may be i will try any grid system in web design as i see it's useful :D
It was really excellent work! I just love it :)
i like your designs, your putting something new in web designing industry. great work.
Hi, I liked the presentation of this article, not just a showcase only...inspired me..
Thanks..
Really interesting collection! MCQ is my favorite one!
Nice collection, i really like the Superawesome site... thanks!
Here is my attempt: http://www.mushmoosh.com
(a work in progress)
:-)
Kick ass collection, great stuff :) +1
It a honour to be featured on this showcase !
Great examples, thanks for showing these off!
Nice samples for grid design in a web page designs. This will be very helpful for the people who were the professional designers. And the designs showcased were really nice & also impressive. Thanks for showing these examples. Congratulation for this sweet list.
Great post,
you forgot http://www.notcot.org and http://www.befashionlike.com