{"id":11732,"date":"2025-07-08T16:40:34","date_gmt":"2025-07-08T14:40:34","guid":{"rendered":"https:\/\/studio.ican-design.fr\/?p=11732"},"modified":"2025-07-08T18:15:26","modified_gmt":"2025-07-08T16:15:26","slug":"scrollytelling-2025-webdesign-02","status":"publish","type":"post","link":"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/","title":{"rendered":"Scrollytelling 2025 \/ Webdesign 02"},"content":{"rendered":"

Le travail porte sur le choix d’un article qui doit \u00eatre adapt\u00e9 et transpos\u00e9 \u00e0 la modalit\u00e9 d’une lecture interactive sur mobile et li\u00e9e au scroll vertical<\/em>, en produisant des contenus exclusifs (illustration, vid\u00e9o, sch\u00e9ma, visuel…).<\/p>\n

<\/p>\n

Coordination projet :<\/em> Nicolas Tilly<\/p>\n

Pixel, a biography<\/h2>\n

Un projet r\u00e9alis\u00e9 par<\/strong> : Noa Dufresne, Kylian Bourdelas, Ethan Antoine, Shelley Fenouillet<\/p>\n

Nous avons choisi l\u2019article \u00ab The Biography of the Pixel<\/strong> \u00bb, publi\u00e9 sur le site Aeon par Alvy Ray Smith, universitaire, sp\u00e9cialiste en informatique graphique et cofondateur de Pixar. Il s\u2019agit d\u2019un r\u00e9sum\u00e9 accessible de son ouvrage \u00e9ponyme, et qui retrace l\u2019histoire scientifique et culturelle du pixel. Cet article d\u00e9veloppe un sujet passionnant, dense et parfois complexe: l\u2019origine et l\u2019\u00e9volution du pixel. Mais son format d\u2019origine \u00e9tant lin\u00e9aire, statique et tr\u00e8s textuel, peut en freiner la lecture, surtout aupr\u00e8s d\u2019un public plus jeune ou peu familier avec les notions scientifiques abord\u00e9es.<\/p>\n

Le scrollytelling<\/em> permet d\u2019associer texte, visuels et animations dans une logique de lecture fluide, immersive et s\u00e9quenc\u00e9e. Il s\u2019agit d\u2019un format id\u00e9al pour guider progressivement l\u2019utilisateur dans la compr\u00e9hension d\u2019un contenu dense, tout en jouant sur la narration visuelle, les transitions et les interactions…<\/p>\n

Quelques maquettes<\/h3>\n

\"\"<\/p>\n

Liens et vid\u00e9o d\u00e9mo<\/h3>\n

Prototype Figma<\/a>
\nGithub\/ Site cod\u00e9 (version mobile)<\/a>
\nDossier de conception<\/a><\/p>\n

\nhttps:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2025\/07\/Web02Pixel.mp4<\/a><\/video><\/div>\n

Typewritter<\/h2>\n

Un projet r\u00e9alis\u00e9 par<\/strong> : Souhil Kehli, Matthias Proenca Goncalves da Costa, Emile Renault, Julie Lubet<\/p>\n

Le projet s\u2019appuie sur l\u2019article \u201cA Visual History of Typewriter Art from 1893 to Today<\/strong>\u201d, publi\u00e9 en 2014 sur le site The Marginalian par Maria Popova… Cet article retrace l\u2019histoire m\u00e9connue de l\u2019art r\u00e9alis\u00e9 \u00e0 la machine \u00e0 \u00e9crire, une pratique artistique qui m\u00eale texte et image depuis la fin du XIXe si\u00e8cle. \u00c0 travers des \u0153uvres souvent r\u00e9alis\u00e9es avec une grande pr\u00e9cision m\u00e9canique, ce m\u00e9dium explore des formes hybrides entre \u00e9criture et composition visuelle, offrant un pont entre tradition et modernit\u00e9. Maria Popova, par son travail, met en lumi\u00e8re cette esth\u00e9tique singuli\u00e8re qui interroge la valeur artistique d\u2019un outil ancien dans un contexte contemporain…<\/p>\n

L\u2019objectif de ce projet est de rendre accessible et attrayante une culture visuelle riche, mais peu connue, en proposant un contenu enrichi d\u2019illustrations, vid\u00e9os et sch\u00e9mas exclusifs, tout en respectant les contraintes techniques li\u00e9es \u00e0 la navigation sur smartphone. Le d\u00e9fi est de conjuguer esth\u00e9tique, ergonomie et interaction pour offrir au public une immersion sensible dans cet univers artistique…<\/p>\n

Quelques maquettes<\/h3>\n

\"\"<\/p>\n

Liens et vid\u00e9o d\u00e9mo<\/h3>\n

Prototype Figma<\/a>
\nGithub \/ Site cod\u00e9 (version mobile)<\/a>
\nDossier de conception<\/a><\/p>\n

https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2025\/07\/Web02TypeWriter.mp4<\/a><\/video><\/div>\n

Le guide du Tarot<\/h2>\n

Un projet r\u00e9alis\u00e9 par<\/strong> : Nabila Yagoubi – Ela Mahjoub – Loan Lefranc- Laure Carmont<\/p>\n

Le tarot est un ancien jeu charg\u00e9 de symboles et souvent utilis\u00e9 pour la r\u00e9flexion personnelle ou la m\u00e9ditation. Compos\u00e9 de 78 cartes il se divise en deux grandes cat\u00e9gories :
\n– Les 22 arcanes majeurs repr\u00e9sentent des arch\u00e9types universels.
\n– Les 56 arcanes mineurs plus semblables aux cartes \u00e0 jouer qui \u00e9voquent notre quotidien.
\nAutrefois r\u00e9serv\u00e9 au monde de l\u2019\u00e9sot\u00e9risme le Tarot fait aujourd\u2019hui un v\u00e9ritable retour en force. De plus en plus de gens l\u2019utilisent comme un moyen de d\u00e9veloppement personnel ou d\u2019introspection.<\/p>\n

Cr\u00e9er une exp\u00e9rience immersive et engageante. <\/strong>Le Tarot peut sembler un peu compliqu\u00e9 et myst\u00e9rieux, surtout pour les jeunes g\u00e9n\u00e9rations. Donc pour le rendre plus s\u00e9duisant et accessible, il est crucial de le recontextualiser et de le “r\u00e9inventer” (en respectant sa symbolique)…
\nUn design moderne. <\/strong>En s\u2019inspirant de sites comme Labyrinthos<\/em>, notre approche mise sur des lignes simples pour \u00e9viter le \u201ctrop-plein\u201d, des couleurs pastel et douces, mais aussi des animations l\u00e9g\u00e8res qui rythment la navigation sans l\u2019alourdir. Ces choix visent \u00e0 s\u00e9duire un public familier des codes du design num\u00e9rique et \u00e0 offrir une exp\u00e9rience fluide et intuitive.<\/p>\n

Quelques maquettes<\/h3>\n

\"\"<\/p>\n

Liens et vid\u00e9o D\u00e9mo<\/h3>\n

Prototype Figma<\/a>
\nDossier de conception<\/a><\/p>\n

https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2025\/07\/Web02Tarot.mp4<\/a><\/video><\/div>\n

Why Are Hyperlinks Blue?<\/h2>\n

Un projet r\u00e9alis\u00e9 par<\/strong> : L\u00e9a Galibert, Elikya Botomba, Lara Kaba & Oc\u00e9ane Dos Santos<\/p>\n

L\u2019article \u00abWhy Are Hyperlinks Blue?<\/strong>\u00bb publi\u00e9 sur le blog de Mozilla explore l\u2019origine de la couleur bleue utilis\u00e9e pour les liens hypertextes sur le web. Un article redig\u00e9 et publi\u00e9 par Elise Blanchard le 26 ao\u00fbt 2021 et qui cherche \u00e0 comprendre pourquoi le bleu est devenu la couleur standard des liens sur internet, alors qu\u2019aucune r\u00e8gle stricte n\u2019imposait ce choix \u00e0 l\u2019origine… Il explique par exemple que les premiers navigateurs web, notamment Mosaic (1993), utilisaient cette couleur par d\u00e9faut, un choix influenc\u00e9 par des consid\u00e9rations de lisibilit\u00e9 sur les \u00e9crans \u00e0 faible r\u00e9solution de l\u2019\u00e9poque…<\/p>\n

Notre projet vise \u00e0 vulgariser l\u2019histoire et l\u2019\u00e9volution de la couleur des hyperliens, en particulier le bleu, \u00e0 travers une exp\u00e9rience interactive de type \u201cscrollytelling\u201d, pens\u00e9e pour une navigation mobile fluide et intuitive. L\u2019objectif est de rendre un sujet technique accessible, engageant et visuellement stimulant…<\/p>\n

\"\"<\/p>\n

Liens et vid\u00e9o d\u00e9mo<\/h3>\n

Prototype Figma<\/a>
\nGithub \/ Site cod\u00e9 (version mobile)<\/a>
\nDossier de conception<\/a><\/p>\n

https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2025\/07\/Web02Hyperlinks.mp4<\/a><\/video><\/div>\n","protected":false},"excerpt":{"rendered":"

Le travail porte sur le choix d’un article qui doit \u00eatre adapt\u00e9 et transpos\u00e9 \u00e0 la modalit\u00e9 d’une lecture interactive sur mobile et li\u00e9e au scroll vertical, en produisant des contenus exclusifs (illustration, vid\u00e9o, sch\u00e9ma, visuel…).<\/p>\n","protected":false},"author":12,"featured_media":11794,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[381,15],"tags":[871,872,792],"acf":[],"yoast_head":"\nScrollytelling 2025 \/ Webdesign 02 | Studio ICAN<\/title>\n<meta name=\"description\" content=\"L'objectif \u00e9tait de construire un contenu dans une page Web, adapt\u00e9 au mobile et au scroll vertical...\" \/>\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\/scrollytelling-2025-webdesign-02\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scrollytelling 2025 \/ Webdesign 02 | Studio ICAN\" \/>\n<meta property=\"og:description\" content=\"L'objectif \u00e9tait de construire un contenu dans une page Web, adapt\u00e9 au mobile et au scroll vertical...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio ICAN\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-08T14:40:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-08T16:15:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2025\/07\/scrolly00.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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/\",\"url\":\"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/\",\"name\":\"Scrollytelling 2025 \/ Webdesign 02 | Studio ICAN\",\"isPartOf\":{\"@id\":\"https:\/\/studio.ican-design.fr\/#website\"},\"datePublished\":\"2025-07-08T14:40:34+00:00\",\"dateModified\":\"2025-07-08T16:15:26+00:00\",\"author\":{\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656\"},\"description\":\"L'objectif \u00e9tait de construire un contenu dans une page Web, adapt\u00e9 au mobile et au scroll vertical...\",\"breadcrumb\":{\"@id\":\"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/studio.ican-design.fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scrollytelling 2025 \/ 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":"Scrollytelling 2025 \/ Webdesign 02 | Studio ICAN","description":"L'objectif \u00e9tait de construire un contenu dans une page Web, adapt\u00e9 au mobile et au scroll vertical...","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\/scrollytelling-2025-webdesign-02\/","og_locale":"fr_FR","og_type":"article","og_title":"Scrollytelling 2025 \/ Webdesign 02 | Studio ICAN","og_description":"L'objectif \u00e9tait de construire un contenu dans une page Web, adapt\u00e9 au mobile et au scroll vertical...","og_url":"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/","og_site_name":"Studio ICAN","article_published_time":"2025-07-08T14:40:34+00:00","article_modified_time":"2025-07-08T16:15:26+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2025\/07\/scrolly00.jpg","type":"image\/jpeg"}],"author":"Nicolas","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nicolas","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/","url":"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/","name":"Scrollytelling 2025 \/ Webdesign 02 | Studio ICAN","isPartOf":{"@id":"https:\/\/studio.ican-design.fr\/#website"},"datePublished":"2025-07-08T14:40:34+00:00","dateModified":"2025-07-08T16:15:26+00:00","author":{"@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656"},"description":"L'objectif \u00e9tait de construire un contenu dans une page Web, adapt\u00e9 au mobile et au scroll vertical...","breadcrumb":{"@id":"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studio.ican-design.fr\/scrollytelling-2025-webdesign-02\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/studio.ican-design.fr\/"},{"@type":"ListItem","position":2,"name":"Scrollytelling 2025 \/ 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\/11732"}],"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=11732"}],"version-history":[{"count":5,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/11732\/revisions"}],"predecessor-version":[{"id":11815,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/11732\/revisions\/11815"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/media\/11794"}],"wp:attachment":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/media?parent=11732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/categories?post=11732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/tags?post=11732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}