Jan 262012
 

This week we had some really interesting presentations from class members on various aspects of content strategy.

Richard spoke about User Generated Content. I learned that there can be different levels of engagement I also learned about some of the opportunities, threats and legal issues of UGC. UGC can be great for increasing the amount of content produced on your website, but it can be difficult to monitor.

Nicola spoke about websites having personality and a tone of voice, and how this can be incorporated in every aspect of a website; from the use of aesthetics, the style of writing, the types of content, and how these all combine. Some of the benefits include setting yourself apart from competition, and building trust and relationships with the users. I learned about how a style is constructed, and what goes into a stye guide, which is something that can be created for reference, for consistency.

Alison told us about writing for the web. She gave us tips on hooking the user, and how to keep them on the site with crisp succinct copy. It is important to know your audience, and to create meaningful copy, with highlighted heading and keywords to grab their attention. A pyramid style of writing works well. Copy should be pruned aggressively – the shorter, the plainer, the better.

In Jame’s lecture, I learned that content should be Useful, Unique and Authoritative. He told us about the various types of content we could include and the best practice in producing each of them.

Some of the most important things I took away from the class were:

  1. Know your audience!
  2. Understand your own goals AND understand your users goals.
  3. Don’t neglect accessibility when using alternative types of content.

 

 Posted by at 10:42 pm
Jan 262012
 

Introduction

Grids are one of the most important part that should be considered when designing a website apart from other elements such as colour, typography, graphic or images, etc. This essay will discuss about how are grids used in we design and what are the benefits of using them.
In the first part, I will be talking about brief principle of grids, type of grids, etc. The second part, will be some analysis in using grids of example of websites. For this part, I have chosen to focus on analyzing minimal grid-based websites to start with.

What are grids and why we use them?

There are many things around us are designed by using grid system, including architecture, city/town plan, exterior/interior design, prints (books, magazines, newspaper) and also websites which have become more popular these days.

In terms of web design, grids are a set of vertical and/or horizontal guideline that cross each other to provide a framework for organizing contents and design elements. This grid system is an essential tool for web/graphic designers built to facilitate them to create page layout, giving them a logical pattern/framework for ordering or structuring. Grid system not only provides a rational framework for designers, but also streamlines the design process by making it more easier to align and measure all of elements on the web.

Moreover, using grid reduces the time consuming on developing. For example, if your website has lots of text information in each page, you don’t have to re-design every time that you want to edit pages because you have invisible guideline underneath. Another important thing apart from time consuming on design is grid system adds hierarchy, harmony to the presentation of information. It gives users an aesthetic visual pleasing when using the site. Not just in website, many publications such as magazine, newspapers, etc. also require grids. It provides page-to-page continuity.

When people come to website, they always prefer an organized information of visual elements including columns of text, images, illustration and so on. Using grid allows designers to create the consistency in their design as well. Many websites contain loads of information and many pages. To use grid gives designers to concern about column width, or the position of each element. People always expect that when they are on the website, they prefer to feel the harmonious not just the look of it. Therefore when they change pages, the same column width, which is organized by grids, can create page-to-page consistency to the site. Moreover, grids can unify the dissimilar elements in the design. In website, there are lots of different shape of elements including square, triangle, circle, etc. Grid is a guide to put the variety of elements onto design.

“The grid makes it possible to bring all the elements of design — type characters, photography, drawing and colour — into a formal relationship to each other; that is to say, the grid system is a means to introducing order into a design. A deliberately composed design has a clearer, more neatly arranged and more successful effect than an advertisement put together at random.”
Josef Müller Brockmann
(The Graphic Artist and His Design Problems)

Type of Grid

Originally, grid system found in print design (e.g. newspaper, magazines). There are many design program provides this kind of tool for designers to be an aid in creating a basic web structure when starting to design something. For example, Photoshop, Illustrator, Indesign, etc. where you can create your own grids. You can divide the blank space by yourself so it can be as simple or as complex as you want.

In terms of web design, there are many variation of grids used in grid-based websites. Most web design projects are based on 4 main types of grid.

1) Manuscript Grid

This is the simplest kind of grid, containing a dingle column, usually used for a long text document such as novels. This type of grid shows a very clean style, simple structure to the page layout.

Layout structure and web example of manuscript grid


2) Column Grid

Column grid contains numbers of columns for placing text and images. Columns can be dependent on each other, independent on from each other and crossed over by design element. The width of each column should relate to the side of the text and other design elements in the column to accommodate a comfortable measure of legibility and readability.

Layout structure and web example of column grid



3) Modular Grid

Modular grid is similar to column grid with more complicated structure by adding horizontal divisions. This type of grid allows designers to present more complex information with better precision. Modular grid can be formed by horizontal and vertical units as much as you want for organizing loads of information. Websites that are using modular grid system, most of them are gallery websites, such as portfolio websites, online shop websites that show lots of products. In my opinion, grid quite suit this kind of website in order to showcase images efficiently.

Layout structure and web example of modular grid


4) Hierarchy Grid

Hierarchy grid is commonly found on many websites. It allows designers to organize contents on the web by considering on importance of each design element. Generally, it is used when other types of grid doesn’t fit the design. Hierarchy grid offers variety of ways to create a rational structure which may affect user on interpretation.

Layout structure and web example of hierarchy grid


How to design grids for web?

