पेंसिल एक वायरफ्रेमिंग टूल है जिसका उपयोग हम अपने एप्लिकेशन के यूजर इंटरफेस के मॉक स्केच के लिए कर सकते हैं। पेंसिल के बारे में महान बात यह है कि यह हल्का, उपयोग में आसान है, और कसकर फ़ायरफ़ॉक्स के साथ एकीकृत है। इसके शीर्ष पर अपने सभी एक मुक्त मुक्त स्रोत अनुप्रयोग! लेख के अंत में हम आपको एक सरल डेमो देंगे कि पेंसिल को वायरफ्रेम जैसे वायरफ्रेम बनाने के लिए कैसे उपयोग किया जाए।
हम वायरफ्रेम क्यों बनाते हैं?
वायरफ्रेम एक पेज-लेआउट विचार का एक स्केच है। वायरफ्रेम यह सुनिश्चित करने के लिए एक पेज के सूचना डिजाइन पर केंद्रित है कि डिजाइन उपयोगकर्ता की जरूरत के हिसाब से फिट बैठता है। एक वायरफ्रेम में आमतौर पर सामग्री, कार्यात्मक और नेविगेशनल तत्वों का प्रतिनिधित्व करने के लिए विभिन्न आकार (जैसे बक्से, अंडाकार और हीरे) होते हैं। ये आकृतियाँ पृष्ठ पर अपना स्थान प्रदर्शित करती हैं।
पहले तो यह किसी पृष्ठ के किसी न किसी प्रकार के रेखाचित्र बनाने में समय की बर्बादी की तरह लग सकता है। आपके पृष्ठ पर महत्व तत्व पर ध्यान केंद्रित करने के लिए अपने उपयोगकर्ताओं को प्राप्त करने के लिए एक तार फ्रेम महत्वपूर्ण है। पृष्ठ के किसी न किसी स्केच का निर्माण, फैंसी विज़ुअल तत्वों के बिना, उपयोगकर्ता के ध्यान को आपके पेज घटकों के आकार, लेआउट और प्लेसमेंट जैसे महत्वपूर्ण तत्वों में स्थानांतरित करें। जब ग्राहक वास्तव में किसी पृष्ठ के महत्वपूर्ण तत्वों पर ध्यान केंद्रित करना शुरू करता है, तो हमें इस बात की बेहतर समझ होनी शुरू हो जाती है कि ग्राहक को वास्तव में क्या चाहिए और सॉफ्टवेयर से क्या चाहिए। एक वायर फ्रेम बनाने से आप और आपके उपयोगकर्ता प्रभावी रूप से सहयोग करते हैं और संभावित डिजाइन समस्या को जल्दी पहचानते हैं।
पेंसिल से शुरुआत की
पेंसिल के ऐड ऑन पेज से पेंसिल डाउनलोड करें। एक बार जब आप पेंसिल स्थापित करते हैं, तो यह> टूल्स ’> ching पेंसिल स्केचिंग’ से सुलभ है।
यह वही है जो Brizzly जैसा दिखता है। यह एक बहुत अच्छा वेब अनुप्रयोग है जो आपके फेसबुक और ट्विटर को एक ही पृष्ठ पर एकत्रित करता है।
यह तार फ्रेम का अंतिम परिणाम है। इस वायरफ्रेम में मुख्य आकार हैं, आयताकार, टेक्स्ट बॉक्स और टैब। लेख का अगला भाग एक सरल उदाहरण देगा कि प्रत्येक आकृति कैसे बनाई जाए।
आयत बनाना
वायर फ्रेम शेप बनाने का पहला कदम कैनवास पर ions शेप कलेक्शन ’मेनू से एक आकृति को खींचना है।
आयत को एक उपयुक्त चौड़ाई और ऊँचाई का आकार दें।
हम पेंसिल में किसी भी आकार के पाठ, सीमा और पृष्ठभूमि के रंग को अनुकूलित कर सकते हैं। आयत पर क्लिक करें और गुण विंडो खोलने के लिए 'गुण' चुनें। यह पृष्ठभूमि गुण स्क्रीन है। सफेद (#FFFFFF) आयत पृष्ठभूमि रंग सेट करें।
'सीमा' टैब पर क्लिक करें और सीमा गुणों को समायोजित करें। बॉर्डर कलर को ब्लैक (# 000000) पर सेट करें और बॉर्डर वेट को 1 में बदलें।
पाठ गुण स्क्रीन हमें फ़ॉन्ट प्रकार, आकार, शैली, वजन, रंग, चमक और पाठ की अस्पष्टता को अनुकूलित करने देती है।
टैब बनाना
होम, ड्राफ्ट, पिक्चर टैब तीन टैब हैं जो एक दूसरे के ऊपर स्टैक्ड हैं। आयत में तीन 'टैब पैनल' खींचें। प्रत्येक टैब का आकार बदलें ताकि प्रत्येक टैब अगल-बगल दिखाई दे।
'चित्र' और 'ड्राफ्ट' टैब के फ़ॉन्ट रंग को समायोजित करने के लिए पाठ गुण स्क्रीन खोलें। इसे ग्रे (# 989898) पर सेट करें।
पाठ बनाना
प्रत्येक मेनू बनाने के लिए कैनवास पर of टेक्स्ट ’आकार खींचें। हम टेक्स्ट प्रॉपर्टीज विंडो तक पहुंचकर टेक्स्ट उपस्थिति को समायोजित कर सकते हैं।
रंग बदलने के उपयोगी टिप्स
रंग एक मनभावन वायरफ्रेम देने में सबसे आवश्यक हिस्सा है। किसी रंग के आकार को बदलने का सबसे सटीक तरीका है कोलोर का HTML कोड निर्दिष्ट करना। किसी विशेष रंग के लिए HTML कोड का पता लगाना मुश्किल हो सकता है। हम किसी विशेष रंग के लिए सही HTML कोड देखने के लिए w3cschools.com से HTML रंग धोखा पत्र का उपयोग कर सकते हैं।
हम स्क्रीन से रंगों को लेने और पेंसिल में इसका उपयोग करने के लिए कलरज़िला का उपयोग करना पसंद करते हैं। स्क्रीन पर रंग लेने के लिए फ़ायरफ़ॉक्स के निचले बाएँ कोने पर नज़र ड्रॉपर आइकन पर क्लिक करें। हम ColorZilla के कलर पिकर को आई ड्रॉप आइकन पर डबल क्लिक करके भी खोल सकते हैं। बस हेक्स कोड को पेंसिल के रंग HTML कोड में कॉपी करें।
निष्कर्ष
पेंसिल वायरफ्रेमिंग टूल का उपयोग करना आसान है। फ़ायरफ़ॉक्स के साथ पेंसिल एकीकरण हमारे लिए एक बेहतर वायरफ्रेम बनाने में मदद करने के लिए अन्य फ़ायरफ़ॉक्स प्लगइन का उपयोग करना संभव बनाता है
लिंक
पेंसिल डाउनलोड करें
Colorzilla डाउनलोड करें
W3C HTML रंग धोखा शीट
