Etude de cas boutique Oscommerce: Oyoyo, votre boutique BD et Jeux


Tout commence fin Aout, par un coup de fil d’un ancien client et toujours ami.

Il me parle d’un projet de boutique, « un petit truc », il a déja contacté une société locale ce que je comprends tout à fait, je lui parle d’OScommerce, c’est ce que lui propose la société.

Il me montre une réalisation qu’ils lui ont donné en exemple, le design est « bateau » mais un truc me fait hurler, le site scroll horizontallement en résolution 1024, je vérifies que ce n’est pas à cause de l’utilisateur du site (une image trop grosse par exemple), non, c’est bien un problème structurel.

Je lui en fait part, je considère ça comme une grande marque d’amateurisme et lui propose de lui faire un devis pour la réalisation de son site, en me précisant si possible son budget pour que je puisse lui faire une offre la plus réaliste possible.

Je contacte Myriam Faulkner de Fairweb pour lui proposer de prendre en charge la partie développement du projet, elle accepte, l’équipe est montée.

Après avoir rassuré David (le client) que nous utilisons des outils collaboratifs permettant de travailler en synergie « comme à la maison » voila le projet lancé.

Le projet

Cahier des charges :

Bon alors, c’est une petite boutique pour vendre du jeux de cartes à collectionner, des BDs des mangas tout ça quoi.

A savoir, David est arbitre international pour les compétitions d’un jeu de cartes appellé Magic L’assemblée.

Comme les arbitres sont « rétribués » sous forme de matériel, il doit avoir depuis le temps quelques palettes de cartes qui trainent chez lui.
David a également une collection assez impressionnante de bandes dessinées et autres mangas.

J’ai cru alors qu’il voulait faire une boutique pour vendre tout ça. Idiot que je suis.

Donc en gros le cahier des charges c’est :

  • Une boutique
  • Gestion de stock
  • Gestion des commandes
  • Gestion de clientèle
  • Etc…

Bref, une boutique tout ce qu’il y’a de plus classique.

Les recommandations et éléments du client :

Design

  • Fun mais sérieux
  • Pas QUE manga
  • Pas QUE heroic Fantasy

Pour le reste demmerde toi.

Le logo

Je ne suis qu’un pauvre petit entrepreneur, j’ai pas de sous, tu me colle ça dans le design global?

L’accroche

Qu’est ce que j’en sais moi?

Les pages/rubriques

On voit ça quand on lancera le projet OK?

Les éléments graphiques

Ca c’est ton boulot.

Les textes

Y’a pas besoin de textes hein, je fais une boutique pas le nouveau Goncourt.

J’adore travailler avec David…

Passons à la réalisation.

Design graphique

On a un petit budget, mais même pour un petit budget, j’essaies toujours de faire quelque chose de bien niveau look.

Ce coup-ci je vais donc commencer par le logo, histoire de cr&er un début d’identité graphique pour le site.

Comme on a un site qui va vendre du produit « ludique » je vais commencer la recherche graphique du côté des banques d’images à faible coût pour voir si on trouverait pas quelque chose qui nous convienne.

Bingo, je tombe sur un ensemble de créations d’une graphiste qui sont non seulement de qualité, à des prix très faibles, mais qui de plus on été pensées pour certaines pour un usage web.

On fait alors une première sélection de visuels qui iront bien dans le site, on prend les versions de démo por commencer le travail et me voila parti à commencer l’étude graphique.

Je suis allé, bien évidemment, voir ce qui se faisait du côté de la concurence, je peux vous dire que ça n’a servi à rien, les boutiques de produits ludiques sont globalement, soit d’un triste ou d’une laideur totale, soit d’un rococo « t’en veux je t’en colle dans tous les coins que tu sais même plus ou tu dois cliquer ».

Le logo

Donc pour résumé, pas de réelle commande de logo, on va quand même essayer de faire un truc sympa et rapide.

Après quelques recherches, le choix de nom pour la boutique est fait. Ce sera OYOYO.fr, à partir de là, le travail d’étude du logo peut commencer.

