Bina Tasarım Ekibi

Designcember'ın yıl sonu takvimi tarzı deneyimini oluşturmak için kullanılan süreç ve araçlara göz atın.

Adam Argyle
Una Kravets

Aralık ayının ve geri sayım yapıp kutlama yapmak için kullanılan birçok takvimin ruhuna uygun olarak, topluluktan ve Chrome Ekibi'nden gelen web içeriklerini öne çıkarmak istedik. Her gün, kullanıcı arayüzü geliştirme ve tasarımla ilgili bir içeriği öne çıkardık. Toplamda 31 öne çıkan içerik arasında 26 yeni demo sitesi, araç, duyuru, podcast, video, makale ve örnek olay vardı.

Deneyimin tamamını designcember.web.app adresinde görebilirsiniz.

Designcember sitesi.

Genel Bakış

Amacımız, mümkün olduğunca az bayt kullanarak erişilebilir, eğlenceli, modern ve duyarlı bir web deneyimi sunmaktı. Kapsayıcı sorguları gibi yeni duyarlı API'leri vurgulamak ve tasarıma odaklanan, öğe açısından zengin bir web sitesinde koyu modun güzel bir örneğini göstermek 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 gönderdik ve daha fazlasını yaptık.

Eğlenceli bir başlangıç

Designcember takvim sitesi, Aralık ayı boyunca öne çıkarmak istediğimiz tüm çalışmaları sergilemek ve aynı zamanda bir demo sitesi gibi işlev görmek üzere tasarlandı. Daha uzun ve dar ya da daha kısa ve geniş olabilen, çerçeve içinde yeniden düzenlenebilen pencerelere sahip duyarlı bir apartman binası inşa etmeye karar verdik. Her pencere 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.

Designcember sayfasının iskeletinin taslakları.

Aylin, süreçleri ve ilk konsept aşamasında bile heyecan verici olan taslakları paylaşarak ilham verici bir şekilde çalıştı. Sanatçı, sanat eseri ü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ı kullanılabilir hale geldiğinde pencereler bir, iki veya üç sütuna nasıl uyum sağlar? Ne kadar küçülebilir veya genişleyebilirler? Binanın maksimum boyutu ne olurdu? Pencereler ne kadar kayar?

grid-auto-flow: dense kullanılarak oluşturulan duyarlı bir prototipin önizlemesini aşağıda bulabilirsiniz. Bu önizlemede, pencerelerin ızgara algoritması tarafından nasıl otomatik olarak yerleştirilebileceği gösterilmektedir. En-boy oranı ızgaralarının, sanat eserlerini sergilemek için mükemmel bir yöntem olmasına rağmen pencerelerin tek tip olmayan kullanılabilir alanda büyüyüp küçülmesine ve kapsayıcı sorgularının gücünü göstermesine olanak tanımadığını kısa sürede fark ettik.

Bu tel kafesin farklı ekran boyutlarına nasıl yanıt verdiğini gösteren animasyon.
CodePen'deki bu demoya göz atın.

Genel ızgara nispeten sabit hale gelip binanın ve pencerelerinin duyarlılığıyla ilgili bir yön duygusu oluşturduktan sonra tek bir pencereye odaklanabildik. Bazı pencereler, ızgaradaki diğer pencerelere kıyasla daha fazla gerildi, küçüldü, sıkıştı, büyüdü ve yeniden oluşturuldu.

Pencerelerin farklı kesme noktalarında nasıl göründüğünü gösteren tel kafesler.

Her pencerenin belirli bir yeniden boyutlandırma dalgalanmasıyla başa çıkması gerekir. Aşağıda, türbülansa karşı duyarlılığını gösteren bir pencere prototipi yer almaktadır. Bu prototip, her etkileşimli pencerenin ne kadar ayarlanabileceğini göstermektedir.

Sprite sayfalarıyla pencere animasyonu

Bazı pencerelerde, deneyime ekstra 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 Squoosh ile optimize edilir. CSS animasyonu daha sonra aşağıdaki örnekte gösterildiği gibi background-position-x ve animation-timing-function 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%; }
}

