Original subtitles

Welcome back to our lecture

about shadows in web design.

Now, shadows can play an important part

in helping users figure out the relationships

between parts of our designs

or we can just use them to add interesting visual details.

But in any case,

let's learn how to use them to our advantage.

And let's begin this lecture with some concepts first.

And in particular,

let's start with a very brief history of shadows

in user interface design

because there has been some back and forth in the trends

over the last couple of years.

So back in the day around 2010,

all interfaces on mobile

and on the web looked something like this.

We call this skeuomorphic design

and it was full of realistic details and glossy effects

and lots of shadows.

Then after some time,

Windows 8 and iOS 7 came along

and introduced the idea of flat design

where all of this was completely stripped away.

So no more realistic details or glossy effects or shadows.

Everything was simply reduced down to the essentials

which is why this design is also called minimal.

However, this quite drastic change to flat design

might've taken it a bit too far

because it brought with it some usability problems.

That's why in the last couple of years,

something that I call flat design 2.0 has emerged.

Now, it's still minimal

without the realistic looking details

but it does bring back some shadows

and depth to user interfaces.

And speaking of depth,

depth actually brings us to our next point

which is the fact that shadow basically creates

so it simulates depth in user interfaces

or in other words,

shadows basically allow us

to add a third dimension to our designs

and that's the whole reason why we use shadows in UI design

in the first place.

So the more shadow that we add to a certain element,

the further away from the screen

or from the user interface,

that element will seem

and we can see that very nicely in this diagram.

So the shadow on the left is very subtle

because it's set to be only two pixels away

from the interface

and keep in mind that shadows are created in the real world

by some light shining at an object

and therefore creating a shadow behind it.

Right?

So in user interfaces,

shadows also simulate the existence

of some imaginary light sources.

Now, if the element is only two pixels away from the screen,

then makes sense that it cannot cast a large shadow

on the rest of the interface.

Right?

And that's why the shadow is very subtle here.

I think that is quite intuitive

because this is exactly what we experienced also

in the real world.

Now, on the other hand,

if the element is far away from the interface like,

let's say 24 pixels,

then the element will of course be able

to cast a huge shadow on the interface.

And so that's the reason why we see that here

on the other end of the spectrum.

We can also see that in this other diagram

where all these different shadows are represented

in a kind of three dimensional space.

Finally, I also want to just mention

that we can use shadows on both boxes and on text.

Now, in this lecture,

we will focus on shadows on boxes though

which is what we see in these diagrams here.

All right.

So let's now see

how we can use this idea of shadows in design.

And first of all,

you actually don't really need to use shadows

if they don't fit your website personality.

And again,

we will talk more about this later.

But for now,

what I want to show you is that for example,

in a serious design like this one here,

we use a lot less shadows

and many times no shadows at all

which is exactly what is happening right here.

On the other hand,

the more playful or more fun a design gets,

the more shadows it will also use.

So that's a very nice and easy rule

that you can use for shadows in your own designs

even if you do not want

to set a certain website personality.

So even if you don't do that,

you will still have some idea about how serious

or how elegant your design should be.

And so the more serious and elegant it is,

the less shadows you are going to use.

Now, we will go into what kind of shadow to use

for different situations.

But before we do that,

let me give you two general rules on how to use shadows

and the first one is that you should always use shadows

in small doses.

So please don't go ahead

and add shadows to every single element on the page

because that will just be confusing

and will kind of defeat the purpose of using shadows

in the first place.

So in this example on the left,

every single element does have a shadow.

And in some cases,

it might not make a lot of sense

like in these bullet points

or the email form on the top left side

or on that big image.

So if you add shadows to every single element,

then that would be like adding shadows to no element at all.

Because if all elements have shadows,

then basically that doesn't create any visual hierarchy

between these different elements.

Now, on the other hand,

in the example on the right,

we only have shadows in some of these small images

in the top right side

and so they are able to then create that illusion of depth.

So basically,

these two images look like they float

on top of that other interface

and then also at the very bottom.

So in these feature boxes,

they also used some shadow stare

because they wanted this part of the design

