Différences

Ci-dessous, les différences entre deux révisions de la page.

--- fr:website_kh_charte_graphique [2018/02/25 12:43] – [Charte graphique du site Khaganat] zatalyz
+++ fr:website_kh_charte_graphique [2021/12/03 19:19] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 2: / Ligne 2: @@
 Pour l'organisation général du site, voir [[fr:website_khaganat]].
-Le site web est construit de bric et de broc, l'unifier graphiquement est important tout en étant assez complexe.
+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 jaunes, et la partie Khanat (premier univers), dans les tons bleus et jaunes. La charte graphique de Khanat devrait être reprise en jeu...
+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. On peut trouver son code [[https://git.khaganat.net/zatalyz/site_internet/tree/master/kha_nav|sur le gitlab]].
+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]].
-Les textes sont sur fond blanc ou blanc translucide afin d'avoir un bon contraste sans fatiguer les yeux.
+{{ :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%>
@@ Ligne 14: / Ligne 16: @@
 </WRAP>
-===== Khaganat =====
+<WRAP center round info 60%>
-==== Palette de couleur ====
+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.
-La palette de Khaganat est visible à cette adresse : [[https://khaganat.net/tools/palette_khaganat.html]]
+</WRAP>
-En gras, notre choix principal (entre autre pour le logo):
-  * 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 : FFFA00 BFBC30 A6A300 FFFB40 FFFC73
+===== É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 est disponible ici : [[https://khaganat.net/img/bg_khaganat.jpg]]
+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>
-==== Éléments divers ====
-Afin d'adoucir la mise en page, la plupart des cadres utilisent la propriété ''border-radius'' afin d'avoir des coins arrondis.
 ===== Khanat =====
 ==== Palette de couleur ====
-La palette de Khanat est visible à cette adresse : [[https://khaganat.net/tools/palette_khanat.html]]
-En gras, notre choix principal (entre autre pour le logo) :
+La palette de Khanat a aussi évolué dernièrement pour aller vers plus de sobriété.
-  * Couleurs primaires : 0D58A6 26517D 04376C 4188D3 689CD3
-  * Couleurs secondaires : 2419B2 352F85 **100873** 574DD8 7972D8
+En couleur web
-  * Couleurs secondaires B :FFC500 BF9E30 A68000 FFD340 FFDF73
+  * <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)
-  * Couleurs complémentaires : FF9900 BF8630 A66300 FFB240 FFC773
+  * <color #6359dbff>#6359dbff</color> : couleur secondaire, boutons, survol
-==== Police (font) ====
+  * <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]]
-==== Éléments divers ====
-{{tag>web serveur}}
+{{tag>web serveur graphisme}}