मेरी वेबसाइट डिजाइन दृष्टिकोण

प्रस्तावना

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



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

यह सब के साथ शुरू होता है ...

एक परियोजना पर काम शुरू करने के लिए दो विकल्प हैं: आदर्श और अपूर्ण।



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



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

लेकिन पाठ जानकारी प्रस्तुत करने का सबसे अच्छा तरीका नहीं है, और सबसे महत्वपूर्ण बात यह है कि सबसे सहज नहीं है। इसलिए, लाइनों में भविष्य की परियोजना का दस्तावेजीकरण करने से पहले, इसे आसानी से वर्णन और चर्चा करना अच्छा हो सकता है।



... और यहाँ वे बचाव के लिए आते हैं!

माइंडमैप, एक साइट संरचना बनाएं

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



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



उदाहरण 1:





यह आरेख अद्वितीय देवसाइट साइट की संरचना को दर्शाता है, जो इसकी विशिष्टता और अभिनव संरचना में सभी से अलग है।



सर्किट का विवरण:

• पीले तत्व संस्थाएं हैं, साइट के भौतिक खंड
• ग्रे तत्व - इसमें समूह तत्वों के लिए सशर्त अनुभाग (अनुभाग उपयोगकर्ता)
• काली आयतें - पृष्ठ के कार्यात्मक तत्व जो कुछ तर्क या कार्रवाई करते हैं
• उपयोगकर्ता अनुभाग में पासवर्ड रिकवरी एक पॉप-अप विंडो है या आपने पहले ही अनुमान लगा लिया है?

उदाहरण 2:





ऐसे माउस का उपयोग एक स्लाइस को प्रदर्शित करने, किसी परियोजना की वर्तमान स्थिति या कार्य को सेट करने, वर्तमान स्थिति को प्रदर्शित करने के लिए काफी उपयोगी है।

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



उपरोक्त तत्वों के अलावा, आप एक ही नक्शे, ऐसे छोटे उप-मानचित्रों पर सहायक तत्वों को चित्रित कर सकते हैं और उनके और मुख्य सर्किट के बीच कनेक्शन व्यवस्थित कर सकते हैं। तालिका दृश्य में कुछ जानकारी प्रस्तुत करना कभी-कभी उपयोगी होता है।

डीबी

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



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



ठीक है, ज़ाहिर है, सुविधा एक छोटी भूमिका निभाती है, व्यक्तिगत रूप से मैं एक सॉफ्टवेयर जैसे कि MySQL वर्कबेंच में डेटाबेस बनाने और SQL के परिणाम को निर्यात करने के लिए लिंक, प्रॉपर्टी कीज़ और नेत्रहीन परिणाम की जांच करने के बाद SQL को निर्यात करता हूं। किसी भी मामले में, यह phpMyAdmin में एक डेटाबेस को आबाद करने के सबसे सामान्य तरीके से बहुत अधिक सुविधाजनक है



MySQL कार्यक्षेत्र से स्क्रीन टेबल

प्रोटोटाइप, वायरफ्रेम बना रहा है

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



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





Google छवि खोज टिप पर tarekshalaby.com से स्क्रीनशॉट



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





Balsamic Mockups ऑफसाइट स्क्रीनशॉट

निष्कर्ष में

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



पढ़ने के लिए धन्यवाद और 2011 में आप दिलचस्प और सुंदर परियोजनाओं की कामना करते हैं!