Cómo hacer bien el diseño del modo oscuro

Los temas oscuros son En todas partes estos días.

A medida que los seres humanos continúan pasando más tiempo interactuando con la tecnología, los temas oscuros brindan una forma más relajante de interactuar con el mundo digital. La mayoría de las veces, estos temas son más agradables a la vista, más atractivos, y perfecto para el usuario dedicado.

A lo largo de 2020, innumerables marcas líderes han presentado su propia versión del tema oscuro. Google tiene una solución para tu Drive, mientras que Apple y Android han incorporado el rendimiento del tema oscuro directamente en sus sistemas operativos.

Si aún no ha aprendido a aprovechar al máximo el modo oscuro, podría estar perdiendo una excelente oportunidad para diferenciar sus habilidades de diseño y ganar más clientes en el futuro.

¿Por qué el modo oscuro?

Antes de profundizar demasiado en las posibilidades de crear su propio tema oscuro, examinemos qué es el modo oscuro y por qué es tan efectivo.

En última instancia, los temas oscuros se crean para reducir la cantidad de luminancia emitida por todo, desde su computadora de escritorio y computadora portátil, hasta su teléfono inteligente y reloj inteligente. Los temas oscuros ayudan a mejorar la ergonomía visual de diseño, reduciendo la fatiga visual, ajustando el brillo para adaptarse a las condiciones de iluminación actuales y más. Además, muchas ofertas de modo oscuro también son fantásticas para conservar la duración de la batería.

Estos son algunos de los principales beneficios de agregar temas oscuros a su portafolio de diseño.

• Mejor experiencia de usuario: Centrarse en la experiencia del usuario es una de las tendencias más importantes de la era digital. Debe estar dispuesto a brindar experiencias increíbles a todos los que visitan su sitio web si desea destacarse hoy. El modo oscuro reduce todo, desde la fatiga visual hasta el consumo de energía de la batería. Esto ayuda a mantener a los clientes en un sitio web durante más tiempo.
• Innovación y atractivo de vanguardia: La mayoría de las empresas quieren demostrar que pueden mantenerse a la vanguardia de su industria. La capacidad de ofrecer una versión opcional en modo oscuro de un tema o apariencia de un sitio web puede ayudar a sus clientes a destacarse entre la multitud. A medida que el entorno se centre más en los dispositivos móviles, más empresas buscarán diseñadores que puedan proporcionar las mejores experiencias móviles.
• Soporte para diseño universal: El modo oscuro no solo es ideal para personas que tienen sensibilidad a la luz por la noche. Esta solución podría ser más cómoda para los usuarios con discapacidad visual que, de lo contrario, tendrían problemas con la fatiga visual al visitar sus sitios web. Si quieres que tu contenido sea más inclusivo para una gama más amplia de espectadores, entonces aprender a diseñar para el modo oscuro es una buena forma de empezar.

Prácticas recomendadas al diseñar para el modo oscuro

Diseñar para el modo oscuro es más fácil de lo que piensas. La mayoría de las veces, implica simplemente pensar en cómo puede reemplazar algunos de los aspectos más brillantes y abrumadores de su sitio por algo más profundo y oscuro.

A continuación, se ofrecen algunos consejos útiles que le ayudarán a avanzar en la dirección correcta.

1. Experimente con colores

Un gran problema para muchos diseñadores web cuando se trata de desarrollar una solución de modo oscuro es que se quedan demasiado atrapados con cosas como texto blanco puro contra fondos negros puros. Sin embargo, esta opción de alto contraste puede demorarse un poco después de un tiempo.

A menudo, es mucho más fácil utilizar un gris oscuro como color de superficie principal, en lugar de un negro verdadero. Además, en lugar de usar un blanco brillante, piense en alternativas ligeramente blanquecinas que serán más cálidas a la vista.

Experimente con superficies y combinaciones de colores que probablemente no causen demasiada fatiga visual. Las bases de color gris oscuro a menudo también ofrecen una gama más amplia de profundidad, porque puede mostrar sombras en gris.

Además, cuando experimente con colores, recuerde que los colores saturados a menudo vibran dolorosamente contra superficies muy oscuras, lo que las hace más difíciles de leer. Desaturar sus colores ayudará a reducir el contraste y hará que sus sitios web sean más acogedores.

Los tonos más claros en el rango 200-50 tendrán una mejor legibilidad en temas oscuros. Sin embargo, siempre puedes experimentar con tus elecciones. Google Material Design recomienda utilizar un nivel de contraste de alrededor de 15: 8: 1 entre el fondo y el texto.

