लैंडिंग पेज बनाते समय न्यूनतम

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

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

लैंडिंग पेज न्यूनतावाद के कुछ उदाहरण

आइए कुछ सफल वेब अनुप्रयोगों के न्यूनतावाद लैंडिंग पृष्ठ को देखें:





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

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

न्यूनतावाद लैंडिंग पृष्ठ: एक मूल विचार

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

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

प्रत्येक डिजाइन तत्व को सावधानीपूर्वक चुना जाता है। सब कुछ रणनीतिक रूप से सिर्फ इस एकल उपयोगकर्ता कार्रवाई के लिए डिज़ाइन किया गया है।

लैंडिंग पृष्ठ का उदाहरण: ड्रॉपबॉक्स

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

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

सभी गैर-आवश्यक वस्तुओं को हटा दिया जाता है या म्यूट कर दिया जाता है:

- साइट का नाम (ड्रॉपबॉक्स) पृष्ठ पर भी दिखाई नहीं देता है;

-बता दें कि ड्रॉपबॉक्स कैसे काम करता है, एक साधारण चित्रण का उपयोग किया जाता है, जो उपयोगकर्ताओं के ध्यान को "रजिस्टर" बटन पर दोगुना करता है;

-का नारा ("आपकी सामग्री, कहीं भी") छोटा और सरल है।

तो, ड्रॉपबॉक्स लैंडिंग पृष्ठ आत्मविश्वास और साहसपूर्वक दिखाया गया कि साइट आगंतुकों से क्या कार्रवाई आवश्यक है, और यह बहुत सक्षम और स्पष्ट रूप से किया जाता है।

लैंडिंग पृष्ठ का उदाहरण: मेलबॉक्स

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

प्राथमिक कार्रवाई बड़े, स्पष्ट रूप से दिखाई देने वाले बटन पर क्लिक करना है जो कहता है "एप्लिकेशन प्राप्त करें", जो ऐप्पल ऐप स्टोर में मेलबॉक्स उपयोगकर्ता को देता है।

प्रदर्शित मोबाइल डिवाइस पर आइकन वीडियो पर क्लिक करने पर खुलता है। यह प्रभावी रूप से दिखाता है कि मेलबॉक्स क्या है। वैकल्पिक गतिविधियाँ साइट के नेविगेशन मेनू पर दिखाई देती हैं, लेकिन नेविगेशन मेनू नेत्रहीन नहीं है।

लैंडिंग पृष्ठ का उदाहरण: कर्म

कर्मा एक सुंदर अतिसूक्ष्म लैंडिंग पृष्ठ का एक और शानदार उदाहरण है।

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

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

कॉल-टू-एक्शन बटन के ऊपर एक संक्षिप्त विवरण कर्म के प्रस्ताव के अनूठे मूल्य को सूचित करता है: कनेक्टिविटी और वाई-फाई के लिए धन्यवाद साझा करना।

पृष्ठभूमि की छवि का अपना अर्थ है। यह दिखाता है कि उत्पाद कैसा दिखता है और इसके आकार का एक विचार देता है (प्रासंगिक मदद - उत्पाद बहुत उपयोगी है)।

न्यूनतम लैंडिंग पृष्ठ के मुख्य घटक

न्यूनतम लैंडिंग पृष्ठ में तीन मुख्य घटक होते हैं:

1. प्राथमिक कार्रवाई

2. उत्पाद / सेवा क्या है, इसकी व्याख्या

3. वैकल्पिक

एक न्यूनतम लैंडिंग पृष्ठ बनाने के लिए सुझाव

सही दृश्य पदानुक्रम बनाने पर ध्यान दें

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

लैंडिंग पृष्ठ दृश्य पदानुक्रम में डिज़ाइन तत्व की स्थिति को प्रभावित करने वाली कुछ मुख्य विशेषताएं हैं:

-साइज: बड़े आइटम दृश्य पदानुक्रम में अधिक हैं

वेब पेज पर स्थिति: अधिकांश साइटों के लिए, वेब पेज पर सबसे ऊपर और बाएं भाग में तत्व दृश्य पदानुक्रम में अधिक होते हैं

-कॉर्न, कॉन्ट्रास्ट: किसी विशेष तत्व और उसकी पृष्ठभूमि के साथ-साथ इसके आस-पास के अन्य तत्वों के बीच मजबूत कंट्रास्ट, दृश्य पदानुक्रम में उच्च स्थान की ओर ले जाएगा

- दृश्य जटिलता: पड़ोसी तत्वों की तुलना में बाह्य रूप से अधिक जटिल तत्व अधिक दृश्य भार देता है

- अंतराल: एक तत्व के चारों ओर बड़े स्थान इसे एक उच्च दृश्य भार देते हैं

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

उदाहरण: न्यूमब्र्स

