You can also subscribe to one of our next webinars.
Or you can follow us on your preferred social media: Linkedin | Youtube
Oops! Something went wrong while submitting the form.
Design UI avec Figma, l'IA et Webflow
Concevoir des interfaces intuitives, engageantes et centrées utilisateur avec Figma, l'IA et Webflow répondant aux besoins de l'organisation avec une méthodologie réplicable.
Le UI Design sprint avec Figma, l'Intelligence Artificielle et Webflow
Le UI Design sprint permet de transformer des wireframes en interfaces esthétiques, intuitives et engageantes par la compréhension des besoins, le prototypage & test et l’itération. L'équipe de développement peut ensuite produire digitalement.
L’atelier d'apprentissage de Design UI vous permet de pratiquer et de répliquer un tel sprint avec ses outils dans vos projets agiles.
Vous développez votre maîtrise de l'outil de conception Figma et de l'outil de développement Webflow.
Cet atelier intègre les compétences en Design System s'appuyant sur l'Atomic Design & Figma. Vous intégrez les compétences en usabilité, accessibilité, ergonomie, écoconception, copywriting et en référentiel de marque. Vous découvrez les 8 audits UI, les 12 audits UX. Vous pratiquez l’UX Research, s’appuyant sur l’Atomic Research de Tomer Sharon.
Vous utilisez des outils d'Intelligence Artificielle comme relume, Google Stitch et son articulation avec Figma et bien d'autres.
Cet apprentissage inclut des fondamentaux de la facilitation de sprint. Il intègre 14 ateliers et points d'étapes clé en main pour vos projets. Ce sprint fait partie des méthodes agiles.
Vous devenez certifié en Design UI, compétence fondamentale du modèle agile Product Design Guides.
Vous choisissez le format pédagogique (hybride online, tutoré, à votre rythme) de votre formation. Le e-learning vous permet de démarrer votre apprentissage dès maintenant. Avec le CPF, seuls les formats Hybride online et Tutoré online sont possibles.
Hybride online +
Le format Hybride online (équivalent à 62H) est en 6 semaines avec 22 modules e-learnings, 6 visios de 1H30 et 4 ateliers de 1/2 journée avec d'autres apprenants. Le e-learning vous permet de démarrer votre apprentissage dès maintenant.
Le format Tutoré online est en 6 semaines avec 22 modules e-learnings et 6 à 9 visios de 1H seul avec un tuteur. Le e-learning vous permet de démarrer votre apprentissage dès maintenant. Vous rencontrez chaque semaine online votre tuteur lors de visio à l'heure convenue entre vous.
A votre rythme+
Vous avez accès aux modules e-learning dès maintenant. Vous apprenez en autonomie complète à votre rythme. Vous passez l'oral de certification en candidat libre. Le coût du passage de la certification est inclus dans le prix.
Chaque équipe est la clé du succès
Pour aider vos équipes à transformer par l'innovation
Votre programme consiste en un contenu de compétences professionnalisantes et en 3 modalités pédagogiques différentes afin de répondre à vos besoins.
Contenu pédagogique
Vous appliquez la méthode agile sur un projet professionnel, personnel ou simulé en suivant le processus articulé en 7+1 étapes et en pratiquant les outils associés.
Des modules thématiques viennent compléter votre apprentissage sur des points méthodologiques précis.
Afin de vous aider à appliquer cette méthode agile dès aujourd'hui, cet apprentissage inclut 14 ateliers et points d'étape pour implémenter ce sprint dans votre organisation en mode sprint.
Introduction au UI Design sprint
Le UI Design sprint est la méthode agile pour transformer les wireframes produits par les UX designers en des interfaces engageantes et intuitives répondant aux besoins des utilisateurs. Ce processus intègre les besoins en accessibilité, d’usabilité et d’écoconception de l'organisation. L'équipe de développement peut ensuite produire digitalement.
Il s'appuie sur les 2+1 phases du design. Il s'agit avant tout de comprendre les livrables produits par les UX designers, puis de collecter les besoins liés au UI. Ensuite, en itération, il s’agit de concevoir et de tester un Design System si cela est nécessaire dans votre organisation et des maquettes haute fidélité à tester et itérer.
Ce UI Design sprint s’appuie sur ces compétences:
Le Design System, s’appuyant sur l’Atomic Design, pour garantir la cohérence et la réutilisabilité des composants,
Figma comme outil central de conception et de prototypage,
Webflow comme outil de développement,
Les principes d’usabilité, d’accessibilité, d'ergonomie et d’écoconception pour orienter les choix d’interface,
Les 8 audits UI, les 12 audits UX pour auditer et tester un produit digital pour améliorer son efficacité,
Et l’UX Research, s’appuyant sur l’Atomic Research de Tomer Sharon, pour relier les décisions design aux données issues de la recherche utilisateur.
Cet apprentissage inclut des fondamentaux de la facilitation de sprint. Il intègre des ateliers et points d'étapes clé en main pour vos projets. Vous les répliquez en les adaptant à votre projet.
Ce sprint fait partie des méthodes agiles.
01 CADRER
Intégrer les livrables de l’équipe de delivery UX
Le Product Design lead ou le Designer UX présente aux Designers UI les livrables du UX Design sprint en précisant les business et design challenges. Cela est fait lors de l’atelier UX transmission. Vous interagissez collaborativement avec Figjam.
02 ANALYSER
Collecter et synthétiser les besoins d’usabilité, d’accessibilité et d’éco-conception
Cet échange entre les UX et les UI designers est un point de départ. Si cela n’a pas été transmis, il s'agit de collecter maintenant les besoins liés au UI: l’accessibilité, l’usabilité, l’éco-conception. Cela se fait par des interviews de parties prenantes et un audit heuristique de l’existant.
Un atelier analyse permet de synthétiser toutes les informations collectées.
03 PREPARER
Créer ou mettre à jour le Design System
Vous prenez la décision de concevoir ou d’améliorer un Design System choisissant l’approche de l’Atomic Design pour garantir cohérence, évolutivité et adaptabilité.
Créer les tokens et les composants
Les bases du design system s’appuient sur des tokens standardisées, qui couvrent les couleurs, typographies, tailles et espaces. Ces tokens sont essentiels pour établir des fondations solides permettant une personnalisation avancée grâce au theming. Ce dernier permet de répondre à des besoins spécifiques comme le multibrand ou le dark mode, tout en assurant une flexibilité pour différents contextes et identités visuelles.
La conception des interfaces s’appuie sur des principes modernes, tels que la conception responsive. L’utilisation d’Auto-layouts et des Constraints garantit que les interfaces s’adaptent de manière fluide aux différentes tailles d’écran et résolutions.
Les master components jouent un rôle important et permettent de créer des instances qui sont modulables. Ces dernières peuvent hériter des propriétés avec les nested properties.
Tout cela créé des éléments modulaires, réutilisables et hiérarchisés. Cela favorise la productivité et réduit les incohérences dans la création des interfaces.
Créer un UI Kit
Ces composants modulaires sont ensuite regroupés dans un UI kit, une bibliothèque centralisée qui rassemble tous les éléments nécessaires pour concevoir et développer rapidement des interfaces. Une documentation détaillée accompagne ce kit, expliquant les règles d’utilisation, les bonnes pratiques et les cas d’usage pour chaque composant. Cette documentation est un pilier essentiel pour intégrer le design system dans le workflow des équipes, qu’elles soient de design ou de développement.
Définir la maintenance du Design System
Enfin, une stratégie de maintenance continue est mise en place pour garantir que le design system évolue avec les besoins des utilisateurs, les tendances du marché et les avancées technologiques. Cette approche assure une solution durable, efficace et toujours en phase avec les objectifs des projets.
04 CONCEVOIR
Analyser les wireframes
Vous commencez par une analyse approfondie des wireframes pour comprendre les besoins fonctionnels, les parcours utilisateurs et les points de contact critiques. Ces éléments servent de base pour intégrer l’accessibilité de manière proactive dans la structure, comme prévoir des espaces suffisants pour une navigation aisée ou des zones interactives adaptées à l’utilisation tactile.
Appliquer les tokens du Design System
Vous passez ensuite à l’application des tokens du design system, en respectant strictement les critères d’accessibilité. Par exemple, des couleurs conformes aux standards WCAG pour garantir un contraste optimal, des typographies lisibles même pour les utilisateurs malvoyants, et des espacements bien définis pour éviter les surcharges visuelles.
Lors de la création des composants, Figma permet d’utiliser des Auto-layouts et des master components, non seulement pour assurer une conception réactive, mais aussi pour organiser les éléments de manière logique, facilitant l’usage de technologies d’assistance comme les lecteurs d’écran. Les états interactifs (focus, hover, etc.) sont également définis pour une navigation au clavier fluide.
Vérifier l’accessibilité
Vous vérifiez l’accessibilité visuelle et fonctionnelle en permanence grâce à des plugins Figma, qui permettent de tester les contrastes, la hiérarchie et l’ordre des éléments pour une navigation inclusive.
Appliquer les principes d’écoconception
Parallèlement, vous appliquez les principes d’écoconception en limitant les contenus graphiques excessifs, en simplifiant les composants et en minimisant l’utilisation de ressources gourmandes.
05 TESTER
Préparer le test
Toutes les étapes précédentes ont comme but le test pour vérifier et améliorer la solution digitale conçue. Elle doit suffisamment répondre aux besoins des utilisateurs et des parties prenantes. La phase de préparation du test est donc essentielle pour être en capacité de vérifier l'adéquation entre le besoin et la solution.
Définir les objectifs de test associés aux tâches des utilisateurs
Choisir les méthodes de test les plus appropriées
Choisir les participants et les modalités
Développer les scénarios de test, les instructions et les critères de succès
Créer la grille d'entretien
Préparer le test en face-à-face et en distanciel avec Maze
Tester le prototype
Cette étape est souvent rapidement faite alors qu'elle est critique. Il vaut mieux parfois itérer pour mieux répondre aux besoins. L'équipe doit être en capacité de recommander la prochaine étape en toute objectivité.
Mettre en œuvre les tests avec la bonne posture
Analyser les résultats en termes de besoins de fonctionnalités, d'accessibilité et d'expérience
Formuler des recommandations pour la prise de décision par la décisionnaire
06 ITERER
Restituer les résultats du sprint
Le prototype a été testé... L'enjeu est à présent de présenter à la décisionnaire et à d'autres parties prenantes internes concernées les éléments clés pour prendre une décision éclairée sur la suite: l'itération avec les ajustements nécessaires issus du feedback des tests ou le développement du prototype en partie ou en totalité. Cela se fait avec le canevas d'aide à la décision.
Transmettre à l'équipe de développement
L'atelier transmission des livrables permet de faire un pont entre l'équipe UX/UI, qui délivre un prototype haute fidélité validé, à l'équipe de développement qui va prendre la relève pour transformer le prototype en MVP et, ultimement, en produit digital "fini".
07 AMELIORER
Améliorer le Design System
À la fin du UI design sprint, vous intégrez les nouveaux composants créés pendant le sprint, en vérifiant leur cohérence avec les éléments déjà existants. Vous mettez à jour la documentation pour inclure les nouveaux composants, leurs variations et les bonnes pratiques d’utilisation, afin d’assurer une adoption fluide par les équipes.
Vous prenez en compte le feedback des utilisateurs, des développeurs et des parties prenantes pour identifier des améliorations, notamment en matière d’accessibilité et de performance. Le design system est testé pour garantir qu’il respecte les critères d’inclusivité, de réactivité et d’écoconception tout en restant flexible et évolutif pour s’adapter aux futurs besoins du projet.
Structurer l’UX Research
Vous continuez avec l’approche Atomic Research afin d’améliorer le produit à travers des feedbacks continus. L'idée est de structurer les données collectées en "atomes" d'informations clés sur les comportements, besoins et points de friction des utilisateurs. Vous utilisez ces insights pour ajuster les personas, les parcours et les scénarios. Lors de l’utilisation de la solution, l'Atomic Research permet d'alimenter les itérations futures, affinant ainsi la conception. Cela garantit que le produit évolue en fonction des retours réels et reste aligné sur les besoins des utilisateurs à chaque étape de son développement.
Améliorer la performance de l'équipe UX / UI
Si le sprint est terminé du point de vue du contenu avec la transmission des livrables finaux à l'équipe suivante, un dernier atelier permet de clore véritablement le sprint: une rétrospective d'équipe afin d'améliorer la performance et les processus de l'équipe.
08 DEVELOPPER
Importer dans Webflow
Vous installez le plugin Enter Figma to Webflow depuis la page des plugins Figma. Dans Figma, vous sélectionnez la frame ou la page que vous souhaitez transférer. Ensuite, vous ouvrez le plugin et configurez les paramètres d’export, notamment les styles, images et polices. Le plugin analyse votre design et génère un code HTML et CSS compatible avec Webflow.
Une fois l’export effectué, dans Webflow, vous utilisez l’interface du plugin pour importer les composants générés. Le plugin crée les classes CSS correspondantes et insère les éléments dans votre projet Webflow, en respectant la hiérarchie des calques et les styles globaux définis dans Figma.
Cela réduit considérablement le temps de recréation manuelle, car le plugin automatise le processus d’intégration. Vous pouvez ensuite peaufiner la mise en page, ajuster les animations et interactions natives dans Webflow, et ajouter les fonctionnalités supplémentaires si besoin.
Modalités pédagogiques
Votre apprentissage est rythmé par les modules de e-learnings et vos temps synchrones sont pour appliquer la méthode sur un projet personnel ou simulé.
Vous pouvez choisir entre 3 modalités pédagogiques:
1. Le format hybride online est rythmé avec des visios et des ateliers en distanciel
2. Le format tutoré online est rythmé par une visio par semaine défini avec le tuteur
3. Le format à votre rythme est en autonomie.
Le temps en autonomie est une estimation de temps de travail personnel à fournir dans la semaine.
Fomat hybride online
Vous apprenez la méthode agile avec des e-learnings gamifiés.
Vous l'appliquez sur un projet personnel, professionnel ou simulé avec des visios ou des ateliers animés par une facilitatrice ou un facilitateur d'apprentissage avec des pairs. Vous utilisez des canevas sur un tableau blanc équipé pour faciliter votre travail collaboratif. Vous téléchargez l'ensemble des outils pour votre usage professionnel.
Vous êtes aidé dans la préparation de votre certification.
Après la formation, vous répliquez la méthode agile avec les outils dans vos projets en vous appuyant sur les e-learnings mis à jour régulièrement.
Et vous participez aux webinaires réguliers comme alumni pour suivre les évolutions du product & du design.
Le plus efficient en termes d'apprentissage en étant aidé par les pairs.
Le temps approximatif à consacrer à mettre en pratique en autonomie est indiqué entre parenthèse.
Semaine1 COMPRENDRE LES BESOINS
E-learning: Introduction
E-learning: 00 Le UI design sprint
E-learning: 01 CADRER
Visio #1 : Le lancement du parcours
E-learning: Le référentiel de marque
E-learning: Audits UI
E-learning: 02 ANALYSER
Interview avec l’équipe UX et des parties prenantes (1H)
En autonomie : Analyse des besoins (1H)
Semaine2 : CONCEVOIR ET TESTER UN PROTOTYPE
E-learning: Atomic Design
E-learning: Design System*
E-learning: 03 PREPARER
Visio #2 : Démarrage avec Figma
En autonomie : Prise en main de Figma (1H)
Atelier #1 : Design system avec Figma
En autonomie : Amélioration du Design System (3H)
Semaine3 :
E-learning: Ergonomie*
E-learning: Ecoconception
E-learning: 04 CONCEVOIR
Visio #3 : Les règles d’ergonomie
En autonomie : Création de maquette (2H)
E-learning: Accessibilité*
Atelier #2 : Prototype haute fidélité avec Figma
En autonomie : Création du prototype haute fidélité (5H)
Semaine4 :
E-learning: Audits UX
E-learning: 05 TESTER
Visio #4 : La définition du protocole de test
En autonomie : Création du prototype dynamique (2H)
En autonomie : Test avec Maze (3H)
Semaine5 :
E-learning: Atomic research
E-learning: UX Research*
E-learning: 06 ITERER
Visio #5 : L’itération
En autonomie : Mise à jour du prototype haute fidélité (3H)
En autonomie : Constitution du dossier projet /portfolio (2H)
Semaines suivantes
Passage de votre certification
* Ces modules thématiques seront mis en ligne progressivement en 2025.
Ils seront rétroactivement ouverts à l’alumni.
Format tutoré online
Vous apprenez la méthode agile avec des e-learnings.
Vous l'appliquez sur un projet personnel ou simulé en autonomie
accompagné par une tutrice ou un tuteur avec une visio par semaine à l'heure convenue entre vous.
Vous êtes aidé dans la préparation de votre certification.
Après la formation, vous répliquez la méthode agile avec les outils dans vos projets en vous appuyant sur les e-learnings mis à jour régulièrement.
Et vous participez aux webinaires réguliers comme alumni pour suivre les évolutions du product & du design.
Le format qui optimise votre temps. Il utilise avantageusement le digital tout en le mêlant à l'humain. Pour des apprenants très motivés, il a le meilleur ratio apprentissage temps investi.
Format à votre rythme
Vous apprenez la méthode agile agile avec des e-learnings.
Vous l'appliquez sur un projet personnel ou simulé en complète autonomie.
Vous passez votre certification en candidat libre.
Après la formation, vous répliquez la méthode agile avec les outils dans vos projets en vous appuyant sur les e-learnings mis à jour régulièrement.
Et vous participez aux webinaires réguliers comme alumni pour suivre les évolutions du product & du design.
Un format idéal pour apprendre sans contraintes. Vous suivez cette formation en autonomie à votre vitesse par le biais d'e-learnings. Il s'adresse à des apprenants avec une très forte motivation intrinsèque. Il ne peut pas bénéficier d'un financement CPF.
Equipe de facilitation d'apprentissage
Remi Edart
human being - Product Leader
Transformation catalyst aimant faciliter et coacher des équipes avec un état d'esprit et des approches centrées sur l'humain pour co-designer des stratégies, des organisations, des produits & services apportant de la valeur positive dans des environnements complexes, cross-fonctionnels, multiculturels, entrepreneuriaux, technologues & fun. Accompagnement sur les transformations culturelles & digitales (modèle en V versus agile).
Au service de la transformation managériale au niveau de l'individu, de l'équipe et de l'organisation avec des programmes de creative leadership sur mesure.
High energy | enthusiast | open minded | entrepreneurial | human centered | supportive | out of the box | conceptual thinking | divergent-convergent | see-connections | problem solver | result-driven | perspectives seeker | persistent | business sense | engaging | authentic | fun
Worldwide
,
Any town
French
,
English
,
Dutch
Worldwide
Any town
French
English
Dutch
Jean Maxime Brais
Brand strategist
Stratège créatif doté d'une empathie surdéveloppée entièrement dédiée à produire des résultats, Jean-Maxime s'est forgé une réputation de designer fiable, expérimenté et ultra efficace. Il se consacre à repousser les limites de l'image de marque et du design depuis plus de 25 ans. Disponible et à l'écoute, il accompagne au quotidien ses clients à réussir et se distinguer sur leurs marchés respectifs.
Cet atelier me donne la confiance pour comprendre les besoins des designers UX et des utilisateurs pour créer des interfaces qui en itération répondent aux besoins. Le Design System, Figma et Webflow sont pour moi démysthifiés !
Charlotte
Designer graphique
Feedback des apprenants
Le feedback des apprenants nous invite à développer en itération des ateliers d’apprentissage les plus proches des besoins des utilisateurs. Voici donc en transparence le retour sur les ateliers précédents. Vous pouvez aussi appliquer des filtres par type de training et audience depuis juin 2020. Le feedback des étudiants en formation initiale est souvent le plus critique.
4.88
899 of 899
5
4
3
2
1
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Et vous le publiez sur votre profil linkedin pour gagner en visibilité et crédibilité. Bien sûr, il faut pratiquer encore et encore. Nous vous aidons à accélérer votre montée en compétences!
[[en]]To help those least helped in this health crisis, those looking for work and the self-employed can choose the price of the design thinker workshop.[[fr]]Pour aider les moins aidés dans cette crise sanitaire, ceux en recherche d'emploi et les indépendants peuvent choisir le prix de l'atelier design thinker.
DSI : Chef de projet digital, product manager, product designer, product owner ;
Marketing : responsable innovation, chef de produit, designer d’expérience client/collaborateur, designer de marque ;
RH : responsables RSE, de la transformation, formation.
Pre-requis
Etre acculturé à l’innovation.
Aisance avec l’informatique de bureau.
Un ordinateur avec une connexion wifi de plus de 10Mbps (vérifiez avec www.fast.com)
Attention, car suivre un parcours d'apprentissage avec Dthinking est exigeant bien au delà des temps synchrones. Vous allez comprendre la méthode avec des e-learnings. Vous allez l'appliquer en autonomie sur un projet personnel ou simulé. Cela nécessite en fonction de la formation et de l'étape entre 4 et 12H par semaine.
Demandez à nos apprenants. Leur investissement leur a véritablement permis de monter en compétences.
Handicap
Contactez notre référent handicap avec l'email academy@dthinking.co ou sur le 01 48 44 61 08.
Nous évaluerons ensemble comment vous aider à développer vos compétences.
Financement
Contactez-nous sur academy@dthinking.co ou sur le 01 48 44 61 08 et nous évaluerons ensemble les financements possibles en fonction de votre situation.
Nos organismes de formation sont certifiés Qualiopi. Et notre organisme certificateur a obtenu l'éligibilité au CPF.
Freelances affiliés à la MDA (graphisme, illustration): AFDAS.
Délai d'accès
Toutes nos formations peuvent démarrer dès l'inscription. Vous accédez alors au e-learning.
En mode tutoré online, vous prenez contact et vous planifiez vos rendez-vous hebdomadaire avec votre tutrice ou tuteur.
En mode hybride online, vous choisissez la session afin de participer à des visios et/ou des ateliers synchrones avec des pairs.
En mode à votre rythme, vous accédez quasi immédiatement au e-learning.
Dans le cadre du CPF, il y a un délai minimum obligatoire de 11 jours ouvrés entre la date d'envoi de la proposition de commande par l'organisme de formation et la date de début de la formation. Ce délai vise à offrir aux titulaires du Compte Personnel de Formation (CPF) une période de réflexion suffisante avant de confirmer leur inscription.
Référence de compétences
Nos formations sont construites autour de référentiels de compétences.
Celui-ci a été déposé auprès de France Compétences, le RS6636. Vous pouvez le découvrir ICI.
Innover et transformer un produit, un service, un parcours, un processus ou une organisation
Collecter des informations sur ou/et avec les utilisateurs (entrer en empathie).
Formuler les besoins critiques des utilisateurs afin de bien identifier son ou ses besoins avant de penser à toute solution.
Brainstormer des idées afin de trouver des idées qui répondent aux besoins identifiés.
Prototyper afin de rendre tangible collaborativement une idée suffisamment rapidement pour la tester.
Tester un prototype afin d’identifier ce qui marche et ce qui doit être amélioré ou de valider des hypothèses en utilisant des techniques de prototypage et de test.
Itérer le processus afin de valider une adéquation entre un besoin de utilisateurs et la solution.
Modalités de certification
Elle dépend de votre choix de mode de formation et de votre financement. Il y a deux certifications différentes :
Celle spécifique à votre formation émise par Dthinking Certification ;
Celle émise au nom de France Compétences lorsque vous bénéficiez d'un financement CPF ou lorsque vous avez choisi le format à votre rythme.
En mode hybride online ou tutoré
Vous êtes certifié Dthinking à la suite de la formation suivie activement et d’un quiz réussi.Vous êtes certifié France Compétences à la suite d’un oral dans le cas d’un financement CPF.
En mode à votre rythme
Vous suivez le e-learning et appliquez la méthode en complète autonomie. Vous ne pouvez pas bénéficier d’un financement CPF.
Vous êtes certifié Dthinking et France Compétence à la suite d’un quiz réussi et d’un oral de certification.
Après la formation
Suite à votre certification, quelque soit votre mode de formation et le lieu de formation, vous êtes invités à entrer dans le réseau exclusif des dthinkers. Ce réseau vous donne un accès à un réseau d'anciens, des évènements privilégiés, à des formations à un prix avantageux et des annonces d'offres d'emploi.
Vous pouvez comme tout autre personne intéressée par le Product, le Design, la Facilitation et le Leadership suivre l'academy sur LinkedIn.
Vous pouvez enfin recevoir la Newsletter en vous inscrivant ici.
Choisissez quel rôle clé de notre modèle d'innovation & de transformation vous souhaiteriez jouer dans une organisation. Et vous suivez petit à petit les formations pour acquérir les compétences requises pour le devenir.
.png)
.png)
.png)
.png){kind=icon}
.png)
