Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukvývojářVývoj nástrojů umělé inteligence pro firmy. Vysoce kvalitní. Cenově dostupné.Napsat na Telegram
Duolingo — náhled webu v tomto stylu

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

ÚčelVýznam
Hustotahustý
Základní krok12px
Poloměr tlačítka12px
Poloměr karty12px
Stínyne - okraje místo stínů
Mezi sekcemi80-120px
Šířka stránky1200px

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.