Nota SEM 20042

Getting to know UI / UX for Mobile AppsDevelopment
89

Additional Mini-methods to Improve Your Sketches

These aren’t necessarily tips and tricks, but they’re a collection of methods, tools, and
suggestions that should boost your productivity or improve the quality of your sketches.

Figure 50: SketchBoard

Getting to know UI / UX for Mobile AppsDevelopment
90

1. Create a sketch board. One of the biggest benefits of using pen and paper instead of a
digital sketching tool is that you can actually stick it to a wall. Everyone on your team can
see it and participate (although I recommend setting up review sessions).

• You will see your sketches yourself, and this will stimulate your thinking and let
you see the big picture, not isolated pieces, but the whole system. You will see
interactions between parts and the way they fit one another.

• Create the sketch board - attach your whiteboard sketches. If there is no
whiteboard in your office, you can use double-sized adhesive tape or post-it note
sheets to stick your sketches to the wall. If you don’t want to stick to the wall, you
can find a big piece of cardboard paper instead. I strongly recommend using sketch
boards, as they’re one of the best design tools.

2. Use a whiteboard. A whiteboard is a great drawing tool. It has a number of advantages:
• It is collaborative, and it is easy to involve other team members in the discussion
and in the drawing as well. Even if their ideas do not fit well, you will understand
their way of thinking, and it will help you to be on the same page.
• Markers do not let you focus on details, you have to think about the general
things. Sketches are open to interpretation.
• A whiteboard is easy to clean and make corrections on.
• There is a lot of space and you can easily think through the whole system flow.
• You can attach sketches, printouts, and reference materials using magnets.

3. Prototypes. Make a clickable prototype to evaluate your design. Try to get feedback
about some elements. This works particularly well when you are using templates - your
sketches are of the same size. Obviously, it will be much easier to draw same size sketches
if you are using a template.

Getting to know UI / UX for Mobile AppsDevelopment
91

4. Use your printer and scanner. Draw the framework by hand (you can use ruler to draw
more accurately), then just scan it using a scanner or mobile app, and print it. You can
edit your template in image redactor before printing. You can remove unnecessary details
or duplicate some elements. You can also print a readymade site page, photos, and other
descriptive elements. You can paste the cut-outs in your sketch.

5. Use Evernote for scanning. Evernote is a great design tool. You can keep and share your
sketches in it, you can create themes, and use tags to organize your sketches. The abilities
of the “Scanner” mode are particularly impressive. You put your sketch in front of it and
it “scans” it, so you get the copy of the sketch. Then you can invite your colleagues to
Evernote and give them your note link. Since there is a mobile app for tablets and phones,
you can always have your sketches at hand.

6. Hybrid sketching. To put some life and realism into your sketches you can combine them
with photos. That means that you have to take a photo and then draw some story with
interface elements on it. This can also help you to notice some interaction issues and
details.

7. Tracing real world. If you need to create a storyboard, illustrate an experience in a specific
context (e.g., a person using a smartphone at a bus station), you need to include
depictions of people, places, and various real-life objects. These can be difficult to draw,
especially if you haven’t mastered drawing skills, but here’s a simple tip: Take a photo of
the object or the situation, and then obtain the key objects contour using an image editor.
You can use the resulting contour in your sketches afterward. Of course, if you have
a tablet and stylus, it will be even easier.

Getting to know UI / UX for Mobile AppsDevelopment
92

Wireflow: Outlining System Flow and Branching

The wireflow is essentially a sequence of the system flow, screen after screen, with branches and
decision points. We should consider how a user addresses their task, the way they move from
screen to screen, and their overall experience of the product over time.

Figure 51: Outline the Flow

Getting to know UI / UX for Mobile AppsDevelopment
93

Wireflow, or what you are drawing and the way it is connected, could be organized according to
the following approaches:

• Sequence. A sequence is a straight journey, screen after screen. It can also be a story with
decision points; you show not only the journey but also decision points and different
paths the user can choose. You can show the structure of screen interaction.

• State changes. Depict different screen states of some element and the conditions or
actions that cause the transitions between these states.

• Screen vs. screen elements. You can draw the whole screens or consider micro-
interactions and interactions.

• Platforms. You can consider one platform experience or multiple platforms.
• Scope. Will you depict a part of the user journey or the whole journey? One user

interaction with the system, or multiple users’ interactions?

Getting to know UI / UX for Mobile AppsDevelopment
94

I generally try to define the following wireflow types, depending on the organization and practical
use:

Figure 52: Wireflow Type

Getting to know UI / UX for Mobile AppsDevelopment
95

1. Mapping overall flow and high-level flow. Promptly sketch the screen shifts and draw
the general journey of your product usage. Here you can include some context and you
can optionally show some user interaction. For example, an eCommerce shopping service
is quite a long journey that may include a lot of steps: how the user found the shop, the
steps they went through to order the product, how they paid, and so on.

2. Screen flow. This focuses on a specific functional flow through the system. It could be a
small straight sequence of screens or a journey with branching. For example, a user
uploading some photos or a video.

3. Navigation scheme. Draw your screen and the options it contains. This is not supposed
to map the journey. This step includes information that shows the options a user can
choose, the directions users have, and various app parts. I usually create a navigation
scheme at the beginning of a project. It serves to understand how navigation should be
structured (what points should be included; how many levels are necessary).

4. Screen states. Draw the screen or element states (an example might be a file upload
dialogue). In this case, for example, the screen will have the following states:
1. Blank
2. A user pulls the file in the active area
3. The file is uploading
4. The file is uploaded
5. There is an error

