3 tendencias de diseño esenciales, diciembre de 2017

Las tres tendencias de diseño esenciales de este mes tienen que ver con la tipografía. Y las tendencias muestran algunas formas estelares de utilizar una tipografía hermosa para crear participación del usuario y causar una excelente primera impresión.

Un tema común entre estos diseños es que todos los estilos de tipografía son altamente legibles. Si planea trabajar con un elemento de texto más moderno o original, elija un tipo de letra que los usuarios no tengan dificultades para leer. La técnica de moda es el truco con estos diseños, no el tipo de letra en sí.

Esto es lo que está de moda en diseño este mes:

1. Simplemente escriba encima del desplazamiento

Si bien una gran imagen puede ayudar a atraer a los usuarios a un diseño, a veces las palabras y el espacio correctos son el boleto.

La clave para aprovechar al máximo esta tendencia de diseño es refinar su mensaje. Las palabras deben ser simples, decir algo significativo y crear valor para el usuario.

Entonces, ¿cómo lo haces?

• Empiece con una frase clave. Puede ser su misión o una propuesta de valor para los usuarios. Dígales a los usuarios lo que aporta y por qué su sitio web será importante para ellos.
• Elija un tipo de letra simple que tenga el mismo estado de ánimo que el mensaje para bloques de copia más largos.
• Si el bloque de texto es corto, como con Tipos de tipo, considere una opción de tipo más divertida para atraer a los usuarios.
• Aprovecha al máximo el espacio. Tenga en cuenta que en cada uno de los ejemplos a continuación, el texto tiene mucho espacio para respirar, lo que facilita la lectura de un vistazo. El espacio también puede ayudar a llamar la atención sobre el texto y puede equilibrar los elementos de texto si no desea centrarlos en la pantalla, como Diseño Ups.
• Use el color para ayudar a agregar interés visual. Los tonos brillantes y modernos pueden ayudar a atraer a los usuarios al diseño. El color también puede ayudar a crear un estado de ánimo que se correlacione con los mensajes.

Cuando trabaje con un diseño de tipografía pesada, no lo fuerce. A veces, no tendrá suficiente texto para llenar una «pantalla» completa. Menos + Más y el tipo de tipo usan el bloqueo de color para crear varios paneles que tienen el tamaño perfecto para el contenido del texto.

2. Texto en recuadros blancos

Con tantos elementos visuales audaces en los proyectos de diseño de sitios web, y tantos puntos de interrupción receptivos con los que lidiar, los cuadros blancos están resurgiendo como un elemento contenedor para el texto. Los cuadros blancos con texto oscuro en el interior pueden garantizar la legibilidad cuando se trata de mensajes sobre fotos, videos o ilustraciones donde hay variaciones de color.

Y aunque esta tendencia puede sonar un poco, bueno … descuidada o perezosa, en realidad se ve muy bien cuando se hace bien.

No puede simplemente colocar un cuadro en cualquier lugar de una imagen y esperar lo mejor. Las cajas blancas deben colocarse estratégicamente para que no cubran partes importantes de la imagen y para que los usuarios se muevan hacia ellas mientras miran el diseño.

Los cuadros blancos deben ser lo suficientemente grandes para contener una cantidad razonable de texto y debe tener un plan para este elemento en pantallas más pequeñas, como permitir que todo en el cuadro de texto caiga debajo de la imagen principal. No intente colocar un cuadro de texto sobre una imagen en pantallas más pequeñas porque terminará con un cuadro de texto que es demasiado pequeño para leerlo o el cuadro cubrirá la mayor parte de la imagen.

Si te gusta el tratamiento de la caja blanca, diviértete. Cada uno de los ejemplos siguientes utiliza recuadros blancos de formas completamente diferentes.

Hacer espacio corta un cuadro blanco en la esquina inferior de la imagen para que la mayor parte de la imagen sea visible. El cuadro blanco sangra en el espacio en blanco de abajo de modo que casi parece que sale del panel de abajo. Esta técnica ayuda a conectar el control deslizante principal con el contenido a continuación (e incluso puede fomentar el desplazamiento).

Cómo utiliza manchas circulares para que los cuadros de texto blancos coincidan mejor con el tono de la ilustración de fondo. Este sutil cambio de forma, para que las cajas parezcan más fluidas, ayuda a conectar los elementos para que las cajas y el fondo tengan una sensación uniforme. No desea que los cuadros blancos para el texto se sientan como si estuvieran colocados al azar en el fondo. (Eso no funciona y no ayudará a crear una sensación de cohesión para los usuarios).

Macaulay Sinclair tiene más texto que los otros ejemplos usando una parte de una cuadrícula de panel de imágenes para contener el elemento de texto. Aquí, la imagen detrás del cuadro blanco no tiene valor informativo. Tiene un esquema de color y movimiento que se parece a otras imágenes y principalmente sirve para crear cohesión entre el elemento de texto y el resto del diseño.

3. Recortes de tipografía

Nadie dijo nunca que el texto tiene que ser una serie de letras rellenas sólidas. Más diseñadores están optando por recortes de tipografía que presentan un bloque de color sobre una imagen para que la imagen se vea con letras claras.

Esta técnica puede funcionar con imágenes fijas o en movimiento y con superposiciones de pantalla completa para que solo una pequeña cantidad de información venga a través de letras (casi para crear una textura) o con un estilo más de bloque sobre imagen con más de la imagen de fondo. visible.

El truco para hacer que esto funcione es el tipo de letra correcto. Las letras deben tener trazos lo suficientemente gruesos para que la imagen o textura del fondo sea visible. No puede hacer esto con una fuente delgada o condensada con un éxito constante.

Esta técnica también funciona mejor si el número de palabras y letras es bastante limitado. Limítese a una a tres palabras con 10 letras o menos o use palabras muy comunes que los usuarios sabrán de un vistazo.

Danbury utiliza un recorte de texto brillante a modo de dibujo para animar a los usuarios a participar en la videollamada a la acción. Toda la caja naranja es solo un botón gigante.

Bodega Fusion utiliza un video de fondo de un viñedo en las letras. Lo bueno de este diseño es el efecto de triple capa: Fondo de video debajo del recorte de texto blanco debajo de la imagen de un producto.

El Kaneko utiliza una imagen no identificable como relleno de letras. Si opta por este estilo, mantenga este fondo simple como lo hizo con este diseño. Solo hay un toque de color y textura que atrae la atención hacia el texto en el lienzo austero.

Conclusión

La colección proporciona inspiración para aquellos proyectos que pueden no tener una gran imagen o video, por lo que aún puede encontrar una manera de crear algo a lo que los usuarios responderán. No tenga miedo de utilizar el texto como elemento visual e informativo en este diseño.

¿Qué tendencias estás amando (u odiando) en este momento? Me encantaría ver algunos de los sitios web que le fascinan. Déjame un enlace en Twitter; Me encantaría saber de ti.