Duolingo
Mascota de classe divertida sobre paper blanc
La interfície de Duolingo està dissenyada com un llibre infantil il·lustrat: un llenç de paper blanc, una font arrodonida i grassoneta, i un únic color verd intens que evoca immediatament la "resposta correcta". El text principal és d'uns tons grisos mitjans suaus, cosa que permet que el verd i el seu blau d'accent facin tota la feina emocional: el verd per al progrés i els encapçalaments, el blau per als enllaços clicables i les accions addicionals. Els components tenen forma de pastilles o cantonades gruixudes i arrodonides amb vores gruixudes negres o de color, cosa que fa que cada botó sembli més un adhesiu enganxat a la pàgina que un control d'IU pla.
Les seccions ocupen tota l'amplada de la pàgina i estan disposades verticalment en una sola columna, cadascuna d'aproximadament 800 píxels d'alçada. L'amplada màxima del contingut és d'aproximadament 1 píxel centrada. El text de l'esquerra i les il·lustracions de la dreta s'alternen, proporcionant un ampli espai vertical (80 píxels entre seccions). No hi ha targetes de quadrícula ni dissenys de diverses columnes: cada secció és un únic bloc de text emparellat amb una sola il·lustració. La navegació és una barra superior minimalista amb un logotip i un selector d'idioma, que apareix com una barra fixa entre seccions. El peu de pàgina és una franja verda que abasta tota l'amplada de la pàgina. El ritme és editorial: encapçalament, paràgraf, crida a l'acció, il·lustració, repetició.
El llenguatge il·lustratiu del llibre presenta personatges mascotes plans i bidimensionals (el mussol Duet i diverses figures humanes) amb formes geomètriques arrodonides, contorns negres en negreta i una paleta de colors complementària de rosa, morat, groc, taronja i blau que mai apareix a la interfície en si. Les il·lustracions es col·loquen al costat del text a la dreta de cada secció, sobre un fons blanc pur, sense contenidors ni fons. No hi ha fotografies: els personatges serveixen com a contingut visual. La iconografia utilitza contorns gruixuts, d'acord amb l'estil de les mascotes. La densitat de la imatge és moderada: cada secció presenta una gran il·lustració del personatge, i la resta de la pàgina està dedicada a la tipografia i l'espai en blanc.
Paleta
Marca
- Eager Green
#58cc02— El verd s'utilitza per ressaltar enllaços, etiquetes i frases curtes. No s'hauria d'utilitzar com a color principal per a les crides a l'acció. - Storybook Green
#d7ffb8— Destacats suaus sobre superfícies clares, tons de fons subtils darrere de les etiquetes de navegació al peu de pàgina.
Neutral
- Spark Blue
#1cb0f6— El blau s'utilitza per ressaltar enllaços, etiquetes i frases curtes. No s'hauria d'utilitzar com a color principal per a les crides a l'acció. - Fresh Leaf
#a5ed6e— El verd s'utilitza per ressaltar enllaços, etiquetes i frases curtes. No s'hauria d'utilitzar com a color principal per a les crides a l'acció. - Night Ink
#000437— Els enllaços, les etiquetes i les frases curtes ressaltades estan ressaltades en color porpra. - Paper White
#ffffff— Llenç de pàgina, superfícies de cartró, text de botons sobre fons verd/fosc. - Charcoal
#4b4b4b— Encapçalaments i text del cos principals: text fosc universal que permet que els titulars de colors destaquin. - Pencil Gray
#777777— Els paràgrafs principals del text es ressalten amb lletres discretes, i el text descriptiu secundari retrocedeix en segon pla, de manera que els elements acolorits passen a primer pla.
Tipografia
de 13 a 64 px · 7 passos
- feather — reemplaçament: Inter · esquemes 700 · Els encapçalaments de secció, com ara "Gratuït. Divertit. Eficaç" i "Test d'anglès de Duolingo", es mostren amb una font arrodonida personalitzada, donant a la marca el seu estil lúdic, amable i de mascota. Substituïu-los per "Feather Bold" o "Nunito Black" amb el gruix adequat. Espai entre lletres: -0.0200em
- duolingo-sans — reemplaçament: Inter · esquemes 500 · Paràgrafs principals i enllaços de navegació a 17px/500: una font sans-serif geomètrica que roman llegible, permetent que el gruix de línia de 700 ressalti els punts importants. Substituïu-los per «DIN Next», «Inter» o «Nunito Sans».
- duolingo-sans — reemplaçament: Inter · esquemes 700 · S'utilitzen tots els valors de pes 700: les majúscules a les etiquetes de navegació són de 15 px (ls 0.0530em), els subtítols són de 19 px i 32 px, i l'èmfasi dels enllaços és de 13 px. La mateixa font que el text principal; la diferència visual rau en el pes, no en el canvi de font. Espaiat entre lletres: 0.0530em per a les majúscules a les etiquetes de navegació.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | dens |
| Pas bàsic | 12px |
| Radi del botó | 12px |
| Radi de la targeta | 12px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 80-120px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Duolingo i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Family — Una extensió d'un conte de fades sobre pergamí crema
- Say Briefly — Quadern de dibuix d'agència creativa sobre paper crema
- Flying Papers — Confessió en un dibuix animat de dissabte al matí
- Portrait — Un mur de records, capturats en Polaroids sobre paper de color crema. Un àlbum de retalls de color crema brillant on la tinta blau fosc serveix com a únic text, les úniques línies d'estructura i l'únic color del marc, amb un únic arc de Sant Martí dibuixat a mà que apareix una vegada, al botó "Registra't" i a la paraula en cursiva "per sempre", i mai més.
- Karl — Un diorama en 3D a l'estil d'un llibre emergent en un dia assolellat
- Navigate — Un gran conjunt d'adhesius enganxats a un tauler: una font grotesca gran, tot en forma de tauletes i cinc icones multicolors, que es repeteixen com un logotip
- Monte — Matí a la costa amb un tint rovellat
- MotherDuck — Terminal codificat amb llapis de colors sobre paper crema
- Wise Design — Una parada de mercat de neó en un carrer global: un rètol verd brillant que crida a través del mercat concorregut, mentre que darrere seu apareix discretament una interfície d'usuari de producte polida.
- Hatch — Un disseny dibuixat a mà, d'estil samizdat, barrejat amb bols de caramels pastel. Un llenç de paper cremós adornat amb detalls de menta, punts de confeti i crides a l'acció en forma de pastilla, on una font serif gran i en negreta insinua diversió i una mascota blava fa l'ullet a la cantonada.
- Superr — Un quadern escolar càlid a la suau llum de la tarda. Una pàgina de color crema, un retolador taronja sense tapa i una pila d'adhesius plastificats amb el nom que esperen ser desenganxats.
- Mews — Un centre de control d'hostaleria a l'alba, amarat de rosa. Un espai de treball de parets blanques i il·luminat pel sol on la tipografia negra en negreta, les targetes de color crema càlid i un únic botó d'acció rosa fúcsia defineixen cada pantalla: una confiança lúdica en lloc de contenció corporativa.