| Niveau | Desktop (px/rem) | Tablette (px/rem) | Mobile (px/rem) | Interlignage conseillé |
|---|---|---|---|---|
| H1 | 3rem | 2.5rem | 2rem | D_3.2 | Mob_2.65rem |
| H2 | 2.2rem | 1.8rem | 1.4rem | D_2.6 | Mob_2.2rem |
| H3 | 1.7rem | 1.4rem | 1.3rem | D_2.2 | Mob_1.8rem |
| H4 | 1.5rem | 1.2rem | 1.15rem | D_2 | Mob_1.6rem |
| H5 | 1.3rem | 1.1rem | 1.05rem | D_1.8 | Mob_1.5rem |
| H6 | 1.2rem | 1rem | 1rem | D_1.7 | Mob_1rem |
| Corps | 1rem | 0.95rem | 0.9rem | D_1.5 | Mob_1.4rem |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Banque d’icônes intégrée : Font Awesome
Taille de l’icône : multiple de 8px
Espacememnt entre l’icône et le titre : 8px
Pour assurer une cohérence visuelle et une hiérarchie claire sur chaque site, nous suivons la règle des 60-30-10 :
60% – Couleur dominante : Généralement le blanc, pour un design épuré et aéré.
30% – Couleur secondaire : Accentue la structure et crée du contraste.
10% – Couleur d’accentuation : Met en avant les éléments interactifs (CTA, liens, éléments clés).
Chaque site de notre multisite dispose de trois couleurs principales, choisies avec soin pour respecter l’identité visuelle et garantir une lisibilité optimale.
L’accessibilité est primordiale pour garantir une expérience utilisateur fluide et inclusive. Nous veillons donc à :
✅ Un contraste suffisant entre le texte et l’arrière-plan.
✅ Des couleurs compréhensibles par les personnes atteintes de daltonisme.
✅ L’utilisation de symboles et d’icônes en complément de la couleur (ex : erreurs en rouge + icône)
Toutes les images suivent une règle d’arrondi en multiples de 8px pour garantir une cohérence visuelle :
8px : Léger arrondi, idéal pour des cartes et des miniatures.
16px : Arrondi intermédiaire, parfait pour des images de contenu.
32px : Arrondi prononcé, utilisé pour des avatars ou des images immersives.
Pour assurer une mise en page harmonieuse et éviter tout problème de redimensionnement automatique, les images doivent respecter ces dimensions :
| Type d’image | Orientation | Dimensions (px) | Utilisation |
|---|---|---|---|
| Images paysage | Horizontale | 600 × 400 | Images mises en avant pour articles, actualités et agenda |
| Images portrait | Verticale | 500 × 625 | CTA, images de contenu |
✅ Formats recommandés :
JPG pour les photos optimisées.
PNG pour les images avec transparence.
SVG pour les icônes et logos vectoriels.
WebP pour un meilleur ratio qualité/poids (préféré si supporté).
✅ Poids optimisé :
Moins de 200 Ko par image pour de meilleures performances.
✅ Compression recommandée :
✅ Tests et performance :
Vérifier l’impact des images avec PageSpeed Insights.
En appliquant ces principes, les images resteront nettes, rapides à charger
1 rue de Germont – 76031 Rouen Cedex
Standard : 02 32 88 89 90
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.