{"id":11,"date":"2026-02-07T16:51:13","date_gmt":"2026-02-07T21:51:13","guid":{"rendered":"https:\/\/bbathalon.dectim.ca\/TP2\/?page_id=11"},"modified":"2026-04-24T16:39:29","modified_gmt":"2026-04-24T20:39:29","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/bbathalon.dectim.ca\/TP2\/portfolio\/","title":{"rendered":"TimFlix application"},"content":{"rendered":"\n
\n
\n
\n

Nathan Larose<\/p>\n\n\n

TimFlix application<\/h1>\n\n\n

Une application qui vous permet de partager vos ratting de film avec vos amis !<\/p>\n\n\n\n

\n
#UX design<\/a><\/div>\n\n\n\n
#UX design<\/a><\/div>\n\n\n\n
#Branding<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n

Contexte<\/h2>\n\n\n\n

Ce projet a \u00e9t\u00e9 r\u00e9alis\u00e9 dans le cadre du cours Design interactif (Techniques d\u2019int\u00e9gration multim\u00e9dia).<\/p>\n\n\n\n

Le mandat consistait \u00e0 concevoir les interfaces principales d\u2019une application mobile nomm\u00e9e TIMFLIX, destin\u00e9e \u00e0 permettre aux utilisateurs de partager leurs go\u00fbts cin\u00e9matographiques, recommander des films et g\u00e9rer une liste de films \u00e0 voir.<\/p>\n\n\n\n

L\u2019application cible principalement un public \u00e2g\u00e9 de 16 \u00e0 40 ans.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\n

Objectif du projet<\/h3>\n\n\n\n

L\u2019objectif principal \u00e9tait de concevoir une application mobile intuitive et engageante, optimis\u00e9e pour le format iPhone 13 mini (375 x 812 px). Le projet visait \u00e0 d\u00e9velopper une exp\u00e9rience utilisateur fluide, favorisant l\u2019interaction sociale autour du cin\u00e9ma. L\u2019application devait int\u00e9grer un syst\u00e8me de vote dynamique, un profil utilisateur personnalis\u00e9, ainsi qu\u2019un onboarding clair permettant aux nouveaux utilisateurs de comprendre rapidement les fonctionnalit\u00e9s.<\/p>\n<\/div>\n\n\n\n

\n

Description du projet<\/h3>\n\n\n\n

TIMFLIX a \u00e9t\u00e9 pens\u00e9e comme une plateforme immersive o\u00f9 l\u2019exp\u00e9rience utilisateur repose sur la simplicit\u00e9 et l\u2019interaction. Le design met de l\u2019avant une hi\u00e9rarchie visuelle claire, une navigation intuitive et une direction artistique coh\u00e9rente avec l\u2019univers du cin\u00e9ma. L\u2019interface favorise la d\u00e9couverte de films gr\u00e2ce \u00e0 un \u00e9cran d\u2019accueil structur\u00e9, tandis que le syst\u00e8me de vote et les recommandations encouragent l\u2019engagement. Une attention particuli\u00e8re a \u00e9t\u00e9 port\u00e9e \u00e0 la lisibilit\u00e9, \u00e0 l\u2019\u00e9quilibre visuel et \u00e0 la coh\u00e9rence graphique sur l\u2019ensemble des \u00e9crans.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

01<\/h1>\n\n\n\n
\n

Moodboard<\/h3>\n\n\n\n

D’o\u00f9 viens l’inspiration<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

La cr\u00e9ation du moodboard m\u2019a permis de d\u00e9finir l\u2019univers visuel du projet avant de passer au design. J\u2019y ai rassembl\u00e9 des inspirations graphiques, des palettes de couleurs, des typographies et des r\u00e9f\u00e9rences d\u2019interfaces afin d\u2019\u00e9tablir une direction artistique coh\u00e9rente. Cette \u00e9tape m\u2019a aid\u00e9 \u00e0 clarifier l\u2019ambiance, le ton et l\u2019identit\u00e9 visuelle du projet.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure><\/div>\n\n\n\n

Moodboard<\/p>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure><\/div>\n\n\n\n

Fonts<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n\n

Palette de couleurs<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

02<\/h1>\n\n\n\n
\n

Wireframe<\/h3>\n\n\n\n

Le squelette du projet<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Les wireframes ont servi \u00e0 structurer l\u2019architecture de l\u2019information et l\u2019organisation des \u00e9l\u00e9ments \u00e0 l\u2019\u00e9cran. \u00c0 cette \u00e9tape, l\u2019accent \u00e9tait mis sur la hi\u00e9rarchie visuelle, l\u2019ergonomie et la navigation plut\u00f4t que sur l\u2019esth\u00e9tique. Cela m\u2019a permis de valider la logique des interactions et le parcours utilisateur avant de d\u00e9velopper la version finale.<\/p>\n<\/div>\n\n\n\n

\"\"<\/figure>\n<\/div>\n\n\n\n
\n

03<\/h1>\n\n\n\n
\n

Maquette<\/h3>\n\n\n\n

Offrez \u00e0 votre marque un nouveau d\u00e9part.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

La maquette haute fid\u00e9lit\u00e9 repr\u00e9sente la version visuelle compl\u00e8te du projet. J\u2019y ai int\u00e9gr\u00e9 la direction artistique d\u00e9finie pr\u00e9c\u00e9demment en appliquant le design system, les styles et les composants cr\u00e9\u00e9s dans Figma. Cette \u00e9tape a permis de concr\u00e9tiser l\u2019identit\u00e9 du projet tout en assurant une coh\u00e9rence graphique et une exp\u00e9rience utilisateur fluide.<\/p>\n<\/div>\n\n\n\n

\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\n

D\u00e9fis rencontr\u00e9s<\/h3>\n\n\n\n
    \n
  • Illustration<\/li>\n\n\n\n
  • Prototype du ratting<\/li>\n\n\n\n
  • Couleurs<\/li>\n\n\n\n
  • Clavier<\/li>\n<\/ul>\n<\/div>\n\n\n\n
    \n

    Solutions apport\u00e9es<\/h3>\n\n\n\n
      \n
    • Croquis claire<\/li>\n\n\n\n
    • Nomenclature claire<\/li>\n\n\n\n
    • Adobe palette de couleurs<\/li>\n\n\n\n
    • Tutoriel du prof<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
      \n
      \n