Design Theory of Grid-Based
Grid is a vital instrument for visual depiction. Generally individuals used to believe that framework is identified with designing and engineering, yet this is not valid. Today the visual planners utilize matrix broadly for site outline. It is an exceptionally well known device in present times.
Grid is about squares as well as extent. This is the most vital component of network hypothesis. Workmanship students of history are of the assessment that the renowned Dutch painter Piet Mondrian ought to be viewed as the Father of visual depiction since it was he who utilized networks as a part of the most complex way yet established. It is trusted that specialists have been very impacted by established matrix hypothesis for a huge number of years. The origination of isolating the parts of a subject can be followed back to days of scientific ideas created by Pythagoras and his adherents. They used to characterize numbers as proportions instead of single units. The supporters of Pythagoras trusted that numerical examples developed by Pythagoras more likely than not been divine as they happen so regularly in nature. They called this example as the Golden Ratio or Divine Proportion.
Using the Golden Ratio a line can be cut by dividing its length by 1.62. This wizardly number 1.62 is in reality 1.6180339 which is quite irrational and represented as symbol (Φ), Or “Phi”. Don’t worry, I am not going to discuss the details of this theory or explain it, for it’s too complicated and I myself am a bit weak in math. The most important matter is that all these will not make you a better designer, so it is better to leave the topic right here and move on with our discussion.
But here the question arises as how does this ratio help in graphic design? Well it is believed that compositions divided by lines that are proportionate according to theGolden Ratio has an aesthetic appeal. The Renaissance artists of 15th and 16thCenturies used divine proportion to create their paintings, architecture or sculptures. In the similar fashion the designers today use this ratio while developing posters, layouts and brochures. Designers are of the opinion that instead of relying simply on artistic ideas, divine proportion is more useful in giving logical guidelines for developing layouts which are not only attractive but has unique appeal.
The Rule of the Thirds
There is also a simplified version of the Golden Ratio. It is the Rule of the Thirds. Using this rule, a particular line cut by the Golden Ratio is being bisected into 2 sections, whereby one section is about twice the size of the second one. Thus it is a simpler way to apply divine proportion without the help of your calculator. Here the composition is divided into thirds.
For a simple and quick layout experiment of the idea, let us start by drawing some simple rule of thirds grid with pencil and paper. Draw a rectangle, and then divide it into two-thirds both vertically and horizontally. Now draw a line every vertical line to make 6 columns to work. Now having done, we have six grids in front of us to start off with our composition. The big main rectangle here represents the container, which has been described in the section-“Web Page Anatomy”. Using this particular method of layout design, let us place the largest block first. This largest block will represent the content. Then according to my first rule -of –the- thirds grid, let me keep the content block within the two-thirds of the layout at the bottom right, then I keep my navigation block in the middle third block from the left side column. Next I keep the text portion of the identity block across the left side of the content, while the image portions of the identity across the menu. Ultimately, I put the copyright block below the content that is the right sided column of the grid.
The 960 Grid System
The 960 Grid System developed by Nathan Smith has been one of my desired tools for laying out website components. The templates and the sketch sheets are simply wonderful. This 960 Grid System is mainly a CSS framework that has been developed after being highly inspired by articles published by famous web designers Mark Boulton and Khoi Vinh. The widths of the templates have been inspired by the words of Cameron Moll. Speculating as what width would be the best to fit within 1,024px wide displays, Cameron Moll decided it to be 960px and mentioned that the number was divisible by 3, 4, 5, 6, 8, 10, 15 and 16 – which makes it a perfect width for grids. Nathan Smith mixed this notion into a framework and thus developed three layout foundations:
1) 12 columns
2) 16 columns and
3) 24 columns
I however like to use the 12 column layout as it helps me to easily divide my content into quarters in four columns; thirds by spanning three while halves by spanning six.
You have the option to use different arrangements for your own layout work. Use the columns of the chosen grid as alignment guides for the identity, content, navigation and footer blocks. You may wish to keep all your elements in one or two blocks, but I will advise you to avoid it as this will not look good. Rather try to keep some elements in another column or off from the grid altogether. Many designers opine that in using grids the composition somewhat looks boxed and unattractive. The red columns that you find are from the 16 column (960 Grid System) template but it doesn’t exist in the real website. The columns are invisible in the real website so there is probably little chance to realize that it has been created using a grid.
amous graphic designer and author of Grid Systems in Graphic Design, Josef Muller Brockmann says,” The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
It has been proved that human mind responds well to structure, grids and ideal proportion and love to use them in different creative medium. Often it is seen that layouts that is looking unattractive or “doesn’t look quite right” can be easily fixed by resizing or moving a few elements here and there on the grid.