Créer des interfaces utilisateur dynamiques pour des sites Web from Coursera

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.

What's inside

Syllabus

Démarrer le processus de UX Design : Empathie et définition

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.

Poursuivre le processus de UX design : Idéation

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.

Création de wireframes pour un site web réactif

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é.

Créer et tester des prototypes basse-fidélité

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.

Créer et tester des designs haute-fidélité

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 !

Documenter le travail de design et rechercher des emplois

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.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Créé par Google, développe des compétences UX de niveau débutant

Aborde le prototypage, les tests d'utilisabilité et la recherche d'emploi UX

Utilise Adobe XD, un outil de conception standard de l'industrie

Convient aux débutants en conception UX ayant suivi les cinq premiers cours du certificat Google

Nécessite une solide compréhension de la conception UX et des compétences en wireframing et prototypage

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Créer des interfaces utilisateur dynamiques pour des sites Web with these activities:

Review fundamental concepts of UX Design

Show steps

Understanding the foundational concepts of UX design will make learning about responsive web design easier and more efficient.

Browse courses on UX Design

Show steps

Review notes and assignments from previous UX design courses
Retake practice quizzes and exams
Read articles and blog posts about UX design

Revoir les bases du design UX

Show steps

Rafraîchissez vos connaissances sur les concepts de base du design UX, tels que l'empathie, la définition, l'idéation, le prototypage et les tests, pour vous préparer au cours.

Browse courses on UX Design

Show steps

Lire les articles de blog et les tutoriels sur le design UX
Examiner les études de cas de conception UX
Suivre des webinaires ou des cours en ligne sur les fondamentaux du design UX

Exercices de wireframing

Show steps

Renforcez vos compétences en wireframing en vous exerçant à créer des wireframes pour différentes mises en page de sites Web.

Browse courses on Wireframing

Show steps

Utiliser un outil de wireframing pour créer des wireframes de sites Web simples
Concevoir des wireframes pour différents types de contenu et de fonctionnalités
Obtenir des commentaires sur vos wireframes auprès d'autres concepteurs UX

Five other activities

Expand to see all activities and additional details

Show all eight activities

Tutoriel UX : les wireframes

Show steps

Comprenez les wireframes et leur importance dans le processus de conception UX.

Browse courses on Wireframes

Show steps

Regarder un tutoriel sur la création de wireframes.
Télécharger et installer un outil de création de wireframes.
Créer un wireframe simple pour une page Web.

Exercices d'esquisse d'idées UX

Show steps

Améliorez vos compétences en idéation UX grâce à des exercices d'esquisse.

Show steps

Réaliser un exercice de Crazy Eights.
Esquisser des idées pour une fonctionnalité UX donnée.
Partager vos croquis avec un pair pour obtenir des commentaires.

Tutoriels sur le prototypage avec Adobe XD

Show steps

Apprenez à utiliser Adobe XD pour créer des prototypes interactifs afin de tester et d'itérer vos conceptions.

Show steps

Suivre des tutoriels en ligne ou des cours sur le prototypage avec Adobe XD
Créer des prototypes pour différents types de fonctionnalités et d'interactions
Obtenir des commentaires sur vos prototypes auprès d'autres concepteurs UX

Session d'étude en groupe : conception de prototypes

Show steps

Collaborez avec des pairs pour créer et tester des prototypes UX.

Show steps

Former un groupe d'étude avec d'autres étudiants.
Sélectionner un projet de conception UX.
Créer des prototypes de vos conceptions.
Tester les prototypes avec les utilisateurs et recueillir des commentaires.

Projet : concevoir et prototyper une application mobile

Show steps

Appliquez vos compétences en conception UX pour concevoir et prototyper une application mobile.

Show steps

Définir le problème que l'application résoudra.
Rechercher les utilisateurs cibles.
Créer des wireframes et des prototypes de l'application.
Tester le prototype avec les utilisateurs et recueillir des commentaires.
Itérer sur la conception en fonction des commentaires des utilisateurs.

Career center

Learners who complete Créer des interfaces utilisateur dynamiques pour des sites Web will develop knowledge and skills that may be useful to these careers:

UX Designer

UX Designers are responsible for the overall user experience of digital products. They work with other designers, engineers, and product managers to create products that are both useful and enjoyable to use. This course can help aspiring UX Designers develop the skills they need to succeed in this field, including user research, wireframing, prototyping, and usability testing. The course's emphasis on responsive web design is also important, as UX Designers need to be able to design products that work well on all devices.

See salaries and explore the career path for UX Designer

Product Designer

Product Designers are responsible for the overall design of digital products. They work with UX Designers, UI Designers, and engineers to create products that are both useful and enjoyable to use. This course can help aspiring Product Designers develop the skills they need to succeed in this field, including user research, wireframing, prototyping, and usability testing. The course's emphasis on responsive web design is also important, as Product Designers need to be able to design products that work well on all devices.

See salaries and explore the career path for Product Designer

UI Designer

UI Designers are responsible for the visual design of digital products. They work with UX Designers to create interfaces that are both visually appealing and easy to use. This course can help aspiring UI Designers develop the skills they need to succeed in this field, including typography, color theory, and layout design. The course's focus on responsive web design is also important, as UI Designers need to be able to design products that work well on all devices.

