All language subtitles for 073 Web Design Rules #3_ Images and Illustrations.en_US

Besides text,

images are the most important content of any webpage,

and so let's now learn how we can use images well,

when to use images, and also what images to actually use.

So essentially, we can use four different types of images,

product photos, storytelling photos,

illustrations, and patterns.

And so let's now take a look at examples

for each of these four types,

and starting with product photos like these ones,

they're, well, as the name says,

to basically illustrate the product

that you're trying to sell on your website,

and that is true for physical projects

and also for digital projects, of course,

which many times are illustrated using some screenshots

of that product.

Now, just like before,

I'm not gonna spend a ton of time

on all of these examples, but instead,

I want you to download these slides as a PDF

and really study all the examples carefully by yourself.

So that will really help you assimilate all this material.

And so I hope that maybe you are even following that PDF

as you go through the lecture, like at the same time.

But anyway, now moving on to storytelling photos,

these are basically photos

that will help you convey the message of your website.

So these photos don't show the product itself,

but they might show someone using the product,

or also anything else really

that might somehow be related to the product or, again,

to the message of your site.

So for example, here on the left side,

we have a person using a journal in this website

that is trying to sell exactly those journals,

or the one in the top right, which is about coaching,

and so it shows the space

where the coaching actually happens.

So these are storytelling photos

and they appear all the time on all kinds of websites,

and I would actually say that they are

the most important of the four.

Now, next one, we have illustrations,

which are getting more and more popular these days.

And illustrations,

as you can see here in these examples,

can be made in many, many different styles

and they're basically a more abstract way

of doing storytelling.

They can also add a lot of originality

and personal style to the website

and help to really bring out the website personality

that you decided to use for your particular page.

Now, these examples here are 2D illustrations,

but there are also 3D illustrations,

which are getting more and more popular.

And so here we have a couple of examples of that as well.

Now, finally, we also have patterns,

which might be something like this.

And as you can see in some of these examples,

patterns might appear kind of as a background

of entire sections,

or they might also appear like behind images

in order to add some interesting visual detail.

So basically, these patterns can be used

to add a little bit of creativity

and visual detail to your pages,

so to make them a little bit less boring,

at least if you don't overuse them.

So if you use a lot of patterns all over the place

on your page,

then that might look just like visual clutter, okay?

So don't overdo it.

Okay, and so these are the big four types of images

that can usually be found on images.

Now, what's important is that you should use these images

in order to actually support the message

and the story of your website.

So a little bit

like I have actually already been telling you.

So what this also means

is that you should only use relevant images to your project

or to your service, so just like these.

All of these here make a lot of sense, if you ask me,

unlike these examples, for example.

So like the one on the right here,

like what does that have to do with a testimonial?

There's not even a person in that image.

Or here, in the bottom left,

it says enabling breakthrough research,

but what do the three people and a dog have to do with that?

So sometimes images that we see on websites

do not seem to make a lot of sense,

and so this is something that you want to avoid to do.

Now, what's also extremely important is that you should,

whenever you can, use original images,

so basically images that you take yourself,

or that some professional photographer takes for you.

So in this example here, very clearly,

some professional photographer took this picture

just for this site.

Now, not always that is possible,

especially because that requires to have some budget

and then you can always use some good-looking stock images.

So this I think is a good example

of a high quality stock photo,

which I took for free

from one of the sites I will show you soon.

And so this is the kind of image that you're looking for,

not one of those generic ones.

This one, for example,

I think is also quite nice

and also helps to deliver the message.

But then you also have stock photos that look like this,

and I'm sure we all have seen these kind of stock photos

that look really generic and really cheap,

and like really overused and bad.

So images like these four,

we all have seen them and they are terrible.

You should never, never use images like this, okay?

What matters is that your images look authentic and real,

and not fake and overproduced like these ones,

because users these days look a lot more for authenticity

than for polish.

So instead, you can use images from these websites here.

And the one that, in my opinion, is the best is Unsplash.

So you can get free images or illustrations

from these four sites,

which once again are part of our toolbox.

All right, and this is basically when

and what images you should use.

Now let's learn how you can actually use images well.

And one of the most important things of using images well

is to show real people in your images

in order to trigger users' emotions.

So images like these, which again,

show real people and not some fake, overproduced models.

People want to connect with real people these days,

and so you can use that for your advantage on your website.

Next up is something that many people overlook somehow,

which is that you can very simply crop your images

in order to fit your message.

Like in this example that I showed you before, right?

With the Solar Development here,

