1
00:00:00,210 --> 00:00:04,740
Everyone, and welcome back, so I know I kind of went on a little bit of a rant earlier about design

2
00:00:04,740 --> 00:00:11,130
fidelity, but I just really wanted to stress that, you know, don't jump into visual design exploration

3
00:00:11,130 --> 00:00:12,150
too early.

4
00:00:12,450 --> 00:00:14,240
This is an iterative process.

5
00:00:14,250 --> 00:00:19,860
I mean, we are not going to create something perfect right off the bat and we're going to gradually

6
00:00:19,860 --> 00:00:20,760
build our way up.

7
00:00:21,480 --> 00:00:24,000
You shouldn't necessarily just jump right into it.

8
00:00:24,030 --> 00:00:30,960
So what we did in the last video, we talked about navigation and we were exploring that a bit.

9
00:00:31,500 --> 00:00:36,690
And you could see we started to create some hierarchy within here just with colors and kind of already

10
00:00:36,690 --> 00:00:38,190
like the way we're starting to use color.

11
00:00:38,190 --> 00:00:42,950
You know, this yellow was more of an accent and, you know, keeping things a little monochromatic.

12
00:00:43,650 --> 00:00:45,180
Let's see how that may change.

13
00:00:45,720 --> 00:00:51,000
I also need to start thinking about things like just typographic hierarchy.

14
00:00:51,000 --> 00:00:52,550
So let's jump right in and do that.

15
00:00:52,950 --> 00:00:54,560
So I have a grid on here.

16
00:00:55,290 --> 00:00:57,540
I've just kind of created my own.

17
00:00:58,420 --> 00:01:04,740
Let's go back and I'll just show you that so that I have a mobile style here of a grid, which is really

18
00:01:04,740 --> 00:01:05,310
helpful.

19
00:01:05,670 --> 00:01:09,390
This is just a standard Eikon grid and I'll show you what it looks like.

20
00:01:10,680 --> 00:01:14,790
So it's just really standard 16 pixel gutta and a margin of twenty four pixels.

21
00:01:15,510 --> 00:01:16,880
Just something to think about.

22
00:01:16,890 --> 00:01:17,710
This is what I'm using.

23
00:01:17,790 --> 00:01:21,070
You don't have to use that, but let's jump right in.

24
00:01:21,720 --> 00:01:28,550
So I'm going to start typing some stuff that we can actually use.

25
00:01:28,860 --> 00:01:34,590
So, you know, maybe we don't use this halo like line in terms of like the person's name.

26
00:01:34,590 --> 00:01:35,910
Maybe it's something else.

27
00:01:36,150 --> 00:01:38,580
Like I said, it's all about visual exploration.

28
00:01:38,580 --> 00:01:41,970
At this point, we are building that fidelity.

29
00:01:42,660 --> 00:01:47,980
So I have some headings here that that are styles that are really, really helpful.

30
00:01:48,000 --> 00:01:51,120
I want to stress the idea of reusability.

31
00:01:52,350 --> 00:02:02,430
Just because, you know, reinventing the wheel over and over again is so pedantic, we want to reduce

32
00:02:02,430 --> 00:02:04,740
the amount of time we have to do that.

33
00:02:06,720 --> 00:02:13,530
So, you know, create styles, even if they are finalized, these typographic styles aren't finalized

34
00:02:13,530 --> 00:02:14,260
by any means.

35
00:02:14,280 --> 00:02:20,130
I think I still need to tweak them a bit and you will need to as well, even with colors.

36
00:02:20,140 --> 00:02:25,440
I'm not settled on this palette and I'm pretty sure by the time we are at the end of this course, it's

37
00:02:25,440 --> 00:02:30,000
going to probably look entirely different or I mean, there will be some slight variations and that's

38
00:02:30,000 --> 00:02:30,870
just the way design is.

39
00:02:30,870 --> 00:02:37,640
So don't get too held up on those little details because things will change.

