LiftKit - Mükemmeliyetçiler için bir UI framework'ü

• Simetri ve oran sorunlarını çözen açık kaynaklı bir UI framework'ü; tüm öğeler altın orandan türetilen bir yapıya dayanır
• Buton, kart, giriş alanı gibi bileşenlerde görsel dengeyi ve ferahlık hissini otomatik olarak düzeltip doğal oranları korur
• Global scale factor temelinde alt piksel düzeyinde hassas oran hesaplamaları yaparak tutarlı bir uyum sağlar
• Modüler renk kontrol paneli ile gerçek zamanlı renk önizleme ve tema ayarı yapılabilir; tipografi, materyal ve ölçekleme gibi ayrıntılı ayarları destekler
• MVP aşamasında bile yüksek görsel kalite sunarak ilk tasarımın olgunluğunu artıran bir araç olarak öne çıkar

---

LiftKit'e genel bakış

• LiftKit, simetri sorunlarını çözen açık kaynaklı bir UI framework'üdür
  • Temel amacı, UI bileşenleri arasındaki görsel dengeyi otomatik olarak ayarlamaktır
  • “Extremely Early Access” aşamasındadır; erken ve deneysel bir sürümdür
• Framework içindeki tüm oranlar altın oran (golden ratio) temel alınarak türetilir; böylece margin, font boyutu, border radius gibi tüm öğeler uyumlu şekilde render edilir
• Tek bir global scale factor kullanarak oranları alt piksel hassasiyetinde hesaplar

Temel bileşenler ve özellikler

• Buton bileşeni, ikon eklendiğinde oluşan görsel padding dengesizliğini otomatik olarak düzeltir
  • Font boyutuna göre padding'i dinamik olarak ayarlayarak sağ-sol dengesini korur
• Kart bileşeni, içeriğin satır yüksekliğinden (line-height) kaynaklanan boşluk dengesizliğini düzeltmek için opticalCorrection özelliğini sunar
• Giriş alanı (Input), altın oran temelli aralık tasarımıyla “nefes alacak alanı olan” bir görünüm sunar

Oranlar ve görsel tatmin

• LiftKit, “oddly-satisfying” oranlar elde etmek için tek bir scale factor'den türetilen bir oran sistemi kullanır
• Tüm bileşenler alt piksel doğruluğuyla (subpixel accuracy) hesaplanarak ince görsel dengesizlikler en aza indirilir
• Bu yaklaşım, kullanıcıya tanımlaması zor olan “doğal ve uyumlu his” verir

Renk ve tema kontrolü

• LiftKit, modüler renk kontrol paneli (modular control panel) sunar
  • Çalışma sırasında dosyaya eklenerek gerçek zamanlı renk önizleme yapılabilir
  • İnce ton değişimlerinden güçlü renk taşmalarına kadar çeşitli ayarları destekler
• Renk dışında aşağıdaki öğeler de doğrudan CSS içinde ayarlanabilir
  • Typography: font ailesinin ötesine geçen ayrıntılı global tipografi kontrolü
  • Custom Materials: glass, flat, rubber gibi preset'ler üzerinden yeni materyaller üretme
  • Scaling: yalnızca metin değil, aralıklar dahil tüm öğelerin birlikte ölçeklenmesi
  • Component-specific configs: her bileşenin görünümünü bağımsız olarak ayarlama

İnce detaylar ve tasarım kalitesi

• LiftKit, MVP aşamasında bile yüksek görsel kalite sağlayacak şekilde tasarlanmıştır
  • “Make MVP’s that don’t look like MVP’s”
• Varsayılan olarak algısal olarak doğru aralıklar (perceptually accurate spacing) sunarak kullanıcının hissettiği dengeyi en üst düzeye çıkarır
• Bu ince detaylar, “açıklaması zor ama daha iyi görünen” sonuçlar üretir

[roxie]

