Original subtitles

In this lecture,

we're finally gonna talk about website personalities

while I introduce what I call

the website-personalities-framework

that I created specifically for this course.

Remember how I explained

right in the first lecture of this section

how I took hundreds if not thousands

of well-designed websites

and deconstructed them and distilled them

into countless web designs rules,

which are the ones that we just learned

throughout all this section?

What I also did was to distill

all these websites that I analyzed

into seven different website personalities

and this will help you a lot

when you will have to take your own design decisions

in the future

because the web design rules that we learned before

will have to be applied according to the personality

that you chose for your design,

and so therefore, once you have a personality chosen,

your design choices are gonna be a lot more limited,

which will actually make it a lot easier

for you to create a consistent

and good-looking design on your own.

Let's now see how the process

of choosing the personality actually works,

but first of all, what is a website personality?

In this framework that I created,

a website personality is basically like a general feeling

or a vibe that we want the website to transmit to our users

and it's also a feeling that we want to invoke in our users.

For example, if we choose the serious personality,

we want the user to feel luxury or sophistication

or the sense of a premium product.

When it comes to choosing

the right personality for your design,

think about what I just mentioned.

Think about how do you want your website

to appear to your users.

What vibe do you want to transmit?

Then based on that,

you look at the list of personalities

and choose the one that best fits the vibe

that you want to convey,

or if that's easier for you, you can, of course,

also directly choose one of the seven personalities

directly from this list.

Also, you can choose multiple personalities if you want,

but more on that by the end of this video,

but now you might ask,

"Why is this personality actually so important?

Why does it matter?"

The answer is that it will make web design

10 times easier for you

because once you have a personality selected,

your design options for each of the design ingredients

becomes really limited because,

just like personalities in people have different traits,

each of these website personalities

also have different traits as well.

For example, the serious and elegant personality

doesn't use shadows and doesn't use border-radius,

while the startup and upbeat personality

uses these all the time.

Therefore, when we create our designs,

all we have to do is to apply these personality traits

for each of the design ingredients that we learned about,

and what exactly are these personality traits?

Let's find out.

We're gonna start with the serious and elegant personality,

and here in the beginning is, again,

that overview text that I already showed you

in the first lecture of this section

and so I'm not gonna read those again

for each of these personalities, and in fact,

I'm only briefly gonna talk about each of the personalities

because otherwise it gets very boring for you quickly.

What I want you to do is, once again,

to actually download these slides

and then study all of these personality traits

basically by yourself

and take a look at the examples to see

that what I'm explaining here really makes sense

in the context of each personality,

but anyway,

the serious or elegant personality

is used a lot in real estate or fashion

and, in general, luxury products or services,

and so here now we have the web design ingredients

that we had learned about before,

so typography, colors, images,

icons, shadows, border-radius,

and also layout,

which we will talk about in the next section.

Again, for each of these personalities,

we now have basically different personality traits

in each of these ingredients.

The serious personality uses serif typefaces

and, especially in headings, a light font weight

and usually a small body font size is also quite common.

Common colors include gold,

pastel colors, like in this example,

or black or dark blue or gray.

Basically, colors that invoke some kind of luxury

or high-quality products.

As for the images,

these types of designs use very big images many times

and also make sure

that these are really high-quality images.

Many times, they hire professional photographers

to really create awesome pictures

and photos for their designs.

Now about icons,

many times these serious designs

do not use any icons at all,

but sometimes thin icons and lines can be used.

Then shadows and border-radius are usually not used,

as we also mentioned before, actually,

and a creative and experimental layout

is quite common for these designs to use.

Of course, not all of these are always present

in all the serious and elegant designs.

This is more of a rough guideline and a collection of trends

that you can use in your own designs because, again,

it will make it a lot, lot easier for you to do that.

Not all of the websites that you will see

fit into these seven personalities,

but to make it easier for you as a beginner,

I think this is a great framework that will really help you,

but now let's take a look at

some more examples of this personality.

Here you have three more sites,

which all of them roughly follow the guidelines

that I mentioned exactly for this website personality,

and again, I want you to look at these examples by yourself

with some time maybe after the video

or you can also, of course,

pause the video and analyze yourself.

Next up, we have the minimalist or simple personality,

which is used commonly for fashion or portfolios of any kind

or even some kind of minimalism company,

like this Ark-Shelter example

that I have here on the right side.

Typography is usually very boxy and squared

and uses sans-serif typefaces.

As for colors,

usually it is simply black text on a white background

because that conveys a very minimalist image

and it's also usual that only one color is used

throughout the entire design,

and usually these designs use few images

