[amateur] Valentin N. : nouvelles couleurs.

Bonjour,
Je soumets mon site ( http://dsofficial.free.fr/public/ ) à la critique, désirant avoir des avis sur un peu tous les aspects (code, etc.) mais notamment sur l'esthétique et l'ergonomie (lisibilité entre autres).

Précisions supplémentaires :
* Sur la page portfolio, je compte mettre le menu des rubriques (derniers travaux, photoshop, web...) sur l'espace blanc, à la place du texte de présentation (Hello!...) et des trois images. Donc pas de panique si le portfolio est placé encore trop bas.

* Sur la page contacts, je compte mettre plus tard un contenu spécifique de la page, toujours à la place du texte "Hello..." et des 3 images...

Mais en fait c'est plus sur la page d'accueil (sur laquelle on atterrit) que j'attend de la critique.

Je demande l'avis particulièrement sur les couleurs et les typographies utilisées. Mon ancienne page utilisait des couleurs qui rendait le site plus doux pour les yeux (seule la couleur du haut ainsi que la typographie du gros texte ont été changés), mais les couleurs ne me convenaient pas trop, d'où le changement de couleurs noir et blanc, qui risque peut-être de poser des problèmes de confort.

Merci d'avance.
Modifié par darkstar2023 (20 May 2010 - 04:46)

Salut,

Attention au soulignement en pointillés pour les liens, car c'est le rendu par défaut (généralement assez respecté) utilisé sur les balises <acronym> et <abbr> pour les différencier des liens.

Attention aux interlignes des éléments soulignées, la date presque en contact avec le contenu de la troisième des flash actus.

Tes logos de validations sont complètement sur la gauche. De toute manière ça ne sert que pour l'égo, autant les retirer.

Niveau code tu pourrais l'alléger encore, en virant quelques< div> dont tu devrais pouvoir te passer, ou quelques identifiants et classes.
(selectionner #expo li au lieu de li.page1 par exemple, vu que tous les <li> en sont dotés.)
La sélection est puissante en css, autant en profiter pour alléger le code au maximum et ne classifier et identifier les éléments que quand il n'y a plus d'autres choix.

La méta keywords pourrait être supprimée sans remord pour alléger le code.
Modifié par Mikachu (20 May 2010 - 10:15)

Bonjour,

wooebmaster a écrit :
c'est plutôt une question indirecte à la communauté : sommes-nous en droit d'écrire un copyright si nous ne l'avons pas.

En France ou en Belgique, non, on ne peut pas vraiment. Copyright est un concept américain qui demande de payer des droits (ceux du copyright de Copyright ^^; ) de déclaration des créations.

Par chez nous par contre, le droit d'auteur est présent pour chaque création (photo, dessin, texte...) sans qu'il ne soit nécessaire de la déclarer (par contre en cas de litige cela peut-être pratique d'avoir de quoi prouver la paternité d'une oeuvre).

Normalement, il faudrait indiquer "Tous droits réservés" et non "Copyright" (qui n'as du coup, aucune valeur en France). Bien que la mention ne soit pas absolument nécessaire, puisque les droits appartiennent à leur auteur dès la création de l'oeuvre.

Mes travaux ne sont pas déposés ou déclarés, ils sont juste à moi d'après le droit français.

* Pour l'image-texte "Hello!..." j'utilise une image pour rendre la typographie exacte (Rockwell et Grandesign Neue serif) et effectivement éviter le crénelage (aliasing).

* Pour les icones mail et FB, je penserai effectivement à les changer parce que ça fait tâche actuellement sur le design.

* Alors revenons-en à cette palette de couleurs : j'ai effectivement une préférence restante pour l'ancien design mais je trouve personnellement que les couleurs sont trop nombreuses : le marron a l'air de trop et ne rappelle pas la couleur de la police en blanc (ou plutôt gris clair) en dessous.

J'ai essayé de garder le jaune sur l'adaptation en blanc mais le jaune sur du blanc c'est limite imperceptible. Le rouge donne effectivement une sensation de froid tout autour, et je ne sais pas si le bleu serait mieux.

Dernière chose, je ne sais pas comment utiliser les palettes de couleurs (proposés par de nombreux sites).

Néanmoins je reste ouvert à toute proposition ou débat sur le sujet car c'est ce qui m'intéresse particulièrement.

--- Code ---

* La feuille CSS est effectivement un peu lourde. C'est du aux répétitions de classes et d'ID et des jeux d'héritages, certaines classes sont effectivement caduques, parce que ce sont des traces de mon ancien code source qui m'a servi à faire le design précédent (les deux design ont l'air pareil mais la structure HTML est bien différente, et les changements de structures impliquant des bouts de code laissés)
Il est vrai que je devrais un de ces quatre nettoyer ce framework XHTML/CSS fait maison

* Les liens de validation sont là plutôt pour un aspect pratique, je passe mon site au validateur après chaque mise à jour, ca m'évite de mettre le validateur en favoris et ils sont justement mis dans le coin de l'écran pour qu'ils soient visuellement séparés du reste du document.

* le code html n'est pas très optimisé (beaucoup de <div>) à cause de la structure même : largeur de la page fixe mais parties blanche et noire prenant toute la largeur de l'écran, d'ailleurs le positionnement en float n'aide pas trop à l'optimisation (j'ai choisi de ne pas encore utiliser les propriétés display:inline-block; pour le manque d'implémentation).

Et merci pour vos premiers retours.
Modifié par darkstar2023 (21 May 2010 - 07:40)

darkstar2023 a écrit :
Le rouge donne effectivement une sensation de froid tout autour, et je ne sais pas si le bleu serait mieux.

Je peux pas laisser passer ça !!! Le rouge est une couleur CHAUDE, en aucun cas froide !! C'est d'ailleurs pas pour rien qu'on met une pastille rouge sur les robinets d'eau chaude, et une bleue sur ceux d'eau froide !!
Donc récapitulatif :
- couleurs chaudes : rouge, orange et jaune
- couleurs froides : vert, bleu et indigo

Je disais que les éléments rouges donnaient une sensation de froid autour des éléments, que la chaleur du rouge pouvait rendre frois le gris très clair autour.

Ceci dit je ne sais pas si opter pour un fond bleu clair (un peu comme la plupart des design proclamés "web 2.0", mais puisque j'ai employé le mot "la plupart", un fond bleu ferait tellement banal.)

Mikachu a écrit :

Je peux pas laisser passer ça !!! Le rouge est une couleur CHAUDE, en aucun cas froide !! C'est d'ailleurs pas pour rien qu'on met une pastille rouge sur les robinets d'eau chaude, et une bleue sur ceux d'eau froide !!
Donc récapitulatif :
- couleurs chaudes : rouge, orange et jaune
- couleurs froides : vert, bleu et indigo

Cher mikatchu, un peu de théorie de la couleur apprend qu'il existe des rouges froids comme des bleus chauds, ce n'est pas si arrêté que cela. J'etais comme toi persuadé de la regle universelle, bleu = froid et rouge = chaud.
Tout dépend des pourcentages de primaires dans les couleurs. Il est evident qu'un bleu Klein est bien plus froid qu'un bleu roi.
Modifié par JohnNada (20 May 2010 - 20:06)

Mikachu a écrit :
Salut,


Rassure moi, tu t'es pas inscris sur le forum juste pour me dire ça j'espère, car tu perds un peu ton temps...

Dans l'absolu les couleurs que j'ai citées précédemment sont bien froides pour le vert, le bleu et l'indigo, et sont bien chaudes pour le rouge, l'orange et le jaune. Mais bien sur, relativement entre deux couleurs, il ne s'agit pas d'un système binaire, une couleur froide peut être plus chaude qu'une autre... Mais ajouter 10% de magenta à une couleur avec 90% de cyan n'en fait pas une couleur chaude pour autant, Et si tu rajoute 90% à la couleur, on sera dans un violet, et c'est le pourcentage de jaune qui jouera dans la balance pour dire s'il est plutôt chaud ou froid. Et forcément si à cette même couleur tu supprime 80% de cyan alors que tu rajoute 90% de magenta, ce ne sera plus la même couleur, qui deviendra forcément une couleur chaude...

Meuh nan voyons je viens en paix moi !!!

Je me suis inscrit aujourd'hui et c est bien mon premier message, mais ce post n'en est pas la raison. Tu es donc rassuré.

Ensuite, je ne doutes pas des tes capacités en matière de colorimétrie, mais je voulais eviter aux gens moins calés de réfléchir de la maniere rouge = chaud, bleu = froid, car c'est quand meme plus complexe, il y a le phénomène de relativité inter couleurs et tout et tout. En harmonie musicale d'ailleurs c est kif kif, c est marrant.

Sur un fond blanc, un objet rouge qui vire au bordeaux n'offre pas la même sensation qu'un rouge virant à l'orange.
Mis à part ça, j'ai éclairci encore le fond gris clair de son site car j'ai découvert que c'est celui-ci qui était responsable de l'ambiance "polaire".

PS. Pour la couleur verte c'est particulier, tout dépend de quel vert on parle.

EDIT : j'ai fait un style tout blanc pour mon site ( http://dsofficial.free.fr/public/new_theme3/?style=99 ) qu'en pensez-vous ? Par rapport au style par défaut ? Personnellement je lui trouve un côté minimaliste mais pas mal du tout et bizarrement il a l'air moins froid...
Modifié par darkstar2023 (21 May 2010 - 06:32)

Finalement j'ai adopté une dernière palette (beige, rouge vif, noir) et en allant sur Adobe Kuler, je suis tombé par hasard directement sur la palette qui coïncidait avec mon site !

Voici l'url pour le retrouver
http://kuler.adobe.com/#themes/search?term=sea%20wolf

Salut,

darkstar2023 a écrit :
EDIT : j'ai fait un style tout blanc pour mon site ( http://dsofficial.free.fr/public/new_theme3/?style=99 ) qu'en pensez-vous ? Par rapport au style par défaut ? Personnellement je lui trouve un côté minimaliste mais pas mal du tout et bizarrement il a l'air moins froid...

C'est moins froid c'est sur. Par contre au niveau contraste, on a tendance à plus trop regarde la partie supérieure qui fait un peu chargée et moins contrastée, alors que la partie inférieure attire plus l'intérêt car elle est bien plus aérée et contrastée.

darkstar2023 a écrit :
Finalement j'ai adopté une dernière palette (beige, rouge vif, noir) et en allant sur Adobe Kuler, je suis tombé par hasard directement sur la palette qui coïncidait avec mon site !
Voici l'url pour le retrouver
http://kuler.adobe.com/#themes/search?term=sea%20wolf

C'est effectivement une belle combinaison de couleur, à voir ensuite dans quelles proportions. Car si cela fonctionne bien en carrés de surfaces équivalentes, il faudra voir au final quelles place occupera chacune d'entre elle dans la maquette de ton site.

JohnNada a écrit :

Cher mikatchu

@Valentin Alors t'as 20 ans ou 21? (les 2 âges sont présents sur la même page)

Il te manque un peu d'espace de respiration en dessous et en dessous de tes 3 vignettes.
> Le décrochage droite de "Derniers travaux" et le maronasse des intitulés ne sont pas très heureux.
> Tes justifs de colonne (3 colonne du bas) sont trop étroites et ton corps de texte (et l'interlignage) est un peu trop important.
Plus tu as une justif (dans le sens largeur de colonne) courte, plus l'interlignage doit être réduit (1.3em devrait être la limite à ne pas dépasser ici).

S'agissant de ton logotype, très honnêtement tu t'es embarqué dans une complexité typographique dont la bonne composition demande des compétences pointues en typographie/calligraphie que tu n'as pas et qu'une majorité de graphistes n'ont pas.
Pour le dire sans détour, ton logo n'est pas du tout équilibré, ça ressemble pas à grand chose en l'état (malgré les améliorations chromatiques que tu y a apportées)
Je te conseil de te reporter sur une typo plus simple à employer et plus surtout à ta portée
Modifié par Hermann (28 May 2010 - 19:01)

* arf, j'ai oublié de mettre à jour mon texte de présentation

* les tailles de police ont été rectifiées, c'est effectivement mieux globalement, cependant je trouve que ça risque d'être un peu moins confortable à l'oeil à cause de la faible hauteur d'x de la police (Georgia).

* concernant le logotype, je chercherai effectivement une fonte plus classique, mais je n'ai pour le moment pas trouvé de fonte qui ait un effet un peu recherché, tout en s'intégrant bien au site (à priori une égyptienne ferait l'affaire mais je crains que ce soit "lourd")

Et merci pour ces remarques !
Modifié par darkstar2023 (29 May 2010 - 19:28)