25 ejemplos de diseño web basado en tarjetas

Vivimos la vida digital. Incluso aquellos que odian Internet y todo lo que representa no pueden negar el hecho de que este es el momento y la era de la digitalización. Tanto es así que las cosas y elementos comunes que usábamos antes de Internet ahora se están iniciando para unirse al mundo digital. Por ejemplo, una tarjeta simple y llana.

cómo convertir you tube a mp3

En el pasado, una tarjeta es sinónimo de Hallmark. Hoy es un diseño web. Una tarjeta, también conocida como mosaico o retrato, es un diseño que se está convirtiendo rápidamente en una tendencia en línea, gracias a Google, Facebook y Twitter.

El nombre puede parecer nuevo, pero el concepto no lo es. De hecho, la tarjeta es un diseño web omnipresente. Si ha utilizado Internet, no hay duda de que ya lo ha visto, pero no sabe lo que cubre el término.



Al igual que cualquier tarjeta de identificación de la vieja escuela, un diseño web basado en tarjetas proporciona información importante de manera condensada. También provoca compromiso, ya que la mayoría de las tarjetas en línea destacan un botón 'compartir'. La prevalencia de este diseño se debe a su compatibilidad con teléfonos inteligentes y tabletas, lo que hace que todo se vea cohesivo y funcione a la perfección.

Es posible crear un diseño web basado en tarjetas por su cuenta. Pero debes asegurarte de entender estos tres factores correctamente:

  • La tarjeta debe ser informativa. Una tarjeta en línea es inútil, no puede proporcionar toda la información necesaria que debería tener. Esto incluye el título del sitio, opciones de nombre de usuario, imágenes e íconos. El flujo de estas piezas de información siempre debe ser legible para que los usuarios de tarjetas puedan seguir fácilmente la cadena de pensamientos.
  • La tarjeta debe responder. Esto significa que el diseño debe funcionar bien en varias pantallas de diferentes tamaños. Entonces, cuando un usuario cambia de su PC a su teléfono inteligente, no debería tener ningún problema con el rendimiento de la tarjeta.
  • La tarjeta debe ser pegadiza. Para que al usuario le resulte más fácil digerir toda la información, un diseño web basado en tarjetas debe tener un uso inteligente del texto y las imágenes para una comunicación fácil y fluida de pensamientos e ideas.

La forma en que se organiza cada contenido en la tarjeta es la clave para que el diseño sea conveniente para todos los usuarios. La mayoría de las tarjetas en línea usan cuadros (cuadrados y rectángulos) para separar un contenido de otro.

Esto lo convierte en un contenido ordenado y bien estructurado que mejora la legibilidad. Y para redondearlo todo, un diseño web basado en tarjetas también debe tener una llamada a la acción que provoque una respuesta del usuario.

cuánto dinero vale un cubo de hielo

Aquí hay 25 ejemplos bien elaborados de diseño basado en tarjetas.

Tabla de contenido

Sitio de arquitectura por Oliur

Sitio de arquitectura por Oliur

Tarjeta de temperatura de Bruno Passos

Tarjeta de temperatura de Bruno Passos

Explorar sección por Patryk Adas

Explorar sección por Patryk Adas

Concepto de página de inicio de Linkedin por Emerson McIntyre

Concepto de página de inicio de Linkedin por Emerson McIntyre

Página de cuestionario móvil de Rosie Manning

Página de cuestionario móvil de Rosie Manning

Plantilla de revista de Oliur

Plantilla de revista de Oliur

Portapapeles de Oliur

Portapapeles de Oliur

Diseño de revista de blog de destreza por Oliur

Diseño de revista de blog de destreza por Oliur

Ink- Contenido de WordPress por Kyril Ku

Ink- Contenido de WordPress por Kyril Ku

Estilo de tarjetas de Google de Ridhwan Razak

Estilo de tarjetas de Google de Ridhwan Razak

Seleccionar tarjeta de Corey Haggard

Seleccionar tarjeta de Corey Haggard

Etiolate Tumblr Theme por Oliur

Etiolate Tumblr Theme por Oliur

Google ahora

Google ahora

Regate

Dribbble - Mostrar y contar para diseñadores (20150729)

Concepto de cliente de correo por Roman Shkolny

Concepto de cliente de correo por Roman Shkolny

Estadísticas simples de Lina Bo

Estadísticas simples de Lina Bo

Pinterest

Pinterest: descubre y guarda ideas creativas (20150729)

Silktricky

sedoso

Aplicación gratuita de suministro de noticias de Edi Gil

Aplicación gratuita de suministro de noticias de Edi Gil

ReaLync por Piper Lawson

ReaLync por Piper Lawson

Aplicación para turistas en Dubai por Volodymyr Kurbatov

Aplicación para turistas en Dubai por Volodymyr Kurbatov

Limpiar mi Mumbai por Rahul Bhadauria

Limpiar mi Mumbai por Rahul Bhadauria

Tarjetas de crédito en billetera de Gleb Kuznetsov

Tarjetas de crédito en billetera de Gleb Kuznetsov

Diseño manual del contenido de la revista / blog de Oliur

Revista manual: diseño de contenido del blog de Oliur

Aplicación de interacción Shop 360 de Budi Tanrim

Aplicación de interacción Shop 360 de Budi Tanrim