Muchas plataformas populares, aplicaciones móviles y similares suelen optar por incluir el modo oscuro o Dark Mode a sus interfaces, este modo facilita la lectura de los contenidos como textos a los usuarios que sufren por la luz blanca de las interfaces, pero hay ciertas consideraciones que se deben tener en cuenta antes de crear el modo oscuro de una aplicación y en este Post te compartiré algunas de ellas, vamos con ello.
Antes de continuar te invito a leer los siguientes artículos:
- Si eres Desarrollador te brindo estos consejos para Obtener habilidades en el Diseño de Interfaces UI
- Generando Diseños para cada Densidad de Pantalla en Android (dpi) con Adobe Xd
- 5 Consejos para crear Interfaces de Usuario (UI) para aplicaciones móviles de Mensajería o Chat
- Puedes leer más en la categoría UI
Asimismo, te invito a escuchar el Podcast: “Razones Por Las Cuales Te Cuesta Aprender A Programar”:
| Spotify: | Sound Cloud: | Apple Podcasts |
 |
 |
 |
Bien ahora continuemos con el Post: Principios del Diseño de Interfaces Oscuras (Dark Mode).
Los diseños de interface UI se suelen visualizar a lo largo y ancho de los dispositivos, desde pantallas Desktop y dispositivos móviles, hasta televisores inteligentes, un diseño oscuro presenta múltiples desafíos y no cumplirá con lo que se espera si es que se implementa de manera deficiente. Antes de que los diseñadores de interfaces se aventuren en el lado oscuro, es importante que consideren los principios que mencionaré a continuación.
Profundidad de Comunicación (Elevación)
Un tema oscuro no significa que sea plano, en los temas con luz es mas factible poder crear sombras, crear sensación de profundidad, etc. Con las UI oscuras es más desafiante porque contienen en la mayoría superficies oscuras con escasos acentos de color, pero aún así los diseñadores pueden usar 3 o 4 niveles de elevación con los esquemas de color correspondientes para que el texto transmita profundidad.
La mayoría de los sistemas de diseño modernos utilizan un sistema de niveles de elevación para comunicar la profundidad. La sensación de profundidad se corresponde con el mundo natural, nuestra visión tiene percepción de profundidad y vivimos en un mundo tridimensional. La profundidad ayuda a enfatizar la jerarquía visual de una interfaz.
Palabras con Estilo (Tipografía)
El texto debe ser lo suficientemente grande para que tenga una buena legibilidad, ya que el texto pequeño sobre fondos oscuros es más difícil de leer, asimismo debe haber suficiente contraste entre el texto y el fondo oscuro. En la Nube (Internet) contamos con miles de fuentes tipográficas con las cuales puedes crear mensajes que generen impacto en los usuarios.
Como diseñador debes mitigar los problemas de legibilidad aumentando el contraste y ajustando el tamaño de fuente, el espaciado de caracteres y la altura de línea para texto los textos más pequeños.
Menos es Más (Aprovechar el Espacio Negativo)
Uno de los aspectos importantes del diseño exitoso de una interfaz de usuario oscura es el uso adecuado del espacio negativo, si estos espacios se tratan mal, las UI oscuras pueden hacer que los productos digitales parezcan pesados y dominantes. Para contrarrestar esto los diseñadores pueden hacer que las UI oscuras sean más livianas aprovechando el espacio negativo dentro de diseños minimalistas y con sus elementos correctamente dispersos entre si.
Una cantidad generosa de espacio negativo alrededor de los elementos de la interfaz de usuario es lo que les da definición. Enfatiza el contenido importante y proporciona el respiro necesario para garantizar que el diseño no se sienta denso y desordenado.
Atención de Enfoque (Color)
Los colores suelen destacarse en las UIs oscuras, es mejor usar esquemas con colores de acento más claros e insaturados. Evita el uso de colores saturados en interfaces de usuario oscuras, ya que pueden vibrar visualmente contra superficies oscuras, asimismo como práctica recomendada, los colores deben pasar el estándar AA de WCAG de la menos 4.5:1 cuando se usan con texto.
Cuando se define un esquema de color para una interfaz de usuario oscura, Google recomienda un número limitado de acentos de color para mantener la mayor parte del espacio disponible para superficies oscuras. El esquema debe tener un color dominante y 2 colores adyacentes al complemento del color dominante. Hacer esto proporciona el contraste necesario sin la tensión del esquema de color complementario.
Contraste en el Diseño (UI Oscura)
El hecho de que un tema sea oscuro, no quiere decir que este sea un tema negro, es mejor definirlo como un diseño con poca luz. Una de las preocupaciones principales con las UIs oscuras es lograr suficiente contraste para que los elementos visuales tengan separación y el texto sea legible. Muchos diseñadores pensarían que usar negro sería optimo para lograr un fuerte contraste, sin embargo es mejor no usar un verdadero negro (#000000) para fondos o colores de superficie.
El negro se reserva mejor para otros elementos de la interfaz de usuario y se usa con moderación. Por ejemplo el color negro verdadero se puede utilizar para pequeños elementos de la interfaz de usuario o un bisel circundante.
Conclusión
El usar un diseño de interfaz oscura en lugar de uno tradicional se debe abordar con discreción, no debe elegirse por razones equivocadas y si es elegido este debe ser moderno, diferente a otros diseños para que tenga un perfil único.
Nota (s)
- Los temas oscuros son adecuados para algunos productos digitales, pero es una gran tarea implementarlos, la simplicidad juega un papel clave a la hora de hacer este tipo de diseños.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.