Upload
samlane182
View
30
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Phils Presentation of Grids and Divine Proportions
Citation preview
Grids& divine proportions
BAGD
Introduction to grids
Phil McDonald
FibonacciSequence
BAGD
Introduction to grids
Phil McDonald
BAGD
Introduction to grids
Fibonacci Sequence
Fibonacci sequence ratio 8:13 links to Golden section
This sequence is not only evident within design but also nature.
BAGD
Introduction to grids
Fibonacci Sequence
The human face follows the ratio and we find people whose faces are truer to the ratio more attractive. (?)
Classic Renaissance masterpieces, architecture from antiquity, and even human body parts are proportioned based on the ratio down to the fingers themselves.
BAGD
Introduction to grids
Fibonacci Sequence
A series of numbers in which each number is the sum of two preceding numbers.
0+1= 11+1= 21+2= 32+3= 53+5= 85+8= 138+13= 2113+21= 3421+34= 5534+55 = 89
0+1= 1
1+1= 2
1+2= 3
2+3= 5
BAGD
Introduction to grids
Fibonacci Sequence
Draw two small squares together.
Draw a third square using the combined lengths of the two original squares together.
1 & =
=
1 1
2
1
1 1
BAGD
Introduction to grids
Fibonacci Sequence
Continue to repeat this process and the set will form as shown...
2
3
5
1
1
BAGD
Introduction to grids
Fibonacci Sequence
55 point title should be complemented with 34 point body copyby applying Fibonacci’s sequence.
BAGD
Introduction to grids
Fibonacci Sequence
Apply your understanding of the fibonacci sequence using grided paper.
Dividing the page
BAGD
Introduction to grids
Dividing the page
Golden Section
BAGD
Introduction to grids
Golden Section
BAGD
Introduction to grids
Golden Section
...Forms the basis of paper sizes and its principles can be used as a means of achieving balanced designs.
Many ancient cultures from Egyptians to the Greeks used this thinking to gain beautiful designed proportions.
*Fibonacci sequence ratio 8:13 links to Golden section
Golden Section Rule - 8:13
1.62is the golden number
BAGD
Introduction to grids
Golden Section
Is also known as the Golden Rectangle.
Definition -
“Golden Rectangle is a rectangle in which the ratio of the length to the width is the golden ratio”
Basic Calculations to finding the Golden Section of a page:
1.62 divided with page width.
56cm Divide by 1.62
= 34.56 (Round off to... 35)
BAGD
Introduction to grids
Golden Section
= 34.56 (35)
56cm 35cm
35cm
21cm
21cmDivide by 1.62
BAGD
Introduction to grids
Golden Section
35cm21cm
35 Divide by 1.62
= 21.60(22)
22cm 13cm
BAGD
Introduction to grids
Golden Section
35cm21cm
22 Divide by 1.62
= 13.58(14)
8cm
5cm
14cm
9cm
6cm 3cm
BAGD
Introduction to grids
Golden Section
BAGD
Introduction to grids
Fibonacci Sequence
Apply your understanding of the Golden Section by dividing your grided paper into the golden ratio.
The Rule Of Thirds
BAGD
Introduction to grids
Golden Section
BAGD
Introduction to grids
Rule of Thirds
The concept of the golden ratio can be simplified.
The rule of thirds governs the placement of points of interest in a scene.
Divide any given image into thirds both horizontally and vertically.
You’ll get 9 grids.
BAGD
Introduction to grids
Rule of Thirds
According to the rule of thirds, the vertices of those lines (where the lines cross) are the ideal placement 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.
BAGD
Introduction to grids
Rule of Thirds
People scanning the page are more likely to notice things placed near the focal points, and the division is comfortable to view.
More complex design is possible by breaking down those thirds into further thirds.
focal point
BAGD
Introduction to grids
Rule of Thirds
Major images, news boxes, search bars and any other points of interest can be nestled on or near the horizontals.
This little shortcut will give you a design that is both easy on the eyes and makes people drawn to key pieces of information.
information point
BAGD
Introduction to grids
Fibonacci Sequence
Break down & cut out your layouts using the rule of thirds.
Find focal points & information points.
BAGD
Introduction to grids
Golden Spirals
Another method of using both the golden ratio and Fibonacci numbers are the golden spirals and Fibonacci spirals.
The spirals have been used in artwork for as long as the numbers and ratios themselves.
The theory is that areas of negative space and visual interest should fit within the spiral. Within this image, as with the rule of thirds, the eye is naturally drawn to the center of the spiral to look for details.
BAGD
Introduction to grids
Golden Spirals
The spirals can serve as a guideline for content density and clustering.
They can serve as the foundation for the ratio of your website header images, search bars and tool bars.
BAGD
Introduction to grids
Identify Your Grid
Cut layouts into columns, headers, footers, images, subheadings etc...
Identify its grid.
BAGD
Introduction to grids
Identify Your Grid
Using different magazine layouts -
Frankenstein a custom layout of your choice and hand make a grid of your own...
BAGD
Introduction to grids
End bit...
“Using the divine proportion, you give yourself an edge of natural logic and organic grace that all humans have a subconscious attraction to.
The golden ratio is yet another tool at your creative disposal...”
Canons& Gridsweek 2
BAGD
Introduction to grids
Phil McDonald
Van De Graafcanon
BAGD
Introduction to grids
Phil McDonald
BAGD
Introduction to grids
Van De Graaf
...A gridded page is much likescaffolding for a building.
It is a structure that elements can be organized.
A grid will help continuity to bemaintained and information digested with flow.
BAGD
Introduction to grids
Van De Graaf
The Van de Graaf canon is a historical reconstruction of a method that may have been used in book design to divide a page in pleasing proportions.
This canon is also known as the “secret canon” used in many medieval manuscripts and incunabula.
BAGD
Introduction to grids
Van De Graaf
The construction of Van de Graaf’s canon, works for any page width:height ratio.
BAGD
Introduction to grids
Van De Graaf
BAGD
Introduction to grids
Van De Graaf Symmetrical layout.
BAGD
Introduction to grids
Van De Graaf Single Page Canon
BAGD
Introduction to grids
Van De Graaf Asymmetrical Layout
BAGD
Introduction to grids
Gutenberg
Historian John Man suggests that Gutenberg’s Bible page
was based on the golden ratio.
BAGD
Introduction to grids
Octavo Format
The text area and margin proportions are determined by the starting page proportions.
BAGD
Introduction to grids
Golden page & Resarivo’s 9ths
BAGD
Introduction to grids
Application of Canon
BAGD
Introduction to grids
Application of Canon
BAGD
Introduction to grids
Application of Canon
Leadinga very brief overview
BAGD
Introduction to grids
Phil McDonald
BAGD
Introduction to grids
Width Of Column
Column width is more than just design or format.
it is also based on legibility.
Printed Collateral (text) is read by the eye of a distance of 30 - 35cm.
According to empirical rule there should be 7 words per line for a text of any length.
To keep the type area light and open (in appearance) we must consider the leading.
i.e. The vertical distance from line to line which suits the size of the type.
BAGD
Introduction to grids
Width Of Column
Overlong text lines tire the eye, as do overshort ones.
Readers find overlong lines strenuous to read.
This is because too much energy is spent keeping the horizontal line in sight over a long distance.
Too short of a line and your eye chages text lines too often.
Time and Energy wasted.
Wrong column widths lead to...
BAGD
Introduction to grids
Width Of Column
Column widths with 12 point sans serif.
14 point leading.
A column is easy to read if it is wide enough to fit in average 10 words per line.
BAGD
Introduction to grids
Width Of Column
15 point sans serif.17 point leading.
20 point sans serif.24 point leading.
24 point sans serif.28 point leading.
28 point sans serif.32 point leading.
BAGD
Introduction to grids
Width Of Column
The key is ease of reading.
Text must not impair the rhythm of reading.
This can not apply to titles and subtitles.
Advertising functions
require headings
to standout and be
absorbed by the eye.
It’s function is to sell.
Are columns just aestheticcreatures?
Margin Proportions
BAGD
Introduction to grids
Phil McDonald
BAGD
Introduction to grids
margins
Margins can have a influence on the overall feel of a page of print.
Too small - looks over full.
Too large - exageration.
Well balanced margins on the sides, head and tail can create an agreeable impression.
BAGD
Introduction to grids
margins
BADLY PROPORTIONED...
1 X 1 X 1 X 3 (pica’s)
Side margins are the same width, looks wishy-washy.
Same sized margins can never generate an interesting page design...
1
1
1
3
BAGD
Introduction to grids
margins
THEY GENERATE THE IMPRESSION OF INDECISION AND DULLNESS...
BAGD
Introduction to grids
margins
WELL PROPORTIONED...
Intended to be the right hand page due to larger left margin.
More applicable to literature rather than advertising etc...
The margins are luxurious but would this increase print costs?
4
3
3
7
BAGD
Introduction to grids
margins
Well...Is it all just about aesthetics?
The type area!no... really.
BAGD
Introduction to grids
Phil McDonald
BAGD
Introduction to grids
Type Areas
1 & 2 Column Grids
Constructionof gridsweek 3
BAGD
Introduction to grids
Phil McDonald
BAGD
Introduction to grids
construction
Before you can apply a grid you must understand the requirement of the grid for the work to be produced.
Typeface, text & illustrations, print method and paper quality must be confirmed beforehand (ideally).
Always start with small sketches...
Thumbnail sketches will make your job of final layouts easier and productive.
Thumbnail sizes should be proportonate to the final format...
... to make your job of final layouts easier and productive.
BAGD
Introduction to grids
construction
Before drawing your sketches, consider the number of columns needed.
For example...
1 column only for text and illustrations gives little freedom of layout.
Restriction of making illustrations small, medium or large.
2 columns, logically, gives you more scope:
1 column for text
1 column for illustration
they can be mixed together
2 column division can be subdivided to create a 4 column page...
BAGD
Introduction to grids
construction (with Tom Selleck - Magnum P.I)
1 column only 2 columns
1 column for text1 column for illustration
mixed together...
BAGD
Introduction to grids
construction (with Tom Selleck - Magnum P.I)
Three columns
opportunities for arranging and accomodating text and illustrations in numerous sizes.
You could also subdivide the three column grid into a 6 column arrangement.
Three columns Subdivided into 6
BAGD
Introduction to grids
construction
Disadvantages of 6 column systems are:
Lines of text will be narrow.Small typeface will have to be used.
... But ...
This solely rests on the function that is to be performed!
BAGD
Introduction to grids
construction
For statistics, figures, graphs & trend line publications:
Use 4 columns per page.
BAGD
Introduction to grids
construction
Remember:
4 columns can be subdivided into 8, 16 + columns...
Convenient for representing stats.
BAGD
Introduction to grids
construction
The width of a column dictates
the size of typeface used.
The rule:
The narrower a column is, the
smaller the typeface.
Why is that?
OK BAD ???
BAGD
Introduction to grids
Quick Task...
You have an annual report to layout.
You can only use one single page.You have to use a minimum of 3 columns.You have six images of pie charts to use.
**Include header, footer, headline, subheading, body text**
BAGD
Introduction to grids
Thumbnails
Thumbnails& Developments
BAGD
Introduction to grids
Thumbnails in design process...
Make a variety of thumbnails of layouts / designs.
Do not rely on just one set of thumbnails.
Enlarge a small selection of appropriate thumbnails by 1:1.
Compare them and select and repeat process until you are confident with the design.
in a nut
shell
BAGD
Introduction to grids
Thumbnails
Apply typeto columns...
BAGD
Introduction to grids
Apply type to columns
The first line must fit flush to the top limit of the column grid.
The last line must stand on the bottom limit.
Keep calm, it is difficult to find the final solution the first time around.
It could mean that your grid field is too high or too low.
BAGD
Introduction to grids
Apply type to columns
1:1 thumbnail type area with the depth and breadth that fits best both functionally and aesthetically
Divide into further 2 or 3 text columns.
example shows 2 columns. Divide the type area into two columns by adding gutters.
Divide the text column into 2 or 3 fields.
Decide what type point size and leading for the text.
To know that you have the correct type point size for the space you are filling in you must have the same amount of lines per field within the overall column.
BAGD
Introduction to grids
Apply type to columns
10 point type15 point leading
Column length 15cm
loosely means use 15 point leading.
at this length there must be 10 lines per
field.
meaning 30 lines every per 15cm.
The depth of my fields ascertains
how many 10point type lines i have.
BAGD
Introduction to grids
Apply type to columns
Figure 1 -Match grid fields to the lines of text that live next to field line.
It must be measured as 1 line space. A proportion of the leading and type point size.
Figure 2 -Final 6 field grid.
1 2
BAGD
Introduction to grids
Apply type to columns
Lines of text aligned to grid fields.
BAGD
Introduction to grids
Headings and body text
Font Heights
BAGD
Introduction to grids
Font heights
4 point type6 point leading
Caption text Header & Footer text
7 point type10 point leading
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s stan-dard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining es-sentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas-sages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown print-er took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was pop-ularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
BAGD
Introduction to grids
Font heights
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recent-
subheading example one
Headline 2
10 point type13 point leading
Body Text Headline
Subheading20 point type
40 point type
BAGD
Introduction to grids
Type & Picture
Type & picture8 field grid...
BAGD
Introduction to grids
8 Field Grid
A4+ Format.
8 & 20 grid fields.
8 grid fields are used frequently for advertising material and brochures.
If using 8 field grids, you can subdivide into 16 grid fields.
8 and 16 grid fields give you a range of possibilities.
BAGD
Introduction to grids
8 Field Grid
BAGD
Introduction to grids
8 Field Grid
8 grid fields allow various sizes of illustrations to be portrayed.
You can use with or without text.
You need to have a good perception of composition.
BAGD
Introduction to grids
8 Field Grid
The grid is only an instrument in which you, a designer, can make interesting and balanced designs.
BAGD
Introduction to grids
8 Field Grid
BAGD
Introduction to grids
8 Field Grid
BAGD
Introduction to grids
8 Field Grid
BAGD
Introduction to grids
20 Field Grid
20 field grid has quite a large scope for idea solutions.
There is around 42 possible layout options.
BAGD
Introduction to grids
20 Field Grid
Example.... and so on....
BAGD
Introduction to grids
20 Field Grid
BAGD
Introduction to grids
Overall So far...
So, there you have the basics.
It is up to you to use the teachings to create and develop your design response.
...Are grids et al an aesthetic choice?