अपने डिजाइन शुरू करने के लिए सरल वायरफ्रेम का उपयोग करना सीखें
एक वेब वायरफ्रेम आपको यह दिखाने के लिए एक सरल दृश्य मार्गदर्शिका है कि एक वेब पेज कैसा दिखता है। यह किसी भी ग्राफिक्स या पाठ का उपयोग किए बिना किसी पृष्ठ की संरचना का सुझाव देता है। एक वेबसाइट वायरफ्रेम पूरी साइट संरचना दिखाएगा - जिसमें पेजों से लिंक किया गया है।
वेब वायरफ्रेम आपके डिज़ाइन के काम को शुरू करने का एक शानदार तरीका है। और जब बड़ी मात्रा में विस्तार के साथ जटिल वायरफ्रेम बनाना संभव है, तो आपकी योजना नैपकिन और कलम से शुरू हो सकती है। अच्छे वायरफ्रेम बनाने की कुंजी सभी दृश्य तत्वों को छोड़ना है। चित्रों और पाठ का प्रतिनिधित्व करने के लिए बक्से और रेखाओं का प्रयोग करें।
एक वेब पेज वायरफ्रेम में शामिल करने के लिए चीजें:
- प्राथमिक ग्राफिकल तत्वों के लिए बक्से
- हेडलाइंस और उप-हेड की नियुक्ति
- एक साधारण लेआउट संरचना
- कार्रवाई करने के लिए कॉल
- पाठ ब्लॉक
एक सरल वेब वायरफ्रेम कैसे बनाएं
आपके पास आसान कागज़ के किसी भी स्क्रैप का उपयोग करके एक वेब पेज वायरफ्रेम बनाएं। यहां बताया गया है कि मैं इसे कैसे करता हूं:
- एक बड़ा आयताकार बनाएं - यह पूरे पृष्ठ या केवल दृश्य भाग का प्रतिनिधित्व कर सकता है। मैं आमतौर पर दृश्यमान भाग से शुरू होता हूं, और फिर इसे तत्वों को शामिल करने के लिए विस्तारित करता हूं जो गुना के नीचे होंगे।
- लेआउट स्केच करें - क्या यह 2-कॉलम, 3-कॉलम है?
- हेडर ग्राफ़िक के लिए बॉक्स में जोड़ें - अपने कॉलम पर ड्रा करें यदि आप कॉलम के ऊपर एक ही शीर्षलेख होना चाहते हैं, या बस इसे जहां आप चाहते हैं उसे जोड़ें।
- "शीर्षक" लिखें जहां आप अपना एच 1 शीर्षक होना चाहते हैं।
- "सब-हेड" लिखें जहां आप एच 2 और निचली हेडलाइंस चाहते हैं। यह मदद करता है अगर आप उन्हें आनुपातिक बनाते हैं - एच 2 से छोटा एच 2, एच 3 से छोटा एच 3 इत्यादि।
- अन्य छवियों के लिए बक्से में जोड़ें
- नेविगेशन में जोड़ें। यदि आप टैब की योजना बना रहे हैं, तो बस बॉक्स बनाएं, और शीर्ष पर "नेविगेशन" लिखें। या कॉलम में बुलेट सूचियां डाल दें जहां आप नेविगेशन चाहते हैं। सामग्री मत लिखो। बस "नेविगेशन" लिखें या टेक्स्ट का प्रतिनिधित्व करने के लिए एक लाइन का उपयोग करें।
- पृष्ठ पर अतिरिक्त तत्व जोड़ें - पहचानें कि वे टेक्स्ट के साथ क्या हैं, लेकिन वास्तविक सामग्री टेक्स्ट का उपयोग न करें। उदाहरण के लिए, यदि आप निचले दाएं भाग में कॉल टू एक्शन बटन चाहते हैं, तो वहां एक बॉक्स डालें, और इसे "कार्रवाई पर कॉल करें" लेबल करें। "अब खरीदें!" मत लिखो उस बॉक्स में।
एक बार जब आपको अपना सरल वायरफ़्रेम लिखा हो, और इसे एक बार स्केच करने के लिए आपको 15 मिनट से अधिक समय नहीं लेना चाहिए, तो इसे किसी और को दिखाएं। उनसे पूछें कि क्या कुछ याद आ रही है और अन्य प्रतिक्रिया के लिए। वे जो कहते हैं उसके आधार पर आप एक और वायरफ्रेम लिख सकते हैं या आपके पास रख सकते हैं।
पेपर वायरफ्रेम पहले ड्राफ्ट के लिए सर्वश्रेष्ठ क्यों हैं
हालांकि, प्रारंभिक दिमाग के सत्रों के लिए, Visio जैसे प्रोग्रामों का उपयोग करके वायरफ्रेम बनाना संभव है, आपको कागज़ पर चिपकना चाहिए। पेपर स्थायी नहीं लगता है, और कई लोग मान लेंगे कि आप इसे 5 मिनट में एक साथ फेंक देते हैं और इसलिए आपको अच्छी प्रतिक्रिया देने में संकोच नहीं करते हैं। लेकिन जब आप सही वर्गों और रंगों के साथ फैंसी वायरफ्रेम बनाने के लिए एक प्रोग्राम का उपयोग करते हैं, तो आप प्रोग्राम में खुद को पकड़ने का जोखिम चलाते हैं और कुछ ऐसा करने में घंटों खर्च करते हैं जो कभी भी लाइव नहीं जा रहा है।
पेपर वायरफ्रेम करना आसान है। और यदि आपको यह पसंद नहीं है, तो आप केवल पेपर को क्रंपल करें, इसे रीसाइक्लिंग में फेंक दें और एक नई शीट लें।