{ Pasión por el código }

© Blog Ailon Webs

Modo oscuro y modo claro. Diseño web desarrollado por Ailon Webs.

Por G. Lara & M. Soutto

web modo oscuro y claro
Modo oscuro y modo claro. Diseño web desarrollado por Ailon Webs.

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

¿Cómo es una web con opción para modo oscuro y claro?

Ya hemos explicado en otro artículo ¿Qué es el modo oscuro y modo claro?, te recomendamos que lo leas si te interesa este tema. Este artículo lo vamos a explicar a un usuario ¿cómo es?, ¿cómo se aplica? o ¿cómo funciona? una web modo oscuro y claro.

Cuando iniciamos un proyecto web debemos confeccionar un listado de requisitos para ese proyecto web específico. Tomando en consideración las metas y la funcionalidad que queremos ofrecer a los usuarios.

Decisiones de diseño web para un sitio web con el modo oscuro y el modo claro.

Pasos en las decisiones del diseño de la página web

  1. Programación web para un sitio web con diseño web responsive.
  2. Creación de la web con opción para elejir modo oscuro y claro.
  3. Programación web para una web móvil: Mobile Friendly y Mobile First.
  4. Optimización del SEO para la web.
  5. Core web vitals Medición de Web Vitals: LCP (Carga de la página) + FID (Interactividad) + CLS (Estabilidad visual).
  6. En función del resultado, evaluamos la necesidad o no de mejorar la puntuación de los Web Vitals del sitio web.

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

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

Teniendo en cuenta lo anterior iniciamos el diseño web responsive y Mobile First, así que vamos a comenzar el diseño pensando en el diseño del sitio web para dispositivo móvil pero también debemos pensar en dispositivos con pantallas más grandes. ¿Esto que conlleva? Pues que debemos pensar primero que son pantallas pequeñas y por ello es necesario que haya espacio suficiente para que podamos utilizar nuestros dedos (también de distintos tamaños), segundo no perder de vista el contenido que queremos mostrar al usuario, tercero que la programación sea la óptima para que el sitio web sea rápido cargando y cuarto que tenga un buen SEO desde el principio.

Además la web tiene como requisito que sea en dos idiomas inglés y español, y para que sea más cómodo para el usuario de la web le implementaremos la programación necesaria para detectar el idioma del dispositivo con el que el usuario accede y así en menos clics puede ver la web en su idioma.

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

Todo diseño web esta determinado por el contenido, en el caso que estamos describiendo Natural APPS, se trata de una web para dar a conocer las apps para dispositivos Android que desarrollan y diseñan.

Pensando en los usuarios que visiten la web, puede suceder que:

  • Los usuarios ya conocen las apps o la marca Natural APPS, en dicho caso es posible que busque otra app de los mismos desarrolladores, o busca contactar, o quiere saber quienes son.
  • Por el contrario habrá otros usuarios que lleguen a la web y no los conocen, pero quieren saber quiénes son y qué hacen, porque quizá les interesa alguna app.

A ambos tipos de usuarios tenemos que darle una respuesta clara y rápida de lo que buscan, pero también atractiva porque sino es así terminarán abandonando la web.

Tenemos presente que la finalidad de la web es:

  • Dar a conocer quienes son y lo que hacen.
  • Explicar las características destacadas de las aplicaciones desarrolladas.
  • Indicar como descargar o comprar una app a los usuarios.

Con estas ideas, ya vamos viendo las necesidades que tiene el sitio web para poder organizar la información que vamos a mostrar al visitante a nuestra página web. Diseñamos un mapa del sitio para visualizar la distribución del flujo de la información para este sitio web.

Como lenguajes de programación usaremos para el desarrollo:

  • 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 o JS, es un 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).

Los diseños de páginas web que emplean el modo oscuro y claro en los últimos años se han popularizado quizá más para que el usuario tenga una experiencia distinta a la tónica clásica del blanco más tradicional de los últimos años.

web modo oscuro y claro
Modo oscuro y modo claro. Diseño web desarrollado por Ailon Webs.

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

Con el mapa del sitio que hemos creado antes, por lo que conocemos los requisitos del menú de navegación punto clave para todo sitio web y podemos comenzar el boceto del diseño de las páginas web.

Diseñamos primero la versión de web móvil, nos basaremos en las características y los contenidos que pensamos son más importantes para los usuarios, para ello tenemos que determinar lo esencial y lo qué necesitan la mayoría de los usuarios. Para el ordenador podemos añadir más características y contenidos si es necesario.

Menú de navegación:

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 que son desarrolladores para Android y sus usuarios, cuando pulsen el botón del menú en el móvil, mostrará el contenido del mismo con una animación al desplegarse, así mostrará el menú desplegado para que aparezca de izquierda a derecha como las aplicaciones más conocidas de Android que usamos cotidianamente. 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 según hemos aprendido de Steve Krug, 'No me hagas pensar', que el usuario consiga su objetivo sin tener que pensarlo. Si esta usabilidad funciona en el diseño de las apps, entonces hay que implementarla en el desarrollo web.

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