There are many ways to design website that based on grid system. You can starting create your own layout by sketching on grid paper, or using tools on design program such as Photoshop, Illustrator, Fireworks, or using web standards which is becoming more popular on web media.

One of the most useful website that provides tool for building grid system is the 960 grid system. The site offers 12, 16-column grid framework to download for free. Both of them have the same width at 960-pixel which seems to be a standard number for the size of screen resolution of 1024 x 768 or higher. Moreover, a 960-pixel total width is a good starting point, because it provides a massive amount of scope for divisions (960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480).

There are many various websites that are created by using grid system to make a perfect proportion and rhythm between design elements on the web. Grids are used to form the page layout and to structure the content rationally. The good website has to contain both of well functionality and aesthetic. Using grids can be helpful for web designer/developer to be more logical when ordering each element.
Here are some examples of grid-based websites.

How are grids used in web design?

There are many various websites that are created by using grid system to make a perfect proportion and rhythm between design elements on the web. Grids are used to form the page layout and to structure the content rationally. The good webbsite has to contain both of well functionality and aesthetic. Using grids can be helpful for web designer/developerto be more logical when odering each element.

Here are some examples of grid-based websites.

Puccuo

Poccuo is a design studio based in Washington D.C. The structure of the website is built with 900 px wide which is considered to be reasonable enough for every size of screen resolution In general, this design studio website conveys clean and well-structured design.

From the top of the page is the logo and the main navigation bar which is divided into 6 columns and give a little bit wider column width on logo area to emphasise the brand. To place the logo on the top-left of the page is not only the usual way for the logo, but also it is the natural way for people that always start reading from the left hand side. The quote in the centre of the page is large enough to catch the attention. The quote briefly describe about the business, origin of the project, latest news and updates. The website creates a great visual hierarchy by ordering each items into separated column. This influences user to understand the goal of the website or the goal of their business and also gives a smooth and satisfying experience when using the site.

Another good thing in this website is, in each column contains a selected image from the project and some short description about that project which I think it is really good to keep the description short and simple because this makes the whole site lighter and cleaner and it also makes the images look more interesting as well. Grid helps designer to align the images and text in both header and paragraph, using the same leading and same margin make the site to be in order but I can feel the freedom comes from white space in the same time.

Helen and Hard


Helen and Hard is an architecture studio in Norway.The aim of the website is to showcase their design projects, introduce the team and presents their design strategy. This is a good example of hierarchy grid website which shows the great way to organize contents based on grid. I will start from the logo on the top of the site, HELEN & HARD is created with a very simple style of medium-sized font, however it works very well on that position. Every time I open this site, the logo still comes out first. Under the logo we will see 940 px wide navigation bar and slide shows of images of selected project. Below the slide show, there are 4 column of text box that contain short story of the company ans news/events. In terms of structure management, I considered that using 4-column grid on 940 px width with 35 px on each gutter is very suitable for this website. I can read text on every text box continuously and pleasantly. Also, on the project page, all projects are presented in 3 columns and 10+ rows, each image is set into the same size and is positioned on the same gird line. When clicking on any image, there will be a long version of description of the project. But the layout they created shows the user that where should be a starting point and where to read through by using the different fonts, font-size, margin for header and body text.

In overall design, using grid to divide column conveys a very well structured content hierarchy. I t help designers to divide blank space for images and text and it creates symmetrical balance on the site.

Kind Company

Kind Company is a web, print design company in Brooklyn, New York since 2004. This design studio website is obviously designed on grid-based system. There are four main columns used in homepage with 20-pixel gutter between each column. From the top of the page is a place for logo and strap-line, which briefly tells us about what company does. Although, the logo of the company is using a very simple typeface (Helvetica), it works very well on that space. The name of the company is in black positioned among gray-coloured strap-line. What makes the logo more outstanding is the use of macro white space on the right hand side. Below the logo or header, we will see the main navigation bar “Project Index” and “Office Bulletin”. It can be noticed that the first button is aligned to the edge of the first left column, so does the contact email “hello@kindcompany.com” that is aligned to the edge of the third column from the left as well.

When we scroll down, we will see that the page layout is divided into two columns to place some text that describe more about company and what they do. These texts are aligned to the edge of column above. This dividing proportion creates a symmetric balance on the website. The use of micro white space in each paragraph gives text to breath. Also, each text body is positioned on the same baseline grid, which has the same margins. It creates a sense of credibility in the way that all information is organized on purpose. The use of dotted-horizontal lines is used to divide horizontal space. I think it gives a hierarchy in terms of readability; we can read and navigate information each column and row easily.

Also, every bottom margin contains the same height. It creates a feel of elegant along with the nice and simple layout. In office bulletin page, it is divided into two columns with the same width in each column as the homepage. It gives a sense of continuity and unity of the website. Although, each page contains the same width of column, it is not boring. On the other hand, doing as such, makes the website clean and make it easy to the eyes and make it easy to use and absorb all of information. Moreover, all links have a good reaction when rolling over them. Every gray link will turn red. It makes call to actions to be clearer and more noticeable.

Conclusion