Alors, pour faire un truc sympa et rapide, deux ou trois conseils :

  • Choisissez une icone ou une image qui colle bien à l’esprit du site ou de la société
  • Reprennez le nom du site ou de la société
  • Choisissez une police propre et lisible
  • Collez quelques effets sur le texte qui le mettent bien en valeur

Et vous obtenez ça :

Bien sur, ce n’est pas un vrai logo, il n’y a pas de réelle étude sectorielle ou identitaire derrière, mais pour un client qui n’a pas de budget, ou de réel besoin de logo, ça permet quand même de lui faire un truc qui tienne la route.

Le logo bleu est préféré, il sera modifié par la suite en retirant l’image jointe pour des questions de difficulté de placement.

Nous avons nos couleurs pour le site : Bleu, argent/gris, Or/orangé. Il ne reste plus qu’à travailler l’interface.

L’interface graphique du site

Comme il a été choisi de travailler à partir d’une plateforme OScommerce et qu’on ne partira pas sur un design « avancé », je décide de commencer à travailler ma maquette à partir d’un tu template classique d’OS, sur 3 colonnes.

J’usitlise les éléments que nous avions sélectionné pour commencer un début d’habillage graphique et un travail sur les blocs d’information.

Ce qui nous donne la pré-maquette :

L’idée générale est là, on va donc petit à petit affiner l’habillage.

Création des trois boutons en haut à droite dans le design du site :

J’affine la structuration de l’information et la mise en page, je me retrouve confronté a de nombreux soucis du au mix de blocs conteneurs et de tableaux.

Je simplifie le logo qui créé de réels problèmes de mise en page, j’habille un peu plus les colonnes, ce qui nous donne la deuxième maquette, un peu plus évoluée.

Ca commence à ressembler à quelque chose. Le design final commence à se découvrir un peu, le reste ne sera que question de réglages et d’habillage.

Le header fait bien vide et il manque un « cadre » au site. Pour gérer un contenu fort, je décide de passer le site en design fixe optimisé pour un affichage en 1024. Ca me simplifie beaucoup la vie.

Travail de mise en avant du header, un fond dégradé, des arrondis pour dessiner le cadre du site et lui donner une structure, voici le projet à ce moment :

On va rester la dessus, tout en décidant de retirer l’ange, qui rend le fichier trop lourd et n’apporte rien de réellement probant.

Je trouve à ce moment là que les colonnes manquent un peu de style, trop simples, ne se marriant pas avec l’ensemble du site.

Pas de problèmes, j’attaque cette partie en créant un fon légèrement en relief qui donne une légère impression de métal. Cette impression est renforcée par les reflets des visuels.

L’effet est simple (dégradé de gris + lueur interne), le plus gros travail est pour les visuels qui doivent être détourés et retravaillés pour obtenir le reflet.

On ajoute au header (à la place de l’ange) le formulaire de recherche en replaçant le bouton par une image d’un « ogre » tappant sur le formulaire avec son marteau, le rendu n’est pas pafait mais ça rentre bien dans lidée générale du site en ligne.

Le cyclope avec son panneau et les onglets disparaissent au profit de produits « en avant ».

Et voici la version que vous pouvez voir en ligne actuellement :

Ou plus simplement à cette adresse : http://www.oyoyo.fr

Quelques petits regrets à cause de l’énorme verticalité du site, mais vu la masse d’informations que le client voulait faire apparaitre sur les pages, pour optimiser tout ça il y aurait eu besoin de restructurer l’ensemble du rendu html du site, nous n’en avions ni le temps ni les moyens, peut être quand OYOYO deviendra un poid lourd du secteur et c’est tout le bien que je lui souhaite.

Technologie employée

La boutique est achitecturée autour d’un moteur OScreloaded (une variation d’OScommerce) car certaines demandes initiales n’étaient accessibles en restant dans le budget que sur cette version d’OScommerce.

Nous avions pensé initalement à utiliser la version full CSS, OScss, mais le projet semble au point mort et nous n’avions pasassez de recul face au produit pour se lancer dans son exploration.

Je ne vais pas rentrer dans la partie de personnalisation du code php, ça c’est la partie de Myriam de Fairweb.

