Original subtitles

So many people ask me

what's my secret to coming up with great designs?

And my answer is always the same.

It is not a secret at all.

All I do is to copy what I like from other great designs

and this is what's called stealing like an artist.

And so let's now take five quick minutes to see how I do it.

So, of course,

when we want to come up with a certain design,

we still need to care about all the things

that we talked about up until this point,

so things like choosing a website personality

and thinking about all the different design ingredients

by using the guidelines and the rules

that we learned for each of them.

And all of that is great and really,

really important and essential,

but there is still something missing.

And that missing piece,

as I mentioned right in the beginning of this lecture,

is basically to get inspired and to steal like an artist.

Now, what do I mean by stealing like an artist?

Well, basically, stealing like an artist means

that we do not completely copy a certain design.

So what we do instead is that we take the good parts of one,

or usually many good designs that we like

and then simply adapt them to our needs while using, again,

all of the different rules and guidelines

that we already learned before

and that we will actually keep learning

a little bit in the next section.

So getting a lot of inspiration

from other well-designed sites is really,

really important if you want to create your own design.

And so let me show you now how I do that.

So I like to use a couple of aggregators sites,

which feature a lot of great designs all the time.

And my most important sources

of inspiration are land-book.com,

One Page Love, and then here in this Inspiration tab,

then awwwards.com, which is a very well-known site,

which basically gives other sites awards for their design

and creativity and innovation.

So here we can go to the collections, and then from here,

we can choose Websites, but of course, as always,

all of these four websites that I use

will be on my resources page, along with some other ones.

And then I also use screenlane.com

for individual components.

So let's quickly see a little bit how they work

and let's pretend that we want to design

some kind of website for a startup

for which we have been hired.

So we already know that we want to use the startup

and upbeat personality,

and we also know already how we should actually apply each

of the design ingredients according to that personality.

But now, of course, we need to get some inspiration.

And so again,

that's where these inspiration sites come into play.

So since we're looking for startup pages,

let's kind of look for those here in these websites.

So this one here looks like a startup page,

so we can right-click here, open in a new tab,

and then we can keep going.

So this is basically an endless feed

of very well-designed pages

that is being updated all the time.

So this one, for example, was added four days ago.

And, yeah, all the time,

they keep adding new and new and new designs all the time.

Of course your site will look different here

by the time you're watching it video,

maybe the entire side looks different as well,

or it might not even exist anymore.

But the main point is of course

that we need to get some inspiration from them.

And if it's not Land-book,

then it might be One Page Love

or some other one that I will have on my resources page.

But anyway, this one here looks like a calm personality.

This one here maybe as well, together,

maybe with some minimalism in there.

I'm not sure.

So of course, it needs a bit more time to analyze.

But, yeah, what matters is that you can keep going here

and get all the inspiration that you want.

This one clearly looks like a startup page

so let's open this one.

And, yeah, I think that's enough.

Let's go to another one here.

But of course, typically,

I would spend a lot of time here on each of these pages

and open maybe 20, 30, 50, if necessary,

other websites to get inspiration.

So this one here might be another startup.

So now here we have the link to the page down here.

This one here looks like a startup as well.

Okay, let's just move it to the side.

Then here, actually,

we have a lot of different types of designs.

The ones we find on Awwwards

are a lot more creative and experimental,

so it's a bit harder to find what we're looking for,

but when we find it,

then the quality of design

is many times superior right here.

And actually, we can also filter these, I think.

Here, popular,

and here is even a tag just for startups alone.

So here is another one.

And, yeah, so the point here

is just so you see how this works.

So let's take a look at a couple of sites.

All right, so I like this header component here.

This one here also looks interesting.

I never saw something like this, actually.

That's quite creative.

All right, but in general,

there's not a lot of really creative stuff here, okay?

But again, this is just to get some general inspiration

and like a general mindset

of what is being used right now in design.

So maybe you might not even take anything specific

from any of the pages,

but what matters is more that you kind of get your mind

into a certain mindset,

so a certain state in which, after you've seen 100 designs,

it will get a lot easier for you to then build your own.

So, trust me, I have experienced that

a lot of times actually.

So even if you don't need to copy anything specific,

it will still help you to take a look at many,

many different designs.

And in fact,

the best thing would even be to get into the habit

of looking for designs,

even if you do not need it at that particular moment.

So, for example, every month,

I might take half an hour and come to these websites

to look what's new or what's happening in design right now.

So I try to get inspiration every single month,

even though I'm not always designing new pages,

but I still want to know what's happening

and I want to get a feeling

for design basically all the time.

But anyway, let's keep going here.

And once you look at so many pages,

you will see many patterns emerge.

And actually, that is exactly what we will talk about

in the beginning of the next section.

So this here is like a feature row where you have an icon,

a heading, some text, and a link.

And on the other side, you have some kind of image.

So this is a component which is then being repeated here.

And so this repetition here is what we called a pattern.

So an F pattern in this case,

but more about that in the next section again,

because this one is really more about

how to get inspiration,

not really what these components here are all about.

So you can then take a look here at different pages,

because many times,

there are actually more interesting details,

or more interesting components hidden

in one of these other pages,

not necessarily in the starting page.

So I like to look for the pricing page, for example,

which usually has these testimonials.

It has these features.

And, yeah, as I was expecting,

it has some frequently asked questions as well.

So again, you will start noticing these patterns and, well,

we don't really need to go through

these pages here right now,

because I think you get the point, right?

So again, you do not even need to take anything

in particular from one of the pages.

Sometimes, all you need to do is to simply scan

a lot of pages, because that will then get into your mind,

and once you then start to design,

you will kind of be in the right frame of mind

to create these designs by yourself.

All right, and in the next section,

we will learn how that actually works

a bit more in practice.

So this section has been quite theoretical

with all these design guidelines, but in the next section,

we will actually take that

and learn how we can apply these design guidelines

to actually use common elements and common design patterns

in order to create a common layout,

because in the end,

building a page means to basically build a layout,

and for that, we need to use common elements

and common patterns,

and we will learn all about how that works

in the next section.

So we will finish this section here, because at this point,

we wrap up the more theoretical guidelines of web design.

And so, as I mentioned,

we will take it to the practice in the next one.

And so let's move on there right now.