3.3 Building a Website on Webflow Pt.1

We’re finally here. We’re going to get into building a full blown website with you. We wanted to show you how simple it can be to build a website, and what better way to demonstrate that than by building one together?

‍

Make your Webflow account here: http://bit.ly/lancify-webflow

‍

In order for us to do this, we need to have a business or brand for you to actually build a website for. So we went ahead and created a whole fictional brand just for the sake of your learning.

 Welcome to Lancify Abroad!!

 Lancify Abroad is basically a study abroad consultancy that helps students get into their dream universities abroad. Like most study abroad consultancies, it helps students with stuff like university selection, entrance exam preparation, the application process - you know, the whole package.

 Now Lancify Abroad needs a website and we are going to build them one. But, what do we do first? Remember the last chapter where we taught you to understand the business, its history, mission, audience, etc..?

 Well, that's exactly where you start. Before you lift a finger to do any web design or building work, you always start with the foundation, which means understanding the business. Now let's assume we've gone through that phase, and this is what we’ve come up with:

 Lancify Abroad is a study abroad consultancy that works with students to get them into top universities across the world.

They offer 3 services: Student Counselling and University Selection, Preparation for entrance tests like GMAT GRE, and Application Building Assistance.

They are targeting high school, undergrad and grad students looking to study abroad for their higher education.

 And then you have purpose. What is Lancify Abroad’s website looking to achieve?

- To show the different kinds of services it offers.

- To invite students to apply for a free one-on-one counselling session.

- To build credibility and trust about the brand. 

And to answer any questions that students might have about the business.

And there you go – now you have a brief. Side note: This is a very very brief brief. We've taken the liberty of making this 7 point brief because one, it's not a real business and two, we literally built it for this course. In real life, when businesses approach you, doing those initial meetings to understand the business will prove to be crucial to how well you can build them a website. We expect you to have a 7-page document with your understanding of the business. Okay, we're kidding but hey, do the work. There are no free lunches. I mean there are some, but not in this industry.

Now back to our favorite fake business. Now that we have this understanding of Lancify Abroad, let's head over to Webflow. Really hoping you feel like it's the first day of school as you open webflow.com. This is the template section of Webflow that we walked you through in the last episode.

Now that you have a good idea of the business, what you need to do is select a template. And there are literally tons for you to choose from, so where do you start?Well, you could just browse around to see if you find something but what might help you is if you head over to this ALL TAGS section on the left. It will take you to the various categories of templates.

Now based on the kind of business you are building a website for, you can actually just find a template from that category.But there are two important things for you to consider while picking a template. 

Think of these as important and maybe slightly intense disclaimers.

Unless the website you are building is an e-commerce site, don't pick an e-commerce template. Now if you have been hiding under a rock for the last 10 years, an e-commerce website is one that let's you sell products online. Like this one! So back to the point - unless you are building an e-commerce store, don't get an e-commerce template. There are lots of reasons that we won't get into right now, but just trust us. Don't do it. 

Next, unless you are building a website for a blog, we recommend not using a blog template either. The reason for that is, blog templates are primarily meant to do one thing - host the blog. So if you want to build a website for a business that has a blog, you can always find a template with a blog section rather than get a separate blog template and end up having to build a lot of the other pages from scratch.

In the event you become a Webflow ninja in no time, you'll soon be able to build whatever you want, on whichever template you like, and the above two points will become void. But until that day, how about we stick with it?

Alright, back to Lancify Abroad. We've looked at a bunch of templates and we've picked one that works real nice. And the best part is, it's a free template. That way, you can pick this template and build a website with us right as we go. 

In fact, we’d love for you to do this for yourself. For real. So heading over to the free templates section, the one we finally picked is this. Let's do a quick preview.

Use this link to make your account: http://bit.ly/lancify-webflow

This is what the template looks like. It's a really clean and neat template with nice sections for us to work with. It also has 3 more pages with different layouts. That gives us more room to tweak and make this website our own. And the final reason we really like this template is, it also has a blog. That really makes it quite robust, you know.

