====== Charte graphique du site Khaganat ======
Pour l'organisation général du site, voir [[fr:website_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 commun((En théorie, parce qu'en pratique, c'est pas toujours évident de l'insérer)) : la barre de navigation générale. <del>On peut trouver son code [[https://git.khaganat.net/zatalyz/site_internet/tree/master/kha_nav|sur le gitlab]].</del> Cette dernière a été refaite sur [[fr:khaganat_web|Django]].

{{ :fr:barre_menu_django.png |Visuel de la nouvelle barre }}

Les textes sont de couleur sombre sur fond blanc ou blanc translucide afin d'avoir un bon contraste sans fatiguer les yeux. 

<WRAP center round tip 90%>
Voir aussi la page [[fr:website_css]] pour des outils pouvant aider à améliorer le visuel.
</WRAP>

<WRAP center round info 60%>
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. 
</WRAP>

===== Éléments visuels communs =====
==== Police (font) ====
  * font-family:"Verdana","Arial","Helvetica",sans-serif;
  * Dans nos documents, nous tentons d'utiliser la [[http://font.ubuntu.com/|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écharger((On pense à ceux qui ont une 3G pourrie sans forfait illimité.)).
  * "URW Gothic" est une alternative sympa sur certaines impressions. 

Enfin, les titres des bannières sont construits avec un alphabet en svg, [[https://git.khaganat.net/khaganat/logos-khaganat/-/blob/master/alphabet.svg|disponible ici]]. 

<WRAP center round tip 60%>
Si vous souhaitez compléter cet alphabet avec les accents et en faire une vraie police, votre travail sera énormément apprécié. 
</WRAP>


==== 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.

{{ :fr:site_biseau.png |Coin biseauté : ça ressemble à ça.}} 

On retrouve ce biseau sur la barre générale pour encadrer le logo.

==== Logos ====
Tous les logos et titres sont disponibles [[https://git.khaganat.net/khaganat/logos-khaganat|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
  * <color #8530bfff>#8530bfff</color> : couleur primaire, pour le logo, les liens, les titres et comme couleur de base (par exemple sur la barre générale)
  * <color #9073ffff>#9073ffff</color> : couleur secondaire, boutons, survol
  * <color #6639afff>#6639afff</color> : 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é
  * <color #2d1040ff>#2d1040ff</color> : 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 : <color #9800FF>9800FF</color> <color #8530BF>**8530BF**</color> <color #6300A6>6300A6</color> <color #B240FF>B240FF</color> <color #C673FF>C673FF</color>
  * Couleurs secondaires : <color #FF00A6>FF00A6</color> <color #BF308D>BF308D</color> <color #A6006C>A6006C</color> <color #FF40BC>FF40BC</color> <color #FF73CE>FF73CE</color>
  * Couleurs secondaires B : <color #3600FF>3600FF</color> <color #4E30BF>4E30BF</color> <color #2300A6>2300A6</color> <color #6840FF>6840FF</color> <color #9073FF>9073FF</color>
  * Couleurs complémentaires (surlignez pour lire les codes) : <color #FFFA00>FFFA00</color> <color #BFBC30>BFBC30</color> <color #A6A300>A6A300</color> <color #FFFB40>FFFB40</color> <color #FFFC73>FFFC73</color>


==== Image de fond - Background ====
L'image de fond originale est disponible ici : [[https://khaganat.net/img/bg_khaganat.jpg]].

<WRAP center round todo 60%>
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.
</WRAP>


===== Khanat =====
==== Palette de couleur ====

La palette de Khanat a aussi évolué dernièrement pour aller vers plus de sobriété. 

En couleur web
  * <color #100873ff>#100873ff</color> : couleur primaire, pour le logo, les liens, les titres et comme couleur de base (par exemple sur la barre générale)
  * <color #6359dbff>#6359dbff</color> : couleur secondaire, boutons, survol
  * <color #6639afff>#6639afff</color> : 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.
  * <color #2d1040ff>#2d1040ff</color> : 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 : <color #0D58A6>0D58A6</color> <color #26517D>26517D</color> <color #04376C>04376C</color> <color #4188D3>4188D3</color> <color #689CD3>689CD3</color> 
  * Couleurs secondaires : <color #2419B2>2419B2</color> <color #352F85>352F85</color> <color #100873>**100873**</color> <color #574DD8>574DD8</color> <color #7972D8>7972D8</color> 
  * Couleurs secondaires B :<color #FFC500>FFC500</color> <color #BF9E30>BF9E30</color> <color #A68000>A68000</color> <color #FFD340>FFD340</color> <color #FFDF73>FFDF73</color>
  * Couleurs complémentaires : <color #FF9900>FF9900</color> <color #BF8630>BF8630</color> <color #A66300>A66300</color> <color #FFB240>FFB240</color> <color #FFC773>FFC773</color> 

<color #>FFFC73</color>
==== Image de fond - Background ====
L'image de fond est disponible ici : [[https://khaganat.net/img/bg_khanat.jpg]]




{{tag>web serveur graphisme}}