How I: Use paper wireframing to build native prototypes Video Lecture | "How I" by Google Developers - IT & Software

DAVE CLEMENTS: Hi, I'm
Dave Clements, Head
of Design at Novoda.
DAVID GONZALEZ: Hi, My
name is David Gonzalez,
and I'm Technical
Product Owner at Novoda.
And Novoda is a software
development house,
specialized on Android.
And we're based
in London, Berlin,
and very, very soon in New York.
So we are going to show today
how we use paper wireframing
to build native
prototypes of our apps.
DAVE CLEMENTS: So
initially, we start off
with an idea, which we will
discuss with the client.
Go through persona,
stories, et cetera,
break down the feature
list, and begin drawing.
We work in sketch books, keeping
it really simple, really fast,
so that you can iterate through
those quickly and build up
user journeys with those
images, which we can then
send to the client and have
discussions over those.
OK.
So I start with just
drawing a simple screen.
Let's say I'm doing
a phone layout.
And there's a system
bar and a navbar here.
And yeah, just start
literally scribbling down
basic information.
Put some tabs here.
And we've got an area
here with an image in.
And maybe that's a card
with some bits here,
It's literally as
simple as this,
really rough, not time wasting.
And I might just add the
occasional bit here and there
of sort of this brush pens
to give a bit of depth
so the client know
what's going where
in terms of the hierarchy layer.
OK.
From there, we take the
drawings that we've created,
cut them out, and
pop them on a table.
And we as a group sit down
with designers, developers,
et cetera, and just move things
around, move screens around,
overlay parts of
screens to basically
come up with user
journeys that we feel
are good enough to
show to the client.
From there, we send them
along and wait for feedback.
So we've got these
slices we've cut out,
these pages, these
screens, whatever
you're going to call them.
And we didn't
think, all right, we
need to create user journeys.
So the first screen--
DAVID GONZALEZ: We
have the first--
that was the first
screen, right?
DAVE CLEMENTS: We might
have a navigation draw.
We know that's going
to slide in and out.
So if you don't mind,
we'd hold that back.
DAVID GONZALEZ: Yes,
see that looks nice.
Yeah, it looks nice, huh?
Yeah.
DAVE CLEMENTS: Yeah.
It looks good.
DAVID GONZALEZ: I like.
DAVE CLEMENTS: And next
page, we scroll it unto here.
DAVID GONZALEZ: Where
are we going from here?
We have this.
DAVE CLEMENTS: This is
showing that we can swipe up
and the title disappears.
The tabs lock.
Moving on, we'll click into--
let's just say that one.
This is actually not important
for the moment where we go.
But the point is we're
showing this user journey.
So then we may say,
should we tap this area?
We get this pop up.
Once we've laid these
out, and we've decided,
OK we don't need this,
but this all user journey.
We just simply photograph that.
And then we'll upload that
to say Basecamp or JIRA,
and the client can
take it from there.
And then from there,
we may develop further,
create more user logic
flows, et cetera.
But this is the basic.
DAVID GONZALEZ: So
the third phase, we
got to build a prototype.
So we get all the designs
and all these asset
that we've been cutting out.
We'll put them on a native app.
So we would build an actual
app that the client will use.
And he will use them.
They will play with it.
And they will decide internally
if they like it or not.
And then if they don't,
we just do it again.
Yeah, now what we
would do is when
we have these images
based Basecamp or on JIRA,
we'll put these on a
very simple layout.
Here we have a frame layout.
And the other thing we
do is just inflate it
and get some stuff
like the images
and the pictures and the
text from the headline.
And very easily displayed
just put it here.
As you can see, you can
have a very quick image
of how it's going to
look like on the app.
So now this is--
what we're see here
is the first screen of
the app in this case.
And this is a very simple
logging and [INAUDIBLE]
activity.
And in this case as
you can see, it's
just very simple
layout, which is
showing frame layout of buttons.
Everyone single one
has the listener set.
And then it is a very
simple sketch UI.
So in this case, when we
click on the login screen--
on the login button, we will
go to the list of articles
that we just saw before.
And what we're
trying to do is here
is when the user takes one
of the items on the list,
it will go to the article.
And the article is just
a very single fragment
with a very simple
layout when they can just
see images and text.
And as you can see
in this case, it's
just a scroll view
with a linear layout.
And two items, which
are frame layout, which
is the image and the text.
And with this, we pretty much
build the whole UI for now.
So the only thing we need to
do is just build the project,
compile it, and use the APK.
So what this allows us is to
have a very fast interaction
with the client and very fast
iterations on the process.
And this will make
us save a lot of time
of developing and
drawing things.
And that will be a much better
outcome for the project.