Modo oscuro: 8 trucos para mejorar tus diseños

El modo oscuro está de moda. Lo que hace unos años parecía ser solo una opción de estilo en algunos espacios, como ciertas aplicaciones, esta cada vez más extendido en diseños webs en general. Y es que ya resulta habitual que en muchos sitios nos den la opción de elegir entre visualizar una web en el modo «clásico» (fondo claro y texto con tonos negros) y el modo oscuro. Por esta razón, queremos daros algunos consejos a tener en cuenta si nos embarcamos en el viaje de crear un diseño web en modo oscuro.

Lo que muchos os preguntareis es, ¿por qué esta de moda el modo oscuro?. ¿Merece la pena el esfuerzo de adaptar nuestro diseño a este estilo de visualización?. Veamos cuales son algunas de las ventajas que nos ofrece este cambio:

  • Podemos conseguir un aspecto más profesional o de lujo, que puede encajar con la temática de nuestro diseño.
  • Permiten al visitante enfocar su visión en los elementos importantes, ya que un fondo oscuro provoca menos distracciones.
  • Puede reducir la fatiga visual, sobre todo si se visualiza en ambientes oscuros. Seguro que habéis tenido que bajar el brillo de la pantalla de vuestro smartphone por el fogonazo de ver el fondo blanco de una web. Esto no ocurre con el modo oscuro.
  • Hablando de smartphone, aquellos que tienen pantallas OLED se benefician de las webs y apps en modo oscuro, ya que gastan menos batería.

Eso si, no siempre el modo oscuro es lo idóneo en cualquier proyecto, y como diseñadores es algo que debemos de advertir a nuestros clientes:

  • Puede que los colores de la marca no se adapten bien al modo oscuro, y sea preferible mantener una interfaz con tonos claros.
  • En webs con mucho texto, como blogs o periódicos online, es preferible no usar el modo oscuro no está hecho para lecturas intensas.
  • Cuando nuestro diseño necesita de una gama de colores muy amplia.

Tampoco hay que olvidarse de otro punto importante. Dentro de nuestras posibilidades (de tiempo y presupuesto), es preferible ofrecer el modo oscuro a modo de elección al visitante. Es decir, añadir el típico toogle para cambiar de un modo a otro, como tiene Twitch, por ejemplo.

diferencias entre el modo claro y oscuro de la web de twitch

Actualmente, gracias a CSS podemos automatizar el proceso de crear un modo oscuro, como nos muestran en este artículo de DEV Community, pero siempre tendremos que repasar los resultados y hacer ciertos ajustes, ya que el resultado no va a ser totalmente satisfactorio. Y es aquí donde podemos empezar a aplicar algunos de los consejos sobre el diseño del modo oscuro que vamos a ver a continuación.

Consejos para crear tu diseño en modo oscuro

No utilices un tono negro puro

Posiblemente sea el error más común, y el que todos hemos cometido cuando hemos creado un diseño en modo oscuro: hacer un fondo con color #000000. Hay que evitarlo a toda costa, ya que es demasiado agresivo y estamos creando un contraste demasiado fuerte con el resto de tonos. La mejor opción es optar por algún tono de gris oscuro. Sin ir más lejos, en las pautas del Material Design recomiendan el #121212. Desechando este negro puro, vamos a hacer que la visualización de la web sea más amigable con los ojos.

Ni tampoco uses el color blanco puro

Tampoco debemos aplicar un color blanco #FFFFFF, sobre todo si hablamos de textos. Como en el punto anterior, podemos crear un contraste tan elevado entre el texto y el fondo que puede resultar molesto. Por eso es preferible usar grises claros para los textos.

Juega con la opacidad en las tipografías

Otra opción si no queremos empezar a experimentar con que tono de gris le viene mejor a nuestros textos es optar por elegir un blanco puro en ellos, pero jugar con su opacidad. Vamos a tener un efecto parecido que si utilizamos tonos grises, pero la elección de la opacidad idónea es más rápida que si tenemos que pensar en un tono de gris dentro de todos los existentes. Esta opacidad también nos va a servir para crear una jerarquía: los de más importancia tendrán menos opacidad, y los textos secundarios una opacidad mayor.

Diferentes heading, con opacidades diferentes según su importancia

Evita los elementos con sombra

Crear sombras es muy habitual cuando queremos dar sensación de profundidad en el diseño, o dar importancia a ciertos elementos. Pero en el modo oscuro este tipo de sombras difuminadas no funcionan bien, y es casi mejor no usarlas. Algunos diseñadores optan por crear sombras blancas aunque, personalmente, no creo que tengan el efecto que pretenden.

Cuidado con los colores saturados

Este es un punto importante, y que muchas veces no nos damos cuenta de él. Los colores vibrantes, que con un fondo blanco funcionan muy bien, al ponerlos en un fondo oscuro resultan demasiado agresivos. Incluso, en el caos de textos, molestos de leer. Por eso es preferible desaturar un poco esos colores para aumentar tanto la legibilidad como la amabilidad general del diseño.

diferencia del tono de morado del logo de twitch según este la web en modo claro u oscuro

Crea niveles según la luminosidad del color

Antes hemos dicho que las sombras no son una buena opción para crear un efecto de profundidad en el modo oscuro. Por suerte, disponemos de otras opciones, como la de aplicar a los elementos que queremos que se vean por encima del fondo un tonos algo más claro que el del propio fondo. E ir creando diferentes niveles de altura según sea su tono con respecto al fondo.

elementos con diferentes mismo tono de color pero diferente luminosidad, para crear profundidad en modo oscuro

Verifica siempre el contraste entre diferentes colores

Ya sabemos de la importancia del contraste. Y en ocasiones, el color que nos servía en un diseño con fondo claro no nos va a servir en el modo oscuro. Por eso decíamos que podemos usar automatismos para construir un modo oscuro, pero hay aspectos que siempre hay que testear para que todo funcione.

Color rojo #961929 y su diferencia de contraste segun este en fondo claro u oscuro

Usa los gradientes a tu favor

Por último, no queremos olvidarnos de los gradientes de color. Una tendencia que podemos aplicar sin miedo a nuestro diseño en modo oscuro. Este gradiente puede incluir un tono parecido al que tengamos como primario en nuestro diseño, y conseguir un conjunto más homogéneo.

Conclusiones

Como hemos podido ver, teniendo siempre en mente ciertas pautas fundamentales, es bastante sencillo crear un diseño con modo oscuro, o construirlo a partir de un diseño ya creado. Lo importante es saber siempre cuando el modo oscuro es adecuado según el proyecto, y determinar cuales son los cambios adecuados que debemos efectuar para que el diseño en modo oscuro pueda funcionar de forma independiente sin problemas.

Por supuesto, y como hemos dicho al principio, dentro de nuestras posibilidades debemos hacer que este modo oscuro sea una opción para el visitante, ya que no a todo el mundo le gusta navegar en este modo. Esperamos vuestras dudas, sugerencias y experiencias que hayáis tenido como diseñadores dentro del mundo del modo oscuro. Nos la podéis dejar en los comentarios para que todos podamos leerlas!

Comentarios (1)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *