💡 [Landing Page Design Secrets Series]
এটি ৪ পর্বের একটি প্র্যাক্টিক্যাল গাইডলাইন সিরিজ, যেখানে হাই-কনভার্সন ল্যান্ডিং পেজ ডিজাইনের সিক্রেট, ইনফরমেশন আর্কিটেকচার, ফিগমা প্র্যাকটিস এবং কনভার্সন অপটিমাইজেশনের জার্নি দেখানো হয়েছে।
ডিজাইনাররা যখন ফিগমাতে অগোছালো লেআউট আর র্যান্ডম স্পেসিং দিয়ে ফাইল তৈরি করে ডেভেলপারদের হ্যান্ডওভার করে, তখন ব্যাকএন্ডে ডেভেলপারদের গালির ঝড় শুরু হয়ে যায়।
আপনার ডিজাইন ফাইলে যদি কোনো স্ট্যান্ডার্ড সিস্টেম বা রুলস না থাকে, তবে লাইভ হওয়ার পর পেজের স্পেসিং, ফন্ট সাইজ এবং রেসপন্সিভনেস সম্পূর্ণ ভেঙে যাবে।
আজকে আমরা আলোচনা করব ল্যান্ডিং পেজের ফিগমা আর্কিটেকচার (Figma Layout System & Style Guides) নিয়ে, যাতে আপনার ডিজাইন ডেভেলপার বা ফ্রন্টএন্ড টুলসের (Webflow/Framer) জন্য হ্যান্ডঅফ-রেডি হয়।
১. লুপ হোল: "Frame 4125" এবং র্যান্ডম স্পেসিং
আমি যখন ফ্রিল্যান্সিং ক্যারিয়ারের প্রথম কয়েক বছর কাজ করতাম, আমার ফিগমা লেয়ার প্যানেল দেখতে এক অদ্ভুত আবর্জনার মতো ছিল। ফ্রেমের নাম থাকত "Frame 102" বা "Group 44", স্পেসিং কোথাও ১২ পিক্সেল তো কোথাও ২৯ পিক্সেল।
ফলাফল কী হতো? লাইভ ডেভেলপমেন্টে যাওয়ার পর ডিজাইন দেখতে জঘন্য লাগত। ক্লায়েন্ট ভাবত ডেভেলপারের দোষ, কিন্তু আসলে সমস্যা ছিল আমার ফাইলে।
একটি প্রফেশনাল ডিজাইন ফাইল অনবোর্ড করার প্রথম শর্ত হলো—ফাইলে কোনো র্যান্ডম এলিমেন্ট থাকতে পারবে না। প্রজেক্ট শুরু করার আগেই স্পেসিং এবং টাইপোগ্রাফির জন্য একটি গাইডলাইন সেট করে নেওয়া উচিত।
২. ১২-কলাম গ্রিড ও কন্টেইনার (Layout Grids)
ল্যান্ডিং পেজ ডিজাইনের জন্য স্ট্যান্ডার্ড লেআউট গ্রিড রুলস ফলো করা আবশ্যক।
- ডেস্কটপ আর্টবোর্ড: ১৪৪০ পিক্সেল চওড়া ফ্রেম নিন।
- ১২-কলাম গ্রিড: কলাম সংখ্যা ১২, মার্জিন ১২০ থেকে ১৪০ পিক্সেল এবং গাটার (Gutter) ২০ থেকে ২৪ পিক্সেল রাখুন।
- কন্টেইনার সাইজ: ম্যাক্সিমাম কন্টেইনার সাইজ ১২০০ পিক্সেল অথবা ১২৮০ পিক্সেল রাখুন। আপনার মূল কনটেন্ট (টেক্সট, ইমেজ, কন্টেন্ট কার্ড) যেন এই কন্টেইনারের বাইরে না যায়।
কলাম গ্রিডের বাইরে স্পেসিংয়ের জন্য সবসময় ৮-পিক্সেল গ্রিড সিস্টেম (8pt Grid System) ব্যবহার করুন। অর্থাৎ সব মার্জিন ও প্যাডিং হবে ৮-এর গুণিতক (যেমন: 8px, 16px, 24px, 32px, 48px, 64px, 80px)। এতে লাইভ কোডে স্পেসিং কন্ট্রোল করা পানির মতো সহজ হয়।
৩. টাইপোগ্রাফি ও কালার ভেরিয়েবলস (Typography & Style Guide)
ডিজাইন ফাইল রেডি করার সাথে সাথেই ফিগমাতে কালার এবং টাইপোগ্রাফি ভেরিয়েবল বা স্টাইল সেভ করে নিন।
- কালার টোকেন: প্রাইমারি, সেকেন্ডারি, মিউটেড, সাকসেস, ওয়ার্নিং এবং ডার্ক/লাইট ব্যাকগ্রাউন্ড কালারগুলোকে সেভ করুন।
- টাইপ স্কেল (Type Scale): H1 (48px+), H2 (32px), H3 (24px), Body (16px), Caption (13px)。 এগুলোর লাইন হাইট (Line-height) এবং লেটার স্পেসিং ঠিক করে ফিগমা টেক্সট স্টাইলে অ্যাড করুন।
৪. অটো লেআউট প্র্যাকটিস (Auto Layout Rules)
আপনার ডিজাইনের কোনো অবজেক্ট যেন ডিরেক্ট ম্যানুয়াল পজিশন করা না থাকে।
- ফ্লেক্সিবল বাটন ও কার্ড: বাটনের উইডথ টেক্সট অনুযায়ী বা ডিরেক্ট ফিল কন্টেইনার করুন। প্যাডিং ও গ্যাপ ভ্যালু অটো লেআউট দিয়ে কন্ট্রোল করুন।
- হ্যান্ডঅফ ডকুমেন্টস: ল্যান্ডিং পেজে সব বাটনের হোভার স্টেট (Hover State) এবং অ্যাক্টিভ স্টেট ডিজাইন করে রাখুন। ফন্ট ফাইল এবং ইমেজ অ্যাসেটগুলো যেন ইজিলি এক্সপোর্ট করা যায় তা নিশ্চিত করুন।
পরবর্তী পর্বে আমরা দেখব কীভাবে ল্যান্ডিং পেজ লাইভ হওয়ার পর কনভার্সন অপটিমাইজেশন, এ/বি টেস্টিং এবং ডেটা অ্যানালিটিক্স দিয়ে পেজের রেভিনিউ দ্বিগুণ করবেন।
ধন্যবাদ সবাইকে。
এই সিরিজের অন্যান্য পর্বগুলো:
- 🔗 পর্ব ১: Hero Section Anatomy: হিরো সেকশনের স্ট্রাকচার ও কনভার্সন সিক্রেট
- 🔗 পর্ব ২: Interactive Wireframing: ইনফরমেশন আর্কিটেকচার ও সোশ্যাল প্রুফ
- 📌 পর্ব ৩ (আপনি এখানে আছেন): Figma to Live Page: স্ট্যান্ডার্ড গ্রিড ও স্টাইল গাইড গাইডলাইন
- 🔗 পর্ব ৪: Conversion Optimization & A/B Testing: কনভার্সন অপটিমাইজেশন ট্রিকস