वायरफ्रार्मिंग के लिए शुरुआत की मार्गदर्शिका

Hindi (हिंदी) translation by Shubham Sharma (you can also view the original English article)

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

यह वास्तुशिल्प खाका की तरह है; वास्तविक घर बनाने के लिए आपको समझने से पहले आपको इसे दो-आयामी काले और सफेद आरेखों में देखना होगा। इसी तरह एक स्क्रीन डिज़ाइन के लिए, आप फ़ोटोशॉप में पिक्सेल परतों का निर्माण शुरू नहीं कर सकते हैं, या कोड के ब्लॉक लिख सकते हैं, यह जानकारी के बिना कि जानकारी कहाँ जा रही है।

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

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

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

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

चरण 1: प्रेरणा प्राप्त करना

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

संभवत: इस निफ्टी ब्राउज़र बुकमार्कलेट को भी पकड़ो, Wirify जो आपको किसी भी लाइव साइट के "वायरफ्रेम-डी" संस्करण को देखने में सक्षम बनाता है।

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

चरण 2: आपकी प्रक्रिया को डिजाइन करना

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

37 सिग्नल अच्छी तरह से स्केच के इस्तेमाल की वकालत करते है और सीधे कोड के लिए जाना जाता है, हालांकि ऐसा लगता है कि उनके कुछ डिजाइनर अपनी प्रक्रिया में दृश्य मॉकअप भी शामिल करते हैं।

मेरे लिए, मैं कुछ सुव्यवस्थित प्रक्रिया के लिए पर्याप्त डिजाइन-टू-कोड चक्रों के माध्यम से चला गया हूं। यह एक कदम है जिसे कुछ लोगों के बारे में नहीं सोचा जा सकता है, लेकिन मैं किसी भी एचटीएमएल/सीएसएस(HTML/CSS) फ्रेमवर्क पर विचार भी करता हूं जो कि मैं इस प्रोजेक्ट में इस्तेमाल करूंगा।

उदाहरण के लिए, मैं ब्लूप्रिंट में एक टन की साइटों का निर्माण करता था, इस प्रकार मैं अपने वायरफ्रेम और ब्लूप्रिंट दोनों को उसी 12-कॉलम ग्रिड में सेट कर दूँगा। यह प्रोटोटाइप और विकास समय की गति को बढ़ाता है, क्योंकि मेरे सीएसएस स्टाइलशीट में प्रत्येक तत्व की चौड़ाई लिखने के बजाय, अब वे एक से बारह स्तंभ चौड़े से पूर्व-परिभाषित हैं। मैं अब इसके उत्तरदायी डिजाइन समर्थन के बजाय सीएसएसग्रिड(cssgrid) का उपयोग करता हूं, लेकिन यह अभी भी एक 12-कॉलम ग्रिड पर सेट है जिसे आप फ़ोटोशॉप टेम्प्लेट के रूप में डाउनलोड कर सकते हैं।

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

आप अंततः अपनी पसंदीदा प्रक्रिया विकसित करेंगे लेकिन ट्यूटोरियल के लिए मैं एक उदाहरण के रूप में अपनी विशिष्ट प्रक्रिया का उपयोग करूँगा:

मेरा वायरफ्रेमिंग टूल मुख्य रूप से तीन कारणों से आमतौर पर इलस्ट्रेटर का उपयोग करने का कारण है:

शैलियाँ - आप प्रकार और ऑब्जेक्ट शैलियों को बचा सकते हैं और उन्हें फिर से उपयोग कर सकते हैं, जैसे कि सीएसएस।
एकाधिक ऑब्जेक्ट्स को संशोधित करना, स्थानांतरित करना या स्केल करना आसान है।
यह फ़ोटोशॉप को बाद में आसान संक्रमण देता है।

हालांकि, मैं अन्य उपकरण का उपयोग करता हूं और यह परियोजना परिदृश्य पर निर्भर करता है। मैं अगले कुछ हिस्सों में कुछ लोकप्रिय टूल्स, उनकी ताकत और उनकी कमजोरियों को संक्षेप में रूपरेखा करूंगा।

चरण 3: अपने उपकरण चुनें

यहां कोई विशेष क्रम में कुछ लोकप्रिय उपकरण दिए गए हैं:

बलमाइक(Balsamiq)

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

Sample Balsamiq wireframe from the Balsamiq website

