Duolingo
Ludema klasa maskoto sur blanka papero
La interfaco de Duolingo estas desegnita kiel infanbildlibro: blanka papera kanvaso, dika, ronda tiparo, kaj ununura, riĉa verda koloro kiu tuj elvokas la "ĝustan respondon". La ĉefa teksto estas trankviligaj mezgrizaj tonoj, permesante al la verdo kaj ĝia akcenta bluo fari la tutan emocian laboron - verdo por progreso kaj titoloj, bluo por klakeblaj ligiloj kaj aldonaj agoj. Komponantoj estas formitaj kiel piloloj aŭ dikaj, rondaj anguloj kun dikaj nigraj aŭ koloraj randoj, igante ĉiun butonon sentiĝi pli kiel glumarko algluita al la paĝo ol plata UI-regilo.
Sekcioj okupas la plenan larĝon de la paĝo kaj estas aranĝitaj vertikale en ununura kolumno, ĉiu proksimume 800 rastrumeroj alta. La maksimuma larĝo de la enhavo estas ĉirkaŭ 1 rastrumero centrita. Teksto maldekstre kaj ilustraĵoj dekstre alternas, provizante ampleksan vertikalan spacon (80 rastrumeroj inter sekcioj). Ne estas kradkartoj aŭ plurkolumnaj aranĝoj - ĉiu sekcio estas ununura tekstbloko parigita kun ununura ilustraĵo. Navigado estas minimumisma supra breto kun emblemo kaj lingvoelektilo, kiu aperas kiel fiksa breto inter sekcioj. La piednoto estas verda strio etendiĝanta tra la tuta larĝo de la paĝo. La ritmo estas redakcia: titolo, paragrafo, alvoko al ago, ilustraĵo, ripeto.
La ilustra lingvaĵo de la libro prezentas platajn, dudimensiajn maskotajn rolulojn (Dueto la strigo kaj diversaj homaj figuroj) kun rondetaj geometriaj formoj, aŭdacaj nigraj konturoj, kaj komplementa kolorpaletro de rozo, viola, flava, oranĝa kaj blua, kiu neniam aperas en la interfaco mem. La ilustraĵoj estas poziciigitaj apud la teksto dekstre de ĉiu sekcio, kontraŭ pure blanka fono, sen ujoj aŭ fonoj. Ne estas fotoj — la roluloj servas kiel la vida enhavo. La ikonografio uzas dikajn konturojn, konformajn al la stilo de la maskotoj. La bilddenseco estas modera: ĉiu sekcio prezentas unu grandan ilustraĵon de la rolulo, kun la resto de la paĝo dediĉita al tipografio kaj blanka spaco.
Paletro
Marko
- Eager Green
#58cc02— Verda koloro estas uzata por reliefigi ligilojn, etikedojn kaj mallongajn frazojn. Ĝi ne devus esti uzata kiel la ĉefa koloro por alvokoj al ago. - Storybook Green
#d7ffb8— Molaj reliefaĵoj sur helaj surfacoj, subtilaj fonaj tonoj malantaŭ la navigaciaj etikedoj en la piedlinio.
Neŭtrala
- Spark Blue
#1cb0f6— Blua koloro estas uzata por reliefigi ligilojn, etikedojn kaj mallongajn frazojn. Ĝi ne devus esti uzata kiel la ĉefa koloro por alvokoj al ago. - Fresh Leaf
#a5ed6e— Verda koloro estas uzata por reliefigi ligilojn, etikedojn kaj mallongajn frazojn. Ĝi ne devus esti uzata kiel la ĉefa koloro por alvokoj al ago. - Night Ink
#000437— Ligiloj, etikedoj kaj mallongaj elstarigitaj frazoj estas elstarigitaj per violkoloro. - Paper White
#ffffff— Paĝkanvaso, kartonaj surfacoj, butonteksto sur verda/malhela fono. - Charcoal
#4b4b4b— Ĉeftitoloj kaj Korpteksto - Universala malhela teksto, kiu permesas al koloraj titoloj elstari. - Pencil Gray
#777777— La ĉefaj alineoj de teksto estas elstarigitaj per diskretaj literoj, kaj sekundara priskriba teksto retiriĝas en la fonon, tiel ke la koloraj elementoj venas al la avangardo.
Tipografio
de 13 ĝis 64 rastrumeroj · 7 paŝoj
- feather — anstataŭaĵo: Inter · konturoj 700 · Sekciaj titoloj, kiel ekzemple "Senpaga. Amuza. Efika" kaj "Duolingo Angla Testo", estas montrataj per kutima ronda tiparo, donante al la marko ĝian ludeman, amikan, maskotecan stilon. Anstataŭigu per "Feather Bold" aŭ "Nunito Black" kun la taŭga dikeco. Literspaco: -0.0200em
- duolingo-sans — anstataŭaĵo: Inter · konturoj 500 · Ĉefaj paragrafoj kaj navigaciaj ligiloj je 17px/500—geometria sanserifa tiparo kiu restas legebla, permesante al la 700-linia pezo reliefigi gravajn punktojn. Anstataŭigu per 'DIN Next', 'Inter', aŭ 'Nunito Sans'.
- duolingo-sans — anstataŭaĵo: Inter · konturoj 700 · Ĉiuj valoroj kun pezo-700 estas uzataj: majuskloj en navigaciaj etikedoj estas 15px (ls 0.0530em), subtitoloj estas 19px kaj 32px, kaj ligilo-emfazo estas 13px. La sama tiparo kiel la ĉefa teksto — la vida diferenco estas en la pezo, ne la ŝanĝo de tiparo. Interspaco inter literoj: 0.0530em por majuskloj en navigaciaj etikedoj.
Intervaloj kaj formo
| Celo | Signifo |
|---|---|
| Denseco | densa |
| Baza paŝo | 12px |
| Butona radiuso | 12px |
| Karto-radiuso | 12px |
| Ombroj | ne - limoj anstataŭ ombroj |
| Inter sekcioj | 80-120px |
| Paĝlarĝo | 1200px |
AI konstruos vian retejon laŭ la stilo de Duolingo kaj plenigos ĝin
- Plenigu per produktoj kaj afiŝoj per la ligilo - Instagram, TikTok, Facebook.
- Transdonu enhavon de via malnova retejo — nur specifu la adreson.
- Moderna dezajno sur la plej bona motoro: React ( Next.js) kun servila bildigo kaj SEO-optimigo tuj uzeblaj.
- Plene aŭtomatigita SEO-optimigo por serĉrezultoj kaj rekomendoj pri neŭralaj retoj.
Similaj stiloj
- Family — Disvastiĝo el fabelo sur kremkolora pergameno
- Say Briefly — Skizbloko de kreiva agentejo sur kremkolora papero
- Flying Papers — Konfeso en Sabatmatena Bildstrio
- Portrait — Muro de memoroj, kaptitaj per Polaroidoj sur kremkolora papero. Brila, kremkolora memoralbumo kie malhelblua inko servas kiel la sola teksto, la solaj strukturaj linioj, kaj la sola kadra koloro — kun ununura mane desegnita ĉielarko kiu aperas unufoje, sur la butono "Registriĝi" kaj sur la kursiva vorto "eterne", kaj neniam plu.
- Karl — 3D-a ŝpruclibro-stila dioramo en suna tago
- Navigate — Granda aro da glumarkoj algluitaj al tabulo: granda groteska tiparo, ĉio en formo de tabulkomputiloj kaj kvin multkoloraj ikonoj, ripetante kiel emblemo
- Monte — Mateno sur la marbordo kun rusta nuanco
- MotherDuck — Terminalo kodita per koloraj krajonoj sur kremkolora papero
- Wise Design — Neona merkatbudo sur tutmonda strato — hele verda ŝildo kriante tra la plena foirejo, dum malantaŭ ĝi, polurita produkta uzantinterfaco aperas diskrete.
- Hatch — Mane desegnita, samizdat-stila desegno miksita kun pastelkoloraj bombonujoj. Kremkolora papera kanvaso ornamita per mentaj akcentoj, konfetaj punktoj kaj pilolformaj alvokoj al ago, kie granda, aŭdaca serifa tiparo sugestas amuzon, kaj blua maskoto palpebrumas en la angulo.
- Superr — Varma lerneja kajero en la mola posttagmeza lumo. Kremkolora paĝo, oranĝa markilo sen kovrilo, kaj stako da lamenigitaj nomglumarkoj atendantaj esti deŝiritaj.
- Mews — Gastama kontrolcentro ĉe tagiĝo, trempita en rozo. Blankmura, sunlumita laborejo, kie aŭdacaj nigraj literoj, varmkremaj kartoj, kaj ununura varmega rozkolora agbutono difinas ĉiun ekranon — ludema memfido anstataŭ entreprena modereco.