
Duolingo
Hravý maskot třídy na bílém papíře
Rozhraní Duolinga je navrženo jako dětská obrázková kniha: bílé papírové plátno, plné, zaoblené písmo a jedna sytá zelená barva, která okamžitě evokuje „správnou odpověď“. Hlavní text je v uklidňujících středně šedých tónech, což umožňuje zelené a její zvýrazněné modré barvě vykonávat veškerou emocionální práci – zelená pro postup a nadpisy, modrá pro klikatelné odkazy a další akce. Komponenty mají tvar pilulek nebo robustních, zaoblených rohů s tlustými černými nebo barevnými okraji, takže každé tlačítko působí spíše jako samolepka nalepená na stránce než jako plochý ovládací prvek uživatelského rozhraní.
Sekce zabírají celou šířku stránky a jsou uspořádány svisle v jednom sloupci, každý o výšce přibližně 800 pixelů. Maximální šířka obsahu je přibližně 1 pixel vycentrovaný. Text vlevo a ilustrace vpravo se střídají, což poskytuje dostatek svisle prostor (80 pixelů mezi sekcemi). Nejsou zde žádné mřížkové karty ani vícesloupcové rozvržení – každá sekce je jeden textový blok spárovaný s jednou ilustrací. Navigace je minimalistický horní panel s logem a výběrem jazyka, který se mezi sekcemi zobrazuje jako pevný pruh. Zápatí je zelený pruh táhnoucí se po celé šířce stránky. Rytmus je redakční: nadpis, odstavec, výzva k akci, ilustrace, opakování.
Ilustrativní jazyk knihy obsahuje ploché, dvourozměrné maskoty (sova Duet a různé lidské postavy) se zaoblenými geometrickými tvary, výraznými černými obrysy a doplňkovou barevnou paletou růžové, fialové, žluté, oranžové a modré, která se v samotném rozhraní nikdy neobjevuje. Ilustrace jsou umístěny vedle textu na pravé straně každé sekce, na čistě bílém pozadí, bez kontejnerů nebo pozadí. Kniha neobsahuje žádné fotografie – postavy slouží jako vizuální obsah. Ikonografie používá silné obrysy, které odpovídají stylu maskotů. Hustota obrázků je střední: každá sekce obsahuje jednu velkou ilustraci postavy, zbytek stránky je věnován typografii a bílému prostoru.
Paleta
Značka
- Eager Green
#58cc02— Zelená se používá k zvýraznění odkazů, tagů a krátkých frází. Neměla by být používána jako primární barva pro výzvy k akci. - Storybook Green
#d7ffb8— Jemné zvýraznění světlých povrchů, decentní tóny pozadí za navigačními popisky v zápatí.
Neutrální
- Spark Blue
#1cb0f6— Modrá se používá k zvýraznění odkazů, tagů a krátkých frází. Neměla by se používat jako primární barva pro výzvy k akci. - Fresh Leaf
#a5ed6e— Zelená se používá k zvýraznění odkazů, tagů a krátkých frází. Neměla by být používána jako primární barva pro výzvy k akci. - Night Ink
#000437— Odkazy, štítky a krátké zvýrazněné fráze jsou zvýrazněny fialově. - Paper White
#ffffff— Plátno na stránku, kartonové povrchy, text tlačítka na zeleném/tmavém pozadí. - Charcoal
#4b4b4b— Hlavní nadpisy a text – Univerzální tmavý text, který umožňuje vyniknout barevným nadpisům. - Pencil Gray
#777777— Hlavní odstavce textu jsou zvýrazněny nenápadnými písmeny a sekundární popisný text ustupuje do pozadí, takže do popředí vystupují barevné prvky.
Typografie
od 13 do 64 pixelů · 7 kroků
- feather — nahrazení: Inter · obrysy 700 · Nadpisy sekcí, například „Zdarma. Zábavné. Efektivní“ a „Test z angličtiny Duolingo“, jsou zobrazeny vlastním zaobleným písmem, které značce dodává hravý, přátelský styl připomínající maskota. Nahraďte písmem „Feather Bold“ nebo „Nunito Black“ s odpovídající tloušťkou. Rozteč písmen: -0,0200 em
- duolingo-sans — nahrazení: Inter · obrysy 500 · Hlavní odstavce a navigační odkazy o velikosti 17px/500 – geometrické bezpatkové písmo, které zůstává čitelné a umožňuje zvýraznit důležité body tloušťkou řádku 700. Nahraďte textem „DIN Next“, „Inter“ nebo „Nunito Sans“.
- duolingo-sans — nahrazení: Inter · obrysy 700 · Používají se všechny hodnoty weight-700: velká písmena v navigačních popiscích jsou 15px (ls 0,0530em), podnadpisy jsou 19px a 32px a zvýraznění odkazů je 13px. Stejné písmo jako hlavní text – vizuální rozdíl je v tloušťce, nikoli ve změně písma. Rozteč písmen: 0,0530em pro velká písmena v navigačních popiscích.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | hustý |
| Základní krok | 12px |
| Poloměr tlačítka | 12px |
| Poloměr karty | 12px |
| Stíny | ne - okraje místo stínů |
| Mezi sekcemi | 80-120px |
| Šířka stránky | 1200px |
Umělá inteligence vám vytvoří web ve stylu Duolingo a naplní ho
- Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
- Přeneste obsah ze starého webu – stačí zadat adresu.
- Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
- Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.
Podobné styly
- Family — Pomazánka z pohádky na krémovém pergamenu
- Say Briefly — Skicák kreativní agentury na krémovém papíře
- Flying Papers — Zpověď v sobotu ráno (kreslený film)
- Portrait — Zeď vzpomínek zachycených polaroidy na krémově zbarveném papíře. Jasný, krémově zbarvený album, kde tmavě modrý inkoust slouží jako jediný text, jediné strukturální linie a jediná barva rámu – s jedinou ručně kreslenou duhou, která se objeví jednou, na tlačítku „Registrovat“ a na kurzívou psaném slově „navždy“ a už nikdy více.
- Karl — 3D dioráma ve stylu vyskakovací knihy za slunečného dne
- Navigate — Velká sada samolepek připevněných k tabuli: velké groteskní písmo, vše ve formě tabletů a pět vícebarevných ikon, opakujících se jako logo
- Monte — Ráno na pobřeží s rezavým nádechem
- MotherDuck — Terminál kódovaný barevnými tužkami na krémovém papíře
- Wise Design — Neonový stánek na globální ulici – zářivě zelená cedule křičící přeplněným tržišti, zatímco za ní se nenápadně objevuje nablýskané uživatelské rozhraní produktu.
- Hatch — Ručně kreslený design ve stylu samizdatu s pastelovými miskami na bonbóny. Krémové papírové plátno zdobené mátovými akcenty, konfetami a výzvami k akci ve tvaru pilulek, kde velké, tučné patkové písmo naznačuje zábavu a v rohu mrká modrý maskot.
- Superr — Teplý školní sešit v měkkém odpoledním světle. Krémově zbarvená stránka, oranžový fix bez krytky a hromádka zalaminovaných jmenovek čekajících na odlepení.
- Mews — Řídicí centrum pohostinství za úsvitu, zalité růžovou. Bílé stěny, sluncem zalité pracovní prostředí, kde každou obrazovku definuje tučné černé písmo, teplé krémové karty a jediné jasně růžové akční tlačítko – spíše hravá sebejistota než korporátní zdrženlivost.