स्टाइल गाइड कैसे बनाएं: UI फ्रेमवर्क के साथ शुरू करें

AdRoll के UX डिज़ाइनर के साथ क्यू एंड ए इस बात पर कि हमने यह क्यों किया और हमने क्या सीखा

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

नमस्ते! मैं आर्य श्रीनिवासन हूं, जो AdRoll के एक UX शोधकर्ता हैं। मैं मेसन ली के साथ बैठ गया, जो कि एक UX डिजाइनर है, जो AdRoll के मूल विज्ञापन API उत्पाद पर काम कर रहा है, अपने काम के बारे में बात करने के लिए AdRoll की स्टाइल गाइड विकसित कर रहा है।

आर्य: चीजों को बंद करने के लिए, आपने शैली गाइड परियोजना क्यों शुरू की? समस्या क्या थी जिसे हल करने की आवश्यकता थी?

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

व्यक्तिगत डिजाइनरों के मोक्स और हमारे एप्लिकेशन में बटन अलग-अलग दिखते हैं।

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

डिजाइन पर ध्यान केंद्रित करने के लिए, हमें पहले मौजूदा विसंगतियों को ठीक करना होगा। यहाँ UX डिज़ाइनर आमतौर पर एक या दो उत्पादों पर ध्यान केंद्रित करते हैं, इसलिए हमारी टीम को सभी उत्पादों के डिज़ाइन के बारे में सोचने के लिए, मैंने UI दिशानिर्देशों पर चर्चा करने के लिए एक साप्ताहिक "UI स्मैकडाउन" बैठक की स्थापना की।

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

आर्य: आपने उल्लेख किया है कि आप चाहते हैं कि AdRoll एक डिजाइन केंद्रित कंपनी हो - आपको इससे क्या मतलब है?

मेसन: मैं चाहता हूं कि AdRoll सबसे आगे डिजाइन रखे ताकि यह एक प्रतिस्पर्धी विभेदीकरण हो - ग्राहकों द्वारा एक अच्छी तरह से डिज़ाइन किए गए उत्पाद के रूप में पहचाना जाए जो वास्तव में उनकी जरूरतों को हल करता है।

आर्य: स्टाइल गाइड के लिए आपके तात्कालिक लक्ष्य क्या थे? क्या आपके पास इस परियोजना के लिए एक लंबी अवधि की दृष्टि है?

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

मेरा मध्य-अवधि का लक्ष्य इस शैली को "रोलअप", AdRoll के आंतरिक UI घटक पुस्तकालय में हमारे कोड में परिभाषित करना है। यदि हमारे पास एक पूर्वनिर्धारित शैली शीट है, तो हमारे सभी इंजीनियरों को इसे कॉपी करने की आवश्यकता है। डिजाइनर और इंजीनियर एक ही भाषा बोल सकते हैं।

आर्य: स्टाइल गाइड बनाते समय क्या आप किसी समस्या में थे? आपने उन्हें कैसे हल किया?

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

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

यहां हमारी शैली मार्गदर्शिका के लचीलेपन का एक उदाहरण है। इस भू-गर्भीय ड्रॉपडाउन में पैडिंग के लिए हमारा प्रारंभिक निर्णय बहुत बड़ा था, इसलिए हमने इस उपयोग के मामले के लिए स्टाइल गाइड को संशोधित किया।पहले (बाएं), बाद में (दाएं)

मैं वास्तव में एक और चुनौती को दूर करना चाहता हूं! नामकरण मुश्किल हो सकता है। जैसा कि मैंने पहले कहा था, मैं चाहता हूं कि डिजाइनर और इंजीनियर एक ही भाषा बोलें, लेकिन यह सावधानी से किए जाने की जरूरत है। ड्रॉपडाउन के रूप में सरल कुछ के लिए, हमारे पास वास्तव में कई भिन्नताएं हैं (एक चेकबॉक्स के साथ, दूसरा चेकबॉक्स और एक पाठ ब्लॉक के साथ, और दूसरा एक मानक ड्रॉपडाउन मेनू है)। हम तीन अलग-अलग ड्रॉपडाउन का नाम कैसे देते हैं, इसलिए इसकी सार्वभौमिक समझ किसमें है?

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

