
Duolingo
نماد کلاس بازیگوش روی کاغذ سفید
رابط کاربری دولینگو مانند یک کتاب مصور کودکانه طراحی شده است: یک بوم کاغذی سفید، فونت گرد و پهن و یک رنگ سبز غنی که بلافاصله "پاسخ صحیح" را تداعی میکند. متن اصلی دارای تُنهای آرامشبخش خاکستری میانه است که به رنگ سبز و آبیِ مکمل آن اجازه میدهد تا تمام کارهای احساسی را انجام دهند - سبز برای پیشرفت و عنوانها، آبی برای لینکهای قابل کلیک و اقدامات اضافی. اجزا به شکل قرص یا گوشههای گرد و ضخیم با حاشیههای ضخیم سیاه یا رنگی هستند و باعث میشوند هر دکمه بیشتر شبیه یک برچسب چسبیده به صفحه باشد تا یک کنترل رابط کاربری مسطح.
بخشها تمام عرض صفحه را اشغال میکنند و به صورت عمودی در یک ستون واحد، هر کدام تقریباً ۸۰۰ پیکسل ارتفاع دارند، چیده شدهاند. حداکثر عرض محتوا تقریباً ۱ پیکسل در مرکز است. متن در سمت چپ و تصاویر در سمت راست به طور متناوب قرار میگیرند و فضای عمودی کافی (۸۰ پیکسل بین بخشها) را فراهم میکنند. هیچ کارت شبکه یا طرحبندی چند ستونی وجود ندارد - هر بخش یک بلوک متنی واحد است که با یک تصویر واحد جفت شده است. ناوبری یک نوار بالایی مینیمالیستی با یک لوگو و انتخابگر زبان است که به صورت یک نوار ثابت بین بخشها ظاهر میشود. پاورقی یک نوار سبز است که تمام عرض صفحه را پوشانده است. ریتم ویرایشی است: عنوان، پاراگراف، فراخوان برای اقدام، تصویر، تکرار.
زبان مصور کتاب، شخصیتهای تخت و دوبعدیِ نمادگرایی (دوئت جغد و چهرههای مختلف انسانی) را با اشکال هندسی گرد، خطوط بیرونی مشکی پررنگ و پالت رنگی مکمل صورتی، بنفش، زرد، نارنجی و آبی که هرگز در خود رابط کاربری ظاهر نمیشود، به تصویر میکشد. تصاویر در کنار متن در سمت راست هر بخش، در مقابل یک پسزمینه سفید خالص، بدون محفظه یا پسزمینه قرار گرفتهاند. هیچ عکسی وجود ندارد - شخصیتها به عنوان محتوای بصری عمل میکنند. شمایلنگاری از خطوط بیرونی ضخیم، مطابق با سبک نمادگراییها، استفاده میکند. تراکم تصویر متوسط است: هر بخش دارای یک تصویر بزرگ از شخصیت است و بقیه صفحه به تایپوگرافی و فضای سفید اختصاص داده شده است.
پالت
برند
- Eager Green
#58cc02— سبز برای برجسته کردن لینکها، برچسبها و عبارات کوتاه استفاده میشود. نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود. - Storybook Green
#d7ffb8— هایلایتهای ملایم روی سطوح روشن، تُنهای پسزمینهی ظریف پشت برچسبهای ناوبری در فوتر.
خنثی
- Spark Blue
#1cb0f6— از رنگ آبی برای برجسته کردن لینکها، برچسبها و عبارات کوتاه استفاده میشود. نباید از آن به عنوان رنگ اصلی برای دکمههای فراخوان استفاده شود. - Fresh Leaf
#a5ed6e— سبز برای برجسته کردن لینکها، برچسبها و عبارات کوتاه استفاده میشود. نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود. - Night Ink
#000437— لینکها، برچسبها و عبارات کوتاه هایلایت شده با رنگ بنفش مشخص شدهاند. - Paper White
#ffffff— بوم صفحه، سطوح مقوایی، متن دکمه روی زمینه سبز/تیره. - Charcoal
#4b4b4b— سربرگهای قهرمان و متن بدنه - متن تیره جهانی که به سربرگهای رنگی اجازه میدهد تا برجسته شوند. - Pencil Gray
#777777— پاراگرافهای اصلی متن با حروف نامشخص برجسته شدهاند و متن توصیفی ثانویه در پسزمینه قرار گرفته است، به طوری که عناصر رنگی به چشم میآیند.
تایپوگرافی
از ۱۳ تا ۶۴ پیکسل · ۷ مرحله
- feather — جایگزینی: Inter · طرح کلی 700 · عناوین بخشها، مانند «رایگان. سرگرمکننده. مؤثر» و «آزمون انگلیسی دولینگو»، با استفاده از یک فونت گرد سفارشی نمایش داده میشوند که به برند سبکی بازیگوش، دوستانه و شبیه به نماد میدهد. به جای آن از «پر پررنگ» یا «مشکی نونیتو» با وزن مناسب استفاده کنید. فاصله حروف: -0.0200em
- duolingo-sans — جایگزینی: Inter · طرح کلی 500 · پاراگرافهای اصلی و لینکهای ناوبری با اندازه ۱۷ پیکسل/۵۰۰ - یک فونت هندسی sans-serif که خوانا باقی میماند و به وزن خط ۷۰۰ اجازه میدهد نکات مهم را برجسته کند. آن را با «DIN Next»، «Inter» یا «Nunito Sans» جایگزین کنید.
- duolingo-sans — جایگزینی: Inter · طرح کلی 700 · تمام مقادیر weight-700 استفاده میشوند: حروف بزرگ در برچسبهای ناوبری ۱۵ پیکسل (ls 0.0530em)، زیرعنوانها ۱۹ پیکسل و ۳۲ پیکسل و تأکید لینک ۱۳ پیکسل است. همان فونت متن اصلی - تفاوت بصری در وزن است، نه تغییر فونت. فاصله حروف: ۰.۰۵۳۰em برای حروف بزرگ در برچسبهای ناوبری.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 12px |
| شعاع دکمه | 12px |
| شعاع کارت | 12px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 80-120px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Duolingo میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Family — برگی از یک افسانه روی کاغذ پوستی خامهای
- Say Briefly — دفتر طراحی آژانس خلاق روی کاغذ کرم رنگ
- Flying Papers — اعتراف در کارتون صبح شنبه
- Portrait — دیواری از خاطرات، ثبت شده با عکسهای پولاروید روی کاغذ کرم رنگ. یک دفترچه خاطرات روشن و کرم رنگ که در آن جوهر آبی تیره تنها متن، تنها خطوط ساختاری و تنها رنگ قاب است - با یک رنگینکمان دستساز که یک بار، روی دکمه «ثبت» و روی کلمه ایتالیک «برای همیشه» ظاهر میشود و دیگر هرگز تکرار نمیشود.
- Karl — یک دیورامای سهبعدی به سبک کتاب پاپآپ در یک روز آفتابی
- Navigate — مجموعهای بزرگ از برچسبها که به یک تخته متصل شدهاند: فونت بزرگ گروتسک، همه به شکل قرص و پنج آیکون چند رنگ که مانند یک لوگو تکرار میشوند
- Monte — صبح در ساحل با رنگی زنگزده
- MotherDuck — ترمینال با مداد رنگی روی کاغذ کرم کدگذاری شده است
- Wise Design — یک غرفه نئونی در یک خیابان جهانی - تابلویی سبز روشن که در میان بازار شلوغ فریاد میزند، در حالی که در پشت آن، یک رابط کاربری محصول شیک و بهروز، به طرز نامحسوسی ظاهر میشود.
- Hatch — طرحی به سبک سامیزدات که با دست کشیده شده و با کاسههای آبنبات پاستلی ترکیب شده است. یک بوم کاغذی خامهای که با تزئینات نعناعی، نقطههای کاغذ رنگی و فراخوانهای قرصی شکل برای اقدام تزئین شده است، جایی که یک فونت سریف بزرگ و پررنگ به سرگرمی اشاره دارد و یک نماد آبی در گوشه آن چشمک میزند.
- Superr — یک دفترچه یادداشت مدرسه گرم در نور ملایم بعدازظهر. یک صفحه کرم رنگ، یک ماژیک نارنجی بدون درب، و یک دسته برچسب اسم روکشدار که منتظر کنده شدن هستند.
- Mews — یک مرکز کنترل مهماننوازی در سپیدهدم، غرق در صورتی. یک فضای کاری با دیوارهای سفید و نورگیر که در آن حروف مشکی پررنگ، کارتهای کرم گرم و یک دکمهی عملیاتی صورتی پررنگ، هر صفحه را تعریف میکنند - اعتماد به نفسی بازیگوشانه به جای محدودیت سازمانی.