4 Tendencias Web

4 Tendencias de Diseño Web del momento

Por Carlos Abraham Hernández, UX/UI Specialist en Financial Solutions

Las tendencias digitales nacen y cambian todos los días, sin embargo, algunas logran sobresalir y ganar terreno en la web.

Actualmente la mayoría de las personas son usuarios activos de sitios web, por lo que debemos atraer la atención y hacer todo lo posible para que permanezcan en nuestra plataforma o aplicación; una de las formas de lograrlo es crear un sitio visualmente atractivo e intuitivo.

A continuación, te presentaré 4 tendencias que están creciendo en el mundo del diseño web:

Elementos inmersivos 3D

Los elementos en 3D han fascinado a los usuarios durante muchos años, la popularidad de esta tendencia ha ido en aumento desde que las tecnologías de realidad virtual ganan impulso y están al alcance de un mayor número de usuarios.

Esta tendencia permite a los diseñadores jugar con los sitios web, por ejemplo, la web de a-0.design usa elementos 3D interactivos como menú, despertando la capacidad de asombro del usuario y motivando a que navegue por su portal para descubrir nuevas cosas.

Para el campo de venta de productos, existen herramientas como ZAKEKE que te permiten transformar tus productos en versión 3D e incluso verlo en Realidad Aumentada. Imagina que quieres comprar unos lentes, joyería, tenis, una sala, maquillaje, ¡todo es posible! Ya que a través de esta herramienta puedes visualizarlo en todos sus ángulos y no solo eso, con la cámara de tu celular se puede lograr ver como se te verían puestos los accesorios o como se vería un mueble en la sala de tu casa.

Es por eso que los productos en 3D tienen un papel importante en una decisión de compra, al poder mostrar el producto y despertar la capacidad de asombro entre un espacio virtual y la vida real. Sin embargo, es indispensable el alto rendimiento de la interfaz de usuario de tu sitio web. Ten cuidado con este punto, ya que, si tu plataforma no está bien optimizada, puede ocasionar un tiempo de respuesta lento y que todo tu esfuerzo salga contraproducente. Para esto podrías utilizar WebGL, que es una especificación estándar que define una API implementada en JavaScript para la renderización correcta y eficiente de gráficos en 3D dentro de cualquier navegador web.

Neumorfismo

Este efecto nace en Dribble y rápidamente convirtió viral. Es un diseño que se mantiene muy minimalista, conservando las sombras ya conocidas de Material Design, y agregando relieves a todos los elementos dando como resultado una forma muy realista.

Este efecto es bastante fácil de lograr jugando con dos sombras, una en valores negativos y la otra en positivos.

Toma en cuenta lo siguiente:

  1. El fondo no puede ser totalmente negro o blanco.
  2. Se necesita al menos un poco de tinte para que las sombras oscuras y “claras” sean visibles.
  3. Puedes usar cualquier tono para el fondo, así que puede ser más cálido o frío dependiendo de tu elección.
  4. Las sombras blancas y oscuras tienen que ser visibles en él fondo, aunque sea ligeramente.

Un punto en su contra sería la falta de contraste por lo que para las personas que tienen problemas de visión, sería más complicado distinguir los elementos. Algo que me gustaría mencionar es que el código “no se hace pesado”, ya que es el mismo que siempre usamos, simplemente con valores diferentes de sombra.

Hasta este momento, no tengo registro sobre una aplicación real en sitios que utilicen esta tendencia, salvo algunas aplicaciones que se realizaron en iOS. Si tú conoces algunas, ¿nos las podrías compartir?

Si quieres intentarlo, te dejo una herramienta que te ayudará a lograr los efectos necesarios: neumorphism.io

Modo Nocturno

¿Sabías qué el dark mode ayuda a aumentar el porcentaje de rendimiento de las baterías?

Esto se debe a que los colores claros tienen una relación directa con el consumo de la batería, ya que en las pantallas tipo OLED en donde cada pixel produce su propia iluminación y al mostrar en pantalla un color negro, el pixel se apaga, es por eso que se produce el ahorro de energía. Sin embargo, en las pantallas LCD no se presenta la misma ventaja, ya que la luz proviene de la parte trasera, por lo que incluso el color negro se aprecia más como una tonalidad grisácea.

En la actualidad, aplicaciones y páginas web mejoran su usabilidad, implementando esta opción con el objetivo de adaptarse a lugares poco iluminados y ayudando a disminuir la fatiga visual del usuario.

Debemos tener en cuenta que los temas oscuros, pueden ayudar a reducir la fatiga ocular en condiciones de poca luz, sin embargo, en condiciones de mucha luz el efecto puede ser lo contrario. Ya que estudios científicos han encontrado pruebas de que la legibilidad de un texto mejora significativamente con una luz oscura sobre una fuente clara.

Desde hace tiempo las compañías se tomaron en serio este tema, por lo que agregaron el dark mode a sistemas operativos como: iOS, Android, MIUI, etc.

Actualmente un diseño oscuro transmite la sensación de modernidad y ayudan a enfatizar el contenido de la app o página web.

Esta tendencia se vuelve cada vez más adoptada, ya que los mismos usuarios pueden elegir entre una vista u otra, y en los casos en los que no existe un dark mode, los sistemas operativos pueden forzarlo cambiando el diseño original y dejando colores que no van de acuerdo con la gama pensada inicialmente por la empresa.

Tipografía “caótica”

El texto siempre ha sido un elemento que está muy presente dentro del diseño, por lo que cada vez se cuida más y se aprovechan nuevas técnicas para hacerlo más llamativo.

Utilizar tipografías “caóticas” diferentes y desordenadas, en una misma composición aporta versatilidad y equilibrio al diseño. De esta forma lograrás captar mucho más la atención del usuario. Es recomendable usarla en los banners, ya que si se usa en toda la web puede ser cansado para el usuario.

No es necesario utilizar más de una tipografía para lograr esta sensación de “Caos” en este ejemplo solo se usa una con sus diferentes grosores.

https://garet.spacetype.co/

Para utilizar este recurso necesitas escribir las palabras sin dar importancia a la alineación o al orden e incluso mezclándolas. Se trata de romper las reglas, de ser desordenados pero ordenados al mismo tiempo.

http://ab-architects.nextpage.agency/living

En Financial Solutions, estamos en constante aprendizaje sobre la implementación de nuevas tendencias, que hacen más atractivas e innovadoras los portales o plataformas que desarrollamos.

Algo que me parece importante mencionar es que no todas las tendencias son aptas para todas las empresas, para ello se estudian los valores y el público objetivo de nuestros clientes, esto nos permite aportar mayores beneficios, utilizando procesos de análisis como Design Thinking, Benchmarks, Data Driving Design etc.


Related Post