UI Design

UI/UX design principles, visual hierarchy, typography, spacing, color theory, and motion design for professional web interfaces.

Core Concepts

Visual Hierarchy

Every element should have a clear level of importance. Use size, weight, color, and spacing to establish hierarchy — not decoration.

Typography

• Choose fonts that match the content's tone
• Establish a type scale and use it consistently
• Line height: 1.5 for body text, 1.2 for headings
• Maximum line width: 65-75 characters for readability

Color

• Start with a neutral palette, add accent colors intentionally
• Maintain WCAG AA contrast ratios minimum
• Use color to communicate meaning (success, warning, error, info)
• Dark mode is not just inverted colors — it requires its own palette tuning

Motion

• Use animation to communicate, not decorate
• Duration: 150-300ms for micro-interactions, 300-500ms for transitions
• Ease-out for entering elements, ease-in for exiting
• Respect prefers-reduced-motion