Clb56.fr nouveau design en cours

Salut tout le monde,

En général je profite des vacances pour essayer d'avoir une crise d'inspiration.

Là je suis parti de ce que j'avais fait pour ma galerie photos.

C'est vraiment du travail en cours, je ne me suis pas encore préoccupé de pépé IE6 mais ça ne devrait pas être trop compliqué (en dehors du bug récurrent que je me traine depuis la version actuelle).

Le nouveau design est accessible à partir de cette page :
http://www.clb56.fr/essais_design/

Il suffit d'activer le lien "thème orange"

Alors vous en pensez quoi ?

merci
Modifié par clb56 (27 Dec 2006 - 01:00)

Je le trouve sympa

Alors, ce que je peux lui reprocher :
- Certains liens (en haut et en bas) ont un bord en bas et à droite, ce qui ne permet pas d'être sur au premier coup d'œil que ce sont des liens. Ce n'est pas vraiment un problème, mais je pense qu'il leur manque une propriété a:hover, sinon on a un instant d'hésitation en passant dessus. (Comment ça, c'est du chipotage? )
- Ton styleswitcher, ta recherche et tes raccourcis sont en JavaScript, est-ce la meilleure solution?
- Dans ta page plan du site, tu as des boites, et ces boites ont une ombre. Cette ombre, je la trouve moche À mon goût, elle fait trop pâté, tu devrais la centrer par rapport à l'objet (pour plus de stabilité) et l'éclaircir.
- Ton formulaire de contact est encore à styliser (bleu à la place de vert?).

