A Web design process is a step-by-step document that will help you take a client project(or for that matter, any web project) from start to finish in order to complete and deliver to your client.
This process will categorize your work so you can break them up into smaller tasks.
These tasks will become the complete checklist that you will check off from start to end.
By doing this, you will be able to:
This is how a typical web design process looks like.
This stage is the most important stage of the Web Design Process. Why? Because this is where the stage is set for the entire project from start to finish. This is also where you need to study the mind of the client and understand his/her goals for the website.
Let me break it down for you.
The typical questions that need to be answered during this phase are:
Even if the client has decided what their website should look like, do not hesitate to give them your valuable insights and advice to make it better!
A project brief is nothing but a document that is drafted based on the previous step, Step A, and agreed upon by the client. This way you have a document that you can refer back to throughout the lifetime of the project. Let this be a concise document and not overly technical.
This is a very important piece of documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership, and timelines. The wise thing to do is to cover yourself with this document, but be concise and effective.
You could also add details about the maintenance of the project after its launch, here within the contract. Be sure that the client knows about this and he has agreed to its terms!
This is when you will receive the server and database credentials from the client. For example, in Webflow, you will receive the login credentials to the Webflow dashboard. In WordPress, you will receive access to the client’s Domain/ Hosting credentials(FTP Server and Cpanel information), WP Admin Dashboard credentials, etc.
You may need a few third-party resources to get things such as:
It is better to identify the need for these assets and decide on those early on. Some of the assets that need to be used on the project may require a license or a monthly fee. Make note of that and add all of it to the project’s budget so that the client is aware of it.
Resource Links for the planning phase:
The design phase furthers the previous phase and brings what was discussed and agreed upon in the Planning Phase to life. More specifically, the project begins to take shape visually.
Upon completion of this phase, the website will have a structure, but, maybe the content and special features will be missing.
Also, this phase sets the stage for coding and development.
This phase comprises of three main stages:
This first step involves inspiration. Every designer needs the inspiration to create websites. You do not have to build every single thing from scratch. The main point of this stage is to create tried and trusted elements in the design with a little variation and a personal touch. Pinterest is one such great place to get design inspiration.
Remember: Pinterest is a visual search engine and not a social media platform.
These are some great resources you can get design inspiration from:
This is where the visual layout of the website begins to take shape. Based on the information gathered in the planning phase, come up with a visual layout for the website. There are many tools that you can use to create wireframes.
There are many other paid tools such as Sketch and Balsamiq but I personally love Figma for the ease of use and its varied features.
At this point, I recommend sharing the wireframes with your client and asking for feedback. Figma has a great way of sharing your wireframes with the client. You can ask them to drop in comments about your work. And once you work on implementing changes based on client feedback, you are now ready to move on to the next stage which is prototyping or mocking up.
A mockup is an important phase where your wireframe comes to life with color, type, and real body copy. I like my designs(mockups) to be a replica of how your website will look. This will help the client visualize what they are going to see as an end product, their website.
Figma and Adobe XD are great tools for mockups and prototypes.
Resource Links for the Design phase:
This step is not exactly the final stage of the Design Phase. The client will want to make some changes at this step in regards to your mockup of the website and web pages. You could go back and forth between the mockup and the client review multiple times until the design is perfected.
Once the client agrees upon the design, you are ready to move on to the next phase which is the Development phase.
Once you have decided on a design with the client, you are now ready to develop the website. This is the phase which is probably the bulk of the project where you will have to create each element of the website and check them off against the finalized mockup design that the client agreed upon.
Whichever tool/ website builder you are going to use to develop/code the website, the process is still the same.
Some tips for developers:
Resource Links for the development phase:
In this phase, you will launch the website for the clients to view it publicly. You will have to work on polishing the design elements, testing interactivity on the site, animations, and features. You will be looking at the User Experience aspect as well!
If this site is in a staging environment, this is when it will be published LIVE and tested on the LIVE Server. This is the real environment the site will live on.
Rigorous testing will be done at this stage and check for Cross-browser compatibility on all browsers - Chrome, Firefox, Safari, Edge, and handheld devices.
This is the final phase of the client project where you will be handing off assets to the client.
Once the launch has happened, it doesn’t mean that you are completely done with the client.
Now, you know what the entire Web Design Process will look like from start to finish. Again, this is not a hard and fast rule. The Web Design Process may vary depending on different situations, but it is a good baseline that can help you get started.
Feel free to share this post with other freelancers, adopt it as your process and make it your own!
