le design des fiches perso des membres

On m'avait dit pas mal de truc en vrac hier à ce sujet, ça serait peut être bien de développer ça ici. J'ai retenu en gros "pas de fond noir", "quelque chose de joli"(c'est très vague lol) "un effet carte de visite"(qu'est ce que vous entendez par là exactement?) etc...Alors quelles sont vos idées et suggestions pour le design de ces fiches? (couleur, caractère d'écriture etc)
Lachez vous sinon après il faudra pas venir pigner que ça vous plait pas

Entierement d'accord avec l'initiative, c'est maintenant qu'il faut donner ses idées, pas quand tout sera terminé

Donc postez toutes vos remarques ou suggestions pour la mise en page de ces fiches persos !

J'attends les posts !

- Alexandre

PS : dana, dans mon mail, j'ai parle d'eventuelles difficultes techniques, tu peux retirer ca, en fait ca devrait etre assez facile a faire. mais je maintiens que ca doit bien s'integrer au reste du site
PPS : Peut etre que ce post serait mieux dans la partie privee du site. Normalement celle-ci est accessible maintenant pour tous les membres de l'assoc. Dites moi si vous y avez pas acces...

ouioui bien sur il faut pas ke ça jure avec le design du reste du site maintenant ça peut s'accorder tout en étant un peu différent!
je vais de ce pas voir si ça marche^^

Je poste ici les remarques que Corinne m'a envoye en MP pour les fiches membres :

Citation :

pour les pages perso : moi je verrais bien un truc style carte d'identité (meme format pour tous) et ensuite pour filmographie par ex (une petite bobine de film qui se deroule juste avant le mot filmographie ! pareil pour la musique, les petites infos persos (un truc design !) par contre pour les couleurs (différentes de celles du site, je verrais bien bleu,un peu de jaune ou de vert, etc...)

Mon opinion la dessus :
-> Le style carte d'identite: tres bonne idee et je pense que tous le monde sera d'accord pour le faire comme ca
-> La petite bobine qui se deroule pour filmographie, ca me parait bien sympa aussi
-> Par contre pour rajouter d'autres couleurs ca risque d'etre dur si on veut garder une unite dans le design du site (du jaune et du vert dans un site majoritairement fait en rouge/blanc/noir/gris ca jure un peu) Peut-etre que le bleu passera bien par contre (a essayer)

Voili voilou. Les autres n'hesitez pas a poster vos remarques aussi...

++

et pourquoi pas faire un fond blanc mais avec une photo du membre en transparence en gris clair?

oui pas mal, un peu comme une fiche police/identite en noir et blanc fait... a ce moment la je vois bien le fond blanc avec une bordure grise... pour la transparence gris-clair, ca implique transformation de la photo donc il faut que tout le monde soit d'accord.

En tout cas l'idee me parait bonne !

Bon j'ai fait quelques experiences avec les remarques qui m'ont ete deja faites et ca donne ca (pour l'instant) :


(cliquez pour voir la capture d'ecran en taille reelle)

J'ai fait ca avec ma fiche (dsl) vu que c'est la seule que j'ai sous la main )

En esperant que ca peut servir de base aux futures remarques/reflexions.

++

voilà mon idée, à partir d'un fond avec une photo du membre mise en noir et blanc, éclaircie et postérisée sur painshop pro (je l'ai peut être pas assez éclaircie à voir..).
Pour l'écrture j'ai choisi du rouge sang et du noir pour rester dans l'esprit du site et de 10-dense et pour les caractères du Papyrus pour le titre en 30(j'aime bien son côté destructuré)et du Lucida Bright en 14 pour le reste plus lisible que l'arial classique car plus espacé.



sinon sans postériser la photo ça donnait cet effet là(jai eu la flegme de tout réécrire)mais je trouve que l'effet postériser est sympa:



voilà j'attend vos avis^^(et vos photos+la fiche de yannick aussi)

j'aime bien l'idée ! ça fait tres pro
par contre dans ce cas la ! il faut que chaque membre fasse une belle photo de lui en pied !
mais ça me parait cool !
le fond est bon ! tu as gardé les memes couleurs (rouge, gris, noir) , moi j'aurai change mais bon c'est bien aussi com çà

oui en fait j'imaginais la fiche avec le fond du site et je pense que trop de couleurs ça risque de jurer avec l'esprit et le design du site. mais si vous avez d'autres idées de couleurs à proposer pour les caractères ou d'autres style de caractères je veux bien essayer et vous montrer le résultat^^

L'idee me parait en effet sympa (et ca rentre bien dans les couleurs du site)

Voila ce que ca donne en situation sur le site :



(desole c'est ma vilaine bobine encore, mais je fais avec ce que j'ai sous la main et j'avais la flemme de taper la fiche de dana)

Quelques remarques :
- La photo doit etre assez grande, sinon le fond va se repeter et ca sera pas joli (largeur minimale 750 pixels et hauteur minimale 800 pixels)
- La photo doit etre relativement claire (la mienne est deja un peu trop sombre, mais celle de dana est parfaite) pour qu'on puisse lire le texte
- Je n'ai pas change les polices car elles sont relativement limitees dans un navigateur web si on veut que tout le monde puisse voir le site correctement
- On peut garder le fond blanc au cas par cas pour ceux qui ne veulent pas mettre de photos

Voila en tout cas, si tout le monde est pour cette idee, vous avez interet a envoyer de grandes photos

++

Ya quand même quelque chose qui me gène par rapport à la fluidité je saurais pas dire koi exactement, en fait je pense qu'il faudrait structurer plus clairement les différentes parties, comme disait Corinne peut-être avec des icones qui casseraient la linéarité du questionnaire, j'essaierais d'autres trucs par rapport à le mise en page avec cette idée de fond aujourd'hui si j'ai le temps.

Sinon oui surtout trouvez des photos de vous grandes, claires et en pied si possible les gros plans de visage j'ai essayé pour faire la fiche d'Ulrich même de bonne qualité ça rend pas, il faut énormément l'éclaircir pour que le texte ressorte et trop éclairci on ne voit plus assez les traits du visage. De plus optez plûtot pour une photo à la verticale qu'à l'horizontale pour un simple soucis de place.

C'est con pour les caractères je les aimais bien en particulier ceux du nom, sinon si j'insère le nom de la personne directement sur son fond-photo à ce moment là les caractères sont considérés comme une images donc pas de problème qu'est ce que t'en pense? Pour les autres je comprend la nécessité de pouvoir les manier en cas de changements donc c sur qu'on peut pas faire ça.

Sinon pour les membres qui ne désirent pas de fond-photo(pour l'instant tout le monde avait l'air partant donc je pense que la question se posera plus pour des membres futurs)pourquoi ne pas faire un fond "type" avec les mêmes tons pour ne pas jurer avec les fiches des autres membres? Par exemple avec le logo de 10-dense retravaillé au gris, ou je peux faire une capture d'Eric de loin sur son rocher en train de tourner pour le logo j'ai un truc en tête qui pourrait être pas mal...

Et Alexandre si tu as trouvé une photo de toi de meilleure qualité, voir plusieurs envoi les moi par mail je ferais des tests et une sélection de ce qui colle le mieux^^(c'est valable pour les autres fouillez vos numériques! et n'oubliez pas évitez les photos sombres et les trop gros plans!)
Tu pourrais m'indiquer aussi quelles doivent être les dimensions du fond-photo?

Pour les caracteres, les mettre directement dans l'image n'est pas forcement une bonne idee car le texte pourrait allez au dessus, particulierementa basse resolution. En gros, si on fait ca il n'ya aucune garantie que le texte soit bien positionee par rapport au titre.

Pour la photo en fait moi le fond standard 10-dense me plairait mieux et rendrait probablement l'image plus lisible (de plus je doute trouver une photo correctede moi, ca ne doit pas exister ). Donc si Alex peut envoyer une des images avec Eric, ca peut le faire.


Pour la resolution des photos, c'est comme je l'ai mis dans mon post precedent :

Citation :

La photo doit etre assez grande, sinon le fond va se repeter et ca sera pas joli (largeur minimale 750 pixels et hauteur minimale 800 pixels)

Pour le reste moi la mise en page me parait pas mal, dans le sens ou le texte est bien lisible et la page n'est pas trop surchargee.

++

ouais c'est pas mal, j'aime bien le design photo en transparence. En fait je pense qu'il faudrait personaliser toutes les pages des rubriques avec une idée a chaque fois.
Et il faut faire des photos assez esthetiques en pied, genre dans la nature. Ca fera plus classe et plus pro. Hein Alex, tu l'as prise dans ton appart ta photo, a l'arrache ?

Le fond pour les fiches est une bonne idee car les fiches contiennent peu de texte et sont assez standardisees. Par contre pour le reste du site mieux vaut rester dans la sobriete : lire un article de plusieurs milliers de mots sur un fond image n'est pas agreable du tout. Un des principes de base en ergonomie de site web c'est de rester sobre, en gros la lisibilite/utilisabilite est plus importante que l'esthetique (si si), meme si les deux concourrent a creer un bon site.
Pour illustrer mes propos, voila un exemple de bon site :
- http://fr.wikipedia.org/wiki/Accueil
et de mauvais :
- http://jc.bouchex.free.fr/Sommairex.html (en plus l'exemple est comique)

Donc je reserverai le fond aux fiches et aux fiches uniquement.

Deuxio ma photo je compte pas la mettre sur le site, c'etait juste un essai pour voir la faisabilite technique de la chose. Comme je l'ai dit precedemment, je prefere avoir un fond 10-Dense standard que ma photo (je veux pas imposer ca aux lecteurs du site et je crois pas que meme une photo en pied serait correcte pour moi). Donc si tu peux m'envoyer une photo noir et blanc haute resolution d'Eric en moine sur le rocher je remplace toute suite l'horrible photo.

++[/b]

je suis d'accord avec toi sur la lisibité/utilisabilité ...mais pas du tout avec ton choix de bon site, je le trouve non seulement trop souillon et fouilli tellement il y a du texte partout mais pas esthétique pour un sou tant il est sobre, moi je tombe sur un site comme ça je zappe direct...ma notion de bon site c'est plutot ça : http://ivycosplay.free.fr/index01.htm (le site d'une cosplayeuse que j'adore): simple, esthétique, lisible.
Moi non plus je ne pense pas qu'il faut appliquer le système de fond-photo pour les autres rubriques, ça ne serait pas agréable à lire comme tu l'a dit, mais j'ai l'impression que ce n'est pas ce qu'Alex voulait suggérer par là. Je pense qu'il voulait plutot dire que ça pourrait être sympa d'améliorer le design de chaque rubrique avec une idée qui la rendrait plus esthétique, artistique, sans pour autant en changer le style sobre noir/rouge/blanc qui colle avec l'esprit du site.

Sinon pour les caractères des fiches quels choix s'offrent à nous à part le style basique? Perso je trouve justement qu'il y a un problème de lisibilité sur ta fiche avec ces caractères car ils se confondent dans le fond par endroit, il faudrait qu'ils soient plus opaque, plus gros.
Et pour les noms des membres n'y a-t-il pas un style d'écriture plus artistique qui collerait?

Pour la photo comme tu veux, mais pour la petite histoire je ne suis absolument pas photogénique et pourtant avec ce photographe je m'adore sur cette série de photos, tout dépend du cadre, de l'angle et du photographe bien sur.Tout ça pour dire que tu n'as pas une vilaine bobine c'est la photo qui te met pas du tout en valeur et les photo de gros plan de face mettent rarement les gens en valeur, même les poses classique figées qu'on prend devant un joli paysage de vacances sont à chier il faut la touche artistique et des angles et poses plus originaux.
Alex les photos dans la nature c'est quand tu veux je me sens l'âme d'une photographe et je suis en manque d'utilisation d'appareil à fins de photos stylées justement

Mon exemple de site n'est pas pris au hasard, ce site (wikipedia) est une encyclopedie qui attire pas mal de monde (19e site mondial au nombres de visites) : http://www.alexa.com/site/ds/top_sites?ts_mode=global&lang=none
Bien sur le contenu en est en majorite la cause, mais je sais par experience, et en demandant au gens autour de moi que beaucoup apprecient sa sobriete et sa facilite d'utilisation.

Mais c'est peut etre pas le meilleur exemple pour comparer a un site qui est support de contenu multimedia et pas seulement de texte. Le site que tu presente est bien, mais deja un petit peu charge a mon gout (les deux bandes sur le cote sont de trop je pense).

Passons a plus concret pour la lisibilite sur l'image le probleme ne vient pas de la police, mais du fond qui est trop sombre. C'est pour ca que ,comme tu l'as dit dans un de tes precedents post, l'image doit etre la plus claire possible.

Pour la police les choix sont relativement limites, si on veut rester le plus generique possible (c'est a dire ouvrir le site au plus grand nombre). En fait j'ai le choix entre 3 grandes familles :
- Police avec pattes (type Times New Roman)
- Police sans pattes (Type arial, la police de ce forum)
- Police a taille fixe (Type Courier New)

Pour l'instant je mets de la police de type arial, mais je peux essayer le times new roman, bien que je doute que ca change quelque chose.
Par contre, j'ai une maitrise totale sur la taille (mais ca a ses limites aussi )
Mais pour moi, si on met la police actuelle sur un fond plus clair, le probleme de lisibilite devrait etre resolu.

Pour la photo je pense que je me cantonnerai au fond standard quand meme. Je vais essayer de mettre le logo en noir et blanc et voir ce que ca donne. Ca donnera probablement un exemple plus interessant pour la discussion.

++

Voila ce que ca donne avec le fond 10-dense (moi ca me parait plus sympa) :



Peut etre que le fond devrait etre un peu plus eclairci, mais je crois que le probleme de lisibilite est en partie resolu.

Coucou vogue

je suis d'accord pe etre que l'image en fond n'est pas une si bonne idée. Je crois qu'on va devoir revoir notre copie ! la lisibilité ! c'est aussi important ! par contre ton meilleur site : je suis pas d'accord ! la lisibilité est niquel mais le site n'est pas attrayant du tout et fade au niveau visuel ! le pire est largement mieux et le visuel n'est pas trop entaché (le fond est cela dit certainement trop vert ) ! un bon site serait sans doute un mélange des deux, ne crois tu pas (et on peut certainement le faire !!! on a le meilleur webmaster !!) ?

sinon pe etre faire un fond spécial pour les fiches et mettre les photos en postmasterisé mais en petit dans un carré comme une photo d'identité ! tu as raison la lisibilité est touchée !!

sinon essaie de trouver des petits trucs pour casser la linéarité (film : bobine, etc...)
ça serait largement mieux au niveau visuel et je suis entierement d'accord avec dana sur le fait que la police de caractere doit etre quelquechose de spécial pas un truc commun (essaie d'en trouver une stp ! ça serait vraiment génial !!)

je vais réfléchir à un fond pour les photos et je te tiens au courant si j'ai d'autres idées ... corinne

corinne utilise ton compte pas celui d'alex lol!

moi je trouve que l'image postérisée en fond rend vraiment bien et que ça serait dommage dene pas exploiter l'idée, la mettre en petit en format photo d'identité je vois plus l'intére, le but de la postérisation quand je l'ai appliqué aux photos étant de donner un coté flou pour ajouter à l'éclaircissement et au niveau de gris qui servirait à la lisibilité de l'écriture sur l'arrière plan. Maintenant c vrai il y a ce problème de lisibilité qu'il faudrait résoudre, soit en changeant la taille de l'écriture(mais du coup y aura-t-il assez de place pour tout mettre), soit en changeant les caractères. Vogue, qui ne pourrait pas nous lire en adoptant un caractère plus original?
Tu utilises quelle taille de caractère?

Sinon oui pour rendre la lecture de la fiche plus agréable et surtout plus structurée je pense qu'il faudrait y ajouter des éléments. Maintenant il faudrait trouver lesquels et adapter leur design à celui du site.

Si on veut ajouter des elements a la fiche, a priori il vaut mieux les faire nous meme(donc si quelqu'un se sent une ame de graphiste ). Mais a priori pas de probleme de ce cote la.

Quant a changer de police de caractere, la raison pour laquelle ce n'est pas possible, c'est que mis a part un nombre limite de familles de police (je crois que je les ai enumerees dans un precedent post), toutes les autres polices peuvent varier (ou meme ne pas etre installees) d'un systeme a l'autre suivant p. exemple :
- La version d'office ou open office installee
- La version de windows utilisee
- Le fait qu'un logiciel tel que paint shop pro soit installe ou non
- etc etc. sans meme parler des utilisateurs de linux (comme moi) ou de mac

Si on veut faire un site tout public, sortir des polices normalisees est a bannir ! Aucun utilisateur de PC n'a la meme configuration que le voisin.

En gros la seule solution pour pouvoir utiliser les polices plus elaborees, c'est de restreindre le site a un public plus particulier(p.ex. les utilisateurs de windows avec office installe, categorie a laquelle, je tiens a le preciser, je n'appartiens pas ) ce qui est pour moi une restriction inutile et dangereuse pour la viabilite du site.

Pour la taille du caractere c'est du 14 pixels, et je peux bien sur la changer, mais comme tu l'as souligne ca a ses limites...

Donc voila... Au final, etant donne tout ce que vous voulez faire avec ces fiches je me demande si le flash serait pas plus indique... mais dans ce cas il faut acquerir une licence pour pouvir creer le flash et trouver un bon graphiste (ce qui n'est pas mon cas) En plus le flah est quand meme un peu statique

++

arf non je déteste le flash!

sinon jai une idée est ce kil y aurait moyen de rajouter des rectangle blancs transparent(ça formerait un voile transparent mais plus clair qui permettrait une meilleur lisibilité)sur le fond mais juste au niveau des zones d'écriture. et ça permettrait aussi de dissocier et d'aérer les différente partie en faisant des rectangles différent pour la partie filmographie et celle des gouts par exemple. Je sais pas si c'est très clair

J'ai essaye de faire ce que tu as dit, mais ca donne pas tellement mieux :



Au niveau lisibilite c'est pas top je trouve...

J'ai aussi essaye d'entourer juste le texte, mais ca donne un effet bizarre comme si le texte etait coupe en deux.

Perso je pense que le probleme de lisibilite venait en fait de la photo elle-meme. Avec le logo 10-dense en fond (voir mes posts precedents) ca me parait plus correct.

exact maintenant que le fond a été éclairci le texte est beaucoup plus lisible^^ en fait je crois qu'on se prend beaucoup la tête pour rien il suffit de donner un coup d'éclaircissement sur les photos et le tour devrait être joué.

Coucou Alexandre le webmaster !

C'est mieux ta version pour la lisibilité mais il faudrait trouver quelquechose (une sorte de cadre commun pour le texte (un arrière plan style une carte d'identité à la matrix pourquoi pas !!) mais je crois que Dana a raison pour une chose au moins : la police de caractère : il faut vraiment trouver une solution (l'écriture du style de sa cosplayeuse est pas mal, si elle l'a fait : on peut certainement le faire !!!) alors mon petit alex, arrêtes de manger des chocolats et des frites et de jouer au squash (lol) et hop au boulot trouves nous une solution s'il te plait !!!
je vais demander à un pote informaticien comment faire quand meme et je te tiens au courant !