The Web Design Process: A Step-by-Step Guide to My Approach

The web design process can often seem mysterious or overwhelming, especially if you’ve never gone through it before. But having a clear roadmap makes the journey much smoother. In this post, I'll walk you through the web design process as I approach it, from onboarding to kickoff, to launch, so you know what to expect when working with a web designer or web design studio.

‍

Discovery Call

The discovery call or some sort of formal meeting is the first step to any web design project. You could think of this call as a sales call though when done correctly it shouldn’t feel like one. The purpose of this call is to ensure that both parties are a good fit for each other before working together. I use this time to listen and understand the client's current web design challenges, confirm that I can solve them, and ensure the client’s budget is aligned with the costs to solve those problems. 

‍

Proposal, Work Agreement, and First Payment

After the discovery call, assuming both parties have determined they’re a good fit for each other I’ll send over two items before entering into a formal working relationship, a project proposal, and a work agreement. The proposal will include detailed information about the project–project scope, timeline, deliverables, and payment details. The work agreement is the formal contract that will outline how the project will be conducted. After the work agreement has been signed I send the client an invoice for the first deposit amount. Only after this is paid is the project scheduled and added to the calendar.

‍

Client Onboarding and Client Dashboard

To keep everything organized during the web design process, I use Notion as my go-to project management tool. Think of it as your project's home base—it's a one-stop hub where you can easily find all the important details about your site. Web design projects can get pretty chaotic with all the files, images, and emails flying around, so having everything in one place keeps things simple and stress-free for both of us. On your personalized Notion Dashboard, you'll even find a short video that walks you through how to use it, what to expect throughout the project, and any tasks you'll need to handle before our Kickoff meeting. We’ll use this dashboard from start to finish, making communication and feedback a breeze.

Project Kickoff

Before we dive into your project, we’ll have a kickoff meeting to make sure we’re all aligned. This is usually a relaxed but structured, hour-long chat where we’ll set clear expectations for things like communication and timelines. I’ll ask a few key questions to get a better feel for your project and, more importantly, to understand your business and what makes it tick.

‍

Sitemap Creation

A sitemap serves as the website’s blueprint. It's a visual representation of all the pages your site will contain. Depending on the size of your website I’ll have a sitemap draft that we review over in the kickoff meeting. For larger sites, we may have a follow-up meeting to finalize. Think of the sitemap as an overall blueprint for the website. While we can still make smaller adjustments to the website structure down the road if needed we’ll want to get this 95% dialed in before moving on.

‍

Website Wireframe

Just like the sitemap is a blueprint for your entire website, a wireframe is a blueprint for each of the unique pages within it. At this stage, we’ll have a black-and-white preview of the different sections on each page so we can understand the basic flow of the website before we get into adding images and styling the website.

‍

Design Direction

Once wireframes are approved, we move into the fun part—design direction. At this stage, I typically present two distinct designs of the home page. Having two designs available to present allows us to explore the different design directions to be taken. This also allows you to choose what aligns best with your brand before we apply the design direction to the rest of the pages on our wireframe. Keep in mind, that all the options presented at this stage will follow any established brand guidelines that you may have. 

‍

Full Website Design

With the design direction established it’s time to apply it to the remainder of our pages. Each of our unique pages will be designed based on the chosen design direction. To ensure everything looks good before building the project in Webflow we’ll have up to two rounds of revisions. This ensures everyone’s feedback is heard and any final corrections are made before development begins.

‍

Webflow Development

Now that the design is finalized, the Webflow development phase begins. Depending on the size of the website this process can take a couple of weeks to several. This is also the stage where interactivity and animations will be added to bring the website to life. Once the website is fully developed in Webflow we’ll have an opportunity for an additional couple of rounds of feedback before launching the website.

‍

Testing

Before launch, I conduct a thorough quality check to ensure everything is working perfectly. The quality check consists of making sure all SEO terms are in place, all buttons and links are functional, and all redirects have been implemented as well as several other items to make sure the website is technically sound and ready for the world. If you want to see my full quality control checklist you can download the checklist here.

‍

Launch

Finally, the website is ready to launch live on your domain. After completing all of our quality control checks and testing I’ll help you get the website live on your domain. 

‍

Support and Next Steps

Just because your website is live doesn’t mean our journey ends there. I want to make sure you have the tools for maintaining your website now that it’s live. To make sure this is the case, I offer a training session at the end of the project to ensure you’re comfortable managing and updating your site. These sessions cover everything from updating text and images to adding blog posts, and I’ll record the session so you can reference it later.

‍

If you’re not feeling up to keeping your website updated on your own I’m also happy to provide hourly support when needed as well.

‍

Wrapping Up

There you have it, my approach to a web design process. Now you have a better understanding of the web design process and what to expect. Have any questions? Ready to get started? Feel free to reach out, and let’s create something special together.

‍