[Intermediaire] Site e-commerce sans CMS

Bonjour, Alsa m'a décidément vu "grandir" si je peu dire !

Enième mise a jour graphique plus que fonctionnelle, qui se veut plus épurée. Mais sans tomber dans le simplisme extrème car cela reste un site e-commerce. J'ai donc opté pour la première fois aux grilles css avec grid 960. J'ai choisi des fonts via l'outil google fonts (Montserrat x Open sans). J'ai également pas mal bataillé pour mettre en place un menu dynamique au scroll (Que je trouve assez réussi). Le fichier css généré par gulp (concaténation et minimification(??)) pèse 33ko (Gain de 16ko)!

Voila pour la présentation, maintenant je voudrais avoir votre avis sur l'ambiance général, est-ce que le coeur de métier est en accord avec le design du site? Les informations sont elles accessibles ? Que changeriez-vous ?

[URL DANS MA SIGNATURE]

Pour rappel voici l'ancien design (en gros) :

http://web.archive.org/web/20140107104546/http://www.decoferforge.com/

PS: je suis toujours à la recherche d'un fond pour mon body
Modifié par Stéphanie W. (18 May 2014 - 14:00)

remif a écrit :


PS: je suis toujours à la recherche d'un fond pour mon body

Sur ce lien , tu trouveras ton bonheur. Je peux même dire qu'ils sont tous très sexy. . Au fait, c'est pas là qu'on dit : just do it and move your body ?

Sinon, pour ton site, regarde le résultat : ici.

Quand on est sur la home et que le slider est à la cinquième diapo, comment je fais pour accéder au lien de la première diapo. Il faut que j'attende ?

J'ai pas tout regardé. Je laisse les autres membres regarder ton site.

Ah au fait, je pense que ces liens devraient t’intéresser :
- aridi (de la vectorisation en perspective)
- bzzzp.net
- patterns.ava7.com/
Modifié par niuxe (01 May 2014 - 23:11)

Bonjour

Pour aider les utilisateurs du forum à mieux identifier votre site, merci de suivre les règles de ce salon :

a écrit :
2- Pour vous faciliter les choses et orienter les réponses de vos interlocuteurs, placez un mot-clé dans le titre de votre sujet : [Pro] pour les sites professionnels, [Intermédiaire] pour les sites semi-pros, et [Amateur] pour les sites... amateurs
3- Donnez le nom de votre site ou son thème, son concept dans le titre du sujet, pas simplement "critiquez mon site", sinon celui-ci sera vite perdu dans la masse.

Désolé, c'est corrigé.

Personne ne peut me faire une ptit' review ?

Dernière mise a jour ce matin. Personne ne veut m'aider ou quoi

Bonjour,

Etant très loin d'être un codeur expert, je vais répondre au titre du visiteur lambda.

Côté ambiance générale, c'est simple et sobre... ce que j'apprécie personnellement.
Le code couleur colle bien au métier ou en tout cas à l'idée que je m'en fait : gris pour le métal et orange pour le feu qui permet de le travailler.

Les fiches produits sont claires, tu vas à l'essentiel. Petit plus qui serait sans doute le bienvenu : quand on zoom sur un article, il faudrait pouvoir revenir à la page sans utiliser la flèche de retour du navigateur (sous Firefox par exemple).

Sinon, là encore, les informations accessibles via le footer sont clair d'un point de vue visuel (ça change des textes massifs et illisibles) à l'exception du lien copyright qui ne mène à rien... Il faudrait donc supprimer le lien tout en laissant la mention, non ?

Au final, c'est plus que positif mais il manque un petit truc pour me faire dire "c’est chouette comme site", un petit truc que je n'arrive pas à définir. Mais en l'état, l'objectif principal est atteint, le site marchand est clair, complet et semble opérationnel.

Bonsoir,

Effectivement, le site fait le job, et semble plutôt bien référencé, bravo...
Mais, effectivement aussi, le design ne me fait pas "fantasmer", il manque la petite "étincelle"...

France Galle à propos d'Ella Fitzgerald (on a les référence qu'on peut...) a écrit :
...ce tout petit supplément d'âme
Cet indéfinissable charme
Cette petite flamme

Si vous regardez les sites qui suivent immédiatement le votre dans les résultats de glouglou (sur les termes "fer forgé"), vous comprendrez sans doute ce que je veux dire :
http://www.fer-forge-prestige.com/
http://www.ferforgediprinzio.com/

Il y a sans doute des choses à mettre en place pour rendre le votre un poil plus sexy

Merci à vous deux et je vous rejoins totalement sur le "petit truc".

Pour vous dire vrais, j'ai des soucis pour trouver "l'esprit créatif" pour par exemple une bonne police et bon fond. Je pense que déjà le site prendra une autre dimension.

Après je peux utiliser des icons aussi.

Mais merci pour votre analyse. Un côté de moi même est assez fier.

Bonjour,

Pour la police, une seule ou deux maxi. C'est la façon dont vous allez la travailler, la colorer, la mettre en place qui fera toute la différence.

