BlogUI

¿Tu sitio debería usar el modo oscuro?

¿Debe su sitio usar el modo oscuro?.

Dar una puñalada en la oscuridad adquiere un nuevo significado con el auge del diseño del modo oscuro. Una de las funciones más solicitadas en los últimos años, tanto Apple como Google han hecho del tema oscuro una parte esencial de la suya. IU. Pero ¿por qué es eso? ¿Cuales son los beneficios? ¿Hay trampas? Estas son las cosas más importantes a considerar al diseñar para el modo oscuro…

¿Por qué usar el modo oscuro?

Estamos casi constantemente en nuestros teléfonos. Una persona promedio pasa más de cuatro horas al día en su dispositivo y camina la altura del Monte Everest cada año. Estas estadísticas no son especialmente impactantes, y basta un paseo por la calle principal o un viaje en transporte público para ver a casi todo el mundo con el cuello agachado, mirando fijamente sus pantallas. Usamos los teléfonos para todo, desde llamadas telefónicas hasta entretenimiento, lo que significa que los necesitamos en todo momento. Aquí es donde el modo oscuro puede ayudar… [pullquote]Una persona común… desfila la altura del Monte Everest cada año[/pullquote]

Puede reducir la fatiga ocular.

Además de dolores de garganta y calambres leves en los pulgares, estar en nuestros teléfonos con tanta frecuencia también es malo para los ojos y predice 2 en el 3 sufrirá fatiga visual por el uso excesivo del teléfono. El modo oscuro está aquí para ayudar con eso, haciendo que la pantalla sea más fácil de ver en condiciones de poca luz, como por la noche o temprano en la mañana. Puede ser mucho más fácil para los ojos, causando menos tensión y es mejor a largo plazo.

Puede ahorrar batería

Se ha descubierto que el modo oscuro mejora la duración de la batería. Según una prueba reciente realizada por TeléfonoBuffLas baterías del iPhone se pueden extender hasta 30% Esto es cierto, sin embargo, sólo si los usuarios tienen una OLED pantalla. Aquí los píxeles que son negros no consumen energía, mientras que LCD las contrapartes consumen la misma cantidad de energía independientemente del color que muestren.

Puedes jugar más con los modelos.

Al implementar el modo oscuro en un sitio, puede jugar con diferentes funciones. Se trata de mucho más que simplemente invertir el blanco en negro. Puedes jugar con los colores y el aspecto uno al lado del otro y ver cuál se ve mejor. Podría significar que también está inspirado para algunos cambios con el sitio web brillante.

Cosas para considerar

Cambiar al modo oscuro no es una solución mágica y no es adecuado para todos los proyectos. Es importante considerar cuidadosamente el uso del modo oscuro.

Enfócate en tu contenido

El modo oscuro pone más énfasis en las áreas de contenido de su interfaz, lo que permite que cierto contenido se destaque mientras que las áreas circundantes se desvanecen más en el fondo. Es importante tener esto en cuenta al diseñar para el modo oscuro y asegurarse de que el contenido que estará en primer plano tenga un fuerte enfoque.

Pruebe su diseño en modo claro y oscuro

Ya hemos establecido que no puede invertir sus colores para hacer que un sitio funcione en modo oscuro. Pero no puede olvidar probar sus sitios en ambos sentidos también; después de todo, no desea que las dos interfaces sean tan diferentes estéticamente que no pueda decir que son el mismo sitio o que los usuarios se confundan.

Desarrolla tu paleta de colores

Asegúrese de que su paleta de colores predeterminada esté definida por función y no por color; no tenga miedo de agregar nuevos colores que funcionen mejor. En el modo oscuro, trabajará con una paleta de colores que tiene colores frontales más claros y colores de fondo más oscuros. Encuentre un esquema de colores suaves que funcione bien y que no tenga demasiados colores; es mejor mantenerlo simple. Si necesita un fondo blanco, asegúrese de que sea un blanco ligeramente más oscuro y suave para evitar que el fondo brille contra el contenido oscuro que lo rodea. Las mejores prácticas recomiendan usar un nivel de contraste de GRUA 15.8.1 entre texto y fondo. [pullquote]El texto claro sobre un fondo oscuro puede aparecer más audaz… use un peso más ligero para el modo oscuro[/pullquote]

