Top 10 tendencias de diseño web que definieron 2012

Mirando hacia atrás, 2012 fue el año en que la web se volvió verdaderamente responsiva — y juguetona. Aquí están las tendencias que moldearon la era, muchas aún relevantes hoy.

1. Diseño Responsivo — las cuadrículas fluidas de Ethan Marcotte + imágenes flexibles + consultas de medios se convirtieron en la nueva línea base. Una base de código, todas las pantallas.
2. Diseño Plano — Metro de Microsoft e iOS 7 más tarde mataron el esqueuomorfismo. Líneas limpias, colores sólidos, tipografía audaz dominaron.
3. Desplazamiento Animado — Paralaje y animaciones desencadenadas por scroll convirtieron las páginas en narrativas.
4. Mega Menús — Desplegables de múltiples columnas reemplazaron a los interminables flyouts anidados para sitios con mucho contenido.
5. Parallax Scrolling — Fondos que se mueven más lento que el primer plano crearon una falsa profundidad 3D en una sola página.
6. Diseños basados en tarjetas — Rectángulos al estilo Pinterest: escaneables, responsivos, listos para componentes.
7. Fondos de pantalla completa — Imágenes/Video de héroe se convirtieron en la apertura predeterminada de la página de inicio.
8. WebGL y 3D — Three.js trajo 3D acelerado por GPU a los navegadores sin complementos.
9. Menús Hamburguesa — Tres líneas = navegación oculto. El móvil primero forzó el patrón en todas partes.
10. Motion UI — Micro-interacciones (ondulaciones de botones, spinners de carga) añadieron velocidad percibida y deleite.

Comprobación de legado

Responsivo, plano, tarjetas, hamburguesas, movimiento — estos sobrevivieron. El paralaje y el video de pantalla completa se desvanecieron en móvil debido al rendimiento. Los mega menús evolucionaron a mega-pies de página. WebGL creció hasta WebXR.

2012 nos enseñó: diseña para el viewport que tienes, no para el que desearías tener.