40
00:02:37,650 --> 00:02:39,840
It's just the nature of our craft.

41
00:02:39,840 --> 00:02:45,360
I mean, we learn, we build, we keep on learning and we keep on rebuilding.

42
00:02:45,360 --> 00:02:48,660
So don't get married to anything too early.

43
00:02:49,080 --> 00:02:49,820
What do I have here?

44
00:02:49,830 --> 00:02:51,510
So I have some nice colors.

45
00:02:51,520 --> 00:02:56,490
We can start actually applying colors to our typographic elements.

46
00:02:56,860 --> 00:02:58,590
I'm going to just switch off this.

47
00:02:59,940 --> 00:03:03,570
Grid, which using controlled G to do that.

48
00:03:04,080 --> 00:03:10,310
OK, so next thing I want to just think about is this let's just drag this in here, OK?

49
00:03:11,340 --> 00:03:13,530
So I want to create something.

50
00:03:13,650 --> 00:03:21,330
I want to work on a card, and it's going to give us an idea of just general, like typographic hierarchy

51
00:03:21,330 --> 00:03:27,250
over here, how to display imagery, also maybe some use of iconography.

52
00:03:27,960 --> 00:03:34,410
First thing I want to do is let me just set some sort of baseline for how large I want this to be.

53
00:03:36,170 --> 00:03:38,240
So what I'm going to do is control G.

54
00:03:39,640 --> 00:03:42,250
And I want these cards to kind of just.

55
00:03:43,810 --> 00:03:49,420
I want the next car to kind of fall off the edge, kind of like our little wireframe here, but I'm

56
00:03:49,420 --> 00:03:55,330
making this car much more longer because I want the first image they see to be something that is really,

57
00:03:55,330 --> 00:03:57,990
really relevant to what they want.

58
00:03:58,360 --> 00:04:04,630
So it could be like if they're into gaming, it could be like a new controller or something like that.

59
00:04:05,200 --> 00:04:07,480
Let's actually just jump in and grab an image.

60
00:04:08,050 --> 00:04:10,690
So I'm just going to grab an image just to get started.

61
00:04:11,320 --> 00:04:13,810
So let's just type in controller.

62
00:04:15,310 --> 00:04:16,350
Perfect.

63
00:04:16,570 --> 00:04:18,400
So we have a bunch of different things here.

64
00:04:18,410 --> 00:04:21,010
Let's look for something that looks more like a product shot.

65
00:04:22,170 --> 00:04:23,310
That's a little too dark.

66
00:04:26,140 --> 00:04:27,580
What do we have here?

67
00:04:31,530 --> 00:04:34,050
So I'm just looking for just product shots.

68
00:04:35,990 --> 00:04:39,840
I think I selected two images accidentally, but we'll see what they are.

69
00:04:40,250 --> 00:04:42,200
So, OK, let's delete that one.

70
00:04:42,850 --> 00:04:44,570
Let's resize this one.

71
00:04:45,750 --> 00:04:47,100
Bring it closer.

72
00:04:47,510 --> 00:04:48,190
So there we go.

73
00:04:48,200 --> 00:04:48,980
We have one.

74
00:04:48,980 --> 00:04:53,080
And we're going to actually remove the background on one of these.

75
00:04:53,390 --> 00:04:54,440
So remember what I said about that?

76
00:04:54,470 --> 00:05:00,110
Just like visual exploration a while back, when you're using images, you don't need to just necessarily,

77
00:05:00,110 --> 00:05:01,430
like, plop them in there.

78
00:05:02,390 --> 00:05:06,590
You know, you can you can do different things like removing backgrounds, adding different types of

79
00:05:06,590 --> 00:05:07,970
light gradients to the background.

80
00:05:07,970 --> 00:05:10,010
So we have something interesting to play with.

81
00:05:10,400 --> 00:05:11,750
I'm just going to keep this here for now.

