Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscuros

Atenúa las luces, relaja los ojos y ahorra energía. El modo oscuro es una de las mayores tendencias en diseño, y marcas de clase mundial como WhatsApp, Instagram, Google, Facebook y Apple ya se han subido al tren del diseño del modo oscuro.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosIlustración del modo oscuro por Vladanland

Echemos un vistazo a lo que hacen estas grandes marcas y cómo puedes incorporar la interfaz de usuario del modo oscuro en tus propios diseños. Aprenderás los pros y los contras del modo oscuro y las mejores prácticas esenciales a la hora de diseñar para el modo oscuro para asegurarte de que tus diseños de web y aplicaciones se vean y funcionen perfectamente.

¿Qué es el modo oscuro?

El modo oscuro es una interfaz de usuario (UI) con poca luz que utiliza un color oscuro, generalmente negro o un tono de gris, como color de fondo primario. Es una inversión de la interfaz de usuario blanca predeterminada que los diseñadores han usado durante décadas. En respuesta al aumento del tiempo de pantalla, los desarrolladores descubrieron que las interfaces de temas oscuros ayudan con la tensión ocular, especialmente en situaciones de poca luz o de noche. Menos tensión ocular significa menos dolores de cabeza y una mejor experiencia de trabajo.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosInstagram modo oscuro UI Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosGoogle Fit modo oscuro UI via The Verge Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosWhatsApp en escritorio modo oscuro UI via What$0027s App

Pero el modo oscuro no es nada nuevo.

¿Recuerdas el código verde de la computadora lloviendo sobre un fondo negro en The Matrix? Eso fue un guiño al modo oscuro original: esos monitores monocromáticos de la vieja escuela de los primeros ordenadores.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosLos primeros ordenadores caseros con texto verde sobre negro eran el modo oscuro de OG.

Ese clásico look oscuro pasó de moda en los 80 a favor del texto negro sobre un fondo blanco diseñado para imitar el aspecto de la tinta sobre el papel.

Durante casi tres décadas, esta fue la norma, hasta que el modo oscuro hizo su primer regreso en Windows Phone 7 en 2010. Una vez que Google verificó que el modo oscuro ahorra la vida de la batería, agregaron la función a su sistema operativo Android en 2018. Un año después, Apple siguió con el modo oscuro en iOS y iPadOS.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosModo oscuro en iOS 13 vía 9to5Mac

Ventajas de usar el modo oscuro

No sólo el modo oscuro es fácil para los ojos (cuando se hace bien), sino que este estilo ahorra la vida de la batería e incluso puede ser más saludable. Veamos las ventajas prácticas del modo oscuro frente al modo claro.

Reduce la tensión ocular

Se supone que no debes sentir tus ojos. Pero, cualquiera que analice los datos en una pantalla durante mucho tiempo sabe que después de un tiempo, empiezas a… El Síndrome de Visión de Computadora (CVS) incluye dolor de ojos, visión borrosa, visión doble, dolores de cabeza, dolor de cuello y espalda y más. Cuando se trata de tablas y gráficos, el modo oscuro puede ayudar a reducir literalmente el dolor.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosEste logo verde funciona muy bien con el diseño de esta aplicación de tema oscuro. Diseño de Anish Daga.

Aumenta la visibilidad en la iluminación del ambiente bajo

Si estás durmiendo y alguien enciende una luz brillante, te va a doler la cabeza. El mismo principio funciona con las personas que trabajan frente a una pantalla de ordenador a altas horas de la noche o a primeras horas de la mañana. El modo oscuro reduce esa luz brillante y hace más fácil ver el contenido en situaciones de poca luz.

Ahorra la vida de la batería

Ciertos aparatos digitales con pantallas OLED pueden desactivar los píxeles negros cuando no se usan. El modo oscuro utiliza un mayor número de píxeles negros, lo que obliga al dispositivo a utilizar menos energía.

Da un impulso emocional

Muchos usuarios de UI en modo oscuro lo hacen por los beneficios para la salud y el ahorro de energía más que por razones estéticas. El modo oscuro les recuerda que están haciendo algo un poco más saludable, lo que provoca una buena sensación, como la que se obtiene al cargar la bolsa de la compra o la botella de agua reutilizable.