Pour ma part voici les modifications apportées :

  • Tout le layout a été revu en blocs conteneurs couplés avec des positionnements CSS quand cela était possible.
  • Gros travail d’optimisation du CSS, intialement très dense avec de nombreuses redondances.
  • Modifications de certains codes html pour un rendu plus propre (utilisation principalement de vraies balises de titres et non pas simplement de texte plus gros en gras).

Pour finir

Pas grand chose à dire, je suis assez content du rendu final, même si je pense qu’avec plus de temps et de moyens, nous avions la matière pour faire un site graphiquement très avancé.

Retoucher le code d’OScommerce, c’est un peu comme faire un puzzle de 50000 pièces, y’a des bouts de rendu qui se balladent partant des les centaines de fichiers du moteur et parfois là ou on ne penserait même pas à les chercher.

En tous cas, longue vie à OYOYO, votre boutique BD et jeux!

Comme toujours, vos avis et critiques sont les bienvenus.

Bonne journée à vous, cordialement,
Aymeric Jacquet

PS : pas le temps de me relire, corrections dans la soirée.


10 réponses à “Etude de cas boutique Oscommerce: Oyoyo, votre boutique BD et Jeux”

  1. Salut Aymeric,

    intéressant une fois de plus.
    Par contre concernant Oyoyo, tout comme la remarque précédente, les liens rouges au survol…
    De plus, lorsque dans le menu latéral gauche je clique sur Comics, il n’y a pas de produit mis en avant, simplement un lien vers la sous rubrique Soleil.
    Et si je clique sur Soleil directement dans le menu de gauche, c’est idem, pas de produit, je suis obligé d’allé cliquer sur le +.

    Voilà, c’est tout.

  2. Post vraiment intéressant et qui va en aider plus d’un.. je remarque qu’on a les même "protoytpes" de clients, amateur du ‘ démerde toi ‘. Autant avant, je prenais ça comme du je-m’en-foutisme coupable, autant maintenant je tente de me dire que c’est une preuve de confiance ;o . Par contre, peux tu résumer les "outils collaboratifs" dont tu parles en haut de post ?

  3. Bonjour a vous deux. Tiens pour les liens en rouge ça ne m’avait pas choqué, va peut être falloir que je reteste ça.
    @Nilo : nous sommes justement en train de préparer la phase debug post production. Avec les retours utilisateurs.

  4. Bonjour Mike,

    Pour les outils collaboratifs, bien sur, en plus on a utilisé du vraiment simple :

    Un document Writely partagé entre les 3 acteurs du projet.
    – En pré-production nous avons noté une liste de taches en y attribuant une couleur par utilisateur
    – En production il servait de contrôle à l’avancée des travaux
    – En finalisation il servait à classer les choses en Urgent et Méga Urgent. ;)

    Skype pour faire des réunions et des points à des moments données et pour petre en liaison permanente avec le client.

    Des mails systématiquement envoyés aux trois personnes pour avec une trace précise des demandes trop longues pour être intégrées au Writely sans en gèner la lecture.

    Et un bon vieux truc, le téléphone. :D

    Comme vous voyez, rien d’extraordinaire, mais techniquement à la portée de tout le monde.

  5. Salut

    je viens de voir ta méthodologie de travail, ça m’apprends pas mal de détails ou d’étapes que je ne faisais pas tout le temps, et qui rendaient le travail compliqué à la fin. donc une vraie mine d’infos pour moi, sur la méthodologie

    sinon design très sympa et adapté à la thématique

  6. Enfin je viens de voir que la charte a été changée je ne sais pas si c’est à l’approche des fêtes mais ça me branche pas trop la nouvelle … trop agressives les couleurs !

  7. Bonjour,

    Concernant oscommerce c’est plutôt pas mal mais c’est assez pauvre graphiquement.
    Je trouve que joomla et magento s’en sortent mieux au niveau options et possibilités graphiques.
    Je pense que si oscommerce n’évolue pas il va vite passer à la trappe.
    Pour info j’ai créé mon site en ligne ici gratuitement http://www.boutique-en-ligne-31.com/boutique-gratuite.html

    mon site agence de voyage
    http://www.mipsotour.fr

    J’administre moi même mon site, plus de 200 destinations, et je trouve que une fois les explications en main, c’est assez sympa de le faire.