Mock-up et wireframe : pour visualiser votre projet de site Web

Au départ, un nouveau site Internet ou une application Web ne sont qu’une simple construction de l’esprit, des idées. Ainsi, des conceptions visuelles sont indispensables 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 application est bien souvent le meilleur moyen de convaincre un client ou un investisseur. Enfin, avoir un aperçu visuel du projet souhaité et de son fonctionnement aide grandement les programmeurs à bien comprendre le projet Web. C’est aussi une manière de découvrir et d’anticiper des problèmes et des divergences qui peuvent ainsi être résolus à l’avance. Deux termes se retrouvent souvent dans ce processus : mock-up et wireframe. Mais quel sont exactement ces deux différents types de schémas d’interfaces ?

Le terme mock-up vient également de l’anglais et se traduit par maquette. Cette approche de conception est notamment utile pour visualiser le concept d’un projet Web planifié, et complète le wireframe avec des éléments de conception. C’est pourquoi un mock-up est souvent construit à partir d’un wireframe, car il permet de transformer ce dernier en page interactive. Avec un mock-up d’application ou de site Web, non seulement la disposition de base sera présentée avec la description des fonctions et des espaces réservés pour le contenu, mais aussi la première version de la conception, du design futur. Pour cela, on trouve dans la création d’un mock-up :

• les couleurs,
• les typographies,
• les images
• les éléments graphiques

Ces élément sont travaillés et définis, aidant ainsi à la présentation de la mise en page, ce qui apporte un bon aperçu du projet final, du moins ce à quoi il doit ressembler sur un navigateur ou sur les différents affichages. Pour créer un mock-up, des programmes classiques de graphisme comme Photoshop peuvent être intéressants. Il existe cependant des outils de mock-up spécifiques comme Balsamiq. Ce dernier permet de créer facilement différentes pages en ayant la possibilité d’ajouter des liens. Un mock-up complexe est assez semblable à un prototype interactif, et contient déjà des encodages sur HTML, CSS etc.

En utilisant ces outils de visualisation à un stade précoce de la conception de projet Web, vous augmentez fortement vos chances de succès. En effet, si vous travaillez en équipe vous obtiendrez ainsi un dénominateur commun bien plus rapidement. Si pour le travail de programmation vous faites appel à des développeurs Web externes, c’est une excellente méthode pour mieux présenter vos idées. De plus, ces derniers seront en mesure de vous indiquer rapidement quelles fonctionnalités sont réalisables, et quels problèmes risquent de survenir sur le plan de la facilité d’utilisation et de l’usabilité. Enfin, les dessins restent la meilleure façon de présenter votre application ou site Web aux clients et aux investisseurs.

Cependant, le processus qui va de l’idée première en passant par la visualisation jusqu’à la programmation ne nécessite pas toujours de réaliser deux types de conception. 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 principalement déjà prédéfini. Il en est de même pour une extension d’une application Web. Enfin un wireframe est aussi la meilleure méthode de visualisation si vous avez déjà demandé à un graphiste de réaliser la conception en lui donnant carte blanche.

Mais quand vous souhaitez présenter vos propres idées pour les éléments graphiques, un mock-up est alors nécessaire. Plus vous allez dans les détails de la conception de votre wireframe plus il est simple et facile de préparer une présentation du design. Un effort beaucoup plus important et des coûts plus élevés sont logiquement 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 interactive. Cependan, dans certains cas, ce procédé évite de réaliser des prototypes basés sur le code.

L’importance croissante du responsive web design (RWD) augmente logiquement la complexité des wireframes et des mock-ups. Dans le passé, un simple croquis était largement suffisant, mais aujourd’hui la production de plusieurs versions pour répondre aux différentes tailles d’affichage est devenue quasiment obligatoire. De plus, il est important de tenir compte lors de la visualisation, des différences fonctionnelles comme les moyens de saisie (souris, clavier, écran tactile) et des diverses exigences techniques (transmissions des données, etc.).

Ces circonstances conduisent désormais à se passer de plus en plus d’un mock-up, et à réaliser plutôt un prototype qui couvre automatiquement les caractéristiques de plusieurs périphériques. Toutefois, les développeurs de logiciels de wireframe et de mock-up ont réagi à cette évolution et ont ainsi simplifié la création de différentes versions d’un projet. Si vous souhaitez faire un wireframe à la main, il sera donc nécessaire de réaliser plusieurs dessins.