In this video learn about the different project sizes you can start with, as well as get an understanding of the workspace in Adobe XD.
- [Narrator] The first thing you'll be greeted with when you launch Adobe XD is this welcome screen where you can start a new design based on these templates. There's UI Kits, Resources, but really what I wanted to point out is this. This Sample File. So, I'm just gonna select it really quick and just to show you what it contains and really it just takes you through, step-by-step, in making a mobile app. So check that out if you're interested in creating a mobile app or check out my Designing a Mobile App Using Adobe XD as well.
But what I wanna do, I'm gonna close that, is make a website. You guessed it, right here in the center. And for each one of these, they all actually contain a flyout menu that gives you other templates available as well, all right? But I'm gonna select the Web 1280 x 800 and I can always change this later but that's what I wanna go with, selecting that. And now, here I am in my project. You'll see you have this white page, if you will. This is known as an artboard right here in center.
We have tools on the left-hand side and then we have the properties panel on the right-hand side which changes based on what you have selected. So, if you just click right on that artboard, you get the properties for changing say, its appearance. Its fill color, for instance. So I'll just change that to black and just like that, and now I can start to pan around as well, in Adobe XD. If I hold down the space bar, I can start to pan around and I kinda want to just pan up here and I want to point out this artboard title and I wanna double-click on that and I'm gonna call his Home.
Okay, so this is just gonna be my homepage, my home layout and then I can move that back into position or I can zoom in or out in my toolbar. You'll see that magnifying glass. So I can click to zoom in or hold down the Alt key, click to zoom out. Also, keyboard shortcuts are available as well. Cmd plus and, will zoom in and then minus will zoom out, just like it does in Photoshop and Illustrator. And Cmd zero will fit to screen.
That's what I'll be using a lot. And if you're on a PC, that will be a Ctrl plus, minus and Ctrl zero. All right, so, last thing I'm gonna do right now is just save this file. So I'm just gonna save this to my Desktop. All right, and I'm just gonna call this Website. There's my file and really, the next step is I'm going to dive into actually designing a website.
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