OUGD404. Design Principles. Grids and Layout. Cannons and Grids.

the next session we looked at +grids and cannons in layout wchich are used to design a page in pleasing proportions to the eye.

Van Der Graaf Cannon.

using the van der graaf cannon has been a technique in layout for centuries and works well to position perfectly equal boxes on double page spread along with many other things


v


continuing this cannon will result in a 9x9 grid  1/9th from the top and 2/9th from the bottom.


constructing a van der graaf cannon -

first split the page diagonally from corner to corner



the split the page from top centre to each bottom corner


then draw lines straight up from the top two intersects and make an x out of the four points


then you can make a perfectly laid box from the points illustrated below.






van der graaf cannon in design -

http://retinart.net/graphic-design/secret-law-of-page-harmony/

later on in the session we were asked to start designing out own layouts using grid paper.

the spirals on one side indicate the bound (or inside) side of the page.

OUGD404. Design Principles. Grids and Layout. Divine Proportions.

we were introduced to the new aspect of the design principles module - grids and layout. this section will work towards the design and production of an investigation into what is a book? the body of work we produce will informa and instruct us of the processes and methodologies of book publication.

Fibonacci Sequence.

the fibonacci sequence is a mathematical formula found in nature that works on the principal of adding the previous number to the current - 0, 1, 1, 2, 3, 5, 8, 13, 21, 34. in layout design it is used to determine proportions - it is a proportion tool not a measuring tool. its ratio is 8:13 and follows the Golden Section which is derived from snail shells and such. a page can be divided into sections like below and can then be allocated to headlines, bodys of copy, captions, images etc.

http://www.mathsisfun.com/numbers/fibonacci-sequence.html

http://mathforum.org/mathimages/index.php/Fibonacci_Numbers

Golden Section.

the golden section works with the fibonacci sequence and the ratio is 8:13. 1.62 is the number used to create layout designs by measuring a page length/width and dividing it by 1.62 and then making guide lines on the page. you can then get equal and repeatable spacing on a design. a golden rectangle is a rectangle in which the ratio of length to height can be broken down to 8:13.

Bathers at Asnières Seurat	The Fighting Temeraire Turner

The placement of the golden ratio intersections varies according to the proportions of the canvas.  In the first format below, the golden sections divide the square canvas almost in thirds.  In the second format (a 1 x 2 ratio, for example a 12 x 24 canvas) the lines fall closer to the centre:

http://landscapelearner.wordpress.com/2011/01/21/golden-ratio-rule-of-thirds-and-rabatment/

Rule of Thirds.

for aesthetic purposes. governs the placement of points of interest in a layout. divide an image into 3rds - 9 squares. the magazines below are broken into thirds showing the organisation of txt and image following the rule.

we were asked to doa layout of the fibonacci sequence/golden ratio

OUGD404. Design Principles. Grids & Layout. Construction of Grids.

must know the requirements for the publication before you can start making the grid.
start with thumbnail sketches to get the basic layout etc. thumbnail should be proportionate to actual product. consider Fibonacci.

consider the number of columns needed.
1 column for txt/illustration gives you little freedom of layout and sizing of images.
2 columns gives you more freedom of splitting columns for text and image.
3 columns allow for equal grids with introduction of rows as well.
more gives you more freedom and the ability to split text and image up equally or how you want.
6 column grids are disadvantageous generally. give you lees room to move around. very rigid and unadaptable.

statistics, figures, graphs, trend lines use 4 columns per page. 4 columns can be subdivided by 8, 16, 32 etc.

width of column dictates the size of the typeface. must consider the final product in choosing this size to ensure legibility and readability.

thumbnails
make a variety. enlarge parts of the thumbnail or the whole thumbnail and see how it looks. does it still work? compare them to each other and repeat the test process to find the best working layout. trial and error.

the first line must fit flush to the top limit of the column grid. last line must stand on the bottom limit. play around with leading, justification, point size. grid field could be too high or low for text size and spacing. text should be equal in equally sized fields. the depth of the field ascertains how many 10pt type lines i have. use as a loose guideline. will also be affected by the actual copy.

