Ma methode de creation
Chaque projet de design web repose sur une méthode claire, structurée, mais toujours adaptée au contexte. À travers cette page, je vous invite à découvrir les étapes clés de ma démarche. De la recherche d'inspiration à la livraison finale en prenant comme exemple concret la création de ce portfolio lui-même.
Un projet personnel exigeant, conçu comme je le ferais pour un client : avec rigueur, réflexion et créativité.
1. Veille & tendances
Pour moi, la veille est une étape indispensable dans tout processus de création. Elle me permet de rester en phase avec les tendances graphiques actuelles, d’explorer de nouvelles directions visuelles et d’enrichir ma culture design au quotidien.
Mais ma veille ne se limite pas au style : je l’utilise aussi pour me tenir informé des dernières fonctionnalités et bonnes pratiques sur les outils que j’utilise au quotidien, comme Figma, Photoshop, Illustrator.
J’alimente cette veille principalement via :
- Pinterest, pour ses moodboards thématiques
- Dribbble et Awwwards, pour voir ce qui se fait de mieux en design web
- Muzli, pour une dose quotidienne d’inspiration
- Et bien sûr, les réseaux sociaux comme Instagram, Behance ou Twitter, où émergent souvent les nouvelles tendances.
Cette étape nourrit mes projets en profondeur et m’aide à rester curieux, agile, et créatif.
2. Analyse des concurrents
Avant de concevoir une interface, il est essentiel pour moi d’étudier ce qui se fait déjà dans le secteur du client. Le benchmark concurrentiel me permet de détecter les points forts et les faiblesses de chaque approche, et à poser les bases d’un design à la fois cohérent avec son environnement… et capable de s’en démarquer.
Lors de cette étape, j’analyse plusieurs sites similaires ou concurrents afin d’observer :
- Les principes de navigation utilisés (menus, parcours utilisateur, accès à l'information)
- Les plans de pages (structure, hiérarchie du contenu, organisation)
- Le style graphique adopté (choix typographiques, imagerie, couleurs)
Ce portfolio offre une navigation simple et intuitive, avec une barre épurée mettant en avant les pages clés comme les projets et la page À propos. Je me démarque en ajoutant une page dédiée au processus graphique, peu fréquente dans les portfolios.
3. References graphiques
Pour mon benchmark graphique, je m’appuie principalement sur ma veille. Ce que j’y ai observé me permet de développer un style adapté à chaque projet, en travaillant sur la disposition des blocs, les associations typographiques, l’utilisation ou non de textures, ainsi que le choix des couleurs.
Ce portfolio reflète mon style et mon univers visuel à travers un projet personnel, idéal pour exprimer mes goûts. J’adopte un style géométrique, presque architectural.
Mon moodboard illustre les éléments clés du projet :
– des références à une disposition structurée en blocs ;
– une typographie de titre percutante, qui se démarque dans une grille graphique marquée ;
– une police sobre, Raleway, pour assurer lisibilité et équilibre.
Côté couleurs, je choisis une palette simple, dynamisée par une teinte forte qui est le orange utilisée pour mettre en valeur les CTA, filtres et blocs explicatifs.
4. Conception des maquettes
Une fois l’analyse concurrentielle et la direction artistique définies, je peux passer à la création des wireframes et des maquettes. Grâce à mes recherches, L’étape des wireframes est essentielle pour tester différentes dispositions des éléments (contenus et CTA) et construire des parcours utilisateurs cohérents. Une fois les wireframes réalisés, j’applique la direction artistique sur Figma. C’est à ce moment que la phase plus technique commence, avec la création des composants, des styles de texte, de la bibliothèque de couleurs, ainsi que la mise en place des auto-layouts.
5. Mise en situation
Selon moi, la mise en situation se fait en plusieurs étapes cruciales.
La première consiste à créer un prototype sur Figma, permettant aussi bien au client qu’à moi-même de se projeter dans une utilisation réelle du site, avec tous les gabarits de pages réalisés (homepage, page de listing, page projet, page de contenu). Ce prototype pourra également servir pour des tests utilisateurs si besoin.
La seconde étape est l’intégration des pages clés dans des mockups, afin de mettre en valeur les maquettes et renforcer leur impact visuel.
6. Declinaisons visuelles
Selon le projet, je peux décliner la direction artistique sur différents supports (PDF, factures, gabarits pour les réseaux sociaux, etc.). Cette déclinaison permet d’assurer une meilleure cohérence visuelle entre tous les supports de communication.
Pour ce portfolio, j’ai réalisé deux déclinaisons de la direction artistique : une version en PDF et une version adaptée pour mon CV.
7. Livraison finale
Pour la livraison final, je fournit dans le cas d’un site ou une application réaliser sur figma un fichier .fig qui sera organisé de facon a ce qu’on retrouve distinctement les maquettes desktop et mobiles (Aussi tablette si cela est demandé), ainsi que le kit UI.
Dans le cas d’une réalisation di’itentité graphique je fournit les fichiers illustrators du logo créer par exemple avec ces déclinaison (logo secondaire, favicon) ainsi que les règles d’utilisation de celui-ci.
Mes projets
Mes projets sélectionnés sont divisé en 4 catégories. Vous pourrez retrouvé des projets de site e-commerce, de site de contenu, de site corporate et des créations de logo. Tous ces projets ont été fait en agence ou en freelance.
