All language subtitles for 100 Web Design in Practice - Let_s apply what we_ve learnt!.en_US

Now that we've learned about some of the principles of web design such as Color Theory, Typography, User

Interface design and User Experience design, the four pillars, it's time to apply what we've learned and

build a design together.

Now there's a website called Daily UI which gives you a task to design every day for 100 days.

It's free to sign up and it's something that really does improve designing skills by just that repeated

practice.

Now if you take a look at a website called Collect UI you can see they've collected together all the

designers attempts at designing each of these daily challenges and you can see examples what each of

these challenges are.

For example, anything from creating a sign up screen to a flight website to a hotel booking website.

So we're going to take some of these ideas as inspiration and create our own website design

applying the four pillars that we've learned in this module. The first thing I want you to do is head

over to a website called canva.com.

Now this is a online graphics editing program and you don't have to download anything and it's completely

free to sign up.

So sign up for a new account and then go ahead and create a new design.

So we're going to pick custom dimensions and I'm going to choose 1400 pixels by 800 pixels high.

Once we're inside our design we're going to take this as the first screen that the user sees in our

website.

And then when they scroll down they'll see the next page and then they scroll down and see the final

part of our website.

So let's design the first title screen.

Now I'm going to choose this free template which gives me a backdrop already but I'm actually just going

to use it for some texture. I quite like the way that this pattern looks.

So I'm going to apply the pattern and then I'm going to change the background.

Now I think the background looks a little bit bland with just a single color.

So I'm going to choose a photo instead and I'm going to search for a beach, like this one.

So now that I've got my image I'm going to drag it out so that it's sized as large as it needs to be.

So going all the way to each of the edges. And then I'm going to reposition it so that it fills up the

entire screen. Like this.

So now I have a background image, some sort of texture on it

and I can go to the elements to keep adding to this design.

Let's take a look at some of the gradients here.

And I'm going to pick something that'll fit in with this theme.

Now, of course, how you design this is completely up to you.

And I'm just providing an example of how I go through this process of designing.

So now I've got a circle here.

I'm going to add some more shapes maybe a square of some sort. We can click on see all to see all the

other ones.

And then I'm going to put a square which I'm going to make it so that it goes right to the end of each

of the sites.

So here and then we're going to make it line up with the center of the circle roughly like this.

And let's just change that color to white.

Now we have this nice white border, some abstract shapes and patterns and an image.

Now I'm going to add a heading text. This heading text is going to be the name of our hotel.

After all we're designing a website for this unknown Hotel which I'll call "A Hotel".

A really easy way of making something look authoritative and like it's been around forever is by changing

the typeface to a Serif typeface.

So I'm going to highlight this font and I'm going to click the dropdown and find a serif typeface like

this one cardo.

And notice how instantly our hotel looks a lot more established like it's been around for longer.

Now I'm going to change the color of this also to white.

So notice how we're starting to establish a color palette of greens and turquoise and blue and white.

And we're going to increase the font size to maybe something really large like 120 or 144. And

I'm going to change this so that it's all caps like so.

So that's actually a little bit too big

so let's drop it down a notch. And I can increase the spacing of the letters to again make it look more

fancy, more expensive and more authoritative.

Here's the name of our hotel, A Hotel, centered in this box.

And now I'm ready to add a subheading and my subheading is going to be some sort of tagline

right?

And I'm going to go with something really obnoxious like "Lose Yourself to find yourself".

I feel like I'm ready to open a hotel tomorrow.

Let's Now contrast this serif typeface for the title with a San-Serif sort of body or subtitle.

And this is what we learned about in the typography section.

It creates contrast in the design.

So I'm going to pick this Glacial indifference typeface and I'm again going to choose white and then

make both these lines left-aligned so that I can align them to the same position.

And that is how when you drag elements around on canvas it automatically gives you these alignment grids

so that you can more easily position it so that they are actually all aligned together.

And notice how big a difference that looks

just having it off alignment and then on alignment. It's suddenly just looks a lot more proper

right? Now I'm more or less done with my title page.

I'm going to move on to the next one which is going to be a page for selling the features of the hotel.

