abc’s r’ us · r’ us visual design model –apply the abc’s r’ us visual design model to...
TRANSCRIPT
V I S U A L DESIGN
ABC’s R’ US
of visual design
ETEC
V I S U A L DESIGN The Benefits of Quality Visual Design
Quality visual design can help…
–focus attention
–increase interest
–increase efficiency
–increase instructional effectiveness
V I S U A L DESIGN Lesson Objectives
By the end of this lesson, you will be able to…
– Describe the components of the ABC’s R’ US visual design model
– Apply the ABC’s R’ US visual design model to an actual real-world design challenge
V I S U A L DESIGN Review
The visual characteristics of elements include…
• Color
• Line
• Position
• Shape
• Size
• Style (font & texture)
V I S U A L DESIGN ABC’s R’ US
Alignment
Balance
Contrast
Chunking
Repetition (theme)
Utility
Simplicity
V I S U A L DESIGN Alignment: Definition
Alignment is …
The arrangement of visual elements either vertically or horizontally
V I S U A L DESIGN Alignment: Types
LE
FT
CE
NT
ER
RIG
HT
LE
FT
CE
NT
ER
RIG
HT
Vertical Alignment
TOP
MIDDLE
BOTTOM
Horizontal Alignment
V I S U A L DESIGN Alignment: Example 1 L
EF
T
CE
NT
ER
RIG
HT
TOP
MIDDLE
BOTTOM
V I S U A L DESIGN Alignment: Example 2
The sales cycle involves three
distinct phases. These phases are
included in the SCR sales process.
In order to take advantage of this
process, you will need to follow the
steps outlined in the pages which
follow. This process has been
proven to increase sales by 500%
after the initial training period has
passed.
LE
FT
CE
NT
ER
RIG
HT
TOP
MIDDLE
BOTTOM
V I S U A L DESIGN Alignment: Example 3
The Internet is used for information dissemination,
collaborative work, and international commerce.
LE
FT
CE
NT
ER
RIG
HT
TOP
MIDDLE
BOTTOM
V I S U A L DESIGN Balance: Definition
Balance is…
the equal weight of visual elements based upon size and darkness
V I S U A L DESIGN Balance: Example 1
Tech News
---------------
----------------
----------------
----------------
-- -------------
----------------
----------------
----------------
----------------
----------------
----------------
----------------
----------------
---------------
----------------
----------------
----------------
-- -------------
----------------
----------------
----------------
----------------
----------------
----------------
----------------
----------------
V I S U A L DESIGN Balance: Types
Types of Balance:
side to side
top to bottom
V I S U A L DESIGN Balance: Example 3
V I S U A L DESIGN Balance: Example 2
--------------------------
---------------------------
------------ --------------
---------------------------
---------------------------
---------------------------
---------------------------
------------------- -------
---------------------------
---------------------------
---- ----------------------
---------------------------
---------------------------
---------------------------
---------------------------
---------------------------
V I S U A L DESIGN Contrast: Definition
Contrast uses…
differences in color, size, style, or thickness
to draw attention to visual elements and to
increase legibility.
Contrast = Opposites
V I S U A L DESIGN Contrast: Example 1
Simple From Oracle
Jest parking dint sum frog. Fodder, arches tin udder drank. Future word car pegs. Watcher moaning mouser form butter. Denture locket tarred fur disk fetter.
Simple From Oracle
Jest parking dint sum frog. Fodder, arches tin udder drank. Future word car pegs. Watcher moaning mouser form butter. Denture locket tarred fur disk fetter.
Simple From Oracle
Jest parking dint sum frog. Fodder, arches tin udder drank. Future word car pegs. Watcher moaning mouser form butter. Denture locket tarred fur disk fetter.
Jest parking dint sum frog. Fodder, arches tin udder drank. Future word car pegs. Watcher moaning mouser form butter. Denture locket tarred fur disk fetter.
Simple From Oracle
V I S U A L DESIGN Contrast: Example 2
Amazing Title Text text text text text text text text text text text text text.
V I S U A L DESIGN Chunking: Definition
Chunking focuses upon…
the placement of similar elements into visual “zones.”
V I S U A L DESIGN Chunking: Example
V I S U A L DESIGN Chunking: Example
V I S U A L DESIGN Repetition/Theme: Definition
Repetition refers to…
the consistent use of element forms (i.e., fonts, sizes, styles, colors) and
the consistent use of visual imagery (metaphor) to support the content.
V I S U A L DESIGN Repetition/Theme: Example
V I S U A L DESIGN Repetition/Theme: Example
V I S U A L DESIGN Repetition/Theme: Example
V I S U A L DESIGN
Utility addresses…
where the user is located within the instructional product and
where the user can interact with the product
Utility: Definition
V I S U A L DESIGN Utility: Example
V I S U A L DESIGN Utility: Example
V I S U A L DESIGN Utility: Example
V I S U A L DESIGN Utility: Example
V I S U A L DESIGN Simplicity: Definition
Simplicity addresses…
using only the key features that are needed to support the instruction
V I S U A L DESIGN Simplicity: Example
V I S U A L DESIGN Simplicity: Example
V I S U A L DESIGN Clarification
Alignment
Balance
Contrast
Chunking
Repetition (theme)
Utility
Simplicity
V I S U A L DESIGN MegaCorp
MegaCorp Design
Scenario
V I S U A L DESIGN ABC’s R’ US
Alignment
Balance
Contrast
Chunking
Repetition (theme)
Utility
Simplicity
V I S U A L DESIGN Simplicity
Notes from Client Meeting:
• CBT with four modules
• sales training exists in training notebooks
• for traveling sales representatives
• for use on lower-end laptops
A
B
C
C
R
U
S
V I S U A L DESIGN
A
B
C
C
R
U
S
Utility
V I S U A L DESIGN
A
B
C
C
R
U
S
Utility
V I S U A L DESIGN
A
B
C
C
R
U
S
Utility
V I S U A L DESIGN
A
B
C
C
R
U
S
Repetition (Theme)
V I S U A L DESIGN
A
B
C
C
R
U
S
Chunking
V I S U A L DESIGN
A
B
C
C
R
U
S
Contrast
V I S U A L DESIGN
A
B
C
C
R
U
S
Balance
V I S U A L DESIGN
A
B
C
C
R
U
S
Alignment
V I S U A L DESIGN
A
B
C
C
R
U
S
Finished Product
V I S U A L DESIGN Q & A
Q & A