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.
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
A Simplified 5-Step Process:
- 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.
- Draft – Brainstorm conceptual solutions; draft the information architecture, site-maps, wireframes, prototypes, content hierarchy, and structure.
- Design – Visualize and communicate the user interface design via mood boards, type studies, color studies, prototypes, iterative mockups, and multiple rounds of refinements.
- Develop – Build the interactive, fully functioning product using web standard compliant, accessible, valid, semantic markup, styling, and scripting.
- 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.
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.
- Nhi’s Yayoi Kusama Site Web
- Reyn’s Can Plan Site Web
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.