“আমার ওয়েবসাইট এমন করুন”: কনটেন্ট নয়, স্টাইল অনুকরণ করুন

“আমার ওয়েবসাইট এমন করুন” আসলে কী বোঝায়

ক্লায়েন্ট যখন বলে “আমার ওয়েবসাইট এমন করুন,” তারা সাধারণত প্রতিটি পিক্সেল কপি করতে চায় না। তারা অনেক সময় একটা অনুভূতি বোঝাতে চান: পরিষ্কার ও আধুনিক, শক্ত সাহসী ও সম্পাদকীয়, বন্ধুভাবাপন্ন ও খেলাধুলোর মতো, প্রিমিয়াম ও মিনিমাল।

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

ক্লায়েন্টরা সাধারণত কী বোঝাতে চান

বেশিরভাগ ক্লায়েন্ট নিচের মধ্যে এক বা একাধিক বোঝাতে চাইছেন:

• “আমি এটা ব্যবহার করতে সহজ লাগছে বলে পছন্দ করছি।”
• “আমি ভিজ্যুয়াল পালিশটা পছন্দ করছি।”
• “আমি যে গল্পটা বলা হচ্ছে সেটা পছন্দ করছি।”
• “আমি ওই ক্যাটাগরির মধ্যে থাকতে চাই।”

রেফারেন্স সাইটকে দিক নির্ধারণের জন্য ব্যবহার করা স্বাভাবিক। মূল কথা হলো নীতিগুলো ধার করা, সম্পদগুলো নয়।

স্টাইল বনাম কনটেন্ট বনাম লেআউট (সংক্ষিপ্ত সংজ্ঞা)

• স্টাইল: ভিজ্যুয়াল সিস্টেম—টাইপোগ্রাফি, রং, স্পেসিং, ইমেজ ট্রিটমেন্ট, বাটন শেইপ, মোশন, সামগ্রিক টোন।
• কনটেন্ট: শব্দ ও মিডিয়া—কপি, ছবি, ইলাস্ট্রেশন, আইকন, টেস্টিমোনিয়াল, চার্ট, ব্র্যান্ড নাম।
• লেআউট: কনটেন্ট কিভাবে সাজানো—পেজ স্ট্রাকচার, সেকশন অর্ডার, গ্রিড, কম্পোনেন্ট প্যাটার্ন।

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

“প্রায় অনুলিপি” কেন ঝুঁকিপূর্ণ হতে পারে

আপনি সবকিছু পুনঃআঁকলেও, খুব একই রকম পেজ দেখালে সেটি নকলের মতো মনে হতে পারে—বিশ্বাস নষ্ট করে এবং অভিযোগকে আমন্ত্রণ করে। ঝুঁকি শুধু আইনি নয়; সুনামগতও। মানুষ লক্ষ্য করে যখন দুইটি সাইট গেলে যেন টুইন।

শুরুর দিকে প্রত্যাশা সেট করুন: একই ভাইব, আলাদা বাস্তবায়ন

একটি শক্ত চুক্তি দেরিতে ভুল ফিডব্যাকের সাপ্তাহיים রোধ করে, উদাহরণ:

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

এই এক বাক্য অনেক ভুল বোঝাবুঝি আটকায়।

আপনি কী ধার করতে পারবেন (এবং কী করা উচিত নয়)

আপনি যা নিরাপদভাবে ধার করতে পারেন

অন্যান্য সাইটকে ডিজাইন দিকনির্দেশনার রেফারেন্স হিসেবে বিবেচনা করুন:

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

এইগুলো হলো “ডিজাইন উপাদান” যা একই ভাইব অর্জনে সাহায্য করে কিন্তু এখনও একটি মৌলিক ফলাফল দেয়।

আপনি যা চিরতরে কপি করা উচিত নয়

যেখানে মানুষ দুর্ঘটনাক্রমে লাইন ক্রস করে:

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

লেআউট: কখন এটা ‘খুব মিল্লন’ হয়ে যায়

সাধারণ স্ট্রাকচারগুলো (হিরো → বেনিফিট → টেস্টিমোনিয়াল → CTA) সাধারণ। তবে এটি অনুলিপির মতো মনে হতে শুরু করে যখন আপনি একই সেকশন অর্ডার, একই গ্রিড, একই স্পেসিং, এবং একই ভিজ্যুয়াল হায়ারার্কি মেনে চলেন এবং পার্শ্ব-দেখায় তা সহজেই চিনবেন।

