Duolingo
Maskota e klasës së gjallë në letër të bardhë
Ndërfaqja e Duolingo-s është projektuar si një libër me figura për fëmijë: një kanavacë letre e bardhë, font i plotë dhe i rrumbullakosur dhe një ngjyrë e vetme jeshile e pasur që menjëherë evokon "përgjigjen e saktë". Teksti kryesor është një ton qetësues gri i mesëm, duke lejuar që jeshilja dhe bluja e saj e theksuar të bëjnë të gjithë punën emocionale - jeshile për progresin dhe titujt, blu për lidhjet e klikueshme dhe veprimet shtesë. Komponentët janë në formë pilulash ose qoshe të trasha dhe të rrumbullakosura me kufij të trashë të zi ose me ngjyra, duke e bërë çdo buton të ndihet më shumë si një afishe e ngjitur në faqe sesa si një kontroll i sheshtë i ndërfaqes së përdoruesit.
Seksionet zënë gjerësinë e plotë të faqes dhe janë të rregulluara vertikalisht në një kolonë të vetme, secila me lartësi afërsisht 800 piksel. Gjerësia maksimale e përmbajtjes është afërsisht 1 piksel në qendër. Teksti në të majtë dhe ilustrimet në të djathtë alternohen, duke siguruar hapësirë të bollshme vertikale (80 piksel midis seksioneve). Nuk ka karta rrjeti ose paraqitje me shumë kolona - çdo seksion është një bllok i vetëm teksti i çiftëzuar me një ilustrim të vetëm. Navigimi është një shirit minimalist në krye me një logo dhe përzgjedhës gjuhe, i cili shfaqet si një shirit i fiksuar midis seksioneve. Fundi i faqes është një shirit i gjelbër që përfshin të gjithë gjerësinë e faqes. Ritmi është editorial: titull, paragraf, thirrje për veprim, ilustrim, përsëritje.
Gjuha ilustruese e librit paraqet personazhe maskotash të sheshta, dy-dimensionale (duet buf dhe figura të ndryshme njerëzore) me forma gjeometrike të rrumbullakosura, konture të zeza të theksuara dhe një paletë ngjyrash plotësuese rozë, vjollcë, të verdhë, portokalli dhe blu që nuk shfaqet kurrë në vetë ndërfaqen. Ilustrimet janë të pozicionuara pranë tekstit në anën e djathtë të secilës pjesë, në një sfond të bardhë të pastër, pa enë ose sfonde. Nuk ka fotografi - personazhet shërbejnë si përmbajtje vizuale. Ikonografia përdor konture të trasha, në përputhje me stilin e maskotave. Dendësia e imazhit është e moderuar: çdo pjesë paraqet një ilustrim të madh të personazhit, me pjesën tjetër të faqes të përkushtuar ndaj tipografisë dhe hapësirës së bardhë.
Paletë
Markë
- Eager Green
#58cc02— Ngjyra jeshile përdoret për të nxjerrë në pah lidhjet, etiketat dhe frazat e shkurtra. Nuk duhet të përdoret si ngjyra kryesore për thirrjet për veprim. - Storybook Green
#d7ffb8— Theksime të buta në sipërfaqe të çelëta, tone delikate të sfondit pas etiketave të navigimit në fund të faqes.
Neutral
- Spark Blue
#1cb0f6— Ngjyra blu përdoret për të nxjerrë në pah lidhjet, etiketat dhe frazat e shkurtra. Nuk duhet të përdoret si ngjyra kryesore për thirrjet për veprim. - Fresh Leaf
#a5ed6e— Ngjyra jeshile përdoret për të nxjerrë në pah lidhjet, etiketat dhe frazat e shkurtra. Nuk duhet të përdoret si ngjyra kryesore për thirrjet për veprim. - Night Ink
#000437— Lidhjet, etiketat dhe frazat e shkurtra të theksuara janë të theksuara me ngjyrë vjollcë. - Paper White
#ffffff— Kanavacë faqesh, sipërfaqe kartoni, tekst butoni në sfond të gjelbër/të errët. - Charcoal
#4b4b4b— Titujt dhe Teksti i Trupit të Heroit - Tekst universal i errët që lejon që titujt me ngjyra të dallohen. - Pencil Gray
#777777— Paragrafët kryesorë të tekstit janë të theksuar me shkronja të padukshme, dhe teksti përshkrues dytësor tërhiqet në sfond, në mënyrë që elementët me ngjyra të dalin në pah.
Tipografi
nga 13 në 64px · 7 hapa
- feather — zëvendësim: Inter · skica 700 · Titujt e seksioneve, si "Falas. Argëtues. Efektiv" dhe "Test i Anglishtes Duolingo", shfaqen duke përdorur një font të rrumbullakosur të personalizuar, duke i dhënë markës stilin e saj të gjallë, miqësor dhe si maskota. Zëvendësojini me "Feather Bold" ose "Nunito Black" në trashësinë e duhur. Hapësira midis shkronjave: -0.0200em
- duolingo-sans — zëvendësim: Inter · skica 500 · Paragrafët kryesorë dhe lidhjet e navigimit në 17px/500—një font gjeometrik sans-serif që mbetet i lexueshëm, duke lejuar që pesha e rreshtit 700 të nxjerrë në pah pikat e rëndësishme. Zëvendësojeni me 'DIN Next', 'Inter' ose 'Nunito Sans'.
- duolingo-sans — zëvendësim: Inter · skica 700 · Përdoren të gjitha vlerat e peshës-700: shkronjat e mëdha në etiketat e navigimit janë 15px (ls 0.0530em), nëntitujt janë 19px dhe 32px, dhe theksi i lidhjes është 13px. I njëjti font si teksti kryesor - ndryshimi vizual është në peshë, jo në ndryshimin e fontit. Hapësira midis shkronjave: 0.0530em për shkronjat e mëdha në etiketat e navigimit.
Intervalet dhe forma
| Qëllimi | Kuptimi |
|---|---|
| Dendësia | i dendur |
| Hapi bazë | 12px |
| Rrezja e butonit | 12px |
| Rrezja e kartës | 12px |
| Hijet | pa kufij në vend të hijeve |
| Midis seksioneve | 80-120px |
| Gjerësia e faqes | 1200px |
IA do ta ndërtojë faqen tuaj të internetit në stilin Duolingo dhe do ta mbushë atë
- Plotësoni me produkte dhe postime përmes linkut - Instagram, TikTok, Facebook.
- Transferoni përmbajtje nga faqja juaj e vjetër—thjesht specifikoni adresën.
- Dizajn modern në motorin më të mirë: React ( Next.js) me renderim të serverit dhe optimizim SEO që në fillim.
- Optimizim plotësisht i automatizuar i SEO-s për rezultatet e kërkimit dhe rekomandimet e rrjeteve nervore.
Stile të ngjashme
- Family — Një përhapje nga një përrallë në pergamenë kremi
- Say Briefly — Bllok skicash i agjencisë krijuese në letër krem
- Flying Papers — Rrëfim në një karikaturë të së shtunës në mëngjes
- Portrait — Një mur kujtimesh, të kapura me fotografi Polaroid në letër ngjyrë krem. Një album i ndritshëm me ngjyrë krem, ku boja blu e errët shërben si teksti i vetëm, vijat e vetme të strukturës dhe ngjyra e vetme e kornizës - me një ylber të vetëm të vizatuar me dorë që shfaqet një herë, në butonin "Regjistrohu" dhe në fjalën e shkruar në italik "përgjithmonë", dhe kurrë më.
- Karl — Një dioramë 3D në stilin e librit që hapet menjëherë në një ditë me diell
- Navigate — Një set i madh ngjitësish të bashkangjitura në një tabelë: font i madh grotesk, të gjitha në formën e tabletave dhe pesë ikona shumëngjyrëshe, që përsëriten si një logo
- Monte — Mëngjes në bregdet me një nuancë të ndryshkur
- MotherDuck — Terminal i koduar me lapsa me ngjyra në letër kremi
- Wise Design — Një tezgë tregu me drita neoni në një rrugë globale—një tabelë e gjelbër e ndritshme që ulërinte përmes tregut të mbushur me njerëz, ndërsa pas saj, një ndërfaqe përdoruesi e lëmuar produkti shfaqet diskret.
- Hatch — Një dizajn i vizatuar me dorë, në stilin samizdat, i përzier me tasa karamelesh pastel. Një kanavacë letre kremoze e zbukuruar me detaje menteje, pika konfeti dhe thirrje për veprim në formë pilule, ku një font i madh serif i theksuar lë të kuptohet për argëtim, dhe një maskota blu shkel me sy në cep.
- Superr — Një fletore e ngrohtë shkolle në dritën e butë të pasdites. Një faqe ngjyrë krem, një shënues portokalli pa kapak dhe një pirg me afishe emrash të laminuara që presin të hiqen.
- Mews — Një qendër kontrolli mikpritjeje në agim, e mbuluar me rozë. Një hapësirë pune me mure të bardha, e ndriçuar nga dielli, ku çdo ekran përcaktohet nga shkronja të zeza të theksuara, karta krem të ngrohta dhe një buton i vetëm veprimi rozë i ndezur - një vetëbesim i gjallë në vend të një kufizimi korporativ.