Design du site web

(06 Janvier 2019 à 18:38:41)

Les choses avancent peu à peu sur le sujet. Des aspects informatiques ont été abordé sur le sujet Dokuwiki, quelques détails et des propositions faites sur Proposition de thème pour le wiki khaganat, en se concentrant sur les wikis, donc. Pingouincodeur (PC sur XMPP) nous a fait des propositions graphiques intéressantes, et je suis partie de ça pour proposer quelque chose pour le reste du site. La partie Django est techniquement fonctionnelle et manque surtout de personnalisation pour s'intégrer, et c'est sur ce que Django fournit que je me concentre dans un premier temps. J'en profite pour remettre à plat la charte graphique. Dans les faits, on utilise surtout le "violet Khaganat" (8530BF en couleur html) et le blanc (fond du logo, thèmes assez clairs) ; le bleu et jaunes de Khanat viennent un peu n'importe où...

L'un des point délicat, c'est le fond à utiliser, qui a un impact sur les autres éléments pour les couleurs. Nos fonds actuels (ancien "Khanat" sur le forum, nouveau "Khanat" sur les wiki ; le violet de Khaganat a été oublié...), je les aime bien, mais soit ils pixellisent, soient ils sont trop gros. Il faudrait proposer la version haute def en fond d'écran pour les goodies... et c'est tout. L'idée est de revenir à quelque chose de simple, c'est à dire une texture, avec potentiellement un élément un peu plus travaillé (genre un pendo en gif qui coure sur le fond). L'élément en plus, je le laisse de côté pour le moment

J'ai repris le dernier travail de YannK, c'est à dire une texture de fond étoilé, très sobre, que j'ai fait glisser vers du violet. Vous pouvez en voir deux versions, en plus clair sur la capture pour les écrans classiques (en moyenne 1024px de large), et plus foncé sur les captures des mobiles (en dessous de 600px) et très grands écrans (plus de 1600px de large). J'ai un peu foiré ma texture sous inkscape et il y a donc un quadrillage... ignorez-le, on l'aura pas sur le site web, c'est pas volontaire

Côté sémantique et accessibilité, je découpe le travail en trois formats : petit, moyen et grand. "Petit" entraine une modification de la feuille de style de base (@media only screen and (max-width: 600px) ), idem pour "grand" (@media only screen and (min-width: 1600px) ).

Côté code couleur, jusque là j'en utilise 5 (avec leur utilisation de base):
Couleur 1 = 8530BF (éléments en couleur de base, couleur du logo)
couleur 2 = 9073ffff (éléments de couleur secondaire)
couleur 3 = c673ffff (éléments au survol) => trop "rose", il faut que je trouve mieux. J'utilise la couleur 2, en fait, quand elle n'est pas déjà utilisée sur l'élément.
couleur 4 = ffffffff (fond de textes)
couleur 5 = 2d1040ff (police de base)

La couleur des textes varie suivant les éléments :
- contraste sur fond coloré, comme dans le menu : couleur 4 (blanc)
- Corps de texte = couleur 5 (un violet presque noir)
- Titres = couleur 1 (la couleur du logo)
- Les liens sont soulignés pour favoriser l'accessibilité, attribut "dotted" (moins lourd visuellement que la ligne pleine). S'ils ne sont pas visités : couleur 1. Une fois visités : couleur 2. Au survol : couleur 3.

Côté police... j'ai mis l'ubuntu en gras dans les titres, mais honnêtement, je ne suis pas sûre que c'est un élément de différenciation important...

À ce stade, je précise aussi que je me suis focalisée sur ces éléments :
- Trouver les couleurs de base
- Mettre en place les formes et organisation pour la barre de menu et le pied de page, et comment ça fonctionne avec les 3 formats d'écran.
- Tester le fond potentiel.

C'est donc là-dessus que je veux votre avis. La "page" elle-même ne correspond à rien : les wikis ont une autre tête, et nos pages statiques... aussi

Place aux images (et à leurs commentaires inclus dedans). Vous trouverez tout ça sur le Kloud, dans le dossier Khaganat/Temporaire/graphisme/siteweb. Il y a aussi le svg de mon travail à cet endroit. Et sinon, galerie Framapic, dispo pour 180 jours !

La version "moyenne" (la plupart des ordis)

La "grande" version (celles qui ont un super grand écran)

La petite, sur mobile, avec deux trucs : menu fermé ou ouvert.

#1 (07 Janvier 2019 à 11:25:21)

Super tout ça!

Pour commencer je reposte l'image que j'ai vue sur XMPP à propos du design de la page d'accueil. (j'ai lu de travers donc s'il fallait pas le reposter merci de me taper :p)

Pour le coup je préfère l'image de gauche à celle de droite, je sais pas pourquoi le fait d'avoir le logo de la thématique qui ressort des blocs de textes je trouve que ça rend bordélique....