font heights
can work out the size of other bodys of text from the body copy sizing.
draw a line just on the top of the ascender and one on the baseline of the letters 3 lines below. for subheadings or headings make the size of the text fit two lines of text in that same space (made by the lines)
4pt type and 6pt leading would make 7pt type and 10pt leading.
keep doing this with the bigger and bigger text to maintain equality in sizing and upscaling.

type and picture
8 & 20 grid fields are the main ones.
 8 field used generally for advertising etc. 8grid can be divided into 16 grid field and so on. gives you more possibilities. remember to use the gutters to check equal spacing and sizing ( a line of text should run inside the gutter)
8 grid fields allow for various sizes of images. need a good perception of composition when using image.
20 field grids give 42 possibilities for layout options.


in indesign.

to show the basic grids you go view>grids&guides>show doccument grid.

to create grids and guides on the page go to layout>create guides>then choose your desired columns/rows.

use the scripts tool to add guides to an object. go to window>automation>scripts. select the object(s) you want to add guides to and how many etc and then press ok.

cmd+; switches grids on and off.

to add or alter boxes and fields use the pathfinder. go to object>pathfinder>add (or choose another option accordingly)

OUGD404. Design Principles. Mini Task - Answer your Question.

what are picas, points, and pixels?

POINT.
a point is the smallest unit of typographic measurement. abbreviated to pt. the point is used to measure a font size i.e. the size of a letter form and the leading (spacing) between lines of text. the original size varied between 0.18 - 0.4 mm but now is commonly thought of as 0.35 - 0.38 mm according to wiki. other websites state 0.3302mm, 0.352mm (supposedly 1 postscript point), 

1 point (Truchet) = 0.188 mm (obsolete today)
1 point (Didot) = 0.376 mm = 1/72 of a French royal inch (27.07 mm)
1 point (ATA) = 0.3514598 mm = 0.013837 inch
1 point (TeX) = 0.3514598035 mm = 1/72.27 inch
1 point (Postscript) = 0.3527777778 mm = 1/72 inch
1 point (l’Imprimerie nationale, IN) = 0.4 mm
1 pica (ATA) = 4.2175176 mm = 12 points (ATA)
1 pica (TeX) = 4.217517642 mm = 12 points (TeX)
1 pica (Postscript) = 4.233333333 mm = 12 points (Postscript)
1 cicero = 4.531 mm = 12 points (Didot)

according to printwiki the american-english point is 0.351mm while the european point is 0.375mm. apparently the point reffers to the size of the metal block on which each letter form is cast, as opposed to the point being the actual size of the letter form (a small space must be allowed for each letter and its potential ascenders and descenders). so really point size is the distance between the ascender and descender.

PICA.
a pica is a typogrpahic unit of measurement that exists in conjunction with the point. it was originated around 1785 when François-Ambrose "L'éclat" Didot refined the typographic measures system created by Pierre Simon Fournier le Jeune. the american brittish pica:  0.166-inch pica and the 0.01383-inch point.  the european didot: the Didot system uses the cicero as its basic unit, which is equal to 12 corps, or 0.178 inch. The Didot corps measures 0.0148 inch. For general, practical measurement purposes, three decimal places (thousandths of an inch) are deemed sufficient significant digits. 


PIXEL.

Shorthand term for picture element, or the smallest point or dot on a computer monitor. Any computer display is divided into rows and columns of tiny dots, which are individual points at which the scanning electron beam has hit the phosphor-coated screen. The pixel is the smallest indivisible point of display on a monitor. The dot pitch is the measure of the diameter of an individual pixel; a monitor with a dot pitch of .28, for example, is composed of pixels .28 millimeter in diameter. The number of pixels per inch or lines of pixels per inch is a measure of screenresolution. It is commonly expressed as the horizontal and vertical dimensions of the pixel array; for example, a monitor described as 640 x 480 possesses 640 pixels across by 480 pixels down. The greater the number of pixels per inch, the better the resolution. The measure of the number of bits used to describe a pixel is known as color depth. (See Color Depth.) A pixel is also known as a pel, which is also short for picture element.