Importance of Grids in design



Design grid can make or mar your site precisely depending upon what you wish it to work for you. All users benefit from clear and consistent Web site design, but for some users it is critical . It is also critical for you that take design grid in its right earnest. Design grid happens to be instrumental in developing a site which is consistent, impactful and compelling.

On the web, success is often measured by how quickly and effectively you communicate your ideas to the user. Design grid undoubtedly provides one of the answers meant to serve that end.

So, are you design grid conscious in order to have a distinct edge the way your site looks like? Here are a few nuggets of wisdom and underlying considerations to leverage the potential design grid.

Design wisdom in Cyberspace

With a lack of effective design grids, spatial cues and with radically different approaches to navigation, it is far too easy to get disoriented or lost on the Web.

In the long run, there is really no place on the Web for a clever, quirky, or highfaluting design approach. Cyber wisdom holds that one has to stick with a simple design, lucid language, easy navigation applied uniformly and consistently in design Process.

What purpose does design grid serve?

Users don't just look at information; they interact with it in novel ways. Users seek clarity, order, and trustworthiness in information sources, whether traditional paper documents or Web pages. Effective page design can provide this confidence.

The spatial organization of graphics and text on the Web page can engage readers with graphic impact, direct their attention, prioritize the information they see, and make their interactions with your Web site more enjoyable and efficient

Points to ponder

Design grid is about the tactical decisions about what your audience wants from you, what you wish to say, and how to arrange the content to best meet your audience's needs.

The screen is smaller than a printed page

Graphic designers often create page grids that look great on their extra-large monitors. In the process they forget that most users cannot display more than about half of the typical Web page at any one time, and only 10% of Web surfers ever scroll the page.

Width of page graphics

Computer screens are typically smaller than most of the books or magazines. A very common mistake in Web design is spreading the horizontal width of your page graphics beyond the area most viewers can fit on their 14-15 inches display screens.

Design grids for HTML pages

A Web page can be almost any length, but you are provided with about 30 square inches at the top of your Web pages to capture the average reader. This is all they will see as your page loads. If all you offer is a big, slow-to-load graphic, many casual readers will leave before they ever see the rest of your Web site .

Graphic dimensions for web pages

Web page graphics should not be more than 535 pixels wide or more than about 320 pixels high, or the graphic will end up being too wide to print on letter size or A4 paper.

Design grids for Web pages

Consistency and predictability are essential attributes of any well-designed information system. The design grids must provide for the spatial relations among on-screen elements constantly shifting in response to the user's input and system activity.

Grids bring order to the page

Current implementations of HyperText Markup Language do not allow the easy flexibility or control that graphic designers routinely expect from page layout software or multimedia authoring tools. Yet HTML can be used to create complex and highly functional information systems if it is used thoughtfully.

How to get going with design grid

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.