Please subscribe to watch this video

Sign Up



Video transcript

Hey there, in this video we're going to look at getting started with our High Fidelity mock-up. We're also going to look at Resources to help you get started. Like this one here is a Windows UI, there is some cool Apple ones you'll find. There's a great Google material one. And we'll look at where to get our kind of ideas for our Mood Board. We'll build kind of a quick little Mood Board. There he is, for our design ideas and we'll put them all together in our XD document. All right, so Resources and Mood Boards, let's get into it. 

So it's High Fidelity time. It just means, remember, we're going to make ones with images, and colors, and fonts we like. First thing is, we're going to create a new document. We're not going to-- it's up to you. Some people like to work from, and just upgrade the Wireframe. I often like to start again, I find the Wireframe gets in my way. I use it, I refer to it, and jump back into it all the time to see what kind of ideas we've got, but I often just find it's easy to start again. So that's what we're going to do in this course. 

So I'm going to start with our kind of standardized site. I'm going to save it, and give it a name. I'm giving mine weird names because it helps for you to be able to find this later on. You can go to Video 19, and actually find the file that I'm working on. Regardless, this is going to be my Instructor, like we did before, 'Instructor HQ', this one's going to be 'Homepage'. Actually, just needs to be 'Homepage'. There's a couple of things we're going to do just before we get started. And it's just around Mood Boards and Resources. 

In terms of Resources, we're kind of set them before. Under 'File', there are these kits here, we'll use Wireframes only. If you download these three, if you click on anything, they actually take you to the website from Apple. And it shows you where to download. You'll see in here, there's an option for XD. So you can download that. I've downloaded them for you for Apple, Windows, and Google. And they're on your exercise files, under 'UI Templates'. We've been using Wireframes, these are these guys here. You can just open them in XD and you can start pulling from these because the nice thing about them is, let's say we use Google material, it's massive but it's really like our Wireframes, but they're High Fidelity. They are pretty. They have got all the trimmings added to them. And often, working from some of these, especially if you're dealing with apps, there are just rules you need, it's going to go on to Google, you're using a lot of their pre-made icons, and symbols, and stuff. So you might as well use something in your mock-up. 

Just so you know, it's probably more common to mock-up the Apple, even if you go and add them both, people like to see the Apple versions. So they're like the iOS sticker sheet. And use that one for it. So, that's one way to get started. Another way to get ideas and resources, is in your Market again. Under 'Assets', 'Market', in here, if you type in 'ui', you often can get a lot of examples that are quite nice. Say you like this one here to get started, you can download it, this one's a PSD, so it's not-- I haven't found any XD options in here yet, but keep an eye on it, you can use just use it as a visual guide and pull in stuff from Photoshop, no problem. So Market's a nice place as well. 

Then you move on to Mood Boards and ideas. It will depend on how you're working with your client. So, let's say, my client that I'm working for this project, the Instructor HQ, they want, they're just like, you go off and make it look nice. They don't have a particularly strong opinion on it, but I've worked with clients who would need a Mood Board first because they want-- or they'll send me a Mood Board. And a Mood Board's just a group of images to kind of give a kind of a feel of where they're heading. So regardless though, I make a Mood Board for myself. It's the fun part, it's just Dan going, "What is this thing going to look like?" "How do I want it to feel?" 

There's a couple of places I go to, I'll quickly show you just to help you. So, Behance is one of the first one, Owned by Adobe, which is cool. And I just do a search for 'web app'. You can see, it's just really nice stuff in here. Now I normally just find stuff that I like, and then take a screen shot. And I'll just do a screen shot of this. And have a bunch of screen shots to build my Mood Board from. Same with Dribbble, I typed in-- I type in 'web app' all the time. Just because there's a search here. Gives me the kind of things I'm looking for. You might type in 'ui' or 'app design' and just get kind of some ideas. Open them up, take screen shots. So, Dribbble, with three 'b's. 

Niice is another one, with two 'i's Here's another one I've done for web app. The cool thing about this is that this is actually a Mood Board creator. I use this all the time. I'm not going to go through it all, but go to, and they'll sort you up there, there's a free option. Awwwards is a nice place, 'a' 'www' in the middle there. This is another great place. Often this is, I guess a little more structured, there's some amazing things in here. And the awards are one for different categories. So you might be looking in Blogging, which is quite nice, and it just gives you kind of a cut down version and gives you reasons why it's so great. 

Another kind of awards place is the Webbies. So Webbyawards is an online awards. I think they started with websites, there seems to be everything in here now, but I go in, I searched for this year, and I went through, and I picked-- I looked at 'Web' and then I looked at 'Best User Experience' or 'User Interface'. And you just get kind of nice, cool ideas. And you can scroll through, open them up take screen shots of the stuff that you like. Last one, there is no last one. Back to our app. 

So once you've got them all-- I took some screen shots on my Mac. On your Mac, it's 'Command-Shift-3', you can draw out a little box. Actually 'Command-Shift-3' is the whole screen. 'Command-Shift-4' will draw out a little box. And they'll end up on your desktop. What I've done just to show you is I've created in your exercise files-- here's a bunch of screen shots that I took. There's just loads of them. I just took lots of stuff. And what I do is either use that Niice to make the Mood Board, it creates cool little PDFs like this. It generates them for you, which is great, or I just dump them on the page in XD most of the time, so I just select a chunk of them, at the moment I've got six. I'll do five at a time, and in XD I'm going to jump to our new project. I'm going to zoom right outside and see the paste board. And I'm just going to drag them in. And I've got those ones. I just start dragging in five at a time. Or six at a time. If you do them all in one big go then there'll be one big line that heads off into no man's land. 

So if you're an InDesign user, you could use Gridify, that could work. Photoshop is a stack into layer options under 'File'. Whatever you want, but I like to just kind of build a little blob of awesome Mood Board goodness. It's a bit big by default, the screen shot's on this Mac. So I'm still going to make it a lot smaller. And I'm going to stick it up here, and group it. And what I'll do, when I'm working, and I'm looking I'm just kind of looking for-- I'll pull my colors from here, I start searching for fonts. I get kind of layout ideas. This screen shot, this is a reasonably big one but often this can be huge, I love this part of the job, getting ideas. You'll also start to notice that even though these are all different websites you can start to see the same kind of colors coming through. Very common at the moment, I guess those, I want to say, tropical pastels. That's where we are at the moment. Let's move on to the next video where we start looking at Columns and Grids. It's getting serious.