Suite de notre dossier « Monter un projet e-commerce ». Aujourd’hui, nous allons nous intéresser aux Wireframes.

Le wireframe est un document de travail qui permet d’avoir un premier aperçu de notre futur site. Le wireframe est au web ce que le story board est au film.

Un Wireframe est aussi connu sous le terme de maquette fonctionnelle ou maquette ergonomique. Sa création est indispensable pour définir l’organisation de vos pages, ainsi que l’ergonomie de votre site. Il sera d’une aide précieuse en vous permettant à la fois de vous poser les bonnes questions, et d’avoir une vision globale du projet.
Son objectif, est de préparer le futur design. Ce document doit être simple et dépourvu d’éléments graphiques, un wireframe trop recherché pourrait contraindre la créativité de votre graphiste, il faut donc privilégier l’utilisation de formes simples (carrés, rectangles).

Dès cette étape vous devez être capable de définir une taille approximative de vos blocs.
Lorsque l’on démarre un site E-commerce la plus grosse erreur est de commencer par penser en terme de « graphisme », il faut rester fixé sur son premier objectif: Vendre.
C’est là que la conception d’un wireframe se voit essentielle.

Lors de l’élaboration de ce document il faut penser en terme de conversion:

Où vais-je placer mon moteur de recherche ? Mon panier ? Mes partenaires ?

Grâce à votre Wireframe vous êtes assurés de ne rien oublier. Vous devez commencer par la structure des blocs en définissant : leur taille, le nombre de colonnes.

Après quoi vous devez inclure vos éléments : les images, les formulaires, le moteur de recherche, le panier… bien sur toujours sous des formes simples.

Les pages importantes à définir sont les suivantes:

• Accueil
• Liste produits
• Fiche Produit
• Panier

Quels outils utiliser pour construire mes Wireframes ?

Pour ma part la première étape est incontestablement le brouillon papier, une feuille (ou plus ) et un crayon, et c’est parti, vous pouvez commencer à placer vos éléments.

Après, si vous vous sentez à l’aise de vous passez de l’étape brouillon papier libre à vous.

La seconde étape dépend de vos compétences, bien sur vous pouvez utiliser Photoshop ou un autre logiciel de création graphique mais je recommanderai à tous l’utilisation de logiciels spécialisés dans le wireframe, ils permettent un gain de temps considérable.

Exemple réalisé avec Balsamiq Mockup

En attendant pour ceux qui veulent s’essayer aux wireframes j’ai testé pour vous:

Balsamiq Mockup : Ce logiciel est gratuit en utilisation web, la version bureau 79$, prise en main très rapide. Son coté «  handwritting » lui donne un côté ludique.

Pencil : C’est un add-on Firefox, il a peu de composants, mais peut être pratique pour un brouillon rapide (gratuit)

Axure : Prise en main un peu plus complexe. Cependant il possède de très nombreuses possibilités notamment celle de pouvoir grouper des objets. Son coût : 589$

D’autres ressources très intéressantes pour les wireframes :

• Le top 20 des wireframes selon Garmashis
• Une liste des ressouces wireframes par smashing magazine

Vous pouvez aussi faire appel à des agences web spécialisée en E-commerce pour vous accompagner dans la construction de vos wireframes.

D’ici quelques jours vous pourrez découvrir le troisième volet de ce dossier dont le thème principal sera le header (entête de vos pages).