Grids in Editorial Web Design

John Cheesman

Introduction

The proliferation of commercial blogs in recent years has developed new conventions in the structuring of editorial content and has modified user expectations about how dynamic websites should be presented. The grid enables designers to compose complex fields of information that develop visual hierarchy and have the potential to greatly improve user experience.

The objective in organising visual communication with the grid system is to develop strong interrelationships between the typographic elements and recurring rhythmical proportions of text blocks, images and space.1

Kimberly Elam 2007 88

This essay will provide an analysis of four editorial websites that use grids to inform their visual structures. I will explore how their designs frame the content, building compositions of text, images and empty space and the effect this has on user interaction and brand representation.

back to contents ↑

Life + Times

Life + Times is a lifestyle website edited by the rap artist Jay-Z. Acting as his personal blog it provides articles, interviews and media relating to areas of interest in art, sport and technology. It presents this content in a contemporary and distinctive format, underlining its cutting-edge tone and defining itself as a trend setting collection of cultural material.2

Disposition of Design Elements

The homepage very clearly employs a symmetrical, uniform grid to accommodate square thumbnails for the latest updates to the site. These are set into six columns with five rows, defining a fixed width that is maintained further down the page. The grid extends to the edges of the viewport on either side, creating a timeline of entries with older pages on the right and newer on the left. The symmetry is broken only by an area of five squares in the top left, which instead of containing links to articles is reserved for an image of the artist. This creates a visual reference for the user, delimiting the content area and alluding to the concept of the site as a mind map or collage of Jay-Z's current interests.

grid overlay life and times
fig. 1 Life + Times homepage with grid overlay

The article pages themselves follow a more traditional layout comprising a wide area of content coupled with a narrow column for additional information, under a combined branding and page heading. The grid of squares from the homepage is reduced to three rows at the top of the page and a single row for related articles in the footer. This arrangement helps to create a clear distinction between content and navigation, with the blog-style posts seemingly given the freedom to fill the page in contrast to the horizontally constrained proportions of the thumbnail lists.

grid overlay life and times article
fig. 2 Life + Times article with grid overlay

Visual Hierarchy and Guidance

One of the key aspects of the tiled elements is their effect on visual hierarchy. The use of regular sized squares dispersed in a symmetrical pattern gives equal weight to each entry, eschewing the more standard practice of emphasising latest updates. This lessens the need for headlines and attention-grabbing text, allowing instead for the user to be guided by the their response to the visual impact of the photography. In terms of the full-page layout, this large block of links is clearly the focal point with the main navigation and branding placed underneath, partly below the fold in most cases. Clearly users are being encouraged to explore the site through this feature and to recognise its design as part of the brand.

life and times full length
fig 3. Full page view of Life + Times article

The grid effectively brings order to a range of disparate elements and, despite the variety of subject matter presented on the homepage, forms a gestalt3 that aids the user's understanding of the content and implies the continuation of the pattern horizontally. Upon following one of the links the page scrolls to the top of the heading, hiding the reduced version of the grid section and focusing attention on the article. Rather than continuing with the six-column grid the posts split the page width into four, allocating the first column for tags and meta-data and the rest for content and comments. This format encourages users to follow the flow of text and images down the page, with the left alignment creating a strong vertical line.

Image and Branding

The logo is designed to relate visually to the main grid and in particular the image of Jay-Z, with the cruciform arrangement of these squares matching the plus sign in the branding. The image itself appears to be placed behind the adjacent tiles, implying the close involvement of the artist with the site's content and effectively appropriating it into his brand. Along with the monochromatic colour scheme, these elements define a professional, understated style that compliments the dynamic content. The explicit use of grids to create consistent and balanced layouts reinforces the credibility of the editorial aspect of the site, fulfilling its purpose as a source of new and current trends.

back to contents ↑

Method and Craft

Method and Craft is a repository of video tutorials and articles relating to computer based design processes written by a group of graphic and web designers. Visually the site is both friendly and professional, appealing to an audience of creative and technically minded people. Their aim is to educate you on more efficient, creative, and engaging ways to create your design.4

Disposition of Design Elements