Having a strong foundation in design principle like grid is a good thing that should be concerned. But, to design a website by using grid is not a solution for all people or all designers. When you starting to design a website, do you have to consider that what your website is about? What is your product? Or who is your audience? Some designs or some websites might not need to use grids, but some might need or grid should be used in some types of website. It depends on how you want the website to be or to feel like. There are many benefits of using grids such as grid adds hierarchy to the presentation of information, gives unity and continuity to the website. One of the most important thing is grid gives system to think to organize everything, every element on the website.

Grid is a smart tool to help designer design a good website. To understand about grid system and to know how it should be used or be applied in the website is a good thing and it benefits in many ways. However, creating a good website is not just about using grids to structure the content or other elements. It needs other web design principle to support everything on the site including many important aspects like usability, accessibility, readability as well.

References

http://designmodo.com/grid-design-theory/
http://inspiredm.com/web-design-trend-hunting-fluid-grid-layout-10-outstanding-examples-1-tutorial/
http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/
http://www.daversion.com/2011/10/960-grid-system-web-layout-design-easier/
http://designinformer.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/
http://www.rockettheme.com/magazine/1257-introduction-to-using-grids-in-web-design
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-preface
http://webdesign.tutsplus.com/articles/workflow/using-the-960-grid-system-as-a-design-framework/
http://www.thinkingwithtype.com/contents/grid/
http://www.alistapart.com/articles/outsidethegrid/
http://www.vanseodesign.com/web-design/headlines-subheadings/
http://webdesignledger.com/tools/13-excellent-tools-and-systems-for-css-grid-based-layouts
http://www.typographicdesign4e.com/grid_modular.html
http://www.designer-daily.com/the-use-of-grids-in-website-design-6639

 Posted by at 3:18 am
Jan 262012
 

Introduction

 

Grids have become an important aspect of the design process, whether for print based or screen based design. It is essentially a system and set of rules to aid the design process. Grids are used mainly as a way of organizing and structuring your design work, with the aid of horizontal and vertical guides. There is no limit to how simple or detailed the grid is, which allows the designer to tailor it specifically for each individual design. One can choose to use one grid across all designs, or several different ones across one project. This method was once most commonly seen in Newspapers and Magazines, however it is now extremely widespread and common within all areas of Design.

  

Although grids have been around for a very long time,  it wasn’t until the mid-twentieth century that the first designers of that time such as Linguists, Scribes, Commercial Artists and Printers started to focus on the content, proportion, space and form within their work. One of the earliest examples of the use of grids can be seen in any religious calligraphy texts laid out by scribes, often using modern two and three column grids with typographic variations in weight and colour, for emphasis. Nowadays the use of grids is most common within Graphic Design. There is still some debate going on within the design industry, with regard to the positives and negatives of the use of grids in design. Some designers believe that the use of grids would limit the designer and his creativeness, whereas others believe that the use of grids mainly provides a set of guidelines on which to build a more aesthetically pleasing and well structured design, thus producing a better quality design overall. Graphic Designers have the freedom to design in any way they see fit, yet there is a fine line between good aesthetically pleasing design and bad design.

 

Grids in Graphic Design

 

Grids are based on psychological research into human perception of information, focusing on ease of reading and usability as well as aesthetics. Column width is often determined by the maximum word to column ratio, with the optimum word count per line being eight or nine words. There are other determining factors such as the use of type, letter kerning, size, weight and colour, which go hand in hand with grids.

 

The book has been the most common output of printing from the mid-fifteenth century up till the start of the Industrial Revolution in the late-eighteenth century. There was a variety of grids available yet the grids based on the Golden Ratio in the form of the Golden Triangle were deemed to be the most successful and aesthetically pleasing. The Golden Triangle is an aesthetically pleasing form in which the ratio of the longer side to the shorter side is the golden ratio. This was often combined with the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, etc), which determined the page proportions and margins of the classic book.

The founding of de Stijl in 1975 by Theo van Doesburg was an important movement and influence on the creation and widespread use of the grid. This movement explored form determined by function, favouring minimalistic designs with no decorations and extensive colour, and  rectilinear forms. This became quite popular with designers such as Piet Zwart and Paul Schuitema.

In 1919 the Bauhaus was opened by Walter Gropius, influencing the development of Typography and Graphic Design forever. There was great influence on typographic experimentation in order to achieve more clarity, simplicity and usability within design. During the 1920s and 1930s typography became even more popular and significant within design, with the help of typographer  Jan Tschichold and his two books The New Typography(1928), and Asymmetric Typography (1935). There was more focusing on logic and natural psychological behaviour, which created a system for the design process.

Swiss Typography became the norm for Graphic Design. Everything element on the page followed logic, precision and aesthetics.

“No system of ratios, however ingenious, can relieve the typographer of deciding how one value should be related to another… He must spare no effort to tutor his feeling for proportion… He must know intuitively when the tension between several things is so great that harmony is endangered. But he must also know how to avoid relationships lacking in tension since these lead to monotony.”
Emil Ruder, Typography

 

“Just as in nature, systems of order govern the growth and structure of animate and inanimate matter, so human activity itself has, since the earliest times, been distinguished by the quest for order… The desire to bring order to the bewildering confusion of appearances reflects a deep human need.” 
Josef Müller-Brockmann, Grid Systems in Graphic Design

 

Grids in Web Design

 

