Telegramă, WhatsApp+380637610482
Valeri Danyuk
Valeri DanyukdezvoltatorDezvoltarea de instrumente de inteligență artificială pentru companii. De înaltă calitate. La prețuri accesibile.Scrie pe Telegram
Duolingo — o previzualizare a unui site în acest stil

Duolingo

Mascotă jucăușă a clasei pe hârtie albă

Interfața Duolingo este concepută ca o carte ilustrată pentru copii: o pânză de hârtie albă, un font rotunjit și plin și o singură culoare verde bogată, care evocă imediat „răspunsul corect”. Textul principal este în tonuri liniștitoare de gri mediu, permițând verdelui și accentului său albastru să facă toată munca emoțională - verde pentru progres și titluri, albastru pentru linkuri pe care se poate da clic și acțiuni suplimentare. Componentele au forma unor pastile sau a unor colțuri rotunjite, groase, cu margini groase, negre sau colorate, făcând ca fiecare buton să pară mai degrabă un autocolant lipit pe pagină decât un control plat al interfeței utilizator.

Secțiunile ocupă întreaga lățime a paginii și sunt aranjate vertical într-o singură coloană, fiecare având o înălțime de aproximativ 800 de pixeli. Lățimea maximă a conținutului este de aproximativ 1 pixel centrat. Textul din stânga și ilustrațiile din dreapta alternează, oferind un spațiu vertical amplu (80 de pixeli între secțiuni). Nu există grile sau machete cu mai multe coloane - fiecare secțiune este un singur bloc de text asociat cu o singură ilustrație. Navigarea este o bară superioară minimalistă, cu un logo și un selector de limbă, care apare ca o bară fixă între secțiuni. Subsolul este o bandă verde care se întinde pe întreaga lățime a paginii. Ritmul este editorial: titlu, paragraf, îndemn la acțiune, ilustrație, repetiție.

Limbajul ilustrativ al cărții prezintă personaje mascot plate, bidimensionale (bufnița Duet și diverse figuri umane) cu forme geometrice rotunjite, contururi negre îndrăznețe și o paletă de culori complementară roz, violet, galben, portocaliu și albastru, care nu apare niciodată în interfața în sine. Ilustrațiile sunt poziționate lângă text, în partea dreaptă a fiecărei secțiuni, pe un fundal alb pur, fără containere sau fundaluri. Nu există fotografii - personajele servesc drept conținut vizual. Iconografia folosește contururi groase, în concordanță cu stilul mascotelor. Densitatea imaginii este moderată: fiecare secțiune prezintă o ilustrație mare a personajului, restul paginii fiind dedicat tipografiei și spațiilor albe.

Paletă

Marca

  • Eager Green #58cc02 — Verdele este folosit pentru a evidenția linkuri, etichete și fraze scurte. Nu ar trebui folosit ca și culoare principală pentru îndemnuri la acțiune.
  • Storybook Green #d7ffb8 — Evidențiere delicată pe suprafețe deschise la culoare, tonuri subtile de fundal în spatele etichetelor de navigare din subsol.

Neutru

  • Spark Blue #1cb0f6 — Albastrul este folosit pentru a evidenția linkuri, etichete și fraze scurte. Nu ar trebui folosit ca și culoare principală pentru îndemnuri la acțiune.
  • Fresh Leaf #a5ed6e — Verdele este folosit pentru a evidenția linkuri, etichete și fraze scurte. Nu ar trebui folosit ca și culoare principală pentru îndemnuri la acțiune.
  • Night Ink #000437 — Linkurile, etichetele și frazele scurte evidențiate sunt evidențiate cu violet.
  • Paper White #ffffff — Pânză de pagină, suprafețe de carton, text pentru butoane pe fundal verde/închis.
  • Charcoal #4b4b4b — Anteturi și text principal - Text universal închis la culoare care permite titlurilor colorate să iasă în evidență.
  • Pencil Gray #777777 — Paragrafele principale ale textului sunt evidențiate cu litere discrete, iar textul descriptiv secundar se retrage în fundal, astfel încât elementele colorate ies în evidență.