82
00:05:11,780 --> 00:05:12,870
I mean, I'm not going to touch it.

83
00:05:12,890 --> 00:05:14,990
I'm actually just going to jump right into typography.

84
00:05:15,380 --> 00:05:16,880
So I'm going to take this.

85
00:05:18,020 --> 00:05:23,740
Resize, I don't want it to pass the width of this card, and I'm going to do is I'm just going to put

86
00:05:23,740 --> 00:05:24,460
a price tag.

87
00:05:27,780 --> 00:05:33,840
So sixty five, ninety nine is the price tag, and actually we can make sure that that's just the width

88
00:05:34,440 --> 00:05:37,500
and we can start thinking about just higher key here.

89
00:05:37,510 --> 00:05:43,770
So I have 16 pixels that's just like that, 16 pixels and fold.

90
00:05:44,400 --> 00:05:47,550
Or we can even jump all the way up to 20 pixels and bold.

91
00:05:48,690 --> 00:05:54,390
So if we have just like the item amount, and I think that's pretty crucial, I'm not sure exactly.

92
00:05:54,720 --> 00:05:59,520
It's like right here I have the product name and the amount below, but maybe we can just explore with

93
00:05:59,520 --> 00:06:00,430
having that up there.

94
00:06:00,840 --> 00:06:02,460
What about if there's like a sale?

95
00:06:02,970 --> 00:06:05,970
So I think I actually have a style for that.

96
00:06:06,660 --> 00:06:07,290
Let's see.

97
00:06:07,410 --> 00:06:08,010
Yeah, I do.

98
00:06:08,100 --> 00:06:08,660
Perfect.

99
00:06:09,030 --> 00:06:10,350
So I have a style for that.

100
00:06:12,360 --> 00:06:17,740
And if there's a sale, what we're going to do is we are going to have something right beside it.

101
00:06:17,760 --> 00:06:25,730
Maybe it's like seventy nine, ninety nine and we are just going to make that a little less obvious.

102
00:06:25,740 --> 00:06:29,290
So we're building hierarchy not only through color.

103
00:06:29,340 --> 00:06:33,050
We are also doing it just through size and typography as well.

104
00:06:33,870 --> 00:06:35,820
So that's much more prominent.

105
00:06:37,530 --> 00:06:38,660
And there you go.

106
00:06:40,170 --> 00:06:41,350
These are spaced.

107
00:06:41,370 --> 00:06:44,310
We can space them about eight pixels boops.

108
00:06:46,490 --> 00:06:47,000
Perfect.

109
00:06:47,480 --> 00:06:52,160
OK, so that looks pretty good when I'm going to do is I'm just going to duplicate that and let's think

110
00:06:52,160 --> 00:06:53,080
about the product name.

111
00:06:53,090 --> 00:06:57,800
So this is an Xbox One controller.

112
00:07:02,090 --> 00:07:06,510
And I want to create some hierarchy between the image.

113
00:07:06,530 --> 00:07:11,440
I mean, sorry, the the product name and the actual product price.

114
00:07:11,450 --> 00:07:15,700
So remember, we talked about typography and creating that hierarchy.

115
00:07:15,710 --> 00:07:19,970
We can just bring it down a bit if we wanted to.

116
00:07:19,980 --> 00:07:22,610
We can also just just bring it down.

117
00:07:22,830 --> 00:07:24,220
Let's see what options we have.

118
00:07:24,230 --> 00:07:25,390
Like, we can do something like that.

119
00:07:25,400 --> 00:07:31,180
And, you know, I mean, larger typographic element is the price.

120
00:07:31,520 --> 00:07:33,380
So that shouldn't detract from that.

121
00:07:34,130 --> 00:07:35,510
This is just our assumption.

122
00:07:36,640 --> 00:07:39,190
It could be wrong, and that's that's just totally fine.

123
00:07:39,610 --> 00:07:41,290
Like I said, it's all about exploration.

