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.