You Are Reading

OUGD404 DESIGN PRINCIPLES- Grids session

Fibonacci Sequence- The Fibonacci sequence is a series of numbers where each number is the sum of the previous two numbers. This is a sequence mimicked throughout nature and is evident in design. It is a proportion tool not a measurement tool. Starting with 1 the sequence is:
1+0=1
1+1=2
2+1=3 
3+2=5
5+3=8
8+5=13

13+8=21
21+13=34
34+21=55
55+34=89



Using this sequence we can use it as a guide for header and body copy, for example 55pt header would mean 34pt body copy meaning everything would be in proportion.


To get used to the sequence we practiced drawing it a few times;







Dividing the page


Golden Ratio- This is used for balanced designs and layouts, it gives us a divine sense of aesthetic that we can apply to web design. By applying the golden ratio properly, we can make our websites visually compelling. The most common way to use the golden ratio is with layout. Using the golden ratio we can divide the width of our website to create a “golden layout” of two columns.




1.62 is the golden number and the ration can be applied to the length and width. For example if we have a rectangle 56mm in length and we wanted to divide it using the golden ratio;







Ultimately the grid should look something this;

I experimented applying the golden ratio to a sheet of graph paper, at first it was difficult to get my head around but it all became clearer after the first divide.






The rule of thirds

According to the rule of thirds, the vertices of those lines (where the line cross) are the ideal placemat for points of interest. People scanning the page are more likely to notice things placed near the points, and the division is comfortable to view.




Looking through the selection of magazines we were asked to bring in we had to try and find pages where the rule of thirds had been used, this was the best example I could find. I found this task quite difficult to do because my magazines didn't have a huge variety of grids.


The final task was to dissect a pages grid into different sections; header, title, sub heading, body text, image and footer...





Comments for this entry

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.