Landing sayfasında öncesi-sonrası karşılaştırması var ama ikisi de güzel görünüyor ..

[heal9179]

Genelde altın orandan ziyade major second (1.125) kullanılmıyor mu..?

[GN⁺]

Hacker News yorumları

• Chrome tasarlanırken minimalizm temel ilkeydi
  Ekranların küçük olduğu dönemde dikey alanı azaltmak için çok zaman harcanmıştı
  Sekme şeridi, araç çubuğu ve başlık çubuğunun oranını altın oran diye anlatınca tartışmalar azalıyordu, ama aslında bunun altın oranla ilgisi yoktu
  Işık, renk, yuvarlatma, görsel yoğunluk gibi unsurlar çok daha önemli

  • En sevdiğim tasarım mem’lerinden biri, önce logoyu yapıp sonra da bunu “derin düşüncenin sonucu” gibi göstermek için üstüne altın oran geometrisi bindirmek
    Aslında biraz oynarsanız her şeyi altın orana uydurabilirsiniz. Bu tür şeyler özellikle ‘ruhsal’ hisleri seven insanlarda işe yarıyor
  • Eski Chrome’daki minimalizm gerçekten çok iyiydi
    Ekranlar büyüdü diye bugün de alanı boşa harcamak istemem
  • İronik biçimde, altın oran örneği verilen web sitelerinin tasarımı çoğu zaman karşılaştırılan örnekten daha kötü görünüyor
    Sonuçta bu biraz zevk meselesi gibi
  • “Dikey ritim”, “modüler ölçek” gibi kavramlar web’de neredeyse anlamsız batıl inançlar gibi duruyor
    Basılı işlerde faydalı olabilirler ama dijitalde okunabilirliği daha da bozuyorlar
    İkonları zorla aynı biçime sokmak ya da rengi kaldırmak da ayırt edilebilirliği düşürüyor
  • “Altın oran yolda karşılaştığımız bir arkadaştı” diye bir şaka da yapıldı

• Ben LiftKit’in yapımcısıyım
  Bu proje hâlâ çok erken aşamada ve tek başıma hobi olarak geliştiriyorum
  Açık kaynak ve ücretsiz → GitHub linki
  Geri bildirimlerin çoğu zaten Reddit başlığında tartışılıyor
  Şu anda önceliğim Radix primitives ile yeniden inşa etmek ve dokümantasyonu iyileştirmek
  Genel bakışı YouTube videosunda da görebilirsiniz

  • Projenin harika olduğunu düşünüyorum. Eleştiriler de profesyonel geri bildirim olduğu için aslında övgü sayılmalı
    Çoğu frontend geliştiricisinin hayalini kurduğu “kusursuz derecede tutarlı tasarım sistemi”ni gerçekten hayata geçirmiş olmanız etkileyici
  • Reddit’te 7 ay önce “component rendering bir sonraki öncelik” demişsiniz ama şimdi bundan hiç söz edilmiyor
    Kendi dokümantasyonunda component render edemeyen bir UI frameworke güvenmek zor
  • Fikir güzel ve ana sayfa da görsel olarak tatmin edici
    iOS uygulamasında altın oranı uygulamaya çalışmıştım; keşke yapım sürecini de paylaşsanız
  • Radix yerine Base UI veya React Ariaya da bakmanızı öneririm
  • Karşılaştırma görsellerinde rakip framework’ü bilerek düşük kontrastlı göstermek adil değil

