Introduction

In this critical essay, I will be analysing three very different Portfolio sites. The first site I have chosen is one that uses a relatively detailed grid structure to the maximum ­– to conform to and to break. The second site is one that uses a generic and simple grid structure. The third site, I decided to choose a piece of Responsive Web Design, to look carefully at, analyse and evaluate the way in which grids can help in assisting a Responsive layout.

Website One: benmartineau.com

This website is 960px wide, fixed width and horizontally centred within the browser window. The site applies a basic grid consisting of five even columns and a gutter in between each column, as well as a baseline grid.

Image 1 – Home

Image 2 – About

The main navigation within the header (made up of five list items) is strictly aligned to the columns in the grid. This makes me wonder if the choice to use a five column grid in fact originated from the navigation. A problem could arise with this strict layout, if the number of list items in the main navigation needed to change as it would break the grid, or at least require a re-think.

Throughout the site, there are five faint lines running vertically from the left of each list item in the main navigation, which actually echo the basic vertical grid of the site. These lines increase the orderly feel, and are not only used for content alignment, but also to enable breakage in the structure. The strong grid allows the designer to break it in places to enhance an element. Thin lines are tactfully applied across the site to enhance the impression of structure within the content.

The plain white background and the overall spacing on the site works well in being visually clean.

In terms of content structure, I notice some patterns that occur. Within the vertical grid, the first column seems to be loosely used as a margin area where the page number is placed and the heading then starts in the next column. In some circumstances the first column is also used for sub-headings, introductions or extra links.

The fields on the pages are of varying heights but are all aligned where possible.

Image 3 – Stream

The ‘Stream’ page is very well done in my opinion and works well for a very active designer such as Ben Martineau. The content really shows an active portfolio rather than a static one. This page shows that Ben is actively gaining inspiration in his daily life which proves his passion. The page is laid out neatly, and rigidly conforming to the five columns.

Image 4 – Contact

The ‘Contact’ page is not an actual page, but a panel that pops down from the top. This too follows the grid structure, with one section of information taking up one of the five columns in the grid, and the following two sections taking up two columns each. At the bottom of the contact panel there are icons with accompanying names – each taking up half a column and therefore showing that although the sites basic grid consists of five vertical columns, it is also made up of ten units.

Images 5, 6, and 7 – Projects

The above three images show the ‘Projects’ page in it’s different forms – the designer has given the user the option to change the view of the page. In the first view, the work is displayed as relatively large images, spread over two columns per image and with the name of the project written in a box on top. The second view shows the work displayed as smaller images, one per column and the name of the project placed in the right hand column of the image. The final view has no images, just the name of the project on one line per project.

These three viewing options show how the designer is playing with his grid system and as well giving some control and inter-activity to the user. Some may think otherwise, but in my opinion this is a pointless function because it doesn’t add any use to the site. The user has already viewed the work in one format and has no real need to view it in other formats. I would of course agree with a function like this if it was due to legibility reasons, however on this page, the text is the same colour and size in each viewing option so it serves no real purpose.

Images 8 and 9 – Beef Essentials

The last two images (above) show the pages for each individual project, this one being Beef Essentials, an App design. Image 8 shows the overview of the project, the brief, sketches and the App download button. The information on the page is very neat, well laid out and gives the user exactly the information needed about the project. In the fist column, the headings for each point have a faint, short line at the top which lines up with the information in the next columns. Because it is not a full length line all the way across, this technique subtly draws the attention of the user from each heading to the appropriate content, making the user feel guided but not forced and the page doesn’t feel too rigid. This is a technique I previously mention that has been frequently used in the site.

The last images shows the gallery of the project. Images are displayed on a charcoal grey background and the images don’t conform to the five column grid, however they are centred in the page and the ‘prev’ and ‘next’ buttons sit on the left and right edges of the grid.

Overall I think this website works really well with its playfulness with the grid, by accentuating it using lines and then breaking out of it in places. The five even columns give a good amount of flexibility within the structure so that each page can be quite different. Unlike a lot of sites, which often have a column for main content and a column for a side bar, this site has no set places for anything which is interesting and I think works well to challenge the norm. The site is clear and concise, although the main problem I have found with this site is that there is no obvious call to actions anywhere, since all the text is quite small apart from the headings, and all the text throughout the site is the same colour. The problem could be easily rectified if the designer wished, as he could use the same idea of words breaking out of the grid, a change in colour or text size to accentuate a call to action if he felt it was needed.

 

