অ-ডিজাইনারদের জন্য আধুনিক ওয়েবসাইট ডিজাইন: সেকশন, স্পেসিং ও ফন্ট

• এক বাক্যে কি এটা
• এটা কার জন্য
• পরবর্তী কী করা (একটি প্রধান একশন)

যদি কেউ আপনার হোমপেজে এসে "বুঝতে" বাধ্য হয়, তাহলে ডিজাইন আধুনিক নয়—এটা বিভ্রান্তিকর।

অ-ডিজাইনারদের জন্য যা সবচেয়ে গুরুত্বপূর্ণ

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

• একটি ছোট সেট সেকশন টাইপ ব্যবহার (হিরো, ফিচার, টেস্টিমোনিয়াল, FAQ)
• হেডিং, বডি টেক্সট এবং বোতামের জন্য ধারাবাহিক স্টাইল
• প্রত্যাশিত স্পেসিং যাতে সবকিছু উদ্দেশ্যপ্রণোদিত লাগে

এই পদ্ধতি প্রতিটি পেজ আলাদা করে ডিজাইন করার চেয়ে ভালো—যা প্রায়ই মেলেনা এমন ফন্ট, অনিয়মিত প্যাডিং, এবং এলোমেলো লেআউট দেয়।

সাধারণ আধুনিক প্যাটার্নগুলো যা আপনি চেনেন

আধুনিক সাইটগুলো সাধারণত কিছু ব্যবহার্য প্যাটার্ন শেয়ার করে:

• একটি পরিষ্কার হিরো—হেডলাইন, সংক্ষিপ্ত ব্যাখ্যা, এবং একটি প্রধান বোতাম
• স্ক্যানযোগ্য সেকশন—বিবরণমূলক সাবহেডিংস (ধূর্ত লেবেল নয়)
• শক্তিশালী টাইপোগ্রাফি (পাঠযোগ্য সাইজ, আরামদায়ক লাইন স্পেসিং)
• সহজ, ধারাবাহিক কম্পোনেন্টস যেমন কার্ড ও ফর্ম

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

লক্ষ্য থেকে শুরু করুন এবং একটি সরল কনটেন্ট আউটলাইন বানান

লেআউট, রং, বা ফন্ট নিয়ে ভাবার আগে নির্ধারণ করুন পেইজটি কী উদ্দেশ্যে। বেশিরভাগ "অগোছালো" পেইজ ডিজাইনের কারণে নয়—তারা একসাথে পাঁচটি কাজ করতে চাচ্ছে।

প্রতিটি পেইজে একটি প্রধান লক্ষ্য নির্বাচন করুন

একটি একক প্রধান একশন নির্বাচন করুন যা আপনি চান ভিজিটরটি নিক:

• একটি পণ্য কিনুন
• কল বুক করুন
• আপডেট সাবস্ক্রাইব করুন
• আপনার সঙ্গে যোগাযোগ করুন

আপনি সেকেন্ডারি একশন রাখতে পারেন ("আরও জানুন" ইত্যাদি), কিন্তু সেগুলো প্রধানের সঙ্গে প্রতিযোগিতা করা উচিত হবে না। একটি দ্রুত পরীক্ষা: যদি কেউ শুধু হেডলাইন ও প্রধান বোতামটি পড়ে, তাহলে কি তারা বুঝবে কি করতে হবে? যদি না—সরল করুন।

ফন্ট ধরার আগে আউটলাইন লিখুন (হ্যাঁ, আগে)

একটি নতুন ডকুমেন্ট খুলে প্লেইন টেক্সটে পেইজ স্ট্রাকচার লিখুন। সহজ রাখুন। উদ্দেশ্য স্পষ্টতা, আপত্তিকরতা নয়।

অনেক ছোট ব্যবসার পেইজের জন্য একটি মৌলিক আউটলাইন:

1. এক- বাক্যে মূল্যবক্তব্য (আপনি কী দেন + কার জন্য)
2. প্রমাণ (লোগো, সংখ্যা, সংক্ষিপ্ত প্রশংসাপত্র)
3. সুবিধা (কাস্টমারের জন্য কী উন্নতি হয়)
4. কিভাবে কাজ করে (৩–৫ ধাপ)
5. বিস্তারিত / FAQ (আপত্তি উত্তর দিন)
6. প্রধান কল-টু-অ্যাকশন (এটি স্পষ্ট করে পুনরাবৃত্তি করুন)

পণ্য পেইজ হলে “কিভাবে কাজ করে” এর বদলে “কি অন্তর্ভুক্ত” রাখুন। সার্ভিস পেইজ হলে “আপনি কি পাবেন” এবং “সামান্য টাইমলাইন” যোগ করুন।

গুরুত্ব অনুসারে তথ্য সাজান

অধিকাংশ মানুষ টপ-টু-বটম এবং (ইংরেজিতে) লেফট-টু-রাইট স্ক্যান করে। সবচেয়ে মূল্যবান তথ্য আগে রাখুন: এটা কী, কার জন্য, কেন তা গুরুত্বপূর্ণ। গভীর বিবরণ পরে রাখুন।

সরল নিয়ম: প্রতি সেকশনে একটি মূল বার্তা। যদি একটি সেকশনে দুইটি ভিন্ন পয়েন্ট থাকে, আলাদা করুন। এটা পেইজটি পড়া সহজ করে—এবং পরে ডিজাইন করাও সহজ হয়।

