7 consejos útiles para diseñar una interfaz de usuario oscura

Las interfaces de usuario oscuras han ganado popularidad y muchas aplicaciones ahora ofrecen la opción de cambiar entre un modo claro y oscuro. Sin embargo, implementar una interfaz de usuario oscura puede ser una tarea desafiante que requiere una cuidadosa atención a los colores, fuentes, imágenes y espacios utilizados.

Cualquier error en estos elementos puede resultar en una mala experiencia de usuario. Los siguientes consejos le ayudarán a diseñar su primera interfaz de usuario oscura.

1. No use negro puro

Cuando diseñe una interfaz de usuario oscura, evite usar fondos negros puros. Es mejor usar un tono oscuro de gris. Por ejemplo, Tema de diseño de materiales de Google recomienda el color #121212.

Un fondo negro combinado con texto blanco puede tener demasiado contraste y causar fatiga visual. En cambio, los tonos de gris más oscuros pueden mostrar sombras, profundidad y elevación fácilmente.

2. Asegúrese de que el contraste del texto cumpla con las pautas WCAG 2.0

Elija una combinación de colores que ofrezca un nivel adecuado de contraste, para que el texto sea legible. Las pautas de WCAG 2.0 establecen que el texto o las imágenes de texto deben tener una relación de contraste de al menos 4.5:1 con texto grande (al menos 18 puntos o 14 puntos en negrita) debe tener una relación de contraste de al menos 3:1.

Hay varias herramientas para comprobar el contraste de color, incluido el OLA Extensión de Chrome que también comprueba cuán accesibles son los colores.

3. Elija el estilo de fuente correcto

También debe tener en cuenta los estilos de fuente de su texto, incluido el tamaño, el peso y la altura de la línea. Si está buscando opciones de fuente, no olvide que hay muchos sitios que ofrecen fuentes gratuitas. En cuanto al tamaño de fuente, utilice valores que sean suficientes para garantizar que el texto sea claro y visible sobre un fondo oscuro.

Considere los siguientes estilos para una página web:

cuerpo {
Familia tipográfica: "mensajeroNuevo", monoespaciado;
tamaño de fuente: 12píxeles;
peso de fuente: 200;
altura de la línea: 1; 
color: #333333;
}

La familia de fuentes es difícil de leer, el tamaño de la fuente es demasiado pequeño y el peso de la fuente es demasiado ligero. Estos estilos hacen que la página sea difícil de leer, como puede ver en la siguiente captura de pantalla.

A continuación se muestran algunos estilos apropiados que podría usar en su lugar.

cuerpo {
Familia tipográfica: "Arial", sans-serif;
tamaño de fuente: 16píxeles; 
peso de fuente: 400; 
altura de la línea: 1.5; 
color: #FFFFFF;
color de fondo: #121212; 
}

Y aquí está la página resultante:

4. Evite los colores de acento saturados

Los colores saturados pueden resultar demasiado brillantes y borrosos en fondos oscuros. En su lugar, utilice colores que sean menos intensos y apagados. De esta manera, crea una interfaz de usuario que tiene texto visible.

Para demostrarlo, considere estos dos estilos de botones:

/* Azul saturado */
.btn-saturado-azul {
color de fondo: #121212;
color: #0e0bf6;
}
/* Azul silenciado */
.btn-silenciado-azul {
color de fondo: #121212; 
color: #4c5ab3;
}

El color azul saturado puede ser demasiado brillante y difícil de leer sobre un fondo oscuro, mientras que el color azul apagado proporciona un buen contraste y es más fácil de leer.

Una herramienta como de colores es útil para generar combinaciones de colores que siguen las pautas de accesibilidad.

5. Utilice el espacio negativo para evitar la creación de una interfaz de usuario pesada

Una paleta de colores oscuros puede hacer que la interfaz de usuario parezca pesada para los usuarios. Cuando se usa correctamente, el espacio negativo puede ayudarlo a resaltar elementos importantes de la interfaz de usuario y hacer que el texto sea fácil de escanear. Un espacio suficiente también puede hacer que el diseño sea más limpio y moderno.

Tomemos, por ejemplo, página de inicio de Apple. El espacio entre los elementos hace que la página se vea muy moderna y visualmente interesante, lo que permite que se destaquen los elementos importantes.

6. Use diferentes tonos de color para agregar profundidad a la interfaz de usuario

Al diseñar interfaces de usuario claras, puede usar sombras para agregar profundidad y elevación a los elementos. Sin embargo, debido a los fondos oscuros, las sombras a veces son difíciles de ver en las IU oscuras.

Puede lograr profundidad en una interfaz de usuario oscura mediante el uso de múltiples tonos de colores oscuros. Por ejemplo, en lugar de un solo fondo oscuro, puede agregar tonos más claros del mismo color a diferentes elementos como botones y modales.

7. Asegúrese de que sus imágenes coincidan con la interfaz de usuario oscura

No necesita usar las mismas imágenes para el modo claro y el modo oscuro. Puedes usar el modo oscuro Consultas de medios CSS para cambiar las imágenes que coinciden con la interfaz de usuario oscura cada vez que el usuario cambia al modo oscuro.

Por ejemplo, para aplicar un patrón de fondo específico a secciones de su página en modo oscuro, puede usar el nombre de clase .bgpattern y agregar el siguiente código a su hoja de estilo.

@medios de comunicación (prefiere-esquema-de-colores: oscuro) {
/* Aplicar este estilo solo en modo oscuro */
.bgpatrón {
imagen de fondo: URL("/oscuro.jpg");
 }
}

Esta consulta de medios garantiza que la imagen de fondo a la que se hace referencia solo se muestra cuando el esquema de color preferido del usuario es oscuro.

Cuándo usar una interfaz de usuario oscura

Los diseños de interfaz de usuario oscuros son una excelente manera de dar una estética moderna a su sitio web o aplicación. También pueden minimizar la fatiga visual y conservar la vida útil de la batería. Sin embargo, las IU oscuras no son adecuadas para todas las aplicaciones, y siempre debe considerar la marca y la base de usuarios.

En general, las IU oscuras son más adecuadas para las marcas que priorizan el lujo, el prestigio, el minimalismo o el misterio. También pueden ser una excelente opción para paneles y herramientas de visualización.