Duolingo
Razigrana maskota razreda na bijelom papiru
Duolingov interfejs je dizajniran poput dječje slikovnice: bijelo platno, punašan, zaobljeni font i jedna, bogata zelena boja koja odmah evocira "tačan odgovor". Glavni tekst je u umirujućim srednje sivim tonovima, što omogućava zelenoj i njenoj akcentovanoj plavoj da obave sav emocionalni posao - zelena za napredak i naslove, plava za linkove na koje se može kliknuti i dodatne radnje. Komponente su oblikovane poput tableta ili debelih, zaobljenih uglova s debelim crnim ili obojenim okvirima, zbog čega se svako dugme više osjeća kao naljepnica zalijepljena na stranicu nego kao ravna UI kontrola.
Odjeljci zauzimaju punu širinu stranice i raspoređeni su vertikalno u jednoj koloni, svaka visine približno 800 piksela. Maksimalna širina sadržaja je približno 1 piksel centriran. Tekst s lijeve strane i ilustracije s desne strane se naizmjenično prikazuju, pružajući dovoljno vertikalnog prostora (80 piksela između odjeljaka). Nema mrežnih kartica ili višekolumskih rasporeda - svaki odjeljak je jedan blok teksta uparen s jednom ilustracijom. Navigacija je minimalistička gornja traka s logotipom i biračem 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, paragraf, poziv na akciju, ilustracija, ponavljanje.
Ilustrativni jezik knjige sadrži ravne, dvodimenzionalne maskote (sova Duet i razne ljudske figure) sa zaobljenim geometrijskim oblicima, podebljanim crnim obrisima i komplementarnom paletom boja ružičaste, ljubičaste, žute, narandžaste i plave koja se nikada ne pojavljuje u samom interfejsu. Ilustracije su postavljene pored teksta na desnoj strani svakog odjeljka, na čisto bijeloj pozadini, bez okvira 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
Brend
- Eager Green
#58cc02— Zelena se koristi za isticanje linkova, 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 linkova, oznaka i kratkih fraza. Ne bi se trebala koristiti kao primarna boja za pozive na akciju. - Fresh Leaf
#a5ed6e— Zelena se koristi za isticanje linkova, 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 su označene ljubičastom bojom. - Paper White
#ffffff— Platno za stranice, kartonske površine, tekst dugmadi na zelenoj/tamnoj pozadini. - Charcoal
#4b4b4b— Glavni zaglavlja i tekst u tijelu stranice - Univerzalni tamni tekst koji omogućava da se obojeni naslovi istaknu. - Pencil Gray
#777777— Glavni paragrafi teksta su istaknuti neupadljivim slovima, a sekundarni opisni tekst se povlači 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. Efektivno" i "Duolingo test engleskog jezika", prikazani su korištenjem prilagođenog zaobljenog fonta, dajući brendu razigran, prijateljski stil nalik maskoti. Zamijenite sa "Feather Bold" ili "Nunito Black" odgovarajuće debljine. Razmak između slova: -0,0200em
- duolingo-sans — zamjena: Inter · obrisi 500 · Glavni paragrafi i navigacijski linkovi su veličine 17px/500 - geometrijski font bez serifa koji ostaje čitljiv, omogućavajući debljini linije od 700 da istakne važne tačke. Zamijenite sa '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 linkova 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 dugmeta | 12px |
| Radijus kartice | 12px |
| Sjene | ne - okviri umjesto sjena |
| Između sekcija | 80-120px |
| Širina stranice | 1200px |
Vještačka inteligencija će izgraditi vašu web stranicu u Duolingo stilu i popuniti je
- Popunite proizvodima i objavama putem linka - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa vaše stare stranice - samo navedite adresu.
- Moderan dizajn na najboljem engine-u: React ( Next.js) sa serverskim renderovanjem i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretrage i preporuke neuronskih mreža.
Slični stilovi
- Family — Namaz iz bajke na krem pergamentu
- Say Briefly — Skicnik za kreativnu agenciju na krem papiru
- Flying Papers — Ispovijest u crtanom filmu subotom ujutro
- Portrait — Zid sjećanja, 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 dugmetu "Registruj se" i na kurzivnoj riječi "zauvijek", i nikad više.
- Karl — 3D diorama u stilu pop-up knjige po sunčanom danu
- 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 sa zahrđalom nijansom
- MotherDuck — Terminal kodiran olovkama u boji na krem papiru
- Wise Design — Neonska štand na globalnoj ulici - jarko zeleni znak koji vrišti kroz prepunu tržnicu, dok se iza njega diskretno pojavljuje uglađeni korisnički interfejs proizvoda.
- Hatch — Ručno crtani dizajn u stilu samizdata pomiješan s pastelnim zdjelicama za slatkiše. Kremasto papirno 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 uglu.
- Superr — Topla školska sveska u mekom popodnevnom svjetlu. Krem stranica, narandžasti marker bez poklopca i hrpa plastificiranih naljepnica s imenima koje čekaju da se odlijepe.
- Mews — Kontrolni centar za ugostiteljstvo u zoru, okupan ružičastom bojom. Radni prostor s bijelim zidovima, osunčan, gdje podebljani crni font, tople krem kartice i jedno jarko ružičasto dugme za akciju definiraju svaki ekran - razigrano samopouzdanje, a ne korporativna suzdržanost.