I find very interesting the fact that two successful authors – Ellen Lupton and Khoi Vinh – describe grids in their books with the exact opposite words: democratic and tyrannical. Ellen Lupton in her book “graphic design: the new basics” writes that grids convey a democratic character to the printed page. She supports her idea about “democratic grids” with the fact that since grids are used to separate the page into numerous similar units, then the entire page becomes available to the designer and the edges become as important as the center. On the other hand, Khoi Vinh describes design as a method to impose tyranny on the world and since designers use grids to layout designs, they somehow impose to the world their own point of view, their own way how the world should function: “not tyranny in its classical sense, but rather tyranny on a much more modest, much more personal scale.”
Nevertheless, Grids are valuable to a designer as they help to layout interesting compositions and further develop possible solutions to a given design problem. Grids do not restrict creativity and when used in a non-restrictive way they can create designs full of tension, movement and excitement in place of static designs.
Furthermore, by separating the space into smaller units, grids can help the designer make use of the white space around an element more efficient rather than filling and cluttering the whole page with elements. In this case the message gets lost.
As a designer moves from the print to the web design as in my case, the space for laying out the elements of a page take a completely different character and meaning and what I emphasize in this essay is how the content is organised on a page and eventually how different elements relate to each other. For this purpose I chose to include examples from online magazines to draw conclusions as they make good use of both images and text.
The secret of a grid’s success is not so much its structure as the imagination with which it is used. Allen Hurlburt
How Grids are Used to Present Content.
Grids are used in graphic and web design to organize often huge amount of information and distinguish between different types of information in a clear and predictable (accessible) manner.
Answers to design problems can take various forms and the grid is a powerful tool that a designer has in creating designs with rhythm, clarity, economy, continuity through a strong structure and visual pattern, navigating the viewer in the page.
The best design solutions come up when eventually the designer finds a relationship between all the elements of the page with the underlying structure of the page – the grid. The way the designer organizes the content should respond to the overall layout of the web page; the information presented like images and type should support and respond to each other in way that support the concepts of the web page both aesthetically and functionally. Aesthetically I mean visually and functionally I mean the overall format of the web page.
Figuring out where each element of the page should be placed and presented is crucial. Images, blocks of text, headlines, navigation bar must relate to each other and communicate. A grid system is just one approach to achieve this relationship in a page. A grid system aims in solving communication problems between the various elements of the content and between the actual content and the user.
For professional web designers, responsive website design is crucial and essential in nature, ensuring that the content is accessible on devices of all sizes: from small mobile phone screens to large desktop monitors. Grid systems create scalable web designs which, when developed with responsive CSS, can adapt depending on the size of the viewing screen.
“Keep it simple. Simple can be powerful.”
The above promotional website for a printed magazine uses a very simple 2 column grid to present and organize information. The web designer uses the same simple grid system for the internal pages of the promotional website. Each paragraph starts with a bold headline and each secondary headline is identified by a different color establishing hierarchy throughout the design. The image used breaks the 2 column grid spanning the whole width of the grid. Often, we come to the best solutions when we break free from the strict use of a grid. After all, grids were meant to be broken for creativity purposes to reveal more powerful structure and combinations between the elements of the page.
How the Visual Balance Affects Understanding and Interpretation.
Without establishing a visual balance between the elements of a web page, the viewer is more likely to loose his interest in viewing the web page before he has acquired the content of the message because, simply put he will feel that something is wrong. Visual balance can help the viewer navigate through the page, like a guide talking to the viewer and saying “look at that, this is what you should be reading first”. Visual balance combined with visual hierarchy can result in better understanding of the content and inevitable the message will hit its target.
Visual balance is everywhere in the real world and when we experience it we feel comfortable and serene. But how do we achieve this visual balance to enhance communication and understanding?
One way to balance the different elements of a web page is by using a layout strongly supported by a grid system. Most web pages are built on a grid system, and this creates a form of balance for the page right away. Viewers can see the clear structure of the page, even if there aren’t any visible lines. And web pages are well suited to grid designs because of the square nature of the elements of a web page.
In this 5 column design, the designer uses visual weight to create balance. The weight of the large and black photography as background on the right is balanced by the navigation at the top left and the text with the fuchsia background. Furthermore, the whole design is balanced by the use of warm and cold colours, leading the eye from the top right corner of page with the blue text to the bottom of the page which is balanced with the use of the same blue type on the bottom left page.
In this example taken from the Creative Review homepage we can see and feel in practice the visual balance in action. The designers used a five column grid to layout the whole page but the page eventually is balanced with the use of photography (the famous Campbell’s Soup Can by Andy Warhol) and the big bold typography on the left. The underlying grid system definitely helped the designer establish the visual balance needed for the purposes of good navigation and understanding of the content.
The grid in BBC news magazine is based on a 16 column grid. The photography on the left side of the web page balances with the bigger type on the right. Furthermore, we can notice the call to action areas of the site in a combination with a dramatic use of typography. Therefore, the designer established a balance between form and function resulting in a functional and memorable web site that strongly enhances the identity of the page.
How Emphasis is Achieved.
The position of the elements on a grid system of a webpage affect the emphasis of these specific parts. In the above examples the 2 magazine promotional web sites make a bold statement of their identity positioning their logo as the only elements on the top of the webpage. The first thing that the user experiences is just the logo with illustrations and photography which come second. Both of them are using 1 column grid system forcing the user to scroll down below the fold to access other information.
In this simple case, the first element we see is the navigation bar in the first column which further stands out by the background colour, the logo is less visible with the combination of the background image and the use of the same colours. It is evident that the user experience completely changes between these 3 magazines, the first two making a strong first impression, the second example taking a more conventional approach in delivering the content.
What comes out from these examples is that the grid system used in combination with the arrangements of the elements of the page to enhance focus of specific elements, changing the user experience. It is also evident that the decisions behind using a particular grid or a particular layout are based on the target audience of the magazines.
The first 2 magazines aim at a more artistic audience which is evident in the use of typography, photography, illustrations and a more loose grid system. The third magazine uses a more conventional approach to design either because of the target audience or the messages they want to communicate.
Emphasis here is achieved in several ways. The typographic logo of the magazine spans 2 columns, is huge and bold and holds its own spatial zone and there is a good contrast with the background. The big margins above and below of the content as well as the yellow colour expanding in large amounts around the design are used to focus attention on the body of the website.
A variety of columns can be used to present information, depending on the amount and the complexity of the information. Flowlines in graphic design define horizontal alignments from the top of the page. Within this 1 column grid the designer used in a effective and simple way image and typography to present information in a very accessible way.
But, when using a grid system, one of the best ways to draw the user’s eye as Mark Boulton suggests in his book, is by not placing that element strictly on the grid. A loose placement on the grid will make it stand out against its strictly positioned neighbours.
In this example, the designers positioned the logo of this online fashion magazine well off the grid achieving emphasis in a way to enhance the magazine’s brand image.
Grid systems provide answers to compositional problems. They exist to help. But sometimes, it’s useful that we break free of the grid to provide emphasis, importance, hierarchy, visual interest or increased usability. We design grids to help us with the layout. It shouldn’t be a rigid tool that we can’t change.
In this website of a free online magazine to download, the 3 column grid system makes easier the navigation through the page. There is also a good use of white space which allows the eye to move comfortable from one section to another. The upper portions of the grid system define a spatial zone for the branding of the magazine. Also columns 2 and 3 form a spatial zone for the latest issues part of the page. In this case the grid system in combination with white space is used to accommodate and set a clear hierarchy that users can navigate easily.
Structure and Legibility.
Good use of typography and legible text blocks should always be on the first priorities when designing and laying out a web page. Good use of typography means a good combination of fonts, how well the different text blocks and different information are identified, headlines having their own identity and good and generous use of white space.
Good typograpghy attracts the attention of the reader and good contrast and distinctive patterns of the text can be achieved by carefully placing the element of typography on the page.
If the page is overloaded with heavy text without white space around blocks of text or lack of white space between lines, the only thing that the readers will see is a big grey block. Making things uniformly bigger or smaller doesn’t always help. If everything is bold, then nothing stands out.
When the content is mainly text like the example above, typography is the tool you use to organize information on the page. The “Web Style Guide” informs us that the first thing the reader sees is not the title or other details on the page but the overall pattern and contrast of the page.
The repeating patterns of typography (see example above of an internal page of the same magazine) established through carefully organized pages of text and graphics supported by a grid system, in this example a 5 column grid, help the reader to establish the location and organization of the information and increase legibility.
Furthermore, margins and white space creating visible or invisible lines, define the reading area of the page by separating the main text from the surrounding elements like advertisements. Margins ease the reading experience and carefully design of margins and other white space is particularly important in web page design because web content must coexist on the computer screen with the interface elements of the browser itself as well as with other windows, menus, and icons of the user interface.
When these elements are used consistently in the design, they provide unity throughout a site by creating a consistent structure and look of pages.
They also add visual interest by contrasting the positive space of the screen (in our case text) from the negative white space. Empty space although empty and not carrying any message, it’s the tool that will carry the message more efficient enhancing legibility within the page and it’s as important as any other element on the page.
Knowing how to manipulate this empty space outside, in and around the content will not only give the users a better experience, but also will lift the product in a new perspective enhancing brand image and identity.
Structure and Usability.
Usable Web sites simply mean web sites that work for the viewer and encourage repeat visits. Usability makes the readers wanting to return to the same site.
Many times when we have to present huge amounts of information, we inevitable create complex grids to present the information that decrease usability and there’s the danger the grid would become so complex that it will not be appealing to the user. The message will fail to reach the target audience.
Mark Boulton advices that a good rule of thumb when designing a grid is to keep it simple but comprehensive and above all usable. There are many different styles of page architecture, which often depend on the actual content of the page, but there are more general rules which should be applied to any page, such as keeping the most important information “above the fold” – so users don’t have to scroll down to use any navigation for example.
Having a good site structure, means having a clean and consistent hierarchy to the site and good page structure, so that the viewers understand the importance of different sorts of information on the page. A good structure gives the correct choices to the viewers, in very obvious ways.
The grid system – the skeletal system of our web page – will create the foundations of this structure providing the basics upon which the visual elements of the website will be arranged. This structure will provide unity between sections.
Let’s take for example this online magazine because of the huge content it has to deliver and examine its structure. Although the navigation is huge and overwhelming it stands out at the top of the page providing a sense of position inside the site. Jacob Nielsen, a web usability expert, says that a good navigation system should answer three questions: “Where am I? Where have I been? and Where can I go?”. Furthermore the content is organised in a clear and simple way providing at the same time call to action buttons. The design supports the brand through the consistent use of typography and colour schemes and a good branding strategy such as this will reinforce user’s impression of the site. Finally, it provides forms for feedbacks from the users for interaction.
Structure and Visual Accessibility.
Mike Cherim in his blog makes a nice exploration into what is called visual accessibility. Using visual clues to enhance accessibility means a combination of layout, readability, structure, usability, style, and clarity. Designing with visual accessibility is to take use expectations into consideration. It means delivering the content as the user expects to see it and find particular pieces of information without any difficulties like a contact page.
So how do you improve a site having visual accessibility in mind? One easy way is to open up the content spatially and reduce the content on each page by leading the user down a greater number of avenues organized in a greater number of layers.
He draws a nice analogy between the structure of the content and the river delta. “It’s what they do already, it’s what most developers do, but that site offers way too much in one shot on any given page — the river delta concept needs to be broadened and expanded considerably.”
The downside of his suggestion is that the pages on the actual site will double and the number of page requests will also double, but bandwidth consumption shouldn’t fully double and most users would have an easier time with the site. It would be more usable, better organized, and the content would be clearer. As he concludes he mentions that there would be more white space and it would be easier on the eyes.
Inherent Effect on Image and Branding.
Branding is more than a logo, it’s an entire guide to how the company should visually appear on a website. All the elements must be appropriately positioned on the grid considering various factors like the size of the grid, columns, typography, colours, target audience and accessibility. Professional websites that support well their branding need to give to the viewer clues to the context and organization of the site considering that a viewer might access the web page on different media.
A well organised content makes the web site look and feel professional and that immediately attracts attention communicating the product with the design and the viewer.
A common interface problem in web sites that can hurt the credibility and the branding of a company is the poor structure of the content and the lack of any sense of where you are within the local organization of information. Finding your way to a particular piece of information must be done in an intuitive way.
Clear navigation allowing the users to be able to return easily to the home page, consistent typography and colour schemes, clear headings and subheadings creating an identity that tells users they are within a specific part of the page, and above all good structure based on a well considered grid system can give users confidence that they can find what they are seeking without wasting time. Besides that, using a grid system can result in visual consistency which is essential when supporting a brand image and identity. That means that we set the foundations and appropriate structure to a successful design solution. A visitor who is viewing one page and moves to the next must be able to recognize it immediately as part of the same site.
Choosing a grid system that supports this visual continuity and the suitable visual design for a company also affects the site’s perceived credibility. Penny Mcintire in her book “visual design for the modern web” mentions a study by a Stanford university that supports this concept: “The number one factor by which people actually judge Web site credibility was by their first impression of the visual design…If it doesn’t look credible or it doesn’t look like what they expect it to be, they go elsewhere. It doesn’t get a second test”.
In order to enhance brand image and identity a grid system must be carefully chosen that best creates the appropriate solution for a given brand.
In graphic design when you want to upscale a brand and adapt a more sophisticated style then you add white space and use a more loose grid system allowing elements to breath. The same applies to web design.
In this example a lot of white space is added around the logo of the magazine. The 5 column grid system, in various occasions is broken with professional photography and text to communicate a more modern design approach uplifting their brand identity.
Mart Boulton suggests that asymmetrical columns-using an odd number of columns- can create an imbalance and therefore can create tension in a layout and eventually create more interesting designs reinforcing the brand image of the company. He concludes that using a square as a compositional base can result in a balanced layout, but the danger is that the resulting design will have no movement and therefore it will be more difficult to lead the eye around a layout that has a strong symmetrical base.
My inspirational reading list:
Design elements – Timothy Samara
A practical guide to designing for the web – Mark Boulton
Designing with web standards – Jeffrey Zeldman
Making and breaking the grid – Timothy Samara
The principles of beautiful web design – Jason Beaird
Visual design for the modern web – Penny Mcintre