4

I'm trying to create a UI design for my 1024x768 screen.

I know there's a grid system out there. I've read about the benefits, etc. I understand, I think from a fundamental level, why I need to use them. But I'm so confused about how to create my own grid for my designs. How, for example, do I decide how many columns to use? Is there some way to take a look at a wireframe prototype and immediately be able to assess how many columns I'd need to use? I'm essentially taking wireframes and "skinning" them out in Illustrator.

The other thing I've noticed is that sites that talk about grids sometimes show examples that confuse me a bit. For example, I've noticed that a site will have 12 columns, but some of the boxes that align to the left side of this column have an overflow on the other side--meaning they don't fit into the column perfectly.

Can anybody help me decipher grids? I've looked through other threads, but it still answering my questions as to HOW you step-by-step set up a grid to fit your design.

Improve this question
2
  • 1
    "HOW you step-by-step set up a grid to fit your design." I think you are looking at things backwards. You set up a grid, then design for that grid. Not vice versa.
    – Scott
    Commented Mar 27, 2013 at 21:52
  • Scott is making an excellent point. A prebuilt CSS grid system is meant to help speed up the whole design process...just base your design off the building blocks of the particular CSS grid you chose. It's basically a pre-built (albeit rough) design template. Retrofitting an existing design into a prebuilt grid system, however, can be a huge chore.
    – DA01
    Commented Apr 3, 2013 at 2:57

4 Answers 4

Reset to default
4

Your best bet is to find a GS that works with your project at hand. There's tons of them out there: 960gs, Bootstrap, Foundation etc. You want to develop your website based on the parameters of your chosen GS. Most of these GS come with their own set of parameters and guidelines, the grids themselves also vary in column width, gutter width, and outside margins.

My team and I have been working pretty heavily with both Twitter Bootstrap and Foundation, they're reliable, do a great job of fitting modern browser requirements, and are fully responsive systems. This allows you to manage your UI/UX for various viewports and truly give your user a seamless experience.

You can find these Grid Systems here:

http://960.gs/

http://twitter.github.com/bootstrap/

In terms of getting a Grid, some of these systems come with grids you can download from their site, however an extension we use is GuideGuide, it's a plug-in for photoshop that allows you to create extremely accurate grids with photoshops guidelines. I'd link you directly to it, however this platform won't allow me to link beyond 2. Google Search 'GuideGuide'

Improve this answer
2

Do some rough sketches of your site on paper and see how the information falls. Some layouts lend themselves more easily to one-third/two-thirds (so a 12-column) or quarters (16-column). Give yourself permission to mess around a little and try something which might fail.

Improve this answer
1
  • 12 columns accomplishes both quarters (col-3 × 4) and thirds (col-4× 3). The only benefit of a 16 column grid is that you can divide things into eighths. But at the expense of losing thirds.
    – Orun
    Commented May 17, 2022 at 23:32
2

CSS grids are great if you are using them to base you wireframes and visual design off of.

If, however, your visual design and wireframes are already completed, an off-the-shelf Grid system is likely more of a headache than a help.

If you're design is complete, there's no need to force it into a particular concept of a grid system. If it's a two column design, just go with a 2 column grid. No need to maintain the CSS for 12 grids in this particular case.

Improve this answer
1

The other two great answers cover most of the applicability, so here's a little about grids in general, hope it helps.

Grids are a great wat to distribute content in a way that looks good and/or helps readability. The advantage of a consistent layout versus an inconsistent one (just talking about space distribution) is that information will appear in blocks, and these blocks help understand the site better.

How many columns and blocks you use will depend on your information. For example, this site uses mainly two columns. It doesn't really need more, you have the main content in the left one and the categories, additional information, tags and all that in the right. The main column uses, however, a vertical grid, so to say. All questions have more or less the same height. If they all had very different ones, you'd probably have some issues determining where they begin and end (text styles help). While some pages (Smashing Magazine, just because it's the first that came into my mind and because it is simply amazing) uses multiple columns. They want to show different types of information, with different hierarchies. Smashing is a great example of grids helping responsiveness (how the page adapts to different devices and browser sizes).

So, in short, grids organise information. They are great if, as I mentioned right above, you want to design sites that are cross-device and cross-browser. They simplify the process, the calculations. And, they add a little math to the layout, thus the results look better because there is mathematical beauty behind it :)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.