आफ्नो डिजाइन सुरु गर्न सरल वायरफ्रेम प्रयोग गर्न जान्नुहोस्
वेब तार फ्र्रेम वेब पेज कस्तो देखिन्छ जस्तो देखाउन एक साधारण भिजुअल गाइड हो। यसले कुनै पनि ग्राफिक्स वा पाठ प्रयोग नगरी पृष्ठको संरचनालाई सुझाव दिन्छ। एक वेबसाइट wireframe ले सम्पूर्ण साइट संरचना देखाउनेछ - जसमा कुन पृष्ठहरू जहाँ लिंक हुन्छ।
वेब तार फ्र्रेमहरू तपाईंको डिजाइन कार्य सुरु गर्न एक राम्रो तरिका हो। र जब बहुमूल्य मात्रामा जटिल wireframes सिर्जना गर्न सम्भव छ, तपाईंको योजना एक नैपकिन र कलमको साथ सुरु हुन सक्छ। राम्रो wireframes बनाउन कुञ्जी सबै भिजुअल तत्वहरू छोड्न हो। तस्विर र पाठ को प्रतिनिधित्व गर्न बक्स र रेखाहरु को प्रयोग गर्नुहोस्।
एउटा वेब पेज wireframe मा समावेश गर्न कुरा:
- प्राथमिक ग्राफिकल तत्वहरूको लागि बक्सहरू
- शीर्षकहरू र उप-प्रमुखहरूको स्थानान्तरण
- एक साधारण लेआउट ढाँचा
- कार्यलाई कल गर्दछ
- पाठ ब्लकहरू
सरल वेब वायरफ्रेम कसरी निर्माण गर्ने
वेब पेज तार फ्र्रेम सिर्जना गर्नुहोस् जुन तपाईंले काम गरेको कागजको कुनै पनि स्क्रैप प्रयोग गरी। यहाँ म कसरी गर्छु
- ठूलो आयत कोर्नुहोस् - यसले पनि सम्पूर्ण पेज वा केवल दृश्य दृश्य प्रतिनिधित्व गर्न सक्छ। म सामान्यतया दृश्यात्मक भागको साथ सुरु गर्छु, र त्यसपछि यसलाई तल विस्तार गर्न तत्वहरू समावेश गर्न विस्तार गर्नुहोस्।
- लेआउट स्केच गर्नुहोस् - यो 2-स्तम्भहरू, 3-स्तम्भहरू हो?
- हेडर ग्राफिकका लागि एक बक्समा थप्नुहोस् - यदि तपाइँ यसलाई स्तम्भहरू माथि एक हेडर हुनु चाहनुहुन्छ भने, वा तपाइँ यसलाई चाहानुहुन्छ जहाँ यो थप गर्नुहोस्।
- "हेडलाइन" लेख्नुहोस् जहाँ तपाइँ आफ्नो H1 शीर्षक हुन चाहानुहुन्छ।
- "उप-हेड" लेख्नुहोस् जहाँ तपाइँ H2 चाहनुहुन्छ र निम्न शीर्षकहरू हुन सक्नुहुनेछ। यसले तिनीहरूलाई आनुपातिक-h2 भन्दा सानो, h2 भन्दा h3 भन्दा सानो बनाउँछ भने।
- अन्य तस्बिरहरूको लागि बक्सहरूमा थप्नुहोस्
- नेविगेशनमा थप्नुहोस्। यदि तपाइँ ट्याबहरू योजना गर्दै हुनुहुन्छ भने, बक्सहरू तान्नुहोस्, र माथि "नेभिगेसन" लेख्नुहोस्। वा बुलेट गरिएका सूचीहरूलाई स्तम्भहरूमा राख्नुहोस् जहाँ तपाई नेभिगेसन चाहनुहुन्छ। सामाग्री लेख नगर्नुहोस्। केवल "नेभिगेसन" लेख्नुहोस् वा पाठ प्रतिनिधित्व गर्न लाइन प्रयोग गर्नुहोस्।
- पृष्ठमा थप तत्वहरू थप्नुहोस् - पहिचान गर्नुहोस् तिनीहरू पाठसँग के छन्, तर वास्तविक सामाग्री पाठको प्रयोग नगर्नुहोस्। उदाहरणको लागि, यदि तपाईलाई दाहिने दायाँमा कार्य बटनमा कल गर्न चाहानुहुन्छ भने त्यहाँ एउटा बाकस राख्नुहोस् र यसलाई "कल गर्नका लागि" कल गर्नुहोस्। "अब किन्नुहोस!" लेख्नुहोस् त्यो बक्समा।
एक पटक तपाईंको साधारण तार फ्र्रेम लिखित भएपछि, र यसलाई एक अर्काको लागि 15 मिनेट भन्दा बढी लिनु हुँदैन, यसलाई अरूलाई देखाउनुहोस्। त्यहाँ केही सोध्नुहोस् भने त्यहाँ छुटेको छ र अन्य प्रतिक्रियाको लागि। उनीहरूले के भन्नु भएकोमा तपाइँ अर्को तारफ्रेम लेख्न सक्नुहुन्छ वा तपाईंसँग राख्नुहोस्।
किन कागज वायरफ्रेम पहिलो ड्राफ्टको लागि उत्तम हो
जबकि भिषामा जस्ता कार्यक्रमहरू प्रयोग गरेर तारफ्रेम सिर्जना गर्न सम्भव छ, तपाइँका प्रारम्भिक दिमागको सत्रको लागि, तपाइँ पेपरमा रहनु पर्छ। पेपर स्थायी रूपमा प्रतीत छैन, र धेरै व्यक्तिले तपाईंलाई यो 5 मिनेटमा एकसाथ फ्याँकिएको छ र यसैले तपाईंलाई राम्रो प्रतिक्रिया दिन संकोच गर्न सक्नेछ। तर जब तपाइँ एकदम राम्रो वर्ग र रङहरूसँग फैंसी तार फ्रेमहरू सिर्जना गर्न एक प्रोग्राम प्रयोग गर्नुहुन्छ भने, तपाईं प्रोग्राममा पकडिएको खण्ड र घण्टा बिताउने केही घण्टा खर्च गर्नुहुने केही चीजहरू जुन कहिलेकाहीँ प्रत्यक्ष जीवन बिताउने छैन।
कागज wireframes गर्न सजिलो छ। र यदि तपाईं यसलाई मनपर्दैन भने, तपाईंले कागज भर्खरै रिसाइकिलिंगमा फ्याँक्नु भएको छ र नयाँ पाना लिन्छ।