Intip proses dan alat yang digunakan untuk membuat pengalaman Designcember bergaya kalender liburan.
Dalam semangat bulan Desember dan banyaknya kalender yang digunakan orang untuk menghitung mundur dan merayakannya, kami ingin menyoroti konten web dari komunitas dan tim Chrome. Setiap hari, kami menyoroti satu bagian dari pengembangan UI dan konten terkait desain, dengan total 31 sorotan, di antaranya adalah 26 situs demo, alat, pengumuman, podcast, video, artikel, dan studi kasus baru.
Lihat pengalaman lengkapnya di designcember.com.
Ringkasan
Tujuan kami adalah memberikan pengalaman web yang mudah diakses, unik, modern, dan responsif dalam byte sesedikit mungkin. Kami ingin menyoroti API responsif baru seperti kueri container, dan menyertakan contoh yang menarik dari mode gelap di situs yang berfokus pada desain dan sarat aset. Untuk mencapai hal ini, kami mengompresi file, menawarkan beberapa format, menggunakan alat build yang dioptimalkan untuk pembuatan situs statis, mengirimkan polyfill baru, dan banyak lagi.
Dimulai dengan imajinatif
Ide seputar situs kalender Designcember adalah berfungsi sebagai etalase untuk semua karya yang ingin kami soroti sepanjang bulan Desember, sekaligus berfungsi seperti situs demo itu sendiri. Kami memutuskan untuk membangun gedung apartemen responsif yang bisa menjadi lebih tinggi dan lebih sempit, atau lebih pendek dan lebih lebar, dengan jendela yang diatur ulang 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.
Alice menginspirasi, berbagi proses dan sketsa yang menarik bahkan dalam konsep awalnya. Saat ia mengerjakan karya seninya, kami meretas arsitekturnya. Diskusi awal seputar tata letak makro, bangunan, dan jendelanya. Bagaimana jendela akan beradaptasi dengan satu, dua, atau tiga kolom ketika lebih banyak ruang tampilan yang tersedia? Seberapa jauh mereka bisa menyusut atau meregang? Berapa ukuran maksimum bangunannya? Seberapa besar jendela akan bergeser?
Berikut adalah pratinjau prototipe responsif menggunakan grid-auto-flow: dense yang menunjukkan bagaimana jendela dapat ditempatkan secara otomatis oleh algoritma petak. Kami segera menyadari bahwa meskipun petak rasio aspek berperforma sangat baik untuk menampilkan seni, petak tersebut tidak memberikan kesempatan untuk membiarkan jendela membesar dan menyusut menjadi ruang yang tidak seragam serta menampilkan kekuatan kueri container.
Setelah {i>grid<i} umum relatif stabil dan mengomunikasikan arah respons bangunan dan jendelanya, kami dapat fokus pada satu jendela. Beberapa jendela membesar, menyusut, terjepit, membesar, dan mengatur kembali diri mereka lebih dari yang lain dalam kisi-kisi.
Setiap jendela harus menangani sejumlah turbulensi perubahan ukuran. Di bawah ini adalah prototipe jendela yang mendemonstrasikan responsivitasnya terhadap turbulensi, yang menunjukkan seberapa besar yang bisa kita harapkan untuk menyesuaikan setiap jendela interaktif.
Animasi jendela dengan spritesheet
Beberapa jendela memiliki animasi untuk menghadirkan interaksi tambahan pada pengalaman. Animasinya digambar tangan, dengan bingkai demi bingkai, menggunakan 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 pada 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%; }
}
Beberapa animasi, seperti celengan di hari keenam, adalah animasi CSS berbasis langkah.
Kami mendapatkan efek ini dengan teknik serupa, menggunakan steps(), yang perbedaannya adalah keyframe adalah posisi transformasi CSS, bukan posisi latar belakang.
Penyamaran CSS
Beberapa jendela memiliki bentuk yang unik. Kami menggunakan
mask dan
aspect-ratio untuk membantu membuat jendela yang skalabel, berbentuk unik, dan adaptif.
Untuk membuat mask, seperti yang ini untuk jendela delapan, beberapa keterampilan Photoshop klasik diperlukan, ditambah sedikit pengetahuan tentang cara kerja mask di web. Mari kita lihat jendela untuk hari kedelapan.
Untuk menjadi topeng, bentuk jenis semanggi berdaun empat bagian dalam harus diisolasi sebagai bentuknya sendiri dan diisi dengan warna putih. Warna putih memberi tahu CSS konten apa yang bertahan, dan yang selain warna putih tidak. Di Photoshop, bagian dalam jendela dipilih, menampilkan 1px (untuk menghapus masalah aliasing), kemudian diisi dengan warna putih dan diekspor dengan tinggi dan lebar yang sama seperti bingkai jendela. Dengan cara ini, bingkai dan mask dapat dilapiskan langsung di atas satu sama lain, sehingga menampilkan konten bagian dalam dalam bingkai seperti yang diharapkan.
Setelah selesai, konten jendela dapat diubah dan akan selalu muncul dalam bingkai kustom. Gambar berikut menunjukkan versi mode gelap jendela, dengan gradien latar belakang yang berbeda dan filter CSS glow yang diterapkan pada cahaya.
Masking juga mendukung jendela berbasis kueri container yang responsif. Di jendela sembilan, ada karakter yang tersembunyi di balik topeng hingga jendela memiliki ukuran yang lebih sempit. Untuk memastikan pengguna tidak dapat menyesuaikan gambar keluar dari bingkai, Alice melengkapi karakter lengkap untuk kita. Karakter ini disamarkan di dalam jendela, tetapi tanamannya tidak. Jadi, tantangan lain yang kami hadapi adalah melapisi elemen yang disamarkan dengan lapisan tanpa topeng, dan memastikan semuanya diskalakan dengan baik.
Gambar berikut menunjukkan tampilan tanpa mask pada jendela dan karakter.
Menghancurkan seni
Untuk mempertahankan fidelitas ilustrasi dan memastikan layar definisi tinggi tidak akan mendapatkan pengalaman pengguna yang buram, Alice menggunakan rasio piksel 3x. Rencananya adalah menggunakan imgix dan menyajikan gambar dan format yang dioptimalkan di server mereka, tetapi kami menemukan bahwa penyesuaian manual dengan alat Squoosh dapat menghemat 50% atau lebih.
Ilustrasi memiliki tantangan unik untuk kompresi, terutama sapuan kuas dan gaya tepi kasar transparan yang digunakan Alice. Kami memilih untuk menggunakan Squoosh setiap 3x Photoshop mengekspor gambar png, ke png, webp, dan avif yang lebih kecil. Setiap jenis file memiliki kemampuan kompresi khusus sendiri, dan perlu mengompresi lebih dari 50 gambar untuk menemukan beberapa setelan pengoptimalan yang umum.
Squoosh CLI menjadi sangat penting dengan adanya lebih dari 200 gambar untuk dioptimalkan—melakukan semua hal tersebut secara manual akan memerlukan waktu berhari-hari. Setelah memiliki setelan pengoptimalan umum, kami menyediakannya sebagai petunjuk baris perintah dan memproses secara batch seluruh folder gambar PNG ke dalam WebP dan versi terkompresi AVIF.
Berikut adalah contoh perintah squoosh AVIF CLI 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
Setelah poster yang dioptimalkan diperiksa ke dalam repo, kita dapat mulai memuatnya 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 keyboard dan pembaca layar
Sebagian besar pengalaman Designcember adalah melalui karya seni dan jendela interaktif. Penting bagi kami bahwa pengguna keyboard dapat menggunakan situs dan mengintip ke dalam jendela, dan pengguna pembaca layar mendapatkan pengalaman narasi yang bagus.
Misalnya, saat menyematkan gambar, kami menggunakan role="presentation" untuk menandai gambar sebagai presentasi untuk pembaca layar. Kami merasa bahwa pengalaman pengguna antara 5 hingga 12 deskripsi alt yang retak akan menjadi pengalaman yang buruk. Jadi, kami menandai gambar tersebut sebagai presentasi dan memberikan narasi jendela secara keseluruhan. Berpindah melalui jendela pada pembaca layar akan memiliki perasaan naratif yang bagus, yang kami harap akan membantu menghadirkan keseruan dan keseruan yang ingin dibagikan oleh situs ini.
Video berikut menampilkan demo pengalaman keyboard. Tombol tab, enter, spasi, dan escape semuanya digunakan untuk mengatur fokus ke dan dari pop-up jendela dan jendela.
Pengalaman pembaca layar memiliki atribut ARIA khusus yang menghadirkan kejelasan pada konten. Misalnya, tautan untuk hari tersebut hanya bertuliskan "satu" atau "dua", tetapi dengan beberapa ARIA tambahan, tautan tersebut diumumkan sebagai "Hari pertama" dan "Hari kedua". Selain itu, semua gambar diringkas dalam satu label sehingga setiap jendela memiliki deskripsi.
Astro, statis-pertama, generator situs berbasis komponen
Astro memudahkan tim untuk bekerja sama di situs. Model komponen tidak asing bagi developer Angular dan React, sedangkan sistem gaya classname 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. Ini memungkinkan kita menjalankan logika template sebelum HTML mencapai browser. Logika tersebut akan menentukan apakah hari harus menampilkan tooltip atau tidak, karena hari yang tidak aktif tidak memiliki pop-up.
Build dijalankan setiap jam dan penyimpanan data waktu build akan membuka hari baru ketika server build melewati tengah malam. Sistem kecil yang diperbarui secara mandiri dan mandiri ini menjaga situs tetap terbaru.
Gaya cakupan dan Props Terbuka
Astro mencakup gaya yang ditulis di dalam model komponennya, yang mempermudah pendistribusian beban kerja di antara banyak anggota tim, serta membuat penggunaan Props Terbuka menjadi lebih menyenangkan. Gaya Open Props normalize.css cocok dengan tema adaptif (terang dan gelap), serta membantu menangani 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 ilustrasinya. Kami menggunakan beberapa jendela lain untuk memamerkan kekuatan arsitektur berbasis komponen dengan kueri container. Kueri penampung berarti jendela dapat memiliki informasi gaya responsif masing-masing dan menyesuaikan ulang berdasarkan ukurannya sendiri. Beberapa jendela berubah dari sempit menjadi lebar dan perlu menyesuaikan ukuran media di dalamnya, serta penempatan media tersebut.
Seiring bertambahnya ruang yang tersedia untuk jendela, kita dapat menyesuaikan ukuran atau elemen turunan jendela agar sesuai. Ternyata untuk memenuhi jendela adaptif, kueri container tidak hanya 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. Menawarkan lebih banyak kontrol dan lebih banyak peluang. Pada ukuran tertentu, banyak turunan beralih untuk beradaptasi dengan tata letak baru.
Kueri container juga memungkinkan kita mendukung pembatasan arah blok (vertikal), sehingga seiring bertambahnya panjang jendela, kita bisa menyesuaikan gayanya agar sesuai. Hal ini terlihat dalam kueri berbasis tinggi, yang kami gunakan secara mandiri, 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 container untuk menampilkan dan menyembunyikan detail karena karya seni menjadi semakin ramai dalam ukuran yang lebih kecil, dan semakin kosong pada ukuran yang lebih luas. Jendela sembilan adalah contoh yang bagus dari mana hal ini ikut berperan:
Dukungan lintas browser
Untuk menciptakan pengalaman lintas browser modern yang luar biasa, terutama untuk API eksperimental seperti kueri container, kita memerlukan polyfill yang canggih. Kami menghubungi tim kami, dan Surma memelopori build untuk polyfill kueri container baru. Polyfill bergantung pada ResizeObserver, MutationObserver dan :is() function CSS. Oleh karena itu, semua browser modern mendukung polyfill, khususnya Chrome dan Edgefrom versi 88, Firefox dari versi 78, dan Safari dari versi 14. Menggunakan polyfill memungkinkan salah satu sintaksis berikut:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Mode gelap
Satu sentuhan terakhir yang penting untuk {i>website<i} Designcember adalah tema gelap yang indah. Kami ingin menunjukkan bagaimana Anda dapat menggunakan karya seni itu sendiri untuk berpartisipasi aktif dalam menciptakan pengalaman mode gelap yang luar biasa. Untuk ini, kita menyesuaikan gaya latar belakang setiap jendela secara terprogram, dan menggunakan CSS sebanyak yang masuk akal saat membuat seni jendela. Sebagian besar latar belakang adalah gradien CSS, sehingga nilai warna akan lebih mudah disesuaikan. Kemudian, kami menambahkan karya seni tersebut di atasnya.
Objek tersembunyi lainnya
Sentuhan pribadi
Kami menambahkan beberapa sentuhan pribadi pada halaman untuk memberikan sentuhan personal pada situs ini. Yang pertama adalah pemeran karakter, yang diambil dari inspirasi dari tim kami. Kami juga menyertakan kursor bergaya kilas balik pada hari-hari yang tidak aktif dan bermain-main dengan gaya favicon.
Sentuhan fungsional
Salah satu sentuhan fungsional tambahan adalah fungsi "Jump to Today", dengan burung yang berada di atas bangunan. Mengklik atau menekan enter pada burung ini akan membawa Anda ke bawah halaman ke tanggal hari ini di bulan berjalan, sehingga Anda dapat dengan cepat membuka peluncuran terbaru.
Designcember.com juga memiliki stylesheet khusus cetak di mana kami pada dasarnya menyajikan gambar tertentu yang bekerja paling baik pada kertas 8,5 "x 11" sehingga Anda dapat mencetak kalender sendiri dan tetap meriah sepanjang tahun.
Secara keseluruhan, banyak pekerjaan yang dilakukan untuk menciptakan pengalaman web modern yang menyenangkan dan unik untuk merayakan pengembangan UI sepanjang bulan di bulan Desember. Semoga Anda menikmatinya!
