UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma

Key Takeaways

This will be a UI and UX design tutorial that takes you from being zero to a hero in creating a website from the ground up. We're going to do this in several parts. First, we're going to have a look at how to do a wireframe so that we can make the website design and sketch it out. We're going to turn this into a light mock-up using Figma where we essentially plan out the elements that we want to create in this design. And finally, we're going to create all the images and text to turn this into a fully fledged website design. This whole process will be done over an hour where I'll take you through every single step so that if you need to understand how that process goes, the design thinking, the user interface, the user experience between each part, then this video will help you out. Now, my name's Adrian. I do videos around design and development. You can check out my channel in the link in the description below. And it's a channel that does all sorts of stuff from design to development. And if you're looking to improve your skills as well. But this is the free code camp channel and this channel has great resources as well for all things development related. So hopefully this will be an introduction to improving your designs in general whenever you're jumping into any type of project. Before we get started, make sure you guys hit like and subscribe. And without further ado, let's just jump straight into it. If you're planning on designing or developing a website, before you get started, it's really important to be able to do wireframing so that both you and the client has a good idea of what it is exactly that you're building and how it'll work. In this video, I wanted to talk a little bit more about wireframing. What it is, how it works, and we'll even build out a wireframe so you guys can see the full process. And we'll build this example out over here. If you haven't heard of me before, that's fine. I'm Adrian from Australia. I do videos around design and development, and you can check out my channel in the description below. But, without further ado, let's just jump straight into it. If you haven't heard of wireframing before, that's fine. What it is is essentially a visual blueprint for how the website will work, as well as the pages themselves. And it also works as a schema for the functionality of a system, so that you get a better representation of what's going on. It's really useful, and it's really easy to do, as well. It can take a number of forms. You could just use a piece of paper and sketch it out, or you could use your iPad, or even one of the third-party websites which allow you to do wireframing these days. We're going to take a look at a few of these examples to see how we can build our own wireframe. But, if you want to get started on your own, you can get started with just a piece of paper. And if you're worried that you're not a UI designer or a graphics designer in general, and you're not too sure what's going on, well, you don't have to worry about any of that, because wireframing doesn't require really any understanding of UI. You just need the bare essentials of being able to draw boxes and circles. We're not going to look into colors. We're not going to look into content or logos or any of that. Wireframing is just the way that the pages will work, and anyone who's doing design or development will be able to jump straight into it. So, let's take a look at how we get started by creating our very first wireframe. In this example, I'm going to be using my iPad, and I'm going to be using an application called Concepts, which is just made for drawing. But, I'll put a link in the description below, so that you guys can download it, if that's something you guys want to use. Otherwise, you can use a pen and paper just as well. The very first thing I like to do before I even begin my wireframing, and something that I think is really important, is creating your site map. The site map gives your entire website direction, so that you know what pages you're building. And with most site maps, the very first thing that you start off with is a homepage. Every other page flows out of that homepage, so you want to begin with that. And the very first thing you want to do is probably write out the most important pages you have. So, besides the homepage, this is usually things like the services page, or the product page, or the contact us page. These pages are the core of your website. And if you're doing an application in this case, maybe these are your main screens that you want to route to. But, these are the ones that have subpages under them as well. By creating a site map just very simply and visually like this, you'll be able to show and represent how all the pages work together. If there are subpages, you can branch them out as well. And if some pages are linked to others sideways, you can draw arrows to represent that. In this example, we're going to just start off with something very simple. So, what I want to be able to do is just an about us page, maybe a features page, and a homepage. And what we'll do is we'll design these as wireframes once we draw out the site map, and we might even create a responsive design for them. But, to start off with, let's create and finish up this site map just to see what we're going to be creating in this video today. Now that we have the site map done, let's start off with our very first page. And the first page we usually start on is the homepage. The homepage usually represents the design that we're going to be utilizing for the rest of the pages. And two of the most important parts of a homepage are the header with its navigation and menu, as well as its footer, because that's going to exist on most of the other pages. What we'll start off doing is creating a layout here for the home page. And usually what I like to do is create it so it's quite wide. We can zoom into it and we have enough there for almost 12 columns. So that if we want to use things like Bootstrap or other tools to do the layout, they're ready to go. Otherwise, we can always do our own layout for the UI. For the first part of this layout, what I want to be able to do is create a section here for the logo as well as the menu. And what you'll do in wireframing usually is just create basic representations of these. So in this case, I'm just using a circle with the letter L there to represent where the logo will go. And for the menu, I'm just drawing out a number of boxes here with a shaded one representing the current one we're on. And this will later be filled out with things like home, about, and other sections that we might have pages for. But it gives us a quick representation of what the header will look like. After we've finished designing the header, we can start looking at creating the main hero image. And the hero image these days are a big gigantic image that sort of runs behind the very front of the website as well as near the header. And a lot of the cases these days you'll find that the menu actually sits on top of that header image. While sometimes people like to place it in below. And a lot of these headers as well sometimes are sliders. So what I'm going to do is in this example, I'm going to draw an arrow to the left here and the right. And I'm going to represent this with a number of dots as well as the text here to say that this will be a slider image. And people will be able to slide between different options here. Now that we've done this top header section with our hero banner, we can start moving on to the next section here on our home page. And when we're designing a website, usually the next thing that you want to be able to do is either a call to action or a bit of information about a website. And this is really well represented with maybe an image, a large title, and some descriptions about what the website will be. So, what we're going to do is we're going to create a box here with a cross through to represent where we'll place an image, and we're going to create a title section here, which will have slightly larger fonts and a few lines to represent maybe some description or text we'll later fill in in this section. Now that we've got this section in, and we're going to be creating more sections out, it's good to be able to label our sections so that for anyone coming in from a third point of view, they'll be able to know what each section is. So, what I'm going to do here is I'm going to create out labels for each one of these. We'll have labels here for our menu, for our hero banner, and in this case for our about us section. That way later when we need to reference it, we can point it out, and if someone is coming in, they'll be able to identify it immediately. Now let's take a look at creating our next section over here. And what I want to be able to do is usually I break them into line items cuz sometimes you'll be able to copy and paste them across to other parts of the website. It also really segregates them. But in this case, when you create the website later on with the UI and the you um UI design, you might not need those section breaks. But now, we'll just create one more here. And in this case, I want to create a section break here for maybe something like testimonials or sponsors. In this example for our wireframe, we will have lots of sponsors to identify. So, I'm going to represent a nice big box here that's grayed out as a maybe H1 or H2, maybe even a H3 tag here that'll represent that as sponsors later on. And I'm going to draw a number of boxes because we'll have about 12 or so sponsors. And each one of these will follow that similar column design that you would expect when you're doing bootstrap where you can fit about 12 columns in a single section. And with this done, we'll be able to fill out this section quite neatly. We'll be able to identify it as a sponsorship section. Now, this is really quick and simple. And you can see that even the line isn't that accurate. And this is more or less done in just a few seconds. The goal isn't here to have a perfect UI with perfect box shadows and backgrounds and colors. It's really just to give a representation of how you plan the workflow of the website to be. When you've got that workflow down, you can move sections around. You can move maybe the sponsor section up or down or to a different page entirely. But the plan here is to give a representation of that section. Later, if the client come back comes back, and they only want three sponsors or two sponsors, you can simply update the layout and maybe provide something different in that case. The other thing I'm going to do in here is I'm going to add a button here to our about us section. And this will simply be so that there is a small call to action there that if someone wants to learn more information about that about us section, they can go to there. Let's take a look at creating a third section here. This next section will be our footer section where we'll finish up the website design, at least here on the home page. And when you're doing the wireframe for a footer, there's usually a few things you want to make sure that you add in there. I think that having the logo reset and placed in there again, sometimes in a reverse color, is a good idea. As well as maybe having a contact form and a site map. So, the first thing here I'm going to do is I'm going to create a small contact form, which will have a shaded out title with some inputs and a button to submit. Since we want to show that this footer will have a darker color, what I want to be able to do is show this visually. So, I'm going to draw a few lines here to represent that this might have a different shade or maybe it'll have a dark theme or something different in general just so that the footer stands out on each one of the pages. Once we've done that, the next section here I'm going to create will actually be the site map. Now, we don't have to give the actual pages in here. I'm just going to draw a lines to represent all the pages we might want to represent. And sometimes you might want to limit down your site map just to the core essential pages, but this is just a representation that we'll be having that in there. And finally, what I'd like to do is display the logo here last. And the logo will also have a bit of information underneath. And usually the last bit of information I like to include is maybe the phone number as well as the email address. So, that if someone's looking to contact that website service or product directly, they'll be able to do that immediately. Sometimes it's good to have this on the header as well, but at least this finishes up our footer section. And this means that most of our home page here is now done. And as you can see, we've got our slider image, about us section, some sponsors, and a simple footer. I know that some people like to keep pages for the home page just a single maybe height and width where you might not even have any scrolling, whereas other people might have parallax scrolling that might go and reach 20 screens in height, but sometimes that's too much. So, you have to make sure you balance it out. Now, since we're doing wireframing, one of the important things I think is worthwhile doing is labeling most of the contact content we're working with. This labeling is not really for us, but it's more for the people viewing this who might not be web developers. So, what I'm going to do is I'm going to select a different color here in our tools, and I'm going to basically start drawing out arrows to represent what some of the items here are. And this will just be visually really simple. Sometimes you can do this on a separate layer, so you can hide it later, but I usually like to make it clear and defined, so that if there are any questions, then they'll be immediately answered by this labeling. So, here I'm going to label out the contact us form, the footer, as well as the business contact information, and I'll work my way up, so that if there are any other things that might be worth representing, like the phone number and the email address, they'll be really obvious, and they'll stand out. The other thing I like to do is maybe go through some of the other sections here as well. If we're going to do good labeling, we need to make sure that we represent what some of these section um legends essentially are. So, in this case, like the darker block here will be a title, whereas these small boxes will be logos of the sponsors themselves. And this just makes it a little bit easier to read. Let's go through our design here and clearly define each one of these. So, in this example, this will be an intro title, and we're going to have some introduction text here as well to represent what this information is. Finally, let's go through and label this last image here on our left, and what I want to be able to do is just show clearly that this will be an image that'll represent the business or the information about the business in a particular way. Images are hot things. Sometimes people really want to have the ability to change an image to fit what information it's matching. And sometimes they don't even have that, so they use stock photography. And during wireframing, it's really not important which image you select. It's more about labeling what you'll be doing and where it'll be laid out. And later on when the client figures out what they want to do with all the imaging, that's when you can do all of that. Finally, let's quickly mock up our slider image in here and just say that there'll be multiple slides here. So, we'll need multiple images to display this homepage. And that finalizes most of our homepage here. And now that we're done with that, I think we can move on to our next section. When creating websites, we do have a number of different page layouts. And usually what we have is we have a internal page, maybe a blog page, a contact us page, and a features page. And each one of these will have slightly different layouts. And in this case, one of the difficult layouts to do is actually the features page. This is the page that really has to promote your product or your website. So, what we usually like to do is we like to make it a little bit more interesting with more photos and text and call to actions to really engage the customer or the user of the website. What I'm going to do to create this page is I'm going to copy over the header section. We want to keep a consistent header throughout all our web pages. So, in most cases, I will be copying this across. What's going to be different about this page is that we're not going to have that very large slider that we had on the homepage. Instead, we're going to have a title section here. And I'm going to define this by creating a separate section in here and labeling it with the page title with a darker shade there to represent that H1 element. This will later on be themed based on the colors that people might want to use for the features page. But for the time being, we'll just keep it black and white just so that we know that the title would be in there. For the features page, when we're creating different sections, we need to really visually represent those. In this case, I want to represent the features page with a number of large images and large blocks of text to really show off what this product or service will be defining. So, what I'm going to do is I'm going to have a large square box here, which will represent the image, as well as a large title and a description. And this will be our very first service in here. In this case, sometimes services have some bullet points to show off what they do. So, I'm going to create some bullet points in here, and each one of those bullet points might have a tiny little icon or image as well. And this creates our very first section here for a feature image. But, what's really cool now is that we can reuse this to create the next section for our next feature. So, what I'm going to do is I'm actually going to just copy over the layout that I previously used for the very first feature. And I'm going to copy over the image as well. And in this case, I'm going to reuse them, but slightly different. I'm going to actually place them on opposite sides. This will make the page just a little bit more interesting without actually trying to redefine it. And it keeps things consistent, as well. Now, if we have a number of services, we can actually just copy page copy paste each section down below. Once we've done this, we'll have a very simple representation, so that the user will understand what's going on on this page. Let's label this, though, for someone who might be viewing this wireframe. We'll show off that this will be feature one, feature two, and feature three. And later on, we can find images and text to do this, but for the time being, this gives us a clear indication of what the features page will look like. The only thing that this page is now missing is the footer. But, we can copy that across really easily. So, what I'm going to do is I'm actually just going to grab the footer here from our home page. And we're going to copy that across straight across to new features page and we'll be able to copy this across to all the other pages that we make. We might not need some of that additional markup that we created there on the home page because it's a little bit redundant. But what we can do and I can see that is missing is maybe a copyright section cuz whenever you do have a footer, you do usually have all that information in there. But usually also have a really small section there for a copyright. So let's actually create that and that'll be just something really small on a font size which is usually just a bit smaller than what the default font size is on a website. And we'll just represent that with a single line, but we'll mark it up to say that this will be the copyright section. And let's also copy that across to our features page just so that it's consistent all the way throughout. You'll find that when you're doing wireframes, you can just do this in a few seconds. And later when you're doing the actual layout and UI, maybe in Adobe XD or Figma, you can create out different section components which you'll really easily be able to add to other pages. But in this case, we'll just do it quickly and manually. Our features page and home page are now done. But right now we don't know how we get from one page to another page. So what I'm going to do is I'm going to just draw out some really large lines here to show how you navigate from one page to another. The first will be here in our header where we'll design a line to show that one of the header items will take us to the features page. And the other will be just in the about us section where when we select the button, it'll also take us to the features page. Now that we've represented Now that we've represented the navigation here on our wireframing, we can move on to the next page. The next page I want to create here is our about us page. And actually, um maybe no. Maybe let's try a different page. Let's try doing a contact us page. This one is actually underrated, but it's one of my favorite pages. I know that whenever I'm visiting a website or a service and I want to get in contact with them, especially if they're a local near my area, the contact us page is probably one of the very first ones I go to cuz I just want to give them a call or an email. So, in order to create this, let's just simply copy out our header here again. The contact us page has usually a number of elements. So, the header and the footer are the first two most basic ones and since we've designed those already, I usually just copy them across for each page I do. The other ex- The other aspects of the contact us page I usually like to add in are the um the phone number, the email, maybe a form to represent maybe a contact form that you might want to simply fill out, as well as a map. I think a map is important, especially if your business is local or your website is doing a local service and people need to be able to get to it. So, let's copy out a small section here for our title, like we've done similar to the features page again, so that it's all consistent. And then let's create some of those other elements. So, in this case, let's create out a representation for the map. And in this case, I'm just going to do it similar to what I did with the images on the home page and the features page where it's just a large box. We do know Google Maps usually has a little box at the top left to represent the address, but this should visualize that and we should be able to add some markup here as well to let people know that this will be a Google Map that they'll be able to actually click to and get directions straight to this business. Next up, let's create the section here for maybe the contact us information. So, in this case I'm going to do a small little icon here. And maybe this will be like a font awesome little phone or something like that with the phone number here. And maybe we'll use another one just like this with maybe an envelope to represent the email address, which we can add in the line below. With these two being the most important, we usually always add them at the very top. And straight after that, some people just like to send a message through a simple contact us form. Now, in this case, we already have a contact us form here on the footer. So, sometimes when you don't have those in the footer, you can add them here to the contact us page. But in this case, since we already have one, I think it might be a little bit redundant to add another one. But what I might do is just add one in visually as a representation of what it should look like if we didn't have one in the footer. And in this case, it'll just be a few check boxes with maybe a larger one here, which might be a text area where people can fill it out with a slightly darker call to action button, which will be the contact form submit button. And this should finalize our contact us page. As you can see, it's a lot smaller than our home page and our feature page, but it's because it's straight to the point. It gives the information that we're trying to provide here straight away. And in this case, let's do some navigation to show how we'll get to that contact us page. And in this case, it'll just be selecting the menu at the top right to make sure that we're browsing straight there. Usually, sometimes you also might have a contact us page somewhere near the footer, but we'll keep it nice and simple in this case. Now that we have our home page and our features page and our contact us page done, I think this is more or less most of our content done in general. What we could do is we could lay out some of our components here just so it looks visually a little bit better. If you're doing out wireframes, usually you'll want to do quite a few pages. You want to do internal pages, category pages, maybe product pages, and lots more. And the other thing you'll want to do is you want to make sure that you also create ones which might be responsive. This means that you might want to create one ready for a tablet or a mobile phone. Let's take a look at how we can quickly do an example of a mobile responsive design for the home page because I think that would be useful just so that the user or the person viewing this wireframe gets a better representation of how the design adapts when you go down to a scroll smaller screen size. So, what I'm going to do is I'm going to put in a label here for mobile version. And what I want to be able to do is create slightly smaller um a slightly smaller width. It'll be what you would expect for a mobile phone. So, it'll probably be a lot longer than the actual home page and we'll probably have to add slightly different elements. In this case, the very first element that we want to do when we're doing a mobile responsive design is a button for the menu and a second button for an interaction, usually to call the service or business or maybe to email them or something like that. We'll add the logo in the middle here because it'll probably be very small. We'll have to make sure it has enough room. And we'll still draw that little square in the background to represent the slider image, which will be a lot smaller. Sometimes you don't even have sliders on the mobile version and you just have a single image. Now, let's put some markup here to represent what each one of these items are and in this case, it'll just be the mobile button, which will expand out the mobile menu as well as the phone number or mobile number, depending on what it is. Let's draw out an L just there to represent the logo and have a look at creating our next section here. Our next section was an intro section, which had an image, it had a title, a description, and a button. Now, since we don't have that same wide angle that we do on a desktop, we really have to collapse this down to a single column and row. And in this case, what we're going to do is we're going to rearrange some of the content, so it makes a bit more sense. Sometimes people put the image first, but there's no context to that. So, what you want to do in this case is put the title with a description in first, and then the image can follow this. These will all be collapsed down to a single column, so that they fit in nicely, and they'll flow on based on the information that they provide. Let's actually copy out an arrow to show that this is the responsive version of this same content. When we go to a responsive version, we usually make the margins from the top to the bottom a bit smaller, as well as the font size and the images a bit smaller. So, as you can see, this section is almost the same size as the previous section. But, obviously, this might work differently in practice. It depends on how you're arranging the content. The next section here was the sponsors section. And when we're collapsing down this section, since the sponsors already are quite small, we'll actually be able to fit about two in on the mobile design. If you were to go up to a larger size, maybe a tablet view or something like that, maybe you could even expand them out to four or six items per row. But in this case, we'll just stick it in with two items, or in this case, maybe three items. I don't know, three looks like it's just barring the edge of what's possible, but at least it doesn't make this section too large. Finally, let's take a look at the last section here, which is the footer. And for the footer, yes, the contact us form is a little bit in the way, so let's move that out of the way. And let's create out this footer. Now, since this footer actually does have quite a lot of content, it's probably going to take up a lot more space. The very first thing here we'll want to add in is our contact us form. So, let's represent that with a title, a few inputs, a text box, and a button. And after we create this, we can move on to the sitemap. And this will be the next main column here that we want to provide. And this column will, again, have more or less the same information. We could even copy-paste it across. And sometimes you might not even want to have so many items, and you might hide out one of the columns if you don't want to use them. But in this case, I do want to use them. So, I'm just going to create this next section here as a sitemap. So, let's put in a header section here to represent that. And let's put in a few lines here to represent the menu items for that sitemap. And finally, let's create our last section here, which will be for the logo and the contact information. So, in this case, since we're in a mobile design, we could make the logo here for this footer section full width, or we could make it half width, and we can create icons here for the phone number and the email. And that finalizes our mobile design. We now have our homepage with a mobile version, our features page, and our contact us page. And these are the basic building blocks to create out the rest of the website. What I'm going to do is put a copy of this wireframe as an SVG in the description of this video, so you guys can check it out. I've done lots of wireframes in the past. Sometimes I just simply use a piece of paper and pen to create them, whereas other times I might create something in Figma or a third-party tool. But the goal here isn't to essentially use a certain tool to do it. It's more about creating a simple view for yourself and the client to present as a plan of what you're building for your next website or application. We're going to be looking at creating the UI for these wireframes. I want to design something which looks a little bit better, is more professional, and it's a closer step towards building out a full website design. In this stage, we're going to create the prototype UI for this wireframe. It's not going to involve any colors or images or content. It'll more be a version or a next iteration of that wireframe where we're creating it in a design tool like Adobe XD or in this case Figma. I'm going to take you through the whole process of designing this. And if you haven't heard of me before, I'm Adrian from Australia. I do videos around design and development, and you can check out my channel in the description below. But without further ado, let's just jump straight into it. To create our website design, we're going to use a design tool called Figma. And this is very similar to Sketch or Adobe XD if you've used those in the past. It allows you to create a mock-up of the website design on an artboard which actually exists in your web browser. So you can use this on Windows or Mac or anything in general. And you can edit this in real time and even collaborate with other people. And if you want to sign up, it's also free. You don't have to pay anything. We're going to sign up here with our Google account, and we're going to create a new board to start our UI design. Once you're logged in, you want to go up here to drafts and hit the little plus sign. And this will create a brand new Figma file. In this case, we're going to give it a name. So up here where it says untitled, we'll call this maybe freecodecamp website UI. And we can start coding this up, but we don't need any code. We can just use design to do this. Let's take a look at the different tools that Figma provides for us. At the top here, we've got the selector tool, which we'll be able to move different shapes and items. We also have a scaling tool. Over here, we have a frame. And the frame is used to create new frames or canvases to create our designs on. Over here, we've got our shapes. So, these are things like squares and circles and lines and other objects that we might want to do, such as images. And finally here, we've got our custom shapes, text, and moving the artboard around. Finally, over here, we've got our comment section, but we're not going to really use this. This is more if you have a group of people and you need to leave markup and notes for others to review for your design. Let's start off here by selecting the frame tool. And on the far right here, we've got a number of options. We've got designs here for maybe phones or tablets or even desktop. If you're doing a design for maybe something like a piece of paper, you can do that, too. In our example, we're just going to grab the desktop size over here to design our canvas. I'm going to make a small revision to this, however. For the width here, I'm going to do this to 1980, because this is the normal monitor width that you ex- essentially usually use when you're doing a website design. And the other thing here is the height. I'm going to also make this 1980, and we might also increase this a little bit as we work through it, but this gives us our first frame that we can work on. And this will be the home page. So, over here, you can see a desktop desk one. We're going to rename this, and we're going to call this home page, and this will be our first canvas we can work on. Now, we've got our design that we did before on the iPad when we did the wireframe. And what we want to be able to do is replicate that same design in a better sort of mock-up here for this UI design. So, I'm going to take you through that. But before we get started, let's open up and have a look at that wireframe to see what we need to build out. What's really cool about Figma is that we can literally copy-paste content straight in there from our computers. We can even drag and drop it. So, here I have the previous wireframe we did. And I'm going to copy-paste this just here to the left that we can use as a reference. And we can see here we build out a home page, a features page, a contact page, and a mobile version. If you haven't seen that video, I'll link it in the description below. But what we're going to do is we're just going to use the home page here as reference. And I've got a separate SVG just for that, which we're going to copy out here to the right. And using this reference, we'll start building out a UI against this so that we can create something which is visually just a little bit better and more professional as well that we can show off to our client as the second iteration of our design. Let's begin by dragging our actual SVG here into our page. And what I want to be able to do is create out each one of these sections. But before we do this, normally when you're creating a website, then you're using a framework for the layout, maybe something like Bootstrap with rows and columns. So, let's create a little bit of a grid layout here. There's an option here on the far right called grid layout, and I'm just going to select one in here. It does a default 10 pixel by 10 pixel grid, but we want to customize it to be our own. So, in this case, I'm going to select columns. And for columns, I'm going to do 12 because that's what normal Bootstrap uses. Of course, the uh width for this is a little bit too much, so I'm going to reduce it down, and we're going to select a gutter of 15 pixels, and maybe a width of about 80 or 90 here, just to represent our columns. Of course, this can change depending on what you're using, but this should just get us started. The next thing we'll want to do is create here our section for the slider image. And I'm going to select the box tool here at the very top left, and we're going to drag and pull down to the bottom right here, a nice big box. This is a little bit too big right now, so I'm going to reduce this down to maybe 800 pixels. And we're also going to give it a slightly lighter tint. So, here in the far right, in the fill section, we're going to change the C4C4 hex color to just EEE, and that should be a lot more visible now. The next thing I want to be able to do is have a look at creating a menu. And to do this, we select this uh box tool once more, and we're just going to drag it and follow our uh columns here. We might not use all the columns, we might just use most of them here, and we'll give this maybe a height of about 60 pixels. So, let's update this here on the far right. The next thing we're going to do is select the box tool, but drop it down and select a circle. And for the circle, this will be the logo. So, I'm just going to pull it in here from the left, and this might just pop in here as two columns in width, with one column here having a space between our menu and our logo. And it'll be another circle in here. So, we can see that a lot better. Let's take out the grids here, so we can see these items a little bit clearly. Uh here we go, and we can see we've got our logo and our menu placeholders there. For our logo, I'm going to select the text tool here, and I'm going to type in logo, Just anywhere here on the page. When we zoom in now to maybe say 75%. Let's just do that here at the top right. And have a look. We can pull this straight here towards our logo and our circle. We'll make this a little bit bigger. I'm going to make it 24 pixels, maybe even 48 pixels. And I'm just going to put this right on top of the circle. I'm going to give it a slightly lighter shade. So, maybe something like 999. And it'll just go over here. We can add it in later. The other thing I'm going to do is I'm going to group these two items. Right now, this is just called an ellipse and a logo for text. But, I'm going to select both of them and hit control G. And this will now be a group. And for this group, I'm going to label it logo. Just so that we can be able to use this later on. If we do, we can always expand it out here on the left or double-click on it to access the items inside. Now, for the menu, I want to be able to do the same thing. So, what I'm going to do is grab the text item here. And I'm going to put in a few different pages. Since we know which pages we want to use, it'll be pretty easy. We've got the home page, which we've already built. We'll have an about us page. We'll also have a features page. And maybe we'll have a contact us page. Let's create one more item in here. And normally the final item we might have is something like pricing or maybe purchase. And this is usually on most websites, just so that it takes us to where we need to go. Now that we have all the menus done, all we need to do is space them out equally. Cuz right now, they sort of don't have the correct amount of spacing. There's a few ways we can do this. We can pull one of the items from the very left here, and we can do 1 2 3 4, which is 40 pixels from the left. Then we can apply the same to the about us. So, we'll do 1 2 3 4 here. But, since this is padding from the left here, we'll do another 1 2 3 4. So, that should be about 80 pixels. Then when we do the next unit over here, we should be able to apply the same amount of padding. Figma actually has some tools here that automatically tell you how much padding is applied. So, here we had 82, so I'm just going to reduce that by 2 pixels for both of these. And that should be just about right. So, if we have a look now, it's 80 and 80. Let's move this down as well, so it's on the same line height. And we can then browse over here to the purchase one, also put in 80 pixels. So, here is 80, here let's double check that's 80 as well. It doesn't seem to be 80. Let's have a look. 79. 80 80 and this one over here will be 80 as well. Then we can move this menu in just a little bit. So, this should be about 80 pixels as well from the far right. And finally, we want to highlight our active item, which is the home page. So, I'm going to copy over this box and I'm just going to create another one on top here. And this one will have a darker shade. So, maybe something like 666. And we're going to invert the color here for the home. So, that'll be white on dark gray. Now with that done, we have our menu more or less complete. We can reduce the height a little bit. So, instead of 80, we could push it down to maybe 60. Let's actually move it down just a tad here. We can see that it's fitting in quite nicely there. The next thing we can do is have a look at creating our slider here. Cuz right now it doesn't look like much of a slider. So, in order to do that, what I'm thinking is maybe create a couple of those arrows here on the left and the right. Now, there's a few different ways we can do this. We could go to Font Awesome, for example, and we go chevron left here. And this is a icon here we can use from Font Awesome, and we can actually download the SVG in here. When we do, we can literally drag and drop it straight into our design over here. Right now, it's a little bit too big, so I'm going to resize it down just a tad, maybe down to about, say, let's see. We'll look in the resizing tool here. And I think for the width, I'm going to do 40 pixels, and the height can stay at 64. And that's just about right, and we're just going to center this here to our slider. We'll also give it about a 40 units there from the left. And we'll also reduce its color. So, here on the right, I'm going to give it a 50% opacity, just so that it's not fully black. We could even reduce this down a little bit more, maybe a 33%, and that's just enough to give it a bit of a gray tint, but it'll also blend into the background later if we add an image in here. We can copy over this same chevron, and place one here to the far right. I'll give this another 40 pixels, and I'll also rotate it, so it's pointing to the right side. And finally, we might add a few little dots here to the bottom of our slider, which might be about 22 pixels in width and height. And we'll copy them over, just so that they can represent the slides themselves, and which one is the current active one. So, let's do that just over here, and we can give them about 10 pixels of space in between. And with that done, I'll also color in the very primary one here with that dark gray tint. So, that's our slider done for our home page. It's also our logo and our menu done. And this looks pretty accurate comparing with our slider image. The only other thing we could do in here is maybe some hero text. So, in here I'll just put in hero title and I'm going to give it a slightly larger font size, maybe like 72 pixels will be just about right and maybe a heavier weight at maybe bold. Hero title example can be our primary text here. Now, if we open up the the frame here with the columns and make them visible, we can make sure it's aligned properly here to the left. And I'm going to copy this over and make a smaller one here. And this one I'll give it a regular weight and this can be a hero sub title description. Beautiful. We'll also give this a slightly uh slight opacity at maybe 66% and we can turn off the grids over here now, so we can take a look at that. And in terms of a slider, this is pretty good. I'm pretty happy with this hero banner slider and navigation. Now, we can take a look at creating the next section in our design here. And the next section, if we take a look at it, it's actually doing the about us section where we've got an image on the left, we've got a title, a description and a button. And this should be pretty easy to do using our column design. So, let me pull this in here to the right so we can start working on it. So, I'm going to copy over this entire section that we had here for our hero and create this one with a slightly lighter tint, maybe something like F1F1F1. This way we can see that we do have a height to it, but we are going to work within the bounds of that height just so that we don't make anything too large or too small, but it's consistent with all the other sections. What we want to be able to do is open up our rows here. And for our rows, I want to be able to see them and I want to work within the bounds of them. And by rows, I of course mean columns, but you get the idea. What we're going to do is we're going to create a square here to represent the image, and this will span about four columns. I'm just going to center this inside this section right over here. And the next thing I'm going to do is create a description section where I'm copying out the hero description and pasting it just here on the right with maybe a one-column gap. I'm going to bump this height up a little bit so that it's got less margin between the title and the description. And I'm also going to copy out this description, create another one here which might be 24 pixels in width of font size anyway, and we're going to expand out this section. Let's jump in on the Lorem ipsum website here, and let's copy over our favorite bit of text. We're going to paste it here in the description, and anyone who wants to can edit this in the future, but it gets our description up and running. I don't want so much content, so I'll remove some of it. But below here, if we take a look, we are almost getting the design the same here as our wireframe. What we need though is a button. So, I'm going to copy over this image. I'm going to pull it here over to the right. And I'm going to give it a height of about the same as the menu, which was 60. We're going to reduce the width a little bit here, and we're going to add some text here to put on top of the button. Here we go. And in this case, I'm going to do something like read more. This is pretty standard. The only other thing I might do here is bump up the text just a little bit to maybe hm, 28. 28 does just about right. Let's resize the text sizing uh box over here, and let's also center this read more section. This button here, I feel like it'll do a lot better if it's a darker shade. So I'm going to make it a 666 with the color for the read me being a white color, and that way it can stand out just a little bit more. So that way we've got this section done here, and it's starting to look pretty good. I'm pretty happy with it so far, and I don't think we need anything else. It gets us started for this introduction section. I only think that the title here for the hero is a little bit too large, because we've already used this large size on the hero image. So what I'm going to do is I'm going to bump this down just one lot of units to maybe 64 pixels, or maybe even 48 pixels. 48 might be a little bit too low, so I'm going to reduce it down to say 60, and this one over here maybe to 36. That way they don't look a little bit too overwhelming. They still fit within the confines of this section, but they don't overwhelm you similar to how the hero section is meant to be a lot larger. Now let's take a look at this section without any grids implemented. I'm going to re- turn them off over here, and I'm also going to take off this gray color for the background of this section. And we can see that it's looking pretty good. If we take a look at our original version here, we can see that we have quite a bit of padding here from the top to the bottom. That's almost 200 pixels, but we can reduce that in the future. It's more about keeping this section similar. I'm going to copy over this section, but before I do, uh we should really have a look at how we're doing the grouping on the left here. Cuz right now it's a big mess, and we don't know what anything is. So, what I'm going to do is grab the common items in this section by shift-selecting them, and I'm going to group them with control G. And in here, I'm going to do about us section. This will be a clear indication of what this section is because right now, we are not too sure. In here, we can give some more labels as well. So, this might be the image. Over here for the read me, I'm going to group that as well. We'll do this as read me button. And then, finally, we've got one more rectangle here, and we'll call this BG in case we do want to add a background later. If you're feeling particularly um ambitious, you can also reorder these things so they make sense logically. So, for example, the title might go first, the description second, the text and the button last with image here being first being on the left of these columns. And that's our section done here. The other thing we can do is actually lock it into place. So, that way, we can't select it or move her about anymore. This will be a good idea to do as well here for this main hero section. So, I'm going to grab a lot of these elements here so that we can group them all together. That way, they can exist as they need to. So, we'll call this hero section. And the other thing we have to do is the same here for the menu. So, I'm going to group these and call this menu. And we'll pull this up above our hero section. And we could even pull it inside the hero section. But, normally, since we'll be using this menu outside for other pages, it might be useful just to have it outside. The same goes here for the logo. So, I'm going to pull that outside as well. That covers most of our section here for the hero and for the about us section. So, let's actually lock these into place so we can begin working on the next section. I'm also going to increase the height of the home page here to 250 or 2,600 pixels. And this will give us room to create the section here for the sponsors. So, what I'm going to do is copy our about us section, and I'm going to drag it in here below. But, I'm going to make a few changes to it. So, over here, if we have our button for read me, I'm going to take that out. The one here for the description, I'm going to also remove that. We'll only be left with the hero title and subtitle. I'm also going to put this up all the way to the top of this section, and I'm going to try and center these so that they exist right in the middle of our page. If we move it across, we should have Figma essentially tell us by a red border when it's ready there. Finally, I'm going to enable our columns here again so that we can see them. And this image that we have here for our design, we're going to shrink this down to be essentially two columns in width. And we're going to copy this across. So, let's actually copy this in here, and I'll keep copying this across until it spans all of our row here. And these will be our sponsors. Now, you can see that we've fit most of them in here, and I think that's pretty good. The only other thing I want to do with this section is possibly give it a slight background tint. I'm going to grab the same tint we used here for our header, but now that we have applied a bit of a tint, we are going to have to expand it out just a little bit so that the title section there has the same sort of height as it does in the other section. So, I think that's about 200 pixels. Let's move all of these down, and that's looking a little bit better there. Since this isn't a hero title example, this is about us, I'm going to rename all this rename this to about us example, and about us subtitle. For this section here, I'm going to do this as the sponsors example, and the sponsors description. Let's center this. And since this is aligned left in terms of text, there's a tool here that gets us to align at center. So, I'm going to apply this both to the title and the subtitle, and I'm going to move them again into the center so that they're working properly. And that should be just about there. We also want this to have a little bit less padding from the bottom there. So, I'm thinking just about 200 pixels. And that's just about right, but it feels like it's too many pixels. I'm going to maybe we make it only 100, and that's about 100 there. So, that's pretty good there for our sponsors section. I'm just going to move the images up just a tiny bit. I'm going to redo how centered this is so that it just does look centered. So, that's all done, and we can move on to our final section, which is actually our footer. So, we're almost done for this design, and it's starting to come out pretty good. Let's remove the columns over here to have a look at the sponsors section. And the thing about this is that if we take a look at the about us section, it's got about 200 pixels of padding there from the bottom and the top. But for this sponsors section, it's only about 100 pixels. And this is because there's less content, so it's got a bit less room to breathe there simply because it's not overwhelming with content. The more content you normally put into a design, the more padding you want to make sure that you're adding in so that everything stays consistent. In here, I just want to make sure it's just about 100 pixels. So, that's looking good. Now, for the footer. A footer design it normally has a much darker tint to it. So, what I'm going to do is I'm going to copy over this home box that we created earlier. I'm going to use this as the baseline for our footer over here. So, let's actually cut and paste this in here below. I'm also going to make it a little bit bigger here. So, I'm going to expand this out just here to the bottom. And that should get our footer section ready. Now, if we take a look here in our wireframe, we're using a logo, a contact form, and a site map. Since we already have a logo here, I'm going to actually copy this across and we're going to paste it here below. We can see that that automatically looks okay. Uh the next thing I want to do is this rectangle. I'm just going to group it in its own section here, and I'll call this footer BG for the time being. And the logo I'm just going to move in here, and we're going to group this whole thing as footer. For this section, I want to open up the columns here again so we can see what we're working with. And we want to design something around these columns. So, if we take a look at the actual SVG here that we created before and how it's designed, we can see that we have the three columns here. So, the first one will take up four columns. The next one will take up another four columns. So, let's let's do that over here. I'm just going to block them out so I can see how much space they're taking up. And there we go. So, those are the columns we'll be using. So, in here, I want to put my first title. So, I'm just going to apply that. Possibly, let's move the logo here to the left. And let's put in these titles. So, for the title here, I might copy over this large text that we use for our sponsors and just drag it in below. We'll move it up here into the group, but instead of being a black color, I'm going to make it a white color just so that we can see it properly. So, here I'm just going to select white and for the description here, I'm going to set that to white as well. I'm going to pull this in over to the left, so it's aligned left, and I'm also going to give it some padding here from the top. And this is about 10 pixels worth of padding, and I think that Sorry, 100 pixels worth of padding, which I think should be just enough. Here, I'm going to write in contact us, and let's just set this to be aligned left, and we'll move this back over here to the left. And here, I can write something like send us a message. I'll also align this to the left here, and we'll make sure that it just starts off here near the column. So, that's looking good. The next part that I want to do is copying this over and creating a bit of a site map. So, here I'm just going to type in site map, and all our pages. And finally, we've got our logo over here. We do also want some contact information below our logo. So, I'm just going to copy over this subtitle text, and in here, we're going to put in a phone number. In this case, I'm just going to make one up, but that should get us up and running. The only other thing that we have in here is actually a little icon there for the phone. So, I'm going to jump into Font Awesome to get that. Over here, I'm just going to type in phone on their website, and it should pop up with a few icons here. I'm just going to grab the very first one to download, and I'm going to just drag and drop that in. We'll set the color here to be white and I'm just going to resize it down here to about 36 pixels and we'll just align that just to the left of our column here. We can pull in the phone number just a bit and that looks good. We can then copy this across and we can do another one here and this second one might be the email address. So here I'll type in email@address.com and we can fill that in later but we'll probably want an icon for that, too. So over here, let's do envelope and I'm going to probably select the very first one over here as well and I'll just click to download that one. I'll see if I can drag and drop that in and that has not appeared at all. I'm not sure what happened there but that's okay. We'll just delete this phone over here and I'm going to drag it in once more and I'm going to set the height and width here to 36 pixels. Great. We'll also change the color here to be white and I'll just drag that here next to the email. So we've got the email and the phone now done. Let's do the contact us section. Now for this section, we'll have some forms here. So as a form input, I'm going to actually create a box here and I might give it a white color. This will represent the input and I'll just increase the height here to about 60 so it's consistent with the rest of our buttons and stuff and I'll also put a placeholder text in here. For this, maybe I'll write something like full name and we can make this a little bit smaller, maybe 24 pixels and we'll also give it a slight shade. So maybe a 50% opacity will apply that. There is our first input. I'm going to copy that across and create a second one here and for this second one, I'll do your email. And we'll maybe create one last one here. And this last one we can actually give it one more column for the sizing here. And a little bit more height, maybe 120 in this case. And what this can be is our message. Uh so let's pass that in here. Finally, we'll need a button people can click on. So, I'm going to copy over this input one more time. And this time we'll drag it here in below. And I'm going to reduce this width here to two columns. And I'll type this in as maybe submit. Now, we want this button to stand out a little bit. We don't want it to be the same as our inputs. So, what I'm going to do is I'm going to give it a nice dark color. Not exactly black, but like a dark gray, which is a 333 in the hex colors. And we'll change the font color here to be white at 100% opacity. So, that way we can see it standing out there. So, that's our contact form done. That looks pretty good. Let's fill out our site map over here. I'm going to copy the full name text over here. And this can be used for our links. I'm going to set this to a full white 100% opacity color. And in here, I'm just going to put in a couple of links. This doesn't have to be anything special rule. Just copy out the same links that we had on our header here. But uh what we can do is maybe we can play around with the sizing just a tad because it does feel like it's a little bit too small. But once we do, I can see that that's looking much better. As we have more pages, we could fill this out and we could even in data indent it if we had subpages. But this is enough for our footer design here. The only thing we're missing now is a copyright section. So, I'm going to actually create this at the very bottom here. And I might give it 100 pixels of height here. And we'll give it a darker shade. So, what I'm thinking here is maybe the 333 color that we use for our submit button. And let's copy over maybe our text here for our subtitle and place this above the element. And what we want to do is just put in a generic copyright message in here. So, something like copyright 2020, um all rights reserved, uh company name. Beautiful. We could even put in a copyright icon for there, but for now I'm not going to worry too much about it. It's also a little bit too big. Copyrights are usually a lot smaller, so I'm going to reduce this to 24 pixels. And I'm also going to center the text and center the positioning here so that it's exactly in the middle of our page. So, that looks much better. Now with our footer done, we're mostly done with our home page and this has actually turned out quite good. We can have a look at all the elements here and what we can see is that in terms of the spacing, the only issue I have here is maybe this about us section is just a little bit too big. I'd like maybe for there to be about 100 pixels from the top and the bottom because at 200 is almost too much. So, what I'm going to do is actually move this section up a little bit and we'll make sure that it's 100 pixels from the top. 1 2 3 4 5 6 7 8 9 10. And this square here, I'm going to resize it and just go 1 2 3 4 5 6 7 8 9 10. Beautiful. And then we can move all the other elements up here. So, that is looking much better. Now, let's just make sure we grab all of these and move them up. So, if we have a look now, we have consistent spacing between each section. We've got our header and footer and we just resize our our frame here a little bit just to cut out the bottom bit here. Now that we're finished with the homepage, let's take a look at our original wireframe and how it's been applied to our UI over here. Originally, we had our slider image here and we've applied that with our logo and our menu here at the top and that's come across quite well. We added some font awesome icons here on the left and the right, but we've also added in some text here and this is pretty important because a lot of the times when companies do have images, they also want to carry across a statement and this will do that. In terms of the next section here for about us, we've followed the grid structure here of column design and we've made sure that everything is consistent so that later if you want to do a responsive design, each one of these columns can break into a row. And for the sponsor section, we haven't added 12 sponsors in there, we've just done six. Usually sponsor images are pretty big and if you have them really small, you won't be able to see them properly. This way, by just having six right here, they fit into that column design a lot more neatly and if we wanted to, we could add more, but they can also collapse down much easier, too. And finally, we have our footer over here where we've had a contact us form, a site map, a logo and some contact information. There's room here for growth as well if the site expands out further or at least these are the basics of what you would expect in a footer as well as our copyright there at the very bottom. The design for any website or app is one of the most important steps before developing it. We all know how hard it can be to change things down the track and this is why I always like to measure twice and cut once. We've been looking at this series where we've been putting together a website design. We've done the wireframe for it as well as a small UI prototype. In this video, we're going to be doing the full mock up for this website design. This will involve adding in actual pictures and content and other things to flesh it out. Here are the items we were working on previous videos. Here we can see the example of the wireframes we've created for a homepage, a features page, and a contact us page, as well as a responsive mobile menu. If we go across here, we can see how in the next video, we actually build out a small UI prototype for this one. Here we've got a bit more of a idea of what the pages will actually look like. We're going to use this as reference and copy this out to create our actual mock-up in today's video. This will involve filling out real content, which will mean that we probably need this website to have some sort of a meaning or a real logo with an actual bit of content here. Now, I'm doing my own sort of a website recently. It's called Enhance UI, and it's going to be designed for developers. So, I think this will be a perfect example where we can fill out some content and build it around that sort of a brand. The first thing I'd like to be able to do is pull in a logo over here. Right now, we just have a placeholder for one. I've actually got a logo ready to go, so I'm just going to drag and drop it right into here, and we're going to make it around the same size here. And this will just fit in nicely there. The other thing I want to be able to do is change the background now. We're working with a much darker shade here. So, this gray here probably won't work very well. So, what I'm going to do is I'm going to select this layer here, and I'm just going to grab the background color of 1E 1E 1E, which is what we're using for this example. I'm also going to grab the title and subtitle here, and I'm going to select both of these two have a white color, because right now they're not very visible. And this gets us started with this section over here. The next thing I'd like to do is add a bit of a background to it. So, here we've got a few different options. We could add maybe a background color or a background image. And in this case, I'd like to be able to grab a background image for it. So, I've got another image which I've gotten ready here and I'm just going to drag it in. We're going to move this layer just beneath our rectangle here and place it in here just like this. And this should fit in quite nicely. Now, we've got an example of how a background image and some text here can fit in very well for our header section. And all we really need to do is clean up maybe the menu and the title here. So, for the title bit, I'd like to write in something like uh design for developers. And for this, learn how to enhance your website. So, there's our title and description. And the only other thing I want to do is maybe throw in an image of a book in here. So, in this case, I've got another image ready to go with the book that I'm working on for this website, which is just over here. And it's already got a bit of a box shadow which we can apply. And as we can see, these elements have fit in quite nicely and give us an example of what this will look like. The only thing left here is this menu. And right now, we can't see it very well in this gray sort of a format. So, what I might do is double select it here and change the background color to either black or white, depending on what works. Right now, it feels like neither of them work. So, I might play around with a few different colors. The blue here that we're using for the site does look pretty good. So, I might use that blue here with the white for the current item. We might make the text here a black, while the other text items here we might make a white color. And that stands out quite nicely. The only other thing I feel like we're missing is that maybe this logo here is a little bit too big. So, I'm going to reduce it down just a tad so it's almost the same size as our menu over here. And that pretty much does our uh image here. It's It's okay because we've got this slider section here and we might not be using this. So, I I could change this to a white color and we might leave it for the time being. We might have a look at doing other sliders in the future here. But, I think that's enough to get us off the ground. The next bit we have here is this about us section. And we've got a small area here for images. What I might do for this image is just put in a placeholder for the book once more. So, in this case, I might do something like grab this design image that I've created as part of the book and place it in here. By doing so, we almost don't have enough room. But, what we could do is we could move this image next to the rectangle and mask it. So, I'm just going to do that. I'm going to select both of them. And I'm going to do use mask and then that fits in quite nicely in there. There we've got an example of one of the pages from the book and I think that seems to work quite well. The next thing we want to do is for this about us section. We want to give it a bit better of a title. Since we both have some content here for a main title and a subtitle, what I'm going to do here is just copy in a main title and then add a subtitle which gives a little bit more information for it. Finally, we might also give it a bit of a description. So, I'm just going to paste in a bit of content here to get us started with that. We've got this section almost done. The only other thing we might do is make it a little bit bigger. So, I'm going to drag down some of these elements here so that we have a bit more room to play around with. So, here I'm just going to move this more button down just a tad. And for this section here, I might also highlight some of the prominent areas, like for example, my name over here, which I might want to stand out, so I'll also bold that. And otherwise, that looks pretty good. Now, with that done, we might move this button back up a little bit, and we can also increase this mask a little bit. So, for this, I'm going to grab this out and just increase the height here at the top and at the bottom, and now that looks like a full on page. The only other thing here is that this button is still gray, and it doesn't seem consistent with our overall theme. With this theme, we've got a bit of blacks and whites and blues, so I'm going to keep that consistent throughout the design. So, this takes up our slider here and our about us section, and we can move this sponsored and site map section back up. Now, previously, we did have a sponsored section over here, and it was This was more or less for when we were doing sponsors, but in my book here, I don't actually have any sponsors. So, instead, what I might do is turn this into testimonials. Uh here, I'll also put in a small description, so maybe what other people are saying. And instead of having, say, all these boxes, we might reduce this down to just a couple. So, here, I'm going to just have maybe one here that spans four columns, one here that spans four columns, and one here that spans four columns. For each one of these, we might put in some text, and we might also change the background color for this. So, for the background color, I might do the blue here, just so that it stands out a bit more. And for the text, I might set both of these as white, so that they also stand out nicely. We'll also make sure that we center this cuz right now it's a little bit off center, but that's looking much better. Then for these items here, I'm just going to select them to have a white background, and we can put our testimonial quotes inside of there. We're still aligning to our column design here, but we're just repurposing the content based of what we're going to put in here. I've got a few different bits of testimonials that I'd like to put in. So, let's actually grab our text tool over here and put in a small bit of text here. I'm going to reduce the font size here to about 18 pixels, and we'll also do the opacity to about 66%. And finally, we'll just center this over here. The first testimonial that we have here is from Traversy Media, from Brad. So, I'm just going to put this in just below and make it bold so that we can see what he's been saying. We've got two more testimonials, which I'm going to put in, and one is here from uh Web Dev Simplified. So, I'm just going to copy over these two, and we're going to reuse them as we need. So, let's just paste them here and here. Let's also move them up a little bit just so that they all align about hmm 15 to 20 pixels from the top. And let's copy over this content over here. So, that's nice. I've got a little bit too much text there, so I'm going to reduce that just a tad. And let's put in Web Dev Simplified in here. And for our last, we've got a guy here called DevEd. And DevEd also had some nice things to say, so we'll paste that in here. And that should be it for our testimonials. And finally, we've got our site map here. Now, this doesn't change too much. I'm just going to make this that same dark color that we were using here in our header content. And we're going to copy over logo that we had and replace the one over here with this one over here. Great. Uh I don't really have a phone or email just yet, but the rest of our content is still mostly the same. So, I'm just going to copy it across and move it up a little bit just so that it fits in nicely. So, there it is. And I think that's about it. We don't really have to change our footer here with this copyright. And this finishes up our design. Now that the desktop version is done, we can take a look at creating a mobile version for this website. To do this, we're going to select the frame and we're going to select an iPhone over here on the right. I'm just going to expand this out to the bottom over here and we can start filling it out with content. The first thing we'll do is probably grab the hero section and paste it in here. The problem with this hero section right now is that we're actually utilizing too much width and height. I might actually reduce the height here just a tad so it's about the same as before. And I'm also going to remove the slider. The content in here also doesn't fit in very nicely right now. We could probably make it smaller. So, for this description here, I might just change it to 24 pixels. And for this one over here, maybe to 48 pixels and we'll break the line on both of them. That way we can see them here. We could also center them and that way they might look a little bit better. And finally, we can copy over this image and also make it a little bit smaller and just place it in below. So, that seems to look pretty good. We also have our logo which we can copy across. And like all mobile websites, they also need a bit of a hamburger menu. And a hamburger menu is pretty simple. It's just three lines. So, let's actually create three white lines here at the top left. And this can later expand out to our mobile menu. So, I'm just going to copy-paste this across a few times. And we should see it pop up. Let's grab one here, one here. We'll give it just a little bit of spacing. And let's do the same amount of spacing for this line, and there's our mobile menu. Nice and simple to do. I'm just going to move this here to the top left. And the header section is more or less done now. Let's take a look at doing this uh about section. So, like previous, we can just copy across some of the content. But, in this case, I'm going to copy over the text first with this read more button. And I'm just going to paste it in here. We're going to reduce the font sizes again. So, here I'll do 48 pixels. This one here can be 24 pixels. And this one here can possibly be 18 pixels. We'll collapse down the width for each one of those, so they might break the line a little bit. But, we'll also get a little bit of padding here on the left and right. And that seems to fit in quite nicely. The only other thing I want to do is change this this read m- more button. And in this case, I might want to make it smaller. And to do that, I'm going to scale it just a tad down here. Also, since we're centering most things, I'm going to center this as well. And all of that looks good besides the title here, which we need to expand out a little bit. This read more also doesn't seem to be centered very well. So, I'm just going to manually center that. And there we go. So, we've got our learn more content looking pretty good over here. I'll finally copy across this image that we had. And for this image, I'm also going to make it a little bit smaller by scaling it down here, and just moving it below our section. So, now it's nice and scented and we can move on to the next part of our website, which is the testimonials. One thing to note is that each one of these sections might sometimes stay the same height or sometimes get a little bit bigger depending on how many columns and how much content you have in there. But, it shouldn't matter too much as long as it's useful on the mobile version. For the testimonials, I'm going to copy over the whole item here. But, uh since there's so much, I might actually just copy a bit by a bit. So, first let's copy over this background and place it in here. And right now it is not appearing cuz it's not in the right place. I'm not sure where it's gone here. Uh so, here's the background. And here is our iPhone. And what I want to be able to do is copy this background right in here and move it in. There we go. That looks much better now. So, for this testimonial section, uh let's copy over these titles and we'll paste them in here. Once again, we'll have to reduce the font size. So, here I'll do 48 pixels for the testimonial. I'll center it. And this one here I'll do 24 pixels and I'll center that as well. And then we can just copy them over. These ones actually could probably fit in nicely as they are now. So, I'm going to copy over this section here. And we'll paste it in with a little bit of padding from the left and the right and make it a little bit taller. And then we can just copy over the text here. We almost don't need to even change that. That seems to fit in perfectly as it is now. We could reduce it just to one testimonial, but in this case I want to keep all three. So, I'm just going to copy this across and give it some margin here from the top. Let's copy our second testimonial in here and our third. And I forgot to keep the the person here. So, let's copy that across one more time. And that is definitely not seeming to copy across properly. I'm not sure what's going on there. Uh it's gone a bit wonky. Let's try that one more time. So, I'm just going to grab it over here, copy it down, and grab this one, and copy it across, and there we go. Let's close off this section here, giving a little bit of padding from the bot- bottom, and finally we just need to do our footer design now. So, for our footer, uh we could copy across the whole section cuz we need the contact us, the form, the site map, and the logo. So, let's do that. We'll need to make this whole section a bit longer to be able to fit it all in. And to do this now, we simply copy across each one of these elements across, or even reuse some of the elements we have, and update the colors that we have on them. So, in this case, I'm just going to create the rectangle over here to start off at this level. And then I'm just going to copy over each one of these columns, which is easy enough. Then, when we copy it across, we'll see that it just should fit in nicely. Some things we might need to adjust, so for example, with the inputs, I would normally recommend them to have a full width. And all of these texts, again, I would say would be recommended to update their sizing just so that they're all consistent, and everything updates accordingly. So, there's our contact us. Let's copy over our site map. We'll put this one below. I'm just going to reduce the size on that one as well. And finally here, we've got our about site map section, and our logo, which we can paste here below. And our phone and email, which I'm just going to copy across over here. So, that's more or less all of this done. Uh we just have our copyright section here at the very end, which we can copy across. And let's put this into our design over here just at the very, very bottom. And let's copy over this one, and we can make this font size a little bit smaller, as well. And that should almost fit in there. Uh it probably needs to break a line and have a little bit more room, but it seems to have fit in there just okay. I'm going to actually make it a little bit bigger. So, to do that, let's select the frame here at the top. Let's make the frame a little bit bigger. And then that'll give us just enough room there for the copyright section to fit in. Great. So, that's the mobile version done. And as you can see, it's followed more or less the same principles here. Uh the only other thing is sometimes when we increase the size of our page, some of these elements might go a bit weird. Uh and this is just a Figma thing, so I'm just going to fix that up. And I think that's more or less that done. I hope you guys enjoyed this video. This Figma design I'm going to share in the description below, so you guys can have a look at it, and you can do your own iterations of it based on the initial design that we had, as well. It's really fun and simple to play with, and it gives you an example of how we can create a mock-up really quickly based from a simple UI prototype. In the next video, we might take a look at maybe building this out using HTML and CSS, or even putting it into a framework like React, or maybe even WordPress. But hopefully, this is an introduction to show you just how important it is to be able to do design in simple steps.