Birinci günün penceresini gösteren animasyon.

Altıncı günün kumbara animasyonu gibi bazı animasyonlar, adım tabanlı CSS animasyonlarıydı. Bu efekti benzer bir teknikle, steps() kullanarak elde ettik. Aradaki fark, anahtar karelerin arka plan konumları yerine CSS dönüştürme konumları olmasıdır.

CSS maskeleme

Bazı pencereler benzersiz şekillere sahipti. Ölçeklenebilir, benzersiz şekilli ve uyarlanabilir bir pencere oluşturmak için maskeler ve aspect-ratio kullandık.

Sekizinci pencere için oluşturulan bu maske gibi bir maske oluşturmak için klasik Photoshop becerilerinin yanı sıra web'deki maskelerin nasıl çalıştığı hakkında biraz bilgiye ihtiyaç duyuldu. Sekizinci günün penceresine bakalım.

Sekizinci günün penceresi.

Maske olması için içteki dört yapraklı yonca şeklinin kendi başına bir şekil olarak ayrılması ve beyaz renkle doldurulması gerekir. Beyaz renk, CSS'ye hangi içeriğin kalacağını, beyaz alanın dışındaki her şeyin ise kalmayacağını bildirir. Photoshop'ta pencerenin içi seçildi, 1 piksel yumuşatıldı (kenar yumuşatma sorunlarını gidermek için), ardından beyazla dolduruldu ve pencere çerçevesiyle aynı yükseklik ve genişlikte dışa aktarıldı. Bu şekilde, çerçeve ve maske doğrudan birbirinin üzerine yerleştirilebilir ve çerçevedeki iç içerik beklendiği gibi gösterilir.

Yonca maskesi resmi

İşlem tamamlandıktan sonra pencerenin içeriği değiştirilebilir ve her zaman özel çerçeve içinde kalır. Aşağıdaki resimde, pencerenin koyu mod sürümü gösterilmektedir. Bu sürümde farklı bir arka plan gradyanı ve ışığa uygulanmış bir ışıma CSS filtresi bulunmaktadır.

Koyu modda sekizinci günün penceresi.

Maskeleme, duyarlı kapsayıcı sorgusuna dayalı pencereleri de destekler. Dokuzuncu pencerede, pencere daha dar bir boyuta gelene kadar maskenin arkasında gizlenmiş bir karakter var. Kullanıcının resmi çerçeve dışına taşıyamaması için Alice, karakteri bizim için tamamladı. Karakter pencerede maskelenmiş ancak bitkiler maskelenmemiş. Bu nedenle, maskelenmiş öğeleri maskelenmemiş katmanlarla katmanlama ve hepsinin birlikte iyi ölçeklenmesini sağlama konusunda zorluk yaşadık.

Aşağıdaki resimde, pencere ve karakterde maske olmadan nasıl göründüğü gösterilmektedir.

Maskesiz dokuzuncu pencerenin resmi.

Resmi sıkıştırma

Alice, çizimin doğruluğunu korumak ve yüksek çözünürlüklü ekranlarda bulanık bir kullanıcı deneyimi yaşanmasını önlemek için 3 kat piksel oranıyla çalıştı. Planımız imgix'i kullanıp sunucularında optimize edilmiş resimler ve biçimler sunmaktı ancak Squoosh aracıyla manuel olarak ince ayar yapmanın% 50 veya daha fazla tasarruf sağlayabileceğini gördük.

Resimleri sıkıştırmak için Squoosh'u kullanma.

İllüstrasyon, özellikle Alice'in kullandığı fırça darbesi ve şeffaf pürüzlü kenar stili nedeniyle sıkıştırma konusunda benzersiz zorluklar içerir. Photoshop'tan dışa aktarılan her 3x PNG resmini daha küçük bir PNG, WebP ve AVIF'ye dönüştürmeyi tercih ettik. Her dosya türünün kendine özgü sıkıştırma özellikleri vardır ve bazı ortak optimizasyon ayarlarını bulmak için 50'den fazla resim sıkıştırılması gerekti.

