Conception UX/UI avec FIGMA

Maîtrisez la conception UX et les interfaces UI

Design UI/UX 4.9(73)8h 12min40 leçons4 sections

Ce que vous apprendrez

Comprendre la différence entre expérience utilisateur et interface utilisateur
Utiliser les formes, les polices et les couleurs dans Figma
Utiliser les composants et les Frames dans la conception
Créer un design adaptatif grâce à l'alignement
Relier les écrans entre eux
Comprendre la recherche, l'analyse et le parcours utilisateur
Appliquer le design thinking
Découvrir les principes des interfaces utilisateur et des couleurs
Réaliser un projet final et le publier sur Behance

À propos du cours

Ce cours enseigne la conception d'interface et d'expérience utilisateur, UX et UI, avec Figma. Il commence par le téléchargement des logiciels et des outils et une introduction à Figma, puis le plan de travail, les formes géométriques, les polices, les couleurs et les images, la différence entre Group et Frame, les composants, l'alignement et le design adaptatif, la liaison entre les écrans, et le partage et l'exportation du fichier. Vous étudiez ensuite l'expérience utilisateur : la différence entre UX et UI, la recherche, l'analyse de l'expérience, le parcours utilisateur et le design thinking. Viennent ensuite les principes des interfaces utilisateur et les écrans les plus utilisés, la différence entre Android et iOS, le cercle chromatique et la signification des couleurs, les polices et les formats d'image. Le cours se termine par un projet final, de la définition des idées à la publication sur Behance. Il convient aux designers, aux développeurs et à toute personne qui veut se lancer dans la conception d'applications, et ne demande aucune expérience préalable. À la fin, vous saurez concevoir une application complète et la partager.

Résultats attendus

Maîtriser Figma pour concevoir des interfaces et expériences utilisateur.
Analyser et améliorer l'expérience utilisateur en fonction des données.
Créer des designs professionnels et travailler avec des couleurs, des polices et des images.
Préparer des prototypes de design de haute qualité et les partager avec l'équipe.

Avis des apprenants

Ces avis proviennent d'apprenants qui ont acheté le contenu et en ont complété au moins 50% — il n'y a aucun avis de personnes n'ayant pas suivi le contenu.

4.9

★★★★★

73 avis

5★

4★

3★

2★

1★

★★★★★عمر ع.·منذ 2 شهرشاهد 50٪

تم عرض كل التقييمات (1)

Contenu du cours

Principes de Design UI/UX

18 leçons