একটি ভালো নিয়ম: আইডিয়া রাখুন (যেমন, “তিনটি বেনিফিট কার্ড”), প্রকাশ বদলান (কনটেন্ট, অনুপাত, টাইপোগ্রাফি, ইমেজারি, এবং কম্পোনেন্ট স্টাইলিং) যাতে এটা স্পষ্টভাবে আপনার হয়ে ওঠে।

ভাল রেফারেন্স সংগ্রহ করুন: ৩–৫ উদাহরণ নীতিটি

একটি রেফারেন্স আপনাকে নির্দিষ্ট স্পেসিফিকসে আটকে দিতে পারে। ৩–৫ উদাহরণ চাওয়া পরিসর তৈরি করে, যা পুনরাবৃত্তি সংকেত বের করা সহজ করে তোলে।

কেন ৩–৫ উদাহরণ কাজ করে

একাধিক রেফারেন্স দিয়ে আপনি দেখতে পারবেন:

• “সবই পরিষ্কার এবং প্রশস্ত মনে হয়” (স্পেসিং + গ্রিড)
• “সবই বল্ড হেডলাইন ব্যবহার করে অনেক হোয়াইট স্পেস” (টাইপোগ্রাফি)
• “সবই শান্ত মোশন ব্যবহার করে, কোন ঝলকানি নেই” (অ্যানিমেশন)
• “সবকিছুর টোন আত্মবিশ্বাসী ও বন্ধুসুলভ” (কপি টোন)

একবার আপনি প্যাটার্নটা দেখলে, আপনি স্টাইল লজিক পুনর্নির্মাণ করতে পারবেন কোনো একক পেজ অনুলিপি না করেই।

তাদেরকে কী পছন্দ আর কী না তা লেবেল করতে বলুন

“I like it” কে গ্রহণযোগ্য প্রতিক্রিয়া হিসেবে নেবেন না। দ্রুত অ্যানোটেশন চেয়ে নিন:

• ফন্ট: আধুনিক/ক্লাসিক/খেলাধুলো? হেডলাইন বল্ড না সূক্ষ্ম?
• রং: মিউটেড না উজ্জ্বল? উচ্চ কনট্রাস্ট না নরম? প্রিয় অ্যাকসেন্ট রং?
• সরলতা: মিনিমাল ও শান্ত না তথ্যসমৃদ্ধ?
• অ্যানিমেশন: নেই, সূক্ষ্ম ফেড, না গতিশীল ইন্টার‌অ্যাকশন?
• টোন: গম্ভীর, বন্ধুভাবাপন্ন, প্রিমিয়াম, কুইর্কি?

সমানভাবে গুরুত্বপূর্ণ: নেতিবাচক সংগ্রহ।

উপযোগী “না” উদাহরণ:

• “বড় হিরো ভিডিও নয়।”
• “খুব ছোট হালকা-ধূসর টেক্সট নয়।”
• “ব্যস্ত ব্যাকগ্রাউন্ড বা ক্লাটারড ফুটার নয়।”
• “ডুডলি স্টাইল চাই না—পেশাদার রাখুন।”

একটি সংক্ষিপ্ত ইনটেক ফর্ম বা চেকলিস্ট ব্যবহার করুন

হালকা একটি চেকলিস্ট মিটিং কমায় এবং প্রতিক্রিয়াগুলোকে তুলনীয় রাখে:

• লিঙ্ক + স্ক্রিনশট
• ৩টি পছন্দ (টাইপোগ্রাফি, রঙ, স্পেসিং, লেআউট, ইমেজারি, ন্যাভিগেশন, মোশন, টোন)
• ৩টি অপছন্দ
• একটি বাক্য: “যদি আমাদের সাইট এইরকম অনুভূত হতো, তা হবে…”

“ভাইব” কে স্পষ্ট ডিজাইন প্রয়োজনীয়তায় অনুবাদ করুন

1) উদাহরণগুলোকে বিশেষণগুলোতে রূপান্তর করুন (তারপর সেগুলো সংজ্ঞায়িত করুন)

