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 polyfill yayınladık ve daha pek çok şey yaptık.
Hayal gücünü kullanarak başlama
Designcember takvim sitesinin amacı, Aralık ayı boyunca öne çıkarmak istediğimiz tüm çalışmaların bir vitrini olmak ve aynı zamanda bir demo sitesi gibi davranmaktı. Ç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 aralık bir günü (ve 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örsel üzerinde çalışırken biz de mimari üzerinde çalıştık. İlk görüşmelerde makro düzen, bina ve pencereleri ele alındı. 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 uzayabilir? 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, posterleri sergilemek için mükemmel bir performans göstermesine rağmen, pencerelerin eşit olmayan kullanılabilir alana genişleyip küçülmesine ve kapsayıcı sorgularının gücünü sergilemesine olanak tanımadığını kısa sürede 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 pencerenin belirli bir miktarda yeniden boyutlandırma çalkantısı ile başa çıkması gerekir. Aşağıda, türbülansa karşı duyarlılığını gösteren bir pencerenin prototipi verilmiştir. Bu prototip, her etkileşimli pencereden ne kadar ayarlama bekleyebileceğimizi gösterir.
Sprite sayfaları içeren pencere animasyonu
Bazı pencerelerde, deneyime ek etkileşim kazandıran 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, ana 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 pencereye bakalım.
Maske haline getirmek için içteki dört yapraklı yonca şeklindeki şeklin kendi şekli olarak izole edilmesi ve beyaz renkle 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 birbirinin üzerine 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 degradesine ve ışığa uygulanmış bir parıltı CSS filtresine sahip pencerenin koyu mod versiyonu gösterilmektedir.
Maskeleme, duyarlı kapsayıcı sorgusuna dayalı pencereleri de destekler. Dokuzuncu pencerede, pencere daha dar bir boyuta gelene kadar maskenin arkasına gizlenmiş bir karakter vardır. Kullanıcının resmi çerçevenin dışına ayarlayamaması için Alice, karakterin tamamını bizim için tamamladı. Karakter pencere içinde maskelenmiş olsa da bitkiler maskelenmemiştir. Bu nedenle, maskelenmiş öğeleri maskesiz katmanlarla bir araya getirmek ve bunların birlikte iyi ölçeklendiğinden emin olmak da karşılaştığım bir diğer zorluktu.
Aşağıdaki resimde, pencere ve karakterde maske olmadan nasıl göründüğü gösterilmektedir.
Resmi sıkıştırma
İllüstrasyonun gerçekliğini korumak ve yüksek çözünürlüklü ekranlarda bulanık bir kullanıcı deneyimi yaşanmasını önlemek 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'u kullanarak sıkıştırmayı tercih ettik. Her dosya türünün kendine özel sıkıştırma özellikleri vardır. Bazı ortak optimizasyon ayarlarını bulmak için 50'den fazla görseli sıkıştırmamız gerekti.
Squoosh CLI, optimize edilecek 200'den fazla resim olduğunda çok önemli hale geldi. Tüm bunları manuel olarak yapmak günler sürebilirdi. 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 depoya eklendikten sonra 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ı, odağı pencere pop-up'ları ile pencereler arasında koordine etmek için kullanılır.
Ekran okuyucu deneyiminde, içeriğe netlik kazandıran ö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, önce statik, bileşen odaklı site oluşturucu
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 günler
Her gün bir bileşendi ve derleme zamanı veri deposundan durum bilgisi 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 zamanı 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, otomatik (açık ve koyu) temayla birlikte paragraf ve başlık gibi içerikleri düzenlemeye yardımcı oldu.
Astro'yu ilk kullananlar olarak PostCSS ile birkaç sorunla karşılaştık. Örneğin, çok fazla derleme sorunu nedeniyle en son Astro sürümüne güncelleme yapamadık. Burada, derleme ve geliştirici iş akışlarını optimize ederek daha fazla zaman harcanabilir.
Esnek kapsayıcılar
Bazı pencereler, resimlerini korumak için en boy oranını koruyarak büyür ve küçülür. Container sorgularıyla bileşen tabanlı mimarinin gücünü 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ıkça 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 boyuta ulaşan 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ı sorguların yanı sıra görülebilir:
.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, posterler küçük boyutlarda daha kalabalık ve büyük boyutlarda daha boş hale geldikçe ayrıntıları göstermek ve gizlemek için kapsayıcı sorguları 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 kullanı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ı olarak ayarladık ve pencere resmini oluştururken mantıklı olan kadar 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 karakterlerden oluşan oyuncu kadrosu. Ayrıca, etkin olmayan günlerde eski tarz bir imleç ekledik ve simge stiliyle oynadık.
İşlevsel dokunuşlar
Ek işlevsel dokunuşlardan biri, binanın tepesinde oturan bir kuşun yer aldığı "Bugüne Atla" işlevidir. Bu kuşu tıkladığınızda veya Enter tuşuna bastığınızda sayfanın aşağısına, ayın mevcut gününe atlanırsınız. Böylece en son lansmanlara hızlıca ulaşabilirsiniz.
Designcember.com'da, takvimi kendiniz yazdırıp yıl boyunca yeni yıl ruhunu yaşamanız için 8,5 inç x 11 inç kağıtta en iyi sonucu veren belirli bir resmi sunduğumuz özel bir baskı stil sayfası da vardır.
Aralık ayı boyunca kullanıcı arayüzü geliştirmelerini kutlamak için eğlenceli ve ilginç bir modern web deneyimi oluşturmak için çok çalıştık. Keyifle izlediğinizi umuyoruz.