El modo oscuro, una tendencia que arrasa dentro del diseño web

El modo oscuro se impone como tendencia de diseño
Imagen: el modo oscuro se impone como tendencia entre los diseñadores web (Fuente: Janik Vonrotz)

El modo oscuro o “dark mode” se ha convertido en un fenómeno popular en materia de diseño de interfaces de usuario. Aquí te contamos en qué consiste.

Comenzó como una recomendación médica para reducir la fatiga visual provocada por la prolongada exposición al brillo de las pantallas. En la actualidad, es un paso fundamental en los planes de desarrollo de interfaces de usuario. El modo oscuro es moda y una característica común en numerosas aplicaciones y sistemas operativos.

Botón de modo oscuro
Imagen: el modo oscuro llegó para quedarse (Fuente: Dribbble)

El modo cambia (e invierte) los colores de las ventanas y los textos; los iconos pasan a tener tonos más claros y hace que todo parezca más oscuro. Es un aspecto agradable, si prefieres trabajar con tonos más apagados o en entornos con poca luz. En dicho caso, una pantalla brillante que es dura para los ojos deja de representar una molestia.

En lo que a tendencias se refiere, desde hace tiempo las compañías de software se han tomado este tema vinculado con las interfaces gráficas (GUI) con seriedad. Hoy en día, los propios usuarios lo demandan en sistemas operativos, aplicaciones móviles y herramientas web. Nos guste o no, el modo oscuro está presente en todos lados.

Modo oscuro en una Macbook
Imagen: así se ve el cambio a modo oscuro en una Macbook (captura)

Este auge ha sido objeto de estudio por parte de importantes compañías como Google. En ellos se determinó que el modo oscuro en los smartphones con pantalla AMOLED u OLED supone un ahorro de batería del 14%. Esto si mantenemos el brillo de la pantalla a la mitad; si lo tenemos al mínimo, el ahorro llega a ser de hasta un 60%. Tales resultados fueron claros potenciadores para que los desarrolladores de apps móviles lo incluyeran en las interfaces.

Los gigantes tecnológicos no escapan al cambio

Recientemente Google hizo públicas las versiones de su buscador con modo oscuro por defecto para las apps de Android 10 e iOS 13. Esto significa que, según en qué modo tengamos configurado el celular, la app detectará la configuración del sistema y cambiará automáticamente.

Facebook, que usualmente utiliza los tonos claros en su plataforma web, también se ha sumado a la tendencia. A mediados de marzo la red social finalizó la fase beta de ese proyecto; lo que representa su quinto gran cambio de diseño a nivel de web y plataformas móviles.

FB5 en modo oscuro
Imagen: el panel de FB5 cambiando a modo oscuro (captura modal inicial FB5)

La nueva versión cuenta con iconos más grandes, coloridos y redondeados; además, desde ahora dispondrá de un modo oscuro seleccionable. Mark Zuckerberg lo bautizó como “FB5”. Desde hace unas pocas semanas ha comenzado a desplegarse en todo el mundo. El cambio se reflejará de modo gradual para la totalidad de usuarios de la plataforma web en los meses siguientes. El nuevo look es muy llamativo y te lo presentamos a continuación:

Los sistemas operativos se pasan al lado oscuro

Desde hace varios años los usuarios de Ubuntu —sistema operativo de Linux—, pueden aplicar un tema que modifica las características visuales a tonos oscuros. El resultado genera los mismos efectos de lo que actualmente conocemos como modo oscuro.

Firefox dark mode
Imagen: Firefox se suma al club del dark mode (captura configuración Ubuntu 18.4)

A su vez, otros sistemas operativos como macOS de Apple ha integrado una manera de visualizar tonos más oscuros en su interfaz clásica Aqua. Se puede acceder a ella mediante un modo de selección manual desde el panel de control del sistema.

MacOS modo oscuro
Imagen: el modo oscuro de macOS, tan sensual como la marca (captura configuración en macOS Catalina)

En paralelo, Microsoft introdujo un selector de colores oscuros para varias secciones de Windows 10 a fines de 2018. Y hace pocos días comenzó el despliegue de la tan esperada versión 2004, que anticipa un sistema operativo más atractivo visualmente y con un mejor rendimiento.

El proyecto contará con varios cambios visuales, un nuevo set de iconos sumamente atractivo, varias mejoras al asistente Cortana y, como era de esperarse, un dark mode renovado. La ocasión pretende conmemorar el haber alcanzado los 1000 millones de usuarios activos a nivel mundial.

Para celebrarlo, lo presentaron en Instagram de esta forma:

https://www.instagram.com/p/B97VqkXg0iN/?utm_source=ig_embed&amp%3Butm_campaign=loading
Hello, darkness para los navegadores web

Los usuarios pasamos muchas horas utilizando internet en nuestros navegadores web. Por esto mismo la inclinación hacia el modo oscuro no iba a tardar en llegar a ellos. La modalidad ya era aplicable mediante extensiones de terceros y plugins. Sin embargo, Google integró un modo oscuro nativo a partir de las versiones 73 y 74. Un cambio que se dio tanto para Windows como para macOS.

Como ya mencionamos, una de las nuevas funciones de Google Chrome es que ahora puede detectar si el sistema operativo utiliza el “modo oscuro”. De ser así, también lo desplegará. Dicha característica es conocida como “modo oscuro adaptativo”. Además, en la versión 78 el usuario podrá aplicarlo a todas las páginas web que visite.

Modo oscuro adaptativo
Imagen: modo oscuro adaptativo (captura)

En esa línea también aparece Firefox, que tardó un poco más de tiempo en integrar el dark mode a su sistema. No fue sino hasta su versión 70 que el navegador del zorro implementó un oscurecimiento en su interfaz. A la par de esa modificación hubo otros cambios gráficos, como un nuevo logo de marca. Cabe destacar que este navegador aún carece de un comando nativo que permita cambiar a modo oscuro las distintas páginas web.