to really stand out from the rest.

So having this kind of float over the rest of the design

is used in this case

to really make these elements more prominent

than the rest of the content.

So that's the first guideline on how to use shadows well

and the second one is that you must go light on shadows

and not make them too dark

because like you see here on this right example,

depth makes the design look kind of bad, really (chuckles).

There is not another word that I could think of there.

It really just looks bad and unnatural too.

So dark shadows like these look very unnatural

because they actually don't exist in the real world.

And so when we then see them in a design like this,

we perceive them as simply looking bad and well...

Unnatural.

Right?

Now, using shadows in a bad way

which basically means to make them way too dark

and to use them everywhere on the page

is one of the easiest ways

to completely ruin an entire design.

And so that's why following these two rules

is absolutely crucial.

If you make your shadows too dark

and use them everywhere,

it is actually best to not use shadows at all.

And so be careful when you use them

and make sure to follow these rules

and of course, also the next ones.

And these next ones are about when to use shadows.

So we should use shadows in the right situations

and so one of them is to use small shadows

for smaller elements

that we simply want to stand out from the page

or in other words,

elements that we want to draw attention to.

And so that's exactly what happens here.

For example, notice these call to action buttons

or even these entire small forums

which have the input for an email address.

These are very important elements on pages

because these help to actually convert users

to paid customers, for example.

And so these are the kinds of elements

that we usually want to stand out

from the rest of the content on our pages.

So that is the reason

why we use these bright colors on them

and it's also the reason why we then add some shadows

in order to make them stand out even more.

And the same can of course be true for other elements

such as images like you see here on the left

and on the top right

where the shadow simply has the purpose

of basically making these elements

as if they are floating a little bit

on top of the interface

and so that draws attention to these images

because there are somehow important for the storytelling

or for displaying the product that's being sold.

So these are examples of when we use small shadows.

So next, let's talk about medium-sized shadows

that we usually use for larger areas

that we want to stand out even more

than the smaller elements that we just talked about.

So this technique of using medium-sized shadows

is used all the time

to make entire sections completely float above the page.

So basically to make them stand out

from the rest of the page

and these two examples show that in a very beautiful way.

Now, another common application of medium-sized shadows

is to make carts stand out from the rest of the interface.

And again, with carts,

we mean something like what we see here on the left

which in this case is a product cart

which contains the description of a certain product

that the user might buy

and we will better define what carts are a little bit later.

All right.

Now, finally,

we also have large shadows

and these kind of shadows we use for elements

that we really want to kind of float above the entire rest

of the interface

and good examples of that are navigations

and pop up windows like you see here on the right.

So all the three examples have like really large shadows.

And so as we learned in the very beginning

that immediately makes us perceive it

as though these elements are really floating above the rest.

Right?

So I think you can intuitively see that here in action.

All right.

So those are the three different types of shadows

that we can use in different situations.

However, we can also try with experimenting

of changing these types of shadows on different situations.

For example,

on mouse interactions like click and hover.

So that's actually a very nice example

where the normal state doesn't have any shadow at all.

Then as we hover over the button,

we can add a medium-sized shadow

which will kind of create the effect

of the button being pulled closer to the user.

So towards the user

as they hover with the mouse over the button.

Then, once they actually click the button,

we can reduce that shadow

which will then create the interface

of pushing that element back down

into the interface.

And so a very small and subtle effect like this

can actually help creating a very natural filling interface.

Now, finally,

let me give you just a bonus here

which is that you can also experiment

with something that I call glows,

which basically are colored shadows like this.

So shadows don't always have to be black.

And so if we give them a certain shadow,

then they make the element kind of glow.

So like this first button here,

the red one has a red shadow.

And so that makes it look

as if that button is kind of glowing.

Right?

So that's a very modern effect that if you want,

you can experiment with even though

it might be a little bit difficult for beginners.

But still, it's interesting

and you should definitely try it out at some point.

Nice.

So those are the guidelines on shadows

which I hope you found useful.

However, we actually don't know yet

how to use shadows in CSS, do we?

So let's actually learn that in the next video.