Hi. This video we're gonna look at tips for building amazing ui UX designs. So we're kind of at the UI stage now where we're actually building some physical things. Now, first of all, let's discuss what a mockup is. Now we are gonna have to build something. Now that's gonna be tested and you can build it lots of different ways.
We're can talk about the tools and techniques in a little bit. But essentially this is some of the stuff that I do. I build things in Photoshop, okay? This is a mockup of one of my training sites. There's a video thing, there's subscription pages, and all these are, these are flats. These are just Photoshop layers, okay?
They don't do anything. You can't click any of it. They're not hyperlinks. I use this tool 'cause I'm really quick at Photoshop. And so that was the one of the tools that I use for a lot of my UI designs. Now, um, what I'm gonna have to do after here is add a bit of interactivity, and that's done generally through, um, something called Envision.
And we'll look at that later on as well. So I can take these and add some clickability to do it, to get it tested. So it could be that you're using Photoshop, um, you could be using PowerPoint, you can build your ui, kind of mockup any which way you like. InDesign, illustrator, um, muse. There's lots of, there's lots of online tools as well. I'll show you using Sketch and Experience Designer.
So, um, yeah, that's what a mockup is. It's, we're gonna do some kind of quick stuff so that we can then get it off and get it tested, right? So now let's get into some of the tips for building your mockups. Now, the first thing you need to do, if you are new to this kind of like online app we are building stuff, is go check out this site here. It's material.google.com. And the lovely people at Google have put together this really the, you know, it's the, it's the, it's the super manual for UI interaction design, okay?
Whether it's mobile or web. And just go through it, read it all up and, you know, uh, suck in all the information. There's a huge amount of stuff in here. Like, it looks quite simple and it is 'cause it's really beautifully designed, but, and if you start working your way through it, there is so much valuable, thoughtful information in here. Even if you are not, I like, there's lots of things in here I'd argue with in terms of the way that they're kind of like talking about some of the objects. And even if you don't agree with it, what it's gonna really get out of it is you're gonna be able to kind of talk the talk, okay?
Understanding the language when you are trying to express ideas. You're not saying it's cool. You are kinda using, you know, the proper language and, um, be able to kind of articulate yourself a lot better by going through this site. And yeah, just getting a lot of, there's a lot of really key features in here about, um, materials and kind of interaction and movement. There's a lovely good stuff in here. Now, one of the best parts in here that I go back to quite a bit is there's a resources option, okay?
And there's some really cool templates and stuff you can use outta here. Font, sticker sheets. There's some really cool things in here. So it'll take you a long time. And it should be something though that every, uh, UX designer goes through and reads, even if you're not a designer, it has some really amazingly valuable stuff in here. Now, our first tip in awesome, amazing tips for UI designers is talking about the above the fold.
So above the fold is kind of a, the terminology came from newspapers where they were laying down flat and people picked them up based on the stories that they could see. And anything that was, uh, that was, it was on the front page, but if it was folded down and underneath, you wouldn't see it. So you'd have all the top stories, uh, fighting it out to be, you know, what was really important was above the fold. It's the same for websites, okay? That language is being used where you can see on my site here I'm at CNN. The stuff that I can see now is above the fold.
Anything that I have to scroll down for is below the fold, okay? And potentially you could, if you've got your most important message or your, um, say it's an e-commerce, so the buy now buttons or the, the, you know, the, the, the kind of main, um, I guess headlines or call to actions, the below the fold is not a good place for 'em. They need to be above the fold. So you're gonna have to balance out what goes above the fold. You can't put everything in the site up here, but the most important stuff needs to be okay. People will argue that, oh, people don't mind scrolling.
And there are sites that do, you know, do kind of work with that. But, um, if you start looking at research and statistics about where people do scroll and click tail's a really good one. And I'm looking at, I just did an image search for the Clicktail. We're gonna look at clicktail later on, but you can see the kind of heat maps for scrolling. You can see everybody sees the red stuff and the, the amount of people that scroll, the kind of colors change. So when it gets down to this blue stuff, that means very few people have gone down to there.
So if you are really good call to action, it happens to be right down this blue stuff and most people aren't seeing it, you're not being able to deliver your main message. And there's some, they do some really cool, um, uh, free information about, about um, working on, uh, above the fold as well. And it has data about how many people scroll down. So different pixel lengths and you know, uh, the percentage of people scrolling. So if you do need a bit of backup in terms of explaining, you know, your reasons to have things in certain places, there's some really cool stuff for above the fold there. The next thing to consider is that your homepage might not be the page that gets seen the most or the most important page when you start doing a designing a ui.
You spend eights on the homepage and I do it myself, but there's a lot of time where the homepage isn't the most important. And you gotta think of yourself. You've done Google searches and you've ended up within a site on a page, but potentially not the homepage. And I know that's true 'cause I can look at say, data like this. I can go to my analytics, I can look at behavior site content and landing pages. So not the most popular pages, okay?
I don't wanna go to all pages. I wanna go to landing pages. This is where people land, where they come directly into my site. Um, and the cool thing about it's, I can look in here and I can see that actually my homepage, which is this little slash here is not the most important page, okay? It's not the most landed on page. It's this my Dreamweaver responsive bootstrap one.
Now this is the page that people land on when they wanna do a course for Dreamweaver responsive. There's another Dreamweaver course. There's my HTML five banner pages. These are all my overview pages for starting a course. Okay? And so you've gotta make sure that you communicate your core goals on all pages or at least all the kind of landing pages.
So people forget that they'll do everything kind of all their big, uh, hero text and their really kind of big sell and their call to action on the homepage and then kind of leave it off all the rest of the pages. So you might have to integrate that stuff into lots of pages. I have to do it on my overview pages 'cause I know that people land on those more than my homepage. Alright, the next tip is borrowed credibility. This one's a bit iffy, okay? It means that you can see in here, this is my New Zealand website, okay?
We do, uh, in classroom stuff and you can see it, we're an Adobe certified training center. So I've used that throughout the site. I love the brand. It kind of makes us official from Adobe, which we are, I make sure we use the official logos and there's a bit of kind of their brand, Adobe's brand rubbing off on us down here at the bottom here. These are the companies that we work with, okay? These are, you know, some of the companies we've done work for.
Now, if you are not from New Zealand, you're probably not gonna recognize any of these, but these are the big brands in New Zealand and there's this kind of inference of, uh, you know, they trust us and they have used us before, so maybe I should trust them as well. And that's what you're looking to do for this borrowed credibility. Now, it doesn't just have to be logos and brands, it can be things like fonts. I've done it before where I've used the same font as Adobe. Okay? So I could kind of align myself with 'em a little bit more.
I don't anymore. Another thing I've done is I've used, uh, YouTube's, um, kind of logo, not logo, sorry, they're, uh, fonts and they're kinda weights and stuff. They kind of add a bit of video to my sites before I've changed from that since, okay? But it's not just, you know, not just colors and fonts and logos. There's lots of things you can do Now in terms of icons and logos like this. And let's have a look at some of the other ones.
Webster's a site that I use and I was just looking at it, I was just trying to find examples. You can see these are the companies that they're working with. Same with Mars. These are the people that are using Mars. Um, I just googled, uh, London accountant to find an example. And you can see down here they've got, they're a gold partner for Xero.
They've won some awards, okay? These types of things add credibility to a site and it's the thing you can kind of think about to what in your industry. Like, I've done work for my accountant and I made sure he's in a certified, um, um, you know, a certified accountant and I make sure that that's plastered all over the place 'cause it adds that, you know, it's a, it's a qualification and it makes it all very official and kinda adds value to his site. Okay? That kind of brand connection. Okay?
This is gonna be our last little tip and trick and it's the five second test. I like this because it helps me when I'm designing. I sometimes get stuck in a bit of a, a loop of just kind of cramming things in and shuffling it all around to make it all fit. And I kind of forget the purpose of the site is that it needs to be a kind of a clear, um, you know, a clear message about what it is. 'cause you've got a really short amount of time. Like you could argue you've got five seconds before somebody moves on to the next page.
But, um, it's around that sort of time where people make a decision based on your site. So what you can do for yourself is while you're designing is just to get somebody to test. So it might be the person sitting next to you might be somebody at home, um, just so you can flash it to, and all you do is that it's really primitive. This is the official tool, um, from Usability Hub, the five second test, and you can sign up and make them do it and it's a cool kind of pay, you know, cool kind of thing. But, um, I find it is, I do it quite primitive. I do this, I watch, see there's tab here.
I'm gonna, I'm gonna force you to do a five second test. Ready? Go. Okay? And what I want you to do is try and recall what you remembered about it. Okay?
You've only got a short amount of time, but, um, I'm not saying that my example here, this is my Irish website, um, I'm not saying it's a good example, it's an ex, it was just, ah, an example. And it just really helps you get clear about, you know, was it communicated? You know, am I communicating the core values or the main USP or whatever you need to be getting across. Are you doing it clearly or are you, have you designed it kind of into a, uh, you know, loads of different things and it's really unclear what it does. The five second desk I find is really useful even just to do to yourself. Okay?
Um, you don't have to get other people involved just to kind of look at it quickly and say, am I, you know, am I getting this across? Is the hierarchy of information quite useful? Now that's it for the tips in terms of, um, you know, before you get started or while you're working, now we're gonna look at some of the tools you can use to start building your mockups.