Société Générale डिजाइन सिस्टम: डिजाइन और विकास में सद्भाव

हम आपके ध्यान में डिज़ाइन प्रणाली के निर्माण के बारे में कहानी का अनुवाद करते हैं, जो सोसाइटी जेनरेल के डिजाइनर द्वारा बताई गई है।

डिजाइन सिस्टम पर लेखों में वर्तमान उछाल ने हमें सोसाइटी जेनरेल पर काम करने के बारे में अधिक बात करने के लिए प्रेरित किया है। हम लंबे समय से अपने डिजाइन सिस्टम के साथ प्रयोग कर रहे हैं, और एक डिजाइनर के रूप में जो तकनीकी विवरणों के बारे में गहराई से परवाह करता है, मैं व्यक्तिगत रूप से अपने करियर में इसे बहुत बड़ी उपलब्धि मानता हूं।

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

हम वर्षों से कैसे विकसित हुए हैं

सोसाइटी जेनरल में, हम 2014 से अपने सिस्टम के दृष्टिकोण को विकसित कर रहे हैं। उस समय, हमने प्रोटोटाइपिंग के लिए पहले से ही विकसित संसाधनों के साथ शुरुआत की और पहले से ही स्थिर HTML के लिए घटकों को एन्कोडेड कर दिया, जिससे एसजीबी मार्केट्स उत्पादों, हमारे बी 2 बी वित्तीय सेवाओं के बाजार में डिजिटल प्रौद्योगिकियों को सिंक्रनाइज़ करने की प्रक्रिया शुरू हो सके।

इसने हमें अपने उपयोगकर्ताओं के विशिष्ट वित्तीय इंटरफेस के साथ व्यवहार को समझने और यह देखने के लिए अनुमति दी कि किस प्रकार के घटक और किस प्रकार के डिजाइन सबसे प्रभावी थे। अगले कुछ वर्षों में नियमित समीक्षाओं ने हमें अपनी दृष्टि को स्पष्ट करने की अनुमति दी।

2017 में शुरू, हमने डिजाइन सिस्टम के साथ काम करने की अधिक गहन प्रक्रिया शुरू की। बुनियादी सिद्धांतों और दिशानिर्देशों की परिभाषा ने हमें सिस्टम को एकजुट करने में मदद की, और हमारे सभी घटकों के गहन अद्यतन ने बहुत आसान डिजाइन प्रक्रिया का नेतृत्व किया। पूरी डिजाइन टीम ने इस काम में योगदान दिया है!

बाद में, डिजाइनरों और डेवलपर्स के बीच बढ़ते सहयोग ने शुरुआती परियोजनाओं को आकर्षित करने की हमारी रणनीति के साथ मिलकर, हमें विभिन्न डिजाइन समूहों द्वारा व्यापक रूप से स्वीकार किए जाने की हमारी डिजाइन प्रणाली की क्षमता में विश्वास के साथ प्रेरित किया। इसके कारण बी 2 बी और बी 2 ई (बिजनेस वर्कर) की जरूरतों के लिए पूरी तरह से स्केलेबल सिस्टम डिज़ाइन जारी किया गया, जो कि अपने समर्पित पारिस्थितिकी तंत्र के साथ है, जिसका उपयोग वर्तमान में दुनिया भर में 750 से अधिक डिजिटल परियोजनाओं द्वारा किया जाता है।

लेकिन आइए हम आपको शुरुआत में वापस लाएं, ताकि हम विभिन्न चरणों के बारे में जान सकें, जो हमने गुजरे हैं, और रोजमर्रा के काम में इस्तेमाल होने वाले अपने औजारों के साथ संक्षिप्त रूप से परिचित हैं।

प्रारंभिक बिंदु: अतीत पर निर्माण

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

जब पहले SG मार्केट्स सेवाओं का विकास किया गया था, तो हमने बूटस्ट्रैप 3 का उपयोग किया था, लाभ ओपन सोर्स समुदाय का उपयोग था - हम खुद एक पहिया या साइकिल का आविष्कार नहीं करना चाहते थे।

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



