Bonjour,

Mon premier site ayant été un échec niveau graphisme (look terne et old school), j'ai tenté de corriger la donne sur le second.
Il s'agit d'un site pour un artisan joaillier qui souhaitait juste une présence sur le net afin que l'on puisse savoir ce qu'il fait et comment le joindre.
Cet artisan n'ayant aucun book, il m'a été très difficile de trouver le matériau nécessaire. J'ai donc fait avec ce que j'ai pu, et n'étant pas photographe, je me suis ardemment battu avec un nikon d300s afin qu'il n'ait pas ma peau.
Puis photoshop, html(5), css, js, php.

Le site est censé être responsive. Je dis censé n'ayant pas de tablette et qu'un seul smartphone.


Toute critique est la bienvenue.
Smiley sweatdrop
Modifié par Manhattan (11 Dec 2013 - 18:12)
Bonjour,

Tout d'abord félicitation pour ce site agréable. C'est simple, chaleureux, agréable à lire…

Quelques remarques au sujet du design et de l'ergonomie :

• Le logo est perfectible. Il y a un trou entre "18" et "95". La typo du logo est trop collée et/ou trop grande. Une typo sans serif moins brute pourrait peut-être d'avantage convenir. La ligne du bas n'est pas justifiée sur celle du haut. Soit les deux lignes sont justifiées, soit elles ne le sont pas du tout, il faut faire un choix.
Le logo doit être 100% CSS ou 100% image. Pas une partie en image (la date) et l'autre en texte CSS. Ici, le logo doit rester parfaitement bien balancé, donc une image. Ainsi pas de mauvaises surprises en fonction de l'interface de chacun.

Quand je réduis la largeur de la page, le logo va se coller tout en haut. C'est pas beau sur un écran d'ordinateur, beaucoup naviguent avec des largeurs restreintes même sur grand écran (pour afficher 2 pages ou faire autre chose). Idem pour tous les blocs dans les autres pages. On perd l'attrait de la mise en page avec le joli fond. En plaçant le logo au dessus du contenu cela devrait amoindrir cet inconvénient dans les petites diagonales. Il y a un juste équilibre à trouver.

• La photo de fond avec les outils est chaleureuse et très belle. Elle nous place dans un univers.

• Quand je passe sur les pages intérieures, il n'y a plus de logo, même pas le nom de l'artisan. On doit retrouver le logo sur toutes les pages, en plus petit par exemple entre le menu et le contenu. Sans cela, on est chez… personne.

