আস সালামু আলাইকুম
ইউআই ডিজাইন তো অনেক করেছেন কিন্তু আপনার ডিজাইনের এলিমেন্ট গুলোর অনুপাত ঠিক আছে তো? অনেকে আবার বলবেন ভাই, ডিজাইনে আবার অনুপাত কি? জ্বি, পূর্বের আর্টিকেলে এগুলো বলা হয়েছে। Proportion বা অনুপাত হচ্ছে ডিজাইনের একটি অতি গুরুত্বপূর্ণ Principles। যার সঠিক ব্যবহার না করতে পারলে আপনার ডিজাইনটি ভালো ফিডব্যাক পাবে তো না ই। বরং সরাসরি রিজেক্ট ও হবে পারে ইউজার থেকে। আজকে আমরা এটাই জানবো যে, ডিজাইনের মধ্যে অনুপাত কি এবং এর এপ্লাইটা ঠিক কিভাবে করতে হয়

কেউ চাইলে পূর্বের আর্টিকেল গুলো পড়তে পারেন

UI ও UX Design এর মধ্যে পার্থক্য কি এবং এগুলো কিভাবে কাজ করে? পর্ব :: ০১ :: https://cutt.ly/3xhwasP
Good UX বনাম Bad UX । ইউজার বিহ্যাভিওয়্যারের মাইরপ্যাচে UX কুপোকাত । পর্ব-০২:: https://cutt.ly/YxhwgOR
ডিজাইনে কালারের ব্যাবহার পর্ব-০১ : https://cutt.ly/Sl4SsQ1
ডিজাইনে কালারের ব্যাবহার পর্ব-০২ : https://cutt.ly/Bl4SEcd
ডিজাইনে কালারের ব্যাবহার পর্ব-০৩ : https://cutt.ly/zl4SIuk
ডিজাইনে কালারের ব্যাবহার পর্ব-০৪ : https://cutt.ly/rl4SL3n
ডিজাইনে কালারের ব্যাবহার পর্ব-০৫ : https://cutt.ly/Pl4S1ST
ডিজাইনে কালারের ব্যাবহার পর্ব-০৬ : https://cutt.ly/fl4S7Cm
ডিজাইনে কালারের ব্যাবহার পর্ব-০৭ : https://cutt.ly/pxhwwGK

Proportion এর খাঁটি বাংলা অনুবাদ হচ্ছে “অনুপাত”। কেউ আবার এখন এটা বইলেন না যে, ভাই অনুপাত তো খাঁটি বাংলা না। এটা বিদেশী শব্দ ;p
প্রথমে একটা কাহিনী না বললেই নয়, বাইতুল মুকাররম একদিন গিয়েছে টুপি কেনার জন্য। কয়েক দোকার ঘুরার পরে একটি দোকানে নিজের পছন্দমত কয়েকটা টুপি পেলাম। যে টুপিটা ডিসপ্লে করা ছিল ওটা আমার মাথায় ছোট হয়। তাই দোকানদারকে বললাম, ভাই বড় সাইজ দেন তো। দোকানদার আমার চেহারার দিকে কতক্ষণ তাকিয়ে থেকে বলল, ”দাড়ান ! ভিতর থিকা বের কইরা দিতাছি”। আমি বললাম আচ্ছা ঠিকাছে দেন।
সে নিচের থেকে সেম টুপির কয়েকটা প্যাকেট খুঁজে খুঁজে একটা পাকেট বের করে আনলো। টুপির সাইজ দেখলো আর আমার দিকে কয়েকবার তাকিয়ে একটা বের করে দিল। বলল নেন, এইটা মাথায় লাগবো।
আমি মাথায় দিয়ে দেখি সেটাও আমার মাথায় ছোট হয় (বলে রাখা ভালো, পাকিস্তানি টুপি। এটার সাথে সাইজ দেয়া নাই) কইলাম ভাই, এইটাও তো ছোট হয় দোকানদার তরিঘড়ি করে আমার চেহারার দিকে তাকিয়ে তাকিয়ে আরো দুইটা বের করে দিল। আর বললো নেন, এই দুইটার একটা লাগবোই।

আমি মাথায় দিয়ে দেখি এগুলোও ছোট হয়। পরে মিলিয়ে দেখলাম সব গুলোই একই সমান সাইজের। বললাম ভাই, এত খোঁজাখুজির পরে বের করে দিলেন, সব ই তো সেম সাইজের। দোকানদার চট করে তার দাঁত গুলো বের করে একটা হাসি দিয়ে বললো, ভাই আপনারে দেইখা তো ছোট ছোট মনে হয়, তাই মনে হয় হাতে এই গুলাই উইঠা আসছে

আমি হাসুম না কান্দুম বুঝতাছি না। কইলাম, ভাই চেহারা দেইখা কি আর মাথার সাইজ আন্দাজ করা যায় ?

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

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

