Color y capas Este par de elementos de diseño ha sido la fuerza impulsora detrás de muchas de las tendencias del año. Si bien no hemos visto nada que se haga cargo, como el diseño plano hace algunos años o, más recientemente, el Diseño de Materiales, los elementos de ambos estilos están empujando a los diseñadores a explorar cosas nuevas.

Ambas opciones de color y capas parecen tener sus raíces en esas tendencias más grandes y se utilizan en esquemas de diseño incluso sin una estética totalmente plana o material. Esto es lo que está en tendencia en el diseño este mes:

1. Montones de elementos en capas

Los elementos estratificados y los efectos tridimensionales son la técnica imprescindible en el espacio web 2D. Gracias a las técnicas divertidas e incluso a los mejores procedimientos, presentados principalmente por Material Design, los elementos estratificados aparecen en proyectos de todo tipo.

Lo que es particularmente bueno es que le da a un sitio web una sensación más realista. El usuario casi puede acercarse y agarrar los elementos en la pantalla. (¡Y eso es algo bueno!) El truco es que cada capa debe verse real y ligera, y las capas parecen naturales.

Aquí hay algunas maneras de comenzar a experimentar con capas en sus proyectos de diseño:

  • "Levanta" elementos del fondo con una simple sombra o animación. Olle hace esto con múltiples elementos en diferentes planos, pero todos se unen y se ven naturales.
  • Permitir que los elementos se crucen. El texto puede cruzarse en el espacio ocupado por una imagen.
  • Las funciones de desplazamiento en paralelo de Parallax son una forma interesante de crear elementos en capas (un primer plano moviéndose sobre un fondo) sin ser demasiado abrumador.
  • Use formas geométricas, animación y variación de color para imitar la profundidad en el diseño. Los usuarios deberían sentir que casi pueden caer en las imágenes, como la experiencia establecida por Eliminar agencia .
  • Cree capas yendo fuera del lienzo, con elementos que van más allá del fondo o el borde de la pantalla.
  • Permita que los elementos descansen sobre un fondo texturizado para crear una separación entre la capa superior (que los usuarios pueden imaginar que se tocan) y la capa de fondo.
Olle
borrar
hilo

2. Esquemas de colores oscuros

Por un tiempo, parecía que cada sitio web era un ideal minimalista, incluido un fondo blanco austero. Esa tendencia ha cambiado a medida que aparecen más esquemas de colores oscuros como el favorito del diseño.

Y por una buena razón. Un bonito esquema de color oscuro puede llamar la atención y no es tan duro para los ojos de algunos usuarios como el blanco brillante. Por otro lado, la estética oscura puede ser un poco más problemática si el texto es pequeño o en pantallas más pequeñas (así que asegúrese de prestar especial atención a cómo se renderizan los elementos en los dispositivos móviles).

Los elementos que realmente destacan en los esquemas de colores oscuros incluyen el uso de videos y animaciones geniales, incluso si apenas son reconocibles; tipografía en negrita, salta de color brillante para acentuar las llamadas a la acción o información importante y el estado de ánimo general apropiado.

Recuerde también que esa oscuridad no siempre significa negro. Los esquemas de colores oscuros se pueden enraizar en una variedad de tonos, desde rojos a azules y verdes. Si bien las opciones de negro son las más comunes, es importante elegir un negro rico que esté hecho de varias combinaciones de colores. Un negro plano (o "K negro" como lo llaman los diseñadores de impresión) dejará algo que desear en el diseño del sitio web.

Al trabajar con esquemas de colores oscuros, tenga especial cuidado para asegurarse de que haya un contraste adecuado entre los elementos y que los colores y las imágenes no se pierdan dentro de la naturaleza oscura del diseño. El blanco puede ser una buena opción, así como otros colores primarios con mucho brillo o saturación. Recuerda pensar en el contraste de tamaño también. Considere aumentar el tamaño de todos los elementos de texto de un 10 a un 20 por ciento cuando trabaje con un marco oscuro para garantizar la legibilidad.

embajador
convoy
abrigos

3. Los degradados vuelven

El gradiente, una de las técnicas rechazadas por el diseño plano, está regresando. (Y hasta se usa en patrones de diseño principalmente planos).

Los degradados funcionan porque hacen algo que mucha gente pensó que carecía el diseño plano, que es ayudar a crear y establecer la profundidad. Lo nuevo de los degradados esta vez es que no se utilizan para imitar texturas o sin propósito. La tendencia actual se centra en degradados de colores brillantes que enfatizan el contenido. Desde superposiciones de gradientes de pantalla completa hasta fondos, casi todo vale cuando se trata de la técnica ... siempre y cuando sea audaz.

Los diseñadores están aprovechando al máximo el regreso del gradiente de varias formas distintas:

  • Gradiente: los pares de "color plano" mezclan ambas ideas de diseño para una apariencia audaz, como el sitio web para WPcrew .
  • Los degradados de dos tonos son una superposición de color divertida para agregar interés a una fotografía que podría faltar o para agregar profundidad a un fondo.
  • Si bien muchos de estos gradientes parecen estar en una escala mayor, también se utilizan para elementos más pequeños, como botones o para llamar la atención sobre contenido específico.

Todavía hay algunos pendientes de gradiente para considerar también. (¡Ya que no quieres que ese diseño parezca salido directamente de 2012!)

  • Tenga cuidado con los pequeños degradados. El uso en íconos aún no es recomendado.
  • No abrume el contenido. Una superposición de degradado en una foto puede ser agradable (solo piense en algunos de los efectos geniales que Spotify presenta regularmente), pero la foto aún necesita ser discernible.
  • Los degradados de colores en negrita tienden a tener una sensación ligera y alegre. Asegúrese de que esto concuerde con su contenido.
  • Preste atención a las combinaciones de color y contraste cuando se trata de legibilidad. Algunos gradientes pueden obtener texto claro y blanco puede presentar un problema. Asegúrese de probar la legibilidad frente al color, diferentes puntos de interrupción de respuesta y en dispositivos de varios tamaños. (Con gradientes, los problemas de legibilidad a veces pueden aparecer en lugares que no esperarías).
wpcrew
Víctor
interactivo

Conclusión

No hay nada más divertido que el color en lo que respecta al diseño. Las tendencias en el color son agradables porque son elementos que puede agregar a casi cualquier estilo de diseño sin una revisión a gran escala. Lo mismo es cierto para los elementos estratificados. Esta es una técnica que se puede agregar a un diseño existente para darle una sensación más moderna.

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