Learn how to design a website in Adobe XD. Create a responsive and interactive website prototype for mobile and desktop.
- View Offline
- [Instructor] Hello, and welcome to Designing a Website with Adobe Experience Designs CC Preview, otherwise known as Adobe XD. My name is Paul Trani, and I'm excited to show you how to create a website in Adobe XD using the drawing and creation tools that are built-in, importing your own graphics and images, and building layouts, not just for desktop, but also for mobile devices and tablets. I'll also dive into using the built-in UI kits for iOS and Android to use in your project.
I'll take you through how to use my favorite feature, Repeat Grid, for easily creating and customizing repeating elements, and I'll also be covering how to prototype a website so you can build in that functionality that you need so you can click through to different pages, complete with transitions and easing. Finally, I'll show you how to easily share the prototype with anyone you want, however you want. Now, I hope you feel inspired and empowered by watching this course and you create a website sing Adobe XD. I hope you have fun doing it, as well, because I know I had fun creating this course.
So let's get started.
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