Project

01
Visual Instructions

SAMANTHA VIEHWEG | ART

ART 331 331 | PROJECT
INFORMATION 01| i
DESIGN
PRO J E C T 01 | V ISUA L I NS T RUC T I O NS CO N T E N T S

ii Project 01 | Visual Instructions Contents

iii Visual Instructions Mock-up/Photos
iv Visual Instructions Final Art Wire-Frame
v Visual Instructions full size screens
vi Visual Instructions full size Screens
vii Ponder | Project 01

M O D U LE 01

2 Step 01 | Select a Task

3 Step 02 | Research: Visual Instructions Style
4 Step 03 | Research: Symbols, Icons, and Graphic Aids
5 Step 04 | Research: Visual Instructions Techniques/Strategies
6 Step 05 | Photographic Research: 1st Person view
7 Step 06 | Photographic Research: 3rd Person view
8 Step 07 | Visual Style concept sketches
9 Step 08 | Visual Style on a Mobile Phone
10 Video Notes | “A Communications Primer,” by Charles & Ray Eames
11 Ponder | Module 01

M O D U LE 0 2

13 Step 09 | Visual Style prototype

14 Step 10 | Refinements based on User Feedback
15 Ponder | Module 02

M O D U LE 03
17 Step 11 | Visual Style Refinements & Final User Testing

ART 331
SAMANTHA VIEHWEG INFORMATION
| ART DESIGN
331 | PROJECT ii
01| ii
V I S UA L I N S TRU C TI O N S M OC K- U P/ PH O T OS

In this project,
the goal was to
create a set of
visual instructions
of a simple task
for a multilingual
audience. For my
design, I created
instructions for
boiling and steeping
a standard cup of
bagged tea. Some
design principles
I focused on were
color, rhythm, and
unity. I wanted the
entire design to feel
calming and organic.
I made sure that the
elements all flowed
the same directions
to guide the user
forward through the
design. I also utilized
illustration and
color to create unity
between each page.

ART 331
SAMANTHA VIEHWEG INFORMATION
| ART DESIGN
331 | PROJECT iii
01 | iii
V I S UA L I N S TRU C TI O N S F I N A L A R T W I R E - F R A M E

The interaction
between
screens is pretty
straightforward.
When the user clicks
on the icon for the
specified task, it
immediately leads
to the ingredients/
tools screen where
all the necessities to
complete the task
are listed. Swiping to
the left, the user is
then taken through
each step of the task
completion process,
which includes 5 total
steps. The ending
step is more or less
a conclusion page,
but drinking the tea
is still technically a
step since it is the
desired goal of the
task. Substeps are
highlighted in yellow.

ART 331
SAMANTHA VIEHWEG INFORMATION
| ART DESIGN
331 | PROJECT iv
01| iv
V I S UA L I N S TRU C TI O N S F U LL S I Z E SC R E E N S

ART 331
SAMANTHA VIEHWEG INFORMATION
| ART 01| v
DESIGN
331 | PROJECT
V I S UA L I N S TRU C TI O N S F U LL S I Z E SC R E E N S

ART 331
SAMANTHA VIEHWEG INFORMATION
| ART DESIGN
331 | PROJECT vi
01| vi
P O N D E R | PROJ EC T 01

What did you learn from instructions and other types my graphic design ventures.
the process of completing of designs that follow a step- Everything in graphic design
Project 01? by-step process. The elements can be artistic as well as
all need to flow together and effective from alignment to
Link to Prototype
work to guide the user toward typography to negative space
the end goal. Unless, of course, use. In my design for this
One of the largest things I
the goal is to keep the user on project, I tried to use elements
learned from the completion
a page or slow the navigation I use in my illustrations in the
of this project is the value of
down. Every element on the backgrounds and on pages that
rhythm and scale. Size matters
canvas has a purpose and can don’t require as much clarity
when it comes to user interface
be manipulated to acheive a such as the final page where
designing. Fingers work
specific end for the design. the user is drinking the finished
differently than computer mice
Effective design takes a lot of tea. I want my designs to stand
and apple pens. They have
mindfulness and awareness of out and be recognizable not
less dexterity and accuracy
how elements work and how only as effective and skillful
when it comes to pressing
to change them in order to designs, but also as my own
buttons on small screens like
enhance the user experience personal styles and ideas. The
the iphone 7 interface. When
for an intended audience. Aside goal would be for others to
I made paper prototypes,
from the actual technical aspect look at my designs and be able
finger size was something that
of design, from my peers I to pinpoint who created it in
became extremely apparent
noticed how much personal order to build my self-branding
as an issue to keep in mind
flare can be attributed to and credibility as a designer.
while designing apps and
instructional and informational I learned from the other
interfaces such as these visual
designs such as this one. I have designers in this class that this
instructions. I also found that
a strong passion for illustration, goal is true possibility for me, I
rhythm plays a huge part in
and have been looking for just need to pay attention to the
the functionality of visual
ways to incorporate it into design principles I apply.

