“A two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.” — WikipediaThe grid is an invisible structure that collects all the elements within a web page together. Grids are never properly visible, however traces of the grids’ “discipline” can be seen by the placement of elements within a web page. The grid also dictates the size of such design elements as widths of column texts, repeated placement of elements, padding around imagery, word spacing, line height, etc. A grid’s main goal is to create a connection of unity within a design, which in turn makes web page content flow better, producing a more readable and enjoyable web page design. Alex White’s Elements of Graphic Design explains the use of unity through a grid:
“Unity in design exists where all elements are in agreement. Elements are made to look like they belong together, not as though they happened to be placed randomly. (…) So, without unity a design becomes chaotic and unreadable. But without variety a design becomes inert, lifeless, and uninteresting. A balance must be found between the two.”However, the benefits of a grid on a particular design will only take effect if the grid is used at the initial stages of the design process. Attempting to implement a grid into an existing design will not create the same fluid layout or unity of content. This issue is discussed in Josef Muller-Brockmann’s Grid System is Graphic Design. He writes:
“A suitable grid in visual design makes it easy: a) to construct the argument objectively with the means of visual communication; b) to construct the text and illustrative material systematically and logically; c) to organize the text and illustrations in a compact arrangement with its own rhythm; d) to put together the visual material so that it is readily intelligible and structured with a high degree of tension.”Grids are not just restricted to web and graphic design, almost every profession where any form of design is implemented has a grid system, which professionals use as a guarantee for positive element positioning. It has become almost professionally vital to use grids in all modern design practices.
What Grids Are Available?
Grids are everywhere on the internet, for web designers to use. The king of the grids has been deemed “The 960 Grid”. The 960 Grid has the following structure:- Total width 960px.
- 12 columns Maximum, 60px each wide.
- Each column has 10px left & right margin. In turn, this makes 20px of gutter space on the edges.
- Total content area is 940px.
“The 960 Grid” has always had a very close connection to “The Blueprint Grid”, however they do have a lot of differences. To begin with, “Blueprint” has an in depth set-up for typography, whereas “The 960 Grid” set-up only has minimal typography in place for a guideline rather than a shipped set-up. Personally I prefer this approach, because both grid systems were released several years ago and the web typography front has changed rapidly, therefore “The 960 Grid” allows for more flexibility when using modern typography in designs.
Another notable feature in “The 960 Grid” framework is the lack of Pull Quotes in the set-up. Nathan Smith (creator of “The 960 Grid”) states:
“Those are things I rarely use, and I consider that to be a bit more design and contextually content oriented than related to page layout and prototyping.”I’m not entirely sure about the Pull/Push Quote design, and frankly, I get slightly put off by their appearance in websites, because it makes me feel like someone is over compensating. In addition, if the Pull/Push Quote design is produced without much thought or guidance, it can really pull the overall design of a website down. However, I do understand that it is a popular design element in modern websites, so appreciate Blueprint’s inclusion of a template for the feature.
This means that if I were creating a scoring system for 960 vs Blueprint, it’s currently 1 – 1 and down to the my last key difference; Vertical Rhythm. Vertical Rhythm is the consistent spacing between sentences and paragraphs in website content, or in other words, line height. Off the bat Nathan Smith again states that, while he feels Vertical Rhythm is an important factor in web design, he believes “it is fragile” and can easily be damaged by a content editor’s placing of an image within the text.
My verdict: I’m going with Nathan Smith purely because, as a developer, I know how many CMSs will allow users to place images of any size into any position within the text, because they have no regard for intricate Vertical Rhythm. There are many work-arounds to deal with this, but I feel that for it to truly work is circumstantial. If you have a project where it will be respected, great, but for the majority of cases I think 960 has a more realistic attitude.
It is my opinion that the 960 Grid framework is the better option, but honestly try them both out and see which one works best for you.
What Other Grids Are Available?
While the 960 Grid is the most popular it doesn’t always mean it’s the best. With the rising popularity of mobile internet browsers and their increasing improvement, designers argue that 960 pixel based frameworks are quickly becoming outdated, because they were never designed with mobile browsing in mind. I agree with this theory, because everything on the web eventually becomes outdated, and I believe that grids now need to be updated, or recreated, to handle mobile browsing.One of the frontrunners of these new grid systems is the 978 Grid System. The 978 Grid System was coined by Nick La in September 2010 when he questioned the true efficiency of “The 960 Grid” system, especially when it came to designs that used a base font size of 13px or higher. After creating and using the “978 Grid System” on Themify.me, Nick La decided to use it on future production of WordPress templates, along with Darcy Clarke.
Popularity grew and now it is considered one of the most popular alternatives to the traditional 960 Grid system. The 978 Grid System is now run by Brothers Roloff and offers several skeleton frameworks, from mobile all the way up to 1378 width grid systems. I am planning on using the 978 Grid System in future web design myself.
Other Grid Systems & Further Reading
There are loads of grid systems available for use and, as I’ve banged on about previously, it’s all about personal opinion, so if you’re looking for grid systems, there is only one place to go: The Grid System.For further reading, here is a small list of articles that cover the grid systems I’ve talked about in more depth:
An interesting blog to go through this thanks for sharing this expressive information.
ReplyDeleteweb designing company