Duolingo
Speelse klassenmascotte op wit papier
De interface van Duolingo is ontworpen als een kinderprentenboek: een wit canvas, een mollig, afgerond lettertype en één enkele, rijke groene kleur die direct het "juiste antwoord" oproept. De hoofdtekst is uitgevoerd in een rustgevende middengrijze tint, waardoor het groen en het accentblauw alle emotionele lading overbrengen – groen voor voortgangsmarkeringen en kopjes, blauw voor klikbare links en extra acties. Componenten hebben de vorm van pillen of stevige, afgeronde hoeken met dikke zwarte of gekleurde randen, waardoor elke knop meer aanvoelt als een sticker op de pagina dan als een plat UI-element.
Secties beslaan de volledige breedte van de pagina en zijn verticaal gerangschikt in één kolom, elk ongeveer 800 pixels hoog. De maximale breedte van de inhoud is ongeveer 1 pixel gecentreerd. Tekst aan de linkerkant en illustraties aan de rechterkant wisselen elkaar af, waardoor er voldoende verticale ruimte is (80 pixels tussen de secties). Er zijn geen rasterkaarten of lay-outs met meerdere kolommen – elke sectie bestaat uit één tekstblok met één illustratie. De navigatie is een minimalistische bovenbalk met een logo en een taalkiezer, die als een vaste balk tussen de secties verschijnt. De voettekst is een groene strook over de volledige breedte van de pagina. Het ritme is redactioneel: kop, alinea, call-to-action, illustratie, herhaling.
De illustraties in het boek kenmerken zich door platte, tweedimensionale mascottefiguren (Uil Duet en diverse mensfiguren) met afgeronde geometrische vormen, dikke zwarte contouren en een complementair kleurenpalet van roze, paars, geel, oranje en blauw dat niet in de interface zelf voorkomt. De illustraties staan rechts van elke sectie naast de tekst, tegen een puur witte achtergrond, zonder kaders of achtergronden. Er zijn geen foto's – de personages vormen de visuele inhoud. De iconografie maakt gebruik van dikke contouren, in lijn met de stijl van de mascottes. De beelddichtheid is gemiddeld: elke sectie bevat één grote illustratie van het personage, de rest van de pagina is gewijd aan typografie en witruimte.
Palet
Merk
- Eager Green
#58cc02— Groen wordt gebruikt om links, tags en korte zinnen te benadrukken. Het mag niet als primaire kleur voor call-to-actions worden gebruikt. - Storybook Green
#d7ffb8— Zachte accenten op lichte oppervlakken, subtiele achtergrondtinten achter de navigatielabels in de footer.
Neutrale
- Spark Blue
#1cb0f6— Blauw wordt gebruikt om links, tags en korte zinnen te benadrukken. Het mag niet als primaire kleur voor call-to-actions worden gebruikt. - Fresh Leaf
#a5ed6e— Groen wordt gebruikt om links, tags en korte zinnen te benadrukken. Het mag niet als primaire kleur voor call-to-actions worden gebruikt. - Night Ink
#000437— Links, tags en korte, gemarkeerde zinnen worden paars weergegeven. - Paper White
#ffffff— Pagina-canvas, kartonnen oppervlakken, knoptekst op een groen/donkere achtergrond. - Charcoal
#4b4b4b— Hero-koppen en hoofdtekst - Universele donkere tekst waardoor gekleurde koppen opvallen. - Pencil Gray
#777777— De belangrijkste alinea's van de tekst zijn gemarkeerd met onopvallende letters, en secundaire beschrijvende tekst is naar de achtergrond verdwenen, zodat de gekleurde elementen op de voorgrond treden.
Typografie
van 13 tot 64px · 7 stappen
- feather — vervanging: Inter · overzichten 700 · Sectiekoppen, zoals 'Gratis. Leuk. Effectief' en 'Duolingo Engelse Test', worden weergegeven met een aangepast, afgerond lettertype, wat het merk een speelse, vriendelijke, mascotte-achtige uitstraling geeft. Vervang dit door 'Feather Bold' of 'Nunito Black' in de juiste dikte. Letterafstand: -0,0200em
- duolingo-sans — vervanging: Inter · overzichten 500 · Hoofdparagrafen en navigatielinks in 17px/500—een geometrisch schreefloos lettertype dat leesbaar blijft, waardoor de lijndikte van 700 belangrijke punten kan benadrukken. Vervang door 'DIN Next', 'Inter' of 'Nunito Sans'.
- duolingo-sans — vervanging: Inter · overzichten 700 · Alle waarden van gewicht 700 worden gebruikt: hoofdletters in navigatielabels zijn 15px (ls 0.0530em), subkoppen zijn 19px en 32px, en links met nadruk zijn 13px. Hetzelfde lettertype als de hoofdtekst – het visuele verschil zit hem in de dikte, niet in het lettertype zelf. Letterafstand: 0.0530em voor hoofdletters in navigatielabels.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gespannen |
| Basisstap | 12px |
| Knopradius | 12px |
| Kaartradius | 12px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 80-120px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Duolingo en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Family — Een pagina uit een sprookje op crèmekleurig perkament.
- Say Briefly — Schetsboek van een creatief bureau op crèmekleurig papier
- Flying Papers — Bekentenis in een tekenfilm op zaterdagmorgen
- Portrait — Een muur vol herinneringen, vastgelegd in Polaroidfoto's op crèmekleurig papier. Een helder, crèmekleurig plakboek waarin donkerblauwe inkt dient als enige tekst, enige structuurlijnen en enige kaderkleur – met een enkele handgetekende regenboog die eenmalig verschijnt, op de knop 'Registreren' en op het cursieve woord 'voor altijd', en nooit meer terugkomt.
- Karl — Een 3D-diorama in de stijl van een pop-upboek op een zonnige dag.
- Navigate — Een grote set stickers op een bord: een groot, grotesk lettertype, allemaal in de vorm van tabletten, en vijf veelkleurige pictogrammen die zich herhalen als een logo.
- Monte — Ochtend aan de kust met een roestige gloed
- MotherDuck — Terminal gecodeerd met kleurpotloden op crèmekleurig papier
- Wise Design — Een neonmarktkraam in een internationale straat – een felgroen bord dat opvalt in de drukke markt, terwijl daarachter discreet een verfijnde gebruikersinterface van een product te zien is.
- Hatch — Een handgetekend ontwerp in samizdat-stijl, gecombineerd met pastelkleurige snoepkommen. Een crèmekleurig papieren canvas versierd met mintgroene accenten, confetti en pilvormige oproepen tot actie, waar een groot, vetgedrukt schreeflettertype een speelse sfeer uitstraalt en een blauwe mascotte in de hoek knipoogt.
- Superr — Een warm schoolschrift in het zachte middaglicht. Een crèmekleurige pagina, een oranje stift zonder dop en een stapel gelamineerde naamstickers die eraf gepeld moeten worden.
- Mews — Een controlecentrum voor de horeca bij zonsopgang, badend in roze. Een witgekalkte, zonovergoten werkruimte waar opvallende zwarte letters, warme crèmekleurige kaarten en een enkele felroze actieknop elk scherm kenmerken – een speelse zelfverzekerdheid in plaats van zakelijke terughoudendheid.