প্রায়োগিক ২০২৫ ওয়েবসাইট ডিজাইন মৌলিক শিখুন—কীভাবে সেকশন সাজাবেন, স্পেসিং ব্যবহার করবেন এবং পাঠযোগ্য ফন্ট বাছাবেন—ডিজাইন প্রশিক্ষণের প্রয়োজন নেই।

“আধুনিক” মানে ফ্যাশনেবল অ্যানিমেশন বা একেবারেই অনন্য দেখানো নয়। ২০২৫-এ আধুনিক ওয়েবসাইট ডিজাইন মূলত স্বচ্ছতা, গতি, পাঠযোগ্যতা, এবং ধারাবাহিকতা—যাতে ভিজিটররা দ্রুত বুঝতে পারে আপনি কী দেন এবং পরবর্তী কী করা উচিত।
একটি আধুনিক সাইট গুরুত্বপূর্ণ জিনিসগুলো স্পষ্ট করে তোলে:
যদি কেউ আপনার হোমপেজে এসে "বুঝতে" বাধ্য হয়, তাহলে ডিজাইন আধুনিক নয়—এটা বিভ্রান্তিকর।
আপনার পেশাদার দেখানোর জন্য শিল্পী মানসিকতা প্রয়োজন নেই। আপনাকে যা দরকার সেটা হলো একটি সরল পদ্ধতি যা আপনি পুনরাবৃত্তি করতে পারবেন:
এই পদ্ধতি প্রতিটি পেজ আলাদা করে ডিজাইন করার চেয়ে ভালো—যা প্রায়ই মেলেনা এমন ফন্ট, অনিয়মিত প্যাডিং, এবং এলোমেলো লেআউট দেয়।
আধুনিক সাইটগুলো সাধারণত কিছু ব্যবহার্য প্যাটার্ন শেয়ার করে:
সারসংক্ষেপ: আপনি ডিজাইনার না-ও হলে পরিপাটি দেখাতে পারেন। আধুনিক ডিজাইন সাজসজ্জার চেয়ে ভালো সিদ্ধান্ত নেওয়া এবং তা পুনরাবৃত্তি করা।
লেআউট, রং, বা ফন্ট নিয়ে ভাবার আগে নির্ধারণ করুন পেইজটি কী উদ্দেশ্যে। বেশিরভাগ "অগোছালো" পেইজ ডিজাইনের কারণে নয়—তারা একসাথে পাঁচটি কাজ করতে চাচ্ছে।
একটি একক প্রধান একশন নির্বাচন করুন যা আপনি চান ভিজিটরটি নিক:
আপনি সেকেন্ডারি একশন রাখতে পারেন ("আরও জানুন" ইত্যাদি), কিন্তু সেগুলো প্রধানের সঙ্গে প্রতিযোগিতা করা উচিত হবে না। একটি দ্রুত পরীক্ষা: যদি কেউ শুধু হেডলাইন ও প্রধান বোতামটি পড়ে, তাহলে কি তারা বুঝবে কি করতে হবে? যদি না—সরল করুন।
একটি নতুন ডকুমেন্ট খুলে প্লেইন টেক্সটে পেইজ স্ট্রাকচার লিখুন। সহজ রাখুন। উদ্দেশ্য স্পষ্টতা, আপত্তিকরতা নয়।
অনেক ছোট ব্যবসার পেইজের জন্য একটি মৌলিক আউটলাইন:
পণ্য পেইজ হলে “কিভাবে কাজ করে” এর বদলে “কি অন্তর্ভুক্ত” রাখুন। সার্ভিস পেইজ হলে “আপনি কি পাবেন” এবং “সামান্য টাইমলাইন” যোগ করুন।
অধিকাংশ মানুষ টপ-টু-বটম এবং (ইংরেজিতে) লেফট-টু-রাইট স্ক্যান করে। সবচেয়ে মূল্যবান তথ্য আগে রাখুন: এটা কী, কার জন্য, কেন তা গুরুত্বপূর্ণ। গভীর বিবরণ পরে রাখুন।
সরল নিয়ম: প্রতি সেকশনে একটি মূল বার্তা। যদি একটি সেকশনে দুইটি ভিন্ন পয়েন্ট থাকে, আলাদা করুন। এটা পেইজটি পড়া সহজ করে—এবং পরে ডিজাইন করাও সহজ হয়।
আপনি ডিজাইনার না হলে (বা সময় কম থাকলে) ধারাবাহিক সেকশন ও কম্পোনেন্ট দিয়ে শুরু করা সহায়ক।
Koder.ai-এর মতো টুল এখানে সাহায্য করতে পারে: আপনি চ্যাটে আপনার পেজ বর্ণনা করবেন ("হিরো + সুবিধা + টেস্টিমোনিয়াল + FAQ + CTA"), একটি কাজ করা React-ভিত্তিক লেআউট জেনারেট হবে, তারপর আপনি স্পেসিং, টাইপোগ্রাফি এবং কপিতে ইটারেট করতে পারবেন—কনসিস্টেন্সি হারানোর কোনো ঝুঁকি ছাড়াই। প্রয়োজন হলে পরে সোর্স কোড এক্সপোর্ট করে ঐতিহ্যগত ওয়ার্কফ্লোয় চালিয়ে যেতে পারবেন।
লক্ষ্য ও আউটলাইন স্পষ্ট হলে ডিজাইন পছন্দগুলো স্পষ্ট হয়: প্রতিটি সেকশন তার জায়গা কমায়, এবং আপনার প্রধান বোতাম হারায় না।
ভিজ্যুয়াল হায়ারার্কি হল যেভাবে পেইজটি এক নজরে "পড়া" হয়—মানুষ প্রথম, দ্বিতীয়, তৃতীয় কি লক্ষ্য করে। সবকিছু সমান মনে হলে ভিজিটররা বুঝতে কষ্ট পায় কী করা উচিত (আর অনেকেই চলে যায়)।
অধিকাংশ মানুষ কমিট করার আগে স্ক্যান করে। তারা খুঁজে দেখে:
আপনি কিছু সরল লিভার দিয়ে এটি নিয়ন্ত্রণ করতে পারেন: সাইজ (বড় হলে গুরুত্ব বেশি), পজিশন (ইংরেজিতে শীর্ষ ও বামে আকারে প্রথম নজর পড়ে), কন্ট্রাস্ট (কলার বা গাঢ় টেক্সট) এবং স্পেসিং (কোনো কিছুর চারপাশে বেশি জায়গা দিলে সেটি প্রাইমারি মনে হয়)।
ভালো পাঠযোগ্য একটি পেইজ সাধারণত স্ক্যানিং-ফ্রেন্ডলি।
একটি শক্তিশালী হেডলাইন ব্যবহার করুন প্রতিটি সেকশনের শীর্ষে, তারপর সমর্থনকারী পয়েন্টগুলো সাবহেডিং ও ছোট অনুচ্ছেদে ভেঙে দিন। অনুচ্ছেদগুলো সম্ভব হলে 2–4 লাইনে রাখুন এবং এক ব্লকে একাধিক ধারণা ভরাট করবেন না।
আপনার কাছে যদি একটি গুরুত্বপূর্ণ বাক্য থাকে—যেমন একটি প্রমিস, গ্যারান্টি বা পার্থক্যকারী—তাহলে সেটিকে শ্বাসপ্রশ্বাসের জায়গা দিন। এক লাইন অতিরিক্ত স্পেসিং দিয়ে অনেক সময় একটি বোল্ড লাইনের চেয়ে বেশি নজর তোলে।
আশ্বাস মাঝেই রাখুন, নিচে লুকান না।
উদাহরণ:
এটি হায়ারার্কির কাজ: আপনি প্রশ্নগুলো সেই মুহূর্তে উত্তর দিচ্ছেন।
সবকিছুকে একই ওজন দেওয়া। যদি হেডিংগুলো সমান সাইজ, বোতামগুলো একইভাবে দেখায়, এবং প্রতিটি সেকশন একই ঘনত্বের হয়, তখন কিছুই আলাদা মনে হয় না।
দীর্ঘ টেক্সট ব্লক। ভালো লেখাও দেয়াল হয়ে গেলে অদৃশ্য হয়ে যায়। সাবহেড, স্পেসিং ও ছোট অনুচ্ছেদে ভাঙুন।
একাধিক “প্রাইমারি” একশন। যদি প্রতিটি বোতাম উজ্জ্বল হয়, তাতে আর কোনটি প্রধান বোতাম বোঝা যাবে না। প্রতিটি সেকশনে একটি প্রধান একশন রাখুন এবং বাকি গুলো নীরব রাখুন।
অনেক আধুনিক পেইজ ছোট সেটের পুনরাবৃত্তিযোগ্য সেকশন থেকেই তৈরি। নতুন কিছুর আবিষ্কার করার দরকার নেই—সাথে এমন কিছু বেছে নিন যা ভিজিটরকে বুঝতে, বিশ্বাস করতে, এবং একটিভ হতে সাহায্য করে।
হিরো: প্রথম স্ক্রীন। কী করেন, কার জন্য, এবং প্রধান সুবিধা বলুন। একটি স্পষ্ট প্রধান বোতাম যোগ করুন।
ফিচার/বেনিফিট: আপনি কী প্রদান করেন (ফিচার) এবং কেন তা গুরুত্বপূর্ণ (বেনিফিট)। প্রতিটি আইটেম সংক্ষিপ্ত ও স্কিমেবল রাখুন।
সোশ্যাল প্রুফ: রিভিউ, টেস্টিমোনিয়াল, ক্লায়েন্ট লোগো, কেস স্টাডি হাইলাইট, বা সংখ্যা (যেমন “2,000 দলের দ্বারা বিশ্বাসযোগ্য”)—এগুলি বিশ্বাসযোগ্যতা বাড়ায়।
FAQ: মানুষ যে প্রশ্নগুলো ভাবছে সেগুলোর উত্তর দিন: মূল্য, টাইমলাইন, সাপোর্ট, রিফান্ড, কম্প্যাটিবিলিটি, ডেলিভারি এলাকা ইত্যাদি।
ফুটার: "বাকি সবকিছু" অঞ্চল: যোগাযোগ, ঠিকানা, গুরুত্বপূর্ণ লিংক, লিগ্যাল, সোশ্যাল প্রোফাইল—এটি একটি ট্রাস্ট সিগন্যালও।
হিরো → দ্রুত সুবিধা → সোশ্যাল প্রুফ → বিস্তারিত (কিভাবে কাজ করে / কী অন্তর্ভুক্ত) → FAQ → চূড়ান্ত কল-টু-অ্যাকশন → ফুটার
সার্ভিসের জন্য “কিভাবে কাজ করে” এর বদলে “প্রক্রিয়া” (Step 1, Step 2, Step 3) ব্যবহার করুন। পণ্যের জন্য “বক্সে কি আছে” বা “স্পেস” যোগ করুন প্রুফের পরে।
শুধু তখনই সেকশন যোগ করুন যদি এটি স্পষ্টতা বাড়ায় (কোনো জরুরি জিনিস বোঝায়) অথবা সন্দেহ কমায় (কোনো ভয়ের উত্তর দেয়)। না হলে এটি প্রায়ই নয়েজ।
দ্রুত পরীক্ষা: যদি আপনি সেকশনটি সরিয়ে দেন, কি কেউ আরো বিভ্রান্ত হবে—নাকি কম প্ররোচিত হবে? যদি না হয়, কেটে দিন।
প্রতিটি সেকশনে লক্ষ্য করুন একটি প্রতিশ্রুতি, এক প্রমাণ, এক পদক্ষেপ।
উদাহরণ: “দ্রুত সেটআপ” সেকশন একটি দাবি করে (“এক দিনে লঞ্চ করুন”), তা সমর্থন করে (সংক্ষিপ্ত ব্যাখ্যা বা মিনি টেস্টিমোনিয়াল), এবং একটি পরবর্তী ধাপ দেয় (“সেটআপ গাইড দেখুন” বা “ফ্রি শুরু করুন”)। এতে পেইজ শান্ত ও পরিপাটি লাগবে।
"গ্রিড" জটিল ডিজাইন টুল নয়—এটি কেবল অদৃশ্য গাইডলাইন যা সাহায্য করে সবকিছু সারিবদ্ধ রাখার। যখন উপাদানগুলোর বাম-ও ডান-ধার একই, আপনার পেজ শান্ত ও উদ্দেশ্যভিত্তিক লাগে। যখন এজগুলো বিচ্ছিন্ন হয়, তা বেনজির হয় যদিও আপনি বোঝাতে না পারেন কেন।
কলাম কেবল উল্লম্ব লেন যেখানে কন্টেন্ট বসে। অনেক ওয়েবসাইট ১২ কলাম গ্রিড ব্যবহার করে কারণ এটি সহজে ভাগ হয় (1/2, 1/3, 2/3 ইত্যাদি)। আপনাকে গাণিতিক কষ্ঠ করতে হবে না—কেবল ধারাবাহিকতা নির্বাচন করুন এবং ব্যবহার করুন।
অ্যালাইমেন্ট হলো সবচেয়ে বড় "ফ্রি আপগ্রেড"—আপনার হেডিং, টেক্সট ব্লক, বোতাম এবং ইমেজ একই স্টার্টিং এজ শেয়ার করলে পেজ তাত্ক্ষণিকভাবে পরিপাটি মনে হয়।
অধিকাংশ অ-ডিজাইনারের জন্য এই দুই প্যাটার্ন প্রায় সবকিছুর জন্য পর্যাপ্ত:
নিশ্চিত না হলে এক কলামে ডিফল্ট করুন। তবুও স্পেসিং, হেডিং এবং কয়েকটি ভাল-নির্বাচিত ভিজ্যুয়াল দিয়ে ইন্টারেস্ট যোগ করতে পারবেন।
খুব চওড়া অনুচ্ছেদ ক্লান্তিকর—আপনার চোখ অনেকদূর ভ্রমণ করে। মূল টেক্সট এর প্রস্থ সীমাবদ্ধ রাখুন—প্রায় 60–80 অক্ষর প্রতি লাইন ভাল লক্ষ্যমাত্রা।
প্রায়ই এটি মানে ডেস্কটপে বডি টেক্সট কন্টেইনার 600–750px এর মতো রাখুন, যখন ফুল-উইডথ ব্যাকগ্রাউন্ড বা বড় অনুভূতি দিতে চাইলে ভিন্ন ব্যবহার করা যাবে।
কিছু সমস্যা পেজকে অদ্ভুত করে তোলে এমনকি রং ও ফন্ট ঠিক থাকলেও:
কিছু লেআউট নিয়ম বেছে নিন এবং পুনরাবৃত্তি করুন। পুনরাবৃত্তি সাইটকে "ডিজাইন করা" মনে করায়, না যে এটি জড়ো করা।
স্পেসিং হলো "নীরব ডিজাইন টুল" যা একটি সাধার সাইটকে উদ্দেশ্যমূলক দেখায়। ভালো হোয়াইটস্পেস মানে ফাঁকা নয়—এটি আপনার কন্টেন্টকে বিশ্রামের জায়গা দেয় যাতে মানুষ স্ক্যান, বুঝে, এবং ক্লিক করতে পারে।
একটি উপাদানকে ছবি হিসেবে ভাবুন:
মেমোরি শর্টকাট: প্যাডিং = ভিতরের আরাম, মার্জিন = বাইরের দূরত্ব।
ধারাবাহিকতা "পারফেক্ট" সংখ্যার চেয়ে বেশি গুরুত্বপূর্ণ। একটি স্কেল নিন এবং সর্বত্র ব্যবহার করুন, যেমন:
4 / 8 / 16 / 32 / 64 (পিক্সেল)
4–8 ছোট গ্যাপ, 16 স্বাভাবিক অনুচ্ছেদ স্পেস, 32 ব্লকের মধ্যে, 64 বড় সেকশন বিভাজন।
স্থান যোগ করুন:
একটি সাধারণ ভুল হলো একটি কম্পোনেন্টের ভিতরে অতিরিক্ত জায়গা দেওয়া, এবং উপাদানগুলোর মধ্যে পর্যাপ্ত জায়গা না রাখা—সবকিছু অপ্রতিষ্ঠিত মনে হয়।
৩০ সেকেন্ড স্ক্যান করুন:
সন্দেহ হলে আপনার স্কেলের এক ধাপ করে সমন্বয় করুন—শুরুর জন্য এটাই যথেষ্ট সাইটকে পালিশড দেখাতে।
ভালো টাইপোগ্রাফি বেশিরভাগই আরামের ব্যাপার। মানুষ যদি সহজে আপনার কন্টেন্ট পড়তে পারে, সাইট মুহূর্তেই আরো পরিপাটি দেখায়—কোনো জটিল কৌশল ছাড়া।
অনুচ্ছেদে ব্যবহৃত ফন্ট দিয়ে শুরু করুন। দর্শক সময় বেশি সেখানে কাটায়, তাই ছোট সাইজেও পরিষ্কার দেখাতে হবে।
বডি টেক্সট সাইজ সাধারণত 16–18px লক্ষ্যমাত্রা। যদি ফন্টটি সেই সাইজে আঁটসাট বা পাতলা লাগে, অন্য ফন্ট বেছে নিন। অনেক ক্লিন সান-সেরিফ ভালো কাজ করে—কিন্তু মোবাইলে পড়ার সুবিধা সবচেয়ে গুরুত্বপূর্ণ।
আপনাকে দশ ধরনের হেডিং দরকার নেই। একটি ছোট, পুনরাবৃত্তিং সিস্টেম ঠিক করুন:
প্রায়োগিক শুরু: H1 36–48px, H2 28–32px, H3 20–24px, বডি 16–18px, স্মল 12–14px। অনুভব করে অ্যাডজাস্ট করুন, কিন্তু ধাপগুলো ধারাবাহিক রাখুন।
অনুচ্ছেদ সহজে পড়ার জন্য দুইটি দ্রুত নিয়ম:
যদি টেক্সট পুরো স্ক্রীন জুড়ে দীর্ঘ হয়ে যায়, ক্লান্তিকর হয়—সংকীর্ণ কন্টেন্ট উইডথ ব্যবহার করুন।
মনোযোগ রাখুন:
আপনি যদি এক শক্ত বডি ফন্ট, পরিষ্কার স্কেল, এবং আরামদায়ক স্পেসিং বজায় রাখেন, আপনার টাইপোগ্রাফি ডিজাইনার ছাড়া-ও ডিজাইন করা মনে হবে।
ফন্ট একটি সাইটকে আত্মবিশ্বাসী ও পরিষ্কার বা জটিল ও পড়তে কষ্টসাধ্য করতে পারে। ট্রিকটি হলো ফন্টকে ডেকোরেশন হিসেবে না দেখে একটি সরল সিস্টেম হিসেবে দেখা।
সহজ ডিফল্ট চাইলে: হেডিংয়ের জন্য একটি ফন্ট, বডির জন্য একটি ফন্ট।
যদি আপনি মোটেই পেয়ারিং নিয়ে ভাবতে না চান, একটাই ভালো ফন্ট সারাবিশ্বে ব্যবহার করুন এবং কনট্রাস্ট তৈরি করুন মাপ, স্পেসিং, ও ওজন দিয়ে।
অ-ডিজাইনারদের জন্য আধুনিক সান-সেরিফ প্রায় সবসময় ঠিক থাকে। স্ক্রিনে পরিষ্কার, বিভিন্ন ডিভাইসে নমনীয়, এবং বেশিরভাগ ইন্ডাস্ট্রির জন্য কাজ করে (সার্ভিস, SaaS, পোর্টফোলিও, লোকাল বিজনেস)।
নির্ভরযোগ্য পদ্ধতি:
একটি শব্দ দিয়ে বিচার করবেন না; আপনার সাইটের আসল কন্টেন্ট দিয়ে পরীক্ষা করুন:
যদি হেডিং-এ ভালো কিন্তু অনুচ্ছেদে সমস্যা করে, হেডিংয়ে রাখুন আর বডির জন্য অন্য ফন্ট নিন।
পেশাদার লুক সাধারণত নিয়ন্ত্রণের ফলে আসে, ভ্যারাইটির ফলে নয়। সাদাসিধে সীমা:
অনেক ওজন থাকলে সাইট অনির্দিষ্ট মনে হয়—প্রতিটি সেকশনে অবিকল আলাদা গুরুত্ব তৈরি হয়।
একটি নিয়ম মনে রাখুন: ছোট সেট ফন্ট সিদ্ধান্ত নিন এবং সারাবিশ্বে পুনরাবৃত্তি করুন।
রঙ সবচেয়ে বেশি কাজে লাগে যখন এটি মানুষের পেইজে এগোতে সাহায্য করে। যদি সবকিছু রঙিন হয়, কিছুই চোখে পড়ে না—ভিজিটররা দ্বিধাগ্রস্ত হয়।
রঙকে হাইলাইটারের মতো ব্যবহার করুন: আপনি কেবল গুরুত্বপূর্ণ জিনিসগুলোতে ব্যবহার করবেন।
একটি সহজ পরীক্ষা: যদি আপনি রঙটা সরিয়ে ফেলেন এবং পেইজ বিভ্রান্তিকর হয়, তাহলে লেআউটের হায়ারার্কি পরিষ্কার করা দরকার। যদি সরিয়ে ফেলেও ঠিক থাকে, তাহলে রঙের ব্যবহার ঠিক আছে।
আপনার প্রধান কল-টু-অ্যাকশনের জন্য একটি রঙ বেছে নিন—উদাহরণ: “Get a quote,” “Book a call,” বা “Start free।” তারপর সারাবিশ্বে প্রয়োগ করুন:
ধারাবাহিকতা মানুষের সাইটে কি ক্লিকযোগ্য তা কয়েক সেকেন্ডে শেখায়। প্রতিটি সেকশনে আলাদা বোতাম স্টাইল হলে ভিজিটরকে বারবার নতুন করে শিখতে হয়।
ভালো কন্ট্রাস্ট “বান্দ করাটা” চাই না—এটি পাঠযোগ্য হতে হবে।
নিশ্চিত না হলে দ্রুত পরীক্ষা করুন: ফোনে বা কবছিদ আউটডোরে দেখুন—দুর্বল কন্ট্রাস্ট তাৎক্ষণিকই লক্ষণীয়।
একাধিক অ্যাকসেন্ট রং: যদি তিনটি “প্রাইমারি” রঙ থাকে, আপনার কাছে কোনটিই নেই। অ্যাকসেন্ট সীমিত রাখুন এবং প্রতিটি রঙকে একটি কাজ দিন (প্রাইমারি, সাকসেস, ওয়ার্নিং)।
নিম্ন-কন্ট্রাস্ট গ্রে টেক্সট: হালকা ধূসর বডি টেক্সট “মডার্ন” দেখাতে পারে, কিন্তু প্রায়ই অবপাঠ্য হয়। মেটাডেটার জন্য ব্যবহার করুন, অনুচ্ছেদের জন্য নয়।
রঙ সংযত ও কন্ট্রাস্ট শক্ত হলে কন্টেন্ট পরিষ্কার লাগে—এবং ডিজাইন তাত্ক্ষণিকভাবে পেশাদার দেখায়।
আপনি যদি একটিই “ডিজাইনার” কাজ করতে চান তবে আপনার ইন্টারফেসকে ইচ্ছাকৃতভাবে পুনরাবৃত্তি করান। কিছু পুনরায়ব্যবহারযোগ্য কম্পোনেন্ট—বোতাম, কার্ড, ফর্ম ফিল্ড, ব্যাজ—সাইটকে শান্ত ও উদ্দেশ্যপ্রণোদিত দেখায় এমনকি কনটেন্ট বদলালেও।
শুরুতে 4–6 বেসিক যা সবখানে ব্যবহার করবেন:
লক্ষ্য বৈচিত্র্য নয়—প্রেডিক্টিবিলিটি।
কিছু ডিফল্ট ঠিক করুন এবং মেনে চলুন:
যদি এই ডিটেইলগুলো মিলবে, সাইট অলংকরণ ছাড়া সমন্বিত দেখাবে।
আইকন ব্যবহার করুন যখন তা স্ক্যানিং দ্রুত করে (সার্চ, মেনু, ডাউনলোড) বা অর্থ জোরদার করে (ওয়ার্নিং, সাকসেস)। লেবেল ব্যতীত আইকন ব্যবহার করা এড়িয়ে চলুন—“Contact” বা “Solutions” শব্দটা সাধারণত টেক্সটেই পরিষ্কার। যদি আইকন ব্যবহার করেন, শব্দ পাশে রাখুন।
আপনার মূল পেইজগুলো খুলে মেলানো চেক করুন:
এই ছোট অসামঞ্জস্যগুলো ঠিক করলেই নতুন ডিজাইন উপাদান যোগ করার চেয়ে বড় প্রভাব পড়ে।
একটি সাইট ল্যাপটপে "ফিনিশড" দেখলেও মোবাইলে হতাশাজনক হতে পারে। রেসপন্সিভ ডিজাইন মানে দ্বিতীয় সাইট বানানো নয়—এটি আপনার লেআউটকে অনুকূল করতে দেয় যাতে একই কন্টেন্ট পরিষ্কার, পাঠযোগ্য এবং ব্যবহারযোগ্য থাকে।
ডেস্কটপ ফ্যান্সির আগেই নির্ধারণ করুন মোবাইলে স্ক্রল না করেই কি দেখা উচিত:
এই তিনটি সহজে না পাওয়া গেলে মোবাইল অভিজ্ঞতা ভাঙা মনে হবে।
মোবাইলে দীর্ঘ লাইন ও কুঁচকে থাকা সেকশন সাধারণ সমস্যা।
সামান্য বড় বডি টেক্সট ব্যবহার করুন (সাধারণত 16–18px) এবং পাশের সাইড-বাই-সাই লেআউটগুলো স্ট্যাক করুন। ডেস্কটপে দুই/তিন কলাম মোবাইলে সাধারণত এক কলামে নেমে আসে।
স্পেসিং জন্য: বড় গ্যাপগুলো কমান কিন্তু সবকিছু চাপা দেবেন না। কার্ড ও সেকশনের ভিতরে ধারাবাহিক প্যাডিং রাখুন—পেইজটি উদ্দেশ্যপ্রণোদিত দেখাবে।
টাচের জন্য লক্ষ্যবস্তুর আকার মাউসের চেয়ে বড় হওয়া উচিত।
ছোট সমন্বয়গুলো প্রায়ই কনভার্শন বাড়ায় পূর্ণ ভিজ্যুয়াল রিডিজাইনের চেয়ে বেশি।
অ্যাক্সেসিবিলিটি শুধুই "নিজের পক্ষে ভালো" নয়—এটি আপনার সাইটকে সকলের জন্য পরিষ্কার, শান্ত, এবং সহজ করে তোলে—বিশেষত ছোট স্ক্রিনে, উজ্জ্বল আলোতে, অথবা যখন কেউ ক্লান্ত এবং স্ক্যান করছে।
বেসিকগুলো দিয়ে শুরু করুন: বডি টেক্সট আরামদায়ক সাইজ, যথেষ্ট লাইন হাইট, শক্তিশালী কন্ট্রাস্ট। মানুষ যদি চোখ কুঁচকায় পড়তে হয়, তারা চলে যাবে।
স্ট্রাকচারও সমান গুরুত্বপূর্ণ। হেডিংগুলি সঠিক অনুক্রমে ব্যবহার করুন যাতে মানুষ ও স্ক্রিন রিডার দুটোই পেইজ বুঝতে পারে:
শুধু বোল্ড করে বা বড় করে ফেক হেডিং করবেন না—রিয়েল হেডিং লেভেল নেভিগেশন ও স্ক্যানিং-এ সাহায্য করে।
যদি কোনো ইমেজ কিছু বোঝায় (পণ্য ছবি, ডায়াগ্রাম, আইকন যার মানে আছে), alt টেক্সট দিন যা উদ্দেশ্য বর্ণনা করে, সব বিবরণ নয়। যদি ইমেজ সজ্জারূপে থাকে, খালি alt দিন যেন তা শব্দ নয়।
বোতাম ও লিংকগুলোর এমন লেবেল দিন যা বলে কি হবে। “Click here” বা অনলেবেল আইকন এড়িয়ে চলুন।
ভালো:
খারাপ:
প্রকাশ করার আগে দ্রুত এই পাসটি করুন:
যদি আপনি আউটলাইন এবং চেকলিস্ট ঠিক মতো ঠিক করেন, তাহলে আপনি Koder.ai-তে চ্যাট প্রম্পট থেকে পেজটি প্রোটোটাইপ করে দ্রুত বর্ধিত করতে পারেন, ইটারেট করুন, এবং কোড এক্সপোর্ট করে শিপ করুন—কোনো ধারাবাহিকতা বিসর্জন না দিয়ে।
২০২৫ সালে “আধুনিক” মানে বেশি করে স্বচ্ছতা, গতি, পাঠযোগ্যতা, এবং ধারাবাহিকতা।
একটি আধুনিক সাইট দ্রুত বলে দেয়:
প্রতি পেইজে একটি প্রধান লক্ষ্য নির্বাচন করে শুরু করুন (ক্রয়, কল বুক করা, সাবস্ক্রাইব, যোগাযোগ ইত্যাদি)।
তারপর একটি তাত্ক্ষণিক পরীক্ষা করুন: যদি কেউ শুধুমাত্র হেডলাইন + প্রধান বোতাম পড়ে তবে কি তারা বুঝতে পারবে পরবর্তী কী করতে হবে? না হলে সরল করুন যতক্ষণ না প্রধান একশন স্পষ্ট হয়।
ফন্ট বা রঙে যাওয়ার আগে প্লেইন-টেক্সটে একটি আউটলাইন লিখুন।
ভরসাযোগ্য একটি কাঠামো:
প্রতিটি সেকশন একটি কাজ করে—এমনভাবে ডিজাইন করা সহজ হয়।
ভিজ্যুয়াল হায়ারার্কি হল এক নজরে মানুষ কীভাবে কোন অংশগুলো আগে, পরে, আরো পরে লক্ষ্য করে।
আপনি এটি নিয়ন্ত্রণ করেন:
সবকিছু যদি সমান মনে হয়, ভিজিটরদের আরো কষ্ট করে খুঁজে নিতে হয়—আর অনেকেই চলে যায়।
প্রমাণ/টেস্টিমোনিয়ালগুলি সিদ্ধান্তের কাছাকাছি রাখুন — নিচে লুকিয়ে রাখবেন না।
উদাহরণ:
এইভাবে আপনি প্রশ্নগুলো সেই মুহূর্তেই উত্তর দিচ্ছেন যখন মানুষ সন্দিহান হয়।
পুনরাবৃত্তিযোগ্য সেকশন টাইপ ব্যবহার করুন:
শুধুমাত্র তখনই সেকশন যোগ করুন যদি এটি বা । যদি তা না করে, হয়ত এটি বাদ দিন।
অ্যালাইমেন্ট সবচেয়ে দ্রুত "ফ্রি আপগ্রেড"। একই বাম/ডান এজ শেয়ার করলে পেজ তাত্ক্ষণিকভাবে পরিপাটি দেখায়।
দুইটি নিরাপদ প্যাটার্ন:
৪+ ছোট কলাম এড়িয়ে চলুন—বিশেষত মোবাইলে এগুলো অসুবিধাজনক।
টেক্সট লাইনের অত্যধিক প্রস্থ চোখকে ক্লান্ত করে।
লক্ষ্য করুন:
ফুল-উইডথ ব্যাকগ্রাউন্ড রাখতে পারেন, কিন্তু অনুচ্ছেদগুলো যেন আরামদায়কভাবে সংকীর্ণ থাকে।
একটি সহজ স্পেসিং স্কেল বেছে নিন এবং সর্বত্র সেটিই ব্যবহার করুন, যেমন 4 / 8 / 16 / 32 / 64 (px)।
দ্রুত নির্দেশ:
স্পেসিং এক ধাপ করে বাড়ান/কমান—এটি র্যান্ডম সংখ্যার চেয়ে বেশ ভাল ফল দেয়।
টাইপোগ্রাফি সহজ রাখুন:
নিম্ন কন্ট্রাস্ট (হালকা ধূসর অনুচ্ছেদ) সাধারণত পাঠযোগ্যতা নষ্ট করে—এটি এড়িয়ে চলুন।