Original subtitles

So this section is all

about building a real-world project.

Now designing and building a website

is not simply writing some code.

It's a lot more than that.

So it's actually a whole development process

that requires a lot of careful thinking and planning

and all that before you even write a single line of code.

And so, before we start building our project,

let's actually learn to seven steps that are part

of the development process,

so that you know exactly how to proceed

once you want to start building your own websites.

So, as an overview,

here we have the seven steps that are part

of the development process

that is behind building any website.

So first, we need to define and to plan the project.

Then we start thinking about the layout of the page

and create some initial sketches.

And only then after these three phases,

we can finally start designing and building the website.

Then once that is done, we need to of course test

and optimize that page before we can actually launch it.

But even then we are not done

because any website that is live on the web needs

to be maintained and updated, okay?

And so now let's take a look at these seven steps here,

one by one, starting with defining the project.

And in this step,

the first thing that we do is something very simple,

which is to simply define who the website is actually for.

So for example, is it for yourself?

Or is it for a client of your freelancing business?

Or maybe even the agency that you're working?

So this sounds trivial,

but it's still important to do this.

Then after you define what the website is actually for.

So basically, you need to decide what's the main goal

or the main purpose of the site.

Is it to provide information?

Or to sell some product?

Or is it simply to entertain the user?

And by the way, these three purposes that I just mentioned,

so providing information, selling something

or entertaining are the three most common goals of websites.

Now, based on what we learned

in the lecture on user experience,

defining what the website is for is basically the same thing

as defining business and user goals, right?

So in other words,

this is basically what this step here is all about.

It's about defining your business goals and user goals

for this particular project.

And of course you don't need to overcomplicate things here.

So this can be something very simple and very quick.

So let's take as an example,

a company that produces premium dog food.

So when this company sets out to create a new website,

their business goal will probably be

to sell that premium dog food, right?

Now, on the other hand,

when the user visits this website,

their goal will probably be to find high-quality dog food

and also find it for a good price.

So you see, this is just something very simple,

but it's still important to have this defined.

Finally, what you also need to do during this step is

to define a target audience for your project.

And here, try to be really specific if you can,

and if it makes sense for your particular project.

And many times, actually this comes from your client

and so then you don't need to worry about this.

But usually when the client is smaller,

they don't have this well-defined,

and in this case, you should totally do this part.

And again, this can actually be quite simple.

So taking again, the example of the dog food company,

here, we could say that the target audience is women,

which are 20 to 40 years old, live in Europe,

earn a good salary of 2000 euros a month,

and they have a passion for dogs.

So as you can see, here we have a really,

really specific target audience,

which of course you will not always be able to do,

but if you can,

then it is always very good to have a precise idea

of who exactly you're building the website for.

And actually, this is basically the whole point

of this first step here,

because you will to design your project with all the goals

and the target audience in mind.

So of course, the reason for that is

that the better you know who you build a website for

and what you want to achieve with it,

the more success your project will have in the end.

And so this step really be the foundation

on which you will build the project later on.

So do not just start building a website

without this step, all right?

Now you could go really deep in this step alone here.

So stuff like competition research

and user personas and all stuff like that,

but then we're going really deep into marketing territory

and that is of course outside the scope of this course.

And so let's now move to the second step,

which is planning the project.

And this planning should of course be based

on the business goals, user goals,

and the target audience

they are defined in the previous step.

Now planning the project means to finally start thinking

about our website.

And so that starts with actually planning

and gathering the content of the website.

So things like the website copy,

which is basically the text images, videos,

and all other type of content.

Now, usually this content should be provided by the client,

but of course you can also help them to build,

so to produce and to find this content for them.

So when it's a big company

then many times they do this part for you,

but in my experience in smaller companies.

So if you have like a smaller client,

then they usually don't have this content yet.

And so maybe in that case,

you will have to write it yourself

or even hire some other copywriter.

Just don't do this for free for your client,

so you should always charge a little bit extra in this case.

Of course, if it's only about finding images, that is okay,

because that is very easy and fast,

