হ্যাকারনুনের পিক্সেল আইকন লাইব্রেরি তৈরিতে

দ্রুত বিকশিত ডিজাইনের বর্তমান ডিজিটাল যুগে, প্রতিটি ছোটখাটো বিবরণ সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা (UX) কে উল্লেখযোগ্যভাবে প্রভাবিত করতে পারে। আইকন, উদাহরণস্বরূপ, একটি পণ্যের ভিজ্যুয়াল আবেদনকে উল্লেখযোগ্যভাবে উন্নত করতে পারে।

তৃতীয় পক্ষের সংস্থানগুলির উপর আমাদের নির্ভরতা হ্রাস করার প্রচেষ্টা হিসাবে যা শুরু হয়েছিল তা আরও উল্লেখযোগ্য উদ্যোগে পরিণত হয়েছে।

Pixelated আইকনগুলির এই ওপেন-সোর্স সংগ্রহটি নিখুঁত প্রান্তিককরণ এবং সামঞ্জস্যের জন্য একটি 24px গ্রিড ব্যবহার করে ডিজাইন করা হয়েছে, যার ফলে আপনার ওয়েব/অ্যাপ/প্রোডাক্ট/পৃষ্ঠা/জীবনের অভিজ্ঞতা সমৃদ্ধ হবে। HackerNoon এর রেট্রো ডিজাইন ভাইব দ্বারা অনুপ্রাণিত, এই আইকনগুলি ইন্টারনেটের সোনালী যুগের সারমর্মকে ধারণ করে।

আমাদের পিক্সেল আইকন লাইব্রেরির পিছনের ধারণা

ডিজাইনার হিসাবে, আমরা প্রায়শই আমাদের প্রক্রিয়াগুলিকে প্রবাহিত করার জন্য সমাধান খুঁজি।

হ্যাকারনুন-এ, সাইটে প্রয়োজনীয় কার্যকারিতা এবং নান্দনিকতা যোগ করার জন্য আমরা প্রাথমিকভাবে ফন্ট অসাধারন আইকনগুলিতে ফিরে এসেছি। এই আইকনগুলি ধারাবাহিকতা এবং বিস্তৃত বিকল্পগুলি অফার করে আমাদের ভাল পরিবেশন করেছে। যাইহোক, একটি প্রাক-বিদ্যমান লাইব্রেরির উপর নির্ভর করে, আমরা আর আমাদের ব্র্যান্ড পরিচয়টি বিকশিত হওয়ার সাথে সাথে পরিষেবা দিতে পারি না।

আমাদের প্রতিষ্ঠাতা, ডেভিড এবং লিন , প্রাথমিকভাবে আমাদের পণ্যের মিটিংগুলির মধ্যে একটি ইন-হাউস আইকন লাইব্রেরিতে রূপান্তর করার ধারণাটি প্রস্তাব করেছিলেন৷ প্রথম ধাপটি হ্যাকারনুন-এ বিদ্যমান অসাধারন ফন্ট আইকনগুলিকে আমাদের নিজস্ব আইকনগুলির সাথে প্রতিস্থাপনের উপর দৃষ্টি নিবদ্ধ করে৷ পরেরটি সম্প্রদায়ের জন্য একটি আইকন লাইব্রেরি হিসাবে এই আইকনগুলি ভাগ করার দিকে মনোনিবেশ করেছিল৷

এই পরিবর্তন আমাদের সৃজনশীলভাবে নিজেদেরকে চ্যালেঞ্জ করার অনুমতি দিয়েছে। যদিও যাত্রাটি তার চ্যালেঞ্জ ছাড়া ছিল না, আমরা তৈরি করা প্রতিটি পিক্সেলেড আইকন আমাদের ব্র্যান্ডের ব্যক্তিত্বকে উজ্জ্বল করতে দেয়। এই পিক্সেলেড আইকনগুলি নিছক ভিজ্যুয়াল উপাদানের চেয়ে বেশি হয়ে উঠেছে; তারা এখন হ্যাকারনুন এর প্রতিফলন।

আমাদের ইন-হাউস আইকন ডিজাইন করা: ধারণা থেকে সৃষ্টি পর্যন্ত

একটি আইকন লাইব্রেরি তৈরি করা সৃজনশীলতা, নির্ভুলতা এবং সমস্যা সমাধানের মাধ্যমে একটি আনন্দদায়ক যাত্রা ছিল। হ্যাকারনুন এর সারমর্মের সাথে আবদ্ধ এই পিক্সেলেড আইকনগুলি তৈরি করার পিছনের প্রক্রিয়াটি এখানে উঁকি দেওয়া হয়েছে।

