एक जीतना खरीदें बटन डिजाइन करने के लिए 5 युक्तियाँ

यदि आप एक डिजाइनर, या एक ऑनलाइन बाज़ारिया हैं, या आप बस एक वेबसाइट के मालिक हैं, जहाँ आप कुछ बेचने की कोशिश करते हैं, तो कुछ बिंदु पर आपको एक उचित "बाय बटन" डिज़ाइन करना होगा। और फिर, आप जल्दी से पता लगा लेंगे कि बस एक डाल “अभी खरीदें” यदि आप किसी अच्छे परिणाम की आशा रखते हैं तो नीले आयत पर पाठ पर्याप्त नहीं है.

सौभाग्य से, कुछ बुनियादी ज्ञान को जानने के बाद एक उचित "बाय बटन" डिजाइन करना इतना मुश्किल नहीं है। यहाँ जाता हैं.

सबसे पहले, ए आपके बटन पर पाठ सबसे महत्वपूर्ण बात है, लेकिन कुछ अन्य विशेषताएं हैं जिन्हें संबोधित करने की आवश्यकता है। मैं क्यों कहता हूं कि पाठ सबसे महत्वपूर्ण है? इसकी कल्पना करें - अगर खूबसूरती से डिज़ाइन किया गया बटन हो, तो उस पर लिखे टेक्स्ट का क्या मतलब है “भाड़ में जाओ!”? मामला समाप्त. अच्छी प्रतिलिपि वह है जहाँ मोनेज़ बने हैं.

आज के लेख में, हम चर्चा करते हैं 5 महत्वपूर्ण लक्षण एक उचित "खरीदें बटन" की। चलो एक नज़र डालते हैं!

1. कुल मिलाकर शैली

यह बिना किसी कारण के इस सूची में # 1 अंक है, क्योंकि यह सबसे महत्वपूर्ण गुण है.

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

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

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

मुझे सिर्फ बटन की तरह बैंगनी-गाय का एक शानदार उदाहरण दें.

मोज़िला फ़ायरफ़ॉक्स

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

ये सभी लक्षण इस बटन को अत्यंत दृश्यमान बनाते हैं। यह बैंगनी रंग की गाय है। यदि आप कह रहे हैं कि आप इसे नहीं देख रहे हैं तो आप किसी को प्रभावित करने की कोशिश कर रहे हैं.

संक्षेप में: एक उल्लेखनीय बटन होने के उद्देश्य से.

2. सूरत

चलो साथ - साथ शुरू करते हैं रंग.

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

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

एक और तरकीब। ऑरेंज लाल के बाद सबसे अधिक दिखाई देने वाले रंग के रूप में जाना जाता है। लेकिन, यह सभी नकारात्मक भावनाओं को लाल नहीं करता है (जैसी चीजें) “रुकें”, “बाहर देखो!”, तथा “खतरा”)। इंटरनेट पर सबसे लोकप्रिय नारंगी बटन पर पाया जा सकता है अमेजन डॉट कॉम.

अगली बात पर ध्यान केंद्रित करना है बटन का आकार. खैर, मैं क्या कह सकता हूं, यह बड़ा होना चाहिए। जितना बड़ा हो उतना अच्छा है। (फिर से, फ़ायरफ़ॉक्स उदाहरण।)

“क्या मैं इसे और भी बड़ा बना सकता हूं?” डिजाइनिंग चरण के दौरान पूछने के लिए एक अच्छा सवाल है। खूब करो.

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

यही कारण है कि कोई भी सरल उत्तर नहीं है, जो कि बेहतर है - आकर्षक या सरल। आपको बस अपने लिए पता लगाना है। हमेशा विभाजित परीक्षण। दो बटन बनाएं, एक आकर्षक और एक सरल। एक ही समय में दोनों का उपयोग करें, और देखें कि कौन सा बेहतर प्रदर्शन करता है। Google वेबसाइट ऑप्टिमाइज़र आपकी सहायता करेगा.

बस एक साधारण बटन का एक त्वरित उदाहरण है.

ThemeFuse

जैसा कि आप देख सकते हैं कि बटन किसी नारंगी लोमड़ी का उपयोग नहीं कर रहा है, लेकिन यह अभी भी अत्यधिक दिखाई दे रहा है। तथ्य की बात के रूप में, ThemeFuse (एक प्रीमियम वर्डप्रेस थीम स्टोर, जिसका मैं एक हिस्सा हूं) एक छोटी सी चीज प्रदान करता है जिसे शॉर्टकोड कहा जाता है। अन्य बातों के अलावा, उन शॉर्टकोड से अच्छे दिखने वाले बटन बनाने में आसानी होती है.