124
00:07:41,860 --> 00:07:47,850
So we have something here which we have, I think what do I have below?

125
00:07:48,190 --> 00:07:50,290
I have some lorem ipsum.

126
00:07:50,300 --> 00:07:52,300
Let's actually just copy paste that.

127
00:07:53,860 --> 00:07:57,460
So that is there.

128
00:07:57,460 --> 00:08:03,690
And we are just going to go like body small over here and there we go.

129
00:08:03,700 --> 00:08:09,060
I mean, I think we can probably afford to have two lines.

130
00:08:09,880 --> 00:08:12,940
So what I like to do is I'll just go like this.

131
00:08:16,070 --> 00:08:23,780
OK, just so we can start thinking about the content there, that's a little to see, like right now

132
00:08:23,780 --> 00:08:29,480
I'm realizing that maybe I don't have too much variation between these two colors, so I may need to

133
00:08:29,480 --> 00:08:30,530
think about that.

134
00:08:31,100 --> 00:08:37,790
And this may be really too thin, but I'm going to do is I'm actually going to create I'm going to create

135
00:08:37,790 --> 00:08:38,390
a frame.

136
00:08:38,390 --> 00:08:44,750
I'm starting to think right now even about just general structure so I can just create a frame called

137
00:08:44,750 --> 00:08:49,160
this price and just start thinking about, like, auto layout as well.

138
00:08:49,750 --> 00:08:52,310
So I have a horizontal Allio.

139
00:08:52,310 --> 00:08:57,500
And so the great thing about this is, you know, if I start to adjust this, things are going to just

140
00:08:57,500 --> 00:08:58,340
adjust with it.

141
00:08:58,370 --> 00:09:00,740
As you can see, the price moving back and forth.

142
00:09:01,200 --> 00:09:04,430
So that's just going to help us speed up our workflow.

143
00:09:04,880 --> 00:09:09,640
I think we're missing something else here, like maybe we can have like a 20 percent off tech.

144
00:09:10,070 --> 00:09:12,140
So actually, I don't think we need this anymore right now.

145
00:09:12,680 --> 00:09:17,030
So let's actually create another frame and I'll show you what we can do here.

146
00:09:17,570 --> 00:09:18,680
So we're going to create a frame.

147
00:09:18,690 --> 00:09:26,010
We're going to put text in this frame and we're going to just say something like 20 percent off.

148
00:09:26,840 --> 00:09:27,260
Oops.

149
00:09:27,980 --> 00:09:29,150
Let's go back.

150
00:09:29,150 --> 00:09:29,490
Whoops.

151
00:09:30,320 --> 00:09:30,770
There we go.

152
00:09:31,310 --> 00:09:32,660
So we are 20 percent off.

153
00:09:34,640 --> 00:09:39,200
Perfect, I think I even have one for a pill or yeah, there we go, perfect.

154
00:09:40,590 --> 00:09:49,350
This is great because, you know, using maybe 16 pixels is too big, but using styles can really,

155
00:09:49,350 --> 00:09:52,930
really help your workflow a lot.

156
00:09:53,100 --> 00:09:58,380
So I'd like to start thinking about all these different types of things earlier on.

157
00:09:59,490 --> 00:10:06,510
And it helps me just influence what I plan to do with the just general things like typographic elements

158
00:10:06,510 --> 00:10:11,670
in color, if I get those kind of nailed down a little bit earlier before I jump into this, then it

159
00:10:11,670 --> 00:10:18,900
makes it easier to kind of iterate based off of just plain styles, quickly editing those styles and

160
00:10:18,900 --> 00:10:20,490
just generally just keeping you going.

161
00:10:21,630 --> 00:10:23,190
So we got one hundred pixels.

162
00:10:23,190 --> 00:10:24,440
We're going to be a little pale here.