একটি ব্যবহারিক শর্টকাট: পুনরাবৃত্তিযোগ্য টেমপ্লেট থেকে বানান

আপনি ডিজাইনার না হলে (বা সময় কম থাকলে) ধারাবাহিক সেকশন ও কম্পোনেন্ট দিয়ে শুরু করা সহায়ক।

Koder.ai-এর মতো টুল এখানে সাহায্য করতে পারে: আপনি চ্যাটে আপনার পেজ বর্ণনা করবেন ("হিরো + সুবিধা + টেস্টিমোনিয়াল + FAQ + CTA"), একটি কাজ করা React-ভিত্তিক লেআউট জেনারেট হবে, তারপর আপনি স্পেসিং, টাইপোগ্রাফি এবং কপিতে ইটারেট করতে পারবেন—কনসিস্টেন্সি হারানোর কোনো ঝুঁকি ছাড়াই। প্রয়োজন হলে পরে সোর্স কোড এক্সপোর্ট করে ঐতিহ্যগত ওয়ার্কফ্লোয় চালিয়ে যেতে পারবেন।

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

ভিজ্যুয়াল হায়ারার্কি: গুরুত্বপূর্ণ অংশগুলো সহজে চোখে পড়ুক

ভিজ্যুয়াল হায়ারার্কি হল যেভাবে পেইজটি এক নজরে "পড়া" হয়—মানুষ প্রথম, দ্বিতীয়, তৃতীয় কি লক্ষ্য করে। সবকিছু সমান মনে হলে ভিজিটররা বুঝতে কষ্ট পায় কী করা উচিত (আর অনেকেই চলে যায়)।

মানুষ প্রথমে কী দেখে (এবং কিভাবে নির্দেশনা দেবেন)

অধিকাংশ মানুষ কমিট করার আগে স্ক্যান করে। তারা খুঁজে দেখে:

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

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

হেডিং, সাবহেডিং এবং সংক্ষিপ্ত অনুচ্ছেদ স্ক্যানিং-এর জন্য ব্যবহার করুন

ভালো পাঠযোগ্য একটি পেইজ সাধারণত স্ক্যানিং-ফ্রেন্ডলি।

একটি শক্তিশালী হেডলাইন ব্যবহার করুন প্রতিটি সেকশনের শীর্ষে, তারপর সমর্থনকারী পয়েন্টগুলো সাবহেডিং ও ছোট অনুচ্ছেদে ভেঙে দিন। অনুচ্ছেদগুলো সম্ভব হলে 2–4 লাইনে রাখুন এবং এক ব্লকে একাধিক ধারণা ভরাট করবেন না।

আপনার কাছে যদি একটি গুরুত্বপূর্ণ বাক্য থাকে—যেমন একটি প্রমিস, গ্যারান্টি বা পার্থক্যকারী—তাহলে সেটিকে শ্বাসপ্রশ্বাসের জায়গা দিন। এক লাইন অতিরিক্ত স্পেসিং দিয়ে অনেক সময় একটি বোল্ড লাইনের চেয়ে বেশি নজর তোলে।

সিদ্ধান্তের কাছে প্রমাণ রাখুন

আশ্বাস মাঝেই রাখুন, নিচে লুকান না।

উদাহরণ:

• মূল্য তালিকার কাছে টেস্টিমোনিয়াল বা রিভিউ ("এটা কি মূল্যবান?")
• সাইনআপ/বুকিং ফর্মের ঠিক নিচে FAQ (অবসট্যাকল হ্যান্ডেল করতে)
• চেকআউটের কাছে সিকিউরিটি বা রিফান্ড নোট (ঝুঁকি কমানো)

এটি হায়ারার্কির কাজ: আপনি প্রশ্নগুলো সেই মুহূর্তে উত্তর দিচ্ছেন।

সাধারণ হায়ারার্কি ভুলগুলো যা এড়িয়ে চলবেন

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

দীর্ঘ টেক্সট ব্লক। ভালো লেখাও দেয়াল হয়ে গেলে অদৃশ্য হয়ে যায়। সাবহেড, স্পেসিং ও ছোট অনুচ্ছেদে ভাঙুন।

একাধিক “প্রাইমারি” একশন। যদি প্রতিটি বোতাম উজ্জ্বল হয়, তাতে আর কোনটি প্রধান বোতাম বোঝা যাবে না। প্রতিটি সেকশনে একটি প্রধান একশন রাখুন এবং বাকি গুলো নীরব রাখুন।

ওয়েবসাইট সেকশন ১০১: যে বিল্ডিং ব্লকগুলো সবসময় কাজ করে

অনেক আধুনিক পেইজ ছোট সেটের পুনরাবৃত্তিযোগ্য সেকশন থেকেই তৈরি। নতুন কিছুর আবিষ্কার করার দরকার নেই—সাথে এমন কিছু বেছে নিন যা ভিজিটরকে বুঝতে, বিশ্বাস করতে, এবং একটিভ হতে সাহায্য করে।

কোর সেকশন টাইপগুলো (এবং উদ্দেশ্য)

