Esta página ha sido traducida usando inteligencia artificial y aprendizaje automático.

El modo oscuro, hasta hace poco, ha sido la reserva de desarrolladores y creativos profesionales como fotógrafos y creadores de películas.

Pero en 2019 eso cambió. Varias compañías, desde Apple hasta Google y Facebook, adoptaron la idea de que no todo debería ser blanco todo el tiempo y comenzaron a ofrecer a los usuarios la posibilidad de elegir una paleta de colores alternativa que fuera más fácil para los ojos a altas horas de la noche.

Nos complace decir que ahora puede agregar Pocket-lint a la lista de compañías que ofrecen una opción de modo oscuro cuando navega por el sitio web, y desde hoy puede leer sus noticias favoritas, reseñas, características, guías de compra y más de cualquier manera. modo o modo oscuro en nuestro sitio.

Pero, ¿por qué elegimos agregar el modo oscuro a Pocket-lint, cuáles son los beneficios y cómo puede disfrutarlo usted mismo?

¿Por qué oscurecer?

Hay una serie de ventajas en el uso del modo oscuro que va desde ser más fácil para la vista, especialmente a altas horas de la noche, hacer que las imágenes se destaquen más, mejorar la duración de la batería y, lo más importante, mejorar la accesibilidad.

Google dice que descubrió que una de las mayores ventajas del modo oscuro después de implementarlo en la última versión de Android (10) es que puede mejorar la duración de la batería.

Apple no cita las mejoras en el rendimiento de la batería, pero ya le dijo a Pocket-lint que su razón para adoptar el modo oscuro se debe a que numerosos profesionales creativos solicitan a la compañía que aproveche la experiencia para eliminar cualquier distracción.

Apple

Para Pocket-lint, la decisión de volverse "oscuro" fue una combinación de todas esas razones, pero también debido a una solicitud del equipo de que es algo que querían y estaban seguros de que nuestros lectores también querían.

Es comprensible trabajar en una variedad de entornos, desde una oficina durante el día o un avión que vuela a través del Atlántico, hasta un evento en un lugar remoto en algún lugar del mundo. Team Pocket-lint pasa una gran cantidad de tiempo no solo mirando una pantalla en un teléfono, tableta o computadora, sino también en Pocket-lint.

Se solicitó el modo oscuro y comenzó el desafío de implementarlo.

Cómo funciona

Cubriremos el proceso de diseño en un momento, pero vale la pena señalar cómo funciona y cómo puede activar el modo oscuro.

Lo que quedó claro desde el principio fue que el modo oscuro no es algo adecuado para todos los entornos y todas las aplicaciones. Por lo tanto, no es algo que deba imponerse automáticamente a los visitantes, independientemente de si lo quieren o no. Y ese es el enfoque que hemos tomado en Pocket-lint. Puede ignorar por completo el modo oscuro de Pocket-lint si lo desea y continuar usando el modo claro de manera normal. Eso fue importante.

El modo oscuro, y el modo de luz ahora correspondiente, debería ser una preferencia del usuario para disfrutar del contenido y no algo que no tiene otra opción.

A algunos les encanta la idea de fondos oscuros, texto claro y todo lo que viene con el modo oscuro, mientras que a otros les resulta demasiado polarizante y discordante en comparación con la forma en que están acostumbrados a ver sitios web.

Con eso en mente, ofrecemos el modo oscuro de tres maneras distintas:

  1. Determinado a través del sistema operativo del dispositivo
  2. Se activa a través de un interruptor de palanca en la parte superior del sitio en el masthead
  3. Controlado a través de la hora del día

El primero tiene sentido lógico. Si está ejecutando el modo oscuro en todo el sistema porque ha optado por las preferencias del sistema del dispositivo que está utilizando, lo más probable es que desee ver Pocket-lint en modo oscuro.

El segundo está diseñado para permitirle desactivar el modo oscuro si no le gusta, pero también para habilitarlo si no está ejecutando el modo oscuro a nivel del sistema.

El tercero, creemos, es tratar de comprender las necesidades del usuario sin que ellos mismos tengan que preocuparse por ello. El modo oscuro se disfruta mejor cuando está oscuro afuera, es decir, por la noche, por lo que hemos optado por encenderlo automáticamente de 10 p.m. a 7 a.m., incluso si la configuración del sistema está configurada en modo claro. Podemos hacerlo entendiendo en qué zona horaria se encuentra el usuario y configurándolo en consecuencia. Por supuesto, puede anular la configuración si lo desea a través de ese interruptor de palanca tan importante.

Diseñando para el modo oscuro

El modo oscuro no se trata solo de invertir los colores de negro a blanco y de blanco a negro.

En Pocket-lint observamos una serie de paletas de modo oscuro para analizar lo que es mejor no solo desde un punto de vista de accesibilidad, sino también desde un punto de vista de legibilidad.

La documentación en la web todavía está en pañales y aunque algunas paletas son buenas en algunos entornos, no funcionan en otros.

Vaya "completamente negro" y los artículos largos con muchas palabras se cansan de leer, mientras que elegir un gris demasiado claro significa que los efectos del modo oscuro se pierden. También debe tener en cuenta la fuente y los colores de fuente, el espaciado de fuente en términos de interletraje y guiado, así como elementos como hipervínculos, subtítulos, créditos de imagen y otros "muebles de fuente" en la página.

colorhunt

