Xhoromag 4 - Premières images

[Shadow]

Question habillage du site, je pense que le mieux serait de rester sur des couleurs assez simples :
on pourrait partir sur un dégradé de gris + 1 couleur plus vive pour les liens et les titres du site

zone de texte : texte en noir ou gris foncé sur fond blanc (c'est ce qu'il y a de plus lisible)
encadrés avec texte : zone gris très clair, bordure fine de 1px en gris foncé
lien : la couleur bleue des liens fait fort classique, il faudrait peut-être utiliser une couleur plus chaleureuse ? : vert ou orange, assez foncé pour que ce soit lisible, et non flashy pour ne pas piquer les yeux.

Pour les 3 zones des aventures : 'dernière aventure parue', 'aventure primée' et 'une aventure au hasard' :
j'imagine un slider jQuery qui switche au bout de 5 secondes sur la partie suivante.
Un peu dans ce style là : http://jqueryfordesigners.com/coda-slider-effect/ ou http://css-tricks.com/examples/AnythingSlider/ (après, il y a sûrement plus joli à trouver),
et où nos trois onglets seraient nos trois types d'aventure.
Le slider serait de taille fixe, chaque zone contiendrait l'image de la couverture + titre + auteur + chapô de l'aventure + lien pour lire la suite + lien pour accéder aux aventures du même type.

Pour la lisibilité, il faudra bien utiliser les propriétés css letter-spacing, word-spacing et line-height pour aérer le texte.
Pour les colonnes, il ne faut pas excéder 15 mots par ligne pour que ce soit plus aéré.
Pour la police, il faudra choisir entre une police avec ou sans serif (une police avec serif a des empattements au bout de ses caractères). Il semblerait que les polices sans serif soient plus adaptées à la lecture sur écran.
Une page qui donne des conseils sur la lisibilité : http://www.ergologique.com/conseils/conseils.php?id_tip=739

Par contre, il y a encore deux questions que je me pose :
- taille du site : doit-on utiliser toute la place dispo sur l'écran ? ou limite t-on le width de la zone de contenu à 800px ?
- le menu : il y a des sous-parties dans le menu de navigation.
Comment doit-on les représenter ?
Est-ce que l'on affiche un div au passage de la souris sur le bouton du menu, et ainsi, on affiche les sections et sous-sections ? J'ai une vision en tête, mais difficile de la retrouver sur des sites :-/
Ca pourrait ressembler au menu du site CDiscount Pro : http://www.cdiscountpro.com/, avec en plus un surlignage du lien au passage de la souris.

Si le contenu de la page d'accueil est quasiment validé, je peux proposer de faire une première maquette pour le site, voire même coder une page en html pour donner un premier aperçu de la page d'accueil.

Qu'en pensez-vous ? Est-ce que je me lance là-dessus ?

[Skarn]

Aucun problème pour moi à ce que tu fasses un essai de design, au contraire. Ce n'est clairement pas ma spécialité, et je tape déjà dans mes limites.

Par contre, il y a encore deux questions que je me pose :
- taille du site : doit-on utiliser toute la place dispo sur l'écran ? ou limite t-on le width de la zone de contenu à 800px ?

J'étais parti sur une largeur fixe, le fluide étant assez casse-cou, entre 960 et 990px, la largeur habituelle pour un bon affichage sur un écran de 1024. Le 800 est en effet devenu rarissime (source).

- le menu : il y a des sous-parties dans le menu de navigation.
Comment doit-on les représenter ?
Est-ce que l'on affiche un div au passage de la souris sur le bouton du menu, et ainsi, on affiche les sections et sous-sections ? J'ai une vision en tête, mais difficile de la retrouver sur des sites :-/

Un menu classique à base de listes imbriquées, dont le deuxième niveau (un ul et pas un div) s'affiche au survol.

Sinon, je ne suis pas forcèment fan des sliders, mais je peux changer d'avis, et c'est peut-être bien adapté à ce modèle justement.

Je continue aussi à m'interroger sur la nécessité ou non de mettre une courte présentation sur la page d'accueil, et si oui, sous quelle forme.

[Shadow]

