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!