हमने यूआई विसंगतियों पर चर्चा करने और घटक नियमों पर सहयोग करने के लिए वेक का उपयोग कैसे किया।

आर्य: क्या AdRoll के UI के बारे में कुछ अनोखा है, जिसे स्टाइल गाइड बनाते समय आपको विचार करना था?

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

आर्य: क्या कुछ चीजें हैं जो आप चाहते हैं कि आप जानते हैं कि आपने स्टाइल गाइड बनाना कब शुरू किया था?

मेसन: काश मेरे पास इस बात की गहरी समझ होती कि हमारे सभी उत्पाद शुरू से कैसे काम करते हैं। उदाहरण के लिए, हम साझा करते हैं कि हमारे साप्ताहिक डिजाइन समालोचना बैठक में हमारे संबंधित उत्पाद का काम कैसे होता है, इसलिए मुझे पता है कि SendRoll (हमारा ईमेल पुनर्प्राप्त उत्पाद) सतह पर कैसे काम करता है, लेकिन मुझे SendRoll का गहरा ज्ञान नहीं है जो यह डिजाइनर करता है। मुझे लगता है कि स्टाइल गाइड पर काम करते समय उत्पाद की बारीक समझ निश्चित रूप से मदद करती है, क्योंकि मेरे पास संभावित सभी संभावित मामलों की बेहतर समझ है।

आर्य: तो एक डिजाइनर की प्रक्रिया और उनके उत्पाद की सामान्य समझ हासिल करने का सबसे अच्छा तरीका क्या है?

मेसन: भले ही हम वास्तव में अपने उत्पादों की शिपिंग पर ध्यान केंद्रित कर रहे हों, हम अपनी साप्ताहिक डिजाइन क्रिटिक मीटिंग में अपनी डिजाइन प्रक्रिया को साझा करने का अच्छा काम करते हैं। मुझे लगता है कि हम प्रत्येक बैठक के बाद लूप को बंद करने के बारे में बेहतर हो सकते हैं - डिजाइनर ने बैठक से प्रतिक्रिया को कैसे शामिल किया? एक बार जब उत्पाद हमारे विज्ञापनदाताओं द्वारा भेज दिया जाता है और उपयोग किया जाता है, तो हम यह भी साझा कर सकते हैं कि विज्ञापनदाता विश्लेषिकी से अंतर्दृष्टि के आधार पर उत्पादों का उपयोग कैसे कर रहे हैं।

आर्य: इस परियोजना पर काम करते समय आपके द्वारा संदर्भित कोई संसाधन थे?

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

आर्य: हमारी शैली मार्गदर्शिका की स्थिति क्या है?

मेसन: मैंने उन सभी UI तत्वों को कैप्चर किया और उनका पुनरीक्षण किया जो हम अपने विभिन्न उत्पादों में उपयोग करते हैं और उन्हें नींव, घटकों, पैटर्न और पृष्ठों में वर्गीकृत किया है, जो हमारे UI डिजाइनों के लिए सत्य के स्रोत के रूप में काम करेंगे।

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

पढ़ने के लिए धन्यवाद!

इन आगामी विषयों के लिए बाहर देखें क्योंकि हम अपनी स्टाइल गाइड विकसित करते हैं:

  • UI फ्रेमवर्क सहयोग को कैसे सरल बनाता है
  • UI फ्रेमवर्क के आधार पर नई स्टाइलशीट विकसित करना
  • स्टाइल गाइड वेबसाइट कैसे बनायें
  • हमारी आवाज और टोन खोजने की यात्रा