Duolingo
Leikkisä luokan maskotti valkoisella paperilla
Duolingon käyttöliittymä on suunniteltu kuin lasten kuvakirja: valkoinen paperipohja, pyöreä, pyöreä fontti ja yksi, syvän vihreä väri, joka tuo välittömästi mieleen "oikean vastauksen". Pääteksti on rauhoittava keskiharmaa sävyinen, jossa vihreä ja sen korostussininen hoitavat kaiken tunnetyön – vihreä kuvaa edistymistä ja otsikoita, sininen klikattavia linkkejä ja lisätoimintoja. Komponentit ovat pillereiden tai paksujen, pyöristettyjen kulmien muotoisia, ja niissä on paksut mustat tai värilliset reunat, jolloin jokainen painike tuntuu enemmän sivuun kiinnitetyltä tarralta kuin litteältä käyttöliittymän säätimeltä.
Osiot täyttävät sivun koko leveyden ja on järjestetty pystysuunnassa yhteen sarakkeeseen, joista jokainen on noin 800 pikseliä korkea. Sisällön enimmäisleveys on noin yksi pikseli keskitettynä. Teksti vasemmalla ja kuvat oikealla vuorottelevat, mikä tarjoaa runsaasti pystysuoraa tilaa (80 pikseliä osioiden välillä). Ruudukkokortteja tai monipalstaisia asetteluja ei ole – jokainen osio on yksi tekstilohko, johon on yhdistetty yksi kuva. Navigointi on minimalistinen yläpalkki, jossa on logo ja kielivalitsin, joka näkyy kiinteänä palkkina osioiden välillä. Alatunniste on vihreä raita, joka ulottuu koko sivun leveydelle. Rytmi on toimituksellinen: otsikko, kappale, toimintakehotus, kuva, toisto.
Kirjan kuvituskieli sisältää litteitä, kaksiulotteisia maskottihahmoja (Duet-pöllö ja erilaisia ihmishahmoja), joilla on pyöreät geometriset muodot, rohkeat mustat ääriviivat ja niitä täydentävä vaaleanpunaisen, violetin, keltaisen, oranssin ja sinisen väripaletti, jota ei koskaan näy itse käyttöliittymässä. Kuvitukset on sijoitettu tekstin viereen kunkin osion oikealle puolelle puhtaan valkoista taustaa vasten, ilman säiliöitä tai taustoja. Valokuvia ei ole – hahmot toimivat visuaalisena sisältönä. Ikonografiassa käytetään paksuja ääriviivoja, jotka ovat yhdenmukaisia maskottien tyylin kanssa. Kuvatiheys on kohtuullinen: jokaisessa osiossa on yksi suuri kuva hahmosta, ja loput sivusta on omistettu typografialle ja tyhjälle tilalle.
Paletti
Merkki
- Eager Green
#58cc02— Vihreää käytetään linkkien, tunnisteiden ja lyhyiden lauseiden korostamiseen. Sitä ei tule käyttää toimintakehotuksen päävärinä. - Storybook Green
#d7ffb8— Pehmeät korostukset vaaleilla pinnoilla, hienovaraiset taustasävyt alatunnisteen navigointitunnisteiden takana.
Neutraali
- Spark Blue
#1cb0f6— Sinistä käytetään linkkien, tunnisteiden ja lyhyiden lauseiden korostamiseen. Sitä ei tule käyttää toimintakehotuksen päävärinä. - Fresh Leaf
#a5ed6e— Vihreää käytetään linkkien, tunnisteiden ja lyhyiden lauseiden korostamiseen. Sitä ei tule käyttää toimintakehotuksen päävärinä. - Night Ink
#000437— Linkit, tagit ja lyhyet korostetut lauseet on korostettu violetilla. - Paper White
#ffffff— Sivukangas, pahvipinnat, painiketeksti vihreällä/tummalla taustalla. - Charcoal
#4b4b4b— Pääotsikot ja leipäteksti – Yleinen tumma teksti, jonka avulla värilliset otsikot erottuvat. - Pencil Gray
#777777— Tekstin pääkappaleet on korostettu huomaamattomilla kirjaimilla, ja toissijainen kuvaileva teksti vetäytyy taustalle, jolloin värilliset elementit tulevat etualalle.
Typografia
13:sta 64 pikseliin · 7 vaihetta
- feather — korvaava: Inter · ääriviivat 700 · Osioiden otsikot, kuten "Ilmainen. Hauska. Tehokas" ja "Duolingo English Test", näytetään pyöristetyllä fontilla, joka antaa brändille leikkisän, ystävällisen ja maskottimaisen tyylin. Korvaa ne tekstillä "Feather Bold" tai "Nunito Black" sopivalla vahvuudella. Kirjainväli: -0,0200 em
- duolingo-sans — korvaava: Inter · ääriviivat 500 · Pääkappaleet ja navigointilinkit koossa 17px/500 – geometrinen sans-serif-fontti, joka pysyy luettavana ja jonka rivipaino 700 korostaa tärkeitä kohtia. Korvaa fontilla 'DIN Next', 'Inter' tai 'Nunito Sans'.
- duolingo-sans — korvaava: Inter · ääriviivat 700 · Kaikkia weight-700-arvoja käytetään: navigointiotsikoiden isojen kirjainten koko on 15 pikseliä (ls 0,0530em), alaotsikoiden koko on 19 ja 32 pikseliä ja linkkien painotus on 13 pikseliä. Sama fontti kuin päätekstissä – visuaalinen ero on painotuksessa, ei fontin muutoksessa. Kirjainvälistys: 0,0530em isoille kirjaimille navigointiotsikoissa.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tiheä |
| Perusvaihe | 12px |
| Painikkeen säde | 12px |
| Kortin säde | 12px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 80-120px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Duolingo -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- Family — Satuaiheinen levite kermanväriselle pergamentille
- Say Briefly — Luovan toimiston luonnoskirja kermanväriselle paperille
- Flying Papers — Tunnustus lauantaiaamun sarjakuvana
- Portrait — Polaroid-kuvilla kermanväriselle paperille tallennettu muistojen seinä. Kirkkaanvärinen, kermanvärinen leikekirja, jossa tummansininen muste toimii ainoana tekstinä, ainoina rakenneviivoina ja ainoana kehyksen värinä – ja yksi käsin piirretty sateenkaari ilmestyy kerran "Rekisteröidy"-painikkeeseen ja kursiivilla kirjoitettuun sanaan "ikuisesti", eikä enää koskaan.
- Karl — 3D-ponnahdusikkunakirjamainen dioraama aurinkoisena päivänä
- Navigate — Suuri joukko tarroja kiinnitettynä tauluun: suuri groteski fontti, kaikki tablettien muodossa ja viisi moniväristä kuvaketta, jotka toistuvat kuin logo
- Monte — Aamu rannikolla ruosteisen sävyn kanssa
- MotherDuck — Värikynillä koodattu pääte kermanväriselle paperille
- Wise Design — Neonvaloilla valaistu markkinakoju maailmanlaajuisella kadulla – kirkkaanvihreä kyltti huutaa läpi tungosta, ja sen takana näkyy huomaamattomasti viimeistelty tuotekäyttöliittymä.
- Hatch — Käsin piirretty, samizdat-tyylinen kuosi yhdistettynä pastellisävyisiin karkkikulhoihin. Kermainen paperipohja, jota koristavat mintunvihreät yksityiskohdat, konfettipilkut ja pillerinmuotoiset toimintakehotukset, joissa suuri, rohkea serif-fontti vihjaa hauskanpitoon ja sininen maskotti iskee silmää nurkassa.
- Superr — Lämmin kouluvihko pehmeässä iltapäivän valossa. Kermanvärinen sivu, oranssi tussi ilman korkkia ja pino laminoituja nimitarroja odottamassa irrottamista.
- Mews — Aamunkoitteessa sijaitseva hotellialan ohjauskeskus, pinkin hohtoinen. Valkoseinäinen, auringonvalolta valaistu työtila, jossa rohkea musta fontti, lämpimän kermanväriset kortit ja yksi pinkki toimintopainike määrittelevät jokaisen näytön – leikkisää itsevarmuutta pikemminkin kuin yritysmäistä hillittynä.