Getting to know UI / UX for Mobile AppsDevelopment
96

Sketching UX Flow: A Quick How-to Guide

The wireflow design process is similar to the wireframe one. Many steps are similar or identical,
but there are some important differences:

Define what you need to draw. Decide exactly what you want to draw (e.g., the general history
or a fragment of your design). Do you want to generate different options or to think through the
details of one journey? Decide whether you are going to show your sketches to someone else or
not.

Define what keyframes and transitions you should include in your drawing. If you add all the
screens and shifts your wireflow will be very long and complex. Consider which key screens you
should show to convey the essence of the interaction that helps accomplish your task. The same
goes for screen shifts. You need to choose which shifts will be more useful in expressing your
idea.

Define the starting point. What will be the starting point of your journey? You can start with the
entry point, i.e., the start of the journey, for example, what a user sees when they log into your
app. Alternatively, you can start at the midpoint or with the most interesting/difficult/important
screens or process steps. Or you can start at the end, with the end result achieved by a user, and
describe the steps the user took to come to this point.

Getting to know UI / UX for Mobile AppsDevelopment
97

Figure 53: Define the Flow
Decide what comes next. After drawing the starting steps, decide what goes next by answering
the following questions:

• Which way does this step lead users?
• Which way do you want them to go?
• What do they have to do to get there?

Getting to know UI / UX for Mobile AppsDevelopment
98

Sketch alternative routes, entries. Think about alternative ways the user can get to each step:
• What will happen if the user’s Internet connection fails?
• What other options do they have?
• What can go wrong in the case of user or app error, what will happen?
• What will happen if the user closes the app at this step?
• Where will the user start the next time he launches the app?

Think about alternative flows. Analyze the history, design an alternative flow, and sketch it.
Add annotations, notes, details. Add the explanatory elements that will clarify non-obvious
details.

Save. Make a digital copy of the sketch.
Share. Share the sketch (e.g., via Evernote or InVision).

Essential UX Flow Sketching Tips and Tricks

Draft a wireflow first. If you are going to think quite a long journey over, you would better make
a quick sketch in order to understand how much space you need and in order not to miss some
important steps or details. It would be difficult to add them to the paper sketch afterward.

Don’t create a huge map with too many details. Paper sketches don’t have an undo button, so
it will be difficult to make changes. You may draw the details too accurately and this will distract
your imagination from the generation of different high-level variants. Instead of creating a huge
scheme that would illustrate the entire system, try to focus on the key scripts and try to dedicate
an individual page for each script.

Cut unnecessary details and combine various dualization levels. It is not necessary to draw all
the interaction descriptions, so try to use only the key elements of your journey. While drawing
a huge interactions map, you have no need to work every single screen out in detail. Some

Getting to know UI / UX for Mobile AppsDevelopment
99

screens could be just represented by several squares, and other, key screens, could be worked
out in detail.

Try different paper sizes. Try different paper formats, A3 or A5. Paper sheet size will limit you
and will affect your process in different ways. A small paper sheet will not let you add many
screens or details, but it can help you to concentrate on the main ideas. Using a big paper sheet,
you can draw one huge journey, a lot of details, and additional notes. Alternatively, you can place
a number of small journeys on it.

Post-it notes can help too. You can also try to use post-it notes. You can draw separate screens
or some footnotes on them, or you can draw additional states of your sketch’s elements. Their
advantage is that they can be easily replaced, you can also simply move the note somewhere
else. For example, in case the flow has changed, you can just change the order of your post-it
notes.

Use templates. Try to use templates. They will save time and will enable you to create more
clickable, high-quality prototypes.

Try using a whiteboard. A whiteboard has a number of advantages. It is becoming more and
more popular because it allows you to draw a huge journey with a lot of branches. You can draw
a lot of application components on paper and then just attach them to the whiteboard using
magnets, adding them to the journey.

Sketching a shadow. Shadows can help you to mark important elements and they add visual
attractiveness to your sketch. I use three different types of shadows:

• Lines following the light direction - this does not always look beautiful, but you can use
the graduation and pick the objects up to different “heights.”

• Outlining some part out with a darker color (only the bottom or the bottom and right side)
• Using the Pro-marker (or its equivalent in the app you use for drawing)

Getting to know UI / UX for Mobile AppsDevelopment
100

Drawing components. An objection like “I can’t draw that well” may stifle your initiative. It is
actually easier than it sounds. Even the most complex sketches are generally composed of a
number of basic blocks. If you can draw a point, a line, a triangle, a square, and a circle, then you
have the essential building blocks you need to draw anything for your sketch.

Putting it all together. The basic elements, buttons, radio buttons, and dropdowns are composed
of basic elements. After learning to draw these elements, you can combine them and draw
complex blocks and components.

Wrap Up

The goal of this post was not to create the ultimate, one-size-fits-all guide to UX sketching, or
sketching in general, because designers have different needs and personal preferences.

As you can see, this is a lot to cover. Designers use a myriad of tools, techniques, and approaches
to produce UX sketches, and it’s rather subjective. Certain techniques may or may not work for
different people working on different projects. If you’re just getting started, you should definitely
experiment. Constant practice and experimentation will help you find what works for you.
It’s up to you to choose tips and techniques that will be the best fit for your project and your
approach to design.

Getting to know UI / UX for Mobile AppsDevelopment
101

Why Sketching Is an Essential
Skill for UX Designers to
Master

