🧩 UI/UX Design Spacing Guidelines — কেন আর কিভাবে
ডিজাইনে টাইপোগ্রাফি, রঙ বা কম্পোনেন্ট যতটা গুরুত্বপূর্ণ, ঠিক ততটাই গুরুত্বপূর্ণ Spacing। সঠিক স্পেসিং না থাকলে ডিজাইন কখনোই পরিষ্কার…
🧩 UI/UX Design Spacing Guidelines — কেন আর কিভাবে
ডিজাইনে টাইপোগ্রাফি, রঙ বা কম্পোনেন্ট যতটা গুরুত্বপূর্ণ, ঠিক ততটাই গুরুত্বপূর্ণ Spacing। সঠিক স্পেসিং না থাকলে ডিজাইন কখনোই পরিষ্কার, ব্যালান্সড আর ব্যবহারবান্ধব হয় না। এই গাইডলাইনে আমরা UI/UX ডিজাইনে স্পেসিং-এর কিছু বেসিক নিয়ম ও বেস্ট প্র্যাকটিস নিয়ে আলোচনা করব।
🔹 কেন স্পেসিং গুরুত্বপূর্ণ?
- ভিজ্যুয়াল হায়ারার্কি তৈরি করে — কোন কনটেন্ট বেশি গুরুত্বপূর্ণ সেটা স্পষ্ট বোঝা যায়।
- পাঠযোগ্যতা বাড়ায় — টেক্সট আর কম্পোনেন্টে পর্যাপ্ত গ্যাপ থাকলে পড়া সহজ হয়।
- ক্লিন লুক আনে — এলোমেলো না লাগিয়ে ডিজাইনকে প্রফেশনাল করে তোলে।
- ইউজার ফোকাস ধরে রাখে — হোয়াইট স্পেস ইউজারের চোখকে বিশ্রাম দেয়।
🔹 স্পেসিং সিস্টেম
ডিজাইনে কনসিসটেন্সি আনার জন্য একটা বেস স্পেসিং সিস্টেম ব্যবহার করা জরুরি। সবচেয়ে প্রচলিত হল 4pt Grid System।
👉 অর্থাৎ:
- 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px … এভাবে মাল্টিপল অফ 4 ব্যবহার করা।
এতে সব কম্পোনেন্ট একসাথে ব্যালান্সড দেখাবে।
🔹 কোথায় কোথায় স্পেসিং খেয়াল রাখতে হবে
1. Layout Level
- Section গুলোর মাঝে 32px–64px গ্যাপ রাখা ভালো।
- Grid ব্যবহার করলে 8px বা 12px gutter রাখা স্ট্যান্ডার্ড।
2. Component Level
- কার্ড, বাটন, ইনপুট ফিল্ডে consistent padding ব্যবহার করা।
- উদাহরণ: বাটনে 12px vertical + 16px horizontal padding।
3. Typography Level
- Heading ও Paragraph এর মাঝে অন্তত 16px gap।
- Paragraph to Paragraph এ 8px–12px।
- Line height সাধারণত 1.5x রাখা ভালো।
4. Icon & Text Alignment
- আইকন সবসময় টেক্সট baseline-এর সাথে ভিজ্যুয়ালি এলাইন থাকতে হবে।
- আইকনের চারপাশে কমপক্ষে 8px স্পেস রাখা ভালো।
🔹 বেস্ট প্র্যাকটিস
✅ কমপক্ষে 3টি ফিক্সড স্পেসিং ভ্যালু নির্ধারণ করো (যেমন Small: 8px, Medium: 16px, Large: 24px)। ✅ রেসপনসিভ ডিজাইনে স্পেসিং ডিভাইস ভেদে adjust করা দরকার। ✅ Auto Layout (Figma) বা Constraints ব্যবহার করে স্পেসিং consistent রাখো। ✅ খুব বেশি বা খুব কম গ্যাপ যেন না হয় — Balance ই key।
🔹 উপসংহার
UI/UX ডিজাইনে Spacing = Oxygen। এটা ছাড়া ডিজাইন সবসময় চাপা আর এলোমেলো দেখাবে। তাই প্রতিটি কম্পোনেন্টের চারপাশে হোয়াইট স্পেসকে ডিজাইনের অংশ হিসেবে বিবেচনা করো। মনে রাখো, Good design is not just what you add, it’s also what you space out.
메타데이터
- post_id
- bddb09a488d0
- slug
- ui-ux-design-spacing-guidelines-কেন-আর-কিভাবে-bddb09a488d0
- url
- https://medium.com/@henakter/ui-ux-design-spacing-guidelines-%E0%A6%95%E0%A7%87%E0%A6%A8-%E0%A6%86%E0%A6%B0-%E0%A6%95%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%AC%E0%A7%87-bddb09a488d0
- canonical_url
- https://medium.com/@henakter/ui-ux-design-spacing-guidelines-%E0%A6%95%E0%A7%87%E0%A6%A8-%E0%A6%86%E0%A6%B0-%E0%A6%95%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%AC%E0%A7%87-bddb09a488d0
- author_url
- https://medium.com/@henakter
- status
- ok
- fetched_at
- 2026-07-11 04:44:24