Je vais coder la page d'accueil en html avec du design. Je commence ce soir et j'espère finir ce week-end (désolée, je fais des grosses journées aux boulot, je n'ai pas beaucoup de temps le soir).
Je vais faire la page sans slider, en me rapprochant de la dernière version de la maquette.
Je pourrais toujours proposer une version avec slider plus tard.

Pour la présentation, je suis 'pour', déjà, elle aidera à présenter le site aux nouveaux visiteurs. Ensuite, elle servira aussi pour Google pour le référencement.
On peut imaginer la mettre dans un encart. Je vais essayer de la placer sur la page en html.

[Skarn]

Évidemment, en vieux relou, je commençais à voir les avantages d'un slider bien fait...

Une partie de moi a envie de dire "te bile pas, on a tous un temps libre limité par jour, moi le premier". Une autre partie se rappelle qu'elle est censée maintenir une certaine pression pour éviter que les gens se relâchent, que le rythme de production diminue, ..., (ici, je saute quelques centaines d'étapes intermédiaires), ..., anarchie, chaos, fin du monde !

C'est officiel, jusqu'à la fin du projet Xhoromag 4, je serai encore plus schizophréne que d'habitude.

[Alendir]

Par slider, vous entendez quoi exactement ?

La définition de wiki m'a pas convaincu : "Un slider, ou curseur de défilement, est un composant d'interface graphique permettant d'entrer une valeur numérique dans un programme en déplaçant un curseur sur une échelle graduée."

[Shadow]

En fait, c'est une espèce de défilement de contenu, page après page. On peut faire défiler à la main en cliquant sur la page que l'on souhaite afficher, ou laisser le défilement automatique : on change de page suivant le temps défini : toutes les 5 secondes par exemple.
Enfin, quand je dis "page", c'est plutôt de la taille d'une grosse bannière en fait.
C'est un peu chaud à expliquer
Disons que c'est ce qui a remplacé petit à petit les animations flash de présentation de site.
Ca permet de ne pas avoir une page trop statique, de présenter plusieurs infos dans un seul div.
Les sliders fonctionnent avec du javascript, bien souvent du jquery.
On pourrait aussi les appeler "slideshow".
On commence à en faire aussi en html5, mais je crois que ça ne doit pas être trop ça encore niveau compatibilité des navigateurs.

Quelques exemples sur ces sites :
http://www.manga-sanctuary.com/
http://webdesignfan.com/jquery-slider-tutorials-and-plugins/
http://css-tricks.com/examples/AnythingSlider/
http://slidesjs.com/

Évidemment, en vieux relou, je commençais à voir les avantages d'un slider bien fait...

Ok
Je ferai les deux versions alors
Je commence sans : je devrais pouvoir vous montrer le premier aperçu demain soir.
Pour le slider, je ferai ça ce week-end plutôt

[Alendir]

Ok, ça m'a l'air d'être une bonne idée !

[Shadow]

Hello,
j'ai fait un test de design sur une page html.

Voici le lien : http://celine.plil.net/xhoromag/

J'ai fait le test sous Firefox 7.0.1, Firefox 8.0, Internet Explorer 8 et Google Chrome 16.0.912.41 beta-m.
Le site a l'air de plutôt bien se comporter.

Pour info, je n'ai pas eu le temps de faire les 3 zones aventures. Et vu l'espace disponible, je me suis dit que tester le slider rapidement pourrait être une bonne idée.
Je l'ajouterai dès que possible à la page. Pour le moment, j'ai juste mis une zone grise à la place.
Je n'ai pas eu le temps non plus de faire le menu : j'ai juste fait les boutons, mais il ne se passe rien quand on passe la souris dessus. Il est sur ma "todo" list.

N'hésitez pas à envoyer tous vos commentaires, dire ce que vous n'aimez pas, ce qui serait à améliorer.
Si vous avez d'autres navigateurs pour faire des tests, ça m'intéresse aussi

Le site est en nuance de gris. J'ai tout de même ajouté une couleur vive pour mettre un tit poil de gaieté : du vert.
C'est une couleur unisexe qui véhicule une idée de naturel et ça donne un petit aspect "zen" je trouve.
Après, je peux changer cette couleur pour une autre (orange, bleu clair, ...) si elle ne fait pas l'unanimité.

Pour les boutons avec les liens, je trouve que je les ai fait trop petits, peut-être devrais-je les agrandir ? et aussi changer la couleur au survol ?

