Advantage of a Web Design Process

I have often seen web designers complaining about how a project took more time to finish, dozens of edits they had to make, or client changing their mind at the last minute resulting in creating new designs from scratch.

Let’s face it, if like me you provide web design services to your customers, then these issues will continue to exist irrespective of whether you work for individuals, small businesses or multi-national companies.

Being a Web Designer

Being a designer is not the same as being an artist. Design is a combination of science and art. Unlike an artist, a designer cannot wait until inspiration hits him. Good designs are not created by chance. Whether it’s a simple website or a web application, every design is created to achieve an objective and not just to to make things pretty.

Design is the creation of a plan or convention for the construction of an object or a system (as in architectural blueprints, engineering drawing, business process, circuit diagrams and sewing patterns). Design has different connotations in different fields. In some cases the direct construction of an object as in graphic design is also considered to be design.

Another definition for design is a roadmap or a strategic approach for someone to achieve a unique expectation. It defines the specifications, plans, parameters, costs, activities, processes and how and what to do within legal, political, social, environmental, safety and economic constraints in achieving that objective.

–       http://en.wikipedia.org/wiki/Design

To consistently be able to come up with great results that exceed your clients expectations and make the user experience engaging involves not just good design skills but also a good process.

Why do we need to follow a Web Design Process?

You can never control your clients mind, but you can definitely change the way you work to reduce rework and be able to get to the final designs much faster.

If you do not have a proper web design workflow or process than this would be the right time to start following one. There are no hard and fast rules. What works for one designer might not work for everyone else. The purpose of creating a process is not just to follow the process for the sake of it, but to break the project into different phases that are easier to manage and to be able to get clients input early and avoid having to re-do anything in the final stages.

Web Design Process

Before we discuss a process, lets draw comparision between Web Design & Architecture. Designing a website is much easier than designing a building. However the way planning and design is done in the field of Architecture can be used as a reference to create our web design process.

1. Initial Discussion & Research

Before any design is started, Architects survey the land, research its history and study its surrounding. A wrong assumption can cost millions of dollars. Hence everything is analyzed and discussed with the clients.

In the field of Web Design, clients are more forgiving. You may decide to simply open up your graphics program and start designing the site, but without a detailed initial discussion, no matter how good you are in your craft, the end product will neither make the client happy nor will it serve their pupose.

The key here is to gather information about your client’s business, the target audience and write down the list of requirements. Discussing in detail will help you understand the scope better and allow you to quote the cost and time to complete the project more accurately.

This step is intended for:

1. Intial meeting and understanding requirements
2. Creating a list of Requirements
3. Project Scope & Timeline
4. User Research
5. Contract signing and other formailities such maintenance services.

2. Planning the flow (wireframing)

In Architecture there are patterns in which spaces are arranged.  For e.g. a kitchen is always placed near the living room. Bedrooms are placed further away from the living room to create more privacy. These patterns were created based on the movement of people inside their home.

Similarly in Web Design, we all follow certain conventions without or without realizing it. Logo and navigation menu are kept on the top of the page for a reason and not just randomly. Before we focus on colors and textures, we need to identity the end user for whom we are making the site. We need to do user research, understand how they could complete the desired task on the website whether its buying a product or making an inquiry in the fastest possible way.

Creating a sitemap and planning the connection between different pages and the flow of user between them will save you lot of time in later stages. This step also ensures your client can get content ready for each page before you go to the next step in design.

The objective of this phase is to create:

1. Sitemap
2. Wireframes
3. And plan content placement and their relation to each other

Before moving to the next phase or step of the workflow it’s important to finalize ideas / work created in the previous step.

3. Planning & Design (The Basics)

In this phase the research done earlier and the selected wireframes are used to create low-fideilty designs to further refine how the content is arranged. To point out again, this is not a rule. More details should only be added after receving feedback for the work done in previous step. This results in less work if you realize that the design path is not correct, or if the client changes requirements.

For my client projects, I always create greyscale designs with actual content but placeholder images to give the client a better feel of the design. Different shades of grey can be used to highlight different sections of a content and to indicate their visual hierarchy.

As we move towards responsive design, you may also chose to develop working prototypes using HTML, CSS & JavaScript. These could be developed using Frontend CSS frameworks to speed up the process. If you choose to built a detailed prototype using a CSS Framework, then you would also save considerable amout of time when completing your website, as this work could serve as a base.

4. Creating High-Fidelity designs

This is the step where you create final designs based on all the research, wireframes and client feedback received. As this design is result of all the client feedback and approvals received in previous steps, the chance of having to redoing everything from scratch is considerably reduced if not completely.

This may or may not be the final step in your workflow depending on whether you are also responsible for converting the final designs into HTML.

5. Final Steps

If your involvement in the project is limited to design, then your final step might either involve sending sliced images or some documentation that includes design usage guidelines, list of fonts used, etc.

Conclusion:

It might sound a task in itself, but having a design process and following has more pros than cons. The process you follow also needs to be flexible. Below is a  bullet point list of a basic process/steps involved in completing a project from design to development.

1. Research & Planning
2. Content Planning
3. Sketching / Wireframing
4. Greyscale Designs / HTML prototypes
5. Final Designs (ready for conversion)
6. Slicing
7. Development (HTML / CSS)
8. Testing
9. Documentation
10. Launch

Feel free to share in the comments your approach to web design.