Subscribe or Login to watch video

Login or Subscribe to watch video

32 - Creating 12 column card dashboard using the repeat grid tool in Adobe XD


Questions & Comments

No comments

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

Hey there, in this video we're going to look at creating this Instructor Dashboard based on a 12-column grid. We're going to turn it off so it looks pretty, we'll make all of this, then we'll transfer it over to our Home Page and do some fun stuff where we blur out the background and add buttons, and do cool stuff with symbols. Lots of things to cover in this video. Let's go ahead now and do it.

 

This is what I'm building here, so you click on this button, it shows you the Student View, which we're not building, because the client has asked us not to. They've already got that made. It's this Instructor view they want us to build out. So, what we'll do is we could make a new page, but because we've already made the 12-column grid in this first one, we want to make sure we're duplicating that. So it doesn't really matter if we duplicate 'Popup Decision' because it has all their Home Page, bits and pieces.

 

So what I'm going to do is, click on this, copy, paste. Now I want them to be separated in perfectly so they're all separated in the right order. And what happens is, if I grab the title here, watch this. I drag it across, you get this nice big Magenta box aligning it up, but won't appear, if say, I can't see that gap and I drag it out, it doesn't know what I mean. So you need to be able to see the gap. This gap over here, for this to actually do it's magic. I find that it's not working, I might have to zoom out a little bit. Cool! So, we name this one here, this one's going to be 'Instructor Dashboard'. So what I'm going to do is, I'm going to select everything, delete what was there, which is just my modal. I'm going to select everything, and go 'Command L', unlock it, delete it. And now I want to go to my Assets panel, and you'll see that, because they weren't seen, I can turn all these guys on. Actually it's easy just to select the top one, hold 'Shift', pick the bottom one. This top one, hold 'Shift', click the bottom one and then hit 'Command ;' on your keyboard. So now I got my grid back. So I can start using that to build out my Dashboard.

 

The other thing I want to do is I want my navigation along the top to be a symbol. So I need this. Because I want to reuse, and I want it as a symbol, I want it to be able to be adjusted once through the symbol, and they'll all update on the other pages. So I've selected them all, hold 'Shift', click this guy. So I've got all of this selected. I'm going to go to my Assets panel and I'm going to say, I want you, my friend, to be a symbol. There he is there. Now it doesn't matter if I drag this out and line it up, or just copy this guy now, because he is a symbol. When I click on this page and paste him, it goes into the exact spot that I need it, which is great.

 

So how am I going to break this up? I'm going to break this-- 12-column breaks into four sections quite easily. So, we're going to do three. That's going to be the left navigation for the instructor and then I'll use the following nine for my card. So I'm going to build out my card. So I'm going to ignore the first three, because that's going to be my navigation. I'm going to grab my Rectangle tool, and I'm going to start building this out. Going across three, now I'll make sure, 100%. And how big did these cards need to be? That's about right. I'm going to have a Drop Shadow, no border, just because. I'm going to grab the Type tool, click once, hit '+'. And I'm going to make it the green. I'm going to put a little circle around it, zoom in. Hold 'Shift', get a perfect circle. No Fill, green border. Enter. Nothing's working. If it's not working, it's because I don't have it selected, so grab the Black Arrow, click on this guy. Then have No Fill, I'm going to have the green border. And how wide? I'm going to try and match the '+', so, maybe '2'. Tappy tap, tap, tap.

 

Click both of them holding 'Shift', and group them. 'Command G', or 'Control G' on a PC. Go back to-- I want 100%, which is 'Command 1'. And it's all a bit big. So, a little bit down. A bit smaller. Double click it to go inside the group. I'm going to click on him, and just kind of line him up in the middle. And this, I decide to change my mind, and make it '1'. So there's my '+' button, which is not quite lined up. So I'm going to click on you, and you. And, get both of them selected, I'm going to make sure you're aligned and you're aligned. The up and down is not working that well because it's actually a font. So there's a bit of extra at the top, but definitely Horizontal works nicely. So back to 100%. I'm going to grab my Type tool. I'm going to make sure it's centered because if I don't, and I do a Left Aligned, that's going to be fine, but when I start adjusting this, when I repeat it I'm going to have to keep moving this around, because I want this to be centered. So I'm going to click once, I'm going to make sure it is centered.

 

