OUGD504 Studio Brief 04 - Website Grids

In order to give the final website a clean and professional finished appearance it will be necessary to ensure the use of grid systems in the designing stage, these work very similarly to grids applied to physically printed products in the way that they divide the page up in to columns that all have gutters running between them, meaning that if the website is designed to the grid it will ensure that the professional and ordered aesthetic remains.

At the start of the unit we were given a small selection of different grid systems that could be put in place when we reached the designing stage and instead of just using these without thinking I decided to look in to them in order to see what they are about and If they are applicable of this module. This grid system is called the 960 grid, of which the 960 refers to the fact that the majority of computer screen around at its creation worked on a 960px wide resolution. This grid system acts to split the page space for a website in to twelve uniform columns each with a gutter between them, each column then represents a space 60px wide. In the designing stage the only rules are that these columns are to be used in whole, but it doesn't matter how many of the columns have to be taken up by the design aspect in question. The system surrounds itself around developing a structure that could be used in any circumstance of website creation to ensure rapid prototype creation and here it is below.

As this system is somewhat outdated now as the majority of computers now work at a dimension of 1200px wide but a newer grid system of which uses exactly the same thought process has now been developed and it is called the 1200px system. This system similarly to the previous one still surrounds itself around the fact hat the page is split of in to either a 12 column or 16 column grid system in which any umber of the columns cal be used to display information, but dissimilarly to the first each column takes up a space of 80px rather than 60px. This system still offers the same flexibility and concept but instead is much more applicable to modern day monitors as they all display a better resolution than 960px wide.

The other benefit to both of these grid systems is that they can be easily translated down in size to fit different other formats such as a 8 column system for tablet sized devices and 4 column grid for mobile phones making the grid system responsive and adaptive to the format it is being viewed in and these are the reasons it will be the grid system used to display my work.

Below is a display of how the three different grid systems can be used in different formats by just changing gutter and margin size, meaning that the website will be responsive between possibly the older viewers viewing on a desktop at home and the younger viewers viewing on the phone.