By Matt Rae
D
esigning digital experiences involves continual iteration, exploration and testing to ensure the solution you’re designing is solving the needs of your target audience. Due to the dynamic nature of this process, the early stages of the design process are focused on research, and concepting ideas before finer details are brought into the mix. As part of that early process, wireframes can be an invaluable tool in visualizing a user journey or flow, and testing it to ensure the designed approach will address user needs.
In this guide, we’ll discover how you can explore ideas, iterate rapidly, and test concepts with wireframes in Adobe XD. Whether you’re shaping a new product launch, mocking up display ads, or social promotions, or crafting a new feature experience for a mobile app, wireframing is a great practice to learn.
Wireframing in Adobe XD
There are several different tools available to get started on wireframing, from a pen and pencil to dedicated wireframing tools which force you to use low-fidelity assets, but are limited to just wireframing workflow. Wireframing in Adobe XD gives you access to powerful design features that can help you work quickly, iterate, and share designs with ease as you iterate. Starting with wireframes in Adobe XD makes it easy to add fidelity to your designs as you iterate and test, and end up with a final design and prototype, all in the same XD file.
Getting started on a wireframe
Quick Mockup
Kicking off your wireframe can be as simple as selecting the Rectangle tool in Adobe XD and drawing out shapes on your artboard. If you’re not sure where to begin, or are looking for some inspiration to start from, plugins like the Quick Mockup plugin can generate editable layout templates so you can hit the ground running.
To use the Quick Mockup plugin, it needs to first be installed. Navigate to the Plugins panel in Adobe XD (bottom left corner of the interface). Once open new plugins can be discovered and installed by clicking on the + button in the top right corner of the panel. Search for the Quick Mockup plugin and install it.
Open the newly installed plugin, and select the Mockup option. In the plugin detail panel you’ll see Elements and Templates. Elements allow you to add prebuilt wireframing elements into your design with a click. These are entirely editable elements in Adobe XD, and can be customized to your needs, but provide a great starting point if you’re trying to articulate an idea quickly.
Templates on the other hand compile these elements into full page layouts for desktop and mobile designs. So whether you’re wireframing a login page, or an ecommerce website, Quick Mockup has templates to get you started in a click.
Wireframing from scratch
With artboard presets, and intelligent guides, starting your wireframe with a blank artboard doesn’t have to be intimidating. To get started, select the artboard preset you wish to work with; Adobe XD includes the most common device presets to save you time.
If you have a grid system you wish to work with you can configure that using the layout and square grids in the property inspector.
Alternatively, if you’re working quickly to sketch out an idea, artboard guides can be dragged onto the artboard from the left or top to make alignment a breeze.
Now using basic shapes like the Rectangle and Ellipse tools, content, text, and imagery can be blocked out on the page to create your desired layout. Each tool comes equipped with a keyboard hotkey allowing you to switch between tools dynamically, saving even more time.
For content that repeats, like lists, cards, or a gallery of images, making use of Repeat Grid will not only accelerate your wireframing process, but will set up your design for further iteration down the line.
To use Repeat Grid, simply draw out the first element in the series, then select what you wish to repeat. Clicking on the Repeat Grid button in the property inspector will enable a green dashed border around the object with two handles. Dragging these handles allows the element to be repeated to the right and down.
With the Repeat Grid expanded, changes made to element positioning, layout and color will be synced across the grid so that you can focus on iterating. Easily adapt layouts, and try different configurations to achieve the desired effects. You can even add and remove elements to the grid and they will be populated across the grid.
Though everything in a Repeat Grid is synced, there are two elements which can be overridden, text and images. This becomes very valuable as you move from wireframe to higher fidelity designs, as text and image files can be dropped in place of placeholders in the Repeat Grid to rapidly add content.
Leveraging UI kits
As your wireframe develops, you may want to add in more detailed elements to add to the fidelity of the design. If you don’t already have these elements designed and established, it may not be worthwhile to draw them all from scratch just yet. This is where wireframe UI kits can come in handy. Just like wireframes themselves, UI kits are available in various fidelities, from simple block shapes, to more detailed grayscale designs.
To get started with a simple hand drawn wireframe kit you can download the Hand-Drawn Wireframe kit from the Adobe website. For more advanced wireframe elements, the Wireframes Kit is a great resource.
Prototyping Wireframes
Thanks to integrated, and powerful prototyping functionality, adding interactions to your wireframe is very simple with Adobe XD. Though it is important to test layouts and single screens, the true test of a design is how well the journey, or flow of an experience performs. Wireframes are an excellent way of testing that journey, and prototyping helps us to bring the pieces together into a cohesive story.
Since prototyping and design are integrated all within Adobe XD, your process can flow between design and prototype as you fine tune the experience. To switch to Prototyping mode, click on the Prototype tab in the top left of the interface.
Prototype interactions, like wireframe fidelity, can start basic and evolve over the life of your project. When you start your initial wireframe, using basic transitions like dissolves or slides will keep the interactions simple, while still allowing a user to flow through the journey.
To create a basic interaction, start by selecting the element you wish to use as a trigger. In this case, we’ll select a contact row item. This is going to transition to a detail page for the contact. With the row selected, click and drag the blue handle to the destination artboard and release the mouse.
In the Property Inspector on the right we can see the details of the interaction we just created. By default Tap triggers will be set, but others are available including Drag, Voice, and Keys and Gamepad. Each trigger captures a different interaction type.
By default the action will be set to a dissolve transition. Under the Transition action other options are available as well, but to start leave the transition as Dissolve. Easing and easing curves can be left at default for the simplest effect when wireframing, but experiment with these for different effects as your project evolves.
Now that the link is created, previewing the prototype will allow users to click on the row and experience the transition. Repeat these steps with each screen in the journey to piece together your wire-framed user journey.
Collecting feedback and testing
Since a key purpose of wireframing is to collect user feedback and test the solutions we’re crafting, sharing these prototype wireframes is critical to our success. Thankfully Adobe XD also integrates robust sharing functionality to make this process efficient.
While still in Prototype mode a Flow can be defined which can then be shared out. A flow consists of a home artboard, and all the connected screens as part of that journey. To label an artboard as a home screen, click on the grey tab in the top left corner. A flow label will appear, and double clicking on it will allow the name to be customized.
Toggle to Share mode and this flow will be highlighted with various sharing options in the panel on the right. Many links can be created for a single flow, and each link can be updated as iterations happen.
There are four predefined sharing options available with customized views. For sharing wireframes, Design Review and User Testing will be commonly used. Design review is recommended when gathering feedback from stakeholders and the design team as it allows for commenting in-line. User testing is recommended when sharing a link to perform a user test, whether in person or virtually as it presents a full screen view with hotspots hidden to gain a true understanding of usability.
Once you’ve defined your share settings, clicking Create Link will generate the link which can then be copied and distributed accordingly. When changes are made, simply navigate back to this link and click Update Link and anyone with the link will see the updated changes when they access it again, no need to redistribute the link.
From initial brainstorming to distribution and feedback collection, Adobe XD has the tools you need to build effective wireframes efficiently. Whether you’re starting from scratch, or leveraging resources like Quick Mockup or the variety of wireframing UI kits, you’ll be crafting incredible experiences in no time.
