This video, part one of a three part series demonstrates how to use the 960 Grid System in web page layout. There are many variations on the 960 Grid System and I only address the usage as it applies to page design such that the grid is 12 columns wide and a fixed width of 960 pixels wide.
http://mgaray.com 960 Grid System - Part One
Apple lawyers argue there is almost no difference between Samsung's products and Apple's and presented Samsung's internal documents they say show it copied Apple's designs. Samsung lawyers countered that several other companies and inventors had ... Epic patent battle between tech giants Apple, Samsung heading to jury after ...
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 contradict this opinion. According to them the grid system gives a scientific basis for the perfection of design. The believers of either of these two contradicting 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 advancements and trends offers 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.
In the later part of 1990s computer monitors with higher resolution were hardly seen. 20 years down the line monitors with higher resolutions like 1024x768 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 implies 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 grid system 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 grid system.
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 whose 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 divisions; one is ‘.right' and the other is ‘.left'. The CSS float property of the internal 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 spaced.
Copyright © 2011 Suggest Web Design Layout Based on Grid Articles
Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.
BalasHapusSchool web design uk
Great post. Thanks for sharing. Web designing certification
BalasHapus