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

Introduction to Wireframing

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Pros and Cons of Wireframing on Paper

1:54 with Hope Armstrong

There are multiple methods for wireframing, and paper is just one of them. Here we will go over some of the positive and negative characteristics of the hand-drawn method.

Pro

  • Cost effective
  • Easy to have tools on hand
  • Rough draft allows for honest feedback without concerns about the design being 'too perfect' or 'too finalized'
  • Offline work can help you avoid internet distractions

Con

  • Moving the final wireframe to a mockup will require you to create it on a computer anyway
  • Requires manual repetition as you iterate on your wireframes

Consider your own needs, and adjust this pro/con list as it makes sense for you!

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

    As I said, there are a few different methods for creating wireframes, and 0:00
    drawing on paper is just one of them. 0:04
    You may decide it's not for you or 0:07
    you may think it's the best, let's compare the pros and cons. 0:09
    The benefits of wireframing on paper are. 0:14
    It's cheap. 0:16
    It's easy to have the tools on hand. 0:18
    It is a tool we are comfortable using. 0:21
    You want get carried away perfecting it. 0:24
    Your team and and stakeholders won't feel like the design is too perfect or 0:27
    too finalized for them to give a full critique. 0:31
    It's easy to stay focused on it since it's offline and 0:36
    you aren't getting distracted by notifications on your computer. 0:38
    The cons of wireframing on paper are. 0:43
    The main drawback is that when you decide to move your final wireframe into 0:46
    a mockup, you'll need to recreate it on a computer. 0:50
    Another annoyance is that you'll have to manually repeat your drawings as you 0:54
    iterate. 0:58
    This can be a bummer, but I have a solution. 0:58
    If you have access to a copier, copy it with a sheet of paper over the area you 1:02
    want to iterate on to white it out. 1:06
    Another solution is to create a frame. 1:09
    Let's say you want to keep the top and bottom part of your wireframe as 1:12
    a template and iterate on the part in the middle. 1:15
    Cut out the middle part, leaving the outside of the frame, 1:19
    then slide a paper under it and draw within the window. 1:22
    That's it. 1:26
    Now, you know the basics of wireframing. 1:27
    And in particular, you know how to create wireframes on paper. 1:30
    I hope you've found these tips and 1:33
    tricks to be helpful as you dream up your next website or mobile app. 1:35
    In the next stage, I'll show you how to create wireframes in Balsamic, 1:40
    a tool built specifically for creating wireframes. 1:44
    As I explain how to use the tool, you'll watch me draw a wireframe for 1:47
    the payment screen of the ride sharing app. 1:51

    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