Designcember'ın tatil takvimi tarzı deneyimini oluşturmak için kullanılan sürece ve araçlara göz atın.
Aralık ayı ve insanların geri sayım ve kutlama yapmak için kullandığı çok sayıda takvim nedeniyle, topluluğun ve Chrome ekibinin web içeriğini öne çıkarmak istedik. Her gün kullanıcı arayüzü geliştirme ve tasarımla ilgili bir parça içeriği öne çıkardık. Bunların toplamda öne çıkan 31 bölümü vardı. Bunların arasında 26 yeni demo sitesi, araçlar, duyurular, podcast'ler, videolar, makaleler ve örnek olaylar yer alıyordu.
Deneyimin tamamını designcember.com adresinde görebilirsiniz.
Genel bakış
Amacımız, mümkün olduğunca az baytla erişilebilir, sıra dışı, modern ve duyarlı bir web deneyimi sunmaktı. Kapsayıcı sorguları gibi yeni duyarlı API'leri öne çıkarmak, ayrıca tasarım odaklı ve öğe ağırlıklı bir web sitesinde güzel bir koyu mod örneği sunmak istedik. Bunu başarmak için dosyaları sıkıştırdık, birden fazla biçim sunduk, statik site oluşturmak için optimize edilmiş derleme araçları kullandık, yeni bir çoklu dolgu gönderdik ve daha pek çok şey yaptık.
Sıradan bir giriş
Designcember takvim sitesi ile ilgili fikir, Aralık ayı boyunca dikkat çekmek istediğimiz tüm çalışmalar için bir vitrin işlevi görmek ve aynı zamanda bir tanıtım sitesi gibi hareket etmekti. Daha uzun, daha dar veya daha kısa ve geniş olabilen, pencereleri çerçeve içinde yeniden düzenleyebileceği duyarlı bir apartman inşa etmeye karar verdik. Her pencere bir günü (dolayısıyla, bir içeriği) temsil ediyordu. Vizyonumuzu hayata geçirmek için çizer Alice Lee ile birlikte çalıştık.
Alice, ilk konseptlerinde bile heyecan verici süreçler ve eskizler paylaşarak ilham vericiydi. O sanat üzerinde çalışırken mimariyi biz de kırdık. İlk tartışmalarda makro düzeni, bina ve pencereleriyle ilgiliydi. Daha fazla görüntü alanı kullanılabilir hale geldikçe pencereler bir, iki veya üç sütuna nasıl uyum sağlar? Ne kadar küçülebilir veya esneyebilirler? Binanın maksimum boyutu ne olur? Pencereler ne kadar kayacak?
grid-auto-flow: dense kullanan bir duyarlı prototipin önizlemesini ve pencerelerin ızgara algoritması tarafından nasıl otomatik olarak yerleştirilebileceğini aşağıda görebilirsiniz. En boy oranı tablolarının, sanat eserlerini sergilemek için çok iyi bir performans sergilediğini, ancak pencerelerin büyüyüp, tek tip olmayan kullanılabilir alana küçülmesine izin verme ve kapsayıcı sorgularının gücünü gösterme fırsatı sağlamadığını hemen fark ettik.
Genel ızgara nispeten istikrarlı hale geldiğinde ve bina ile pencerelerinin yanıt verme hızıyla ilgili bir yön duygusu aktardıktan sonra tek bir pencereye odaklanabildik. Bazı pencereler, ızgaradaki diğer pencerelere göre daha fazla uzatıldı, küçüldü, sıkıldı, büyüdü ve yeniden şekillendi.
Her pencerenin belirli bir miktarda yeniden boyutlandırma türbülans göstermesi gerekir. Aşağıda, türbülansa duyarlılığını ve her bir etkileşimli pencerenin ne kadar ayarlama bekleyebileceğimizi gösteren bir pencere prototipi verilmiştir.
Model sayfalarıyla pencere animasyonu
Bazı pencerelerde, deneyime fazladan etkileşim kazandırmak için animasyonlar bulunur. Animasyonlar Photoshop'ta kare kare elle çizilir. Her kare dışa aktarılır, bu model sayfası oluşturma aracı ile bir model sayfasına dönüştürülür, ardından Squoosh ile optimize edilir. Ardından CSS animasyonu, aşağıdaki örnekte gösterildiği gibi background-position-x ve animation-timing-function öğelerini kullanır.
.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%; }
}
Altıncı günün domuz kumbarası gibi bazı animasyonlar adım tabanlı CSS animasyonlarıydı.
Bu etkiyi, steps() kullanan benzer bir teknikle elde ettik. Aradaki fark animasyon karelerinin arka plan konumları yerine CSS dönüşüm konumları olmasıydı.
CSS maskeleme
Bazı pencereler benzersiz şekillere sahipti. Ölçeklenebilir, benzersiz şekilli ve uyarlanabilir pencereler oluşturmak için maske ve aspect-ratio kullandık.
Sekizinci pencere için bu olan bir maske oluşturmak için bazı klasik Photoshop becerilerine ve web'deki maskelerin nasıl çalıştığına dair biraz bilgiye sahip olunması gerekiyordu. Sekizinci gün için zaman aralığına bakalım.
Maske olabilmesi için iç kısımdaki dört yapraklı yonca şeklindeki şekil kendi şekli olarak izole edilip beyaz renkle doldurulmalıdır. Beyaz, CSS'ye hangi içeriğin kalacağını, beyaz dışındaki her şeyin kalmayacağını bildirir. Photoshop'ta pencerenin içi seçildi, 1 piksel düzeltildi (takma ad sorunlarını kaldırmak için), ardından beyazla dolduruldu ve pencere çerçevesiyle aynı yükseklikte ve genişlikte dışa aktarıldı. Bu sayede çerçeve ve maske doğrudan üst üste yerleştirilerek çerçeve içindeki iç içerik beklendiği gibi gösterilebilir.
İşlem tamamlandığında, pencerenin içeriği değiştirilebilir ve her zaman özel çerçeve içinde kalacak şekilde görünür. Aşağıdaki resimde, farklı bir arka plan gradyanı ve ışığa uygulanmış parlaklık CSS filtresi uygulanmış olarak pencerenin koyu mod sürümü gösterilmektedir.
Maskeleme, duyarlı kapsayıcı sorgu tabanlı pencereleri de destekler. Dokuzuncu pencerede, pencere daha dar bir boyuta gelene kadar maskenin arkasına gizlenmiş bir karakter var. Alice, kullanıcının resmi kare dışına ayarlayamaması için karakterin tamamını bizim için tamamladı. Karakter pencere içinde maskeleniyor ama bitkiler aynı şekilde tasarlanmamış. Bu yüzden ele aldığımız bir diğer zorluk da maskelenmiş öğeleri maskelenmemiş katmanlarla katmanlandırmak ve hepsinin birlikte iyi ölçeklendiğinden emin olmaktı.
Aşağıdaki resimde, penceredeki ve karakterdeki maske olmadan nasıl göründüğü gösterilmektedir.
Sanatla uğraşmak
Ayşe, görselin doğruluğunu korumak ve yüksek çözünürlüklü ekranların bulanık bir kullanıcı deneyimi yaşamamasını sağlamak için 3x piksel oranında çalıştı. Plan, imgix'i kullanarak sunucularında optimize edilmiş resimler ve biçimler sunmaktı, ancak Squoosh aracıyla manuel düzenleme yapmanın bize% 50 veya daha fazla tasarruf edebileceğini gördük.
Resimde, özellikle fırça darbesi ve Ayşe'nin kullandığı şeffaf pürüzlü kenar stili gibi sıkıştırma için benzersiz zorluklar var. Photoshop ile dışa aktarılmış her 3 png resmi daha küçük boyutlu bir png, webp ve avif olarak Squoosh'u seçtik. Her dosya türü kendi özel sıkıştırma yeteneklerine sahiptir ve bazı genel optimizasyon ayarlarının bulunması için 50'den fazla resim sıkıştırılması gerekmiştir.
Optimize edilmesi gereken 200'den fazla resimle Squoosh KSA kritik bir hale geldi ve tüm bunları manuel olarak yapmak günler alırdı. Ortak optimizasyon ayarlarını edindikten sonra, bunları komut satırı talimatları olarak sağladık ve PNG resim klasörlerinin tamamını WebP ve AVIF sıkıştırılmış eşdeğerlerine toplu olarak işledi.
Kullanılan örnek bir AVIF CLI squoosh komutunu burada görebilirsiniz:
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
Depoya eklenen optimize edilmiş posterle, bunları HTML'den yüklemeye başlayabiliriz:
<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>
Resim kaynak kodunun yazılması tekrarlandığı için resimleri tek satır kodla yerleştirmek için bir Astro bileşeni geliştirdik.
<Pic filename="day1/inner-frame" role="presentation" />
Ekran okuyucu ve klavye kullanıcıları
Designcember'ın deneyiminin büyük kısmı sanat eserleri ve etkileşimli pencerelerden geçiyor. Klavye kullanıcılarının siteyi kullanıp pencerelere göz atabilmesi ve ekran okuyucu kullanıcılarının hoş bir anlatım deneyimi yaşaması bizim için önemliydi.
Örneğin, resimleri yerleştirirken ekran okuyucular için görseli "sunum" olarak işaretlemek üzere role="presentation" kodunu kullandık. 5 ile 12 arasında bozuk alt açıklamadan oluşan kullanıcı deneyiminin kötü bir deneyim olacağını düşündük. Bu nedenle, görselleri sunum olarak işaretledik ve genel bir pencere açıklaması sağladık. Ekran okuyucuda pencereler arasında gezinmek, sitenin paylaşmak istediği tuhaf ve eğlenceli içeriği sunmaya yardımcı olacağını umduğumuz hoş bir anlatım hissi yaratıyor.
Aşağıdaki videoda klavye deneyimi demosu gösterilmektedir. Sekme, Enter, Boşluk ve Escape tuşları, odağı pencere pop-up'ları ile pencereler arasında düzenlemek için kullanılır.
Ekran okuyucu deneyiminde, içeriğin anlaşılır olmasını sağlayan özel ARIA özellikleri bulunur. Örneğin, günlerin bağlantılarında yalnızca "bir" veya "iki" yazar, ancak bazı ARIA eklendiğinde "Birinci Gün" ve "İkinci Gün" olarak duyurulur. Ayrıca, tüm resimler tek bir etikette özetlendiği için her pencerenin bir açıklaması vardır.
Astro, statik öncelikli, bileşen odaklı site oluşturucu
Astro, ekibin sitede birlikte çalışmasını kolaylaştırdı. Bileşen modeli hem Angular hem de React geliştiricileri tarafından biliniyordu. Kapsamlı sınıf adı stili sistemi ise her geliştiricinin bir pencere üzerindeki çalışmasının başka biriyle çakışmayacağını bilmesini sağladı.
Bileşen olarak gün sayısı
Her gün, bir derleme zamanı veri deposundan durum bilgisi getiren bir bileşendi. Böylece HTML tarayıcıya ulaşmadan önce şablon mantığını çalıştırabiliriz. Etkin olmayan günlerde pop-up olmadığından, mantık, o gün için ipucunun gösterilip gösterilmeyeceğini belirler.
Derlemeler saatte bir çalıştırılır ve derleme zamanı veri deposu, derleme sunucusu gece yarısını geçtiği yeni bir günün kilidini açar. Bu kendi kendini güncellenen ve kendine yeten küçük sistemler, sitenin güncel kalmasını sağlar.
Kapsamlı stiller ve Açık Teklifler
Astro, bileşen modelinin içinde yazılan kapsam stilleri sayesinde iş yükünün birçok ekip üyesi arasında dağıtılmasını kolaylaştırdı ve Open Props kullanımını da eğlenceli hale getirdi. Open Props normalize.css stilleri, uyarlanabilir (açık ve koyu) temanın yanı sıra paragraflar ve başlıklar gibi içeriği hazırlamaya yardımcı olması açısından kullanışlı oldu.
Astro'yu ilk kullanmaya başlayanlardan biriyken, PostCSS'de bazı sorunlarla karşılaştık. Örneğin, çok fazla derleme sorunu nedeniyle en yeni Astro sürümüne güncelleme yapamadık. Burada, derleme ve geliştirici iş akışlarını optimize etmeye daha fazla zaman harcanabilir.
Esnek container'lar
Bazı pencereler büyüyüp küçülür. Bu sayede, eserlerini korumak için en boy oranı korunur. Kapsayıcı sorgularıyla bileşen tabanlı mimarinin gücünü göstermek için başka pencerelerden yararlandık. Kapsayıcı sorguları, pencerelerin kendi duyarlı stil bilgilerine sahip olabileceği ve kendi boyutlarına göre yeniden ayarlanabileceği anlamına geliyordu. Bazı pencereler daralarak genişemek zorunda kalmıştı ve içlerindeki medyanın boyutunu ve bu medyanın yerleşimini ayarlamak gerekiyordu.
Pencereler için daha fazla yer açıldıkça, pencerenin boyutunu veya alt öğelerini bu pencereye uyacak şekilde uyarlayabiliriz. Uyarlanabilir pencereleri karşılamak için kapsayıcı sorgularının sergilemesi eğlenceli olmakla kalmayıp belirli düzenlerin düzenlenmesini de önemli ölçüde basitleştirmesi gerektiği ortaya çıktı.
.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;
}
}
Bu yaklaşım, en boy oranını korumaktan farklıdır. Daha fazla kontrol ve fırsat sunar. Belli bir boyuta ulaştığında birçok çocuk yeni bir düzene uyum sağlamak için kayıyor.
Kapsayıcı sorguları, blok yönü (dikey) kapsama alanını desteklememize de olanak tanıdı. Böylece, bir pencere büyüdükçe, pencere stilini uygun şekilde sığacak şekilde düzenleyebildik. Bu, bağımsız olarak kullandığımız yüksekliğe dayalı sorgularda ve genişliğe dayalı sorgularda görülür:
.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);
}
}
Sanat küçük boyutlarda gittikçe kalabalıklaşıp geniş boyutlarda daha fazla boşalmaya başladığından ayrıntıları göstermek ve gizlemek için de kapsayıcı sorguları kullandık. Dokuzuncu pencere, bu konunun ortaya çıktığı noktaya güzel bir örnek:
Tarayıcılar arası destek
Özellikle kapsayıcı sorguları gibi deneysel API'lerde, tarayıcılar arası mükemmel bir deneyim oluşturmak üzere mükemmel bir çoklu dolguya ihtiyacımız var. Ekibimize bir çağrı gönderdik ve Surma yeni bir container sorgusu çoklu dolgusu için derlemeye öncülük etti. Çoklu dolgu; ResizeObserver, MutationObserver ve CSS :is() işlevini kullanır. Bu nedenle, tüm modern tarayıcılar çoklu doldurmayı, özellikle sürüm 88'den Chrome ve Edge'i, sürüm 78'den Firefox'u ve sürüm 14'ten Safari'yi destekler. Çoklu dolguyu kullanmak, aşağıdaki söz diziminden herhangi birine olanak tanır:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Koyu mod
Designcember web sitesi için gerekli olan son bir dokunuş, güzel ve koyu bir temaydı. Mükemmel bir koyu mod deneyimi oluşturma konusunda aktif bir katılımcı olmak için sanat eserinden nasıl yararlanabileceğinizi göstermek istedik. Bunun için her bir pencerenin kendi arka plan stillerini programatik olarak ayarladık ve pencere resmini oluştururken mümkün olduğunca çok CSS kullandık. Arka planların çoğu CSS gradyanlarıydı, böylece renk değerlerinin ayarlanması daha kolay olurdu. Ardından bu resmi bunların üzerine yerleştirdik.
Diğer Paskalya yumurtaları
Kişisel dokunuşlar
Siteye daha fazla kişilik katmak için sayfaya birkaç kişisel dokunuş ekledik. Bunlardan ilki, ekibimizin ilham verdiği karakterlerin kadrosuydu. Ayrıca, etkin olmayan günlerde nostaljik bir imleç kullandık ve site simgesi stilini değiştirdik.
İşlevsel dokunuşlar
Diğer işlevlerden biri, binanın tepesinde bir kuşun durduğu "Bugüne Atla" işlevi. Bu kuşu tıkladığınızda veya enter tuşuna bastığınızda sayfada ayın o gününe yönlendirilirsiniz. Böylece, en yeni özelliklere hızlı bir şekilde erişebilirsiniz.
Designcember.com'un ayrıca özel bir baskı stil sayfası da var.8,5 inç x 11 inç boyutlarındaki kağıtlarda en iyi performansı gösteren bu resmi kullanarak, takvimi kendiniz bastırabilir ve yıl boyunca kutlama yapabilirsiniz.
Sonuç olarak, Aralık ayı boyunca kullanıcı arayüzü gelişimini kutlamak amacıyla eğlenceli ve ilginç bir modern web deneyimi oluşturmak için bir sürü emek harcandı. Keyif aldığınızı umuyoruz!
