{"id":509,"date":"2026-10-21T22:41:39","date_gmt":"2026-10-22T02:41:39","guid":{"rendered":"https:\/\/fcharron.dectim.ca\/portfolio\/?page_id=509"},"modified":"2026-10-21T23:39:17","modified_gmt":"2026-10-22T03:39:17","slug":"projet-4","status":"publish","type":"page","link":"https:\/\/fcharron.dectim.ca\/portfolio\/projet-4\/","title":{"rendered":"Projet 4"},"content":{"rendered":"\n
<\/div><\/span>
\n
\n

nike air mag<\/h1>\n\n\n\n

design ui\/prototypage – Figma – scolaire<\/h4>\n<\/div>\n<\/div><\/div>\n\n\n
\n\t\n
\n\t\n\n

contexte & but<\/h2>\n\n\n\n

Le projet consistait \u00e0 cr\u00e9er<\/strong> un site sur tablette pour promouvoir un produit de notre choix en montrant ses fonctionnalit\u00e9s<\/strong> et ses caract\u00e9ristiques<\/strong>. J’ai opt\u00e9 pour<\/strong> quelque chose qui me passionne beaucoup : ma paire de souliers pr\u00e9f\u00e9r\u00e9e<\/strong>.<\/p>\n\n<\/div>\n\n\n

\n\t\n\n

cr\u00e9dits<\/h2>\n\n\n\n
    \n
  • F\u00e9lix Charron – Designeur, Prototypeur<\/strong><\/li>\n\n\n\n
  • Images du produit trouv\u00e9s sur Behance<\/li>\n<\/ul>\n\n<\/div>\n\n<\/div>\n\n\n\n

    d\u00e9marche projet<\/h1>\n\n\n\n
    \"\"<\/span>
    \n
    \n

    \u00e9tape 1 – trouver le produit<\/h3>\n\n\n\n

    Pour commencer, je suis all\u00e9 sur Behance<\/strong> pour trouver des inspirations pour le projet. En tant que grand fan de la trilogie Back to the Future<\/strong>, j’ai d\u00e9cid\u00e9 de choisir<\/strong> la paire de souliers Nike Air Mag<\/strong>. Non seulement c’est un mod\u00e8le iconique, mais c’est aussi un produit tr\u00e8s int\u00e9ressant<\/strong> et ma paire de souliers pr\u00e9f\u00e9r\u00e9e<\/strong>.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

    \"\"<\/span>
    \n
    \n

    \u00e9tape 2 – moodboard<\/h3>\n\n\n\n

    Je suis all\u00e9 sur Pinterest ensuite<\/strong> pour trouver des id\u00e9es de design<\/strong> qui pourraient bien s’accorder avec le th\u00e8me<\/strong> du produit. J’ai donc opt\u00e9<\/strong> pour une approche plut\u00f4t futuriste<\/strong>.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

    \"\"<\/span>
    \n
    \n

    \u00e9tape 3 – d\u00e9but des maquettes<\/h3>\n\n\n\n

    Apr\u00e8s avoir trouv\u00e9<\/strong> mes inspirations, j’ai commenc\u00e9 \u00e0 r\u00e9aliser des maquettes de base (wireframes)<\/strong> pour d\u00e9finir la vision du projet, en y int\u00e9grant<\/strong> des images et des palettes de couleurs<\/strong>.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

    \"\"<\/span>
    \n
    \n

    \u00e9tape 4 – Design des wireframe<\/h3>\n\n\n\n

    Apr\u00e8s la phase d’inspiration<\/strong>, je me suis concentr\u00e9 sur la production des wireframes<\/strong> pour structurer la disposition des \u00e9l\u00e9ments de ma page. Une fois cette structure valid\u00e9e<\/strong>, je suis pass\u00e9 au design final<\/strong>.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

    \"\"<\/span>
    \n
    \n

    \u00e9tape 5 – design final des maquettes<\/h3>\n\n\n\n

    Apr\u00e8s la phase d’inspiration<\/strong> et la cr\u00e9ation des wireframes<\/strong>, je me suis concentr\u00e9<\/strong> sur le design haute fid\u00e9lit\u00e9 des maquettes<\/strong>, en appliquant tous les styles choisis<\/strong> et les images pour \u00e9tablir le design system final<\/strong>.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

    \"\"<\/span>
    \n
    \n

    \u00e9tape 6 – protoypage du projet<\/h3>\n\n\n\n

    Finalement, je me suis concentr\u00e9 sur le prototypage<\/strong> du projet pour rendre le tout dynamique<\/strong>. J’ai ainsi int\u00e9gr\u00e9 les animations, la direction artistique et les flux de navigation<\/strong> \u00e0 travers l’enti\u00e8ret\u00e9 du site.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

    \n

    d\u00e9onouement du projet<\/h2>\n\n\n\n

    En mariant l’esth\u00e9tique cyberpunk tir\u00e9e de Back to the Future et les codes du e-commerce moderne, ce site sur tablette trouve une identit\u00e9 visuelle forte.<\/strong> De la phase de recherche sur Pinterest jusqu’aux animations fluides du prototype final, chaque choix graphique a \u00e9t\u00e9 pens\u00e9 pour rendre hommage \u00e0 cette paire l\u00e9gendaire. C’est une r\u00e9alisation compl\u00e8te qui d\u00e9montre l’impact d’une direction artistique habit\u00e9e sur l’engagement de l’utilisateur.<\/p>\n\n\n\n

    r\u00e9sultat final<\/h2>\n\n\n\n
    \n