According to the colophon the website is built using a twenty-four column grid with a fixed width and no gutter spacing. This allows for a greater level of flexibility in laying out page elements whilst maintaining a strong visual rhythm and structure. The left-aligned design is split between a transparent sidebar containing the branding and navigation and a generous main content area. The homepage is split into horizontal sections containing symmetrically placed elements, all of which conform in width to the grid columns. In the absence of gutters, empty columns have been used to divide the elements and set the padding for the main content area. Whilst this may seem like a restriction, it creates a sense of space and identifies the minimum width from which the rest of the horizontal dimensions are calculated.

grid overlay method and craft
fig. 4 Method and Craft homepage with grid overlay

The topmost section of content comprises an image with an introduction to the latest article. This follows a similar format to the grouping of thumbnail elements below, emphasising their chronological relationship and the dynamic nature of the site's content. The uniformity of the thumbnail sections indicates their shared functionality, with only the icons in the top-left separating them into categories and creating a visual link to the menu. The balance of the layout is changed slightly by the asymmetrical footer, which whilst containing three elements of different widths, still conforms to placement on the grid and preserves the sense of considered scale and spacing present in the above sections.

Visual Hierarchy and Guidance

On the homepage the most important element is the top section containing the latest update, with a large image and emboldened heading. Further emphasis is achieved by the horizontal alignment of the logo and the preview image, creating a visual connection between the branding and the featured content. The top menu item, 'Latest', is highlighted on the homepage and is aligned to the centre of the top section, pointing from left to right and confirming the chronological relevance of the page flow. The menu itself plays an integral role as the main navigation for the site, which is reflected in its fixed positioning. Coupled with its placement on the left side of the viewport, this means that it consistently appears adjacent to the content in the main page area and links to it horizontally as the page is scrolled.

The generous use of white space around text, and in particular call to actions, makes it easy to read and helps develop the hierarchy between the different components. This is continued on the article pages and, whilst their layouts vary to accommodate the different types of content, the hierarchy of headings and subordinate elements remains consistent. In general the design seems to encourage navigation from the homepage via the thumbnail previews. Although the menu is prevalent in the layout, it only serves to filter the results presented in the main page by category.

full page method and craft
fig. 5 Full page view of Method and Craft article

Image and Branding

For a site that compares itself to …looking over the shoulder of your favourite designer5, good visual design is essential to the image and reputation of the brand. The designers of Method and Craft have used the grid to create spacious layouts that meet standards of alignment and continuity, making the content feel professional and authoritative. The repeated use of symmetric pairings to divide the page works with other design considerations towards a harmony of presentation, enhancing the credibility of the contributions and establishing an engaging user experience.

The fixed positioning of the relatively simple logo has the effect of continuously branding the content, reminding the user of the organisation that is publishing the expertise of the designers. To further enhance brand identity, a bespoke set of icons have been used to relate to the different categories as well as promoting user interaction. They are consistently placed in relation to thumbnails, headings and menu items and help create a solid structure for the range of content.

back to contents ↑

The Guardian

The Guardian is a newspaper site that presents editorial content in a wide range of categories, including videos, image galleries and data. As the site is constantly updated with new material, it requires a quality of structure and visual communication that makes it easy for users to quickly access information. This necessitates a much busier homepage than many other editorial sites and means that the design must make good use of the space available without disrupting legibility.

Disposition of Design Elements

The website makes consistent use of a simple, yet flexible, six-column grid with a fixed width. This allows the page to be broken into vertical sections between one and three columns wide, leading to a dispersing of elements similar in layout to traditional print publications. The homepage presents news and features from all of the categories in various formats, all of which lead to the full article page or image gallery. The two most consistent structural elements are the leftmost and rightmost columns, extending from the top of the main content area to the top of the footer. The middle portion of the page starts with a large image-headline element before splitting into two columns that continue all the way down.

Below the fold the layout can be summarised as two equal widths, each split into two columns in proportions that approximate the golden ratio.6 The lack of horizontal alignment between the columns leads to a predominantly vertical emphasis, with each section appearing as a separate feed of information. This implies the temporary nature of the content on the homepage and, along with the mini-headline approach, communicates a sense of snapshots leading to the full articles.

grid overlay the guardian
fig. 6 The Guardian homepage with grid overlay

The layout for articles appears to be less crowded with half of the page width given to the main image and copy. The narrow central column, reserved for links and related articles, ends a short way down the page and leaves a sensible amount of white space thereafter, separating the paragraphs of text from the right hand column.

