T
Tech Wiki

User Interface (UI)

UX/UIPrincipiante
⏱️ 5 min de lectura🏷️ visual-design, interface, interaction

User Interface (UI)

User Interface o Interfaz de Usuario es la parte visual e interactiva de un producto digital con la que los usuarios interactúan directamente.

¿Qué es User Interface (UI)?

Siguiendo con la analogía del restaurante: si UX es toda la experiencia del restaurante, entonces UI es exactamente cómo se ve y se toca todo - el menú, las mesas, la decoración, los platos, los cubiertos.

User Interface es la parte visual e interactiva de un producto digital con la que los usuarios interactúan directamente. Es todo lo que ves en la pantalla y con lo que puedes interactuar: botones, menús, formularios, colores, tipografía, iconos.

UI se encarga de:

  • Apariencia visual - Colores, tipografía, imágenes que hacen atractivo el producto
  • Organización - Dónde va cada elemento para que todo tenga sentido
  • Interactividad - Cómo responden los botones, menús y otros elementos
  • Consistencia - Que todo se vea y funcione de manera uniforme
  • Claridad - Que sea obvio qué hace cada cosa y cómo usarla

Un buen UI hace que una aplicación sea visualmente atractiva y fácil de navegar. Es como tener un menú de restaurante bien diseñado: puedes encontrar rápidamente lo que buscas y todo se ve apetitoso.

Elementos de UI

Componentes Básicos

Botones

/* Botones principales */
.btn-primary {
  background: #007bff;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
}

.btn-primary:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

Formularios

<form class="form">
  <div class="form-group">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email" 
      placeholder="[email protected]"
      required
    >
  </div>
  
  <div class="form-group">
    <label for="password">Contraseña</label>
    <input 
      type="password" 
      id="password" 
      placeholder="Mínimo 8 caracteres"
      required
    >
  </div>
  
  <button type="submit" class="btn-primary">
    Iniciar Sesión
  </button>
</form>

Navegación

<nav class="navbar">
  <div class="nav-brand">
    <img src="logo.svg" alt="Logo">
  </div>
  
  <ul class="nav-menu">
    <li><a href="/inicio" class="nav-link active">Inicio</a></li>
    <li><a href="/productos" class="nav-link">Productos</a></li>
    <li><a href="/contacto" class="nav-link">Contacto</a></li>
  </ul>
  
  <div class="nav-actions">
    <button class="btn-outline">Iniciar Sesión</button>
    <button class="btn-primary">Registrarse</button>
  </div>
</nav>

Principios de Diseño UI

1. Claridad

✓ Elementos fáciles de identificar
✓ Texto legible
✓ Iconos comprensibles
✓ Acciones obvias

2. Consistencia

✓ Mismo estilo de botones
✓ Colores uniformes
✓ Tipografía coherente
✓ Espaciado regular

3. Jerarquía Visual

✓ Tamaños de texto apropiados
✓ Contraste efectivo
✓ Espaciado significativo
✓ Colores para priorizar

4. Feedback

✓ Estados hover
✓ Estados activos
✓ Indicadores de carga
✓ Mensajes de confirmación

Sistema de Diseño

Paleta de Colores

:root {
  /* Colores primarios */
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  
  /* Colores secundarios */
  --gray-100: #f3f4f6;
  --gray-500: #6b7280;
  --gray-900: #111827;
  
  /* Estados */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
}

Tipografía

/* Escala tipográfica */
.text-xs { font-size: 0.75rem; }   /* 12px */
.text-sm { font-size: 0.875rem; }  /* 14px */
.text-base { font-size: 1rem; }    /* 16px */
.text-lg { font-size: 1.125rem; }  /* 18px */
.text-xl { font-size: 1.25rem; }   /* 20px */
.text-2xl { font-size: 1.5rem; }   /* 24px */
.text-3xl { font-size: 1.875rem; } /* 30px */

/* Pesos */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

Espaciado

/* Sistema de espaciado */
.p-1 { padding: 0.25rem; }  /* 4px */
.p-2 { padding: 0.5rem; }   /* 8px */
.p-3 { padding: 0.75rem; }  /* 12px */
.p-4 { padding: 1rem; }     /* 16px */
.p-6 { padding: 1.5rem; }   /* 24px */
.p-8 { padding: 2rem; }     /* 32px */

/* Margins siguen el mismo patrón */
.m-4 { margin: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

Componentes Avanzados

Modal

<div class="modal-backdrop">
  <div class="modal">
    <div class="modal-header">
      <h3>Confirmar acción</h3>
      <button class="modal-close">&times;</button>
    </div>
    
    <div class="modal-body">
      <p>¿Estás seguro de que quieres eliminar este elemento?</p>
    </div>
    
    <div class="modal-footer">
      <button class="btn-outline">Cancelar</button>
      <button class="btn-danger">Eliminar</button>
    </div>
  </div>
</div>

Cards

<div class="card">
  <img src="producto.jpg" class="card-image" alt="Producto">
  
  <div class="card-content">
    <h3 class="card-title">Título del Producto</h3>
    <p class="card-description">
      Descripción breve del producto que explica sus características.
    </p>
    
    <div class="card-footer">
      <span class="price">$99.99</span>
      <button class="btn-primary">Comprar</button>
    </div>
  </div>
</div>

Loading States

/* Skeleton loader */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Responsive Design

/* Mobile first approach */
.container {
  padding: 1rem;
  max-width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 768px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding: 3rem 2rem;
  }
}

/* Large screens */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

Accesibilidad en UI

/* Contraste mínimo */
.text-high-contrast {
  color: #000000; /* WCAG AA: 21:1 */
  background: #ffffff;
}

/* Focus states */
.btn:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Estados para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Herramientas UI

Diseño

  • Figma: Diseño colaborativo
  • Sketch: Diseño para Mac
  • Adobe XD: Suite de Adobe
  • Canva: Diseño simple

Desarrollo

  • Tailwind CSS: Framework utility-first
  • Bootstrap: Framework de componentes
  • Material-UI: Componentes React
  • Ant Design: Biblioteca de componentes

Testing

  • Storybook: Desarrollo de componentes
  • Chromatic: Testing visual
  • Percy: Screenshots automatizados
  • Figma: Handoff de diseño

Relacionado