Card-based design: Pongamos las cartas sobre la mesa

Desde su inclusión dentro del sistema de búsqueda de Google para móviles, allá por el 2012, soy bastante «fan» de Google Now. Aunque ni yo ni nadie lo pedimos, de pronto todos podíamos visualizar en nuestro dispositivo móvil la predicción meteorológica para toda la semana sin mover ni un dedo e incluso conocer, en tiempo real, el resultado de los partidos de fútbol de nuestro equipo favorito (ver Fig.1). Pero no es de la capacidad de recomendación y personalización de este sistema de Google de lo que quiero hablar en esta entrada, sino del patrón de diseño que aplica para presentar la información, el cuál es denominado en inglés como «Card-based design» (en castellano puede ser traducido como «Diseño basado en tarjetas»). Este patrón de diseño puede ser englobado dentro del lenguaje visual lanzado por Google el pasado mes de Junio, Material Design, lenguaje del que ya hablábamos en una entrada anterior del blog.

Fig. 1. Tarjeta ofrecida por Google Now sobre el resultado de un partido de fútbol

¿Y por qué merece la pena hablar de este patrón de diseño si solo lo utiliza Google? Pues porque eso no es del todo cierto. Por el contrario, existen numerosos ejemplos de otros «gigantes» que también lo están aplicando, tales como Twitter, Spotify o Pinterest que lo han elevado a la categoría de patrón de diseño y que lo hacen digno de prestarle un poco de atención. Es más, recientemente ha sido caracterizado por la reputada revista UX Magazine como una de las principales tendencias de diseño para dispositivos móviles y pantallas de dimensiones reducidas del año 2015. Pero, ¿y qué se entiende realmente por tarjeta en este contexto? ¿Y cómo utilizarlas y por qué? He aquí el quid de la cuestión. Antes de aplicar un patrón de diseño, primero se debe conocer el problema que resuelve y sus características básicas a fin de discernir si realmente aplica a nuestro caso. Teniendo en cuenta esto, esta entrada trata de arrojar un poco más de luz sobre el «Diseño basado en tarjetas» estableciendo sus características básicas y mostrando algunos buenos ejemplos de su utilización. Pues venga, ¡vamos a ello!