Bummer! You have been redirected as the page you requested could not be found.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Wireframing!
You have completed Introduction to Wireframing!
Preview
Let's take a look at some different ways to share your wireframes to get positive and constructive feedback.
Tools
- Scanner Pro iOS app: Install via App Store
- InVision: The digital product design platform powering the world’s best user experiences
-
InVision Documentation & Support
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
When you've finished iterating on
the wireframes, review your drawings and
0:00
choose your top choices.
0:04
When you have a couple favorites,
it's a good idea to take photos of them,
0:06
because we want to share them
with our team for feedback.
0:10
Also, we may decide to continue
improving them in a design program.
0:13
There are a few different ways
to digitize your drawings.
0:18
You can use a camera like
the one on your smartphone, or
0:21
you can use a scanner in your home, local
library, or nearby office supply store.
0:24
My favorite method is using
an app on my smartphone.
0:30
I prefer Scanner Pro for iOS.
0:33
There are similar apps for
Android as well.
0:36
Scanning apps like this one do a great
job at automatically square in the edges,
0:39
removing the shadows, fixing the contrast,
and removing the color from the lighting.
0:43
Once I have a good photo, I email it to
myself so I can get it on my computer.
0:49
If you'd like to continue working on
the wireframe within your favorite design
0:54
program, import the photo
of your drawn wireframe.
0:58
And either draw on top of it in a new
layer, or put it next to your artboard for
1:01
reference as you recreate
it in a design program.
1:05
Otherwise, the next step is to share
it with your team and stakeholders for
1:09
feedback.
1:13
I like to use InVision
as a collaboration tool.
1:13
First, if you haven't done so already,
create a free InVision account.
1:17
From the project screen,
click the add button.
1:22
Choose prototype as the project type.
1:26
Add a project name.
1:29
Then for the device,
you have a couple options.
1:36
Since we have wireframes for a mobile app,
1:40
we could choose an iPhone or
Android device.
1:42
And that would display
the wireframe on a mobile phone.
1:45
But, since these are early stage
wireframes, I don’t like to pretend these
1:49
are polished at all, and
often the wireframes are not to scale.
1:53
So to avoid any confusion about
the level of feedback I’d like,
1:59
I choose Desktop web, regardless of
the actual device type I’m designing for.
2:04
If you're creating wireframes later on
that specifically focus on the form factor
2:10
of the device you're targeting,
2:15
then it would make sense to see it
within the context of the device.
2:16
For now, let's keep it looking rough.
2:21
Choose desktop, web and click get started.
2:24
Drag your image onto
the light gray background.
2:30
Add your teammates as
collaborators to your project.
2:34
You will receive an email when a comment
has been posted to your wireframe.
2:37
There is more you can do with InVision,
but we'll touch on that later.
2:42
Now that you've seen the process,
2:46
let's explore the pros and
cons of wireframing on paper.
2:48
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up