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

2
00:00:01,680 --> 00:00:07,740
So I just want to kind of start to finish off filling up this page, I'm going to start thinking about

3
00:00:07,740 --> 00:00:13,260
a couple of different, like UI elements that maybe we, you know, maybe we didn't think about too

4
00:00:13,260 --> 00:00:13,530
much.

5
00:00:13,530 --> 00:00:19,290
So maybe let's start with thinking about so the profile, we kind of removed it from the nav.

6
00:00:19,290 --> 00:00:25,770
And I think, you know, maybe we should have like a static, persistent, like Avatar in the top.

7
00:00:26,100 --> 00:00:32,190
So let's see where we are on our grid so we can start thinking about, you know, if we do have avatars,

8
00:00:32,460 --> 00:00:33,570
like, what do they look like?

9
00:00:34,180 --> 00:00:38,190
I'm going to use the plug in over here called Content Real.

10
00:00:38,550 --> 00:00:40,080
And I have this selected.

11
00:00:40,080 --> 00:00:41,670
I'm just going to select an avatar.

12
00:00:42,300 --> 00:00:44,310
And then we go, we have our avatar.

13
00:00:44,430 --> 00:00:45,780
I just plops right in.

14
00:00:46,650 --> 00:00:47,340
That's pretty cool.

15
00:00:47,340 --> 00:00:51,320
I mean, let's think about do we need something like that?

16
00:00:51,330 --> 00:00:51,960
Maybe.

17
00:00:51,960 --> 00:00:52,760
Maybe not.

18
00:00:52,770 --> 00:00:53,370
I don't know.

19
00:00:53,400 --> 00:00:55,600
Maybe we need to rework Arnav a bit.

20
00:00:56,280 --> 00:00:57,390
What about this?

21
00:00:57,390 --> 00:00:59,700
I mean, what happens if people want to see more?

22
00:00:59,700 --> 00:01:03,210
Do we have a title here and do we have another link?

23
00:01:03,600 --> 00:01:07,080
Is that too much to kind of have that over and over again on a page?

24
00:01:07,710 --> 00:01:08,400
Maybe?

25
00:01:08,640 --> 00:01:09,300
I don't know.

26
00:01:09,750 --> 00:01:12,780
What we can do is we can start thinking about some alternatives.

27
00:01:14,080 --> 00:01:19,510
So I'm going to use I'm actually going to create a large Budden and within that button I'm going to

28
00:01:19,510 --> 00:01:27,130
place it within that frame, I'm going to place some text and I'm just going to just say cover more.

29
00:01:28,060 --> 00:01:35,410
Like, maybe I'm here, I'm also exploring different things, like just our language, what type of

30
00:01:35,410 --> 00:01:36,400
language do we want to use?

31
00:01:36,400 --> 00:01:38,340
Do we want to entice users like that?

32
00:01:38,710 --> 00:01:42,310
We want to stay more standard, like just saying stuff like seemore.

33
00:01:43,450 --> 00:01:45,510
These are the types of questions you should be asking yourself.

34
00:01:46,910 --> 00:01:51,650
So what I'm going to do here is I'm just going to make that right.

35
00:01:52,460 --> 00:01:54,710
I'm going to actually make this an auto layout.

36
00:01:54,720 --> 00:02:00,050
So I switched the vertical so I can adjust the width and

37
00:02:02,390 --> 00:02:03,430
that's fine.

38
00:02:03,440 --> 00:02:04,190
The top.

39
00:02:05,180 --> 00:02:07,160
We want to make this like a forty eight pixel.

40
00:02:07,160 --> 00:02:13,040
So we're just going to have to do a little bit of testing to get it there.

41
00:02:14,630 --> 00:02:17,420
So we have forty eight armed.

42
00:02:19,180 --> 00:02:20,390
Let's roll with 48.

43
00:02:20,410 --> 00:02:24,220
I think that's why this needs to go in the middle, so it's going to just add to the middle.

44
00:02:24,980 --> 00:02:28,390
Let's make this reach the end of our.

45
00:02:29,350 --> 00:02:33,520
Our grid, so it's centered, that looks good, looks good.

46
00:02:33,550 --> 00:02:38,170
We don't need any space in between and we need to fill 100 percent.

47
00:02:38,170 --> 00:02:41,110
We need to fill so we can start thinking about like buttons.

48
00:02:41,420 --> 00:02:44,020
We have this kind of this yellow from our app.

49
00:02:44,980 --> 00:02:46,690
Let's actually just grab that logo.

50
00:02:53,200 --> 00:02:57,910
So we have this this yellow that we're using and we're we're sticking very much with the branding,

51
00:02:57,910 --> 00:03:00,430
the color palette that we've kind of expanded upon.

52
00:03:00,820 --> 00:03:02,800
I don't know if I like this teal that much.

53
00:03:02,800 --> 00:03:04,960
It's making things look really kind of dull.

54
00:03:05,560 --> 00:03:10,900
But let's just keep going and we will figure it out 100 percent.

55
00:03:10,910 --> 00:03:11,590
We will figure it out.

56
00:03:11,600 --> 00:03:16,030
So you'll notice how I've broken up my color styles and I'll get into that later.

57
00:03:16,030 --> 00:03:18,700
But it just makes it easier when you kind of break it up.

58
00:03:18,700 --> 00:03:20,800
I use Kaso like background checks.

59
00:03:20,800 --> 00:03:24,180
Even if you're repeating the colors, you'll notice, like, I repeat, quite a bunch.

60
00:03:24,940 --> 00:03:31,990
So that way if I'm in a very complex component like this, I can easily just pick off like, what's

61
00:03:31,990 --> 00:03:34,510
a UI color, what's a text color.

62
00:03:34,510 --> 00:03:37,330
And if there's multiples, I just want to change the text color.

63
00:03:37,330 --> 00:03:43,370
I can easily just find anything that says like UI or text and just change the base off of that.

64
00:03:43,390 --> 00:03:45,220
I haven't been using that here.

65
00:03:45,860 --> 00:03:50,620
It makes it really easy to go back and make some of those changes.

66
00:03:51,340 --> 00:03:57,240
OK, so for color, I think white will be fine in terms of accessibility.

67
00:03:57,250 --> 00:03:58,960
I think that's pretty good.

68
00:03:59,680 --> 00:04:01,090
We'll need to test that for sure.

69
00:04:01,100 --> 00:04:03,090
And I'm sure this is not accessible.

70
00:04:03,280 --> 00:04:05,230
So like I said, we'll just test.

71
00:04:06,100 --> 00:04:10,750
But I'm kind of liking this nice orange button, like what happens if we kind of add an effect to it?

72
00:04:11,320 --> 00:04:15,180
So I like to do is I'll just create a copy over here usually like this is well done.

73
00:04:15,210 --> 00:04:17,890
I'll just create a bunch of different copies of things.

74
00:04:17,890 --> 00:04:24,850
And I'm starting to see, like, OK, this is where we're kind of going in terms of our exploration,

75
00:04:25,270 --> 00:04:32,830
just general hierarchy, like when you see things separated away from the pages, just remove this image

76
00:04:33,550 --> 00:04:38,410
and you start to kind of like, oh, this is looking very interesting.

77
00:04:38,410 --> 00:04:43,500
And I can see if these little pieces can kind of survive on their own.

78
00:04:43,870 --> 00:04:45,450
I may go back to this image here.

79
00:04:45,700 --> 00:04:47,950
This needs to be refined a bit.

80
00:04:48,370 --> 00:04:55,120
I can start seeing like just the general visual direction of my designs, much more easier than just

81
00:04:55,120 --> 00:05:00,700
kind of viewing in a page one after the other as they're kind of secluded to where you're viewing them

82
00:05:00,700 --> 00:05:01,360
on the screen.

83
00:05:01,360 --> 00:05:04,800
So I'm trying to make one like cohesive language.

84
00:05:05,140 --> 00:05:06,310
We have a button here.

85
00:05:06,310 --> 00:05:08,200
I really like the button a lot.

86
00:05:08,230 --> 00:05:13,480
And what I'm going to do is I'm going to add an effect and maybe this will work.

87
00:05:13,480 --> 00:05:16,540
So I have a default shadow.

88
00:05:16,870 --> 00:05:17,940
So that's really nice.

89
00:05:18,580 --> 00:05:21,640
So I'm starting to think like, OK, what happens when it's active?

90
00:05:21,640 --> 00:05:24,220
What happens in somebody taps on it on desktop?

91
00:05:24,220 --> 00:05:25,790
What happens if somebody hovers over it?

92
00:05:25,790 --> 00:05:29,290
So I'm trying to think about all these little micro interactions as well at this point.