হিরো: প্রথম স্ক্রীন। কী করেন, কার জন্য, এবং প্রধান সুবিধা বলুন। একটি স্পষ্ট প্রধান বোতাম যোগ করুন।

ফিচার/বেনিফিট: আপনি কী প্রদান করেন (ফিচার) এবং কেন তা গুরুত্বপূর্ণ (বেনিফিট)। প্রতিটি আইটেম সংক্ষিপ্ত ও স্কিমেবল রাখুন।

সোশ্যাল প্রুফ: রিভিউ, টেস্টিমোনিয়াল, ক্লায়েন্ট লোগো, কেস স্টাডি হাইলাইট, বা সংখ্যা (যেমন “2,000 দলের দ্বারা বিশ্বাসযোগ্য”)—এগুলি বিশ্বাসযোগ্যতা বাড়ায়।

FAQ: মানুষ যে প্রশ্নগুলো ভাবছে সেগুলোর উত্তর দিন: মূল্য, টাইমলাইন, সাপোর্ট, রিফান্ড, কম্প্যাটিবিলিটি, ডেলিভারি এলাকা ইত্যাদি।

ফুটার: "বাকি সবকিছু" অঞ্চল: যোগাযোগ, ঠিকানা, গুরুত্বপূর্ণ লিংক, লিগ্যাল, সোশ্যাল প্রোফাইল—এটি একটি ট্রাস্ট সিগন্যালও।

একটি নির্ভরযোগ্য পেজ ফ্লো (ছোট ব্যবসা + পণ্য পেইজ)

হিরো → দ্রুত সুবিধা → সোশ্যাল প্রুফ → বিস্তারিত (কিভাবে কাজ করে / কী অন্তর্ভুক্ত) → FAQ → চূড়ান্ত কল-টু-অ্যাকশন → ফুটার

সার্ভিসের জন্য “কিভাবে কাজ করে” এর বদলে “প্রক্রিয়া” (Step 1, Step 2, Step 3) ব্যবহার করুন। পণ্যের জন্য “বক্সে কি আছে” বা “স্পেস” যোগ করুন প্রুফের পরে।

সত্যিই কি একটি সেকশন দরকার?

শুধু তখনই সেকশন যোগ করুন যদি এটি স্পষ্টতা বাড়ায় (কোনো জরুরি জিনিস বোঝায়) অথবা সন্দেহ কমায় (কোনো ভয়ের উত্তর দেয়)। না হলে এটি প্রায়ই নয়েজ।

দ্রুত পরীক্ষা: যদি আপনি সেকশনটি সরিয়ে দেন, কি কেউ আরো বিভ্রান্ত হবে—নাকি কম প্ররোচিত হবে? যদি না হয়, কেটে দিন।

প্রতিটি সেকশনকে ফোকাসড রাখুন

প্রতিটি সেকশনে লক্ষ্য করুন একটি প্রতিশ্রুতি, এক প্রমাণ, এক পদক্ষেপ।

উদাহরণ: “দ্রুত সেটআপ” সেকশন একটি দাবি করে (“এক দিনে লঞ্চ করুন”), তা সমর্থন করে (সংক্ষিপ্ত ব্যাখ্যা বা মিনি টেস্টিমোনিয়াল), এবং একটি পরবর্তী ধাপ দেয় (“সেটআপ গাইড দেখুন” বা “ফ্রি শুরু করুন”)। এতে পেইজ শান্ত ও পরিপাটি লাগবে।

লেআউট বেসিক্স: গ্রিড, কলাম এবং অ্যালাইমেন্ট ছাড়া জার্গন

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

কলাম আসলে কী (এবং কেন সাহায্য করে)

কলাম কেবল উল্লম্ব লেন যেখানে কন্টেন্ট বসে। অনেক ওয়েবসাইট ১২ কলাম গ্রিড ব্যবহার করে কারণ এটি সহজে ভাগ হয় (1/2, 1/3, 2/3 ইত্যাদি)। আপনাকে গাণিতিক কষ্ঠ করতে হবে না—কেবল ধারাবাহিকতা নির্বাচন করুন এবং ব্যবহার করুন।

অ্যালাইমেন্ট হলো সবচেয়ে বড় "ফ্রি আপগ্রেড"—আপনার হেডিং, টেক্সট ব্লক, বোতাম এবং ইমেজ একই স্টার্টিং এজ শেয়ার করলে পেজ তাত্ক্ষণিকভাবে পরিপাটি মনে হয়।

একটি সরল লেআউট যা আপনি কপি করতে পারেন

অধিকাংশ অ-ডিজাইনারের জন্য এই দুই প্যাটার্ন প্রায় সবকিছুর জন্য পর্যাপ্ত:

• এক কলাম: টেক্সট-ভারী পেইজের জন্য (অ্যাবাউট, FAQ, ব্লগ, ডকুমেন্টেশন)
• দুই কলাম: মার্কেটিং ব্লক (ফিচার + ইমেজ, প্রাইসিং হাইলাইট) — দুইটিতেই সীমাবদ্ধ থাকুন

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

সর্বোচ্চ টেক্সট প্রস্থ সেট করুন (আপনার পাঠক কৃতজ্ঞ হবে)

খুব চওড়া অনুচ্ছেদ ক্লান্তিকর—আপনার চোখ অনেকদূর ভ্রমণ করে। মূল টেক্সট এর প্রস্থ সীমাবদ্ধ রাখুন—প্রায় 60–80 অক্ষর প্রতি লাইন ভাল লক্ষ্যমাত্রা।

