Marketing

Tendencia de diseño: interfaz de usuario de tarjeta plana

Tendencia de diseño: interfaz de usuario de tarjeta plana 1

Las tarjetas han sido un elemento de diseño popular durante algún tiempo. Su apariencia y función han seguido evolucionando de muchas maneras, desde tarjetas diminutas que se parecen más a un botón de tamaño completo hasta tarjetas de pantalla completa o pantalla dividida que denotan la funcionalidad de hacer clic o tocar.

La razón por la que esta tendencia sigue siendo popular es por esta última. Las tarjetas indican de forma innata a los usuarios un elemento funcional.

La iteración de tarjetas más popular en estos días es en un estilo súper plano que funciona con casi cualquier tipo de contenido. Si bien cada ejemplo a continuación es diferente, una cosa es la misma: combinar elementos de tarjeta en un estilo simple.

Veamos una selección de sitios que muestran esta tendencia de diseño y cómo puede hacer que funcione para usted.

seguir al líder

Tendencia de diseño: interfaz de usuario de tarjeta plana 2

Cuando los diseñadores de Google hacen algo, gran parte del mundo los sigue. El sitio web Best Things de Google, arriba, es un ejemplo clásico de esto.

Lo bueno de cada tarjeta es que no se pegan a la pantalla. Parece moverse y durar para siempre, lo cual es una buena característica para un diseño que está contenido en un lienzo.

Después de hacer clic en cualquier elemento de la tarjeta, obtienes aún más tarjetas. Se combinan con más texto para ayudarlo a navegar y obtener información, así como enlaces para ayudarlo a comprar las “mejores cosas” que encuentre con este diseño.

Lo que hace que tantas cartas funcionen juntas es que nada se siente demasiado pesado o abrumador. Todo tiene la misma forma, el estilo y el peso se mezclan y combinan con las opciones de texto de la lata de color.

Interacción fácil

Tendencia de diseño: interfaz de usuario de tarjeta plana 3

Los sitios de viajes son una industria que usa bien las tarjetas y continúa trabajando con ellas. Cada pequeña tarjeta ayuda al usuario a tomar una decisión de viaje con facilidad.

En los ejemplos anteriores, las tarjetas de elección ocupan el centro de la pantalla con un fondo de video. La simplicidad y la escala de las tarjetas son excelentes socios para obtener imágenes asombrosas.

La combinación hace que quieras reservar un viaje ahora.

Color e ilustración

Tendencia de diseño: interfaz de usuario de tarjeta plana 4

La tendencia de diseño de sitios web de tarjetas funciona bien para ilustraciones y elementos de contenido alternativo que necesitan un contenedor para mantenerlos juntos.

El equipo de diseño del sitio web de Heartcore, arriba, es un excelente ejemplo. Sin los fondos de color de cada tarjeta, la información que contiene, la ilustración y el elemento de texto, puede parecer que flota aleatoriamente en la pantalla.

Esta técnica reúne todo de una manera que unifica contenido y diseño. Es fácil de leer, tiene un tacto agradable y la interacción implícita es fácil de entender.

Gran tamaño para blogs

Tendencia de diseño: interfaz de usuario de tarjeta plana 5

Uno de los tipos de contenido que realmente puede beneficiarse de una estética similar a una tarjeta es el de los blogs. La diferencia en este ejemplo es que cada tarjeta tiene un diseño plano.

Las tarjetas de estilo blog suelen ser un poco más pesadas que las que ves aquí. El diseño utiliza una tarjeta distinta que abarca todo el lienzo sobre el pergamino y más líneas implícitas de tarjetas que utilizan algunos de los mismos elementos de diseño a continuación.

La naturaleza abierta de los elementos de la tarjeta aquí, además de la tarjeta de héroe, evita que el diseño se vuelva demasiado pesado y ayuda a fomentar el flujo de lectura.

Resaltar el contenido principal

Tendencia de diseño: interfaz de usuario de tarjeta plana 6

Las tarjetas también son una excelente manera de dirigir a los usuarios a los principales elementos de contenido en la pantalla. Usando tarjetas que presentan imágenes más pequeñas (insertadas) o bloques de colores con texto, el ojo gravita hacia ciertas partes de la pantalla.

La tarjeta, aunque llamativa, proporciona un contenedor separado para el contenido para mantener los elementos separados y garantizar la legibilidad. La capa adicional, como se ve en el ejemplo anterior, agrega profundidad para que el diseño se vea más envolvente.