Let's start off by adding some images. And I've got some that I've already found before.

I've got a picture of a bedroom which I'm going to make it a little bit smaller like so and then I've

got a picture of a breakfast of some sort.

So you've got food at this hotel.

You're not going to starve.

That's pretty important for people to know.

And I'm going to size it so that it's actually the same size as the other one.

So I'm just going to put it on top.

Now the last one is going to be a pool.

So you've also got a pool.

You don't get bored if it gets too hot.

You can always just go into the pool.

This is turning out to be a great hotel

by the way, I really want to stay here.

Now the goal of our features page is to have three images which are probably going to be about the same

size.

So I'm actually going to need to crop this last photo so that I get rid of maybe a little bit of this

right edge but have it just about the same size as my other photos.

And now I need to resize each of these photos so that it actually can fit onto this page.

So I'm just going to throw them one on top of the other and resize them

so they're all the same size.

And now I can place them around this web page.

So when you move towards the edge of each page you can see this grid show up.

So I'm going to line up the left with the left side of the grid the right with the right side of the

grid and the middle right in the middle.

So now these three are evenly spaced apart and I can now add some more design features to it because

it's looking a little bit bland just as photos.

Now one of the easiest things to make photos look nice is to just jazz it up with a frame.

Now because all hotel is very modern, it's contemporary,

it's been featured in Vogue,

I want to make sure that the framing also looks equally contemporary.

So I'm going to find a circle and I'm going to put this circle around this square image which is going

to make it look quite nice and contemporary. And then I'm going to give it a background color like that.

And we've now framed our picture.

So now, all I have to do is just copy it and put it onto all the other images like so.

And now I've got three features.

You've got a bed, you've got food, you've got pool.

What more do you want? The next part is probably going to be some sort of explainer

right?

So add a subheading of these sections and the subheading is going to be something like you get beautiful

food, you have beautiful rooms and you have a beautiful pool.

So three things that we've got. And I'm going to left-align

each of these again so that I can make it aligned with the left edge of each of the pictures like this.

So all three of these pieces of text are on the same horizontal level and they're also vertically aligned

with the start of each image.

Now each of these will need to be designed so that they have the same typeface as what we had in the

title page so that it's consistent

right?

We're reflecting the same thing that we saw before.

So I'm gonna change that again to Glacial indifference and do the same for all three bits of text.

And now we can afford to increase the spacing in the text a little bit to make it look a little bit

more roomy. So I think I had 18

on the other one so I'm going to put 18 here as well and 18 here as well.

There we go.

So we've got all three bits of text and now all we need is just a little bit of body text. For the bod

text

I'm going to use a Lorem Ipsum. So I'm going to use one of these generators and just get some text generated

and I'm going to copy a little bit of it and put it into my design. Replace that text with this

and that's a little bit too much.

So let's make it a bit smaller. And we're going to have some text which is going to go just below this

section.

So it's still a little bit too much.

Let's get rid of the last sentence. That looks pretty good.

Now again we want to keep our design consistent.

So we're going to make sure it's again left aligned using the same font as before.

And we've now got a bit of body text which I'm going to further style by changing the color of each

of these.

So I want to go for maybe like a dark-grayish like one of these and the same for the body text.

That way it doesn't sort of stand out so much.

And I'm going to copy this

so that I put it on all of the other features.

Notice the alignment here.

I've got all the pictures aligned with each other,

all of these circles center-aligned with each picture,

I've got all the text lined along the left and this just makes the design look a lot tighter

and a lot more consistent.

And notice how with the layout I've tried to keep it interesting by having some pictures that break

up the text and making sure that each body of text is not overwhelming. It's not too long

like a big long sentence.

But instead it's short enough to be easily read quickly.

Now, the other thing you'll notice is that there's a degree of hierarchy that's being established here

right?

Clearly the thing that I really want people to know is that my hotel is called A Hotel.

But in addition, I've also got beautiful food being more important than the body text

that explains that paragraph.

And each of these images also being more important because, let's face it, most people look at the pictures

and don't read anything right?

So that's our second part of the website

done.

