1
00:00:00,740 --> 00:00:01,280
Hey, everyone.

2
00:00:01,310 --> 00:00:01,910
Welcome back.

3
00:00:02,210 --> 00:00:10,570
So what I want to do is I want to start creating some screens for our product, which is habitual.

4
00:00:10,580 --> 00:00:15,020
So we went through the process of, like sketching some ideas out.

5
00:00:15,470 --> 00:00:18,640
We also started sketching like user flows.

6
00:00:18,650 --> 00:00:20,800
We started like way back when we were sketching.

7
00:00:20,810 --> 00:00:26,890
We were thinking already about, let's find it some navigation trees and how certain things are connected.

8
00:00:27,380 --> 00:00:33,120
And I really want to start thinking about our home page in much more detail.

9
00:00:33,140 --> 00:00:35,140
So this is our home page.

10
00:00:35,480 --> 00:00:36,950
We're definitely going to have a search.

11
00:00:36,950 --> 00:00:40,370
We're going to have something around like shopping interests and habits.

12
00:00:40,760 --> 00:00:46,670
We're probably going to have a place for them to get to categories, maybe deals we have like navigation,

13
00:00:46,670 --> 00:00:49,040
which is like wishlists, orders, profile.

14
00:00:49,430 --> 00:00:53,450
We have the car as well, and we have a way to log in or sign up.

15
00:00:53,870 --> 00:01:00,010
So let's jump right in and start thinking about what this could look like.

16
00:01:00,020 --> 00:01:01,940
So I'm going to just create a frame.

17
00:01:02,360 --> 00:01:09,920
I'm going to press F and I'm going to just like that and I'm going to call this home page perfect's.

18
00:01:10,730 --> 00:01:15,680
So the easiest way to start is like, let's take a look at our sketches and where we kind of left off.

19
00:01:16,520 --> 00:01:22,030
So for our homepage, we could tell what we were thinking about, like having some text at the top,

20
00:01:22,040 --> 00:01:23,350
maybe be like a profile.

21
00:01:23,360 --> 00:01:26,090
We can see like we could start thinking about the navigation as well.

22
00:01:26,820 --> 00:01:28,290
We have some images there.

23
00:01:28,550 --> 00:01:30,170
Those are some rough sketches.

24
00:01:30,170 --> 00:01:34,430
So we do know that we were thinking about a search there.

25
00:01:35,060 --> 00:01:37,700
I know at some point we were thinking also.

26
00:01:39,180 --> 00:01:44,500
About search and the navigation.

27
00:01:44,520 --> 00:01:46,950
I don't know where that is, I think it's here somewhere.

28
00:01:47,940 --> 00:01:51,870
Anyways, we started thinking much more in terms of screen states.

29
00:01:51,870 --> 00:01:53,760
So we have like a save icon.

30
00:01:53,770 --> 00:02:00,930
We have a name, we have price, maybe some categories, possibly looks like Ultranet funnels.

31
00:02:00,960 --> 00:02:04,920
They can get into these maybe categories, maybe interests, other things.

32
00:02:05,580 --> 00:02:08,850
OK, so this definitely gives us a lot to work with.

33
00:02:09,300 --> 00:02:16,080
And I'm going to start building based off of my sketches, like we don't need to match them directly,

34
00:02:16,080 --> 00:02:19,170
but I think they'll allow us to have a good starting off point.

35
00:02:19,620 --> 00:02:20,040
So.

36
00:02:21,770 --> 00:02:22,860
Let's get started.

37
00:02:24,000 --> 00:02:29,520
So the first thing I'd like to do with my sketches and my wire frames is start building out some of

38
00:02:29,520 --> 00:02:33,540
the most basic things like navigations and stuff like that.

39
00:02:33,960 --> 00:02:36,050
So I'm actually just gonna go to my ascites tab.

40
00:02:36,060 --> 00:02:43,500
I'm going to go up to UI elements and let's see where is navigation and containers.

41
00:02:43,500 --> 00:02:46,440
And just like that, we have like a navigation bar.

42
00:02:47,550 --> 00:02:51,240
So I think we should kind of start thinking a little differently.

43
00:02:51,240 --> 00:02:55,040
Maybe let's go to our assets and I consulship.

44
00:02:55,050 --> 00:02:55,740
That's OK.