LEER  Capitulo 04 - Behind Success con Jivan VInod

Siga desplazándose (tendrá que hacer clic en el ejemplo) para ver otros bloques de estilo de tarjeta para contenido de blogs y testimonios.

Crea letras en pantalla completa

Tendencia de diseño: interfaz de usuario de tarjeta plana 7

Las tarjetas no tienen que ser pequeñas para ser efectivas. A veces, varios elementos de la tarjeta, incluida la pantalla completa, pueden ayudar a crear la experiencia de usuario adecuada.

El ejemplo anterior usa una tarjeta de pantalla completa sobre el pergamino y luego una cuadrícula de tarjetas más pequeñas debajo. La tarjeta de héroe de gran tamaño informa a los usuarios que este es el contenido más importante disponible en este sitio … pero hay más si lo desea.

El diseño aquí es especialmente bueno porque, aunque la tarjeta superior es enorme en comparación, el contenido tiene el mismo peso. Esto proporciona un buen equilibrio visual que hace que desee interactuar aún más con el diseño.

Para comercio electrónico

Tendencia de diseño: interfaz de usuario de tarjeta plana 8

Desde el punto de vista del diseño, la otra cosa que hace bien este ejemplo es asegurarse de que cada fila de tarjetas se asiente bien en la pantalla.

Si bien no es algo que vea todo el tiempo, las tarjetas también pueden funcionar para el comercio electrónico. Las tarjetas ayudan a crear una clara diferenciación entre productos y categorías.

Good Garms, arriba, usa una animación sutil con cada tarjeta que muestra otra vista del producto. Este uso de tarjetas ayuda a simplificar el desorden de información del producto y permite a los clientes ver más artículos a la vez y compararlos en la pantalla.

Lo que hay que tener en cuenta sobre el uso de tarjetas para el comercio electrónico es que, si bien pueden funcionar bien para tiendas con pocos artículos, puede resultar un poco abrumador visualmente si hay muchos artículos para explorar.

Desde el punto de vista del diseño, la otra cosa que hace bien este ejemplo es asegurarse de que cada fila de tarjetas se asiente bien en la pantalla. El uso de una cuadrícula compacta crea un sentido de organización con tarjetas que funcionan bien para el comercio electrónico. Más estilo de mampostería puede agregar un truco más y desanimar a los usuarios.

Compromiso táctil

Tendencia de diseño: interfaz de usuario de tarjeta plana 9

Una de las cosas que realmente distingue a los elementos de diseño de tarjetas planas es la interacción táctil y el compromiso, lo que significa que cada tarjeta funciona como una tarjeta en la vida real.

En el ejemplo de Raps Rape anterior, cada carta se voltea de la misma manera que lo haría con una carta de juego en una mesa.

Hay un equilibrio complicado para que funcione en términos de velocidad de movimiento y contenido “delante” y “detrás” de cada carta. (Casi necesitas que la parte delantera y trasera sean intercambiables).

Juega con rapidez si pruebas esta técnica y obtienes muchas opiniones sobre cómo es el movimiento y si todo es fácil de entender.

Conclusión

Una de las mejores cosas de una interfaz tipo tarjeta es que proporciona control y coherencia en todos los dispositivos. Las tarjetas se pueden expandir o volver a apilar en pantallas más grandes y luego caer verticalmente en pantallas más pequeñas sin alterar la apariencia del diseño.

Así que las cartas son el botón definitivo. Con una gran área de clic (o área táctil), es fácil crear y fomentar la interacción con grandes puntos de contacto. (¿No obtiene el compromiso que desea en una interfaz de estilo de tarjeta? Considere la posibilidad de crear un botón con una llamada a la acción directa dentro de cada tarjeta, mientras mantiene la interactividad completa de la tarjeta).

Con tantas formas de usar las tarjetas, no es de extrañar que esta tendencia de diseño de sitios web vuelva a aparecer en oleadas. Diviértete con eso.

Por favor califica el contenido

/ 5

Your page rank:

Author

Moisés Cabrera

Encantado de emprender, el Internet es como pez en el rio para mi y quiero aportar valor a este mundo digital. Si crees que es de interés estos artículos no dudes en comentar.

¿Te gusta nuestro contenido?Recibe noticias y estrategias digitales a tu correo.

No pierda la oportunidad de recibir también descuentos de nuestros servicios.