Duolingo
Ağ kağız üzərində oynaq sinif maskotu
Duolingonun interfeysi uşaq şəkil kitabı kimi dizayn edilib: ağ kağız kətan, dolğun, dairəvi şrift və dərhal "düzgün cavabı" xatırladan tək, zəngin yaşıl rəng. Əsas mətn sakitləşdirici orta boz tonlardır və yaşıl və onun vurğu mavisinin bütün emosional işləri görməsinə imkan verir - irəliləyiş və başlıqlar üçün yaşıl, kliklənə bilən linklər və əlavə hərəkətlər üçün mavi. Komponentlər qalın qara və ya rəngli haşiyələri olan qalın, dairəvi künclər və ya qalın formadadır ki, bu da hər düyməni düz UI idarəetməsindən daha çox səhifəyə yapışdırılmış stiker kimi hiss etdirir.
Bölmələr səhifənin bütün enini tutur və hər biri təxminən 800 piksel hündürlükdə olan tək bir sütunda şaquli olaraq düzülmüşdür. Maksimum məzmun eni mərkəzdə təxminən 1 pikseldir. Soldakı mətn və sağdakı illüstrasiyalar bir-birini əvəz edir və geniş şaquli boşluq təmin edir (bölmələr arasında 80 piksel). Şəbəkə kartları və ya çoxsütunlu düzülüş yoxdur - hər bölmə tək bir illüstrasiya ilə birləşdirilmiş tək bir mətn blokudur. Naviqasiya, bölmələr arasında sabit bir zolaq kimi görünən loqo və dil seçicisi olan minimalist üst zolaqdır. Altbilgi səhifənin bütün enini əhatə edən yaşıl zolaqdır. Ritm redaksiya xarakterlidir: başlıq, abzas, hərəkətə çağırış, illüstrasiya, təkrar.
Kitabın illüstrativ dilində dairəvi həndəsi formalı, qalın qara konturlu və interfeysin özündə heç vaxt görünməyən çəhrayı, bənövşəyi, sarı, narıncı və mavi rənglərin tamamlayıcı rəng palitrası olan düz, ikiölçülü maskot personajları (bayquş və müxtəlif insan fiqurları dueti) təsvir edilmişdir. İllüstrasiyalar hər bölmənin sağ tərəfində, təmiz ağ fonda, qablar və ya fonlar olmadan mətnin yanında yerləşdirilmişdir. Fotoşəkillər yoxdur - personajlar vizual məzmun kimi xidmət edir. İkonoqrafiya maskotların üslubuna uyğun olaraq qalın konturlardan istifadə edir. Şəkil sıxlığı orta səviyyədədir: hər bölmədə personajın bir böyük illüstrasiyası var, səhifənin qalan hissəsi isə tipoqrafiya və ağ boşluğa həsr olunmuşdur.
Palitra
Brend
- Eager Green
#58cc02— Yaşıl rəng linkləri, etiketləri və qısa ifadələri vurğulamaq üçün istifadə olunur. Hərəkətə çağırışlar üçün əsas rəng kimi istifadə edilməməlidir. - Storybook Green
#d7ffb8— İşıqlı səthlərdə yumşaq işıqlandırma, altbilgidəki naviqasiya etiketlərinin arxasında incə fon tonları.
Neytral
- Spark Blue
#1cb0f6— Mavi rəng linkləri, etiketləri və qısa ifadələri vurğulamaq üçün istifadə olunur. Hərəkətə çağırışlar üçün əsas rəng kimi istifadə edilməməlidir. - Fresh Leaf
#a5ed6e— Yaşıl rəng linkləri, etiketləri və qısa ifadələri vurğulamaq üçün istifadə olunur. Hərəkətə çağırışlar üçün əsas rəng kimi istifadə edilməməlidir. - Night Ink
#000437— Linklər, etiketlər və qısa vurğulanmış ifadələr bənövşəyi rənglə vurğulanmışdır. - Paper White
#ffffff— Yaşıl/tünd fonda səhifə kətan, karton səthlər, düymə mətni. - Charcoal
#4b4b4b— Qəhrəman Başlıqları və Əsas Mətn - Rəngli başlıqların seçilməsinə imkan verən universal tünd mətn. - Pencil Gray
#777777— Mətnin əsas abzasları gözə çarpmayan hərflərlə vurğulanır və ikinci dərəcəli təsviri mətn arxa plana keçir və rəngli elementlər ön plana çıxır.
Tipoqrafiya
13-dən 64 pikselə qədər · 7 addım
- feather — əvəzetmə: Inter · konturlar 700 · "Pulsuz. Əyləncəli. Effektiv" və "Duolingo İngilis dili Testi" kimi bölmə başlıqları xüsusi yuvarlaqlaşdırılmış şriftdən istifadə edilərək göstərilir və bu da brendə oynaq, mehriban, maskot kimi stil verir. Müvafiq qalınlıqda "Lələkli Qalın" və ya "Nunito Qara" ilə əvəz edin. Hərf aralığı: -0.0200 em
- duolingo-sans — əvəzetmə: Inter · konturlar 500 · Əsas abzaslar və naviqasiya linkləri 17px/500 ölçüsündədir — oxunaqlı qalan və 700 sətir qalınlığının vacib məqamları vurğulamasına imkan verən həndəsi sans-serif şrift. 'DIN Next', 'Inter' və ya 'Nunito Sans' ilə əvəz edin.
- duolingo-sans — əvəzetmə: Inter · konturlar 700 · Bütün çəki-700 dəyərlərindən istifadə olunur: naviqasiya etiketlərində böyük hərflər 15 pikseldir (ls 0.0530em), alt başlıqlar 19 piksel və 32 pikseldir və link vurğusu 13 pikseldir. Əsas mətnlə eyni şrift — vizual fərq şrift dəyişikliyində deyil, çəkidədir. Hərf aralığı: naviqasiya etiketlərində böyük hərflər üçün 0.0530em.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | sıx |
| Əsas addım | 12px |
| Düymə radiusu | 12px |
| Kart radiusu | 12px |
| Kölgələr | kölgələr əvəzinə sərhədlər yoxdur |
| Bölmələr arasında | 80-120px |
| Səhifə eni | 1200px |
Süni intellekt veb saytınızı Duolingo üslubunda quracaq və onu dolduracaq
- Məhsullar və paylaşımlar ilə Instagram, TikTok, Facebook linkləri vasitəsilə tanış olun.
- Köhnə saytınızdan məzmunu köçürün — sadəcə ünvanı göstərin.
- Ən yaxşı mühərrikdə müasir dizayn: Server render və SEO optimallaşdırması ilə React ( Next.js).
- Axtarış nəticələri və neyron şəbəkə tövsiyələri üçün tam avtomatlaşdırılmış SEO optimallaşdırması.
Oxşar üslublar
- Family — Krem perqament üzərində nağıldan bir parça
- Say Briefly — Kremli kağız üzərində yaradıcı agentlik eskiz dəftəri
- Flying Papers — Şənbə Səhəri Cizgi Filmində Etiraf
- Portrait — Krem rəngli kağız üzərində Polaroidlərlə çəkilmiş xatirələr divarı. Tünd mavi mürəkkəbin yeganə mətn, yeganə struktur xətləri və yeganə çərçivə rəngi kimi xidmət etdiyi parlaq, krem rəngli albom — "Qeydiyyatdan keç" düyməsində və kursivlə yazılmış "əbədi" sözündə bir dəfə görünən və bir daha heç vaxt görünməyən tək bir əl ilə çəkilmiş göy qurşağı ilə.
- Karl — Günəşli bir gündə 3D açılan kitab stili diorama
- Navigate — Lövhəyə yapışdırılmış böyük bir stiker dəsti: hamısı planşet şəklində olan böyük qrotesk şrift və loqo kimi təkrarlanan beş çoxrəngli nişan
- Monte — Paslı bir çalar ilə sahildə səhər
- MotherDuck — Terminal krem kağız üzərində rəngli qələmlərlə kodlaşdırılıb
- Wise Design — Qlobal küçədə neon bazar köşkü — izdihamlı bazarda parlaq yaşıl bir lövhə qışqırır, arxasında isə cilalanmış məhsul istifadəçi interfeysi gizli şəkildə görünür.
- Hatch — Əl ilə çəkilmiş, samizdat üslubunda dizayn, pastel konfet qabları ilə qarışdırılıb. Nanə vurğuları, konfeti nöqtələri və həb formalı hərəkətə çağırışlarla bəzədilmiş krem rəngli kağız kətan, böyük, qalın serif şrift əyləncəyə işarə edir və küncdə mavi maskot göz vurur.
- Superr — Günortadan sonra yumşaq işığında isti məktəb dəftəri. Krem rəngli səhifə, qapaqsız narıncı marker və soyulmasını gözləyən laminat ad stikerləri yığını.
- Mews — Çəhrayı rəngə boyanmış səhər qonaqpərvərlik idarəetmə mərkəzi. Ağ divarlı, günəş işığı ilə işıqlandırılmış iş sahəsi, hər ekranı parlaq qara şrift, isti krem kartları və tək bir parlaq çəhrayı hərəkət düyməsi - korporativ təmkin əvəzinə oynaq bir özünəinam hissi ilə xarakterizə edir.