Diseñar tarjetas y componentes reutilizables

Piense en una cocina bien organizada durante un servicio ajetreado. Nadie inventa un plato nuevo para cada pedido. Hay recetas establecidas, ingredientes preparados y una forma de emplatar que todo el equipo conoce de memoria. Por eso la comida sale rápida, consistente y buena. Un sitio web que crece sin desmoronarse funciona de la misma manera, y las recetas en las que se basa se llaman componentes. El más familiar de ellos es la humilde tarjeta.

Esta guía trata sobre el diseño de tarjetas y la idea más amplia de componentes reutilizables: los pequeños bloques de construcción autocontenidos que se utilizan una y otra vez en todo un sitio. Veremos por qué son importantes, cómo se construye una tarjeta, los estados que no debe olvidar y cómo un puñado de componentes bien hechos se convierte en un sistema de diseño que mantiene un sitio ordenado a medida que se expande. Nada de esto es técnico. Se trata principalmente de pensar con anticipación para que su yo futuro, y cualquiera que trabaje en el sitio más tarde, lo tenga más fácil.

Qué es realmente un componente

Un componente es una pieza de interfaz diseñada una vez y reutilizada donde sea necesario. Un botón es un componente. También lo son una barra de navegación, un campo de formulario y la tarjeta. El objetivo es la coherencia y la eficiencia: en lugar de diseñar un cuadro nuevo cada vez que necesite mostrar un producto, un artículo o un miembro del equipo, diseña un patrón de tarjeta y lo reutiliza. Los visitantes lo aprenden una vez y el equipo lo construye una vez.

La tarjeta en particular está en todas partes. Es el rectángulo ordenado que agrupa un pequeño conjunto de información relacionada, generalmente una imagen, un título, una o dos líneas de texto y, a veces, un botón, en una sola unidad en la que se puede hacer clic. Verá tarjetas en cuadrículas de productos, listas de blogs, diseños de precios y páginas de equipo. Funcionan porque empaquetan la complejidad en algo que el ojo puede escanear rápidamente, de manera similar a cómo una buena jerarquía visual empaqueta una página completa.

Por qué los componentes reutilizables valen la pena

Diseñar un componente correctamente requiere un poco más de reflexión inicial que crear una sección única. La recompensa es enorme. Cuando cada tarjeta del sitio sigue el mismo patrón, el sitio se ve coherente y profesional, porque nada parece estar cosido con piezas que no coinciden. Cuando necesita cambiar algo, cambia el patrón una vez y se actualiza en todas partes, en lugar de buscar docenas de versiones ligeramente diferentes.

Esta coherencia es una gran parte de lo que separa un sitio que parece caro de uno que parece improvisado. Las cualidades descritas en un sitio web de aspecto profesional casi siempre provienen de la reutilización disciplinada en lugar de la creatividad sin fin. La repetición, utilizada deliberadamente, se lee como cuidado.

La anatomía de una buena tarjeta

Una tarjeta puede parecer simple, pero cada parte se gana su lugar. Generalmente hay un contenedor con un relleno consistente y un borde o sombra sutil que lo distingue del fondo. Dentro, una imagen o icono se asienta en una proporción fija para que una cuadrícula de tarjetas se alinee prolijamente. Debajo, un título claro, una línea corta de apoyo y, a menudo, una única llamada a la acción. La disciplina consiste en mantener estos elementos consistentes de una tarjeta a otra.

El error más común de las tarjetas es dejar que el contenido varíe mucho. Una tarjeta tiene un título largo que ocupa tres líneas, la siguiente tiene una imagen pequeña y, de repente, la cuadrícula parece rota. Un buen diseño de tarjetas establece límites: los títulos se recortan después de cierta longitud, las imágenes comparten una proporción y el espaciado permanece fijo. Esta previsibilidad es lo que permite que las tarjetas encajen perfectamente dentro de un sistema de cuadrícula y diseño sin desviarse.

No olvides los estados

Un componente no es solo cómo se ve estático. También tiene estados: cómo se ve cuando pasas el ratón por encima, cuando se hace clic, cuando se está cargando, cuando no hay contenido para mostrar y cuando algo sale mal. Diseñar solo la versión perfecta y completa es cómo los componentes se desmoronan en el uso real. Una cuadrícula de productos vacía sin mensaje de respaldo, o una tarjeta con una imagen rota y sin marcador de posición, se ve descuidada.