ART 331
SAMANTHA VIEHWEG INFORMATION
| ART DESIGN
331 | PROJECT vii
01 | vii
01
SAMANTHA VIEHWEG | ART 331 | PROJECT 01 1
S TE P 01 | SE L EC T A TA SK
Task options
01. How to Make Tea
02. How to Fold a Paper Airplane
03. How to Braid Hair
04. How to Cook Eggs
05. How to Build a Snowman
06. How to Feed a Cat
07. How to Hang a Picture
08. How to Knit
09. How to Brush Teeth
10. How to Clean a Toilet
Chosen task Units of measurement
For this project, I have chosen to make simple Temperature: °F
visual directions of how to properly brew a
cup of herbal tea using a ceramic teapot. Measurements: Cups and Tablespoons
Needed materials Chosen audience
• Ceramic Teapot The audience of this task could be directed
at either Youth 12–18, or Adults 19+. My
• Teacup or Mug
directions will focus more on Youth 12-18.
• Herbal Tea in a Bag
If I were designing this task for children, I
• 3 cups of Water
would ensure that the temperatures were
• Stovetop lower and the utensils were unbreakable.
I would also include more safety warnings
• Spoon
and disclaimers to have an adult’s help. If I
• Hot Pad designed for adults, I would make the designs
sleeker and take less time to explain how to
• Oven Mitt
operate a stovetop.
• Kettle
My audience is generally unfamiliar with
• Optional 1 tbsp of Sugar using a stovetop or possible has limited
• Optional 1/4 cup of Cream familarity. The audience should generally
know what all the needed materials are
and how to procure them with only a small
Environmental considerations
amount of help from others. This task could
reasonably be completed without any
This task should be done indoors with access
supervision for this audience, but it is still
to cooking heat and an outlet for water. There
complex enough to warrant visual directions
needs to be proper lighting as well.
of how to properly complete the task.
SAMANTHA VIEHWEG | ART 331 | PROJECT 01 2
S TE P 02 | R E SE A RC H: V ISUA L I NS T RU C T I O NS S T Y LE

Flat Graphic Style Photographic Style Mixed Media Photographed Style Hand-drawn Style

Top-view Style Exploded-view Style IKEA Style Icon Style

Photographic Style Flat Graphic Style Hand-drawn Style Mixed Media Photographed Style

SAMANTHA VIEHWEG | ART 331 | PROJECT 01 3

S TE P 03 | R E SE A RC H: S Y M BO L S, I CO NS, A N D G R A PH I C A I DS

Pictogram depicting baking items Ideogram depicting “to wait” Indicate: symbol (arrow) in a solid Symbol for hot surfaces
style to indicate movement

Various icons or symbols for taking Symbols for “incorrect” or “correct.” Pictograms for stirring Ideograms for “time passing”
measurments

Pictogram for amounts of items Pictogram for stirring in particular Icons to indicate temperature Symbol for fire warning
direction

SAMANTHA VIEHWEG | ART 331 | PROJECT 01 4

S TE P 0 4 | R E SE A RC H: V ISUA L I NS T RUC T I O NS T EC H N I QU E S/S T R AT EG I E S

Color is used to clarify potency of Exploded view showing kettle “pulled Wireframe of kettle to show structures Isometric stovetops to help show
brewing apart” with captions behind or within other structures relationships between objects in 3D

