How to Design a SICK Dashboard UI in Figma

what is up everybody gary simon here so for a long time i've had the request of doing a dashboard design how to create and design a dashboard from scratch and we're going to use figma for that and i'm going to show you how to do like a tablet version and i'm going to give you all sort of tips in terms of coloring and just alignment and basic fundamentals as well now if you're really interested in taking it a step further i want you to definitely check out designcourse.com because i'm going to include in that here within the next week i in the bonus section of designcourse.com curriculum right under here i'm going to show you how to take the design we create today the dashboard and make it responsive and truly interactive all right so here designcourse.com i teach people ui ux design in this course and you get over 16 hours of content and also interactive modules and also a dozen challenge projects and you can even add on mentorship with me if you want to learn from me and help me guide you so definitely check out designcourse.com use the coupon code ui20 2022 rather at checkout to get 22 off and let's get started alrighty let's go ahead and click new design file once you get figma up and running i'm using figma desktop one of the advantages of that is you get access to fonts that you have installed in your system uh so now we're going to click on the frame tool all right and so over here we're going to want to choose uh the desktop one just to get started i am actually going to adjust this so that we're not really going to be designing for desktop but that's usually what i start with and i really just want to change the width to 1100 all right and then we'll change the height here manually to around here so this is actually going to be a very small desktop or to like a large tablet or something like that and now we're going to change the background color to something dark because i know i want to i deal with a light mode so typically i'll change the canvas color for that reason uh whatever's opposite of you know if it's a dark ui i'll probably change it to a light uh background that's one of the things the freshman makes me about adobe xd i'm not sure if they updated it yet but you can't change the background it's always like this light gray and it's a pain sometimes depending on your color anyhow so i i'm going to go ahead and i already designed a logo for this so i'm just going to paste it in right here by the way you can have access to this figma document i'll link it all you have to do is save it to your desktop and then just drag it on uh to on top of your figma interface where you're at this screen just drag it right on from your desktop or a folder and it will load download it and then you can open it up and then you can just gain access to the assets at least now one thing i do want to do before we place that actually kind of skipping ahead a little bit no big deal is let's just establish a background color now typically when it comes to these dashboard designs um you will notice that there's a background color and then there's usually a panel that sits on top of it now you don't necessarily have to go with that route but you you typically see that so i wanted to do um that type of idea and what i mean by that by the way you don't have to follow along is you'll see this situation so you'll have some white space here and then a panel that kind of just holds everything like your dashboard um so you have to ask yourself do you want to go light or you want to go dark all right so we're going to go light that means we can we could use white if we wanted to but that's typically not what you see um over here i what we see is maybe just slightly off white notice how it's a little bit gray now uh light gray or you can actually introduce color as well so we're actually going to do that and i'm going to use something right around here so the color code for that the hex code is dbe8 all right and then for that panel or the rectangle that sits on top you can hit r to access that i will drag it roughly right around here so it's roughly centered i we can make white alright so notice how you it's it's a very low contrast separation between this panel and the background now if we were dealing with a dark mode design it would look something more like this so we take our background we'll make it dark maybe like a almost like a dark like a slate blue color then we'll hit i for the eyedropper tool make it the same color and then increase it slightly so these are kind of the light mode version of this approach and here's the dark mode all right so let's give ourselves some rounded corners i'm going to use 18 or so so i'm putting that up here right in the rounded corner section and we want to make sure this is centered vertically and horizontally so we can use these elements right up here and here so i'll click that and that there we go now it's perfectly centered now let's get that logo back up and we're going to put it roughly right around here now for the width of this i do want to make sure i'm using something yeah this is actually exactly what i wanted okay like around 863 for the width up here so now we have a logo that's left aligned very typical pattern uh that you see in most websites and everything nothing you know no big deal here we're also going to have two different navigations now when it comes to a dashboard you'll usually have a sidebar navigation and then sometimes you'll even have a primary or secondary navigation that's kind of right aligned up here that's a typical pattern doesn't have to be so it all depends on the needs of your project essentially so i'm what i'm going to do is we're going to put in kind of like a secondary nav up here and then we'll work on the sidebar nav over here so this font for this little logo i made is called um a-i-l-e-r-o-n aileron or something like that i don't know how to pronounce it but you can download that font and then open it up here on figma desktop so i'm just going to use the type tool and we'll just type in home and we will make it regular and for the actual size we're going to use something real small 14. all right you don't really want to go lower than 14 and then we'll replicate this alt shift and just drag over and right around there 26 uh between them and we'll uh first let's update this we'll change this to support and then we'll duplicate that hold shift make sure you get the uh there we go the little guides so we have equal white space between them and let's do a my account um and then maybe we'll have a secondary menu of some sort so to do that make sure you go to uh plugins and then you can click over here uh browse plugins i'm gonna use one called iconify so go ahead and install that if you don't have it installed already i'm going to search for menu alright so right here i really like this one it's an interesting take of a menu i'm going to drag it on and then we will place it right up here and that's pretty good right there all right so notice uh this this the small there's a lot of details occurring here that you may not aware be aware of first of all i we have white space i'm not putting the logo up here i'm not putting it in too far i have it in a very specific location where we have an equal amount of white space from the top to the side same thing over here i equal amount of white space if i hit shift r we can drag out a ruler here or a guide you can see everything's centered along the same line as well so these things matter these are ui design fundamentals and ui design principles that i really discuss a lot especially throughout that course at designcourse.com it helps to develop that eye now continuing on let's do a sidebar navigation over here now typically um because we're working on something that's like a small desktop or a large tablet you may want to can collapse your sidebar dashboard navigation um from having an icon with a label to just an icon and we're going to make that assumption that's what we're doing here it's just going to be a icon based navigation now the intention is like if a person hovers over that i it will actually show a label um and that will be available in the full course of designcourse.com but for now we're just going to design it as is without any of that interactivity um before we get to that point though um notice how we can definitely see you know this white panel it's low contrast with the background to help even reinforce a little bit more contrast we can actually add a soft drop shadow we can add multiple of them and i'll show you what i mean so we'll take this background we're going to ch we're going to change notch we're going to add rather an effect right over here we're going to click that plus icon all right so plus and it's a drop shadow as you can see by default and then we click over here now notice it gives you this basic drop shadow you can use it if you wish but we're going to make it a little bit different so we're going to come over here into settings and for this drop shadow this first one we're going to change it to 8 on the x-axis 8 on the y and then for the blur we're going to change to 40. all right so additionally so if i zoom up you can kind of see the settings i don't like using black or anything devoid of color on a colored background so what we can do is we can change the color right here in this color picker and we'll grab the background color currently and then we'll kind of pull it down or just move it around to where it's very subtle now we could go like this and just just adjust the opacity as well but i think there's a little bit too much color even more desaturated so that is 7d 99b4 for that hex code and at 20 opacity so i like this but we can actually make it a more realistic shadow if we add another one so by doing that we have one on top and for our one on the top we're going to change it to 4 on the x 4 on the y and a 4 on the blur and then we are also going to get this background color here kind of do the same thing but take the opacity way down like right around there 11 and that color code is 5 6 9 0 c6 all right looking good so far now we're going to duplicate this ctrl d on your keyboard and then we're going to hold alt and drag it in right around here and this time we're going to do something a little bit interesting we're going to offset it to the side of the uh the nav just to make it look kind of interesting now you want to make sure that you take the border radius all the way up so that we have a pill shape all right just like that um i think we may make this a little bit larger like there i think that's pretty good so the width of that is 55 and then we're going to make this this this pill shape this little icon based uh nav holder essentially um something that really contrasts well so we're gonna change the fill and we're going to we could do this we could take this background color so our only current color here and then just really saturate it high we could do something like that but you can also experiment with different hues so i like maybe right around there looks pretty solid to me and that color code is eight four zero zero ec all right so now we need some icons so if you go to the figma community if you just click here and then you go to community and then you search or you click on icons rather bazel is one of the first one so when you click that just click duplicate and then you will have access to the you click on full preview under pages to all these really well designed icons that are outlined and filled uh so it's really solid and so grab just any few of these this isn't a real project i would just kind of want to give ourselves some context and so i already i grabbed a few of those and i made them white so i'm going to go ahead and just paste these over here now if i drag them right here you see which ones i chose and by the way when you import them they will be black at first so if that's the case i if we bring it back in we can change where it says selection colors it's going to say black right here all you have to do is just change that black to whatever you want and it will adjust the icons for you all right so now i'm going to drag this just right here and i've made sure that there's even or equal white space in between each one of those and again you do that through the help of the smart guides when you're moving things around see if i move things around you can see yep perfect 26 and 26 and wow i made that's the perfect height by the way i got lucky all right so i now just to simulate maybe like a hover state or something like that my phone's going off we'll change to an ellipse we'll add a circle we'll put it behind let's see here yeah right there we'll grab the current color it's on and we'll just make it slightly darker so that color code is six zero zero zero ac let me mute my phone because it is going off right now all right and down okay awesome now in the full course we're going to actually make this function like when you click play you hover over it you'll see this stuff so definitely check that out at designcourse.com and all right so so far it's so good now let's go ahead and add some actual content now before we do that the context here is uh we just lack enough space when we're at this particular viewport here the the intention would be to once you get to a certain width like in a browser or on a device i we would actually open this up into a more full ui for example i i'm going to go ahead and copy and paste something like this right here but we're not going to do that that's going to be included in the designcourse.com version all right i do kind of like a different color that i originally created so i am going to adjust that real quick so that color code is 6 0 2 bf 8 if you want to follow along and of course that means we need to change this as well perhaps a better approach would be to make this black and then just take down the opacity all right right around 25 perfect all right i like that color a little bit better than the one i chose before okay so now we're going to work on the actual content section so the content section of a dashboard typically consists of cards that's the that's the pattern that's commonly used now we've chosen a white background for this so our cards we it's nice to be able to see the cards and we have a few different options and a few different ways of doing that so let's go ahead and get a rectangle here and i'm going to say i will make it probably around 200 pixels wide all right right around there and we do want to use rounded corners because we're using rounded corners here as well so you don't want to mix like hard edge right angle corners with uh rounded corners so one thing also though when you have a a square or card inside of an overall container naturally speaking the border radius should be lesser than this one so this one's 18 so maybe we can try something like 14 for this one all right now i something i see sometimes people doing now this this this has to do with uh color and color theory uh in order to see this card they might do something like grab this background and then just have cards like that actually we're going to make want to make these cards probably quite a bit wider as it currently stands let me there we go yeah right around there so that width is now actually 238 okay so this is a fine approach you can go even lighter if you want i mean we're really lighter already something like that very low contrast card you can do that or we can do this we can change it to white of course at which we don't see it anymore but we can use drop shadows so what we can do is i this we currently have a drop shadow here and on here and if we click on this little icon where we have four little dots and then the plus sign right there we can add it as a new style so we'll just call this drop shadow and then now we can apply if we click on effects we can choose this right here drop shadow all right so now we see the same exact shadow that's placed on and guess what we can see a very subtle low contrast interesting representation it makes it feel like it's 3d um sitting on top and i really like that approach now just like i said when it comes to the border radiuses and how it should be smaller on the inside on elements on the inside like child elements so too i think you should probably approach that with like drop shadows so maybe we should we should unlink or detach this style and then make adjustments to this one maybe this one will be 30 of a blur and then maybe six on the x and six on the y and then same thing with this like maybe this can be um two and two yeah something like that that way it's a little bit more subtle although you can still see it and it's a nice aesthetic all right so now let's i put some information in this card so we're going to have a label for each card and i'm going to choose to caps lock or title case all not type title case but all caps lock for this so this is going to say new messages again this is for a fictional chat up live chat application for websites or something like that um for this i think we're going to go pretty small and i'm going to make it just regular all right so for the size i'm double checking on my other area we can also make this light if we wish as well and then let's create some big eye contrast typographic visual hierarchy it's called um this is going to be actual value like how many new messages have been maybe within the last 24 hours or something like that we're going to make this bold and yes we are going to make this large and in charge so we're going to go from 14 maybe to like 40. look at that so in terms of visual hierarchy which is placing priority in like what is it that you want a person to see first i the thing that a person would see first their eyes would be immediately drawn to is probably going to be this little 85 right here or this big 85 rather next up we can have an icon just to make this a little bit more interesting i and give it context with an icon so using that basil icons tab i found a little chat app right here so we're just going to stick it make sure it's aligned pretty good right there all right and now with dashboards typically you see um you see things like progress percentage bars you can see radial percentage bars and stuff like that um so let's work one in here and create our own so let's pull this down just a bit and i'm going to this one's just going to be a progress bar so we're going to take our rectangle tool strike out from here to there notice the width is starting on this column so there's a invisible column here shift r right there of course we want to make sure things are aligned to it there we go and based on that white space now this is actually off there notice how there's probably more white space here than there is here so one of the things you can do to to combat that situation is you can right click and we can choose uh to frame this all right so frame selection it gives you the option of a layout grid right here all right so we click plus and we choose columns and we'll just give ourselves some margin just to experiment like what's 80 all right so that certainly did not work what is happening uh let's try 30. there we go all right so this time let's try 25 perfect so as you can see and by the way the the call the call number of columns we could just make that one it doesn't even matter now we could see that there's a clear equal this is completely equal white space and that's how you achieve that perfection by making these adjustments there perfect so now we can go back to this and we can just turn this off so let's hide that and let's hit shift r to get rid of the guides all right so now going back to our progress bar we're gonna go ahead and choose purple all right so this is known as the track i believe so we'll take this purple we don't this is gonna be a part where that's not filled in if that makes sense so we'll come down you know maybe somewhere around here pretty saturated and low relatively low contrast but not too low then i we're going to make it pill shaped so just take that border radius and really just crank it up to the right so we have perfect pill shapes over here then we will duplic duplicate that with control d oh and sometimes when that happens if you're selected on one of the fills or something like that it'll duplicate that instead of the pro this element so just select back on it then hit ctrl d and that will duplicate it so we'll put it around here and now we're going to really crank this up or rather just grab this color over here and there we go so that's a little uh progress bar that we have and then we're going to give it a label we're going to put the label underneath here and i'll tell you why in a second we'll say response rate all right and under i we're gonna make this one bold we're gonna change it to 12 and also bold though there we go and then we're going to create a little blip that shows the value like percentage-wise so this might be 75 percent of this available space space so what we can do is duplicate this this back this card background oh yeah so we've duplicated it but right now it's a frame so i'm just going to hit ungroup that takes it that makes it not be a frame anymore and then i'm going to scale it down we're going to take down the border radius and i'm going to hit t for type and inside of it we're going to put in 75 percent and we're just going to make this regular well i made that size pretty solid didn't i all right now next up i want to have a little bit of a a down arrow worked into this shape so to do that we'll take the pen tool hold shift left click hold shift to make a triangle and then get rid of the stroke and just give it a fill the fill can be white for now then we're going to select this element in that element and then we're going to go ahead and choose union selection now when you do that this goes away unfortunately so what we'll do i yeah keep that back there there we go what we'll do now i am we're select let's see here this and we are going to let's see here there we go we're going to add this we'll say drop shadow smaller we'll come back here and select that go back to our effects drop shadow smaller now it's added it back now we also need to take our 75 percent put it on top of that union right there all right great so now we could take this and this move it with our keyboard all right and that looks good and then one final thing we could do is create kind of like a separator be here a line separator that separates this top section from this bottom section so it'll be a low contrast one pixel line kind of like that right now it's high contrast because it's black now uh with that let's go ahead and just use our purple color and then just really make it light now i do also want it behind that uh little percentage area so i think it has too much pink to it so we can just take out a lot of the color something like that move this up right around there all right so that is it for the very first one uh our first card rather so now this is just a matter of go ahead and taking let's go ahead take this logo and lock it so we don't select it we're going to take this ctrl d to duplicate and then duplicate that one we'll move this over to make sure it's on this column over here select all this deselect all the other stuff holding shift and there we go even perfect so then we can go ahead and let's change this one to new leads all right i'm going to get rid of that one i have another one from that bazel icon set that i have off the side let's get that pasted right over here all right so new leads will say 21. we're going to change this up i'll show you how to do a radial progress bar yep don't want to do that there we go and we'll finally get rid of that as well so to do a radial progress bar we'll take our ellipse tool come out right around here we can always change the size later and we will get rid of the fill and we'll get a stroke all right so the stroke will probably push up to around at i'd say six or so and then we'll also change the stroke color to the same color right here on the track so that's the first one then we're going to duplicate it now for this one we're going to have to use a mask and let's first change the color here to that all right so this would be obviously a 100 filled uh radial progress bar but we don't want that we want to change it to something different so to do that we'll take the pen tool we'll come up here around the top hold shift come down around here hold shift and we'll just come around like this and connect it get rid of the stroke just add a fill we can make the the color of the fill doesn't matter we just want this now this this vector that we created hit escape we want it to go underneath let's see where this element is okay right there so we have this vector we have to put it underneath there so now we selected both of these elements and we could choose this which is the mask very cool stuff all right so now what we can do is and by the way hmm i think i'm going to want to notice the thickness of this verse this this is a lot thicker so what we can do is take these and we can kind of match them up that's a little bit better i held l i held the alt key or option key and i just kind of dragged that down and that kind of flattened it a little bit and of course when you do that you're going to want to adjust this one so i'm going to delete those just group these up ctrl d to duplicate and then just shift that back over there there we go now it's more consistently approached in terms of the design so now we can just put in a little bit of more text we'll take new leads right here we'll just put in maybe 60 percent daily goal and we're going to make this one small too like 20 percent actually let's get rid of that daily goal let's make this one let's see here bold i duplicate that daily goal we'll make this one light or regular we'll take these two duplicate put another stat here like 72 we'll right align it to this section and then put maybe this week and then finally we can put we'll duplicate this here we'll just say goal and then we'll grab this these two elements duplicate them oh no i didn't get the other element let's see here all right so now we can copy those now we can paste these and we'll put it maybe like right around here we'll change this up to maybe like 62. all right we could probably take these two and bring them down a bit there you go so as you can see we can create a nice consistent aesthetic across multiple cards even though they're kind of styled differently based on the needs of the project i'm not going to bother with customizing this one just because this isn't a real project and hopefully you're starting to understand how you know these layouts and such work so we'll leave that there and then finally i want to show you a real cool trick to use and integrate a live chart not a live chart but a realistic looking chart like a line chart or whatever so what we'll do is take our rectangle tool and we're going to drag it out from the very left where this card starts to the end of where this card starts uh could choose a background color just use the same it's just white and then right click plugins you're going to have to go to browse plugins i in community and that plugin is right here called chart right there okay um so i already have it i'm going to go to chart and create chart so what's cool is it gives you this ui from which you can choose like a random chart you could put the number of lines number of points blah blah blah blah so for me i i'm gonna put number of lines uh just one and then number of points is 30 and i'm going to leave it like that and then just hit create chart now by the way you can see all these other chart types that you can create here this is just a simple line chart now by default let's go ahead and click it and over here for selection colors based on this group that was created sorry my throat was messed up we can choose this blue which is what the line color is and change it to our primary color right here now you can also see look how good that looks by the way you can also see um there's an x and y axis where you can actually change the text as well so that's a little like a mid gray i'm going to make that black just for maximum contrast and then you could come in on your own of course and adjust this text down here where it just says text text text text text as needed um right now i'm not going to bother with that and there you go so look at how well polished and just great this ui looks and of course this all comes down to the fact that i have a ton of experience and that's exactly what i teach at designcourse.com and you will be able to see me actually create this layout from scratch and make everything interactive with a true prototype so definitely consider joining designcourse.com to gain access to this specific tutorial along with 16 hours worth of other content across a ton of modules all right everybody hopefully you enjoyed that now if you're really interested in understanding how to take the project that we just created and doing it the correct way with components and interactivity and responsiveness definitely check out designcourse.com join up and you can use the coupon code ui 2022 to get 22 off and also if you're in a different part of the world where the us dollar is a little bit is worth a lot more than your own currency then you can also get parity pricing which can get you as much as 40 off so definitely check that out but when you join up you will go ahead and you will be able to i see how to do this properly in the context of a full real project and also get access to 16 hours worth of other content a bunch of other projects that's really just going to help you learn ui qx design in an interactive fashion all right i'll stop talking make sure to subscribe comment leave a like and i'll see you soon goodbye [Music]

Channel: DesignCourse

Views: 131,542

Keywords: figma, figma tutorial, figma tutorial 2022, figma 2022, dashboard, dashboard design, ui dashboard, dashboard ui, dashboard ui tutorial, gary simon, designcourse

Id: yOQ-5EcrgLE

Length: 35min 36sec (2136 seconds)

Published: Fri Apr 29 2022