Before we do anything...
What are we doing?
We're designing websites.
We're making it easy for web users to have conversations and interact. We're adding value visually and interactively. We're using the strengths of the web as a medium to create new experiences.
If we do these things then we are enhancing usability and trust in the brand.
What do we need?
We need a shared understanding.
One of the strengths of the web, platform and community, is the ease of sharing. Knowledge is shared and best practice spreads. Web standards develop, conventional approaches are adopted, and a visual code has evolved. This is important in making the web a more unified experience regardless of device or context.
This visual code is universal (or easily learned). It includes conventions from print design which themselves are based on our innate sense of size, contrast, alignment, positioning, etc.
But we need some rules for our visual code and conventions. We need a basis for our design decisions. We need something that is pleasing to the eye.
We need grids.
The use of the grid as an ordering system is the expression of a certain mental attitude inasmuch as it shows that the designer conceives his work in terms that are constructive and oriented in the future.(Müller-Brockmann, 1961)
What are grids?
Intersecting Lines...
Grids were borne out of a Constructivist design philosophy.
They are, in essence, a collection of columns, gutters and intersecting lines, at regular intervals. They are the solid foundation on which our design is built.
In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images.(Boulton, 2005)
... and Ratios
In order to organise content we need rules for dividing space within the grid. This is done with the use of a variety of ratios one of which is particularly common in nature. As architects, print designers and others have learned to use them so must web designers. They appeal to our innate sense of aesthetics so by using them in our grids we improve the composition of our work and contribute to enhanced understanding.
Common ratios include 1:1, 2:1, 3:1, 3:2 and, in print design, 1.414:1 (A4 paper). These ratios are used to divide the space horizontally and vertically, and proportion elements that create the basis for the content areas in our visual hierarchy. But there is one ratio that is of particular interest in visual design - 1.618:1.
1.618:1 is the Golden Ratio (symbolised by Phi φ), or the Divine Proportion, and is found throughout almost every field of study from micro to macro level.
It is often represented as a Golden Spiral where each segment is a Divine Proportion of the last. (Simes, 2011)
What about grid systems?
Good question.
As the web development community has realised the importance of grids over the last few years they have become more widely adopted. And with this developers have come up with new ways to address how grids have been implemented on the web.
Let's take a look at a few...
Grids on sites offering web-based services
Mail Chimp
Brand Image
As soon as a user scans the page the clear visual hierarchy gives an instant understanding of the relative importance of each item. There is a sense of order but also of momentum which gives the user confidence in the brand.
The layout and content make the service look modern and professional. The large smiling brand mascot increases the trust of the user. It looks playful and friendly reflecting the personality of the company (2). The size of the mascot is balanced by the emphatic <h1> - a clear and concise service statement.
The bold statement of Mail Chimp's unique selling point with some explanatory text (3), plus a call to action and "Need convincing?" link (6) all contribute to trust in the brand.
Position of Elements
960px grid with ~18px base line height. 2-column header containing brand mascot and large type is bold and high impact. Elements are kept in proportion using grid alignment, for example Mail Chimp's head and the site's <h1> / unique selling point (4).
Below the fold, the "What's New" section is split into 4 columns which balance well with the 2 columns above and indicate their lower level of importance.
Whitespace below the logo combines with the Mail Chimp mascot appearing to walk across the page creating a sense of progress (5).
Call to Action button contrasts and appears logically in the flow of the visual hierarchy created by the grid. Whitespace to the right adds emphasis to the CTA (6). This content also creates a diagonal line and the whitespace reflects the space in the top left. The overall effect really contributes to the forward motion. The header content seems to be emerging from the bottom left corner.
Single- and multiline titles take up the same amount of space in the grid so content below does not get pushed out of alignment (7). Use of whitespace is important to maintain this balance.
Visual Hierarchy and Usability
The irregular whitespace below the logo makes it stand out from the rest of the content. (1)
Clear page title is always important and this is balanced by the whitespace to the right (8). The large text fits proportionally and lines up with the home page.
Again the grid allows content to be divided clearly and evenly to make it more navigable and usable. The number of divisions, or how often the ratios are used, communicates visual information about the importance and uniqueness of the content.
Navigation is laid out horizontally which contrasts with the grid-based layout of the main content links (9).
Campaign Monitor
Brand Image
The brand identity area is a similar size to Mail Chimp's with a comparable size logo (1) and the header area compositions are alike. The layout is conventional, with the main navigation running horizontally at the top. The placement meets the user's expectations and the subtlety indicates that their software will not be excessively branded. This is further reinforced by the mouse over effect and the green diagonal tag that draws attention by contrasting with the other lines in the layout (4).
Display of client logos adds confidence and their size and position balances with the screenshot above.
The screenshot of the Campaign Monitor software looks clear, informative and easy to use which adds trust to the brand (4).
Position of Elements
Appears to be a 960px grid with 18px baseline (5) using a number of column arrangements to present the content.
The grid allows the header content to be positioned evenly with the CTAs to create vertical balance. Their relationship is then visually reinforced and horizontally balanced by the software screenshot (4).
USP and brief explanation are well proportioned (2) to make a brief service statement and convince the user to click one of the call-to-action buttons immediately below (6).
Calls to action appear in colour on home page (6) and in contrasting silver in the header area on many other pages (9) positioned to balance with other content.
Visual Hierarchy and Usability
Page title is in a large clear font (7) and balances with CTA on the right of the header (9) creating an equal level of importance.
A sense of rhythm is created by the height of the menu bar repeating through the white space around the page title (7) and CTA (9). There is also a rhythm in the list items describing the services (8) and the icons create visual interest. This all contributes to usability and legibility of the content.
There is quite a lot of content vying for attention on the home page (3). It is obvious from the arrangement of the elements which are related. Use of graphics and different typography creates a contrast with the less important content below.
Mint
Brand Image
The overall layout is clean and clear with pleasing porportions derived from the grid. This gives the site a professional and trustworthy appearance. The visual hierarchy is well established and follows convention with understated brand identity (1) and emphasis on the unique selling point with longer explanation followed by call-to-action buttons (2,3).
Similarly, navigation and login are positioned horizontally and in the top right to balance the logo in the position the user would expect, top left. By showing that they use conventions Mint are indicating that they are not here to confuse the user but to make things easy and understandable, i.e. they build trust.
Software displayed on a number of devices gives confidence in the service (4). The different devices also conform to the page grid adding to the professional and trustworthy feel of the website. This continues on all pages of the site.
Position of Elements
The 16px typographic baseline gives the whole page a vertical rhythm and a conventional layout leaves the user instantly comfortable with the positioning of the content.
The content is arranged in 2 columns of unequal size (5) - using the sketch grid below they are about 7.4/4.6 columns, a ratio of 1.61 - very close the golden ratio of 1.618.
This proportions and positions of the content areas established by the grid are complemented by the content. This size of the as well as the positioning of the elements communicates their importance with nothing more than a glance (6).
On the "What is Mint?" page the content is arranged in 2 equal columns with each row covering an aspect of the service (8). The content and image alternate sides to add visual interest. Their proportions, derived from the grid, keep balance within the design.
Visual Hierarchy and Usability
Simple grid structures can make very aesthetically pleasing pages when interesting things are done with the content types. The page has a nice rhythm between the text and visual elements. This maintains user interest making the page more effective at sharing information (8).
The pairing of large and small text in header/content groupings is a common theme and makes site easy to scan. The grid gives all elements logical and predictable proportions making the site easy to navigate visually (2,6,7).
Combined with the contrasting colour, visual emphasis is achieved with the CTAs by positioning them in the flow of other elements and considering them as their own content areas in the grid system (3,9).
Squarespace
Brand Image
Squarespace is another example where the brand identity hinges on the big idea or USP of the service. The logo is positioned as expected but the size of the type for each makes it clear which is the focus (1,2).
The USP statement and sub-header are offset by the contrasting and bold call-to-action and micro-copy. The main navigation is very simple and balances with the logo (1,3).
The presence of the micro-copy is reassuring and reinforces trust in the brand (4).
Position of Elements
16px baseline used in a basic 3 column layout which continues as a grid of content below (6). The grid system allows different elements of the layout to group visually and to stand alone in their own right (5).
The positioning of the micro-copy aligns pleasantly with the CTA and its positioning indicates the type of information it will take you to before you've even needed to read it - a powerful convention (4).
The "Product Tour" page has a more complex column layout of 3:5:4 which is a logical arrangement for the content being displayed (9).
Visual Hierarchy and Usability
Since the design is so simple it uses font size and contrast to communicate meaning effectively.
On the "Product Tour" page the header area clearly displays a page title and description emphasising it over the content below.
Legibility is increased with a vertical rhythm established from the top of the page by the top menu bar height and continuing via the page title (7) and menu items (8) to the green CTA at the bottom.
To sum up then...
How're grids used in web design?
Effectively...
Grid systems are a very powerful tool for designers. Thoughtful and considerate layout and placement creates more visually appealing compositions with more effective results.
...and ineffectively?
Yes.
Grid systems can definitely be used too little or ineffectively. Without structure, our content becomes less usable and navigating or understanding becomes impaired. When user expectations are not met this will cause frustration and devalue the brand. However, the fault does not lie with grid systems in general but with the specific decisions that the designer did (or didn't) make.
In general...?
Conventionally...
Grid systems are considered by some to be overly restrictive due to the concern that they hinder creativity and freedom with artificial constraints. But they should be more properly understood as conventions (Boulton, 2005). The power of conventions to create a shared understanding means they should be thought of positively and used as frequently as needed to aid the exchange of information.
Whether they affect creativity, grids empower designers to use a universal visual code and this is really their greatest strength. The web is definitely a great place to be creative, but it is first and foremost about the free exchange of information. As long as sharing information is the main goal of a website, grid use will remain a convention because of the clear benefits.
Conventions naturally enhance usability. They conform to user expectations and contribute to the universal comprehensibility of a visual hierarchy.
A conventional design approach is apparent among sites which sell web-services which allows users to understand these websites at a glance. The designs have elements in positions and proportions similar to each other and based on grid systems. This creates an instantly recognisable style and prepares the user for visual cues. As well as getting a sense of the brand and professionalism of the site, users are able to find information and interact more easily. The quicker this shared understanding is established the more trust is created and this is the effect which the examples chosen have achieved.
In general it is excellent to see grids becoming more widely adopted. This raises the bar for the web design profession and makes the web a fundamentally more unified and interesting place to spend time.
There are two important things to know about Web conventions: (1) The're very useful. (2) Designers are often reluctant to take advantage of them.(Krug, 2006)
In the future...?
Responsively...
The latest design philosophy to be adopted by the web community, Responsive Design, adopts an approach which uses fluid grids. These are still useful because they rely on element ratios rather than their absolute sizes. Combined with media queries, and fluid images sites can be created suitable for any device.
My chosen examples have opted for mobile apps rather than responsive sites. However, as the frameworks I mentioned show, the trend definitely shows a future for grid systems on the web.
This further drives home the point that far from stifling creativity, fluid grids are enabling a whole new era of creativity in web design. These grid systems and techniques give us, more than ever before, the creative power to design interfaces, interactions and experiences that meet the challenges of the web user of the future.