Skip to main content
UX/UI

3 tips para diseñar en modo oscuro

By 14 marzo, 2020junio 7th, 2022No Comments

El tema oscuro es una de las características más solicitadas estos últimos años. Tanto Google como Apple diseñaron un tema oscuro con el fin de destacar el contenido y mantener al usuario enfocado en su trabajo. Asimismo, Figma también ha sacado ¡por fin! el modo oscuro. La luminosidad emitida por las pantallas de los dispositivos con temas oscuros ayuda a reducir la fatiga visual y mejorar el rendimiento de la batería.

«Join the dark side»

tips-diseñar-en-modo-oscuro-blog

Aquí os doy 3 consejos a la hora de diseñar un tema oscuro para un producto digital:

1

Evita el negro puro

Un tema oscuro no tiene que ser texto blanco sobre un fondo negro totalmente puro. De hecho, ese alto contraste puede ser doloroso para la vista.
Es más seguro usar gris oscuro #121212 como color de fondo en lugar del negro #000000.
El texto claro en un fondo gris oscuro tiene menos contraste que el texto claro en una superficie negra.
2

Evita usar colores saturados en temas oscuros

Los colores saturados pueden verse bien en fondos claros pero en temas oscuros lo único que harán es dificultar la legibilidad.
Usa tonos más claros para proporcionar una mejor legibilidad. Las variantes de color más ligeras no harán que la IU sea menos expresiva, pero te ayudarán a mantener el contraste adecuado sin causar fatiga visual.
3

Cumple con los estándares de accesibilidad

Asegúrate de que tu contenido permanezca cómodamente legible en el modo oscuro igual que en el modo light. Las superficies de temas oscuros deben ser lo suficientemente oscuras para mostrar texto blanco y hay que tener en cuenta la accesibilidad de los botones, los iconos y todos los elementos.
Close Menu