65 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.
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
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
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
Design By Grid – CSS gallery for grid-based design
Gird and Column Designs – Web Designer Wall
30 Blogs with Grid Based Design – CSS Juice
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 – 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
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.
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:
- 25 Excellent jQuery Slider Tutorials and Plugins
- 45 Amazing and Free Photoshop Actions
- WordPress Ecommerce: 30+ Resources
- 35 Outstanding GIMP Tutorials
- 40 Sites for Finding Web Design Jobs
Published March 31st, 2008 by Steven Snell