Design

Design
Design
Knowledge of grids and typography
will help you to lay out pages that are
readable, balanced, and that clearly
communicate their content.

This segment of Workshop will

introduce you to some of the basic
concepts that will help you make
those pages beautiful.
Contents
1.0 Some Design Basics
1.1 Elements
1.2 Principles

2.0 Colour
2.1 The colour wheel
2.2 Value, tone, and temperature

3.0 Eye flow

3.1 Imagery
3.2 Weight
3.3 Colour

4.0 Want more?

Here is a list of extra resources if you want
to learn even more about design.
1.0
Some Design Basics
Getting to the basics of design requires
stepping back and thinking about things
that we take for granted. We all know
what lines and shapes are, but we must
consider what purpose they serve in
design, and what do they offer us.
1.1 Elements
The elements of design are the most
essential building blocks of design.

Line
Lines can be straight or curved,
they can move in any direction, or
be of any weight. A line can also be
implied by edges and objects
arranged in order. Lines serve to
lead the eye to follow their path.

Shape
Shape is an area that is distinguished
from its surrounding space by a
boundary. Like lines, they can also
be implied, and lead the eye with
their shape, position, and
relationship to other shapes.
Shapes serve to delineate areas of
different content.

Form
Form is shape in 3 dimensions. It
can refer to a literal object, or a flat
representation of 3 dimensions.
Colour
Colour is the wavelength of light
reflected by a material, and how our
eyes perceive that wavelength. The
perception of colour is highly
subjective, and strongly affected by
context and its relationship to
other colours. Colour can have
heavy symbolic meaning, and is a
very powerful communicator of
feeling, so is an important part of
telling story with design.

Texture
Texture refers to the tactile feeling
of a surface, or to the visual
representation of a tactile feeling.
This can include both the actual
texture of paper, or the printed
representation of a texture.

Space
Space is the area in or around other
visual elements. It is as important
to consider space as it is to consider
any elements within it.

Value
Value refers to the lightness or
darkness of a design or an element.
1.2 Principles
While the elements are the building
blocks of design, the principles of design
are what communicate feeling and
movement, and are the tools a designer
uses to tell a story.
Pattern
Pattern is the regular repetition of
visual elements to create an overall
effect. It can be extremely simple or
extremely complex. It can be a
background decoration or a primary
part of a design.

Contrast
Contrast is the juxtaposition of
differing elements. This can mean
contrast of colour, shape, size,
texture, line, or anything else. Adding
contrast is the most effective way to
bring interest to a boring page.
Emphasis
Emphasis indicates giving added
attention and importance to one
part of a design to make it stand out
from the rest, and to guide the eye
towards important elements.

Balance
Balance refers to either the
symmetrical or asymmetrical
elements of a design. It also implies
an axis, or a centre point which can
be anywhere in the design.

Proportion
Proportion is the relationship of
scale between visual elements.

Harmony
Harmony is the unified nature of a
design as a coherent whole.

Rhythm
Rhythm is the repetition of visual
elements, but unlike pattern its
purpose is to create a sense of motion
and direction.
2.0
Colour
We often say that colours match,
but there is far more than that to
colour relationships.

The ability to consider the different

qualities and relationships of colours
will add to your skill at making
meaningful colour choices.
2.1 The colour wheel

Hue is the term in modern colour theory for what we generally think
of as a colour. The term hue is used to distinguish a colour from the
variations of tint, shade, and values that it may have.

The colour wheel demonstrates basic

relationships between colours.

Employing these relationships will help

you identify colour combinations that
are pleasing to the eye.
Analogous
Hues with an analogous relation-
ship are close to each other on the
colour wheel. They have a unifying
and harmonious relationship.

Complimentary
Hues on opposite ends of the colour
wheel are called complimentary.
When they are put together the
result is bold and demands
attention.

Triadic
A triadic colour combination is
made up of three hues, evenly
spaced on the colour wheel.

Split
complimentary
In the split complimentary colour
relationship a hue is matched with
the two hues adjacent to its
opposite on the colour wheel. This
colour relationship allows for easily
creating a combination with a
visually dominant hue.
2.2 Value, tone,
and temperature
A hue has different qualities. An
understanding of these qualities will
help you understand options you can
explore when working with colour.

If you are working with colours that

