Web Design and Dev Process

By /

Back to: Web Design for All Ages

There are several different ways to go through the web design and development process. In this lesson, we will look at one approach, the “Five D” method, one that combines iterative design, incremental development, and agile processes. Both UX and UI are discussed with a specific focus on the visual design part of the process: specifically the UI design of high fidelity mockups.

The Web Design and Development Process
A Five Step Linear Waterfall Five D Approach with incremental evaluation.

Before we get to high fidelity UI mockups, let’s back up briefly and place this in the larger context of a full web design and development cycle that starts with a new project idea and ends with a completed product.

The Five D’s

Design Process: 5 D's: Define, Draft, Design, Develop, and Deliver

A Simplified 5-Step Process:

  1. Define – Define the project, problem(s), and stakeholder’s primary goals via the project brief. Gather background info to define user profiles, goals, and tasks.
  2. Draft – Brainstorm conceptual solutions; draft the information architecture, site-maps, wireframes, prototypes, content hierarchy, and structure.
  3. Design – Visualize and communicate the user interface design via mood boards, type studies, color studies, prototypes, iterative mockups, and multiple rounds of refinements.
  4. Develop – Build the interactive, fully functioning product using web standard compliant, accessible, valid, semantic markup, styling, and scripting.
  5. Deliver – Via due diligence, fix all bugs and conduct multiple tests for quality assurance across multiple platforms, browsers, devices, and screen-sizes.

Iterative UI Design

In recent years, web design and development has moved away from a step-by-step linear waterfall approach to now embrace iterative design: a cyclical design and development processes that entails multiple rounds of designing, prototyping, testing, analyzing, and refining.

A combined iterative and incremental “5 D” process influenced by multiple models.

Iterative design embraces adaptive planning, evolutionary development, early delivery, and continuous improvement. Designed for speed, it encourages rapid and flexible responses to change multiple times throughout the web design and development process.

High Fidelity UI Mockups

Often times clients need to see (visually) a product early in the design process that will closely resemble the final product via high fidelity mockups.

For example, once a project has been clearly defined with a project brief and site map then pre-visualized with low-fidelity wireframes and prototypes, UI designers are often times tasked with exploring different visual directions via high fidelity mockups, especially for key, important interfaces and/or components. In these cases, a common format is to do two or three rounds of high-fidelity UI mockup designs, with pauses between each round for evaluation, dialogue, client feedback, and iterative improvement. The goal is figure out and clearly define the visual style as close as possible to the final product via multiple rounds of visual exploration. Below is one example of specific 3 > 2 > 1 approach that aligns well an iterative design process:

3 > 2 > 1 UI Mockup Process

Student Project Examples

Below are examples of student projects that wen through a full web design and development process.

Conclusion

There is no one-size-fits-all web design and development process, however, there are several existing models to follow as frameworks, such as iterative design, that embrace best practices and strong principles related to user-centered design.