প্রায়ই এটি মানে ডেস্কটপে বডি টেক্সট কন্টেইনার 600–750px এর মতো রাখুন, যখন ফুল-উইডথ ব্যাকগ্রাউন্ড বা বড় অনুভূতি দিতে চাইলে ভিন্ন ব্যবহার করা যাবে।

সাধারণ লেআউট ত্রুটি এড়িয়ে চলুন

কিছু সমস্যা পেজকে অদ্ভুত করে তোলে এমনকি রং ও ফন্ট ঠিক থাকলেও:

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

কিছু লেআউট নিয়ম বেছে নিন এবং পুনরাবৃত্তি করুন। পুনরাবৃত্তি সাইটকে "ডিজাইন করা" মনে করায়, না যে এটি জড়ো করা।

স্পেসিং এবং হোয়াইটস্পেস: দ্রুত পেশাদার দেখানোর উপায়

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

প্যাডিং বনাম মার্জিন (ভিতরে বনাম বাইরে)

একটি উপাদানকে ছবি হিসেবে ভাবুন:

• প্যাডিং হলো ফ্রেমের ভিতরে জায়গা—কন্টেন্ট ও বর্ডারের মধ্যে। উদাহরণ: বোতামের টেক্সট যদি কিনিপেঁচে থাকে, প্যাডিং বাড়ান
• মার্জিন হলো ফ্রেমের বাইরে জায়গা—উপাদানগুলোর মাঝের দূরত্ব। উদাহরণ: হেডলাইন ও নিচের অনুচ্ছেদের গ্যাপ

মেমোরি শর্টকাট: প্যাডিং = ভিতরের আরাম, মার্জিন = বাইরের দূরত্ব।

একটি সহজ স্পেসিং স্কেল ব্যবহার করুন (এবং সেটি মেনে চলুন)

ধারাবাহিকতা "পারফেক্ট" সংখ্যার চেয়ে বেশি গুরুত্বপূর্ণ। একটি স্কেল নিন এবং সর্বত্র ব্যবহার করুন, যেমন:

4 / 8 / 16 / 32 / 64 (পিক্সেল)

4–8 ছোট গ্যাপ, 16 স্বাভাবিক অনুচ্ছেদ স্পেস, 32 ব্লকের মধ্যে, 64 বড় সেকশন বিভাজন।

স্পেসিং সবচেয়ে বেশি প্রভাব ফেলে যেখানে

স্থান যোগ করুন:

• সেকশনগুলোর মধ্যে (প্রতিটি অংশ যেন আলাদা অধ্যায় লাগে)
• বোতাম ও ইনপুটের চারপাশে (ট্যাপ করা সহজ হবে)
• হেডিং ও বডি টেক্সটের মধ্যে (হেডলাইন যে কনটেন্টের সঙ্গে সম্পর্কিত তা বোঝায়)

একটি সাধারণ ভুল হলো একটি কম্পোনেন্টের ভিতরে অতিরিক্ত জায়গা দেওয়া, এবং উপাদানগুলোর মধ্যে পর্যাপ্ত জায়গা না রাখা—সবকিছু অপ্রতিষ্ঠিত মনে হয়।

দ্রুত রিভিউ: কম স্পেসিং বনাম বেশি স্পেসিং শনাক্ত করা

৩০ সেকেন্ড স্ক্যান করুন:

• যদি এটি ভরাট ও স্ক্যান করতে কষ্ট হয়, আপনি আন্ডার-স্পেসিং করছেন (আপনার স্কেলে পরবর্তী ধাপে গ্যাপ বাড়ান)
• যদি এটি বিচ্ছিন্ন লাগে—যেন টুকরোগুলো ভাসছে, আপনি ওভার-স্পেসিং করছেন (সম্পর্কিত আইটেমগুলোর মধ্যে গ্যাপ কমান)

সন্দেহ হলে আপনার স্কেলের এক ধাপ করে সমন্বয় করুন—শুরুর জন্য এটাই যথেষ্ট সাইটকে পালিশড দেখাতে।

টাইপোগ্রাফি এসেনশিয়াল: সাইজ, লাইন হাইট, এবং পাঠযোগ্যতা

ভালো টাইপোগ্রাফি বেশিরভাগই আরামের ব্যাপার। মানুষ যদি সহজে আপনার কন্টেন্ট পড়তে পারে, সাইট মুহূর্তেই আরো পরিপাটি দেখায়—কোনো জটিল কৌশল ছাড়া।

1) প্রথমে বডি ফন্ট পছন্দ করুন (পাঠযোগ্যতা বিজয়ী)

অনুচ্ছেদে ব্যবহৃত ফন্ট দিয়ে শুরু করুন। দর্শক সময় বেশি সেখানে কাটায়, তাই ছোট সাইজেও পরিষ্কার দেখাতে হবে।

বডি টেক্সট সাইজ সাধারণত 16–18px লক্ষ্যমাত্রা। যদি ফন্টটি সেই সাইজে আঁটসাট বা পাতলা লাগে, অন্য ফন্ট বেছে নিন। অনেক ক্লিন সান-সেরিফ ভালো কাজ করে—কিন্তু মোবাইলে পড়ার সুবিধা সবচেয়ে গুরুত্বপূর্ণ।

