Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do you use a grid system when designing a web page?

Tags:

grid-system

I'm trying to figure out why I would use a grid system. I have read some but I just don't get it. I'm used to just putting stuff in html on a page and beind done with it but I have a new project and would like to use a grid because apparently it is a best practice.

I read in one article referenced in another SO question and it said that grid design was in all sorts of development, even application form design. That made me think of things like snap to grid, etc. and I didn't know if the grid in the web design sphere was the same. I was hoping someone could give me a brief but not overly complicated view and not a link to Google which I have used already.

Thank you for any help.

EDIT: I found this website the easiest: http://www.zurb.com/playground/css-grid-builder but again, what do I do with 12 columns? Is everything in a column "smashed" to fit in a column? that doesn't make sense to me.

EDIT: I read the grid 960 tutorial below and was feeling better but at the end it says:

You can just as well use the concepts of Grid 960 in the production code, but it is not recommend sticking with a framework all the way through production. CSS frameworks are just like any tool, they have their uses. With that in mind, go forth and prototype!

I'm not trying to take this out of context but if I don't use it in production, what's the point? I understand the need for prototyping but if I like the prototype why not use the 960 grid? I may not understand the comment. Thanks.

EDIT:

Is the 960 system for production?

like image 577
johnny Avatar asked Mar 08 '10 14:03

johnny


People also ask

Should I use grid for my website?

Grids help give shape and hierarchy to web design. Without them, you would have no idea where to place your design elements. We need them to create a good user experience so a user knows how to navigate through a website and find what they need. Grids also help when it comes to responsive design.

How is using a grid helpful in designing your page?

The grid system helps align page elements based on sequenced columns and rows. We use this column-based structure to place text, images, and functions in a consistent way throughout the design. Every element has its place that we can see instantly and reproduce elsewhere.

What is a grid used for in design?

In design, a grid is a system for organizing layout. The layouts could be for print (like a book, magazine, or poster), or for screen (like a webpage, app, or other user interface).


1 Answers

I think you're too focused on thinking about grids as applied to web and applications, and need to do a little research about the underlying reasons why grids can be useful for any form of graphic and information design, whether pixels on a screen or hand-drawn ink on paper.

I would recommend you take a step back from the computer, forget about 960, divs, snap-to-grid, and HTML entirely for a bit, and if possible flick through a few graphic design books and magazines and do a bit of doodling. Or even just pick up a newspaper and have a think about what underlying grids they use (how many columns are there, are they the same width, do grids differ across pages or sections, which elements stick to the grid, which diverge from it?).

The Grid System has a good list of resources.

Then you should be in a better position to think about how grids in general might be useful for your projects, and whether a particular model such as the 960 grid might be useful.

like image 95
e100 Avatar answered Oct 15 '22 05:10

e100