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