আইকন ডিজাইনের বেসিক প্রিন্সিপাল এবং এর বেস্ট প্রাকটিসগুলো জানার এখনি সময়

-----লার্ন ডিজাইন//

“যেহেতু মার্কেটিং আইকনগুলি সাধারণত কমপ্লেক্স হয়ে থাকে এবং ব্র্যান্ডিং কমিউনিকশনে অনেক গুরুত্বপূর্ণ ভূমিকা পালন করে, তাই আর্টিকেলটি আপনাকে প্রোডাক্ট আইকন এবং ইউজাররা কিভাবে এর মাধ্যমে প্রোডাক্ট বা অনলাইন এক্সপেরিয়েন্সে ইন্ট্যার‍্যাক্ট করে থাকে সে সম্পর্কে সম্পূর্ণ ধারণা দেবে।

আইকনোগ্রাফী ডিজাইন কী?

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

আইকনোগ্রাফী ডিজাইনের নীতিমালা বোঝা

আইকন তৈরি করার সময় কম্পোজিশন, ব্যালেন্স এবং ইউনিটি এই তিনটি প্রাথমিক বিষয়ের উপর খেয়াল রাখতে হবে। তাই আইকন ডিজাইনের সময় নিজেকে কিছু প্রশ্ন করতে হবে। প্রশ্নগুলোর উত্তর যদি ‘ হ্যাঁ ‘ হয় তাহলে আপনি সঠিক পথেই এগোচ্ছেন।

• আইকনটি কি ফ্রেমের কেন্দ্রে অবস্থান করছে?
• পূর্বে ডিজাইন করা অন্য আইকনগুলোর সাথে কি এটি সামঞ্জস্যপূর্ণ?
• আইকনটিকে কি যথাসম্ভব ‘সিম্পল’ লুক দেওয়া হয়েছে?
• আইকনটির হিডেন লেয়ার মুছে ক্লিন লুক দেওয়া হয়েছে কি?
• ইউজাররা message আইকনটি কি ক্লিয়ারলি বুঝতে পারছে?
  

আইকনোগ্রাফীর ডিজাইনে যে বিষয়গুলো থাকতে হবে:

• ‌ক্ল্যারিটি: একটি আইকনকে অবশ্যই কনসেপ্টের সাথে কমিউনিকেট করতে পারতে হবে। নাহলে সেটি কেবল কগনেটিভ লোড বাড়াবে কারণ, ইউজারদের আইকনটির অর্থ বুঝতেই অনেক সময় লেগে যাবে।
  
  
• ‌রিডেবিলিটি: অতিরিক্ত সুন্দর ও স্টাইলিশ লাইন লিখতে গিয়ে সবকিছু হ-য-ব-র-ল-ল করে ফেলা যাবে না।আইকন ও লেভেলের মধ্যে পর্যাপ্ত স্পেস রাখতে হবে।
  
  
• ‌এলাইনমেন্ট: রাইট এডজাস্টমেন্টের মাধ্যমে আইকনটিকে ব্যালেন্স করতে হবে যাতে আইকনটি ব্যাকগ্রাউন্ড বা কনসেপ্টের সাথে সামঞ্জস্যপূর্ণ হয়।
  
  
• ‌ব্রেভিটি: আপনার আইকনের ডিজাইনটিকে যথাসম্ভব সিম্পল রাখুন। কম্পলেক্স ডিজাইন করতে গিয়ে আইকনের সিম্পলিসিটি যাতে নষ্ট না হয় সেদিকে লক্ষ্য রাখতে হবে।
  
  
• ‌কনসিস্টেন্সি: পুরো আইকনটি যাতে সেইম স্টাইলে থাকে তা লক্ষ্য রাখতে হবে। অর্থাৎ, ভিজ্যুয়াল ওয়েট, স্ট্রোক থিকনেস, সাইজ, কর্নার রেডিয়াস, শেপ ও ফিলের কনসিস্টেন্সি বজায় রাখতে হবে।
  
  
• ‌পারসোনালিটি: আইকন ডিজাইনটি আপনার প্রোডাক্ট-পারসোনালি ফুটিয়ে তুলছে কিনা এটি লক্ষ্য রাখতে হবে।
  
  
• ‌ ইজি-টু-গো: আইকন ডিজাইনারদের ডিজাইনটি ইমপ্লিমেন্ট করার আগে খেয়াল রাখতে হবে আইকনটি ডেভেলপার, ডিজাইনাররা সহজে ব্যবহার করতে পারছে কিনা ও ইউজাররা সহজে বুঝতে পারছে কিনা?
  
  

