Design Principles

Principles of Information Technology

Applying principles to create

appealing and professional
printed and electronic publications

Copyright Texas Education Agency,

1
2013. All rights reserved.

OBJECTIVES
List

the four design principles

Define

the four design principles

Identify

characteristics of the four design principles

Identify

publishing techniques that demonstrate

the four design principles

Classify

webpage designs according to the use of

the four design principles
Copyright Texas Education Agency, 2013. All2rights reserved.

BASIC DESIGN PRINCIPLES

Contrast
Repetition
Alignment
Proximity
Copyright Texas Education Agency, 2013. All3rights reserved.

CONTRAST
Definition:
A method of design that emphasizes the differences
between objects that are dissimilar; it purposely brings
out their differences to set things in opposition.

Copyright Texas Education Agency, 2013. All4rights reserved.

REPETITION
Definition:
A method of design that purposely duplicates elements
or aspects of elements within the same document.

Copyright Texas Education Agency, 2013. All5rights reserved.

ALIGNMENT
Definition:
A method of design that uses spatial properties to
determine the optimal placement of objects or groups of
objects.

Copyright Texas Education Agency, 2013. All6rights reserved.

PROXIMITY
Definition:
A method of design that uses spatial properties to
purposely place related items together.

Copyright Texas Education Agency, 2013. All7rights reserved.

ASPECTS OF CONTRAST
Items

must have opposing elements

Needs to be strong to be effective
Can be demonstrated using

Color
Size
Objects
Alignment

Copyright Texas Education Agency, 2013. All8rights reserved.

ASPECTS OF CONTRAST
Setting font color
1 in opposition to
background
color

Setting font color

3 in opposition to
background
color

Setting font color

2 in opposition to
background
color

Setting font color

4 in opposition to
background
color
Copyright Texas Education Agency, 2013. All9rights reserved.

ASPECTS OF CONTRAST
1

Font style of
title is same
use bold to create
contrast

Font style of
2

title is same
use size increase to
create contrast

Fo n t s t y l e o f
title is same
use kerning to
create contrast

Font style
4 of
title is same
use combination of
the above to
Copyright Texas Education Agency, 2013. All10
rights reserved.
create contrast

ASPECTS OF REPETITION
Items

must have obvious similarities

Needs to be strong to be effective
Can be demonstrated using

Color
Objects
Alignment

Copyright Texas Education Agency, 2013. All11

rights reserved.

ASPECTS OF REPETITION
1

Repeating Font

style choices

style choice for

Random font

all text on document

creates unity

creates conflict

Repeating Colors

Random Color

in text and objects

creates unity

choices for objects

creates conflict

Copyright Texas Education Agency, 2013. All12

rights reserved.

ASPECTS OF REPETITION
1

Repeating images

using a duplicate

using a duplicate

of an image, recolored, is acceptable

of an image, even
resized, creates unity

Repeating images

Repeating images
2

Repeating images

using different
images, even with a
common theme,
is distracting

using different
images, even of the
same object, can
be distracting

Copyright Texas Education Agency, 2013. All13

rights reserved.

ASPECTS OF ALIGNMENT
Items must have obvious spatial placement
Needs to be visually noted instantly to be effective
All items should significantly support the purpose of
the publication
Element placement should never be random
Can be demonstrated using

Object rotation
Text direction
Line spacing
Object size
Copyright Texas Education Agency, 2013. All14
rights reserved.

ASPECTS OF ALIGNMENT
3

all text is left aligned

title is centered

bullets are indented

but still aligned left

bullets are
centered as well

Arranging Text
2

Arranging Text

title is left aligned

bullets are
right aligned

g
n Text

Arrang i

Arranging Text

text can be
arranged other than
horizontally

Copyright Texas Education Agency, 2013. All15

rights reserved.

ASPECTS OF PROXIMITY
Provides organization for the viewer
All elements are supportive of main purpose

Elements are then divided into subgroups depending on the

subtopic points
Items related to each subtopic should be spatially grouped
together in an arrangement

Can be demonstrated using

Color
Size
Objects
Alignment
Copyright Texas Education Agency, 2013. All16
rights reserved.

ASPECTS OF PROXIMITY
1

Plumbing Emergency

Plumbing Emergency
James Madison
Fast response time

(210) 971-1352
James Madison
fast response time

James Madison
2

(210) 971-1352

Fast response time

Plumbing Emergencies
(210) 971-1352

Plumbing Emergency
4 (210) 917-1352
James Madison
fast response time

Copyright Texas Education Agency, 2013. All17

rights reserved.

REVIEW
The

four design principles

Contrastemphasizes the differences between

objects that are dissimilar

Repetitionpurposely duplicates elements

Alignmentdetermines the optimal placement of

objects

Proximityplaces related items together

Copyright Texas Education Agency, 2013. All18
rights reserved.

ACTIVITY #1
Using

the Internet navigate to various websites that

demonstrate use of the four design principles.

Place

a copy of the screen snapshot into a word

processing document.

Resize

the snapshot if needed.

Above the snapshot, place a label to identify the design

principle represented.
Beneath the snapshot, create a textbox.
The textbox should contain text that displays

the definition of the design principle listed AND

A justification or reasons why the snapshot represents that principle.
Copyright Texas Education Agency, 2013. All19
rights reserved.