हमारा पहला कदम यह समझना था कि नया पुस्तकालय कैसे काम करता है। हमने एक हज़ार से अधिक SCSS चरों की एक तालिका बनाई, जिसने हमें बूटस्ट्रैप को कॉन्फ़िगर करने के लिए जल्दी से पहचानने के लिए किन भागों को बदलने की आवश्यकता है।

फिर हमने अपनी विशिष्ट आवश्यकताओं के लिए चर जोड़े। परिणाम "SG" बूटस्ट्रैप 4 ("SGBS4") था, जो हमारे स्वयं के कलात्मक दिशाओं के साथ मौजूदा घटकों पर लागू होता है, जो हमारी मुख्य संरचना बनने के लिए तैयार था। कंपनी में बूटस्ट्रैप 3 के मौजूदा उपयोग ने एक नई प्रणाली को अपग्रेड करना आसान बना दिया।

मूल बातों का परिचय

एक सहमत तकनीकी नींव के साथ, हमने अपने डिजाइन सिस्टम की पूरी अवधारणा को रेखांकित करने वाले स्पष्ट सिद्धांतों के आसपास कलात्मक दिशा के लिए हमारे बुनियादी दिशानिर्देश बनाए।

टाइपोग्राफी
ज्यादातर मामलों में, टाइपोग्राफी साइट की सामग्री का 90% हिस्सा बनाती है। इसलिए, हमने अपने सिस्टम डिज़ाइन के केंद्र में टाइपोग्राफी रखी।

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

रंगों
हमारी पसंद अंतरराष्ट्रीय ग्राफिक शैली और वित्तीय उद्योग के सार से प्रेरित थी।



सिस्टम डिजाइन के शुरुआती चरणों में, हमारा अधिकांश समय बुनियादी सिफारिशों पर खर्च किया गया था। जब वे स्थिर हो गए, तो स्केलेबल घटकों के एक सेट की पहचान करना आसान था। आज, हर बार हम कुछ जोड़ना, सुधारना या बदलना चाहते हैं, हम इन बुनियादी सिद्धांतों का पालन करना सुनिश्चित करते हैं, क्योंकि वे सिस्टम को आगे बढ़ाने के लिए मिलकर काम करते हैं।

तीन व्हेल डिजाइन प्रणाली

मुख्य चर और कलात्मक दिशा की मुख्य दिशाएं नींव हैं, जिन पर हम अपनी डिजाइन प्रणाली बनाने में सक्षम थे। दूसरे शब्दों में, वे उप-परमाणु तत्व हैं जो तब परमाणुओं को बनाने की अनुमति देते हैं।

1. परमाणु डिजाइन की संरचना

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

चूंकि हमारे पास पहले से ही हमारे पिछले तकनीकी ढांचे से घटकों की एक मौजूदा संरचना थी, इसलिए हमने इसके दर्शन को संरक्षित करने और परमाणु डिजाइन के पांच प्रारंभिक स्तरों को कम करने का फैसला किया, जो निम्नलिखित हैं: घटक , पैटर्न और पैटर्न / विजेट । इन स्तरों के आरेख के मूल स्तर पर, हमने मुख्य चर - टाइपोग्राफी, रंग और अंतराल - को रखा है, जिसमें हमने सामग्री सिफारिशें जोड़ी हैं।

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

2. पैटर्न, पैटर्न और विगेट्स

हमारे पैटर्न, टेम्प्लेट और विजेट्स की नियमित रूप से समीक्षा की जाती है और नए उपयोग के मामलों और प्रतिक्रिया को प्रतिबिंबित करने के लिए अद्यतन किया जाता है ताकि हम यह सुनिश्चित कर सकें कि हम सबसे अच्छा उपयोगकर्ता अनुभव प्रदान करते हैं। ये संसाधन डेवलपर्स के लिए एक इंटरफेस के विकास की सुविधा भी देते हैं - पूरी प्रणाली पुन: प्रयोज्य है और (लगभग) कोड में अटूट है।

3. मार्गदर्शक