Previene el TDA

Bueno… más o menos. La luz blanca y los colores tienden a hacer que tu atención se desvíe, lo que hace más difícil mantenerse en la tarea. La interfaz de usuario del modo oscuro puede aumentar el enfoque dirigiendo la concentración hacia las zonas de contenido de la interfaz, dejando que ese contenido se destaque y que el fondo desaparezca.

Contras de usar el modo oscuro

Como todo, el modo oscuro tiene sus desventajas. Familiaricémonos con las razones por las que un tema oscuro podría ser un inconveniente para sus propósitos.

Reduce la conexión emocional

Los colores brillantes pueden crear emociones brillantes. Si eso es lo que sus espectadores buscan, entonces atenuar los colores puede crear una barrera mental con ellos. Tendrán más dificultades para hacer una conexión emocional con el tema de la oscuridad. Si tu marca es de naturaleza motivacional, inspiradora o espiritual, el modo oscuro de UI puede ser una apuesta. Si los colores brillantes pueden crear emociones brillantes, lo contrario puede ser cierto. Entonces, ¿quién es tu público? No los desanimes si están buscando un aventón.

Reduce el espacio

Las habitaciones con paredes oscuras pueden sentirse claustrofóbicas. En un dispositivo, el modo oscuro puede funcionar de la misma manera. Si intentas crear una sensación de espacio, las UI oscuras pueden hacer que el espacio se sienta más pequeño.

Los colores de bajo contraste pueden ser difíciles de leer

Si no consigues los colores y contrastes correctos al diseñar un sitio web o una aplicación con un tema oscuro, puede hacer que el texto sea más difícil de leer, así que tenlo en cuenta al crear un diseño de correo electrónico, una aplicación o un sitio web en modo oscuro.

Cómo usar el modo oscuro en el diseño

El diseño del modo oscuro puede funcionar en cualquier lugar. Desde aplicaciones para móviles hasta relojes inteligentes e interfaces de televisión, esta tendencia de diseño puede hacer avanzar su marca. Si lo haces bien, el modo oscuro puede funcionar como un éxito. Si lo haces mal, tu diseño puede desactivar a los usuarios inmediatamente. Aquí hay algunos consejos importantes para diseñar un sitio web o una interfaz de aplicación con un tema oscuro:

Cuándo usar el modo oscuro

Haz coincidir los colores de tu marca

Cuando la paleta de colores de una marca ya es compatible con el modo oscuro, los dioses del modo oscuro te sonríen.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosDiseño de la aplicación del modo oscuro por Velinsi.

Piénsalo dos veces antes de oscurecer si parece que tienes que cambiar la marca para adaptarla a la estética. Del mismo modo, si su marca necesita usar un amplio espectro de colores, considere una UI más clara. El espectro de colores completo no se lee de manera agradable en los fondos oscuros.

Destaca tu industria

La interfaz de usuario del modo oscuro también es útil para mejorar industrias específicas. Por ejemplo, las marcas que se centran en la vida nocturna y el entretenimiento son perfectas para el modo oscuro porque su contenido de alta energía suele ir acompañado de un fondo oscuro en la vida real.

Ir minimalista

Si la estética de su diseño ya es minimalista con contenido limitado, sus condiciones son buenas para el modo oscuro. En una situación en la que el texto es el contenido principal, la interfaz de usuario oscura puede hacer que la legibilidad sea un problema. Típicamente, el modo oscuro amplifica el desorden visual haciendo que una pantalla desordenada sea aún más caótica.

Generar emoción

¿Intentando crear una cierta respuesta emocional? ¿Como un aire de misterio o un poco de drama? Ya que la baja visibilidad crea curiosidad y amplifica la tensión emocional, el modo oscuro podría ser el vehículo perfecto para su marca.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosDiseño web de tema oscuro por novidraft

Símbolo de estado

Si quieres generar una sensación de estado, la interfaz de usuario en modo oscuro puede ser una herramienta efectiva. Los colores oscuros evocan emociones asociadas con el lujo y la riqueza. Si quieres llamar la atención sobre la artesanía fina, considera el modo oscuro de la interfaz de usuario.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosUn elegante, de alta gama, diseño de un sitio web de tema oscuro por Aneley.