Tipografie

de la 13 la 64px · 7 pași

  • feather — înlocuire: Inter · contururi 700 · Titlurile secțiunilor, cum ar fi „Gratuit. Distractiv. Eficient” și „Test de engleză Duolingo”, sunt afișate folosind un font rotunjit personalizat, conferind mărcii stilul său jucăuș, prietenos, asemănător unei mascote. Înlocuiți-le cu „Feather Bold” sau „Nunito Black” în grosimea corespunzătoare. Spațiere între litere: -0.0200em
  • duolingo-sans — înlocuire: Inter · contururi 500 · Paragrafe principale și linkuri de navigare la 17px/500 — un font sans-serif geometric care rămâne lizibil, permițând grosimii de 700 de linii să evidențieze punctele importante. Înlocuiți cu „DIN Next”, „Inter” sau „Nunito Sans”.
  • duolingo-sans — înlocuire: Inter · contururi 700 · Se utilizează toate valorile de pondere 700: majusculele din etichetele de navigare sunt de 15px (ls 0.0530em), subtitlurile sunt de 19px și 32px, iar accentul pe linkuri este de 13px. Fontul este același ca textul principal - diferența vizuală constă în grosime, nu în schimbarea fontului. Spațierea dintre litere: 0.0530em pentru majusculele din etichetele de navigare.

Intervale și formă

ScopSens
Densitatedens
Pasul de bază12px
Raza butonului12px
Raza cardului12px
Umbrefără - margini în loc de umbre
Între secțiuni80-120px
Lățimea paginii1200px

Inteligența artificială vă va construi site-ul web în stilul Duolingo și îl va completa

  • Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
  • Transferați conținut de pe vechiul site - specificați doar adresa.
  • Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
  • Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.

Stiluri similare

  • Family — O întindere dintr-un basm pe pergament crem
  • Say Briefly — Caiet de schițe pentru agenție de creație pe hârtie crem
  • Flying Papers — Spovedanie într-un desen animat de sâmbătă dimineața
  • Portrait — Un perete de amintiri, surprinse în Polaroid pe hârtie crem. Un album de albume de culoare crem, strălucitor, unde cerneala albastru închis este singurul text, singurele linii de structură și singura culoare a cadrului - cu un singur curcubeu desenat manual care apare o dată, pe butonul „Înregistrare” și pe cuvântul italic „pentru totdeauna” și niciodată.
  • Karl — O dioramă 3D în stilul unei cărți pop-up într-o zi însorită
  • Navigate — Un set mare de autocolante atașate la o placă: fonturi grotești mari, toate sub formă de tablete și cinci pictograme multicolore, repetând ca un logo
  • Monte — Dimineață pe coastă cu o nuanță ruginie
  • MotherDuck — Terminal codificat cu creioane colorate pe hârtie crem
  • Wise Design — O tarabă cu lumini neon pe o stradă globală — un semn verde strălucitor care strigă prin piața aglomerată, în timp ce în spatele lui apare discret o interfață de utilizator elegantă.
  • Hatch — Un design desenat manual, în stil samizdat, combinat cu boluri pastelate pentru bomboane. O pânză de hârtie crem, împodobită cu accente de mentă, puncte confetti și îndemnuri la acțiune în formă de pastilă, unde un font serif mare și îndrăzneț sugerează distracție, iar o mascotă albastră face cu ochiul în colț.
  • Superr — Un caiet de școală cald în lumina blândă a după-amiezii. O pagină crem, un marker portocaliu fără capac și un teanc de abțibilduri laminate cu nume care așteaptă să fie dezlipite.
  • Mews — Un centru de control al ospitalității în zori, îmbibat în roz. Un spațiu de lucru cu pereți albi, luminat de soare, unde fonturi negre îndrăznețe, cartonașe de culoare crem cald și un singur buton de acțiune roz aprins definesc fiecare ecran - o încredere jucăușă, mai degrabă decât o reținere corporativă.