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