Para una tarjeta, el estado de "hover" es especialmente importante porque indica que se puede hacer clic en todo el elemento. Un ligero levantamiento, una sombra o un cambio de color le dice al visitante que su clic hará algo. Estas pequeñas respuestas son parte de la misma familia que la retroalimentación de los botones de llamada a la acción: pequeñas señales que hacen que una interfaz se sienta viva y receptiva en lugar de estática.

De unos pocos componentes a un sistema de diseño

Una vez que tienes un puñado de componentes bien hechos, surge un patrón. Juntos forman el comienzo de un sistema de diseño: una biblioteca compartida de botones, tarjetas, formularios, encabezados y más, todos siguiendo las mismas reglas de espaciado, color y tipografía. Un sistema de diseño es simplemente el recetario de la cocina, escrito para que todos cocinen de la misma manera. Es lo que permite que un sitio crezca a docenas de páginas sin caer en el caos.

El sistema lo une todo. Tus elecciones de color y tipografía, el tipo explorado en fuentes y colores para tu sitio web y a nivel de marca en tipografía de marca, se convierten en reglas incorporadas en cada componente, por lo que la coherencia ocurre automáticamente en lugar de por una vigilancia constante. Construye el sistema una vez y el sitio se mantiene ordenado en gran medida.

Mantenga los componentes simples y honestos

Una trampa común es hacer que los componentes hagan demasiado. Una tarjeta que intenta manejar diez diseños diferentes se convierte en un enredo que nadie entiende. Suele ser mejor tener dos o tres tipos de tarjetas claras, cada una con un propósito claro, que una tarjeta monstruosa con una docena de configuraciones. La simplicidad hace que los componentes sean más fáciles de usar correctamente, lo que significa que el sitio se mantiene consistente incluso cuando más personas trabajan en él.

Resista la decoración que no se gana su lugar también. Un sutil efecto de desplazamiento y un espaciado limpio se leen como confianza. Sombras pesadas, bordes recargados y colores que compiten se leen como nerviosismo. La restricción que hace que el espacio en blanco sea efectivo se aplica también a los componentes: dé a cada uno espacio y una única tarea clara.

Nombra y documenta tus componentes

Una biblioteca de componentes solo es útil si la gente puede encontrar y comprender las piezas que contiene. Esto significa dar a cada una un nombre claro y sencillo que describa lo que es, en lugar de dónde apareció por primera vez. Llamar a algo "tarjeta de producto" le dice a todo el mundo para qué sirve, mientras que llamarlo "caja tres de la página de inicio" pierde sentido en el momento en que se reutiliza en otro lugar. Los buenos nombres marcan la diferencia entre una biblioteca a la que la gente recurre y una que ignoran en silencio mientras reinventan su propia versión.

También ayuda escribir, aunque sea brevemente, cuándo usar cada componente y cuándo no. Una nota corta que dice que una tarjeta en particular es para enlazar a artículos, no para mostrar precios, evita la lenta deriva donde los componentes se estiran para realizar trabajos para los que nunca fueron destinados. Esta documentación ligera es lo que mantiene la confianza en un sistema de diseño a medida que un equipo crece y a medida que las personas que lo construyeron originalmente se van. El objetivo es que alguien nuevo pueda abrir la biblioteca, comprender las piezas y usarlas correctamente sin tener que preguntar.

Planea el cambio desde el principio

Los componentes brillan más cuando las cosas cambian, lo cual en cualquier sitio web vivo es constante. Una nueva línea de productos, un cambio de marca, una nueva sección, todo se vuelve mucho menos doloroso cuando su interfaz está construida a partir de piezas reutilizables en lugar de páginas hechas a mano. Actualizar el patrón de la tarjeta una vez repercute en todas partes, en lugar de forzar un trabajo página por página. Esto es diseño reutilizable como seguro, y se encuentra en el centro de la preparación de su sitio web para el futuro. Si desea ayuda para dar forma a una biblioteca de componentes ordenada para su sitio, siempre puede ponerse en contacto.

Preguntas frecuentes

Referencias

1. Nielsen Norman Group. "Tarjetas: Definición de componentes de interfaz de usuario." nngroup.com.
2. Material Design. "Componentes y estados." m3.material.io.
3. W3C. "Patrones de diseño y componentes." w3.org.