मिनिमलिस्ट लैंडिंग पेज डिजाइन

उच्च गुणवत्ता वाले लैंडिंग पृष्ठों के डिजाइन के लिए समर्पित पिछले अनुवाद ( लैंडिंग पृष्ठ, जो काम करता है ) ने 150,000 से अधिक विचारों को प्राप्त किया। तब से, बहुत समय बीत चुका है और डिजाइन के लिए दृष्टिकोण बदल गया है - अधिक से अधिक न्यूनतर पृष्ठ हैं, जिनके बारे में लेख में चर्चा की जाएगी।

पिछले कुछ वर्षों में, वेब डिजाइनर धीरे-धीरे इस निष्कर्ष पर पहुंचे हैं कि पृष्ठों पर तत्वों को जमा करना एक अच्छा विचार नहीं है।

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

कई डिजाइनर अधिक से अधिक विभिन्न तत्वों और विकल्पों को जोड़ने के लिए मौलिक रूपों का उपयोग करना पसंद करते हैं।

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

न्यूनतर एलपी के कुछ उदाहरण

यह सुनिश्चित करने के लिए कि हम एक ही चीज़ को समझते हैं, आइए न्यूनतर लैंडिंग पृष्ठों (इसके बाद - एलपी) के उदाहरणों पर एक नज़र डालते हैं:


मेलबॉक्स


TinyLetter


ड्रॉपबॉक्स


IFTTT

कृपया ध्यान दें कि उदाहरणों में अनुप्रयोग सबसे सरल नहीं हैं; वे अपने उपयोगकर्ताओं के लिए उपयोगी, नवीन और चुनौतीपूर्ण कार्यों को हल करते हैं।

लेकिन एलपी जटिलता का आवेदन की जटिलता से कोई लेना-देना नहीं है।

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

न्यूनतम एलपी: बड़ा विचार

पहली चीज जो आपकी आंख को पकड़ती है - कोई भी न्यूनतर एलपी केवल एक मुख्य उद्देश्य प्रदान करता है।

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

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

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

एलपी उदाहरण: ड्रॉपबॉक्स

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



एकमात्र तत्व जिस पर जोर दिया जाता है वह है "रजिस्टर" बटन।

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

सभी गैर-आवश्यक तत्वों को या तो डिजाइन से हटा दिया जाता है या किसी भी तरह से जोर नहीं दिया जाता है:

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

ड्रॉपबॉक्स ने कार्रवाई का एक आश्वस्त विकल्प बनाया जो उपयोगकर्ता द्वारा किया जाना चाहिए और एलपी डिजाइन इस कार्रवाई पर जोर देता है।

एलपी उदाहरण: मेलबॉक्स

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

मुख्य कार्रवाई ऐप स्टोर में एप्लिकेशन पेज पर जाने की है।



कॉल टू एक्शन के दाईं ओर एक वास्तविक एप्लिकेशन का क्लिक करने योग्य स्क्रीनशॉट है जो मेलबॉक्स का सार बताता है।

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

एलपी उदाहरण: कर्म

कर्म एक सुंदर न्यूनतर एलपी डिजाइन का एक और शानदार उदाहरण है।

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



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

बटनों के शीर्ष पर एक संक्षिप्त विवरण में एक अद्वितीय मूल्य प्रस्ताव है: वाईफाई का सार्वजनिक वितरण।

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

न्यूनतर एलपी के मुख्य घटक

आपने देखा होगा 3 दोहराए जाने वाले न्यूनतम एलपी डिजाइन तत्व:

1. मुख्य क्रिया
2. किसी उत्पाद / सेवा की व्याख्या क्या है
3. वैकल्पिक क्रिया

अगले भाग को पढ़ने और उदाहरणों को देखने के लिए इन 3 बिंदुओं को ध्यान में रखें।

न्यूनतम एलपी डिजाइन टिप्स

इस खंड में, हम कुछ युक्तियों और विचारों को देखेंगे जो ऊपर वर्णित प्रमुख एलपी घटकों पर आधारित हैं।

एक अच्छा दृश्य पदानुक्रम बनाने पर ध्यान दें

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

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

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

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

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

एलपी उदाहरण: न्यूमब्र्स

एक उदाहरण के रूप में न्यूमब्र्स के न्यूनतम डिजाइन का उपयोग करके , आप दृश्य पदानुक्रम के सिद्धांतों को बाहर कर सकते हैं।

विवरण एप्लिकेशन (1) और एक्शन बटन पर कॉल (2) पृष्ठ पर दो सबसे प्रमुख तत्व हैं।



ध्वनि नियंत्रण बटन (3) में दृश्य पदानुक्रम में एक उच्च स्थान है, जैसा कि उपयोगकर्ता पृष्ठ पर ध्वनि बंद करना चाह सकता है।

जैसा कि आप देख सकते हैं, दृश्य पदानुक्रम में उत्पाद का नाम (4) और वैकल्पिक क्रियाएं (5) बहुत कम हैं।

एलपी उदाहरण: घूमना

एलपी वेंडर पर एक अच्छा दृश्य पदानुक्रम का एक और उदाहरण देखा जा सकता है।

पेज पर आने के बाद, आपको केवल 4 तत्व दिखाई देंगे।



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

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

पदानुक्रम में सबसे कम तत्व परियोजना के सामाजिक प्रोफाइल के विचार हैं।

अपने डिजाइन में एक दृश्य पदानुक्रम बनाना