93
00:05:29,740 --> 00:05:34,750
Like to somebody just click and the shadow kind of disappears, kind of like the buttons being pressed

94
00:05:34,750 --> 00:05:35,530
to the bottom.

95
00:05:35,950 --> 00:05:37,990
Or maybe nothing happens.

96
00:05:37,990 --> 00:05:38,410
I don't know.

97
00:05:38,770 --> 00:05:42,880
So just something to think about how to incorporate that early.

98
00:05:44,140 --> 00:05:45,280
I kind of like the shadow.

99
00:05:45,280 --> 00:05:46,150
We'll leave it for now.

100
00:05:47,440 --> 00:05:48,400
We'll place it up there.

101
00:05:48,910 --> 00:05:51,790
Let's also think about some secondary cards that we have here.

102
00:05:52,060 --> 00:05:54,970
So right now we have a bunch of different elements.

103
00:05:54,970 --> 00:05:57,310
We're starting to think about our typography structure.

104
00:05:57,310 --> 00:06:03,430
We're starting to think about just cards, buttons, links, all these different things, avatars.

105
00:06:03,430 --> 00:06:07,150
We have navigation and icons and just the general style of icons.

106
00:06:07,420 --> 00:06:09,790
And we've done this all just from the home page.

107
00:06:10,510 --> 00:06:13,340
Not every home page is going to be like this, but I like to pick a page.

108
00:06:13,340 --> 00:06:17,950
It has a bunch of or just a variety of elements that I can start to build.

109
00:06:18,160 --> 00:06:22,690
And actually it'll help me dictate what that visual style will be going forward.

110
00:06:23,080 --> 00:06:26,140
So the last thing I really want to do here is I want to create some cards.

111
00:06:26,380 --> 00:06:27,850
Maybe they're category cards.

112
00:06:27,970 --> 00:06:32,740
I was thinking, actually, what am I going to do is I just want to name that button.

113
00:06:34,120 --> 00:06:37,390
OK, so I'm going to do is I'm actually going to create another frame.

114
00:06:37,600 --> 00:06:39,040
Surprise, surprise.

115
00:06:40,210 --> 00:06:41,410
She's going to call it card.

116
00:06:41,410 --> 00:06:48,250
And what we can do here is we can start thinking about what this card could be.

117
00:06:51,280 --> 00:06:53,260
So we have a kid like Ray.

118
00:06:53,290 --> 00:06:55,640
I mean, we can use like secondary colors here.

119
00:06:57,100 --> 00:07:01,840
I'm not entirely sure just yet, but what I'm gonna do is I'm just going to.

120
00:07:03,300 --> 00:07:11,490
Stealing from there and I'm going to, you know, start thinking about what these cards can be, shopping

121
00:07:11,490 --> 00:07:17,790
habits and interests, like maybe another way for users to get into, like, that kind of funnel.

122
00:07:19,340 --> 00:07:24,000
OK, maybe that's just not large enough.

123
00:07:24,370 --> 00:07:25,320
Like 20 pixels.

124
00:07:25,320 --> 00:07:25,860
Looks good.

125
00:07:28,410 --> 00:07:35,640
That's fine, what I'm going to do is I need an icon, so I'm going to actually first I'm going to create

126
00:07:35,640 --> 00:07:43,140
a circle within here and that's going to be the background I want to have like a Chevron, a right.

127
00:07:43,140 --> 00:07:49,850
Chevron making it look like you can click on this and it's making that look really apparent.

128
00:07:50,370 --> 00:08:00,240
So let's just set the background to that to white and let's go and find a Chevron to go further icons.

129
00:08:02,930 --> 00:08:04,250
Do we have it under Arrow?

130
00:08:04,310 --> 00:08:06,020
I don't think so.

131
00:08:07,850 --> 00:08:10,010
It's actually under Chevron, sometimes it's under Arrow.

132
00:08:10,700 --> 00:08:11,660
So we're going to click that.

133
00:08:12,470 --> 00:08:13,260
There it is.

134
00:08:13,280 --> 00:08:14,200
Thank you.

135
00:08:14,840 --> 00:08:17,510
And you can take this this frame here.

136
00:08:18,740 --> 00:08:19,460
Perfect.

137
00:08:19,460 --> 00:08:21,710
And I'm going to plop it right there.