45
00:02:56,730 --> 00:02:58,680
Let's just replace that nicely.

46
00:02:58,980 --> 00:03:00,210
So we've got icons.

47
00:03:00,960 --> 00:03:04,260
We have a social HIRSHFIELD.

48
00:03:04,260 --> 00:03:05,070
Perfect there.

49
00:03:05,100 --> 00:03:05,820
Go easy.

50
00:03:06,440 --> 00:03:08,310
Let's think about profile.

51
00:03:09,560 --> 00:03:12,930
I know we said, like, we could have orders down here and that's very possible.

52
00:03:13,530 --> 00:03:14,580
I was thinking about that.

53
00:03:14,790 --> 00:03:18,350
But we should probably test some different options as well.

54
00:03:18,360 --> 00:03:21,750
We shouldn't necessarily just like stick.

55
00:03:22,600 --> 00:03:30,040
To just one, there's a count that was a good guess and icons.

56
00:03:32,650 --> 00:03:33,950
What else do we have here?

57
00:03:33,970 --> 00:03:36,210
Shopping, maybe, yeah, cart.

58
00:03:36,690 --> 00:03:37,240
There we go.

59
00:03:37,510 --> 00:03:38,160
OK, cool.

60
00:03:38,320 --> 00:03:39,150
So there we go.

61
00:03:39,160 --> 00:03:44,920
We have our very own navigation and we can just like.

62
00:03:48,110 --> 00:03:53,760
Just to show that we are on the home page, OK?

63
00:03:53,840 --> 00:03:57,800
And what I want to start doing is actually.

64
00:04:00,870 --> 00:04:03,630
The CIA got search go.

65
00:04:07,070 --> 00:04:08,540
So we have a search up here.

66
00:04:14,570 --> 00:04:15,950
That is good.

67
00:04:16,940 --> 00:04:17,640
OK.

68
00:04:17,660 --> 00:04:27,200
And I think we should probably have some text so we could just start typing some text in here.

69
00:04:27,200 --> 00:04:29,960
So we have like maybe like a big hello.

70
00:04:31,080 --> 00:04:35,300
You know, some apps are really, really inviting like that.

71
00:04:35,300 --> 00:04:36,460
And I kind of like that.

72
00:04:36,470 --> 00:04:42,650
I mean, I think we should kind of test our messaging as well so we can go into here our phone styles

73
00:04:42,650 --> 00:04:44,480
or see how big some of these are.

74
00:04:46,130 --> 00:04:47,660
Oh, that's way too big.

75
00:04:48,020 --> 00:04:50,150
So let's just go down here.

76
00:04:50,210 --> 00:04:51,160
I think that's fine.

77
00:04:51,770 --> 00:04:52,460
Perfect.

78
00:04:55,220 --> 00:04:56,250
Let's zoom in.

79
00:04:57,530 --> 00:05:00,860
OK, so I'm going to grab some more and I'm just going to write.

80
00:05:02,680 --> 00:05:08,050
We have some recommendations.

81
00:05:08,680 --> 00:05:09,070
Oops.

82
00:05:12,190 --> 00:05:20,360
For you, OK, so that's just going to trail off and we're just going to have to bring that in and let's

83
00:05:20,360 --> 00:05:23,230
set that to like 16 regular.

84
00:05:26,470 --> 00:05:28,480
OK, that's going to work for now.

85
00:05:29,020 --> 00:05:31,480
OK, so we're starting to build out a bit here.

86
00:05:31,630 --> 00:05:33,580
Like I said, it's kind of like sketching, too.

87
00:05:33,580 --> 00:05:36,910
I mean, we're being a little bit more thoughtful about the type of content we have.

88
00:05:38,200 --> 00:05:44,830
We're also thinking much more about like the hierarchy of the information.

89
00:05:44,830 --> 00:05:49,550
So I know that I really want search to be prominent in some way.

90
00:05:49,570 --> 00:05:53,380
So for now, I'm going to bring it up here and see how it performs.

91
00:05:53,830 --> 00:06:00,040
When I test with users, I'm also going to, you know, just hierarchy in terms of our copy as well.

92
00:06:00,330 --> 00:06:04,870
It's just like a big hello, like a welcome and then some recommendations.

93
00:06:04,870 --> 00:06:13,540
Maybe this could lead into some images or like some interspace stuff just for you.

