Web UI Design

Purpose

Design modern, responsive web interfaces using HTML/CSS/JavaScript frameworks, following current UX best practices and accessibility standards.

When to Use

Creating web application interfaces
Designing responsive layouts
Planning component hierarchies
Organizing page navigation

Key Capabilities

Responsive Design - Create layouts that work on all screen sizes
Component Thinking - Break UI into reusable components
Accessibility - Ensure WCAG compliance and screen reader support

Approach

Design mobile-first, then scale up
Use grid/flexbox for responsive layouts
Break UI into reusable components
Follow accessibility guidelines (ARIA, semantic HTML)
Ensure color contrast and keyboard navigation
Provide loading states and error feedback

Example

Context: User profile page

<!-- Mobile-first responsive design -->
<div class="profile-container">
  <header class="profile-header">
    <img src="avatar.jpg" alt="User avatar" class="avatar">
    <h1>John Doe</h1>
  </header>
  
  <section class="profile-info">
    <div class="info-grid">
      <div class="info-item">
        <label>Email</label>
        <span>john@example.com</span>
      </div>
      <div class="info-item">
        <label>Role</label>
        <span>Developer</span>
      </div>
    </div>
  </section>
  
  <footer class="profile-actions">
    <button class="btn-primary">Edit Profile</button>
    <button class="btn-secondary">Change Password</button>
  </footer>
</div>

<style>
.profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .info-grid { grid-template-columns: 1fr; }
}
</style>

Best Practices

✅ Mobile-first responsive design
✅ Semantic HTML elements (header, nav, main, footer)
✅ Accessible forms with labels and ARIA attributes
✅ Loading states and error messages
❌ Avoid: Fixed pixel widths
❌ Avoid: Relying only on color for information