उदाहरण के लिए, केवल एक पंक्ति के साथ:

[बटन लिंक = "domain.com"] मेरा भयानक उत्पाद खरीदने के लिए यहां क्लिक करें! [/ बटन]

मुझे यह परिणाम मिले:

3. फॉन्ट

संस-सेरिफ़ फ़ॉन्ट सभी प्रकार के बटन के लिए मानक है। ऐसा इसलिए है क्योंकि sans-serif फोंट हर ऑनलाइन उपयोग के लिए बहुत पठनीय हैं। (दूसरी तरफ, प्रिंट प्रकाशनों के लिए सेरिफ़ फोंट बेहतर हैं।)

आप चाहते हैं कि आपके बटन पर प्रतिलिपि यथासंभव पठनीय हो, क्योंकि यह पृष्ठ पर पाठ का सबसे महत्वपूर्ण टुकड़ा है। ऑल-कैप एक अच्छा विचार नहीं है। मिश्रित-मामला बेहतर काम करता है। मिश्रित-मामले से मेरा मतलब है कि हर शब्द का पहला अक्षर एक बड़ा अक्षर है। (जैसे शब्दों को छोड़कर “के लिये”, “”, “तथा”, आदि।)

(छवि स्रोत: गोमेदेज़िन)

कुछ सुरक्षित फोंट आप उपयोग कर सकते हैं: एरियल, हेल्वेटिका, फ्रेंकलिन गॉथिक, असंख्य, या कोई अन्य क्लासिक सेन्स-सेरिफ़ फ़ॉन्ट, वास्तव में.

अब रंग का क्या। बेशक, कॉपी को बटन के रंग के विपरीत होना चाहिए। आप ग्रे-ऑन-ग्रे नहीं चाहते हैं। आप ब्लैक-ऑन-व्हाइट, या ब्लू-ऑन-ऑरेंज चाहते हैं.

फिर, पाठ को अत्यधिक पठनीय होना चाहिए.

4. प्लेसमेंट

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

में रखें सबसे स्पष्ट जगह संभव है. यहाँ रचनात्मक होने की कोशिश मत करो। प्लेसमेंट ग्राहक / उपयोगकर्ता के लिए स्पष्ट होना चाहिए.

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

बेशक, यह एक ही समय में सबसे अधिक दिखाई देने वाली जगह होने की आवश्यकता है। इसका मतलब है दो चीजें:

1. यह पूर्ण रूप से रखा जाना है मुड़ाव के ऊपर, तथा
2. व्हॉट्सएप से डरो मत। व्हॉट्सएप हर अच्छे वेब डिजाइनर का दोस्त है। याद रखें, इससे कोई फर्क नहीं पड़ता कि आप किसी वेबसाइट पर कितना सामान रख सकते हैं, इससे क्या फर्क पड़ता है कि आप इससे कितना सामान निकाल सकते हैं.

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

5. अतिरिक्त तत्व

यह केक पर आइसिंग है। अतिरिक्त तत्व आपके बटन की दृश्यता को और भी बेहतर बनाते हैं। तत्वों के उदाहरण: तीर, शॉपिंग कार्ट, आवर्धक चश्मा, प्लस संकेत या विभिन्न ब्रांडिंग तत्व.

मेरा पसंदीदा उदाहरण - फ़ायरफ़ॉक्स उदाहरण - एक बहुत ही शांत अतिरिक्त तत्व का उपयोग करता है - नारंगी लोमड़ी (उर्फ उनके लोगो).

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

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

यहाँ कुछ उदाहरण हैं:

Wakeinteractive

Commercialiq

MediaTemple

Unlocking.com

Sofasurfer.eu

Uploadify

"नि: शुल्क" की शक्ति

एक और चाल अंग्रेजी भाषा में सबसे शक्तिशाली शब्द का उपयोग है - मुफ़्त। जब भी किसी चीज को मुफ्त में विज्ञापित किया जाता है, तो लोग पूर्वानुमान के अनुसार कार्य करना शुरू कर देते हैं दान एरली, "अपरिपक्वता का नकारात्मक अर्थ" यह जानने के लिए कि मेरा क्या मतलब है। "

और ज्यादा उदाहरण:

Freshbooks

Wufoo

Freeagent.com

आगे क्या होगा?

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

शानदार खरीद बटन डिजाइन करने पर आपकी क्या सलाह है? मुझे आपकी राय के साथ इस पोस्ट को अपडेट करना अच्छा लगेगा.