1. Design Principles
Principles of Information Technology
Applying principles to create appealing and professional printed and electronic publications

2. 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
© UNT in Partnership with TEA

3. BASIC DESIGN PRINCIPLES
Contrast
Repetition
Alignment
Proximity
© UNT in Partnership with TEA

4. CONTRAST
Definition:
A method of design which emphasizes the differences between objects that are dissimilar, it purposely brings out their differences to set things in opposition.
Note: ways that contrast is used on this slide is shown in the font:
color- opposition of white and yellow;
size- title is much larger than definition;
Weight- title is bold (thicker letters);
Form – title is all caps and definition is sentence case;
Position – title is right aligned and definition is left aligned.
© UNT in Partnership with TEA

5. REPETITION Definition:
A method of design which purposely duplicates elements or aspects of elements within the same document.
Note: ways that REPETITION is used on this slide is shown in:
Each slide so far has repeated the same background design, the same background color, the same layout of objects, the same color and size of title and definition font.
© UNT in Partnership with TEA

6. ALIGNMENT Definition:
A method of design which uses spatial properties to determine the optimal placement of objects or groups of objects.
Note: ways that alignment is used on this slide is shown in:
Title is most important so it is at the top
© UNT in Partnership with TEA

7. PROXIMITY Definition:
A method of design which uses spatial properties to purposely place related items together.
Note: ways that Proximity is used on this slide is shown in:
The term/title is spaced further away from the label “definition” while the label is spatially closer to the words that make up the definition.
© UNT in Partnership with TEA

8. ASPECTS OF CONTRAST Items must have opposing elements
Needs to be strong to be effective
Can be demonstrated using:
Color
Size
Objects
Alignment
© UNT in Partnership with TEA

9. ASPECTS OF CONTRAST
Setting font color in opposition to background color
Setting font color in opposition to background color 1 3
Setting font color in opposition to background color
Setting font color in opposition to background color
Ask the students to determine which item 1-4 is more visually appealing to them – and tell why.
When the font color is not significantly different than the background color – it is difficult to read.
Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing.
Remember: to be considered contrast it must be obvious and STRONG 2 4
© UNT in Partnership with TEA

10. ASPECTS OF CONTRAST 1 3 Font style of Font style of 2 4 Font style of
title is same
use bold to create
contrast
Font style of
title is same
use kerning to
create contrast 1 3
Font style of
title is same
use size increase to
create contrast
Font style of
title is same
use combination of
the above to
create contrast
All of these samples have the same style of font.
Ask the students to determine which item 1-4 is more visually appealing to them – and tell why.
When the font size, thickness, and spacing is varied, it creates contrast without creating conflict. 2 4
© UNT in Partnership with TEA

11. ASPECTS OF REPETITION Items must have obvious similarities
Needs to be strong to be effective
Can be demonstrated using:
Color
Objects
Alignment
© UNT in Partnership with TEA

12. ASPECTS OF REPETITION Repeating Font Random font 1 3 Repeating Colors
style choice for
all text on document
creates unity
Random font
style choices
creates conflict 1 3
Repeating Colors
in text and objects
creates unity
Random Color
choices for objects
creates conflict
Ask the students to determine which half of the slide is more visually appealing to them – and tell why.
The left side of the slide repeats color of slide design background in the textboxes fill color and also in the font color.
The right side of the slide chose random colors for background and text, it also chose random font styles 2 4
© UNT in Partnership with TEA

13. ASPECTS OF REPETITION Repeating images Repeating images 1 3
using a duplicate
of an image, even
resized, creates unity
Repeating images
using a duplicate
of an image, re-
colored, is acceptable 1 3
Repeating images
using different
images, even with a
common theme,
is distracting
Repeating images
using different
images, even of the
same object can,
be distracting
Ask the students to determine which set 1-4 of the slide is more visually appealing to them – and tell why.
#1 is the most unifying because of the duplication.
#2 has similar objects but not similar design, nor do they pull in any colors from the overall color theme of the document design, one is a square object while the other is more rounded – their differences are more obvious than their similarities so they are very distracting.
Although #3 is the same image just recolored, unless both images pull in other colors from the font, background, or other design objects, they still distract rather than unify.
#4 has common objects but one is outlined in white, 2D objects, neon colors, & a square shaped background fill while the other is outlined in black, 3D, basic colors & transparent fill. 2 4
© UNT in Partnership with TEA

14. 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
© UNT in Partnership with TEA

15. ASPECTS OF ALIGNMENT Arranging Text Arranging Text 1 3 Arranging Text
all text is left aligned
bullets are indented
but still aligned left
Arranging Text
title is centered
bullets are
centered as well 1 3
Arranging Text
title is left aligned
bullets are
right aligned
Text
text can be
arranged other than
horizontally n
Arran g i
Ask the students to determine which set 1-4 of the slide is more visually appealing to them – and tell why.
Remember: alignment is using spatial properties – being constantly aware of the space, around and between all the objects to create the BEST or MOST visually appealing arrangement of items. Nothing is placed at random.
All item placement should be supportive of the main topic – here it is arrangement of text, that’s why the 4th option can be acceptable. 2 4
© UNT in Partnership with TEA

16. 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
© UNT in Partnership with TEA

17. ASPECTS OF PROXIMITY Plumbing Emergency (210) 971-1352 1 3
James Madison
fast response time
(210)
Plumbing Emergency
James Madison
Fast response time 1 3
James Madison
Fast response time
Plumbing Emergencies
(210)
Plumbing Emergency
(210)
James Madison
fast response time
Ask the students to determine which set 1-4 of the slide is more visually appealing to them – and tell why.
Remember: proximity is the process of using space between and around objects but focus now is on placing related items together. 2 4
© UNT in Partnership with TEA

18. REVIEW The four design principles
Contrast - emphasizes the differences between objects that are dissimilar.
Repetition - purposely duplicates elements
Alignment - determine the optimal placement of objects
Proximity - place related items together
© UNT in Partnership with TEA

19. 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 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.
© UNT in Partnership with TEA

20. REPETITION
This webpage shows repetition in the color theme. It has black, white and various shades of gray in the background as well as within the various objects – even in the clothes that the models are wearing.
Repetition is also demonstrated by the use of the same font style for all text objects.
The icons in front of the list of links all repeat the same size and shape.
The software ads in the lower right repeat the same size, shape, colors, and arrangement of text/objects within each group.
EXAMPLE
Webpage screenshot of
Note: instructor may need to review with students the process of how to take a screen snapshot and paste into Word or PowerPoint.
Navigate to webpage.
Press the keyboard button labeled “Print Screen”– located in upper right corner of keyboard above the asterisk on the 10-key pad.
Open Word or other word processing software.
Place the cursor where student wants the picture to be located.
Click the paste button.
© UNT in Partnership with TEA