Cómo diseñar un prototipo basado en tarjetas


Ya una vez te compartí algunos consejos útiles para diseñar con tarjetas, o cards, por su nombre en inglés, pero hoy vengo dispuesta a mostrarte cómo realizar un prototipo basado en tarjetas paso a paso, pues cuando vamos a diseñar una web utilizando esta técnica siempre debemos tener una idea clara de cómo debe quedar ésta al final.

Lo mejor que tienen las tarjetas es que pueden brindar mucha información en muy poco espacio, y son además fáciles de implementar en el proceso de desarrollo, pero también muy sencillas de diseñar si sigues los pasos que verás ahora:

1. Determina contenido y forma

Claro, antes de hacer cualquier otra cosa, primero debes decidir qué irá dentro de cada tarjeta. Lo ideal sería que cada una contenga el mismo tipo de información, donde lo más común es integrar el título, una imagen y una breve explicación, como hacen la mayoría de los sitios web. Por ejemplo mira a [Pinterest][a1]:
01

Luego pregúntate: ¿las tarjetas serán del mismo tamaño? ¿Tendrán un estilo asimétrico o flexible? ¿Seguirán un flujo horizontal? Estas son cuestiones que también debes decidir antes de diseñar, pues otro elemento importante es la cuadrícula que las contendrá, es decir, no sólo la forma que van a poseer, sino también el modo en que deseas organizarlas.

2. Diseña una tarjeta de muestra

Ahora es el turno de diseñar tu primera tarjeta, la cual te servirá luego de plantilla para las demás. Aquí ten en cuenta elementos como: tamaño, compartimentos para texto, compartimentos para imagen, colores, líneas, etc. Puedes organizar el contenido de la forma que desees, pero si ese contenido no está determinado por el tamaño de la tarjeta (o sea, que éste puede variar), debes planear diferentes escenarios que vayan desde el más pequeño hasta el más grande.

Aquí recuerda que las personas somos “navegadoras visuales”, así que lo primero es darle prioridad a la imagen. Luego viene el título más grande, seguido del texto de anuncio o propaganda. Este es el esquema habitual de las tarjetas por dos razones: primero porque ordena los elementos de acuerdo al esfuerzo de lectura que conllevan, y segundo porque las personas ya han aprendido a esperarlo así:
![02][2]

3. Realiza variaciones

Si todas tus tarjetas serán iguales, sólo te queda replicar la plantilla que realizaste para llenar la página, pero si al contrario tendrán tamaños diferentes, debes ir variando esa plantilla. Por ejemplo:
![![03]]

Tres es un número ideal para comparar tamaños, y si decides cambiar el estilo todavía puedes hacerlo, así como resolver los problemas que pueden presentarse en cuanto a tipografía y ancho. Mientras, puedes ir valorando el impacto visual de tus tarjetas en diferentes circunstancias.

Por ejemplo, si queremos agregar un call-to-action al final de cada tarjeta, lo hacemos ahora para ver cómo queda, además de experimentar con diferentes imágenes de acuerdo a los contenidos que podrían tener (es mejor hacerlo ahora que cuando tengamos una cuadrícula llena de ellas):
![04][4]

4. Replica para simular el diseño final

Ya tenemos un contenido variado y todos los elementos que necesitamos, ahora es el momento de probar el diseño como un todo. Duplica cada tarjeta varias veces y ordénalas revolviéndolas por toda la página para probar con diferentes formas de organización:
![05][5]

Y ya está: aquí tienes como resultado un prototipo de composición basado en tarjetas que te dará (a ti y al cliente) una idea de lo que se puede esperar del diseño final.

Conclusiones

Utilizar diseños basados en tarjetas puede ser muy útil cuando se trata de organizar grandes cantidades de contenido, y como has visto aquí se trata además de una composición muy fácil de diseñar. El tamaño y estilo siempre dependerán de ti y de la estética que desees lograr, pero si necesitas inspiración te propongo visitar algunos sitios que cumplen con todos los requisitos de un buen diseño, por ejemplo:

http://MyCyberAcademy.com
http://www.polyvore.com
http://www.howarkitekter.se
https://www.etsy.com
http://www.formerlyyes.com
http://www.issuu.com

Espero que esta entrada te haya sido de ayuda, y si ya has diseñado con tarjetas no olvides compartir tus preferencias con todos. ¡Hasta la próxima!