XD (Experience Design) is Adobe’s one-stop-solution for designing user experiences for web and mobile. In this tutorial, I will show you how to use it as a wireframing tool for your next mobile app or website.
We will be designing a simple hypothetical app, called “Bucket” that will allow users to view and add to their life’s bucket list (aka “Things to do before I die”).
Follow along to learn the essentials of wireframing your own project.
1. Start by Thinking Through Your Idea
User Experience Design is an extensive discipline but, for the scope of this article (and for any newbie designers), I want you to follow just one principle: do one thing (and do it well!) on every screen you wireframe and design.
To make your design layout and flow user-centric, think about the core user need you’re trying to fulfill on any screen and focus on the simplest and most effective way of doing just that. It’s a rookie mistake to squeeze too many features onto a single screen. Instead, carefully add more layers of functionality once the primary experience is in place.
Tip: to see a good example in action, check out the Shopify POS app that simplifies the process of integrating an online store with an offline one.
For our Bucket app, we will be wireframing its sign-in page, a screen showing the current list, and a screen to add a new item.
2. Pick a Screen Size
When you fire up Adobe XD, it prompts you to pick a screen size. For this tutorial, we will be selecting the iPhone 6/7/8 dimensions (375 x 667) but you can just as easily start with iPad, Web or Custom sizes.
You can, of course, start by sketching out your ideas (a common practice for most designers) but I personally find it useful to design in the intended environment from the very start. If you’re designing for a 1920x1080 screen, it’s more difficult to get a proper sense of scale from a sketch.
Once you make your selection, you will be greeted by the XD workspace and a brand new canvas in the size you chose.
3. Make Duplicate Artboards
We’ll start by making duplicates of the artboard.
We will be wireframing three screens, so create two more artboards by choosing the artboard function from the left pane and clicking anywhere next to your first artboard.
Alternatively, you can also click the first artboard to select it and then go Edit > Duplicate.
You can rename the screens by double tapping the default titles, visible at the top-left of each artboard.
4. Simple Objects
For the first screen, we are going to have a placeholder for a logo and two buttons for signing up (for unregistered users) and signing in (for registered ones).
Select the Text tool from the pane on the left and click anywhere you want on the first artboard to start writing. We need a placeholder for the app logo so I’m starting near the top, but you can move it around as desired by clicking and dragging. For the text itself, you can just enter “Logo” for now. Any graphic for the branded logo can go here later in the design process.
Under the logo text, use the Text tool again to write “sign in” and “sign up” on top of each other (but leave enough space to draw circles around them).
Select the Ellipse tool from the left pane and drag-and-draw circles around your buttons. You can also just copy and paste your first circle.
Use Object > Arrange > Send to Back to place the circles behind the text and not over them. Alternatively, you can select the circles individually and use the Appearance section in the right pane to remove their fill, to much the same effect.
XD, like other Adobe products, has automatic guides that will help you place any elements. If you want to change the exact coordinates, you can select any element and use the right pane to change its position (as well as size and rotation).
5. The Wonders of Repeat Grid
For our list screen, we will be using an XD feature called Repeat Grid. If your wireframe involves repeating elements or content lists, the Repeat Grid feature allows you to do that while still making it a breeze to make changes that update automatically across the entire grid.
Use the Rectangle tool from the left pane to draw a 150px x 150px rectangle and then use the Fill tool from the right pane to colour it a light grey to indicate this is an image placeholder. Add a caption below it using the Text tool. Select both of them together and make a copy next to them to create a content row.
You can use placeholder text (such as the designer standard, Lorem Ipsum) for your content list but I like to add a touch of personalization to even my wireframes as doing so helps me get a feel for the whole experience from the get-go. Now our bucket list has items like “Ride a hot air balloon” and “Visit Paris”.
Now select all the elements in your row together and click on Repeat Grid in the right pane (or Object > Repeat Grid). A green outline and green sliders will appear around your selection, allowing you to extend your content list in any direction (vertical in our case). For now, click and drag long enough to just make one more row (though you can of course go further).
You can use the Text tool again to write a welcome message (as in the image below) and copy-paste one of the buttons from the first screen to repurpose it for the “add” button (double-click on the text to change it). You can also change the text for any of the items in your grid.
6. Practice With More Text and Shapes
Finally, let’s wireframe a screen for our user to add a new item to their bucket list.
Repetition is the key to learning any new concepts, so let’s repeat some of the skills we’ve used already. Use the Text tool to write out an in-progress item (“Go to Coachella” in the image below) and, optionally, insert the vertical bar from your keyboard at the end of the text to make it look like a cursor (and communicate that this text is being entered by the user).
Use the Text and Rectangle tools, as before, to add the rest of the elements in this artboard. Repurpose the button from the previous screens for the “done” button that will allow the user to finish adding a new item.
And that’s it–you can now check off “learn how to wireframe” from your bucket list!
7. Share Your Work (Optional)
Adobe XD allows you to quickly and easily share anything you’re working on with collaborators and any other stakeholders.
If you are working on an app or website for a client, you can share a link to your design project with them by selecting File > Share > Publish Prototype. This is entirely voluntary, but collaboration is an important part of wireframing, so don’t be afraid to share what you’ve done and get some feedback.
Conclusion
Wireframing is the perfect exercise for learning Adobe XD’s tools, and we’ve only covered the very basics in this tutorial. For more learning resources on this subject, try our free course on Adobe XD auto-animate. Or check the links below.
