{"id":11021,"date":"2025-02-24T14:57:56","date_gmt":"2025-02-24T13:57:56","guid":{"rendered":"https:\/\/studio.ican-design.fr\/?p=11021"},"modified":"2025-03-09T20:06:54","modified_gmt":"2025-03-09T19:06:54","slug":"abundata-webdesign-02","status":"publish","type":"post","link":"https:\/\/studio.ican-design.fr\/abundata-webdesign-02\/","title":{"rendered":"Abundata \/ Webdesign 02"},"content":{"rendered":"

L\u2019histoire de la surconsommation \u00e0 travers les 30 glorieuses. Cinquante ans plus tard, nous revenons gr\u00e2ce \u00e0 notre site web, sur ce tournant historique et ses cons\u00e9quences.<\/p>\n

<\/p>\n

L’\u00e9quipe<\/h2>\n

Julie Lubet<\/a> \/ \u00c9mile Renault<\/a> \/ Shelley Fenouillet<\/a> \/ <\/strong>Oc\u00e9ane Dos Santos<\/strong><\/a><\/p>\n

Coordination p\u00e9dagogique projet :<\/strong> <\/a>Nicolas GERVAIS<\/a><\/p>\n

Intentions<\/h2>\n

\"\"Dans notre soci\u00e9t\u00e9 o\u00f9 la consommation est au c\u0153ur des d\u00e9bats, il est essentiel de comprendre d\u2019o\u00f9 vient cette culture de la surconsommation. Les Trente Glorieuses<\/strong> (1945-1975), p\u00e9riode marqu\u00e9e par une prosp\u00e9rit\u00e9 \u00e9conomique et des innovations qui ont radicalement transform\u00e9 le quotidien des m\u00e9nages et les modes de vie… Cinquante ans plus tard, nous revenons sur ce tournant historique et sur ses cons\u00e9quences, via un site web ambitieux et s\u00e9duisant…<\/p>\n

\"\"Nous avons imagin\u00e9 un partenariat entre l\u2019Institut national de l\u2019audiovisuel (INA)<\/em>, \u00e0 l’occasion de la comm\u00e9moration des 50 ans de cet organisme en lien avec cette \u00e9poque charni\u00e8re, et le m\u00e9dia moderne Brut<\/em> (consult\u00e9 particuli\u00e8rement par notre cible).
\nL\u2019INA est une institution sp\u00e9cialis\u00e9e dans la pr\u00e9servation, l\u2019archivage et la valorisation du patrimoine audiovisuel fran\u00e7ais, tandis que Brut est une plateforme de m\u00e9dia digital orient\u00e9e vers les jeunes g\u00e9n\u00e9rations, avec un format court et un style dynamique adapt\u00e9 aux r\u00e9seaux sociaux…<\/p>\n

Probl\u00e9matique & concept<\/h3>\n

\"\"<\/p>\n

En quoi les Trente Glorieuses ont-elles fa\u00e7onn\u00e9 les bases de la soci\u00e9t\u00e9 de surconsommation actuelle et comment en transmettre les enjeux et cons\u00e9quences aux jeunes g\u00e9n\u00e9rations de 18-30 ans ? Comment sensibiliser les 18-30 ans sur leur consommation avec un site web ludique et immersif ?<\/p>\n

Notre projet s\u2019adresse donc \u00e0 un public qui souhaite enrichir sa compr\u00e9hension de l\u2019histoire sociale et \u00e9conomique, notamment en explorant les origines et les cons\u00e9quences de la surconsommation \u00e0 travers les Trente Glorieuses…
\n> Dossier Abundata<\/a><\/strong><\/p>\n

Identit\u00e9 visuelle<\/h2>\n

Pour la cr\u00e9ation de notre logo<\/strong>, nous nous sommes appuy\u00e9s sur deux fonctions. Premi\u00e8rement la fonction phatique<\/em> qui a pour but d\u2019attirer le regard… Ainsi que sur la fonction r\u00e9f\u00e9rentielle pour que le logo repr\u00e9sente notre sujet…<\/p>\n

\"\"Un processus it\u00e9ratif. <\/strong>J\u2019ai d\u2019abord voulu ins\u00e9rer les lettres du nom du projet \u00abABUNDATA\u00bb entre les lignes du codes barres.. Le probl\u00e8me \u00e9tait que si je ne r\u00e9duisait pas l\u2019intensit\u00e9 du noir des ligne, le logo serait illisible. J\u2019ai donc utilis\u00e9 de la couleur pour cr\u00e9er un contraste avec les lettres. Malheureusement le probl\u00e8me de lisibilit\u00e9 persistait malgr\u00e9 l\u2019int\u00e9gration des couleurs apr\u00e8s plusieurs versions diff\u00e9rentes. <\/em>C\u2019est \u00e0 partir du moment ou je souhaite placer le code barre en dessous des caract\u00e8res typographiques que le logo final devient plus lisible…<\/em><\/p>\n

\"\"<\/p>\n

Pour la forme finale du logo<\/strong>, j\u2019ai voulu m\u2019inspirer de la forme rectangulaire d\u2019un code barre qui est le symbole cl\u00e9 de la marchandisation des produits… Pour renforcer la ressemblance avec le code-barre, j\u2019ai ajout\u00e9 des chiffres et des lettres au pied des caract\u00e8res…<\/p>\n

\"\"<\/h3>\n

Pour r\u00e9aliser notre affiche<\/strong>, j’ai utilis\u00e9 un ton humoristique avec une publicit\u00e9 d\u00e9tourn\u00e9e de l\u2019\u00e9poque. Je souhaite rendre une pub absurde, en montrant une cons\u00e9quence de la surconsommation : acheter des choses dont on n\u2019a pas besoin. Ainsi, le message \u00ab(d\u00e9)consomme-moi si tu peux\u00bb invite l\u2019audience \u00e0 repenser ses habitudes et questionner un fait soci\u00e9tal. L\u2019utilisation du tutoiement permet de rendre plus personnelle l\u2019accroche et plus accessible…
\n> Dossier Abundata<\/a><\/strong><\/p>\n

UI\/UX, Webdesign<\/h2>\n

\"\"La mise en page<\/strong> combine souvent une image avec un texte introductif. Cette association vise \u00e0 capter l\u2019attention d\u00e8s le premier regard tout en introduisant de mani\u00e8re concise l\u2019objectif ou la mission du site. L\u2019image est donc positionn\u00e9e de mani\u00e8re \u00e0 attirer imm\u00e9diatement l\u2019\u0153il de l\u2019utilisateur, et le bloc de texte est bien d\u00e9limit\u00e9, permettant une lecture fluide et rapide, renforc\u00e9e par un titrage marqu\u00e9.<\/p>\n

Nous avons \u00e9galement choisi d\u2019int\u00e9grer les modes sombre et clair<\/strong> afin de r\u00e9pondre aux besoins de nos utilisateurs. Le mode sombre est adapt\u00e9 aux environnements \u00e0 faible luminosit\u00e9, ce qui permet de r\u00e9duire la fatigue oculaire et d\u2019am\u00e9liorer le confort pour les utilisateurs… De plus, il offre un design moderne et \u00e9l\u00e9gant, tout en permettant une \u00e9conomie d\u2019\u00e9nergie sur certains types d\u2019\u00e9crans. Enfin, le monde sombre reprend la couleur bleu de l\u2019INA…<\/p>\n

> Lien prototype interactif\u00a0<\/strong><\/a><\/p>\n

Vid\u00e9o d\u00e9mo<\/h2>\n