Introduction

“The mathematical sciences particularly exhibit order, symmetry and limitation; and these are the greatest forms of the beautiful.”

Aristotle

Achieving beauty has been the utmost goal for humankind from its very first attempts at art, and mathematical sciences were its perfect allies for reaching boundaries that had never before been attained. The Golden Ratio, or the Divine Proportion, which is symbolized by Phi, is such an approach. It is a visual pattern that exists everywhere in nature. By using it in art, a natural sense of correct composition and an aesthetically pleasing feeling are achieved.

A perfect example of this approach to art is the Parthenon where golden rectangles were applied. The following picture shows how the small details of the monument (small rectangles) gain harmony in relationship to the rest:

acropolis

The Acropolis

By using a grid system, a framework of crisscrossed parallel lines or bars, one comes very close to the Golden Ratio and thus achieves order, symmetry and finally beauty.

All kinds of artists use grids to aid their works. Architects use them to create not only a functional and aesthetic building but also a safe one. Cartographers have used grids for centuries to aid them in mapping the terrain on their prints. Painters use them to compose complex techniques in their paintings and thus achieve an aesthetically pleasing result. Writers make good use of grid systems to make sure that their books, periodicals, magazines and newspapers will be readable and the content be delivered effectively to the readers. Even in sports grids are used. In this case, beauty is attained by organizing the players effectively to achieve precision in their performance. For the exact same reasons, web designers use a grid system for the benefit of their work.

The reason behind grid systems functioning in this way lies in psychology and how the human brain perceives objects. Throughout history, humankind has been fond of categorizing things, grouping tangible objects. It is just more convenient for the brain brain to understand those objects through a systematic approach.

Gestalt psychologists have investigated the brain’s “self-organizing tendencies” (Wikipedia).  The result of their work, which was named the “Principles of Grouping”, triggered a better understanding of this behavior. The findings claim that when people observe a group of things, unconsciously they tend to arrange, to order, and to simplify them in specific patterns that make it easier to perceive them. Specifically speaking, these psychologists proposed a set of principles called “Gestalt laws of grouping”. Four of them, namely proximity, similarity, closure, continuity, are particularly relevant to the grid systems which provide organization in web design.

Proximity

The law of proximity refers to the inclination of the mind to group things together. In other words, the mind may ignore an isolated piece of data such as a cube and consider it as a whole when this cube is among other similar data. An indicative example is the following image:

proximity

The Law of Proximity (a)

The first image shows a bunch of cubes. The mind does not perceive those cubes as a group, but it can see them as individuals. However, if we put the cubes together, as in the second image, the brain will group them as a whole, and not as individuals.

Similarly, the mind will perceive the cubes as two different groups as in the following image:

The Law of Proximity (b)

Similarity

The law of similarity refers to the inclination of our minds to group things according to their properties. The brain accords each similar item given in a pattern with another of a similar shape, color or other distinctive characteristic. For example in the following picture, the brain arranges its contents according their shape in two different groups; circles and squares:

similarity

The Law of Similarity

Closure

The law of closure explains that the brain perceives a shape as a whole even though it does not really exist. Good examples are the following famous logos:

Closure

The Law of Closure

Looking at the two logos, someone will perceive them as a whole; a group of lines which have some consistency on their shapes are apprehended as letters and in this case those lines form the initials of IBM company. WWF’s logo is based on the same principle, as the panda depicted has no real outline, but a rather careful shape manipulation gives the impression that an invisible outline exists.

This is useful for newspapers, magazines, articles and anything which uses a grid system. For example, in articles or books each line’s start and end matches the ones of the next or previous line. It is like there is an invisible grid which defines those starts and ends. This is what the Law of Closure talks about. Respectively, the same occurs in our case, web design as shown at pictures (a) and (b).

Continuity

The law of Continuity clarifies what occurs when our brains see an intersection between two or more items. We tend to perceive each as a single uninterrupted object because of the tendency to group lines or curves according to their direction. Therefore, in the image that follows, the viewer interprets the two vertical lines I and I as the letter H instead of those different parts, ignoring the wave that the star creates slicing through it.

continuity

The Law of Continuity

In both pictures below, (a) and (b), the user may not perceive the grid in the headlines and the text, but the red and blue columns indicate that the designer used such a system to align all items for the desired result:

the grid system

(a)

I love typography

(b)

 

 

 

 

 

 

 

 

 

 

Furthermore, as depicted in all previous image examples, and those of the principles included, it is obvious that the use of white space in design plays an important role in how our brains perceive shapes, patterns or forms. That happens because the white space serves as a distinction between them. In other words, it is an optical illusion. The same effect takes place in layouts.

With these laws in mind, we can see that order, unity, flow and white space can aid for a better understanding of a group of objects perceived. They especially help in cases where the items in a given layout are going to be complicated and compressed. When the layout is out of order, the brain has difficulty accepting stimuli. And in our case, when this happens, a website becomes uninteresting.

