Gedung Designcember

Sekilas tentang proses dan alat yang digunakan untuk membuat pengalaman Designcember bergaya kalender liburan.

Dalam semangat bulan Desember dan banyak kalender yang digunakan orang untuk menghitung mundur dan merayakan, kami ingin menyoroti konten web dari komunitas dan tim Chrome. Setiap hari, kami menyoroti satu konten terkait pengembangan UI dan desain, yang berjumlah 31 sorotan, termasuk 26 situs demo, alat, pengumuman, podcast, video, artikel, dan studi kasus baru.

Lihat pengalaman lengkapnya di designcember.com.

Situs Designcember.

Ringkasan

Tujuan kami adalah memberikan pengalaman web yang mudah diakses, unik, modern, dan responsif dalam jumlah byte sesedikit mungkin. Kami ingin menyoroti API responsif baru seperti kueri penampung, dan menyertakan contoh mode gelap yang menarik di situs yang berfokus pada desain dan memiliki banyak aset. Untuk mencapai hal ini, kami mengompresi file, menawarkan beberapa format, menggunakan alat build yang dioptimalkan untuk pembuatan situs statis, mengirimkan polyfill baru, dan lainnya.

Memulai dengan keinginan

Ide di balik situs kalender Designcember adalah berfungsi sebagai showcase untuk semua karya yang ingin kami soroti selama bulan Desember, sekaligus berfungsi sebagai situs demo itu sendiri. Kami memutuskan untuk membuat gedung apartemen responsif yang dapat menjadi lebih tinggi dan lebih sempit, atau lebih pendek dan lebih lebar, dengan jendela yang mengatur ulang dirinya sendiri dalam bingkai. Setiap jendela mewakili satu hari (dan dengan demikian, satu bagian konten). Kami bekerja sama dengan ilustrator Alice Lee untuk mewujudkan visi kami.

Sketsa kerangka halaman Designcember.

Alice sangat inspiratif, membagikan proses dan sketsa yang menarik bahkan dalam konsep awalnya. Saat dia mengerjakan gambar, kami meretas arsitekturnya. Diskusi awal berkisar pada tata letak makro, bangunan, dan jendelanya. Bagaimana jendela akan beradaptasi dengan satu, dua, atau tiga kolom saat lebih banyak ruang area pandang tersedia? Sejauh mana ia dapat menyusut atau melar? Berapa ukuran maksimum bangunan? Berapa besar pergeseran jendela?

Berikut adalah pratinjau prototipe responsif menggunakan grid-auto-flow: dense yang menunjukkan cara jendela dapat ditempatkan secara otomatis oleh algoritma petak. Kami segera menyadari bahwa meskipun petak rasio aspek berperforma baik untuk menampilkan gambar, petak tersebut tidak memberikan kesempatan untuk membiarkan jendela membesar dan mengecil ke dalam ruang yang tersedia tidak seragam dan menunjukkan kehebatan kueri penampung.

Animasi yang menunjukkan cara wireframe ini merespons berbagai ukuran layar.
Lihat demo ini di CodePen.

Setelah petak umum relatif stabil dan menyampaikan kesan arah untuk responsivitas bangunan dan jendelanya, kita dapat berfokus pada satu jendela. Beberapa jendela diregangkan, diciutkan, dipadatkan, diperluas, dan disusun ulang lebih banyak daripada jendela lainnya di petak.

Wireframe yang menunjukkan cara jendela ditampilkan pada titik henti sementara yang berbeda.

Setiap jendela harus menangani turbulensi pengubahan ukuran dalam jumlah tertentu. Di bawah ini adalah prototipe jendela yang menunjukkan responsivitasnya terhadap turbulensi, yang menunjukkan seberapa banyak kita dapat mengharapkan setiap jendela interaktif untuk menyesuaikan.

Animasi jendela dengan spritesheet

Beberapa jendela memiliki animasi untuk memberikan interaksi tambahan ke pengalaman. Animasi digambar tangan, frame demi frame, di Photoshop. Setiap frame diekspor, diubah menjadi spritesheet dengan generator spritesheet ini, lalu dioptimalkan dengan Squoosh. Animasi CSS kemudian menggunakan background-position-x dan animation-timing-function seperti yang ditunjukkan dalam contoh berikut.

