design-app-mobile

Si vous avez déjà collaboré avec une agence de développement d’applications ou avec un designer sur un projet mobile ou web, vous avez probablement peut-être rencontré les termes sketch, wireframe, mockup ou prototype, sans pour autant distinguer les uns des autres. Pour cause, cette terminologie prête souvent à confusion et demeure ambiguë pour bon nombre de développeurs eux-mêmes. Il est crucial de bien comprendre à quoi renvoie chaque concept si vous souhaitez communiquer de façon claire et efficace avec votre prestataire, développeurs ou designers. Nous consacrons cet article à la définition de chaque point afin de lever toute ambiguïté là-dessus.

Introduction

Tout d’abord, il convient de clarifier quelques points. Les termes sketch, wireframing, mockup et prototyping renvoient aux étapes de la conception du design de l’application. Ce sont différentes représentations visuelles de l’application à différentes phases du développement.

Sketch

Si le sketch n’est pas considéré par beaucoup de designers comme une étape à proprement dite de la conception, c’est parce qu’il n’est que l’équivalent d’un brainstorming. Le but est plus exactement de générer des idées et de pouvoir les visualiser. Le sketch prend souvent la forme de dessins crus et basiques, avec papier et crayon. Dans des équipes moins organisées ou peu expérimentées, sketch et wireframing sont souvent confondues à tort.

Wireframe

En se basant sur le sketch, les premiers fondements de l’application prennent forme. Le wireframe est souvent désigné comme l’architecture brute du site, dit aussi squelette. C’est en général pendant le wireframing que se décide quel contenu et quelle fonctionnalité seront incorporés, et ou ils le seront. Enfin, un wireframe doit également donner des détails sur les liens entre les écrans. Exemple : “Qu’est-ce qui s’affiche si je clique sur tel ou tel bouton ?” Rafayel Mkrtchyan, Architecte en expérience utilisateur, chez UXPlanet, reprend souvent cet exemple en comparant le wireframe au plan d’un bâtiment, par opposition à la maquette, qui serait plus l’équivalent du mockup.

Mockup

Le mockup représente l’étape où l’application commence plus ou moins à prendre forme. C’est à cette étape que s’insèrent les fragments visant à donner visuellement vie à l’application : Couleurs, polices, images, logos, etc. Si le mockup permet de visualiser la charte graphique de la marque telle que déployée sur l’application, ce dernier n’est toujours pas cliquable. Il n’est pas encore possible à ce niveau d’essayer des boutons, des fonctionnalités ou des animations. Il n’est qu’une représentation visuellement fidèle de l’application.

Prototype

Enfin, étape suivant le mockup, et dernière phase du design de l’application mobile, le prototyping. Le prototype se rapproche le plus possible du produit final, et permet en plus des visualisations graphiques, de tester des boutons, des animations, et de simuler des interactions utilisateur dans une optique de validation ou d’amélioration du produit. Le prototype est décrit comme une représentation “hautement fidèle” du produit final, et est souvent utilisé pour présenter ce dernier à des tiers (clients, investisseurs, hiérarchie, etc) avant même sa finalisation.

Récapitulons

Le Sketch est une sorte de brainstorming dessiné, un premier jet. Le wireframe en est une version plus structurée, il représente le squelette de l’application. Le mockup est une version où les éléments visuels de l’application sont mis en évidence (Logo, couleurs, polices, etc). Enfin, le prototype est la version la plus fidèle au produit, permettant également de visualiser les différentes animations et effets interactifs.

Laissez un commentaire