the original image was actually this big,

but it was way too big,

and so I simply cropped out everything that I didn't need

and just placed there what was interesting for me.

Another thing that you can try out is to combine photos,

illustrations, and patterns to create interesting detail

and some interesting effects, like these ones here.

But now, moving on,

you need to also learn about how to handle text on images.

So that's another important skill that you need

when you use images.

And there are different ways of doing that,

and the first one is to darken or brighten the image

where the text is.

So in this example,

what they did was to simply darken the entire image

on the left side,

and so now the text became quite easy to read.

So darkening the entire image is one of the techniques

and the other one is to only darken it partially,

and we can achieve that by using a gradient.

So here, basically only the bottom part of the image

has been darkened, and so now again,

the text is actually quite easy to read,

while on the right side, well, it is almost impossible,

at least in the one on the right.

So darkening or brightening the image is method number one

of combining images with text,

and it's also, I would say, the most popular one,

but there's also another method,

which is to position the text into a neutral image area,

so just as we have it here.

And in all these six,

there is some area that is quite neutral.

For example, there might be

a continuous background color somewhere,

and so that is a perfect place where we can put our text.

We just need to be mindful about what happens

when these images get smaller on a mobile screen,

because then somehow the text might get overlaid

with the rest of the image,

so with a part of the image where we don't want it to be.

Now, method number three is to simply put the text in a box,

so just like here.

That's also very simple to do and quite effective,

especially if we add some opacity to the box,

like here in the left example.

That can many times work really nice.

Now, finally, to finish up this lecture,

we also need to talk about some technical details

of actually using images.

And the first thing here is that we need to account

for high-resolution screens, such as smartphone screens,

and screens in high-end laptops,

such as Apple's Mac Books, or the Dell XPS.

Now, to do that,

we need to size our images so that their actual dimensions

are twice as large as we want to display them in our layout.

So let's say we want to display this image

as 300 by 300 pixels.

This means that we actually need the image file

to be 600 by 600 pixels,

so twice as many pixels as are displayed on the webpage.

And we call this two X, or two times a scale factor.

So a scale factor is simply

the actual pixels the screen contains

divided by the pixels represented on the screen

for any element.

On high-resolution screens,

the scale factor is two X, or sometimes even three X,

like on the very latest iPhones.

Now, what this means is that for any pixel

that we specify in our design, and that includes images,

the screen actually uses two or three physical pixels

to display that one pixels,

and it works like this,

because this will create a very crisp

and high-resolution experience like you currently have

on your own smartphone.

Now, what I just explained to you here really just scratches

the surface of how high-resolution,

or high-density displays work,

but it should be enough to understand

the point of this rule.

So you don't need to know the technical details,

but you need to know the rule, okay?

So anyway,

this is the reason why we need to make our images twice

as big as we want them to be displayed on the page.

And again, it is because the high-resolution screen

will actually use two pixels

to show each pixel that we specify in CSS.

Now, if we actually broke that rule,

so if our original image was only 300 by 300,

it would look something like this

on a high-resolution screen.

And of course that's not what we want.

Now, on the other hand, on normal screens,

there is no scale factor,

which means that each physical screen pixel

is equal to one pixel in our images.

So remember that the image right now looks blurry

on the high-resolution screen, right?

But if we were to see this page on a normal screen,

then everything would be fine.

However, in order to account for all screens,

we simply always make the image twice as large,

which is exactly what the rule says.

Now, this can create a problem of very large image files,

which brings us to our next point.

So another thing that you need to do

is to always compress images for a lower file size

and to achieve better load performance for your website.

So there is this extremely handy tool here,

which is called Squoosh, where for this example,

I can reduce the file size by an incredible 96%.

So the original had 3.18,

which is terrible for any user to load, to 112 kilobytes,

which is actually not a lot at all.

So compressing all your images using a tool like this

is extremely important if you care about your website users.

So it is tempting to skip this point,

but please don't do so, all right?

Now, another technical detail really

is that when you use multiple images side-by-side,

you need to make sure

that they have the exact same dimensions,

because otherwise your design

will look something like this here on the right side.

So this doesn't look good at all, where the images,

well, don't have the same height or the same width.

Instead, before you place your images on a site,

make sure they have the exact same dimensions,

or at least the same aspect ratio.

And that's actually all I had to tell you

about using images.

Now, this one, we will actually not implement in practice

in the next lecture, because we didn't learn any new CSS,

and also because we will actually do all of this

in our big website project called Omnifood

a little bit later.