Dark plugins

Si bien varios navegadores web aún no cuentan con una función nativa para poder visualizar su interfaz en modo oscuro o al menos los sitios a los que visita, sí se habilitaron plugins de terceros como el popular “DARK READER” para que ejecute ese tipo de acciones para todos los sitios de la word wide web en los que navegues. Basta con buscarlo en tu tienda de extensiones.

Firefox DARK READER
Imagen: plug-in DARK READER en Firefox (captura)
Plataformas web y de escritorio: ¿vienen en negro?

La selección de temas dentro de la configuración de cada aplicación también ha seguido la tendencia. La suite de Microsoft Office incursionó en ella en el año 2016. La medida comprendió una serie de cambios en herramientas del paquete Office 2019 y en las suites de Office 365. Tras ello, se hizo lo mismo en dispositivos MacOS y más recientemente en las aplicaciones para Android e iOS.

Office 265 en modo oscuro
Imagen: captura panel de control Office 365 (captura)

Twitter, por su parte, cuenta con el “modo noche” desde el 2017. Hasta ahora, la implementación solo está disponible para su versión web. La estética se ha ido actualizando y hoy en día se la conoce como “noche clara”. A ella se suma el “modo noche oscura”, que se ve completamente negro y está pensado para aquellos usuarios que encuentran el anterior demasiado azulado.

Twitter modo oscuro
Imagen: Twitter en su versión modo oscuro (captura)

Google no se ha quedado atrás con sus servicios web. Desde hace ya tiempo, Youtube tiene integrado un dark mode en su interfaz. Para desplegarlo, se optó por incluir un activador manual.

Modo oscuro en YouTube
Imagen: El modo oscuro desplegado en YouTube (captura)

De igual modo, Google también planea incluir esta estética en su catálogo de aplicaciones web, mejor conocido como “G Suite”.

Back in Black: Apps en iOS y Android

Aquí podría decirse que se encuentra el desencadenante del modo oscuro como tendencia web global. Tanto Google, a través de su sistema operativo Android, como Apple con iOS masificaron la implementación de esta estética.  

Desde su versión 10, Android incluyó de forma definitiva el modo oscuro. En este caso, no solo cuenta con un activador manual, sino que también integra el modo adaptativo. Es decir que incentiva a las aplicaciones de terceros a que lo puedan implementar.

Celulares Android y su modo oscuro
Imagen: El modo oscuro en la interfaz de celulares Android (Fuente: TechCrunch)

Aquellos adeptos al sistema operativo móvil de la manzana mordida no se quedan atrás. Las versiones 13 de los sistemas iOS y iPadOS ya cuentan con el dark mode. Por lo pronto, incluyen la misma característica adaptativa mencionada para Android.

Modo oscuro de iOS
Imagen: iOS también presenta su modo oscuro (Fuente: First Post)

La integración sistemática del modo oscuro que vienen realizando los desarrolladores de apps no debería sorprender a nadie. Los usuarios pasan cada vez más tiempo frente a sus teléfonos. Por ende, es lógico que demanden un servicio que se ajuste a sus necesidades.

Imagen: las apps de Google se pasan al modo oscuro (Fuente: Xatakamovil)

Entre las aplicaciones de mensajería instantánea, Telegram y Snapchat fueron las primeras que incluyeron dicho modo en Android e iOS.

Snapchat y el modo oscuro
Imagen: Snapchat y su peculiar modo oscuro (Fuente: ipadizate)
Telegram se sumó al Dark Mode
Imagen: Telegram fue una de las primera apps de mensajería en aplicarlo (Fuente: Dribbble)
El «oscuro» mundo de Facebook

Facebook, en cambio, se tomó más tiempo para incluirlo en sus apps móviles. Recién entre el año pasado y este hemos visto cómo sus plataformas comienzan a adoptar paulatinamente esta interfaz.

Messenger, por ejemplo, fue una de las primeras aplicaciones de la compañía en incluir el “dark mode” en abril de 2019:

El refinado modo oscuro de Messenger
Imagen: Messenger presenta un modo oscuro refinado (Fuente: gsmarena.com)

Su diseño se caracteriza por ser completamente plano. Sumado a ello, predominan los botones grandes y globos de texto curvos. Para activar el modo oscura en esta app, contamos con la activación manual o el modo adaptativo.

Quien le siguió en ese grupo fue Instagram, que en septiembre de 2019 lanzó su versión para ambos sistemas operativos móviles. Frente a su creciente popularización, tanto el usuario frecuente como el influencer lo venían pidiendo hace tiempo. Por ahora, la única forma de activarlo es a través del modo adaptativo.

Instagram y su estilizado dark mode
Imagen: Instagram oscurece su interfaz (Fuente: Techgara)

Whatsapp, que hoy pertenece al grupo Facebook, también se sumó a la tendencia en el tiempo reciente. Tras muchas idas y vueltas, la app de mensajería móvil más popular del mundo introdujo su modo oscuro a comienzos de marzo de 2020. 

Aquí les compartimos el particular video con el que fue dado a conocer:

La última aplicación de la compañía en llegar a la fiesta fue la propia Facebook. No fue sino hasta hace un par de semanas que la compañía anunció el lanzamiento oficial del modo oscuro. La nueva interfaz ya está disponible para todos los usuarios de los sistemas operativos iOS y Android.

Dark mode en la app de Facebook
Imagen: La app de Facebook para celular, la última en caer en la moda del dark mode (Fuente: 9to5Mac)

La tendencia del modo oscuro llegó para quedarse… ¡Y no se ve nada mal!

Acerca del Autor

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Recomendados para vos