UI डिज़ाइन के लिए पेशेवर गाइड

विषय

• UI डिज़ाइनर क्या करता है?
• वेब बनाम देशी ऐप्स
• अपने कौशल में सुधार

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

जब मैं विज्ञान-फाई फिल्में देखता, तो मैं इंटरफेस देखता। और जब मैं वीडियो गेम खेलता था, तो मैं देखता था कि मेन्यू किस तरह से तैयार किया गया था। यदि इनमें से कोई भी लक्षण आपको परिचित लगता है, तो आप दिल से UI डिज़ाइनर भी हो सकते हैं।

मैंने अपनी एजेंसी की नौकरी छोड़ दी और अपनी खुद की कंपनी शुरू की। अपने लिंक्डइन पेज पर, मैंने अपने नए करियर लक्ष्य को संक्षेप में प्रस्तुत करने का प्रयास किया: सर्वोत्तम सॉफ़्टवेयर को संभव बनाने के लिए। मुझे एक फ्रीलांसर के रूप में शुरू हुए चार साल हो चुके हैं, और मेरी यात्रा रुकी नहीं है। इन दिनों मैं एक छोटी UI डिज़ाइन कंपनी चलाने में मदद करता हूँ जिसका नाम है मोनो. हमने हाल ही में अपने चौथे टीम के सदस्य का स्वागत किया।

इस लेख में मैं वर्णन करना चाहता हूं कि यूआई डिजाइनर बनना कैसा होता है, जिसमें वास्तव में नौकरी क्या होती है, सर्वोत्तम शिक्षण संसाधन कहां से प्राप्त करें, और अपने शिल्प में बेहतर कैसे प्राप्त करें।

UI डिज़ाइनर क्या करता है?

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

ग्राहक संचार

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

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

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

सिंक्रोनस और एसिंक्रोनस संचार विधियों को संयोजित करना उपयोगी है। यदि आपको बहुत सारी जानकारी की शीघ्रता से आवश्यकता है, तो कॉल करना बहुत अच्छा है, लेकिन आपको उसी समय आसपास रहना होगा। हम स्लैक को अपना 'वर्चुअल वाटर कूलर' मानते हैं और जटिल डिजाइन परियोजनाओं के प्रबंधन के लिए बेसकैंप का उपयोग करते हैं। जब हम HTML और CSS का उपयोग करके प्रोटोटाइप डिज़ाइन करते हैं, तो हम सीधे कोड पर चर्चा करने के लिए GitHub मुद्दों का उपयोग करते हैं।

अनुसंधान

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

अनुसंधान वह है जो आपके डिजाइन विकल्पों को सूचित करता है। यह एक लेख है जिसे आपने एक बार पढ़ा है, या वह नई चीज़ जिसे Apple ने अभी जारी किया है। जब यह समझाने का समय आता है कि आपने एक विशेष डिज़ाइन विकल्प क्यों बनाया, तो आपका शोध आपका समर्थन करता है।

अनुसंधान बहुत व्यापक हो सकता है। मैं अक्सर अनुसंधान उद्देश्यों के लिए नए उपकरणों का परीक्षण करता हूं या इसके यूजर इंटरफेस का अध्ययन करने के लिए एक नए वेब ऐप के लिए साइन अप करता हूं।

डिजाइन और प्रोटोटाइप

एक डिज़ाइनर के रूप में, आप संभवतः अपना अधिकांश समय डिज़ाइन और प्रोटोटाइप कार्य करने में व्यतीत करेंगे। एक UI डिज़ाइन प्रोजेक्ट स्केचिंग से लेकर विस्तृत डिज़ाइन तक, कोडिंग तक, किसी भी तरह से आगे बढ़ सकता है।

आपके द्वारा उपयोग की जाने वाली विधि काफी हद तक परियोजना के प्रकार पर निर्भर करती है। आप क्या डिजाइन कर रहे हैं? क्या यह एक वेबसाइट है, या आप इसे एक ऐप कहेंगे? क्या यह देशी तकनीक का उपयोग करता है? क्या यह एक नया स्वरूप है या आप खरोंच से शुरू कर रहे हैं?

हमारी कंपनी में कोई निश्चित प्रक्रिया नहीं है, लेकिन अधिकांश परियोजनाएं एक ही मोटे क्रम का पालन करती हैं: वे स्केच और वायरफ्रेम से शुरू होती हैं, विस्तृत दृश्य और इंटरैक्शन डिज़ाइन पर जाती हैं, और एक प्रोटोटाइप के साथ समाप्त होती हैं।

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

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

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

डेवलपर संचार

