Un vistazo al proceso y las herramientas que se usaron para crear la experiencia de Designcember al estilo de un calendario de Adviento.
En el espíritu de diciembre y los muchos calendarios que la gente usa para hacer la cuenta regresiva y celebrar, queríamos destacar el contenido web de la comunidad y el equipo de Chrome. Todos los días, destacamos un contenido relacionado con el desarrollo y el diseño de la IU, lo que sumó 31 destacados, entre los que se incluyeron 26 sitios de demostración, herramientas, anuncios, podcasts, videos, artículos y estudios de caso nuevos.
Consulta la experiencia completa en designcember.web.app.
Descripción general
Nuestro objetivo era ofrecer una experiencia web accesible, caprichosa, moderna y responsiva con la menor cantidad de bytes posible. Queríamos destacar las nuevas APIs responsivas, como las consultas de contenedores, y mostrar un ejemplo atractivo del 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, lanzamos un nuevo polyfill y mucho más.
Comienza con un toque de fantasía
La idea del sitio del calendario de Designcember era que funcionara como una presentación de todo el trabajo que queríamos destacar durante el mes de diciembre y, al mismo tiempo, como un sitio de demostración. Decidimos construir un edificio de apartamentos adaptable que pudiera ser más alto y estrecho, o más bajo y ancho, con ventanas que se reorganizaran dentro del marco. Cada ventana representaba un día (y, por lo tanto, una pieza de contenido). Trabajamos con la ilustradora Alice Lee para hacer realidad nuestra visión.
Alice fue inspiradora y compartió procesos y bocetos que resultaron emocionantes incluso en sus conceptos iniciales. Mientras ella trabajaba en el arte, nosotros hackeábamos la arquitectura. Las primeras conversaciones se centraron en el diseño general, el edificio y sus ventanas. ¿Cómo se adaptarían las ventanas a una, dos o tres columnas a medida que hubiera más espacio disponible en la ventana gráfica? ¿Cuánto podrían encogerse o estirarse? ¿Cuál sería el tamaño máximo del edificio? ¿Cuánto se desplazarí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 podría colocar automáticamente las ventanas. Rápidamente nos dimos cuenta de que, si bien las cuadrículas de relación de aspecto funcionaban muy bien para mostrar el arte, no brindaban la oportunidad de permitir que las ventanas crecieran y se encogieran en el espacio disponible no uniforme, ni de mostrar el poder de las consultas de contenedores.
Una vez que la cuadrícula general fue relativamente estable y comunicó 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, encogieron, comprimieron, agrandaron y recompusieron más que otras en la cuadrícula.
Cada ventana debería 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 a las turbulencias, lo que indica cuánto podríamos esperar que se ajuste cada ventana interactiva.
Animación de ventanas con hojas de sprites
Algunas ventanas tienen animaciones para brindar una interacción adicional a la experiencia. Las animaciones se dibujan a mano, fotograma por fotograma, en Photoshop. Cada fotograma se exporta, se convierte en una hoja de sprites con este generador de hojas de sprites y, luego, se optimiza con Squoosh. Luego, la animación 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 sexto día, eran animaciones CSS basadas en pasos.
Logramos este efecto con una técnica similar, usando steps(), con la diferencia de que los fotogramas clave eran posiciones de transformación de CSS en lugar de posiciones de fondo.
Enmascaramiento de 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 necesitaron 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 máscara, la forma interior de trébol de cuatro hojas debe aislarse como su propia forma y rellenarse con el color blanco. El blanco le indica al CSS qué contenido permanece, y todo lo que esté fuera del blanco no permanecerá. En Photoshop, se seleccionó el interior de la ventana, se aplicó un desvanecimiento de 1 px (para quitar los problemas de alias) y, luego, se rellenó de blanco y se exportó con la misma altura y ancho que el marco de la ventana. De esta manera, el marco y la máscara se pueden superponer directamente, lo que muestra el contenido interior dentro del marco según lo esperado.
Una vez completado, se podría modificar el contenido de la ventana y siempre parecería que permanece dentro del marco personalizado. En la siguiente imagen, se muestra la versión en 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 basadas en consultas de contenedores responsivas. En la ventana nueve, hay un personaje que se oculta detrás de una máscara hasta que la ventana tiene un tamaño más estrecho. Para asegurarnos de que el usuario no pueda ajustar la imagen fuera del encuadre, Alice completó el personaje completo por nosotros. El personaje está enmascarado dentro de la ventana, pero las plantas no, por lo que otro desafío que enfrentamos fue superponer elementos enmascarados con capas sin enmascarar y asegurarnos de que todos se escalaran bien juntos.
En la siguiente imagen, se muestra cómo se ve sin la máscara en la ventana y el personaje.
Cómo aplastar el 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, Alice trabajó con una proporción de píxeles de 3x. El plan era usar imgix y publicar imágenes y formatos optimizados en su servidor, pero descubrimos que los ajustes manuales con la herramienta Squoosh podían ahorrarnos un 50% o más.
La ilustración presenta desafíos únicos para la compresión, en especial el estilo de pincelada y borde áspero transparente que usó Alice. Elegimos Squoosh para comprimir cada imagen png exportada de Photoshop en 3x a un formato png, webp y avif más pequeño. Cada tipo de archivo tiene sus propias capacidades de compresión especiales, y se necesitaron más de 50 imágenes comprimidas para encontrar algunos parámetros de configuración de optimización comunes.
La CLI de Squoosh se volvió fundamental, ya que había más de 200 imágenes para optimizar, y hacer todo eso de forma manual habría llevado días. Una vez que tuvimos la configuración de optimización común, la proporcionamos como instrucciones de línea de comandos y procesamos por lotes carpetas completas de imágenes PNG en sus equivalentes comprimidas de WebP y AVIF.
Este es un ejemplo del comando squoosh de la CLI de AVIF que se usó:
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 diseño optimizado registrado en el repo, podríamos comenzar a cargarlo 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>
Escribir el código fuente de las imágenes era repetitivo, por lo que creamos un componente de Astro para incorporar imágenes con una sola línea de código.
<Pic filename="day1/inner-frame" role="presentation" />
Usuarios de lectores de pantalla y teclados
Gran parte de la experiencia de Designcember se basa en el arte y las ventanas interactivas. Para nosotros, era importante que los usuarios de teclado pudieran usar el sitio y echar un vistazo a las ventanas, y que los usuarios de lectores de pantalla tuvieran una buena experiencia narrada.
Por ejemplo, cuando incorporamos las imágenes, usamos role="presentation" para marcar la imagen como de presentación para los lectores de pantalla. Creemos que una experiencia del usuario de entre 5 y 12 descripciones alt fracturadas sería deficiente. Por lo tanto, marcamos las imágenes como de presentación y proporcionamos una narración general de la ventana. Desplazarse por las ventanas en un lector de pantalla tiene una sensación narrativa agradable, que esperamos que ayude a transmitir la fantasía y la 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 coordinar 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 algo de ARIA adicional, 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.
Astro, un generador de sitios estáticos y basado en componentes
Astro facilitó el trabajo en equipo en el sitio. El modelo de componentes era familiar para los desarrolladores de Angular y React, mientras que el sistema de estilos de nombres de clase con alcance ayudaba a cada desarrollador a saber que su trabajo en una ventana no entraría en conflicto con el de 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 código HTML llegara al navegador. La lógica determinaría si el día debe mostrar su información sobre herramientas 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 pasara la medianoche. Estos pequeños sistemas autosuficientes y de actualización automática mantienen el sitio actualizado.
Diseños con alcance y Open Props
Astro define el alcance de los estilos escritos dentro de su modelo de componentes, lo que facilitó la distribución de la carga de trabajo entre muchos miembros del equipo y también hizo que el uso de Open Props fuera divertido. Los estilos de Open Props normalize.css fueron útiles con el tema adaptable (claro y oscuro), además de ayudar a organizar el contenido, como párrafos y encabezados.
Como usuarios pioneros de Astro, tuvimos algunos inconvenientes con PostCSS. Por ejemplo, no pudimos actualizar a la versión más reciente de Astro debido a demasiados problemas de compilación. Se podría dedicar más tiempo a optimizar los flujos de trabajo de compilación y de desarrollo.
Contenedores flexibles
Algunas ventanas crecen y se encogen, manteniendo la relación de aspecto para conservar su arte. Usamos otras ventanas para mostrar el poder de la arquitectura basada en componentes con consultas de contenedores. Las consultas de contenedor significaban que las ventanas podían tener su propia información de diseño adaptable individual y reajustarse según sus propios tamaños. Algunas ventanas pasaron de ser estrechas a anchas, por lo que fue necesario ajustar el tamaño del contenido multimedia dentro de ellas, así como la ubicación de ese contenido.
A medida que haya más espacio disponible para una ventana, podríamos adaptar el tamaño o los elementos secundarios de la ventana para que quepan. Resultó que, para cumplir con las ventanas adaptativas, las consultas de contenedor no solo serían divertidas de mostrar, sino que 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 de mantener una relación de aspecto. Ofrece más control y más oportunidades. Cuando alcanzan un cierto tamaño, muchos niños se mueven para adaptarse a un nuevo diseño.
Las consultas de contenedor también nos permitieron admitir la contención en dirección de bloque (vertical), por lo que, a medida que una ventana crecía en longitud, 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 forma independiente y junto con 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 consultas de contenedor para mostrar y ocultar detalles a medida que el arte se volvía cada vez más abarrotado en tamaños más pequeños y más vacío en tamaños más grandes. La ventana nueve es un gran ejemplo de dónde entró en juego:
Compatibilidad entre navegadores
Para crear una excelente experiencia moderna en todos los 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ó la compilación de un nuevo polyfill de consultas de contenedores. El polyfill se basa en ResizeObserver, MutationObserver y la función:is() de CSS. Por lo tanto, todos los navegadores modernos admiten el polyfill, específicamente Chrome y Edge desde la versión 88, Firefox desde 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 mostrar cómo puedes usar el arte en sí para participar de forma activa en la creación de una excelente experiencia en el modo oscuro. Para ello, ajustamos los estilos de fondo de cada ventana de forma programática y usamos todo el CSS que tenía 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 sobre estas.
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, que se inspiró en nuestro equipo. También incluimos un cursor de estilo retro en los días inactivos y jugamos con el estilo del favicon.
Detalles funcionales
Una de las funciones adicionales es la de "Ir a hoy", con un pájaro que se posa en la parte superior del edificio. Si haces clic en este pájaro o presionas Intro, se te redireccionará a la fecha actual del mes en la página para que puedas acceder rápidamente a los lanzamientos más recientes.
El sitio web de Designcember también tiene una hoja de diseño de impresión especial en la que básicamente publicamos una imagen específica que funciona mejor en papel de 8.5" x 11" para que puedas imprimir el calendario y mantener el espíritu festivo durante todo el año.
En general, se invirtió mucho trabajo en crear una experiencia web moderna, divertida y caprichosa para celebrar el desarrollo de la IU durante todo el mes de diciembre. Esperamos que lo hayas disfrutado.
