Proyecto Final de Interactions
Redactado por
Sebastian V. Fecha de publicación
08/08/2025
Tiempo de lectura
10 min
Tema
Interactions
El arte de la orquestación UI
¡Felicidades! Has llegado al final del Capítulo 4. A lo largo de estas lecciones, no solo has aprendido a mover cosas en la pantalla, sino a darles sentido, peso y contexto. Has dejado de diseñar pantallas estáticas para empezar a diseñar flujos interactivos.
1. Botones con retroalimentación completa
El botón "Guardar" que vas a ver combina estados de hover (elevación), active (presión física), loading (asumiendo la asincronía) y success (informando al usuario que todo salió bien). Todo en un mismo componente sin tener que bloquear toda la interfaz del usuario. Es el pilar de un formulario moderno.
2. Modales secuenciales
Un modal no es solo un div en el centro de la pantalla. En el proyecto 2, verás cómo la opacidad del fondo oscuro y la caja del modal tienen ritmos diferentes (delay). Esto guía el ojo del usuario primero hacia el centro oscuro y luego le entrega el contenido con una animación de rebote amigable.
El verdadero secreto: la consistencia
El sello final de calidad en cualquier interfaz premium es que los botones se sientan parte del mismo universo físico que los modales. Si usas un cubic-bezier elástico en un lado, úsalo en el otro. Mantén los tiempos entre 150ms y 400ms para que las interacciones sean enérgicas pero perceptibles.
Consejo profesional
¡Has dominado el feedback visual! Estas microinteracciones son lo que diferencia a una aplicación web genérica de un producto digital premium amado por los usuarios.
Proyecto 1 — Botón con feedback completo
Un botón que reacciona físicamente, muestra estado de carga asíncrono y confirma el éxito sin necesidad de molestas alertas de navegador.
<button class="btn-guardar" id="btnGuardar">
<span class="btn-texto">Guardar Cambios</span>
<span class="btn-cargando"></span>
<svg class="btn-exito" viewBox="0 0 24 24" width="20" height="20">
<path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<script>
const btn = document.getElementById('btnGuardar');
btn.addEventListener('click', () => {
btn.classList.add('loading');
setTimeout(() => {
btn.classList.remove('loading');
btn.classList.add('success');
setTimeout(() => btn.classList.remove('success'), 2000);
}, 2000);
});
</script>Haz clic en el botón. Observa cómo asume el estado de carga y termina con una palomita de éxito.
Proyecto 2 — Modal con Delay
Un overlay que desenfoca la página y una caja que aparece con retraso secuencial para no abrumar la vista del usuario.
<button class="abrir-modal" id="abrirModal">Ver Detalles</button>
<div class="modal-overlay" id="modalOverlay">
<div class="modal-caja">
<h5 style="margin-top:0; margin-bottom:4px; font-weight:700; text-align:center;">Detalles del Componente</h5>
<span style="font-weight:300; font-family:'afronaut',serif; text-align:center; display:block;">
Este modal se anima de forma independiente al overlay para dar una sensación física real.
</span>
<div class="modal-actions" style="display:flex; flex-direction:row; justify-content:flex-end; gap:12px; margin-top:24px;">
<button class="cerrar-modal" id="cerrarModal"
style="padding:10px 20px; border-radius:0; background:transparent; border:1px dashed #444; color:#444; font-family:'afronaut',serif;">
Cancelar
</button>
<button class="aceptar-modal"
style="padding:10px 20px; border-radius:0; background:hsla(158,23%,18%,1); color:hsla(160,52%,71%,1); font-family:'afronaut',serif;">
Aceptar
</button>
</div>
</div>
</div>
<script>
const abrir = document.getElementById('abrirModal');
const cerrar = document.getElementById('cerrarModal');
const aceptar = document.querySelector('.aceptar-modal');
const overlay = document.getElementById('modalOverlay');
abrir.addEventListener('click', () => overlay.classList.add('visible'));
cerrar.addEventListener('click', () => overlay.classList.remove('visible'));
aceptar.addEventListener('click', () => overlay.classList.remove('visible'));
overlay.addEventListener('click', (e) => {
if(e.target === overlay) overlay.classList.remove('visible');
});
</script>Haz clic en 'Ver Detalles'. Fíjate cómo la caja llega ligeramente después de oscurecerse el fondo.
Desafío final
Combina ambos proyectos: pon el botón de guardar dentro del modal. Al hacer clic, que cargue, marque éxito y entonces cierre el modal.