163
00:10:25,770 --> 00:10:35,910
When I'm going to do is 16 pixels on the side of the top, I'm going to just two zero zero.

164
00:10:36,120 --> 00:10:39,210
OK, so we're going to need like an eight pixel top maybe.

165
00:10:41,330 --> 00:10:49,700
OK, so the Phil, let's think about the Phil, we can do like a nice background like that and that

166
00:10:49,700 --> 00:10:50,900
can be the darker.

167
00:10:54,900 --> 00:11:02,700
So there we go, we have something nice coming along over here, and I'm just actually going to throw

168
00:11:02,700 --> 00:11:04,350
this here.

169
00:11:04,380 --> 00:11:10,230
Let's just make sure that like that, that's a little too small.

170
00:11:10,300 --> 00:11:15,600
OK, so what I'm going to do is I'm going to come and see and I'm going to select inside.

171
00:11:15,960 --> 00:11:16,740
And there you go.

172
00:11:17,100 --> 00:11:17,880
There's our little pill.

173
00:11:17,880 --> 00:11:20,780
Just letting us know, hey, you got 20 percent off.

174
00:11:21,360 --> 00:11:22,890
This is an amazing deal.

175
00:11:22,890 --> 00:11:25,830
And that's OK.

176
00:11:25,830 --> 00:11:26,760
We can keep that Senate.

177
00:11:27,060 --> 00:11:30,540
And I'm actually going to create the exact same thing over here.

178
00:11:30,540 --> 00:11:37,230
I'm going to select everything and make a frame and call it card details.

179
00:11:37,230 --> 00:11:41,370
So I'm really liking where this is going in terms of my exploration.

180
00:11:41,370 --> 00:11:42,390
I'm going to.

181
00:11:45,200 --> 00:11:51,160
I'm going to just create an auto layout again, so you'll see that just moved over and that's fine.

182
00:11:51,170 --> 00:11:52,910
I'll show you how we're going to fix that.

183
00:11:56,470 --> 00:11:59,320
We're going to adjust this just to get it right.

184
00:11:59,350 --> 00:12:03,130
So this is going to if we just move it, we can move it wherever we want.

185
00:12:03,280 --> 00:12:06,690
I'm moving it all the way to the left and you'll see it change at the top as well.

186
00:12:07,420 --> 00:12:09,370
So there's our kind of layout.

187
00:12:09,370 --> 00:12:15,450
And like we do have a lot of contrast now with our typography, which is really great.

188
00:12:16,180 --> 00:12:21,790
Maybe this price is a little too large and we'll fix that.

189
00:12:22,840 --> 00:12:26,560
Maybe we just maybe that's too small.

190
00:12:27,160 --> 00:12:27,880
We'll leave it for now.

191
00:12:27,970 --> 00:12:29,200
OK, so let's think about the image.

192
00:12:29,680 --> 00:12:31,000
I really like where we're going here.

193
00:12:31,000 --> 00:12:34,540
You can see like this whole thing is starting to come together in comparison.

194
00:12:34,960 --> 00:12:40,170
And I wouldn't have really known that if I hadn't gone through different types of explorations earlier.

195
00:12:40,420 --> 00:12:44,280
So I want to do something interesting with the image like here.

196
00:12:44,290 --> 00:12:47,520
I'll show you what it will look like if I just kind of plop it in here.

197
00:12:49,090 --> 00:12:51,160
So we're going to plop this in here.

198
00:12:54,660 --> 00:12:58,380
And we're just going to make it the size of that rectangle.

199
00:13:00,240 --> 00:13:03,840
I mean, that looks pretty good with let's make a copy of that.

200
00:13:06,870 --> 00:13:10,590
What about if we do something a little bit more interesting?

201
00:13:12,070 --> 00:13:14,710
How about we do something like this?

202
00:13:20,070 --> 00:13:25,740
OK, so we have something and now we can use the background any which way we want, so I'm going to

