Niveaux de définition

Lors de la réalisation de maquettes ou prototype, on parle de niveau de définition.

Plus la maquette apporte de détail sur la structure, l’aspect graphique, les interactions, plus on considère sa définition comme haute : elle définit en effet de nombreux choix relatifs au projet.

À contrario, une maquette telle qu’un simple croquis rapidement exécuté aura davantage une faible définition (ne précisant pas ou peu les choix graphiques), et moins le croquis sera précis, plus la définition sera considérée comme faible.

types de maquette

croquis

../../_images/croquis.png

Le croquis défini en définitive plus un moyen, un croquis effectué au crayon sur un support en papier, qu’un type de maquette.

Ainsi, le croquis peut absolument être celui d’une maquette filaire.

Le croquis permet de valider rapidement la structure générale avant de passer à un document numérique.

../../_images/ulysses-voelker__structuring-design__step-51.jpg

Illustration tirée de Voelker, U., 2019. Structuring Design: Graphic Grids In Theory And Practice. Niggli Verlag, Arthur.

maquette filaire

../../_images/maquette-filaire.png

La maquette filaire définit la représentation de la structure d’un document sous forme de simples zones texte et de rectangles. On ne cherche pas à poser le détail, la direction artistique, etc.

Cette maquette peut être effectuée sous forme de croquis ou de document numérique.

La maquette filaire permet de poser la structure du document et de la valider auprès du commanditaire.

Note

C’est aussi pour cela qu’on évite d’indiquer les choix graphiques : si l’on veut faire valider la structure au commanditaire, on ne souhaite pas que celui comment à discuter de choix graphique. On s’assure don d’écarter ceux-ci autant que possible de la maquette filaire.

maquette graphique

../../_images/maquette-graphique.png

Cette maquette reprend le travail de la maquette filaire, et y ajoute simplement l’aspect graphique. On attaque pas la maquette graphique avant d’avoir bien avancé voire validé la maquette filaire. (Ce qui n’empêche pas de faire en parallèle de la recherche graphique)

prototype fonctionnel

Le prototype fonctionnel désigne une maquette permettant d’effectuer certaines actions comme naviguer, la rapprochant d’autant du produit réel.

Ce prototype peut être basé sur la maquette filaire ou la maquette graphique, selon le besoin.

S’il s’agit de valider la structure, nul besoin de l’aspect graphique. S’il s’agit de valider aussi l’aspect graphique et que la maquette graphique est faites, le prototype fonctionnel peut aussi l’intégrer.

zoning

Note

Un dernier type de maquette, entre la croquis et la maquette filaire, est appelé zoning : il définit sous forme de rectangles les différentes zones du document.

Résumé

../../_images/definition.svg

Représentation plus ou moins arbitraire du degré de définition de chaque type de maquette

résumé
  choix structurels choix d’interactions choix graphiques
croquis ébauche [1]
éventuelles
indications simples [2]
réduits à la
hiérarchie visuelle [3]
maquette filaire
clairement
indiqués [4]
éventuelles
indications simples [5]
réduits à la
hiérarchie visuelle [6]
maquette graphique
hérités de la
maquette filaire [7]
éventuelles
indications simples [8]
clairement indiqués [9]
prototype fonctionnel
hérités de la
maquette filaire [10]
degré de présence
selon prototype [11]
selon le prototype [12]

[1]Le croquis permet généralement de poser rapidement les choix structurels
[2]Le croquis peut permettre de représenter certains choix d’interactions, c’est toutefois optionnel.
[3]Le but du croquis n’est pas de préciser les choix graphiques. Il faut se limiter à indiquer les choix de hiérarchie des blocs typographiques, cela notamment afin d’éviter de détourner l’attention du but de cette maquette : préciser la structure.
[4]Le but de la maquette filaire est d’établir de manière précise la structure du document.
[5]La maquette filaire peut permettre de représenter certains choix d’interactions, c’est toutefois optionnel.
[6]Le but de la maquette filaire n’est pas de préciser les choix graphiques. Il faut se limiter à indiquer les choix de hiérarchie des blocs typographiques, cela notamment afin d’éviter de détourner l’attention du but de cette maquette : préciser la structure.
[7]Cet aspect doit être hérité d’une maquette filaire précédente
[8]On peut très bien n’avoir que des indications relatives à la navigation. Mais il est aussi possible d’avoir un peu d’avantage (animations, etc.)
[9]La précision des choix graphique dépendra de la nature du prototype. Celui-ci peut tout aussi bien se baser sur la maquette graphique que sur une maquette filaire sans indications graphiques.
[10]Cet aspect doit être hérité d’une maquette filaire précédente
[11]On peut très bien n’avoir que des indications relatives à la navigation. Mais il est aussi possible d’avoir un peu d’avantage (animations, etc.)
[12]La précision des choix graphique dépendra de la nature du prototype. Celui-ci peut tout aussi bien se baser sur la maquette graphique que sur une maquette filaire sans indications graphiques.