138
00:08:22,100 --> 00:08:28,460
And we're actually going to make this another frame and we're just going to call this Chevron, and

139
00:08:28,460 --> 00:08:30,980
that will link to another page.

140
00:08:31,400 --> 00:08:33,290
Let's just change the color of that.

141
00:08:33,500 --> 00:08:37,030
We could do something like a yellow like that looks pretty interesting.

142
00:08:37,030 --> 00:08:41,090
And we can also just kind of keep it like a dark, like a dark block.

143
00:08:41,330 --> 00:08:43,860
And this can also be like just like a dark gray.

144
00:08:43,910 --> 00:08:50,390
I don't necessarily know what's going to work, but I'm just trying a bunch of different options here.

145
00:08:51,150 --> 00:08:53,000
Let's let's see what our grid looks like.

146
00:08:53,000 --> 00:08:58,530
So we want to make this one to make this just a little smaller.

147
00:08:59,480 --> 00:09:01,610
This needs to get onto our grid.

148
00:09:03,900 --> 00:09:14,760
So we got four for this also needs to think about this, so if I actually.

149
00:09:17,230 --> 00:09:22,180
I'm going to shift one to that's eight pixels 16.

150
00:09:24,110 --> 00:09:31,400
And shift control option and using the euro, I'm going back the other way and I'm actually shrinking

151
00:09:31,400 --> 00:09:31,520
it.

152
00:09:31,700 --> 00:09:37,910
So we have 16 pixels and from here a hundred and.

153
00:09:39,110 --> 00:09:43,970
Trying to keep this very similar in height as well, kind of like a square.

154
00:09:45,790 --> 00:09:57,910
So we're just going to eat 16, so we got square here and there you go, like, let's call this title.

155
00:09:57,940 --> 00:09:59,410
Actually, it's already title perfect.

156
00:09:59,500 --> 00:10:03,670
So we have our little card that is really nice.

157
00:10:03,860 --> 00:10:09,350
And if we just copy that, we can start like making other cards based off of that.

158
00:10:10,030 --> 00:10:10,450
So.

159
00:10:12,420 --> 00:10:13,470
Another tip.

160
00:10:15,540 --> 00:10:21,510
Today's trending items perfect, we can also make this a different color, like it could be like that

161
00:10:21,510 --> 00:10:30,030
Barones, I don't know what's going to work just yet, but I'm starting to create some interesting reusable

162
00:10:30,030 --> 00:10:32,670
cards that I'm really liking.

163
00:10:35,420 --> 00:10:36,360
Incoming.

164
00:10:36,380 --> 00:10:44,060
Kind of like that, it can be flash deals and this can be white text.

165
00:10:44,770 --> 00:10:45,200
Oops.

166
00:10:48,050 --> 00:10:50,540
And that will be like a blue maybe.

167
00:10:51,200 --> 00:10:57,110
Oh, no, I'm kind of I'm kind of eating a bunch of colors here, but it's all about just exploring

168
00:10:57,110 --> 00:10:57,980
what may work.

169
00:10:58,280 --> 00:11:04,400
So we got browse our categories, like maybe this just throws them into the category screen instead

170
00:11:04,400 --> 00:11:06,710
of just having a bunch of different categories out there.

171
00:11:07,160 --> 00:11:14,090
But it also gives us a bunch of different options in terms of like like, you know, they can view flash

172
00:11:14,090 --> 00:11:14,720
deals.

173
00:11:15,170 --> 00:11:17,060
It doesn't need to muddy up that home screen.

174
00:11:17,060 --> 00:11:22,490
They can feel like the trending items they can get into like habits and shopping interests.

175
00:11:24,350 --> 00:11:29,110
So, like, there you go, like we're already creating a bunch of different UI elements and, you know,

176
00:11:29,120 --> 00:11:35,180
I'm not sure if I really like going to settle with something like this because I don't know if it suits

177
00:11:35,180 --> 00:11:38,180
the style and just the general tone of the brand.

178
00:11:38,180 --> 00:11:40,180
So I may just do a little bit of a pivot.

179
00:11:40,580 --> 00:11:42,170
I need to think about that a bit more.

180
00:11:42,180 --> 00:11:47,420
And you should definitely you should, too, because this is your design as well, and you're going

181
00:11:47,420 --> 00:11:49,720
to have to figure out what you think is best for you.

182
00:11:50,060 --> 00:11:53,680
So just from the homepage, we have a lot of different typographic elements.

