सिंपल मॉकअप बनाने के लिए फ़ायरफ़ॉक्स का उपयोग करें

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

हम वायरफ्रेम क्यों बनाते हैं ?

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

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

पेंसिल से शुरुआत की

पेंसिल के ऐड ऑन पेज से पेंसिल डाउनलोड करें। एक बार जब आप पेंसिल स्थापित करते हैं, तो यह 'टूल्स'> 'पेंसिल स्केचिंग' से सुलभ है।.

यह वही है जो Brizzly जैसा दिखता है। यह एक बहुत अच्छा वेब अनुप्रयोग है जो आपके फेसबुक और ट्विटर को एक पृष्ठ के भीतर एकत्र करता है.

यह तार फ्रेम का अंतिम परिणाम है। इस वायरफ्रेम में मुख्य आकार हैं, आयताकार, टेक्स्ट बॉक्स और टैब। लेख का अगला भाग एक सरल उदाहरण देगा कि प्रत्येक आकृति कैसे बनाई जाए.

एक आयत बनाना

एक तार फ्रेम आकार बनाने का पहला कदम कैनवास पर 'शेप कलेक्शन' मेनू से एक आकृति को खींचना है.

आयत को एक उपयुक्त चौड़ाई और ऊँचाई का आकार दें.

हम पेंसिल में किसी भी आकार के पाठ, सीमा और पृष्ठभूमि के रंग को अनुकूलित कर सकते हैं। आयत पर राइट क्लिक करें और गुण विंडो खोलने के लिए 'गुण' चुनें। यह बैकग्राउंड प्रॉपर्टीज स्क्रीन है। सफेद करने के लिए आयत पृष्ठभूमि रंग सेट करें (#FFFFFF).

'सीमा' टैब पर क्लिक करें और सीमा गुणों को समायोजित करें। बॉर्डर कलर को ब्लैक (# 000000) पर सेट करें और बॉर्डर वेट को 1 में बदलें.

पाठ गुण स्क्रीन हमें फ़ॉन्ट प्रकार, आकार, शैली, वजन, रंग, चमक और पाठ की अस्पष्टता को अनुकूलित करने देती है.

टैब बनाना

होम, ड्राफ्ट, पिक्चर टैब तीन टैब हैं जो एक दूसरे के ऊपर स्टैक्ड हैं। आयत में तीन 'टैब पैनल' खींचें। प्रत्येक टैब का आकार बदलें ताकि प्रत्येक टैब अगल-बगल दिखाई दे.

'चित्र' और 'ड्राफ्ट' टैब के फ़ॉन्ट रंग को समायोजित करने के लिए पाठ गुण स्क्रीन खोलें। इसे ग्रे पर सेट करें (# 989898).

पाठ बनाना

प्रत्येक मेनू बनाने के लिए कैनवास पर 'टेक्स्ट' आकार खींचें। हम टेक्स्ट प्रॉपर्टीज विंडो तक पहुंचकर टेक्स्ट उपस्थिति को समायोजित कर सकते हैं.

रंग बदलने के उपयोगी टिप्स

रंग एक मनभावन वायरफ्रेम देने में सबसे आवश्यक हिस्सा है। किसी रंग का आकार बदलने का सबसे सटीक तरीका है कोलोर का HTML कोड निर्दिष्ट करना। किसी विशेष रंग के लिए HTML कोड का पता लगाना मुश्किल हो सकता है। हम किसी विशेष रंग के लिए सही HTML कोड देखने के लिए w3cschools.com से HTML रंग धोखा पत्र का उपयोग कर सकते हैं.

हम स्क्रीन से रंगों को लेने और पेंसिल में इसका उपयोग करने के लिए कलरज़िला का उपयोग करना पसंद करते हैं। स्क्रीन पर रंग लेने के लिए फ़ायरफ़ॉक्स के निचले बाएँ कोने पर स्थित आई ड्रॉपर आइकन पर क्लिक करें। हम आई ड्रॉप ड्रॉप आइकन पर डबल क्लिक करके ColorZilla का कलर पिकर भी खोल सकते हैं। बस हैक्स कोड को पेंसिल के कलर एचटीएमएल कोड में कॉपी कर लें.

निष्कर्ष

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

लिंक
पेंसिल डाउनलोड करें
डाउनलोड Colorzilla
W3C HTML रंग धोखा शीट