Objectifs
Programme
- Titre : Atelier d'introduction à l'UI/UX Design avec Figma
Introduction à l'UI/UX Design
Qu'est-ce que l'UI/UX Design ?
Différences entre l'UI et l'UX
Importance de l'UI/UX dans le développement d'un produit numérique
Adobe XD vs Figma
Présentation des deux outils de conception d'interfaces
Avantages et inconvénients de chaque outil
Pourquoi choisir Figma pour cet atelier
Découverte de l'interface de Figma
Navigation dans Figma
Présentation des différents panneaux et des fonctionnalités
Outils de conception
Utilisation des outils de dessin, de forme et de texte
Création de formes personnalisées
Utilisation des raccourcis clavier pour une productivité accrue
Gestion des typos
Importation et gestion des polices dans Figma
Utilisation des styles de texte
Bonnes pratiques pour la lisibilité du texte
Gestion des couleurs
Création et utilisation de palettes de couleurs
Utilisation des styles de couleurs
Harmonie des couleurs et accessibilité
Création d'un design system
Comprendre l'importance d'un design system
Création de composants réutilisables
Gestion des styles globaux
Création d'un wireframe (site ou application)
Planification et structure d'un wireframe
Utilisation des outils de mise en page et de navigation
Création d'un wireframe interactif dans Figma
Système de grille ou système multiple de 8
Introduction aux grilles de mise en page
Création d'une grille personnalisée
Utilisation d'un système de multiples de 8 pour la cohérence visuelle
1. CONCEVOIR LES ELEMENTS GRAPHIQUES D’UNE INTERFACE ET DE SUPPORTS DE COMMUNICATION
· Réaliser des illustrations, des graphismes et des visuels
· Concevoir des interfaces graphiques et des prototypes
· Réaliser une animation pour différents supports de diffusion
· Créer des supports de communication
2. CONTRIBUER A LA GESTION ET AU SUIVI D'UN PROJET DE COMMUNICATION NUMERIQUE
· Mettre en œuvre une stratégie webmarketing
· Assurer une veille professionnelle et développer les compétences collectives de son équipe
3. REALISER, AMELIORER ET ANIMER DES SITES WEB
· Intégrer des pages web
· Adapter des systèmes de gestion de contenus
· Optimiser en continu un site web ou une interface
DÉTAILS DU PROGRAMME :
· Site web : les fondamentaux (100 heures)
· Créer un site web dynamique (100 heures)
· Préparer son design (60 heures)
· Design web : travail sur les images (70 heures)
· Intégration charte graphique avec Html et Css (60 heures)
· Le webmarketing (30 heures)
· Les CMS (60 heures)
· Enrichir son site avec les animations 2D (80 heures)
· Créer une infographie destinée à l'impression (40 heures)
· Stage en entreprise (100 heures)
Site web : les fondamentaux
· Les navigateurs
· Html5 - Css3
· Le Responsive Design
· Bootstrap
· Le droit numérique pour les webmasters
Créer un site web dynamique
· Configurer un serveur local
· Les bases de Php - Mysql
· Les bases de javascript - Jquery
· Nom de domaine, hébergement, serveur
· Validation de code, émulateurs, compatibilité navigateurs
Intégration charte graphique
· Intégrer une charte graphique dans son code Html et Css
· Mise en ligne
Webmarketing
· Définition
· Optimisation d'un site
· Référencement naturel
· Référencement social
· Outils de suivi et de statistiques
· Veille référencement
Les Cms
· Définition
· Avantages
· Wordpress
· Prestashop
· Optimisation et référencement
Préparer son design
· L'ux design
· Les tendances
· La typographie
· La couleur
· Ombres et lumières
· Images et icones
Design web : Travail sur les images Apprentissage de Photoshop CC
· Le Design Web avec Photoshop
· Photomontages complexes
· Prototyper avec Photoshop
· Dimension CC
· Cinéma 4D
Apprentissage d'Illustrator CC
· Vectoriser un texte
· Vectoriser une image, une illustration
· Création de logos avec Illustrator
· Création d'icônes avec Illustrator
· Le Design Web avec Illustrator
Apprentissage d’Adobe XD
· Les bases
· Prototyper avec Adobe XD
Créer un document pour l'impression
· Apprentissage d'Adobe Indesign
· Créer une brochure
· Configuration pour l'impression
Les animations 2d et 2d vectorielles
· Adobe Animate CC
· After Effects CC
· Les fondamentaux de Cinema 4D
· Les fondamentaux de Dimension CC
· Jquery Ui
· Html 5
Observations
Handicap : La formation est adaptée aux personnes handicapées.
L'élève aura accès aux cours en ligne sur un site dédié.
· Les élèves inscrits à la session auront accès à l'ensemble des cours et à tous les supports visuels, et documentations disponibles sur le site dédié aux cours.
· Les élèves doivent prendre un abonnement au Créative Cloud D’adobe regroupant les logiciels utilisés durant les cours d’infographie et d’animation 2D (Coût d’environ 19.50 € par mois à souscrire
directement auprès d’Adobe.)
· Les exercices devront être postés sur l'espace personnel de l'élève afin qu'ils soient corrigés et notés par le ou la formatrice, avec commentaires et/ou conseils.
· A la fin de chaque chapitre, un devoir donné par le formateur devra être réalisé et posté sur le site sur l'espace personnel de l'élève, sur un drive ou par email.
· Tout le long de la formation, un press-book devra être constitué pour le présenter aux examinateurs lors de l'examen.
· La formation est organisée pour un effectif de 5 stagiaires minimum.
· Les conditions générales dans lesquelles la formation est dispensée, notamment les moyens pédagogiques et techniques, les modalités de contrôle de connaissances, sont les suivants :
Fiches de présence émargées,
Attestation de formation,
Des Qcm, bilans seront proposés tout au long de la formation afin d’évaluer les compétences
et de valider les acquis.
Un examen sera mis en place au mois de février, juin ou octobre de l’année suivant la fin de la
formation. (Durée de l'examen 1H40, dans nos locaux de Toulouse)
INTERVENANTS :
· Thomas Quantin infographiste professionnel depuis plus de 5 ans, formateur
· François Stéphanie, webmestre et développeuse web depuis 10 ans, formatrice RESPONSBALE PEDAGOGIQUE : Patrick Domingues
RESSOURCES DISPONIBLES : des cours en ligne à consulter en illimité, des vidéos sur des manipulations spécifiques, des fichiers sources pour réaliser les exercices (images, questionnaires,), un compte personnel avec un résumé de l'avancé des cours et des commentaires ou des conseils des formateurs.
L'élève aura accès aux cours sur le site dédié sans limitation durant toute la durée de sa formation.
EXAMEN : La formation sera sanctionnée par un examen qui aura lieu dans nos locaux de Toulouse. Le jury sera composé de 2 jurés indépendants. La durée de cet examen est généralement de 1h40 par élève.
L'élève devra présenter un projet complet.
Si l'élève réussi l'examen, un diplôme de CONCEPTEUR DESIGNER UI de niveau VI (niveau bac + 3), lui sera remis par la Direccte (Directions régionales des entreprises, de la concurrence, de la consommation, du travail et de l'emploi).
A ce jour, cette formation a un taux de 98% de réussite.