2. Considere el impacto emocional

Gran parte del esfuerzo que implica el diseño en modo oscuro consiste en averiguar cómo funcionan juntos ciertos colores. Es fácil dejarse llevar por los contrastes marcados, especialmente cuando está acostumbrado a trabajar con un fondo blanco. Sin embargo, debe recordar que está diseñando para un usuario que busca principalmente una experiencia de navegación más sencilla y moderada.

Mientras trabaja, recuerde considerar también el aspecto emocional del diseño. La emoción en los colores puede hacer o deshacer el viaje de un comprador en cualquier entorno. Sin embargo, un aspecto de la psicología del color que a menudo se pasa por alto es que las personas perciben los tonos de manera diferente cuando están sobre un fondo negro.

Por ejemplo, piense en el color verde. Sobre un fondo claro, transmite naturaleza e incluso riqueza financiera. Sin embargo, sobre un fondo oscuro, el mismo verde podría parecer algo venenoso, tóxico o incluso enfermizo. Es importante pensar en el tipo de impresiones que obtendrán los usuarios finales cuando lleguen a su sitio.

3. Brinde a los usuarios la libertad de elegir

Uno de los errores más grandes que puede cometer cuando comienza a diseñar para el modo oscuro es pensar que debe concentrarse por completo en sus temas oscuros y nada más. Esto lo enfrenta a un problema si interactúa con usuarios que desean lo mejor de ambos mundos. Si está diseñando para aplicaciones en particular, necesitará páginas web que puedan cambiar naturalmente entre temas claros y oscuros.

Aprender a implementar tanto un modo oscuro como una opción de modo claro en los escritorios que cree le ayudará a llegar a una selección más amplia de clientes. Recuerde, deberá probar el rendimiento y el impacto de sus diseños en ambos temas para comprobar que ofrecen el mismo tipo de experiencia, sin importar cómo elija navegar su usuario.

Aunque el modo oscuro debería ofrecer una experiencia diferente a los usuarios finales, aún debe sentirse como si estuvieran navegando en el mismo sitio web. Eso significa que necesitará experimentar con la combinación más natural de opciones de modo claro y oscuro.

4. Recuerde los conceptos básicos

Recuerde, aunque los tres consejos anteriores lo ayudarán a seguir el camino correcto para el diseño del modo oscuro, también deberá considerar las oportunidades y limitaciones de las plataformas para las que está diseñando. El tipo de experiencia en modo oscuro que puede ofrecer para los sitios web de Google Chrome será muy diferente a la que puede crear para algo que se ejecuta en iOS.

Examinar la documentación proporcionada por el sistema para el que está diseñando le ayudará a desarrollar algo con una visión detallada de lo que realmente es posible.

Otros consejos importantes para el diseño del modo oscuro incluyen:

• Concéntrese en su contenido: asegúrese de que su contenido se destaque en la página, sin ser demasiado abrumador.
• Pruebe su diseño: tanto en apariencia clara como oscura, debe asegurarse de que todo funcione como debería.
• Adopte la vitalidad para sus interfaces: la vitalidad ayuda a mejorar el contraste entre el fondo y el primer plano.
• Utilice colores semánticos: los colores semánticos se adaptan automáticamente a la apariencia actual de un sitio web. Los valores de color codificados de forma rígida que no se adaptan pueden parecer más agresivos.
• Tinte de escritorio: intente experimentar con cosas como transparencias y filtros para darle a sus sitios web y aplicaciones un tinte ligeramente más cálido, ideal para navegar a altas horas de la noche
• Iconos: utilice glifos e iconos individuales para los modos oscuro y claro si es necesario.

¿Listo para diseñar para el modo oscuro?

Preparar su portafolio de desarrollo y diseño web para una era adicta al modo oscuro puede ser una experiencia compleja. Debe pensar detenidamente cómo las personas van a navegar por sus sitios web y aplicaciones cuando buscan algo más sutil y menos abrumador visualmente que los sitios web que estamos acostumbrados a hacer.

Lo más importante que debe recordar es que todo en su sitio web o aplicación debe verse tan bien hecho a medida en el modo oscuro como en el modo claro. No basta con añadir un fondo negro dinámico cuando las personas quieran cambiar la configuración de una aplicación. Debe profundizar en sus diseños y examinar cómo funcionan juntas las diferentes fuentes, colores e imágenes.