**Designing a Home Page: A Step-by-Step Guide**

As we begin designing our home page, it's essential to start with a solid foundation. We'll be working with a simple white background and adding various elements to create a visually appealing design.

First, let's add some links to the header section. This doesn't have to be anything special, but we can play around with the sizing just a tad because it does feel like it's a little bit too small. Once we do, I can see that that's looking much better as we have more pages to fill this out and we could even embed it indent it if we had sub-pages.

For now, let's keep it simple and add some copy from our previous header design. We'll make sure the links are not too prominent and blend in with the rest of the design.

Moving on to the main content area, we can add a few more elements to enhance the design. Let's focus on creating a consistent layout throughout the page. We can use a grid structure to organize our content and ensure that each section is balanced and visually appealing.

One crucial element to consider when designing a home page is the spacing between sections. Consistent spacing will help create a clean and modern look. In this case, we might need to reduce the size of the "About Us" section by 100 pixels from the top and bottom to avoid overwhelming the page.

To achieve this, I'll resize the square element on the left to fit the desired space. By moving all other elements up, we can maintain consistent spacing between each section. This will result in a well-structured layout that provides a solid foundation for our home page.

** wireframe and UI application**

Now, let's take a look at how our original wireframe has been applied to our UI. We've successfully integrated the slider image with our logo and menu at the top. The addition of icons on the left and right sides adds visual interest without overwhelming the design.

The next section for "About Us" follows the grid structure, ensuring consistency throughout the page. By using a column design, we can easily break down the layout into manageable sections that will adapt to different screen sizes.

For the sponsors section, we've kept it simple by adding only six sponsor images. This approach allows us to maintain a clean look while still conveying our message effectively. If we were to add more sponsors in the future, they could be easily added without disrupting the design.

Finally, we have our footer section, which includes a contact form, site map, logo, and some basic contact information. Although there's room for growth, this layout provides a solid foundation for our home page.

**Color Theory and Future Work**

While designing our home page, it's essential to consider color theory. This may seem complicated, but it's crucial in determining which colors will work well together and which ones won't. We might experiment with different primary and secondary colors to find the perfect combination.

In the next video, we'll delve into color theory and explore how to create a cohesive design by selecting harmonious colors. We might also experiment with images to see how they interact with our chosen colors, resulting in a visually appealing design that enhances our home page.

**Conclusion**

With this home page design complete, we can confidently say that it's looking great. From the simple yet effective layout to the consistent spacing between sections, every element has been carefully considered to create a clean and modern design. As we move forward with more videos on design and development, I hope you've enjoyed learning how to design a home page from scratch.

If you liked this video, please don't forget to like, subscribe, and hit that notification bell. It means the world to me, and I look forward to sharing more design content in the future.

