Lesson 3: Tools & Processes
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)