আইকন সিস্টেমের বেসিক রুলস

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

সাইজ

আইকন সেট ডিজাইনের সময় অবশ্যই সাইজের কনসিস্টেন্সি থাকতে হবে। যেহেতু ডিজাইনাররা সাধারণত 8-point grid ব্যবহার করে থাকেন তাই আপনার আইকন সেটটি 24x24px or 32x32px হতে হবে যাতে এটি ৮ দ্বারা বিভাজ্য হয়।

তবে যদি আপনি ওয়েবসাইটের জন্য তুলনামূলক বড় ও রিফাইন্ড আইকন চান তাহলে সেটটি বড় থেকে ছোট অনুক্রমে ডিজাইন করুন। এর ফলে আপনি আইকন থেকে ডিটেইল সরাতে চাইলে তা তুলনামূলক সহজ হবে।

স্ট্রোকস এন্ড ফিলস

এর পরের ধাপটিতে আপনাকে সিদ্ধান্ত নিতে হবে আপনি স্ট্রোকড নাকি ফিলড আইকন চান। যদি আপনার চয়েজ স্ট্রোকড আইকন হয়, তাহলে আইকনটির সবকিছু সেম ওয়েট আউটলাইন দ্বারা স্ট্রোক দিতে হবে।

ফিলড ডিজাইনের ক্ষেত্রে সলিড শেপের সাথে নেগেটিভ স্পেস ব্যবহার করে আইকনের কমপ্লেক্স পার্টগুলো ডিডাইন করা হয়। সাধারণত ফিলড ভার্সনটি স্ক্যান করতে সুবিধাজনক হওয়ায় এটি প্রোডাক্টের জন্য ভালো।

কিন্তু যদি উভয় ফিলড ও স্ট্রোকড ফিল আইকন ব্যবহার করতে হয় তাহলে উভয়ের মধ্যে সামঞ্জস্যতা নিশ্চিত করতে হবে।

কালার

যদিও আইকন বিভিন্ন রঙে ব্যবহার করা হয়ে থাকে এবং মার্কেটিং এপ্রোচে কালারফুল আইকন ব্যবহার করে যেতে পারে কিন্তু আইকন সেটটি সিংগেল কালারে ডিজাইন করা তুলনামূলক সুবিধাজনক।

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

গ্রিড

আইকন ডিজাইনে পিক্সেল গ্রিড এই ফ্যান্টাস্টিক টুলটি ব্যবহার করে ডিজাইনারা ফ্লেক্সিবলভাবে আইকন স্পেসিং করতে পারেন। আপনাকে শুধু আইকনগুলোকে "on-pixel" রাখতে হবে এবং জীবন সহজ!

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

এবার আসুন ডিজাইন করি!

আপনি আপনার প্রেফারেবল সাইজ, স্টাইল ও কালার হয়তো পেয়েই গেছেন। এবার আঁকার পালা। কিন্তু একটু থামুন! এর আগে আইকনগুলোর একটি লিস্ট তৈরি করুন! সবচেয়ে সিম্পল ডিজাইন দ্বারা শুরু করন তাতে পরবর্তীতে আপনার সিদ্ধান্ত নিতে সুবিধা হবে।

আইকন ডিজাইনের উদ্দেশ্য জানুন

