Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,640 --> 00:00:03,570
So many people ask me
2
00:00:03,570 --> 00:00:07,780
what's my secret to coming up with great designs?
3
00:00:07,780 --> 00:00:10,530
And my answer is always the same.
4
00:00:10,530 --> 00:00:12,840
It is not a secret at all.
5
00:00:12,840 --> 00:00:17,610
All I do is to copy what I like from other great designs
6
00:00:17,610 --> 00:00:21,280
and this is what's called stealing like an artist.
7
00:00:21,280 --> 00:00:25,363
And so let's now take five quick minutes to see how I do it.
8
00:00:28,000 --> 00:00:29,390
So, of course,
9
00:00:29,390 --> 00:00:32,160
when we want to come up with a certain design,
10
00:00:32,160 --> 00:00:34,430
we still need to care about all the things
11
00:00:34,430 --> 00:00:37,110
that we talked about up until this point,
12
00:00:37,110 --> 00:00:40,640
so things like choosing a website personality
13
00:00:40,640 --> 00:00:44,030
and thinking about all the different design ingredients
14
00:00:44,030 --> 00:00:46,650
by using the guidelines and the rules
15
00:00:46,650 --> 00:00:49,100
that we learned for each of them.
16
00:00:49,100 --> 00:00:51,900
And all of that is great and really,
17
00:00:51,900 --> 00:00:54,200
really important and essential,
18
00:00:54,200 --> 00:00:57,090
but there is still something missing.
19
00:00:57,090 --> 00:00:58,760
And that missing piece,
20
00:00:58,760 --> 00:01:02,010
as I mentioned right in the beginning of this lecture,
21
00:01:02,010 --> 00:01:07,010
is basically to get inspired and to steal like an artist.
22
00:01:07,600 --> 00:01:11,560
Now, what do I mean by stealing like an artist?
23
00:01:11,560 --> 00:01:15,080
Well, basically, stealing like an artist means
24
00:01:15,080 --> 00:01:18,920
that we do not completely copy a certain design.
25
00:01:18,920 --> 00:01:23,920
So what we do instead is that we take the good parts of one,
26
00:01:24,130 --> 00:01:27,420
or usually many good designs that we like
27
00:01:27,420 --> 00:01:31,880
and then simply adapt them to our needs while using, again,
28
00:01:31,880 --> 00:01:33,960
all of the different rules and guidelines
29
00:01:33,960 --> 00:01:36,270
that we already learned before
30
00:01:36,270 --> 00:01:38,410
and that we will actually keep learning
31
00:01:38,410 --> 00:01:40,630
a little bit in the next section.
32
00:01:40,630 --> 00:01:43,360
So getting a lot of inspiration
33
00:01:43,360 --> 00:01:46,410
from other well-designed sites is really,
34
00:01:46,410 --> 00:01:50,040
really important if you want to create your own design.
35
00:01:50,040 --> 00:01:52,723
And so let me show you now how I do that.
36
00:01:53,850 --> 00:01:57,160
So I like to use a couple of aggregators sites,
37
00:01:57,160 --> 00:02:01,490
which feature a lot of great designs all the time.
38
00:02:01,490 --> 00:02:03,330
And my most important sources
39
00:02:03,330 --> 00:02:07,120
of inspiration are land-book.com,
40
00:02:07,120 --> 00:02:11,163
One Page Love, and then here in this Inspiration tab,
41
00:02:12,060 --> 00:02:16,880
then awwwards.com, which is a very well-known site,
42
00:02:16,880 --> 00:02:21,150
which basically gives other sites awards for their design
43
00:02:21,150 --> 00:02:23,483
and creativity and innovation.
44
00:02:24,490 --> 00:02:29,490
So here we can go to the collections, and then from here,
45
00:02:29,670 --> 00:02:34,330
we can choose Websites, but of course, as always,
46
00:02:34,330 --> 00:02:37,580
all of these four websites that I use
47
00:02:37,580 --> 00:02:42,280
will be on my resources page, along with some other ones.
48
00:02:42,280 --> 00:02:45,260
And then I also use screenlane.com
49
00:02:45,260 --> 00:02:48,340
for individual components.
50
00:02:48,340 --> 00:02:52,250
So let's quickly see a little bit how they work
51
00:02:52,250 --> 00:02:55,450
and let's pretend that we want to design
52
00:02:55,450 --> 00:02:58,040
some kind of website for a startup
53
00:02:58,040 --> 00:03:00,170
for which we have been hired.
54
00:03:00,170 --> 00:03:04,040
So we already know that we want to use the startup
55
00:03:04,040 --> 00:03:06,150
and upbeat personality,
56
00:03:06,150 --> 00:03:09,890
and we also know already how we should actually apply each
57
00:03:09,890 --> 00:03:13,900
of the design ingredients according to that personality.
58
00:03:13,900 --> 00:03:17,170
But now, of course, we need to get some inspiration.
59
00:03:17,170 --> 00:03:18,200
And so again,
60
00:03:18,200 --> 00:03:22,090
that's where these inspiration sites come into play.
61
00:03:22,090 --> 00:03:25,270
So since we're looking for startup pages,
62
00:03:25,270 --> 00:03:30,250
let's kind of look for those here in these websites.
63
00:03:30,250 --> 00:03:32,710
So this one here looks like a startup page,
64
00:03:32,710 --> 00:03:36,750
so we can right-click here, open in a new tab,
65
00:03:36,750 --> 00:03:39,270
and then we can keep going.
66
00:03:39,270 --> 00:03:42,130
So this is basically an endless feed
67
00:03:42,130 --> 00:03:44,970
of very well-designed pages
68
00:03:44,970 --> 00:03:47,310
that is being updated all the time.
69
00:03:47,310 --> 00:03:50,400
So this one, for example, was added four days ago.
70
00:03:50,400 --> 00:03:52,870
And, yeah, all the time,
71
00:03:52,870 --> 00:03:56,980
they keep adding new and new and new designs all the time.
72
00:03:56,980 --> 00:03:59,660
Of course your site will look different here
73
00:03:59,660 --> 00:04:01,670
by the time you're watching it video,
74
00:04:01,670 --> 00:04:05,460
maybe the entire side looks different as well,
75
00:04:05,460 --> 00:04:07,600
or it might not even exist anymore.
76
00:04:07,600 --> 00:04:09,980
But the main point is of course
77
00:04:09,980 --> 00:04:12,850
that we need to get some inspiration from them.
78
00:04:12,850 --> 00:04:14,200
And if it's not Land-book,
79
00:04:14,200 --> 00:04:17,350
then it might be One Page Love
80
00:04:17,350 --> 00:04:21,110
or some other one that I will have on my resources page.
81
00:04:21,110 --> 00:04:26,110
But anyway, this one here looks like a calm personality.
82
00:04:26,660 --> 00:04:29,400
This one here maybe as well, together,
83
00:04:29,400 --> 00:04:31,563
maybe with some minimalism in there.
84
00:04:32,500 --> 00:04:33,750
I'm not sure.
85
00:04:33,750 --> 00:04:36,583
So of course, it needs a bit more time to analyze.
86
00:04:38,230 --> 00:04:42,370
But, yeah, what matters is that you can keep going here
87
00:04:42,370 --> 00:04:44,920
and get all the inspiration that you want.
88
00:04:44,920 --> 00:04:47,720
This one clearly looks like a startup page
89
00:04:47,720 --> 00:04:49,053
so let's open this one.
90
00:04:49,910 --> 00:04:52,730
And, yeah, I think that's enough.
91
00:04:52,730 --> 00:04:54,810
Let's go to another one here.
92
00:04:54,810 --> 00:04:56,150
But of course, typically,
93
00:04:56,150 --> 00:05:00,200
I would spend a lot of time here on each of these pages
94
00:05:00,200 --> 00:05:04,960
and open maybe 20, 30, 50, if necessary,
95
00:05:04,960 --> 00:05:07,033
other websites to get inspiration.
96
00:05:08,150 --> 00:05:11,950
So this one here might be another startup.
97
00:05:11,950 --> 00:05:16,053
So now here we have the link to the page down here.
98
00:05:18,540 --> 00:05:21,423
This one here looks like a startup as well.
99
00:05:23,360 --> 00:05:25,823
Okay, let's just move it to the side.
100
00:05:26,820 --> 00:05:28,460
Then here, actually,
101
00:05:28,460 --> 00:05:31,470
we have a lot of different types of designs.
102
00:05:31,470 --> 00:05:33,260
The ones we find on Awwwards
103
00:05:33,260 --> 00:05:36,810
are a lot more creative and experimental,
104
00:05:36,810 --> 00:05:39,380
so it's a bit harder to find what we're looking for,
105
00:05:39,380 --> 00:05:40,770
but when we find it,
106
00:05:40,770 --> 00:05:42,580
then the quality of design
107
00:05:42,580 --> 00:05:45,680
is many times superior right here.
108
00:05:45,680 --> 00:05:50,310
And actually, we can also filter these, I think.
109
00:05:50,310 --> 00:05:52,000
Here, popular,
110
00:05:52,000 --> 00:05:55,593
and here is even a tag just for startups alone.
111
00:05:56,610 --> 00:05:57,973
So here is another one.
112
00:06:00,480 --> 00:06:01,460
And, yeah, so the point here
113
00:06:01,460 --> 00:06:03,763
is just so you see how this works.
114
00:06:04,820 --> 00:06:07,433
So let's take a look at a couple of sites.
115
00:06:09,290 --> 00:06:12,113
All right, so I like this header component here.
116
00:06:14,950 --> 00:06:16,540
This one here also looks interesting.
117
00:06:16,540 --> 00:06:19,530
I never saw something like this, actually.
118
00:06:19,530 --> 00:06:20,763
That's quite creative.
119
00:06:23,260 --> 00:06:24,680
All right, but in general,
120
00:06:24,680 --> 00:06:28,433
there's not a lot of really creative stuff here, okay?
121
00:06:30,120 --> 00:06:33,010
But again, this is just to get some general inspiration
122
00:06:33,010 --> 00:06:35,410
and like a general mindset
123
00:06:35,410 --> 00:06:38,450
of what is being used right now in design.
124
00:06:38,450 --> 00:06:40,900
So maybe you might not even take anything specific
125
00:06:40,900 --> 00:06:42,560
from any of the pages,
126
00:06:42,560 --> 00:06:46,210
but what matters is more that you kind of get your mind
127
00:06:46,210 --> 00:06:47,860
into a certain mindset,
128
00:06:47,860 --> 00:06:52,700
so a certain state in which, after you've seen 100 designs,
129
00:06:52,700 --> 00:06:56,520
it will get a lot easier for you to then build your own.
130
00:06:56,520 --> 00:06:58,940
So, trust me, I have experienced that
131
00:06:58,940 --> 00:07:01,210
a lot of times actually.
132
00:07:01,210 --> 00:07:04,440
So even if you don't need to copy anything specific,
133
00:07:04,440 --> 00:07:07,070
it will still help you to take a look at many,
134
00:07:07,070 --> 00:07:08,780
many different designs.
135
00:07:08,780 --> 00:07:09,750
And in fact,
136
00:07:09,750 --> 00:07:13,050
the best thing would even be to get into the habit
137
00:07:13,050 --> 00:07:14,940
of looking for designs,
138
00:07:14,940 --> 00:07:18,730
even if you do not need it at that particular moment.
139
00:07:18,730 --> 00:07:20,680
So, for example, every month,
140
00:07:20,680 --> 00:07:24,630
I might take half an hour and come to these websites
141
00:07:24,630 --> 00:07:28,900
to look what's new or what's happening in design right now.
142
00:07:28,900 --> 00:07:31,860
So I try to get inspiration every single month,
143
00:07:31,860 --> 00:07:35,340
even though I'm not always designing new pages,
144
00:07:35,340 --> 00:07:37,410
but I still want to know what's happening
145
00:07:37,410 --> 00:07:39,320
and I want to get a feeling
146
00:07:39,320 --> 00:07:41,463
for design basically all the time.
147
00:07:42,900 --> 00:07:45,233
But anyway, let's keep going here.
148
00:07:46,880 --> 00:07:51,250
And once you look at so many pages,
149
00:07:51,250 --> 00:07:53,310
you will see many patterns emerge.
150
00:07:53,310 --> 00:07:56,550
And actually, that is exactly what we will talk about
151
00:07:56,550 --> 00:07:59,210
in the beginning of the next section.
152
00:07:59,210 --> 00:08:02,870
So this here is like a feature row where you have an icon,
153
00:08:02,870 --> 00:08:05,260
a heading, some text, and a link.
154
00:08:05,260 --> 00:08:08,400
And on the other side, you have some kind of image.
155
00:08:08,400 --> 00:08:12,010
So this is a component which is then being repeated here.
156
00:08:12,010 --> 00:08:15,063
And so this repetition here is what we called a pattern.
157
00:08:16,020 --> 00:08:18,260
So an F pattern in this case,
158
00:08:18,260 --> 00:08:20,913
but more about that in the next section again,
159
00:08:22,210 --> 00:08:24,320
because this one is really more about
160
00:08:24,320 --> 00:08:26,460
how to get inspiration,
161
00:08:26,460 --> 00:08:29,283
not really what these components here are all about.
162
00:08:30,460 --> 00:08:33,640
So you can then take a look here at different pages,
163
00:08:33,640 --> 00:08:34,670
because many times,
164
00:08:34,670 --> 00:08:36,830
there are actually more interesting details,
165
00:08:36,830 --> 00:08:39,090
or more interesting components hidden
166
00:08:39,090 --> 00:08:40,880
in one of these other pages,
167
00:08:40,880 --> 00:08:43,393
not necessarily in the starting page.
168
00:08:44,310 --> 00:08:46,973
So I like to look for the pricing page, for example,
169
00:08:48,000 --> 00:08:50,430
which usually has these testimonials.
170
00:08:50,430 --> 00:08:51,930
It has these features.
171
00:08:51,930 --> 00:08:54,400
And, yeah, as I was expecting,
172
00:08:54,400 --> 00:08:57,913
it has some frequently asked questions as well.
173
00:08:58,890 --> 00:09:02,550
So again, you will start noticing these patterns and, well,
174
00:09:02,550 --> 00:09:04,480
we don't really need to go through
175
00:09:04,480 --> 00:09:06,200
these pages here right now,
176
00:09:06,200 --> 00:09:09,360
because I think you get the point, right?
177
00:09:09,360 --> 00:09:12,360
So again, you do not even need to take anything
178
00:09:12,360 --> 00:09:15,020
in particular from one of the pages.
179
00:09:15,020 --> 00:09:17,820
Sometimes, all you need to do is to simply scan
180
00:09:17,820 --> 00:09:22,070
a lot of pages, because that will then get into your mind,
181
00:09:22,070 --> 00:09:24,890
and once you then start to design,
182
00:09:24,890 --> 00:09:27,750
you will kind of be in the right frame of mind
183
00:09:27,750 --> 00:09:31,100
to create these designs by yourself.
184
00:09:31,100 --> 00:09:33,330
All right, and in the next section,
185
00:09:33,330 --> 00:09:35,240
we will learn how that actually works
186
00:09:35,240 --> 00:09:37,760
a bit more in practice.
187
00:09:37,760 --> 00:09:40,140
So this section has been quite theoretical
188
00:09:40,140 --> 00:09:43,720
with all these design guidelines, but in the next section,
189
00:09:43,720 --> 00:09:45,300
we will actually take that
190
00:09:45,300 --> 00:09:49,050
and learn how we can apply these design guidelines
191
00:09:49,050 --> 00:09:53,450
to actually use common elements and common design patterns
192
00:09:53,450 --> 00:09:56,600
in order to create a common layout,
193
00:09:56,600 --> 00:09:57,800
because in the end,
194
00:09:57,800 --> 00:10:01,810
building a page means to basically build a layout,
195
00:10:01,810 --> 00:10:03,950
and for that, we need to use common elements
196
00:10:03,950 --> 00:10:05,420
and common patterns,
197
00:10:05,420 --> 00:10:07,490
and we will learn all about how that works
198
00:10:07,490 --> 00:10:09,190
in the next section.
199
00:10:09,190 --> 00:10:12,610
So we will finish this section here, because at this point,
200
00:10:12,610 --> 00:10:16,850
we wrap up the more theoretical guidelines of web design.
201
00:10:16,850 --> 00:10:18,470
And so, as I mentioned,
202
00:10:18,470 --> 00:10:21,530
we will take it to the practice in the next one.
203
00:10:21,530 --> 00:10:24,133
And so let's move on there right now.
15319
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.