La guía completa para un diseño efectivo de interfaz estilo tarjeta
La arquitectura de estilo de tarjeta es una de las cosas más importantes en el diseño web, y el diseño móvil en particular. Desde aplicaciones hasta sitios web receptivos, el formato de estilo de tarjeta está apareciendo 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 están utilizando el formato de tarjeta y muchos grupos más pequeños de diseño y desarrollo están siguiendo su ejemplo.
Explore los elementos de Envato
¿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 un contenido en caja que parece que aparece en una especie de tarjeta de juego. Las cajas de estilo de tarjeta generalmente contienen un bit único de contenido o información y generalmente están orientadas 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 explosión de información de una manera que sea fácil de ver y digerir de una vez. Los sitios populares para compartir en redes sociales como Twitter y Pinterest usan este formato para agrupar imágenes y publicaciones.
Lo bueno de una "tarjeta" digital es que puede manipularse de varias maneras. Pueden aparecer apilados individualmente (como suele ser el caso del diseño móvil) o caer en una cuadrícula para pantallas más grandes. Las tarjetas pueden ser cortas o altas y están diseñadas para ajustarse de acuerdo con el contenido contenido.
El diseño de estilo de tarjeta también es popular para marcos receptivos 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 su 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 utilizado alguna forma de tarjeta en iteraciones de diseño recientes: Google, Microsoft, Facebook, Twitter, Pinterest y Buzzfeed, por nombrar algunos).
¿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 planos hasta embellecidos.
- Las tarjetas funcionan bien en marcos receptivos.
- El formato tiene una apariencia organizada y proporciona estructura para mucha información.
- Funciona bien para muchos tipos diferentes de contenido.
- Los diseños de estilo de tarjeta están hechos prácticamente para compartir en las redes sociales.
Diseña una gran carta
El mejor diseño de tarjeta es simple. También presenta una rica experiencia de contenido. Para un proyecto de estilo de tarjeta exitoso, ambos elementos deben estar presentes. Pero hay muchas otras técnicas de diseño que también pueden agregar funcionalidad y estética.
Lo mejor de las tarjetas es que no hay realmente un conjunto puro de reglas de diseño que tengas que seguir. Los principios básicos del buen diseño son todo lo que necesita comprender para comenzar a hacer un proyecto de estilo de tarjeta.
Use mucho espacio
El espacio es un factor común en los proyectos de diseño tipo tarjeta. En particular, mucho espacio en blanco. Es importante dar a cada elemento individual espacio para ser visto, leído y entendido. Esto es especialmente cierto en un bloque que a menudo contendrá un "mini diseño" propio. Piénselo de esta manera: si cada tarjeta en su proyecto contiene una imagen, título, texto de copia principal, botón de llamado a la acción y botón para compartir o enlace, hay un mínimo de cinco elementos para trabajar en un espacio de aproximadamente 600 píxeles de ancho .
Tener mucho espacio alrededor de cada elemento brinda a los usuarios tiempo para reiniciar visualmente cuando miran de un elemento al siguiente o de una tarjeta a otra. Incluir un montón de relleno entre los elementos también ayudará a atraer la atención y el enfoque 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 un solo bit de información o contenido. Siga el concepto de una idea por bloque para que la imagen y todo el texto de soporte estén unificados.
Esta idea puede hacer que el contenido que podría ser dramáticamente variado funcione en el mismo espacio, pareciendo intencional y organizado. Ofrece a los usuarios la oportunidad de elegir las partes de su cartera de contenido que desean consumir y compartir.
Seleccione una imagen clara y nítida
La imagen es el 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 abarrotado).
Si no tiene una imagen, elija un estilo artístico o cree texto que no pueda evitar atraer a los usuarios. (Recuerde la llama "escape" a finales de febrero que se volvió viral gracias a los grandes escritores de titulares).
Usar tipografía simple
Opte por tipos de letra simples en colores simples y fáciles de leer (los negros y grises son populares) que se mantienen fuera del camino del diseño. Los sans serif medianos a redondos son populares por su legibilidad y una sensación de diseño neutral.
Limite la cantidad de tipos de letra 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 la cantidad de palabras también. 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 recortado o en una esquina, un borde en ángulo o un efecto 3D para agregar énfasis a las tarjetas.
Otras técnicas como las superposiciones de color o los efectos de desplazamiento pueden ser igualmente agradables. También considere agregar un efecto solo a los fragmentos de contenido más significativos para que cada tarjeta no sea completamente igual en términos de peso visual.
Crear una cuadrícula abierta
Este podría ser el concepto más difícil de entender, dependiendo de cómo se combine su proyecto de diseño. Tan importante como el diseño de cada tarjeta es el espacio "exterior" entre cada elemento.
Cree un marco de cuadrícula que incluya algún tipo de contraste con cada tarjeta. Diseñe el marco de modo que el espacio sea consistente de una tarjeta a otra y de manera que haya mucho espacio entre cada elemento. Esto podría entrar aún más en juego cuando se piensa dónde pueden caer los puntos de interrupción en un marco receptivo con tarjetas de ancho fijo en particular.
Considerar usabilidad
Una tarjeta debe ser más que un simple elemento de diseño; debería ayudar a un usuario a realizar algún tipo de acción. Desde leer una historia o un artículo hasta suscribirse a un boletín electrónico o realizar una compra, la interfaz de la tarjeta debe proporcionar una interacción fácil.
Considere cómo funcionan estas interacciones también. Ve más allá del clic. Muchos proyectos de diseño con tarjetas se consumirán en dispositivos móviles. Considere las interacciones que usan toques y deslizamientos en lugar de clics tradicionales. Asegúrese de que los botones o las acciones sean fáciles de ver y realizar, incluido tener suficiente espacio entre los objetos para tocarlos con facilidad y sin activar el elemento incorrecto.
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 una baraja 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 comprender. ¡Buena suerte con tu proyecto!
