Grid Style in Web Design with 30 Great Examples

Grid Style in Web Design with 30 Great Examples

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 with 30 Great Examples

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.

Ourhype
Ourhype

Chambers Judd
Chambers Judd

Superawesome
Superawesome

Tastespotting
Tastespotting

Sylvain Toulouse
Sylvain Toulouse

Kokori & Moi ( http://www.kokoromoi.com/ )
Superawesome

Mark Boulton design
Mark Boulton design

Jesus Rodriguez Velasco
Jesus Rodriguez Velasco

31Three
31Three

Macalicious
Macalicious

I am Shimone
I am Shimone

Ungarbage
Ungarbage

The morning news
The morning news

Hatbox
Hatbox

Teachinghistory
Teachinghistory

Shape creative and digital studio
Shape creative and digital studio

Bisgrafic
Bisgrafic

UX Magazine
UX Magazine

The grid system
The grid system

Andy Rutledge
Andy Rutledge

Jake Przespo
Jake Przespo

Busara
Busara

Quipsologies
Quipsologies

Designunit
Designunit

Moodyguy
Moodyguy

Mister ( http://www.studiomister.com/ )
Andy Rutledge

MCQ
MCQ

Best awards
Best awards

Cool and the guide
Cool and the guide

Velhetica
Velhetica

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!

Hilde is a Norwegian girl with a great passion for everything related to design, freelancing, PhotoShop, photography, Illustrator and more. Running her own website and work with mainly Graphic Design and Business Consulting besides article writing.

Comments

  1. / Reply

    beautiful showcase.

    • Tomh,
    • November 10, 2010
    / Reply

    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.

  2. / Reply

    Great examples

    Thanks Hilde

  3. / Reply

    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 :)

  4. / Reply

    thanks for that nice article , may be i will try any grid system in web design as i see it’s useful :D

  5. / Reply

    It was really excellent work! I just love it :)

    • paul,
    • November 11, 2010
    / Reply

    i like your designs, your putting something new in web designing industry. great work.

  6. / Reply

    Hi, I liked the presentation of this article, not just a showcase only…inspired me..
    Thanks..

  7. / Reply

    Really interesting collection! MCQ is my favorite one!

    • Buzz,
    • November 11, 2010
    / Reply

    Nice collection, i really like the Superawesome site… thanks!

  8. / Reply

    Here is my attempt: http://www.mushmoosh.com

    (a work in progress)

    :-)

  9. / Reply

    Kick ass collection, great stuff :) +1

  10. / Reply

    It a honour to be featured on this showcase !

    • Ryan,
    • November 12, 2010
    / Reply

    Great examples, thanks for showing these off!

  11. / Reply

    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.

    • joris,
    • December 22, 2010
    / Reply

    Great post,
    you forgot http://www.notcot.org and http://www.befashionlike.com

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.