Nick Babich Mar 27, 2018
https://xd.adobe.com/ideas/process/wireframing/sketching-essential-skill-every-ux-designer-
master/

Sketching is a fundamental part of the design process7. It often comes early in the design
funnel and sets the tone for the rest of the process. While sketching seems straightforward,
there are certain ways to do it efficiently. This article will provide you with all the information
you need to level-up your UX design workflow with sketching.

Why you should sketch

The main idea of sketching is to come up with the best solution to a problem. Sketching
before wireframing8 begins allows designers to try out a multitude of ideas and iterate them
before settling on one.
As an activity, sketching has five significant benefits:

7 The Design Process is an approach for breaking down a large project into manageable chunks. Architects,
engineers, scientists, and other thinkers use the design process to solve a variety of problems.
8 Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to layout
content and functionality on a page which considers user needs and user journeys. Wireframes are used early in the
development process to establish the basic structure of a page before visual design and content is added.

Getting to know UI / UX for Mobile AppsDevelopment
102

1. Generate ideas

Sketching is an excellent brainstorming exercise — it supports the fail-fast approach and is a
quick and cheap way to generate many ideas. The unfinished nature of sketches fosters new
ideas; when we sketch out our thoughts, we automatically try to find the better solution to a
problem.

2. Visualize ideas

Sometimes you may think that you don’t need to sketch because you already have a clear idea
of how you want to build something. But in practice, it’s really hard to create something when
ideas are locked in your head. Only by visualizing ideas will you be able to understand how
something should look or work in detail.

3. Communicate designs

When it comes to communicating design decisions, it’s possible to communicate ideas verbally,
but verbalizing ideas is not very practical. When we explain concepts with words, we assume
that what we say will be understood by other people precisely the way we understand it.
Unfortunately, this rarely happens because people interpret things differently. When you
explain how something might look or work, everyone listening to you will use their own
imaginations to interpret your words. As a result, they might have different understandings of
your solution. This often creates ambiguity.

Since sketching is a form of visual communication, you won’t be forcing people to rely on their
imaginations nearly as much because everyone will be able to see what you mean. Sketching
kills ambiguity and helps build a shared understanding. As Le Corbusier, one of the most
influential architects of 20th century, said, “I prefer drawing to talking. Drawing is faster, and
leaves less room for lies.”

Getting to know UI / UX for Mobile AppsDevelopment
103

4. Better collaboration

You can use sketching to spark discussion. Sketches enable a team to discuss specific aspects
of a design when reviewing ideas. They give team members something to refer to and
something to bounce off. Teams can quickly filter the good and bad ideas out.

Sketching can be a powerful tool for involving stakeholders early on in the design process.
Since sketching has a low barrier to entry, it allows non-designers to participate. Non-designers
and stakeholders can use a visual representation of the solution to formulate a complete set
of requirements for the project.

5. Faster iterations

Sketching allows you to iterate on your design quickly. Even when you have a high-fidelity
prototype, it can be faster to validate new ideas through sketches before you have to make
those changes to your digital prototype.

Getting to know UI / UX for Mobile AppsDevelopment
104

When you should sketch

While sketching can be used nearly at any stage in the product design process, it is especially
beneficial in the early stages because it allows you to explore multiple design directions
simultaneously and to identify the right design at a low cost. When you sketch a solution and
don’t like what you see, you can just toss the sketch in the bin and start over.

Two key things to remember about sketching

• Sketching is not drawing
Many people confuse sketches with drawings. This often leads to a potentially dangerous
misunderstanding that sketches have to be pretty. Focusing on making your sketches look like
professional illustrations is a big waste of your energy.

Figure 54: The Sketching vs Drawing
It’s vital to remember that sketches and drawings aren’t the same things — sketching is about
getting ideas out and reviewing those ideas, not about creating a work of art. Thus, as long as
your sketch can convey your idea, it’s a good sketch.

Getting to know UI / UX for Mobile AppsDevelopment
105

Figure 55:Sketches should be easy to produce and easy to trash
• Sketching is not prototyping
Another common misconception about sketching is that sketches and low-fidelity prototypes
are the same things. While both design artefacts might look similar and both can be used to
illustrate design concepts, they are by far not the same thing. Sketches and prototypes have
different roles in the product development process and should be used at different stages.
Sketching usually comes before prototyping and has the goal of communicating design ideas
in a tangible format. Later, it’s possible to build a low-fidelity prototype based on that sketch.
A prototype, even the low-fidelity one, demands a more significant investment, and designers
shouldn’t (and often can’t) produce as many prototypes as sketches.

Getting to know UI / UX for Mobile AppsDevelopment
106

Figure 56: Paper prototype

How to sketch 101

Now that you know why sketching should be a part of your design process, let’s talk about how
to sketch. While there are no hard-and-fast rules, it’s worth remembering a few key points
essential to producing decent sketches.

Before you start sketching

Tools
The great thing about sketching is you don’t need to buy anything fancy or expensive. Basically,
all you need are some pens and paper.

Getting to know UI / UX for Mobile AppsDevelopment
107

Pens. You should get yourself some good pens
with different thicknesses, and a marker pen. I
recommend purchasing the Sakura micron
0.2mm / 0.5mm for creating fine lines and
details, a Sharpie permanent marker for
thick lines, and a highlighter that will be used
to make elements pop in your sketches.

Paper. While it’s possible to create decent
sketches using regular office paper, I suggest
buying dotted paper. Dotted paper will help you
draw your shapes and layouts more accurately.

