Conception UX/UI avec Adobe XD

Maîtrisez la conception UX et les interfaces UI

Design UI/UX4.6(57)4h 36min19 leçons3 sections

Ce que vous apprendrez

  • Comprendre la terminologie UX et le processus de conception
  • Rechercher et étudier les utilisateurs et les concurrents
  • Mener la phase d'analyse et préparer une étude de cas
  • Construire l'architecture de l'information et le plan du site
  • Créer une persona et une carte du parcours utilisateur
  • Dessiner des croquis et concevoir des maquettes filaires
  • Découvrir Adobe XD et l'utiliser
  • Concevoir le graphisme visuel et les prototypes

À propos du cours

Ce cours enseigne la conception de l'expérience utilisateur (UX) et de l'interface des sites et des applications (UI) avec Adobe XD. Il commence par une introduction, la terminologie et le processus de conception UX, puis la recherche sur les utilisateurs et les concurrents, avec une étude de cas concurrentielle pratique et la phase d'analyse. Ensuite, vous apprenez à construire l'architecture de l'information et le plan du site, à créer une persona et une carte du parcours utilisateur, puis le croquis, la maquette filaire et les principes de conception. Dans la partie pratique, vous découvrez Adobe XD, vous dessinez des croquis et vous concevez des maquettes filaires en trois parties, puis vous passez au design graphique visuel, aux compétences de conception d'interface et au prototypage. À la fin du cours, un fichier de compléments est disponible au téléchargement. Il convient aux graphistes, aux web designers, aux développeurs d'applications mobiles et à toute personne qui veut se lancer dans l'UX et l'UI. Aucune expérience préalable d'Adobe XD n'est nécessaire, car le cours commence par les bases. Après le cours, vous saurez étudier les utilisateurs, planifier leur expérience et concevoir une interface et un prototype pour un site ou une application.

Résultats attendus

  • Capacité à concevoir des interfaces utilisateur attrayantes et efficaces avec Adobe XD.
  • Compréhension des parcours utilisateurs et création d'expériences utilisateur intégrées.
  • Production de prototypes interactifs reflétant l'expérience utilisateur de manière professionnelle.
  • Conception de personas virtuels et de flux utilisateurs pour améliorer l'expérience.
  • Préparation de projets de conception complets incluant des graphiques visuels et des prototypes.

Avis des apprenants

Ces avis proviennent d'apprenants qui ont acheté le contenu et en ont complété au moins 50% — il n'y a aucun avis de personnes n'ayant pas suivi le contenu.
4.6
★★★★★
57 avis
5★
37
4★
19
3★
1
2★
0
1★
0

    Contenu du cours

    1

    UX

    9 leçons
    1. Introduction à la conception de l'expérience utilisateurIntroduit la conception de l'expérience utilisateur : son histoire et son concept, la différence entre UX et UI, les tâches du designer, des exemples pratiques, le modèle en nid d'abeille et la relation entre designer et développeur.15:02
    2. Terminologie de la conception de l'expérience utilisateurExplique les termes clés de l'UX : le modèle en nid d'abeille avec des notions comme l'utilité et la facilité d'utilisation, l'interaction homme-machine, le design d'interaction, l'environnement d'usage, la stratégie de contenu et les tests d'utilisabilité.13:15
    3. Parcours de conception de l'expérience utilisateurPrésente le processus de conception UX et ses étapes : stratégie, recherche et exploration, analyse, conception, production, puis lancement test, évaluation et lancement final.7:04
    4. Recherche et étude des utilisateursExplique les techniques de recherche utilisateur : entretiens, questionnaires, outils d'analyse du comportement dans l'application, observation de l'environnement de l'utilisateur et étude de sa journée type.7:50
    5. Recherche et étude des concurrentsExplique l'étude des objectifs du projet à différents niveaux, puis l'analyse de la concurrence : trouver les concurrents, recenser leurs forces et faiblesses et identifier les atouts qui attirent les utilisateurs.6:59
    6. Étude de cas concurrentielle pratiqueÉtude de cas concurrentielle pratique pour une application de restaurants : trouver les concurrents et comparer leurs atouts (offres, renouvellement des plats, moyens de paiement, commandes spéciales ou importantes) pour identifier où se démarquer.16:00
    7. Phase d'analyseExplique l'étape d'analyse en UX : analyser les informations, objectifs, problèmes et solutions d'un projet avec l'exemple d'une application de restaurant, puis recenser les écrans nécessaires, de l'accueil au paiement, à la recherche et aux réglages.13:32
    8. Construction de l'architecture de l'information et du plan du siteExplique l'architecture de l'information comme l'art d'organiser le contenu selon les attentes de l'utilisateur, avec exemples et technique de tri de cartes, puis la création d'un plan du site reliant les écrans et leur ordre de navigation.8:13
    9. Création de persona utilisateur et de carte de flux utilisateurExplique la création d'un persona et les données, objectifs et comportements qu'il contient, puis la carte de parcours utilisateur (User Flow) qui montre le chemin entre les écrans de l'application.11:18
    2

    UI avec Adobe XD

    9 leçons
    1. Esquisse et wireframeDéfinit les étapes de croquis et de wireframe en conception d'interfaces : le croquis est un dessin rapide sur papier pour transmettre l'idée, le wireframe une maquette ordonnée sur ordinateur, de faible ou haute fidélité.4:17
    2. Principes de conceptionExplique les principes de design et leur effet sur la psychologie de l'utilisateur : couleurs chaudes et froides et leur signification, choix des polices, formes, hiérarchie visuelle et espaces vides.20:34
    3. Introduction à Adobe XDPrésente Adobe XD : son interface et ses panneaux, les outils de dessin de formes et leur redimensionnement avec la touche Shift, l'alignement, les ombres, et la combinaison ou découpe de formes.22:20
    4. EsquisseRéalise dans Adobe XD les croquis initiaux des écrans de l'application : splash, accueil, inscription, connexion, écran principal, produit et profil, avec des cadres et des croix X pour figurer images et icônes.20:00
    5. Conception de wireframe (Partie 1)Transforme les croquis en wireframes dans Adobe XD pour les écrans splash, accueil et inscription, en réglant tailles, marges, arrondis, couleurs, textes et boutons.23:16
    6. Conception de wireframe (Partie 2)Poursuit le wireframe de l'écran principal dans Adobe XD : en-tête et pied de page, icônes de recherche, de voix et de filtre, cartes produit, et utilisation de Repeat Grid pour répéter les éléments.24:48
    7. Conception de wireframe (Partie 3)Termine le wireframe des écrans produit et menu dans Adobe XD : image, favoris, indicateur d'images, détails du produit, compteur de quantité et regroupement des éléments.21:33
    8. Conception graphique visuelleTransforme le wireframe en design UI final dans Adobe XD : ajout d'images par glisser-déposer, coloration du texte, ombres, dégradés, et refonte des icônes et indicateurs.21:55
    9. Compétences en conception graphique visuelle UI et prototypagePrésente des astuces Adobe XD : supprimer des écrans et grouper des éléments, dégradés de couleur, limites et hauteur de l'écran, puis créer un prototype avec transitions entre écrans et minuterie pour l'écran splash.18:32
    3

    Extensions

    1 pièces jointes
    1. Téléchargement des modules complémentaires

    Formateur

    Ing. Ahmed Al-Assar

    Ing. Ahmed Al-Assar

    Spécialiste de la conception de l'expérience utilisateur et de l'interface pour les applications mobiles, avec plus de 6 ans d'expérience dans ce domaine.
    2,496 vues1 cours

    Cours similaires