2,563 रीडिंग

हैकरनून की पिक्सेल आइकन लाइब्रेरी के निर्माण पर

द्वारा Devansh Chaudhary6m2023/08/31

बहुत लंबा; पढ़ने के लिए

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

featured image - हैकरनून की पिक्सेल आइकन लाइब्रेरी के निर्माण पर

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

तीसरे पक्ष के संसाधनों पर हमारी निर्भरता को कम करने के प्रयास के रूप में जो शुरू हुआ वह एक अधिक महत्वपूर्ण उद्यम में बदल गया है।

हम समुदाय के लिए " हैकरनून द्वारा पिक्सेल आइकन लाइब्रेरी " पेश करने के लिए उत्साहित हैं।

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

हमारी पिक्सेल आइकन लाइब्रेरी के पीछे की अवधारणा

डिजाइनरों के रूप में, हम अक्सर अपनी प्रक्रियाओं को सुव्यवस्थित करने के लिए समाधान खोजते हैं।

HackerNoon में, हमने साइट पर आवश्यक कार्यक्षमता और सौंदर्यशास्त्र जोड़ने के लिए शुरू में फ़ॉन्ट विस्मयकारी आइकन की ओर रुख किया। इन आइकनों ने निरंतरता और विकल्पों की एक विस्तृत श्रृंखला की पेशकश करके हमारी अच्छी सेवा की। हालाँकि, पहले से मौजूद लाइब्रेरी पर भरोसा करके, हम अब अपनी ब्रांड पहचान को विकसित होने तक सेवा नहीं दे सकते।

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

इस परिवर्तन ने हमें रचनात्मक रूप से खुद को चुनौती देने की अनुमति दी। हालाँकि यह यात्रा चुनौतियों से रहित नहीं थी, हमारे द्वारा तैयार किए गए प्रत्येक पिक्सेलयुक्त आइकन ने हमारे ब्रांड के व्यक्तित्व को चमकने दिया। ये पिक्सेलयुक्त चिह्न केवल दृश्य तत्वों से कहीं अधिक बन गए हैं; वे अब हैकरनून का प्रतिबिंब हैं।

हमारे इन-हाउस आइकन डिज़ाइन करना: संकल्पना से निर्माण तक

रचनात्मकता, सटीकता और समस्या-समाधान के माध्यम से एक आइकन लाइब्रेरी बनाना एक रोमांचक यात्रा थी। यहां हैकरनून के सार से युक्त इन पिक्सेलयुक्त आइकनों को तैयार करने के पीछे की प्रक्रिया की एक झलक दी गई है।

डिज़ाइन भाषा को परिभाषित करना
विचार एवं रेखाचित्र
डिज़ाइन करना और विचारों को जीवन में लाना
सामुदायिक प्रकाशन की तैयारी: फिग्मा और गिटहब

डिज़ाइन भाषा को परिभाषित करना

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

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

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

स्थिरता बनाए रखने के लिए, हमने 24px ग्रिड का विकल्प चुना। (आइकन डिज़ाइन करते समय 24px ग्रिड को आदर्श माना जाता है क्योंकि अधिकांश सिस्टम आइकन 24x24 पर प्रदर्शित होते हैं)। इसने हमें यह प्रदान करके पिक्सेल-परिपूर्ण सटीकता के साथ 100% पैमाने पर देखने के लिए आइकन बनाने में सक्षम बनाया:
- आइकन सामग्री के लिए 22px का लाइव क्षेत्र
- और लाइव क्षेत्र के चारों ओर 1px पैडिंग

विचार एवं रेखाचित्र

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

पिक्सेलेटेड आइकन डिजाइन करना

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

हमने इन रफ रेखाचित्रों को इलस्ट्रेटर में आयात करके शुरुआत की।

फिर हमने पिक्सेलेशन प्रक्रिया शुरू करने के लिए ग्रिड टूल का उपयोग करके 24px ग्रिड बनाया।

हमने लाइव पेंट टूल का उपयोग किया और 50% से अधिक जगह घेरने वाले प्रत्येक वर्ग को भर दिया।

एक बार जब हम डिज़ाइन से संतुष्ट हो गए, तो हमने आकृतियाँ बनाने के लिए लाइव पेंट (ऑब्जेक्ट मेनू → विस्तार) का विस्तार किया।

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

