User আপনার design পড়ে না, scan করে। Visual hierarchy হলো সেই scanning এর পথ আপনি নিজে তৈরি করে দেওয়া।
একটা সত্যি কথা দিয়ে শুরু করি। F-pattern এবং Z-pattern eye-tracking research বলে মানুষ screen এ কীভাবে চোখ বোলায়। কিন্তু এই pattern গুলো তৈরি হয় hierarchy এর অভাবে। Hierarchy strong হলে চোখ সেই path follow করে যেটা designer তৈরি করেছেন, random pattern নয়।
এটাই visual hierarchy এর আসল ক্ষমতা।
Hierarchy তৈরির ৬টি tool
Designer এর কাছে ৬টি lever আছে যা দিয়ে hierarchy তৈরি হয়। এগুলো একসাথে বা আলাদাভাবে ব্যবহার করা যায়।
১. Size
বড় মানে গুরুত্বপূর্ণ, এটা মানুষের instinct। Page এর সবচেয়ে important message সবচেয়ে বড় হবে। কিন্তু সবকিছু বড় করলে কিছুই বড় থাকে না। Contrast ছাড়া hierarchy হয় না।
Rule of thumb: আপনার heading এবং body text এর মধ্যে minimum ২x size difference রাখুন। ১৬px body text হলে heading ৩২px এর কম নয়।
২. Color এবং Contrast
High contrast element আগে চোখে পড়ে। একটা white background এ bright accent color এর button সবার আগে চোখ টানে, সেটাই উদ্দেশ্য।
Secondary information এ muted color ব্যবহার করুন। Date, metadata, caption এগুলো visually quiet থাকলে primary content এর hierarchy stronger হয়।
৩. Weight (Bold)
একই size এ bold এবং regular text পাশাপাশি থাকলে bold আগে পড়া হয়। এই technique টা body text এর মধ্যে key information highlight করতে কাজে লাগে।
৪. Spacing
White space একটা separator হিসেবে কাজ করে। Grouped elements একে অপরের সাথে related মনে হয়, এবং বেশি space থাকলে সেটা visually important মনে হয়। Hero section এ বেশি padding থাকে কারণ সেটাই সবচেয়ে important।
Gestalt Law of Proximity: কাছাকাছি থাকা elements related মনে হয়। Label এবং তার input এর মধ্যে gap কম রাখুন। দুটো ভিন্ন section এর মধ্যে gap বেশি রাখুন।
৫. Position
Top-left সবার আগে দেখা যায় (left-to-right reading culture এ)। Important element উপরে এবং বামে রাখুন। Navigation সবসময় উপরে কারণ user expect করে সেখানে থাকবে।
৬. Texture এবং Visual Weight
Filled button, outlined button এর চেয়ে বেশি visual weight বহন করে। Card background থাকলে সেটা ফাঁকা space থেকে বেশি attention নেয়। এই visual weight দিয়ে আপনি hierarchy তৈরি করতে পারেন।
একটা Real Example: Landing Page
ধরুন একটা landing page design করছেন। Hierarchy এভাবে ভাবুন:
- Level 1 (সবার আগে চোখ যাবে): Hero headline, বড় size, high contrast, center position
- Level 2 (পরে দেখবে): Subheadline বা CTA button, medium size, accent color
- Level 3 (সাপোর্টিং): Body copy, regular weight, muted color
- Level 4 (কম গুরুত্বপূর্ণ): Fine print, legal text, smallest size, lightest color
এই ৪ level এর মধ্যে clear visual jump থাকলে user এক নজরেই page এর structure বুঝতে পারেন।
সবচেয়ে কমন hierarchy mistake
সব কিছুকে important বানানোর চেষ্টা। যখন সব heading একই size, সব text একই color, সব button একই style, তখন hierarchy নেই। User জানে না কোথায় তাকাবেন।
Design এ decision নেওয়া মানে কিছু জিনিসকে গুরুত্বপূর্ণ বানানো এবং বাকিগুলোকে ইচ্ছাকৃতভাবে কম গুরুত্বপূর্ণ করা। এই ruthless prioritization টাই ভালো designer এর কাজ।