web design process featured image

A Step-by-Step Web Design Process – Made To Impress Clients

Having a clear, structured web design process you can execute repeatedly is what sets apart the average agency from the type of agency that can justify their higher prices and clients truly enjoy working with…

Web design clients often won’t be entirely familiar with what the web design process looks like. They often imagine it as the simple technical process of developing a site, while quality web design really is a lot more than coding and putting a number of elements on a page.

Simply put, having a user-friendly site that looks sleek and modern is important as the end result, but ensuring that you get there by following certain processes is equally important. Experienced web designers know that the foundation of any successful project is not only understanding their clients’ needs but also understanding their clients’ customers’ needs and ensuring that the end product – the website – caters to its intended audience…

Here are 8 simple steps that are absolutely fundamental to a web design process and workflow that is enjoyable for you and your clients:

  1. Identifying the key goals: Where you work with clients to determine what they would need for them to say that this project was a great success. What is the goal of the site? Do they really know what they need?
  2. Defining a clear project scope: Once you know the site’s goals and what it absolutely needs to do for your client and their customers – ask yourself, what is this going to take?
  3. Leading with sitemaps & rough wireframes: Once the scope is well-defined, start digging into the sitemap, defining how the content and functionality will help the website accomplish all of its goals.
  4. Writing content: Now that you have a wireframe, it’s time to either start working on content for the site or start collecting this from your client. Delaying this will lead to more revisions, it doesn’t need to be perfect but you should have an idea of what you want on every page…
  5. Designing the website: With a clear idea of site architecture and some initial versions of content in place, start building out the brand’s identity + start designing the site itself. If you are prototyping/designing in something like Sketch first, then you don’t need to do every single page. Do some of the key pages so that the client can review and approve the general approach before you dive into developing the site.
  6. Develop the site: And naturally, now that you know the client is happy with the mockups you’ve presented them, it’s time to start developing the site. If you chose to design right in the browser, then you’ll have skipped right over step 5 to here…
  7. Testing: Make sure absolutely everything works, test on multiple devices, and perform an initial crawl to ensure there are no broken links, etc.
  8. Launch MVP: Once the initial version of the site is ready to go, it’s time to launch your clients’ site!
  9. The 30-Day Post-Launch Period: Don’t just leave your clients hanging once they sign off on a project. Include a 30-day post-launch period where you can address some of the minor changes and other things that come up after, this also acts as a trial of what a care plan from you would get them.

Identifying The Key Goals

The very first stage is the one where you’ll need to work 1:1 with clients to determine what they would expect for them to be able to consider this project a great success. In order to do this effectively, questions you should ask could include the following:

  1. What is the main goal you want this website to achieve?
  2. What is this site’s primary target audience?
  3. What is wrong with your current website? (if they have one)
  4. What is your product or service’s unique value proposition?
  5. Are there any design elements that you’re certain you want?
  6. What similar or competition-owned websites exist (if any)?

It is very crucial to have an answer to these questions before you even start working on the website. Not doing so may create confusion further down and lead the whole project in the wrong direction. Once you have all of this information, it’s also your turn to do some research into competitors and your clients’ business. Knowing the market you’ll be creating a website for is really going to help you understand why you’re doing certain things and how exactly you can reach certain goals…

This is also the part of the client engagement where you’ll start to realize whether the client really knows what they need. Oftentimes, they think they do but lack the proper research/objective data to support why they think something, in particular, would work really well on their website. This is something that you need to keep in mind for defining the project’s scope, which we’ll cover next…

Defining A Clear Project Scope

The next and perhaps one of the most important parts of running a highly profitable agency is agreeing on the scope of the project.

Any web agency that has worked with clients knows that one of the most challenging aspects of this cooperation is dealing with scope creep. To put it simply, scope creep is what happens when your clients come up with extra work requirements that were not agreed upon in the initial plan.

Adding small bits here and there can really help improve the project’s overall quality. However, when all of these small and seemingly easy-to-make changes do seem like they will take you little to no time at first, they can become an actual problem if your client keeps them coming. By the time you know it, you could have so much more work on your hands, it will take you a couple more weeks (and sometimes even months) to finish it.

Nobody wants projects that drag on for months.

[cboxarea id=”cbox-04g5L8Jg2pOy5hKO”]

This is why setting a clear scope from the very beginning should be a priority. If you don’t have these things sorted out with your clients on time, the project may become unrealistic at some point…

Leading With Sitemaps & Wireframes

Now that you’ve defined a clear scope & know what’s going to be included in the project, it’s time to start dissecting every individual piece of work. What pages is the site going to have? What does the client want on each of those individual pages, etc?

