Mockplus RP - UX - Conception d'interface utilisateur de zéro à héros

1. Introduction du cours: Mock plus rp est un outil de collaboration et de conception d'interface utilisateur en ligne. Et l'avantage, c'est que vous n'avez pas besoin de le télécharger sur votre machine. Vous n'avez pas à trop déranger votre machine. Quelle que soit la machine que vous avez , elle fonctionnera très bien , car tout fonctionne dans un navigateur. Vous pouvez créer des designs et des prototypes riches en interactions, les partager avec vos clients et vos développeurs pour les transférer. Et il inclura toujours le code en arrière-plan, ce qui est toujours pratique pour leurs développeurs une fois que vous aurez entamé ce processus de transfert. Bonjour designer, Alex, et bienvenue dans ce cours Skillshare sur Mach plus rP , de zéro à Hero, un créateur de produits numériques. Et jusqu'à présent, j'ai créé ou 500 produits de design numérique. Je suis également créateur de cours et, jusqu'à présent, j'ai enregistré plus de 40 cours de conception d' interface utilisateur et d'expérience utilisateur différents. Et j'ai plus de 60 000 étudiants inscrits à ces cours. Dans ce cours fictif et rP, nous allons expliquer ce qu'est l'écran de bienvenue et comment naviguer dans l'interface, comment travailler avec différentes pages et naviguer entre elles. Quels sont les composants et les composants intégrés de ma plus rP et comment créer les vôtres. Comment travailler avec des icônes dans Mock Plus rP, comment créer différents actifs et ensembles d'actifs. Comment utiliser le panneau Propriétés ce qu'il est et comment il change. Différentes interactions que vous pouvez réaliser dans mod plus rP. Les ports et les aéroports permettent de travailler avec les nœuds . Et quelle est la différence ? Découvrez nos modèles, pourquoi les utiliser gagner du temps et comment être plus productif. Comment choisir un modèle parmi une grande variété d' entre eux sur mon site Web. Comment personnaliser le modèle, comment le modifier, changer la couleur de la copie, la mise en page et les images. Nous allons commencer à travailler avec quelques organigrammes, puis passer aux wireframes et utiliser composants pour créer des wireframes très rapidement. Transformez ensuite ces wireframes en un design en ajoutant différentes couleurs, images et textes pour créer notre design final. À la fin, nous allons ajouter les différentes interactions et donner vie à notre design. Enfin, nous allons prévisualiser, partager et utiliser MC plus Cloud pour travailler avec d'autres membres de notre équipe, nos clients et nos développeurs. Et je vais expliquer certaines fonctionnalités de collaboration Mock plus rP. Votre projet de classe pour ce cours est de suivre et de créer un design en utilisant les conseils et les techniques que vous allez apprendre au cours de ce cours. Il existe une vidéo dédiée au cours Skillshare. N'oubliez pas de le consulter pour en savoir plus à ce sujet. More Plus RP est génial car il est très facile de démarrer et c'est gratuit pour que tout le monde puisse rejoindre la communauté de conception UI UX. J'ai donc hâte de vous voir en classe et de créer un site Web génial. 2. Projet du cours: Votre projet de classe pour ce cours est créer un site Web en utilisant certains de ces conseils et techniques de simulation rP que vous apprendrez tout au long de ce cours. Vous pouvez utiliser des modèles ou créer votre propre design à partir de zéro, suivant les conseils et techniques que vous avez appris dans ce cours, vous pouvez suivre ma structure ou vous pouvez créer votre propre structure. Ça n'a pas vraiment d'importance. Tout dépend de toi. Et quelle largeur de conception vous convient le mieux et quelles sont les approches qui conviennent à votre style de conception ? Amusez-vous bien et, lorsque vous aurez terminé, assurez-vous d'exporter sous forme d'images JPEG ou de faire n'importe quelle sorte de capture d'écran et les télécharger dans vos projets de classe. J'adorerais voir ce que vous pouvez trouver et j' adorerais voir vos résultats à la fin de ce cours. 3. Qu'est-ce que Mockplus RP: Mock Plus RP est un outil de conception d'interface utilisateur en ligne créé pour les concepteurs comme vous, car vous pouvez travailler quand vous le souhaitez, où que vous soyez dans le monde . Il vous suffit d'utiliser navigateur que vous avez déjà sur votre ordinateur. Contrairement à d'autres outils, il ne nécessite pas que vous disposiez une machine au design ultime, mais vous pouvez utiliser n'importe quel ordinateur que vous possédez déjà car, comme je l'ai mentionné, il fonctionne à l'intérieur du navigateur et ne consomme pas votre mémoire RAM mémoire cache de votre machine. Vous pouvez collaborer avec d'autres personnes en utilisant plus de rP en utilisant la fonction de partage de défis et leur fonction d'équipe. Vous pouvez donc créer votre propre équipe lorsque vous travaillez en interne sur le projet. Vous pouvez également être invité à faire partie de l'équipe de quelqu'un d'autre. Et vous pouvez travailler en temps réel et collaborer en temps réel avec d'autres membres de leur équipe. Ou si vous n'êtes qu'un travailleur indépendant, vous pouvez travailler seul. Vous pouvez créer des interactions et des animations complexes dans mom plus rP. Vous pouvez ensuite les partager avec vos clients ou parties prenantes pour obtenir des commentaires et apporter des améliorations supplémentaires. Et le meilleur dans tout cela, c'est que vous pouvez l'exporter et le partager pour qu'il soit transmis aux développeurs utilisent More Plus Cloud et son intégration fluide. route est totalement gratuite . Et dans votre plan préliminaire, trouverez des centaines de composants différents, des composants prédéfinis qui sont déjà inclus dans des centaines de modèles différents que vous pouvez utiliser dans votre flux de travail en les modifiant simplement et en les ouvrant dans more plus rP. 4. Écran de bienvenue: Comme tous les autres logiciels disponibles, mock plus rP possède un écran de bienvenue qui vous permet de vous y retrouver au début de votre projet. Alors laissez-moi vous montrer comment cela fonctionne. Nous voici donc sur l' écran d'accueil de mod plus rP. Et ce que vous pouvez voir ici, sur votre gauche, c'est tout ce que nous mâchons, c' est-à-dire ce que vous voyez à l'écran en ce moment, c' est-à-dire toutes les options possibles en même temps. Ensuite, en dessous, nous avons récemment édité. Voici donc les projets que vous avez récemment édités. évidemment mes favoris car vous pouvez ajouter n'importe quel projet à un furet. C'est assez simple en cliquant sur cette étoile ici. Et vous pouvez travailler sur plusieurs projets en même temps, mais certains d' entre eux sont peut-être vos favoris. Ensuite, nous avons créé par moi. Et ce sont des projets créés spécifiquement par vous-même. Parce que lorsque vous créez un projet et que vous créez un compte pour Mach plus rP, vous pouvez voir que votre pseudo s'affichera. Donc, quelle que soit la manière dont vous avez créé votre compte, dans mon cas, j'utilise mon nom et cela signifie « team off you ». Cependant, vous avez créé votre compte. Cela signifie que vous pouvez ajouter différents membres à votre équipe en cliquant sur ce bouton ici. Voici le plan que vous avez suivi. Vous pouvez opter pour un plan gratuit ou un plan ultime, je crois. Donc. C'est ici qu'il va l'afficher. Donc, si vous faites partie de l'équipe, celle que vous avez créée vous-même ou si quelqu'un d'autre vous a invité dans son équipe, par exemple tant que travailleur indépendant pour une agence ou indépendant pour un client, ou si vous travaillez à plein temps pour une agence, alors vous allez voir tous les projets créés par vous-même. J'ai commencé par toi-même, mais tu peux toujours y inviter d'autres personnes. Ensuite, nous avons recyclé, participé à tous les projets que vous avez supprimés. Enfin, nous avons des modèles ici. Nous aborderons les modèles un peu plus tard. Mais en gros, si vous devez utiliser un modèle rapide, vous pouvez simplement cliquer ici. Et cela vous amènera à la page des modèles ci-dessous sur laquelle nous avons Mock Plus Cloud. Quand on voit qu'il est dit Partagez des projets, collectez des commentaires et gérez les spécifications et les acides, ce qui est vraiment important si vous voulez sortir de Mock Plus rP et que vous souhaitez vous rendre sur le marché Cloud pour faire les choses qui viennent d'être mentionnées. Vous pouvez le faire en cliquant ici. Et puis nous avons plus d t, qui est le meilleur outil de conception d'interface utilisateur collaborative en ligne. Comme aucun autre, vous pouvez utiliser MC plus d t pour ouvrir des fichiers à partir de différents outils tels que Sketch, Figma. Et vous pouvez y créer vos fichiers entièrement à partir de zéro. Vous pouvez également utiliser more plus RB, ce que nous faisons dans ce cours. Ensuite, si je reviens à tout ce que nous pouvons voir ici, c'est le nouveau projet, alors nous avons un nouveau dossier de projet, ce qui est idéal si vous souhaitez ajouter des fichiers différents au même dossier de projet ou débuts de projet différents dans le dossier du projet. Ainsi, par exemple, vous souhaiterez peut-être créer une application mobile ou un site Web, concevoir un écran de tableau de bord au sein d'un seul projet. Vous pouvez ensuite créer un dossier de projets et placer tous les projets que vous créez dans ce dossier de projet particulier. Encore une fois, j'ai déjà mentionné l'invitation de membres, option et ses fonctionnalités. Et maintenant, comme je l'ai dit, usine est située ici. Vous pouvez voir votre espace personnel et l'équipe. Vous pouvez donc passer de l' à l'autre si vous choisissez de travailler seul sur les projets personne d'autre de votre équipe ne puisse les voir ou en tant que membre de l'équipe Comme je l'ai déjà mentionné, si vous cliquez sur votre photo de profil, vous pouvez modifier votre profil. Vous pouvez consulter vos équipes car vous pouvez faire partie de plusieurs équipes. Notifications et demandes. Vous pouvez consulter l'aide ici et savoir comment obtenir de l'aide sur les RP. Enfin, vous pouvez vous déconnecter. Si vous avez plusieurs produits, vous pouvez les rechercher ici. Et vous pouvez organiser vos projets en cliquant ici. Si vous souhaitez obtenir plus de détails pour voir quel était le type de projet lors de sa création et de sa mise à jour. Et vous pouvez bien sûr le supprimer si vous le souhaitez, comme je l'ai dit, vous pouvez le mettre en favori ici. Vous pouvez cliquer ici pour le prévisualiser, le cloner, dupliquer très rapidement, le renommer, déplacer vers un autre dossier de projet, par exemple partager avec d'autres membres de l'équipe. Ajoutez ou supprimez des membres de l'équipe de ce projet particulier ou supprimez complètement le projet dans son ensemble. Ce que je vais faire maintenant, c'est appuyer sur Nouveau. Et je vais vous voir dans la prochaine vidéo où nous allons expliquer ce que c'est et aborder l'interface. Alors je te verrai là-bas. 5. Interface: L'interface d'un péage est l' endroit où vous allez passer le plus clair de votre temps à travailler avec cet outil. Et il en va de même pour Ma plus rP. Reprenons donc là où nous nous sommes arrêtés dans la vidéo précédente. Permettez-moi de vous présenter une interface, de ce qu'elle peut faire et de l'emplacement de toutes les options. Nous voici donc revenus là où nous nous étions arrêtés la fois précédente. Nous ouvrons cette fenêtre. Et ce que nous allons faire, c'est lui donner un nom. Nous allons donc donner un nom à notre projet . Et appelons-le, par exemple notre premier projet. Et voici ce que vous pouvez voir, ce sont tous les préréglages. Ces différents préréglages peuvent donc vous offrir différentes options, par exemple iPhone. Ce que vous pouvez voir ici concerne les appareils mobiles, et si vous cliquez sur cette petite flèche, tous les préréglages que Mock Plus rP Team vous a fournis s'ouvriront . Mais si vous ne voyez pas votre préréglage, vous pouvez leur écrire Si l'appareil est populaire, ils l'introduiront. Ou vous pouvez toujours opter pour une taille personnalisée ici pour en savoir plus sur la taille personnalisée que vous souhaitez utiliser. Vous pouvez visiter le site Web du fabricant, Vous pouvez visiter le site Web du fabricant puis consulter la section de conception. Ou si vous avez vous-même un système de conception, vous pouvez le trouver à l'intérieur. Quel type de densité de pixels utiliser et quel type de dimensions ils ont utilisé. À côté de cela, nous avons l'iPad, qui est évidemment une tablette. Et ici, vous pouvez voir toutes les tablettes populaires ici. Encore une fois, si vous ne voyez pas votre dimension, vous pouvez toujours écrire à l'équipe, elle l'ajoutera. Ensuite, nous avons le Web. Et vous pouvez voir les tailles les plus couramment utilisées. Bien sûr, il en existe d'autres, mais si vous le souhaitez, comme je l'ai dit, vous pouvez créer une taille personnalisée. Toutes ces tailles sont exprimées en pixels. Donc, pour commencer, je vais simplement sélectionner 1920 par 1080. Et encore une fois, vous pouvez accéder à des modèles gratuits à partir d'ici. Vous pouvez le faire à partir d'ici, d' ici ou à l'intérieur de l' interface elle-même. Alors allons-y, et laissez-moi vous montrer l'interface. Pendant le chargement, je peux revenir ici et vous pouvez voir maintenant que nous avons créé celui-ci, mon premier projet, notre premier projet, désolé, il y a quelques secondes, je vais me débarrasser de celui-ci, le supprimer, d'accord ? Et maintenant, j'ai juste ce projet parce que je ne veux pas vous embrouiller tout au long de ce cours. Notre premier projet est donc celui que nous venons de créer. Voici à quoi cela ressemble. Et si je maintiens les commandes et molette de défilement de ma souris ou touche Ctrl et une sur mon clavier, zoom va revenir en place. Laisse-moi me cacher pour que tu puisses voir un peu mieux. Et voici à quoi ressemble l' interface. Ainsi, sur le côté gauche, vous pouvez voir toutes sortes d'options différentes. Nous avons ici des composants, des icônes, des actifs, des pages et des couches. Et je vais toutes les expliquer dans les prochaines vidéos. Ensuite, nous avons les options les plus couramment utilisées et nous avons des options de partage et de collaboration ici. Ensuite, nous avons le panneau de droite, qui peut être soit des propriétés, qui seront différentes selon ce que vous sélectionnez à l' intérieur de votre tableau de dessin, soit interactions, qui sont utilisées lorsque vous souhaitez ajouter des animations et des interactions entre différents tableaux. Ensuite, nous avons des notes, si vous souhaitez ajouter un nœud différent, ce qui est très utile pour vos clients, par exemple, ou vos collègues. Commençons par le haut. Si vous appuyez dessus, flèche vous ramènera ici, qui est la page d'accueil. Et vous pouvez voir qu'aucun projet de ce type n'a été trouvé récemment projet de ce type n'a été trouvé car il s'agit évidemment de notre premier projet. Ensuite, si nous cliquons ici, vous pouvez voir le projet. Je peux en créer de nouveaux. Je peux importer le fichier RPI. Je peux l'enregistrer pour contrôler S ou commander S dans les préférences d'un Mac. Ainsi, lorsque je clique ici, je peux modifier les options générales. Je peux donc soit modifier ces raccourcis, décaler les couleurs de la toile pour que vous puissiez choisir l' arrière-plan de votre toile. Donc, dans ce cas, il s'agit d'un type de gris moyen à gris foncé, mais vous pouvez également le modifier et ajouter votre couleur personnalisée à cet arrière-plan. Il peut être complètement noir, gris clair, blanc, rouge, couleur de votre choix. Vous pouvez cocher et décocher certaines de ces options générales. Ensuite, nous avons les paramètres de mise en page, c' est-à-dire la mise en page en arrière-plan, et vous pouvez voir comment cela fonctionne. Nous avons donc deux autres colonnes, colonne et largeur de gouttière. Alors voyons voir. À l'extérieur, nous avons les rangées, nous avons le visuel. Disons donc quelque chose comme, je ne sais pas, la largeur de colonne. Donnons-lui quelque chose comme 86. Nous obtenons donc des colonnes un peu plus étroites, une largeur de gouttière. Nous pouvons augmenter la largeur de la gouttière à 100 juste pour que vous puissiez voir à quoi elle sert. C'est donc cette option ici, mais revenons à 74, par exemple , nous avons 12 colonnes. Mais si nous le ramenons à huit, vous n'avez pas vu à quoi cela ressemble, mais revenons à 12. Et bien sûr, la largeur totale, vous pouvez la réduire. Donc, au lieu des années 1920, passons à 18, 20 par exemple et vous pouvez voir que nous avons maintenant cet espace de ce côté, mais revenons à 1920 parce que c'est ainsi que nous l'avons aménagé. Nous y voilà. Et puis il y a la compensation. Donc, ce que vous pouvez faire avec ce décalage c' est soit le placer au centre, soit placer la valeur du pixel et le pousser vers ce côté précis. Ensuite, nous avons les rangées. Si nous changeons de ligne, vous pouvez voir que les lignes sont ces colonnes horizontales qui viennent d'apparaître. largeur de la gouttière est la largeur entre les rangées. On dirait évidemment que c'est entre les colonnes et la hauteur. Alors appelons-le dix, par exemple, et vous pouvez voir ce que cela fait. Mais laisse-moi me débarrasser de ces flèches. Enfin, nous avons les visuels. Donc, quadrillage complet ou contour. Vous pouvez voir à quoi cela ressemble et à quoi cela ressemble. Et vous pouvez modifier les couleurs ici. Enfin, une fois que vous êtes satisfait de vos paramètres, si vous utilisez ces valeurs en permanence, vous pouvez les activer pour définir les paramètres par défaut. C'est particulièrement important lorsque vous travaillez sein d'une équipe ou en tant que travailleur indépendant sur une monosomie pour les mêmes projets à la fois. Cela vous fera gagner beaucoup de temps, car vous pouvez simplement cliquer sur les paramètres par défaut et la prochaine fois que vous en ouvrirez d'autres, les paramètres de rP D vous attendront, à droite, là où vous les avez laissés. Ensuite, nous allons passer aux paramètres de la grille. La grille se compose essentiellement de ces blocs de pixels tout autour de vos tableaux d'art. Et vous pouvez les configurer comme vous le souhaitez. Donc, si je le mets à 40, vous pouvez voir que cela a augmenté la taille de ces blocs parce qu' elle était de 20 auparavant, comme nous le faisions auparavant. Vous pouvez modifier la couleur ici afin changer la direction et de modifier les paramètres régionaux. Et encore une fois, vous pouvez définir les paramètres par défaut. Ensuite, nous avons une mesure. Vous pouvez avoir un alignement de base. Ainsi, lorsque vous déplacez vos objets sur votre tableau d'art, ils s'alignent en haut, en bas, à gauche, à droite et au centre de chaque côté. Spécifications de distribution et d'espacement uniformes. En gros, c'est ça. Donc, quand je clique sur OK, nous retournons à l'aéroport lui-même. Laisse-moi me cacher pour que tu puisses voir un peu mieux. Notre tableau est essentiellement l'endroit où vous placez tous vos éléments à l'intérieur. Ici, j'ai tous mes composants de base. Nous les aborderons un peu plus tard. Mais si je fais glisser un élément à l'intérieur, je peux le repositionner et le réorganiser comme je le souhaite. Et il est situé à l'intérieur du tableau d'art lui-même. Vous pouvez le faire glisser hors du tableau d'art et vous pouvez voir qu'il se trouve maintenant juste à l'extérieur. Mais si vous souhaitez créer des designs à l'intérieur de votre tableau d'art, il vous suffit de le faire glisser et de le placer à l'intérieur. Comme je l'ai mentionné précédemment, ce panneau de propriétés va changer en fonction de ce que vous sélectionnez pour placer sur votre tableau d'art. Mais nous y reviendrons un peu plus tard. Et vous pouvez également créer des tableaux d'art, que nous aborderons un peu plus tard. Mais en gros, ce sont des ports qui sont utilisés, par exemple lorsque vous créez un effet ou effet de défilement vers la gauche et la droite, disons que vous allez placer ces différentes pages, soit différentes sections de votre page ou de votre application mobile, soit tout ce que vous choisissez. Cela peut être par exemple une fenêtre contextuelle, ajout d'une bannière ou quelque chose comme ça. Peut-être qu'une forme volante ou autre peut utiliser ces sous-aéroports et les connecter au tableau d' art principal à l'aide du panneau d'interactions situé ici. Ainsi, tout ce que fera l'utilisateur à l'intérieur du port souterrain principal de l'aéroport suivra et sera mis en place. Donc, si nous revenons ici pour renommer votre tableau d'art, vous pouvez simplement double-cliquer ici et l'appeler par exemple page d' accueil, par exemple. Et pour cela, il suffit de le dupliquer. Par exemple, je veux en avoir deux. Vous pouvez appuyer sur Contrôle ou Commande D. Pour dupliquer votre tableau d'art, vous pouvez double-cliquer ici et dire, par exemple « page Shoppe ». Si nous créons ce site Web , tous les éléments qui se trouvaient sur la page d'accueil seront traduits sur la page de la boutique Vous pouvez également la déplacer si vous trouvez cela ennuyeux, par exemple voir les distances entre vos tableaux d'art. Donc, si vous voulez être bien rangé avec eux, vous pouvez simplement les positionner comme vous le souhaitez. Cela suffit donc pour nos ports en ce moment car nous allons les aborder , car nous allons les aborder un peu plus tard , car nous allons les aborder un peu plus tard. Je veux simplement expliquer rapidement tous ces éléments en haut. Nous avons donc abordé ce panneau sur le côté gauche. Vous avez donc ici vos pages, vous avez vos couches, évidemment. Ainsi, plus vous ajoutez de couches, plus elles apparaîtront. Donc, si nous dupliquons cela, vous pouvez voir à quoi cela ressemble. Et si je double-clique et que je l'appelle, par exemple , rectangle, et voilà. Rectangle, on y va. Et maintenant, j'ai trois couches différentes. Cette première option est le mode Connect. Mais cela vous permettra de connecter ces interactions entre votre aéroport et un port inférieur à la moyenne ou entre différents éléments de votre RPA. Par exemple, vous avez le bouton et vous souhaitez créer un état de survol pour différents composants situés à l'intérieur du plan de travail. que vous allez faire avec le modèle d'interaction. Il peut donc être utilisé dans les deux sens. À côté de cela, nous avons créé un sous-tableau artistique. Donc, si je clique sur mon sous-tableau artistique et que je fais glisser et dessine l' option ici, vous pouvez voir que j'ai maintenant mon port sub R, c'est exactement ce que j'ai mentionné. Disons qu'il s' agit de notre fenêtre contextuelle. Et ça va se déclencher quand je cliquerai ici. Ensuite, nous avons cette option pour le mode Connect. Ainsi, lorsque mes utilisateurs cliqueront juste là, cela sera lié. Ainsi, lorsqu'ils cliquent, ils commandent et affichent le tableau d'art, qui est celui-ci, au centre. Et nous aborderons cette question un peu plus tard. Je suis juste poursuivi, pas confus, mais en gros, c'est comme ça que ces choses fonctionnent. À côté de cela, nous avons évidemment l'outil Pen, qui est utilisé si vous souhaitez créer toutes sortes d' objets différents qui ne se trouvent pas ici, et vous pouvez simplement cliquer en dehors de celui-ci pour le désélectionner, puis vous pouvez le déplacer. Et nous sommes passés à Propriétés. Vous pouvez voir que vous avez des propriétés différentes que vous n'aviez pas auparavant. À côté se trouve une icône en forme de crayon n pour l'outil crayon. À côté, vous pouvez annuler et rétablir. Mais vous pouvez voir les raccourcis ici. Donc Control Command Z ou Control Shift, Command Shift set. Ensuite, nous avons l'option de groupe. Donc, si je sélectionne tous mes éléments ici, je peux appuyer dessus ou appuyer sur Control G pour les regrouper. Ou je peux appuyer sur Control G encore une fois pour les dissocier si je le souhaite. Vous pouvez donc le faire ici. Je peux donc les sélectionner à partir d'ici, appuyer sur Ctrl G pour les regrouper, double-cliquer et les appeler, par exemple rectangles, parce que c'est ce qu'ils sont. Ou si je ne veux pas qu'ils fassent partie d'un groupe, je peux les dissocier. Mais vous pouvez aussi le déplacer vers le haut, le déplacer vers le bas, en faire ce que vous voulez, puis le placer au premier plan et le ramener à l'arrière. Donc, pour démontrer la dette, je vais remplir cet objet de couleur rouge juste pour que vous puissiez le voir. Il se trouve donc maintenant devant ces rectangles. Si je le redimensionne en maintenant la touche Shift enfoncée, vous pouvez voir à quoi cela ressemble. Donc, lorsque je clique ici, sur le renvoi vers l'arrière, il l'enverra derrière ces rectangles. Et maintenant, si nous voulons le placer au premier plan, si je peux le sélectionner, je peux simplement cliquer ici. Mais si je ne peux pas le sélectionner, je peux cliquer sur l' élément qui se trouve devant cet élément et le renvoyer en arrière. C'est ainsi que cela fonctionne. Et puis ce que nous avons ici, c'est notre liste de ports. Actuellement, nous n'avons qu' un seul plan de travail, mais par exemple si je reviens en arrière et contrôlez D pour le dupliquer. Et maintenant, lorsque je clique sur cette option, nous avons deux plans de travail. Maintenant, cela peut sembler un peu stupide lorsque vous n'avez que deux plans de travail. Mais ces projets d'interface utilisateur peuvent parfois comporter 200 mots, 300 aéroports. Il est très important de disposer d'une telle option , car vous pouvez simplement accéder à ce plan de travail en cliquant dessus et vous pouvez voir ce qu'il fait. Vous pouvez donc simplement imaginer que vous êtes quelque part par ici et que je veux cliquer sur la page d' accueil pour y accéder directement. Contrôlez la commande 1 pour revenir en position, débarrassez-vous de celle-ci. C'est pourquoi notre liste de ports est si précieuse et si importante, à côté de ce que nous avons. Si je passe la souris, vous pouvez voir toutes sortes d'options différentes, mais celle-ci est un panneau d'état. Maintenant, les États indiquent à quoi ressemble l' élément lorsque l'utilisateur interagit avec cet élément. Ainsi, par exemple, la dette peut être un état par défaut, un état de survol, état cliqué, un état de presse, état désactivé, et bien plus encore. Donc, en fonction de votre projet, vous aurez plus ou moins de ces états. Donc, pour le démontrer rapidement, sélectionnons un bouton rapide et saisissons quelque chose comme Lire la suite ici. Cliquez quelque part à l'extérieur. Et agrandissons ce bouton pour que vous puissiez le voir un peu mieux. Changeons la couleur de remplissage en bleu. Changeons la couleur du texte en blanc. Changeons cela pour, disons, Roboto et quelque chose de gros comme des pleurnicheries, ou peut-être quelque chose comme ça. Maintenant, nous avons notre bouton. Débarrassons-nous de cette bordure et de ce bouton, car nous les avons déplacés depuis le panneau des composants, où il est indiqué que le compost est le composant par défaut. Vous pouvez bien entendu créer votre propre composant et l'ajouter aux actifs ici. Nous en reparlerons un peu plus tard. Ainsi, lorsque vous cliquez ici, vous avez sélectionné tous ces états qui ont désactivé le survol de la souris enfoncé et bien plus encore. Donc, en ce moment, nous sommes dans un état normal. Donc, quand je le change en survolant la souris, et quand je fais quelque chose avec la couleur de fond, par exemple quelque chose comme ça. Et je reviens à l'état normal et je passe du mode normal au survol de la souris. Vous pouvez voir à quoi cela ressemble, mais comment en avoir un aperçu ? Vous pouvez en faire un aperçu rapide ici. Ainsi, dès que c'est le cas, vous pouvez simplement passer la souris et voir ce que cela fait à votre bouton. Vous pouvez modifier le contenu de vos composants, en l'occurrence le bouton de l'un de ces états. Ainsi, par exemple, lorsque vous passez la souris, cela ne devrait pas indiquer le bouton Lire la suite, cliquez maintenant ou quoi que ce soit d'autre. Vous pouvez modifier la taille de votre bouton. Vous pouvez modifier la couleur. Vous pouvez inclure le dégradé pour que ces dates soient vraiment créatives. Et vous pouvez voir que vous avez un tas de ces différents états préfabriqués pour tous ces composants préfabriqués. Et vous pouvez bien sûr créer le vôtre. Vous pouvez cliquer sur Ajouter, l'indiquer, le nommer comme vous le souhaitez. Donc, par exemple, disons aussi désactivé parce que nous l'avons déjà désactivé. Et maintenant que cette option est désactivée, vous pouvez continuer à modifier et ajouter de nouvelles modifications. Vous pouvez le renommer et faire ce que vous voulez. Donc, en gros, ce sont les États en un mot. Ensuite, nous avons l'option Zoom et Zoom. Vous pouvez simplement cliquer dessus. Ou si vous avez une molette de défilement sur votre souris, vous pouvez utiliser les touches Contrôle ou Commande et simplement utiliser la molette de défilement de votre souris. Et comme je l'ai dit, Control Zero, contrôlez une commande pour, vous pouvez simplement jouer avec ces paramètres. Ensuite, vous avez l'option de publication, ce qui est idéal si vous souhaitez le publier sous forme de prototype pour d'autres puissent le vérifier, soit auprès de votre équipe, soit auprès d' une autre équipe. Encore une fois, nous avons des membres et vous pouvez cliquer et inviter d' autres membres. Vous pouvez modifier le type de projet privé en projet d'équipe. Et il sera accessible à tous les membres de l'équipe actuelle ou à tous les membres de ce projet, ce qui est très important, car vous devriez peut-être simplement inviter quelques designers, quelques coéquipiers à participer à ce projet en particulier avant de le rendre public et de le mettre à la disposition de l'ensemble de l'équipe, notamment du marketing , des finances et d'autres activités comme ça. Vous pouvez inviter des membres. Rôle, vous pouvez simplement lui ajouter ces rôles, un membre, un collaborateur, un invité. Vous pouvez voir ce que chacun d'entre eux peut faire lorsque le lien expire et le lien d'invitation. Vous pouvez ainsi copier et leur envoyer ce lien et ils pourront s'inscrire. Et une fois qu'ils l' auront fait, vous les verrez ici. Ensuite, nous pouvons télécharger le package de présentation du prototype en ligne, ce qui est très utile lorsque vous essayez de vendre le NVP à investisseurs ou à des membres supérieurs de votre équipe, tels que les administrateurs, etc. Vous pouvez donc télécharger ce prototype et partager avec eux soit en personne pour expliquer plus en détail ce que vous essayez de faire ici, soit si vous ne souhaitez pas publier votre projet et que vous ne souhaitez pas inviter le conseil d'administration, par exemple à voir ce projet, vous pouvez simplement partager ce projet avec eux. Ils peuvent l'ouvrir sur leur propre machine et ils pourront voir tout ce que vous avez fait. Et je vais vous montrer à quoi cela ressemble un peu plus tard. À côté de cela, nous avions l'option de prévisualisation. Je vais donc cliquer ici. Cela va ouvrir une nouvelle fenêtre. Une fois chargé, vous pouvez voir toutes les options que nous avons vues. Et c'est ce que votre conseil d'administration, par exemple, pourra voir s'il télécharge le prototype. La liste des pages se trouvera donc ici et elles auront toujours l'option de recherche. Ils peuvent naviguer sur ces pages, ils peuvent passer en plein écran. Ils peuvent masquer ces panneaux ici. Cachez donc le panneau à hydrure gauche s'ils choisissent mode plein écran et appuyez sur Escape pour sortir du mode plein écran. Et bien sûr, ils peuvent zoomer pour s'adapter à l'écran, par exemple revenir en plein écran et vous avez maintenant vos sites Web complets, par exemple un package de présentation. Et c'est génial parce que tout y est expliqué. Ils peuvent également partager ce lien d'aperçu. Vous pouvez également définir sur quoi ils peuvent cliquer et sur quoi ils ne peuvent pas cliquer pour toujours afficher la zone de liens. Cela va donc montrer à quoi, ce qui est lié à l'intérieur de cette page en particulier, Charlene Carrier en survolant la souris. Ainsi, une fois qu'ils auront survolé votre lien et ce que vous avez réellement rendu cliquable sur cette page, le contenu extérieur est né, et non des marqueurs et masquera la barre d'outils. C'est là que les notes seront stockées. Donc, par exemple, si vous voulez leur faire savoir ce qui figurera dans la prochaine version, qu'est-ce qui sera inclus plus tard ? Qu'y a-t-il ici maintenant ? Ce qu'ils doivent faire si vous voulez les aider à résoudre certains aspects de cette conception, vous pouvez le mettre dans les notes ici. Voici à quoi ressemble l' aperçu. Et mercredi, une fois que vous l'aurez téléchargé et partagé, voici ce qu'ils pourront voir. Si vous cliquez ici, vous pouvez soit partir d'accueil, soit partir de la page actuelle, ce qui est évidemment très pratique si vous avez plusieurs plans de travail et que vous souhaitez changer de page d'accueil pour ce projet en particulier. Et puis ici, nous allons entrer en plein écran masquer le panneau gauche, le panneau hydrure. Et maintenant, vous pouvez concentrer vos efforts sur la conception complète si vous le souhaitez. Maintenant, vous ne pouvez pas les afficher lorsque vous passez la souris, vous devez cliquer ici pour afficher le panneau de gauche et le panneau de droite. Par exemple, vous utilisez peut-être simplement les raccourcis pour rechercher ce que vous voulez et inclure dans votre projet, puis vous pourrez simplement le masquer ou vous n'avez pas besoin de couches, vous devez simplement créer quelque chose de vraiment en utilisant rapidement ces rectangles. Donc, par exemple, si je tape R, cela va me montrer le rectangle. Si je tape tout, par exemple cela va m'afficher le cercle. Si je le prends, cela m'amènera à l'outil Type. Parfois, vous n'avez donc pas vraiment besoin de ces couches pour vous distraire. Et c'est là que cette option s'avère utile. Vous pouvez simplement masquer ces deux panneaux. Enfin, comme mentionné, mais je tiens à le mentionner encore une fois très rapidement, ce panneau sur le côté droit va modifier tout ce que vous sélectionnez. Alors laisse-moi te montrer. Si je reviens en arrière et que je sélectionne, disons, l'outil de saisie, nous avons les options de type et nous avons des options limitées ici car ce sont les options pour le type lui-même. Ensuite, nous avons le cercle. Vous pouvez voir que cela va légèrement changer. Ensuite, nous avons le rectangle. Cela va changer. Encore une fois, cela va me donner quelques options supplémentaires. Et si nous choisissons la forme personnalisée que j'ai créée précédemment, cela m'offrira également toutes ces autres options. Mais il existe une option qui est vraiment importante et elle s'appelle les pages. Il se trouve juste ici. Et je vais vous expliquer ce qu'il fait et comment vous pouvez l'utiliser dans la vidéo suivante. Alors je te verrai là-bas. 6. Pages: Lorsque vous travaillez sur un projet, vous souhaitez le diviser. Il est donc facile pour vous de naviguer et pour vos coéquipiers de naviguer facilement. C'est là que l' option pages est utile. Parce que c'est exactement ce que vous pouvez faire dans l' option des pages. Revenons donc au mode plus rP, je vous montre comment cela fonctionne. Nous voici donc là où nous nous étions arrêtés la fois précédente, et voici les pages sur le côté gauche. Actuellement, nous n' avons que la page d'accueil et c'est ce que vous voyez ici. Si je double-clique ici et que je la transforme en page de boutique, par exemple et lorsque je clique sur la page d'accueil, il s'agit de la page d'accueil réelle. Mais si nous voulons créer une autre page, cliquez ici, elle m'affichera la première page. Donc, pour la première page, cela va tout de même créer notre tableau, car nous l'avons configuré comme tableau par défaut. Nous avons créé celui pour la page d'accueil elle-même. Mais ici, ce que nous pouvons faire , c'est voir, voir ce que nous avons fait ici. Elle va donc écrire ici. Nous pouvons faire quelque chose comme un blog, par exemple , vous pouvez le faire soit. Ainsi, lorsque vous passez de la page d'accueil, qui sera la page de votre boutique, vous pouvez double-cliquer avec le bouton droit de la souris pour la renommer. Achetez donc, par exemple cela peut être blogué, par exemple , afin que vous puissiez facilement passer d'une page à l'autre si vous le souhaitez. Mais ce n'est pas vraiment ce à quoi j'utiliserais ces pages sans les utiliser sont des organigrammes. Et ce seront nos organigrammes, par exemple ce sera notre structure filaire. Et donnons-lui le nom d'un wireframe. Ensuite, lorsque je clique sur Nouveau, je vais utiliser celui-ci pour le design. Et si je zoome et colle ceci, nous utiliserons celui-ci pour le design. Enfin, pour en créer un nouveau, donnons-lui quelque chose comme projet ou un brief de conception. Je peux donc facilement passer de l'un à l'autre. Permettez-moi également de le renommer, mon Excel. Donc, comme je l'ai dit, ils peuvent facilement passer de l'un à l'autre et je peux les déplacer. Ainsi, à l'intérieur des organigrammes, je peux inclure le brief de conception si je le souhaite, ou je peux le déplacer légèrement à l'extérieur. Placez-le simplement à l'extérieur. Cliquez avec le bouton droit et vous pouvez voir que vous pouvez le copier. Vous pouvez insérer une page ou un groupe. Vous pouvez cloner un renommage ou le supprimer si vous le souhaitez. Mais ce que je veux faire en fait, c'est y retourner et le déplacer à l'extérieur, comme ça. Si vous le souhaitez, vous pouvez en sélectionner plusieurs et simplement ajouter une page ou les ajouter à un groupe. Et vous pouvez voir qu' il a ajouté ce groupe. Mais vous pouvez également les sélectionner et créer un nouveau groupe ici même. Et tu peux mettre ce que tu veux dans ce groupe. Par exemple , des fichiers de conception, car votre projet peut comporter plusieurs pages. Et disons un brief de conception, que je souhaite inclure dans ce groupe. Et vous pouvez voir que c'est inclus ici, disons le design. Et il va y avoir le numéro deux parce qu'il contient deux fichiers. Évidemment, si vous avez plusieurs fichiers allez inclure plusieurs fichiers à l'intérieur. Revenons quelques étapes en arrière et je vais sélectionner mon dossier, appuyer sur Supprimer, et le message indiquera que je vais supprimer ce groupe. Donc, en gros, c'est pour cela que j' utiliserais ces pages. Lorsque vous aurez reçu votre brief de conception de la part de votre client, par exemple si vous voulez le lire et le parcourir très facilement ici, vous passerez aux organigrammes. Créez des organigrammes rapides, des diagrammes pages ou des flux d'utilisateurs géniaux, ou tout ce que vous voulez. Ensuite, une fois que vous en aurez terminé avec eux et que votre structure sera en place, nous passerons aux wireframes, nous allons rapidement concevoir des wireframes de base. Dessinez des rectangles sur une page, par exemple, ou voyons des cercles et placez-les où vous le souhaitez sur la page. Disons quelque chose comme ça pour obtenir des mises en page rapides sans aucune couleur, vous pouvez peut-être utiliser une jolie couleur grise juste pour différencier vos éléments. Ensuite, vous pouvez passer de ces éléments au design, où vous ajouterez des couleurs. Vous ajouterez une copie claire du projet, une topographie claire. Il existe des divisions claires avec des icônes, des images, des animations et des interactions. Et puis ce design est ce que vous allez réellement publier ou télécharger sous forme de prototype à partager avec vos clients. Dans la vidéo suivante, nous allons parler des composants car ils jouent un rôle très important dans Mock Plus rP. Il y en a des centaines et je vais vous montrer ce qu'ils font réellement et comment vous pouvez les utiliser dans votre travail en utilisant plus de rP. Alors je te verrai là-bas. 7. Composants: Le travail de conception de l'interface utilisateur est généralement assez répétitif. Cela signifie que de nombreux éléments se répètent au fil du temps. Donc, si vous pouvez gagner un peu de temps sans créer ces éléments, chaque fois que vous vous lancez dans un nouveau projet, vous vous en sortirez bien, car vous allez gagner beaucoup de temps sur vous vous en sortirez bien, car vous allez gagner votre projet à chaque fois. C'est là que les composants sont utiles. Et les composants peuvent être très simples, comme un rectangle, par exemple, ou ils peuvent être des composants très complexes composés de plusieurs éléments différents , tels qu'une barre de navigation, par exemple , un curseur, une page de boutique terminée, une caisse ou quelque chose comme ça. Quoi qu'il en soit, les composants sont très utiles et je vous encourage vivement à commencer à explorer les composants et à les utiliser. Parce que, surtout avec les boutons, disons qu'ils vont se répéter au fil du temps. Et vous ne voulez pas perdre votre temps à les créer à chaque fois. Passons donc à plus de rP. Je vous montre quelques composants par défaut qui sont inclus dès le départ lorsque vous démarrez avec block plus rP. Nous voici donc à l'intérieur de l' interface où nous nous sommes arrêtés la fois précédente. Et voici la page de conception sélectionnée. Et en dessous, nous avons ce compost, abréviation de composants. En dessous, nous avons une option de recherche. Donc, si je cherche par exemple un rectangle parce que je peux le voir, vous pouvez voir le rectangle ici. C'est donc à l'intérieur de la base et à l'intérieur des formes, essentiellement le même composant. Débarrassons-nous de ça et revenons en arrière. Les formes de base que vous voyez ici sont si basiques. Permettez-moi de passer au wireframe , car ce sera beaucoup plus simple à démontrer là-bas. Donc, si je fais glisser et déposer un rectangle comme nous l'avons fait précédemment, comme je l'ai mentionné précédemment, vous avez différentes options pour votre rectangle. Juste ici. Vous pouvez jouer avec la couleur de fond, avec la couleur de la chaudière. Vous pouvez placer votre bordure à l'endroit où vous souhaitez. Vous pouvez arrondir vos coins par l'un ou l'autre des coins séparés. Ainsi, lorsque vous passez la souris, vous pouvez voir et lorsque vous modifiez beaucoup de choses, 50, vous pouvez voir que c'est coin supérieur gauche parce que c'est ce qui a été mis à jour. Ou si vous souhaitez tout ajouter à 50, vous pouvez le faire ici. Il va se mettre à jour, mettre à jour chaque recoin. Ensuite, vous pouvez l'ajouter par pourcentage, vous pouvez l'ajouter par ombre. Ou ce qui est bien avec les composants c'est que lorsque je sélectionne mes composants, vous avez ces extensions. Vous pouvez donc les afficher ou les masquer. Et vous avez cette option de forme. Maintenant, ces extensions seront différentes pour tout ce que vous sélectionnez sur votre page et quels que soient les composants que vous choisissez. Comme pour le panneau Propriétés lui-même, en fonction de la forme que vous avez choisie, du composant que nous avons choisi ici. Évidemment, vous pouvez l'ajouter à différentes options pour chacune d'entre elles. Vous pouvez changer les couleurs, vous pouvez changer la couleur de la bordure, par exemple, vous pouvez ajouter un type dans chacune d'elles. Mais pour certains d'entre eux, cela va être très spécifique en fonction du composant que vous sélectionnez et de ce que ce composant est censé faire. Ici, ce que nous avons pour ce rectangle particulier, c'est l'option de forme. Ainsi, lorsque je clique dessus, vous pouvez voir toutes sortes de formes différentes apparaître ici. C'est donc très utile car vous pouvez facilement passer de ces coins droits à des coins arrondis, par exemple , lorsque je clique à l'extérieur, vous pouvez voir que nous avons maintenant ces coins arrondis. Et quand je reviens ici et que je sélectionne mon option, reviens à ma forme et je passe ici ou ici. Vous pouvez voir que nous avons maintenant ces coins arrondis. Donc, si je l' allonge, vous pouvez jouer avec et je peux ajuster ce que je veux avec ces formes. Mais si nous revenons à celui par défaut, vous pouvez voir que maintenant je ne les ai plus. C'est donc l'option avec ces formes. Et j'aime beaucoup les utiliser car vous pouvez facilement passer d'une option à l'autre. Ensuite, nous avons, par exemple l'option de ligne, qui est idéale pour les séparateurs de lignes entre différentes sections et les sauts de page, par exemple le texte. Vous pouvez le glisser-déposer et taper quelque chose. Alors, tapons quelque chose. Et ce que vous pouvez faire avec le texte, c'est étendre la zone où le texte va échouer vers la gauche, la droite, le haut et le bas, comme ceci. Si vous souhaitez créer un paragraphe rapide qui remplira cet espace particulier, vous pouvez faire pivoter votre texte en cliquant ici. Et encore une fois, vous pouvez le lier pour toute sorte d' interaction différente que vous souhaitez avec ce lien particulier. Vous pouvez donc créer, disons, effet de survol dessus. Vous pouvez également le lier à d'autres parties de votre design. Encore une fois, l'extension propose différentes options pour le type. Vous pouvez donc fixer la position où il rampe. Vous pouvez ajouter une info-bulle ou un lien externe. Si vous souhaitez que ce type ajoute quelque chose d'autre en ligne, vous pouvez utiliser la couleur de remplissage, couleur de bordure pour la forme, ou vous pouvez choisir la typographie ici. Pour le moment, Google Fonts et Adobe Fonts ne fonctionnent pas, mais nous allons travailler sur la saisie dans une leçon séparée. Passons donc à autre chose. Mais ce sont vos options pour le type à côté, vous avez votre image, vous pouvez donc redimensionner cette image, quelque chose comme ça. Par exemple ou vous pouvez l'adapter à quelque chose comme ça. Vous pouvez donc faire ce que vous voulez et vous pouvez voir que lorsque je le déplace, différentes options s'offrent à moi. Vous pouvez maintenir la touche Shift enfoncée pour sélectionner différents éléments et les déplacer ensemble. Ainsi, lorsque je maintiens la touche Maj et la flèche du bas enfoncées, ils se déplacent par incréments de dix, comme vous pouvez le voir ici. Et lorsque je clique et que je maintiens ma touche Alt enfoncée, vous pouvez voir les distances entre les différents éléments et les différentes arêtes. Donc, pour ajouter une image différente, vous pouvez sélectionner ce que vous pouvez faire et encore une fois, sous extension, comme il s' agit d'une image, elle aura un aspect légèrement différent. Vous disposez de vos options de téléchargement. Vous pouvez donc évidemment télécharger depuis votre ordinateur et utiliser toutes sortes d'images différentes et les télécharger là-bas. Mais en gros, vous pouvez également utiliser des liens et copier et coller ces images à l'intérieur, par exemple si nous voulons utiliser des images en ligne, mais je vous recommande toujours stocker ces images sur votre machine. Si quelque chose ne va pas, vous ne pouvez pas le trouver en ligne. Votre Internet ne fonctionne pas, peu importe, alors vous pouvez simplement l'utiliser. Cliquez sur Télécharger et cela s'affichera. Cliquez donc pour le télécharger ou faites-le glisser et déposez-le ici. Vous pouvez conserver la taille d'origine, mais vous pouvez en laisser plus et une image de mort optimisée pour vous. Mais je veux montrer que c'est option fantastique qu'ils ont. Il s'agit donc du style par défaut, ou vous pouvez le passer au style filaire. Donc ça va apparaître comme ça, ce que j'adore voir. Vous pouvez passer de l'une à l'autre et vos clients pourront facilement le constater. D'accord, agit donc d'une image et vous pouvez voir que lorsque vous commencez à l'étirer, elle prendra différentes formes. Disons que parce que nous sommes en 1920, positionnons-la au centre des décès et allons-y, disons qu'il s' agit d'une image de héros. Vous pouvez voir à quel point cela a l'air cool et quel point notre design est déjà formé, et nous venons d'inclure un élément. Ensuite, nous avons le bas, qui est probablement l'option la plus couramment utilisée en ligne et dans l'espace UI UX. Donc, si je passe à 300 pour la largeur, et voyons voir, 64 et une hauteur. Ce que je peux faire à l'intérieur, c'est changer la taille de ma police à 32 peut-être. Et vous pouvez voir que c'est énorme. Politique, retour à 24 ou même à 18 ans. Je pense que c'est une bonne idée. Je peux donc le mettre en gras. Voyons voir. Je peux changer la couleur de remplissage en, disons, cette jolie couleur bleue. Débarrassons-nous de la frontière. Et utilisons quelque chose comme une belle couleur blanche pour nos textes. Et vous pouvez double-cliquer pour le modifier, cliquant ici, par exemple, et encore une fois, vous pouvez le rediriger vers un lien externe. Vous pouvez utiliser une info-bulle. Vous pouvez fixer la position lors du défilement. Et ce que cela fait, c'est que lorsque vous sélectionnez votre tableau d'art, vous pouvez l'étirer. Et lorsque vous commencez à faire défiler l'écran, cet élément reste fixe, ce qui est généralement idéal pour les éléments de navigation tels que les menus. Ensuite, en dessous, nous avons une entrée. Comme je l'ai dit, c'est fondamentalement la même chose qu'un bouton, mais la saisie est la plus largement utilisée sur les forums. Ensuite, nous avons la zone de texte , idéale pour les paragraphes. Nous avons des conteneurs. Et le premier est un panel. Et le panneau est un composant qui vous permet de placer tous les éléments dont vous avez besoin au même endroit et de les utiliser tous en même temps. C'est un composant intéressant que vous pouvez utiliser pour créer des designs tels que des cartes, par exemple, ou des sections défilantes pour votre projet. À côté de cela, nous avons le panneau de contenu. Et c'est un composant qui vous aide à créer l'effet d'un onglet, par exemple pour le changement de contenu. Et vous pouvez facilement l'utiliser avec des ports inférieurs à la moyenne pour obtenir cet effet si vous le souhaitez. Et en dessous, enfin, nous avons la vue Web, un composant qui vous aide à concevoir rapidement des sites Web. Et surtout, il vous permet de saisir directement URL d'un site Web pour intégrer directement ce site Web dans votre interface. Ainsi, lors de la prévisualisation, vous pourrez interagir avec ce site Web intégré comme vous le faites directement en ligne. Ci-dessous, nous avons des composants communs, que j'ai beaucoup aimé appeler composants du système de conception. Parce que vous allez trouver ces composants dans la plupart des systèmes de conception. Et encore une fois, ils seront différents quel que soit le composant que vous sélectionnez. Et ils vous proposeront différentes options sur le côté droit. Disons donc la barre de navigation de l'application. Vous pouvez voir à quoi cela ressemble ici, nous avons différentes options. Nous avons donc une icône, nous avons sélectionné des couleurs. Ainsi, lorsque vous cliquez ici, vous pouvez voir ce que cela fait lorsque vous sélectionnez l'option différente. Donc, faites glisser l'icône directement pour sélectionner une icône dans le composant et cliquez sur l' icône que vous souhaitez dans les bibliothèques, c'est celle-ci que nous aborderons dans la vidéo suivante. Mais en gros, c'est ainsi que fonctionne ce composant. Et vous en avez la majorité ici. Ensuite, nous avons les graphiques, qui vont de soi Quel que soit le type de graphique que vous souhaitez inclure, vous pouvez simplement le faire glisser et le déposer. Utilisons ce tableau et vous pourrez jouer avec toutes ces options ici. Ensuite, nous avons le balisage, qui est l'une de mes options préférées. Passons aux organigrammes. Et débarrassons-nous de certains de ces éléments. Quelque chose comme ça. J'en suis ravie. Et quand je veux ajouter quelque chose, je peux double-cliquer sur mes éléments. Ou si je les sélectionne et les place dans un groupe, lorsque je double-clique. Vous pouvez voir qu'il se concentre sur un élément, celui que j'essaie actuellement de modifier. Et il va maintenant se concentrer sur cet élément. Ainsi, lorsque vous avez terminé, vous modifiez, ajoutez du texte, changez de couleur, changez de forme, ajoutez des images, tout ce que vous faites lorsque vous cliquez à l'extérieur ne fera pas partie de l' effet focalisé et vous permettra simplement de les déplacer et de les sélectionner de manière évidente, revenir à ce mode focalisé pour l'édition. Mais pour revenir au balisage où cela est important, en particulier avec les organigrammes, il faut utiliser ces flèches. Donc, si nous zoomons un peu plus, vous avez deux points et vous pouvez déplacer ces deux points comme vous le souhaitez. Vous pouvez voir l' option Démarrer ici. Disons donc qu'il n'y en a aucun. Ou mieux encore. Ajoutons-le. Rajoutons-la telle qu'elle était pour, pour, disons, cette option. Nous y voilà. Alors mon objectif final sera de ne rien faire. Je vais donc utiliser Control C, Control V pour le coller. Ensuite, je vais maintenir ma touche Shift enfoncée. Et puis pour celui-ci, vous pouvez voir que c'est inversé. Point de départ. Il l' a mis ici, mais le point final ne l'a pas mis. Donc, pour ce point principal, je vais utiliser ce cercle. Voyons ce que c'est. Nous y voilà. Je vais juste le pousser un peu à quelque chose comme ça. Et maintenant, pour mon point final, je vais utiliser la flèche. Vous pouvez donc voir à quel point c'est simple. Disons que nous avons ici notre composante rectangulaire. Il suffit de le glisser et de le déposer à l'intérieur, quelque chose comme ça. Disons qu'il faut le copier et le mettre ici et à l'intérieur, je peux mettre, disons, la page d'accueil, quelque chose comme ça. Et je peux évidemment réduire la taille à dix ou quelque chose comme ça. Et vous pouvez facilement étendre cette et montrer aux utilisateurs comment naviguer dans votre produit ou montrer aux parties prenantes quels sont vos coéquipiers, vos idées et les meilleures approches qu'ils peuvent adopter. Évidemment, cela peut s'étendre largement et inclure divers éléments différents, mais ce ne sont que dans cette présentation que vous pouvez utiliser des méthodes. Maintenant, en dessous, ce que nous avons à l'intérieur du balisage est un marqueur circulaire. Vous pouvez l'utiliser en conjonction avec la flèche. Vous pouvez utiliser les notes autocollantes si vous souhaitez ajouter des notes rapides à l'intérieur ou juste à l'extérieur de votre dessin Vous pouvez simplement placer votre note autocollante ici. Ainsi, lorsque votre coéquipier intervient, vous pouvez lui dire quelque chose comme ajouter différentes images dont nous avons parlé hier ou quelque chose comme ça. Vous pouvez donc simplement jouer avec ces notes autocollantes et elles sont vraiment utiles une fois qu'elles sont terminées Vous pouvez simplement appuyer sur Supprimer et les supprimer complètement de la page et déposer un marqueur, est évidemment un excellent élément à utiliser si vous créez des cartes. Ensuite, en dessous, nous avons toutes sortes de formes différentes que vous pouvez utiliser. Et le Mach Plus RP inclut toutes sortes de formes différentes, des plus basiques aux plus complexes comme celle-ci. Et cela me rappelle une icône que j'ai consultée et dont nous parlerons dans la vidéo suivante. Alors je te verrai là-bas. 8. Icônes: Tu sais comment on dit qu'une image vaut 1 000 mots. C'est à cela que servent les icônes. Et dans cette vidéo, je vais vous montrer les icônes, ce qu'elles font et ce que vous pouvez faire avec icônes contenues dans more plus r p. Nous voici donc de retour en un seul passage de rp là où nous nous sommes arrêtés. Et voici l'icône. Je vais donc cliquer ici. Vous pouvez voir toutes sortes d'options différentes. Donc, encore une fois, nous avons la recherche qui est distincte pour les icônes elles-mêmes. Donc, si je tape en personne, par exemple vous pouvez voir toutes sortes d'icônes de personnes différentes. Et lorsque je fais glisser l'icône ici et que je zoome un peu plus près, nous avons toutes les options que nous avons déjà abordées. Mais ce qui est génial, c'est qu'il suffit de glisser-déposer l'icône ici. Comme vous pouvez le constater, c'est aussi rapide que cela, mais vous pouvez modifier le style. Nous avons donc la boîte et le style du boulon, nous pouvons changer la couleur. Mettons-le donc à cette couleur, par exemple, nous avons l'info-bulle et le lien externe. Et selon la préférence de cette icône, nous avons la mélodie et le verrou. Donc, pour chacun d'entre eux, parfois cela va changer radicalement, parfois non. Mais en gros, vous pouvez voir à quoi cela ressemble. Bien entendu, vous pouvez également placer ces icônes où vous le souhaitez. Donc, par exemple si nous choisissons ce composant, revenez aux couches et vous pouvez voir que nous sommes ici sur le composant bouton. Si j'essaie de le faire glisser à l'intérieur, il va juste le placer ici. Je devrais donc les regrouper comme ça pour pouvoir voir cette icône à l'intérieur de ce bouton. Vous pouvez donc bien sûr créer le bouton différent avec l'icône à l'intérieur si vous le souhaitez. Mais maintenant, quand je commence à les déplacer, vous pouvez voir qu'ils se trouvent maintenant à l'intérieur du même composant. Quand j'ai essayé de le faire glisser, vous pouvez voir que cela réduit la taille de chacun d'entre eux. Et si je maintiens ma touche Shift enfoncée, la taille sera réduite de manière uniforme. C'est une bonne chose à propos des icônes. Vous pouvez les inverser, vous pouvez les modifier. Dans. Vous pouvez voir ici que nous avons des graphiques Office, des gestes et toutes sortes de catégories différentes avec lesquelles vous pouvez jouer . Et vous pouvez voir que certains d'entre eux ont un style un peu différent. Nous avons donc le style en étain ici. Et si nous le mettons à jour et que nous passons en gras, vous pouvez voir à quoi cela ressemble. Une dernière chose que je tiens à souligner est la suivante en ce qui concerne l'interaction. Donc, si je clique et fais glisser mon interaction jusqu'ici, par exemple, vous pouvez modifier les déclencheurs, vous pouvez changer l'état. Vous pouvez changer l'état de normal à désactivé, par exemple et des choses comme ça. Mais nous allons aborder cette question dans l'une des prochaines leçons. Mais pour l'instant, je vais juste vous en parler. Donc, en gros, ce sont les icônes et c'est ce que vous pouvez faire avec les icônes elles-mêmes. Et vous pouvez les changer, les repositionner, les réorganiser, les placer où vous voulez et en faire ce que vous voulez. Et ce qui est génial, c'est que toutes ces icônes sont pré-incluses dans Mock Plus PrP. Vous n'avez donc pas à perdre votre temps à chercher ces icônes en ligne et passer d'un pack d'icônes à l' autre. Vous pouvez, bien sûr, glisser-déposer vos icônes depuis votre ordinateur, par exemple à l'intérieur de notre site Web, elles fonctionneront parfaitement. Mais pour cet exemple particulier, j'aime utiliser ces icônes car elles sont déjà incluses dans chaque icône à laquelle vous pouvez penser se trouve déjà ici. Alors pourquoi perdre votre temps à rechercher différentes icônes en ligne. À côté de cela, nous avons les atouts et nous allons les aborder dans la vidéo suivante. Alors je te verrai là-bas. 9. actifs: d'avoir tous ces actifs et objets par défaut C'est formidable d'avoir tous ces actifs et objets par défaut dans Mob Boss RP. Mais que faire si vous souhaitez créer vos propres actifs et les conserver pour les utiliser ultérieurement, soit par vous-même, soit avec vos coéquipiers ? Eh bien, c'est là que l' option d'actif entre en jeu. Et revenons à mon meilleur Rp. Laissez-moi vous montrer ce que cela fait et ce que vous pouvez en faire. Nous voici donc revenus là où nous nous étions arrêtés dans la vidéo précédente, et nous avons ici l'option acides. Ainsi, lorsque je sélectionne l'option Mes actifs, vous pouvez voir que nous avons trois options différentes. Nous avons des couleurs, du texte et des composants. Comme je l'ai mentionné, vous pouvez créer votre propre composant par défaut à partir de zéro. Alors laissez-moi vous montrer comment cela fonctionnerait. Et nous sommes toujours sur les couches, nous sommes toujours à l'intérieur des wireframes, nous nous ennuyons. Alors, c'est exactement ce que nous allons faire. Créons un bouton, par exemple nôtre, fais-le glisser vers quelque chose comme ça. Alors allons-y avec 50 peut-être. Et tapons quelque chose qui dirait, lisez la suite. Voyons voir. Je vais placer ce texte au centre de mon bouton. Je vais le sélectionner et utiliser, disons quelque chose comme dix pour le rayon d'angle. Débarrassons-nous de ce coin. Et pour le remplissage, allons-y avec cette couleur que nous avons choisie ici. Alors optons quelque chose de différent, comme une petite bordure, par exemple et allons-y, je ne sais pas, peut-être 16, juste un peu différent que les analystes appellent depuis le centre. Et je vais opter pour cette coque, et choisissons qu'elle soit blanche peut-être. Ensuite, je vais revenir à mes icônes. Et voyons voir, cupidité. Je vais utiliser cette icône, par exemple placer ici. Et je vais changer sa couleur pour prendre cette couleur ou celle que nous venons de sélectionner précédemment. Assurez-vous que ces deux éléments sont centrés en cliquant sur un élément, puis en cliquant ici. Ensuite, vous pouvez sélectionner tous vos éléments et les centrer ainsi. Je vais donc le laisser là. C'est 18 de ce côté, c'est 21 de ce côté. Alors allons-y avec quelque chose comme ça. Donc peut-être 20 de ce côté et 19 indécis. Je pense que ça va très bien fonctionner. Nous avons donc maintenant ces options. Appelons cela BT et Slash Biji pour créer notre propre bouton à cet effet. Et je vais les sélectionner tous les trois, appuyer sur Control G et appeler cela signifie btn, par exemple pour le bouton principal. Et je vais passer aux actifs contenus dans les composants, je vais cliquer dessus, ajouter des composants aux actifs. Il s'affichera en tant que btn principal. Donc, bouton principal, vous pouvez le placer dans un groupe par défaut ou créer un autre groupe, modifier, le synchroniser automatiquement avec toutes les instances. Un exemple est essentiellement version latente de ce bouton en ligne, nous avons décidé de créer peut-être un bouton plus large, un bouton plus grand ou un bouton plus petit. Ce ne sera qu'une version de ce bouton principal. Tout va donc rester le même à l'intérieur. Le contenu ne va donc pas changer. Peut-être que les couleurs ne changeront pas. Les interactions vont rester les mêmes. est juste la taille qui va être différente. C'est donc là que les instances entrent en jeu. Et tu peux changer. Vous pouvez synchroniser les modifications automatiques en utilisant cette option pour toutes vos différentes instances. Et c'est là que cette option est géniale. Je peux donc simplement appuyer sur « OK ». Et vous pouvez voir qu' il va apparaître ici. Nous avons donc ici notre bouton principal. À l'intérieur de notre groupe par défaut, nous avons notre bouton principal. Et vous pouvez voir à quoi cela ressemble. Maintenant, il est de couleur rouge. Et si je le souhaite, je peux simplement basculer, revenir à une autre page, disons au design. Ici, vous pouvez voir que nous avons une page blanche et je peux simplement la mettre à peu près ici. Maintenant, si je reviens à mes wireframes et que je modifie quelque chose, par exemple, je peux double-cliquer dedans. Cela m'amènera à la page séparée où j'ai ajouté mes éléments. Disons que je veux changer quelque chose , peut-être une couleur différente pour cette couleur. Supposons que vous cliquiez sur Appliquer, revenez en arrière. Vous pouvez voir que nous sommes dans une structure filaire, mais si nous revenons au design, modification s'appliquera tout de même, car il s'agit d'une instance de notre bouton principal. Même si c'est complètement pareil, il ne s'agit que d'une copie de la conception de ce que nous avons à l'intérieur de deux wireframes. Maintenant, comme j'utilise cette couleur et que j' aime beaucoup cette couleur, je peux simplement double-cliquer dessus pour l'appliquer. Mais supposons que je veuille sélectionner ma couche, entrer ici, l' appeler bouton principal, c'est bon. Et je veux choisir cette couleur. Peut-être parce que la couleur a déjà été ajoutée, je peux double-cliquer ici et ouvrir le bouton Vg. Ce que je peux faire, c'est dans mes actifs, en utilisant cette couleur. Il peut donc s'agir couleurs différentes et je peux me débarrasser de celle-ci, par exemple, ou simplement sélectionner celle-ci ou je peux double-cliquer et l' appeler, par exemple, somme. Ou cela peut être, disons, gris foncé ou quelque chose comme ça. Basculez pour continuer à vendre, appuyez sur Appliquer. Et puis, lorsque vous revenez ici, vous pouvez voir vos couleurs apparaître ici. Mais si je veux double-cliquer je peux sélectionner mon texte ici. Mais je peux le faire sous les textes, il suffit de cliquer. Et voici la version de réfutation de ce texte. Si vous modifiez la couleur, par exemple ou si vous la changez pour qu'elle ne soit pas en gras ou qu'elle ne change pas. , type ou taille de police complètement différents . Dans ce cas, vous pouvez simplement cliquer sur Plus pour l' ajouter à vos textes. Cliquez simplement sur Appliquer. Quand tu en sors. Ici, vous pouvez voir ce qu'il fait. Et ce qui est bien, c'est si je décide de choisir un autre texte, disons celui-ci, par exemple, et je peux le changer en Roboto et vous pouvez voir qu'il est mis à jour en temps réel, passer à l'autre pour éviter d'utiliser 16, passer à l'autre pour éviter d'utiliser 16, comme je lui ai dit de faire ici. Ou si nous appuyons sur mon bouton, quelqu'un appliquera cette couleur. Et vous pouvez comprendre pourquoi ces options sont intéressantes. Si je choisis de changer cette couleur en gris foncé, vous pouvez désormais voir où les actifs sont utiles. Vous pouvez bien entendu utiliser des actifs dans différentes options. Par exemple, vous pouvez créer des composants complets tels que formulaires de contact. Et vous allez réutiliser le formulaire de contact tout au long de votre conception. fait de disposer d'un atout, en termes de composants, vous sera donc en termes de composants, très bénéfique, car vous pouvez simplement le glisser-déposer en position et vous pouvez utiliser et réutiliser ce composant. Et si vous devez le mettre à jour, par exemple, votre client n'aime pas ce style d'icônes. Peut-être qu'ils ne veulent pas de champ, peut-être qu'ils veulent un plan. Vous pouvez simplement sélectionner ce composant dans son instance principale. Appliquez cette modification à notre icône et elle se synchronisera automatiquement sur toutes vos instances et sur tous vos composants, quel que soit leur emplacement dans votre design. C'est donc la différence entre les actifs que vous avez créés et ces composants. Parce que les composants sont en fait des options par défaut que vous pouvez obtenir avec plus de rP. Mais les actifs sont quelque chose qui vous est vraiment personnel et que vous avez créé pour chaque projet sur lequel vous allez travailler. Maintenant, une dernière chose que je veux mentionner est de savoir comment vous pouvez réellement partager votre bibliothèque avec vos coéquipiers. Donc, ici, lorsque vous passez la souris et que vous cliquez sur ces trois points, vous avez cette option de partage. Lorsque vous cliquez dessus, le message « Je veux montrer, êtes-vous sûr de vouloir partager cette bibliothèque de ressources avec l'équipe culinaire », vous dites « d'accord, parce que vous faites partie de cette équipe, souvenez-vous que lorsque vous vous rendez sur la page d'accueil vous pourrez la voir ». Nous avons maintenant cette option liée et nous avons cette option. Ainsi, lorsque je clique ici, vous pouvez voir la bibliothèque, notre premier projet, qui est notre bibliothèque. Et si vous êtes membre d' autres équipes, par exemple faites partie de votre équipe, vous faites partie d'autres bibliothèques. En tant que membre de l'équipe, vous pourrez les voir ici afin de pouvoir facilement passer de l'un à l'autre. Mais comme nous n'en avons qu' un que nous venons de créer, c'est le seul qui est montré pour le moment. Mais n'oubliez pas que vous pouvez avoir un nombre illimité de bibliothèques ici. Donc, par exemple , dans une bibliothèque, supposons que vos coéquipiers aient créé une palette de couleurs que vous allez utiliser. Une autre bibliothèque comprend, par exemple des éléments graphiques que vous allez utiliser pour, exemple , des travaux de documentation ou de marque, ou quelque chose comme ça. Ensuite, dans d'autres bibliothèques, il y a peut-être des images que vous allez utiliser sur votre site Web. C'est donc une excellente option car vous pouvez facilement basculer entre toutes ces bibliothèques. Prenez-en les éléments dont vous avez besoin. Ainsi, lorsque vous cliquez dessus, les éléments de ces bibliothèques seront présentés ici. Vous pouvez facilement les glisser-déposer sur votre page, par exemple si nous avons différents composants, allons voir différents boutons ou formulaires de saisie ou quelque chose comme ça. Ou si vous souhaitez utiliser différents styles de texte ou différentes couleurs, tout cela sera présenté ici. Et une excellente option, comme je l'ai dit, est cette fonction partagée que vous pouvez également annuler si, par exemple bibliothèque n'est pas terminée pour le moment et que vous allez la terminer à un autre moment. Ensuite, vous pouvez le partager à nouveau avec vos coéquipiers. Dans la vidéo suivante, je vais vous montrer un peu plus d' informations sur panneau Propriétés et ce qu'il peut faire. Alors je te verrai là-bas. 10. Panneau de propriétés: Nous avons déjà abordé le panneau des propriétés dans ce cours, mais je vais l'aborder un peu plus en détail et vous montrer quelques options supplémentaires que je n'ai pas mentionnées dans les vidéos précédentes. Alors allons-y. Donc, comme je l'ai mentionné, panneau Propriétés se trouve juste ici, sur le côté droit. Ainsi, peu importe ce que vous sélectionnez, il changera et sera mis à jour en temps réel. Mais ce que je n'ai pas mentionné, ce sont ces options juste en haut. Nous proposons ici des options d'alignement qui vous permettent d'aligner vos objets par rapport au tableau d'art dans lequel ils se trouvent à l'intérieur. Donc, par exemple, si vous prenez cet objet, le placez à l'extérieur, que vous le sélectionnez il ne saura évidemment pas où l'aligner. Il va donc simplement attaquer votre tableau d'art et viser votre tableau d' art afin que vous puissiez le positionner horizontalement de gauche au centre, n'est-ce pas ? Ou vous pouvez le positionner en haut. mode ligne verticalement ou en bas, vous pouvez alors répartir vos objets. C'est donc génial. Si vous avez plusieurs options comme celles-ci, par exemple, vous les avez. Vous pouvez donc distribuer horizontalement. Regardez ce qui se passe lorsque je clique dessus pour m' assurer qu'il y a le même espacement entre mes icônes. Ou vous pouvez les distribuer verticalement. S'ils se trouvent ainsi, vous pouvez les sélectionner et cliquer sur cette option pour les placer ici. Mais si vous le souhaitez, vous pouvez cliquer ici. Et cela va les organiser très proprement et les positionner comme vous le souhaitez. Mais revenons quelques étapes en arrière et positionnons-les comme elles fonctionnaient auparavant. Parce que je veux vous montrer cette option afin que vous puissiez les placer ici si l'icône est plus grande, par exemple, elle ne sera pas avec celles par défaut, mais si vous utilisez la vôtre, vous pouvez simplement cliquer ici. Et puis, lorsque vous survolez, vous avez ces options, ce qui est très pratique si vous souhaitez augmenter l'espacement entre elles. Et évidemment, ajustement automatique entre toutes sortes d'options différentes. Maintenant, lorsque vous en sélectionnez un, ou lorsque vous en sélectionnez plusieurs, comme vous l'avez vu, cela indique que trois composants ont été sélectionnés. Ou disons que deux composants ont été sélectionnés. Un, un 11 par défaut que j'ai créé, par exemple , et puis vous avez ces options. C'est donc pour le cacher. Il est donc toujours là pour que vous puissiez voir ce que c'est. Mais lorsque vous allez le prévisualiser, il ne sera pas visible. C'est pour le désactiver. Vos utilisateurs ne pourront donc pas cliquer, par exemple vous pourrez le verrouiller ou le déverrouiller, puis il ne pourra plus se déplacer, ils ne pourront pas le sélectionner et d' autres choses de ce genre. Vous avez la mise en page intelligente. Ainsi, lorsque je sélectionne cette option et que je passe à la mise en page intelligente, vous pouvez choisir automatique ou manuel. Vous pouvez utiliser une largeur fixe, par exemple ou une hauteur fixe. Vous pouvez cocher ou décocher le bateau. Donc, lorsque je commence à faire glisser, la hauteur reste fixe, mais la largeur sera différente. Ou tu peux faire l' inverse. Comme vous pouvez le voir, je ne peux plus modifier la hauteur. Désolé, attendez plus longtemps, mais je peux modifier la hauteur dans ce cas. Et vous pouvez choisir l'endroit où vos articles doivent être collés. Dans ce cas, ils restent sur le côté gauche, mais vous pouvez les déplacer vers la droite et vous pouvez voir qu'ils se déplacent vers la droite en ce moment. Mais dans tous les cas, vous pouvez utiliser automatique et ajuster comme vous le souhaitez et laisser mach plus rP faire sa magie et s'appliquer à partir de là. Ici, nous avons la largeur, la hauteur, axe x, l'axe y, puis nous avons la rotation. Donc, par exemple, 45 degrés, vous pouvez voir ce que cela fait. Et voici les options avancées pour l'espace horizontal et l'espacement vertical. Donc, lorsque je sélectionne ceux-ci, vous pouvez voir ici que nous avons un espacement horizontal, mais si nous les retournons, vous pouvez voir que nous aurons alors un espacement vertical. Le panneau Propriétés contient également ombres pour la plupart des objets. Donc, quand je clique sur Shadow et que je tape quelque chose comme, je ne sais pas, 6.10 ou dix. Vous pouvez voir que maintenant j'ai inclus l'arrière-plan superficiel ici. Je peux changer cette chaîne en cliquant ici et en modifiant sa valeur alpha, qui est essentiellement sa valeur d'opacité. Ici, vous pouvez modifier les couleurs afin pouvoir choisir la couleur de votre choix. Mais je vais juste opter pour le noir par défaut dans ce cas, peut-être quelque chose comme ça. Mais Alpha, c'est évidemment trop fort. Peut-être dix pour cent, ça va très bien le faire baisser . Mais comme cette option est sélectionnée, je vais simplement décocher l'ombre correspondante. Et puis, quand je sélectionne tout, ça va fonctionner comme avant. Donc, quand je l'augmente à 20, je dois le sélectionner et décocher à nouveau l'ombre dessus. Il y aura juste l'ombre sur le fond de vos éléments. l'ai mentionné précédemment, l'exploration en position fixe est Comme je l'ai mentionné précédemment, l'exploration en position fixe est idéale. Si, par exemple, nous avons navigation juste ici en haut, vous devez sélectionner l' ensemble de la navigation. Disons que c'est toute notre navigation, quelque chose comme ça. Ainsi, lorsque vous utilisez un défilement initial et que vous dépensez votre tableau d' art , il restera dans cette position précise et ne bougera pas du tout. Encore une fois, en fonction de ce que vous avez sélectionné, vous aurez différentes options ici. Et nous l'avons déjà abordé dans les vidéos précédentes. Je ne vais donc pas y consacrer trop de temps car je veux passer à la leçon suivante, qui concerne les interactions. Il se trouve ici, et je vous verrai dans la prochaine vidéo. 11. Interactions: Avoir des designs statiques, c'est bien, mais lorsque vous leur ajoutez des interactions, cela donne juste un peu de vie à vos designs. C'est donc là que le panneau d'interactions est utile et qu'il propose d'excellentes options dans ma plus rP. Alors allons-y et laissez-moi vous montrer ce que vous pouvez faire. Très bien, alors voici où nous nous sommes arrêtés la fois précédente. Parlons maintenant des interactions. Maintenant. En gros, les interactions se situent ici et c'est ce qui se passe entre deux éléments ou deux aéroports ou sur un seul élément où vous souhaitez ajouter une sorte d'animation juste pour montrer ce qui se passe lorsque l'utilisateur interagit avec cet élément en particulier Vous pouvez voir ce qui se passe ici. Vous pouvez sélectionner un composant ou un tableau de dessin et cliquer sur Ajouter une interaction pour ajouter d'autres interactions. Vous pouvez également extraire un point de lien des composants vers n'importe quel composant cible ou vers une page. Maintenant, ce point de lien est ce qui est écrit ici. Voici donc ces points rouges et, en gros, vous pouvez le pointer vers vous-même, vous pouvez le pointer vers d'autres éléments ou vous pouvez le pointer vers d'autres aéroports, voire d'autres pages si vous souhaitez qu'il interagisse entre cette page ou cet aéroport en particulier ou une page séparée ou un RPA. Donc, en gros, lorsque vous souhaitez ajouter différentes interactions, vous pouvez choisir des cibles. Vous pouvez donc choisir entre les composants et vous pouvez choisir entre les pages. Et vous pouvez le changer pour, par exemple self. Et voici les déclencheurs. Les déclencheurs sont essentiellement ce qui déclenchera cette interaction. Ainsi, quel type de déclencheur l'utilisateur va déclencher cette interaction pour qu' va déclencher cette interaction elle commence réellement et se produise réellement. Ce que nous avons ici, c'est notre double-clic, le clic droit de la souris vers le bas, la souris vers le haut et toutes sortes de ces différents déclencheurs. Ensuite, nous avons des commandes. Une fois que nous aurons réellement le déclencheur, que se passera-t-il ? Nous avons donc les options Déplacer, zoomer, faire pivoter, afficher, masquer, faire défiler. Ce ne sont donc que quelques commandes de base, mais nous aurons également des commandes plus avancées plus tard. Nous avons alors une valeur relative. Donc, si elle est cochée davantage par rapport à la position, si elle n'est pas exploitée, plus en fonction de la position spécifique. Donc, s'il se trouve plus à cet emplacement spécifique, vous pouvez utiliser les valeurs x et y pour le positionner à cet emplacement spécifique. Ensuite vient l'assouplissement. Et c'est essentiellement à cela que ressemblera cette interaction . Est-ce que ce sera strictement du point A au point B ? Ou est-ce que ce sera linéaire ? Y aura-t-il un assouplissement, un assouplissement ? Cela signifie en gros que cela va s'intégrer facilement à l'animation ? Est-ce que vous allez facilement sortir de l'animation ? Ou est-ce que ce sera juste directement d'un point A à un point B ? Au cours de cette interaction. Après cela, nous avons la durée. Alors, combien de temps durera cette interaction  ? Et puis il y a le délai à la fin, retarde essentiellement ce qui est dit. Donc, après avoir cliqué dessus ou après lui avoir donné une sorte de commande, il n'y a pas de délai ou est-ce que cela s'est produit instantanément ? C'est donc là que le délai est utile. Explorons donc notre exemple parfait avec un état de survol de base. Nous avons donc ici le bouton que nous avons créé précédemment. Et pour approfondir ce bouton, double-cliquez dessus et passons à l'intérieur. Et sélectionnons notre bouton. Et voici ce que nous avons, c'est l'intestin de l'État. Nous avons donc ici tous les états prédéfinis que MC plus rP souhaitent que nous incluions. Bien sûr, c'est tout. Si nous le voulons. Si ce n'est pas le cas, vous pouvez cliquer sur Ajouter un état comme nous l'avons déjà exploré précédemment, puis vous pouvez ajouter votre propre état personnalisé. Nous avons donc ici tous les états habituellement utilisés dans la conception de l'interface utilisateur. Nous avons donc l'état normal, qui est juste cet état de base sans aucune sorte d'animation, que nous avons sélectionné. Donc, généralement, sur des états sélectionnés, vous souhaitez que vos utilisateurs se concentrent sur des états sélectionnés pour qu'ils comprennent qu'ils ont sélectionné un élément. Nous avons l'état désactivé, c' est-à-dire qu'ils ne peuvent pas le sélectionner à ce stade, généralement parce qu'ils doivent effectuer certaines opérations pour pouvoir le sélectionner. C'est donc là que les personnes handicapées sont utiles. Nous avons l'horreur de masse. Alors, que se passe-t-il lorsque je passe la souris dessus ? Cela ne va pas changer. Et cela est particulièrement utile car nous voulons que nos utilisateurs puissent comprendre qu'ils peuvent faire quelque chose. Et le survol de la souris est l'option idéale pour attirer leur attention, pour pouvoir réellement effectuer une certaine tâche. Enfin, nous sommes en dépression. Alors, que se passe-t-il lorsqu' ils cliquent sur le bouton, lorsqu'ils appuient dessus ? Qu'est-ce qui va changer ? Passons au survol de la souris. Donc, lorsque je clique ici, cela modifiera spécifiquement le survol de la souris. Changeons donc sa couleur, par exemple, passons à Propriétés. Maintenant, sélectionnons la couleur de remplissage et choisissons une couleur un peu plus foncée. Donc, par exemple, quelque chose comme ça. Parce que j'aime cette couleur, je vais l'ajouter. Nous sommes en mode survol de la souris. Je vais donc juste l'ajouter à mes couleurs ici. Et je vais double-cliquer et l'appeler, par exemple survoler, quelque chose comme dette. Ensuite, vous pouvez passer aux interactions si vous le souhaitez. Et quand je passe à la normale, vous pouvez voir que nous avons cette couleur. Lorsque je suis passé au survol de la souris, nous avons cette colonne. Vous pouvez donc passer facilement de l'un à l'autre. Et vous pouvez appuyer sur Appliquer pour appliquer ce bouton. Et pour avoir un aperçu rapide, je peux cliquer ici. Et quand je survole, vous pouvez voir les changements, la couleur. À la couleur de survol que nous avons réellement créée en ce moment. D'accord, essayons donc de le connecter à un tableau d'art séparé, par exemple , ajoutons une partie sous R. Et créons-le ici même. Alors, oups, pas ça. Cliquons sur la flèche et zoomons un peu. Et ajoutons un autre sous-tableau artistique. Passons à Propriétés. Ellen est passée en 1920 en 1080. Il est donc sélectionné pour être identique. Ou voyons voir, celui-ci est en 1080, quelque chose comme ça. Nous avons donc le port sub R ici. Et quand je clique ici, le lien pointera vers ce tableau d'art. Cela va donc montrer notre port. Vous pouvez le positionner au centre, vous ne pouvez en animer aucun. Et disons que SlideUp s'estompe encore mieux. Vous pouvez montrer le masque et l'assouplissement du masque facilitera l'entrée et la sortie. Donc, pour accéder facilement à l'animation, il suffit de cliquer sur , d' accord, maintenant à l'intérieur de cette carte subR R, mais je vais passer à Propriétés. Appuyez sur T pour l'outil de texte et tapez quelque chose comme Voici votre fenêtre contextuelle, par exemple, et évidemment, changeons-la en quelque chose d'un peu plus sombre, comme peut-être une couleur gris foncé. Passons à 16-45, quelque chose de vraiment énorme. Et positionnons-le au centre de notre page, quelque chose comme ça. Donc, quand je reviens ici et que je prévisualise notre prototype, alors je le déclique, il s'affiche, mais comme vous pouvez le voir lorsque je clique dessus, rien ne se passe vraiment. Alors, que faire dans ce cas, je veux cliquer pour le fermer en gros. Donc, ce que tu peux faire, c'est revenir ici. Vous pouvez double-cliquer, et vous pouvez voir ici vos options de modification. Sous les commandes, vous pouvez voir ces trois points. sur Modifier, d'accord, ici et ici, vous pouvez voir Afficher le masque et cliquer sur le masque pour fermer. Cliquez sur OK, sortez, appuyez sur Actualiser, et essayons celui-ci pour voir si cela fonctionne et fait l'affaire. Une fois chargé, cliquez dessus et le masque s'affichera. Quand je clique sur le masque, il va le masquer. Donc, encore une fois, cliquez ici pour le masquer. Encore une fois, c'est excellent, pas seulement pour les fenêtres contextuelles, mais disons que les modules d'abonnement sont destinés aux modules de courrier électronique ou à Sunday comme ça. Lorsque vous souhaitez simplement afficher une information rapide, il n'est pas nécessaire qu'elle soit en plein écran. N'oubliez pas que je l'ai créé pour qu'il soit la même taille que ce tableau d'art. Il peut être au centre. Ce sont des interactions. Vous pouvez constater que vous pouvez ajouter des interactions, deux composants distincts ou l'ensemble de l'aéroport. Ou une chose que je n'ai pas mentionnée, c'est que vous pouvez même lier ces deux pages distinctes si vous le souhaitez. Vous pouvez donc simplement faire glisser cette petite poignée rouge vers la page séparée de votre choix et vous pouvez la lier où vous le souhaitez, quelque chose comme ceci. Ainsi, lorsque les utilisateurs cliquent dessus, ils accèdent au design. Vous pouvez voir le saut de page. Vous pouvez donc accéder à cette page, vous pouvez l'animer. Vous pouvez voir où vous voulez et en faire. Comme nous l'avons fait précédemment avec ces options. Ce sont donc des interactions et c'est à cela que cela sert. Dans la vidéo suivante, je vais montrer des notes. Alors je te verrai là-bas. 12. Notes: Les notes sont idéales si vous souhaitez ajouter des nœuds à vos collègues ou à vos clients, simplement pour les informer de la page qu'ils consultent et de ce qu'elle contient. Bon, nous voici donc de retour dans notre fichier et les nœuds se trouvent juste ici. Et vous remarquerez que mes wireframes sont sélectionnés, donc il y a des notes de page et je peux ajouter quelque chose comme, par exemple ne sont que des wireframes. Et quand j'appuie sur Control S pour l' enregistrer et que je clique sur Aperçu, la note de page s'affiche ici. Maintenant, si vous avez plusieurs nœuds laissez-moi vous montrer comment cela fonctionne. Donc, par exemple, si je sélectionne cette option et que je fais juste quelques espaces ci-dessous, colle, je paie, par exemple, appuyez sur Control S et cliquez sur Aperçu une fois de plus. Cela va me montrer ces notes de plusieurs pages. Maintenant, vous pouvez effacer tous les nœuds ici. Vous pouvez simplement appuyer sur Supprimer sur votre touche, ou vous pouvez simplement la sélectionner comme suit. Appuyez sur Retour arrière et supprimez tous les nœuds inutiles que vous souhaitez. Maintenant, ce sont les notes de page. Vous pouvez également ajouter des notes à différents éléments de vos pages. Donc, par exemple si je sélectionne ce bouton, vous pouvez voir que nous avons ici le composant et ici nous avons le groupe parce que c'est le nom du groupe. Donc, si je sélectionne ce composant, disons, par exemple aimez-vous cette icône peut-être. Ensuite, je peux sélectionner les textes. Disons que cela dit quelque chose comme pensez-vous que cette taille est trop petite ou quelque chose comme ça ? Vous pouvez donc voir à quel point cela est vraiment utile. Ainsi, lorsque j'appuie sur Control S et que je le prévisualise, une fois de plus, vous pouvez voir que nous avons maintenant plusieurs éléments, donc les notes de page. Il s'agit donc du nœud de la page entière. Ensuite, nous avons le bouton principal. Et quand je survole, vous pouvez voir le numéro un et voici le numéro un qui se trouve juste ici. Et puis en voici un pour le type. Et le numéro deux apparaîtra à côté de ce type afin que vos clients soient des coéquipiers. Tu sais de quoi parle cette note ? Nous avons donc ici les notes de page concernant la page entière. Nous avons ici le bouton principal à propos de ce bouton. Et enfin, au type correspondant à ce type ou situé dans le wireframe. Ainsi, lorsque je passe au brief de conception, par exemple, vous pouvez voir qu'il est vide et nous n'avons pas les notes car les nœuds sont liés à vos pages. Dans la vidéo suivante, nous allons parler de nos ports et aéroports. Quelle est la différence et ce que vous pouvez en faire ? Alors je te verrai là-bas. 13. Tableaux d'art et sous-tableaux: Nous avons déjà abordé beaucoup de choses sur les tableaux artistiques et les ports médiocres dans cette classe. Mais je voulais juste vous montrer un autre exemple concernant l'application mobile, car ce cours est principalement destiné aux sites Web et à ces types de tailles. Je veux donc juste vous montrer celui-ci également et ce que vous pouvez faire dans ce cas. Nous voici donc de retour en force et je me suis ouvert au kit d'interface utilisateur Joe, Joe go, qui est ce kit d'interface utilisateur. Et pour ouvrir les modèles, vous pouvez simplement les ouvrir, appuyer sur Modifier, enregistrer, puis choisir dans quelle équipe ou dans quel espace personnel vous souhaitez les enregistrer. Et ça va s'ouvrir comme ça pour que tu puisses passer d'une page à l' autre ici même. Je suis actuellement sur la page de connexion, et j'ai rapidement créé ce sous-tableau en cliquant à nouveau sur ce bouton ici. Maintenant, j'ai déjà montré cet exemple, donc je ne vais pas entrer dans trop de détails, mais lorsque vous cliquez ici et que vous le connectez, vous pouvez cliquer pour afficher notre port. Vous pouvez le positionner à l' endroit où vous souhaitez le résoudre, disons en bas dans ce cas, glisser vers le haut, l'estomper, le zoomer ou ce que vous voulez. Vous pouvez cliquer sur « Fermer à faire absolument ». Comme je l'ai expliqué dans l'une des vidéos précédentes. Et j'ai juste accordé un assouplissement un peu plus long dans ce cas. Voici à quoi cela ressemble lorsque vous cliquez sur le bouton, il s'affiche lorsque vous cliquez à l'extérieur, il ne l'affichera pas un peu. C'est idéal pour le prototypage pour raisons évidentes, car vous pouvez montrer à vos clients ce que vous voulez montrer avec ces messages d'erreur, par exemple , ou à vos collègues pour qu' ils l'explorent un peu plus. Mais ce qui est différent, c'est que nous avons maintenant la maquette de l'appareil et nous avons le cadre de l' appareil dans ce cas. Vous pouvez donc facilement le montrer à vos clients. Et c'est un iPhone, car cette taille du plan de travail correspond à la taille de l'iPhone. Si vous choisissez une autre taille, cela nous indiquera cette taille différente pour ce projet en particulier. Mais chaque page est endettée, la taille de l'iPhone, peu importe ce que j'ai essayé de prévisualiser, ça m'apparaîtra dans cette taille. Une autre chose que je voulais vous montrer est que lorsque vous sélectionnez votre tableau d'art, vous pouvez à nouveau définir la mise en page intelligente, la couleur d'arrière-plan , etc., mais vous pouvez également le retourner. Donc, si je choisis de le positionner un peu plus haut, puis de sélectionner ce plan de travail et d'inverser sa position. Vous pouvez voir que vous pouvez facilement passer du mode portrait au mode paysage. Il suffit de cliquer sur ce bouton pour conserver les mêmes dimensions, il suffit de les inverser pour la largeur et la hauteur. C'est donc en gros tout ce que je voulais vous montrer à propos de nos planches et de nos sous-aéroports. Et c'est la seule chose que j'ai pensé et que nous n'avions pas déjà abordée, je vous ai montré comment utiliser ces modèles gratuits. Encore une fois, si vous souhaitez accéder aux modèles, vous pouvez simplement cliquer ici, cliquez sur modèles. Et cela vous amènera à cette page avec les modèles que vous pouvez modifier n'importe lequel de ces modèles et les ajuster comme vous le souhaitez. Vous pouvez voir le nombre de pages et éléments qu'ils contiennent, le nombre de couleurs, et vous pouvez les modifier et les mettre à jour comme vous le souhaitez. Dans la vidéo suivante, je vais vous montrer quelques options de saisie et comment utiliser le type dans Mock plus rP. Alors je te verrai là-bas. 14. Travailler avec la typographie: La typographie est un élément crucial de toute conception d'interface utilisateur. Il est donc très important de savoir comment travailler avec la dactylographie, en particulier avec Mock Plus RP . Dans cette vidéo, nous allons donc aborder quelques configurations de type de base et certains éléments de base. Comment travailler avec la typographie et comment l'utiliser dans notre p.ball. Allons-y. Nous voici donc de retour dans nos fidèles vieux wireframes. Et lorsque je sélectionne ce type ou que je peux le supprimer , j'appuie sur T sur mon clavier, et ce type de texte est placé en place. Comme je l'ai déjà créé, je peux l'appliquer à mon texte et vous pouvez voir que cela change de couleur. Et je peux changer cette couleur de remplissage quelque chose comme le noir foncé ou quelque chose comme ça. Je peux toujours revenir en arrière et cliquer ici. Maintenant, il va m'offrir ces différentes options qui me permettront de passer de la lumière l'obscurité en cliquant sur un bouton et de conserver la même configuration, même positionnement. Vous pouvez donc également accéder à Composants et glisser-déposer l'option Type directement là, si vous , ou simplement appuyer sur D, comme cela a déjà été expliqué, puis vous pouvez jouer avec pour taper. Quelles sont donc vos options réelles ? Nous avons donc ici la famille de polices. Ce sont donc des familles de polices actuellement incluses, mais je discuterai avec l' équipe dans les prochaines mises à jour qu'ils ajouteront . J'espère qu'ils ajouteront Google Fonts et Adobe Fonts. Vous allez donc avoir une plus grande variété de polices. Et l' option de téléchargement personnalisé de vos polices personnalisées sera également supprimée à l'avenir, mais ce sont vos options pour le moment. Ainsi, lorsque vous sélectionnez votre famille de polices, vous pouvez sélectionner différentes tailles parmi ces tailles prédéfinies. Ou vous pouvez le modifier en tapant simplement ce que vous voulez, quelle que soit la taille que vous souhaitez. Ensuite, nous avons déjà abordé la couleur et fonctionnement de la couleur dans un autre analyseur. Ici, nous avons l'option en gras ici, nous avons l'option en italique. Nous avons ici l'option sous-jacente. Si vous souhaitez ajouter le sous-jacent, nous avons le barré, et ici nous avons l'espacement des caractères. Il s'agit donc simplement de l'espacement entre les caractères. Donc, si Rights Act 20, vous pouvez voir ce que cela fait. Ici. Ce que nous avons, c'est si j'augmente ce chiffre à, disons, 80, rien ne se passe vraiment parce que c'est l'espace entre deux lignes. Donc, si je tape quelque chose, que je le place sur une nouvelle ligne et que je le ramène à 56, vous pouvez voir comment cela fonctionne. Et si nous le ramenons à 36, vous pouvez voir à quel point notre type est écrasé. En dessous, nous avons des options d'alignement. Nous avons donc aligné un alignement à gauche, centre, un alignement, un alignement à droite , une justification, ce qui signifie que les deux côtés auront les mêmes valeurs et la même largeur. Dans ce cas, cette valeur maximale sera différente. Le Guatemala sera différent, mais si vous les justifiez, ils seront exactement les mêmes. Ici. majuscules. Tout sera donc en majuscules, minuscules ou en majuscules. Donc, chaque mot sera exactement comme ça. Et si vous ne le souhaitez pas, vous pouvez simplement cliquer pour le désélectionner. Ici, nous avons l'indentation du texte, ce qui est idéal pour les paragraphes. De toute évidence. Ici, nous avons un retrait de texte vertical. Ici, nous avons une liste numérotée, et ici nous avons une liste à puces. Une fois de plus, cliquez pour le désélectionner. Ce que nous avons ici est la largeur automatique, qui est la largeur de votre texte incluse. Ici, nous avons la hauteur automatique, fondamentalement la même chose, et ici nous avons une taille fixe. Donc, lorsque vous vérifiez cela, cela ne dépassera pas cette taille fixe. Alors laissez-moi passer à la largeur automatique. Donc, quoi que je tape, je peux l'ajuster et taper quelque chose de nouveau sur la page. Vous pouvez voir que, parce que c' est une largeur, elle sera automatiquement redimensionnée. Mais s'il s'agit d'un poids fixe, par exemple , d'un élément nouveau sur la page que vous pouvez voir, cela le place sur la nouvelle ligne en place, quelque chose comme ça. Je vais donc opter pour largeur automatique et je vais me débarrasser de ce texte à partir de maintenant comme ça. Et je veux vous montrer quelques options supplémentaires pour que vous puissiez avoir le fond et les aquarelles. Vous pouvez ajouter une bordure autour de votre texte. Vous pouvez ajouter une couleur de remplissage distincte si vous le souhaitez. Et vous pouvez simplement courber les bords de ces coins si vous le souhaitez, mais je ne vais pas vous recommander de le faire. Pour les extensions, nous avons une position fixe avec l' exploration, comme toujours, nous avons des infobulles lorsque vous souris, vous pouvez voir de quoi il s'agit. Enfin, nous avons des liens externes. Donc, quand j'ajoute cela, disons google.com, par exemple hit. D'accord, et vous pouvez voir qu'il a ajouté un lien. Donc, lorsque je clique sur Aperçu très rapidement puis que je reviens en arrière et que je vois que je tape quelque chose, quand je passe la souris dessus, vous pouvez voir que maintenant nous avons le lien, lorsque vous cliquez, il m' amène sur google.com. C'est donc essentiellement le type en quelques mots. Ce que je veux enfin vous montrer, c'est qu'il faut se débarrasser de ce lien externe. Lorsque j'appuie sur Control D pour le dupliquer à quelques reprises, vous pouvez voir que l'option d' espacement apparaît, c'est 19 à la fois, mais disons que je veux utiliser quelque chose comme la turbine T. Peut-être que nous y voilà. Nous y sommes. Et maintenant, quand je passe juste ici, vous pouvez voir que nous en sommes à 20. Je tiens également à vous montrer ces options fonctionneraient exactement de la même manière pour les formes que pour le texte. Ainsi, lorsque vous souhaitez les séparer, vous pouvez le faire. Vous pouvez les positionner comme vous le souhaitez. Vous pouvez les espacer, les distribuer avec eux, comme vous le souhaitez. Je vais donc vous montrer comment cela fonctionne si je peux saisir et sélectionner les trois, quelque chose comme ceci, cliquez ici. Donc, en gros, la même chose qu'avec les formes. Vous pouvez maintenir la touche Shift enfoncée pour afficher le même espacement entre vos éléments. C'est donc le type. En gros, dans la prochaine vidéo nous allons aborder le mode premium. Et je vais vous donner un peu plus d'informations à ce sujet qu'auparavant. Alors je te verrai là-bas. 15. Mode de prévisualisation: Le mode Aperçu vous permet de voir vos prototypes et de voir comment les autres membres de votre équipe ou les personnes que vous invitez à les consulter peuvent les voir. C'est donc une partie très importante de more plus r p. Alors laissez-moi vous montrer comment cela fonctionne un peu plus en détail que je ne l'ai fait jusqu'à présent. Donc, si nous revenons à ici, voici notre mode de prévisualisation. Donc, encore une fois, vous pouvez cliquer et commencer depuis page d'accueil ou partir de la page actuelle. Dans notre cas, la page d'accueil est un organigramme, car il s'agit de la première page de la liste. Ou vous pouvez partir de la page actuelle. Vous pouvez le choisir en appuyant sur Control Command P. Maintenant, quand il se lance, comme vous pouvez le voir, il se charge car il propose toutes sortes d'options différentes. Et tout a commencé à partir de cette page. Nous avons déjà expliqué les notes de page. Et ici, vous pouvez ajuster le zoom à la largeur, à l'écran, quelque chose comme ça. Et ici, vous pouvez avoir le plein écran, vous pouvez le quitter comme je l'ai déjà expliqué. Et vous pouvez masquer ces panneaux si vous le souhaitez, choisissez. Lorsque vous cliquez sur Partager, vous devez afficher le Panneau de configuration. Toutes ces options s'offrent à vous. Ainsi, lorsque vous partagez ce lien d'aperçu avec un autre membre de votre équipe, vous pouvez réellement choisir ce que vous souhaitez qu'il voie. Et c'est vraiment important pour une raison simple. Lorsque vous le partagez avec certains utilisateurs testeurs, vous voulez leur permettre de tester votre prototype, sans leur donner trop d'options. Et les fous, en gros, leur tiennent la main pendant qu'ils font ça parce que vous voulez qu'ils découvrent les choses par eux-mêmes où ils doivent cliquer, où ils doivent apparaître. Si vous chronométrez ces interactions, vous ne voulez pas qu'elles obtiennent de l'aide, mais qu'elles puissent se débrouiller seules. De cette façon, vous serez en mesure de mesurer ce qu'ils font. Et pour cela, ces paramètres jouent un rôle très important car vous pouvez afficher ou masquer les panneaux de configuration. Donc, quand je clique juste là et que je clique sur Copier, par exemple et que j'ouvre un nouvel onglet, Control V, je le colle dedans. C'est notre nouvel onglet, et vous pouvez voir qu' ils ne voient rien. Ils devront donc se débrouiller seuls car nous l'avons volontairement fermé à partir d'ici. Elle sera donc panneau de contrôle. Vous pouvez afficher la zone de liens passez la souris ou ne pas le découvrir vous-même. Nous montrons au transporteur le contenu en dehors du tableau d'art, ne doit pas définir de marqueurs, définir un mot etc. Il est donc très important, si vous souhaitez approfondir le partage, d'explorer également cette option. Donc, lorsque nous reviendrons ici, nous aurons plus d'options. Donc, toujours montrer au transporteur, en gros ce que nous avons vu ici pour le partage. Mais c'est ce que vous vos coéquipiers et les chefs de projet, par exemple ce qu'ils vont voir ici. Donc, en gros, c'est tout pour le partage. Dans la vidéo suivante, je vais expliquer dans cette option de téléchargement du prototype de quoi il s'agit et quoi cela sert. Alors je te verrai là-bas. 16. Téléchargement de Prototypes: Parfois, vous souhaitez télécharger vos prototypes depuis Mach plus rP, les partager avec vos collègues, avec des clients, et vous ne souhaitez pas les télécharger et les publier tout de suite. Peut-être que vous êtes sous contrat de confidentialité. Vous n'avez peut-être pas accès à Internet. Peut-être que vous voyagez quelque part et que vous voulez avoir juste ces prototypes. Pensez-y pour revoir certaines notes que vous avez. Toutes sortes de ces différents scénarios et décès où option de téléchargement est utile. Laisse-moi te montrer. Alors voilà, juste en haut, vous avez cette option de téléchargement. Vous pouvez donc télécharger le package de présentation du prototype hors ligne. Et voici les phrases clés ici, package de présentation, utilisé pour les présentations. Ainsi, lorsque vous souhaitez le présenter hors ligne, lorsque vous êtes en déplacement, peut-être que vous êtes sur votre ordinateur portable, que vous voyagez, que vous vous rendez sur votre lieu de travail ou pour vos clients. Il existe différentes options et scénarios dans lesquels vous pouvez utiliser quelque chose comme ça. C'est très important de le faire car vous voulez toujours avoir une sauvegarde. C'est formidable de l'avoir dans le cloud, mais il arrive que des personnes n'aient pas accès à Internet. Peut-être que tu es juste là. Alors pourquoi les transférer vers le Cloud alors que l' option est disponible sur votre site, par exemple, vous souhaitez peut-être la partager en interne à cause des accords de confidentialité, comme je l'ai dit. Il existe donc très peu de scénarios dans lesquels vous pouvez utiliser quelque chose comme ça et c'est vraiment utile. vous suffit donc de cliquer ici. Cela va vous montrer une plage de pages. Je vais sélectionner la gamme Paint et je vais sélectionner la boutique que je souhaite pour que vous puissiez décocher ce que vous voulez faire. Je souhaite les explorer et exploiter tous les deux afin que nous puissions simplement les sélectionner tous. Vous pouvez voir que deux d'entre eux sont sélectionnés. Et vous pouvez voir toute la plage de pages parce que j' ai deux pages à l'intérieur de mon dossier. Vous pouvez afficher le panneau de page, vous pouvez afficher la direction nord, afficher la barre d'outils. Vous pouvez afficher des liens vers tous ces paramètres dont nous avons parlé et que nous avons utilisés. D'accord, une fois que vous serez prêt à télécharger, le téléchargement prendra un peu de temps. Et en fonction de votre machine, en fonction de votre projet. Donc, par exemple, si vous optimisez vos images, cela prendra un peu plus de temps. Si vous avez utilisé différentes pages, cela va prendre un peu plus de temps. Mais dans ce cas, comme vous pouvez le constater, il s'est exporté très rapidement. Alors laissez-moi le déposer dans un dossier. Maintenant, je vais lui montrer ce dossier, à quoi il ressemble. Alors on y va. Nous avons cette option pour un fichier zip, cliquez avec le bouton droit de la souris. Et je vais en extraire deux ici et les cacher juste pour que vous puissiez le voir un peu mieux. Nous y voilà. Et il a extrait ces actifs de manière solide et s' débarrassé de ce fichier zip. En fait. Débarrassez-vous-en en appuyant sur Supprimer. Nous y voilà. Et nous avons ici tous ces actifs qui sont inclus par défaut pour plusieurs SRP. Ensuite, nous avons les options de données, qui sont toutes les images incluses à l'intérieur. Et évidemment, il est très important que vous nommiez vos couches. Sinon, vous allez vous retrouver avec de tels résultats. Mais en gros, il les exporte simplement forme de fichiers d'espace réservé. Lorsque vous partagez avec vos développeurs, les noms de couches que vous avez publiés sont conservés. Enfin, nous avons la page d'index, double-cliquez dessus et elle s' ouvrira en tant que nouvelle page. Vous pouvez voir ce que vos utilisateurs vont voir à l'intérieur, par exemple, du package de présentation que vous souhaitez leur montrer. Ils ont donc toutes ces options dont nous avons parlé précédemment. Si vous le souhaitez, vous pouvez inclure des nœuds ici. Vous pouvez masquer ces panneaux. Vous pouvez afficher ces panneaux. Vous pouvez faire ce que vous voulez et explorons-les une dernière fois. Et voilà. Cela nous a mené à cette page. Les effets de survol fonctionnent toujours. Cela fonctionne toujours. Tout est donc comme ici, mais c'est juste une version portable et plus encore, disons, où vous pouvez l'emporter où vous voulez parce que vous l'avez stockée sur votre machine. C'est pourquoi le téléchargement prototypes est une option si intéressante. Je vais l'aimer et je vous recommande de l' utiliser tout le temps. On dirait que je m'en sors aussi. 17. Publication de prototypes: Une fois que vous êtes prêt à publier vos prototypes et à les transférer hors de vos mains pour les intégrer à l'ensemble de l'organisation, par exemple, ou simplement les partager avec vos clients, collègues, les parties prenantes, les investisseurs, etc. C'est là que l'option de publication d' un prototype entre en jeu. Et il se trouve juste ici , dans le coin supérieur droit. Mais peut-être pouvons-nous jouer avec certains paramètres. Peut-être que je peux ajuster cela et m' asseoir pour accéder aux organigrammes, page jump animate. Allons-y sans assouplissement. C'est très bien. Je veux donc juste pouvoir m'animer vers cette page et vous pouvez voir que lorsque je la sélectionne, cela montre qu'elle s'anime vers les organigrammes. Maintenant, lorsque je sélectionne mes wireframes, je peux appuyer sur Control ou Command S pour les enregistrer, sur Publier, publier sur Mock et Cloud. Vous pouvez donc utiliser Anthropologist et Cloud pour une collaboration en ligne instantanée, transfert et une vérification des données des couches. Vous pouvez cibler un projet Cloud, un exemple de projet, par exemple, ou vous pouvez en créer un nouveau. emplacement de notre premier projet. Cliquez sur OK, cliquez sur OK, et le projet va être publié. Encore une fois, le même liquide, toutes ces autres choses. En fonction de la taille de votre projet, nombre d'images que vous avez, nombre d'icônes que vous avez, du nombre d'icônes que vous avez, cela prendra plus ou moins de temps. Donc, en fonction de votre projet, c'est le temps que ce projet va prendre N, en particulier la rapidité de votre Internet. Vous pouvez donc consulter votre projet car il a été publié avec succès, comme vous pouvez le constater. Et il va vous falloir passer à Mock et Cloud. Maintenant, voici nos nouvelles pages de projets. Vous pouvez voir les détails et, en gros, vous pouvez résoudre ce que nous avons déjà créé . Voici tous ces éléments, des wireframes, des choses comme ça. Vous pouvez donc obtenir le code ici pour le développement. Vous pouvez donc changer cela. Et il va afficher les guillemets ou tout ce qu'ils sélectionnent, par exemple cette image va me montrer le CSS, Objective-C, Swift et Android. Et c'est formidable, car vous pouvez passer d'une plateforme à une autre. Vous pouvez passer à la réduction en plein écran, à la prévisualisation, et vous pouvez maintenant la télécharger en tant qu'option séparée. Vous pouvez passer en mode présentation si vous souhaitez le présenter à vos clients au cours de ce processus de développement. Donc, tout ce que vous sélectionnez ici va être raconté et montré. Donc, par exemple, nous avons ici cette option que nous avons déjà choisie. Si je clique ici, cela m' amènera à des organigrammes, par exemple pour que nous puissions présenter ce mode de commentaire. Donc c'est super parce que disons que je veux ajouter un commentaire ici, peut-être changer cette couleur en bleu. Disons. Vous pouvez essayer d' étiqueter les commentaires. Vous pouvez appuyer sur Ctrl Enter pour partager ce commentaire. Vous pouvez donc changer cette couleur en bleu. D'accord ? Ainsi, lorsque je passe la souris et que je clique, si je l'ai vendu, je peux le résoudre. Et ça va disparaître. Mais si je ne l'ai pas résolu, je peux toujours revenir en arrière. La couleur est si mauvaise que vous pouvez la changer. Et faisons-le très rapidement. Alors changez-le en bleu, disons, partagez-le. Nous y voilà. Et maintenant, vous pouvez voir que nous avons ceci en commun. Ainsi, quiconque vient ici peut survoler, cliquer et voir, changer cela en bleu. D'accord, ce sera fait. Nous y voilà. Appuyez sur Enter pour servir. Et je vais être informé dans mon projet que quelqu'un a commenté. Je peux voir ce commentaire. Ensuite, je verrai ce que je dois faire. Et si je l'ai fait, je peux leur répondre. Mais l'examen, ils peuvent l'examiner, ils peuvent en faire l'objet d'une intention. Et il existe toutes sortes d' options différentes qu' ils peuvent utiliser. Par exemple, si vous passez la souris ici et que vous cliquez sur Sélectionner, vous pouvez voir que vous disposez de l'outil de sélection qui vous permet de déplacer ces éléments. Et essentiellement pour sélectionner des éléments spécifiques. Vous pouvez sélectionner le texte et annoter les éléments morts. Vous pouvez coordonner le balisage. Vous pouvez effectuer un balisage d'espacement, et vous pouvez effectuer un balisage de région si vous souhaitez baliser une zone de votre dessin et être extrêmement précis quant aux modifications que vous souhaitez mettre en évidence ou aux modifications que vous souhaitez mettre en évidence et que vous avez apportées précédemment. Ils n'ont pas encore révisé. Ils peuvent également vous faire la même chose. Donc, en gros, ils peuvent intervenir ici et dire, par exemple si je sélectionne et fais le texte, disons, ils peuvent annoter type et dire quelque chose comme, par exemple cette topographie est trop grande ou trop sombre, vous pouvez la modifier en plus claire, mais ils peuvent être extrêmement précis à mais ils peuvent être extrêmement propos de cette section de votre design et des éléments votre design qui ils veulent que tu changes. Si vous revenez ici, vous pouvez modifier ce projet ou en consulter les détails. Et si vous souhaitez afficher tous les aéroports sur un seul écran, vous pouvez accéder au storyboard. Il vous montrera tous vos aéroports sur un seul écran. Vous pouvez cliquer et double-cliquer sur les pages pour ajouter des commentaires et vérifier les spécifications. C'est donc ce que je vous ai déjà montré, ou vous pouvez revenir à la liste des prototypes. Donc, en gros, c'est à quel point il est facile de publier votre prototype. Enfin, vous pouvez également le partager, le partager en privé, en public ou intégrer un privé, en public projet si vous souhaitez copier le code et l'intégrer à un site Web distinct. Par exemple, Publisher est idéal s' il n'est pas soumis à un accord de confidentialité ou si vous souhaitez obtenir des commentaires externes supplémentaires ou un partage privé, si vous souhaitez le partager en privé au sein de votre équipe. Invitez également à votre pardon, pour devenir membre du projet si vous souhaitez l'ajouter à votre projet ou sinon, vous pouvez simplement copier et partager ce lien avec eux. Mon père. Et lorsque j'ouvre un nouvel onglet sur ma machine, j'appuie sur Control Enter. Mais comme je suis déjà connecté, vais juste m'afficher une version diluée telle qu'elle est. Mais en gros, c'est quelque chose qu'ils vont voir. Ils ont le design, ressource de tâches, le guide de style, l'activité, toutes sortes de choses différentes ici. Mais c'est essentiellement ainsi que vous partagez votre prototype et que vous le publiez. Et c'est très important que vous le fassiez car vous souhaitez obtenir des commentaires supplémentaires sur votre conception chaque projet que vous réalisez et ne pas transmettre de RP Combiné à Mock. Cloud vous offre une excellente option pour le faire. 18. Quels sont les modèles: Les modèles sont un excellent moyen de relancer votre processus de création car pour vous, la conception UX n'est rien d'autre qu'une tâche répétitive au fil du temps. Si vous y réfléchissez, vous êtes en train de créer nouveau ces boutons et ces éléments. Alors pourquoi ne pas choisir d'utiliser un modèle créé par quelqu'un d'autre, ou vous pouvez créer votre propre modèle et simplement réutiliser certains de ces éléments si vous choisissez de créer des éléments vraiment distincts et délicats. La plupart du temps, c'est ce que l'on appelle un système de conception. Vous pouvez ensuite choisir d'utiliser systématiquement ces éléments de conception dans vos conceptions. Comme des boutons, des sélecteurs de temps, des entrées et des trucs comme ça. Mais dans cette partie du cours, nous allons parler des modèles qui sont une mise en page complète, une mise en page terminée que quelqu'un d'autre a créée. Et vous pouvez simplement glisser-déposer certains de ces éléments de ces modèles pour créer vos propres mises en page personnalisées. À partir de là, vous pouvez ajouter vos propres couleurs, votre propre typographie, vos propres images, votre propre copie, et vous pouvez vraiment personnaliser en fonction de votre projet particulier. Vous pouvez également modifier le logo, par exemple pour le client sur lequel vous travaillez actuellement. Et vous pouvez vraiment personnaliser ce modèle en fonction de vous-même et du projet sur lequel vous travaillez. Donc, en gros, ce sont les modèles en un mot et le point principal. Pourquoi utiliseriez-vous le modèle, c'est pour gagner beaucoup de temps, car comme je l'ai dit, ces éléments se répètent encore et toujours sur chaque projet. Alors pourquoi ne pas utiliser la puissance de Mock Plus rP et des modèles qu'il fournit. Parce que tous ces modèles sont gratuits après tout, et ils sont très faciles à utiliser, et c'est très bien. Je vais vous le montrer dans la prochaine vidéo. Alors je te verrai là-bas. 19. Choisir le modèle: Dans cette vidéo, je vais vous montrer comment choisir le meilleur modèle qui convient à votre projet, où cliquer, comment le faire et toutes ces bonnes choses. Alors allons-y. Nous voici donc de retour sur notre page d'accueil, sur notre page d'accueil. Et ici, nous avons l' option pour les modèles. Et tout au long de Mock plus rP, vous pourrez voir cette option pour les modèles plus tard. Je vais aussi le montrer. Lorsque vous ouvrez l' interface elle-même, à l'intérieur de l'interface, vous pouvez ouvrir des modèles directement à partir de là. Mais ici, à l'intérieur de notre page d'accueil, c'est ici qu'ils se trouvent. Nous avons donc ici des exemples et des modèles. Toutes les ressources de conception sont entièrement personnalisables, réutilisables et évolutives. Ce qui est très important car au fur et à mesure que votre entreprise se développe, fur et à mesure que vous ajoutez des écrans, des pages ou quoi que ce soit d'autre, vous serez en mesure de la développer. Ensuite, nous avons ces catégories. Vous pouvez donc aimer certains de ces modèles. Vous pouvez simplement cliquer ici sur cette icône en forme de cœur et elle sera ajoutée à mes jambes. Vous pouvez cliquer sur le média pour trier les différentes pages multimédia, le commerce électronique, les voyages, les outils sociaux, la gestion, la nourriture, les actualités et les kits d' interface utilisateur, comme vous le souhaitez. Aujourd'hui, les kits d'interface utilisateur sont particulièrement importants car ils sont vraiment utiles car ils sont créés dans un souci d'évolutivité. Cela signifie que vous allez obtenir un ensemble de ces différents composants que vous pouvez utiliser tels quels dans votre conception ou vous pouvez les adapter en fonction de vos besoins. Ainsi, par exemple vous pouvez choisir d'utiliser un élément d'un kit d'interface utilisateur, y ajouter des coins arrondis , y ajouter des arrière-plans, des ombres et vraiment le personnaliser en votre marque et de ce que vous essayez réaliser avec votre design. Ou si vous le souhaitez, vous pouvez l'utiliser tel quel et simplement remplacer les couleurs qui sont placées, la copie peut peut-être ajouter de nouvelles images. Tout dépend donc de vous et de la manière dont vous souhaitez personnaliser ces modèles pour les adapter au mieux à votre projet. Donc, si nous revenons à tout ce que je voulais vous montrer ici, c'est nouveau et populaire. Je vais opter pour, disons, populaire. Et je vais opter pour, plutôt que pour tous les appareils, je vais choisir entre le mobile et les sites Web. Et je vais choisir des sites Web dans ce cas. Donc, comme je le montre ici, cela va me montrer toutes sortes de ces différentes options et modèles. Et vous pouvez voir comment chacun d'entre eux est organisé, comment chacun d'entre eux est structuré, et il y en a vraiment un tas parmi lesquels choisir. Maintenant, ce que vous pouvez remarquer ici, c'est que nous avons wireframes, des modèles. Et la principale différence entre les deux réside dans les images. À l'intérieur des wireframes, vous ne voyez généralement aucune image. Dans les modèles, vous le faites. C'est donc à vous de décider manière dont vous souhaitez présenter cela, car les wireframes sont les meilleurs si vous souhaitez créer rapidement une sorte de mise en page et simplement tester quelques idées que vous avez. Peut-être obtenir des commentaires supplémentaires des clients au début du projet ou explorer la façon dont les choses seront présentées sur la page. Vous pouvez donc peut-être travailler beaucoup plus rapidement si vous travaillez uniquement avec des wireframes plutôt qu'avec des images. Parce que parfois, les images peuvent être un peu confuses, surtout si elles ne correspondent pas au créneau dans lequel vous vous trouvez ou à celui de votre client. Par conséquent, à mon avis, il est préférable de travailler avec ces wireframes, en particulier au début du projet, si vous avez déjà vos images et que vous les avez rassemblées dans un dossier. Par exemple , vous pouvez même choisir des wireframes et télécharger les images que vous avez directement dans des wireframes, puis simplement changer les couleurs plus tard au cours du processus de conception. Mais tout dépend vraiment de vous et de la manière dont vous souhaitez structurer votre flux de travail lorsque vous travaillez avec ces modèles fictifs et rP. Donc, comme je l'ai dit, ce sont les wireframes. Si nous faisons défiler la page un peu plus vers le bas, vous pouvez voir que certaines d'entre elles ont déjà des images préparées, et ouvrons l'une d'entre elles. Disons celui-ci, par exemple, et si nous faisons défiler la page vers le bas, vous pouvez voir qu'il est écrit «  Acheter des kits d'interface utilisateur Web ». Vous pouvez donc le voir dans des kits d'interface utilisateur, des maquettes et des kits d'interface utilisateur Web pour les achats. Et nous avons un tas de ces différentes options ici. Maintenant, pour certains d'entre eux, laissez-moi vous les montrer. Disons celui-ci. Vous pouvez voir que ce sont les pages et cela fait 19 pages au total. Mais si vous comptez ces éléments ici, cela indique neuf, car il s'agit de neuf dossiers. Parce que c'est l'équipe qui l'a créé, et vous pouvez le constater, c'est d'autres équipes PaaS qui l'ont fait. Ils ont placé toutes ces pages dans des dossiers séparés. Ils ont donc peu d'options d'accueil, peu d'options de filtres de produits, peu d'options de connexion. Et c'est ainsi que vous accédez à ces 19 pages au total, ce qui est très utile lorsque vous créez différentes versions de vos pages. Ainsi, par exemple, votre client souhaite voir à quoi le petit panier ressemblera le petit panier en cas d'échec, ou lorsque la carte est refusée, s' il ne saisit pas certaines informations, ou lorsqu'il a terminé l' ensemble du processus de paiement, quoi cela ressemblera par rapport à s'il ne le fait pas. Vous pouvez donc vraiment comprendre pourquoi ces dossiers sont vraiment une excellente option à avoir dans Sudden Mock et rP sur le prochain, vous pouvez voir que nous avons juste ces différents styles. Vous pouvez donc choisir l'un de ces styles. Vous pouvez les personnaliser, l' adopter comme vous le souhaitez. C'est donc la différence entre des pages simples. Et des dossiers sur des pages spécifiques et différentes versions de pages spécifiques. Donc, en gros, vous pouvez faire défiler la page ici et vous pouvez voir qu'ils ont 19 pages. C'est un fichier RPI, il fonctionne donc parfaitement dans what plus rP. Et vous pouvez voir une description plus détaillée ci-dessous. Nous avons donc un modèle avec plus de 20 écrans, plus 30 composants, ce qui est formidable car nous pouvons réutiliser ces composants un peu plus tard. Vous aider à créer différents sites Web commerciaux en quelques minutes. Toutes les pages clés nécessaires, comme les achats sur la page d'accueil, etc. Et les composants tels que les boutons, les curseurs, etc. sont regroupés et entièrement personnalisables, ce qui est formidable car vous ne voulez pas perdre trop de temps Cela fait tout l'intérêt des modèles et explique pourquoi vous les utiliserez pour vous faire gagner du temps. Donc, ce que nous pouvons faire ici, c'est que je peux cliquer sur 50 % juste pour voir à quoi cela ressemble. Je peux m'adapter à deux largeurs. Je peux m'adapter à l'écran, passer à 200 % juste pour voir la qualité de l'écran. Retournez ici. Ou je peux cliquer ici et les masquer si je ne veux pas les voir. Par exemple, je ne veux pas voir ce panneau de notes, donc je vais cliquer ici pour l'agrandir. Ou si je veux rapidement le masquer et le voir apparaître, disons l'adapter à l'écran. Maintenant, je peux voir à quoi ça ressemble à l'écran. C'est pourquoi ils sont très utiles et très importants. Revenons à 50 % ou quelque chose comme ça. Donc, pour terminer cette vidéo utilisation d'un modèle comme celui-ci, il vous suffit de cliquer sur Modifier et enregistrer. Donc, quand je le ferai, cela m'amènera à un nouvel écran. Et vous pouvez voir que vous visualisez cet exemple de projet dans Mock plus rP. Cliquez pour enregistrer le projet dans l'équipe actuelle. Alors pourquoi cet élément en particulier est important et utile. Ici, vous pouvez obtenir un aperçu complet de quoi tout ressemble dans Plus rP. Voici donc l'aperçu sur le site Web lui-même, mais voici à quoi il ressemble directement dans la maquette plus rP. Donc, ce que je peux faire, c'est revenir à l'endroit où il écrit pages ici et ouvrir certaines de ces pages. Je peux cliquer ici pour ouvrir le type de menu pour en saisir manuellement un, taper trois, et c'est parti. Et je peux passer rapidement de l'un à l'autre, mais je ne suis pas en train de les modifier pour le moment. Voilà à quoi ils ressemblent. Je peux passer de l'un à l'autre. Donc, 12.3, vous pouvez facilement voir quelle est la différence entre ces types. Ou je peux aller sur la page d'accueil et sélectionner, par exemple Fashion Home, How the Furniture Home Like That. Voici donc à quoi tout cela ressemble et vous pouvez facilement passer de l'un à l'autre. Tu peux les cacher, tu peux les montrer. Et voici ces plans de travail séparés. Des plans de travail nous montrent à quoi ressemble cet écran, par exemple c'est notre curseur. Nous pouvons choisir entre ces différentes options de diapositives et choisir celles que nous souhaitons intégrer. Donc, pour pouvoir utiliser ce modèle dans vos projets, il vous suffit de sauvegarder le projet dans l'équipe actuelle, peu importe la page dans laquelle vous vous trouvez ou le dossier dans lequel vous vous trouvez. Vous pouvez donc choisir entre espace personnel ou votre équipe. Dans ce cas, je vais choisir l'équipe, car plus tard, je pourrais inviter d'autres coéquipiers de mon équipe à m'aider à l'ajouter , à ajouter ces modèles et à m'aider à faire évoluer ce design vers quelque chose d'un peu plus avancé. Enfin, ce que je vais faire, c'est frapper, d'accord. Vous pouvez maintenant choisir un autre dossier de projet si vous en avez créé un Je ne l'ai pas fait sur ma page d'accueil et vous pouvez le voir ici. Je n'ai donc créé aucun dossier, mais je peux créer un nouveau dossier de projet très facilement et de qualité, par exemple site Web de mode ou quelque chose comme ça. Nous y voilà. Et il sera situé juste ici. Donc, quand je ferme ce bouton, cliquez pour enregistrer l'équipe, site de mode, l'enfant, d'accord, et ça va l'enregistrer dans ce dossier. Donc, quand j'y reviendrai plus tard, il se trouve à l'intérieur de ce site Web et cela n'encombrera pas du tout ma page d'accueil. Alors on y va. Maintenant que nous l' ouvrons, nous pouvons le modifier, et c'est ce que nous allons faire dans la vidéo suivante. Je vais vous montrer comment apporter des modifications, comment les ajuster et les adapter à votre marque, et comment créer une nouvelle page et commencer à créer partir de zéro, mais en utilisant des modèles. Alors je te verrai là-bas. 20. Personnaliser le modèle: Maintenant que nous avons choisi notre modèle, ce que nous voulons en faire, il est temps de le personnaliser et pour ce faire, il est très simple de créer une simulation et un rP. Permettez-moi donc de vous montrer ce que nous allons faire avec ce modèle particulier et comment nous allons l'adapter à nos besoins. Disons que, comme il s'agit d'un modèle de boutique, nous allons utiliser les éléments et créer notre propre boutique, pour ainsi dire. Donc, lorsque je sélectionne cette option, vous pouvez voir que c'est 1 600 x 798. Nous allons donc évidemment créer une sortie comme celle-ci. Mais avant de passer à autre chose, créons d'abord notre groupe. Ainsi, lorsque je clique sur Créer un groupe, un groupe est créé ici. Je peux donc le déplacer ici, ou je peux le déplacer d'un niveau vers le haut, ce qui va essentiellement le pousser vers l'extérieur. Cliquez avec le bouton droit, déplacez vers le haut. Cela va donc le placer au sommet. Et je peux dire quelque chose comme mon design ou le design de ma boutique, quelque chose comme ça. À l'intérieur de cela, je vais créer une page et je vais l' appeler page d'accueil. Et vous pouvez voir que c'est 1 600 x 1080 parce que c'est, par défaut, la largeur qui compte, la hauteur. Cela n'a pas trop d'importance car, comme vous pouvez le constater, il a hérité de ces types d'éléments de cette page particulière dans ce groupe particulier, comme par exemple largeur et la hauteur de notre port. Dans ce cas, nous allons donc passer au panneau Calques. Et je vais dire quelque chose comme menu de contenu qui a été supprimé. La modification du composant le détachera des actifs ou vous souhaitez indiquer que vous souhaitez continuer. Explorons d'abord ce groupe et voyons Nous avons donc quelques icônes à l'intérieur. Donc, en gros, c'est pour le contenu ci-dessous. Mais ce qui m'intéresse, c'est essentiellement ce menu. Alors double-cliquez dessus, détachez-le. Oui, dissociez-le. Et ce que nous avons ici, ce sont toutes sortes de ces différents éléments. Et laissez-moi le déplacer un peu vers le bas , juste pour que je puisse le voir un peu mieux. Ce qui m'intéresse, c'est ce groupe et ce rectangle. Donc, quand je le cache, vous pouvez voir qu'il prend toute sa largeur. Ce qui m'intéresse, c'est d'abord l'identifiant du groupe, donc Control D, par exemple, et je vais l' appeler Top Nav, BG. Donc, fond de Top Nav. Et je vais le réduire en taille à quelque chose comme ça. Jusqu'à présent, 71 ou allons-y avec 72 chiffres ronds souples. Et revenons au début. Prolongeons cela un peu pour avoir un peu plus d'espace. Ce que je vais faire, c'est d'abord réduire son opacité afin que nous puissions voir ce qui se cache derrière. Revenons donc à ici. Allons-y en groupe. Qu'est-ce que ce groupe ? Oui, c'est ce qui nous intéresse dans certains articles NAV ou Top Nav. Nous y voilà. Et à l'intérieur de ces principaux éléments de navigation, nous avons notre logo, que nous remplacerons s'il s' agit d'un projet réel. Nous avons donc ces trois icônes comme ça. Ensuite, nous avons nos éléments de menu et nous avons le rectangle, qui est le contexte oral de ce projet. Donc, si je le ferme les éléments de navigation supérieurs et que je le déplace directement vers le haut. Donc quelque chose comme ça. Nous y voilà. Nous avons donc parlé suffisamment d'articles et nous avons Top Nav be G, que nous venons de créer. Permettez-moi de le placer dans ce groupe. Alors ouvrons le groupe. Essayons de le déplacer. Ou mieux encore, peut-être pouvons-nous dissocier cela comme ça. Ensuite, sélectionnez-le, appuyez sur Control G et appelez-le top. Maintenant, ce que je vais faire, c'est appuyer sur Control C, puis revenir à mes pages. Sélectionnez ma page d'accueil, appuyez sur Control V. Et vous pouvez voir qu'elle est collée ici. Ce que je vais faire d' abord, c'est sauter à l'intérieur. Sélectionnez ce texte où il est écrit « Ressources ». Je vais l'ajouter à mes textes. Vous pouvez donc voir que c'est la police, c'est la taille. Je vais m'y intéresser directement en tant que couleur. C'est du noir pur, donc je n'aime pas vraiment UPS, je n'aime pas vraiment ça. Permettez-moi donc de le sélectionner et de le remplacer par quelque chose d' un peu plus réaliste ou quelque chose comme ça. Je vais l'ajouter comme couleur. Débarrassez-vous du noir pur. Sélectionnez celui-ci, appliquez la couleur, appliquez la couleur. Nous y voilà. Et pour ces icônes en particulier, je n'aime pas vraiment cette couleur. Alors allons-y et changez-le en quelque chose de beau et de dynamique. Peut-être quelque chose comme ça. On y va, j'aime bien. Je vais donc double-cliquer ici et appeler cela la couleur du texte, juste pour savoir où il se trouve. Et c'est la couleur de mon icône ou ma couleur principale, ou quel que soit le nom que vous voulez lui donner. Nous pouvons donc appliquer les couleurs de nos icônes afin que vous puissiez voir immédiatement que nous obtenons le look que nous souhaitons. Et je ne vais pas trop m'embêter avec le logo, mais il suffit de regarder les dimensions. Donc 136 avec 36, vous pouvez avoir des dimensions un peu différentes si vous le souhaitez, mais c'est mieux. Par conséquent, pour utiliser les dimensions qu'ils ont déjà utilisées, il vous suffit de vous rendre ici où il est écrit Télécharger. Cliquez sur Charger, puis importez votre propre logo. Cette fois, au format PNG, par exemple pourrait très bien fonctionner. Et téléchargez-le simplement une fois que nous serons prêts avec notre menu principal. Et quand je passe aux couches, vous pouvez en voir une copie de navigation supérieure. Je n'aime pas vraiment cette copie, les stratégies de dénomination, donc je vais l' appeler la navigation supérieure. Nous y voilà. En dessous, je vais ajouter quelques nouveaux éléments. Passez donc aux pages et passez à la maison de couture, comme vous l'avez mentionné, nous voulons utiliser ces éléments. Donc, lorsque je passe aux couches, double-cliquez ici. Nous avons donc toutes sortes d'options différentes. Nous avons donc le rectangle, nous avons l'image, et je veux en utiliser une partie. Je ne vais pas les utiliser toutes petites. Nous allons d'abord sélectionner plusieurs de ces éléments, quelque chose comme ceci. Parce que je n'en veux pas vraiment. Vous pouvez appuyer 02 fois pour réduire l'opacité, afin que nous puissions voir avec quoi nous travaillons. Et vous pouvez sélectionner certains de ces éléments restants 02 fois, afin de réduire leur opacité et de sélectionner ce conteneur. Vous pouvez zoomer un peu, réduire son opacité, car je ne veux pas tout utiliser. Tout ce dont j'ai besoin, c'est d'en utiliser quelques-unes. Donc, par exemple , j'aime cette option de curseur. Je les utiliserais donc et je les sélectionnerais simplement. J'utiliserais ce texte parce que je l'aime bien. bouton Acheter maintenant fonctionne très bien. Et je vais utiliser le rectangle et l'image en dessous. Vous pouvez décocher et vérifier s'il s'agit bien l'image que vous avez choisie. Il semble donc que nous devons tout recommencer, mais c'est important. Alors allons-y. Vous pouvez maintenir votre espace pendant que vous naviguez pour vous déplacer vers la gauche, la droite, le haut ou le bas. Utilisons donc la boutique maintenant et laissez-moi les utiliser réellement. Oui. Mais avant de le faire, laissez-moi utiliser tout cela. Appuyez sur Control C, retournez à mes pages, revenez à ma page d'accueil, appuyez sur Control V pour les coller en place. Nous y voilà. Et je vais bien les aligner ici. Et lorsque je passe aux couches, je les ajoute au groupe. Mais en fait, avant de le faire, laissez-moi passer à la Fashion Home et je vais les utiliser. Passez donc aux couches, sélectionnez-les, voyez de quoi il s'agit. Nous y voilà. Nous avons donc des icônes et des rectangles. Tu peux le voir. Alors sélectionnons-les. Appuyez sur Control C et revenez à notre page d'accueil Control V. voilà. Tout ce que j'ai à faire, c'est de bien les aligner ici. Maintenez donc les touches Shift, flèche gauche 123440 pixels, Shift Flèche haut un, deux, trois quatre pour atteindre 40 pixels à partir de là, ou vous pouvez les ajuster à votre guise. Je n'aime pas vraiment l'alignement de cela, alors je vais le positionner. Voyons ce que nous pouvons faire ici. Je peux peut-être l'aligner un peu différemment. Alors voyons voir, peut-être que quelque chose comme ça fonctionne très bien. Nous y voilà. Et peut-être que je voudrais le déplacer un tout petit peu vers la droite. Alors peut-être qu'un quinzième fonctionnera très bien. Et nous y voilà. Nous sommes allés de l'avant et avons créé notre propre arrière-plan personnalisé. Maintenant, ce que vous pouvez faire ici, c'est sélectionner votre image. Et parce que j' ai vraiment trop de ces images sur mon ordinateur. J'utilise généralement certaines collections en ligne. Alors peut-être que cela fonctionnerait très bien. Mais disons que je souhaite remplacer cette image. Donc, ce que je vais faire, c'est l'appeler image d'un héros. Viens ici, sur la droite. Cliquez sur Télécharger, puis sur Télécharger. Accédez à la banque de photos, avec la bonne lumière. C'est la collection que j'ai, par exemple quelque chose comme celui-ci qui a frappé Open. Cela va ouvrir l'image en fonction de sa taille. Cela va prendre plus ou moins longtemps, par exemple et vous pouvez appuyer sur OK. Cela va l'étirer un peu pour que vous puissiez le remplir, par exemple , cela le remplira assez bien parce que nous avons un rectangle sur le dessus. Je peux appeler cela une superposition de couleurs. Je ne savais juste pas ce que c'est. Et par exemple, si je la sélectionne, vous pouvez voir que nous avons cette couleur de remplissage. Je peux régler l' alpha à 40, par exemple, ou à quelque chose de plus dramatique, comme 60, voyons voir. Quelque chose comme 50. Je pense que ça va vraiment très bien fonctionner. Et nous y voilà. Nous sommes allés de l'avant et avons créé un bouton distinct. Ce qu'ils doivent faire ici, c'est peut-être ajuster cela à l'intérieur des interactions. Vous pouvez voir que ce n'est pas valide car cela nous amènera à la page séparée nous créerons à un moment donné. Par exemple, pour ajouter plus d'éléments à cette page, je vais simplement sélectionner mon tableau d'art et l' étendre jusqu' bas pour me donner un peu plus d'espace, passant aux pages, en passant à la page d'accueil. Et maintenant, allons-y et sélectionnons certains de ces éléments. Je vais donc les sélectionner ici en haut. Je passe à mes couches. Et sélectionnez-les de la même manière. Alors on y va. Je pense avoir sélectionné tout ce dont j'avais besoin. Appuyez sur Control C, revenez deux pages en arrière, couches de page d'accueil. Appuyez sur Control V. Et voilà. Agréable. Appuyez sur Control G pour les regrouper, et je vais les appeler, par exemple produits en promotion, quelque chose comme ça. Et parce que tous ces autres éléments sont éparpillés sur notre page, je vais simplement les sélectionner tous Appuyez sur Control G et appelez cette image de héros ou comme vous le souhaitez. Vous pouvez déplacer cette navigation vers le bas, la déplacer vers le haut, et vous pouvez voir comment notre site Web commence déjà à prendre forme. Je vais maintenir la touche Alt enfoncée pour mesurer. Et vous pouvez voir que c'est 160, ce qui est bien, et 80 en partant du haut, ce qui est excellent. Et je veux m'en servir. Ensuite, nous pouvons revenir à la page d'accueil. Et par exemple, je peux simplement faire la sélection parmi tous ces éléments, quelque chose comme ça. Et nous pouvons également sélectionner le pied de page. Appuyez sur Control C, juste pour gagner un peu de temps. Appuyez sur Control V une dernière fois. Et n'oubliez pas que nous sommes ATP. Nous allons donc conserver la cohérence de notre design. Nous allons sélectionner notre tableau d'art en double-cliquant dessus et en l'étendant jusqu'en bas. Vous y voilà. Nous avons créé une page, nous avons ajusté une page. Et évidemment, ce que vous allez faire, c'est, disons que vous voulez ajouter quelque chose comme ça et que vous voulez le modifier. Alors peut-être qu'au lieu de nouveaux arrivages, je pourrais peut-être me préparer pour l'hiver. Parce qu'elle a l'air froide et enneigée. Préparez-vous à la magie de l'hiver. Peut-être quelque chose comme ça. Des t-shirts basiques, c'est bon. Cliquons donc à l'extérieur et ajustons cela. Alors, en solde cet été. Oui, profitez peut-être des articles les plus populaires en solde. Quelque chose comme ça. Je pense que ça va très bien fonctionner. Une fois l'image complète obtenue, vous pouvez immédiatement remplacer ces images afin pouvoir double-cliquer pour dessiner les deux propriétés. Vous disposez de cette option de téléchargement. Donc, ce que je peux faire, c'est appuyer sur Télécharger, par exemple cliquer pour télécharger et trouver une autre image. Peut-être que celui-ci s'est ouvert. Et encore une fois, en fonction de la taille de votre image, et je vous recommande toujours d' optimiser vos images, quoi que vous fassiez, cela vous prendra plus ou moins de temps. Alors, le voici. Et je peux appuyer sur OK, par exemple n si vous pouvez voir qu'elle va remplacer cette image d'origine par cette image. Enfin, nous devons ajouter quelque chose de différent ici. Je vais donc l'appeler, par exemple pantalon moulant pour homme. Peut-être. Et peut-être que je peux l' ajouter à ce prix. Peut-être que ça peut être 49, 99 ou quelque chose comme ça à ce prix. Et vous pouvez clairement voir ce que cela a fait. Une autre chose que je tiens à noter est que lorsque vous double-cliquez à l'intérieur, vous pouvez voir que vous passez à ce mode d'édition. Tout le reste est masqué et tout ce que vous modifiez en ce moment est surligné. Vous pouvez également maintenir la touche Shift enfoncée pour affiner cette image si vous le souhaitez ou pour l'agrandir. Mais je vais garder la cohérence de tout cela et je vais le placer ici. Et d'ailleurs, j'aime beaucoup l'apparence, car cela n'a pas trop de sens d'inclure un pantalon. Les deux modèles suivants. Je vais donc conserver la mise en page d'origine telle qu'elle était. Pourquoi devraient-ils nous choisir ? Vous pouvez l'appliquer, vous pouvez l'ajuster. Et par exemple, peut-être que je veux appliquer cette couleur d'icône en arrière-plan. Et maintenant, sélectionnez celle-ci. C'est donc une image et maintenant, glissez et déposez notre dollar dedans. Vous pouvez sélectionner ces deux options et vous assurer qu'elles sont centrées. Et voilà, vous pouvez voir à quel point c'est simple à modifier, quel point c'est simple à ajuster. Et surtout, vous pouvez sélectionner ces éléments, appuyer sur Control G et parler de livraison gratuite. Vous pouvez ensuite regrouper ces paiements de contrôle par paiements égaux. Et tu comprends tout. Vous pouvez donc les regrouper et les ajuster comme vous le souhaitez. Ce sera assez simple pour vous de l'organiser. Ensuite, vous pouvez simplement récupérer tout ce contenu, appuyer sur Control G et l'appeler, par exemple pourquoi choisir ainsi ? Parce que c'est juste ma préférence et j'aime toujours le faire. J'ai eu la chance de sélectionner ces éléments et les regrouper, de les organiser bien. Je sais donc, et mes coéquipiers sauront plus tard qui a créé ce que nous avons fait, ce que nous avons accompli et où tout est organisé à un moment donné. C'est pourquoi j'aime nommer mes couches, mes groupes et garder les choses organisées. Plus tard, lorsque les choses prennent de l'ampleur, lorsque les délais se raccourcissent, tout est bien organisé et tout le monde est sur la même longueur d'onde, ce que nous devons faire et là où nous nous sommes arrêtés la fois précédente. Donc, si nous continuons, vous pouvez voir certains produits aujourd'hui. Vous pouvez modifier quelque chose comme ça au maximum. Un produit populaire. Et ce que je vais faire dans ce cas, c'est sélectionner ceci, assurer qu'il est centré. Donc, quand je tape, ça va s'étendre de chaque côté. Nous y voilà. Nous avons cette option. Donc, ce que je vais faire ici , c'est peut-être y ajouter un peu de contexte. Ou peut-être voyons l'image. Cette image. Ce que je peux faire, c'est ajouter une ombre rapide, donc quelque chose comme 610 , puis 20 pour le flou. Et peut-être ajuster l'Alpha pour qu' il ne soit pas complètement noir, mais c'est quelque chose comme ça. Et voilà, juste pour ajouter un peu d'ombre autour de ça. Et peut-être que pendant que nous y sommes, nous pourrons peut-être ajouter d'autres options. Je peux donc choisir dix pour le rayon des coins et m'assurer de modifier également ce rectangle pour le faire pivoter , car il se trouve au-dessus de l'image. Et maintenant, vous pouvez voir que nous avons ces jolis coins arrondis au lieu de coins de rue, si c'est quelque chose que vous recherchez. Maintenant, nous pouvons voir toutes ces informations dans notre pied de page. Ce que je ferais, c'est évidemment le remplacer et le modifier. Voyons donc ce que nous avons ici. Nous avons des hommes, des femmes et des enfants. Et je n'aime pas vraiment la façon dont c'est centré. Je vais donc tout sélectionner comme ça et venir ici et assurer que tout est centré, comme ça. Ainsi, lorsque je zoome, vous pouvez voir que tout est centré. Maintenant, si vous souhaitez que ce soit votre pied de page, vous n'aurez qu'à le copier et le coller en bas de page. Mais je vais juste le garder tel quel parce que c' est un composant. Je vais appuyer pour l' ouvrir et le modifier. Donc, ce que je vais faire, c'est peut-être que vous pouvez changer cela, ce qui est dit. Vous, vous pouvez voir les achats en ligne. Alors peut-être que nous allons voir le contact d'information. Peut-être que vous voulez changer cela, par exemple , magasiner sur mon site web.com ou n'importe quelle hotline de votre choix. Alors disons numéro de téléphone, téléphone. Peut-être que vous voulez ajouter téléphone supplémentaire ci-dessous ou quelque chose comme ça, peut-être une adresse, comme vous voulez, vous pouvez l'ajuster. Et enfin, nous avons différentes options et différentes icônes. Vous pouvez donc facilement remplacer ces icônes. Vous pouvez ajouter les vôtres, vous pouvez les changer. Tu peux en faire ce que tu veux. Par exemple, peut-être que cette boutique n'a pas LinkedIn. Vous pouvez donc vous débarrasser de LinkedIn et sélectionner ces deux éléments, simplement les pousser et voir que 31 pixels sont la distance entre eux et vous pouvez les ajuster assez facilement. Dans ce cas, nous pouvons simplement les sélectionner tous de la même manière. Rendez-vous donc dans notre panneau des ressources et sélectionnez la couleur de l'icône, car n'oubliez pas que c'est la couleur que nous avons choisie pour cela. Mais nous sélectionnons également celui-ci, assurer qu'il s'agit d'un verrou. Et assurez-vous que nous utilisons réellement cette police pour ces options ici. Nous y voilà. Nous avons donc la même police qu'avant. Je vais opter pour Bold. Je vais y aller, pour une raison ou une autre cela n'a pas changé et nous y voilà, audacieux. Et nous avons Bolt. Maintenant que nous avons ajouté la dette, nous pouvons ajouter cette option ici. Nous y voilà. Et vous pouvez simplement appliquer cette option en gras. Nous y voilà. Alors maintenant, lorsque vous l' ajouterez, ce boulon, il l'ajoutera à votre design. Enfin, ce que je veux faire, c'est sélectionner ces trois et peut-être leur ajouter une couleur différente. Ce n'est donc pas si évident, peut-être quelque chose comme ça. Je pense que c'est beaucoup plus lisible qu'avant. Et voyons voir, nous avons cette couleur. Je vais l'ajouter à mes couleurs. Et je vais l'appeler, par exemple couleur du paragraphe. Comme ça. Je vais sélectionner ce paragraphe et lui appliquer la couleur du paragraphe. Vous comprenez donc tout le point. Je peux peut-être le sélectionner et l'appliquer en gras, mais je ne pense pas que cela fonctionne vraiment bien. Mais vous pouvez tout de suite les ajuster et les appliquer comme vous le souhaitez. Donc celui-ci, je n' aime pas vraiment son apparence. Alors peut-être que nous pouvons même déplacer en dehors du dossier. Voyons donc pourquoi nous choisir avec le bouton droit de la souris et dissocier. Positionnez-le ensuite de manière à ce qu'il soit au centre. Nous y voilà. Contrôlez G, et pourquoi alors ? Nous choisir ? Génial. Maintenant, je peux sélectionner ce contrôle G, les produits les plus populaires. Ensuite, je peux sélectionner ce contrôle G, et peut-être l'appeler. Voyons pourquoi je n'ai pas groupé le contrôle G. voilà. Vous pouvez l'appeler CTA, par exemple pour appel à l'action. Et je peux regrouper notre nouveau pied de page, car n'oubliez pas que nous l'avons dégroupé précédemment. Alors Control G, appelons-le Footer, allez-y. Et ce qu'il nous reste, ce sont tous ces éléments en plus. Alors voyons voir. OK, donc pour toi, sélectionné pour toi comme ça. Et vérifions. Vous pouvez maintenant constater que nous sommes beaucoup plus organisés qu'auparavant. Nous pouvons commencer par le haut. Nous avons donc une navigation en haut, vous pouvez la déplacer en haut. Image de héros. Ensuite, nous avons fait la promotion de produits sélectionnés pour vous. Nous y voilà. Alors nous avons y, vous nous choisissez. Le filtre va descendre très bas. Contrôle d'un appel à l'action, des produits les plus populaires et du pied de page. Alors maintenant, si je veux créer une nouvelle page, disons que je ne sais pas, que j' ai cliqué sur ce t-shirt ou quoi que ce soit d'autre et que je l'ai ouverte, il me suffit de la trouver ici. Passons donc détails du produit et voyons ce que nous avons. Alors on y va. Nous avons exactement cette chemise que nous rechercherons. Et nous avons toutes sortes de ces différentes options sous la forme d'un sous-tableau artistique. Nous avons donc une description, nous avons des critiques. Et voici à quoi ressemblent les critiques et ils ont utilisé des ports inférieurs à la moyenne pour le faire. Et ici, vous pouvez voir que nous avons ces deux options. J'aime vraiment ce qu'ils ont fait ici. Nous pouvons donc faire de même pour notre deuxième page. Ainsi, dans le design de notre boutique et dans notre page d'accueil, ils peuvent le placer dans le dossier. À l'intérieur de cela, nous pouvons créer une autre page. Désolé, ce n'est pas un groupe. Je voulais ajouter une autre page. Nous y voilà. Et je vais l'appeler, par exemple détails du produit. Nous y voilà. Et tout ce que j'ai à faire ici est de commencer à copier et coller des éléments de ma page d'accueil. Maintenant, cela va être beaucoup plus simple, alors prenons ceci, ceci et cette commande C. Passez au contrôle des détails du produit V. voilà. Et je dois étendre un tout petit peu mon aéroport à quelque chose comme ça. Nous y voilà. Et je vais passer au détail du produit et sélectionner tout ce que vous voyez ici. Je vais donc tout sélectionner, appuyer sur Control G, passer aux couches et les appeler, par exemple , détails du produit, contrôle C, pages. Revenir au contrôle des détails de mon produit V. Et voilà. Passez aux couches. Il est toujours écrit « bouton Copier », ne vous inquiétez pas. C'est simplement parce que vous l'avez copié depuis une autre page. Donc, en orange, il suffit de double-cliquer et renommer ces détails du produit. Nous y voilà. Quelque chose comme ça. Copiez et gardez les choses bien rangées. Comme vos clients vous le demandent parfois, s'agit d'une copie de ce que vous avez copié il s'agit d'une copie de ce que vous avez copié en ligne et vous devez ensuite leur expliquer. Non, non Je viens de le copier depuis une autre page. Donc, ce que nous devons faire enfin, c'est revenir aux détails et copier ceci, qui, comme vous pouvez le voir, est le panneau de contenu. À l'intérieur de ce panneau de contenu, nous avons U1 et U2. Vous pouvez voir que c'est la V1, c'est la VW Two. Et si vous double-cliquez, vous pouvez voir comment vous pouvez les comparer et ce que vous pouvez en faire. Et bien sûr, des interactions ont déjà été ajoutées à cet effet. Vous pouvez donc facilement passer de l' un à l'autre. Donc, si j'appuie sur Control C pour le copier, reviens à mes pages, reviens au contrôle des détails de mon produit V. voilà. Et souvenez-vous que nous avons utilisé AT, alors peut-être que nous pouvons opter pour 100. 123 est toujours aussi solide. Et si je me cache, si je passe la souris, que je sélectionne Alt et que je clique avec le bouton gauche de la souris, vous pouvez voir que je suis à 100 dans la barre de navigation supérieure. Et passons à ce panneau de contenu ici. Nous y voilà. Et en gros, je vais simplement m'assurer d' aller dans Afficher et de sélectionner ces contrôles C. Revenez aux détails du produit Control V, et assurez-vous qu'ils se trouvent ici. Je vais donc simplement les placer juste ici. Nous y voilà, bien organisés. Et je vais sélectionner l' ensemble de mon contenu et le pousser vers cette option pour qu'il y ait 100 double-clics. Et nous y voilà. Maintenant que tout est prêt, tout est comme il se doit. Évidemment, vous allez continuer à apporter quelques modifications. Supposons donc que cette icône à l'intérieur de ce basculement vers les propriétés, vous pouvez voir qu'il s'agit d'une icône. Donc, en passant à la couleur des icônes, si c'est le style que vous recherchez, peut-être que cette vente ne vous plaît pas. Vous souhaitez ajuster ces tailles de police et ces types de police, par exemple des choses comme ça. Vous pouvez donc tout faire. Et surtout, lorsque vous cliquez sur Aperçu ici, lorsque je fais défiler la page vers le bas, vous ne le voyez pas vraiment parce que nous devons le connecter. Mais vous pouvez voir l'aperçu. Et quand je reviens à la page d'accueil, vous pouvez voir la page d'accueil. Maintenant, c'est exactement ce que nous avons créé, c'est exactement ce que nous avons ajouté. Et dans la vidéo suivante, je vais vous montrer comment ajuster et créer cette interaction pour qu'elle s'intègre réellement entre elles. Et peut-être pouvons-nous l'ajouter au panier, peut-être pouvons-nous ajouter un joli petit effet de survol. Alors je te verrai là-bas. 21. Ajouter des interactions aux modèles: L'ajout d'interactions à vos designs peut vraiment leur donner vie, car il ne s'agit pas simplement de designs statiques. Vous allez ajouter un peu de vie, mouvement et de narration nationale à vos créations afin que vos spectateurs, vos clients et vos développeurs comprennent ce que vous vouliez dire par là dans ce dont vous parlez dans votre conception. Reprenons donc là où nous nous sommes arrêtés dans la leçon précédente et laissez-moi vous montrer comment ajouter quelques interactions de base à Mock plus rP dans la leçon précédente et laissez-moi vous montrer . Voici donc la page de détails du produit, mais je veux en fait commencer par notre page d'accueil. Je souhaite donc que mes utilisateurs puissent sélectionner cette image, puis accéder aux détails du produit. Ensuite, nous aborderons certaines de ces options. Donc, pour ce faire, je vais aller directement ici et dire : passez à la première page. Je n'aime pas vraiment la façon dont c'est structuré. Je vais donc le modifier. Et je vais cliquer sur Saut de page. Et je vais cibler et revenir ici aux détails du produit sur les émissions, aucune. Voyons donc si nous y sommes parvenus. Et puis passons rapidement à l'aperçu ici. Ainsi, quand cet aperçu s' ouvre, je peux faire défiler l'écran jusqu'à cette image. Lorsque je clique dessus, cela m'amène à cette page. Donc, tout cela fonctionne très bien. Donc, en ce qui concerne les détails eux-mêmes, je veux juste ajuster ici deux choses. Une chose est le bouton Ajouter au panier. Je souhaite y ajouter un effet de survol rapide. Ensuite, je veux m'attaquer à ce panneau de contenu pour ajouter mes effets de survol. Ce que je vais faire, c'est double-cliquer sur mon bouton. Et puis vous pouvez voir que nous avons toutes ces commandes, mais je veux en fait l' ajouter, ce bouton. Je vais donc sélectionner le survol de la souris dans ce cas. Et je vais accéder aux propriétés ici. Pour que la souris passe le curseur lui-même. Au lieu de cette couleur de remplissage, je vais la remplacer par cette couleur d'icône, par exemple et sur le texte lui-même. Alors voyons voir, le texte sera juste ici. Nous y voilà. Passons donc à la normale. Passons au survol de la souris. Prévisualisons rapidement ce que nous avons fait. Ainsi, lorsque vous passez la souris ici, vous pouvez voir que la couleur d'arrière-plan change et vous pouvez le faire avec tout cela. Donc, par exemple, cela n' aucune couleur à l' exception de l'icône elle-même. Ainsi, lorsque les utilisateurs passent la souris dessus, cette icône peut peut-être passer du vert au violet ou quelque chose comme ça, comme nous l'avons fait ici. Mais nous avons toujours un problème avec ce panneau de contenu car vous pouvez voir qu'il n'affiche aucun contenu à l'intérieur. C'est donc là que la magie doit opérer et nous devons en fait relier une partie. Donc, si nous zoomons un peu, vous pouvez voir que des personnes non valides sont nées. Et c'est parce que nous l'avons copié à partir de ce point de vue particulier. Et ici, dans cette vue, tout fonctionne très bien. Vous pouvez donc voir la vue de YouTube. Vous pouvez donc les renommer comme vous le souhaitez. Si nous revenons à nos lymphocytes T, je vais double-cliquer ici. Et si vous voyez, nous avons un tableau d'art non valide. Débarrassons-nous donc simplement en cliquant sur Supprimer. Ensuite, je vais procéder à l'ajout à nos tableaux. Et vous pouvez les voir ici. Maintenant, au lieu de cela, ce que je veux faire c'est que ce sera une description. La prochaine sera consacrée aux critiques. Si vite. Descriptif. Maintenez la barre d'espace enfoncée, double-cliquez sur les avis. Nous y voilà. Et maintenant, si je reviens ici, vous pouvez voir qu'il est mis à jour en temps réel avec la description et les critiques. Donc, tout ce que j'ai à faire ici est simplement de copier le contenu d'ici. Contrôle C. Oups, désolé, j'ai accidentellement sélectionné le stylet. Vous pouvez donc vous débarrasser de ce que j'ai créé. Revenons donc en arrière une fois de plus. Contrôle C. Passez à ma description contrôle V. Et voilà, tout va bien. Ensuite, allez directement ici, contrôlez C et collez-le dans mes critiques. Maintenant que j'ai déjà utilisé ce contenu, je n'ai pas besoin de ces ports médiocres qui sont simplement copiés. Je peux donc simplement placer ma description ici, et je peux simplement utiliser mes critiques. Positionnez-le juste ici. Maintenant, si je reviens en arrière et que je l'ai prévisualisé une fois de plus, vous verrez que c'est ici, mais quand je clique ici, rien ne se passe vraiment. Alors, comment puis-je passer de l' un à l'autre et comment puis-je le faire passer d'un contenu à l'autre ? Donc, pour le faire et revenir ici, encore une fois, tout dépend de ce panneau de contenu. Donc, si je passe aux couches, sélectionne, vous pouvez voir leurs noms. Dans ce cas, il s'appelle Content Panel One. C'est donc ce que nous devons cibler. Vous pouvez donc voir qu'il y a déjà quelques interactions ici sur les critiques et sur la description elle-même. Donc, en gros, ce que nous devons faire c'est lorsque les utilisateurs cliquent sur des avis, pour les rediriger vers les avis, lorsqu'ils cliquent sur la description pour les ramener à la description. Comment s'y prendre ? Accédez simplement au modèle d'interaction. Sélectionnez vos avis ici et vous pouvez voir que les commandes ont déjà été définies. Il vous suffit donc de le lier à la nouvelle page que nous venons de créer. Alors cliquez sur Modifier les déclencheurs, cliquez, c'est bon. Sélectionnez la cible. Ainsi, dans le plan de travail principal, qui se trouve ici, je peux ouvrir, localiser mon panneau de contenu, cliquer dessus, changer de contenu. Donc, le contenu, je dois le sélectionner pour accéder aux critiques. Parce que lorsqu'ils sélectionnent des avis, j'ai besoin qu'ils accèdent aux avis, car ce sont des avis parmi lesquels je vais les sélectionner ici. Vous pouvez choisir l' animation que vous souhaitez. Vous pouvez faire glisser votre doigt vers le bas, vers la gauche et vers la droite, et vous pouvez choisir l' accélération lorsque vous choisissez l'animation. Alors laissez-moi vous montrer, disons, balayez vers la gauche, vous aurez toutes ces options. Je vais donc n'en choisir aucune. Frappez, d'accord ? Ensuite, vous devez faire de même pour celui-ci. Cliquez donc sur ces trois points ici. Cliquez sur Modifier. Cliquez, sélectionnez la cible. Je vais choisir le panneau de contenu principal du plan de travail, comme nous l'avons fait la fois précédente. Et vous pouvez voir que vous pouvez avoir cette option de boucle continue si vous le souhaitez. Mais je ne vais pas le faire parce que nous en sommes à la description, nous voulons cibler la description. Sélectionnez donc la description ici. Cliquez sur OK, encore une fois, vous pouvez choisir toutes sortes d'options différentes ici. Et vous avez également différents déclencheurs. Vous avez donc cliquish, vous pouvez double-cliquer, cliquer bouton droit sur ma souris vers le bas, vers haut, la souris entre, la souris quitte. ce que signifie le centre commercial. Les feuilles de la souris signifient ce zoom fluor Slider, toutes sortes de choses différentes, mais je vais juste utiliser le même clic de base, appuyer sur OK, pour le confirmer. Et maintenant, passons à Aperçu sur notre forum principal, également sur notre forum, vous pouvez l' appeler comme vous l'avez appelé ici. C'est ce que nous appelons les détails du produit. Vous pouvez donc double-cliquer sur les détails du produit. Tout sera lié parce que vous n'avez modifié aucun lien et que vous n' y avez rien fait de plus. Alors maintenant, vous pouvez voir qu'il se trouve juste ici. Alors cliquez sur les critiques. Nous y voilà. Vous avez deux avis. Peut-être devrions-nous passer à trois critiques, car nous avons trois évaluateurs. Et vous pouvez évidemment modifier cette description. Vous pouvez jouer avec et faire ce que vous voulez. Une dernière chose que je veux faire est peut-être que lorsqu'ils cliqueront sur le logo, cela les amènera à la page d'accueil. Alors ajoutons-le rapidement. Je vais aller ici, le sélectionner à partir d'ici, puis cliquer et faire glisser la souris sur ma page d'accueil. Le déclencheur sera donc constitué de commandes de clic. allez passer à cette page. Fenêtre ouverte et actuelle. Je ne veux pas qu'il s'ouvre dans autres animations Windham. Alors peut-être que je peux en faire quelque chose. Peut-être le nourrir. Je ne sais pas, peut-être que ça marchera et fera l'affaire. Voyons voir. Oui, utilisons le fading. L'assouplissement consistera à entrer facilement dans la durée de l'animation, deux millisecondes à quelques secondes, puis à appuyer sur « OK ». Maintenant, quand je clique sur Aperçu, cela fonctionne toujours. Tout fonctionne très bien. Tu dois atteindre la cible. Ensuite, lorsque vous passez la souris, vous pouvez voir qu'il passe de la flèche au pointeur. Vous pouvez cliquer dessus et cela vous amènera à cette page en particulier, qui se fondra dans un joli effet. Vous pouvez également les transformer en états de survol et peut-être que nous pouvons le faire. Revenez donc à la page d'accueil et sélectionnez-les. Passez aux couches et nous devons effectuer quelques ajustements de base. Alors peut-être des produits en promotion, peut-être que je pourrais même les dissocier pour moment afin de pouvoir les regrouper. Donc Control G. Ce sera de la magie hivernale, comme ça. Le prochain sera composé de t-shirts basiques. Enfin, ce dernier sera composé d'articles en solde ou en solde ou quelque chose comme ça. Je vais donc tous les regrouper. Et je ne me souviens pas comment nous les appelons, mais peut-être section promotionnelle d'une section promotionnelle , quelque chose comme ça. Maintenant, ce que je vais faire pour celui-ci c'est ajouter une interaction, ou je peux ajouter un nouvel état de survol de la souris, par exemple, à l'intérieur du survol de la souris, je peux l'ouvrir, m'assurer de le faire passer dans le panneau Propriétés. Donc, ce que vous pouvez faire, c'est jouer avec eux. Vous pouvez inclure des ombres, des bordures et des éléments de ce genre. Mais tout ce qui m' intéresse, c'est ça. Ici. Je vais introduire des boucles. Mais sélectionnez d'abord le survol de la souris. Ici, je vais ajouter un peu plus d'opacité à quelque chose comme, je ne sais pas si 50. On y va et on passe à la normale. Sélectionnez ensuite celui-ci. T-shirts basiques. Je vais sélectionner le survol de la souris. Et à l'intérieur, je vais sélectionner le pointeur de la souris et le faire passer à 50 %. Assurez-vous de toujours revenir à la normale, fermez-le. Et enfin, nous avons l'option de vente. Je vais donc sélectionner ce curseur rectangulaire avec la souris et m'assurer de le changer à 50 %. Vous pouvez bien sûr changer la couleur si vous le souhaitez. Nous pouvons donc choisir cette couleur d' icône, par exemple couleur de survol de la souris. Revenez à la normale, sélectionnez également celle-ci, passez au pointeur de la souris, puis nous pouvons sélectionner cette couleur d'icône 40. Et assurons-nous que c'est resté normal. Nous y voilà. Sélectionnez à nouveau celui-ci, choisissez le commutateur de couleur de l'icône de survol de la souris pour passer à la couleur normale. Nous y voilà. Maintenant que c'est terminé, ce que nous pouvons faire, c'est faire un aperçu rapide, voir ce que nous avons fait jusqu'à présent. Et une fois qu'il est chargé, vous pouvez le faire avec ceux-ci. Tu peux faire sauter un peu ces flèches. Tu peux les déplacer un peu vers le haut. Vous pouvez ajouter en utilisant nos tableaux comme je viens de vous le montrer. Vous pouvez l'ajouter sous forme de panneau de quantité. Ensuite, vous pouvez connecter différents sous-tableaux avec différentes diapositives, différents produits , etc. Vous pouvez peut-être le modifier en survolant. Mais quand je passe la souris dessus, vous pouvez voir ce qu'ils font. Et le pouvoir est incident. Cela fonctionne donc très bien. Mais vous pouvez aussi le faire peut-être sur ces images, vous pouvez les éclairer un peu. Ainsi, lorsque vous passez la souris sur l'un d'entre eux, il zoome un peu. Peut-être que la mort pourrait être quelque chose à essayer. Alors peut-être que sur cette image que nous avons déjà choisie ici, nous avons l'image, nous avons le survol de la souris sur le pointeur de la souris. Ce que nous pouvons faire, c'est ajouter différentes interactions. Je peux sélectionner ma cible. faudrait donc que je choisisse celui-ci manuellement. C'est donc une image PNG. Peut-être pouvons-nous le nommer homme, modèle ou quelque chose comme ça, juste pour pouvoir le différencier un peu. Alors, à l'intérieur d'ici, essayons de le trouver. Non. Nous y voilà. Déclencheurs Mad Model. Voyons voir, remplacé par la souris, entrez, zoomez. Ensuite, nous pouvons ajouter une autre interaction. Si nous revenons aux pages, accédez aux détails du produit. Donc, au lieu de saisir la souris, je vais ajouter cliquer sur Page, sauter. Je rencontre, aucun, je suis frappé. OK, et voilà. Nous avons maintenant deux interactions. Nous allons donc le tester rapidement et voir ce que nous avons fait. Nous espérons que la saisie de la souris nous montrera cet effet de survol. Comme ça. Vous pouvez voir à quoi cela ressemble. Il augmente donc légèrement sa taille. Lorsque vous cliquez dessus, vous serez toujours vers cette page particulière lorsque vous aurez tous ces éléments que nous venons d' ajouter et de modifier. C'est donc à quel point il est très simple de travailler avec. Et vous pouvez le voir revenir en arrière. Il revient à l' état d'origine où il se trouvait. Mais lorsque vous appuyez sur la touche Entrée de la souris, vous pouvez appuyer sur Modifier. Et peut-être pouvons-nous déplacer ces commandes c. Récupération automatique. Je pense que cela fonctionnera très bien, car la récupération automatique ramènera à l'endroit d'origine où vous vous êtes arrêté. Et il va vous montrer le lieu d'origine et celui que vous avez modifié. Donc, en gros, c'est tout pour examiner notre panneau d'interactions et ce que vous pouvez faire avec les interactions. Dans la vidéo suivante, nous allons aborder la publication nos prototypes, la façon de les prévisualiser . Quelles sont les options disponibles dans Mock plus rP ? Alors je te verrai là-bas. 22. Prévisualiser et publier des prototypes: Lorsque vous souhaitez prévisualiser vos prototypes dans more plus rP, vous pouvez explorer certaines options. Lorsque vous souhaitez partager ces prototypes et les publier pour que explorer certaines options. Lorsque vous souhaitez partager ces prototypes et d'autres puissent voir ceux qui ne font pas partie de votre équipe, certaines options s'offrent également à vous. Alors laisse-moi te montrer. Lorsque vous allez ici, vous avez votre mode de prévisualisation. Vous pouvez donc cliquer sur cette flèche pour partir de page d'accueil ou pour partir de la page actuelle. Si je sélectionne cette option, elle reprendra à partir de la page actuelle là où nous nous sommes arrêtés. Et comme vous pouvez le constater, toutes nos interactions fonctionnent toujours, comme je vous l'ai montré dans la vidéo précédente. Mais vous pouvez également sélectionner cette option pour commencer depuis la page d'accueil. Donc, tout ce que vous définissez comme page d'accueil est le point de départ. Enfin, lorsque vous souhaitez prévisualiser, cliquez simplement sur cette flèche. Maintenant, au lieu du mode premium, nous avons également quelques options. Vous pouvez donc sélectionner ici la manière dont vous souhaitez zoomer. Vous pouvez le placer trop mouillé, vous pouvez l'adapter à l'écran. L'Oregon correspond à la largeur. Ou vous pouvez zoomer à 200 %, ou vous pouvez en faire ce que vous voulez. Et maintenant, nous avons l'option plein écran, qui sera cette option. Mais je n'aime pas vraiment ça parce qu'en fait j'ai besoin de zoomer un peu à 100 %. Ensuite, je dois passer en plein écran. Et c'est essentiellement ce que vos utilisateurs vont voir en tant que site Web en plein écran. Évidemment, mon écran est un peu plus grand, donc j'ai ces marges à gauche et à droite. Mais si vous avez, par exemple un écran d'ordinateur portable, souvenez-vous que nous l'avons fait à 1 600 pixels de large. Il va occuper le plein écran. Gardez donc ces choses à l'esprit lorsque vous voulez sortir, vous pouvez simplement prévisualiser. Vous pouvez voir que cela revient lorsque je clique pour accéder à cette page. Cependant, l'effet fonctionne. Donc, tout ce que nous faisions auparavant fonctionne bien. Et quand je clique, cela me ramène à la page d'accueil. Si je veux m'échapper, suffit d'appuyer sur Escape sur votre clavier et cela vous ramènera ici. Maintenant, nous avons ces panneaux à gauche et à droite. Vous pouvez masquer le début des pages sans afficher le nombre de pages que vous avez réellement. Et vous disposez d'un peu plus de terrain pour explorer le prototype. Ensuite, vous pouvez maintenant montrer vos notes, nous n'en avons ajouté aucune ici. Mais en gros, vous pouvez vous y rendre pour noter et dire quelque chose comme quand ce sera pour l' ensemble du projet. Dans ce cas, les nœuds peuvent être quelque chose comme aimez-vous un style et des couleurs minimaux ? Dois-je ajouter plus de couleurs au design ? Et voilà. Vous pouvez appuyer deux fois sur Entrée n Ensuite, par exemple, en tapant quelque chose comme Veuillez me renvoyer l'image. Nous avons parlé de lignes horizontales qui ne partageaient peut-être pas ces images, mais vous pouvez appuyer sur Control S et sur Control R ou Command R. Si vous êtes dans Google Chrome actualiser cette page. Et voilà. Vous avez vos notes de page. Si vous souhaitez vous débarrasser des nœuds de page, il vous suffit de les sélectionner ici. Vous pouvez en sélectionner un, comme So, appuyez sur Retour arrière pour vous en débarrasser. Ou vous pouvez sélectionner un autre clic sur Control S et vous devez appuyer à nouveau sur Control R ici pour actualiser la page et voir les modifications se produire ici. Si vous ne voulez pas voir le nez tomber car pour le moment nous n'avons pas de notes. Vous pouvez cliquer ici pour vous en débarrasser. Ensuite, vous avez vos options de partage. Vous pouvez donc partager le lien de prévisualisation. Et vous pouvez choisir d'inclure ou de supprimer certaines de ces options en fonction de la personne à qui vous l'envoyez. S'il s'agit d'un client, par exemple, vous voulez qu'il puisse voir toutes les options. Mais s'il y a des utilisateurs, vous souhaiterez peut-être masquer certaines options, par exemple les zones de liens. Vous pouvez cocher ou décocher Afficher la zone cliquable. Et cela est utile car vous voulez qu'ils puissent soit cliquer sur le lien, soit déterminer eux-mêmes où se trouvent les liens. Vous pouvez même définir des mots de passe si vous souhaitez protéger vos conceptions et vos prototypes. Et vous ne voulez pas que tout le monde y ait accès, mais seulement certaines personnes. Ensuite, une fois que vous êtes prêt, vous pouvez appuyer sur Copier et vous pouvez leur envoyer ce lien et ils pourront y accéder. Certaines options dont vous disposez sont également les suivantes. Donc, en gros, ce dont nous venons de parler, vous pouvez afficher la zone de liens , vous pouvez afficher l'effet de survol , vous pouvez afficher ces éléments ou vous pouvez les masquer selon que vous faites des tests ou si vous en faites des précédents. Donc, en gros, c'est tout pour le premium et enfin pour l'édition. Lorsque vous souhaitez publier votre prototype, disons que vous êtes prêt. Tu en es content. Et disons que je ne les aime pas. Peut-être que je veux les supprimer parce que je voulais juste pouvoir utiliser les choses que j'ai créées. Et je ne veux pas nécessairement que mes clients voient que je peux être utilisé comme modèle ou quelque chose comme ça. Je vais donc m'en débarrasser et j' ai juste mes propres designs qui viennent d'être créés. Faire un bilan rapide serait une bonne chose car vous voulez toujours vous assurer avant de passer à autre chose, que si tout fonctionne, tout fonctionne ici même. Si je clique ici, cela fonctionne ici. Tout est donc comme il se doit, mais faites simplement une vérification rapide avant de cliquer sur Publier. Mais lorsque vous êtes prêt, vous pouvez cliquer sur Publier cibler ou sélectionner un nouveau projet. Nous avons donc ici notre premier projet, par exemple échantillon de projet, mais je souhaite créer un nouveau projet. Donc, au lieu de cela, qui est le nom d'un kit d'interface utilisateur. Je vais l'appeler design pointu parce que c' est là que je me situais. Et je peux tout sélectionner comme feuille de localisation. OK, shop designed, cliquez sur OK, et il va le publier sur le cloud Mock Plus. Et je vais pouvoir travailler avec des développeurs, des coéquipiers ou des parties prenantes sur ce projet. Vous pouvez fermer ou choisir de visualiser le projet ici. Et ça va te le montrer. Nous avons donc ici des kits d'interface utilisateur Web pour les achats. Nous avons Afficher les détails. Appuyons sur Afficher les détails pour voir ce que nous avons. Nous avons donc une page d'accueil et des détails sur les produits Nous avons donc une description et des critiques sous forme de sous-tableaux à l'intérieur de celle-ci. Voici donc cela pour cette section particulière dans laquelle vous pouvez publier des notes afin que vos clients puissent répondre à certaines notes. Alors peut-être que je peux peut-être ajouter quelques commentaires ici. Voyons voir. Vous aimez la couleur jaune des boutons ? Et vous pouvez appuyer sur Ctrl Enter pour envoyer ce commentaire. Et vous pouvez le voir comme non résolu ou vous pouvez le résoudre ici. Vous pouvez le fermer s'il est terminé et d'autres choses du genre. Et vos clients pourront le voir en temps réel et y répondre en temps réel. Ainsi, lorsqu'ils cliquent, ils peuvent publier une réponse ici. Vous pouvez voir cette réponse ici. La notification revient ici et ajoute simplement le pire pour résoudre ce problème. La section Développement est spécialement conçue pour les développeurs. C'est un endroit où les développeurs peuvent obtenir tout ce dont ils ont besoin pour commencer à coder le plus rapidement possible , comme les spécifications, le code CSS les extraits des valeurs hexadécimales des couleurs et bien plus encore. Nous avons donc les actifs, les annotations, lien vers le système de conception, le changement de plateforme et de couleur pour sourds. Tout cela signifie donc que lorsque vous commencez à survoler, vous pouvez voir les distances entre tous vos éléments, ce qui est évidemment crucial pour le HTML et le CSS. Mais disons que je veux choisir cette image. Je peux obtenir le code au format CSS, Objective-C, Swift et Android. Je peux voir les dimensions ici. Donc x, y, positions, largeur et hauteur, rayon et opacité. Je peux donc tout voir, et tout se trouve à l'intérieur de mon bureau. Vous pouvez voir le Web H5, qui est la taille, iOS, Android et personnalisé. Et je peux le faire en pixels. Je peux créer des unités personnalisées ici, afin de pouvoir choisir entre des pixels, des points, des DP, etc. Et personnalisez la largeur, je peux le confirmer et ce changement particulier s'appliquera. C'est donc très simple à partager dans un Cloud plus proche Vous pouvez passer en mode présentation si vous souhaitez présenter ce design à vos clients, par exemple aux parties prenantes, aux propriétaires de projets ou à qui que ce soit d'autre. Ensuite, vous pouvez choisir entre ces deux projets. Vous pouvez ainsi passer de la page d'accueil aux détails des produits et travailler avec eux en temps réel. Et ils seront en mesure de comprendre ce que tu as fait. Et ici, vous pouvez voir les zones sélectionnées et surlignées lorsqu' ils peuvent réellement cliquer. Vous pouvez le voir évoluer en temps réel. Tout fonctionne donc comme il se doit. Et vous pouvez voir ces zones ici, ici. Tout fonctionne donc comme il se doit. Et c'est la publication des projets dans mock plus r p. Dans la vidéo suivante, je vais vous parler du téléchargement de vos prototypes. Pourquoi est-ce utile , comment le faire, et à quoi ressemble tout cela ? Alors je te verrai là-bas. 23. Téléchargement de Prototypes: Parfois, vous souhaitez télécharger vos prototypes depuis Mach plus rP, les partager avec vos collègues, avec des clients, et vous ne souhaitez pas les télécharger et les publier tout de suite. Peut-être que vous êtes sous contrat de confidentialité. Vous n'avez peut-être pas accès à Internet. Peut-être que vous voyagez quelque part et que vous voulez avoir juste ces prototypes. Pensez-y pour revoir certaines notes que vous avez. Toutes sortes de ces différents scénarios et décès où option de téléchargement est utile. Laisse-moi te montrer. Alors voilà, juste en haut, vous avez cette option de téléchargement. Vous pouvez donc télécharger le package de présentation du prototype hors ligne. Et voici les phrases clés ici, package de présentation, utilisé pour les présentations. Ainsi, lorsque vous souhaitez le présenter hors ligne, lorsque vous êtes en déplacement, peut-être que vous êtes sur votre ordinateur portable, que vous voyagez, que vous vous rendez sur votre lieu de travail ou pour vos clients. Il existe différentes options et scénarios dans lesquels vous pouvez utiliser quelque chose comme ça. C'est très important de le faire car vous voulez toujours avoir une sauvegarde. C'est formidable de l'avoir dans le cloud, mais il arrive que des personnes n'aient pas accès à Internet. Peut-être que tu es juste là. Alors pourquoi les transférer vers le Cloud alors que l' option est disponible sur votre site, par exemple, vous souhaitez peut-être la partager en interne à cause des accords de confidentialité, comme je l'ai dit. Il existe donc très peu de scénarios dans lesquels vous pouvez utiliser quelque chose comme ça et c'est vraiment utile. vous suffit donc de cliquer ici. Cela va vous montrer une plage de pages. Je vais sélectionner la gamme Paint et je vais sélectionner la boutique que je souhaite pour que vous puissiez décocher ce que vous voulez faire. Je souhaite les explorer et exploiter tous les deux afin que nous puissions simplement les sélectionner tous. Vous pouvez voir que deux d'entre eux sont sélectionnés. Et vous pouvez voir toute la plage de pages parce que j' ai deux pages à l'intérieur de mon dossier. Vous pouvez afficher le panneau de page, vous pouvez afficher la direction nord, afficher la barre d'outils. Vous pouvez afficher des liens vers tous ces paramètres dont nous avons parlé et que nous avons utilisés. D'accord, une fois que vous serez prêt à télécharger, le téléchargement prendra un peu de temps. Et en fonction de votre machine, en fonction de votre projet. Donc, par exemple, si vous optimisez vos images, cela prendra un peu plus de temps. Si vous avez utilisé différentes pages, cela va prendre un peu plus de temps. Mais dans ce cas, comme vous pouvez le constater, il s'est exporté très rapidement. Alors laissez-moi le déposer dans un dossier. Maintenant, je vais lui montrer ce dossier, à quoi il ressemble. Alors on y va. Nous avons cette option pour un fichier zip, cliquez avec le bouton droit de la souris. Et je vais en extraire deux ici et les cacher juste pour que vous puissiez le voir un peu mieux. Nous y voilà. Et il a extrait ces actifs de manière solide et s' débarrassé de ce fichier zip. En fait. Débarrassez-vous-en en appuyant sur Supprimer. Nous y voilà. Et nous avons ici tous ces actifs qui sont inclus par défaut pour plusieurs SRP. Ensuite, nous avons les options de données, qui sont toutes les images incluses à l'intérieur. Et évidemment, il est très important que vous nommiez vos couches. Sinon, vous allez vous retrouver avec de tels résultats. Mais en gros, il les exporte simplement forme de fichiers d'espace réservé. Lorsque vous partagez avec vos développeurs, les noms de couches que vous avez publiés sont conservés. Enfin, nous avons la page d'index, double-cliquez dessus et elle s' ouvrira en tant que nouvelle page. Vous pouvez voir ce que vos utilisateurs vont voir à l'intérieur, par exemple, du package de présentation que vous souhaitez leur montrer. Ils ont donc toutes ces options dont nous avons parlé précédemment. Si vous le souhaitez, vous pouvez inclure des nœuds ici. Vous pouvez masquer ces panneaux. Vous pouvez afficher ces panneaux. Vous pouvez faire ce que vous voulez et explorons-les une dernière fois. Et voilà. Cela nous a mené à cette page. Les effets de survol fonctionnent toujours. Cela fonctionne toujours. Tout est donc comme ici, mais c'est juste une version portable et plus encore, disons, où vous pouvez l'emporter où vous voulez parce que vous l'avez stockée sur votre machine. C'est pourquoi le téléchargement prototypes est une option si intéressante. Je vais l'aimer et je vous recommande de l' utiliser tout le temps. On dirait que je m'en sors aussi. 24. Ventilation de projet de cours: Dans cette vidéo, nous allons détailler rapidement les projets de cours. Et je le fais pour chacun de mes projets. Nous n'allons tout simplement pas inclure de détails plus approfondis, tels que le brief de conception ou la proposition de projet. Je vais supposer qu'ils ont déjà été créés car c'est le projet qui n'existe pas vraiment. Mais je souhaite tout de même vous présenter le processus de conception complet, que j'aime utiliser lorsque je conçois mes projets, qu'il s' que j'aime utiliser lorsque je conçois mes projets, agisse de sites Web ou d'applications mobiles. Tout d'abord, nous allons commencer par certains flux de tâches ou par des organigrammes, la manière dont vous souhaitez les appeler et les structurer. Je vais juste vous montrer comment les choses vont être structurées sur la page elle-même. Ensuite, avec quelques informations de base, nous allons passer aux wireframes. Nous allons simplement placer quelques éléments sur la page et créer une structure d'éléments de base dans nos designs. Ensuite, nous passerons aux designs. Nous allons prendre ces maquettes, les transformer en designs en y ajoutant de la couleur, ajoutant différentes images, en ajoutant de la structure, en y ajoutant une copie réelle. Enfin, nous allons ajouter interactions et des animations à notre design pour lui donner vie et le faire ressortir un peu plus qu'à la fin Je vais vous montrer comment partager ce design avec vos coéquipiers, vos clients et les développeurs. Et enfin, comment l'exporter sous forme de prototype, que vous pouvez ensuite emporter avec vous où que vous soyez sans Internet et que vous pouvez ouvrir sur n'importe quel appareil. Alors allons-y. Dans la vidéo suivante, nous allons créer des flux de tâches rapides pour décrire le contenu de notre page. Alors je te verrai là-bas. 25. Carts de débit: Dans cette vidéo, nous allons créer quelques organigrammes rapides pour nos projets. Alors allons-y. Nous voici donc dans mock plus rP, et je vais tout de suite créer un nouveau projet. Et je vais utiliser 1920 1080. C'est bien parce que ce sera un site Web de réalité virtuelle. C'est ainsi que je vais le nommer. Cliquez sur OK et un nouvel onglet s'ouvrira. Je n'utiliserai aucun modèle car je veux commencer à le créer à partir de zéro. Et tout d'abord, avant de passer à autre chose, allons-y et définissons allons-y et définissons très rapidement certaines préférences. Passons donc aux paramètres de mise en page. Je vais utiliser 12 colonnes. Pour la largeur de colonne. Ce que je peux faire, c'est utiliser quelque chose comme 82. La largeur de la gouttière peut être un peu plus petite, comme 60 ou quelque chose comme ça. Nous y voilà, mais essayons de nous retrouver entre les deux. Donc 8 080,80, je pense que ça va très bien fonctionner. Et ces rangées vont bien se passer. Couleurs. Peut-être que nous pouvons opter pour quelque chose comme 40, quelque chose comme ça. C'est bien. Et nous n'avons pas besoin de lignes pour le moment. Je vais juste m'en servir. Voyons voir, décalez peut-être 20 pixels, mais pas par rapport au centre. Gouttière à l'extérieur. Quelque chose comme une dette. Voyons voir, une vingtaine peut-être. Voilà. Mais je n'aime pas vraiment ça. Alors recommençons avec un t. Nous visualisons donc, montrons la mise en page. Nous y voilà. Voici donc notre mise en page. Ce sera la mise en page automatique pour cette page. Alors, tout d'abord, cachons-le rapidement. Donc des vues, parce que je ne veux pas les voir très rapidement. Donc Alt Plus L, c'est la façon dont nous allons le cacher. Cliquez sur Alt plus l pour le masquer rapidement. Et je vais aller sur la page, et cette page, je vais en fait la renommer. Voyons voir, quand il sera créé une nouvelle page va me faire tomber. Nous y voilà. Donc, cette première page, je vais la renommer en organigramme comme ça. Ensuite, la deuxième page, je vais la renommer en wireframe. La troisième page sera notre design. Nous y voilà. sont donc tous de 1920 x 1080 parce que c'est ainsi que nous les avons définis. Et vous pouvez voir que c'est ici. Et revenons à notre organigramme car commençons à poser quelques éléments. Donc, en ce qui concerne les composants, tout ce que j'ai à faire ici est d'utiliser l'une de ces formes. Alors peut-être celui-ci, ici, dans cette forme. Allons-y un tout petit peu. Je vais double-cliquer à l'intérieur et taper quelque chose comme une image de héros. Nous y voilà. Et je vais agrandir ce texte pour qu'il soit peut-être 30 ou quelque chose comme ça. Nous y voilà. Juste pour avoir un peu plus d'espace pendant que nous travaillons ici. Peut-être quelque chose d'un peu plus petit, comme 20, juste pour que nous puissions voir avec quoi nous travaillons. Maintenant, changeons cela en Roboto, je pense, et rendons le tout audacieux, comme ça. Donc, à l'intérieur d'ici, peut-être que nous pouvons changer cela et utiliser une couleur différente. J'ai donc déjà préparé une couleur sur mon bureau, qui est une jolie couleur bleue. Et dans ce cas, le texte sera d'un blanc pur. Et débarrassons-nous de cette audace. Nous n'en avons pas besoin. Enfin, je vais me débarrasser de la frontière. Et dans ce cas, nous sommes prêts à partir. Donc, ce que je dois faire ici , c'est accéder au balisage, faire glisser quelques flèches à l'intérieur, et les placer, disons à environ 20 à partir d'ici. Donc, à partir de maintenant, ce que je vais faire, c'est augmenter la largeur à cinq. Peut-être pas si grand. Peut-être trois, peut-être deux. En fait. Nous y voilà. Je l'ai donc un peu étendu, juste pour que nous puissions le voir un peu mieux. Ce que je vais faire, c'est le dupliquer , le positionner ici. Ensuite, à partir de l'image du héros, nous allons passer à la section Explorer. Et dans cette section d' exploration, nous allons simplement donner quelques informations sur ce que vous pouvez explorer à l'aide de cette réalité virtuelle. Maintenant, pour cette première forme, je vais en fait la modifier. Changeons donc cela pour qu'il s' agisse des points d'entrée, quelque chose comme ça, je pense, qui fonctionne. Eh bien. Réduisons-le un peu de ce côté. Sélectionnons-les tous, déplacons-les comme ceci. Ensuite, à partir de la section d'exploration, nous allons passer à la section suivante, qui portera sur les possibilités. Parce que nous voulons montrer aux gens ce qui est possible lorsqu'ils ont acheté ce casque VR, par exemple , dans la section suivante, nous allons passer aux jeux et aux jeux vidéo. Et je veux mettre en évidence cette section, donc je vais utiliser une autre couleur. J'ai déjà préparé cette couleur comme ça parce que je veux jeux soient une caractéristique remarquable de ce site Web, quelque chose comme ça. Parce que le jeu est vraiment bénéfique dans le monde dans lequel nous sommes actuellement. C'est là que se trouve la majeure partie de l'argent dans ce jeu vidéo. Alors positionnons-le 20. Nous y voilà. Et je vais passer à d'autres sections. Maintenant, cette section peut être, par exemple, une section vidéo. Et dans cette section vidéo, nous pouvons peut-être expliquer à quoi sert le mieux la réalité virtuelle, comment elle est utilisée ou quelque chose comme ça. Alors laissez-moi le dupliquer. Positionnement ici. Dupliquez-le sous la section vidéo. Peut-être pouvons-nous explorer certaines fonctionnalités ou certains éléments. Donc des casques VR. Alors peut-être que les gens peuvent les acheter ou quelque chose comme ça. Et enfin, réglons ce problème. Retournez-le avec un peu de délicatesse. Cela le place ici jusqu'à 20. Nous y voilà. Contrôlez D sur celui-ci, positionnez-le ici. Et peut-être pourrions-nous saisir quelques témoignages. Nous y voilà. Et reproduisons cette flèche une fois de plus. Je veux donc simplement créer une sorte de boucle fermée. Je veux donc montrer à mes clients, par exemple , comment cela va fonctionner. Voyons donc la section Promo, quelque chose comme ça. Nous y voilà. Ce que nous pouvons faire, c'est peut-être dupliquer cette flèche et peut-être jouer un peu avec cette forme. Donc, à la fin, voyons voir, je vais utiliser ce Control D pour le dupliquer, puis le positionner à peu près ici. Aucun groupe ne sera créé au départ. Je devrais peut-être passer de l'autre côté comme ça. départ ne devrait donc pas être nul. Nous y voilà. Et je voudrais le situer un peu plus bas. Alors la fin va se dérouler comme ça. Nous y voilà. Et je vais dupliquer celui-ci. Assurez-vous qu'il est à peu près au centre et assurez-vous qu'il est à 20, comme ceci. Donc, ci-dessous, nous allons dire quelque chose comme des accessoires pointus. Parce qu'il y en a plein. Et permettez-moi de reproduire l'un d'entre eux, peut-être celui-ci. Et placez-le ici, là où il est écrit 20. Nous y voilà. Et dupliquez celui-ci encore une fois, comme ça. Et je vais dire quelque chose comme Final Prompt Section ou World of VR. Parce que cela va décrire ce qu'est réellement le monde dans lequel nous vivons. Enfin, nous sommes arrivés à la fin de la page. Je peux donc dupliquer ce Control une fois de plus. Oups. Pas ça. Positionnez-le ici pour qu'il soit 20. Cela vaut également pour le B2C. Et ce sera le pied de page de notre page. Nous y voilà. Je pourrais peut-être l'appeler et lui donner différentes variantes. Donc ce premier peut être quelque chose comme, je ne sais pas, cette couleur. Ce dernier peut être de cette couleur. Ou mieux encore, peut-être pouvons-nous utiliser quelque chose d'un peu différent. Donc, pour cette première , je vais utiliser une couleur plus foncée comme celle-ci. Nos points d'entrée et de sortie peuvent donc être de ces couleurs sombres. Et pour toutes ces autres couleurs, nous pouvons utiliser ces nuances de bleu, ces tons de bleu et des trucs comme ça. Peut-être pouvons-nous le déplacer un peu vers le bas et simplement étendre cette flèche pour qu'elle ressemble à ceci. C'est donc juste mon approche et façon dont j'aime créer des organigrammes. Tu peux le faire. Toutes sortes de techniques différentes sont des méthodes que vous choisissez. Et il existe également une autre fonctionnalité qui est incroyable au lieu du mode Mock Plus rP, appelée le mode Connect, qui vous aidera à créer ces organigrammes encore plus rapidement. Alors laissez-moi vous montrer comment cela fonctionne. Tout d'abord, je ne vais pas le supprimer car, comme je l'ai dit, c'est juste mon approche. Je vais dupliquer ce tableau à l'aide de la commande ou de la commande D. Ensuite, je vais me débarrasser de cette flèche, de cette flèche et de cette flèche, par exemple, cette flèche, de cette flèche et de cette flèche, par exemple, et continuer à supprimer ces flèches. Ensuite, je vais les sélectionner pour les déplacer et sélectionner celui-ci également, juste pour me donner un peu plus d'espace. Donc, comme nous l'avons fait ici. Disons que c'est la fin de notre image de héros. Nous partons d'ici. Donc, pour entrer en mode connexion, cliquez simplement ici ou utilisez Alt C, cliquez ici. Ensuite, vous pouvez simplement faire glisser le pointeur depuis l'un des coins, par exemple celui-ci, et lâcher prise. Ensuite, cela vous donnera la possibilité de créer n'importe quel type de forme que vous souhaitez, par exemple, utilisons celle-ci. Permettez-moi de zoomer un peu. Et à partir de là, je vais double-cliquer et taper ceci parce que cela correspond à notre prochaine étape. Imaginons donc que nous ne l'ayons pas créé du tout. Alors explorez la section. On y va et on clique quelque part à l'extérieur. Maintenant, pour cliquer sur celui-ci, voyons voir, 28793. Je vais cliquer sur celui-ci. Donc 28793, quelque chose comme ça. Nous y voilà. Et lorsque vous la déplacez vers le haut, vous pouvez voir que la flèche est générée dynamiquement, ce qui est incroyable. Et cela va simplement vous donner un peu plus de précision vos designs et vos sélections. Permettez-moi donc de copier cette couleur. Permettez-moi de l'appliquer à fond, ici même. Permettez-moi de sélectionner la couleur du texte qui doit être blanche et allons-y avec Roboto. Allons-y avec 20. Donc, pour imiter ces sections plus tard. Donc, ce que vous pouvez faire ensuite c'est simplement sélectionner celui-ci, appuyer sur Control D pour le dupliquer. Positionné à l'extérieur du solveur , cliquez, cliquez et connectez ces deux points. Maintenant, sur la question suivante, vous pouvez dire quelque chose comme des possibilités. Ensuite, vous pouvez cliquer dessus et faire glisser pour réduire sa taille, par exemple , c'était la prochaine partie. Donc, ce que nous pouvons faire dans ce cas, c'est que si je sélectionne ces deux flèches et que je les déplace, vous pouvez voir comment les flèches se déplacent dynamiquement. Alors peut-être que nous pouvons prendre un petit tour, appuyer une fois de plus sur la commande D et taper jeu ici. Nous y voilà. Mais je vais juste utiliser cette couleur dorée comme ça, puis la coller ici. Maintenant, en ce qui concerne les jeux vidéo, ce que je peux faire, c'est peut-être connecter les deux ici , ou je peux les connecter ici, puis simplement les positionner ici pour que vous puissiez voir à quel point ils sont dynamiques , les déplacer et les organiser comme vous le souhaitez. Et ces flèches vont suivre. Si je ne suis pas satisfait, je peux toujours annuler à quelques reprises, puis revenir ici. Et puis, si nous voulons nous connecter à la section suivante où je peux le faire, appuyez sur Control D, par exemple ici. Ensuite, il devrait être écrit Section vidéo, comme ça. Et puis connectez simplement celui-ci et celui-ci. Ensuite, à partir de là, vous pouvez aller ici, par exemple à partir de celui-ci, vous pouvez descendre jusqu'ici, disons qu'à partir d' ici, vous pouvez aller ici et vous pouvez voir à quelle vitesse cela peut se diversifier et s'ajuster différentes manières, formes et tailles. Vous pouvez donc créer toutes sortes de mises en page compliquées en utilisant ce mode de connexion génial pour en sortir, cliquez simplement ici. Ensuite, il vous restera toutes ces flèches et la façon dont vous les positionnerez. Et vous pouvez voir que c'est toujours dynamique même si nous avons quitté le mode Connect et peu importe ce qu'il a essayé d'ajuster et de modifier, les flèches suivront. Juste une petite remarque, encore une fois, c'est une bien meilleure approche que la mienne, mais j'aime toujours utiliser mon approche parce que je l'utilise depuis des années et que j'y suis juste habituée, mais assurez-vous d'utiliser le mode Kinect. C'est un moyen beaucoup plus rapide de créer ces organigrammes, en particulier si vous avez plusieurs pages différentes et que vous travaillez sur un projet de grande envergure. Et vous devez connecter ces pages croisées à des mises en page, des écrans et des tailles différentes pour vos tableaux d'art. C'est donc une bien meilleure façon de le faire en utilisant le mode connexion. Mais comme je l'ai dit, je vais appuyer sur Supprimer ici. Nous allons utiliser cette approche dans cette méthode, que je vous ai déjà montrée. Parce que, comme je l' ai dit, j'y suis habitué. De toute évidence, ces organigrammes sont mieux utilisés lorsque vous avez plusieurs pages et lorsque vous passez page à l'autre lorsque vous avez plusieurs écrans. Mais bien sûr, vous pouvez voir à quel point ils sont très simples à configurer ici, ce qui vous permet de planifier le contenu de votre page l' avance avant de passer aux wireframes et aux designs. Et ne perdez pas de temps une fois que vous avez atteint la partie création de votre design. En parlant de la partie création dans la vidéo suivante, nous allons aborder certains wireframes, et je vais vous montrer comment configurer ces wireframes et comment vous préparer à cette mise en page, ce qu'il faut inclure et ce qu'il ne faut pas inclure. Alors je te verrai là-bas. 26. Cadre de fil: wireframes jouent un rôle très important dans chaque processus de conception, car vous pouvez réellement expérimenter la mise en page, voir où peuvent se situer les différents éléments, comment l'ajuster, comment vous pouvez le positionner et en faire ce comment l'ajuster, comment vous pouvez le positionner et en faire ce que vous voulez au cours des premières étapes du projet. Avant de passer à la phase de conception, l'objectif du wireframing est de faire les choses rapidement et de passer à autre chose. Et si quelque chose se brise, laisse-le et passe à l'idée suivante, car c'est tout ce que c'est. Processus de génération d'idées de wireframing avant de passer à la conception finale. Revenons donc à ma plus rpm. Laissez-moi vous montrer comment créer des wireframes. Nous voici donc en mode plus r p. Et je vais sélectionner ma page filaire. N'oubliez pas que nous avons déjà configuré la résolution 1920 x 1080. Et je vais l' étendre un peu parce que nous allons y ajouter pas mal de contenu. Donc, la première chose que je veux faire est d'appuyer sur Control L. Bon, le problème ici est que je n'ai pas défini les valeurs d'origine sur la première page avant créer les autres pages, par exemple wireframe et le design. Donc, lorsque vous avez votre première page, assurez-vous de définir les valeurs souhaitées puis de les enregistrer par défaut, puis de créer d'autres pages. Il sera ensuite traduit dans toutes les autres images que vous avez créées. Mais vous devez le faire sur la première page que vous créez , puis enregistrer ces valeurs par défaut. Nous en avons donc 80, 80, 87. Réglons donc rapidement cela. Nous avons donc 8 080,87, 80, 80. Essayons-le avec une gouttière à l'extérieur. 80, 80, 87. Mais avant de passer à d' autres préférences, je voudrais simplement les modifier légèrement. Je voudrais donc peut-être réduire ce chiffre à 20, ou peut-être même à quelque chose de moins, comme dix. Nous y voilà. D'accord ? Cela n'entre donc pas trop en conflit avec notre design, qui n'est pas vraiment ce que nous voulons faire. Donc, tout d'abord, nous pouvons créer une sorte de section consacrée aux héros. Pour le faire. Vous pouvez utiliser des rectangles, vous pouvez utiliser des images, vous pouvez utiliser ce que vous voulez. Je vais utiliser l' image dans ce cas. Je vais donc faire glisser une image vers celle-ci et définir quelques valeurs. Donc 1920 par 1 000. Nous y voilà. Je vais le mettre en haut comme ça. Et en plus, je vais ajouter notre rectangle. Donc, dans les années 1920, par 1 000. Donc, mêmes dimensions. Et je vais juste l' accrocher au sommet, me débarrasser de la bordure. Entrez ici. Image. Et je vais l'appeler, par exemple image de héros. Nous y voilà. Et cela peut être Hero Color Overlay. Nous y voilà. Maintenant, je vais ajouter une autre image ici. Et je vais nommer cette image logo. Nous y voilà. Et pour le logo lui-même, ce que je peux faire, c'est lui donner des dimensions de 106, une largeur de 56, par exemple l'accrocher en haut. Contrôlez-le, par exemple 50 pixels vers le bas, quelque chose comme ça, et positionnez-le à peu près ici. Nous y voilà. Appuyez sur T sur mon clavier et je vais taper quelque chose comme des produits. Nous y voilà. Et je vais le positionner de manière à ce qu'il soit à peu près ici. Maintenant, pour cela, je veux utiliser Roboto dans ce cas. Et je vais choisir 18. Nous y voilà. Je vais faire quelques doublons. Donc, tout d'abord, le contrôle et D. Maintenant, celui-ci va dire, par exemple partenaires. Le prochain portera sur le thème du soutien. Nous y voilà. Et une dernière. Et ça va dire quelque chose comme : Allons-y. Et maintenant, enfin, il ne me reste qu'à les espacer uniformément. Je vais donc peut-être le placer ici jusqu'au bout, le placer ici même. Il est donc aux alentours de 60 ans. Nous y voilà. J'espère que cela suivra. C'est. Est-ce que. Cela suivra également. C'est le cas. Donc, ce que je peux faire, c'est les sélectionner tous, appuyer sur Control G pour les placer dans un groupe appelé éléments de navigation. Mettez-les sous mon logo et assurez-vous qu'ils sont centrés, par exemple appuyez sur Control G et je vais peut-être l' appeler Top Nav. Et voilà, notre section consacrée aux héros est presque prête. Mais nous avons besoin d'une sorte de superposition de couleurs ici. Donc, ce que je vais faire, c'est utiliser la couleur et je vais la placer ici. Nous y voilà. Et je vais passer directement à mes actifs et sélectionner couleur sans cette couleur de bas car je n'en ai pas besoin. J'ai juste besoin de celui-ci. Et je vais l'appeler, par exemple quelque chose comme gris foncé ou foncé principal. Sombre, quelque chose comme ça. Nous y voilà. Et dans ce cas, je veux m'assurer que mon texte est complètement blanc. Je vais donc me rendre ici. Entièrement blanc. Mais sélectionnons simplement les éléments de texte en forme de bordeaux, complètement blancs. Oui. D'accord. Je vais passer à la couleur, sélectionner l' une d'entre elles, peu importe. blanc. Nous y allons et sélectionnons l'un d'entre eux. Et je vais les ajouter à mes textes parce que c'est ce que je vais utiliser tout au long de mon design. Passons au compost et ajoutons du texte à leur texte de base. Et je vais le mettre à peu près ici. Ensuite, je vais le déplacer vers l'extérieur ou Control X pour le découper à l'extérieur, puis le coller ici. Ensuite, je peux le positionner en haut. Et une fois qu'il a atteint le sommet, je peux créer des textes plus grands dans ce cas. Je vais donc utiliser à nouveau Roboto, mais optez pour quelque chose comme 70. Nous y voilà. Assurez-vous qu'il est centré, alignez-le, assurez-vous que c'est quelque chose de grand. Et je vais dire qu'il y a quelque chose comme le titre ici. Nous y voilà. Et je vais, comme je l'ai dit, assurer que son centre est aligné, m' assurer qu'il est centré. Nous y voilà. Et je peux le positionner juste en dessous. Ensuite, je vais passer à l'audace. Nous y voilà. Retournez à mes actifs et ajoutez-le en tant que texte. Ensuite, je vais le dupliquer, le positionner ici et je vais personnaliser le vôtre par exemple. Nous y voilà. Mais au lieu de ça, je vais opter pour 18. 18 va très bien fonctionner ce cas particulier, car je dois créer un bouton pour je dois créer un bouton pouvoir utiliser le composant bouton et je vais en fait le placer ici. Donc, mon bouton va être quelque chose comme 366, largeur 60, leur ego. Et le texte à l'intérieur, comme nous l'avons dit, sera 18. Vous pouvez donc le sélectionner. Optez pour 18, optez pour Roboto, optez pour le blanc. Je vais donc opter pour le blanc. Et pour la couleur de mon bouton, je vais utiliser la couleur que j'ai déjà utilisée. Donc, ici, on y va. Et nous allons ajouter cette couleur et nous en débarrasser parce que nous n'en avons pas besoin. Je vais l'utiliser et cela s' appellera notre bleu principal. Nous y voilà. Et ici, je vais simplement utiliser ce texte. Double-cliquez et personnalisez le vôtre. Nous y voilà. Débarrasse-toi de celui-ci. Et pour le rayon d'angle, débarrassons-nous de la bordure. Pour le rayon d'angle, choisissons quelque chose de grand comme Swanee. Regarde à quoi ça ressemble. Ça a l'air bien. Assurez-vous qu'il est au centre, par exemple, assurez-vous qu'il se trouve à droite ou à peu près par ici. Désolée, on y va. Ce sera donc notre principal btn. Et tout de suite, ce que je vais faire c'est peut-être créer un composant pour cela. Donc, passez la souris dessus, mais je vais changer sa couleur. Alors peut-être que nous pouvons opter pour le fait de changer ce mot bleu, bleu principal. Voyons ce que nous pouvons faire. Entrez ici, remplacez-le par ici, c'est parti. Ce sera donc notre principal bleu. Et ce sera notre bleu foncé. Et voilà. Donc, pour le bleu principal, ce sera dans les limites de la normale. Nous y voilà. Et pour le survol de la souris, ce sera bleu foncé. C'est donc aussi simple que cela. Revenons à la normale. Prévisualisons rapidement juste pour voir si nous appliquons cette modification. Et vous allez voir, nous y voilà. C'est donc déjà là. Charmant. Donc, si nous y revenons, et commençons à concevoir certains de ces autres éléments. Avant de poursuivre, je tiens à m'assurer de placer le bouton ici. Nous y voilà. Et je vais appeler cette section des héros. Maintenant, la section suivante, sous la section de mes héros contiendra mon image et du texte. Donc, en gros, ce que je vais faire à ce stade, c'est utiliser du texte. Nous y voilà. Et je vais dire quelque chose comme le titre de la section. Nous y voilà. Et je vais m' assurer qu'il est aligné à gauche. Et cette fois, je vais opter pour quelque chose de plus bas, comme 60. Et je vais choisir cette couleur foncée principale, en m'assurant qu' elle est alignée à gauche. Encore une fois. Positionnez-le jusqu'à ce qu'il soit aligné juste là, contrôlant la touche D pour le dupliquer. Et maintenant, repartons avec quelque chose de différent. Alors, tout d'abord, ajoutons ceci comme texte. Celui-ci va être quelque chose de différent, comme 24 par exemple et la couleur sera un peu différente. Je vais donc transformer cette couleur ici, puis sélectionner la couleur ici. Appelez ça le paragraphe. Nous y voilà. Et ce paragraphe va en fait s'étendre à , disons, un à un. Quelque chose comme ça. C'est ce 792. Nous y voilà. Et la hauteur sera de 121. Maintenant, j'utilise mes propres textes, mais si vous souhaitez utiliser des textes de substitution, il suffit de cliquer mais si vous souhaitez utiliser des textes de substitution, suffit bouton droit sur ce composant de texte et cliquer sur saisie automatique pour le remplir rapidement avec le bouton droit sur ce composant de texte et de cliquer sur saisie automatique pour le remplir rapidement avec du texte de substitution automatique. Et ce sera le texte du paragraphe de section qui se trouvera juste ici. Alors on y va. Enfin, ce dont j'ai besoin, c'est d'inclure une image. Je vais donc passer directement aux composants, aller à l'image, l' étirer bien, le positionner à peu près ici. Cela n'a pas vraiment d' importance pour le moment. Ensuite, ce dont nous avons besoin, c'est de tourner le bouton que nous avons. Alors ouvre ça. Groupe par défaut, mais nous ne l'avons pas créé en tant que composant Ajoutons-le ici. Appuyez sur le bouton principal, OK, et ouvrez ce groupe par défaut. Ici, nous avons le bouton principal, il suffit de le faire glisser et de le positionner ici. Pour une raison quelconque, il continue apparaître dans la section principale des héros. Alors allons-y et appuyons simplement sur Control X pour fermer tout cela. Nous y voilà. Il l'a donc positionné juste ici. Paragraphe de section, image, titre de section. Nous y voilà. Et je vais simplement les regrouper. Mais avant de le faire, je voudrais peut-être les séparer un peu. Alors peut-être que 48 est un bon chiffre. Alors voyons voir, 58, 48, et voilà. Et cela peut aussi être 48. Donc, ce que je peux faire, c'est sélectionner cette section de qualité, des contenus comme ça. Et je peux appeler cette section toute entière une section. Positionnez-le en dessous de la section de mes héros. Et voyons la distance, ce que nous pouvons faire, c'est peut-être la maintenir. Gardons-le à 100. Je pense que ça va très bien fonctionner pour le moment. Et à l'intérieur, nous pouvons sélectionner ces deux éléments et nous assurer qu' ils sont centrés. Et nous y voilà. Maintenant, en dessous, nous pouvons avoir une section différente. Et je vais en fait réutiliser certains de ces éléments. Mais avant de le faire, permettez-moi de sélectionner celui-ci et de l'ajouter comme texte. Nous y voilà, et nous sortons. Et ce que nous pouvons faire, c'est créer des sections différentes. Créons-en un nouveau de toute façon. Cela va donc dire des possibilités illimitées. Possibilités, assurez-vous qu'il est centré et assurez-vous que c'est celui-ci au centre. Assurez-vous que nous sommes 100 % Control D. Maintenant, utilisez celui-ci. En fait, je vais aller un peu plus vite. Je vais donc coller ce contenu, le contenu original. Et voyons voir, la distance peut être d'environ 40. Je pense que c'est plutôt bien. Nous y voilà. Nous en avons donc 100. Maintenant, en dessous, ce que nous allons réellement créer , ce sont des sortes de cartes. Cette carte peut donc se trouver à l'intérieur d'un contenant. Donc, pour créer le conteneur, vous pouvez créer avec notre rectangle. Et c'est peut-être parce que ça va être, disons, quatre d'entre eux. Elle peut avoir une largeur d' environ trois colonnes. Voyons voir, peut-être pouvons-nous lui donner quelque chose comme 40, 87 pour la hauteur ou quelque chose comme ça. Voyons voir que la distance entre elle et les couches supérieures peut être d'environ 100. Donc, si j'en ai sélectionné 100, c'est parti. Et nous pouvons ajouter le rayon d'angle. Ainsi, sans bordure, le rayon d' angle peut être de dix. Nous y voilà. Et une chose que j'ai oublié de mentionner c'est que nous pouvons régler la couleur de notre tableau d'art sur une couleur différente, car le moment, il ne se démarque pas vraiment trop. Je vais donc utiliser cette couleur additionnée comme ceci. Et je vais également l'ajouter à mes couleurs ici même. Mais je vais juste l'appliquer rapidement ici. Nous y voilà. Alors remplissez, vous pouvez voir f b, f b, f b. Et je vais l'ajouter à mes couleurs, appeler couleur du tableau d'art. Et voilà, débarrassons-nous simplement de cette couleur. Maintenant, au lieu de la couleur Artboard, je vais utiliser le blanc pour continuer ce que nous faisions auparavant. Je n'ai pas besoin d' être audacieux, je pense. Alors peut-être que je peux le configurer comme ça. Nous y voilà. Et ce que je peux faire, c'est utiliser ce texte. Alors, contrôlez D, positionnez-le à peu près ici. Et je peux y ajouter du contenu. Nous y voilà. Et peut-être que je peux régler la largeur sur, disons, trois ou trois, quelque chose comme ça. Je peux l'ajuster au centre de ma carte à peu près ici. Et je peux revenir aux composants et ajouter une nouvelle image. Cette fois, nous pouvons opter pour quelque chose comme un vingt, largeur 108, peut-être quelque chose comme ça. Positionnez-le sur la commande centrale D de celui-ci. Et ici, nous pouvons configurer un nouveau style de texte de 32. Et je pourrais peut-être lui donner un nom d'éducation. Et cette fois, ça peut être Bolt. Nous y voilà. Je veux lui donner cette couleur foncée principale pour le différencier. Juste une touche. Et voyons voir, on peut en faire 40 de chaque côté. Disons que je pense que c'est bien. Alors voyons voir. Tout d'abord, passons à 58 à partir de ce bord supérieur. Donc 58 et ça peut être 40 de moins. Comme ça. Cela peut aussi être 40 points de moins. Nous y voilà. Ensuite, nous pourrons peut-être étendre la carte un peu, juste un peu vers le bas. Nous y voilà. Maintenant que nous avons notre carte, nous pouvons appeler cette carte BG actuelle. Nous y voilà. Et je peux regrouper ces éléments. Cela peut donc être une icône, acquérir de nouvelles compétences, une éducation, icône. Nous y voilà. Ce sera donc notre chariot. Et nous allons déposer nos cartes. Voyons voir, juste ici. Ce sera donc juste là. Nous y voilà. Il s'agit d'une grille de 100. Maintenant, il ne me reste plus qu' à dupliquer cette carte, à la placer ici. Positionnez-le ici, puis enfin positionnez-le à peu près ici. Voyons voir, 369. Il nous manque une colonne ici pour une raison ou une autre. 23 456-789-1011, 12 colonnes. Revenons donc à nos préférences. Paramètres de mise en page. Vous pouvez voir 12 colonnes, mais ce décalage provient du centre. Alors peut-être que nous pouvons le régler sur quelque chose de plus bas. Bon, on va sortir dans la caniveau à 40 ou 40 heures. Allons-y avec zéro. Et voilà. Juste pour que nous puissions avoir un aperçu de notre contenu dans ce cas. Et je ne veux pas perdre trop de temps car en fin de compte, cela n'a pas vraiment d'importance en matière de développement, car les développeurs vont le créer de toute façon. Soit vous le créez comme ça, soit ils modifieront plus tard lorsqu' ils en auront fini avec. Donc, tout d'abord, je pense que c'est très bien. Peut-être que cela peut être légèrement déplacé. Peut-être que cela peut être légèrement déplacé pour entendre que tout le reste fonctionne très bien. La dernière chose que je voulais ajouter et aborder est ces cartes peuvent être un peu plus étroites, quelque chose comme ça. Et comme ça. Nous y voilà. Alors, comme ça. Et enfin, contrôlez D, dupliquez-le. La position est juste ici. Nous y voilà, et c'est notre carte. Donc, en gros, ce que je vais faire à ce stade, c'est sélectionner ce contrôle G, appeler possibilités, et l'organiser juste en dessous de cette section. La commande D suivante de cette section, organisez-la en dessous des possibilités, maintenez la touche Shift et la flèche du bas enfoncées pour que je puisse les déplacer légèrement. Et en gros, ce que je veux faire avec cette section, c'est simplement remplacer la position de ces éléments. Donc, cette image va apparaître ici. Ce texte va être utilisé à peu près, disons que je pense que nous allons l' esquisser plus tard et le voir plus tard. Ce ne sera que notre jeu. Nous y voilà. dessous du jeu, ce dont nous aurons besoin, c'est de cette vidéo. Je vais donc simplement créer une image rapide. Revenez donc ici, glissez et déposez l'image. Maintenant, cette image va être quelque chose comme 16, 44, largeur 863. Nous y voilà. Assurez-vous qu'il est au centre. Et je vais essentiellement créer un rectangle qui a exactement les mêmes dimensions que cette image. 16, 44 avec 863. Nous y voilà. C'était l'image ici ? Ce sera donc Color Overlay. Nous allons lui appliquer la même couleur foncée principale. Et je vais le baisser à peut-être 60 % ou quelque chose comme ça n'a pas vraiment d'importance. Ce sera donc notre vidéo ou vidéo promotionnelle. Et voilà. Comme ça. Enfin, en plus de cela, nous avons besoin de quelques textes. Alors appuyez sur T et tapez. Découvrez le monde avec de nouveaux yeux. Maintenant, ce texte va avoir un style énorme et il sera situé au centre de cet élément. Vous pouvez sélectionner tous ces éléments, les appeler promotion, vidéo, et les déplacer complètement vers le bas. Maintenant, ajustez ce paramètre à 100 à partir de là, par exemple ou, évidemment, vous pouvez le régler à 150 peut-être et l' ajuster davantage. J'aborderai cette question un peu plus tard, lorsque tout notre contenu sera prêt. Mais pour l'instant, je pense juste à supprimer cette vidéo parce que je n'ai pas vraiment trop de contenus différents que je souhaite créer ci-dessous. Peut-être que je peux régler ça, peut-être. Et puis peut-être que je pourrais dupliquer toute cette section. Positionnez-le jusqu'à, disons, 150, déplacez-le complètement vers le bas. Cela peut être de pointe, quelque chose comme ça. Ensuite, je vais me débarrasser de cette carte. aiment tous ça. Et si vous me permettez de copier le texte à l'intérieur, ce sera beaucoup plus rapide que de le taper. Nous y voilà. Et je vais en fait créer trois cartes différentes ici même. Utilisons donc à nouveau r pour le rectangle. Et allons-y avec quelque chose comme ça. 246 colonnes Control D, positionnez-en une juste ici. Et je vais même les affiner un peu. Voyons ce que nous pouvons faire avec cette mise en page. Ce premier peut mesurer environ 618 m de haut ou quelque chose comme ça, mais laissons les choses telles quelles pour le moment. Nous allons donc avoir une image, donc je vais la faire glisser et la déposer à l'intérieur. Cette image va être quelque chose comme 680 x 386. Nous y voilà. C'est tellement beau, agrandissez. Charmant. Ensuite, je vais sélectionner celle-ci, faire glisser et déposer mon image à l'intérieur également. Cette image va être un peu plus petite. Donc 146 de largeur, deux à trois, par exemple quelque chose comme ça. Nous y voilà. Et puis une dernière image couvrira les éléments ci-dessous. Alors, glissons et déposons. Et je vais utiliser essentiellement les mêmes dimensions. Donc 880 par 3198080 par 319, nous y voilà. Et positionnez-le juste là. Je vais évidemment avoir du texte à l'intérieur, donc je vais l'appeler l'Explorateur. Ce sera le nom de notre casque. Et voyons voir la taille. Oui. Je pense que c'est plutôt bien. Assurez-vous donc qu' il est au centre. voilà, positionnons leur commande D. Et je vais lui donner des couleurs différentes. Donc bleu foncé, par exemple ou bleu principal ici. Et je vais lui donner quelques textes, comme le vôtre personnalisé, par exemple, peut-être voulons-nous le personnaliser un peu. Ensuite, je vais appuyer sur Contrôle C, Contrôle V. Pour dupliquer cela, je vais le positionner ici. Assurez-vous qu'ils sont alignés sur le côté gauche comme ceci. Ensuite, je vais taper , par exemple, contrôleur. Voilà, mais j'ai oublié de l'aligner à gauche pour le texte. Ce sera laissé de la place des clients. Vous pouvez peut-être dire quelque chose comme « explore maintenant ». Et ces deux peuvent être des liens. Enfin, je peux le dupliquer une fois de plus, en les plaçant au centre ici. Dans ce premier cas, on peut avoir des idées, et dans le suivant, on peut s'inspirer. Et voilà, nous ajustons l' arrière-plan de cette image. Voyons voir, c'est dans celui-ci. Je peux lui donner la couleur bleu foncé, par exemple cette image va rester ici pour le moment. Donc, en gros, nous avons ici ceci, ces sections. Et évidemment, je vais simplement entrer dans le groupe, par exemple , ce groupe, ce groupe et cela, sorte que nous ayons trois groupes différents. Ce seront des idées. Ce sera un contrôleur. Et ce sera l' explorateur de ce casque, le véritable casque. Je vais donc lui donner le nom de technologie. Allons-y, descendez un peu et passez enfin à la section suivante, et passez enfin à la section suivante, qui sera consacrée aux témoignages, sera la même que cette section. Alors déplacez-le jusqu'ici. Nous y voilà. Et je vais lui donner le nom du témoignage. Nous y voilà. Nous allons l' ajuster un peu plus tard. Ensuite, cette même section la positionnera plus ou moins ici. Et je vais lui donner un autre nom. Comme des appareils tout-en-un. Nous allons avoir quelques options ici. Nous y voilà. Et je vais simplement me débarrasser de ceci et de cela, me débarrasser de cela aussi. Alors cliquez avec le bouton droit sur Dissocier, et je vais juste laisser l'image à l'intérieur. Maintenant, cette image sera également Explorer, car ce sera le casque de notre appareil. casque de cet appareil peut donc être quelque chose comme 1190650. Nous y voilà. Assurez-vous que c'est au centre. Charmant. Enfin, il suffit de faire glisser le composant du bouton principal que nous avons créé précédemment et de le positionner comme suit je ne sais pas. 80 peut-être, quelque chose comme ça. Nous y voilà. Assurez-vous simplement qu'il se trouve en dessous de notre image. Maintenant, cela peut être un casque. Charmant. Enfin, ce que nous aurons en bas de la page sera composé de trois cartes environ. Et nous allons en fait dupliquer cette section. Voyons voir. Oui, en fait, je peux même dupliquer cette section parce qu' elle va juste dire quelque chose comme «  Libérez le monde de la technologie » ou quelque chose comme ça. Et permettez-moi d'étendre cela un peu plus bas, comme ça. Entre cette section et cette section devrait se trouver une autre section. Mettons-le donc ici. Déchaînez. Nous y voilà. Et comme je l'ai dit, nous allons avoir un pied de page juste en bas. Donc, ce que nous pouvons faire, c'est créer ce rectangle. Utilisez notre position ici. Et je vais utiliser cette couleur foncée principale. Et je vais l'appeler quelque chose comme pied de page. Sac. Ces dimensions seront des années 1920 sur 740 et un vent pour éliminer la bordure, accrocher jusqu'au bord inférieur, comme ça. Passez au compost à mon image. Et voyons voir, 1920 x 740. Donc 1920 par 740. Nous y voilà. Assurez-vous qu'il est ici, puis qu'il est là, et assurez-vous de le renvoyer. Alors, commandez Send to Back. Nous y voilà. Nous allons l'abaisser à peut-être 50 %, juste pour voir ce qui se trouve derrière. Et une autre chose que j'aimerais faire est de créer le même logo. Appuyez donc sur Control C sur celui-ci. Retournez là où nous sommes, pied de page G. Et voilà. Et je vais essentiellement les regrouper, les appeler pied de page. À l'intérieur du pied de page, je vais coller ce logo. Donc, juste ici, cliquez avec le bouton droit sur la commande. Je ne sais pas pourquoi il ne me le montrera pas, mais c'est important. Dissociez donc Control G et appelez-le pied de page. Nous y voilà. Donc, juste en dessous, nous allons inclure une copie plus tard dans la ligne afin que je puisse appuyer sur T, par exemple et taper quelque chose de similaire. Voyons les produits. Nous y voilà. Et pour les textes de ce produit, je vais utiliser l'un de mes actifs, 100 fois ou Control D. Et pour celui-ci, je vais économiser Control D. Il s'agira de support, de groupes. Soutenir. Et enfin, pour ce dernier point, on y va. Maintenant que nous les avons tous, je vais les sélectionner et simplement les séparer un peu, les placer au centre et plus tard, je vais ajouter quelques éléments en coulisses. Mais en gros, cela va ressembler à Control D, dupliquer et ajouter quelque chose comme des casques. Mais je ne veux pas que vous vous ennuyiez en regardant ça. Au lieu de cela, nous allons créer une autre section ici même. Pour ce faire, nous avons besoin d' une section et juste au-dessus de cette section. Et cette section sera quelque chose comme, je ne sais pas, peut-être que oui, Voyons voir. Peut-être que nous pouvons le déplacer, juste un peu comme ça. Et au-dessus de cette section, nous pouvons peut-être créer quelque chose comme des accessoires pointus ou quelque chose comme ça. Passons donc à la saisie en T ici. Accessoires Sharp. Nous y voilà. Maintenant, ça peut être, je ne sais pas, 32. Pourquoi n'avons-nous pas créé ces 32 choses. 24, où est le 32 ? C'est donc 60. C'était où ? était, c'était ça ? Non. C'était 32. Très bien, donc créé ici même. Nous y voilà. Et maintenant, je vais sélectionner la dette, la transformer en 32 positions d'objectifs laitiers, sur laquelle elle est alignée à gauche, ici, Control G. Et je vais dire quelque chose comme une mallette de transport. Étui de transport Le câble suivant peut être rallongé. Et dans la prochaine, vous pouvez voir tous les accessoires. Et peut-être que je peux le diviser en deux lignes ou quelque chose comme ça. Nous y voilà. En dessous de ceux-là. Je vais ajouter quelques images. Mais avant cela, je peux créer des rectangles pour les placer dedans, car nous en avons trois Peut-être que je peux les diviser en quatre groupes différents. Cliquez donc avec le bouton droit de la souris et commandez, puis envoyez vers Back. Nous y voilà. Donc, ce sera juste ici. En fait, laisse-moi me débarrasser de ceux-là. Et laissez-moi en créer un. Ensuite, nous pouvons le dupliquer comme nous le faisions auparavant. Alors peut-être que je peux le positionner à 40 de chaque bord. Comme ça. Ensuite, je peux le dupliquer et mettre le prix ici. Et pour le prix, je peux opter pour cette taille plus petite. Et peut-être que ça peut être quelque chose comme, je ne sais pas, 98$ ou quelque chose comme ça. 98$. Nous y voilà. 40. Et à l'intérieur, je vais juste ajouter une image rapide comme celle-ci. Et cette image peut être quelque chose comme 417 par 417. Nous y voilà. Joli et grand. Et voyons voir, la carte orale elle-même peut être un peu plus grande. Alors voyons voir. Non, mettons simplement cette image. Alors commandez, renvoyez. Nous y voilà. Cliquez sur Commander. Amenez en avant. Et voilà. Il se trouve donc juste en dessous de notre texte. Je vais donc le sélectionner. Et en fait, avant moi, nous pouvons peut-être inverser la tendance et ajouter un rayon d'angle de 20. Débarrassez-vous peut-être de cette frontière. La couleur de fond est le blanc, ce qui est très bien. Et ce sera notre boutique BG ou notre produit. Donc produit du contexte. Et en fait, je vais sélectionner tous ces articles comme ça, 98 Control G. Et ce sera notre carte de produits, peut-être quelque chose comme cette fiche produit. Nous y voilà. Contrôle D pour le dupliquer, positionnez-le ici. Contrôle D pour le dupliquer, positionnez-le ici. Maintenant, le suivant peut être appelé, voyons voir, câble étendu. Peut-être. Nous y voilà. Le prix peut être plutôt de 54€. Nous y voilà. Et puis ce dernier peut être quelque chose comme C. Tous les accessoires sont comme ça. Mon anglais n'est pas très bon aujourd'hui. Nous y voilà. Et tout ce que je veux faire ici, c'est dire quelque chose comme tout explorer. Et à côté, je veux pouvoir ajouter l'icône d'erreur. Alors voyons voir, cette flèche va très bien fonctionner. Comme ça. Nous y voilà. Assurez-vous que nous sommes à 20, par exemple et cette flèche sera juste blanche. Nous allons ajouter, qu'est-ce que c'est ? Blanche ? Nous y voilà. Et cela peut aussi être blanc. Tellement blanc. Nous y voilà. Non, pas de couleur de remplissage, mais la couleur du texte peut être blanche. Nous y voilà. Cela peut aussi être blanc. Comme ça. Et l'arrière-plan peut aller vers Assets et passer à l'obscurité. Évidemment, vous ne le voyez pas en dessous de cette image, mais il n'a pas vraiment besoin de cette image. Je vais donc m'en débarrasser complètement. Et boutique ou accessoires, je vais le garder donc à 40 et celui-ci est à 40 également. Et en gros, on y va. Nous sommes allés de l'avant et avons fait tout ce dont nous avions besoin. Une dernière chose que je veux faire est rapprocher un peu, peut-être de 60, peut-être de 40. Nous pouvons en faire ce que vous voulez. Et je peux dire quelque chose comme des accessoires. Et organisons-les rapidement un peu. Donc, ça va aller juste en dessous. Cette section se trouvera juste au-dessus. Nous y voilà. Ainsi, lorsque nous passerons à Unleash, pied de page et les accessoires passeront au-dessus de Unleash. Et évidemment, organisons-les un peu mieux pour obtenir quelque chose comme ça. Double-cliquez et poussez-le un peu vers le bas. Donc, si nous accédons à nos préférences de mise en page et que je désactive nos colonnes ici, d'accord ? Et c'est ce que nous avons jusqu'à présent. C'est donc notre design, c'est ce que nous avons créé actuellement, et c'est notre maquette. Vous pouvez voir à quel point c'était super simple, quel point cela a été rapide. Évidemment, il m'a fallu 40 minutes pour créer, mais la partie design va être beaucoup plus rapide car nous allons continuer à la créer sans aucune rayure. Vous pouvez donc voir quand l'exploration commence, tout est bien présenté sur la page et tout peut fonctionner comme prévu. Dans la vidéo suivante, nous allons donc aborder le design. Alors je te verrai là-bas. 27. Créer des designs: Dans cette leçon, nous allons créer le design et transformer ces wireframes en design. Alors, sans plus tarder, allons-y. Voici donc le wireframe que nous avons créé précédemment. Ce que je peux faire, c'est simplement sélectionner tous mes éléments à l'intérieur de la page. Appuyez sur Control C, revenez à Pages, appuyez sur Design, zoomez complètement et étendez le tout jusqu'ici, par exemple, appuyez sur Control V et tous les éléments qu'il contient seront collés. Laissez cet espace vide en bas car, évidemment nous allons faire un peu d' espacement un peu plus tard. Donc, tout d'abord, je veux ajouter une copie réelle ici. Je vais donc le coller ici et m'assurer que c'est, disons, 59, 60 ou quelque chose comme ça. Nous y voilà. Et je vais ajouter ça ici. Passez ensuite aux couches et trouvez l'image de mon héros, qui est cette image juste ici. Je vais me diriger vers le téléchargement, cliquer sur Télécharger, puis je vais me rendre sur mon bureau. Voyons où se trouve le dossier. Alors, le voici. Et si je passe aux images et aux vidéos, qui seront mon histoire de héros, voici à quoi j'aurai l'impression que je vais cliquer sur OK, et c' est parti. Permettez-moi donc de baisser légèrement la superposition de couleurs à 60, 50, peut-être, quelque chose comme ça. Et maintenant, je vais utiliser mon haut pour le logo. Remplaçons-le. Cliquez sur Télécharger et revenons aux icônes de mes actifs. Voyons si nous y sommes. Non, c'est à l'intérieur des images. Logo. C'est du SVG, donc ça marche très bien. Nous y voilà. Vous pouvez donc voir à quel point il est facile de le remplacer. Maintenant, cette image sera VR in girl, par exemple pour le grill VR, je vais appuyer sur Télécharger, cliquer sur images et utiliser cette fille juste ici. Nous y voilà. Et vous pouvez voir à quel point la mort était super simple. Nous sommes devenus humains, nous l'avons un peu agrandi pour en arriver à quelque chose comme ça. Nous y voilà. Je vais cliquer à l'extérieur. Vous pouvez voir à quoi cela ressemble. Maintenant, je vais juste coller la copie de mon design original que j'ai créé hors écran. Évidemment, utilisez-le pour mon paragraphe. Nous y voilà. Et ce que je peux faire ici c'est six points tendus à une touche , pour que cela corresponde au rôle que nous sommes peut-être ou mieux encore , pour que cela corresponde au rôle que nous sommes peut-être ou mieux encore. Je peux le réduire pour que nous puissions passer en trois lignes à quelque chose comme ça. 48, 48, c'est bien. Mais je ne pense toujours pas que cette image doive être aussi grande. Ou peut-être pouvons-nous simplement utiliser les deux comme ça. Et assurez-vous simplement qu'ils sont au centre comme ça. Donc, avec toutes ces autres sections, nous allons évidemment les ramener à quelque chose comme ça. Voyons comment cela fonctionne. Peut-être que nous pouvons en parler un peu plus près. Et peut-être pouvons-nous même activer nos paramètres de mise en page des préférences. Nous y voilà. Oui, je pense que ça va très bien fonctionner. Mais pourquoi ne s'en tient-il pas aux préférences, aux paramètres de mise en page. OK, donc L, et je vais aller jusqu'au bout. Nous y voilà et ajoutons un petit peu à cette image. Et je pense que ça va très bien fonctionner. Ce que je vais faire une fois de plus, c'est appuyer sur Control D. Revenons ici. Voyons donc où se trouve notre image ? C'est ici. Nous sommes une fille. Je vais donc ajouter une autre image juste ici en haut. J'espère. Pour une raison ou une autre, il ne veut pas partir. Mais peu importe. Ce que je vais faire, c'est le créer à 200 x 200 et télécharger mon logo, désolé, mon icône. Au lieu des icônes, ce que j'ai ici est l'icône VR. Nous y voilà. Cliquez sur Placer, puis positionnez-le à peu près ici. Cela ne fera que m'intéresser un peu plus à cette section. Dis. Donc, je pense que cette section s'est bien comportée. Ensuite, tout ce que j'ai à faire est continuer et de cliquer sur Télécharger. Alors change ça. Ce sera notre éducation. Alors passez à ici, on y va. Le prochain sera un jeu. Nous y voilà. Et je vais juste le remplacer par des jeux. Et dans la section suivante, nous allons double-cliquer et coller du texte. Le prochain sera la musique. Et double-cliquez sur la musique. Il suffit donc de cliquer ici, d' appuyer sur Télécharger, de cliquer et de trouver de la musique. Nous y voilà. Ici. D'accord ? Et puis ce dernier sera du metal parce que c' est ce qui fait fureur en ce moment. Comme je le vois en ligne. Nous y voilà, Mehta, et remplaçons enfin cette icône par votre propre icône iconique. Nous y voilà. Frappe. OK, super. Maintenant que c'est fait, je peux sélectionner toute cette section et la déplacer juste ici, juste pour voir où elle s'intègre dans le reste de mon design. Et je peux continuer , sélectionner toutes ces autres sections et les déplacer complètement vers le bas jusqu'à ce que les déplacer complètement vers le bas jusqu' je sache quoi en faire un peu plus tard. C'est pourquoi c'est génial. Voyons donc les jeux ici. Et je peux télécharger ce bouton, cliquer sur Télécharger, revenir à mes images, jeux, qui est ce type. Nous y voilà. Vous pouvez voir quelque chose comme ça. Je pense que ça va très bien fonctionner. Sélectionnez donc les données pour vous assurer qu'elles se trouvent au centre. Et peut-être que je peux les déplacer d'un simple toucher. Ou peut-être que je peux simplement déplacer légèrement l'image de ce jeu vers ici, quelque chose comme ça. Peut-être que certaines manquent de formes en arrière-plan. Alors peut-être que je pourrais ajouter des formes d'arrière-plan un peu plus tard ou quelque chose comme ça. Mais je pense que ça va très bien fonctionner pour le moment. La prochaine chose que je vais faire est d'ajouter une nouvelle image ici et d'utiliser la même technique. Alors 200 sur 200, on y va. Et à l'intérieur de cette position, c'est peut-être à peu près ici. Je vais cliquer sur Télécharger et passer aux icônes de mes actifs. Et voyons l'icône des jeux. Non, pas celui-là. Voyons donc gagner, gagner en matière de jeu. C'est celui-ci et positionnez-le à peu près ici. Maintenant, quand je l'aurai, je vais inclure ma copie dans un jeu défini. Et je vais faire de même pour ce texte. Nous y voilà. Ce bouton est doté d'une fonction de synchronisation automatique. Mais si vous souhaitez simplement modifier ce bouton et que vous ne souhaitez pas que la modification soit synchronisée avec toutes les instances. Tout ce que vous avez à faire est de cliquer avec le bouton droit sur ce bouton et de cliquer sur Détaché des actifs. Ensuite, les modifications ne seront appliquées qu'à ce bouton. Et il va de soi que nous devrons modifier certains textes ici. Donc, au lieu de ça, je vais vous dire de prendre le vôtre. Nous y voilà. Cliquez sur Appliquer et voyez s'il est mis à jour en temps réel partout. Donc, ce que je dois faire, c'est en faire une copie et ensuite modifier mes dettes. Mais je ne vais pas le faire pour gagner du temps. Alors allons-y et passons à autre chose. Je vais donc sélectionner ces deux et m'assurer qu' ils sont au centre. Ils sont géniaux. Je vais donc simplement le sélectionner et m'assurer qu'il se trouve à la même distance que celui-ci haut pour lui donner un peu plus de marge de manœuvre. Nous y voilà. Maintenant, pour la prochaine, je vais l'aligner pour qu'elle soit la même et ce sera assez simple. Donc, vidéo promotionnelle, cliquez simplement sur Télécharger, cliquez ici, accédez à mes actifs et Ikhwan, désolé, vidéo promotionnelle des images est celle-ci ici. OK, on y va. Il est placé directement à l'intérieur. Ensuite, dans cette section, montez. Et tout ce que j'ai à faire ici, c'est remplacer ces images au fur et à mesure qu'elles se déplacent vers le haut. Ici, téléchargez certaines images. Ce sera celui-ci ici, d'accord ? Comme vous pouvez le voir, nous allons maintenant utiliser le contrôleur, cliquez sur Télécharger pour cliquer pour télécharger le contrôleur. Nous y voilà. Appuyez sur OK. Enfin, pour celui-ci, ça va être un peu délicat. Sélectionnez donc l'image ici, téléchargez-la, cliquez sur Télécharger. Et je vais utiliser cette image parce que c'est une image PNG de cette fille. Comme vous pouvez le constater, cela se traduira bien dans ce contexte. Mais pour cela, nous devons en remplacer une partie. Donc, cette idée devrait être complètement sombre. Donc, l'obscurité principale de cette source d' inspiration devrait être le blanc. Dans ce cas. Nous y voilà. Vous pouvez donc voir à quoi cela ressemble. Mais enfin, je dois me débarrasser de certaines de ces frontières. Si je l'ai sélectionné, voyons voir, il n'y a pas de bordure de ce rectangle, mais une bordure. Comme ce rectangle. Comme ce rectangle. Nous y voilà. Et maintenant, nous pouvons passer à cette section , que nous pouvons ajouter. Donc, tout d' abord, pour celle-ci, je vais remplacer la taille de l' image à 792 par 500. Nous y voilà. Assurez-vous que c'est à peu près par ici. Allons-y, et veillons à ce que je les mette en place. Nous allons donc modifier le titre de cette section et le changer de 60 à quelque chose d'un peu plus petit, comme 32. Double-cliquez sur certains d'entre eux, cela change la vie. Et incluons un paragraphe de texte ici. Assurez-vous donc de l'étendre juste pour qu'il puisse couvrir le texte. Et voyons la distance, peut-être que nous pouvons en utiliser 48. Voyons donc ce que nous avons ici. avons donc 35. Nous en sommes donc à 48 en ce moment. Au lieu de cela, je vais inclure une certaine pagination. Je peux donc simplement appuyer sur 0 pour créer un joli cercle, quelque chose comme ça. Et voyons Fourier à 48 ans, peut-être un peu grand. Alors 40 sur 40, on y va. Je vais inclure une bordure. Et cette bordure sera la suivante, disons, de couleur bleue. Appliquez donc à la bordure. Et je vais me débarrasser de la largeur de la bordure qui sera de deux pixels, quelque chose comme ça. Nous y voilà. À partir de là, nous sommes 54. Et je vais avoir 48 ans, comme je l'ai fait pour le précédent. Contrôlez un D. Et voilà. Contrôle D, où nous en sommes en ce moment, nous avons 29 ans. Donc 20, voyons 20 et Control D sur celui-ci, nous sommes 20. Allons-y et sélectionnons-les rapidement. Donc, ces autres, en fait, non, sélectionnons-les tous et appliquons la couleur du paragraphe comme bordure. Et je vais juste sélectionner la seconde et appuyer sur le bleu principal comme couleur de remplissage sans bordure pour indiquer que celle-ci est sélectionnée. Mais je pense toujours qu' ils sont vraiment trop grands. Je vais donc les sélectionner toutes comme ça et les réduire à 20 par 20. Voyons à quoi cela ressemble. Oui, je pense que c'est bien mieux. Répartissez-les uniformément au cas où ils ne seraient pas touchés par Control G, nous appellerons cela pagination. Et vous avez déjà le composant pour la pagination, mais j'aime créer mes trucs à partir de zéro. Donc, j'aime juste en avoir, disons, le contrôle total. Je vais donc sélectionner ce texte, assurant qu'il se trouve au centre de cette image. Je peux donc sélectionner mon contenu, sélectionner mon image. Sectionnez donc le contenu et l'image et assurez-vous qu' ils sont alignés au centre. Nous y voilà. Et je vais juste sélectionner cette image ici. Téléchargez, cliquez sur Télécharger et ajoutez-y l' image du témoignage. Frappez, d'accord, on y va. Et je veux juste ajouter quelques détails supplémentaires. Appuyez donc sur R et créez peut-être une sorte de rectangle en arrière-plan. Peut-être arrondissez un peu les coins. Voyons voir. Peut-être 20. Nous y voilà. Et je vais me débarrasser du fond et pour la bordure, je vais appliquer cette couleur principale et la créer, par exemple, en deux pixels. Cliquez avec le bouton droit sur Commander, puis sur Envoyer vers Retour. C'est donc juste derrière cette image. Nous y voilà. Je pense que ça marche très bien. Donc, un seul téléphone. Ça va être super simple à faire. Tout ce que nous avons à faire est simplement de télécharger cet appareil VR. On y va. OK, et je pense que ça marche très bien. Nous sommes donc à 1 h 20. Voyons voir, cinq de chaque côté, 24. 24. Oui, 123 de chaque côté. Je pense que ça va très bien fonctionner. Enfin, pour ceux-ci, nous aurons besoin d' une carte produit. Cette première carte servira d'étui de transport, comme il est écrit sur la boîte. Appuyez sur OK, on y va. Le second, ce seront ces câbles. Cliquez donc sur Télécharger, puis sur Télécharger des câbles. Vous y voilà. Et peut-être parce qu' elle est coupée, vous pouvez peut-être la placer sur le bord inférieur de votre image l'agrandir légèrement, puis simplement l'aligner au centre comme ceci. Je pense que ça va beaucoup mieux fonctionner. Maintenant, enfin, ce dont nous aurons besoin, c'est de voir. Nous aurons besoin du titre. C'est ainsi que s'est ouvert le monde de la technologie VR. Nous y voilà. Assurez-vous que c'est 48, comme ça. Ensuite, je vais ajouter des textes ici. Nous y voilà. Et je vais le garder tel quel. Et enfin, remplacez simplement cette image. Cliquez sur Charger. Choisissez cette femme VR. Nous y voilà. Et je vais la rendre beaucoup plus grande pour en faire quelque chose comme ça, belle et grande. Sélectionnez-les tous les deux, appuyez sur centre, puis déplacez cette photo vers le bas en dessous. Pour l'image de contenu elle-même, je vais utiliser des composants pour faire glisser un autre composant, en utilisant 200 x 200. Nous allons le placer quelque part, à peu près par ici. Télécharger, cliquez ici. Ensuite, j'aurai besoin des icônes des actifs. Et je pense que je vais utiliser l'icône de la technologie. Oui. suffit donc de le positionner à peu près par là. Vous pouvez également utiliser des formes d'arrière-plan pour remplir ces images. Si vous le souhaitez, cela les fera ressortir un peu plus. Et je devrais peut-être les exporter et les importer. Alors laisse-moi vraiment voir ce que je peux faire. Alors peut-être que je peux faire quelque chose comme ça. Donc, ce que nous pouvons faire avec cela, c'est apporter une nouvelle image. Assurez-vous qu'il est évolutif. Positionné à peu près par ici. Commandez Send to Back, cliquez, téléchargez. Cliquez pour télécharger et là où il se trouve, forme d'une goutte apparaît, d'accord ? Et vous pouvez voir à quoi cela ressemble tout de suite à partir d'ici . Il ne vous reste plus qu'à insérer cette image dans la forme de la goutte elle-même. Nous y voilà. Et déplacez-les tous les deux en même temps à peu près par ici et tout ira bien. Je vais y aller un peu plus tard et les ajuster tous. Mais je vois maintenant qu'il me faudrait quelque chose comme 20 ici pour le rectangle. Alors allons-y avec 20. voilà, juste pour avoir une mise en page un peu plus intéressante à l'intérieur de cette image. C'est la dernière chose que je voulais faire pour cela, mais avant de passer à autre chose, permettez-moi de m' assurer rapidement que tout est bien centré. Nous y voilà. Je vais sélectionner l'image de bas de page, filtrer l'image. Nous y voilà. Télécharger et cliquez juste là, sélectionnez les images numéro deux de l'appareil VR. Nous sommes un appareil pour. Nous y voilà. Appuyez sur OK. Et peut-être que je vais juste l'agrandir un peu pour y faire quelque chose comme ça. Et assurez-vous simplement que l'arrière-plan du pied de page est en haut, peut-être à 80 %, quelque chose comme ça. Le truc, c'est que vous pouvez simplement couper votre tableau d'art à peu près ici et il ne défilera plus loin. Mais si vous le souhaitez, vous pouvez évidemment simplement étendre votre pied. Je pense que ce sera une bonne astuce et une bonne façon de terminer cette session de design. Mais comme ces formes d' arrière-plan m' ennuient vraiment , je vais simplement les exporter à partir de mon design original. Ajoutez-les ici. Je vais donc ajouter une nouvelle image, la placer dans quelque chose ici, cliquer avec le bouton droit de la souris et commander, renvoyer vers la page précédente. Appuyez sur, Téléchargez. Cliquez sur Télécharger, allez dans Ressources, forme de blob numéro deux, appuyez sur. OK, on y va. Et peut-être que je pourrais l'augmenter un peu , à peu près ici, peut-être. Oui. Ensuite, je peux les ajuster et les déplacer. Voyons juste où il se trouve. Oui, alors voilà. Ceci, ceci et cela. Je peux peut-être déménager ici . Nous y voilà. Et il ne nous reste qu'un seul blob. Laissez-moi l'exporter , le préparer et simplement l'apporter ici. Et pendant que je le fais, allons-y rapidement et ajoutons une nouvelle image. Redimensionnez-le, cliquez avec le bouton droit sur Commander, Envoyer vers Back, cliquez sur Télécharger. Et ce sera la forme numéro trois de la goutte, mais pour une raison ou une autre, elle n'existe pas là-dedans. Alors laisse-moi essayer encore une fois. Cliquez pour télécharger la forme de blob numéro trois. On y va, d'accord, et c'est juste ici. Évidemment, vous pouvez jouer un peu plus avec les paramètres et les ajuster un peu plus. Mais ces blobs ne sont là que pour vous donner un peu d'intérêt à votre design. Passons rapidement à l'aperçu pour voir ce que nous avons fait jusqu'à présent et ce que nous avons créé jusqu'à présent. Nous avons donc ici notre section héros, nous avons nos boutons, tout fonctionne comme il se doit. Je commence à faire défiler la page vers le bas. Vous pouvez voir explorer de nouveaux mondes. Et nous avons cette fille, encore une fois, le bouton fonctionne très bien. Des possibilités illimitées. Nous avons donc ces options ici, mais je pense que j'ai oublié de les ajouter pour l'aéroport principal, je veux changer cette couleur. Donc des actifs. Cliquez avec le bouton droit Voyons ce que nous pouvons faire. C'était donc celui-ci. Nous y voilà. Donc, quand je passe ici, cela devrait le faire basculer et ressortir un peu plus s'il est enregistré. Allons y jeter un œil. Oui, car nous pouvons maintenant voir la couleur blanche de ces cartes. Tout fonctionne donc comme il se doit. Ça a l'air sympa. Vous pouvez voir comment ces taches font ressortir votre image. Je devrais peut-être le déplacer un peu plus. Mais je pense que ça se passe plutôt bien. Et pour cette vidéo, je vais simplement arrondir les coins de cette vidéo. Localisez la superposition de couleurs et assurez-vous que nous sommes 20 ici. Nous y voilà. Et maintenant, lorsque vous l' enregistrez et que vous l'ouvrez ici, cela fonctionnera très bien. Vous pouvez simplement imaginer que cette vidéo est diffusée en continu sur du bloop, peut-être sur du nucléique. Il sera diffusé sur Vimeo ou YouTube ou quelque chose du genre. Ces cartes doivent également être arrondies. Alors allons-y. Alors allons-y avec 20. Allons-y avec 20 ici également. Nous y voilà. Et jetons un coup d'œil à cette section pour les témoignages. Donc celui-ci est sélectionné, fonctionne bien. Casque tout-en-un, personnalisez le vôtre. Nous y voilà. Nous avons donc ces trois. Explorez tout, peut-être pouvons-nous ajouter des effets de survol. Nous y voilà. Tout fonctionne donc comme il se doit pour cette section. Je devrais peut-être même le couper et l'inclure à l'intérieur. Donc, ce que nous pouvons voir, voyons voir. Nous avons donc le pied de page, BG est 740. Alors allons-y avec 740. Et je peux y aller avec Phil. Nous y voilà. Et je pense que c'est à peu près du sel dans ce cas, comme ça. On y va. C'est donc tout pour notre design. J'espère vraiment que vous l'avez apprécié. Dans la vidéo suivante, nous allons juste aborder un peu d'animation. Et je vais vous montrer, par exemple comment animer l'une de ces deux sections juste pour voir comment tout fonctionne. Alors je te verrai là-bas. 28. Ajouter des interactions: Allons-y et ajoutons rapidement jolies petites interactions pour rendre notre page un peu plus intéressante qu'elle ne est actuellement, alors qu'elle est presque complètement statique. Très bien, alors voici où nous nous sommes arrêtés la fois précédente. Allons-y et ajoutons quelques interactions. Donc, la première interaction que je vais ajouter est en fait que lorsque cette page se charge, je veux que ces éléments bougent un peu. Alors, comment s'y prendre ? Eh bien, passons rapidement à l'interaction. Nous allons sélectionner la cible, et je vais sélectionner cette section de héros. Alors faites défiler jusqu' en bas, une section. Et vous avez l'image de votre héros, par exemple, et vous avez tous ces autres éléments dans la section des héros. Alors, tout d'abord, sélectionnons simplement ce texte comme suit. Il cible donc le texte au chargement. Comme ça. Et nous voulons commencer à bouger. Et faisons quelque chose comme sur l'axe Y, allons-y, je ne sais pas, peut-être dix pixels. Donc, pour trois à cinq, pour en éliminer 200, peut-être 300, quelque chose comme ça. OK, alors fais-en un autre. Ajoutez donc de l'interaction, sélectionnez la cible dans la section des héros. Ce que nous pouvons faire ensuite, c'est peut-être utiliser le bouton principal. Nous pouvons également utiliser le mouvement. Et allons-y, je ne sais pas, peut-être dix pixels ici. Alors allons-y avec quelque chose comme 604300 millisecondes. C'est très bien. Ajoutons-en un autre pour le menu, par exemple pour l'interaction AD. Allons au sommet. Nous avons donc le plus de culot, nous avons le pouvoir de bouger. Et sur l'axe Y, qui est en haut et en bas, je vais le déplacer, par exemple 40 pixels. Quelque chose comme une dette. Peut-être que je peux, je ne sais pas, peut-être que je peux agrandir l'image de fond. Alors allons-y. Donc, encore une fois, section héros. Allons-y avec l'image du héros en cours de chargement, et allons-y avec Zoom. Alors allons-y avec la largeur, peut-être 105, quelque chose comme ça. Allons-y vite. Nous y voilà. Vous pouvez voir à quelle vitesse cela s'est produit, car nous l'avons configuré à 300 millisecondes. Si vous souhaitez que ces modifications se produisent un peu plus lentement que cela, vous pouvez jouer avec cela. Passons maintenant à l'étape suivante et ajustons la section suivante. Et je vais aborder rapidement cette icône. Et peut-être que lorsque vous le survolez, il peut pivoter. Lorsque vous déplacez votre souris, elle peut simplement revenir en arrière. Donc, pour ce faire, au lieu de ces déclencheurs, laissez-moi d'abord expliquer ce que je viens de faire. Ainsi, lorsque je clique dessus et que je le fais glisser sur lui-même, il s' applique à lui-même. Je vais donc utiliser la souris Enter. Donc, lorsque la souris entre, et au lieu de Zoom, utilisons une rotation et passons à 180. Passons à une durée linéaire de 400, je pense que cela peut être très bien. Vous pouvez entrer et sortir facilement. Je pense que ça va juste être un peu plus beau. Cliquez sur OK, puis effectuez une autre opération. Donc, la souris part, et je vais utiliser l'angle zéro. allons donc rapidement prévisualiser ce que nous avons fait sur place. Ainsi, lorsque je descends, vous pouvez voir que c'est surligné en rouge, ce qui signifie que cela a un effet dessus. Donc, quand je survole, vous pouvez voir ce que ça fait. Et quand il se déplace à l'intérieur, vous devriez peut-être le régler à moins 180. Alors testons-le sur Moussa Leave. Appuyons sur Modifier ici, et allons-y avec moins 180 pour qu' il revienne à sa position initiale. Voyons donc si cela a fait l'affaire. Nous y voilà. Ainsi, lorsque votre souris la quitte, elle revient à sa position initiale. Vous pouvez opter pour 360 si vous le souhaitez. Mais je pense que 180 c'est bien. Je ne vais pas aborder ces boutons car ils ont déjà un effet de survol. Vous pouvez faire toutes sortes de choses différentes avec cette image, par exemple vous pouvez l'agrandir lorsque vous passez la souris dessus. Par exemple, lorsque vous glissez au-dessus de l' intersection de la lumière du soleil, je veux jouer avec la position de ces cartes. Nous avons déjà sur eux l'effet de survol que nous avons défini précédemment. Mais ce que je vais faire, c'est sélectionner la carte entière et la faire glisser. Utilisez la souris pour entrer. Au lieu de faire pivoter, je vais utiliser l'axe Move y. Je vais opter pour dix pixels, 300 millisecondes, ce qui est bien. Ensuite, utilisez-le et partez. Voyons voir. Allons-y avec zéro et voyons ce que cela nous apporte. Allons-y au lieu de saisir la souris. Oui, allons-y encore une fois. Donc, quand je clique ici, déplace l'axe Y centré sur le mâle. Allons-y avec dix pixels. Cliquez sur OK. Quand je clique ici. Au lieu du centre de la souris, je vais utiliser la gauche de la souris. Je vais le garder à zéro. Frappe. D'accord ? Maintenant, nous avons la souris Entrée avec dix, la souris quitte avec zéro et appuyons sur Aperçu. Ainsi, lorsque je passe la souris ici, vous pouvez voir quand elle part, vous pouvez voir quand elle part, elle repart et cela produit un effet élastique, qui va parfaitement avec ce que nous essayons de réaliser ici. Donc je vais entrer la souris, en déplacer dix ici, d'accord ? Faites de même pour le centre de la souris, déplacez-vous de 10, et le centre de la souris, déplacez-vous de dix. Nous y voilà. Et puis je vais opter pour celui-ci. Pars la souris, ça va être zéro. souris laisse zéro et la souris laisse zéro. Vous pouvez bien sûr copier et coller ces effets, mais j'ai trouvé que c'est tout aussi rapide lorsque vous le faites. Lorsque vous n'êtes que Blair, planifiez votre État à l' avance et lorsque vous planifiez votre animation à l'avance. Maintenant que nous avons cet effet, une sorte d'effet élastique, lorsque vous déplacez votre souris sur ces cartes. Ils jouent et vous montrent ces différentes positions. Donc, lorsque vous faites défiler , nous pouvons peut-être faire pivoter celle-ci, mais je vais simplement l'ignorer pour le moment et passer directement à cette section. Et ce que je vais faire dans cette section, c'est que je vais simplement sélectionner cette couleur dans l' ordre à partir d'ici. Accédez à Mes états, accédez au pointeur de la souris sélectionné, accédez à Propriétés. À l'intérieur des propriétés. Je vais peut-être réduire ce chiffre à quelque chose comme, allons-y avec 40 %. Quelque chose comme ça. Revenez à la normale. une fois de plus sur l'aperçu, car lorsque vous passez la souris dessus, comme lorsque vous faites défiler la page vers le bas, je veux que vous puissiez vers le bas, je veux que vous cliquer rapidement dessus ou que vous pouvez réellement en faire quelque chose. Et dans ce cas, il s'agirait d'une vidéo diffusée en arrière-plan. Alors peut-être que lorsque vous cliquez dessus, il peut s'agrandir, s'agrandir pour passer en plein écran ou quelque chose comme ça. C'est donc tout le problème. Lorsque vous cliquez à l'extérieur, lorsque vous passez la souris à l'extérieur, cela ne fait que s'aggraver en cas d'obésité. Alors maintenant, jouons un peu avec ces sections. Donc, ce que nous pouvons faire ici c'est peut-être élargir un peu cela. Ainsi, lorsque vous cliquez et faites glisser la souris pour entrer, nous pouvons redimensionner. Vous pouvez donc le faire par valeur relative, ou vous pouvez, si vous en avez un ici, vous pouvez voir si vous décochez la case Redimensionner à une taille spécifique, qui est en fait ce que je veux. Parce que je voulais sur Enter pour agrandir de dix pixels. Donc 710. Et allons-y, allons-y avec le chiffre rond. Alors peut-être 407, en fait 200 millisecondes. Je pense que c'est bien. est facile maintenant, c'est génial. C'était donc la souris, entrez, faites-la glisser à nouveau, la souris sort. Et nous allons le maintenir à ces tailles. Nous y voilà. Passons à l' aperçu une fois de plus parce que je veux savoir si cela fonctionne ou non. Je peux donc savoir si je dois apporter des modifications. Nous y voilà. Vous pouvez donc voir à quoi cela ressemble lorsque vous passez votre souris dessus. Il va simplement vous montrer cette image et vous montrer à quoi elle ressemble. C'est super. Donc, la prochaine chose que je voudrais faire est peut-être faire la même chose avec ça. Donc, ce que je peux faire, c'est faire la même chose. Entrez donc la souris, juste pour que nous puissions comprendre qu'ils font tous partie de la même section. Voyons voir. Donc 156.233. Nous y voilà. Et puis la souris s'en va. Cela va nous ramener aux paramètres par défaut. J'espère. Voyons donc 156146. Nous y voilà. Alors jouons également avec celui-ci. Je vais donc sélectionner l'image comme suit. Et dans ce cas, je veux pouvoir l'adapter à quelque chose comme ça. Donc 9 443-594-4350. Alors, encore une fois, sélectionnez votre image. Donc 944 avec 350, c'est sur la souris. Entrez, appuyez sur OK. Et maintenant, ajoutez-en un autre. Au lieu du centre de la souris. Allons-y avec les feuilles de souris. Vous pouvez voir 880319. Nous y voilà. Nous allons donc les prévisualiser rapidement. Et si ces animations fonctionnent comme prévu sur ces sections, celle-ci fonctionne très bien. Celui-ci fonctionne très bien, et celui-ci fonctionne aussi bien. C'est juste dépasser cette somme. Si vous le souhaitez, vous pouvez jouer avec son positionnement. Pour qu'il remonte un peu au sommet. Alors peut-être qu'au lieu de l' agrandir vous pourriez peut-être la faire bouger simplement par l'axe Y, mais gardez à l'esprit que ses jambes ressembleront toujours à ceci. Mais pour l'instant, je vais sauter cette section parce que d'habitude ces sections sont assez statiques parce que les gens passent entre elles et changent. Alors peut-être que nous pouvons agrandir celui-ci. Essayons donc avec les dettes. Alors, que pouvons-nous faire ici ? Faisons la même chose. Passons donc à la souris, saisissons, redimensionnons. Allons-y avec 1206, 60 peut-être. Allons-y avec quelque chose d'un peu plus lent, comme 400 millisecondes. Nous y voilà. Et puis la souris s'en va. Nous allons conserver les mêmes paramètres. Quelque chose comme ça. Nous y voilà. Enfin, pour D, c'est ce que je veux, c'est que je veux sélectionner cette image et que je veux passer en mode survol, survol de la souris ici. Je veux réduire l'opacité à peut-être 70 % ou quelque chose comme ça. Revenez à la normale, puis sélectionnez également cette image. Donc, passez du curseur de la souris à 70 %. Nous y voilà. Revenez à la normale. Et puis revenez enfin à ce produit PG, passez la souris. Mais ici, nous allons en fait changer la couleur. Donc, à l'intérieur de la souris, notre passage au bleu foncé, revenons à la valeur par défaut. Nous y voilà. Et voici ce que nous pouvons faire peut-être parce que c'est la dernière section, peut-être que vous pouvez faire la même astuce pour la faire pivoter en survolant. Donc, entrez la souris, au lieu de redimensionner, peut-être que je peux. Voyons voir, si je fais une rotation de 100 degrés. Nous y voilà. Et la souris part de -100 degrés, 100 degrés, et c'est parti. Maintenant que nous l'avons , vous pouvez bien sûr ajouter toutes sortes d'animations différentes. Allons-y, testons rapidement l'ensemble du design et voyons ce que nous avons jusqu'à présent. Donc, lorsque je cliquerai une fois de plus sur l'aperçu, nous aurons ce joli petit effet de chargement de tous ces éléments en arrière-plan. Comme je l'ai mentionné, vous pouvez ajouter des animations supplémentaires à l'arrière-plan si vous le souhaitez. Mais pour l'instant, je pense que c'est bien. Cela fonctionne comme prévu. Nous les avons qui agissent en quelque sorte comme un effet de tremplin en arrière-plan. Alors peut-être que vous pouvez cliquer ici et cela vous amènera soit à une section de page dédiée aux jeux , soit à section de page dédiée aux jeux , soit page de jeux séparée. Dans ce cas. Nous pouvons effectuer cette rotation si nous le voulons, puis nous aurons cet effet de survol réducteur sur cette carte. Nous avons mis à l'échelle ces éléments, y compris celui-ci. Ensuite, nous agrandissons lentement cette interview. Nous avons ce joli petit effet de survol sur toutes nos cartes. Enfin, nous avons celui-ci pour la rotation. Nous y voilà. C'est ainsi qu'il est facile d'ajouter différentes interactions à l'intérieur de mock plus rP. Et vous pouvez voir à quel point ils sont simples lorsque vous sélectionnez votre tableau d'art Vous pouvez voir au chargement ce qui se passe ensuite lorsque vous sélectionnez des éléments spécifiques, comme celui-ci, par exemple, vous pouvez voir les déclencheurs qu'il possède et le début qu'il possède. Dans la vidéo suivante, je vais vous montrer comment prévisualiser et publier sur Mock Plus Cloud, pourquoi c'est important et ce que vous pouvez faire une fois place. Alors je te verrai là-bas. 29. Cloud Preivew, partager et Mockplus: Obtenir les commentaires de vos clients est la chose la plus importante que vous puissiez faire sur le projet. Parce qu'un mauvais feedback peut mener le projet à une mauvaise étape et vous empêcher d' obtenir les commentaires de vos clients. Et c'est ce dont nous allons parler dans cette leçon. OK, c'est donc là que nous nous sommes arrêtés dans la vidéo précédente. Maintenant, allons-y et prévisualisons ceci une fois de plus. Nous avons donc ici ce panneau en bas. Nous avons donc ici ajusté à la largeur. Vous pouvez l'adapter à l'écran si vous souhaitez voir l'intégralité de votre design. Et encore une fois, tous ces éléments qui sont décrits comportent des interactions. Vous pouvez revenir en arrière pour ajuster la largeur ou vous pouvez opter pour 50 % en fonction de la taille de votre écran. Ensuite, ce que nous avons à côté , c'est le plein écran. Et vous pouvez appuyer sur Escape pour sortir du mode plein écran. Et vous pouvez afficher ou masquer ces panneaux sur le côté. Bien entendu, ici, sur la gauche, vous pouvez passer d'une page à l'autre. Et ici, vos nœuds vont être localisés. Si vous avez vos notes, vous pouvez à nouveau rapidement afficher ou masquer ces panneaux. Si tu n'en as pas besoin. Ensuite, nous avons l'option de lien de prévisualisation. Et ce que nous avons ici est ce qui est écrit ici. Ce privilège sera donc différent lorsque vous modifiez les paramètres ci-dessous. Veuillez donc copier le nouveau lien pour le partager ensuite. Cela signifie donc que lorsque vous cochez et décochez certaines de ces options, assurez-vous de toujours cliquer sur le nouveau lien que vous avez obtenu en cochant et en décochant certaines de ces options. Donc, ce que nous avons ici, c'est de montrer le panneau de configuration. Tu peux le montrer si tu veux. Vous pouvez afficher cette barre d'outils si vous le souhaitez ou non. Vous pouvez afficher la zone de liens lorsque vous passez la souris. Cela va montrer à vos spectateurs qu' ils peuvent réellement cliquer sur cette zone spécifique. C'est très bien, en particulier pour les tests utilisateur, car vous voulez toujours que vos utilisateurs comprennent eux-mêmes s'ils peuvent cliquer quelque part ou non. Parce que cela améliorera la vitesse de votre conception et la convivialité de votre InDesign. Vous pouvez toujours montrer le méthanier. Vous pouvez diffuser du contenu en dehors de notre entreprise. Il peut s'agir de sous-tableaux ou d' éléments que vous avez créés en dehors de votre plan de travail. Vous pouvez afficher les marqueurs de nœuds et définir le mot de passe afin que tous ceux qui possèdent un mot de passe puissent accéder à cet aperçu. personne sans mot de passe ne peut y accéder du tout. Ce ne sont donc là que quelques-uns de vos paramètres lorsque vous partagez le lien d'aperçu. Enfin, nous avons ici, qui ne sont que quelques réglages rapides je vous ai déjà montrés ici, juste encombrés et condensés ici. Donc, encore une fois, affichez toujours le transporteur, le lien court, maintenez le pointeur de la souris. Donc, une fois, cela se produit ici, et cette zone de liens s' affichera. Il s'agit de votre zone de liens. Afficher le contenu en dehors du tableau artistique. Comme je l'ai mentionné, Afficher les marqueurs de notes et masquer automatiquement la barre d'outils. Ce ne sont donc là que quelques-unes des options qui s'offrent à vous lorsque vous souhaitez partager votre prototype très rapidement. Mais que se passe-t-il si vous souhaitez réellement le publier ? Donc, publier quelque chose sur Mock Plus Cloud, mais qui est réellement sélectionné et laissez-moi vous le montrer, c'est juste ici. Vous pouvez ainsi synchroniser votre projet avec Mock Plus Cloud, par exemple pour la collaboration en ligne, transfert et la mise en couches de données. Vérifiez ce que cela signifie, c'est que lorsque vous partagez notre pour un aperçu, les gens peuvent réellement le prévisualiser. Ensuite, ils pourront peut-être vous donner quelques conseils sur ce qu'il faut changer. Peut-être qu'ils peuvent vous indiquer la bonne direction en ce qui concerne le design. Mais lorsque vous partagez sur Mock Plus Cloud, vous pouvez collaborer avec d'autres designers et d'autres membres de votre équipe, tels que des parties prenantes telles que des rédacteurs et des développeurs. Pour que tous les membres de cette équipe puissent façonner design pour qu'il soit ce que vous voulez réellement qu'il soit à la fin. Alors allons-y et ciblons le projet Cloud. Et bien sûr, les développeurs peuvent voir les spécifications des données. Ils peuvent voir les couleurs. Ils peuvent voir du CSS, des extraits et toutes sortes de choses différentes qui leur seront utiles pour développer ce design plus rapidement à la fin de la journée. Nous pouvons donc cibler le projet Cloud. Nous avons notre site Web, c'est bien. Cliquez sur OK, et vous pouvez le modifier. Vous pouvez utiliser ce que vous voulez d'ici. Et je vais utiliser notre site Web, dans ce cas, cliquez, OK ? Et selon la taille de votre projet, sa publication prendra plus ou moins de temps. Il a été publié avec succès. Vous pouvez donc cliquer sur Afficher le projet en tant qu' environnement distinct et voir à quoi il ressemble. Vous avez donc toutes sortes de ces différentes options ici. Sur le point de documenter la conception du prototype, la ressource de tâches, le guide de style et l'activité. Tu peux tout vérifier. Vous avez l'équipe, donc l'autorisation du projet. Qui est autorisé à accéder à ce projet ? Vous pouvez à nouveau le prévisualiser. Ici, vous pouvez commencer depuis la page d'accueil ou partir de la page actuelle. Vous pouvez télécharger ce que nous avons déjà mentionné précédemment, et vous pouvez le partager davantage en dehors d'ici. Et vous pouvez définir certains paramètres ici. Voyons donc les détails très rapidement. Passons à la conception ici car elle partait de l'organigramme, car c'était la première page par défaut saisie. Nous avons donc ici quelques options en haut. Tout d'abord, nous avons la critique. Ainsi, à l'intérieur de cet onglet, les utilisateurs peuvent réviser. Toutes les modifications que vous avez créées peuvent essentiellement avoir leur mot à dire sur votre conception. Alors voici quelques options. En bas, ils peuvent sélectionner certaines options à l'intérieur de votre design. Ils peuvent ajouter les textes, ils peuvent coordonner le travail. Ils peuvent ajouter le balisage d'espacement et le balisage de région s'ils souhaitent ajouter des commentaires dans une zone spécifique de votre conception. Ils ont également un style d'épingle, ce qui vous permet d'afficher des marqueurs d' annotation ou commentaires non résolus pour disposer de nombreuses options lorsque vous travaillez avec des personnes telles que des clients ou des parties prenantes. Ainsi, ils peuvent réellement exprimer leur opinion sur votre conception et sur les modifications à apporter à votre conception. Vous pouvez rapidement ajouter ces références. Vous pouvez ajouter différentes couleurs et des trucs comme ça. Vous avez donc vraiment beaucoup d'options. Vous avez des annotations ici et vous avez l'historique de vos révisions, ce qui est toujours intéressant car vous pouvez voir combien de révisions votre design a réellement eu lieu. Alors ce que nous avons ici, c'est le mode commentaire. Ainsi, lorsque vous entrez dans votre mode commentaire, vous pouvez rapidement laisser des commentaires. Donc, par exemple, changez cette image de fond. Vous pouvez voir qu'il est écrit Control, Enter pour publier ceci. Il est donc envoyé lorsque je clique à l'extérieur, quelqu'un peut le voir et cliquer et dire : « OK, changez cette image d'arrière-plan et quelqu'un d'autre pourra voir, je l'ai déjà fait. Consultez l'historique des révisions. Ils pourront donc voir dans l'historique des révisions qui ont déjà changé cette image de fond. C'est donc essentiellement ainsi que cela fonctionne et à quoi cela ressemble. Vous pouvez choisir n'importe quel type de partie de votre design que vous souhaitez annoter. Vous pouvez peut-être dire quelque chose comme ajouter des graphismes et un arrière-plan ici ou quelque chose comme ça. Vous comprenez donc tout le problème et vous comprenez comment cela fonctionne. Ensuite, il y a le développement. Et cela est particulièrement utile, bien sûr, pour les développeurs. C'est là qu'ils pourront voir toutes sortes d'extraits de code. Nous pourrons y voir toutes les couleurs que vous utilisez, typographie que vous utilisez. Et ils seront en mesure d' inspecter plus en détail votre conception avant de commencer le développement et accélérer considérablement leur flux de travail. Nous avons donc ici les actifs. Voici donc les ressources que vous avez préparées et que vous avez téléchargées, nous avons des annotations. Ainsi, si des annotations ont été ajoutées, si vous êtes lié au système de conception, vous pouvez changer de plateforme pour sourds, définir des couleurs et obtenir que les valeurs figurent sur la page en cours. Donc, quand je clique juste là, vous pouvez voir que nous avons toutes ces couleurs. Et vous pouvez trouver une copie de ces couleurs. Et vous pouvez basculer entre le mode hexadécimal, le mode RGB et toutes sortes de modes de couleur différents. Parce que, selon le mode de couleur vos développeurs vont utiliser, il leur sera facile de le faire. Vous pouvez donc voir que les acides ne sont actuellement pas pris en charge dans les pages de prototypes. Vous pouvez utiliser d'autres plug-ins pour importer des designs à partir de ces outils. Vous pouvez également regarder les didacticiels si vous souhaitez importer des actifs et consulter les annotations. Nous n'en avons pas encore. Et vous pouvez créer un lien vers le système de conception, comme je l'ai dit, si vous le souhaitez. Et vous pouvez changer de plateforme de développement. Donc, en ce moment, nous avons le Web. Voici donc vos unités. Nous avons iOS, Android et Custom. Et vous pouvez saisir les valeurs ici. Donc, si je choisis le Web, ce sera notre principal type de plate-forme que nous allons développer pour lui en tant que développeurs. Ainsi, lorsque vous passez la souris sur votre dessin, vous verrez que la taille du plan de travail est de 1920. Et vous pouvez voir qu'il fait 1 000 pixels de haut, ce qui correspond à la section de cette page. Et vous pouvez voir, lorsque je souris sur différentes sections, les distances entre chacun de ces éléments. Vous vous demandez peut-être comment les développeurs vont réellement l'utiliser. Eh bien, c'est assez simple quand ils voient que ce bouton, par exemple, mesure 366 x 60. Ils peuvent le sélectionner. Et ils ne se contenteront pas d' obtenir les valeurs ici. Ils vont également obtenir les extraits de code. Ils verront facilement la largeur et la hauteur, pourront copier le code et le coller dans leur éditeur de code afin de travailler beaucoup plus rapidement. Nous avons ceci, par exemple , qui est le logo. Vous pouvez voir à quoi ça ressemble. Et bien sûr, vous pouvez modifier les plateformes de développement ici si vous souhaitez obtenir des valeurs différentes, par exemple et des choses comme ça. Enfin, nous avons différentes options de partage. Vous pouvez donc partager un projet privé, public ou intégrer un projet. C'est très utile, en particulier lorsque vous travaillez avec collaborateurs extérieurs, tels que des membres du conseil d'administration ou des personnes d'une autre entreprise avec laquelle vous collaborez sur ce projet en particulier. Il peut donc être très utile de partager cela en dehors de votre organisation ou en dehors de votre cercle de personnes qui travaillent sur ce projet particulier avec vous. C'est pourquoi cette version est utile et c'est pourquoi cette option est utile pour parler de collaboration. Mock plus rP possède excellentes fonctionnalités de collaboration et nous en parlerons dans la prochaine vidéo. Alors je te verrai là-bas. 30. Collaboration: La collaboration est un élément très important du processus de refonte, car c'est là que vous allez recueillir les commentaires ou obtenir aide de designers externes, soit en tant que membres de votre équipe , soit en tant que designers extérieurs à l'équipe qui viennent vous aider. Mais comment pouvez-vous faire cela dans More Plus rP ? Permettez-moi de vous montrer rapidement comment procéder. Nous voici donc de retour dans more plus rP. Et si vous souhaitez inviter vos collaborateurs, vous suffit de cliquer ici, là où il est écrit « membres ». Vous pouvez désormais inviter ces membres et leur accorder toutes sortes d'autorisations différentes. Ils peuvent donc modifier, terminer la conception, commenter et consulter les spécifications, ou ils peuvent être devinés uniquement pour les prévisualiser. Donc, tout dépend vraiment de vous. Évidemment, si vous souhaitez inviter quelqu'un à vous aider dans la conception, vous devez lui donner le rôle de modifier et de concevoir. vous suffit de copier ce lien, partager avec eux, et ils seront d' abord invités à rejoindre votre équipe, puis à participer à ce projet pour pouvoir le modifier avec vous. Maintenant, les autorisations, le type de projet, vous pouvez le définir comme privé, afin qu'il soit accessible à tous les membres de ce projet ou de cette équipe. Accessible à tous les membres de l'équipe du Coran. Dans mon cas, je passerais à ceci et je cliquerais sur Soumettre, puis sur Fermer, membres blancs. Vous y voilà. Ensuite, ils pourront y accéder avec moi. Désormais, en temps réel, ce qui est vraiment important, c'est d'utiliser des nœuds. Passez maintenant aux nœuds ici. Ensuite, si vous devez dire quelque chose, ajoutez-le à vos notes. Ils pourront le voir, ils pourront y accéder. Et évidemment, il leur sera très facile de comprendre ce que vous voulez dire. Mais vous pouvez également communiquer en dehors de Mock plus rP, mais il est tout simplement plus facile de tout regrouper dans un seul outil, comme c'est le cas ici. Ainsi, chaque fois que vous souhaitez ajouter ou supprimer quelque chose, vous pouvez simplement ajouter la note et l'autre membre de l'équipe la verra. Voilà à quel point il est très simple de collaborer avec d'autres personnes sur votre projet. Et n'oubliez pas que vous pouvez également le faire en mode simulé et en massue. Un peu plus avancé en utilisant les outils destinés aux développeurs, par exemple, et vous pouvez faire travailler votre projet par plusieurs personnes. Ainsi, d'un côté, vous pouvez faire la présentation, les clients, par exemple, les parties prenantes ou les nouveaux coéquipiers de l'équipe. autre côté, les développeurs peuvent prendre ces spécifications, mesures et simplement les modifier et les découper en vue du développement. D'autre part, vous pouvez travailler en coulisse et créer et ajuster certaines de ces modifications en temps réel et simplement mettre à jour le prototype, mettre à jour le lien, mettre à jour le projet MOP plus Cloud, par exemple et tous les membres de l'équipe peuvent voir cette version et voir le versionnage de ce projet dans le cloud également. Si vous souhaitez partager rapidement la bibliothèque que vous avez déjà créée avec vos coéquipiers, vous suffit de cliquer ici sur ces trois points. Appuyez sur Partager. Et ce dialogue s' affichera si vous souhaitez le partager avec l'équipe actuelle, d'accord ? Vous pourrez ensuite partager cela avec l'équipe actuelle. Et tous les membres de votre équipe recevront une notification indiquant que cette bibliothèque a été partagée avec eux. Comme mentionné précédemment, vous pouvez venir ici pour télécharger le package de présentation hors ligne si vous devez l'emporter avec vous, par exemple sur votre ordinateur portable ou sur votre téléphone. Peut-être que vous voulez simplement l'emballer et emporter avec vous pour le montrer à quelqu'un en personne, alors vous pouvez simplement cliquer ici pour télécharger et l' emporter avec vous hors ligne. Si vous souhaitez exporter ce fichier RPI, vous pouvez vous rendre ici dans le menu et cliquer sur Exporter le fichier RPI. Et il va exporter ce fichier RPI sur votre machine, puis vous pourrez partager comme ça avec vos coéquipiers ou l'emporter avec vous où vous le souhaitez. C'est donc à quel point il est très simple de travailler dans Mock Plus rP. Et tu peux juste revenir ici. Et vous pouvez consulter l'historique des révisions. Vous pouvez cliquer ici. Et vous pouvez voir qui a créé quoi et quel jour. Ainsi, lorsque vous passez la souris, vous pouvez voir certaines modifications apportées. Si je clique juste là, si je clique juste là et que je dézoome un peu, alors je peux voir toutes sortes de changements, à quoi ils ressemblaient. Je peux donc cliquer ici. C'est donc ici que nous avons commencé. Enfin, c'est là que nous nous sommes arrêtés ou je peux cliquer sur la version actuelle et voir à quoi cela ressemble. Il est donc très facile de travailler en mode simulé et en rP, en particulier avec des membres extérieurs de l'équipe ou des membres de votre équipe locale. 31. Outro: Et voilà, nous arrivons à la fin de ce cours. J'espère vraiment que vous avez eu du plaisir à découvrir Mach plus rP et à découvrir comment l'utiliser. J'ai hâte de voir vos créations dans le cadre du projet de classe. Il existe une vidéo dédiée à vos projets de classe, alors n'hésitez pas à la regarder et j'ai hâte de voir ce que vous pouvez créer. C'est tout pour celui-ci. Si vous souhaitez accéder à Mock Plus rP, assurez-vous de consulter le PDF contenant un lien. Vous pourrez ensuite y accéder facilement et créer votre compte gratuit de cette façon Cela vous permettra de commencer dès aujourd'hui et de lancer vos créations. Merci beaucoup d'avoir suivi ce cours. Encore une fois, si cela vous intéresse, j'ai d'autres cours sur conception d' UI UX ici sur mon profil Skillshare. Assurez-vous donc de les consulter également. Merci encore d' avoir regardé celui-ci et à la prochaine, prenez soin de vous.