Designing Frontend Interfaces

Overview

Distinctive interfaces come from committing to one aesthetic direction and executing it with a locked system of values. Generic interfaces come from picking each value ad hoc at the moment it is needed.

Core principle: Decide the system before you write the components. Every number in the finished CSS should trace back to a scale you chose deliberately.

This skill covers visual craft. Two companion skills cover the rest of interface quality:

• REQUIRED SUB-SKILL for anything with flows, forms, or non-trivial state: use designing-user-experience
• REQUIRED SUB-SKILL before shipping: use building-accessible-interfaces
• To critique a finished UI, use reviewing-interface-quality

The Iron Law

NO COMPONENT CODE BEFORE THE DESIGN BRIEF AND TOKEN BLOCK EXIST