Duolingo
Malingaw nga maskot sa klase sa puti nga papel
Ang interface sa Duolingo gidisenyo sama sa usa ka picture book para sa mga bata: usa ka puti nga papel nga canvas, baga, lingin nga font, ug usa ka buok, dato nga berde nga kolor nga diha-diha dayon nagpahinumdom sa "saktong tubag." Ang pangunang teksto usa ka makapahupay nga tunga-tunga nga abohon nga mga tono, nga nagtugot sa berde ug sa accent nga asul niini nga mohimo sa tanang emosyonal nga trabaho—berde para sa progreso ug mga heading, asul para sa mga clickable link ug dugang nga mga aksyon. Ang mga component giporma sama sa mga pildoras o baga, lingin nga mga kanto nga adunay baga nga itom o kolor nga mga border, nga naghimo sa matag buton nga mobati nga mas sama sa usa ka sticker nga gipapilit sa panid kaysa usa ka patag nga UI control.
Ang mga seksyon nag-okupar sa tibuok gilapdon sa panid ug gihan-ay nga patindog sa usa ka kolum, ang matag usa gibana-bana nga 800 ka pixel ang gitas-on. Ang pinakataas nga gilapdon sa sulod gibana-bana nga 1 ka pixel sa sentro. Ang teksto sa wala ug mga ilustrasyon sa tuo nagpuli-puli, nga naghatag og igong bertikal nga espasyo (80 ka pixel tali sa mga seksyon). Walay mga grid card o multi-column layout—ang matag seksyon usa ka text block nga gipares sa usa ka ilustrasyon. Ang nabigasyon usa ka minimalist nga top bar nga adunay logo ug language selector, nga makita isip usa ka pirmi nga bar tali sa mga seksyon. Ang footer usa ka berde nga stripe nga nagsangkad sa tibuok gilapdon sa panid. Ang ritmo kay editoryal: heading, paragraph, call to action, ilustrasyon, balik-balik.
Ang ilustratibong pinulongan sa libro nagpakita sa patag, duha-ka-dimensyon nga mga karakter sa mascot (Duet ang kuwago ug lain-laing mga pigura sa tawo) nga adunay lingin nga geometric nga mga porma, maisog nga itom nga mga outline, ug usa ka komplementaryong paleta sa kolor nga pink, purpura, dalag, kahel, ug asul nga dili gyud makita sa interface mismo. Ang mga ilustrasyon gibutang tupad sa teksto sa tuo nga bahin sa matag seksyon, batok sa puro nga puti nga background, walay mga sudlanan o background. Walay mga litrato—ang mga karakter nagsilbing biswal nga sulud. Ang iconography naggamit ug baga nga mga outline, nga nahiuyon sa estilo sa mga mascot. Kasarangan ang densidad sa imahe: ang matag seksyon adunay usa ka dako nga ilustrasyon sa karakter, diin ang nahabilin nga panid gipahinungod sa tipograpiya ug puti nga wanang.
Paleta
Brand
- Eager Green
#58cc02— Ang berde gigamit sa pag-highlight sa mga link, tag, ug mugbong mga hugpong sa mga pulong. Dili kini angay gamiton isip pangunang kolor para sa mga panawagan sa aksyon. - Storybook Green
#d7ffb8— Hinay nga mga highlight sa mga gaan nga nawong, hinay nga mga tono sa background sa luyo sa mga label sa nabigasyon sa footer.
Neutral
- Spark Blue
#1cb0f6— Ang asul gigamit sa pag-highlight sa mga link, tag, ug mugbong mga hugpong sa mga pulong. Dili kini angay gamiton isip pangunang kolor para sa mga panawagan sa aksyon. - Fresh Leaf
#a5ed6e— Ang berde gigamit sa pag-highlight sa mga link, tag, ug mugbong mga hugpong sa mga pulong. Dili kini angay gamiton isip pangunang kolor para sa mga panawagan sa aksyon. - Night Ink
#000437— Ang mga link, tag, ug mubo nga gi-highlight nga mga hugpong sa mga pulong gi-highlight sa purpura. - Paper White
#ffffff— Kanbas sa panid, mga nawong nga karton, teksto sa butones sa berde/itom nga background. - Charcoal
#4b4b4b— Mga Header ug Body Text sa Hero - Universal nga itom nga teksto nga nagtugot sa mga dekolor nga headline nga mobarug. - Pencil Gray
#777777— Ang mga nag-unang parapo sa teksto gipasiugda gamit ang dili makita nga mga letra, ug ang ikaduhang deskriptibo nga teksto mibalhin ngadto sa background, aron ang mga elemento nga may kolor makita sa unahan.
Tipograpiya
gikan sa 13 ngadto sa 64px · 7 ka lakang
- feather — kapuli: Inter · mga balangkas 700 · Ang mga ulohan sa seksyon, sama sa "Libre. Makalingaw. Epektibo" ug "Duolingo English Test," gipakita gamit ang usa ka gipahaom nga lingin nga font, nga naghatag sa brand sa iyang makalingaw, mahigalaon, ug sama sa mascot nga estilo. Ilisi og "Feather Bold" o "Nunito Black" sa angay nga gibug-aton. Ang gilay-on sa mga letra: -0.0200em
- duolingo-sans — kapuli: Inter · mga balangkas 500 · Ang mga pangunang parapo ug mga sumpay sa nabigasyon anaa sa 17px/500—usa ka geometric sans-serif nga font nga magpabiling mabasa, nga nagtugot sa 700 nga gibug-aton sa linya aron ipasiugda ang mga importanteng punto. Ilisi og 'DIN Next', 'Inter', o 'Nunito Sans'.
- duolingo-sans — kapuli: Inter · mga balangkas 700 · Ang tanang weight-700 nga mga bili gigamit: ang dagkong mga letra sa mga label sa nabigasyon kay 15px (ls 0.0530em), ang mga subheading kay 19px ug 32px, ug ang link emphasis kay 13px. Parehas ang font sa pangunang teksto—ang kalainan makita sa gibug-aton, dili sa pagbag-o sa font. Gintang sa letra: 0.0530em para sa dagkong mga letra sa mga label sa nabigasyon.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | dasok |
| Batakang lakang | 12px |
| Radius sa butones | 12px |
| Radius sa kard | 12px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 80-120px |
| Lapad sa panid | 1200px |
Ang AI motukod sa imong website sa estilo sa Duolingo ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- Family — Usa ka pagkaylap gikan sa usa ka sugilanon sa engkanto sa cream parchment
- Say Briefly — Sketchbook sa creative agency sa cream paper
- Flying Papers — Pagkumpisal sa usa ka Cartoon sa Sabado sa Buntag
- Portrait — Usa ka bungbong sa mga handumanan, nga nakuha sa Polaroids sa kolor krema nga papel. Usa ka hayag, kolor krema nga scrapbook diin ang itom nga asul nga tinta nagsilbing bugtong teksto, bugtong linya sa istruktura, ug bugtong kolor sa frame—nga adunay usa ka balangaw nga gidrowing sa kamot nga makita kausa, sa buton nga "Register" ug sa italicized nga pulong nga "forever," ug dili na gayud pag-usab.
- Karl — Usa ka 3D pop-up nga diorama nga istilo sa libro sa usa ka maaraw nga adlaw
- Navigate — Usa ka dakong hugpong sa mga sticker nga gilakip sa usa ka board: dako nga grotesque nga font, tanan naa sa porma sa mga tablet ug lima ka lain-laing kolor nga mga icon, nga gisubli sama sa usa ka logo
- Monte — Buntag sa baybayon nga adunay taya nga kolor
- MotherDuck — Ang terminal gi-code gamit ang mga colored pencil sa cream paper
- Wise Design — Usa ka neon market stall sa usa ka global street—usa ka hayag nga berde nga karatula nga nagsinggit agi sa puno sa tawo nga merkado, samtang sa luyo niini, usa ka pinasinaw nga product user interface ang makita nga tago.
- Hatch — Usa ka disenyo nga gidrowing sa kamot, istilo sa samizdat nga gisagol sa pastel nga mga panaksan sa kendi. Usa ka krema nga papel nga canvas nga gidayandayanan og mga mint accents, mga tuldok sa confetti, ug mga panawagan sa aksyon nga porma og pildoras, diin ang usa ka dako, maisugon nga serif nga font nagpasabot og kalingawan, ug usa ka asul nga maskot nga nagkidhat sa suok.
- Superr — Usa ka mainit nga notebook sa eskwelahan sa hinay nga kahayag sa hapon. Usa ka panid nga kolor krema, usa ka orange nga marker nga walay taklob, ug usa ka pundok sa mga laminated name sticker nga naghulat nga tangtangon.
- Mews — Usa ka sentro sa pagkontrol sa pagkamaabiabihon sa kaadlawon, nabasa sa kolor rosas. Usa ka puti nga bungbong, nasidlakan sa adlaw nga workspace diin ang maisog nga itom nga letra, mainit nga krema nga mga kard, ug usa ka hot pink nga buton sa aksyon naghubit sa matag screen—usa ka malingaw nga pagsalig imbes nga pagpugong sa korporasyon.