Duolingo
Mascotte de classe ludique sur papier blanc
L'interface de Duolingo est conçue comme un livre d'images pour enfants: une page blanche, une police de caractères ronde et généreuse, et un vert profond qui évoque immédiatement la « bonne réponse». Le texte principal est d'un gris moyen apaisant, laissant le vert et son bleu d'accentuation jouer un rôle essentiel: le vert pour la progression et les titres, le bleu pour les liens cliquables et les actions supplémentaires. Les éléments ont la forme de pilules ou de coins arrondis et épais, bordés de noir ou de couleur, donnant à chaque bouton l'apparence d'un autocollant collé sur la page plutôt que d'un simple élément d'interface.
Les sections occupent toute la largeur de la page et sont disposées verticalement en une seule colonne, chacune d'environ 800 pixels de haut. La largeur maximale du contenu est d'environ 1 pixel, centrée. Le texte à gauche et les illustrations à droite alternent, offrant un espace vertical confortable (80 pixels entre les sections). Il n'y a ni grille ni mise en page à plusieurs colonnes: chaque section est composée d'un bloc de texte unique associé à une illustration. La navigation se fait par une barre supérieure minimaliste avec un logo et un sélecteur de langue, qui apparaît comme une barre fixe entre les sections. Le pied de page est une bande verte qui s'étend sur toute la largeur de la page. La structure est éditoriale: titre, paragraphe, appel à l'action, illustration, répétition.
Le langage visuel du livre met en scène des mascottes en deux dimensions (Duet la chouette et diverses figures humaines) aux formes géométriques arrondies, aux contours noirs marqués et à la palette de couleurs complémentaires (rose, violet, jaune, orange et bleu) qui n'apparaît jamais dans l'interface. Les illustrations sont placées à droite du texte, dans chaque section, sur un fond blanc pur, sans cadre ni arrière-plan. Il n'y a pas de photographies: les personnages constituent le contenu visuel. L'iconographie utilise des contours épais, en accord avec le style des mascottes. La densité d'images est modérée: chaque section présente une grande illustration du personnage, le reste de la page étant consacré au texte et aux espaces blancs.
Palette
Marque
- Eager Green
#58cc02— Le vert sert à mettre en évidence les liens, les étiquettes et les courtes phrases. Il ne doit pas être utilisé comme couleur principale pour les appels à l'action. - Storybook Green
#d7ffb8— Des reflets doux sur les surfaces claires, des tons de fond subtils derrière les étiquettes de navigation dans le pied de page.
Neutre
- Spark Blue
#1cb0f6— Le bleu sert à mettre en évidence les liens, les étiquettes et les courtes phrases. Il ne doit pas être utilisé comme couleur principale pour les appels à l'action. - Fresh Leaf
#a5ed6e— Le vert sert à mettre en évidence les liens, les étiquettes et les courtes phrases. Il ne doit pas être utilisé comme couleur principale pour les appels à l'action. - Night Ink
#000437— Les liens, les étiquettes et les courtes phrases mises en évidence sont surlignés en violet. - Paper White
#ffffff— Page canevas, surfaces en carton, texte de bouton sur fond vert foncé. - Charcoal
#4b4b4b— En-têtes et texte principal - Texte foncé universel permettant aux titres colorés de se démarquer. - Pencil Gray
#777777— Les paragraphes principaux sont mis en évidence par des caractères discrets, tandis que les textes descriptifs secondaires s'estompent en arrière-plan, laissant ainsi les éléments colorés ressortir.
Typographie
de 13 à 64 px · 7 étapes
- feather — remplacement: Inter · grandes lignes 700 · Les titres de section, tels que « Gratuit. Ludique. Efficace» et « Test d'anglais Duolingo», sont affichés dans une police arrondie personnalisée, conférant à la marque un style ludique, convivial et attachant. Remplacez-la par « Feather Bold» ou « Nunito Black» dans la graisse appropriée. Espacement des lettres: -0,0200 em
- duolingo-sans — remplacement: Inter · grandes lignes 500 · Paragraphes principaux et liens de navigation en 17 px/500 — une police sans empattement géométrique qui reste lisible, permettant à la graisse de trait de 700 de mettre en valeur les points importants. À remplacer par « DIN Next», « Inter» ou « Nunito Sans».
- duolingo-sans — remplacement: Inter · grandes lignes 700 · Toutes les valeurs de graisse (700) sont utilisées: les majuscules des étiquettes de navigation font 15 px (0,0530 em), les sous-titres 19 px et 32 px, et la mise en valeur des liens 13 px. La police est la même que celle du texte principal; la différence visuelle réside dans la graisse, et non dans la police elle-même. Espacement des lettres: 0,0530 em pour les majuscules des étiquettes de navigation.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 12px |
| Rayon du bouton | 12px |
| Rayon de la carte | 12px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 80-120px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Duolingo et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Family — Une illustration tirée d'un conte de fées sur du parchemin crème
- Say Briefly — Carnet de croquis d'agence créative sur papier crème
- Flying Papers — Confession dans un dessin animé du samedi matin
- Portrait — Un mur de souvenirs, immortalisés en Polaroïds sur papier crème. Un album photo lumineux, couleur crème, où l'encre bleu foncé est le seul texte, les seules lignes de structure et la seule couleur du cadre — avec un unique arc-en-ciel dessiné à la main qui apparaît une seule fois, sur le bouton « S'inscrire» et sur le mot « pour toujours» en italique, et jamais plus.
- Karl — Un diorama en 3D de style livre pop-up par une journée ensoleillée
- Navigate — Un grand ensemble d'autocollants collés sur un tableau: une police de caractères grotesque de grande taille, le tout sous forme de tablettes, et cinq icônes multicolores se répétant comme un logo.
- Monte — Matinée sur la côte avec une teinte rouillée
- MotherDuck — Terminal codé aux crayons de couleur sur papier crème
- Wise Design — Un étal de marché au néon dans une rue internationale: une enseigne vert vif qui se démarque dans la foule, tandis que derrière, une interface utilisateur soignée apparaît discrètement.
- Hatch — Un motif dessiné à la main, façon samizdat, mêlé à des bonbonnières aux tons pastel. Une toile de papier crème ornée de touches de menthe, de confettis et d'invitations à l'action en forme de pilule, où une police à empattements large et audacieuse suggère le plaisir, et une mascotte bleue fait un clin d'œil dans un coin.
- Superr — Un cahier d'écolier aux tons chauds, baigné par la douce lumière de l'après-midi. Une page couleur crème, un feutre orange sans capuchon et une pile d'étiquettes plastifiées avec nom, prêtes à être décollées.
- Mews — Un centre de contrôle hôtelier à l'aube, baigné de rose. Un espace de travail aux murs blancs, inondé de soleil, où des caractères noirs audacieux, des fiches couleur crème chaleureuse et un unique bouton d'action rose vif définissent chaque écran – une confiance ludique plutôt qu'une retenue corporative.