Spotlight
Published in

Spotlight

Foto: Laureano Ruiz Pérez

No le temas a la oscuridad del Dark Mode

Sobre la tendencia de los dark themes en el diseño de interfaces y básicos para adoptarla como diseñadores. (Parte 1)

Alrededor del 70% de los programadores escribe código usando dark themes en sus computadoras, probablemente para soportar hasta altas horas de la noche y no sufrir cansancio en los ojos.

iOS 13 con Dark Mode fue presentado como una de las grandes novedades del WWDC 2019.

El ambiente nocturno: no culpes a la noche por trabajar tan tarde

Todo cambió cuando las pantallas de nuestros dispositivos cambiaron la forma de reproducir el color usando pantallas OLED, una tecnología que permite que los colores se reproduzcan sin necesidad de una luz de fondo, como es el caso de las pantallas LCD.

Fragmento del video Goodnight Developers de Apple

Ventajas de vivir en la oscuridad

La batería: una pantalla oscura, es (casi) una pantalla apagada

Google Photos con modo nocturno en Android

La accesibilidad: no solo se trata de invertir los colores

En cambio, el dark mode es un modo invertido consistente y estéticamente más elegante. Es un buen ejemplo de que mejorando las cosas para las minorías puedes hacerlo también para el resto.

Aplicaciones nativas en iOS 13 con modo nocturno

¿Cómo diseñar un dark theme?

El reto más grande a la hora de crear un dark theme es escoger los colores correctos, tanto en las superficies de fondo como en textos y elementos de acentuación.

  • Evita fondos completamente negros (#000000) con textos completamente blancos. Una buena combinación de grises se llevará bien con tu usuario. Incluso Apple usa diferentes gamas de grises en diferentes productos pero ninguno cae en el negro puro.
  • Colores menos saturados se llevan bien con fondos oscuros. Una forma de hacerlo es agregando una capa de color blanco con transparencia al 40% a los colores de tu marca para desaturarlos.
  • Ten especial cuidado con la legibilidad del texto. Un texto muy brillante (más cerca al #FFFFFF), es mucho más difícil de leer y tiende a cansar al usuario mucho más rápido. Como en los fondos, usa grises en lugar de blanco puro.
  • Juega con la analogía del día y la noche. En el caso de las ilustraciones, además de desaturar los colores, puedes agregar elementos como estrellas o nuevas fuentes de luz (como una lámpara) para recrear elementos nocturnos.
Sugerencias de Google al rediseñar ilustraciones para fondos oscuros
  • Por último, siempre dale al usuario la opción de desactivar el tema oscuro en tu aplicación, independientemente de la configuración de la plataforma para la que estás diseñando. Al introducirlo a la funcionalidad puedes incluso mostrarle que puede desactivarla.
Google Keep introduciendo una bienvenida a la nueva funcionalidad con opción a deshabilitar.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store