Las aplicaciones web y móviles se alejan de las páginas, hacia experiencias completamente personalizadas. Y esta experiencia se basa en una agregación de muchas piezas individuales de contenido. Las tarjetas son el nuevo concepto creativo. Independientemente de cómo se sienta sobre el concepto, las tarjetas están aquí para quedarse.

¿Qué son las tarjetas?

Las tarjetas son esos pequeños rectángulos llenos de imágenes inclusivas y texto que sirven como puntos de entrada a información más detallada. Se convirtió en casi una opción por defecto cuando se trata de equilibrar la estética de la interfaz de usuario con buena usabilidad. Porque las tarjetas son medios convenientes de exhibir el contenido compuesto de diversos elementos.
Excelentes Metáforas

El uso de las tarjetas en la interfaz de usuario es una excelente metáfora, ya que parecen tarjetas tangibles del mundo real. Antes de los dispositivos móviles, que siempre estaban a nuestro alrededor; tarjetas de visita, tarjetas de béisbol, cartas de juego y así sucesivamente. Las tarjetas son un modelo de interacción que se está extendiendo bastante ampliamente, de hecho. Por lo tanto, es más intuitivo para los usuarios saber que estas tarjetas están representando un pedazo de contenido al igual que en la vida real. Las tarjetas son una gran herramienta para comunicar historias rápidas. La tarjeta de béisbol es un buen ejemplo de objetos de la vida real. La información básica que necesitabas saber sobre un jugador está contenida en ambos lados de una pequeña tarjeta.
Organización de contenidos

Las tarjetas dividen el contenido en secciones significativas que ocupan menos espacio en la pantalla. Similar a la forma en que los párrafos de texto agrupan las oraciones en secciones distintas, las tarjetas pueden reunir varios elementos de información para formar un contenido coherente. Los diseños de tarjetas llegaron a la vanguardia del diseño cuando gigantes como Facebook adoptaron la interfaz de tarjeta para su sitio de escritorio y móvil y aplicación. Facebook aprovechó al máximo el diseño de contenedores para agrupar información a pesar de un flujo casi infinito de datos.
Visualmente agradable

El diseño basado en tarjetas suele depender de imágenes. Y pesado en las imágenes es una fuerza de diseño basado en tarjetas. Los estudios ya confirman que las imágenes elevan el diseño del sitio o de la aplicación, porque las imágenes dibujan el ojo del usuario de manera eficiente e inmediata. El énfasis en el uso de imágenes hace que el diseño basado en tarjetas sea más atractivo para los usuarios.

Echa un vistazo a Dribble, un sitio bien conocido en la comunidad creativa en línea que muestra obras de arte de los diseñadores. Diseño basado en tarjeta es realmente la forma más adecuada para presentar este tipo de contenido.

 

Cómo diseñar una tarjeta

Las tarjetas del mismo diseño deben tener un ancho constante, pero pueden tener altura variable. La altura máxima está limitada a la altura del espacio disponible en una plataforma, pero puede expandirse temporalmente (por ejemplo, para mostrar un campo de comentario). Las tarjetas pueden ser de una altura fija o variable.

Desde el punto de vista del diseño, las tarjetas deben tener esquinas redondeadas y sombra corta. Las esquinas redondeadas hacen que la tarjeta parezca un bloque de contenido, mientras que las sombras dan la impresión de profundidad. Estos elementos añaden un poco de especia visual a sus diseños sin convertirse en una distracción. También hacen que la tarjeta parezca salir de la página. Además, podemos aprovechar la animación y el movimiento.
Ventajas de la tarjeta

Implementado correctamente, las tarjetas pueden mejorar el aspecto UX de una aplicación. Debido a su funcionalidad y forma, agregan un interesante elemento de interfaz de usuario que es intuitivo de usar.
Forma digerible

