How to Design a Website – A UX Wireframe Tutorial

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 and 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 sitemap the sitemap 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 sitemap just very simply and visually like this you'll be able to show and represent how all the pages work together if there are some 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 sitemap and we might even create a responsive design for them but to start off with let's create and finish up this sitemap 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 home page the home page 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 home page 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 well 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 gonna 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 crosstalk 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 will 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 because sometimes you'll be able to copy paste them across to other parts of the website and also really segregates them but in this case when you create the website later on with the ui and the u 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 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 and we'll be able to identify it as a sponsor 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 a 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 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 their 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 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 that 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 will 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 home page and that finalizes most of our home page 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 gonna 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 home page 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 2 and feature 3. 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 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 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 because 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 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 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 because 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 x 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 in this case i'm just going to do it similar to what i did with the images on the home page in 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 this 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 in our feature or 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 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 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 let's put some mock-up 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 image is 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 sponsor 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 paste it across and sometimes you might not even want to have so many items 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 in the email and that finalizes our mobile design we now have our home page 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 gonna 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 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

Channel: freeCodeCamp.org

Views: 163,240

Rating: 4.9594636 out of 5

Keywords:

Id: pN92rnO_n5U

Length: 30min 0sec (1800 seconds)

Published: Thu Sep 03 2020