"WEBVTTKind: captionsLanguage: enif you're looking to design a website there are a number of steps you need to take today we're going to be taking a look at the second step which is creating the ui for the website design we already did the first step which was creating a wireframe and you can check out the video for that in the description below but here's a quick preview where we built out a home page a features page even a responsive version in this video 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 gonna also make this one nine eight zero 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 c4c for 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 going to put this right on top of the circle i'm going to give it a slightly lighter shade so maybe something like 999 and it'll just go over here we can add it in later the other thing i'm going to do is i'm going to group these two items right now this is just called an ellipse and a logo for text but i'm going to select both of them and hit 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 gonna reduce that by two 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 look in the resizing tool here and i think for the width i'm going to do 40 pixels and the height can stay at 64. and that's just about right and we're just going to center this here to our slider we'll also give it about a 40 units there from the left and we'll also reduce its color so here on the right i'm going to give it a 50 opacity just so that it's not fully black we could even reduce this down a little bit more maybe at 33 and that's just enough to give it a bit of a gray tint but it'll also blend into the background later if we add an image in here we can copy over this same chevron and place one here to the far right i'll give this another 40 pixels and i'll also rotate it so it's pointing to the right side and finally we might add a few little dots here to the bottom of our slider which might be about 22 pixels in width and height and we'll copy them over just so that they can represent the slides themselves and which one is the current active one so let's do that just over here and we can give them about 10 pixels of space in between and with that done i'll also color in the very primary one here with that dark gray tint so that's our slider done for our home page it's also our logo and our menu done and this looks pretty accurate comparing with our slider image the only other thing we could do in here is maybe some hero text so in here i'll just put in hero title and i'm going to give it a slightly larger font size maybe like 72 pixels will be just about right and maybe a heavier weight at maybe bold hero title example can be our primary text here 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 percent 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 4 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 gonna paste it here in the description and anyone who wants to can edit this in the future but it gets our description up and running i don't want so much content so i'll remove some of it but below here if we take a look we are almost getting the design the same here as our wireframe what we need though is a button so i'm going to copy over this image i'm going to pull it here over to the right and i'm going to give it a height of about the same as the menu which was 60. we're going to reduce the width a little bit here and we're going to add some text here to put on top of the button here we go and in this case i'm going to do something like read more this is pretty standard the only other thing i might do here is bump up the text just a little bit to maybe 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 to 36. that way they don't look a little bit too overwhelming they still fit within the confines of this section but they don't overwhelm you similar to how the hero section is meant to be a lot larger now let's take a look at this section without any grids implemented i'm 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 can reduce that in the future it's more about keeping this section similar i'm going to copy over this section but before i do 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 ctrl 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 home page here to 250 or 2600 pixels and this will give us room to create the section here for the sponsors so what i'm gonna 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 gonna 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 a 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 a line 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 about us 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 footerbg for the time being and the logo i'm just going to move in here and we're going to group this whole thing as footer for this section i want to open up the columns here again so we can see what we're working with and we want to design something around these columns so if we take a look at the actual svg here that we created before and how it's designed we can see that we have the three columns here so the first one will take up four columns the next one will take up another four columns so let's let's do that over here i'm just going to block them out so i can see how much space they're taking up and there we go so those are the columns we'll be using so in here i want to put my first title so i'm just going to apply that possibly let's move the logo here to the left and let's put in these titles so for the title here i might copy over this large text that we use for our sponsors and just drag it in below we'll move it up here into the group but instead of being a black color i'm going to make it a white color just so that we can see it properly so here i'm just going to select white and for the description here i'm going to set that to white as well i'm going to pull this in over to the left so it's aligned left and i'm also going to give it some padding here from the top and this is about 10 pixels worth of padding and i think that sorry 100 pixels worth of padding which i think should be just enough here i'm 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 sitemap and all our pages and finally we've got our logo over here we do also want some contact information below our logo i'm just going to copy over this subtitle text and in here we're going to put in a phone number in this case i'm just going to make one up but that should get us up and running the only other thing that we have in here is actually a little icon there for the phone so i'm going to jump into font awesome to get that over here i'm just going to type in phone on their website and it should pop up with a few icons here i'm just going to grab the very first one to download and i'm going to just drag and drop that in we'll set the color here to be white and i'm just going to resize it down here to about 36 pixels and we'll just align that just to the left of our column here we can pull in the phone number just a bit and that looks good we can then copy this across and we can do another one here and 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 going to drag it in once more and i'm going to set the height and width here to 36 pixels great we'll also change the color here to be white and i'll just drag that here next to the email so we've got the email and the phone now done let's do the contact us section now for this section we'll have some forms here so as a form input i'm going to actually create a box here and i might give it a white color this will represent the input and i'll just increase the height here to about 60 so it's consistent with the rest of our buttons and stuff and i'll also put a placeholder text in here for this maybe i'll write something like full name and we can make this a little bit smaller maybe 24 pixels and we'll also give it a slight shade so maybe a 50 opacity will apply that there is our first input i'm going to copy that across and create a second one here and for this second one i'll do your email and we'll maybe create one last one here and this last one we can actually give it one more column for the sizing here and a little bit more height maybe 120 in this case and what this can be is our message so let's pass that in here finally we'll need a button people can click on so i'm going to copy over this input one more time and this time we'll drag it here in below and i'm going to reduce this width here to two columns and i'll type this in as maybe submit now we want this button to stand out a little bit we don't want it to be the same as our inputs so what i'm going to do is i'm going to give it a nice dark color not exactly black but like a dark gray which is a 333 in the hex colors and we'll change the font color here to be white at 100 opacity so that way we can see it standing out there so that's our contact form done that looks pretty good let's fill out our site map over here i'm going to copy the full name text over here and this can be used for our links i'm going to set this to a full white 100 opacity color and in here i'm just going to put in a couple of links this doesn't have to be anything special 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 uh company name beautiful we couldn't 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 going to resize it and just go 1 2 3 4 5 6 7 8 9 10 beautiful and then we can move all the other elements up here so that is looking much better now let's just make sure we grab all of these and move them up so if we have a look now we have consistent spacing between each section we've got our header and footer and we just resize our uh 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 in the next video we might take a look at color theory and this is more complicated than some might realize this is figuring out which colors to use for this website maybe we'll have a primary color and a secondary color and we'll have to figure out which ones work together and which ones don't and we might actually work on some images too to see if we can make them work with the colors we pick but i hope you guys enjoyed this video my name is adrian and i do videos around design and development so check out my channel hit like hit subscribe and i'll see you in the next one thank youif you're looking to design a website there are a number of steps you need to take today we're going to be taking a look at the second step which is creating the ui for the website design we already did the first step which was creating a wireframe and you can check out the video for that in the description below but here's a quick preview where we built out a home page a features page even a responsive version in this video 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 gonna also make this one nine eight zero 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 c4c for 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 going to put this right on top of the circle i'm going to give it a slightly lighter shade so maybe something like 999 and it'll just go over here we can add it in later the other thing i'm going to do is i'm going to group these two items right now this is just called an ellipse and a logo for text but i'm going to select both of them and hit 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 gonna reduce that by two 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 look in the resizing tool here and i think for the width i'm going to do 40 pixels and the height can stay at 64. and that's just about right and we're just going to center this here to our slider we'll also give it about a 40 units there from the left and we'll also reduce its color so here on the right i'm going to give it a 50 opacity just so that it's not fully black we could even reduce this down a little bit more maybe at 33 and that's just enough to give it a bit of a gray tint but it'll also blend into the background later if we add an image in here we can copy over this same chevron and place one here to the far right i'll give this another 40 pixels and i'll also rotate it so it's pointing to the right side and finally we might add a few little dots here to the bottom of our slider which might be about 22 pixels in width and height and we'll copy them over just so that they can represent the slides themselves and which one is the current active one so let's do that just over here and we can give them about 10 pixels of space in between and with that done i'll also color in the very primary one here with that dark gray tint so that's our slider done for our home page it's also our logo and our menu done and this looks pretty accurate comparing with our slider image the only other thing we could do in here is maybe some hero text so in here i'll just put in hero title and i'm going to give it a slightly larger font size maybe like 72 pixels will be just about right and maybe a heavier weight at maybe bold hero title example can be our primary text here 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 percent 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 4 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 gonna paste it here in the description and anyone who wants to can edit this in the future but it gets our description up and running i don't want so much content so i'll remove some of it but below here if we take a look we are almost getting the design the same here as our wireframe what we need though is a button so i'm going to copy over this image i'm going to pull it here over to the right and i'm going to give it a height of about the same as the menu which was 60. we're going to reduce the width a little bit here and we're going to add some text here to put on top of the button here we go and in this case i'm going to do something like read more this is pretty standard the only other thing i might do here is bump up the text just a little bit to maybe 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 to 36. that way they don't look a little bit too overwhelming they still fit within the confines of this section but they don't overwhelm you similar to how the hero section is meant to be a lot larger now let's take a look at this section without any grids implemented i'm 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 can reduce that in the future it's more about keeping this section similar i'm going to copy over this section but before i do 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 ctrl 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 home page here to 250 or 2600 pixels and this will give us room to create the section here for the sponsors so what i'm gonna 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 gonna 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 a 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 a line 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 about us 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 footerbg for the time being and the logo i'm just going to move in here and we're going to group this whole thing as footer for this section i want to open up the columns here again so we can see what we're working with and we want to design something around these columns so if we take a look at the actual svg here that we created before and how it's designed we can see that we have the three columns here so the first one will take up four columns the next one will take up another four columns so let's let's do that over here i'm just going to block them out so i can see how much space they're taking up and there we go so those are the columns we'll be using so in here i want to put my first title so i'm just going to apply that possibly let's move the logo here to the left and let's put in these titles so for the title here i might copy over this large text that we use for our sponsors and just drag it in below we'll move it up here into the group but instead of being a black color i'm going to make it a white color just so that we can see it properly so here i'm just going to select white and for the description here i'm going to set that to white as well i'm going to pull this in over to the left so it's aligned left and i'm also going to give it some padding here from the top and this is about 10 pixels worth of padding and i think that sorry 100 pixels worth of padding which i think should be just enough here i'm 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 sitemap and all our pages and finally we've got our logo over here we do also want some contact information below our logo i'm just going to copy over this subtitle text and in here we're going to put in a phone number in this case i'm just going to make one up but that should get us up and running the only other thing that we have in here is actually a little icon there for the phone so i'm going to jump into font awesome to get that over here i'm just going to type in phone on their website and it should pop up with a few icons here i'm just going to grab the very first one to download and i'm going to just drag and drop that in we'll set the color here to be white and i'm just going to resize it down here to about 36 pixels and we'll just align that just to the left of our column here we can pull in the phone number just a bit and that looks good we can then copy this across and we can do another one here and 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 going to drag it in once more and i'm going to set the height and width here to 36 pixels great we'll also change the color here to be white and i'll just drag that here next to the email so we've got the email and the phone now done let's do the contact us section now for this section we'll have some forms here so as a form input i'm going to actually create a box here and i might give it a white color this will represent the input and i'll just increase the height here to about 60 so it's consistent with the rest of our buttons and stuff and i'll also put a placeholder text in here for this maybe i'll write something like full name and we can make this a little bit smaller maybe 24 pixels and we'll also give it a slight shade so maybe a 50 opacity will apply that there is our first input i'm going to copy that across and create a second one here and for this second one i'll do your email and we'll maybe create one last one here and this last one we can actually give it one more column for the sizing here and a little bit more height maybe 120 in this case and what this can be is our message so let's pass that in here finally we'll need a button people can click on so i'm going to copy over this input one more time and this time we'll drag it here in below and i'm going to reduce this width here to two columns and i'll type this in as maybe submit now we want this button to stand out a little bit we don't want it to be the same as our inputs so what i'm going to do is i'm going to give it a nice dark color not exactly black but like a dark gray which is a 333 in the hex colors and we'll change the font color here to be white at 100 opacity so that way we can see it standing out there so that's our contact form done that looks pretty good let's fill out our site map over here i'm going to copy the full name text over here and this can be used for our links i'm going to set this to a full white 100 opacity color and in here i'm just going to put in a couple of links this doesn't have to be anything special 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 uh company name beautiful we couldn't 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 going to resize it and just go 1 2 3 4 5 6 7 8 9 10 beautiful and then we can move all the other elements up here so that is looking much better now let's just make sure we grab all of these and move them up so if we have a look now we have consistent spacing between each section we've got our header and footer and we just resize our uh 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 in the next video we might take a look at color theory and this is more complicated than some might realize this is figuring out which colors to use for this website maybe we'll have a primary color and a secondary color and we'll have to figure out which ones work together and which ones don't and we might actually work on some images too to see if we can make them work with the colors we pick but i hope you guys enjoyed this video my name is adrian and i do videos around design and development so check out my channel hit like hit subscribe and i'll see you in the next one thank you\n"