👌🏽 🚫 🔻 गंभीर साइटों के गंभीर डिजाइन। भाग 2. दृश्य 🤚🏽 🙇 ✍🏻

7. मन का नक्शा।

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

माइंड मैप बनाने के लिए (इसे अक्सर अंग्रेजी शब्द "माइंड मैप" कहा जाता है), हम विशेष सॉफ्टवेयर का उपयोग कर सकते हैं, मैं Xmind की सलाह देता हूं।

पहले आपको हमारे कुछ दस्तावेजों को उन विचारों के साथ लेने की ज़रूरत है जो हमने पिछले चरणों में बनाए थे, हम उन्हें व्यवस्थित करेंगे। सभी विचारों को वैश्विक ब्लॉकों (वर्गों) में विभाजित किया जाना चाहिए। उदाहरण के लिए, कल्पना करें कि हम एक रियल एस्टेट पोर्टल डिजाइन कर रहे हैं, जिसके वैश्विक ब्लॉक हो सकते हैं: एक रियल एस्टेट कैटलॉग; समुदाय; समाचार लेख; ज्ञान का आधार आदि। हमें इन वैश्विक ब्लॉकों में सभी विचारों को वितरित करना चाहिए। हम परस्पर अनन्य विचारों को जोड़ते हैं या बाहर करते हैं या उनमें से एक को चुनते हैं। बुद्धिशीलता के सिद्धांतों से, हम छोटे-उपयोगी विचारों को छोड़ देते हैं, या बेहतर समय तक उन्हें छोड़ देते हैं। ब्लॉक की कुल संख्या साइट के भविष्य के वर्गों के अनुरूप होनी चाहिए, प्रत्येक अनुभाग में उपसमुच्चय हो सकते हैं। आदर्श रूप से, एक बड़े पोर्टल के लिए वर्गों की संख्या 7-8 से अधिक नहीं होनी चाहिए, अगर हम डिजाइन करते हैं, उदाहरण के लिए, मीडिया, ऐसे कई खंड हो सकते हैं जो अनिवार्य रूप से केवल सामग्री विषयों में भिन्न होते हैं, लेकिन एक ही उद्देश्य है, ये विकल्प भी मान्य हैं, लेकिन आपको इसकी आवश्यकता है बहुत सावधान रहें, यह महत्वपूर्ण है कि उपयोगकर्ता भ्रमित न हो।

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

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

माइंड मैप में, हम बीटा संस्करण को हाइलाइट कर सकते हैं, लेकिन एक बार में पूरे प्रोजेक्ट को डिज़ाइन करना उचित है, ताकि एक्स्टेंसिबिलिटी के बारे में सोचना संभव हो।

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

एक उदाहरण:

परियोजना: पालतू जानवरों के मालिकों का सामाजिक नेटवर्क।

अंजीर। 3. माइंड मैप

8. वेबसाइट संरचना।

एक मन का नक्शा, जिस पर मुख्य खंड और उप-भाग दिखाई दे रहे हैं, हम साइट की संरचना तैयार कर सकते हैं, जिसके अनुसार हम वास्तव में अगले चरण में प्रोटोटाइप होंगे। संरचना मन के नक्शे या Visio में किया जा सकता है।

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

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

एक उदाहरण:

परियोजना: पालतू जानवरों के मालिकों का सामाजिक नेटवर्क।

अंजीर। 4. वेबसाइट संरचना

9. प्रोटोटाइप।

प्रमुख चरणों में से एक इंटरफ़ेस के प्रोटोटाइप का निर्माण है। आप इसके लिए विशेष सॉफ्टवेयर का उपयोग कर सकते हैं, मैं एक्सुर की सलाह देता हूं, हालांकि यह इंटरफ़ेस का प्रोटोटाइप बनाने का एकमात्र कार्यक्रम नहीं है, कई अन्य हैं।

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

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

इससे पहले कि आप डिजाइन करना शुरू करें, आपको यह याद रखना होगा कि हमारे लक्षित दर्शकों में से कौन है। और उनकी भूमिका के लिए उपयोग किया जाता है। यह हमें अपने लक्षित दर्शकों के दृष्टिकोण से डिजाइन करने की अनुमति देगा।

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

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

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

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

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

हमने पहला पृष्ठ डिज़ाइन करने के बाद, अपने प्रतिस्पर्धियों को खोलने और उनके साथ एक समान अनुभाग कैसे लागू किया जाता है, यह देखने के लिए समय है, इससे कुछ विचार हो सकते हैं।

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

पहले पृष्ठ के अनुमोदन के बाद, आप शेष के लिए आगे बढ़ सकते हैं। सभी विचार जो मन के नक्शे में प्रदर्शित किए जाते हैं, परिणामस्वरूप, डिज़ाइन किए गए प्रोटोटाइप में प्रस्तुत किए जाने चाहिए। सभी अंतर्निहित कार्यक्षमता, हर छोटी चीज को डिजाइन करना महत्वपूर्ण है, अन्यथा भविष्य में, अंडर-डिज़ाइन किए गए हिस्से डेवलपर के लिए नरक में बदल जाएंगे।

हम पहले से ही इंटरफेस में तर्क की जांच करने के लिए हमारी लिपियों का उपयोग करके बनाए गए प्रोटोटाइप का परीक्षण कर सकते हैं।

