Visual Layout:

The Elements of Graphic Design
(PART 2)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



This lecture introduces concepts and principles to be
considered when creating a visual layout.


LAYOUT:
Composition: Making Things Look Right
1) Ratios
2) Looking Space
3) White Space
4) Other Principles
5) Homework Assignment



I. Composition: Making things look right
1) RATIOS:

Golden Ratio
The number approximately equal to 1.618033989...

It is exactly equal to

If you divide a line into two parts so that:
the longer part divided by the smaller part is also equal to the whole length divided by the longer part then you will have the Golden Ratio.





A GOLDEN RECTANGLE is one whose side lengths are in the golden ratio, 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.

Square removal can be repeated infinitely, in which case corresponding corners of the squares form an infinite sequence of points on the golden spiral, the unique logarithmic spiral with this property.




DRAW A GOLDEN RECTANGLE:
A golden rectangle can be constructed with only a straight edge and compass by this technique:

1. Construct a simple square.

2. Draw a line from the midpoint of one side of the square to an opposite corner.

3. Use that line as the radius to draw an arc that defines the height of the rectangle

4. Complete the golden rectangle.



More info on the History of the Golden Mean



RULE OF THIRDS:
The rule of thirds is a little more practical in designing layouts and is a compositional rule of thumb in visual arts such as painting, photography and design. The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would.



The RULE OF THIRDS is a principle of composition that helps you keep your images dynamic. It gives you eight elements to work with -- four lines and four intersections. Placing points of interest along the lines or at the intersections tends to create a more interesting composition, as sketched out below:

Rule of Thirds in Web Design:
Applying Divine Proportion To Your Web Designs





2) LOOKING SPACE IN A COMPOSITION:

Photographers use looking space to position elements in a photographic composition, as do web designers when they are developing layouts for websites. See examples.


Video on Looking Space:


http://vimeo.com/17498525






3. WHITE SPACE
(negative space)
Definition:
Whitespace is the empty spaces in a design. Whitespace is used to separate disparate design elements and group similar ones. Whitespace is the lack of graphics or text in the layout.

Whitespace is not always "white" - it is the empty parts of the page, but if the page has a different background color that will be the color of the whitespace.

Examples of incorporating different kind of content into a layout that utilizes generous white space:

http://www.apple.com
http://configurator.vw.com/ihdcc/configurator.html
http://www.busterbrownshoes.com/
http://www.un.org/
http://store.nike.com/us/en_us/


LEADING:
When working with columns of text, designers use leading (vertical space between lines of text) to create user friendly layouts. Also the horizontal spacing on a line of text affects the amount of white space in a layout, and is referred to as typographic 'color' or typographic 'weight':




Leading can be set up in your CSS and is known as line-height. The horizontal spacing can
also be adjusted in your CSS and is known as letter spacing.

Here is more information:
http://www.quackit.com/css/properties/css_line-height.cfm
http://www.yourhtmlsource.com/stylesheets/csstext.html

A CAVEAT ON WHITE SPACE:
White space can eat up valuable space, and given that many websites are increasingly designed to be viewed and used on smaller and mobile devices means that a compromise is usually required.





4. OTHER PRINCIPLES

We will be spending more time on this but here is a video on introducing some important principles
of graphic design:
http://www.youtube.com/watch?v=4yOjts0tpco