Diseño web aplicando los modos oscuro y claro, desarrollado por Ailon Webs

El uso en las páginas web del modo oscuro o claro es ya una realidad, muchos sitios web ofrecen la posibilidad de elegir cambiar la visualización de su web con un simple clic. Vamos a contarte como hemos desarrollado y diseñado nuestra web de ailonwebs.com como caso práctico de diseño web en modo oscuro y claro.

¿Cómo funciona una web con opciones de modo oscuro y claro?

En un artículo anterior, abordamos ¿qué es el modo oscuro y el modo claro?, te invitamos a leerlo para obtener una comprensión más profunda de estos conceptos. En esta ocasión, nos centraremos en explicar cómo se implementan estas opciones en un sitio web, permitiendo a los usuarios alternar entre el modo oscuro y el modo claro según sus preferencias.

Al iniciar un proyecto web, es crucial establecer una lista de requisitos específicos para ese sitio. Esto incluye definir las metas y la funcionalidad que deseamos ofrecer, como la capacidad de cambiar entre modos de visualización. Esta funcionalidad no solo mejora la accesibilidad y la comodidad visual, sino que también refleja una consideración cuidadosa de las necesidades y preferencias de los usuarios.

Tendencias web: modo oscuro y claro para una mejor experiencia de usuario.

En Ailon Webs, nuestra prioridad es crear diseños web que ofrezcan la mejor experiencia de usuario posible. Por eso, te recomendamos implementar el modo oscuro y claro en tu sitio web. Atraerás más visitantes, aumentarás la conversión y brindarás una experiencia de navegación superior a tus usuarios.

Beneficios

Las ventajas del modo oscuro y claro podemos cuantificar los beneficios, demostrando el impacto positivo:

• Ahorro de batería: En las >pantallas de los móviles con tecnología OLED, el uso del modo oscuro, se traduce en la pantalla con muy pocos pixeles encendidos y esto ahorra energía de la batería.
  • Hay estudios en el que el modo oscuro ahorra desde el 14% hasta el 60% de la batería en función del brillo de la pantalla.
  • Otros estudios con móviles tipo Pixel 5 o Pixel 4 con pantallas OLED y el brillo al 50%, el consumo de batería promedio fue del 7 al 9% y el ahorro en el modo oscuro es notorio para contenido estático. Cuando el contenido es dinámico (elementos que cambian de posición en pantalla, etc.), la reducción de gasto de energía es todavía menor.
  • En pantallas LCD no importa si es modo oscuro o claro puesto que el consumo de energía lo determina el brillo de la pantalla.
• Reducir la fatiga visual: Con el modo oscuro en condiciones de poca luz disminuye la fatiga visual, por ello mejora el bienestar ocular en entornos de trabajo y uso prolongado, la visibilidad y la legibilidad de los textos. Cambiar de modo claro a oscuro reduce la fatiga visual.
• Reducción de la luz azul: La luz azul (del sol o de las pantallas) nos despierta y estimula, es decir, que en exceso antes de dormir puede perturbar el sueño y causar problemas en el ciclo circadiano. El modo oscuro reduce significativamente la luz azul de las pantallas por ello sería beneficiosa usarla horas antes de ir a dormir y así evitar que perturbe nuestro sueño.
• Mejora de la comprensión lectora: Esta es la ventaja más interesante del modo claro a cualquier hora, ya que las letras oscuras sobre un fondo claro facilitan la legibilidad y comprensión lectora.

Es importante mencionar que el uso de uno u otro modo puede depender del entorno en el que se usan las pantallas de los dispositivos, las interfaces de usuario (UI), entre otros factores

Pantallas de los móviles con tecnología OLED

Recordemos que un píxel es la unidad básica de una imagen digital. Cada píxel se compone de tres subpíxeles: rojo, verde y azul (RGB). Estos subpíxeles se iluminan en diferentes intensidades para producir el color que ves en la pantalla.

En las pantallas OLED cada píxel se ilumina de forma independiente y los píxeles que muestran el color negro están apagados por lo que no consumen energía. El color negro en la pantalla significa que los tres subpíxeles (rojo, verde y azul) de ese píxel en particular están completamente apagados, es decir, no están encendidos entonces no consumen energía. Esto ayuda a ahorrar energía.

1 Requisitos previos a la creación web oscura y clara

Nuestro proyecto de diseño web tiene como objetivo crear un sitio web que permita a los usuarios elegir entre la visualización en modo oscuro (dark) o en modo claro (light).

Luego, nos centramos con un enfoque de diseño web responsivo y Mobile First. Esto significa que estamos diseñando inicialmente para dispositivos móviles y después de ver cómo lo plantearemos para móviles, entonces consideramos el diseño en las pantallas más grandes.