Je pense que j'ai tout dis, excepté ces petits trucs, il me plaît vraiment
(Et j'aime beaucoup retailler la fenêtre )

Pas mal, j'aime bien... C'est assez sobre mais ça laisse pas vide

Ceci dit, j'préfère l'actuel, sans aucune hésitation...

SolykZ a écrit :
Ceci dit, j'préfère l'actuel, sans aucune hésitation...

Héhé, moi c'est justement le contraire ^^ Je trouve que l'autre a un petit quelque-chose de vieux web, dépassé, tandis que l'orange a l'air plus novateur, tout en gardant un air de site accessible (y'a certains sites où on remarque ça au design )

J'sais pas... Fin niveau choix des couleurs, ce sont vraiment deux couleurs que je n'aime pas beaucoup. Ceci dit, je ne suis pas le centre du monde ^^ Peut-être que des tons plus pastels seraient moins tape-à-l'oeil ?

+1
Comme quoi, chacun ses goûts

Oui, c'est évident ! En plus j'imagine bien qu'il est impossible de faire un design qui ne nous plait pas d'abord ! Personnellement, j'suis pas trop doué pour ça, mais dès que j'obtiens un résultat qui me plait, je garde tel quel ! Et au fur et à mesure des idées, j'avance et j'améliore... T'es passé sur mes blogs, tu remarqueras qu'ils n'ont de différent (graphiquement parlant) que les couleurs !

bonjour à tous ...

bon déjà j'aime vraiment bien (la version orange ) principalement la mise
en page sobre et lisible ., l'accessibilité des informations , la navigation bien
pensée ou l'on s'y retrouve facilement.

très chouettte également la "boite" de recherche
il y a juste le gris de "l'encart" à haut à droite qui me semble un peu ... gris (je sais pas trop définir ..peut etre du à la bordure .... un rien quoi !)

Le lien sur "include" n'est pas fonctionnel ( zut il m'interessait vachement !)

pour faire le chercheur de poux , ta rose détourée est un peu grande par rapport à la page .
Et les 3 lignes horizontales la la bannière de titre me semble un peu moins espacée que celles verticales ( mais est-ce un effet recherché )

Enfin un site qui ne succombe pas à la surrenchère d'effets de reflets , de 3D et d'animation 'foires de Paris " dans tous les sens , et qui en plus de la forme s'occupe aussi du contenu ...

voilà que du bien !

Salut,

C'est plus clair comme ça, car les couleurs délimitent plus simplement les zones du site.

Je consulte ton site depuis mon mac.
Le rapport entre les couleurs ne me semble pas tout à fait bien choisi : le bleu électrique et l'orange ont des valeurs de gris assez proche (faible contraste lumineux entre les deux) du coup la délimitation entre les deux semble "vibrer" quand on regarde le bord du cadre du menu. Ca fonctionne mieux avec le cadre en haut à droite, car il a un détourage avec un filet plus clair qui supprime cet effet de vibration.

Par contre, pourquoi des coins arrondis et des coins carrés ?
Pourquoi les bordures inférieures et droites des liens sont elles jaunes pâle pour les liens du haut, et blanches pour les liens du bas ?
J'harmoniserai un peu tout celà si j'étais toi. Tout à base de coins arrondis (pour les deux blocs bleu, et pourquoi pas avec un détourage comme celui du haut droit actuel), et j'utiliserai un background extensible faisant une forme arrondie pour les liens, au lieu de la border à droite et en bas. Ainsi ca serait plus élégant, et ca casserait moins la lecture.

Je pense que le fil d'ariane est un peu trop intégré au document, peut être un peu de marge le rendrait plus visible. D'ailleurs pourquoi ne pas faire une partie supérieure du cadre blanc dans un jaune à mi chemin entre le blanc et l'orange dans lequel s'intégrerait le fil d'ariane ? Cela permettrait de le séparer visuellement du contenu et ainsi le rendre plus facilement identifiable par la couleur.

Je pense qu'il y'a des choses que tu n'as pas modifié de l'ancien design, comme le moteur de recherche, le formulaire de contact, ou encore les blocs du plan de site (l'ombre est effectivement un peu trop prononcée comme il te l'a été dit précédemment).

Le titre de son site, traité si légèrement graphiquement, laisse presque pensé qu'il s'agit juste d'une boite en haut à gauche dans laquelle il y'a de l'information, mais pas forcément un titre. Je pense qu'il faudrait peut être travailler un peu cette zone, sans forcément aller dans l'excès, par un peu de volume et de couleur rendant cette zone de titre plus explicite.

Autre chose, je ne sais pas si je te l'avais dit auparavant, tes pages possèdent un lien redondant vers le plan de site, ce qui en soit n'est pas forcément très géneant car l'un est en haut de document l'autre en bas, mais l'intitulé est différent, ce qui peut porter à confusion. Harmoniser les deux serait peut être mieux.

Voilou

Mikachu a écrit :
Je consulte ton site depuis mon mac.
Le rapport entre les couleurs ne me semble pas tout à fait bien choisi : le bleu électrique et l'orange ont des valeurs de gris assez proche (faible contraste lumineux entre les deux) du coup la délimitation entre les deux semble "vibrer" quand on regarde le bord du cadre du menu. Ca fonctionne mieux avec le cadre en haut à droite, car il a un détourage avec un filet plus clair qui supprime cet effet de vibration.

Personnellement, j'aime assez (je trouve ça plus clair que l'ancien), mais l'harmonie des couleurs me semble également à revoir. Je ne sais pas trop ce que ça donne sur un écran Mac, mais sur le mien à la fois on a le regard attiré par ces couleurs plutôt sympa, et à la fois c'est presque gênant. Le bleu me semble très bien, mais le orange clashe un peu trop.
On peut tenter une teinte plus claire : rgb(255, 200, 100)
ou plus foncée : rgb(200, 120, 60) (mouais, pas super satisfaisant celui-là...)
ou encore désaturée : rgb(200, 180, 150)
Enfin je pense qu'il y a quelque chose à faire, même si effectivement la bordure entre le bleu et le orange pour le bloc en haut à droite atténue un peu l'effet (et ça picote moins les yeux).

Attention à ça :

body {
	min-height: 100%;
	padding: 20px 6%;
}

Ça fait une hauteur de body à 100% + 40px minimum, et donc une barre de défilement inutile quand le contenu de la page est limité.

Salut à tous et merci pour vos messages,

J'ai commencé à prendre en compte certaines remarques surtout concernant le parasitage par l'ancien design (plan site, formulaires...), dans un premier temps je me contente de neutraliser le rendu par l'utilisation de bordures grises pour délimiter les blocs.

Whisno a écrit :

- Certains liens (en haut et en bas) ... je pense qu'il leur manque une propriété a:hover, sinon on a un instant d'hésitation en passant dessus.

Oui c'est un de mes gros défauts que de ne rien faire tant que je n'ai pas d'idées (en général la rencontre entre un chipoteur et un psycho rigide c'est toujours très rigolo ).

Je met un petit effet d'hover par défaut en attendant mieux.

Whisno a écrit :

Ton styleswitcher, ta recherche et tes raccourcis sont en JavaScript, est-ce la meilleure solution?

