Introduction à l'UI/UX pour les graphistes : Adobe Xd | Maddy Beard | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Introduction à l'UI/UX pour les graphistes : Adobe Xd

teacher avatar Maddy Beard, Product Designer & Educator

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Bande-annonce

      2:09

    • 2.

      Aperçu du projet

      1:18

    • 3.

      Qu'est-ce exactement que l'UX ?

      4:34

    • 4.

      Cerner un problème

      6:02

    • 5.

      Cartographie de l'empathie

      6:26

    • 6.

      Parcours de l'utilisateur et esquisse

      8:46

    • 7.

      Configurer Adobe Xd

      5:59

    • 8.

      Wireframe

      12:30

    • 9.

      UI Design

      6:10

    • 10.

      Composants et plus

      17:53

    • 11.

      BONUS ! Plus de design et vidéo image par image

      23:12

    • 12.

      Créer sa vidéo

      10:13

    • 13.

      Dernières astuces

      3:27

    • 14.

      Conclusion

      1:01

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

10 616

apprenants

30

projets

À propos de ce cours

Que vous vouliez étendre les services que vous offrez en tant que concepteur ou changer complètement de métier, les compétences en interface utilisateur/expérience utilisateur (UI/UX) et en conception de produits sont extrêmement utiles. De nombreux créatifs comme vous le savent, mais sans savoir par où commencer.

Rejoignez Maddy Beard, designer stratégique, alors qu'elle vous aide à vous lancer dans l'amélioration de ces compétences. Le meilleur moyen d'apprendre le design de l'UI/UX est de le pratiquer et de vous impliquer dans votre apprentissage. C'est pourquoi, pendant ce cours, je vous guiderai dans la création d'un projet d'UI/UX qui vous est propre : un moyen parfait d'inaugurer votre portfolio. En chemin, vous apprendrez toutes les étapes du processus et comment les appliquer efficacement à votre travail.

Ce cours est parfait pour les graphistes et autres créatifs qui connaissent les bases du design mais qui souhaitent étendre leurs compétences à la conception d'UI/UX. Ne vous inquiétez pas si vous n'avez jamais ouvert Adobe Xd auparavant : ce cours couvre les éléments de base et les fonctionnalités favorites de Maddy, ainsi que les astuces les plus utilisées.

À la fin de ce cours, vous serez en mesure de répéter ce processus encore et encore, d'y apporter votre propre touche et d'étoffer votre portfolio, afin de trouver un emploi qui vous passionne ou un client en freelance. L'usage rend maître, alors n'hésitez pas à revenir souvent dans ce cours.

