Learn how to prototype in Adobe XD by adding interactions that transition to different pages and back.
- [Instructor] Now designing a website for different…platforms and screens is one thing,…but it's another thing to really…experience how it works, so this is very important.…And that's where prototyping comes into play.…And what I mean by that, as I zoom in,…again just command plus or control plus…if you're on a PC, is right here.…Say for instance I wanna click on…some of this text or a button and I want it…to transition to that other screen.…So that's what I wanna do, I love that XD…can do this, in fact if I click on prototype…this is the prototyping mode that you can…switch your layout to.…
Now, first thing I'm noticing is as I click on it…is I get this one tag, that's because…all of these elements here, these three menu options…if you will, are actually one element, so I actually…need to make sure my elements are all separate…if I want them to have separate functionality.…So going back to design mode and zooming in…on that a little closer, I'm just gonna go ahead…and isolate these.…Easy way to do that is just hold down the alt key…
This course shows everything you need to know to design your first website with Adobe's new prototyping app. Learn how to lay out a design, import graphics, and add headers and body copy. See how to create complex screen designs with repeating lists and grids that are as easy to change as they are to create. Then find out how to add new pages and use screen elements from the iOS, Android, and Windows UI kits that are built right into Adobe XD. Once the design is done, author Paul Trani shows how to add interactions and transitions to demonstrate how the website will "work" from one screen to the next. Plus, learn how to share a fully interactive prototype with other designers and clients, and export artboards and other assets to use in site development.
- Creating and importing graphics
- Adding text and effects
- Creating new pages
- Using Repeat Grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Prototyping an entire website
- Sharing and exporting prototypes