A grid system, then, is the key for constructing order in a layout. However, order is not always enough. In web design, a grid system is used to develop a layout’s consistency and order, which may seem organized, but it can not always be aesthetically pleasing or effective in terms of usability. For this, grid systems are used in combination with various mathematical computations. Some of those techniques are the use of the golden ratio, the golden rectangles, the golden triangle or the rule of third.

These techniques are picked by web designers as a way to best express the message they need to convey and each website has its own requirements and characteristics. For example some blogs, magazine websites or other famous ones, such as Twitter, are mostly based on grid systems which use an approach based on the Fibonacci sequence formulae as shown in the picture below, but this is not a rule.

twitter

Twitter

Some web designers neglect those techniques but use a grid in a way to help them arrange items in an attractive way. Again, mathematics are included here, even though no mathematical approach was used. The reason is that Aristotle’s quote can be used vice versa. John Michell’s quote best express it:

“The mathematical rules of the universe are visible to men in the form of beauty.”

John Michell, inspired from Plato

More specifically, websites use various approaches that differ very much from each other. A media website genre is a good example to show how those different approaches are used even though they may not be really obvious.

 

Website Analysis. Genre: Video Media/Broadcast Website

youtube logo

 

 

Youtube is the most popular video streaming website. The main contents of this website genre are the videos, which are offered in 4:3 aspect ratio. The Youtube designers planned the website using as a starting point the logo of the firm, which is located on the upper left corner of the website. Then, using a simple two column grid for the general content, they managed to make a fixed, centered, layout, grouping the items of the website, as can be seen in picture 1. The main column contains the most important feature of the website, which is the video player, and it is followed by a comment section in the same column. The second column is functioning as a “see more” section, which currently has an advertisement as a starting point at the top. It is obvious that the Law of Proximity and the Law of Similarity have been put into effect in this layout.

youtube columns

Picture 1. Youtube fixed layout

On the other hand, the Youtube website has a slightly different layout on other pages. What was analyzed before was the most viewable page of the website, which is not the Youtube homepage, but the page that most of the users are familiar with, as they are directed to it by links from posts such as those from Facebook. They are willing to visit the original site rather than view the embedded video or they were prompted by others to visit it from emails or Twitter.

The Youtube homepage uses a three column layout as can be seen in picture 2 and picture 3. What is important here is the way that the designers constructed the website, arranging items in an hierarchy in the form of a half cross. This “halved cross” indicates where the most important items have been placed; the main advertisement of the website lies horizontally, and the video categories’ navigation lies vertically in the first column. Above the horizontal bar the upper navigation is located along with the sign in / sign up details. Even if the user switches off the advertisement, there is no impact to the website because the videos, which were of secondary importance, now take the place of the advertisement in the blue horizontal line (picture 2). That’s a great advantage for Youtube as it is another way to benefit from the user even in this case.

half cross

Picture 2. The "halved cross"

The triangle in picture 3 represents how the emphasis is given in visual hierarchy. As stated before, using the Youtube logo as a starting point and keeping the half cross in mind, the designers put the items onto a three-column grid. As it is obvious in picture 3, the important content here is included in the triangle:  the search bar, the sign in call for user customization of the website, the call to action buttons (sign in and create account), the video category list, the horizontal navigation bar at the top, account links , the main advertisement, and of course, the logo. This arrangement gives the layout a clear direction to aid usability. The user is directed to log in, or create an account to enjoy most of the website. But even if the user doesn’t do so, the main features of the website are still offered and the user is called to choose between the navigation and the search bar which is the most popular feature. This is the reason the designers put it beside the logo.

youtube triangle

Picture 3. The triangle

The horizontal alignment in Youtube is not obvious at first sight, except for the case of the top alignment between the three main columns of the content. However it is used for the visual grouping of the secondary items in the layout, such as the thumbnails or information details for each video uploaded. Picture 4 depicts in red the horizontal alignment and in green the vertical alignment.

youtube alignment

Picture 4. The alignment

 

vimeo

 

 

vimeo

Picture 5. Vimeo

Vimeo is another popular website which attracts video artists and is often used for uploading short films, sketches and portfolios. The website has an easy to navigate interface and offers the ability to make and moderate video groups. In other words, the website is built for serving an artistic community involved in video production.

The website is designed in a Jello layout (Picture 6) where the content is presented in the middle of the viewport. Youtube has the same layout, but it is not as obvious as it is in Vimeo due to the difference in content and background color.

vimeo jello

Picture 6. Jello layout

At first glance, the website gives the impression that it uses a two column layout. However, as it is obvious in picture 7, those two columns are just “containers”. Vimeo website has a layout which is using a three-column vertical grid. The first column is called to align the “other video” thumbnails with the main video on the left side and the first tab title “Videos we like”. The same column provides a right alignment on the same thumbnails too. Therefore, all images are given in a particular size to give a pleasant and organized feeling.

The second column contains the details of each video / thumbnail provided and it is wide enough to fit the description, but not longer than expected as screen readers have difficulty in reading long lines on the viewport. A connection between the description and the thumbnail is provided with a horizontal alignment which functions in a way which gives the impression that the two blocks; the thumbnail and the description, are relevant to each other.