Optimize edilecek 200'den fazla resim olduğundan Squoosh CLI çok önemli bir araç haline geldi. Tüm bu resimleri manuel olarak optimize etmek günler sürerdi. 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ış karşılıklarına dönüştürmek için toplu işleme kullandık.

Kullanılan örnek AVIF CLI squoosh komutunu aşağıda bulabilirsiniz:

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ş resimlerle 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 tekrarlayıcı bir işlem olduğundan, resimleri tek bir kod satırıyla 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'daki deneyimin büyük bir kısmı sanat ve etkileşimli pencereler aracılığıyla sağlanır. Klavyeyle siteyi kullanabilen ve pencerelere göz atabilen kullanıcıların yanı sıra ekran okuyucu kullanıcılarının da güzel bir anlatım deneyimi yaşamasını istedik.

Örneğin, resimleri yerleştirirken ekran okuyucular için resmi sunum amaçlı olarak işaretlemek üzere role="presentation" kullandık. 5 ila 12 arasında parçalanmış alt açıklamasının kötü bir kullanıcı deneyimi olacağını düşündük. Bu nedenle, resimleri sunum amaçlı olarak işaretledik ve genel bir pencere anlatımı sağladık. Ekran okuyucuda pencereler arasında geçiş yaparken güzel bir anlatı hissi oluşuyor. Bu hissin, sitenin paylaşmak istediği eğlenceli ve fantastik atmosferi yansıtmasına yardımcı olacağını umuyoruz.

Aşağıdaki videoda klavye deneyiminin 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ğe netlik kazandıran özel ARIA özellikleri bulunur. Örneğin, günlerin bağlantılarında yalnızca "bir" veya "iki" yazıyor ancak bazı ARIA'lar eklendiğinde "Birinci gün" ve "İkinci gün" olarak duyuruluyor. Ayrıca, tüm resimler tek bir etikette özetlenir. Böylece her pencerenin bir açıklaması olur.

Astro, statik öncelikli, 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ştiricileri tarafından biliniyordu. Kapsamlı sınıf adı stil sistemi ise her geliştiricinin bir pencere üzerinde yaptığı çalışmanın başka bir geliştiricinin çalışmasıyla çakışmayacağını bilmesine yardımcı oluyordu.

Günler bileşen olarak

Her gün, derleme zamanı veri deposundan durumu getiren bir bileşendi. Bu sayede, HTML tarayıcıya ulaşmadan önce şablon mantığını çalıştırabildik. Mantık, günün ipucunun gösterilip gösterilmeyeceğini belirler. Etkin olmayan günlerde pop-up gösterilmez.

Derlemeler her saat çalıştırılır ve derleme sunucusu gece yarısını geçtiğinde derleme süresi veri deposunda yeni bir gün başlar. Bu kendi kendini güncelleyen ve kendi kendine yeten küçük sistemler, siteyi güncel tutar.

Kapsamlı stiller ve Open Props

Astro, bileşen modelinde yazılan stilleri kapsamlandırır. Bu sayede iş yükünün birçok ekip üyesi arasında dağıtılması kolaylaşır ve Open Props'un kullanımı eğlenceli hale gelir. Open Props normalize.css stilleri, uyarlanabilir (açık ve koyu) temada işe yaradığı gibi paragraflar ve başlıklar gibi içeriklerin düzenlenmesine de yardımcı oldu.

Astro'yu ilk kullananlardan biri olarak PostCSS ile ilgili 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 daha fazla zaman harcanarak yapı ve geliştirici iş akışları optimize edilebilir.

Esnek kapsayıcılar

Bazı pencereler, sanat eserlerini 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 bilgisine sahip olabileceği ve kendi boyutlarına göre yeniden ayarlanabileceği anlamına geliyordu. Bazı pencereler dar halden geniş hale geçti ve içindeki medyanın boyutunun yanı sıra yerleşiminin de ayarlanması gerekti.