Numbers to indicate step progression “Sub-steps” (in the yellow) are used to Wireframes to show relationships Color is used to differentiate objects
visually simplify complex methods between steps

“Sub-steps” in gray boxes to clarify Setting in kitchen to clarify use of Wireframe of stove to show structures Exploded view showing kettle “pulled
instructions tools within apart” with lines to show assembly

SAMANTHA VIEHWEG | ART 331 | PROJECT 01 5

S TE P 05 | PH OTOG R A PH I C R E SE A RC H: 1S T PE R SO N V I E W

Ingredient, part, or tool Ingredient, part, or tool Ingredient, part, or tool Ingredient, part, or tool Ingredient, part, or tool Ingredient, part, or tool

Step 01 Step 02 Step 03 Step 04 Step 05 Step 06

SAMANTHA VIEHWEG | ART 331 | PROJECT 01 6

S TE P 06 | PH OTOG R A PH I C R E SE A RC H: 3R D PE R SO N V I E W

Ingredient, part, or tool Ingredient, part, or tool Ingredient, part, or tool Ingredient, part, or tool Ingredient, part, or tool Ingredient, part, or tool

Step 01 Step 02 Step 03 Step 04 Step 05 Step 06

SAMANTHA VIEHWEG | ART 331 | PROJECT 01 7

S TE P 07 | V ISUA L S T Y L E CO N C E P T SK E TC H E S

With these sketches

I used procreate
to quickly draw up
some concepts
for different
icons, arrows,
and aesthetics for
my instructions.
I tried to follow
the classic motif
for tea designs
and added floral
embellishments
and curves to the
script text. I wanted
to make the look
iconic, but I also
explored more
gender neutral
options so that this
set of instructions
would not target
feminine viewers
specifically. I think
I will continue to
move in that neutral
direction as I go on.

SAMANTHA VIEHWEG | ART 331 | PROJECT 01 8

S TE P 08 | V ISUA L S T Y L E O N A M O B I LE PH O N E

1-2-3 1-2-3 1-2-3

SAMANTHA VIEHWEG | ART 331 | PROJECT 01 9