but writing content is something entirely different,

all right.

Then if you have a bigger website,

then it is also time to plan the sitemap.

So basically planning what pages the site needs

and how they relate to one another based on all the content

that you now have.

Now, also based on the content,

here you can also start planning the sections

that each of the page should have

in order to convey the message to the user,

as good as possible.

And notice how I emphasized the content

here a couple of times,

and the reason for that is that it is the content

who should guide the project

and the design of the website in the end.

So again, always have the content actually guide the project

and the design and do not do the opposite.

So don't come up with a pretty design and a pretty website,

and then in the end fill it with the content.

That is definitely the wrong way to go.

Now, finally, based on everything you already know

about the company and the project and all of your content,

it is now time to also define the website personality

that you will want to implement in your design.

And of course,

this is all based on the website personality framework

that we learned about earlier.

So by the time you need to make this decision,

you can of course go back to our web design section

and then remember how you can actually make that decision.

Now okay, and with that, we wrap up the planning phase

and can move on to the sketching phase

where we will start thinking about the components

and maybe some layout patterns that we're gonna need

in order to convey the message of our content.

And here again, keep in mind that it's the content

who should guide the design and not the other way around.

Now, once you have an idea about what components

and what layouts you might want to use,

it's time to create some sketches with pen and paper,

or maybe even with some design software like Figma.

And these sketches at this point should be very,

very simple, so very low fidelity without any details.

So you don't even have to write texts or anything like that.

Just like draw some boxes for the images

and for the text content,

just to quickly get your ideas out of your head,

because this is very, very important

for your creative process.

And don't worry if this sounds confusing

because I will actually show you my process

in the next lecture.

But anyway, this process of sketching your initial component

and layout ideas is really, really important.

And just two more things

that you need to understand about this.

And first is that this is really an iterative process.

So you don't have to set anything in stone yet

at this point.

Just keep experimenting with different ideas

for different components and layouts

until you arrive at a first good solution.

But then when you implement this in code,

you can of course change everything up again.

So that's no problem, because again,

this is just to get your ideas out of your head quick.

Also, you of course don't need to spend a lot of time

in order to sketch everything.

So your entire design at this point.

And of course also don't make it perfect

as I said previously.

So maybe in some situations you just need to sketch

like half of your design,

and then you're already ready to jump into HTML and CSS.

So overall, this process of sketching is not rigid at all.

It is quite dynamic.

So you can jump between your sketches and your code,

and you can try a lot of different ideas

and experiment around until you arrive

at what you liked the most.

What matters most is that you don't just start designing

in code without having a general or a rough idea

of what you actually want to build, all right.

And speaking of building,

the next step is to finally actually design

and build your website.

So here you finally take your plan and your content

and the sketches that you did before

in steps one, two, three,

and use them to design and build the project

with HTML and CSS.

And usually what I like to do, as I mentioned a way back,

is using a process called "Designing in the browser."

So basically having just the rough sketches

that I explained before,

and then do the actual design in code.

And this designing includes of course,

to now choose and apply the actual visual styles

for your design.

So remember, from step three you already have the layout

and the components.

And so again, now it's time to actually implement them

and to design the actual visual styles

that you were going for.

And of course, these visual styles need to be based

on the website personality that you selected

and the design guidelines

that I also showed you in that section.

And of course, as the third ingredient

of building a good design is that

you need to get a lot of inspiration

before you actually style and design your page.

So that's basically just what we learned

in the web design section

and also in the last section, right?

Now, one thing that is quite common is

that your client will already have some kind

of branding in place and that specially true,

if you're working for a little bit bigger of a company.

And so in that case,

you should of course use

that client's branding whenever possible.

So usually for things like colors, typography, and icons,

so that your web design

of course matches the client's branding.

So this is very, very important.

And of course it makes your life

as a designer a little bit easier

because then some of these decisions have already been made.

And so that is always good.

And with this, I think we close up this step number four,

which of course is the biggest step of all

and the most fun for sure.

But again, you should not neglect the steps one,