• A quilting ruler. This lets you quickly draw a
series of lines that are offset by a set
A folder. Paper is a relatively fragile substance, distance from each other.
and paper sketches can be easily damaged. A
simple folder will help you keep them safe.

Getting to know UI / UX for Mobile AppsDevelopment
108

Paper trays. Paper trays will help you sort
papers. I recommend purchasing a triple letter
tray and using it in the following way: one tray
for clean paper, one tray for unfinished sketches,
and one tray for the finalized sketches.

•

UI stencils. Stencils are great for refining
possible solutions. They can be a beneficial tool
if you plan on creating a paper prototype from
your sketches.

A sketchbook. A sketchbook is a small notebook
that you can carry with you to keep a record of
your designs. By taking a sketchbook with you,
you’re able to capture your idea on paper at any
time.

Getting to know UI / UX for Mobile AppsDevelopment
109

Define your sketching goal

Before putting pen to paper, it’s essential to set your aim. You should take two crucial
moments into account:

• Define what you need to draw. Decide what you want to draw, whether it’ll be a
fragment of your design or a series of screens that represent a user flow. Do you want
to generate different options for one particular screen, or design a user journey that
includes a number of screens? This will help you keep your focus.

• Decide whether you are going to show your sketches to your peers/stakeholders or
not. This will help you determine the level of detailing you need to achieve with your
sketch. For example, if you are sketching for yourself, you don’t need to worry about how
sketches will look to others as long as the information is clear to you. However, if you plan
to show your sketches to stakeholders, you’ll likely need more details and refinement in
your sketch (other people should be able to understand what it’s all about).

What to do during sketching

• Warm up
Shake your hands out before sketching. This will help to relax your wrists. Warm-up by drawing
basic shapes such as lines, circles, and triangles.

• Avoid getting bogged down with a single idea
Sketching is all about ideation. Follow the rule “breadth before depth.” Generate as many
ideas as possible and choose the most promising ones.

• Keep sketches as simple as possible
The key to sketching is speed and simplicity. Leave out all non-essential details and
decorations. Always go for the simplest possible sketch to prove that your concept is working.

Getting to know UI / UX for Mobile AppsDevelopment
110

• Set a timer for the activity
Setting time constraints using a timer can help you stay focused on your goal. When you decide
you’re going to spend just one hour on sketching, it helps you spend this time more efficiently.
When you’re practicing sketching during workshops or brainstorming sessions, try to use a
technique called “Crazy Eights.” Originally proposed by the GV team in their book on design
sprints, this technique involves drawing eight sketches in five minutes.

Figure 57: Crazy Eights Technique
• Add titles and numbers to your sketches
Make a habit of titling each sketch. This will make it easier to differentiate between different
sketches and refer to a particular example later on. Adding titles is extremely important if you
work on many parts of an app simultaneously.

Getting to know UI / UX for Mobile AppsDevelopment
111

Figure 58: The title will help you understand what a sketch represents.
Numbering your sketches will help you order them, and it will be much easier to combine them
into an interaction flow later on. Numbering may also be useful during discussions (especially
online discussions), as colleagues can simply mention a sketch number and it’ll be immediately
clear which sketch they mean.
• Use arrows to connect sketches
Apart from pointing to specific elements in a sketch, you can use arrows to illustrate direction,
interaction flow (i.e. what happens when a user clicks on a button), a sequence of events, or
movement (i.e. indicating gestures or simple animated effects).

Getting to know UI / UX for Mobile AppsDevelopment
112

Figure 59: Use arrows to define interactions.
• Add annotations and notes
Annotations are explanations located next to parts of a sketch that provide additional insight
and clarify the meaning of individual elements.
Here are a few simple recommendations:

• Annotations should be short and sharp. A sketch isn’t a specification, and you don’t
need to describe how something would work in detail.

• Write your annotations using a contrasting color.

Getting to know UI / UX for Mobile AppsDevelopment
113

Figure 60 : A red color is used for annotations and notes.

After you finish sketching

• Create a digital copy of your paper sketches
Having a digital copy of sketches prevents you from carrying a pile of papers from meeting to
meeting. It also makes it easier to share your sketches with team members. Simply scan your
sketches with a tool like Evernote or Dropbox and provide a permalink to your team members
or stakeholders.

Getting to know UI / UX for Mobile AppsDevelopment
114

Figure 61: Scanning a sketch
• Review and evaluate your sketches
At the end of a sketching session you’ll likely have a few variants of a design. Now, you need
to choose which ideas are worth pursuing. Think about the strengths and weaknesses of each
variant. Pick the one or two variants to best solve the problem. In some cases, you will need
to combine ideas or parts of ideas into a single winning concept.

• Ask for feedback
Encouraging feedback from your team members is the best way to improve your work. Share
your work with your peers and ask them what they think about your sketches. Focus on these
key points:

• Does the sketch make sense to them?
• What do they like and why? What don’t they like and why?
• What questions have they asked (i.e. what was unclear to them in your sketch)?
• The feedback you gather will help you iterate on your concept. Remember to make

your sketches easily visible to your colleagues. One of the most significant benefits of
using a pen and paper to sketch instead of digital tools is that you can stick your work
on the wall for all to see.

Getting to know UI / UX for Mobile AppsDevelopment
115

Figure 62 Sketches are for sharing. Pin your sketches to walls to share your ideas with others.

10 pro tips to improve your sketches
1. Overcome your artist’s block

