Jonas: 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.
So 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.
Now, 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.
So, let's now see how the process
of choosing the personality actually works.
But first of all,
what is a website personality?
Well, 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.
So for example,
if we choose the serious personality,
we want the user to feel luxury,
or sophistication,
or the sense of a premium product.
So when it comes to choosing the right personality
for your design,
think about what I just mentioned.
So, 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?"
Well,
the answer is that it will make web design
like 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?
Well, let's find out.
So 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.
So 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, right?
So typography, colors,
images, icons, shadows,
border radius, and also layout,
which we will talk about in the next section.
So again, for each of these personalities,
we now have basically different personality traits
in each of these ingredients.
So, the serious personality
uses serif type faces,
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.
So, 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.
So 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.
Now of course,
not all of these are always present
in all the serious and elegant designs.
So this is more of a rough guideline,
and a collection of trends
that you can use in your own designs.
Because again,
it'll make it a lot, lot easier, for you to do that.
So, 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.
So here you have three more sites,
which all of them kind of 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 arc shelter example that I have
here on the right side.
So typography is usually very boxy and squared,
and uses sans-serif type faces.
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.
So in this first one here, for example,
we do have some high quality images,
which adds 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 to the illustrations,
and everything is in complete black and white.
And then, the last one here,
is actually an exception to the rule
of serif type faces;
so the bigger headings are actually using
a thin serif type face,
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.
So here typography is very neutral looking,
and usually using sans-serif type faces.
As for the colors,
these are usually kind of "safe" as we can say,
so they're not like 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.
Now, images are quite frequent in these designs,
but usually in a very small format,
so they don't take the center stage
like they do in other website personalities.
Now, 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.
So there are a lot of boxes and rows,
just like we can see here on the right side.
So this is really a very typical looking
plain or neutral design.
So 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.
Now that doesn't mean that the design is bad,
all right,
so bad is very different from boring.
So of course, these big corporations
have big budgets for designers,
so they're not bad, and the design is not bad.
It simply serves their goal
to have a design like this.
So, 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.
Now, one of the most distinguishing factors
of bold designs,
is the boxy square type faces,
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.
Now, as for icons, shadows,
and border radius,
these are usually not used in these types of designs,
or are used very sparingly.
So 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 kind of transmits the boldness
and the confidence of these brands.
So 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.
Now, this one is used a lot in healthcare,
and in general,
in products that have a big focus,
or would actually have the main focus
on consumer wellbeing.
So, 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 type faces,
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.
So 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.
So 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.
Now, this calm personality
finally uses some icons
and border radius, a lot.
So 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.
So, no particularly strange
or creative layouts are used.
So, three more examples,
and these are actually quite common
and quite easy to find these days.
So 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 type faces in the headlines,
and also the messaging itself.
So 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.
So, 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.
So 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.
Now 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.
Now, images are of course used all the times,
and illustrations,
and especially 3D illustrations,
are becoming really modern these days.
So 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.
So 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.
Now, about some common layout patterns;
it is quite usually to see something
like row of carts,
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 typography.
So 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.
So 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.
So 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.
So, designs that employ this personality
are usually for companies related to products
for children, or for animals,
or many times, also for food, actually.
Now here,
the typography is usually very round and creative.
So many times, actually some variation
of handwritten fronts are used,
and sans-serif type faces
are actually quite common.
Now, one of the most distinguishing features
of this personality,
is the very frequent use of color in this design.
So, 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
a very playful and fun vibe.
Of course,
a lot of images are also used,
and sometimes even like hand drawn illustrations.
So again,
these help giving these designs their playful vibe.
And the same thing is true for icons,
and shadows, and border radius.
So again,
all of these are very common,
and are used all the times,
and many times even in a hand drawn style,
especially for the icons.
Now 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.
So 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.
Now,
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.
So 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.
So, what I want to show you now,
is that we can basically place
all these seven personalities
into this axis of serious, playfulness,
or calmness and boldness.
So 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.
So, 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.
So, this one is the one that is the least playful,
so 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 in fact the playful and fun personality, right?
So, 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 flashier,
in bigger blocks of color.
And the boldest personality,
is of course, the bold and confident personality.
Then, on the other hand 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 type faces,
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.
Well, 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.
So, 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;
so 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.
All right?
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.
All right?
Now, the other personalities
can actually also get mixed.
For example,
you could mix the serious personality
with a startup one,
but that is actually a lot less common.
So 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 bold 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 type face.
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.
So 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,
so there are a lot of bright colors.
The topography 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.
So the headings are huge,
and there's a lot of bright color blocks.
I mean, 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 type faces
in the headings,
and also in these calming pastel colors
that are used throughout the illustrations
of the entire site.
So, 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 type faces
in the headings.
So 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.
So 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.
So 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 kind of shows
the user of the site
that this company actually cares for them.
So 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's 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 omni food project
a little bit later in this course.
So 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.
So, see you there.