Merci d'avance pour vos commentaires

Edit : pour info, le code source est disponible sur DropBox, dans le répertoire "Design", si vous voulez y jeter un oeil.

[Caïthness]

joli code

Code :

<div id="rightColumn">
<div id="adventures">Slider TODO
<div id="lastAdventure"></div>
<div id="winningAdventure"></div>
<div id="randomAdventure"></div>

plutot que d'empiler/imbriquer des "div", pourquoi ne pas faire des listes de definition avec un float (j'ai decouvert ca l'annee derniere et c'est bien pratique ) ?

genre :

Code :

[b]HTML[/b]

<dl class="gallery">
<dt><img src="flower.jpg" alt=""></dt>
<dt>Ici le titre</dt>
<dd>Ici la description</dd>
</dl>

<dl class="gallery">
<dt><img src="flower2.jpg" alt=""></dt>
<dt>Ici le titre</dt>
<dd>Ici la description</dd>
</dl>
<dl class="gallery">
<dt><img src="flower3.jpg" alt=""></dt>
<dt>Ici le titre</dt>
<dd>Ici la description</dd>

</dl>

[b]CSS[/b]

dl.gallery
{
border: 1px solid #000;
background-color: #ddd;
width: 102px;
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}

.gallery dt { font-weight: bold; }

.gallery dt img
{
border: 1px solid #000;
width: 100px;
height: 100px;
}

.gallery dd
{
margin: 0;
padding: 0;
}

source : Styler une liste de définitions pour en faire une galerie d'images


Pour la mise en page, je la trouve un peu trop "classique" et froide (notamment le menu du haut). Par contre, j'aime bien les petites barres vertes en bas de chaque section/case.

[Shadow]

joli code
plutot que d'empiler/imbriquer des "div", pourquoi ne pas faire des listes de definition avec un float (j'ai decouvert ca l'annee derniere et c'est bien pratique ) ?

Merci pour l'info et pour l'exemple
Ce sont des balises que je n'avais jamais utilisées. Il faudrait en effet que je m'attache un peu moins aux divs.
Par contre, est-ce que ça ne risque pas de faire bizarre d'utiliser ces balises pour autre chose qu'une définition ?
Je regarderai pour l'utiliser pour les zones 'aventure', en espérant que ça fonctionne aussi avec le slider jQuery, mais il n'y a pas de raison que ça cause problème

Pour la mise en page, je la trouve un peu trop "classique" et froide (notamment le menu du haut). Par contre, j'aime bien les petites barres vertes en bas de chaque section/case.

D'accord. C'est là où je suis contente d'avoir un regard neuf sur un design
C'est vrai que la bannière du haut fait un peu "glaçon" et le gris utilisé pour le reste du site est assez sombre. Il faudrait peut-être que j'atténue ce contraste.
Après, il faut savoir aussi que la zone slider qui manque actuellement sur la page aura une couverture de livre, ce qui ramènera un peu de couleurs au site. Enfin, je ne sais pas, il faudra voir ce que cela donne.

Est-ce que c'est OK pour vous si je code le slider avant de passer aux modifications de design ?
Comme ça, le code sera fait et il ne faudra changer que la css et les images.

[Caïthness]

Par contre, est-ce que ça ne risque pas de faire bizarre d'utiliser ces balises pour autre chose qu'une définition ?

je ne sais pas si semantiquement c'est une erreur, toujours est-il que l'exemple existe. apres peut-etre fouiner 2-3 forum pour savoir si l'info est bonne ou n'est pas une deviance ou source de probleme pour une utilisation avancee (alsacreation, tu connais ? )

Est-ce que c'est OK pour vous si je code le slider avant de passer aux modifications de design ?
Comme ça, le code sera fait et il ne faudra changer que la css et les images.

Bien evidemment, c'est exactement pour ca que le CSS est le graal du webmaster

[Skarn]

À mon tour.

J'ai tendance à préférer quand la couleur du fond de la page est dans la continuité de celle du contenu. Cela enlève cette impression de rupture, de site compressé au milieu de l'écran. Un exemple ici, avec un slider en prime.

À moins qu'Oiseau lui-même ne soutienne cette proposition, je pose mon veto au titre Xhoromag en vert. Et je ne suis pas fan de la police non plus.

Non aux rayures !