The chances are, when reading about sketching, you might think, “Sketching won’t work for
me. I’m really bad at drawing.” If you’re avoiding sketching because you have doubts about
your art skills, rest assured you’re not alone. You need to overcome your fear of being judged
by the quality of your drawings. It’s helpful to remember that the goal of sketching isn’t to test
your arts and crafts skills, but to explore different ideas and then communicate them to others.
Thus, as long as you can draw lines, boxes, arrows, and circles, you can sketch.

Getting to know UI / UX for Mobile AppsDevelopment
116

2. Practice makes perfect

Sketching is a skill, and just like any other skill, the more you do it, the better you’ll get at it.
Get into the regular habit of sketching and this will help you level-up your skills.
If you just recently started sketching, practice drawing basic shapes like lines, triangles, and
circles. Those elements are the building blocks of any sketch. By nailing down those frequently
used elements, you’ll establish an excellent foundation for your sketches.

3. Don’t focus on the visual quality of your sketches

Focusing too much on the visual quality of your sketches can hinder you. When you focus on
how “pretty” your sketches should be, you can easily forget what problem you’re trying to
solve in the first place. Remember, in most cases you’ll throw your sketches out in the end, so
they don’t need to be highly polished. Clarity should be your top priority. Thus, instead of
thinking, “Is this sketch pretty enough?” think, “Is this sketch clear enough?”

4. Use colors and shadows for purpose

One of the basic rules of sketching is that it’s better to create your sketches in grayscale to
prevent being distracted by colors. At the same time, it’s possible to use a limited number of
colors (say, one or two contrasting colors) to either draw attention to specific elements (i.e.
make certain elements pop out) or for use as visual signifiers (e.g. you can use blue for links
and other interactive elements). If you decide to use colors, make sure you use them
consistently.

Similar to colors, adding shadows to interactive elements (such as buttons) will help people
better understand the meaning of your elements.

Getting to know UI / UX for Mobile AppsDevelopment
117

Figure 63 : A shadow makes it clear that an element labeled “Enter” on your sketch is a button.

5. Learn to draw long lines

When sketching long lines, consider moving your arm and pen with your shoulder rather than
with your elbow or wrist. This will allow you to draw longer and straighter lines. As a bonus,
this technique easily translates to drawing on a whiteboard.

6. Sketch in layers

This is a great tip from the article The Messy Art of UX Sketching by Peiter Buick. Peiter advises
starting with a light grey marker (20-30 percent grey) and using a darker pen for each
successive layer. When you’re ready to finalize the sketch, you can use a 60-percent grey pen.
This technique allows you to create your sketch step by step, outlining the structure of your
sketch first, and adding required details after.

Getting to know UI / UX for Mobile AppsDevelopment
118

7. Rotate the page

Professional sketchers are used to turning the page all the time to get the best drawing position
they need. This helps them get straight lines with the least amount of effort. Thus, next time
you need to draw a vertical line and find it difficult, simply rotate the page 90 degrees and
draw a horizontal line instead.

8. Use templates

Using a template while sketching will save you time. You won’t need to redraw common
elements each time you sketch a new layout.

Figure 64: Using Template to Sketch
You can also use a photocopier to quickly create templates from existing sketches.

Getting to know UI / UX for Mobile AppsDevelopment
119

9. Try digital sketching

While sketching implies using a pen and paper, it’s also possible to sketch using digital devices,
such as an iPad Pro with an Apple Pencil. Digital sketching using the iPad Pro eliminates eraser
dust and stacks of used paper. It might be preferable for people who often switch between
working at an office and working directly with clients because it is easier to organize your
sketches.

Figure 65 : Sketches created using an iPad Pro look like they were done by hand with a pencil.

10. Experiment

When it comes to sketching, there’s no such thing as a one-size-fits-all style. Everybody has
their own sketching style. But if you are just starting to sketch, you might not know what your
style is. Don’t worry. After a while, you will find out which ways of working suit you best. To
get there, you’ll need to experiment and constantly try new techniques. Thus, don’t be afraid
to try out different formats, styles, and methods.

Getting to know UI / UX for Mobile AppsDevelopment
120

Conclusion

Sketching is a time-tested approach to explore, refine, and communicate your design ideas.
It’s a critical element of crafting excellent user experience. Great sketching skills ultimately
save you a lot of time, help you think clearer, and find better solutions to problems.

Getting to know UI / UX for Mobile AppsDevelopment
121

The 5 Best Places to Find Free
Storyboard Templates

By Marissa Sapega, Updated On August 18, 2021
Sources Link: https://careerfoundry.com/en/blog/ui-design/free-storyboard-templates/

The old adage “don’t reinvent the wheel” applies to a variety of situations—including building
storyboards. Having a storyboard template, you can modify to suit your needs and make your
own is a clear time-saver. And storyboard templates are so versatile; if you find a good one, you
can use it repeatedly in different situations. Here, we’ve put together the top storyboarding
templates that you can use for a variety of projects.

However, before we share our findings, let’s review what a storyboard is and when you’d use
one just in case you’re new to this.

What is a storyboard?

Imagine you’re explaining a complicated aspect of your job to a friend. You attempt to break it
down into easy-to-understand elements, but soon you realize your friend is giving you the
thousand-yard stare—you’ve lost them.

Now, consider how you’d explain the same concept if you had to illustrate it in sequential images.
It may take a little more time and effort, but chances are, images would help you convey what
words could not. Congratulations, you’ve just created a rudimentary storyboard! In its simplest