This one is going to be 'Monthly Recurring Revenue'. Select it all, click on 'Roboto'. That will work. And the center of this is going to be my kind of bigger option. It's still centered, which is good. And this one's going to show what my current recurring revenue is. And what we'll do is, we'll start playing around with this. It's going to be different from all these other ones. So it's going to start with the Fairplex Large but I want this one to be Bold. Not Bold, it's going to have to be Book actually because I don't want to blow up my fonts. So, he's going to there, he's going to be lovely color. And there's going to be a little bit of explanatory text down the bottom here. This one's going to set up 9%. This is last month. I might drift that just to kind of play around with the hierarchy of information as I just might have to make that layer a lighter color. And what I want to do is, just move it little bit to the left because actually what I want to do is put a little up arrow or down arrow.

 

Actually I want this, instead of being gray I want it to be green if it's going well. Maybe red if it's going badly, it's always going to go right. I'm going to grab the arrow from maybe the sticker sheet, from Google. There's only right arrow, but we can fix that. Paste it in here, and rotate it around. Holding 'Shift' when you're rotating it will make sure it rotates in kind of a 90° angle, so 45° angles. I'm using my arrow keys just to push this around. And what I might do is, this has come through as a-- But let's select it, and you can't see any of the insides of it which means it's probably grouped, or it's a symbol. So all I'm going to do is, go to 'Object', and go to 'Ungroup'. Now it's a couple of bits, so it's that plus the liner around the outside. I don't want the liner around the outside, I just want you. I want you to show green for good, maybe darker green. And I want to crank the percentage up. I decide again, lighter green. So you spend ages designing one of them, right? And you know it's three columns so what we're going to do now is multiply this thing out.

 

I'm going to zoom out so I can see all of the columns. I'm going to select all of this. I'm going to go to 'Repeat Grid', and I'm going to drag it across. And I just want three of them. And how many down? I want about four of them. So I'm going to play with the spacing. I'm going to zoom in, and try and get the spacing to match the background. Close enough. I'm going to add-- I'll adjust this in a second. It doesn't snap to the things in the background so we'll have to manually do it but to be honest, it means to be 12 columns but not absolute pixel perfect because this is something that is going to be recreated in Code later on. So I'm going to make them kind of even.

 

So you get to a point where you're like, you could now go through and say actually I want to adjust this one, double click this one, and go to 'User Churn'. And the churn at the moment is 15%. At least for my stuff, anyway. My user churn's quite high. We're going to get to a point now where, say I want to change this to be red because the User Churn's going to be up based on last month so this is going to be up 3%. 3% up, based on last month but that's bad, user churn up is bad. Monthly revenue up is awesome. So what I want to do is go through in here and we're going to run into a problem. We'll have this selected, and I want to go and change this to say, a big bright red, you'll notice that all change. So there are things like text, you can change like we changed User Churn, and that didn't update but you'll find quickly that you eventually need to ungroup them, or outline them.

 

The bad thing is that they'd never be able to be that nice little repeated grid. You might be able to drag out more of them but now, with them selected I can go through, and they're all individual parts and that's what I will need now. I need you, if I can ever select on him. He is grouped, that's why I can't select him just this space, so they're all grouped. So what I'm going to do is either double click on it or you can ungroup it. Now I'm going to go to big bright red. And same for the Fill of this. What I might do is add that red to my reusable colors, big bright red. I'm not going to go through and fill those all in. I'll do that at the end, and speed it through. What I want to do is work on the left hand Nav.

 

So, often when you get into admin side of things they'll have a top Nav, nice, simple, easy one for everybody, and then on the left hand side is where you potentially have a second real Nav and that's what we're going to have. So I'm going to grab my Type tool, working at 100%. And grab the Black Arrow, space bar, drag across, click once. And I'm going to have at the top here, the Dashboard. I'll use one of these. Line it up at the top of this. And I'm going to go through and add the different options for this Dashboard. There's no bullet points, so what you can do is go back to User Voice and, that I showed you, and upgrade it as a feature or just hold down the 'Option' key on a Mac, or 'Alt' on PC, and type '8'. Remember, '8' along the top of the keyboard. That will give you a fake bullet. And I'm going to go 'Users'. I'm going to select this, and pick my '16' for my Body Copy. And instead of putting in returns, and putting in the next one what you want to do is have the separate boxes because if I do this and have loads of returns, I can't have this, when I go to Prototype there's more than just one button to go to another page.

 

So all of the Nav will end up in one page. What I want to do is have lots, so back to 'Design'. I want to duplicate this. And now when I go to Prototype, I can say, this button goes somewhere else. Different from this page except for one text box that's not allowed. So in here, I'm going to go through and add this. I'll get Jason to speed this up. Thank you, Jason.

 

