Skip to main content

I would like the logo to be much larger and in the middle. And the menu, can it be made more eye-catching and below the main section? I'm free tomorrow, can we schedule another meeting?

Average Client2 hours before project completion

We must guide the client. Not the other way around.

The Web Process: Why is it important?

It’s normal not to have a clear process at the beginning. Without it, the client will lead us down endless paths in search of something they don’t even know.

The web process allows us to guide the client with confidence, know where we’re headed, and anticipate challenges at each stage.

Having a process helps us to:

  • Know where we are and where we need to go.
  • Avoid getting lost in an endless maze.
  • Easily guide the client and reach the goal faster.
  • Achieve a better result.

Think of it this way. You are your own employee, and every hour is costing you money.

Image by vwalakte on Freepik

1. The Meeting

To start, we can coordinate a meeting, either physical or via video call, to understand the project and the client. During this time, we will gather all the information we can about the project and our client. We must listen more than speak.

Some questions that will help us are:

  1. Why do they want a website?
  2. What do we want to achieve with the website?
  3. What should the site contain, what should we find in it?
  4. What are the most important products and/or services?
  5. What sets them apart?
  6. Who are their competitors?
  7. Do they have reference websites?
  8. What visual style are we looking for? Do they have branding? Logo? Colors?
  9. How does their company/project operate?
  10. How did the company come about?

For this, it is essential to have a web design form that we can use as a guide through the meeting. In the web form, we should add all the information we need to collect to create the website using the above questions.

2. The Proposal

In this stage, I analyze all the information and create the proposal through a PDF containing the timeframe, the project, and the price.

You can look for examples of web design proposals on the internet. Find one that specifies how long the project will take, the stages, and the price. Soon, I’ll design one that can be used as an example.

We only move on to the next step if the client accepts and makes the first payment.

How much time to dedicate before project acceptance?

As little as possible.

Spending too much time researching and designing before charging the deposit is a common mistake when starting this work. I once created a complete site mockup without having the project accepted. Mistake. It’s best not to spend more than 30 minutes / 1 hour analyzing the project and creating the proposal.

And the meeting?

Personally, it worked very well for me to have the meeting. I spent time getting to know the client and the project and showed them my work. This took about 30 minutes, but it had a very high success rate, and the project almost always materialized.

Practical Example

A Hair Salon contacts us. We have the meeting, and I come to my office to design the proposal.

  • Analyze hair salon websites. (5 minutes)
  • Create the site structure: Home page, Gallery, About Us, Contact, Reservations.
  • Design the proposal in PDF. (We’ll have a base one that we only need to modify.)
  • Send the proposal by email.

3. Strategy, Sitemap, and Wireframes

Strategy

At this point, I dive into the strategy; we’ve received the deposit, and we must start working to achieve the goal with the best result within the established time.

Let’s analyze competitor websites, niche websites in other countries, and search for sector benchmarks. With this, we’ll quickly know what works and what doesn’t.

Sitemap

After analyzing competitors, client references, and other sites, we create the Sitemap. This is essentially the site structure. For example, for a hair salon, the sitemap could be: Home, Team, Services, Gallery, Book Now, Prices, Contact.

I prefer to coordinate a 15-minute meeting to confirm the sitemap. We’ll explain to the client the pages we’ve planned for the site with the objective of each one.

Wireframes

Once we’ve confirmed the site’s pages, i.e., the sitemap, let’s create the wireframe.

The wireframe is the skeleton without images, text, or site colors. For this, what works best for me is using pencil and paper and creating it only for the Home Page.The Most Important

Let’s imagine we have to build a house.

Spending time deciding on the color of the house when we don’t know how many rooms it will have, or how many environments it will have, is not efficient.

We can spend days deciding which image looks good or if we can achieve an incredible function that we saw on a certain site. In web design, finalizing details can take a long time, so it’s better to make sure that we are painting or furnishing an already built house.

It’s better not to start designing the online site without a clear structure.4. Hosting, WordPress, and Construction Mode

Hosting

