Designcember'in yeni yıl takvimi tarzındaki deneyimini oluşturmak için kullanılan süreç ve araçlara göz atın.
Aralık ayının ruhuna ve kullanıcıların geri saymak ve yeni yılı kutlamak için kullandığı birçok takvime uygun olarak, topluluğun ve Chrome Ekibi'nin web içeriklerini öne çıkarmak istedik. Her gün kullanıcı arayüzü geliştirme ve tasarımla ilgili bir içerik öne çıkardık. Toplamda 31 öne çıkan içerik yayınladık. Bu içerikler arasında 26 yeni demo site, araç, duyuru, podcast, video, makale ve örnek olay yer aldı.
Deneyimin tamamını designcember.com adresinde görebilirsiniz.
Genel Bakış
Hedefimiz, mümkün olduğunca az bayt kullanarak erişilebilir, ilgi çekici, modern ve duyarlı bir web deneyimi sunmaktı. Kapsayıcı sorguları gibi yeni duyarlı API'leri öne çıkarmak ve tasarım odaklı, öğe ağırlıklı bir web sitesinde karanlık modun güzel bir örneğini eklemek istedik. Bunu başarmak için dosyaları sıkıştırdık, birden fazla biçim sunduk, statik site oluşturma için optimize edilmiş derleme araçları kullandık, yeni bir çoklu dolgu gönderdik ve daha fazlasını yaptık.
Hayal gücünü kullanarak başlama
Designcember takvim sitesi fikri, Aralık ayı boyunca öne çıkarmak istediğimiz tüm çalışmalar için bir vitrin işlevi görürken bir yandan da bir demo site gibi hareket etmekti. Çerçeve içinde kendilerini yeniden düzenleyen pencerelerle daha uzun ve daha dar ya da daha kısa ve daha geniş olabilen duyarlı bir apartman binası inşa etmeye karar verdik. Her pencere bir günü (dolayısıyla bir içerik parçasını) temsil ediyordu. Vizyonumuzu hayata geçirmek için illüstratör Alice Lee ile birlikte çalıştık.
Alice, ilk aşamalardaki kavramları bile heyecan verici olan süreçleri ve eskizlerini paylaşarak ilham veriyordu. O görseller üzerinde çalışırken biz de mimari üzerinde çalıştık. İlk görüşmelerde makro düzen, bina ve pencereleri ele aldık. Daha fazla görüntü alanı alanı kullanılabilir hale geldikçe pencereler bir, iki veya üç sütuna nasıl uyarlanır? Ne kadar küçülebilir veya esneyebilirler? Binanın maksimum boyutu ne olur? Pencereler ne kadar kaydırılır?
Aşağıda, grid-auto-flow: dense kullanan duyarlı bir prototipin önizlemesi verilmiştir. Bu önizlemede, pencerelerin ızgara algoritması tarafından nasıl otomatik olarak yerleştirilebileceği gösterilmektedir. En boy oranı ızgaralarının sanatı sergilemek için güzel bir performans gösterse de pencerelerin büyütülüp daralarak tek tip olmayan kullanılabilir bir alana dönüşmesine ve kapsayıcı sorgularının gücünü sergilemesine olanak tanımadığını fark ettik.
Genel ızgara nispeten kararlı hale geldikten ve binanın ve pencerelerinin duyarlılığıyla ilgili bir yön duygusu aktardıktan sonra tek bir pencereye odaklanabildik. Bazı pencereler, ızgaradaki diğer pencerelere kıyasla daha fazla uzadı, daraldı, sıkıştı, büyüdü ve yeniden oluşturuldu.
Her bir pencerenin, belirli miktarda yeniden boyutlandırma türbülansını ele alması gerekir. Aşağıda, türbülansa duyarlılığını gösteren ve her bir etkileşimli pencerenin ne kadar ayarlama yapmasını bekleyebileceğimizi gösteren bir pencere prototipi verilmiştir.
Sprite sayfaları içeren pencere animasyonu
Bazı pencerelerde, deneyime daha fazla etkileşim katmak için animasyonlar bulunur. Animasyonlar, Photoshop'ta kare kare elle çizilir. Her kare dışa aktarılır, bu spritesheet oluşturucu ile spritesheet'e dönüştürülür ve 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ı günlük kumbara gibi bazı animasyonlar, adıma dayalı CSS animasyonlarından oluşuyordu.
Bu efekti, steps() kullanarak benzer bir teknikle elde ettik. Tek fark, anahtar karelerin arka plan konumları yerine CSS dönüştürme konumları olmasıydı.
CSS maskeleme
Bazı pencereler benzersiz şekillere sahipti. Ölçeklenebilir, benzersiz şekilde biçimlendirilmiş ve uyarlanabilir bir pencere oluşturmak için maskeler ve aspect-ratio kullandık.
Sekizinci pencere için bu maske gibi bir maske oluşturmak için bazı klasik Photoshop becerilerinin yanı sıra web'deki maskelerin işleyiş şekli hakkında biraz bilgi sahibi olmak gerekiyordu. Sekizinci güne ait aralığa bakalım.
Maske olmak için, içteki dört yapraklı yonca tipi şeklin kendi şekli olarak izole edilmesi ve beyaz renkte doldurulması gerekir. Beyaz, CSS'ye hangi içeriğin kalacağını, beyazın dışındaki her şeyin ise kalmayacağını söyler. Photoshop'ta pencerenin içi seçildi, 1 piksel yumuşatıldı (kenarlık sorunlarını gidermek için), ardından beyazla dolduruldu ve pencere çerçevesiyle aynı yükseklik ve genişlikte dışa aktarıldı. Bu sayede çerçeve ve maske doğrudan üst üste yerleştirilebilir ve çerçeve içindeki iç içerik beklendiği gibi gösterilebilir.
Tamamlandığında, pencerenin içeriği değiştirilebilir ve her zaman özel çerçevenin içinde görünür. Aşağıdaki resimde, farklı bir arka plan gradyanı ve ışığa parlayan bir CSS filtresi uygulanmış olarak pencerenin koyu mod sürümü gösterilmektedir.
Maskeleme, kapsayıcı sorgu tabanlı duyarlı pencereleri de destekler. Dokuzuncu pencerede, pencere daha dar bir boyuta gelene kadar maskenin arkasına gizlenmiş bir karakter vardır. Alice, kullanıcının resmi kadrajın dışına düzenleyememesi için karakterin tamamını bizim için tamamladı. Karakter pencere içinde maskelenmiş olsa da bitkiler maskelenmemiştir. Bu nedenle, maskelenmiş öğeleri maskesiz katmanlarla katmanlaştırmak ve bunların birlikte iyi ölçeklendiğinden emin olmak da karşılaştığım bir diğer zorluktu.
Aşağıdaki resimde, pencerede ve karakterde maske olmadan nasıl göründüğü gösterilmektedir.
Sanat eserlerini sadeleştirenler
İllüstrasyonun gerçekliğini korumak ve yüksek çözünürlüklü ekranlarda bulanık bir kullanıcı deneyimi yaşanmamasını sağlamak için Alice 3x piksel oranında çalıştı. Plan, imgix'i kullanmak ve optimize edilmiş resimleri ve biçimleri sunucusunda yayınlamaktı ancak Squoosh aracıyla manuel olarak ayarlama yapmanın bize %50 veya daha fazla tasarruf sağlayabileceğini tespit ettik.
İllüstrasyonda, özellikle Alice'in kullandığı fırça darbesi ve şeffaf pürüzlü kenar stili olmak üzere sıkıştırma ile ilgili benzersiz zorluklar vardır. Photoshop'ta dışa aktarılan her 3x PNG resmini daha küçük bir PNG, webp ve avif biçiminde Squoosh'la sıkıştırmayı tercih ettik. Her dosya türünün kendi özel sıkıştırma yeteneği vardır ve yaygın bazı optimizasyon ayarlarını bulmak için 50'den fazla resmi sıkıştırmak gerekirdi.
Squoosh KSA, optimize edilecek 200'den fazla resimle kritik öneme sahip hale geldi. Bunların tümünü manuel olarak yapmak günler alırdı. Ortak optimizasyon ayarlarını belirledikten sonra bunları komut satırı talimatları olarak sağladık ve PNG resimlerinin bulunduğu klasörlerin tamamını WebP ve AVIF sıkıştırılmış eşdeğerlerine toplu olarak işledik.
Aşağıda, kullanılan bir AVIF CLI squoosh komutu örneği verilmiştir:
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
Optimize edilmiş posterler depoda kontrol edildiğinde 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 kodunu yazmak tekrarlı bir işlem olduğundan, resimleri tek satır kodla yerleştirmek için bir Astro bileşeni oluşturduk.
<Pic filename="day1/inner-frame" role="presentation" />
Ekran okuyucu ve klavye kullanıcıları
Designcember deneyiminin büyük bir kısmı sanat ve etkileşimli pencerelerden oluşur. Klavye kullanıcılarının siteyi kullanabilmesi ve pencerelere göz atabilmesi, ekran okuyucu kullanıcılarının ise keyifli bir seslendirilmiş deneyim yaşamaları bizim için önemliydi.
Örneğin, resimleri yerleştirirken ekran okuyucular için resmi sunum amaçlı olarak işaretlemek üzere role="presentation" kullandık. 5 ila 12 adet alt açıklamasının bölünmüş olduğu bir kullanıcı deneyiminin kötü olacağını düşündük. Bu nedenle, resimleri sunum amaçlı olarak işaretledik ve genel bir pencere anlatımı sağladık. Ekran okuyucularda pencereler arasında gezinirken güzel bir anlatım hissi oluşur. Bu, sitenin paylaşmak istediği eğlenceli ve keyifli atmosferi yansıtmaya yardımcı olur.
Aşağıdaki videoda klavye deneyiminin bir demosu gösterilmektedir. Sekme, enter, boşluk ve escape tuşları, pencere pop-up'ları ile pencereler arasında odaklanmayı koordine etmek için kullanılır.
Ekran okuyucu deneyiminde, içeriği netleştiren özel ARIA özellikleri bulunur. Örneğin, günlerin bağlantılarında yalnızca "bir" veya "iki" yazıyorsa ARIA eklendiğinde bu bağlantılar "Birinci gün" ve "İkinci gün" olarak okunur. Ayrıca, tüm resimler tek bir etikette özetlendiğinden her pencerenin bir açıklaması vardır.
Astro, öncelikli olarak statik, bileşen odaklı site oluşturma aracı
Astro, ekibin site üzerinde birlikte çalışmasını kolaylaştırdı. Bileşen modeli hem Angular hem de React geliştiricilerinin aşina olduğu bir modeldi. Kapsamlı sınıf adı stili sistemi ise her geliştiricinin bir pencerede yaptıklarının başka biriyle çakışmayacağını bilmesine yardımcı oldu.
Bileşen olarak geçirilen gün sayısı
Her gün bir bileşendi ve derleme zamanı veri deposundan durum bilgisini alıyordu. Bu sayede, HTML tarayıcıya ulaşmadan önce şablon mantığını çalıştırabildik. Etkin olmayan günlerde pop-up gösterilmediğinden, mantık, günün ipucu gösterilip gösterilmeyeceğini belirler.
Derlemeler her saat çalıştırılır ve derleme sunucusu gece yarısından sonra olduğunda derleme süresi veri deposu yeni bir günün kilidini açar. Kendi kendini güncelleyen ve kendi kendine yeten bu küçük sistemler, siteyi güncel tutar.
Kapsamlı stiller ve açık öğeler
Astro, bileşen modelinin içine yazılmış stilleri kapsar. Bu sayede iş yükünü birçok ekip üyesi arasında dağıtmak kolaylaştı ve Open Props'u kullanmak eğlenceli hale geldi. Open Props normalize.css stilleri, uyarlanabilir (açık ve koyu) temanın yanı sıra paragraf ve başlık gibi içeriklerin düzenlenmesine yardımcı olur.
Astro'nun ilk kullanıcılarından olarak PostCSS'de bazı sorunlarla karşılaştık. Örneğin, çok fazla derleme sorunu nedeniyle en son Astro sürümüne güncelleme yapamadık. Derleme ve geliştirici iş akışlarını optimize ederek buraya daha fazla zaman ayırabilirsiniz.
Esnek kapsayıcılar
Bazı pencereler, resimlerini korumak için en boy oranını koruyarak büyür ve küçülür. Bileşen tabanlı mimarinin gücünü, kapsayıcı sorgularıyla göstermek için başka pencereler de kullandı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 dardan genişe dönüştü ve bu pencerelerdeki medyanın boyutunun yanı sıra medyaların yerleşimi de ayarlanmalıdır.
Bir pencere için daha fazla alan açıldığında, pencerenin boyutunu veya alt öğelerini sığacak şekilde uyarlayabiliriz. Uyarlanabilir pencereleri karşılamak için kapsayıcı sorgularının yalnızca sergilenmesinin eğlenceli olmayacağı, aynı zamanda gerekli olduğu ve belirli düzenlerin düzenlenmesini büyük ölçüde basitleştirdiğ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 daha fazla fırsat sunar. Belirli bir boyutta, birçok çocuk yeni bir düzene uyum sağlamak için yer değiştirir.
Kapsayıcı sorguları, blok yönü (dikey) kapsamayı da desteklememize olanak tanıdı. Böylece, bir pencerenin uzunluğu arttıkça stillerini uygun şekilde ayarlayabildik. Bu durum, 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);
}
}
Ayrıca, çizimler daha küçük boyutlarda gittikçe daha kalabalık hale geldikçe ve geniş boyutlarda daha boş hale geldikçe ayrıntıları göstermek ve gizlemek için container sorgularını kullandık. Dokuzuncu pencere, bunun nasıl kullanıldığını gösteren mükemmel bir örnektir:
Tarayıcılar arası destek
Özellikle kapsayıcı sorguları gibi deneysel API'ler için harika bir modern tarayıcılar arası deneyim oluşturmak üzere mükemmel bir polyfill'e ihtiyacımız var. Ekibimize bir çağrı gönderdik ve Surma yeni bir kapsayıcı sorgu polyfill'i oluşturma çalışmalarına öncülük etti. Çoklu dolgu; ResizeObserver, MutationObserver ve CSS :is() işlevini temel alır. Bu nedenle, tüm modern tarayıcılar polyfill'i destekler. Özellikle Chrome ve Edge'in 88, Firefox'un 78 ve Safari'nin 14 sürümünden itibaren desteklenir. Polifill kullanılması aşağıdaki söz dizimlerinden herhangi birini kullanmanıza 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 son dokunuş olarak güzel bir koyu tema ekledik. Harika bir koyu mod deneyimi oluşturmak için sanatın nasıl kullanılabileceğini göstermek istedik. Bunun için her pencerenin arka plan stillerini programlı bir şekilde ayarladık ve pencere resmini oluştururken makul miktarda CSS kullandık. Arka planların çoğu CSS degradeleriydi. Böylece renk değerlerini ayarlamak daha kolay olurdu. Ardından, görselleri bunların üzerine yerleştirdik.
Diğer Paskalya yumurtaları
Kişisel dokunuşlar
Siteye daha fazla kişilik kazandırmak için sayfaya birkaç kişisel dokunuş ekledik. İlki, ekibimizin ilham verdiği karakter kadrosuydu. Ayrıca, etkin olmayan günlere eski tarz bir imleç ekledik ve simge stiliyle oynadık.
İşlevsel dokunuşlar
Ek işlevsel ayrıntılardan biri, binanın tepesinde bir kuş duran "Bugüne Atla" işlevi. Bu kuşu tıkladığınızda veya Enter tuşuna bastığınızda, sayfada ayın içinde bulunulan güne yönlendirilirsiniz. Böylece en son lansmanlara hızlı bir şekilde erişebilirsiniz.
Designcember.com'da, takvimi kendiniz yazdırıp yıl boyunca yeni yıl ruhunu yaşamanız için 8,5 x 11 inç kağıtta en iyi sonucu veren belirli bir resmi sunduğumuz özel bir baskı stil sayfası da vardır.
Sonuç olarak, kullanıcı arayüzü geliştirmeyi ay boyunca Aralık ayında kutlamak için eğlenceli ve tuhaf bir modern web deneyimi oluşturmak için çok fazla çalışma yapıldı. Keyifle izlediğinizi umuyoruz.
