{"id":538,"date":"2013-03-11T00:19:37","date_gmt":"2013-03-10T23:19:37","guid":{"rendered":"http:\/\/ddcom.fr\/blog\/?p=538"},"modified":"2013-03-11T20:33:49","modified_gmt":"2013-03-11T19:33:49","slug":"les-tendances-du-webdesign-en-2013","status":"publish","type":"post","link":"http:\/\/degraphiks.com\/blog\/les-tendances-du-webdesign-en-2013\/","title":{"rendered":"Les tendances du webdesign en&nbsp;2013"},"content":{"rendered":"<p>Tous les ans, les acteurs du net se posent des ques\u00adtions essen\u00adtielles : quels sont les choses qui vont pilo\u00adter au pre\u00admier ordre la construc\u00adtion gra\u00adphique des sites afin qu\u2019ils soient dans l\u2019air du&nbsp;temps.<\/p>\n<p>Cet inven\u00adtaire pros\u00adpec\u00adtif se m\u00e8ne en regar\u00addant les choses qui ont influ\u00e9es les grands acteurs du domaine et les dis\u00adcus\u00adsions sur les zincs num\u00e9\u00adriques que sont les chats en amis et Twitter.<\/p>\n<p>Voi\u00adci donc le fruit tr\u00e8s gran\u00adde\u00adment ins\u00adpi\u00adr\u00e9 de cet inven\u00adtaire en 10 points fait par le site <a href=\"http:\/\/www.awwwards.com\">awwwards.com<\/a> pour l\u2019ann\u00e9e en&nbsp;cours&nbsp;:<\/p>\n<p><!--more--><\/p>\n<ol>\n<li>Le conte\u00adnu d\u2019abord<\/li>\n<li>Un desi\u00adgn d\u2019interaction simple avec le contenu<\/li>\n<li>Un desi\u00adgn cen\u00adtr\u00e9 sur l\u2019exp\u00e9rience utilisateur<\/li>\n<li>Des inter\u00adfaces res\u00adsem\u00adblant de plus en plus \u00e0 des appli\u00adca\u00adtions mobiles<\/li>\n<li>Une uni\u00adfi\u00adca\u00adtion des appli\u00adca\u00adtions mobiles et de bureaux dans une seule et unique version<\/li>\n<li>L\u2019av\u00e8nement du SVG et l\u2019\u00e2ge de rai\u00adson du desi\u00adgn adaptable<\/li>\n<li>Vers la fin du <a title=\"Que signifie ce terme ?\" href=\"http:\/\/fr.wikipedia.org\/wiki\/Skeuomorphisme\">skeuo\u00admor\u00adphisme<\/a> au pro\u00adfit des aplats de couleurs<\/li>\n<li>Une approche agnos\u00adtique des technologies<\/li>\n<li>Une uti\u00adli\u00adsa\u00adtion plus pous\u00ads\u00e9e des cap\u00adteurs et dis\u00adpo\u00adsi\u00adtifs interactifs<\/li>\n<li>L\u2019Internet des objets<\/li>\n<\/ol>\n<h2 id=\"lecontenuenpremier\">1. Le contenu d\u2019abord<\/h2>\n<p>Le conte\u00adnu est au centre des atten\u00adtions. Le conte\u00adnu est roi. C\u2019est la grande r\u00e9flexion \u00e0 avoir dans les mois qui viennent, \u00e0 savoir com\u00adment on pr\u00e9\u00adsente le conte\u00adnu et com\u00adment il doit s\u2019adapter \u00e0 l\u2019appareil qui le consulte.<\/p>\n<p>Il faut donc cr\u00e9er du conte\u00adnu effi\u00adcace, consul\u00adtable et acces\u00adsible quel que soit la pla\u00adte\u00adforme avec la meilleure exp\u00e9\u00adrience uti\u00adli\u00adsa\u00adteur possible.<\/p>\n<h2 id=\"undesigndinteractionsimpleaveclecontenu\">2. Un design d\u2019interaction simple avec le contenu<\/h2>\n<p>La sim\u00adpli\u00adci\u00adt\u00e9 est le nou\u00adveau para\u00addigme (pas seule\u00adment en 2013, mais disons que \u00e7a conti\u00adnue). Pour \u00eatre acces\u00adsibles au plus grand nombre, les inter\u00adfaces doivent miser sur une affor\u00addance maxi\u00admum des \u00e9l\u00e9\u00adments d\u2019interface. Stra\u00adt\u00e9\u00adgie de conte\u00adnu, inter\u00adface uti\u00adli\u00adsa\u00adteur, uti\u00adli\u00adsa\u00adbi\u00adli\u00adt\u00e9, acces\u00adsi\u00adbi\u00adli\u00adt\u00e9 et concep\u00adtion visuelle doivent toutes \u00eatre gui\u00add\u00e9es par ce nou\u00adveau paradigme.<\/p>\n<h2 id=\"undesigncentrsurlexprienceutilisateur\">3. Un design centr\u00e9 sur l\u2019exp\u00e9rience utilisateur<\/h2>\n<p>Au final pour un uti\u00adli\u00adsa\u00adteur, ce qu\u2019il voit est le plus impor\u00adtant, plus c\u2019est simple et contri\u00adbue \u00e0 la mise en valeur du conte\u00adnu est plus il est agr\u00e9able \u00e0 consul\u00adter. Tous les concep\u00adteurs sont una\u00adnimes&nbsp;: les sites qui s\u2019inspirent le plus des appli\u00adca\u00adtions mobiles sont ceux qui connaissent le plus de suc\u00adc\u00e8s de par la sim\u00adpli\u00adfi\u00adca\u00adtion qu\u2019ils ont subi et par le fait qu\u2019ils mettent l\u2019utilisateur au centre de l\u2019interaction.<\/p>\n<h2 id=\"dessitesquiressemblentdeplusenplusdesapplicationsmobiles\">4. Des sites qui ressemblent de plus en plus \u00e0 des applications mobiles<\/h2>\n<p>Afin d\u2019unifier l\u2019exp\u00e9rience uti\u00adli\u00adsa\u00adteur quel que soit le moyen de consul\u00adta\u00adtion, les sites vont de plus en plus copier la sim\u00adpli\u00adci\u00adt\u00e9 (et l\u2019efficacit\u00e9) des appli\u00adca\u00adtions mobiles pour mettre en avant le conte\u00adnu et ain\u00adsi per\u00admettre la r\u00e9a\u00adli\u00adsa\u00adtion du point n\u00b05.<\/p>\n<h2 id=\"unificationentrelesapplicationsmobilesetdesktopenuneseuleetmmeversion\">5. Unification entre les applications mobiles et desktop en une seule et m\u00eame version<\/h2>\n<p>Sen\u00adsible, adap\u00adta\u00adtif, cen\u00adtr\u00e9 sur le conte\u00adnu, pen\u00ads\u00e9 mobile avant toute chose, ind\u00e9\u00adpen\u00addant du p\u00e9ri\u00adph\u00e9\u00adrique ; tous ces termes r\u00e9sument l\u2019\u00e9volution conver\u00adgente des desi\u00adgns entre sites mobiles et sites desk\u00adtop au ser\u00advice d\u2019une exp\u00e9\u00adrience uti\u00adli\u00adsa\u00adteur commune.<\/p>\n<h2 id=\"lavnementdusvgetlgederaisondudesignadaptable\">6.&nbsp;L\u2019av\u00e8nement du SVG et l\u2019\u00e2ge de raison du design adaptable<\/h2>\n<p>La recherche constante d\u2019une ver\u00adsion mul\u00adti\u00adpla\u00adte\u00adforme, avec des den\u00adsi\u00adt\u00e9s de pixels variables, va conduire \u00e0 g\u00e9n\u00e9\u00adra\u00adli\u00adser l\u2019utilisation du SVG (et des polices) dans le desi\u00adgn des \u00e9l\u00e9\u00adments d\u2019interface. Le fameux res\u00adpon\u00adsive web\u00adde\u00adsi\u00adgn est main\u00adte\u00adnant une norme incontournable.<\/p>\n<h2 id=\"verslafinduskeuomorphismeauprofitdesaplatsdecouleurs\">7. Vers la fin du skeuomorphisme au profit des aplats de couleurs<\/h2>\n<p>Sim\u00adpli\u00adci\u00adt\u00e9, mini\u00adma\u00adlisme, mise en page claire et repo\u00adsant sur des grilles de mise en page a\u00e9r\u00e9es met\u00adtant l\u2019accent sur la typo\u00adgra\u00adphie et moins sur l\u2019aspect \u201cD\u00e9co\u201d, des inter\u00adfaces moins skeuo\u00admor\u00adphiques. Tout \u00e7a concourt \u00e0 ren\u00adfor\u00adcer ce qui a \u00e9t\u00e9 dit plus haut. Que cela soit du c\u00f4t\u00e9 de Micro\u00adsoft ou de Google, les desi\u00adgn des inter\u00adfaces uti\u00adli\u00adsa\u00adteurs les plus modernes font de plus en plus l\u2019impasse sur la copie des \u00e9l\u00e9\u00adments r\u00e9els pour ser\u00advir l\u2019apparence. Apple fait un peu cava\u00adlier seul en la mati\u00e8re (avec des inter\u00adfaces entre tr\u00e8s \u201ctex\u00adtu\u00adr\u00e9es\u201d par\u00adfois), mais semble ne pas trop savoir sur quel pied dan\u00adser, ce qui indique bien que les autres sont sur une voie int\u00e9ressante.<\/p>\n<h2 id=\"uneapprocheagnostiquedestechnologies\">8. Une approche agnostique des technologies<\/h2>\n<p>L\u00e0 aus\u00adsi, il s\u2019agit d\u2019une ten\u00addance de fond qui ne fait que ce confir\u00admer au fil des ann\u00e9es. En effet sin on regarde les fon\u00adde\u00adments tech\u00adno\u00adlo\u00adgiques des sites \u00e0 suc\u00adc\u00e8s ces der\u00adni\u00e8res ann\u00e9es, on constate que le trio HTML + CSS + JavaS\u00adcript consti\u00adtue la \u201csoupe primordiale\u201d.<\/p>\n<p>L\u2019apparition de pr\u00e9\u00adpro\u00adces\u00adseurs, des Web\u00adFonts du SVG et autres trans\u00adfor\u00adma\u00adtion et ani\u00adma\u00adtions cr\u00e9\u00e9es \u00e0 l\u2019aide des CSS indique une plus grande ind\u00e9\u00adpen\u00addance vis-\u00e0-vis des tech\u00adno\u00adlo\u00adgies pro\u00adpri\u00e9\u00adtaires de toutes natures.<\/p>\n<p>Du c\u00f4t\u00e9 ser\u00adveur, Ruby, Python et Node.js sont de plus en plus r\u00e9pan\u00addus. La mul\u00adti\u00adpli\u00adca\u00adtion des envi\u00adron\u00adne\u00adments de concep\u00adtion devient en soi une constante. Web\u00adGL par ailleurs gagne de plus en plus d\u2019adeptes dans les grandes agences eu \u00e9gard au poten\u00adtiel cr\u00e9a\u00adtif qu\u2019il rec\u00e8le et l\u2019attrait exp\u00e9\u00adri\u00admen\u00adtal qu\u2019il suscite.<\/p>\n<h2 id=\"uneutilisationpluspoussedescapteursetdispositifsinteractifs\">9. Une utilisation plus pouss\u00e9e des capteurs et dispositifs interactifs<\/h2>\n<p>Nous ne sommes qu\u2019\u00e0 l\u2019aube des exp\u00e9\u00adri\u00admen\u00adta\u00adtions pos\u00adsibles gr\u00e2ce aux cap\u00adteurs de toute sorte dont se parent les ter\u00admi\u00adnaux mobiles, il y a encore d\u2019\u00e9normes plages cr\u00e9a\u00adtives dans ce domaine (encore un peu bri\u00add\u00e9es par les contin\u00adgences \u00e9ner\u00adg\u00e9\u00adtiques, mais les am\u00e9\u00adlio\u00adra\u00adtions sont constantes) ; sans par\u00adler de la recon\u00adnais\u00adsance vocale qui sera de plus en plus ind\u00e9\u00adpen\u00addante de la connexion r\u00e9seau avec la puis\u00adsance crois\u00adsante des appareils.<\/p>\n<h2 id=\"linternetdesobjets\">10.&nbsp;L\u2019internet des objets<\/h2>\n<p>De plus en plus d\u2019\u00e9quipements sont dot\u00e9s d\u2019interface r\u00e9seau (filaire ou WIFI et bien\u00adt\u00f4t optique), c\u2019est donc dans un monde de plus en plus connec\u00adt\u00e9 que nous allons \u00e9vo\u00adluer, il est donc nor\u00admal qu\u2019une part crois\u00adsante des inter\u00adac\u00adtions pos\u00adsibles nous am\u00e8ne \u00e0 \u201ccom\u00admu\u00adni\u00adquer\u201d avec notre t\u00e9l\u00e9\u00advi\u00adseur, notre r\u00e9fri\u00adg\u00e9\u00adra\u00adteur ou notre cafe\u00adti\u00e8re (sur\u00adtout pour les infor\u00adma\u00adti\u00adciens\u2026) au tra\u00advers d\u2019un \u00e9co\u00adsys\u00adt\u00e8me de ser\u00advices com\u00admu\u00adni\u00adcant avec l\u2019Internet.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tous les ans, les acteurs du net se posent des ques\u00adtions essen\u00adtielles : quels sont les choses qui vont pilo\u00adter au pre\u00admier ordre la construc\u00adtion gra\u00adphique des sites afin qu\u2019ils soient dans l\u2019air du&nbsp;temps. Cet inven\u00adtaire pros\u00adpec\u00adtif se m\u00e8ne en regar\u00addant les choses qui ont influ\u00e9es les grands acteurs du domaine et les dis\u00adcus\u00adsions&nbsp;sur&nbsp;[\u2026]<\/p>\n","protected":false},"author":1,"featured_media":0,"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":[1,2,7],"tags":[95,97,72,98,49,96,94,99,93],"class_list":["post-538","post","type-post","status-publish","format-standard","hentry","category-divers","category-informatique","category-web","tag-95","tag-agnostisme","tag-css","tag-html","tag-javascript","tag-technologie","tag-tendances","tag-ux","tag-webdesign"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2W6XU-8G","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/538","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=538"}],"version-history":[{"count":12,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/538\/revisions"}],"predecessor-version":[{"id":544,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/538\/revisions\/544"}],"wp:attachment":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/media?parent=538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/categories?post=538"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/tags?post=538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}