PATRICK TUFFIN


Designer UI/UX
Concepteur & Opérateur PAO

Réalisations personnelles

2024 & 2025

Commissions design graphique

Réalisées avec Adobe Photoshop, Figma et ReShade

J'ai réalisé diverses illustrations pour des clients particuliers. La plupart ne m'ont pas donner l'autorisation d'utiliser mon travail dans mon porte-folio et ont préféré le garder confidentiel. J'ai néanmoins pu garder un travail qui servait d'example aux potentiels clients.

Le design en question a été réalisé avec le personnage du client dans le jeu vidéo FINAL FANTASY XIV, jeu multijoueur en ligne qui permet de créer et habiller son propre personnage. Ce jeu permet l'utilisation de certains outils internes tels que des réglages d'éclairage, de prise de vue, et de pour réaliser de la "photographie" au sein du jeu. J'ai également fait l'utilisation de l'outil ReShade, un logiciel permettant l'injection d'effets de "post-processing" permettant de modifier les visuels du jeu, notamment un effet permettant d'isoler le personnage de son environnement et de générer un fond transparent.
Après cela, j'ai réalisé un design pour mettre en valeur ces prises de vue, ce fait avec Adobe Photoshop et Figma.
Les images tirées du jeu appartiennent à son éditeur, SQUARE ENIX CO., LTD., dont les conditions d'utilisations prévoient toutefois un usage des images à des fins de partage et mettent en place des exceptions pour les travaux à nature transformative.
Les symboles utilisés dans le cartouche en bas à droite sont tirés d'une banque d'images libre de droits.

Thème logiciel pour Jellyfin

Réalisé en CSS

Jellyfin est un logiciel open source qui permet d'héberger un serveur multimédia sur son propre ordinateur. Ce serveur à l'utilisateur d'accéder, depuis ses applications ou une interface web à sa collection de fichiers multimédia, notamment ce même hors de son domicile. Son équivalent le plus connu est le logiciel Plex.
Le logiciel permet également d'injecter ses propres fichiers CSS afin d'apporter ses propres modifications à l'interface existante. J'ai réalisé une modification de l'interface de la sorte, et ai également changé certains éléments visuels, tels que le logo Jellyfin.

Voici l'interface telle qu'elle était avant mes modifications, à titre de comparaison:

Divers travaux pour togekk0

Réalisés avec Adobe Photoshop, Adobe Illustrator & Carrd

togekk0 est une artiste indépendante pour qui j'ai contribué divers travaux, notamment une refonte totale de son porte-folio, et la mise en page d'une commission de character design qu'elle a réalisé pour un client.Les élements de design lui appartiennent. Les dessins sont de sa propre réalisation. Toutes les personnes concernées ont étés contactées et ont donné leur autorisation pour l'usage de ces visuels dans mon porte-folio.

Concept de mise à jour d'interface v2

Réalisé avec Figma et Adobe Illustrator

Ce projet est une mise à jour en cours d'un ancien projet inachevé de redesign d'interface, que l'on peut retrouver plus loin sur ce portfolio. J'ai souhaité retravailler ce projet avec les nouvelles techniques que j'ai apprises.

Site web intéractif "ARC"

Projet HTML & CSS réalisé en collaboration avec d'autres développeurs

"ARC" (Arknights Relations Chart) est un site web qui a pour but de reproduire une fonctionnalité du jeu "Arknights", c'est à dire son "réseau" (Network). Le réseau est un graphique intéractif qui trace les connexions entre différents personnages de l'univers du jeu.
Cependant, ce réseau n'inclut pas tous les personnages, n'inclut pas toutes les connexions à jour et ne donne pas le raisonnement derrière les connexions. Le but d'ARC est de proposer une version plus exhaustive de ce système.

Le "réseau" tel qu'il existe dans le jeu

Mise à jour visuelle de la boîte de dialogue pour s'identifier sur le site.
Elle n'est pas encore en ligne à l'heure de l'écriture de ces lignes.
Le style visuel se veut imiter le style présent dans ce clip vidéo.

L'apparence du site avant mes contributions au projet.

Réalisations diverses
pour le SMITOM

Réalisées avec Adobe InDesign,
Adobe Photoshop & Adobe Illustrator

L'accord des partenaires et personnes mentionnées ont étés obtenues afin de mettre ces documents en ligne.La plupart des éléments de dessin/des icônes vectorielles ne sont pas de ma réalisation, mais sourcées des banques d'images auxquelles le SMITOM est souscrit et pour lesquelles il possède une licence d'exploitation.

2023

Momiji Tea Shop, flyer

Réalisé avec Adobe InDesign & Adobe Illustrator

Format A5, avec fond perdu

Momiji Tea Shop, mockup &
charte graphique

Réalisé avec Figma & Adobe Illustrator

Dossier de projet MTS (extrait)

Réalisé avec Adobe InDesign et Adobe Photoshop

2019

Carte de visite

Réalisée avec Adobe InDesign

Affiche d'évènement

Réalisée avec Adobe InDesign,
Adobe Photoshop, Adobe Illustrator

Concept de mise à jour d'interface

Réalisé avec Figma, Adobe Photoshop, Adobe Illustrator

Ce concept est articulé autour du jeu Arknights (2019, Hypergryph), jeu pour mobile créé par des développeurs chinois avec des éléments de collection de personnages. La plupart des éléments d'interface sont au départ conçus pour du texte chinois et présentent quelques défauts visuels liés à la taille compacte des caractères chinois par rapport aux mêmes mots en anglais. De plus, puisqu'il s'agit d'un jeu pour téléphone, la plupart des éléments visuels sont fortement comprimés pour économiser de l'espace sur les téléphones des joueurs, ce qui entraîne une perte de qualité notable. Le moteur de jeu utilisé, Unity, possède une implémentation des éléments vectoriels au format SVG, mais certaines limitations techniques font que le développeur a préféré les convertir en textures matricielles. Cependant, la plupart des éléments visuels du jeu sont conçus sous un format vectoriel.Ce projet visait mettre à jour la "base" (un élément de jeu secondaire nécessitant la maintenance de plusieurs stations de travail en utilisant des travailleurs pour acquérir des ressources nécessaires à la progression dans le jeu) afin de la rendre plus lisible et de réduire le nombres d'interactions nécessaires, tout en maintenant une esthétique plaisante.La plupart des icônes utilisées dans ce projet sont de source extérieure, ou ont été directement extraites depuis le jeu, mais puisqu'elles ne sont disponibles qu'en basse résolution, il a été nécessaire de les re-vectoriser pour travailler avec dans Figma.

L'interface actuelle du jeu:

L'interface ré-imaginée