¿Qué implica esto? Primero, debemos tener en cuenta que las pantallas móviles son pequeñas, por lo que es esencial que haya suficiente espacio para que los usuarios puedan interactuar con los elementos de las páginas con sus dedos (que es otro factor variable ya que pueden ser de diferentes tamaños). Segundo, debemos asegurarnos de no perder de vista el contenido que queremos mostrar al usuario. Tercero, optimizaremos la programación para que el sitio web cargue rápidamente y además nos enfocaremos en implementar las buenas prácticas de SEO, concretamente el SERP orgánico (Search Engine Results Page o página de resultados del buscador).

2 Diseño de la página web modo oscuro y claro.

El diseño web está intrínsecamente ligado al contenido. En el caso que estamos describiendo, se trata de una página web diseñada para presentar los servicios de nuestra agencia Ailon Webs, especializada en el diseño y programación de sitios web a medida.

Cuando los usuarios visiten la web puede suceder que sean:

• Usuarios que nos conocen: Ya sabemos que conocen los servicios y nuestra marca ' Ailon Webs'. Para ellos, es importante proporcionar opciones adicionales, como explorar otros servicios de nuestra agencia o facilitar el contacto con nosotros.
• Nuevos Usuarios: Llegan a la web por primera vez y les debemos ofrecer una respuesta clara y atractiva sobre ¿quiénes somos? y ¿qué hacemos?. Es fundamental captar su interés desde el principio.

En resumen, nuestra respuesta debe ser rápida, clara y atractiva para ambos tipos de usuarios. ¡Este es nuestro objetivo, una experiencia positiva en cualquier sitio web que desarrollamos!

Con estas ideas, vemos las necesidades que tiene el sitio web para poder organizar la información que vamos a mostrar al usuario de nuestro sitio web. La mejor forma de hacer esto es diseñar un mapa del sitio para visualizar la distribución del flujo de la información para nuestro sitio web.

Lo siguiente que tenemos que determinar son los lenguajes de programación que usaremos para el desarrollo. En este caso optamos por:

• HTML5
  Lenguaje de marcado de hipertexto, del inglés HyperText Markup Language.
• PHP
  Lenguaje de programación del lado del servidor, muy flexible y compatible con bases de datos, para el uso en desarrollo web. PHP su significado actual es Preprocesador de hipertexto del inglés Hypertext Preprocessor. Originalmente significaba Personal Home Page (Página personal).
• JavaScript
  Lenguaje de programación interpretado que se utiliza principalmente del lado del cliente
• CSS3
  Para el estilo visual de la página web usaremos el preprocesador Sass (Syntactically Awesome Stylesheets) para CSS3. CSS son las siglas de Cascading Style Sheets (Hojas de estilo en cascada).

3 Diseño Mobile First de la página web modo oscuro y claro.

Comenzamos a dibujar el boceto del diseño de la página web, primero la versión para la web en el móvil, basándonos en las características y los contenidos que pensamos son más importantes para los usuario. Y para el boceto de la versión de ordenador podemos añadir más características y contenidos si es necesario.

Hay que determinar qué es lo esencial y qué necesitan la mayoría de los usuarios que visiten nuestro sitio web.

A medida que avanzamos en la realización del boceto de las páginas web vamos añadiento los elementos que debe tener nuestra web.

Menú de navegación

Antes hemos creado el mapa del sitio, por lo que conocemos los requisitos del menú de navegación, es un punto clave para todo sitio web.

En los dispositivos móviles inicialmente se mostrará replegado como un botón menu tipo, tal como se muestra a continuación: (icono compuesto por 3 rayas horizontales).

Pensando en el cliente (en este caso nosotros ) y en los usuarios, cuando pulsen el botón del menú en el móvil, mostrará el contenido del mismo con una animación al desplegarse el menú desde la derecha. Estos son los detalles que cuando la web esté finalizada no se perciben demasiado pero crean una atmósfera de cotidiano y universal, siempre siguiendo la primera norma de usabilidad como hemos aprendido de Steve Krug, 'No me hagas pensar'. Es decir, que el usuario consiga su objetivo sin tener que pensarlo.

Un botón para cambiar de modo oscuro a modo claro y viceversa.

La web ofrecerá la posibilidad de visualizar la web en modo oscuro o modo claro con un solo clic sobre un botón que ejercerá de interruptor para cambiar de un modo a otro.

Para facilitar el cambio entre el modo claro y oscuro, hemos diseñado un botón que muestra un icono que representa el modo actual.

• Modo claro: Se representa con un icono de sol brillante .
• Modo oscuro: Se representa con un icono de luna .

Al hacer clic en el botón, se cambia el tema de forma instantánea con una suave animación.

Este botón diseñado a medida está ubicado:

• En dispositivos móviles: Dentro del menú de navegación junto a los demás enlaces.
• En pantallas grandes: En la parte superior junto al menú de navegación para una fácil accesibilidad.

Programación de la página web: Creando una experiencia fluida y adaptable

La programación web es un paso crucial en la creación de un sitio web, no solo para darle vida al diseño, sino también para garantizar que sea responsivo (que se adapte perfectamente a cualquier pantalla y dispositivo). El resultado final: una web eficiente, atractiva y accesible para todos.

Arquitectura robusta y escalable:

• Planificación meticulosa: Comenzamos con una planificación cuidadosa de la estructura del sitio utilizando HTML y agregamos PHP para las funcionalidades esenciales.
• Desarrollo ágil: Progresivamente, implementamos tanto la lógica de negocio en PHP como los scripts necesarios en JavaScript, adaptándonos a las necesidades del proyecto.
• Estilos optimizados: Empleamos el preprocesador Sass para crear estilos claros y mantenibles, utilizando variables y funciones que agilizan el proceso.

Metadatos optimizados para SEO:

• Control centralizado: Definimos variables para gestionar los metadatos de cada página, facilitando su actualización y mantenimiento.
• Eficiencia en el código: Generamos automáticamente las sentencias de código que llaman a las variables de metadatos, ahorrando tiempo y esfuerzo.
• Posicionamiento estratégico: Este trabajo "invisible" es fundamental para que tu sitio web se posicione favorablemente en los buscadores.

Experiencia de usuario fluida:

• Cambio de modo intuitivo: Implementamos la funcionalidad para cambiar entre modo claro y oscuro de forma instantánea, sin afectar la velocidad de carga.
• Adaptación automática: El cambio de modo modifica automáticamente el color de fondo, texto e imágenes, ofreciendo una experiencia coherente en todo el sitio.
• Memoria de preferencias: La web "recuerda" la preferencia del usuario, manteniendo el modo seleccionado al navegar por las diferentes páginas.

En resumen, la programación web no solo da vida a tu sitio, sino que también lo convierte en una herramienta poderosa para atraer, fidelizar y convertir visitantes.

Cómo cautivar a tu audiencia con contenido web excepcional

En el mundo digital actual, un contenido web de calidad y original es fundamental para el éxito de tu sitio. Es la clave para destacar entre la multitud y atraer a visitantes que se conviertan en clientes fieles.

Por eso, en Ailon Webs, hemos diseñado una experiencia web única que no solo te permite cambiar entre modo claro y oscuro, sino que también presenta el contenido de una manera innovadora y atractiva.

Presentamos nuestros servicios con estilo:

• Galería dinámica: Empleamos una galería de fichas (cards) que se ajustan automáticamente al tamaño de la pantalla, sin espacios vacíos.
• Diseño adaptable: En dispositivos móviles, las cards se distribuyen una debajo de la otra, mientras que en pantallas grandes se distribuyen en bloques optimizando el espacio.
• Imágenes y textos impactantes: Combinamos imágenes llamativas con textos concisos y divertidos para captar la atención del usuario.

Más allá de las cards:

• Contenido: Expande tu alcance a audiencias variadas ofreciendo en tu sitio web diferentes tipos de contenidos a través de artículos en tu blog.
• Experiencia de usuario impecable: Priorizamos la facilidad de uso y la navegación fluida para que tus visitantes disfruten de una experiencia memorable.

Un sitio web atractivo y funcional es tu mejor aliado para alcanzar tus objetivos en el mundo digital.

En Ailon Webs, te ayudamos a crear una presencia web que cautive a tu audiencia y te impulse hacia el éxito.

¡Contáctanos hoy mismo!

4 Optimización de calidad y tamaño de la web, componentes y contenido: Un enfoque integral para el SEO

Y por último, medimos y optimizamos los Web Vitals del sitio web. Estos Core Web Vitals son según Google, una guía unificada que identifican las señales de calidad que son esenciales para brindar una excelente experiencia de usuario en una página web. Esta puntuación es importante para el posicionamiento en buscadores, por ello es fundamental revisar y optimizar las webs para mejorar las Web Vitals de la página web. Si quieres saber Medición de Web Vitals de la web ¿por qué hay que medir las Core Web Vitals? puedes leer nuestro artículo que lo explica.

En el competitivo panorama digital actual, la calidad y el rendimiento de un sitio web son factores cruciales para el éxito en los motores de búsqueda. En este paso vamos a optimizar la calidad y el tamaño de la web, sus componentes y contenido, con el objetivo de mejorar el posicionamiento SEO sin perder de vista brindar una experiencia de usuario excepcional.

Contenido de calidad y estructura optimizada:

