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

Tips and Tools

2:47 with Hope Armstrong

In this video, we will review our wireframes and mark the components we like the most. You may like pieces of each wireframe, and for the next iteration, you maybe want to combine those concepts into one wireframe.

UI Stencils

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

    Now that you have at least eight small wire frames, review them. 0:00
    Get out a different color pen or highlighter and 0:04
    mark the wire frames you like the most. 0:06
    You may like pieces of each wire frame, and for 0:09
    the next iteration you want to combine those concepts into one wire frame. 0:11
    I like the top navigation that doesn't include a bar. 0:17
    It declutters the UI and opens up the space more to show more of the map. 0:20
    It's important for users to be able to clearly see the map so 0:25
    they can see the available cars nearby. 0:29
    I like the prominence of the floating destination search bar, but since future 0:31
    screens in this user flow will have the main actions at the bottom of the screen, 0:36
    I think it makes sense to anchor the search bar to the bottom of the screen. 0:40
    Having this part of the UI at the bottom makes it easy for users to type into. 0:45
    What are your favorite parts? 0:51
    Take some time to mark up your own sketches, or 0:53
    even mine from the project files. 0:55
    Now that you have these concepts, 0:58
    you can draw larger wire frames that iterate on your favorite ideas. 1:00
    When drawing these larger wire frames, keep in mind that these are still 1:03
    wire frames and do not need to be perfect or get into the details. 1:08
    The goal of this stage is to come up a solution that meets the project goals, 1:12
    provides the best user experience for your users, not the best visual design. 1:16
    Now that you know the basics I wanna show you a few handy tools. 1:21
    These are completely optional, and not necessary to create great wire frames. 1:25
    But I want you to know about them, because you might find them to be helpful. 1:31
    If you want help making straight lines, you can use grid or dot paper. 1:36
    You can find it online, at an art supply store, or an office supply store. 1:40
    Alternatively, you can use a ruler to make straight lines. 1:45
    Here are a few wire frames I drew on dot paper for a previous project. 1:49
    Another paper upgrade is printable stencils of devices, 1:54
    which visualize how the design will look within the viewport. 1:58
    This is helpful if you wanna draw the elements with the proportions of 2:02
    the device sizes in mind. 2:05
    It'll help you visualize how the UI will feel within the constraints of the screen. 2:08
    If you're struggling with drawing icons or 2:13
    if you simply want to speed up the process, you can use a UI Stencil. 2:15
    UI Stencils is an online store that sells a variety of stencils with icons sized for 2:20
    a variety of mediums, such as iPhones, Android phones, and websites. 2:25
    You can simply lay the stencil on the paper and fill in the icons with your pen. 2:31
    You can draw on the templates you've printed, 2:36
    or make the device outlines yourself using the stencil. 2:39
    I put links to these tools in the teacher's notes, so 2:42
    check that out if you're interested. 2:45

    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