दृश्य पदानुक्रम के बारे में बात करने के लिए न्यूमब्स मिनिमिस्ट वेब डिज़ाइन एक अच्छा उदाहरण है।

एप्लिकेशन का वर्णन (1) और एक्शन बटन पर प्राथमिक कॉल (2) एक वेब पेज के दो सबसे महत्वपूर्ण तत्व हैं।

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

साइट का नाम (4) और वैकल्पिक क्रियाएं (5) दृश्य पदानुक्रम में कम स्थित हैं।

उदाहरण: घूमना

वांडर से न्यूनतम दृश्य लैंडिंग पृष्ठ में सक्षम दृश्य पदानुक्रम का एक और संस्करण देखा जा सकता है। केवल चार वेब डिज़ाइन तत्व हैं:

दृश्य पदानुक्रम में ऊपरी शिलालेख जानकारी है कि साइट केवल पंजीकृत लोगों (1) के लिए खुली है। पाठ के नीचे एक कॉल टू एक्शन है - "लॉग इन" बटन (2)।

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

साइट की वैकल्पिक कार्रवाई के लिए अन्य आगंतुक अन्य वांडर सोशल नेटवर्क पर जा सकते हैं या टंबलर ब्लॉग (4) पढ़ सकते हैं।

सुनिश्चित करें कि प्राथमिक कार्रवाई साइट पर एक विशिष्ट तत्व है।

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

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

उदाहरण: उत्साह

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

एक अच्छा दृश्य पदानुक्रम है, जहाँ आप तुरंत देख सकते हैं कि प्राथमिक क्रिया "स्टार्ट!" बटन पर क्लिक करना है।

उदाहरण: IFTTT

कृपया IFTTT लैंडिंग पृष्ठ की बहुत स्पष्ट प्राथमिक कार्रवाई पर ध्यान दें:

रंगों का प्रयोग करें और समझदारी से डिजाइन करें

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

उदाहरण: बेसकैंप

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

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

लैंडिंग के पृष्ठ में वास्तव में महत्वपूर्ण क्या है, इस पर ध्यान आकर्षित करने के लिए डिज़ाइन तत्वों के बड़े फोंट और रंग परिवर्तन कार्य करते हैं।

उदाहरण: पथ

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

अलग-अलग फ़ॉन्ट आकार, रंग और खंडों और अनुभागों में पाठ का बहुत विखंडन लैंडिंग पृष्ठ में रुचि का कारण बनता है।

पाठ सामग्री संक्षिप्त करने के लिए छड़ी

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

मिनिमलिस्ट लैंडिंग पृष्ठ पर पाठ संदेश को समझने के लिए एक छोटा और आसान होना चाहिए। जितना कम आपको पढ़ने की आवश्यकता होगी, साइट विज़िटर जितनी तेज़ी से वांछित कार्रवाई करेंगे।

उदाहरण: वर्तमान में

अपनी वेब सेवा का वर्णन केवल 3 शब्दों में कर सकते हैं: "महान कहानियाँ सुनाएँ।" यह विचार करते हुए बहुत गहरा है कि वेब सेवा इस सामग्री के आसपास केंद्रित है! लैंडिंग पेज पर पाठ की एक छोटी राशि कार्रवाई को पूरा करने के लिए साइट आगंतुक के निर्णय में बदलाव की संभावना को कम करती है।

उदाहरण: शिपमेंट

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

किसी उत्पाद / सेवा का वर्णन शीघ्रता से करें

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

वीडियो स्पष्टीकरण उदाहरण: युगल

युगल ऐप वीडियो का उपयोग यह समझाने के लिए करता है कि उनका उत्पाद कैसे काम करता है। उन्होंने इस तथ्य का लाभ उठाया कि वीडियो उत्पादन रूपांतरण को बढ़ा सकता है।

इसलिए, "प्ले नाउ" आइकन के साथ बटन पर क्लिक करने पर वीडियो धीरे-धीरे खुलता है:

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

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

इंटरएक्टिव स्पष्टीकरण उदाहरण: ऐप्पल मैक प्रो

ऐप्पल मैक प्रो का न्यूनतम लैंडिंग पृष्ठ एक उत्पाद का वर्णन करने के लिए एक और लोकप्रिय तरीका प्रदर्शित करता है: एक इंटरैक्टिव उत्पाद विवरण।

स्पष्टीकरण ध्यान पाने के लिए त्वरित एनिमेशन के साथ शुरू होता है, साथ ही संकेत मिलता है कि वेब पेज में इंटरैक्टिव एनिमेशन हैं।

फोटो के साथ उदाहरण: वालमोब

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


बैकग्राउंड फोटो दिखाता है कि वालमोब क्या है: यह आपके मोबाइल डिवाइस के लिए बिक्री का बिंदु है।

सरलता ही सफलता की कुंजी है

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