V I D E O N O TE S | “A CO M M U N I C AT I O NS PR I M E R ,” BY C H A R LE S & R AY E A M E S
What are the important components
of Claude Shannon’s diagram on
communication? (1:26)
The important components within the
diagram include a noise source, a transmitter,
a signal, a sound channel, a recycler, and a
destination.
Anything that interferes with or
distorts the communication is called
what? (1:26)
Noise is anything that intereferes or interacts
with the transmission of communication and
can refer to more than sound.
How do you combat distortion of
information when attempting to
communicate clearly? (5:17)
Redundancy is a great way of combatting
distortion. This way the message is
repeated and helps clarify the information.
Another tactic would be to increase the
power or loudness of the message being
communicated so that there is a greater
chance of the message being heard clearly.
Why would it be so important to
understand your audience when
attempting to communicate clearly
to them?
Different audiences need different levels of
communication in order to hear a message
clearly. Children, for instance, will benefit
from more redundancy than adults would.
In addition, different adiences respond to
different types of language and images that
are more relevant to their lifestyles.
How are the concepts in this video
relevant to your chosen discipline or
profession?
Graphic Design is all about communication.
These concepts are highly relevant to my
field. Whether designing brands, logos,
pamphlets, articles, apps, or anything else.
Knowing the target audience and how to
effectively communicate with that audience
is essential to creating effective designs.
Considering noise and interference of the
message trying to be communicated is
important as well in graphic design. This
SAMANTHA VIEHWEG | ART 331 | PROJECT 01 10
way the designer can find the optimal way to
accomplish their design goals.
Please indicate any other concepts
within this video that are relevant
or important to this project or your
career.
Information designers have a lot of power
over their audiences. They influence the
people who read and view thier designs each
day when they open their apps, read internet
articles, and other similar things. They can
shape whether the messages are clear,
positive, effective, intrusive, aggravating,
or even uplifting. It is important to consider
these ideas while designing to ensure that
the influences being put out into the world
through visual information are ethical and
meaningful. For me personally, I want to make
sure that my designs present researched facts
and topics that inspire and provoke thought
in others. I want my designs to be clear and
easy to digest as well as uplifting and allow
the viewers to understand the importance of
visual information. Especially as visual data
becomes more relevant in everyday society.
P O N D E R | M O DU L E 01
What do you hope to gain from this
course?
Having taken this course once before in
a previous semester, I hope to reveal my
growth as a designer as I compare this
semesters work to my past assignments.
I want to see how far I have come as a
designer in my studies, especially since this
is my final semester of university study in
my Bachelor degree program. My hope is to
implement all the advanced techniques I have
cultivated such as processbook designing,
wireframing, and Xd prototype creation. The
first time I took this course, I was relatively
inexperienced in my emphasis of graphic
design, and I felt the work I accomplished was
not even close to indicating what I am truly
capable of as a designer. In taking this course
a second time, I want to gain an even deeper
understanding of the ideologies behind
information design and what it means to
take data and present it in a visually effective
manner. The world is moving in the direction
of visual information, and it is my job to keep
up with this movement and create meaningful
designs to inform and educate others.
What did you learn this week that
you didn’t know before?
This week I learned that even when you have
completed a project once before, there are
numerous ways you can enhance past designs
or create equally compelling but new ones. I
was worried that this class would feel tedious
a second time through, but it is in fact even
more challenging than before because I hold
myself to a higher standard now that I am
more experienced as a designer. This tells
me that in my career as a graphic designer,
no matter how many times I undergo similar
projects, the differences between clients and
my skill levels will help keep the processes
interesting and engaging as I continue on.
Which design principles are you
thinking about when you design?
For me, I like to focus on alignment,
typographical heirarchy, and the use of color
to create emphasis and clarity. I think that
alignment is crucial to clear designs and
quality presentation of information. Heirarchy
helps to balance important elements
SAMANTHA VIEHWEG | ART 331 | PROJECT 01 11
alongside lesser elements, and finally color
is what gives designs a sense of personality
and uniqueness. I know that amazing designs
can be acheived using only black and white,
but when thousands of colors, shades, and
tints are at a designers disposal, it is good to
experiment with them and know how they
affect the finished aspects of a design.
Did you learn something new or are
there challenges you are facing with
the software?
I am quite familiar with Adobe InDesign,
Illustrator, and XD at this point in my
schooling. I still face issues here and there
when it comes to master pages in InDesign,
specifically when ensuring that background
elements are properly arranged when new
pages are added to a proccessbook. I also
always seem to have issues with the gradient
tool. I love the way gradients create a dynamic
element of color, but getting the balance
right and changing the colors of the gradient
always gives me issues in InDesign. I always
have to open a new color editing window and
hope to figure out this complication soon.
02
ART 331
SAMANTHA VIEHWEG INFORMATION
| ART DESIGN
331 | PROJECT 12
01 | 12
S TE P 09 | V ISUA L S T Y L E PROTOT Y PE

User 1 Reactions User 2 Reactions User 3 Reactions

“I wish there were more “It feels weird that “The color in the
options to choose from the images on each thermometer definitely
or just a background page are not uniformly needs to be red. Is there
on the opening screen. centered, they sort of a way to show exactly
It seems unfinished. I jump around from page what temperature it
can easily tell what is to page. I also don’t like is supposed to be at?
going on. I don’t like that not everything is Otherwise it sort of
the background color colored consistently, feels pointless to have it
though. It is not very eye but I am guessing that there. Same thing with
catching and makes it is because the drawings the clock. I want to know
hard to see the water in are not finished yet. It how long I am supposed
the teapots. makes sense though.” to be waiting.”

ART 331
SAMANTHA VIEHWEG INFORMATION
| ART DESIGN
331 | PROJECT 13
01 | 13
S TE P 10 | R E FI N E M E N T S BA SE D O N USE R FE E DBAC K

User 1 Reactions User 2 Reactions User 3 Reactions

“Mostly, the design just “I really like the finished “These colors are nice.
needs to be cleaner. look of the first step The water is different
There are a lot of after the materials. Is colors on some of the
random stray lines there a way to make slides. In my opinion,
and things like that, the materials look they should all be the
but I love the header. I more uniform and less darker blue. I think it’s
wonder if the ‘2’ should scattered around the pretty easy to see what
also be white though. page? I have a hard is going on, but the
And the little navigation time knowing that is the little timer needs to be
bubbles should be on materials page and not bigger, and it’s weird
all the slides, not just just a fun background or that the thermometer
the first.” something like that.” only has one number.”

