Duolingo
Žaismingas klasės talismanas ant balto popieriaus
„Duolingo“ sąsaja sukurta kaip vaikiška paveikslėlių knyga: balta drobė, putlus, apvalus šriftas ir viena sodri žalia spalva, kuri iš karto primena „teisingą atsakymą“. Pagrindinis tekstas yra raminančių vidutinio pilkumo tonų, leidžiančių žaliai spalvai ir jos akcentinei mėlynai spalvai atlikti visą emocinį darbą – žalia spalva rodo progresą ir antraštes, mėlyna – spustelėjamas nuorodas ir papildomus veiksmus. Komponentai yra tablečių arba stambaus, užapvalinto kampo su storais juodais arba spalvotais rėmeliais formos, todėl kiekvienas mygtukas labiau primena prie puslapio priklijuotą lipduką, o ne plokščią vartotojo sąsajos valdiklį.
Skyriai užima visą puslapio plotį ir yra išdėstyti vertikaliai viename stulpelyje, kiekvieno stulpelio aukštis yra maždaug 800 pikselių. Didžiausias turinio plotis yra maždaug 1 pikselis centre. Tekstas kairėje ir iliustracijos dešinėje kaitaliojasi, todėl yra daug vertikalios erdvės (80 pikselių tarp skyrių). Nėra tinklelio kortelių ar kelių stulpelių išdėstymų – kiekvienas skyrius yra vienas teksto blokas su viena iliustracija. Navigacija yra minimalistinė viršutinė juosta su logotipu ir kalbos parinkimo įrankiu, kuris rodomas kaip fiksuota juosta tarp skyrių. Poraštė yra žalia juostelė, apimanti visą puslapio plotį. Ritmas yra redakcinis: antraštė, pastraipa, raginimas veikti, iliustracija, kartojimas.
Knygos iliustracinėje kalboje pavaizduoti plokšti, dvimačiai talismanų personažai (pelėda Duet ir įvairios žmonių figūros) su apvaliomis geometrinėmis formomis, ryškiais juodais kontūrais ir papildoma rožinės, violetinės, geltonos, oranžinės ir mėlynos spalvų palete, kuri niekada nepasirodo pačioje sąsajoje. Iliustracijos išdėstytos šalia teksto, kiekvienos dalies dešinėje pusėje, grynai baltame fone, be konteinerių ar fonų. Nuotraukų nėra – personažai atlieka vizualinio turinio funkciją. Ikonografijoje naudojami stori kontūrai, atitinkantys talismanų stilių. Vaizdų tankis yra vidutinis: kiekvienoje dalyje yra viena didelė personažo iliustracija, o likusi puslapio dalis skirta tipografijai ir baltai erdvei.
Paletė
Prekės ženklas
- Eager Green
#58cc02— Žalia spalva naudojama nuorodoms, žymoms ir trumpoms frazėms paryškinti. Ji neturėtų būti naudojama kaip pagrindinė spalva raginimams veikti. - Storybook Green
#d7ffb8— Švelnūs paryškinimai ant šviesių paviršių, subtilūs fono tonai už naršymo etikečių poraštėje.
Neutralus
- Spark Blue
#1cb0f6— Mėlyna spalva naudojama nuorodoms, žymoms ir trumpoms frazėms paryškinti. Ji neturėtų būti naudojama kaip pagrindinė spalva raginimams veikti. - Fresh Leaf
#a5ed6e— Žalia spalva naudojama nuorodoms, žymoms ir trumpoms frazėms paryškinti. Ji neturėtų būti naudojama kaip pagrindinė spalva raginimams veikti. - Night Ink
#000437— Nuorodos, žymos ir trumpos paryškintos frazės yra paryškintos violetine spalva. - Paper White
#ffffff— Puslapio drobė, kartoniniai paviršiai, mygtuko tekstas žaliame / tamsiame fone. - Charcoal
#4b4b4b— Herojaus antraštės ir pagrindinis tekstas – universalus tamsus tekstas, leidžiantis išsiskirti spalvotoms antraštėms. - Pencil Gray
#777777— Pagrindinės teksto pastraipos yra paryškintos nepastebimomis raidėmis, o antrinis aprašomasis tekstas pasitraukia į foną, todėl spalvoti elementai iškyla į pirmą planą.
Tipografija
nuo 13 iki 64 pikselių · 7 žingsniai
- feather — pakeitimas: Inter · kontūrai 700 · Skyrių antraštės, pvz., „Nemokama. Smagu. Efektyvu“ ir „Duolingo anglų kalbos testas“, rodomos naudojant pasirinktinį apvalų šriftą, suteikiantį prekės ženklui žaismingą, draugišką, talismanišką stilių. Pakeiskite atitinkamo storio „Feather Bold“ arba „Nunito Black“. Tarpai tarp raidžių: -0,0200 em
- duolingo-sans — pakeitimas: Inter · kontūrai 500 · Pagrindinės pastraipos ir naršymo nuorodos 17 pikselių / 500 pikselių formatu – tai įskaitomas geometrinis šriftas be serifų, leidžiantis 700 eilutės storiui paryškinti svarbius dalykus. Pakeiskite į „DIN Next“, „Inter“ arba „Nunito Sans“.
- duolingo-sans — pakeitimas: Inter · kontūrai 700 · Naudojamos visos „weight-700“ vertės: didžiosios raidės naršymo etiketėse yra 15 pikselių (ls 0,0530em), paantraštės – 19 pikselių ir 32 pikselių, o nuorodų paryškinimas – 13 pikselių. Tas pats šriftas kaip ir pagrindiniame tekste – vizualinis skirtumas yra storyje, o ne šrifto pakeitime. Raidžių tarpai: 0,0530em didžiosioms raidėms naršymo etiketėse.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | tankus |
| Pagrindinis žingsnis | 12px |
| Mygtuko spindulys | 12px |
| Kortelės spindulys | 12px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 80-120px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Duolingo stiliumi ir ją užpildys
- Užpildykite produktais ir įrašais per nuorodą – Instagram, TikTok, Facebook.
- Perkelkite turinį iš senos svetainės – tiesiog nurodykite adresą.
- Modernus dizainas geriausiame variklyje: React ( Next.js) su serverio atvaizdavimu ir SEO optimizavimu iš karto.
- Visiškai automatizuotas SEO optimizavimas paieškos rezultatams ir neuroninių tinklų rekomendacijoms.
Panašūs stiliai
- Family — Pasakos išklotinė ant kreminio pergamento
- Say Briefly — Kūrybinės agentūros eskizų knygelė ant kreminio popieriaus
- Flying Papers — Išpažintis šeštadienio ryto animaciniame filme
- Portrait — Prisiminimų siena, užfiksuota Polaroidais ant kreminės spalvos popieriaus. Ryškios, kreminės spalvos albumas, kuriame tamsiai mėlynas rašalas yra vienintelis tekstas, vienintelės struktūrinės linijos ir vienintelė rėmelio spalva – su viena ranka piešta vaivorykšte, kuri pasirodo vieną kartą, ant mygtuko „Registruotis“ ir ant kursyvu parašyto žodžio „amžinai“, ir niekada daugiau.
- Karl — Trimatė iššokančios knygos stiliaus diorama saulėtą dieną
- Navigate — Didelis lipdukų rinkinys, pritvirtintas prie lentos: didelis groteskiškas šriftas, visas planšetinių kompiuterių pavidalu ir penkios įvairiaspalvės piktogramos, kartojančios kaip logotipas
- Monte — Rytas pakrantėje su surūdijusiu atspalviu
- MotherDuck — Spalvotais pieštukais ant kreminio popieriaus užkoduotas terminalas
- Wise Design — Neoninis prekystalis pasaulinėje gatvėje – ryškiai žalias ženklas, šaukiantis perpildytoje turgavietėje, o už jo diskretiškai matoma nupoliruota produkto vartotojo sąsaja.
- Hatch — Rankomis pieštas, samizdato stiliaus dizainas, derinamas su pastelinėmis saldainių dubenėlėmis. Kreminė popierinė drobė, papuošta mėtiniais akcentais, konfeti taškeliais ir tablečių formos raginimais veikti, kur didelis, ryškus serifinis šriftas sufleruoja apie linksmybes, o kampe mirksi mėlynas talismanas.
- Superr — Šiltas mokyklinis sąsiuvinis švelnioje popietės šviesoje. Kreminės spalvos puslapis, oranžinis žymeklis be dangtelio ir krūvelė laminuotų vardų lipdukų, laukiančių, kol bus nulupti.
- Mews — Auštant įrengto svetingumo valdymo centro erdvė, skendinti rausvoje šviesoje. Baltomis sienomis apšviesta, saulės apšviesta darbo vieta, kurioje kiekvieną ekraną puošia ryškus juodas šriftas, šiltos kreminės spalvos kortelės ir vienas ryškiai rožinis veiksmų mygtukas – žaismingas pasitikėjimas, o ne korporatyvinis santūrumas.