and no illustrations,

and especially no 3D illustrations.

That would just look very strange

in these kinds of websites.

Also, there are usually no icons,

but sometimes some smaller

or simple black icons can be used.

Also, again there are no shadows and no border-radius

in this kind of design

and the layout is usually very simple.

Sometimes it's actually just a narrow one-column layout

with all the content one after another.

Now let's look at a couple of more examples here.

In this first one here, for example,

we do have some high-quality images,

which add some nice colors to the design

which is otherwise just completely black and white,

as I mentioned.

There are also some small black icons,

and again, just like I showed you in the previous slide.

Then the second one here does actually use illustrations,

but they are very simple 2D illustrations

and everything is in complete black and white,

and then the last one here is actually an exception

to the rule of serif typefaces.

The bigger headings are actually using

a thin serif typeface,

but the overall design still looks quite minimalist.

Next up, we have the plain or neutral personality,

and so this is used in well-established corporations,

so companies that don't necessarily want

to make a huge impact through their design,

and examples of that are like this IBM website

or the Microsoft website that I showed you

at the very beginning.

Here, typography is very neutral looking

and usually using sans-serif typefaces.

As for the colors,

these are usually safe, as we can say.

They are not too bright or too washed out

or not crazy looking at all,

and blues and blacks are very common because,

as we learned in the colors lecture,

blue is the kind of color that conveys trust

and so that's simply what these big brands

or these big corporations are looking for.

Images are quite frequent in these designs

but usually in a very small format,

so they don't take a center stage

like they do in other website personalities.

Some simple icons can sometimes be used, but again,

there is no shadow and no border-radius usually.

Finally, about the layout,

these kinds of websites usually all have

a very structured and condensed layout.

There are a lot of boxes and rows,

just like we can see here on the right side.

This is really a very typical looking

plain or neutral design.

Overall, as a summary of this personality,

we can just say that the goal is

to not make a big visual impact.

They almost try to be boring, it seems like.

That doesn't mean that the design is bad, all right?

Bad is very different from boring.

Of course, these big corporations

have big budgets for designers,

so they are not bad and the design is not bad.

It simply serves their goal to have a design like this.

Three more here, and again we have Microsoft,

we have Porsche here,

and then this other website right here,

and so if you compare this with the personality traits

that I just mentioned,

then you will hopefully find that all of these three

are some neutral-looking designs.

Next up, we have the very important

bold and confident personality trait,

which is one of the ones that I really like,

and it is used a lot in digital agencies,

software startups, travel companies,

in general, companies that want to transmit a strong image

so that they are confident in themselves

and are not afraid to make some bold moves.

One of the most distinguishing factors of both designs

is the boxy, square typefaces,

which are usually used using big and bold typography.

Also, just as we can see in this example,

big color blocks

or big sections with a bright-colored background

are usually used to draw a lot of attention,

and both these personality traits clearly display

the boldness and the confidence of these designs,

and the same thing is done

by using lots of big images as well.

As for icons, shadows and border-radius,

these are usually not used in these types of designs

or are used very sparingly.

For example, that button that you have here,

which says shop our kits,

it actually has a very small border-radius,

but in general, what I mean here is that these designs

are usually not round at all,

and here are three more design examples

and once again we can see how the big typography

paired with the very confident use

of some big and bright color blocks

really transmits the boldness

and the confidence of these brands.

That is exactly the goal of using this website personality.

Next up, there is the calm or peaceful personality

and this is basically the complete opposite

of the boldness and confident personality

that we just talked about.

This one is used a lot in healthcare,

and in general, in products that have a big focus

or which actually have the main focus on consumer wellbeing.

This one is basically for brands

that want to transmit to the user

that they care about them a lot,

and they do this by using soft serif typefaces,

and especially for headings,

like these two that we can see here,

and also it is very common to use these washed-out colors,

like these blue or yellow pastel colors

or also light oranges or browns or greens.

You will see these all the time

and also in the three examples that I will show you next.

Then the images very frequently feature a lot of people

and they also try to match the calmer color palettes

that are employed.

Of course, it would be weird to all of a sudden

have an image here which has very bright and flashy colors,

like we see in the bold personality.

This calm personality finally uses some icons

and border-radius a lot.

Now we start seeing more rounded designs

here at this point.

Shadows, however, are not used a lot,

but sometimes, of course, you will see them,

and as for layouts, there are no particular tendencies.

No particularly strange or creative layouts are used.

Three more examples

and these are actually quite common

and quite easy to find these days.

This is, right now, a very popular website personality

because more and more brands are trying to transmit

that image that they care about the consumer,

