उचित वेबसाइट रीडिज़ाइन - चरण-दर-चरण एल्गोरिथ्म, बुनियादी प्रश्न और बारीकियाँ

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

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

साइट डिज़ाइन बदलते समय मुख्य मुद्दे

किसी भी काम को शुरू करने से पहले, आपको यह स्पष्ट रूप से समझना चाहिए कि क्या आपको किसी वेबसाइट को नया स्वरूप देने की आवश्यकता है।
मैं निम्नलिखित प्रश्नों के उत्तर देने की सलाह देता हूं:

1. क्या रूपांतरण गिर रहा है? क्या साइट पर समय गिर रहा है, क्या रूपांतरण गिर रहे हैं? * मीट्रिक में यह सारी जानकारी देखें।
2. क्या आपका ऑनलाइन स्टोर आधुनिक दिखता है? * बुनियादी जरूरतों के लिए अपने सभी प्रतिद्वंद्वियों को ब्राउज़ करें, उनके डिजाइन की अपनी, उपयोगिता, उत्पाद फ़िल्टर, विभिन्न ब्लॉकों और इसी तरह से तुलना करें।
3. क्या आपकी साइट पर मोबाइल संस्करण या उत्तरदायी डिज़ाइन है? * मुझे लगता है कि आप इस प्रश्न का उत्तर जानते हैं, यदि नहीं, तो "डायग्नोस्टिक्स" - "साइट डायग्नोस्टिक्स" अनुभाग में webmaster.yandex.ru पर जाएं, रिपोर्ट में मोबाइल संस्करण पर सिफारिशें शामिल होंगी।

इस पर, सभी मुख्य बिंदु जिन्हें आपको समझने की आवश्यकता है, हम साइट के रीडिज़ाइन के दौरान मुख्य मुद्दों और समस्याओं की ओर मुड़ते हैं।

साइट डिज़ाइन कैसे बदलें और स्थिति न खोएं?

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

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

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

• मैं सभी मूल HTML टैग्स को याद रखने की सलाह देता हूं। यह न केवल हेडर्स H1-H6 के बारे में है, बल्कि डिज़ाइन टैग b, i, ul, आदि के बारे में भी है। मैं उन्हें छोड़ने की सलाह देता हूं जहां वे थे (हम लेआउट के काम के समय इसे बयान में शामिल करते हैं)। ये सभी टैग पृष्ठ की प्रासंगिकता को एक डिग्री या किसी अन्य के लिए अनुरोध को प्रभावित करते हैं, और हम अपनी साइट की स्थिति को खराब नहीं करना चाहते हैं, इसलिए इन बिंदुओं को छोड़ना उचित है क्योंकि वे थे।

• नए ब्लॉक के साथ पल। उदाहरण के लिए, उत्पाद श्रेणी का पृष्ठ लें, नए डिज़ाइन में हमारे पास स्टोर न्यूज़ के साथ एक ब्लॉक है, एक उदाहरण:

यह सब अच्छा है, लेकिन यह समझने में सार्थक है कि ये सभी आंतरिक लिंक हैं जो उनके वजन को व्यक्त करते हैं, अर्थात, हमने 6-7 जोड़े हैं (इस पर निर्भर करता है कि कितने लेख हिंडोला में हैं) लेखों के लिंक (जिन्हें हम बढ़ावा देने की आवश्यकता नहीं है) )। साथ ही, यह ब्लॉक हमारे पेज में अप्रासंगिक कंटेंट जोड़ता है, जो अच्छा नहीं है।

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

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

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

सभी मुख्य सिफारिशों को संक्षेप में प्रस्तुत करने के लिए:

1. संरचना को मत बदलो, url को मत बदलो;
2. सीएमएस को न बदलें;
3. मुख्य लेआउट टैग में न्यूनतम परिवर्तन जो प्रासंगिकता को प्रभावित करते हैं (H1-H6, b, i, आदि);
4. हम यह सुनिश्चित करते हैं कि पहले प्रदर्शित की गई सभी जानकारी साइट पर बनी हुई है (यदि आपको इसकी आवश्यकता है, तो आप मीट्रिक - क्लिक मैप, उपयोगकर्ता क्रियाओं के वीडियो आदि देख सकते हैं)।
5. यदि हम बहुत सारे नए ब्लॉक जोड़ते हैं, तो एक नई कार्यक्षमता जो बहुत अधिक सामग्री का उपयोग करती है, मैं उन्हें इंडेक्स से बंद करने की सलाह देता हूं (जिससे अनावश्यक प्रश्नों से खुद को बचाता हूं)। अगला, धीरे-धीरे नोइंडेक्स को हटा दें और पदों की निगरानी करें (यह सब कुछ वापस करना संभव है)।
6. नए ब्लॉकों के साथ इसी तरह के यांत्रिकी जिसमें कई लिंक होंगे, मैं भी nofollow विशेषताओं में लिंक को बंद करने की सलाह देता हूं (हमारे पदों को संरक्षित करना सब कुछ है), फिर हम धीरे-धीरे उन्हें हटाते हैं, हम स्थिति को हटाने के परिणामों को देखते हैं।

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

