Original subtitles

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 VSCode, 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 you have experienced this yourself,

when you, for example,

checkout 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're 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.

Okay, and I hope that with this,

I could convince you that design

can not 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 can not 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 a different border radius actually give a website

completely different looks and feels.

Next up, we will talk about white space,

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 will 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 bold 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

start-up 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 grey 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 the playful or fun personality.

Okay, so this was just an overview

of the 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 got 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.