Elements of Design

Table of content

1. Lines and Shapes

2. Texture
3. Value
4. Depth Perception
5. Perspective and Angle of

view
6. Using motion Color

1. Lines and Shapes

A line is a mark connecting two points.

How we get from point A to point B gives

the line its distinctive character and

appearance.

LINE

Long

Short

Straight

Curved

LINE

Horizonta
l

Vertical

Diagonal

Line
Solid
Dash
Thick
Thin

Shape
Shape is one of the basic elements of design.
Alone or in combination with other shapes or lines they

can convey universal meanings as well as guide the eye

or organize information.
The three basic types of shapes are:

+ Geometric
+ Natural
+ Abstract

Shape
Diamon
d

Triangl
e

Circle

Pentago
n
Hexagon

Square

Color wheel

Green
Cyan

Yello
w

Red
Magenta

Blue

My map

Mind mapping is a graphical way of

presenting ideas and concepts.
It is a visual thinking tool that helps us
structure, analyze, synthesize, recall
information and, more so, generate new ideas.

How Does Mind Mapping Work?

A leading topic or leading idea: this will be the
center of your mind map.
A key topic: key elements
Subtopics: details and/or characteristics of the key
topic
Connection Arrows: link related topics
Colors: to separate different topics
Symbols and Images: helps identify idea/topics

There are different kinds of mind maps.

Your imagination is your limit to how best you can use it.
To name a few, mind maps can be made for:
Note taking
Brainstorming (individually or in groups)
Problem solving
Studying and memorization
Planning
Researching and consolidating information from

multiple sources
Presenting information
Gaining insight on complex subjects
Jogging your creativity

Design Principles
Balance
Use of negative and positive

space
Emphasis
Rhythm
Unity

Balance

Symmetry
Symmetrical balance is mirror image
balance.
If you draw a line through the centre of the
page, the elements on one side of the line
are mirrored on the other side.
We can achieve it by placing elements fairly
evenly in the design.

The very colorful Florida Flourish site could be

almost be cut in half down the center. It has a
very strong sense of symmetrical balance.

The Havoc poster below is

balanced left and right
using similar shapes (and
body parts).
The red text above and
below the title is balanced
in color and size above
and below the title.

Asymmetry
Asymmetrically balanced layouts have elements that
dont mirror each other across a centerline. These
layouts can be more difficult to design but can be
appealing to viewers.
We can create an asymmetrically balanced layout by
placing several small items on one side, and one large
item on the other side. If you have one dark item on
one side, you may place several light colored items on
the other side. An asymmetrical balanced design can
create tension, drawing the viewer in.

Dann Whitakers site has several elements that

dont reflect each other symmetrically, but do
balance each other in terms of color, texture and
content.

MattWeb has a large graphic filling the left side of the homepage. A
sense of asymmetrical balance is achieved here using matching colors
and a sans-serif font which is in keeping with the spirals in the graphic.

Off-Balance
Ok, so it could be boring if ALL of your design work
involved balance. If you know the rules, then you
can break them of course, and lack of balance can
convey action and motion. It can make people feel
a little uneasy or even disturbed. An off-balance
design can make people think. Just dont let it
happen by accident.

Typography