{"id":1527,"date":"2026-03-24T00:00:01","date_gmt":"2026-03-24T04:00:01","guid":{"rendered":"https:\/\/bbathalon.dectim.ca\/TP2\/?page_id=1527"},"modified":"2026-03-24T11:07:56","modified_gmt":"2026-03-24T15:07:56","slug":"timflix-application","status":"publish","type":"page","link":"https:\/\/bbathalon.dectim.ca\/TP2\/timflix-application\/","title":{"rendered":"Projet d’obadia"},"content":{"rendered":"\n
\n
\n
\n

Obadia<\/p>\n\n\n

Projet d’obadia<\/h1>\n\n\n

Projet de renouvellement pour le site de la compagnie \u00a0\u00bbTimFlix\u00a0\u00bb, concepteur d’application mobile.<\/p>\n\n\n\n

\n
#UX design<\/a><\/div>\n\n\n\n
#Brands<\/a><\/div>\n\n\n\n
#UI Designer<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n

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

La marque Timflix Application nous a contact\u00e9 dans le but de refaire le design de leur application mobile, Timflix.<\/p>\n\n\n\n

Ils ont \u00e9t\u00e9 satisfait du prototype propos\u00e9 \u00e0 la fin de l’exp\u00e9rience.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\"\"<\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/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

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

\n
\n
\n

Moodboard<\/h3>\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
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Moodboard de l’\u00e9cran titre<\/p>\n<\/div>\n\n\n\n

\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Genre d’avatar planifi\u00e9.<\/p>\n<\/div>\n\n\n\n

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

Comparables du fond de jeu<\/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

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

\n
\n
\n
\n

Wireframes<\/h3>\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

\n
\"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div>\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

Maquette<\/h3>\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
\n

D\u00e9fis rencontr\u00e9s<\/h3>\n\n\n\n
    \n
  • Placement des informations<\/li>\n\n\n\n
  • Polices d’\u00e9criture erron\u00e9<\/li>\n\n\n\n
  • Message incoh\u00e9rent<\/li>\n<\/ul>\n<\/div>\n\n\n\n
    \n

    Solutions apport\u00e9es<\/h3>\n\n\n\n
      \n
    • Meilleures transitions<\/li>\n\n\n\n
    • Changement de l’ordre et positions des informations<\/li>\n\n\n\n
    • Changement d’images<\/li>\n\n\n\n
    • Red\u00e9finition du message<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
      \n
      \n