Instructor: Now, before we can learn
about the different web design rules one by one
we need to start by talking
about what web design actually is, why it's so important,
and also why and how everyone can learn good web design.
So first of all, we need to distinguish
between web design and web development.
So basically, web designers are who create the overall look
and feel of websites.
While on the other hand, web developers are
the ones who then implement the design using html
CSS and JavaScript code.
Now, back in the day,
designers only designed using some web design program
such as Sketch, Figma or Photoshop.
The developer would then take that design and implement it
in code using some software such as VS code
so that in the end, the website could be displayed
for the user in a browser.
However, nowadays, there are also many designers who code
and many developers who design.
And so the goal of this section is to transform you
to a developer who also designs so that basically,
you can become a designer and a developer who can write
and build and design websites only using code.
So our focus in this course will of course be learning HTML
and CSS, so basically writing code.
But in my opinion, a modern web developer should also
be able to create simple and good-looking designs.
And so that's what I want to teach you in this section.
But first, let's explore a little bit why design
is actually so important.
So when a user visits a well-designed website
or web application, then that good design immediately
creates a lasting good impression of the brand
or the product that is behind that website.
However, if the site was badly designed,
then the user would believe that the brand
doesn't really care about the product
or the service that they're offering.
And so, when you build a website, of course, you do not
want to create that impression, right?
Also, good design makes the user trust the brand right away.
While on the other hand, a website with bad design
makes the user insecure about even trusting that company
or the brand.
Another really important reason for investing a lot of time
and effort into a well-designed product
is that good design increases the perceived value
of the brand or the product that the user is visiting.
While bad design simply makes the brand look kind of cheap,
and I'm sure that you have experienced this yourself
when you for example, check out two competing websites
of two competing products.
So probably you get a better impression
of the product that has the good-looking website
and you also trust the brand more and kind of feel
that that product is worth more, at least for me,
it sure works like this,
and there's a lot of research indicating
that this is how it works for the general users.
And so again, it's really,
really important that you or your company
or whoever you're working for invest in really good design
for their websites and web applications.
Finally, good design also gives users exactly
what they were actually looking
for when they decided to come
to the site in the first place.
For example, let's say you are looking to buy a TV.
So in that case, you want that webpage for the TV
to give you all the information as fast as possible.
And so for that, it's important
that the page is well designed.
You don't want to be confused and have to leave the page
because you cannot reach your goal, right?
And that's what would happen if the page was badly designed.
Now, okay, and I hope that with this,
I could convince you that design
cannot just be an afterthought.
It needs to be central to building any product.
So any website or any web application.
Now, many people are already aware about
how important web design is,
however, they will say something like,
oh, I'm not creative, or, well, I'm not an artist
and so I could never learn design.
However, in my opinion, that is not really true
because good web design is actually not subjective
and has not much to do with creativity.
For example, I myself couldn't be any further
from being an artist,
and I'm also not particularly creative,
but still, I can design a decent-looking interface
by following a simple framework or a system
such as the one that I want to teach you in this course.
And so, I really believe that anyone
can learn good web design.
You don't need to be creative,
and you don't need to be an artist.
All you need to do is to learn some rules
and some guidelines along with some system
that you then need to follow in order to build
a nice-looking interface for your own projects.
Now, what kind of framework or system
will I actually teach you, and how am I gonna do that?
Well, what I did was to analyze hundreds
or maybe thousands of really well-designed websites.
So I carefully analyzed and deconstructed
the design of all these websites
and then distilled everything that I learned
into a couple of rules that are easy
for you to learn, and even more importantly, easy to apply.
Now, these rules are divided into nine different areas
of web design, which I call the ingredients,
and you will see what the ingredients are in a minute.
But what matters is that there are many different rules
for each of these ingredients.
And once you have the rules,
you will then be able to apply them to any website
based on something that I call the website personality.
But more about that also a bit later in this lecture.
For now, let's take a look
at what I call the ingredients of web design.
So web design ingredients probably sounded a bit abstract
and so, let me now show you what I'm talking
about in this well-designed website.
So, the first ingredient is typography
which is all about formatting and designing text.
Then the next one is colors, which is another crucial part
and then we're gonna talk about images and illustrations
which are another fundamental aspect
that any website cannot miss.
So there cannot be a website without images.
And so, there are rules about how
we can actually use images in an effective way.
Also, many modern websites have icons
and so we also need to talk about that as well
as about shadows and border-radius.
Now, border-radius
which is basically the general roundness
of the elements on the page,
might seem a little bit insignificant,
but actually, it's not.
So different border-radius actually give
a website completely different looks and fields.
Next up, we will talk about whitespace
and also to the very closely related topic
that is visual hierarchy.
Finally, we will also have a lecture
on user experience and also about components and layouts.
So basically, we're gonna learn how
you can use different components and types
of layouts to represent different kinds of information.
And here, we're gonna have a lot
of different examples and different types of components.
And this lecture actually, we're gonna leave
for the next section because this is a special kind
of ingredient where there aren't really any rules,
but it's still affected by the website personality.
And so I'm listing that here as well.
And speaking about the website personality,
this is a concept that I came up with and it'll make it
so that we will take the design decisions for each
of these ingredients based on that website personality.
Now, there is a whole lecture about website personalities
at the end of this section, but for now,
let's finish this lecture by getting an overview
about each of the seven different website personalities.
The first personality is the serious or elegant personality
which we can use to convey luxury and elegance.
And we do that by using thin serif typefaces
golden or pastel colors, and high, big quality images.
Next up, there is the minimalist
or simple website personality.
And this one focuses mainly on the important text content
and uses small or medium-sized black text.
Many times it uses some lines as well
and very few images and icons.
And if they have icons, they are very small.
Next, there is the plain or neutral personality
which is used many times
in big and well-established corporations
such as Microsoft or Adobe.
And in this personality, the design gets
out of the way by using neutral
and small typefaces and a very structured layout.
Then we have the bold or confident personality
which makes an impact
by featuring big and full typography together
with bright and big color blocks
like the ones you see here on this page.
Now, personality number five is the opposite of this one,
which is calm and peaceful.
So this one is used many times for products
and services that try to convey the idea that they care
about the consumer.
And they do this by using calming pastel colors
like these background colors on this page,
and also soft serif headings together
with images and illustrations
that match the typeface or the colors.
Now, next up, there is the very important startup
and upbeat personality.
And as the name says, this one is used a lot
in startup companies.
And this website personality
uses modern-looking sans-serif typefaces,
light gray text and backgrounds together
with rounded elements.
Finally, to finish, there is the playful or fun personality
which consists of colorful and round designs
which are created basically by using creative elements such
as hand-drawn icons or illustrations, lots of animations,
and also the language of the content itself helps to convey
to play for all fun personality.
Okay, so this was just an overview of different
website personalities, but again, the idea is that
different design decisions, for example,
in colors or typography or images
that are gonna be used will depend on
what website personality you want for your design.
Because as you hopefully get
from this overview, different types of products
or websites require completely different
website personalities.
So we will have to keep that in mind.
But again, we will talk later about this.
So for now, we want to study the rules for each
of the design ingredients that we learned about earlier.
And so let's now go do that
in the next lecture, starting with typography.