डिजाइन किलर मोबाइल ऐप वेबसाइट टिप्स और उदाहरण

मोबाइल दृश्य पिछले कुछ वर्षों में तेजी से बढ़ा है। Google Play पर Android ऐप्स के साथ iOS ऐप स्टोर स्मार्टफोन के प्रति उत्साही के लिए दो हॉटस्पॉट बन गए हैं। जैसे ही स्मार्टफोन उपयोगकर्ताओं की संख्या बढ़ती है हम सैकड़ों मोबाइल ऐप डेवलपर्स को नए विचारों को बाजार में लॉन्च करते हुए देख रहे हैं.

अधिकांश लोकप्रिय एप्लिकेशन अपनी वेबसाइट के साथ हैं. यह विपणन और वहाँ से अपना नाम प्राप्त करने में सहायक हो सकता है। यह ऐप स्टोर के किसी भी हिस्से की तुलना में बहुत अधिक प्रचलित ऑनलाइन URL है। मुझे लगता है कि किसी भी सफल मोबाइल एप्लिकेशन को लगभग वेब उपस्थिति की आवश्यकता होती है.

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

नीचे इन अवधारणाओं को देखें और अपने स्वयं के एप्लिकेशन वेबसाइट लेआउट में कुछ को लागू करने का प्रयास करें.

डिवाइस स्क्रीनशॉट

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

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

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

ऐप स्टोर बैज

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

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

मोबाइल सामाजिक नेटवर्क

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

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

न्यूनतम फोटो साझा करना

पोज एक अन्य मोबाइल नेटवर्क है जिसमें न्यूनतम डिजाइन के लिए समान आदर्श हैं। आप iOS और Android दोनों उपकरणों के लिए मोबाइल ऐप डाउनलोड कर सकते हैं। भावना वीहर्टिट के समान है लेकिन यह मोबाइल फैशन प्रेमियों के लिए है। पूरा ऐप फैशन, हेयर, मेकअप और ग्लैमर के इर्द-गिर्द केंद्रित है.

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

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

विनम्र शुरुआत से

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

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

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

लवली व्हाट्सएप

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

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

रंगीन चित्र

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

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

किचेनर एक ऐसा ही iOS ऐप है जो खाना पकाने और बेकिंग के लिए माप की इकाइयों को परिवर्तित करता है। उनके हेडर लेआउट में समृद्ध लकड़ी की बनावट, एक चेकर टेबलक्लोथ और पानी के मिनी चम्मच का उपयोग होता है। इससे पहले कि आप सामग्री स्किम करते हैं, यह इमेजरी इस ऐप के उद्देश्य से संकेत देती है.

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

ऐप वेबसाइट: प्रीमियम शोकेस

क्या लेख थोड़ा सा आंख कैंडी के बिना पूरा होगा? ऊपर की तकनीकों के साथ-साथ मैंने मोबाइल ऐप वेबसाइटों की इस सुंदर गैलरी को भी एक साथ रखा है; लोगो और नेविगेशन योजनाओं, साथ ही डोमेन URL पर ध्यान दें। पेशेवर क्या करते हैं, इसका अध्ययन करके आप डिज़ाइन के रुझानों को समझ सकते हैं और उन्हें अपनी परियोजनाओं में उपयोग कर सकते हैं.

Bosquet ऐप