Duolingo
Játékos osztály kabalafigura fehér papíron
A Duolingo kezelőfelülete egy gyerekkönyvhöz hasonlóan lett megtervezve: fehér papír, telt, lekerekített betűtípus és egyetlen, gazdag zöld szín, amely azonnal a „helyes választ” idézi fel. A fő szöveg nyugtató középszürke árnyalatú, lehetővé téve, hogy a zöld és a hozzá tartozó kék szín végezze el az érzelmi munkát – zöld a haladást és a címsorokat, kék a kattintható linkeket és a további műveleteket jelöli. Az összetevők tabletták vagy vaskos, lekerekített sarkok alakúak, vastag fekete vagy színes szegéllyel, így minden gomb inkább az oldalra ragasztott matricáknak, mint lapos felhasználói felület vezérlőelemeinek tűnik.
A szakaszok az oldal teljes szélességét kitöltik, és függőlegesen egyetlen hasábban helyezkednek el, mindegyik körülbelül 800 pixel magas. A maximális tartalom szélessége körülbelül 1 pixel középre igazítva. A bal oldali szöveg és a jobb oldali illusztrációk váltakoznak, bőséges függőleges helyet biztosítva (80 pixel a szakaszok között). Nincsenek rácsos kártyák vagy több hasábos elrendezések – minden szakasz egyetlen szövegblokk, amelyhez egyetlen illusztráció tartozik. A navigáció egy minimalista felső sáv logóval és nyelvválasztóval, amely rögzített sávként jelenik meg a szakaszok között. A lábléc egy zöld csík, amely az oldal teljes szélességén átível. A ritmus szerkesztői jellegű: címsor, bekezdés, cselekvésre ösztönzés, illusztráció, ismétlés.
A könyv illusztrációs nyelvezete lapos, kétdimenziós kabalafigurákat (Duet, a bagoly és különféle emberi alakok) mutat be lekerekített geometriai formákkal, merész fekete körvonalakkal és egy kiegészítő rózsaszín, lila, sárga, narancssárga és kék színpalettával, amely soha nem jelenik meg magában a felhasználói felületen. Az illusztrációk a szöveg mellett, az egyes részek jobb oldalán helyezkednek el, tiszta fehér háttér előtt, tartályok vagy hátterek nélkül. Nincsenek fényképek – a karakterek vizuális tartalomként szolgálnak. Az ikonográfia vastag körvonalakat használ, összhangban a kabalák stílusával. A képsűrűség mérsékelt: minden részben a karakter egy nagyméretű illusztrációja látható, az oldal többi része pedig tipográfiának és üres helyeknek van szentelve.
Paletta
Márka
- Eager Green
#58cc02— A zöld színt linkek, címkék és rövid kifejezések kiemelésére használjuk. Nem szabad elsődleges színként használni a cselekvésre ösztönzésekhez. - Storybook Green
#d7ffb8— Lágy kiemelések világos felületeken, finom háttértónusok a lábléc navigációs feliratai mögött.
Semleges
- Spark Blue
#1cb0f6— A kék színt linkek, címkék és rövid kifejezések kiemelésére használjuk. Nem szabad elsődleges színként használni a cselekvésre ösztönzésekhez. - Fresh Leaf
#a5ed6e— A zöld színt linkek, címkék és rövid kifejezések kiemelésére használjuk. Nem szabad elsődleges színként használni a cselekvésre ösztönzésekhez. - Night Ink
#000437— A linkek, címkék és rövid kiemelt kifejezések lilával vannak kiemelve. - Paper White
#ffffff— Oldalvászon, karton felületek, gombszöveg zöld/sötét háttéren. - Charcoal
#4b4b4b— Főcímek és szövegtörzs – Univerzális sötét szöveg, amely kiemeli a színes címsorokat. - Pencil Gray
#777777— A szöveg fő bekezdéseit nem feltűnő betűk emelik ki, a másodlagos leíró szöveg pedig a háttérbe szorul, így a színes elemek kerülnek előtérbe.
Tipográfia
13-ról 64 képpontra · 7 lépésben
- feather — csere: Inter · körvonalak 700 · A szakaszcímek, mint például az „Ingyenes. Szórakoztató. Hatékony” és a „Duolingo angol teszt”, egyedi, lekerekített betűtípussal jelennek meg, játékos, barátságos, kabalaszerű stílust kölcsönözve a márkának. Cserélje ki a megfelelő vastagságú „Feather Bold” vagy „Nunito Black” betűtípusra. Betűköz: -0,0200em
- duolingo-sans — csere: Inter · körvonalak 500 · A fő bekezdések és a navigációs linkek 17px/500 méretben legyenek – ez egy geometrikus sans-serif betűtípus, amely olvasható marad, és lehetővé teszi a 700-as sorvastagság számára a fontos pontok kiemelését. Cserélje le a következőre: „DIN Next”, „Inter” vagy „Nunito Sans”.
- duolingo-sans — csere: Inter · körvonalak 700 · Minden weight-700 érték használatban van: a navigációs címkékben a nagybetűk 15 képpontosak (ls 0,0530em), az alcímek 19 és 32 képpontosak, a linkek kiemelése pedig 13 képpont. Ugyanaz a betűtípus, mint a fő szövegben – a vizuális különbség a vastagságban van, nem a betűtípus változásában. Betűköz: 0,0530em a navigációs címkékben lévő nagybetűk esetén.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | sűrű |
| Alapvető lépés | 12px |
| Gomb sugara | 12px |
| Kártya sugara | 12px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 80-120px |
| Oldal szélessége | 1200px |
A mesterséges intelligencia Duolingo stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- Family — Egy meséből származó kép krémszínű pergamenre nyomtatva
- Say Briefly — Kreatív ügynökségi vázlatfüzet krémszínű papíron
- Flying Papers — Vallomás szombat reggel rajzfilmben
- Portrait — Egy emlékfal, polaroidokkal krémszínű papírra rögzítve. Egy élénk, krémszínű scrapbook, ahol a sötétkék tinta az egyetlen szöveg, az egyetlen szerkezeti vonalak és az egyetlen keretszín – egyetlen kézzel rajzolt szivárvánnyal, amely egyszer jelenik meg, a „Regisztráció” gombon és a dőlt „örökké” szón, majd soha többé.
- Karl — Egy 3D-s felugró könyv stílusú dioráma egy napsütéses napon
- Navigate — Egy nagy matricakészlet egy táblára ragasztva: nagy, groteszk betűtípus, mindegyik tabletta formájában, és öt többszínű ikon, amelyek logóként ismétlődnek.
- Monte — Rozsdás árnyalatú reggel a tengerparton
- MotherDuck — Krémszínű papíron színes ceruzákkal kódolt terminál
- Wise Design — Egy neon piaci stand egy globális utcán – egy élénkzöld felirat harsogja át a zsúfolt piacteret, mögötte pedig diszkréten egy letisztult termék felhasználói felülete jelenik meg.
- Hatch — Kézzel rajzolt, szamizdat stílusú dizájn pasztellszínű cukorkás tálakkal keverve. Krémszínű papírvászon menta színű díszítéssel, konfetti pöttyökkel és pirula alakú cselekvésre ösztönzésekkel, ahol a nagy, vastag talpú betűtípus a mókára utal, a sarokban pedig egy kék kabalafigurát láthatunk.
- Superr — Egy meleg iskolai füzet a lágy délutáni fényben. Egy krémszínű lap, egy narancssárga filctoll kupak nélkül, és egy halom laminált névmatrica, amik arra várnak, hogy lehúzzák őket.
- Mews — Egy hajnalban felvillanó vendéglátóipari irányítóközpont, rózsaszínben fürödve. Fehér falú, napsütötte munkaterület, ahol vastag fekete betűtípusok, meleg krémszínű kártyák és egyetlen élénk rózsaszín akciógomb határozza meg minden képernyőt – inkább játékos magabiztosság, mint vállalati visszafogottság.