Website Two: jamesdeangelis.com

This site is left aligned within the browser window and uses a generic two column grid at first look and for the base structure of the site. The main navigation is in the left column and the main content, as expected, is in the considerably larger column on the right. The site is contained by the faint line on the right hand side of main content column, keeping it at a restricted width and the two columns are also split with a faint line. A similar theory to the last website, the faint lines are possibly there to make the user feel at ease, and then are broken in order to accentuate a element, in this case just the logo ‘JDA’ breaks the grid.

The faint arrow-like symbols shown in the top left in every page confuse me. They look like up and down arrows but they are static and cannot be clicked on. It could possibly be some kind of logo, but it is not well placed and confusing to the average user.

Image 1 – About

Image 2 – Contact

There is a large amount of margin space at the top on the site, leaving the logo on it’s own and all the content starting below. The content on the ‘About me’ and ‘Contact’ pages start at the same level as the content in the navigation column starts. However on the ‘My Work’ page, the content starts slightly above which is strange and inconsistent.

Image 3 – My Work

The main content area in the ‘My Work’ page has been split into three columns in order to display the images. These three columns are of equal width to each other and when considering the padding to the left of the navigation column, the three columns are also of equal width to the navigation column. This reveals that the site is actually divided into four equal columns, although this is not necessarily apparent on the previous pages. The sub-menu for the work pages is placed at the top of the central column with a blank section always remaining in the left hand column next to the sub-menu. Quite a random positioning, but it does gives the sub menu some breathing space and it works okay. JavaScript is then used to elegantly switch between image categories from the sub-menu. The images move around but always conform to the three-column grid within the main content area.

Overall the website uses a simple and well-known structure, consisting of a left side bar for the navigation, logo at the top left and the content in the middle. The simple column grid is utilised particularly well with the images displayed on ‘My Work’ page.

 

Website Three: stephencaver.com

This website uses a fluid grid system and flexible images to achieve a beautiful Responsive Design layout. It is interesting to see how grid systems are used to assist in Responsive Web Design.

Image 1 – Home

Firstly I am looking at the whole website at it’s maximum width which appears to be around 1150px. It is not very obvious at first look as to what sort of grid system this website is using and it took trial and error before I found a grid that seemed to fit. In my diagrams I have overlaid a 12-column grid with a thick gutter (around 20-25px at maximum width).

My initial approach to working out the grid system used, was to let the four black blocks on the home page be my initial guide. I divided the page in 4 even columns with a gutter in between the blocks. It was visibly not a 4 column grid system, however when doubling the columns to 8 and every other line appeared to be in completely random positions, I started to wonder whether I was searching for a non-existing grid. After much experimentation I arrived at my 12 column grid with gutters, however not every element conforms to it suggesting that it is using the grid rather loosely.

There are some strong elements on the site, such as the 4 black blocks on the home page and the top navigation which has a vertical dotted line on the left of every list item. One would imagine that these would be used as a guide for aligning other objects within the site – but it is interesting to note that this is not the case. These two groups do not correlate to each other and neither do they align to anything, anywhere on the site. In fact, no element on the site vertically aligns to another which is curious since it is usually a natural rule in Graphic Design to line things up. It is only once the grid is in place that we can begin to understand some structure in the design. The elements align to either side of the gutters, in no particular pattern or obvious reason. It is a beautiful site and a portfolio of a well-liked designer, so there must be reasons behind the choices made.

Image 2 – Portfolio

Image 3 – Journal

Image 4 – Respect

Image 5 – Contact

There are however definite consistencies between the pages of the site. The contents of the header, which include the top navigation and the logo, remain in place throughout the pages, as do the footers links and information. The title for each page remains the same width and height.

The main content structure varies from page to page, however in some instances, there are similarities. In most cases there is vaguely a right side bar, which remains in the same position in each page, although still not lining up with anything else on the page.

