The grid system is a tool: much like a metronome or 'click track' used during the recording of music, such tools are used to provide a mechanically precise, predetermined framework to aid the production of a creative task. The problem with this analogy is that both grids and metronomes are computer-accurate, leaving less room for human nuance and colour. I would argue that there is such a thing as being too precise and rigid: in music, although it is an important thing to be 'in time' with a metronome, being as precise as the metronome, for example like a drum machine, can make music sound robotic, repetitive and predictable. It is my opinion that same can be applied to grids: page layouts have the propensity to look regimented when this framework is applied. Therefore, the thrust of this essay is that grids can be a useful tool in some cases, but the use of them can dictate a sense of strict, denatured order to the page if used in a certain way.
Josef Müller-Brockmann states that a grid is “an aid, not a guarantee” (Müller-Brockmann, n.d.): its purpose is to be utilised as a set of guidelines or parameters. It is not a 'magic wand' as such. By its very nature then, a grid will not make a designer instantly create something aesthetically or functionally pleasing to the user. Müller-Brockmann goes on to say that the employment of them is “an art that requires practice” (ibid.). From my own corroborative testing, I would argue that this is definitely the case: like with any tool, the more accustomed the user is to its limits and capabilities, the easier it will be to use the tool. However, there can be a tendency for first-time users to let the grid dictate what the design should be. I do not necessarily agree that the use of grids is an 'art', like Müller-Brockmann appears to. This seems to posit the idea that to create a layout using guidelines is an artistic venture: I would disagree and say that it is about as artistic as painting by numbers. I believe that the real 'art' comes from relying on the eye to tell whether a layout is effectively composed or not.
Nevertheless, I can see certain merits in using a pixel-specific tool like this: namely, that it can act as a ruler for the precise lining-up of objects. Imperfections in layouts can be unsightly and annoying: for example, if a set of navigational buttons do not precisely line-up to the pixel, then it can make a website's branding look unprofessional. This could potentially lose the website business due to a worsened user experience, so it is an important point to consider. However, I would argue that grids do not have to be used in this context. The designer will still have to position elements to the pixel in CSS regardless of whether they decide to use a grid system or not. This can then be tested by outlining block level elements in-browser. Perhaps this comes down to more of a question of what the designer prefers to work with: numbers or visual aids.
'960.gs' became very popular in recent years perhaps due to the grid area being split into 12 or 16 columns, thus dividing the grid into easily manageable base-10 numbers. This offers designers the ability to at least work to more memorable numbers, making for an easier production. However, some have argued that it is steadily becoming outmoded. The reason for this is because, as current trends show, “most designs are set at 13px font size or higher” (La, 2010) and so the allocated twenty pixel gutter is too small to serve as effective whitespace. Another issue with 960.gs is that the target screen resolution of 1024 by 768 pixels, the size of monitor that it was designed for, is also becoming outdated. Statistics indicate that this size of screen was only being used by thirteen percent of total internet users as of January 2012 (W3C 2012) and has been in decline ever since (Stat Owl, 2012). As this is becoming an outdated size to design for, 960.gs will most likely become less popular in months to come as screens with a higher pixel density per inch and other high definition screens become more widely used.
In more recent times, with the advent of responsive web design, grids have also moved towards being 'fluid' to cater for a range of browsing platforms. One such grid is the '1140 CSS Grid'. This has been developed to make use of more modern screen sizes, in particular 1280 by 800 or 1024 pixels. I would argue that this is an example of a better grid than 960.gs which is, in contrast, rooted in smaller, fixed-width layouts. It is my opinion that, if a designer simply must use a grid, he or she should work with one that is appropriate to the era of web design in which they find themselves situated. So, fluid grids that cater for screen sizes larger and smaller than 1024 by 768 pixels would be the right option in my opinion.
Websites whose content is concerned with web design, for instance grid template sites, designers' and design agencies' sites make for interesting analysis. This part of the essay will attempt to highlight some of reasons why I believe grids can be useful and why they can be restrictive.
Simple but effective: Analog.The Analog/Fictive Kin website uses a six-column grid to help structure its layout. This is set in a 980 pixel wrapper as a fixed layout. Main content is situated in the four rightmost columns with two columns to the left comprising of whitespace, subheadings and graphics. At a glance, the website is simple, clear and precise. The positioning of text to the right and subheadings one column to the left coupled with the generous resulting whitespace allows for easy 'skim-reading' and skipping from topic to topic quickly. The graphics have also been designed with spatial-awareness in mind, yet interestingly, do not completely fit into the grid modules. I think that this is a good thing and perhaps is necessary, as the layout could become too exacting otherwise. As simplicity is what makes this webpage and its branding pleasing to the eye, it could be a regressive and damaging step to make the images fit the grid any more than they do already.
The sheer simplicity of this site makes the copy seem more inviting and readable, in my opinion. In terms of visual balance, the six-column grid creates a large amount of whitespace which adds to the 'ma' of the piece. This increases the credibility of the branding and makes the page more memorable, I would add. The visual hierarchy of information on this page is emboldened by the use of subheadings that are offset to the left of the main copy. This creates a clean gutter that divides the images and headings from the content and acts as a rule that guides the eye down the page to the multicoloured image: another memorable element. Everything about this page has been designed to be instantly recognisable. Even the slab-serif typography connotes a sense of straightforwardness that is also given off by the simplistic page layout.
A great feature of a six-column grid is that it is easy to design with the rule of thirds in mind, and create a more aesthetically composed piece rather than grouping objects in multiples of two. However, it could be argued that the six-column grid used is only really appropriate for a one-page placeholder website such as this with limited content. A more elaborate site would probably be difficult, perhaps even impossible, to fit into a framework like the one in question. A criticism I would make of the use of a six-column grid is that it has a tendency to look rather rigid: although it guides the creation of very simple, uncluttered designs it does evoke a sense of rigidity and very strict order, more so than a grid with a larger number of columns.
Another case study that, in my opinion, is a well-crafted example that makes use of a grid system is graphic and interactive designer Marie Laurent's portfolio page. 
Dynamic rule breaking.
Unconventionally, Laurent has skewed what was probably a fairly large, low column count grid, rotating it to produce a diagonal, herringbone-type design. I find this to be a fantastic, striking piece of work that is, like the Analog/Fictive Kin site, instantly recognisable and memorable. In fact, I would say it more visually pleasing to me than said comparison. Breaking the rules in this way seems to have created a real sense of dynamism to the site, that is captured by the arrow-like centrepiece. Due to this sense of direction and movement, users are instantly guided across the plethora of work that is available for them to view. The fact that the layout spills out of most viewports, as this content area is over two-thousand pixels in width, adds to the weight the message that Laurent appears to be expressing: “I have made a lot of good design, hire me”.
A downside to this type of design is that it is probably impossible to apply to a word-heavy website, such as a magazine or newspaper site. People are not accustomed to reading large amounts of text in diagonally slanted columns. Arguably, this only really works for aesthetic effect in concrete poetry or other short passages of text where the effect is required. Laurent overcomes this obstacle by presenting the small amount of text she does have on the site in standard rectangular pop-up boxes. This goes against the rules set out by this diagonal grid, yet is necessary in order for the information to be more easily understood. It would create a worse user experience to stick to the grid in this context. So, again, it is noticeable that there are many times in which it is preferable or even paramount to the success of the page, for designers to stray from the grid.
'The Grid System'Orderly: The Grid System. is a website that uses a six-column grid and, in the main content area, every column has a topic devoted to it. Each of these topics has several article stubs that flow vertically down the page. Although this does organise everything very neatly, the design feels too organised and slightly claustrophobic. This is probably partly to do with the narrow column widths given for copy. To me, it smacks of 1960's Eastern Bloc high-rise apartment design: incredibly boring and formulaic. It is almost oppressive and unfriendly. The rule of thirds is very loosely incorporated, but only vertically. The golden section is used: the vertical relation from the main content area to the footer area does equal the golden ratio. This aspect of the site should be more visually pleasing, yet is below the fold on monitors with a vertical resolution of one thousand pixels or less so the effect is lost to a large proportion of visitors, I would argue.
The 'Golden Section' in use.The search box is relegated to a column's width: in my opinion, this is too small and could easily negatively affect user experience. It is also a light shade of grey that could easily be missed, so this is hardly a call to action. I would suggest that it is the grid has decided this for the designer. This search box could have been made bigger and could have broken out of the grid to emphasise its importance and improve visual hierarchy: people are used to browsing with search engines, so it is important to offer a noticeable search function on any site. Nevertheless, there is a nice vertical rhythm to the page which seems to have come from adhering to the grid. Every article is spaced out by two baselines: this gives an effective amount of whitespace, vertically. However, I would say that there is not enough whitespace between the articles horizontally, resulting in a cramped feel to the layout. The branding of this site is given some amount of credibility by being neat, yet I feel as though the impersonal style given off by the narrow, precise columnar layout, the stark black and white colour scheme and the fairly authoritarian Helvetica could easily diminish user experience. It did for me.
Maintaining a website's vertical rhythm via baselines can be “incredibly difficult” as Jason Santa Maria advocates (Santa Maria, 2012). I would agree and argue that, having tried to stick to a baseline grid before, it can be very time-consuming to achieve grid-perfect vertical spacing. For jobs that involve CMS and clients who will edit content, it is not worth the time spent because it is likely that there will be assets like images or other arbitrarily sized elements that will throw the vertical rhythm off, especially if said assets move, expand, or are just an odd amount of pixels in dimension. Santa Maria suggests that adhering to baselines in an increasingly 'fluid' and responsive medium is made very hard, also because the various browser and platform rendering differences that can and do occur (ibid.). Overall, following a baseline grid's vertical parameters is a long process that I would argue is is best left alone, unless the designer is working on a simple single-page layout, holding page or other static small site that does not have too many variables.
Karl Gerstner, a prominent Swiss graphic designer, argues that grids are “a priority programme for a content as yet unknown” (Gerstner, n.d.) Whilst they do act as a 'priority programme', I would disagree with the latter portion of this statement, as I feel as though the content should be the first priority and not be 'unknown'. Designers should know at least roughly what the content will comprise of before starting work on a design because of context: when 'unknown' content becomes 'known' and displayed within the design parameters that have been created for it, the actual user experience could be terrible. For example, a sombre piece of writing set in a wacky layout: design and content should have roughly the same 'tone'. Therefore, I would in most cases opt for a 'content-out' approach, as I would advocate that content is what brings users to a site in the first place.
There is another movement that suggests that designers should start with a 'mobile first' approach, meaning that a site should be designed for small, mobile resolutions first and all other larger display sizes afterwards. In the context of grid systems, this could potentially be a 'sticking point': most fluid grids at mobile resolutions are only really big enough for two columns, thereby making it difficult to imagine or design what a full-size version of a site designed to those parameters would be when thought of in terms of grids and columnar width. If grids were taken out of the equation, perhaps there would be less of an expectation of how the larger sites should look in relation to the mobile version. This is based on the idea that it is hard enough trying to portray reliable and consistent branding at different device widths without grids changing in size and number of columns at every typical viewport size.
A final point to raise is that it seems beneficial to 'break out' of the grid to highlight certain aspects of a site that are deemed to be noteworthy or important. This is noticeable on sites like the Analog/Fictive Kin page in which the graphics are not fully contained within each column. It would appear that the eye is naturally drawn to chaos surrounded by order: it is important to exploit this, I believe. Calls to action could very well have more of an impact on the user if they are set out of the rhythm of the rest of the page. For this to work, though, it is necessary to have order in the first place. Whether this is designed using a grid is up to the designer. However, if a grid is used, as Mark Bolton says “breaking the grid does require an understanding of how a grid is constructed” (Bolton, 2010). I would agree with this statement as, like with many things, in order to break the rules, one should firstly know how to play the game. However, where my thoughts differ from Bolton's statement is that order can be created without grids, and hence disordered without them also.
In conclusion, there are definite uses for grid systems, for example in standalone pages and other simple sites. Newspaper and magazine websites could also benefit from using a grid as it mimics their print counterparts, thus bringing more credibility and brand reliability to the site. Yet, as said before, I have noticed a tendency even in professional designers' sites that use grids to look formulaic and unwelcoming. Baseline grids make this even worse, I would advocate. Achieving perfect vertical rhythm according to baselines is a time-consuming pursuit and is not necessary, in my opinion. With grids, there is no one-size-fits-all solution: there is no one grid that, from my perspective, designers should use every time they start work. It seems as though implementing a grid system should be considered on a case by case basis and is something that both designer and client should discuss in detail with a primary focus on user experience rather than sating anyone's burning ambitions to be regarded as 'designers'. The questions should be raised: 'is the use of a grid likely to impact on user experience in a positive way?', 'will the outcome be easy enough to maintain?' and 'will it strengthen the branding or not?'. If the answer to all of these questions is yes, then a grid could be used, but with a degree of caution.