Download Lesson 4: Design Principles

Lesson 4: Design Principles
This lesson will cover the four primary principles of
design:
● Contrast
● Repetition
● Alignment
● Proximity
Design Principles: Contrast
Contrast is a visually important aspect of design.
Contrast can be “striking,” drawing the attention of
the viewer to your page. Contrast must be strong.
However, contrast and conflict are very different.
Design Principles: Contrast
Ways of creating contrast:
 Type (text): Large text with small text
 Color: a bold color with a soft color
 Horizontal rule/vertical rule: thin horizontal rule
with a thick vertical rule
 Graphics: Small graphic with a large graphic
Design Principles: Contrast
Contrast is “critical” to organizing the information
on your publication. Contrast makes the “purpose
and organization of the document” clear to the
audience. For examples of contrast, refer to your
course book The Non-Design Design Book on
pages 53-62.
Design Principles: Repetition
Repetition is the design principle in which visual
elements are repeated throughout the page(s) of
your publication.
Design Principles: Repetition
Incorporating repetition into your web page
(publication) will “strengthen the unity” of your
design and page.
Design Principles: Repetition
Ways to incorporate Repetition:
 Type (text): Use same font throughout your
document, bolding particular words consistently
 Color: Use the same color, colors, or color
patterns throughout the document
 Bullets: make them the same throughout the
document
Design Principles: Repetition
Ways to incorporate Repetition continued:
 Design elements: horizontal rules, graphics
 Headlines/Subtitles: should be consistent
throughout your web page (publication).
Design Principles: Repetition
Exercise 4.1
I have created a web page for Angelo State
University’s CDJ Department. View the URL
below AND the link within it entitled:
“View Advertising Course Descriptions”
http://webclass.angelo.edu/comm6301/stanl
ey/lessonexercises/coursedescrip.htm
(Name at least four elements of Repetition within
these two web pages.)
Design Principles: Alignment
“Lack of alignment is probably the
biggest cause of unpleasant-looking
documents. Our eyes like to see order; it
creates a calm, secure feeling” (p. 35).
Design Principles: Alignment
1. The principle of Alignment states that
“nothing should be placed on a page
arbitrarily.”
Design Principles: Alignment
2. A visual connection between the elements
on the page is critical to creating a “clean
and sophisticated look.”
Design Principles: Alignment
3. There must be a “reason” and purpose for
the placement of all design elements.
Design Principles: Alignment
Here is an example of my business card. The
elements on the card look as though they were placed
at random and have no connection to one another.
Design Principles: Alignment
The information on this business card has been
aligned centered. It looks all right, but I want
something that has more of an impact.
Design Principles: Alignment
The information on this card is right aligned (flush
right). It has a strong invisible vertical line that has
more of an impact than the other two cards.
(Another example: Center Alley p. 40)
Design Principles: Alignment
Newsletter Tip:
1. Do not center headlines over body
copy that is left aligned (flush left) or
indented.
Design Principles: Alignment
Turn to page 38 in your Non-Design
Design Book, and see if you can find all
of the items that are not aligned
correctly. Example: Ladle Rat Rotten
Hut
Design Principles: Alignment
It tends to be the bad examples that pop
out at us.
Why? Probably because when the
alignment is right (correct), it's invisible.
Design Principles: Proximity
Finally, let’s review the design principle of
Proximity. Proximity means that related items are
grouped together.
Design Principles: Proximity
When elements that have a relation are grouped
together, your page will have a cohesive
appearance. Let’s look at the business cards once
again:
Design Principles: Proximity
In this example, the eye stops 5 times. It is difficult
to know where to begin reading. Visually, it is
confusing to look at. Thus, it will be overlooked.
Design Principles: Proximity
In this example, your eye knows exactly where to
begin reading. Related information is grouped
together, and it makes sense.
Design Principles
In this lesson, we have discussed the four primary
design principles:
Contrast
Repetition
Alignment
Proximity
Design Principles
You may have noticed before now that CRAP is
an acronym to remember these design
principles. Consequently, if you do not
incorporate contrast, repetition (consistency),
alignment, and proximity into your web page
designs, your pages will look like crap.
Design Principles
Go to Blackboard 
Course Documents 
Save Design Style Sheet
Begin working on your design style sheet.