समय का काम बहुत बड़ा है, यह संयुक्त डिजाइन के अन्य सभी चरणों से अधिक लेता है। बड़ी साइटों में 100 से अधिक अद्वितीय इंटरफ़ेस प्रोटोटाइप हो सकते हैं।

आउटपुट कई इंटरफ़ेस प्रोटोटाइप होना चाहिए, जिनमें से प्रत्येक, आदर्श रूप से, ग्राहक के साथ चर्चा की जानी चाहिए और अनुमोदित होनी चाहिए।

एक उदाहरण:

परियोजना: पालतू जानवरों के मालिकों का सामाजिक नेटवर्क।

अंजीर। 5. उपयोगकर्ता प्रोफ़ाइल:

अंजीर। 6. समूह:

अंजीर। 7. ज़ूपेडिया। जानवरों की तुलना:

इस परियोजना में इंटरफ़ेस के लगभग 90 ऐसे प्रोटोटाइप हैं।

तुलना के लिए, आप हमारे द्वारा विकसित अन्य परियोजनाओं के प्रोटोटाइप देख सकते हैं:

फोटोग्राफी के लिए सोशल नेटवर्क FOTO.ua: इन प्रोटोटाइप पर आधारित प्रोटोटाइप और डिज़ाइन ।
माज़दा रूस ऑटोमोटिव सोशल नेटवर्क: प्रोटोटाइप ।
निर्माण सामग्री बिक्री पोर्टल StroyPrice: प्रोटोटाइप और डिजाइन इन प्रोटोटाइप पर आधारित है।
ड्रीमनी सपनों की प्राप्ति के लिए सेवा: इन प्रोटोटाइप पर आधारित एक प्रोटोटाइप और डिजाइन ।
लेगो ऑनलाइन स्टोर: इन प्रोटोटाइप के आधार पर प्रोटोटाइप और डिज़ाइन ।

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

10. प्रयोज्यता परीक्षण।

यह एक वैकल्पिक कदम है, लेकिन यह गुणवत्ता में सुधार करने में भी मदद कर सकता है। Axure आपको प्रोटोटाइप से html उत्पन्न करने की अनुमति देता है, जो आपको उन्हें इंटरैक्टिव बनाने और तदनुसार पूर्ण प्रयोज्य परीक्षण करने की अनुमति देता है।

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

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

आउटपुट पर, हम बेहतर प्रोटोटाइप प्राप्त करते हैं और भविष्य की साइट पर उपयोगकर्ताओं की प्रारंभिक प्रतिक्रिया देखते हैं।

11. संदर्भ की शर्तें।

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

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

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

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

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

एक उदाहरण:

परियोजना: पालतू जानवरों के मालिकों का सामाजिक नेटवर्क।

TK फ़ाइल: TZ-slj.doc

केवल सूचना के प्रयोजनों के लिए TK को ट्रिम किया गया।

एक निष्कर्ष के बजाय

डिजाइनिंग एक संपूर्ण विज्ञान है, बहुत कठिन और बहुत सारी विशेषताओं के साथ। कोई भी गंभीर परियोजना बिना डिजाइन के नहीं हो सकती, यह वास्तव में महत्वपूर्ण है। यहां तक कि एक प्रथम श्रेणी के विचार को खराब डिजाइन द्वारा बर्बाद किया जा सकता है।

ऊपर वर्णित डिजाइन तकनीक हमारी कंपनी में लागू होती है, हम इसे लगातार सुधारते हैं और इसे सुधारते हैं। स्वाभाविक रूप से, प्रौद्योगिकी के अलावा, हमारे पास अभी भी आंतरिक गुणवत्ता मानक हैं जो हमें वास्तव में दिलचस्प चीजें बनाने की अनुमति देते हैं, लेकिन यह एक और लेख के लिए एक और बड़ा विषय है।

खैर, और एक बोनस के रूप में, मैं यह दिखाना चाहता हूं कि सभी सुंदरता पहले से ही रंग (डिजाइन रूपरेखा) में कैसे दिखती हैं:

PS पालतू जानवरों के मालिकों के सामाजिक नेटवर्क के तहत, जिसे मैंने उदाहरण में दिखाया था, हम एक निवेशक या खरीदार की तलाश कर रहे हैं। किसी साइट पर किसी भी संपर्क पर पता।

PPS दूसरों से पहले हमारे नए लेख प्राप्त करने के लिए या नए प्रकाशनों को याद नहीं करने के लिए - फेसबुक , वीके , ट्विटर पर हमें सदस्यता लें

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

मूल लेख यहां है: http://seclgroup.ru/article-serjoznoe-proektirovanie-serjoznix-saitov.html (आप उच्च रिज़ॉल्यूशन में माइंड मैप और अन्य चित्रों को भी देख सकते हैं)

द्वारा पोस्ट किया गया
निकिता सेमेनोव ( फेसबुक , वीके , लिंक्डइन )
सीईओ
SECL ग्रुप / इंटरनेट सेल्स टेक्नोलॉजीज

गंभीर साइटों के गंभीर डिजाइन। भाग 2. दृश्य

एक निष्कर्ष के बजाय

More articles: