The document outlines a 7-phase web design process: 1) Requirement gathering, 2) Quoting the client, 3) Persona building, 4) Data analytics, 5) Wireframing, 6) Design conceptualization, 7) Designing. It describes key activities in each phase like understanding project scope, creating a cost estimate, defining target users, analyzing site data, creating page wireframes, developing design themes, and implementing the final design. Following a standardized process helps deliver projects on time and to the client's satisfaction.
2. 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?
4. 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?
5. 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!
6. 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)
7. 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.
8. 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!
9. Step 1: Begin with wireframing of homepage and complete the menu structure first
Phase 5: Wireframing
10. 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.
11. 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
12. 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
13. 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.
14. 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