ওয়েবসাইটের কালার কম্বিনেশন, যে রঙে দাম পড়া যায় আর বাটন চোখে পড়ে
ল্যাপটপে লাল ব্যানারে গোলাপি লেখা সুন্দর লাগে, কিন্তু রোদের মধ্যে সস্তা ফোনে কেউ দামটাই পড়তে পারেন না। কয়টা রং নেবেন, লোগো থেকে রং কীভাবে বের করবেন, লেখা পড়া যায় কি না ফ্রিতে কীভাবে মাপবেন, আর অর্ডার বাটন কোন রঙের হবে, হেক্স কোডসহ।
Shahidujzaman Shahid
এই লেখায় যা আছে
- ওয়েবসাইটের কালার কম্বিনেশনে কয়টা রং লাগে?
- লোগো থেকে দোকানের রং বের করবেন যেভাবে
- লেখা পড়া যায় না কেন, কন্ট্রাস্ট মানে কী?
- অর্ডার বাটনের রং কেমন হলে চোখে পড়ে?
- খাবার, ফ্যাশন, গ্যাজেট আর বিউটির শপে কোন রং মানায়?
- যে রঙের ভুলে মোবাইলে পেজ নষ্ট হয়
- কোডিং ছাড়া প্রতিটা লেখা আর বাটনের রং চেঞ্জ করবেন যেভাবে
- রং বদলের পর ফোনে চেক করবেন যেভাবে
ওয়েবসাইটের কালার কম্বিনেশন ঠিক করার সবচেয়ে কাজের নিয়ম হলো তিনটা রং। একটা মূল রং অর্ডার বাটনের জন্য, একটা দ্বিতীয় রং অফার বা আলাদা অংশের জন্য, আর একটা হাইলাইট রং ছোট ছোট জিনিসের জন্য। বাকি সব জায়গায় থাকবে সাদা বা হালকা ব্যাকগ্রাউন্ড আর প্রায় কালো লেখা। তারপর প্রতিটা লেখা আর তার পেছনের রঙের মধ্যে যথেষ্ট পার্থক্য রাখুন, যেন সস্তা ফোনে রোদের মধ্যেও দামটা পড়া যায়। কোন রং সুন্দর, তার চেয়ে অনেক বেশি জরুরি হলো লেখাটা পড়া যায় কি না।
একটা ঘটনা কল্পনা করুন। রাত জেগে ল্যাপটপে বসে পেজটা সাজালেন। লাল ব্যানারের ওপর হালকা গোলাপি লেখা দিলেন, দেখতে বেশ লাগছিল। পরদিন দুপুরে অ্যাড চালু করলেন। অফিসের গেটে দাঁড়িয়ে একজন রোদের মধ্যে কম দামের ফোনে আপনার লিংকে চাপলেন। তিনি দামটা পড়তে পারলেন না, অর্ডার বাটনও খুঁজে পেলেন না। দুই সেকেন্ড পর তিনি ফেসবুকে ফিরে গেলেন। আপনার ক্লিকের টাকা কাটা গেল, অথচ তিনি হয়তো কিনতেই চেয়েছিলেন।
সেদিন রাতে অ্যাড ম্যানেজার খুলে দেখলেন ক্লিক এসেছে ভালোই, কিন্তু অর্ডার প্রায় নেই। তখন মনে হয় প্রোডাক্ট খারাপ, নয়তো অ্যাড খারাপ। অনেক সময় দোষটা আসলে এত ছোট জিনিসের যে চোখেই পড়ে না, লেখার রঙের। নিচের নিয়মগুলো এমনভাবে বলছি যেন যেকোনো ওয়েবসাইটে ডিজাইনার ছাড়াই নিজে হাতে করতে পারেন।
ওয়েবসাইটের কালার কম্বিনেশনে কয়টা রং লাগে?
তিনটা রং, আর সাথে সাদা ও প্রায় কালো। প্রতিটা রঙের একটা কাজ থাকবে, তাহলেই পেজটা গোছানো লাগে। মূল রং দিয়ে বোঝাবেন "এখানে চাপুন", মানে অর্ডার বাটন। দ্বিতীয় রং দিয়ে আলাদা করবেন অফারের অংশ বা পেজের একটা ব্যান্ড। আর হাইলাইট রং বসবে ছোট জিনিসে, যেমন "ফ্রি ডেলিভারি" লেখা একটা ছোট ব্যাজ।
রং কম রাখার কারণটা সহজ। কাস্টমারের চোখ পেজে ঢুকেই খোঁজে কোনটা জরুরি। পাঁচ-ছয়টা রং থাকলে সব কিছুই নিজের দিকে টানে, তাই শেষে কোনোটাই আলাদা করে চোখে পড়ে না। পুরো পেজ রঙিন করে দিলে অর্ডার বাটনটাও আরেকটা রঙিন জিনিস হয়ে যায়।
কতটুকু জায়গায় কোন রং দেবেন, তার জন্য ডিজাইনারদের মধ্যে চালু একটা আন্দাজ আছে, ৬০-৩০-১০। পেজের মোটামুটি ষাট ভাগ জায়গা হালকা ব্যাকগ্রাউন্ড, ত্রিশ ভাগ দ্বিতীয় রং আর লেখা, আর মাত্র দশ ভাগের মতো মূল রং আর হাইলাইট। এটা মেপে মেপে মানার নিয়ম না। মূল কথা হলো, বাটনের রং পেজে যত কম জায়গায় থাকবে, বাটনটা তত বেশি চোখে পড়বে।
একটা উদাহরণ দিই। ধরুন আপনি মধু আর ঘি বিক্রি করেন। ব্যাকগ্রাউন্ড রাখলেন সাদা, লেখা প্রায় কালো (#1f2937)। মূল রং নিলেন সোনালি-বাদামি (#b45309), সব অর্ডার বাটন এই রঙে আর তার ওপর সাদা লেখা। হাইলাইট নিলেন উজ্জ্বল হলুদ (#f59e0b), শুধু "নতুন স্টক" বা "অফার" ব্যাজে, আর তার ওপরের লেখা কালো। ব্যস, পুরো দোকান এই কয়টা রঙে চলবে।
এখানে # দিয়ে শুরু ছয় অক্ষরের যে কোডগুলো দেখছেন, এগুলোকে বলে হেক্স কোড। "লাল" বললে হাজার রকম লাল বোঝায়, কিন্তু কোডটা দিলে ওয়েবসাইট, Canva আর ডিজাইনার সবাই হুবহু একই রং বসায়। নিজের তিনটা রঙের কোড ফোনের একটা নোটে লিখে রাখুন। ফেসবুক পোস্টার বানানোর সময়ও একই রং দিন, তাহলে কয়েক সপ্তাহ পরে মানুষ লেখা পড়ার আগেই আপনার দোকান চিনে ফেলবেন। পোস্টারে রং আর ফন্ট কীভাবে সাজাবেন, সেটা আছে মোবাইলে Canva দিয়ে অফার পোস্টার বানানোর লেখায়।
লোগো থেকে দোকানের রং বের করবেন যেভাবে
লোগো থাকলে আপনার দোকানের রং আসলে আগেই ঠিক হয়ে আছে, শুধু খুঁজে বের করতে হবে। লোগোর সবচেয়ে উজ্জ্বল, চোখে পড়া রংটা হবে মূল রং, মানে বাটনের রং। লোগোতে আরেকটা আলাদা রং থাকলে সেটা হবে হাইলাইট। এতে কাস্টমার পেজে ঢুকে লোগো আর বাটনে একই রং দেখেন, আর দোকানটাকে একটা গোছানো ব্র্যান্ড মনে হয়।
কোডটা পাবেন যে অ্যাপে লোগো বানিয়েছেন সেখানেই। লোগোর লেখা বা চিহ্নটা সিলেক্ট করে রঙের ঘরে চাপলে বেশিরভাগ অ্যাপে # দিয়ে শুরু কোডটা দেখায়। ডিজাইনার দিয়ে বানালে তাঁর কাছে রংগুলোর কোড চেয়ে নিন। এটা চাওয়া খুব সাধারণ ব্যাপার, ভালো ডিজাইনার নিজে থেকেই দিয়ে দেন।
এবার একটা জিনিস মিলিয়ে নিন। লোগোর রং অনেক সময় খুব হালকা হয়, যেমন হালকা হলুদ, আকাশি বা হালকা গোলাপি। এমন রঙের বাটনে সাদা লেখা দিলে প্রায় দেখাই যায় না। তখন দুটো রাস্তা আছে। রংটা একই রেখে একটু গাঢ় শেড নিন বাটনের জন্য, অথবা হালকা রংটা শুধু হাইলাইটে রাখুন আর তার ওপর কালো লেখা দিন। লোগোর রং হুবহু বাটনে বসাতেই হবে, এমন কোনো নিয়ম নেই।
লোগো এখনো না থাকলে আগে সেটা গুছিয়ে নিন, কারণ পরে লোগো চেঞ্জ হলে দোকানের রংও আবার মেলাতে হবে। কোন অ্যাপে লোগো বানাবেন আর কোন ফাইলগুলো রাখবেন, সেটা আছে অনলাইন শপের লোগো বানানোর লেখায়।
WinningSeller-এ এই কাজটা এক চাপেই হয়। "দোকানের ডিজাইন" পেজে লোগো আপলোড করে "লোগো থেকে কালার নিন" চাপলে লোগোর রং দিয়ে বাটন, ব্যাজ, লিংক আর ঘোষণা বারের রং বসে যায়। বাটনের লেখা সাদা হবে নাকি প্রায় কালো, সেটা ঠিক হয় পড়া যায় কি না হিসাব করে, দরকার হলে রংটা একটু গাঢ় করে নেয়। লোগোর রং আর হেডারের রং প্রায় এক হলে সাবধানও করে দেয়। আর সেভ না করা পর্যন্ত কিছুই বদলায় না, তাই প্রিভিউ দেখে পছন্দ না হলে ছেড়ে দিতে পারেন।
লেখা পড়া যায় না কেন, কন্ট্রাস্ট মানে কী?
কন্ট্রাস্ট মানে লেখা আর তার পেছনের রঙের মধ্যে আলো-অন্ধকারের পার্থক্য। কোনটা লাল আর কোনটা সবুজ, সেটা এখানে আসল কথা না। আসল কথা হলো একটা কতটা উজ্জ্বল আর আরেকটা কতটা গাঢ়। লাল ব্যানারে গোলাপি লেখা চোখে আলাদা রং মনে হয়, কিন্তু দুটোর উজ্জ্বলতা কাছাকাছি বলে অক্ষরগুলো মিলেমিশে যায়।
এই পার্থক্যটা একটা সংখ্যা দিয়ে মাপা যায়, ১:১ থেকে ২১:১ পর্যন্ত। একই রঙের ওপর একই রং হলো ১:১, মানে কিছুই পড়া যায় না। সাদার ওপর কালো হলো ২১:১, সবচেয়ে পরিষ্কার। ওয়েবে লেখা পড়ার মাপকাঠি দেয় W3C, যাদের নিয়মের নাম WCAG। w3.org-এ WCAG 2.2-তে লেখা আছে, সাধারণ লেখার কন্ট্রাস্ট অন্তত ৪.৫:১ হতে হবে। বড় লেখার জন্য অন্তত ৩:১ হলেই চলে, আর বড় মানে ১৮ পয়েন্ট (মোটামুটি ২৪ পিক্সেল) বা ১৪ পয়েন্ট বোল্ড (মোটামুটি ১৮.৫ পিক্সেল)। বাটনের মতো জিনিস চিনতে পারার জন্য পাশের রঙের সাথে অন্তত ৩:১ লাগবে, এটাও একই নিয়মে আছে।
মাপার জন্য কোনো সফটওয়্যার কিনতে হবে না। WebAIM নামের একটা প্রতিষ্ঠানের ফ্রি Contrast Checker আছে, গুগলে "WebAIM contrast checker" লিখলেই পাবেন। লেখার রঙের কোড একটা ঘরে, পেছনের রঙের কোড আরেকটা ঘরে বসান। সাথে সাথে সংখ্যাটা দেখায়, আর সাধারণ লেখা, বড় লেখা আর বাটনের মতো জিনিসে পাস নাকি ফেল, সেটাও লিখে দেয়।
WCAG-এর হিসাবে কয়েকটা চেনা জোড়ার সংখ্যা দেখুন, WebAIM-এর চেকারে বসালেও মোটামুটি এই সংখ্যাই আসবে। লাল (#dc2626) ব্যানারে হালকা গোলাপি (#f9a8d4) লেখা হয় মাত্র ২.৬৬:১, বড় হেডিংয়ের জন্যও কম। হলুদ (#facc15) ব্যাকগ্রাউন্ডে সাদা লেখা ১.৫৩:১, প্রায় অদৃশ্য। অথচ একই হলুদে প্রায় কালো (#111111) লেখা দিলে হয় ১২.৩৩:১। আর সাদা পেজে হালকা ধূসর (#9ca3af) লেখা, যেটা অনেকে ডেলিভারি চার্জ বা ছোট শর্ত লিখতে দেন, সেটা ২.৫৪:১।
এখান থেকে একটা সোজা নিয়ম বানিয়ে নিন। দাম, ডেলিভারি চার্জ আর সাধারণ লেখা ৪.৫:১-এর নিচে হলে রং বদলান, কোনো তর্ক ছাড়াই। বড় হেডিং ৩:১-এর নিচে নামতে দেবেন না। আর ছোট বাংলা লেখায় পারলে ৭:১-এর কাছাকাছি রাখুন। বাংলা অক্ষরে যুক্তাক্ষর, রেফ আর কার-চিহ্নের সূক্ষ্ম দাগ থাকে। কন্ট্রাস্ট কম হলে সবার আগে এই দাগগুলোই হারায়, তখন "ক্ষ" আর "স্ত" আলাদা করা কঠিন হয়ে যায়।
রোদ এই সমস্যাটাকে আরও বাড়িয়ে দেয়। বাইরে ফোনের স্ক্রিন এমনিতেই ফ্যাকাশে দেখায়, অনেকে আবার চার্জ বাঁচাতে ব্রাইটনেস কমিয়ে রাখেন। তখন ঘরের ভেতরে যে লেখা কোনোরকমে পড়া যাচ্ছিল, সেটা আর পড়াই যায় না। আপনার অ্যাড তো মানুষ রাস্তায়, বাসে আর দোকানে বসেই দেখেন।
অর্ডার বাটনের রং কেমন হলে চোখে পড়ে?
লাল বাটন ভালো নাকি সবুজ, এই তর্কের উত্তর কোনো একটা রং না। বাটন চোখে পড়ে তিনটা কারণে। প্রথমে দেখুন, বাটনের রং পেজের আর কোথাও বেশি আছে কি না। তারপর দেখুন, বাটনটা ব্যাকগ্রাউন্ড থেকে স্পষ্ট আলাদা কি না। আর শেষে দেখুন, তার ওপরের লেখা পরিষ্কার পড়া যায় কি না। এই তিনটা ঠিক থাকলে লাল, সবুজ, নীল যেকোনোটাই কাজ করে।
সবচেয়ে বেশি ভুল হয় শেষেরটায়, মানে বাটনের লেখায়। উজ্জ্বল কমলা আর হালকা সবুজ বাটন দেখতে ঝকঝকে, কিন্তু তার ওপর সাদা লেখা দিলে প্রায়ই ফেল করে। কমলা (#f97316) বাটনে সাদা লেখা ২.৮:১, আর হালকা সবুজ (#22c55e) বাটনে সাদা লেখা ২.২৮:১। একই রঙের একটু গাঢ় শেড নিলেই সমস্যা মিটে যায়। গাঢ় কমলা (#c2410c) বাটনে সাদা লেখা ৫.১৮:১, আর গাঢ় সবুজ (#15803d) বাটনে ৫.০২:১। রং প্রায় একই রইল, শুধু লেখাটা পড়া গেল।
পেজের সব অর্ডার বাটন এক রঙের রাখুন। প্রথম স্ক্রিনের বাটন, অফারের নিচের বাটন আর ফর্মের শেষের বাটন যদি তিন রঙের হয়, কাস্টমার দ্বিধায় পড়েন কোনটা আসল। একবার যখন তিনি বুঝে যান "এই রং মানে অর্ডার", তখন পেজের যেখানেই থাকুন, চোখ ওই রংটাই খোঁজে। এজন্যই মূল রংটা অন্য কোথাও বেশি খরচ করবেন না।
এবার টাকার হিসাবটা দেখুন। নিচের সংখ্যাগুলো শুধু উদাহরণ, কোনো দোকানের আসল হিসাব না। ধরুন আপনার অ্যাডে একটা ক্লিকে খরচ পড়ছে ৫ টাকা, আর দিনে ২০০ জন পেজে আসছেন। মানে দিনে ১,০০০ টাকার ডলার স্পেন্ড। এর মধ্যে মাত্র ৩০ জন যদি বাটন খুঁজে না পেয়ে বা দাম পড়তে না পেরে ফিরে যান, তাহলে দিনে ১৫০ টাকা আর মাসে ৪,৫০০ টাকা গেল এমন মানুষের পেছনে, যাঁরা আপনার অফারটাই পড়তে পারেননি। এঁদের মধ্যে কয়জন সত্যিই কিনতেন, সেটা কেউ জানে না। কিন্তু রং ঠিক করতে এক টাকাও লাগে না, তাই এই ঝুঁকিটা রেখে দেওয়ার কোনো মানে হয় না।
বাটনের লেখাও রঙের মতোই জরুরি। "সাবমিট" না লিখে লিখুন "ক্যাশ অন ডেলিভারিতে অর্ডার করুন", আর বাটনটা এত বড় রাখুন যেন বুড়ো আঙুলে সহজে চাপা যায়। পুরো পেজে আর কী কী লাগে, সেটা আছে এক প্রোডাক্টের ল্যান্ডিং পেজের ৭টা জিনিসের লেখায়।
খাবার, ফ্যাশন, গ্যাজেট আর বিউটির শপে কোন রং মানায়?
শুরুতেই একটা সত্যি কথা বলে রাখি। "লাল দেখলে মানুষ তাড়াতাড়ি কেনে", "নীল দেখলে বিশ্বাস করে", এমন অনেক দাবি ইন্টারনেটে ঘোরে। এগুলোকে মাপা নিয়ম হিসেবে ধরবেন না। নিচের জোড়াগুলো শুধু পরামর্শ, প্রোডাক্টের সাথে দেখতে মানায় বলে দিলাম। প্রতিটা মূল রঙে সাদা লেখা ৪.৫:১ পার হয়, আর প্রতিটা হাইলাইট রঙে লেখা দিতে হবে প্রায় কালো।
| শপের ধরন | মূল রং (বাটন, সাদা লেখা) | হাইলাইট (কালো লেখা) |
|---|---|---|
| মধু, ঘি, মসলা, খেজুর | সোনালি-বাদামি #b45309 | হলুদ #f59e0b |
| অর্গানিক খাবার, চা, হারবাল | গাঢ় সবুজ #15803d | লেবু সবুজ #a3e635 |
| শাড়ি, থ্রি-পিস, গয়না | মেরুন #9f1239 | সোনালি #fbbf24 |
| পাঞ্জাবি, ছেলেদের জিনিস, টুলস | গাঢ় নীল #1d4ed8 | হলুদ #f59e0b |
| ফোন, স্মার্টওয়াচ, গ্যাজেট | প্রায় কালো নীল #0f172a | উজ্জ্বল আকাশি #22d3ee |
| স্কিনকেয়ার, কসমেটিক | গোলাপি #db2777 | হালকা গোলাপি #fbcfe8 |
| ঘর, রান্নাঘর, বেবি কেয়ার | টিল #0f766e | কমলা #fb923c |
| ঈদের অফার, ফ্ল্যাশ সেল | লাল #dc2626 | হলুদ #facc15 |
কাপড়ের দোকানে একটা বাড়তি সাবধানতা আছে। কাপড়ের রংটাই আপনার আসল প্রোডাক্ট, তাই পেজের রং যেন কাপড়ের রংকে ঢেকে না দেয়। খুব রঙিন ব্যাকগ্রাউন্ডের ওপর একটা থ্রি-পিসের ছবি রাখলে চোখ কাপড়ের রং ভুল বোঝে। পরে পার্সেল খুলে কাস্টমার বলেন "ছবির সাথে মেলে না", আর পার্সেল ফেরত আসে। তাই কাপড়ের পেজে ব্যাকগ্রাউন্ড সাদা বা হালকা ধূসর রাখুন, রং থাকুক শুধু বাটন আর অফারে।
গ্যাজেটের পেজে গাঢ় ব্যাকগ্রাউন্ড দেখতে দামি লাগে, এটা ঠিক। তবে তখন লেখা হবে সাদা বা খুব হালকা, আর সাধারণ পেজের চেয়ে একটু বড়। গাঢ় ব্যাকগ্রাউন্ডে চিকন ছোট বাংলা লেখা রোদে সবার আগে হারিয়ে যায়। বিউটির দোকানে আরেকটা ভুল খুব দেখা যায়। হালকা গোলাপি সুন্দর, কিন্তু সেটা ব্যাকগ্রাউন্ড বা ব্যাজের রং, লেখার রং না। সাদার ওপর হালকা গোলাপি (#fbcfe8) লেখা মাত্র ১.৩৮:১।
যে রঙের ভুলে মোবাইলে পেজ নষ্ট হয়
এই ভুলগুলো ল্যাপটপে ধরা পড়ে না, ধরা পড়ে কাস্টমারের ফোনে। আর প্রতিটা ভুলের দাম আপনি দেন অ্যাডের টাকায় বা ফেরত পার্সেলে।
সবচেয়ে দামি ভুলটা দিয়ে শুরু করি। অনেকে ডেলিভারি চার্জ আর শর্ত লেখেন হালকা ধূসর ছোট অক্ষরে। দেখতে পরিপাটি লাগে, কিন্তু কাস্টমার লাইনটা পড়েনই না। তিনি ভাবেন দাম শুধু প্রোডাক্টের, তারপর দরজায় ডেলিভারি ম্যান বাড়তি টাকা চাইলে রেগে গিয়ে পার্সেল ফেরত দেন। ফেরতের কুরিয়ার চার্জ তখন আপনার ঘাড়ে। যে কথা না জানলে কাস্টমার পার্সেল নেবেন না, সেটা কখনো ধূসর করবেন না।
ব্যানারে আরেকটা ভুল খুব দেখা যায়, ছবির ওপর সরাসরি লেখা বসানো। ব্যানারের ছবিতে কোথাও আলো, কোথাও ছায়া, তাই সাদা লেখার অর্ধেক পড়া যায়, বাকি অর্ধেক মিলিয়ে যায়। ছবির ওপর লেখা দিতে হলে ছবির ওপর একটা হালকা কালো পর্দা দিন, তারপর সাদা লেখা বসান। অথবা লেখাটা ছবির নিচে আলাদা রঙের জায়গায় নিয়ে যান।
কেউ কেউ প্রতিটা হেডিং আলাদা রঙে দেন, ভাবেন রঙিন হলে পেজ জমজমাট লাগবে। আসলে চোখ বুঝতে পারে না কোনটা আগে পড়বে, আর অর্ডার বাটনের রংটাও আর বিশেষ কিছু থাকে না। হেডিং এক রঙের রাখুন, বড়জোর একটা লাইনের দুই-একটা শব্দ মূল রঙে দিতে পারেন।
শুধু রং দিয়ে কথা বোঝানোটাও একটা ফাঁদ। ধরুন স্টক আছে বোঝাতে সবুজ বিন্দু দিলেন আর নেই বোঝাতে লাল বিন্দু, পাশে কোনো লেখা দিলেন না। সবাই রং সমানভাবে দেখেন না। w3.org-এর WCAG-এ পরিষ্কার নিয়ম আছে, রং যেন কোনো তথ্য বোঝানোর একমাত্র উপায় না হয়। সেখানে এটাও বলা আছে, অনেক বয়স্ক মানুষ রং ভালোভাবে দেখতে পান না। তাই রঙের পাশে লিখে দিন "স্টকে আছে" বা "স্টক শেষ"।
শেষ ভুলটা সবচেয়ে সাধারণ, ল্যাপটপে রং বেছে ফোনে একবারও না দেখা। ল্যাপটপের বড় উজ্জ্বল স্ক্রিনে যে রং গাঢ় দেখায়, কম দামের ফোনে সেটা অনেক সময় ফ্যাকাশে আসে। আপনার বেশিরভাগ কাস্টমার পেজটা দেখবেন ফোনেই। তাই চেকটাও করতে হবে ফোনে, কীভাবে করবেন সেটা শেষ অংশে বলেছি।
কোডিং ছাড়া প্রতিটা লেখা আর বাটনের রং চেঞ্জ করবেন যেভাবে
যে প্ল্যাটফর্মেই দোকান চালান, রং বদলানোর একটা ঠিক ক্রম আছে। আগে পুরো দোকানের রং ঠিক করুন, তারপর একটা পেজের, আর একদম শেষে আলাদা আলাদা লেখার। উল্টো দিক থেকে শুরু করলে বিপদ। আগে দশটা লেখার রং হাতে বদলালেন, পরে পুরো দোকানের থিম চেঞ্জ করলেন, তখন সেই দশটা লেখা নতুন রঙের সাথে আর মেলে না। আবার এক এক করে খুঁজে ঠিক করতে হয়।
WinningSeller-এ পুরো দোকানের রং ঠিক হয় "দোকানের ডিজাইন" পেজ থেকে। "এক ক্লিকে স্টাইল" থেকে একটা লুক নিন, তারপর রঙের ঘরগুলোতে বাটন, লেখা, ব্যাকগ্রাউন্ড আর হেডারের রং নিজের মতো ঠিক করুন, লাইভ প্রিভিউতে সাথে সাথে দেখবেন। একটা কথা মনে রাখবেন। রং ঠিক করার পর আবার নতুন স্টাইল নিলে আপনার নিজের বদলানো রংগুলো মুছে যায়, লেখা আর লোগো অবশ্য থেকে যায়। তাই আগে স্টাইল বেছে নিন, তারপর রং।
একটা ল্যান্ডিং পেজের রং পুরো দোকান থেকে আলাদা হওয়ার দরকার পড়ে কোনো উপলক্ষে। ঈদের অফারের পেজ লাল-হলুদে সাজাতে চাইতে পারেন, অথচ বাকি দোকান থাকবে আগের মতো। আর আলাদা একটা লেখা বদলানোর দরকার পড়ে খুব কম জায়গায়, যেমন অফারের দাম বা প্রথম লাইনের বড় কথাটা। সব লেখা আলাদা করে সাজালে আবার সেই পুরনো সমস্যা ফিরে আসে, কিছুই আলাদা করে চোখে পড়ে না।
পেজ আর আলাদা লেখার কাজও WinningSeller-এ নিজের জায়গায় হয়। ল্যান্ডিং পেজের সেটিংসে "এই পেজের নিজের রং" অপশনে প্রধান (বাটন), দ্বিতীয় (অফার সেকশন) আর হাইলাইট রং দিলে শুধু সেই পেজটা নতুন রঙে সাজে, বাকি দোকান যেমন ছিল তেমনই থাকে। এডিটরে কোনো সেকশন সিলেক্ট করলে "লেখা ও ছবি" আর "ডিজাইন" নামে দুটো ট্যাব পাবেন। প্রতিটা লেখার বক্সের পাশে ছোট "Aa" চাপলে সেই লেখার রং, সাইজ, বোল্ড-ইটালিক আর কোন দিকে বসবে সেটা ঠিক করা যায়। "ডিজাইন" ট্যাবে সেকশনের পেছনের রং বা ছবি, ছবির ওপর হালকা কালো পর্দা আর বাটনের রং চেঞ্জ করবেন। কোনো রঙে লেখা ৪.৫:১-এর নিচে নামলে সাথে সাথে লেখা ওঠে "এই রঙে লেখা পড়তে কষ্ট হবে", আর ভুল হলে "আগের মতো করুন" চাপলেই আগের অবস্থায় ফেরে। বাকি ফিচারগুলো এখানে দেখে নিন।
রং বদলের পর ফোনে চেক করবেন যেভাবে
রং বসানোর পর পাঁচ মিনিটের একটা পরীক্ষা করুন। এটা না করলে ভুলটা ধরা পড়বে অ্যাডের টাকা খরচ হওয়ার পরে।
প্রথমে পেজটা নিজের ফোনে খুলুন। হাতের কাছে বাসার কারও পুরনো বা কম দামের ফোন থাকলে সেটাতেও খুলুন, কারণ আপনার কাস্টমারদের অনেকের হাতে ওই রকম ফোনই। ব্রাইটনেস অর্ধেকে নামান, তারপর বারান্দায় বা ছাদে রোদে গিয়ে দাঁড়ান। হাত সোজা করে ফোনটা দূরে ধরে তিনটা জিনিস পড়ার চেষ্টা করুন, প্রোডাক্টের দাম, ডেলিভারি চার্জ আর অর্ডার বাটনের লেখা। কোনোটা পড়তে চোখ কুঁচকাতে হলে সেই রংটা বদলান।
এরপর এমন কাউকে ফোনটা দিন, যিনি পেজটা আগে দেখেননি। শুধু জিজ্ঞেস করুন, "অর্ডার করতে হলে কোথায় চাপবেন?" তিনি যদি পাঁচ সেকেন্ডের মধ্যে আঙুল দিয়ে বাটনটা দেখাতে না পারেন, বাটনের রং বা জায়গা নিয়ে আবার ভাবুন। বাসার ছোট ভাই, পাশের দোকানের মানুষ, যে কেউ হলেই চলে।
শেষে সন্দেহের জোড়াগুলো WebAIM-এর চেকারে বসিয়ে সংখ্যাটা দেখে নিন। চোখ অনেক সময় নিজের পছন্দের রংকে একটু বেশি নম্বর দেয়, কিন্তু সংখ্যা মিথ্যা বলে না। আজ শুধু এটুকু করুন। নিজের দোকানের তিনটা রঙের কোড লিখে ফেলুন, দাম আর বাটনের কন্ট্রাস্ট মেপে দেখুন, আর রোদে দাঁড়িয়ে একবার পেজটা পড়ুন। যে টাকা দিয়ে কাস্টমারকে পেজ পর্যন্ত আনছেন, সেটা যেন একটা রঙের ভুলে নষ্ট না হয়।
সাধারণ প্রশ্ন
ওয়েবসাইটে কয়টা রং রাখা ভালো?
তিনটা রং আর সাথে সাদা ও প্রায় কালো রাখলেই যথেষ্ট। একটা মূল রং বাটনের জন্য, একটা দ্বিতীয় রং অফার বা আলাদা অংশের জন্য, আর একটা হাইলাইট রং ছোট ছোট জিনিসে। এর বেশি রং এলে কোনটা জরুরি সেটা কাস্টমারের চোখ আর ধরতে পারে না।
কালার কোড বা হেক্স কোড কী?
হেক্স কোড হলো
কোন রঙের অর্ডার বাটনে বেশি অর্ডার আসে?
কোনো একটা জাদুর রং নেই। যে রং পেজের আর কোথাও বেশি নেই আর ব্যাকগ্রাউন্ড থেকে স্পষ্ট আলাদা, সেই রঙের বাটনই চোখে পড়ে। সাথে বাটনের লেখা পরিষ্কার পড়া যেতে হবে। এটুকু ঠিক থাকলে লাল, সবুজ বা নীল যেকোনোটাই চলে।
লেখা পড়া যায় কি না কীভাবে বুঝব?
WebAIM-এর ফ্রি Contrast Checker-এ লেখার রং আর পেছনের রঙের হেক্স কোড বসান। সাধারণ লেখার জন্য ৪.৫:১ বা তার বেশি দেখালে ঠিক আছে, বড় হেডিংয়ে ৩:১ হলেও চলে। এর সাথে নিজের ফোনে রোদের মধ্যে একবার পেজটা পড়ে দেখুন।
কালো ব্যাকগ্রাউন্ডের ওয়েবসাইট কি ভালো?
গ্যাজেট বা প্রিমিয়াম জিনিসের পেজে কালো বা গাঢ় নীল ব্যাকগ্রাউন্ড মানায়, তবে তখন লেখা হতে হবে সাদা বা খুব হালকা, আর একটু বড়। গাঢ় ব্যাকগ্রাউন্ডে চিকন ছোট বাংলা লেখা রোদে সবার আগে হারিয়ে যায়। খাবার, কাপড় বা বিউটির দোকানে হালকা ব্যাকগ্রাউন্ডই সাধারণত বেশি আরামের।
লোগোর রং আর ওয়েবসাইটের রং কি এক হতে হবে?
হুবহু এক হতে হবে না, তবে মিল থাকা ভালো। লোগোর সবচেয়ে উজ্জ্বল রংটাই সাধারণত বাটনের রং হয়। সেটা খুব হালকা হলে একটু গাঢ় করে নিন, যেন বাটনের সাদা লেখা পড়া যায়।
আরও পড়ুন
ওয়েবসাইটের মেনু আর ফুটারে কী রাখবেন? অনলাইন দোকানের জরুরি পেজসহ
ওয়েবসাইটের মেনুতে কয়টা লিংক রাখবেন, হেডারে কল আর WhatsApp বাটন কেন, ফুটারে ঠিকানা আর ট্রেড লাইসেন্স নম্বর কোথায় বসবে, আর About, যোগাযোগ, ডেলিভারি ও রিটার্নের পেজে কী লিখবেন। ফোনে দোকান খুলে এক ঘণ্টায় গুছিয়ে নেওয়ার পুরো নিয়ম।
গুগল সার্চ কনসোল কি? দোকানের ওয়েবসাইট গুগলে তুলবেন যেভাবে
গুগল সার্চ কনসোল হলো Google-এর ফ্রি টুল, যেখানে দেখা যায় কোন সার্চে আপনার দোকান আসছে আর কোন পেজ গুগলের লিস্টে আছে। নিজের ডোমেইনে DNS দিয়ে মালিকানা প্রমাণ, sitemap.xml সাবমিট, URL Inspection, "Not indexed" দেখলে কী করবেন, আর কোন পথ দোকানে আসলে কাজ করে না।
বিজনেস ক্যাপশন, ফেসবুকে সেল পোস্টে কী লিখলে অর্ডার আসে
ছবি সুন্দর, তবু ইনবক্সে সবাই শুধু দাম জিজ্ঞেস করে? সেল পোস্টের প্রথম দুই লাইনে কী লিখবেন, ক্যাপশনে কোন পাঁচটা কথা থাকতেই হবে, দাম লিখবেন কি না, নতুন মাল, অফার, স্টকে ফেরা আর রিভিউর চারটা নমুনা, আর কোন কথায় পোস্ট রিপোর্ট খায়।