Prototype a Mobile Web Experience with Adobe XD
Designed by Codify Design Studio
Creating a compelling layout is just one aspect of designing a user experience. The more challenging part comes when you add interactivity to your design. Experience design requires strategy, design, and functional prototyping — and Adobe XD gives you the power to do it all.
Bring your design to life with an interactive prototype
Once you have a design that you’re happy with, it’s time to demonstrate your interactive vision to your stakeholders. In more traditional workflows, this process can be very time- and resource-intensive. While developing paper mock-ups or semi-functioning web pages can provide a rough idea of a user’s journey through your design, they still fall short of replicating a more accurate “feel” for your project’s interactions.
This is where Adobe XD really shines.
Creating links between design elements and artboards can be done very quickly while providing a more accurate depiction of the interaction design. To activate Adobe XD’s interactive tools, simply switch to Prototype mode within your document. Next, select an element, such as a navigation button, and click the blue arrow attached to the selection.
The behavior dialog box allows you to assign an interaction to the selected element, which includes the destination artboard, a transition style, an easing effect, and a duration for the transition. To complete your prototype, continue selecting navigation elements within your design and link them to their corresponding artboards.
After you get the hang of it, you’ll be able to wire up a functional prototype in just a few minutes. The above example shows a series of linked navigation elements across a range of artboards.
Publishing your prototype for review
When your prototype is ready for review, you can publish it to your Creative Cloud account, then share a link with anyone who has access to a web browser.
There are two main options for viewing and interacting with a prototype published to the Creative Cloud. The first option is to copy and share a public link. This link, in turn, will create a web page that will serve up your interactive prototype. This is hosted on xd.adobe.com and is accessible by anyone who has the link.
The second option provides you with embed code. This allows you to include the interactive prototype within any web page on your website or extranet. Use this option to maintain your website’s branding and gain full control over the URL that contains your prototype.
Watch these features in action
Join Chris Converse in the recorded webinar and get a behind-the-scenes look at the design process for the MAX Madness mobile event website — unveiled at the Adobe MAX Creativity Conference in Las Vegas.
Learn how Codify Design Studio used Adobe XD to strategize, design, and prototype a mobile web experience for this theme-based design event.
In this session you’ll learn to:
- Work with artboards.
- Create styles for colors and text.
- Define and reuse symbols.
- Produce an interactive prototype (without code).
Adobe Creative Cloud e-learning series: