Índice de contenidos
¿Qué es una tarjeta en el diseño de UI?
Las tarjetas en los diseños de UI son rectángulos/cuadrados en un área autónoma. El contenido en ellas está separado de otros elementos en la página, lo que puede afectar la legibilidad.
Deberías usar tarjetas en el diseño de UI cuando quieras que los visitantes se centren en aspectos específicos de la información.
¿Cuál es la anatomía de una tarjeta de UI?
Las tarjetas de UI normalmente tienen estas características:
- Contenedores: El contenedor es la forma en la que se guarda el contenido.
- Encabezados: El título/encabezado principal; esto no es una necesidad absoluta.
- Imagen/Icono: Este es algún tipo de contenido visual, como una foto o un logotipo; nuevamente, esto no siempre es necesario.
- Cuerpo: Donde el texto y otros aspectos van dentro de la tarjeta.
- Pie de página: Se usa para metadatos y otras formas de información adicional; esto, como los encabezados y las imágenes/iconos, es opcional.
¿Cómo funciona el diseño de tarjetas?
Los diseños de tarjetas organizan visualmente la información al agrupar aspectos relacionados. Dependiendo del contenido de tu tarjeta, podrías querer agregar enlaces y otros aspectos interactivos.
¿Cuáles son los beneficios de usar diseños de tarjetas en UI?
Algunas de las razones para considerar el uso de tarjetas en el diseño de UI son:
- Organización visual: Usa tarjetas si necesitas que la información compleja sea más legible.
- Escaneo: La información debe ser fácil de encontrar dentro de las tarjetas de la interfaz de usuario para simplificar la lectura.
- Adaptabilidad: Usa diseños de tarjetas para presentar información en diferentes tamaños de pantalla.
- Versatilidad: Deberías usar diseños de tarjetas si tienes que presentar diferentes tipos de contenido.
- Compromiso del usuario: Agrega elementos interactivos, como botones.
¿Cuáles son algunos casos de uso comunes para los diseños de tarjetas?
Algunos ejemplos en los que verás diseños de tarjetas utilizados incluyen:
- Listados de Productos: Las tiendas de comercio electrónico utilizan diseños de tarjetas para resaltar los precios y las descripciones de los productos. También se utilizan títulos, imágenes y otros elementos (por ejemplo, calificaciones con estrellas).
- Noticias/Feeds de Artículos: Las publicaciones, los blogs y otras empresas pueden utilizar diseños de tarjetas para resumir artículos y añadir una imagen destacada, y el titular también puede aparecer aquí.
- Contenido de Redes Sociales: El texto, las fotos y los videos extraídos de las redes sociales se pueden usar en tarjetas. A veces, verás que esto aparece como una inserción en los artículos.
- Widgets del Panel de Control: Los resúmenes de datos, las estadísticas y otras métricas pueden incluirse en las tarjetas de widgets del panel de control dentro de diferentes herramientas de software.
- Resultados de la búsqueda: Los diseños de tarjetas a veces se utilizan en los resultados de búsqueda; aquí verá fragmentos de información y enlaces. A continuación, puede hacer clic en un resultado.
Estos son algunos de los casos en los que verá diseños de tarjetas utilizados en línea. Los diseñadores y desarrolladores deben considerar cómo organizan la información y maximizan el atractivo visual, al mismo tiempo que consideran la experiencia del usuario.
Conclusión
Los diseños de sitios web modernos constan de muchos elementos, uno de los cuales son los diseños de tarjetas. Aprenda los conceptos básicos del diseño de tarjetas para poder crear un sitio web que impulse el tráfico e interactúe con su público objetivo.
