Duolingo
Ak kagyzda oýnawaç synp maskoty
Duolingo-nyň interfeýsi çagalar üçin suratly kitap ýaly dizaýn edilen: ak kagyzdan ýasalan brezent, dolgun, tegelek şrift we derrew "dogry jogaby" ýatladýan ýeke-täk, baý ýaşyl reňk. Esasy tekst rahatlandyryjy orta çal reňk bolup, ýaşyl we onuň esasy gök reňki ähli emosional işleri ýerine ýetirmäge mümkinçilik berýär - ýaşyl ösüş we sözbaşylar üçin, gök reňk bolsa basyp bolýan baglanyşyklar we goşmaça hereketler üçin. Komponentler galyň gara ýa-da reňkli çäkler bilen tablet ýa-da galyň, tegelek burçlar ýaly görnüşde, her düwmäni tekiz interfeýs dolandyryşyndan has köp sahypa ýelmeşdirilen stiker ýaly duýdurýar.
Bölümler sahypanyň tutuş giňligini eýeleýär we her biri takmynan 800 piksel beýiklikde bolan bir sütün görnüşinde dikligine ýerleşdirilen. Mazmun giňliginiň iň ýokary derejesi takmynan 1 piksel merkezleşdirilen. Çep tarapdaky tekst we sag tarapdaky suratlar biri-birini çalşyp, ýeterlik dik boşluk döredýär (bölümleriň arasynda 80 piksel). Tor kartlary ýa-da köp sütünli düzülişler ýok - her bölüm bir surat bilen birleşdirilen ýeke tekst blokydyr. Nawigasiýa, bölümleriň arasynda üýtgewsiz zolak hökmünde görünýän logotipi we dil saýlaýjysy bolan minimalist ýokarky paneldir. Aşaky belgi sahypanyň tutuş giňligini gurşap alýan ýaşyl zolakdyr. Ritm redaksiýa häsiýetlidir: sözbaşy, abzas, herekete çagyryş, surat, gaýtalama.
Kitabyň suratlandyryş dilinde tegelek geometrik şekilleri, goýy gara konturlary we interfeýsiň özünde hiç haçan peýda bolmaýan gülgüne, gyrmyzy, sary, mämişi we gök reňkleriniň goşmaça reňk palitrasy bolan tekiz, iki ölçegli maskot gahrymanlary (baýguş we dürli adam şekilleri dueti) görkezilýär. Suratlar her bölümiň sag tarapynda, arassa ak fonda, gaplar ýa-da fonlar bolmazdan, tekstiň gapdalynda ýerleşdirilen. Suratlar ýok - gahrymanlar wizual mazmun hökmünde hyzmat edýär. Ikonografiýa maskotlaryň stiline laýyk gelýän galyň konturlary ulanýar. Suratlaryň dykyzlygy ortaça: her bölümde gahrymanyň bir uly suraty bar, sahypanyň galan bölegi bolsa tipografiýa we ak boşluga bagyşlanan.
Palitra
Brend
- Eager Green
#58cc02— Ýaşyl reňk baglanyşyklary, tegleri we gysga sözlemleri bellemek üçin ulanylýar. Ol herekete çagyryşlar üçin esasy reňk hökmünde ulanylmaly däl. - Storybook Green
#d7ffb8— Ýagty ýüzlerde ýumşak ýagtylyklar, aşaky kolonkadaky nawigasiýa bellikleriniň arkasyndaky inçe fon öwüşginleri.
Neýtral
- Spark Blue
#1cb0f6— Gök reňk baglanyşyklary, tegleri we gysga sözlemleri bellemek üçin ulanylýar. Ol herekete çagyryşlar üçin esasy reňk hökmünde ulanylmaly däl. - Fresh Leaf
#a5ed6e— Ýaşyl reňk baglanyşyklary, tegleri we gysga sözlemleri bellemek üçin ulanylýar. Ol herekete çagyryşlar üçin esasy reňk hökmünde ulanylmaly däl. - Night Ink
#000437— Baglanyşyklar, tegler we gysga bellenen sözlemler gyrmyzy reňkde bellendi. - Paper White
#ffffff— Sahypanyň mata, karton ýüzleri, ýaşyl/garaňky fonda düwme teksti. - Charcoal
#4b4b4b— Gahryman sözbaşylary we esasy tekst - Reňkli sözbaşylaryň tapawutlanmagyna mümkinçilik berýän umumy gara tekst. - Pencil Gray
#777777— Tekstiň esasy abzaslary göze ilmeýän harplar bilen bellenýär we ikinji derejeli düşündiriş teksti fona çekilýär, şonuň üçin reňkli elementler öňe çykýar.
Tipografiýa
13-den 64 piksele çenli · 7 ädim
- feather — çalyşmak: Inter · konturlar 700 · "Mugt. Gyzykly. Netijeli" we "Duolingo Iňlis dili synagy" ýaly bölümleriň sözbaşylary ýörite tegelek şrift arkaly görkezilýär, bu bolsa brende oýunjak, dostlukly, maskot ýaly stil berýär. Degişli agramda "Feather Bold" ýa-da "Nunito Black" bilen çalşyň. Harp aralygy: -0.0200em
- duolingo-sans — çalyşmak: Inter · konturlar 500 · Esasy abzaslar we nawigasiýa baglanyşyklary 17px/500 ölçeginde — okalyp bilýän geometrik sans-serif şrifti, 700 setir agramy möhüm nokatlary görkezmäge mümkinçilik berýär. 'DIN Next', 'Inter' ýa-da 'Nunito Sans' bilen çalşyryň.
- duolingo-sans — çalyşmak: Inter · konturlar 700 · Weight-700-iň ähli gymmatlyklary ulanylýar: nawigasiýa belliklerinde baş harplar 15px (ls 0.0530em), kiçi sözbaşylar 19px we 32px, baglanyşyk basymlary bolsa 13px. Esasy tekst bilen birmeňzeş şrift — wizual tapawut şriftiň üýtgemeginde däl-de, agramda. Harp aralygy: nawigasiýa belliklerinde baş harplar üçin 0.0530em.
Aralyklar we görnüş
| Maksat | Manysy |
|---|---|
| Dykyzlyk | dykyz |
| Esasy ädim | 12px |
| Düwme radiusy | 12px |
| Kart radiusy | 12px |
| Kölegeler | kölegeleriň ýerine serhetler ýok |
| Bölümleriň arasynda | 80-120px |
| Sahypanyň giňligi | 1200px |
Süni intellekt web sahypaňyzy Duolingo stilinde gurar we ony doldurar
- Instagram, TikTok, Facebook salgylary arkaly önümler we ýazgylar bilen dolduryň.
- Köne saýtyňyzdan mazmuny göçüriň — diňe salgyny görkeziň.
- Iň gowy motorda döwrebap dizaýn: React ( Next.js) serwer renderi we SEO optimizasiýasy bilen gyssagly ýagdaýda.
- Gözleg netijeleri we neýron tor maslahatlary üçin doly awtomatlaşdyrylan SEO optimizasiýasy.
Meňzeş stiller
- Family — Kremli pergamentdäki ertekiden bir bölek
- Say Briefly — Kremli kagyzda döredijilik agentliginiň eskiz defteri
- Flying Papers — Şenbe irden multfilmdäki ykrarnama
- Portrait — Krem reňkli kagyzda Polaroidlerde çekilen ýatlamalar diwary. Gara gök syýa ýeke-täk tekst, ýeke-täk gurluş çyzyklary we ýeke-täk çarçuwa reňki bolup hyzmat edýän ýagty, krem reňkli albom - "Hasaba al" düwmesinde we kursiw bilen ýazylan "hemişelik" sözi üstünde bir gezek peýda bolýan we hiç haçan gaýtalanmaýan ýekeje el bilen çekilen gökguşak bilen.
- Karl — Güneşli günde 3D açylýan kitap stilindäki diorama
- Navigate — Tagta berkidilen uly stikerler toplumy: uly grotesk şrift, hemmesi planşet görnüşinde we logotip ýaly gaýtalanýan bäş reňkli nyşan
- Monte — Pasly reňkli kenarda irden
- MotherDuck — Terminal krem kagyzda reňkli galamlar bilen kodlanan
- Wise Design — Dünýäniň köçesindäki neon bazarynyň kiosky — köp adamly bazaryň içinden ýagty ýaşyl belgi gygyrýar, onuň arkasynda bolsa, jylaňly önüm ulanyjy interfeýsi gizlin peýda bolýar.
- Hatch — El bilen çekilen, samizdat stilindäki dizaýn, pastel süýji gaplar bilen garyşdyrylan. Ýalpyz reňkli bezegler, konfeti nokatlary we tabletka şekilli herekete çagyryşlar bilen bezelen krem reňkli kagyz mata, uly, goýy serif şrifti şatlygy alamatlandyrýar we burçda gök maskot göz gyrpýar.
- Superr — Günortan ýumşak ýagtylygynda ýyly mekdep depderi. Krem reňkli sahypa, gapaksyz mämişi marker we aýrylmagyny garaşýan laminirlenen at stikerleriniň bir üýşmesi.
- Mews — Daň atan myhmansöýerlik dolandyryş merkezi, gülgüne reňke boýalan. Ak diwarly, gün şöhlesi düşen iş meýdany, her bir ekrany goýy gara şrift, ýyly krem kartlary we ýekeje gyzgyn gülgüne hereket düwmesi kesgitleýär - korporatiw çäklendirmeden has köp oýunjak ynam.