So you're back, and what I want to do is, if you didn't know, if you hold the Black Arrow, click, hold, and start dragging, and after you start dragging, hold down the 'Alt' key on a PC, or 'Option' key on a Mac. You'll get a duplicate, and if you drag it close enough you'll see those lovely Magenta boxes pick up, and say, "Do you mean 17 pixels?" and you say, "Yes, please." Nice and easy. There is a duplicate, like in Illustrator, you can go to 'Edit', 'Duplicate', 'Command D'. So that's probably actually a quicker option, 'Command D'. So drag this out, 'Command D'. And it just duplicates the thing. You have to drag it, it doesn't do exactly like Illustrator where it kind of steps it out as well, but you can duplicate or copy, paste, or 'Alt' drag, like I just did. I know this kind of Instructor Navigation is going to appear on lots of pages. So what I want to do is select it all, and make sure it's a symbol over here. Symbols. So that when I update it once, it updates on all the pages.

 

Now if you've forgotten how to update, while we're here I've got two of these now, or even three of them. That means that if I go into this first one and say-- actually, we're not going to call it Users, we're going to call it 'People'. Nothing changes, that's quite unique but if I click off, click back on, right click it, and say, 'Update all Symbols' can you see, these come along for the ride. So that's why - I'm undoing now. - that's why symbols are useful, for like the top Nav, this thing here.

 

There's a couple of things I want to do before I leave. It's kind of the main guts of it done. I'm going to go through and adjust these boxes a little bit. I'm going to turn these off. So I'm going to select them all. Because I've used them to get our lovely Column Grids so I know it can be developed later on easily. But I've selected all of these, and go 'Command ;'. Those are off now, so I can see what it looks like. What I want to do for this page is change the background color completely because I like this kind of white box, but I need to have a little bit of contrast in the background. So all you do is, if you click on the edge you kind of page property, so double click the edge. You see 'Appearance', 'Fill', means that the background color fill. So I'm going to click on this, and just pick a really light off white. I may even add it to my Swatches down here, so I can reuse it later on. Just to pull those off the background.

 

There's a couple of things I want to do before I go. These two boxes, I want to kind of combine into one. So I'm going to turn that one off, I'm going to ungroup this one. He's going to be double height. And this one here is going to be our list of library subscribers. So if you're a trainer, you can see the people that have just signed up. So 'Recent Subscribers'. And you'll see now how useful it is to make sure it was centered before I started working, because it's always going to work from the center, otherwise Left Align can be done. And I want you gone, you gone, you gone. And now I need to get some recent subscribers.

 

A really good trick for that is, if you jump to a website called-- there's lots of them, if you type in 'Random name generator' you'll find lots of them. This is the one I always end up at. Say I want 10 names, I want male and female. Name style, I just want really common names. And generate random names. I use this to populate data sets for my mockups. Makes life really easy. So I'm going to grab all of these, dump them in here. I'm going to make them actually just one big text box because I don't plan on being this clickable in this mockup. So I'm going to grab all of these. I'm going to make sure I'm at 100%. Make sure I'm designing these right. And what I might do is make them all Left Aligned. There's tabs in here, that's not what I want, spaces. Now you can fast forward a little bit, Jason, to the end of this design thing. Hang around for afterwards, there's some more interesting stuff coming. Let's speed this up.

 

All right, I'm back. What I want to do is I want one of these-- these last two are going to be, download the app. We'll do that in a second. And this one here, I would like to be like a little-- because it's a new product, I want to have a little option that says "If you have a great idea, email us." So I'm going to get rid of you, get rid of you. I don't need this. I need an extra button for this one. I'm going to put in a big button, and I'm just going to steal it from this page. It's all grouped, 'Ungroup'. You please, copy. And you are in the center. Nice! This one's going to be 'Feature Requests'. Cool! Hold down 'Alt' to drag it from one side. Kind of goes both sides, or 'Option' on a Mac. That's going to be my little Feature Requests button. Now I'm going to update the rest of these. So Jason can fast forward these, and I'll see you just afterwards for a tiny bit more before we move on.

 

All right, so filled in that details, and what I also want for this is, I need all of you guys just to come down a bit because I need another button at the top here, so I'm going to borrow you. That allows people, when they're in their preview to be able to save where they're up to or start making their own, because this will be a demo one. So we'll do something like 'Create your own'. A little '+' at the end. Sometimes they get a bit long with these buttons so this is probably not going to make it through user testing. I can't for the life of me think of a better way of writing this right now. Same colors. Actually I might pick something slightly different to be a little bit of this. This actually should be Roboto. It means, if that's Roboto, that means that's not either you. Oops. All the buttons are like that. You too, because I copied and pasted them from the Wireframe. You probably saw that and went, "Go", and I ignored it the whole time. It's okay. We've got that up. So, got that, added a little bit of text.

 

