Duolingo
Oq qog'ozda o'ynoqi sinf maskoti
Duolingo interfeysi bolalar rasmlar kitobi kabi ishlab chiqilgan: oq qog'ozli kanvas, to'la, yumaloq shrift va darhol "to'g'ri javob"ni eslatuvchi bitta, boy yashil rang. Asosiy matn tinchlantiruvchi o'rta kulrang tuslardan iborat bo'lib, yashil va uning aksenti ko'k rangga barcha hissiy ishni bajarishga imkon beradi - yashil rang taraqqiyot va sarlavhalar uchun, ko'k rang bosish mumkin bo'lgan havolalar va qo'shimcha harakatlar uchun. Komponentlar qalin qora yoki rangli chegaralarga ega bo'lgan katta yoki yumaloq burchaklar shaklida bo'lib, har bir tugmani tekis foydalanuvchi interfeysi boshqaruvidan ko'ra sahifaga yopishtirilgan stikerga o'xshatadi.
Bo'limlar sahifaning to'liq kengligini egallaydi va vertikal ravishda bitta ustunda joylashgan bo'lib, har biri taxminan 800 piksel balandlikda. Maksimal kontent kengligi taxminan 1 piksel markazda joylashgan. Chapdagi matn va o'ngdagi rasmlar almashinib turadi, bu esa yetarli vertikal joyni (bo'limlar orasida 80 piksel) ta'minlaydi. Panjara kartalari yoki ko'p ustunli maketlar yo'q - har bir bo'lim bitta rasm bilan bog'langan bitta matn blokidir. Navigatsiya - bu bo'limlar orasida o'zgarmas panel sifatida ko'rinadigan logotip va til tanlagichli minimalist yuqori panel. Pastki qism sahifaning butun kengligini qamrab oluvchi yashil chiziqdir. Ritm tahririy: sarlavha, paragraf, harakatga chaqiruv, rasm, takrorlash.
Kitobning tasviriy tilida yumaloq geometrik shakllarga ega, qalin qora konturlarga ega va interfeysning o'zida hech qachon ko'rinmaydigan pushti, binafsha, sariq, to'q sariq va ko'k ranglarning qo'shimcha rang palitrasi bo'lgan yassi, ikki o'lchovli maskot qahramonlari (boyqush va turli xil inson figuralari dueti) tasvirlangan. Tasvirlar har bir bo'limning o'ng tomonidagi matn yonida, sof oq fonda, konteynerlar yoki fonlarsiz joylashtirilgan. Fotosuratlar yo'q - qahramonlar vizual kontent vazifasini bajaradi. Ikonografiya maskotlarning uslubiga mos keladigan qalin konturlardan foydalanadi. Tasvir zichligi o'rtacha: har bir bo'limda qahramonning bitta katta illyustratsiyasi mavjud, sahifaning qolgan qismi tipografiya va oq bo'shliqqa bag'ishlangan.
Palitra
Brend
- Eager Green
#58cc02— Yashil rang havolalar, teglar va qisqa iboralarni ta'kidlash uchun ishlatiladi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak. - Storybook Green
#d7ffb8— Yengil sirtlarda yumshoq yoritgichlar, pastki qismdagi navigatsiya yorliqlari orqasidagi nozik fon ohanglari.
Neytral
- Spark Blue
#1cb0f6— Moviy rang havolalar, teglar va qisqa iboralarni ta'kidlash uchun ishlatiladi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak. - Fresh Leaf
#a5ed6e— Yashil rang havolalar, teglar va qisqa iboralarni ta'kidlash uchun ishlatiladi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak. - Night Ink
#000437— Havolalar, teglar va qisqa ajratilgan iboralar binafsha rangda ta'kidlangan. - Paper White
#ffffff— Sahifa tuvali, karton yuzalar, yashil/to'q fonda tugmachali matn. - Charcoal
#4b4b4b— Qahramon sarlavhalari va asosiy matn - Rangli sarlavhalarni ajratib ko'rsatish imkonini beruvchi universal to'q matn. - Pencil Gray
#777777— Matnning asosiy paragraflari ko'zga tashlanmaydigan harflar bilan ta'kidlangan va ikkilamchi tavsiflovchi matn orqa fonga chekinadi, shuning uchun rangli elementlar oldinga chiqadi.
Tipografiya
13 dan 64 pikselgacha · 7 qadam
- feather — almashtirish: Inter · konturlar 700 · "Bepul. Qiziqarli. Samarali" va "Duolingo ingliz tili testi" kabi bo'lim sarlavhalari maxsus yumaloq shrift yordamida ko'rsatiladi, bu esa brendga o'ynoqi, do'stona, maskotga o'xshash uslubni beradi. Tegishli og'irlikdagi "Feather Bold" yoki "Nunito Black" bilan almashtiring. Harflar oralig'i: -0.0200 em
- duolingo-sans — almashtirish: Inter · konturlar 500 · Asosiy paragraflar va navigatsiya havolalari 17px/500 o'lchamda — geometrik sans-serif shrift bo'lib, u o'qilishi oson bo'lib qoladi, bu esa 700 qator og'irligi bilan muhim fikrlarni ta'kidlash imkonini beradi. 'DIN Next', 'Inter' yoki 'Nunito Sans' bilan almashtiring.
- duolingo-sans — almashtirish: Inter · konturlar 700 · Barcha weight-700 qiymatlari ishlatiladi: navigatsiya yorliqlaridagi bosh harflar 15px (ls 0.0530em), kichik sarlavhalar 19px va 32px, havola urg'usi esa 13px. Asosiy matn bilan bir xil shrift — vizual farq shrift o'zgarishida emas, balki og'irlikda. Harflar oralig'i: navigatsiya yorliqlaridagi bosh harflar uchun 0.0530em.
Intervallar va shakl
| Maqsad | Ma'nosi |
|---|---|
| Zichlik | zich |
| Asosiy qadam | 12px |
| Tugma radiusi | 12px |
| Karta radiusi | 12px |
| Soyalar | soyalar o'rniga chegaralar yo'q |
| Bo'limlar orasida | 80-120px |
| Sahifa kengligi | 1200px |
Sun'iy intellekt veb-saytingizni Duolingo uslubida yaratadi va uni to'ldiradi
- Mahsulotlar va postlarni Instagram, TikTok, Facebook havolalari orqali to'ldiring.
- Eski saytingizdan kontentni o'tkazing — shunchaki manzilni ko'rsating.
- Eng yaxshi dvigatelda zamonaviy dizayn: React ( Next.js) server renderlash va SEO optimallashtirish bilan darhol.
- Qidiruv natijalari va neyron tarmoq tavsiyalari uchun to'liq avtomatlashtirilgan SEO optimallashtirish.
O'xshash uslublar
- Family — Krem pergamentga yozilgan ertakdan parcha
- Say Briefly — Krem qog'ozga yozilgan ijodiy agentlik eskiz daftari
- Flying Papers — Shanba kuni ertalabki multfilmdagi e'tirof
- Portrait — Krem rangli qog'ozga Polaroidlarda tasvirlangan xotiralar devori. To'q ko'k siyoh yagona matn, yagona tuzilish chiziqlari va yagona ramka rangi bo'lib xizmat qiladigan yorqin, krem rangli albom — "Ro'yxatdan o'tish" tugmachasida va kursiv bilan yozilgan "abadiy" so'zida bir marta paydo bo'ladigan va boshqa hech qachon bo'lmaydigan bitta qo'lda chizilgan kamalak bilan.
- Karl — Quyoshli kunda 3D ochiladigan kitob uslubidagi diorama
- Navigate — Doskaga biriktirilgan katta stikerlar to'plami: katta grotesk shrift, barchasi planshetlar ko'rinishida va logotip kabi takrorlanadigan beshta rang-barang piktogrammalar
- Monte — Sohilda zanglagan tus bilan tong
- MotherDuck — Terminal krem qog'ozga rangli qalamlar bilan kodlangan
- Wise Design — Global ko'chadagi neon bozor rastasi — gavjum bozorda yorqin yashil belgi qichqirib tursa, uning orqasida ehtiyotkorlik bilan sayqallangan mahsulot foydalanuvchi interfeysi paydo bo'ladi.
- Hatch — Qo'lda chizilgan, samizdat uslubidagi dizayn pastel konfet idishlari bilan aralashtirilgan. Yalpiz aksentlari, konfeti nuqtalari va tabletka shaklidagi harakatga chaqiriqlar bilan bezatilgan kremsi qog'oz kanvas, bu yerda katta, qalin serif shrift o'yin-kulgiga ishora qiladi va burchakda ko'k maskot ko'z qisadi.
- Superr — Kunduzgi mayin yorug'likda iliq maktab daftari. Krem rangli sahifa, qopqoqsiz to'q sariq rangli marker va olib tashlashni kutayotgan laminatlangan ism stikerlari.
- Mews — Tong otganda, pushti rangga bo'yalgan mehmondo'stlikni boshqarish markazi. Oq devorli, quyosh nuri tushgan ish maydoni, unda qalin qora shrift, iliq krem rangli kartochkalar va bitta yorqin pushti tugma har bir ekranni belgilaydi - korporativ cheklov emas, balki o'ynoqi ishonch.