ভাবুন আপনি কি এবং কেন ডিজাইন করতে চান? উদাহরণস্বরূপ, আপনি যদি একটি চ্যাট আইকন ডিজাইন করতে চান ভাবুন কোন আইকনটি চ্যাটকে রিপ্রেজেন্ট করে: একটি এনভেলপ? বাবল? নাকি একটি কলম? রিসোর্স -রিসার্চ করুন, বিভিন্ন এলিমেন্ট ট্রাই করে একটি স্কেচ ডেভেলপ করুন।

কোন টুলটি ব্যবহার করা উচিৎ?

আইকন ডিজাইনের জন্য দারুণ কিছু টুল রয়েছে। আসুন সে সম্পর্কে জেনে নেওয়া যাক।

• এডোবি-ইলাস্ট্রেটর: এডোবি-ইলাস্ট্রেটর আইকন ডিজাইন, লোগো ডিজাইন ও অন্যান্য প্রিন্ট মিডিয়ার জন্য একটি ভেক্টর বেসড জনপ্রিয় টুল। এটি ম্যাক-ওএস এবং উইন্ডোজ উভয়েই এভেইলেবল। প্লাটফর্ম কস্ট–২০.৯৯ ডলার পার মান্থ। বিগিনারদের জন্য অনেক অপশন এভেইলেবল রয়েছে।
  
  
• ফিগমা: UI এলিমেন্ট তৈরি, আইকন ডিজাইনের জন্য আরেকটি জনপ্রিয় টুলের নাম ফিগমা। ফিগমা প্রথম তিনটি প্রজেক্টের জন্য ফ্রি প্ল্যান অফার করে থাকে। এটি একটি ক্লাউড বেসড সলিউশন এবং ম্যাক-ওএস এবং উইন্ডোজ উভয়েই এভেইলেবল। কোলেবোরেটিভ টাস্ক এর জন্য এটি ভালো প্ল্যাটফর্ম হতে পারে। প্ল্যাটফর্মটি খুব দ্রুত শেয়ারেবল লিংক ক্রিয়েট করে।
  
  
• স্কেচ: স্কেচ একটি ভেক্টর বেসড ইজি-টু-গো টুল। এটি কোলেবোরেটিভ প্রজেক্টের জন্য খুব সাপোর্টিভ এবং ডিজাইনআরকে একটি বিশাল প্লাগ-ইন লাইব্রেরি সাপোর্ট দেয়। যদিও এটি কেবল ম্যাক-ওএস এ এভেইলেবল। এটি ৩০ দিনের ফ্রি ট্রায়াল অফার করে এবং মান্থলি ৯ ডলার ও ইয়ারলি ৯৯ ডলার চার্জ করে থাকে।
  

আইকন ডিজাইনের প্রাথমিক ধাপ

যদি আপনি বিগিনার হইয়ে থাকেন তাহলে একটি নির্দিষ্ট সাইজের আইকন তৈরির জন্য প্রথমে ফ্রেমে গ্রিড এড করুন। এতে আপনি আইকন ডিজাইনটি সঠিক মাপের হচ্ছে কিনা এ বিষয়ে ধারণা পাবেন।

জ্যামিতিক আকার

আয়তক্ষেত্র এবং উপবৃত্ত আকারের টুলগুলো আপনার বন্ধু হয়ে আপনাকে সাহায্য করবে। তাই জ্যামিতিক কিছু ডিজাইন করার সময় তখন এগুলো দিয়ে শুরু করুন। আয়তক্ষেত্র টুল আপনাকে কোণার ব্যাসার্ধের মতো জিনিসগুলিকে আরও সহজে সামঞ্জস্যপূর্ন করতে সাহায্য করবে। উপবৃত্তটি সহজেই বৃত্তকে দ্বিখণ্ডিত করতে পারে এবং নিখুঁত বক্ররেখা তৈরি করবে। তাছাড়া আকারের সমন্বয় তৈরি করতে বুলিয়ান অপারেশন (ইলাস্ট্রেটরের পাথফাইন্ডারের অনুরূপ) ব্যবহার করা যেতে পারে।

