{"id":471,"date":"2026-10-21T22:02:55","date_gmt":"2026-10-22T02:02:55","guid":{"rendered":"https:\/\/fcharron.dectim.ca\/portfolio\/?page_id=471"},"modified":"2026-10-21T22:36:54","modified_gmt":"2026-10-22T02:36:54","slug":"projet-3","status":"publish","type":"page","link":"https:\/\/fcharron.dectim.ca\/portfolio\/projet-3\/","title":{"rendered":"Projet 3"},"content":{"rendered":"\n
<\/div><\/span>
\n
\n

Ranger kiki<\/h1>\n\n\n\n

design ui & UX\/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 contexte du projet demandait de cr\u00e9er<\/strong> une application de jeu en r\u00e9alit\u00e9 augment\u00e9e<\/strong> pour enfants<\/strong>, en utilisant le logiciel Figma<\/strong>. Nous avons d\u00fb employer des techniques assez pouss\u00e9es<\/strong> pour int\u00e9grer un minuteur, un syst\u00e8me de points et un jeu de cherche et trouve<\/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 et Int\u00e9grateur<\/strong><\/li>\n\n\n\n
  • Inspirations trouv\u00e9s sur Pinterest<\/strong><\/li>\n\n\n\n
  • Images Vectoriels trouv\u00e9s sur Vecteezy<\/strong><\/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 – wireframe de la maquette<\/h3>\n\n\n\n

    Pour commencer, j’ai cr\u00e9\u00e9 les wireframes du projet en utilisant des mod\u00e8les que nous avions, puis je les ai personnalis\u00e9s pour bien refl\u00e9ter mon identit\u00e9 cr\u00e9ative.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

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

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

    Je me suis rendu<\/strong> sur Pinterest pour trouver des inspirations sur le th\u00e8me de jeu que je voulais cr\u00e9er<\/strong>. J’ai opt\u00e9 pour un th\u00e8me naturel avec des petits animaux<\/strong>, car je voulais \u00e0 tout prix<\/strong> avoir une mascotte pour mon jeu.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

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

    \u00e9tape 3 – le guide de style<\/h3>\n\n\n\n

    Je me suis concentr\u00e9<\/strong> ensuite sur la conception<\/strong> de mon guide de style, avec ma palette de couleurs<\/strong>, mes typographies<\/strong> et les diff\u00e9rentes images vectorielles<\/strong> que j’ai trouv\u00e9es<\/strong> sur Vecteezy. J’ai finalement g\u00e9n\u00e9r\u00e9<\/strong> un personnage avec une intelligence artificielle<\/strong>, puis je l’ai recr\u00e9\u00e9 en vectoriel<\/strong> par moi-m\u00eame pour pouvoir ensuite l’animer<\/strong>.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

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

    \u00e9tape 4 – le design systeme<\/h3>\n\n\n\n

    J’ai par la suite, en utilisant mon wireframe, cr\u00e9\u00e9 la maquette qui regroupe l’enti\u00e8ret\u00e9 des pages et les diff\u00e9rentes versions du personnage dont j’avais besoin. J’ai ensuite tout prototyp\u00e9 pour dynamiser le projet et le rendre fonctionnel.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

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

    \u00e9tape 5 – animation des diff\u00e9rents objets<\/h3>\n\n\n\n

    Afin d’avoir une bonne vision globale et d’apporter une touche d’animation \u00e0 mon projet<\/strong>, j’ai con\u00e7u un syst\u00e8me de prototypage pouss\u00e9<\/strong>. J’ai soign\u00e9 chaque d\u00e9tail tout en mettant l’accent sur le personnage<\/strong>.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

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

    \u00e9tape 6 – Le prototypage finale du projet<\/h3>\n\n\n\n

    Finalement, je me suis occup\u00e9 du prototypage<\/strong> pour faire en sorte que le tout fonctionne<\/strong> et pour donner vie \u00e0 la mascotte<\/strong>. Cela m’a permis d’apporter ma touche de cr\u00e9ativit\u00e9<\/strong> et de me d\u00e9marquer des autres, tout en donnant au projet un aspect d’originalit\u00e9<\/strong> hors du commun.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

    \n

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

    En combinant la rigueur du prototypage et la libert\u00e9 de la cr\u00e9ation graphique, ce projet a trouv\u00e9 sa v\u00e9ritable identit\u00e9.<\/strong> L’int\u00e9gration de cette mascotte sur mesure, de sa conception par IA jusqu’\u00e0 sa vectorisation et son animation, apporte une vraie touche de magie \u00e0 l’exp\u00e9rience de jeu. C’est un projet complet qui d\u00e9montre qu’un design soign\u00e9 peut transformer une simple interface en un univers immersif et unique.<\/p>\n\n\n\n

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