UI/UX Design Principles

UI/​UX Design Principles

Create intuitive, visually appealing interfaces based on proven design principles.

Instructions

1. Establish visual hierarchy - Guide users to important content first
2. Maintain consistency - Reuse patterns, colors, and interactions
3. Provide clear feedback - Every action should have a visible response
4. Reduce cognitive load - Simplify choices and minimize complexity
5. Design for errors - Prevent, detect, and help users recover from mistakes

Visual Hierarchy

Size & Weight

PRIMARY ACTION     -> Largest, boldest, most prominent
Secondary Action   -> Medium size, less visual weight
tertiary action    -> Smallest, subtle styling

// Clear hierarchy example
<div className="space-y-4">
  <h1 className="text-4xl font-bold text-gray-900">
    Main Headline
  </​h1>
  <p className="text-xl text-gray-600">
    Supporting description that explains the headline
  </​p>
  <div className="flex gap-4">
    <button className="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg">
      Primary Action
    </​button>
    <button className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg">
      Secondary
    </​button>
  </​div>
</​div>

Spacing Scale

/​* Consistent spacing system (4px base) */
--space-1: 0.25rem;  /​* 4px - tight spacing */
--space-2: 0.5rem;   /​* 8px - related items */
--space-3: 0.75rem;  /​* 12px */
--space-4: 1rem;     /​* 16px - standard gap */
--space-6: 1.5rem;   /​* 24px - section spacing */
--space-8: 2rem;     /​* 32px - major sections */
--space-12: 3rem;    /​* 48px - page sections */
--space-16: 4rem;    /​* 64px - large gaps */

Color Theory

Color System

// Semantic color usage
const colors = {
  // Primary - brand identity, main CTAs
  primary: {
    base: '#2563eb',   // Blue-600
    hover: '#1d4ed8',  // Blue-700
    light: '#dbeafe',  // Blue-100
  },

  // Success - confirmations, positive actions
  success: {
    base: '#16a34a',   // Green-600
    light: '#dcfce7',  // Green-100
  },

  // Warning - caution, non-critical issues
  warning: {
    base: '#d97706',   // Amber-600
    light: '#fef3c7',  // Amber-100
  },

  // Error - errors, destructive actions
  error: {
    base: '#dc2626',   // Red-600
    light: '#fee2e2',  // Red-100
  },

  // Neutral - text, backgrounds, borders
  neutral: {
    900: '#111827',    // Primary text
    700: '#374151',    // Secondary text
    500: '#6b7280',    // Placeholder, disabled
    300: '#d1d5db',    // Borders
    100: '#f3f4f6',    // Backgrounds
  },
};

Color Accessibility

