{"id":1635,"date":"2026-05-21T11:53:14","date_gmt":"2026-05-21T09:53:14","guid":{"rendered":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/?p=1635"},"modified":"2026-05-21T11:59:37","modified_gmt":"2026-05-21T09:59:37","slug":"tim-burton","status":"publish","type":"post","link":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/?p=1635","title":{"rendered":"Tim Burton"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">M\u00e9lina LEGLAND et Lina DUMALIN | Promotion 2025-2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le projet pr\u00e9sent\u00e9 consiste en la conception d\u2019un site internet enti\u00e8rement d\u00e9di\u00e9 \u00e0 l\u2019univers du r\u00e9alisateur Tim Burton, figure embl\u00e9matique du cin\u00e9ma fantastique et gothique. Passionn\u00e9es par son travail et son esth\u00e9tique visuelle singuli\u00e8re, les cr\u00e9atrices du projet ont choisi de d\u00e9velopper une plateforme immersive mettant en avant son parcours, ses \u0153uvres ainsi que les caract\u00e9ristiques artistiques qui d\u00e9finissent son univers cin\u00e9matographique.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019objectif principal de ce projet \u00e9tait de concevoir un portail web capable de retranscrire l\u2019identit\u00e9 visuelle propre \u00e0 Tim Burton tout en proposant une navigation claire et accessible aux visiteurs. L\u2019ensemble du site a donc \u00e9t\u00e9 pens\u00e9 autour d\u2019une ambiance sombre, myst\u00e9rieuse et inspir\u00e9e des codes esth\u00e9tiques du r\u00e9alisateur.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Afin de respecter cet univers graphique, une palette de couleurs froides domin\u00e9e par des tons noirs, bleus, verts et violets a \u00e9t\u00e9 utilis\u00e9e. Une attention particuli\u00e8re a \u00e9galement \u00e9t\u00e9 port\u00e9e au choix typographique avec l\u2019utilisation d\u2019une police rappelant l\u2019univers gothique et fantastique de Tim Burton pour les grands titres, tout en conservant une \u00e9criture plus sobre afin de garantir une bonne lisibilit\u00e9 des contenus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le portail propose plusieurs rubriques permettant aux utilisateurs de d\u00e9couvrir les diff\u00e9rentes facettes du r\u00e9alisateur : sa biographie, sa filmographie, son univers artistique, les coulisses de production ainsi que des expositions consacr\u00e9es \u00e0 son travail. L\u2019objectif \u00e9tait de cr\u00e9er une plateforme \u00e0 la fois informative, immersive et coh\u00e9rente avec l\u2019identit\u00e9 artistique du sujet trait\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le site a \u00e9t\u00e9 structur\u00e9 autour d\u2019un menu de navigation compos\u00e9 de plusieurs cat\u00e9gories principales : \u00ab Biographie \u00bb, \u00ab Filmographie \u00bb, \u00ab Behind the Scene \u00bb, \u00ab Univers et Style \u00bb ainsi que \u00ab Expositions \u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Certaines rubriques ont \u00e9t\u00e9 subdivis\u00e9es afin de faciliter l\u2019organisation des contenus. Par exemple, la section \u00ab Filmographie \u00bb distingue les films en prises de vue r\u00e9elles, les courts-m\u00e9trages et les films d\u2019animation. Cette organisation permet de rendre les informations plus accessibles tout en facilitant la navigation des utilisateurs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La page d\u2019accueil adopte volontairement une structure sobre et \u00e9quilibr\u00e9e avec une mise en page en deux colonnes. Une premi\u00e8re section permet de pr\u00e9senter le projet ainsi que ses cr\u00e9atrices, tandis qu\u2019une seconde rassemble diff\u00e9rents liens utiles comme les r\u00e9seaux sociaux ou les informations li\u00e9es au r\u00e9alisateur.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019ensemble du portail a \u00e9t\u00e9 pens\u00e9 pour offrir une exp\u00e9rience immersive tout en conservant une organisation claire des contenus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le premier \u00e9l\u00e9ment cl\u00e9 du site concerne la timeline pr\u00e9sente dans la rubrique \u00ab Filmographie \u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_21_39-1024x683.png\" alt=\"\" class=\"wp-image-1636\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_21_39-1024x683.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_21_39-300x200.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_21_39-768x512.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_21_39-850x567.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_21_39.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">Figure 1 : La timeline<\/mark><\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Cette fonctionnalit\u00e9 permet aux utilisateurs de visualiser chronologiquement les diff\u00e9rents films r\u00e9alis\u00e9s par Tim Burton afin de mieux comprendre l\u2019\u00e9volution de sa carri\u00e8re et de son univers artistique au fil des ann\u00e9es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Chaque \u0153uvre int\u00e9gr\u00e9e \u00e0 cette timeline est cliquable et redirige directement vers une page d\u00e9di\u00e9e contenant des informations compl\u00e9mentaires sur le film s\u00e9lectionn\u00e9. Cette organisation facilite l\u2019exploration de la filmographie tout en rendant la navigation plus dynamique et intuitive.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Au d\u00e9part, la mise en place d\u2019une timeline horizontale avait \u00e9t\u00e9 envisag\u00e9e afin de renforcer l\u2019aspect cin\u00e9matographique de la pr\u00e9sentation. Cependant, les limitations techniques du plugin Spectra ont conduit au choix d\u2019une timeline verticale. Finalement, cette solution s\u2019est r\u00e9v\u00e9l\u00e9e plus adapt\u00e9e au projet puisqu\u2019elle offre une meilleure lisibilit\u00e9 et davantage de flexibilit\u00e9 pour l\u2019ajout futur de nouveaux contenus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cette section joue donc un r\u00f4le important dans la structuration des informations et dans la valorisation du parcours cin\u00e9matographique du r\u00e9alisateur.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le deuxi\u00e8me \u00e9l\u00e9ment cl\u00e9 du site repose sur la galerie d\u2019images int\u00e9gr\u00e9e \u00e0 la page \u00ab Behind the Scene \u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/43fb7c64-d1f7-4669-a59c-8821243be50e-1024x683.png\" alt=\"\" class=\"wp-image-1638\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/43fb7c64-d1f7-4669-a59c-8821243be50e-1024x683.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/43fb7c64-d1f7-4669-a59c-8821243be50e-300x200.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/43fb7c64-d1f7-4669-a59c-8821243be50e-768x512.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/43fb7c64-d1f7-4669-a59c-8821243be50e-850x567.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/43fb7c64-d1f7-4669-a59c-8821243be50e.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">Figure 2 : Galerie d\u2019images<\/mark><\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Cette rubrique a \u00e9t\u00e9 con\u00e7ue afin de mettre en avant les coulisses des productions de Tim Burton ainsi que les diff\u00e9rentes \u00e9tapes de cr\u00e9ation de ses films, notamment les techniques li\u00e9es \u00e0 la stop motion et aux effets visuels.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans un premier temps, l\u2019utilisation d\u2019un carrousel d\u2019images avait \u00e9t\u00e9 envisag\u00e9e. Cependant, apr\u00e8s plusieurs tests r\u00e9alis\u00e9s avec les fonctionnalit\u00e9s propos\u00e9es par Spectra, le choix s\u2019est finalement port\u00e9 sur une galerie d\u2019images classique, jug\u00e9e plus adapt\u00e9e \u00e0 l\u2019organisation des contenus et \u00e0 l\u2019esth\u00e9tique g\u00e9n\u00e9rale du site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cette galerie permet aux utilisateurs de parcourir diff\u00e9rents visuels li\u00e9s aux d\u00e9cors, aux personnages, aux marionnettes ainsi qu\u2019aux diff\u00e9rentes phases de tournage. Elle contribue \u00e0 renforcer l\u2019aspect immersif du portail tout en valorisant le travail artistique et technique pr\u00e9sent derri\u00e8re chaque production.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019objectif de cette section est \u00e9galement p\u00e9dagogique puisqu\u2019elle permet de mieux comprendre les m\u00e9thodes de cr\u00e9ation propres \u00e0 l\u2019univers de Tim Burton.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le troisi\u00e8me \u00e9l\u00e9ment cl\u00e9 du projet concerne le travail r\u00e9alis\u00e9 autour de l\u2019identit\u00e9 graphique et de l\u2019ambiance visuelle du site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_41_15-1024x683.png\" alt=\"\" class=\"wp-image-1640\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_41_15-1024x683.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_41_15-300x200.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_41_15-768x512.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_41_15-850x567.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-21-mai-2026-11_41_15.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">Figure 3 : Ambiance visuelle<\/mark><\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019ensemble des choix esth\u00e9tiques a \u00e9t\u00e9 pens\u00e9 afin de retranscrire les codes visuels embl\u00e9matiques de l\u2019univers de Tim Burton : univers sombre, atmosph\u00e8re gothique, contrastes marqu\u00e9s et esth\u00e9tique fantastique.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le design du portail repose sur des couleurs froides et sombres, associ\u00e9es \u00e0 des visuels immersifs inspir\u00e9s de ses films. La typographie utilis\u00e9e pour les grands titres rappelle \u00e9galement les univers fantastiques et myst\u00e9rieux pr\u00e9sents dans ses \u0153uvres.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cette coh\u00e9rence graphique permet de plonger imm\u00e9diatement l\u2019utilisateur dans l\u2019univers du r\u00e9alisateur d\u00e8s son arriv\u00e9e sur le site. Elle contribue \u00e9galement \u00e0 renforcer l\u2019identit\u00e9 du projet et \u00e0 proposer une exp\u00e9rience utilisateur plus immersive et engageante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La cr\u00e9ation du site consacr\u00e9 \u00e0 \u00ab Tim Burton \u00bb a permis de d\u00e9velopper un portail immersif capable de retranscrire visuellement et artistiquement l\u2019univers d\u2019un r\u00e9alisateur embl\u00e9matique du cin\u00e9ma fantastique.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ce projet a \u00e9galement permis d\u2019aborder plusieurs dimensions importantes de la conception web, notamment l\u2019organisation des contenus, l\u2019exp\u00e9rience utilisateur, le design graphique ainsi que l\u2019int\u00e9gration de contenus dynamiques sous WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Par ailleurs, ce travail a favoris\u00e9 une r\u00e9flexion approfondie autour de la coh\u00e9rence visuelle et de l\u2019importance de l\u2019identit\u00e9 graphique dans la cr\u00e9ation d\u2019un site th\u00e9matique. Enfin, il a permis de mieux comprendre les contraintes techniques li\u00e9es au d\u00e9veloppement web tout en renfor\u00e7ant la cr\u00e9ativit\u00e9 et la capacit\u00e9 d\u2019adaptation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>M\u00e9lina LEGLAND et Lina DUMALIN | Promotion 2025-2026 Le projet pr\u00e9sent\u00e9 consiste en la conception d\u2019un site internet enti\u00e8rement d\u00e9di\u00e9 \u00e0 l\u2019univers du r\u00e9alisateur Tim Burton, figure embl\u00e9matique du cin\u00e9ma fantastique et gothique. Passionn\u00e9es par son travail et son esth\u00e9tique visuelle singuli\u00e8re, les cr\u00e9atrices du projet ont choisi de d\u00e9velopper une plateforme immersive mettant en&#8230;<\/p>\n","protected":false},"author":4,"featured_media":1642,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[74,336,334,335],"class_list":["post-1635","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arts-et-artistes","tag-cinema","tag-filmographie","tag-tim-burton","tag-univers-gothique"],"_links":{"self":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/posts\/1635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1635"}],"version-history":[{"count":3,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/posts\/1635\/revisions"}],"predecessor-version":[{"id":1644,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/posts\/1635\/revisions\/1644"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/media\/1642"}],"wp:attachment":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}