स्केचिंग ग्रिड-आधारित वायरफ्रेम के लिए सर्वश्रेष्ठ संसाधन

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

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

प्रारंभिक यूआई / यूएक्स संकल्पना

चलो एक के बीच के अंतरों को स्पष्ट करके शुरू करते हैं wireframe और ए प्रोटोटाइप. इन दो शब्दों को अक्सर एक दूसरे के साथ प्रयोग किया जाता है क्योंकि वे एक ही प्रक्रिया से संबंधित हैं.

ए wireframe एक है एकल स्थिर स्केच वेब पेज या ऐप के यूआई के। इसमें बटन टेक्स्ट, मार्जिन, एलिमेंट साइज़, या एनिमेशन भी समझाने के लिए कॉलआउट हो सकते हैं। लेकिन वायरफ्रेम सिर्फ हैं अलग-अलग पृष्ठों के लिए मोटा ड्राफ्ट.

इसी तरह, ए प्रोटोटाइप एक की तरह है फ़्लोचार्ट दिखा रहा है कि विभिन्न पृष्ठ एक साथ कैसे लिंक होते हैं. तो एक प्रोटोटाइप वायरफ्रेम को जोड़ता है यह प्रदर्शित करने के लिए कि विभिन्न बटन या लिंक को अन्य पृष्ठों पर कैसे ले जाना चाहिए.

इन परिभाषाओं को पत्थर में नहीं उकेरा गया है, कुछ डिजाइनरों की अपनी शब्दावली हो सकती है, और मेरे सटीक शब्दों से असहमत हो सकते हैं। लेकिन यह है कि मैं आमतौर पर उन्हें वर्णित देखा है, और यह है कि कितने डिजाइनर इन शब्दों को सबसे अच्छा समझते हैं.

तो आप इन शुरुआती वैचारिक टुकड़ों के साथ वास्तव में क्या करने वाले हैं? क्या वे वास्तव में आवश्यक हैं? मैं कहूंगा कि प्रोटोटाइप हमेशा आवश्यक नहीं होता है, लेकिन यह एक बहुत अच्छा विचार है, विशेष रूप से जटिल इंटरैक्शन वाले ऐप डिजाइन करने के लिए.

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

वायरफ्रेमिंग के लिए लक्ष्य

हर बार जब आप एक नई परियोजना शुरू करते हैं तो आपको चिंतन करना चाहिए जिसे आप हल करने की कोशिश कर रहे हैं. प्रत्येक साइट को एक विशिष्ट लक्ष्य को ध्यान में रखकर बनाया गया है। कई साइटों के भी कई लक्ष्य होते हैं जहाँ कुछ लक्ष्य दूसरों की तुलना में अधिक महत्वपूर्ण होते हैं.

आप के लिए सबसे अच्छी रणनीति खोजने में मदद करने के लिए एक गाइड के रूप में वायरफ्रेमिंग का उपयोग करें किसी वेबसाइट के लक्ष्य को कैप्चर करना. यह संभवतः पहले वायरफ़्रेम पर नहीं होगा, इसलिए तैयार रहें विभिन्न विचारों का एक बहुत स्केच.

अन्य समान वेबसाइटों को देखें, और उनकी सर्वोत्तम विशेषताओं को लिखें। विश्लेषण करें कि सामग्री कैसे व्यवस्थित है और आप प्रत्येक पृष्ठ के माध्यम से कैसे आगे बढ़ते हैं.

वायरफ्रेम के बारे में सोचिए इंटरएक्टिव दृष्टिकोण. ये बहुत सुंदर चित्र नहीं हैं। वे डिजिटल इंटरफेस का प्रतिनिधित्व कर रहे हैं, और आप उस के साथ अपने विचारों को स्केच करना चाहते हैं.

हाथ में ग्रिड-आधारित संसाधन होने से, चाहे वे कागज से बने हों या वे डिजिटल हों, त्वरित स्केचिंग में बहुत मदद कर सकते हैं। अब चलो वायरफ्रेम बनाने के लिए सर्वोत्तम संसाधनों की जांच करें.

ग्रिड स्केचपैड

आप हमेशा प्रिंटर पेपर पर मूल थंबनेल स्केच से शुरू कर सकते हैं खुरदुरे विचारों को बाहर निकालना. निजी तौर पर, मैं आमतौर पर प्रिंटर पेपर पर काम करना शुरू कर देता हूं, क्योंकि इस तरह मैं ग्रिड के बारे में कम चिंतित हूं और इसके बारे में अधिक विचार उत्पन्न करना.

डॉट ग्रिड स्केचपैड यदि आप चाहते हैं तो जाने का सबसे अच्छा तरीका है एक विचार को साफ करो, और इसे और अधिक संरचना दें। ग्रिड आपकी मदद करता है आइटम के बीच की दूरी का अनुमान लगाएं पृष्ठ पर, और बनाएँ एक प्रकार की समरूपता वायरफ्रेम में.

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

एक और बहुत अच्छा और अनुकूलन योग्य उत्पाद Dotgrid है। Dotgrid के सभी आइटम रोडिया पुस्तकों की तुलना में अधिक महंगे हैं, लेकिन वे अधिक सामग्री और कस्टम कवर डिजाइन के साथ आते हैं.