Je suppose que le fil d'Ariane est présent sur la page d'accueil juste pour la démonstration ?

Bonne idée le bloc "qui sommes-nous" en haut de la colonne de droite. Il est bien visible, sans manger trop de place.

Pour le contenu, les nuances de gris et le fond blanc sont reposants et bien lisibles. Peut-être pourrait-on se permettre un peu plus de fantaisie dans l'en-tête ?

Quelques remarques sur le code. Comme il ne s'agit que d'une démo visuelle, certaines remarques sont peut-être inutiles, sur des points mis de côté pour l'instant dans le but d'accélérer le développement. Mais je préfére trop râler maintenant pour éviter d'avoir à le faire à la fin du projet.

• Plusieurs balises h1 en une seule page, c'est mal. Logiquement, les balises h1 actuelles, qui semblent au même niveau d'importance, devraient être des h2. Pour leur titre parent, une astuce consiste à se servir du php pour passer en h1 le titre du site uniquement sur la page d'accueil.
  
• Les background-image devraient être fusionnées en un minimum d'images via la technique des sprites CSS (oui, le site précédent n'applique pas ses propres règles, cordonniers mal chaussés machin tout ça).
  
• Google déconseille si possible d'utiliser les sélecteurs de type "elt1 elt2" pour améliorer les performances. Ensuite, ils sont parfois un peu rigides, sacrifiant la lisibilité du code au profit de sa vitesse d'exécution.
  

Sinon, à titre d'information, j'ai entendu parler de frameworks CSS, sans avoir eu le temps de creuser le sujet. Vu qu'un bon framework augmente toujours la productivité et la maintenabilité à long terme, cela peut valoir le coup de regarder.

J'attends la version munie du slider avec impatience.

[Alendir]

