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

Dark / Light Mode

June 3, 2020
Posted in diseño web
June 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 years of web design

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 and the 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. 

Download the free ebook Practical Guide to Selling Online

complete ebook guide for selling online

Get in Touch
newsletter

Subscribe to the newsletter on ecommerce and digital transformation

Trends, guides
and latest news in ecommerce
technologies.

And receive the first chapter of our book
«Connect your business- The digital transformation of sales»

newsletter
Get in Touch
Contact
connect-logo-white-retinue

Product

Info

Support

Connect your business.

Branding

In HUB 360 you will find all the technology and services for your e-commerce strategy.

Ecommerce

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

Analytics

BI Studio dashboards are your next generation business intelligence tool.

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.

Project co-financed by the European Regional Development Fund. Beneficiary: Conecta Software Soluciones SLU. File number: PI2019010001. Approved Investment: 6,444.80 Start date: 17/10/2018. Completion: 16/10/2019. The present project aims at developing a connector software that automates the generation of virtual catalogues so that the company can offer in its Online Store products with a wide description and with images that make the user experience richer and more complete.

2020 ALL RIGHTS RESERVED. CONNECT SOFTWARE

Contact
English (UK)
English (UK) Español Deutsch