Estamos a muy pocos meses de terminar este año y como lo hicimos el año pasado, queremos adentrarnos en las tendencias del diseño web para este 2016, que cambiaron la manera de mostrar las interfaces de aplicaciones y páginas web en todo el mundo. Este es un repaso de lo que ha comenzado a ser un trending, además de otras que se siguen utilizando por su gran versatilidad.
Material Design
Este es un estilo introducido el año pasado por Google, para el diseño de aplicaciones y páginas web y que aún hoy se mantiene por su simpleza. El Material Design utiliza efectos de sombra, conceptos de movimiento y profundidad con el fin de crear diseños que parezcan más realistas para el usuario. Para este 2016 se mantendrá en combinación con el flat design.
La mayoría de los proyectos que salieron en un principio, se limitaban a diseños para aplicaciones, hasta que en Julio de este año Google lanzó Material Design Lite, mucho mejor aplicable para páginas web, con más sencillez y mayores herramientas de diseño.
Flat Design
Al igual que el Material Design, esta tendencia por su versatilidad se mantendrá muy presente en el diseño de muchas páginas web para este 2016. Este estilo llegó luego del surgimiento del diseño de materiales, como un rechazo del diseño esqueuomórfico.
El Flat Design es una estética digital que se caracteriza por colores brillantes, bordes afilados y una falta de profundidad, o ‘planitud’.
Ha demostrado ser muy popular entre los defensores del minimalismo en el diseño web, ya que reduce el desorden y resalta iconos explicativos, ilustraciones planas y su objetivo se centra en la separación entre el «mundo real» y el «mundo digital».
Animaciones
Las animaciones se están utilizando cada vez más para mejorar la narración de un sitio, y hacen que la experiencia sea más interactiva y entretenida. Sin embargo, no se pueden poner en cualquier lugar, hay que considerar la temática y funcionalidad del sitio. Las animaciones se pueden dividir en dos grupos:
- Animaciones a gran escala: se utilizan como una herramienta de interacción con más impacto en los usuarios.
- Animaciones pequeñas: Estas incluyen mini animaciones de carga, herramientas de selección, barras de carga y no requieren la intervención del usuario.
Estas son 7 técnicas de animación más populares en la web:
- Animaciones de carga: Estos se utilizan para entretener a los usuarios. Tienden a ser populares para flat design, minimalismo, portafolios y sitios de una sola página.
- Navegación y menús (nonscrolling): los menús de navegación ocultos se han hecho cada vez más populares, especialmente para ahorrar espacio en la pantalla.
- Animación al pasar el puntero: estos efectos dan una sensación más intuitiva a un sitio cuando los usuarios pasen el puntero sobre el contenido.
- Galerías y presentaciones de diapositivas: son una forma efectiva de mostrar varias imágenes sin sobrecargar a los usuarios.
- Animaciones en movimiento: Nuestros ojos son naturalmente atraídos por el movimiento, lo que hace que sea la herramienta perfecta para llamar la atención.
- Desplazamiento: los desplazamientos o scrolling suaves dan más control al usuario, quien puede determinar el ritmo de cómo se desarrollan las animaciones.
- Animaciones de fondo / vídeos: Un fondo animado simple puede añadir visibilidad al sitio, sino que debe utilizarse con moderación o puede ser muy molesto para el usuario.
Colores Vibrantes
Como el minimalismo y el flat design han ganado popularidad, los colores brillantes han ido en aumento. Las combinaciones de colores más vivos no se limitan sólo a diseño de páginas web, pero se pueden encontrar en el diseño de moda, tecnología e interiorismo.
El uso de colores vibrantes en diferentes bloques crea una disposición intrépida, ayudan a destacar elementos de la interfaz como los botones de navegación y los saltos de una página. Las paletas brillantes pueden resaltar una marca fuerte, como sucede con Google y sus posicionados «colores primarios».
Hay un arte en el uso de combinaciones de colores vibrantes con inteligencia y es fácil salirse de la borda con un caleidoscopio de matices demasiado chocantes o que no destaquen la esencia de la marca o idea del sitio web, por eso se debe tener cuidado y tener un «ojo clínico» con el color.
Tipografía Dramática
Las altas resoluciones en los nuevos dispositivos, las velocidades de internet más rápidas y las diferentes herramientas disponibles en la web, hacen que esta sea la edad de oro para las tipografías.
Las tipografías dramáticas han tomado posesión del diseño web, con tamaños extremos, tipos de letra personalizados, fuentes tradicionales que se utilizan de manera poco convencional y fuentes estilizadas con un impacto enorme. Con el acceso a las opciones tipográficas de Google Fonts y Adobe TypeKit, existen muchas posibilidades de ser creativos y dejar de lado los estilos comunes.
Ilustraciones
Esta tendencia podría ser una sorpresa para algunos, pero la ilustración ha demostrado tener mucha fuerza en este 2016 y demuestra como diseñadores buscan maneras de evitar la temidas fotografías. Los diseños web ilustrativos pueden variar desde una fuente y personalizados especialmente diseños vectoriales, bocetos, ilustraciones en 3D y fondos enteramente ilustrados.
Con la creación de ilustraciones personalizadas, los diseñadores tienen un mayor control creativo sobre la identidad de las marcas, además amplían la imaginación visual y permiten darle ese toque único al sitio.
Microinteracciones
Fundamentales para el diseño de aplicaciones móviles, las microinteracciones son las interacciones menores entre las más grandes, a menudo los usuarios se involucran con ellas sin pensarlo dos veces.
Ya sea tocar una alarma para apagarlo, un botón que cambia de color para indicar que ha sido presionado, un «ding» que indica un nuevo comentario en tu foto, las microinteracciones se suman a una experiencia de usuario más satisfactoria en general.
Videos explicativos de productos
Estos videos han estado presentes desde hace tiempo, pero su importancia crecerá en los próximos años. Con una duración de aproximadamente 90 segundos, los videos explicativos ofrecen una forma rápida y concisa para promocionar las virtudes de un producto determinado.
Con contenido informativo y animaciones inteligentes, este material en la web puede funcionar para cualquier tamaño y tipo de empresa en el que la gente sepa por qué sus productos son grandes y valen la pena adquirirlos.
Duotonos
Las imágenes en duotono son creadas por una imagen en escala de grises con un segundo color, que no sea. La técnica tiene sus orígenes en la impresión y encaja bien dentro de una moderna estética de diseño web minimalista.
Logran grandes efectos como fondo de la página web, ya que añaden un poco de vida sin distraer indebidamente de lo que más interesa: el contenido, o crear problemas de legibilidad. Una combinación de dos colores sencilla también puede ser una gran manera de crear una página limpia, de aspecto coherente, sobre todo cuando se está tratando de presentar varias imágenes muy diferentes en el mismo lugar (como logotipos o disparos a la cabeza los miembros del equipo).
Estas tendencias son solo algunas de las opciones que muchos han optado por utilizar durante este año, y que van de la mano con las nuevas tecnologías como los dispositivos móviles y con la rapidez y legibilidad con la que los usuarios necesitan tener la información. Veremos cuales de estas tendencias sobrepasarán la barrera de la «moda» y se convertirán en modelos coherentes para diseñar una página web.
Referencias:
- «Web Design Trends 2016: The Definitive Guide» UXPin, 2016.
- «5 web design trends and how to prototype them» Creative Bloq, 29/09/2016
- «6 Web Design Trends You Must Know for 2015 & 2016» Awwwards, 16/09/2016
