Duolingo
Boartlike klassemaskotte op wyt papier
De ynterface fan Duolingo is ûntworpen as in berneboek: in wyt papieren doek, in fol, rûn lettertype, en in inkele, rike griene kleur dy't fuortendaliks it "juiste antwurd" opropt. De haadtekst is in kalmerende middengrize toan, wêrtroch't it grien en syn aksintblau al it emosjonele wurk dwaan kinne - grien foar foarútgong en kopteksten, blau foar klikbere keppelings en ekstra aksjes. Komponinten binne foarme as pillen of dikke, rûne hoeken mei dikke swarte of kleurde rânen, wêrtroch elke knop mear fielt as in sticker dy't op 'e pagina plakt is dan in platte UI-kontrôle.
Seksjes nimme de folsleine breedte fan 'e pagina yn en binne fertikaal yn ien kolom pleatst, elk sawat 800 piksels heech. De maksimale ynhâldsbreedte is sawat 1 piksel sintraal. Tekst oan 'e lofterkant en yllustraasjes oan 'e rjochterkant wikselje inoar ôf, wêrtroch't genôch fertikale romte ûntstiet (80 piksels tusken seksjes). Der binne gjin rasterkaarten of yndielingen mei meardere kolommen - elke seksje is in inkele tekstblok keppele oan in inkele yllustraasje. Navigaasje is in minimalistyske boppeste balke mei in logo en taalselektor, dy't ferskynt as in fêste balke tusken seksjes. De fuottekst is in griene stripe dy't de hiele breedte fan 'e pagina beslacht. It ritme is redaksjoneel: koptekst, alinea, oprop ta aksje, yllustraasje, werhelling.
De yllustrative taal fan it boek hat platte, twadiminsjonale maskottekarakters (Duet de ûle en ferskate minsklike figueren) mei rûne geometryske foarmen, fet swarte kontoeren, en in komplementêr kleurenpalet fan rôze, pears, giel, oranje en blau dat nea yn 'e ynterface sels ferskynt. De yllustraasjes binne neist de tekst oan 'e rjochterkant fan elke seksje pleatst, tsjin in suver wite eftergrûn, sûnder konteners of eftergrûnen. Der binne gjin foto's - de karakters tsjinje as de fisuele ynhâld. De ikonografy brûkt dikke kontoeren, yn oerienstimming mei de styl fan 'e maskottes. De ôfbyldingstichtens is matich: elke seksje hat ien grutte yllustraasje fan it karakter, wêrby't de rest fan 'e pagina wijd is oan typografy en wyt romte.
Palet
Merk
- Eager Green
#58cc02— Grien wurdt brûkt om keppelings, tags en koarte frases te markearjen. It moat net brûkt wurde as de primêre kleur foar oprop ta aksje. - Storybook Green
#d7ffb8— Sêfte markearrings op ljochte oerflakken, subtile eftergrûntoanen efter de navigaasjelabels yn 'e fuottekst.
Neutraal
- Spark Blue
#1cb0f6— Blau wurdt brûkt om keppelings, tags en koarte frases te markearjen. It moat net brûkt wurde as de primêre kleur foar oprop ta aksje. - Fresh Leaf
#a5ed6e— Grien wurdt brûkt om keppelings, tags en koarte frases te markearjen. It moat net brûkt wurde as de primêre kleur foar oprop ta aksje. - Night Ink
#000437— Keppelings, tags en koarte markearre frases binne markearre yn pears. - Paper White
#ffffff— Sidedoek, kartonnen oerflakken, knoptekst op griene/donkere eftergrûn. - Charcoal
#4b4b4b— Hero Headers en Body Text - Universele donkere tekst dy't kleurde koppen opfalle lit. - Pencil Gray
#777777— De wichtichste tekstparagrafen wurde markearre mei ûnopfallende letters, en sekundêre beskriuwende tekst ferdwynt nei de eftergrûn, sadat de kleurde eleminten nei foaren komme.
Typografy
fan 13 oant 64px · 7 stappen
- feather — ferfanging: Inter · sketsen 700 · Seksjekoppen, lykas "Fergees. Leuk. Effektyf" en "Duolingo Ingelske Test", wurde werjûn mei in oanpast rûn lettertype, wat it merk syn boartlike, freonlike, maskotte-eftige styl jout. Ferfange mei "Feather Bold" of "Nunito Black" yn it passende gewicht. Letterôfstân: -0.0200em
- duolingo-sans — ferfanging: Inter · sketsen 500 · Haadparagrafen en navigaasjekeppelings op 17px/500 - in geometrysk sans-serif-lettertype dat lêsber bliuwt, wêrtroch't de rigeldikte fan 700 wichtige punten markearje kin. Ferfange mei 'DIN Next', 'Inter' of 'Nunito Sans'.
- duolingo-sans — ferfanging: Inter · sketsen 700 · Alle weight-700-wearden wurde brûkt: haadletters yn navigaasjelabels binne 15px (ls 0.0530em), subkopkes binne 19px en 32px, en keppelingsklam is 13px. Itselde lettertype as de haadtekst - it fisuele ferskil sit him yn it gewicht, net yn 'e lettertypeferoaring. Letterôfstân: 0.0530em foar haadletters yn navigaasjelabels.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | ticht |
| Basisstap | 12px |
| Knopradius | 12px |
| Kaartradius | 12px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 80-120px |
| Sidebreedte | 1200px |
AI sil jo webside bouwe yn Duolingo -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- Family — In útlis út in mearke op crème perkament
- Say Briefly — Sketsboek fan it kreatyf buro op crèmekleurich papier
- Flying Papers — Bekentenis op in sneontemoarns cartoon
- Portrait — In muorre fan oantinkens, fêstlein yn Polaroids op crèmekleurich papier. In helder, crèmekleurich plakboek dêr't donkerblauwe inket tsjinnet as de ienige tekst, de ienige struktuerlinen en de ienige framekleur - mei in inkele mei de hân tekene reinbôge dy't ien kear ferskynt, op 'e knop "Registrearje" en op it kursive wurd "foar altyd", en nea wer.
- Karl — In 3D pop-up boekstyl diorama op in sinnige dei
- Navigate — In grutte set stickers dy't oan in boerd fêstmakke binne: grut grotesk lettertype, allegear yn 'e foarm fan tablets en fiif mearkleurige ikoanen, dy't werhelle wurde as in logo
- Monte — Moarns oan 'e kust mei in roastige tint
- MotherDuck — Terminal kodearre mei kleurpotloden op crèmekleurich papier
- Wise Design — In neonmerkkraam op in wrâldwide strjitte - in heldergrien buordsje dat troch de drokke merk raast, wylst derachter diskreet in gepolijste brûkersynterface fan it produkt ferskynt.
- Hatch — In mei de hân tekene ûntwerp yn samizdat-styl mingd mei pastelkleurige snoepbakjes. In romige papieren doek fersierd mei muntaksinten, konfetti-stippen en pilfoarmige oprop ta aksje, wêrby't in grut, fet serif-lettertype nei wille hint, en in blauwe maskotte yn 'e hoeke knipoogt.
- Superr — In waarm skoalskrift yn it sêfte middeisljocht. In crèmekleurige side, in oranje marker sûnder kap, en in stapel laminearre nammestickers dy't wachtsje om ôfpele te wurden.
- Mews — In kontrôlesintrum foar gastfrijheid by moarnsiten, trochdrenkt fan rôze. In wurkromte mei wite muorren, sinneljocht, dêr't fet swart letters, waarme crèmekleurige kaarten en in inkele felroze aksjeknop elk skerm definiearje - in spielerich selsbetrouwen ynstee fan bedriuwsbehearsking.