• Contenido relevante y valioso: La base del SEO es ofrecer contenido que responda a las necesidades e intereses del público objetivo de nuestra web. Investigar las palabras clave relevantes para nuestro nicho y aasegurarnos de integrarlas de manera natural en el contenido.
• Estructura clara y organizada: Un sitio web bien estructurado facilita la navegación para los usuarios y los motores de búsqueda. Emplearemos encabezados, subtítulos y también listas para organizar el contenido de manera lógica y jerárquica.
• Optimización de imágenes: Las imágenes son elementos importantes para el contenido web, pero deben optimizarse para no afectar el tiempo de carga de la página. Usaremos formatos de archivo adecuados, comprimiremos las imágenes sin sacrificar calidad y a cada una le agregaremos una descripción relevante (en su atributo alt).

Código limpio y optimizado:

• Código limpio y eficiente: Un código limpio y bien escrito mejora el rendimiento y la experiencia del usuario. Evitamos el código innecesario y optimizaremos las consultas a la base de datos.
• Implementación de palabras clave: Integramos las palabras clave relevantes en el código HTML, metaetiquetas y títulos de página de manera estratégica.
• Estructura de URL amigable: Las URL amigables con SEO facilitan la comprensión del contenido de la página para los motores de búsqueda. Utilizamos palabras clave relevantes y evitamos utilizar caracteres especiales (como acentos, ñ, etc.).

Diseño atractivo y adaptable:

• Diseño responsivo: Un sitio web responsivo se adapta a diferentes tamaños de pantalla, garantizando una experiencia óptima en dispositivos móviles.
• Paleta de colores atractiva: La elección de colores debe estar alineada con la marca y crear una experiencia visual agradable para los usuarios.
• Tipografía legible: La tipografía juega un papel importante en la legibilidad del contenido. Elija fuentes claras y fáciles de leer que se adapten al estilo general del sitio web.

Web Vitals: Optimización para la experiencia del usuario:

• Medición y análisis de Web Vitals: Los Core Web Vitals de Google miden la velocidad de carga, la interactividad y la estabilidad visual de una página web. Analizamos estos indicadores y optimizamos el sitio web para mejorar la experiencia del usuario.
• Optimización del tiempo de carga: Un tiempo de carga rápido es esencial para mantener a los usuarios comprometidos. Minimizar el tamaño de las páginas web y optimizar las imágenes.
• Mejora de la interactividad: La página web debe responder rápidamente a las interacciones del usuario. Optimizaremos el código JavaScript.
• Estabilidad visual: La página web debe verse y comportarse de manera consistente en diferentes navegadores y dispositivos. Probaremos el sitio web en diferentes plataformas y corregiremos cualquier problema de visualización.

Si quieres saber más, puedes leer nuestro artículo en el que explicamos la las métricas vitales para medir la experiencia de usuario en una página web

La optimización de la calidad y el tamaño de la web, sus componentes y contenido, es un proceso continuo que requiere atención a diversos aspectos. Al implementar las estrategias mencionadas, podrás mejorar significativamente el posicionamiento SEO de su sitio web, brindar una experiencia de usuario excepcional y alcanzar nuestros objetivos digitales.

Conclusiones del diseño web modo oscuro y modo claro

Después de escribir nuestro artículo Modo oscuro y modo claro. ¿Cuál es el mejor? y ver el interés que despertó, pensamos que sería una buena idea explicar con un caso práctico el desarrollo y diseño de una web con estas opciones. Puesto que un caso práctico creemos que es una buena manera de entender el desarrollo de una web y ¿cómo? se visualiza una página web en modo oscuro o en modo claro.

Los usuarios de la web pueden preguntarse: ¿cómo es?, ¿cómo se aplica? o ¿cómo funciona? una web con ambos modos oscuro y claro. Por ello, el poder ver y usar un diseño de página web con la posibilidad de elegir cambiar al modo oscuro o al modo claro es una buena forma de entender lo que es, ver como se aplica y probar su funcionamiento, para así elegir la opción que más nos guste como usuarios, luz del ambiente y mucho más.

En nuestro sitio web ailonwebs.com, diseñado y desarrollado completamente por Ailon Webs, puedes ver y probar este caso práctico que hemos descrito en este artículo. Puedes visualizar las páginas webs tanto en el modo oscuro como en el claro con un solo clic, sin perder nuestra identidad, objetivos o el mensaje del sitio web, con una navegación de la web escalable y fácil de visualizar.

Ailon Webs somos una agencia de diseño y programación de páginas webs con más de 26 años de experiencia en diseño y programación de sitios web. Creamos servicios para internet escalables para que la arquitectura del contenido y las páginas webs sean usables y adaptables en múltiples dispositivos, sin importar el tamaño de pantalla y al tipo de dispositivo.

Cada proyecto web es diferente y estudiaremos las mejores posibilidades para llevar adelante tu web. Consultanos tu idea sin compromiso.

Solicita presupuesto sin compromiso