বেজিয়ার কার্ভ

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

একটি দারুণ আইকন কিভাবে ডিজাইন করতে হবে?

একটি আইকনকে তখনি আমরা পারফেক্ট মানবো যখন এটি ব্র্যান্ডকে ফুটিয়ে তুলবে এবং ইউজার নেভিগেশন সহজ ও দ্রুত করবে। আইকন নির্বাচন করার সময় এবশ্যই যেসব বিষয় মনে রাখতে হবে:

• ক্ল্যারিটি: আইকনটি স্পষ্টভাবে কমিউনিকেট করতে পারছে কিনা এ বিষয়টি লক্ষ্য রাখতে হবে। ক্রিয়েটিভিটির চাইতে আইকনটি কনসেপ্ট-ফোকাসড হলো কিনা সে বিষয়টি লক্ষ্য রাখতে হবে।
• সিমপ্লিসিটি: আইকনটটি কোর-বেসড সিম্পল হলে ইউজারের মনযোগ আকর্ষণ করবে এবং দেখতে ভালো লাবে।
• ব্র্যান্ড রিপ্রেজেন্টেশন: আইকনটিকে যথা সম্ভব ব্র্যান্ডকে রিপ্রেজেন্ট করতে হবে। আইকনটি এমন হতে হবে যাতে নজর কাড়ার পাশাপাশি ব্র্যান্ডকে রিপ্রেজেন্ট করে।
  

মেটাফোর ডিজাইনে দক্ষতা আনুন

পারফেক্ট ডিজাইন তৈরি করার জন্য ক্রিয়েটিভ মেটাফোর তৈরি করতে জানতে হবে। মেটাফোর মানে একটি জিনিসের মাধ্যমে ক্রিয়েটিভভাবে অন্য আরেকটি জিনিস তুলে ধরা। যেমন, পেন্সিল আইকন দ্বারা ইডিট বুঝানো হয়। অনেক সময় প্রিমিয়াম বা পেইড অপশন বোঝানোর জন্য কিং বা ভি আই পি আইকন ইউজ করা হয়। এজন্য আইকনের মিনিং অনুযায়ী মেটাফোর চিন্তা করতে হবে, খুঁজতে হবে। তবে মেটাফোরটি ক্রিয়েটিভ হবার পাশাপাশি যেনো ক্লিয়ার এবং হেল্পফুল হয়।

আইকনগুলোকে অর্গানাইজ করুন

আইকন সেটটিকে ডিজাইন করার পর এদেরকে অর্গানাইজ করতে হবে। সেক্ষেত্রে এদেরকে আলাদা আলাদা ফ্রেমে রেখে অর্গানাইজ করা যায়। আইকনগুলোকে কমপোনেন্ট হিসেবে রূপ দিন। এদেরকে সহজ ও মানানসই নাম দিন যেনো সহজে বুঝতে পারা যায়। ধরুন, একটি বাতির আইকনকে “লাইটবাল্ব” নাম দেওয়া যেতে পারে। যেহেতু, কমপোনেন্টগুলোকে ডিজাইন সিস্টেমে সার্চ দেওয়া যায় তাই কমপোনেন্ট ডিসক্রিপশন বক্সটিকে ট্যাগ ও কি-ওয়ার্ড রিসার্চের কাজে ব্যবহার করুন।

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

শেষ কথা

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

কি? আইকন সম্পর্কে ধারণা ক্লিয়ায়? Now Just Practice! তো?

এখনই শুরু করে দিন আপনার UI/UX ডিজাইন জার্নিটা। ভালো ডিজাইন ফাউন্ডেশন, ডিজাইন সেন্স, কোনো একটি স্পেসিফিক নিশ- এ দক্ষ হবার এখনই তো সময়।

হ্যাপি ডিজাইনিং…