Web Design Process

Introduction

In Lesson 4, we’ll be jumping into a web design mockup exercise so you can code your own websites in the following courses. However, I do want to take some time now to introduce you to what the typical web design process may look like when you start to work with clients. The process will vary between designers and agencies, but the web design process can typically be broken down into three phases:

1. The Discovery Phase
2. The Design Phase
3. The Development Phase

1. The Discovery Phase

Source: Elementor

The first step is defining your goal and completing a project brief with your client. A project brief is a document that outlines information about the client + the deliverables of the project. This is the phase in which you would learn about your client’s goals, target audience, mission, services or products, and competitors – and then use this information to define the scope of the project and create an agreement with your client.

2. The Design Phase

The design phase will have several steps/deliverables:

Sitemap

Source: Mural

A sitemap is like the blueprint of the website; it illustrates the information architecture of the website and the hierarchy of the pages. The sitemap should show how every page of your website is connected.

Source: Ayoa

Mood Boards & Wireframes

Mood boards aren’t always integrated into the web design process, but they’re a great way to figure out the art direction or aesthetic of the website before diving into the full design. A mood board can include imagery, fonts, colors, and textures – any element meant to help visualize the desired look or tone of the website.

Source: Just In Mind

Source: Invision

Wireframes are mockups of the website’s content structure. We create a wireframe of each webpage to communicate how the content is going to be organized.

Source: Cacoo

Source: Ramil

Design

Take your wireframe mockups and start designing them.

Source: Just In Mind

Content Creation

This stage will probably overlap with the design stage. Once you’ve established the structure of the website and decided on the content that’ll live on each page, it’s time to start filling out the placeholder items with real content. This is when you would start writing out the content and gathering photos for your website.

3. The Development Phase

After the website design and content have been completed, it’s time to build, test, and launch the website!

For Further Study (optional)

• 7 simple steps to the web design process (Article)
• How to write a web design project brief (Article)
• What Is A Wireframe? (Article)