See salaries and explore the career path for UI Designer

User Experience Architect

User Experience Architects are responsible for the overall user experience of digital products. They work with UX Designers, UI Designers, and engineers to create products that are both useful and enjoyable to use. This course can help aspiring User Experience Architects develop the skills they need to succeed in this field, including user research, wireframing, prototyping, and usability testing. The course's emphasis on responsive web design is also important, as User Experience Architects need to be able to design products that work well on all devices.

See salaries and explore the career path for User Experience Architect

Front-End Developer

Front-End Developers are responsible for the front-end of websites and applications. They work with UX Designers and UI Designers to create interfaces that are both visually appealing and easy to use. This course can help aspiring Front-End Developers build a foundation in UX design principles, prototyping, and user testing. The course's emphasis on responsive web design is also important, as Front-End Developers need to be able to build products that work well on all devices.

See salaries and explore the career path for Front-End Developer

Web Developer

Web Developers are responsible for building and maintaining websites. They work with UX Designers and UI Designers to bring digital products to life. This course can help aspiring Web Developers build a foundation in UX design principles, prototyping, and user testing. The course's emphasis on responsive web design is also important, as Web Developers need to be able to build products that work well on all devices.

See salaries and explore the career path for Web Developer

Graphic designer

Graphic Designers are responsible for the visual design of digital products. They work with UX Designers and UI Designers to create interfaces that are both visually appealing and easy to use. This course can help aspiring Graphic Designers develop the skills they need to succeed in this field, including typography, color theory, and layout design. The course's focus on responsive web design is also important, as Graphic Designers need to be able to design products that work well on all devices.

See salaries and explore the career path for Graphic designer

UX Researcher

UX Researchers are responsible for conducting user research to inform the design of digital products. They work with UX Designers and UI Designers to gather feedback from users and identify areas for improvement. This course can help aspiring UX Researchers develop the skills they need to succeed in this field, including user research methods, data analysis, and report writing. The course's focus on responsive web design is also important, as UX Researchers need to be able to conduct research on users who are accessing products on all devices.

See salaries and explore the career path for UX Researcher

Information Architect

Information Architects are responsible for the organization and structure of digital products. They work with UX Designers and UI Designers to create products that are easy to navigate and find information. This course can help aspiring Information Architects develop the skills they need to succeed in this field, including site mapping, user flows, and metadata management. The course's emphasis on responsive web design is also important, as Information Architects need to be able to design products that work well on all devices.

See salaries and explore the career path for Information Architect

Human Factors Engineer

Human Factors Engineers are responsible for designing products that are safe, efficient, and easy to use. They work with UX Designers and UI Designers to create products that take into account the human factors of users. This course can help aspiring Human Factors Engineers develop the skills they need to succeed in this field, including user research, usability testing, and product design. The course's emphasis on responsive web design is also important, as Human Factors Engineers need to be able to design products that work well on all devices.

See salaries and explore the career path for Human Factors Engineer

Product Manager

Product Managers are responsible for the overall vision and strategy of digital products. They work with UX Designers, UI Designers, and engineers to create products that are both useful and enjoyable to use. This course can help aspiring Product Managers develop the skills they need to succeed in this field, including product strategy, market research, and user feedback. The course's emphasis on responsive web design is also important, as Product Managers need to be able to create products that work well on all devices.

See salaries and explore the career path for Product Manager

Interaction Designer

Interaction Designers create interactive elements for websites, software, and other digital products. They use their knowledge of human-computer interaction to design interfaces that are both user-friendly and visually appealing. This course can help aspiring Interaction Designers build a foundation in UX design principles, prototyping, and user testing. The course's focus on responsive web design is particularly relevant, as more and more users are accessing websites and applications on mobile devices.

See salaries and explore the career path for Interaction Designer

Digital Marketing Specialist

Digital Marketing Specialists are responsible for marketing digital products and services. They work with UX Designers and UI Designers to create marketing campaigns that are both effective and engaging. This course can help aspiring Digital Marketing Specialists develop the skills they need to succeed in this field, including search engine optimization, social media marketing, and email marketing. The course's emphasis on responsive web design is also important, as Digital Marketing Specialists need to be able to create marketing campaigns that work well on all devices.

See salaries and explore the career path for Digital Marketing Specialist

Copywriter

Copywriters are responsible for the written content of digital products. They work with UX Designers and UI Designers to create content that is both clear and concise. This course can help aspiring Copywriters develop the skills they need to succeed in this field, including writing for the web, writing for UX, and writing for different audiences. The course's emphasis on responsive web design is also important, as Copywriters need to be able to write content that works well on all devices.

See salaries and explore the career path for Copywriter

Content Strategist

Content Strategists are responsible for the planning, creation, and management of content for digital products. They work with UX Designers and UI Designers to create content that is both useful and engaging. This course can help aspiring Content Strategists develop the skills they need to succeed in this field, including content planning, content creation, and content management. The course's emphasis on responsive web design is also important, as Content Strategists need to be able to create content that works well on all devices.

See salaries and explore the career path for Content Strategist