This practice will be retired on December 31, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Wireframing (2020)

Well done!

You have completed Practice Wireframing (2020)!

Sign up for Treehouse Back to Library

Problem

3:31 with Anwar Montasir

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

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up