Getting to know UI / UX for Mobile AppsDevelopment
122

form, a storyboard is the visual representation of a script or concept, broken down into images
that communicate a story.
You probably already know that a storyboard is critical for the film and advertising industries, and
they’re also used by designers to create animations. When making movies, filmmakers need to
plan scenes with incredible granularity to ensure nothing gets lost in translation when they turn
a script into the barest foundation of an actual film. But as you can see from the previous
example, storyboards are useful for more than just planning movies. You can also use them for
business pitches and educational purposes.

The best free storyboard templates

Here’s our round-up of the internet’s top storyboard templates that will make your life easier.
Oh, and did we mention they are all free?!

1. StudioBinder

Figure 66: StudioBinder

Getting to know UI / UX for Mobile AppsDevelopment
123

StudioBinder’s storyboarding software is unparalleled, but it may intimidate newbies or dissuade
individuals on a shoestring budget. To support these folks, it offers a wealth of free storyboarding
templates in different formats.

Do you prefer the old-fashioned pencil-and-paper variety? Print out StoryBinder’s PDF
storyboard templates. Are you a die-hard Microsoft fan? It offers Microsoft
Word and PowerPoint options. Photoshop storyboard templates are also available for
digital artistes.

All the storyboard template downloads are available in several versions with varying numbers of
panels (up to 16) and orientations (both portrait and landscape). Each frame includes room for
notes, scene and shot numbers, and shot size.

Getting to know UI / UX for Mobile AppsDevelopment
124

2. Boords

Figure 67: Boords
Another high-quality storyboarding software, Boords has taken it upon itself to provide aspiring
filmmakers and entrepreneurs free storyboard templates they can use to take the vision they
have in their head one step further towards fruition. Similar to StudioBinder’s options, Boords’
storyboard templates are available in PDF, PowerPoint, Photoshop, and Microsoft Word
formats.

Boords’ freebies are gated (meaning you need to provide your contact information before you
can access them). Additionally, the templates are far less extensive than StudioBinders’; you’re
limited to a landscape-oriented six-frame template, regardless of which format you download.
Still, an option worth checking out as you search for the best storyboard template!

Getting to know UI / UX for Mobile AppsDevelopment
125

3. Printable Paper

Figure 68: Printable Paper

What these low-budget storyboard templates lack in aesthetics they make up for in sheer variety.
Not only does Printable Paper offer multiple panel grid options (2×1, 2×2, 2×3, etc.), it also has
templates with different aspect ratios and paper sizes! Though these storyboard templates lack
frills like grid lines for notes or helpful prompts for scene and shot numbers, they get the job
done efficiently. And isn’t that the most critical factor?

Getting to know UI / UX for Mobile AppsDevelopment
126

4. Begindot

Figure 69: Begindot

Begindot’s storyboard templates aren’t limited to the traditional gridded layouts. While some
follow the typical design and feature panels with explicit space for notes, others are better suited
to different parts of the storyboarding process, such as planning the transition of a script to a
visual format. For example, one of Begindot’s storyboard templates is for notes only (no visuals)
and forces you to map out your scenes’ participants and dialogue.

Another particularly detailed film storyboard template only has room for a single scene yet
includes compartments for the set plan, scene description, action, dialogue, light, sound, and
other essential filmmaking aspects.

With a grand total of 30 unique storyboard templates that you can download in multiple formats
(PDF, Microsoft Word, etc.), Begindot’s variety will surely keep users coming back to find the
perfect storyboard template for their projects.

Getting to know UI / UX for Mobile AppsDevelopment
127

5. StoryboardThat

Figure 70: StoryboardThat

If you need a little help or inspiration for a promotional video you’re creating, StoryboardThat is
for you. It offers several digital templates that will kickstart your inner advertiser and get your
creative juices flowing. Each objective (brand reinforcement, customer journey, demo, customer
testimonial, and animated video) offers two different versions. One serves as an example that’s
already pre-populated with images and dialogue; the other is a blank template that includes
prompts of what you should include in each frame.

For example, its animated video storyboard template is simple yet effective. In six scenes, it
manages to introduce a happy character, a barrier to the character’s ongoing happiness, how
your product can help the character overcome the barrier, and more details on the product. If
you’re an advertising veteran, coming up with this type of narrative is child’s play, but for newbies
and entrepreneurs, having a template to work off of can be a real help!

The only thing to consider with StoryboardThat’s free storyboard templates is that you can only
use them on the StoryboardThat website; they are not available to download. Sharing them in

Getting to know UI / UX for Mobile AppsDevelopment
128

this way cleverly forces you to use the software first-hand in order to take advantage of the
freebie (a tactic that StoryboardThat clearly hopes will convince you to buy its product).

Getting to know UI / UX for Mobile AppsDevelopment
129

The 7 Best Storyboarding
Software Tools for 2022

By Marissa Sapega, UPDATED ON NOVEMBER 23, 2021

Sources Link:

Though they are usually associated with movies, storyboards can serve many purposes. People
frequently use them outside of the film and advertising industry in educational settings and for
pitching business concepts. Given their versatility, knowing what software you can use to create
one is quite advantageous!
In this article, we’ll provide a brief overview of how to create a storyboard. We’ll then share the
top seven storyboarding tools you can use to build your own. If you’ve ever wanted to develop
storyboards for personal or business reasons, keep reading!
First up: What is a storyboard?

What is a storyboard?