.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%; }
}

Animasi yang menampilkan jendela untuk hari pertama.

Beberapa animasi, seperti celengan hari keenam, adalah animasi CSS berbasis langkah. Kita mendapatkan efek ini dengan teknik serupa, menggunakan steps(), dengan perbedaan bahwa keyframe adalah posisi transformasi CSS, bukan posisi latar belakang.

Masking CSS

Beberapa jendela memiliki bentuk unik. Kami menggunakan mask dan aspect-ratio untuk membantu membuat jendela yang skalabel, berbentuk unik, dan adaptif.

Untuk membuat mask, seperti mask untuk jendela delapan ini, diperlukan beberapa keterampilan Photoshop klasik, ditambah sedikit pengetahuan tentang cara kerja mask di web. Mari kita lihat periode untuk hari kedelapan.

Periode untuk hari kedelapan.

Agar menjadi masker, bentuk jenis semanggi empat daun bagian dalam harus diisolasi sebagai bentuknya sendiri dan diisi dengan warna putih. Warna putih memberi tahu CSS konten apa yang akan tetap ada, dan semua yang berada di luar warna putih tidak akan ada. Di Photoshop, bagian dalam jendela dipilih, di-feather 1 piksel (untuk menghapus masalah aliasing), lalu diisi dengan warna putih dan diekspor dengan tinggi dan lebar yang sama dengan bingkai jendela. Dengan cara ini, bingkai dan mask dapat ditumpuk langsung di atas satu sama lain, yang menampilkan konten dalam dalam bingkai seperti yang diharapkan.

Gambar mask clover

Setelah selesai, konten jendela dapat diubah dan akan selalu muncul dalam bingkai kustom. Gambar berikut menunjukkan versi jendela mode gelap, dengan gradien latar belakang yang berbeda dan filter CSS glow yang diterapkan ke cahaya.

Jendela untuk hari kedelapan dalam mode gelap.

Penyamaran juga mendukung jendela berbasis kueri penampung yang responsif. Di jendela sembilan, ada karakter yang disembunyikan di balik topeng hingga jendela berukuran lebih sempit. Untuk memastikan pengguna tidak dapat menyesuaikan gambar agar tidak keluar dari bingkai, Alice menyelesaikan karakter lengkap untuk kita. Karakter disamarkan dalam jendela, tetapi tanaman tidak, sehingga tantangan lain yang kami hadapi adalah menempatkan elemen yang disamarkan dengan lapisan yang tidak disamarkan, dan memastikan semuanya diskalakan dengan baik.

Gambar berikut menunjukkan tampilannya tanpa mask pada jendela dan karakter.

Gambar untuk jendela sembilan tanpa mask.

Mempersempit karya seni

Untuk mempertahankan fidelitas ilustrasi dan memastikan layar beresolusi tinggi tidak akan mendapatkan pengalaman pengguna yang buram, Alice bekerja dengan rasio piksel 3x. Rencananya adalah menggunakan imgix dan menayangkan gambar dan format yang dioptimalkan di server mereka, tetapi kami mendapati bahwa penyesuaian manual dengan alat Squoosh dapat menghemat 50% atau lebih.

Menggunakan Squoosh untuk mengompresi gambar.

Ilustrasi memiliki tantangan unik untuk kompresi, terutama goresan kuas dan gaya tepi kasar transparan yang digunakan Alice. Kami memilih untuk meng-Squoosh setiap gambar png 3x yang diekspor Photoshop, menjadi png, webp, dan avif yang lebih kecil. Setiap jenis file memiliki kemampuan kompresi khusus, dan diperlukan kompresi lebih dari 50 gambar untuk menemukan beberapa setelan pengoptimalan umum.

Squoosh CLI menjadi sangat penting dengan lebih dari 200 gambar yang harus dioptimalkan—melakukan semua itu secara manual akan memerlukan waktu berhari-hari. Setelah memiliki setelan pengoptimalan umum, kami menyediakannya sebagai petunjuk command line dan memproses seluruh folder gambar PNG secara batch menjadi format WebP dan AVIF yang dikompresi.

Berikut adalah contoh perintah squoosh CLI AVIF yang digunakan:

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

