Vercel का डिज़ाइन सिस्टम स्पेसिफिकेशन वास्तव में एक टेक्स्टबुक-स्तर का उदाहरण है जो मैंने देखा है।
आज, मैंने उनके DESIGN.md का गंभीरता से अध्ययन किया। लाइट और डार्क दोनों थीम के साथ, यह रंगों, फ़ॉन्ट्स, स्पेसिंग, कम्पोनेंट्स, मोशन और कॉपीराइटिंग नियमों को एक कार्यान्वयन योग्य डिज़ाइन पद्धति में पूरी तरह से वर्णित करता है।
मुझे लगता है कि मैं अपने सभी भविष्य के उत्पादों के design.md के लिए इस पथ का अनुसरण कर सकता हूँ।
विवरण यहाँ हैं:
कुछ मित्रों को शायद यह स्पष्ट न हो कि DESIGN.md क्या है। सीधे शब्दों में कहें तो, यह AI के पढ़ने के लिए एक डिज़ाइन स्पेसिफिकेशन है। जब AI हमें कोड लिखने में मदद करता है, तो उसे यह जानना होता है कि किन रंगों का उपयोग करना है, कौन से फ़ॉन्ट आकार लागू करने हैं, और एलिमेंट्स के बीच कितनी स्पेसिंग रखनी है।
इस फ़ाइल के बिना, AI द्वारा बनाए गए इंटरफ़ेस हर बार अलग दिखते हैं, जिसमें एक असंगत शैली होती है।
Vercel के DESIGN.md को पढ़ने के बाद, मुझे एहसास हुआ कि एक अच्छा DESIGN.md AI को केवल यह बताने से कहीं अधिक है कि कौन से हेक्स कोड या फ़ॉन्ट आकार का उपयोग करना है। यह डिज़ाइन सोच के एक पूरे सेट का प्रतिनिधित्व करता है। इसने मेरी धारणा को काफी हद तक बदल दिया।
आज, मैं विस्तार से बताऊंगा कि यह फ़ाइल इतनी अच्छी क्यों है।
1
सबसे पहले, बात करते हैं रंगों की।
जब मैंने पहली बार DESIGN.md लिखना शुरू किया, तो रंग अनुभाग वास्तव में बहुत सरल था। मैं कुछ रंग मान सूचीबद्ध करता, AI को बताता कि कौन सा प्राथमिक, द्वितीयक और एक्सेंट रंग है, और बस इतना ही।
लेकिन इस तरह लिखने पर, AI को अभी भी यह नहीं पता होता कि ये रंग विभिन्न इंटरैक्शन स्थितियों से कैसे मेल खाते हैं।
उदाहरण के लिए, एक बटन के लिए, डिफ़ॉल्ट स्थिति का रंग क्या होना चाहिए? होवर करने पर यह कितना गहरा होना चाहिए? क्लिक करने के क्षण इसका रंग क्या होना चाहिए? यदि ये विवरण स्पष्ट रूप से परिभाषित नहीं हैं, तो AI द्वारा उत्पन्न परिणाम हर बार भिन्न हो सकते हैं।
Vercel का दृष्टिकोण इस समस्या को पूरी तरह से हल करता है।
उनके डिज़ाइन सिस्टम में, प्रत्येक रंग श्रृंखला को 100 से 1000 तक 10 ग्रेडिएंट में विभाजित किया गया है, और प्रत्येक संख्या एक निश्चित इंटरफ़ेस स्थिति से मेल खाती है।
100 एलिमेंट्स के लिए डिफ़ॉल्ट बैकग्राउंड है, 200 होवर पर बैकग्राउंड है, और 300 क्लिक पर बैकग्राउंड है। ऊपर जाते हुए, 400 डिफ़ॉल्ट बॉर्डर है, 500 होवर बॉर्डर है, और 600 क्लिक बॉर्डर है।
700 का उपयोग ठोस रंग ब्लॉक्स के लिए किया जाता है, जैसे टैग या बटन स्वयं; 800 इन ब्लॉक्स के लिए होवर स्थिति है। 900 का उपयोग द्वितीयक टेक्स्ट और आइकन के लिए किया जाता है, और 1000 का उपयोग प्राथमिक टेक्स्ट और आइकन के लिए किया जाता है।
यह केवल संख्यात्मक नंबरिंग जैसा दिखता है, लेकिन इसके पीछे एक पूर्ण इंटरैक्शन लॉजिक छिपा है।
100 से 300 बैकग्राउंड स्थितियों को प्रबंधित करते हैं। 400 से 600 बॉर्डर स्थितियों को प्रबंधित करते हैं। 700 और 800 ठोस रंग ब्लॉक स्थितियों को प्रबंधित करते हैं। 900 और 1000 सूचना पदानुक्रम को प्रबंधित करते हैं।
दूसरे शब्दों में, Vercel वास्तव में AI को बता रहा है कि यहाँ कई स्थितियाँ हैं। रंग इन स्थितियों की अभिव्यक्ति मात्र है।
इसके लाभ बहुत सीधे हैं।
जब AI कोड लिखता है, तो उसे यह अनुमान लगाने की आवश्यकता नहीं होती कि होवर करने पर बटन कितना गहरा होना चाहिए, न ही उसे यह अनुमान लगाने की आवश्यकता होती कि बॉर्डर कैसे बदलना चाहिए। डिफ़ॉल्ट स्थिति 100 से मेल खाती है, होवर 200 से, और क्लिक 300 से; नियम पूर्व-निर्धारित हैं।
इसके अतिरिक्त, इस आधार पर, Vercel लाइट और डार्क दोनों थीम प्रदान करता है लेकिन बिल्कुल समान Token नामों का उपयोग करता है।
उदाहरण के लिए, gray-1000। लाइट थीम में, यह #171717 है, जो शुद्ध काले के करीब है। डार्क थीम में, यह #ededed हो जाता है, जो शुद्ध सफेद के करीब है।
एक डिज़ाइन सिस्टम के लिए, ये दो रंग वास्तव में एक ही चीज़ हैं।
वे दोनों पेज पर सबसे महत्वपूर्ण जानकारी का प्रतिनिधित्व करते हैं। डेवलपर्स और AI, इंटरफ़ेस उत्पन्न करते समय, gray-1000 के शब्दार्थ पर ध्यान केंद्रित करते हैं, न कि इसके पीछे के विशिष्ट हेक्स मान पर। जब थीम स्विच होती है, तो सिस्टम स्वचालित रूप से इस शब्दार्थ को संबंधित रंग में मैप करता है।
2
रंग की समस्या हल करने के बाद, एक और अधिक महत्वपूर्ण बाधा पेज की लय है।
Vercel का स्पेसिंग सिस्टम 4px के गुणकों पर आधारित है, जो कुल मिलाकर केवल 9 मान प्रदान करता है: 4, 8, 12, 16, 24, 32, 40, 64, 96। पूरे उत्पाद में सभी स्पेसिंग इन्हीं संख्याओं में से चुनी जाती है।
मेरी पहली प्रतिक्रिया यह थी कि यह थोड़ा सीमित लगता है। अगर मुझे 20px चाहिए तो क्या होगा? अगर मुझे 28px चाहिए तो क्या होगा?
मैंने एक डिज़ाइनर मित्र से पूछा, और उन्होंने कहा कि अधिकांश उत्पादों के लिए, 9 स्पेसिंग शैलियाँ मूल रूप से पर्याप्त हैं।
यदि स्पेसिंग के बहुत सारे विकल्प हैं, तो पेज की लय खो जाती है। कई भयानक वेबसाइटों में बहुत ही बेतरतीब स्पेसिंग डिज़ाइन होते हैं। यह वास्तव में उत्पाद डिज़ाइन में एक बड़ा वर्जित है।
उत्कृष्ट डिज़ाइन सिस्टम अनंत विकल्प नहीं देते; वे सक्रिय रूप से विकल्पों को सीमित करते हैं।
Vercel सीधे तौर पर लय सुझावों का एक स्पष्ट सेट प्रदान करता है: एक समूह के भीतर एलिमेंट्स के बीच 8px रखें, समूहों के बीच 16px, और अनुभागों के बीच 32 से 40px। यह वास्तव में पेज की सांस लेने की लय को परिभाषित कर रहा है।
उपयोगकर्ता शायद इन अंतरालों पर ध्यान न दें, लेकिन वे स्वाभाविक रूप से महसूस करेंगे कि कौन से भाग एक ही पूरे के हैं और एक नया सामग्री क्षेत्र कहाँ शुरू होता है।
अक्सर, एक पेज आरामदायक दिखता है, इसलिए नहीं कि डिज़ाइनर ने किसी उन्नत तकनीक का उपयोग किया, बल्कि इसलिए कि यह लय पूरे समय सुसंगत रहती है।
टाइपोग्राफी भी उसी तर्क का पालन करती है।
Vercel का फ़ॉन्ट सिस्टम रंग और स्पेसिंग के तर्क के समान है।
सभी टेक्स्ट को कई निश्चित भूमिकाओं में वर्गीकृत किया गया है: heading, label, copy और button।
प्रत्येक भूमिका के तहत, विभिन्न आकारों के Tokens प्रदान किए जाते हैं, और प्रत्येक Token में पूर्व-निर्धारित फ़ॉन्ट, आकार, वज़न, लाइन हाइट और लेटर स्पेसिंग होती है।
पहले, टेक्स्ट के एक टुकड़े का सामना करने पर, एक डिज़ाइनर सोच सकता था कि 14px या 15px का उपयोग करना है और कौन सी लाइन हाइट उपयुक्त है।
डिज़ाइन सिस्टम के साथ, सोचने का तरीका बदल जाता है। AI पहले यह निर्धारित करता है कि यह टेक्स्ट क्या भूमिका निभाता है। क्या यह एक heading है, body टेक्स्ट है, या द्वितीयक जानकारी है? एक बार भूमिका निर्धारित हो जाने पर, संबंधित शैली भी निर्धारित हो जाती है।
फ़ॉन्ट-आकार की मानसिकता से भूमिका-आधारित मानसिकता की ओर बढ़ना। दृश्य निर्णय लेने से शब्दार्थ निर्णय लेने की ओर। यहीं पर डिज़ाइन सिस्टम का सही मूल्य निहित है। शानदार।
यह देखकर, आपको एहसास होता है कि चाहे वह स्पेसिंग हो या फ़ॉन्ट, Vercel एक ही काम कर रहा है: निष्पादन चरण के दौरान मुक्त खेल को जितना संभव हो उतना कम करना, नियम पहले से निर्धारित होते हैं, ताकि निष्पादन के लिए केवल एक भूमिका चुनने की आवश्यकता हो।
यह डिज़ाइनरों के लिए, डेवलपर्स के लिए और AI के लिए सच है।
3
इसके अतिरिक्त, कॉपीराइटिंग को भी Vercel के डिज़ाइन स्पेसिफिकेशन का एक महत्वपूर्ण हिस्सा माना जाता है। यह वह हिस्सा है जो अधिकांश DESIGN.md फ़ाइलों में सबसे आसानी से गायब रहता है।
Vercel इन विवरणों को बहुत विशिष्ट रूप से परिभाषित करता है।
उदाहरण के लिए, बटन कॉपी एक क्रिया और एक वस्तु होनी चाहिए। जैसे "Deploy Project" या "Delete Member"। आप केवल अस्पष्ट शब्द नहीं लिख सकते जैसे "Deploy", "OK" या "Delete"।
इसका कारण सरल है। "Delete" देखने पर, उपयोगकर्ता को अभी भी यह सोचना पड़ता है कि वास्तव में क्या हटाया जा रहा है। एक क्रिया और एक वस्तु के साथ, उपयोगकर्ता तुरंत एक पूर्ण समझ बना सकता है।
एरर मैसेज भी ऐसे ही हैं। Vercel के नियम स्पष्ट हैं। पहले, उपयोगकर्ता को बताएं कि क्या हुआ। फिर, उपयोगकर्ता को बताएं कि आगे क्या करना है।
उदाहरण के लिए, यदि पैकेज फ़ाइल आकार सीमा से अधिक होने के कारण बिल्ड विफल हो जाता है, तो समाधान आकार कम करना या सीमा को समायोजित करना है। तीन वाक्य पढ़ने के बाद, उपयोगकर्ता को तुरंत पता चल जाता है कि समस्या कहाँ है और आगे क्या करना है।
कई उत्पादों में एरर प्रॉम्प्ट "ऑपरेशन विफल, कृपया बाद में पुनः प्रयास करें" होते हैं। ऐसे प्रॉम्प्ट की सूचना सामग्री लगभग शून्य होती है। उपयोगकर्ता को पढ़ने के बाद केवल इतनी जानकारी मिलती है कि यह विफल रहा। यह विफल क्यों हुआ और आगे क्या करना है, इसका अभी भी अनुमान लगाना पड़ता है।
डिज़ाइन सिस्टम में कॉपीराइटिंग स्पेसिफिकेशन मूल रूप से इस अनुमान को कम कर रहे हैं।
Vercel ने ऑपरेशन पूरा होने के बाद अधिसूचना संदेशों को भी मानकीकृत किया, जिनमें केवल यह बताने की आवश्यकता है कि क्या परिवर्तन हुआ। उदाहरण के लिए, "Project deleted", न कि "Project deleted successfully"।
क्योंकि प्रॉम्प्ट बॉक्स का पॉप अप होना पहले से ही इंगित करता है कि ऑपरेशन पूरा हो गया है। "successfully" शब्द अनावश्यक जानकारी है।
अगला है मोशन।
यह हिस्सा विशेष रूप से दिलचस्प है क्योंकि यह मेरे अंतर्ज्ञान के बिल्कुल विपरीत है। मैं सोचूंगा कि जितना अधिक एनिमेशन, उतना ही अधिक परिष्कृत उत्पाद।
इसलिए, बटन होवर या मेनू पॉपअप में थोड़ा एनिमेशन जोड़ने से यह उच्च-स्तरीय दिखाई देता है। ऐसा लगता है कि अब कई Vibe Coding उत्पाद इस दिशा में बढ़ रहे हैं।
लेकिन Vercel का रवैया पूरी तरह से अलग है। उन्होंने स्पष्ट रूप से लिखा है कि कई इंटरैक्शन परिदृश्यों में, 0 मिलीसेकंड अक्सर सबसे अच्छा विकल्प होता है। दूसरे शब्दों में, कोई एनिमेशन नहीं, तुरंत पूरा होता है।
यदि कोई बटन डिफ़ॉल्ट स्थिति से होवर स्थिति में बदलता है, तो यह परिवर्तन पहले से ही काफी स्पष्ट है। सबसे अच्छा फीडबैक यह है कि यह तुरंत हो; एनिमेशन की एक अतिरिक्त परत जोड़ने से इंटरफ़ेस सुस्त महसूस होगा।
बेशक, कुछ परिदृश्यों में मोशन की आवश्यकता होती है।
उदाहरण के लिए, एक पॉपअप अचानक दिखाई देता है। यदि कोई ट्रांज़िशन नहीं है, तो लोगों को पता नहीं चलेगा कि यह कहाँ से आया। यहीं पर एनिमेशन का मूल्य है।
Vercel विभिन्न परिदृश्यों के लिए अवधि भी निर्दिष्ट करता है। सामान्य स्थिति परिवर्तन लगभग 150 मिलीसेकंड, पॉपओवर लगभग 200 मिलीसेकंड, और मोडल लगभग 300 मिलीसेकंड।
परिवर्तन जितना बड़ा होगा, उतना ही अधिक प्रतिक्रिया समय दिया जाता है। परिवर्तन जितना छोटा होगा, फीडबैक उतना ही अधिक प्रत्यक्ष होगा।
इसके पीछे का तर्क हमेशा एक जैसा है: यदि आवश्यक न हो तो हिलें नहीं, और जब हिलना आवश्यक हो, तो इसे तेज़, हल्का और संयमित रखें।
आखिरी हिस्सा जिसने मुझ पर गहरी छाप छोड़ी, वह है एक्सेसिबिलिटी।
सच कहूं तो, मैंने पहले इस हिस्से पर विशेष ध्यान शायद ही कभी दिया हो। क्योंकि अधिकांश समय, जब तक किसी उत्पाद का इंटरफ़ेस अच्छा दिखता है और कार्य काम करते हैं, यह पर्याप्त लगता है। लेकिन Vercel ने इस हिस्से को बहुत गंभीरता से लिखा है।
उन्हें टेक्स्ट और बैकग्राउंड के बीच पर्याप्त कंट्रास्ट की आवश्यकता होती है। स्थिति परिवर्तन केवल रंग पर निर्भर नहीं हो सकते; उन्हें आइकन या टेक्स्ट विवरण के साथ जोड़ा जाना चाहिए।
सभी इंटरैक्टिव एलिमेंट्स में एक स्पष्ट फोकस स्थिति होनी चाहिए और इसे दृश्य सफाई के लिए नहीं हटाया जा सकता।
ये नियम सुनिश्चित करते हैं कि डिज़ाइन सिस्टम सभी की सेवा करता है, जिसमें कम रंग संवेदनशीलता वाले लोग, कीबोर्ड से नेविगेट करने वाले लोग और तेज रोशनी में अपने फोन देखने वाले लोग शामिल हैं।
यह DESIGN.md बहुत पेशेवर है। मुझे लगता है कि जब भविष्य में हर कोई नए उत्पाद बनाता है, तो वे इन दो MD फ़ाइलों के विचारों के आधार पर अपना स्वयं का DESIGN.md लिख सकते हैं।
