[Intermédiaire] Nouvelle version de Web France Graphisme

Bonjour à toutes et à tous.

Après une première version de Web France Graphisme dont l'aspect graphique avait été fortement critiqué (un comble pour un site qui souhaite promouvoir le web design francophone ! ), voici une seconde version qui essaye de tenir compte de toutes les remarques qui ont été faites, à la fois sur l'aspect visuel mais également ergonomique.

Toutes les critiques sont évidemment les bienvenues, et également les conseils et idées en matière de développement pour mobile, car ce site n'est pas encore optimisé pour les mobiles (même si des tentatives ont été mises en place).

Url : www.web-france-graphisme.fr

Merci de vos retours !
Modifié par @WebFranceGraphi (10 Apr 2012 - 11:21)

Bonjour,

Je n'ai pas vu la première version (ou je ne m'en souviens pas) mais celle-là a pas mal de problèmes. Sans rentrer dans les détails:

- C'est trop surchargé : Un bon graphisme met des éléments qui ont du sens, sinon ce n'est que de la déco... Pourquoi des flammes ou des sortes de symboles tribaux ? et pourquoi cette mosaïque très éprouvante en bas de page et qui ne sert à rien ? D'autant plus que ce site devrait avoir pour but de mettre en valeur des travaux d'autres personnes, non pas le tien.

- Gestion des espaces : Il faut absolument mieux gérer tes espaces, mettre des marges internes et externes un peu partout. Nombres de textes sont illisibles et collés à d'autres éléments. Globalement, on se sent enfermé.

- Mise en page: Pas vraiment de hiérarchie de contenu, peu de cohérence des tailles utilisées, le tout ne reposant pas sur une grille logique, ça rend le tout un peu incohérent.

Du coup il y a pas mal de boulot si tu ne veux pas faire pâle figure par rapport à quelques sites que tu présentes.

kustolovic a écrit :
C'est trop surchargé

+1

On trouve aussi des menus conçus comme ça :

<ul>
<a href="contact.html"><li>Contact</li></a>
…
</ul>

Ça ne devrait pas plutôt être

<li><a href="contact.html">Contact</a></li>

Salut

Je ne connais pas non plus l'ancienne version de ce site.
En arrivant sur cette nouvelle mouture, je n'ai pas été emballé je l'avoue.
J'ai fais quelques pages mais cela ne m'a pas donné envie d'y revenir.
Le graphisme est en effet trop surchargé et compacté. "Ca manque d'air!"
Mine de rien, cela a des répercussions sur l'ergonomie (notamment, le menu déroulant du lien "Recherches": Il m'a donné une sensation de "mal à l'aise").

Bonne continuation

Merci infiniment à vous tous pour avoir consacré un peu de votre temps à analyser ce qui pose problème sur ce site.

Vos conseils vont être très utiles car un manque évident de recul m'empêchais de voir correctement ce qui n'allait pas.

La première version qui date d'août 2011 était, comment dire... encore plus désordonnée avec des effets de surcharge encore plus prononcés !

Elle n'avait pas eu le temps d'être soumise aux critiques ici, car elle recevait déjà bien des reproches via la page contact.

N'hésitez pas à continuer de donner vos critiques, car au moins ici, elles sont constructives. merci beaucoup.

Bonjour à tous,

Après avoir suivi bon nombre de vos conseils, voici la dernière version contenant les améliorations que j'ai eu le temps d'apporter.

Merci encore pour vos avis.

