{"id":1055,"date":"2020-06-22T11:19:44","date_gmt":"2020-06-22T09:19:44","guid":{"rendered":"https:\/\/www.micrositepro.fr\/internet\/?p=1055"},"modified":"2020-08-28T16:25:41","modified_gmt":"2020-08-28T14:25:41","slug":"design-site-internet","status":"publish","type":"post","link":"https:\/\/www.micrositepro.fr\/internet\/design-site-internet\/","title":{"rendered":"Le design de site internet"},"content":{"rendered":"\n<p><strong><em>Quelles comp\u00e9tences derri\u00e8re le design d&rsquo;un site internet?<\/em><\/strong><\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 style=\"font-size:18px;color:#000036;margin-top:25px\">Le design d\u2019un site internet, c\u2019est quoi&nbsp;?<\/h2>\n\n\n\n<p>Lorsque l\u2019agence a bien cern\u00e9 votre activit\u00e9, vos objectifs, vos enjeux, elle est \u00e0 m\u00eame de vous proposer un projet de design adapt\u00e9.<br>Le design, c\u2019est le r\u00e9sultat de travaux provenant de deux domaines diff\u00e9rents mais compl\u00e9mentaires&nbsp;: <a href=\"https:\/\/blog-ux.com\/quelle-difference-entre-ux-design-et-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener sponsored nofollow\">le UI et le UX<\/a>.<\/p>\n\n\n\n<h2 style=\"font-size:18px;color:#000036;margin-top:25px\">Le design \u00ab\u00a0UI\u00a0\u00bb: le c\u00f4t\u00e9 <b>utilisateur<\/b>, le \u2018User Interface\u2019 et le r\u00f4le premier de l\u2019infographiste<\/h2>\n\n\n\n<p style=\"text-align:justify\">Le UI \u2013 User Interface \u2013 repr\u00e9sente, en gros, l\u2019aspect visuel du site. Entre donc en piste le graphiste, pour donner vie au logo, faire un choix au niveau des couleurs, formes, typographie(s), et d\u00e9cliner une suite de graphiques qu\u2019on retrouvera \u00e7a et l\u00e0 sur le site. <br>\nDe mani\u00e8re traditionnelle, un graphiste utilise essentiellement des logiciels de cr\u00e9ation (graphique) tels que Photoshop\u00a0; lorsqu\u2019il travaille \u00e0 la production de brochures ou autres documents physiques, il utilisera alors la PAO (Publication Assist\u00e9e par Ordinateur), lui permettant de bien cadrer les divers \u00e9l\u00e9ments dudit document \u00e0 produire. <br>\nSur le web, il devient infographiste; pas de PAO donc, mais des normes et standards \u00e0 conna\u00eetre et utiliser, \u00e0 savoir le HTML et le CSS, mais aussi d\u2019autres cadres tels que Bootstrap par exemple. \nDe quoi s\u2019agit il\u00a0? <br>\n<\/p><ul><li>Le HTML installe sur une page blanche au d\u00e9part les divers \u00e9l\u00e9ments\u00a0qui vont faire vivre cette page: titres, photos, et autres \u00e9l\u00e9ments de contenu. <\/li>\n<li>Le CSS permet d\u2019agencer ces diff\u00e9rents \u00e9l\u00e9ments\u00a0: positionnement \u00e0 droite, \u00e0 gauche, centrage, taille, couleurs, effets.<\/li> \n<li>Le Bootstrap veillera \u00e0 ce que tout cet ensemble se positionne correctement, quelle que soit la taille de l\u2019\u00e9cran. Le Bootstrap est tr\u00e8s utile pour assurer que le site est web responsive ou ergonomique. Cependant on peut faire sans \u2013 le CSS peut \u00eatre suffisant, et garantir la qualit\u00e9 de l\u2019aspect visuel du site, quel que soit l\u2019\u00e9cran.<\/li><\/ul><br><br>\n<p style=\"text-align:justify\">\nL\u2019infographiste est <b>le cr\u00e9atif de l\u2019agence<\/b>; il d\u00e9finit votre <b>identit\u00e9 visuelle<\/b>, tout en respectant les normes de l\u2019industrie ou du secteur dans lequel vous \u00eates acteur. Par exemple, pour un site \u00e0 th\u00e9matique m\u00e9dicale, vous n\u2019irez pas mettre un fond de page noir. Par contre, dans le monde de la musique ou du design, vous retrouverez ce fond noir\u00a0et mettrez en valeur le chic d\u2019une photo noir et blanc.\n<br>\nOn pense souvent qu\u2019un graphiste est un web designer. C\u2019est faux dans la logique, souvent vrai dans la r\u00e9alit\u00e9. Les comp\u00e9tences d\u2019un web designer sont bien diff\u00e9rentes\u00a0: c\u2019est le UX, ici qui prend le relais.\n\n\n\n<h2 style=\"font-size:18px;color:#000036;margin-top:25px\">Le design \u00ab\u00a0UX\u00a0\u00bb: le c\u00f4t\u00e9 <b>utilisation<\/b>, le \u2018User eXperience\u2019 \u2013 le r\u00f4le du web designer<\/h2>\n\n\n\n<p style=\"text-align:justify\">Le web designer se focalise sur l\u2019exp\u00e9rience v\u00e9cue par l\u2019utilisateur, et chercher \u00e0 en maximiser la qualit\u00e9. Son r\u00f4le est donc de travailler sur la navigation du site par exemple, <a href=\"https:\/\/www.micrositepro.fr\/internet\/loffre\/creation-site-internet\/\">afin que celle-ci soit la plus pratique, concise, claire possible<\/a>.  De m\u00eame que la navigation, il structure l\u2019information \u2013 comment rassembler tel ou tel type d\u2019information dans des cat\u00e9gories pertinentes. Ce travail, il l\u2019effectue bien entendu avec le client \u2013 qui domine son sujet.<br>\nEn th\u00e9orie, le r\u00f4le de web designer est diff\u00e9rent de celui de l\u2019infographiste; cependant, responsable de l\u2019exp\u00e9rience utilisateur, il doit aussi v\u00e9rifier l\u2019ergonomie du site. Par cons\u00e9quent, il ma\u00eetrise lui aussi le HTML, CSS et Bootstrap.<br><br>\nReposant sur des comp\u00e9tences similaires, les deux r\u00f4les sont donc souvent tenus par une seule et m\u00eame personne.<br>\nDans notre agence bas\u00e9e sur Rethel, Ardennes, c\u2019est le cas.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quelles comp\u00e9tences derri\u00e8re le design d&rsquo;un site internet?<\/p>\n","protected":false},"author":1,"featured_media":582,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,8],"tags":[16],"class_list":["post-1055","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-technologie","tag-facebookpost"],"_links":{"self":[{"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/posts\/1055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/comments?post=1055"}],"version-history":[{"count":10,"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/posts\/1055\/revisions"}],"predecessor-version":[{"id":1066,"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/posts\/1055\/revisions\/1066"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/media\/582"}],"wp:attachment":[{"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/media?parent=1055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/categories?post=1055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.micrositepro.fr\/internet\/wp-json\/wp\/v2\/tags?post=1055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}