You can go on now, I'm just going to add a little bit of text here. That says-- this is actually live data. And I want it to be like colloquial so for some reason, Italics. Makes everything feel like it's the spoken word. It's going to be quite small. This is going to break my rules here because it's going to be something a little bit different. Yes, these are actual live data, that's what I want everybody to know. And what I want to do is, now I got this kind of how I want it. I want to use this on the Home Page. What I'm going to do is I'm going to grab-- I want them all, but that is going to be enough of what I need. I'm going to copy them, and I'll show you what I want to do. On my Home page, I want there to be an example. It's going to go just here. I'm going to put it in a big box that stretches the whole width. And I'm going to make this box this color. And I'll have No Fill.

 

Actually I'm not sure how long it's going to be. I might have to adjust it in a second. And I want it to line up to our 12 column grid. So remember, if I'm on this page here, click inside of it and I go to 'Layers', I should be able to see the columns here. And I want to turn them on. We're going 'Command ;'. And I might have to unlock them because they're not quite long enough anymore. So I'm going to go 'Command L' for locking, and then just drag them down. Then lock them again. Here you go. 'Command L' again, so they're all locked. I'm going to paste this, and I want it to line up with those columns there. And I'm going to come down here. Put it there. Actually I want it to be this column here in this case. I'm going to add a cool little app downloadable during the next video. I'm going to save you. Something like that. And what I want to do is, I want to show you how to make it look like-- because I want this big box in here, to go from the 12 columns. I want it to be the same as these, so you, copy, you, I usually use shortcuts, I'm showing you the long way just so I remind you, but 'Command-Alt-V'. So I copy, 'Command-Alt-V'. It's just a really easy way to grab the exact same colors of these guys. And it totally didn't work because it's not ungrouped. So we need to ungroup them, and then select that part. 'Edit', I'm using my shortcuts. 'Command C', or 'Control C' on a PC and then, 'Command-Alt-V' will paste through the Drop Shadow. The Fill, gets rid of the border. Happy days.

 

Next what I want to do is I want to get this to look like it's fading out. So we're going to look at Blurring a little bit. So first of all, I don't need that and what I'll do is I'll just trim these guys off. Just the little one actually. And all of these, good bye. So what I want to do is, I'm going to grab the Rectangle tool and I'm going to draw something across the bottom here. I don't want it to fade this out. I just want it kind of look like it's disappearing into the bottom there. Like I showed you in the Intro. So what we'll do is, 'Fill', we'll give it 'No Border', and Background Blur, we've used, but we'll just use Object Blur. And you can see, I kind of get a faded edge there to look like it. I probably wanted it to be more, how much? Something like that, I'm just moving it across. Now Fading does it for all the corners at the moment so you need to be, maybe just drag this across and then just go on to him, and bring him to the front. So 'Command-Shift-]' will just bring it to the front, or you right click it, and go to 'Bring to Front'.

 

So I got this kind of disappearing, so looks like there's more to use. So now I'll go and grab this button. What I should do is have both of these guys. Drag it into my Symbols Library, so I've got my buttons easily accessible. Just move them across there, just hit the '+' button on Symbols, so I got my buttons. Don't want them to update one, and they update them all, but I can use them this way, watch this. I'll just use it as they're getting started, so I can drag them out. And he's part of the Symbols, but if I ungroup him, 'Command-Shift-G' or 'Control-Shift-G' on a PC, that means I can just go through and bin them rather than going and finding a page that has them already. So now he's disconnected, if you ungroup them they are disconnected from the Symbols. And this is going to be like a 'See More'. And I'll make it a bit bigger. Cool! So that there's kind of more to go, and you can check it out when you click on that you'll end up over at this page. This page, nowhere. This page here, the Dashboard.

 

Cool little shortcut is, if I click on this box here and I go 'Command 3', or 'Control 3' on a PC it will zoom in just to that specific area. It's a good way of moving around. If you're finding it a little bit hard to get from page to page it is at the moment in XD, they needed some sort of easy navigation pages panel or 'Command J', like InDesign. Some sort of way of jumping back and forth really quickly. Last thing I want to do before we go on to the next video. This is a long one, right? Long, long one. This is going to be 'Keep track of your earnings'. And this is going to be Large Roboto, and I'll make it 100%, so I'm dealing with the font size correctly. So that's going to be him, he lines up there. What I actually might do is, I want to use that, I'll use the white.

 

All right, so next video we're going to build the click here for the app thing, and this is going to be pretty cool. We're going to look at CC Markets, and how to use PSDs, and fold some designs into a working PSD for the market. Sounds confusing, it's not, let's do it in the next video.

ALL ACCESS: $19.95 per Month + Cancel anytime