• Öncesi/sonrası ekran görüntülerini gösterirken sürüklemeli kaydırıcı yerine butonla anında geçiş yapmak daha iyi olur
  Her tıklamada göz farkı doğrudan algılar
  İlgili referans: Andrei Herasimchuk’un Quora yanıtı

  • Yapımcı olarak ben de mevcut kaydırıcının dokunmatik ekranlarda berbat olduğunu düşünüyorum
    Sağa sola hareket ettirmeye çalışınca yukarı aşağı kayıyor. Geri bildirim için teşekkürler, bunu mutlaka düzelteceğim
  • Fotoğraf karşılaştırmaları için kaydırıcı standart bir çözüm ama sağ-sol etiketleri ekleyip tıklayınca orijinali kısa süreli göstermesi gibi iyileştirmeler yapılabilir
    Örnek video: LUTLab Viewer
  • Ben de ilk başta hangi tarafın LiftKit olduğunu karıştırdım
  • Bu biraz “Hangisi daha iyi görünüyor?” oyunu gibi hissettirdi
  • Her görsele “material-style” ve “liftkit” etiketleri koyup bunları kaydırıcı hareketine göre gizlerseniz daha net olur

• İlk başta bu sitenin parodi olduğunu sandım
  Gerçek olduğunu görünce şaşırdım; bileşenler merkezden kaymış gibi duruyor ve görsel ağırlık dengesiz hissettiriyordu

  • Ben de her seferinde ‘bu daha iyi’ diye düşündüm ama sonradan bunun hep önceki (before) taraf olduğunu fark ettim
  • Matematiksel olarak kusursuz oranlar her zaman güzel görünmez
    Pratikte birkaç piksel oynatmak gerekir ki göze doğal gelsin
  • Genel olarak bir şeyler kayık duruyor
  • 1.618 oranı gerçek tasarımda aralıklar için fazla büyük kalıyor

• “optical correction none/top” konusunda, büyük harf yüksekliğini gerçekten ölçerek mi hizalıyorsunuz, yoksa font metriklerini olduğu gibi mi kullanıyorsunuz, merak ediyorum
  Font içindeki sayısal değerlere güvenmek zor, çünkü gerçek glifler çoğu zaman o değerlere uymuyor
  Bu da font çalışmasının kâbusu hâline geliyor

• Tüm component’leri yalnızca görsel olarak gösteren bir UI frameworke güvenmek zor

  • Açılır menüye tıkladım ama ortada görsel bile yok
  • Gerçek CSS’i yayımlarsa insanlar kopyalayabilir diye belki de ‘gizli altın oran kodunu’ korumaya çalışıyordur
  • Ayrıca profesyonel yardım alması gerekiyor izlenimi de veriyor
  • Firefox’ta kaydırırken frame drop yaşanıyor
  • UI’nin doğrudan render edilmemesi ve React ya da Next.js’e bağımlı olması, bunu bir UI kit olarak uygunsuz hissettiriyor

• Fiyata baktım ama sadece “Contact Sales” vardı, ardından hesap makinesini kullanmak zorunda kaldım
  10 üst seviye sayfa + 5 alt sayfa girince $16,500 çıkınca şaşırdım

  • O, ajans hizmeti için hesap makinesi. LiftKit’in kendisi ücretsiz
    Forma “[e-mail]” ile mesaj gönderen kişi siz miydiniz acaba?
  • Evet, aslında bu açık kaynak bir kütüphane ve ücretsiz kullanılabiliyor

• Çoğu UI kütüphanesinin kaçırdığı bir nokta var
  Yuvarlatılmış köşeli kutular iç içe geçtiğinde, border-radius değerine aralıktaki boşluk kadar ekleme yapmak gerekir
  Aksi hâlde göze hafif kaymış gibi gelen bir his bırakır
  Örnek: Snackbar component, Chrome sekme yerleşimi ekran görüntüsü

• Bununla ilgili bir araştırma makalesi de var → PMC makale linki)

• LiftKit açıklamasında “tüm öğeler altın orandan türetilir ve kusursuz uyum sağlar” gibi bir ifade vardı ama bunun ironi mi yoksa ciddi mi olduğunu anlayamadım

  • Ama sayfayı açar açmaz butonlar tuhaf biçimde görsel olarak tatmin edici geldi
    Sanki burada teorinin ötesinde sezgisel bir uyum var gibi