We’ll start with the fundamentals in case you aren’t familiar with storyboards. At its most basic,
a storyboard is a way to visually convey a script or concept. Creators distil the narrative or ideas
into a chronological sequence of drawings called “panels,” which can be analogy drawings, digital
illustrations, or even stock photography or images.

Getting to know UI / UX for Mobile AppsDevelopment
130

How to build a storyboard

Note: This article only includes a cursory overview for creating a storyboard, but you can follow
our step-by-step guide to storyboarding for more in-depth instructions.

Here is a high-level overview on how to build your own storyboard:

• Mark up your script. While you may have a clear vision in your head for your movie,
jotting down notes (anything from “mood” to camera angles to the type of shot) can help
crystallize it and highlight any gaps in your plan.

• Draw your panels. Known as “scamping,” crafting your scene illustrations will make up
the bulk of the time spent on creating your storyboard (especially if you don’t have a
strong vision for how it will play out).

• Arrange your panels sequentially and add details. This stage is where you can evaluate
your scenes’ flow to determine if it makes logical sense and adjust them (or add new ones)
as necessary. If desired, you can also get into the details of camera angles, shot types,
voiceovers, and more.

Building a storyboard is not terribly challenging in theory, but it does require a strong vision.
Otherwise, you’ll find yourself facing disjointed scenes that don’t flow smoothly or worse, blank
panels that no number of sketches seem suitable for.
Now that you know how to build a storyboard, let’s look at the tools you can use to make the act
infinitely easier!

Getting to know UI / UX for Mobile AppsDevelopment
131

The 7 best storyboarding software tools

Let’s make one thing clear: there is no single best tool or software for building a storyboard. Each
one has its disadvantages and benefits (including plain ole pencil and paper!), and you’ll need to
evaluate your needs before deciding which one will suit you best. It comes down to what you
value most and are willing to live without.
Here are the top seven storyboarding software we’ve found:

1. FrameForge

FrameForge is not messing around. Thanks to its jaw-dropping capabilities, this award-winning
storyboard software (it won an Emmy®!) is the go-to for professional movie-makers. With
FrameForge, you can:

• Add characters and props through a drag-n-drop interface
• Manipulate actor and object positions (including facial expressions)
• Create data-rich, 3D storyboards that include information such as focal length, camera

height, camera angle, etc.
• See how a scene will look from any camera on the set as well as the type of shot (e.g.,

zoom, crane and dolly, pan/tilt, etc.)
• Craft your own background with pre-populated outdoor objects like streets, greenery,

sidewalks, and even weather conditions!

As you can see, FrameForge is not for individuals looking to whip up a quick storyboard in a few
hours. However, it’s a great tool for professional (and aspiring professional) filmmakers.

Price: $500 for Core Edition (or subscribe for $12.99/month); Pro starts at $799 (annual
subscription is $25.99/month)

Getting to know UI / UX for Mobile AppsDevelopment
132

2. Storyboarder

This aptly named tool allows you to create quick-n-dirty storyboards. While it’s a very simple
application devoid of any bells and whistles, it enables you to whip up rough sketches, move
panels around, and add notes to each panel. Depending on how much effort you put into your
drawings (which you can also modify in Photoshop for a more polished look), your storyboard
can take a few hours or several days to complete.

It may not be as flashy or feature-rich as some of the other options on this list,
but Storyboarder gets the job done, and you can’t beat the price!
Price: Free

3. Boords

Boords is another user-friendly storyboarding software with a low learning curve. It offers
templates (choose from Photoshop, Microsoft Word, PowerPoint, and others) to get you up and
running quickly, secure online sharing for collaboration, one-click animatics, and dynamic frame
number updates as you add and move panels around.

You can illustrate your scenes from inside Boords or import images, include camera movement
indicators, and dynamically port your script into the panels. It even has the ability to turn your
storyboard into an animation in a single click.
Though a bit pricey (depending on your needs), it’s a very robust platform. And hey, 200,000
users can’t be wrong, right?

Price: Starting $36/month for three users; 50 users will run you $120/month

Getting to know UI / UX for Mobile AppsDevelopment
133

4. Plot

If you’re looking for storyboarding software that’s easy to use, offers collaboration features, and
is easy on the wallet , Plot is for you. Simply add your script—which you break down into scenes—
then add images to each panel. You can supplement the script with notes, such as an explanation
of what’s happening in the scene, camera angle, type of shot, etc., and it’s effortless to add in
new scenes or split your script using a shortcut.

Not an artist? No worries. Take advantage of Plot’s stock clip art or import images from other
sources. Once you’ve finished your first draft, you can easily share it with stakeholders; Plot
enables commenting and editing for all users who have access to a storyboard.

Price: Starts at $10/month

5. MakeStoryboard

This uncomplicated storyboarding software is perfect for newbies or casual storyboarders. It
includes basic features like the ability to sketch out your scenes or upload images (but doesn’t
include any stock or clip art for you to choose from), customizable frames with automatic frame
numbering, and aspect ratio sizing. Rearrange your frames as needed, add descriptions, and
export to a PDF when it comes time for sharing.

Another one of MakeStoryboard’s convenient features is its ability to keep multiple versions or
backups of your work in progress, just in case you realize halfway through that you’re headed in
the wrong direction and need to backtrack.

Simple yet feature-rich, MakeStoryboard is a great option for a variety of use-cases and
professional situations.

Price: Free (limited features and storyboards); starts at $12/month for the Pro version

Getting to know UI / UX for Mobile AppsDevelopment
134

