LiftKit - पूर्णतावादियों के लिए UI फ़्रेमवर्क

• समरूपता और अनुपात की समस्याओं को हल करने वाला ओपन सोर्स UI फ़्रेमवर्क, जिसमें सभी तत्व golden ratio से निकली संरचना का पालन करते हैं
• बटन, कार्ड, इनपुट फ़ील्ड आदि में दृश्य संतुलन और spatial feel को अपने-आप सुधारकर स्वाभाविक अनुपात बनाए रखता है
• global scale factor के आधार पर subpixel स्तर की सटीक अनुपात गणना करके एकसमान सामंजस्य लागू करता है
• modular color control panel के ज़रिए real-time color preview और theme adjustment संभव है, साथ ही typography, materials, scaling आदि की विस्तृत settings का समर्थन
• MVP चरण में भी उच्च स्तर की visual quality प्रदान करता है, इसलिए शुरुआती डिज़ाइन की परिपक्वता बढ़ाने वाले टूल के रूप में ध्यान आकर्षित कर रहा है

---

LiftKit का अवलोकन

• LiftKit एक समरूपता की समस्याओं को हल करने वाला ओपन सोर्स UI फ़्रेमवर्क है
  • इसका मुख्य उद्देश्य UI components के बीच दृश्य संतुलन को अपने-आप मिलाना है
  • यह “Extremely Early Access” चरण में है, यानी शुरुआती प्रयोगात्मक संस्करण
• फ़्रेमवर्क के सभी अनुपात golden ratio से निकाले गए हैं, जिससे margin, font size, border radius जैसे सभी तत्व सामंजस्यपूर्ण ढंग से render होते हैं
• यह एकल global scale factor का उपयोग करके subpixel स्तर की सटीकता से अनुपात की गणना करता है

प्रमुख components और features

• Button component आइकन शामिल होने पर पैदा होने वाले visual padding imbalance को अपने-आप सुधारता है
  • font size के अनुसार padding को dynamically समायोजित करके बाएँ-दाएँ संतुलन बनाए रखता है
• Card component opticalCorrection प्रॉपर्टी देता है, जो content की line-height से होने वाले whitespace imbalance को ठीक करता है
• Input field को golden ratio आधारित spacing design के साथ इस तरह दिखाया जाता है कि उसमें “साँस लेने की जगह” महसूस हो

अनुपात और दृश्य संतुष्टि

• LiftKit “oddly-satisfying” अनुपात हासिल करने के लिए एकल scale factor से निकली अनुपात प्रणाली का उपयोग करता है
• सभी components की गणना subpixel accuracy के साथ की जाती है, जिससे सूक्ष्म दृश्य असंतुलन न्यूनतम होता है
• यह तरीका उपयोगकर्ताओं को एक ऐसा “स्वाभाविक और सामंजस्यपूर्ण एहसास” देता है, जिसे शब्दों में समझाना कठिन है

रंग और थीम नियंत्रण

• LiftKit modular control panel प्रदान करता है
  • इसे काम के दौरान फ़ाइल में जोड़कर real-time color preview देखा जा सकता है
  • हल्के hue changes से लेकर तेज़ color flooding तक कई तरह के समायोजन का समर्थन करता है
• रंगों के अलावा, CSS में सीधे निम्न चीज़ें भी समायोजित की जा सकती हैं
  • Typography: font family से आगे बढ़कर सूक्ष्म global typography control
  • Custom Materials: glass, flat, rubber जैसे presets के आधार पर नए materials बनाना
  • Scaling: सिर्फ text ही नहीं, spacing समेत पूरे elements साथ में scale होते हैं
  • Component-specific configs: अलग-अलग components की appearance को स्वतंत्र रूप से समायोजित किया जा सकता है

सूक्ष्म डिटेल और डिज़ाइन गुणवत्ता

• LiftKit को MVP चरण में भी उच्च-गुणवत्ता वाली visual quality देने के लिए डिज़ाइन किया गया है
  • “Make MVP’s that don’t look like MVP’s”
• यह डिफ़ॉल्ट रूप से perceptually accurate spacing देता है, जिससे उपयोगकर्ता द्वारा महसूस किया जाने वाला संतुलन अधिकतम होता है
• ऐसी सूक्ष्म डिटेल्स ऐसे परिणाम पैदा करती हैं जो “समझाना मुश्किल है, लेकिन अधिक बेहतर दिखते हैं”

