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?
- Couleurs
- → Application des couleurs non customisables
- Typographies
- Boutons
- Navbar
- Déclinaisons
- Déclinaison Institution
- Déclinaison Agence
Vous avez choisi le thème Ino
Ses particularités
Démo live Ino : https://minos.minotaure.io/ino
Grace à son design à touches colorées mais sobre, Ino vous permet de créer un site web soigné et attrayant. Ses images à bords carrée et son alternance de couleurs de fond en font un choix idéal pour un site fonctionnel, esthétique avec sa touche d’originalité. Ce thème est particulièrement adapté pour une agence ou une institution.
Ses paramètres globaux
- Tous les titres sont alignés à gauche
- Le fond de page utilise la couleur Claire
- Il y a une alternance des couleurs de fond des blocs (couleur Tertiaire et Claire).
- Les images utilisées dans les blocs sont à bords carrés
Quel est le format idéal pour vos images?
Le format idéal dépend du bloc dans le lequel se trouve l’image.
Le format dépend de 2 points:
- Le ratio dans lequel l’image va s’afficher (par exemple, la photo portrait d’une personne - donc une image plutôt verticale - va mieux fonctionner avec un ratio 2:3 (vertical) qu’un ratio 3:2 (en paysage) où elle risque d’être coupée.
- La taille de l’image qui se calcule en pixel. Une image avec un nombre de pixel suffisant lui permet de s’afficher proprement sans être floue (par exemple, les images qui prennent toute la largeur du site devront avoir au minimum 1400px pour être nettes)
- Ratio carré (1:1)
- Bloc Hero → taille min.
- Bloc Text-image → taille min.
- Bloc Profile → taille min.
- Ratio paysage (3:2)
- Bloc Colonnes → taille min.
- Bloc News → taille min.
- Bloc Event → taille min.
- Bloc Image → taille min.
- Bloc Video → taille min.
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 blocs avec alternance des couleurs de fond (couleur Tertiaire et Claire). Pour cette raison, il est conseillé que ces deux couleurs aient des teintes 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.
- Si vous utilisez la ‘Couleur Foncée’ pour le texte, nous conseillons d’utiliser une couleur Tertiaire & Claire claires afin de garder un contraste assez important pour avoir une bonne lisibilité des textes
- Pour une question de contraste, nous conseillons de choisir une Couleur primaire vive
→ Application des couleurs non customisables
Couleur Primaire
Utilisée par défaut pour la couleur du:
- menu secondaire
- fond des sous-menus
- fond du bloc Formulaire
- Pied de page
Couleur Secondaire
Utilisée par défaut pour la couleur du:
- fond des blocs pairs
Couleur Tertiaire
Cette couleur n’est pas utilisée par défaut
Couleur Sombre
Utilisée par défaut pour la couleur:
- du fond de la légende (Widget Image)
- des icônes
Couleur Claire
Utilisée par défaut pour la couleur du:
- fond des blocs impairs
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
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
Voici des exemples qui utilisent des couleurs et des typographies différentes.
