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

Making Wireframes in Adobe XD

3:13 with Hope Armstrong

Adobe XD is a user-experience design app that supports vector design, wireframing, and interactive prototyping, which also allows you to interact with wireframes on your iPhone or Android device.

Tools

Adobe XD desktop app

  • The free "Starter Plan" version of Adobe XD lets you work on as many designs as you like. The only limitation of the free plan is that when it comes to online sharing, you can only share a single design at a time.
  • If you use XD through the full Creative Cloud subscription or pay for an XD-only subscription, you can share links to multiple designs at the same time.

Wires: Wireframing kit for Adobe XD

Further Learning:

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
    The last tool I want to show you is Adobe XD. 0:04
    It's a user experience design app that supports vector design, 0:08
    wireframing, and interactive prototyping. 0:12
    The coolest part about it is that after you build your wireframes, 0:15
    you can interact with them on your iPhone or Android device. 0:19
    That way you get a feel for 0:22
    the usability of the design and experience how the screens flow together. 0:24
    If you don't have the desktop app installed yet, go ahead and download it. 0:29
    I put a link in the Teacher's Notes. 0:34
    Also download the demo XD file from the project files so 0:37
    you can follow along with me. 0:41
    Once you're set up, resume the video and let's start designing. 0:43
    Open Adobe XD. 0:47
    There are preset artboard sizes for different device types. 0:48
    For this wireframe, let's use iPhone X All right, 0:53
    now we have a platform which we can add elements to. 1:01
    In the left panel, you can see all the elements we can add, 1:05
    rectangle, circle, line, vector for drawing shapes, and text. 1:11
    We can click any of these to create our wireframe. 1:17
    That's pretty straightforward. 1:23
    Now, let me show you how to speed up your wireframe drawing at XD. 1:27
    If you click on File, get UI kits, you'll see links to available UI kits. 1:33
    These include components that you can copy and 1:39
    paste to quickly build your wireframes. 1:42
    This makes it so you don't have to create the elements from scratch. 1:45
    I'll be using a UI kit called wires. 1:49
    You can download it by going to File, get UI kits, wireframes. 1:52
    Scroll down to the bottom of the Behance link and click, download kits. 2:08
    Open the wires mobile project. 2:26
    Let's look over the file to see what's available. 2:31
    There are a bunch of pages on here. 2:34
    There are common screen sizes and a mobile app. 2:35
    So this is quite handy. 2:39
    But don't let this limit your creativity. 2:41
    Use this as a resource to help speed up your process 2:43
    instead of letting it become a crutch. 2:46
    It can be so easy to copy and 2:49
    paste it verbatim without adding your own special touch. 2:51
    Keep in mind, you're the creator. 2:55
    So give yourself the opportunity to craft a thoughtful custom design for 2:58
    the needs of the user. 3:02
    That's all the pieces you need to know in order to start making wireframes in XD. 3:04
    Let's get started making our next wireframe for the ridesharing app. 3:10

    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