6. StudioBinder

StudioBinder delivers a feature-rich interface without being overly complex. It offers the usual
storyboarding must-haves, like the ability to import images, move panels around, and dynamic
frame numbering. However, it also provides the option to add storyboard specs with ease
(choose from a menu of clickable options like your shots and equipment).

One of its most innovative features is its ability to auto-organize scenes after you’ve imported a
script, to which you can add storyboards. Collaborators can add comments at will, and after
you’ve finalized your storyboard, you can turn it into an animatic slideshow, complete with basic
movements.

The Professional and Studio versions also offer additional goodies like a Gantt-style production
calendar and custom branding. Note that only the Studio plan allows for collaboration.
StudioBinder does require a bit of time to learn how to use, but it’s well worth your effort for the
results you’ll be able to achieve, especially if you’re part of a larger team.

Price: Indie (limited features and 10 projects) for $29/month; goes up to Studio (full feature
access and unlimited projects) for $99/month

Getting to know UI / UX for Mobile AppsDevelopment
135

7. Visme

Visme enables you to create presentations, videos, infographics, and more. While not strictly
storyboarding software, it does have the advantage of having a free option (and reasonable
pricing for paid versions), and it’s pretty straightforward to create a storyboard thanks to its
simple, user-friendly interface.

Using the video option, you can select a template from which you can create a storyboard. Then
use Visme’s stock photos or upload images of your own for each panel and add “presenter notes,”
which can include all the details you want about the camera shots, angles, timing, aspect ratios,
script, etc. To share it, you can download your storyboard as a PDF or share it with teammates
online.

If you’re looking for a reasonably powerful tool that does more than help you create storyboards,
you should definitely consider Visme.

Price: Free (5 projects, limited templates and can only download files as JPGs); goes up to
$29/month for full feature access.

Getting to know UI / UX for Mobile AppsDevelopment
136

What Is Prototyping?

Justin Morales Jul 20, 2021
Sources link: https://xd.adobe.com/ideas/process/ui-design/what-is-prototyping/
Prototyping9 is a process in which design teams ideate, experiment with, and bring concepts
to life, ranging from paper ideas to digital designs. At its core, a prototype is an early sample
of a design that allows users to visualize or interact with it before a final product is developed.
It is the fourth step of the design thinking process10, followed by usability testing.

A key characteristic of prototyping is that prototypes are created without a single line of code.
There are plenty of prototyping tools 11to help designers link together artboards, creating an
interactive, clickable experience without the need of a developer. This helps decrease costs, as
designers can create clickable prototypes without the need for development efforts. In other
words, it’s smart to test your prototype with users and stakeholders in order to iron out any
mistakes before you invest the money, time, and human capital on actually engineering a
design solution.
It is important to note that prototyping can be used at various stages of the design process. It
is a necessary tool to validate ideas, whether it be at the beginning stages of the design or

9 Prototyping is an experimental process where design teams implement ideas into tangible forms from paper to
digital. Teams build prototypes of varying degrees of fidelity to capture design concepts and test on users. With
prototypes, you can refine and validate your designs so your brand can release the right products.
10 Design thinking is a methodology that attempts to solve complex problems in a creative and user-centric way.
11 Prototyping tools are the tools to help you make product creation faster and much more effective. Prototypes
demonstrate your ideas, and in doing so can change the way you design. Today's clients are looking for interactive
prototypes. These prototypes give you an overview of your design, interactions and ideas.

Getting to know UI / UX for Mobile AppsDevelopment
137

halfway through a design. Testing prototypes lets you benchmark progress and usability before
moving forward with development.

Reasons for prototyping

Prototypes are an interactive experience created without code to help test out concepts before
launch. With prototyping, designers can explore alternative design solutions with zero
development effort. They can also test their prototypes on real users to discover usability
issues before releasing a final product. This process helps designers save a lot of time, money,
and effort throughout the entire design and development lifecycle.

Some reasons to prototype include:
➢ Exploring new ideas. Prototypes allow designers to experiment with various ideas and
solutions. They give the designer freedom to test multiple potential scenarios, while
adjusting along the way to optimize the usability of the end product.

➢ Discovering problems. Prototypes are a great way to further understand the problem
the user is facing. They empower designers to better understand the product or system
by literally engaging with them and observing what works and what doesn’t.

➢ Identifying usability issues. Creating prototypes for users to interact with is a great way
to identify issues surrounding the usability of your product. This will allow the designer
to make necessary changes prior to development.

➢ Engaging stakeholders and end users. Prototypes allow designers to engage with
stakeholders and end users, which gives them the chance to become involved in the
process and feel a sense of ownership. This will potentially aid in their “buy-in” and help
push the concept forward faster.

Getting to know UI / UX for Mobile AppsDevelopment
138

➢ Selling new concepts. Prototypes are a great way to inspire, motivate, and ultimately
“sell” design decisions to internal and external stakeholders. They are also a great way
to inspire markets towards radical new ideas and processes, as they require little effort
to exemplify something potentially extremely costly to produce.

What are different types of prototyping?

Prototyping can range in method and technique, which is often referred to as low, medium, or
high fidelity. Fidelity refers to the level of detail and the functionality of your prototype.
Typically, the higher the fidelity, the more effort and cost it takes to create. Different scenarios
call for different levels of fidelity, and there are pros and cons of each. Best practices include
knowing what each includes, as well as how and when to use them.

Figure 71: A mobile wireframe in low, medium, and high fidelity.