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

Hand-drawn Wireframes

4:19 with Hope Armstrong

There are a few different ways to create wireframes, but let's start with the basics: pen and paper. It's simple, gets the job done, and avoids the trap of perfecting the wireframe

Resources

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
    There are a few different ways to create wireframes. 0:04
    But let's start with the basics, pen and paper. 0:07
    It's simple, gets the job done and avoids the trap of perfecting the wireframe. 0:11
    The goal at this stage is to come up with a solution that meets the project goals, 0:16
    and provides the best user experience, not the best visual design. 0:20
    If you can draw basic shapes, you can wireframe. 0:25
    First, I'll give an overview of how to draw wireframes on paper. 0:29
    And then, we'll put the concepts into practice as you watch me draw wireframes 0:32
    for a mobile ridesharing app. 0:37
    Wireframes use symbols to represent different parts of the user interface. 0:39
    You may come up with your own variations of these symbols, but 0:44
    it's best practice to stick with symbols that others will recognize. 0:47
    Here are the common symbols. 0:50
    Every wireframe starts off with a rough approximation of the device constraints. 0:54
    Whether you're designing for mobile, tablet, HD desktop etc. 0:58
    it's safe to say you'll be designing for a rectangle. 1:02
    Primarily, in portrait view. 1:06
    So start with that and don't concern yourself with the scale at this point. 1:08
    Also, don't be super concerned with drawing straight lines. 1:13
    It's okay if they're off. 1:16
    This is handmade. 1:17
    I do have a couple of tips that make it easier though. 1:19
    First, when you're drawing a line, lock your wrist and 1:23
    move your whole arm away from your body. 1:26
    Your wrist naturally curves if you draw towards your body. 1:29
    So if your draw inward, you'll be fighting your own anatomy. 1:32
    Secondly, the faster you draw the line, the more likely it'll be straight. 1:36
    If you hesitate and slowly draw the line, it's more likely to look wiggly. 1:41
    The last tip is to not look at the tip of your pen. 1:46
    Instead, look at the point where you want the line to end. 1:49
    This takes hand to eye coordination. 1:53
    But with some practice, you'll get the hang of it. 1:55
    Sections are represented by rectangles. 1:59
    Images are represented by rectangles with an X. 2:03
    The rectangle is drawn at approximately the intended size of the image. 2:07
    If it's a circular image, 2:11
    such as a profile image, you can use a circle with an X. 2:13
    Icons are represented by small circles. 2:17
    Headlines are represented by a straight, thick, horizontal line. 2:20
    If you know the text you'll be using, you can write it in. 2:24
    But it's easier to draw a line in this quick iteration phase. 2:28
    Body copy is represented in a few different ways. 2:34
    Similar to headlines, you can write it in. 2:38
    But it's easier to use placeholders. 2:40
    You can draw a straight thin horizontal line or multiple lines. 2:43
    Alternatively, some people use a wavy horizontal line to more clearly separate 2:47
    it from headlines. Sometimes, you'll wanna draw a section of the screen. 2:52
    So, you wanna denote that the page continues. 3:00
    You can communicate this by drawing a zigzag line 3:03
    on the bottom of the section's rectangle. 3:05
    There are symbols for communicating interactions too, so if you're interested, 3:08
    check out the teacher's notes. 3:12
    This is all you need to know for the basic shapes. 3:15
    Now that you have an idea of the shapes you'll be drawing, gather the supplies. 3:18
    Let's start out with the basic supplies you're likely to have sitting 3:23
    around your home. 3:26
    Grab some basic white copy paper from a printer nearby, or 3:28
    get any scrap paper you can get your hands on. 3:32
    Then, find a writing instrument. 3:36
    Preferably, a pen or marker with black ink. 3:38
    If you have a pencil, that's okay too. 3:41
    I have a preference for pen, because I can get carried away with erasing, 3:43
    and making the drawing perfect. 3:48
    For you pencil lovers out there, I encourage minimizing the use of an eraser, 3:50
    and embracing the imperfections. 3:55
    If a line is truly distracting, feel free to erase it though. 3:57
    Another tip is to draw lightly and 4:02
    build up the darkness as you get more confident and deliberate with the shapes. 4:04
    That's it for the supplies, it's as simple as that. 4:08
    There are some extra tools you can buy to make the drawing easier. 4:12
    But let's stick to the basics for now and I'll show you those goodies later. 4:15

    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