La marque est l'étape au meilleur rendement. Vingt minutes ici changent chaque écran qu'un membre verra, de la page de connexion jusqu'à 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 au-dessus, car vos membres arrivent des deux côtés, et un logo lisible sur un portable peut devenir illisible sur un téléphone. La même rangée bascule l'aperçu entre mode clair et mode sombre et l'ouvre en Plein écran.
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 propre mode, et un logo sombre sur fond sombre disparaît.
- Format : SVG ou PNG. Le SVG reste net à toute taille, le PNG a besoin de suffisamment de pixels.
- Proportions : environ 5:1, donc un logo large plutôt que carré.
- Taille : 1000 x 200 px convient bien pour un PNG.
Utilisez une version à fond transparent. Un cadre blanc autour de votre logo saute aux yeux dès qu'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 carré 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.
- Proportions : 1:1, donc carré.
- Taille : 512 x 512 px.
Utilisez le symbole de votre logo, pas le nom complet. À seize pixels, un mot devient une tache, alors qu'une seule lettre ou un symbole reste lisible.
Vos couleurs
Quatre couleurs, réglées séparément pour le mode clair et le mode sombre :
| Couleur | Où elle apparaît |
|---|---|
| Primaire | Boutons, liens, tout ce sur quoi vous voulez qu'on clique |
| Texte | Le texte courant sur toute la plateforme |
| Mise en avant | L'entrée de menu active, l'onglet sélectionné et d'autres accents qui attirent l'attention sans être un bouton |
| Arrière-plan | La surface sur laquelle repose tout le reste |
La primaire est celle qui compte. Reprenez-la de votre marque existante et vérifiez-la contre l'arrière-plan dans les deux modes. Un jaune pâle élégant sur du blanc devient un texte illisible sur du blanc.
Quand vous modifiez la couleur primaire, une note propose Adapter l'arrière-plan à votre couleur primaire. Appliquer ajoute 2 % de votre couleur primaire à l'arrière-plan de la page, ce qui relie la surface à votre marque sans changer sa lisibilité.
Testez les deux modes avant de terminer. Le mode sombre n'est pas un accessoire ici, et une couleur qui ne fonctionne 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 propose des polices sans empattement, avec empattement, à chasse fixe, d'affichage et manuscrites. Pour le texte courant en petite taille, c'est-à-dire l'essentiel de ce que lisent vos membres, une police sans empattement ou avec empattement fonctionne le mieux.
Une police neutre est généralement le bon choix. Votre logo porte le caractère, le texte courant porte les mots.
Avatars des membres
Avatars des membres définit la forme des avatars des membres et des utilisateurs sur toute la plateforme : Rond ou Carré. Le carré convient à une marque aux angles vifs, le rond est le choix familier par défaut.
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 membre.
- Connexion & Inscription pour l'écran de connexion.
- Écran de chargement pour l'animation affichée pendant le démarrage de la plateforme.
- Communauté pour l'en-tête de la communauté.
- Cours pour l'en-tête des cours.
- Lecteur vidéo pour les commandes de vos vidéos.
La marque d'abord. Le reste vaut le coup d'œil une fois votre logo et vos couleurs en place.