Finally, a third column aligns the right and left sides of the secondary vertical container which is located on the right of the website. It is noteworthy to state that there is a right alignment between the welcome message “Welcome, you’re new, aren’t you?”, the Vimeo logo, and the left side of the first and main container. This aids in giving a good visual feeling and locks the logo at a stable position, which means it is not suspended in the air but it is attached onto a firm invisible gridline. Similarly, on the right side, we can see that the right side of the upper navigation is aligned with the right side of the Jello layout. The same function as the logo, now takes place for this navigation bar.

vimeo columns

Picture 7. Grid and columns

The grid system works as a point of reference for snapping the logo onto it. The same goes for the beginning of the main title, in this case the welcome message. Thus a cohesive structure at the layout of the website and a strong brand image are achieved. The Jello layout is designed in a way that gives Vimeo a recognizable appearance. This exactly is the strong point for the layout’s credibility and identity.

 

Dailymotion

 

Dailymotion is a less popular video streaming website which accommodates videos in a grand variety as Youtube does. However it attracts a lot of users and apart from other features that it offers, one reason for its popularity is the impressive organization of its content and the friendly user interface. Every item seems to be attached to a grid line that connects it with another of similar importance. The main point of the website, the video player, seems well positioned too. Dailymotion is an obvious example of a website which has a well-arranged grid system in contrast to Youtube and Vimeo. Because the content disposition is firm and concise, it adds to the website’s  credibility. The gutters (or alleys) are wide enough to allow the layout to “breath” because the white space which exists gives an obvious separation to the viewer but not in wide irritating fashion. This also aids legibility as well as usability as users can navigate easily through the website without getting confused by crammed content.

This website is based on a four plus two column layout, as shown at picture 8:

dailymotion six columns

Picture 8. Dailymotion layout

Each secondary item in the website is offered as a tightly organized block as shown in picture 9. In this picture the grouping and the alignment are obvious and are arranged in two general columns that contain other individual columns; the first contains four and the second contains two.

dailymotion blocks

Picture 9. Blocks

As it is apparent now, visual hierarchy is emphasized as each block is separable and locatable. The user will be able to focus on the section that interests him / her.

On the bottom of the same page, the homepage, the website offers both a vertical and horizontal alignment. The vertical alignment, as expected, is a continuation of the upper part of the website grid. Horizontal alignment aids legibility and vertical alignment aids the grouping of each item under the Law of Similarity. Even the Law of Closure plays an important role here too, although less obvious, in the form of an invisible line that connects each group under its generic title. The white space plays an important role in these principles and in the layout in general.  This is depicted in picture 10:

dailymotion bottom

Picture 10. Dailymotion, bottom part

Conclusion

In general, media website genres such as video streaming websites as Youtube, Vimeo and Dailymotion, are not heavily dependent on a grid system as, for example, the newspaper website genre is. The newspaper genre contains articles, headlines and subtitles that absolutely need a grid system to be legible and be equal to the printed version. However, this does not mean that a media website does not need a grid system. The content it contains, in other words the main video player, user interaction and a choice of alternative videos on the side, would be displayed more effectively through a grid system since such a technique aids in grouping and in putting order to the content. Therefore, the interface design acquires a good visual balance and becomes functional as it is simpler for the user to perceive the contents. Consequently, the website which makes good use of a grid system gains credibility and its brand becomes recognizable. What is important for the latter is that the company has to maintain a well-organized website, and consistency through time. That means if the website changes often its interface, the users will have difficulty to adapt. Some websites can be an exception to that rule, such as famous ones as Facebook is, but for most, this rule has to be a principle.

Grid systems bring organization to the subject they are applied to no matter if it is a website, a newspaper, a map or even a school blackboard. However, they would not be effective if they had no beauty. But as Aristotle said, order symmetry and limitation are exhibited by mathematical sciences. And grid systems are mathematical.

 

Inspiration and reading from:

Links

http://en.wikipedia.org/wiki/Gestalt_psychology

http://en.wikipedia.org/wiki/Principles_of_grouping

http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

http://blog.erichatheway.com/2009/09/10/the-six-laws-of-visual-perception.aspx

http://v4.jasonsantamaria.com/articles/whats-golden/

http://eyetrackingupdate.com/2010/06/14/eye-tracking-web-usability-study-reveals-golden-triangle/

http://britton.disted.camosun.bc.ca/goldslide/jbgoldslide.htm

http://www.jimloy.com/geometry/golden.htm

http://en.wikipedia.org/wiki/Golden_rectangle

http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design/

http://www.presentationzen.com/presentationzen/2005/08/from_golden_mea.html

http://www.johnakerson.com/blog/2010/09/why-you-should-avoid-the-golden-ratio/

http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

http://vcareyux.wordpress.com/2011/11/23/the-psychology-of-ux-part-10/

http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1

http://www.markboulton.co.uk/journal/comments/design-and-the-divine-proportion

http://designinformer.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/

Books

“Designing for the web”, Mark Boulton.

“White space is not your enemy”, K.Golombisky & R.Hahen.

“Ordering Disorder, Grid Principles for Web Design”, Khoi Vihn.

 

 

« »