Instructor: 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 have 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,
that 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 it 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 experience 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 shadows there
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 to see here on this right example,
that makes the design look kind of bad really,
there is not another word that I could think of there,
it really just looks bad and unnatural too.
So dark shadows like this 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.
Now, so that's exactly what happens here.
For example, notice these call to action buttons
or even these entire small forms
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 they're 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 these smaller elements that we just talked about.
So this technique of using medium size 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 size shadows
is to make cards stand out from the rest of the interface.
And again, with cards, we mean something
like what we see here on the left,
which in this case is a product card
which contains the description
of a certain product that the user might buy.
And we will better define what cards 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 popup windows
like you see here on the right.
So all the three examples have like really large shadows.
And so as we learn 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 size 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 feeling 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.