How to Design a Website – A UX Wireframe Tutorial

Key Takeaways

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 home page. Every other page flows out of that home page, 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 home page, 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 sub pages 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 sub pages, you can branch them out as well. And if some pages are linked to other 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 home page. 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 homepage. 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 it 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 paste them across to other parts of the website. And it also really segregates them. But in this case, when you create the website later on with the UI and the 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 a 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. Or 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 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 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 will 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 a 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 content 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 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 hard 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 mark 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 homepage. And we're going to copy that across straight across to our 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 homepage 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 you 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 homepage 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 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. 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 cuz 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 the 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 site map. 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-pasted 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 site map. 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 site map. 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 on 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 a 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 have 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. And I might do some videos later on on UI design, things like color theory and how to create UIs in general. And I hope you guys will check those out in the future. If you forgot who I am, I'm Adrian from Australia, and I do videos around design and development. You can check out my channel in the description below, where I do things on React and WordPress and UI. But otherwise, I hope you guys enjoyed this video. If you did, please hit like, hit subscribe, leave a comment, and I'll see you in the next one. Thank you.