Pour le styleswitcher je ne pense pas en faire un dispositif permanent du site donc il n'y a pas vraiment d'enjeu. mais je suis d'accord que pour un site intégrant le principe de multi design il vaut mieux une solution serveur comme celle présentée par Olivier. Pas tant d'ailleurs à cause des limites de javascript (l'accès au contenu n'est pas en jeu) qu'à cause du foutoir invraisemblable que peut fiche l'accumulation d'alternate stylesheet + commentaires conditionnels IE dans le <head> des documents.

Pour la recherche et les raccourcis je t'invite à tester cela js inactif... Tu vas être surpris

SolykZ a écrit :

Ceci dit, j'préfère l'actuel, sans aucune hésitation...

Ah, c'est dommage que tu ne dise pas pourquoi, ça m'aurait intéressé.

SolykZ a écrit :
En plus j'imagine bien qu'il est impossible de faire un design qui ne nous plait pas d'abord !

ben pour moi c'est le contraire, je n'ai jamais réussi à faire un design qui me plaise.

kzone a écrit :

il y a juste le gris de "l'encart" à haut à droite qui me semble un peu ... gris

Zut, je n'ai pas réussi à comprendre de quoi il s'agit pour l'encart gris.

kzone a écrit :

Et les 3 lignes horizontales la la bannière de titre me semble un peu moins espacée que celles verticales ( mais est-ce un effet recherché )

OUI

kzone a écrit :
ta rose détourée est un peu grande par rapport à la page .

Ouè, ouè... ça fait vraiment celui qui est trop content de son premier détourage et qui frime en voulant en mettre plein la vue au risque du mauvais gout...

...

... Tout moi quoi ...

... j'assume ... Na.

Mikachu a écrit :

Le rapport entre les couleurs ne me semble pas tout à fait bien choisi

AYAYAYAYE !!!!!!!!!!!!!!!!

Mikachu arrive...

J'ai lu très soigneusement, je vais prendre une grande respiration avant de répondre.

à mpop > j'ai lu aussi ton message (qui va beaucoup m'aider en fait tellement je suis désemparé dès qu'il s'agit de graphisme).

Pour le

a écrit :

Attention à ça :

body {
	min-height: 100%;
	padding: 20px 6%;
}

Ça fait une hauteur de body à 100% + 40px minimum, et donc une barre de défilement inutile quand le contenu de la page est limité.

C'est juste bien sur, mais en fait ça ne me tracasse pas trop
Modifié par clb56 (27 Dec 2006 - 16:17)

clb56 a écrit :
Ah, c'est dommage que tu ne dise pas pourquoi, ça m'aurait intéressé.

Bah c'est surtout les effets d'ombrage sur les bords arrondis et la transparence de la petite div à muguet... Le choix des couleurs aussi, c'était sobre, accordé... Que du bonheur en fait

clb56 a écrit :
ben pour moi c'est le contraire, je n'ai jamais réussi à faire un design qui me plaise.

Ca, c'est quand on est trop pointilleux et qu'on veut que tout soit parfait... Et comme le parfait n'existe pas, on est jamais content

clb56 a écrit :
ben pour moi c'est le contraire, je n'ai jamais réussi à faire un design qui me plaise.

