Graphics and Templates

Use of Grids in Web Designing

Posted on: May 18, 2010

Before talking about role and uses of grids in the process of web designing, we will first consider that what is grid actually? Basically grid is simple set of lines that define the structure of your web page. Web page is designed in the set numbers of columns and all the design elements of web page remain within this structure defined by grids. Grids provide a logical and attractive layout to your designed page. This structure of lines and boxes helps you in keeping all the design elements in designated area of web page.

Use of grids divides your web page in different sections and you can make 3 columns, 6 columns or 8 column web page. It completely depends on your requirements for designing.

Golden section is another option to apply grids in web page designing. This is a mathematical ratio that divides the web page in different sections of different sizes and used by Greeks and Romans. A research study tells us that this ratio is also found in nature like between stems and branches of plants and structures of animals. Grids are standard tool to organize your design elements visually. If we see the structure of grids, we realize that this net of lines and boxes will be a hindrance in our creativity that we want to put on web page. But use of grids provides you a framework to arrange your text and other design elements on the interface of designed page.

A grid –based design is more attractive and usable as well. It will be easy for users to read the text and view the design elements that are placed in different sections. Here is an example of web page in which no grid is used in the design work. In this sample of web page design seems to be unappealing and chaotic. With this another example of web page is also given here in which grids are used to make 3 columns of web page and it defines the areas for each design element and text.

Before using grids in the designing of your web page you have to keep in mind some basics of this process like:

  • Determining final width of page
  • Determining the size of columns
  • Using math
  • Defining guides and grids

All these points are very important to build the structure of web page with the help of grids.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About Me

Hi, My name is Tania Yellob and I love to write. This is my blog and I love to hear from you regarding my writings. Recently, I have started creating contents and templates for a famous website BuraqPrintables. Please visit it and let me know hows my work and any improvements I can do?


%d bloggers like this: