Logo Laptop  MENU

UI Design (niveau I ou II)

5 jours pour approfondir l'outil de prototypage Figma et maîtriser la prod avec le Design System, afin de travailler efficacement en équipe produit

Les formations

Les parcours de formation

La formation UI niveau I permet d’aborder la conception d’interfaces avec l’outil Figma : du design d’interfaces à l’organisation de tests utilisateur sur un projet concret, en complétant par la mise en place d’un Design System.

La formation UI niveau II permet de maîtriser le design dynamique et d’industrialiser votre workflow sur l’outil Figma sur un projet concret. Le but est d’améliorer in fine la collaboration dans des grandes équipes avec un Design System performant.

La formation UI Design en quelques mots avec notre intervenant Aurélien Barbier :

YouTube player

Prochaines sessions

• 03 au 07 juillet 2023 (classe virtuelle)
• 16 au 20 octobre 2023 (classe virtuelle)
• 27 novembre au 01 décembre 2023 (Paris ou classe virtuelle)


• Intra-entreprise : nous contacter

UI Design

  • JOUR 1 Design Systems : enjeux et mise en place

    Introduction

    • Définition et historique : du Creative design au Design System
    • Construire une charte graphique, une identité avant le Design System
    • Les principes : au début était l’UI kit
    • Connaître les différents frameworks, définition, principes et utilisations (CRM, conception d’un framework dédié, etc.)
    • Comprendre les avantages de l’Atomic Design
    • Maîtriser les différents composants et les outils

    Concevoir et déployer, une organisation à part entière

    • Fédérer les rôles (UX, UI, DA, DEV, Marketing, Métier, etc) et les équipes avec les utilisateurs
    • Organiser la roadmap du projet
    • Informer, former les équipes par-delà la technologie

    Garder la cohérence des éléments d’interface

    • Une identité verbale indissociable
    • Son, image, virtualité, quels éléments intégrer
    • Garder le print en considération
    • Normes d’accessibilité

    La pérennité du Design System

    • Maintenir et faire évoluer
    • Connaître les contraintes et possibilités

    Ateliers pratiques

    • audit de l’existant
    • inventaire et définition de la vision
  • JOUR 2 Figma (niveaux I & II)

    Pour les 3 jours de formation dédiés à la pratique de l’outil Figma, deux groupes de niveaux sont mis en place. Le niveau est évalué au moment de l’inscription à la suite du remplissage d’un questionnaire d’évaluation. Seules les journées 1 et 5 « Design Systems » regroupent tous les niveaux.

    Niveau I : Découverte de Figma et création de wireframe simple

    Appréhender Figma

    • Les origines de Figma et des logiciels de création d’interfaces
    • Les grands principes de conception sur écran
    • FIGMA pour qui ? Pour quoi ?
    • L’interface Figma, premier contact (outils, pages, frames, calques, paramétrage, vocabulaire,etc.)

    Atelier : créer son premier wireframe simple et bien structuré

    • Le but d’un wireframe
    • Les outils simples

      • Formes : créer des formes simple et complexes
      • Frames : disposition, taille, espacement entre éléments, etc.
      • Grid : plan de travail multi-dimension, règles & grid
      • Calques : attributs, modification & action (rotation, scale, alignements, etc.)
      • Texte : taille, espace inter caractères / ligne, fill, etc.
      • Les raccourcis clavier à connaître
    • Gestions des couleurs

    Mock-Up : Poser des premières intentions graphiques

    • Pourquoi un mock-up ?
    • Structurer son fichier de travail
    • Travailler avec un design system
    • Ateliers pratiques

    Niveau II : Structure et bases d’un système de travail (Design Dynamique)

    Installer les fondations d’un Design System

    • Styles
    • Systèmes de couleurs
    • Systèmes de police

    Optimiser son espace de travail

    • Organiser son fichier
    • Organiser ses projets
    • Organiser son équipe
    • Droits

    Structure et industrialisation du design

    • Layout Grids
    • Nomenclature
    • Spatial System

    Designer en « dynamique »

    • Variants
    • Auto-layout
    • Constraints

    Collaborer et transmettre

    • Autorisations
    • Commentaires
    • Librairies partagées
    • Inspect / Dev handoff
  • JOUR 3 Figma (niveaux I & II)

    Niveau I : Débuter sur le design d’interface avec Figma 

    Designer une interface : acquérir les bases de l’UI

    • Les bases de l’UI : DA, contraintes, bonnes pratiques,…
    • Base des components
    • Automatiser son workflow
    • Ateliers pratiques

    UI dans la pratique : Augmenter son flow de production

    • Collaboration et partage
    • Introduction aux fonctions avancées de Figma
    • Community et ressources utiles
    • Ateliers pratiques

    Niveau II : Adopter une logique produit, créer des composants dynamiques complexes

    Accessibilité et ergonomie

    • Règles de base

    Booster son workflow

    • Plugin incontournables
    • Tips pour accélérer
    • Raccourcis clavier

    Adopter une logique dev

    • Principe d’héritage
    • Instances
    • Overrides

    Créer des composants complexes

    • Auto-layout deep-dive
    • Constraints deep-dive
    • Variants deep-dive

    Créer un thème multi-marques

    • Principe
    • Theming
    • Dark mode
  • JOUR 4 Figma (niveaux I & II)

    Niveau I : Les fondamentaux du prototypage

    Créer un prototype Low-Fi et tester ses écrans

    • Pourquoi tester ?
    • Créer un prototype Low-Fi
    • Lier plusieurs écrans entre eux
    • Les flows

    Le test utilisateur dans la pratique : valider rapidement

    • Prototyper pour tester
    • Approche sur les cycles de test
    • Les bases du test utilisateur
    • Partager un prototype
    • Rapport / Analyse

    Niveau II : Créer un prototype interactif HD

    • Smart Animate
    • Interactive Components (beta)
    • Multiple Flows

    Partager son prototype

    • Paramétrage
    • Figma Mirror

    Organiser et conduire des tests utilisateurs

    • Quali / Quanti
    • Recrutement
    • Guerilla
    • Posture du testeur & éviter les biais
    • ROI test

    Amélioration itérative d’un produit / service

    • Connecter Figma & Maze
    • Rapport / Analyse
  • JOUR 5 Documenter, Promouvoir et Maintenir un Design System

    Niveaux I & II

    Documenter :

    • Définir l’architecture de l’information et la structure du contenu.
    • Que documenter et comment dans un design system ?
    • La boîte à outils pour documenter un design system.
    • Atelier pratique.

    Promouvoir et maintenir :

    • Pourquoi promouvoir le design system ?
    • Comment impliquer davantage de personnes ?
    • Choisir une stratégie et le type de gouvernance.
    • Établir un modèle d’audit et fixer les KPI’s.
    • Développer un modèle de demande de fonctionnalités ou d’évolution ainsi que leur process de validation.
    • Mises à jour, versions,… comment s’y retrouver ?
    • Optimiser, tester et surveiller l’usage.
    • Mesurer le progrès et le succès : analytics pour le design system.
    • Atelier pratique.
  • ✔︎ Validation des acquis

    Les acquis de la formation seront validés au moyen :

    • D’un exercice de création de prototype
    • D’un exercice d’animation interactive d’une interface
    • D’un QCM sur les enjeux, problématiques et fonctionnement d’un Design System

Objectifs et compétences visées

Au terme de cette formation, vous serez en mesure de :

  • Comprendre les logiques de fonctionnement des outils informatiques de prototypage
  • Réaliser des Wireframes (maquettes) sur un outil de conception
  • Réaliser un prototype interactif sur un outil de conception
  • Appréhender les logiques et méthodologies de conception d’un design system
  • Comprendre les enjeux de mise en place et d’entretien d’un Design System

Intégrez la communauté Laptop UX Club !

En suivant nos formations vous entrez dans un écosystème et une communauté. Avant le démarrage de la formation vous devenez membre du Laptop UX Club et bénéficiez de nombreux avantages :

  • accès au réseau francophone de Laptop via Slack
  • mentoring pair à pair entre membres
  • invitations exclusives aux alumnis aux sessions de questions-réponses
  • invitations aux évènements UX en avant-première
  • accès à notre base documentaire (canevas, supports, articles, vidéos)
  • inscription gratuite aux ateliers UX et conférences
  • propositions de missions UX et offres d’emploi
  • 50 ouvrages de référence à L’Atelier Beaubourg

En savoir plus

Financez votre formation

Toutes nos formations sont éligibles aux financements suivants selon que vous soyez :

  • Freelances affiliés à la MDA (graphisme, illustration) : AFDAS.
  • Indépendants et chefs d’entreprises : FIF-PLAGEFICE.
  • Demandeurs d’emploi : Pôle Emploi (ARE et CSPAIF ).
  • Salariés des TPE-PME : AFDASAtlas, OPCO-EP, AKTO
  • Personnes handicapées : AGEFIPH

Les critères de candidatures et de financement pour chaque organisme sont expliqués sur cette page.
Pour vous conseiller sur le financement, pour vous aider à définir vos  besoins et pour bien préparer votre formation, appelez-le 01 77 16 65 24.

Publics concernés

  • UX designer
  • UI Designer et Directeur Artistique
  • Chef de projet
  • Développeur
  • Product Owner
  • Et toutes personnes souhaitant acquérir les compétences techniques de prototypage et les fondamentaux du Design System

Pré-requis et matériel nécessaire

  • Bonne culture du numérique et de ses usages
  • Une appétences pour les logiciels
  • Un ordinateur (Mac ou PC) et un compte Figma (gratuit). Figma est un logiciel disponible sur Mac et PC, utilisable directement via un navigateur récent (Chrome, Firefox, Safari).
  • Les logiciels (gratuits et cross-plateforme) qui seront demandés en amont (outils collaboratifs, visioconférence, etc)

Modalités de l'enseignement au Laptop

D’un point de vue pédagogique, ergonomique et logistique, nous déployons un dispositif qui a prouvé son efficacité et sa pertinence.

Les formations du Laptop ont également été entièrement pensées et adaptées aux spécificités de l’enseignement à distance afin d’en assurer la qualité optimale.

“Guide de l’apprenant”

Avant la formation nous envoyons aux participants un “Guide de l’apprenant” avec toutes les informations nécessaires pour qu’ils se préparent en amont.

Rythme d’apprentissage et ergonomie

Les formations se déroulent sur des journées entières, de 9h à 18h ou de 9h30 à 18h30 en moyenne (voir le détail des horaires sur chaque fiche formation). Des pauses courtes et des energizers ponctuent la formation afin d’assurer un niveau d’attention constant, auxquels s’ajoute une pause déjeuner de 13h à 14h.

Toutes nos journées de formations sont rythmées par de nombreux éléments interactifs qui permettent de faciliter l’acquisition des compétences.

Effectifs, ateliers en sous-groupes

Nous limitons les effectifs de nos formations pour favoriser l’accompagnement des apprenants. Tous nos ateliers pratiques sont organisés en sous groupes afin de mettre en œuvre les acquis théoriques et de favoriser la collaboration. Chacun de ces sous-groupes reçoit ainsi une attention particulière des facilitateurs.

Supports et outils

L’intégralité des supports de cours, l’accès à la bibliographie, ressources et glossaires du Laptop ainsi que les canvas utilisés en formation sont disponibles au terme de chaque session sur la plateforme pédagogique de la formation Google Classroom (ou Dokeos selon les formations). Chaque apprenant dispose d’un accès personnel.

Nous utilisons des logiciels et outils à la fois simples à prendre en main et efficace pour la collaboration à distance : Meet, Mural, Menti, Google Drive, Marvel App.

Lieu

Nos formations à distance sont réalisées avec Google Meet, tous nos intervenants sont formés aux spécificités et outils de l’enseignement et de la facilitation à distance.

Nos formations en présentiel ont lieu dans les locaux du Laptop dans le Marais : l’Atelier Beaubourg, adresse : 7 rue Geoffroy l’Angevin – 75004 Paris.

Les locaux disposent de tout le matériel pédagogique nécessaire : tables et chaises, vidéo-projecteur, écran plat 65’, wifi très haut débit, installation audio, fourniture de bureau (post-it, feuilles, feutres, paper-board, etc.).

Les stagiaires sont invités à déjeuner sur place dans une ambiance conviviale.

Toutes les dernières mesures sanitaires sont respectées dans le contexte de l’épidémie du COVID-19.

