Jonas: 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 the 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 work in?
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 2,000 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 are building the website for.
And actually, this is basically the whole point
of this first step here
because you'll want 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 built the website for
and what you want to achieve with it,
the more success your project will have in the end.
And so this step will 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
that you 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 text 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 like 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 to three
and use them to design and build the project
with HTML and CSS.
And usually what I like to do, as I mentioned 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 are 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's especially 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 their 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 that is just a bad,
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 launching 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 kind 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.