आप इसे मैक, विंडोज और लिनक्स के लिए उपलब्ध डेस्कटॉप संस्करणों के साथ लगभग किसी भी प्लेटफार्म पर भी उपयोग कर सकते हैं, साथ ही इसमें एक वेब संस्करण है यदि आप क्लाउड में काम करना पसंद करते हैं। आईओएस(iOS) के लिए iMockups जैसी तीसरी पार्टी क्षुधा भी बलमाइ कनिर्यात स्वरूपों का समर्थन करते हैं।

ओम्निग्रेफाले(Omnigraffle)

एक पुरानी मैक पसंदीदा, ओमेंग्राफ़ल(Omnigraffle) में पुन: प्रयोज्य घटकों का व्यापक रूप से समर्थित उपयोगकर्ता-योगदान पुस्तकालय भी है; ग्रैफ़लेटोपिया(Graffletopia)।

youll like omnigraffle if you enjoy using beautiful stencils like this one

चूंकि यह विशेष रूप से एक आरेखण अनुप्रयोग के रूप में विकसित किया गया था, ओम्निग्रेफाले(Omnigraffle) में भी में भी जटिल विशेषताएं हैं जैसे स्वत: लेआउट, कस्टम ऑब्जेक्ट शैलियों का समर्थन, स्मार्ट गाइड और ग्राफ टूल जैसी जटिल विशेषताएं हैं। इन सुविधाओं में से कुछ भी एडोब सीएस सूट में उपलब्ध हैं, लेकिन अगर आपके पास सीएस सुइट नहीं है, तो विस्तृत वायरफ्रेम बनाने के लिए ओमंइग्राफेले का अच्छा मूल्य (~ $ 100) है।

ऐक्सयोर(Axure)

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

फ्लेरबिल्डर(Flairbuilder)

ब्लॉक पर एक नया बच्चा, फ्लेरबिल्डर(Flairbuilder) के साथ बातचीत के लिए बहुत मजबूत समर्थन है।

इसमें एक विशाल घटक लाइब्रेरी भी है, जो मास्टर पेजों का समर्थन करता है और आप ऑनलाइन देखने के लिए प्रोटोटाइप को निर्यात कर सकते हैं।

ऑनलाइन आवेदन

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

कीनोट/पावरपॉइंट

कीनोपॉपिया "मोबाइल, वेब और डेस्कटॉप ऐप मॉकअप बनाने के लिए अपने पसंदीदा प्रस्तुति आवेदन को सर्वश्रेष्ठ रैपिड प्रोटोटाइप टूल में बदल देती है"। गैर-मैक उपयोगकर्ताओं के लिए, झल्लाहट मत करना, कीनोपोटिया भी पावरपोइंट टेम्पलेट प्रदान करती है।

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

एडोब सीएस(Adobe CS)

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

फाइअर्वर्क (Fireworks)

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

इलस्ट्रेटर

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

क्या यह एक विजेता बनाता है? संपादन योग्य परतों के साथ एक PSD के रूप में निर्यात करने की क्षमता, फ़ोटोशॉप को मजबूत प्रति और पेस्ट समर्थन, और स्टाइल शैली के साथ मजबूत टाइपोग्राफी नियंत्रण जो आप सहेज, संपादित और पुन: उपयोग कर सकते हैं, जैसे कि सीएसएस(CSS)।

इनडिज़ाइन(Indesign)

इलस्ट्रेटर को भी मजबूत टाइपोग्राफ़िक शैलियों नियंत्रण, मजबूत मास्टर पृष्ठ समर्थन और इंटरैक्टिव प्रोटोटाइप बनाने की हाल की क्षमता के साथ समान ताकत।

Have you seen the interactive controls of InDesign

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

प्रोटोशेयर(ProtoShare)

"शक्तिशाली प्रोटोटाइप आसान बनाऐ।" हाल ही में एक नया वॉयसविग(wysiwyg ) पैलेट के साथ संस्करण 9 जारी किया। जाँच करने योग्य

चरण 4: एक ग्रिड सेट करना

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

मैं इस ट्यूटोरियल के लिए इलस्ट्रेटर का उपयोग कर रहा हूं, लेकिन आपके किसी भी उपकरण पर चरणों को लागू किया जा सकता है।

