diseño-pagina-web

El diseño de páginas web es muy dinámico. Siempre puedes ver que el ambiente se reconstruye con el surgimiento de nuevas tecnologías, técnicas, tendencias y estilos. Ahora el ambiente está cambiando, una vez más, con la llegada del nuevo marco de diseño basado en tarjetas.

En la actualidad, las tarjetas son casi omnipresentes, desde su uso en las tarjetas de presentación hasta el diseño de páginas web. Se han convertido en una buena opción para muchas páginas web debido a su adaptabilidad, clara estética y usabilidad.

Sin embargo, existen muchos malos entendidos acerca de lo que trata este diseño. Pero una cosa es cierta: una tarjeta no es un marco o un rectángulo en tu página web. No es solo un diseño. Para que cierto diseño califique como una tarjeta, debe tener funcionalidad y, si es posible, debe tener la opción de ser volteada.

Tal vez, la mejor metáfora que se puede usar para referirse al diseño web basado en tarjetas es un panqueque: es plano, pero tiene dos lados. Ese es el primer criterio, debe tener dos lados. No necesariamente debe tener la opción de ser invertido, pero cada tarjeta debe contener un resumen de la información que deseas brindar, pero con una invitación adjunta a hacer algo más.

En resumen, una tarjeta no solo es un bonito diseño, se trata de la usabilidad de tal diseño.

Diferentes tipos de estilos de diseño de páginas web basado en tarjetas

Las tarjetas en el diseño de páginas web han pasado por cambios significativos desde su nacimiento. Se han establecido como un patrón principal de las revistas, cuadrículas, diseño flat y formatos de diseño estilo pin. Pese a que existen diferentes técnicas, tiene el mismo concepto básico: un conjunto de información al cual el usuario puede acceder a través de un clic.

Existen diferentes estilo de diseño web basado en tarjetas

1. Diseño flat

El primer ejemplo del diseño web basado en tarjetas fue presentado por Microsoft en 2006 y se basó en el lenguaje de diseño Metro, que es bastante grande y colorido. Sin embargo, la versión moderna tiene más gradientes sombras y texturas que son parte de la técnica de diseño skeumorfista.

2. Diseño estilo revista

El diseño web estilo revista necesita un buen balance visual debido a las varias categorías de la tarjeta. Contiene un bloque con una imagen acompañada de texto que sirve como una pista hacia información más detallada en otra sección o página web. Como el nombre lo sugiere, se usa en revistas y páginas web nuevas, pero también es ideal para páginas web con bastante contenido pesado, como un blog o un portafolio, al igual que para las páginas web que son actualizadas con regularidad.

3. Estilo pin

Pinterest representa este estilo, que se ha convertido en una tendencia popular en las plantillas de WordPress. Durante sus primeras etapas, las tarjetas solo contenían enlaces y contenido específico. Ahora han evolucionado y contienen más enlaces y estilos de contenido, incluyendo videos, formularios, imágenes y herramientas para compartir en redes sociales. En algunas interfaces, las tarjetas incluyen pequeñas interacciones, como las notificaciones de Facebook.

4. Estilo cuadrícula

También conocido como estilo de mampostería, contiene bloques que se conectan perfectamente o son colocados en todo el diseño. Algunos diseños tienen patrones de estilo tipo contenedores que son entretejidos mientas otras páginas muestras imágenes y gráficos en una cuadrícula más tradicional.

¿Cómo usar las tarjetas en tu proyectos de diseño de páginas web?

Existen diversas razones por qué el diseño web basado en tarjetas es popular. Algunas de sus ventajas son:

  • Muchos estilos son compatibles con este formato, desde los diseños flat hasta los más complicados.
  • Funciona buen con diferentes tipos de contenido. Hace que el contenido sea fácil de entender.
  • Funciona buen con interfaces responsive.
  • Brinda una apariencia estructurada y organizada para contener bastante información.
  • Es fácil de compartir.

No existe un regla establecida para este tipo de arquitectura de diseño. Sin embargo, dos elementos casi siempre se encuentran en este tipo de diseño: la simplicidad y experiencia rica en contenidos. También existen otras técnicas de diseño que contribuyen a su estética y funcionalidad.

Te presentamos algunas normas que debes recordar al momento usar tarjetas en el diseño de páginas web.

