Diseño de tarjetas. Diseño de tarjetas: la guía definitiva. ¿Qué es el diseño basado en contenedores?
La interfaz de tarjeta es una de las tendencias más populares. últimos años. Es fácil de usar y se adapta perfectamente a diferentes tipos dispositivos.
¿Cómo es un diseño de tarjeta exitoso? Para que el usuario quiera hacer clic en la tarjeta y familiarizarse con el contenido que se esconde detrás de ella. La tarjeta debe servir como contenedor para contenido específico: texto, formulario de registro, video.
Independiente.Hoy le diremos cómo diseñar con éxito un diseño de tarjeta para su sitio web.
Comience con un diseño en blanco y negro
Comience su diseño con un marco en blanco y negro. Piensa en cada tarjeta y en el contenido que habrá detrás de ella.
Planifique elementos como espacios, imágenes y fuentes, y considere tarjetas sin color ni imágenes. Vea cómo funciona cada tarjeta durante la fase de diseño. Todos los elementos del mapa están ahí. ¿Es fácil entender por qué está aquí? ¿Harías clic en él? La estructura debe ser clara sin un botón rojo parpadeante "Haga clic aquí".
Como ocurre con cualquier diseño, si el contorno no funciona en blanco y negro, el diseño final probablemente tampoco funcionará.
Deja más espacio en blanco entre las tarjetas.
lo mas gran problema Cuando se trata de trabajar en diseños de tarjetas compactas, no se trata de crear una atmósfera desordenada. Aquí es donde los espacios resultan útiles. y que más espacios, más cómodo será para el usuario.
Agregar espacios en blanco dará a los elementos más espacio para respirar; esto hará que la imagen general sea más espaciosa y tendrá un buen efecto en la legibilidad.
Puede establecer la distancia al doble de la distancia normal. Espacio adicional te ayudará a crear un diseño abierto y organizar el contenido con mayor claridad.
Los mapas pueden competir entre sí por la atención del usuario en pantallas grandes. Agregar espacios en blanco ayudará a que su diseño sea más fácil de leer.
Añade colores y sombras naturales.
Ahora es el momento de pensar en el color y el sombreado del diseño. Cíñete a los colores naturales e imita la realidad en los estilos de diseño.
No, aquí no estamos hablando de esqueuomorfismo, estamos hablando de crear color con contornos y sombras naturales. Piense en cómo se verá la tarjeta. El usuario debería tener la misma sensación que si tuviera la tarjeta en sus manos, en realidad.
Utilizar algunas reglas básicas de la física te permitirá presentar el diseño de cada carta de forma más natural:
La iluminación debe proyectar algunas sombras en el fondo y en el fondo;
La parte más oscura del diseño debe ser la parte inferior de la imagen, debido a las condiciones de iluminación, que suelen caer desde arriba.
Los botones y llamadas a la acción deben ubicarse de manera que sea fácil interactuar con ellos.
No debe haber más de un mensaje informativo en una tarjeta.
Crea capas simples
Usa capas simples y crea estilo uniforme mapas para toda la interfaz. ¿No sabes por dónde empezar? Directrices de diseño de materiales de Google puede servirle de guía.
En diseño de materiales propiedades fisicas Los papeles se transfieren a la pantalla. El fondo de la aplicación se asemeja a la textura plana y opaca de una hoja de papel. Como resultado, el objeto digital parece real y los usuarios quieren tocarlo y hacer clic en el mapa. El concepto es extremadamente simple y está garantizado que funcionará.
Aplicar fuentes simples
La mejor solución es una fuente sans serif simple. Para evitar que resulte difícil de leer, evite las opciones que sean demasiado finas o gruesas. Dos funcionan bien en la mayoría de las tarjetas. diferentes fuentes(incluso si son de la misma familia): uno para el título y otro para la mayor parte del texto.
¿Qué más es importante para la legibilidad? Asegúrese de incluir contraste entre el color de la fuente y el fondo de cada tarjeta.
Limitar el número de elementos de la interfaz de usuario
Una carta, una acción. Este es un axioma.
Esto significa que no debes incluir muchos elementos de la interfaz de usuario. interfaz de usuario, como botones. No se ven nada bien en los mapas y en realidad no son necesarios allí.
Pero si cree que los usuarios necesitan guía visual Para actuar, un botón es suficiente. Mantenga las formas y los diseños simples.
Quizás un botón sea el único elemento de interfaz que necesita.
Conclusiones
No existe una fórmula mágica para crear el diseño de tarjeta perfecto, pero sí soluciones constructivas, que animan a cada usuario a hacer clic en la tarjeta. Siga un enfoque minimalista desde el principio, deje más espacio en blanco, céntrese en fuentes simples y cree una acción separada para cada tarjeta.
El resultado es un diseño de tarjeta fácil de usar y con un aspecto increíble.
Y no importa lo que sientas acerca de este concepto, las tarjetas han ocupado firmemente su lugar en el diseño.
¿Qué son las tarjetas?
Se trata de esos pequeños rectángulos con imágenes y texto que sirven como puntos de entrada a un estudio más profundo del tema. Las tarjetas son lo primero que te viene a la mente si necesitas equilibrar la estética y la usabilidad de la interfaz. Todo porque es manera conveniente mostrar contenido compuesto por varios elementos.
Tarjeta de ejemplo. Fuente: Diseño de materiales.
Gran metáfora
Las tarjetas en la interfaz son una gran metáfora porque son muy similares a las reales. tangible tarjetas. Antes de los dispositivos móviles, estaban en todas partes: tarjetas de visita, tarjetas de béisbol, naipes, etc. Las tarjetas como modelo de interacción se han generalizado bastante. Por lo tanto los usuarios a nivel intuitivo comprender lo que contiene la tarjeta.
Las tarjetas son una excelente manera transferencias historias rapidas . Buen ejemplo de la vida real — tarjetas de béisbol. Ambos lados de la tarjeta pequeña contienen toda la información clave que necesitas sobre el jugador.
Cada carta representa a un jugador. Fuente de la imagen: liveauctiongroup
Organización de contenidos
El contenido de la tarjeta se divide en bloques semánticos — lo que ahorra espacio de pantalla. Así como las oraciones en un texto se agrupan en párrafos y forman bloques de significado, varios elementos, recogido en una tarjeta, crear una unidad completa de contenido.
Un ejemplo de una selección de cartas. Fuente: Diseño de materiales
Los diseños de tarjetas tomaron una posición de liderazgo en el diseño cuando gigantes como Facebook comenzaron a introducir interfaces de tarjetas en sus aplicaciones móviles y de escritorio. Usó Facebook al máximo diseño de “contenedor” agrupar convenientemente la información a pesar del flujo casi interminable de datos.
Aspecto atractivo
Normalmente el diseño de tarjetas depende en gran medida de elementos visuales. Imágenes — esta fuerte lado de este diseño. Los estudios de diseño confirman que el uso de imágenes lleva el diseño de un sitio web o de una aplicación a un nuevo nivel, porque atraen la atención de forma instantánea y eficaz. Centrarse en las imágenes automáticamente hace que el diseño de una tarjeta sea más atractivo para los usuarios.
Tomemos como ejemplo Dribbble, un sitio muy conocido en la comunidad creativa donde los diseñadores muestran su trabajo. Quizás el diseño de una tarjeta sea el más adecuado para mostrar este tipo de contenido.
Sitio web de regate.
Cómo diseñar una tarjeta
Las tarjetas dentro del mismo diseño deben tener el mismo ancho, pero la altura puede ser diferente. Altura máxima las tarjetas son limitadas espacio disponible plataforma, pero se puede ampliar temporalmente (por ejemplo, para mostrar un campo de comentarios).
La altura de la tarjeta puede ser fija o variable. Fuente de la imagen: Intercomunicador
Desde una perspectiva de diseño, la tarjeta debe tener esquinas redondeadas y una sombra corta. Las esquinas redondeadas hacen que el mapa parezca un bloque de contenido separado y las sombras crean una sensación de profundidad.
Esquinas redondeadas y sombra corta. Fuente: Diseño de materiales
Estos elementos traerán a diseño ligero Picancia visual sin distraer al usuario del contenido. Además, hacen que la tarjeta parezca saltar de la página. También puedes aplicar efectos de animación y movimiento.
Fuente de la imagen: Behance
Ventajas de las tarjetas
Si utiliza las tarjetas correctamente, puede mejorar significativamente la UX de su aplicación. Gracias a su funcionalidad y forma, las tarjetas actúan como un elemento interesante e intuitivo de la interfaz.
Forma fácilmente digerible
Como ya sabes, principal — contenido. Las tarjetas del diseño son contenedores que se pueden llenar con cualquier cosa. Si pones contenido en tarjetas, será más fácil para los usuarios digerirlo. Así, los usuarios reciben fácil acceso al contenido que es interesante específicamente a ellos - que promueve un compromiso profundo.
Esta colección de tarjetas contiene tarjetas con variados tipos de contenido. Fuente: Diseño de materiales.
Diseño responsivo y móvil
Lo más importante de las cartas es que son fáciles de manipular. El diseño basado en tarjetas funciona bien tanto para dispositivos de escritorio como móviles: las tarjetas presentan el contenido en fragmentos pequeños y fácilmente digeribles. También son buenos para el diseño responsivo porque sirven contenedores de información, que se puede escalar fácilmente.
Finalmente, las tarjetas ayudan a crear una estética unificada en múltiples diferentes dispositivos. Por lo tanto, el diseño de tarjetas proporciona experiencia de usuario consistente en cualquier dispositivo.
diseño del pulgar
Las tarjetas son simples diseñado para adaptarse al pulgar. El diseño de la tarjeta parece estar especialmente adaptado para aplicaciones. esto es todo razón principal popularidad de las tarjetas en diseño móvil. Las tarjetas digitales de su teléfono se comportan de la misma manera que tarjetas fisicas, que proporciona a los usuarios una experiencia de interacción cómoda. No tienen que pensar: “¿cómo funciona todo aquí?” A los usuarios les encanta la simplicidad del diseño de la tarjeta y entienden intuitivamente el principio: gire la tarjeta para información adicional o desliza para ver el siguiente.
Desliza hacia la derecha. Fuente: Regatear
¿Dónde usarlo?
Cinta
Apertura nueva
Tarjetas — esta manera natural mostrar contenido nuevo. Echa un vistazo al patrón de tarjetas de Tinder: deslizando Tarjetas de derecha a izquierda, encontrarás cada vez más personas nuevas que coinciden con tus gustos.
Fuente de la imagen: Tinder
Pinterest usa tarjetas patas en su cuadrícula dinámica para organizar el contenido e involucrar a los usuarios en un desplazamiento sin fin.
¿Qué tienen estos dos servicios en común? Toman información de la aplicación y la hacen. relevante en este momento.
¿Quieres desarrollar una interfaz moderna estilo tarjeta? Probablemente esta no sea una mala idea. Las tarjetas son populares y fáciles de usar, adecuadas para todo tipo diseño digital y para pantallas de todos los tamaños. La clave para un diseño exitoso de estilo de tarjeta es crear algo en lo que los usuarios quieran hacer clic. La tarjeta debe servir como contenedor para el contenido específico (enlace, formulario de inicio de sesión, reproductor de video, etc.) con el que el usuario querrá interactuar. Aquí se explica cómo crear este diseño.
Comience con contornos en blanco y negro.
Suena muy simple: comienza con una maqueta en blanco y negro de tu diseño. Piense en el propósito de las tarjetas y en qué partes de ellas se podrá hacer clic. (La tarjeta completa puede servir como enlace).
Planifica los elementos: espacio libre, imágenes y tipografía para que puedas ver la tarjeta sin el color y el diseño. Piense en ello como la etapa de diseño. cartas de juego. Todos los elementos del mapa están en su lugar. ¿Es el diseño fácil de entender?
Piensa en cómo usarás las tarjetas en esta etapa. ¿Dónde haces clic para realizar tal o cual acción? ¿Están claros la estructura y el resultado? ¿Cómo retrocederás, o viceversa, darás un paso adelante? Las respuestas a estas preguntas deben ser claras sin indicaciones como carteles rojos de "Haga clic aquí".
Como ocurre con otros proyectos, si un diseño no funciona en blanco y negro, la versión final completamente diseñada tampoco funcionará.
Usa mucho espacio libre
Lo más difícil del diseño del estilo de una tarjeta es no hacer que parezca abarrotada y abarrotada. Aquí es donde el espacio juega un papel importante. Y querrás utilizar el espacio libre en una medida mucho mayor de lo que te parece cómodo.
La abundancia de "aire" dará espacio a los elementos de diseño, hará que todas las tarjetas sean visualmente más espaciosas y aumentará la legibilidad.
Probablemente querrás comenzar con el doble de espacio habitual entre elementos. Las distancias entre tarjetas deben ser grandes y también puedes aumentar el espacio libre interlineado. Muy gran número El aire te ayudará a crear. diseño abierto y organizar el contenido de la forma más obvia. La tarjeta tiene un tamaño limitado y debe caber en la pantalla de un teléfono inteligente, así como cambiar de tamaño de manera lógica y proporcional para las pantallas de tabletas y monitores. En pantallas grandes, las tarjetas también pueden distraer la atención del usuario entre sí. Agregar "aire" hará que el diseño general se sienta más abierto y fácil de profundizar.
Añade colores y matices naturales.
Ahora estás listo para pensar en colores y matices para tu diseño. Intente darle un aspecto natural y aporte un aspecto realista a las tarjetas utilizando sombras y estilos.
No se trata de esqueomorfismo, sino de crear colores con contornos y sombras naturales. Piensa en cómo sería una tarjeta real. El usuario debe sentir como si tuviera la tarjeta en la mano.
Utilice varios reglas fisicas, que son válidos cuando tienes la tarjeta en tus manos:
- La iluminación proyectará sombras debajo y en la parte inferior de la tarjeta.
- La parte más oscura del diseño está en la parte inferior del diseño porque normalmente cuando sostienes la tarjeta en tus manos, la luz proviene de la parte superior.
- Evite publicar contenido en lugares donde tendría la tarjeta en sus manos.
- Los puntos de contacto (llamados a la acción, etc.) deben ser el foco y las interacciones deben ser fáciles y claras. (Igual que en jugando a las cartas, el elemento principal está en el centro del diseño).
- Una tarjeta, una unidad de información.
Mantenlo simple
Ahora, teniendo en cuenta las propiedades físicas, pase al siguiente paso: crear un estilo de tarjeta común para toda la interfaz. ¿No sabes por dónde empezar? Un gran punto de partida sería Guía de diseño de materiales de Google.
“En Material Design, las propiedades físicas del papel se transfieren a la pantalla. El fondo de la aplicación es la textura plana y uniforme de una hoja de papel.
Los elementos de la aplicación se comportan como papel: también cambian de tamaño, se desplazan y se agrupan en una pila. Los elementos externos a la aplicación, como la barra de estado, se comportan de manera diferente. Están separados del contenido de la solicitud y no heredan las propiedades físicas del papel."
Tenga en cuenta estas pautas e intente crear un objeto digital que se vea y se sienta físico. Si los usuarios quieren tocarlo, harán clic en él. El concepto es simple.
Elige fuentes simples
Cuando se trata de tipografía, las fuentes simples sans serif suelen ser la mejor solución. Evite las fuentes que sean demasiado finas o estrechas, ya que pueden resultar perjudiciales para la vista.
La mayoría de las tarjetas funcionarán bien con dos fuentes (incluso si son de la misma familia): una para el texto general y otra para el título o llamado a la acción. Otro punto importante Algo a tener en cuenta a la hora de trabajar con tipografía es el contraste, lo que hará que el texto sea más fácil de leer. Asegúrese de considerar los contrastes entre las fuentes y entre el fondo y el texto de cada tarjeta.
Limitar elementos de la interfaz de usuario
Recuerda: una carta equivale a una acción.
Esto significa que no es necesario distribuir un montón de elementos de la interfaz por todo el diseño, como botones. Puede que no los necesites en absoluto. Pero si todavía piensas que el usuario necesita una señal visual, un botón es suficiente.
Mantenga las formas y el diseño simples: nuevamente, Material Design gran opción — y Intenta no hacer más de un botón.
Los botones son probablemente el único elemento de la interfaz de usuario que necesitará. Esfuércese por ello.
Conclusión
No existe una receta mágica para el diseño perfecto del estilo de una tarjeta, pero existen técnicas específicas que incitarán a los usuarios a hacer clic donde quieran. Esfuércese por estar más cerca de la realidad, elija el minimalismo con un gran número aire y contraste, favorecen la tipografía simple e indican una acción para cada carta.
Traducción – Escritorio
Por eso, en este artículo te explicaré qué es el “diseño de tarjetas” y cómo afecta al diseño web en general.
Altura tecnologías móviles Condujo gradualmente a un cambio en la arquitectura del sitio web hacia la capacidad de respuesta y la adaptabilidad. Estos dos parámetros se han vuelto obligatorios. Estos eventos contribuyeron al gran éxito de los "mapas", una de las principales tendencias en diseño web en 2015.
Sin embargo, podemos decir con confianza que los mapas no son sólo una moda pasajera en el diseño, son el futuro del desarrollo web, tal como lo son. mejor manera Organizar y mostrar contenidos de forma coherente. Por eso, en este artículo te explicaré qué es el “diseño de tarjetas” y cómo afecta al diseño web en general. ¡Vamos!
Diseño de tarjetas a través de los tiempos.
Si bien los mapas se han vuelto extremadamente populares en el diseño web sólo recientemente, ya han sido medios efectivos La comunicación visual tiene al menos mil años. Introducido por primera vez como un juego en la China imperial del siglo IX, tarjetas posteriores se han vuelto útiles en el mundo empresarial.
De hecho, en el siglo XVII aparecieron por primera vez en Londres las "tarjetas coleccionables", con las que la gente encontraba trabajo: este fue el primer ejemplo de "tarjetas de visita" modernas.
Hoy en día, la tarjeta suele ser una especie de cupón de una tienda o supermercado, la gente los recoge para obtener descuentos especiales.
La mayoría de nosotros sólo tenemos que mirar en nuestra billetera para ver tarjetas de credito, tarjetas de fidelización, tarjetas de tiendas e incluso tarjetas regulares. Licencia de conducir. Todas estas tarjetas tienen sus propios estándares.
En cualquier caso, existe una fuerte conexión entre el uso tradicional de mapas y su uso en diseño web: tarjetas regulares contienen información en ambos lados y los mapas web redirigen a los usuarios para ver más contenido.
¿Qué son los mapas en Internet?
Desde la perspectiva de Internet, podemos definir una “tarjeta” como un pequeño rectángulo asociado a un pensamiento específico. las cartas estan llenas elementos interactivos, como texto, enlaces o imágenes. Pero todos tienen el mismo propósito: dirigirlo a más contenido cuando haga clic en él.
El objetivo principal de las tarjetas es proporcionar breve descripción un tema determinado en un espacio reducido. Y si al lector le interesa la noticia, puede acudir a nueva pagina con texto completo. Los sitios web de Facebook o Twitter aprovechan estos beneficios y han incorporado una plantilla de tarjeta en su diseño, mostrando una gran cantidad de contenido y ahorrando un valioso espacio.
Así, lo más característica importante cards es la idea de interacción interactiva. Durante el desarrollo, los diseñadores deben considerar que los mapas no sólo sirven como una forma de mostrar noticias, sino que también deben atraer la atención del lector. Es por eso que las tarjetas muestran Me gusta, Volver a publicar o enlaces a texto completo artículos.
Además de su utilidad, los mapas son una opción de diseño común debido a su compatibilidad con marcos responsivos. La estructura Chunked se puede utilizar para crear interfaces atractivas y es ideal para el desarrollo del lenguaje. plataformas móviles. La forma de la tarjeta es muy similar a la forma de un teléfono inteligente moderno.
A menudo hablamos de diseños "fluidos". Los mapas nos proporcionan pequeños fragmentos de contenido con los que podemos “llenar” la página debajo diferentes tamaños y formas de pantalla.
¿Por qué deberías usar tarjetas?
Dado que las tarjetas se han vuelto universales, se pueden usar de diferentes maneras dependiendo de funciones necesarias. A continuación se presentan algunas razones por las que utilizar tarjetas:
Esta es una tendencia: las tendencias son de naturaleza temporal, pero al utilizar mapas puedes hacer que tu sitio sea famoso.
Los mapas introducen orden: los mapas introducen capas de organización del contenido.
Los mapas son ideales para el diseño responsivo: encajan fácilmente en sitios web y aplicaciones moviles. Lo más importante es que en los teléfonos inteligentes las tarjetas se pueden apilar fácilmente verticalmente, creando fuente de noticias.
Los mapas fomentan la economía de pensamiento: debido a su tamaño, nunca podrán almacenar grandes cantidades de información. A primera vista esto puede parecer un inconveniente, ¡pero creo que es una gran cosa! La tarjeta debe mostrar un texto breve de artículo completo, animando a los lectores interesados a seguir el enlace.
Son sociales: las tarjetas son ideales para redes sociales, no sólo por su uso en redes sociales, sino también porque las tarjetas facilitan a los usuarios compartir información a través de diversas plataformas sociales y por correo.
Tendencias actuales y enfoques en el desarrollo web
Aprenda el algoritmo para un rápido crecimiento desde cero en la creación de sitios web
La importancia del contenido se nivela: los mapas le ayudan a decidir qué artículo es mejor colocar en la parte superior de la página. Al utilizar mapas, bloques de contenido de igual importancia pueden coexistir fácilmente en la misma página sin necesidad de clasificarlos. El usuario decide qué es importante para él y qué quiere leer.
¿Quién usa las tarjetas?
regatear
El diseño del sitio se basa en tarjetas que contienen una imagen y cierta información sobre cada diseño. Lo que me gusta de Dribbble es que puedes hacer clic en una tarjeta y ver todos los detalles sobre el diseño, y también puedes simplemente pasar el cursor sobre la tarjeta y ver una pequeña descripción.
Cuando hablamos de diseño de tarjetas, no podemos dejar de mencionar Pinterest. De hecho, mucha gente piensa que Pinterest fue pionero en el diseño de tarjetas. Pinterest demuestra claramente la “importancia de todo el contenido”; no hay tarjetas en el sitio que destaquen visualmente de alguna manera.
Twitter, que utiliza un límite de 144 caracteres por mensaje, nació con "incorporado diseño de tarjeta" El año pasado la red social lanzó su producto propio llamada "Twitter Cards", una aplicación diseñada para ayudarte a "mapear" tu contenido a medida que lo publicas en el sistema. Los desarrolladores describen su aplicación como capaz de:
"adjunte muchas fotos, vídeos y otro contenido multimedia a sus tweets, lo que atraerá tráfico a su sitio web"
Como resultado, casa pagina de Twitter ahora lleno de tarjetas de tweets. Cuando haces clic en uno de ellos, el tweet se expande para mostrar contenido adicional u opciones.
el guardián
El famoso periódico británico The Guardian aplicó un diseño de tarjeta a su sitio web con el objetivo de “pensar diferente y mejorar el descubrimiento y la promoción de contenidos”.
Pudieron crear un diseño modular que constaba de diferentes tarjetas: cada una vinculada a un título y, al hacer clic, redirigida al texto completo del artículo. El sitio evoca una sensación de elegancia y limpieza.
Conclusión
Las cartas representan método útil para crear sitios web atractivos y también son extremadamente flexibles, lo que le permite implementar diferentes diseños. Todo esto es para garantizar que el usuario esté satisfecho con el sitio. La cuota de mercado cada vez mayor de tabletas y teléfonos inteligentes también consolidará el diseño de tarjetas en la cima del diseño web durante mucho tiempo.
Gracias a atractivo visual, las interfaces de tarjetas son más que una simple tendencia.
En 2014, Internet en dispositivos móviles comenzó a utilizarse con más frecuencia que en ordenadores. Es por eso que el diseño web actual favorece las pantallas pequeñas y diseño responsivo se vuelve obligatorio. ¿Qué podemos decir de 2018, cuando, según las estadísticas de la agencia de noticias RNS, el 54% de los rusos ya consumen internet movil. Como resultado, en estilos simples interfaz como nueva diseño plano, el minimalismo y, sobre todo, las tarjetas están ahora más de moda que nunca.
La idoneidad del patrón de interfaz de usuario de la tarjeta es más que tiempos de carga rápidos y adaptabilidad a varios tamaños pantallas. El contenido limitado se adapta a la capacidad de atención de la mayoría de los usuarios de la web (especialmente en dispositivos móviles). Desarrollada por Pinterest y luego popularizada por redes sociales como Facebook y Twitter, la plantilla de tarjeta ahora se puede encontrar en sitios web de todas las industrias.
En este artículo, exploraremos el auge del patrón de interfaz de usuario de tarjetas: por qué es práctico, cómo es compatible con el diseño responsivo y de materiales, y qué esperar de él en el futuro.
¿Qué es el diseño web de contenedores?
Para comprender este patrón, primero debes comprender qué son las cartas en sí. Las tarjetas suelen ser pequeños contenedores de información. Cada tarjeta tiene la suya propio tema. La tarjeta puede contener cualquier contenido (visual, texto, enlaces, etc.), pero toda la información está dedicada a un solo tema.
Llenar la pantalla con estos contenedores independientes de información es lo que The Guardian llamó el "modelo de contenedor". Ella ofrece limpieza y interfaz clara, ideal para vista rápida, para que el usuario pueda encontrar fácilmente lo que busca. (Además, este método es ideal para controles táctiles, sobre los que escribiremos a continuación).
Práctico y atractivo: las ventajas del patrón UI de tarjeta en pocas palabras.
Trello permite a los usuarios crear cualquier tarjeta que quieran. Cualquiera puede crear tarjetas de tareas y clasificarlas según sea necesario. Esto demuestra no sólo la flexibilidad de la plantilla de tarjeta, sino también su poder de organización. Trello prospera porque su formato de tarjeta parece más simple que la lista de tareas de un planificador tradicional.
¿Estás interesado? Lea el último artículo con una selección de las 18 tendencias TOP de 2018.
Patrón de interfaz de usuario de tarjeta en un dispositivo móvil y diseño responsivo.
Como se mencionó anteriormente, las tarjetas son increíblemente compatibles con el diseño responsivo, lo que las convierte, en palabras de Des Traynor de Intercom, en "el futuro de la web". El patrón encaja bien dispositivos móviles por diversas razones, que describiremos a continuación.
Primero, en marcos que se expanden y contraen, la cuadrícula de tarjetas puede reestructurarse para adaptarse a cualquier posición o tamaño de pantalla. Los diseñadores pueden cambiar el tamaño de las tarjetas como deseen (y también ajustarlas entre sí). Por ejemplo, puede configurar ancho fijo y altura variable con un espacio constante entre tarjetas. Usamos esto todo el tiempo cuando creamos sitios web responsivos.
Compare la captura de pantalla del sitio web de The Verge arriba con su versión móvil a continuación:
Observe cómo el texto, las imágenes y el patrón de color siguen siendo los mismos. Al desarrollar adaptativo diseño web Las tarjetas te permiten obtener un diseño permanente. varios dispositivos. Esta ventaja se puede ver en laboratorio gratuito Diseño UXPin. Observe cuán limpiamente fluye el diseño versión móvil A modo de pantalla completa visita.
Área de visualización de la versión móvil:
Área de visualización de pantalla completa:
Otro beneficio es que el diseño basado en tarjeta es compatible con el tacto. En pantallas táctiles Las tarjetas desempeñan el papel de botones. La idea es sencilla: hacer clic en una tarjeta para acceder al contenido. Como muestra la ley de Fitts aplicada al diseño web, cuanto más grande sea el botón en el que hacer clic, más fácil será su funcionamiento. ¿Con qué frecuencia tenemos que luchar con pequeños botones en los dispositivos móviles?
Diseño de tarjetas y materiales.
El diseño de materiales, ideal para , se basa en gran medida en las tarjetas y su detalle. análisis técnico requerirá mucho espacio. Entonces, si desea una explicación completa, vale la pena leer las descripciones de las tarjetas en la guía de diseño de materiales.
Desarrollo de sitios web. El futuro del diseño de tarjetas.
Debido a que el patrón de interfaz de usuario de la tarjeta cambia constantemente su forma para cumplir con nuevos requisitos, probablemente tendrá el mayor impacto en el diseño responsivo y de la aplicación. Este cambio se basa en parte en el impacto página por página que tiene el diseño de materiales en las aplicaciones de Android.
1. Tecnología
Es posible que las tarjetas no permanezcan estáticas por mucho tiempo. A medida que mejoren las implementaciones web, también lo hará su capacidad para admitir más contenido multimedia. Probablemente veremos elementos mucho más granulares, como contenido que se actualiza automáticamente, que no ralentizarán la experiencia general.
Cada vez más, los vídeos sustituirán a las imágenes (una idea con la que algunos diseñadores han estado jugando durante años). Use Your Interface (arriba) utiliza tarjetas GIF animadas que llenan la página de inicio con toneladas de información.
2. Interacción más profunda
En un futuro próximo, la creatividad en el uso de tarjetas también puede aumentar y ya no serán sólo enlaces. Como vemos en el ejemplo de Material Design, las tarjetas difieren en el nivel de interacción entre sí y ambiente, por ejemplo, como clasificación automática y actualizaciones en tiempo real (por ejemplo, previsiones meteorológicas).
Windows Phone ya ha introducido la clasificación automática de tarjetas, pero este enfoque podría aplicarse potencialmente a usuarios de otros dispositivos móviles.
3. Tamaño
Siguiendo la tendencia de los personajes de cómic, las tarjetas también emplean una política de "cuanto más grande, mejor".
Las tarjetas grandes permiten una tipografía más detallada y compleja, lo que a su vez significa más posibilidades para un diseño visual increíble. Utilizadas alternativamente con tarjetas más pequeñas, las tarjetas grandes proporcionan una mayor libertad visual.
CÓMO Arkitekter (arriba) mezcla tarjetas de tamaño grande y mediano en la navegación. Algunas tarjetas son enlaces, mientras que otras simplemente presentan información estática. Amplios espacios separan las tarjetas, dando al diseño una sensación de amplitud.
4. Dispositivos portátiles
Gracias a gafas de google, las tarjetas se han convertido ahora en un elemento central del diseño de la interfaz de usuario para dispositivos portátiles.
Si bien los críticos pueden ver a Google Glass como un fracaso comercial, algunos creen que tiene una oportunidad en el mercado. Pase lo que pase, los dispositivos portátiles deben hacer un uso eficiente del espacio. Y en este caso las tarjetas serán la opción más práctica.
Desarrollo sitio web 2016-2018. Conclusión
Los diseños de tarjetas se convierten en la base de organización y funcionalidad en todos los entornos y dispositivos. Su forma actual puede cambiar a medida que evolucionan junto con la tecnología, pero su presencia está garantizada. Después de todo, las áreas digitalizadas en las pantallas no son la forma principal de tarjetas. No olvides que hasta hace poco una tarjeta era sólo un trozo de papel que contenía un conjunto de información sobre un tema concreto.
Lea el artículo sobre otro: duotono o dúplex.