With the development of technology and the world wide web, grids have now become a part of the Web Design process. They serve the same purpose as grids within print based design, mainly to help organize and logically structure a web based design for the most clarity, usability and aesthetics. Naturally this involved rethinking the traditional grid systems in order to target on screen specific issues. Print based design is static and fully controllable, whereas on screen design is constantly changing, depending on the device being used, screen resolutions and browsers. Even though the main principles remain the same: to create an aesthetically pleasing, readable and usable interface; the design and grid have to have the ability to morph to each new format, without sacrificing anything in the process.

 

960px vs 978px

 

  • Total width 960px
  • 12 columns @ 60px each
  • Each column has 10px left & right margin which forms 20px of gutter space
  • Total content area is 940px

The most common and popular grid system for on screen web design is the 960px grid. It is the most favourite grid system as it is currently the most flexible. It allows the designer to quickly split the design into  9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 columns retaining the maximum readability and usability. This grid makes it possible to unify all web design and make it consistently good across the whole web. The problem however is the ever increasing screen resolutions. Although not long ago 960px was an everage screen resolution and still is to some extent, it is now gradually increasing. Along with this the average font size has increased from 12px to 13px, which means bigger text is being fitted into the same 940px space (actual content space). It would therefore make sense to alter the grid in order to accomodate the bigger screen resolutions and bigger font size.

  • Total width 1002px
  • 12 columns @ 54px each
  • Each column has 12px left & right margin which forms 30px of gutter space
  • Total content area is 978px

Based on the constantly changing conditions within web design, another grid system was recently introduced suggesting the use of the 978px grid. It does the same job as the previous grid, however it has been updated to accommodate the new developments in technology. Predictably, the grid will never be static, as technology and the web will constantly develop and therefore the grid will have to develop with it.

 

Baseline Grid

 

Another common grid still being used is the baseline grid, in which all the text is aligned to the baseline of the entire grid. This process of creating a baseline is slightly more difficult as it involves calculating the line hight of the entire body text to ensure each line aligns properly. This can be seen perfectly on the The Grid Systems website.

Each element on the page aligns perfectly with the baseline, creating a clean, simple and usable user interface with no extra elements or distractions.

 

Why use the Grid?

 

There are many reasons for designers to use grids. It is important to convey the information in the simplest and most organized way in order to provide the best usability experience for the user. In order to be able to create this structure a designer needs grids.

However it is entirely up to the designer to decide whether to use a grid or not. The grid is a guide, and is meant to be used as a reference rather than hard coded rules. It is the responsibility of the designer to research the target audience and to decide what approach will be the most effective. A grid can enhance the structural foundation of a website but can just as easily detract from the experimentation and interactiveness.

 

Examples

 

Below are some examples of the use of grids in general and personal portfolio websites. They demonstrate the usefulness of grids as well as the limitations.

 

 Behance

http://www.behance.net/

 

Behance is a website where users can post their portfolio work and projects for public viewing and critique. With the amount of information needed to be handled the website interface had to be minimalistic and clean, as well as very easy to navigate. And that is exactly what it is. It is divided into a five column grid, however the main focus is on the middle three columns which are wider than the outer two columns. By tweaking the widths and changing the ratios the main focus is on the work of the user rather than the sites navigation, search and adds. In this case the use of the grid was essential in order to portray the work of the users in a professional and clean way.

The website is quite clean yet still remains playful in its unique almost hypnotising and consistent design. There is a limited use of colour which emphasizes the call to action areas of the website, such as the register and log in button, as well as the individual work of the users. The choice of blue indicates the brand is meant for professionals with a specific style of work, not dissimilar to the website itself.

Once inside the website, looking at a specific project the layout changes to a two column grid. Once again the section displaying the users work has a much wider column, this emphasizing this section more than the general user information. The column is also located on the left hand side, and this would be the first area to focus on. The call to action colour remains consistent with the homepage, which makes it simple to navigate.

 

Tawni Martin

http://www.tawnimartin.com/

 

Tawni Martin is a freelance Web Designer that took a slightly different approach to designing her own portfolio site. It doesn’t follow the stereotypical minimalistic monochromatic designs, and in this case it showcases her full potential as a web designer. The website has a main navigation at the top of the page that is aligned to the left, which goes against the human instinct of reading left to right. However it is still very clear and therefore easy to navigate. The header image on each page serves as the main focus point, although the text seems to wide to read comfortably.

Further down the page the layout becomes a two column grid, the main body text is located in the left column. Focus is instantly on the slideshow, which provides a sneak peak of the portfolio. Information and contact details are located in the right column.

The footer in my opinion is the least successful part of the website. There is a lot of technical and graphic skill in creating the form and site map, yet the footer feels slightly out of place and out of balance with the rest of the website. Perhaps the header image outweighs the footer too much.

Once inside the portfolio the main body text is split into a three column grid, but remains simple to navigate. The execution of the portfolio preview could have been better, as it seems out of place. Not enough elegance and simplicity to justify the highly graphic interface. The call to action areas are highlighted with vivid colours, however the header image is also a vivid colour and is a portfolio piece in its own. I feel like there is a bit too much going on on the portfolio section and borders slightly irritating.

The about section returns back to a two column grid, however a secondary navigation tab is introduced. The current page is highlighted with a vivid blue, which fits perfectly with the header image. The body text is too wide to read comfortably and very text heavy in general. Perhaps keeping a three column grid as on the portfolio section would have worked better in this case and made the body text more manageable and elegant.

 

Level Flow

http://www.levelflow.com/