UI डिज़ाइनर के काम का अक्सर भुला दिया जाने वाला हिस्सा डेवलपर संचार है। इन दिनों आप केवल अपने डिजाइनों को देवों को भेजने और उन्हें सही तरीके से लागू करने की उम्मीद करने से दूर नहीं हो सकते। सबसे अच्छे डिज़ाइनर जानते हैं कि चुनौती डिज़ाइन बनाने में नहीं है, बल्कि इसे संप्रेषित करने में है - न केवल उन हितधारकों के लिए जिन्हें अपनी स्वीकृति देनी है, बल्कि उन डेवलपर्स के लिए भी जिन्हें इसे लागू करना है।

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

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

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

वेब बनाम देशी ऐप्स

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

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

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

हमारी कंपनी में, हम बूटस्ट्रैप का उपयोग करना पसंद करते हैं। यह बटन, डेटा टेबल और मोडल जैसे सामान्य UI तत्वों के लिए समझदार डिफ़ॉल्ट आकार प्रदान करता है।

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

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

वेब बाधाएं

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

हाल ही में, 'सरसों को काटना' लोकप्रिय हो गया है। बीबीसी की वेब टीम द्वारा चैंपियन, इसमें 'अच्छे' और 'बुरे' ब्राउज़रों के बीच अंतर करना और 'खराब' ब्राउज़रों को सीमित अनुभव प्रदान करना शामिल है। हालाँकि, यह वास्तव में केवल सामग्री साइटों के लिए काम करता है।

जब एप्लिकेशन-जैसे अनुभवों की बात आती है, तो कई लोग विकास को आसान बनाने के लिए केवल कुछ प्रमुख ब्राउज़रों के लिए समर्थन सीमित कर रहे हैं। अफसोस की बात है कि यह हमें 1996 की स्थिति में वापस लाता है जहां आपको सामग्री देखने के लिए एक निश्चित ब्राउज़र की आवश्यकता होती है।

अपने कौशल में सुधार

तो, आप तेजी से बढ़ते वेब उद्योग के साथ अप टू डेट कैसे रहते हैं और अपने कौशल में सुधार कैसे करते हैं? आइए नजर डालते हैं अपने कौशल को बढ़ाने के लिए कुछ अलग तरीकों पर...

मंच ज्ञान

एक डिजाइनर के शस्त्रागार का एक प्रमुख हिस्सा मंच ज्ञान है। आपको विभिन्न ऑपरेटिंग सिस्टम के बारे में पता होना चाहिए, और लोग उनका उपयोग कैसे कर रहे हैं। डिजाइनरों के रूप में, हम मैक का उपयोग करते हैं, लेकिन फिर यह भूलना आसान है कि वहां के अधिकांश लोग अपना काम पूरा करने के लिए विंडोज बॉक्स का उपयोग कर रहे हैं।

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

मैं यह जांचने के लिए नियमित रूप से नया हार्डवेयर खरीदता हूं कि यह कैसे काम करता है। मैंने सिर्फ प्लेटफॉर्म का परीक्षण करने के लिए एक Apple वॉच खरीदी। मैंने तब इसे बेच दिया क्योंकि मुझे लगा कि यह मेरे जीवन में इतना कुछ नहीं जोड़ रहा है।

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

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

मूल बातें पर वापस जाएं

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

यदि आप मॉडेलिटी और अफोर्डेंस जैसी अवधारणाओं के बारे में नहीं जानते हैं, तो आपको पढ़ने की जरूरत है। आपको यह समझाने में सक्षम होना चाहिए कि फिट्स का नियम क्या है। निकटता का गेस्टाल्ट नियम? यह UI डिज़ाइन की रोटी और मक्खन है।

खेलों और फिल्मों से प्रेरणा लें

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

खेल प्रवृत्तियों का भी संकेत कर सकते हैं। कॉलिन मैकरे रैली के मेनू में पाया गया अतिसूक्ष्मवाद मुझे iOS7 की दिशा की याद दिलाता है। एक तरह से, UI एनीमेशन डिज़ाइन जो अब ट्रेंडी है, वर्षों और वर्षों पहले खेलों में दिखाई दे रहा था। स्क्यूओमॉर्फिज्म से नंगे, कार्यात्मक इंटरफेस और 'फ्लैट डिजाइन' की ओर कदम खेलों में भी स्पष्ट है। २००६ के विस्मरण की तुलना २०११ के स्किरिम से करें। दोनों खेल एक ही श्रृंखला में आरपीजी हैं, लेकिन अंतर हड़ताली है।

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

आप एक डिजाइनर के रूप में कड़ी मेहनत, दृढ़ता, अपने साथियों से बात करने और बहुत कुछ पढ़ने के माध्यम से विकसित होते हैं। लगभग एक साल पहले मैंने न्यूयॉर्क टाइम्स में 80 के दशक के लोगों के बारे में एक लेख पढ़ा था जो अपने शिल्प को निखारना जारी रखते हैं। मुझे ऐसा लग रहा है कि मैं अभी शुरुआत कर रहा हूं। आप क्या?