When you enroll in this course, you'll also be enrolled in this Professional Certificate.
Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate from Google
There are 6 modules in this course
Responsive Web Design dans Adobe XD est le sixième cours de ce programme qui vous permettra d’acquérir les compétences dont vous avez besoin pour postuler à des emplois de niveau débutant dans le domaine de la conception de l’expérience utilisateur (UX). Dans le cours 6, vous apprendrez à concevoir un site Web réactif à l’aide d’Adobe XD, un outil de conception connu. Vous pourrez étudier le processus de conception du début à la fin : l’empathie avec les utilisateurs, la définition de leurs points de contrariété, trouver des idées de solutions conceptuelles, créer des maquettes fonctionnelles (wireframes) et des prototypes et tester des conceptions pour obtenir des commentaires. À la fin du cours, vous aurez un nouveau projet de conception à inclure dans votre portfolio professionnel de conception d’expérience utilisateur.
En outre, vous apprendrez à rechercher des emplois dans le domaine de la conception UX, à créer un CV qui met en valeur vos compétences et vos réalisations, ainsi qu’à créer un site Web pour votre portfolio professionnel.
Des concepteurs et chercheurs UX de Google vous serviront d’instructeurs. Vous réaliserez des travaux pratiques simulant des scénarios de conception UX. Les participants qui termineront les sept cours de ce programme certifiant seront aptes à postuler aux emplois de concepteurs UX débutants.
À la fin de ce cours, vous serez capable de :
- Appliquer chaque étape du processus de conception UX (empathie, définition, idéation, prototype, test) afin de créer un site Web réactif.
- Développer des conceptions à l’aide d’un outil de conception connu, Adobe XD.
- Planifier l’architecture des informations et créer des plans de site pour la conception de sites Web.
- Appliquer des mises en page courantes pour les pages Web.
- Planifier et mener une étude d’utilisabilité afin de recueillir les commentaires sur vos conceptions.
- Itérer les conceptions sur la base des informations de la recherche.
- Travailler avec des systèmes de conception dans Adobe XD.
- Ajouter un nouveau projet de conception à votre portfolio professionnel d’expérience utilisateur.
- [Optionnel] Créer ou mettre à jour un CV axé sur l’UX.
- [Optionnel] Apprendre à rechercher et à postuler à des emplois de niveau initiation dans le domaine de l’UX.
Ce cours convient aux concepteurs UX de niveau débutant ayant suivi les cinq cours précédents du certificat en conception UX de Google. Sinon, les participants doivent posséder une solide compréhension des bases du processus de conception, une expérience dans la création de maquettes fonctionnelles, de maquettes et de prototypes et avoir la capacité de mener des études d’utilisabilité. Aucune expérience préalable avec Adobe XD n’est requise.
Commencez par les bases du design de sites Web réactifs. Pour créer un site Web réactif, vous suivrez les étapes du processus de UX Design : empathie, définition, idéation, prototype et test. Dans cette partie du cours, vous suivrez les phases d’empathie et de définition. En outre, vous commencerez à explorer Adobe XD, un outil de design connu que vous utiliserez tout au long de ce cours.
Introduction au cours 6 : Responsive Web Design dans Adobe XD•2 minutes
Dave - Mon parcours vers l’UX•3 minutes
Bienvenue dans la semaine 1•1 minute
Comprendre les sites Web réactifs•3 minutes
Introduction à Adobe XD•2 minutes
Démarrer un projet dans Adobe XD•8 minutes
Jennifer - Utiliser les outils de design numérique•2 minutes
Faire preuve d'empathie envers les utilisateurs et comprendre les points douloureux•4 minutes
Créer des personas•2 minutes
Créer des user stories (récits utilisateur)•3 minutes
Créer une carte du parcours utilisateur•4 minutes
Élaborer un énoncé de problème•2 minutes
Synthèse : démarrer le processus de UX design : Empathie et définition•1 minute
16 readings•Total 155 minutes
Bienvenue dans le cours 6•10 minutes
Introduction au deuxième projet de portfolio•10 minutes
Choisir l’instruction de votre deuxième projet de portfolio•10 minutes
Premiers pas avec Adobe XD•10 minutes
Optionnel - Premiers pas avec Figma•10 minutes
En savoir plus sur l’empathie envers les utilisateurs•10 minutes
Mener des entretiens pour les cartes d’empathie •10 minutes
Créer des cartes d’empathie•10 minutes
Exemple d’activité : créer une carte d’empathie•10 minutes
En savoir plus sur les personas•10 minutes
Exemple d’activité : créer des personas•10 minutes
En savoir plus sur les user stories•10 minutes
En savoir plus sur les cartes du parcours utilisateur•10 minutes
Exemple d’activité : créer une user story et une carte du parcours utilisateur•10 minutes
En savoir plus sur les énoncés de problèmes•10 minutes
Glossaire 1•5 minutes
8 assignments•Total 169 minutes
Activité : soumettre l’instruction de projet de portfolio de votre choix•5 minutes
Tester vos connaissances en matière de design de sites Web réactifs•2 minutes
Tester vos connaissances sur les bases d’Adobe XD•4 minutes
Tester vos connaissances sur l’empathie envers les utilisateurs•4 minutes
Activité : créer une carte d’empathie•90 minutes
Activité : créer des personas•30 minutes
Activité : créer une user st ory et une carte du parcours utilisateur•30 minutes
Tester vos connaissances sur les énoncés de problèmes•4 minutes
1 peer review•Total 60 minutes
Défi hebdomadaire 1 : créer un énoncé de problème•60 minutes
5 discussion prompts•Total 50 minutes
Partager votre enthousiasme pour l’apprentissage d’Adobe XD•10 minutes
Comparez et opposez Adobe XD et Figma•10 minutes
Discuter de l’importance de prendre en compte les besoins des utilisateurs•10 minutes
Partager les questions de l’entretien•10 minutes
Créer et partager une user story sur vous-même•10 minutes
Poursuivre le processus de UX design : Idéation
Module 2•5 hours to complete
Module details
Votre projet de design de site Web réactif est en cours. Dans cette partie du cours, vous allez passer à la phase de d'idéation du processus de design. Pour vous aider à trouver des idées de solutions de design, vous effectuerez un audit concurrentiel, terminerez l’activité How Might We et esquisserez des idées à l’aide de Crazy Eights. Vous découvrirez également l’importance de l’architecture de l’information et des plans de site lorsqu’il s’agit de concevoir des sites Web.
Planifier l’architecture de l’information•2 minutes
Explorer les structures de sites Web courantes•7 minutes
Explorer les plans de site•3 minutes
Créer un plan de site pour votre site Web•5 minutes
Synthèse : poursuivre le processus de UX design : Idéation•1 minute
8 readings•Total 75 minutes
En savoir plus sur les audits concurrentiels•10 minutes
Exemple d’activité : réaliser un audit concurrentiel de votre site Web•10 minutes
En savoir plus sur l’utilisation des audits concurrentiels pour idéer•10 minutes
En savoir plus sur How Might We et Crazy Eights•10 minutes
Exemple d’activité : idéer pour votre site Web•10 minutes
En savoir plus sur l’architecture de l’information•10 minutes
En savoir plus sur la création d’un plan de site•10 minutes
Glossaire 2•5 minutes
5 assignments•Total 92 minutes
Activité : réaliser un audit concurrentiel de votre site Web•30 minutes
Auto-réflexion : utiliser la recherche concurrentielle pour éclairer les designss•20 minutes
Tester vos connaissances sur les techniques d’idéation•4 minutes
Activité : idéer pour votre site Web•30 minutes
Tester vos connaissances sur les structures de sites Web•8 minutes
1 peer review•Total 60 minutes
Défi hebdomadaire 2 : créer un plan de site pour un site Web•60 minutes
2 discussion prompts•Total 20 minutes
Discuter de votre technique d’idéation préférée•10 minutes
Discuter des structures des sites Web que vous avez utilisés•10 minutes
1 plugin•Total 15 minutes
Explorer les structures des sites Web•15 minutes
Création de wireframes pour un site web réactif
Module 3•7 hours to complete
Module details
Une fois que vous avez fait preuve d'empathie envers les utilisateurs, défini le problème utilisateur à résoudre et commencé à concevoir des solutions possibles, il est temps de donner vie à vos idées dans des wireframes. Votre site web réactif aura différentes mises en page, en fonction de l'appareil et de la taille de l'écran pour lesquels vous le concevez. Vous créerez donc de nombreuses wireframes différentes. Tout d'abord, vous allez explorer les mises en page courantes de sites web et vous créerez des wireframes en papier. Ensuite, vous découvrirez quelques éléments et composants couramment utilisés dans le design de sites web réactifs. Vous passerez ensuite à la création de wireframes numériques dans Adobe XD. Pour finir, vous mettrez à jour et affinerez vos wireframes pour en améliorer l'accessibilité.
Découvrez les mises en page courantes des pages d'accueil de sites web•7 minutes
Les bases des wireframes•9 minutes
Tracer une mise en page réactive•3 minutes
Ajuster les mises en page en fonction de la taille de l'écran•3 minutes
Transition des wireframes papier vers les wireframes numériques•1 minute
Créer des wireframes numériques dans Adobe XD•9 minutes
Créer des wireframes pour des tailles d'écran supplémentaires dans Adobe XD•5 minutes
Jay - design avec Adobe XD•3 minutes
Affiner les wireframes pour améliorer l'accessibilité•6 minutes
Évaluer les wireframes à l'aide des principes de la Gestalt•3 minutes
Synthèse : Création de wireframes pour un site web réactif•1 minute
13 readings•Total 125 minutes
En savoir plus sur les mises en page courantes des sites•10 minutes
En savoir plus sur les wireframes•10 minutes
Exemple d’activité : Commencez les wireframes en papier pour votre site web•10 minutes
En savoir plus sur le traçage de mises en page réactives•10 minutes
Éléments communs utilisés dans le design réactif•10 minutes
Exemple d’activité : Créez des variantes de vos wireframes papier•10 minutes
En savoir plus sur la création de wireframes numériques dans Adobe XD•10 minutes
Optionnel - Créer des wireframes numériques dans Figma•10 minutes
Exemple d’activité : Créer des wireframes numériques pour une taille d'écran de bureau•10 minutes
Facultatif : créer des wireframes pour des tailles d'écran supplémentaires dans Figma•10 minutes
Exemple d’activité : Créer des wireframe numériques pour des tailles d'écran supplémentaires•10 minutes
En savoir plus sur l'utilisation des principes de la Gestalt dans les wireframes•10 minutes
Glossaire 3•5 minutes
4 assignments•Total 120 minutes
Activité : Commencer les wireframes en papier pour votre site web•30 minutes
Activité : Créez des variantes de vos wireframes sur papier•30 minutes
Activité : Créer des wireframes numériques pour une taille d'écran de bureau•30 minutes
Activité : Créer des wireframes numériques pour des tailles d'écran supplémentaires•30 minutes
1 peer review•Total 60 minutes
Défi hebdomadaire 3 : Affiner les wireframes pour qu'ils répondent aux normes•60 minutes
1 discussion prompt•Total 10 minutes
Tenez compte des titres, des points de repère et des points focaux dans vos maquettes•10 minutes
2 plugins•Total 30 minutes
Identifier la présentation du site web•15 minutes
Explorer le responsive website design•15 minutes
Créer et tester des prototypes basse-fidélité
Module 4•6 hours to complete
Module details
Maintenant que vous avez créé des wireframes numériques dans Adobe XD, il est temps de construire, de tester et d'itérer un prototype basse-fidélité. Tout d'abord, vous apprendrez à créer un prototype basse-fidélité dans Adobe XD. Vous recueillerez des commentaires sur votre prototype en planifiant et en réalisant une étude sur la facilité d’utilisation. Ensuite, vous modifierez vos designs basse-fidélité en fonction des constatations issues de votre recherche.
Comprendre les prototypes basse-fidélité•3 minutes
Élaborer un prototype basse-fidélité dans Adobe XD•5 minutes
Planifier une étude de recherche UX•4 minutes
Mener une étude sur la facilité d’utilisation•3 minutes
Réduire les préjugés dans une étude d’utilisabilité•5 minutes
Analyser et synthétiser les résultats de la recherche•3 minutes
Itérer les designs basse-fidélité en fonction des résultats de la recherche•5 minutes
Synthèse : Créer et tester des prototypes basse-fidélité•1 minute
12 readings•Total 115 minutes
En apprendre davantage sur la création d'un prototype basse-fidélité dans Adobe XD•10 minutes
Facultatif - Créer un prototype basse-fidélité dans Figma•10 minutes
Exemple d'activité : Créez un prototype basse-fidélité pour votre site Web réactif•10 minutes
Contrôler un prototype basse-fidélité•10 minutes
En savoir plus sur la planification d'une étude de recherche UX•10 minutes
Exemple d'activité : Planifier une étude de recherche UX•10 minutes
En savoir plus sur la réalisation d'une étude d’utilisabilité•10 minutes
Exemple d'activité : Menez une étude d'utilisabilité pour un prototype basse-fidélité•10 minutes
En savoir plus sur l'analyse et la synthèse des résultats de la recherche•10 minutes
Exemple d'activité : Analyser et synthétiser les résultats d'une étude d’utilisabilité•10 minutes
En savoir plus sur l'itération des designs basse-fidélité•10 minutes
Glossaire 4•5 minutes
7 assignments•Total 148 minutes
Tester vos connaissances sur les maquettes par rapport aux prototypes•4 minutes
Activité : Créez un prototype basse-fidélité pour votre site Web réactif •30 minutes
Activité : Planifier une étude de recherche UX•30 minutes
Auto-réflexion : Déterminez comment réduire les préjugés dans vos propres études•20 minutes
Activité : Menez une étude d’utilisabilité pour un prototype basse-fidélité•30 minutes
Activité : Analyser et synthétiser les résultats d'une étude d’utilisabilité•30 minutes
Testez vos connaissances sur la modification des designs en fonction des conclusions issues de la recherche•4 minutes
1 peer review•Total 60 minutes
Défi hebdomadaire 4 : Mettre à jour le prototype basse-fidélité en fonction des constatations issues de l'étude d'utilisabilité•60 minutes
2 discussion prompts•Total 20 minutes
Partager les constatations de votre étude sur la facilité d’utilisation•10 minutes
Expliquez comment vous avez itéré les designs en fonction des conclusions issues de la recherche•10 minutes
Créer et tester des designs haute-fidélité
Module 5•7 hours to complete
Module details
Dans cette partie du cours, vous serez prêt à créer des maquettes de votre site Web réactif dans Adobe XD. Vous élargirez aussi vos travaux avec les design systems et utiliserez des composants provenant de design systems externes dans vos designs de sites Web réactifs. Ensuite, vous transformerez vos maquettes en un prototype haute-fidélité en créant des connexions, en ajoutant des détails d'interaction et en ajustant les animations. Enfin, vous testerez votre prototype haute-fidélité par le biais d'une étude d'utilisabilité, afin de recueillir les commentaires d'un ensemble diversifié d'utilisateurs. À la fin de cette partie du cours, vos design systems de sites Web réactifs seront terminées !
Examiner les éléments fondamentaux du visual design•10 minutes
Examiner comment disposer les éléments dans les maquettes•10 minutes
Appliquer les principes de visual design•10 minutes
Optionnel - Commencer à créer des maquettes de sites Web dans Figma•10 minutes
Ajouter des images et des logos aux maquettes dans Adobe XD•10 minutes
Utiliser des grilles de répétition pour concevoir dans Adobe XD•10 minutes
Exemple d’activité : créer des maquettes pour un site Web•10 minutes
En savoir plus sur les menus de navigation cachés•10 minutes
Optionnel - Créer des maquettes pour un site Web mobile dans Figma•10 minutes
Exemple d’activité : créer une maquette pour la page d'accueil d'un site Web mobile•10 minutes
En savoir plus sur les design systems•10 minutes
Optionnel - Exemple d'activité : créer une feuille d'autocollants dans Figma•10 minutes
En savoir plus sur l'accessibilité du Web•10 minutes
Glossaire 5•5 minutes
Optionnel - Examiner comment planifier et mener une étude d’utilisabilité •10 minutes
9 assignments•Total 144 minutes
Tester vos connaissances sur les bases des maquettes•4 minutes
Tester vos connaissances sur la création d'une page d'accueil dans Adobe XD•6 minutes
Activité : créer des maquettes pour un site Web•30 minutes
Activité : créer une maquette pour la page d'accueil d'un site Web mobile•30 minutes
Tester vos connaissances sur l'utilisation des design systems dans Figma•4 minutes
Activité : documenter vos décisions de design•30 minutes
Optionnel - Activité : créer une feuille d'autocollants dans Figma•30 minutes
Tester vos connaissances sur l'accessibilité du Web•6 minutes
Tester vos connaissances concernant les études d’utilisabilité•4 minutes
1 peer review•Total 60 minutes
Défi hebdomadaire 5 : créer un prototype haute-fidélité pour un site Web•60 minutes
2 discussion prompts•Total 20 minutes
Partager vos design systems préférés•10 minutes
Partager une ressource sur le design inclusif et accessible•10 minutes
Documenter le travail de design et rechercher des emplois
Module 6•7 hours to complete
Module details
Une fois le Responsive web design terminé, vous serez prêt à partager votre travail avec les autres. Pour commencer, vous apprendrez à préparer et à transmettre les designs aux ingénieurs qui construiront le produit final. Vous ajouterez aussi une étude de cas à votre portfolio professionnel de designs UX, présentant votre conception Responsive web design. Ensuite, vous vous concentrerez sur votre objectif global : trouver un emploi de designer UX. Vous apprendrez des trucs et astuces pour analyser les offres d’emploi, et vous créerez un CV convaincant qui mettra en valeur vos nouvelles compétences en UX.
Grow with Google is an initiative that draws on Google's decades-long history of building products, platforms, and services that help people and businesses grow. We aim to help everyone – those who make up the workforce of today and the students who will drive the workforce of tomorrow – access the best of Google’s training and tools to grow their skills, careers, and businesses.
Les concepteurs d’expérience utilisateur (UX) se concentrent sur l’expérience qu’ont les utilisateurs de l’utilisation de produits tels que les sites Internet, les applications et les objets physiques. Les concepteurs UX rendent ces interactions quotidiennes accessibles, agréables et conviviales. Les fonctions d’un concepteur UX débutant peuvent inclure la proposition d’idées pour résoudre les problèmes des utilisateurs, la recherche de solutions avec les utilisateurs et la conception de maquettes fonctionnelles (wireframes), de maquettes et de prototypes.
Si vous aimez discuter et vous identifier aux personnes, dessiner, penser de manière créative ou prêter attention aux détails, un emploi en tant que concepteur UX pourrait vous convenir !
Quelle est l’expérience requise ?
Ce cours est le sixième des sept cours qui vous permettront d’acquérir les compétences dont vous avez besoin pour postuler à des emplois de niveau débutant dans la conception de l’expérience utilisateur. Nous vous conseillons fortement de suivre les cinq premiers cours du certificat en conception UX de Google avant de terminer celui-ci :
Sinon, si vous souhaitez suivre ce cours en tant que premier cours du programme, vous devez avoir de l’expérience dans la conduite de recherches sur les utilisateurs afin de comprendre les besoins des utilisateurs et de déterminer les points de contrariété spécifiques des utilisateurs. Vous devez être capable de créer des personas, des récits utilisateur (user stories), des cartes de parcours utilisateur et des énoncés de problèmes. Vous devez savoir comment créer des maquettes fonctionnelles et des prototypes basse-fidélité sur papier. Il est également utile d’avoir de l’expérience dans la réalisation d’études d’utilisabilité et dans l’itération de conceptions. Si vous n’êtes pas familier avec l’un de ces sujets, ils sont abordés dans les cours précédents du certificat en conception UX de Google.
Quels sont les outils ou plateformes inclus dans le programme de formation ?
Adobe XD et Figma sont les outils de conception enseignés dans le programme du Certificat en conception UX de Google. Ce cours se concentre sur la création de conceptions dans Adobe XD. Les participants bénéficient d’un accès gratuit de neuf mois à la version une seule application d’Adobe XD afin de partager des liens illimités vers des prototypes. Vous devez suivre le cours 1 (y compris tous les devoirs notés) du certificat en conception UX de Google pour recevoir cette offre. Pour rappel, cette offre est réservée aux participants à la formation sur le certificat en conception UX de Google et vous ne pouvez pas revendre, prêter ou partager cet abonnement. Une fois que les participants admissibles ont terminé le cours 1, ils reçoivent un e-mail et un message de Coursera contenant les instructions de remboursement de l’offre.
Des applications de feuilles de calcul, de traitement de texte et de présentation seront également utilisées. Tout au long du programme, vous créerez en utilisant la plateforme de votre choix un portfolio professionnel où vous présenterez vos travaux de conception UX.
À quels emplois ce certificat m’aidera-t-il à me préparer ?
Un des aspects les plus intéressants qui peut vous inciter à rejoindre le domaine de l’expérience utilisateur est le grand nombre d’opportunités d’emploi disponibles. La plupart des entreprises ont besoin de concepteurs UX pour les aider à créer leurs produits numériques et physiques. Le besoin de concepteurs UX ne cesse d’augmenter chaque jour et il y a pénurie de professionnels de la conception UX pour ces fonctions.
Une carrière dans la conception UX vous permettra de travailler soit comme généraliste dans un poste de concepteur UX, concepteur d’interface utilisateur ou recherche UX, soit comme spécialiste dans un poste de concepteur visuel ou concepteur d’interaction. Vous serez en mesure, à la fin de ce programme de formation, de rechercher des emplois dans tous ces titres et de trouver le poste qui vous convient le mieux.
Dois-je suivre le cours dans un ordre précis ?
Il s’agit du sixième des sept cours du certificat en conception UX de Google. Nous vous conseillons fortement de suivre les sept cours de ce programme de certification dans l’ordre présenté, car le contenu et les applications de chaque cours s’appuient sur les informations présentées et mises en pratique dans les cours précédents.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Certificate?
When you enroll in the course, you get access to all of the courses in the Certificate, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.