From wire to wow.

Any website or app starts with wireframes — simple line drawings, like blueprints, that lay out the size and structure of page elements, navigation, and site features. They help stakeholders and other teams focus on and understand the flows, content states, and elements of the design.
 
 

From wire to wow.
For example, if you’re designing a new microsite for your company, wireframes can clearly display all the pages and page elements, as well as how they work together. Presenting your designs in this most basic layout — thus keeping it free of finalized colors and written content, or extra visual aspects — lets stakeholders and the rest of the team first focus on the functionality, underlying structure, and user flow. Because wireframes can expose any flaws or leaps in logic, be sure not to skip this step.
 
By starting with wireframes for your website or app, you help everyone — including yourself — see the project from a usability standpoint, get specific about ideas, and build on that framework. Adobe XD makes wireframing simple. Let’s walk through the basic steps.
  • 1. Start with basic shapes

  • 1. Start with basic shapes

    Select the appropriate size for your first artboard, based on the device or devices the design will be used on. You can either select a preset size, or if there isn’t a preset, specify a custom size.
    Double-click on the artboard’s title at its top left corner to name it.
    As you add objects to the artboard, think about the purpose and intent of each and how you want the user to interact with them. Keep the shapes simple, only as complex as necessary to make your point, and let the mind draw in the details.

    New to artboards? Learn how to work with them.

  • 2. Use shapes as image placeholders

    Basic shapes, such as rectangles and circles, can serve as placeholders for imagery. If you want to include images in your wireframes, use simple shapes to represent them. 
  • 2. Use shapes as image placeholders
  • 3. Duplicate interaction artboards

  • 3. Save time with symbols

    If you’re trying to display an interaction, many of the screens in your app will be very similar, much like a movie — repeating the same main objects, like menu bars and headers, in every screen.
    No need to draw them from scratch every time you add a new artboard. Instead, convert your objects into Symbols that are easy to place throughout your artboards. They stay linked, so when you update one, you update all.

    Never worked with symbols before? Learn how.

  • 4. Arrange artboards

    You can marquee select (drag select) or hold down Shift and select to pick up multiple artboards and move them. You can also use the Arrange buttons or the Arrange option in the menu to arrange the selected artboards.
  • 3. Duplicate interaction artboards
  • 4. Design in grids

  • 5. Design in grids

    Grids let you align objects and text with guides. When you draw, objects snap to the grid automatically when the object’s edges are within the grid’s snap-to zone. Grids also help you get a quick idea of measurement while laying out objects or text on your artboards.

  • 6. Animate your wireframe

    Once you have a series of artboards, link them together with animations — known as “wiring the app” — to show how they interact. Adobe XD lets you define transition types between screens: Slide Left, Slide Right, Slide Up, Slide Down, and Dissolve. You can also define the easing and the duration of the transition itself. Adobe XD defaults to the most recent settings you chose, so it can speed up the process of wiring your app if you batch many transitions of one type together.
  • 5. Animate your wireframe
  • 1. Start with basic shapes

  • 7. Share your wireframe

    Now it’s time to preview your work. You can share your design by sending a link or embedding it in a web page, and you can enable comments if you want feedback. You can also record a walkthrough as a .mov file.
    Open the Adobe XD file that you want to share, and click the Share Online icon. Name it and click New Link, and XD will give you a URL. When you make changes to your design and want to refresh the URL, click Update Link. You can open it in either the Preview window or in full screen. You can also use Preview to record the interactions.
    If you need to make corrections, you can do so while still keeping the Preview window open. Just make your changes to your prototype, and they’ll update immediately.

Learn more

Check out all our XD tutorials where you can find more on mobile design, and see some of our Adobe experts create wireframes and prototypes in real time.
Now, try wireframes in XD for yourself.
If you’ve drawn some of your app or website screens with pen and paper, try recreating a couple of them with XD, using artboards and a single animation. With XD’s option to import Photoshop and Illustrator files, you can now add more objects to interact with and more artboards when it’s the right time. You’ll find that you can set up a clear and basic wireframe for your team and stakeholders to take a first look, but with a few easy additions, you’ll have a complete interactive model of your app or site, ready for presentation.
 
Get started with Adobe XD ›