No olvides el texto

Debe asegurarse de que el texto aún sea legible si el usuario atenúa la pantalla. Después de todo, quieres que esté oscuro pero aún utilizable. Comprueba que tenga suficiente contraste y que ciertos elementos que están destinados a destacar entre sí lo estén. Asegúrese de que los colores primario y secundario estén separados entre sí y sean fáciles de separar. El texto claro sobre un fondo oscuro puede aparecer más audaz que al revés, por lo que es posible que desee utilizar un peso más ligero para el modo oscuro: experimente y vea qué se ve mejor.

Asegúrese de que los usuarios puedan cambiar entre el modo normal y oscuro

Algunas empresas han adoptado el enfoque de dejar que el sistema decida cuándo apagar y encender el tema oscuro y regular, cambiando entre los dos cuando lo considera mejor. Esto puede ser frustrante para el usuario y puede dejarlo con ganas de dejar de usar el sitio o el programa. Si bien puede estar diseñado para un uso óptimo en ciertos momentos, permita que los usuarios decidan y tengan el control. Algunos pueden preferir usar el modo oscuro o claro todo el tiempo y no querer cambiar; permite a los usuarios activar o desactivar el tema oscuro fácilmente y según sus necesidades. Haga que el cambio sea fácil de encontrar; de lo contrario, los usuarios pueden frustrarse y cerrar el sitio.

Asegúrate de tener en cuenta a tu público objetivo

Antes de saltar directamente a la reconstrucción de una interfaz en el nuevo modo oscuro, es importante considerar quiénes son los usuarios. Si se trata de una audiencia más joven y más coqueta que usa sus teléfonos más durante el día y la noche, el modo oscuro probablemente sea una buena idea, sin embargo, si son mayores y más tradicionales, probablemente preferirán más «interfaz similar al papel”. Investigue un poco y descubra quién está usando el sitio y por qué. Los modos oscuros tienden a disminuir la legibilidad, por lo que es menos probable que funcionen bien si el sitio en cuestión es un blog o noticias. Si tiene contenido simple o se enfoca mucho en imágenes o videos, el modo oscuro funciona bien – Netflix es uno de los mejores ejemplos de esto.

Errores del modo oscuro

El modo oscuro no funciona bien para todos los sitios

Si el sitio que está diseñando es muy rico en texto o datos, o contiene una amplia variedad de elementos como texto, imágenes, datos y menús desplegables, etc., diseñarlo puede ser un desafío. La razón principal de esto es tratar de mantener suficiente contraste que funcione bien para todos los elementos. En general, todos los colores (excepto los más pálidos, que son difíciles de ver) funcionan sobre un fondo blanco, mientras que un fondo oscuro reduce mucho la cantidad que puedes usar.

El modo oscuro no siempre es mejor para los ojos

Si bien puede ser mejor para aquellos que usan el modo normal en situaciones donde la luz es más suave (como al acostarse o despertarse), se ha descubierto que el modo oscuro no siempre resuelve el problema. En luz brillante, el texto puede aparecer descolorido, lo que en realidad aumenta la fatiga visual.

Es posible que el modo oscuro no se alinee con la marca existente

Debido a que necesita una paleta de colores más estrecha y muchos logotipos están diseñados con un fondo blanco en mente, es posible que el modo oscuro no se alinee con la marca existente de una empresa. Cuando la plataforma tiene muchos elementos, esto puede ser un desafío y el sitio puede parecer muy inconsistente cuando cambia de modo.

El modo oscuro duplica tu carga de trabajo

Como diseñador, ya hay mucho que hacer cuando se trata de diseñar un sitio web de la manera normal sin agregar un sitio completamente nuevo. Si bien sí, los conceptos básicos son los mismos, aún será necesario volver a trabajar y modificar para adaptarse lo suficiente al modo oscuro. Este es un segmento adicional completo en el trabajo que puede no haber sido considerado. Foto principal a través de Unsplash.

personal del DMD

DMD personal Estamos orgullosos de poder traerte este blog diario de diseño y desarrollo web. Si hay algo de lo que crees que deberíamos hablar, háznoslo saber. @DiseñadorDepot.

Publicaciones relacionadas

Deja una respuesta

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

Botón volver arriba
Cerrar