Pencerelerin daha fazla alan elde ettikçe nasıl değiştiğini gösteren bir demo.

Bir pencere için daha fazla alan kullanılabilir hale geldiğinde, pencerenin boyutunu veya alt öğelerini sığacak şekilde ayarlayabiliriz. Uyarlanabilir pencereleri doldurmak için kapsayıcı sorgularının yalnızca gösterilmesi eğlenceli olmakla kalmayıp gerekli olduğu ve belirli düzenlerin düzenlenmesini önemli ö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. Çocuklar, belirli bir boyuta ulaştıklarında yeni bir düzene uyum sağlamak için hareket etmeye başlar.

Kapsayıcı sorguları, blok yönlü (dikey) kapsama desteklememize de olanak tanıdı. Böylece, pencere uzadıkça stillerini uygun şekilde ayarlayabildik. Bu durum, tek başına kullandığımız ve genişliğe dayalı sorgulara ek olarak yüksekliğe dayalı sorgularda görülmektedir:

.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, küçük boyutlarda resim giderek kalabalıklaştığı, büyük boyutlarda ise boşaldığı için ayrıntıları göstermek ve gizlemek için kapsayıcı sorgular kullandık. Bu durumun devreye girdiği yerlere örnek olarak dokuzuncu pencereyi verebiliriz:

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 istiyorsak harika bir polyfill'e ihtiyacımız var. Ekibimize çağrı gönderdik ve Surma, yeni bir kapsayıcı sorgusu polyfill'i oluşturma sürecine ö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 88. sürümden, Firefox 78. sürümden ve Safari 14. sürümden itibaren desteklenir. Polyfill kullanıldığında aşağıdaki söz dizimlerinden herhangi biri kullanılabilir:

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

Koyu mod

Designcember sitesinin açık ve koyu mod sürümleri yan yana gösteriliyor.

Designcember web sitesi için son bir dokunuş olarak güzel bir koyu tema ekledik. Sanatı kullanarak nasıl harika bir koyu mod deneyimi oluşturabileceğinizi göstermek istedik. Bunun için her pencerenin arka plan stillerini programatik olarak ayarladık ve pencere resmi oluştururken anlamlı olacak kadar CSS kullandık. Arka planların çoğu CSS renk geçişiydi. Bu sayede renk değerlerini ayarlamak daha kolay oluyordu. Ardından, bu görsellerin üzerine sanat eserlerini yerleştirdik.

Diğer Paskalya yumurtaları

Kişisel dokunuşlar

Siteye daha fazla kişilik katmak için sayfaya birkaç kişisel dokunuş ekledik. İlk olarak, ekibimizden ilham alınarak oluşturulan karakterler. Ayrıca, etkin olunmayan günlerde geçmişe gönderme yapan bir imleç ekledik ve favicon stilini değiştirdik.

Özel imleç stilleri ve favicon seçenekleri

İşlevsel dokunuşlar

Ek işlevsel dokunuşlardan biri de binanın tepesinde oturan bir kuşla birlikte "Bugüne Git" işlevidir. Bu kuşu tıkladığınızda veya Enter tuşuna bastığınızda sayfada ayın geçerli gününe yönlendirilirsiniz. Böylece en son lansmanlara hızlıca ulaşabilirsiniz.

Designcember web sitesinde, takvimi kendiniz yazdırıp yıl boyunca kutlama havasında kalabilmeniz için 8,5" x 11" boyutundaki kağıda en uygun olan resmi sunduğumuz özel bir yazdırma stil sayfası da bulunur.

Takvim tasarımının poster boyutunda çıktısı.
Una, takvimin büyük bir baskısını tutuyor.

Sonuç olarak, aralık ayı boyunca kullanıcı arayüzü geliştirmeyi kutlamak için eğlenceli, tuhaf ve modern bir web deneyimi oluşturmak üzere çok fazla çalışma yapıldı. Keyifli bir deneyim yaşadığınızı umuyoruz.

Açıklamalar ve görsel notlar içeren takvim bölümleri