নিজের ইমেজগুলো একটু লক্ষ্য করুন:
উপরের ৪ কালারের শেপগুলো লক্ষ্য করুন এবং তার মধ্যের টেক্সট এর সাইজগুলো লক্ষ্য করুন। এখানে একটার সাথে আরেকটির অনুপাত ঠিক নেই। এছাড়াও পুরো ডিজাইনটিতে যথাযথ হোয়াইট স্পেসের ব্যাবহার হয়নি। এছাড়াও আরো অনেক সমস্যা রয়েছে অনুপাত ভিত্তিক। যার জন্য ডিজাইনি বোরিং বোরিং লাগছে।

আচ্ছা ড্রিবলের কথা যেহেতু বললাম। তাই নিচের ডিজাইনের মার্ক করা অংশটার টেক্সট এর সাইজের সাথে বাটনের সাইজটা মিলাবেন এবং আশেপাশের ফাকা জায়গাগুলো লক্ষ্য করে দেখুন তো আপনার কাছে পারফেক্ট মনে হয় কিনা? এছাড়া নিজের নেভিগেশনের সাইজগুলো ভিন্ন ভিন্ন। অথচ একই নেভিগেশন হয়ে আসা টেক্সটগুলো সাইজের অনুপাত সমান সমান হওয়া দরকার ছিল।(যদিও সম্পূর্ণ ডেভেলপমেন্ট এবং ব্যাখ্যা ব্যাতিত নেভিগেশন এর অনুপাত টা বলা যাচ্ছে না। কারণ হুভারে সাইজ ভিন্ন হতে পারে) এখানে আরো কয়েকটা প্রবলেম রয়েছে। যাইহোক সেগুলো আমার আলোচ্য বিষয় নয়। এই ডিজাইনটা ড্রিবলে ৩২৮১৪৭ বার ভিউ হয়েছে এবং ১৭২৮ টা লাইক ৭৪০ জন সেভ করেছে এবং ৪৭ টা কমেন্ট পড়েছে।
অনুপাতের ভুলগুলো হরহামেশাই হয়ে থাকে। যা অনেকেই খেয়াল করেনা। ডিজাইনের প্রেমে পড়ে যায় সকলেই। কিন্তু বাস্তবিকভাবে একটা প্রোডাক্ট ডিজাইনে ভিজুয়াল কমন ভুলগুলো শুধরে নেয়া একটা ডিজাইনারের দায়িত্ব। নয়তো এই ধরনের ডিজাইনগুলো ইউজেবিলিটি টেস্টিং এ টিকবে না। আর টেক্সট এর সাইজের উপরে ইউজেবিলিটির অনেক বড় একটা স্টান্ডার্ড রয়েছে। যেটা ফুলফিল না হলে ডিজাইন একটা পর্যায়ে গিয়ে আর ইউজার ধরে রাখতে পারবে না।

আপনার বাসায় যখন মেহমান অসবে তখন তো আপনি অবশ্যই আপনার বাসার খাবারের অনুপাত ঠিক রাখার জন্য আবার নতুন করে বাজার করে নিয়ে আসবেন। তাই না? নয়তো আপনার খাবার সঠিকভাবে নাও হতে পারে। কিন্তু ডিজাইনের অনুপাত আপনি স্কেল দিয়ে মাপ দিয়ে পরিমাপ করতে পারবেন না। বা িইউজারের উপর ভিত্তি করে কতটুকু সাইজ নিবেন বা রেশিও কিভাবে সিলেক্ট করবেন তা নির্ধারণ করতে পারবেন না।

এটা সম্পূর্ণই আপনার ডিজাইনের দক্ষতা এবং থিওরিটিক্যালের সাথে প্রাকটিক্যালের কতটুকু সম্পর্ক রয়েছে, সেই অভিজ্ঞতার উপরে নির্ভর করে। আর এই কারণেই Proportion কে আমি বলি এটা একটা প্যারাময় অধ্যায়। যা কেবল থিওরির সাথে ডিজাইন অভিজ্ঞতা দিয়েই আপনি সমাধান করতে পারবেন

আজ এই পর্যন্তই। ইনশা আল্লাহ পর্যায়ক্রমে এগুলো নিয়ে পর্ব লিখবো। ভালো লাগলে অবশ্যই উৎসাহ মূলক কমেন্ট এবং লাইক আশা করছি। আর অবশ্যই পোস্টটি শেয়ার দিবেন। আর আমার সকল পোস্টগুলো পড়তে হ্যাশট্যাগে ক্লিক করলেই পেয়ে যাবেন। তবে হ্যাশ ট্যাগে সব পোস্ট পাবেন না। যেগুলো এই বছর থেকে করছি সেগুলোই পাবেন।
#learnwithtahmid
আরে কেউ কপি করতে চাইলে অবশ্যই আমার নাম এবং হ্যাশট্যাগ সহকারে কপি করবেন। আর চাইলে আমার নিয়মিত আপডেট পেতে আমার ব্যক্তিগতগ্রুপে এ্যাড হতে পারেন:
https://fb.com/groups/learnwithtahmid
-তাহমিদ হাসান