A Creative Workflow for UX and UI Design

There are several different approaches, philosophies, and models for web design and development processes, such as the waterfall model, iterative design, incremental development, and agile processes. Each has played a big impact on web design and development over the years. In this lesson, 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 skip to high fidelity UI mockups, let's back up briefly and place this in the larger context of a comprehensive iterative web design and development workflow that embraces adaptive planning, evolutionary development, and continuous improvement. Designed for speed, efficiency, and effectiveness, an iterative design process encourages rapid and flexible responses to change throughout the creative design process with continuous evaluation and improvement.

Iterative design is a design methodology based on a cyclic process of prototyping, testing, analyzing, and refining a product or process.

Wikipedia
A combined iterative and incremental “5 D” process influenced by multiple models.
Example: a "Five D" web design and development approach that embraces iterative design and evaluation.

Multi-step 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, such as high fidelity mockups. Remnants from the days of waterfall web design and development, high fidelity mockups continue to play an integral role in modern day web design and development, especially when it comes to larger budget, client-based projects with multiple team members and stakeholders.

For example, once a project has been clearly defined and 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 are examples of specific approaches this aspect of the overall iterative design process:

3 > 2 > 1 UI Mockup Process

2 > 1 UI Mockup Process

Author Notes

This was written specifically to help aspiring web designers as they aim to:

  • Learn workflows and creative design processes for web design.