The structure of the ‘main content’ is generally aligned to the grid in some way. However, there are some occasions where the alignments are slightly off. There are two pages that are of a similar structure to each other: the ‘Vitals’ section on the home page, and the ‘Respect’ page. Both are structured by splitting the information into 4 even columns, yet not accurately aligning to the overall grid. Column one, three and four seem to line up with the grid but column two is slightly off which is we can see clearly by the footer information which are not aligned. The form on the ‘Contact’ page is another element that does not quite align to the grid.

The overall look and feel of the site is comfortable to use and delightful to look at. The use of faint and dotted dividing lines that do not connect to each other is a good way to maintain order without the content feeling enclosed or rigid. The painterly background image and the loose use of the grid, results in an overall more interesting site to look at and use without being chaotic.

Now I would like to look at how the Responsive Design works and how it conforms to the grid, if at all.

This website has three stages where the site is completely re-designed to suit each size window. The structure an layout completely changes, therefore it is interesting to see whether the original grid is still relevant. What happens in between these three stages is also interesting because the elements on the page perform different movements to adapt to the re-sizing. The in between stages are more subtle changes and the general layout stays the same, therefore the original grid system is still used – however it is scaled with the browser window.

Image 1 – Home (First image repeated for the purpose of comparisons)

Image 6 – Home

Image 7 – Home

Image 8 – Home

The first stage is the maximum width, which I initially spoke and analysed (I have inserted the maximum width image again to show the comparison). I will now explain the changes that occur in between the maximum width to mid-width (Image 1 to Image 6). In fact, the points that I will mention will actually apply to all the stages of re-sizing.

All typography remains the same size and therefore telling us pixels are used as the units in this case, however the line breaks do change according to the width or the container. The main titles for each page has to fill the width of the page otherwise the structure will break, so unlike the rest of the text on the page, these titles are image files which scale up and down when the widow is re-sized.

There are other images on the page which stick to their sizes, such as the logo, the small cartoon image on the home page and the poster image within the journal. The portfolio page consists of two images overlapping each other: the image of the work and the image of the designer. These also maintain their original sizes but overlap using absolute positioning.

The background images do not re-size. The background images of the body appear to consist of two images: the sky positioned at the top left and the mountains image positioned the bottom right. There is a neutral colour in between which merges the images together well and when the site is re-sized, it works beautifully. There is also a repeated background image for the black boxes which allows the boxes to change shape whilst the background image remains the same size but repeated to fill the changeable boxes shapes.

The next stage is when the window is re-sized to under a certain width, the entire layout begins to change and shuffle around to accommodate the screen size. The logo moves to the top of the page whilst the top navigation spreads evenly between the page width, yet not conforming to the grid. The black blocks re-order themselves so that instead of a row of 4, there is now two rows of two – these still work with the grid. Where there is main content and a right bar – in this layout they rearrange underneath each other.

The footer is interesting to analyse because it moves in order to cater for the background image of the mountains. At first the footer is on the left, leaving space on the right for the image. Once the footer content begins to cover the image, it re-shuffles so that it can be as short as possible and adds a large margin area underneath to make space for the image. The footer information still conforms to the original grid.

The third and final layout is one suited to small devices such as a mobile phone. Unnecessary information and ornamentation is now eradicated and only the vital components remain.

The logo stays centred at the top of the page and there is now only one navigation menu where the list items are stacked underneath each other and have no sub heading or black boxes. The page title remain in the exact format as always – a scalable image. The site is now a one column layout which is very clear and extremely user friendly. The background images stay in their places and keep the artistic look and feel of the site. Unnecessary information is removed, such as the ‘Vital’ section.

 

References:

Websites

www.alistapart.com/articles/responsive-web-design
www.benmartineau.com
www.jamesdeangelis.com
www.stephencaver.com
www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems
www.thegridsystem.org
www.960.gs

Books

Ed. Wiedemann, J. (2005). Web Design Portfolios. Italy: Taschen.
Marcotte, E. (2011). A Book Apart: Responsive Design. USA: Happy Cog.
Vinh, K. (2011). Ordering Disorder: Grid Principles for Web Design. USA: New Riders.