Artwork by Matt Rae
Explore how to use Adobe XD's powerful design and prototyping features to create an adventure based website from scratch. Join Matt Rae in this workshop to design and prototype a website in Adobe XD.
Introduction.
Get a glimpse at what you'll be creating inside of Adobe XD during this video series.
Hey everybody, I'm Matt Rae. I'm an XD instructor here at Adobe, and in this video series, we're going to walk through how to design and prototype an adventure-based website from scratch in Adobe XD. I'm going to show you some of my favorite features and tips and tricks and best practices to really maximize and make your workflow efficient. So if you're interested in following along, download the practice file above, update XD to the latest version, and let's get rolling.
Step 01: Guides, grids, and wireframing.
To kick off the project, learn how guides and grids can help ensure precision as you begin blocking out your project in wireframing mode.
So in this first step, we're going to set up our page and this is going to include setting up an artboard, setting up some guides, and starting some basic wireframe blocking of the page layout so that we can get an understanding of where everything will go in the page. So in XD here, I'm going to start on the wireframe artboard. This is the first artboard that you're going to see when you open up the practice file. It has some basic navigation blocked out, as well as some guides. So guides are really helpful for placing things precisely. And to pull up a guide, you can just hover over the side of an artboard and drag it in. So I'm going to start by just creating some simple guides here. Maybe we'll go to 40 pixels inside, and this is going to allow me to place content.
And you'll see that as I drag these, I get relative measurements in pink. So I can do that on the left side and I'll come over to the right side and place one there as well. Now, we want to start by building out the hero section layout. This is the main image with a main call to action that you can see in the design. So to do that, I'm going to pull down a guide from the top and I'm going to set it about 400 pixels down from the bottom navigation. And when I drag this, you can see, I actually set that 400 pixels from the top of the page. So I want to look for the pink measurements on the left, and that's going to give me the relative positioning of my guide. So now I have about 400 pixels. So with all of these guides in place, it allows me to precisely position shapes.
So if I was to drag out a new rectangle shape, I'll come to the Rectangle tool or hit R on my keyboard. I can hover over the top corner and it's going to pin everything and snap to these alignment guides. So now I have a nice background shape. I'm going to turn off the border. And for fill, I'm going to come up and maybe select a gray, turn it down a little bit. And I want to try and remain consistent and use this gray for my image fills so that I can easily recognize when I have an image placeholder.
So with that in place, we want to start adding in some text. You can see I've already set up some simple text blocking for the navigation and the logo and the button. This is all very rough. This doesn't have to be precise, but I can simply copy this and paste it. And then I'm going to want a header here. So I'm probably going to want a slightly bigger text. I like to use rounded rectangles when defining a header in wireframing, so we can set something up like this. Again, you can match it to this final version if you want. Obviously we're using a slightly different contrast in that example, but however you want to set this up.
So let's just go ahead and match this so that we are consistent. Okay. So now we have a bit of a header. We can then go in and even add a subheader. And this text is obviously going to have a shorter line height so we can reduce that a little bit. Maybe it's a longer string just like that. Now, we're all set up. We have our title and subtitle. Let's go ahead and just create a call to action button.
So once again, I'll copy this out. This is going to be shorter and perhaps even a little bit darker, and we can take one of our text placeholders and just sub that in on the button for now. So now just like that, we've started building out our wireframes section. And if I double check with my design over here, I actually have guides set up at 80 pixels. So why don't we go ahead and change that? And we can see how this content will snap. So if I move this over to 80 pixels, grab this, as soon as I drag it over, it's going to snap to that position.
So let's adjust this one as well. And all of this is really dependent on the structure you're trying to use for your page. So these are maneuverable guides. They can be adjusted, repositioned, but if you want something that is going to lay across your page and be permanent or fixed to the artboard, we can use something called a grid. So down here in the Properties Inspector, we can show and hide the grid. And by default, it's going to turn on a layout grid. This is a column grid, really helpful for responsive websites or any kind of column based measurements. And everything in here is adjustable. So if I go ahead and increase the gutter width, I can do that here. I can reduce the margin so that it lines up more so with my design.
And well, let's set that at about 110. So I can use this. I can customize the color if I want to so that it's not overwhelming my design, but in this case, I want to just set up a simple square grid. And the square grid is going to allow me to change increments. So by default, as I move an object around with the keyboard, if I hold Shift, it's going to jump in increments of 10.
But with the grid setup, I can actually use custom increments like eight pixels and 16 pixels and move it along with the grid. So with that grid set up, I can, again, customize the size of the grid, customize the color. So if I don't really want it to show up at all, but I still want to use it, I can make it very faint in the background. So we'll work with that for now.
Now the next step here, obviously we have this other section set up, and this is our search section. So as we go into the higher fidelity prototypes, we can see we have things like travel dates, activity types. This is our booking engine. This is what we want people to use to actually book. So our first call to action is going to be Explore adventures, but down below, we're going to have these filters so we can do some simple blocking out like we did here. Again, we can pull down a guide, maybe we'll set this to about 80 pixels. That looks about right here. We used about 105. So we can do that as well. Just gives us a little bit more space. And once again, we can use the Rectangle tool and draw out our shape. In this case, we can match the color to the navigation.
And now, we can just draw out some more of these shapes. Again, these don't need to be precise. We're just getting a sense of how they're going to look and feel, and this can all be adjusted. So again, we're going to have our travel dates, we'll have an activity type, and then we'll have a number of people. For now, I'm just going to keep these fairly uniform. And then down here, we might have a button. So I will just darken that to match the other styles of buttons. Again, we want to keep common elements consistent, just so that we know what they are as we go.
And then we can add in the little details like icons. Up here in the Properties Inspector, we can set our sizing so that we don't have to fiddle with the canvas controls every time. And then we'll just adjust this and make a little text placeholder for the dropdown. It doesn't need to be more complicated than this. Again, we're just wireframing. We're getting a feel. We're getting a sense. And so just like that, now I have this set up. So take a moment now, pause this video, and practice wireframing yourself. Walk through the rest of this page and block out the different elements in our new website page. This is the landing page. As we go further along, we'll add in a couple of pages so that we can prototype them. But the main focus is going to be on this page. Try your hand at wireframing. Use the guides and grids and see what you can create. And when you're ready, hit play on Step 2.
Step 02: Create dynamic layout elements.
Learn how to use Content-Aware Layout features like Stacks and padding to create dynamic elements to setup your document for components.
In this next step, we're going to take a look at Content-Aware Layout. This is a set of features in Adobe XD that makes it really efficient to rearrange content and create really adaptive content for when we convert things like buttons into reusable components. Now button's navigation labels often have changing text and when you have changing labels within an element that has a background shape, you want that shape to respond dynamically to the changing text labels.
So here, let's take a look again in XD. We've moved on over to the end result. This is what your wireframe might look like if you finish the previous step and here we're going to just start converting our blocks, our placeholder text blocks, into actual text. So I'm going to remove this and I'm going to pull open the Text tool in XD, and I can use the guides to nicely place my text.
Here we'll just say, Explore activities. And I can easily resize this text box just by resizing it here and we'll adjust the spelling and we can move this into place on the button. Now you might need to adjust your button size, depending on how you set it up in the wireframe.
Now, at this stage, we can use the Option or Alt button to measure out our spacing and make sure that we set our text in a good spot. Now we want to make sure that everything is grouped and in this case, Explore activities is grouped with the button background, so we can call this our Button and that will be helpful later on, as we set up components.
So now that we have this button, if I was to change the text label here to something like Save, you can see the background doesn't respond. It doesn't resize according to the text length. So, what we want to do with this button is, with the group selected, we'll come on over to the Properties Inspector and enable padding, and that's going to calculate that spacing automatically and that's going to allow the label to change and the background to resize as that label changes. So now we have a dynamic button with padding. That's great and this is going to be really helpful for various different sections of your page. If you're building a card and you need the cards to resize their height, depending on the length of text, that can be really helpful.
But another feature called Stacks is going to be even more helpful with large groups of content and if we're iterating on the design and changing the layout frequently. So in this case, in the hero section, we have our hero text and our new call to action button. So why don't we go ahead and swap out these headers and subheader for actual text?
So in this case, let's take a look at what our final copy is going to be and it says, "Welcome to the adventure capital." So why don't we type that in. So now we have this. Again, we can resize this text and we can also use different text box sizes or types. So in this case, maybe we'll go with a fixed width size, but auto-height. So this means that we can define the width that the text box should be and here we can adjust the text. Maybe we'll go with 60 pixels and by setting the width of the text box, as the text gets past that, it's going to wrap. So here you can see it's on two rows, so let's just go with a short title to show you how Stacks is going to work.
I'm going to copy this, paste it and set my subtitle. This is my subtitle. And again, we can resize this. Set this to maybe 30 pixels. Again, we're still in the wireframing stage, so the sizes aren't as critical at the moment. But, let's say in this case, I then change my title. You can see that as soon as I have a lengthy text, it overrides all the other content and disrupts the actual structure of this hero section. So that's not what we want.
So we can use Stacks here. If we take all three of these elements, turn them into a group, and we can call this our hero content. Now, by turning on Stacks in the Properties Inspector, we now get the ability to set the spacing between each of these elements. Now this will allow us to precisely position things and we can also distribute everything in a Stack uniformly. So if everything should be 16 pixels separated, we can do that, or we can override an individual as needed.
Now, this also allows us to dynamically adjust the layout and maintain the spacing between elements as the text changes. So if we, once again, write in, "Welcome to the adventure capital," you can see instantly my content moves down and maintains all the spacing so I don't have to worry about adjusting it every time. So there we go. Now we have the header nicely blocked in.
We can also apply this to things like our search bar. So if we call this the Search Bar, again we have all these different individual elements and if we were to rearrange something, we'd have to move it over, grab the one below it, and then make sure that we're precisely positioned. We don't want to do that every time. That can become tedious and take away from the actual work we're trying to do.
So with that group selected, we'll enable a Stack and now we have the ability to quickly rearrange all that content and see how it looks and feels. And again, we still have those spacing controls and as one box resizes, the others will adapt as well.
So, that's padding in Stacks. Feel free to explore the rest of the page and see where else you can group elements and enable Stacks and padding to maximize your layout efficiency.
Step 03: Working with components, character styles, and colors.
Learn how to create reusable components, add character styles and colors to assets so that they can be reused throughout your design to save you time.
All right. We're making some great progress on our website. In this step, we're going to take a look at adding assets like color and character styles, and starting to build reusable components. In the previous step, we talked about how layout controls can help us build the foundation of those reusable elements. And so in your practice file, you'll see this before color artboard that I have selected here. Now this has a little bit more detail added to the wireframe, text elements, different shades of gray, and some elements that are built out a little bit further. So we're going to use this to start building in the high fidelity designs of our website. Now you can go through the process of adding the text yourself if you'd like to, but this is here just so that you can get a jumpstart and get a feel for components and assets.
In XD, if we turn over to XD, you're going to see this colors and character styles artboard. This has a number of different colors preselected, as well as character styles for the hero and the body content. Feel free to use your own selections here, but these are available. And these are pulling from Adobe Fonts and just general selection colors that have been included. Now in a previous step, you may have seen me add a color here to the quick color swatch in the color picker. This is one way to it add colors, but this is stuck and local to a single document. Now there's also some limitations to this. So I'm going to show you a better way to save colors once you've selected them into your Assets panel so that you can reuse them and edit them throughout your document.
So here in the colors and character styles artboard, we have all of our colors. Now, if we open up the Assets panel, you're going to see there are some components here that are coming from a final stage design. You can ignore these. You can even collapse the section here. Now we want to open up colors and what's going to happen is, once we select our colors here, we can just do a quick selection. We will pull this text color in, but that's okay. We can remove it or just simply keep it. But with all of these colors selected, I can hit plus next to colors. Once these are added, I can go ahead and double-click and name these if I want to. So this could be my gradient, this could be my light gray, et cetera. You can go ahead and name these. And this is a great spot to name these to align to different color variables in code, or to match to a design system. However when you're using colors, this is a great way to add custom names.
Now you can do the same thing with character styles. So here, if I take my hero title, I also have a category label down here, but I'm going to just take my hero title, and my content headers, and I'm going to hit plus next to Character Style. So now I can come in. If I forget which one it represents, I can right-click and say Highlight on canvas. And I see that that's my hero title. So I'll right-click and I'll say Hero title page one. And this is going to be my content headers page two.
Now I can also use things like the body style. So this is my emphasized body style, and this is my regular body style. Again, I can do these in bulk. And then I have search input and input values. So I will add those in. This is my search input label and this is my search value. So now that those are set, I have my colors and characters styles saved in here.
Now the cool part about this is that as these are applied in places, so if I have a couple of rectangles here and I apply this teal color to them, if I want to then later update this teal and maybe adjust it so that it's a bit darker, anywhere that that teal is applied, that color will then be updated. So this is a major benefit to using assets versus the color swatches in the color picker.
The other benefit is that I can then export this or share this as a library to use across other files or to share with team members using this design system. So if I am building this as part of a larger product organization, and I want access to these assets, I can publish it as a library and get access to all of these colors and character styles.
Now, the next thing that I can get access to and save in my document assets is components. And these are those reusable elements that we talked about previously. So to start, as an example, we've used the button in the past and the button is a very common reusable element. So here in this button, we have our padding enabled so that as we change the text, the button will respond. Now we can start building out this button based on how we want it to look. We can start adding in some colors. So perhaps here, we're going to use a burnt orange. So we can select that background color and just simply click on the color to apply it. And now we have a button, but let's say that we want to reuse this button somewhere else. Maybe there's an adjacent button next to it. If we just copy and paste, anytime that color changes, that's not going to apply to the copies.
So in order to make this reusable, we want to convert it to a component. So in the same way that we did the colors and character styles, we can add to the component. So with that group selected, I can just hit plus, and it's going to add a default name unless the group is named. So if I had named this Button, then this would show up here. So for now, we're just going to call this my Primary Button.
Now, as I copy this out, you can see, I have not only one with a solid green diamond, but also a hollow diamond. And this hollow diamond means it is an instance or copy of the original main component. So now if I go and change out the color of that button, that is going to be reflected in the instance. So that's a super handy way to keep things aligned.
Now we can also set up something called states in these buttons. So for one, since we're on the web, a typical hover interaction might need to be created. And this happens when you mouse over a button, there's some feedback, a color change, or a style change that reflects that that button element is clickable. So to do that in XD, we don't even need to go to Prototype mode, even though it technically is an interaction, we can build that right in Design mode.
So here on the main component in the top right, you'll see the main component has a Default state. If you click on plus, you're going to see two pre-configured options alongside the new state. And Hover state is what we want. So we're going to select that. And what that lightning bolt means is that it's pre-configured, or pre-wired in the Prototyping mode... so we don't have to set anything up. It's just going to work. So with Hover state selected, now we can go in and edit the properties. So perhaps we just want to dim down this background and that's how it's going to look. Now we can toggle between Default and Hover states. And when we go to play this, you can see, we have a nice scrolling view here. As you mouse over, it's going to automatically transition between those two states. But we can also take states a step further and we can create different custom button styles.
So you'll notice up in the top right, we might not want to use the same burnt orange. Perhaps, this is where we want to build in a teal button. And rather than creating a whole new button component, we can simply create a new style that's stored in the same component, so that any kind of property changes, font sizing, font family that changes, or border radius that can all still apply even though the background color might be different. So in the same way, we're going to hit plus and go create a new state. And this is going to be our teal button. And these button states can also have hover states, but they need to be set up manually. So with the teal button selected, we can zoom in here again and just apply the teal. So now we have our Default, we have our Hover and the Teal Button. So now I can start building out my design by taking a copy of that teal button. I still maintain my Primary Button down here.
But if I then go in here, change this look now, I can then take this and replace that existing button up in the top right and there we go. Now I have the teal button. And so what the benefit of this is, is that if I tap into here and decide that I want more of a squared corner button like that, that change will automatically apply to the teal button. So this is the benefit of components and component states. You can create multiple different reusable elements throughout your design. So for instance, we can also then take our navigation group, which is here. It includes the main navigation down here. It can include this Primary Button once we bring that in, and then it can include this message section as well. So if we take this group and name it: Main Navigation. Now we can build this into a component and we can right-click as well to create a component. We don't have to be in the document assets.
So as soon as I make this component, now I have a reusable navigation, which is helpful because as I create multiple pages, I'm going to want to use that same navigation. And so in the same way, if I copy it out, I can get these copies. And this is really helpful to do before you start layering in colors and typography. You want to set up the structure of those reusable elements so that you only have to apply those colors once. So let's pretend this instance is on another page and I want to start building in the colors for the navigation. So I can come back here, I can apply the gradient, and by tapping in here, I can go to Fill and then get the gradient controls on canvas and adjust exactly the angle of the gradient. And you can see right away that that applies to the instance. Here, I can come up, I can set a darker color and just like that in a couple of clicks, I've applied color and it applies to all the instances of my navigation component.
Finally, you can group things like the search bar. If we were to group these and rename it: Search Bar, you can then once again, start building out those colors. And this has some of the character styles already applied. So again, this is using our search input label, but we can just be sure and apply that. And then on our values, we can select multiple text boxes here and apply that to search value. So now it's using our character styles. We just want to then go in and apply the proper colors here. So when we're applying a border fill, we can take a color and right-click and say Apply Border Color. And that should apply. In this case, we're using an appearance value and reducing the icon by 50%. So it's still using the color, but it's actually applying it at a 50% opacity.
And then once again, here we have a button, so I can remove that. And then simply copy my button out and paste the new button in. And here I'm going to want to override this button slightly, just because it's a little bit narrower than the others. And I can do that by adjusting the padding. And so holding the tilde, which is the squiggly key on the upper left of the keyboard, I can adjust my padding to be appropriate for this context. And it's still going to receive all of the other changes. I've just overridden the padding so that this button can look appropriate for its given context.
Finally, we have this section down here and we've built out in wireframing, some of these basic elements, but these are reusable. And so we can actually delete the other two and build a component out of this single element. So without images at this point, we can still create a component. We'll just make sure it's named appropriately. So here it's the Activity card. We can make a component out of that. And then we can even use a Repeat Grid if we want to quickly replicate those components and get the aligned exactly as we need them to be. And then you can also ungroup the grid and turn this into a Stack if you would prefer.
Now, we're going to want to edit the main component so that any changes that we apply here to color will take place across all of the instances. So here, we're just going to adjust that color. We're going to add some color in here and we can make sure that this is using our body style. Now, as we scroll back up, all of those elements are going to be using that same style. And then of course we can go in and override. So perhaps this one's going to be kayak and this one's going to be biking. And we can adjust our text labels. And you can see, the chevron actually moves over in this case. And that's because Stacks has been applied to this element, so that as the text string expands down here, the chevron will move over and maintain that consistent spacing of eight pixels.
So now we're just about set up in that section to start adding imagery, but why don't we add one more thing? And in this case, we can add a hover state. And at this point we can't do a whole lot. We're going to want to add some effects to the images in the hover state once we add them, but we can start by hovering over this element and actually adjusting, maybe even doubling that spacing of the chevron and the text so that when we hover over this card, the chevron shows a little bit of an animation. So back in Default state, and now we're all set up, we're ready to start building out this page.
So finally, let's just finish off this page by applying some of our new character styles. So we'll start with the title. We can call this: The Hero Title. So our H2 can be applied to this section header and this one as well. And then we can just make sure that our text here is using the body styles. We can once again, take out this button and drag in one of our other buttons and place it exactly where we need it to be. In this case, perhaps we'll go with a teal button as well. And we can say Book now. So now we're just about ready to go. In the next step, we're going to take this design and start adding in imagery so that we can finally pull this design together before we go in and start prototyping.
Step 04: Adding imagery.
Whether you’re using Adobe Stock images, or your own curated graphics, learn how to add them into the project to bring it to life.
All right. In this next step, we're going to keep pushing to a higher fidelity, final design. And in this case, we're going to start adding images. So we have color, we've added character styles, and we've started building our components so that we have great reusability as we go and build out further pages or subsequent pages.
Now, adding images in XD is pretty simple. There's a few different ways to do it. And in your starter file, in the practice file folder, you'll find a text file. And this includes a number of links to free Adobe Stock images that you can license and use in your design. Now we're going to be using them here as well. I have them pre-downloaded, but you can pause the video and go and download those now.
With the images downloaded, we can simply start dragging them into XD. There's a couple of ways. You could also save them as a library and pull them in from your library. And you can get to your libraries in a similar way as we did our document assets. So from this panel, if we click back, you can come in here and click on Stock images for instance, or whichever library you have them saved to.
So, I have them stored in Finder, which is the file explorer on Apple computers. I can start pulling in images from Finder and just dragging them on two shapes, and XD is going to auto-mask those. So let's start with the hero. If I pull open the Layers panel on the Hero section, you can see, I have this image placeholder, there was an image here, I changed the fill.
So this is just a simple rectangle, and I can take the hero image and plop that in. Be careful here because there is a gradient overlaid on top of the image. And this is just to add some contrast between the text layer and the background image. And you can do this just by drawing a rectangle over top. So this is my gradient layer here, and then applying a gradient. And you're going to want to maintain one end, probably the end for this, to write in this case as completely transparent. Everything else, they can be the same colors. The other color you can play with the transparency to get the exact look that you're going for. And you can also adjust this on canvas. So if you want this to be brought in a little bit more, you can do that as well, and just change how the gradient looks. But for me, I like to keep a little bit of space just so that I can swap out the image.
So let's say I bring in a different image of a rock climber. I can just swap it out just by dragging that image in. Now, if I ever want to edit the mask, I can double-click and I have the image selected in the background. So now I can just drag reposition and I can resize it as well to get the exact look that I'm going for. So in this case, why don't we go with a rock climber? And now we've got a nice header that fits with the overall theme of the page. So now we can keep moving down. In this case, we have our component and these are all instances. And this is key, because if you drop an image into the main component, that's going to then appear across all instances.
So in some situations you might want that, but in this case, these are three separate activities. They have their own properties, their own images. So we want to drop these in the instances. So in this case, I'm just going to find the background rectangle here, and I'm going to find a nice hiking image. And then I can drag that hiking image in, and XD is going to auto-crop that. So once again, I can double-click if I want to make that a little bit larger, I can. But I'm going to keep it pretty well how XD had it, because then we're going to go back in and adjust our hover states as well.
Now I'm going to just come into this background rectangle and find one for kayaking. So I'll drop in a kayak and then here we have the biking. So I can just drop the cycling one in, and again, we can adjust the mask if we want, but now those images are set. And in the same way, we can do that here. I also want to show you what would happen if I already had an image added into the canvas. If I'm working with an image, for instance, let's say we pull in this nice lake cabin. This is a nice cabin on the lake in England, and it's already in existence on our canvas like this. How can we mask it and fit it into one of these shapes?
So what I'm going to do first is I'll probably scale this down, get it roughly the size that I want. I can change the opacity of it so that I can see where the shape is. And then I want to knock it back in the layer order. And then I can take that initial shape and this new one. And if I go to the object menu, I can use this mask with shape command, and it's going to automatically mask it. Now I can double-click, select that image again and bring it back to full opacity. And now I have this nicely masked image in my design.
So for the remainder of these, I'm going to keep dragging in images that I like, that pair well. So maybe we'll go with a winter scene next and we can expand that out. Maybe just get the cabin. So we're going with a real cabin theme here. So now, just like that, we've added in our images and this page is looking far more complete. And of course like we have throughout the tutorial, we can select this artboard and preview it. Now, you'll see this blue dotted line. This represents the vertical scrolling. This sets the viewport bottom. So if I played this, I can see the whole artboard here. And as I scroll it, I can see the content below.
Now, we want to make sure that the navigation header in this case is set to the highest level. And down here it is not. So we'll bring that right up top. And now all of the content should scroll underneath it, just like that. Now you'll notice as I hovered over the kayaking, it actually went back to gray. And that's because that main component that we set up had a gray image as the hover state. We can quickly adjust this. If we tap into the hover state, you can see it there.
I'm just going to pull back in those images, but this time I'm going to expand it. In this case, we have our default and our hover, and this should create a nice little hover effect that zooms the image as we hover over top. So you can do this and override each individual instance with the image that you want. So if we come into the kayaking one, select that hover state, select the image. We can find our kayaking image, place it in. And again, we can zoom this up as well, to get it exactly where we want it to be. And then repeat the process with the biking.
So now when we play the page, we get a nice hover effect on each image. And the chevron expands to show us that this card is clickable. This is all being done in Design mode. All of these hover interactions, we haven't done anything in Prototype mode yet. So now that we have images, we have our page built out, looking how we want it to look and everything is coming together, why don't we turn to prototyping next and see how we can string these pages together into a flow. So, once you've played around and you're comfortable with adding images, hit Play on the next button and we'll dive into prototyping.
Step 05: Prototyping interactions.
Finally, bring the prototype together by adding interactions between pages, and creating smooth micro-interactions to add extra fidelity to the design.
In this final step, we're going to take what we've built so far in Design mode and switch over to Prototyping mode, and start layering in some interactivity into our flow. Now in the practice file, you're going to see the finished work that we've been working on, but you'll also see three pages in series, from homepage final to contact us. All of these have final in them just to signify that this is the last batch of artboards that we'll be working with and prototyping together.
Now, XD has several different ways to prototype. We can go with really basic transitions and page to page slides, which is great for mobile apps or just prototyping simple transitions in a wireframe. And then we can use component states, like we talked about before, and Auto-Animate and get really rich interactions that can add a lot of fidelity to our designs and help us make it feel more real. So we're going to take a look at some of these examples in here, and to start, we're going to turn to our homepage and go back to that hero section that we've been working on throughout the course.
So to start, we can flip over to Prototyping mode using our mouse or a hotkey. Now, once we're in the Prototyping mode, some of the interface is going to change. It's going to give us tools that are contextual to prototyping. And now when we select objects, we're going to get this blue highlight and a blue arrow. And as we drag this blue arrow to various different destinations, it's going to create links between pages. So here on the Explore Adventures button, the main call to action, we want this to go to an Adventure page. And so that is the second page we have set up here, called Adventure Awaits. And here you can browse various different activities. You can see a featured adventure.
And so all we need to do is with that button selected, and make sure that the whole button group is selected, not just the text, the entire component, so that you have a larger click area, then you can grab the blue handle and drag it until it clicks and snaps to the destination artboard. Now on the right, you're going to see some interaction information. Here, we have a Tap trigger, which means when we click on the button with the mouse, this action is going to be initiated and we're going to use Auto-Animate. Auto-Animate is selected by default here. I'm actually going to set it to a Transition, just so that we can see what a simple page transition looks like. And we can use something like a Slide Left.
We'll just use Dissolve for now, because it is a webpage so it's probably just going to reload and then show the new page. So dissolve can give us that look, and we don't really need to worry about the easing at this point. It's just going to be a simple page transition. Now to get back home and complete this loop, a common way of doing this or a common convention is to include a link on the logo of the page to link back to the home. So here we can do that and just drag it and snap it back. And again, we're going to have a tap with a transition.
So when we select this artboard, we can hit either Command or Control+Enter, or hit the Play button up top. And we're going to get this Preview window. So here, again, we have all the scrolling functionality that we've built in in the past. And now when we hover over this button, we currently don't have a hover state on it. But when we hover over it, you can see the mouse changes to a pointer. And so when we click, the page is going to dissolve and it's going to translate over to this new page. And again, it has scrolling functionality. So to get back, now we can click on the logo and it's going to take us and return us to the homepage.
So there's our first simple transition. Now, we can also make this more exciting and we can include multiple links. So up in the top navigation, we have this Adventures menu, and this, as well, will bring us over here. So we can add multiple levels of interactivity and different paths, which helps with user testing down the line. Now, we can take this up a notch and that's just a simple dissolve transition. So what we can do, if we want to build in a way of kind of showing a loading, maybe like a lazy load on this Adventures page, we just slide this over and make a copy of that page. We can call this our Empty State page, and we're going to want to remove some of the links. So I'm just going to tap on these links and hit Delete.
We can still keep the homepage links, and you can see it's already in the copy of the page because we're copying in Prototyping mode, so that allows us to copy the links of everything that we copy. So now, rather than go directly to the End State of the page, what we're going to do is, we're going to turn back on Design mode, and we want these objects here to essentially slide into place once we hit the page. So what we can do is, we can bring these down, and you can see it's going to tuck in under this card. And then we can turn down the opacity, and now we'll be left with essentially an empty state of the page. And we can do the same with this card here. Just pull it down 40 - 50 pixels, turn down the opacity, and now we have this blank page.
And now what we're going to do is use Auto-Animate from this page to this page to create a cool loading effect. Now, because it is cropped, we will only see a portion of that page, but here we'll come, we'll set up our links. So in this case, from Explore Adventures, we're going to keep that Tap with the Dissolve Transition. But from this first Adventures page, now we can just link directly from the artboard and make a connection there. And rather than Tap, we're going to switch this to Time. And this allows us to set delays of when this is going to occur. So let's set a 0.2 second delay to simulate the page loading the content within it. We can keep the same duration but we're going to switch our action over to Auto-Animate.
And now when we do this, we're going to tap and take it, the Tap action is going to take us to this Empty State page, and then Time will take us to the final page, creating a cool interaction. So now as we click on Explore Adventures, you can see first the Empty State page loads and then the content scrolls into view, and we now have our Complete page. So this is just a little hack for creating some more animation and motion in your page loads or page transitions.
So we've seen before how we can use component states here to create nice hover effects when we mouse over something. But we can also use component states for things like drop-down menus. So up here, we have a number of components within a larger component, and we can make these drop-downs expand. Now, because this is part of a larger component, we probably just want to build this directly into this component. So I'm going to tap Edit Main Component. This is going to pull up my empty state, or my main component, my Default state. And we can set up three different states here for this action.
So the first one, we're going to create Travel Dates Expanded. The next one, we'll create Activity Expanded. And you can name these whatever you like, but just make sure it's clear so that you understand what each action is doing. Now, any changes I make in the default state to this component, I want to apply first to the default state, just so that I can really leverage Auto-Animate with any additional shapes. So with default state selected, I'm going to copy and paste this rectangular shape, and now I'm going to pull this down a little bit, and I might change the color here, move it over, make it a little bit lighter. And we already have a drop shadow, but I'm going to just increase that a little bit.
So now I have this drop-down menu and it appears in default state. I obviously don't want this to appear in the default state, but I'm going to build it out here and then we're going to hide it and pull it back in the appropriate states. So I'm just going to copy in some text, pull this in, and then we can build in just a fake little calendar here. This is going to be a date picker. And then for activity type and people, we're likely just going to have a number select or a list of activities. So I'm now going to copy this, drag it over. And once again, we're just building out the initial pieces here for these drop-downs, and then we're going to edit them. So in this case, I'm going to remove that and we're going to change the text over to Regular.
So here, now we can just list out a number of different activities. Repeat Grids can be really helpful when doing this, as you can just drag it out and then if you want, you can ungroup it, or you can keep it consistent. So we can go mountain biking. And so now we have that built in. And it can be helpful here to turn on padding, if you want to expand that list or reduce the list. So with that element selected, I'm just going to turn on padding. And now if this Repeat Grid list was to grow or shrink, the actual menu will adjust with it. Now we can just simply duplicate that once more and bring that over for the people list. So here we can just use simple numbers and set that up, and maybe there's a maximum of four. We can set this number, again, to whatever we need it to be.
So here, this is our default state. These are all of the different options. Now, all I'm going to do is take each of these, kind of slide them up a little bit so that we get a nice animation. I'll pull them to the top, and then turn down the opacity. Now, another trick you can do is you can also hide these in the Layers panel. And then we have that component, so we can come back to Travel Dates Expanded. We can open this up, the elements we need. So here, group 60 is what we're looking for. So if we select that and turn up the opacity, we should get that, and then we can place it into position exactly how we need it.
So now we have our default state and the Travel Dates Expanded. So if we come back up and play this artboard, nothing's going to happen yet because we haven't connected the dots. So in Prototyping mode, we're going to come here and we'll just select the Travel Dates drop-down as the trigger. Now, all we have to do is tap on this blue icon and we can select the state of Travel Dates Expanded. And then from the Travel Dates Expanded, again, we want a way to come back so we can simply tap on that, set the state to Default state. And now if we were to play that artboard, we can now click on that and we're going to get this expanded panel that comes down and allows us to pick our dates. And we can slide it back up. Again, you can change the timing and easing to create the effect that you want. And then you can just repeat that process with the other two and connect all the states. And now you have a fully functioning, reusable date picking component with interactivity.
So now you know the basics of going from wireframing and a blank artboard in Adobe XD, designing some nice assets, adding character styles and colors, building component states, and adding those into a library that can be used across multiple documents, and then building on your design with imagery and prototype interactions. You can string together pages. You can add interactions on to individual reusable elements, and bring it together into a cohesive web design experience. We'd love to see what you create with Adobe XD, so if you're building out a web design, feel free to share it on social with the hashtag AdobeXD.
What's next