And we're now onto the last part which is going to be the contact page.

So this contact page I'm again going to search for maybe a photo of something that's quite fashionable,

contemporary, tropical.

Maybe we can just find a picture of a pineapple.

And this one looks pretty good.

Let's go ahead and position this photo so that it's the same size as the design.

And now I can move it up so that only the bottom shows up my pineapples.

So there we go.

We've got 1, 2 and 3 and the last part is just a contact me page. The contact me page is also

going to need some titled text.

Let's just call that Stay.

So when they want to stay they can take a look at this section. And we're going to again copy this style

that we had from before so that we can actually replicate it down here

and we keep our design again consistent.

It has the same theme, the same color palette, the same typography.

This is a little bit too big though. So let's make it a bit smaller so it fits onto this page.

And again I'm going to be consistent with our geometric shapes which is lending that sort of modern

feel. I've got a sort of rectangle, a circle, more circles.

So let's pick another shape from here. Maybe some sort of a hexagon. That looks pretty good.

Let's add the hexagon,

make it a bit smaller, we can maybe move our pineapples down a bit and change this so that it's white

and make it even a bit smaller.

I think something like that would do quite well.

So now the final thing I want to add is some sort of mailing address, email address, phone number, which

is going to go in here and it's going to be nicely aligned with this word stay.

So let's go ahead and take this word and make it right aligned so that this line pops up when I try

to align it like so and let's just make sure that it actually still fits in.

So maybe we have to move this text up a little bit, reduce the spacing a little.

I think a lot of times you do have to play around with your design just so that it starts looking good

to you.

You might have to shift things a little bit and be flexible with those rules that we've talked about.

So now all we need to make sure is that the word is right-aligned and our text is also right-aligned

so that we can actually line them up together so that they actually look like they're on the same vertical

alignment.

Now, if we can just mess around with the size of the hexagon and make sure that everything is still within

the hexagon and we've pretty much finished our design now. What did that take? Maybe 20 minutes. And

we managed to apply a lot of things that we've learned from User Interface design or User Experience

design, Color Theory and Typography to create this 3-page very modern looking website for A Hotel.

So at this point, there's a really cool feature in Canva which lets you just publish the website.

So if you click on this publish button and you scroll all the way down and you click on website then

you can actually select the Web style as standard and then open this as an actual web page.

Notice how it's placed my three pages together into an actual web page

and I can scroll down and also navigate to it through the navigation bar.

Now of course we don't have mobile optimization,

we don't have any code that has any functionality, we can't add javascript to it. But at least we can quickly

throw up a design, visualize it and share it with other people to see what they think.

And this is probably one of the best ways of building up your design muscle.

Just practicing again and again until you get to a point where pretty much unanimously everybody thinks

that your design looks great and people start asking you to actually build websites for them.

So study a lot of the websites that you come across,

the ones that you think look really good. And think about what makes them good and then try to take some

of those aspects along with everything you've learned in these lessons to create designs that humans

love.

So I hope you'll take a moment now to pause the video and have a go at creating your own hotel website.

So use the same tools that you saw me use on Canva and try to design a slightly different type of hotel.

What if it had to be a more traditional hotel that was around the time of Henry the 8th or something? It's

like some really old hotel and they want to show how decadent they are, how glamorous they are, and trying

to design a different type of website.

So pause the video, give that a go and then try to apply everything you've learned in this module into

that design.

And once you've created your design share this link that you can see at the top of Canva so that we

can all see your design and we can comment on how beautiful it looks.

So have a go at doing that and make sure that you let us know what it looks like in the comments below

and have fun doing it. Now I hope you really enjoyed this module on web design.

It's a little bit different from what you've been used to so far.

There's no coding in this module but instead we tried to get you to think about all of the design principles

that actually ends up creating beautiful websites, websites that people will love. And hopefully

you'll take these pillars and this knowledge through the next time you build your product or you build

your website and you'll apply it alongside with your code so that you have beautiful features and beautiful

interface.

Now once you've created your own designs and you've shared it with us then it's time to get back to

the coding and

we're going to continue tackling more web development. So for all of that and more,

I'll see you there.