• À tester, plutôt que de mettre certaines photos dans des ronds (L'histoire), placer les photos telles qu'elles, avec ou sans bordures, comme des trouvailles dans les archives, ça serait plus cohérent. Là le rond ne se justifie pas et il y a comme un trou entre celui-ci et le texte.

Dans la page "Création" les photos rondes avec les bagues, je ne suis pas fan non plus. Il y a un deuxième rond métallique à l'intérieur du rond, je ne comprend pas ce que c'est vu que c'est pas la bague vu du dessus (perdu, je viens de voir que c'est un bracelet, c'est pas clair sur la photo…). Je ne vais pas passer en revue toutes les photos, mais je pense que ce format rond cerclé de blanc apporte plus d'inconvénients que d'avantages. Il faut rester simple.
Les flèches avant/après sont très petites et grises, ça manque de lisibilité. Les photos en grisé en bas à droite ne sont pas indispensables.

• Avez vous essayé un fond transparent marron comme en haut, plutôt qu'en noir ? Peut-être que ça serait plus doux ?

• Ne jamais couper les noms propres sur 2 lignes, même composés. Il faut trouver des astuces pour que ceux-cis restent sur une seule ligne quelque soit le format de page (on peut jouer sur leur positionnement au commencement de la phrase…).

• Quand je suis dans une rubrique, par exemple "Créations", cela n'est mentionné nulle part. Je n'ai ni le nom de la bijouterie, ni le nom de la rubrique. Bref, en tant qu'internaute, je suis complètement perdu… Il manque aussi parfois des petits textes de présentation informatifs ou qualitatifs. Ne mentionner que les spécifications des bijoux sans rien d'autre (carats…) c'est trop peu. Ça donne une impression de "pas fini". Il faut faire rêver, on ne vend pas des bijoux comme des clés à molette.

• La rubrique "Bijouterie" me semble bien balancée comme toutes les pages en simple typo, graphiquement sobre et élégante (bien sûr il faut ajouter le logo comme sur toutes les pages… ).
Par contre certains menus ne sont pas assez explicites. Quand je clique sur "Bijouterie", sous menu "Savoirs", Je me retrouve avec une page qui m'explique l'or, le diamant, etc. Il faut trouver un titre plus clair, comme par exemple "Réparation" qui est plus clair. Plutôt que "Savoirs", inscrire "Matériaux" ou quelque chose de moins flou. "savoir" ça peut être les horaires, des anecdotes ou je ne sais quoi, c'est trop vague. Déjà qu'on a aucun repère pour savoir où on se trouve dans le site… "Savoir" devrait être coloré en haut, ça ajoute à la confusion.

• Trop de sous menus !!! C'est un site vitrine. Dans "Contact", on a "Nous situer" et "Nous écrire". Il faut tout regrouper (le contenu peut se dérouler), pas de sous menu pour "Contact". En y regardant d'un peu plus près "Savoirs" et "Prestations peuvent aussi être regroupés, pas de sous menu, juste "La Bijouterie" (si il n'y en a qu'une). Pareil pour créations, sauf si de nombreux produits doivent être ajoutés. Regrouper les bijoux peut être joli sur une page et simplifier le site. On est pas sur le site de La Redoute, mais plus sur un site "vitrine" si je ne me trompe pas.

• Mettre des articles dans les menus fait plus qualitatif, en plus de faciliter la compréhension. Surtout que c'est ce qui est fait sur le premier menu. Il faut l'appliquer partout.
Pour simplifier ça pourrait donner quelque chose dans le genre :
Notre Histoire - Le Joaillier (inclure L'Atelier en sou menu ou le placer à côté) - La Création - La Bijouterie - L'Horlogerie - Contact
Les sous menu sont presque dispensables. Je ne peux pas être plus précis vu que je ne connais pas votre client, mais il faut simplifier, ce qui valorisera le contenu et simplifiera la vie des internautes.

Il faut clarifier l'activité de l'entreprise. Simplifier les menus peut y contribuer.

• Sauf si on ne se souvient plus sur quel site on se trouve, le dessin de diamant qui ramène sur la home ne sert à rien. Une fois qu'on a vu la home quel intérêt d'y revenir quand le logo sera présent sur toutes les pages (ça c'est obligatoire). De plus un diamant n'est pas représentatif de toutes leurs activités.


Voilà pour moi en espérant que cela vous sera utile.
En attendant la suite. Smiley cligne


M.A.J. :
Je ne sais pas comment j'ai fait mon compte (peut être en réduisant et augmentant le format de page (L'histoire)), mais je me suis retrouvé avec la photo de fond justifiée sur la largeur de la page, ce qui a pour effet d'afficher la photo en répétition ! Graphiquement, là c'est le bug. Il semblerait que le fond ne reprend pas systématiquement sont format initial après avoir réduit la fenêtre. Il y a une solution à trouver dans les CSS pour que cela ne se produise pas. Au moins afficher le fond qu'une fois (sans répétition) avec une couleur de fond (le brun du haut ?). En cas de bug, il sera toujours moins gênant de voir du fond de couleur, plutôt que l'image qui se répète en hauteur.
Modifié par spongebrain (08 Jun 2013 - 11:54)
Merci beaucoup d'avoir pris le temps d'étudier le site.
Et merci pour les félicitations, votre avis faisait partie de ceux que je craignais le plus.
Au temps les connaissances en programmation peuvent s'améliorer, au temps le design possède une partie empirique qui peut nous faire sacrément défaut si l'on n'est pas du métier. Et je commençais à douter suite à mon premier site.

Concernant vos remarques :

a écrit :
Le logo est perfectible.

Ca, c'est certain lol
La bijouterie datant de 1895, j'ai pensé qu'il fallait absolument mettre cela en valeur.
Mais ensuite, j'ai eu un mal fou à trouver une typo adaptée.
Je vais donc repartir à la recherche de quelque-chose d'autre.

a écrit :
La ligne du bas n'est pas justifiée sur celle du haut

Les deux lignes sont centrées en fait. Je pensais qu'il était plus logique de centrer les 3 éléments (2 lignes + images).

a écrit :
Le logo doit être 100% CSS ou 100% image

On en revient au choix de la police. Je n'aime pas utiliser le travail d'autrui sans rémunération (même si ce site ne me rapporte rien), mais acheter une police uniquement pour 4 caractères m'embêtait quelque peu. Et je ne trouvais pas de police gratuite manuscrite apportant cette énergie... Je vais y réfléchir.

a écrit :
La photo de fond avec les outils est chaleureuse et très belle.

Merci. Un de mes rares non-échecs question prise de photo+retouche.

a écrit :
On doit retrouver le logo sur toutes les pages

C'est vrai. A revoir.

a écrit :
plutôt que de mettre certaines photos dans des ronds (L'histoire), placer les photos telles qu'elles

Pas faux. En y regardant à nouveau, dans le menu "La maison", c'est la seule page où j'ai fait des ronds alors que les 2 autres sont en rectangle...

a écrit :
Dans la page "Création" les photos rondes avec les bagues, je ne suis pas fan non plus. Il y a un deuxième rond métallique à l'intérieur du rond, je ne comprend pas ce que c'est vu que c'est pas la bague vu du dessus (perdu, je viens de voir que c'est un bracelet, c'est pas clair sur la photo…).

Là, on touche à une problématique que j'ai eue lorsque j'ai été confronté au fait que le joaillier n'avait pas de book.
Prendre une bague en photo macro lorsque l'on ne s'y connait pas, c'est hard, et j'ai fait ce que j'ai pu. Mais dans le cas d'un bracelet, ne trouvant pas d'angle montrant qu'il s'agit bien d'un bracelet (un jonc plus précisément), tout en faisant un zoom sur la monture (les pierres serties, le plus important), j'ai fait ce montage photo. Je ne sais pas comment je pourrais faire autrement. Parce qu'en vérité, photographe, c'est un métier, graphiste, c'est un métier, et si je devais me coller une étiquette, ce serait d'avantage la programmation Smiley smile Mais la conception web requiert souvent d'avoir un peu toutes les casquettes, alors on tente de s'adapter.

J'ai choisi des ronds pour les photos, car ayant choisi une ergonomie rectangulaire (les sections), j'ai voulu apporter un peu de rondeur pour contraster et ne pas faire un empilement de carrés. Bon choix ou mauvais...

a écrit :
Les flèches avant/après sont très petites et grises, ça manque de lisibilité.

C'est clair. Il faut que je trouve quelque-chose d'autre.

a écrit :
Avez vous essayé un fond transparent marron comme en haut, plutôt qu'en noir ? Peut-être que ça serait plus doux ?

Pas sur de comprendre, parce que mes sections centrales sont comme le menu : en noir avec une opacité à 0.6. Ce qui donne finalement la couleur, c'est ce qui apparaît en transparence.

a écrit :
Ne jamais couper les noms propres sur 2 lignes, même composés

Vrai. Jvais corriger ça.

a écrit :
...Je n'ai ni le nom de la bijouterie, ni le nom de la rubrique...

Il manque en effet un fil d'ariane.

a écrit :
Il manque aussi parfois des petits textes de présentation informatifs ou qualitatifs. Ne mentionner que les spécifications des bijoux sans rien d'autre (carats…) c'est trop peu. Ça donne une impression de "pas fini".

Oui, si on regarde les sites des joailliers de la place vendôme, ils donnent des noms à leurs bijoux, voire une histoire à chacun d'eux. je n'ai pas ce matériau de la part du joaillier qui reste un joaillier de province, qui crée des bijoux uniques mais n'a peut-être pas cette approche "parisienne" ou "de luxe" Smiley smile A voir avec lui.

a écrit :
Quand je clique sur "Bijouterie", sous menu "Savoirs", Je me retrouve avec une page qui m'explique l'or, le diamant, etc. Il faut trouver un titre plus clair...

D'accord. Je voulais cette notion de savoirs, consistant à apporter aux gens quelques connaissances relatives aux questions qu'ils se posent en bijouterie, voire certaines choses qu'ils pensent connaitre. Je vais regarder les synonymes pour le terme "savoirs".

a écrit :
Trop de sous menus

C'est parti de l'impression suivante : si j'ai des sous-menus pour certains, je dois mettre des sous-menus pour tous. Dans ma tête, ou bien l'on a un seul niveau de menu pour tous, ou bien plusieurs niveaux mais pour tous. Peut-être ai-je tort. Et en effet c'est un site vitrine Smiley smile
Je vais essayer de réfléchir à une simplification des menus. Je ne vois pas encore comment sans avoir l'impression d'une perte, mais bon...

a écrit :
...le dessin de diamant qui ramène sur la home ne sert à rien...

Le diamant était censé représenter le logo justement, logo pointant logiquement sur la page d'accueil comme il se doit.
Si j'arrive à faire un véritable logo sur chaque page, cela le remplacera, mais je me trouve confronté au problème lié au choix ergonomique : mes pages de par leur simplicité sont des rectangles centrés en milieu de page. Et sur de tels rectangles, je vois mal un logo se répéter à chaque fois. A moins qu'il soit léger, et encore...

a écrit :
Je ne sais pas comment j'ai fait mon compte (peut être en réduisant et augmentant le format de page (L'histoire)), mais je me suis retrouvé avec la photo de fond justifiée sur la largeur de la page, ce qui a pour effet d'afficher la photo en répétition ! Graphiquement, là c'est le bug. Il semblerait que le fond ne reprend pas systématiquement sont format initial après avoir réduit la fenêtre.