183
00:11:53,690 --> 00:11:54,920
We have a large card.

184
00:11:54,920 --> 00:11:56,420
We have some smaller cards.

185
00:11:56,780 --> 00:12:01,700
I think we need to find something in the middle, like maybe like a middle card that we may use in terms

186
00:12:01,700 --> 00:12:02,300
of size.

187
00:12:02,480 --> 00:12:06,680
We have just typographic hierarchy in terms of like the cards themselves.

188
00:12:06,860 --> 00:12:09,020
And this is just only using one typeface.

189
00:12:09,020 --> 00:12:11,570
And you can see the variation that we've created already.

190
00:12:11,810 --> 00:12:13,480
It hasn't taken us a bunch of time.

191
00:12:13,700 --> 00:12:15,260
We have an avatar over here.

192
00:12:15,620 --> 00:12:19,730
We have buttons, links, and we have navigation as well.

193
00:12:20,630 --> 00:12:25,250
You know, pick a screen that you feel will give you a lot of different elements to work with.

194
00:12:25,520 --> 00:12:26,550
That could be different for you.

195
00:12:26,550 --> 00:12:30,980
It could be different from the home screen in the way you set it up and use that to kind of create those

196
00:12:30,980 --> 00:12:32,780
reusable elements.

197
00:12:33,020 --> 00:12:35,210
And we can even create them into components.

198
00:12:35,210 --> 00:12:40,610
If you really settled on something and use that throughout your product over here, because you can

199
00:12:40,610 --> 00:12:45,410
actually use like those elements to create other elements with some variation.

200
00:12:45,410 --> 00:12:50,900
Like I have buttons here that I've used, have different types of elements in terms of typography that

201
00:12:50,900 --> 00:12:56,960
can be reused, like in terms of the product name and like just the size that I've used here can just

202
00:12:56,960 --> 00:12:57,860
be reused here.

203
00:12:58,160 --> 00:13:03,050
So it's all about like figuring out what style you're kind of you're liking, what's going to work for

204
00:13:03,050 --> 00:13:04,580
the user, what's going to resonate from them.

205
00:13:04,790 --> 00:13:09,020
But also, once you've settled, you need to actually think about reusability.

206
00:13:09,230 --> 00:13:12,860
You don't want to create a hundred different types of cards.

207
00:13:13,130 --> 00:13:14,000
That's fine.

208
00:13:14,030 --> 00:13:19,880
Like I mean, if you have different slight variations, like a button in there or maybe like a link

209
00:13:19,880 --> 00:13:26,190
or like some sort of, I don't know, some sort of price or PILT like we have in ours, like just for

210
00:13:26,190 --> 00:13:28,940
an example, we have like just price changes.

211
00:13:29,240 --> 00:13:30,590
That's going to happen regardless.

212
00:13:30,950 --> 00:13:37,940
But think about reusability just so you can make your life and developers lives much more easier.

213
00:13:37,940 --> 00:13:42,950
And plus, when a user is looking through an application and they see something or a style that is just

214
00:13:42,950 --> 00:13:47,840
incredibly consistent, it makes that user experience so much more better if they're going to a new

215
00:13:47,840 --> 00:13:52,230
page and every time they get to a new page, everything is entirely different, whether that be just

216
00:13:52,250 --> 00:13:56,120
hierarchy in typography, even just use of color.

217
00:13:56,480 --> 00:14:02,270
Something as simple as that could really just make a horrible experience for the user.

218
00:14:02,300 --> 00:14:04,210
And it's just incredibly jarring.

219
00:14:04,220 --> 00:14:06,050
So think about that as well.

220
00:14:06,470 --> 00:14:11,120
Yeah, that's it for visual design and just visual style and exploration.

221
00:14:11,510 --> 00:14:16,880
So go out there and have some fun, experiment with typography, experiment with color, experiment

222
00:14:16,880 --> 00:14:19,250
with all the different UI elements that you want to build.

223
00:14:19,520 --> 00:14:22,070
And I'm sure there are many more pages to build from here.

224
00:14:22,070 --> 00:14:28,280
Just take a look at our wireframe so you can have just so much fun doing that and figuring out which

225
00:14:28,280 --> 00:14:33,920
ways you can kind of build just reusability and consistency within our product.

226
00:14:34,250 --> 00:14:34,970
And that's it.