Duolingo
Mänguline klassi maskott valgel paberil
Duolingo liides on kujundatud nagu laste pildiraamat: valge paberlõuend, täidlane, ümar font ja üks rikkalik roheline värv, mis koheselt meenutab „õiget vastust“. Põhitekst on rahustavates keskhallides toonides, lastes rohelisel ja selle aktsentsinisel teha kogu emotsionaalse töö ära – roheline edenemise ja pealkirjade jaoks, sinine klõpsatavate linkide ja lisatoimingute jaoks. Komponendid on tablettide või turskete ümarate nurkadega, millel on paksud mustad või värvilised äärised, mistõttu iga nupp tundub pigem lehele kleebitud kleebisena kui lameda kasutajaliidese juhtelemendina.
Sektsioonid hõlmavad kogu lehe laiust ja on vertikaalselt paigutatud ühte veergu, igaüks umbes 800 piksli kõrgusega. Maksimaalne sisu laius on umbes 1 piksel keskele paigutatud. Vasakul asuv tekst ja paremal asuvad illustratsioonid vahelduvad, pakkudes rohkelt vertikaalset ruumi (sektsioonide vahel 80 pikslit). Ruudustikku ega mitmeveerulisi paigutusi pole – iga sektsioon on üks tekstiplokk, millel on üks illustratsioon. Navigeerimine on minimalistlik ülemine riba logo ja keelevalijaga, mis kuvatakse sektsioonide vahel fikseeritud ribana. Jalus on roheline triip, mis ulatub üle kogu lehe laiuse. Rütm on toimetuslik: pealkiri, lõik, üleskutse tegevusele, illustratsioon, kordus.
Raamatu illustratiivne keel kasutab lamedaid, kahemõõtmelisi maskottitegelasi (öökull Duet ja mitmesugused inimfiguurid), kellel on ümarad geomeetrilised kujundid, julged mustad kontuurid ja täiendav roosa, lilla, kollane, oranž ja sinine värvipalett, mis liideses endas kunagi ei esine. Illustratsioonid paiknevad teksti kõrval iga jaotise paremal küljel, puhtalt valgel taustal, ilma konteinerite või taustadeta. Fotosid pole – tegelased toimivad visuaalse sisuna. Ikonograafias kasutatakse pakse kontuurisid, mis on kooskõlas maskottide stiiliga. Kujutise tihedus on mõõdukas: igas jaotises on üks suur tegelase illustratsioon, ülejäänud leht on pühendatud tüpograafiale ja tühjale ruumile.
Palett
Bränd
- Eager Green
#58cc02— Rohelist värvi kasutatakse linkide, siltide ja lühikeste fraaside esiletõstmiseks. Seda ei tohiks kasutada tegevusele kutsuvate tekstide põhivärvina. - Storybook Green
#d7ffb8— Pehmed esiletõstmised heledatel pindadel, peened taustatoonid jaluse navigeerimissiltide taga.
Neutraalne
- Spark Blue
#1cb0f6— Sinist kasutatakse linkide, siltide ja lühikeste fraaside esiletõstmiseks. Seda ei tohiks kasutada tegevusele kutsuvate tekstide põhivärvina. - Fresh Leaf
#a5ed6e— Rohelist värvi kasutatakse linkide, siltide ja lühikeste fraaside esiletõstmiseks. Seda ei tohiks kasutada tegevusele kutsuvate tekstide põhivärvina. - Night Ink
#000437— Lingid, sildid ja lühikesed esiletõstetud fraasid on lillaga esile tõstetud. - Paper White
#ffffff— Lehekülg lõuendil, papist pinnad, nuputekst rohelisel/tumedal taustal. - Charcoal
#4b4b4b— Kangelaste päised ja põhitekst – universaalne tume tekst, mis laseb värvilistel pealkirjadel silma paista. - Pencil Gray
#777777— Teksti peamised lõigud on esile tõstetud silmapaistmatute tähtedega ja teisejärguline kirjeldav tekst taandub tagaplaanile, nii et värvilised elemendid tulevad esile.
Tüpograafia
13-st 64 pikslini · 7 sammu
- feather — asendamine: Inter · kontuurid 700 · Jaotiste pealkirjad, näiteks „Tasuta. Lõbus. Tõhus” ja „Duolingo inglise keele test”, kuvatakse kohandatud ümara fondi abil, andes brändile mängulise, sõbraliku ja maskotilaadse stiili. Asendage need sobiva paksusega tekstiga „Feather Bold” või „Nunito Black”. Tähevahe: -0,0200em
- duolingo-sans — asendamine: Inter · kontuurid 500 · Peamised lõigud ja navigeerimislingid suurusega 17px/500 – geomeetriline sans-serif font, mis jääb loetavaks ja võimaldab 700 rea paksusel olulisi punkte esile tõsta. Asendage see tekstiga „DIN Next”, „Inter” või „Nunito Sans”.
- duolingo-sans — asendamine: Inter · kontuurid 700 · Kasutusel on kõik kaal-700 väärtused: navigeerimissiltide suurtähtede suurus on 15 pikslit (ls 0,0530em), alapealkirjade suurus on 19 ja 32 pikslit ning linkide rõhuasetus on 13 pikslit. Sama font mis põhitekstis – visuaalne erinevus seisneb kaalus, mitte fondi muutuses. Tähevahe: navigeerimissiltide suurtähtede puhul 0,0530em.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | tihe |
| Põhisamm | 12px |
| Nupu raadius | 12px |
| Kaardi raadius | 12px |
| Varjud | ei - varjude asemel äärised |
| Sektsioonide vahel | 80-120px |
| Lehe laius | 1200px |
Tehisintellekt loob teie veebisaidi Duolingo stiilis ja täidab selle
- Täida toodete ja postitustega lingi kaudu - Instagram, TikTok, Facebook.
- Kanna sisu oma vanalt saidilt üle – täpsusta lihtsalt aadress.
- Moodne disain parimal mootoril: React ( Next.js) koos serveri renderdamise ja SEO optimeerimisega koheselt.
- Täisautomaatne SEO optimeerimine otsingutulemuste ja närvivõrgu soovituste jaoks.
Sarnased stiilid
- Family — Muinasjutust pärit pilt kreemjal pärgamendil
- Say Briefly — Loovagentuuri visandiraamat kreemjal paberil
- Flying Papers — Ülestunnistus laupäevahommikul koomiksis
- Portrait — Mälestuste sein, jäädvustatud polaroididega kreemikale paberile. Ere, kreemikas külalisteraamat, kus tumesinine tint on ainus tekst, ainsate struktuurijoonte ja ainsa raami värv – ühe käsitsi joonistatud vikerkaarega, mis ilmub üks kord, nupul „Registreeru“ ja kursiivis sõnal „igavesti“ ning mitte kunagi enam.
- Karl — Päikesepaistelisel päeval ilmuv 3D-raamatu stiilis hüpikdioraam
- Navigate — Suur kleebiste komplekt tahvlile kinnitatud: suur groteskne font, kõik tahvelarvutite kujul ja viis mitmevärvilist ikooni, mis korduvad nagu logo
- Monte — Roostese varjundiga hommik rannikul
- MotherDuck — Värviliste pliiatsitega kreemikale paberile kodeeritud terminal
- Wise Design — Neoonturulett globaalsel tänaval – erkroheline silt karjub läbi rahvarohke turu, samal ajal kui selle taga diskreetselt ilmub poleeritud toote kasutajaliides.
- Hatch — Käsitsi joonistatud samizdat-stiilis kujundus, millele on lisatud pastelltoonides kommikausse. Kreemjas paberlõuend, mida kaunistavad mündirohelised aktsendid, konfetipunktid ja tabletikujulised üleskutsed tegutsemisele, kus suur ja julge serif-font vihjab lõbususele ning nurgas pilgutab silma sinine maskott.
- Superr — Soe koolivihik pehmes pärastlõunases valguses. Kreemikas leht, oranž marker ilma korgita ja hunnik lamineeritud nimekleebiseid ootamas eemaldamist.
- Mews — Koidikul roosasse langev külalislahkuse juhtimiskeskus. Valgete seintega, päikesepaisteline tööruum, kus iga ekraani iseloomustavad julge must trükis, soojad kreemikad kaardid ja üks erk roosa toimingunupp – pigem mänguline enesekindlus kui korporatiivne vaoshoitus.