Sushi Design System - UI Kit

सुशी ज़ोमैटो की खुद की डिज़ाइन प्रणाली है, जो एक स्वच्छ और सरल डिज़ाइन भाषा के बाद मजबूत यूजर इंटरफेस बनाने में मदद करती है। हमने जोमैटो में इसे जमीन से ऊपर तक बनाया है। यह हमारे लिए केवल एक डिज़ाइन सिस्टम नहीं है, बल्कि इससे भी अधिक यह हमारे उपयोगकर्ताओं को एक नया और बेहतर अनुभव प्रदान करने में हमारी सहायता करता है। सुशी एक परमाणु, स्वच्छ और सरल डिजाइन भाषा के बाद बीस्पोक यूजर इंटरफेस बनाने में आपकी मदद कर सकती है। जबकि सुशी अपनी स्वयं की डिज़ाइन भाषा का निर्माण करती है, यह कई क्षेत्रों में आंतरिक रूप से Google के सामग्री डिज़ाइन घटकों को पूरी तरह से ग्रहण करती है और उनका उपयोग करती है।

एक डिजाइन प्रणाली और ब्रांड दिशानिर्देशों के संदर्भ के रूप में, इसका उपयोग और ज़ोमैटो के भीतर विभिन्न टीमों द्वारा प्रतिनिधित्व किया जाता है, जैसे - उत्पाद, इंजीनियरिंग, विपणन और ब्रांडिंग।

डिज़ाइन प्रणाली क्या है?

एक डिज़ाइन सिस्टम पुन: प्रयोज्य घटकों का एक संग्रह है, जो स्पष्ट मानकों द्वारा निर्देशित होता है, जिसे किसी भी संख्या में एप्लिकेशन बनाने के लिए एक साथ इकट्ठा किया जा सकता है। एक डिज़ाइन सिस्टम केवल एक डिजिटल उत्पाद बनाने के लिए आपके द्वारा उपयोग की जाने वाली संपत्तियों और घटकों का संग्रह नहीं है। इंटरकॉम में उत्पाद डिजाइन के निदेशक एम्मेट कोनोली के अनुसार, "... अधिकांश डिजाइन सिस्टम वास्तव में सिर्फ पैटर्न पुस्तकालय हैं: यूआई लेगो टुकड़ों का एक बड़ा बॉक्स जिसे लगभग अनंत तरीकों से इकट्ठा किया जा सकता है। सभी टुकड़े सुसंगत हो सकते हैं, लेकिन इसका मतलब यह नहीं है कि इकट्ठे परिणाम होंगे। आपका उत्पाद पुन: प्रयोज्य UI तत्वों के ढेर से कहीं अधिक है। इसकी संरचना और अर्थ है। यह एक सामान्य वेब पेज नहीं है, यह अवधारणाओं की एक प्रणाली का अवतार है।"

सुशी डिजाइन सिस्टम

फाउंडेशन

नींव डिजिटल ब्रांड दिशानिर्देश हैं, जो हमारे डिजाइन सिस्टम की टाइपोग्राफी, रंग पैलेट, आइकन, रिक्ति, छाया और सूचना वास्तुकला को परिभाषित करते हैं। सुशी, परमाणु डिजाइन सिद्धांतों का पालन करते हुए, परमाणुओं ➡️ अणुओं ️ जीवों के रूप में व्यवस्थित घटकों का उपयोग करके नीचे से ऊपर बनाया गया है।

परमाणु डिजाइन

परमाणु डिजाइन (जैसा कि ब्रैड फ्रॉस्ट द्वारा वर्णित है) हमारे सिस्टम में मैप किया गया।

#परमाणु

सबसे छोटी अविभाज्य इकाइयाँ परमाणु हैं। एंड्रॉइड (या किसी भी मोबाइल यूआई) में टेक्स्ट लेबल, बटन और इमेज होल्डर परमाणु होते हैं।

#अणु

ऐसे दृश्य जिनमें बनने के लिए कई परमाणु शामिल होते हैं, लेकिन फिर भी उपयोगकर्ता के लिए एकल इकाई की तरह दिखते और व्यवहार करते हैं, वे अणु होते हैं। उदाहरण के लिए, इनपुट फ़ील्ड में इनपुट बॉक्स, त्रुटि फ़ील्ड और एक स्पष्ट बटन होता है, लेकिन साथ में यह एक एकल इकाई है।

#जीव

जटिल, लेकिन पुन: प्रयोज्य घटक, जो एक साथ मिलकर काम करते हैं। कई परमाणुओं और अणुओं से बना है। रेटिंग बार होने का एक मामला, जिसमें टैग होते हैं, प्रत्येक में एक नंबर और एक आइकन होता है। जब अलग-अलग रेटिंग चुनी जाती हैं, तो टैग रंग भी बदलते हैं। प्रत्येक टैग व्यक्तिगत रूप से अन्य स्थानों पर भी उपयोग किया जाता है, लेकिन रेटिंग बार के रूप में, यह सभी नए अर्थ बनाने के लिए मिलकर काम करते हैं।

टाइपोग्राफी

टाइपोग्राफी, जैसा कि आप जानते हैं, लिखित भाषा को सुपाठ्य, पठनीय और प्रदर्शित होने पर आकर्षक बनाने के लिए प्रकार की व्यवस्था करने की कला है। प्रकार की व्यवस्था में टाइपफेस, पॉइंट साइज, लाइन लेंथ, लाइन-स्पेसिंग और लेटर-स्पेसिंग का चयन और अक्षरों के जोड़े के बीच की जगह को समायोजित करना शामिल है।

हम निम्नलिखित टाइपफेस विविधताओं का समर्थन करते हैं -

अतिरिक्त प्रकाश

रोशनी

नियमित

मध्यम

सेमीबोल्ड

साहसिक

अतिरिक्त बोल्ड

आप किसी भी फ़ॉन्ट का उपयोग कर सकते हैं जिसमें 8 फ़ॉन्ट वजन तक हों और उन्हें इन उपनामों से असाइन करें। जबकि हमारे पास डेमो के लिए मेट्रोपोलिस, ओकरा और रोबोटो हैं, आप अपने ब्रांड के साथ जाने वाले किसी भी फ़ॉन्ट का उपयोग कर सकते हैं।

रंग

सुशी अपने पैलेट में पूर्वनिर्धारित रंगों का एक सेट भी प्रदान करती है। अत्यंत अनूठे मामलों के लिए, अपने स्वयं के रंगों का उपयोग करने के लिए स्वतंत्र महसूस करें, लेकिन अन्यथा, हम आपके उत्पाद के सभी घटकों के लिए इस पैलेट से रंगों का उपयोग करने की सलाह देते हैं।

कोड रिपॉजिटरी