[roxie]

लैंडिंग पेज पर पहले और बाद का comparison है, लेकिन दोनों ही अच्छे लग रहे हैं ..

[heal9179]

आमतौर पर golden ratio की बजाय major second (1.125) का इस्तेमाल नहीं करते क्या..?

[GN⁺]

Hacker News प्रतिक्रियाएँ

• जब Chrome डिज़ाइन किया जा रहा था, तब minimalism सबसे महत्वपूर्ण था
  उस समय स्क्रीन छोटी होती थीं, इसलिए vertical space कम करने में बहुत समय लगाया गया
  tab strip, toolbar और titlebar के अनुपात को golden ratio बताने से बहस कम हो जाती, लेकिन सच में वह बिल्कुल भी golden ratio नहीं था
  रोशनी, रंग, rounding, visual intensity जैसी चीज़ें उससे कहीं ज़्यादा महत्वपूर्ण हैं

  • मेरा पसंदीदा design meme यह है कि पहले logo बना लेते हैं, फिर बाद में उसे “गहरी सोच का नतीजा” बताने के लिए golden ratio shapes चिपका देते हैं
    सच तो यह है कि थोड़ा-बहुत adjust करो तो किसी भी चीज़ को golden ratio से मिलाया जा सकता है। ऐसी बातें खासकर उन लोगों पर असर करती हैं जिन्हें ‘spiritual’ aesthetics पसंद हैं
  • पुराने Chrome का minimalism मुझे सच में बहुत पसंद था
    आज भी स्क्रीन बड़ी हो गई है, इसका मतलब यह नहीं कि मैं space बर्बाद करना चाहूँगा
  • विडंबना यह है कि golden ratio के उदाहरण के तौर पर दिखाए गए websites का design अक्सर तुलना वाले design से भी खराब लगता है
    आखिरकार यह शायद पसंद की बात है
  • “vertical rhythm”, “modular scale” जैसे concepts web पर लगभग बेकार अंधविश्वास जैसे लगते हैं
    print में वे उपयोगी हो सकते हैं, लेकिन digital में उल्टा readability को नुकसान पहुँचाते हैं
    icons को ज़बरदस्ती एक ही shape में फिट करना या रंग हटा देना भी पहचानने की क्षमता कम कर देता है
  • “golden ratio वह दोस्त था जिससे हम रास्ते में मिले थे” जैसा मज़ाक भी आया

• मैं LiftKit का निर्माता हूँ
  यह project अभी बहुत शुरुआती चरण में है, और मैं इसे अकेले शौक़िया तौर पर बना रहा हूँ
  यह open source है और मुफ़्त है → GitHub लिंक
  ज़्यादातर feedback पर पहले ही Reddit thread में चर्चा हो रही है
  अभी Radix primitives के साथ दोबारा बना रहा हूँ और documentation सुधारना प्राथमिकता है
  एक overview YouTube वीडियो में भी देखा जा सकता है

  • मुझे project शानदार लगता है। आलोचना भी professional feedback है, इसलिए उसे तारीफ़ की तरह लेना चाहिए
    ज़्यादातर frontend developers जिस “पूरी तरह consistent design system” का सपना देखते हैं, उसे वास्तव में लागू करना अपने आप में बड़ी बात है
  • Reddit पर 7 महीने पहले कहा गया था कि “component rendering अगली priority है”, लेकिन अब उसका ज़िक्र नहीं है
    ऐसा UI framework जो अपनी ही docs में components render नहीं कर सकता, उस पर भरोसा करना मुश्किल है
  • idea अच्छा है और homepage भी visually satisfying लगता है
    मैंने iOS app में golden ratio लागू करने की कोशिश की थी, इसलिए अच्छा होगा अगर आप बनाने की प्रक्रिया साझा करें
  • Radix की बजाय Base UI या React Aria भी देखने की सलाह दूँगा
  • comparison images में competing frameworks को जानबूझकर low-contrast दिखाना ठीक नहीं है

