Duolingo
Tus mascot hauv chav kawm ua si ntawm daim ntawv dawb
Duolingo lub interface yog tsim zoo li phau ntawv duab rau menyuam yaus: daim ntawv dawb canvas, plump, rounded font, thiab ib qho, nplua nuj ntsuab uas tam sim ntawd ua rau muaj "lus teb raug." Cov ntawv tseem ceeb yog cov xim grey nruab nrab, tso cai rau ntsuab thiab nws cov xim xiav ua txhua yam haujlwm kev xav - ntsuab rau kev nce qib thiab cov npe, xiav rau cov kev sib txuas uas nyem tau thiab cov haujlwm ntxiv. Cov khoom sib xyaw yog zoo li cov tshuaj lossis cov ces kaum chunky, puag ncig nrog cov xim dub lossis xim ciam teb, ua rau txhua lub pob zoo li daim ntawv nplaum lo rau ntawm nplooj ntawv dua li kev tswj hwm UI tiaj tus.
Cov ntu nyob rau hauv tag nrho qhov dav ntawm nplooj ntawv thiab tau teeb tsa ntsug hauv ib kab, txhua kab siab kwv yees li 800 pixels. Qhov dav tshaj plaws ntawm cov ntsiab lus yog kwv yees li 1 pixel nyob hauv nruab nrab. Cov ntawv nyeem ntawm sab laug thiab cov duab kos ntawm sab xis hloov pauv, muab qhov chaw ntsug dav (80 pixels ntawm cov ntu). Tsis muaj daim npav grid lossis ntau kab layouts - txhua ntu yog ib lub thaiv ntawv ua ke nrog ib daim duab kos. Kev taw qhia yog ib daim ntawv minimalist sab saum toj nrog lub logo thiab xaiv lus, uas tshwm sim ua ib daim kab ruaj khov ntawm cov ntu. Lub footer yog ib txoj kab ntsuab hla tag nrho qhov dav ntawm nplooj ntawv. Lub suab yog kho kom zoo nkauj: lub npe, nqe lus, hu rau kev nqis tes ua, duab kos, rov ua dua.
Cov lus piav qhia ntawm phau ntawv no muaj cov cim mascot tiaj tiaj, ob sab (Duet tus ntxhw thiab ntau yam duab tib neeg) nrog cov duab geometric puag ncig, cov kab dub tuab, thiab cov xim sib xyaw ntawm paj yeeb, ntshav, daj, txiv kab ntxwv, thiab xiav uas yeej tsis tshwm sim hauv qhov interface nws tus kheej. Cov duab kos tau muab tso rau ntawm cov ntawv nyeem ntawm sab xis ntawm txhua ntu, tawm tsam keeb kwm yav dhau dawb huv, tsis muaj thawv lossis keeb kwm yav dhau los. Tsis muaj duab - cov cim ua haujlwm ua cov ntsiab lus pom. Lub cim siv cov kab tuab, sib xws nrog cov qauv ntawm cov mascots. Cov duab ntom ntom yog nruab nrab: txhua ntu muaj ib daim duab loj ntawm tus cwj pwm, nrog rau seem ntawm nplooj ntawv mob siab rau typography thiab qhov chaw dawb.
Xim av
Hom
- Eager Green
#58cc02— Xim ntsuab yog siv los qhia txog cov kev sib txuas, cov cim npe, thiab cov kab lus luv luv. Nws yuav tsum tsis txhob siv ua xim tseem ceeb rau kev hu kom ua. - Storybook Green
#d7ffb8— Cov xim ci ntsa iab ntawm cov chaw teeb pom kev zoo, cov xim tom qab me me tom qab cov ntawv cim qhia kev hauv qab.
Nruab nrab
- Spark Blue
#1cb0f6— Xim xiav yog siv los qhia txog cov kev sib txuas, cov cim npe, thiab cov kab lus luv luv. Nws yuav tsum tsis txhob siv ua xim tseem ceeb rau kev hu kom ua. - Fresh Leaf
#a5ed6e— Xim ntsuab yog siv los qhia txog cov kev sib txuas, cov cim npe, thiab cov kab lus luv luv. Nws yuav tsum tsis txhob siv ua xim tseem ceeb rau kev hu kom ua. - Night Ink
#000437— Cov txuas, cov cim npe, thiab cov kab lus luv luv uas tau hais tawm raug qhia ua xim av. - Paper White
#ffffff— Nplooj ntawv canvas, cov ntawv cardboard, cov ntawv khawm ntawm keeb kwm yav dhau ntsuab/tsaus. - Charcoal
#4b4b4b— Cov Ntawv Sau Hauv Paus thiab Cov Ntawv Sau Hauv Lub Cev - Cov ntawv tsaus ntuj uas tso cai rau cov ntawv xov xwm muaj xim kom sawv tawm. - Pencil Gray
#777777— Cov kab lus tseem ceeb ntawm cov ntawv nyeem tau raug qhia nrog cov tsiaj ntawv uas tsis pom tseeb, thiab cov ntawv piav qhia thib ob rov qab mus rau tom qab, yog li cov ntsiab lus xim tuaj rau pem hauv ntej.
Kev sau ntawv
txij li 13 mus rau 64px · 7 kauj ruam
- feather — hloov: Inter · cov qauv qhia 700 · Cov npe ntawm ntu, xws li "Dawb. Lom Zem. Zoo" thiab "Duolingo English Test," raug tso tawm siv cov ntawv sau puag ncig, ua rau lub hom lag luam muaj kev lom zem, tus phooj ywg, zoo li tus mascot. Hloov nrog "Feather Bold" lossis "Nunito Black" hauv qhov hnyav tsim nyog. Qhov sib nrug ntawm tsab ntawv: -0.0200em
- duolingo-sans — hloov: Inter · cov qauv qhia 500 · Cov kab lus tseem ceeb thiab cov kev sib txuas navigation ntawm 17px/500—tus ntawv geometric sans-serif uas nyeem tau yooj yim, tso cai rau qhov hnyav ntawm kab 700 kom pom cov ntsiab lus tseem ceeb. Hloov nrog 'DIN Next', 'Inter', lossis 'Nunito Sans'.
- duolingo-sans — hloov: Inter · cov qauv qhia 700 · Txhua qhov hnyav-700 tus nqi siv: cov ntawv loj hauv cov ntawv navigation yog 15px (ls 0.0530em), cov ntawv me yog 19px thiab 32px, thiab qhov txuas tseem ceeb yog 13px. Cov ntawv tib yam li cov ntawv tseem ceeb - qhov sib txawv pom yog nyob rau hauv qhov hnyav, tsis yog qhov hloov pauv ntawm cov ntawv. Qhov sib nrug ntawm tsab ntawv: 0.0530em rau cov ntawv loj hauv cov ntawv navigation.
Lub sijhawm thiab daim ntawv
| Lub Hom Phiaj | Lub ntsiab lus |
|---|---|
| Qhov Ceev | ntom ntom |
| Kauj ruam yooj yim | 12px |
| Lub vojvoog ntawm lub pob | 12px |
| Lub vojvoog ntawm daim npav | 12px |
| Duab ntxoov ntxoo | tsis muaj ciam teb es tsis yog duab ntxoov ntxoo |
| Nruab nrab ntawm cov ntu | 80-120px |
| Qhov dav ntawm nplooj ntawv | 1200px |
AI yuav tsim koj lub vev xaib hauv hom ntawv Duolingo thiab sau nws
- Sau cov khoom thiab cov ntawv tshaj tawm los ntawm qhov txuas - Instagram, TikTok, Facebook.
- Hloov cov ntsiab lus ntawm koj lub xaib qub - tsuas yog qhia qhov chaw nyob xwb.
- Tsim qauv niaj hnub ntawm lub cav zoo tshaj plaws: React ( Next.js) nrog rau kev ua haujlwm ntawm lub server thiab kev ua kom zoo dua SEO tawm ntawm lub thawv.
- Kev ua kom zoo dua SEO tag nrho rau cov txiaj ntsig tshawb nrhiav thiab cov lus pom zoo ntawm neural network.
Cov qauv zoo sib xws
- Family — Ib qho kev nthuav dav los ntawm zaj dab neeg ntawm daim ntawv ci cream
- Say Briefly — Phau ntawv kos duab ntawm lub koom haum muaj tswv yim ntawm daim ntawv dawb
- Flying Papers — Kev Lees Txim rau ntawm Daim Duab Kos Hnub Saturday Sawv Ntxov
- Portrait — Ib phab ntsa ntawm kev nco, kaw hauv Polaroids ntawm daim ntawv xim dawb. Ib phau ntawv qhia ci ntsa iab, xim dawb uas cov kua xiav tsaus ua haujlwm ua tib cov ntawv nyeem, tib cov kab qauv, thiab tib xim thav duab - nrog ib qho zaj sawv kos tes uas tshwm sim ib zaug, ntawm lub pob "Sau Npe" thiab ntawm lo lus italic "mus ib txhis," thiab tsis muaj dua.
- Karl — Ib daim duab 3D pop-up style diorama rau hnub ci ntsa iab
- Navigate — Ib pawg ntawv nplaum loj loj uas txuas rau ntawm lub rooj tsavxwm: cov ntawv loj loj uas zoo li cov ntsiav tshuaj thiab tsib lub cim ntau xim, rov ua dua zoo li lub logo
- Monte — Sawv ntxov ntawm ntug dej hiav txwv nrog xim xeb
- MotherDuck — Terminal coded nrog cov cwj mem xim rau ntawm daim ntawv cream
- Wise Design — Ib lub khw muag khoom neon nyob ntawm txoj kev thoob ntiaj teb—ib lub cim ntsuab ci ntsa iab thoob plaws hauv lub khw uas muaj neeg coob coob, thaum tom qab nws, ib lub interface zoo nkauj tshwm sim zais cia.
- Hatch — Ib daim duab kos tes, zoo li samizdat sib xyaw nrog cov tais khoom qab zib pastel. Ib daim ntaub canvas creamy uas muaj cov xim mint, cov dots confetti, thiab cov lus hu kom ua haujlwm zoo li tshuaj ntsiav, qhov twg cov ntawv loj, tuab serif qhia txog kev lom zem, thiab lub mascot xiav ci ntsa iab hauv kaum tsev.
- Superr — Ib phau ntawv sau txog tsev kawm ntawv sov so hauv lub teeb ci ntsa iab thaum tav su. Ib nplooj ntawv xim dawb, ib tug cwj mem xim txiv kab ntxwv tsis muaj lub hau, thiab ib pawg ntawv nplaum npe uas tos kom tev tawm.
- Mews — Ib lub chaw tswj kev tos txais qhua thaum kaj ntug, puv nrog xim liab dawb. Ib qho chaw ua haujlwm uas muaj phab ntsa dawb, ci ntsa iab uas muaj cov ntawv dub ci ntsa iab, daim npav sov sov, thiab ib lub khawm ua haujlwm xim liab kub txhais txhua lub vijtsam - kev ntseeg siab ua si es tsis yog kev txwv tsis pub ua haujlwm.