আপনার ৩–৫ রেফারেন্স থেকে ৫–৮টি বিশেষণ বেছে নিন: শান্ত, প্রিমিয়াম, খেলাঘর, সম্পাদকীয়, সাহসী, ন্যূনতম, আরামদায়ক, টেকনিক্যাল, বন্ধুভাবাপন্ন।

তারপর এগুলোকে সিদ্ধান্তে সংজ্ঞায়িত করুন:

• শান্ত = প্রচুর হোয়াইটস্পেস, নরম কনট্রাস্ট, প্রতিটি স্ক্রিনে কম ভিজ্যুয়াল “চিৎকার।”
• প্রিমিয়াম = সংযত প্যালেট, উচ্চমানের টাইপ, শক্তিশালী হায়ারার্কি, কম কিন্তু শক্তিশালী ভিজ্যুয়াল।
• সম্পাদকীয় = বড় হেডলাইন, চিন্তাশীল স্পেসিং, রিডিং-ফার্স্ট লেআউট।

এটি আপনার “ভাইব” থেকে নির্মাণযোগ্য সিদ্ধান্তে অনুবাদ করার স্তর।

2) দর্শক ও একক প্রধান লক্ষ্য সংজ্ঞায়িত করুন

কার জন্য ওয়েবসাইট এবং প্রধান ফলাফল কী—প্রতিটির জন্য একটি বাক্য লিখুন।

উদাহরণ:

• দর্শক: “৫০–২০০ জন কর্মচারীর অপারেশন ম্যানেজার যারা ভেন্ডর সংক্রান্ত ঝামেলা কমাতে চান।”
• লক্ষ্য: “আমাদের সার্ভিস প্যাকেজের জন্য যোগ্য ইনট্রো কল বুক করা।”

একটি প্রিমিয়াম ভাইব বিলাক রিটেইলের জন্য ও আরেকটি B2B কনসাল্টিং-এর জন্য আলাদা দেখতে পারে যখন দর্শক স্পষ্ট করা হবে।

3) সফলতার মেট্রিক্স নির্ধারণ করুন

লক্ষ্যের সঙ্গে সম্পর্কিত ২–৪টি মেট্রিক বেছে নিন:

• কনভার্সন রেট (ফর্ম, বুকিং, ক্রয়)
• কী পেজে সময় (সার্ভিস, প্রাইসিং, কেস স্টাডি)
• লিড কোয়ালিটি (ফিট, বাজেট, প্রস্তুতি)
• স্ক্রল ডেপথ বা ক্লিক-থ্রু তত গুরুত্বপূর্ণ পেজগুলোতে

মেট্রিকস স্বাদ বিতর্ককে প্রজেক্ট থেকে দূরে রাখে।

4) এক-প্যারাগ্রাফ স্টাইল ব্রিফ লিখুন

উপরেরগুলোকে মিলিয়ে একটি সংক্ষিপ্ত ব্রিফ লিখুন যে কারও রেফারেন্স হিসাবে ব্যবহার করা যাবে:

“আমরা অপারেশন লিডারদের জন্য শান্ত, প্রিমিয়াম, সম্পাদকীয় অনুভূতি চাই। সাইট দ্রুত বিশ্বাস তৈরি করবে এবং বুক করা কল বাড়াবে। সরল লেআউট, শক্তিশালী টাইপোগ্রাফি, সংযত রং এবং স্পষ্ট হায়ারার্কি ব্যবহার করুন। সফলতা = আরও যোগ্য বুকিং এবং সার্ভিস ও কেস স্টাডি পেজে বেশি এনগেজমেন্ট।”

একটি মুড বোর্ড ও মিনি স্টাইল গাইড তৈরি করুন

রেফারেন্স সাইট এখনও পূর্ণ সাইট—অনুভূতিটি কপি না করে কার্যকরভাবে ধরতে হলে অনুভূতিটি অংশে ভেঙে বিবর্ণভাবে বর্ণনা করুন।

একটি ফোকাসড মুড বোর্ড তৈরি করুন (স্ক্র্যাপবুক নয়)

আপনার মুড বোর্ডের কাজ: কেউ ল্যান্ড করলে সাইটটি কেমন অনুভূত হবে? টাইট রাখুন।

3–8টি আইটেম রাখুন নিম্ন বালতিতে:

