Pages :
bonjour,
Après des semaines de consultations de ce forum ainsi que l'achat du livre CSS2, je me suis enfin décidé à présenter mon modeste site. L'idée est simple: représenter les 4 saisons sur 4 styles différents. Pas très original me direz-vous, mais je suis dans une période "nature" en ce moment.
Un style switcher fera son apaprition lorsque j'attaquerai les autre saisons. vous l'aurez remarqué (du moins je l'espère), j'ai commencé avec le pringtemp.

Pour le moment, il est valide XHTML strict et CSS. au niveau accéssibilité, je n'ai pas encore travaillé le sujet car je ne suis pas suffisamment au point (en tout cas il est prévu de le faire).
Il a été testé sous FF et IE6. Il y a un problème connu. la non gestion de la transparence des fichiers PNG de IE. je suis en train de travailler la dessus. votre aide est la bienvenue.

vous remarquerez la difficulté d'avoir un fond sur le logo dans le même dégradé que la bannière Smiley sweatdrop .
Le menu de navigation n'est pas encore au point. je n'ai pas encore trouvé l'idée qui me plait pour faire quelquechose de sobre et plaisant à l'oeil. là encore, vos suggestions seront accueillies à bars ouvert Smiley ravi
voilà, toute les critiques sont la bienvenue tant au niveau deisgn qu'aux niveau du code.
ChacunSonStyle
Modifié par Ephagor (30 May 2006 - 16:31)
Salut,

C'est plutôt sympa... J'aime bien le rapport coloré entre le vert de fond de site, le turquoise de la bannière et le rose de la photo, les proportions rendent cela agréable.

Par contre.
Ton titre "Chacun son Style", en plusieurs couleurs pourquoi pas, mais il faudrait veiller à ce que le contraste de chaque couleur par rapport au fond soit le même. Dans l'ordre de lecture, présentement on voit "son" en premier, "style" en second, et on fini par deviner "chacun" qui se perd dans le fond... Essaye de fermer à moitié les yeux, en regardant ton titre, et tu vas voir que le premier mot n'est pas lisible.

Je trouve qu'il manquerait une couleur de fond un peu plus recherchée que le blanc pour le fond du site... Un bon vert olive ou vert bouteille ca ferait bien péter tout ca ^^ Enfin c'est mon avis.

Concernant le style de texte, je trouve que ca manque d'un peu plus de richesse... Ca mériterait d'être retravaillé (tailles, couleurs et contrastes).
Par ailleurs, le texte dans le cadre vert prairie à droite ne se lit pas bien car il n'est pas assez contrasté (il a la même couleur que le texte à gauche qui lui est sur un fond bien plus clair).

Enfin, la petite "puce" en forme de fleurs à la fin des titres ne se voit quasiment pas en raison d'un gros manque de contraste.
Et bien je vois que tu as décelé, les choses qui me convenaient qu'à moitier Smiley biggrin

Pour le logo, je voulair réutiliser les couleurs qui se trouvent sur le site pour donner une certaine cohérence. Je vais voir si je peux pas intervertir les couleurs et accentuer le vert pour rendre les choses lisibles. Pour la couleur de fond du logo, je l'avai remarqué également. Seulement, j'ai compressé mes images en PNG sur fond transparent. Comme Ie ne gère pas les fond transparent, j'ai du "ruser" pour simuler la transparence. j'ai donc éssayé de faire le meme dégradé que le fond, apparemment sans succès. j'ai bien éssayé de compressé en gif avec fond trasnparent voir si IE le gère mais ça rendait tres mal. le texte était pixélisé au niveau des contours. si vous avez une solution, je suis preneur.

concernant la couleur de fond, je voulais faire une sorte de dégradé. commencer avec quelquechose de tres tres clair pour le fond et avancer petit à petit pour arriver à une couleur plus foncé au niveau du texte (je sais pas si tu me comprend). enfin je vais tester avec les couleurs que tu m'a indiqué et je vais voir ce que ça rend.

au niveau du texte, je pensais avori fait un effort poru rendre tout ça lisible et agréable, mais ça ne semble pas suffisant Smiley smile . je dois admettre que je n'ai pas de connaisances assez poussées concernant la typographie.

pour les titres, j'ai utilisé une police légèrement caligrpahiée pour donner un esprit assez apaisant. Au niveau du contenu lui-même, j'ai intégré une lettrine pour chaque paragraphe avec une lègére indentation histoire d'aérer le tout. Je ne veux pas agrandir la lettrine pour éviter l'effet "grimoire du moyen-âge" Smiley ravi . Maintenant peut-être que si je change la couleur de la lettrine (une couleur qui n'est pas dans les nuances du vert), ça pourrais rendre mieux. maintenant je ne vois pas comment "enrichir" le contenu lui-même. Le contraste avec le fond me semble suffisemment lisible. Je te l'accorde, celui entre le cadre à droite et le texte ne l'est peut-etre pas assez. je vais travailler là dessus également.

enfin pour la puce, c'est vrai qu'elle se perd un peu dans le "décors" par manque de contraste. surement à cause de la lueur externe que j'ai appliqué dessus et qui donne cet aspect de flou.

bon dès que j'ai le temps, je retravaille tous ces points et je vous tiens au courant.

Merci de votre aide (ton aide, pour l'instant Smiley lol )
Salut,

Quand je dis que la typo n'est pas suffisamment travaillée, ce n'est pas un reproche général sur tout ce que tu as essayé.
En fait, en revoyant le tout ce matin un peu plus fraichement qu'hier soir j'ai trouvé ce qui me géneait dans ta mise en forme texte.
C'est sa disposition. Rien n'est aligné. le titre à un degré de justification, la date est décalée à droite, ton texte a une tabulation avant la lettrine, mais cela ne l'aligne même pas avec le titre, et au final le texte est justifié bien plus à gauche que le titre !
Je pense que si tu mets un peu d'ordre dans les repères visuels que tu apportes à l'oeil, ca semblera déja plus lisible.
Concernant les titres, je pense aussi que de ne pas avoir de majuscule, même à un titre provisoire, est une chose dérangeante.
Peut être un poil plus gros ou plus gras aussi, il se détacherai un peu plus du texte.
Et la date en corps de texte aussi gras, est-ce nécessaire ?

Concernant le contraste du texte sur le fond, dis toi que tu as peut être de bons yeux et que ca ne te pose pas de problème mais tu n'as tout de même pas le contraste maximal "noir sur blanc", et tu en es même assez loin.
Donc certains utilisateurs ayant quelques défficiences auront du mal à lire le contenu.
Modifié par Mikachu (31 May 2006 - 10:05)
salut,
merci de m'avoir donné plus de précisions. en effet, en s'y attardant un peu plus, l'alignement pourrait être plus précis. Le fait de décaler la date par rapport au titre est un choix que j'ai fait. je ne veux pas mettre ces 2 informations sur le même plan, la date n'apportant qu'une information complémentaire au titre. C'est vrai que j'ai décalé le titre par rapport au texte. je vais corriger ça en l'alignant correctement. je vais également rajouter une majuscule, ce qui est une chose essentielle, je suis d'accord.
au final, tout devrait être aligné excepté la date qui sera décalée légèrement sur la droite, et bien sur la lettrine avec l'alinéa de début de paragraphe.
Pourquoi la police de la date est aussi grasse ? Et bien je pense que c'est à cause de la taille de la police qui donne cet effet. la police doit mal supporter les petites taille d'ou cet effet de gras. Je vais agrandir proportionnellement les tailles du titre et de la date pour palier à ce problème.

Enfin pour le contraste, je vais essayer d'utiliser un vert encore plus foncé que celui déjà utilisé pour le texte et pourquoi pas éclaircir le fond du cadre pour accentuer le contraste.

Merci de ces conseils, ça m'aide beaucoup dans mon apprentisage
Modifié par Ephagor (31 May 2006 - 10:25)
Alors j'ai apporté quelques petites modifications.
j'ai replacé les titres, changé la tialle de la police, changé la couleur de la lettrine et de la police pour accentuer le contraste et améliorer la lisibilité.
j'ia éssayé de canger la couleur de fond avec un vert bouteille comme suggéré mais la bannière rendait trop fade. j'ai donc utilisé un vert plus clair pour égaliser tout ça.
La suite, c'est la modification de l'image de ma puce et de la couleur du cadre de droite. IL me reste aussi à trouver une idée pour le menu de navigation.
Voilà, je suis toujours à votre écoute si vous avez des remarques à faire au niveau du code, du design ou autre.
Salut,

Je pense que la puce n'est toujours pas vraiment détachée... Elle ne le sera qu'avec un ombrage ou un détourage foncé je pense.

J'allais dire que maintenant je trouvais tes titres trop gros, mais je pense que c'est la police de caractère qui fait ca...

La lettrine aurait pu garder sa couleur, elle n'étais pas spécialement géneante dans son ancienne couleur.

Concernant les alignements de textes, ca va mieux, mais la date semble toujours flotter au milieu de nulle part...
D'ailleurs je me faisais la réflexion, que tu pourrais lui appliquer une police baton comme le contenu du texte, ce qui rendrait tes titres plus justifiés dans leur police romane.
Ce qui du coup te permettrait de la réduire un peu et qu'elle soit quand même aussi lisible. Du coup elle pourrait se rapprocher du filet de titre (et pourquoi pas s'aligner à droite en opposition avec le titre ?).
Bon j'ai fait les retouches dont tu m'a parlé.
en fait, je n'avia pas encore retouchés au puces avant ta dernière réponses Smiley ravi . j'ia du mal me fair ecomprendre. je les ai retouché maintenant. si tu le strouve toujours peu lisible, je rajouterai un ombrage ou un contour plus sombre.
Donc:
- j'ai changé la police de la date et positionné le bloc à droite
- j'ai un peu diminué la taille d ela police des titres qui, apres réfléxions, me pariassaient également trop gros.
- j'ai rmeis la couleur d'origines aux lettrines. j'aime mieux comme ça.

Finalement j'aime bien cette opposition dont tu m'a parlé entre la date et les titres. Merci du conseil Smiley cligne
Pour ma part, je vois plus le printemps comme un mélange (parfois détonnant) de couleurs pastels et de touches de couleurs vives. Là, sur les couleurs vives, c'est un peu timide.

Ephagor a écrit :
L'idée est simple: représenter les 4 saisons sur 4 styles différents. Pas très original me direz-vous, mais je suis dans une période "nature" en ce moment.

Bah, « l'originalité » c'est très surfait.

Et voilà, je sens que je vais caser cette réplique à deux balles une fois par jour, si ça continue…
je te l'accorde, le couleurs vives, c'est pas forcément ce qu'on voit le plus. mais étant donné que je ne suis pas un expert dans l'harmonie des couleurs, j'ai moins de chances de me planter en utilisant des couleurs pastels que de faire le mélange.
Pour améliorer cela, je pourrai utiliser une fleur aux couleurs vive pour la puce et peut-etre trouver quelquechose dans les mêmes tons pour mes titres.
Je vais voir ce que je peux faire.
Merci pour ton avis.
Modifié par Ephagor (31 May 2006 - 22:54)
J'avais un très bon site concernant la chromie, forcément au moment ou j'aurais besoin de l'adresse je la retrouve pas, mais je te l'enverrai... Ca pourra t'aider à mieux comprendre dans un premier temps, et choisir plus facilement ensuite.

Sinon je trouve que c'est bien mieux comme ca, mais la puce est encore un peu noyée dans le fond quand même. Mais ca s'approche... ! Smiley smile

a écrit :
Bah, « l'originalité » c'est très surfait.

Oué oué chui d'accord soyons pas originaux, regardons arte et mangeons des légumes ! Zut c'est surfait aussi, les intellos et les végétariens le font déja Smiley murf
de ssite sur le scouleurs j'en ai quelques-uns sous le coude
Je donne les adresse spour ceux que ça intéresse:

pourpre.com

Bon j'en ai qu'un seul sous la main pour l'instant mais il est déjà très complet.
Je vais suivre vos avis et je vais egayer un peu cette puce. Je vais me plonger dans des recherches de fleurs du pringtemp et je changerai ça. Smiley ravi
Je vous tiens au courant dès que je trouve ce qu'il me faut.
Merci de votre aide
Bon ben voilà, c'était celui la que je cherchais ! Je vais vite le bookmarker à un endroit logique des mes favoris avant de le reperdre.
Merci ^^
Mikachu a écrit :
Oué oué chui d'accord soyons pas originaux, regardons arte et mangeons des légumes ! Zut c'est surfait aussi, les intellos et les végétariens le font déja Smiley murf

Ah non, surfait ça ne veut pas dire la même chose que ça. Si les intellos et les végétariens le font, ça veut dire que ça n'est pas original, pas que c'est surfait.
Enfin bref Smiley rolleyes
Bonjour,
Vu que je n'ai pas beaucoup de temps en ce moment, je ne peux faire que quelques modifications à chaque fois.
J'ai changé la puce et je l'ai mise avec le titre pour mettre en valeur l'ensemble (le fond de l'image est transparent donc IE ne va pas l'ionterpreter . Je changerai le fond plus tard). la couleur bleue faisait que l'oeil était trop attiré dessus et donc pas sur le titre étant donné que la puce était à droite. J'ai aussi changé la couleur du cadre de droite pour accentuer le contraste avec le texte.
J'ai également changé le logo comme dit précédemment.

Voilà dites-moi ce que vous en pensez.
Merci
Salut,

bon ca s'améliore bien pour les puces, je les trouves pas mal comme ca. Concernant le logo, je pense que ton lien doit bugger car il ne s'affiche pas.
En testant sur IE la taille du titre "Pourquoi ce site" à droite est énorme, alors qu'il a une taille correcte dans FF... je ne sais pas si tu l'as vu. Pour la couleur du bloc droit, je préférais le dernier vert foncé que tu avais mis.
merci merci,
ça s'améliore surtout grâce à vos suggestions.
Pour le logo c'est un oubli de ma part. j'ai oublié de mettre l'image sur le ftp Smiley murf
Pour les titre du bloc droit, je l'avai remarqué au départ mais j'ai oublié ce problème. merci de me le rappeler. Je sais pas pourquoi ça foire, mes unités sont en cadratin pourtant et j'utilise la meme taille pour les <h2> des titres du contenu et du cadre. Je vais voir s'il n'y a pas quelquechose qui bloque.

Ok pour la couleur du bloc, je vais remettre l'ancien vert. j'ia changé car j'avia pris en compte ta remarque sur le contraste texte/fond.

Bon je fait les modifications dès que possible, et après j'attaque le menu de navigation.

Merci de votre aide
Modifié par Ephagor (03 Jun 2006 - 00:05)
bon depuis le temps, j'ai apporté quelques modifications. j'ai utilié ce rose pour le menu poru apporter cette touche de couleur vive qu'il manque à mon site. si jamais elle vosu chique trop je peux toujorus la changer. j'avoue que j'ai vraiment du mal à finir mon site parceque je trouve toujours quelquechose qui ne va pas. surtout au niveau de l'utilisation des couleurs. Je me prend beaucoup la tête et j'ai parfois envie de tout recommencer à zero. c'est surement du à un certain manque de compétences dans le désign.
enfin je persévère malgré tout et j'espere bien finir ce site d'ici peu Smiley murf

bein entendu toutes vos suggestion sont la bienvenue.
Modifié par Ephagor (07 Jun 2006 - 17:18)
Salut,

Bon c'est encore un peu mieux, plus lisible.

Attention tu as un bug quand tu passe la souris sur le menu contact, ca fait descendre le cadre à droite.

Concernant ce cadre, je pense que s'il était d'une autre couleur (le fond vert initial par exemple) ca le détacherai du reste du contenu. Après cela je pense qu'il ne manquerait plus grand chose pour que ce soit fini.
Pages :