
Duolingo
সাদা কাগজের উপর খেলাধুলাপূর্ণ ক্লাসের মাসকট
ডুয়োলিঙ্গোর ইন্টারফেসটি একটি শিশুদের ছবির বইয়ের মতো করে ডিজাইন করা হয়েছে: একটি সাদা কাগজের ক্যানভাস, মোটা ও গোলাকার ফন্ট এবং একটিমাত্র গাঢ় সবুজ রঙ যা সঙ্গে সঙ্গে 'সঠিক উত্তর'-এর কথা মনে করিয়ে দেয়। মূল লেখাটি একটি শান্ত মধ্যম-ধূসর রঙের, যা সবুজ এবং এর সাথে থাকা নীল রঙকে সমস্ত আবেগ প্রকাশের কাজটি করতে দেয়—সবুজ রঙটি অগ্রগতি এবং শিরোনামের জন্য, আর নীল রঙটি ক্লিকযোগ্য লিঙ্ক এবং অতিরিক্ত কাজের জন্য। কম্পোনেন্টগুলো বড়ি বা মোটা, গোলাকার কোণার মতো আকৃতির এবং এগুলোর চারপাশে পুরু কালো বা রঙিন বর্ডার রয়েছে, যা প্রতিটি বাটনকে একটি সাধারণ UI কন্ট্রোলের চেয়ে পৃষ্ঠায় লাগানো স্টিকারের মতো বেশি মনে করায়।
সেকশনগুলো পৃষ্ঠার সম্পূর্ণ প্রস্থ জুড়ে থাকে এবং একটিমাত্র কলামে উল্লম্বভাবে সাজানো থাকে, যার প্রতিটির উচ্চতা প্রায় ৮০০ পিক্সেল। মাঝখানে রাখলে কন্টেন্টের সর্বোচ্চ প্রস্থ প্রায় ১ পিক্সেল হয়। বাম দিকে লেখা এবং ডান দিকে চিত্র পর্যায়ক্রমে থাকে, যা সেকশনগুলোর মধ্যে পর্যাপ্ত উল্লম্ব স্থান (৮০ পিক্সেল) প্রদান করে। এখানে কোনো গ্রিড কার্ড বা একাধিক কলামের বিন্যাস নেই—প্রতিটি সেকশন হলো একটি একক টেক্সট ব্লক এবং তার সাথে একটি একক চিত্র। নেভিগেশন হলো একটি মিনিমালিস্ট টপ বার, যেখানে একটি লোগো এবং ভাষা নির্বাচক রয়েছে, যা সেকশনগুলোর মধ্যে একটি স্থির বার হিসেবে প্রদর্শিত হয়। ফুটারটি হলো একটি সবুজ স্ট্রাইপ যা পৃষ্ঠার সম্পূর্ণ প্রস্থ জুড়ে বিস্তৃত। এর ছন্দটি সম্পাদকীয় ধরনের: শিরোনাম, অনুচ্ছেদ, কল টু অ্যাকশন, চিত্র, পুনরাবৃত্তি।
বইটির অলঙ্করণ শৈলীতে গোলাকার জ্যামিতিক আকৃতি, গাঢ় কালো আউটলাইন এবং গোলাপী, বেগুনি, হলুদ, কমলা ও নীল রঙের একটি পরিপূরক প্যালেটসহ সমতল, দ্বিমাত্রিক মাসকট চরিত্র (ডুয়েট নামের পেঁচা এবং বিভিন্ন মানব আকৃতি) ব্যবহার করা হয়েছে, যা বইটির ইন্টারফেসে কখনও দেখা যায় না। প্রতিটি বিভাগের ডানদিকে, সম্পূর্ণ সাদা পটভূমিতে, কোনো কন্টেইনার বা ব্যাকগ্রাউন্ড ছাড়াই অলঙ্করণগুলো লেখার পাশে স্থাপন করা হয়েছে। এখানে কোনো ছবি নেই—চরিত্রগুলোই দৃশ্যমান বিষয়বস্তু হিসেবে কাজ করে। মাসকটগুলোর শৈলীর সাথে সামঞ্জস্য রেখে আইকনোগ্রাফিতে মোটা আউটলাইন ব্যবহার করা হয়েছে। ছবির ঘনত্ব মাঝারি: প্রতিটি বিভাগে চরিত্রটির একটি বড় অলঙ্করণ রয়েছে এবং পৃষ্ঠার বাকি অংশ টাইপোগ্রাফি ও সাদা জায়গার জন্য বরাদ্দ।
প্যালেট
ব্র্যান্ড
- Eager Green
#58cc02— লিঙ্ক, ট্যাগ এবং সংক্ষিপ্ত বাক্যাংশ হাইলাইট করতে সবুজ রঙ ব্যবহার করা হয়। কল টু অ্যাকশনের জন্য এটিকে প্রধান রঙ হিসেবে ব্যবহার করা উচিত নয়। - Storybook Green
#d7ffb8— হালকা পৃষ্ঠতলে মৃদু হাইলাইট, ফুটারের নেভিগেশন লেবেলগুলোর পেছনে সূক্ষ্ম পটভূমির আভা।
নিরপেক্ষ
- Spark Blue
#1cb0f6— লিঙ্ক, ট্যাগ এবং সংক্ষিপ্ত বাক্যাংশ হাইলাইট করতে নীল রঙ ব্যবহার করা হয়। কল টু অ্যাকশনের জন্য এটিকে প্রধান রঙ হিসেবে ব্যবহার করা উচিত নয়। - Fresh Leaf
#a5ed6e— লিঙ্ক, ট্যাগ এবং সংক্ষিপ্ত বাক্যাংশ হাইলাইট করতে সবুজ রঙ ব্যবহার করা হয়। কল টু অ্যাকশনের জন্য এটিকে প্রধান রঙ হিসেবে ব্যবহার করা উচিত নয়। - Night Ink
#000437— লিঙ্ক, ট্যাগ এবং সংক্ষিপ্ত বাক্যাংশগুলো বেগুনি রঙে হাইলাইট করা হয়েছে। - Paper White
#ffffff— সবুজ/গাঢ় পটভূমিতে পৃষ্ঠার ক্যানভাস, কার্ডবোর্ডের পৃষ্ঠতল এবং বোতামের লেখা। - Charcoal
#4b4b4b— হিরো হেডার ও মূল লেখা - সার্বজনীন গাঢ় রঙের লেখা যা রঙিন শিরোনামগুলোকে সুস্পষ্ট করে তোলে। - Pencil Gray
#777777— পাঠ্যের মূল অনুচ্ছেদগুলো অনুজ্জ্বল অক্ষর দিয়ে চিহ্নিত করা হয় এবং গৌণ বর্ণনামূলক লেখা পটভূমিতে চলে যায়, ফলে রঙিন উপাদানগুলোই প্রধান হয়ে ওঠে।
টাইপোগ্রাফি
১৩ থেকে ৬৪ পিক্সেল · ৭টি ধাপ
- feather — প্রতিস্থাপন: Inter · রূপরেখা 700 · "Free. Fun. Effective" এবং "Duolingo English Test"-এর মতো সেকশন হেডিংগুলো একটি কাস্টম রাউন্ডেড ফন্ট ব্যবহার করে দেখানো হয়েছে, যা ব্র্যান্ডটিকে এর মজাদার, বন্ধুত্বপূর্ণ, মাসকট-সদৃশ স্টাইল প্রদান করে। উপযুক্ত ওয়েটে "Feather Bold" বা "Nunito Black" দিয়ে প্রতিস্থাপন করুন। লেটার স্পেসিং: -0.0200em
- duolingo-sans — প্রতিস্থাপন: Inter · রূপরেখা 500 · মূল অনুচ্ছেদ এবং নেভিগেশন লিঙ্কের জন্য ১৭ পিক্সেল/৫০০ পিক্সেলের একটি জ্যামিতিক স্যান্স-সেরিফ ফন্ট ব্যবহার করুন, যা পাঠযোগ্য থাকে এবং এর ৭০০ লাইন ওয়েট গুরুত্বপূর্ণ বিষয়গুলোকে তুলে ধরতে সাহায্য করে। এর পরিবর্তে 'DIN Next', 'Inter', বা 'Nunito Sans' ব্যবহার করুন।
- duolingo-sans — প্রতিস্থাপন: Inter · রূপরেখা 700 · সব ক্ষেত্রে ওয়েট-৭০০ মান ব্যবহার করা হয়েছে: নেভিগেশন লেবেলের বড় হাতের অক্ষর ১৫ পিক্সেল (এলএস ০.০৫৩০ইএম), উপ-শিরোনামের জন্য ১৯ পিক্সেল ও ৩২ পিক্সেল এবং লিঙ্কের উপর জোর দেওয়ার জন্য ১৩ পিক্সেল। মূল লেখার ফন্টটিই ব্যবহার করা হয়েছে—দৃশ্যমান পার্থক্যটি ফন্টের পরিবর্তনে নয়, বরং ওয়েটে। লেটার স্পেসিং: নেভিগেশন লেবেলের বড় হাতের অক্ষরের জন্য ০.০৫৩০ইএম।
ব্যবধান এবং ফর্ম
| উদ্দেশ্য | অর্থ |
|---|---|
| ঘনত্ব | ঘন |
| প্রাথমিক পদক্ষেপ | 12px |
| বোতামের ব্যাসার্ধ | 12px |
| কার্ডের ব্যাসার্ধ | 12px |
| ছায়া | না - ছায়ার পরিবর্তে সীমানা |
| বিভাগগুলির মধ্যে | 80-120px |
| পৃষ্ঠার প্রস্থ | 1200px |
এআই আপনার ওয়েবসাইটটি Duolingo স্টাইলে তৈরি করবে এবং তাতে তথ্য যোগ করবে।
- Instagram, TikTok, Facebook লিঙ্কের মাধ্যমে পণ্য এবং পোস্ট দিয়ে পূরণ করুন।
- আপনার পুরোনো সাইট থেকে কন্টেন্ট স্থানান্তর করুন—শুধু ঠিকানাটি উল্লেখ করুন।
- সেরা ইঞ্জিন React ( Next.js)-এ তৈরি আধুনিক ডিজাইন, সাথে রয়েছে সার্ভার রেন্ডারিং এবং এসইও অপটিমাইজেশন।
- সার্চ রেজাল্ট এবং নিউরাল নেটওয়ার্ক সুপারিশের জন্য সম্পূর্ণ স্বয়ংক্রিয় এসইও অপ্টিমাইজেশন।
একই রকম শৈলী
- Family — ক্রিম পার্চমেন্টে ছাপা একটি রূপকথার পাতা
- Say Briefly — ক্রিম পেপারে ক্রিয়েটিভ এজেন্সির স্কেচবুক
- Flying Papers — শনিবার সকালের কার্টুনে স্বীকারোক্তি
- Portrait — ক্রিম রঙের কাগজে পোলারয়েড ছবিতে ধারণ করা স্মৃতির এক দেয়াল। একটি উজ্জ্বল, ক্রিম রঙের স্ক্র্যাপবুক, যেখানে গাঢ় নীল কালিই একমাত্র লেখা, একমাত্র কাঠামো রেখা এবং একমাত্র ফ্রেমের রঙ—সাথে হাতে আঁকা একটিমাত্র রামধনু, যা একবার 'Register' বোতামে এবং বাঁকা অক্ষরে লেখা 'forever' শব্দটির উপর দেখা যায়, এবং আর কখনও নয়।
- Karl — একটি রৌদ্রোজ্জ্বল দিনে ত্রিমাত্রিক পপ-আপ বইয়ের মতো ডায়োরামা।
- Navigate — একটি বোর্ডে লাগানো স্টিকারের একটি বড় সেট: বড়, অদ্ভুত আকারের ফন্ট, সবগুলোই ট্যাবলেটের আকারে এবং পাঁচটি বহুরঙা আইকন, যা একটি লোগোর মতো পুনরাবৃত্ত হয়েছে।
- Monte — উপকূলে মরিচা ধরা আভার সকাল
- MotherDuck — ক্রিম রঙের কাগজের উপর রঙিন পেন্সিল দিয়ে টার্মিনাল কোড করা হয়েছে।
- Wise Design — বিশ্বের কোনো এক রাস্তার ধারে একটি নিয়ন আলোয় আলোকিত বাজারের দোকান—ভিড়ভরা বাজারের মধ্যে উজ্জ্বল সবুজ সাইনবোর্ডটি যেন চিৎকার করে উঠছে, আর তার পেছনে নিভৃতে ভেসে উঠছে একটি পরিমার্জিত পণ্যের ইউজার ইন্টারফেস।
- Hatch — হাতে আঁকা, সামিজদাত-শৈলীর নকশার সাথে প্যাস্টেল রঙের ক্যান্ডি বাটির মিশ্রণ। পুদিনা রঙের ছোঁয়া, কনফেটি ডট এবং বড়ির মতো দেখতে কর্মের আহ্বানে সজ্জিত ক্রিম রঙের কাগজের ক্যানভাস, যেখানে একটি বড়, মোটা সেরিফ ফন্ট মজার ইঙ্গিত দেয় এবং এক কোণে একটি নীল মাসকট চোখ মারে।
- Superr — বিকেলের নরম আলোয় একটি উষ্ণ স্কুলের খাতা। একটি ক্রিম রঙের পাতা, ঢাকনাবিহীন একটি কমলা রঙের মার্কার, আর তুলে ফেলার অপেক্ষায় থাকা ল্যামিনেট করা নামের স্টিকারের একটি স্তূপ।
- Mews — ভোরের আলোয় গোলাপি আভায় ছেয়ে থাকা একটি হসপিটালিটি কন্ট্রোল সেন্টার। সাদা দেয়াল আর সূর্যালোকে উদ্ভাসিত কর্মক্ষেত্র, যেখানে প্রতিটি স্ক্রিনকে সংজ্ঞায়িত করেছে গাঢ় কালো টাইপ, উষ্ণ ক্রিম রঙের কার্ড এবং একটিমাত্র উজ্জ্বল গোলাপি অ্যাকশন বাটন—যা কর্পোরেট সংযমের চেয়ে বরং এক ধরনের উচ্ছল আত্মবিশ্বাস প্রকাশ করে।