UNIT 1 : COLOUR

T4 - LAYOUT: BASIC PRINCIPLES

T5 - DESIGN PSYCHOLOGY
T4 - LAYOUT: BASIC PRINCIPLES
Layout: Basic Principles
There are four basic principles:
Proximity
Grouping or Separation
Repetition
Removing repetition, retaining information
Alignment
Visual flow and connection
Contrast
Dont let information hide
3
5524YCOMA DIGITAL MEDIA PRODUCTION
Proximity
Items relating to each other should be grouped close
together.


When several items are in close proximity to each
other, they become one visual unit rather than several
separate units.


This helps organize information and reduces clutter.

5524YCOMA DIGITAL MEDIA PRODUCTION 4
Technology and
Environment
Technology and
Environment
Proximity
Items that are not related to each other should not be in close
proximity.
The closeness or lack of closeness indicates the relationship.
Elements that are intellectually connected should be visually
connected.

5524YCOMA DIGITAL MEDIA PRODUCTION 5
Repetition
If we have a table of data, then repeated data should
become headings
5524YCOMA DIGITAL MEDIA PRODUCTION 6
Faculty Staff Name Room
TAE Andy BS717
EDU Mike E123
TAE Hulya BS719
Faculty Staff Name Room
TAE Andy BS717
Hulya BS719
EDU Mike E123
Alignment
Nothing should be placed on the page arbitrarily.
Every element should have some visual connection with
another element on the page.
This creates a clean, sophisticated look.
5524YCOMA DIGITAL MEDIA PRODUCTION 7
Alignment
Nothing should be placed on the page arbitrarily.
Every element should have some visual connection with
another element on the page.
This creates a clean, sophisticated look.
5524YCOMA DIGITAL MEDIA PRODUCTION 8
Alignment
Each page or component can be split into
several regions




Text or graphic objects can be aligned based
upon a single or dual combinations of these
regions
5524YCOMA DIGITAL MEDIA PRODUCTION 9
Top
Centre
L
e
f
t

Bottom
R
i
g
h
t


Top Left

Top Right

Top Centre
Centre
Alignment
We shouldnt use centre aligned text
for paragraphs of text.
Viewers find it difficult to read as there
is no anchor point at the beginning or end of the
lines.
5524YCOMA DIGITAL MEDIA PRODUCTION 10
Alignment
We shouldnt use centre aligned text
for paragraphs of text.
Viewers find it difficult to read as there
is no anchor point at the beginning or end of the
lines.

5524YCOMA DIGITAL MEDIA PRODUCTION 11
Alignment
We shouldnt use centre aligned text
for paragraphs of text.
Viewers find it difficult to read as there
is no anchor point at the beginning or end of the
lines.

5524YCOMA DIGITAL MEDIA PRODUCTION 12
Contrast
Avoid elements on the page that are merely similar.
If the elements (type, color, size, line thickness, shape, space,
etc.) are not the same, then make them very different.
5524YCOMA DIGITAL MEDIA PRODUCTION 13
Contrast is often the most important visual
element on the page.
T5 - DESIGN PSYCHOLOGY
Design Psychology
Essentially, when developing something we wish to
publish we need to coerce the viewer.
We want to encourage their eyes to follow our layout
so that they are:
Not distracted by the least important elements
Are forced to focus upon the most important elements
5524YCOMA DIGITAL MEDIA PRODUCTION 15
Design Psychology
Leonardo Da Vinci (commonly
thought of as a true genius) took
the idea of leading the viewers
eye to an extreme when
designing some of his paintings
We can use it to:
http://jakegarn.com/the-rule-of-thirds/
http://www.goldennumber.net/logo-design/
5524YCOMA DIGITAL MEDIA PRODUCTION 16
Design Psychology
ALL CAPS ARE HARD FOR PEOPLE TO READ B/C
THERES NO SHAPE TO THEM

Mixed-case sentences have redundant shape
coding that make them easier to read.


5524YCOMA DIGITAL MEDIA PRODUCTION 17
Design Psychology
ALL CAPS TAKES UP MORE SPACE, FORCING YOU TO
USE A SMALLER FONT TO PUT THE SAME AMOUNT
OF INFORMATION
(If you dont believe me, this sentence has just the
same number of letters as the previous one.)


5524YCOMA DIGITAL MEDIA PRODUCTION 18
Design Psychology
5524YCOMA DIGITAL MEDIA PRODUCTION 19
Better Contrast,
Larger Title
Mixed case
TUTORIAL
In-Class Tutorial
Sketch the layout of a business card for the
manager of a construction firm. Include:
A square area for the logo
A rectangular area for the name of the company
A rectangular area for the name and contact
details for the manager

Highlight font, colour, etc for each component
including the card itself
5524YCOMA DIGITAL MEDIA PRODUCTION 21
THANK
YOU!
22