Dotgrid भी bespoke आदेश स्वीकार करता है जो आपको देते हैं अपने खुद के कस्टम स्केचपैड डिजाइन करें. प्रत्येक पुस्तक में सिर्फ 100 शीट शामिल हैं, इसलिए फ्रंट और बैक सहित आपको ग्रिड स्केचिंग के लिए लगभग 200 पृष्ठ मिलते हैं.

कुछ अन्य डॉट ग्रिड स्केचबुक जिन्हें मैं उल्लेख करना चाहता हूं उनमें बेहन डॉट ग्रिड शामिल है जो हार्डकवर और सर्पिल बाउंड है, हालांकि इसमें केवल 50 शीट हैं.

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

इन उत्तरदायी डिजाइन पैड में 100 पृष्ठों की कुल 50 शीट भी हैं, लेकिन प्रत्येक पृष्ठ में है चार अलग-अलग उत्तरदायी ग्रिड उत्तरदायी डिजाइन में विभिन्न विराम बिंदुओं का प्रतिनिधित्व: डेस्कटॉप, लैपटॉप, टैबलेट और स्मार्टफोन.

हालाँकि डिज़ाइन Dotgrid पुस्तकों की तुलना में स्पष्ट है, लेकिन किसी और ने वेब डिज़ाइनरों के लिए उत्तरदायी स्केचबुक पर विचार नहीं किया है। यदि आप उस थोड़े बात में हैं तो यह टेस्ट ड्राइव के लिए ऑर्डर करने लायक है.

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

प्रिंटर पेपर की विभिन्न शैलियों के लिए ग्रिड ए 4 और यूएस अक्षर आकार में आते हैं। आप कई विकल्पों में से चुन सकते हैं, जैसे कि पूर्ण लंबाई वाले वेब ब्राउज़र के लिए टेम्पलेट, या विभिन्न iPhone स्क्रीन.

इन विकल्पों में से सभी बढ़िया हैं, और यदि आप में हैं, तो अच्छी तरह से देखने लायक है पेंसिल स्केचिंग. पेपर नए विचारों को जल्दी से नीचे लाने के लिए सबसे आसान माध्यमों में से एक है, इसलिए यह अक्सर यूआई डिजाइनरों द्वारा पसंद किया जाता है.

डिजिटल उपकरण और वेब ऐप

वहाँ बहुत सारे महान वायरफ्रेमिंग प्रोग्राम हैं, जिन्हें विश्लेषण विश्लेषण पक्षाघात के बिना मुश्किल से कवर किया जा सकता है, इसलिए अभी के लिए कुछ सर्वोत्तम विकल्पों पर ध्यान दें ग्रिड-आधारित वायरफ्रेमिंग.

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

1. मच्छर

Moqups के लिए सबसे अच्छा ऑनलाइन उपकरणों में से एक है wireframing. आप एक दृश्य संपादक और संपत्ति के एक पुस्तकालय के साथ काम करते हैं और पूरे पृष्ठ को खींचते हैं.

प्रत्येक नई Moqups परियोजना में एक है पूर्व-निर्धारित ग्रिड, और आप तत्वों को संरेखण में बदलने में मदद करने के लिए उज्ज्वल बैंगनी लाइनों का उपयोग करते हैं। यह एक बेहतरीन वेब टूल है जो ग्रिड के साथ डिजाइनिंग को इतना आसान बनाता है.

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

2. ग्रिड पापड़

ग्रिड पापर वेब ऐप पूरी तरह से मुफ़्त है, और आपके वायरफ़्रेम के लिए सार्वजनिक और निजी दोनों खातों की पेशकश करता है। आप अपनी परियोजना के लिए एक नाम बनाते हैं, और वायरफ्रेम के लिए अपना स्वयं का अनूठा URL प्राप्त करते हैं जिसे आप किसी भी कंप्यूटर से संपादित कर सकते हैं.

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

3. वायरफ्रेम ।सीसी

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

यह अभी तक वैकल्पिक प्रीमियम योजनाओं के साथ मुफ्त में दिया जाने वाला एक और उपकरण है। प्रत्येक योजना को मासिक रूप से बिल दिया जाता है, इसलिए यह मूल्य संरचना में Moqups के समान है। मुफ्त टूल बिना किसी कंप्यूटर के किसी भी खाते से उपयोग करने योग्य है.

4. मॉकिंगबर्ड

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

मॉकिंगबर्ड के पास यूआई तत्वों का एक अंतहीन पुस्तकालय है जैसे कि टैब, समझौते, ड्रॉपडाउन मेनू, वीडियो प्लेयर और सरल टेक्स्ट लिंक. डिफ़ॉल्ट ग्रिड 960gs ग्रिड प्रणाली का उपयोग करता है, लेकिन आप इसमें से चुन सकते हैं 12, 16 और 24 कॉलम.

अंतिम शब्द

कोई फर्क नहीं पड़ता कि आप पारंपरिक या डिजिटल वायरफ्रेमिंग चुनते हैं, यह हमेशा के बारे में है उत्पादन की गुणवत्ता. इस तरह का काम करते समय सीखने के लिए बहुत कुछ है, इसलिए जो भी उपकरण आपको सबसे अधिक आरामदायक लगता है उसे ढूंढें.

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

(कवर फोटो Oykun Yilmaz द्वारा)