Table des matières
- Vous avez choisi le thème Ino
- Ses particularités
- Ses paramètres globaux
- Quel est le format idéal pour vos images?
- Ratio image
- Couleurs
- → Application des couleurs non customisables
- Footer
- Typographies
- Boutons
- Navbar
- Déclinaisons
- Déclinaison Milieu médical
Vous avez choisi le thème Ino
Ses particularités
Démo live : https://minos.minotaure.io/psyche/
Psyché est le thème le plus classique et versatile. Ses images avec bords carré et sa sobriété lui assure une grande élégance et flexibilité. En toute simplicité, ce thème habillera parfaitement votre contenu.
Ses paramètres globaux
- Les titres et les textes sont alignés à gauche
- Les images utilisées dans les blocs sont à bords carré
- Le fond de page utilise la couleur Claire
- Les images utilisées dans les blocs sont à bords carrés
Quel est le format idéal pour vos images?
Ratio image
- Bloc Hero → 12:5
- Bloc Text-image → 4:5
- Blocs Colonnes, News et Event → 5:3
- Bloc Image et Video → 6:4
- Bloc Profile → 1:1
- Bloc Form → N/A
- Bloc Fact and Figure → N/A
Couleurs
Concernant le choix de couleur, le contraste doit rester important entre la couleur des titres et textes et la couleur de fond afin de garantir la meilleure lisibilité. Certaines combinaison de couleur “texte-fond” sont a éviter: exemples → du vert et du rouge, du jaune et du blanc, etc. N’hésitez pas à faire des tests!! Voici un outil pour vérifier le contraste
- Succession des sections avec alternance des couleurs de fond (couleur tertiary et light). Pour cette raison, il est conseillé que ces deux couleurs aient des teintes assez proches l’une de l’autre pour envisager une alternance agréable visuellement. Il est néanmoins possible de jouer avec les “compositions” de Minos pour changer localement cette logique.
- Nous conseillons pour le texte et les titres d’utiliser une couleur sombre (Dark Color) si les réglages derrière les variables de couleurs tertiaire et claire (Tertiary color & Light color) sont claires afin de garder un contraste assez important pour avoir une bonne lisibilité des textes.
- Pour une question de contraste, la couleur secondaire doit être une couleur plus foncée que les couleurs primaire et tertiaire
- La couleur Foncée étant très peu exploitée par défaut ailleurs, nous vous la conseillons à l’utilisation de vos titres (de H1 à H4 et de vos paragraphes)
- Si vous faites le choix d’une image en background, nous vous conseillons une image qui permettra le contraste avec la couleur du texte en claire.
→ Application des couleurs non customisables
Couleur Primaire
Utilisée par défaut pour la couleur du:
- Pour les flèches indiquant qu’il y a des éléments de sous-menu
- Pour les flèches indiquant les pages suivantes dans l’index des évènements
Couleur Secondaire
Utilisée par défaut pour la couleur du:
- arrière-plan de tout le bloc Formulaire
- pour les icons du bloc Profil
- le fond de la légende des images - bloc image
Couleur Tertiaire
Utilisée par défaut pour la couleur du:
- des blocs impairs dans la page
- de la barre de navigation upper
- le fond du Pied de page
Couleur Sombre
Utilisée par défaut pour la couleur du:
- des icons liés aux évènements
Couleur Claire
Utilisée par défaut pour la couleur du:
- des blocs pairs dans la page
- de fond de la page
- de la barre de navigation down
- de tous les éléments textes (titres et paragraphes) du bloc Formulaire
- Bloc Hero avec image en background uniquement: tous les éléments textes (titres et paragraphes) pour des soucis de contraste.
Footer
Les couleurs des éléments et d’arrière-plan du footer sont également customizables: pour plus de renseignements voir comment changer les couleurs des éléments du footer
Il y a 4 variables de couleurs utilisées par défaut dans le footer
- La couleur primaire pour les flèches indiquant qu’il y a des éléments de sous-menu
- La couleur secondaire pour les éléments survolés (menus, contact info et réseaux sociaux)
- La couleur tertiaire pour l’arrière-plan
- La couleur sombre pour les titres et les menus
Typographies
- Vous pouvez choisir jusqu’à 3 polices différentes pour l’ensemble des textes de votre site.
- Nous vous conseillons d’utiliser la police principale pour les titres
- Nous vous conseillons d’utiliser la police secondaire pour les paragraphes, liens et la navigation. Celle-ci sera de préférence classique pour favoriser la lisibilité des textes.
- La police tertiaire s’applique par défaut aux citations, aux catégories, et au titre du Pied de page.
- Pour une bonne utilisation de la hiérarchie des titres, nous vous conseillons d’utiliser uniquement le style H1 pour le titre du premier bloc de chaque page. Les titres des autres blocs utilisent alors le style H2. (cf. Conseils à la rédaction)
- Pour le menu secondaire, le texte prendra en compte le réglages de la police du menu principal (cf. Attribution de la police et des couleurs aux différents éléments), à l’exception des paramètres suivants: - la taille du texte est de 12px - le texte est en majuscule
Boutons
Trois niveaux de boutons ne signifie pas seulement 3 esthétiques différentes, mais surtout 3 niveaux d'importance. En savoir plus sur les boutons
Bouton primaire Bords arrondis Fond plein
Capture
Bouton secondaire Bords arrondis Fond transparent + bordure
Capture
Bouton tertiaire
Flèche à droite Pas de fond
Capture
Navbar
Nous vous conseillons d’utiliser en priorité la barre de navigation du bas pour contenir votre menu principal (ainsi que le menu Boutons et le sélecteur de langues). Voir plus d’informations sur la gestion des menus et l’affichage des menus dans le Header.
Déclinaisons
Déclinaison Milieu médical