• টাইপোগ্রাফি: 1–2 হেডিং স্টাইল ও 1 বডি স্টাইল (ওজন, সাইজ, লাইন-স্পেসিং নোট করুন)
• কালার: টেম্পারেচার (কুল/ওয়ার্ম), কনট্রাস্ট লেভেল, অ্যাকসেন্ট কীভাবে ব্যবহার হবে
• ফটোগ্রাফি/ইলাস্ট্রেশন স্টাইল: লাইটিং, ফ্রেমিং, স্যাচুরেশন, “রিয়েল পিপল” বনাম বিমূর্ত
• UI প্যাটার্ন: বাটন, কার্ড, ন্যাভ স্টাইল, হিরো অ্যাপ্রোচ, আইকন স্টাইল, স্পেসিং ঘনত্ব

সংক্ষিপ্ত নোট যোগ করুন, যেমন: “বড় আত্মবিশ্বাসী হেডলাইন,” “নরম শ্যাডো, গোল কোণ,” “একটি একক অ্যাকসেন্ট রং শুধুই CTA-তে ব্যবহার করুন।”

এটিকে একটি বাস্তব বিল্ডেবল মিনি স্টাইল গাইডে রূপান্তর করুন

মুড বোর্ডকে ধারাবাহিক নিয়মে রূপান্তর করুন:

• টাইপ স্কেল: H1/H2/H3, বডি, ছোট টেক্সট (সাইজ + লাইন হাইট)
• বাটন: প্রাইমারি/সেকেন্ডারি, রেডিয়াস, হোভার বিহেভিয়ার
• কার্ড: প্যাডিং, বর্ডার বনাম শ্যাডো, ইমেজ ট্রিটমেন্ট
• ফর্ম ফিল্ড: বর্ডার স্টাইল, ফোকাস স্টেট, এরর স্টেট

যদি ডিজাইন টোকেন রাখেন, এখান থেকেই শুরু হবে (ফন্ট সাইজ, স্পেসিং স্টেপ, কালার রোল)।

ডো-ওর-ডোনটস (প্রমাণসহ) ডকুমেন্ট করুন

একটি সহজ “Do / Don’t” তালিকা তৈরি করুন:

• Do: “প্রাইমারি অ্যাকশনের জন্য একটি অ্যাকসেন্ট রং ব্যবহার করুন।”
• Don’t: “এই নির্দিষ্ট লেআউট বা আইকন সেট অনুলিপি করবেন না।”

এই কনস্ট্রেনট তালিকাটি দুর্ঘটনাক্রমে ক্লোন হওয়া রোধ করে এবং ভবিষ্যতে নতুন পৃষ্ঠাগুলিকে সঙ্গতিশীল রাখে।

টাইপোগ্রাফি, রং, এবং স্পেসিং দিয়ে স্টাইল পুনর্নির্মাণ করুন

ক্লোন ছাড়া একই ফিল পেতে চাইলে প্রথম নীতিগুলো থেকে পুনর্নির্মাণ করুন: টাইপ, কালার, স্পেসিং।

টাইপোগ্রাফি: একই মুড, আলাদা ছাপ

রেফারেন্স টাইপোগ্রাফি কি করছে তা নির্ণয় করুন: সম্পাদকীয় ও শান্ত? টেকি ও নির্ভুল? খেলাধুলো ও রাউন্ড?

রেফারেন্সে ব্যবহৃত সেরা-সম্ভব ফন্টের পরিবর্তে মুড মেলে এমন অন্য কোনো ফণ্ট বেছে নিন—একই পরিবারের মতো নয়।

তারপর টাইপ স্কেল সংজ্ঞায়িত করুন:

• H1, H2, H3 সাইজ (এবং কখন ব্যবহার)
• বডি টেক্সট সাইজ ও লাইন-হাইট নিয়ম
• ক্যাপশন ও ছোট টেক্সট স্টাইল

অনেক সাইটের জন্য একটি পাঠযোগ্য বেসলাইন: আরামদায়ক বডি লাইন-হাইট (~1.5–1.7), হেডিংগুলো সামান্য আঁট, এবং উদার অনুচ্ছেদ স্পেসিং।

রং: আলাদা হিউ বা আলাদা অনুপাত

