
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
| Účel | Význam |
|---|---|
| Hustota | hustý |
| Základný krok | 12px |
| Polomer tlačidla | 12px |
| Polomer karty | 12px |
| Tiene | nie - okraje namiesto tieňov |
| Medzi sekciami | 80-120px |
| Šírka stránky | 1200px |
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ť.