Duolingo
Klaseko maskota jostalari paper zurian
Duolingoren interfazea haurrentzako irudi-liburu baten antzera diseinatuta dago: mihise zuri bat, letra-tipo potolo eta biribildua, eta berde aberats bakar bat, berehala "erantzun zuzena" gogorarazten duena. Testu nagusia erdi-gris tonu lasaigarriak dira, berdeak eta bere azentu urdinak lan emozional guztia egiteko aukera emanez: berdea aurrerapenerako eta izenburuetarako, urdina klik egin daitezkeen esteketarako eta ekintza gehigarrietarako. Osagaiak pilulen edo ertz lodi eta biribilduen itxura dute, ertz beltz edo koloretsu lodiekin, botoi bakoitza orrialdeari itsatsitako eranskailu baten antza handiagoa emanez, UI kontrol lau batena baino.
Atalek orriaren zabalera osoa hartzen dute eta bertikalki antolatuta daude zutabe bakarrean, bakoitza gutxi gorabehera 800 pixeleko altuerarekin. Edukiaren gehienezko zabalera gutxi gorabehera pixel 1ekoa da erdian. Ezkerreko testua eta eskuineko ilustrazioak txandakatzen dira, tarte bertikal zabala eskainiz (80 pixel atalen artean). Ez dago sareta-txartelik edo zutabe anitzeko diseinurik: atal bakoitza ilustrazio bakarrarekin lotutako testu-bloke bakarra da. Nabigazioa goiko barra minimalista bat da, logotipoa eta hizkuntza-hautatzailea dituena, atalen artean barra finko gisa agertzen dena. Orri-oina orriaren zabalera osoa hartzen duen marra berde bat da. Erritmoa editoriala da: izenburua, paragrafoa, ekintzarako deia, ilustrazioa, errepikapena.
Liburuaren ilustrazio-hizkuntzak bi dimentsioko maskota-pertsonaia lauak ditu (Duet hontza eta hainbat giza irudi), forma geometriko biribilduekin, ertz beltz lodiekin eta interfazean bertan agertzen ez den arrosa, more, hori, laranja eta urdin kolore-paleta osagarri batekin. Ilustrazioak testuaren ondoan daude, atal bakoitzaren eskuinaldean, atzealde zuri huts baten gainean, ontzirik edo atzealderik gabe. Ez dago argazkirik: pertsonaiek osatzen dute eduki bisuala. Ikonografiak ertz lodiak erabiltzen ditu, maskoten estiloarekin bat etorriz. Irudien dentsitatea moderatua da: atal bakoitzak pertsonaiaren ilustrazio handi bat du, eta orrialdearen gainerakoa tipografiari eta espazio zuriari eskainita dago.
Paleta
Marka
- Eager Green
#58cc02— Berdea estekak, etiketak eta esaldi laburrak nabarmentzeko erabiltzen da. Ez da erabili behar ekintzarako deietarako kolore nagusi gisa. - Storybook Green
#d7ffb8— Gainazal argietan nabarmentze leunak, oin-orriko nabigazio-etiketen atzean atzeko plano-tonu sotilak.
Neutroa
- Spark Blue
#1cb0f6— Urdina estekak, etiketak eta esaldi laburrak nabarmentzeko erabiltzen da. Ez da erabili behar ekintzarako deietarako kolore nagusi gisa. - Fresh Leaf
#a5ed6e— Berdea estekak, etiketak eta esaldi laburrak nabarmentzeko erabiltzen da. Ez da erabili behar ekintzarako deietarako kolore nagusi gisa. - Night Ink
#000437— Estekak, etiketak eta nabarmendutako esaldi laburrak morez nabarmenduta daude. - Paper White
#ffffff— Orrialde-mihisea, kartoizko gainazalak, botoien testua atzealde berde/ilunaren gainean. - Charcoal
#4b4b4b— Goiburu eta gorputz testu nagusia - Koloretako goiburuak nabarmentzeko aukera ematen duen testu ilun unibertsala. - Pencil Gray
#777777— Testuaren paragrafo nagusiak letra diskretuekin nabarmenduta daude, eta bigarren mailako deskribapen-testua atzeko planoan geratzen da, elementu koloretsuak lehen planoan ager daitezen.
Tipografia
13tik 64px-ra · 7 urrats
- feather — ordezkapena: Inter · eskemak 700 · Atalen izenburuak, hala nola "Doakoa. Dibertigarria. Eraginkorra" eta "Duolingo ingeles proba", letra-tipo biribildu pertsonalizatu batekin bistaratzen dira, markari estilo jostalari, atsegin eta maskota-antzekoa emanez. Ordeztu "Feather Bold" edo "Nunito Black" letrarekin, dagokion lodierarekin. Letren arteko tartea: -0.0200em
- duolingo-sans — ordezkapena: Inter · eskemak 500 · Paragrafo nagusiak eta nabigazio estekak 17px/500-tan—irakurgarri mantentzen den sans-serif letra-tipo geometrikoa, 700 lerroko lodierak puntu garrantzitsuak nabarmentzeko aukera ematen duena. Ordeztu 'DIN Next', 'Inter' edo 'Nunito Sans'-ekin.
- duolingo-sans — ordezkapena: Inter · eskemak 700 · 700eko pisu-balio guztiak erabiltzen dira: nabigazio-etiketetako maiuskulak 15px dira (ls 0.0530em), azpitituluak 19px eta 32px dira, eta esteken enfasia 13px da. Testu nagusiaren letra-tipo bera —desberdintasun bisuala pisuan dago, ez letra-tipoaren aldaketan. Letren arteko tartea: 0.0530em nabigazio-etiketetako maiuskuletarako.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | trinko |
| Oinarrizko urratsa | 12px |
| Botoiaren erradioa | 12px |
| Txartelaren erradioa | 12px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 80-120px |
| Orriaren zabalera | 1200px |
Adimen artifizialak zure webgunea Duolingo estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- Family — Krema pergaminoan idatzitako ipuin bateko hedapena
- Say Briefly — Krema-paperean egindako sormen-agentziaren zirriborro-koadernoa
- Flying Papers — Larunbat goizeko marrazki bizidunetako aitorpena
- Portrait — Oroitzapenen horma bat, Polaroidetan krema koloreko paperean harrapatuta. Krema koloreko argazki- album distiratsu bat, non tinta urdin iluna den testu bakarra, egitura-lerro bakarra eta markoaren kolore bakarra —eskuz marraztutako ortzadar bakarra behin agertzen dena, "Izena eman" botoian eta "betirako" hitz etzanean, eta inoiz ez berriro.
- Karl — 3Dko liburu-estiloko diorama bat egun eguzkitsu batean
- Navigate — Taula bati itsatsitako eranskailu multzo handi bat: letra-tipo grotesko handia, tableta moduan eta bost ikono kolore anitzekoak, logotipo baten antzera errepikatzen direnak.
- Monte — Goiza kostaldean herdoil koloreko tonu batekin
- MotherDuck — Krema koloreko paperean arkatz koloretsuekin kodetutako terminala
- Wise Design — Neon koloreko merkatu-postu bat kale global batean — berde distiratsuko seinale bat jendez gainezka dagoen merkatuan zehar oihuka, eta atzean, produktuaren erabiltzaile-interfaze leundu bat agertzen da diskretuki.
- Hatch — Eskuz marraztutako samizdat estiloko diseinua, pastel koloreko gozoki-ontziekin nahastuta. Krema koloreko paper-oihal bat, menta-azentuekin, konfeti-puntuekin eta pilula-formako ekintzarako deiekin apaindua, non serif letra-tipo handi eta lodi batek dibertsioa iradokitzen duen, eta maskota urdin batek keinu egiten duen izkinan.
- Superr — Eskolako koaderno epel bat arratsaldeko argi leunean. Krema koloreko orrialde bat, estalkirik gabeko errotulagailu laranja bat eta izen-pegatina laminatu pila bat kentzeko zain.
- Mews — Ostalaritza kontrol zentro bat egunsentian, arrosa kolorez blai. Horma zuriko eta eguzki-argiztatutako lan-eremu bat, non letra beltz lodiak, krema koloreko txartel epelak eta arrosa biziko ekintza-botoi bakarrak definitzen dituzten pantailak —konfiantza jostalari bat, korporazio-neurritasuna baino gehiago—.