- Cet formation est passé
Formation Design UI
12 avril 2024 - 25 avril 2024
|Formation récurrent (Voir toutes les dates)
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Objectifs : Créer ou adapter une charte graphique pour le web | Acquérir la culture du design web | Prendre en compte l’expérience utilisateur et le facteur humain | Comprendre l’Influence de l’ergonomie sur le succès d’une application multimédia | Concevoir des wireframes pour applications mobiles et tablettes | Utilisation d’Adobe XD dans la conception de Web design responsive
Formation disponible
présentiel, classe à distance, individuel
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Un événement le 30 juillet 2024 à 9h00
Un événement le 11 décembre 2024 à 9h00
Histoire du Webdesign
• Historique du Web
• Évolution des outils et des langages
• Tendance du web actuel
• Processus
Ergonomie, UI design, UX design, IHM
• UX wording
• Améliorer l’expérience utilisateur
L’humain
• Personas
• Parcours utilisateurs
Itération
• Compréhension
• Exploration
• Matérialisation
• Implémentation
• Maquette graphique Interface web
La charte graphique
• Ce qu’elle contient
• Présentation
• Exemples de chartes graphiques web
L’identité graphique
• Poser les contraintes d’utilisation de l’identité graphique
• Protection
• Contraste
• Position
Le contenu
• Inventaire des différents types de contenus (images, vidéos, sons, animations, articles, etc.)
• Style d’images, d’illustrations et leur traitement graphique
• Iconographie
• Création d’un Moodboard représentant le ton et le message de la marque, l’entreprise, le produit
• Création d’un zoning à main levée
La grille
• Quelle grille pour quel format de page
• Distribuer les éléments et blocs de contenus sur la grille
• Wireframe explicatif
• Transformer la grille en fonction de la taille de l’écran et de son orientation
• Signifier les marges et marges internes
Les éléments interactifs
• Faire l’inventaire des éléments récurrents sur le site
• Navigation
• Boutons et liens
• Appel à action
• Formulaires, etc.
Typographie
• Classifications typographiques
• Quizz classification typographique
• Associer des fontes
• Exercices d’associations de fontes
• Créer un rythme, une hiérarchie typographique
* niveaux de titres
* taille, graisse, hauteur de ligne et couleur
* mise en forme d’une page d’article
* adapter la taille du texte au format d’écran
• Licences pour le web et les applications
*services de fontes par abonnement
*fontes gratuites
*les fonderies indépendantes
• Tester l’accessibilité de son texte
• Prévoir des alternatives à la fonte choisie (font stack)
Introduction
• Qu'est-ce que Adobe XD ?
• Les atouts et les enjeux du logiciel
Le prototypage
• Les étapes de conception
• Le design d'interface
• L'architecture de l'information
• Les tendances du design
Découvrir l'interface d'Adobe XD
• L'écran d'accueil
• Barre de menus et barre d'outils
• Les panneaux de propriétés
• Moodboard
Les plans de travail et repères
• Ajouter et gérer les plans de travail
• Manipuler les grilles et les repères
Les formes
• Créer des formes simples
• Créer des éléments vectoriels avec l'outil Plume
• Créer une icône
Les textes
• Saisir du texte
• Importer des fichiers textes
• Gérer les styles de texte
Les images
• Importer des images
• Créer des masques
Les couleurs
• Utiliser et gérer les couleurs
• Créer des dégradés de couleurs
• Générer des couleurs
La grille de répétition
• Utiliser et gérer une grille de répétition
Réaliser un écran d'accueil d'application mobile
• Conception d'une version papier ou maquette filaire détaillée
• Réalisation de l'interface sous Adobe XD
Symboles et kit UI
• Créer et manipuler les symboles
• Sélectionner et utiliser des kits UI
• Créer deux écrans d'application mobile (connexion/inscription)
Prototyper
• Créer des interfaces responsives
• Définir un parcours utilisateur
• Créer les liens d'interactions
• Prévisualiser l'interface
• Définition de positions fixes
• Créer des Overlays
• Animation Automatique
• Utilisation des gestes tactiles
Partager
• Créer des liens de partage
• Déposer des commentaires
• Partage d’un prototype sur le web
Tester
• Enregistrer une vidéo des interactions
• Installer l'application Adobe XD
• Tester le prototype en direct
• Les couleurs (1 h) • Visualisation sur tablette et smartphone
Les Plug-Ins
• Téléchargements et installations de plug-Ins
