Find out how following a structured web design process can help you deliver more successful websites faster and more efficiently. 

Web design is the art of planning and arranging content on a website to be shared and accessed online with the world. A combination of aesthetic and functional elements, web design is what determines the look of a website – such as its colors, fonts, and graphics – as well as shaping the site’s structure and the users’ experience of it.

Difference between web design and web development

Web design is different from web development, but these two disciplines are closely related and often used interchangeably. The main difference is that web design refers to a particular website’s visual design and experiential aspects.

On the other hand, web development is being used for the building and maintenance of a website’s structure and involves using software languages like HTML, CSS, and Javascript. In this article, I will talk only about web design, but you can look forward also to articles about web development where I explain how to a make website from scratch with HTML, CSS, and Javascript.

Web design process – general info

A holistic web design process should take both form and function into account. Maybe you have heard about a design principle form follows function. It means that the purpose of a website should be the starting point for its design. In other words, you need to think first about business goals and objectives why you design the website.

That means every element of your site needs to work towards a defined goal. Design is objective, structured, and strategized with a business or sales purpose. Remember great design is good business. 

I believe good design is in the details and every decision must have a reason. I follow a human-centered design process and aim for engaging, intuitive, and innovative solutions. The website design and development process can vary greatly from individual and from company to company.

However, to ensure that a web design project runs on budget, on time, and smoothly for all stakeholders involved, including the client, it is essential that you develop and follow a structured web design process with specific phases that you can rely on during your work.

The clear and structured web design process puts you and also your client at ease. If you find yourself stuck during your design work you can always come back to your structured design process, and find out what you should do next.

The web design process is similar in every project, but at the same time, the process should be adjusted according to the design brief and project requirements.

Design thinking process

I myself use the design thinking method within every project I work on. Design thinking is a mindset of how we approach a problem. It is a proven and repeatable problem-solving method that any business can employ to achieve big results. 

Design thinking combines creative and critical thinking that allows information and ideas to be organized, decisions to be made, situations to be improved, and knowledge to be gained.

Design Thinking involves five steps that begin with learning from customers and end through iterations of product design and prototyping, producing a product that solves the customer’s problem in a valuable way – a solution they love.

1. Discovery

The first stage of the Design Thinking process is to gain an empathic understanding of the problem I am trying to solve. This involves consulting experts to find out more about the area of concern through observing, engaging, and empathizing with people to understand their experiences and motivations and immersing myself in the physical environment to have a deeper personal understanding of the issues involved.

2. Interpretation

During the Define stage, I put together the information I have created and gathered during the Discovery stage. Then, I will analyze my observations and synthesize them in order to define the core problems that I have identified up to this point.

3. Ideation

During the third stage of the Design Thinking process, I am ready to generate ideas. I’ve grown to understand my users and their needs at the Discovery stage, and I’ve analyzed and synthesized my observations in the Interpretation stage and ended up with a human-centered problem statement.

With this solid background, I can start to ‘think outside the box to identify new solutions to the problem statement I’ve created, and I can start to look for alternative ways of viewing the problem.

4. Experimentation

Within the experimentation stage, I will now produce a number of inexpensive, scaled-down versions of the product or specific features found within the product, so I can investigate the problem solutions generated in the previous stage.

Prototypes may be shared and tested within the team itself or on a small group of people outside the design team. This is an experimental phase, and the aim is to identify the best possible solution for each of the problems identified during the first three stages.

5. Evolution

I will show the prototype to potential users and customers to get their feedback. The goal is to continue learning about the customer’s core problem and solutions that provide them value.

This is the final stage of the 5 stage-model, but in an iterative process, the results generated during the testing phase are often used to redefine one or more problems and inform the understanding of the users, the conditions of use, how people think, behave, and feel, and to empathize.

Web design process

     1. Discovery phase

1. 1. Discovery session (Talk with a client & stakeholders)
   2. Goal identification phase (Result = Problem statement)
   3. Project scope definition 
   4. Project plan
   5. Plan and conduct user and market research

     2. Interpretation phase

1. 1. Interpret data and findings
   2. Create user journey maps and personas

     3. Ideation phase

1. 1. Determine information architecture and create user flows
   2. Content creation (if necessary)
   3. Create wireframes and prototypes
   4. Create a style guide
   5. Look for design inspiration

    4. Experimentation phase

1. 1. Create a graphic design of the website and mockups

    5. Evolution

1. 1. Show prototype/mockups to users/potential customers/clients to get their feedback
   2. Iterate design based on feedback
   3. Finalize the website design
   4. Design handoff

 

1. Discovery phase

Discovery session (Talk with a client & stakeholders)

The beginning of any new design project is exciting. Whether you’re starting from scratch or doing a complete website redesign, you need to know the website’s purpose and what you want a user to take away from your new site. You need to identify the problems the website has intend to solve and then find the right solutions.

The initial stage is all about understanding how you can help your client. To identify the problems to be solved, and find the right solutions to those problems, you first need to communicate with your client and the other stakeholders.