অনেক “কপি করা” ডিজাইন একই হিরো ব্যাকগ্রাউন্ড ও অ্যাকসেন্ট দিয়ে নিজেদের প্রকাশ করে ফেলে। একটি নিজস্ব প্যালেট তৈরি করুন:

• ভিন্ন হিউ নির্বাচন করুন (উদাহরণ: রেফারেন্স নেভি + নিয়ন গ্রিন; আপনি গভীর টিয়াল + উষ্ণ লেবু বেছে নেবেন)
• অথবা একই পরিবার রাখুন কিন্তু অনুপাত বদলান (রেফারেন্সটা প্রধানত অন্ধকার; আপনি প্রধানত হালকা নিরপেক্ষ রেখে ছোট সাহসী আকসেন্ট ব্যবহার করবেন)

স্টেটগুলোও সংজ্ঞায়িত করুন: লিংক, হোভার, ফোকাস, এরর/সাকসেস কালার।

স্পেসিং: অদৃশ্য জিনিস যা প্রিমিয়াম মনে করায়

স্পেসিং হলো দ্রুততম উপায়ের একটি সমন্বয় ছাড়া কপি ছাড়া মিল তৈরি করতে। একটি স্পেসিং সিস্টেম ব্যবহার করুন (যেমন 4/8/16/24 বা 6/12/24/36) এবং সেটি রাখুন:

• সেকশন প্যাডিং
• কার্ড ও কলামের মধ্যে গ্যাপ
• বাটন প্যাডিং ও ফর্ম স্পেসিং

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

পেজের বদলে ডিজাইন কম্পোনেন্ট তৈরি করুন

প্রেরণা সাইটের পৃষ্ঠা-পাঠ recreation একটি সাধারণ ফাঁদ: আপনি হয় খুব একই হয়ে যান, বা আপনার কনটেন্ট একই শেপে না মানলে আটকে পড়েন। বরং সিস্টেম কপি করুন, পৃষ্ঠা নয়।

প্রথমে পুনরাবৃত্তি অংশগুলো খুঁজে বের করুন

অধিকাংশ মার্কেটিং সাইট পুনরায় ব্যবহারযোগ্য “লেগো ব্রিক” দিয়ে তৈরি। আপনার রেফারেন্সগুলোতে কি কি বারবার আসে লিস্ট করুন:

• হিরো সেকশন (হেডলাইন, সাবহেড, প্রাইমারি CTA, সেকেন্ডারি লিঙ্ক)
• ফিচার ব্লক (আইকন + টাইটেল + সংক্ষিপ্ত কপি)
• টেস্টিমোনিয়াল (কোট, নাম, ভূমিকা, কোম্পানি)
• প্রাইসিং কার্ড (প্ল্যান নাম, দাম, ফিচার, CTA)
• FAQ অ্যাকর্ডিয়ন

কম্পোনেন্টগুলো নামকরণ করলে কাজটি “তাদের হোমপেজ কপি” থেকে “আমাদের হিরো তৈরি করা, আমাদের প্রাইসিং” এ সরে যায়।

আপনার নিজস্ব কম্পোনেন্ট সেট তৈরি করুন

একটি ছোট কম্পোনেন্ট লাইব্রেরি তৈরি করুন যা আপনি পেজ জুড়ে reuse করতে পারবেন:

• বাটন (প্রাইমারি/সেকেন্ডারি/টারসিয়ারি, হোভার + ডিসেবলড স্টেট)
• ন্যাভিগেশন (ডেস্কটপ + মোবাইল)
• কার্ড (ফিচার, ব্লগ পোস্ট, রিসোর্স)
• ফর্ম (ইনপুট, টেক্সটএরিয়া, ড্রপডাউন, এরর মেসেজ)

দ্রুত যেতে চাইলে একটি ভাইব-কোডিং প্ল্যাটফর্ম যেমন Koder.ai সহায়ক হতে পারে: আপনি টার্গেট ভাইব ও কম্পোনেন্ট সেট বর্ণনা করে React-ভিত্তিক UI জেনারেট করতে পারেন এবং ইটারেট করতে পারেন—এতে রাখতে পারবেন অরিজিনাল লেআউট বজায় রেখে। প্ল্যানিং মোড ও স্ন্যাপশট/রোলব্যাক ফিচার সংস্করণ পরীক্ষা করা নিরাপদ করে।

