Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
For this practice session, you’ll be creating a digital wireframe in Adobe XD for the primary screen of a sketching application. This app gives users the ability to make quick, shareable, black-and-white sketches using their finger on a touchscreen.
Personas
Empathy Maps
User Flows
Sketches
Wireframing Software
Further Reading
[MUSIC]
0:00
Hi, my name is Anwar.
0:09
I'm a designer, a developer and
a teacher at Treehouse.
0:11
For this practice session, you'll be
creating a medium-fidelity wireframe for
0:15
the primary screen of
a sketching application.
0:20
This app gives users the ability to
make quick, shareable, black and
0:23
white sketches using their
finger on a touchscreen.
0:28
Take a look at the project files,
and you'll see personas,
0:32
empathy maps,
0:39
and user flows.
0:43
Before you start, you'll want to make
sure you understand the goals and
0:46
frustrations of your users.
0:51
In this case, it looks like Traveler Traci
prioritizes getting her ideas
0:54
down quickly, while Artist
Anastasia values the ability
0:59
to refine her sketches and
collaborate with other artists.
1:04
You'll also want to have a set
of sketches to refer to.
1:10
Here is a series of eight sketches
I completed in eight minutes
1:16
using a process called Crazy Eights.
1:20
My favorite ideas are the bottom
navigation from the fifth sketch and
1:24
the top navigation from the sixth sketch.
1:29
A solution that allows plenty
of area for sketching
1:33
but keeps the options most
critical to Traveler Traci and
1:37
Artist Anastasia available at a tap.
1:41
I'll combine these two
ideas in my wireframe.
1:45
In terms of what tools you'll need
to complete this practice session,
1:51
some designers like to complete their
wireframes as a carefully executed sketch.
1:55
This might make sense if your
next stage is a paper prototype.
2:02
That is, you'd like to test users
early in the design process
2:07
on paper before opening
up any digital tools.
2:12
On the other hand, perhaps you're ready to
work in a vector program such as Balsamiq,
2:17
Figma, Sketch, or Adobe XD.
2:25
In my case, I'm going to use Adobe XD and
create a single mobile screen for
2:33
my sketching app using the best
ideas from my sketch phase.
2:40
I want to give users options for choosing
and adjusting drawing tool preferences,
2:46
saving and sharing files, and
undoing and redoing previous steps.
2:53
Your wireframe should be grayscale,
and should indicate navigation and
3:00
content placement using simple
shapes like rectangles.
3:05
To label parts of the page and
interface elements, I recommend choosing
3:11
a sans-serif typeface that will
remain legible at even a small size.
3:16
Take your time, use the research in
the Teacher's Notes to guide you and,
3:23
if you have them,
your sketches. And have fun!
3:28
You need to sign up for Treehouse in order to download course files.
Sign up