Text on white background:
- Gray-900 (#111827) -> Contrast 16:1 (excellent)
- Gray-700 (#374151) -> Contrast 10:1 (excellent)
- Gray-500 (#6b7280) -> Contrast 5.2:1 (minimum for text)
- Gray-400 (#9ca3af) -> Contrast 3.5:1 (fails for body text)

Large text (18pt+) can use 3:1 minimum contrast

Typography

Type Scale

/​* Modular scale (1.25 ratio) */
--text-xs: 0.75rem;    /​* 12px */
--text-sm: 0.875rem;   /​* 14px */
--text-base: 1rem;     /​* 16px - body */
--text-lg: 1.125rem;   /​* 18px */
--text-xl: 1.25rem;    /​* 20px */
--text-2xl: 1.5rem;    /​* 24px */
--text-3xl: 1.875rem;  /​* 30px */
--text-4xl: 2.25rem;   /​* 36px */
--text-5xl: 3rem;      /​* 48px */

Typography Best Practices

// Readable line length (45-75 characters)
<article className="max-w-prose mx-auto">
  <h1 className="text-4xl font-bold tracking-tight">
    Headline with Tighter Tracking
  </​h1>
  <p className="text-lg leading-relaxed text-gray-600">
    Body text with comfortable line height (1.625-1.75)
    for better readability. Keep paragraphs short.
  </​p>
</​article>

// Line heights
// Headings: 1.1-1.3 (tight)
// Body: 1.5-1.75 (relaxed)
// Small text: 1.4-1.5

Gestalt Principles

Proximity

// Related items are grouped
<div className="space-y-8">
  {/​* Group 1 - User Info */​}
  <div className="space-y-2">
    <Input label="First Name" />
    <Input label="Last Name" />
    <Input label="Email" />
  </​div>

  {/​* Group 2 - Address (clearly separate) */​}
  <div className="space-y-2">
    <Input label="Street" />
    <Input label="City" />
    <Input label="ZIP" />
  </​div>
</​div>

Similarity

// Similar items look alike
<div className="flex gap-4">
  {/​* All primary actions look the same */​}
  <button className="btn-primary">Save</​button>
  <button className="btn-primary">Submit</​button>

  {/​* All secondary actions look the same */​}
  <button className="btn-secondary">Cancel</​button>
  <button className="btn-secondary">Skip</​button>
</​div>

Continuity

// Elements aligned create visual flow
<nav className="flex items-center space-x-6">
  <Logo />
  <NavLink>Home</​NavLink>
  <NavLink>Products</​NavLink>
  <NavLink>About</​NavLink>
  <NavLink>Contact</​NavLink>
</​nav>

Usability Heuristics

1. Visibility of System Status

// Always show what's happening
<button disabled={isLoading}>
  {isLoading ? (
    <>
      <Spinner className="mr-2" />
      Saving...
    </>
  ) : (
    'Save Changes'
  )}
</​button>

// Progress indicators
<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Uploading...</​span>
    <span>{progress}%</​span>
  </​div>
  <div className="h-2 bg-gray-200 rounded-full">
    <div
      className="h-2 bg-blue-600 rounded-full transition-all"
      style={{ width: `${progress}%` }}
    />
  </​div>
</​div>

2. Match Real World

// Use familiar icons and language
<button>
  <TrashIcon /> Delete  {/​* Not "Remove instance" */​}
</​button>

<button>
  <SaveIcon /> Save     {/​* Not "Persist changes" */​}
</​button>

3. Error Prevention

// Confirm destructive actions
<AlertDialog>
  <AlertDialogTrigger asChild>
    <button className="text-red-600">Delete Account</​button>
  </​AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</​AlertDialogTitle>
      <AlertDialogDescription>
        This will permanently delete your account and all data.
        This action cannot be undone.
      </​AlertDialogDescription>
    </​AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</​AlertDialogCancel>
      <AlertDialogAction className="bg-red-600">
        Yes, delete my account
      </​AlertDialogAction>
    </​AlertDialogFooter>
  </​AlertDialogContent>
</​AlertDialog>

4. Recognition Over Recall

// Show options, don't make users remember
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a category" />
  </​SelectTrigger>
  <SelectContent>
    <SelectItem value="electronics">Electronics</​SelectItem>
    <SelectItem value="clothing">Clothing</​SelectItem>
    <SelectItem value="books">Books</​SelectItem>
  </​SelectContent>
</​Select>

// Show recent/​suggested items
<Combobox>
  <ComboboxInput placeholder="Search..." />
  <ComboboxOptions>
    <div className="text-xs text-gray-500 px-3 py-1">Recent</​div>
    {recentItems.map(item => (
      <ComboboxOption key={item.id} value={item} />
    ))}
  </​ComboboxOptions>
</​Combobox>

Layout Principles

The Rule of Thirds

+---+---+---+
|   | X |   |   Place key elements at intersections
+---+---+---+
|   |   | X |
+---+---+---+
|   |   |   |
+---+---+---+

F-Pattern for Content

// Users scan in F pattern - put important content top-left
<div className="grid grid-cols-12 gap-6">
  <header className="col-span-12">
    {/​* First scan: full-width header */​}
  </​header>
  <main className="col-span-8">
    {/​* Second scan: main content left */​}
  </​main>
  <aside className="col-span-4">
    {/​* Less important: sidebar right */​}
  </​aside>
</​div>

Z-Pattern for Marketing

// Landing pages follow Z pattern
<div>
  <header className="flex justify-between">
    <Logo />                          {/​* Top left - brand */​}
    <nav>...</​nav>                    {/​* Top right - navigation */​}
  </​header>

  <main className="text-center">
    <h1>Main Message</​h1>             {/​* Diagonal - key content */​}
    <p>Supporting content</​p>
  </​main>

  <footer className="flex justify-between">
    <p>More info</​p>                  {/​* Bottom left */​}
    <button>Call to Action</​button>   {/​* Bottom right - CTA */​}
  </​footer>
</​div>

Feedback Patterns

States and Transitions

// Interactive element states
<button className="
  /​* Default */
  bg-blue-600 text-white

  /​* Hover - lighter */
  hover:bg-blue-500

  /​* Active/​Pressed - darker */
  active:bg-blue-700

  /​* Focus - visible ring */
  focus:ring-2 focus:ring-blue-500 focus:ring-offset-2

  /​* Disabled - muted */
  disabled:bg-gray-300 disabled:cursor-not-allowed

  /​* Transition */
  transition-colors duration-150
">
  Click Me
</​button>

When to Use

• Planning UI layouts and component design
• Making design decisions without a designer
• Reviewing and improving existing interfaces
• Creating style guides and design systems
• Onboarding new team members to design principles

Notes

• These principles apply across all platforms (web, mobile, desktop)
• User testing validates assumptions - principles are guidelines, not rules
• Accessibility is a core principle, not an afterthought
• Performance affects perceived usability