and so in all these three designs,

you can see these calming pastel colors,

you can see the soft serif typefaces in the headlines

and also the messaging itself.

The text content is also all about the consumer

and it is very focused on basically helping them

and caring about them.

Next up, we have finally the startup

or the upbeat personality,

and if you use a lot of technology websites, like I do,

then this is probably the personality

that you come across the most.

As the name of the personality says,

this one is used a lot in software startups

but also in other companies that simply want to transmit

a modern-looking image to their customers.

This design right here is from the Stripe website,

which is a very big and well-known software startup,

and many people actually try

or get inspired by this exact design,

so by this website right here,

but now about the personality traits,

let's again start with typography,

and this personality uses medium-sized headings

and usually only one sans-serif typeface

in the entire design,

and the tendency is for light colors in the text,

which is quite a modern-looking trend

in these kinds of websites.

About the colors,

greens and blues and purples are used a lot

for the primary brand colors,

and then as for background colors,

it is very common to have a light gray background

in many places in these designs,

and again, we can see that right away

here in this example on the right side.

It's also quite common to use gradients.

At least in the last couple of years,

these have become really popular.

Images are, of course, used all the times

and illustrations, and especially 3D illustrations,

are becoming really modern these days.

You will see illustrations all the times

in startup or upbeat websites

and sometimes even patterns or these small shapes

that might add some visual details,

for example, behind images,

and I think I showed you that in one of the lectures before.

Also, icons and shadows and border-radius

are all used very commonly.

These designs are, again, getting more round

as all the other previous designs that we talked about

and shadow is also more used than before.

About some common layout patterns,

it is quite usually to see something like rows of cards

or rows of product features

and the Z-pattern in startup designs,

and we will learn what those actually are very soon,

by the beginning of the next section,

and now, again, three more examples,

and you can see in all of them

that they use a very simple and clean-looking topography.

The text is not too big

and the colors are also quite light,

and actually, in the first example,

I would even say they are a little bit too light.

Also, you can see these light gray background colors

used all the time,

especially in the first two, but in the last one,

basically we have the same thing but in a dark mode design.

These three examples really tick all the boxes

of a modern startup and upbeat design,

which again, I'm sure you have seen this kind of design

all over the place these days

because it is by far one of the most popular ones

that we see these days.

I would say this one and the calm personality

are the most common ones,

and now finally,

personality number seven is the playful and fun personality.

Designs that employ this personality

are usually for companies related to products

for children or for animals

or many times also for food, actually.

Here, the typography is usually very round and creative.

Many times, actually,

some variation of handwritten fonts are used

and sans-serif typefaces are actually quite common.

One of the most distinguishing features of this personality

is the very frequent use of color in this design.

Using a lot of color all over the place,

like in backgrounds or in the text or even inside of images,

is what gives these designs the very playful and fun vibe.

Of course, a lot of images are also used

and sometimes even hand-drawn illustrations.

Again, these help giving these designs their playful vibe,

and the same thing is true for icons

and shadows and border-radius.

Again, all of these are very common

and are used all the times

and many times even in an hand-drawn style,

especially for the icons.

Here we have three more examples,

which are maybe a little bit less playful

than the one that we just saw,

but still, I think that these three ones,

especially thanks to their use in color

and some hand-drawn elements,

can be classified as a playful and fun personalities.

Again, hopefully these serve as an inspiration for you,

and yeah, I hope you can check out all of these designs here

with a little bit more time,

analyze what's going on in them,

and really see how they compare

with the traits that I just described.

You can actually finish the lecture at this point

without any problem because at this point,

we talked about everything that is most important

in the website personality framework

that I invented, basically, for this course.

What we just learned is the most important thing

that you should know,

but if you want to dig even deeper into design

and into this website personality framework,

then let's keep going.

What I want to show you now is

that we can basically place all the seven personalities

into this axis of serious, playfulness

or calmness and boldness.

Basically, serious is the opposite of playful

and calm is the opposite of bold

in basically this framework,

and so here we're now going to learn

that we can actually combine playfulness and boldness

in one single design.

Playful basically means, as we just learned,

that the design is more colorful

and everything is more rounded

and there are more shadows and illustrations in general.

Now placing these personalities into the playfulness,

the first one needs to be

the serious or elegant personality.

This one is the one that is the least playful.

It is the most serious one,

then there is the minimalist one,

then the plain and neutral personality,

then the startup and upbeat, which is already quite playful,

but then of course the most playful one is,

(laughing) in fact, the playful and fun personality.

This is basically these five personalities

ordered from the most serious one to the most playful one,