सबसे पहले, एक दस्तावेज़ आकार सेट करें। मैंने 1280 x 900 का इस्तेमाल किया क्योंकि मैं सीएसएसग्रिड(cssgrid) का उपयोग करूँगा जो मेरी वेबसाइट को मोबाइल रिज़ॉल्यूशन के बीच अधिकतम 1140 पिक्सल में आसानी से स्केल करने देगा।

सीएसएसग्रिड से डाउनलोड किए गए टेम्पलेट को अपने दस्तावेज़ में रखें।

युक्ति:

डाउनलोड के लिए बहुत सारे ग्रिड टेम्पलेट्स उपलब्ध हैं, लेकिन अगर आप अपनी खुद की अनुकूलित करने में रुचि रखते हैं तो responsify.it पर नज़र डालें।

चरण 5: बॉक्स के साथ लेआउट निर्धारित करें

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

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

यहां एक ब्लॉग के लिए एक लेआउट है, जिसमें ग्राहक के लिए सावधानीपूर्वक विज्ञापन कंटेनरों और विशिष्ट निर्देश दिए गए हैं:

चरण 6: टाइपोग्राफी के साथ सूचना पदानुक्रम परिभाषित करें

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

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

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

नीचे दिए गए उदाहरण में, मैंने फैसला किया है कि मैं चाहता हूं कि स्क्रीनशॉट्स को और अधिक प्रभाव का असर हो और मैंने यह निर्धारित करने के लिए भी ब्लैक बॉक्स इस्तेमाल करना शुरू कर दिया है कि कौन से क्षेत्र इस वेबसाइट के लिए दृश्य महत्व लेते हैं:

चरण 7: ग्रेस्केल के साथ ठीक-ट्यूनिंग

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

चरण 8: हाय-परिभाषा वायरफ्रेम

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

इसमें रंग भी शामिल हो सकता है:

सामान्य विचार यह है कि विज़ुअल / कोड अवस्था में आप पॉलिशिंग मोड में रहना चाहते हैं और अब मसौदा तैयार करने या मोड का प्रयोग नहीं करना चाहते। फ़्रीस्कोप में चलने वाली परतों और पिक्सल के बजाए चलने वाले चक्रों (प्रतिपुष्टि <-> वायरफ़्रमिंग) जितनी जल्दी हो सके एक वायरफ्रेमिंग अनुप्रयोग में आप आराम से उपयोग कर रहे हैं।

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

यदि आप डेवलपर्स की एक टीम के साथ काम करते हैं, तो आप विजुअल पर काम करते समय मूल रूपरेखा को कोड करने के लिए डेवलपर को स्वीकृत वायरफ्रेम को बंद करना चाह सकते हैं।

चरण 9: एक वायरफ्रेम को किसी दृश्य में अनुवाद करना

पहले उल्लेख किया गया, मैं वायरफ़्रेमिंग के लिए इलस्ट्रेटर का उपयोग करना पसंद करता हूं, इसलिए मैं इसे एक। Psd में अधिकांश प्रकार की परतों को संपादन योग्य के साथ निर्यात कर सकता हूं। जब तक मैं फ़ोटोशॉप में हूं, तब तक मुझे उस प्रकार को संपादित करने की ज़रूरत नहीं होगी (फ़ोटोशॉप में अवर प्रकार नियंत्रण उपकरण हैं, हालांकि बहुत सी CS6 में सुधार हुआ है):

यहां एक वायरफ्रेम का एक उदाहरण है जिसका विज़ुअल में अनुवाद किया गया है। वायरफ्रेम की रीढ़ काफी हद तक बरकरार है, हालांकि इसमें आँखों से किए गए बदलाव हैं। आप इस वेबसाइट को लाइव देख सकते हैं:

निष्कर्ष

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

साथ ही, विभिन्न उपकरणों और प्रक्रियाओं के साथ प्रयोग करने में कुछ समय बिताएं। एक बार जब आप एक ऐसा एप्लिकेशन ढूंढते हैं जो आपके लिए सहज महसूस करता है तो आपको उस समय के निवेश का मूल्य मिलेगा।

कृपया टिप्पणी में किसी भी सवाल पूछने के लिए बेझिझक, पढ़ने के लिए धन्यवाद!

अतिरिक्त संसाधन

यदि आप वायरफ्रेमिंग के बारे में और भी जानना चाहते हैं, तो आप इन संसाधनों को देख सकते हैं।