Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukvývojárVývoj nástrojov umelej inteligencie pre firmy. Vysokokvalitné. Cenovo dostupné.Napísať do Telegramu
Duolingo — ukážka stránky v tomto štýle

Duolingo

Hravý maskot triedy na bielom papieri

Rozhranie Duolinga je navrhnuté ako detská obrázková kniha: biele papierové plátno, plné, zaoblené písmo a jedna sýta zelená farba, ktorá okamžite evokuje „správnu odpoveď“. Hlavný text je v upokojujúcich stredne sivých tónoch, čo umožňuje zelenej a jej akcentovej modrej farbe vykonávať všetku emocionálnu prácu – zelená pre priebeh a nadpisy, modrá pre klikateľné odkazy a ďalšie akcie. Komponenty majú tvar tabletiek alebo hrubých, zaoblených rohov s hrubými čiernymi alebo farebnými okrajmi, vďaka čomu každé tlačidlo pôsobí skôr ako nálepka nalepená na stránke než ako plochý ovládací prvok používateľského rozhrania.

Sekcie zaberajú celú šírku stránky a sú vertikálne usporiadané v jednom stĺpci, pričom každá má výšku približne 800 pixelov. Maximálna šírka obsahu je približne 1 pixel vycentrovaný. Text vľavo a ilustrácie vpravo sa striedajú, čo poskytuje dostatok vertikálneho priestoru (80 pixelov medzi sekciami). Neexistujú žiadne mriežkové karty ani viacstĺpcové rozloženie – každá sekcia je jeden textový blok spárovaný s jednou ilustráciou. Navigácia je minimalistický horný panel s logom a výberom jazyka, ktorý sa zobrazuje ako pevný pruh medzi sekciami. Päta je zelený pruh tiahnuci sa cez celú šírku stránky. Rytmus je redakčný: nadpis, odsek, výzva na akciu, ilustrácia, opakovanie.

Ilustratívny jazyk knihy obsahuje ploché, dvojrozmerné maskoty (sova Duet a rôzne ľudské postavy) so zaoblenými geometrickými tvarmi, výraznými čiernymi obrysmi a doplnkovou farebnou paletou ružovej, fialovej, žltej, oranžovej a modrej, ktorá sa nikdy neobjavuje v samotnom rozhraní. Ilustrácie sú umiestnené vedľa textu na pravej strane každej sekcie, na čisto bielom pozadí, bez kontajnerov alebo pozadí. Kniha neobsahuje žiadne fotografie – postavy slúžia ako vizuálny obsah. Ikonografia používa hrubé obrysy, ktoré sú v súlade so štýlom maskotov. Hustota obrázkov je stredná: každá sekcia obsahuje jednu veľkú ilustráciu postavy, zvyšok strany je venovaný typografii a bielemu priestoru.

Paleta

Značka

  • Eager Green #58cc02 — Zelená sa používa na zvýraznenie odkazov, značiek a krátkych fráz. Nemala by sa používať ako primárna farba pre výzvy na akciu.
  • Storybook Green #d7ffb8 — Jemné zvýraznenia na svetlých povrchoch, jemné tóny pozadia za navigačnými popiskami v päte.

Neutrálny

  • Spark Blue #1cb0f6 — Modrá sa používa na zvýraznenie odkazov, značiek a krátkych fráz. Nemala by sa používať ako primárna farba pre výzvy na akciu.
  • Fresh Leaf #a5ed6e — Zelená sa používa na zvýraznenie odkazov, značiek a krátkych fráz. Nemala by sa používať ako primárna farba pre výzvy na akciu.
  • Night Ink #000437 — Odkazy, značky a krátke zvýraznené frázy sú zvýraznené fialovou farbou.
  • Paper White #ffffff — Plátno na stránke, kartónové povrchy, text tlačidla na zelenom/tmavom pozadí.
  • Charcoal #4b4b4b — Hlavné hlavičky a text tela – Univerzálny tmavý text, ktorý umožňuje vyniknúť farebným nadpisom.
  • Pencil Gray #777777 — Hlavné odseky textu sú zvýraznené nenápadnými písmenami a sekundárny popisný text ustupuje do pozadia, takže do popredia vystupujú farebné prvky.

Typografia