1. ডিজাইনের ভাষা সংজ্ঞায়িত করা

2. ভাবনা ও স্কেচিং

3. ডিজাইন করা এবং আইডিয়াগুলোকে জীবনে আনা

4. কমিউনিটি প্রকাশনার জন্য প্রস্তুতি: ফিগমা এবং গিটহাব

   
   

ডিজাইনের ভাষা সংজ্ঞায়িত করা

একটি সমন্বিত নকশা ভাষা সংজ্ঞায়িত করে আমাদের যাত্রা শুরু হয়েছিল। এর মধ্যে বিশদ স্তর, চিত্রায়ন শৈলী এবং মেজাজ সম্পর্কে সিদ্ধান্ত নেওয়া জড়িত যা আমরা আমাদের আইকনগুলিকে জানাতে চেয়েছিলাম। এই ফাউন্ডেশন প্রতিষ্ঠার ফলে লাইব্রেরি জুড়ে ধারাবাহিকতা নিশ্চিত করা হয়।

• বিশদ স্তরের জন্য, আমরা একটি ন্যূনতম পদ্ধতির জন্য বেছে নিয়েছি এবং পরিষ্কার আইকনগুলির জন্য লক্ষ্য করেছি। আমরা নিশ্চিত করেছি যে আইকনগুলি স্কেল করার সময় ভিজ্যুয়াল বিশৃঙ্খল সৃষ্টি করবে না, যা আমাদের অপ্রয়োজনীয় বিবরণ মুছে ফেলতে সাহায্য করেছে।

• আমাদের ইলাস্ট্রেশন স্টাইলটি বিশেষ করে হ্যাকারনুন লোগো দ্বারা অনুপ্রাণিত হয়েছিল। বিপরীতমুখী, 80-এর অনুপ্রাণিত পিক্সেল ব্লক ডিজাইন শৈলী আমাদের ব্র্যান্ডের সাথে পুরোপুরি সঙ্গতিপূর্ণ। এটি নিশ্চিত করে যে ডিজাইনের ভাষা সামগ্রিক ভিজ্যুয়াল পরিচয়ের সাথে সামঞ্জস্যপূর্ণ ছিল। আমরা তাদের Pixelated আইকন বলি।

  
  

  
  

  

• ধারাবাহিকতা বজায় রাখতে, আমরা একটি 24px গ্রিড বেছে নিয়েছি। (আইকন ডিজাইন করার সময় একটি 24px গ্রিড আদর্শ হিসাবে বিবেচিত হয় যেহেতু বেশিরভাগ সিস্টেম আইকন 24x24 এ প্রদর্শিত হয়)। এটি আমাদের প্রদান করে পিক্সেল-নিখুঁত নির্ভুলতার সাথে 100% স্কেলে দেখার জন্য আইকন তৈরি করতে সক্ষম করেছে:

  
  

  • আইকন সামগ্রীর জন্য একটি 22px লাইভ এলাকা

  • এবং লাইভ এলাকা ঘিরে প্যাডিং এর 1px

    
    

    

    
    

    
    

ভাবনা ও স্কেচিং

ধারণার প্রক্রিয়াটি বর্তমান আইকন এবং তাদের নিজ নিজ ব্যবহারের ক্ষেত্রে দ্বারা প্রতিনিধিত্ব করা ফাংশনগুলি তালিকাভুক্ত করার মাধ্যমে শুরু হয়েছিল। তারপরে আমরা এই কার্যকারিতাগুলির জন্য আইকনগুলিকে কীভাবে পুনরায় ডিজাইন করতে পারি তা নিয়ে চিন্তাভাবনা করেছি। এবং তারপর দ্রুত ডুডল এবং স্কেচ সঙ্গে অনুসরণ. এই রুক্ষ স্কেচগুলি আমাদেরকে ছোট স্কেলে আইকনগুলিকে কল্পনা করতে সাহায্য করেছে, দ্রুত পুনরাবৃত্তি এবং উপযুক্ত নয় এমন ধারণাগুলিকে বাতিল করার অনুমতি দেয়৷

পিক্সেলেড আইকন ডিজাইন করা