Peut être que tu pense trop à la manière dont tu dois l'aborder ensuite en xhtml et css, du coup tu n'ose pas trop. A mon avis, tu t'ouvre un fichier photoshop ou équivalent aux dimensions minimum standards et tu attaque une première phase de divagation visuelle dans laquelle tu vas tester des effets visuels, des trucs et des grigris. Le but est d'en dégager un concept visuel général, un truc ou tu te sens bien sans pour autant te poser de question sur la "réalisabilité" (je sais ça n'existe pas dans le dico...) du site.
Ensuite tu attaque une deuxième phase, ou tu réfléchis à la manière d'adapter ces éléments en code, de manière virtuelle et toujours UNIQUEMENT devant photoshop. Cela va t'aider à adapter ton graphisme à un code propre et simple correspondant à la structure ton contenu.
Ensuite tu peux alors te prendre la tête pour faire en sorte que ta css te pourrisse pas ton design.
Tant que tu passe pas la première phase avec un design qui te plait, il vaut mieux continuer à divaguer jusqu'à ce que ca vienne.
Enfin ce n'est que mon humble avis

clb56 a écrit :
AYAYAYAYE !!!!!!!!!!!!!!!!
Mikachu arrive...
J'ai lu très soigneusement, je vais prendre une grande respiration avant de répondre.

Mouahahaha, inspirerais-je la peur à ce point ?? Je pensais être innocent moi
Bon et si t'es en train de préparer tes valises pour partir au venezuela, saches que je te retrouverai, ça sert à rien de fuir
Modifié par Mikachu (28 Dec 2006 - 21:28)

Mikachu a écrit :

Peut être que tu pense trop à la manière dont tu dois l'aborder ensuite en xhtml et css

Non pas du tout... (même si c'est ce que pense la plupart des graphistes qui me critiquent, à tort donc... Mais ce n'est pas ton cas, loin de là d'ailleurs je pense).

Mikachu a écrit :
A mon avis, tu t'ouvre un fichier photoshop ou équivalent aux dimensions minimum standards et tu attaque une première phase de divagation visuelle dans laquelle tu vas tester des effets visuels, des trucs et des grigris. Le but est d'en dégager un concept visuel général, un truc ou tu te sens bien sans pour autant te poser de question sur la "réalisabilité" (je sais ça n'existe pas dans le dico...) du site.
Ensuite tu attaque une deuxième phase, ou tu réfléchis à la manière d'adapter ces éléments en code, de manière virtuelle et toujours UNIQUEMENT devant photoshop.

Oui c'est exactement ce que je pense et je ne saurai dire mieux...

... On entre dans le détail...

a écrit :

une... ... phase de divagation visuelle

Ah ben voilà, on y est... C'est précisemment ce dont je pense que je suis génétiquement incapable... Autant je ne peux rester 40 secondes à écouter de la musique sans avoir 50 idées autant ça fait 46 ans que je suis doté du sens de la vue en étant complètement sec par rapport à ça. Et je me suis pris de passion pour la confection de sites internet... Faut il pas être bête ???

a écrit :

la manière d'adapter ces éléments en code, de manière virtuelle et toujours UNIQUEMENT devant photoshop.

10, 100, 1000 fois oui... Mais moi je ne peux rien parce que je n'ai rien à adapter...

Bon j'ai passer pas mal d'heures hier à prendre en compte tes remarques (et les pistes données par mpop)... J'ai encore ajouté des coins arrondis deci delà (pour les afficionados, il n'y a toujours pas de div vides )...

Par rapport aux suggestions de mpop j'ai coupé la poire en deux :
. éclaircissement du fond orange mais pas trop.
. assombrissement du fond bleu (je l'ai mis seulement sur le menu de gauche pour voir la différence).

c'est ici :
http://www.clb56.fr/essais_design/new_design/

C'est sur un document unique et pas sur l'ensemble du site.

Perso je trouve le résultat fade. En généralisant le bleu assombris ce sera peut être mieux.

Ouè, ouè le logo est de moi

Mikachu a écrit :

Bon et si t'es en train de préparer tes valises pour partir au venezuela, saches que je te retrouverai, ça sert à rien de fuir

Heu... ... Je ne voudrais pas t'inquiéter ... Mais Artie lis tout les messages de ce forum ... ... Et pour l'instant il est mort de rire ...

...

... En général c'est mauvais signe...
Modifié par clb56 (28 Dec 2006 - 23:03)

Bon, je n'y connais rien en couleurs, mais je trouve ça déjà beaucoup plus sympa maintenant.
En même temps, je suis fan des couleurs pastels, et j'ai tendance à en mettre partout, donc je suis pas très objectif...

Note : c'est important d'avoir des touches de couleur qui réhaussent l'ensemble, à partir des mêmes dominantes de couleur. Ici, on a par exemple le orange vif du logo qui rehausse le orange clair du cadre, et le blanc des blocs de code qui rehausse le rose pale du bloc de contenu.

Pour des pages qui n'auront pas de blocs de code, le résultat sera, je pense, moins équilibré. C'est peut-être un signe qu'il faudrait tenter d'utiliser ce code visuel (fond blanc, bordure grise) pour d'autres éléments (sur la page d'accueil, les pages d'index, etc).

Autre remarque : avec ce fond orange clair, le texte blanc va poser un problème de lisibilité. Et l'accessibilité, hein ?

Salut,

Bon ben j'ai généralisé les modifications à l'ensemble des pages, ça se passe toujours à la même adresse :

http://www.clb56.fr/essais_design/

Cette fois ci c'est le lien "thème orange bis" qu'il faut activer.

J'aurais une question. Sur la page d'accueil j'ai stylé les billets se trouvant dans la section ayant pour titre "Dernières nouvelles" avec un fond blanc et des coins arrondis. J'ai peur que le contraste de couleur avec le bloc parent soit insuffisant. Est ce le cas, je travaille à partir d'un très mauvais écran qui rend tout très sombre et du coup moi j'ai souvent l'impression que ça va alors que pas du tout.

Auriez vous une suggestion de couleur pour le fond de ces billets ? Le texte restant en noir a priori.

Merci
Modifié par clb56 (29 Dec 2006 - 12:29)

Salut,

a écrit :
Ah ben voilà, on y est... C'est précisemment ce dont je pense que je suis génétiquement incapable... Autant je ne peux rester 40 secondes à écouter de la musique sans avoir 50 idées autant ça fait 46 ans que je suis doté du sens de la vue en étant complètement sec par rapport à ça. Et je me suis pris de passion pour la confection de sites internet... Faut il pas être bête ??? rolleyes

Je ne pense pas qu'il s'agisse de bétise ou de génétique, seulement peut être une méconnaissance ou ignorance de la manière d'aborder la divagation. Tu dois être trop carthésien. Ce qui empèche de divaguer, généralement, c'est la censure.
On se fixe des barrières dans la création car on sait qu'on aura à en respecter par la suite. Notre logique nous pousse à les respecter directement pour économiser le temps d'adaptation ensuite.
Or pour être créatif, il faut justement ne pas se restreindre à une quelconque logique. Je sais ce n'est pas évident à faire. Il n'est pas évident de te dire comment y parvenir, car il n'y a pas vraiment de procédure établie. Ce n'est jamais immédiat, il faut souvent essayer des choses sans avoir peur d'en rater, les transformer, encore et encore, et au final il en découle un graphisme abouti qu'il est alors possible d'adapter.

Ceci dit, en matière de graphisme sur les sites internets, j'aurais toujours tendance à préférer utiliser un site simple et dépouillé graphiquement, plutôt qu'un site très recherché visuellement mais sur lequel aucune synthèse n'aurait été ensuite faite pour sa simplification.
Modifié par Mikachu (29 Dec 2006 - 12:51)

Re,

Je réalise que j'ai oublié de te parler de ta modification, et le temps que je poste ma précédente réponse tu as encore changé des choses.

Pour les remarques ci dessous, note que je vois ton site depuis mon mac et non mon pc.

Je trouve le contraste colorimétrique beaucoup mieux entre le bleu et l'orangé. Après pour les couleurs, le jaune est en effet un peu palichon, ceci dit tu l'as un peu enrichi avec l'orange vif de ton logo. donc il passe quand même pas mal.

Par contre ta couleur de fond derrière le billet de la page d'accueil, en regardant mon écran de différents angles, je perçois qu'il y'a une délimitation autour du billet, très légèrement contrasté, mais je n'aurais pas deviné qu'il y'en avait une si je ne l'avais pas su.
C'est le risque des couleurs pastels, qui sont très jolies sur pc en général, et qui donnent un site délavé sur mac. D'ou mon choix sur mon site ou mon blog d'utiliser au maximum des couleurs vives. Les couleurs pastels sont utilisées pour des mises en valeur de seconde importance.

Pour le logo, j'aime bien la forme, mais je pense que l'effet de calque d'ombrage (orange?) en amoindri l'impact.

Salut.

Je trouve ça agréable dans l'ensemble. Comme d'autres, j'attends impatiemment l'arrivée de quelques effets de survol supplémentaires.

Quelques petits détails :

* les puces du menu des rubriques sont un peu trop rapprochées des liens (en tous cas sous Opera 9), alors qu'il y a de la place pour aérer un peu ... et tant qu'à mettre le lien "actif" en évidence, pourquoi ne pas utiliser une image un peu moins austère qu'un carré blanc ?

* les liens de bas de page (Accueil, Plan site & Contact) en noir ne me plaisent pas du tout. Pourquoi ne pas utiliser les couleurs du reste de la page (du bleu ou de l'orange plus foncé, par exemple).

* Le pied de page occupe une hauteur assez importante, il n'y a pas moyen de mettre tous les liens sur la même ligne ?

* je trouve l'ombre portée sur le texte "Tests en développement web" légèrement trop appuyée ...