Get going with design grid - How to get going with design grid PDF Print E-mail
Thursday, 08 July 2010 12:00
Article Index
Get going with design grid
How to get going with design grid
All Pages

No one design grid system is appropriate for all Web pages. Your first step is to establish a basic layout grid. With this graphic "backbone" you can determine how the major blocks of type and illustrations will regularly occur in your pages and set the placement and style guidelines for major screen titles, subtitles, and navigation links or buttons.


To start, gather representative examples of your text, along with some graphics, scans, or other illustrative material, and experiment with various arrangements of the elements on the page. In larger projects it isn't possible to exactly predict how every combination of text and graphics will interact on the screen, but examine your Web layout "sketches" against both your most complex and your least complex pages.

Design grid and the rule of thirds

One easy way to develop an eye-pleasing and functional site is through a grid layout, because as Web designers switch from tables to CSS rules, grids remain an important tool to use for layout considerations Possibly the easiest way to layout a page – whether Web or print – is through the use of a grid system modified by the rule of thirds. The rule of thirds divides the format into three equal horizontal and vertical sections so that the viewer sees four basic points of reference.


Vertical stratification in Web pages

A Web page can be almost any length, but you've only got about forty-five square inches "above the fold" — at the top of your page — to capture the average reader, because that is all he or she will see as the page loads.


The final word

Without a firm underlying design grid, your site will be driven by the problems of the moment, and the overall design of your web system will look patchy and visually confusing.

A balanced and consistently implemented design grid will increase readers' confidence in your site and enhance its usability.

Last Updated ( Friday, 26 November 2010 10:03 )

Your are currently browsing this site with Internet Explorer 6 (IE6).

Your current web browser must be updated to version 7 of Internet Explorer (IE7) to take advantage of all of template's capabilities.

Why should I upgrade to Internet Explorer 7? Microsoft has redesigned Internet Explorer from the ground up, with better security, new capabilities, and a whole new interface. Many changes resulted from the feedback of millions of users who tested prerelease versions of the new browser. The most compelling reason to upgrade is the improved security. The Internet of today is not the Internet of five years ago. There are dangers that simply didn't exist back in 2001, when Internet Explorer 6 was released to the world. Internet Explorer 7 makes surfing the web fundamentally safer by offering greater protection against viruses, spyware, and other online risks.

Get free downloads for Internet Explorer 7, including recommended updates as they become available. To download Internet Explorer 7 in the language of your choice, please visit the Internet Explorer 7 worldwide page.