El diseño en modo oscuro o dark mode es una tendencia de diseño que ya podemos encontrar en la mayoría de productos digitales que utilizamos, tanto en dispositivos móviles, como en aplicaciones de escritorio o incluso televisores inteligentes. 

En esta modalidad del diseño se invierten los colores de los elementos de la interfaz, y se usan colores claros sobre un fondo oscuro, además de reducir el brillo. No significa usar unicamente blanco y negro. Se trata de elegir la combinación de colores adecuada que proporcione un buen contraste sobre los fondos oscuros.

En este momento es una funcionalidad muy demandada por las personas usuarias, y las grandes empresas como Google y Apple ya lo han incorporado en sus interfaces. Tampoco nos podemos olvidar de las redes sociales como Twitter o YouTube. 

Consejos para diseñar en modo oscuro

  • Evitar emplear colores saturados. Tenemos que tener en cuenta que al estar diseñando una interfaz en modo oscuro cualquier tipo de color va a resaltar muchísimo más que en otras circunstancias. Hay que evitar el uso de colores muy saturados, ya que pueden vibrar visualmente. Y no nos podemos olvidar de realizar las pruebas correspondientes para asegurarnos de la accesibilidad de los colores.
  • No utilizar negro puro. Aunque puede parecer que utilizando un negro puro podemos lograr suficiente contraste, no es así. En lugar de usar negro puro (#000000), se recomienda utilizar grises oscuros (como por ejemplo #121212). 
  • No intentar expresar el mismo estado de ánimo que en el modo normal. Debemos adaptar el tono de nuestra marca para que concuerde con el tema oscuro, ya que inevitablemente los colores oscuros transmiten otros sentimientos diferentes. La clave está en encontrar el equilibrio para poder transmitir a través de la paleta del modo oscuro unas emociones que concuerden con la marca.
  • Utilizar los colores para dar profundidad. Es cierto que en los temas claros es mucho más fácil crear sombras que nos ayuden a transmitir la sensación de profundidad. Pero aunque estamos diseñando para un tema oscuro, no significa que tenga que ser plano. Podemos utilizar ligeros acentos de color para crear la profundidad, lo que nos ayudará enormemente a que las personas usuarias puedan visualizar la jerarquía visual de la interfaz. 

Si quieres aprender más sobre el diseño oscuro este curso te interesa:

Beneficios del modo oscuro

  • Es saludable para los ojos. Hoy en día pasamos mucho tiempo delante de una pantalla, ya sea en nuestro ordenador o en el móvil. Aunque el modo oscuro no resuelve al 100% todos los problemas, sí que ayuda a disminuir la fatiga visual.
  • Se visualiza mejor en la oscuridad. Al tener menos brillo que un modo claro es mucho más cómodo para la vista en la oscuridad, ya que es más cómodo para los ojos y evita deslumbramientos.
  • Resalta el contenido. Normalmente las versiones en modo oscuro son más minimalistas, por lo que se minimizan las distracciones al consumir el contenido de la interfaz. Esto permite poner el foco en los elementos más importantes. 
  • Prolonga la vida de la batería. En los dispositivos con pantallas AMOLED u OLED el modo oscuro o dark mode supone un ahorro de batería del 14%, y con el brillo al mínimo puede llegar a suponer hasta un 60% de ahorro. Además, el diseño del modo oscuro contribuye a la creación de productos digitales respetuosos con el medio ambiente, ya que disminuye el índice de consumo energético.
  • Mejora la accesibilidad. Si se siguen todos los tips para diseñar en modo oscuro y aseguramos el uso de los estándares de contraste de color conseguiremos un producto más accesible e intuitivo para navegar. 

Es imprescindible probar y testear el tema tanto en modo oscuro como en modo normal, y hacer diferentes pruebas para los momentos del día. Tenemos que asegurarnos de que ambos diseños son óptimos para utilizarlos tanto de noche como de día.

Como UX Designers tenemos que entender en qué momento tiene sentido utilizar cada modo, para poder diseñar en consecuencia. También debemos respetar siempre todos los requisitos de accesibilidad y usabilidad para garantizar que estamos ofreciendo la mejor calidad en ambos modos para todas las personas usuarias.

Planifica e integra las mejores prácticas de la experiencia de usuario en tu organización con UX-PM Nivel 3: Liderar UX.

Aprende todo lo que necesitas saber sobre el diseño de servicios.

Más información sobre la certificacion internacional en UX Learn.


En Torresburriel Estudio desarrollamos las capacidades técnicas de tu equipo en temas de usabilidad, experiencia de usuario y diseño de producto a través de nuestros cursos online y presenciales.