Los secretos para un diseño efectivo basado en tarjetas
Entonces, ¿quieres ponerte al día con una interfaz tipo tarjeta? Esa es probablemente una gran idea; Las tarjetas son una opción popular y fácil de usar para todo tipo de diseño digital en diferentes tamaños de dispositivo.
La clave del diseño de una tarjeta es crear algo en lo que los usuarios quieran hacer clic. (Esa es la clave de una gran tarjeta.) Una tarjeta debe servir como contenedor para un contenido específico (enlace de contenido, registro, reproductor de video, etc.) con el que los usuarios desean interactuar.
Así es como lo diseñas ...
Comience con un esquema en blanco y negro
Suena bastante simple: comience con una estructura metálica en blanco y negro para el diseño. Piensa en la intención de la tarjeta y en qué partes se hará clic o se tocará. (Toda la tarjeta puede servir como un enlace).
Planifique elementos como el espaciado, las imágenes y la tipografía para que pueda ver la tarjeta sin color ni adornos. Piénselo como la fase de "naipes" del diseño. Todos los elementos de la tarjeta están ahí. ¿Parece un marco que es fácil de entender?
Piense en cómo lo usaría desde esta etapa. ¿Dónde harías clic para una acción? ¿El patrón y el resultado son claros? ¿Cómo retrocedes o avanzas? Las respuestas a estas preguntas deberían ser relevantes sin señales como el botón rojo "haga clic aquí" que parpadea en la pantalla.
Al igual que con cualquier otro proyecto, si el esquema no funciona en blanco y negro, el diseño final tampoco lo hará.
Use espaciado exagerado
El mayor desafío cuando se trata de tarjetas es crear un diseño compacto que no se sienta abarrotado. Ahí es donde entra el espacio en blanco. Y querrás usar más de lo que parece cómodo al principio.
La adición de espacio en blanco dará a los elementos más espacio para respirar, lo que hará que la tarjeta en general parezca más espaciosa y aumente la legibilidad.
En general, es posible que desee comenzar con el doble de espacio que normalmente podría considerar entre los elementos. Las canaletas deberían ser extra anchas y el espaciado entre líneas también podría usar la habitación extra. El espacio extra lo ayudará a crear un diseño abierto y organizar el contenido de forma más clara. La tarjeta tiene un lienzo bastante limitado y debe caber en una sola pantalla en un teléfono, y una porción de tamaño similar de la pantalla en dispositivos más grandes, como tabletas o computadoras de escritorio. Las cartas también pueden competir contra otras cartas para llamar la atención en pantallas más grandes. Los espacios en blanco añadidos ayudarán a que todo el diseño se sienta más abierto y sea más fácil sumergirse.
Agregue color y sombreado natural
Ahora está listo para pensar sobre el color y el sombreado para el diseño. Mantenga su aspecto natural e imite la realidad en las sombras y estilos del diseño.
No, aquí no estamos hablando de skeuomorphism, estamos hablando de crear color con contornos y sombras naturales. Piensa en cómo se verá una tarjeta. El usuario debe tener la misma sensación que si realmente la estuviera sosteniendo.
Usa algunas de las reglas básicas de la física para imaginar (y diseñar) cada carta como se llevaría a cabo:
- La iluminación debe proyectar algunas sombras en la parte posterior e inferior.
- La parte más oscura del diseño es probable en la parte inferior gracias a las condiciones de iluminación, que normalmente provienen de arriba.
- Evite el contenido en las áreas que se requieren para sostener la tarjeta.
- Los puntos de contacto (y las llamadas a la acción asociadas) deben ser puntos focales y fáciles de interactuar. (Al igual que la cara de una carta de juego está en el centro del diseño).
- Una tarjeta equivale a un bit de información.
Crea capas simples
Ahora que estás pensando en la física, llévala al siguiente nivel con capas simples para crear un estilo de tarjeta unificado para toda la interfaz. ¿No estás seguro por dónde empezar? Google Pautas de diseño de materiales son un gran punto de partida
"En el diseño de materiales, las propiedades físicas del papel se traducen a la pantalla. El fondo de una aplicación se asemeja a la textura plana y opaca de una hoja de papel.
El comportamiento de una aplicación imita la capacidad del papel para volver a clasificar según el tamaño, se baraja y se une en varias hojas. Los elementos que viven fuera de las aplicaciones, como el estado o las barras del sistema, reciben un tratamiento diferente. Están separados del contenido de la aplicación debajo de ellos, y no tienen las propiedades físicas del papel.
Divide esto y vuelve a hacer que un objeto digital se vea y se sienta físico. Y si los usuarios quieren tocarlo, querrán hacer clic en él. El concepto es así de simple.
Atenerse a tipos de letra simples
En lo que respecta a la tipografía, las simples sans serifs a menudo son la respuesta. Evite las opciones súper delgadas o condensadas porque pueden ser un poco más duras para los ojos.
La mayoría de las tarjetas funcionan mejor con dos opciones tipográficas (incluso si son de la misma familia): algo para el cuerpo principal y otro para el título o llamado a la acción. El factor más importante cuando se trata de tipografía es recordar incluir mucho contraste para que los elementos de texto sean fáciles de leer. Recuerde incluir el contraste entre los tipos de letra y el contraste entre los elementos de fondo y texto para cada tarjeta.
Limitar los elementos de la IU
Repite después de mí: una carta equivale a una acción.
De modo que probablemente eso signifique que no necesita incluir un conjunto de elementos de la interfaz de usuario, como botones, en todo el diseño.
Es posible que ni siquiera necesite un botón en un diseño de tarjeta.
Pero si crees que los usuarios necesitan una señal visual, un botón es suficiente. Mantenga la forma y el diseño simple; una vez más, el enfoque de Diseño de materiales es una buena opción, y cumpla con un solo botón.
Un botón es probablemente el único elemento de UI que necesita. Este es tu objetivo de diseño.
Conclusión
No existe una fórmula mágica para la tarjeta perfecta, pero hay algunas opciones de diseño que puede hacer que animen a cada usuario a hacer clic (o tocar). Mantenga su diseño centrado en la realidad, siga un enfoque minimalista con mucho espacio y contraste, ponga énfasis en la tipografía simple y cree una acción única para cada tarjeta.
Seguir este esquema lo ayudará a imaginar y conceptualizar mejor los proyectos con estilo de tarjeta con los que los usuarios desean interactuar. Combine estas ideas con la teoría del diseño y sus locas habilidades para un gran proyecto que será divertido para los usuarios y estéticamente a la moda.