Web Design Layout Based on Grid

Web Design Layout Based on Grid

Opinions about using the grid systems vary from expert to expert. Some experts are of the opinion that the designer's creativity becomes limited when the grid system is adopted. There are other experts who oppose this opinion. According to them the frame work gives a scientific basis for the perfection of design. The believers of either of these two conflicting opinions have a lot of justification for what they say and claim.

A web design layout that is based on the grid system offer many options to the designers.

Evolution of Grids

With the passage of time the use of grids has become famous. The current technological advances and trends offers a basis to the grid system. The grid system is also based on the number of people who have internet accesses at a particular time, the instrument used for internet access, the resolution of the screen and the device operating system. The website layout gets a structural balance because of the frame work. The grid system allows consistent measurements. It facilitates the designer with flexibility among different frameworks.

In the later part of 1990s computer monitors with higher resolution were hard seen. 20 years down the line monitors with higher resolutions like 1024×768 have become very common.

Basics and Nature of Grid Design

The grid design serves as a basis for all web pages. All the digital work is in pixels. This assumes that the work will obey the rules of height and width. Visual artistic effect is produced along with distance and spacing between the points.

It was because of Adobe Photoshop that the frame work became famous. If you want to learn the display and implementation of the grid system lines for the creation of visual like logos, mockups, icons, and graphics, there are tutorials on the internet.

Creating a grid layout is quite different in different coding languages, especially Photoshop, HTML, and CSS. Despite the universality of the grid system the effort put in, in case of different coding languages ​​is quite different. The current trend in designing is shifting towards the structures based on frame work.

Fundamental Rules for HTML and CSS

The same template is generated by the HTML grid layout every time it is used. The initial structure is a containing wrapper which width is just enough to accommodate all the columns. There are subdivisions in the wrapper division. The subdivision number should be equal to the column number needed. If you want a layout with two columns then you need to have two classed partitions; one is'right 'and the other is' .left'. The CSS float property of the inner columns should be set to right or left. A "clearfix" class should be contained in the wrapper.

In any grid system, the padding and gutters are considered to be integral parts.

In the grid design the vertical spacing is very important.

Most of the designers create a grid system of nine rectangles by dividing the design in three vertical and three horizontal spaceed.

Copyright © 2011

Scroll Up
Contact Us