2) একটি সরল টাইপ স্কেল ব্যবহার করুন

আপনাকে দশ ধরনের হেডিং দরকার নেই। একটি ছোট, পুনরাবৃত্তিং সিস্টেম ঠিক করুন:

• H1: পেজ টাইটেল (সাধারণত প্রতিটি পেজে একবার)
• H2: প্রধান সেকশনগুলো
• H3: সাব-সেকশন
• বডি: অনুচ্ছেদ
• স্মল টেক্সট: ক্যাপশন, হেল্পার টেক্সট (সামান্য ব্যবহার)

প্রায়োগিক শুরু: H1 36–48px, H2 28–32px, H3 20–24px, বডি 16–18px, স্মল 12–14px। অনুভব করে অ্যাডজাস্ট করুন, কিন্তু ধাপগুলো ধারাবাহিক রাখুন।

3) লাইন হাইট ও লাইনের দৈর্ঘ্য

অনুচ্ছেদ সহজে পড়ার জন্য দুইটি দ্রুত নিয়ম:

• লাইন হাইট: বডি টেক্সটের জন্য প্রায় 1.5–1.7 সেট করুন
• লাইন দৈর্ঘ্য: প্রতিটি লাইনে 50–75 অক্ষর লক্ষ্য করুন

যদি টেক্সট পুরো স্ক্রীন জুড়ে দীর্ঘ হয়ে যায়, ক্লান্তিকর হয়—সংকীর্ণ কন্টেন্ট উইডথ ব্যবহার করুন।

4) সাধারণ ভুলগুলো থেকে সতর্ক থাকুন

মনোযোগ রাখুন:

• খুব ছোট টেক্সট (বিশেষত মোবাইলেও)
• কম কন্ট্রাস্ট (হালকা ধূসর টেক্সট ও সাদা ব্যাকগ্রাউন্ড সাধারণত সমস্যা)
• অনেক স্টাইল (একাধিক ফন্ট, অনেক ওজন, এলোমেলো ইটালিক)

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

ফন্ট নির্বাচন ও পেয়ারিং (অতিরিক্ত চিন্তা না করে)

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

সবচেয়ে সহজ পেয়ারিং নিয়ম

সহজ ডিফল্ট চাইলে: হেডিংয়ের জন্য একটি ফন্ট, বডির জন্য একটি ফন্ট।

• হেডিং ফন্ট: একটু ব্যক্তিত্ব যোগ করা যায়
• বডি ফন্ট: দীর্ঘ অনুচ্ছেদের জন্য পাঠযোগ্যতা গুরুত্বপূর্ণ

যদি আপনি মোটেই পেয়ারিং নিয়ে ভাবতে না চান, একটাই ভালো ফন্ট সারাবিশ্বে ব্যবহার করুন এবং কনট্রাস্ট তৈরি করুন মাপ, স্পেসিং, ও ওজন দিয়ে।

বেশিরভাগ সাইটের জন্য নিরাপদ পছন্দ

অ-ডিজাইনারদের জন্য আধুনিক সান-সেরিফ প্রায় সবসময় ঠিক থাকে। স্ক্রিনে পরিষ্কার, বিভিন্ন ডিভাইসে নমনীয়, এবং বেশিরভাগ ইন্ডাস্ট্রির জন্য কাজ করে (সার্ভিস, SaaS, পোর্টফোলিও, লোকাল বিজনেস)।

নির্ভরযোগ্য পদ্ধতি:

• সান-সেরিফ হেডিং + সান-সেরিফ বডি (একই ফ্যামিলি বা দুটো মিলছে এমন)
• দুই "লাউড" ডিসপ্লে ফন্ট একসাথে মেশাবেন না

দ্রুতভাবে ফন্ট পরীক্ষা করার উপায় (কমিট করার আগে)

একটি শব্দ দিয়ে বিচার করবেন না; আপনার সাইটের আসল কন্টেন্ট দিয়ে পরীক্ষা করুন:

1. একটি বাস্তব অনুচ্ছেদ (3–5 বাক্য)। ক্লান্তি আছে কি দেখুন: পড়া বন্ধ করতে ইচ্ছা করছে?
2. নম্বর ও সিম্বল: 0123456789, $99.00, 10–12, 5%.
3. পাংচুয়েশন: “উদ্ধৃতিটি”, অ্যাপস্ট্রফি, কমা, বন্ধনী ইত্যাদি
4. কমন UI টেক্সট: বোতামগুলো: “Get started,” “Contact,” “Learn more.”

যদি হেডিং-এ ভালো কিন্তু অনুচ্ছেদে সমস্যা করে, হেডিংয়ে রাখুন আর বডির জন্য অন্য ফন্ট নিন।

কনসিস্টেন্ট রাখার জন্য ওজন ও স্টাইল সীমাবদ্ধ করুন

পেশাদার লুক সাধারণত নিয়ন্ত্রণের ফলে আসে, ভ্যারাইটির ফলে নয়। সাদাসিধে সীমা:

• বডি: Regular (400)
• হেডিং: Semibold/Bold (600–700)
• ঐচ্ছিক: Italic শুধুমাত্র যখন তা অর্থ যোগ করে

