Duolingo
Razigrana maskota razreda na bijelom papiru
Duolingovo sučelje dizajnirano je poput dječje slikovnice: bijelo platno, debeli, zaobljeni font i jedna, bogata zelena boja koja odmah evocira "točan odgovor". Glavni tekst je u umirujućim srednje sivim tonovima, što omogućuje zelenoj i njezinoj naglašenoj plavoj boji da obave sav emocionalni posao - zelena za napredak i naslove, plava za poveznice na koje se može kliknuti i dodatne radnje. Komponente su oblikovane poput tableta ili debelih, zaobljenih kutova s debelim crnim ili obojenim rubovima, zbog čega se svaki gumb više doima kao naljepnica zalijepljena na stranicu nego kao ravna UI kontrola.
Odjeljci zauzimaju punu širinu stranice i raspoređeni su okomito u jednom stupcu, svaki visok približno 800 piksela. Maksimalna širina sadržaja je približno 1 piksel centriran. Tekst s lijeve strane i ilustracije s desne strane izmjenjuju se, pružajući dovoljno okomitog prostora (80 piksela između odjeljaka). Nema mrežnih kartica ili višestupnih rasporeda - svaki odjeljak je jedan blok teksta uparen s jednom ilustracijom. Navigacija je minimalistička gornja traka s logotipom i odabirom jezika, koja se pojavljuje kao fiksna traka između odjeljaka. Podnožje je zelena pruga koja se proteže cijelom širinom stranice. Ritam je urednički: naslov, odlomak, poziv na akciju, ilustracija, ponavljanje.
Ilustrativni jezik knjige sadrži ravne, dvodimenzionalne likove maskota (sova Duet i razne ljudske figure) sa zaobljenim geometrijskim oblicima, podebljanim crnim obrisima i komplementarnom paletom boja ružičaste, ljubičaste, žute, narančaste i plave koja se nikada ne pojavljuje u samom sučelju. Ilustracije su postavljene uz tekst s desne strane svakog odjeljka, na čisto bijeloj pozadini, bez spremnika ili pozadina. Nema fotografija - likovi služe kao vizualni sadržaj. Ikonografija koristi debele obrise, u skladu sa stilom maskota. Gustoća slika je umjerena: svaki odjeljak sadrži jednu veliku ilustraciju lika, a ostatak stranice posvećen je tipografiji i bijelom prostoru.
Paleta
Robna marka
- Eager Green
#58cc02— Zelena se koristi za isticanje poveznica, oznaka i kratkih fraza. Ne bi se trebala koristiti kao primarna boja za pozive na akciju. - Storybook Green
#d7ffb8— Meki naglasci na svijetlim površinama, suptilni tonovi pozadine iza navigacijskih oznaka u podnožju.
Neutralno
- Spark Blue
#1cb0f6— Plava se koristi za isticanje poveznica, oznaka i kratkih fraza. Ne bi se trebala koristiti kao primarna boja za pozive na akciju. - Fresh Leaf
#a5ed6e— Zelena se koristi za isticanje poveznica, oznaka i kratkih fraza. Ne bi se trebala koristiti kao primarna boja za pozive na akciju. - Night Ink
#000437— Linkovi, oznake i kratke istaknute fraze označene su ljubičastom bojom. - Paper White
#ffffff— Platno za stranice, kartonske površine, tekst gumba na zelenoj/tamnoj pozadini. - Charcoal
#4b4b4b— Glavni zaglavlja i tekst tijela - Univerzalni tamni tekst koji omogućuje isticanje obojenih naslova. - Pencil Gray
#777777— Glavni odlomci teksta istaknuti su neupadljivim slovima, a sporedni opisni tekst povlači se u pozadinu, tako da obojeni elementi dolaze do izražaja.
Tipografija
od 13 do 64px · 7 koraka
- feather — zamjena: Inter · obrisi 700 · Naslovi odjeljaka, kao što su "Besplatno. Zabavno. Učinkovito" i "Duolingo test engleskog jezika", prikazani su prilagođenim zaobljenim fontom, dajući brendu razigran, prijateljski stil nalik maskoti. Zamijenite s "Feather Bold" ili "Nunito Black" odgovarajuće debljine. Razmak između slova: -0,0200em
- duolingo-sans — zamjena: Inter · obrisi 500 · Glavni odlomci i navigacijske poveznice veličine 17px/500 - geometrijski font bez serifa koji ostaje čitljiv, omogućujući debljinu retka od 700 za isticanje važnih točaka. Zamijenite s 'DIN Next', 'Inter' ili 'Nunito Sans'.
- duolingo-sans — zamjena: Inter · obrisi 700 · Koriste se sve vrijednosti weight-700: velika slova u navigacijskim oznakama su 15px (ls 0.0530em), podnaslovi su 19px i 32px, a naglasak poveznice je 13px. Isti font kao i glavni tekst - vizualna razlika je u debljini, a ne u promjeni fonta. Razmak između slova: 0.0530em za velika slova u navigacijskim oznakama.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | gust |
| Osnovni korak | 12px |
| Radijus gumba | 12px |
| Radijus kartice | 12px |
| Sjene | ne - obrubi umjesto sjena |
| Između odjeljaka | 80-120px |
| Širina stranice | 1200px |
Umjetna inteligencija će izraditi vašu web stranicu u Duolingo stilu i ispuniti je
- Popunite proizvodima i objavama putem poveznice - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa svoje stare web-lokacije - samo navedite adresu.
- Moderan dizajn na najboljem engineu: React ( Next.js) s renderiranjem na serveru i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretraživanja i preporuke neuronskih mreža.
Slični stilovi
- Family — Namaz iz bajke na kremastom pergamentu
- Say Briefly — Skicnik za kreativnu agenciju na krem papiru
- Flying Papers — Ispovijed u crtanom filmu subotom ujutro
- Portrait — Zid uspomena, uhvaćen u polaroidima na krem papiru. Svijetli, krem album u kojem tamnoplava tinta služi kao jedini tekst, jedine strukturne linije i jedina boja okvira - s jednom ručno nacrtanom dugom koja se pojavljuje jednom, na gumbu "Registriraj se" i na kurzivnoj riječi "zauvijek", i nikad više.
- Karl — 3D diorama u stilu pop-up knjige na sunčan dan
- Navigate — Veliki set naljepnica pričvršćenih na ploču: veliki groteskni font, sve u obliku tableta i pet raznobojnih ikona, koje se ponavljaju poput logotipa
- Monte — Jutro na obali s hrđavom nijansom
- MotherDuck — Terminal kodiran olovkama u boji na krem papiru
- Wise Design — Neonski štand na globalnoj ulici - jarko zeleni znak vrišteći probija kroz prepunu tržnicu, dok se iza njega diskretno pojavljuje uglađeno korisničko sučelje proizvoda.
- Hatch — Ručno crtani dizajn u stilu samizdata pomiješan s pastelnim zdjelicama za slatkiše. Kremasto papirnato platno ukrašeno detaljima boje mente, konfetima i pozivima na akciju u obliku tableta, gdje veliki, podebljani serifni font nagovještava zabavu, a plava maskota namiguje u kutu.
- Superr — Topla školska bilježnica u mekom popodnevnom svjetlu. Krem stranica, narančasti marker bez poklopca i hrpa plastificiranih naljepnica s imenima koje čekaju da se odlijepe.
- Mews — Kontrolni centar ugostiteljstva u zoru, okupan ružičastom bojom. Radni prostor s bijelim zidovima, osunčan, gdje podebljani crni font, tople krem kartice i jedan jarko ružičasti akcijski gumb definiraju svaki zaslon - razigrano samopouzdanje, a ne korporativna suzdržanost.