फिर हमने आइकन को SVG, PNG के रूप में 12px, 16px, 24px और 48px पर निर्यात किया। (हमने विचार चरण के दौरान सूचीबद्ध उपयोग के मामलों के आधार पर इन आकारों का चयन किया)
इसके अलावा, हमने आइकनों के बारे में विशिष्ट विवरण, जैसे कि उनका प्रकार, प्रलेखित किया है। वर्तमान में, हमारे पास तीन प्रकार हैं: सॉलिड (भरें), रेगुलर और लाइट आइकन। उन आइकनों के लिए एक और प्रकार है जो पहले तीन के अंतर्गत नहीं आते हैं, अर्थात् ब्रांड लोगो । (डॉक्यूमेंटिंग आइकन डिज़ाइन की स्थिरता बनाए रखने में मदद करता है और भविष्य के अपडेट को सुविधाजनक बनाता है)

सामुदायिक प्रकाशन की तैयारी: फिग्मा और गिटहब

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

यहां बताया गया है कि हमने सब कुछ कैसे तैयार किया:

समूहीकरण और व्यवस्थित करना: हमने आइकनों को उनके प्रकार के आधार पर चार सेटों में व्यवस्थित किया: सॉलिड, रेगुलर, लाइट और ब्रांड लोगो, जिससे उपयोगकर्ताओं के लिए विशिष्ट आइकन खोजना आसान हो गया।
नामकरण परंपरा और फ़ोल्डर संरचना: हमने उपयोगकर्ताओं के लिए आइकन की पहचान करना आसान बनाने के लिए एक स्पष्ट और वर्णनात्मक नामकरण परंपरा स्थापित की है। GitHub रेपो के लिए, हमने इस प्रकार एक फ़ोल्डर संरचना का विकल्प चुना: फ़ाइल-प्रकार/रंग-थीम (यदि कोई हो)/आकार/आइकन-प्रकार/आइकन-नाम.फ़ाइल-एक्सटेंशन (उदाहरण: PNG/डार्क मोड के लिए/24px/ सॉलिड/एड.पीएनजी और एसवीजी/सॉलिड/एड.एसवीजी )
फिगमा में कंपोनेंट लाइब्रेरी बनाना और वेरिएंट परिभाषित करना: फिगमा की घटक प्रणाली ने हमें प्रत्येक आइकन के लिए मास्टर घटक बनाने की अनुमति दी। हमने प्रत्येक आइकन के लिए आकार भिन्न-भिन्न प्रकार बनाए हैं, जिससे उपयोगकर्ता बिना किसी परेशानी के सीधे इंस्टेंस के माध्यम से आइकन को स्केल कर सकते हैं। इसने आइकनों को अद्यतन करने की प्रक्रिया को सुव्यवस्थित किया और विभिन्न डिज़ाइन फ़ाइलों में एकरूपता सुनिश्चित की।

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

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

लाइसेंसिंग: हमने अपनी आइकन लाइब्रेरी के लिए लाइसेंसिंग शर्तों को स्पष्ट रूप से परिभाषित किया है। पिक्सेल आइकन लाइब्रेरी गिटहब रेपो और फिगमा फ़ाइल को CC BY 4.0 लाइसेंस के तहत लाइसेंस प्राप्त है, जो HackerNoon को उचित श्रेय के साथ उपयोग की अनुमति देता है।

तैयार उत्पाद:

पिक्सेल आइकन लाइब्रेरी बनाने की हमारी यात्रा रचनात्मक अन्वेषण, चुनौतियों और विकास से भरी रही है। फ़ॉन्ट विस्मयकारी आइकनों का उपयोग करने की हमारी विनम्र शुरुआत से लेकर साइट-व्यापी इन-हाउस आइकनों का उपयोग करने तक और अंत में, हमारी स्वयं की पिक्सेल आइकन लाइब्रेरी का निर्माण।

इस प्रक्रिया ने हमें सिखाया है कि प्रतीक केवल प्रतीक नहीं हैं, बल्कि अपने आप में कहानीकार भी हैं।

इस रचनात्मक यात्रा में हमारे साथ जुड़ें और HackerNoon द्वारा पिक्सेल आइकन लाइब्रेरी को आज़माने वाले पहले लोगों में से एक बनें।