• 0
      1. Tu carrito está vacío.
    • artículo(s)0,00

Dark / Light Mode

junio 3, 2020
Publicado en diseño web
junio 3, 2020 Conecta Software

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.

25 años de diseño web

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. 

Descarga gratis el ebook Guía práctica para vender online

ebook guia completa para vender online

Get in Touch
newsletter

Suscríbete al newsletter sobre ecommerce y transformación digital

Tendencias, consejos
y lo último en tecnologías
para vender online.

Además, te regalamos el primer capítulo del libro
“Conecta tu negocio. La transformación digital de los canales de venta”

newsletter
Get in Touch
Contact
conecta-logo-blanco-retina

Producto

Info

Soporte

Conecta tu Negocio.

Branding

En HUB 360 encontrarás toda la tecnología y servicios para tu estrategia de comercio electrónico.

Plan de Marketing Completo

Ecommerce

Integra tu ecommerce con tu ERP sistema de gestión y todos tus canales para vender online.

Tienda Online, ecommerce sobre Prestashop con integración ERP y movilidad para comerciales

Analytics

Los cuadros de mando de BI Studio son tu herramienta de Business Intelligence de última generación.

BI Studio | Business Intelligence

922-014-341

Proyecto Cofinanciado por el Fondo Europeo de Desarrollo Regional. Beneficiario: Conecta Software Soluciones SLU. Nº expediente: EATIC2019010001. Inversión Aprobada: 173.800,00 €. Comienzo: 01/04/2019. Finalización: 30/09/2020. El presente proyecto tiene como objetivo el desarrollo de una capa de usuario multilingüe y dashboards para entornos web y windows de solución de Business Intelligence.

Proyecto Cofinanciado por el Fondo Europeo de Desarrollo Regional. Beneficiario: Conecta Software Soluciones SLU. Nº expediente: PI2019010001. Inversión Aprobada: 6.444,80 €. Comienzo: 17/10/2018. Finalización: 16/10/2019. El presente proyecto tiene como objetivo el desarrollo de un software conector que automatiza la generación de catálogos virtuales para que la empresa pueda ofrecer en su Tienda online productos con una amplia descripción y con imágenes que hagan la experiencia del usuario más rica y completa.

© 2020 TODOS LOS DERECHOS RESERVADOS. CONECTA SOFTWARE

Contact
Español