Visual Hierarchy and Guidance

On the homepage hierarchy is largely achieved from the vertical listing of content, with the most recent articles near the top of the page. The two most prevalent elements above the fold are the central image and headline story in the top left. Like many newspaper front pages, these two unrelated stories share a similar level of emphasis whilst dividing the user's attention. The top-level navigation is deliberately separate from the main layout, taking up the full page width and making no reference to the grid in the alignment of its links. This is also true of the branding area above and has the effect of offering an alternative path into the content structure, clearly distinct from the layout below.

The idea of building a page from small blocks of text and thumbnails, confined to relatively narrow columns, aids in readability and makes it easier for users to quickly scan through numerous previews. In this case a more uniform approach, relying on the same format for each item, would have made the content less distinguishable and so hindered usability. Within articles the more generous spacing between text elements creates a clear hierarchy between headline, tagline and meta-data. The simply formatted paragraphs provide an easy reading experience and lead to a footer of links to related content, with the aim of encouraging further user engagement.

Image and Branding

full page of the guardian
fig. 7 Full page view of The Guardian homepage

As well as its website, The Guardian hosts many electronic versions of its newspaper including iPad and Kindle editions. It is therefore critical to establish a visual language that is recognisable across various platforms and links all of the content produced. The website achieves a distinct layout, referencing its print publication whilst clearly making use of online conventions and meeting user expectations.

In particular, the central column of image links on the homepage shows how a simple element, when repeated, can create a distinctive style and impress a sense of identity and commonality on the user. The relative complexity of the content and the clarity and composure with which it is organised contribute to the credibility already implicit in the brand. Users therefore expect the information available to be useful, insightful and interesting based largely on the balanced and user-friendly design of the website.

back to contents ↑

Creative Review

Creative Review is a magazine first published in 1980 that has successfully extended its commentary of visual design onto the web, embracing the possibilities for different media and user generated content.7 Their website must act as a canvas for displaying and investigating the latest developments in the industry, necessitating a minimal and functional design that represents the company as well as framing the content.

Disposition of Design Elements

The pages are set out using a fixed width, ten-column grid with no gutters, creating adjacent blocks of content in an asymmetrical composition. The resulting proximity of these sections leads to vertically aligned images flowing seamlessly across the page, whilst text is separated using padding. A one-pixel border is used consistently to divide the space, referencing the grid as an element of the design and defining columns of text and links that lead the user down the page. The article previews, although differing in scale, follow the same format of category heading, image, heading and intro text. This combination of consistency and flexibility lends itself to building a collage of features and content on the homepage, effectively communicating the essential information about updates to users.

grid overlay of creative review
fig. 8 Creative Review homepage with grid overlay

The header area shares its space between the branding on the left and a distinctive main menu on the right. The two halves are equally balanced with the dark grey boxes of the menu mirroring the white space surrounding the Creative Review title. The overtly grid-like design of the main menu visually relates it to the main page area whilst the use of contrasting shades is sufficient to distinguish it, emphasising its functionality as a direct portal into the different areas of the site. The Creative Review Blog handles most of the updated content on the site and is presented in a simplified two-column layout with the feed taking up the wider left side of the page and links, advertisements and other extraneous information occupying the right. Again, the closely placed page elements and efficient use of space contribute to the sense of a functional and economical design solution.

Visual Hierarchy and Guidance

full page of creative review
fig. 9 Full page review of Creative Review article

On the homepage the basic typography and colour scheme do little to emphasise elements or build a visual hierarchy. Instead the positioning and scaling of objects in alignment with the grid communicates their relative importance in the compositional whole of the page. The use of two basic widths, the larger equating to two of the smaller, provides a simple dialogue between main features and sub content, steering attention towards the most recent articles and streamlining the user experience. The uniform styling and placement of category links above each section emphasises the site's content structure, matching the items in the main menu and identifying the source of the features below.

The top row of the main homepage layout appears as the most prominent and contains the current issue of the magazine, the latest blog post and a list of subject categories. This prioritizing of particular elements and methods of filtering simplifies the expected user interaction and coincides with the efficiency of the design in general. The balance in presentation between different routes from the homepage to the full content meets the demands of user preference without overcomplicating the layout or disrupting accessibility.

Image and Branding