El resultado final fue elegir una paleta de colores con una fuerte influencia azul-gris y turquesa, que creemos, un modo oscuro que es accesible en varios niveles, así como pasar una serie de pruebas de accesibilidad para la usabilidad y la legibilidad.

Para comenzar usamos colorhunt.co . El sitio web fácil de usar le permite ver varias paletas de colores y cómo los colores se complementan entre sí. Es un recurso fantástico independientemente de sus necesidades de diseño en modo oscuro.

Una vez que elegimos una paleta con la que queríamos trabajar, empezamos a traducir esos colores al diseño de Pocket-lint.

Usamos el color más oscuro dentro de la paleta como fondo predeterminado con el segundo más oscuro como resaltador para ese fondo.

Verá estos colores de manera más destacada en nuestras páginas centrales recientemente diseñadas. El uso del color aquí levanta nuestro diseño de "tarjeta" de la página y mejora considerablemente la legibilidad. También utilizamos el color para las reglas horizontales alrededor del sitio para separar listas en la página de inicio, por ejemplo.

La reacción intestinal sería usar el color turquesa en la paleta para hipervínculos, sobre un fondo claro que funcione bien, sin embargo, este es uno de los errores comunes cuando se trata del modo oscuro. El texto en color sobre un fondo oscuro no funciona.

Pocket-lint

Para combatir esto, hemos cambiado el estilo de hipervínculo Pocket-lint a un subrayado grueso que resalta al pasar el mouse por encima de colorear la palabra o frase vinculada. Tomar este enfoque lo hace mucho más fácil a la vista, e incluso lo hemos adoptado en nuestro tema del modo de luz también en el futuro.

Para mejorar la legibilidad, hemos optado por colorear el texto de la página con un color blanquecino / gris claro, el color final en nuestra paleta elegida, en lugar de optar por "blanco completo". Esto crea una experiencia mucho más suave, y creemos que es mucho más fácil para la vista cuando se trata de leer.

Sí, el modo oscuro se trata de contrastes, pero no quieres que sea demasiado contrastante. El blanco y negro realmente puede ser muy duro de lado a lado.

Una vez que finalizamos el modo oscuro, pasamos a actualizar nuestro ahora nuevo modo de luz. Anteriormente, el único modo, para mantener un estilo de diseño y una ética consistentes, también tenía que cambiar para que coincidiera con el mismo enfoque y creencias.

Para Pocket-lint, eso significa un nuevo estilo de hipervínculo y un nuevo color de fuente: el color más oscuro en nuestra nueva paleta, así como algunos ajustes y cambios en otros lugares para mantener las cosas consistentes.

Accesibilidad

Si bien muchos simplemente ven el modo oscuro como algo "genial", hay una serie de razones clave por las que también es bueno en términos de accesibilidad. Era algo que queríamos asegurarnos de que fuera uno de los beneficios de implementar el modo oscuro en Pocket-lint.

Existen varias herramientas que puede usar para probar colores contrastantes. El Consorcio World Wide Web es la principal organización internacional de estándares para la World Wide Web y tiene una serie de pautas para hacer de la web un lugar más accesible.

a11y

Las Pautas de accesibilidad al contenido web (WCAG) 2.1 en particular cubren una amplia gama de recomendaciones para hacer que el contenido web sea más accesible.

Asegurarse de que los modos claro y oscuro introducidos por Pocket-lint pasaran estas pruebas era de suma importancia.

Y así, hemos trabajado con las pautas para usar colores contrastantes para que todo funcione de la mejor manera posible.

Desafíos de diseño

Una vez que habíamos elaborado una paleta de colores, traducir eso al sitio web es bastante fácil, aunque requiere mucho tiempo.

Pocket-lint ha estado funcionando durante 16 años, por lo que este fue un buen momento para ordenar y mejorar el código dentro del archivo CSS maestro. El archivo CSS es el archivo que maneja todos los estilos y diseños de los artículos y páginas en el sitio, por lo que es un gran trabajo.

A lo largo de los años, con numerosos desarrolladores agregando y cambiando el código, ha habido una tendencia a agregar estilos basados en su aspecto, incluido su color. Eso es un gran no-no cuando se trata de implementar un diseño oscuro y claro y es algo que, cuando tienes una paleta de colores positiva y negativa, debe cambiarse.

Pocket-lint

El otro desafío que tuvimos fue decidir sobre un icono unificado que se usaría en todo el sitio para representar a los lectores que podrían alternar entre el modo claro y el modo oscuro cuando lo quisieran.

Con el modo oscuro todavía en su infancia, todavía no hay un ícono unificado que se use en la web. Aquellos que han implementado un modo oscuro han optado por una variedad de diferentes iconos y palabras para simbolizar que hay una opción. Las lunas, los soles, las bombillas y las palabras se usan con poco cuidado o atención.

Después de probar y probar varios íconos diferentes con los miembros del equipo, la familia y los amigos, nos hemos decidido por un ícono de luna creciente que es sólido o vacío, dependiendo de si el modo oscuro está activado o desactivado. Creemos que esto tiene más sentido y es fácil de entender, independientemente de dónde se encuentre o qué idioma hable.

Próximos pasos

Ahora que hemos implementado el modo oscuro en Pocket-lint, planeamos continuar monitoreando cómo lo usan los lectores y si alguna de nuestras opciones de diseño causa alguna inquietud o problema cuando está disponible para un público mucho más amplio.