অনেক ওজন থাকলে সাইট অনির্দিষ্ট মনে হয়—প্রতিটি সেকশনে অবিকল আলাদা গুরুত্ব তৈরি হয়।

একটি নিয়ম মনে রাখুন: ছোট সেট ফন্ট সিদ্ধান্ত নিন এবং সারাবিশ্বে পুনরাবৃত্তি করুন।

রঙ ও কন্ট্রাস্ট যা আপনার কন্টেন্টকে সহায়তা করে

রঙ সবচেয়ে বেশি কাজে লাগে যখন এটি মানুষের পেইজে এগোতে সাহায্য করে। যদি সবকিছু রঙিন হয়, কিছুই চোখে পড়ে না—ভিজিটররা দ্বিধাগ্রস্ত হয়।

দৃষ্টি আকর্ষণ করার জন্য রঙ ব্যবহার করুন (সবকিছু সাজানোর জন্য নয়)

রঙকে হাইলাইটারের মতো ব্যবহার করুন: আপনি কেবল গুরুত্বপূর্ণ জিনিসগুলোতে ব্যবহার করবেন।

• অধিকাংশ ব্যাকগ্রাউন্ড ও টেক্সটের জন্য নিরপেক্ষ টোন ব্যবহার করুন (সাদা, অফ-হোয়াইট, হালকা ধূসর, চারকোল)
• একটি শক্তিশালী রঙ নির্বাচন করুন মূল একশনগুলোকে কল করার জন্য
• স্পেসিং ও টাইপোগ্রাফি ‘বিউটি’ কাজ করবে; রঙ হবে ‘দিশা’

একটি সহজ পরীক্ষা: যদি আপনি রঙটা সরিয়ে ফেলেন এবং পেইজ বিভ্রান্তিকর হয়, তাহলে লেআউটের হায়ারার্কি পরিষ্কার করা দরকার। যদি সরিয়ে ফেলেও ঠিক থাকে, তাহলে রঙের ব্যবহার ঠিক আছে।

একটি প্রধান অ্যাকশন রঙ বেছে নিন এবং ধারাবাহিক থাকুন

আপনার প্রধান কল-টু-অ্যাকশনের জন্য একটি রঙ বেছে নিন—উদাহরণ: “Get a quote,” “Book a call,” বা “Start free।” তারপর সারাবিশ্বে প্রয়োগ করুন:

• প্রধান বোতামগুলো সবসময় ঐ রঙ ব্যবহার করবে
• লিংকগুলো একটি ধারাবাহিক লিংক রঙ ব্যবহার করবে
• সেকেন্ডারি বোতামগুলো সেকেন্ডারি দেখাবে (আউটলাইন বা মিউটেড)

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

কন্ট্রাস্ট বেসিকস: পাঠযোগ্যতা প্রথম

ভালো কন্ট্রাস্ট “বান্দ করাটা” চাই না—এটি পাঠযোগ্য হতে হবে।

• বডি টেক্সট হালকা ব্যাকগ্রাউন্ডে যথেষ্ট গাঢ় হওয়া উচিত
• বোতামকে ব্যাকগ্রাউন্ড-র সঙ্গে এবং বোতামের টেক্সটের সঙ্গে দুটি জায়গায় কন্ট্রাস্ট থাকতে হবে
• মাত্র রঙের ওপর নির্ভর করে অর্থ বোঝাবেন না (যেমন রেড দিয়ে কেবল রিকোয়ার্ড বোঝানো উচিত নয়)—টেক্সট বা আইকনও ব্যবহার করুন

নিশ্চিত না হলে দ্রুত পরীক্ষা করুন: ফোনে বা কবছিদ আউটডোরে দেখুন—দুর্বল কন্ট্রাস্ট তাৎক্ষণিকই লক্ষণীয়।

এড়িয়ে চলার ভুলগুলো

একাধিক অ্যাকসেন্ট রং: যদি তিনটি “প্রাইমারি” রঙ থাকে, আপনার কাছে কোনটিই নেই। অ্যাকসেন্ট সীমিত রাখুন এবং প্রতিটি রঙকে একটি কাজ দিন (প্রাইমারি, সাকসেস, ওয়ার্নিং)।

নিম্ন-কন্ট্রাস্ট গ্রে টেক্সট: হালকা ধূসর বডি টেক্সট “মডার্ন” দেখাতে পারে, কিন্তু প্রায়ই অবপাঠ্য হয়। মেটাডেটার জন্য ব্যবহার করুন, অনুচ্ছেদের জন্য নয়।

রঙ সংযত ও কন্ট্রাস্ট শক্ত হলে কন্টেন্ট পরিষ্কার লাগে—এবং ডিজাইন তাত্ক্ষণিকভাবে পেশাদার দেখায়।

কম্পোনেন্টসের মাধ্যমে ধারাবাহিকতা: বোতাম, কার্ড, ফর্ম

আপনি যদি একটিই “ডিজাইনার” কাজ করতে চান তবে আপনার ইন্টারফেসকে ইচ্ছাকৃতভাবে পুনরাবৃত্তি করান। কিছু পুনরায়ব্যবহারযোগ্য কম্পোনেন্ট—বোতাম, কার্ড, ফর্ম ফিল্ড, ব্যাজ—সাইটকে শান্ত ও উদ্দেশ্যপ্রণোদিত দেখায় এমনকি কনটেন্ট বদলালেও।

