Preamble
In this essay I will be looking at and exploring the use of and implementation of grids and grid systems. I will be conducting a review on sites that both use and do not use grids to explore the reasoning behind their use in the sites but to also enable me to reach a decision on whether to implement these in my designs and specifically to the deliverables in this project.
History
Grids have traditionally been used in the print and publishing sector. They were used in order to provide prominence of information in a structure that is easy to follow and “easy on the eye”. Over the past decade web developers and web designers have begun to incorporate these design rules to structure and order the data and content on the sites that are being created.
The grid systems works around the principles of the "Golden Mean" and "Golden Ratio".
The Golden Mean in Philosophy “Desirable middle between two extremes one of excess and the other of deficiency…” and the Golden Ratio “The ratio of the sum of the quantities to the longer quantity is equal to the ratio or the larger quality to the smaller one." Wikipedia. The golden mean/ratio is calculated at 1.61803398875 and has been used over centuries in architecture to create noteworthy buildings. To illustrate this description further I want to make reference to the Parthenon in addition to the cathedral of Notre Dame.
As can be seen in the image above the Parthenon uses the ratio of 1.618, the overlay grid takes the structure and divides itsself down in to smaller areas of importance, and within each of these further detail is added to the structure. This golden ratio is not only found in architecture but also in nature.
http://shannonmarks.wordpress.com
The nautilus shell is a classic example of the golden ratio, golden mean and Fibonacci sequence in nature. The shell its self as seen in the image above uses the Fibonacci sequence which follows the sequence 1,1,2,3,5,8,13,21,34... which if presented on a page will display the following grid, if a continual curved line is drawn from corner to corner of each individual box the spiral will be similar if not identical to that of the nautilus shell. 
http://en.wikipedia.org
The "golden ratio", "golden mean", Fibonacci sequence is used in print and typography in the structure of text and position of paragraphs on a page. Josef Muller Brockmann illerstrates in his book Grid systems in Graphic Design this very clearly.
Other objects that use this golden ratio/sequence is the well-known global brand of Apple. Apple have used this ratio for a number of years with great results in the products that they have produced, namely the iPod.
Coursestuff Web Desgin Lesson 1
Disposition of design elements
How are grids used to present content?
If we look back at the early years of web development, our pages were static pages of long lengths of text. Over the last decade techniques and tools used to present content have changed dramatically. Web pages became more dynamic and enabled users to use nested tables to create navigation triggers that would load a different webpage in to a frameset. The use of tables and framesets to order content was very cumbersome, resulting in the creation of a number of webpages that would be loaded in to a browser at the same time, thus making it slower and causing a number of problems. As mentioned earlier the wheels of development meant that new methods and techniques would be fast appearing. One of the most revolutionary developments was the evolution of CSS, this enabled the developers to create content that was not a million miles away from the designer's ideas. With these technology changes the way that users review and navigate around webpages and websites has also improved and progressed. Users no longer use bulky CRT monitors whose native resolutions were 800x600 pixels they use flat screen monitors that are able to use a screen resolution more suited to 1024x768 and because of this developers now tend to set their page widths to 960 pixels. This pixel dimension is ideal to enable the creation of visually pleasing sites as 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.
The structure and layout of grids is all dependant on the content that is intended on being displayed. Jose Caballer from www.theSkoolrocks.com suggests that there are a number of areas that must be considered in the selection and use of grids. He suggests that you should look at what the "Goal" of the site is, whether it is a Holding Page, Signup Page, and the Content that is found within these. I agree with this consideration in the use and implementation of grids and grid systems within a web project as grids can enable the data and content to flow efficiently and allow for additional importance and emphasis to be attached to the section or sections.
How does the visual balance affect understanding and interpretation?
When using grids and grid systems we must review the overall appeal and preformance of the page and the content contained within it. As mentioned previously the purpose of the page is as important as the content. Using the examples mentioned earlier sign-up and holding pages extra emphasis can be applied to some aspects of data by using additional spacing and in some cases the use of white space. Classic examples of effective use of white space to add emphasis and importance would be Google, this is in part links to Ockham's Razor where less is more.
The impact that the visual balance of a page can have an impact on to the status and image of the client, in this i refer to unordered placement of site content and also how this flows through the site. The misplacement of content and images on a webpage can result in the misinterpretation of the sites intentions in addition to the initial impression that any potential visitor to the site.
In this section of the report i will be reviewing a number of pages that use grid systems and visual balance of content affects understanding and the interpretation of the content. Craig Grannell makes reference to the use of grids in web design and development as a way to remove developers from"..arbitrarily picking column sizes.." throught the use and implimentation of grids in development it would "..create a common visual language throughout an entire Web site.." http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/
Site Analysis
-
Sushi and Robots
My favourite site that I have found during this research is the Sushi and Robots site, www.sushiandrobots.com this site is no longer online however the clear use of grids can be seen through the sites background and positioning of content. The author of this site is Jina Bolton, currently she works as a product designer at a company called "Do". Bolton also attends a number public speaker conferneces travelling around the world talking about the web.
Recently during the process of this project she has updated her holding page and ultimately her sites image. She now has a new logo design and looks to have addopted a blog like structure to her site. This is an interesting change to the brand that she had before as the site previously used hand drawn images of robots, now the style appear to be contempory.
Grid Used
Apporx 8 Column @ 114px, 10px gutters
Visual hierarchy and user guidance
How is emphasis achieved?
The site that bolton created originally used effect white and in some cases black space to add emphasis to a main banner of the robot in her banner however on initial browsing the impression was that the site was set to a target audience of young people. During the review of the site it was clear that the site was used as a platform to demonstrate her skills and accomplishments. Bolton's selection of typography is an interesting one, in this version of the site, the mixture of fun and playfull images mixed in with the black and white split colour background really shouldnt compliment the calligraphic font selection, however it really does.This selection of white space (occams razor), images and typography enable this site to promote each part of the site section by section.
What is the effect of the layout on usability, legibility, accessibility of the content?
I was unable to find whether the original site was responsive however i can confirm that her new site does embrace the RWD principles and therefore when displayed on mobile devices the content is doesnt require the dreaded “double tap”. Boltons site originally used the grid columnar structure well which was further divided using the black and white colour divide well, this feature also enabled a good break point for the page fold.
Inherent effect on image and branding
How does the layout give credibility?
The content placement on site is very nice using 6 columns with 3 major columns within the grid system, Bolton has used the grid well through placement of the commont content, namely the navigation and links to work. Focus on the three main links in the contact area because of thier size also provide a secondary visual in the site after the banner, in which these contain links to other examples of work and publications.
What structure is used to enhance brand image and identity?
Vinh clearly uses the standard placement of elements within his pages the navigation placement being at the top of the site and the clear calls to action (CTA) on them to indicate further options contained within them. The sites visual structure of the page by using black and white enables the use of impacting visuals and colours that can further extend the content within it thus enabling the site to be one that is identified as informative and useful as opposed to sites that offer fluffy images and garish colours.
-
Simon Collinson
The personal site that Simon Collinson has an element of fun attached to it, the site on first visit appears to be some sort of book shop with fancy text that purveys an interesting placement of brand image.
Grid Used
12 Column @ 70.3px, 10px gutters
Visual hierarchy and user guidance
How is emphasis achieved?
Collison creates elements of emphasis well in this site through the use of red colouring to the beginning lines of text. This is extreamly cleaver in that the eye due to the subtle colour selection used for the rest of the site instantly snaps from section to section, this draws the visitor to read the following line. The use of images is also strong in this site, the randomness in some part also adds to the intreague generated from thier use.
What is the effect of the layout on usability, legibility, accessibility of the content?
The site adopts the RWD (Reponsive Web Design) methodology the is fully responsive, when viewed on mobile devices and re-sized browser windows. Collison has been very creative with his navigation using the book like squares in the grid to act as the navigation buttons and sneek previews on the content that lays in wait. The appreciation of the different clients to the site makes the content clear and easy to function around making it accessable to all not matter the platform.
Inherent effect on image and branding
How does the layout give credibility?
The content on placement on this site is very cleaver due to its RWD principle, the content becomes interesting to read and tempts the client to investigate further. The typography that has been selected gives the immediate impression of grandure and as mentioned before book like scollerly extracts. As with Vinh site Collison uses a 12 column grid system that uses 4 "super columns " the presentation of the content within these columns is clear and because of the consideration made to the typography and images provides promenance to the links and content that is beyond the navigation.
What structure is used to enhance brand image and identity?
Collisons approach to the structure in this site is well thought through, he uses the large preview buttons as the navigation for the site this clearly aids the visitor through the site and enables the CTA's to be obvious to the users. Collision has used useful web icons to help users to be able to see that the content is buttons in addition to the hover over that turns the object white when the mouse is over it. Through the inclussion of these features and considerations made to the content and the use ofthe grid the brand image created is one of "Fun and Factual".
-
http://www.subtraction.com/2004/12/31/grid-computi
Subtraction
The personal site that Khoi Vinh has created acts as an informative blog outlining events in his life changes in his thoughts and the developments in the web world and information linked to him academically and professionally. Vinh’s site on first appearance is very plain in its presentation and is primarily text based (apart from the photos of the recent additions to his family, twins!!) however this approach is appealing in that it is direct and the use of whitespace leads the eye on to the content well. Using the example above you can see that he is using a simple grid of 8 columns and this is based around an improvised system that he created. The Columns widths are based around 95 pixel with a column gutter of 10 pixels, Vinh in his posts makes reference to the use of 4 “super columns” which enables him to logically position (or as Vinh state, “shoehorn”) his content. As this post above states this version was created on 31st December 2004, however this is still the structure/version Vinh uses today.
Grid Used
8 Column @ 95px, 10px gutters
Visual hierarchy and user guidance
How is emphasis achieved?
Vinh in this site uses bold keywords in the sentence structures to indicate links to pages in the site and with some effective colour usage when the text is hovered over. The splash of the orange colour in the site really enables content to stand out and enables the page content to convey its intentions.
What is the effect of the layout on usability, legibility, accessibility of the content?
The site its self is not responsive and therefore when displayed on mobile devices the content is not user friendly and requires a “double tap”. Vinh’s site uses blog like content and the information contained however it is in my opinion that the layout and use of the grid in his site doesn’t allow for the content to shine.
Inherent effect on image and branding
How does the layout give credibility?
The content on placement on this site is very simplistic using 8 columns with 4 major columns within the grid system, the site when displayed on screen is snapped to the left hand side of the screen and not centred. I feel that this is not a good placement of the site in the browser and could lead on to a negative impact of the site. The placement within the grid that Vinh has used is well thought through and is common of the logical placement of content, the assumed main content in columns 1-6 and quick links and adverts in 7-8 this positioning provides prominence for the content in the main content area.
What structure is used to enhance brand image and identity?
Vinh clearly uses the standard placement of elements within his pages the navigation placement being at the top of the site and the clear calls to action (CTA) on them to indicate further options contained within them. The sites visual structure of the page by using black and white enables the use of impacting visuals and colours that can further extend the content within it thus enabling the site to be one that is identified as informative and useful as opposed to sites that offer fluffy images and garish colours.
Conclusion
Over the "span" of this project it has become increasingly obvious of the benefits of implementing the grid system in our web design projects, however i have found that during the creation of this page using the Twitter bootstrap and also the creation of another using the 960 grid that there are limitations in its use. Firstly to review the 960 grid i found that this system allowed for a rapid creation of an outline skeleton of a page on the fly, however on further investigations and experimentation. I was unable to make this page responsive using the "out of the box" option. After extending my research the site has a Javascript js file that if included will support this reponsivity. However during the research i found a number of links to the twitter bootstrap site and the pre created code snippets tempted me in to creating a copy of the page using this grid system. Initially i found that this system had a few differences to that of the 960, such as the
- <div class="span2 offset10">
- <a href="#" class="thumbnail">
- <img data-src="holder.js/300x200" alt="">
- </a>
- <p>
- </p>
- </div>
instead of the
- <div class="grid_2 prefix_2">
- <a href="#" class="thumbnail">
- <img data-src="holder.js/300x200" alt="">
- </a>
- <p>
- </p>
- </div>
and the subtle difference to miss a set of columns using ofset2 in twitter, prefix_2 in 960.
I have found through the creation and development of this page using the twitter bootstrap and my previous attempt on the 960 framework that my opinion of the grid system has been changing with the weather, in some instances the ability to in some cases rapidly deploy a set framework of a page is fantastic and this should not be sneared at. However the knock on efects of some instances of spans can result in a site looking great in one browser resolution and then compleatly falling to pieces on others when resize can be time consuming (talking from the experiance of this project). The more that i personal familarise my self on a specific frame work i find that i can see the wood for the tree's and see errors and issues. I would recommend the use and implimentation of grids to all, but, with a word of warning. select one and work with solely that until you are able to say that you have a full grasp of it, as in my experiance you can start to juggle class names and id's.
Important People in Grids and Grid Design
I would like to acknowledge a number of people that i have read excepts from books and journal that i feel are note worthy and helped me formulate my conclusions.
-
Brockmann
Brockmann“ 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. ” Grid Systems in Graphic Design.
This statement is soo true in the creation of a site. Even though Brockmann wasnt directly referring to web developement when he wrote this in his book the meaning of it still resonates in our work today.
-
Boulton
Mark Boulton 2005 "In the context of graphic design, a grid is an instument for ordering graphical elements of text and images."(Boulton M,5 Simple Steps)
Boulton is well thought of in the grids subject area having worked and with Khoi Vinh on the benifits and use of the grid system. Currently as can be seen on Boultons home page he is procrastinating however this may be a we deserved break from his writing and development.
The quotation above is a common view of many in this area using the grid as a tool will aid to the placement of images and text in a harmonious way that can improve in places image and brand by using a proven grid of beauty.
-
Hodge
"Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer’s point of view they allow for an organized methodology for planning systematic layouts." Sean Hodge, March 26 2008, Smashing Magazine, smashingmagazine.com
This statement encapsulates the common views of most developers. We as developers look to create sites that are astheticaly appealing and through the adoption of these systems we can present and promote brands and corperate content in a trusted and appealing way.
-
Vinh
Khoi Vinh ."I actually don’t use any tools, formulas or specialized calculator apps for my grid—aside from pen, paper and a simple calculator. I like to do the math myself, through trial and error, because I find it helps me think through the dynamics of the grid."(Vinh K,Subtraction, 29.08.2010)
This is madness, but shows how tallented Vinh really is, over the course of this project i have found my self in awe of those who pioneer the use and implement these grid systems and for him to use this approach is awesome.
-
White
Alex White “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.”(White A,Elements of Graphic Design explains the use of unity through a grid, 2002)
All though White is predominatly a graphic designer with no real web background the parallels in graphical considerations is key here. The link to Occam's razor and the quotations above must be considered in any design. I refer to Google and the placement of navigation and main content allowing for harmony on the page in comparision to the year of yahoo where information was thrust in the users face which can only lead to chaos.
-
Gerstener
Karl Gerstener in the 1960's designed A compound grid Capital Magazine system for their publications, the use of the term compound purely meant that the grid was of combined columns 6 and 4