26 Grid Design tips, tutorials, techniques & resources
Designing a Web site by the grid should be a rule, not a fad or trend
"Well known designers have often times admitted to using grids in almost every single one of their pieces. Especially ones that have a large amount of information."
Grid tips for Photoshop users
"Grids greatly improve your layout. They add a level of consistency. Imagine the front page of the New York Times without a grid… It would be a mess, impossible to easily scan. I always make sure the number of columns I use is dividable with 3 or more numbers."
Grid-Based Design: Six Creative Column Techniques
"A page without a grid is a usability nightmare. On the other hand, a grid that has creatively overlapping, escaping, or energizing columns leads to a more enjoyable user experience. Discovering or planning areas of the design that will have some freedom will lead to more interesting and appealing design solutions."
Grid-Based Design 101
"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."
Grid-based design: Part 2, Designing blog theme templates
"I'd like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress. The purpose of this article is to give you an idea of how to approach blog theme design using a grid system. After reading this, you should be able to create a fully-functional grid-based design and HTML prototype that can be coverted into a theme template."
Designing Grid Systems For Flash
"I’ve decided that I’m going to write a little something up for those people interested in grids. I’m going to walk you through the process of creating a grid for a Flash based site. The beauty of creating a grid for Flash is that you can create a fixed grid and don’t have to be concerned with the user changing type sizes and screwing up the entire grid of the site."
Grids make eyes happy: How to use grids
"Check out your local newspaper. Well-designed papers will never have the same column running the length of the page. Great papers have very little semblance of a grid. Apply these rules to your site. A true grid may not even have visible rows. Great grid usage includes all sorts of variations of grids, weaving in and out of columns and rows, breaking the grid at strategic moments, and overall making it very hard to even notice the grid."
The Funniest Grid You Ever Saw
"Believe it or not, underlying every page of TheOnion.com are sixteen columns of 42 pixels each, separated by fifteen gutters (the empty white space between) of 10 pixels each, plus an additional, outsized column for the left-hand navigation. It’s an almost absurd number, I know, but it has a real purpose, because these pages are sufficiently complex that the practice of laying out elements on them requires lots of guidance."
Grid Computing... and Design
"I spent a tremendous amount of time fine-tuning the CSS so that it would match up very carefully with the grid, and so it would work across all modern browsers — and Internet Explorer too, though with decidedly less faithfulness. That was difficult but it least it was an intellectual challenge."
Oh Yeeaahh!
"I started thinking about how to visually represent the problem-solving process that I go through when designing new interfaces with grid layouts. So I hit upon the idea of a hypothetical redesign of an existing Web property. That approach would allow me to tackle a set of real world design problems that would be familiar to lots of users."
Five simple steps to designing grid systems
"Before we even begin to tackle designing grid systems we need to have a basic understanding of what they are, why we use them and where they came from."
Cutting and sewing grid-based design: Part 1, working with other people's comps
"Visual designers have written about grid-based web design already. Few people, however, seem to have talked about their actual process of getting a comp, cutting up its graphics and using it to produce actual CSS. As you may know, this blog is all about exposing my processes. So I thought there might be some value in writing about it."
Why use a grid?
"Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform - web, print & real 3d environments."
Feeling your way around grids
"Many theories on aesthetic measurement have their basis in numerical patterns that occur naturally such as the proportions of the human body, for example the distance between your elbow and the tip of your fingers compared to the distance between your elbow and your wrist. Theories, such as the Golden Section, arise from these natural patterns and they are applied to art (either consciously or subconsciously) to create "beauty" by way of considered composition."
Columns & Grids
"One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. So the focus is usually on the horizontal layout, which usually means columns."
Design grids for Web pages
"Consistency and predictability are essential attributes of any well-designed information system. The design grids that underlie most well-designed paper publications are equally necessary in designing electronic documents and online publications, where the spatial relations among on-screen elements are constantly shifting in response to the user's input and system activity."
Grid-based Layout
"A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines."
Designing With Grid-Based Approach
"We’ve decided to take a deep look in the articles about grid-based designs. We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we’ve listed the most useful references, tutorials and tools we found - with precise descriptions of what the articles are about."
Designing with a Grid
"Recent talk on the web about typography and the grid inspired me to pick up some books and do some reading and learning so I could expand my knowledge and produce more mature websites. I wanted to try and give some insight on how I created Version Four using a grid, and how I went from wireframes to the finished website you see here."
Using Spreadsheets to Brainstorm Grid Layouts
"Designing with a grid is becoming more and more common as a standard approach to designing a website. When designing this site I discovered a tool to aid in pixel calculation and proper proportions that proved highly valuable."
Gridlasticness
"A few notes when trying to create a grid layout using ems."
On grid design
"I’ve heard the term “grid design” more than I’ve seen the color blue around the web this year. Why such a resurgence of such an ancient technique? But more importantly — why doesn’t anyone use grids? I was always taught that grids were lines of integer multiples crossing both the vertical and horizontal. Then again, I’ve never been “trained” formally in design either. But here’s my opinion, for what it’s worth."
Quiet Structure
" Like many people, I’m a big fan of CNN’s recent website redesign. While I believe that a few structural and hierarchical elements could have been addressed better, the overall result of this redesign is a very neat, very clean and clear presentation of information; exactly what an online news site needs."
Grid and Column Designs
"If you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites. These sites show how grid layout can be applied on various type of sites — whether a massive content editorial site or just a personal blog."
Setting Type on the Web to a Baseline Grid
"Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts."
Thinking Outside the Grid
"There is a new kid on the block, and her name is ‘I’ve never designed with a table in my career.’"