Level Flow is an online portfolio of James Hamilton-Martin, who does Web Design and Motion Graphics. The website is very simple and easy to navigate, it uses a simple two column grid which helps keep the information down to the most necessary. The call to action doodles are humorous and interactive, keeping the main attention on him as the product. By displaying a ‘new’ tag, the viewer gets the feel that he is quite involved and active as a designer within the industry and constantly developing and adding more work. The navigation bar is probably one of my favourite parts of the entire website, just because of its untraditional style and personality. The whole website creates  sense of work in progress, doodles, creativity, drawing board etc.

The use of monochrome colours for the entire website means the navigation becomes the main focus point. It demonstrates a range of different skills and areas of interest. This designer is diverse. The work speaks for itself, with the preview of the website working very smoothly and precisely the way you would expect.

Only bug I noticed was that the about page would keep popping up for a brief millisecond every time the user clicked on one of the navigation bars.

 

Colourful Visuals

http://www.colorfulvisuals.com/

This is an online portfolio of Ace Bobadilla a Digital Graphic Designer. The user interface is very clean and minimalistic, using mainly a single column grid for the entire website apart from the three column grid used for the gallery. Despite the fact that the body text spans all the way across, it is still easy to read as there isn’t a lot of it there. In this particular case it works just fine.

The main focus is on the welcoming ‘Hello There’, which instantly portrays the personality of the designer. The call to action areas as well as important information is highlighted in the same bright vivid colours as the welcome typography.

The single image view is very smooth and turns the whole website into a single column website, keeping the focus on the work itself. Everything is smooth running, information is well organised and thought out.

 

Webz Guru

http://www.webzguru.net/

This portfolio website belongs to a company specializing in Communications and Technology. The whole user interface is one continuous design, that scrolls down seamlessly either manually or via the navigation bar at the top. There is a mini navigation as well as ‘back to the top’ link on every slide. The website design is monochrome, keeping the focus on the work and the brand. Only the most important information is provided, and follows a very logical hierarchy. The grid system used varies from a one column grid to three column grid. Each slide was though through carefully, in order to find the optimum way of providing the information. Considering both legibility and usability as well as aesthetics.

The technical skills and graphic skill are quite strong, and the use of individual grids for each page made it possible to maximize readability and usability. The single scroll function unified the design overall and made it more aesthetically pleasing.

 

Volume One

http://www.volumeone.com/

 ”Volumeone is a design studio that brings a multi-disciplinary approach to the creation of visual solutions for print, motion and digital media. Founded by Cranbrook Design graduate Matt Owens, Volumeone strives to synthesize visual exploration and smart design solutions while maintaining the highest level of design expertise and freshness of approach. All design challenges involve a dialogue between client, creative and the needs of the project and Volumeone works to illuminate and open up this dialogue in an effort to develop the best solutions possible.”

This studio has a very simplistic and elegant website. There are no colours being used anywhere other than the portfolio images, which keeps the attention on the work. They used a two column grid for the header information section, with the focus being on the latest work as well as the news. The rest of the work is displayed in a three column grid.

Once you go into the portfolio section, the layout becomes a three column grid. All focus is on the work, there is no other information whatsoever to distract the viewer. The work is bright and enticing, inviting the user to explore further.

The detailed view of a portfolio piece is a two column grid, with the summary located on the left and the detailed information located on the right. Even though the work is very bright my eye was drawn to the small summary briefly before smoothly focusing on the work itself.

The about section uses the same grid system and work in exactly the same way. It is a bit text heavy with slightly too wide body text for a comfortable read. However it fits with the rest of the design perfectly. Even though the website is very minimalistic, the work is quite the opposite. There is no need for words, the work speaks for itself.

 

Conclusion

There are many different kinds of grids out there, but I think the most important thing to remember is to use them as a reference and to adapt them to each individual design. As a designer one needs to find what works best for our own work and to create our own system to help organize and better convey the message. The grid is either an enemy or a friend.

 

References

Websites

 

http://www.volumeone.com/

http://www.behance.net/

http://www.webzguru.net/

http://www.colorfulvisuals.com/

http://www.tawnimartin.com/

http://www.levelflow.com/

http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=620

http://designfestival.com/an-introduction-to-grids-in-web-design/

http://www.apaddedcell.com/beginning-web-design/design/using-grids-web-design

http://www.designbygrid.com/

http://goldengridsystem.com/

http://www.thegridsystem.org/

 

Books

Ed. Wiedemann, J. (2005). Web Design Portfolios. Italy: Taschen.

 Posted by at 1:11 am
Jan 252012
 

Grids in Web Design

 

References:

 

Beaird, J. (2007) The Principles of Beautiful Web Design. Australia: Site Point Pty. Ltd.

Boulton, M. (2009) A Practical Guide to Designing for the Web. UK: Mark Boulton Design Ltd.

Boulton, M. 2009, “Five Simple Steps to Designing Grid Systems” (online) available at http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1

Brauckmuller, C. 2010, “Grid Based Web Design, Simplified” (online) available at http://designinformer.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/

Friedman, V. 2007, “Designing with Grid-Based Approach” (online) available at http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

 

Hodge, S. 2008, “Grid Based Design: Six Creative Column Techniques” (online) available at http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/

Miller, B. (2011) Above the Fold. Canada: HOW Books.