Là le fond gris vieillot sur les côtés étroitise le site et donne une touche datée (pas dans le bon sens du terme), les réseaux sociaux sont trop visibles (c'est peu élégant), le panier et le nombre d'achat (le 0 géant) nous pètent à la tronche, la publicité google fait "site aux abois" pas classe du tout (à enlever direct, ça dévalorise le site, et par extension, les produits). Le carousel tourne trop vite et les photos rikiki sont peu valorisées. La colonne de gauche est plus courte que celle de droit sur la home, le décroché gris en dessous est inesthétique. Par contre j'aime beaucoup les photos de fers forgés en N&B et la sobriété de la présentation. Mais c'est en partie atténué par ce qui se passe autour qui devrait être simplifié et stylisé. Il manque une vraie charte, un style, des codes couleurs véritables.
Le footer n'est pas soigné, c'est un détail a ne pas négliger pour donner du style à l'ensemble de la page.

Très rapidement, je partage les avis déjà écrits.
Pour le "petit truc" qui apporterait un plus, peut-être essayer de donner une touche un peu "haut de gamme" et "authentique". Éviter d'attaquer direct avec des morceaux de métal alignés dans des cases comme sur un catalogue discount. Voir un style un peu vintage, une vraie ambiance qui collerai bien avec l'aspect traditionnel des produits ?
Le feu OK c'est cohérent, mais est-ce que ça fait rêver ? Je n'en suis pas certain. En l'état je trouve l'approche trop "constructeur/industriel", et pas assez showroom/atelier présentant les produits dans une ambiance soignée. Le header est agressif et la mise en page pas assez soignée. Même en bas de page. C'est propre et plutôt pas mal présenté, mais il faut aller un peu plus loin pour que vos produits deviennent plus que des morceaux de métal et se transforment en pièces d'artisanat.

Pas évident à expliquer. Juste des éléments de pistes en étudiant des sites concurrents ou qui utilisent des codes visuels, un langage qui pourraient vous intéresser.

Des exemples à ne pas suivre :
http://www.cfa-ferronnerie.fr (propre mais froid et sans âme)
http://www.artisan-webdesign.co.uk/ (trop technique et agressif, pas assez classe)
http://www.les-forgerons-d-antan.fr/pieces_fer_forge.html (site froid, produits dévalorisés, header sans personnalité)
http://www.planetmetal.fr/fr/portes-metalliques-portes-decorations
http://www.chaudronnerie-du-morin.fr/ (ils sont probablement très pros, mais le site fait trop froid et industriel, idéal pour rebuter les particuliers)

Des sites qui ont donné un style artisanal authentique ou vintage haut de gamme à leur design et peuvent vous inspirer pour les ambiances (en faisant abstraction de la structure du site) :

http://blindbarber.com/ (le haut pourrait être un portail, le bas un catalogue ou autre)
http://www.reignoux-creations.fr/portes-entree-fer-forge.php (un peu vieillot et étriqué, mais la volonté de faire "haut de gamme")
http://www.voa.fr/ (pour la sobriété)
http://neversinkcreative.com/ (sobre, moderne, retro, design, ou le pouvoir de la couleur)
http://www.henry-realestate.com/
http://www.montblanc.com/fr-fr/flash/default.aspx/#/meet-montblanc/craftsmanship (pour l'authenticité)
http://www.vondutch.com/ (retro et rock)
http://www.elixia.fr/ (ultra sobre et moderne + éléments graphiques traditionnels)
http://www.farinellabakery.com/ (très "pizza", mais graphique, tradition et actuel)
http://process.iancoyle.com/ (une police peut suffire pour apporter une touche vintage)
https://www.youtube.com/watch?v=M8hoh3H-Gvs (oups ! … )
...

À vous de trouver le bon mix ? C'est tout sauf facile.
Modifié par spongebrain (14 May 2014 - 22:13)

Le grand fou a écrit :
https://www.youtube.com/watch?v=M8hoh3H-Gvs (oups ! … )

\o/ Je ne suis plus seul !!!

Merci spongebrain, niveau design je suis limité car je n'ai pas de photo "pro", ce sont des photos que mes clients m'envoient. Chaque photo a ses dimensions et son "centrage". Difficile à utiliser ...

Après le carrousel demande à être retravailler je suis d'accord. Le footer aussi.

Merci pour tous ces liens.

Encore un autre problème, le patron ne souhaite pas voir de noir sur son site

Et pour finir, je suis toujours à la recherche d'un background !!!!!

Salut,

Avant de trouver un background, il faudrait commencer par penser un design cohérent avec le petit truc qui le fait comme évoqué ci-dessus (ça nécessite une charte, des choix graphiques, ce qui manque ici).

Pour le moment un fond d'aplat gris très clair comme sur ce forum, ou même blanc, seront moins lourds et vieillots que le fond de matière grise actuel.

Les liens que j'ai posté vont dans ce sens. Non pas pour être recopiés, mais pour montrer quelques variantes de chartes dans le style "authentique" qui fonctionnent bien. C'est à vous de définir vos codes graphiques, on ne pourra vous aider, vous conseiller concrètement que lorsque vous aurez fait des choix. Peu importe que vous n'ayez pas des super photos (j'ai vu pire), parfois une couleur et une police suffisent à habiller un site (voir mes liens).

Pour l'interdiction d'un site sur fond noir, tant mieux. Ces sites utilisent rarement le noir à bon escient et sont souvent plombants et lourds.

Trouver une gamme couleur simple et authentique, trouver le ton, équilibrer les volumes, choisir la bonne police, sélectionner le contenu… ça demande un travail de remise à plat. Pas nécessaire de remettre en question la partie backoffice, mais la partie visible doit être travaillée pour véhiculer l'image désirée. Vous pouvez vous inspirer ou faire appel à un professionnel si vous ne vous en sentez pas l'envie. Ils sont aussi là pour ça.

Bon courage à vous.