ART 331
SAMANTHA VIEHWEG INFORMATION
| ART DESIGN
331 | PROJECT 14
01 | 14
P O N D E R | M O DU L E 02
How did user testing help you?
I intentionally left my illustrations unfinished
because I did not want to commit to a style
before my users approved it. If they wanted
something more simple or more realistic, I
wanted to give myself the time to make that
change for this project. I ended up going with
a highly stylized flat-graphic look. I think it fits
my theme well, and my users seemed to react
positively with it. All my users preferred the
navigation bubbles to the step numbers in the
upper right. I think centering the navigation
helped with that a lot as well, especially since
the type of app I went with is the kind where
the user swipes rather than scrolls. With
scrolling, the numbers on each page would
probably have worked better. I noticed that
my users had a lot of opinions regarding the
color scheme of my visual instructions. They
really wanted the colors to be warm and
inviting, rather than desaturated and cool.
That was an interesting discovery for me.
They also liked things to mimic reality like the
thermometer having red inside it, and the
water being more green than straight blue,
and that was helpful to know as well.
What did you learn this week that
you didn’t know before?
I learned that the design principles of
alignment and rhythm have much more
dynamic significances than I knew. Aligning
objects in a way so that they work for the
design, and not against it is key. I made my
teapot facing the left in almost all of my
screens without evening thinking about it. This
kept making my users hesistant about swiping
the next screen. I realized that the flow of the
app was not workign toward the greater goal
of reaching the end of the instructions. The
left-facing teapot was slowing the users down
and making them take longer. My final step
in the instruction set has the teapot facing to
the right. Again, I did not do this consciously.
I noticed that screen had an organic levy into
scrolling to the final screen simply from the
rhythm created by the position of the artwork.
This is something I am going to be paying
much more attention to as I continue forward
with making professional designs. I need to
consider the goal of my designs, and focus
on making the rhythm and alignment of my
artwork adhere to that designated goal.
SAMANTHA VIEHWEG
Which design principles are you
thinking about when you design?
For this project, I have been focusing on size
and weight of lines in order to create harmony
and consistency. I have also been paying close
attention to color, the psychological affects
of color, and how multiple colors can work
together in a single cohesive composition.
Additionally, I have been trying to properly
apply negative space, and not fear simplicity.
Did you learn something new or are
there challenges you are facing with
the software?
I have not any issues with the software up
to this point in the class. I prefer working in
Adobe XD compared to other programs like
Photoshop, and am glad to be using it again
to create prototypes for this class. I had some
small problems copying and pasting template
elements from my last process book into
this one, but I was able to address them and
move forward. I think InDesign is certainly the
most challenging program for me outside of
Photoshop, but I am gaining familiarity with
both as I continue my graphic design studies.
ART 331
INFORMATION
| ART DESIGN
331 | PROJECT 15
01 | 15
03
SAMANTHA VIEHWEG | ART
ART 331 331 | PROJECT
INFORMATION 01 | 16
DESIGN 16
S TE P 11 | V ISUA L S T Y L E R E FI N E M E N T S & FI N A L USE R T E S T I N G
User 1 Reactions
“This looks so fun! I love
the cute illustrations
and the entire thing is
really easy to follow. The
background pictures
might be a little too
busy, but overall I really
like it. I also think the
colors could be a little
less bright, but it’s not a
huge deal overall to the
design. Great work!”
User 2 Reactions User 3 Reactions
“From this design I “Each individual page
can tell you know what looks so good. They all
you are doing. All the look like their own little
pages look well put illustration and not even
together and cohesive part of an entire set, that
as a whole. I wish I knew is how cute they are. It’s
exactly how much water helpful that there are
to put in or what kind of little arrows to the extra
tea to use, but I guess steps. I can’t tell if they
that would probably be are optional steps or not
obvious to anyone using though. Do you always
an app like this.” need to stir tea?”
ART 331
SAMANTHA VIEHWEG INFORMATION
| ART DESIGN
331 | PROJECT 17
01 | 17