[vc_row][vc_column][vc_column_text]Desde la primera pagina web en 1990, el diseño web ha innovado continuamente, incluyendo cada vez mas funcionalidades y mejoras en la interacción con el usuario, atendiendo tanto a estructura como apariencia.
Aquella primera pagina era un texto negro sobre fondo blanco. Ahora, el Big Tech se ha sumado a una nueva tendencia. En cada vez más Apps e Interfaces podemos elegir entre un modo claro y un modo oscuro. Y con estos componentes, podemos desarrollar nuestras propias interfaces, permitiendo a nuestros usuarios elegir el modo que mas les conviene en cada momento.
Dark / Light Mode, ¿qué es?
Dark / Light mode, en español modo oscuro / claro, es un concepto que hace referencia a una de las últimas tendencias en lo que respecta a los sistemas operativos y dispositivos móviles. Consiste en seleccionar (por parte del usuario) el tipo de modo por defecto que tendrá el fondo de las aplicaciones.
El tipo de modo puede ser dark (traducido como oscuro) o light (traducido como claro) siendo el modo light el que ha venido predefinido como formato estándar tanto en los sistemas operativos, los sitios webs y en las aplicaciones móviles durante todos estos años.
Características de ambos modos
Tanto el modo claro como el modo oscuro presentan características propias. En lo que respecta al modo claro, éste se impuso de manera arrolladora en el momento en el que las empresas de desarrollo de software comenzaron a desarrollar interfaces gráficas. Además, al modo claro siempre le han acompañado letras negras.
El modo oscuro, que está disponible en macOS Mojave o versiones posteriores, ofrece un nuevo y espectacular aspecto que resulta menos agresivo para la vista y te ayuda a concentrarte en el trabajo
Apple
A finales del 2019, empresas como Google, Facebook o Apple, comenzaban a incluir el modo oscuro en sus aplicaciones. Este modo, al contrario que el modo claro, ofrece el fondo negro y las letras blancas lo cual, ofrece grandes ventajas a los usuarios. El modo oscuro ofrece una menor demanda de consumo energético por parte de las pantallas, (según Google, la reducción se encuentra entre un 14% y un 60%), lo que se traduce en ahorro de batería (sobre todo en las pantallas OLED, ya que son capaces de iluminar cada píxel de manera independiente) y por consiguiente, un buen efecto colateral en lo que respecta a la salud de los usuarios, ya que reduce la fatiga visual.
Aplicaciones que implementan el modo oscuro
A continuación, se muestra un listado de aplicaciones que a día de hoy ofrecen la posibilidad de elegir el modo oscuro a sus usuarios:
- WhatsApp.
- Instagram.
- Facebook y Facebook Messenger.
- Telegram.
- Gmail.
- Pinterest.
- Skype.
- YouTube.
- Google Maps.
- Twitter.
Normas y especificaciones de Google en relación con el modo oscuro
Según las normas y especificaciones de Google, la mayoría de interfaces de usuario que vayan a ser desarrolladas haciendo uso del modo oscuro, deben hacer uso de tonos negros degradados con grises, colores acentuados que destaquen, ahorro de energía, y la mejora de la accesibilidad.
Para lograr estos objetivos, se deben tener en cuenta las propiedades de contraste, profundidad, la desaturación del color y la limitación de colores. Cabe destacar que Google tiene en cuenta las normas y pautas que define la WCAG, es decir, las directrices de accesibilidad web que han sido publicadas por la Iniciativa de Accesibilidad Web.
En cuanto al contraste, los fondos oscuros requieren el uso de tipografías blancas ya que contrastan correctamente. Además, para que la aplicación cumpla con las normas y requisitos de la WCAG, concretamente la normativa AA, el nivel de contraste debe encontrarse al menos a 15.8: 1 entre el texto y el fondo.
En cuanto a la profundidad, el modo oscuro hace uso de un gris oscuro y no del negro directamente, que será el tono de la superficie de los elementos, ofreciendo la posibilidad de visualizar elementos de manera que parezca que se encuentran flotando.
En cuanto a la limitación de colores, se deben utilizar colores desaturados, evitando en la medida de lo posible los colores saturados ya que éstos últimos, cuando hay una superficie oscura, no pasarán el estándar de accesibilidad de 4.5: 1, provocando fatiga visual. Google, dentro de su paleta de colores, ofrece diferentes tonalidades de un mismo color enumerándolas a través de rangos. Los rangos recomendados fluyen entre el 50 y el 200.
En cuanto al mantenimiento de la identidad de la marca, se recomienda hacer uso del color primario saturado en uno o dos elementos, pudiendo verse reflejado en ciertos elementos como los botones. Junto con esta norma, se debe implementar el resto de la interfaz con el mismo color primario pero en el tono 200. [/vc_column_text][/vc_column][/vc_row][ut_content_block id=»17679″][/ut_content_block]
