Duolingo
Speelse klasmaskotte op wit papier
Duolingo se koppelvlak is ontwerp soos 'n kinderprenteboek: 'n wit papierdoek, 'n plomp, afgeronde lettertipe en 'n enkele, ryk groen kleur wat onmiddellik die "korrekte antwoord" oproep. Die hoofteks is 'n strelende middelgrys kleur, wat die groen en sy aksentblou toelaat om al die emosionele werk te doen - groen vir vordering en opskrifte, blou vir klikbare skakels en bykomende aksies. Komponente is gevorm soos pille of dik, afgeronde hoeke met dik swart of gekleurde rande, wat elke knoppie meer soos 'n plakker op die bladsy laat voel as 'n plat gebruikerskoppelvlakbeheer.
Afdelings beslaan die volle breedte van die bladsy en word vertikaal in 'n enkele kolom gerangskik, elk ongeveer 800 pixels hoog. Die maksimum inhoudbreedte is ongeveer 1 pixel gesentreer. Teks aan die linkerkant en illustrasies aan die regterkant wissel af, wat ruim vertikale spasie bied (80 pixels tussen afdelings). Daar is geen roosterkaarte of multikolom-uitlegte nie – elke afdeling is 'n enkele teksblok gepaard met 'n enkele illustrasie. Navigasie is 'n minimalistiese boonste balk met 'n logo en taalkieser, wat as 'n vaste balk tussen afdelings verskyn. Die voetskrif is 'n groen streep wat die hele breedte van die bladsy oorspan. Die ritme is redaksioneel: opskrif, paragraaf, oproep tot aksie, illustrasie, herhaling.
Die boek se illustratiewe taal bevat plat, tweedimensionele gelukbringerkarakters (Duet die uil en verskeie menslike figure) met afgeronde geometriese vorms, vet swart buitelyne en 'n komplementêre kleurpalet van pienk, pers, geel, oranje en blou wat nooit in die koppelvlak self verskyn nie. Die illustrasies is langs die teks aan die regterkant van elke afdeling geplaas, teen 'n suiwer wit agtergrond, sonder houers of agtergronde. Daar is geen foto's nie - die karakters dien as die visuele inhoud. Die ikonografie gebruik dik buitelyne, in ooreenstemming met die styl van die gelukbringer. Beelddigtheid is matig: elke afdeling bevat een groot illustrasie van die karakter, met die res van die bladsy gewy aan tipografie en wit spasie.
Palet
Handelsmerk
- Eager Green
#58cc02— Groen word gebruik om skakels, etikette en kort frases uit te lig. Dit moet nie as die primêre kleur vir oproepe tot aksie gebruik word nie. - Storybook Green
#d7ffb8— Sagte hoogtepunte op ligte oppervlaktes, subtiele agtergrondtone agter die navigasie-etikette in die voetskrif.
Neutraal
- Spark Blue
#1cb0f6— Blou word gebruik om skakels, etikette en kort frases uit te lig. Dit moet nie as die primêre kleur vir oproepe tot aksie gebruik word nie. - Fresh Leaf
#a5ed6e— Groen word gebruik om skakels, etikette en kort frases uit te lig. Dit moet nie as die primêre kleur vir oproepe tot aksie gebruik word nie. - Night Ink
#000437— Skakels, etikette en kort gemerkte frases word in pers uitgelig. - Paper White
#ffffff— Bladsydoek, kartonoppervlaktes, knoppieteks op groen/donker agtergrond. - Charcoal
#4b4b4b— Helde-opskrifte en liggaamsteks - Universele donker teks wat gekleurde opskrifte laat uitstaan. - Pencil Gray
#777777— Die hoofparagrawe van die teks word met onopvallende letters uitgelig, en sekondêre beskrywende teks verdwyn in die agtergrond, sodat die gekleurde elemente na vore kom.
Tipografie
van 13 tot 64px · 7 stappe
- feather — vervanging: Inter · buitelyne 700 · Afdelingsopskrifte, soos "Gratis. Pret. Effektief" en "Duolingo Engelse Toets," word vertoon met 'n persoonlike afgeronde lettertipe, wat die handelsmerk sy speelse, vriendelike, gelukbringer-agtige styl gee. Vervang met "Feather Bold" of "Nunito Black" in die toepaslike gewig. Letterafstand: -0.0200em
- duolingo-sans — vervanging: Inter · buitelyne 500 · Hoofparagrawe en navigasieskakels teen 17px/500—’n geometriese sans-serif-lettertipe wat leesbaar bly, wat die 700-lyngewig belangrike punte laat uitlig. Vervang met 'DIN Next', 'Inter' of 'Nunito Sans'.
- duolingo-sans — vervanging: Inter · buitelyne 700 · Alle gewig-700 waardes word gebruik: hoofletters in navigasie-etikette is 15px (ls 0.0530em), subopskrifte is 19px en 32px, en skakelklem is 13px. Dieselfde lettertipe as die hoofteks—die visuele verskil is in die gewig, nie die lettertipeverandering nie. Letterspasiëring: 0.0530em vir hoofletters in navigasie-etikette.
Intervalle en vorm
| Doel | Betekenis |
|---|---|
| Digtheid | dig |
| Basiese stap | 12px |
| Knoppieradius | 12px |
| Kaartradius | 12px |
| Skaduwees | geen grense in plaas van skaduwees |
| Tussen afdelings | 80-120px |
| Bladsybreedte | 1200px |
KI sal jou webwerf in Duolingo -styl bou en dit vul
- Vul met produkte en plasings via die skakel - Instagram, TikTok, Facebook.
- Dra inhoud van jou ou webwerf oor – spesifiseer net die adres.
- Moderne ontwerp op die beste enjin: React ( Next.js) met bedienerweergawe en SEO-optimalisering reg uit die boks.
- Volledig outomatiese SEO-optimering vir soekresultate en neurale netwerkaanbevelings.
Soortgelyke style
- Family — 'n Uitleg uit 'n sprokie op room perkament
- Say Briefly — Sketsboek van kreatiewe agentskap op roompapier
- Flying Papers — Belydenis op 'n Saterdagoggend-spotprent
- Portrait — 'n Muur van herinneringe, vasgevang in Polaroids op roomkleurige papier. 'n Helder, roomkleurige plakboek waar donkerblou ink dien as die enigste teks, die enigste struktuurlyne en die enigste raamkleur—met 'n enkele handgetekende reënboog wat een keer verskyn, op die "Registreer"-knoppie en op die kursiefgedrukte woord "vir altyd", en nooit weer nie.
- Karl — 'n 3D-opwipboekstyl-diorama op 'n sonnige dag
- Navigate — 'n Groot stel plakkers wat aan 'n bord geheg is: groot groteske lettertipe, alles in die vorm van tablette en vyf veelkleurige ikone, wat soos 'n logo herhaal word.
- Monte — Oggend aan die kus met 'n roesagtige tint
- MotherDuck — Terminaal gekodeer met kleurpotlode op roompapier
- Wise Design — ’n Neonmarkstalletjie op ’n globale straat – ’n heldergroen teken wat deur die stampvol markplein skreeu, terwyl daaragter ’n gepoleerde produkgebruikerskoppelvlak diskreet verskyn.
- Hatch — 'n Handgetekende ontwerp in samizdat-styl gemeng met pastelkleurige lekkergoedbakkies. 'n Romige papierdoek versier met kruisementaksente, konfetti-kolletjies en pilvormige oproepe tot aksie, waar 'n groot, vet serif-lettertipe op pret dui, en 'n blou gelukbringer in die hoek knipoog.
- Superr — ’n Warm skoolnotaboek in die sagte middaglig. ’n Roomkleurige bladsy, ’n oranje merker sonder ’n deksel, en ’n stapel gelamineerde naamplakkers wat wag om afgeskil te word.
- Mews — ’n Gasvryheidsbeheersentrum met dagbreek, deurdrenk van pienk. ’n Witmuurige, sonnige werkruimte waar vet swart letters, warm roomkleurige kaarte en ’n enkele helderpienk aksieknoppie elke skerm definieer – ’n speelse selfvertroue eerder as korporatiewe terughoudendheid.