• before/after comparison screenshots दिखाते समय drag slider की जगह button से तुरंत toggle होने वाला तरीका बेहतर होगा
  हर click पर आँखें खुद अंतर को पहचान सकती हैं
  संबंधित संदर्भ: Andrei Herasimchuk का Quora जवाब

  • निर्माता होने के नाते मुझे भी मानना पड़ेगा कि अभी वाला slider touchscreen पर बहुत खराब है
    उसे बाएँ-दाएँ खींचने की कोशिश करो तो वह ऊपर-नीचे फिसलता है। feedback के लिए धन्यवाद, इसे ज़रूर ठीक करूँगा
  • photo comparison के लिए slider standard है, लेकिन बाएँ-दाएँ labels जोड़कर और click पर original को थोड़ी देर दिखाकर इसे बेहतर बनाया जा सकता है
    उदाहरण वीडियो: LUTLab Viewer
  • मैं भी पहले समझ नहीं पाया कि LiftKit कौन-सा वाला है
  • यह कुछ-कुछ “कौन-सा ज़्यादा अच्छा दिखता है?” वाले game जैसा लगा
  • हर image पर “material-style”, “liftkit” label डालकर और slider move होने पर उन्हें छिपने दिया जाए, तो चीज़ें ज़्यादा साफ़ होंगी

• शुरुआत में मुझे लगा यह site parody है
  यह सचमुच असली है, यह देखकर हैरानी हुई, और components का alignment off-center लगा तथा visual weight भी असंतुलित लगा

  • मुझे भी हर बार लगा ‘यह वाला बेहतर है’, लेकिन बाद में पता चला कि वह हमेशा पहले वाला (before) ही था
  • गणितीय रूप से परफेक्ट अनुपात हमेशा अच्छे नहीं लगते
    असल में चीज़ों को कुछ pixels इधर-उधर करना पड़ता है ताकि वे आँखों को स्वाभाविक लगें
  • कुल मिलाकर कुछ न कुछ गड़बड़-सा लगता है
  • 1.618 ratio असली design में spacing के लिए बहुत बड़ा है

• “optical correction none/top” के बारे में जिज्ञासा है कि क्या आप सीधे capital letter height मापकर मिलाते हैं, या font metrics को वैसे ही इस्तेमाल करते हैं
  font के अंदर के numbers पर भरोसा करना मुश्किल है, और असली glyphs अक्सर उन numbers का पालन नहीं करते
  यही चीज़ font work का nightmare बन जाती है

• ऐसे UI framework पर भरोसा करना कठिन है जो सभी components को सिर्फ images के रूप में दिखाता है

  • मैंने dropdown पर click किया, वहाँ तो image भी नहीं थी
  • शायद असली CSS सार्वजनिक करने पर लोग copy कर लेंगे, इसलिए वे ‘secret golden ratio code’ बचाकर रखना चाहते हैं
  • इससे यह impression भी मिला कि किसी expert को hire करके मदद लेनी चाहिए
  • Firefox में scroll करते समय frame drops हो रहे हैं
  • UI का खुद render न होना और React या Next.js पर निर्भर होना, UI kit के रूप में ठीक नहीं लगता

• मैंने pricing ढूँढने की कोशिश की, लेकिन सिर्फ “Contact Sales” दिखा और फिर calculator इस्तेमाल करना पड़ा
  10 top-level pages + 5 subpages डालने पर $16,500 आया, जिसे देखकर मैं चौंक गया

  • वह agency services के लिए calculator है। LiftKit खुद मुफ़्त है
    क्या “[e-mail]” से form भेजने वाले आप ही थे?
  • हाँ, वास्तव में यह open source library है और मुफ़्त इस्तेमाल की जा सकती है

• ज़्यादातर UI libraries एक बात चूक जाती हैं
  जब rounded-corner boxes एक-दूसरे के अंदर nested होते हैं, तो spacing जितना border-radius भी बढ़ाना चाहिए
  वरना दृश्य रूप से हल्का-सा mismatch महसूस होता रहता है
  उदाहरण: Snackbar component, Chrome tab layout screenshot

• इस विषय पर एक research paper भी है → PMC paper link)

• LiftKit के विवरण में “सभी elements golden ratio से निकले हैं और perfect harmony बनाते हैं” जैसी पंक्ति थी, लेकिन यह विडंबना है या सच, समझ नहीं आया

  • फिर भी page खोलते ही buttons अजीब तरह से visually satisfying लगे
    ऐसा लगा कि वहाँ सिर्फ theory से बढ़कर कोई संवेदी सामंजस्य मौजूद है