As an editorial authority on contemporary design trends, Creative Review attempts to disseminate the products of visual culture and maintain the discourse surrounding its development. In order to maintain this position the brand must set an example of good visual communication in the design of its website. The focus on an economical use of colour and typography enables the layout to emphasize images and call to actions, encouraging users to explore the content and creating an almost transparent frame for the editorial material.

Whilst the visual branding on the site may seem subtle, details in the design of the interface help to instil a sense of coherent identity in the user experience. The simple device, for example, of a partially boxed out arrow at the end of header links, when repeated contributes to an interactive lexicon that users engage when browsing the site.

back to contents ↑

Conclusion

The websites I have chosen to investigate in this essay represent a brief snapshot of the broad spectrum of editorial content on the web, presented as blogs, magazines, journals, tutorials and news. In broad terms they all deal with chronologically oriented content that is categorised and presented in suitable page templates. The use of grids enables designers to construct engaging front pages, pulling in feeds and updates from often vast databases of material. These layouts, through their use of the grid, are strongly related to conventions in print publishing and rely somewhat on user expectation from this medium to communicate effectively. However, the increasing use of videos and sound, and the possibilities for user interaction and social media have challenged designers to create flexible, content oriented visual structures that act as dynamic conduits of information.

back to contents ↑

References

  1. Elam, K, 2007. Typographic Systems. 1st ed. New York, NY: Princeton Architechtural Press. 88
  2. Gatecrasher. 2011. Jay-Z's new blog shrouding itself in secrecy as rap star follows footsteps of Gwyneth, Russell. [ONLINE] Available at: http://articles.nydailynews.com/2011-04-20/gossip/29470050_1_shawn-corey-carter-jay-z-beyonc. [Accessed 19 January 12].
  3. Morris, R, 1966. Notes on Sculpture, Part 1. Artforum, 4 no. 6, 42-44.
  4. Method & Craft. 2012. Method & Craft | About. [ONLINE] Available at: http://methodandcraft.com/about. [Accessed 21 January 2012].
  5. Method & Craft. 2012. Method & Craft | About. [ONLINE] Available at: http://methodandcraft.com/about. [Accessed 21 January 2012].
  6. Wikipedia. 2012. Golden ratio - Wikipedia, the free encyclopedia. [ONLINE] Available at: http://en.wikipedia.org/wiki/Golden_ratio. [Accessed 22 January 2012].
  7. Creative Review. 2012. Creative Review - - About. [ONLINE] Available at: http://www.creativereview.co.uk/about. [Accessed 23 January 2012].

Images

  1. Life + Times. 2012. Life + Times. [ONLINE] Available at: http://lifeandtimes.com/. [Accessed 16 January 2012].
  2. Life + Times. 2012. Yoshitomo Nara: A Retrospective | Life + Times. [ONLINE] Available at: http://lifeandtimes.com/yoshitomo-nara-a-retrospective. [Accessed 21 January 2012].
  3. Life +Times. 2012. Three’s Heaven | Life + Times. [ONLINE] Available at: http://lifeandtimes.com/three’s-heaven. [Accessed 20 January 2012].
  4. Method & Craft. 2012. Method & Craft. [ONLINE] Available at: http://methodandcraft.com. [Accessed 21 January 2012].
  5. Method & Craft. 2012. Method & Craft | Invisible Deliverables. [ONLINE] Available at: http://methodandcraft.com/articles/invisible-deliverables. [Accessed 23 January 2012].
  6. The Guardian. 2012. Latest news, sport and comment from the Guardian | The Guardian. [ONLINE] Available at: http://www.guardian.co.uk/. [Accessed 23 January 2012].
  7. The Guardian. 2012. Latest news, sport and comment from the Guardian | The Guardian. [ONLINE] Available at: http://www.guardian.co.uk/. [Accessed 23 January 2012].
  8. Creative Review. 2012. Creative Review - Home. [ONLINE] Available at: http://creativereview.co.uk. [Accessed 24 January 2012].
  9. Creative Review. 2012. Creative Review - Oh wow, it's Daniel Arsham. [ONLINE] Available at: http://creativereview.co.uk/cr-blog/2012/january/daniel-arsham. [Accessed 25 January 2012].

About

Essay
Published 25/01/2012
2986 words
Website
Less Framework 4
Fluid Baseline Grid
HTML 5 & CSS 3.0