A Simple Web Design Process Freelance Clients Will Love in 7 Steps

Having an efficient web design process that you take your clients through on every project is an essential part of being successful as a freelance web designer.

But, sadly, most folks approach every project differently without any repeatable system. They kind of shoot from the hip with everything.

Maybe a wireframe here…

A bit of a mockup…

Ask for some feedback…

Then see how it goes…

Unfortunately, that’s a recipe for upset clients and a lot of frustration on your part as a freelancer.

Create A Web Design Process That is Intentional and Keeps Clients Happy

You have to have a system that is easy to follow as a freelancer and helps reduce ambiguity in the mind of the client. Not only will it keep you from going insane with the projects you’re working on, BUT it actually serves as a selling point to potential clients.

Here’s the catch: you won’t stumble on a good web design process by accident. It takes some intentionality AND a bit of adjustment as you go.

The good news is it’s not rocket science.

Trust me, if I can figure it out, you can too.

Self-Made Web Designer Podcast on Web Design Process

This week on the Self-Made Web Designer podcast I talk to Evan.

Even is a product designer by day BUT he’s starting to pick up some freelance work in his spare time. AND, rather than going in blind, he’s trying to be strategic about how he’s taking his new client through a project.

So, we chatted a bit about the best way to go about that. Here are a few key takeaways from our conversation.

Start Big Picture and Work Your Way Down with Your Web Design Process

You always want to start with a big picture and then keep whittling away until you have something really tangible to give a client.

In other words, never start off with a detailed mock-up of what the site is going to look like. That’s almost always a recipe for disaster and will most certainly result in A TON of revisions.

Here’s a simple web design process that works for most projects.

1. Website Goals and Purpose

Start with what the client hopes the website will accomplish for them and/or their business.

Ask them what the goals of the website are.

• Are they hoping to get more leads?
• Do they want to set themselves a part from their competition?

Those questions will help to determine site functionality and overall user flows.

It’s tough to know if what you do for the client has any level of success without them. You might make them a prettier version of a website.

But, I don’t know of any clients that have taken a picture of their website, framed it, and hung it over their fireplace to appreciate with their families.

Don’t assume anything here.

Ask as many clarifying questions as you can. If you need some questions to start with use mine:

2. Mood Board and Sitemaps

Now that we’ve got a general idea of what the client is hoping the website will accomplish we start getting a tad bit more practical.

At this point, you start finding some imagery be it graphic design elements or other sites that might work well for what the client has said they liked and hope to achieve with their site.

I typically like to create a mood board that puts all of those images together to help the client have a good understanding of what I’m thinking.

I also create a sitemap or list of pages the website will need to have at this stage.

3. Wireframes

It’s time to create some very lofi mockups of the website. AND, when I say lofi I mean VERY lofi.

You don’t want to have any images or colors JUST placeholders for where images will go, text and the general layout.

There are a bunch of great tools out there for wireframes: Figma, Sketch, Adobe XD are all great tools. What you use will largely depend on your preference.

It is important to think of font size at this point AND even have shades of white and gray to represent changes in color from one section to the other.

BUT, again, you’re trying to get the client to think big picture before having to make a decision on the actual design.

The reason for that is if you throw too many decisions at a client it can be confusing and might cause them to say no to EVERYTHING rather than the ONE thing that’s bothering them.

One thing to remember on this step is you want to be sure that your client knows EXACTLY what they are signing off on when they approve a wireframe.

OTHERWISE, you might get to the design portion and have to backtrack a bit. SO, make sure they understand what it means to “approve” a wireframe.

4. Design & Revisions

After you get wireframes done it’s time to actually build out the pages. The layout with fonts and image placement will likely all stay the same.

All you’re doing at this point is giving life to the wireframes you already created. Then comes the revision process.

This can be a source of pain for a lot of freelancers BUT it doesn’t have to be.

When you have clear instructions on how a client needs to give you feedback as well as a useful tool like Markup.io it can reduce the amount of frustration both you and your client experience.

5. Development

Once you’ve finished the design and revision process it’s time to start building!

Obviously, this will look a lot different depending on what you use to build your websites. BUT, the concept is basically the same.

You take the designs you made and you implement them somehow on the web whether that’s through hand-coding them or using a tool like Showit or Webflow.

6. Pre-Launch Checks

Just like every space shuttle launch has a pre-launch check that everyone goes through, you’ll need to have a list to make sure you’ve covered all your bases before you switch over domains to point to your new website OR migrate the old site out.

Here are a few things that I’ve messed up on before:

• Not thinking about what time of day the website had the most traffic
• Forgeting to make redirects for pages that were being taken down or changing URLs
• Not backing up old sites in case something went wrong and we need to revert back

The point is don’t just hit the launch switch and hope everything goes well. That leaves you open to all sorts of problems.

7. Launch and Client Off-Boarding

Once the site has been launched you’re not through yet!

Use the final moments you have with your client to evaluate the whole process with them.

• Ask them what they enjoyed about the process
• Ask them what they could have done with out
• On a scale of 1 – 10 have them evaluate your performance

Doing this will help you to refine your process over time AND it’s a great way to get testimonies to display on your portfolio.

Your Web Design Process Will Adjust Over Time

As time goes on you want to tweak your process when things come up that throw things off.

There isn’t a one size fits all system for every web designer. You’ll need to figure out what works best for you during different seasons of your freelance business.

But, eventually, you’ll have a well-oiled machine that you love and keeps clients happy if you’re intentional and keep working on it.

The best news is when it’s time to hire someone it’ll be easy to onboard them because you’ve already got a perfect web design process all worked out.

[fusebox_transcript]