website design

Website Design Course Module 03 – Individual Website Page Design & Templates

Website Design
Spread the love

In this module, our expert will teach you about the actual  website page design process.

So get ready to take some notes and let’s jump right in. All right, So we’re gonna be using Wix to create this website home page today.

We’re gonna go through the whole design process so you can see how it works to start with a template and replace everything and make it your own.

But I want to remind you, before we get started that it’s all basically the same whether you go and use Weebly or Wicks, who are a dragon drop builder inside of WordPress like thrive architect, the basic workflow.

The basic functionality is always gonna be the same.

Sometimes a terminology might change where the buttons are low, kid might change.

But the vast majority of what you’re doing is not super unique.

Toe one platform so you can apply what we’re doing here today to pretty much everything.

So we’re gonna start here with Wix.

When you choose to create a new website, it gives you a couple of categories to choose from.

We’re gonna click on business, and it brings us to the wicks 80 i versus the weeks editor.

I do want to mention weeks 80. I is pretty cool.

It’s basically a robot that spits out the website for you.

However, we’re gonna go through the actual design process here, so I’m going to go with choosing a template for the weeks editor.

The standards old fashioned way.

Now, I actually like this one right here.

This is a nice one.

We’re gonna go with this one here.

Don’t worry about the image.

I’m not saying I like the image, because we’re actually gonna change that.

I just like the layout of this one.

If you wanted to, you could click View, and that would show you a big demo of the Web page.

And all are the website, and all the pages were just gonna hit edit, which will bring us right here to our new template.

Now we’re gonna do is we’re gonna take this.

Looks like this is for life coaching, personal life coaching.

Everybody is a life coach these days.

Today we’re gonna be a men’s health coach.

Gay men’s health coaching.

That’s what we’re gonna be doing.

We’re gonna go ahead and change what will leave the name of the way it is.

There’s nothing wrong with name Alan Johnson.

We’ll go ahead and change this to men’s fitness coach.

There’s a that and then down here, we’re gonna delete this.

I don’t think we need that.

We’re gonna grab this button, bringing a little bit further down.

As you can see, it’s just drag and drop your manipulating what’s already there.

Just manipulating the templates.

We’re gonna paste the words Men’s health coaching right there.

Good.

And now we need an image back here.

Now your best friend with Web design for imagery is gonna be a good stock photo site like Adobe Stock.

Okay, like Adobe stock, there’s plenty of them out there.

I like Adobe stock because you get some good bang for your buck.

Let’s go ahead and type fitness man, since we’re doing men’s health coaching and we’ll just grab this one here really clicked License now download in a moment.

And while that’s downloading were to come on over here back to the editor, we’re gonna work on changing this background image, so we’re gonna click on change strip background and looks like our image just got done.

Downloading down there were like over here to image.

Then that would bring us to our media folder.

We’re gonna click on upload media upload from Computer.

We grab that image and we’ll give it a second to upload here.

Two weeks for us.

All right, so that’s in there.

Now we’re gonna hit, change, background and there we go.

Now.

One thing that we want to do with a background image if we have text in front of it is always going to be changed.

The A passage.

So it’s good and increase the color behind the image.

Teoh White Don’t trump the opacity.

Oh, down to about 60%.

That way you can still see the image.

Powerful limits right gets the point across, but the text sort of pops out quite a bit better.

So let’s go and close this.

Let’s drag things around a little bit, make this button a little bit bigger.

That’s where clients can book their appointments, right?

And then where you come down here to the about me section and I don’t see any reason to change this photo here, but obviously you would in real life.

I’ve pulled a Martha Stewart here.

I’ve already got all the text that I need for all these different text elements on this page.

Control V. Put that in there.

I have a passion for serving my clients and meeting them exactly where they are in regards to their health.

Etcetera, etcetera, etcetera.

You can pause and read that if you need to.

It’s just something I made up.

And then I want to add two more things to this page.

I think it’s a good idea toe.

Add two things.

That sort of detail to people, how they’re going to deliver the service.

So I want to create one thing that says Step one Nutrition and another little row that says Step to fitness, and we’re gonna have some powerful images behind each of those as well.

