UX · UI · Figma · responsive
Je conçois sur Figma des interfaces web pensées autour de vos contenus, de vos utilisateurs et de vos objectifs. Structure, parcours, hiérarchie, identité visuelle et responsive sont travaillés ensemble avant le développement. Des interfaces conçues sur Figma autour de vos contenus, de vos utilisateurs et de vos objectifs, avant le développement.
Pour qui
Le principe
Un bon design ne commence pas par choisir une couleur. Il commence par savoir ce que la page doit faire.
Qu’est-ce que l’utilisateur cherche ? Que doit-il comprendre ? Où doit-il aller ? Que cherche l’utilisateur ? Que doit-il comprendre ? Où doit-il aller ?
Comment rendre ce parcours clair, cohérent, identifiable et agréable à utiliser ? Comment rendre ce parcours clair, cohérent et agréable ?
Je ne sépare pas artificiellement les deux : la structure influence le design, et le design doit rendre la structure visible. La structure influence le design, et le design rend la structure visible.
Le contenu réel
Le design ne doit pas devenir inutilisable dès que le faux texte est remplacé. Les contenus n’ont pas besoin d’être définitifs au premier jour : proches de la réalité, ils suffisent.
De vrais contenus plutôt que du faux texte : titres, textes, produits, services, images, besoins métier, priorités commerciales.
Comment je conçois
Contenu, blocs, priorités, navigation.
Parcours, actions, relations entre les pages.
Typographie, couleurs, images, composants.
Desktop, tablette si nécessaire, mobile.
Une même page, de la structure au rendu final. Des maquettes réelles, pas des captures de l’application.
Design system
Je construis suffisamment de règles pour que les pages suivantes restent cohérentes sans repartir de zéro. Le niveau de formalisation dépend de la taille du projet. typographies, couleurs, boutons, formulaires, cartes, espacements, composants, états, règles responsive : assez de règles pour rester cohérent, selon la taille du projet.
Responsive
Les écrans mobiles nécessaires au projet sont conçus spécifiquement. Ils ne correspondent pas à une simple réduction automatique des maquettes desktop. l’ordre peut changer, des éléments se regroupent, la navigation change, les interactions changent, la densité est revue, les zones tactiles sont adaptées. Les écrans mobiles nécessaires sont conçus spécifiquement.
Faisabilité
Le fait de pratiquer aussi le développement me permet d’intégrer la faisabilité dès la conception : Pratiquer aussi le développement me permet d’intégrer la faisabilité dès la conception.
Deux parcours
Je conçois les interfaces et prépare les éléments nécessaires pour que votre développeur ou votre agence puisse poursuivre le projet.
Lorsque les maquettes sont destinées à une autre équipe de développement, le fichier Figma est préparé pour faciliter leur reprise : écrans organisés, composants principaux, variantes utiles, comportements importants et versions responsive prévues dans le périmètre.
Selon le projet : styles typographiques et couleurs, composants réutilisables, états nécessaires (hover, actif, erreur, ouvert / fermé…), indications sur les comportements qui ne sont pas explicites dans une maquette statique, assets nécessaires au développement.
Fichier Figma préparé pour la reprise : écrans organisés, composants, variantes, comportements importants, versions responsive prévues.
Je peux également assurer la suite du projet sur WordPress, Shopify ou pour une fonctionnalité web spécifique. Le développement fait alors l’objet de son propre périmètre.
Méthode
Activité, cible, objectifs, contenus.
Architecture, pages et hiérarchie.
Wireframes et parcours, selon le besoin.
Direction visuelle et maquettes.
Responsive et états nécessaires.
Handoff vers l’équipe technique, ou passage au développement DSBD.
Le livrable principal est un fichier Figma organisé contenant les écrans validés et les composants nécessaires au projet.
Selon le périmètre : wireframes, maquettes desktop, déclinaisons mobile, écrans ou états intermédiaires importants, prototype, lorsque certaines interactions doivent être démontrées, composants réutilisables, assets graphiques, indications utiles au développement.
Le prototype n’est pas systématiquement inclus : il est utilisé lorsqu’il apporte une vraie valeur pour comprendre un parcours ou une interaction.
Le projet avance par étapes de validation. La structure et la direction visuelle sont validées avant la déclinaison des autres écrans, afin d’éviter de reprendre l’ensemble des maquettes en fin de projet.
Deux séries de retours sont incluses par grande étape de validation. Les demandes supplémentaires ou les changements de direction intervenant après validation d’une étape peuvent faire l’objet d’un complément de prestation.
Livrable : un fichier Figma organisé, avec les écrans validés et les composants nécessaires. Prototype seulement s’il apporte une vraie valeur.
Validations : structure / UX, puis direction UI, puis déclinaison. Deux séries de retours par grande étape.
Les deux sont possibles. Je peux livrer uniquement les maquettes ou poursuivre ensuite le projet en développement, notamment sur WordPress ou Shopify.
Oui. La prestation UX/UI peut être autonome et les maquettes peuvent être préparées pour être reprises par l’équipe qui développera le site.
Pas nécessairement dans leur version définitive, mais travailler avec une structure et des contenus proches de la réalité permet de concevoir une interface plus juste.
Oui, lorsque le périmètre du projet le nécessite. Le mobile est conçu comme une interface à part entière, pas simplement comme une réduction du desktop.
Mon travail porte principalement sur l’expérience et l’interface web. Lorsqu’une identité existe, je la traduis dans le site. Si une création de marque complète est nécessaire, ce besoin doit être cadré séparément.
Le budget dépend notamment du nombre et de la complexité des écrans, des parcours et du niveau de système à concevoir. Je définis d’abord le périmètre avant de chiffrer.
