Narrator: 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 aggregator 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 this 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 feat 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 the video
maybe the entire site looks different as well
or 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 Lend-book, then it might be One Page Love
or some other one that it will have on my resources page.
But anyway, this one here looks like a, a calm personality.
This one here may be 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. Here, actually, we have a lot
of different types of designs.
The ones we find on awards
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 now, 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 a hundred, a hundred designs
it will get a lot easier for you to then build your own.
So trust me, I've 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 in the 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 call 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 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 a 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 common layouts.
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.