The grid system will set the visual rhythm for your site. As I stated in last class, it’s like making music. You produce a sense of ordered wholeness. – me
No matter what you’re designing in HTML and CSS, you know by now that everything is a box. By the time you take your styleframes and translate them into web docs, you might find it hard to work the numbers you’ve made everything (especially if you weren’t taking them too seriously). In other words, a lot of the elements you’ve created are half of whole numbers or are all over the place.
Would you say the mental image in your head right now is a grid? If yes, you’re thinking right. Every design you make should have a clear grid system whether its print or for the web. A grid helps to organize information into a clear easy to follow layout. A grid layout provides a visual structure, a systematic and consistent frame for placing things on a view.
The trend at the moment is to work within a 960px or 1048px container. From there, splice it up into columns that will help you best work with the alignment of content-blocks and elements to your design. If you can both make your own grid system and work it, then you might as well be a creator.
Using a consistent grid structure across all views in a site or application can reinforce that sense of order, unity, and consistency. Even with minimalist styling in terms of colors and fonts, effective use of the grid can significantly contribute to a positive aesthetic experience.
Working within the box model and/or your grid system means careful coding with floating, positioning, in addition to supporting your divs with margins and padding.
Doris’ Grid System Breakdown
1. Wait, so why am I designing a grid?
The eye will actually run through the entire layout in the site with ease. Designing within the grid’s columns will help you keep elements in good ratio of one another. Meaning, one div’s width will compliment the width of other divs, so long that everything is within your defined columns.
2. Is there a standard grid that I should start with?
You can use the grid generator online or make up your own. Which ever method you choose, you should pretty much always think of your layout as a grid when designing digital interfaces. Your grid can work within fixed widths or fluid (percentages). Depends on your website comps.
3. How many columns should I be designing within?
A simplistic solution that many use for the Web is to use basic header and footer areas with multicolumn central/content area, usually with 2-4 columns. You should consider thinking about the ratios of sections in your design. There are well known guides to ratios such as the Golden Section and the Rule of Thirds, and designing with ratios will better enable you to create a fluid layout that can adapt to user and device-based changes.
4. The grid system seems to help me define fixed widths. What about fixed heights?
UGH. I’m not one to encourage students to designing elements within a fixed height. It sets you up for disaster, especially if you will be updating content frequently. You should (most of the time) allow theoretically infinite vertical space for variable content. It just easily accomodate user-based changes, such as changing the font size of the window dimensions of a browser.
5. Once I’ve mapped out my own grid system, how do I use it?
One of the most effective ways to make sure you’re coding within your grid, if to make it the background image of your page’s body. This is, after you’ve made an image in photoshop or illustrator. By having it as your background image, you can always double check that you’re aligning elements visually based on it. Take a look at my browser below.
6. Should I reuse my grid for everything I make?
There is no one-size fits all solution for grid layout. It really all depends on your styleframe comps – you’ll always be making things that are wider than other designs you come up with or much more narrow. Don’t always design within the same “box” or “grid”. It makes you square.
What I’m listening to at work right now:
Daft Punk – The Grid by vission music
Tweet
