Logo Laptop  MENU

Certificat UI Design Niveau I & 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

UI Design : modules à la carte

Savoir réaliser un prototype est primordial afin de tester les concepts et hypothèses de conception avant de développer un produit.

Pendant cinq jours, vous pratiquez sur un outil de prototypage nécessaire pour concevoir et produire des parcours utilisateurs sous forme d’interfaces graphiques et de prototypes interactifs. Pendant deux jours vous découvrirez également les principes liés à la mise en place d’un Design System et sa maintenance, pour travailler efficacement en équipe produit, notamment avec des développeurs. 

Prochaines sessions

• 12 au 16 septembre 2022 (classe virtuelle)
• 24 au 28 octobre 2022 (classe virtuelle) - complet
• 12 au 16 décembre 2022 (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

    • Créer un design system
  • 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 Prototyper sur 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

    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
  • réductions sur le coworking (résident ou nomade)
  • 50 ouvrages de référence à Jourdain

En savoir plus

Financez votre formation

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

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 à distance

Initialement en présentiel, les formations du Laptop ont été entièrement repensées et adaptées aux spécificités de l’enseignement à distance afin d’en maintenir la qualité.

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

  • “Guide de l’apprenant à distance” et on-boarding
    Avant la formation nous envoyons aux participants un “Guide de l’apprenant à distance” avec toutes les informations nécessaires pour qu’ils se préparent en amont. Quelques jours avant la formation nous organisons une visioconférence collective afin de vérifier les dispositifs techniques de chacun et répondre aux éventuelles questions.
  • Logiciels et outils
    Nous utilisons des logiciels et outils à la fois simples à prendre en main et efficace pour la collaboration à distance : Zoom (ou Meet),
    Mural, Menti, Google Drive, Marvel App, …
  • Rythme d’apprentissage et ergonomie
    Les formations se déroulent sur des journées entières, de 9h30 à 18h, avec une pause déjeuner de 13h à 14h. Afin d’assurer un niveau d’attention constant malgré les écrans, nous rythmons les journées de nombreux éléments interactifs qui permettent de vérifier l’acquisition des compétences. Par ailleurs plusieurs pauses et énergizers sont au programme.
  • Effectifs, ateliers en sous-groupes et supports
    De nombreux ateliers pratiques sont organisés en petits groupes afin de mettre en œuvre les acquis théoriques. Les supports de cours sont remis en fin de formation, ainsi que l’accès à des ressources pédagogiques.

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

Qualiopi, Datadock & accessibilité

Nos formations ont reçu le label du référentiel Qualiopi qui atteste de la qualité des processus mis en œuvre par Le Laptop dans les actions de formation qu'il propose (information, accueil, suivi, ...).

Nos formations ont reçu le label qualité du référentiel Data-dock, elles 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 (benoit@lelaptop.com)





Page mise à jour le 20 septembre 2022

5 jours à 2 500 € HT /

3 000 € TTC

Dates & inscription
Demander un devis
POSER DES QUESTIONS

Dates des prochaines sessions

• 12 au 16 septembre 2022 (classe virtuelle)
• 24 au 28 octobre 2022 (classe virtuelle) - complet
• 12 au 16 décembre 2022 (classe virtuelle)

• Intra-entreprise : nous contacter

Informations pratiques

Durée : 5 jours
Horaires : 9h/13h - 14h/18h
Nombre de participants : 16 maximum
Modalité(s) d’enseignement : à distance (classe virtuelle)

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.