Wireframes & conception Web

wireframeUn projet de création de sites web se déroule en 3 grandes étapes:

  • La première consiste à définir les axes stratégiques du nouveau site ; À ce niveau le focus est mis sur l’identification des besoins clients, l’évaluation des opportunités, et l’élaboration d’un plan pour rejoindre les objectifs d’affaires
  • La deuxième étape est celle de la phase de conception, lors de laquelle la stratégie donne naissance à une structure cohérente. C’est une étape très délicate, qui a un impact direct sur le résultat final.
  • La dernière étape est celle du développement. C’est la phase technique du projet, qui consiste à concrétiser le concept et aboutir à un site fonctionnel.

Bien que chacune de ces étapes présente des défis particuliers, je vais m’attarder davantage sur la phase de conception, et plus particulièrement sur le processus de wireframing, puisque c’est mon domaine de prédilection.

D’abord qu’est-ce qu’un wireframe ?
Un wireframe (ou maquette en fil de fer) est une sorte de plan conceptuel qui définit la structure visuelle d’une interface.
Afin de faciliter la compréhension du rôle d’un wireframe, je fais souvent l’analogie entre un wireframe et un plan d’architecture d’une maison. Tous deux ont le rôle de mettre en place une structure concrète qui servirait de repère pour les opérations futures.
Le principal défi dans la conception d’un wireframe est de comment marier plusieurs types d’information pour aboutir à une interface homogène, qui répond aux besoins stratégiques du projet.
Ce type d’information est regroupé sous 5 groupes :

  • Structure : Comment mettre en place toutes les pièces du nouveau site?
  • Contenu : Qu’est ce qu’on affiche sur le site?
  • Hiérarchie d’information : Comment on structure l’information et comment on l’affiche?
  • Fonctionnalité : Comment fonctionne l’interface?
  • Comportement : Comment on crée une expérience utilisateur attractive?

Wireframe et conception web

Aperçu d’un exemple de Wireframe

Wireframes & design?
Les wireframes ne sont pas des représentations visuelles du futur site. Elles n’incluent pas d’éléments graphiques, ni des couleurs. Cette partie est plutôt traitée pendant le processus de design. Les wireframes sont généralement représentés en noir et blanc, et ne s’attardent pas sur la “beauté” du visuel.
Cependant, les étapes de wireframing et de design sont très complémentaires, il est impératif d’avoir une continuité dans le processus créatif afin de joindre l’utile à l’agréable.

Rôle des wireframes
Outre son rôle structurel, le wireframe est un outil qui ajoute de la flexibilité au processus de création de sites Web. Il permet non seulement d’apporter des modifications assez rapidement, mais aussi supporte bien la nature collaborative et itérative du processus de conception. C’est d’autant plus vrai pour les entreprises agiles.
Aussi, les wireframes facilitent la communication entre les différents intervenants du projet. Qu’ils soient chefs de projets, designers, stratèges ou intégrateurs, ces derniers ne parlent pas nécessairement le même langage. C’est pourquoi une représentation visuelle du projet permet d’obtenir une compréhension plus tangible du futur site.

Importance des wireframes pour le client
L’étape de wireframing est une étape très importante pour le client. Elle marque le passage d’une phase de préparation de projet intangible (stratégie) vers une phase de conception, beaucoup plus concrète. Les wireframes permettent donc aux clients d’avoir un aperçu visuel sur le projet, et rendent la stratégie plus tangible.
Par expérience, je constate toujours une meilleure implication des clients dans le projet, à partir du moment où la structure du site commence à prendre forme.
À vrai dire, ce phénomène est tout à fait normal : les wireframes permettent de donner une vue rapprochée de la conception et par conséquent du résultat final. Il est donc important de s’assurer que les objectifs de l’entreprise soient atteints.

Conseil
Pour conclure cet article, si j’ai un conseil à donner aux entreprises qui cherchent à engager une agence web pour la création ou la refonte d’un site, n’hésitez pas à demander des exemples de wireframes, c’est souvent un indicateur de qualité fiable.

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Entrez votre nom, courriel et votre commentaire.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">