Rapid Prototyping 1 of 3: Sketching & Paper Prototyping Video Lecture | Rapid Prototyping for Entrepreneurs: Build a Quick Demo - Software Testing

what is a prototype the way I think
about it a prototype is an experimental
model of an idea it's a way to give our
ideas a presence that we can put in
front of somebody else to see if our
idea has value as a design researcher
here at Google I put ideas in front of
people who use our products all the time
is your idea ready to be put in front of
people yes in fact in this video series
we're share with you several types of
prototyping methods that you can use to
get your ideas in front of people as
soon as possible now how will you know
when it's right to show your idea to
someone else the fidelity of your
prototype should match the fidelity of
your thinking so don't be afraid to
share your prototypes early and often to
get feedback to guide your next product
design decision we put together a series
of three videos to introduce you to
various techniques we use at Google
there's sketching and paper prototyping
digital prototyping with form and
principle and native prototyping so to
get things started let's take a look at
how teams at Google take an idea in
their head and make the first stroke of
the pen on paper hi my name is Melissa
Powell and I'm on Google's developer
relations team I get to work with
designers developers and entrepreneurs
both inside and outside of Google to
solve some pretty tough design
challenges and I'm Miriam Sheikh
a senior a user experience designer at
Google I design add experiences to make
them better and simpler to use for
products such as Google search Adwords
and double-click and we're here to talk
to you about sketching and paper
prototyping I often work in digital
prototyping and graphic design tools to
create high fidelity mocks like these
but even at a high tech company like
Google we generally start the design
process what's something that looks a
lot more like this by the end of the
video you should feel confident knowing
when to use sketching a paper
prototyping for types of sketches we
commonly use at Google and three primary
benefits of paper prototyping sketching
is a fundamental part of the design
process and can help you make key
decisions bow it design it can be as
simple as drawing on a piece of paper or
even a post-it note or you can use any
of these common materials to create a
more realistic sketch and share your
sketch with others sketching can be used
in nearly any stage in the product
design process
you can use different types of sketches
depending on who you're working with and
what you need to communicate sketching
is great when thinking through all of
the initial ideas running through your
head you can sketch to outline the steps
in a user flow explore a variety of
layouts and to show the basic app
structure or what we commonly call a
wireframe once you've agreed on the
rough layout we usually create higher
fidelity sketches with details such as
buttons images and color at this point
you may decide to transfer your sketches
to your digital tools but the more you
can flush out your ideas on paper the
faster you'll move on your computer
during mint development and even post
launch you may need to rethink your
design and want to quickly visualize new
ideas so you might bust out a pen and
paper even if you already have high
fidelity digital prototypes it can be
faster to communicate and validate your
new ideas through sketches before you
have to make those changes to your
digital prototype in addition to
sketching another low fidelity option is
paper prototyping today I'll cover how
paper prototyping can help you think
through key user interactions use color
more purposefully and visualize
elevation and shadows and let me give
you some practical paper prototyping pro
tips as you can see with the sketch that
Miriam created it's easy to visualize
the user flow but it's a little bit more
difficult to understand the user
interactions between the screens you can
use your paper prototype to simulate
interactions for example if we look over
here I've pre created some paper
prototypes and we can explore what
happens when I click on an individual
button here we have the floating action
button or the quantity and we can
actually have it drop down and see what
happens when a new screen appears and
we're looking at the checkout cart we
can also select the address and a pop-up
window will appear to avoid carrying
around your paper prototype from meeting
to meeting record these interactions
with your phone or you can create an
animated gif by taking a few stills
and throwing it into google photos Auto
awesome feature it's just easier to
share your ideas of people that way
another pro tip
to print out existing screens instead of
redrawing all the common elements over
and over the goal here isn't to test
your arts and crafts skills but to
explore the interactions and natural
transitions between screens and since
we're working with paper you can also
explore different principles of material
design such as color elevation and
shadows material design is google's
visual design language that synthesizes
classic principles of good design with
the innovation and possibility of
technology and at the end of the day it
was inspired by the study of paper and
ink so why not get back to basics using
paper and ink a good place to start is
to think through purposeful and
consistent use of colors the material
design spec has a lot of great
information about selecting Hughes and
saturations so be sure to explore the
full material design color palette at
the link in the description below and be
purposeful with your use of color not
just on one screen but throughout the
app in general we recommend choosing one
primary color which is most commonly
used for components such as the app bar
or background and one or perhaps two
accent colors for anything that you want
to grab the users attention such as the
fab or to indicate that a tab has been
selected paper prototyping can help you
think through your purposeful use of
color because as a practical paper
prototyping pro you'll want to reuse the
colors throughout the app not only is
that easier but when this translates to
your final product it will reduce visual
noise for the user making navigation
much easier and because we're working
with physical materials be sure to make
note of how the layers form shadows of
course we have the x axis and the y axis
with material design we're encouraged to
consider and make use of the z axis an
elevation of each sheet you can read
more about elevation and shadows in the
material design spec linked in the
description below as you saw you can use
different types of sketching throughout
the product design cycle to help you
visualize and communicate your ideas in
a lightweight fashion with user flows
rapid sketches and many layout options
wireframes and detailed sketches with
images and text and paper prototyping is
one technique that can help you think
through key use or interactions and
explore material design principles such
as purposeful use of color
elevation and shadows now that you
visualize your ideas on paper you can
shop them around with your teammates or
users to validate your assumptions and
make smarter design decisions you can
translate your sketches into higher
fidelity digital mocks to build a robust
prototype to learn about making a
digital prototype check out the next
video in this series