ভ্যারিয়েশন নিয়ম সংজ্ঞায়িত করুন (এটা সঙ্গত রাখে)

পলিশড সাইটগুলো নিয়ন্ত্রিত ভ্যারিয়েশন ব্যবহার করে। কিছু নিয়ম রাখুন:

• কর্নার রেডিয়াস: উদাহরণ: কার্ডের জন্য 8px, পিলের জন্য 999px, কখনো র‍্যান্ডম নয়
• শ্যাডো স্তর: নেই / নরম / উত্থিত (সর্বোচ্চ ৩ স্তর)
• আইকন স্টাইল: আউটলাইন বনাম সলিড, স্ট্রোক ওজন, কর্ণার স্টাইল

এটিকে একটি মিনি প্লেবুকের মতো ডকুমেন্ট করুন

এক পেজের কম্পোনেন্ট গাইড যথেষ্ট: প্রতিটি কম্পোনেন্ট কী জন্য, কোথায় ব্যবহার, এবং অনুমোদিত ভ্যারিয়েশনগুলো কী।

আপনার কনটেন্ট অনুযায়ী স্ট্রাকচার ও ওয়্যারফ্রেম প্ল্যান করুন

রেফারেন্স সাইটের পেজ অর্ডার কপি করা দ্রুততম উপায় আপনার ব্যবসার তখনকার অনুমানগুলিও গ্রহণ করা।

ইউজার-চাহিদা থেকে শুরু করুন (রেফারেন্স নয়)

স্কেচ করার আগে তালিকা করুন ভিজিটরদের কি জানার দরকার:

• “এটা কি আমার মতো লোকের জন্য?”
• “দাম কী এবং কী অন্তর্ভুক্ত?”
• “আমি কি তোমাদের বিশ্বাস করতে পারি—প্রমাণ, রিভিউ, ফলাফল?”
• “আমি যোগাযোগ করলে পরবর্তী কী হবে?”

এই প্রশ্নগুলো আপনার স্ট্রাকচারের হাড় গঠন করে।

একটি সহজ সাইটম্যাপ ও পেজ লক্ষ্য তৈরি করুন

প্রয়োজনীয় পেজগুলো ম্যাপ করুন এবং প্রতিটি পেজকে একটি কাজ দিন:

• হোম: আপনি কী করেন, কার জন্য, এবং পরবর্তী ধাপ কী
• প্রোডাক্ট/সার্ভিস: অফার ব্যাখ্যা, সুবিধা, মূল বিবরণ
• প্রাইসিং: স্পষ্ট টিয়ার, অন্তর্ভুক্তি এবং FAQ দিয়ে উদ্বেগ কমান
• কন্ট্যাক্ট: যোগাযোগ সহজ করুন; রেসপন্স সময়ের প্রত্যাশা সেট করুন

সহায়ক পেজগুলো (About, Case Studies, FAQ) কেবল তখনই যোগ করুন যখন তারা স্পষ্ট উদ্দেশ্য সার্ভ করে।

প্রতিটি পেজের জন্য অনন্য কনটেন্ট আউটলাইন লিখুন

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

আপনার কনটেন্ট অনুযায়ী ওয়্যারফ্রেম করুন

ওয়্যারফ্রেম হল লেআউট স্কেচ, ডেকোরেশন নয়:

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

স্ট্রাকচার কাজ করলে, অনুপ্রেরণা সাইটের স্টাইল প্রয়োগ করুন—কিন্তু তার ব্লুপ্রিন্ট নয়।

অরিজিনাল কপি ও ভিজ্যুয়াল তৈরি করুন (কোনো “ফাইন্ড অ্যান্ড রিপ্লেস” নয়)

বাস্তবিক আলাদা করতে আপনার শব্দ ও ভিজ্যুয়াল অবশ্যই নিজস্ব হতে হবে।

কপি শূন্য থেকে পুনরায় লিখুন (বেনিফিট, প্রমাণ, CTA)

আপনার ব্যবসার সত্য থেকে শুরু করুন। একটি সরল ফ্রেমওয়ার্ক:

• বেনিফিট: গ্রাহক কি ফল পাবে (দ্রুত, সহজ, নিরাপদ, আত্মবিশ্বাসী)?
• প্রমাণ: কি এটাকে বিশ্বাসযোগ্য করে (নম্বর, টেস্টিমোনিয়াল, কেস স্টাডি, লোগো, সার্টিফাই)**
• কল-টু-অ্যাকশন: পরবর্তী ধাপ কী (কল বুক করুন, ট্রায়াল শুরু করুন, কোট চাইুন) আপনার টোনে।

আপনি রেফারেন্সের রিদম মিলিয়ে নিতে পারেন (শর্ট পাঞ্চি লাইন বনাম লম্বা ব্যাখ্যা) কিন্তু মূল আইডিয়া ও শব্দ বদলান। স্বতন্ত্র বাক্যাংশ ও অনন্য উপমা এড়ান।

অরিজিনাল ভিজ্যুয়াল ব্যবহার করুন (অথবা সঠিকভাবে লাইসেন্সকৃত)

স্ক্রিনশট, আইকন, ইলাস্ট্রেশন বা ফটো—অতিরিক্ত সাধারণ মনে হলেও—তুলে নেওয়া চলবে না।

• আপনার প্রোডাক্ট বা প্রক্রিয়ার নিজস্ব স্ক্রিনশট নিন।
• সম্ভব হলে নিজস্ব ফটোগ্রাফি ব্যবহার করুন।
• স্টক দরকার হলে লাইসেন্সকৃত অ্যাসেট ব্যবহার করুন এবং রেকর্ড রাখুন।

আপনি একই হিরো ভাইব চাইলে, ধারণাটা পুনঃসৃষ্টি করুন: সমান পলিশ, ভিন্ন বিষয়বস্তু ও কম্পোজিশন।

হেডিং ও সেকশন অর্ডার প্রতিবিম্ব করবেন না

নতুন টেক্সট থাকলেও একই সেকশন ফ্লো অনুকরণ করলে তা অনুকরণীর মতো পড়তে পারে। আপনার স্টোরিকে আপনার শক্তির ওপর সাজান: প্রমাণ দিয়ে শুরু করুন, পাতলা সেকশন মিলান, বা এমন সেকশন যোগ করুন যা রেফারেন্সে নেই।

মুড মিলান, শব্দ আপনারই রাখুন

টোন ঠিক আছে; বাক্যাংশ না। আপনার ভয়েস নির্ধারণ করুন (বন্ধুভাবাপন্ন, প্রিমিয়াম, সরাসরি, খেলাধুলো) এবং হেডিং, বাটন ও মাইক্রোকপিতে ধারাবাহিকভাবে প্রয়োগ করুন।

কোয়ালিটি চেক: একই ফিল, স্পষ্টভাবে আলাদা বাস্তবায়ন

আপনি চাইছেন “একই ঘরানার গান, ভিন্ন গান।” শিপ করার আগে নিশ্চিত করুন আপনি ভাইবটি ধরেছেন কিন্তু বিবরণ মেলেনি।

“সাদৃশ্য ভাইব” টেস্ট

রেফারেন্স ও আপনার খসড়া 60 সেকেন্ড সাইড-বাই-সাইড খুলে দেখুন। রেফারেন্স বন্ধ করে জিজ্ঞাসা করুন: আপনি কী মনে রেখেছেন?

• যদি আপনি মুড মনে রাখেন (পরিষ্কার, খেলাধুলো, প্রিমিয়াম), আপনি সঠিক পথে আছেন।
• যদি আপনি নির্দিষ্ট বিবরণ মনে রাখেন (ওই নির্দিষ্ট হিরো লেআউট, সেগুলো আইকন), আপনি খুব কাছাকাছি।

অ্যাক্সেসিবিলিটি স্যানিটি চেক

একটি সাইট একই অনুভূতি পেতে পারে কিন্তু বাস্তব ব্যবহারকারীর জন্য আরও ভালো হতে পারে। যাচাই করুন:

• কনট্রাস্ট ও পাঠযোগ্যতা (খুব ছোট, পাতলা, কম-কনট্রাস্ট বডি টেক্সট এড়ান)
• লিঙ্ক ও বাটনের স্পষ্ট হোভার/ফোকাস স্টেট
• মেনু, ফর্ম, মডালগুলির কীবোর্ড নেভিগেশন যৌক্তিক

রেস্পন্সিভ রিয়ালিটি চেক