We recommend using Octopus.do, a lightning-fast visual sitemap builder for this that allows you to roughly track what each page is going to include as well…

Figuring out everything that you’ll be doing from the page-level using sitemaps ensures you not only have a general picture of the site’s architecture but also have a clear start and endpoint in mind.

Next up, create a draft wireframe. Wireframes are basic blueprints of what your end result site should look like. The goal of a wireframe is simply to plan the basic layout of your page (the frame without any visual design or content – i.e. Hero area, image, three-column row, etc.)

Far from being a final version of your site’s design, wireframes give you a general idea that you can refer to when actually designing so you don’t need to keep referring to emails from clients about each page.

Writing The Content

Having all of the above set up, it’s time to talk about the creating of the actual site content. The content on the site’s key pages should be the driving force behind all user interactions. It turns visitors into readers, moving them closer towards fulfilling the goals you’ve set up for the page.

Simply creating content is not enough for user conversion, though. You should also have a plan of what and how you write. Abandon long text that goes on and on in favor of keeping it short and simple. In some cases, web design clients will be responsible for providing all of the content for the website. A quick workaround that is great, is to use Lorem ipsum text while you wait on your client and then using Atarim on the final WordPress website prior to launch so they can send over all of the content for the site.

Designing/Prototyping The Website

Now that you have rough wireframes of what needs to be done, it’s time to start designing mockups of the website in your preferred software, such as Sketch for your client to approve. At this stage, you’ll typically focus on a few key pages that have certain important visual elements and will go through a few rounds of revisions with clients until they’re happy with the overall brand style.

The point of this is to create a few (5-10) mockups solely for key pages so that when you start developing, the chances that the client asks for changes to the navigation, footer, homepage’s hero area are significantly reduced. They know what your vision is for the site and agreed to go in that general direction.

Developing The Actual Website

Once the client has approved the mockups/prototypes you presented, the next step will be to start building the site in. How you choose to build your WordPress website entirely depends on what your page builder and WordPress theme of choice are, so this will definitely vary from agency to agency.

The key to exceeding your clients’ expectations at this stage is opening up for feedback from day 1 using Atarim’s Visual Feedback feature. That way, instead of sporadically visiting the staging URL and sending you a couple of screenshots of what they like and don’t like, they can communicate with you right on the website you’re building, simply by clicking on the elements they want to make a comment on.

Testing

One of the final steps, before you can launch the client’s site, is making sure that everything works. Ensure it loads fast, renders properly on all devices regardless of viewport size, etc. the list goes on.

Make sure you get the final go-ahead and approval from clients so you can start making all of the necessary preparations for the launch of their new website.

Launch MVP

After the tests, it is time to finally launch the site. However, you’re not done yet simply because the site is live!

Now that the site is ready, approved by the client it’s time to set an official launch date. Migrate everything from the staging URL to the primary domain and announce that the new site is publicly available.

Before doing this, we think it is absolutely essential to have a website launch checklist with all of the steps you need to run through and things to double-check to ensure no stone is left unturned. That way, you can rest assured that once the site launches things don’t start going sideways a few hours later…

The 30-Day Post-Launch Period

Of course, once the site is live – you will have hopefully accomplished 100% of the clients’ core needs but that’s really not it. A website isn’t just launched once and then left alone, clients will still want changes and, in general, once the site is live it will essentially be a whole other level of testing since real users will start landing on the site.

This leads us to the next step – maintaining a launched site. In some cases, this phase may not be that important to freelance web designers especially if clients don’t really want any further help. However, we always like to build what we refer to as a 30-day post-launch period into the scope of our work.

This is a period of time which we account for in our budget where we won’t just leave clients hanging or bill them additionally so we can address any minor changes or other ideas that they want us to implement. Think of this as a trial of your website care plan – it’s the absolute best way to sell them on a monthly recurring retainer…

Conclusion – Solid Processes Help Speed Up The Design Process Significantly

The actual web design process can take a lot more time and be a lot messier if you don’t have a solid approach and software (like Atarim) to keep clients in check from day 1. If you’re interested in trying out Atarim, the software that web design agencies use to cut project completion time by up to 50% – which now powers over 10,000 websites – get started here.

What’s special about your web design process? Let us know in the comments! ?

Start Collaborating On ANY Website in Seconds

Simply add a URL in the field and see the magic happen (Any URL)

Hidden
This field is for validation purposes and should be left unchanged.
Free Forever | No Credit Card Required

Ditch the endless email ping pong and start collaborating on your creative projects.

Your team deserves more than spending hours decoding messy screenshots and in endless, repetitive email threads. Start delivering your best work faster. 

Free Forever | No Credit Card Required