डिजाइनरों और डेवलपर्स को बुद्धिमानी से संसाधनों का उपयोग करने में मदद करने के लिए निर्देश और निर्देश।

हमारे दिशानिर्देश हमारे "सत्य का एक स्वर" हैं - वे हमें स्पष्ट और सुसंगत डिजाइन निर्देश देते हैं। हमारा सामान्य लक्ष्य हमारे उत्पादों के साथ उपयोगकर्ता की बातचीत को संयोजित करना है ताकि जब उपयोगकर्ता पहले से ही एक उत्पाद से परिचित हो, तो वह आसानी से दूसरों का उपयोग कर सके।

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

हमारी डिजाइन प्रक्रिया और इसका पारिस्थितिकी तंत्र

सिस्टम के पूरे जीवन चक्र में प्रक्रियाएं लगातार विकसित हो रही हैं। विकास सामंजस्यपूर्ण होने और अराजकता में न बढ़ने के लिए, किसी को अच्छी तरह से स्थापित प्रक्रियाओं पर भरोसा करना चाहिए।



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

1. प्रोजेक्ट संसाधन उन घटकों और टेम्पलेट्स के साथ एडोब एक्सडी में उपलब्ध हैं जो प्रोटोटाइपिंग के लिए उपयोग करने के लिए तैयार हैं।

2. किसी भी समय (कोड के टुकड़े के साथ) सिद्धांतों और उपयोग के नियमों को साझा करने के लिए आवश्यक दस्तावेज ।

3. इनविज़न और टाइपफॉर्म हमें अपने उपयोगकर्ताओं के साथ प्रोटोटाइप साझा करने और प्रतिक्रिया एकत्र करने में मदद करते हैं।

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



5. सैंडबॉक्स साइट , पूरे समुदाय के लिए उपयोग के साथ, कोड में सभी संपत्तियों के साथ तकनीकी प्रयोगों के लिए डिज़ाइन किया गया है। इसमें घटकों के प्रत्येक समूह के लिए पृष्ठ हैं और हमें वास्तविक समय में नए संस्करणों और सिस्टम डिज़ाइन के अपडेट का परीक्षण करने की अनुमति देता है (इसलिए, यदि हम कुछ करते हैं, तो कोई गंभीर परिणाम नहीं होगा!)। यह अद्यतन उपलब्ध होने तक विकास के लिए प्रतिक्रिया का एक और स्तर जोड़ता है।

6. Github Entreprise मुद्दों को ट्रैक करने, विकसित करने और एकत्र करने के लिए। पारदर्शिता और पारगम्यता सुनिश्चित करने के लिए, हम अपने घटकों में हर परिवर्तन को रिकॉर्ड करते हैं और सिस्टम का उपयोग करके डिजाइनरों और डेवलपर्स से प्रतिक्रिया, विनिर्देशों और परिवर्तनों को इकट्ठा करते हैं। कोई भी एक त्रुटि की रिपोर्ट कर सकता है और यहां तक ​​कि इसे पुल अनुरोध या विलोपन अनुरोध के साथ ठीक कर सकता है।

आगे क्या है? जाँच करें और सुधारें!

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

यदि आप अपना स्वयं का डिज़ाइन सिस्टम बनाना शुरू कर रहे हैं, तो यहां हमारा मुख्य सुझाव है: चौड़े दिमाग वाले रचनाकार रहें ! एक बात जो हमने अपने सिस्टम डिज़ाइन को बनाते समय सीखी, वह यह कि हम हर चीज़ के बारे में सही नहीं हो सकते हैं या पहली कोशिश में एक सही सिस्टम बना सकते हैं। एक सिस्टम डिज़ाइन बनाना एक बड़ी परियोजना है जिसके लिए बहुत काम की आवश्यकता होती है, लेकिन ध्यान रखें कि जो भी इसका उपयोग करता है वह मूल्यवान विचारों का वाहक हो सकता है। इसलिए, "आप इस युद्ध को नहीं जीतेंगे" प्रणाली के डिजाइन को अपनाने के साथ, यदि आप सिस्टम को खोलने से इनकार करते हैं और इसे स्केलेबल होने देते हैं।