UI design plans a website’s visual and interactive surface together. It guides users through tasks while using color, space, typography, layout, and content relationships to shape usability, brand impression, and willingness to continue exploring. section 5.3.2 section 5.4
A practical UI design workflow is to:
- Start from wireframes with the content organization, general layout, and grid structure established. section 5.3.2
- Translate the wireframes into full-color mock-ups after the main concepts are locked. section 5.3.2
- Make visual choices deliberately: use space, color, and typefaces to support readability, task guidance, and brand meaning. section 5.3.2
- Prototype and test before development, then iterate when usability problems appear. section 5.4
From wireframe to interface
A wireframe may establish where content belongs and how the page is organized. A full-color mock-up then explores the interface’s aesthetics through a grid, paired typefaces, color palette, spacing, and interactive elements, while preserving the structure already decided. section 5.3.2
