Ino (Going)

Ino (Going)

image

Table des matières

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
image
  • 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
image
⚠️
On ne peut pas changer les icônes et les pictos.

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.
  • image
  • 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)
  • image
  • 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

💡
Conseils
  • 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
💡
Il est important de bien choisir les couleurs des boutons et de la navigation pour que ceux-ci restent également bien visible au survol. N’hésitez pas à faire des tests! METTRE UN VISUEL

→ Application des couleurs non customisables

💡
Ce sont les paramètres de couleurs que vous ne pouvez pas choisir à partir des réglages de Minos

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

Les polices installées ne vous inspirent pas ? Nous pouvons en rajouter une pour vous. Nous vous conseillons des Google fonts et il est toujours possible de trouver une typographie équivalente à celle de votre charte graphique.
  • 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.
    • 💡
      Vous pouvez tout à fait utiliser la même police partout ou pour deux niveaux (ex: la même sélection pour police secondaire et tertiaire).
  • 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.

Déclinaison Institution

image

Lien prototype

Déclinaison Agence

image

Lien prototype