পরবর্তী গুরুত্বপূর্ণ পদক্ষেপটি ছিল এই হাতে আঁকা ধারণাগুলিকে পিক্সেলেড আইকনে রূপান্তর করা। এই পর্যায়ে প্রাথমিকভাবে অ্যাডোব ইলাস্ট্রেটর ব্যবহার করে এই পিক্সেলেটেড আইকনগুলি তৈরি করা এবং পরবর্তীতে স্কেলেবিলিটি পরীক্ষা করার জন্য বিভিন্ন ফর্ম্যাট এবং আকারে রপ্তানি করা জড়িত।

• আমরা ইলাস্ট্রেটরে এই রুক্ষ স্কেচগুলি আমদানি করে শুরু করেছি।

  
  

  

• তারপর আমরা পিক্সেলেশন প্রক্রিয়া শুরু করার জন্য গ্রিড টুল ব্যবহার করে একটি 24px গ্রিড তৈরি করেছি।

• আমরা লাইভ পেইন্ট টুল ব্যবহার করেছি এবং 50%> স্থান দখল করা প্রতিটি বর্গক্ষেত্র পূরণ করেছি।

  
  

• আমরা ডিজাইনের সাথে সন্তুষ্ট হয়ে গেলে, আমরা আকার তৈরি করতে লাইভ পেইন্ট (অবজেক্ট মেনু → প্রসারিত) প্রসারিত করেছি।

• এর পরে, আমরা এই আকারগুলিকে সরল করতে শেপ বিল্ডার টুল ব্যবহার করেছি, এবং voilà! আমাদের pixelated আইকন প্রস্তুত ছিল.

  
  

• তারপরে আমরা আইকনটিকে SVG, PNG 12px, 16px, 24px এবং 48px হিসাবে রপ্তানি করেছি। (আমরা ধারণা পর্বের সময় তালিকাভুক্ত ব্যবহারের ক্ষেত্রে এই মাপগুলি নির্বাচন করেছি)

  
  

• তাছাড়া, আমরা আইকন সম্পর্কে নির্দিষ্ট বিবরণ নথিভুক্ত করেছি, যেমন তাদের প্রকার। বর্তমানে, আমাদের তিনটি প্রকার রয়েছে: সলিড (ফিল), নিয়মিত এবং হালকা আইকন। সেই আইকনগুলির জন্য আরেকটি প্রকার রয়েছে যা প্রথম তিনটির অধীনে পড়ে না, যথা ব্র্যান্ড লোগো । (ডকুমেন্টিং আইকনগুলি ডিজাইনের ধারাবাহিকতা বজায় রাখতে সাহায্য করে এবং ভবিষ্যতের আপডেটগুলিকে সহজতর করে)

  
  

কমিউনিটি প্রকাশনার জন্য প্রস্তুতি: ফিগমা এবং গিটহাব

একবার আমরা পছন্দসই বিন্যাসে সমস্ত আইকন রপ্তানি করার পরে, আমরা এই আইকনগুলিকে সংগঠিত করেছি এবং সম্প্রদায় প্রকাশের জন্য প্রস্তুত করেছি৷ আমরা এই উদ্দেশ্যে ফিগমা সম্প্রদায় ফাইল এবং একটি গিটহাব সংগ্রহস্থল বেছে নিয়েছি।

আমরা কীভাবে সবকিছু প্রস্তুত করেছি তা এখানে:

• গ্রুপিং এবং সংগঠিত করা: আমরা আইকনগুলিকে তাদের প্রকারের উপর ভিত্তি করে চারটি সেটে সংগঠিত করেছি: সলিড, নিয়মিত, হালকা এবং ব্র্যান্ড লোগো, ব্যবহারকারীদের জন্য নির্দিষ্ট আইকনগুলি অনুসন্ধান করা সহজ করে তোলে৷

  
  

• নামকরণ কনভেনশন এবং ফোল্ডার স্ট্রাকচার: ব্যবহারকারীদের আইকন শনাক্ত করা সহজ করার জন্য আমরা একটি পরিষ্কার এবং বর্ণনামূলক নামকরণ কনভেনশন প্রতিষ্ঠা করেছি। গিটহাব রেপোর জন্য, আমরা নিম্নরূপ একটি ফোল্ডার কাঠামো বেছে নিয়েছি: ফাইল-টাইপ/কালার-থিম(যদি থাকে)/size/icon-type/icon-name.file-extension (যেমন: PNG/For Dark Mode/24px/ সলিড/Ad.png এবং SVG/Solid/Ad.svg )

  
  

• কম্পোনেন্ট লাইব্রেরি তৈরি করা এবং ফিগমায় ভেরিয়েন্ট সংজ্ঞায়িত করা: ফিগমার কম্পোনেন্ট সিস্টেম আমাদের প্রতিটি আইকনের জন্য মাস্টার কম্পোনেন্ট তৈরি করতে দেয়। আমরা প্রতিটি আইকনের জন্য আকারের বৈকল্পিক তৈরি করেছি, ব্যবহারকারীদের কোনো ঝামেলা ছাড়াই সরাসরি আইকনগুলিকে স্কেল করতে সক্ষম করে। এটি আইকন আপডেট করার প্রক্রিয়াটিকে সুগম করেছে এবং বিভিন্ন ডিজাইন ফাইল জুড়ে ধারাবাহিকতা নিশ্চিত করেছে।

• গিটহাব রিপোজিটরি সেট আপ করা: আমরা আমাদের পিক্সেল আইকন লাইব্রেরির জন্য একটি ডেডিকেটেড গিটহাব রিপোজিটরি তৈরি করেছি, যা আমাদের আইকনগুলিকে বৃহত্তর ডিজাইন এবং ডেভেলপমেন্ট সম্প্রদায়ের সাথে পরিচালনা এবং শেয়ার করার অনুমতি দেয়।

  
  

• GitHub-এ ডকুমেন্টেশন: আমরা আমাদের GitHub রেপোতে একটি ব্যাপক README ফাইল তৈরি করেছি। এর মধ্যে রয়েছে পিক্সেল আইকন লাইব্রেরির একটি ভূমিকা, আপনার প্রকল্পে এই পিক্সেলযুক্ত আইকনগুলি ব্যবহার করার সমস্ত সম্ভাব্য পদ্ধতির তথ্য, লাইসেন্সের বিশদ বিবরণ, ভালভাবে সংজ্ঞায়িত অবদানের নির্দেশিকা এবং অন্যান্য বিশেষ বিবেচনা।

  
  

  
  

• ফিগমার উপর ডকুমেন্টেশন: ফিগমার জন্য, আমরা একটি আলাদা পৃষ্ঠা সম্পর্কে তৈরি করেছি, যাতে পিক্সেল আইকন লাইব্রেরির একটি গভীর ভূমিকা এবং কম্পোনেন্ট লাইব্রেরি এবং ভেরিয়েন্ট ব্যবহার করার উপর একটি টিউটোরিয়াল অন্তর্ভুক্ত ছিল। আমরা সহজ রেফারেন্সের জন্য তাদের নামের সাথে আইকনগুলির একটি তালিকা অন্তর্ভুক্ত করেছি।

  
  

• লাইসেন্সিং: আমরা আমাদের আইকন লাইব্রেরির জন্য লাইসেন্সিং শর্তাবলী পরিষ্কারভাবে সংজ্ঞায়িত করেছি। পিক্সেল আইকন লাইব্রেরি গিটহাব রেপো এবং ফিগমা ফাইল CC BY 4.0 লাইসেন্সের অধীনে লাইসেন্সপ্রাপ্ত, যা হ্যাকারনুনকে যথাযথ অ্যাট্রিবিউশন সহ ব্যবহারের অনুমতি দেয়।

সমাপ্ত পণ্য:

পিক্সেল আইকন লাইব্রেরি তৈরি করার জন্য আমাদের যাত্রা সৃজনশীল অন্বেষণ, চ্যালেঞ্জ এবং বৃদ্ধিতে পরিপূর্ণ। অসাধারন ফন্ট আইকন ব্যবহার করে আমাদের বিনম্র সূচনা থেকে শুরু করে সাইট-ব্যাপী ইন-হাউস আইকন ব্যবহার করা এবং অবশেষে, আমাদের নিজস্ব পিক্সেল আইকন লাইব্রেরি তৈরি।

এই প্রক্রিয়াটি আমাদের শিখিয়েছে যে আইকনগুলি নিছক প্রতীক নয় বরং তাদের নিজস্বভাবে গল্পকার।

এই সৃজনশীল যাত্রায় আমাদের সাথে যোগ দিন এবং হ্যাকারনুন-এর পিক্সেল আইকন লাইব্রেরিটি ব্যবহার করে দেখতে প্রথম হন।

সৃজনশীল থাকুন, আইকনিক থাকুন।