Miner, W. 2007, “Setting Type on the Web to a  Baseline Grid” (online) available at http://www.alistapart.com/articles/settingtypeontheweb/

Reichenstein, O. 2007, “The Future of News: How to Survive the Media Shift” (online) available at http://www.informationarchitects.jp/en/the-future-of-news-how-to-survive-the-new-media-shift/

Rutter, R. 2006, “Compose to a Vertical Rhythm” (online) available at http://24ways.org/2006/compose-to-a-vertical-rhythm

Snell, S. 2008, “Newspaper Web Design: Trends and Examples” (online) available at http://www.smashingmagazine.com/2008/11/11/newspaper-website-design-trends-and-examples/

Vinh, K. (2011) Ordering Disorder: Grid Principles for Web Design. California: Peachpit.

 

 

Jan 252012
 

Grids in web design

 

In this critical essay, I will first explore the origins and principles of the grid in design, then discuss why and how grids are used by web designers. I will then evaluate the use of grids for the design of online newspapers, making observations of several newspaper websites. I chose to focus on newspapers because they are so historically rooted in the grid as a design tool and because the volume and complexity of their content is challenging for the web designer. (I didn’t realise how challenging until I got halfway through this essay) I will evaluate the impact of the grid layout on the organisation and visual hierarchy, user experience, and image and branding.

 

The origins and principles of the grid in design

 

The design grid goes back a long way in the history of art and design and today we are surrounded by its legacy in architecture, landscape, fine art, graphic design and now screen based media design. The design principles behind the use of the grid in art and design go back to mathematical theories of ratio and proportion. The much used ‘rule of thirds’ is derived from Pythagoras’ theory of ‘The Golden Ratio’, or ‘Divine Proportion’. Renaissance artists used this fascinating rule that is found in nature to create aesthetically pleasing compositions. Today, these rules are taught and applied universally by designers.

The Dutch painter Piet Mondrian (1872–1944) explored proportion, harmony and rhythm through his famous grid paintings.

“I believe it is possible that, through horizontal and vertical lines constructed with awareness, but not with calculation, led by high intuition, and brought to harmony and rhythm, these basic forms of beauty, supplemented if necessary by other direct lines or curves, can become a work of art, as strong as it is true.” (Piet Mondrian)

 

The web designer’s grid

 


The web designer’s grid is used to create beauty and to enhance the function of the website. The grid acts as a framework to contain all the elements of a web page, whilst enabling the designer to place all the elements into chosen spaces. Through this process of placing elements into the grid, the designer can focus on creating symmetry or asymmetry, harmony, balance, emphasis and unity. The space between elements is as important as the positioning of the elements themselves, as it allows the layout to ‘breathe’ and creates flow between elements. As well as meeting aesthetic requirements, the web designer’s grid is used to address the technical, business and content requirements of the website.

The grid is made of units which are then grouped into columns. A region is a horizontal portion of the grid which is made up of 1 or more columns. Portions of each region can then be divided up horizontally into fields. One suggested approach is to use the golden ratio again to divide the height of the grid into fields. This can be calculated by dividing the width of the page (960) by 1.618 = 593, so that the page could be divided vertically into fields of 593px each. However, this idealistic approach would rarely be practical for accommodating images and written content of varying size and length.

Web design grids are most commonly made of 12 or 16 columns. These numbers allow for the designer to easily apply the rule of thirds and to create symmetry.

The grid and the design process

 

A typical (but flexible) web designer’s workflow when working with grids:

  1. Research and plan the content, constraints and requirements of the website
  2. Create wireframes
  3. Preparatory design – pencil sketches and calculation of units, columns and baselines
  4. Comps / mock-ups
  5. Coding

At this essential stage in the design process, the designer must consider whose workflow will also be affected by the chosen grid layout:

  • The user: The grid should guide and inform, but not dictate the user’s decisions. The grid should inform the user of the hierarchy of importance and organisation and location of the information it contains.
  • The designer: A well planned grid allows the designer to place content into a space which accommodates it well, whilst creating visual balance and aesthetic beauty.
  • Content creators: They need to know where and how their content will fit into the pages and may need to supply images of a certain size
  • Coders: A well designed grid will be logical and systematic for a coder to work with.

 

Khoi Vinh (2011) argues that the design of a web page grid should always begin with defining the function, problems and constraints of the page. By first solving the practical problems and allowing for the inevitable constraints of the web page, the designer can then continue to design the page within the grid, paying attention to aesthetic desires. “Form follows function”, as somebody once said.

The typical problems and constraints that a web designer will consider when beginning to design the layout grid are usually technical, business and content related.

Khoi Vinh illustrates a blog design case study where he begins with the constraint of an advertisement unit of 336px wide. He calculates the number of columns that the page can be divided into in order to accommodate the advertisement, then continues to divide the page into regions and fields to accommodate the rest of the content. At first, this seems like a very mundane starting point and far from the lofty design theories of Pythagoras and the golden ratio, but actually his logical approach serves to solve problems first, so that the designer is then free to explore aesthetic possibilities.

The illustration below shows how in this case study, Vinh uses the constraint of the advertising unit to calculate the ideal number of columns for the page and establish the first region of three columns width. With this first region in place, he can then focus on how other content will relate to this in size and position. Mark Boulton (2009) supports this approach: “These elements (advertising units) are constants. The size of these elements are fixed, and will not change over time so they are a safe starting point for us to design the grid around.”