भविष्य की वेबसाइट डिजाइन के लिए एक प्रोटोटाइप तैयार करना

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

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

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

एक प्रोटोटाइप कार्यक्रम चुनना

आज तक, बहुत सारे समान कार्यक्रम और सेवाएं हैं, इसलिए मैं इस पर ध्यान केंद्रित करने की अनुशंसा नहीं करता हूं, बस वह लें जो मुफ़्त है और जिसमें हम काम करने में सहज हैं:

1. शानदार

एक मुफ्त संस्करण है, आप इसका उपयोग कर सकते हैं।

2) धुरी

सरल और सुविधाजनक कार्यक्रम।

3) मॉकिंगबर्ड

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

प्रोटोटाइप तैयार करना

1) हम अपने सभी प्रतियोगियों को पाते हैं

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

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

2) हम सभी ब्लॉक लिखते हैं

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

3) हम साइट के सभी तत्वों का चयन करते हैं

इस स्तर पर, आपको यह तय करने की आवश्यकता है कि हेडर क्या होगा, मुख्य मेनू क्या होगा, तहखाने, और इसी तरह।

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

4) शैली और रंग योजना पर निर्णय लें

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

ऐसा करने के लिए, मैं अनुशंसा करता हूं कि आप उन फ्रीलांस साइटों पर ध्यान दें, जिन पर हम अपने डिजाइन का आदेश देंगे। बहुत सी समान साइटें हैं, यहाँ सबसे लोकप्रिय हैं:

• Kwork.ru ;
• Fl.ru ;
• Weblancer.net ;
• और अन्य।

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

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

साइट प्रोटोटाइप का प्रतिपादन

हम मॉकिंगबर्ड सेवा पर बस गए, इसलिए हम खत्म हो गए, पंजीकरण करें और अपना काम शुरू करें।

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

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

वैकल्पिक रूप से, आप फ़ोटोशॉप में सब कुछ संशोधित कर सकते हैं ताकि सभी तत्व और भी अधिक दृश्य हों।

आउटपुट में, हमारे पास कुछ इस तरह है:

हमने प्रोटोटाइप में सभी रूपों, टैब को भी प्रस्तुत किया:



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

हम प्रोटोटाइप का विस्तृत विवरण लिखते हैं

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

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

* इन मुद्दों और बारीकियों को स्वयं प्रोटोटाइप पर वर्णित किया जा सकता है, उदाहरण के लिए:


हम डिजाइन के चयन और आदेश के लिए सीधे आगे बढ़ते हैं।

कलाकार की पसंद, डिजाइन का क्रम

एक डिजाइन के आदेश के लिए दो विकल्प हैं:

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

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

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

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

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

* यह याद रखने योग्य है कि डिजाइन से जो कुछ भी हम अपेक्षा करते हैं वह काम के बयान में पहले से ही हमारे द्वारा लिखा गया है, इसलिए इस मुद्दे के वित्तीय पक्ष को वरीयता देना बेहतर है, क्योंकि इससे परिणाम वास्तव में नहीं बदलेगा।

नतीजतन, हमारे पास पूरी तरह से तैयार, सरल और आधुनिक डिजाइन है:
आप पूरी तरह से tkspecodegda.ru पर प्रोजेक्ट से परिचित हो सकते हैं

सभी पर प्रकाश डाला गया:

1. यह स्पष्ट रूप से निर्धारित करना आवश्यक है कि क्या हमें एक वेबसाइट को फिर से डिज़ाइन करने की आवश्यकता है;
2. हम सबसे अच्छे प्रतियोगियों का चयन करते हैं, उनकी साइटों, कार्यक्षमता के आधार पर, हम सभी सर्वश्रेष्ठ का चयन करते हैं;
3. तैयार जानकारी के आधार पर, हम प्रत्येक पृष्ठ का एक उच्च-गुणवत्ता वाला प्रोटोटाइप बनाते हैं;
4. एक ऐसी साइट चुनें जो हमें पूरी तरह से रंग और शैली में सूट करती है;
5. हम एक व्याख्यात्मक नोट करते हैं, प्रोटोटाइप के लिए tz;
6. हम लोकप्रिय फ्रीलांस एक्सचेंजों पर डिजाइन का आदेश देते हैं;
7. हमें तैयार डिज़ाइन मिलता है जिसे हम चाहते थे, जिसकी हमें पर्याप्त कीमत चाहिए;
8. हम लेआउट और खिंचाव, कलाकार की खोज के लिए तकनीकी विशिष्टताओं के संकलन की ओर मुड़ते हैं।

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