Un vistazo al proceso y las herramientas utilizadas para crear la experiencia de diseño de calendario con estilo de festividades.
En virtud del espíritu de diciembre y la gran cantidad de calendarios que se utilizan para las cuentas regresivas y las celebraciones, quisimos destacar el contenido web de la comunidad y del equipo de Chrome. Todos los días, destacamos una parte del desarrollo de la IU y contenido relacionado con el diseño, con un total de 31 aspectos destacados, entre los que se incluyen 26 nuevos sitios de demostración, herramientas, anuncios, podcasts, videos, artículos y casos de éxito.
Mira la experiencia completa en designcember.com.
Descripción general
Nuestro objetivo era brindar una experiencia web accesible, extravagante, moderna y responsiva en la menor cantidad de bytes posible. Queríamos destacar las nuevas APIs responsivas, como las consultas de contenedores, y también incluir un hermoso ejemplo de un modo oscuro en un sitio web centrado en el diseño y con muchos recursos. Para lograrlo, comprimimos archivos, ofrecimos varios formatos, usamos herramientas de compilación optimizadas para la generación de sitios estáticos, enviamos un nuevo polyfill y mucho más.
Comenzar con extravagancia
La idea del sitio del calendario Designcember era que funcionara como una vitrina de todo el trabajo que queríamos destacar durante todo el mes de diciembre y que, a la vez, actuara como el sitio de demostración. Decidimos construir un edificio de departamentos adaptable que pudiera volverse más alto y angosto, o más corto y más ancho, con ventanas que se reorganizaran dentro del marco. Cada ventana representa un día (y, por lo tanto, un elemento de contenido). Trabajamos con la ilustradora Alice Lee para darle vida a nuestra visión.
Alicia era inspiradora, compartía procesos y bocetos que fueron interesantes incluso en sus primeras etapas. Mientras ella trabajaba en el arte, hackeábamos la arquitectura. Los primeros debates se centraron en el diseño macro, el edificio y sus ventanas. ¿Cómo se adaptarían las ventanas a una, dos o tres columnas a medida que haya más espacio de viewport disponible? ¿Hasta dónde podrían reducirse o estirarse? ¿Cuál sería el tamaño máximo del edificio? ¿Cuánto cambiarían las ventanas?
A continuación, se muestra una vista previa de un prototipo responsivo con grid-auto-flow: dense que muestra cómo el algoritmo de cuadrícula puede colocar automáticamente las ventanas. Rápidamente nos dimos cuenta de que, si bien las cuadrículas de relación de aspecto funcionaban de forma maravillosa para mostrar el arte, no brindaban la oportunidad de que las ventanas crecieran y se reduzcan a un espacio disponible no uniforme y mostraran el poder de las consultas de contenedores.
Una vez que la cuadrícula general fuera relativamente estable y comunique una sensación de dirección para la capacidad de respuesta del edificio y sus ventanas, pudimos enfocarnos en una sola ventana. Algunas ventanas se estiraron, se encogieron, se apretaron, crecieron y se recompusieron más que otras en la cuadrícula.
Cada ventana tendría que controlar una cierta cantidad de turbulencia de cambio de tamaño. A continuación, se muestra un prototipo de una ventana que demuestra su capacidad de respuesta ante la turbulencia y cuánto podemos esperar que se ajuste cada ventana interactiva.
Animación de ventanas con hojas de objeto
Algunas ventanas tienen animaciones para brindar una interacción adicional a la experiencia. Las animaciones se dibujan a mano, marco por marco, en Photoshop. Cada fotograma se exporta, se convierte en una hoja de objeto con este generador de hojas de objeto y, luego, se optimiza con Squoosh. Luego, la animación de CSS usa background-position-x y animation-timing-function, como se muestra en el siguiente ejemplo.
.una
background: url("/day1/una_sprite.webp") 0% 0%;
background-size: 400% auto;
}
.day:is(:hover, :focus-within) .una {
animation: una-wave .5s steps(1) alternate infinite;
}
@keyframes una-wave {
0% { background-position-x: 0%; }
25% { background-position-x: 300%; }
50% { background-position-x: 200%; }
75% { background-position-x: 100%; }
}
Algunas animaciones, como la alcancía del día seis, eran animaciones de CSS basadas en pasos.
Logramos este efecto con una técnica similar, mediante steps(), con la diferencia de que los fotogramas clave eran posiciones de transformación de CSS en lugar de posiciones de fondo.
Enmascaramiento CSS
Algunas ventanas tenían formas únicas. Usamos máscaras y aspect-ratio para ayudar a crear una ventana adaptable, escalable y con una forma única.
Para crear una máscara, como esta para la ventana ocho, se necesitaban algunas habilidades clásicas de Photoshop, además de un poco de conocimiento sobre cómo funcionan las máscaras en la Web. Veamos la ventana del día ocho.
Para convertirse en una máscara, la forma del tipo trébol de cuatro hojas interno debe aislarse como su propia forma y rellenarse de color blanco. El color blanco le indica al CSS qué contenido se conserva y no lo hará todo lo que esté fuera del blanco. En Photoshop, el interior de la ventana se seleccionó, se plió 1 px (para eliminar los problemas de alias) y, luego, se rellenó de color blanco y se exportó a la misma altura y ancho que el marco de la ventana. De esta manera, el fotograma y la máscara podrían superponerse directamente uno encima del otro y mostrar el contenido interno dentro del fotograma, como se espera.
Una vez que se complete el proceso, el contenido de la ventana podría modificarse y siempre parecería permanecer dentro del marco personalizado. En la siguiente imagen, se muestra la versión de modo oscuro de la ventana, con un gradiente de fondo diferente y un filtro CSS de resplandor aplicado a la luz.
El enmascaramiento también admite ventanas responsivas basadas en consultas de contenedores. En la ventana nueve, hay un personaje que está escondido detrás de una máscara hasta que la ventana sea más angosta. Para asegurarse de que el usuario no pueda ajustar la imagen fuera de encuadre, Alicia completó el carácter por nosotros. El personaje está enmascarado dentro de la ventana, pero las plantas no, por lo que otro desafío con el que lidiamos fue superponer elementos enmascarados con capas sin enmascarar y asegurarnos de que todas escalen bien juntas.
En la siguiente imagen, se muestra cómo se ve sin la máscara en la ventana y el carácter.
Disfruta del arte
Para mantener la fidelidad de la ilustración y garantizar que las pantallas de alta definición no tuvieran una experiencia del usuario borrosa, Alicia trabajó con una proporción de píxeles de 3 veces. El plan consistía en usar imgix y entregar imágenes y formatos optimizados en su servidor, pero descubrimos que realizar ajustes manuales con la herramienta Squoosh podía ahorrarnos un 50% o más.
Las ilustraciones tienen desafíos únicos para la compresión, especialmente el trazo del pincel y el estilo de borde áspero transparente que usó Alice. Elegimos mover cada imagen en formato PNG exportada de Photoshop de 3x a una imagen PNG, WebP y AVIF más pequeñas. Cada tipo de archivo tiene sus propias capacidades de compresión especiales, y fue necesario comprimir más de 50 imágenes para encontrar algunos ajustes de optimización comunes.
La CLI de Squoosh se volvió fundamental con más de 200 imágenes para optimizar; realizar todas esas tareas de forma manual habría tardado días. Una vez que tuvimos las configuraciones de optimización comunes, las proporcionamos como instrucciones de la línea de comandos y procesamos por lotes carpetas completas de imágenes PNG en sus contrapartes comprimidas WebP y AVIF.
Este es un ejemplo del comando squoosh de la CLI de AVIF usado:
npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png
Con el material gráfico optimizado registrado en el repositorio, podemos comenzar a cargarlos desde HTML:
<picture>
<source srcset="/day1/inner-frame.avif" type="image/avif">
<source srcset="/day1/inner-frame.webp" type="image/webp">
<img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>
Era repetitivo escribir el código fuente de las imágenes, por lo que creamos un componente Astro para incorporar imágenes con una línea de código.
<Pic filename="day1/inner-frame" role="presentation" />
Usuarios de lectores de pantalla y teclado
Gran parte de la experiencia de Designcember es a través del arte y las ventanas interactivas. Para nosotros, era importante que un usuario de teclado pudiera usar el sitio y mirar las ventanas, y que los usuarios de lectores de pantalla tuvieran una experiencia narrada agradable.
Por ejemplo, cuando incorporamos las imágenes, usamos role="presentation" para marcarlas como presentación para lectores de pantalla. Consideramos que una experiencia del usuario de entre 5 y 12 descripciones de alt con fracturas no iba a ser una experiencia satisfactoria. Por lo tanto, marcamos las imágenes como presentación y proporcionamos una narración general de la ventana. Desplazarse por las ventanas en un lector de pantalla genera una agradable sensación narrativa, que esperábamos que ayudara a transmitir la extravagancia y diversión que el sitio quiere compartir.
En el siguiente video, se muestra una demostración de la experiencia del teclado. Las teclas Tab, Intro, barra espaciadora y escape se usan para organizar el enfoque hacia y desde las ventanas emergentes y las ventanas.
La experiencia del lector de pantalla tiene atributos ARIA especiales que aportan claridad al contenido. Por ejemplo, los vínculos para los días solo dicen "uno" o "dos", pero con algunos ARIA agregados, se anuncian como "Día uno" y "Día dos". Además, todas las imágenes se resumen en una sola etiqueta para que cada ventana tenga una descripción.
Astrogenerador de sitios basado en componentes, que prioriza la estática
Astro facilitó el trabajo conjunto del equipo en el sitio. El modelo de componentes era familiar tanto para los desarrolladores de Angular como para los de React, mientras que el sistema de estilo de nombre de clase con alcance ayudó a cada desarrollador a saber que su trabajo en una ventana no entraría en conflicto con nadie más.
Días como componentes
Cada día era un componente que recuperaba el estado de un almacén de datos de tiempo de compilación. Esto nos permitió ejecutar la lógica de la plantilla antes de que el HTML llegara al navegador. La lógica determinaría si el día debe mostrar su información sobre la herramienta o no, ya que los días inactivos no tienen ventanas emergentes.
Las compilaciones se ejecutan cada hora, y el almacén de datos de tiempo de compilación desbloquearía un nuevo día cuando el servidor de compilación fuera pasada la medianoche. Estos pequeños sistemas autosuficientes y con actualización automática mantienen el sitio actualizado.
Estilos con alcance y objetos abiertos
Los estilos de astroscopios escritos en el modelo de componentes facilitan la distribución de la carga de trabajo entre muchos miembros del equipo y también hacen que usar Open Props sea divertido. Los estilos de Open Props normalize.css fueron útiles con el tema adaptable (claro y oscuro), además de ayudar a derivar contenido como párrafos y encabezados.
Como usuarios pioneros de Astro, encontramos algunos inconvenientes con PostCSS. Por ejemplo, no pudimos actualizar a la versión más reciente de Astro debido a que hubo demasiados problemas de compilación. Se podría dedicar más tiempo a optimizar los flujos de trabajo de compilación y desarrollo.
Contenedores flexibles
Algunas ventanas se agrandan y se contraen, lo que mantiene la relación de aspecto para conservar su arte. Utilizamos otras ventanas para mostrar la potencia de la arquitectura basada en componentes con consultas de contenedores. Mediante las consultas de contenedores, las ventanas podían poseer su información de estilo responsivo individual y reajustarse según sus propios tamaños. Algunas ventanas iban de estrechas a anchas y necesitaban ajustar el tamaño del medio dentro de ellas, así como la ubicación de ese medio.
A medida que haya más espacio disponible para una ventana, podríamos adaptar el tamaño o los elementos secundarios de esta para que se ajusten. Resulta que, para cumplir con las ventanas adaptables, las consultas de contenedores no solo sería divertido mostrar, sino que también serían necesarias y simplificarían drásticamente la organización de ciertos diseños.
.day {
container: inline-size;
}
.day > .pane {
min-block-size: 250px;
@container (min-width: 220px) {
min-block-size: 300px;
}
@container (min-width: 260px) {
min-block-size: 310px;
}
@container (min-width: 360px) {
min-block-size: 450px;
}
}
Este enfoque es diferente a mantener una relación de aspecto. Ofrece más control y más oportunidades. Con un tamaño determinado, muchos elementos secundarios cambian para adaptarse a un nuevo diseño.
Las consultas de contenedores también nos permitieron admitir la contención en dirección de bloques (vertical), de modo que a medida que la ventana crecía, podíamos ajustar sus estilos para que se ajustaran de forma adecuada. Esto se observa en las consultas basadas en la altura, que usamos de manera independiente, y además de las consultas basadas en el ancho:
.person {
place-self: flex-end;
margin-block: 25% 50%;
margin-inline-start: -15%;
z-index: var(--layer-1);
@container (max-height: 350px) and (max-width: 425px) {
place-self: center flex-end;
inline-size: 50%;
inset-block-end: -15%;
margin-block-start: -2%;
margin-block-end: -25%;
z-index: var(--layer-2);
}
}
También usamos búsquedas de contenedores para mostrar y ocultar detalles a medida que el arte se saturaba en tamaños más pequeños y se vacíaba en tamaños más amplios. La ventana nueve es un gran ejemplo de dónde entró en juego esto:
Compatibilidad con varios navegadores
Para crear una gran experiencia moderna en varios navegadores, en especial para las APIs experimentales como las consultas de contenedores, necesitamos un excelente polyfill. Enviamos un llamado a nuestro equipo y Surma encabezó una compilación para un nuevo polyfill de consulta del contenedor. El polyfill se basa en ResizeObserver, MutationObserver y la función :is() de CSS. Por lo tanto, todos los navegadores modernos admiten polyfills, específicamente Chrome y Edgefrom 88, Firefox de la versión 78 y Safari desde la versión 14. El uso del polyfill permite cualquiera de las siguientes sintaxis:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Modo oscuro
Un último toque que fue esencial para el sitio web de Designcember fue un hermoso tema oscuro. Queríamos mostrarte cómo se puede usar el arte para ser un participante activo en la creación de una gran experiencia del modo oscuro. Para ello, ajustamos los estilos de fondo de cada ventana de manera programática y usamos todo el código CSS que tuviste sentido al crear el diseño de la ventana. La mayoría de los fondos eran gradientes de CSS, por lo que sería más fácil ajustar sus valores de color. Luego, colocamos el arte encima de ellos.
Otros huevos de Pascua
Toques personales
Agregamos algunos toques personales a la página para darle más personalidad al sitio. El primero fue el elenco de personajes, inspirados en nuestro equipo. También incluimos un cursor de estilo retro en los días inactivos y jugamos con el estilo de ícono de página.
Toques funcionales
Uno de los toques funcionales adicionales es la función de "Ir al día de hoy", con un ave que se ubica en la parte superior del edificio. Si haces clic en esta ave o presionas Intro, irás hacia abajo en la página y te dirigirás al día actual del mes para que puedas acceder rápidamente a los lanzamientos más recientes.
Designcember.com también cuenta con una hoja de estilo de impresión especial en la que básicamente entregamos una imagen específica que funciona mejor en papel de 8,5" x 11", para que puedas imprimir el calendario tú mismo y celebrar todo el año.
En conjunto, se dedicó un gran esfuerzo a crear una experiencia web moderna, divertida y extravagante para celebrar el desarrollo de IU durante todo el mes de diciembre. Esperamos que lo hayas disfrutado.
