টেলিগ্রাম, WhatsApp+380637610482
ভ্যালেরি ড্যানিউক
ভ্যালেরি ড্যানিউকডেভেলপারব্যবসার জন্য এআই টুল তৈরি করা হয়। উন্নত মানের। সাশ্রয়ী।Telegram-এ লিখুন
Dub — এই শৈলীর একটি সাইটের পূর্বরূপ

Dub

লিঙ্কের ম্যাট রাইস পেপার কন্ট্রোল প্যানেল

ডাব-এর ভিজ্যুয়াল সিস্টেমে একটি সংযত, প্রায় সম্পাদকীয় SaaS নান্দনিকতা রয়েছে: একটি প্রায়-সাদা ক্যানভাস যা বাইরের দিকে বেরিয়ে থাকা উপাদানের পরিবর্তে পাতলা বর্ডার দিয়ে ধরে রাখা হয়েছে, যেখানে ঘন একরঙা টাইপোগ্রাফি কাঠামোগত সহায়তা প্রদান করে এবং একটিমাত্র উজ্জ্বল নীল রঙ (#2563eb) একটি স্বতন্ত্র ভাব প্রকাশ করে। প্রথম নজরে সারফেসগুলো সমতল এবং ফ্রেমহীন মনে হলেও, প্রতিটি কন্টেইনারে একটি 1px #e5e5e5 মার্জিন রয়েছে, যা একটি মুদ্রিত ডকুমেন্টের অনুভূতি জাগিয়ে তোলে। নিরপেক্ষ রঙের প্যালেটের উপরে ভেসে থাকা একগুচ্ছ রঙিন "পিল" অ্যাকসেন্ট (কমলা, সবুজ, বেগুনি) এবং জাঁকজমকপূর্ণ না হয়েও আত্মবিশ্বাসী ও আধুনিক হেডারের মাধ্যমে একটি স্বতন্ত্র বৈশিষ্ট্য ফুটিয়ে তোলা হয়েছে। কম্পোনেন্টগুলো কম্প্যাক্ট এবং ঘনসন্নিবিষ্ট: 8px গাটার, 12px কার্ড রেডিয়াস, 9999px-এর পিল-আকৃতির লেবেল এবং ভারী, ভরাট বাটনের পরিবর্তে অদৃশ্য কন্ট্রোল।

পৃষ্ঠাটি একটি কেন্দ্র-সারিবদ্ধ লেআউটে তৈরি করা হয়েছে, যার সর্বোচ্চ প্রস্থ প্রায় ১২০০ পিক্সেল। মূল উপাদানটি হলো একটি কেন্দ্র-সারিবদ্ধ টেক্সট ব্লক, যার উপরে একটি বড় প্রোডাক্ট লেআউটের উপরে আনুভূমিকভাবে তিনটি ভাসমান উপাদান (অ্যাফিলিয়েট প্রোগ্রাম, কনভার্সন অ্যানালিটিক্স, শর্ট লিঙ্ক) স্থাপন করা হয়েছে। সেকশনগুলো উল্লম্বভাবে সাজানো হয়েছে এবং এতে সামঞ্জস্যপূর্ণ ৬৪ পিক্সেলের গাটার রয়েছে, যেখানে টোনাল পৃথকীকরণের জন্য পর্যায়ক্রমে সাদা ক্যানভাস এবং #f5f5f5 পেপার হেজ ব্যবহার করা হয়েছে। নিচের অংশে একটি Z-আকৃতির লেআউট ব্যবহার করা হয়েছে: সম্পাদকীয় লেখা মাঝের এক-তৃতীয়াংশে কেন্দ্র-সারিবদ্ধ, এবং ভাসমান UI কার্ডগুলো বাম ও ডান মার্জিনে অ্যাঙ্কর করা, যা একটি অপ্রতিসম, ম্যাগাজিনের মতো ছন্দ তৈরি করে। লোগো ক্লাউডটি একটি সাধারণ ৫x২ গ্রিড, যা পৃষ্ঠার কেন্দ্রে অবস্থিত। নেভিগেশনটি একটি মিনিমালিস্ট টপ বার—বামে লোগো, কেন্দ্রে নেভিগেশন, এবং ডানে দুটি বাটনের একটি গ্রুপ (একটি ঘোস্ট "লগইন" বাটন + একটি ফিল্ড "রেজিস্টার" বাটন)—কোনো ফিক্সড বা মেগা-মেনু ছাড়াই। প্রধান উইন্ডোর ড্যাশবোর্ড লেআউটটি একটি ক্লাসিক দুই-কলামের অ্যাপ লেআউট প্রদর্শন করে: একটি স্থির সাইডবার (প্রায় ২৪০ পিক্সেলের মতো) + একটি কন্টেন্ট এরিয়া, যা ভিজিটরদের স্ক্রল করা শুরু করার আগেই পণ্যের তথ্যের ঘনত্ব নির্ধারণ করে দেয়।

ভিজ্যুয়ালগুলো পণ্য-কেন্দ্রিক, জীবনধারা-কেন্দ্রিক নয়। মূল স্ক্রিনের কেন্দ্রে একটি বড় ড্যাশবোর্ড স্ক্রিনশট রয়েছে, যা একটি সাদা ক্যানভাসের উপর ফ্ল্যাট প্যানেল হিসেবে সাজানো একটি বাস্তব পণ্যের মকআপকে উপস্থাপন করে। এতে একটি সাইডবার নেভিগেশন, ডেটা টেবিল এবং ভাসমান UI এলিমেন্ট রয়েছে। ক্লায়েন্টের লোগোগুলো (যেমন: beehiv, superpower, Chatbase ইত্যাদি) তাদের সোশ্যাল মিডিয়া পারফরম্যান্সকে স্বীকৃতি দেওয়ার জন্য একটি বিবর্ণ ধূসর গ্রিডে প্রদর্শিত হয়। রঙ বাদ দেওয়া হয়েছে যাতে পৃষ্ঠার একমাত্র নীল রঙটিই প্রাধান্য পায়। ভাসমান পার্টনার কার্ডগুলো (ছোট প্রোফাইল এবং আয়/পেমেন্টের তথ্যসহ টাইলস) নিচের সম্পাদকীয় লেখার ব্লকগুলোর চারপাশে ঘোরাফেরা করে, যা লেখার উপর সরাসরি ছায়া ব্যবহার না করেই একটি গভীরতার অনুভূতি তৈরি করে। ডটেড গ্রিড ব্যাকগ্রাউন্ড প্যাটার্নটি একটি স্বতন্ত্র বৈশিষ্ট্য: খুব কম অস্বচ্ছতার ছোট ছোট বিন্দুর একটি পাতলা সারি টেক্সচার এবং একটি ডিজাইন সিস্টেম/অঙ্কন পৃষ্ঠের অনুভূতি তৈরি করে, যা সাইটটির "আধুনিক লিঙ্ক অ্যাট্রিবিউশন প্ল্যাটফর্ম" হিসেবে অবস্থানকে জোর দেয়। আইকনগুলো খুবই সাদামাটা, যেখানে শুধু আউটলাইন ও ফিল ব্যবহার করা হয়েছে এবং ফিচার ট্যাগগুলোর জন্য একটি অ্যাকসেন্ট প্যালেট (ট্যাঞ্জারিন কমলা, ল্যাভেন্ডার বেগুনি, মিন্ট সবুজ) ব্যবহার করা হয়েছে। কোনো ফটোগ্রাফ, ইলাস্ট্রেশন বা থ্রিডি মডেল ব্যবহার করা হয়নি—পণ্যটির ইউজার ইন্টারফেসটি নিজেই একটি ভিজ্যুয়াল ল্যাঙ্গুয়েজ।

প্যালেট

ব্র্যান্ড

  • Electric Blue #2563eb — ব্র্যান্ডের প্রধান রঙটি—লোগো, লিঙ্ক, মূল পারফরম্যান্স সূচক, সক্রিয় অবস্থা এবং আইকনের অলঙ্করণে—ব্যবহার করা হয়। সাদা পটভূমিতে গাঢ় নীল রঙটি সিস্টেমটির একমাত্র দৃশ্যমান আকর্ষণ তৈরি করে।
  • Deep Sapphire #1e40af — অ্যাকশন বাটনের মূল ব্যাকগ্রাউন্ডে, কল টু অ্যাকশনের গাঢ় ফিল—যা অ্যাকশনটিকে নির্দেশ করে এমন একমাত্র রঙ—মনোযোগ আকর্ষণের জন্য পরিমিতভাবে ব্যবহার করা হয়।

নিরপেক্ষ

  • Canvas White #ffffff — পেজের ব্যাকগ্রাউন্ড, কার্ড সারফেস এবং পপ-আপ প্যানেল হলো প্রতিটি স্ক্রিনের মূল ভিত্তি।
  • Paper Mist #f5f5f5 — নেস্টেড কার্ড, অতিরিক্ত প্যানেল এবং ফিল-এর ক্ষেত্রে হোভার করলে রঙের সূক্ষ্ম পরিবর্তন ঘটে।
  • Ash #e5e5e5 — কার্ড, ইনপুট কানেক্টর এবং ডিভাইডারগুলোর ওপরের পাতলা বর্ডারগুলোই হলো সেই কাঠামোগত রেখা যা পুরো সিস্টেমটিকে একত্রে ধরে রাখে।
  • Smoke #d4d4d4 — নির্বাচিত কন্টেইনারগুলির জন্য আরও স্পষ্ট বর্ডার এবং অতিরিক্ত বাটনের আউটলাইন।
  • Pebble #c8c8c8 — মাঝারি কনট্রাস্টযুক্ত বর্ডার, কন্ট্রোল আউটলাইন এবং স্ট্রাকচারাল ডিভাইডার। কল টু অ্যাকশন-এর জন্য এই রঙটি প্রাথমিক রঙ হিসেবে ব্যবহার করা উচিত নয়।
  • Midnight Ink #0a0a0a — সর্বোচ্চ কনট্রাস্টের জন্য বাটনগুলোর মূল লেখা, হাইলাইট করা বাটন এবং নেভিগেশন টেক্সট প্রায় কালো রঙের করা হয়েছে।

টাইপোগ্রাফি

১১ থেকে ৪৮ পিক্সেল · ৯টি ধাপ

  • Satoshi — প্রতিস্থাপন: Inter (weight 500 · রূপরেখা 500 · হেডিং প্রদর্শন – শুধুমাত্র হেডিং এবং সেকশন টাইটেলের জন্য ৩৬–৪৮ পিক্সেল লাইনে ব্যবহৃত হয়। ফন্ট ওয়েট – ৫০০ (মিডিয়াম, বোল্ড নয়): হেডিংগুলো আত্মবিশ্বাসী ও আধুনিক দেখায়, কিন্তু কখনোই অতিরিক্ত জাঁকজমকপূর্ণ নয়। সাতোশির জ্যামিতিক অনুপাত টাইপফেসটিকে একটি হালকা সম্পাদকীয় ও আধুনিক অনুভূতি দেয়, যা ইন্টার-এর মূল লেখায় ফুটিয়ে তোলা সম্ভব নয়।
  • Inter — প্রতিস্থাপন: Inter (native) · রূপরেখা 400, 500, 600 · বডি কপি, UI লেবেল, নেভিগেশন, সাবহেডিং এবং মাইনর হেডিং। ইন্টার হলো এর প্রধান চালিকাশক্তি, যা ১১ পিক্সেলের মাইক্রো-লেবেল থেকে শুরু করে ৩০ পিক্সেলের সেকেন্ডারি হেডিং পর্যন্ত সবকিছু পরিচালনা করে। বডি কপির জন্য ডিফল্ট ওয়েট হলো ৪০০, হাইলাইট করা এলিমেন্ট এবং বাটন লেবেলের জন্য ৫০০, এবং গুরুত্বপূর্ণ UI লেবেলের জন্য ৬০০ সংরক্ষিত থাকে। ১.৫ লাইন হাইট সহ ১৬ পিক্সেল হলো সবচেয়ে বেশি ব্যবহৃত সিঙ্গেল-স্টেপ সাইজ (১২২০ বার), যা নিশ্চিত করে যে ১৬ পিক্সেলই হলো বডি কপির আদর্শ সাইজ।
  • Geist Mono — প্রতিস্থাপন: JetBrains Mono or IBM Plex Mono · রূপরেখা 400, 500 · কোড স্নিপেট, টেকনিক্যাল মেটাডেটা এবং এমবেডেড মনোস্পেসড টোকেনগুলো কোড ব্লকে ১২-১৪ পিক্সেল এবং বড় কোড ডিসপ্লে এলিমেন্টে ২৪ পিক্সেল আকারে ব্যবহার করা হয়। এটি ডাব-এর প্রোডাক্ট পজিশনিং-এর সাথে সামঞ্জস্য রেখে ডেভেলপার টুলটির বিশ্বাসযোগ্যতা নিশ্চিত করে।

ব্যবধান এবং ফর্ম

উদ্দেশ্যঅর্থ
ঘনত্বগড়
প্রাথমিক পদক্ষেপ8px
বোতামের ব্যাসার্ধ8px
কার্ডের ব্যাসার্ধ12px
ছায়ানা - ছায়ার পরিবর্তে সীমানা
বিভাগগুলির মধ্যে64px
পৃষ্ঠার প্রস্থ1200px

এআই আপনার ওয়েবসাইটটি Dub স্টাইলে তৈরি করবে এবং তাতে তথ্য যোগ করবে।

  • Instagram, TikTok, Facebook লিঙ্কের মাধ্যমে পণ্য এবং পোস্ট দিয়ে পূরণ করুন।
  • আপনার পুরোনো সাইট থেকে কন্টেন্ট স্থানান্তর করুন—শুধু ঠিকানাটি উল্লেখ করুন।
  • সেরা ইঞ্জিন React ( Next.js)-এ তৈরি আধুনিক ডিজাইন, সাথে রয়েছে সার্ভার রেন্ডারিং এবং এসইও অপটিমাইজেশন।
  • সার্চ রেজাল্ট এবং নিউরাল নেটওয়ার্ক সুপারিশের জন্য সম্পূর্ণ স্বয়ংক্রিয় এসইও অপ্টিমাইজেশন।

একই রকম শৈলী

  • ElevenLabs — উষ্ণ ক্রিম রঙের ছোঁয়ায় তোলা একটি আলোকচিত্র-প্রবন্ধ, সাথে রয়েছে সূক্ষ্ম শিরোনাম। বাউহাউস-শৈলীর একটি নোটবুক—ডিমের খোসার মতো রঙের কাগজ, কালো কালি, এবং পণ্য প্রদর্শনের জন্য একটিমাত্র বেগুনি ও কমলা রঙের অলঙ্করণ।
  • Awesomic — সম্পাদকীয় জিঙ্ক মেশ, যাতে কনফেটির কথা মনে করিয়ে দেয় এমন কমলা রঙের যতিচিহ্ন রয়েছে।
  • Monad — উষ্ণ পার্চমেন্টে সম্পাদকীয় প্রযুক্তিগত জার্নাল
  • Seline Analytics — উষ্ণ কাগজের উপর একটি শান্ত বিশ্লেষণাত্মক টেবিল
  • Notion — দুপুরের রোদে একটি উষ্ণ কাগজের নোটবুক
  • Anthropic — উষ্ণ ভেলাম কাগজে ছাপা একটি বৈজ্ঞানিক ক্ষেত্র-জার্নাল—শান্ত হাতির দাঁতের মতো পৃষ্ঠতল, সেরীফযুক্ত সম্পাদকীয় শিরোনাম, এবং একটিমাত্র মাটির ছোঁয়া যা কেবল প্রয়োজনের মুহূর্তেই ফুটে ওঠে।
  • Calendly — ঠান্ডা মার্বেলের উপর গাঢ় নীল কালি
  • Augen Pro — অ্যাপলের সাদা উপস্থাপনাটিতে একরঙা পরিসরে একমাত্র অ্যাকসেন্ট হিসেবে একটি পরিচ্ছন্ন, ওজনহীন, বৈদ্যুতিক নীল রঙ ব্যবহার করা হয়েছে।
  • Antimetal — ক্রিম রঙের কাগজে ছাপা একটি সম্পাদকীয় ইতিবৃত্ত—একটি বৈজ্ঞানিক জার্নালের শান্ত সকাল, যেখানে সংযম আত্মবিশ্বাস প্রকাশ করে এবং সেরিফ ফন্টগুলোই মূল ভার বহন করে।
  • Perk — গরম পার্চমেন্ট পেপারে বৈদ্যুতিক চুন
  • Ditto — সূর্যালোকিত একটি কর্মশালায় বুনো ফুলের নমুনা তৈরি হচ্ছে। উষ্ণ ক্রিম রঙের পৃষ্ঠতল, একটি প্রাণবন্ত হলুদ ভিত্তি রঙ, গাঢ় নেভি ব্লু কালি, এবং শিল্পকর্মটির পেছনে ফুটে ওঠা জৈব রঙের রূপ।
  • Officevibe — উষ্ণ ক্রিম রঙের কাগজে ছাপা একটি সম্পাদকীয় পত্রিকা। কল্পনা করুন, মানব সম্পদ ব্যবস্থাপনার উপর একটি চিন্তাশীল প্রবন্ধ, যা একটি পণ্য হিসেবে উপস্থাপিত—একটি আধুনিক নীল ইন্টারফেসের মধ্য দিয়ে ফিসফিস করে কথা বলছে কারসিভ সেরিফ ফন্ট।