Only at this moment do we look for hosting, install WordPress through Cpanel, and put the site in construction mode.

As for hosting, I use Veerotech. Of all the ones I tried (and there were too many), it was the best in terms of price and quality. It is only necessary to know English to take advantage of their incredible customer support.

Other hosting services I used:

  • Bluehost: Good but a bit expensive for what they offer.
  • InMotion Hosting: It has been my hosting company for a long time. I ended up changing because the speed they offered in the base service was not enough.
  • DonWeb: It is the most well-known in Argentina. It is affordable, but the speed was bad, and that’s why the sites took a long time to load.
  • Hostinger: Regular. I didn’t have an incredible experience using the service.

Install WordPress

To install WordPress, I use Softaculous in Cpanel. The important thing in this case is to use strong passwords of at least 12 characters.

Construction Mode

There are many plugins to put the site under construction. To do it quickly, I usually use a plugin that locks the site with a password. Then, when you have time, you can look for one that allows you to design a “Under Construction” page. All in good time.5. Choose the WordPress Theme

At first, I used to go to Themeforest and look for themes that I liked for the specific niche. Then, when I found the tool that I felt most comfortable with, I didn’t need a different theme for each project.

These are the most well-known themes and visual builders:

Elementor: The most popular for its free version. Although it takes time to learn how to use it and get used to it, it is relatively easy. I don’t think it’s the best, but it’s useful to know how to use it.

Divi: It’s the first one I used, and it helped me start working on this. It is very intuitive and complete. It’s worth knowing.

Specific Themes: On Themeforest, you can find thousands of themes with pre-made templates. You install the theme, use the one-click install, and you’re done. You just have to adjust images, texts, and colors.

Important

There are no easy paths, surrounded by beautiful landscapes, and the sounds of birds in the background (Well, for this, you can use a Spotify playlist, but I assure you, you’ll end up hating those birds).6. Show the Homepage to the Client.

If the client confirms the design of the homepage, we have 80% of the project ready.7. Design the Rest of the Site.

Find a strategy to get the text, images, and everything else you need. The best for this is usually to create a drive where the client uploads everything they have.

We will need:

  • Branding: We must have the brand manual, logo, fonts, etc.
  • Images: We use pexels.com and photos that the client has.
  • Texts: If the client is great with it, if not, use ChatGPT and then ask for approval. If they want to change it, they will send an email with the correct one, and we just have to change it. If it takes 2 months to do that, it’s no longer your problem.

 8. Test, Test, and Adjust.

  • Click on everything, each button must work and link to where it should.
  • Analyze the text for coherence.
  • Set up the forms and make sure they work. The client must confirm that they receive the emails.
  • Test the mobile and responsive version. It must look good on phones, laptops, and desktops.
  • Seek the opinion of other designers. Write to me at santiago@livingofit.com if I can help you with this.

 9. Round of Changes

When you send the site to the client, they will ask for changes. Don’t get upset; it’s normal and almost always necessary to improve the result.

They shouldn’t ask for structural changes; the structure was accepted in previous stages. Explain that they had already agreed on that structure and guide them, explaining why it’s the best. Some things can be changed, like colors or the location of sections, which shouldn’t take more than a few hours.

It is essential to know how to negotiate and communicate. There is a good chance that the client is unsure and wants to change everything. Show them that you have trained to know what is best for their company and the set goal.10. Delivery and Review

It’s time to remove the Construction Mode plugin and open the doors of the business.

Make the client happy with the result, make them want to show the world their new website, make them love it, and love you for it. This will bring you new clients and good reviews.

Review

Ask them to leave a review on Google, Linkedin, or wherever. This is what will get you the next client. You probably already have a Google My Business profile, create a review link and send it to them.This post continues under construction and will continue for a long time.

If you need help or have any questions, write to me in the form below or at santiago@livingofit.com

Santiago Tonelli

Web Designer/Developer.
I'm here to help you overcome challenges and find success on your digital journey. Feel free to contact me at santiago@livingofit.com for any assistance you may need.