La web va ha ofrecer la modalidad para visualizar la web en modo oscuro o modo claro, en consecuencia, cuando el usuario haga clic en dicho botón cambia el tema o modo con un solo clic. Este botón específico para dicha funcionalidad con diseño a medida lo colocaremos en el móvil dentro del menú de navegación con el resto de enlaces de la web y en pantallas grandes como un ordenador de sobremesa con el menú de navegación arriba en lugar visible.

Programación de la página web

Este es otro de los pasos importantes en el proceso de creación de un sitio web e imprescindible para que el diseño de la página web sea responsive (el contenido y la presentación se adaptan al tamaño de pantalla y al tipo de dispositivo). Como resultado obtendremos una web eficiente y bonita.

Planificamos los archivos con lenguaje HTML y añadimos PHP para dotarlo de las funcionalidades requeridas. A medida que lo requiere el trabajo iremos programando los scripts necesarios en lenguaje JavaScript. El estilo de las páginas web lo implementamos con el preprocesador Sass que nos permite clarificar y simplificar el código del estilo, creando variables y funciones que agilizan nuestro trabajo.

Diseñamos las variables para controlar los metas de las páginas, creamos las sentencias de código apropiadas y comunes para ambos idiomas para que llamen a las variables que hemos definido para cada página de la web. Así ahorramos tiempo y esfuerzo a la hora de añadir los metas de la página. Esta es la parte invisible pero que luego será importante para posicionar nuestra página web en los principales buscadores.

Realizamos la programación necesaria para que cuando el usuario cambie de modo claro a modo o oscuro o viceversa, cambie el color del fondo de la página web, el texto y las imágenes, adecuando el contenido al modo seleccionado. Este cambio debe ser instantáneo, transparente, fluido y sin retrasos en la carga. Y por supuesto la página web debe 'recordar' la preferencia de modo del usuario para que al cambiar de página siga en el modo deseado.

¿Cómo mejoramos el contenido de la web?

El contenido web debe ser de calidad y original que nos haga destacar es fundamental para que se posicione dicha web.

Por esta razón, en este diseño web desarrollado por Ailon Webs para una web modo oscuro y claro del que estamos escribiendo, además de poder cambiar el modo o tema de la página web, queremos mostrar el contenido en las páginas web que describen las apps o aplicaciones desarrolladas por Natural APPS, con imágenes y textos de uma forma divertida usando una galería de fichas (cards) que no deje espacios entre ellas pero se acoplen según sus dimensiones (distribución tipo Masonry).

En el móvil las tarjetas de información se distribuyen una detrás de otra, con diferente altura, y en pantallas grandes de ordenador, podrá apreciarse la distribución de la información sobre la app en la que las tarjetas se muestra en bloques que se apilan y acomodan en función de su tamaño para así consigue llenar el espacio de la pantalla, de tal forma que no quedan huecos entre las tarjetas.

Hay muchas más ideas que se pueden tener en cuenta cuando añadimos contenido, por ejemplo el que tu sitio web tenga más idiomas para llegar a un mayor porcentaje de visitantes en internet. Lo mejor es que tus visitantes te encuentren en internet, tengan una buena experiencia de usuario y quizá así compartan tu página web por sus redes sociales.

4 Optimización de calidad y tamaño de la web, componentes y contenido.

Como ya todos sabemos la clave del posicionamiento web en buscadores es el contenido de calidad y bien estructurado. Y ese contenido debe visualizarse y organizarse de una manera específica para conseguir un buen SEO para el sitio web. Debemos conseguir que cada página de la web tenga su frase clave e imágenes relacionadas que formen parte del contenido de las páginas web de manera óptima para que el buscador las encuentre.

Es decir, en esta fase necesitamos un código limpio de programación, con las frases claves y sus imágenes optimizadas integradas en un contenido web de calidad pero también atrayente, imaginativo y fácil de entender.

Por ello es fundamental comenzar con un buen boceto para móvil y ordenador, con la paleta de colores definida, las fuentes para el texto y mucho más componentes y elementos que nos ayudarán a desarrollar por buen camino nuestro proyecto web.

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.

web modo oscuro y claro
Proceso para el desarrollo y diseño de la página web modo oscuro y claro, por Ailon Webs.

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.

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

Ailon Webs somos una empresa diseño de páginas web profesional, hemos creado muchos sitios web con diseño web responsive a lo largo de estos años, creamos servicios para internet escalables para que la arquitectura del contenido y la presentación se adapten al tamaño de pantalla y al tipo de dispositivo.

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

Solicita presupuesto sin compromiso

Recibe nuestras promociones

Por favor escriba un email válido
No ha leído y aceptado el aviso de protección de datos

Categorías: Diseño de páginas web

Etiquetas: modo claro modo oscuro, diseño web, UX, UI