Premiers pas avec Adobe Xd : créer des prototypes de sites Web interactifs

1. Introduction du cours: Bonjour les créatifs. Adobe XD est un outil très utile pour les concepteurs de sites Web qui souhaitent créer des prototypes interactifs leur permettant de collaborer avec d'autres créatifs, de recueillir les commentaires de leurs clients et, enfin, de préparer les illustrations pour qu'un développeur Web puisse recueillir les commentaires de leurs clients et, enfin, les utiliser Cela signifie que toutes les personnes impliquées peuvent imaginer à quoi ressemblera et à quoi ressemblera le site Web et à quoi ressemblera avant de commencer à le créer Cela permet d'économiser une tonne d' argent, d'éviter toute confusion entre vous, le client et les développeurs et vous permet même de télécharger des ressources directement depuis le prototype lui-même. Bonjour, je m'appelle Malin et je travaille en tant que marque et web designer depuis 2015. Je dirige un studio de design avec mon mari Jeremy, et nous nous sommes attachés à aider les entreprises durables dans leur communication. J'ai travaillé avec de nombreuses marques et différents secteurs, des organisations caritatives aux universités en passant par des entreprises privées. Dans ce test, je vais vous expliquer comment tirer le meilleur parti d'Adobe XD en tant que designer et vous montrer comment travailler plus efficacement et créer des designs plus attrayants que vos clients adoreront. Nous allons commencer par aborder les bases d'Adobe XD, comme la configuration de tableaux artistiques et l'utilisation des différents Nous passons ensuite à des sujets plus approfondis tels que les styles, les états et les composants qui vous aident à créer des prototypes plus rapides et de meilleure qualité. Enfin, nous aborderons la collaboration et la manière de partager vos conceptions avec des partenaires, clients et des développeurs, à la fois pour les commentaires de co-création et pour le développement Nous aborderons également des plugins utiles et d'autres conseils professionnels qui vous aideront à aller encore plus loin dans Adobe XD. Ce cours s'adresse à tous ceux qui souhaitent se familiariser avec Adobe XD ou qui souhaitent simplement obtenir des conseils et astuces que vous avez peut-être manqués jusqu' à présent. J'espère que ce cours vous aidera à travailler avec plus de confiance dans Adobe XD et qu' il vous aidera à créer un processus de création efficace et agréable. J'ai hâte de voir ce que tu vas créer. Passons à la classe 2. Pourquoi créer des prototypes ?: Avant de commencer avec toutes les fonctionnalités exceptionnelles d'Adobe XD, je voulais simplement expliquer pourquoi je pense que c'est un outil formidable et pourquoi il est vraiment important de disposer d' un outil de prototypage lorsque vous concevez des sites Web Si vous concevez des sites Web et créez des designs en créant simplement des images que vous partagez avec vos clients. Cela peut devenir assez difficile lorsqu'il s'agit d'itérations de feedback Et nous voulons vraiment un processus dans lequel le client se sent vraiment enthousiaste et impliqué et participe à votre projet. C'est là que ces différents outils entrent en jeu. La première raison pour laquelle j' aime Adobe XD est qu'il fait partie du package Adobe. Si vous possédez déjà une licence pour Adobe, vous pourrez utiliser Adobe XD sans frais supplémentaires. Il fonctionne également avec tous les différents raccourcis et intégrations Et vous vous sentirez très familier avec l'interface, qui, je pense, peut vous aider à apprendre au début. La deuxième raison pour laquelle j' aime beaucoup Adobe XD est que nos clients et collaborateurs n'ont pas vraiment besoin d'un compte pour faire des choses comme commenter et télécharger des fichiers C'est très facile, car vous n'avez pas obstacle supplémentaire d'essayer d' expliquer pourquoi ils auraient besoin créer un compte pour quelque chose. Adobe XD vous permet également d'avoir des commentaires directement sur votre prototype. Et cela peut être un très bon moyen pour vous d'obtenir des commentaires portant sur des domaines spécifiques Il est donc beaucoup plus facile d'essayer déchiffrer ce que vous devez faire dans des domaines spécifiques plutôt que de recevoir un long e-mail contenant de nombreuses informations La création d'un prototype interactif est également un très bon moyen minimiser les frictions entre l'idée du client, votre conception et la mise en œuvre réelle de vos développeurs. Parce que tout le monde peut réellement voir comment cela fonctionnerait dans la pratique, au lieu de mettre des images ou des textes et de dire, eh bien, cela bougerait ou fonctionnerait de cette façon. C'est donc un moyen de vraiment bien combler ce fossé. Enfin, Adobe XD est un standard du secteur. Ce n'est pas le seul, mais c'est l'un des plus importants. Cela signifie que si, exemple, un autre créatif souhaite continuer à travailler sur votre projet, il sera très facile pour lui de s'y intégrer, car il est fort probable qu'il le connaisse continuer à travailler sur votre projet, il sera très facile pour lui de s'y intégrer déjà. Maintenant que nous savons pourquoi Adobe XD est un outil utile, voyons comment il fonctionne réellement. 3. Visite guidée dans Adobe Xd: Si c'est la première fois que vous utilisez Adobe XD, il peut être très utile de commencer à il peut être très utile de commencer à vous familiariser avec les différents panneaux et à la manière de configurer vos documents La première chose que vous devez faire lorsque vous créez un nouveau document est de créer un plan de travail. Les plans de travail peuvent avoir la largeur d'un appareil spécifique, comme un ordinateur de bureau standard ou un modèle de téléphone spécifique Vous pouvez également créer une taille personnalisée. Chaque projet peut comporter de nombreux plans de travail différents ou des tailles différentes. Je commence donc généralement par un seul format, ordinateur de bureau ou d'un téléphone. Ensuite, une fois que le design est prêt pour ce format, j'ajoute une deuxième taille pour chaque page afin de montrer comment le design fonctionne dans un format réactif. Utilisons maintenant un format de bureau et enregistrons-le dans le Cloud car cela nous permettra d' inviter des collaborateurs ultérieurement. Maintenant que nous avons terminé le document, vous verrez que vous pouvez vous déplacer dans votre plan de travail en saisissant les trois petits points situés en haut Pour agrandir ou diminuer la hauteur du plan de travail, il suffit de double-cliquer sur le plan de travail lui-même , puis de déplacer la ligne ici en bas Nous pouvons également modifier le nom du plan de travail. Cela nous aide à rester un peu plus organisés et le projet, une fois que nous aurons commencé à avoir beaucoup de pages différentes, vous aurez peut-être remarqué cette ligne. Cette ligne est très utile car elle nous montre où se trouve le point d'arrêt, ce qui signifie que tout ce qui se trouve au-dessus ce point sera visible sans défilement C'est très utile car nous voulons nous assurer que nous ajoutons toujours les informations clés au-dessus de la ligne de flottaison, tout en montrant clairement qu' il y a plus de choses à voir de manière à encourager les utilisateurs à faire défiler Si vous souhaitez ajouter un autre plan de travail, cliquez simplement sur cette petite icône qui ressemble à un carré sur la gauche Ensuite, vous recevrez des suggestions avec différentes tailles de plans de travail Vous avez peut-être remarqué que nous avons trois onglets haut indiquant « conception », «   prototypage » et « partage ». Lorsque nous créons nos designs, nous figurons toujours dans l'onglet Design. Mais lorsque nous voulons rendre le design interactif, nous voulons figurer dans l'onglet prototype. Vous pouvez y lier des boutons et d'autres éléments qui vous redirigeront vers une autre page lorsque vous cliquez. D'autres éléments interactifs, tels que la modification de l'état , par exemple, font partie de l'onglet Conception L'onglet prototype sera donc l'endroit où vous rendrez les éléments cliquables Nous examinerons cela de manière beaucoup plus approfondie plus tard dans le cours. L'onglet Partager vous permet de partager votre conception avec des clients, des développeurs et d'autres personnes à qui vous souhaitez confier la révision ou la mettre en œuvre. Mais il existe également un moyen de partager le fichier de conception à des fins de collaboration. Pour cela, vous avez un bouton en haut à droite. Vous verrez une petite personne avec une icône plus. Ici. Vous pouvez inviter quelqu'un par e-mail qui pourra ensuite modifier le document avec vous. C'est très utile si vous avez une équipe composée de plusieurs personnes et que vous pouvez même travailler sur le design en même temps Vient ensuite l' icône de partage. Nous avons en fait deux autres options utiles. Le premier est ce petit dossier. Ici. Il s'agit d'un type d' aperçu qui vous permet de connecter votre téléphone et consulter le prototype de conception via un appareil pour les prévisualiser Nous avons également ce petit bouton Play qui vous permet de prévisualiser le design directement sur votre bureau Revenons à l'onglet Design et regardons ce que nous pouvons trouver sur le panneau de gauche C'est une partie vraiment oubliée d'Adobe XD, mais elle contient de nombreux outils utiles. En haut, vous avez des formes de base, la possibilité d'ajouter du texte et l'outil de stylet qui fonctionne de manière très similaire à ce que nous avons dans Adobe Illustrator Pour les options du carré et du cercle. Ils sont assez limités par le triangle qui vous permet de définir le nombre de points. Si vous souhaitez avoir des bords arrondis. D'autres options vraiment intéressantes pour créer très facilement des arrière-plans et d'autres éléments de design. Si vous regardez en haut de la page, vous pouvez également voir l'outil Pathfinder d'Adobe XD, vous permet de joindre des formes Mais dans Adobe XD, cela m'a en fait mieux aidé. C'est parce que vous pouvez déplacer les formes indépendamment si vous double-cliquez sur les formes. Il n'est donc pas destructeur comme c' est le cas dans d'autres outils Adobe. Il existe également une option intéressante qui peut être très utile si vous créez un design avec des éléments répétitifs, comme une grille d'images par exemple. ne vous reste plus qu'à sélectionner la forme que vous souhaitez répéter. Cliquez sur la grille, puis retirez les bords pour créer d'autres éléments. Un peu plus bas, nous avons trois icônes. Et je vais parler de celui du milieu tout de suite parce que nous allons aborder les deux autres dans d'autres chapitres. Mais celui du milieu est essentiellement votre onglet de couches. Vous pouvez voir ici tous vos plans de travail. Et si vous utilisez un plan de travail, vous le verrez surligné dans l'espace de travail Cela peut être très utile si vous avez un très gros projet avec de nombreuses pages différentes. Maintenant que nous en savons un peu plus sur notre attente, revenons à l'onglet Design et examinons comment ajouter des textes et des images 4. Images et texte: Parfait. Commençons donc à travailler avec le texte et les images dans Adobe XD Vous pouvez ajouter du texte en cliquant sur la petite icône de texte et sur le panneau de gauche Ensuite, vous pouvez simplement cliquer et faire glisser pour obtenir la taille de manuel que vous souhaitez en termes de texte plupart de nos options se trouveront ici dans le panneau de droite La première chose que je veux vous montrer, ce sont les éléments de base par lesquels vous pouvez commencer, à savoir comment modifier votre police. Par exemple, vos tailles de police, votre espacement, crénage et l'espace entre les phrases, par exemple les différentes lignes Mais vous avez également de nombreuses autres options intéressantes, comme la façon de passer en majuscules et de styliser vos textes, etc. Je veux vraiment attirer votre attention sur ces trois petites boîtes ici. Parce qu'ils peuvent réellement déterminer manière dont vous travaillez avec du texte dans Adobe XD. Si nous regardons ici en ce moment, il est réglé sur cette zone de texte normale, ce qui signifie que le texte est limité à cette zone ici. Donc, si je devais, disons, copier tout ce texte, je continuerais à en ajouter d'autres. Vous verrez qu'il est là, mais quand je clique dessus , il est masqué. Il s'agirait donc de textes qui ne seraient pas visibles dans votre design à moins que vous n'étendiez réellement la boîte. Et cela peut poser quelques problèmes lorsque nous le concevons et le remettons à un développeur, car il se peut qu' pas compte de la présence du texte. Ils ne finissent donc pas par apparaître sur le site Web final du développeur. Ce que nous pouvons faire à la place, c'est opter pour cette option ici, qui signifie qu'elle s' adapte à la hauteur de vos textes. Donc, si vous continuez à ajouter du texte, la zone de texte continuera de s' agrandir dans votre option ici, vous avez la même chose, mais elle s' adapte à la largeur. Donc, avant, si nous continuions ajouter des choses et que nous le faisions de cette façon, cela n'ira pas plus loin. Mais si nous le changeons pour qu'il soit horizontal, nous pouvons également ajouter des éléments à la largeur. Génial. La prochaine chose dont vous allez parler concerne les éléments de base concernant les couleurs afin que vous puissiez définir le remplissage. Tu peux faire une bordure si tu veux. Et vous pouvez également travailler avec l'opacité de votre texte. Si tu veux. Vous pouvez également effectuer des opérations telles que des ombres intérieures, des ombres projetées ou des flous d'arrière-plan. Il peut également être bon savoir que vous pouvez réellement lier des éléments directement dans votre texte, dans votre prototype. Supposons, par exemple, que vous ayez des textes qui seront liés sur le site Web. Au lieu d'envoyer à votre développeur un lien vers ces différents éléments, vous pouvez simplement le lier ici et il saura exactement où le placer. Passons maintenant aux images. Lorsque nous ajoutons des images, il existe différentes manières de procéder. L'une des méthodes consiste à simplement faire glisser l'image dans votre plan de travail. Et il apparaîtra comme il est réellement. Et si vous le redimensionnez réellement, il conservera ses proportions. Mais comme vous le voyez, il est un peu difficile de commencer à le copier ou à le modifier autant. Donc, ce que je préfère faire, c'est créer un véritable conteneur pour cette image. Vous pouvez donc le faire en utilisant les formes. Disons, par exemple, une boîte. Ensuite, nous prenons l'image et nous la faisons glisser directement dans la zone, puis nous hériterons de ces propriétés Vous pouvez utiliser exactement le même nom si vous souhaitez utiliser une forme différente. Par exemple, si nous faisions cette forme de triangle, eh bien, nous la changerions en cinq coins. Ensuite, nous faisons exactement la même chose en y faisant glisser une image Une chose à noter ici est qu'Adobe XD prend généralement la forme d'un plan ou d'une bordure. C'est quelque chose que vous devriez peut-être regarder et décocher si vous ne voulez pas l'utiliser. Si vous cliquez sur l' image, vous verrez également ce petit cercle dans les coins, qui vous aideront à parcourir les coins de l'image si vous le souhaitez. Si vous souhaitez créer quelque chose qui ait une forme très différente, je vous suggère d'utiliser le stylet et de simplement l'utiliser pour tracer la zone que vous souhaitez placer dans le contenant de l'image. Ensuite, il vous suffit de faire exactement le même nom faisant glisser l'image dans cette forme Il existe quelques fonctions vraiment intéressantes que vous pouvez utiliser avec des images pour rendre votre prototype beaucoup plus interactif. La première chose à faire est de faire défiler la page. Supposons donc cette section où nous aimerions que quelqu' un puisse faire défiler la page pour voir cette image complète. Mais nous pouvons le faire, c'est sélectionner les images , puis monter dans cette petite zone ici. C'est ici que nous pouvons réellement créer ces différentes options de défilement Vous pouvez donc faire un défilement horizontal, un défilement vertical ou les deux. Supposons que nous voulions faire un défilement horizontal. Cliquez ici et nous pouvons voir qu' il marquera ces sections. Maintenant, si nous cliquons sur le bouton Play, nous pouvons faire défiler la page vers le bas et nous pouvons voir que nous sommes réellement en mesure de faire défiler l'image pour faire apparaître cette image qui trouvait auparavant en dehors du plan de travail. Une autre fonction intéressante peut être d' aligner le texte et les images les uns par rapport aux autres. Supposons que cette section soit un peu décalée et que je voulais m' assurer que toutes les images ayant la même hauteur puissent être retrouvées dans les outils d'alignement situés tout en haut. Et dans ce cas, nous choisirons de l'aligner vers le haut. Cliquez sur celui-ci, et il les alignera automatiquement les uns par rapport aux autres. Si vous avez une image presque parfaite, mais que vous aimeriez vraiment la retourner. Disons donc verticalement ou horizontalement. Vous pouvez simplement accéder à ces petites icônes ici et cliquer dessus pour les retourner verticalement ou horizontalement. La dernière chose que vous souhaitez partager avec vous dans ce chapitre est de savoir comment réparer quelque chose de manière à ce qu'il reste en position assise lorsque vous faites défiler la page. Et cela peut être utile pour des choses comme, disons, une navigation. Disons que dans ce cas, nous aimerions que la navigation soit permanente. Dans ce cas, nous souhaiterons peut-être créer cet arrière-plan pour nous assurer qu' il est visible sur différents arrière-plans. Ensuite, nous sélectionnons le menu lui-même. Nous pouvons tous les regrouper. Ensuite, il suffit de choisir une position fixe lors du défilement. Maintenant que nous cliquons sur le bouton Play, nous pouvons voir que l' algèbre défile, le menu sera fixe Et c'est quelque chose que vous pouvez faire de différentes manières pour jouer avec des images et du texte, par exemple, pour des fonctionnalités de blog ou d'autres éléments que vous souhaitez mettre en valeur 5. Styles: Lorsque nous créons des sites Web, nous voulons que tous les différents éléments soient cohérents sur les différentes pages. exemple, vous pouvez avoir une taille de police pour chaque titre une pour les titres H2 et une pour le corps du texte, par exemple Vous pouvez même avoir une police différente pour les témoignages. Alors, comment pouvons-nous nous assurer que c'est vraiment cohérent sans avoir à modifier tous les différents actifs individuels ? Si quelque chose change, c'est là que les styles entrent en jeu. Les styles vous aident essentiellement à créer des règles afin que nous sachions que tout ce qui possède style sera formaté de la même manière Supposons, par exemple, que votre client revienne et souhaite mettre à jour la couleur des boutons, alors vous n'avez pas à mettre à jour manuellement chaque bouton. Vous pouvez simplement mettre à jour les styles. Pour créer vos styles, il vous suffit donc de sélectionner le texte ou la couleur qui vous intéresse. Ensuite, vous accédez à l'onglet de votre bibliothèque sur le côté gauche. Ensuite, il ne nous reste plus qu'à cliquer sur le petit Plus pour créer un style de personnage. Cela nommera automatiquement le nom et la taille de la police. Mais vous pouvez également le renommer en double-cliquant et en disant, par exemple, Titres, âge De cette façon, vous pouvez tout suivre au cas où vous en auriez, disons, différentes de la même police mais de tailles différentes. Si vous voulez faire de même pour les couleurs, il vous suffit de sélectionner le bloc de couleur, aller dans les couleurs et de cliquer sur le signe plus. Et nous allons faire exactement la même chose ici. Nous pouvons appeler cela pied de page et arrière-plan, par exemple. Maintenant, si j'accédais à ce bloc de couleurs et que je cliquais sur mes couleurs dans mes styles. Vous pouvez voir qu'il le change en cette couleur. Exactement la même chose pour le texte. Si nous choisissons un texte qui n'est pas le titre et que nous cliquons sur le titre ici. Vous verrez que cela le changera automatiquement. Cela s'ajoute à tous les styles différents que vous avez ici. Mais si vous changez d'avis, vous pouvez toujours le changer sans réellement mettre à jour les styles ici. Voyons comment cela fonctionne dans la pratique. Supposons, par exemple, que nous produisions tous ces titres différents, cette année. Maintenant, si je veux changer cela, je vais devoir le faire en tant que market, je vais devoir le faire en tant que market, cliquer avec le bouton droit de la souris et modifier. Maintenant, je peux le modifier pour l'agrandir, disons at pour que nous puissions le voir et vous verrez que toutes ces différentes instances ont toutes été mises à jour. Vous pouvez également faire des choses comme mettre à jour la couleur et d'autres propriétés de celle-ci. Vous pouvez également voir que si vous cliquez avec le bouton droit, vous pouvez le surligner sur Canvas. Cela vous montrera tous les différents endroits où ce style est appliqué. 6. Composants: Tout comme pour les styles, les composants vous aident à définir des règles afin que la conception puisse être répétée sans que vous ayez à modifier les choses manuellement. Mais avec les composants, nous allons bien au-delà des polices et des couleurs. Ici, vous pouvez créer ensemble un ensemble d' éléments différents qui ne forment qu'un seul composant. Dans le cas des composants, des sections entières peuvent être des éléments récurrents. Mais grâce à cette fonctionnalité très intelligente appelée overrides, nous pouvons toujours personnaliser des actifs individuels sans avoir à modifier le fichier principal pour créer de nouveaux composants Ou vous devez sélectionner les différents éléments auxquels vous aimeriez faire partie. Donc, dans ce cas, nous allons avoir ce graphique des types d'ouverture. Et je vais simplement les regrouper pour des raisons de simplicité. Ce que nous allons faire maintenant, c'est cliquer sur le petit composant plus ici. Vous pouvez également cliquer avec le bouton droit de la souris et cliquer sur Créer des composants. Ou tu pourrais jouer au hockey avec K. Créons cet élément. Vous verrez maintenant qu'il est entouré petite bordure verte avec ce petit diamant. Cela signifie maintenant que ce sont les composants principaux. Et si vous voyez ici sur le côté, verrez « composant » et « principal ». Et cela signifie que c'est le maître. C'est donc un moyen très simple de le faire. Désormais, toutes les modifications que nous apportons à celui-ci s'appliqueront à toutes les autres. Supposons, par exemple, que nous voulions avoir exactement ces composants ailleurs. Disons dans le pied de page par exemple. Débarrassons-nous donc de celui-ci et ajoutons-le. Nous pouvons donc simplement cliquer ici. Nous pouvons renommer cette ouverture, heures d'ouverture. Et nous pouvons simplement cliquer dessus et le faire glisser ici pour l'avoir à cet endroit. Maintenant, toutes les modifications que nous apportons au master vont également être renseignées sur celui-ci. Parfois, il peut être un peu difficile de savoir où se trouve le maître lorsque de nombreux plans de travail sont Ce que vous pouvez faire, c'est cliquer ici avec le bouton droit de la souris et simplement le surligner sur Canvas qui vous indiquera où cela se trouve. Donc, dans ce cas, il le mettra en évidence ici. Mais si vous cliquez sur celui-ci ici, vous pouvez simplement cliquer sur Modifier les composants principaux. Et cela vous mènera au MainComponent. C'est donc un excellent moyen de naviguer si vous êtes un peu plus complexe. Disons ici que nous allons réellement changer la couleur de ce titre. Par exemple, je double-clique ici. Je vais le changer pour une couleur différente afin que nous puissions être très clairs sur ce que nous faisons. Faisons en sorte qu'il soit vraiment vert vif pour que nous puissions voir ce qui se passe. Maintenant, si vous faites défiler la page jusqu'à nos autres instances, nous verrons que la couleur a également changé ici. Si nous cliquons sur celui-ci, vous le verrez avant qu'il ne soit dit principal. Et ici, il est écrit instance, parce que celui-ci n'est pas le composant principal, cela signifie que nous pouvons réellement effectuer des remplacements Qu'est-ce que cela signifie ? Donc, en gros, si vous apportez des modifications à des instances réelles, vous pouvez le faire indépendamment du maître, et cela ne s'appliquera qu' à cette seule instance. Il s'agit de choses stylistiques. Disons que nous voulons le rendre un peu plus grand. Nous pouvons voir les données, qui n'ont pas été affectées ici. Il en va de même si nous changeons de couleur ou faisons autre chose. Disons que pour celle-ci, j'aimerais en fait la changer pour une police différente. Nous pouvons le faire et nous pouvons constater que cela n'a pas changé. Celui qui est le maître. C'est ce que l'on appelle les remplacements, et cela facilite grandement les si nous voulons modifier quoi bien, c'est qu'il héritera toujours tous les personnages que nous n' avons pas ajustés Supposons, par exemple, que dans ce cas, nous ayons modifié le titre ici. Nous avons donc changé la police et hauteur des cases, mais nous n'avons pas changé la couleur de l'arrière-plan. Allons-y donc et changeons la couleur du master. Vous pouvez voir comment les éléments que nous n'avons pas réellement modifiés seront toujours liés au master lui-même. Vous pouvez maintenant voir que nous l'avons toujours fait en gris parce que ce style particulier n'a pas été remplacé dans ce cas toujours fait en gris parce que ce style particulier n'a pas été remplacé dans ce 7. Travailler avec des États: Pour rendre votre design beaucoup plus réaliste, nous pouvons ajouter des états de survol directement dans votre prototype Il peut s'agir d'un changement très simple, comme, par exemple, changer la couleur d'un bouton lorsque vous le survolez Ou des modifications plus complexes. Il existe donc deux états différents avec lesquels nous pouvons travailler. Nous avons l'état de survol et l'état de bascule. Et le premier que je veux vous montrer est l'état de survol. Nous voulons donc nous assurer que ce bouton se transforme en contour au lieu d'un fond plein. Voyons donc que ce n'était pas tout à fait le premier. Comme vous pouvez le voir, ce bouton est un composant, donc tout ce à quoi vous souhaitez ajouter un état T2 doit d'abord être un composant. Ce que vous pouvez voir, c'est que adhere possède un état par défaut et un état de survol Alors recommençons à zéro pour que je puisse vous montrer comment cela fonctionne. C'est donc un composant. Ce que nous allons faire, c'est cliquer sur ce petit plus et choisir l'état du survol Tout ce que nous faisons à l'état de survol sera visible lorsque vous survolez le bouton Et tout ce qui se trouve dans l'état par défaut correspond à ce que vous verrez avant de survoler la souris. Nous voulons nous assurer que nous sommes en état de survol. Ensuite, je vais descendre et je vais m' assurer de double-cliquer sur le remplissage. Je veux m' assurer de décocher cette case et de choisir la bordure à la place Je vais choisir cette couleur vert foncé. Je vais l'augmenter d'environ deux autres. Ensuite, je vais double-cliquer sur le texte, faire défiler vers le bas jusqu'au fond, utiliser à nouveau la pipette et choisir la même couleur verte Nous pouvons maintenant voir que le bouton a l' apparence que nous voulons utiliser avec la touche de tabulation lorsque vous passez la souris Et si nous cliquons sur l'ensemble du composant maintenant et nous cliquons sur l'état par défaut, nous pouvons voir le signe que nous voulons qu'il ait. Avant de survoler. Vous pouvez passer de l'une à l'autre pour vous assurer que votre design s'affiche comme vous le souhaitez Allons voir un aperçu et voyons si nous obtenons cet effet. Oui, donc ça fonctionne parfaitement. Alors maintenant, je veux vous montrer l'état de basculement. L'état de bascule est donc idéal lorsque vous souhaitez qu' une action se produise, lorsque vous cliquez, par exemple, lorsque vous avez une bascule classique et que vous souhaitez qu'elle se déplace de gauche à droite Mais dans ce cas, j' aimerais que les gens puissent voter pour l' événement qu' ils devraient organiser en août en cliquant sur le petit cœur des différents cours qu'ils souhaitent voir. Ce que je veux, c'est que lorsque quelqu'un clique sur ce cœur, il passe d'un contour noir à un fond rouge. Donc je vais cliquer sur un nouvel état à bascule Je vais m'assurer que je suis sur Toggle States. Lorsque vous prenez la bordure, cliquez sur le fond et choisissez une belle couleur rouge. Alors maintenant, si vous cliquez sur ce petit cœur, vous pouvez voir qu'il devient rouge. Cela fonctionne donc exactement comme nous le souhaiterions également. Étant donné que les composants fonctionnent de la même manière. Supposons maintenant que vous vouliez passer d'un cœur rouge à un cœur vert parce que ce cœur rouge à un cœur vert n'est pas un jardin urbain. Assurez-vous à nouveau que vous êtes bien sur le bouton « État à bascule ». Changez de couleur et choisissez une belle couleur verte. Maintenant, si nous vérifions à nouveau, nous pouvons voir que l'aspirine en cliquant sur les autres, devient également verte. Et cela a également l' effet inverse, ce qui est formidable. Vous pouvez donc faire des allers-retours entre vos différents états. 8. Ajouter une vidéo: L'ajout de vidéos directement dans votre prototype le rendra beaucoup plus interactif et beaucoup plus vivant. C'est quelque chose que vous n' aviez pas l'habitude de faire dans Adobe XD. C'est donc très excitant que tu sois capable de le faire. Maintenant, disons, par exemple, que nous aimerions ajouter un arrière-plan vidéo à cette section pour créer un peu plus d' engagement sur le site, ce que vous devez faire est simplement créer une sorte de cadre de délimitation. Je viens donc de créer un carré ici. pouvons en fait accéder à notre onglet Layers Nous pouvons en fait accéder à notre onglet Layers pour voir ce que nous faisons. Nous allons simplement nous assurer que les onglets de nos couches sont ouverts , puis nous pouvons cliquer sur ce carré ici pour voir ce que nous faisons. Ensuite, il ne vous reste plus qu'à cliquer et à faire glisser votre vidéo dans ce cadre de sélection. Et au départ, rien ne se passe lorsque vous le prévisualisez car il ne se met en marche que lorsque vous cliquez dessus. Et ce n'est pas ce que nous voulons. Nous aimerions que ce soit en mode automatique. Eh bien, au moins dans ce cas, ce que nous allons faire, c'est revenir en arrière et examiner les paramètres de cette vidéo. autre chose qu'il est bon de retenir c'est que votre vidéo doit être pour le moment d' une taille maximale de 25 Mo. Donc, s'il est plus grand que cela, vous devrez peut-être l'exporter à une résolution inférieure. Donc, si nous double-cliquons dessus et que nous double-cliquons à nouveau, vous pouvez voir maintenant que nous sommes dans le rectangle du groupe de masse où se trouve notre souris, puis nous avons la vidéo sur l'arrosage des jardins urbains Nous avons donc maintenant toutes ces différentes options. Donc, si nous cliquons ici, nous pouvons voir que c'est en ce moment que vous jouez en haut de la page. Mais tu aurais aussi pu jouer automatiquement, et c'est ce que j'aimerais. Ensuite, nous pouvons également cliquer sur cette petite icône ici où nous avons réellement la personnalisation. La première chose à faire est de regarder votre vidéo en cliquant sur ce petit bouton Play. Et vous pouvez également le désactiver. S'il y a du son. Dans ce cas, ce n'est pas le cas, mais vous pouvez toujours le faire si vous voulez simplement vous assurer de pouvoir également le découper. Donc, si vous souhaitez le couper, disons qu'il soit un peu plus court. C'est très bien Vous pouvez simplement l' approuver. Ensuite, vous pouvez également faire quelque chose que j'aime toujours faire, savoir la lecture en boucle Voyons quel est le résultat maintenant. Maintenant, nous avons dit que c'est une lecture automatique et une boucle. Allons-y et prévisualisons notre design. Nous pouvons voir qu'il se lance automatiquement. Et si nous attendons un peu, nous verrons également que cela va tourner en boucle. C'est donc tout ce que nous devons savoir pour simplement ajouter une simple vidéo à notre fichier XD 9. Plugins: Adobe XD offre une grande flexibilité, mais vous pouvez parfois faire certaines choses uniquement avec l'application elle-même. C'est là que les plugins entrent en jeu. Même si Adobe XD peut faire tellement de choses différentes. Il existe un tas de plugins qui nous simplifient la vie au quotidien. Je voulais donc vous montrer quelques-unes de mes préférées. Voyons d'abord comment nous pouvons réellement installer des plugins. Les plugins se trouvent donc dans l'onglet lent tout en bas. Mais si nous n'avons jamais installé de plugins auparavant, nous allons n'avons jamais installé de plugins auparavant simplement cliquer sur ce plus. Une fois que vous êtes ici, vous pouvez rechercher différents plugins, ou vous pouvez simplement naviguer pour voir si vous trouvez quelque chose qui correspond exactement à ce que vous souhaitez. Vous pouvez simplement cliquer sur le bouton Obtenir et cela le téléchargera automatiquement sur votre Adobe XD une fois qu'il sera installé Je voulais juste vous montrer ceux qui sont mes préférés. Donc, le premier que je vais vous montrer s'appelle Colour In SPO. Et si je l'aime bien, ce n' est pas seulement parce que vous avez des choses comme palettes de couleurs où vous pouvez réellement explorer différentes palettes de couleurs, ce qui est très utile lorsque vous créez quelque chose de nouveau. Mais ma fonctionnalité préférée est le correcteur de contraste. Donc, si vous avez suivi l'une de mes autres œuvres ou ma chaîne YouTube, vous savez que je suis très heureuse assurer que les designs soient accessibles. Supposons, par exemple, que nous aimerions vérifier si le texte que nous avons ici sur ce fond coloré sera visible et accessible. Eh bien, nous pouvons le faire en copiant simplement le code couleur ici. C'est ce que je vais faire. Ensuite, je vais choisir mon texte, vais le sélectionner ici. Et je vais juste coller ceci pour la couleur d'arrière-plan et il apparaîtra ici nous puissions voir à quoi cela ressemble. Ensuite, nous verrons également le ratio et nous verrons s'il passe. Supposons, par exemple, que nous la remplacions par une autre couleur. Disons que nous le changerions en quelque chose de beaucoup plus sombre. Vous voyez, peut-être ça, puis nous augmentons un peu l'opacité pour nous rapprocher beaucoup plus de cette couleur vert foncé Alors allons-y, copions ce remplissage maintenant et collez-le dedans. Au lieu de cela. Choisissez notre couverture. Nous y choisissons donc notre couleur. Maintenant, nous le collons. Vous verrez maintenant que toutes ces différentes vérifications échoueront car leur contraste est très faible. Il devient donc très difficile pour quelqu'un de lire. C'est très important pour tous les sites Web car nous voulons nous assurer que tout est inclusif Mais bien sûr, c'est particulièrement important si vous travaillez avec, par exemple, un site Web destiné aux personnes âgées ou aux personnes présentant différentes formes de déficience visuelle. Le prochain plugin que je veux vous montrer s'appelle Lorem Ipsum, qui est très simple parce que je ne sais pas pour vous, mais quand je crée quelque chose , cela me prend beaucoup trop de temps pour aller sur mais quand je crée quelque chose , cela me prend beaucoup trop de temps pour un site web, financer Laura ou taper mon propre texte Donc, si nous voulons du Lorem, nous pouvons simplement créer une forme dans laquelle nous aimerions qu'elle soit remplie Ensuite, nous pouvons le remplir avec du texte de substitution. Il existe de nombreuses options différentes, mais la première vous permet de choisir, par exemple, si vous souhaitez une autre langue. Je vais donc m'en tenir à la version anglaise. Vous pouvez choisir si vous souhaitez qu'il s'agisse d'un point, d'un point, point ou d'un point à la fin ou simplement rien. Je vais choisir la période parce que j' aimerais avoir un point final. Ensuite, nous allons simplement insérer du texte. C'est vraiment petit ? Donc, tout ce que je vais faire maintenant, c'est pouvoir le personnaliser. Je suis en fait capable de le modifier selon mon formatage actuel, ce qui est très bien. Nous pouvons donc simplement y aller et y aller comme ça. Et tout d'un coup, nous sommes en mesure d'intégrer un très beau lorem à notre design Le plugin suivant, qui est très utile, s'appelle Quick Mock-up Et celui-ci contient tellement de choses différentes en un. La première que je voulais vous montrer est que si nous commençons par l'onglet Éléments, c'est là que vous trouverez toutes vos superbes petites icônes, toutes vos petites étiquettes. Et j'ai aimé le fait que celui-ci ne contienne pas seulement des icônes, mais aussi des éléments tels qu'une bascule par exemple Disons que nous aimerions utiliser celui-ci. Une fois que nous l'avons intégré, nous sommes en mesure de le personnaliser dans XD. Disons que nous aimerions changer de couleur. Tout ce que nous avons à faire est de double-cliquer et toutes les propriétés seront modifiables ici Nous sommes en fait en mesure de les changer en, disons, une couleur verte Tout cela est donc visible dans XD, ce qui facilite grandement les choses. Une autre chose que j'adore, c'est quand vous créez wireframes et que vous les placez simplement comme un espace réservé Ainsi, au lieu d'essayer de faire ressembler quelque chose à une image, le client comprendra qu'il va surpasser une image. Vous pouvez simplement utiliser un graphique comme celui-ci, par exemple. Vous avez également des actifs. C'est donc un peu plus complexe. illustrations à titre d'exemples, ou des photographies, ou même des graphiques et des tableaux. Ils sont donc très utiles lorsque vous créez un design un peu plus complexe. Tout ce que nous avons à faire, c'est de regarder les chiffres, par exemple, ou les mesures concrètes. Et ceci est lié aux sites Web humains que vous avez peut-être déjà vus. Et j'ai vraiment aimé ça. Ils contiennent également de nombreuses illustrations plus inclusives que nous pouvons utiliser. De nombreuses options différentes. Et vous pouvez également en faire plus, comme des scènes et d'autres options. Lorsque vous entrez dans une maquette rapide pour la première fois, vous pourrez choisir un thème C'est très utile si, disons que vous créez un thème sombre et que vous voulez vraiment que nous travaillions sur ce thème en particulier, pouvez toujours revenir en arrière et choisir un thème différent Et vous allez trouver tous vos différents acides ici. La prochaine que je veux vous montrer s'appelle globular et convient parfaitement parce que j'ai récemment réalisé un projet dans parfaitement parce que j'ai récemment réalisé lequel nous avions beaucoup de formes organiques C'est pourquoi j'y ai pensé pour ce tutoriel. En gros, quand vous le souhaitez, comme une forme d'arrière-plan ou toute autre forme que vous aimeriez voir prendre une forme organique. Vous pouvez accéder à ce plugin et vous pourrez l'ajuster pour qu'au fur et à mesure que vous le modifiez, la complexité soit plus arrondie, moins d'arêtes différentes. Et au fur et à mesure que vous y arriverez, cela aura de plus en plus de facettes différentes. Vous pouvez également faire de l'unicité. Il y aura donc encore une fois plus de blobby sur le côté gauche. Et si vous l'augmentez, il deviendra beaucoup plus angulaire et aura des formes différentes. Vous pouvez jouer avec cela et créer des blobs uniques. Et lorsque vous en êtes satisfait, il vous suffit de cliquer sur ces petites taches. Vous pouvez le créer, cliquer sur blob, puis tout ce que vous avez à faire est de le trouver, ce qui revient généralement à le lire à l'extérieur de votre plan de Parfois, il suffit de faire un petit zoom arrière. Encore une fois, comme les autres. Celui-ci est entièrement modifiable ici. Vous pouvez donc y aller et disons que je laisse tomber les couleurs. Supposons donc que nous aimerions utiliser cette couleur de fond que nous avons. C'est vraiment sympa. Maintenant, nous sommes en mesure de le placer ici, de le mettre de côté et d'y ajouter un petit élément de design. Je pense donc que c'est très utile lorsque vous souhaitez créer un peu plus de couches pour votre design. La dernière que je veux montrer s'appelle anima. Et celui-ci est très utile lorsque vous créez certaines animations et que vous souhaitez également les exporter vers du code pour le prototypage sous forme de site Web en Ce que vous pouvez faire, c'est créer différentes choses que vous ne pouviez pas faire auparavant dans Adobe XD, mais récemment grâce à ce que nous avons résolu, par exemple avec les états et les composants, que vous pouvez que vous ne pouviez pas faire auparavant dans Adobe XD, mais récemment grâce à ce que nous avons résolu, par exemple avec les états et les composants, réellement faire maintenant. Certains d'entre eux ne sont donc plus aussi utiles qu'ils l'étaient auparavant. Ce qui est vraiment utile, c'est la fonction get code. Vous pouvez en fait télécharger code HTML complet du design que vous avez créé afin de l'envoyer à un développeur ou de l'utiliser vous-même. C'est une fonctionnalité très pratique si vous voulez quelque chose qui soit super rapide et qui facilite un peu la vie de votre développeur. Je recommande vivement d'aller la section des plugins et de parcourir un peu car vous y trouverez probablement quelque chose de vraiment utile pour vos projets. Alors allez y jeter un coup d'œil 10. Utiliser l'onglet prototype: Maintenant que nous avons un design avec plusieurs plans de travail différents, nous sommes satisfaits des différents outils de base Nous voulons commencer à connecter ces différents plans de travail à l'aide de l'outil de prototypage Passons donc à l'onglet Prototypage. Nous allons maintenant vous aider dans l'onglet Prototype et nous allons examiner différentes choses qui sont possibles avec la fonctionnalité de prototypage Et c'est vraiment super excitant. Donc, en gros, l'onglet Prototypage ressemblera beaucoup à l'onglet Conception. Et si vous sélectionnez un tableau d'art ou si vous sélectionnez, disons, un élément différent, vous pouvez créer un lien entre celui-ci et un autre tableau d'art. C'est ainsi que nous créons différentes traductions et plan de travail à un autre lorsque passons d'un plan de travail à un autre lorsque, par exemple, vous cliquez sur un bouton Supposons, par exemple, que je souhaite que ce bouton de contact nous amène à notre page de contact. Tout ce que j'ai à faire est de sélectionner le bouton, puis de tirer cette petite flèche bleue jusqu'au tableau d'art que le graphique souhaite voir apparaître. Nous pouvons maintenant voir que sur le côté droit, nous avons quelques options différentes avec lesquelles nous pouvons jouer La première chose que nous pouvons faire est d'examiner le déclencheur. Dans ce cas, j'aimerais qu'il s'agisse d'un clic, car je voudrais que quelqu'un clique sur le bouton puis accède à la page de contact. Nous pouvons ensuite voir comment nous aimerions que cela se produise. Plus tard, nous examinerons l'animation automatique. Mais pour l'instant, nous allons simplement opter pour la transition parce que nous aimerions passer d'une position à une autre. Nous voulons nous assurer que la destination est correcte. Et nous pouvons voir si nous aimerions avoir une animation. Allons donc voir à quoi cela ressemble lorsque nous l'avons prévisualisé. Alors maintenant, si nous cliquons sur le bouton Contact, nous accédons directement à la page de contact, qui est exactement ce que nous aimerions. C'est donc très simple. Mais, par exemple, si nous voulons créer des animations. Donc ce que je vais faire, c'est vous montrer que si nous dupliquons ce tableau d'art, nous reviendrons au design. J'aimerais que certaines choses se produisent lorsque vous arrivez sur la page de contact. La première chose que j'aimerais faire, c'est que cette petite boîte soit dévoilée. Je vais donc le choisir, puis je vais le faire glisser directement que nous puissions en voir un petit bout comme ça. Alors je vais le modifier. J'aimerais donc que cette image se déplace réellement vers le bas. J'aimerais donc que nous puissions voir beaucoup plus de personnes sur la photo. Ensuite, j'aimerais que le texte soit beaucoup plus petit afin que nous puissions réellement mieux voir les gens cette mise en page différente. Mettons 63, par exemple, modifiez légèrement le texte pour qu'il apparaisse un peu mieux dans la mise en page Nous pouvons maintenant comparer les deux et nous aimerions passer de ce vert à ce vert. Il ne vous reste plus qu'à revenir au prototype. Nous cliquons sur l'ensemble du tableau d'art, donc le nom ici. Ensuite, nous allons le ramener à la destination suivante, qui est la destination finale. Maintenant, nous allons plutôt choisir l'heure, qui est une option que nous avons lorsque nous avons un tableau d'art complet. Je vais le situer dans un laps de temps très court en dehors de 0,4 s. Ensuite, nous allons choisir s. Ensuite, nous allons choisir l'animation automatique parce que nous aimerions qu'elle s'anime Nous pouvons avoir quelque chose comme Ease Out, qui est une option vraiment agréable et fluide. Nous pouvons également en avoir d' autres, comme Snap. Mais je vais m'en tenir à celui-ci. Je vais le mettre à 3 s juste pour qu'il dure un peu. Nous le faisons donc très rapidement. Nous pouvons mettre 1 s si nous voulons que ce soit vraiment long, mettre plus longtemps pour pouvoir expérimenter. Voyons maintenant ce qui se passe lorsque nous allons jouer. C'est incroyable que l'animation se produise. Les textes se sont donc agrandis , l'image s'est déplacée vers le bas et un peu les heures d'ouverture sont apparues. Alors maintenant, la dernière chose que je veux vous montrer est une superposition. C'est très pratique pour les choses que vous voulez faire apparaître. Par exemple, comme une newsletter ou disons un clavier. Dans ce cas, j' aimerais créer une newsletter. Et ce que nous allons faire, c' est créer un nouveau tableau artistique. Elle peut être de n'importe quelle taille, tant qu'elle convient à notre fenêtre contextuelle, je vais renommer cette newsletter Génial. Ce que je vais faire maintenant, c'est simplement créer le design de cette fenêtre contextuelle. Je vais choisir une couleur de fond pour cela afin voir sur quoi je travaille réellement. J'aimerais que ce dessin ait une bordure simplement parce que je ne sais pas sur quel arrière-plan cela va apparaître à chaque fois. Je vais donc choisir cette bordure comme couleur verte et ajouter quelques tailles plus grandes pour le contour. Super, alors maintenant je vais juste regrouper tout cela. La prochaine chose que nous voulons faire est de nous assurer que notre tableau d'art a essentiellement la taille de l'objet que nous aimerions superposer Il n'est donc pas nécessaire que ce soit exact, mais je veux m'en rapprocher. Génial. Maintenant, nous avons une fenêtre contextuelle de newsletter ici et nous pouvons la réutiliser à tout moment où nous aimerions qu'elle apparaisse. Ensuite, je vais passer au prototype. J'aimerais donc que cette fenêtre contextuelle apparaisse dans le lien de la newsletter . Je vais donc simplement cliquer et faire glisser le pointeur ici. Nous allons faire en sorte que le déclencheur soit un clic. Et nous allons choisir Overlay. Nous allons nous assurer que la destination est correcte. Et je ne pense pas que j' aimerais des animations pour cela. Voyons maintenant ce qui se passe. Choisissons celui-ci et ensuite allons jouer. Donc, si nous allons ici, nous cliquons sur newsletter. Nous pouvons maintenant voir que cette fenêtre contextuelle s'affiche à l'écran. J'ai beaucoup aimé le fait qu'il soit réellement transparent comme arrière-plan. Il ne montre que ce que nous aimerions qu'il montre. Si nous cliquons quelque part en dehors de celui-ci, il disparaîtra. Ce sont donc des interactions très utiles que vous pouvez utiliser pour votre prototypage 11. Obtenir des commentaires: Incroyable Maintenant que votre design est prêt et que vous souhaitez le partager avec vos clients, c' est là que nous nous dirigeons vers l'onglet Partager. Pour partager votre design. Il vous suffit de cliquer sur l'onglet Partager. Ensuite, nous allons examiner ces différentes options ici. Nous avons donc plusieurs options pour partager réellement notre design. Dans ce cas, lorsque nous voulons obtenir commentaires de nos clients, nous allons nous en tenir à celui-ci appelé Design Review. Et nous pouvons choisir ici. Donc soit uniquement les personnes invitées, ce qui signifie que nous devons ajouter leur adresse e-mail. Toute personne disposant d'un mot de passe, c' est-à-dire d'un mot de passe Brocade, ou toute personne disposant du lien celui que vous choisirez dépend donc vraiment de la configuration du projet. Supposons que vous travailliez en tête-à-tête avec une personne et que vous souhaitez que seule cette personne y ait accès Et vous voulez vous assurer que les autres membres de l' équipe ne peuvent pas y accéder. Vous pouvez choisir le seul invité ou l'axe avec un mot de passe. Mais voyons ce qui se passe lorsque nous travaillons avec une équipe pour la plupart nos projets de nos projets. Nous pouvons donc l'envoyer à un client, puis partager avec son rédacteur pour vérifier tout, peut-être avec son responsable marketing pour s' assurer que tout est Ils veulent donc être en mesure transmettre cela à quelqu'un d'autre. J'ai donc tendance à choisir n'importe qui qui possède un lien, à moins qu'il n'y un risque élevé que quelque chose qui doit être très privé sorte. Je vais donc m'en tenir à ça, puis cliquer sur Créer un lien. Une fois ce lien créé, il ne nous reste plus qu'à cliquer sur cette petite icône ici et à copier le lien. Et c'est exactement ce que le client verra lorsqu'il cliquera sur le lien que vous lui envoyez dans un e-mail, par exemple. Ce que nous allons voir ici, c'est le plan de travail sur le côté gauche Ensuite, nous allons voir un champ commun sur la droite. Si nous avons différents plans de travail, comme c'est le cas ici, vous verrez également l'un des six plans de Et si, disons, vous avez lié ces différents éléments dans le menu ou différents éléments, ils seront cliquables Comme vous pouvez le voir ici, si nous cliquons sur ce bouton de contact, nous serons redirigés vers le site ici, qui est la page de contact. Vous pouvez également ces flèches pour parcourir les différentes pages. Il est très facile pour votre client de voir toutes les différentes pages que vous avez conçues. Ce qui est bien ici, c'est qu'ils peuvent commenter directement le design. Parce que souvent, lorsque nous recevons des commentaires de la part de clients, ils rédigent un long e-mail contenant de nombreux nœuds différents et vous essayez de déchiffrer quels commentaires s' appliquent aux différentes sections d' un site Web, voire à des pages Ainsi, lorsque vous avez de grands projets, c'est très utile. Ce que nous pouvons faire, c'est que notre client peut disposer cette fonction d'épingle et la placer dans n'importe quelle section pour laquelle ce commentaire se rapporte. Disons, par exemple, que nous le plaçons sur cette photo. Et ils feraient des commentaires. Par exemple, pourrions-nous plutôt avoir une photo d'une centrale thermique ? Ils ont été soumis, puis vous pouvez accéder et répondre directement. Vous pouvez donc cliquer sur Répondre ici. Il est ainsi très facile d'avoir des discussions sur les différents commentaires et réactions sans avoir à répondre à un appel ou à essayer d'avoir des échanges par e-mail J'ai donc beaucoup aimé cette fonctionnalité. Donc, si nous revenons à notre fichier XD actuel, disons que nous commençons maintenant à implémenter certains de ces commentaires. Nous ne voulons peut-être pas vraiment que notre client voie en direct ce que nous faisons. Et c'est là qu'intervient cette fonctionnalité de lien de mise à jour. Adobe XD affichera uniquement les nouveautés apportées à la conception si vous cliquez sur le lien Mettre à jour. Ainsi, vous n'avez jamais à vous inquiéter votre client accéder au lien et voir la moitié des choses progresser, car il ne sera mis à jour que si vous cliquez sur Mettre à jour le lien. Ensuite, voyons comment travailler avec un développeur 12. Partager avec un développeur: OK, super. Votre client a donc approuvé votre design et il est temps pour vous de le partager avec votre développeur. C'est là que nous retournons dans cet onglet de partage, mais nous passons plutôt au développement. Ces options permettent à notre développeur d'accéder très facilement à tous les codes couleur, tailles de police et styles que vous avez définis. Mais ils peuvent également télécharger toutes les différentes ressources que vous avez créées directement à partir du prototype. Nous sommes donc de retour dans l'onglet Partager. Nous voulons maintenant partager cela avec notre développeur car notre client a tout approuvé et nous sommes prêts à commencer à créer. Ce que nous allons faire, c'est passer de révision de la conception au développement. Et ici, nous pouvons également choisir d'exporter pour le Web. Et c'est très important car nous voulons nous assurer que tous les actifs que nous avons marqués pour exportation pourront être téléchargés directement par notre développeur. Mais pour ce faire, nous devons en fait les configurer comme prêts à être exportés. Nous allons donc le faire en retournant à l'onglet Design et en cliquant sur l'un des actifs. Imaginons cette image par exemple. Tout ce que vous avez à faire est de faire défiler la page jusqu'à cette petite section et de cliquer sur Marquer pour l'exportation. Revenons maintenant à notre onglet de partage. Nous verrons si cela est désormais disponible et il y aura un atout. Donc, si nous prenons cela, cela indiquera des actifs téléchargeables. Cette fonction permet à quelqu'un de télécharger directement les ressources. Ce que nous allons faire maintenant, c'est simplement cliquer sur le lien Mettre à jour pour y accéder à ces actifs et à tous nos nouveaux paramètres. Nous pouvons constater que même si nous avons mis à jour le lien, les commentaires que nous avions précédemment sont toujours là, ce qui est très utile Mais maintenant, il existe en fait une autre fonction. Donc si nous allons dans ce petit onglet de développement sur la droite, nous verrons que nous avons une liste des actifs disponibles, les différentes couleurs, y compris les codes couleurs, ce qui est super utile. Nous avons également défini les différents styles de caractères que nous utilisons tout au long de cette page. Et nous avons également des interactions différentes. Des déclencheurs différents, des destinations différentes. Donc, tout le Xd est très utile pour quelqu'un qui développe le site. Si nous revenons aux ressources ci-dessus, ce que quelqu'un peut faire maintenant est de cliquer sur cette image ici, et nous pouvons réellement la télécharger. Cela téléchargera directement cette ressource. Si vous en avez beaucoup, ils peuvent tous les marquer puis les télécharger tous en même temps. Une fois que nous l'aurons ouvert, nous verrons que même s' il s'agit d'un actif créé et que XD créera deux fichiers téléchargés. Il crée toujours une à la fois la taille et une à deux fois la taille. Et c'est pour que votre développeur dispose d'options car vous voulez évidemment un fichier d'une qualité suffisante. Mais vous ne voulez pas qu'il ralentisse votre site ou qu'il consomme trop d'énergie pour le charger. Si vous souhaitez que différents éléments soient réellement distincts dans votre conception, conservez la mise en page exacte. Et vous voudriez qu' ils soient réellement exportés sous la forme d'une seule image. Il vous suffit de cliquer dessus et de les regrouper , puis de les marquer pour exportation ensemble. Ainsi, si nous revenons pour partager, mettez à jour notre lien. Et maintenant, nous pouvons voir que nous avons ici cet atout qui est un groupe. Ainsi, au fur et à mesure du téléchargement, il téléchargera en fait ces deux ressources regroupées en une seule image. Et c'est très utile lorsque vous essayez de contrôler la façon dont le design est composé Si vous vous trouvez dans une situation où vous ne voulez pas qu'ils soient, par exemple, qu'ils animent de manière indépendante ou qu'ils fassent autre chose. Parfois, nous avons juste besoin que les choses soient dans une position fixe. Et c'est vraiment une fonctionnalité géniale 13. Sites Web durables et inclusifs: Un sujet qui me tient particulièrement à cœur est celui la durabilité et de l'accessibilité des sites Web. Les sites Web étant purement numériques, beaucoup d'entre nous ne pensent pas l'empreinte environnementale, mais nous pouvons faire beaucoup pour avoir un véritable impact lorsque nous intégrons des éléments tels que du contenu vidéo, des animations, le défilement parallaxe Beaucoup de ces choses demandent beaucoup plus d'énergie que si nous avions une seule page statique. Par exemple, chaque fois que nous concevons un site Web, nous voulons toujours partir de zéro et n' ajouter des éléments que s'ils apportent quelque chose à l'expérience utilisateur réelle Et cela semble très important pour le parcours de l'utilisateur. Dans la mesure du possible, nous pouvons nous assurer que taille de nos fichiers est la plus petite possible. Au lieu de mettre en ligne une vidéo, nous pouvons utiliser un lien YouTube, par exemple Il existe donc de nombreuses façons de minimiser énergie réelle nécessaire au chargement cette page en termes d'accessibilité. Nous voulons aussi, bien sûr, réfléchir à des éléments tels que toutes les balises, le contraste des couleurs, polices et les tailles que nous utilisons afin que les personnes ayant des capacités et des expériences différentes sur le Web Même de petites choses, comme le fait de placer la description lorsque vous créez un formulaire en dehors du champ plutôt que comme espace réservé, signifient qu'une synthèse vocale peut réellement lire à une personne afin qu'elle comprenne ce qui Il y a beaucoup de choses différentes que nous pouvons apprendre. Je vous encourage donc vraiment à vous y intéresser. Et je pense qu'il existe également d'excellents cours sur Skillshare que vous pouvez découvrir Je vais également m' assurer de lier quelques outils et applications vraiment géniaux dans la description. Vous pouvez donc commencer à en apprendre davantage sur les sites Web durables et inclusifs 14. Astuces bonus: Avant de nous lancer dans le projet de classe, je voulais simplement partager quelques conseils et astuces qui m' ont aidé tout au long du processus. Ce que j'ai appris en tant que concepteur Web. La toute première consiste à définir des attentes très claires tout au long de vos projets. Chaque fois que vous travaillez sur un site Web ou sur de nombreuses pièces mobiles. Si nous y réfléchissons, tout projet doit d'abord avoir les objectifs que nous devons définir. Nous devons nous assurer que nous disposons tous les différents actifs qui peuvent être fournis par différentes personnes. Supposons que le site Web copie les images, les photos de la page à propos. peut donc s'agir tous ces différents actifs que nous devons prendre en compte. Et nous devons nous assurer que toutes les personnes impliquées, qui doivent fournir des actifs, savent exactement quand cela doit se produire, savent exactement comment fournir ces actifs, ce qu'ils sont censés être. Nous devons donc nous assurer que c'est très clair. C'est pourquoi j'aime toujours avoir un calendrier très clair , puis configurer un portail client où il est toujours affiché. Vous pouvez configurer votre portail client de différentes manières, notamment sur des sites tels que Trello, Asana, base camp, notion Milano Il y a tellement d'endroits différents que vous pouvez visiter. Vous pouvez donc également choisir un outil avec lequel vous avez déjà travaillé et que vous connaissez vraiment bien. L'un des moyens de s'assurer que le projet se déroule parfaitement est de rappeler à tout le monde l'étape suivante tout au long du projet. Supposons, par exemple, que nous ayons tenu réunion sur les objectifs du site Web et que nous sommes sur le point de passer aux wireframes Nous savons qu'après les maquettes, nous aurons besoin de tous les éléments, tels que les images et les textes , pour pouvoir passer de la maquette à la finition de la conception Nous ne voulons donc pas nous retrouver dans une situation où les wireframes sont terminés et où nous attendons tous les actifs Nous pouvons dire à nos clients ou aux personnes impliquées : «   Hé, nous en sommes au stade actuel, nous sommes sur le point de passer à des wireframes Si nous voulons que ces wireframes soient terminés, disons dans deux semaines, nous devons avoir tous les autres actifs prêts pour commencer à implémenter la conception Voici comment vous pouvez le faire. Peut-être que vous partagez un lien pour qu'ils puissent le télécharger, ou tout autre moyen qui, selon vous, serait le moyen le plus simple pour toutes les personnes impliquées. Une autre bonne chose à considérer est de savoir qui a le pouvoir de décision dans ce projet et qui est capable commenter et de proposer des idées. Ce que nous voulons donc nous assurer, c'est de ne pas nous retrouver dans une situation où, disons, 510 personnes différentes de accompagnement commentent et ont des idées différentes Mais qui n'ont peut-être pas toujours participé à toutes les réunions. Supposons que quelqu'un arrive à un stade où il n'a pas participé à la stratégie, mais qu'il voit maintenant le site Web terminé. À ce stade. Nous ne cherchons pas vraiment à obtenir des commentaires sur la structure du site Web. Il se peut que nous recherchions simplement petits commentaires sur des choses que nous avons corrigées en cours de route. Nous voulons nous assurer de savoir qui détient un certain pouvoir et de nous assurer qu'ils émettent le bon type de feedback à chaque étape du processus. Tout cela revient encore une fois à demander de communiquer cela. L'une de nos tâches les plus importantes en tant que concepteurs de sites Web est donc de nous assurer que notre communication et nos attentes envers nous et les autres sont vraiment claires . La collaboration est une partie très amusante de tout projet et je vous recommande vivement de vous associer à d'autres professionnels votre domaine qui complètent vos compétences. Et je pense que cela ne fait que renforcer l'ensemble du processus de conception du site Web. autres créatifs peuvent inclure rédacteurs, des stratèges pour les développeurs Web, des spécialistes du marketing ou toute personne qui, selon vous, apportera une force au projet et complétera Je pense également que c'est une très bonne idée de faire appel à des personnes à des étapes très critiques. Avant même de montrer quelque chose au client, vous pouvez collaborer avec ces personnes dans les coulisses. Supposons, par exemple, que vous créez des wireframes et que vous souhaitiez créer cette fonctionnalité vraiment intéressante Mais vous ne savez pas si ce sera difficile à construire. Vous pouvez discuter avec votre développeur et voir quelle est la meilleure façon de procéder afin que nous y réfléchissions avant de présenter à notre client quelque chose qui pourrait s'avérer assez difficile à créer. Passons maintenant aux projets de classe 15. Projet de classe: Maintenant c'est ton tour. Je veux voir quel type de site Web vous allez créer. Si vous souhaitez également créer un site Web pour un jardin urbain, comme je l'ai fait ici. J'ai ajouté le brief dans la section des projets de classe. Si vous préférez travailler sur un projet client ou un projet personnel, ce serait formidable et j'adorerais voir votre travail dans l'onglet Projets. Si vous êtes bloqué à tout moment, faites-le moi savoir dans les commentaires et j'adorerai vous aider. N'oubliez pas de partager vos projets et de commenter ceux des autres afin que nous puissions nous entraider au sein de cette communauté créative. Merci beaucoup d'avoir travaillé avec moi sur ce projet de conception de site Web et de vous être pardonnés pour votre soutien mutuel J'espère que vous êtes plus confiants et enthousiastes à l'idée d'utiliser Adobe XD et que ce peut vous aider dans votre travail quotidien. Merci beaucoup et je vous verrai lors des discussions.