94
00:06:16,210 --> 00:06:25,040
I can bring that in just a little bit, so just auto with brings it right to the width of the content.

95
00:06:25,060 --> 00:06:30,450
I like using not OK so we got a size 16.

96
00:06:30,490 --> 00:06:32,010
We can do regular list.

97
00:06:32,020 --> 00:06:33,580
You say 16 Bould.

98
00:06:36,180 --> 00:06:43,260
And right now, look, I'm not thinking too much about style, I just want to kind of get everything

99
00:06:43,260 --> 00:06:46,050
on the page, then we'll refine.

100
00:06:46,970 --> 00:06:53,460
Design has a very iterative process and you're not going to get everything right in the first go 100

101
00:06:53,460 --> 00:06:53,850
percent.

102
00:06:55,120 --> 00:06:57,980
I will bet on that, and that's OK.

103
00:06:58,060 --> 00:07:05,650
I mean, it's all about just like learning, building, learning, building and learning over and over

104
00:07:06,610 --> 00:07:11,760
until you get it right and you're definitely not going to get it right on the first try.

105
00:07:13,000 --> 00:07:13,760
And that's OK.

106
00:07:14,440 --> 00:07:16,870
So what we got here content.

107
00:07:17,140 --> 00:07:18,490
No, we don't need that.

108
00:07:19,270 --> 00:07:21,310
Menus, option menu chips.

109
00:07:21,310 --> 00:07:25,540
We can maybe we'll switch up image perfect like that.

110
00:07:26,860 --> 00:07:28,210
So we have an image placeholder.

111
00:07:29,680 --> 00:07:33,640
You know, we actually may want to bring in a grid here.

112
00:07:33,640 --> 00:07:38,590
So I'm going to bring in a grid because it's going to help me lay things out a bit more.

113
00:07:40,170 --> 00:07:41,740
So what do we got here?

114
00:07:41,760 --> 00:07:43,320
We got six.

115
00:07:44,640 --> 00:07:50,040
Bring it to eight, margin can be 24, gutter can be 24.

116
00:07:50,050 --> 00:07:55,510
And don't worry, we are going to learn all about grids and how awesome they are.

117
00:07:59,370 --> 00:08:01,050
But they're going to really help us.

118
00:08:02,390 --> 00:08:04,870
To determine how we kind of lay things out.

119
00:08:07,540 --> 00:08:08,830
Perfect's.

120
00:08:10,000 --> 00:08:10,800
OK.

121
00:08:15,850 --> 00:08:17,170
OK, there we go.

122
00:08:18,010 --> 00:08:20,350
So we may have a larger image, I was thinking.

123
00:08:24,650 --> 00:08:30,190
Something like that, I like just hitting them with something really nice right away.

124
00:08:31,450 --> 00:08:36,670
To toggle your grids, if you're using them right away, we will get into it at a later lesson, but

125
00:08:36,670 --> 00:08:43,570
Control G is really your friend here, so control G just to hide and show.

126
00:08:47,080 --> 00:08:51,430
OK, so we're just going to duplicate that, and so when I'm thinking about the type of content I'm

127
00:08:51,430 --> 00:08:58,270
going to need for each product image, I'm thinking about like the product name.

128
00:09:05,530 --> 00:09:07,510
We don't need that to be bold.

129
00:09:08,290 --> 00:09:10,960
It could just be like regular 16 pixels.

130
00:09:11,650 --> 00:09:23,500
I'm also thinking about price so we could just write like twenty five dollars and maybe this is bold.

131
00:09:24,010 --> 00:09:29,050
I know people like to read the name first, but price is like one of the bigger motivators.

132
00:09:29,080 --> 00:09:35,740
So we can do like a size 16 bold and like you can tell, like I'm whipping through this pretty quickly

133
00:09:36,460 --> 00:09:38,140
and maybe we have.

134
00:09:39,250 --> 00:09:41,080
Some information, I like that.

135
00:09:42,350 --> 00:09:49,910
OK, so we got a size 14 regular plug ins, I like to use lorem ipsum, it's just a plug in.

136
00:09:50,450 --> 00:09:51,410
It's really great.

137
00:09:53,200 --> 00:09:59,380
One sentence is probably more than enough, so one sentence, maybe we'll bring that down to 12 pixels