The baseline grid is as essential as the vertical columns. Designers plan a baseline grid to ensure that typography is spaced in such a way that legibility is optimised.

When setting the baseline grid the designer must consider:

  • How the baseline grid will guide the line height of text. The line height should always be as high as the main body text, eg text that is written in font size 13pt needs at least a 13pt line height.
  • The human eye most comfortably reads between 50 and 80 characters per line (opinions differ). The ‘line measure’ sets the number of characters per line and must take this into consideration.
  • Space between headings and main text – you may choose to base the size of margins on the baseline grid, perhaps differing between ‘heading1’ and ‘heading2’ headings.
  • Paragraph spacing – you may choose to leave one or two of your baseline grid lines between each paragraph.
  • Use of white space to allow the layout to ‘breathe’ and sometimes to emphasise.
  • Best fit for the chosen typeface, font weight and style.
  • The desired size of headings in proportion to main body text.

 

Online newspaper website grids

 

Online newspapers are a particularly challenging genre of website for designers. This is because they are so content heavy and so frequently updated. They also require quite complex information hierarchy and organisation of content, with articles often categorised in several ways, such as most recent, most viewed, or editor’s choice. In addition to this, there are now social media links and user generated content to fit in.

Mark Boulton cites the three threats and three opportunities that the design agency iA identified in their article, The Future of News’ (Reichenstein, O. 2007).

Threats:

  1. Lower reading experience
  2. Losing journalistic quality
  3. Severing cultural roots

Opportunities:

  1. Optimised reading experience
  2. Improved democracy
  3. Historic development

Khoi Vinh’s trial and error process starting with the constraint of the advertising unit is one good approach for designing a newspaper grid, since standard sized advertising units are almost always used on newspaper pages.

Other constraints and considerations which may determine the layout of columns, regions and fields for a newspaper are:

  • The visual hierarchy given to articles; for example, will a single large and dominant region be reserved for the main headline stories?
  • Is there a fixed standard size for the front featured photograph?
  • Which content must be ‘above the fold’? Usually main headline articles, image and navigation.
  • Will articles be organised into lists of most recent, editor’s choice, or most viewed? How prominently and where must these lists be contained?
  • Are images and videos contained in separate regions or fields? Some newspapers now have a video or ‘pictures of the day’ section.
  • Number of ‘supplementary’ categories such as sport, finance, travel, fashion, education, etc. These sections often need to be visually unified as they are separate, but belong to the same ‘level’ of information hierarchy; below the main headline articles.

Below are some observations I have made about the grids used in the design of the home page of several online newspapers.


The Guardian

 


The Guardian uses a 12 column grid layout, with the left-most and middle regions of equal width accommodating the main headline article and image above the fold. There is a pattern from left to right of four regions, made of four then two and another four then two columns. The instinct of the user to read from left to right is considered by placing the priority headline news articles in the left-most column.

The red caption bar is a good example of block colour used to emphasise key content. Red is also used effectively in the ‘News’ tab of the main navigation bar to orientate the user.

Underneath the central featured image, the second region from the left contains a one column width list of photographs with drop down headings. It is difficult as a user at first glance to ascertain what this column is for, but its narrow width compared with the main headline articles on its left indicates that they are articles of less importance, although the use of thumbnail photographs makes them eye-catching.

In all regions except the narrowest second region, the horizontal fields are marked out by a medium weight, solid red line. This use of colour and line creates some familiarity and unity between the regions.

The right-most column is used for non-news items and advertising. It also features the ‘Today’s Paper’ and ‘On this site’ navigation lists, which are below the fold and not where the user would expect to find further navigation. Each field in this column is approximately the same height and has the same solid red line top border, which unifies them and creates continuity down the page.

The two-tier navigation bar along the top is at first a little confusing – they look as if they serve the same purpose, especially as both begin with ‘News’ as the first link. Actually the bottom navigation bar is a subset of the ‘News’ selection on the top bar.

Overall, the grid succeeds in bringing order, hierarchy and definition to the many editorial categories. Advertisements sit easily inside the grid, without distracting the reader. Although the grid has good vertical rhythm, as a user I found it less easy on the eye to scan across than to scan down. This proves how important it is for online newspapers to establish and maintain a grid layout so that regular users become accustomed to it and know where to look.

 

The Telegraph

 


The Telegraph layout is also based on a 12 column grid. The 12 columns are split into regions of 5, 3 and 4 columns above the fold, where the headline stories are contained in the left-most and widest region.

Then below the fold, an editorial content field is created, in which the 12 columns are used cleverly and rhythmically to divide the page into regions of equal width for each editorial category.

The Telegraph logo is positioned to the left, over the widest region which contains the headline articles. This draws the user’s eye down naturally from the heavy, bold typeface of the logo to the headline articles. The logo is uninterrupted by the banner advertisement, since the two are divided by a medium weight solid black line.

The primary navigation bar which sits under the logo is well emphasised and easily identified, by its inversing of the black and white text and background. This also serves well to separate the branding area from the rest of the content.

Consistent margin spacing and thin dotted borders are used successfully to help the user distinguish between regions and fields above the fold. Below the fold, the separate editorial category regions and fields are made easy to distinguish between by the use of colour and pattern above each heading.