Là, vous touchez un point qui m'a posé problème lorsque je me suis attaqué au mode responsive, et dont j'ai parlé dans un post dédié (http://forum.alsacreations.com/topic-27-67627-1-Viewport-Android-et-device-Height.html).
Pour résumer, j'utilise un plugin (backstretch) pour appliquer une image de fond en homothétique. Or ce plugin en javascript n'est pas capable de prendre toute la hauteur sur certains navigateurs mobiles. Il n'est pas possible en js de calculer la valeur exacte du viewport sur tous les mobiles.
Je suis donc parti sur une solution de contournement : avec les media queries, lorsque l'on descend en taille, je n'utilise plus le plugin, mais affecte à ma balise html une image statique du fond. Image différente suivant la résolution (920, 640...). Or sur la page d'accueil, comme je n'ai pratiquement rien, ma balise html a une petite hauteur (que je limite quand-même à 538px avec un min-height). Si l'on passe donc en petite résolution sur PC, ou si l'on surfe avec un mobile comme l'iphone 5 qui fait du 640x1136, l'on se retrouve en effet avec une image qui se répète en bas. C'est un problème que je n'ai pas réussi à résoudre pour l'instant. Si je pouvais en javascript détecter les tailles réelles des écrans mobiles, je pourrais repartir sur le pluggin dans toutes les configurations, et il n'y aurait plus ce bug graphique.

En tout cas, merci beaucoup d'avoir pris le temps de me donner vos avis. J'ai du pain sur la planche Smiley smile

En attendant d'autres avis...
Concerant le logo, vous le tenez déjà. J'aime bien le logo avec la date en script au centre. C'est une idée élégante pour mettre en valeur l'ancienneté de la marque. Ça fait "luxe" donc c'est OK pour ce type de client.

Il vous suffit d'optimiser le logo, le style, la taille et le placement de la typo sans serif (la typo script de la date me semble convenir). Vous pouvez chercher sur Dafont http://www.dafont.com/fr/ ou Google Fonts une typo sans serif avec une petite touche "traditionnelle" (là on est trop proche d'une Futura, un peu trop "moderne" et "technique" pour une marque depuis 1895). Il faut trouver une typo simple sans serif, moderne et traditionnelle à la fois, qui sonne juste en 2013 et en 1895, c'est trouvable. Là vous êtes près du but. Et une fois que vous avez un résultat qui semble vous convenir, placer le logo directement sur le fond, entre le menu du haut et le bloc de contenu en plus petit que sur la home. Il y a largement la place et cela valorisera votre mise en page en plus de personnaliser toutes les pages du site.