138
00:09:59,380 --> 00:10:01,480
versus taking up a lot of screen real estate.

139
00:10:01,600 --> 00:10:03,040
Let's bring that down.

140
00:10:03,710 --> 00:10:06,250
OK, so.

141
00:10:09,080 --> 00:10:11,850
That's just spaced things out just a little better.

142
00:10:12,260 --> 00:10:21,880
OK, so we got we got something here and I'm just going to call this large product launch product cart.

143
00:10:21,890 --> 00:10:24,860
OK, so now we definitely have.

144
00:10:26,920 --> 00:10:33,370
We have to you'll notice that that just kind of sticks on that grid, which is great, and it's using

145
00:10:33,370 --> 00:10:38,860
a base unit of eight pixels, so it's just going to move in increments of eight.

146
00:10:39,250 --> 00:10:41,050
We'll get into the reasoning for that.

147
00:10:41,710 --> 00:10:42,600
But nice.

148
00:10:42,610 --> 00:10:44,020
That looks really clean.

149
00:10:46,650 --> 00:10:47,950
What else should we have here?

150
00:10:47,970 --> 00:10:51,140
We should definitely have categories as well.

151
00:10:54,990 --> 00:11:02,040
Let's think about those deals and categories, deals are pretty big.

152
00:11:04,160 --> 00:11:05,760
Oops, I actually forgot something.

153
00:11:07,620 --> 00:11:11,610
Let's think about we also wanted like a heart.

154
00:11:13,620 --> 00:11:15,600
So let's just bring that.

155
00:11:15,770 --> 00:11:18,540
I'm going to search for her icon.

156
00:11:21,410 --> 00:11:24,620
Perfect's and.

157
00:11:25,610 --> 00:11:27,170
Let's just make that wait.

158
00:11:29,640 --> 00:11:38,700
And like I said, I mean, use something to make your work flow much more quicker, much more easier.

159
00:11:40,360 --> 00:11:42,570
I mean, we're not worried about being perfect right now.

160
00:11:47,470 --> 00:11:53,560
We're just worried about making sure we can get these designs kind of done, get them into a place where

161
00:11:53,560 --> 00:12:00,640
we can start testing with them, because you will most likely throw these designs out.

162
00:12:01,150 --> 00:12:02,800
It's just the nature.

163
00:12:05,170 --> 00:12:06,760
Of designing wire frames.

164
00:12:07,360 --> 00:12:09,320
OK, that's good enough cool.

165
00:12:10,630 --> 00:12:15,190
So we have the product image and you can tell we have like the name, we have the amounts.

166
00:12:15,190 --> 00:12:16,720
We can just duplicate this here.

167
00:12:18,640 --> 00:12:20,320
We're going to fix this to the bottom.

168
00:12:22,700 --> 00:12:29,690
And we're going to bring this over and yeah, so we can start thinking more about just the type of content

169
00:12:29,690 --> 00:12:31,930
we'll have for maybe smaller images as well.

170
00:12:34,740 --> 00:12:37,530
Make sure that's inside, okay, cool.

171
00:12:39,820 --> 00:12:42,970
I want to start thinking about smaller images to.

172
00:12:46,010 --> 00:12:50,630
So if I turn on my grade again, it's going to help me figure out what is the perfect size.

173
00:12:52,490 --> 00:12:57,020
So, yes, it's difficult to have a product name, we're in a group this and you can actually start

174
00:12:57,020 --> 00:13:01,340
creating like your own little components here, your reusable patterns.

175
00:13:02,030 --> 00:13:05,060
So I'll make this a small product card.

176
00:13:07,250 --> 00:13:10,880
And just to speed up your workflow, if you plan to use these throughout your entire app.

177
00:13:14,320 --> 00:13:19,480
So we got that or you can even bring that in just a bit.

178
00:13:19,510 --> 00:13:20,590
Cool, there we go.

179
00:13:20,620 --> 00:13:25,540
So, like, we already have a deals laid out and what else is next?

180
00:13:25,540 --> 00:13:26,340
And next?

181
00:13:26,350 --> 00:13:29,880
I do want to have something different.

182
00:13:29,890 --> 00:13:31,630
I want to have categories.

183
00:13:39,280 --> 00:13:42,850
OK, so what we're going to do is we're just going to grab assets over here.

