कैसे एक सफल यूआई किट बनाने और बाजार में लाने के लिए

पेपर किट के पीछे की कहानी

पेपर यूआई किट

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

कुछ साल पहले मैंने ट्विटर पर एक उद्धरण देखा था। यह इस प्रकार है: "मुझे एक पेड़ को काटने के लिए छह घंटे का समय दें और मैं पहले चार कुल्हाड़ियों को तेज करने में खर्च करूंगा।" इसका श्रेय अब्राहम लिंकन को दिया जाता है। इससे मेरे लिए बहुत कुछ समझ में आया और मैंने काम करने के तरीके पर अपना दृष्टिकोण बदल दिया।
 
 मैं कार्यों के माध्यम से शक्ति प्राप्त करने के लिए वास्तव में एक प्रकार का व्यक्ति बन गया था। अपने काम के वर्षों में मैंने अधिक धैर्य रखना सीखा, अपनी कुल्हाड़ी को तेज किया। यह विकासशील और यूआई किट में कैसे अनुवाद करता है? मूल रूप से, अनुसंधान। कोड की किसी भी पंक्ति को लिखने से पहले मैंने इंटरनेट पर पाए जाने वाले सभी यूआई किट का निरीक्षण किया है।
 
 ThemeForest और BootstrapBay जैसे मार्केट में कई तरह के थीम हैं। उनमें से ज्यादातर एक विशिष्ट उद्देश्य के लिए बनाए गए हैं। यदि आप एक विशिष्ट प्रस्तुति साइट बनाने की कोशिश कर रहे हैं तो वे आम तौर पर बहुत अच्छा काम करते हैं। लेकिन हम कुछ ऐसा बनाना चाहते थे जो एक बैक-एंड डेवलपर किसी जटिल प्रोजेक्ट के साथ उपयोग कर सके। इसलिए हमने अपना ध्यान वास्तविक परिसर जैसे Airbnb, Uber, Twitter, Paper53 इत्यादि की ओर स्थानांतरित किया, वे किन तत्वों का उपयोग करते हैं? वे किस डिजाइन को पसंद करते हैं?

अवयव

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

  • बटन
  • आदानों
  • चेकबॉक्स / रेडियो
  • पथ प्रदर्शन
  • ड्रॉप डाउन
  • प्रगति बार / स्लाइडर्स
  • मेनू
  • टाइपोग्राफी
  • इमेजिस
  • सूचनाएं
  • लेबल
  • हिंडोला

90% से अधिक कार्यक्षमता वाले ये कवर आपको एक पेज बनाने की आवश्यकता होती है।

आकार और विकास

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

पेपर किट से बना रजिस्टर पेजप्रोफाइल पेज पेपर किट के साथ बनाया गया है।

विकास का मतलब हर घटक के लिए SASS फाइलें बनाना था। इन सैस फाइलों को CSS में संकलित किया गया और बूटस्ट्रैप के बाद जोड़ा गया। इसलिए, कोई व्यक्ति जिसके पास पहले से ही बूटस्ट्रैप परियोजना है, वह केवल कस्टम फ़ाइलों को जोड़ सकता है और नया डिज़ाइन प्राप्त कर सकता है। जावास्क्रिप्ट संशोधन न्यूनतम थे क्योंकि हमने केवल बूटस्ट्रैप में कुछ डिफ़ॉल्ट तत्वों के लिए डिफ़ॉल्ट एनिमेशन के साथ खेला था।
 
 तत्वों को विकसित करने के बाद, हमने सभी ब्राउज़र और डिवाइस स्क्रीन पर उनका परीक्षण किया। ऐसा करने के लिए एक महान उपकरण यह है। और छवियों को जोड़ने का अंतिम भाग। मैं पेपर 53 पर अपने कुछ फ़ेव कलाकारों के संपर्क में आया और उनसे पूछा कि क्या उनके चित्र का उपयोग करना ठीक है। और वे ऐसा करके खुश थे :)
 
 अच्छी खबर यह है कि सभी पूर्व तैयारियों को पूरा करने में 3weeks का कुल विकास समय लगा। Iuhuu!

पदोन्नति

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

पेपर किट क्रिएटिव टिम पर मुफ्त डाउनलोड के रूप में पेश किया गया।

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

रखरखाव

इसकी सराहना करने के बाद, हमने नई चीजों की खोज की जिसका हमें ध्यान रखना था।

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

पेपर डैशबोर्ड

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

यदि आप हमारे साथ सहयोग करने में रुचि रखते हैं, तो मुझे cristina@creative-tim.com पर एक ईमेल भेजें