Get Started With Adobe Xd - Build Interactive Website Prototypes

1. Class intro: Hi creatives. Adobe XD is a super helpful tool for website designers who want to create interactive prototypes that where they can collaborate with other creatives, get feedback from their clients, and finally, prepare the artwork for a web developer to use it. This means that everyone involved can envision what the website will look and work like before you actually start building. This saves a ton of, this helps avoid any confusion between you, the client, and the developers and even lets you download assets directly from the prototype itself. Hi, my name is Malin and I worked as a brand and web designers since 2015. I run a design studio together with my husband Jeremy, and we focused on helping sustainable companies with their communication. I worked with a range of brands and different industries, everything from charities to universities and private companies. In this test, I will take you through how to get the most from Adobe XD as a designer and show you how to work more efficiently and create more engaging designs that your clients will love. We will start off by covering the basics of Adobe XD, like setting up art-boards and using the different panels. We then move on to more in-depth topics like styles, states, and components that help you create faster and better prototypes. Finally, we will cover collaboration and how to share your designs with partners, clients, and developers for both co-creation comments on development. We will also cover helpful plugins and other pro tips that will help you take Adobe XD even further. This class is for anyone who wants to get Started With Adobe XD or just wants to pick up some tips and tricks that you might have missed so far. I hope that this class will help you feel more confident working in Adobe XD and that it will help create an efficient and enjoyable creative process. I can't wait to see what you create. Let's jump into the class 2. Why create prototypes?: Before we get Started With all the great features of Adobe XD, I just wanted to share a little bit why I think it's such a great tool and why it's really important to have a prototyping tool when you're designing websites. If you are designing websites and creating designs by just creating images that you're sharing with your clients. That can become quite difficult when it gets to feedback iterations. And we really want a process where the client feels really excited and engaged and part of your project. So that's where these different tools come in. The first reason I like Adobe XD is because it's part of the Adobe package. If you already have a license for Adobe, then you'll be able to use Adobe XD at no extra cost. It also works with all the different shortcuts and Integrations. And you'll feel really familiar with the interface, which I think can help with the learning curve in the beginning. The second reason I really like Adobe XD is that our clients and collaborators don't actually need an account in order to do things like commenting and downloading files. This makes a really easy because you don't have that extra barrier of trying to explain why they would need to create an account for something. Adobe XD also lets you have feedback directly on your Prototype. And it can be a really great way for you to get feedback that has pinpointed to specific areas. So it's a lot easier to try to decipher what you need to be doing in specific areas rather than having a long email with lots of information. Creating an interactive prototype is also a really good way to make sure that you're minimizing any friction between the clients idea, your design, and your developers actual implementation. Because everyone can actually see how it would work practically, instead of putting images or texts and saying, well, this would move or this would work in this way. So this is a way to bridge that gap really well. Lastly, Adobe XD is an industry standard. Not the only one, but it's one of the big ones. And that means that if, let's say another Creative would want to continue work on your project, it would be really easy for them to integrate into it because most likely the already be familiar with it. Now that we know why Adobe XD is useful tool, Let's jump into how it actually works. 3. Adobe Xd tour: If it's your first-time using Adobe XD, it can be really helpful to start getting familiar with what all the different panels are and how to set up your documents. The first thing you need to do when you create a new document is to create an Artboard. Artboards can either be the width of a specific device, like a standard desktop or a specific phone model. Or you can create a custom size. Any one project can have lots of different artboards or different sizes. So I usually start with one format, either desktop or phone. And then once the design is ready for that format, I add a second size for each page to show how the design works in a responsive format. Now let's use a desktop format and let's save it to the Cloud because that makes it possible for us to invite collaborators later. Now that we are in the document, you'll see that you can move around your artboard by grabbing onto the three little dots at the top. If we want to expand or decrease the height of the artboard, we just double-click on the artboard itself and then move the line here at the bottom. And we can also change the name of the artboard. This helps us stay a bit more organized and the project, once we start having lots of different pages, you might have noticed this line. This line is super-helpful because it's showing us where the breakpoint is, meaning that everything that is above this point will be visible without a scrolling. This is super-helpful because we want to make sure that we're always adding key information above the fold, but also showing that there's more to see in a clear way to encourage people to scroll. If you want to add another artboard, just click this little icon that looks like a square on the left. And then you will get suggestions with different artboard sizes. You might have noticed that we have three tabs at the top saying design, prototype and share. When we create our designs, we will always be in the Design tab. But when we want to make the design interactive, we want to be in the prototype tab. Here you can link buttons and other elements to take you to another page when you click. Other interactive elements like working with the hover state change, for example, is actually part of the Design tab. So the prototype tab will be where you make items clickable. We will look at this a lot more in depth later in the class. The share tab lets you share your design with clients, developers, and other people who you want to either review the design or implemented. But there's also a way to share the design file for collaboration. For this, you have a button up in the top-right corner. You'll see a little person with a plus icon. Here. You can invite someone by email who can then edit the document with you. This is super helpful if you have a multi-person team and you can even work on the design at the same time. Next are the share icon. We actually have two more useful options. The first one is this little folder. Here. This is a type of preview where you can connect your phone and look at the design prototype through a device for previews, we also have this little Play button which allows you to preview the design right on your desktop. Let's go back to the Design tab and have a look at what we can find on the panel on the left-hand side. This is a really forgotten part of Adobe XD, but it has so many helpful tools. At the top you have basic shapes, the option to add texts, and the pen tool that works really similar to what we have in Adobe Illustrator. For the square and the circle options. They're pretty limited by the triangle actually lets you set the number of points. If you want to have rounded edges. Other really nice options to make it super easy to create backgrounds and other design elements. If you look at the top here, you can also see the pathfinder tool in Adobe XD, where you can join shapes. But in Adobe XD it's actually helped me better. If because you can move the shapes independently if you double-click on the shapes. So it's not destructive the way that it is in some other Adobe tools. There's also a great option which can be really helpful if you're creating a design with the repeating elements, like an image grid for example. All you have to do is select the shape that you want to repeat. Click the grid, and then pull out the edges to create more items. A little bit further down, we have three icons. And I will talk about the middle one right now because we're going to cover the other two ones in other chapters. But the middle one is essentially your layers tab. Here you can see all your artboards. And if you take on an artboard, you will see it highlighted in the workspace. This can be really helpful if you have a really large project with lots of different pages. Now that we know our wait a little bit more around, Let's go into the Design tab again and have a look at adding some texts and images 4. Images and text: Great, So let's start working with the text and images in Adobe XD, you can add text by clicking the little text icon and the left-hand panel. And then you can just click and drag to get the textbook size that you want when it comes to text, a lot of our options are gonna be here in the right-hand panel. The first thing I want to show you is just the basic things that get start with, which is where you change your font. For example, your font sizes, your Spacing, Kerning, and the space between the sentences, for example, the different rows. But you also have a lot of other great options like how to change to all caps and stylize your texts and other ways. I want to really bring your attention to these three little box at here. Because they can actually really determine how you work with text in Adobe XD. If we look here right now, it's set to this normal text box, which means that the text is confined to this box here. So if I was to, lets say, copy all of this text and I would keep adding more. You will see that it's there, but when I click away it's hidden. So that would be texts that would not be visible in your design unless you actually extend the box. And this can cause some troubles when we actually design and hand it to a developer because they might not realize that text is there. So they don't actually end up showing in the final developer website. What we can do instead is we can go to this option here, which means that it's responsive to the height of your texts. So if you keep adding text, the text box will keep getting larger in your option here, you have the same thing, but it's responsive to the width. So before, if we kept adding things and we had it this way, it will actually not go wider. But if we change it to be horizontal, then we're actually able to go and make things added to the width as well. Great. The next thing you're going to talk about are these basic things around colours so you can set the fill. You could do a border if you would like. And you can also work with the opacity of your text. If you would like. You can also do things like inner shadows, drop shadows, or background blurs. One thing that can also be good to know is that you can actually link things directly in your text, in your Prototype. Let's say, for example, that you have texts that will be linked on the website. Instead of sending your developer and link with these different things, you can actually just link it here and they will know exactly where to put it. So now let's move on to images. When we're adding images, there are some different ways of doing it. One way is to strictly just drag the image into your artboard. And it will show up as the size that it actually is. And if you're actually resizing it, it will keep the proportions that it has. But as you see, it's a little bit tricky to actually start copying it or changing it that much. So what I prefer to do is to create an actual container for this image. So you could either do it by using the shapes. So let's say, for example, a box. And then we take the image and we drag that straight into the box, and then we'll that inherit those properties. You could do the exact same name if you'd like to use a different shape. Like for example, if we would do this triangle shape, well, we would change it to five corners. And then we do the exact same thing of dragging an image into it. One thing to notice here is that Adobe XD typically as an outline or a border. So that's something you might want to have a look at and untick if you don't want to use it, if you click on the imagery will also see this little circle in the corners and those help you run the image corners if you would prefer. If you would like to create something that has a very different shape, I suggest using the pen tool and just using that to trace the area that you would like the image container to be. Then you just do the exact same name of dragging the image into that shape. There are a couple of really interesting functions that you can actually use with images that can make your prototype a lot more interactive. The first thing is scrolling. So let's say this section here where we would actually like someone to be able to scroll through to see this full image. But we can do is we can select the images and then go up to this little area here. This is where we can actually create these different scrolling options. So you could do a horizontal scroll, a vertical scroll or both. So let's say we want to do horizontal scroll. Click here and we can see that it will mark these sections. So now if we click the Play button, we can scroll down and we can see that we're actually able to scroll through to reveal that image that was previously outside of the artboard. Another great function can be to align text and images to each other. So let's say this section, for example, let's say this image was a little bit off and I wanted to make sure that all the images for the same height, we can go up to the alignment tools at the very top. And in this case, we would choose to align to the top. Click this one, and it will automatically align them to each other. If you have an image that is almost perfect, but you would actually like to flip it. So let's say vertically or horizontally. You can just go to these little icons here and you just click them to either flip vertically or horizontally. The last thing you want to share with you in this chapter is how to actually fix something so that it will stay in the seat position when you scroll. And this can be useful for things like, let's say a navigation. Let's say in this case we would like to navigation to be sticky. In that case, we might want to create this background to make sure that it's visible on different backgrounds. And then we select the menu itself. We can group them all. And then we just choose a fixed position when scrolling. Now that we clicking the Play button, we can see that algebra scrolling, the menu will be fixed at the top. And this is something that you could do in many different ways to play around with images and text for lets say, blog features or other items that you would like to highlight 5. Styles: When we create websites, we want all of the different elements to be consistent across different pages. Like you might have one font size for each one titles and one for H2 titles and one for body copy, for example. You might even have a different font for testimonials. So how do we make sure that it's really consistent without us having to go in and change all of the different individual assets if something changes, this is where styles come in. Styles essentially help you create rules so that we know that everything that has that one style will be formatted the same way. Let's say, for example, that your client comes back and wants to update the color of the buttons, then you don't have to go and manually update every single button. You can just update the styles. So to create your styles, all you have to do is select the text or the color that you're interested in making style. Then you go over to your library's tab here on the left-hand side. And then all we have to do is click the little Plus to create a character style. This will automatically name at the font name and the font size. But you can also rename this by just double-clicking and saying, for example, Titles, age one. This way you can keep track of everything in case you have, let's say, different ones of the same font but different sizes. If you wanna do the same for colours, all you have to do is select the color block, go to colours and click the plus. And we're going to the exact same thing here. We can call this footer and background, for example. Now, if I would go to this color block and I would actually click on my colors in my styles. You can see that it changes it to that Colour. Exact same thing for text. If we choose a piece of text that is not the title and we click on the title here. You'll see that it will automatically change it. This comes along with all of the different styling that you have here. But if you would change your mind, you can always go change it without actually updating the styles here. Let's see how this works practically. So let's say, for example, that we make all of these different titles, this age one. Now, if I would go and like to change this, I'll have to do as market, right-click and go edit. Now, I can change this to a bigger size, let's say at so we can see it and you will see that all of these different instances have all updated. You could also do things like update the color and other properties of it as well. You can also see that if you right-click, you can highlight it on Canvas. That will show you all of the different places where that style is applied. 6. Components: Just like with styles components help you set rules so that the design can be repeated without you having to manually change things. But with components, we're taking out a lot further than just fonts and colors. Here you can create a whole set of different elements together that become one components. With components, whole sections can be recurring elements. But with this really smart thing called overrides, we can still customize individual assets without having to edit the master to create a new components. Or you have to do is select the different elements that you would like to be part of it. So in this case, we're going to have this opening types graphic. And I'm just going to group them for simplicity. So what we're gonna do now is we're going to click on the little component plus here. You could also right-click and click make components. Or you could do the hockey with K. Let's make this component. Now you will see that it has this little green border around out with this little diamond. Now means that it's the master components. And if you see here on the side, it will say component and main. And that means that this is the master. So that's a super easy way to do it. Now, all the changes that we make to this one will populate all the other ones. Let's say, for example, that we want to have this exact components somewhere else. Let's say in the footer for example. So let's get rid of this one and added in. So we can just click here. We can rename this opening, opening times. And we can just click and drag that in here to have it in this location. Now, all the changes that we make to the master is going to be populated on this as well. Sometimes it can be a little bit tricky when you have lots of artboards going on to know where the master is. What you can do is you right-click here and just highlight on Canvas that will show you where that is. So in this case it will highlight it here. But if you click on this one down here, you can just click Edit main components. And that will take you to the MainComponent. So that's a great way to navigate through if you have a little bit more complexity. Let's say here that we are actually going to change the color of this title. For example, I double-click here. I'm going to change this to a different color just so we can be super clear what it is that we're doing. Let's make it as really bright green so we can see what is happening. Now, if you scroll down to our other instances, we will see that the color has changed here as well. If we click this one, you will see that before it said main. And here it says instance, because this one is not the main component, that means that we can actually do overrides. What does that mean? So basically if you're making changes to actual instances, you can actually do that independently of the master, and it will only apply to this one instance. This is to stylistic things. Let's say we want to make this a little bit taller. We can see the data, something that has not been impacted up here. Same thing goes for if we're changing color or doing other things. So let's say for this one, I would actually like to change this to a different font. We can do that and we can see that it has not changed. The one that is the master. This is called overrides, and this helps make it super easy if we want to change anything. The great thing is that it will still inherit all the characters that we have not been adjusting. So let's say for example, in this case we have been changing the title here. So we've changed the font and we've changed how tall does boxes, but we've not changed the color of the background. So let's go and change the color of the master. You can see how the elements that we have not actually changed will actually be still linked to the master itself. So now you can see that we have still made this gray because this particular styling has not been overwritten in this instance 7. Working with states: To make your design feel a lot more real, we can actually add in hover states straight in your prototype. This can be a really simple change, like, for example, changing the color of a button when you hover over it. Or more complex changes. So there are two different states that we can work with. We have the hover state and the toggle state. And the first one I want to show you is the hover state. So we want to make sure that this button turns into an outline instead of having the solid fill. So let's have a look at that wasn't very first. As you can see, this button is a components, so anything that you would like to add a state T2 has to be a component first. So what you can see is that adhere has a default state and a hover state. So let's start over just so I can show you how it works. So it is a component. What we're gonna do is click this little plus and choose hover state. Anything that we do to the hover state is going to be visible when you hover over the button. And anything on the default state is what you will see before you hover. We want to make sure that we are on the hover state. And then I'm gonna go down and I'm going to make sure that I double-click on the fill. I want to make sure that I untick that and pick border instead. I'm gonna choose this dark green color. I'm going to up it by about two more. Then I'm gonna double-click the text, scroll down to the fill, use the eyedropper again and choose the same green color. So now we can see that the button has that appearance that we want to tab when you hover. And if we click on the whole component now and we click on the default state, we can see that sign that we want it to have. Before you hover. You can toggle between these two to make sure that your design appears as you want it to. Let's go and preview and see if we get that effect. Yes, So it's working perfectly. So now I want to show you the toggle state. So the toggle state is great for things when you want an action to happen, when you click, for example, when you have a typical toggle and you would like that to move from left to right. But in this case, I would like people to be able to vote for which event they should have in August by clicking the little heart on the different courses that they would like to see. What I want to happen is that when someone clicks this heart, it turns from a black outline to a red fill. So I'm gonna do is I'm going to click on a new toggle states. I'm going to make sure I'm on Toggle states. On take the border, click the fill, and choose a nice red color. So now if you click this little heart, you can see that it turns red. So it works exactly the way that we would like it too. Since components work all the same. Now let's say that you wanted to change this from a red heart to a green heart because it isn't urban garden. Make sure again, you're on the toggle states. Change color and pick a nice green color. Now, if we go and check again, we can see that aspirin clicking on the other ones that also turning green. And it also has the reverse effect, which is great. So you can go back and forth between your different states. 8. Adding video: Adding video straight into your prototype will help it feel a lot more interactive and a lot more alive. This is something that you didn't use to be able to do in Adobe XD. So it's really exciting that you are able to do it. Now, let's say, for example, that we would like to add a video background to this section to create a little bit more engagement on the site, what you need to do is just to create some sort of bounding box. So I've just created a square here. Can actually go to our Layers tab so we can see what we're doing. We're just going to make sure we have our layer tabs open and then we can click this square here so we can see what we're doing. Then all you're gonna do is just click and drag your video into this bounding box. And initially, nothing happens when you preview it because it only sets to play when you click on it. And that's not what we want. We would like it to be autoplay. Well, at least in this case, what we're gonna do is we're gonna go back and look at the settings for this video. Something else That's good to remember is that your video has to be at the moment maximum 25 mb. So if it's bigger than that, you might have to export it at a lower resolution. So if we double-click on it and double-click again, you can see now that we're actually gone into the mass group one rectangle where our bounding box mouse, and then we have the urban garden watering video. So now we get all of these different options. So if we click here, we can see that it's right now play on top. But you could also have play automatically, which is what I would like. Then we can also click this little icon here where we actually have the customization. The first thing you can do is you can watch your video by clicking this little Play button. And you're also able to mute it. If there is any audio. In this case, there isn't, but you can still do it if you would just want to make sure you can also trim it. So if you'd like to trim it to, let's say be a little bit shorter. That's fine. You can just approve it. Then you can also do something which I always like to do, which is Loop playback. Let's see what the result is now. Now we've said it's auto play and loop. Let's go and preview our design. We can see that it auto plays. And if we wait for a little bit, we're also going to see that it's going to loop. Perfect. So that's everything we need to know to just add a simple video to our XD file 9. Plugins: Adobe XD has a lot of flexibility, but sometimes there are just things that you can do with the app itself. This is where plugins come in. Even though Adobe XD can do so many different things. There are a bunch of plugins that just make our life a lot easier day-to-day. So I wanted to show you a couple of my favorites. So first let's see how we can actually install plugins. So plugins are the slow tab at the very bottom. But we're gonna do if we haven't installed any plugins before is just to click on this plus, once you are right here, you're able to search for different plugins, or you can just browse to see if you find something that fits exactly what it is that you would like. You can just click the Get button and that will automatically download it to your Adobe XD once it's installed, I'm just wanted to show you these ones that are my absolute favorite. So the first one I'm going to show you is called a Colour In SPO. And the reason I like it is not only do you have things like color palettes where you can actually explore different color palettes, which is super helpful when you're creating something new. But my favorite feature is the contrast checker. So if you followed any of my other work or my YouTube channel, you know that I'm super excited about making sure that designs are accessible. So let's say, for example, that we would like to check if this text here we've got on this colored background is going to be visible and accessible. Well, we can do is we just copy the color code here. I'm just going to do that. Then I'm going to choose my text, is going to select that here. And I'm just going to paste this for the background color and it will show up here so we can see what it looks like. Then we will also see the ratio and we'll see if it passes. Let's say, for example, that we would change this to a different color. Let's say that we would change it to something that is much darker. See, maybe this and then we up the opacity a little bit so we get much closer to that dark green color. So let's go and copy that fill now and paste that in. Instead. Choose our cover. So we choose our color there. Now we paste that. Now you will see that all of these different checks will fail because they contrast is really low. So it becomes very difficult for someone to read. This is super-important for all websites because we want to make sure that everything is inclusive. But of course, extra important if you're working with, for example, a website for older people or people with different forms of visual impairment. The next plugin I want to show you is one called Lorem Ipsum, which is just a super easy one because I don't know about you, but when I'm designing something, it takes way too much time just to go to a website fund Laura, or type out my own text. So if we want some Lorem, I'll we can do is just go and create a shape where we would like that to be filled. And then we can fill with placeholder text. There's lots of different options, but this first one actually lets you choose, for example, if you would like a different language. So I'm just gonna go with the English version. You can choose if you would like it to be a dot, dot, dot or period at the end or just nothing. I'm going to choose period because I would like to to have a full stop. And then we're just going to go Insert Text. Does this really small? So all I'm gonna do here now is I'm actually able to customize this. I'm actually able to go and change it to my actual formatting, which is great. So we can just go here and go like this. And all of a sudden we're actually able to have a really nice lorem in our design. The next plugin, which is super-helpful, It's called quick mock-up. And this one has so many different things in one. The first one I wanted to show you is if we start off with the elements tab, this is where you have all of your great little icons, all of your little labels. And I liked that this one doesn't just have the icons, but it also have things like a toggle for example. Let's say we would like to use this one. We're actually able after we put it in to go and customize it in XD. So let's say we would like to change the color. All we have to do is double-click and all the properties will be editable here, we're actually able to change this to, let's say, a green color. So all of this is actually visible in XD, which makes things a lot easier. One other things I love is when you're doing wireframes and you just put like a placeholder for an image. So instead of trying to make something look like an image, so a client will understand that it's going to beat an image. You can just use a graphic like this, for example. You also have assets. So this is a little bit more complex. Illustrations for examples, or photography, or even graphs and charts. So these are really useful when you're creating a little bit more of a complex design. All we have to do is we can go and actually look at figures, for example, or in action. And this is linked to the humans websites which you might have seen before. And I really liked that. They also have a lot of more inclusive illustrations that we can use. Lots of different options. And you're also able to just do more like scenes and other options as well. When you first come into quick mockup, you're gonna be able to pick a theme. This is super-helpful if, let's say you're doing a dark theme and you really want us to work for that particular one, can always go back and pick a different theme. And you're gonna get all of your different acids here. The next one I want to show you is called globular in actually fits perfectly because I've recently done a project where we had a lot of organic shapes. And so I came to think about it for this tutorial. At basically whenever you want, like a background shape or anything else that you would like to have an organic shape. You can go into this plugin and you can adjust it so as you can change, the complexity will come more rounded, less different edges. And as you up in this, it will have more different sides. You can also do uniqueness. So it will again be more blobby on the left-hand side. And if you up it, it will become a lot more angular and have different shapes. You can play around with this and create unique blobs. And when you feel happy with it, all you have to do is actually click on this little blobs. You can create, click blob and then all you have to do is go and find it, which is usually does play the outside of your artboard. So sometimes you just have to zoom out a little bit. Again, just like with the other ones. This one is fully editable in here. So you can go and let's say I drop the colors. So let's say we would like to use this background color that we have. That's really nice. Now we're actually able to place this here and put it behind and have a little bit of a design element going on here. So I think this is such a useful one when you want to create a little bit more layers to your design. Last one I want to show is called anima. And this one is super-helpful when you're doing certain animations and when you're also wanting to export it to code for prototyping as a live website. So what you can do is you can create different things that you were not previously able to do in Adobe XD, but recently with what we solve, for example, with states and components, actually able to do now. So some of these are not as useful as they used to be. What is really useful is the get code function. You're actually able to download full HTML of the design that you've built so that you can send that to a developer or use it yourself. This is a really handy feature if you want something that is super quick and make it life a little bit easier for your developer. I highly recommend just going to the plugin section and browsing around a little bit because you'll probably find something that is really helpful for your projects. So go and have a look around 10. Using the prototype tab: Now that we have a design with a couple of different artboards, and we're happy with the different basic tools. We want to start connecting these different artboards using the prototyping tool. So let's head over to the Prototyping tab. So now we're gonna help into the Prototype tab and we're going to have a look at some different things that are possible with the prototyping ability. And this is actually super exciting. So basically the Prototyping tab will look very similar to the design tab. And if you select an art board or if you select, let's say a different element, you're able to create a link between it to another art board. This is how we create different translations and switch between artboards when let's say you click a button. So let's say, for example, that I would like this contact button to take us to our contact page. All I have to do is select the button and then pull this little blue arrow all the way to the art board graph would like it to go. Now we can see that on the right-hand side we have a little bit of some different options that we can play around with. The first thing we can do is we can have a look at the trigger. In this case, I would like it to be a tap because I would like someone to click the button and then come to the contact page. We can then look at how we would like this to happen. So later we're going to look at auto animate. But for now we're just gonna go for transition because we would like to go from one position to another. We want to make sure that the destination is correct. And we can see if we would like to have any animation. So let's go and check out what that looks like when we preview it. So now if we click the Contact button, we get straight to the contact page, which is exactly what we would like. So that's a very simple one. But, but for example, if we would like to create some animations. So what I'm gonna do is I'm going to show you if we duplicate this art board, we're gonna go back into design. I would like for a couple of things to happen when you land on the contact page. The first thing I would like to do is I would like for this little box to be revealed. So I'm going to choose it and then I'm going to drag it straight out so we can just see a little bit of it like this. Then I'm going to change it. So I would like this image to actually move down. So I would like us to be able to see a lot more of the people in the picture. And then I would like the text to be a lot smaller so that we can actually see people a lot better when we have this different layout. Let's put 63, for example, change the text a little bit so that it looks a little bit better layouts. So now we can compare these two and we would like to transition from this green to this green. All you have to do is go back to prototype. We click the whole art board, so the name up here. And then we're going to pull it over to the next one, which is the end destination. Now, we're going to instead choose time, which is an option that we have when we have a whole art board. I'm going to put this with a very short time exterior 0.4 s. Then we're going to choose auto animate because we would like it to animate. We can have something like Ease Out, which is a really nice, smooth option. We can also have some different ones like snap. But I'm going to stick with this one. I'm going to put it to 3 s just so that it has a little bit of duration. So we make it really quick. We can put 1 s if we want to be really long, to put it longer so we can experiment there. So now let's see what happens when we go to play. Amazing that animation happens. So the texts went to bigger the image move down and a little opening times came out. So now the last thing I want to show you is an overlay. This is super practical for things that you want to have pop up. For example, like a newsletter or let's say a keypad. So in this case, I would like to create a newsletter. And what we're gonna do is I'm just going to create a new art board. It can be any size really, as long as it's going to fit our pop-up, I'm going to rename this newsletter. Great. So what I'm gonna do now is just create the actual design for that pop-up. I'm going to choose a background color for this just so I can see what it is that I'm actually working on. I would like this design to have a border just because I don't know what background this is going to pop up on in every instance. So I'm going to choose this border as this green color and add a couple sizes bigger for the outline. Great, So now I'm just going to group all of these. The next thing we wanna do is to actually make sure that our art board is basically the size of the actual thing that we would like to overlay to be. So it doesn't have to be exact, but I want to get it pretty close. Great. So now we have a newsletter pop up here and we can reuse it for any instance where we would like it to pop up. And then I'm gonna go over to prototype. So I would like here in the newsletter link here for it to actually have this pop-up come up. So I'm going to just click and drag over here. We're going to have the Trigger be a tap. And we're going to choose Overlay. We're going to make sure that the destination is correct. And I don't think I would like any animations for this. So now let's see what happens. Let's choose this one and then let's go play. So if we go down here, we click newsletter. We can now see that this pop-up comes on screen. I really liked that it is actually transparent as a background. It only shows the things that we would like it to show. If we click somewhere outside of it, it will go away. So those are some really helpful interactions that you can use for your prototyping. 11. Getting feedback: Amazing. So now your design is ready and you want to share it with your clients where feedback, this is where we head over to the Share tab. To share your design. All you have to do is click the Share tab. And then we're going to have a look at these different options here. So we have a couple of different options for the way that we're actually sharing our design. In this case, when we want to get feedback from our clients, we're going to stick with this one called Design Review. And we can choose here. So either only invited people, which means we need to add their e-mail. Anyone with a password, which means brocade a password, or anyone with the link. So which one you choose really depends on the setup of the project. If, let's say you're working one-on-one with a person and you only want that person to have access. And you wanna make sure that other people on the team cannot access it. You can choose the only invited or the axis with a password. But let's see what happens when a lot of our projects is that we have a team that we're working with. So we might send this to a client and then they share it with their copywriter to check everything through, maybe with their marketer to make sure that everything is online. And so they want to be able to forward this to someone else. So I tend to go with anyone with a link unless there's a high risk of something that needs very private could come out. So I'm gonna go with this and then just click Create Link. Once this link is created, all we have to do is click on this little icon here and copy the link. And this is exactly what the client will see when they click on the link that you send them in an email, for example. What we're going to see here is the artboard on the left-hand side. And then we're gonna see a common field on the right. If we have different artboards like in this case, you will also see a one of six. And if, let's say you've linked these different things in the menu or different items, they will be clickable. So as you can see here, if we click this Contact button, it will take us to the site here, which is the Contact page. You can also go through with these arrows to navigate through the different pages. This is super easy for your client to see all of the different pages that you've designed. The great thing here is that they can comment directly on the design. Because a lot of times when we get feedback from clients, they might write a long email with lots of different nodes and you're trying to decipher what feedback as applying to different sections of a website, even pages. And so when you have big projects, this is extra helpful. So what we can do is our client can have this pin function and they can place it for whatever section that this comment is relevant to. Lets say, for example, that we place it on this photo. And they would comment. For example, could we have a picture of a thermally instead? They submitted and then you're able to actually go in and answer directly so you can click Reply here. And this makes it really easy to have discussions about the different comments and feedback without having to either jump on a call or try to have this back-and-forth through email. So I really liked this feature. So if we go back to our actual XD file, and let's say that we're now starting to implement some of this feedback. We might not actually want our client to see live what it is that we are doing. And this is where this Update Link feature comes in. Adobe XD will only show new things that have happened to the Design if you click Update Link. So you never have to actually worry about your client going to the link and seeing half progress things because it will only update if you click Update Link. Next up, let's have a look at how to work with a developer 12. Sharing with a developer: Okay, great. So your client has approved your design and it's time for you to share it with your developer. This is where we head back into that share tab, but instead we go to development. These options make it really easy for our developer to actually go in and grab all the color codes, font sizes, and styles you've set up. But they can also download all of the different assets that you've created straight from the prototype. So we're back in the share tab. And now we want to share this with our developer because our client has approved everything and we're ready to start building. What we're gonna do is we're going to change this from Design Review to development. And here we can also choose export for web. And this is really important because we want to make sure that any assets that we have marked for export are going to be able to be downloaded by our developer directly. But to do that, we actually have to set them as ready for export. So we're gonna do that by going back to the Design tab and clicking on any of the assets. So let's say this picture for example, all you have to do is scroll all the way down to this little section here and click mark for export. Now let me go back to our share tab. We will see that this has now available and it will say one asset. So if we take this, it will say downloadable assets. This enables this function for someone to be able to download the assets directly. So what we're gonna do now is just click Update Link so that we have those assets and all of our new settings there. We can see that even though we updated the link, the comments that we have previously are still there, which is super-helpful. But now there's actually another function. So if we go to this little development tab on the right, we will see that we have a list of the assets are available, the different colors, including the color codes, which is super helpful. We also have the different character styles that are set that we're using throughout this page. And we also have different interactions. So different triggers, different destinations. So all of the Xd is super helpful for someone who is developing the site. If we go back to assets up here, what someone could do now is click on this image here, and we can actually go and download that. That will download that asset directly. If you have lots of them, they could mark all of them and then download them all at once. Once we open this, we will actually see that even though this is an asset created and XD, it will create two files that has downloaded. It always creates one at one time the size, and one at two times the size. And this is so that you're developer has options because you obviously want a file which is high-quality enough. But you don't want it to slow down your site or take up too much energy to load. If you would like different assets that are actually separate in your design to stick with the exact layout. And you would like them to actually export as a one image. All you have to do is click on them and group them and then mark for export together. This way if we go back to share, update our link. And now we can see that we have this asset here which is a group. So as we downloaded, it will actually download these two assets grouped together as one image. And this is super-helpful when you're trying to have a way to control how the design is composed. If you have a situation where you don't want them to be, lets say, animating independently or doing anything else. Sometimes we just need things to be in a fixed position. And this is a really great feature 13. Sustainable & inclusive websites: A topic that is really close to my heart is sustainability and accessibility for websites. Because websites are purely digital, a lot of us don't think about the environmental footprint, but there's actually a lot we can do to have a really good impact when we're integrating things like video content, animations, parallax scrolling. A lot of these things take a lot more energy than if we would have a static single page. For example, whenever we're designing a website, we always want to start with a bare-bones and only add things if they're adding something to the actual user experience. And it feels really important to the user journey. Where are we can, we can make sure that our file sizes are small as possible. Instead of uploading a video, we can use a YouTube link, for example. So there are lots of ways to think about it where we can minimize the actual energy needed to load that page when it comes to accessibility, we also of course want to think about things like all tags, Colour contrast, what fonts and sizes that we use so that people with different abilities and different experiences of the web are going to have a really great experience. Even little things like putting the description when you're doing a form outside of the field rather than as a placeholder, means that a text-to-speech can actually read it out to someone so that they will understand what is going on. There are lots of different things that we can learn. So I really encourage you to look into that. And I think there are also some great courses on Skillshare that you can explore. I'll also make sure to link a couple of really great tools and apps down in the description. So you can go and start your journey of learning more about sustainable and inclusive websites 14. Bonus tips: So before we dive into the class project, I just wanted to share a couple of different tips and tricks that I've helped me along the way. Things I have learned as a web designer. The very first one is to set really clear expectations throughout your projects. Whenever you're working on a website or a lot of moving parts. If we think about it, any project needs to first have the goals that we need to set. We need to make sure we have all the different assets which could be provided by different people. Lets say the website copy the images, the photos for the about page. So they can be all these different assets that we need to consider. And we need to make sure that everyone who's involved, who needs to provide assets, know exactly when that needs to happen, know exactly how to provide those assets, what they're supposed to be. And so we need to make sure that that is super clear. This is why I always like to have a really clear timeline laid out and then setup a client portal where this is always displayed. You can set up your client portal and lots of different ways, including places like Trello, Asana, base camp, notion Milano. There are so many different places that you can check out. So you could also choose a tool that you already worked with that you're really happy and familiar with. One way to make sure the project runs really smoothly is then to remind everyone throughout the project of the next step. Let's say, for example, that we've had the meeting about the goals of the website, and we're just before we're about to go into wireframes. We know that after the wireframes we're going to need all the different assets like images and texts in order for us to go from wireframe to finish design. So we don't want to end up in a situation where the wireframes are finished and we're waiting for all the assets. We might tell our clients or the people involved saying, Hey, we're at the stage now, we're about to go into wireframes. Wants those wireframes are done in, lets say two weeks from now, we need to have all the other assets ready for us to start implementing the design. Here is how you're can do it. Maybe you share a link for them to upload it, or any other way that you think would be the easiest way for everyone involved. Another great thing to think about is who has decision power in this project and who is able to comment and pitch in with ideas. So what we want to make sure is that we're not ending up in a situation where there are, let's say 510 different people from accompany commenting and having different thoughts. But who maybe have not always been part of every meeting. Let's say someone comes in at the stage where they haven't been part of the strategy, but they're now seeing the finished website. At this point. We're not really looking for comments about the structure of the website. We might just be looking for little comments about things that we've been fixing along the way. We want to make sure that we know who has the certain power and making sure that they're making the right type of feedback at every stage of the process. All of this again comes down to ask communicating this. So one of our biggest jobs as web designers is to make sure we are really clear in our communication and expectations of us and other people. Collaboration is such a FUN part of any project and I highly recommend partnering up with other professionals in your space who compliment your skills. And I think there's just strengthens the whole process of the Website Design. Other creatives can include copywriters, web developer strategists, marketers, anyone who you think will be a strength to the project and complement your own skills. I also think it's a really good idea to bring in people at very critical stages. Even before you show something to the client, you can collaborate with these people behind the scenes. So let's say for example, you're creating wireframes and you're wanting to create this really nice feature. But you're not sure if it's going to be difficult to build. You can discuss with your developer and see what the best way to do it is so that we have that thinking before we present something to our client which potentially could be quite difficult to build. Now let's move on to the class projects 15. Class project: Now it's your turn. I want to see what kind of website you're getting create. If you also want to create a website for an urban garden, just like I did here. I've added the brief in the class project section. If you prefer to work on a client project or personal project, that'd be amazing to and I would love to see your work in the Projects tab. If you get stuck at any point, just let me know in the comments and I'll love to help you out. Don't forget to share your projects and comment on other people's projects so we can help each other in this creative community. Thank you so much for working along with me on this website design project and forgiving each other support. I hope you feel more confident and excited about using Adobe XD and that it can help you with your day-to-day work. Thank you so much and I'll see you in the discussions.