Duolingo
Legesyg klassemaskot på hvidt papir
Duolingos brugerflade er designet som en børnebog: et hvidt lærred, en fyldig, afrundet skrifttype og en enkelt, fyldig grøn farve, der straks fremkalder det "rigtige svar". Hovedteksten er i beroligende mellemgrå toner, der tillader den grønne og dens accentblå at udføre alt det følelsesmæssige arbejde - grøn for fremskridt og overskrifter, blå for klikbare links og yderligere handlinger. Komponenterne er formet som piller eller tykke, afrundede hjørner med tykke sorte eller farvede kanter, hvilket får hver knap til at føles mere som et klistermærke, der sidder fast på siden, end en flad brugergrænsefladekontrol.
Sektioner optager hele sidens bredde og er arrangeret lodret i en enkelt kolonne, hver cirka 800 pixels høj. Den maksimale indholdsbredde er cirka 1 pixel centreret. Tekst til venstre og illustrationer til højre skiftes mellem hinanden, hvilket giver rigelig lodret plads (80 pixels mellem sektioner). Der er ingen gitterkort eller layout med flere kolonner – hvert afsnit er en enkelt tekstblok parret med en enkelt illustration. Navigationen er en minimalistisk toplinje med et logo og en sprogvælger, der vises som en fast bjælke mellem sektioner. Sidefoden er en grøn stribe, der strækker sig over hele sidens bredde. Rytmen er redaktionel: overskrift, afsnit, opfordring til handling, illustration, gentagelse.
Bogens illustrative sprog har flade, todimensionelle maskotfigurer (uglen Duet og forskellige menneskefigurer) med afrundede geometriske former, dristige sorte konturer og en komplementær farvepalet af pink, lilla, gul, orange og blå, der aldrig vises i selve brugerfladen. Illustrationerne er placeret ved siden af teksten i højre side af hvert afsnit mod en ren hvid baggrund uden beholdere eller baggrunde. Der er ingen fotografier – figurerne fungerer som det visuelle indhold. Ikonografien bruger tykke konturer, der stemmer overens med maskotternes stil. Billedtætheden er moderat: hvert afsnit har en stor illustration af figuren, mens resten af siden er dedikeret til typografi og hvidt rum.
Palet
Mærke
- Eager Green
#58cc02— Grøn bruges til at fremhæve links, tags og korte sætninger. Den bør ikke bruges som den primære farve til opfordringer til handling. - Storybook Green
#d7ffb8— Bløde fremhævninger på lyse overflader, diskrete baggrundstoner bag navigationsetiketterne i sidefoden.
Neutral
- Spark Blue
#1cb0f6— Blå bruges til at fremhæve links, tags og korte sætninger. Den bør ikke bruges som primærfarve til opfordringer til handling. - Fresh Leaf
#a5ed6e— Grøn bruges til at fremhæve links, tags og korte sætninger. Den bør ikke bruges som den primære farve til opfordringer til handling. - Night Ink
#000437— Links, tags og korte, fremhævede sætninger er fremhævet med lilla. - Paper White
#ffffff— Lærred, papoverflader, knaptekst på grøn/mørk baggrund. - Charcoal
#4b4b4b— Hovedoverskrifter og brødtekst - Universel mørk tekst, der gør det muligt for farvede overskrifter at skille sig ud. - Pencil Gray
#777777— De vigtigste tekstafsnit er fremhævet med diskrete bogstaver, og sekundær beskrivende tekst trækker sig tilbage i baggrunden, så de farvede elementer kommer i forgrunden.
Typografi
fra 13 til 64px · 7 trin
- feather — udskiftning: Inter · konturer 700 · Sektionsoverskrifter, såsom "Gratis. Sjov. Effektiv" og "Duolingo English Test", vises med en brugerdefineret afrundet skrifttype, der giver brandet dets legende, venlige og maskotlignende stil. Erstat med "Feather Bold" eller "Nunito Black" i den passende tykkelse. Bogstavafstand: -0,0200 em
- duolingo-sans — udskiftning: Inter · konturer 500 · Hovedafsnit og navigationslinks ved 17px/500 - en geometrisk sans-serif-skrifttype, der forbliver læsbar, hvilket gør det muligt for linjetykkelsen på 700 at fremhæve vigtige punkter. Erstat med 'DIN Next', 'Inter' eller 'Nunito Sans'.
- duolingo-sans — udskiftning: Inter · konturer 700 · Alle weight-700-værdier bruges: store bogstaver i navigationsetiketter er 15px (ls 0,0530em), underoverskrifter er 19px og 32px, og linkfremhævning er 13px. Samme skrifttype som hovedteksten – den visuelle forskel ligger i vægten, ikke i skrifttypeændringen. Bogstavafstand: 0,0530em for store bogstaver i navigationsetiketter.
Intervaller og form
| Formål | Mening |
|---|---|
| Tæthed | tæt |
| Grundlæggende trin | 12px |
| Knapradius | 12px |
| Kortradius | 12px |
| Skygger | ingen grænser i stedet for skygger |
| Mellem sektioner | 80-120px |
| Sidebredde | 1200px |
AI vil bygge din hjemmeside i Duolingo -stil og udfylde den
- Fyld med produkter og opslag via linket - Instagram, TikTok, Facebook.
- Overfør indhold fra dit gamle websted – angiv blot adressen.
- Moderne design på den bedste søgemotor: React ( Next.js) med serverrendering og SEO-optimering lige fra starten.
- Fuldautomatiseret SEO-optimering til søgeresultater og anbefalinger til neurale netværk.
Lignende stilarter
- Family — Et opslag fra et eventyr på flødepergament
- Say Briefly — Kreativt bureau skitseblok på cremefarvet papir
- Flying Papers — Tegneserie om en tilståelse på en lørdag morgen
- Portrait — En væg af minder, fanget i Polaroid-billeder på cremefarvet papir. En lys, cremefarvet scrapbog, hvor mørkeblå blæk fungerer som den eneste tekst, de eneste strukturlinjer og den eneste rammefarve – med en enkelt håndtegnet regnbue, der vises én gang, på "Registrer"-knappen og på det kursiverede ord "for evigt" og aldrig igen.
- Karl — Et 3D pop-up bog-stil diorama på en solskinsdag
- Navigate — Et stort sæt klistermærker fastgjort til en tavle: stor grotesk skrifttype, alle i form af tablets og fem flerfarvede ikoner, der gentages som et logo
- Monte — Morgen på kysten med et rustent skær
- MotherDuck — Terminal kodet med farveblyanter på cremefarvet papir
- Wise Design — En neonmarkedsbod på en global gade – et lysegrønt skilt, der skriger gennem den overfyldte markedsplads, mens en poleret produktbrugergrænseflade diskret dukker op.
- Hatch — Et håndtegnet design i samizdat-stil blandet med pastelfarvede slikskåle. Et cremet papirlærred udsmykket med mintgrønne accenter, konfettiprikker og pilleformede opfordringer til handling, hvor en stor, fed serif-skrifttype antyder sjov, og en blå maskot blinker i hjørnet.
- Superr — En varm skoleblok i det bløde eftermiddagslys. En cremefarvet side, en orange tusch uden låg og en stak laminerede navneklistermærker, der venter på at blive pillet af.
- Mews — Et kontrolcenter for hotel- og restaurationsbranchen ved daggry, oversvømmet i lyserødt. Et solbeskinnet arbejdsområde med hvide vægge, hvor dristig sort skrift, varme cremefarvede kort og en enkelt pink handlingsknap definerer hver skærm – en legende selvtillid snarere end en virksomheds tilbageholdenhed.