Conception et animation Web Figma UI / UX avec 5 projets (2022)

  • Introduction à la dernière interface, outils et plugins Figma
  • Découvrez pourquoi nous utilisons la dernière fonctionnalité comme la mise en page automatique et le composant principal
  • Apprenez à lire brièvement le produit avant d’aborder la conception
  • Apprenez des techniques et des raccourcis professionnels
  • Comprendre l’utilisation de la grille de mise en page
  • Apprenez à concevoir des pages Web et des pages de destination dans Figma

Prérequis

N’importe quel ordinateur avec Internet.

La description


Bonjour, esprits créatifs,

Figma est un outil d’interface utilisateur en ligne gratuit pour créer, collaborer, prototyper et transmettre. C’est actuellement l’outil de conception d’interface leader de l’industrie et des entreprises telles que Notion, Zoom, Uber utilisent Figma.

Dans ce cours, vous apprendrez le processus de conception Web dans Figma, qui commence par la fiche produit et se termine par un beau design.

Nous allons tout recommencer à zéro et je partagerai toutes les techniques et raccourcis qui augmentent votre flux de travail.

J’ai partagé des ressources pour votre inspiration afin que vous puissiez facilement concevoir un site Web pour n’importe quel secteur/domaine.

Il vous est demandé de suivre le cours et de commencer à travailler dans Figma en parallèle.

Voici ce que couvrira le cours :

  1. LES BASES FIGMA
  • Outils de forme Figma
  • Grille
  • Outils de ligne et de flèche
  • Outils Ellipse et Cercle
  • Texte & Typographie
  1. LES TROIS PILIERS DE FIGMA
  • AutoLayout (avec 5 exemples)
  • Composants
  • Variantes
  1. Site Web de démarrage de PROJECT-1 Ed-Tech
  2. Site Web de voyage PROJET-2
  3. Conception du portefeuille PROJET-3
  4. Plateforme PROJET-4 CryptoMoney
  5. PROTOTYPE ET ANIMATION
  • TRIGGER On Drag and While Hover Trigger Expliqué
  • TRIGGER Mouse Enter & Leave et Touch Up & Down Trigger Expliqué
  • TRIGGER après le déclenchement du délai expliqué
  • TRIGGER OnTap vs OnClick Différence
  • ACTION Basics avec Naviguer vers expliqué
  • ACTION Remplacer par Expliqué
  • ACTION Ouvrir la superposition et permuter la superposition expliquée
  • ACTION Ouvrir et échanger la superposition et faire défiler vers et ouvrir l’action de lien expliquée
  • ACTION Reculer et fermer la superposition expliquée
  1. COURBE DE TRANSITION ET D’ASSOUPLISSEMENT
  • TRANSITION instantanée expliquée
  • TRANSITION Fondu enchaîné expliqué
  • TRANSITION Smart Animate expliqué
  • TRANSITION Entrer, sortir et pousser expliqué
  • TRANSITION Slide In and Out expliqué
  • Tique animée intelligente
  • Les bases de la courbe de Bézier et la facilité linéaire expliquées
  • Facilité d’entrée et de sortie expliquée
  • Facilité d’entrée et de sortie expliquée
  • Toutes les courbes expliquées en créant un composant
  1. Application Web de la plateforme de yoga PROJECT-5

Ce cours se compose de 5 projets au total:

  • PROJET-1 Site Web de démarrage Ed-Tech
  • Site Web de voyage PROJET-2
  • PROJET-3 Conception de portefeuille
  • Plateforme PROJET-4 CryptoMoney
  • Application Web de la plateforme de yoga PROJECT-5
  • Après avoir suivi ce cours, vous serez en mesure de
  • Créez des sites Web tendance avec un look épuré et moderne à partir de zéro.
  • Créer la conception du système du produit côte à côte.
  • Traduire le brief produit du client dans la conception réelle.
  • Publiez vos projets sur Behance avec la bonne directive.
  • Utilisez les dernières fonctionnalités comme AutoLayout, les composants principaux, les variantes, le style global.
  • Créer une application Web complète avec animation et micro-interaction
  • Partagez votre conception avec votre équipe et vos amis.
  • Ce cours est spécifiquement destiné aux débutants pour progresser afin de les aider à maîtriser Figma.
  • Tous les fichiers de conception source sont inclus à la fin du projet.
  • Rendez-vous à l’intérieur des cours! Bon voyage à venir.

À qui ce cours s’adresse-t-il ?

  • Designers débutants
  • UI/UX Freelancer veut passer à Figma
  • Débutants dans le domaine de la conception UI/UX

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.