I think the Telegraph is one of the best examples of rhythm being achieved through its use of the grid – a natural ‘flow’ is created below the fold, where the page is divided first into 2, then 3, then 6 regions. The baseline grid also seems to have been used more successfully to help align text horizontally across the page.

 

The Daily Mail

 

By now I am seeing an online newspaper convention emerging – the Daily Mail also divides a 12 column grid into three regions, with the priority headline article on the left and the feature image in the centre.

Of the newspapers that I have looked at so far, it is one of the most symmetrical and least demanding of the user. Interestingly, no border lines are used at all to separate these regions; it doesn’t seem necessary with such a simple and consistent layout.

One main difference is that the right-most column features solely and almost to the bottom of the (incredibly long) page the ‘Femail Today’ headlines with images. This decision was obviously made due to the strength of interest that users have shown in the Femail editorial content. Whilst the main bright blue colour is used consistently across the page to identify headlines, two other shades of blue are used to promote the ‘Comments’ and ‘Add to My Stories’ functions and to clearly distinguish the Femail section. The Daily Mail seems to be ahead of the more traditional broadsheets in this aspect. Snell (2008) acknowledges in his article ‘Newspaper Web Design: Trends and Examples’, that “a growing number of news websites recognize the impact of social media, but they are still using such tools subtly in their designs.” He compares newspaper websites with their closest genre, blog websites and observes that “Most news websites do offer feeds, often according to category of content, but they’re not a major part of the design or layout. In fact, most visitors probably don’t even notice the small icons or links to feeds. As RSS feeds become a part of the daily lives of average readers, this will probably change.”

The layout is sufficiently flexible to allow for regions of varied column widths across the page, below the fold. Image sizes are used very consistently, which creates continuity down the page, especially down the Femail column.

 

The New York Times

 

 

Since it belongs to the most grid-based city in the world, you would expect the New York Times to be one of the prime examples of an effortless, logical grid design. Surprisingly it isn’t – until you scroll below the fold.

The branding area is I feel, a little compromised. The two small advertisements on either side of the logo sit clumsily since they don’t align with anything else in the grid and they detract from the impact of the logo. Although the red ‘Become a Digital Subscriber’ call to action button is well emphasised, it is placed clumsily, rather than thoughtfully offset. The ‘Get a Full Times Experience’ tagline is presumably supposed to relate to the subscription offer, but at first glance looks more like a weak, second branding header, which is confusing. I also feel that the logo would look a lot stronger if the font size was considerably larger than the main top news headline.

Above the fold, I struggle to find any aesthetic beauty, rhythm or ‘rest’ in the layout. It is clear that all the navigation links I need are to the far left in the first column. I guess the main headline stories are in the middle, widest region, although as I scroll below the first article, the region divides up again into two regions of unequal width, with no easily identifiable purpose. Furthermore, there are inconsistencies in font size, case and line height.  Generally the baseline grid, if it exists, does not seem to be holding the flow of the text together across the page. A random large white space in the far right region suggests some disorganisation of content too.

Finally, as I scroll further down to the ‘Inside NYTimes.com’ field, I find some symmetry and rhythm. Suddenly the grid is simple and easy to navigate, like the streets of New York. It’s just a shame I had to scroll down that far to find a working grid.

 

Conclusions

 

Online newspapers are a very challenging genre of website for the web designer. Content is large in volume and updated several times a day. There are so many constrictions and problems that it seems that little opportunity is left for consideration of aesthetic beauty. It also seems to be important that the newspapers closely represent their hard copy counterparts, in order to create users’ recognition of the brand online. Therefore the grid is also constricted very much by users’ expectations and the traditional conventions of the newspaper genre. Already, some of the newspapers (many of which are not reviewed in this essay) are evolving to accommodate web 2.0 features more overtly, for example the comment links in the Daily Mail. Online newspapers need to continually evolve in order to adopt new web 2.0 features such as user generated content and multimedia elements, but they must evolve with subtlety and at a pace that does not alienate the reader.

Jan 252012
 

“Grid systems can facilitate creativity by providing a framework and already answer some designers’ questions such as ‘where should the folios go’, ‘how wide should the measure be?’ etc. A well designed grid system will go some way to answer these questions and more.”

— MARK BOULTON

  Grids have been a tool for ordering graphical elements in the works of graphic designers for quite some time now. They have managed to ease the work of a designer by introducing structure and order on the canvas. You might think that this may be constraining to once creativity by putting it under the tyranny of a fixed net of horizontal and vertical lines. However this is far from the truth. Grids are all about mathematical ratios – how big is one column with respect to the other column? May those proportions be formed by whole rational number (1:2, 2:3, 3:4) or may be some irrational ratios such as the Golden Section (1:1.618). What makes them ideal is not that they are mathematically accurate, but their unexpected commonness. Those ratios surround us in our everyday life from the buildings we create to nature itself. People subconsciously are used to seeing those ratios everywhere and whenever something does not fall into the “known” ratios we feel like something is wrong with it without actually knowing what the reason is. The person quickly discards the oddity and gets on with his life. The same principles apply in web design as well, only here you cannot afford to have a user irritated because of the irregularity you might have introduced by not using a grid system. Only recently grids have been introduced to the word of web design and they have changed our workflow for the better. (An simple example of web grid system)

So how are grids used in web design? Let us have an example.

Continue reading »