Les métros à proximité sont :

  • Rambuteau (sortie « Geoffroy l’Angevin »)
  • Châtelet
  • Les Halles
  • Hôtel de Ville

Parking à proximité :

  • Parking Georges Pompidou : 41-47 Rue Rambuteau, 75003 Paris

Plus de détails sur les modalités d’accès dans notre FAQ : https://lelaptop.com/faq

Mentorat et accompagnement post-formation

Les mentors du Laptop

Après la formation vous avez la possibilté d'être accompagné par l'un des mentors du Laptop pour un suivi personnalisé, quelque soit le domaine qui vous intéresse (UX, Business, Outils, Facilitation, ...). Découvrez le dispositif et demandez un devis sur la page dédiée.

FAQ et conseils

Si nécessaire, n'hésitez pas à consulter la page consacrée aux questions les plus fréquement posées : www.lelaptop.com/faq

Et/ou à vous inscrire à nos sessions bi-mensuelles de questions/réponses en visioconférence : www.lelaptop.com/questions

Le Laptop : Qualiopi, Datadock & accessibilité

La certification qualité Qualiopi a été délivrée au titre de la catégorie d’actions suivante : Actions de formations, à l’organisme de formation Le Laptop. Ce référentiel sur plus de 30 indicateurs atteste du processus Qualité de notre organisme de formation et ouvre la possibilité d’un financement à 100% pour l’ensemble de nos formations.


Le Laptop répond aux critères qualité du décret du 30 juin 2015 DataDock et est référençable par les financeurs de la formation professionnelle continue. Nos formations sont donc éligibles à un financement total ou partiel par de nombreux OPCO.

Accessibilité handicapé
Les personnes en situation de handicap peuvent faire appel à notre référent pour s'informer et définir les modalités d'accès aux formations. Benoit Airault, notre référent, est joignable au ‭01 77 16 65 24‬ ou par mail (psh@lelaptop.com)





Page mise à jour le 30 mai 2023

5 jours à 2 500 € HT /

3 000 € TTC

Dates & inscription
Demander un devis
POSER DES QUESTIONS

Dates des prochaines sessions

• 03 au 07 juillet 2023 (classe virtuelle)
• 16 au 20 octobre 2023 (classe virtuelle)
• 27 novembre au 01 décembre 2023 (Paris ou classe virtuelle)


• Intra-entreprise : nous contacter

En 2022, à la question “recommanderiez-vous cette formation ? ” :

Nos apprenants ont attribué une note de 4.8/5

Informations pratiques

Durée : 5 jours
Horaires : 9h/13h - 14h/18h
Nombre de participants : 16 maximum
Modalité(s) d’enseignement : à distance (classe virtuelle)
Date limite d’inscription : 1 jour ouvré avant le début de la formation

Programme

Cycles & modules
complémentaires

#methods

en formation

Charlotte Pellefigue

User Experience Lead

« Une formation aux petits oignons : un apport théorique et pratique hyper efficace. On se sent accompagné et surtout prêt à appliquer rapidement tout ce qu’on a appris dès la sortie. »

Lucille Boulesteix

Senior User Researcher

« La formation au Laptop c’est comme vivre une expérience cousue main en France par de grands couturiers, tout est conçu pour que vous puissiez en ressortir grandi humainement, méthodologiquement, professionnellement. »

Rodolphe Finamore

(Freelance Digital Strategist)

« La formation a dépassé mes espérances […] Elle m’a appris de nombreuses techniques/méthodologies que je vais pouvoir implémenter dans ma pratique quotidienne. »

Hugo Marcone

Head of Product chez Continuity

La formation est tout simplement une des meilleures que j’ai faite dans ma vie, tous sujets confondus. La formation est claire, efficace, bien construite et axée sur le cas concret d’un client. Vous repartirez en ayant appris de nouvelles méthodes et compétences tout en vivant une belle expérience humaine.

Zalihata Ahamada

Design Ops chez Payfit

Le Laptop propose une formation de très bonne qualité, mais aussi un accès à une communauté de designers extrêmement vivante et propice au partage. J’ai ainsi pu devenir mentor pour d’autres designers, et évoluer vers un poste de Design Ops dans une autre entreprise.