Derniers messages

#21

Graphismes / Re : Design du site web

Dernier message par Zatalyz - 12 Janvier 2019 à 00:24:41

Cliquez pour afficher le message

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 Étendre

/* 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;
}


#22

Graphismes / Re : Design du site web

Dernier message par neodarz - 11 Janvier 2019 à 22:03:08

Cliquez pour afficher le message

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

#23

Graphismes / Re : Design du site web

Dernier message par Zatalyz - 09 Janvier 2019 à 12:56:10

Cliquez pour afficher le message

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 :

#24

Graphismes / Re : Design du site web

Dernier message par 0mbreVaporeuse - 07 Janvier 2019 à 22:12:38

Cliquez pour afficher le message

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

[Spoiler]

#25

Graphismes / Re : Design du site web

Dernier message par Zatalyz - 07 Janvier 2019 à 20:14:59

Cliquez pour afficher le message

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:

Zatalyz "Je regarde avec YannK aussi pour changer le fond du site. L'image qu'on a est soit trop lourde, soit pixellisée. L'idée serait de partir sur une texture, agrémentée peut-être d'une image (en css, on peut avoir plusieurs images de fond qui se comportent différement). La seconde image, c'est facultatif, et faut que ça reste léger... la vraie question est plus "quoi, comme type de texture""
alcyone "Mine de rien, c'est un vrai boulot qui prend pas 5min de designer un site (je parle pas de faire un single page à la mode avec 3 infos qui se battent en duel)"
Zatalyz "ouais, y'a pleins de trucs :s"
alcyone "Il y a pas moyen de partir sur une petite texture svg répétée en mosaïque ?"
Zatalyz "on va faire mieux que du svg, mais c'est l'idée"
alcyone "c'est juste un format vectoriel pour le coup"
Zatalyz "Personnellement j'aime bien la logique des étoiles, je trouve que ça invite au voyage, à l'idée qu'on va explorer d'autres mondes, et à un certain onirisme. Mais est-ce que cette symbolique parle à tout le monde ?"
Zatalyz "y'a-t-il d'autres motifs qui sembleraient plus pertinents ?"
Zatalyz "ça pourrait aussi bien être du sable, ou du parchemin "
Zatalyz "en gros, si on vous dit "khaganat" (et pas khanat, hein), quel motif vous vient à l'esprit ? qu'est-ce qui vous semblerais bien ?"
alcyone "Honnêtement, je pense que "parler à tout le monde", c'est foutu d'avance. Parler à ceux qui peuvent être potentiellement être intéressé par le lore existant, yep, si les étoiles collent au lore, alors ça colle"
Zatalyz "sachant aussi qu'il va falloir l'accorder à notre violet, ce qui ne va pas être une mince affaire "
Zatalyz "alcyone : la lore, c'est Khanat. Et Khanat n'est qu'un des univers possibles de Khaganat :-°"
alcyone "J'ai lu le dernier point après avoir posté O:)"
Zatalyz "je rapelle que la signification de Khaganat, c'est "rassemblement de Khanat", les khanat étant des royaumes (mais aussi des foyers, suivant l'utilisation)"
alcyone "mais jusque là j'ai toujours eu le sentiment que les deux était peu différenciés et assez confondus"
Zatalyz "si ça peut aider "
Zatalyz "bah développer un royaume c'est déjà du taf "
Zatalyz "mais on compte bien conquérir le multivers à terme "
alcyone "j'ai pas dit le contraire !"
alcyone "Mais jusque là, ne serait-ce qu'au niveau de la charte graphique existante, il n'y a quasi pas de différence entre les deux, sauf erreur de ma part ?"
alcyone "logo/site, etc..."
Zatalyz "si, elle est assez grande en fait, mais mal appliquée..."
Zatalyz "https://khaganat.net/wikhan/fr:website_kh_charte_graphique"
alcyone "Ah, autre problème du coup"
Zatalyz "et elle va être un peu revu dans l'affaire, justement"
alcyone "bleu/jaune -- violet/jaune"
alcyone "déjà je fais quasi aucune différence entre le bleu et le violet mon jugement est biaisé biologiquement"
Zatalyz "ça va passer à violet/blanc-gris, je pense"
alcyone "dac"
Zatalyz "haha ok, j'avais pas pensé à ce détail merci de me rapeller qu'on ne voit pas tous les couleurs de la même façon "
alcyone "Disons que je voyais le nuance sur le fait qu'un soit plus foncé que l'autre mais concrètement, je vois du bleu dans les deux cas"
alcyone "après, les dyschromatopsies sont tellement nombreuses que bon..."
alcyone "tant qu'il y a suffisamment de contraste dans la charte pour que ce soit lisible, c'est déjà beaucoup ^"
alcyone "la nuance*"
Zatalyz "attends, je vais te demander un test..."
alcyone "ok "
Zatalyz "https://movim.eu:5280/upload/2d40797f5ac67c5e60bf1c6cd7bd13715d591dab/cC4a5NyROh6VkCIJ2wPgV0YQsTNVuioup8REiXt2/g933.png"
Zatalyz "pour toi, est-ce que les deux carrés ont une couleur différenciable, ou c'est vraiment super proche ?"
Zatalyz "ou même, est-ce que tu vois deux carrés ? "
alcyone "Pour moi, je vois deux carrés, l'un plus clair que l'autre, cela dans le même ton "
Zatalyz "ok. Bon à savoir"
alcyone "En ce qui me concerne, j'ai tout de même peu de problème"
Zatalyz "ce sont les couleurs de base des deux logos, et donc effectivement, avec les dyschromatopsies comme toi, ils vont méchamment se ressembler "
Zatalyz "pour moi ils sont très différents ""
alcyone "il faudrait reproduire le test avec quelqu'un ayant une dyschromatopsie bien plus lourde"
Zatalyz "nan mais déjà, cela confirme un biais de base : ce n'est pas en variant les couleurs qu'on va différencier Khanat et Khaganat "
alcyone "Disons qu'en terme d'accessibilité il y a une règle : une info ne doit jamais être donnée principalement ou que par la couleur "
Zatalyz note ça soigneusement ""
Zatalyz "Bon, donc il faut vraiment que je bosse avec les contrastes. Je le faisais déjà un peu, mais là je vais plus y prêter attention"
alcyone "Concrètement, il faut aussi considérer les couleurs qui sont autours des couleurs choisies, je m'explique : 2 couleurs prise indépendamment peuvent être ok mais l'agencement de ces couleurs peut poser problème (rapport de constraste, etc."
Zatalyz "genre passer mes images en dégradé de gris... si ça passe, ça sera déjà relativement accessible"
alcyone "Typiquement, je bosse sur une appli qui pense à rendre dispo une impression en niveau de gris, ce qui comporte notamment des pastilles de couleurs apparessant en niveau de gris ainsi : blanc, gris clair, gris foncé, gris très foncé"
alcyone "pris individuellement ou entre eux, les contrastes sont ok entre chaque niveau"
alcyone "en revanche, ce système de pastille apparait dans un tableau, ayant une ligne sur deux légèrement grisée"
alcyone "et là est le hic"
Zatalyz "ha oui..."
alcyone "la pastille, bien qu'entourée d'un cercle noire, voit sa couleur très difficilement distinguable en blanc, gris clair sur une ligne non contrastée"
Zatalyz "le genre de truc qu'il faut voir Oo"
alcyone "ça parait bête mais aucun des 8 dev + chef de projet y a pensé"
alcyone "c'est pas si évident en fait ^"
alcyone ""
alcyone "Et la cerise sur le gâteau"
alcyone "c'est conforme WCAG"
Zatalyz "arf"
alcyone "car c'est un cas trop complexe à traiter et bien que le WCAG soit un pavé, il ne tient pas compte de ce cas"
Zatalyz "de toute façon, y'a un moment, il faut forcément des gens qui font remonter les infos... rien ne vaut le contrôle humain"
alcyone "Du coup, tout ça pour dire, te prend pas trop la tête non plus, fait au mieux dans la mesure du possible en sachant qu'il fadra peut-être un peu ajuster "
alcyone "Oui c'est exactement ça"
alcyone "faudra*"
Zatalyz "oui, il y a des choses, si on l'a en tête, c'est déjà mieux. Là typiquement, j'ai pris conscience d'un truc sur les couleurs. Le reste, ce sera les retours qui amélioreront"
alcyone ""
alcyone "Pour en revenir aux étoiles qu'ont évoquait plus haut"
alcyone "à l'heure actuelle on en a autant sur le site Khaganat que le site Khanat sauf erreur ?"
Zatalyz "oui, c'est le fond "khanat" qui est partout :-°"
alcyone "Si la différence vient de couleurs assez proche dans le spectre (bleu/violet), il y a effectivement pour moi, quasiment aucune différence"
alcyone "Ah dac x)"
Zatalyz "parce que je l'aime bien... m'enfin bon..."
Zatalyz "va falloir que j'évolue "
alcyone "Je l'aime beaucoup aussi tu sais :p"
alcyone "ça empêche pas"
alcyone "C'était juste un retour sur la volonté de distinguer de mon regard totalement subjectif"
Zatalyz ""
Zatalyz "Yannk avait fait cette texture : "
Zatalyz "https://movim.eu:5280/upload/2d40797f5ac67c5e60bf1c6cd7bd13715d591dab/lTHt5rU7wNhyqgWNuG5QUdR1qN5LajmmoxbCys96/starsky.png"
Zatalyz "avec plus ou moins foncé"
alcyone "Comme tu t'en doutes, avec ma petit souci, je m'intèresse juste à ce que le texte soit lisible pour moi et avec le fond du thème dokuwiki mis au texte, ça me va"
Zatalyz "Oui, c'est compliqué... D'un côté, un fond uni, c'est sobre, c'est simple pour tout le monde. De l'autre, il faut avoir des éléments visuels qui différencient notre "produit" du reste du monde. Et puis une couleur unie peut aussi être un peu fatiguante, suivant sa saturation, les contrastes, etc"
alcyone "Je suis d'accord "
Zatalyz "Huhu. Je suis en train de bidouiller la texture de base afin d'être dans les bonnes couleurs. Et ça fait un site très rose "
Zatalyz "je ne suis pas sûre qu'on vise le marché des petites filles, donc c'est probablement pas l'idée "
Zatalyz "J'ai un premier essai. Avant de vous le passer, quelques mises en garde..."
Zatalyz "ma texture s'ajuste mal, donc ça quadrille... ça disparaitra, ce qui compte c'est si le contraste est bon et que les couleurs sont acceptables"
Zatalyz "(la texture, je l'ai bidouillé cradement, en fait)"
Zatalyz "la police du texte va changer, ainsi que la couleur du corps de texte et celle du fond de l'élément du centre du menu"
Zatalyz "https://movim.eu:5280/upload/2d40797f5ac67c5e60bf1c6cd7bd13715d591dab/zkYxJCgZjsI6rTyJgXa53FisY7UKC7rd3QseLqPF/g1630.png"
Zatalyz "outch, j'aurais du réduire avant d'envoyer ""
Zatalyz "enfin bref, pour un premier essai, ça vous dit quoi, sur le choix des couleurs/possibilité de texture ?"
Zatalyz "houa, le coup de passer en niveau de gris, ça marche bien pour voir les bêtises..."
Zatalyz "je ne peux plus différencier mes liens visités du reste du texte "
gpsqueeek "Coi ro do !"
gpsqueeek "Et pamjai aux volontaires !"
gpsqueeek "Merci Zatalyz et alcyone pour cette discussion, c'est super intéressant"
gpsqueeek "Bon après sur le choix des couleurs j'ai pas vraiment d'avis tant qu'on évite rose bonbon et autres vert fluo qui font saigner les yeux"
gpsqueeek "(Ça se voit à mes choix de fringues des fois huhuhu)"
gpsqueeek "Plop !"
gpsqueeek "Ah ça y est mes messages sont passés"
gpsqueeek "Ça a pris du temps et un redémarrage de Conversations on durait :-/"
gpsqueeek "Dirait"
Zatalyz "https://framapic.org/O2jhPtJTLStZ/5w48Fxzq3rSR.png"
Zatalyz "nouvelle version, pour moi si on a ça en ligne, c'est déjà pas mal. Je doute un peu sur l'arrondi autour des textes, par contre... mais le biseau, à faire avec inkscape, je ne maitrise pas encore"
gpsqueeek fait un biseau à Zatalyz ""
gpsqueeek "(Sans inkscape)"
Tycho "PloP"
Tycho "Zatalyz: je suis partisant de garder un souligné pour les liens et une forme de bouton pour ces derniers"
Zatalyz "plop tycho"
Zatalyz "oui, le souligné pour les liens, c'est une assez bonne idée je crois..."
Tycho "c'est un standard de facto du web"
Zatalyz "Un fond dans ce style et ces couleurs, ça vous va ? Ou c'est trop cheezy ? Hésitez pas à me dire si c'est moche, hein. Je sais que mon sens esthétique est particulier."
gpsqueeek "Avis de Maëlle : la couleur du fond étoilé lui conviendrait peut-être mieux en plus pâle (en gardant les bandeaux un peu flashy comme ça, c'est bien), parce que là ça fait un peu trop "sucré" pour elle ;-)"
gpsqueeek "(Bonbonnesque plutôt que cheezy)"
Zatalyz "Ok "
gpsqueeek "Et j'ajouterais que pour ceux qui préfèrent un thème sombre, on peut au contraire le rendre plus foncé en gardant les barres flashy"
gpsqueeek "Le truc est d'avoir un truc un poil moins saturé sur le fond étoilé en fait, peut-être"
Zatalyz "je note. Et oui, j'aimerais bien proposer un thème sombre aussi... mais dans un second temps "
deed "pour différencier , khaganat de khanat serait d avoir un second projet aggloméré ..... si on avait le temps ...."
gpsqueeek "Avec des si, on couperait du bois pour la cheminée"
Zatalyz "On a déjà Alcyone et IsilinBN qui ont un projet dans un "autre Khanat" (à voir s'il s'agit d'un monde parallèle, d'un Khanat plus ancien/futur...) "
gpsqueeek "Et y'a tepsne aussi :-D"
Zatalyz "oui, c'est un monde parallèle "
Zatalyz "amélioration, avec les boutons, les liens soulignés, et la barre de menu dépliée"
Zatalyz "https://framapic.org/Eq33LiGOcsqj/DcSLqcP0l2o4.png"
Zatalyz "je ne suis pas satisfaite de mon idée de couleur de survol de lien (et ça va poser souci sur les boutons), mais c'est un truc difficile à tester en svg. je laisse de côté pour le moment... à part ça le code couleur est pas trop mal comme ça"
Zatalyz "(j'ai pas retouché le fond aussi, pour le moment)"
Zatalyz "C'est très violet :-° "
Zatalyz "peut-être que je devrais tenter d'ajouter le jaune de la palette d'origine..."
Zatalyz "Je vais m'arrêter là pour le moment, que ça mature un peu et que vous ayez le temps de me faire plus de critiques. Je reprendrais le sujet du forum ce soir, pour noter les choses utiles, mettre des liens vers les images et vers le svg"
gpsqueeek "\o/ merci pour ton travail Zatalyz :-)"
gpsqueeek "Ça me plait mieux avec les deux teintes de violet / mauve "
gpsqueeek "À voir si c'est assez différent pour celles qui voient moins de différences"
Zatalyz "en niveau de gris, les contrastes sont lisibles. Après, je crois qu'il y a des outils pour passer une dans les diverses transformations... on pourra voir "

Spoiler for Hiden:

Zatalyz "ce soir je bosse sur la page d'accueil ; j'ai, je crois, dégrossi suffisament la barre de menu et le pied de page"
Zatalyz "https://framapic.org/1ysYpxzIoHWi/Ho2QIXzyTI8m.jpg"
Zatalyz "c'est une possibilité pour la page d'accueil."
Zatalyz "vous en pensez quoi ?"
Zatalyz "enfin, pour celles qui ont le temps de regarder, c'est pas urgent, hein "
shepeng "khagant est le méta projet / khaganat est l'univers"
Zatalyz "tsss je vous aie pas mis du lorem ipsem, mais j'aurais du "
Lyne "Ouaip. T'aurais du. Là, ça perturbe ;-p"
shepeng "il faut pas tenir compte non plus des petits traits de jonction des textures ?"
Zatalyz "non plus "
Zatalyz "la texture est un peu foireuse parce que je maitrise pas inkscape, mais je ne vais pas perdre trop de temps sur ces aspects"
Lyne "Mmmmh... Je ne sais plus si on en avait discuté mais... Mettre Khaganat et Khanat sur le même plan sur la page d'accueil, est-ce une bonne idée ? (Je parle de contenu, là, pas de présentation)"
Lyne "Quand on aura plusieurs Khanats, on risque d'être vite saturés, non ?"
Lyne revient à la question du jour sur l'affichage ""
Zatalyz "On peut ne pas parler de Khanat, mais... vu que certaines personnes cherchent l'univers ou le jeu, ne pas les mettre sur la page d'accueil, est-ce que ce n'est pas un souci ?"
Lyne "Je ne sais pas. Je m'interroge"
Zatalyz "et ça va, c'est le genre de question qui a un bon impact sur la tête de la page d'accueil, donc... la question est au bon moment "
Lyne "Les mettre sur la même page, c'est risquer d'entretenir la confusion et ça va poser un souci quand il y aura plusieurs mondes. Mais aujourd'hui, Khanat est notre principale (pour ne pas dire) seule vitrine. Alors..."
Zatalyz "je dirais : pour le moment, on a surtout le Khanat à vendre. Et quand ça changera... on changera la page d'accueil ?"
Lyne "Par exemple"
Lyne "Mais là, par exemple, si on met le logo de Khaganat dans le biseau du haut, et l'univers de Khanat dans la colonne de droite... Ben..."
Lyne "J'aime bien le logo dans le biseau : on sait tout de suite (quand on connait les différences), où on est"
Lyne "Quand on aura plein de monde, indépendamment de la couleur, le biseau servira d'enseigne ou de marque-page : on saura tout de suite où on est"
Zatalyz "ouais. On peut mettre les deux sur la page d'accueil ? et le bleu de Khanat à droite. Je ne sais pas"
Zatalyz "le doute m'habite"
Lyne "On peut mettre un biseau Khanat dans les boites qui concernent le monde ? Ça ferait trop chargé ?"
Lyne "Au sens de : ce monde est un exemple, et voilà comment vous reconnaitrez les pages qui le concernent ?"
shepeng "Khanat est quand même un sous ensemble du projet global"
Lyne "Tout à fait"
Lyne "Sa mise en application. Ou son prétexte"
Zatalyz "un biseau, c'est un coin cassé... vous parlez du logo, là, hein ?"
Lyne "Pardon : je parle du trapèze au milieu de la barre du haut, avec le logo dedans"
Zatalyz "ha, le logo +trapèze ? Hum... à voir comment je peux intégrer ça. Mais il y a une idée, oui "
Lyne "Sinon, je trouve les caractères de la barre violette un peu trop épais. Mais c'est peut-être plus lisible comme ça"
Lyne "Comme je disais, j'aime vraiment beaucoup le trapèze, et en particulier le fait qu'il dépasse de la barre"
Zatalyz "Moui, tests avec la police "ubuntu". Elle est soit trop épaisse, soit pas assez"
Zatalyz "après, le fait qu'il dépasse... je le garantit pas"
Zatalyz "c'est facile avec une image, mais avec le css, c'est un chouïa plus technique"
shepeng "Oui c'est bien ça"
Lyne "Je ne sais pas si ça vaut le coup d'avoir Connexion et Inscription surlignés d'une autre couleur. Je ne suis pas ergonome. Pourquoi pas"
Lyne "Et j'ai vu que tu avais remis la langue. C'est bien, ça :-)"
Zatalyz "Tycho disais que les boutons, mis en avant comme ça, c'était mieux. "
Lyne "Mais du coup, une fois connecté , "Connexion" et "Inscription" disparaissent ? Et sont remplacés par le login ?"
Zatalyz "je ne suis pas convaincue sur l'aspect visuel, cependant"
Zatalyz "une fois connecté, c'est remplacé par "se déconnecter" et "profil" "
Lyne "Ok"
Lyne "Les biseaux en haut des boites, j'aime bien. Je ne sais pas si la boite du haut ne mériterait pas un titre, comme les autres"
Lyne "Les couleurs me plaisent bien, sauf celle du fond pour Connexion et inscription"
Lyne "Pour le reste, faudra voir à l'usage"
Zatalyz "tu as d'autres couleurs pour le fond sur le message du forum, si jamais..."
Zatalyz "https://khaganat.net/forum/index.php/topic,634.msg2199.html#msg2199"
Lyne "Je trouve que le bleu et le violet ne vont pas ensemble :s"
Zatalyz "le bleu ?"
Zatalyz "lequel ?"
Lyne "Euh... Dans ta grande version, le bleu du fond étoilé avec le violet de la barre"
Zatalyz "ok "
Zatalyz "pour moi ça reste violet "
Zatalyz "d'où l'importance des retours "
Lyne "Bon ben... Les 2 violets ne vont pas ensemble ;-p"
Tycho "Zatalyz: plutôt qu'une couleur rvaiment différente, peut-être que rendre le violet plus pâle serait plus joli"
shepeng "moi je trouve que ça va si on cache le fond des boutons"
Lyne "Comment ça ?"
Lyne "Faire juste un liseré bleu et avoir le fond de la même couleur que la barre ?"
shepeng "tu mets la main devant par exemple"
Zatalyz "voilà un autre test, avec pleins de petits détails"
Zatalyz "https://framapic.org/io3R3FwiU8YL/D7zr09Lmwat3.png"
Lyne "Ouh.... J'ai un souci avec les trapèzes vers le haut"
shepeng "tu peux essayer de reprendre la couleur du fond étoilé pour  le fond des boutons ?"
Lyne "Je pense que c'est dû au fait qu'ils sont assymétriques : ils intègrent le biseau et partent donc de plus bas sur le côté extérieur"
Lyne "Par contre, le fait d'avoir des couleurs de titre différentes aide à distinguer (enfin... pour celles qui voient la différence de couleur)"
Zatalyz "ouais, je tentais d'intégrer tout ce que vous aviez dit "
Lyne "Tu as réduit l'épaisseur de la police dans la barre ? J'ai l'impression qu'elle fait moins "pâté""
Zatalyz "Si tu passe en dégradé de gris, la différence entre le bleu et le violet est mineure"
Zatalyz "j'ai rien changé à la police, tu t'habitue "
Zatalyz "c'est pas compressé pareil; aussi"
Zatalyz "je vais te faire un autre screen sans le double biseau, dès qu'Inkscape aura fini de planter"
Lyne "Mouais... Autant j'aime bien le trapèze de la barre (y compris avec 2 logos), autant ceux qui dépassent des boites me laissent perplexes"
Zatalyz "‎[22:33:58] ‎Lyne‎: On peut mettre un biseau Khanat dans les boites qui concernent le monde ? Ça ferait trop chargé ?"
Zatalyz "j'ai tenté d'interpréter ça "
Lyne "Oui. Je pensais à les mettre "à l'intérieur" de la boite, du bord extérieur vers l'intérieur. Comme celui qui est "à l'intérieur" de la barre de titre"
Lyne "Mais je pense que ça va rendre le titre de la boite illisible"
Lyne "Ou imposer une barre intérieure dans les boites"
Zatalyz "va me falloir un dessin, là, je n'ai pas compris Oo"
Zatalyz "ha si"
Zatalyz "quelque chose comme ça ? https://framapic.org/QGmaFneBl3AX/W0yvrW1iYqGj.png"
Zatalyz "j'ai des artefacts, mais c'est pour l'idée"
Lyne "Oui, par exemple :-)"
Zatalyz "ça va être la misère en css, ce genre de blague "
Lyne "Moi, je Rêve ;-p"
Lyne "Cela dit, je ne sais pas comment ça rendrait sur une page complète"
Lyne "Et ça risque d'imposer des titres TRÈS courts"
Zatalyz "Y'a aussi une option de ce type : https://framapic.org/kVCMk5HIMp25/oQ97LPu7K75J.png"
Zatalyz "avec un titre centré, si je fais ça comme ça..."
Zatalyz "(tu profite aussi de ton event, là ? )"
Lyne "(Il est fini)"
Zatalyz "ouf"
Lyne "C'est pas mal aussi... Faut voir sur une page complète"
Zatalyz "hum. Je te fais une page complète avec l'un puis l'autre, ou si je te fais une colonne de chaque, ça suffit ?"
Lyne "Si j'ai le choix, je préfère une page complète :-°"
Zatalyz "ok, me faut juste un peu plus de temps"
Zatalyz "https://framapic.org/wZENPUn1KPap/50FEl5pDBfhM.jpg"
Zatalyz "https://framapic.org/yiuHA4YPz6U6/TwBZKjJtmpMD.jpg"
Zatalyz "fais pas gaffe en bas, j'ai un peu dépassé "
Zatalyz "arf j'ai oublié d'aligner le premier ><"
Lyne "Je préfère le deuxième, du coup. Avec les trapèzes qui dépassent vers l'extérieur"
Lyne "Sauf peut-être en enlevant le fond violet ? Mais du coup, on ne verrait plus le trapèze. Seulement le logo "
Zatalyz "d'autres avis ? avant qu'on embête les devs avec ? "
Lyne réfléchit ""
Zatalyz "oui, je ne sais pas quelle couleur mettre"
Lyne "Si on met la couleur du fond étoilé, on aura l'impression qu'il y a un trou dans la boite"
Lyne "Genre compostage des billets de métro"
Zatalyz "autre image pour comparer : https://framapic.org/yksvUGikh9ae/D5crhMLPflNN.png"
Zatalyz "je peux tenter le compostage, mais j'ai un doute"
Lyne "Moi aussi"
Lyne "Sinon, il faudrait mettre les titres en blanc sur fond soutenu, comme la barre en haut. Et le trapèze en blanc"
Lyne "Mais est-ce que ça ne va pas alourdir ?"
Zatalyz "https://framapic.org/D9MMMniEduw9/Jk6MKjPKk0RI.jpg"
YannK "‎[23:24:11] ‎Lyne‎: Je préfère le deuxième, du coup. Avec les trapèzes qui dépassent vers l'extérieur +1 "
Lyne "Bon ben, je confirme : j'aime pas le compostage "
YannK "J'ajouterai juste un peu d'espace au-dessus du texte de titre, en haut des boites "
Zatalyz "bon, si le trapèze va à deux personnes... va pour le trapèze ! en plus, techniquement, il est assez facile à faire, lui"
Zatalyz "oui, là les espaces sont un peu serrés, mais ça, c'est plus simple à ajuster avec le css. "
Zatalyz "il y a pleins de petits détails qui seront plus propres en css "
Zatalyz "et sinon, les fond des boutons comme le fond étoilé : https://framapic.org/YVCp1VLl0w1J/ZZ4LBjrrpEZM.png"
Zatalyz "mais gpsqueeek me disait que la couleur de ce fond était encore trop foncée... je ne l'ai pas fait évoluer"
Lyne "Oui mais non..."
Zatalyz ""
YannK reste sur son avis du trapèze ""
Lyne "La couleur du fond ne me choque pas"
Lyne imagine les Maj faire du trapèze volant... ""
Zatalyz "je viens aussi de tenter en violet plus pâle... bon, j'ai pas du choisir le bon pâle, mais je trouve que ça retourne en mode bonbonnière"
Lyne "Guimauve, par exemple ? :-°"
Zatalyz "https://framapic.org/F32EirDvK9PN/5I7vlTPkbPab.png"
Zatalyz "ça expliquerait des choses"
Lyne "Mouais... Pas plus convaincue que ça"
Lyne "(Pour la proposition de couleur)"
Zatalyz "idem"
Zatalyz "en fait j'aime vraiment mieux sans "bouton" :s"
Zatalyz "Ou alors, remplacer ces deux boutons par un menu (appelé je ne sais comment), et mettre dedans les deux items quand on est déco. Et quand on est co, tout plein de bazar, parce qu'une fois co, je me dis qu'il va vite y avoir pleins de liens utiles à ajouter"
Lyne "Le chat IG, divers outils, les liens vers les manuels usuels de la Mediateki..."
Lyne "Oui, pourquoi pas"
Lyne "Sachant, en plus, que l'inscription ne sert pas très souvent"
Lyne "Connexion uniquement, et l'inscription est proposée sur la page de connexion pour celles qui ne sont pas encore inscrites ?"
Zatalyz "et à un moment, il faudra ajouter la possibilité de choisir son thème, qui irait bien dans ce menu"
Lyne "Toutes les préférences utilisateur, d'une manière générale"
Zatalyz "oui, ça, ça me parait logique, mais j'ai un vague souvenir comme quoi "il faut pas" (pour le fait de lier connexion/inscription)"
Lyne "La gestion des persos, ceux qu'on peut partager ou pas, etc, ça se fera forcément IG ?"
Zatalyz "non, ce sera via l'interface web"
Lyne "Ah ? Bon, peut-être que Tycho pourra nous aider, alors. Surtout si c'est lui qui avait conseillé de mettre des boutons"
Zatalyz "enfin, on pourra gérer ses persos aussi via le client, j'imagine, mais c'est typiquement un truc pratique à pouvoir faire depuis le web"
Lyne "Ouais. Donc un bouton pour tout le bazar une fois connecté, ça me paraît bien ;-)"
Lyne "Parce que ça n'a pas vraiment de lien avec le site lui-même"
Zatalyz "oui"
Zatalyz "mais, pour le moment... dodo "
Zatalyz "j'ai bien bossé "
Lyne "Beaux rêves Zat :-)"
Lyne "Ouais !!!!!"
Zatalyz "bonne nuit, rêvez bien"
Lyne "Pamjai et Guimauves pour Zat !"
Zatalyz "si vous avez d'autres remarques, ou si j'ai oublié de prendre des trucs en compte, mettez moi ça sur le forum"
Zatalyz "ce sera plus pratique à relire"

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

#26

Graphismes / Re : Design du site web

Dernier message par neodarz - 07 Janvier 2019 à 11:25:21

Cliquez pour afficher le message

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 !

#27

Graphismes / Design du site web

Dernier message par Zatalyz - 06 Janvier 2019 à 18:38:41

Cliquez pour afficher le message

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.

#28

Graphismes / Re : De la pub sur le Khanat

Dernier message par Lyne - 02 Septembre 2018 à 21:26:59

Cliquez pour afficher le message

Puisqu'on parle de pub, j'en fais un peu pour moi... 
Le lien vers le texte dont parle Papy Squeeek : Les goûts du Khanat

#29

Graphismes / Re : De la pub sur le Khanat

Dernier message par gpsqueeek - 02 Septembre 2018 à 15:46:11

Cliquez pour afficher le message

Allez un petit déterrage... J'ai clairement souvenir d'avoir entendu des pubs pour des petites boites à la radio lors dune émission culinaire quelque part sur la mediateki. Genre un truc qui vendait des automates tombés de la charette du branaz...

[Spoiler]

#30

Graphismes / De la pub sur le Khanat

Dernier message par Zatalyz - 05 Avril 2017 à 23:40:12

Cliquez pour afficher le message

YannK a modélisé un truc qui me donne une envie folle de coller une affiche publicitaire idiote dessus :



Je voyais bien quelque chose comme "RevInc, pourvoyeur de vie", avec une image de ra en train de se dorer la pilule sur le bord de mer ou de jouer à la mandoline. Ou "Un revif rassurant ? RevInc, assurément !"

Je peux trouver d'autres slogans idiots au besoin.

Mais cela pose une question importante : quelle est la place de l'affichage publicitaire dans le Khanat ? Je rappelle que l'influence des marchands est strictement surveillée et encadrée dans le Khanat, avec parfois des contraintes fortes (comme l'interdiction de faire transiter les marchandises par Véloce).  RevInc est semi-gouvernemental, leur service est utile aux ra mais ils se font des sous avec : c'est une entreprise, même si ses activités sont encadrées de près par le gouvernement (ça évite que RevInc aille trucider les gens pour avoir plus de clients). Là, pour commencer, ça m'amuserait de faire un visuel avec eux, mais ensuite ? Le marchand de légume ? Le bar bizarre qui propose des services sur mesure ?

Au delà de l'aspect Khanat, qu'est-ce que nous souhaitons, nous ? On peut rigoler avec des pubs idiotes, mais ça reste des pubs, donc la promotion d'un certain type de visuel dans le paysage. Cela fait partie de nos références culturelles (oui, même moi, j'envisage bien des espaces avec de la pub...) mais est-ce qu'on souhaite normaliser ce genre de réalité ?

Je copie un premier échange IRC sur la question.

Spoiler for Hiden:

<Zatalyz> colle au moins une pub revinc sur ce tas de rouille
<YannK> J'en connais qui vont finir avec des blouses à fleur comme tenue et des plumeaux comme armes s'ils continuent :p
<osquallo> "les scouis c'est la vie aps els embeter c'est aps avoir besoin de revinc"
<YannK> fais la pub et j'en ferai une texture :p
<osquallo> tu essai de nous faire envie c'est ça?
<Zatalyz> huuuuum tu es sûr que je m'occupe de la partie pub ? *_*
<osquallo> ca vaut mieux que moi
<Zatalyz> c'est tentant mais il faut d'abord résoudre un problème éthique...
<YannK> Sur ce, je vous laisse, beaux rêves à toutes, bises
<osquallo> bonen nuit
<Zatalyz> on sait que le Khan n'est pas très tendre avec les marchands. Dans ce cas, l'affichage publicitaire est-il autorisé ?
<Zatalyz> ah tu file quand les questions arrivent.... pffff
<Zatalyz> dors bien
<osquallo> c'est de l'information a but non lucratif
<Zatalyz> revinc est lucratif...
<Zatalyz> ils font payer le fait de revenir en sécurité
<osquallo> tant qu'il n'y a aps de prix sur l'affiche
<Zatalyz> rofl
<osquallo> jer parle de l'affichage hein
<osquallo> c'est aps de la pub c'est  pour informer de l'existence du service *sifflote*
<Zatalyz> moui...
<osquallo> de toute façon je hais la pub :p
<Zatalyz> oui et justement
<osquallo> https://www.youtube.com/watch?v=LE0aehh52xU
<Zatalyz> même si on peut faire des pubs qui se moquent de la pub... ben ça reste une pub quand même
<Zatalyz> donc, on en veut dans le khanat ou pas ?
<osquallo> ben le site est plein de pub alros
<Zatalyz> le site ? Oo
<osquallo> ben c'est une ub pourlui meme
<osquallo> pub*
<Zatalyz> =_=
<osquallo> :p
<osquallo> ha ben si on raisonne apr la faut aller jusu'au bout
<osquallo> faut voir apres est ce qu'on peux l'empecher?
<Zatalyz> si tu part dans ce genre de raisonnement de sophiste, je vais aller dormir :p
<osquallo> u simple panneau devant une echope c'est d la pub
<Zatalyz> et oui, on peut l'empêcher, si on le souhaite
<Zatalyz> en tout cas on peut encadrer ce qui est faisable ou non
<osquallo> on peux n'authroiser la pub que pour els service publique sinon
<osquallo> n'authoriser*
<Zatalyz> par exemple
<osquallo> ou forcer l'abrobation apr le khan ou autre officiel
<Zatalyz> j'ai un mal fou à imaginer les joueurs s'amuser tellement à faire de la pub que ça devienne une vraie pollution, ceci dit
<osquallo> il pourron aps afficher de truc sans qu'on le permette
<osquallo> et coller des affiche aprtotu ca sera aps trop fesable
<Zatalyz> mais il reste la pub PNJ, c'est intéressant de voir à quel point on la laisse se mettre dans le paysage
<osquallo> et si on authorise els panneau perso il y aura abus c'est sur a 100ù
<osquallo> tu aura surtout de la pub pour guilde et autre
<osquallo> mais ej croyait qu'on aprlai du point de vue "lore" perso
<Zatalyz> je réfléchit sur les 2 niveaux
<osquallo> la pub fait apr des joueurs faut encadrer tu a aps le choix
<osquallo> y a moyen de faire des truc
<osquallo> mais aps  libre d'en psoer partout
<osquallo> genre au pire sur les mur de ta maison
<osquallo> ou dans des apnneaux d'afficvhage officiel (et tdonc taxé :p)
<osquallo> sinon tu aura des "la guilde des lapin cretin recrutent" au milieu des couloir avec beaucoup de passage
<Zatalyz> ça, y'aura, quoi qu'on fasse... faut faire confiance aux gens pour ce genre de bêtises
<osquallo> mais un panneau d'affichage avec lien vers une app de "pub" ca le fait plus
<Zatalyz> oui, ça c'est facile et moins aggressif
<osquallo> et les panneau serotn la ou on les mettra docn aps n'importe ou
<osquallo> et sinon si on ait du housing ben il le ferotn chez eux
<osquallo> fait*
<osquallo> tant que le conseil municipale interdit pas les panneau plublicitaire chez des aprticulier:p
<osquallo> et la ils pourront elire un maire qui decidera l'un ou l'autre *sifflote*
<Zatalyz>

À noter que la "pub" est dans l'histoire de Khaganat. Souvenir, souvenir...