Dengan karya seni yang dioptimalkan yang di-checkin ke repo, kita dapat mulai memuat karya seni tersebut dari 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>

Menulis kode sumber gambar berulang kali, jadi kami membuat komponen Astro untuk menyematkan gambar dengan satu baris kode.

<Pic filename="day1/inner-frame" role="presentation" />

Pengguna pembaca layar dan keyboard

Sebagian besar pengalaman Designcember adalah melalui jendela interaktif dan seni. Kami ingin pengguna keyboard dapat menggunakan situs dan melihat jendela, serta pengguna pembaca layar mendapatkan pengalaman narasi yang baik.

Misalnya, saat menyematkan gambar, kita menggunakan role="presentation" untuk menandai gambar sebagai presentasi untuk pembaca layar. Kami merasa bahwa pengalaman pengguna dengan 5 hingga 12 deskripsi alt yang terpecah akan menjadi pengalaman yang buruk. Jadi, kami menandai gambar sebagai presentasi dan memberikan narasi jendela secara keseluruhan. Berpindah-pindah jendela di pembaca layar akan memberikan nuansa narasi yang baik, yang kami harap akan membantu menyampaikan keceriaan dan kesenangan yang ingin dibagikan situs.

Video berikut menampilkan demo pengalaman keyboard. Tombol tab, enter, spasi, dan escape digunakan untuk mengatur fokus ke dan dari pop-up jendela dan jendela.

Pengalaman pembaca layar memiliki atribut ARIA khusus yang memberikan kejelasan pada konten. Misalnya, link untuk hari hanya bertuliskan "satu" atau "dua", tetapi dengan beberapa ARIA yang ditambahkan, link tersebut akan diumumkan sebagai "Hari pertama" dan "Hari kedua". Selain itu, semua gambar diringkas dalam satu label sehingga setiap jendela memiliki deskripsi.

Astro, generator situs statis pertama, berbasis komponen

Astro memudahkan tim untuk bekerja sama di situs. Model komponen sudah dikenal oleh developer Angular dan React, sementara sistem gaya nama class cakupan membantu setiap developer mengetahui bahwa pekerjaan mereka di jendela tidak akan bertentangan dengan orang lain.

Hari sebagai komponen

Setiap hari adalah komponen yang mengambil status dari penyimpanan data waktu build. Hal ini memungkinkan kita menjalankan logika template sebelum HTML mencapai browser. Logika akan menentukan apakah hari tersebut harus menampilkan tooltip atau tidak, karena hari tidak aktif tidak memiliki pop-up.

Build dijalankan setiap jam dan penyimpanan data waktu build akan membuka hari baru saat server build melewati tengah malam. Sistem kecil yang dapat melakukan update sendiri dan mandiri ini membuat situs selalu aktual.

Gaya cakupan dan Properti Terbuka

Astro mencakup gaya yang ditulis di dalam model komponennya, yang mempermudah distribusi beban kerja di antara banyak anggota tim, dan juga membuat penggunaan Open Props menjadi menyenangkan. Gaya Open Props normalize.css sangat berguna dengan tema adaptif (terang dan gelap), serta membantu mengelola konten seperti paragraf dan header.

Sebagai pengguna awal Astro, kami mengalami beberapa masalah dengan PostCSS. Misalnya, kami tidak dapat mengupdate ke versi Astro terbaru karena terlalu banyak masalah build. Lebih banyak waktu dapat dihabiskan di sini, untuk mengoptimalkan alur kerja build dan developer.

Penampung fleksibel

Beberapa jendela membesar dan mengecil, mempertahankan rasio aspek untuk mempertahankan gambarnya. Kami menggunakan beberapa jendela lain untuk menunjukkan keandalan arsitektur berbasis komponen dengan kueri penampung. Kueri penampung berarti jendela dapat memiliki informasi gaya responsif masing-masing dan menyesuaikan kembali berdasarkan ukurannya sendiri. Beberapa jendela berubah dari sempit menjadi lebar dan perlu menyesuaikan ukuran media di dalamnya, serta penempatan media tersebut.

Demonstrasi tentang bagaimana jendela berubah karena memiliki lebih banyak ruang.

