Nathan Larose

TimFlix application

Une application qui vous permet de partager vos ratting de film avec vos amis !

Contexte

Ce projet a été réalisé dans le cadre du cours Design interactif (Techniques d’intégration multimédia).

Le mandat consistait à concevoir les interfaces principales d’une application mobile nommée TIMFLIX, destinée à permettre aux utilisateurs de partager leurs goûts cinématographiques, recommander des films et gérer une liste de films à voir.

L’application cible principalement un public âgé de 16 à 40 ans.

Objectif du projet

L’objectif principal était de concevoir une application mobile intuitive et engageante, optimisée pour le format iPhone 13 mini (375 x 812 px). Le projet visait à développer une expérience utilisateur fluide, favorisant l’interaction sociale autour du cinéma. L’application devait intégrer un système de vote dynamique, un profil utilisateur personnalisé, ainsi qu’un onboarding clair permettant aux nouveaux utilisateurs de comprendre rapidement les fonctionnalités.

Description du projet

TIMFLIX a été pensée comme une plateforme immersive où l’expérience utilisateur repose sur la simplicité et l’interaction. Le design met de l’avant une hiérarchie visuelle claire, une navigation intuitive et une direction artistique cohérente avec l’univers du cinéma. L’interface favorise la découverte de films grâce à un écran d’accueil structuré, tandis que le système de vote et les recommandations encouragent l’engagement. Une attention particulière a été portée à la lisibilité, à l’équilibre visuel et à la cohérence graphique sur l’ensemble des écrans.

01

Moodboard

D’où viens l’inspiration

La création du moodboard m’a permis de définir l’univers visuel du projet avant de passer au design. J’y ai rassemblé des inspirations graphiques, des palettes de couleurs, des typographies et des références d’interfaces afin d’établir une direction artistique cohérente. Cette étape m’a aidé à clarifier l’ambiance, le ton et l’identité visuelle du projet.

Moodboard

Fonts

Palette de couleurs

02

Wireframe

Le squelette du projet

Les wireframes ont servi à structurer l’architecture de l’information et l’organisation des éléments à l’écran. À cette étape, l’accent était mis sur la hiérarchie visuelle, l’ergonomie et la navigation plutôt que sur l’esthétique. Cela m’a permis de valider la logique des interactions et le parcours utilisateur avant de développer la version finale.

03

Maquette

Offrez à votre marque un nouveau départ.

La maquette haute fidélité représente la version visuelle complète du projet. J’y ai intégré la direction artistique définie précédemment en appliquant le design system, les styles et les composants créés dans Figma. Cette étape a permis de concrétiser l’identité du projet tout en assurant une cohérence graphique et une expérience utilisateur fluide.

Défis rencontrés

Illustration
Prototype du ratting
Couleurs
Clavier

Solutions apportées

Croquis claire
Nomenclature claire
Adobe palette de couleurs
Tutoriel du prof

Déclaration d’utilisation de l’IA

Certaines parties rédactionnelles ont été révisées et optimisées à l’aide d’une intelligence artificielle (ChatGPT), dans le respect du niveau 1 d’utilisation autorisé. La conception, la direction artistique et la réalisation technique du projet demeurent entièrement personnelles. Des images on été généré comme pictogramme dans le cardes du cours de DI.