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

Dark / Light Mode

Juni 3, 2020
Posted in diseño web
Juni 3, 2020 Njla772

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

vollständiger ebook-Leitfaden für den Online-Verkauf

Kontakt aufnehmen
Mitteilungsblatt

Abonniere den Newsletter über E-Commerce und digitale Transformation

Trends, Tipps, Ebooks und mehr
rund um Ecommerce und Business Intelligence

Ausserdem schenken wir Dir das 1º Kapitel aus unserem Buch «Verbinde Dein Unternehmen. Die digitale Transformation del Vertriebskanäle»

Mitteilungsblatt
Kontakt aufnehmen
Kontakt
connect-logo-white-retinue

Produkt

Infos

Support

Verbinde Dein Unternehmen.

Branding

In HUB 360 findest Du alle Technologien und Services für Deine ECommerce-Strategie.

Ecommerce

Integriere Dein E-Commerce in ERP mit allen Online Kanälen.

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.

Projekt kofinanziert durch den Europäischen Fonds für regionale Entwicklung. Begünstigter: Conecta Software Soluciones SLU. Aktenzeichen: PI2019010001. Genehmigte Investition: 6.444,80 Startdatum: 17/10/2018. Abschluss: 16.10.2019. Ziel des vorliegenden Projekts ist die Entwicklung einer Konnektor-Software, die die Erstellung virtueller Kataloge automatisiert, so dass das Unternehmen in seinem Online-Shop Produkte mit einer umfassenden Beschreibung und mit Bildern anbieten kann, die die Benutzererfahrung reicher und vollständiger machen.

2020 ALLE RECHTE VORBEHALTEN. SOFTWARE VERBINDEN

Kontakt
Deutsch
Deutsch Español English (UK)