{"id":431,"date":"2011-11-29T11:38:51","date_gmt":"2011-11-29T10:38:51","guid":{"rendered":"http:\/\/www.degraphiks.com\/blog\/?p=431"},"modified":"2011-11-29T11:39:48","modified_gmt":"2011-11-29T10:39:48","slug":"de-linteret-du-gabarit-gris-en-web-design","status":"publish","type":"post","link":"http:\/\/degraphiks.com\/blog\/de-linteret-du-gabarit-gris-en-web-design\/","title":{"rendered":"De l\u2019int\u00e9r\u00eat du gabarit gris en Web-design"},"content":{"rendered":"<p>Com\u00adbien d\u2019entre-nous se sont un jour frot\u00adt\u00e9 \u00e0 un client qui \u00e0 la pr\u00e9\u00adsen\u00adta\u00adtion d\u2019une maquette nous inter\u00adpelle avec insis\u00adtance sur la cou\u00adleur de tel ou tel \u00e9l\u00e9\u00adment minus\u00adcule de l\u2019in\u00adter\u00adface alors que tout de dont on attend de lui, c\u2019est qu\u2019il nous valide le concept de la maquette&nbsp;?<\/p>\n<p>Afin de sim\u00adpli\u00adfier \u00e0 la fois le tra\u00advail du web-designer dans sa phase de recherche et ses rela\u00adtions avec le client dans les pre\u00admi\u00e8res phases de vali\u00adda\u00adtion, il n\u2019est pas inin\u00adt\u00e9\u00adres\u00adsant de mettre en place un \u00abgaba\u00adrit&nbsp;gris\u00bb.<\/p>\n<p><!--more--><\/p>\n<p>Que l\u2019on me jette des pierres si un jour, un web-designer ou un chef de pro\u00adjet n\u2019a jamais \u00e9t\u00e9 confron\u00adt\u00e9 au pro\u00adbl\u00e8me du client qui dis\u00adcute de la cou\u00adleur de&nbsp;l\u2019a\u00adbat\u00adtant&nbsp;de toi\u00adlette alors que la dis\u00adpo\u00adsi\u00adtion des murs de la mai\u00adson n\u2019est pas encore d\u00e9fi\u00adnie ? Apr\u00e8s avoir&nbsp;r\u00e9fr\u00e9\u00adner&nbsp;plu\u00adsieurs envies&nbsp;d\u2019ho\u00admi\u00adcides&nbsp;; j\u2019ai fina\u00adle\u00adment exp\u00e9\u00adri\u00admen\u00adt\u00e9 avec suc\u00adc\u00e8s l\u2019in\u00adtro\u00adduc\u00adtion d\u2019un gaba\u00adrit gris au tout d\u00e9but du tra\u00advail \u00e9lec\u00adtro\u00adnique (qui suit logi\u00adque\u00adment, du moins chez moi, la phase de recherche papier, croquis\u2026).<\/p>\n<p>Au d\u00e9but je ne voyais que les avan\u00adtages que cela pro\u00adcu\u00adrait lors des pre\u00admi\u00e8res phases de vali\u00adda\u00adtion avec les clients ; mais main\u00adte\u00adnant \u00e0 l\u2019u\u00adsage un autre avan\u00adtage est apparut.<\/p>\n<h2>Les avantages du gabarit gris<\/h2>\n<p>Le pre\u00admier avan\u00adtage est qu\u2019il per\u00admet au web-designer de se concen\u00adtrer sur l\u2019har\u00admo\u00adnie des espaces occu\u00adp\u00e9s par tel ou tel \u00e9l\u00e9\u00adment d\u2019une mani\u00e8re plus fine encore que lors de la recherche papier. en jouant sur les dif\u00adf\u00e9\u00adrents niveaux de gris, on peu aus\u00adsi don\u00adner une cer\u00adtaine id\u00e9e de pro\u00adfon\u00addeur qui sera ensuite concr\u00e9\u00adti\u00ads\u00e9e par l\u2019im\u00adbri\u00adca\u00adtion des conte\u00adneurs dans le code HTML. Nor\u00adma\u00adle\u00adment, comme dans la phase de brains\u00adtor\u00adming avec le client, vous avez juste jeter quelques coups de crayons, dans le gaba\u00adrit gris, on peut accen\u00adtuer la recherche typo des titres et soi\u00adgner cet aspect<\/p>\n<p>\u00c0 ce stade, les outils pour la mise en \u0153uvre sont mul\u00adtiples, Pho\u00adto\u00adshop, Fire\u00adworks (dont les capa\u00adci\u00adt\u00e9s multi-pages cou\u00adpl\u00e9es \u00e0 l\u2019ex\u00adport PDF de celles-ci font mer\u00adveille) ou encore des outils en ligne comme l\u2019ex\u00adcellent <a title=\"Mockingbird, un outil de prototypage en ligne, qu'il est bien\" href=\" https:\/\/gomockingbird.com\" target=\"_blank\">Mocking\u00adbird<\/a>&nbsp;pour ne citer que ceux-ci.<\/p>\n<p>Le deuxi\u00e8me avan\u00adtage est donc de pou\u00advoir pr\u00e9\u00adsen\u00adter au client une ver\u00adsion expur\u00adg\u00e9e de toute cou\u00adleur, afin qu\u2019il se concentre sur les dif\u00adf\u00e9\u00adrentes zones de la page et les choix typo\u00adgra\u00adphiques puisque ceux-ci ne sont pas para\u00adsi\u00adt\u00e9s par la notion de couleur.<\/p>\n<h2>Pr\u00e9cautions d\u2019usage<\/h2>\n<p>Tout ceci serait par\u00adfait ; mais il existe cepen\u00addant un limite. En effet, cer\u00adtains clients n\u2019in\u00adter\u00adpr\u00e8tent pas bien le gaba\u00adrit gris. En effet, puisque l\u2019on pro\u00adpose ce gaba\u00adrit apr\u00e8s des fois une ou deux r\u00e9unions o\u00f9 vous avez fait des cro\u00adquis, ils s\u2019ef\u00adfrayent que vous n\u2019en soyez \u00ab&nbsp;que l\u00e0&nbsp;\u00bb dans votre recherche, et ils peuvent \u00eatre ame\u00adn\u00e9s \u00e0 craindre que vous n\u2019\u00eates pas \u00e0 la hau\u00adteur. C\u2019est effec\u00adti\u00adve\u00adment pos\u00adsible (que vous n\u2019\u00eates pas \u00e0 la hau\u00adteur !! &gt;:) ; la solu\u00adtion pour&nbsp; \u00e9vi\u00adter ce genre de situa\u00adtion et de bien expli\u00adquer avant (lors de la pre\u00admi\u00e8re r\u00e9union) com\u00adment vous pro\u00adc\u00e9\u00addez, qu\u2019est-ce que vous allez four\u00adnir, quelles sont les \u00e9tapes et ain\u00adsi de&nbsp;suite.<\/p>\n<p>R\u00e9duire le nombre des \u00e9changes \u00ab&nbsp;st\u00e9\u00adriles&nbsp;\u00bb et opti\u00admi\u00adser les autres sont quelques uns des m\u00e9rites d\u2019un gaba\u00adrit&nbsp;gris.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Com\u00adbien d\u2019entre-nous se sont un jour frot\u00adt\u00e9 \u00e0 un client qui \u00e0 la pr\u00e9\u00adsen\u00adta\u00adtion d\u2019une maquette nous inter\u00adpelle avec insis\u00adtance sur la cou\u00adleur de tel ou tel \u00e9l\u00e9\u00adment minus\u00adcule de l\u2019in\u00adter\u00adface alors que tout de dont on attend de lui, c\u2019est qu\u2019il nous valide le concept de la maquette&nbsp;? Afin de sim\u00adpli\u00adfier \u00e0 la&nbsp;fois&nbsp;[\u2026]<\/p>\n","protected":false},"author":1,"featured_media":437,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[118,2,7],"tags":[42,83,82,114,75],"class_list":["post-431","post","type-post","status-publish","format-standard","hentry","category-developpement","category-informatique","category-web","tag-developpement","tag-methodologie","tag-relation-client","tag-web","tag-web-design"],"jetpack_featured_media_url":"http:\/\/degraphiks.com\/blog\/wp-content\/uploads\/2011\/11\/gabarit_gris02.png","jetpack_shortlink":"https:\/\/wp.me\/p2W6XU-6X","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/comments?post=431"}],"version-history":[{"count":8,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/431\/revisions"}],"predecessor-version":[{"id":441,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/431\/revisions\/441"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/media\/437"}],"wp:attachment":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/media?parent=431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/categories?post=431"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/tags?post=431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}