Ya sabes que el contenido es el rey. Las tarjetas son contenedores de diseño que pueden contener casi cualquier cosa. Colocar contenido en las tarjetas hace que sea digerible para los usuarios. En este sentido, los usuarios pueden acceder fácilmente al contenido que les interesa. Esto permite a los usuarios participar de la manera que ellos deseen.
Diseño sensible y móvil Lo más importante de las tarjetas es que son casi infinitamente manipulables. El diseño de tarjeta de estilo funciona bien tanto para equipos de escritorio y dispositivos móviles, porque las tarjetas ofrecen contenido en trozos más digeribles. Ellos son buenos elegir para el diseño de respuesta ya que las tarjetas actúan como contenedores de contenido que fácilmente escala hacia arriba o hacia abajo. Por último, pero no menos importante, las tarjetas facilitan la creación de una estética única en varios dispositivos. Por eso es tan fácil crear una experiencia consistente sin importar el dispositivo.

Diseño con los pulgares en mente Las tarjetas se hacen para los pulgares. Parece que las tarjetas son un estilo que parece hecho para las aplicaciones. Es una parte clave de la popularidad de las tarjetas cuando se trata de diseño de aplicaciones móviles. Las tarjetas digitales se comportan de la misma manera que las tarjetas físicas, lo que hace una experiencia cómoda para los usuarios. Los usuarios no tienen que pensar en cómo hacer que las cosas funcionen. Les gusta la simplicidad de las tarjetas y intuitivamente entender la física de convertir una tarjeta más para obtener más información o pasar por el siguiente trozo de información.

Los gestos de la tarjeta deben ser implementados consistentemente dentro de una colección de tarjetas. Limite los gestos de deslizamiento dentro de una vista para que no se superpongan entre sí. Por ejemplo, una tarjeta deslizable no debe contener un carrusel de imagen deslizable, de modo que sólo se produce una acción cuando se pasa la tarjeta.
¿Dónde utilizar?

Las tarjetas aparecen en un flujo, creando una línea de tiempo natural de eventos. Piense en cómo Facebook utiliza las tarjetas para presentar una visión general rápida de los últimos acontecimientos en el feed de noticias. El feed de noticias de Facebook es un flujo interminable mientras que las tarjetas son individuales. El punto de las cartas es la desagregación. Están sacando cosas del flujo infinito, empacándolas y haciéndolas compartibles.

Descubrimiento Las tarjetas permiten que el contenido relevante se revele naturalmente, permitiendo que los usuarios hundan profundamente en sus intereses. Pinterest utiliza clavijas en un diseño de malla de albañilería dinámica como para organizar el contenido y comprometer a los usuarios en una navegación adictiva.

 

Diálogos

Como las tarjetas son contenedores de contenido, son perfectas para representar acciones. La acción primaria en una tarjeta es típicamente la propia tarjeta. Considere el servicio AirDrop en los dispositivos de Apple. Cuando tiene una solicitud de transferencia de datos entrante, aparece una tarjeta con una notificación para aceptar o rechazar la transferencia. Sólo tienes una sola acción, no importa la elección que hagas.
Flujo de trabajo

Las tarjetas se clasifican fácilmente para un alcance de tareas. Un gran ejemplo de este caso de uso es Trello. Un tablero de Trello es un lienzo lleno de tarjetas, cada uno de ellos representa una tarea separada.
Contenido homogéneo

Una lista que se puede escanear rápidamente (o cuadrícula), en lugar de tarjetas, es una forma adecuada de representar un contenido homogéneo que no tiene muchas acciones. Izquierda: El uso de tarjetas aquí distrae al usuario de poder escanear rápidamente.

Las tarjetas son innecesarias en una galería de imágenes. Las baldosas de la rejilla son una manera limpia y ligera de presentar una galería de imágenes.

Tamaño de pantalla grande

El diseño de información basado en tarjetas puede funcionar bien en pantallas pequeñas, pero en pantallas grandes, tiende a implementarse como un desorden que no puede leerse correctamente. Visualmente todavía se ve genial, pero son horribles en medidas objetivas como la velocidad de lectura.

Espero que tenga una buena idea de por qué el diseño de tarjeta de estilo está aumentando en popularidad. Y creo que esta tendencia que no va a morir en el corto plazo. Debido a que las tarjetas no son simplemente fáciles en los ojos, son uno de los formatos de disposición más flexibles para crear experiencias consistentes. Hoy en día la gente busca información rápidamente, y las tarjetas sirven bastante bien, independientemente del dispositivo. Y la gran experiencia del usuario se centra en la gente.

 

“Cuenta con una buena lista de iconos para tener preparada tus ilustraciones”