Everyone, welcome back.
So we're going to be talking about wireframe, so we're really going to get into designing very soon,
but you know, we're done or Simchat, we're done.
User flows, you know, we've done a lot of sketching and, you know, we have a good understanding
of the content and the structure that is going into our product.
So now I think wireframe is pretty much the next step.
But the big question is, well, what is a wireframe?
Now, you may have seen images like this when we were sketching and wireframe is a low fidelity layout
that serves three simple purposes.
It presents the information that will be displayed on the page in a little more detail than our sketches
and our user flows.
It gives an outline of structure and layout of the page, and it conveys the overall direction and description
of your user interface.
It's basically, as you can see here, it's just like a blueprint of a building.
But instead of a building, it describes the details clearly and specifically while giving everyone
involved a good overview of the product.
It's kind of like that middle ground between your sketches and higher fidelity designs and prototypes.
They help you really plan layout interaction patterns for your users without worrying about distracting
details like colors or copy or, you know, typography and all those things can really bog down your
design process.
Another thing to really know is that they are really heavily influenced from your prior work.
So if you've done story mapping, you have user stories.
If you've done things like user flows or site maps, I mean, all these different artifacts should really
influence the way you create your wire frames.
So just keep that in mind that you shouldn't just be like jumping in and creating a whole bunch of wire
frames and not necessarily really understanding the type of content that needs to be there in the requirements
that need to be there.
So really consult all those artifacts that you have.
And if you don't have them, you know, talk to the right people that can get you that information,
whether that be product managers, client stakeholders, internal stakeholders, you know, use your
voice if you need those requirements to even start.
So why do we use them?
Two big reasons.
I like using them because they really helped to test your concepts in your structure.
So they really help you to understand how users will navigate your product.
Sometimes you can use your wire frames to highlight certain areas that you think need to have prominence
on a page to test if that piece of content is actually working and if the user flow makes sense.
So this is one of the big reasons I use that so that it could be like user flows again.
But in much more detail.
Understanding the different types of interactions and putting it into a wireframe makes it a little
more easier to test with users to get, I guess, better results.
The next best thing, actually, I think this is the number one thing actually you need to use them
to learn.
They are fast, cheap and impermanent.
Don't get attached to wire frames.
They're meant to change.
As you gather more information through research and feedback from your clients and from your users.
They're a great place to fail.
And I don't mean that negatively on a project, you want to feel as quickly as possible, and that means
you want to test your assumptions as quick as possible before it gets to high fidelity designs or even
development.
You know, they serve as a common language for your team as well.
They're complex enough to inform everyone, but simple enough to not get bogged down by too much detail.
Now, the little kind of graph I have here is the build measure, learn graph.
And if anyone's read lean startup, I think that's amazing because it's an amazing book.
But if you haven't, you should definitely read Lean Startup.
It talks a lot about building, measuring and learning.
So what that essentially means as you build and that could be a wireframe.
That could be a sketch.
You measure it against something.
What metric you're testing against.
It could be like, I want to know if this interaction works.
I want to know if users actually are interested in my product.
You learn from those results and then you build again.
So wireframe is really help you to kind of implement that build measure, learn cycle.
So I want you always to think about that whenever you're kind of testing with users or just talking
to other clients or stakeholders.
Keep that in the back of your mind, because the design process isn't linear.
It's very iterative.
So how can we use them?
Very useful for three big reasons right now.
You know, they help your team estimate the type of work they're going to complete clarity and common
understanding across the team.
They help your team understand what is going to be built.
I mentioned this a little bit earlier.
It gives them an opportunity to chime in as well if you're presenting to them.
And you should always be presenting to them, even if it's just like ad hoc, you know, talk to your
peer really quickly.
Specs are kind of dated and wire frames can be really much more collaborative than that.
So get your team involved as much as possible.
The next thing is user testing.
We use them a lot for user testing.
The sooner you test, the better.
And that's the big thing.
You know, like I said before, fail fast.
So you can get quick feedback without necessarily developing complex prototypes with all those different
types of visual things like typography, color and all the different types of details like that.
So testing with users really uncover like the different types of pain points and opportunities.
So this is a little customer journey map.
You know, if you've created one at this point, that's great as well, because it'll really help you
understand how the user moves throughout your product and other products.
So really document how you user can move through your wire frames, understand like what their pain
points are.
And usually they're you'll understand that there are certain opportunities that you can really benefit
from.
And I also like to I think this is kind of inevitable.
I really like to use these to, you know, demo to clients to go away to get really quick feedback instead
of, like, going all the way and sprinting towards, like, that beautiful design or that beautiful,
complex prototype.
I mean, you got to remind them they is into the final design because, you know, you may have a client
that is just like this has no color or this has no typographic elements, like what is this?
It doesn't look good and it's not necessarily meant to look good.
So you need to explain that to them just so they can give you some quick feedback on certain things
like interactions and, you know, flows and just placement and layout and hierarchy.
Another thing about getting quick feedback is that, you know, making changes to high fidelity designs
is like really time intensive.
And you don't want to be making bigger changes when you're nearly done the product.
You want to be making those changes as you go along and the earlier the better.
So that's how we can use wire frames.
We can definitely use them to like test.
And I think that is the biggest thing is testing early and testing often and not worrying about the
details.
So I'll teach you next how to create them.