Duolingo
Spilllech Klassemaskottchen op wäissem Pabeier
D'Interface vun Duolingo ass wéi e Kannerbillerbuch entworf: eng wäiss Pabeierleinwand, eng déck, gerundet Schrëft an eng eenzeg, räich gréng Faarf, déi direkt déi "richteg Äntwert" ervirrufft. Den Haapttext ass e berouegende mëttlergroen Téin, wouduerch d'Gréng a säi blo Akzent all déi emotional Aarbecht maache kënnen - gréng fir Fortschrëtt an Iwwerschrëften, blo fir klickbar Linken an zousätzlech Aktiounen. D'Komponente si geformt wéi Pëllen oder déck, gerundet Ecker mat décke schwaarzen oder faarwege Borduren, sou datt all Knäppchen sech méi wéi en Sticker op der Säit fillt wéi eng flaach UI-Kontroll.
D'Sektiounen huelen déi ganz Breet vun der Säit an a sinn vertikal an enger eenzeger Kolonn arrangéiert, all ongeféier 800 Pixel héich. Déi maximal Inhaltsbreet ass ongeféier 1 Pixel zentréiert. Text lénks an Illustratiounen riets wiesselen sech of, wat vill vertikale Raum bitt (80 Pixel tëscht de Sektiounen). Et gëtt keng Rasterkaarten oder Layouts mat verschiddene Kolonnen - all Sektioun ass en eenzegen Textblock gepaart mat enger eenzeger Illustratioun. D'Navigatioun ass eng minimalistesch iewescht Leescht mat engem Logo an engem Sproochewieler, deen als fixe Leescht tëscht de Sektiounen erschéngt. De Fousszeil ass e grénge Sträif, deen déi ganz Breet vun der Säit erstreckt. De Rhythmus ass redaktionell: Iwwerschrëft, Absatz, Handlungsruff, Illustratioun, Widderhuelung.
Déi illustrativ Sprooch vum Buch weist flaach, zweedimensional Maskottchefiguren (Duet d'Eil a verschidde mënschlech Figuren) mat gerundeten geometresche Formen, fett schwaarze Konturen an enger komplementärer Faarfpalette vu rosa, violett, giel, orange a blo, déi ni an der Interface selwer erschéngt. D'Illustratioune sinn nieft dem Text op der rietser Säit vun all Sektioun positionéiert, virun engem reng wäissen Hannergrond, ouni Behälter oder Hannergrënn. Et gi keng Fotoen - d'Personnagen déngen als visuellen Inhalt. D'Ikonographie benotzt déck Konturen, déi mam Stil vun de Maskottchen iwwereneestëmmen. D'Bilddicht ass mëttel: all Sektioun weist eng grouss Illustratioun vum Personnage, während de Rescht vun der Säit der Typographie a wäissem Raum gewidmet ass.
Palette
Mark
- Eager Green
#58cc02— Gréng gëtt benotzt fir Linken, Tags a kuerz Ausdréck ervirzehiewen. Et sollt net als Haaptfaarf fir Handlungsruff benotzt ginn. - Storybook Green
#d7ffb8— Mëll Highlights op hellen Uewerflächen, subtil Hannergrondtéin hannert den Navigatiounsbeschrëftungen am Fousszeilen.
Neutral
- Spark Blue
#1cb0f6— Blo gëtt benotzt fir Linken, Tags a kuerz Ausdréck ervirzehiewen. Et sollt net als Haaptfaarf fir Handlungsruff benotzt ginn. - Fresh Leaf
#a5ed6e— Gréng gëtt benotzt fir Linken, Tags a kuerz Ausdréck ervirzehiewen. Et sollt net als Haaptfaarf fir Handlungsruff benotzt ginn. - Night Ink
#000437— Linken, Tags a kuerz markéiert Ausdréck sinn a violett markéiert. - Paper White
#ffffff— Säit Leinwand, Kartonoberflächen, Knäppchentext op gréngen/donkelen Hannergrond. - Charcoal
#4b4b4b— Hero Headers an Body Text - Universalen donkelen Text, deen et erlaabt, faarweg Iwwerschrëften erauszestoen. - Pencil Gray
#777777— Déi Haaptabschnitter vum Text sinn mat onopfällege Buschtawen ervirgehuewen, an den zweeten beschreiwenden Text zitt sech an den Hannergrond zréck, sou datt déi faarweg Elementer an de Virdergrond kommen.
Typographie
vun 13 bis 64px · 7 Schrëtt
- feather — Ersatz: Inter · Konturen 700 · Sektiounsiwwerschrëften, wéi "Gratis. Spaass. Effektiv" an "Duolingo Englesch Test", ginn an enger personaliséierter gerundeter Schrëft ugewisen, wat der Mark hire spillereschen, frëndleche, maskottchenähnleche Stil gëtt. Ersetzt duerch "Feather Bold" oder "Nunito Black" an der entspriechender Gewiichtsgrenz. Buschtawenofstand: -0.0200em
- duolingo-sans — Ersatz: Inter · Konturen 500 · Haaptabschnitter a Navigatiounslinke mat 17px/500 – eng geometresch Sans-Serif-Schrëft, déi liesbar bleift, sou datt d'Zeilendickung vu 700 wichteg Punkten ervirhieft. Ersetzt duerch 'DIN Next', 'Inter' oder 'Nunito Sans'.
- duolingo-sans — Ersatz: Inter · Konturen 700 · All Weight-700 Wäerter ginn benotzt: Groussbuschtawen an Navigatiounslabelen sinn 15px (ls 0.0530em), Ënnertitelen sinn 19px an 32px, an d'Linkbetounung ass 13px. Déi selwecht Schrëft wéi den Haapttext - den visuellen Ënnerscheed ass an der Gewiicht, net an der Schrëftännerung. Buschtawenofstand: 0.0530em fir Groussbuschtawen an Navigatiounslabelen.
Intervaller a Form
| Zweck | Bedeitung |
|---|---|
| Dicht | dicht |
| Basis Schrëtt | 12px |
| Knäppchenradius | 12px |
| Kaarteradius | 12px |
| Schied | keng Grenzen amplaz vu Schied |
| Tëscht de Sektiounen | 80-120px |
| Säitebreet | 1200px |
KI baut Är Websäit am Stil vun Duolingo op a fëllt se aus
- Fëllt mat Produkter a Posts iwwer de Link aus - Instagram, TikTok, Facebook.
- Inhalt vun Ärer aler Säit transferéieren - gitt einfach d'Adress un.
- Modernen Design op der beschter Engine: React ( Next.js) mat Serverrendering an SEO Optimiséierung direkt aus der Këscht.
- Vollautomatesch SEO-Optimiséierung fir Sichresultater an Empfehlungen fir neuronal Netzwierker.
Ähnlech Stiler
- Family — E Mäerchen op Crèmepergament
- Say Briefly — Skizzenbuch vun der Kreativagentur op Crèmepabeier
- Flying Papers — Geständnis op engem Samschdegmoien Cartoon
- Portrait — Eng Mauer vun Erënnerungen, festgehalen a Polaroids op crèmefaarwegem Pabeier. E hellt, crèmefaarwegt Scrapbook, wou donkelblo Tënt als eenzegen Text, déi eenzeg Strukturlinnen an déi eenzeg Kaderfaarf déngt - mat engem eenzegen handgezeechente Reebou, deen eemol erschéngt, um "Registréieren"-Knäppchen an um kursivéierte Wuert "fir ëmmer", an ni méi.
- Karl — En 3D Pop-up Buch-Diorama un engem sonnegen Dag
- Navigate — E grousse Set Stickeren, deen op enger Brett befestegt ass: grouss grotesk Schrëft, all a Form vun Tabletten a fënnef faarweg Ikonen, déi sech wéi e Logo widderhuelen.
- Monte — Moies un der Küst mat engem rostigen Téin
- MotherDuck — Terminal mat faarwege Bläistëfter op Crèmepabeier kodéiert
- Wise Design — E Neonmaartstand op enger globaler Strooss – e knallgréngt Schëld, dat duerch de vollgepackte Maart jäizt, während hannendrun diskret eng poléiert Produktbenutzeroberfläche erschéngt.
- Hatch — En handgezeechent Design am Samizdat-Stil gemëscht mat pastellfaarwege Séissegkeetsschüsselen. Eng cremeg Pabeierleinwand, déi mat mintfarbenen Akzenter, Konfetti-Punkten a pillefërmegen Handlungsopruff dekoréiert ass, wou eng grouss, fett Serif-Schrëft op Spaass hiweist, an e bloe Maskottchen an der Eck zwinkert.
- Superr — En waarme Schoulbuch am mëllen Nomëttegsliicht. Eng crèmefaarweg Säit, en orange Marker ouni Deckel, an e Stapel laminéierten Nummsaufkleber, déi drop waarden, ofgezunn ze ginn.
- Mews — E Kontrollzentrum fir d'Gastronomie bei Sonnenopgang, a Rosa gedränkt. E sonnebeliichte Workspace mat wäisse Maueren, wou fett schwaarz Schrëft, waarm Crème-Kaarten an een eenzege knallrosa Aktiounsknäppchen all Bildschierm definéieren - e spillerescht Selbstvertrauen anstatt eng korporativ Zréckhaltung.