Diseño basado en tarjetas. Pros, contras y 5 consejos útiles


Hoy vengo a comentarte sobre una de las tendencias que, aunque no tan joven, hoy por hoy pisa firme una vez más en el mundo del diseño web: el uso de tarjetas, es decir, la unión de imágenes, texto y enlaces en un mismo bloque rectangular que brinda información sobre un tema específico.

La utilización de tarjetas le permite al diseñador organizar grandes cantidades de contenido sin afectar la estética de la página, sobre todo en estos tiempos donde el diseño plano se utiliza mucho, además de que proporcionan una vía rápida y fácil para que el usuario lea, comprenda e interactúe.

Sus ventajas son evidentes, pues pueden utilizarse en todo tipo de diseño, desde el más plano o minimalista hasta el más adornado. Son fáciles de compartir o enviar y le permiten al usuario abarcar toda la información presente en la página de un vistazo y escoger la que necesite.

Además, esta técnica se lleva muy bien con el diseño adaptable o responsive (en inglés), pues las tarjetas, al ser también de naturaleza adaptable, son muy fáciles de usar y escalar, además de que permiten agregar una buena cantidad de contenidos diferentes en la interfaz de manera simple y ordenada.

Sin embargo, como cualquier técnica de diseño, las tarjetas presentan algunas desventajas que debes tener en cuenta. Por ejemplo:

  • Su estilo puede parecer aburrido o imitado, sobre todo en páginas que reutilizan el diseño de Pinterest o Facebook.
  • Cuando son utilizadas en webs con mucha información, pueden abrumar o provocar confusión.
  • Es difícil crear diseños originales y atractivos apoyándose sólo en tarjetas.
Página Inicial de Pinterest. Todos los elementos son tarjetas

Página Inicial de Pinterest. Todos los elementos son tarjetas

Dashboard de WordPress. Widgets basados en tarjetas

Dashboard de WordPress. Widgets basados en tarjetas

No obstante, si tienes en cuenta la teoría del diseño y le pones una buena dosis de creatividad, de seguro podrás superar estas dificultades y conseguir una página muy funcional y atractiva, para lo cual te traigo ahora unas sencillas recomendaciones que pueden ayudarte, aunque aclarando que son sólo algunas pautas, pues en este caso no se han establecido reglas puras de un diseño a seguir:

1. Usa bien el espacio

El espacio en blanco es un buen aliado para organizar la página y separar los elementos dentro de cada tarjeta, evitando así la sobresaturación. Por tanto, no abuses de la cantidad de bloques a incluir uno al lado del otro, mejor ordénalos en el espacio que posees de forma tal que la página respire y no se vea atiborrada.

Para esto puedes asignarle un tamaño estándar a cada tarjeta, o bien trabajar en una composición que te permita organizar el espacio a partir de diferentes tamaños, los cuales puedes combinar para que se vea mejor.

2. Incluye un tema por tarjeta

Piensa en cada tarjeta como un elemento individual, ya sean temas, artículos u otros elementos. No agrupes más de uno en una tarjeta para evitar confusiones y mantener el diseño fresco.

3. Muestra una idea clara

Las tarjetas deben ser diseñadas de forma tal que el usuario pueda saber de qué se trata con sólo echar un vistazo. Para lograrlo puedes apoyarte en imágenes (la imagen es uno de los componentes más importantes) y en textos de apoyo que expliquen de manera breve y concisa de qué trata el contenido.

Aquí también debes tener en cuenta dos elementos: el espacio, pues tanto la imagen como el texto deben adaptarse al tamaño de la tarjeta; y la tipografía a utilizar, que debe ser bien clara y comprensible.

4. Prioriza la usabilidad

Esto es bien sencillo: cada tarjeta debe hacer lo que se supone que hace, es decir, los enlaces deben ubicarse de forma tal que funcionen dando clic en cualquier lugar dentro de la tarjeta, y no obligando al usuario a pulsar un punto específico.

Además, ten en cuenta los tamaños y la escala, pues si bien algunos diseños pueden acomodar tarjetas grandes, la mayoría requiere tamaños más pequeños para trabajar en resoluciones menores como las de los móviles.

5. Sé original

Aunque la teoría del diseño es más o menos la misma para todos, siempre dale un poco de ti a lo que diseñas para diferenciarte de los que otros hacen o han hecho. Aquí puedes apoyarte en efectos animados, videos, gamas de colores, efectos 3D, transparencias… lo que prefieras, y así aportarle a tus tarjetas tu sello personal.

Conclusiones

Como has podido ver en esta entrada, el diseño de una interfaz a partir de tarjetas será siempre tan fuerte como lo sea el diseño individual de sus componentes. Por eso, si haces buen uso del color, la letra, el tamaño y el espacio lograrás una perfecta armonía visual que además tendrá gran funcionalidad y rendimiento, y eso es sin dudas un buen diseño web.

Así que, cuéntame, ¿te atreves a diseñar con tarjetas? ¿Ya lo has hecho? Déjame saber tus opiniones y comparte tus ideas con nosotros.