appear dull or flat, adding contrast in
these qualities will help to add depth
and dynamism.
Value
Value refers to the brightness or
darkness of a hue. A bright yellow,
has a high value, while a dark blue
has a low value.
Contrasting high and low value
colours is an important part of high value low value
grabbing and directing the interest
of the readers eye.

Tone
Tone is the variation of the amount
of black or white that is mixed with
a single hue. The result of added

shades
white is referred to as a tint, while
tints

the result of added black is referred

to as a shade. Variations in tone can
help to create the illusion of depth.

Temperature
Combining colours on the red side
of the colour wheel creates a sense
of warmth, while combining colours
on blue side creates a sense of
coolness. Warm colours are also
energetic and active, while cool warm cool
colours are calm and relaxing.
Using warm or cool colours, or
blending them together, will help
you express feeling.
3.0
Eye flow
Eye flow is the path that the eye of the
reader will take over the surface of a
page. While every reader and their
experiences are different there is a
certain amount of predictability to the
path their eyes will take. There are also
certain things that you can do to direct
the readers eye.
3.1 Imagery
The eye is immediately attracted to
images on the page.

This is especially true of human faces.

A face that is looking directly at the

reader will grab and hold their attention,
and so are commonly used on the
covers of magazines.

If a face is not looking directly at the

reader, the eye will naturally follow the
gaze of the model.
 The direct eye contact in this image immediately
draws the readers attention, which then moves
successively through the headline, the deck, and
the body copy.

This face grabs attention and then directs it

upwards towards the headline, through the
direction of the models gaze.
3.2 Weight
The eye is drawn towards elements
that have more visual weight.

Typographic hierarchy (see Typography

lesson 3.0) can use weight to guide the
eye from bold headlines, through
subheadings, and bylines, to body copy.

A drop cap is an example of using

weight to draw the eye towards the
beginning of a block of text.
The headline being the dominant part of this
layout will attract the eye immediately, and then
draw it all the way from the left to the right of
the page. The deck will then bring the eye back
to the left, and the beginning of the body copy.

The large block of an image draws the eye to the

headline. The deck is then directly in the eyes
path. Some space between the deck and the
beginning of the body copy gives the eye the
freedom of movement to find the drop cap that
lures it to the beginning of the body copy.
3.3 Colour
Colour draws the eye, but a colour is
only bright and distinct in relation to
the colours around it.

On an achromatic page a light pastel

will stand out, but a bright red will be
lost in a page of reds.

Use variation in the tone and value (see

lesson 2.2) to attract, and to direct the
eyes attention with colour.
 Even though its slight, the colour of the cats
eyes draws attention on the otherwise black and
white page. As the cat is gazing upwards the
readers eye will move up, and the headline, deck
and content are arranged in an ordered path.

This page layout is very simple, but the colours

use a split complimentary relationship to guide
the eye. The headline dominates with a bold, low
value purple, while the subhead and the deck,
follow it with high value green and yellow.
4.0
Want more?
There is far more to learn and practice
in regards to creating effective and
beautiful design.

Here are a few good places to start.

The Elements of Color
by Johannes Itten
This is an essential text that outlines modern colour theory.

Itten, Johannes, and Faber Birren. The Elements of Color; a Treatise on

the Color System of Johannes Itten, Based on His Book The Art of Color.
New York: Van Nostrand Reinhold, 1970. Print.

Interaction of Color
by Josef Albers
In this publication Josef Albers builds on the work of Itten, and analyses
in great detail the ways in which colours interact with each other, and
how those interactions effects our perceptions of them.

Albers, Josef. Interaction of Color. New Haven: Yale UP, 1963. Print.
Graphic Design: The New Basics
by Ellen Lupton and Jennifer C.Phillips
This is a thorough and easy to understand textbook on the basics of
graphic design.

Lupton, Ellen, and Jennifer C. Phillips. Graphic Design: The New Basics.
New York: Princeton Architectural, 2008. Print.

The Vignelli Canon

by Massimo Vignelli
This is the definitive book on modernist design, by the definitive mod-
ernist designer. It contains sensible and comprehensible ideas about
design, as well as nuts and bolts guidance. It can be downloaded as a
.PDF from www.vignelli.com/canon.pdf

Vignelli, Massimo. The Vignelli Canon. Milano: Postmedia, 2012. Vignel-

li.com. Web. 02 Apr. 2016. <http://www.vignelli.com/canon.pdf>