Espacio, espacio, espacio

Un elemento en el diseño web basado en tarjetas en el espacio, espacio en blanco. Se necesita bastante espacio en blanco para colocar un foco de atención en cada elemento, de modo que sean vistos y entendidos. Imagina que todos estos elementos funcionen en un área de 600×600 píxeles: un encabezado, un botón de llamada a la acción, una imagen y un texto enlace.

Bastante espacio alrededor de cada elementos brinda a los usuarios tiempo para reajustar su vista mientras pasar a ver otra tarjeta. Colocar bastante relleno entre cada elemento también llama la atención a cada tarjeta, algo similar a cómo funciona la jerarquía de contenidos.

Un poco de información es suficiente

Es lógico mencionar, luego del espacio, que cada tarjeta debe tener una pieza de información. Este concepto unifica tanto la imagen y el texto de apoyo que da tu diseño la cohesión que necesita. Esto también hace que cada contenido funcione en el mismo espacio, de modo que se vea organizado e intencional. Además, permite a tus usuarios escoger el tipo de contenido que desean leer y compartir.

Una imagen clara y definida

En el diseño web basado en tarjetas, la imagen es lo más importante. Por lo tanto, necesitas usar una buena imagen, incluso en espacios reducidos, que llame la atención individualmente. Si no tienes una imagen, opta por un estilo artístico o un encabezado bastante creativo que llame la atención inmediatamente.

Tipografía sencilla

Tu tipografía debe ser colocar el centro de atención en tu imagen, no quitarla. Para lograr esto, escoge una fuente sencilla con colores fáciles de leer, como negro o gris. Algunas de las fuentes más populares son san serif medias o redondas porque su sensación de diseño neutral y facilidad de leer. También se recomienda usar un solo tipo de fuente en varios tamaños.

Detalle inesperado

Un elemento sorpresa hace milagros. Trata de añadir un detalle inesperado, como un efecto 3D o un borde angular para dar a tu diseño algo de estilo y énfasis. Otras técnicas que son efectivas son los efectos de activación o transparencias de colores. También podrías usar un efecto solo en las partes del contenido más significativas para balancear el peso visual de cada tarjeta.

Una cuadrícula abierta

Al igual que cada elemento de cada tarjeta es importantes, también lo es el espacio afuera de ellos. Crea una estructura tipo cuadrícula que contenga ciertos tipos de contraste, al igual que un espaciado suficiente entre cada tarjeta para brindar espacio para cada elemento. Esto es incluso más importante cuando consideras dónde pueden caer los puntos de quiebre en un diseño web responsive.

Usabilidad

El diseño de páginas web no solo conlleva estética, sino también usabilidad. El diseño debe incitar una acción en el usuario, ya sea un clic en el botón de suscripción, leer el resto del artículo o comprar un producto. El objetivo máximo de tu interfaz es brindar una interacción fácil que lleve a tus usuarios a una de las acciones mencionadas.

Aparte de eso, también debes considerar cómo funciona cada interacción, en especial en una plataforma móvil. Debes ir más allá de los clics y tratar, en su lugar, toques o deslizamientos. También asegúrate de que los botones sean bastante visibles y fáciles de usar, con suficiente espacio entre los objetos, de modo que puedas evitar que los usuarios toquen el botón erróneo.

Algunas de las mejores plantillas WordPress basadas en tarjetas

Te presentamos algunas de las mejores plantillas y temas WordPress que han incorporado el uso de tarjetas en algunos de sus aspectos de diseño.

diseño-pagina-web-1

1. Liesel – Plantilla para un café, restaurante o panadería ($ 59)

La plantilla Liesel es un buen ejemplo de un diseño web basado en tarjetas donde puedes mostrar tu cafetería y su menú de una manera bonita y profesional usando el plugin que permite voltear las tarjetas. Desarrollado por el equipo Dahz, la plantilla viene con un personalizador WordPress, un revolution slider, y galerías de portafolio. Aunque su diseño sea específicamente para restaurantes y empresas alimentarias, también es una plantilla idea para portafolios personales.

diseño-pagina-web-2

2. Flatoo – Plantilla para tarjetas de presentación y hojas de vida ($ 48)

