Best Practices

Guidelines for building consistent, maintainable, and user-friendly interfaces. These practices will help you ship faster and create better experiences.

1. Establish Visual Hierarchy

Guide users' attention to what matters most. Create clear levels of importance.

✓ Good

Main Action

Supporting description text

✗ Bad

Main Action

Supporting description text

One primary action per screen or section
Use size, weight, and color to differentiate elements
Mute secondary elements (lighter colors, smaller text)

2. Be Consistent

Consistency reduces cognitive load and builds user trust.

Spacing

Use the same spacing for similar elements. If cards have p-6, all cards should have p-6.

Button Placement

Keep actions in consistent positions. If "Save" is on the right in forms, always put it there.

Language

Use the same terms throughout. Don't mix "Delete", "Remove", and "Trash" for the same action.

3. Embrace White Space

White space isn't empty—it's a powerful design tool.

✓ Comfortable

Card Title

Description with good spacing.

✗ Cramped

Card Title

Description with tight spacing.

Increases readability and comprehension
Creates breathing room between sections
Makes interfaces feel more premium

4. Progressive Disclosure

Show only what's needed. Reveal complexity gradually.

// Instead of showing all options at once
<form>
  <Input label="Name" />
  <Input label="Email" />
  <Input label="Phone" />
  <Select label="Country" />
  <Input label="Address" />
  <Input label="City" />
  <Input label="State" />
  <Input label="ZIP" />
  <Checkbox label="Send newsletter" />
  <Checkbox label="Accept marketing" />
  {/* 10+ fields overwhelms users */}
</form>

// Progressive approach
<form>
  <Input label="Email" />
  <Button>Continue</Button>
</form>
// Then show more fields after first submission

Start with essential fields only
Use "Show advanced options" for power users
Break long forms into steps

5. Provide Feedback

Users should always know what's happening.

Loading States

<Button disabled={isLoading}>
  {isLoading ? (
    <>
      <Spinner className="mr-2" />
      Saving...
    </>
  ) : (
    "Save Changes"
  )}
</Button>

Success Confirmation

<Alert variant="success">
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>Your changes have been saved.</AlertDescription>
</Alert>

Error States

<Input
  className="border-red-500"
  aria-invalid="true"
/>
<p className="mt-1 text-sm text-red-500">
  Please enter a valid email address
</p>

6. Accessibility Basics

Building accessible interfaces benefits everyone.

✓

Use semantic HTML

<button> for actions, <a> for links, <h1-6> for headings.

✓

Ensure color contrast

4.5:1 ratio minimum for text. Test with contrast checkers.

✓

Add focus styles

Never remove focus outlines without providing alternatives.

✓

Label form inputs

Every input needs a <label> or aria-label.

✓

Don't rely on color alone

Pair color with icons or text for status indicators.

7. Performance Considerations

Fast interfaces feel more polished and professional.

Use skeleton loaders instead of spinners for content
Lazy load images and heavy components
Debounce search inputs
Use CSS transitions instead of JS animations where possible
Optimize images (WebP, proper sizing)

// Skeleton while loading
{isLoading ? (
  <div className="space-y-4">
    <Skeleton className="h-8 w-48" />
    <Skeleton className="h-4 w-full" />
    <Skeleton className="h-4 w-3/4" />
  </div>
) : (
  <article>
    <h1>{title}</h1>
    <p>{content}</p>
  </article>
)}

Quick Checklist

Before shipping, verify these basics: