Card pattern

by

Características de este patrón de diseño, más alla de su aspecto visual.

Si bien la definición de qué es una Card es subjetiva, suelo escuchar el término usado para referirse a una caja blanca con bordes y sombra. Pero más allá del diseño, el Card pattern se enfoca en cómo interactúa el usuario con ese elemento.

En un artículo encontré esto que me parece bastante textual:

Designers can call the things on the screen “cards” simply because those rectangular regions look like the small physical cards that have fit into our pockets for centuries. However, beyond how they look, the cards I’m talking about have interactive qualities.

Interacción con el usuario

Las Cards se centran en interacciones. Por ejemplo:

Un acercamiento a Cards que está implementado en MercadoLibre, son los artículos en la homepage:

Artículo de la homepage

En un estado inicial se ve la foto y el precio del artículo. Al pasar por encima con el cursor se ve además: título, cuotas, envío y la acción de agregar a favoritos.

Más allá de que está pensado únicamente para usuarios que tienen un mouse/cursor, creo que se acerca muchísimo al concepto de Cards.

Portabilidad

Otra característica que me parece importante de las Cards es la portabilidad. Entonces, una Card de una página de búsqueda podría usarse también en la homepage, en una página de producto y en un listado de Mi cuenta. No solo la interacción, sino también la implementación (HTML, CSS, JS).


Más info sobre este patrón: