LE CARNET DEMatys Coantin.

UX/UI DESIGNER RENNES & SARREBOURG, FRANCE

Salut, moi c’est Matys !

Des idées au crayon.
Des expériences
qui font sens.

Je conçois des interfaces claires et intuitives,
avec une attention particulière aux gens
qui les utilisent.

Découvrir mes projets
Le designer derrière les pixels
Portrait de Matys Coantin
Un œil créatif, l’esprit curieux.
UX/UI DESIGN DIRECTION ARTISTIQUE

01 / MES TRAVAUX

Les idées prennent forme.

De l’expérience utilisateur à l’identité visuelle.
Une sélection de projets et de recherches.

Projets & explorations
01UX/UI DESIGN
FlowTrack, concept d’application mobile pour les équipes logistiques, présenté sur un fond violet.

Projet étudiant · En groupe

FlowTrack

Réceptionner, scanner, suivre les stocks : une application mobile au service des équipes logistiques.

UX/UI designDesign systemApplication mobile
02DIRECTION ARTISTIQUE
Le carnet deMatys Coantin.Une identité, plusieurs supports.

Projet personnel · Direction artistique

Mon identité visuelle

Du CV au portfolio et aux réseaux sociaux : un univers personnel inspiré du carnet de création.

Identité visuelleDirection artistiquePrint & digital

Un clic pour ouvrir le dossier.

02 / SUR LE TERRAIN

L’expérience, ça se construit.

Trois environnements.
Autant de façons d’apprendre et de créer.

2024 — 202601

Sinari

Rennes · 2 ans

Concevoir des interfaces pour les usages métiers.

  • UX/UI design
  • Design system
  • Figma
Mes missions
  • UX/UI design
  • Design system sur Figma
  • Parcours utilisateurs métiers
  • Prototypage interactif
202302

Écomiam

Quimper · 4 mois

Explorer le web, du premier écran au prototype.

  • Maquettage web
  • Tests utilisateurs
Mes missions
  • Maquettage de site web
  • Tests utilisateurs
  • Prototypage
  • Supports print
202203

Flexirub

Saint-Thurial · 3 semaines

Relier l’expérience utilisateur à l’image de marque.

  • Analyse UX
  • Web & print
  • Photo
Mes missions
  • Analyse UX
  • Maquettage de site web
  • Création de flyers
  • Photographie

Toujours apprendre. Toujours affiner.

03 / DU POURQUOI AU COMMENT

Un bon écran commence
par une bonne question.

Une démarche centrée utilisateur,
avec des allers-retours à chaque étape.

01

Comprendre

Écouter les besoins, observer les usages et poser le problème avant de chercher la solution.

Besoins & parcours
02

Explorer

Mettre les idées à plat, dessiner les premiers parcours et donner une structure à l’expérience.

Croquis & wireframes
03

Concevoir

Travailler les interfaces dans Figma, construire la cohérence et rendre les idées interactives.

UI & prototypes
04

Affiner

Confronter le prototype aux usages, recueillir les retours et ajuster les détails qui comptent.

Tests & itérations

Et on recommence, jusqu’à ce que ça fasse sens.

04 / AU-DELÀ DES MAQUETTES

Curieux par nature.
Designer par conviction.

Je suis Matys Coantin, UX/UI designer basé à Rennes et Sarrebourg. J’allie sens du détail, maîtrise de Figma et esprit d’équipe pour concevoir des projets web et mobiles.

Mon expérience en direction artistique nourrit mon travail : j’aime créer des expériences à la fois esthétiques, utiles et cohérentes.

CuriositéEsprit d’équipeCréativitéCommunication
Télécharger mon CV

Le chemin jusqu’ici

2024 — 2026

MyDigitalSchool · Rennes

MBA · Expert UX/UI Design

2021 — 2024

Lycée Le Paraclet · Quimper

DN MADE · Option UX/UI Design

Et beaucoup de curiosité entre les deux.

05 / LA PROCHAINE PAGE

Et si on créait
quelque chose ensemble ?

Un projet, une idée ou simplement envie d’échanger ?

Dossier en préparation · Contenu à compléter

Voir le projet sur Figma (nouvel onglet)

Wireframes, maquettes & mini design system

Couverture du pitch deck FlowTrack avec une maquette de l’accueil mobile.
Cadre
Projet de groupe
MBA Expert UX/UI
Format
Application mobile
Logistique & stocks
Livrables
Wireframes, maquettes,
mini design system et pitch deck

01 / LE POINT DE DÉPART

Des outils de gestion, mais un terrain à mieux accompagner.

Le projet part d’un constat présenté dans le pitch deck : les opérations logistiques reposent encore sur le papier, Excel et des saisies répétées. Les équipes manquent d’une vision partagée des stocks et d’un outil adapté à leurs déplacements dans l’entrepôt.

L’objectif de FlowTrack est de centraliser la réception, l’expédition et les stocks sur smartphone, avec moins de saisies et une meilleure traçabilité des mouvements.

Comment faire du smartphone un véritable outil métier sur le terrain ?

02 / LES UTILISATEURS VISÉS

Trois métiers, un même flux d’information.

Le concept s’adresse aux PME et ETI de la logistique, de la distribution et du e-commerce qui souhaitent digitaliser leurs opérations.

  • Préparateurs de commandes

    Aller vite, limiter les erreurs et effectuer les opérations depuis un smartphone.

  • Magasiniers & opérateurs

    Localiser les produits et identifier les tâches à traiter en priorité.

  • Responsables logistiques

    Suivre l’activité, la qualité de service et les incidents.

03 / DU PARCOURS AUX ÉCRANS

Concevoir un outil mobile cohérent.

Le travail réalisé en cours rassemble des wireframes, des maquettes, un mini design system et un pitch deck dans Figma. Les écrans présentés organisent l’application autour de quatre entrées : accueil, réception, expédition et stock.

  1. WireframesStructurer les écrans et les parcours.
  2. MaquettesDonner forme aux actions métier.
  3. Mini design systemMaintenir une cohérence entre les interfaces.
  4. Pitch deckPrésenter le besoin et la solution.

Les maquettes emploient une base violette, des statuts accompagnés de libellés et des panneaux d’action pour le scan, la quantité ou les mouvements de stock.

04 / RÉCEPTION & PRÉPARATION

Du produit scanné à la quantité validée.

Le premier cas d’usage relie la liste des réceptions, l’accès à un article, le scan de son code-barres et la validation d’une quantité. Le scan propose aussi une saisie manuelle et la fiche article affiche un historique récent.

Quatre maquettes : réception, fiche article, lecteur de code-barres et choix de la quantité avec boutons moins, plus et valider.
Parcours présenté dans le pitch deck.Cliquer pour agrandir ↗

05 / SUIVI DES STOCKS

Repérer un stock critique et agir.

Une recherche et des filtres permettent de retrouver un article ou d’isoler les stocks bas. Les cartes associent quantité, emplacement et état du stock. Un panneau dédié permet ensuite de déclarer une entrée ou une sortie.

Trois maquettes : liste des stocks avec états OK ou critique, filtre stocks bas et panneau d’ajustement avec entrée ou sortie.
De la vue d’ensemble à l’ajustement d’un article.Cliquer pour agrandir ↗

06 / LA PROPOSITION

Rendre les mouvements plus lisibles.

FlowTrack réunit trois intentions : signaler les stocks bas, conserver un historique des flux et suivre les réceptions comme les expéditions. Le résultat présenté est un concept d’interface et ses parcours, conçu dans un cadre pédagogique.

La réduction des erreurs et le gain de temps sont des objectifs du projet ; ils restent à évaluer auprès des équipes de terrain.

Visuels issus du pitch deck. Les chiffres visibles dans les maquettes sont des données de démonstration.

Le carnet deMatys Coantin.

UX/UI design · Direction artistique

Des idées,
du caractère,
un fil conducteur.
Projet
Mon identité personnelle
Mon rôle
Direction artistique
& conception graphique
Supports
CV, portfolio
& réseaux sociaux

01 / L’INTENTION

Me présenter en donnant déjà à voir mon travail.

Mon identité visuelle est un projet de direction artistique à part entière. Elle relie ma manière de me présenter à mon métier de designer : le soin porté au détail, la curiosité et l’envie de rendre les idées lisibles.

Le défi est de créer un univers personnel que l’on reconnaît d’un support à l’autre, tout en gardant une lecture claire de mon parcours et de mes projets.

Faire de chaque support une page du même carnet.

02 / LE PARTI PRIS GRAPHIQUE

Le carnet comme fil conducteur.

Le papier, les annotations au stylo bleu, les post-it et la photo façon Polaroid composent un vocabulaire proche de l’atelier. Ils évoquent les idées que l’on note, que l’on organise et que l’on fait évoluer.

Une présence humaine

La signature et les titres manuscrits apportent une voix personnelle. Le portrait crée un point de rencontre avec la personne derrière les projets.

Une structure claire

Les filets, les cadres et les espaces séparent les informations. Le côté spontané des annotations s’appuie sur une composition organisée.

Des repères récurrents

Le bleu souligne, entoure et attire l’œil. Les papiers superposés donnent une place distincte aux expériences et aux projets.

03 / COULEURS & TYPOGRAPHIES

De la matière, de l’encre et du contraste.

Le fond papier sert de base commune. Le bleu encre guide la lecture, le bleu des post-it met certains contenus en avant et le gris foncé porte les textes. Voici la palette utilisée dans le portfolio.

  • Papier#F4F3ED
  • Encre bleue#293FC4
  • Post-it#50B9DF
  • Texte#262824
Caveat · La personnalitéL’idée commence ici.

Dans le site, cette écriture manuscrite accompagne les signatures, les annotations et les mots à mettre en valeur.

DM Sans · La lectureClair & lisible.

Les paragraphes et les informations pratiques utilisent une typographie sobre pour laisser le contenu se lire facilement.

04 / LES DÉCLINAISONS

Une même identité, des usages différents.

Chaque support reprend les mêmes repères graphiques, avec une composition adaptée à ce que le lecteur vient y chercher.

CV de Matys Coantin : fond papier, titres manuscrits soulignés en bleu, portrait Polaroid et expériences sur trois post-it bleus.
Mon CV · Cliquer pour voir le document en grand.
01 / Le CV

Raconter mon parcours sur une page.

Les rubriques sont encadrées, les dates entourées et les expériences regroupées sur des post-it. Cette hiérarchie permet de parcourir le document tout en découvrant ma personnalité graphique.

02 / Le portfolio

Faire vivre le carnet à l’écran.

Le site que vous consultez transpose ces codes en navigation : les post-it accueillent les expériences, les dossiers s’ouvrent sur les projets et les traits bleus repèrent les liens. La composition se réorganise sur mobile pour conserver une lecture fluide.

03 / Les réseaux sociaux

Prolonger la même présence visuelle.

Les réseaux sociaux complètent cet ensemble. Le fil conducteur reste le même : retrouver la personnalité du CV et du portfolio dans des formats plus courts, avec une information principale mise en avant.

05 / CE QUE CE PROJET MONTRE

Construire une identité qui tient d’un support à l’autre.

Ce projet montre ma capacité à définir une direction artistique, à construire une hiérarchie visuelle et à décliner un langage graphique sur des supports imprimés et numériques.

La cohérence vient des choix répétés : couleurs, typographies, matières et repères de lecture. Chaque support garde sa fonction tout en appartenant au même univers.

Un carnet ouvert sur ma façon de concevoir.