একটি ছোট কম্পোনেন্ট সেট বানান

শুরুতে 4–6 বেসিক যা সবখানে ব্যবহার করবেন:

• বোতাম: প্রধান ও সেকেন্ডারি
• কার্ড: প্রিভিউ, ফিচার, প্রাইসিং, ব্লগ পোস্টের জন্য
• ফর্ম: টেক্সট ইনপুট, ড্রপডাউন, চেকবক্স, এরর মেসেজ, হেল্পার টেক্সট
• ব্যাজ: “New”, “Popular”, “In stock” জাতীয় লেবেল

লক্ষ্য বৈচিত্র্য নয়—প্রেডিক্টিবিলিটি।

সহজ ধারাবাহিকতা নিয়মগুলো যা দ্রুত সাহায্য করে

কিছু ডিফল্ট ঠিক করুন এবং মেনে চলুন:

• কোণাকার রেডিয়াস: একটি মান (উদাহরণ: 8px) এবং বোতাম, ইনপুট, কার্ডে ব্যবহার করুন
• শেডো স্টাইল: না শেডো অথবা এক মৃদু শেডো সারাবিশ্বে ব্যবহার করুন
• স্পেসিং স্কেল: একই গ্যাপগুলো ব্যবহার করুন (যেমন 8/16/24/32)
• স্টেটস: হোভার, অ্যাকটিভ, ডিসেবল্ড—সব কম্পোনেন্টে সম্পর্কিত দেখানো

যদি এই ডিটেইলগুলো মিলবে, সাইট অলংকরণ ছাড়া সমন্বিত দেখাবে।

আইকন: কার্যকর, কিন্তু সবসময় পরিষ্কার করে না

আইকন ব্যবহার করুন যখন তা স্ক্যানিং দ্রুত করে (সার্চ, মেনু, ডাউনলোড) বা অর্থ জোরদার করে (ওয়ার্নিং, সাকসেস)। লেবেল ব্যতীত আইকন ব্যবহার করা এড়িয়ে চলুন—“Contact” বা “Solutions” শব্দটা সাধারণত টেক্সটেই পরিষ্কার। যদি আইকন ব্যবহার করেন, শব্দ পাশে রাখুন।

দ্রুত কম্পোনেন্ট অডিট (১০ মিনিট)

আপনার মূল পেইজগুলো খুলে মেলানো চেক করুন:

1. সব প্রধান বোতাম কি একই রকম দেখায় (রঙ, সাইজ, রেডিয়াস)?
2. ফর্ম ফিল্ডগুলো একই হাইট ও প্যাডিং কি ব্যবহার করে?
3. কার্ডগুলো একই বর্ডার/শেডো ও স্পেসিং ব্যবহার করে?
4. "প্রায় একই" বিভিন্ন ধূসর শেড আছে কি?

এই ছোট অসামঞ্জস্যগুলো ঠিক করলেই নতুন ডিজাইন উপাদান যোগ করার চেয়ে বড় প্রভাব পড়ে।

রেসপন্সিভ ডিজাইন: মোবাইলে কাজ করুক পূনরায় ডিজাইন ছাড়া

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

মোবাইল-ফার্স্ট চিন্তা করুন (যদিও আপনি ডেস্কটপে ডিজাইন করেন)

ডেস্কটপ ফ্যান্সির আগেই নির্ধারণ করুন মোবাইলে স্ক্রল না করেই কি দেখা উচিত:

• আপনার মূল বার্তা (আপনি কী অফার করেন)
• একটি প্রধান একশন (Book a call, Get a quote, Buy now)
• স্পষ্ট ন্যাভিগেশন উপায় (মেনু বোতাম, কী লিংক)

এই তিনটি সহজে না পাওয়া গেলে মোবাইল অভিজ্ঞতা ভাঙা মনে হবে।

ছোট স্ক্রিনের জন্য স্পেসিং ও টাইপ অ্যাডজাস্ট করুন

মোবাইলে দীর্ঘ লাইন ও কুঁচকে থাকা সেকশন সাধারণ সমস্যা।

সামান্য বড় বডি টেক্সট ব্যবহার করুন (সাধারণত 16–18px) এবং পাশের সাইড-বাই-সাই লেআউটগুলো স্ট্যাক করুন। ডেস্কটপে দুই/তিন কলাম মোবাইলে সাধারণত এক কলামে নেমে আসে।

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

থাম্বের জন্য একশনগুলো সহজ করুন

টাচের জন্য লক্ষ্যবস্তুর আকার মাউসের চেয়ে বড় হওয়া উচিত।

• বোতাম ও লিংক ট্যাপ করা সহজ হওয়া উচিত (প্রায় 44×44px গাইডলাইন)
• ফর্ম ফিল্ডগুলো সম্ভব হলে ফুল-উইডথ রাখুন, স্পষ্ট লেবেল সহ
• ট্যাপ লক্ষ্যবস্তুর মাঝে জায়গা রাখুন যাতে ভুল ট্যাপ না হয়

সহজ রেসপন্সিভ চেকস (কোনো বিশেষ টুল ছাড়াই)