Back over here, click on this bottom foot area arena.

Bring that downward a little bit for some empty space.

This is just the default background that came with the template were using so we can ignore that.

Don’t worry about that.

And we’re going to add a new row, which is actually just called a strip of photo strip here inside of Wicks.

Gram this and we’re going to replace the image first.

Now, what we want is a image here of food came nutritional, healthy eating.

So it’s coming over here.

Let’s take that in. Actually, before we leave these results, I think we’re gonna end up using one of these later.

This one here looks good.

There we go.

And that was coming.

Look for, uh, healthy food.

See what we get from Adobe stock here.

Lots of good images we could use.

This is actually making me hungry.

Let’s come on over here and grab.

Uh, this one here gets that a a few minutes to download.

Come over here back to the editor, and let’s get ready to change this background image just like we did earlier.

Rank over here, click on image.

And just like last time, we’re gonna compare to upload Media.

We’re gonna grab that image from our computer, and we might as well grab both of the new ones since we’ll be using that of the one later in the step to strip.

Give that a few seconds toe upload, and there we go.

So let’s grab this one quick change background to insert that background has been changed.

Now Let’s close this and we’re going to replaced this background with just a white, just white good, and we’ll find that text again will change the color of the text to black.

And let’s go ahead and call this step one looks nutrition.

Drag this on fits a little better up here.

Take this paragraph right over here and I’ve got this pre written already over here as well.

Copy this from my note pad file.

Come over here and paste that there, and I think that fund could be a little bit a little bit bigger.

There we go and go and get rid of the read more button because we don’t need that function right here.

Right this second.

So that’s one strip done.

We’ll click down here on the footer, give ourselves some room once again drag this baby down here and we’ll click here and we’ll add another strip to the page.

This time, I think we’ll do sort of the opposite will put the text on the left and we’ll put the image on the right.

So here we go.

Drag that foot area back up to the bottom of that strip will come over here will change this text here too.

website design

Step two Fitness.

And just to make sure we’re staying relatively consistent here, we’ll make that all camps.

Or just that.

So it fits.

Step one.

Nutrition, Step two, fitness.

We don’t need this little icon here.

Although it is cool.

We’ll bring that up here and grab this paragraph.

Place it right here.

Give ourselves some room for this next pre written snippet that I’m gonna put in there.

Control V. Corvis Program is fitness together will work to assess etcetera, etcetera, etcetera.

And then we’ll come over here, will change the column.

Background image.

What settings?

Hopes not settings.

Excuse me.

I will go to image first and we should already have that image in our library.

We do change background and that we’ve got the weight lifting image right there next to step to.

So I think that’s a pretty cool men’s health coaching website.

Here’s the fundamentals.

You get a template again.

This works whether you’re using Thrive architect or any other WordPress.

Plug in works if you’re using weebly works.

If you’re using Wicks, and all you’re doing is coming in your changing background images changing foreground images changing names, titles, paragraphs, headlines, all that good stuff.

That’s all you’re doing in Web design, all right.

Less than 1% of Web designers will ever, ever, ever engage in the practice of creating a website literally from scratch.

Almost nobody does that.

You don’t need to.

You have these awesome tools that we just mentioned, including this one weeks that allows you to just create fantastic looking websites without any need for actual coding or any of that good stuff.

Let’s click over here to preview to see what this actually looks like.

Without all the Web design interface stuff.

This looks pretty good.

This is a good looking website.

I’d hire this guy s so as you can see what design Pretty easy.

Pretty straightforward.

Guys, you don’t have to be.

This is, ah, common misconception.

You don’t have to be a Web developer to be a Web designer with Web design.

All you’re doing is front and stuff and making it look pretty, making it convey than necessary messages that you need to convey in business to your site visitors.

So that’s about it.

Keep that in mind.

No web development.

If you’re doing Web design you just want to be focused on front and stuff.

And there’s a lot of tools that help you to do that, including WordPress plug ins and builders like Thrive architect and standalone Web design platforms like Weeks and Really.

Related eBooks

Leave a Reply

Your email address will not be published. Required fields are marked *