Mock-up et wireframe : pour vi­sua­li­ser votre projet de site Web

Au départ, un nouveau site Internet ou une ap­pli­ca­tion Web ne sont qu’une simple cons­truc­tion de l’esprit, des idées. Ainsi, des con­cep­tions visuelles sont in­dis­pen­sables comme base et support pour la mise en œuvre technique. Présenter un projet pour la page d’accueil du site Web ou d’une ap­pli­ca­tion est bien souvent le meilleur moyen de con­vaincre un client ou un in­ves­tis­seur. Enfin, avoir un aperçu visuel du projet souhaité et de son fonc­tion­ne­ment aide gran­de­ment les pro­gram­meurs à bien com­prendre le projet Web. C’est aussi une manière de découvrir et d’anticiper des problèmes et des di­ver­gences qui peuvent ainsi être résolus à l’avance. Deux termes se re­trou­vent souvent dans ce processus : mock-up et wireframe. Mais quel sont exac­te­ment ces deux dif­fé­rents types de schémas d’in­ter­faces ?

Le terme mock-up vient également de l’anglais et se traduit par maquette. Cette approche de con­cep­tion est notamment utile pour vi­sua­li­ser le concept d’un projet Web planifié, et complète le wireframe avec des éléments de con­cep­tion. C’est pourquoi un mock-up est souvent construit à partir d’un wireframe, car il permet de trans­for­mer ce dernier en page in­te­rac­tive. Avec un mock-up d’ap­pli­ca­tion ou de site Web, non seulement la dis­po­si­tion de base sera présentée avec la des­crip­tion des fonctions et des espaces réservés pour le contenu, mais aussi la première version de la con­cep­tion, du design futur. Pour cela, on trouve dans la création d’un mock-up :

• les couleurs,
• les ty­po­gra­phies,
• les images
• les éléments gra­phiques

Ces élément sont tra­vail­lés et définis, aidant ainsi à la pré­sen­ta­tion de la mise en page, ce qui apporte un bon aperçu du projet final, du moins ce à quoi il doit res­sem­bler sur un na­vi­ga­teur ou sur les dif­fé­rents af­fi­chages. Pour créer un mock-up, des pro­grammes clas­siques de graphisme comme Photoshop peuvent être in­té­res­sants. Il existe cependant des outils de mock-up spé­ci­fiques comme Balsamiq. Ce dernier permet de créer fa­ci­le­ment dif­fé­rentes pages en ayant la pos­si­bi­lité d’ajouter des liens. Un mock-up complexe est assez semblable à un prototype in­te­rac­tif, et contient déjà des encodages sur HTML, CSS etc.

En utilisant ces outils de vi­sua­li­sa­tion à un stade précoce de la con­cep­tion de projet Web, vous augmentez fortement vos chances de succès. En effet, si vous tra­vail­lez en équipe vous ob­tien­drez ainsi un dé­no­mi­na­teur commun bien plus ra­pi­de­ment. Si pour le travail de pro­gram­ma­tion vous faites appel à des dé­ve­lop­peurs Web externes, c’est une ex­cel­lente méthode pour mieux présenter vos idées. De plus, ces derniers seront en mesure de vous indiquer ra­pi­de­ment quelles fonc­tion­na­li­tés sont réa­li­sables, et quels problèmes risquent de survenir sur le plan de la facilité d’uti­li­sa­tion et de l’usabilité. Enfin, les dessins restent la meilleure façon de présenter votre ap­pli­ca­tion ou site Web aux clients et aux in­ves­tis­seurs.

Cependant, le processus qui va de l’idée première en passant par la vi­sua­li­sa­tion jusqu’à la pro­gram­ma­tion ne nécessite pas toujours de réaliser deux types de con­cep­tion. En effet, Il existe certains scénarios ou un simple wireframe peut être suffisant. Par exemple si vous planifiez une nouvelle page d’un projet Web déjà existant, il est alors superflu de réaliser un mock-up, puisque le design est prin­ci­pa­le­ment déjà prédéfini. Il en est de même pour une extension d’une ap­pli­ca­tion Web. Enfin un wireframe est aussi la meilleure méthode de vi­sua­li­sa­tion si vous avez déjà demandé à un graphiste de réaliser la con­cep­tion en lui donnant carte blanche.

Mais quand vous souhaitez présenter vos propres idées pour les éléments gra­phiques, un mock-up est alors né­ces­saire. Plus vous allez dans les détails de la con­cep­tion de votre wireframe plus il est simple et facile de préparer une pré­sen­ta­tion du design. Un effort beaucoup plus important et des coûts plus élevés sont lo­gi­que­ment associés à la création d’un mock-up composé de plusieurs parties, de la structure des pages avec les liens, le tout de manière in­te­rac­tive. Cependan, dans certains cas, ce procédé évite de réaliser des pro­to­types basés sur le code.

L’im­por­tance crois­sante du res­pon­sive web design (RWD) augmente lo­gi­que­ment la com­plexité des wi­re­frames et des mock-ups. Dans le passé, un simple croquis était largement suffisant, mais aujourd’hui la pro­duc­tion de plusieurs versions pour répondre aux dif­fé­rentes tailles d’affichage est devenue quasiment obli­ga­toire. De plus, il est important de tenir compte lors de la vi­sua­li­sa­tion, des dif­fé­rences fonc­tion­nelles comme les moyens de saisie (souris, clavier, écran tactile) et des diverses exigences tech­niques (trans­mis­sions des données, etc.).

Ces cir­cons­tances con­dui­sent désormais à se passer de plus en plus d’un mock-up, et à réaliser plutôt un prototype qui couvre au­to­ma­ti­que­ment les ca­rac­té­ris­tiques de plusieurs pé­ri­phé­riques. Toutefois, les dé­ve­lop­peurs de logiciels de wireframe et de mock-up ont réagi à cette évolution et ont ainsi simplifié la création de dif­fé­rentes versions d’un projet. Si vous souhaitez faire un wireframe à la main, il sera donc né­ces­saire de réaliser plusieurs dessins.