Hey, everyone, and welcome back.
So where we left off, we were ready to create our very own wire frames and that is exactly what we're
going to do now.
And wire frames are very dependent on just like the type of content you have, whether that be like
what you've decided within your sitemap and your user flows and even your sketches.
So I have some sketches here and I have my user flows.
I have a map we created and I'm going to start building out a couple of pages.
But before I get into that, I really want to talk about my workflow when I'm designing wire frames.
So let's jump right in.
So when I'm designing wire frames, I usually start like with sketches.
I go to user flows to kind of like flush them out of it.
Sometimes I'll do my user flows within sketches and then maybe go back into Sigma like I showed you
before.
But when I'm really going into the details and getting into the details and thinking about, like,
all the different types of content that is going to be on a page or for like an interaction, I'm really
focused on speeding up my workflow as much as possible.
So I use wire frames for a bunch of different reasons.
I use them to show to clients mainly I use them for myself when I'm creating prototypes so I can quickly
get prototype out without necessarily worrying about all the different types of like styles that being
like color typography, like grids, all that kind of stuff that we gradually build our way up towards.
So I typically want to go and build like really quickly black and white, greyscale, maybe some color
if I need to.
And the best way to do that within Sigma is to like have some sort of component library or style guide.
Now, there's a great resource that I have linked for this lesson and it's going to really help you
just speed up your entire workflow.
And I'm just going to go through it quickly before we get into it.
I've just basically modified it a bit for myself.
And what I have here is like it gives me a bunch of navigation bars if I need them.
It has like containers.
There is like tables.
I mean, you have everything you need.
Like, these are a bunch of UI elements.
These are really great.
And like I said, it's it's all about speeding up your workflow.
And this component library is amazing.
It really is.
I found that like using something like this, I could easily get through tons of wire frames without
getting bogged down by trying to create my own.
And essentially these components, you can just like drag and drop them into your, like, wire frames.
You can grab them from your assets panel.
You'll see them here.
So if I want UI element like a field, I can just like grab that dropdown.
Here it is so I can get a dropdown with the label.
Really easy.
And there you go.
It's already designed for you and you can just adjust the content to what you want.
So I definitely recommend using something like this.
I'll link the original into our resources so you can use it.
You can modify it the way you want.
I've taken a couple of things I don't necessarily like.
I've also kind of like added some icons if I need to.
But this is really great.
I'll show you a little bit more.
So we have like a bunch of different icons and they're all categorized by like categories like most
use.
You have a county of badges.
We even have some screen templates if you want to use those.
I mean, like you don't necessarily need to use them.
You can just create like a frame that's the size of a tablet or like a phone device.
And when you go to prototype, you can just select the device and it'll play within that.
But if you want that extra little bit, this even is good for like using it for like showing off your
designs.
If you want to see what else we are, we have cursors.
If you want to illustrate something which is really great, like if you're trying to illustrate some
sort of interaction and you need a little bit of help explaining, that's great.
They also have like a just a standard color palette.
So you'll see like the local styles here, right there.
So if you need them, really awesome and easy to use and just some typography styles that give you a
wide variety.
So this is not like a design system or anything.
I mean, it's very generalized.
It's very vague.
It's up to you to kind of put all these different elements together to create whatever you want.
So definitely I recommend using something like this just to speed up your workflow, because it's going
to really help you get your product ideas like in and ready to prototype without necessarily getting
bogged down by all the different types.
Of states, different types of elements, possibly styles, so this takes care of it for you and I definitely
recommend it in the next video, we're going to jump right in to creating a couple of pages within Sigma.