Grid-Based Design 101 (16)
Posted in Design StylesMar 24, 08 | 11:10 am
Designers of all types (web, print, etc.) are constantly facing issues involving the structure of their designs. Web designers are increasingly turning to grids to control the structure of web pages, and grids have long been used extensively in other design mediums. For many designers, grid-based design is still somewhat of a mystery. In this article we’ll take a look at some of the basics of grid-based design so that you can understand it and apply it to your projects.
What is Grid-Based Design?
The grid serves as the framework for page layout. It divides the page horizontally and vertically into columns and rows which work to order the elements of the design. The text and images used on the page fit into place and align with one another according to the grid. The lines of the grid themselves are not necessarily visible (although in some designs they are) but they are used by the designer to create the proper width and height of elements to align the page.
Some Examples:
Why Use Grid-Based Design?
Grids in web design can be helpful for both the designer and the visitor. For the designer, the grid helps to achieve balance, spacing, and to compartmentalize the data. The grid can aide with organizing the content and future additions and updates may be a bit easier if there is a specific place for the content to go.
Visitors benefit from grids by arriving at a page that is easier to digest and the structure helps with usability. News sites and others with large amounts of content on a page can especially benefit from the use of a grid. As we saw above, the website for the New York Times is one of the more well-known grid-based designs. Without the effective use of a grid, it’s likely that with the amount of content on the homepage, it would appear more cluttered and less organized.
Helpful Resources for Further Development:
Mark Boulton is one of the leading sources of knowledge involving grid-based web design. If you’re interested in taking a more in-depth look at grids and how you can use them for yourself, Mark has written an excellent 5 part series to lead you through the process.
Grid Designer is a handy online tool that can help you to quickly and easily get your grid set up. You enter some variables such as the number of columns, the width in pixels, gutters, and margins, and Grid Designer produces the layout (with measurements) for you.
Design by Grid is a gallery featuring grid-based designs. If you’re looking for inspiration or for plenty of examples, this is the place to go.
Grids Are Good was a presentation at SXSW (2007) led by Khoi Vinh and Mark Boulton. Their excellent presentation is available in this PDF document.
Have You Designed Any Grid-Based Sites?
What’s your experience with grid-based design? What is your opinion of it, as a reader or a designer? Feel free to leave a link to your own grid-based designs in the comments.
