Duolingo
Verspieltes Klassenmaskottchen auf weißem Papier
Duolingos Benutzeroberfläche ist wie ein Bilderbuch gestaltet: weißes Papier, eine voluminöse, runde Schriftart und ein sattes Grün, das sofort an die „richtige Antwort“ erinnert. Der Haupttext ist in einem beruhigenden Mittelgrau gehalten, sodass das Grün und sein Akzentblau die emotionale Wirkung entfalten können – Grün für Fortschrittsanzeige und Überschriften, Blau für anklickbare Links und zusätzliche Aktionen. Die Elemente haben die Form von Pillen oder abgerundeten Ecken mit dicken schwarzen oder farbigen Rändern, wodurch sich die Schaltflächen eher wie Aufkleber auf der Seite als wie flache Bedienelemente anfühlen.
Die Abschnitte erstrecken sich über die gesamte Seitenbreite und sind vertikal in einer einzigen Spalte angeordnet, jeweils ca. 800 Pixel hoch. Die maximale Inhaltsbreite beträgt zentriert ca. 1 Pixel. Text links und Illustrationen rechts wechseln sich ab und bieten so viel vertikalen Abstand (80 Pixel zwischen den Abschnitten). Es gibt keine Rasterkarten oder mehrspaltigen Layouts – jeder Abschnitt besteht aus einem einzelnen Textblock mit einer einzelnen Illustration. Die Navigation ist eine minimalistische obere Leiste mit Logo und Sprachauswahl, die als feststehende Leiste zwischen den Abschnitten erscheint. Die Fußzeile ist ein grüner Streifen, der sich über die gesamte Seitenbreite erstreckt. Der Aufbau ist redaktionell: Überschrift, Absatz, Handlungsaufforderung, Illustration, Wiederholung.
Die Bildsprache des Buches verwendet flache, zweidimensionale Maskottchenfiguren (die Eule Duet und verschiedene menschliche Figuren) mit abgerundeten geometrischen Formen, kräftigen schwarzen Konturen und einer komplementären Farbpalette aus Rosa, Lila, Gelb, Orange und Blau, die in der Benutzeroberfläche selbst nicht vorkommt. Die Illustrationen befinden sich rechts neben dem Text in jedem Abschnitt, vor einem reinweißen Hintergrund, ohne Rahmen oder Hintergrund. Es gibt keine Fotos – die Figuren dienen als visuelle Inhalte. Die Ikonografie verwendet dicke Konturen, die dem Stil der Maskottchen entsprechen. Die Bilddichte ist moderat: Jeder Abschnitt enthält eine große Illustration der jeweiligen Figur, der Rest der Seite ist für Typografie und Weißraum reserviert.
Palette
Marke
- Eager Green
#58cc02— Grün wird verwendet, um Links, Tags und kurze Phrasen hervorzuheben. Es sollte nicht als Hauptfarbe für Handlungsaufforderungen verwendet werden. - Storybook Green
#d7ffb8— Sanfte Glanzlichter auf hellen Oberflächen, dezente Hintergrundtöne hinter den Navigationsbezeichnungen in der Fußzeile.
Neutral
- Spark Blue
#1cb0f6— Blau dient zur Hervorhebung von Links, Schlagwörtern und kurzen Phrasen. Es sollte nicht als Hauptfarbe für Handlungsaufforderungen verwendet werden. - Fresh Leaf
#a5ed6e— Grün wird verwendet, um Links, Tags und kurze Phrasen hervorzuheben. Es sollte nicht als Hauptfarbe für Handlungsaufforderungen verwendet werden. - Night Ink
#000437— Links, Schlagwörter und kurze hervorgehobene Phrasen sind lila markiert. - Paper White
#ffffff— Seitenleinwand, Kartonoberflächen, Schaltflächentext auf grün/dunkelgrünem Hintergrund. - Charcoal
#4b4b4b— Hero-Überschriften und Fließtext – Universeller dunkler Text, der farbige Überschriften hervorhebt. - Pencil Gray
#777777— Die Hauptabschnitte des Textes werden mit unauffälligen Buchstaben hervorgehoben, während der beschreibende Nebentext in den Hintergrund tritt, sodass die farbigen Elemente in den Vordergrund treten.
Typografie
von 13 auf 64 Pixel · 7 Schritte
- feather — Ersatz: Inter · Umrisse 700 · Abschnittsüberschriften wie „Kostenlos. Unterhaltsam. Effektiv.“ und „Duolingo Englischtest“ werden in einer speziell angepassten, abgerundeten Schriftart dargestellt, die der Marke einen spielerischen, freundlichen und maskottchenartigen Stil verleiht. Ersetzen Sie diese durch „Feather Bold“ oder „Nunito Black“ in der passenden Schriftstärke. Buchstabenabstand: -0,0200em
- duolingo-sans — Ersatz: Inter · Umrisse 500 · Hauptabsätze und Navigationslinks in 17px/500 – einer geometrischen serifenlosen Schriftart, die gut lesbar bleibt und die Schriftstärke 700 zur Hervorhebung wichtiger Punkte nutzt. Ersetzen Sie diese durch „DIN Next“, „Inter“ oder „Nunito Sans“.
- duolingo-sans — Ersatz: Inter · Umrisse 700 · Alle Werte der Schriftstärke 700 werden verwendet: Großbuchstaben in Navigationsbezeichnungen sind 15px (0,0530em), Unterüberschriften 19px und 32px und Link-Hervorhebungen 13px. Es wird dieselbe Schriftart wie im Haupttext verwendet – der visuelle Unterschied liegt in der Schriftstärke, nicht in der Schriftart selbst. Der Buchstabenabstand beträgt 0,0530em für Großbuchstaben in Navigationsbezeichnungen.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 12px |
| Radius der Schaltfläche | 12px |
| Kartenradius | 12px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 80-120px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Duolingo -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- Family — Eine Doppelseite aus einem Märchen auf cremefarbenem Pergament
- Say Briefly — Skizzenbuch einer Kreativagentur auf cremefarbenem Papier
- Flying Papers — Geständnis in einem Samstagmorgen-Cartoon
- Portrait — Eine Wand voller Erinnerungen, festgehalten in Polaroids auf cremefarbenem Papier. Ein helles, cremefarbenes Fotoalbum, in dem dunkelblaue Tinte als einziger Text, einzige Strukturlinien und einzige Rahmenfarbe dient – mit einem einzigen handgezeichneten Regenbogen, der nur einmal erscheint, auf dem „Registrieren“-Button und auf dem kursiv gedruckten Wort „für immer“, und nie wieder.
- Karl — Ein 3D-Pop-up-Buch-Diorama an einem sonnigen Tag
- Navigate — Ein großer Satz Aufkleber, die auf einer Tafel befestigt sind: große, groteske Schriftart, alle in Form von Tafeln und fünf mehrfarbige Symbole, die sich wie ein Logo wiederholen.
- Monte — Morgen an der Küste mit rostfarbenem Schimmer
- MotherDuck — Terminal mit Buntstiften auf cremefarbenem Papier codiert
- Wise Design — Ein neonbeleuchteter Marktstand in einer globalen Straße – ein leuchtend grünes Schild, das durch den überfüllten Marktplatz hindurchschießt, während dahinter diskret eine elegante Benutzeroberfläche für ein Produkt erscheint.
- Hatch — Ein handgezeichnetes Design im Samisdat-Stil, kombiniert mit pastellfarbenen Bonbonieren. Eine cremefarbene Papierleinwand, verziert mit mintfarbenen Akzenten, Konfetti-Punkten und pillenförmigen Handlungsaufforderungen, wobei eine große, fette Serifenschrift Verspieltheit andeutet und ein blaues Maskottchen in der Ecke zwinkert.
- Superr — Ein warmes Schulheft im sanften Nachmittagslicht. Eine cremefarbene Seite, ein orangefarbener Filzstift ohne Kappe und ein Stapel laminierter Namensaufkleber, die darauf warten, abgelöst zu werden.
- Mews — Ein Kontrollzentrum im Gastgewerbe im Morgengrauen, in Rosa getaucht. Ein weiß getünchter, sonnendurchfluteter Arbeitsbereich, in dem kräftige schwarze Schrift, warme cremefarbene Karten und ein einzelner pinkfarbener Aktionsknopf jeden Bildschirm prägen – spielerische Selbstsicherheit statt geschäftsmäßiger Zurückhaltung.