यहाँ दृश्य पदानुक्रम दिशानिर्देशों के कुछ लिंक दिए गए हैं:

• अपने डिजाइन में दृश्य भार के साथ काम करना - दृश्य पदानुक्रम में पदों के आधार पर सही दृश्य वजन चुनने के लिए एक मार्गदर्शिका
• अपने डिजाइन में ध्यान केंद्रित करना - डिजाइन तत्वों पर ध्यान आकर्षित करने के लिए तकनीकों का विवरण
• डिजाइन में गेस्टाल्ट सिद्धांत - मनोवैज्ञानिक सिद्धांतों का एक सेट (जेस्टाल्ट), जो दृश्य पदानुक्रम के निर्माण के लिए उपयोगी तकनीकों का उपयोग करता है

सुनिश्चित करें कि मुख्य क्रिया सबसे प्रमुख तत्व है।

पहले आपको यह तय करने की आवश्यकता है कि उपयोगकर्ताओं को क्या कार्य करना चाहिए। एक विशिष्ट बटन पर क्लिक करें? फेसबुक पेज लाइक करें? फॉर्म भरें?

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

एलपी उदाहरण: उत्साह

एक पृष्ठ का एक अच्छा उदाहरण जहां मुख्य क्रिया को हाइलाइट किया गया है, एल.पी. उत्साह है ।

एलपी उदाहरण: IFTTT

ध्यान दें कि IFTTT एलपी पर कार्रवाई करने के लिए कॉल कैसे हड़ताली है :

रणनीतिक रूप से रंगों और टाइपोग्राफी का उपयोग करें

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

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

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



ग्रीन का उपयोग मुख्य कॉल टू एक्शन के लिए किया जाता है। ब्लू का उपयोग मामूली कॉल टू एक्शन (प्राधिकरण या आप सेवा का उपयोग करने के 25 कारणों को देखने के लिए) के लिए किया जाता है।

तत्व रंगों में फ़ॉन्ट आकार और भिन्नताएं एलपी तत्वों के बीच ध्यान को सही ढंग से वितरित करती हैं।

एलपी उदाहरण: पथ

अगला उदाहरण एलपी पथ है, जहां सही दृश्य पदानुक्रम बनाने के लिए रंग और ठीक फोंट का उपयोग किया जाता है।

एक उल्लेखनीय हरे रंग का उपयोग मुख्य क्रिया के लिए किया जाता है (फॉर्म भरना):



फ़ॉन्ट आकार, टेक्स्ट रंग और लेआउट में अंतर एलपी को ध्यान के विभिन्न क्षेत्रों में सही ढंग से विभाजित करता है।

जितना हो सके कम टेक्स्ट का इस्तेमाल करें।

अब यह ज्ञात है कि उपयोगकर्ता पृष्ठों पर शायद ही कभी पाठ पढ़ते हैं । यह मानना ​​तर्कसंगत है कि उपयोगकर्ता द्वारा पहली बार देखे जाने वाले उत्पाद के एलपी पर, उसका धैर्य और भी कम है।

मिनिमलिस्टिक एलपी में छोटे और स्पष्ट लेबल होने चाहिए। उपयोगकर्ता को जितना कम पढ़ना होगा, वह उतनी ही तेजी से आवश्यक कार्रवाई करेगा।

एल.पी. उदाहरण: वर्तमान में

कंटेंट का सार तीन शब्दों में वर्णित किया जा सकता है - "ग्रेट स्टोरीज बताओ"। यह तुरंत स्पष्ट हो जाता है कि यह एक ऐसी सेवा है जिसका सार सामग्री पर केंद्रित है। पृष्ठ पर पाठ की मात्रा कम से कम है, इस संभावना को कम करने से कि उपयोगकर्ता भटक जाएगा।

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

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

उत्पाद / सेवा का सार शीघ्र बताएं

उत्पाद / सेवा कैसे काम करती है, यह प्रदर्शित करने के कई तरीके हैं। यहां एकमात्र नियम सादगी है।

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

युगल परियोजना अपने काम के सार को समझाने के लिए वीडियो का उपयोग करती है, इस तथ्य को देखते हुए कि वीडियो रूपांतरण को काफी नुकसान पहुंचा सकता है ।

जब आप स्क्रीन के केंद्र में आइकन पर क्लिक करते हैं तो वीडियो धीरे-धीरे दिखाई देता है:



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



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

इंटरएक्टिव विवरण उदाहरण: Apple मैक प्रो

न्यूनतम एलपी ऐप्पल मैक प्रो उत्पाद विवरण के लिए एक और लोकप्रिय सबकोड प्रदर्शित करता है - एक इंटरैक्टिव टूर।



विवरण ध्यान आकर्षित करने और पृष्ठ इंटरैक्टिव है कि दिखाने के लिए एक छोटे एनीमेशन के साथ शुरू होता है।

एक स्थिर तस्वीर का उपयोग करके नमूना विवरण: वॉलमोब

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



यह स्पष्ट रूप से दर्शाता है कि वालमोब क्या है - एक मोबाइल डिवाइस के लिए एक कैश रजिस्टर एप्लिकेशन।

जटिल सादगी

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

अनावश्यक तत्वों को हटाकर, आपको अपने डिज़ाइन (साथ ही उपयोगकर्ताओं का ध्यान) को उन तत्वों को निर्देशित करने का अवसर मिलता है जो वास्तव में महत्वपूर्ण हैं।