Designing & Thinking with Grids

In this article I’d like to tell you some of my insights about designing using grids, which is crucial for good design. In print and press all the information (graphics and text) have some logical layout, proper spacing, and all of that is formed into neat columns. While designing a website same rules apply and we have to remember to make our content easy to read and accessible for the users. That’s where grids come to play – they help to make information look well organized and clean.

First of all we should acknowledge how the websites are constructed. All websites are actually made of boxes (divs), that are filled with text and graphics, just like in print and press. Everything, technically speaking is divided into these rectangular pieces so it doesn’t really matter if there are some complicated images or shapes being used in design. Having that in mind, to create a successful, usable layout we have to put the boxes together in some meaningful order, keeping proper margins and spacing. While prototyping and using software like Photoshop for creating our graphics and UI elements, we can use vertical and horizontal lines thus creating a grid. That will help us keep proper spacing and margins between all the UI elements. After we get better at that, we can just visualize the grid and create our layout without drawing it every single time. There are also other “pro’s” to working with grids. One of them is ability to control the composition. If we skew the grid a little bit, we can come up with more dynamic design while still maintaining proper spacing and margins. We should always remember not to let our text and graphic elements touch or collide in coincidental looking way. They should be either overlapping or kept at some distance depending on design.

After we are done with designing and ready to code our layout we can consider using one of CSS grid systems to speed the coding process. There are many to choose from: 960gs, Blueprint, YAML, Yahoo YUI, to name a few. I’d like to especially focus on “960 Grid System” which is the most popular and one that has received most attention so far. As the author states 960 (pixels) stands for optimal width for today’s websites. Knowing that we can design and align our layout around that number. After including the grid system in our code we can choose to use 12 or 16 columns for aligning the layout. Using this system is rather easy and straightforward. Let’s say we want to create main content area and a sidebar. Having 12 column layout we can use up 8 columns for main content area and 4 columns for the sidebar. All we have to do is to create our 2 div’s, and apply classes “grid_8” and “grid_4” to each of them, and there we have perfectly aligned columns with proper spacing. It’s that simple. We can also put vertically aligned grid of stripes over the layout, which enables us to code our design a lot quicker. Of course using those systems, like everything else, has own pros and cons. It can dramatically speed up development time, help you maintain clean structure, systems are usually cross-browser compatible and they’re not heavy too (mostly around 4kB compressed). On the other hand we have to stick with 960px width (as for 960gs), nothing more, nothing less. Also we will lose some flexibility for the sake of rapid development.

Concluding. It’s up to you to decide whether to use CSS grid system or not, but it’s always good to draw a grid (or think with it) while designing/prototyping your UI and layout. This will let you keep your content well organized, consistent and easy to read which is always important.

1 Comment on Designing & Thinking with Grids

Leave a Reply

Your email address will not be published.