वेब उद्योग में, आपकी विकास प्रक्रिया को सुव्यवस्थित करने के लिए , डिजाइनिंग की जाती है, और अंतिम डिजाइन प्रस्तुत करने से पहले इसे और विकसित किया जाता है या परीक्षण किया जाता है, कुछ अन्य मध्यवर्ती कदम इसमें शामिल हैं:
चरण 1: प्रेरणा प्राप्त करना:
यदि आप लगातार देखते हैं कि अन्य डिजाइनर या साइटें अपने वायरफ्रेम के लिए क्या कर रही हैं, तो आपको धीरे-धीरे आपके दिमाग में एक तस्वीर मिलेगी कि कैसे वायरफ्रेम स्क्रीन के लिए जानकारी को व्यवस्थित करने में मदद करता है।
और इसके लिए आप "Wirify" वायरफ्रेमिंग टूल का उपयोग कर सकते हैं, बस अपने बुकमार्क में बड़ा लिंक जोड़ें और किसी भी वांछित वेबसाइट पर मिला, बुकमार्क पर क्लिक करें, आप वेबसाइट को वायरफ्रेम में बदलते देखेंगे।
चरण 2: अपनी प्रक्रिया को डिजाइन करना:
अलग-अलग डिज़ाइनर्स वायरफ्रेमिंग और इसके अनुवाद को विज़ुअल या कोड में अलग-अलग तरीकों से करते हैं,
यहाँ केवल पथ का अनुसरण करने के लिए डिज़ाइनर नहीं है, कभी-कभी क्लाइंट सीधे मॉकअप बनाने के लिए पसंद करते हैं, और कुछ अधिक व्यवस्थित पसंद करते हैं,
स्केच => वायरफ्रेम => मॉकअप => कोड
चरण 3: स्केचिंग:
अब जब आप प्रेरित होते हैं, तो कुछ मोटे विचार और दृष्टिकोण की योजना बनाते हैं, तो हमेशा स्केचिंग से शुरू करना अच्छा होता है, कोई बात नहीं कि आप अपने माउस / स्टाइलस को नियंत्रित करने में कितने अच्छे हैं या आप जो भी उपयोग करते हैं, वे कागज, पेंसिल को हरा नहीं सकते हैं सादगी।
कागज पर हाथ की स्केचिंग हमेशा किसी भी डिजाइनर के लिए एक अच्छा शुरुआती बिंदु है। यह ध्यान केंद्रित करने और व्यवस्थित करने का एक त्वरित और आसान तरीका प्रदान करता है। यदि आप स्केचिंग के साथ बहुत सटीक हैं, तो आप इसे अपने अंतिम वायरफ्रेम के रूप में भी उपयोग कर सकते हैं।
चरण 4: वायरफ्रेमिंग:
वायरफ्रेम बनाना एक पहला कदम है जिसे आपको डिजाइन करने से पहले उठाना चाहिए।
वायरफ्रेम आपको एक वेबसाइट के भीतर तत्वों और सामग्री को व्यवस्थित और सरल बनाने में मदद करता है और विकास प्रक्रिया में एक आवश्यक उपकरण है।
एक वायरफ्रेम मूल रूप से एक डिजाइन में सामग्री लेआउट का एक दृश्य प्रतिनिधित्व है ।
एक इमारत की नींव की तरह, आपको यह तय करने से पहले मौलिक रूप से मजबूत होना चाहिए कि क्या इसे पेंट का महंगा कोट देना है।
वायरफ्रेम बनाते समय ध्यान देने योग्य बातें हैं:
अपने उपकरण उठाओ
यहाँ डिज़ाइनर्स के लिए माशेबल की 10 फ्री वायरफ्रेमिंग टूल्स की सूची है
एक ग्रिड स्थापित करना
सममित और समानांतर डिजाइन प्राप्त करने के लिए ग्रिड बहुत आवश्यक हैं।
जब भी आप एक अच्छी डिज़ाइन की गई वेबसाइट देखते हैं, तो आप पाएंगे कि यह सामग्री शरीर के एक विशिष्ट बिंदु से शुरू होती है और एक पर समाप्त होती है, जिन्हें ग्रिड के उपयोग द्वारा प्रबंधित किया जाता है।
बक्से के साथ लेआउट का निर्धारण करें
टाइपोग्राफी के साथ सूचना पदानुक्रम को परिभाषित करें
वायरफ्रेमिंग से बचने के लिए क्या करें:
- पृष्ठ पर बहुत कुछ हो रहा है।
- रंग और डिजाइन पर जोर
- बहुत विस्तार से
वायरफ्रेमिंग के लाभ:
वायरफ्रेम बनाने से क्लाइंट, डेवलपर, और डिजाइनर को वेबसाइट की संरचना पर एक महत्वपूर्ण नज़र डालने का अवसर मिलता है और उन्हें प्रक्रिया में आसानी से संशोधन करने की अनुमति मिलती है।
वायरफ्रेमिंग निम्नलिखित प्रमुख लाभ लाता है:
यह क्लाइंट को साइट डिज़ाइन (या री-डिज़ाइन) का एक प्रारंभिक, क्लोज़-अप दृश्य देता है।
यह डिजाइनर को प्रेरित कर सकता है, जिसके परिणामस्वरूप अधिक द्रव रचनात्मक प्रक्रिया हो सकती है।
यह डेवलपर को उन तत्वों की स्पष्ट तस्वीर देता है जिन्हें उन्हें कोड करने की आवश्यकता होगी।
यह प्रत्येक पृष्ठ पर कॉल को स्पष्ट करने के लिए कार्रवाई करता है।
इसे अनुकूलित करना आसान है और वेबसाइट के कई वर्गों का लेआउट दिखा सकता है।
चरण 5: मॉकअप / विज़ुअल:
अब अंतिम वायरफ्रेम को अंतिम मॉकअप या विज़ुअल में परिवर्तित किया जा सकता है:
Mockuos के लिए कुछ सामान्य उपकरण Adobe Photoshop, Corel Draw और बहुत नए लेकिन पहले से ही पॉपुलेर स्केच आदि हैं।
मॉकअप में परिवर्तित करते समय ध्यान देने योग्य बातें हैं:
सूचना पदानुक्रम
आपको इस बात पर विचार करने की आवश्यकता हो सकती है कि क्या हाइलाइट किया जाना है और क्या साइड इंफॉर्मेशन, और कलर स्कीम, री-पोजिशनिंग और टाइपोग्राफी इतनी तय की गई है।
टाइपोग्राफी
विकल्पों के सही संयोजन के साथ वेबसाइट के लिए नेत्रहीन अपील और पठनीय टाइपोग्राफी चुनें। फ़ॉन्ट-आकार, वजन और रंग पठनीयता में महत्वपूर्ण भूमिका निभाते हैं।
रंग योजना
एक रंग योजना, जो ब्रांड की पहचान और मनोवैज्ञानिक रंगों का प्रतिनिधित्व करती है, खतरे के लिए लाल, सफलता के लिए हरा इत्यादि।
चरण 6: प्रोटोटाइप :
एक प्रोटोटाइप एक प्रारंभिक नमूना, मॉडल, या एक अवधारणा या प्रक्रिया का परीक्षण करने के लिए निर्मित उत्पाद की रिहाई या प्रतिकृति या सीखी जाने वाली चीज़ के रूप में कार्य करने के लिए है।
वायरफ्रेम हैंडल स्ट्रक्चर, मॉकअप विजुअल्स को हैंडल करते हैं और प्रोटोटाइप यूटिलिटी (वेब / ऐप उत्पादों में) को हैंडल करते हैं।
एक प्रोटोटाइप उत्पाद बनाया जाता है और फिर इसका परीक्षण किया जाता है और POC (कॉन्सेप्ट का प्रो) किया जाता है, अब हम रियल प्रोडक्ट की ओर अग्रसर हो सकते हैं (जाहिर है कि अगर कोई बदलाव की जरूरत नहीं है)
छवियों और अन्य लिंक के साथ मूल लेख के लिए लिंक