Voici ce dont vous aurez besoin :

  • Stylo et papier
  • Papillons adhésifs (ou morceaux de papier)
  • Une imprimante (facultative, si vous souhaitez imprimer le modèle d'iPhone fourni)
  • Adobe Xd (téléchargement gratuit !)
  • Adobe Premiere Pro ou iMovie

Rencontrez votre enseignant·e

Teacher Profile Image

Maddy Beard

Product Designer & Educator

Enseignant·e

I'm Maddy Beard, a product designer & content creator based in Denver, Colorado.

You can also find me on YouTube, Instagram, and my Newsletter. 

Voir le profil complet

Compétences associées

Adobe XD Design Design UI/UX
Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Bande-annonce: Beaucoup de concepteurs veulent passer à UI/UX, mais il peut être vraiment difficile de savoir par où commencer et c'est exactement pourquoi j'ai créé cette classe. Je suis Maddy Beard et je suis un designer stratégique basé à Denver, Colorado. J' ai d'abord commencé en design graphique au programme de design de Penn State, où j'ai surtout appris l'image de marque, impression et la conception d'emballage. Après avoir obtenu mon diplôme, j'ai travaillé dans une entreprise de technologie en tant que Digital Designer, concevant des sites Web de commerce électronique pour certains des plus grands détaillants du monde. Puis j'ai décidé que je voulais travailler pour moi-même afin que je puisse m'approprier davantage les projets sur lesquels j'ai travaillé et aussi avoir plus de flexibilité dans ma vie et ma carrière. Depuis que je suis parti tout seul. J' ai fait de l'image de marque, du design web et de la conception UI/UX pour les petites et moyennes entreprises, y compris Commune, une plateforme numérique pour le bien-être personnel et sociétal, Yoga with Adrian, une plateforme de yoga en ligne avec plus de neuf millions d'abonnés sur YouTube, WeFinance, une entreprise fintech locale de Denver et bien d'autres encore. Actuellement, je travaille en tant que résident créatif pour Adobe, concentrant principalement sur la conception UI/UX dans l'espace bien-être. J' enseigne également les concepts UI/UX sur YouTube et Instagram, qui est l'endroit où j'ai entendu parler de tant de designers qui sont intéressés à entrer dans UI/UX, mais qui ne savent pas vraiment par où commencer. Les étudiants pensent qu'ils doivent verser des milliers de dollars et des mois de temps dans de vastes camps de démarrage et des cours UX, et ce n'est tout simplement pas le cas. C' est pourquoi je suis vraiment excité de partager ce cours avec vous. Je crois vraiment que vous n'avez pas besoin d'étudier UI/UX pour réussir, vous devez le pratiquer. C' est exactement ce que je vais vous aider dans ces prochaines leçons. Nous allons passer en revue les bases, ce qu'est l'UI/UX, et quelles compétences s'y rattachent. Ensuite, nous allons entrer dans l'ensemble du processus UX du début à la fin. J' ai hâte que vous ayez plus confiance en vos compétences au fur et à mesure de ces leçons. Commençons. 2. Aperçu du projet: Le projet de cette classe consiste à concevoir une fonctionnalité unique d'application mobile à l'aide d'Adobe XD. Ne vous laissez pas tromper en pensant que vous devez complètement redessiner une toute nouvelle expérience à partir de zéro, afin de mettre en valeur vos compétences dans votre portefeuille. En fait, je pense qu'en tant que débutant, il est plus efficace de vraiment perfectionner et de se concentrer intentionnellement sur une fonction ou un flux. Ce projet vous permettra de compléter l'ensemble du processus UX du début à la fin. Tout d'abord, vous définirez le problème. Ensuite, vous passerez à des exercices, tels que le mappage d'affinité et l'esquisse, vous allez configurer votre fichier Adobe XD, transformer ces esquisses en filaires numériques, puis concevoir et prototyper vos solutions. Enfin, nous prendrons ces prototypes finaux et les transformerons en une vidéo visuellement agréable que vous pourrez utiliser dans vos portefeuilles. Si cela semble super écrasant, ne vous inquiétez pas. Je vais vous prendre à chaque étape du chemin et partager mon propre projet personnel avec vous, ainsi que des conseils que j'ai appris tout au long des années. Mon premier conseil pour réussir est de suivre ce processus étape par étape et de partager votre travail ci-dessous afin que nous puissions nous soutenir et nous encourager mutuellement tout au long de ce parcours. Avec tout cela hors du chemin, nous allons entrer dans la 1ère leçon. 3. Qu'est-ce exactement que l'UX ?: Avant de plonger dans tout ce processus, je veux prendre un certain temps pour définir exactement ce qu' est la conception UI/UX et d'autres termes pertinents. Commençons par le thème général de la conception de l'expérience utilisateur. Quand quelqu'un dit qu'il est un concepteur UX, il peut s'attaquer à des choses telles que la conception de l'interface utilisateur, la convivialité, l'accessibilité, l'architecture de l'information et l'interaction homme-ordinateur. Un concepteur UX réunit toutes ces pièces pour concevoir un système qui facilite une expérience utile pour un utilisateur. Une interface utilisateur ou un concepteur d'interface utilisateur est un peu plus un terme spécifique ; c'est quelqu'un qui conçoit l'interface réelle et comment elle ressemble à l'utilisateur. Pour être encore plus granulaire, définissons ce qu'est réellement une interface parce que beaucoup de gens pensent qu'une interface n'est qu'un écran. Cela peut aller beaucoup plus loin. Une interface est le moyen par lequel nous, tant qu'humains, communiquons ou interagissons avec la machine. Des exemples d'interfaces sont un ordinateur et un clavier, un écran tactile, un distributeur automatique de billets, ainsi que des interfaces utilisateur vocales telles que les assistants virtuels. Un autre terme que vous avez peut-être entendu parler est la conception de produit. conception de produit appartient à la même catégorie de conception d'expérience utilisateur, mais elle est spécifique à un produit, soit numérique ou physique. La convivialité et le design visuel sont tous deux très importants, que vous conceviez quelque chose de numérique ou physique. Les concepteurs de produits doivent souvent équilibrer les buts et les objectifs du point de vue de l'entreprise et du point de vue de l'utilisateur, et ils travaillent généralement en étroite collaboration avec un chef de produit et un ingénieur. Un autre terme commun que vous pourriez avoir entendu parler est la conception d'interaction. C' est encore plus spécifique. C' est important pour les concepteurs UX, les concepteurs d' interface utilisateur et les concepteurs de produits. C' est honnêtement exactement à quoi ça ressemble. Il s'agit de concevoir l'interaction entre le produit et la personne qui l'utilise. Les concepteurs d'interaction doivent réfléchir aux mots qu'ils utilisent, aux représentations visuelles qu'ils utilisent, aux objets physiques qui font partie d'une interaction comme une souris ou un trackpad. Ils doivent considérer le temps, qui entre en jeu avec l'animation, la vidéo et les sons, et ils doivent penser à la psychologie comportementale, ce qui signifie comment l'humain peut réellement apprendre et comprendre comment interagir avec le interface. L' expérience client est une autre chose vraiment importante à considérer, et c'est quelque chose sur lequel certains concepteurs UX se concentrent et d'autres ne le font pas. Il commence chaque fois que le client a un besoin, et il se termine chaque fois que le besoin du client est effectivement satisfait. Airbnb en est un excellent exemple. Quelqu' un décide qu'ils veulent partir en vacances. Toute l'expérience du début à la fin est vraiment importante. Ramasser les clés, interagir avec l'hôte, ce qu'ils ont à faire pour nettoyer et vérifier hors de l'endroit à la fin des vacances. Toutes ces choses sont autour de l'expérience client, et elles sont vraiment importantes à considérer et à concevoir réellement chaque fois que vous venez avec un produit qui existe à l'écran et dans le monde réel, ce que la plupart des produits font. dernier terme important que je pensais mentionner est la pensée du design. La pensée de conception est fondamentalement juste un processus circulaire que tous les concepteurs devraient penser et faire de façon continue. Cela commence par empathie, puis vous allez dans la définition, ensuite, vous allez idéer, puis prototype et test, et vous revenez généralement entre le prototypage, le test, prototypage et le test, et vous pourriez même sauter d' aller et de retour à certaines des étapes précédentes également. C' est un excellent cadre de réflexion et il n'est certainement pas pertinent dans le processus que nous sommes sur le point d'aborder dans cette classe. n'y a pas d'étape à suivre pour cette leçon, mais si vous apprenez simplement à propos de l'UX comme opportunité de carrière, n' hésitez pas à passer du temps à regarder les offres d'emploi. Je trouve que si vous voulez éventuellement obtenir un emploi chez UX, il est important de savoir ce que les employeurs recherchent en termes de compétences et d'expériences. Il vous suffit de rechercher un concepteur UX ou un concepteur de produits sur un site d'offre d'emploi et vérifier ce que les employeurs recherchent des emplois qui pourraient vous intéresser à l'avenir. Ne laissez pas ça vous intimider. Vous êtes probablement au début de votre voyage, alors essayez simplement de faire ce pas à la fois. La première étape consiste à créer votre tout premier projet. Commençons par ça dans la prochaine leçon. 4. Cerner un problème: La première étape et sans doute la plus importante de tout bon projet de conception est de définir le problème. Chaque fois que vous recevez une mission au travail ou par un client, normalement, vous allez définir le problème à l'aide de recherches fondamentales approfondies, qui signifie que vous parlerez avec les parties prenantes et les utilisateurs, et découvrirez quels sont les buts et objectifs, et de les classer en priorité. Mais quand il s'agit de créer des projets de pratique comme nous le faisons dans cette classe, le processus de définition du problème est simple. Vous remarquez un problème dans votre vie quotidienne ou en parlant à vos pairs, puis vous étudiez plus avant afin d'écrire une déclaration succincte du problème. Pour m'aider à prendre l'habitude de remarquer les problèmes potentiels et les opportunités autour de moi, j'ai vraiment aimé garder un cahier où je juste ces choses quand elles viennent à moi. Parfois, c'est quand j'utilise un programme. Parfois, c'est quand j'essaie de faire quelque chose pour le travail. Parfois, c'est quand je vis juste ma vie quotidienne et d'autres fois, c'est quand j'ai des conversations avec mes amis et ma famille. Ces problèmes n'ont pas besoin d'être grands ou de changer la vie. Ils peuvent vraiment être n'importe quoi du tout. Si vous n'avez pas un arriéré de problèmes dans un ordinateur portable comme moi, alors pour en venir avec le problème, ce que vous pouvez faire est de penser à des catégories ou des secteurs ou des industries spécifiques qui vous intéressent vraiment. Vous pourriez penser à des problèmes spécifiques qui pourraient avoir à voir avec le fait d'être créatif, d'être étudiant ou d'être impliqué dans le sport. Il y a peut-être des problèmes liés au bien-être, nourriture, au transport ou à la productivité. Un conseil pour ce cours est d'essayer de rester à l'écart des expériences de magasinage ou des problèmes dans cet espace. remaniements de sites de commerce électronique sont extrêmement fréquents et à mon avis, ils sont vraiment ennuyeux parce qu'ils n'exercent pas votre muscle de résolution de problèmes. Dans la plupart des cas, l'objectif est le même, juste pour vendre plus de produits. Pour votre problème, essayez de penser à quelque chose en dehors de ce monde et des points bonus, si vous voulez valider votre problème ou prouver qu' il vaut la peine de le résoudre grâce à un peu de recherche de fond. Pour ce faire, vous voulez simplement recueillir des preuves que c'est un problème que suffisamment de gens connaissent, que cela vaudrait la peine d'essayer de résoudre. Vous pourriez le faire en regardant les forums Reddit, les groupes Facebook, les preuves anecdotiques, parlant à des amis et à la famille. Vous pouvez également faire des études de marché pour déterminer si quelqu'un a déjà essayé de résoudre ce problème. Si c'est le cas, cela ne signifie pas nécessairement que vous ne devriez pas l'aborder. Cela valide réellement votre problème parce que c'est quelque chose que quelqu'un d'autre a jugé assez important pour travailler sur. Ce que vous pouvez faire, c'est explorer leur solution et voir ce que vous pouvez en apprendre. Maintenant, nous allons dans la façon d'écrire réellement votre déclaration de problème. Il y a quelques choses que chaque bonne déclaration de problème a. Le premier est un peu de contexte, qui met en scène les raisons pour lesquelles le problème est important maintenant. Ensuite est le qui, qui a ce problème et donc qui bénéficierait d'une solution. Ensuite est le désir ou le besoin que cette personne a. Qu' est-ce qu'ils veulent ou ont besoin qu'ils n'ont pas actuellement ? Enfin, qu'est-ce qui empêche cette personne d'atteindre ce désir ou ce but ? Regardons l'énoncé du problème que je vais aborder pour cette classe. Les gens mangent à la maison plus souvent que jamais. milléniaux qui travaillent veulent cuisiner et manger des repas sains, mais ils sont occupés et la planification des repas peut être fastidieuse. Ils ont besoin d'un moyen de rationaliser le processus et réduire une partie du temps et des efforts nécessaires. Notez que cette déclaration de problème n'a rien à voir avec la solution. Il ne fait pas d'hypothèse quant à la forme que pourrait prendre la solution. Il énonce simplement le problème et répond aux quatre domaines clés dont nous avons parlé auparavant. En disant que les gens mangent à la maison plus souvent que jamais, cela établit le contexte et explique pourquoi ce problème est important à aborder maintenant. Il mentionne les milléniaux qui travaillent, puis il décrit plus tard que ces gens sont occupés, ce qui est une façon d'indiquer le qui dans la déclaration. Il parle de ce qu'ils veulent. Il dit qu'ils veulent cuisiner et manger des repas plus sains à la maison. Il parle de ce qui les empêche actuellement. La planification des repas est trop fastidieuse pour les personnes qui n'ont pas beaucoup de temps libre. Maintenant, je vais vous inviter à réfléchir au problème que vous allez résoudre pour le reste de cette classe. Mes conseils pour cette étape sont, garder l'énoncé du problème vraiment spécifique, mais seulement être spécifique sur le problème. N' introduisez pas encore la solution. Ne parlez rien d'une application mobile. Concentrez-vous simplement sur le besoin ou l'opportunité. Pour la pratique, je recommande en fait d'écrire cinq ou 10 énoncés de problème et d'en choisir une qui vous intéresse le plus. Une fois que vous avez votre déclaration de problème, copiez-la et partagez-la avec la classe afin que nous puissions vous fournir des commentaires. Si vous avez du mal à trouver un problème à vous, c'est tout à fait correct. Maintenant, je vais partager un peu plus pour mon carnet que vous pouvez voler ou changer un peu et utiliser pour ce projet. La première déclaration du problème est, ces jours-ci, incroyable à quel point il est facile de rencontrer des personnes que vous n'auriez jamais rencontrées sans Internet. Deux étudiants se réunissent pour un café, mais ils ne parlent pas la même langue. Ils veulent apprendre à se connaître, mais ils sont nerveux de ne pas pouvoir se connecter à cause de la barrière linguistique. Un autre indique que lorsque vous déménager dans une nouvelle ville, il est facile de se déplacer grâce aux applications de cartes, mais cela rend plus difficile d'en apprendre davantage sur un nouvel environnement. Comment les jeunes professionnels qui déménagent dans une nouvelle ville pourraient-ils apprendre leur chemin tout en se rendant là où ils veulent aller ? La dernière déclaration du problème est, ces jours-ci, les gens apprennent à quel point il est important de magasiner d'occasion et cesser de contribuer à la mode rapide et aux pratiques de travail nuisibles, mais il peut être difficile de le faire dans la pratique. Comment une femme de 20 ans pourrait-elle décorer son nouvel appartement de New York avec meubles et des décors d' occasion sans avoir à faire des heures de recherche dans la chasse aux friperies ? Comme je l'ai dit, n'hésitez pas à en voler l'un ou l'utiliser comme inspiration pour écrire le vôtre. Ensuite, nous allons tout apprendre sur cartographie d' affinité et faire un de mes exercices préférés, mais en fait, vous n'avez pas besoin d'une équipe pour terminer. 5. Cartographie de l'empathie: Normalement, la cartographie des affinités se fait avec des groupes de personnes qui collaborent à un projet. Normalement, ils ont tous rassemblé des notes et des conclusions et ils se rassemblent et utilisent cet exercice de carte d'affinité pour organiser tout ce qu'ils ont trouvé. Cela étant dit, en tant que freelance et en tant que personne qui est normalement le seul concepteur ou une personne de produit dans une équipe, je fais habituellement ces exercices de diagrammes par moi-même et j'y trouve toujours une immense valeur. Je vais vous montrer ma méthode préférée pour faire ce solo afin que vous puissiez le faire aussi pour votre produit. Ça s'appelle la cartographie de l'empathie. C' est un excellent moyen de vous mettre à la place de votre utilisateur et recueillir plus d'informations sur l'espace problématique et l'utilisateur. Tout d'abord, vous devez déterminer qui est votre utilisateur. Si vous avez écrit votre énoncé de problème et suivi les directives de la leçon précédente, cela devrait être vraiment facile. Pour moi, c'est des milléniaux. N' hésitez pas à donner à cette personne un nom, un âge, une profession, peut-être une description d'une ligne afin de donner vie à la personne. Je vais nommer ma personne Phoebe. Disons qu'elle a 29 ans et qu'elle travaille à la maison en tant que chef de produit pour une entreprise de technologie. Points bonus si vous êtes en mesure d'interviewer quelques personnes différentes qui tombent dans votre groupe d'utilisateurs cible. De cette façon, vous serez en mesure d'en apprendre un peu plus sur eux, ce qu'ils font quotidiennement, et surtout comment ils traitent actuellement ce problème. Sinon, c'est tout à fait correct, ce n'est qu'un projet de pratique. Mais vous devrez peut-être faire un peu d'atteinte quand il s'agit de ce prochain exercice, surtout si vous ne tombez pas vous-même dans le groupe d'utilisateurs cible. Ensuite, il est temps de définir les différentes catégories de notre carte d'empathie. Allez-y et prenez huit notes collantes ou huit morceaux de papier si vous n'avez pas de notes collantes à portée de main et écrivez les titres suivants objectifs et contraintes, disons, penser et sentir, voir, entendre, tâches et actions, distractions, motivations et frustrations. Maintenant, il est temps de faire un remue-méninges. Je trouve généralement qu'il est plus facile de commencer par des objectifs et des contraintes. Mais après cela, j'aime bouger et juste écrire ce qui me vient et ensuite catégoriser ça au fur et à mesure que je vais. Je vais essayer de me mettre à la place de l'utilisateur et faire semblant que j'essaie d'atteindre cet objectif. Je vois juste ce qui se passe et je le note et je le mets dans la catégorie la plus sensée. Ensuite, après un petit moment, j'aurai chacune de ces catégories remplies au moins cinq post-its ou points à puces si vous utilisez un bout de papier. Jetons un coup d'oeil à ma carte d'empathie pour que vous puissiez voir comment ça se produit. Tout d'abord, nous examinerons les objectifs et les contraintes. J' ai écrit que les objectifs pourraient être de manger plus de repas maison, vivre un mode de vie plus sain pour se sentir bien, faire les repas qu'elle économise sur Pinterest ou Instagram, de commander moins Uber Eats. Ensuite, les contraintes sont qu'elle est occupée à travailler à la maison et qu'elle n'a le temps de magasiner qu'une fois par semaine, habituellement le week-end. Maintenant, passons à dire, penser et ressentir. Ce pourrait être des choses qu'elle dit à haute voix aux gens autour d'elle, choses qu'elle pense à elle-même, ou des façons qu'elle ressent à propos de ce problème. Peut-être qu'elle se dit ou pense à elle-même, « Qu'est-ce que je vais faire pour les dîners cette semaine ? Où ai-je revu cette recette de chili ? Je crois que j'ai oublié de le capturer. Que dois-je acheter pour faire tous ces repas ? » J' ai écrit qu'elle pourrait avoir faim et débordée. Maintenant passons à voir. Que pourrait voir votre utilisateur autour d'eux ? J' ai écrit beaucoup de produits à l'épicerie, ingrédients sur le comptoir, un frigo vide, et des recettes sur Instagram, Pinterest et d'autres blogs. Cela aide vraiment à juste mettre la scène et cela pourrait inspirer une solution vraiment créative plus tard. Essayez simplement de vous mettre à la place de votre utilisateur et pensez à ce qu'ils peuvent voir à chaque étape du chemin. Passons à entendre. J' ai dit que Phoebe entendait peut-être grésiler dans la casserole avec laquelle elle cuisine. Elle entend peut-être un podcast qu'elle écoute pendant qu'elle cuisine. Elle entendra peut-être le minuteur de la cuisine. Son partenaire lui demande ce qu'il y a pour le dîner. Peut-être des amis qui traînent dans le salon. Ensuite sont les tâches et les actions. Ce sont des choses sur lesquelles elle pourrait avoir besoin d'agir tout au long du processus de cuisson. J' ai écrit trouver des recettes, enregistrer des recettes, choisir des recettes pour la semaine à venir, faire une liste d'épicerie basée sur ces recettes, acheter de la nourriture, puis cuire la nourriture. Ceux-ci sont assez explicites, mais ils vont vraiment être utiles chaque fois que vous allez créer votre flux utilisateur. Ensuite, parlons des distractions. C' est à ce moment qu'il est vraiment important de penser à votre utilisateur spécifique. Pour moi, Phoebe pourrait être distrait par options alimentaires faciles telles que les repas surgelés ou Uber Eats. Elle pourrait être distrait par son partenaire qui travaille de chez elle. Elle pourrait être distrait par son travail et ses courriels ainsi que par la télévision, YouTube ou les médias sociaux. Ensuite, nous allons réfléchir à ses motivations. Pourquoi est-ce quelque chose qui est si important pour elle ? J' ai écrit que la nutrition est importante pour elle, se sentir et avoir l'air en bonne santé, avoir de l'énergie, cultiver des compétences et des routines culinaires, utiliser l'acte de cuisiner comme moyen de se détendre de sa journée de travail, et peut-être influenceurs en ligne sont motivants pour elle. Enfin, nous avons des frustrations. C' est aussi l'une des catégories les plus importantes car il va vous dire quels types de choses éviter et quels types de choses donner à votre utilisateur les compétences nécessaires pour travailler. J' ai écrit que Phoebe est vraiment frustrée quand toutes ses recettes sont dans des endroits totalement différents. Elle est frustrée quand elle doit faire des achats trop souvent. Elle n'aime pas manger les mêmes repas encore et encore. Elle est frustrée quand elle a envie d'abandonner parce que cuisiner et manger sainement à la maison demande trop d'efforts. Elle est frustrée chaque fois que la nourriture se gâte, et elle déteste ces publicités pop-up ennuyeuses qui apparaissent toujours sur les blogs alimentaires quand elle est à la recherche de recettes. Bon, maintenant c'est ton tour. Allez-y et remplissez votre carte d'empathie avec autant de choses que possible. Essayez de ne pas vous filtrer ou de vous juger, car certaines choses que vous ne pensez pas être importantes peuvent en fait déclencher quelque chose plus tard dans le processus. Lorsque vous avez terminé, prenez une photo et partagez-la ci-dessous. Dans la leçon suivante, nous allons entrer dans l'une de mes phases préférées qui est l'esquisse. Alerte spoiler, vous n'avez pas besoin d'être bon à dessiner pour ce faire. 6. Parcours de l'utilisateur et esquisse: esquisse est ma partie préférée de presque n'importe quel projet parce que c'est là que nos idées peuvent être les plus fluides et itératives. Le but n'est pas de trouver la solution parfaite ou de créer l'interface la plus unique, ou de dessiner les formes les plus parfaites, c'est vraiment juste pour être expérimental. Mais vous pourriez penser, comment suis-je censé savoir quoi esquisser ? Eh bien, avant de commencer à esquisser, nous allons revenir en arrière et examiner notre carte d'empathie pour essayer de trouver la seule fonctionnalité ou le flux utilisateur qui va résoudre le plus efficacement notre problème. En d'autres termes, si votre application ne pouvait faire qu'une seule chose, que serait-elle. Pour le problème sur lequel je travaille, je pense que cette fonctionnalité serait de générer une liste d' une semaine de courses pour quelqu'un qui a rassemblé des recettes de partout sur le web. Je suis arrivé à cette conclusion en passant par ma carte d'empathie et en voyant que beaucoup des notes que j'ai prises et mis dans diverses catégories, tous sont revenus et ont eu à voir avec ce sujet de générer une liste de courses basée sur des recettes trouvées tous plus. C' est mon hypothèse. Si les milléniaux actifs avaient un moyen de générer une liste d'épicerie basée sur la valeur d'une semaine de recettes provenant de diverses sources. Ils cuisinaient et mangeaient des repas sains à la maison plus souvent. Si nous nous souvenons de la première leçon chaque fois que nous avons parlé de la pensée du design, nous pouvons penser que ce projet va de l'avant comme un moyen de tester cette hypothèse. Nous pouvons prototyper cette fonctionnalité et l'amener devant les utilisateurs pour voir si elle les aide réellement à cuisiner et à manger des repas plus sains à la maison. Ou nous pouvons simplement l'utiliser comme un projet de pratique. Maintenant que je sais sur quelle fonctionnalité je me concentre, je peux aller de l'avant et tracer mon parcours utilisateur. Où commence-t-il, où se termine-t-il ? Quels sont les points intermédiaires importants qui ont vraiment contribué à combler l'écart ? Commençons par le début et la fin. Je pense que le processus pour moi commencerait chaque fois qu'un utilisateur trouve une recette en ligne qu'il pourrait vouloir faire dans la semaine prochaine, et qu'il voudrait qu'il se termine par une liste d'épicerie générée. Les étapes du milieu pourraient être d'abord l'enregistrement d'une recette. Peut-être que l'utilisateur voudrait le classer comme dîner ou déjeuner ou désert, et ensuite planifier ses repas, parcourir toutes les recettes sauvegardées et choisir celles qu'il veut faire cette semaine. J' ai également noté à l'étape de fin où la liste est générée que vous voudrez peut-être catégoriser la liste de différentes manières en fonction de la façon dont vous pourriez faire des achats, et aussi vous voudrez peut-être être en mesure de vérifier les choses que vous avez déjà à la maison. Maintenant, cette carte que vous créez sera votre guide pour vos esquisses. Comme j'ai quatre étapes principales dans mon voyage, j'aurai probablement environ quatre écrans principaux, peut-être plus en fonction des détails. Maintenant, entrons dans le processus d'esquisse. Chaque fois que je commence à esquisser, j'aime commencer par n'importe quel écran se sent le plus important. Parfois, c'est le premier écran parce que vous voulez savoir où votre utilisateur démarre. Parfois, c'est le dernier écran parce que c'est généralement l'objectif que vous essayez d'atteindre pour votre utilisateur à la fin, je le fais de cette façon parce que la relation entre les écrans est beaucoup plus importante que l'individu écrans eux-mêmes. C' est pourquoi nous parlons de ça comme un voyage. Si ce n'est pas intuitif pour l'utilisateur de passer à travers, cela ne va pas l'aider à atteindre son objectif. Pendant que je fais des croquis, je vais vous expliquer certains de mes meilleurs conseils pour faire des croquis, puis je vais vous guider à travers mes croquis afin que vous puissiez voir comment un vrai exemple prend vie. Astuce numéro 1 est d'utiliser un modèle imprimable iPhone si vous cherchez à gagner du temps. Comme vous pouvez le voir, c'est ce que je fais ici et je vais lier cette ressource si vous voulez l'utiliser pour votre produit. Astuce numéro 2 se concentre plus sur le contenu que la conception à ce stade. Qu' est-ce qui doit être à l'écran ? En général, où devrait-il être et comment l'utilisateur se déplacera-t-il du point A au point B ? Astuce numéro 3, n'ayez pas peur d'être désordonné et de prendre des notes dans les marges. Ces croquis n'ont pas besoin d'être jolis. Ils sont vraiment un outil que vous pouvez utiliser chaque fois que vous entrez dans Adobe XD. Astuce numéro 4, esquissez chaque écran plusieurs fois. Restez itératif et ne soyez pas coincé lors de votre première tentative. Il faut de la pratique, et je ne parle pas seulement de la pratique en tant que concepteur, mais plus précisément, de la pratique de travailler sur ce problème de conception exact. Astuce numéro 5, divisez vos sessions d'esquisse sorte que vous ayez au moins une pause entre les deux. Vous pouvez revenir avec une tête claire et une nouvelle perspective pour évaluer et continuer à itérer, et le conseil numéro 6, si jamais vous vous sentez perdu, revenez simplement à votre énoncé de problème. Vous pouvez voir que ces croquis sont partout et ils ne sont pas beaux du tout. Je les ai numérotés de sorte que, fondamentalement chaque fois que j'essaye à nouveau un écran, je le numéroterai comme numéro 2. Si j'abandonne et essaie à nouveau, je le numéroterai comme numéro 3, et de cette façon quand je reviendrai, je sais lequel j'ai fait le premier et celui que j'ai fait en dernier car généralement le dernier que j'esquisse est le plus réussi. Ceux-ci auront beaucoup plus de sens chaque fois que je les entrerai dans XD à filaire. Mais pour l'instant, je vais juste souligner tous les différents types d'écrans que j'ai. J' ai l'écran de démarrage qui est enregistré recettes. Les recettes sont classées par dîner, déjeuner, déserts. Vous pouvez les classer par n'importe quoi. J' ai quelques notes sur le côté qui disent copier le lien d'Instagram, Pinterest, blog, etc. Puis cela m'a inspiré de faire un écran où vous êtes réellement coller dans le lien, et c'est ce que c'est juste ici. Une fois que vous avez fait une recette, il générerait un aperçu de ce à quoi ressemblera cette recette. Vous pouvez choisir parmi les images de la page Web de la recette elle-même. Pour quelle que soit la vignette que vous vouliez utiliser, il appellerait les ingrédients et vous pourriez modifier le titre de la recette, vous pourriez modifier les ingrédients, et il afficherait ensuite les instructions. Cela permet d'enregistrer la recette pour vous de sorte que lorsque vous allez cuisiner, vous pouvez également ouvrir cette sauvegarde et l'utiliser. Une fois que tout cela semble bon, alors vous pouvez appuyer sur « Enregistrer ». Ensuite, une fois que vous cliquez sur « Enregistrer », vous serez invité à choisir une catégorie dans laquelle ce repas ira. Dîners, déjeuners, déserts, et bien sûr, vous pouvez créer la catégorie que vous voulez en appuyant sur « Nouveau », qui ferait alors apparaître le clavier pour que vous puissiez en créer un nouveau. Cela, j'ai été inspiré par Pinterest parce que chaque fois que vous enregistrez une épingle, vous l'enregistrez sur n'importe quel tableau que vous voulez, et vous pouvez toujours en créer une nouvelle. C' est là une interaction vraiment similaire. Vous pouvez voir les actions que vous pouvez effectuer sur cet écran de recettes enregistrées sont d'ajouter une nouvelle recette, qui fera alors apparaître ce modal, ce qui vous permettra de coller une URL à partir d'une recette que vous avez copiée à partir du web. Ici, vous pouvez également générer une liste. Si vous avez cliqué dessus, vous serez redirigé vers cet écran suivant où vous pouvez sélectionner des recettes de votre liste enregistrée et générer une liste basée sur celles-ci. Essentiellement, l'application allait examiner ce que la recette avait comme liste d'ingrédients, et il serait assez intelligent pour être en mesure de générer une liste d'achats basée sur ces données. Une fois que vous appuyez sur « Générer », alors il va générer cette liste pour vous. Comme je l'ai mentionné précédemment, j'ai pensé que les utilisateurs pourraient vouloir trier soit par la recette qu'ils achetent, soit par catégorie. Peut-être qu'ils vont faire du shopping et ils veulent s'attaquer aux produits d'abord, puis les aliments en conserve, etc. Ici, j'ai une note que les miniatures de recette pourraient être ici dans le coin de sorte que lorsque vous appuyez sur cela, vous peut sélectionner et désélectionner les recettes que vous souhaitez inclure dans votre liste. Peut-être que vous générez cette liste, mais alors vous changez d'avis et vous voulez désélectionner l'une des recettes. Il s'ouvrira comme ça et c'est ce que vous pourrez faire dans ce scénario. Maintenant, c'est ton tour. L'étape jettera vraiment les bases pour le reste de votre projet. Allez-y et obtenez le mappage et l'esquisse et assurez-vous de partager des instantanés de votre travail ci-dessous dans la section communauté de classe. Après cela, nous allons enfin entrer dans Adobe XD. Je vais vous montrer comment configurer votre fichier, puis dans la leçon suivante, nous allons passer par le processus de filature. Cette leçon sera beaucoup moins écrasante si vous avez quelque chose à faire. Allez-y et faites des croquis et je vous verrai dans la leçon suivante. 7. Configurer Adobe Xd: Avant de plonger dans le filage, je veux vous donner un aperçu rapide d'Adobe XD et vous montrer comment configurer votre fichier au cas où vous seriez tout nouveau dans le programme. Une fois que nous aurons ouvert XD, nous serons invités avec quelques tailles de plan de travail différentes à essayer. Je pense que je vais aller avec l'iPhone 12 pour mon projet. Comme vous pouvez le voir, cela nous met en place vraiment bien. Nous avons juste ce plan de travail ici avec lequel nous allons commencer. Pour vous montrer un peu, nous avons la barre d'outils ici. C' est notre curseur où nous pouvons sélectionner des objets et les déplacer. Nous avons nos outils de forme ici pour que vous puissiez créer une forme et lui donner un remplissage et une bordure. Vous pouvez également vous débarrasser de la frontière. Vous pouvez lui donner une ombre et vous pouvez manipuler cette ombre en utilisant ces contrôles ici. Nous pouvons également créer des lignes et donner à ces lignes différentes largeurs. Nous pouvons également donner aux lignes différents types de bouchons. Une casquette arrondie et une casquette saillante, des choses comme ça. Nous pouvons utiliser l'outil stylo, qui pour être honnête, j'ai très rarement utilisé l'outil stylo dans XD. J' aime travailler simplement avec des formes et du texte, et généralement je peux obtenir la plupart de ce dont j'ai besoin en utilisant ces outils. Bien sûr, nous avons l'outil de texte pour commencer à taper ici et nous pouvons bien sûr, manipuler ce texte en utilisant tous ces contrôles ici. Nous pouvons choisir différentes polices et nous pouvons choisir différentes variantes de ces polices, tailles. On peut suivre un peu le texte. Nous pouvons également utiliser ces contrôles pour nos textes. Je suppose que beaucoup d'entre vous, si vous êtes déjà concepteurs, connaissent déjà ces contrôles. Au sein de XD, ils sont vraiment intuitifs et vous les récupérerez rapidement. Il s'agit de l'outil Plan de travail où vous pouvez créer un nouveau plan de travail. Mais ce que j'aime vraiment faire, c'est le raccourci, qui est juste en appuyant sur A sur votre clavier, puis vous pouvez créer un plan de travail à partir de là. Un autre raccourci que j'aime vraiment est le R, qui est rectangle, et le T, qui est du texte. Cela me rend la vie beaucoup plus facile, et je les utilise tout le temps. Ensuite, passons par la section Ressources documentaires. C' est vraiment bien parce que nous pouvons définir des couleurs, styles de personnages et des composants, ce que nous aborderons dans une leçon ultérieure. Nous pouvons les configurer dans nos documents afin que nous puissions toujours les utiliser. Nous n'avons pas à copier et coller d'un plan de travail à un plan de travail. Nous pouvons simplement les avoir à portée de main, ce qui rend la conception beaucoup plus rapide. Par exemple, disons que nous voulions obtenir une inspiration de couleur de cette photo, que je viens de télécharger depuis Unsplash. Nous pouvons commencer à créer une palette de couleurs à partir de cette photo ou vraiment n'importe quoi du tout. Ensuite, pour enregistrer ces couleurs, nous sélectionnons simplement toutes ces formes et nous cliquons sur l'icône plus en regard des couleurs. Ensuite, nous avons ceux-ci à notre disposition pour les utiliser dans toute notre application et la même chose vaut pour les styles de personnages. Ce n'est pas un très beau style de personnage, mais nous pouvons l'ajouter à notre liste de styles de personnage et revenir et l'utiliser plus tard. Parlons de ces contrôles ici. Nous avons nos contrôles d'alignement. Comme vous pouvez le voir, j'ai ce rectangle sélectionné et si nous l'alignons au centre, c'est le centre vertical, et donc il l'alignera verticalement au centre. Alignons aussi horizontalement au centre. On peut l'aligner à gauche, à droite. Nous pouvons créer plusieurs rectangles et les répartir uniformément à l'aide de cet outil, et enfin, nous avons nos outils Shape Builder. Vous pouvez les utiliser pour fusionner des formes et exclure dans tous ces éléments que vous connaissez peut-être si vous avez utilisé Adobe Illustrator. Comme je l'ai dit, je n'utilise pas beaucoup ces choses, mais cela vous sera utile si vous continuez à utiliser XD pour vos projets et obtenez un peu plus de fantaisie avec ce que vous créez. Enfin, passons en revue tous les modes dans XD. Actuellement, nous sommes en mode design. Nous sommes en mesure d'ajouter des éléments et de concevoir notre page. Vous pouvez également passer en mode prototype, qui est ce que nous allons utiliser pour animer les transitions et créer un prototype que l'utilisateur peut réellement déplacer. Si vous travailliez sur un projet réel que vous souhaitez partager avec une personne avec laquelle vous collaborez, vous allez dans l'onglet Partager et créez une expérience de partage différente si vous souhaitez effectuer une révision de conception par rapport à partage avec votre développeur, peut-être que vous voulez créer une présentation, peut-être que vous partagez spécifiquement pour les tests utilisateur, ou vous pouvez créer des paramètres personnalisés. Donc, ce sont tous les modes de XD que vous allez souvent basculer entre la conception et le prototype, et nous les aborderons plus en détail dans les leçons à venir. L' étape d'action pour cette leçon est simple. Ouvrez simplement un fichier dans Adobe XD et créez un plan de travail de taille mobile. Vous verrez qu'il y a beaucoup d'options. J' ai choisi l'iPhone 12, mais vous pouvez choisir ce que vous souhaitez utiliser pour votre projet. Maintenant que vous êtes un peu plus familier avec XD, nous allons sauter directement dans le filage. Je te verrai dans la prochaine leçon. 8. Wireframe: Le but du filamage est de définir le placement du contenu et de résoudre les problèmes de navigation et de fonctionnement dans un format qui est vraiment facile à régler. À ce stade, nous ne sommes toujours pas inquiets du style visuel des écrans. Parce que la fonctionnalité est l'objectif principal ici, j'aime personnellement prendre les interactions importantes dans mes filaires et prototypes ceux. Cela me donne une chance de tester le produit moi-même et de comprendre quels sont les problèmes et quels sont les points de blocage. Cette leçon comporte deux parties. abord, nous allons transformer nos croquis en filaires numériques. Ensuite, nous allons les prototyper afin d'avoir une idée de l'expérience au niveau du squelette et ensuite ajuster au besoin. La première étape est vraiment simple. Je viens de sortir mes croquis devant moi et de les transférer dans Adobe XD en utilisant principalement du texte et des rectangles. Ça n'a pas besoin d'être joli. L' espacement et l'alignement n'ont pas besoin d'être parfait. C' est juste pour avoir une idée de l'endroit où les éléments vont aller et comment un utilisateur va se déplacer à travers les écrans. Tout comme l'esquisse, c'est un processus très itératif, mais au moins pour moi, la meilleure façon d'itérer est d'interagir avec mes écrans. Commençons à parler plus du mode prototype dans XD. Nous avons abordé le mode prototype dans la leçon précédente, mais maintenant je veux vous montrer comment je prototypographierais ces filaires que j'ai créés. Nous n'allons pas encore entrer dans des transitions fantaisistes, mais je veux vous montrer comment j'aurais un utilisateur, qui à ce stade sera juste moi-même, passer d'écran à écran. En regardant mon parcours utilisateur, la première chose que je veux faire est de demander à un utilisateur de sauvegarder une nouvelle recette. Comme vous pouvez le voir, j'ai cette icône plus ici, et comme nous sommes en mode prototype, chaque fois que j'appuie sur cette icône plus, ça va me donner cette petite flèche. Vous pouvez voir lorsque je clique et fais glisser sur cette flèche, cela me permet d'envoyer cette interaction à n'importe quel autre tableau d'art que j'ai. J' ai ces à peu près dans l'ordre, donc je vais l'envoyer à ce plan de travail suivant, qui est l'ajout de recette pop-up modal, si vous voulez. Il n'est clairement pas conçu, mais il y a un peu qui va là-dedans assez pour prototyper cette interaction. Ensuite, nous pouvons venir ici et voir quel genre d'interactions nous avons. Nous avons un déclencheur de pression, ce que nous voulons, parce que nous voulons que l'utilisateur appuie sur cette icône. Nous avons sélectionné la transition, qui est ce que nous voulons et au lieu de se dissoudre, je veux réellement que ce plan de travail glisse vers le haut, donc je vais sélectionner cela et soulager 0,30 seconde. C' est très bien. Encore une fois, nous ne allons pas trop nous concentrer sur l'animation réelle de ceux-ci encore. Ensuite, une fois que nous arrivons à cette diapositive de recette, nous voulons vraiment qu'ils collent leur URL. Après cela, cet écran remplira toutes ces informations différentes en fonction de la page Web dans laquelle ils ont collé. Dans un vrai design, nous pourrions vouloir animer quelque chose comme un écran de chargement parce que cela ne va pas se charger immédiatement, mais pour ce filaire, nous allons juste garder ça très simple, donc je suis va faire la même chose. Collez l'URL, et nous voulons qu'il aille dans cet écran de détail suivant. Au lieu de glisser vers le haut, je vais me dissoudre, et on durera ça, peut-être une seconde. Si c'est une seconde complète, cela aidera probablement à sembler qu'il est en train de se charger. On verra à quoi ça ressemble dans un peu. Faisons un couple de plus. Une fois que nous avons terminé d'éditer toutes ces informations, nous voulons que l'utilisateur appuie sur « Enregistrer » et une fois qu'il a cliqué sur « Enregistrer », il devrait être en mesure de choisir les catégories dans lesquelles il veut que cette nouvelle recette aille. Encore une fois, faisons cette diapositive vers le haut. Je pense que c'est le plus logique, du moins pour l'instant. Ensuite, ce qu'ils veulent faire est de cocher une de ces cases. Disons qu'ils cochent cette case, alors nous voulons qu'elle aille presque immédiatement à cet écran car il ne devrait pas y avoir de retard ou de transition entre avoir la case cochée et non cochée. Il devrait vérifier immédiatement lorsque vous appuyez dessus. Nous allons aller Tap, Transition, et au lieu d'avoir une animation, nous ne ferons rien et cela rendra la transition immédiate. Ensuite, une fois qu'ils ont appuyé sur « Confirmer », nous voulions simplement revenir à l'écran des recettes enregistrées. C' est de retour par ici. Ce que nous allons faire est de faire glisser ce fil ici, et pour cela, je pense que je veux que cette transition glisse vers le bas parce que nous voulons que ce modal soit, il glisse vers le haut comme il arrivait et nous voulons qu'elle glisse vers le bas pour qu'elle se sente cohérente . Ok, regardons à quoi ça ressemble en fait. Ce que je veux faire est de sélectionner sur ce premier écran et je vais le définir comme écran d'accueil, ce qui indiquera que c'est le premier plan de travail dans ce flux. Ensuite, même si je n'ai pas ce plan de travail sélectionné, quand je vais jouer le prototype qui commencera sur ce premier plan de travail. Ok, jetons un oeil. On a le prototype ici. Nous voulons d'abord sortir une recette, nous allons coller l'URL, puis ces informations se chargeront. Une fois que nous choisissons l'image miniature que nous voulons, et nous pouvons également éditer le titre ainsi que certains des ingrédients. Ensuite, nous allons cliquer sur « Enregistrer ». Ensuite, il nous demandera où nous voulons la sauver. Gardez-le pour les dîners. Super. Ensuite, cela viendra, qui nous demandera si nous voulons confirmer. Nous confirmons et il revient directement à nos recettes sauvegardées. Espérons que vous avez une meilleure compréhension du fonctionnement du mode prototype. Je vais continuer avec ça juste au cas où vous seriez curieux savoir comment je relie le reste de ce prototype. L' autre interaction que nous avons à partir de cet écran d'accueil ou de recette enregistrée est de générer une liste. Lorsque nous générons une liste, ce que nous voulons arriver, c'est que nous voulons être en mesure de choisir parmi ces repas ceux dont nous voulons générer la liste. Retournons ici. C' est là que j'ai créé l'écran qui montre les recettes sélectionnées. Je vais apporter ça ici pour que ce soit plus facile à voir. Comme il est en ce moment, tout ce que j'ai, c'est ces deux écrans. J' ai un écran où aucune recette n'est sélectionnée et j'ai un écran où quatre recettes sont sélectionnées. Pour que ce prototype se sente réel et puisse réellement tester ce que cela ressentirait en tant qu'utilisateur, je vais devoir corriger cela. Ce que nous voulons, c'est chaque fois que quelqu'un appuie sur « Make List », nous voulons qu'il soit en mesure de sélectionner ses recettes. Nous irons à l'écran, mais nous devons réparer un peu l'écran, alors revenons au mode conception. En ce moment, nous avons ces quatre rectangles dans l'état sélectionné. Ce que ça veut dire, c'est qu'ils ont une bordure plus épaisse autour d'eux. C' est comme ça que je l'ai traité dans les filaires. Une fois que j'arrive à mes conceptions réelles, l'état sélectionné par rapport à l'état non sélectionné peut être complètement différent, mais pour la phase filaire, cela fera certainement l'affaire. Remettons tout cela à une bordure d'un pixel parce que c'est à ça qu'il va ressembler lorsque vous arrivez à l'écran de sélection des recettes. En ce moment, il n'y a aucune recette sélectionnée, donc nous voulons le faire aussi. Ce bouton « Générer » ne devrait probablement pas encore être actif. Donnons-lui une opacité de lumière de 40 pour cent pour montrer que vous n'avez rien sélectionné, donc vous ne pouvez pas encore générer de liste. Ok, encore une fois, montons pour qu'on ait un peu plus d'espace. Ensuite, prenons ce plan de travail et dupliquons-le juste à côté. Ceci, nous allons appeler un sélectionné. Ce que nous allons faire est de transformer l'un d'entre eux en un état sélectionné, donc nous allons lui donner une bordure de cinq pixels et nous allons passer en mode prototype, et chaque fois que cela est tapé, nous voulons qu'il passe immédiatement à la prochaine, nous ne ferons donc pas d'animation parce que nous voulons qu'elle soit immédiate. De retour en mode design, nous voulons faire celle-ci car une recette est maintenant sélectionnée et nous voulons rendre ce bouton « Générer » complètement visible car il devrait être tapissable à ce stade puisqu'il y a une recette sélectionnée. Mais disons que nous voulons sélectionner deux recettes avant de générer cette liste. Allons et refaisons ce processus. Deux sélectionnés. Maintenant, nous allons avoir le numéro deux ici pour indiquer qu'il y en a deux sélectionnés. Disons qu'ils sélectionnent celui-ci dans la catégorie déjeuner. Parfait. Ensuite, nous reviendrons en mode prototype. Sur cet écran, nous voulons qu'ils cliquent dessus, et il devrait immédiatement passer à cet écran. Ensuite, je vais le faire deux fois de plus pour que nous ayons quatre recettes sélectionnées. Ok, Maintenant que quatre sont sélectionnés, nous voulons que l'utilisateur génère une liste. Si nous appuyons sur le bouton « Générer », alors nous voulons que leur liste d'épicerie glisse vers le haut dans le cadre. Faisons glisser vers le haut, et une fois une seconde, c'est bien pour l'instant. Alors ça nous mènera à leur liste d'épicerie. Lorsque nous entrons dans la phase de conception réelle, nous aborderons également ces interactions plus petites comme passer le tri par repas par catégorie, et ouvrir ce petit bouton qui vous montrera comment sélectionner et désélectionnez les recettes que vous souhaitez inclure dans la liste. Mais pour l'instant, je pense que c'est à peu près le prototype. Rejouons-le pour que nous puissions tester cette prochaine petite phase d'interactions. Je veux faire une liste, alors maintenant ça va me permettre de sélectionner des recettes. Juste une chose que j'ai remarqué, c'est exactement pourquoi je teste mon propre prototype, c'est que cette interaction était bizarre. Il a glissé vers le haut ou vers le bas quand je voulais juste qu'il s'estompe dans cet écran, donc c'est une note mentale que je vais faire pour changer les types de transitions. Mais de toute façon, nous voulons sélectionner ceci. C'est génial. Il a déplacé le nombre de zéro à un, et il a également rendu ce bouton « Générer » réellement disponible. Ensuite, je dois me souvenir exactement lesquels j'ai mis en place, car c'est juste un prototype forcé et ce n'est pas quelque chose où chaque option est réellement prototypée. Mais de toute façon, je me souviens que j'ai choisi celui-ci ensuite. Il va jusqu'à deux, ce qui est parfait. Puis les desserts, puis un dîner de plus, et il monte de 1, 2, 3, et 4 ce qui est génial. Ensuite, nous allons générer cette liste. C' est parfait. C'est arrivé avec la liste triée par catégorie, donc nous avons des produits, toutes ces choses, des aliments en conserve, toutes ces choses. Comme je l'ai dit, nous allons entrer dans certaines des plus petites interactions plus tard lorsque nous concevons vraiment, alors mettez vos croquis dans XD et faites-les entrer dans un endroit où vous pouvez facilement interagir avec eux en mode prototype. Il peut ne pas encore paraître joli, mais ce devrait être une expérience transparente. Une fois que vous avez obtenu cela, prenez une capture d'écran de vos filaires ou encore mieux, enregistrez une vidéo de votre prototype et partagez-la avec nous ci-dessous. Au cours des prochaines leçons, nous aborderons la partie vraiment amusante, transformant ces cadres filaires en designs haute fidélité utilisant des textiles, palettes de couleurs et des composants. L' un des blocs de construction les plus puissants d'Adobe XD. 9. UI Design: Nous sommes arrivés à une autre de mes étapes préférées absolues dans le processus, la phase de conception. Dans ces prochaines leçons, vous allez vraiment voir votre fonctionnalité d'application prendre vie visuellement, alors n'abandonnez pas maintenant. Afin de décider à quoi je veux que cette application ressemble visuellement, j'aime généralement faire un plan de travail sur le côté dans mon fichier de conception, et commencer à rassembler des images d'inspiration, des couleurs, et des phases de type. J' aime penser à l'espace dans lequel le produit existe, qui signifie qui va l'utiliser, dans quelle industrie il existe, et faire un peu de recherche sur le genre de couleurs et de styles qui pourraient se prêter à ce type de de l'espace. J' ai le sentiment que beaucoup d'entre vous sont déjà des designers visuels d'une certaine manière. Je ne vais pas passer beaucoup de temps sur cette étape. Mais fondamentalement, après avoir eu quelques idées de ce que je pourrais souhaiter que ma palette de couleurs soit et quelle police ou quel outil je pourrais utiliser dans toute l'application, je vais aller de l'avant et le tester sur un seul écran. Je dois généralement faire un peu d'ajustement, surtout parce que je veux m'assurer que le contraste des couleurs est assez grand pour que le texte sur les couleurs que j'utilise comme couleurs d' arrière-plan ou boutons soit lisible. Pour ce faire, j'utilise toujours le plug-in Stark, que vous pouvez voir ici. Comme vous pouvez le voir, j'ai joué avec ça quelques fois avant de vraiment arriver à un endroit où je l'ai aimé. abord, j'ai eu cette variation où nous avons l'icône plus avec un peu d'ombre ici. Je n'étais pas amoureux de ça, donc dans les prochaines versions, j'ai juste gardé ça très simple. Puis j'ai aussi joué avec le style de bouton. D' abord, j'utilisais ce fond bleu vif avec un trait épais. Je savais que je voulais m'en tenir à ce style rétro général avec les couleurs vives et les lignes droites vraiment épaisses, mais il y a aussi quelques façons de le faire. C' était ma première variante, puis j'ai décidé que je voulais rendre ces cartes de recettes un peu plus belles. Voyez ici, ils sont vraiment plats, et c'est un peu difficile pour eux de se démarquer parce que le petit texte ici se fond trop avec l'arrière-plan. Ici, j'ai regroupé l'image et la photo avec cette forme d'arrière-plan, qui est blanche, puis j'ai ajouté une ombre à l'arrière-plan pour vraiment l'aider à se démarquer. Le bouton ici semble similaire, mais j'ai décidé d'aller avec ce jaune. J' ai vraiment aimé ça mieux, mais ensuite je voulais essayer quelque chose de différent avec le bouton que je ne fais pas normalement, et je lui ai donné cette ombre dure, qui je pense est vraiment unique. J' ai décidé d'aller avec ça. Cette dernière tentative était définitivement ma préférée. J' ai fini par peaufiner ma page de styles pour refléter cela. Une fois que vous en êtes satisfait, c'est le moment idéal pour sélectionner vos couleurs et polices et les ajouter à vos fichiers de documents. Je les sélectionne juste et je clique sur le bouton Plus, et maintenant nous avons toutes ces couleurs à portée de main. Je vais faire la même chose avec ces styles de texte. J' utilise Roc Grotesk, et je garde ça très simple. Je l'utilise tout le long. Je me donne deux options différentes pour les en-têtes en utilisant une qui est super gras, et nous avons un cas de titre utilisé dans celui-ci. Puis celui-ci, qui est encore audacieux mais un peu plus petit, suivi un peu plus avec un plus grand espacement des lettres, et nous l'avons aussi dans toutes les majuscules. Ensuite, c'est ce que j'utilise pour tout le corps du texte. Comme vous le verrez quand nous entrons dans certaines des conceptions, je l' utilise généralement à 16 points, mais parfois je reçois un peu plus ou plus petit en fonction de ce que sont les besoins de la page. Ajoutons ces éléments à la section des ressources du document également. Je vais juste entrer et donner une étiquette à ça pour que ce soit vraiment facile pour moi. Appelez ce corps de sous-position et de direction là. Maintenant, en passant par et en concevant le reste de mon application, je peux tirer d'ici à tout moment, et cela rend juste beaucoup plus rapide. Alors que vous construisez cette page de test, il peut y avoir des choses qui nécessitent un peu d'ajustement qui ne sont pas nécessairement à voir avec vos styles principaux de vraiment juste couleurs de texte et styles de boutons. D' autres choses pourraient entrer dans l'image. Par exemple, pour le mien, ce composant ici, il est entré, ce qui va certainement être quelque chose que j'utilise dans le reste de l'application. Quand il s'agit de concevoir ce genre de choses, si vous n'avez pas beaucoup d'arrière-plan de conception visuelle, vous pouvez aller chercher de l'inspiration ailleurs. Vous pouvez regarder Behance, ou Pinterest, ou Instagram, ou surtout penser aux applications que vous utilisez tous les jours et obtenir inspiration de ceux-ci sur la façon de styliser différents éléments comme celui-ci. Vous devrez peut-être également ajouter des icônes à vos écrans. Si vous ne voulez pas concevoir tous ceux vous-même, ou si vous voulez juste gagner un peu de temps, alors je vous recommande fortement de télécharger le plugin appelé Icônes 4 Design. C' est ce que j'utilise tout le temps, et il a des tonnes d'icônes communes. J' ai utilisé l'icône plus ici, et bien sûr, j'aurais pu le faire moi-même. Cela ne prendrait probablement pas si longtemps, mais avoir ces options pour vous montrer quels types de styles d' icônes vous pouvez utiliser est une ressource vraiment géniale à avoir. Encore une fois, le style d'une application vient avec la pratique. Ne vous battez pas si ça ne semble pas parfaitement comme vous le souhaitez au début. Vous pouvez continuer à l'améliorer au fur et à mesure que vous allez. Une fois que vous êtes satisfait de ce à quoi ressemble cet écran de test, allez-y et faites une capture d'écran ou exportez-la en PNG et partagez-la avec nous dans la section Communauté de classe. Ensuite, nous allons découvrir la puissance des composants et l'auto-animation dans Adobe XD. Allez-y et passez par ce processus de conception de styles pour votre propre projet, et je vous verrai dans la leçon suivante. 10. Composants et plus: Dans cette leçon, je veux vous présenter les composants car c'est un outil qui va vraiment vous faire gagner temps lorsque vous concevez le reste des écrans de votre application. La création de composants dans Adobe XD est un excellent moyen de regrouper des éléments et de créer différents états ou variations d'un élément. Vous pouvez également configurer des transitions entre plusieurs états d'un seul composant. Sans utiliser des tonnes de tableaux d'art, vous pouvez créer des choses comme des micro animations. Si cela semble déroutant, je pense que le voir aidera vraiment. Permettez-moi de vous montrer quelques exemples. Dans la dernière leçon, vous avez vu que j'ai tracé l'écran en copiant et en collant et en changeant du texte et des images dans ces éléments, mais il y a en fait un moyen plus facile de le faire, que je suis sur le point de vous montrer maintenant en utilisant composants. Nous voulons créer un composant à partir de cela parce que nous pouvons alors réutiliser cela. Plus tard dans l'application, nous allons vouloir plusieurs états de ce composant de carte de recette. Nous allons vouloir un sélectionné dans un état désélectionné. C' est évidemment l'état par défaut qui est désélectionné, mais plus tard, chaque fois que nous voulons que les utilisateurs puissent sélectionner les recettes qu'ils veulent utiliser pour générer une liste de courses, nous aurons besoin de cet état sélectionné. C' est un concurrent parfait pour créer un composant à partir de. Je vais le faire à partir de zéro juste pour que vous puissiez voir ce que je veux dire. D' accord, configurons notre écran avec tout sauf les cartes de recette, et nous allons recréer cela en utilisant des composants à la place. Je vais créer ça à partir de zéro pour que vous puissiez voir exactement comment je l'ai fait. Tout d'abord, commençons par ce rectangle d'arrière-plan. Ce que nous avons, c'est un rectangle blanc. Je vais juste cliquer sur la touche R comme raccourci pour un rectangle. Nous allons tirer ça. Ça a l'air bien. Bien sûr, que vous pouvez obtenir vraiment spécifique avec la taille en fonction de l'espace que vous voulez entre les éléments et ce genre de choses. On ne veut pas de frontière là-dessus, alors je vais l'éteindre. Ensuite, nous voulons un peu d'espace pour une photo et un texte. Ce que je vais faire, c'est en fait faire un masque dans lequel nous pouvons dessiner notre photo. Nous pouvons créer un masque en utilisant un rectangle. Je vais frapper à nouveau R et créer un rectangle ici. Encore une fois, je vais éteindre la bordure, et rendons ce rectangle gris pour que nous puissions réellement le voir. D' accord, donc c'est là que va aller notre image. Encore une fois, nous voulons des copies. Je vais écrire des pâtes aux crevettes. Revenons à notre panneau d'actifs parce que nous voulons utiliser la copie corporelle pour cela. Parfait. Impressionnant. Maintenant, ce que je veux faire, c'est m'assurer que c'est aligné à gauche. C' est génial. Je vais toujours vouloir que ça commence, disons huit pixels du côté. Au lieu d'être ce type de texte où c'est fondamentalement une largeur illimitée, si je continuais à taper, ça va aller complètement en dehors de cela. Ce n'est pas ce qu'on veut. Au lieu de cela, nous voulons que ce soit une largeur fixe. Je vais fixer la largeur à environ cette taille. Nous voulons qu'il soit à huit pixels de l'extrémité droite aussi, parfait. Ensuite, il semble que la hauteur de la ligne et ici est trop grand, donc je vais faire ce 18 à la place. Impressionnant. Maintenant, nous pouvons étendre cela pour nous assurer qu'il s'aligne parfaitement là. Maintenant, nous allons créer un rembourrage de sorte que peu importe la durée du titre de la recette, ce composant sera flexible à cela. Afin de nous donner un rembourrage, nous devons regrouper ces éléments ensemble. Je vais faire le commandement G pour le groupe, et on l'enverra à l'arrière pour qu'on puisse toujours voir notre masque sur le dessus. Ensuite, sélectionnons ce groupe et voyons quelles sont nos options. On va vérifier le rembourrage ici. Comme vous pouvez le voir, nous avons 91 pixels de rembourrage sur le dessus, ce qui est génial parce qu'il nous donne de la place pour notre image. Nous avons huit pixels sur la gauche et la droite et six sur le bas. Je pense que c'est centré visuellement, donc c'est parfait. Maintenant, nous pouvons réellement en faire un composant. Sélectionnez à la fois ce groupe et le masque en haut et appuyez sur la commande K pour le composant. Maintenant qu'il s'agit d'un composant, nous pouvons descendre à la section du composant et nous pouvons réellement faire glisser pour créer une autre instance de ce composant. Nous pouvons également simplement copier et coller ou cliquer et faire glisser et maintenir Option Shift afin de créer plus de ceux-ci. Maintenant, les choses impressionnantes depuis que nous avons ajouté ce remplissage et c'est un composant, même si nous allons à une autre instance du composant, nous pouvons réellement changer le titre. Peut-être que c'est juste des pâtes de crevettes et maintenant comme vous pouvez le voir, l'ensemble du composant est en fait flexible à cela. Peut-être que celui-ci a un titre très long. Végétalien et sans gluten, piment aux haricots noirs. On y va. Tu peux le faire aussi longtemps que tu le veux. C' est ce qu'il y a de génial sur les composants. J' ai juste dû le faire une fois et maintenant, il va être flexible pour toutes les différentes instances que nous devons créer. Ce qui est génial, c'est qu'on peut juste jeter les images que l'on veut. Vous verrez que lorsque je lance une image à ce premier composant, puisque c'est le composant principal, il va transférer ce style au reste d'entre eux, mais c'est correct parce que nous pouvons facilement remplacer cela. Prenons celui-là et laissons-le juste là-dedans. Comme vous pouvez le voir, je le laisse tomber dans la partie surlignée chaque fois que je viens ici et c'est le masque. On y va. C'est tellement plus facile que ce que nous avons fait ici où nous avons dû copier et coller et redimensionner constamment cette forme d'arrière-plan. Maintenant, nous avons créé des composants flexibles. Maintenant que je le remarque, nous n'avons toujours pas ajouté l'ombre. C'est génial. Nous pouvons revenir à la composante principale. Si vous oubliez lequel est le composant principal, si vous remarquez que ce diamant n'est pas rempli en vert, ce diamant est rempli en vert. C' est comme ça que vous savez, c'est le composant principal. Ce que vous pouvez aussi faire, comme, disons que vous avez ce composant principal sur un écran qui est comme l'autre côté de votre fenêtre et que vous ne vous souvenez pas vraiment où il est, ce que vous pouvez faire est de taper sur l'une des instances, cliquez sur la touche Ctrl et Modifier le composant principal. Cela vous amènera directement à la composante principale. Ce que nous voulons faire, c'est lui donner une ombre. Nous allons sélectionner sur cette forme d'arrière-plan. On va descendre et lui donner une ombre. Pour mes ombres, j'aime les garder très subtiles. On va faire 8 % d'opacité avec une ombre noire. On va faire 20 flou. D' habitude ça a l'air sympa. Parfait. Maintenant, comme vous pouvez le voir, que c'est vraiment subtil, mais cela l'a appliqué au reste des instances. Nous avons ce composant, mais comme vous pouvez le voir, ils sont hors de l'écran. Si nous voulons que cela soit déroulant horizontalement, nous devons effectivement dire à XD de le faire. Ce que je vais faire, c'est en faire un peu plus. On les regroupera ensemble. Ensuite, une fois qu'ils sont regroupés, vous pouvez voir que nous avons ces options ici, et il s'agit de l'option Groupes de défilement. Cette icône est une icône de groupe de défilement horizontal. Nous allons frapper cela et comme vous pouvez le voir, il définit automatiquement le paramètre comme la pleine largeur de l'écran, ce qui est parfait. Si nous passons en mode Aperçu, et tout ce que je fais est de faire défiler horizontalement, et maintenant nous avons un groupe de défilement horizontal. La dernière chose que nous devons faire avec ce composant est de créer des états différents. Comme je l'ai dit, nous voulons un état sélectionné et un état désélectionné. Cet état par défaut est l'état désélectionné et si vous appuyez vraiment sur ce composant principal, parce que nous l'avons regroupé plusieurs fois, donc vous devez probablement continuer à cliquer. Ensuite, vous pouvez voir qu'il n'y a qu'un seul état et c'est l'état par défaut. Mais ajoutons un autre et nous appellerons ceci Sélectionné. Maintenant, ce que je veux que l'état sélectionné ressemble à c'est que je veux vraiment que cette forme d'arrière-plan ait une bordure. Maintenant, nous pouvons voir si nous zoomons, puisque cette forme est en arrière-plan de l'image, la bordure est coupée. Donc, pour corriger cela, au lieu d'avoir une bordure qui est un trait interne, donnons-lui un trait externe. De cette façon, il continuera à sortir des limites de ce rectangle. Afin de le rendre réellement visible, faisons trois pixels, et nous allons lui donner une couleur qui est dans l'une de nos palettes. Super. Voici donc l'état sélectionné. C' était aussi simple que ça. Tant que nous sommes sélectionnés dans l'état que nous voulons éditer, nous pouvons éditer cela, et ensuite toujours revenir à l'état par défaut. Sur l'état par défaut, nous allons configurer une interaction où chaque fois que ce composant est engagé, il doit passer à l'état sélectionné. Si nous faisons cela sur ce composant principal, il sera également appliqué au reste des composants. Encore une fois, il y a beaucoup de temps. Nous sommes sur ce composant actuel et nous allons passer en mode Prototype. Si nous tapons simplement sur ce fil au lieu de le faire glisser, nous tapons simplement dessus, alors nous pouvons avoir la possibilité de choisir une destination qui n'est qu'un autre état. Nous allons choisir l'état sélectionné et ce que nous voulons qu'il fasse, nous n'avons pas vraiment besoin de l'animer. Nous voulons juste la transition sans animation parce que nous voulons qu'elle soit immédiate. Passons à l'état sélectionné et faisons la même chose pour qu'un utilisateur puisse facilement le désélectionner s'il a fait une erreur. Encore une fois, on va juste taper dessus. Nous allons choisir « État par défaut », et il va se souvenir de tous les paramètres que nous voulions. Maintenant, on peut prévisualiser ça. Nous revenons en mode Design, appuyez sur l'aperçu. Si nous tapons simplement dessus, comme vous pouvez le voir, chaque fois que je tape, il est sélectionné et désélectionné. C' est une raison pour laquelle vous feriez un composant si vous voulez qu'il plusieurs états et que vous voulez pouvoir effectuer une transition entre eux. Mais une autre raison de créer un composant serait juste pour que vous ayez une source de vérité pour un certain élément. Prenons un bouton, par exemple. J' ai ce bouton et disons que je n'en fais pas un composant et je le copierai et le collez sur beaucoup de plans de travail différents, puis plus tard, je décide que je veux faire un changement. Peut-être que je veux que cette couleur soit ce rose à la place, alors je devrais passer par sélectionner tous les boutons et faire ce changement. Mais si je fais de cela un composant en assurant simplement qu'il est groupé, puis en appuyant sur la commande K, alors si j'ai ce composant apparaît plusieurs fois, alors tout ce que j'ai à faire est de changer celui. Je vais juste sauter ici et faire cette couleur, puis ils changent tous. Mais cela ne signifie pas que vous n'avez pas à avoir un seul style de bouton. Si vous le modifiez sur une seule instance, alors comme vous pouvez le voir, il ne s'applique qu'à cette instance. C' est un outil vraiment flexible à utiliser lorsque vous concevez l'ensemble de votre interface. Pour mon bouton, en particulier, je veux vraiment qu'il ait quelques états différents. Je voulais avoir cet état par défaut, mais je voulais aussi avoir un état inactif. Je veux qu'il soit là, mais je voulais avoir une opacité beaucoup plus faible afin qu'il soit clair que l'utilisateur doit prendre une autre action avant que ce bouton ne devienne actif. Tout ce que je vais faire est de sélectionner ce composant principal. Je sais que c'est le principal parce que ce diamant vert est rempli dans le coin, et je vais frapper « New State », et on va faire Inactif. Je vais en fait cliquer dans ce composant afin que je sois sélectionné sur l'ensemble du groupe. Je vais faire de l'opacité 50 pour cent. Maintenant, vous pouvez voir que c'est l'état inactif, nous avons l'état par défaut, et nous pouvons passer entre ceux-ci. Si vous venez ici aussi, vous pouvez voir que cela fonctionnera dans n'importe quelle instance du composant. Ensuite, parlons de l'auto-animation. Vous pouvez utiliser l'animation automatique pour effectuer une transition entre deux écrans différents ou deux états différents d'un seul composant. Laissez-moi vous montrer un exemple de cela juste au cas où vous voulez expérimenter avec cela dans votre conception d'application. Vous avez déjà vu cet écran et il s'agit de l'écran de recette sauvegardée dont nous parlions vraiment. Maintenant, ce que je fais est de créer un modal que je veux flotter dans le cadre chaque fois que vous appuyez sur le bouton plus afin d'ajouter une nouvelle recette. J' ai créé ce modal et je l'ai regroupé comme vous pouvez le voir. Ce plan de travail est juste une copie du plan de travail précédent avec ce modal sur le dessus. Ce que je veux faire pour animer entre ces deux écrans est en fait avoir cet élément sur ces deux écrans. Vous pouvez voir que j'ai vraiment ça. En bas, c'est cet élément, mais regardez, c'est tout en bas et l'opacité est à zéro. Parce qu'il est nommé le même, Groupe 64, Groupe 64, et c'est sur ces deux plans de travail, auto-animer dans XD va en fait être capable d'animer la différence entre les deux emplacements et une sorte de comment ils apparaissent. Sur ce plan de travail, il est complètement à zéro pour cent d'opacité et il est en bas. Sur ce plan de travail, il est à 100 % d'opacité et il couvre presque tout l'écran. Si je télécharge cela, je peux double-cliquer jusqu'à ce que je pénètre dans cette icône plus. Je peux faire glisser ce fil sur et si nous sélectionnons « Auto-Animate », et nous le ferons, peut-être faire de la facilité d'entrée et de sortie et nous le rendrons assez rapide, 0,3 seconde, alors voyez si vous pouvez voir comment cela se passe. Cliquez sur l'icône plus et il flotte vers le haut dans le cadre. C' est exactement ce à quoi nous voulions qu'il ressemble. Cela rend vraiment l'animation tellement plus facile, parce que tout ce que vous avez à faire est d'avoir un élément apparaît sur deux écrans différents et l'avoir nommé le même dans le panneau des calques, et il animera automatiquement la différence. Maintenant que vous comprenez ces deux fonctionnalités critiques dans XD, vous pouvez aller de l'avant et terminer votre propre prototype. Des rappels rapides avant de terminer cette leçon. Créez un composant chaque fois que vous avez un élément qui apparaîtra sous une forme ou une autre à plusieurs endroits pour vous faire gagner du temps et de la confusion. Au fur et à mesure que vous concevez, continuez à passer en mode Prototype pour prototyper vos conceptions et jouez-les pour les tester et voir où vous devez effectuer des ajustements. Si vous voulez obtenir une certaine pratique d'un vrai projet UX, vous pourriez même demander à d'autres de tester vos prototypes. Cela fonctionne mieux si vous avez réellement quelqu'un à maison qui vous pouvez obtenir le prototype devant, de cette façon vous pouvez réellement les regarder et voir où ils trébuchent. Si vous voulez voir encore plus de démos et dans les coulisses de la façon dont j'ai conçu ma fonctionnalité d'application, alors vous pouvez regarder la vidéo suivante, qui est en fait une vidéo bonus. Je vais vous montrer encore plus de ces éléments de conception et interactions que j'ai créés, et aussi vous montrer un délai de trois heures de processus de conception de ceci. Si vous êtes déjà très confiant dans Adobe XD, alors vous pouvez vous sentir libre de l'ignorer entièrement ou tout simplement regarder autant ou aussi peu que vous le souhaitez. 11. BONUS ! Plus de design et vidéo image par image: Comme je l'ai mentionné dans cette vidéo bonus, je vais vous montrer toute ma fonctionnalité d'application du début à la fin, quelques autres petites interactions, et des éléments de conception que j'ai créés. Ensuite, à la fin, vous pourrez voir un time-lapsus de l'ensemble du processus qui a pris environ trois heures au total. N' oublions pas, si vous connaissez déjà XD ou si vous êtes impatient de passer à l'étape suivante de la création de votre vidéo finale. N' hésitez pas à passer à la leçon suivante. Pour créer cela, j'ai 19 écrans, mais vraiment seulement quatre conceptions d'écran différentes. Nous avons cet écran « Recettes enregistrées », que vous avez déjà vu plusieurs fois. Nous avons ceci, ajouter recette, écran, où nous avons différentes variantes de celui-ci ; où il n'est pas rempli, et où il est complètement rempli. Nous avons cet écran « Enregistrer vers » comme quel écran de catégorie, et puis, la même chose exacte, nous avons cet écran « Recettes enregistrées », mais c'est juste un peu différent chaque fois que nous avons l'utilisateur sélectionner des recettes pour générer un liste de courses, et puis, enfin, nous avons la page de la liste d'achats réelle. Vous pouvez voir que nous avons pu créer toute cette animation en copiant et collant, et en ajustant certaines choses autour et en animant entre elles. Laissez-moi vous montrer exactement comment j'ai fait ça. Nous avons déjà vu cette interaction. Nous avons le bouton « + » tapé et puis cette nouvelle carte de recette, il apparaît. Ce que je voulais ensuite arriver, c'était, et nous voulions que l'utilisateur ait la possibilité de coller une URL à partir de son presse-papiers. Alors peut-être qu'ils regardent Instagram ou Pinterest, ou sur l'un de leurs blogs préférés, et qu'ils veulent importer une recette à partir de là. Ils maintiennent simplement enfoncé pour copier le lien, revenir dans cette application, puis il les invitera à coller n'importe quelle URL qu'ils ont dans leur presse-papiers. Après qu'ils aient fait cela, je voulais qu'il soit clair que la recette était en train de charger. Vous ne voulez jamais qu'un utilisateur soit laissé suspendu. Vous voulez leur montrer que, ce que vous avez fait a fonctionné, l'action que vous avez effectuée est réussie, mais nous chargeons simplement les données. C' est ce que je voulais ici. Donc, une fois que nous avons cet utilisateur taper sur cet élément, coller à partir du presse-papiers, ce que je voulais était d'avoir l'écran suivant soit cet écran de chargement. Je voulais qu'il passe directement dans cet écran avec une dissoudre, puis ce que j'ai fait est d'ajouter un déclencheur temporel. Donc, au lieu d'avoir à toucher quoi que ce soit sur cet écran, tout ce qui se passe est que cette barre, au fil du temps, se déplace tout le chemin vers le haut pour remplir la barre de chargement. J' ai défini cette durée pour qu'elle se produise en deux secondes complètes. Regardons à quoi ça ressemble. Nous avons cet écran « Ajouter une recette ». Nous tapons sur cela pour coller à partir de l'URL, puis il le charge. Ensuite, dès que ces deux secondes sont terminées, nous avons un autre déclencheur temporel qui nous amène à cet écran, où nous avons toutes ces informations en train de se charger. Si je clique ici, ce groupe, groupe 87, c'est là que j'ai le bouton et tous ces ingrédients, et tout ça. Cela va s'estomper à partir du bas. Si vous vous souvenez, d'une des vidéos précédentes, vous pouvez voir comment je l'ai fait ici. Si nous cliquons ici, c'est le même groupe, le groupe 87 et l'opacité est tout bas, mais si nous l'affichons, nous verrions que c'est la même information. Cela permet d'animer auto pour faire son truc parce que, une fois que nous avons activé, cela, alors il va juste animer la différence, la différence entre zéro pour cent d'opacité à 100, la différence entre ce placement au en bas et le placement en haut. C' est ainsi que j'ai créé cette transition. Ensuite, ce que je voulais, c'était que l'utilisateur puisse enregistrer cela. Donc, si nous cliquons sur ce bouton « Enregistrer », nous pouvons voir que cela va juste réduire cette nouvelle carte de recette vers le bas parce que nous voulons que cela ressemble au même processus, mais la dernière étape du processus, donc nous gardons le exactement de même, c'est le même modèle, mais juste un peu plus petit pour que vous puissiez voir que c'est la dernière étape. Pour ce faire, nous avons juste dû nous assurer que cet élément, ce rectangle avec les coins arrondis sur le dessus, porte le même nom sur les deux plans de travail. Il est nommé rectangle 789, et ici, si nous commandons cliquer pour taper, tout le chemin dans le calque inférieur, il est nommé la même chose. Si vous êtes plus organisé que moi, vous pourriez nommer toutes vos couches quelque chose qui a vraiment du sens. Mais pour moi, quand je conçois, ça a tendance à être rapide, et je ne vais y retourner et le faire que si j'ai une interaction vraiment déroutante en cours. Ensuite, ce que nous voulons, c'est que cette information disparaisse de l'écran et que cette information s'estompe. Nous pouvons voir que cela arrive assez facilement chaque fois que nous avons cette animation se produit. Alors ce que nous voulons, c'est gérer cette situation de case à cocher. Comme vous pouvez le voir, j'ai fait de cette case à cocher un composant. Donc, si je continue à taper deux fois jusqu'à ce qu'on arrive ici, on a ce composant. Nous avons un état par défaut, qui n'est pas coché, et nous avons un état vérifié. Fondamentalement, ce que vous pouviez faire si vous le souhaitez, a été mis en place une interaction dans le composant principal pour pouvoir appuyer, désactiver et activer cet état vérifié. Cependant, je voulais également que ce bouton « Confirmer » change également les états. J' ai fini par utiliser deux plans de travail différents pour cette interaction pour cette raison. Ce qui se passe ici, c'est que dès que cette case est cochée, elle passera simplement à ce plan de travail suivant où nous avons coché cette case, et nous avons également le bouton « Confirmer » à 100 % d'opacité. Vérifions ça, nous tapons sur les dîners et c'est aussi simple que ça. Ensuite, à partir d'ici, nous voulons que l'utilisateur clique sur « Confirmer », puis cela va simplement sortir du cadre, et nous voulons être en mesure de voir la nouvelle recette entrer dans le cadre. Nous ne voulons pas seulement qu'il apparaisse automatiquement parce que nous voulons donner les commentaires et attirer l'attention sur le fait que, « Oui. Cette recette a été ajoutée au début de la catégorie des dîners. » D' abord, laissez-moi vous montrer ce que je veux dire. Nous avons cliqué sur « Confirmer ». Tu as vu ça ? C'est exactement ce que je voulais arriver et je vais te montrer comment je l'ai fait. C' est vraiment simple de faire disparaître ce modal. C' est exactement le même processus que nous avons fait. Sur ce plan de travail, nous avons le modal entièrement in-frame. Il s'appelle le groupe 92 sur ce plan de travail. Si nous passons vers le bas, nous avons le même plan de travail nommé la même chose, le groupe 92, mais l'opacité est tout en bas et c'est aussi tout en bas. Même chose encore et encore avec ce modal entrant et sortant. Mais, la partie vraiment amusante ici est cette interaction. Si nous tapons ici à l'état sur lequel nous voulons finir, alors nous pouvons voir que nous avons ces quatre recettes, je vais juste prendre tout ce groupe de défilement, copier et le coller ici. Ensuite, tout ce que je vais faire est de prendre ces éléments, sélectionner chacun d'entre eux, et de les faire glisser pour que nous ayons les pâtes aux crevettes comme le tout premier. Ensuite, comme vous pouvez le voir comme nous l'avions avant, j'ai ce nouveau qui est juste si légèrement dans le cadre, nous allons tourner l'opacité jusqu'ici, et puisque nous avons copié et collé les groupes de défilement vont avoir le même nom dans les deux, ce qui est parfait. Si nous passons en mode prototype, maintenant nous pouvons voir que j'ai mis en place un déclencheur temporel, après seulement 0,3 seconde, il s'animera automatiquement sur ce plan de travail suivant et j'ai utilisé l'assouplissement dans cela, et j'ai utilisé Snap, ce qui le rend très rapide. J' aime vraiment à quoi ressemble cette interaction. Prévisualisons ça. Nous allons en prévisualiser d'ici parce que c'est assez rapide, on appuie sur confirmation, et voilà. C' est ainsi que vous faites ce type d'interaction. Ensuite, on arrive à la bonne chose. Maintenant, nous avons cet écran de recettes sauvegardées, mais la prochaine chose que nous voulons que les gens puissent faire est de faire leur liste d'épicerie. Nous avons ce bouton là bas, quand on appuie sur ce bouton, ce que nous voulons que les gens puissent faire, c'est choisir les recettes qu'ils veulent inclure dans leur liste d'épicerie. Afin de donner des commentaires sur le fait que les sélections travaillent garder une trace du nombre de recettes qu'ils ont sélectionnées, je veux également avoir un compteur dans le coin supérieur droit. Comme vous pouvez le voir, nous avons 0,1,2,3, et 4, avec chaque plan de travail, une nouvelle recette est sélectionnée. Pour cette raison, nous n'avons pas vraiment profité des composants dans ce scénario. Parce que ce que nous aurions pu faire est simplement avoir cette interaction où chaque fois que l'un d'entre eux est utilisé, il passe à l'état sélectionné et cela aurait fonctionné très bien. Mais alors, nous avons encore besoin d'un nouveau plan de travail pour que ce compteur augmente. C' était le moyen le plus facile pour moi de le faire. Tout ce que j'ai vraiment fait a été commencé avec zéro recette sélectionnée, et comme vous pouvez le voir, pour cela, j'avais ce bouton de liste de génération dans l'état inactif. Je déplace simplement l'opacité vers le bas à 50 parce que si l'utilisateur n'a pas sélectionné de recettes, il ne devrait pas encore être en mesure de générer la liste. La liste n'aurait rien sur elle. Cela leur donne juste plus de commentaires qu'ils doivent sélectionner une recette pour pouvoir procéder à ce processus. Pour l'amour de cette maquette, nous allons faire semblant que cette personne va puiser soupe de tomate crémeuse comme leur tout premier. Nous allons configurer l'interaction de sorte que lorsque cela est tapé, il nous conduira automatiquement directement au plan de travail suivant, et sur ce plan de travail suivant, le compteur se déplace à un et le bouton de la liste de génération tout le chemin vers le haut dans opacité. C' est tout ce qu'on fait ici quatre fois différentes. Nous déplaçons l'état de non sélectionné pour le sélectionner, nous déplaçons le compteur vers le haut 1,2,3, et 4. Enfin, lorsqu'ils auront tous les quatre sélectionnés, ils vont décider de générer la liste. Si nous voyons en mode prototype ce que cela va faire, est-ce que cela va essentiellement s'animer automatiquement dans cette liste et puisque cela vous semble probablement familier, c'est un modal et j'ai donc utilisé le même processus exact. Nous avons tout cela regroupé, groupe 113 et si vous regardez ici dans le plan de travail précédent, il s'appelle 113, l'opacité est tout le bas, ce qui va nous permettre de générer la liste et il va glisser vers le haut comme ça. Regardons cela une fois de plus pour que vous puissiez voir comment cela fonctionne. Quelqu' un décide qu'ils veulent faire une liste d'épicerie, cela passe pour sélectionner des recettes pour dire à l'utilisateur quoi faire. Ils sont capables de les sélectionner un par un. Nous montrons aussi le groupe de défilement ici, ce qui a l'air assez cool. Soupe au curry, nous allons faire des biscuits chargés à la salade et aux pépites de chocolat et vous pouvez voir que le comptoir est allé jusqu'à quatre. Nous allons générer la liste et maintenant vous pouvez voir que la liste générée peut être triée par catégorie ou recette. C' est quelque chose que je n'ai pas prototype parce que ce n'était pas super important pour ma dernière fonctionnalité. Mais je voulais montrer ces catégories pliables. Comme il est trié par catégorie, je voulais que vous puissiez, au moins pour l'une des sections que j'ai choisies, produire, ouvrir et fermer ceci. Nous avons cette interaction , et maintenant je vais vous montrer comment faire ça. Il est plus facile de concevoir les résultats que le premier plan de travail si cela a du sens. C' est le résultat final. C' est ce que j'ai conçu en premier, j'ai fait toute cette liste, je l'ai regroupée pour rendre les choses plus faciles. Ça s'appelle le groupe 109, et si vous venez ici, vous pouvez aussi voir que le groupe 109 est ici le groupe 109. Si nous retournons tout ça, ce que vous verrez, c'est que j'ai simplement pris chacun de ces éléments et empilés les uns sur les autres pour les effondrer parce que c'est exactement ce que c'est. Ils réduisent cette liste pour la développer ou la réduire. Ce que nous pouvons faire maintenant, c'est passer en mode prototype et si nous avons ce produit tapé, alors ce que nous voulons qu'il fasse est d'animer sur celui-ci et s'il est à nouveau tapé, alors vous voulez qu'il s'effondre à nouveau, il reviendra sur cet écran . C' est assez facile. C' est ce que nous avons fait ici, produire. Tu peux juste le faire monter et descendre. Comme vous pouvez le voir, j'ai aussi dû prendre cette section de cuisson et la déplacer vers le bas ce plan de travail pour qu'elle soit ébranlée de façon à ce que vous puissiez voir toute la liste. Je voulais que les utilisateurs puissent ouvrir et fermer cette liste de recettes. C' est juste une liste de toutes les recettes qui sont incluses, sorte que si vous voulez désélectionner l'une d'entre elles, vous pouvez le faire. Je viens de créer ce composant où l'un des états est réduit et l'état par défaut est avec tous ces états comme ceci. J' ai fait le même processus exact avec l'état effondré. Vous pouvez probablement voir si nous allons ici, nous avons tous ces groupes qui sont actuellement à zéro pour cent d'opacité, mais si je les affiche, vous pouvez voir que tous ces groupes sont juste cachés derrière là et ils sont empilés les uns sur les autres. C' est vraiment comme ça que j'ai fait ça. Ce que je voulais, c'est, même si vous êtes sur cette page où tout ça est sorti, si vous appuyez dessus, je voulais aussi qu'ils si vous appuyez dessus, s'effondrent, parce que je voulais qu'il y ait de la place pour que vous puissiez voir ces recettes. Alors regarde ça. Voilà, tu y vas. Pour ce faire, j'ai créé ce troisième plan de travail où nous avons en fait tous ces éléments et élargis. C' est à peu près une copie de ceci, mais avec tous ces élargis, donc de cette façon, si vous êtes sur ce plan de travail et que vous appuyez dessus, cela vous mènera à ce plan de travail. Mais si vous êtes sur ce plan de travail et que vous appuyez dessus, cela vous mènera toujours à ce plan de travail. Donc, quoi qu'il en soit, si vous appuyez dessus pour l'étendre, non seulement il se développera en soi, mais il réduira également toutes ces listes. La dernière interaction que je voulais vous montrer était de sauvegarder votre liste. Disons qu'un utilisateur a sa liste, mais qu'il ne va pas faire les achats correctement ou qu'il veut simplement la sauvegarder pour plus tard, il est en mesure d'enregistrer la liste et effectivement être en mesure d'y accéder depuis son écran d'accueil. Si nous passons au nouvel écran d'accueil, une fois qu'une liste a été enregistrée, vous pouvez voir que nous avons cet élément ajouté. Je viens de créer une petite icône de liste rapide et lui ai donné un petit badge avec le numéro 1 afin que vous sachiez combien de listes vous avez sauvegardées. Pour avoir cette animation, je vais vous montrer exactement ce que j'ai fait. Disons que nous commençons ici, vous appuyez sur « Enregistrer la liste ». Vous pouvez voir que c'est la même interaction que nous avons eue ici quand nous avons fait entrer la soupe aux tomates dans la catégorie des dîners. Je vais vous le montrer encore, mais c'est à peu près la même chose. Ce que nous faisons, c'est nous avons ce prototype de sorte que si vous cliquez sur Enregistrer la liste, vous viendrez ici, et d'abord vous atterrissez sur cet écran d'accueil normal sans la liste. Comme vous pouvez le voir, si je survole, j'ai en fait cette icône de liste tout le chemin vers la gauche avec l'opacité tout le long. C' est comme jamais si légèrement sur le plan de travail. Ensuite, j'ai mis en place un déclencheur temporel où il atterrira sur cet écran, mais après une demi-seconde, il s'animera automatiquement sur cet écran où cela est réellement en place et l'assouplissement sera un clin d'œil, et il sera juste prendre 0,2 seconde, donc ce sera vraiment rapide comme l'interaction précédente. C' est juste une autre façon d'attirer l'attention sur quelque chose qui arrive à l'écran. Vous pouvez facilement l'animer de sorte que vous appuyez sur « Enregistrer » et vous êtes amené à cet écran. Mais l'ajout de cette interaction à l' écran ne fait que conduire le point à la maison à l'utilisateur que, oui, ils l'ont enregistré et l'application leur montre, oui, il a été sauvé avec succès et maintenant il vit ici. Je pense que c'est une interaction super importante. Voyons tout le truc et puis je vais vous montrer tout le time-lapse de moi créer ceci si vous êtes curieux de savoir à quoi cela ressemblait. 12. Créer sa vidéo: Tout le monde, vous êtes arrivé à la toute dernière étape. Ici, nous allons mettre un arc sur votre fonctionnalité unique d'application afin que vous puissiez la partager sur votre portfolio, Behance ou sur les réseaux sociaux. J' ai essayé de rendre cette dernière leçon très simple pour toi. J' ai mis en place un petit dossier de ressources que je vais vous accompagner maintenant. Dans ce dossier, nous avons deux choses. Nous avons des images de fond, et je viens de les télécharger depuis Unsplash, donc c'est totalement gratuit et gratuit. Vous pouvez télécharger certains des vôtres à partir de là si vous le souhaitez, ou vous pouvez créer le vôtre. Alors la prochaine chose que j'ai est ces cadres iPhone. Je viens d'en créer un en noir et c'est comme un type de superposition 3D en argile. Nous avons aussi un plus plat en noir et un plus plat en blanc. Encore une fois, vous pouvez les télécharger à partir de différents endroits gratuitement, alors n'hésitez pas à trouver le vôtre. Mais j'ai juste pensé qu'il serait utile de les inclure là-dedans. Ce que nous allons faire est de superposer ce cadre iPhone au-dessus de votre prototype vidéo afin qu'il ajoute un peu de contexte et semble vraiment réaliste. Maintenant, il est temps d'enregistrer votre prototype dans XD. C'est vraiment facile. Tout ce que vous allez faire est de sélectionner sur le tout premier tableau d'art de votre prototype et de taper sur l'icône « Play » et puis vous verrez ici, vous pouvez commencer à enregistrer. Allez-y, appuyez sur « Record ». J' aime toujours m'assurer que je vois qu'il commence à compter pendant quelques secondes pour me donner une certaine marge de manœuvre et ensuite je vais commencer à interagir avec elle. Je vais juste passer par ce processus ici. J' aime aller assez lentement pour que vous puissiez voir exactement ce que je fais, mais pas si lent que ça devient ennuyeux. Prenez votre temps. Ne vous précipitez pas. Assurez-vous que vous êtes capable de voir tout ce que vous faites. Assurez-vous d'interagir avec tout ce que vous vouliez montrer. Génial. Une fois que vous avez terminé, allez-y et arrêtez d'enregistrer. Ensuite, vous allez simplement donner à cela un nom unique et l'enregistrer sur votre bureau. Je vais l'appeler prototype d'application. Super. Maintenant, ce que nous pouvons faire est de double-cliquer pour ouvrir cela dans QuickTime et de le couper. Comme je l'ai dit, j'aime laisser un peu de place au début et à la fin, alors il est temps de le couper, de s' assurer qu'il est bien et serré. Pour ce faire, assurez-vous que vous êtes dans QuickTime et utilisez simplement les contrôles Commande T. Voyons où cela commence réellement. C' est là que mon curseur entre en jeu. Je vais l'arrêter un peu avant ça. Ensuite, je vais l'amener au début et jouer à travers tout ça et l'arrêter chaque fois que je pense que c'est un bon moment. Parfait, juste là, garniture. Aussi un conseil quand il s'agit d'enregistrer réellement votre prototype, vous devrez peut-être le faire quelques fois pour obtenir vraiment lisse et pratiquer toutes les interactions, c'est tout à fait bien. Assurez-vous d'en obtenir un bon avant d'aller de l'avant. Je vais sauver ça, et je vais juste le sauvegarder sur cette version. Génial. Maintenant, nous avons ce prototype d'application, et je vais le jeter directement dans mon dossier de ressources vidéo, avec les arrière-plans et les cadres iPhone que nous avons. abord, je vais vous montrer comment procéder dans Premiere Pro. Une fois que nous aurons créé un nouveau projet, nous aurons cette corbeille de projet ici. Je vais juste importer tout ce dont je vais avoir besoin et ensuite nous allons le calquer dans la chronologie. D' abord, bien sûr, je vais glisser dans ma vidéo prototype que nous venons de couper. Alors je vais trouver un fond que j'aime. Je vais le faire. Ensuite, je vais trouver un cadre iPhone. Je vais le faire plus 3D à la recherche d'un. Génial. Maintenant, comme je l'ai dit, nous pouvons simplement les superposer dans la chronologie. abord, je vais faire glisser ce prototype vidéo principal et comme vous pouvez le voir, le projet a pris les mêmes dimensions que cette première vidéo que nous avons déposée. Ce que nous allons faire est d'aller aux paramètres de séquence. On va changer ça en 1920 d'ici 1080. Ensuite, nous allons juste avoir besoin de rendre ces pistes vidéo plus petites. On peut aller à l'échelle sous les contrôles des effets et le réduire. Nous devrons peut-être ajuster cela plus tard en fonction de la taille du cadre que nous apportons. Mais c'est bon pour l'instant et comme je l'ai dit, nous allons juste les superposer. Bien sûr, nous voulons la texture sur le fond, puis nous voulons le prototype, et puis en plus de cela, nous voulons le cadre de l'iPhone. Il a l'air assez bien, mais nous devons diminuer un peu la taille de la vidéo afin qu'elle s'intègre parfaitement dans ce cadre. Ensuite, je vais réellement déplacer la position autour juste un peu pour qu'elle soit parfaitement centrée là-dedans. Ça a l'air bien. Mais je veux bouger un peu l'arrière-plan. Je veux que ce pli soit sur le côté. Je pense que ça a l'air bien. Une fois que vous êtes satisfait, alors vous pouvez aller l'exporter. Tout ce que vous allez faire est d'aller au fichier, à l'exportation, aux médias. Le raccourci est Command M, puis partout où il indique le nom de sortie, vous pouvez choisir ce que vous voulez le nommer et où vous voulez l'enregistrer. Fais ça. Vous pouvez voir ici tous les paramètres semblent bien, 1920 par 1080. Vous pouvez décocher l'audio si vous le souhaitez, car il n'y a pas d'audio. Ensuite, vous pouvez cliquer sur « Exporter ». Maintenant, je vais vous montrer comment faire cela dans iMovie, et c'est vraiment similaire. Mais malheureusement, dans iMovie, vous ne pouvez pas superposer plus de deux pistes vidéo. Nous allons juste passer la deuxième couche, l'exporter, puis la ramener et la couche la troisième sur le dessus. Je vais juste vous montrer ce que c'est exactement, au cas où vous n'auriez pas accès à Premiere Pro. D' abord, je vais tomber dans notre arrière-plan puisque c'est ce que nous voulons en bas et ensuite je vais déposer notre prototype. On va jeter le prototype sur le dessus comme ça. Ensuite, nous allons étirer ça jusqu'à ce qu'il atteigne la fin de notre vidéo. Il y a cet effet bizarre Ken Burns sur le calque d'arrière-plan qui est juste une valeur par défaut dans iMovie chaque fois que vous importez une photo. On va juste éteindre ça. On va faire des cultures à remplir et ça a l'air bien. Double-cliquez sur la vidéo. Ensuite, si vous voyez ici, il y a une option qui dit couper et vous pouvez passer cela à l'image et à l'image, ce que nous voulons parce que cela nous permettra de réellement manipuler la taille ici. Faisons ça, fais-le juste à propos de cette taille. Encore une fois, je veux changer le placement de l'arrière-plan. Allons ici et gâchons la taille. Parfait. Ensuite, le pli apparaîtra sur la droite un peu plus. Je pense que ça a l'air très bien. Ensuite, nous allons exporter ceci et nous allons réellement le ramener pour que nous puissions faire la même chose, mais simplement en superposant le cadre sur le dessus. Je vais faire un fichier, partager, fichier. Parfait. Maintenant, on peut juste utiliser le même fichier, donc on va s'en débarrasser. Nous allons chercher notre film sur le bureau et nous le déposerons. Peut voir si nous frottons à travers, il a l'air bien et maintenant nous avons juste à couches le cadre de l'iPhone sur le dessus, alors nous allons chier ça et nous allons le glisser dedans. Encore une fois, nous allons augmenter la longueur et aller à l'image et à l'image à la place. Nous allons avoir besoin d'abord, aller dans la culture et en forme pour que vous puissiez voir tout. Cela semble bon et double-cliquez à nouveau sur l'image et l'image, et je vais juste faire cela pour qu'il s'adapte parfaitement. Maintenant, jouons-le et voyons à quoi ça ressemble. Ça a l'air génial. Comme vous pouvez le voir, il ressemble à celui que nous avons créé dans Premiere, il a fallu une étape supplémentaire. Voici à quoi ressemble ma dernière vidéo. J' ai hâte de voir le vôtre, s'il vous plaît partagez-le ci-dessous. Aussi, si vous décidez de le partager sur les réseaux sociaux, n'hésitez pas à me marquer sur MaddieBeard.ux sur Instagram, et à souligner MaddieBeard sur Twitter. Rien ne me rendrait plus heureux que de voir vos projets et de les partager avec le monde entier. 13. Dernières astuces: Avant de terminer ce cours, je voulais prendre quelques minutes juste pour parler de certaines idées fausses, questions et choses comme ça, qui pourraient vous aider si vous êtes au début de votre carrière UX. Mon premier conseil ici est toujours avoir un pourquoi derrière vos décisions. En tant que designer UX, vous n'êtes pas nécessairement un artiste, vous êtes un communicateur et vous aidez quelqu'un à utiliser un produit et à en tirer le meilleur parti. Il devrait toujours y avoir une raison pour laquelle vous prenez certaines décisions de conception. Ces types de raisons sont vraiment importantes pour être en mesure d'articuler, de montrer et de dire, non seulement à vos patrons, clients et choses comme ça, mais aussi pour vous-même de comprendre pourquoi vous faites les choses que vous faites et que vous avez une certaine tranquillité d'esprit que la recherche , les données et les tests entrent dans vos décisions parce que c'est ce qui fait un produit réussi. Mon deuxième conseil est de toujours montrer votre travail de processus dans vos études de cas UX et vos pièces de portefeuille. Les employeurs veulent savoir à quoi ressemble votre processus, et ils veulent savoir ce qui se passe dans votre travail. Ils ne veulent pas simplement voir que vous pouvez produire une jolie interface utilisateur, ils veulent voir ce qu'il y a dedans. Que ce soit de la recherche ou 10 itérations ou quoi que ce soit. Vous devriez montrer tout ce qui va dans votre projet d'une manière extrêmement digeste pour vos spectateurs. Ne vous contentez pas de jeter tout ce que vous avez fait sur la page, mais essayez de raconter une histoire sur la façon dont vous êtes passé d'un problème à une solution. Mon troisième conseil est un peu technique, mais je pense que c'est important et c'est une question de cohérence. En tant que concepteur UX, vous devez vous entraîner à être orienté détail. En ce qui concerne la taille du texte, la cohérence des couleurs et la cohérence de l'espacement, ces éléments sont cruciaux. Lorsqu' un employeur ou un client potentiel traverse vos projets, il ne devrait pas voir d'erreurs à cet égard. Ils ne devraient pas voir que vous avez décidé d'utiliser une police à l'écran, mais vous avez passé au hasard à une autre police sur un autre écran. Ils ne devraient pas voir que vous utilisez 10 pixels de remplissage sur ce scénario et 25 dans ce scénario sans raison valable. Vous devriez toujours vérifier votre travail en termes de cohérence et d'orientation détaillée, car c'est quelque chose que les employeurs vont chercher. Mon dernier conseil est de tester tôt et souvent. C' est une chose sur laquelle les gens dans le domaine de l'UX peuvent s'entendre à tous les niveaux. Il est vraiment important de mettre vos solutions entre les mains de vrais utilisateurs le plus tôt possible et le plus souvent possible. C' est parce qu'en tant que concepteur, vous avez des tonnes de biais et vous ne savez pas nécessairement ce que les gens vont faire. Vous pouvez penser que vous savez ce qu'ils vont faire, ils peuvent vous dire ce qu'ils vont faire, mais cela ne correspond pas toujours à ce qu'ils font réellement et comment ils se comportent réellement avec un produit devant eux. Même avec des projets de pratique ou des projets qui ne sont que des études de cas pour votre portefeuille, je recommande fortement d'essayer d'obtenir quelqu'un pour les tester. Cela va juste aider vos conceptions à s'améliorer à chaque fois que vous testez. 14. Conclusion: Tu es arrivé jusqu'à la fin de ce cours. Se présenter et prendre des mesures est sérieusement la meilleure chose que vous pouvez faire pour améliorer vos compétences et éventuellement passer à une carrière dans UX. Ce n'est pas toujours facile de se présenter et d'essayer quelque chose de nouveau et de vraiment y mettre tout, mais ça vaut toujours la peine. J' espère vraiment que vous avez apprécié les processus créatifs et stratégiques qui entrent dans un projet comme celui-ci. N' oubliez pas de télécharger votre projet ci-dessous, et n'hésitez pas à revenir à ce cours quand vous voulez obtenir plus de pratique, expérience et de projets sous votre ceinture. Que vous souhaitiez créer plus de fonctionnalités d'application pour la même idée ou faire quelques solutions complètement différentes, je vous encourage vivement à continuer avec elle. J' ai adoré partager ce cours avec vous, et j'ai hâte de voir comment vous l'avez utilisé pour créer quelque chose que vous n'avez jamais conçu auparavant. Merci beaucoup d'avoir regardé. Bonne chance dans votre carrière créative.