od 13 do 64px · 7 krokov

  • feather — náhrada: Inter · obrysy 700 · Nadpisy sekcií, ako napríklad „Zadarmo. Zábavné. Efektívne“ a „Test z angličtiny Duolingo“, sa zobrazujú pomocou vlastného zaobleného písma, ktoré dodáva značke hravý, priateľský štýl pripomínajúci maskota. Nahraďte ich písmom „Feather Bold“ alebo „Nunito Black“ s príslušnou hrúbkou. Rozstup písmen: -0,0200 em
  • duolingo-sans — náhrada: Inter · obrysy 500 · Hlavné odseky a navigačné odkazy s veľkosťou 17px/500 – geometrické bezpätkové písmo, ktoré zostáva čitateľné a umožňuje zvýrazniť dôležité body riadkovou hrúbkou 700. Nahraďte textom „DIN Next“, „Inter“ alebo „Nunito Sans“.
  • duolingo-sans — náhrada: Inter · obrysy 700 · Používajú sa všetky hodnoty weight-700: veľké písmená v navigačných popiskoch majú 15px (ls 0,0530em), podnadpisy majú 19px a 32px a zvýraznenie odkazov je 13px. Rovnaké písmo ako hlavný text – vizuálny rozdiel je v hrúbke, nie v zmene písma. Rozstup písmen: 0,0530em pre veľké písmená v navigačných popiskoch.

Intervaly a forma

ÚčelVýznam
Hustotahustý
Základný krok12px
Polomer tlačidla12px
Polomer karty12px
Tienenie - okraje namiesto tieňov
Medzi sekciami80-120px
Šírka stránky1200px

Umelá inteligencia vytvorí vašu webovú stránku v štýle Duolingo a naplní ju

  • Doplňte produktmi a príspevkami cez odkaz - Instagram, TikTok, Facebook.
  • Preneste obsah zo svojej starej stránky – stačí zadať adresu.
  • Moderný dizajn na najlepšom engine: React ( Next.js) s vykresľovaním servera a SEO optimalizáciou hneď po vybalení.
  • Plne automatizovaná SEO optimalizácia pre výsledky vyhľadávania a odporúčania neurónových sietí.

Podobné štýly

  • Family — Rozprávkový nátierka na krémovom pergamene
  • Say Briefly — Skicár kreatívnej agentúry na krémovom papieri
  • Flying Papers — Spoveď v sobotu ráno, kreslený film
  • Portrait — Stena spomienok, zachytená polaroidmi na krémovom papieri. Jasný, krémový album, kde tmavomodrý atrament slúži ako jediný text, jediné štrukturálne čiary a jediná farba rámu – s jedinou ručne kreslenou dúhou, ktorá sa objaví raz, na tlačidle „Registrovať“ a na kurzívou napísanom slove „navždy“ a už nikdy viac.
  • Karl — 3D vyskakovacia dioráma v štýle knihy za slnečného dňa
  • Navigate — Veľká sada nálepiek pripevnených k tabuli: veľké groteskné písmo, všetko vo forme tabliet a päť viacfarebných ikon, opakujúcich sa ako logo
  • Monte — Ráno na pobreží s hrdzavým odtieňom
  • MotherDuck — Terminál kódovaný farebnými ceruzkami na krémovom papieri
  • Wise Design — Neónový stánok na globálnej ulici – jasne zelený nápis kričí cez preplnené trhovisko, zatiaľ čo za ním sa nenápadne objavuje uhladené používateľské rozhranie produktu.
  • Hatch — Ručne kreslený dizajn v štýle samizdatu v kombinácii s pastelovými miskami na cukríky. Krémové papierové plátno ozdobené mätovými akcentmi, konfetami a výzvami na akciu v tvare tabletiek, kde veľké, tučné pätkové písmo naznačuje zábavu a v rohu žmurka modrý maskot.
  • Superr — Teplý školský zošit v mäkkom popoludňajšom svetle. Krémová strana, oranžová fixka bez krytky a kopa zalaminovaných nálepiek s menom, ktoré čakajú na odlepenie.
  • Mews — Riadiace centrum pohostinstva za úsvitu, zaliate ružovou. Biele steny, slnkom zaliate pracovné miesto, kde každú obrazovku definujú výrazné čierne písmo, teplé krémové karty a jedno žiarivo ružové akčné tlačidlo – skôr hravá sebadôvera než firemná zdržanlivosť.