‍

What is a web design process and why is it required?

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:

• Understand the requirements and needs of your clients.
• Visualize what kind of work needs to go into completing your project.
• Categorize your work into small tasks.
• Assign tasks if you are working on a team, small or big.
• Prioritize your work.
• Set goals for completion.
• Deliver the project to your client with ease.

‍

A standard web design process

This is how a typical web design process looks like.

‍

1. PLANNING PHASE

‍

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.

A. Requirement Analysis

The typical questions that need to be answered during this phase are:

• What is your company about?
• What is the purpose of your website?
• What goal do you want your website to accomplish?
• Who is your target audience? Who are your potential clients?
• What features do you want on your website? Blog? Calendar? Newsletter?
• Do you have a particular timeline for the project?

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!

‍

B. Project Brief

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.

C. Contracts

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!

D. Credentials to Servers and Databases

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.

E. Additional Resources

You may need a few third-party resources to get things such as:

• Images
• Fonts
• Icons

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:

• Jumpchart - A client/designer collaboration tool
• Bonsai - An all-in-one freelancing tool for proposals, contracts, invoicing, time tracking, and more.
• Figma - I write my proposals/project briefs using Figma templates.
• MS Word or Google Docs

‍

2. DESIGN 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:

‍

A. Moodboard

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:

• Pinterest
• Dribbble
• Land-Book
• Lapa

B. Wireframing

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.

• Draw.io
• Adobe XD
• Figma

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.

C. Mockup

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:

• Pinterest for design inspiration and a visual search engine.
• Figma - Free Wireframing and Mockup tool.
• Unsplash for high-resolution images.
• Pexels for high-resolution images.
• Flaticon for free/premium icons.
• Coolers - Color Palette Generator
• Colorzilla - A browser extension to pick colors from anywhere on the website.
• Google Fonts

D. Review

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.

3.  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:

• Keep your code organized right from the start.
• Be careful with class naming conventions - It should be easily understandable.
• Check for responsiveness as and when you complete designing for the desktop.
• If you can create a template that helps you avoid redundancy, then do it!
• Verify whether all the links on the page work as and when you code them.
• Build and test interactions on the website.
• See that you use compressed images. Large images will make your site load a lot slower and that’s not good!
• Create and attach favicons and Web Icons for the website. This can be done in Figma and exported as assets.

Resource Links for the development phase:

• Webflow
• WordPress
• Wix
• Squarespace
• Weebly
• Bootstrap
• Visual Studio Code - Code Editor
• Sublime Text - Code Editor

‍

4.  LAUNCH 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.

5.  POST LAUNCH PHASE

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. 

• Keep communication open between you and your client and make yourself available to answer any questions or clarifications that the client may have. 
• Be available for any maintenance that the client requires from you. You could charge for maintenance if that was decided upon earlier. Refer to the Planning Phase - Contracts.
• Be sure the client is happy with his/her website as per what was discussed and agreed upon in the Project Brief. 
• You will hand off to the client,

1. Source Files
2. Documentation of the entire website.
3. Assets such as media, icons, wireframes, mockups, etc.
4. How-to guides, if any.

• Get the client to sign-off on the project and pay you. In this step, you will provide all of your contact information for your client to be able to reach you in case of anything. 
• Establish a relationship with your client. This will pave way for newer opportunities and newer clients based on referrals from this client.
• Ask the client to give you a review or a testimonial appreciating your work. You can use this on your portfolio and build social proof as well!

Conclusion

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!