La arquitectura de estilo de tarjeta es una de las cosas más importantes en diseño web, y en particular el diseño móvil. Desde aplicaciones a sitios web receptivos, el formato de estilo de tarjeta aparece en todas partes.
Y por una buena razón. El diseño de la tarjeta móvil se ve bien, funciona bien en una variedad de dispositivos y crea una organización distinta y un método para la entrega de contenido. Es por eso que muchas marcas grandes y conocidas utilizan el formato de tarjeta y muchos grupos más pequeños de diseño y desarrollo están siguiendo su ejemplo.
¿Qué es el diseño de tarjetas?
Los estilos de diseño de tarjetas para sitios web móviles y de escritorio se definen por una parte del contenido en caja que parece que aparece en una especie de tarjeta de juego. Los cuadros de estilo de tarjeta generalmente contienen un bit único de contenido o información y generalmente están orientados verticalmente.
Pero como con cualquier técnica de diseño, hay muchas maneras de romper las reglas. El principio básico detrás de la idea es dar una ráfaga de información de una manera que sea fácil de ver y digerir de una vez. Los sitios populares para compartir redes sociales como Twitter y Pinterest utilizan este formato para agrupar imágenes y publicaciones.
¿Qué tiene de bueno una tarjeta digital? Es que puede ser manipulado de varias maneras. Pueden aparecer apilados individualmente (como suele ser el caso para el diseño móvil) o caer en una cuadrícula para pantallas más grandes. Las tarjetas pueden ser cortas o altas y diseñadas para ajustarse de acuerdo con el contenido contenido en ellas.
El diseño estilo tarjeta también es popular para los marcos de respuesta porque los diseñadores pueden agregar y contraer columnas de tarjetas para adaptarse a la forma y el tamaño de la pantalla. Mientras que la mayoría de los diseñadores diseñan tarjetas con un ancho fijo y permiten que la altura de la tarjeta permanezca variable.
Cómo pueden funcionar las tarjetas para tu proyecto
Las tarjetas son una opción moderna debido a su flexibilidad y amplia gama de uso. (También ayuda que algunos de los sitios web más populares del mundo hayan usado algún tipo de tarjeta en las últimas iteraciones de diseño: Google, Microsoft, Facebook, Twitter, Pinterest y Buzzfeed, entre otros).
Pero, ¿quieres usar un concepto de estilo de tarjeta? Esta técnica de diseño tiene bastantes ventajas:
- Hace que el contenido sea fácil de digerir.
- Hay muchos estilos de diseño que funcionan en este formato, desde el plano hasta el embellecido.
- Las tarjetas funcionan bien en marcos de respuesta.
- El formato tiene una apariencia que está organizada y proporciona una estructura para mucha información.
- Funciona bien para muchos tipos diferentes de contenido.
- Los diseños estilo tarjeta se hacen prácticamente para compartir en las redes sociales.
Diseña una gran tarjeta
El mejor diseño de tarjeta es simple. También cuenta con una rica experiencia de contenido. Para que un proyecto de estilo de tarjeta tenga éxito, ambos elementos deben estar presentes. Pero hay muchas otras técnicas de diseño que también pueden agregar funcionalidad y estética.
Lo bueno de las tarjetas es que realmente no hay un conjunto de reglas de diseño que debas seguir. Los principios básicos de un buen diseño son todo lo que necesita comprender para comenzar a hacer un proyecto de estilo de tarjeta.
Usa mucho espacio
El espacio es un factor común en los proyectos de diseño tipo tarjeta. En particular, un montón de espacio en blanco. Es importante que cada elemento individual sea visto, leído y comprendido. Esto es especialmente cierto en un bloque que a menudo contendrá un? Mini diseño? de su propia. Piénselo de esta manera: si cada tarjeta en su proyecto contiene una imagen, título, texto de copia principal, botón de llamada a la acción y botón o enlace para compartir, hay un mínimo de cinco elementos para trabajar en un espacio de aproximadamente 600 píxeles de ancho. .
Tener un montón de espacio alrededor de cada elemento proporciona a los usuarios tiempo para restablecer visualmente cuando se mira de un elemento a otro o de tarjeta en tarjeta. Incluir un montón de relleno entre los elementos también ayudará a enfocar y prestar atención a través de la tarjeta de una manera que funcione con la jerarquía de contenido.
Una pieza de información por tarjeta
Ya hemos determinado que la tarjeta contendrá múltiples elementos dentro de un diseño, pero cada uno debe centrarse en solo un bit de información o contenido. Siga el concepto de una idea por bloque para que la imagen y todo el texto de apoyo estén unificados.
Esta idea puede hacer que un contenido que puede variar dramáticamente funcione en el mismo espacio, pareciendo intencional y organizado. Brinda a los usuarios la oportunidad de elegir y elegir las partes de su cartera de contenido que desean consumir y compartir.
Seleccione una imagen clara y nítida
La imagen es rey del espacio de diseño de la tarjeta. Necesita una gran imagen, y debe ser excelente incluso cuando es pequeña, para atraer a los usuarios a cada tarjeta individual. (Recuerde que este es un espacio de internet lleno de gente).
Si no tiene una imagen, elija el estilo de arte o cree un texto que no pueda evitar atraer a los usuarios. (Recuerde que la llama "escape" a fines de febrero se volvió viral gracias a los grandes escritores de titulares).
Usa tipografía simple
Opte por tipografías sencillas en colores sencillos y fáciles de leer (los negros y grises son populares) que se mantienen fuera del camino del diseño. Los sans serifs medianos a redondos son populares por su legibilidad y una sensación de diseño neutral.
Limita el número de tipografías también. Para la mayoría de los proyectos de tarjetas, un solo tipo de letra es suficiente. Considere usar una variación en negrita, pero en la mayoría de los casos, las diferencias de tamaño son todo lo que necesita para aprovechar al máximo el texto. (Mientras lo hace, asegúrese de limitar también el número de palabras. Un pensamiento por tarjeta).
Incluir un detalle inesperado
Si bien las interfaces de estilo de tarjeta a menudo son sencillas, agregar un detalle inesperado puede darle la cantidad justa de estilo. Considere un recorte o esquina recortada, borde en ángulo o efecto 3D para agregar énfasis a las tarjetas.
Otras técnicas, como la superposición de colores o los efectos de desplazamiento, pueden ser igualmente agradables. También considere agregar un efecto a solo los bits de contenido más significativos para que cada tarjeta no sea del todo equivalente en términos de peso visual.
Crear una rejilla abierta
Este podría ser el concepto más difícil de entender, según cómo se desarrolle su proyecto de diseño. ¿Tan importante como el diseño de cada tarjeta es el? Afuera? Espacio entre cada elemento.
Cree un marco de cuadrícula que incluya algún tipo de contraste con cada tarjeta. Diseñe el marco para que el espacio sea consistente de tarjeta a tarjeta y para que haya suficiente espacio entre cada elemento. Esto podría ser aún más en juego cuando se piensa en dónde podrían caer los puntos de interrupción en un marco de respuesta con tarjetas de ancho fijo en particular.
Considerar usabilidad
Una tarjeta debe ser más que un elemento de diseño; debería ayudar a un usuario a realizar algún tipo de acción. Desde la lectura de una historia o un artículo hasta la suscripción a un boletín electrónico o la compra, la interfaz de la tarjeta debe proporcionar una interacción fácil.
Considera cómo funcionan estas interacciones también. Ir más allá del clic. Muchos proyectos de diseño con tarjetas se consumirán en dispositivos móviles. Considere las interacciones que utilizan los toques y golpes en lugar de clics tradicionales. Asegúrese de que los botones o acciones sean fáciles de ver y realizar, incluido tener suficiente espacio entre los objetos para tocarlos con facilidad y sin activar el elemento equivocado.
Conclusión
Los proyectos de diseño tipo tarjeta son divertidos, modernos y funcionales. El uso de algunos de los principios básicos del diseño lo ayudará a crear un mazo de cartas que sea estéticamente agradable y funcional.
La idea número 1 a tener en cuenta es la simplicidad. Todo sobre el diseño de una tarjeta debe ser fácil de leer y entender. ¡Buena suerte con tu proyecto!