• ব্রাউজার উইন্ডো ধীরেস্থিতভাবে ছোট করুন: কিছু ওভারল্যাপ করছে, লাফ দেয়, বা খুব ছোট হচ্ছে কি?
• নিজের ফোনে সাইট খুলুন: প্রধান একশন কি এক মিনিটের মধ্যে করা যায়?
• মেনু, বোতাম, ফর্মগুলো চেক করুন: কোনো অপর্যাপ্ত ট্যাপ বা কঠিন-পড়া টেক্সট?
• ফোন ঘোরান (পোর্ট্রেট/ল্যান্ডস্কেপ): লেআউট এখনও কি বোধগম্য?

ছোট সমন্বয়গুলো প্রায়ই কনভার্শন বাড়ায় পূর্ণ ভিজ্যুয়াল রিডিজাইনের চেয়ে বেশি।

অ্যাক্সেসিবিলিটি-বন্ধুভাবাপন্ন ডিজাইন এবং চূড়ান্ত DIY চেকলিস্ট

অ্যাক্সেসিবিলিটি শুধুই "নিজের পক্ষে ভালো" নয়—এটি আপনার সাইটকে সকলের জন্য পরিষ্কার, শান্ত, এবং সহজ করে তোলে—বিশেষত ছোট স্ক্রিনে, উজ্জ্বল আলোতে, অথবা যখন কেউ ক্লান্ত এবং স্ক্যান করছে।

পাঠযোগ্য টেক্সট + পরিষ্কার স্ট্রাকচার

বেসিকগুলো দিয়ে শুরু করুন: বডি টেক্সট আরামদায়ক সাইজ, যথেষ্ট লাইন হাইট, শক্তিশালী কন্ট্রাস্ট। মানুষ যদি চোখ কুঁচকায় পড়তে হয়, তারা চলে যাবে।

স্ট্রাকচারও সমান গুরুত্বপূর্ণ। হেডিংগুলি সঠিক অনুক্রমে ব্যবহার করুন যাতে মানুষ ও স্ক্রিন রিডার দুটোই পেইজ বুঝতে পারে:

• একটি H1 পেজ টপিকের জন্য
• তারপর H2 সেকশনগুলো
• তারপর প্রয়োজনে H3 সাবসেকশন

শুধু বোল্ড করে বা বড় করে ফেক হেডিং করবেন না—রিয়েল হেডিং লেভেল নেভিগেশন ও স্ক্যানিং-এ সাহায্য করে।

অল্ট টেক্সট ও লেবেল: কার্যগুলো স্পষ্ট করুন

যদি কোনো ইমেজ কিছু বোঝায় (পণ্য ছবি, ডায়াগ্রাম, আইকন যার মানে আছে), alt টেক্সট দিন যা উদ্দেশ্য বর্ণনা করে, সব বিবরণ নয়। যদি ইমেজ সজ্জারূপে থাকে, খালি alt দিন যেন তা শব্দ নয়।

বোতাম ও লিংকগুলোর এমন লেবেল দিন যা বলে কি হবে। “Click here” বা অনলেবেল আইকন এড়িয়ে চলুন।

ভালো:

• “Download the pricing PDF”
• “Book a consultation”

খারাপ:

• “Submit” (কি সাবমিট করা হচ্ছে?)
• “Learn more” (কিসের সম্পর্কে?)

চূড়ান্ত DIY চেকলিস্ট (১০ মিনিট)

প্রকাশ করার আগে দ্রুত এই পাসটি করুন:

• লক্ষ্য + ফ্লো: প্রতিটি পেইজে একটি স্পষ্ট লক্ষ্য ও সরল ফ্লো আছে (ইন্ট্রো → প্রুফ → বিস্তারিত → CTA)
• হেডিং: H1 একবার, তারপর H2/H3 কেটে; হেডিংগুলো স্পষ্টভাবে সেকশন বর্ণনা করে
• স্পেসিং: ধারাবাহিক প্যাডিং ও মার্জিন; অনুচ্ছেদ ক্লান্তিকর না; সম্পর্কিত আইটেম গ্রুপ করা
• ফন্ট: বডি টেক্সট পাঠযোগ্য; খুব ছোট টেক্সট নেই; লাইন হাইট আরামদায়ক
• কন্ট্রাস্ট: টেক্সট/বোতাম ব্যাকগ্রাউন্ড থেকে পৃথক; লিংকগুলো ক্লিকযোগ্য মনে হয়
• ফর্ম: প্রতিটি ইনপুটের দৃশ্যমান লেবেল আছে; এরর মেসেজ সমাধান কী জানায়
• ইমেজ: অর্থবহ ইমেজগুলোর সহায়ক alt টেক্সট আছে
• মোবাইল রিভিউ: ফোনে পরীক্ষা করুন—ট্যাপ লক্ষ্য সহজ, কিছুও ওভারফ্লো করে না, মূল তথ্য আগে আসে

যদি আপনি আউটলাইন এবং চেকলিস্ট ঠিক মতো ঠিক করেন, তাহলে আপনি Koder.ai-তে চ্যাট প্রম্পট থেকে পেজটি প্রোটোটাইপ করে দ্রুত বর্ধিত করতে পারেন, ইটারেট করুন, এবং কোড এক্সপোর্ট করে শিপ করুন—কোনো ধারাবাহিকতা বিসর্জন না দিয়ে।