7 Phases of Web Design Process

Have You Ever Wondered..

● What is the best time to get the web design reviewed by

the client?

● Am I following the best web design process?

● We are going in too many design iterations, is there a way

out?

● This project has no end and it is a huge loss to me. What

do I do?

Let’s Find Some Answers

Phase 1: Requirement Gathering

Understanding what a project will deliver is critical to its success.

A Few questions which you should not forget to ask in any web design project are:

● Is it a web design project or a website re-design project?

● Who is the target user of the website?

● Are Branding guidelines are ready?

● What is the domain name? Where is the website hosted?

● Content for the website is ready?

● Does the project includes development as well?

Phase 1: Requirement Gathering

● What technology are you using for the website?

● Are there any existing issues on the website which you are aware of?

● Number of pages to remain same as in existing website?

● What are the credentials of website’s Google Analytics account?

● Any need of payment gateway integration?

● Any 3rd party API integration needed?

● List of existing tools being used on the website?

There can be more such questions. Make sure you don’t miss out any!

The cost per hour you bill your client is your call. But there are a few aspects which you should not miss while quoting:

Phase 2: Quoting the Client

Quotation :

(Effort you spend on studying the structure of the website and researching) +(Effort for data analytics ) +(Effort you spend on persona building exercise) +(Wireframing Effort) +(Time taken for design conceptualization) +(Designing effort) +(Coordination effort with cross functional teams) +(Effort you spend on review and approval meetings)

Phase 3: Persona Building

There are various methods of defining a persona and we

find “War-Room” the best way to get the desired result.

We share ‘Website Persona Questionnaire’ with all the

stakeholders in the war-room meeting. The site owners

are also requested to fill in the ‘Design, Content and

Website Questions’ keeping the persona in mind.

Phase 4: Data Analytics

Analysis of web data helps in:

● Understanding and optimizing the web design.

● Google Analytics and heatmap study helps in drawing meaningful information.

● Helps in knowing what works on the website and what does not!

Step 1: Begin with wireframing of homepage and complete the menu structure first

Phase 5: Wireframing

Phase 5: Wireframing

Step 2: Work on the wireframe of one of the content heavy pages.

Step 3: Get the review on these wireframes and incorporate the changes.

Step 4: Finish all other wireframes and schedule a review meeting with stakeholders.

Phase 6: Web Design Conceptualization

Rather than jumping into the designing, first get all the information and wireframes.

1. Sit with the design team and work on Design Theme

2. Work on the Elements of Design: icon sets, shapes, image filters, color palettes,

fonts, look of social icons, gutters, margins, line spacing and transitions etc.

3. Run the design concept and the story behind it with the internal team and seek

feedback.

4. Once done, share the design concept with the client

Phase 7: Designing (Finally)

Step 1:

● Ideal website should be content driven● Understand the content calendar● Content team should have an idea of the design to restrict them

Step 2:

● Make sure that the content is written with different design layout, so that there are no similar design structure

Phase 7: Designing (Finally)

Step 3:

● Work on homepage design

● Have review meeting with client

● Work on 3-4 pages in the next set

● Have review meeting again

● Close all pages with standard design formats in last set

● Send all pages together in the end after the final review

● Feed in all the real content in the pages and keep it ready for

development.

The phases and approach of design may vary from project to project.

Standardizing your web design process will help you deliver projects in right quality and time, much to the delight of the customer!

Basic Web Design Work Flow