Let's Design a Dashboard in Figma: UI Tutorial

hey guys py here in this video we're going to recreate this dashboard from scratch using figma now this is a screen that I got from a UI kit on ui8 called smartnet so feel free to check it out but without further Ado let's jump right into the tutorial all right so first things first we're going to rename the figma file to web app and we're going to create a frame which uh is going to be this desktop one which is 1440 pixels of W now the reason why I usually select 1440 is because it's a good measurement for the initial frame which isn't too big nor too small so it can serve the vast majority of users for the most part as a reference now we're going to rename this to homepage and we're going to change the C color to something around these lines where we're going to have a dark UI overall and uh what we're going to do is we're going to structure the main uh base of this dashboard from um from the start so we can have a a high level picture as to what the structure looks like this is something that uh I do pretty much with uh any any project really so I'm just going to use these colors for the time being uh we can always tweak them so you don't need to necessarily get the color palette right the first time you just need to basically have a an overall understanding on the direction that you're going and I'm also going to add a divider line just to add a little bit of uh an extra touch and going to make this 1.5 pixels and here we go going to duplicate this using uh command C and command B and I'm going to bring this one right here alternatively you can also use a drop shadow in order to create the divider line as you can see it's not uh perfect so I'm just going to align it little bit better and we're going to add the logo which um in this case just going to pretend that the client uh sent us the logo since uh we're going to essentially focus on the actual design rather than going into the logo design logo design serious um I definitely want to uh to make it happen in the future but for the sake of this video we're just going to focus on that so over here as you can see we have this uh this top menu and uh what we can do is essentially create a rectangle here on the top for the search field so the search field is going to be completely um of the same color then we're going to use the stroke right here and uh going to make this 1.5 and for this this specific example we're not going to use Auto layout reason being is uh I just want to keep this um short and sweet and not in every project Auto layout is required actually since uh especially if it's a oneoff screen as in this one you probably don't want to invest too much time into creating something that doesn't necessarily need the a structure uh for for the future but uh if I were to to start this from scratch for for a client what I would do is essentially have a sty sheet as a a base and then uh I'm probably going to create components uh one after the other in order to create that library that the client and the team can also leverage in the future apart from from the designer of course but um what they notice is uh many clients they they don't really like get the auto layout feature so if it's a small oneof project that you need to send for a client to work directly on the figma file I wouldn't uh recommend um going with the auto layout if you want to go with it absolutely like go go for it it's uh it's definitely a great practice but again it's not a a make or break thing like many designers make it to be um and uh this is coming from someone who's who worked over a decade in this industry uh with top companies and uh also many startups so I can tell you there is pros and cons um to to that nonetheless let's continue and focus on uh on the main menu so I'm going to create the rectangle and uh probably going to focus a little bit more on the design than than speaking because doing two things at the same time is it's actually pretty tricky so one thing that I want to do here is uh to basically replicate this element which is actually very very simple and easy to do so I'm actually going to go ahead and create the outo layer out for this uh button so that you can uh see how how that would play out so I'm going to find the icon I'm going to add it over here dashboard let's Center all of this and uh I'm essentially going to replicate this using the gradient so on the top we have this color at the bottom we have this color uh as you can see there is this um uh basically this guy who was uh preventing us to see the result I'm going to round up these Corners a little bit and if I were to use the out of layout super simple use shift plus a or simply right click and uh use add outo layout as you can see we have this uh um this nice button within the outo layout and uh now what I could do is uh duplicate this and uh basically have all the all the options that way but just to make things more practical since we have a lot to cover and we're going to essentially add these manually so I'm going to have data security and big shout out to the designer who created this um uh this screen and kit which is the Smart net cyber security UI kit which you can find on ui8 so big shout out to them and uh basically what we want to do actually is to just add the different icons and again I have plenty of videos where I'm sharing with you where to find great icons so that really should be the list of problems I'm just going to add these guys here and always be sure to use uh SVG icons since uh you're going to be able to basically scale um and maintain the top quality as well as a great uh speed in the upload of your interfaces Shadow it this one's going to be user behavior all right all right all right all right so this point we need some more items so what we're going to do is we're going to duplicate this guy going to name it to manage and uh we can group these individually but usually I like to do this cleaning up work at the very end destinations [Music] protection loation and we're going to one thing that I noticed is that uh we have these groups that have been informed so I'm going just going to ungroup this and there's going to be one more it's going to be devices all right so similarly to before just going to drag and drop these uh items from the original UI kit and uh simply going to add them over here let's do protection and we have all three devices all right this point we have the base now we're going to want to recreate this component right here which is actually pretty simple so we're going to add a rectangle right here going to round it up and then we're going to add a gradient now the gradient is going to start from this one it's going to go all the way here and uh at this point what we need is some text so I'm going to bring the text over here WR go proo going to go with uh it's probably medium so let's increase the the font size right here let's add this uh this icon and we're going to add the button text so just going to copy it for the sake of this demonstration and we're going to basically make it smaller decrease the size at this point we're going to add the the bottom below all right so far so good it's looking pretty good and we're going to decrease uh the opacity just a little bit and uh we're actually going to add a fill is going to be white we're going to De to just make it around uh 5% that should uh that should probably work let's increase the size just going to select everything like Center it a little bit going to group it together and uh duplicate the stacks upgrade now and I'm going to Center this one right here now if you notice we have this uh nice element in the background which is essentially a circle so way that you create this is actually very simple create a circle and then uh you're going to notice huh it's weird I can't see this point unless I do change the arc so I'm just going to make this one like that I'm just going to bring this one back and at this point we have a few options so the way that I'm going to do this is I'm going to duplicate this rectangle I'm going to select this circle and the duplicator oops I'm actually going to go with shift and command de select and I'm going to go over here use a mask and as you can see we have this a mask now we're going to reduce the opacity on this one right here so we're essentially going to bring this here and uh we have a very similar effect as you can see from this uh outcome that we have and uh we're good to go cool so we have the side menu now we need all the rest so so so let's continue and uh I'm going to add the search here this is a UI kit probably not the best uh idea to have uh two searches next to each other in an app but uh Hey for the sake of demonstration this going to we're going to close an eye so what we're going to do next is essentially to grab this element we're going to add the elements on the far right so going to add a line and this one's going to be 1.5 and and uh just going to duplicate this one more time distribute horizontal spacing I'm just going to remove these ones cool so we have the base for the next element which is going to be this one right here what I'm going to do is I'm going to Simply select the icons bring them here select them again and re bring them right here all right next element that we need to to applicate is uh this one here so what we're going to do is uh we're going to basically create a adop of this of the rectangle and uh yeah let's let's go and Tackle this going to add the text and uh these ones again or out to layout just two icons so please straightforward just going to bring this one bit more here select both and here we go cool now we're up for the sweets part which is going to be adding the the main text so or the main content so let's increase the size this from right here can make a medium probably just like a bit smaller and uh what we need is to create four of these elements and uh I'm going to take a a screenshot of the or actually just going to grab the original guys which are these ones right here so we're going to essentially mimic the gradients which as you can see are going to have a diagonal inclination going to bring this one right here and these ones again so you get the idea by by now um what we're going to do is we're actually going to go ahead and add the the elements in the first one and then we're going to Simply duplicate them so as you can see going to have this circle is going to be 10% opacity with this uh lock icon just this one right here um going to copy the text and also the free dots which for the most part uh so far so good pretty simple right I mean when you break down all these elements it's not really like too difficult the the trick tricky part is really figuring out what is going to make for great user experience for the user um the UI part of it uh it's not too tooo difficult really especially once you get some experience under your belt and uh we're going to add this element right here and uh which is actually pretty simple to recreate if want to recreate it from scratch You're simply going to want to do the same trick um and I'm going to add the same color I'm going to tap applicate this ellipse change this sweep so that you can see better what's going on as you can see we can now oops we now have a very similar effect and so we going to use the corner radius and we can achieve the same all right so I don't want to bore you guys to death so what I'm going to do is I'm simply going to group this duplicate few times using command D and uh going to use option command C and option command V in order to duplicate this uh same effect and uh going to do the same also for these other guys and as you can see we have the the space going all right let's make these all white let's reduce the opacity just a little bit and uh seems like we have the top elements going to change the number all right so we have this uh top section as well and uh now we are going to continue with uh the second part which is going to be everything that is uh below starting from the um actually we're going to go ahead add and before we start doing this so we going to create some blocks which are going to be these ones here just so that we can have a rough uh rough idea of uh how to organize this now going to add some uh header sections so files in time this one here is going to be actually I'm going just going to copy it okay all right cool cool so we have the the base I'm noticing that these guys are a little bit too too wide or not wide enough so I'm just going to adjust this real quick and uh now what we're going to do is we're going to replicate a um section like this if I can select it so pretty easy simply need to add the icon on the top and then we need to create a base template for this element which uh is going to be pretty straightforward going to add the rectangle right here going to go back I'm going to copy and paste the style which is uh going to be like this then I'm going to add this uh this icon which again it's just an icon with with a circle with an ellipse appli to it so nothing too fancy uh let's go ahead and copy the text emo notifications so we always want to have the text of the elements inside to be smaller than the heading in order to create that visual hierarchy which is always very important whenever we're tackling any uiux uh project and talking about visual hierarchy you can not just here how even the text is smaller than this uh heading right here and uh the color is also less uh um bright and the reason being is that the core focus is going to be on the heading not the description so always think about these things uh in the top of your mind whenever you're tackling a uiux design project because um visual hierarchy is the name of the game it's uh it's all about visual hierarchy and uh recreating that uh that visual hierarchy I'm not a big fan of this underline feels like on the old website so we're going to change things up going to create a small button around this read more section uh call to action probably going to make it just a little bit smaller like here round it up completely and uh here we go let's bring this down and uh we are in uh business all right going to duplicate this uh just another time and we are good to go cool we're going to add the section this part right here oops so I'm going to add this text let's just make a smaller for the sake of this example and uh I'm also going to add a arrow icon oops and here we go let's duplicate this a few times and we have our FAQ section it's probably maybe let's let's remove it here maybe we can have another another call to action below with something that states uh view more or view all plus and uh here we go cool we're are almost there and uh as we notice that the original one we have this uh at policy section which is going to be quite important so yeah that's uh that so now we're going to focus on creating the actual graphs so what we are going to do is essentially create a few different lines which are going to be located right here and uh think we need six of these this should be enough again using command D in order to create the the duplicator and uh what we're going to do is we're going to increase the size um make these lines this color we going to select the dash and um going to add some um some values some labels on the left side this one's going to be zero this one's going to be 1K State this a few times 2K 3 four five cool now let's State this also few different times um so it's going to be the month May June July August September November and December all right we're going to select all the text we're going to distribute horizontal spacing and uh just like magic this going to distribute horizontally let's add with the penal a graph it's going to be then we can always you know refine this doesn't need to be perfect actually let's bring this guy here let's bring this guy a little bit over here I'm going to make it of this color 1.5 and uh going to duplicate change this up vertically let's bring this one right here I'm going to make this uh this uh purple and uh here we go cool so we have the graphs as well just be sure that they are above all of these divider lines um we also have this element in the original which uh oops just going to enable you to see where the where the element or or the analysis is at going to add a small indicator let's make this white it's also all theu here and 1.5 yeah this is just about right cool so we have the graph and now very similar way we're going to create the very last graph which is going to be a located uh right here so going to steal one of these graphs bring them here and at the very end guys of course you will want to just revise all of this and uh basically clean things up as you see fit let's replicate this few times and now by this time you already know how to do the graph so just going to grab the original bring it over here squeeze it in a little bit and uh we're also going to add the text above oops which is going to give uh the user a clue as to when this has been uh recorded all right cool so we officially have it I hope this video was cell pH and uh if you want to learn more about figma your IO design a web design I'm a designer with over 10 years of experience sharing my knowledge for free in this channel I also have a email list uh that uh a newsletter that you can subscribe to and uh this is going to enable you to basically receive informations which I normally don't uh share too much on social and um since uh there are limits to what I can share here so if you're interested feel free to check it out Link in the description but apart from that everything you see on the channel is free so feel free to check out the other videos and I'll see you in the very next one

Channel: Pierluigi Giglio

Views: 5,817

Keywords: ui design, ux design, web design, designer, design

Id: o9g616nG0sk

Length: 35min 9sec (2109 seconds)

Published: Sat Nov 11 2023