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

this will be a ui and ux design tutorial that takes you from being xero to a hero in creating a website from the ground up we're gonna do this in several parts first we're gonna 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 is 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 cam 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 adrien 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 in 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 sitemap gives your entire website direction so that you know what pages you're building and with most sitemaps 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 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 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 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 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 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 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 gonna 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 the 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 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 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 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 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 will 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 1 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 gonna 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 f1 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 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 to 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 are 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 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 checkboxes 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 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 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 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 the 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 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've 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 free code camp 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 will 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 gonna 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 1. 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 fold columns i'm going to do 12 because that's what normal bootstrap uses of course the 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 box tool once more and we're just going to drag it and follow our 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 this circle this will be the logo so i'm just going to pull it in here from the top 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 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 and we'll make this a little bit bigger i'm going to make it 24 pixels maybe even 48 pixels and i'm just gonna put this right on top of the circle i'm gonna 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 ctrl 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 because 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 one two three four which is 40 pixels from the left then we can apply the same to the boundary so we'll do one two three four here but since this is padding from the left here we'll do another one two three four 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 because 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 we go chevron left here and this is a icon here we can use from font awesome 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 lock 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 at 33 percent and that's just enough to give it a bit of a great tint but it'll also blend into the background later if we add an image in here we can copy over the 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 if we open up the the frame here with the columns and make that 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 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 f1 f1 f1 this way we can see that we do have a height to it but we're 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 or font size anyway and we're gonna 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 gonna 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 28 28 does just about right let's resize the text sizing 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 readme being a white color and that way you 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 236 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 gonna 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 could 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 because 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're not too sure in here we can give some more labels as well so this might be the image over here for the readme i'm going to group that as well and 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 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 it 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 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 homepage here to 250 or 2600 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 gonna drag it in here below but i'm gonna make a few changes to it so over here if we have our button for readme 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 tin i'm going to grab the same tint we used here for our header but now that we have applied a bit of the tin 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 a subtitle for this section here i'm going to do this as the sponsors example and the sponsor's description let's center this and since this is a line 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 gonna maybe make it only a hundred and that's about a hundred there so that's pretty good there for our sponsor section i'm just gonna move the images up just a tiny bit i'm gonna 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 batter section it's got about 200 pixels of padding there from the bottom and the top but for this sponsor 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 gonna actually copy this across and we're gonna paste it here below we can see that that automatically looks okay 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 full column 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 gonna make it a white color just so that we can see it properly so here i'm just gonna 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 gonna write in contact us and let's just set this to be a line 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 gonna grab the very first one to download and i'm gonna just drag and drop that in we'll set the color here to be white and i'm just gonna 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 the second one might be the email address so here i'll type in email at 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 gonna drag it in once more and i'm gonna 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 then 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 so let's pass that in here finally we'll need a button people can click on so i'm gonna copy over this input one more time and this time we'll drag it here in below and i'm gonna 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 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 embed it indent it if we had sub pages 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 a 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 all rights reserved company name beautiful we can even put in a copyright icon for that 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 that 200 is almost too much so what i'm gonna do is actually move this section up a little bit and we'll make sure that it's a hundred pixels from the top one two three four five six seven eight nine ten and this square here i'm gonna resize it and just go one two three four five six seven eight nine ten 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 home page 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 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 sponsors 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 copy right 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 mockup 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 home page 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 built 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 gonna 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 1e1e1e 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 to 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 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 side 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 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 build 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 gonna 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 the overall theme with this theme we've got a bit of blacks and whites and blue 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 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 gonna 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 because 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 traversing media from brad so i'm just gonna 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 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 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 dev ed 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 our logo that we had and replace the one over here with this one over here great 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 gonna 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 redu 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 gonna 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 uh this read 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 it 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 centered 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 since there's so much i might actually just copy it bit by bit so first let's copy over this background and place it in here and right now it is not appearing because it's not in the right place i'm not sure where it's gone here 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 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 gonna 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 gonna 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 give it a little bit of padding from the bot bottom and finally we just need to do our footer design now so for our footer we could copy across the whole section because 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 sitemap 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 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 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 gonna 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 gonna 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

Channel: freeCodeCamp.org

Views: 375,308

Rating: 4.9648333 out of 5

Keywords: ux

Id: c9Wg6Cb_YlU

Length: 86min 21sec (5181 seconds)

Published: Wed Feb 10 2021