[Modération : l'URL se trouve déjà dans le premier message]
Modifié par Laurie-Anne (08 Oct 2012 - 15:13)

Alors pour ma part, je trouve le design un peu chargé (ca serait pas mal d'aérer un peu le tout) et peut-être un peu trop carré, mais ca j'imagine que c'est voulu.

Sinon, je n'aime pas trop l'ombre coupée (à gauche et à droite) derrière le slider.

Pourquoi créer un lien dans le menu pour le redimentionner sur smartphones, tu peux le faire directement via les Media Queries: http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Par contre niveau code, j'ai carrément haluciné, 540 erreurs, sérieusement ?
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.web-france-graphisme.fr%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Et pour l'optimisation, GTmetrix n'est pas plus élogieux: http://gtmetrix.com/reports/www.web-france-graphisme.fr/fiD0mQKN

Bref, encore pas mal de boulot en vue
Modifié par LuciferX (08 Oct 2012 - 22:27)

Bonjour LuciferX,

Merci pour ton avis, et je suis bien d'accord avec toi. Je travaille donc sur une "aération" plus visible et un adoucissement des lignes.

Quant aux médias queries, je suis en train de concevoir une version pour mobile qui soit vraiment adaptée, mais faute de temps pour le moment, j'ai mis ce lien de redimensionnement pour smartphones pour ne pas limiter la navigation. Mais on est bien d'accord que ce n'est pas définitif.

Pour les erreurs, c'est "normal" ^^. Je n'ai pas eu encore le temps de faire le ménage et il reste plein de balises vides entre autre, qui créer cette redondance d'erreurs, mais bien évidemment, ça ne va pas rester comme ça.

Sinon ton site a un design très plaisant et semble abouti, donc si tu veux qu'il fasse parti de ma galerie, fais-le moi savoir.

Salut,

Je pense que des améliorations graphiques seraient les bienvenues...

Le thème général est vraiment chargé, les informations sont trop nombreuses, il y a des blocs dans tous les sens...

Coté code :

tes balises IMG sont pas de alt, le width et le height ne sont pas déclarés (tu obliges le navigateur à calculer, donc tu réduits les perfs du site)

des <ul> sans <li>... tu oublies de fermer tes balises le 3/4 du temps <img>,<input>, <a> sans </a>

Bref ça fait très cra cra comme code...

Tu devrais prendre un graphiste pour te faire un joli theme car là c'est pas très beau et surtout l'utilisation d'effet, de font exotiques mal gérés rend la chose indigeste.

Bon courage pour la suite

Pour l'inspiration, perso je préfère me tourner vers des galeries css tel que http://www.csselite.com par exemple ou http://www.deviantart.com

Bonjour,

Je me permets d'apporter quelques critiques sur ton site qui semble manquer d'harmonie:

-Sur le choix des couleurs : la salamandre violette n'a pas sa place. Le fond du header (hachuré bleu et noir) surcharge le haut et ne s'harmonise pas avec le bleu ciel du content. Le texte en contour rouge du haut ("web france graphisme.fr...) est vraiment à changer absolument car il jure beaucoup.

-Sur le plan de l'agencement des "cadres" principaux, je trouve que la disposition est assez intuitive surtout concernant la partie principale de la page d'index. L'ensemble reste surchargé et le cadre "partages" ne s'intègre pas avec l'ensemble de même que le cadre "réclame" du bas arrive comme un cheveu sur la soupe.

-Concernant le choix du texte: je trouve que les légendes de chaque site ne sont pas exploitées puisque tu indiques systématiquement "css" et les mentions "clair" et "sombre" m'ont paru peu explicites même si j'ai compris en cherchant. La description de ton site devrait intervenir avant le menu horizontale et être répartie sur toute la longueur de ta page.

-Sur le plan du design: oui! il y a trop de cadres avec des choix de couleurs, de bordures et d'ombrages disharmonieux. Tu devrais t'inspirer de sites existants pour construire ta charte graphique.
Regarde ce download gratuit assez complet sur l'harmonie de conception; ça peut d'ailleurs te servir de base pour l'avenir : http://www.seinemaritime.net/fr/index.php?idR=331.
Le cadre partage est à revoir avec des transitions sur le survol des icones et un choix plus glossy de ces dernières à partir de bibliothèques existantes. Voici par exemple un effet de survol dont tu pourrais t'inspirer: http://matthecat.com/blog/playground/fonducouleurs.html (il y a le tuto qui va avec).

-Sur le plan du code: je n'ai pas trop creusé mais déjà tu as des débordements qui apparaissent pour le cadre de "description" et le cadre "recherche"...
En tous cas j'ai ajouté ta page dans mes favoris car ta base de données m'intéresse.

Bon courage tu es sur la bonne voie.
Modifié par rodolpheb (13 Oct 2012 - 09:36)

Merci à tous pour vos avis.

Je suis d'accord avec vous sur beaucoup de points, tant sur la plan de l'harmonie du design que sur la structure du code. D'ailleurs je travaille actuellement sur le ménage à faire dans le code, qui est resté en désordre depuis mes dernières retouches, faute de temps devant moi pour enlever les parties devenues inutiles.

Du point de vue du design, la recherche d'équilibre entre les différentes parties du sites, leurs couleurs et leurs formes, est un vrai combat pour garder à la fois du style et la lisibilité des informations vitales.

Je vois trop souvent à mon goût aujourd'hui, des sites simplifiés à l'extrême dans leurs lignes pour permettre d'être lu sur tous les supports, au détriment d'un design plus fouillé et d'une ergonomie plus instinctive, comme on pouvait encore le voir il y a quatre ou cinq ans.

Cette adaptation aux standards d'affichage pour mobiles oblige à cette simplification graphique (pas du code ^^) que je trouve regrettable, d'où mon souci de vouloir apporter à ce site un certain cachet "old school". Mais j'ai bien conscience d'atteindre mes limites techniques (et matériels) pour y parvenir tant la suprématie des standards actuels empêche une compatibilité aisée entre ces styles.

Merci @rodolpheb pour tes liens. j'avais déjà tenté ce genre d'effet sans succès à cause d'une incompatibilité sur tous les supports, m'empêchant d'atteindre le résultat souhaité (en javascript). Je vais donc regarder ça de plus près.

En tout cas merci pour vos encouragements, mon souhait sincère de vouloir mettre en valeur le web design francophone (que je trouve très largement sous estimé par rapport à la production anglophone, qui mise surtout sur l'efficacité avant l'aspect artistique), me donne toujours autant l'envie de créer l'écrin qu'il mérite.

@WebFranceGraphi a écrit :
Merci à tous pour vos avis.

Je suis d'accord avec vous sur beaucoup de points, tant sur la plan de l'harmonie du design que sur la structure du code. D'ailleurs je travaille actuellement sur le ménage à faire dans le code, qui est resté en désordre depuis mes dernières retouches, faute de temps devant moi pour enlever les parties devenues inutiles.

Du point de vue du design, la recherche d'équilibre entre les différentes parties du sites, leurs couleurs et leurs formes, est un vrai combat pour garder à la fois du style et la lisibilité des informations vitales.

Je vois trop souvent à mon goût aujourd'hui, des sites simplifiés à l'extrême dans leurs lignes pour permettre d'être lu sur tous les supports, au détriment d'un design plus fouillé et d'une ergonomie plus instinctive, comme on pouvait encore le voir il y a quatre ou cinq ans.

Cette adaptation aux standards d'affichage pour mobiles oblige à cette simplification graphique (pas du code ^^) que je trouve regrettable, d'où mon souci de vouloir apporter à ce site un certain cachet &quot;old school&quot;. Mais j'ai bien conscience d'atteindre mes limites techniques (et matériels) pour y parvenir tant la suprématie des standards actuels empêche une compatibilité aisée entre ces styles.

Merci @rodolpheb pour tes liens. j'avais déjà tenté ce genre d'effet sans succès à cause d'une incompatibilité sur tous les supports, m'empêchant d'atteindre le résultat souhaité (en javascript). Je vais donc regarder ça de plus près.

En tout cas merci pour vos encouragements, mon souhait sincère de vouloir mettre en valeur le web design francophone (que je trouve très largement sous estimé par rapport à la production anglophone, qui mise surtout sur l'efficacité avant l'aspect artistique), me donne toujours autant l'envie de créer l'écrin qu'il mérite.

Heu... ton point de vue sur l'adaptation des design est fausse, tu peux très bien avoir un design travaillé sur écran et un truc soft sur mobile, ça n'a rien à voir... quant aux designs qui sont épurés cela relève des tendances web du moment... en 1998 t'avais des gifs animés partout, en 2003 vers là t'avais des sites massifs très travaillés visuellement et depuis quelques années certains optent pour des choses légères, clean.

Sur ta dernière partie, si ton souhait est vraiment de vouloir mettre en avant le web design français tu vas avoir besoin de certaines bases en typographie (ce qui relève du graphisme en général), d'un cours de couleurs et de l'utilisation des zones blanches/noires, de débroussailler ton code, de ne pas avoir des idées reçues sur les appli écran/mobile, de maitriser ton sujet et d'en faire profiter à ta communauté etc.

Bon courage car y'a du taf