Layout and Designing

8/13/2019 Layout and Designing

1/21

Layout and Designing

Arrangement of various visual elements

illustration, text, colour and white space in

patterns, pleasing to see, easy to read and

comprehend


2/21

Key Concepts

Proportion of an object isnt tied only to the rules

of mathematics

Optical Centre

Hot Spots

Centre of Interest Only one centre of interest in a visual

It can be an illustration, text or white space

All other elements to support the centre of interest


3/21

Visual Element

1. Illustration

Photographs with background

Block out

2. Drawings

Tone art

Line art

Photo Sketch

Clipart

Silhouette


4/21

Tone art

Line art


5/21

Photo Sketch


6/21

Silhouette


7/21

3. Typographic/Text

Type Style/Font Type

Typography refers to the reproduction of letters

Do not use type styles from ten different families to make a

professional looking publication, but combining a few

different typefaces improves contrast

Do not mix similar/slightly different typefaces/fonts together

Two major categories: Serifand Sans Serif


8/21

Serif

Serifs resemble pen strokes that extend from theends of letterforms

A B C D E F G

Sans Serif

There are no serifs

A B C D E F G


9/21

Serif

Old style

Freestone

Modern

Freestone

Slab serif

Freestone

Angle (downward or straight)

Level of contrast b/w thick and thin parts of letter form

Diagonal/vertical stress

Friendly, informal/formal appearance

Bold/lighter appearance

Differences


10/21

Sans Serif

Freestone Freestone

Don't mix too many fonts together.

If you use more than one serif style, choose them from different

categories: oldstyle, modern, or slab serif.

Don't combine sans serif typefaces on the same page. Choose one,

but use size and weight to create contrast.


11/21

Type Size/Font Size

Font size is more important for design of projected visual than printed visual

Distance (Feet) Height of letters (inches)

100 3.5

80 2.7

60 2.1

40 1.4

25 1.0

20 0.7

10 0.35


12/21

Case

UPPER CASE Lower case

Spacing

Kerning: adjustment of space between individual letters

if amount of space between letters is reduced,

more characters can be fit on every line

reducing the space between letters will darken the

columns of text, but increase the amount of white

space that can be used more creatively elsewhere

on the page


13/21

Leading

Refers to the amount of space between the lines and it is an

important tool for improving readability

Long lines of text should have more space between them.

Short lines of text should have less space between them.

Improve the readability of sans serif body text by increasing

the leading.

Narrow columns should have a smaller typeface and less

leading, and wider columns should have a larger typeface and

more leading.


14/21

Proportion

Relationship b/w width and height of the visual

Regular shapes like circle or square hold ourattention momentarily

More attractive shape is rectangle

Golden Rectangle 3 units/5 units

proportion(horizontally/vertically) most agreeable

and pleasing to human eye

Ratio Value

Long Ratio 1:2 (2)

Golden Triangle 3:5 (1.62)

Printers Ratio 2:3 (1.73)

Regular Ratio 4:6 (1.5)

Hypotenuse Ratio 5:7 (1.41)


15/21

Principles of Design

Balance

Proximity

Alignment

Repetition

Contrast

Whitespace


16/21

BalanceCreate balance with the three elements (text block, graphic, vertical text)

Random elements with

no unity or balance

Text block and graphic are resized to

bring them closer together and better

balance each other

To tie the elements together, move them closer together (resizing helps).

The graphic (one of the marbles) slightly overlaps the box enclosing the vertical

text, unifying the two elements.

Reversing the word "balance" out of the blue box also adds more contrast to the

composition.

The increased leading in the text block redistributes the white space in a morebalanced manner.


17/21

Proximity

Graphic anchors the bottom of the

page, but the four text elements all

float on the page with no apparent

connection to each other

Change in the headline (font change,

reversed out of blue box) along with the

subheading pulled in closer provides

balance with the graphic on the bottom.

Spacing between the two paragraphs of

text is reduced slightly as well.


18/21

Alignment

Headlines, text, and graphics lend aformal tone to a layout. But, for this

series of layouts something a bit more

informal is called for. Also, large

blocks of centred text are usually

harder to read.

Text alignment is left-aligned, raggedright, wrapped around the bottom

graphic which is aligned more to the

right, opposite an added graphic that

is aligned to the right to help balance

the overall design


19/21

Repetition

Headline is repeated three times using graphics that tie in withthe copy in the text blocks.

Repetition of the colours in the shapes and headline text that are

in the copy help to reinforce the theme.

Overlapping the graphic and text elements unifies the elements

of the design.


20/21

Contrast

Not enough contrast between theheadline and text due in part to size but

also because the two different serif faces

used or too similar

Oversized graphic provides real contrastand reinforces the copy (tall basketball

players).

Dropping the text down to the bottom

portion of the page also reinforces the

'towering' aspect of the graphic.


21/21

White Space

Large block of black created by the graphic of people adds a large block of black

white space.

Multiplying the number of people and reducing the size of the car provides

additional contrast and reinforces the theme of the copy.

Additional leading, larger margins, deeper paragraph indents all add white space

or breathing room to the design.

Oversized drop cap is another element of contrast and also helps to balance the

page with the large dark elements at the bottom of the page

Documents

Layout and Designing