{"id":303,"date":"2019-01-11T13:53:15","date_gmt":"2019-01-11T18:53:15","guid":{"rendered":"http:\/\/elainebosse.com\/fr\/?p=303"},"modified":"2022-04-10T20:52:51","modified_gmt":"2022-04-10T20:52:51","slug":"fidelite-de-la-maquette","status":"publish","type":"post","link":"https:\/\/www.elainebosse.com\/?p=303","title":{"rendered":"Fid\u00e9lit\u00e9 d’une maquette: entre le design et le Web"},"content":{"rendered":"\n

En design Web, il est courant de rencontrer des expressions comme wireframe<\/em> ou maquette haute fid\u00e9lit\u00e9. Le niveau de fid\u00e9lit\u00e9 d’une maquette est une \u00e9chelle qui permet de d\u00e9terminer \u00e0 quel point le r\u00e9sultat d\u00e9velopp\u00e9 doit ressembler au design. Une maquette basse-fid\u00e9lit\u00e9 sera donc une \u00e9bauche, alors qu’une maquette haute-fid\u00e9lit\u00e9 repr\u00e9sente le produit attendu apr\u00e8s le d\u00e9veloppement.<\/p>\n\n\n\n\n\n\n\n

<\/figure><\/div>\n\n\n\n

Sketch<\/h3>\n\n\n\n

Un sketch est une \u00e9bauche pr\u00e9liminaire dans laquelle le designer peut vouloir identifier diff\u00e9rents \u00e9l\u00e9ments. G\u00e9n\u00e9ralement, j’utilise un sketch rapide pour confirmer des hypoth\u00e8ses ou m’assurer de d\u00e9buter le projet sur une bonne base. Le positionnement des \u00e9l\u00e9ments globaux du site (ent\u00eate, pied de page, titres de premier niveau, navigation) peuvent \u00eatre valid\u00e9s avec un sketch sur papier. Parfois, il est int\u00e9ressant de sketcher des interactions comme l’ouverture d’un menu, ou un effet d’animation. <\/p>\n\n\n\n

Wireframe<\/h3>\n\n\n\n

Une maquette basse fid\u00e9lit\u00e9 (ou un wireframe<\/em>) permet de mettre en place de mani\u00e8re plus rigide la structure globale de la page. Une grille a \u00e9t\u00e9 \u00e9tablie pour le projet et les tailles d’\u00e9cran peuvent maintenant \u00eatre prises en compte. Les diff\u00e9rents niveaux de titres et de textes sont ins\u00e9r\u00e9s avec du lorem ipsum<\/a><\/em> – ce merveilleux language \u00ab\u00a0de remplissage\u00a0\u00bb bien utile. Les images et ic\u00f4nes sont repr\u00e9sent\u00e9es \u00e0 l’aide de placeholders<\/em>, afin qu’on puisse en visualiser les dimensions et les emplacements. <\/p>\n\n\n\n

<\/figure><\/div>\n\n\n\n

Maquette haute fid\u00e9lit\u00e9<\/h3>\n\n\n\n

Une maquette haute fid\u00e9lit\u00e9 est produite pour ajouter des \u00e9l\u00e9ments du guide de style et de la marque, les couleurs, textes et images finales sont g\u00e9n\u00e9ralement ajout\u00e9es \u00e0 cette \u00e9tape. Ce niveau de maquette est souvent plus long \u00e0 produire, et le plus sujet \u00e0 \u00eatre modifi\u00e9 plusieurs fois. Dans la m\u00e9thode de d\u00e9veloppement traditionnelle (waterfall<\/em>), cette maquette est approuv\u00e9e par plusieurs niveaux de gestion avant de d\u00e9buter le d\u00e9veloppement.<\/p>\n\n\n\n

Une autre approche<\/h2>\n\n\n\n

Pourtant, la plupart des projets ne n\u00e9cessitent pas de produire tous les \u00e9crans en maquettes haute fid\u00e9lit\u00e9. En fonction de l’\u00e9quipe, de la coh\u00e9sion entre le designer et le d\u00e9veloppeur et de leurs niveaux d’expertise, il est important de doser et de choisir les pages qui seront plus d\u00e9taill\u00e9es au design. Parfois, un prototype ou une maquette haute fid\u00e9lit\u00e9 sont n\u00e9cessaires pour bien transmettre l’id\u00e9e et l’interactivit\u00e9 de la page – par exemple, dans le cas d’une navigation qui sort de l’ordinaire. Souvent, seulement quelques pages critiques sont produites en haute fid\u00e9lit\u00e9 et les autres sont interpr\u00e9t\u00e9es par le d\u00e9veloppeur \u00e0 partir de maquettes basse fid\u00e9lit\u00e9, de sketchs, d’indications \u00e9crites ou verbales et du guide de style.<\/p>\n\n\n\n

Avant de demander \u00e0 votre designer de produire l’ensemble des pages de votre futur site en maquettes haute fid\u00e9lit\u00e9, prenez le temps de discuter avec votre \u00e9quipe de ses besoins et de ses attentes. Quels sont les \u00e9l\u00e9ments plus innovateurs ou pour lesquels une pr\u00e9cision plus grande est n\u00e9cessaire, et quels sont ceux \u00e0 interpr\u00e9ter \u00e0 partir d’un dessin papier et d’une conversation? Votre d\u00e9veloppeur est-il pr\u00eat \u00e0 travailler \u00e0 partir de maquette basse fid\u00e9lit\u00e9? \u00cates-vous pr\u00eat \u00e0 embrasser cet aspect de la m\u00e9thode Agile en ne visualisant le r\u00e9sultat final qu’une fois d\u00e9velopp\u00e9?<\/p>\n","protected":false},"excerpt":{"rendered":"

En design Web, il est courant de rencontrer des expressions comme wireframe ou maquette haute fid\u00e9lit\u00e9. Pour savoir \u00e0 quoi s’attendre, il est important de comprendre le sens de ces mots.<\/p>\n","protected":false},"author":1,"featured_media":1109,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[19,20,32,43,52],"_links":{"self":[{"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=\/wp\/v2\/posts\/303"}],"collection":[{"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=303"}],"version-history":[{"count":1,"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":1156,"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=\/wp\/v2\/posts\/303\/revisions\/1156"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=\/wp\/v2\/media\/1109"}],"wp:attachment":[{"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elainebosse.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}