Formation UX Design et Design Thinking ou le Design centré utilisateur Figma - Design d'interface - Prototypages, mockups, wireframes

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Objectifs pédagogiques

• Créer des designs d'interfaces d'applications mobiles et de sites Web
• Appliquer les bonnes pratiques de la conception d'interfaces
• Travailler efficacement en équipe avec les outils collaboratifs
• Prototyper et tester des interfaces interactives
• Partager et exporter des projets pour les développeurs et les clients.

Niveau requis

Avoir de bonnes connaissances de l'environnement Web, et des connaissances de base du logiciel Adobe Photoshop. Avoir une première expérience en design d'interface et des notions d'ergonomie.

Public concerné

Webmasters, graphistes, directeurs artistiques, responsables de communication, chefs de projets, cadres, consultants, chefs de projets en Maîtrise d'Ouvrage (MOA) et Maîtrise d'Oeuvre (MO).

Programme

Introduction

• Les principes du prototypage
• Qu'est-ce que Figma ?
• Les atouts et les enjeux
• Figma App et Figma Cloud
• Les logiciels phares de la création d'interface
• Les principes du Design atomique

Le processus du design

• Le processus de conception
• Les tendances du design

Découvrir l'interface Figma

• Découvrir l'interface
• La barre de menu
• Les panneaux d'outils, calques, pages...

Créer un projet

• Créer une Team et un projet
• Importer des fichiers Sketch
• Utiliser des templates
• Gérer les fichiers et les projets

Manipuler les fonctionnalités de base

• Créer une frame
• Créer des formes
• Importer des images
• Masquer des images et des formes
• Importer des icônes et des éléments vectoriels
• Ajouter et éditer du texte
• Importer de la Data
• Ajouter des commentaires

Les styles

• Manipuler les couleurs
• Travailler avec les styles et les effets
• Créer des styles de couleurs, de textes et de grilles

Les composants

• Créer des composants simples
• Manipuler les instances
• Créer des overrides et des composants imbriqués
• Gérer les contraintes de redimensionnement
• Comprendre et manipuler les Auto Layouts
• Créer des variants de composants

Prototyper

• Créer des interactions entre frames
• Utiliser les transitions Smart Animate
• Visualiser le prototype
• Visualiser sur l'application Figma Mirror

Collaborer et partager

• Partager les fichiers
• Gérer les droits d'accès (view, comment, edit)
• FigJam : collaborer en équipe

Exporter

• Exporter le fichier .fig
• Préparer le fichier pour l'exportation des assets
• Utiliser Inspect Mode pour l'intégration
• Les services pour l'exportation (Avocode, Zeplin...)

Optimiser votre workflow

• Appliquer une bonne convention de nommage
• Appliquer les grilles et des repères
• Organisation des éléments
• Installer et utiliser les principaux plug-ins
• Utiliser du faux contenu

Exemples de travaux pratiques (à titre indicatif)

• Atelier : conception d'une interface
• Réaliser une interface Web ou une application mobile à partir d'un kit UI fourni
• Présentation et partage du prototype en fin de journée

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des productions
• Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)

Partager cette formation Télécharger au format pdf Ajouter à mes favoris