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.
Answer
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://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'
No comments:
Post a Comment