Adobe XD Web Design Tutorial

Key Takeaways

[Music] All right. So, we're going to be using the Adobe XD Windows beta for this. And you can use uh the same application for Mac if you wish. However, it did just release for Windows. So, it's pretty stripped down in terms of functionality. However, there is enough and it is stable enough for us to use it and to use it to design a full mockup of this fictional sort of personal portfolio website that we're building as well as create a basic interaction prototype. So later on in the course, we're going to be using Angular to make the entire project a reality in the browser. And we'll do our best here in XD to match what we hope will be the final output later on in the course. All right, so I'm going to switch over to the desktop here. And I have a new document open up here in XD. And the first thing we want to do is to create a custom artboard. So down here we have the artboard tool, which you can can access by hitting A. And over here on the right, it does give you just some preset options, but I'm just going to draw mine out manually. And I'm going to left click and drag. And you can see over here in the width and height over here, it tells you what we are in terms of pixels. So, I'm just going to match it up to around 1,200. And we could always edit these afterwards. And something high like around 900 for the height. So my current desktop resolution is 1920x 1080 for recording this. And so this fits nicely within my current view at 100% view. Okay. So the first part that we want to focus on is the header. And in the header, all we're going to have is our name because this is just a personal portfolio site. And then kind of a subtitle, kind of your description of what you do. and then also a very simple navigation over here with four different links. Okay, so the first thing we want to do is take our type tool and I'm going to leftclick right around there and I'm just going to in all caps lock hit Gary Simon. You can put whatever name you wish and I'm going to switch over to the move tool and select it. Now, we can notice over here we have a fill and your border may be checked on and off, but we don't want a border obviously for this. And I'm going to make this just completely black. So, all six zeros for the hex code. Now, I'm also going to use a web font called Open Sands. And if you Google Open Sands, you can download it for free and then install it. Once you have it installed, you can select it over here. And we're going to make this one bold. And also we'll increase this around to h we'll try 32 pixels. And we want to have a good amount of white space here between the left border here at the top and the top as well. You want to try to make sure these things are even. And that's just basic good design fundamentals. Okay. So next we're going to have kind of like a subtitle down over here. And so we can simply take this, select it, Ctrl + C, then Ctrl +V, and then we can move it down while holding shift. Now, you can notice we have these little guides that show up, and these will be handy when we're developing this layout. And you'll see in a little bit how those come into play. So now for this, of course, this is going to be a lot smaller, but we're just going to change this to some other kind of just a title like uh for example, UI/ UX designer from Cleveland O. All right. Now, let's go ahead and take this and we'll make it regular. And let's try something around 20. Maybe even just a little less. Maybe around 18. And right around there seems pretty good to me. Okay. So, additionally, we're going to have a header and that's going to show up just to the right side over here and a navigation rather. And again, we could take our name right here crl + V to copy and paste. And we'll start right around here. And all caps lock again. Home. And actually, normally I would just put spaces between, but we don't have to do that here. It makes it a lot easier than say Photoshop. So, what we'll do is first take this down quite a bit. We'll try 18 based on this side. I think that's still a little bit too big. So, I'm going to try 14. All right. Now, I'm going to move it and we'll see kind of where this aligns up. in relation to the title right here. So I think right here is pretty good. So I'm going to hit Ctrl + Crl + V. Change this one here to my work. Crl + C crl + V. And by the way, I hit escape. Now you can see right here once that turns pink in the middle, we see we have an even distance between the elements here about. Hit escape, control C, control V, and then contact. And by the way, when I'm moving these over, I'm holding shift to keep them on the same path. All right. So, I'm taking all these and selecting, holding shift, and just moving them over here just to have an even amount of consistent white space. Okay. Now, with these, I'm just going to instead of making them black, I'm going to make them a little bit of a blue because that's going to be kind of our secondary color as a part of our color scheme. I think right around here. So, the color code for that is 144354. Okay. All right. So, now the header is done as you can see. Very simple. And the next part we want to focus on is down here, which will be kind of like a thumbnail gallery of our projects. And it's going to pull this from the Behance API, which we'll do obviously later on when we get to the development portion. So, right now I'm going to choose just this rectangle tool. And I'm going to leftclick and drag out all the way kind of like a container right right around here for now. We'll be good. We can adjust this as needed in the future. Now, we don't want a border, but we do want a fill. And we want it to be a very light gray just so you can see barely see it right here. Okay. Now, what we want to do is in the project files, and I'm going to link those so you can download them. We want to open up a folder that we have. All right. So, we can see we have these thumbnails, and I'm just going to drag this over here. And we don't want to drag it on top of here because it will fit it into this uh rectangle that we created. So, we just want to go out on the outside. And we're going to increase this by holding shift. And the size will be roughly right around here for now. Okay. And then what we want to do is select it and choose the repeat grid. And we'll pull this to the right. Right around there should work pretty well. And I may just go out a little bit further to the last one. So I'm going to hold control and use my mouse scroller to come out there just so we can see the whole thing to the right. All right, that looks good. And I'm going to bring these in by left clicking and dragging. So I don't want any space between these. So we want it right at zero as we can see at the top. All right, that looks pretty good here. And I'm also going to hit Ctrl C and then Ctrl +V to create a second row. Just like that. And then I'm going to rightclick. And for now, before I do that, I do want to bring up our assets here. And I'm going to choose, let's see here, we have 1, two, 3, four, five, six. The first six up here, and drag them on to the top. And you can see how it very quickly and automatically changes what we want to be shown in here. All right. And then second, we're going to take this and we'll take the other remaining thumbnails right here. And we'll place them on this one. And that'll give us just a different look here. And then I'm going to take both of these. First, select the top one, right click, ungroup, and then ungroup as well. So now we can select each one individually. And I'm going to just delete these three. And I'm going to take these three and increase the scale just slightly because we're going to be using a responsive flex grid for these and they're automatically going to adapt. So the bottom row may sometimes be larger based on the width of the viewport. So let's drag this down here just to the bottom for this container. And I'm going to take these six up top by holding shift and selecting all. and then hold shift and bring them down just so all six fit nicely in this area. All right. So, real quickly, I'm going to take these three, drag them up, and then also move this up. All right, that looks pretty good. Also, I don't like how these two are repeating right there. So, let me go ahead and just quickly take the just one of these right here. Uh, we'll choose maybe this shoe over here. Just put it right there. All right. Okay. So, in this clip, we're going to go ahead and finish off the homepage design by doing a couple things. So, let's switch over to the desktop. And the first thing we want to do is right here when we hover over any of these thumbnails, when we have the final product finished there in Angular, we're going to have through CSS a hover effect. So they're going to grow a little bit. So let's simulate that here in XD. Now, unfortunately, at the time of recording this, and this may be different based on when you're watching this, maybe they integrated this feature already. they don't have the ability for you to work in any type of hover-based interaction effects. So, I'm just going to increase one of them and it's going to be there all the time based on, you know, when we play it through the prototype. Uh, but that'll basically be as much as we can do at this point. Uh, so we can't just simulate what it's going to look like if you hover over one of these. So, I'm just going to take this one over here to the right, and I'm going to hold shift and alt and scale it up just a little bit because you don't want it to be too jarring when you're hovering over these. So, right around there is pretty good. I'm going to increase my size just a little bit. And I'm also going to make sort of like a title, and it's going to pull the title from the Behance API. And it's going to show up on the bottom portion of the thumbnail right here. and it's going to be encased in this white sort of container. We don't need a border right there. And then inside of it, we're going to have text. So, let's go ahead and I'm going to leftclick right here on the very edge. And then drag all the way out to the right and then center it by clicking this icon right here. And we'll just name this shoe for now. We'll just assume the project title is shoe. And we'll bring this down here to a pretty small size. Perhaps 12. And we'll make this black right there in the middle. Okay, looks pretty good. Now over here, we're going to have two columns. And the left one is simply going to say front-end development with a title as well as a fake description. Then one other one will be a backend development with fake description. And each one is going to have its own icon that we're going to custom design here in XD mainly with the pen tool and the shape tools. Really that's all they give you to work with at this point. So what I'm going to do is first we're going to focus on the first icon. So we want to design an icon that's relevant to the idea of front-end development somehow. So front-end development simply means aesthetics for the most part. So we're going to design sort of like a paintbrush. Very simple stylized paintbrush over here. So the first thing we want to do is use the rectangle tool here to do the handle portion. So I'm just going to drag out something pretty large at this point. And then we're going to scale it down a lot, of course, but we want to be able to see what's happening. So, as we can see, we have these little icons here. If we pull them all the way in, we can make rounded corners here. And we're going to change the border size from one to two. And we do not need a fill. So, we can un or deselect that. And then we also want a blue color, something that's pretty vibrant. So, I'll use aa3 FFF. if you want to follow along. Okay. So, if we select it and doubleclick it, we have access to the anchor points here. So, I'm going to select the very bottom one and just hit delete. And we can see it kind of rounds off this bottom portion. So, now we'll take the pen tool and we'll create the actual bristles portion of the brush. Now, if you're familiar at all with Adobe Illustrator or Adobe Adobe Photoshop's pen tool, this is a little bit different, but for the most part, it's the same uh in terms of how you draw out anchor points. So, we'll come up right here. I'm going to left click and drag and hold shift. And that'll constrain it to a vertical angle. And mind you, you may have to do this a couple times simply because it's a little bit tricky at first. And I'm going to left click right here. And then I'm going to bring this right here in. And you can hold the alt key. All right. And then I'm going to left click right around here to finish off this anchor point in this shape right here. So I hit escape. We're going to select this. And we want to again change this to two. and also use our color. And one thing I forgot to do is to add this as a preset. So, we click this little button right here. Now, we can access it quickly for other shapes. Now, if you have some issues, for instance, this isn't lining up correctly over here. We can simply double click and just drag over what we need to drag over. So, if you click on other anchor points, you have access to be able to make other adjustments through the handles and the position of the anchor points themselves. I'm pretty happy with this. So, what I'll do is take these. Now, there's two different shapes here. Now, let's take them and group them. So, hit control G or right click and group. And then we can scale this down. Okay, right around there is pretty good. And now let's go ahead and add a title. So for this we'll simply put front-end development. And once again we want to use our open sands font. All right, let's get a good idea of what size this should be. We want a good amount of white space between these two elements. So, we'll pull that down. And we'll make this black. And then we'll copy and paste it. By the way, 20 seems to be pretty good. I think I'm going to change this to 18. Copy and then paste. And actually instead of copy and paste, what we'll do is simply draw out a text field right here. And I'm just going to put in some gibberish for now. And I'm going to head over to website that quickly has Lauram Ipsum text. There we go. I'll just copy this first line right here and paste that in. And we want this to be smaller. And right there looks to be pretty good. By the way, we want to make sure this is lined up right there to the left. So that it is. That seems good. All right. Now, let's take all of this. Crl + Crl + V. And we'll change this here to backend development. And we'll leave the text the same down here. And then finally, all we have to do to wrap this up is create another icon and something that's relevant to the idea of backend. So I'm just going to put code brackets as an icon. So we'll use the pen tool and I'm going to come over here just so I get a good idea of the size. I'm going to hold shift. All right. While the putting the basically the 45deree angles. Oops. And let's go ahead and make this two. We'll take this crl + F. Right now I can't rightclick and just flip it horizontally or vertically. So I'm just going to move this over. And I'm going to double click it to get access to the anchor points. Hold shift while doing so. And we'll eyeball it right around there. All right. And then we're going to put a slash in the middle. And so I may have to move this over. We'll try right around here. All right. And then make them consistent. two. I'm going to move this over. Make sure these are even here. Bring this down. All right. Right around there seems pretty good. Okay. So, now we want to make sure we have an even amount of white space between the bottom of this element and the thumbnails, as well as the thumbnails at the bottom of the thumbnails and the top of these elements. And there's a little bit more as we can see here. So, we're going to take these. And there we go. We can see we get an even amount of distance between them. Okay. So, now in this clip, we're going to focus on finishing off the mockup here in XD by designing a second subpage. And that's one that's going to emulate what exactly it looks like and what happens when a user clicks on a project thumbnail. All right. So, I'm going to switch over here to the desktop. And the first thing we want to do is take our artboard one. I'm going to double click right here to rename this to home. By the way, take off caps lock. And then I'm going to with it selected hit + C and then Ctrl +V. And you can see it automatically just kind of pushes it over there to the right, which is what we want. And we'll change this one to details. Okay. So, when this occurs, when somebody clicks on one of these icons right here, these thumbnails, we're not going to have a navigation show up. We're going to kind of do something a little bit crazy and unconventional, which is, you know, okay for a personal portfolio site, especially for a designer, just to do something different. So, we're going to get rid of this right here. And I'm also going to get rid of all these thumbnails perhaps except for one. So, I'm going to get rid of these as well as this. I'm going to keep this one right here as well as this. Also, um I'm going to just keep one of these over here off to the side. And what we're going to do is have a two column layout. And on expanded desktops, large desktops or viewports, this is going to be approximately a 60% width over here. And we're going to pull this here to the top and to the bottom. And then we're going to take this right here and it's going to match up with this size. Now, one thing that I did I just recalled is instead of it being 100% based on the width of this column here, it's going to actually be the 100% of the browser width. So, part of it will be cut off and the person won't be able to see a full representation of what it looks like. And that's okay. Uh because what we'll do, we're going to take this rectangle right here. We're going to arrange. We're going to send it to or bring to front rather. We're going to put this over here. Drag it in. We're going to make it white. All right. Also, I'm going to copy this and then paste it. We're going to match it up right there. We're going to right click, arrange, and we're going to send it back. By the way, it's going to be this color again. So, take this, add that to the swatches. There we go. Now, the reason I have this right here is because based on the size of the project image, perhaps ones that are kind of more uh smaller in height, you're not always going to see the full representation of whatever it is that's being shown. Uh so for that reason, the background of this container right here is creating just a basic separation between these two columns. And you'll see what I mean more specifically if you're kind of confused as to what I'm talking about once we start developing the actual project. Okay. So this is what it will look like basically when a user clicks this. This is going to slide in to the right. This will slide in to the left. This little panel here. and then we'll have information about the project contained right here. So, let's go ahead and focus on that. I'm going to get rid of this icon right here. We're going to bring this over here. And we want to mount a good amount of white space between the left and the top and over here to the right as well. So I'm going to bring this down or in rather. Now let's focus on this specifically. Let's change this here just to some name of the project. I believe this one was elements actually that I pulled. And I'm going to hit Ctrl + Crl + V to copy this and paste it. And this is going to have back to projects. Now, we don't want this to take precedence over the main title. So, we're going to make this smaller. Actually, we're going to make it maybe 12. And also change the fill to right around there, which is 6E. 6E 6E. And for this, we're going to change the fill to black. We're also going to increase the size of this perhaps to 24. All right, that looks good. And also, one thing I do want to do, I'm going to make a change on these three text elements right here, is change the line height. So, I'm going to try 22. And that'll just space them out just a little bit further. All right, there we go. And then finally, the last element that we're going to have is going to be a call to action button right here where it says view project on Behance. So, let's take the rectangle tool right around there. Get rid of the border. We're going to have a fill 131 E30. Works pretty well. We can add this to swatches as well if we need it down the road. And then we'll use the type tool. Left click from the very left and drag to the very right. Center it. View on behance. And we'll change this text to or the fill rather to white. We can also bring down the size. I think just around 18 will work. And then move it to the center. Okay, great. So, this is what your artboards should look like at this point. All right. So, now what we want to do is connect them uh through the prototype tab up here. So, let's click on that. And you can see nothing changes except some of our tools goes away. So now what we want to do is we want to connect this right here once it's clicked over to this page. So we're going to click on a thumbnail. And by the way, if we go back to the design tab, we can see these currently are not grouped together. So we have this little text label here, this little background in this. Let me control G to group those. So now we'll go back to prototype and we'll select it as a whole. And then simply drag this over here to details as the target transition. We'll do slide right and we'll leave these default values of ease out and point4 seconds for duration. All right. And then for back to projects, we'll click on that. We'll drag it over here. And the targets home. We'll slide left. Leave these the same. And there we go. So, now let's go ahead and test this out. We'll hit play. We'll go ahead and click over here. And there we go. Very easy to use. Okay. So, as you can see, based on the transitions, that's not exactly how it's going to appear once we start coding in HTML and CSS and Angular, it's going to be a little bit more dynamic in that in terms of animation. But for now, in the current state of Adobe XD and its beta state, it's pretty limited in what you can do. All right. So now in the next clip, we're going to get started with just exporting a couple assets and also setting up the project in Angular.