Ah sinon à propos des coins arrondis des bords des blocs des articles (sur les images de Zat juste au dessous), en plus du fait que je préfère les formes brutes aux formes arrondis, je trouve que ça colle pas trop avec le reste du thème... Alors que pour les boutons et le menu, bizarrement, ça passe mieux. (Je parle du thème de la page d'accueil, pour ce qui est du wiki, j'ai pu voir le travail de Stan mais pas celui de pingouincodeur car ont n'a plus accès aux images, je trouve ça cohérent finalement)...

Mis à part ça, super travail !

#2 (07 Janvier 2019 à 20:14:59)

Merci du repost, c'est effectivement une bonne idée. Je copie aussi les logs (un peu nettoyé) histoire de garder trace des idées et de vous éviter de vous répéter

Spoiler for Hiden:

Dans les trucs à voir :
- Faire un fond un peu plus clair ? Le refaire proprement surtout, parce que là, j'ai fait ça de façon crade et donc le tour des étoiles" est très rose.
- Modifier le menu de connexion (ça, c'est aussi de la bidouille par rapport au menu lui-même), et donc réfléchir à son nom, comment il se présente, etc.
- Finaliser (ou trouver une meilleure idée) pour différencier Khanat de Khaganat en accueil / ce qui veut dire un 2e lot de couleurs sur Khanat

#3 (07 Janvier 2019 à 22:12:38)

Il faudrait penser a tester les couleurs une fois en place avec lighthouse (addon chromium) pour voir si niveau accessibilité c'est tout Ok

#4 (09 Janvier 2019 à 12:56:10)

Deux propositions de variantes sur l'habillage de ces vignettes. Si l'une vous semble avoir du potentiel, je peux faire une page avec.

Edit : j'aime bien la dernière proposition, j'ai donc fait une page avec :

#5 (11 Janvier 2019 à 22:03:08)

Pour répondre au commentaire juste au-dessus, comme dit sur XMPP, je trouve que tous les côtés coupés ça fait trop. Un seul angle coupé je trouve ça pas trop chargé (cf mon commentaire précédent).

Je fais au passage une proposition des boutons pour le menu du haut qui est, à mon gout, plus proche de ma vision du thème... Ok après discussion rapide avec Zatalyz ce menu n'a plus lieu d'être, mais je laisse ça là comme source d'inspiration

#6 (12 Janvier 2019 à 00:24:41)

Le Kloud est mis à jour avec la dernière palette. Il y a une proposition pour la barre de menu et le pied de page, ainsi que pour la page d'accueil, le tout décliné en trois format d'écran. Les images appelées sont dans le dossier, si jamais mes svg sont foireux. Ça semblait plaire à tout le monde ce soir sur XMPP, donc on part là dessus, et on affinera au fur et à mesure.

Si vous vous demandez comment faire des coins en biseau, je vous partage ce que j'ai fini par trouver. Ici, je l'avais appliqué à un pied de page ; il suffit d'y retourner pour le logo de la barre, et de décliner suivant ce qu'on veut obtenir. Il faut éviter d'avoir des éléments translucides, par contre, car on a des superpositions facilement et ça se voit. Je sais, c'est du code, mais ça me semble utile d'archiver ça publiquement pour les éons à venir. Ça utilise des propriétés CSS assez anciennes donc en principe bien supportées partout.

Code Sélectionner

/* Footer */
.footer {
	padding:0;
	display:flex;
	background-color: #918bdf;
	width:50%;
	margin: 0 auto;

}
.footer:before {
	content:" ";
	border-left: 2.5em solid transparent;
	border-bottom: 2.5em solid #918bdf;
	width:20%;
	margin-left: -10%;


}
.footer:after {
	content:" ";
	border-right: 2.5em solid transparent;
	border-bottom: 2.5em solid #918bdf;
	width:20%;
	margin-right: -10%;

}
.footer ul {
	display: flex;
	height:100%;
}
.footer ul li {
   height:100%;
   text-align: center;
   flex-grow: 1;
}
.footer ul li a {
	display: block;
	padding:0.4em 0.5em;
	color:white;
}

#7 (19 Janvier 2019 à 11:47:09)

Attention a l'accessibilité avec les couleurs.
Faire un coup de lighthouse (module chromium) pour checker ça.
Il était question de l'ordre d'item dans le menu. Je pense que l'utilisation des grids doivent faire le taf.
Pensez a l'utilisation des variables css ça facilite le travail.

Les images de la dernière version sont sur http://kloud.khaganat.net/index.php/s/aWdDmCkE7a3Ab5D (vous avez aussi les images sources et les svg).

Edit : le lien avait cassé.

Edit bis, la mise à jour de la palette, comme indiquée dans le svg "barre.svg" (où vous avez, en bonus, les couleurs) :

Code couleur Khaganat
Couleur 1 = 8530bfff
couleur 2 = 9073ffff
couleur 3 = 6639afff
couleur 4 = ffffffff
Couleur 5 = 2d1040ff

Code couleur Khanat
Couleur 6 = 100873ff
couleur 7 = 6359dbff
couleur 3 = 6639afff
couleur 4 = ffffffff
Couleur 5 = 2d1040ff

Et pour moi ces couleurs semblent passer en accessibilité, à condition de ne pas les utiliser n'importe comment (contraste suffisant).

Design du site web

Zatalyz

neodarz

Zatalyz

0mbreVaporeuse

Zatalyz

neodarz

Zatalyz

0mbreVaporeuse

Zatalyz