Rzut oka na proces i narzędzia wykorzystywane do tworzenia kalendarza świątecznego w designerskim stylu.
W duchu grudnia i licznych kalendarzy, z których ludzie korzystają do odliczania i świętowania, chcieliśmy zwrócić uwagę użytkowników na treści internetowe tworzone przez członków społeczności oraz zespół Chrome. Każdego dnia wyróżnialiśmy jeden materiał związany z projektowaniem UI i 31 najważniejszymi informacjami. Było to 26 nowych stron demonstracyjnych, narzędzi, ogłoszeń, podcastów, filmów, artykułów i studiów przypadków.
Zobacz wszystkie funkcje na designcember.com.
Przegląd
Naszym celem było zapewnienie dostępności, fantazyjnej, nowoczesnej i responsywnej technologii internetowej przy jak najmniejszej liczbie bajtów. Chcieliśmy zwrócić uwagę użytkowników na nowe, elastyczne interfejsy API, takie jak zapytania o kontenery, oraz zaprezentować piękny przykład trybu ciemnego w witrynie z dużą liczbą zasobów, która jest skoncentrowana na projektowaniu. W tym celu skompresowaliśmy pliki, oferowaliśmy wiele formatów, wykorzystaliśmy narzędzia do tworzenia zoptymalizowane pod kątem generowania witryn statycznych oraz udostępniliśmy nowy kod polyfill.
Zaczynamy od fantazji
Witryna kalendarza Designcember miała służyć jako wystawa wszystkich prac, które chcieliśmy wyróżnić w grudniu, a jednocześnie pełniła rolę witryny demonstracyjnej. Zdecydowaliśmy się zbudować elastyczny budynek mieszkalny, który mógłby być wysoki i węższy lub krótszy i szerszy, a okna dostosowywały się do jego ułożenia. Każde okno oznaczało jeden dzień (a więc jeden fragment treści). Pracowaliśmy z ilustratorką Alice Lee, aby wcielić naszą wizję w życie.
Alicja dzieliła się pomysłami i szkicami, które były ekscytujące nawet na samym początku. Gdy ona pracowała nad sztuką, zgłębiliśmy architekturę. Na początku dyskutowano o układzie makr, budynku i jego oknach. W jaki sposób okna dostosowują się do 1, 2 lub 3 kolumn w miarę zwiększania dostępnej przestrzeni widocznego obszaru? Jak daleko mogą się zmniejszyć lub rozciągnąć? Jaki jest maksymalny rozmiar budynku? Jak bardzo przesuną się okna?
Oto podgląd elastycznego prototypu korzystającego z grid-auto-flow: dense, na którym widać, jak algorytm siatki może automatycznie rozmieszczać okna. Szybko zdaliśmy sobie sprawę, że chociaż siatki współczynnika proporcji świetnie sprawdzają się przy prezentowaniu dzieł sztuki, nie dają możliwości rozwijania okien i obniżania się do niejednolitej dostępnej przestrzeni i prezentować możliwości zapytań dotyczących kontenerów.
Gdy ogólna siatka była stosunkowo stabilna i przekazywała orientacyjną responsywność budynku i jego okien, mogliśmy skupić się na jednym oknie. Niektóre okna rozciągały się, kurczyły, ściskały, rosły i składały się na nowo niż inne w siatce.
Każde okno musi obsłużyć określoną liczbę zmian rozmiaru turbulencji. Poniżej znajduje się prototyp okna prezentującego jego reagowanie na turbulencje i pokazuje, jak bardzo możemy się dostosować do zmian w każdym interaktywnym oknie.
Animacja okna z arkuszami sprite.
Niektóre okna mają animacje, które zwiększają możliwości interakcji. Animacje są rysowane ręcznie w programie Photoshop, klatka po klatce. Każda klatka jest eksportowana, przekształcana w arkusz sprite za pomocą tego generatora arkuszy sprite, a następnie optymalizowany przy użyciu Squoosha. Animacja CSS korzysta następnie z elementów background-position-x i animation-timing-function, jak w tym przykładzie.
.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%; }
}
Niektóre animacje, na przykład świnka szóstego dnia, były animacjami CSS opartymi na krokach.
W podobnej technice udało nam się osiągnąć ten efekt przy użyciu funkcji steps() (różnica polega na tym, że klatki kluczowe były pozycjami przekształcenia CSS, a nie położeniami tła).
Maskowanie CSS
Niektóre okna miały wyjątkowe kształty. Użyliśmy masek i aspect-ratio, aby stworzyć skalowalne okno adaptacyjne o unikalnym kształcie.
Do utworzenia maski, na przykład tej dla okna 8, potrzeba kilku umiejętności w programie Photoshop oraz wiedzy o tym, jak działają maski w internecie. Spójrzmy na okno ósmego dnia.
Aby utworzyć maskę, wewnętrzny kształt 4-listnej koniczyny należy wyodrębnić jako własny kształt i wypełnić kolorem białym. Biały informuje CSS, która treść pozostaje, a wszystko poza białą nie. W Photoshopie wybrano wnętrze okna z pierzastymi 1 pikselami (w celu usunięcia problemów z aliasami), a następnie wypełniono biały kolor i wyeksportowano na tę samą wysokość i szerokość co ramka okna. W ten sposób ramka i maska mogą zostać nałożone na siebie bezpośrednio, pokazując wewnętrzną zawartość klatki zgodnie z oczekiwaniami.
Po zakończeniu można zmodyfikować zawartość okna, tak aby zawsze pozostawała w niestandardowej ramce. Na ilustracji poniżej widać wersję okna w trybie ciemnym z innym gradientem tła i poświatowym filtrem CSS zastosowanym do światła.
Maskowanie obsługuje też elastyczne okna oparte na zapytaniach kontenera. W otwartym oknie znajduje się postać, która kryje się za maską, aż okno nie powiększy się. Aby użytkownik nie mógł dostosować obrazu poza kadrem, Alicja dokończyła za nas pełne znaki. Postać jest zamaskowana w oknie, ale rośliny nie, więc kolejnym wyzwaniem było nałożenie maskowanych elementów na niezamaskowane warstwy i zadbanie o to, aby wszystkie dobrze się skalowały.
Poniższa ilustracja przedstawia wygląd okna i znaku bez maski.
Uwielbiam sztukę
Aby zachować wierność ilustracji i upewnić się, że ekrany o wysokiej rozdzielczości nie będą miały efektu rozmycia, Alicja pracowała przy proporcjach 3 pikseli. Planowaliśmy zastosować kod imgix i wyświetlać zoptymalizowane obrazy i formaty na swoim serwerze, ale odkryliśmy, że ręczne wprowadzanie poprawek za pomocą narzędzia Squoosh pozwoliłoby nam zaoszczędzić co najmniej 50%.
Ilustracja przedstawia wyjątkowe wyzwania w zakresie kompresji, zwłaszcza pociągnięcia pędzla i przezroczystego stylu chropowatej krawędzi użytej przez Alice. Zdecydowaliśmy się usunąć każdy 3 obrazy wyeksportowane z programu Photoshop do formatu PNG, czyli WebP lub AVIF. Każdy typ pliku ma własne specjalne zdolność do kompresji, dlatego znalezienie kilku typowych ustawień optymalizacji wymagało kompresowania ponad 50 obrazów.
Kluczowe znaczenie ma interfejs Squoosh CLI, który wymaga optymalizacji ponad 200 obrazów – wykonanie wszystkich tych czynności ręcznie zajęłoby kilka dni. Kiedy już wprowadziliśmy standardowe ustawienia optymalizacji, udostępniliśmy je jako instrukcje wiersza poleceń i przetworzyliśmy zbiorczo całe foldery obrazów PNG na ich odpowiedniki skompresowane w formacie WebP i AVIF.
Oto przykładowe użyte polecenie squoosh interfejsu AVIF CLI:
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
Po sprawdzeniu zoptymalizowanej grafiki w repozytorium możemy zacząć je wczytywać z kodu 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>
Tworzenie kodu źródłowego obrazów powtarzało się, dlatego opracowaliśmy komponent Astro, który umożliwia umieszczanie obrazów za pomocą jednego wiersza kodu.
<Pic filename="day1/inner-frame" role="presentation" />
Użytkownicy czytników ekranu i klawiatury
Projektcember w dużej mierze przyświecają dzieła sztuki i interaktywne okna. Zależy nam na tym, aby użytkownik klawiatury mógł korzystać ze strony i otwierać okna oraz aby użytkownicy czytników ekranu mogli dobrze czytać.
Na przykład podczas umieszczania obrazów użyliśmy role="presentation" do oznaczenia ich jako prezentacji dla czytników ekranu. Uznaliśmy, że od 5 do 12 niedziałających alt tekstów reklamy będzie bardzo negatywne. Oznaczyliśmy obrazy jako prezentacje i zapewniliśmy ogólną narrację w oknie. Poruszanie się między oknami za pomocą czytnika ekranu tworzy przyjemną narrację, która ma pomóc w rozbudzeniu fantazji i zabaw, którymi witryna chce się podzielić.
Na filmie poniżej zobaczysz, jak działa klawiatura. Klawisze Tab, Enter, Spacja i Escape służą do zarządzania zaznaczeniem w wyskakujących okienkach i oknach oraz poza nimi.
Czytnik ekranu ma specjalne atrybuty ARIA, które zwiększają przejrzystość treści. Na przykład linki dla dni zawierają tylko wartość „jeden” lub „dwa”, ale przy niektórych z nich ARIA są podawane jako „dzień pierwszy” i „dzień drugi”. Oprócz tego wszystkie obrazy są podsumowane pod jedną etykietą, dzięki czemu każde okno ma opis.
Astrologiczny generator witryn oparty na elementach statycznych
Usługa Astro ułatwiła naszemu zespołowi współpracę w witrynie. Model komponentów był dobrze znany zarówno programistom Angular, jak i React, a system stylów nazw klasy o zakresie pomagał każdemu deweloperowi wiedzieć, że jego praca nad oknem nie będzie sprzeczna z żadną inną osobą.
Dni jako komponenty
Każdy dzień był komponentem, który pobierał stan z magazynu danych czasu kompilacji. Pozwoli nam to uruchomić logikę szablonu, zanim kod HTML dotrze do przeglądarki. Logika określa, czy w danym dniu powinna pojawić się etykietka, ponieważ w dniach nieaktywnych nie ma wyskakujących okienek.
Kompilacje są uruchamiane co godzinę, a magazyn danych czasu kompilacji otwiera nowy dzień, gdy serwer kompilacji jest już po północy. Te automatycznie aktualizujące się i samowystarczające niewielkie systemy dbają o aktualność strony.
Style zakresu i otwarte rekwizyty
Astro stosuje zakresy zapisane w modelu składowym, co ułatwia rozdzielanie zadań wielu członkom zespołu, a także sprawia, że korzystanie z Open Props jest zabawne. Style Open Props normalize.css przydają się z motywem adaptacyjnym (jasnym i ciemnym) oraz pomagają zmieniać treść, taką jak akapity i nagłówki.
Jako pierwsi użytkownicy Astro natknęliśmy się na kilka problemów z usługą PostCSS. Na przykład nie mogliśmy zaktualizować najnowszej wersji Astro z powodu zbyt wielu problemów z kompilacją. Można tu poświęcić więcej czasu na optymalizację procesów związanych z kompilacją i programowaniem.
Elastyczne kontenery
Niektóre okna rosną i kurczą się, zachowując proporcje obrazu, aby zachować wygląd. Wykorzystaliśmy inne okna, aby pokazać możliwości architektury opartej na komponentach z zapytaniami dotyczącymi kontenerów. Zapytania dotyczące kontenerów oznaczały, że system okien mógł posiadać informacje o poszczególnych stylach elastycznych i dostosowywać się zgodnie z własnymi rozmiarami. Niektóre okna były zwężone do szerokie, co wymagało dostosowania rozmiaru znajdujących się w nich multimediów oraz ich rozmieszczenia.
W miarę zwiększania się ilości wolnego miejsca możemy dopasowywać jego rozmiar i elementy podrzędne. Okazało się, że w celu wypełnienia okien adaptacyjnych zapytania dotyczące kontenerów nie tylko będą zabawną zabawą, ale też wymagane i znacznie uprościły administrowanie określonymi układami.
.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;
}
}
To podejście różni się od zachowania współczynnika proporcji. Daje więcej kontroli i więcej możliwości. Wiele dzieci porusza się w określonym rozmiarze, aby dostosować się do nowego układu.
Zapytania dotyczące kontenerów umożliwiły nam również obsługę ograniczania w kierunku blokowym (pionowym), a w miarę wydłużania się okien mogliśmy dostosowywać jego style do odpowiednich rozmiarów. Widać to w zapytaniach opartych na wysokości, których używamy samodzielnie, a także w uzupełnieniu zapytań uwzględniających szerokość:
.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);
}
}
Wykorzystywaliśmy też zapytania dotyczące kontenerów, aby pokazywać i ukrywać szczegóły, ponieważ grafika stawała się coraz bardziej zatłoczona w przypadku mniejszych rozmiarów, a w większych rozmiarach. Dobrym przykładem jest okno 9:
Obsługa różnych przeglądarek
Aby zapewnić świetne działanie w różnych przeglądarkach, zwłaszcza w przypadku eksperymentalnych interfejsów API, takich jak zapytania o kontenery, potrzebujemy narzędzia polyfill. Powiadomiliśmy o tym nasz zespół i Surma wyprzedził całą kompilację nowego kodu polyfill zapytań w kontenerze. Polyfill korzysta z parametrów ResizeObserver, MutationObserver i :is() CSS. Dlatego wszystkie nowoczesne przeglądarki obsługują kod polyfill – w szczególności Chrome i Edge od wersji 88, Firefox od wersji 78 i Safari od wersji 14. Użycie kodu polyfill pozwala na użycie następujących składni:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Tryb ciemny
Ostatnim istotnym elementem witryny Designcember jest piękny ciemny motyw. Chcieliśmy pokazać, jak można wykorzystać sztukę, aby aktywnie uczestniczyć w tworzeniu wspaniałych funkcji trybu ciemnego. W związku z tym automatycznie dostosowaliśmy style tła każdego okna i wykorzystaliśmy tyle CSS przy tworzeniu grafiki okna. Większość tła była gradientem CSS, dzięki czemu można było łatwiej dostosować wartości kolorów. Następnie nałożyliśmy na nie grafikę.
Inne pisanki
Osobiste akcenty
Dodaliśmy do niej kilka osobistych akcentów, aby nadać jej bardziej osobisty charakter. Pierwsza z nich to postacie zaczerpnięte z naszego zespołu. Dodaliśmy też kursor w przypadku braku aktywności w poprzednich dniach i umożliwiliśmy korzystanie z favikony.
Poprawki funkcyjne
Jedną z dodatkowych, praktycznych nowości jest funkcja „Przejdź do dnia dzisiejszego” z ptakiem siedzącym na dachu budynku. Naciśnięcie klawisza Enter przy tym ptaszku przeskoczy na dół strony z bieżącym dniem miesiąca, dzięki czemu możesz szybko sprawdzić najnowsze nowości.
Firma Designcember.com ma też specjalny arkusz stylów, który pozwala na wydrukowanie konkretnego zdjęcia i zaprezentowanie go na papierze o wymiarach 8,5 x 11 cali.Dzięki temu możesz go samodzielnie wydrukować i zachować świąteczny przez cały rok.
W grudnie opracowanie mnóstwa pracy wymagało stworzenia fantazyjnej, nowoczesnej witryny internetowej, która przez cały miesiąc była świadczona przez cały miesiąc tworzenia UI. Mamy nadzieję, że Ci się podobało.