Mejores prácticas para el diseño del modo oscuro

Hay ciertos procesos que deben funcionar correctamente al crear la interfaz de usuario en modo oscuro. Después de todo, quieres que tu producto funcione bien, ¿verdad? Marquemos todas las casillas de nuestra lista de mejores prácticas del modo oscuro:

1. No te pongas demasiado oscuro

Los editores de libros no usan papel blanco puro porque el contraste con la tinta negra es demasiado fuerte. Te hace entrecerrar los ojos y puede provocar dolores de cabeza. Lo mismo ocurre con los dispositivos digitales. Evita el negro puro. Es difícil para los ojos mirar una pantalla de alto contraste. Los buenos colores del modo oscuro son tonos de gris combinados con colores desaturados.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosUna aplicación de tema oscuro diseñada por el Neolista.

2. Tener el contraste adecuado

Los fondos de modo oscuro tienen que ser lo suficientemente oscuros para mostrar el texto en blanco. La sugerencia de Google Material Design es usar un nivel de contraste de texto a fondo de al menos 15.8:1.

3. Desaturar sus colores

Manténgase alejado de los colores totalmente saturados en los fondos oscuros. Las sombras a menudo parecen «vibrar» cuando se ven en superficies oscuras. En su lugar, use colores desaturados como los pasteles y colores apagados, tonos que tienen agregado el gris y el blanco.

Además, considere ajustar la paleta de colores de su marca. El azul de su compañía puede ser diferente en el negro que en el blanco. Los colores en el modo oscuro a menudo tienen que ser ajustados para obtener la misma respuesta que obtendrías en el modo claro.

Reproductor de videohttps://blog.99cluster.com/blog/wp-content/uploads/2020/03/themes_animation.mp400:0000:0000:00Use Teclas de flecha arriba/abajo para aumentar o disminuir el volumen.

a través de Sergey Zolotnikov

4. Usa los colores «on» correctos

¿Qué es un color «on»? Uno que aparece encima de elementos y superficies clave. Los colores «on» se usan normalmente para las letras. El color «on» predeterminado de la interfaz de usuario del modo oscuro es blanco puro (#FFFFFF). No lo uses. #FFFFFF parece vibrar cuando se mira contra fondos oscuros. Use un gris claro.

5. No te limites a invertir

Si cambias al modo oscuro desde el modo estándar, probablemente haya valiosas pistas visuales en el tema original. No inviertas simplemente los colores para obtener tu tema oscuro. Podrías estar convirtiendo colores que tenían un propósito psicológico en colores apagados sin sentido. Sé intencional en tu selección de colores.

6. Profundiza

Cuanto más alta es una capa, más ligera debería ser. Esto creará una jerarquía visual en el modo oscuro que va desde los elementos más utilizados en su pantalla hasta los menos.

Diseño del modo oscuro: consejos para crear sitios web y aplicaciones con temas oscurosLos colores más claros en la parte superior crean una jerarquía visual. A través de un texto sublime.

7. Pruebe y ofrezca libertad

Pruebe las versiones de modo oscuro y claro de su diseño. Experimenta con cada estilo y haz los ajustes apropiados basados en la retroalimentación del usuario. En última instancia, las preferencias de la gente pueden ser impredecibles, así que no encasilles a tus usuarios. Déjalos que cambien su pantalla de modo claro a modo oscuro. Esto le da a los usuarios la oportunidad de controlar su propia experiencia y les permite sentirse más como un individuo.

¡Se oscurece!

La revolución de los temas oscuros se está encendiendo. Eso significa que es el momento perfecto para ir a la oscuridad y ser creativos. ¡Prepárate para convertirte en un pionero del modo oscuro!

¿Quieres saber más sobre el diseño web? Echa un vistazo a nuestro artículo sobre cómo crear un sitio web.

¿Quieres el diseño perfecto del modo oscuro para tu marca?
Deje que nuestra comunidad de diseñadores lo cree para usted.

Se oscurece…

Comments are closed.