Web Design is an awesome job that seems to be very lucrative and simple. There are a lot of things that you will learn and evolve, but having a well-defined process can help you work much easier.
There are a lot of questions, I have received personally about what process I follow for my web design projects and what is the best process that needs to be followed. Well, to answer that there is no size fits for all, and there is no right and wrong. However, in this article, I have mentioned the process that I mostly follow in my web design project, just to give you all an idea of what steps you might be included in your process as well.
The process I follow, I call it 6D Web Design Process. And, if you want to know why, then stick till the end of this article. What you will be learning in this article?
Table of contents
#What is Website Design?
#Benefits of websites
#6D web design process
What is Website Design?
Web Design or website design is the art of designing and developing webpages using web technologies like HTML5, CSS3, Javascript, Bootstrap, etc. Not only that, web design also includes multiple other aspects which is often overlooked. Some of them are website copy, security of the website, user experience of ther website, etc.
In this article, I will share the detailed process of my web projects. How I qualify a project to work with, process and tools used during project. The process I follow is 6D Web Design process
6D Web Design Process
The process starts with a Discovery Session. In this stage we mostly try to understand the client, their goals, requirements, any specific challenge they are struggling with that they need help with. More specifically, I try to analyze if both of us are the right fit to work together.
Analyzing and introspecting of a project and the client is very important, because you do not want to be in a situation where you get stuck with a project and spoil your reputation. Or another situation could be there is an incremental project scope in the same budget from the client. Either way, it is you taking risk and struggling.
My top 3 ways to create a WOW Discovery session with clients
- Engaging contact formsInstead of collecting only contact information, you can include questions like their project goals, budget expecations, etc. And contact details can be collected at a later stage. View the contact form of my website for inspiration.
2. Schedule a call
Call schedule is a more engaging way of connecting with your client. As you are not only gathering the essential informations related to project. But also empathizing with the client by providing them the flexibility to connect with you at their own sweet time. It also shows your professionalism and customer focused, as the client does not have to wait for extended time.
3. Client Questionnaire
This process is more related to those, who still does not have an online portfolio, or website. But is also super useful for everyone to have. Create a questionnaire with all the important details you need to know in the first meeting, so that you do not seems unprepared. Grab my template for client meeting questionnaire.
Web Design Specialist
Join the exclusive mentorship program where you will learn about designing & developing a website in Web 3.0 standard using no-code tools.
Derive
The Define stage is crucial, as in this phase, we create the functional specifications define the project scope (what can be done and what cannot). Once we are aligned on the project requirements, budget, timelines, I go with sharing the proposal with all details, along with terms. So that we can remain accountable to each other. I also create a client dashboard, which includes all project details like project documents, plan, tasks, invoice details and share with client. Most importantly, we also define the success criteria for the project also known as KPIs (Key Performing Index). Some of the recommended tools mentioned below
Define
This stage is optional, but mostly needed for projects, where we do not have any digital elements like color palette, tone, typogrpahy, and branding elements. In this stage, I conduct strategy workshop with the client stakeholders, and deep dive into their business, by trying to understand their vision, user problems they are trying to solve, brand awareness plan, competitive analysis and market research, if any.
Recently I worked on a Website Development project, where the client was providing services to multiple categories. But did not had branding elements and was also unable to define their story. For which I conducted a strategy workshop and created their complete brand elements and story. The challenging part for me was to define their customers and figuring the problem they were solving. Case study coming soon!
The workshop can be done online on in-person, depending on client or your presence. Some of the recommended tools:
In this stage, I also start with creating the Userflow or Information Architect depending on the type of the project. The idea of creating these artifacts are to determine the information to be included against each section of the website or app. Some of the recommended tools:
- Figma
- Invision
- Miro
Design
Ahh design! The most challenging and excited phase of the complete process. I generally start with collecting design inspiration for both web and app projects. Some of my recommended design inspiration platforms:
Depending on project, I sometime create a Moodboard or Stylesscapes as shown below. This actually helps me to align with the client expectations on the type of visuals I think should go with their brand personality.
Actual stylescape of a cloud kitchen brand. View complete case study here
After the visual identity alignment, I start with creating digital wireframes. Wireframes actually help me to brainstorm on the content layout, the different elements to be used on the UI (User Interface) and the interactions needed against each of the UI elements.
Once the version of the wireframe is finalized, the visuals are created using brand elements like color scheme, typography, etc.
Some of the deliverables in this phase could be:
- Style guide
- Hifi Mockups
- Prototypes
Learn more about the design deliverables.
Develop
Depending on the project requirements, it goes to the product team for actual implementation with code and functionality. Sometimes, the functional implementation is also taken care by me or shared to client for development. Some of the recommended tools for design handoff:
- Figma
- Adobe XD
- Zeplin
The benefits of using these design handoff tools, is we can provide annotations, prototypes and with actual design specifications. So that developers understand the complete flow and interactions that needs to be implemented.
Deploy
Projects that are functionally coded and verified goes live. Post which the analysis are done depending on the success criteria. And if required, enhancements are done. Also, some of the projects are considered for ongoing maintenance at an agreed monthly subscription.
Wrapping Up
Well, congrats 🎉✨for completing the article, and by now you must have got a fair understanding of all areas you need to focus, learn and grow if you are taking project as a freelance.
And if you are planning to land a job, then you need to have an understanding of all of the above-mentioned areas, create your portfolio, and prepare for interviews. The process I just shared above is not a one size fits for all project and client. You need to improvise depending on project requirement.
See you in next article!
