39

Qué es el dark mode y cómo ayuda a la accesibilidad de tu producto

3820Puntos

hace 25 días

Curso de Diseño en Modo Oscuro
Curso de Diseño en Modo Oscuro

Curso de Diseño en Modo Oscuro

Aprenderás las claves del diseño Darkmode, no solo a aplicar los preceptos de diseño a nivel visual, sino a entender la viabilidad e idoneidad de los diferentes componentes, estilos y requerimientos para asegurar la mejor experiencia de uso de un producto digital a los usuarios/as. Diseñarás tu propia App en modo oscuro, utilizando la herramienta Figma y aprenderás cómo utilizar esta fantástica herramienta para el diseño de Apps en darkmode tanto para iOS como para Android.

El dark mode es un cambio temporal en la paleta de colores en la que se invierten los colores de los elementos de la interfaz para utilizar unos claros sobre un fondo oscuro. También se reduce el brillo, lo que evita que la vista se canse y aumenta así el ahorro de la batería.

Desde que se hizo popular el diseño en dark mode tanto para sistemas operativos como iOS, Android o Windows, han lanzado documentación sobre cómo diseñar y crear con su modo oscuro (eso significa Dark Mode). Una forma de diseño “ecológica”, ya que te permite ahorrar la batería de los dispositivos.

Primero, un poco de historia

Desde que iniciaron las interfaces gráficas hemos visto texto blanco y pantalla negra, así fue desde el inicio. Las primeras pantallas o monitores de rayos catódicos utilizaban fosforescencia para mostrar letras con un background negro.

Después, con nueva tecnología en pantallas y el software Wordperfect se quiso emular la hoja blanca de papel y así siguió evolucionando el light mode y sus contrastes.

Pero… ¿Cuándo se hizo más popular el dark mode?

En el 2017 el diseñador Sylvain Boyer propuso al mundo una campaña de ecobranding: reducir el uso de colores en logos populares, para que cuando se impriman se use menos tinta. Luego trasladó esta idea hacia la interfaz de smartphones y le llamó FriendlUI “el primer dark mode”. También lo puedes ver en su página de behance.

¿Por qué es más accesible?

El modo oscuro se utiliza para reducir la luz que emiten las pantallas de los dispositivos. No tienes por qué usar simplemente blanco y negro, pero te tienes que asegurar de que las relaciones de contraste entre los colores sean adecuadas para que la interfaz sea legible.

¿Sabes qué es accesibilidad web?

darkmode.jpg

Foto del Dark Theme del Material Design de Google

Las interfaces oscuras minimizan la fatiga visual y suelen ser minimalistas y elegantes. Además, los estándares de contraste de color necesarios consiguen que sea fácil de navegar. Estas son las principales características que hacen que sea más accesible:

  1. Se visualiza mejor en la oscuridad. Con su poco brillo, no es un dolor a los ojos.
  2. Brinda énfasis a los colores que uses en componentes o elementos.
  3. Minimiza las distracciones al rastrear contenido al mirar.
  4. Brinda una jerarquía visual.
  5. Y alivia la fatiga visual.

Y con la salida de Material Design de Google y Dark Mode en iOS 13 era cuestión de tiempo que la mayoría de productos y servicios digitales adoptaran este nuevo look. Vemos también que los servicios de streaming usan un dark mode, como Netflix o HBO Max.

El uso de dark mode debe ser opción del usuario, y así lo aconseja Norman Nielsen Group. Incluso en algunos sistemas operativos está configurado para que durante el día se use el light mode, y a partir de la noche se cambia toda la interfaz a dark mode.

También tienes que asegurarte de ajustar bien los colores de todos los componentes para que no se pierda su importancia en las funcionalidades, al cambiar del modo claro al oscuro. Tienes que poner el foco en la legibilidad, el contraste y el propósito del producto.

Si quieres empezar a usar Dark Mode usa las guías de cada sistema operativo, aquí te compartimos las de Google y la iOS. Y si quieres aprender a aplicar la teoría del color en diseño UX, no dudes en tomar el Curso de Diseño en Modo Oscuro.

Ahora nos toca preguntarte ¿qué modo UI te gusta usar a ti? ¿Light mode o Dark mode?

Curso de Diseño en Modo Oscuro
Curso de Diseño en Modo Oscuro

Curso de Diseño en Modo Oscuro

Aprenderás las claves del diseño Darkmode, no solo a aplicar los preceptos de diseño a nivel visual, sino a entender la viabilidad e idoneidad de los diferentes componentes, estilos y requerimientos para asegurar la mejor experiencia de uso de un producto digital a los usuarios/as. Diseñarás tu propia App en modo oscuro, utilizando la herramienta Figma y aprenderás cómo utilizar esta fantástica herramienta para el diseño de Apps en darkmode tanto para iOS como para Android.
Daniel
Daniel
torresburriel

3820Puntos

hace 25 días

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
7541Puntos

¿Platzi ya tiene Dark Mode? 😄

8
577Puntos
24 días

Lo puedes forzar si quieres (si tienes Chrome o Brave) puedes usar los google flags con este comando en el buscador chrome://flags, en el buscador que te aparece escribes: Force dark mode, y lo habilitas para todas las paginas es un modo experimental por lo que en algunas paginas los colores no contrastaran pero es bastante util :3

3
649Puntos
24 días

También está la extensión dark reader.

1
2785Puntos

Puede agregarse el Dark Mode aunque sea una aplicación que no sea movil?

1
49346Puntos

A mi por el contrario el dark mode me genera una fatiga visual. Es por eso que en ciertas páginas de platzi cambio el css un poco para generar un “light mode”. Por si alguien le interesa dejo el link para que vea como queda. https://twitter.com/eperedo/status/1379135428662591495

1
31599Puntos
23 días

¡Hola! 👋🏽
Wow, nunca había conocido a alguien que le diera fatiga visual el dark mode. Tienes una propuesta super interesante, me pareció increíble. 😨

1
49346Puntos
23 días

Hola, gracias! Sí existimos personas que por distintos motivos no podemos usar dark mode, pero al parecer entre programadores no somos muchos 🤭. Por eso lo ideal es siempre ofrecer ambos modos en una app.

1
31599Puntos
23 días

Tienes mucha razón. 😊
Aunque como lo podemos ver en el curso, hay situaciones en las que es mejor usar el dark mode.

1
31599Puntos

¡El curso de dark mode fue increíble! ❣
Amé ver todo el contexto histórico que le dieron, las explicaciones profundas de en qué situaciones es mejor usarlo. Mil gracias por tan excelente curso. ❣❣

1
1168Puntos

El Dark Mode es otro level

1
1347Puntos

Buen artículo. Aún mejor la recomendación de establecer el modo oscuro como default. Quién iba a pensar que los coboleros y otros samurais, ya usaban el darkmode!

1
16974Puntos

Como soy visionaria!
Siempre tuve mi blog en dark mode ajaja no mentira pero si es verdad que siempre me gusto mas el modo oscuro, en realidad como bien dice la nota me pareció mas elegante.

https://viajesybibliotecas.blogspot.com/

Me descargue una platilla HTML y reforme un poco la estética del blog
Me fue divertido en su momento y lo deje como un portfolio de mis trabajos pero luego con la pandemia muto a un espacio de Download de mis pasamientos.
Me sigue divirtiendo mucho escribir alli. Aunque tambien lo hago en cuadernos y libretas

1
12071Puntos

Dark mode team!!