Quand je parle du fond noir à propos des blocs de contenu, c'est qu'il s'agit visiblement d'un noir transparent. Vous pouvez essayer de prendre le marron foncé du haut pour le mettre en transparence (le noir apparait marron avec le fond), histoire de voir si c'est plus chic, ou pas (peut être faudra t-il tricher un peu en le désaturant). Le résultat n'est pas garanti mais c'est à tester.

Pour ce qui est de vos inquiétudes à propos du design, je trouve que vous tenez là une base crédible et qu'il suffit d'optimiser les détails en terme d'ergonomie et de design. Malgré les erreurs d'ergonomie, vous êtes en plein dans le sujet et il n'y a pas de fautes de goût, ce qui est la base. Ma première impression en arrivant sur ce site (c'est la première impression la plus importante), c'est : très joli !

Vous pouvez faire vos tests sur une template photoshop (ou logiciel équivalent) si vous avez des doutes. Faire les mises au point du design directement dans le code demande beaucoup de travail et ça manque de souplesse. Les optimisations directement dans le code sont en principe réservées aux détails de finalisation.

Ceci n'est que mon point de vue en essayant d'être constructif, d'autres avis peuvent apporter un éclaircissement différent.
Voilà, en attendant la suite. Smiley cligne
Modifié par spongebrain (08 Jun 2013 - 18:00)
Merci.

