Découvrez le maquettage
Le maquettage correspond à l'étape de concrétisation graphique de votre produit, sous différentes formes ; la plupart du temps, celle d'une maquette.
J'entends parler de "maquette" depuis le début de ce cours, mais… c'est quoi une maquette ?
Une maquette est un modèle à taille réelle de ce que vous voulez créer, qu'il s'agisse d'un site Internet, d'un logiciel, d'une application mobile, etc.
On peut voir la maquette comme une sorte de simulation de ce à quoi ressemblera votre produit.
Et dans notre cas, on maquette quoi ?
On va maquetter notre interface, c'est-à-dire la partie qui permettra à l'utilisateur d'interagir : en gros, la partie visible de notre site Internet. Mais le maquettage englobe plusieurs étapes, qui ont chacune leurs propres caractéristiques de rendu.
En effet, le maquettage est un processus qui correspond à la création :
De wireframes (ou "maquettes en fil de fer" en français). Il s'agit d'une représentation basse-fidélité de votre projet. Qu’ils soient faits à la main ou sur un logiciel, les wireframes permettent de représenter le squelette d'un site : quel contenu il faudra afficher, la hiérarchie de l'information, et une description simple des interactions prévues avec l'utilisateur.
D'une maquette. Cette fois-ci, la maquette correspond à une représentation haute-fidélité de l'interface, avec le design, donc. Elle reprend le squelette des wireframes, rentre davantage dans le détail et y ajoute une dimension visuelle. La maquette reste statique : on aura une succession d'écrans de notre site à taille réelle, avec lesquels on ne peut pas interagir.
D'un prototype. Le prototype quant à lui reprend la représentation haute-fidélité, mais y ajoute une dimension dynamique. En effet, il est possible d'interagir avec le prototype, et donc de simuler l'expérience utilisateur (UX), comme en cliquant sur les liens qui nous amènent sur les bons écrans, en déroulant des menus, etc.
Bon très bien, je vois la différence entre wireframe, maquette et prototype. Mais ça doit prendre du temps tout ça, on irait plus vite à coder directement, non ?
Alors, oui, créer des wireframes, maquettes et prototypes prend du temps, mais croyez-moi, prendre ce temps au préalable avant de se lancer dans le code vous évitera d'énormes problèmes.
Comprenez comment le maquettage résout des problèmes
Le maquettage présente des intérêts très importants :
La maquette constitue un support de collaboration. Chaque étape (wireframe, maquette, prototype) permet à chacun et chacune, quelle que soit son expertise, d'échanger sur les besoins. Les échanges peuvent être en interne, entre les différents métiers, ou bien avec des personnes externes, par exemple avec des clients ou futurs utilisateurs.
Ensuite, elle permet de réfléchir séparément à la pratique et à l’esthétique, en leur donnant une importance égale.
C’est également un excellent moyen de visualiser le travail à réaliser, et ainsi d'estimer le temps (donc le budget) nécessaire pour concrétiser le projet.
Et enfin, et ce ne sera pas pour vous déplaire, ça évite de coder des éléments qui ne seront pas gardés, donc ça permet de gagner du temps.
C’est bien beau, mais dans le monde de l’entreprise, ça se passe comment ? Qui fait quoi par rapport au maquettage ?
Identifiez le rôle de chaque métier dans le maquettage (et le rôle du maquettage pour chaque métier)
Essayons de nous projeter dans une entreprise qui possède un véritable découpage des métiers. On s’intéresse ici aux rôles qui sont en lien direct avec la maquette : on peut repérer le Product Manager (PM), L’UX Designer, et le développeur.
Voilà un petit schéma des différentes étapes en fonction des métiers :
Le Product Manager (PM) va d’abord échanger avec les utilisateurs/clients afin d’établir une liste des besoins. Cette phase de recherche préalable peut aussi totalement être faite en même temps avec l’UX Designer. Puis, il vont pouvoir élaborer à partir de la compréhension de ces besoins les wireframes, permettant alors de valider avec les utilisateurs leur compréhension du besoin.
Ensuite vient l’étape des maquettes. Le rendu étant visuel, c’est le designer qui élaborera les maquettes. La maquette permet une nouvelle étape d’échange avec les utilisateurs, assurée par le Product Manager. Il ou elle aura une approche plus axée sur le business, tandis que l’UX designer se concentre vraiment sur l’expérience utilisateur.
Enfin vient l’étape de prototypage, toujours réalisée par l’UX designer, en interaction avec le Product Manager. Le prototype permet de faire une nouvelle phase d’échange et de validation avec les utilisateurs/clients, et de valider les comportements à développer.
C’est seulement à ce moment-là que l’équipe des développeurs peut commencer à estimer l’effort en développement nécessaire, se mettre d’accord avec l’équipe Produit, et commencer à coder. 💪👩💻
Découvrez la collaboration entre développeurs et l'équipe product
Dans l'interview ci-dessous, Hugo, Senior Product Designer chez OpenClassrooms, vous partage le processus de maquettage et comment il collabore avec les développeurs :
Passez par le maquettage avant de vous lancer dans le développement
OK ! C’est très bien tout ça. Mais pourquoi apprendre à maquetter alors que je suis développeur ?
Eh bien, pour plusieurs raisons.
Tout d’abord, parce qu’on ne collabore jamais aussi bien que quand on connaît les bases de ce que fait l’autre personne. Connaître les basiques du maquettage vous permettra de communiquer avec les designers, d’intégrer plus simplement les maquettes, mais aussi de gagner en autonomie, s’il y a une toute petite modification à faire, par exemple.
Et ensuite, parce que vous ne serez pas toujours dans une équipe bien structurée. Parfois, vous vous lancerez sur des projets en autonomie, qu’il s’agisse de projets personnels pour vous amuser, tester de nouvelles technologies, ou bien dans un but lucratif. Je ne vous dis pas que vous allez prendre la place de designers professionnels. Mais pour de petits projets, c’est tout à fait dans vos cordes. Ce sera alors à vous de vous imposer la rigueur du maquettage, et de vous y tenir lorsque vous souhaiterez ajouter de nouvelles fonctionnalités.
Exercez-vous
Bon, on a vu ensemble pas mal de notions. Voyons voir si vous avez bien compris les différences entre les wireframes, les maquettes et les prototypes. Vous trouverez ci-joint un PDF avec des images qui correspondent chacun à l’une des trois options. Notez sur le document, un papier, ou sur un éditeur de texte à part, s’il s’agit :
A- d’un wireframe ;
B- d’une maquette.
Réponse dans le screencast juste en dessous 👇 :
En résumé
Une maquette est un modèle à taille réelle de l'interface que vous souhaitez créer, qu'il s'agisse d'un site Internet, d'un logiciel, d'une application mobile, etc.
Le maquettage peut correspondre à la création :
de wireframes qui représentent le squelette de votre site Internet, sans design (basse-fidélité) ;
d'une maquette qui représente le produit en haute-fidélité ;
d'un prototype qui est une représentation haute-fidélité, et avec laquelle on peut interagir (en cliquant sur des boutons, par exemple).
Passer par le maquettage avant de créer un produit permet de :
collaborer efficacement ;
donner une importance égale à l'esthétique et au côté pratique ;
gagner du temps pour les développeurs.
Vous commencez à voir à quoi correspond le processus du maquettage ? Ça tombe bien, car on se lance dès le prochain chapitre, avec nos premiers wireframes ! Alors, à tout de suite ! 🚀
