Web design avec Figma : concevez des interfaces efficaces
A course by Pablo StanleyConcepteur et illustrateur
A course by Pablo Stanley, Concepteur et illustrateur
Découvrez les grands principes pour créer des compositions numériques impactantes et faire passer vos sites internet à la vitesse supérieure
Une composition visuelle forte a non seulement une belle apparence, mais a également le pouvoir de remplir une fonction et de communiquer un message clairement. Le designer et illustrateur Pablo Stanley utilise le design comme un moyen de partager des histoires et de se connecter avec les autres. Il anime des ateliers dans le monde entier, ainsi que son propre podcast de design, Diseño Cha Cha Cha .
Dans ce cours, Pablo vous apprend les bases du design visuel et comment créer une composition puissante à l'aide de Figma. Apprenez un nouvel outil et les principes qui feront passer vos conceptions au niveau supérieur.
Qu'allez-vous apprendre dans ce cours en ligne ?
20 leçons & 12 vidéos téléchargées
Principes de composition et de conception visuelle
4 minutes, 50 secondes
Principes de Gestalt utilisés dans la conception
3 minutes, 40 secondes
Hiérarchie visuelle
3 minutes, 31 secondes
Introduction aux éléments visuels et compréhension du brief
5 minutes, 7 secondes
Typographie
8 minutes, 27 secondes
Graphiques et icônes
11 minutes, 11 secondes
Que comprend ce cours ?
Commencez par faire connaissance avec Pablo, artiste, illustrateur, et votre professeur pour ce cours. Il vous parle de son parcours pour devenir designer, ainsi que des personnes qui ont influencé son parcours créatif, des auteurs de bandes dessinées aux réalisateurs de films.
Explorez les principes de conception visuelle nécessaires pour créer des compositions puissantes, notamment l'échelle, la hiérarchie, l'équilibre, le contraste, etc. Découvrez ensuite les Principes de la Gestalt et comment ils affectent l'interprétation de notre travail. Apprenez à créer un flux dans votre composition à l'aide d'un chemin F ou Z avant de vous plonger dans la domination du design.
Pablo vous donne une introduction aux éléments visuels comme la copie et les boutons, ainsi que la façon de comprendre un brief. Entraînez-vous à utiliser vos connaissances du cours avec différents exercices dans Figma. Ensuite, écoutez les conseils de Pablo pour améliorer votre typographie, du choix d'une police à l'équilibrage, l'espacement et le choix de la taille de la police. Découvrez l'impact de la couleur sur votre composition et comment utiliser des photos, des illustrations et des icônes dans Figma avant de tester différents styles visuels.
Esquissez un concept et décidez de la meilleure option tout en gardant à l'esprit le cahier des charges et les exigences du projet. Définissez ensuite un guide de style visuel comprenant la typographie, la couleur et les styles de boutons. Créez une maquette haute fidélité de votre page de destination sur Figma.
Apprenez à ajouter des interactions simples pour animer vos composants. Créez ensuite des liens entre les pages et ouvrez un modal. Pour terminer le cours, Pablo vous guide à travers le processus de partage de votre prototype avec le monde.
Recommended software & tools for this course
What is this course's project?
Créez une page de destination puissante pour votre site Web en utilisant les principes de conception visuelle.
Projets d'élèves du cours
Who is this online course for?
Ce cours s'adresse à toute personne intéressée par la conception graphique ou Web ou qui souhaite en savoir plus sur Figma.
Requirements and materials
Aucune expérience préalable n'est nécessaire.
Vous aurez besoin d'un ordinateur, de quelque chose pour dessiner et d'un compte Figma.
Avis
- il y a 1 mois
This is a fantastic course for mastering UI design basics. Whether you are new to Figma or looking to refine your composition skills, Pablo Stanley makes the process easy to follow. I highly recommend it for its hands-on approach, which bridges the gap between design theory and practical application—from wireframing to building a high-fidelity prototype. A perfect starting point for any aspiring web designer.
- portfolio_valenPLUSil y a 2 mois
This is a great course to start understanding good UI practices for websites. It doesn't matter if you are a beginner with Figma, you will be able to follow the steps of the teacher in this course. I recommend this!
- il y a 2 mois
Bonne formation qui permet d'apprendre à utiliser figma grâce à un cas pratique. Le seul point négatif est qu'il manque certaines ressources comme le brief qui n'est pas remis à disposition à des moments clés. Il manque aussi la dernière page de l'exercice pour le rendu final qu'on nous propose pas d'apprendre à créer. Cela limite le prototype final car l'on doit lier cette page avec une autre pour voir notre progression et l'exercice réalisé dans sa globalité.
- il y a 8 mois
muy buen curso! rapido de aprender y poner en practica
- il y a 9 mois
Muy buen curso, super utiles las bases de diseño gráfico y explica muy bien el proceso en Figma, sería ideal que hicieran una re-versión con las últimas actualizaciones de Figma.
Depuis lors, il a travaillé en tant que responsable chez Invision, concepteur du personnel chez Lyft, et a cofondé Carbon Health et Blush. Il anime des ateliers dans le monde entier et a un podcast sur le design et la technologie. En plus d'écrire et d'illustrer la bande dessinée The Design Team , il partage également son travail avec plus de 45 000 abonnés sur Instagram.
Contenu
- U1
introduction
- À propos de moi
- Influences
- U2
Fondements de la conception visuelle
- Principes de composition et de conception visuelle
- Principes de Gestalt utilisés dans la conception
- Hiérarchie visuelle
- Abordements dans l'assurance-chômage
- U3
Éléments visuels
- Introduction aux éléments visuels et compréhension du brief
- Composition de base dans Figma
- Typographie
- Créer une palette de couleurs
- Graphiques et icônes
- Styles visuels
- U4
Mettre tous ensemble
- Esquisse d'un filaire
- Définir votre guide de style visuel 1
- Définir votre guide de style visuel 2
- Construire une maquette haute fidélité 1
- Construire une maquette haute fidélité 2
- U5
Prototypage
- Interactions des boutons
- Liens vers les pages et les modaux
- Partager votre prototype
- PF
Projet final
- Web design avec Figma : concevez des interfaces efficaces
Ce qu’il faut attendre d’un cours Domestika
Apprenez à votre rythme
Apprenez chez vous, sans horaires fixes et à votre rythme. C’est vous qui décidez de votre programme d’apprentissage.
Apprenez auprès de grands noms du secteur créatif
Apprenez les techniques et les méthodes les plus utiles auprès des meilleurs professionnels du secteur créatif.
Rencontrez des spécialistes reconnus
Dans chaque leçon, votre professeur vous transmettra ses connaissances avec enthousiasme, vous donnera des explications claires et vous fera bénéficier de son expertise.
Certificates
PLUSIf you're a Plus member, get a certificat personnalisé signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Soyez aux premières loges
Profitez de vidéos de haute qualité pour ne manquer aucun détail. Grâce à un accès illimité, vous pourrez les regarder autant de fois que nécessaire pour perfectionner vos compétences.
Partagez vos connaissances et vos idées
Posez des questions, demandez des avis ou suggérez des solutions. Partagez votre expérience d’apprentissage avec les autres élèves de la communauté qui ont, comme vous, une passion pour la créativité.
Rejoignez une communauté créative internationale
Cette communauté réunit plus de huit millions de personnes des quatre coins du monde, curieuses et passionnées, avec cette même envie de développer et d’exprimer leur créativité.
Assistez à des cours de haute qualité
Domestika sélectionne les professeurs avec soin et produit chaque cours en interne afin de garantir une expérience d’apprentissage en ligne de qualité optimale.
Foire aux questions
Oui, ce cours est conçu pour les débutants et couvre tous les concepts fondamentaux du design visuel, de l’UI et du prototypage, avec un accompagnement pas à pas sur Figma.
Aucune expérience préalable en design n’est nécessaire. Il vous suffit d’un ordinateur et d’une connexion internet. Le cours utilise Figma, qui est gratuit pour commencer.
Vous apprendrez les principes du design, le wireframing, le prototypage haute fidélité sur Figma, la création de palettes de couleurs, la typographie, la mise en page, ainsi que l’application des principes de Gestalt et des affordances aux projets UI.
Oui, le cours comprend des leçons sur la création d’affiches, les techniques d’illustration à la main, et la réalisation de compositions audacieuses inspirées d’artistes comme Diego Rivera.
Absolument. Le cours couvre les bases de Figma, de la création de wireframes et de plans de travail au prototypage haute fidélité et aux mises en page responsives avec auto layout.
Oui, le cours offre une explication approfondie des principes clés du design tels que la hiérarchie, l’équilibre, le contraste, l’échelle et l’espace blanc pour des compositions digitales efficaces.
Vous apprendrez à créer des palettes de couleurs harmonieuses, à appliquer la théorie des couleurs, à choisir et associer des polices, et à utiliser des échelles modulaires pour des mises en page lisibles et attrayantes.