Je suis en train d'essayer de résoudre le problème d'affichage sur mobile qui crée ce désagrément lorsque l'on redimensionne sur pc. (post dans Web Mobile et responsive web design).

Dès que j'aurais solutionné ça, je m'attaquerai aux modifications en prenant en compte vos avis et propositions Smiley smile

Et je reste open à d'autres avis bien sur. Smiley smile
Bon, j'ai résolu les problèmes de redimensionnement lié au pluggin que j'utilisais.

Je m'attaque aux modifications ergonomiques.

Si d'aucuns pouvaient compléter les remarques de Spongebrain en me donnant leur avis...

Merci d'avance Smiley smile
Bonjour,

Si vous êtes un artisan ou commerçant je peux vous conseiller pour la création de site web,

n'hésitez pas à me contacter Smiley smile
creationweb67 a écrit :
Bonjour,
Si vous êtes un artisan ou commerçant je peux vous conseiller pour la création de site web,
n'hésitez pas à me contacter Smiley smile

Sérieux ?
Des conseils, gratuits, désintéressés, bénévoles donc ?
S'il s'agit de remplir votre portefeuille de commandes, vous n'êtes pas au bon endroit, si vous avez des conseils, ils se donnent en général sur "la place publique".
À bon entendeur Smiley cligne