abc’s r’ us · r’ us visual design model –apply the abc’s r’ us visual design model to...
TRANSCRIPT
![Page 1: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/1.jpg)
V I S U A L DESIGN
ABC’s R’ US
of visual design
ETEC
![Page 2: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/2.jpg)
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
![Page 3: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/3.jpg)
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
![Page 4: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/4.jpg)
V I S U A L DESIGN Review
The visual characteristics of elements include…
• Color
• Line
• Position
• Shape
• Size
• Style (font & texture)
![Page 5: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/5.jpg)
V I S U A L DESIGN ABC’s R’ US
Alignment
Balance
Contrast
Chunking
Repetition (theme)
Utility
Simplicity
![Page 6: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/6.jpg)
V I S U A L DESIGN Alignment: Definition
Alignment is …
The arrangement of visual elements either vertically or horizontally
![Page 7: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/7.jpg)
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
![Page 8: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/8.jpg)
V I S U A L DESIGN Alignment: Example 1 L
EF
T
CE
NT
ER
RIG
HT
TOP
MIDDLE
BOTTOM
![Page 9: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/9.jpg)
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
![Page 10: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/10.jpg)
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
![Page 11: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/11.jpg)
V I S U A L DESIGN Balance: Definition
Balance is…
the equal weight of visual elements based upon size and darkness
![Page 12: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/12.jpg)
V I S U A L DESIGN Balance: Example 1
Tech News
---------------
----------------
----------------
----------------
-- -------------
----------------
----------------
----------------
----------------
----------------
----------------
----------------
----------------
---------------
----------------
----------------
----------------
-- -------------
----------------
----------------
----------------
----------------
----------------
----------------
----------------
----------------
![Page 13: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/13.jpg)
V I S U A L DESIGN Balance: Types
Types of Balance:
side to side
top to bottom
![Page 14: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/14.jpg)
V I S U A L DESIGN Balance: Example 3
![Page 15: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/15.jpg)
V I S U A L DESIGN Balance: Example 2
--------------------------
---------------------------
------------ --------------
---------------------------
---------------------------
---------------------------
---------------------------
------------------- -------
---------------------------
---------------------------
---- ----------------------
---------------------------
---------------------------
---------------------------
---------------------------
---------------------------
![Page 16: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/16.jpg)
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
![Page 17: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/17.jpg)
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
![Page 18: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/18.jpg)
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.
![Page 19: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/19.jpg)
V I S U A L DESIGN Chunking: Definition
Chunking focuses upon…
the placement of similar elements into visual “zones.”
![Page 20: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/20.jpg)
V I S U A L DESIGN Chunking: Example
![Page 21: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/21.jpg)
V I S U A L DESIGN Chunking: Example
![Page 22: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/22.jpg)
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.
![Page 23: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/23.jpg)
V I S U A L DESIGN Repetition/Theme: Example
![Page 24: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/24.jpg)
V I S U A L DESIGN Repetition/Theme: Example
![Page 25: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/25.jpg)
V I S U A L DESIGN Repetition/Theme: Example
![Page 26: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/26.jpg)
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
![Page 27: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/27.jpg)
V I S U A L DESIGN Utility: Example
![Page 28: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/28.jpg)
V I S U A L DESIGN Utility: Example
![Page 29: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/29.jpg)
V I S U A L DESIGN Utility: Example
![Page 30: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/30.jpg)
V I S U A L DESIGN Utility: Example
![Page 31: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/31.jpg)
V I S U A L DESIGN Simplicity: Definition
Simplicity addresses…
using only the key features that are needed to support the instruction
![Page 32: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/32.jpg)
V I S U A L DESIGN Simplicity: Example
![Page 33: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/33.jpg)
V I S U A L DESIGN Simplicity: Example
![Page 34: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/34.jpg)
V I S U A L DESIGN Clarification
Alignment
Balance
Contrast
Chunking
Repetition (theme)
Utility
Simplicity
![Page 35: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/35.jpg)
V I S U A L DESIGN MegaCorp
MegaCorp Design
Scenario
![Page 36: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/36.jpg)
V I S U A L DESIGN ABC’s R’ US
Alignment
Balance
Contrast
Chunking
Repetition (theme)
Utility
Simplicity
![Page 37: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/37.jpg)
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
![Page 38: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/38.jpg)
V I S U A L DESIGN
A
B
C
C
R
U
S
Utility
![Page 39: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/39.jpg)
V I S U A L DESIGN
A
B
C
C
R
U
S
Utility
![Page 40: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/40.jpg)
V I S U A L DESIGN
A
B
C
C
R
U
S
Utility
![Page 41: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/41.jpg)
V I S U A L DESIGN
A
B
C
C
R
U
S
Repetition (Theme)
![Page 42: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/42.jpg)
V I S U A L DESIGN
A
B
C
C
R
U
S
Chunking
![Page 43: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/43.jpg)
V I S U A L DESIGN
A
B
C
C
R
U
S
Contrast
![Page 44: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/44.jpg)
V I S U A L DESIGN
A
B
C
C
R
U
S
Balance
![Page 45: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/45.jpg)
V I S U A L DESIGN
A
B
C
C
R
U
S
Alignment
![Page 46: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/46.jpg)
V I S U A L DESIGN
A
B
C
C
R
U
S
Finished Product
![Page 47: ABC’s R’ US · R’ US visual design model –Apply the ABC’s R’ US visual design model to an actual real-world design ... notebooks •for traveling sales representatives](https://reader033.vdocuments.us/reader033/viewer/2022050116/5f9343d147baaa46aa1a9b89/html5/thumbnails/47.jpg)
V I S U A L DESIGN Q & A
Q & A