Tutorial Blog

Grid systems in Web Design

March 6, 2007 by Oli · 23 Comments Post to TwitterPost to Yahoo BuzzPost to DiggPost to RedditPost to StumbleUpon




Every design you make should have a clear grid system whether its print or for the web because they help to organize information into a clear easy to follow layout. Here we roundup the best articles and resources on the subject..

Why use a grid ? – Introduction to grid systems

91.gif

Grid systems for web design – Grid king Mark Boulton takes you through the steps to creating a grid system for the web

112.jpg

Web Page Layout Grid – A downloadable image you can use as a background when designing your layouts

28.jpg

Columns and Grids – Article from Mezzoblue on various page layout grids

35.jpg

Design grids for Web pages – Web Style Guide to website grids

45.jpg

Thinking outside the Grid – Good article from Alistapart on breaking out from a clear grid

54.jpg

Grid Computing and Design – Article about the redesign of the excellent Subtraction blog

63.jpg

The Funniest Grid You Ever Saw – Another subtraction article about the redesign of Theonion.com

72.jpg

Grid-based design- Designing blog theme templates

84.jpg

Further Reading :

Grid Systems in Graphic Design – by Josef Muller-Brockmann

10.jpg

Making and Breaking the Grid – by Timothy Samara

113.jpg

Advertisement:
Nowadays many people are looking for home based business work. For these people the best idea can be internet hosting. Anyone having wireless internet router can do it easily. Along with hosting services, people should also resale expired domains. For this all they need is good IT knowledge like A+ certification. Along with it Microsoft certification can also prove very handy.



Comments

23 Responses to “Grid systems in Web Design”
  1. Zach Katkin - http://www.webdesignid.com/blog says:
    March 7, 2007 at 5:31 pm

    Good article, I think there needs to be more emphasis on grids in web design (especially on the lower end, amateur side) on the useful and necessary -ness of grids.

  2. Mac - http://www.userfriendlymyass.com says:
    March 7, 2007 at 6:06 pm

    This reminds me of the 1/3 rule in photography. Good stuff.

  3. Oli - http://tutorialblog.org says:
    March 7, 2007 at 6:50 pm

    Definately Zach, If a web designer gets the grid and typography right thats 90% of the battle.

  4. Jonathan - http://www.ginside.com/ says:
    March 7, 2007 at 11:18 pm

    It’d really be great if you offered full-text RSS instead of the partial-content feed. I just subscribed, but I’m a little disappointed and will probably unsubscribe if it stays as partial-content.

    Not to bash on your site, you have some great content, but I think you would be more successful if you provided full-content feeds.

  5. Oli - http://tutorialblog.org says:
    March 7, 2007 at 11:27 pm

    I did use to have full feeds, problem is the old scrapersites stealing my content. I have heard full-feeds encourage more RSS readers though, so I will give it another go….

  6. Lee - http://leenutter.com/ says:
    March 8, 2007 at 7:20 am

    I agree Jonathan, I signed up for the http://www.fullfeeds.com/ petition!

  7. Izmir Tasarim - http://www.pozitifweb.com says:
    May 31, 2007 at 11:09 am

    Thanks for useful informations.

    Best regards

  8. Stylish Web Design - http://www.alekhayes.com/stylish-web-design/ says:
    June 19, 2007 at 2:44 am

    Nice roundup actually… I’ve been using so-called grids in my head since I started web design in the 90s… It’s always tricky explaining to clients about it etc, but maybe a few prints from here will help. :)

    Thanks!

  9. suzie - http://www.tutsbuzz.com/de.html says:
    August 18, 2007 at 4:20 am

    thanks, like this site…

  10. shaz - http://www.miraztutorials.com says:
    September 22, 2007 at 11:44 am

    This is a new concept thanks great post

Tutorial Blog