203
00:13:25,740 --> 00:13:30,270
rename this image and I'm going to lock this layer for now.

204
00:13:30,460 --> 00:13:34,140
So just you can just shift command L to lock it.

205
00:13:35,300 --> 00:13:40,610
So I have the image in the background and what we can do is we can do a bunch of different things,

206
00:13:40,610 --> 00:13:42,770
like we can set that like that.

207
00:13:45,050 --> 00:13:50,690
We can set the radius, so, I mean, we have options like if we want to use like a secondary color

208
00:13:50,690 --> 00:13:52,460
or something like that, we can.

209
00:13:53,960 --> 00:13:57,310
So, I mean, I'm kind of liking the way this kind of looks.

210
00:13:57,320 --> 00:14:03,250
It's very like unorthodox in the sense that we used to see product images.

211
00:14:03,260 --> 00:14:04,940
So this may not work.

212
00:14:04,940 --> 00:14:05,900
And that's totally fine.

213
00:14:05,900 --> 00:14:11,540
If I'm thinking about development and scalability, this is probably not the way to go just because

214
00:14:11,540 --> 00:14:13,900
you'd have to do it for every single product image.

215
00:14:14,210 --> 00:14:15,440
So this makes sense.

216
00:14:15,710 --> 00:14:19,610
You know, just in terms of like we want to release something, we don't want to go through all of our

217
00:14:19,610 --> 00:14:21,020
product images and do that.

218
00:14:21,230 --> 00:14:24,890
Maybe this is like a video or version two to a version one.

219
00:14:25,220 --> 00:14:31,100
I'm already thinking about maybe scalability issues here, but I really like the way these cards are

220
00:14:31,100 --> 00:14:31,570
turning out.

221
00:14:31,580 --> 00:14:32,870
I'm just going to delete this one for now.

222
00:14:34,490 --> 00:14:35,510
Actually, I don't want to delete it.

223
00:14:35,510 --> 00:14:37,160
I just want that image there.

224
00:14:37,190 --> 00:14:38,870
But I'm going to delete this card.

225
00:14:39,230 --> 00:14:41,900
I'm liking the way this image is turning out.

226
00:14:41,900 --> 00:14:53,390
I'm going to actually make this I'm going to rename this to image background and I'm going to unlock

227
00:14:53,390 --> 00:15:01,490
this image and I'm going to group them in a frame and I'm going to call this product image.

228
00:15:02,240 --> 00:15:06,650
So as you can tell, like, I'm already starting to create different types of cards here.

229
00:15:06,650 --> 00:15:09,680
I have one card built out that I really like.

230
00:15:09,680 --> 00:15:11,510
I'm not sure if I'm going to go in this direction.

231
00:15:11,510 --> 00:15:17,240
Maybe for the other ones I'm going to start just inputting like like regular images.

232
00:15:17,570 --> 00:15:20,930
But this is kind of what I'm thinking right now.

233
00:15:20,960 --> 00:15:27,200
I'm going to actually create another frame and I'm going to group this all together and call this large

234
00:15:27,200 --> 00:15:27,760
card.

235
00:15:28,610 --> 00:15:32,360
So we're starting to already think about things like.

236
00:15:35,180 --> 00:15:43,490
Layout and just hierarchy and color and how we plan to use that, so as you can tell, that's how it

237
00:15:43,490 --> 00:15:46,550
will look on the screen, you'll be able to swipe through that.

238
00:15:48,130 --> 00:15:53,500
That's it for the larger cards in the next video, I'm going to start working on maybe more interesting

239
00:15:53,500 --> 00:15:57,940
piece that can fit here, maybe not deals, because that could be redundant.

240
00:15:58,270 --> 00:16:04,630
Maybe we can work on like category cards or something like in relation to the user's interest.

241
00:16:04,650 --> 00:16:06,280
So that's it for this.

242
00:16:06,280 --> 00:16:09,430
And let's jump into our next video.