Introduction au CoursPrésente les axes théoriques et pratiques du cours : UX contre UI, Android contre iOS, couleurs et polices, icônes, vecteurs, SVG et PNG, puis Figma, avec une tâche légère après chaque séance et une révision à la suivante.6:27
La Différence entre le Design de l'Expérience Utilisateur et les Interfaces Utilisateur UX vs UIExplique la différence entre UX et UI avec l'analogie de la construction d'une maison : l'UX est la base de recherche et d'analyse, l'UI le design visuel, puis les étapes du projet, des besoins au user flow, au sketch et au wireframe.9:25
Qu'est-ce que l'Expérience Utilisateur et Étude de Cas ?Explique l'expérience utilisateur et l'étude de cas ou de faisabilité, les étapes UX de la recherche et l'analyse au user flow et au design thinking, et les éléments de recherche : parties prenantes, utilisateurs, concurrents, objectifs.8:45
Qu'est-ce que la Recherche sur l'Expérience Utilisateur ?Explique l'étude des concurrents dans la recherche UX : son importance, l'identification des concurrents directs et indirects, la comparaison des forces et faiblesses, le suivi des prix et l'acquisition de clients.7:41
Analyse de l'Expérience UtilisateurExplique l'analyse UX via User Persona et User Story : définition, intérêt et contenu de chacun, et comment rédiger une story en répondant à qui, quoi et pourquoi.5:45
Qu'est-ce que le Flux Utilisateur ?Définit le User Flow et ses formes de base (rectangle, losange, cercle), construit un exemple de flux de connexion dans Figma et présente l'outil Miro.11:32
Pensée DesignExplique le Design Thinking et ses cinq étapes : empathie, définition, idéation, prototype et test, ainsi que sa boucle itérative avec retour aux étapes précédentes en cas de problème.11:36
Introduction à l'UIIntroduit l'interface utilisateur (UI), sa définition et son lien avec l'UX, ainsi que ses principes de base : contrôle de l'utilisateur, design confortable et efficace, moins d'étapes et interfaces cohérentes.6:13
Le premier et le deuxième principe de l'UIExplique les deux premiers principes de l'UI : pages permettant le retour, navigation facile, bons retours à l'utilisateur, éviter les actions répétées et les termes obscurs, et la loi de Fitts.8:19
Le troisième et le quatrième principe de l'UIComplète les principes de l'UI avec la règle des trois clics et la cohérence visuelle, fonctionnelle et vis-à-vis de l'utilisateur, puis les trois types d'interfaces : graphique, vocale et gestuelle.9:32
Les écrans les plus utilisés dans le designPasse en revue les écrans d'application les plus courants : Splash, Onboarding, connexion, inscription, vérification de code, profil et accueil, avec des exemples d'applications e-commerce.7:23
La différence entre les systèmes d'exploitationCompare le design Android et iOS : icônes pleines et en contour, barre d'état et barre d'application, boutons de navigation, emplacement de la recherche, boutons, interrupteurs et cases à cocher.13:10
Qu'est-ce que la roue des couleursExplique le cercle chromatique : les couleurs de base Red, Green et Blue et la façon dont les autres en découlent, les couleurs primaires, secondaires et tertiaires, et la division en chaudes, froides et neutres.7:00
Significations et connotations des couleursExplique la signification des couleurs en design, des chaudes comme le rouge, l'orange et le jaune aux froides comme le vert, le bleu et le violet, et aux neutres comme le noir, le blanc, le gris et le marron, avec des exemples d'usage.7:18
Sites web spécifiques aux couleursExplique les systèmes de couleurs Hexadecimal et RGB, le choix des couleurs d'après le logo du client, les sites qui génèrent des dégradés et extraient des couleurs d'images, et l'outil Color Dropper.14:33
Polices dans l'UX_UIExplique les polices Serif et Sans Serif et les principes de choix : lisibilité, association de deux familles pour titres et texte, contraste de taille et de graisse, éviter trop de polices, avec des sites de téléchargement.16:07
Sites célèbres pour les designersPrésente des sites pour trouver images, icônes, vecteurs et illustrations, comme Freepik, Flaticon, StorySet et Unsplash, la différence entre vecteurs et illustrations, et les formats de téléchargement gratuits ou payants.9:30
La différence entre les formats d'imageClarifie la différence entre SVG, PNG et JPG en termes de taille, de qualité à l'agrandissement, de modification des couleurs dans Figma et de fond, et pourquoi préférer le SVG.4:56

Utilisation de Figma

11 leçons

