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

आकलन

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

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

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

उनमें से कुछ कदम पूरी टीम के साथ मिलकर उठाए गए। एक छोटी टीम होने के नाते, हम चाहते थे कि सभी लोग कुछ हद तक इस प्रक्रिया में शामिल हों। इस पहले मूल्यांकन के बाद, हमने बांटना और जीतना शुरू कर दिया और हमारी नई वेबसाइट को वास्तविकता में बदलने के लिए समर्पित टीम के सदस्यों को जिम्मेदार ठहराया।

डिज़ाइन

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

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

परियोजना के इस चरण के दौरान, हमने इन चरणों का पालन किया:

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

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

विकास

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

तकनीकी स्टैक का चयन

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

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

हम इस परियोजना के लिए एक सरल, तेज़ और सुंदर वेबसाइट चाहते थे।

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

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

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

एस्ट्रो और सैनिटी के अलावा, हमने अपने प्रोजेक्ट के लिए नेटलिफ़ाइ का उपयोग करने का भी निर्णय लिया। खैर, हम हमेशा ऐसा करते हैं। Netlify की निर्बाध तैनाती और होस्टिंग क्षमताएं आमतौर पर हमारा पसंदीदा कंटेंट डिलीवरी नेटवर्क (CDN) है। हमने एनिमेशन के लिए विभिन्न पुस्तकालयों का भी उपयोग किया, जिस पर हमने एक अन्य ब्लॉग पोस्ट (जल्द ही आ रहा है) में अधिक गहराई से चर्चा की।

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

विकास की प्रक्रिया

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

कोड रिपॉजिटरी के लिए, हमने GitHub (GH) का उपयोग किया और इसके प्रोजेक्ट मैनेजमेंट बोर्ड और स्प्रिंट प्लानिंग सुविधाओं का उपयोग किया। संस्करण नियंत्रण प्रणाली के लिए जीएच आमतौर पर हमारी पसंद है, लेकिन हमने नोशन प्रोजेक्ट्स का उपयोग करना शुरू कर दिया है और परियोजना प्रबंधन के लिए इसे पसंद कर रहे हैं।

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

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

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

गुणवत्ता आश्वासन

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

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

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

गो-लाइव तैयारी

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

इसलिए, हमने खोज इंजनों और ब्राउज़रों को यह सूचित करने के लिए 301 रीडायरेक्ट का उपयोग करने का निर्णय लिया कि मूल URL को स्थायी रूप से एक नए से बदल दिया गया है। यहाँ हमने क्या किया:

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

अंतिम लेकिन निश्चित रूप से महत्वपूर्ण बात यह है कि हमने यह सुनिश्चित करने के लिए काम करने के लिए समय लिया कि हमने बेहतर एसईओ रैंकिंग के लिए सर्वोत्तम प्रथाओं पर विचार किया है और यह बताया है कि क्या सुधार करने की आवश्यकता है। मार्केटिंग टीम ने निम्नलिखित बातों पर गौर करना सुनिश्चित किया:

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

परिणाम

खैर, हमारी वेबसाइट लाइव होने तक यह एक लंबी यात्रा थी। लेकिन अंदाज़ा लगाओ कि क्या है? लॉन्च के बाद भी काम जारी रहा।

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

हमने यहां जो कुछ भी साझा किया है उसे संक्षेप में प्रस्तुत करने के लिए, हमने एक छोटी चीट-शीट तैयार की है ताकि आप इसे अपने प्रोजेक्ट पर उपयोग कर सकें।