Grids in webdesign
Critical essay
Aesthetic grid – a grid following The Golden Ratio
(also known among other names as the Divine Ratio, the Golden Rectangle, the Golden Section, the Golden Mean, the Fibonacci Numbers, …)
Foreword
In this essay I will be taking a different approach in order to investigate and analyze a certain grid pattern rather than look into different grids on specific kinds of websites.
Introduction
Over the centuries, artists and architects have been integrating the Golden Section into their constructions and art pieces. It is believed that they copied this from nature where it is found in abundance. The Golden Rectangle has even been embedded into music. If every creative individual is adopting the shape or the mathematical pattern into their designs, without a doubt, so are the Web designers.
Consequently my aim is to discover and reveal the orders of how this pattern has been used and how it has affected the visual appearance and usability of the webpage.
What is a grid?
A grid is a tool for designers used to line graphical elements of text and images. It is believed to be a result of the constructivism art movement from where it later emerged into typography and commercial design.
Grids help us to improve composition. Using a grid enables us to separate form and function facilitating the focus on aesthetics permitting designs to “look right” – a subconscious feeling based on construction related to mathematics.
Websites are formulated around a structured layout and the structure is made evident at the users first impression. A well laid out page offers user confidence. For a designer, the grid is an indispensible tool used to impress the user by creating well-structured, aesthetical and pleasing websites. The grid is a structural base of the website, when the elements are positioned accordingly; it gives us a visual impression of the structure. A designer’s aim is to make the impression user friendly and pleasing.
There are many theories of aesthetic measurements all of which have their own mathematical patterns.
The most evident mathematical form is the Golden Section Theory, a theory where the framework relies on nature’s patterns.
“The mathematical sciences particularly exhibit order, symmetry, and limitation; and these are the greatest forms of the beautiful.”
Aristotle
The Golden Section
The Golden Section, also known as the Golden Ratio or Divine Proportion is a ratio of 1.618 – a naturally occurring number called Phi (φ). This mathematical pattern is evident everywhere in the nature surrounding us. Its recurrence is believed to justify its ease on our perception. It is like the instinctive code our brain transmits as “an ideal” inducing us with the feeling of natural balance, order and harmony.
The Golden Ratio has been used for centuries, in art and architecture, for pleasing and aesthetical results. Designs using this ratio appeal more visually compelling.
In mathematics and the arts, two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. The figure on the right illustrates the geometric relationship. Expressed algebraically:
a + b : a = a : b = φ
, where the Greek letter phi (φ) represents the golden ratio. Its value is:
φ = 1 + √5 : 2 = 1.618…
(www.wikipedia.com, accessed 10/01/2012)
The Golden Rectangle
Golden Rectangle uses the same ratio – Phi.
A Golden Rectangle is one whose side lengths are in the golden ratio,
1: 1 + √5 : 2
or approximately 1:1.618.
A distinctive feature of this shape is that when a square section is removed, the remainder is another golden rectangle; that is, with the same proportions as the first.
(www.wikipedia.com, accessed 11/01/2012)
This shape is frequently applied to design layouts and other pieces of graphics icons, logos and images.
The longer side of the rectangle holds the longer value a, while the shorter side represents the value b.
These two particular geometrical shapes are used as a guide for calculating any layout issues. They can be used as wireframe for placing stock images at Web page, positioning page widgets and other elements. Same way hey can be used to size the branding box, columns and footer. Most eminently it is used in dynamic content.
The Golden Spiral
In geometry, a golden spiral is a logarithmic spiral whose growth factor is φ, the golden ratio. That is, a golden spiral gets wider (or further from its origin) by a factor of φ for every quarter turn it makes.
(www.wikipedia.com, accessed 11/01/2012)
Applying the Golden Section to Web design
Accommodation of the Golden Ratio into design can dramatically improve our design. The pattern can be added to Web design as leading grids for positioning page elements.
To apply Divine proportion to 960px wide fixed layout for one main and one sidebar column we divide 960 to 1.618. This gives us a main content block with width of 593px and sidebar of 367px.
This technique is also necessary when developing fluid layouts for dynamic websites. The Golden Ratio assists us in keeping contents organized in the most organic, natural way. Using the Divine Proportion method you can go further and arrange design also into a 3 or 4 column way.
In print design both the width and height are controlled. This is not directly adaptable for website planning as the content in different pages attempts to vary. Many website have left out the second column creating a single column Home page. Therefore we could apply the Golden Rectangle grid for the only column for its height. Assuming the page with is 960px, the column with a 593px height would become the Golden Rectangle.
Applying the Golden Ratio to the height of the element uses the same method – the width of the column or image or other element is divided by 1.62 which gives us the most pleasing height for that element. In this example, 300px wide column perfect height would be approximately 185px as 300 divided by Phi would give us a figure of 185,19.
Also other elements of the page, such as triangles, ellipses etc., can be inserted into the design as golden section shapes. To achieve more pleasing results also the typography on the page can be adjusted according to Golden Ratio measures.
For fluid designs it is appropriate to use % or em. If the with of the page is 960px and we know that the default font size is 16px we can calculate the column width as follows:
960 : 16px = 60em (whole page width)
60 x 61.8% = 37em (width of the large column)
60em – 37em = 23em (width of the small column)
To check the calculations:
60 : 37 = 1.62
37 : 23 = 1.61 (there is a tiny variance here)
Focal Points
A focal point is a point within design for viewer to look at. It creates sense of direction and plays a role of ”a teaser”. Focal point can be anything – from simple button to image or typography.
While designing it should be delicately considered what the focal points would be. They should relate to design. For example if the website is commercial, the item described could be one focal point and another point would be “buy” button or similar.
How does the Golden Ratio grid look on the screen
Following paragraphs will show how commercial websites have used the Golden Ratio in their webpage construction. Commerce is all about selling. It is crucial the visitor spends maximum time browsing the website, therefore the page elements have to be clearly visible and reachable as well as company products.
E-commerce websites can do well using this ratio intact by arranging products in not only rows but also content-rich columns, which are evenly spaced within the Divine Ratio.
A designer’s goal is reached if the visitor finds the pages pleasant either consciously or unconsciously.
UNIT PORTABLE
http://en.unitportables.com/
Unit Portables is company producing carrier bags and pouches for portable electronic items. As it says on their Web page :
Unit Portables is a system of bags and pouches that structures your gadgets in a smart way. Also, it protects your precious pods and gadgets from dangers in the outer world. And for sure, Unit Portables likes to be on the move just as much as you do.
The motto sounds moving, therefore the design should follow the motto – be dynamic. The page is halved and then the right half is divided to three equal columns using Golden Ratio to position the text of the middle column. Same dimensions are then applied for first and third column. The left half is divided into two using the Golden Ratio grid to allocate the branding logo and to the give the header its height (orange grid). Images of the products are positioned on the focal points (green grid). The page has a fixed height, which is on the ratio of 1.62 with the page width. Although some elements of the page are positioned according to grid conceived by splitting and dividing columns into halve or threes comprehensible to determine the Golden Ratio grid.
The visual impression of the page is clear and pleasing. It looks and is well organized.
BMW
http://www.bmw.co.uk/bmwuk/homepage/
This exclusive car company webpage header is divided into columns following the Golden Ratio pattern a + b + a + b + a, whereas a = b x 1.62. The content area is divided into 5 columns. Middle column edge is positioning first by lining it up to the Golden Ratio spiral. Halving the left part gives the width for one of the three columns and then splitting the rest of the width in to two creates a five column content area. All five columns are not same width but they appear balanced and logical. The large header image is places so that the car itself would be on the grid focal point (green grid). The ratio is also used for determine the header font size – The “Beauty. Seldom seen.” is precisely 1.62 times smaller than rest of the header headline.
There is also rather elegant white space just under the focal point. Negative area on header gathers the attention to the car and solar eclipse acts like a reverter the bringing the eyes back to the car.
Above are the graphics analysis for one of the BMW International website pages. The use of the Golden Ratio grid is constant. Page is divided into 3 equal width columns following the pattern a + b + a + b + a + b. The header is fitted into the one column creating a font size, which on the next line has ratio of 1.62 between the height of the letter and the white background box around the header. The six slide container has a precise location following the Golden Section ratio grid. There is lot of negative area on this page which lifts the elements.
DEMANDWARE
http://www.demandware.com/
Demandware is on-demand ecommerce platform. Their website is quoting “We are committed to the success of our clients as they navigate the constantly evolving digital world”.
By positioning the grid to the screenshot it is clearly visible – every element is passionately laid according to the Golden Ratio grid (orange grids). There is an extra charming element on the page – the products fanlike image, which perfectly fits to the Fibonacci Spiral. The same spiral creates a shadowed background box height for the slide show. The green grid shows position of the focal points. The slideshow images are positioned so that the main element on every image appears at the focal point on the screen (the “products tower” at current image). The two different header fonts height ratio is 1.62 to each other. All elements seem to emerge into the place giving a clear and sophisticated impression.
CLOUDBERRY LIVING
http://www.cloudberryliving.co.uk/
Cloudberry Living is an online boutique offering you a range of high-quality designer gifts and contemporary home accessories from Scandinavia. If you love your home, our boutique is for you. Our user-friendly website gives you access to unique products helping you create a warm, stylish interior as well as offering you a range of beautiful, design-led gift ideas (quotation directly from their website).
The website has variable height pages. The screenshot above shows the element settings according to the Golden Ratio grid. The page width is used to create the container for portfolio-like navigation area. All widths and heights are formulated from the Fibonacci Spiral. Scandinavian design is famous for being plain and simple. This principle is visibly in existent on Cloudberry Living site. In spite there are no image based in the focal points, the attention is driven via branding logo – the letters color is kind of fading from outside. The page is visually balanced and easy to navigate. It looks like five column page but the columns widths are created using the Golden Ratio grid.
BEAMCO
http://beamco.biz/
Beamco is an engineering and manufacturing company located in Minnesota. The motto says “We made it easier and safer to build, transport and move the blades”. Motto is pertinent with the visual appearance of the Homepage. The image of wind turbines brings about the feeling of a breeze – a flow.
This page is showing how the 4 column space can be built following the sequence of the 1.62 ratio. Similar to the Claudberry Living website, every white space and container is considered according to the Golden Rectangle grid. Element after element they are neatly fitted within the matrix. Again, there is no focal point images, the point of interests are created via header image with its shapes pointing to the motto. This all makes page to appear simple and comprehensible. It is easy to navigate and is visually very clear and understandable. This all makes it “feel right”.
Conclusion
The Divine Ratio should be used as a guide, not as a means when developing and constructing the website layout. It should be natural, like the sequence itself, not forced into place. When used creatively and considering design flow, the result appears to be pleasant and “it feels right”.
The examples above show how the Golden Ratio can be implemented to the webpage in many different ways. Grid systems can be demanding, however, working with the Golden Ratio the content seems to drop into the “right” place. The focal points are assembled in such a way that the human brain can easily point to it and drag the visitor with its flow.
Using Divine Ratio makes your webpages appeal organic and “beautiful mathematics” can lead the design to be simply exquisite.
Composition is the key element of constructing a website. Its elements relation to each other and arrangements has spatial power. It is vital to understand how the human eye perceives the balance in meaning of beauty.
Grid-based layouts are aesthetically pleasing and balanced. There are many grid systems, some more complicated and less adaptable within design than others. Using grids ingeniously helps to improve the usability of the website by making the webpage designs more elegant and flowing.
“Mathematics, rightly viewed, possesses not only truth, but supreme beauty – a beauty cold and austere, like that of sculpture, without appeal to any part of our weaker nature, without the gorgeous trappings of painting or music, yet sublimely pure, and capable of a stern perfection such as only the greatest art can show. The true spirit of delight, the exaltation, the sense of being more than Man, which is the touchstone of the highest excellence, is to be found in mathematics as surely as poetry.”
Bertrand Russell
Resources
Roberts, L., Grids, Creative Solutions for Graphic Designerss, 2nd Edition, RotoVision SA, Switzerland, 2011
McNeil, The Web Designer’s Idea Book, vol 2, F+W Media, USA, 2010
Ambrose, G., Harris, P., The Fundamentals of Graphic Design, AVA Publishing SA, Switzerland, 2009
Russell, B. A. W., The Study of Mathematics, in Mysticism and Logic, and Other Essays, chapter. 4, Longmans, London, 1918
Web Design Volume Six, Imagine Publishing Ltd, Bournemouth, 2011
Friedman, F., Applying Divine Proportion To Your Web Designs, May 29th 2008, http://www.smashingmagazine.com/ (accessed January 2012)
Hamilton, S., Grid Layouts in Modern Web Design, September 1st 2011, http://www.onextrapixel.com/ (accessed January 2012)
Boulton, M., The Basics of Composition, 2010, http://designingfortheweb.co.uk/ (accessed January 2012)
www.wikipedia.com (accessed January 2012)