two and three,

because otherwise step four will not be built

on a solid foundation

and you might not end up with the ideal solution, all right?

But anyway, now let's move on to step number five.

So once you're done building your project,

you need to test and you need to optimize it

before you can actually launch it to the web

and call it ready.

And this includes a couple of steps

where the first one is to ensure

that your website actually works well

in all the major browsers.

So in Google Chrome, in Firefox, Safari and Microsoft Edge,

but hopefully you will not have to test

for the old Internet Explorer

because then most of the things

that I'm showing you in this course will actually not work.

So right now, it is hopefully time for most of your clients

to drop support for the old Internet Explorer.

So if that's the case, then just ignore that.

And then you can use everything

that I'm showing you in this course.

Next, in order to test the responsive design,

we need to actually test the website

on actual mobile devices

and not just in our developer tools.

We also need to optimize all images

that we use in our website.

And that means two things.

First, we need to actually give

them the right dimensions in pixels.

And second, we need to compress them

in order to not force our users to download huge images

because Dennis just a very bad actually user experience.

Also we need to fix some simple accessibility problems.

So things like issues with the color contrast

that we actually already learned about,

I think in our design lecture.

Another common thing that we usually do is

to run a performance test

in our Google Chrome developer tools,

which is called Lighthouse.

And I will show you how we do that

by the end of this course.

And also some of the other things

that are here in this list.

Finally, one important thing that you should do

before launching any website is to think

about search engine optimization.

Now that however requires a whole course on itself.

So that is completely outside the scope of this course here,

and so we're not going to touch on that

in our current project, all right.

And once you have your project built

and everything is nicely tested and optimized.

And so in the end, everything is perfect,

it's finally time to share your masterpiece with the world.

And so basically now it's time to launch the website

to the internet.

So in technical terms,

what that means is to upload your website

to a hosting platform.

Now there are countless options here,

but we will use my favorite hosting platform,

which is called Netlify.

And Netlify has a very nice free plan as we will see

and so it's going to be a perfect choice here.

However, uploading the website

to a hosting platform is not the end of the story

because you actually also need to buy a great domain name

for your project.

Because otherwise users will have no way

of finding your website.

And when it comes to actually choosing a great domain name

for yourself, go with one that is memorable for your users

and that is easy to write and maybe even more importantly,

one that of course represents the company

or the brand that the website is for, all right.

So, after all this

and after finally lunching our website to the web,

we are finally done, right?

Well, except for the fact

that usually we also need to maintain

and updating the website.

So launching the website is many times not the end

of the story, because as I said,

we need to actually keep the website content updated

over time.

Now, if you're working with a client,

this can be a great chance to have some recurring revenue.

So by creating a monthly maintenance contract

with your client,

which is something that many web developers actually do.

Now, one thing that I didn't mention yet,

but which is pretty important is that you should

also install some kinds of analytics software.

And here pretty much everyone uses Google Analytics,

but there are also more privacy focused solutions

such as Fathom.

And the reason why analytics is so important is

that it gives you stats about your website users,

which you can then use in the future

to adapt your site structure and the content,

and really to do all other kinds of fine tuning

of your website.

And so that will then help you make it really perfect

and really make it better and better over time.

And finally, one aspect of many websites

that needs to be kept up to date is a blog.

And a blog is a great way to keep users coming back

to your website.

And it is also very good for search engine optimization

if you use it with the right content.

So if there is a blog,

then of course that needs to be updated regularly

because otherwise it doesn't make sense

to have a blog in the first place.

And so that is one more step

or one more part of this step, number seven.

And with this, we actually finally reached the end

of the process that stands behind building any website.

So as you see, there really is a lot of things

that you need to think about

and really a lot of aspects that go

into building a beautiful and useful website.

And so that's why I think that this lecture here is going

to be really, really useful in the future

when you start to build

and to design your own websites.

So hopefully you liked this lecture.

Now in the next one,

we will actually start implementing some of these things

because we will finally start working on our big,

big course project.

So I'm very excited to see you there very soon.