1
00:00:00,360 --> 00:00:01,650
Hey, everyone, and welcome back.

2
00:00:01,890 --> 00:00:09,120
So where we left off, we were ready to create our very own wire frames and that is exactly what we're

3
00:00:09,120 --> 00:00:10,740
going to do now.

4
00:00:11,150 --> 00:00:17,820
And wire frames are very dependent on just like the type of content you have, whether that be like

5
00:00:18,240 --> 00:00:24,630
what you've decided within your sitemap and your user flows and even your sketches.

6
00:00:24,660 --> 00:00:28,320
So I have some sketches here and I have my user flows.

7
00:00:28,320 --> 00:00:33,480
I have a map we created and I'm going to start building out a couple of pages.

8
00:00:33,940 --> 00:00:39,870
But before I get into that, I really want to talk about my workflow when I'm designing wire frames.

9
00:00:41,130 --> 00:00:42,250
So let's jump right in.

10
00:00:42,630 --> 00:00:47,520
So when I'm designing wire frames, I usually start like with sketches.

11
00:00:47,520 --> 00:00:51,330
I go to user flows to kind of like flush them out of it.

12
00:00:51,600 --> 00:00:56,790
Sometimes I'll do my user flows within sketches and then maybe go back into Sigma like I showed you

13
00:00:56,790 --> 00:00:57,210
before.

14
00:00:58,050 --> 00:01:03,590
But when I'm really going into the details and getting into the details and thinking about, like,

15
00:01:03,630 --> 00:01:09,120
all the different types of content that is going to be on a page or for like an interaction, I'm really

16
00:01:09,120 --> 00:01:13,110
focused on speeding up my workflow as much as possible.

17
00:01:13,410 --> 00:01:17,040
So I use wire frames for a bunch of different reasons.

18
00:01:17,040 --> 00:01:23,880
I use them to show to clients mainly I use them for myself when I'm creating prototypes so I can quickly

19
00:01:23,880 --> 00:01:29,160
get prototype out without necessarily worrying about all the different types of like styles that being

20
00:01:29,160 --> 00:01:36,360
like color typography, like grids, all that kind of stuff that we gradually build our way up towards.

21
00:01:36,900 --> 00:01:44,610
So I typically want to go and build like really quickly black and white, greyscale, maybe some color

22
00:01:44,610 --> 00:01:45,270
if I need to.

23
00:01:45,420 --> 00:01:50,750
And the best way to do that within Sigma is to like have some sort of component library or style guide.

24
00:01:51,180 --> 00:01:57,720
Now, there's a great resource that I have linked for this lesson and it's going to really help you

25
00:01:58,050 --> 00:01:59,790
just speed up your entire workflow.

26
00:01:59,790 --> 00:02:02,610
And I'm just going to go through it quickly before we get into it.

27
00:02:03,360 --> 00:02:07,920
I've just basically modified it a bit for myself.

28
00:02:08,580 --> 00:02:13,680
And what I have here is like it gives me a bunch of navigation bars if I need them.

29
00:02:15,210 --> 00:02:17,030
It has like containers.

30
00:02:17,610 --> 00:02:18,990
There is like tables.

31
00:02:18,990 --> 00:02:21,120
I mean, you have everything you need.

32
00:02:21,120 --> 00:02:23,100
Like, these are a bunch of UI elements.

33
00:02:23,250 --> 00:02:24,600
These are really great.

34
00:02:25,020 --> 00:02:28,590
And like I said, it's it's all about speeding up your workflow.

35
00:02:28,980 --> 00:02:32,940
And this component library is amazing.

36
00:02:33,030 --> 00:02:33,960
It really is.

37
00:02:35,220 --> 00:02:43,590
I found that like using something like this, I could easily get through tons of wire frames without

38
00:02:44,010 --> 00:02:46,470
getting bogged down by trying to create my own.

39
00:02:47,880 --> 00:02:55,380
And essentially these components, you can just like drag and drop them into your, like, wire frames.

40
00:02:55,950 --> 00:02:57,870
You can grab them from your assets panel.

41
00:02:57,870 --> 00:02:58,710
You'll see them here.

42
00:02:58,710 --> 00:03:03,300
So if I want UI element like a field, I can just like grab that dropdown.

43
00:03:03,300 --> 00:03:05,520
Here it is so I can get a dropdown with the label.

44
00:03:05,520 --> 00:03:06,660
Really easy.

45
00:03:06,660 --> 00:03:07,170
And there you go.

46
00:03:07,170 --> 00:03:11,050
It's already designed for you and you can just adjust the content to what you want.

47
00:03:11,700 --> 00:03:15,780
So I definitely recommend using something like this.

48
00:03:15,780 --> 00:03:19,920
I'll link the original into our resources so you can use it.

49
00:03:19,920 --> 00:03:21,790
You can modify it the way you want.

50
00:03:21,860 --> 00:03:24,240
I've taken a couple of things I don't necessarily like.

51
00:03:24,660 --> 00:03:27,900
I've also kind of like added some icons if I need to.

52
00:03:27,900 --> 00:03:30,210
But this is really great.

53
00:03:30,600 --> 00:03:31,680
I'll show you a little bit more.

54
00:03:31,680 --> 00:03:37,440
So we have like a bunch of different icons and they're all categorized by like categories like most

55
00:03:37,440 --> 00:03:37,710
use.

56
00:03:37,710 --> 00:03:39,630
You have a county of badges.

57
00:03:40,440 --> 00:03:43,260
We even have some screen templates if you want to use those.

58
00:03:43,650 --> 00:03:46,500
I mean, like you don't necessarily need to use them.

59
00:03:46,500 --> 00:03:51,090
You can just create like a frame that's the size of a tablet or like a phone device.

60
00:03:51,570 --> 00:03:56,700
And when you go to prototype, you can just select the device and it'll play within that.

61
00:03:56,700 --> 00:04:02,310
But if you want that extra little bit, this even is good for like using it for like showing off your

62
00:04:02,310 --> 00:04:02,700
designs.

63
00:04:02,700 --> 00:04:05,850
If you want to see what else we are, we have cursors.

64
00:04:05,850 --> 00:04:11,040
If you want to illustrate something which is really great, like if you're trying to illustrate some

65
00:04:11,040 --> 00:04:15,900
sort of interaction and you need a little bit of help explaining, that's great.

66
00:04:15,900 --> 00:04:18,420
They also have like a just a standard color palette.

67
00:04:18,420 --> 00:04:22,170
So you'll see like the local styles here, right there.

68
00:04:22,170 --> 00:04:30,540
So if you need them, really awesome and easy to use and just some typography styles that give you a

69
00:04:30,540 --> 00:04:31,380
wide variety.

70
00:04:31,380 --> 00:04:33,660
So this is not like a design system or anything.

71
00:04:33,660 --> 00:04:35,460
I mean, it's very generalized.

72
00:04:35,460 --> 00:04:36,360
It's very vague.

73
00:04:36,360 --> 00:04:42,000
It's up to you to kind of put all these different elements together to create whatever you want.

74
00:04:42,660 --> 00:04:49,170
So definitely I recommend using something like this just to speed up your workflow, because it's going

75
00:04:49,170 --> 00:04:57,630
to really help you get your product ideas like in and ready to prototype without necessarily getting

76
00:04:57,630 --> 00:04:59,760
bogged down by all the different types.

77
00:04:59,840 --> 00:05:06,890
Of states, different types of elements, possibly styles, so this takes care of it for you and I definitely

78
00:05:06,890 --> 00:05:12,590
recommend it in the next video, we're going to jump right in to creating a couple of pages within Sigma.