La marque est l'étape au meilleur rapport effort-résultat. Vingt minutes ici changent chaque écran qu'un membre verra un jour, de la page de connexion à la facture.
L'aperçu en direct
Le panneau de droite montre vos modifications au fur et à mesure. Basculez-le entre ordinateur et mobile avec les icônes du dessus, car vos membres arrivent par les deux et un logo lisible sur un portable peut être illisible sur un téléphone.
Rien n'est public tant que vous n'avez pas enregistré.
Votre logo
Téléversez deux versions : une pour le mode clair et une pour le mode sombre. Les membres choisissent leur mode, et un logo sombre sur fond sombre disparaît.
- Format : SVG ou PNG. Le SVG reste net à toute taille, le PNG a besoin d'assez de pixels.
- Proportion : environ 5:1, donc un logo large plutôt que carré.
- Taille : 1000 x 200 px fonctionne bien en PNG.
Utilisez une version à fond transparent. Un cadre blanc autour de votre logo se remarque à la seconde où un membre passe en mode sombre.
Si votre logo est un symbole carré avec le nom à côté, c'est cette version qu'il faut téléverser. Un symbole seul se perd dans un espace large.
Votre favicon
Le favicon est la petite icône dans l'onglet du navigateur. Téléversez-en aussi une version claire et une version sombre.
- Format : SVG ou PNG.
- Proportion : 1:1, donc carré.
- Taille : 512 x 512 px.
Utilisez le symbole de votre logo, pas le nom complet. À seize pixels, un mot est une tache, tandis qu'une seule lettre ou un symbole reste lisible.
Vos couleurs
Quatre couleurs, définies séparément pour le mode clair et le mode sombre :
| Couleur | Où elle apparaît |
|---|---|
| Principale | Boutons, liens, états actifs, tout ce sur quoi on doit cliquer |
| Texte | Le corps de texte partout sur la plateforme |
| Accent | Les accents qui attirent l'œil sans être un bouton |
| Fond | La surface sur laquelle tout le reste repose |
C'est la principale qui compte. Reprenez-la de votre marque existante et vérifiez-la sur le fond dans les deux modes. Un jaune pâle élégant sur blanc devient un texte illisible sur blanc.
Testez les deux modes avant de conclure. Le mode sombre n'est pas ici une arrière-pensée, et une couleur qui ne marche que dans l'un des deux paraîtra cassée à la moitié de vos membres.
Typographie
Choisissez une police pour toute la plateforme. La liste contient des familles qui se chargent vite et se lisent bien à l'écran en petite taille, ce qui est l'essentiel de ce que font vos membres.
Une police neutre est le plus souvent le bon choix. Votre logo porte le caractère, le texte porte les mots.
Au-delà de la marque
Les onglets en haut de la page de design vont plus loin :
- Mise en page pour la forme de l'espace membres.
- Connexion & Inscription pour l'écran de connexion.
- Écran de chargement pour ce qui s'affiche pendant le chargement.
- Communauté pour l'en-tête de la communauté.
- Cours pour l'en-tête du cours.
- Lecteur vidéo pour les commandes de vos vidéos.
La marque d'abord. Le reste mérite un coup d'œil une fois votre logo et vos couleurs en place.