then there's also the boldness axis,

and so as we learned, the bolder the website design is,

the more boxy and squared the typefaces are

and the bigger and bolder the typography is going to be

and the colors will also be, let's say,

brighter or more flashy or in bigger blocks of color,

and the boldest personality is, of course,

the bold and confident personality.

Then on the other end of the spectrum,

we have, of course, the calm and peaceful personality,

and as we also learned, the calmer the design is,

the more the headings use soft serif typefaces

and these washed-out colors and illustrations,

but now you might be wondering

why all of this actually matters

and why I'm showing you all this.

The reason is that this can basically show us

that all these personalities are actually fluid

and can be placed inside of this spectrum

of playfulness and boldness,

which means that some trait of the boldness

or the calm personalities can basically get injected

into one of the other five personalities.

Let's consider the startup personality.

Sometimes, this kind of design wants to appear

also a little bit bolder or more confident,

and so then they can simply take

some of the personality traits of the bold

or of the confident website personality

and use them in their own personality as well,

or of course, it can also go the other way.

The startup personality might want to appear

a little bit more caring about the consumer,

and so in that case,

it can try to embed some of the character traits

of the calm personality inside of its own designs,

and so basically what I want to show you here

is that some boldness or some calmness can get injected

into these other five website personalities.

The other personalities can actually also get mixed.

For example, you could mix the serious personality

with the startup one,

but that is actually a lot less common.

These days, it's mostly boldness and calmness

that gets embedded into one of the other personalities,

and sometimes even boldness and calmness can be mixed,

which can make for some very interesting designs,

but that is actually a bit more difficult

for beginners to pull off.

All right, and to illustrate all this,

let's again take a look at a couple of examples,

and this first one here is what I would classify

basically as the base personality,

as a minimalist and simple design.

However, this design then does use

some big and full typography

and also has these two big colored blocks.

They're not really that bright or flashy, but still,

they kind of are part of the bold personality,

and so here I would say that some boldness

got injected into the minimalist

or simple main personality.

Then another one,

and here I would say that this is

kind of a startup personality,

but then again, it got injected with some boldness,

as we can see with this very big and boxy typeface,

and yeah, the typography in general is very bold

and big as well,

and in this one,

we can actually even see some hints of minimalism.

The design is mostly black and white with some blue links

and there are no icons or shadows

or illustrations here at all,

but anyway, let's take a look at another one,

and this one is mostly bold, I would say.

There are a lot of bright colors,

the typography is quite big as well,

but then we have these irregular and round design elements

and also the hand-drawn icons

and this pattern here behind the image,

and so there is clearly some playfulness going on

in this design.

Maybe we could even say

that playfulness is the main personality

and boldness the secondary, so to say,

but that's not really relevant anyway.

What matters is that here we have

kind of a fusion between these two

and it makes for a really nice looking and creative design.

Then here we have another bold or confident personality,

I would say.

The headings are huge

and there's a lot of bright color blocks.

Here, you can only see one of them,

but the rest of the website, as I saw it,

actually had a lot of those,

but then there is actually some calm

or some peaceful personality traits injected into it,

and especially in these soft serif typefaces

in the headings

and also in these calming pastel colors

that are used throughout the illustrations

of the entire site.

This is the situation that I mentioned

where actually even the calmness and boldness

can be mixed in one design,

and I think this works really, really nice

in this situation, actually,

but again, it might be a little bit harder

to actually create this type of design.

Then just two more.

Here we have a startup or upbeat personality

with some calm traits inside of it,

and many times, the calmness trait that gets injected

is usually these soft serif typefaces in the headings.

That is actually a big trend that I've been observing

in all kinds of designs these days,

and the same actually for these calming illustrations.

These two character traits of calmness

are these days injected

into all other kinds of personalities,

and actually here, I have another example of that.

Here again, the exact same two things have been injected

right into this design,

which works really nice

for the reason that I mentioned before,

so for the fact that this shows the user of the site

that this company actually cares for them.

Using these traits really makes the user feel

that this is not just some cold and faceless company.

Somehow, these design choices makes the user feel

more secure and more trusting also, in a way,

and so these companies are taking advantage of that

using these design decisions.

All right, and that's actually it.

That is my website-personalities-framework

and I hope it made sense to you

and I hope that you might use it at some point

when you create your own designs,

and of course, we will use it

when we create our big Omnifood project

a little bit later in this course.

Again, I hope you learned something here

and that it was interesting,

and I see you now in the next video

where we will finally finish up this section

and talk about getting inspiration,

so another important ingredient

when you need to come up with your own designs

completely on your own.

See you there.