{"data":{"markdownRemark":{"html":"<p>Bonjour à tous, c'est (encore) Eva ! </p>\n<p>Après avoir <a href=\"https://www.commit42.com/blog/un-nouveau-site-pour-une-nouvelle-annee/\">défini la stack</a>, <a href=\"https://www.commit42.com/blog/la-gestion-de-projet-toute-une-organisation/\">organisé mes sprints</a> et fait <a href=\"https://www.commit42.com/blog/le-mvp-est-la/\">un super MVP</a>, j'ai pu m'attaquer à l'aspect visuel du futur site de commit42.\nEn effet qui dit refonte de site dit nouveau look !\nL'équipe de c42 m'a fait confiance quant aux choix graphiques pour leur nouveau site, j'ai donc revu un peu la charte graphique afin de proposer un design dynamique, coloré et moderne.</p>\n<h2>La charte graphique 📖</h2>\n<p>Une charte graphique est un document qui recense l'ensemble des éléments visuels qui définissent une marque. On y trouve donc les couleurs, les typographies, le logo, les icônes etc.\nElle garantie une cohérence visuelle et une homogénéité entre tous les supports de communication d'une entreprise (carte de visite, site web, affiches, papiers administratifs...).</p>\n<h3>Couleurs 🎨</h3>\n<p>La charte graphique actuelle de commit42 comporte les 3 couleurs suivantes:</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/3abab499ec523486acf65dc49c2f9410/e11df/charte-graphique-c42.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 60.6%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACFUlEQVQoz51STWsTURSdn5QQQVMTDIQEunLhWiwKdWM2tqv8Bgn5AZ2ZQqn4FboRFcSP4DJUapvEQidJrUMyzZtJ5iPfmXnH956ZkIobHThz7xzuPXPefVdav3bjKHc7iTsb14NEao3eXEsgkfgnUIYgmUwiHo9/k/YUFa/2FLr/fAeKKkORFSjKf4GqqgrJD4JgMvcxm/rU9wWwivl8jul0KsDzkJ/xHvbNsOxjUoFkEkJNk4CBEkLQ7XbBo2maIvb7fYxGI4zHY5FzjhATTt/CwLbgMbBa+ruHUIkX9Xo9geFwiMlkAs/zYFmWiM1mE8ViEYVCAZp2Bpdxrt3DoWZg53MLb77qojfUWQpyF+FDKYXruqIol8shEokgGo1ic/Mhc9bD6QXBo/067ilV3JVPcFD5iaFrw1oVnM1mQoyNQUQ+s1arhXQ6jUwmg2w2i1upFPRzDR9ql9hQTvD42Xc82K3iyVsNrvOHw8FgcMWh4zgC+XwesVhMYGtrGx5zoukE2y9OmcMa7u/W8O5Iv+KQLmZAQ/Ew8mN3Oh3wdZBlGbqus5+48JibesvA0y8NfDq+gGMve6nEX7yZuaGVSgWlUgmNRmM5Q8MwUC6XBdrttuD4xdSrx3h98BLlj++F0FJw0SgIfrOrDkOOi3KnIcfB16rdMXDZJSFHuRY/8jlfDxaDsHh1lXhu27bA3/hFfbDQ+PELK3cp+YPj9gwAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Charte graphique commit42\"\n        title=\"Charte graphique commit42\"\n        src=\"/static/3abab499ec523486acf65dc49c2f9410/9435c/charte-graphique-c42.png\"\n        srcset=\"/static/3abab499ec523486acf65dc49c2f9410/02020/charte-graphique-c42.png 243w,\n/static/3abab499ec523486acf65dc49c2f9410/d40d9/charte-graphique-c42.png 485w,\n/static/3abab499ec523486acf65dc49c2f9410/9435c/charte-graphique-c42.png 970w,\n/static/3abab499ec523486acf65dc49c2f9410/e11df/charte-graphique-c42.png 1000w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<p>J'ai choisi d'ajouter une couleur supplémentaire à la charte graphique afin de rehausser l'ensemble. J'ai opté pour un jaune car c'est une couleur complémentaire du bleu, ce qui me permettra de jouer sur des contrastes.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/eb56042d4abd2c690abfe7ab56d9af2b/e11df/charte-graphique-c42-2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 60.6%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACR0lEQVQoz51STW8SURSd/+GfsIakgpC4NcFI4s6NJq5cuHAjG/6GJiZ2WBA1oikaMZoUYkwaXLSmpaQgASPUSoH5Zhi+ZuYd731A3bjRSU7eu/edd3LePaNci1w+vH8jgZt3NsP41Zi4EosjHv8nCEKYSCQQjUarSk7N4nVOFc9ePoWa3YK6pUJV/wsim81CCcIwnPkBFvNABIEEGL7vYz6fY7FY4E+PeNT3V3UQ+IS5WCIASYWKrmlC13VotBKw2sMwDEwmEziOQ/VQ9mxTh2sb5xy56jOCJ3TJ0YViWRZM08RoNILrunLPIoPBAMViEdVqFePxGCPbxLeTIT4f9zDUDTi2Q1wLrvEcI+MDTMuDRXcVFmCh9bd2lclkEIlEkExeR616iPaZjQcv6rit1vC41IZtzzHRHgJ9RWJs5EjUh8JPm06nUoxGINHv90koiVgshosbG3j/dhtfvtu49eQQd7NHJHyMge4iGG4i7CkQhKl2D4aFpUN2tP7YLSOfzyOVSiGdTqP365QELDz6dIJ0oYOdWo+ePMPYfAU4F4DRJTjmnnw2z1Cwy93dXVEul6U7nlm73UahUMDBwQHN14VtmahUKth+8w7NRh2eN8bPUw2lUhGlnY9CI8eWZcpQBLtsNpuiXq/L5Nhxt9uVYq1WSwbFATQaDXzd38OPTkeGOBicoVarU3BHZEoHayl8wBt+Jjtbp86iMl0655r7zPE8T55xz7Zt4rjSLWswlx12Vr9LuHRinovyKNb133prPt9lDep1fwM4zy0Gt57zNgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Nouvelle charte graphique commit42\"\n        title=\"Nouvelle charte graphique commit42\"\n        src=\"/static/eb56042d4abd2c690abfe7ab56d9af2b/9435c/charte-graphique-c42-2.png\"\n        srcset=\"/static/eb56042d4abd2c690abfe7ab56d9af2b/02020/charte-graphique-c42-2.png 243w,\n/static/eb56042d4abd2c690abfe7ab56d9af2b/d40d9/charte-graphique-c42-2.png 485w,\n/static/eb56042d4abd2c690abfe7ab56d9af2b/9435c/charte-graphique-c42-2.png 970w,\n/static/eb56042d4abd2c690abfe7ab56d9af2b/e11df/charte-graphique-c42-2.png 1000w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<h3>Typographies  📃</h3>\n<p>La typographie du logo de commit42 est <strong>Akrobat Regular</strong> et sur leur site actuel ils utilisent <strong>Open Sans</strong> et <strong>Times New Roman</strong>. </p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b07d07355467367e3fd20c0526a59390/e11df/typos-commit42.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 60.6%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAABzElEQVQoz31SR64TQRCdQyGBGVusWbHgAlyAI3lsj8UCiTtYsiyHjXPOyDmnxSfM9KNfaQrxEWLxpkJ3v6pXNc7bF6/qH98l8P7Dy9B9EzPuaxeu+xzxePx/MBZhIpFALBZrOFkvhS9Zz3z6nISfzSCT8S0y8H1fkE6nkUwm4XmeQP0/cxFMKpWCE4Rh+P1ngG9PP8xqtTKbzQb7/R7r9Ro2xvl8hjEG9ppAfbVBEJgIjEPncDiY0+mE6XRqyuUySqUSqtUq6OdyOTQaDSEmlsulQP3tdovj8QhyWIh12MHtdsNsNsNwOMRgMMB4PEav18N8PpeYpO12G91uV2yr1ZIc7/EtOYjL5QKHHyVdLBYilZXVMv94PHC/38WqT/Dser0KlMdRZsqo1+uo1WoYjUYiu9/vgzMl8W63e2YVnLdKlw5JyAqcCWVPJhORSmvnKqA0FuEYmOdomOM46Hc6HXnLjinZRO1yy1KRS2JFdsOYYGGV+be1+M3BDiWwM5MtF4tFkVupVER+oVBAPp8X+VQSbVMKKpRDCKMqhhK4Rc6x2WwKASXqdklOeczxnDJ5h/ej+RlyscM5N2dtGP1TIlllq1X/X2d8G3F8/QXDpT0bzeFi0AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Typographies du site de commti42\"\n        title=\"Typographies du site de commti42\"\n        src=\"/static/b07d07355467367e3fd20c0526a59390/9435c/typos-commit42.png\"\n        srcset=\"/static/b07d07355467367e3fd20c0526a59390/02020/typos-commit42.png 243w,\n/static/b07d07355467367e3fd20c0526a59390/d40d9/typos-commit42.png 485w,\n/static/b07d07355467367e3fd20c0526a59390/9435c/typos-commit42.png 970w,\n/static/b07d07355467367e3fd20c0526a59390/e11df/typos-commit42.png 1000w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<p>Les typographies qui sont utilisées sur l'ancien site de commit étaient celles par défaut sur le thème que qu'ils avaient mis en place, elles ne font pas l'objet d'un choix intentionnel. J'ai donc décidé de les changer afin de choisir de nouvelles typographies qui font sens et qui reflètent plus l'essence de commit42.</p>\n<p>Je suis partie sur <strong>Poppins</strong> et <strong>Roboto</strong>.\nRoboto est certes, pas très originale, car beaucoup utilisée, mais elle est très lisible. Poppins utilisée en black italic est très grasse et contraste bien avec Roboto, ce qui permet de créer un ensemble dynamique.</p>\n<p>Le but est de montrer que commit42 ne se repose pas sur ses lauriers, c'est une entreprise innovante, jeune et dynamique donc.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/83847410dd8afd296c2ca6baf15098eb/e11df/typos-commit42-2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 60.6%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACNUlEQVQoz3VS204aURSdj2rSgtD3PjXpF/QH+iHG8GJC5AWQtHKxJERejDFyM4CiQhtQUYgCRoyA3BFQ5qzO2nEa+tBJ1qx99j6zZ619jvbp3Ydf3z7b8eXre9360aKsFius1v/DYrFgZWUFNpvNhDKg2+121n5rPzxehL97VOCnB/6gH4FAEMFgEH6/X2DGgUBAEAqF4PP54Ha7/4HH41Ferxfaq77Q5686+r2hOsmdqGw2i3Q6jbOzM5yenuLw8FBiM39wcIB2u42lRxHGg8VioWtGUfW6XZRKJbW9vY21tTWsrq5ia2sLm5ubcDqdwlRHBRsbGzg6OkKtVsPV1RWq1Squr6/V3d0dnp6elGa8MBqNkM/nEY/HkUgkREkqlRI+Pj6WeG9vD/v7+6KUzPXOzg4ikQgohE4mkwm0Xq+HrqGQfHl5ifPzcxSLRVQqFYkLhQLVy+bn52fBbDbDfD7Hy8sLptOpxIPBQPpofA2HQ1xcXCAajWJ9fR0Oh0OGT5sulwvhcBi3t7dik6jX67i5uZFco9GQuNVqiai/DamGs6F0Mu3mcjlBJpNBLBbD7u6u5Ana5oiSyaQI4fccHS0rNu33++rh4UFOkGsWifF4LD8k07YJWidzj8HqbXSKCpXRDPf394pKqI4H0Ww2pTmtkE1wTTw+Pi7XpCHFafy7MVBlXgNKN66BMOfKHJkHZoK5crksh8Ua93Y6HWVarjEwWKdVXiPyMpgzYd4IYimvv/Wo/wF38SJ/1O3kWAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Nouvelles typographies du site de commti42\"\n        title=\"Nouvelles typographies du site de commti42\"\n        src=\"/static/83847410dd8afd296c2ca6baf15098eb/9435c/typos-commit42-2.png\"\n        srcset=\"/static/83847410dd8afd296c2ca6baf15098eb/02020/typos-commit42-2.png 243w,\n/static/83847410dd8afd296c2ca6baf15098eb/d40d9/typos-commit42-2.png 485w,\n/static/83847410dd8afd296c2ca6baf15098eb/9435c/typos-commit42-2.png 970w,\n/static/83847410dd8afd296c2ca6baf15098eb/e11df/typos-commit42-2.png 1000w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<h2>Les maquettes   📐</h2>\n<p>Depuis quelques temps j'utilise Adobe XD, que je trouve très pratique et qui permet de mettre en place très rapidement des wireframe ou des maquettes. Pour le moment il existe une version gratuite légalement du logiciel, alors n'hésitez pas à aller essayer !</p>\n<p>Ce qui est intéressant avec ce logiciel c'est que l'on peut créer des petits prototypes de nos applications avec des liens entre les pages comme par exemple sur un menu ou une navigation. Ce prototype peut ensuite être partagé grâce à un lien afin que toute une équipe puisse accéder au prototype sans avoir besoin du logiciel.</p>\n<p>Comme une image vaut mieux que 1000 mots, voici un aperçu de ma maquette: </p>\n<p>La page d'accueil présente les services que propose commit42 ainsi que leur points forts et les avis des clients.</p>\n<p><strong>Homepage</strong></p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/54015a557968b67f2e06264deaaebd91/cc3b5/homepage.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 340.68678459937564%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,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'); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Homepage nouveau site commit42\"\n        title=\"Homepage nouveau site commit42\"\n        src=\"/static/54015a557968b67f2e06264deaaebd91/9435c/homepage.png\"\n        srcset=\"/static/54015a557968b67f2e06264deaaebd91/02020/homepage.png 243w,\n/static/54015a557968b67f2e06264deaaebd91/d40d9/homepage.png 485w,\n/static/54015a557968b67f2e06264deaaebd91/9435c/homepage.png 970w,\n/static/54015a557968b67f2e06264deaaebd91/0125f/homepage.png 1455w,\n/static/54015a557968b67f2e06264deaaebd91/cc3b5/homepage.png 1922w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<p><strong>PWA</strong></p>\n<p>La page PWA explique les avantages de cette façon de voir les applications, proposera (à terme) des petites applications PWA afin que les utilisateurs puissent tester ainsi que les réalisations de commit42 en PWA.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/5e890c320a597ec3188df8e147581388/cc3b5/pwa-page.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 281.2174817898023%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,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'); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Page PWA nouveau site commit42\"\n        title=\"Page PWA nouveau site commit42\"\n        src=\"/static/5e890c320a597ec3188df8e147581388/9435c/pwa-page.png\"\n        srcset=\"/static/5e890c320a597ec3188df8e147581388/02020/pwa-page.png 243w,\n/static/5e890c320a597ec3188df8e147581388/d40d9/pwa-page.png 485w,\n/static/5e890c320a597ec3188df8e147581388/9435c/pwa-page.png 970w,\n/static/5e890c320a597ec3188df8e147581388/0125f/pwa-page.png 1455w,\n/static/5e890c320a597ec3188df8e147581388/cc3b5/pwa-page.png 1922w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<p><strong>Blog</strong></p>\n<p>La page de blog recensera tous les articles publiés ; pour chaque article on pourra voir l'auteur, le temps de lecture et les tags associés (en plus des informations classique, titre, résumé, date)</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/2efa835e48e10fc5baee0b0401ca3801/cc3b5/blog.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 174.50572320499478%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAjCAIAAAAblL1PAAAACXBIWXMAAAsSAAALEgHS3X78AAAEIUlEQVRIx41VS2/bRhD2j0hfaeC0SdNbrv0TveaSoIee2lqW7RZBG/RcpD/ADWLZkSUBPfTQADFi2I5ettPeCqRIaktOLFGKrIjmSyRFcrl8u5+4tqK4UtwRRezOzjf8dnZmdsKhjiAe/v3sn2q1omlaEASu63pM+oPjca/XU1VVURTY4G0YBqYTfiwWIbZtA3k0RsJYglhgDw3wE/A6yjgKo6PA5QJPiGLsG2tRXwcuo8Dxmm3y9dpug6u4bm+gPBMcf8RZ6zRvtdvdVqsutb87Cl/E0OgscBT0V+iPv93//NbP6Zu3lx9vfXYUPQiHyI8FR1Ho96MW/pr//er1n65+cfuvvceY+0EYRdHZe2Y2vHG0/WTlj2d/9tyB/Zg9szlOuN1ui4IgSTJ+li7qCi/wnW63KwjCoSj5MavRYIx5nj84OOC4Rq3Rqlaf71b2qpVqvV5vtVqqpgdheAZtJINpGHgsJsRCPgznz2swIYQlDXUcG3+I62LKkinO0f7UixOVpSPGwGMvE3DN0pj6oWj6vEY5wRR1Ag38hDFPBoDEnvsCv7IsT5imGfsOCoViKrVYq9WR5qAEO8AK+cKdX+5wHEcphZKVCZbeAGMTszNzVy5/ms8/IsRSFMmyDIBnkjMfnr9QKhYdhyqyZNsWWJwGg14mk0kmb1Z3HgS0TPRiT1kHOLO8/PVXyReVh0xpqnnPQ2BA2x+iHQTl8mY6na5zLwlxdd2iTr/uyqXyYmqx0Xhp2x6Untev9tNfhl0ikbw4eWljfZVYmizzptmFcuqbxLvn3i/k1x1qSFKHEHSLUbRz2ezc7PfPd1bCIdrZTGZqana/ugradq9ogbb7H9rwBIbpe/c4rkWIp/cIDAAuFUuphYVG88C2fR3n54Wjac/MzH5y+cqjjYeEKIr8yjQkKJPTyfMfXCgU1hyqKXIb5zCGdi737dwPe7sI7DbRN3tKHuBcNpdIzO1X1wK6BaWhltyRtMFwaWmpzjUt4iCwjuvHtIt37y5wHKKNIzBBe0SSwG46MX1x8uONjVVK9W6XNw2FRfudc+8VCuuea3QVfny0T2j79ralDWhnY9rrTGmoZXd8tNO12r5pGpqmIh9Pop1CPVuWiS7P7oORtJMfTV5CPng+0XWZWPogScqlfBg6uiZTao7O7fn5+Rs3vnz65L5HtoxuqacUAUZJXbt2fefpike2wdlUN1ldHtNm9cyOHruh1KaUuI5NiIFlSZKgpY7tOMTpv+3Y8qSeB+D+DYT+glsmQBrBv4sCxrUGp+zOO3mGMoxtGG0FzJuv+FqjKYrCqWaLpWhIWHvRdf11A4SqIwoHnUNEdWDN2hgG4PW2pg8KaldFt0JLYg2QXasgqcfyNjCs0UkBY6wGRtCIogg6/++KjZcHjXLUfXQM/hcY/XTDaByz5gAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Nouveau blog de commit42\"\n        title=\"Nouveau blog de commit42\"\n        src=\"/static/2efa835e48e10fc5baee0b0401ca3801/9435c/blog.png\"\n        srcset=\"/static/2efa835e48e10fc5baee0b0401ca3801/02020/blog.png 243w,\n/static/2efa835e48e10fc5baee0b0401ca3801/d40d9/blog.png 485w,\n/static/2efa835e48e10fc5baee0b0401ca3801/9435c/blog.png 970w,\n/static/2efa835e48e10fc5baee0b0401ca3801/0125f/blog.png 1455w,\n/static/2efa835e48e10fc5baee0b0401ca3801/cc3b5/blog.png 1922w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<p>Pour voir mon wireframe et la maquette entière n'hésitez pas à consulter ces liens:</p>\n<p>Wireframe: <a href=\"https://xd.adobe.com/spec/55dbefe4-07bf-4be5-5881-e85876a9aaed-23ea/\">https://xd.adobe.com/spec/55dbefe4-07bf-4be5-5881-e85876a9aaed-23ea/</a></p>\n<p>Maquette :<a href=\"https://xd.adobe.com/view/201d07e3-d9fd-4aa1-67a1-332a2e69d97a-562c/\">https://xd.adobe.com/view/201d07e3-d9fd-4aa1-67a1-332a2e69d97a-562c/</a></p>\n<p>La maquette est un prototype, n'hésitez pas à scroller sur les pages ou à cliquer sur les liens de la navigation afin d'accéder aux autres pages !</p>\n<p><em>NB: Pour les icones j'ai utilisé <a href=\"https://fontawesome.com/\">Font Awesome</a></em></p>\n<h2>Les illustrations  ✏</h2>\n<p>J'ai fait le choix de ne pas utiliser des photographies sur le site mais plutôt des illustrations pour plusieurs raisons:</p>\n<ul>\n<li>Je trouve trouve que les illustrations animent vraiment un site et rendent le tout plus vivant</li>\n<li>Il est plus facile, selon moi, d'accorder visuellement des illustrations plutôt que des photos </li>\n<li>Argument pas du tout objectif: j'avais envie de faire des illustrations pour ce site web</li>\n</ul>\n<p>J'ai donc illustré les concepts clés qui devaient figurer sur le site, voici quelques exemples:</p>\n<p><strong>Toulouse</strong></p>\n<p>Pour illustrer la ville rose j'ai choisi le dôme de la Grave et le Pont Neuf ; ce sont des bâtiments emblématiques de la ville qui sont plus singuliers et identifiables que le Capitole par exemple.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/30935fc1c480b69846b5f58aba408cd4/77c37/toulouse.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 60.578842315369265%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACZ0lEQVQoz5VSTWsTURTNxt+hf8CVUFsTsLjqwlUXbgSLglDqQlxVjYrQbmxBFKo2M20xFhpMWw3Wag1WaAQ3UrGtBBcW6Uf6MfNm3nzETCYz8473pTGlUEQHDvfy5r5zzzv3xjpOnPzUczaOzq4WP3G6LYifigfx+H/DTyQSaG1tXYyNpRRMplWMZ1JQRxSoqgpFVaAojbwR/wFidHQUsTCKfD8IUfNDEYZ7ECIUgGjkQkRR1Pz3F4DqohjT9YAxBsZ0oek6LMuCUxZYK3HIz/M82LYNTdMg63SqOQTiT4xxzgMCCMI0DSIIUbXzePKgEztb69RVoFx2CWVZA9M0m/Ew1All4rqu8H0ftZqP7PsU2jqO4+HQ/bpKv1ZFEPhEZNAlBtl4H+xAkwMK5XMtbqF7IIcjR9txLTlITgKG8QvcqlJNlSzxmjnnXiO6TdIYJXVCwzSFY3Gsbqyj6+4QOi6dR2a6FxUnD233DUztNbg+A5PNwdRn6zk33oGzHJ0tNUiNfYWkTuzsbmFw4hEu9PbgYncb+iZSSE7n0Tf1FLencriRfYtbE2kksy9xc2oO19PPcDX9HPmlovBch15iCqmwZhKha1tidX0b5+7lcOfxZRxraceZ5AyG52ax+fMDXhWy6E+PY/lrASPTGVwZGEOhsIB+ZRLp+aIIPBdMEjbMJP84tjWGFx9XsLSsYpguZ+Y/Y7O0gmoFYLvfsbG6AFo3lNaKWF6crw+stLmGL9+KKNNQ5XpJhT/kSlCMLCKvVVyaeIQoDBB4ZbLCpafo5JED26nQLmqwbLlGXn0HLcveI3McOZSN38dIJEKzGbIaAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Illustration Toulouse, dôme de la Grave\"\n        title=\"Illustration Toulouse\"\n        src=\"/static/30935fc1c480b69846b5f58aba408cd4/9435c/toulouse.png\"\n        srcset=\"/static/30935fc1c480b69846b5f58aba408cd4/02020/toulouse.png 243w,\n/static/30935fc1c480b69846b5f58aba408cd4/d40d9/toulouse.png 485w,\n/static/30935fc1c480b69846b5f58aba408cd4/9435c/toulouse.png 970w,\n/static/30935fc1c480b69846b5f58aba408cd4/77c37/toulouse.png 1002w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<p><strong>Nouvelles technologies</strong></p>\n<p>Concept pas facile à illustrer car très abstrait. Après avoir imaginé d'abord une illustration qui faisait plus penser à l'aspect \"responsive\" (qui n'est pas tout à fait une nouvelle technologie) puis une tablette dont jaillissait des logos de technologies utilisées par commit42.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/298f62473e195695c310ea472fbf7b50/77c37/brouillons-nouvellestechnos.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 60.578842315369265%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACGUlEQVQoz5VRPW8TQRC9FlkUVBSU/AQkMNgSLQUVPVDRUFAggVJQUiAo+CgQ9sVRQiCREiFEAw20dIgiXRQkW74v2/fhu/Odfbd3+5hZ+4JjaFjp7Zud3X3zdke7duHS97vXG7hx+2LWvHpZNK40RKPx38iazSbq9foPbaPVxv6Wju3dFvR1Hbp+Em1Guz1n/e/9JchOpwOtKMssEwXyrJBCFLIoTkKWpYTkUap4dX8JKGlorusKz/NAkMy0xmg0UuwSW4MB+pYNy7ZhD4Zqr8JwOKzOy0VOauPxWKRpiiAIZBRFyLIM09kMaZogjKe4tfYKtfNNPHzSwYOnm3AGrjpTIQxDTCaT41ijSSRJgoHjyF6vB5uc8JhOMypiYefDazx+dh9fvu3g0+dN+J6x2E+VCN9lQR5sSCNnSpDsS9/3YRgGVfJBegict3B+nsbB13PYfn4G716cgmvuoigBxzFhmqZ6NgvleY44jqGRiGCrlmVJdtftdvHr6BBJCoyMLbx8pOHezTnW7miwe+9BPUQ49uG5Hgk76j+FEHNBdsgV2CG748bYloEoliS4jr03Ney1zmKf8LFTI4cbyAUwm6Xgv+e79ELJz6d+SBbMKVALdkprjokpFzhI4j4msbmAQXmHivrwfQ/8RXyeWH0Xs7aSWMEYnh8RwgUilQuCudDibhXLqilH3CXisjp0fOEfRYI/AstQYsT9383dNgcUW302AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Brouillons illustrations nouvelles technologies\"\n        title=\"Brouillons illustrations nouvelles technologies\"\n        src=\"/static/298f62473e195695c310ea472fbf7b50/9435c/brouillons-nouvellestechnos.png\"\n        srcset=\"/static/298f62473e195695c310ea472fbf7b50/02020/brouillons-nouvellestechnos.png 243w,\n/static/298f62473e195695c310ea472fbf7b50/d40d9/brouillons-nouvellestechnos.png 485w,\n/static/298f62473e195695c310ea472fbf7b50/9435c/brouillons-nouvellestechnos.png 970w,\n/static/298f62473e195695c310ea472fbf7b50/77c37/brouillons-nouvellestechnos.png 1002w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<p>C'est finalement un de mes collègue qui m'a glissé l'idée d'un robot ! Finalement je trouve que c'est beaucoup plus parlant que mes premières ébauches car l'image du robot est assez universelle. </p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/3740346c2dbe36d9f0d5a96e265ad14d/77c37/robot-2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 60.578842315369265%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACHklEQVQoz4WRX2vTUBjG8yH8DoKXCq5tAvNuwkTQ4Y0KgoNdTBjsajhBRL1w4G6Gu2jSP9uKDOnFHAMtWC+GMh3bGOq2otZ1NdPZJidN00zNkpzHk6apXVc08OM9nPO8T57zHu7sqa6lwXM8Ll47bQndYZuP8DbP+0QY4Uikvg6HI811ByxBEBAKhda4RFREelpCajYKKSZCEiVIkk+MMZOQEGf7qZkpTCWTEEWxed4Gjcfj4BzXtSzbwYHlUMdpw3Xp4o5NH8xt0LuTj+luSaUAqG3bR7WOA5d9nKootqqqUFWFKooCj1JZgVnVMJ1ZRdfAGHoHruPY8RPo7utHuVyGpw+0DYJeymmaZlcqFbBKKxXNq3X2DR3LmwUMT87jwvAohPN9GI+mUNX1Op6m0XeIpiGDBiKFaPheIjB0gswHBb0jCQzeHsd2sVg/L8rfoDdMg56AjoYqIXiT+4FX79fx6GUePaNpnLk8hCfzacxlsvj0ZQdGtfp/w+AKus5SqoQlJVjakNFz6SRu3b8DohkofpVRM4wjRv9M6FXC+G3qSD57h6s37+HKjRHIu3swzRoI+1Hr/FrCUI4tDtoT+hA2fBOZlRfIyXuIpSaw9XELtZp56BH+PqjvwbWaBfhCwlL+wtPFCaxuLmPsYT9W1t9i3/zZTNjWQw02Cu/KedM0vU231dCfpY7s6zXkPhew8DyL/HYBRof5BWasyn8AuXAq4ogirqcAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Illustration robot nouvelles technologies\"\n        title=\"Illustration robot nouvelles technologies\"\n        src=\"/static/3740346c2dbe36d9f0d5a96e265ad14d/9435c/robot-2.png\"\n        srcset=\"/static/3740346c2dbe36d9f0d5a96e265ad14d/02020/robot-2.png 243w,\n/static/3740346c2dbe36d9f0d5a96e265ad14d/d40d9/robot-2.png 485w,\n/static/3740346c2dbe36d9f0d5a96e265ad14d/9435c/robot-2.png 970w,\n/static/3740346c2dbe36d9f0d5a96e265ad14d/77c37/robot-2.png 1002w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<p><strong>Flexibilité</strong></p>\n<p>Je voulais représenter la flexibilité par un objet réel plus que par un schéma abstrait car je trouve que ça donne tout de suite une image plus parlante et que l'on retient mieux. J'ai donc trouvé intéressant de \"tordre\" un crayon, habituellement rigide, car le contraste accentue encore plus l'idée de souplesse, adaptabilité etc.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/ed3d2d2c799985679f8b870697b7e390/77c37/flexibilite.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 970px;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 60.578842315369265%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACgUlEQVQoz3VS3WsTQRC//8mH1iTgqw++6F/gk4LQPqhFBUGwRUHbgtWHJnepWEEJUlHBti9Soa2lphFpo6E1JDbJpWnua+8jH+0l+3N2myv0wTnmdmZ35rczv1nl4rmhbzcuxXHl6tBR4kIsjJ2Ph/F4jDT+X43Reezs3lEikcDw8HBOmUum8O6Vivk3SahaCmktjXQ6DU3TkEqloKrqqUa+pmpn/IFykaf0+v2j7nEP4PTR3/M83mw2uRDhh2HIe70eaSh9oR2yKVzaJ2dS0SdRTNMMSeE4Dq/VarAsi2yG7e0daRuGIdW2HXz5+QP31ee4/ewh7iVnsLS1STE2TMPggziu2LYduq4LXdc52YhEBDQaDXERAs/Hcm4T18bH8HrhLdY2c8h8XMD1ibt4v7Eqzy3KFfkKJYTC6HQ6vNvtYn9/H+tra9jb24Pn+2C2hZrpYWT6KT4tf5ZNB4Ev15XVFYxOj6N0cAiPsRNAUaFPiQTAFxcXkclkUK1WZZWuyygwQL6cw+TsZTQO6nAoUVBkEQW22cDNqUms/8qh7Qe0Z50AiraIL95qtVAsFiEooGFIQMtuw7O/4rB4i4AMosCi2Cb8oIUDvYKRJxPY+lNAS7Y9ABQA9Xqdl0ol7O7uIp/Po1AooN1uU7IYmE+VhWDMobUH5gI+VTozN4sHL1/AcFzuOJJDLjg8Fr1TdbxSqWArm0W5XBb+ANCS3DDHRK1ObTbmkf0+htFHj3EnOYWdv2X4risHKl6KErUrBiKE0c2iYnpSEvQUkKqr6jYMPY3t3+P4sJGFbjQFGCIwesNyysUgCMRGnw0mJS4RtlgjPwJlsmWODnHoMiafSwRGMdV/+gg0qM387yMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Illustration flexibilité\"\n        title=\"Illustration flexibilité\"\n        src=\"/static/ed3d2d2c799985679f8b870697b7e390/9435c/flexibilite.png\"\n        srcset=\"/static/ed3d2d2c799985679f8b870697b7e390/02020/flexibilite.png 243w,\n/static/ed3d2d2c799985679f8b870697b7e390/d40d9/flexibilite.png 485w,\n/static/ed3d2d2c799985679f8b870697b7e390/9435c/flexibilite.png 970w,\n/static/ed3d2d2c799985679f8b870697b7e390/77c37/flexibilite.png 1002w\"\n        sizes=\"(max-width: 970px) 100vw, 970px\"\n      />\n  </span>\n  </a></p>\n<h2>Conclusion 👏</h2>\n<p>Après cette semaine et demi intense en création graphique, les maquettes sont enfin finies ! A partir de la semaine prochaine, je vais pouvoir commencer à intégrer ce nouveau design au site en commençant par l'existant: la homepage et le blog.\nNous envisageons aussi la possibilité de changer le logo de commit42 afin qu'il soit plus en accord avec le design que j'ai proposé (on vous tiendra au courant).</p>","excerpt":"Bonjour à tous, c'est (encore) Eva ! Après avoir défini la stack, organisé mes sprints et fait un super MVP, j'ai pu m'attaquer à l'aspect…","timeToRead":6,"fields":{"slug":"/blog/nouveau-look-pour-une-nouvelle-vie/"},"frontmatter":{"date":"2019-03-21T14:04:14.816Z","tags":["Webdesign","Graphisme","Illustrations"],"title":"Nouveau look pour une nouvelle vie","author":"Eva","thumbnail":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACZ0lEQVQoz5VSTWsTURTNxt+hf8CVUFsTsLjqwlUXbgSLglDqQlxVjYrQbmxBFKo2M20xFhpMWw3Wag1WaAQ3UrGtBBcW6Uf6MfNm3nzETCYz8473pTGlUEQHDvfy5r5zzzv3xjpOnPzUczaOzq4WP3G6LYifigfx+H/DTyQSaG1tXYyNpRRMplWMZ1JQRxSoqgpFVaAojbwR/wFidHQUsTCKfD8IUfNDEYZ7ECIUgGjkQkRR1Pz3F4DqohjT9YAxBsZ0oek6LMuCUxZYK3HIz/M82LYNTdMg63SqOQTiT4xxzgMCCMI0DSIIUbXzePKgEztb69RVoFx2CWVZA9M0m/Ew1All4rqu8H0ftZqP7PsU2jqO4+HQ/bpKv1ZFEPhEZNAlBtl4H+xAkwMK5XMtbqF7IIcjR9txLTlITgKG8QvcqlJNlSzxmjnnXiO6TdIYJXVCwzSFY3Gsbqyj6+4QOi6dR2a6FxUnD233DUztNbg+A5PNwdRn6zk33oGzHJ0tNUiNfYWkTuzsbmFw4hEu9PbgYncb+iZSSE7n0Tf1FLencriRfYtbE2kksy9xc2oO19PPcDX9HPmlovBch15iCqmwZhKha1tidX0b5+7lcOfxZRxraceZ5AyG52ax+fMDXhWy6E+PY/lrASPTGVwZGEOhsIB+ZRLp+aIIPBdMEjbMJP84tjWGFx9XsLSsYpguZ+Y/Y7O0gmoFYLvfsbG6AFo3lNaKWF6crw+stLmGL9+KKNNQ5XpJhT/kSlCMLCKvVVyaeIQoDBB4ZbLCpafo5JED26nQLmqwbLlGXn0HLcveI3McOZSN38dIJEKzGbIaAAAAAElFTkSuQmCC","aspectRatio":1.6507413509060955,"src":"/static/30935fc1c480b69846b5f58aba408cd4/c7e19/toulouse.png","srcSet":"/static/30935fc1c480b69846b5f58aba408cd4/475cb/toulouse.png 245w,\n/static/30935fc1c480b69846b5f58aba408cd4/0b65f/toulouse.png 490w,\n/static/30935fc1c480b69846b5f58aba408cd4/c7e19/toulouse.png 980w,\n/static/30935fc1c480b69846b5f58aba408cd4/4cca6/toulouse.png 1002w","sizes":"(max-width: 980px) 100vw, 980px"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/blog/nouveau-look-pour-une-nouvelle-vie/"}}