Duolingo
Mascotte di classe giocosa su carta bianca
L'interfaccia di Duolingo è progettata come un libro illustrato per bambini: una tela bianca, un carattere tipografico spesso e arrotondato e un unico, intenso colore verde che evoca immediatamente la "risposta corretta". Il testo principale è di un rilassante grigio medio, lasciando che il verde e il suo accento blu si occupino di tutto il lavoro emotivo: verde per i progressi e i titoli, blu per i link cliccabili e le azioni aggiuntive. I componenti hanno la forma di pillole o di angoli tondi e arrotondati con spessi bordi neri o colorati, il che fa sì che ogni pulsante sembri più un adesivo attaccato alla pagina che un semplice elemento dell'interfaccia utente.
Le sezioni occupano l'intera larghezza della pagina e sono disposte verticalmente in un'unica colonna, ciascuna alta circa 800 pixel. La larghezza massima del contenuto è di circa 1 pixel centrato. Il testo a sinistra e le illustrazioni a destra si alternano, offrendo ampio spazio verticale (80 pixel tra le sezioni). Non sono presenti griglie o layout a più colonne: ogni sezione è un singolo blocco di testo abbinato a una singola illustrazione. La navigazione è costituita da una barra superiore minimalista con logo e selettore della lingua, che appare come una barra fissa tra le sezioni. Il piè di pagina è una striscia verde che si estende per tutta la larghezza della pagina. Il ritmo è editoriale: titolo, paragrafo, invito all'azione, illustrazione, ripetizione.
Il linguaggio illustrativo del libro si caratterizza per personaggi mascotte piatti e bidimensionali (il gufo Duet e varie figure umane) con forme geometriche arrotondate, contorni neri decisi e una palette di colori complementari di rosa, viola, giallo, arancione e blu che non compare mai nell'interfaccia stessa. Le illustrazioni sono posizionate accanto al testo sul lato destro di ogni sezione, su uno sfondo bianco puro, senza contenitori o sfondi. Non ci sono fotografie: i personaggi fungono da contenuto visivo. L'iconografia utilizza contorni spessi, in linea con lo stile delle mascotte. La densità delle immagini è moderata: ogni sezione presenta una grande illustrazione del personaggio, mentre il resto della pagina è dedicato alla tipografia e agli spazi bianchi.
Tavolozza
Marca
- Eager Green
#58cc02— Il verde viene utilizzato per evidenziare link, tag e frasi brevi. Non dovrebbe essere utilizzato come colore principale per le call to action. - Storybook Green
#d7ffb8— Riflessi tenui su superfici chiare, tonalità di sfondo delicate dietro le etichette di navigazione nel piè di pagina.
Neutro
- Spark Blue
#1cb0f6— Il blu viene utilizzato per evidenziare link, tag e frasi brevi. Non dovrebbe essere utilizzato come colore principale per le call to action. - Fresh Leaf
#a5ed6e— Il verde viene utilizzato per evidenziare link, tag e frasi brevi. Non dovrebbe essere utilizzato come colore principale per le call to action. - Night Ink
#000437— Collegamenti, tag e brevi frasi evidenziate sono evidenziati in viola. - Paper White
#ffffff— Tela su carta, superfici in cartone, testo del pulsante su sfondo verde/scuro. - Charcoal
#4b4b4b— Intestazioni e testo principale Hero - Testo scuro universale che permette ai titoli colorati di risaltare. - Pencil Gray
#777777— I paragrafi principali del testo sono evidenziati con lettere poco appariscenti, mentre il testo descrittivo secondario passa in secondo piano, in modo che gli elementi colorati risaltino.
Tipografia
da 13 a 64 pixel · 7 passaggi
- feather — sostituzione: Inter · contorni 700 · Le intestazioni di sezione, come "Gratis. Divertente. Efficace" e "Test di inglese Duolingo", vengono visualizzate utilizzando un carattere arrotondato personalizzato, conferendo al marchio uno stile giocoso, amichevole e simile a quello di una mascotte. Sostituisci con "Feather Bold" o "Nunito Black" nel peso appropriato. Spaziatura tra le lettere: -0,0200em
- duolingo-sans — sostituzione: Inter · contorni 500 · I paragrafi principali e i link di navigazione hanno un carattere sans-serif geometrico di 17px/500, che rimane leggibile, permettendo al peso di linea di 700 di evidenziare i punti importanti. Sostituire con 'DIN Next', 'Inter' o 'Nunito Sans'.
- duolingo-sans — sostituzione: Inter · contorni 700 · Vengono utilizzati tutti i valori weight-700: le lettere maiuscole nelle etichette di navigazione sono 15px (ls 0.0530em), i sottotitoli sono 19px e 32px e l'enfasi dei link è 13px. Lo stesso carattere del testo principale: la differenza visiva sta nel peso, non nel carattere. Spaziatura tra le lettere: 0.0530em per le lettere maiuscole nelle etichette di navigazione.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 12px |
| Raggio del pulsante | 12px |
| Raggio della carta | 12px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 80-120px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Duolingo e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- Family — Una tavola tratta da una fiaba su pergamena color crema
- Say Briefly — Blocco da disegno dell'agenzia creativa su carta color crema
- Flying Papers — Confessioni in un cartone animato del sabato mattina
- Portrait — Un muro di ricordi, immortalati in Polaroid su carta color crema. Un album di ritagli luminoso, color crema, dove l'inchiostro blu scuro è l'unico testo, l'unica linea guida e l'unico colore della cornice, con un unico arcobaleno disegnato a mano che appare una sola volta, sul pulsante "Registrati" e sulla parola in corsivo "per sempre", e mai più.
- Karl — Un diorama tridimensionale in stile libro pop-up in una giornata di sole.
- Navigate — Un grande set di adesivi applicati su una tavola: un grande carattere grottesco, tutto a forma di tavolette e cinque icone multicolori, ripetute come un logo.
- Monte — Mattina sulla costa con una sfumatura ruggine
- MotherDuck — Terminale codificato con matite colorate su carta color crema
- Wise Design — Una bancarella al neon in un mercato cosmopolita: un'insegna verde brillante che svetta tra la folla, mentre alle sue spalle, un'interfaccia utente di prodotto raffinata fa la sua comparsa in modo discreto.
- Hatch — Un design disegnato a mano in stile samizdat, mescolato a ciotole di caramelle dai colori pastello. Una tela di carta color crema adornata con accenti color menta, pois di coriandoli e inviti all'azione a forma di pillola, dove un grande carattere serif in grassetto suggerisce divertimento e una mascotte blu ammicca in un angolo.
- Superr — Un caldo quaderno scolastico nella morbida luce del pomeriggio. Una pagina color crema, un pennarello arancione senza cappuccio e una pila di adesivi plastificati con i nomi, pronti per essere staccati.
- Mews — Una sala di controllo per il settore alberghiero all'alba, immersa nel rosa. Uno spazio di lavoro dalle pareti bianche e illuminato dal sole, dove caratteri neri in grassetto, cartoncini color crema caldo e un singolo pulsante rosa acceso definiscono ogni schermata: una disinvoltura giocosa piuttosto che una rigida formalità aziendale.