{"id":11488,"date":"2025-06-18T09:28:01","date_gmt":"2025-06-18T07:28:01","guid":{"rendered":"https:\/\/studio.ican-design.fr\/?p=11488"},"modified":"2025-06-18T09:28:33","modified_gmt":"2025-06-18T07:28:33","slug":"carte-interactive-vivatech-webdesign-02","status":"publish","type":"post","link":"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/","title":{"rendered":"Carte interactive VivaTech \/ Webdesign 02"},"content":{"rendered":"

Les \u00e9tudiants doivent r\u00e9aliser une carte vectorielle sur Illustrator,<\/em> et interactive via Figma<\/em> ou HTML\/CSS\/JS. <\/em>Le th\u00e8me est libre, mais la carte doit r\u00e9pondre \u00e0 des contraintes design UX, \u00eatre une cr\u00e9ation originale, et int\u00e9grer une signal\u00e9tique compl\u00e8te (pictogrammes, l\u00e9gendes, infos\/titres…).<\/p>\n

<\/p>\n

Coordination projet :<\/strong> Nicolas GERVAIS<\/a> \/ Cours & atelier<\/em> : 15hrs<\/p>\n

> Une carte r\u00e9alis\u00e9 par Noa Dufresne<\/em><\/a><\/strong><\/p>\n

Concept, UX<\/h2>\n

\"\"<\/p>\n

Pour ce projet, j’ai choisi VivaTech<\/em> <\/strong>salon international consacr\u00e9 \u00e0 l\u2019innovation technologique, comme commanditaire fictif, et comme un \u00e9v\u00e8nement porteur des valeurs d\u2019innovation, d\u2019accessibilit\u00e9 et de p\u00e9dagogie. Ma carte interactive devra \u00eatre une repr\u00e9sentation ordonn\u00e9e des diff\u00e9rents espaces th\u00e9matiques, avec une double vocation : informative et interactive<\/em>. La version interactive permet d\u2019enrichir l\u2019exploration gr\u00e2ce \u00e0 une navigation dynamique, en phase avec les usages num\u00e9riques de ce type d\u2019\u00e9v\u00e9nement.<\/p>\n

Cette carte est r\u00e9alis\u00e9e au format A3 pour un affichage classique lors du festival VivaTech.<\/em> Mais elle est aussi d\u00e9velopp\u00e9e en HTML, CSS, JS, pour cr\u00e9er une version interactive qui\u00a0 fonctionne sur un grand \u00e9cran ou une borne interactive…
\n > Dossier_VivaTech<\/a><\/strong><\/p>\n

Processus cr\u00e9atif, UX\/UI<\/h2>\n

\"\"<\/p>\n

Le moodboard “ferm\u00e9”<\/strong> illustre mon approche bas\u00e9e sur la perspective isom\u00e9trique<\/em>, avec des formes simples et g\u00e9om\u00e9triques pour sugg\u00e9rer relief et profondeur sans surcharge visuelle.<\/p>\n

L\u2019utilisation de couleurs unies, contrast\u00e9es<\/em> et harmonieuses, apporte une bonne lisibilit\u00e9 et conf\u00e8re une ambiance moderne et technologique.<\/p>\n

Le traitement minimaliste<\/em> favorise une compr\u00e9hension imm\u00e9diate des diff\u00e9rents espaces, tout en conservant une esth\u00e9tique \u00e9l\u00e9gante et fonctionnelle. Ce style graphique clair et dynamique correspond \u00e0 l\u2019identit\u00e9 innovante de VivaTech<\/em>…<\/p>\n

Prototypage \/ Croquis\"\"Prototypage \/ It\u00e9rations<\/h3>\n

La carte a \u00e9t\u00e9 mod\u00e9lis\u00e9e sur Illustrator<\/em> en vectoriel. Puis, je l\u2019ai import\u00e9e dans Photoshop<\/em> pour ajouter quelques effets visuels et pr\u00e9parer le rendu final.<\/p>\n

\"\"<\/p>\n

Ces it\u00e9rations<\/strong> m\u2019ont permis de clarifier mes intentions graphiques et de m\u2019orienter vers une direction plus coh\u00e9rente avec l\u2019univers de VivaTech<\/em>.<\/p>\n

Version finale<\/h3>\n

Le design repose sur un syst\u00e8me isom\u00e9trique<\/strong> qui assure une bonne lisibilit\u00e9 \u00e0 toutes les \u00e9chelles \/ distances. La carte est structur\u00e9e en quatre niveaux<\/strong>, chacun associ\u00e9 \u00e0 une grande th\u00e9matique de VivaTech… Le choix des couleurs<\/strong> s\u2019inspire directement de l\u2019identit\u00e9 visuelle de VivaTech. <\/em>Enfin, la typographie<\/strong> utilis\u00e9e est Stolzl;<\/em> une lin\u00e9ale sobre, contemporaine et lisible en petit format…<\/p>\n

\"\"<\/p>\n

Liens<\/h2>\n

> Prototype interactif cod\u00e9 :<\/strong> https:\/\/vivatech-one.vercel.app\/<\/a><\/p>\n

> Dossier projet :<\/strong> \u00a0Dossier_VivaTech<\/a><\/p>\n

Vid\u00e9o d\u00e9mo<\/h2>\n
\nhttps:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2025\/06\/video_carte_Vivatech_1.mp4<\/a><\/video><\/div>\n","protected":false},"excerpt":{"rendered":"

Les \u00e9tudiants doivent r\u00e9aliser une carte vectorielle sur Illustrator, et interactive via Figma ou HTML\/CSS\/JS. Le th\u00e8me est libre, mais la carte doit r\u00e9pondre \u00e0 des contraintes design UX, \u00eatre une cr\u00e9ation originale, et int\u00e9grer une signal\u00e9tique compl\u00e8te (pictogrammes, l\u00e9gendes, infos\/titres…).<\/p>\n","protected":false},"author":12,"featured_media":11495,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[381,15],"tags":[56,732,80,531,865,416,121],"acf":[],"yoast_head":"\nCarte interactive VivaTech \/ Webdesign 02 | Studio ICAN<\/title>\n<meta name=\"description\" content=\"Les \u00e9tudiants devaient r\u00e9aliser une carte vectorielle sur Illustrator et interactive Figma ou HTML\/CSS\/JS...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carte interactive VivaTech \/ Webdesign 02 | Studio ICAN\" \/>\n<meta property=\"og:description\" content=\"Les \u00e9tudiants devaient r\u00e9aliser une carte vectorielle sur Illustrator et interactive Figma ou HTML\/CSS\/JS...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio ICAN\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-18T07:28:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-18T07:28:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2025\/06\/viva00.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nicolas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nicolas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/\",\"url\":\"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/\",\"name\":\"Carte interactive VivaTech \/ Webdesign 02 | Studio ICAN\",\"isPartOf\":{\"@id\":\"https:\/\/studio.ican-design.fr\/#website\"},\"datePublished\":\"2025-06-18T07:28:01+00:00\",\"dateModified\":\"2025-06-18T07:28:33+00:00\",\"author\":{\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656\"},\"description\":\"Les \u00e9tudiants devaient r\u00e9aliser une carte vectorielle sur Illustrator et interactive Figma ou HTML\/CSS\/JS...\",\"breadcrumb\":{\"@id\":\"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/studio.ican-design.fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carte interactive VivaTech \/ Webdesign 02\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studio.ican-design.fr\/#website\",\"url\":\"https:\/\/studio.ican-design.fr\/\",\"name\":\"Studio ICAN\",\"description\":\"D\u00e9couvrez les projets des \u00e9tudiants de l'ICAN : cr\u00e9ation num\u00e9rique, animation, game design, web design, cr\u00e9ation web, motion design\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studio.ican-design.fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656\",\"name\":\"Nicolas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g\",\"caption\":\"Nicolas\"},\"sameAs\":[\"https:\/\/www.behance.net\/nicolasgervais\"],\"url\":\"https:\/\/studio.ican-design.fr\/author\/cd4vf9u296\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Carte interactive VivaTech \/ Webdesign 02 | Studio ICAN","description":"Les \u00e9tudiants devaient r\u00e9aliser une carte vectorielle sur Illustrator et interactive Figma ou HTML\/CSS\/JS...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/","og_locale":"fr_FR","og_type":"article","og_title":"Carte interactive VivaTech \/ Webdesign 02 | Studio ICAN","og_description":"Les \u00e9tudiants devaient r\u00e9aliser une carte vectorielle sur Illustrator et interactive Figma ou HTML\/CSS\/JS...","og_url":"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/","og_site_name":"Studio ICAN","article_published_time":"2025-06-18T07:28:01+00:00","article_modified_time":"2025-06-18T07:28:33+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2025\/06\/viva00.jpg","type":"image\/jpeg"}],"author":"Nicolas","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nicolas","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/","url":"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/","name":"Carte interactive VivaTech \/ Webdesign 02 | Studio ICAN","isPartOf":{"@id":"https:\/\/studio.ican-design.fr\/#website"},"datePublished":"2025-06-18T07:28:01+00:00","dateModified":"2025-06-18T07:28:33+00:00","author":{"@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656"},"description":"Les \u00e9tudiants devaient r\u00e9aliser une carte vectorielle sur Illustrator et interactive Figma ou HTML\/CSS\/JS...","breadcrumb":{"@id":"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studio.ican-design.fr\/carte-interactive-vivatech-webdesign-02\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/studio.ican-design.fr\/"},{"@type":"ListItem","position":2,"name":"Carte interactive VivaTech \/ Webdesign 02"}]},{"@type":"WebSite","@id":"https:\/\/studio.ican-design.fr\/#website","url":"https:\/\/studio.ican-design.fr\/","name":"Studio ICAN","description":"D\u00e9couvrez les projets des \u00e9tudiants de l'ICAN : cr\u00e9ation num\u00e9rique, animation, game design, web design, cr\u00e9ation web, motion design","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studio.ican-design.fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656","name":"Nicolas","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g","caption":"Nicolas"},"sameAs":["https:\/\/www.behance.net\/nicolasgervais"],"url":"https:\/\/studio.ican-design.fr\/author\/cd4vf9u296\/"}]}},"_links":{"self":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/11488"}],"collection":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/comments?post=11488"}],"version-history":[{"count":5,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/11488\/revisions"}],"predecessor-version":[{"id":11574,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/11488\/revisions\/11574"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/media\/11495"}],"wp:attachment":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/media?parent=11488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/categories?post=11488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/tags?post=11488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}