184
00:13:48,860 --> 00:13:57,580
Grab a card, cool, and I like the idea of letting them kind of fall a bit off of the page and like

185
00:13:57,580 --> 00:14:01,370
letting the user scroll horizontally so we can definitely do that.

186
00:14:01,390 --> 00:14:02,980
We can definitely prototype with that.

187
00:14:05,400 --> 00:14:08,780
Came in, which is called this like tech or something.

188
00:14:13,080 --> 00:14:16,920
Kirsti, like a size 14, pulled perfect.

189
00:14:22,610 --> 00:14:29,870
When you're creating these wire frames, remember, just constantly reference your notes, reference

190
00:14:29,870 --> 00:14:33,510
your sketches, user flows.

191
00:14:33,530 --> 00:14:39,920
I mean, you shouldn't be going into, like, something like this blind, OK?

192
00:14:40,160 --> 00:14:42,730
And I think that's like that's a good starting point.

193
00:14:42,740 --> 00:14:43,600
One hundred percent.

194
00:14:43,610 --> 00:14:47,720
I mean, that's definitely enough to kind of get us testing.

195
00:14:48,050 --> 00:14:49,460
We have our categories here.

196
00:14:49,460 --> 00:14:53,200
We have our eye navigation that we can use.

197
00:14:53,690 --> 00:15:00,470
We definitely have like deals and we do have something around like our interests and stuff like that.

198
00:15:01,130 --> 00:15:03,530
But I do think we're going to need to improve on this.

199
00:15:03,530 --> 00:15:12,560
Like maybe this can stay, but maybe down here, you know, maybe deals is prioritized or it's not.

200
00:15:13,990 --> 00:15:19,600
Who high in terms of like the order of hierarchy, so, you know, there's different things we're definitely

201
00:15:19,600 --> 00:15:26,950
going to figure out while we test and you shouldn't necessarily just design once and be OK with it,

202
00:15:27,520 --> 00:15:30,070
validate your assumptions, go out.

203
00:15:30,070 --> 00:15:32,330
Just ask people questions.

204
00:15:32,350 --> 00:15:33,310
Talk to your client.

205
00:15:33,310 --> 00:15:37,420
Is this necessarily like fulfill the goals?

206
00:15:37,810 --> 00:15:39,880
Will users actually.

207
00:15:41,130 --> 00:15:44,340
Be enticed to start clicking on certain things.

208
00:15:44,760 --> 00:15:48,130
Does this make you seem like a more personalized shopping experience?

209
00:15:48,150 --> 00:15:48,710
I don't know.

210
00:15:48,720 --> 00:15:50,440
I don't honestly know just yet.

211
00:15:50,460 --> 00:15:51,480
And that's fine.

212
00:15:51,660 --> 00:15:55,520
I mean, we are going to create many variations, and you should be doing that, too.

213
00:15:55,570 --> 00:15:57,310
You don't just settle on one.

214
00:15:57,960 --> 00:16:03,750
So this is the home page that I've just wireframe really quickly using all those components.

215
00:16:04,080 --> 00:16:06,430
And you should definitely give it a try yourself.

216
00:16:07,140 --> 00:16:12,900
You don't need to copy exactly what I did, but go ahead and try to think about other ways that you

217
00:16:12,900 --> 00:16:17,700
can, like, incorporate special interests or make recommendations.

218
00:16:18,570 --> 00:16:24,270
Think about ways that you can get users, like, into our funnel in terms of like purchasing.

219
00:16:25,230 --> 00:16:28,530
I know we kind of have like shopping interests and habits over there.

220
00:16:28,530 --> 00:16:31,980
We kind of knocked everything off in one way or another.

221
00:16:32,760 --> 00:16:39,990
And you should really think about I know the goal of this project is really to kind of drive the point

222
00:16:39,990 --> 00:16:42,020
home of a more personalized shopping experience.

223
00:16:42,030 --> 00:16:44,500
So come up with your own feature.

224
00:16:44,610 --> 00:16:48,480
Think about different ways you can kind of, you know, achieve that goal.

225
00:16:50,090 --> 00:16:56,450
And that's it for our home page in our next video, we're going to figure out what else to build with

226
00:16:56,450 --> 00:16:56,930
our wireframe.