Il y a de l'idée. Je suis loin d'être un pro en design (je préfère utiliser un kit graphique xD http://maldoror.alwaysdata.net/ ) donc je vais faire juste des commentaires évidents.

-Le titre en vert (et la police) me parait par contre pas vraiment adapté, ça a un côté un peu enfantin.
-Pour le bas de page, je sais pas si c'est une bonne idée de refaire le menu.

[Shadow]

Merci pour tes remarques Skarn.

J'ai tendance à préférer quand la couleur du fond de la page est dans la continuité de celle du contenu. Cela enlève cette impression de rupture, de site compressé au milieu de l'écran. Un exemple ici, avec un slider en prime.

C'est une proposition intéressante. Après, je trouve que mettre la même couleur pour le fond et le contenu peut déstructurer un peu le site : nous aurons rarement des zones de même taille ce qui pourrait donner un effet de zones un peu éparses.
Ou alors, il faudrait peut-être ajouter un léger séparateur entre les deux colonnes du site, juste pour donner un guide pour la structure ?
Sinon, sur Alsacréations, ils utilisent un background de couleur différente mais très proche de la couleur du contenu du site, le site semble moins compressé. Peut-être qu'éclaircir la couleur du background pourrait enlever l'effet de compression ?
Désolée si c'est ce que tu as voulu dire.

À moins qu'Oiseau lui-même ne soutienne cette proposition, je pose mon veto au titre Xhoromag en vert. Et je ne suis pas fan de la police non plus.

Quelle couleur faudrait-il utiliser alors ?
Et quelle police ?
Il en faudrait une libre de droits. Il y en a pas mal sur Dafont ou d'autres sites du même style.
Est-ce que l'effet avec reflet et ombre convient, ou cela fait de trop ?

Je suppose que le fil d'Ariane est présent sur la page d'accueil juste pour la démonstration ?

Je pensais qu'un fil d'Ariane devait toujours être présent, que l'on soit sur la page d'accueil ou non. Comme ici : http://ergonomie-web.studiovitamine.com/.
Comme ça, son emplacement est réservé, l'utilisateur le voit toujours, et on sait aussi quand on est sur la page d'accueil du site.
Après, son utilité est sans doute discutable sur cette page, c'est sûr. Il faudra trancher la question

Pour le contenu, les nuances de gris et le fond blanc sont reposants et bien lisibles. Peut-être pourrait-on se permettre un peu plus de fantaisie dans l'en-tête ?

J'avais une ou deux idées à ce sujet :
Est-ce que l'on a des images que l'on pourrait utiliser ?
Du style un guerrier ou une créature bien identifiable que l'on pourrait détourer : on pourrait ainsi créer comme une silhouette que l'on pourrait placer soit au niveau du header ou alors du footer.
Il faudrait des images libres de droit :-/

Sinon, est-ce que l'on utilise des dés pour toutes les aventures ?
Une autre idée pourrait être de mettre une paire de dés : soit dans le header, soit en séparateur à certains endroits, ou alors , ils s'afficheraient dans le menu quand on glisse la souris sur un item...

Ou autre idée : pour chaque section, on détermine une icône qui la représente :
par exemple :
- lire & jouer : une paire de dés ou un dé ou encore un livre ouvert
- créer : un crayon avec un bloc-note, ou alors une ampoule
- découvrir : une paire de jumelles
- partager : un perso avec une petite bulle style bd au dessus de sa tête

J'attends la version munie du slider avec impatience.

Message bien reçu. Par contre, j'avoue ne pas avoir beaucoup de visibilité sur mon temps libre à venir. Mais dès que je peux, je m'y mets.

[Skarn]

J'ai tendance à préférer quand la couleur du fond de la page est dans la continuité de celle du contenu. Cela enlève cette impression de rupture, de site compressé au milieu de l'écran. Un exemple ici, avec un slider en prime.

C'est une proposition intéressante. Après, je trouve que mettre la même couleur pour le fond et le contenu peut déstructurer un peu le site : nous aurons rarement des zones de même taille ce qui pourrait donner un effet de zones un peu éparses.
Ou alors, il faudrait peut-être ajouter un léger séparateur entre les deux colonnes du site, juste pour donner un guide pour la structure ?
Sinon, sur Alsacréations, ils utilisent un background de couleur différente mais très proche de la couleur du contenu du site, le site semble moins compressé. Peut-être qu'éclaircir la couleur du background pourrait enlever l'effet de compression ?

Une légère différence de couleur pour le corps du site et le couleur de fond pourrait être une bonne idée effectivement, marquant la séparation sans être trop brusque. Dans la version actuelle, je la trouve trop souligné.

Je pensais qu'un fil d'Ariane devait toujours être présent, que l'on soit sur la page d'accueil ou non. Comme ici : http://ergonomie-web.studiovitamine.com/.
Comme ça, son emplacement est réservé, l'utilisateur le voit toujours, et on sait aussi quand on est sur la page d'accueil du site.
Après, son utilité est sans doute discutable sur cette page, c'est sûr. Il faudra trancher la question

On n'a qu'à le laisser pour l'instant. Si on change d'avis au final, seules quelques mots de php seront nécessaires pour l'ôter spécifiquement sur la page d'accueil.

Sinon, est-ce que l'on utilise des dés pour toutes les aventures ?
Une autre idée pourrait être de mettre une paire de dés : soit dans le header, soit en séparateur à certains endroits, ou alors , ils s'afficheraient dans le menu quand on glisse la souris sur un item...

Euh, je ne comprends cette proposition, désolé. On n'utilise pas les dés dans toutes les aventures actuellement sur le site (aventures sans hasard, table de hasard comme dans Loup Solitaire etc.), mais je vois pas bien ce que tu veux faire avec cette icône.

Ou autre idée : pour chaque section, on détermine une icône qui la représente :
par exemple :
- lire & jouer : une paire de dés ou un dé ou encore un livre ouvert
- créer : un crayon avec un bloc-note, ou alors une ampoule
- découvrir : une paire de jumelles
- partager : un perso avec une petite bulle style bd au dessus de sa tête

Où seraient utilisés de telles icônes ? À côté des noms des sections dans les menus ? Cela les rendrait peut-être trop chargé en ce cas.

Pour l'icône du site et son titre, je ne sais pas trop. Historiquement, le symbole de Xhoromag est l'avatar actuel d'Oiseau (le disque violet et bleu). J'aime beaucoup ce dessin, simple et reconnaissable, même si certains peuvent le trouver kitsch. Toujours historiquement, les couleurs dominantes étaient orientées vers l'espace, les corps célestes (noir étoilé). Ensuite, dans le but de donner un design moins ancrée dans le XXème siècle, et pour la continuité graphique avec le reste du site, il convient probablement d'effectuer quelques aménagements.