Duolingo
Igriva maskota razreda na belem papirju
Duolingov vmesnik je zasnovan kot otroška slikanica: belo platno, debela, zaobljena pisava in ena sama, bogata zelena barva, ki takoj prikliče v spomin»pravilen odgovor«. Glavno besedilo je v pomirjujočih srednje sivih tonih, kar omogoča zeleni in njeni poudarjeni modri barvi, da opravita vse čustveno delo – zelena za napredek in naslove, modra pa za povezave, na katere je mogoče klikniti, in dodatna dejanja. Komponente so oblikovane kot tablete ali debeli, zaobljeni vogali z debelimi črnimi ali barvnimi robovi, zaradi česar je vsak gumb bolj podoben nalepki, prilepljeni na stran, kot pa ploskemu kontrolniku uporabniškega vmesnika.
Razdelki zavzemajo celotno širino strani in so razporejeni navpično v enem stolpcu, vsak približno 800 slikovnih pik. Največja širina vsebine je približno 1 slikovna pika, poravnana na sredini. Besedilo na levi in ilustracije na desni se izmenjujejo, kar zagotavlja dovolj navpičnega prostora (80 slikovnih pik med razdelki). Ni mrežnih kartic ali postavitev z več stolpci – vsak razdelek je en sam blok besedila, povezan z eno samo ilustracijo. Navigacija je minimalistična zgornja vrstica z logotipom in izbirnikom jezika, ki se med razdelki prikaže kot fiksna vrstica. Noga je zelena črta, ki se razteza čez celotno širino strani. Ritem je uredniški: naslov, odstavek, poziv k dejanju, ilustracija, ponovitev.
Ilustrativni jezik knjige vsebuje ploščate, dvodimenzionalne maskote (sova Duet in različne človeške figure) z zaobljenimi geometrijskimi oblikami, krepkimi črnimi obrisi in dopolnilno barvno paleto roza, vijolične, rumene, oranžne in modre, ki se v samem vmesniku nikoli ne pojavi. Ilustracije so postavljene ob besedilu na desni strani vsakega razdelka, na čisto belem ozadju, brez posod ali ozadja. Fotografije niso prisotne – liki služijo kot vizualna vsebina. Ikonografija uporablja debele obrise, ki so skladni s slogom maskot. Gostota slik je zmerna: vsak razdelek vsebuje eno veliko ilustracijo lika, preostali del strani pa je namenjen tipografiji in belemu prostoru.
Paleta
Blagovna znamka
- Eager Green
#58cc02— Zelena se uporablja za označevanje povezav, oznak in kratkih fraz. Ne sme se uporabljati kot primarna barva za pozive k dejanju. - Storybook Green
#d7ffb8— Mehki poudarki na svetlih površinah, subtilni toni ozadja za navigacijskimi oznakami v nogi.
Nevtralno
- Spark Blue
#1cb0f6— Modra se uporablja za označevanje povezav, oznak in kratkih fraz. Ne sme se uporabljati kot primarna barva za pozive k dejanju. - Fresh Leaf
#a5ed6e— Zelena se uporablja za označevanje povezav, oznak in kratkih fraz. Ne sme se uporabljati kot primarna barva za pozive k dejanju. - Night Ink
#000437— Povezave, oznake in kratke označene besedne zveze so označene z vijolično barvo. - Paper White
#ffffff— Platno za strani, kartonske površine, besedilo gumba na zelenem/temnem ozadju. - Charcoal
#4b4b4b— Glavne glave in besedilo telesa – univerzalno temno besedilo, ki omogoča, da barvni naslovi izstopajo. - Pencil Gray
#777777— Glavni odstavki besedila so poudarjeni z neopaznimi črkami, sekundarno opisno besedilo pa se umakne v ozadje, tako da barvni elementi pridejo v ospredje.
Tipografija
od 13 do 64 slikovnih pik · 7 korakov
- feather — zamenjava: Inter · obrisi 700 · Naslovi razdelkov, kot sta»Brezplačno. Zabavno. Učinkovito« in»Test angleščine Duolingo«, so prikazani z zaobljenim pisavnim slogom po meri, kar blagovni znamki daje igriv, prijazen slog, podoben maskoti. Zamenjajte z»Feather Bold« ali»Nunito Black« v ustrezni debelini. Razmik med črkami: -0,0200em
- duolingo-sans — zamenjava: Inter · obrisi 500 · Glavni odstavki in navigacijske povezave v velikosti 17px/500 – geometrijska pisava sans-serif, ki ostane berljiva in omogoča, da debelina vrstice 700 poudari pomembne točke. Zamenjajte z»DIN Next«,»Inter« ali»Nunito Sans«.
- duolingo-sans — zamenjava: Inter · obrisi 700 · Uporabljene so vse vrednosti weight-700: velike črke v navigacijskih oznakah so 15px (ls 0,0530em), podnaslovi so 19px in 32px, poudarek povezav pa je 13px. Ista pisava kot glavno besedilo – vizualna razlika je v debelini, ne v spremembi pisave. Razmik med črkami: 0,0530em za velike črke v navigacijskih oznakah.
Intervali in oblika
| Namen | Pomen |
|---|---|
| Gostota | gosta |
| Osnovni korak | 12px |
| Polmer gumba | 12px |
| Polmer kartice | 12px |
| Sence | ne - obrobe namesto senc |
| Med odseki | 80-120px |
| Širina strani | 1200px |
Umetna inteligenca bo zgradila vašo spletno stran v slogu Duolingo in jo napolnila
- Polnite z izdelki in objavami prek povezave - Instagram, TikTok, Facebook.
- Prenesite vsebino s starega spletnega mesta – samo navedite naslov.
- Sodoben dizajn na najboljšem iskalniku: React ( Next.js) z vnaprej pripravljenim upodabljanjem na strežniku in optimizacijo za SEO.
- Popolnoma avtomatizirana SEO optimizacija za rezultate iskanja in priporočila nevronskih mrež.
Podobni slogi
- Family — Namaz iz pravljice na kremnem pergamentu
- Say Briefly — Skicirka za kreativno agencijo na krem papirju
- Flying Papers — Spoved v soboto zjutraj (risanka)
- Portrait — Stena spominov, ujetih v polaroidih na kremnem papirju. Svetel album kremne barve, kjer je temno modro črnilo edino besedilo, edine strukturne črte in edina barva okvirja – z eno samo ročno narisano mavrico, ki se pojavi le enkrat, na gumbu»Registriraj se« in na poševni besedi»za vedno«, in nikoli več.
- Karl — 3D diorama v slogu pop-up knjige na sončen dan
- Navigate — Velik komplet nalepk, pritrjenih na tablo: velika groteskna pisava, vse v obliki tablic in pet večbarvnih ikon, ki se ponavljajo kot logotip
- Monte — Jutro na obali z rjastim odtenkom
- MotherDuck — Terminal kodiran z barvnimi svinčniki na krem papirju
- Wise Design — Neonska stojnica na globalni ulici – svetlo zelen napis kriči skozi natrpano tržnico, za njim pa se diskretno pojavlja elegantni uporabniški vmesnik izdelka.
- Hatch — Ročno narisana podoba v samizdatu, pomešana s pastelnimi skledami za sladkarije. Kremasto papirnato platno, okrašeno z metinimi poudarki, konfeti in pozivi k dejanju v obliki tablet, kjer velika, krepka serifna pisava namiguje na zabavo, v kotu pa pomežikne modra maskota.
- Superr — Topel šolski zvezek v mehki popoldanski svetlobi. Kremna stran, oranžen flomaster brez pokrovčka in kup plastificiranih nalepk z imeni, ki čakajo, da jih odlepijo.
- Mews — Nadzorni center za gostinstvo ob zori, prepojen z roza barvo. Delovni prostor z belimi stenami, obsijan s soncem, kjer vsak zaslon opredeljujejo krepka črna pisava, kartice v topli krem barvi in en sam žarko roza akcijski gumb – igriva samozavest in ne korporativna zadržanost.