Karena lebih banyak ruang yang tersedia untuk jendela, kita dapat menyesuaikan ukuran atau elemen turunan jendela agar sesuai. Ternyata, untuk memenuhi jendela adaptif, kueri penampung tidak hanya akan menyenangkan untuk ditampilkan, tetapi juga diperlukan dan menyederhanakan orkestrasi tata letak tertentu secara drastis.

.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;
  }
}

Pendekatan ini berbeda dengan mempertahankan rasio aspek. Hal ini menawarkan lebih banyak kontrol dan lebih banyak peluang. Pada ukuran tertentu, banyak anak yang berpindah untuk beradaptasi dengan tata letak baru.

Kueri penampung juga memungkinkan kita mendukung pembatasan arah blok (vertikal), sehingga saat panjang jendela bertambah, kita dapat menyesuaikan gayanya agar sesuai. Hal ini terlihat pada kueri berbasis tinggi, yang kami gunakan secara terpisah, dan selain kueri berbasis lebar:

.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);
  }
}

Kami juga menggunakan kueri penampung untuk menampilkan dan menyembunyikan detail karena gambar menjadi semakin ramai pada ukuran yang lebih kecil, dan lebih kosong pada ukuran yang lebih lebar. Jendela sembilan adalah contoh yang bagus tentang penerapannya:

Dukungan lintas browser

Untuk menciptakan pengalaman lintas browser modern yang luar biasa, terutama untuk API eksperimental seperti kueri penampung, kita memerlukan polyfill yang bagus. Kami mengirimkan permintaan ke tim kami, dan Surma memimpin pembuatan polyfill kueri penampung baru. Polyfill mengandalkan ResizeObserver, MutationObserver, dan fungsi:is() CSS. Oleh karena itu, semua browser modern mendukung polyfill, khususnya Chrome dan Edge dari versi 88, Firefox dari versi 78, dan Safari dari versi 14. Penggunaan polyfill memungkinkan salah satu sintaksis berikut:

/* These are all equivalent */
@container (min-width: 200px) {
  /* ... */
}
@container (width >= 200px) {
  /* ... */
}
@container size(width >= 200px) {
  /* ... */
}

Mode gelap

Versi mode terang dan gelap situs Designcember, berdampingan.

Sentuhan terakhir yang penting untuk situs Designcember adalah tema gelap yang indah. Kami ingin menunjukkan cara menggunakan seni itu sendiri sebagai peserta aktif dalam menciptakan pengalaman mode gelap yang luar biasa. Untuk itu, kami menyesuaikan gaya latar belakang setiap jendela secara terprogram, dan menggunakan CSS sebanyak mungkin saat membuat gambar jendela. Sebagian besar latar belakangnya adalah gradien CSS, sehingga akan lebih mudah untuk menyesuaikan nilai warnanya. Kemudian, kita akan menempatkan gambar di atasnya.

Telur Paskah lainnya

Sentuhan pribadi

Kami menambahkan beberapa sentuhan pribadi ke halaman untuk memberi situs lebih banyak kepribadian. Yang pertama adalah pemeran karakter, yang terinspirasi dari tim kami. Kami juga menyertakan kursor bergaya throwback pada hari tidak aktif dan bermain-main dengan gaya favicon.

Gaya kursor kustom dan opsi favicon

Sentuhan fungsional

Salah satu sentuhan fungsional tambahan adalah fungsi "Langsung ke Hari Ini", dengan burung yang duduk di atas bangunan. Dengan mengklik atau menekan enter pada burung ini, Anda akan diarahkan ke hari ini dalam bulan tersebut, sehingga Anda dapat dengan cepat membuka peluncuran terbaru.

Designcember.com juga memiliki stylesheet cetak khusus tempat kami menampilkan gambar tertentu yang paling cocok untuk kertas berukuran 8,5" x 11" sehingga Anda dapat mencetak kalender sendiri dan tetap meriah sepanjang tahun.

Cetak desain kalender berukuran poster.
Una memegang cetakan kalender berukuran besar.

Secara keseluruhan, banyak pekerjaan yang dilakukan untuk menciptakan pengalaman web modern yang menyenangkan dan unik untuk merayakan pengembangan UI sepanjang bulan Desember. Semoga Anda menyukainya.

Bagian kalender dengan anotasi dan catatan visual