All right. So here's some of the wire framing that I do by hand, okay? And don't get too excited. It is not super exciting. Now, a lot of this particular, um, wire framing is,  this is just my journal, okay? My, it has to be a mole skin, right?

Um, to impress you. I know what I'm doing, um,  is these wire frames are often just internal kind of stuff  that I'm doing for my business  where I don't have to go and present. So the level of quality doesn't have to be too high,  but it's amazing to do the wire framing. Don't if you're just working on your own project, okay? Don't be tempted  to skip wire frame and go straight to Photoshop. It's so important.

I know, because I used to skip  and go straight to Photoshop, and it's not  until I've been kind of like, been forced into it  and kind of like really embrace the UX process  before I realized wire framing is just part of like,  it's a really core part of it. So in terms of the wire frames, this is the kind  of level that we're looking at. Um, that is a wire frame. Wire frame. Wire frame, okay. Let's have a look.

Some other wire frames, some other things  and bits, you can see the level of them. It's just to get ideas down. Sometimes I put a bit more care into them, but not much. Okay? They're ones I like,  you know, it's kind of at this level. Now, would I deliver this to the client?

Say I'm working in a process where it's, I've been hired  as a UX consultant and I'm going in with wire framing. I'd put a little bit more effort into it, not huge amount. 'cause what I don't want to do is I've had discussions  where I've brought in Photoshop mockups,  and it's the time to talk about kind basic features  and layout where people have started picking colors  and picking fonts or what don't  like the f oh, you can't call it that. So keep the language out. Use Lauren Ipson, use Squeakly text for lines  so people can get a, they just get a really good sense  of it, but without getting into too much detail. Okay?

And if you're super special, um,  you might get a little bit of color. Oh look, highlighting, okay, but that's about it. That's my wire frames. And that really works  for me in terms of ideas. And, um, the other thing is, is  that don't just do one wire frame. Okay?

One wire frame. You go your features list  and you start adding them into here. And don't just do one wire frame. I find I need to do five. Okay? Even if your first one, like, you know,  you do this one that looks cool.

Then the second one, then the  third one, then the fourth one. And it's, it's not till you get a few through into them  that you actually kind of work out a few bugs. 'cause you might go, yeah, that's great. Then you force yourself to do a second one  and you know it's crap 'cause you  kind of, that was the good one. Then you do the third one, you're like,  oh geez, they're going through the process. But I know often when I do all five  and I force myself to number three is the winner.

If you'd stopped at number two, you would never have got  that amazing layout for number three. Okay? So force yourself to go through  and do some more than just one layout. Then what happens with these wire frames is  that you can go in present to the client  or the person you're working with  and you know, it's really easy to talk to these wire frames. And on the fly I find pencil ones,  if somebody's got a different idea,  I can quickly sketch 'em out in front of them, okay? And we can really kind of like talk about the ideas  and can actually, you know, kind of get it signed off there.

You're like, okay, I like this, but you want something else. And then you kind of draw it out. 'cause what happens is you might leave a conversation  and he's thinking one thing  and she's thinking a different thing. And when you come back with your flats  or your kind of like more refined mockups, um,  everybody's a bit surprised. You're like, oh, I thought we talked about not having that. And you're like, no, I thought we did.

But if you've got a physical mockup  and you're drawing it out, people  are like, oh, no, no, I didn't mean that. Those sorts of things happen at that kind  of mockup stage, which is really cool. And I, I prefer hand drawing. Now that's totally like, if you're working in a kind  of a Fortune 500  and they're expecting fancy stuff, you know  that you're charging a lot as a UX designer  and they're expecting fancier things, then sure go use, um,  go use Balsamic or Mockingbird  and, you know, deliver at something a little high value,  but don't spend a long time of it. Explain to them the value in wire frames,  that they're quick, they're easy, they're dirty. They're not meant to be, you know, an annual report kind  of level of design  before you deliver them, rather than kind of sneaking in  and they thinking they're about to get some sort  of amazing ad pitch  and you turn up with a couple of hand drawn things.

So make sure that they understand that a part  of the process is wire framing. And wire framing is very crude  and, you know, might be done on, you know,  on the fly while we're talking and adjusted. And make sure their expectations are, you know, equal to  what you're gonna deliver before you deliver it. It's it like work. It sucks working into a meeting where,  you know, you haven't really clarified what a wire frame is  and you turn up with stuff like this  and it's not super exciting, you know,  and they're expecting, you know, full on, um,  full on mockups that they might be able to use. Alright, uh, that's it for this,  but let's look at some other parts of wire framing now.

Alright, in this video we're gonna actually  start doing some wire framing. Now, wire framing is as it probably sounds, um, just kind  of really basic sketch. Now we're trying to avoid getting into too much details at  wire framing mode. Now, how should you wire frame? What should you do during wire frame? There's a lot to do with your project, okay?

And your style of working. So, um, when it comes to wire framing for me, I always do it  by hand and pencil, and I'll show you that in a sec. Um, I find it's quicker, it's easier  and it leaves, you know,  it stops getting into this big project  and it's, you know, I prefer working that way. Um, I know amazing UX designers who use, um, tools as well. You might be a tools kind of person  for this step and that's totally fine. Now the most popular one is balsamic.

Okay? Um, and there's a couple other ones  that get used in the industry I've never used  and we've used Balsamic a few times,  but there's another one called mockingbird.com  and it's go mockingbird.com and mockup builder.com. There's loads of other ones as well,  but they seem to be the most popular  around, especially Balsamic. Now, um, the other thing is, is something called Adobe com. Now they all do the same sort of thing. Let's have a little look.

You can see their  prototypes are here. They're actually really basic. Okay? Just wire frames. There's no real detail to them. Um, using a, I guess a tool like this does add a little bit.

They start, you start adding fonts and things like that. Um, you know, you get an idea of  what a wire framer is gonna be made out of these. You've got a gallery here. You'll start to see kind of some  of the wire frames that come out of this thing. Now, one of the cool things that Adobe do,  I'm about Adobe fan boy, right? So, um, Adobe Comp has this really cool app, um, for iPhone  and for iPad only really works on the iPad.

And I don't have, I'm not gonna go through and do an example  'cause I show people 'cause it's  mainly 'cause it's really cool. Um, do I actually use it in my  kind of like professional work? No, but let's have a quick little look. I'm just watching a YouTube. It is a bit weird. You're watching a video, watching a  video, let's watch it together.

I'll put this in fast forward,  but you can see it turns these gestures, swipey lines,  put a full stop turns into a big Lawrence inbox up and down. Can you see these really cool kind of functions in here  where you get to use hand gestures  and it starts adding type. So I'm gonna skip along a little bit. Put across in it, you can add images. This is where I fee feel like you lose the  value of wire framing. Um, where you start adding images  and people start, instead of kind  of like looking at the real basic structure,  people start looking at and go, oh, we can't use that image.

That text is wrong. And can you see these  lovely features in this thing? Like it's a really beautiful app. Um, good work, Adobe,  but, um, oh, plus plus, okay, grouping dividing. I love it. Um, but yeah,  I don't use it other than to demo to people.

Um, so those are the kind of, um, physical, you know,  those are the kind of tools you could use. Let's go over now and have a look at some of the wire frames  that I do.