Table des matières
Charte graphique du site Khaganat
Pour l'organisation général du site, voir Améliorer le(s) site web de Khaganat.
Le site web est construit de bric et de broc (divers CMS), l'unifier graphiquement est important tout en étant assez complexe.
Il y a deux “parties” sur le site, représentés par des variations dans la charte : la partie Khaganat (projet général), dans les tons violets, et la partie Khanat (premier univers), dans les tons bleus. La charte graphique de Khanat devrait être reprise en jeu…
Toutes les pages du site ont un élément en commun1) : la barre de navigation générale. On peut trouver son code sur le gitlab. Cette dernière a été refaite sur Django.
Les textes sont de couleur sombre sur fond blanc ou blanc translucide afin d'avoir un bon contraste sans fatiguer les yeux.
Voir aussi la page Astuces pour les sites web (css et compagnie) pour des outils pouvant aider à améliorer le visuel.
Au delà du visuel “de base” il est prévu de faire des thèmes personnalisés pour que chacun aie le visuel qui lui correspond (fond sombre, contrastes différents, etc). Cependant c'est un chantier encore plus complexe, le but serait déjà d'avoir un thème général fonctionnel dans la majorité des cas, qu'on pourra ensuite décliner.
Éléments visuels communs
Police (font)
- font-family:“Verdana”,“Arial”,“Helvetica”,sans-serif;
- Dans nos documents, nous tentons d'utiliser la police Ubuntu. Nous avons fait le choix de ne pas l'appeler sur les sites web afin de ne pas pénaliser les petites connexion en ajoutant quelque chose à télécharger2).
- “URW Gothic” est une alternative sympa sur certaines impressions.
Enfin, les titres des bannières sont construits avec un alphabet en svg, disponible ici.
Si vous souhaitez compléter cet alphabet avec les accents et en faire une vraie police, votre travail sera énormément apprécié.
Hexagones et coins biseautés
La forme hexagonale peut être utilisée ici et là, sans excès ; elle est plus liée à Khanat mais donne aussi du style à la partie Khaganat.
Les coins biseautés pour certaines fenêtres (là aussi sans excès) contribuent à rappeler cette forme géométrique et donnent plus de cohérence et d'impact visuel à l'ensemble du site.
On retrouve ce biseau sur la barre générale pour encadrer le logo.
Logos
Tous les logos et titres sont disponibles sur notre git.
Khaganat
Palette de couleur
La palette de Khaganat a évolué dernièrement pour aller vers plus de sobriété.
En couleur web
- #8530bfff : couleur primaire, pour le logo, les liens, les titres et comme couleur de base (par exemple sur la barre générale)
- #9073ffff : couleur secondaire, boutons, survol
- #6639afff : couleur tertiaire, pour survol sur boutons, et quand il y a besoin d'une troisième couleur
- #ffffffff (Blanc) : fond des blocs de texte, couleur de police pour les textes sur fond coloré
- #2d1040ff : couleur police sur fond blanc, couleur des ombres
La palette qui a inspiré ces choix est ici https://khaganat.net/tools/palette_khaganat.html. Elle peut continuer à être utilisée pour des design plus complexes.
En résumé sur l'ancienne palette (piochez dedans uniquement si le reste ne va pas du tout) :
- Couleurs primaires : 9800FF 8530BF 6300A6 B240FF C673FF
- Couleurs secondaires : FF00A6 BF308D A6006C FF40BC FF73CE
- Couleurs secondaires B : 3600FF 4E30BF 2300A6 6840FF 9073FF
- Couleurs complémentaires (surlignez pour lire les codes) : FFFA00 BFBC30 A6A300 FFFB40 FFFC73
Image de fond - Background
L'image de fond originale est disponible ici : https://khaganat.net/img/bg_khaganat.jpg.
Elle va être remplacée, très probablement… pour le moment on est parti sur une texture sobre en fond du site web sous Django.
Khanat
Palette de couleur
La palette de Khanat a aussi évolué dernièrement pour aller vers plus de sobriété.
En couleur web
- #100873ff : couleur primaire, pour le logo, les liens, les titres et comme couleur de base (par exemple sur la barre générale)
- #6359dbff : couleur secondaire, boutons, survol
- #6639afff : couleur tertiaire, pour survol sur boutons, et quand il y a besoin d'une troisième couleur. Même couleur que pour Khaganat.
- #ffffffff (Blanc) : fond des blocs de texte, couleur de police pour les textes sur fond coloré. Même couleur que pour Khaganat.
- #2d1040ff : couleur police sur fond blanc, couleur des ombres. Même couleur que pour Khaganat.
La palette qui a inspiré ces choix est ici https://khaganat.net/tools/palette_khanat.html. Elle peut continuer à être utilisée pour des design plus complexes.
En résumé sur l'ancienne palette (piochez dedans uniquement si le reste ne va pas du tout) :
- Couleurs primaires : 0D58A6 26517D 04376C 4188D3 689CD3
- Couleurs secondaires : 2419B2 352F85 100873 574DD8 7972D8
- Couleurs secondaires B :FFC500 BF9E30 A68000 FFD340 FFDF73
- Couleurs complémentaires : FF9900 BF8630 A66300 FFB240 FFC773
FFFC73
Image de fond - Background
L'image de fond est disponible ici : https://khaganat.net/img/bg_khanat.jpg