মোবাইল সচেতনভাবে ডিজাইন করা উচিত, কেবল “চোখ চাপা ডেক্সটপ” নয়। চেকগুলো:

• মোবাইল-প্রথম হেডার যেখানে স্পষ্ট প্রধান অ্যাকশন আছে
• রিফ্লো করা সেকশন (স্ট্যাকিং, ছোটার লাইন দৈর্ঘ্য, বড় ট্যাপ টার্গেট)
• কোন ক্রিটিক্যাল ইন্টারঅ্যাকশন হোভার-নির্ভর নয়

“খুব কাছাকাছি?” চেকলিস্ট চালান

লঞ্চের আগে:

• আপনি কি একই হিরো লেআউট প্যাটার্ন ব্যবহার করছেন এবং পরবর্তী ২–৩ সেকশন একই রকম পুনরাবৃত্তি করছেন?
• আপনার রং ও টাইপোগ্রাফি কি আলাদা ব্র্যান্ড স্বাক্ষর তৈরি করে?
• ইলাস্ট্রেশন, আইকন, ফটো এবং মাইক্রোকপি কি অরিজিনাল (বা সঠিকভাবে লাইসেন্সকৃত)?

যদি দুই বা তার বেশি উত্তর দুর্বল লাগে, কোনো এক স্তর—স্পেসিং, টাইপোগ্রাফি, বা কম্পোনেন্ট শেপ—পুনরায় ডিজাইন করুন যাতে “ক্লোন” অনুভূতিটা দ্রুত ভাঙে।

আইনি ও নৈতিক গার্ডরেইল (সহজ ভাষায়)

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

কপিরাইট বুনিয়াদি (সাধারণত কী সুরক্ষিত)

কপিরাইট সাধারণত নির্দিষ্ট সৃজনশীল প্রকাশ সুরক্ষিত করে, সাধারণ ধারণা নয়।

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

ট্রেড ড্রেস ও ব্র্যান্ড কনফিউশন (“ওইগুলোর মতো” সমস্যা)

নকল না করলেও আপনি বিভ্রান্তি সৃষ্টি করে ফেলতে পারেন যদি ডিজাইনটি মিলিয়ে দেয়।

খেয়াল রাখুন:

• প্রায় একই লোগো প্লেসমেন্ট, কালার প্যালেট, এবং টাইপোগ্রাফি সংমিশ্রণ
• একটি অনন্য হিরো লেআউট, ইলাস্ট্রেশন স্টাইল, বা মাসকট যা স্পষ্টভাবে তাদের মনে করায়
• মিলতোলা পণ্য নাম, টোন, এবং মেসেজিং স্ট্রাকচার যা অংশীদারিত্ব বোঝায়

একটি সহজ টেস্ট: যদি এক দৃশ্যত দৃষ্টিতে কেউ বলে, “এটি কি একই কোম্পানি?” আপনি খুব কাছে গেছেন।

কখন আইনি পেশাজীবীর সঙ্গে পরামর্শ করবেন

তাড়াহুড়ো করে পরামর্শ বিবেচনা করুন যদি আপনি:

• একই মার্কেটে অপারেট করেন রেফারেন্স ব্র্যান্ডের সাথে
• একটি খুব পরিচিত ভিজ্যুয়াল আইডেন্টিটি পুনর্নির্মাণ করছেন
• ফন্ট, ছবি, আইকন বা টেমপ্লেট লাইসেন্স নিয়ে অনিশ্চিত
• কোনো অভিযোগ, টেকডাউন নোটিশ, বা “সিজ অ্যান্ড ডিজিস্ট” পেয়েছেন

আপনার প্রক্রিয়াটি ডকুমেন্ট করুন (এটা ভাবার চেয়েও সাহায্য করে)

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

• আপনার ব্রিফ (লক্ষ্য, দর্শক, সীমাবদ্ধতা)
• মুড বোর্ড (একাধিক রেফারেন্স)
• ওয়্যারফ্রেম ও খসড়া যা ইটারেশন দেখায়
• লাইসেন্সকৃত অ্যাসেট-এর নোট (রসিদ/লিঙ্ক) এবং কি আপনি নিজেই তৈরি করেছিলেন

এটা নীরসতা নয়—এটা স্পষ্টতা, এবং “অনুপ্রাণিত” কাজকে নৈতিক দিক থেকে সঠিক রাখে।