65 Resources for Grid-Based Design

Resources for Grid-Based Design

Grid-based design is obviously a popular approach in modern web design. For designers that use grids, this post includes links to useful tools that can improve your efficiency and effectiveness, as well as some articles for advanced techniques. For those of you who are not as familiar with the details of grid-based design, there are plenty of articles and learning resources here.

Articles:

Grids Are Good – Presentation in a PDF document

Grid (page layout) – Wikipedia

Why Use a Grid – Mark Boulton

5 Simple Steps to Designing Grid Systems: Preface – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 1 – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 2 – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 3 – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 4 – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 5 – Mark Boulton

Feeling Your Way Around Grids – Mark Boulton

Oh Yeeaahh! – Subtraction

The Funniest Grid You Ever Saw – Subtraction

Grid Computing… And Design – Subtraction

Grid-Based Design 101 – Most Inspired

Grid-Based Design: Six Creative Column Techniques – Smashing Magazine

Using a Background Image Grid to Layout Your Website – Smiley Cat Web Design Blog

Thinking Outside the Grid – A List Apart

Setting Type on the Web to a Baseline Grid – A List Apart

Columns and Grids – Mezzoblue

Grid Design, A Classic Beauty for Whitespace Freaks – Wisdump.

Design Grids for Web Pages – Web Style Guide

Grid Tips for Photoshop Users – Made by Elephant

Grids: an Invisible Foundation – Ideabook.com

Using Spreadsheets to Brainstorm Grid Layouts – The Design Canopy

Grids Make Eyes Happy: How to Use Grids – CROWDCTRL

Grids: Show ‘Em if You Got ‘Em – Apples to Oranges

Designing Grid Systems for Flash – AisleOne

Gridding the 960 – Cameron Moll

Vertical Grids – Position is Everything

Grid-Based Design – Welie

Introduction to Layout Grids – Adobe

Cutting and Sewing Grid-Based Design: Working with Other People’s Comps – urlgreyhot

Grid-Based Design: Designing Blog Theme Templates – urlgreyhot

The Grid: Structure of Design – Poynter Online

Developing the Grid that Supports Your Design – Emmanuel Blogonic

Grids: Order Out of Choas – About.com

Gridlasticness – SimpleBits

Ruler from Airbag – Creating a background image to help with your grid design

Galleries:

Design By Grid – CSS gallery for grid-based design

Gird and Column Designs – Web Designer Wall

30 Blogs with Grid Based Design – CSS Juice

Tools:

Grid Designer 2 – A popular online tool for setting up a grid

Grid Maker – A simple web application to design a grid

GridMaker 2 – A downloadable tool to assist with creating mockups

960 Grid System – Set up a grid for the common 960 width.

Grid Calculator – Another online tool for creating grids

TypoGridder – Helps with the baseline grid

CSS Grid Calculator – A simple online calculator for setting up a grid

Web Page Layout Grid – A large image to use in the background when designing with a grid

Browser Grid – Shows the maximum safe sizes for different resolutions

Layout Grid Bookmarklet – A design tool from Andy Budd

Grid Overlay Bookmarklet – A variation of Andy Budd’s tool

Phiculator – A simple tool which, given any number, will calculate the corresponding number according to the golden ratio.

Blueprint CSS:

Blueprint CSS – CSS framework which aims to cut down on your CSS development time

Links to Blueprint Resources – A number of resources are linked here, so are mentioned below

Blueprint Layout Tool -

Photoshop Template for Blueprint CSS Comps – Helps you to create grids with Photoshop.

Yahoo Developer Network:

Page Grids – An article about designing with grids.

YUI Grids CSS – Foundational CSS with 4 preset widths.

CSS Grid Builder – Grid-building tool from YUI.

How to Play with Yahoo Grids CSS – Article from Black Mountain.

WordPress Themes:

Particles – A free grid-based WordPress theme.

unGrid – A free grid-based WordPress theme.

Bedrock – Premium grid WordPress theme for charity.

For more resources please see:

Published March 31st, 2008 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

61 Responses

Comments are now closed on this post.

  • Etienne Teo, April 1, 2008

    This is one comprehensive guide list thathelps me understand what this is, something new to me and it’s gonna take me along since every step is pathed for me.

  • Homebizseo.com, April 1, 2008

    This is the best guide I have seen on the net.

  • imsraaia, April 1, 2008

    useful indeed…

  • Armen, April 1, 2008

    Thanks for featuring my theme, Steven. This is a great resource you’ve put together.

  • Kevin, April 1, 2008

    A great baseline grid tool for Firefox/Safari users:

    http://robgoodlatte.com/2007/07/31/syncotype-your-baselines/

    Kevin

  • Vandelay Design, April 1, 2008

    Hi everyone,
    Thanks for your comments. I’m glad this collection will be helpful.

    Kevin,
    Thanks for the additional resource.

  • WOW, amazing resource. There are some really great tutorials listed, thank you very much…

    Bookmarked! :)

  • Kostas Mavropalias, April 14, 2008

    Thanks for the great resource! bookmarked :)

  • WOW, ultimate resource. There are some really great tutorials listed here with, thank you very much…

  • Josh Walsh, May 4, 2008

    I’ve put together a simple photoshop template which gives a great starting point for designing web sites in Photoshop. It’s available for download here.

    http://www.designinginteractive.com/design/sharing-the-grid/

  • Web Designer India, May 5, 2008

    Here we have designed plethora of websites & having a huge customized web designed portfolio. But right now we are lagging behind from client list.

    Why & how my competitors are fetching my clients.

  • Danhbaweb20.com, July 11, 2008

    Thanks so much. It useful for me !

  • Marty Thornley, May 9, 2009

    Hi,

    Great list of grid resources! Designing to some kind of grid has greatly sped up my designs and made them better and cleaner too. I use several different grid layouts to help in the early stages of a design.

    I recently made available a Photoshop Template that I use to design on a grid, which combines all of the different grid options.

    The Web Design Starter Grid has 10×10, 60×60 grids fitting into a 960px layout and 50×50 grids for a 1000px layout. It also has browser overlays to keep in mind what the site will look like on smaller screens.

    It is available for free download here.

  • Mr.Mix, November 1, 2009

    Great List i love it thanks for the topic !

  • Josef Müller-Brockmann, December 3, 2009

    This is a great list you’ve put together. An invaluable tool for anyone looking to enhance their skills, or simply learn a little bit more about the subject. Thanks for doing the research.

  • Ronnie Affee, December 30, 2009

    Great article. Thanks for posting these tips. Our Orlando web design team is always looking for new ideas and ways to improve the efficiency of your work load.

    Ronnie Affee
    Orlando advertising agency, Yuppify.com

  • eva, January 21, 2010

    Great list but a little overwhelming at moment!!

  • Peterborough Web Design, March 28, 2010

    Thanks so much for this tutorial. I’ve got an exam coming up and this is gonna help loads.