Duolingo
Leken klassemaskot på hvitt papir
Duolingos grensesnitt er utformet som en bildebok for barn: et hvitt papirlerret, fyldig, avrundet skrifttype og en enkelt, rik grønnfarge som umiddelbart fremkaller det «riktige svaret». Hovedteksten er i beroligende mellomgrå toner, som lar det grønne og dens aksentblå gjøre alt det emosjonelle arbeidet – grønt for fremdrift og overskrifter, blått for klikkbare lenker og tilleggshandlinger. Komponentene er formet som piller eller tykke, avrundede hjørner med tykke svarte eller fargede kanter, noe som gjør at hver knapp føles mer som et klistremerke festet til siden enn en flat UI-kontroll.
Seksjoner opptar hele sidens bredde og er ordnet vertikalt i en enkelt kolonne, hver omtrent 800 piksler høy. Maksimal innholdsbredde er omtrent 1 piksel sentrert. Tekst til venstre og illustrasjoner til høyre veksler, noe som gir god vertikal plass (80 piksler mellom seksjonene). Det finnes ingen rutenettkort eller flerkolonneoppsett – hver seksjon er en enkelt tekstblokk parret med en enkelt illustrasjon. Navigasjonen er en minimalistisk topplinje med en logo og språkvelger, som vises som en fast linje mellom seksjonene. Bunnteksten er en grønn stripe som strekker seg over hele sidens bredde. Rytmen er redaksjonell: overskrift, avsnitt, handlingsfremmende oppfordring, illustrasjon, repetisjon.
Bokens illustrerende språk har flate, todimensjonale maskotfigurer (uglen Duet og diverse menneskefigurer) med avrundede geometriske former, dristige svarte omriss og en komplementær fargepalett av rosa, lilla, gul, oransje og blå som aldri vises i selve grensesnittet. Illustrasjonene er plassert ved siden av teksten på høyre side av hver seksjon, mot en ren hvit bakgrunn, uten beholdere eller bakgrunner. Det er ingen fotografier – figurene fungerer som visuelt innhold. Ikonografien bruker tykke omriss, i samsvar med maskotenes stil. Bildetettheten er moderat: hver seksjon har én stor illustrasjon av figuren, mens resten av siden er viet til typografi og hvitt rom.
Palett
Merke
- Eager Green
#58cc02— Grønt brukes til å fremheve lenker, tagger og korte fraser. Det bør ikke brukes som primærfarge for handlingsfremmende oppfordringer. - Storybook Green
#d7ffb8— Myke høydepunkter på lyse overflater, subtile bakgrunnstoner bak navigasjonsetikettene i bunnteksten.
Nøytral
- Spark Blue
#1cb0f6— Blå brukes til å fremheve lenker, tagger og korte fraser. Den bør ikke brukes som primærfarge for handlingsfremmende oppfordringer. - Fresh Leaf
#a5ed6e— Grønt brukes til å fremheve lenker, tagger og korte fraser. Det bør ikke brukes som primærfarge for handlingsfremmende oppfordringer. - Night Ink
#000437— Lenker, tagger og korte, uthevede fraser er uthevet i lilla. - Paper White
#ffffff— Lerret, pappoverflater, knappetekst på grønn/mørk bakgrunn. - Charcoal
#4b4b4b— Hovedoverskrifter og brødtekst – Universell mørk tekst som gjør at fargede overskrifter skiller seg ut. - Pencil Gray
#777777— Hovedavsnittene i teksten er uthevet med diskrete bokstaver, og sekundær beskrivende tekst trekkes tilbake i bakgrunnen, slik at de fargede elementene kommer i forgrunnen.
Typografi
fra 13 til 64 piksler · 7 trinn
- feather — erstatning: Inter · omriss 700 · Seksjonsoverskrifter, som «Gratis. Morsomt. Effektivt» og «Duolingo engelsktest», vises med en tilpasset avrundet skrifttype, noe som gir merkevaren sin lekne, vennlige og maskotlignende stil. Erstatt med «Feather Bold» eller «Nunito Black» i riktig tykkelse. Bokstavavstand: -0,0200 em
- duolingo-sans — erstatning: Inter · omriss 500 · Hovedavsnitt og navigasjonslenker på 17px/500 – en geometrisk sans-serif-skrifttype som forblir lesbar, slik at linjetykkelsen på 700 kan fremheve viktige punkter. Erstatt med 'DIN Next', 'Inter' eller 'Nunito Sans'.
- duolingo-sans — erstatning: Inter · omriss 700 · Alle vekt-700-verdier brukes: store bokstaver i navigasjonsetiketter er 15 piksler (ls 0,0530em), underoverskrifter er 19 piksler og 32 piksler, og lenkeuthevelsen er 13 piksler. Samme skrifttype som hovedteksten – den visuelle forskjellen ligger i vekten, ikke skrifttypeendringen. Bokstavavstand: 0,0530em for store bokstaver i navigasjonsetiketter.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | tett |
| Grunnleggende trinn | 12px |
| Knapperadius | 12px |
| Kortradius | 12px |
| Skygger | ingen grenser i stedet for skygger |
| Mellom seksjoner | 80-120px |
| Sidebredde | 1200px |
AI vil bygge nettstedet ditt i Duolingo -stil og fylle det
- Fyll på med produkter og innlegg via lenken - Instagram, TikTok, Facebook.
- Overfør innhold fra det gamle nettstedet ditt – bare oppgi adressen.
- Moderne design på den beste søkemotoren: React ( Next.js) med serverrendering og SEO-optimalisering rett ut av boksen.
- Helautomatisk SEO-optimalisering for søkeresultater og anbefalinger fra nevrale nettverk.
Lignende stiler
- Family — Et oppslag fra et eventyr på krempergament
- Say Briefly — Skissebok for kreativt byrå på kremfarget papir
- Flying Papers — Tegneserie om tilståelse på en lørdag morgen
- Portrait — En vegg av minner, fanget i polaroidbilder på kremfarget papir. En lys, kremfarget utklippsbok der mørkeblått blekk fungerer som eneste tekst, eneste strukturlinjer og eneste rammefarge – med en enkelt håndtegnet regnbue som vises én gang, på «Registrer»-knappen og på det kursiverte ordet «for alltid», og aldri igjen.
- Karl — Et 3D-diorama i popup-bokstil på en solskinnsdag
- Navigate — Et stort sett med klistremerker festet til et brett: stor grotesk skrifttype, alle i form av nettbrett og fem flerfargede ikoner, som gjentas som en logo
- Monte — Morgen på kysten med et rustent skjær
- MotherDuck — Terminal kodet med fargeblyanter på kremfarget papir
- Wise Design — En neonfarget markedsbod på en global gate – et knallgrønt skilt skriker gjennom det overfylte markedet, mens bak det dukker et polert produktgrensesnitt diskré opp.
- Hatch — Et håndtegnet design i samizdat-stil blandet med pastellfargede godteriskåler. Et kremfarget papirlerret utsmykket med mintgrønne detaljer, konfettiprikker og pilleformede oppfordringer til handling, der en stor, fet serif-skrift hinter til moro, og en blå maskot blunker i hjørnet.
- Superr — En varm skolenotatbok i det myke ettermiddagslyset. En kremfarget side, en oransje tusj uten hette og en stabel med laminerte navneklistremerker som venter på å bli revet av.
- Mews — Et kontrollsenter for hotellbransjen ved daggry, dynket i rosa. Et solfylt arbeidsområde med hvite vegger, hvor dristig svart skrift, varme kremfargede kort og en enkelt knallrosa handlingsknapp definerer hver skjerm – en leken selvtillit snarere enn bedriftens tilbakeholdenhet.