Now here is what we are going to do first, we will look around this website and see how we can rearrange it to make it our own. It's like moving into a furnished house, but now you want to change things around to make it more you. And that's exactly what we will do here.

We're going to go through this whole template and decide what we want to keep, what we want to change and what we want to do away with. Let's get started.

This first section on the homepage is really important. It's the first thing that visitors are going to see. We can change the background image to showcase something related to universities and then change the title and the subtitle here.

And the button will change to get students to take that first free session. As we go down, this section here will work really well to explain a bit more about Lancify Abroad and tell students why they should choose this over any other service.

Now this section part with this large image and text below isn't really necessary. So let's remove this.Going further down, we can use this section to talk about what's special about Lancify Abroad. We could use 2 images and change the text here to talk about it. 

So let's keep this part.

An important thing to note here is that, you might want to add a third point here or change the section a bit, and that's totally possible. We'll show you how you can do that when we go into building the website. So don't feel like you need to be restricted to this exact design.

However, to start off we're going to keep it simple and see what we can use as much as possible. We can do away with this text here. And, we can keep this text and change it to push students to sign up for free sessions one last time.

Don't worry about the footer, we can come back to change this later.

And there you go! You have a plan for how we can tailor the homepage to our needs. Let's go back up and check out the other pages. Moving to this features page, let's take a look at what it's like.

As we scroll around, we see this page is more about showing the user why this particular business is good and why they should choose it. So what we can do is, we can change this page to a WHY Lancify Abroad page. That way we'll be able to use this page to tell students why they should go with Lancify Abroad for their application needs.

Again, we can change this background to an image of a university or a student and use the title and subtitle to talk about what makes Lancify Abroad special.

Every business has a brand message that talks about what sets them apart from the competition. That's exactly what we are going to do here. As you move down, we can use this paragraph here to elaborate a little bit more about Lancify Abroad  

And these tiles here with the images can also be used to showcase the different features of Lancify Abroad - stuff like experienced counsellors, excellent track records, top university placements, etc. This section could actually be very useful.

When we come to this part with the image, we can use this to push one of the main features of Lancify Abroad. It could talk about a big milestone of the brand or a specific feature that would get students to sign up.

 And finally, we can do away with this call to action section.

 Let's move on to the third page. This is the premium page and is used to talk about the service of the brand. We can use this page to dive a bit deeper into the 3 kinds of services that Lancify Abroad provides - Counselling, Test Preparations and Applications.

 As you come down, you now begin to see similarities in the pages - like this top para and this large image. We can use the paragraph area to talk a bit more about the 3 services but we don't really need this large image and text below. So we will do away with them. Next comes this testimonial section, which would be a good addition to the website. So let's keep that and add a testimonial here.

 And then as we go down, we can try and use these image and text blocks to talk about each individual section. We will only need to add a third image and text block because there are already 2 of these here. Now that should create a good services page.

And finally we can keep this Call to Action section.As we walk through the rest of the website, we will go and find sections, image and text blocks that we can use and tailor to our needs.

A question you might have at this point is, how would you know what to use and where? As you begin building these websites, you'll start to get a fairly good idea of what to use where. The more websites you build, the easier it will be to have ideas around different sections and layouts.

You just have to trust yourself to come up with creative ideas and navigate these page layouts to tailor websites according to your clients' needs. In the beginning, we recommend trying to use the default layouts as much as possible but as you go forward, you will get comfortable with making changes and tweaking these sections to do exactly what you want them to do.

So once you have gone through the whole website and made a plan for how you are going to use the various sections and elements in unique ways, you now need to go back to your client and get them to give you this content in exactly this format.

You could write the copy yourself but if they have an in-house copywriter or maybe a freelancer, send them this template and tell them exactly what you are looking for. You'll also need to get the client to source or purchase the different kinds of images you’ll need to use in the website.

Once you have your hands on all the content and images, you are ready to actually building your website. And that's exactly what we are going to do in the next episode.