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 ======= .. image:: 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. .. figure:: images/ulysses-voelker__structuring-design__step-5.jpg :width: 50% Illustration tirée de Voelker, U., 2019. Structuring Design: Graphic Grids In Theory And Practice. Niggli Verlag, Arthur. maquette filaire ================ .. figure:: 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 ================== .. figure:: 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é ====== .. figure:: images/definition.svg :align: center Représentation plus ou moins arbitraire du degré de définition de chaque type de maquette .. list-table:: résumé :header-rows: 1 * - - choix structurels - choix d'interactions - choix graphiques * - croquis - ébauche [#note-croquis-1]_ - | éventuelles | indications simples [#note-croquis-2]_ - | réduits à la | hiérarchie visuelle [#note-croquis-3]_ * - maquette filaire - | clairement | indiqués [#note-filaire-1]_ - | éventuelles | indications simples [#note-filaire-2]_ - | réduits à la | hiérarchie visuelle [#note-filaire-3]_ * - maquette graphique - | hérités de la | maquette filaire [#note-graphique-1]_ - | éventuelles | indications simples [#note-graphique-2]_ - | clairement indiqués [#note-graphique-3]_ * - prototype fonctionnel - | hérités de la | maquette filaire [#note-prototype-1]_ - | degré de présence | selon prototype [#note-prototype-2]_ - selon le prototype [#note-prototype-3]_ ---- .. [#note-croquis-1] Le croquis permet généralement de poser rapidement les choix structurels .. [#note-croquis-2] Le croquis peut permettre de représenter certains choix d'interactions, c'est toutefois optionnel. .. [#note-croquis-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. .. [#note-filaire-1] Le but de la maquette filaire est d'établir de manière précise la structure du document. .. [#note-filaire-2] La maquette filaire peut permettre de représenter certains choix d'interactions, c'est toutefois optionnel. .. [#note-filaire-3] 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. .. [#note-graphique-1] Cet aspect doit être hérité d'une maquette filaire précédente .. [#note-graphique-2] 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.) .. [#note-graphique-3] 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. .. [#note-prototype-1] Cet aspect doit être hérité d'une maquette filaire précédente .. [#note-prototype-2] 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.) .. [#note-prototype-3] 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.