Télécharger les programmes et outils nécessaires et introduction à FigmaExplique le téléchargement de Figma, la création de compte et la connexion, l'installation d'autres logiciels comme Photoshop et Illustrator, la découverte de l'interface, des projets et de la Community, et l'usage sur le web.13:30
Plan de travail dans FigmaExplique l'interface de Figma, la création d'un fichier et l'Artboard ou Frame : barre d'outils et calques, choix de tailles d'écran comme l'iPhone, Layout Grid et Auto Layout, options Stroke et Export, raccourcis F et A.13:30
Formes dans FigmaExplique les formes géométriques dans Figma : rectangle, ligne, flèche, triangle et étoile avec leurs propriétés (nombre de sommets, rayon), le nommage des pages, le zoom à 100 %, l'outil Pencil et l'History.17:30
Texte dans FigmaExplique la combinaison de formes dans Figma avec des outils comme Union et Subtract, puis l'outil Text et ses propriétés : alignement et raccourcis Alt, interligne, espacement des lettres, paragraphes et alignement vertical.14:38
Couleurs et imagesPrésente les propriétés du texte dans Figma (soulignement, barré, installation de polices), puis les couleurs et images, la capture de couleur et la création d'un écran Artboard avec Preview.21:15
Groupe vs CadreClarifie la différence entre Group et Frame dans Figma, l'édition des images et leurs propriétés, les options de Frame dans Prototype comme Overflow et Scroll, et pourquoi préférer Frame.14:41
ComposantsExplique les Components dans Figma et comment une seule modification se répercute sur tous les écrans, avec les Styles de couleur et de texte et leur différence avec une Library.18:17
Mise en page et design réactifExplique la mise en page et le design responsive dans Figma : le concept de Responsive, l'usage d'Auto Layout et de Wrap, les espacements en multiples de huit et le contrôle de la taille par Frame.14:11
Créer des liens entre les écrans (partie un)Démarre le prototypage dans Figma : choix de l'appareil, liaison des écrans, types de transitions comme Smart Animate et Slide, option Change to, bouton retour et ouverture d'un Overlay avec arrière-plan.20:27
Créer des connexions entre les écrans (Partie Deux)Explique les déclencheurs d'interaction du prototype comme OnDrag, While Hover, Mouse Enter et Mouse Leave, puis les états Hover et Pressed avec Components et Variants.8:22
Partager et ExporterPrésente le partage et l'export dans Figma : fixation d'éléments avec Position Fix, commentaires, Plugins et Widgets, droits de lecture et d'édition, export et import, historique des versions et raccourcis.17:53

Projet Complet de A à Z avec Figma

8 leçons

Définir les objectifs et idées pour le projet finalLance le projet final : génération d'une idée avec Goodbrief, étude des concurrents via des sites et UI kits prêts à l'emploi, et création d'un User Persona à partir de modèles de la Figma Community.13:16
Parcours utilisateur, croquis et modèle de projet (Partie Un)Construit concrètement un user flow dans Miro pour une application de commande de repas, avec rectangles, losanges et cercles pour la connexion, les produits, le paiement et le suivi, puis le transforme en sketch des écrans.11:56
Parcours utilisateur, croquis et modèle de projet (Partie Deux)Construit pas à pas les écrans wireframe dans Figma, du Splash et de l'Onboarding à la connexion et l'inscription, en réglant boutons, espacements, champs de saisie, barre de recherche et zone publicitaire.25:57
Parcours utilisateur, croquis et modèle de projet (Partie Trois)Conçoit la carte produit, la barre de navigation inférieure, la page détail produit et le panier, puis l'écran de paiement et le suivi de commande avec minuteur, dans l'étape wireframe de Figma.15:58
Finaliser le design et le télécharger sur Behance (Partie Un)Lance l'étape de design proprement dite dans Figma : création d'un logo, choix des couleurs primaire et secondaire, ajout d'illustrations et d'icônes SVG, et mise en forme de l'interface et de la carte produit.28:27
Finaliser le design et le télécharger sur Behance (Partie Deux)Poursuit la conception des écrans dans Figma : page des catégories, icônes de la barre de navigation en plein et en contour, intérêt du SVG, carte de paiement et boîte de confirmation avec boutons.19:37
Finaliser le design et le télécharger sur Behance (Partie Trois)Relie les écrans dans un prototype Figma, y compris via les composants, puis montre comment créer un Mockup du design avant de le publier sur Behance.17:55
Finaliser le design et le télécharger sur Behance (Partie Quatre)Explique la publication du projet sur Behance avec un lien Figma, puis le concept de Mask, le masquage des calques, la correction de problèmes de prototype, et conclut en conseillant d'étudier le travail d'autres designers.20:25