El lado Oscuro está de moda

Jose A. Pedroche

UI/UX Designer

Ago 2020
Ago 7, 2020

Y no, no estamos hablando de la última tendencia de Star Wars, sino más bien de la interfaz favorita de la mayoría de usuarios de dispositivos móviles. Pero, ¿por qué nos gusta tanto el “modo oscuro”?

El aspecto visual del Modo Oscuro encaja con las ultimas tendencias de diseño, generando así un diseño actual y moderno.

Lejos de aspectos gráficos, su principal beneficio tiene que ver con el rendimiento de la batería: la luminosidad de los colores que se muestran en la pantalla influyen directamente en el consumo del dispositivo. Usando el «modo oscuro», el ahorro puede llegar hasta un 60% con el brillo al máximo y prolongar así la vida útil de la batería de nuestro dispositivo. Es cierto que este ahorro de consumo varía si nuestro dispositivo tiene una pantalla con paneles AMOLED o paneles LCD, donde el impacto de ahorro es inferior.

Pero también ayuda a mejorar la lectura, debido a un menor cansancio de la vista. Si sufres fotofobia, el Modo Oscuro es ideal para ti, aunque en caso de sufrir astigmatismo, el Modo Oscuro puede causarte fatiga visual, al tener que forzar mas la vista para leer los textos blancos sobre un fondo oscuro. Para grandes masas de texto, el «Dark Mode» no es lo mejor, por algo los papeles en libros son blancos y las letras negras. Este dato tendremos que tenerlo en cuenta dependiendo del contenido de nuestro site o aplicación.

Guias que deberías seguir

Sin pretender hacer aquí un tutorial de diseño, estas son algunas guías que deberías seguir para que tus diseños estén optimizados en el uso del «modo oscuro»:

  • No usar el negro #000000. Es recomendable utilizar grises muy oscuros, casi negros, como el  #121212.
  • Utiliza el blanco #FFFFFF para los elementos principales y grises para elementos secundarios.
  • Ten cuidado con la paleta de colores. Debes conseguir el suficiente contraste y puedes caer en el error de usar colores demasiado chillones. Es vital la relación de contrastes y aplicar el color correctamente.
  • Evita los colores saturados, ya que no pasarán el estándar de accesibilidad de 4.5: 1 y provocan fatiga visual.
  • Utilizando el media query prefers-color-scheme (aún no complatible con todos los navegadores) puedes detectar facilmente si tu usuario tiene activo el modo oscuro, aplicando diferentes estilos. Si no, puedes diseñar todo directamente con fondo oscuro y letras claras, y así se verá bien en ambos modos.
  • Utiliza siempre imágenes transparentes. No hay nada peor que ver un icono con un recuadro blanco sobre el fondo negro del modo oscuro.
  • Escoge una tipografía adecuada. Tipografías muy finas dificultarán la lectura.

Resumiendo, nos encontramos ante una nueva tendencia que requiere un poco de previsión y adaptar nuestros diseños. Como siempre, ¡testea en ambos modos para conseguir los mejores resultados! ¡Que la fuerza te acompañe!

También te puede interesar

Desafíos y Tendencias para los Diseñadores Gráficos en 2024

Desafíos y Tendencias para los Diseñadores Gráficos en 2024

El mundo del diseño gráfico está en constante evolución, impulsado por innovaciones tecnológicas y cambios en las preferencias de los consumidores. Este año, los diseñadores gráficos enfrentarán tanto nuevos desafíos como oportunidades. En Iberpixel, estamos en el...

La Aventura de la Fidelización y la Retención de Donantes

La Aventura de la Fidelización y la Retención de Donantes

¡Bienvenidos al emocionante juego de aventuras "Fidelización y retención de Donantes"! Prepárate para embarcarte en una emocionante travesía donde tu misión es retener donantes y construir relaciones duraderas para tu organización.   Punto de Partida: Atrayendo a...

En busca del flechazo web

En busca del flechazo web

En un mundo donde la primera impresión es a menudo digital, un sitio web actúa como la carta de presentación de una marca, empresa o individuo. Un sitio obsoleto o mal funcionamiento no solo puede disuadir a los visitantes sino también afectar negativamente la...