Flatoo es una plantilla minimalista diseñada por Theme-Squared como una tarjeta de presentación profesional y multipropósito donde puedes colocar información personal. Ya sea que seas un creativo, un informático o una persona de negocios, esta plantilla es un buen inicio para crear una hoja de vida online impresionante.

diseño-pagina-web-3

3. AWSM – Plantilla responsive para hojas de vida ($ 14)

AWSM es una plantilla divertida ideal para un CV o portafolio. Contiene diferentes esquemas de colores que te permitirán presentar tu perfil de forma profesional. Algunas características que ayudan a su apariencia profesional son CAPTCHA y Google maps, al igua que aminaciones CSS3 y jQuery.

diseño-pagina-web-4

4. AgriTourismo – Plantilla WordPress wooComerce ($ 58)

Aunque AgriTourismo fue creado especialmente para viñedos, también funciona bien con otro tipo de empresas, como ecommerce, widgets de Twitter, botones para compartir en redes sociales y muchos más. Viene con Visual Composer, un componente que te permite arrastrar y soltar cada elemento, lo que te ahorra mucho tiempo.

Clasificando tus tarjetas

Una vez que el diseño esté preparado, la siguiente gran pregunta es qué información o contenido irá en cada tarjeta. Algunas de las preguntas que pueden surgir son: «¿La información debe ser agrupada por tipo o tema?», «¿En qué categoría va la sección de preguntas frecuentes?» La mejor forma de organizar todo este contenido de forma amigable con el usuario es a través de la clasificación de tarjetas.

Puedes hacer esto usando un lápiz y un papel o una página web especializada en clasificación de tarjetas, como ConceptCodify u Optimal Workshop. Cada método tiene sus ventajas y desventajas, aunque el método tradicional tiene un toque personal. Si optas por la segunda opción, aquí tienes unos consejos que debes considerar:

Prepara tus tarjetas

Crea una hoja de cálculo que contenga todas las cosas o secciones que probarás. Estos pueden incluir categorías de productos, etiquetas o páginas en un mapa de sitio. Escribe cada una de estas secciones en una sola tarjeta y un número en la lado opuesto. Si vas a crear un sistema grande, divide estas tareas en bloques.

Elige los procesos que usarás

Al organizar y analizar los resultados, puede escoger llevar a cabo una sesión individual o grupal. Tu elección dependerá en la complejidad del sistema que estás diseñando y del presupuesto que tienes. Si vas a llevar a cabo un sesión grupal,el número de participantes ideal que te permitirá contar con un resultado estadísticamente útil es de 15 personas como mínimo.

Busca participantes

Una vez que tengas todas las herramientas y procesos listos, es hora de buscar participantes. Busca personas que ya sean usuarios de páginas web o que estén familiarizados con el sistema o nicho que estás tratando de construir.

Alista todo

Antes de que inicie la sesión de clasificación de tarjetas, brinda instrucciones claras a los participantes. Explica que deseas organizar las cartas en grupos que tengan sentido para ellos y que no existen respuestas correctas o equivocadas. Mientras se lleva a cabo el proceso, puedes ser el moderador y responder las preguntas que los participantes puedan tener.

Analiza

Una vez que el proceso haya terminado, es hora del análisis. Comprende las tendencias y las cosas que se relacionan entre sí al mirar las secciones que aparecen juntas la mayor cantidad de veces, nuevas etiquetas creadas, secciones que que fueron colocadas más de una vez en un grupo y secciones con las que los participantes tuvieron dificultades.

Conclusión

Las tarjetas son uno de los formatos de diseño web más flexibles que crean un experiencia de usuario consistente. Son placenteras a la vista y, porque los usuarios buscan constantemente formas de obtener información con más rapidez, un diseño de páginas web basado en tarjetas brinda todo esto de forma rápida y sencilla.

En Staff Creativa usamos este y otros estilos y tendencias de diseño de páginas web. Diseñamos páginas web funcionales de acuerdo a tus necesidades. Confía en nosotros y contáctanos.

Este artículo fue originalmente publicado en 1st web designer, y ha sido traducido y adaptado al español por Staff Creativa, agencia de marketing digital en Lima, Perú. Si encuentras contenido online en inglés sobre diseño de páginas web, gestión de imagen corporativa, marketing digital o packaging, no dudes en contactarnos. Nos encargaremos de traducirlo y publicarlo, y te avisaremos!

Deja una respuesta