Diseño de aplicaciones para móviles de cero en Adobe Xd

1. Conception d'applications mobiles à partir de Scratch dans Adobe Xd 2019: des milliards de personnes dans le monde utilisent leurs appareils mobiles chaque jour, et de plus en plus de clients veulent créer des abdos mobiles pour servir ce marché. Donc, savoir appel à la conception d'une APP est une compétence vraiment importante. Avoir en tant que concepteur en utilisant Adobe X'd créé vous donne des possibilités illimitées car il est gratuit plate-forme vecteur basé, et il a des mises à jour régulières. Salut là. Mon nom est Alex, et dans ce cours, vous apprendrez les secrets du bon design. Brief Comment planifier et vous inspirer comment créer des tableaux d'humeur et des croquis. Convertir ces esquisses en cadres de fil à des images, icônes et ombres pour créer un design, puis ajouter mouvement et transitions pour créer des prototypes. Partagez le travail avec vos clients pour obtenir des commentaires et enfin appeler pour exporter vos ressources. Pour les développeurs, ce cours s'adresse aux personnes ayant peu ou pas d'expérience dans la nouvelle conception y UX, car dans ce cours, vous apprendrez tout ce que vous devez savoir pour devenir U Y ux designer . J' espère que vous êtes prêt à apprendre. Ce sera X D et le monde incroyable hors vous êtes design UX, et je vous verrai en classe 2. Aperçu du cours: ici, et bienvenue au cours. Je m'appelle Alex. Et dans cette vidéo, nous allons parcourir ce que nous allons couvrir à l'intérieur des partitions. Vous savez donc à quoi vous pouvez vous attendre quand vous commencez à apprendre. Donc, nous allons commencer par le mémoire de conception, et si je zoome un peu plus près, vous allez recevoir ces deux modèles. Donc celui-ci est vide modèle bref de conception, que vous pouvez remplir pour cela et l'un de vos projets futurs. Et à côté, nous avons le dossier de conception rempli que nous allons utiliser pour ce projet particulier, et nous allons le couvrir dans une courte vidéo de conception en détail afin que vous puissiez savoir quelle est la pensée et la logique derrière ce projet. Ensuite, nous avons des modèles de cadre métallique imprimables, et vous pouvez sélectionner soit une taille de quatre lettres ou U. S, qui sont la taille que vous utilisez dans votre pays, et vous pouvez les imprimer et ensuite simplement dessiner sur eux, et je vais vous montrer quelques exemples rapides sur quel type de design ai-je réalisé avec ces cadres métalliques imprimables ? Et je vais également vous montrer comment vous pouvez réaliser des mises en page différentes de ces cadres métalliques imprimables . Après cela, nous allons passer à la section de cadrage de fil hors du parcours, et nous allons créer nos guides de style et inclure quelques icônes différentes et commencer par quelques images simples, des formes simples. Et je vais expliquer la logique derrière chaque élément que vous voyez à l'intérieur de cette section de cadrage de femme. Lorsque nous en aurons terminé, nous allons passer à la section design dans laquelle nous allons inclure les différentes images. Différentes nuances, différents fonds. Certaines nouvelles couleurs allaient aux pieds incluent des éléments différents qui vont vraiment donner vie à notre design. Et après cela, nous allons enfin passer à la section prototypage, où nous allons inclure de nouveaux écrans. Nous allons inclure quelques transitions intéressantes, et je vais vous montrer comment vous pouvez présenter vos idées à votre client afin qu'il puisse le comprendre facilement, et vous pouvez réduire votre travail de cette façon. Étant donné que la majorité des clients ne comprennent pas les images statiques, vous devez leur montrer le mouvement. Vous devez leur montrer des transitions. Vous devez leur montrer toute la pensée derrière l'application afin que vous puissiez arriver à l' accord le plus rapidement possible. Et enfin, après avoir terminé le prototypage, je vais vous montrer comment vous pouvez tout emballer pour envoyer le client ainsi que leurs développeurs et comment vous pouvez communiquer avec eux et quels sont les meilleurs types de fichiers, qui sont les meilleures stratégies d'organisation pour vos fichiers, ainsi que comment vous pouvez obtenir la plus petite taille de fichier possible que vous pouvez facilement envoyer à vos clients et aux développeurs Derek. J' ai donc hâte de vous voir dans le cours. Merci beaucoup de l'avoir pris, et j'espère vraiment que vous en tirerez beaucoup de valeur. 3. Le résumé: comme n'importe quel projet, nous allons commencer par le dossier de conception, mais avant que nous le fassions, je vais rapidement ouvrir les pieds. La ressource est un dossier. Et gardez simplement à l'esprit que de plus en plus de ressources seront ajoutées ici. Ainsi, par exemple, vous serez en mesure d'accéder au projet final lorsque nous aurons terminé la conception et le prototypage afin que vous puissiez l'ouvrir et y aller et l'utiliser. Ou vous pouvez ouvrir le modèle de départ qui va créer un peu plus tard dans le cours. Mais pour cette leçon, nous allons utiliser le modèle de bref de conception et vous pouvez double-cliquer orteil ouvrir. Et si je clique juste ici pour l'ouvrir, vous pouvez voir à quoi ça ressemble. Donc, si je zoom un peu plus près, vous pouvez voir que vous pouvez entrer le nom de votre projet ici. Qui est votre client ? Quand est votre profil d'entreprise d'échéance ? Ainsi, vous pouvez écrire une recherche sur la vue d'ensemble du projet de l'entreprise ST Ng va dans les objectifs afin corriger vos buts et objectifs pour ce projet particulier. Qui est votre public cible et vos exigences en matière de conception ? Donc, ce que les développeurs exigent de vous et enfin le budget et le calendrier. Ainsi, vous pouvez savoir quel est votre budget pour ce projet ainsi que le calendrier d'attente ressemble. Donc quand tu vas commencer quand tu vas finir et enfin ton nom ici et ton email juste ici. Maintenant, tous ces calques sont des calques de texte, et vous pouvez simplement double-cliquer sur l'un d'eux pour les éditer. Vous pouvez cliquer ici pour changer la couleur du texte. Si vous voulez faire ça, vous pouvez changer. Ces icônes incluent les vôtres. Vous pouvez également changer leurs couleurs en faisant la même chose. Et si je minimise cela et ouvre notre mémoire de conception pour ce projet, vous pouvez voir à quoi cela ressemble une fois que toutes les informations ont été saisies. Donc, si je zoom un peu plus près, vous pouvez voir que nous avons qui nous égalons MERS application mobile. Donc c'est notre client. Pour ce cours, vous pouvez voir qu'ils possèdent magasin de meubles. Octobre 12 est notre date limite et juste ici dans le profil de l'entreprise de Enter tête et rempli . Il est donc situé à Belgrade. La Serbie compte 10 employés, donc c'est vraiment une petite entreprise. Ils travaillent avec où sont les concepteurs pour obtenir une cohérence dans la conception minimale et utiliser des matériaux respectueux de l'environnement et processus de production de produits respectueux de l'environnement. Ils ont donc utilisé toutes les traditions pour fabriquer les pièces et former leurs employés à suivre des directives strictes pour protéger ce processus. Donc, à partir de cela, vous concluez qu'ils sont une petite entreprise, ils utilisent des méthodes traditionnelles dans la production, et ils utilisent des concepteurs externes ainsi que des concepteurs internes, pour créer un mobilier design minimal et pour atteindre le cohérence dans leurs processus et leur création. Nous avons le projet Oreo ci-dessous donc ce qu'ils veulent de vous. En tant que concepteur, ils veulent une application mobile qui doit être minimale, propre, très simple et directe. Les utilisateurs sont des personnes âgées parce que les produits sont plus chers que les magasins de meubles ordinaires , sorte qu'ils ne peuvent pas lire les petits caractères. Et parce que les pièces sont sur le prix, votre côté, elles ne veulent pas aussi. Ils ont donc l'argent pour payer A et ne voulaient pas que l'application soit surpeuplée et qu'elle soit difficile à naviguer. Ils veulent se rendre rapidement au point et voir les pièces à l'intérieur de l'application. À un stade ultérieur, ils auront besoin d'un site Web conçu, mais pour l'instant ils veulent juste une application mobile. Nous voulons commencer avec IOS d'abord, puis passer à Android et créer cette version aussi . Mais comme je l'ai dit pour cette première partie de ce projet, ils veulent juste dans l'application IOS pour être créé suivant. Nous avons des buts et des objectifs. Alors mêlez la simplicité heureuse afin que les utilisateurs puissent parcourir les catégories rapidement entrer leurs recherches avec moins de clics quicks, il est possible d'obtenir à leur conception des éléments souhaités rapidement. Il devrait également contenir une page dédiée pour chaque article qu'il vend, afin que l'utilisateur puisse naviguer et en apprendre un peu plus sur l'article avant d'acheter. Ainsi, par exemple, si vous parcourez une chaise et qu'ils veulent créer une page séparée pour des chaises séparées, et lorsque vous cliquez sur cette chaise à partir de la requête de recherche, ils veulent que l'utilisateur puisse en savoir plus sur la chaise, sur le processus, sur les matériaux utilisés, les couleurs, les tailles de prix et ainsi de suite. Donc, ils veulent que nous créions cette page, et ils veulent juste ensuite copier et coller des éléments à l'intérieur de cette page pour tous les autres produits qu'ils ont sur leur offre suivante, nous avons un public cible. Donc, comme je l'ai dit, généralement les personnes âgées, parce que c'est sur le prix ici. Site hors du marché sexe, 60% hommes et 40% femmes. pays de résidence est Serbia City. Les résidents sont Belgrade et j'ai parlé avec eux. Ils pourraient vouloir cibler des zones particulières au large de Belgrade dans la section suivante pour eux, savoir le marketing, le courrier électronique, le marketing, le marketing les réseaux sociaux. Ils veulent cibler des zones spécifiques de Belgrade quand ils savent que des gens ont assez d'argent pour acheter leurs pièces. Ensuite, nous avons un lieu de travail, sorte que les gens sont généralement PDG, hors entreprises et entrepreneurs habitudes de consommation des médias. Donc, ils utilisent généralement Facebook et Instagram, mais peut-être depuis un peu plus que Facebook, qui est important pour cette société afin qu'ils puissent savoir de concentrer leurs efforts de marketing plus vers les seigneurs dentaires Instagram, Facebook. Et enfin, nous avons leurs habitudes quotidiennes. Donc, jour aujourd'hui est en cours d'exécution de leur entreprise courte quantité de temps libre pour la consommation des médias sociaux, et ils sont principalement dans les significations et les bureaux. Maintenant, cela est important, comme je l'ai dit, pour la conception totale de notre application mobile ainsi que leurs efforts de marketing un peu plus tard où ils viennent à ce stade de la promotion de cette application mobile et de leur entreprise globale par le biais des médias sociaux. Enfin, nous avons les exigences de conception, le budget et le calendrier. Maintenant, pour les exigences de conception il y a vraiment simple. Donc acide, deux dimensions et résolutions. Ils veulent commencer avec l'iPhone 10 pour ce projet. Et quand nous passons sur Android, les dimensions seront déterminées plus tard parce qu'ils veulent faire une recherche et en savoir plus sur s'il y a des utilisateurs Android, quel type de téléphone à utiliser afin que nous puissions savoir quel type hors dimensionnement devrait être utilisé pour le fichier de conception android pendant des mois devrait être Adobe X'd pour le fichier final et BMG pour les actifs pour les développeurs afin qu'ils veulent, ou images et icônes. Toby a exporté S PNG, mais je parle avec eux et ils veulent le SPG pour les icônes, et nous allons l'obtenir un peu plus tard. Dans le cours, lorsque nous commençons à exporter, nos actifs pour les développeurs nécessitent palette de couleurs est fourni, et je vais le montrer à son très basique. C' est très minime. C' est très simple. Images d'images à inclure. Ils veulent des images gratuites pour l'instant, donc nous allons utiliser des images qui sont libres d'utiliser à la fois pour un usage personnel et commercial. Et je vais vous montrer ces images plus tard, et j'ai inclus la plupart d'entre eux dans le cours, et vous pouvez les télécharger et les utiliser si vous ouvrez votre ressource est dossier et enfin documents de copie associés à inclure plus tard avec des images et j'ai oublié de mentionner les images seront remplacées plus tard par leurs propres images parce qu'ils utilisent off photographe professionnel orteil faire des images de leurs pièces. Donc, ils veulent avoir la mise en page globale de l'APP afin que le photographe ne puisse pas quel type d'angles sur les pièces doivent-ils tirer pour qu'ils sachent un peu plus tard, quand vient le temps d'inclure les images finales avec les développeurs ? Où doivent-ils mettre certaines images et quels types hors angle doivent-ils utiliser ? Donc, je leur ai parlé un peu plus sur la façon dont les images vont ressembler et ce qui est taper les images qu'ils veulent utiliser. Donc nous avons déterminé cela et je me suis dirigé, téléchargé quelques images juste pour les montrer et pour les inclure dans les partitions. Et enfin, le budget et le calendrier de temps pour compléter la version IRS est de 30 jours ventilation budgétaire. C' est donc 3000,50 pour cent de rabais avant le début du projet, 50 pour cent avant les livraisons d'acide. Donc, à la fin du projet Android et le prix du site Web à déterminer plus tard. Comme je l'ai dit, parce que nous ne savons pas pour le moment combien d'appareils Android allaient utiliser et nous allons concevoir quatre parce qu'ils vont certainement avoir besoin de quelques dimensions aussi tablettes Android et peut-être même smartwatches, et nous allons le voir à l'avenir et enfin pour le site Web parce que nous ne savons pas le moment combien de pages seront à l'intérieur du site et nous ne savons pas s'ils voulaient être réactifs s'ils voulaient être un site Web conçu d'une seule page, nous ne le savons vraiment pas pour le moment. La planification de la répartition du calendrier est donc de cinq jours. La recherche dure cinq jours pour concevoir des normes avec des révisions. La présentation est de deux jours et nous allons inclure la présentation aussi parce que nous voulons montrer la présentation à leurs intervenants parce qu'il y a, ah PDG et aussi intervenants. Ils veulent donc s'assurer que nous sommes sur la même voie et enfin, révisions finales quand ils voient la présentation. Ils souhaiteront peut-être ajouter quelques modifications supplémentaires à la conception. Et nous avons huit jours pour la révision finale afin que vous puissiez voir la chronologie à quoi tout ressemble. Et comme je l'ai dit, vous pouvez changer tout cela à l'intérieur du modèle. Voici mon nom. Voici mon email, et c'est fondamentalement tout pour ce design. Brève vidéo. Ensuite, je vais vous montrer comment vous pouvez planifier ce projet, pourquoi il est important de planifier votre projet. Et quand nous le ferons, nous allons passer à l'inspiration, tableaux d' humeur, croquis et enfin à l'encadrement de notre projet. 4. La planification: quand il s'agit de planifier votre projet, il est vraiment important que vous planifiiez les écrans que vous allez concevoir pour le projet en question. Parce que de cette façon, vous pouvez savoir combien vous pouvez citer votre client. S' ils n'ont pas de budget fixe, et dans la majorité des cas ils ne le font pas. Ensuite, vous pouvez savoir combien de temps devriez-vous investir dans ce projet en fonction du nombre hors écrans, et donc vous pouvez savoir combien de temps le projet va durer. Et enfin, vous pouvez savoir de quel type hors projet ils ont besoin et de quel type hors écrans avez-vous besoin pour concevoir. Ainsi, vous pouvez savoir, par exemple, quels types d'images doivent être recherchés. Si le client vous a demandé de trouver des images comme c'est pour notre projet dans cette classe, et enfin vous pouvez le savoir. Par exemple, quels types de fonds devriez-vous utiliser et le projet contient-il des tableaux de bord, par exemple, ne contient pas boutique contient des écrans de médias et ainsi de suite et ainsi de suite. Il est donc très important de planifier votre projet dans Advanced, et ce n'est pas la dernière étape du processus de planification. Ce n'est que le début de mettre quelques choses sur le papier juste pour que vous puissiez savoir combien de temps ce projet va durer et combien d'écrans vous allez concevoir. Donc, pour notre projet particulier, ce que nous avons est, ah, écran d'accueil pour commencer et sur l'écran d'accueil, nous allons énumérer quelques catégories principales vue des principaux produits, leur histoire et comment ils dessinent leurs pièces. Ensuite, nous avons l'écran de catégorie, donc à partir de l'écran d'accueil, les gens peuvent aller dans l'écran de catégorie et ils peuvent rechercher par catégorie. Ensuite, ils ont des filtres de recherche, lesquels ils peuvent cliquer, puis ils peuvent sélectionner différents types hors. Par exemple, les prix, les couleurs, les matériaux. Est-ce que le caillot entre, lavable ou non, et ainsi de suite et ainsi de suite ? Ensuite, nous avons la combinaison de salle, laquelle nous pouvons accéder depuis le menu ainsi que depuis l'écran d'accueil. Donc, à l'intérieur de la combinaison de la pièce. Nous avons l'image de fond principale, et nous avons les pièces qui sont utilisées à l'intérieur de cette pièce afin que les gens puissent savoir comment pièce est un regard à l'intérieur de la pièce, et ils peuvent acheter ces pièces directement à partir de là. Ensuite, nous avons sélectionné des éléments. Donc, quand ils sélectionnent un élément à partir d'ici à partir de la catégorie ou de l'écran d'accueil, il leur faudra pour le sélectionner. Et c'est l'élément sélectionné est ce dont j'ai parlé dans le projet Brief. Donc, fondamentalement, c'est un écran séparé, montrant la majorité de l'utilisateur des informations sur ce produit particulier, sorte que cet écran va être fondamentalement le même pour tous leurs produits. Mais nous allons utiliser,par exemple, par exemple, une chaise ou quelque chose comme ça pour présenter cet article sélectionné. Donc, s'ils veulent l'ajuster et ajouté à un panier suivant, nous passons à l'article sélectionné ajusté, et vous pouvez changer ces noms de ces écrans au fur et à mesure que vous allez le long. Ça n'a vraiment pas d'importance. Mais pour ce projet, j'ai choisi ces noms afin à l'intérieur de l'élément sélectionné ajusté pris, par exemple, a changé la couleur du produit. Ils peuvent changer la taille du produit, et enfin ils peuvent l'ajouter au panier, et quand ils le font, et quand ils le font, nous passons sur les détails de la commande où ils peuvent examiner les détails de leur commande et voir combien articles ils ajoutent au panier. Ils peuvent les retirer du panier s'ils le veulent, ou s'ils ne le veulent pas. Ils peuvent procéder au paiement orteil, écran à l'intérieur de l'écran de paiement. Ils seront des options pour la carte de crédit PayPal, et ils peuvent ajouter que ces options à partir de là. Et enfin, lorsqu'ils cliquent, confirment le paiement, ils peuvent alors se déplacer jusqu'à, par exemple, emplacements de magasin, auxquels ils peuvent accéder depuis le menu et à l'intérieur de l'écran de localisation du magasin. Il y aura juste une carte, et vous pouvez accéder aux informations de base sur leur emplacement de magasin. Ainsi, par exemple, dans quelle rue ils se trouvent, numéro de téléphone de ce magasin. Et vous pouvez également utiliser la navigation si vous voulez conduire ou y marcher jusqu'à cet endroit particulier , pour parcourir en personne toutes leurs pièces et les essayer, par exemple. Donc, fondamentalement, c'est tout pour ce processus de planification de notre projet. Et tu peux changer cet Aziz autant que tu veux. Mais ce n'est que la première partie, et le tout début de notre projet juste pour nous afin que nous puissions savoir combien d'écrans ont-ils besoin conçu. Et gardez à l'esprit que tout cela peut changer. Laissez-moi vous donner un exemple rapide. Donc, par exemple, à partir du paiement, nous ne allons pas concevoir la section Adit, mais il doit être une section d'édition à l'intérieur du paiement. Mais pour cette première partie du projet, nous allons juste l'écran de paiement de conception de pied parce que si en édition, qu'il peut ressembler à l'application IOS essentiellement par défaut, il vraiment comme une question. Mais nous voulons juste concevoir cet écran de paiement pour l'instant, aussi à partir de la combinaison de chambres, filtres de recherche et ainsi de suite. Chacun de ces écrans peut se ramifier dans cinq ou dix écrans différents. C' est vraiment à vous et jusqu'au client de déterminer le nombre de fonctions qu'ils veulent inclure à l'intérieur de cette application particulière. Dans la prochaine vidéo, je vais vous montrer l'inspiration où vous pouvez trouver des pièces d'inspiration et d'inspiration que j'ai choisies pour ce projet et comment vous pouvez utiliser cette inspiration dans votre travail. Alors je te verrai là-bas. 5. Inspiration: quand il s'agit d'inspiration sur votre projet de design, j'aime orteil trouver mon inspiration dans différents endroits. Tout d'abord, vous devriez toujours rechercher vos clients concurrents juste pour voir ce qu'ils font et à quoi ressemblent leurs sites Web et applications mobiles. Si vous en avez la chance, vous devriez également installer l'application mobile de leurs concurrents juste pour voir la fonctionnalité et pour voir à quoi elle ressemble sur votre téléphone et pour voir les options et fonctionnalités qu'elle pourrait avoir. Mais une fois que vous avez fait la dette et que vous voulez une inspiration visuelle, vous pouvez sauter dans un dribble ou être d'où, ou vous pouvez trouver des sites d'inspiration en ligne. Il y a tellement de choix pour ce projet particulier, j'ai trouvé cette personne sur dribble ainsi de suite. Julia aide vraiment. C' est comme ça que ça se prononce, et j'aime vraiment ces cartes. Donc, comme vous pouvez le voir, c'est vraiment assez simple. C' est facile à l'œil, et une chose que je dois noter est que nous n'allons pas utiliser ces couleurs. On n'utilisera pas ces images. C' est juste pour que nous puissions envelopper notre tête autour de la façon dont ces formes vont ressembler une fois que nous les avons conçues. Donc sont vraiment comme ces cartes vraiment comme cet espace vide ou cet espace blanc ? J' aime certaines de ces balises et comment ces icônes fonctionnent et semblent très simples et propres. Si vous sautez dans un autre exemple, triez celui-ci, par exemple. Vous pouvez voir juste flèche arrière juste ici sans texte au milieu, vous pouvez voir de grosses cartes avec juste quelques quantités de texte. Vous pouvez voir les gros titres et les catégories. Donc, ceux-ci fonctionnent assez bien. Et si nous sautons dans, par exemple, celui-ci, vous pouvez voir une fois de plus ils utilisent ces ombres portées subtiles derrière. Ils ont ces beaux paragraphes qui sont faciles à lire, un facile à comprendre. Ainsi, comme vous pouvez le voir, à partir de ces quelques exemples, nous pouvons vraiment conclure et trouver de l'inspiration pour notre projet. Celle-ci aussi. Donc, des images vraiment assez simples, des images de fond un grand texte lisible et quelques bons gros titres. Donc j'aime vraiment cette direction de conception. Ensuite, ce que vous devriez faire est de trouver d'autres sites Web ou d'autres laboratoires mobiles, qui sont dans le même créneau que le projet pour lequel vous travaillez. Donc, par exemple, nous travaillons à ce projet, qui est pour magasin de meubles. Ils ont donc toutes sortes de chaises, lits et de canapés et ainsi de suite. C' est ce que vous devriez chercher et trouver de l'inspiration juste pour voir comment les autres font. Donc, comme vous pouvez le voir à partir de cet exemple simple, j'ai trouvé sur commence, nous avons un fond de couleur, et nous avons fondamentalement à colorier le texte ici. C' est très facile à lire. C' est vraiment facile de naviguer. Nous avons une belle image juste ici sur la droite. Si je fais défiler vers le bas, vous pouvez voir certains de ces autres exemples. Donc, pour cette chaise, par exemple, c'est agréable et facile à lire. Agréable et facile à comprendre, parce que si vous vous souvenez, de notre mémoire de design, notre public est généralement plus âgé qui n'a pas beaucoup de temps à lire. Et s'ils veulent lire, le texte devrait être beau et grand et lisible juste pour qu'il contraste bien sur ces arrière-plans. Donc, comme vous pouvez le voir des boutons vraiment clairs vraiment facile, vraiment simple, il n'y a pas grand-chose qui se passe ici. Ici. Ils peuvent rapidement faire défiler les images, et j'aime vraiment ça Donc toutes ces images ont un fond découpé afin qu'elles soient en mesure accueillir ces couleurs d'arrière-plan et de les rendre uniformes et cohérentes. Enfin, vous pouvez voir les boutons sont vraiment clairs. Les flèches sont vraiment claires. Et tous ceux-ci utilisent ce fond d'écran, qui est vraiment agréable, simple, simple, facile à l'œil une fois de plus parce que nous avons un public plus âgé pour notre application. Donc, j'aime vraiment cette direction de conception et enfin vous. Vous pouvez rechercher des points d'accès MERS égaux sur les démarrages et sur dribble, juste pour comprendre comment fonctionne le commerce électronique APS. Donc, vous pouvez peut-être vous inspirer de la page de facturation sur les pages où vous vous connectez à des cartes de crédit pour ce genre de choses. Juste pour vous assurer de comprendre comment à la voiture fonctionne sur certaines de ces applications mobiles . Juste pour que vous puissiez savoir où vous pouvez, par exemple, positionner les fonds afin que les gens puissent ajouter au panier. Et peut-être que vous pouvez comprendre comment certains des curseurs fonctionnent et ainsi de suite, jusqu'à présent vous pouvez simplement taper le commerce électronique dans votre recherche, ce soit sur commence ou dribble, et vous pouvez voir différents exemples sur la façon dont tout cela peut être atteint. Et comme vous pouvez le voir, je fais défiler vers le bas et vraiment il y a beaucoup d'options différentes à choisir. Et enfin, vouloir que je veux te montrer, c'est parce que ce projet est minime. Vous pouvez toujours aller orteil moi, Kia et Yeske et parce que je suis de Serbie, ont été en train de charger notre site local serbe. Mais il apparaîtra votre site Web le plus proche ou du pays d'origine, et c'est important juste pour que vous puissiez comprendre si le projet l'exige. Donc, par exemple, nous avons un design minimal ici et c'est fondamentalement comme un an ou un style de risque. Donc style de l'Europe du Nord et vous pouvez voir comment ils mettent le texte sur leur site Web et vous pouvez télécharger et installer leur APS juste pour que vous puissiez comprendre comment e commerce partie de ces applications fonctionne et vous pouvez voir sur ce côté fragile, pour ils ont ces icônes minimales et ils ont le même texte de couleur sur la droite. C' est très facile à lire. C' est très facile à comprendre, donc c'est quelque chose que nous voulons. Même chose pour Yeske. Vous pouvez voir ici. J' aime ça. Les cartes ont leur vrai Ils sont vraiment simples donc ils ont une ligne de texte juste ici et juste l'image de fond. Donc rien de plus. Vous pouvez avoir des éclaboussures de couleur si c'est à votre client de décider. S' ils l'aiment et que vous pouvez voir certains de ces cadres, j'aime vraiment comment ils sont intégrés. Donc, comme vous pouvez le voir à partir de cette vidéo entière, nous n'utilisons aucune partie particulière hors de tout. Ces pièces d'inspiration étaient juste nous inspirer sur la façon dont certains des éléments vont ressembler sur la page maison, um, les couleurs, contraste et comment certaines images fonctionnent indifférence dans les domaines. Donc, c'est vraiment ce que vous voulez découvrir dans votre partie d'inspiration et pas seulement enlever la mise en page globale de ceux-ci et juste l'utiliser directement comme ça. Comme certaines mises en page fonctionnent dans des cas différents, elles peuvent ne pas fonctionner pour votre cas Continuez donc à explorer, trouver de l'inspiration, vous inspirer et à utiliser les meilleures pratiques dans votre conception finale. 6. Tableau d'humeur: Créons rapidement notre planche d'humeur. Donc, à partir de votre écran d'accueil, il suffit de cliquer sur cette arme 1920 juste pour ouvrir un nouveau fichier, agrandir, contrôler zéro afin qu'il puisse frapper en position. Et vous pouvez taper dans le tableau d'humeur si vous le souhaitez. Et ce tableau d'ambiance est juste pour vous inspirer juste pour que vous puissiez comprendre quelques combinaisons de couleurs différentes . Quelques variantes de texte différentes que vous pouvez explorer avec les clients. Logo. Si le logo est vraiment un style particulier à l'intérieur de votre niche, c'est vraiment à vous de décider, et vous pouvez inclure autant d'éléments que vous voulez à l'intérieur de votre mobile. Vous pouvez ensuite le montrer à votre client si vous voulez terminer si le client veut le regarder et c' est fondamentalement juste pour vous inspirer afin que vous puissiez mieux comprendre à l'intérieur de votre tête comment différentes combinaisons de couleurs et combinaisons de fonds fonctionneront sur ce projet. Donc, pour commencer, je vais simplement choisir l'outil rectangle et juste dessiner juste en dirigeant comme ceci . Par exemple, appuyez sur la grille de répétition faire aimer ceci et peut-être même en faire trois comme ça. Je vais aller sur le grand groupe Utilisez ce clic électoral sur l'un des coins maintenez le décalage et puis simplement l'agrandir afin que je puisse avoir un peu plus d'espace pour nos images suivant. Vous pouvez ensuite faire glisser et déposer des images à l'intérieur, mais ce que je veux faire d'abord, ils les sélectionnent toutes et retirent la bordure d'ici. Et puis je peux aller de l'avant et simplement glisser et déposer quelques images à l'intérieur. J' ai déjà téléchargé quelques images, et si vous voulez quelques belles images gratuites, vous pouvez utiliser fourmis blesh dot com simplement taper une pièce, par exemple, et il vous donnera toutes sortes de différentes, minimes collections. Et comme vous pouvez le voir, l'inspiration est infinie juste à partir de ces exemples particuliers. Mais je suis allé de l'avant et il suffit de télécharger quelques images pour me donner une longueur d'avance. Vous n'obtiendrez pas ces images à l'intérieur de votre dos juste parce qu'elles sont trop grandes. Mais comme je l'ai expliqué il y a quelques secondes, vous pouvez sauter sur splash dot com et vous pouvez cliquer sur l'image, vous pouvez faire un clic droit dessus, copier, puis sauter en remorque. X'd contrôle ou commande V, et il va accélérer cela à l'intérieur de votre document. Vous pouvez ensuite l'utiliser et inclus dans tout hors de ces supports d'image. Mais comme je l'ai dit, c'est juste pour que nous puissions mieux comprendre certaines de ces couleurs et pour repositionner certaines de ces images, double-cliquez dessus. Maintenez la touche Maj, et vous pouvez les positionner mieux comme vous le souhaitez. Donc, je vais simplement sauter ici et sauter à droite dans certaines de ces images et peut-être les déplacer un peu plus. Juste pour qu'il soit plus clair ce qui est la perspicacité maintenant. Encore une fois, ces images peuvent être celle que vous voulez. Encore une fois, vous pouvez sauter dans le remorquage sur Splash et, par exemple, si votre projet a des couleurs chaudes, vous pouvez utiliser ceux-ci. Mais parce que le nôtre ne le fait pas et qu'il utilise ces pierres, peut-être cette image est parfaite parce qu'elle montre des meubles à l'intérieur hors de l'espace et que vous pouvez utiliser n'importe lequel de ces pierres. Par exemple, avoir une belle lampe et une belle table basse ou une nuit. Restez là, et vous pouvez, par exemple, goûter quelques couleurs de ces images. Mais une fois de plus, je suis j'ai choisi d'utiliser ceux, et vous pouvez choisir ceux que vous voulez sauf utiliser la direction peu une fois de plus frapper grille de répétition et simplement agrandir l'outil autour. Disons, oui, quelque chose comme ça va. Vous pouvez même augmenter l'espacement en faisant cela. Et je suis super groupe parce que nous allons choisir et goûter des couleurs différentes pour notre projet. Maintenant, nous n'allons pas utiliser ces couleurs parce que le client a déjà des couleurs. Mais dans certains cas, peut-être que vous voulez leur montrer différentes couleurs et comment ils fonctionnent avec des images ou des formes particulières . Et dans la majorité des cas, les clients rechercheront vos conseils et écouteront ce que vous avez à dire. Donc, dans ces cas, vous pouvez puis implémenter ces couleurs dans le projet, et les clients vous aimeront pour cela parce que vous leur avez donné et des conseils et leur montrer comment certaines couleurs fonctionnent avec d'autres couleurs. Donc, dans ce cas, passons de l'obscurité jusqu'à la plus légère, et vous pouvez utiliser cette couleur photo pour sélecteur de couleur comment nous voulons et choisir le rayon brut, par exemple, et peut-être que vous pouvez trouver d'autres nuances nous allons utiliser. Peut-être que celui-ci semble encore bien, et puis vous pouvez le sélectionner et sauter ici et peut-être utiliser une nuance plus claire, par exemple, comme ceci. Peut-être que vous voulez choisir cette couleur, et il est vraiment sombre, peut-être vous d'y aller et peut-être que vous pouvez choisir, Par exemple, ce ne serait pas la couleur. Et peut-être celle-là juste pour que vous puissiez avoir une variation. Et parce que j'ai trouvé ces frontières ennuyeuses, vous pouvez les sélectionner toutes. Il suffit de cliquer ici pour supprimer les bordures de vos couleurs. Maintenant, comme je l'ai dit plusieurs fois tout au long de cette vidéo, c'est juste pour votre inspiration, et vous pouvez utiliser les images et les couleurs que vous voulez. Donc, par exemple, peut-être vouloir aller dans l'autre sens et choisir cette couleur et peut-être sélectionner la couleur brutale parce que nous l'aimons pour le texte. Peut-être. Peut-être que vous voulez choisir cette couleur plus claire parce que peut-être nous voulons ajouter une ombre portée ou quelque chose comme ça. Utilisé cette couleur plus claire, peut-être envie d'explorer avec certains cadres à l'intérieur de votre conception utilisé cette couleur et ainsi de suite et ainsi de suite, donc il est vraiment à vous de déterminer quelles couleurs vous voulez choisir. Et ce n'est qu'un exemple rapide sur la façon dont vous pouvez créer un mortarboard agréable et simple. Pas pour nous donner la zone à partir du texte, vous pouvez double-cliquer sur votre port et simplement agrandir orteil autour ici. Ensuite, ce que vous pouvez faire est Presti pour le titre, Cliquez à l'intérieur et faites taper. C' est notre contrôle de titre. Félicitez A et ses clients. Un client veut utiliser le sens ouvert, alors installez-le. Il est libre de formulaires Google et peut-être que nous voulons utiliser Bolt. Et c'est pour nos gros titres. Donc peut-être que nous pouvons l'augmenter à 48 juste pour que nous puissions le voir un peu mieux. Vous pouvez le positionner comme si le contrôle de le dupliquer. Positionnez-le ici. Maintenez la touche Maj enfoncée flèche vers , par exemple, quatre fois afin que nous puissions avoir un espacement de 40 pixels entre notre titre et notre texte. Maintenant, pour convertir cet orteil à partir du texte de la zone d'orteil de point texte, vous pouvez simplement cliquer ici et peut-être que nous voulons réduire la taille. Ainsi, par exemple, c'est 48. Peut-être que nous pouvons utiliser 24 vous pouvez augmenter la taille de ce paragraphe juste en faisant glisser ces poignées. Et une dernière chose que nous voulons faire est de sauter ici à la prise à Spano et de trouver une Laura Ipsum. Il est gratuit à installer et vous pouvez revenir à l'écran d'accueil et vous pouvez aller à Beddoes. Vous pouvez aller à brancher, et à partir d'ici, vous pouvez simplement taper Florham ipsum, et il apparaîtra juste ici et simplement cliquez sur installer, et vous aurez cette extension exacte. Je veux dire le blog, comme j'en ai encore une fois, beaucoup de clic de gypse a échoué avec le texte de l'espace réservé. Assurez-vous que le texte est sélectionné. Cliquez là et vous pouvez choisir le texte que vous voulez à partir d'ici. Cliquez simplement sur insérer du texte. Et voilà. Nous avons notre paragraphe complet maintenant changer de gras à régulier et peut-être aller avec cela un peu plus sombre. Ou peut-être que nous pouvons même changer la couleur à cette couleur que nous avons déjà sélectionnée ici. Et enfin, peut-être que nous pouvons explorer et choisir une justice plus audacieuse. Voir la distinction entre le titre et le paragraphe un peu mieux pour que vous puissiez enfin double-cliquer ici. Positionnez juste ici. Vous pouvez placer votre logo ici, inclure un peu plus d'images, peut-être inclure d'autres sites Web. Donc, c'est fondamentalement un tableau d'humeur. Vous pouvez inclure autant d'éléments ou aussi peu d'éléments que vous voulez vous inspirer pour le projet en main, et vous pouvez ensuite imprimer le South Show à votre client ou les envoyer par e-mail. Tu peux le sauver comme Jay de retour. Il suffit de cliquer ici sur le nom de votre contrôle de frappe de port. Commentaire. E. Choisissez le paquet PNG ou J à partir d'ici. Choisissez l'exportation de destination en tant qu'image unique, ce que vous tolérez. Montrez à votre client dans la vidéo suivante. Nous allons passer à l'esquisse, et je vais vous montrer un modèle que j'ai créé pour vous, que vous pouvez utiliser pour esquisser vos cadres métalliques, puis les utiliser comme inspiration et comme guide dans votre projet, Alors je te verrai là-bas. 7. Croquis: Si vous allez à votre ressource est dossier, double-cliquez dessus et vous pouvez trouver un cadre métallique modèles imprimables. Vous pouvez ouvrir ce fichier, et voici à quoi il ressemble à l'intérieur de celui-ci. Vous pouvez trouver un quatre modèles de papier, Isabella modèles de papier lettre américains et vous pouvez utiliser ces modèles orteils les imprimer et simplement dessiner ce que notre crayon de panneau sur eux et vous pouvez voir si vous zoomez un peu plus près. Vous pouvez avoir juste les informations de haut de l'iPhone juste ici, ainsi que l'indicateur d'accueil juste ici en bas. Et vous pouvez utiliser dans ces rectangles juste pour que vous puissiez dessiner, Ah, meilleurs cadres métalliques à l'intérieur juste pour que vous puissiez savoir combien d'espace vous pouvez avoir et ainsi suite. Et encore une fois, ceux-ci sont juste pour le dessin à la main, et vous pouvez les utiliser aussi bien si vous le souhaitez et créer des cadres de fil juste ici à l'intérieur si vous souhaitez. Mais je préfère les orteils. Imprimez-les et utilisez-les avec ma main. C' est ah, beaucoup meilleur processus que j'ai trouvé au fil des ans, puis pour commencer avec les amis du fil directement à l'intérieur de votre logiciel. Donc, une fois de plus, vous pouvez les utiliser. Si vous utilisez un modèle quatre ou si vous utilisez notre modèle de papier à lettres, il vous suffit de sélectionner un des tableaux d'art, selon celui que vous voulez. Toucher le contrôle. Recommandez E d'exporter des actifs, et à partir d'ici vous pouvez choisir Pdf et vous pouvez l'exporter. Ouvrez-le et imprimez-le autant de fois que vous le souhaitez. Et parce que je sais qu'on a 10 écrans. C' est pour ça que j'ai choisi 10. Mais vous pouvez utiliser ceux pour Donc, par exemple, vous voulez ces trois. Vous pouvez choisir ce panneau de calque ici, et vous pouvez masquer tous ces autres, puis peut-être positionner ce panneau libre au milieu. Vous pouvez imprimer ces trois si Onley. Si vous avez seulement besoin de trois écrans pour être imprimés, vous pouvez dans beaucoup de ces écrans que vous pouvez peut-être utiliser, car c'est vraiment à vous et à votre projet de décider. Maintenant, ce modèle peut accueillir 10 comme vous pouvez le voir ici. Et si vous avez besoin de plus de 10, vous pouvez simplement imprimer plus de papiers sur ces cadres métalliques particuliers . Et maintenant, nous sommes une fois que je vous montre que je vous montre rapidement ce que j'ai trouvé avec ces modèles. Donc ici, j'ai un cadre métallique J image photo, et vous pouvez l'utiliser juste pour que vous puissiez voir de quoi je parle. Peut-être pourrions-nous l'élargir et l'y opposer ici. Ce sont donc ceux que j'ai dessinés, et je les ai simplement scannés dans mon ordinateur. Et si je zoom un peu plus près, vous pouvez voir que j'utilise les noms d'écran juste ci-dessous. Et c'est de ça que je parlais. Donc, c'est fondamentalement juste une main libre. C' est juste pour toi. Ainsi, vous pouvez peut-être comprendre comment positionner certains éléments à l'intérieur de chaque écran. Peut-être que vous pouvez voir quels éléments fonctionnent quels éléments ne fonctionnent pas. Et à cause de mon scanner, vous ne pouvez pas vraiment voir cette couleur de fond. Mais peut-être que votre scanner est meilleur, et vous pouvez le voir. Mais quand vous l'imprimez, c'est vraiment sympa. Et vous pouvez voir cette couleur de fond ainsi que ces rectangles blancs animaux à nouveau, vous pouvez simplement DoubleClick préservatif et changer la couleur à la couleur que vous voulez. Si c'est quelque chose que vous voulez et que votre imprimante peut accueillir cela donc si nous zoomons un peu plus près, vous pouvez voir sur l'écran d'accueil. Par exemple, nous avons différents éléments positionnés à travers, et cela va être beaucoup plus long en bas parce que nous voulons accueillir ces combinaisons de pièces aussi sur cet écran d'accueil. Ensuite, nous avons la recherche de catégorie ici et vous pouvez voir que par exemple, j'ai choisi SOFA Combien de résultats il y a tri par fin. Les utilisateurs peuvent cliquer sur cette flèche prise tri par l'un des filtres et la pensée. Cliquez sur Appliquer, et il les ramènera à la recherche de catégorie avec ces filtres appliqués ensuite, nous avons la combinaison d'espace. Comme je l'ai dit, vous pouvez y accéder à partir d'ici, et vous pouvez également y accéder depuis le menu parce qu'à l'intérieur de la combinaison de la pièce, c'est l'écran qui vend les meubles. Et les utilisateurs peuvent voir comment certaines pièces s'intègrent à l'intérieur , par exemple, le salon, la chambre à coucher ou la cuisine, et ils peuvent choisir différentes options à partir d'ici. Ils peuvent voir combien ils coûtent, et ils peuvent voir tous les produits utilisés à l'intérieur de cette pièce particulière. Donc, nous avons sélectionné l'article et l'article sélectionné peut être article à partir d'ici ou d'ici et sur l'article, ils peuvent voir le nom du produit juste ici en haut d'une ligne de texte. Peut-être que vous pouvez inclure ah headline sont dans le sous-titre juste pour que les utilisateurs puissent savoir, par exemple, ce qu'il est à côté de ces trois ou quatre mots. Ils peuvent voir le prix quelles couleurs Ils peuvent choisir des tailles sur le produit et sur le produit , comme vous pouvez le voir, comme vous pouvez le voir, droit vers le bas 3 à 4 sections ci-dessous afin qu'ils puissent faire défiler vers le bas et en savoir plus sur ce produit . Et quand ils se terminent avec l'élément sélectionné sélectionné article ajusté. Alors peut-être qu'ils ont choisi, par exemple, une couleur particulière. Peut-être qu'ils ont choisi la taille, et ce bouton d'ajout au panier apparaîtra et ils peuvent l'ajouter à la cour suivante. Quand ils le font, ils peuvent cliquer sur l'icône de la carte et ils peuvent accéder aux détails de la commande. Et à l'intérieur de l'écran, ils peuvent voir toutes les pièces qu'ils ont commandé nom du prix de la paix de la paix et combien d'articles hors de cette pièce particulière. Donc c'est important. Si vous commandez un canapé, peut-être que vous voulez en commander un seul. Mais si vous commandez des chaises, peut-être que vous voulez commander quatre ou six ou quelque chose comme ça, peut-être aveugle pour avoir quelques petits objets hors cendriers, verres ou plantes en pot ou quelque chose comme ça. Et peut-être qu'ils veulent inclure un nombre différent de ces informations afin que les utilisateurs puissent marcher. Dallas va apparaître. Ils peuvent simplement utiliser leur orteil de clavier. Entrez quatre, par exemple, ou six ou quelque chose comme ça, et le prix hors cours s'ajustera en conséquence. Enfin, ils ont procédé au paiement, et il les mènera à cet écran. Et comme vous pouvez le voir à partir de l'exemple d'inspiration que je vous ai montré, j'utilise juste une simple flèche arrière, qui les ramènera à cet écran. S' il y a quelque chose qu'ils veulent changer, et sur cet écran, ils peuvent choisir des paiements afin qu'ils aient des options de carte de crédit, et ils ont également des options PayPal. Peut-être que nous pouvons inclure plusieurs cartes de crédit, et ils peuvent glisser à travers ces grandes voitures pour choisir la bonne. Ou s'ils en ont juste un, ce sera juste un ici. Et enfin les informations PayPal ci-dessous. Quand ils sont heureux, ils frappent faire le paiement et s'ils veulent apporter quelques modifications finales, ils peuvent cliquer sur modifier l'un de ces, et il va l'emmener à la modification hors carte de crédit ou pour le compte de personnes. Suivant. Nous avons des magasins, donc nous avons une grande barre de recherche ici avec le suivant, et ils peuvent cliquer sur la recherche sur n'importe quel écran il contient l'icône de recherche. Donc, quand ils le feront, cela leur prendra le pied de la barre de recherche juste ici, et ils peuvent choisir ces différents filtres, et ils peuvent choisir différents articles qu'ils veulent inclure dans la recherche. Mais s'ils veulent choisir l'emplacement, ils peuvent également frapper la barre de recherche et taper l'emplacement, et cet écran apparaîtra et, par exemple, type Daikin à Belgrade, qui est une Serbie capitale, et nous savons qu'ils ont les magasins juste là, et nous pouvons voir la rue juste ici, plus de détails, qui va ensuite les montrer. Par exemple, s'ils voyagent en bus ou en taxi, quelles rues orteil frappé, et il demandera l'emplacement de l'appareil juste pour qu'il puisse leur montrer la distance entre eux et le magasin s'ils veulent naviguer. Ils peuvent appuyer sur ce bouton. Il leur prendra orteil l'application de navigation préférée qu'ils utilisent. Donc, s'ils ont utilisé Google maps, il leur prendra orteil Google maps s'ils utilisent ici. Cartes. S' ils utilisent des façons Apple maps, il n'a vraiment pas d'importance. Il va les prendre, remorquer leurs cartes préférées, et il va commencer une navigation à partir de là vers l'emplacement en question. Et enfin, nous avons notre menu. Donc, partout où ils ont le menu Icahn. Donc, par exemple, ici ou ici, ils peuvent le frapper, et il les prendra à cemenu simple de base, menu simple de base, qui alors ils peuvent choisir différentes options de Donc, comme vous pouvez le voir, c'est vraiment assez simple. Il manque beaucoup hors écrans, mais pour cette première partie de notre processus de conception, et c'est ce que nous avons convenu avec le client sont les premiers écrans qu'ils veulent. Je leur ai indiqué que cette application nécessitera au moins 15 ou 20 écrans supplémentaires. Ils disent qu'ils vont bien avec ça, mais ils veulent juste voir cette première partie. Et s'ils aiment la conception, s'ils aiment la fonctionnalité et qu'ils veulent le tester sur certains des utilisateurs juste pour qu'ils puissent comprendre si les utilisateurs l'aiment si les utilisateurs le trouvent confus ou non, Et à partir de là, lorsqu' ils recueillent toutes les données, nous pouvons aller de l'avant et concevoir certains de ces autres écrans. Et c'est beaucoup simple lorsque vous avez un produit complet que vous pouvez ensuite l'ajouter et inclure plus d'écrans et inclure plus certains de ces différents éléments parce que c'est beaucoup plus rapide lorsque vous avez quelque chose plutôt que de commencer à partir d'écran vide. Donc, ce sont le cadre de fil, modèles imprimables. Et comme je l'ai dit, vous pouvez les utiliser et les imprimer. Vous pouvez dessiner sur eux, et si vous voulez, vous pouvez même créer des cadres I ici dans la prochaine section hors discours. Nous allons sauter dans le remorquage, le cadrage, et nous allons commencer à concevoir nos cadres métalliques à partir de cette information que je viens de vous montrer . Et je vais expliquer quelques techniques différentes et comment vous pouvez obtenir le cadrage filaire pourquoi c'est important et comment cela va accélérer votre processus plus tard. Quand vient le temps pour les révisions, donc je vous verrai là-bas 8. Préparation de fichiers: dans cette partie du cours, nous allons commencer à créer nos cadres métalliques. Et pour ce faire depuis l'écran d'accueil, il suffit de cliquer sur iPhone envoyé et tennis pour créer un nouveau port d'art. Vous pouvez agrandir votre écran comme ceci, et allons rapidement de l'avant et créer nos écrans. Donc, comme je l'ai dit, nous avons 10 écran, si terne. Cliquez ici. Je vais taper la maison et faire le contrôle ou la commande D pour dupliquer ce notre quai de port, comme ici et en tapant le contrôle de l'écran de catégorie de nouveau pour dupliquer celui-ci double clic et tapez dans les filtres de recherche. Et je vais juste mettre rapidement en pause cette vidéo et les dupliquer tous et créer 10 écrans, puis revenir. Et maintenant que je suis de retour où il a frappé le contrôle zéro et vous pouvez voir à quoi ils ressemblent tous et comme vous pouvez le voir en haut, noms sont les noms que j'ai mentionnés en dessinant ma femme amies dans le journal, et vous pouvez toujours ils incluent vos propres noms ici si vous créez ah, un projet différent. Ensuite, je vais toe hop sur un autre ex defile déjà créé et copier quelques icônes. Donc je vais frapper le contrôle V juste ici pour les frapper. Et évidemment, vous allez obtenir ces icônes parce que ce sont les icônes que nous allons utiliser dans nos projets. Je vais les placer ici, et j'ai aussi un logo que le client m'a envoyé. Et ce n'est pas le logo final. Mais ils m'ont envoyé ce logo pour l'instant. Et parce que je ne fais pas de dessins de logo ne l'aime tout simplement pas. Et ce n'est pas pour moi. Un autre concepteur va créer un meilleur logo. C' est juste leur local pour le moment. Donc, nous avons toutes les choses de base mis en place et je vais juste rapidement le sauver. Et pour ce faire, vous pouvez venir directement ici en haut pour nous sauver ou Shift control ou shift command s. Il s'ouvrira et vous pouvez localiser votre dossier ici en cliquant dessus. Et vous pouvez nommer votre projet ici pendant que je l'ai déjà fait. Et je l'ai appelé notre projet. Et si j'espère dans le avec notre ressource est, vous pouvez voir qu'il est ici, et vous pouvez ouvrir ce fichier à tout moment, il sera terminé, et vous pouvez l'utiliser comme référence Lorsque vous commencez à travailler sur ce projet et , vous pouvez également copier et coller différents éléments de ce fichier et les insérer dans votre nouveau fichier si vous le souhaitez, et vous pouvez également l'utiliser comme guide de référence. Par exemple, si vous avez manqué certaines tailles ou le placement de Mr Image, ou si nous le faisons, par exemple, dans la ville du Royaume-Uni, et que vous vouliez simplement vérifier rapidement si vous avez fait le bon travail, vous pouvez également ouvrez ce fichier et regardez simplement et voyez si vous le coupez correctement. Donc, dans la prochaine vidéo, nous allons commencer à créer notre écran d'accueil et je vous y verrai. 9. Créer des Wireframes 1: Avant de commencer avec le travail de conception, faisons rapidement quelques choses de base. Donc, je veux inclure la barre d'état ainsi que l'indicateur d'accueil en bas. Si vous vous souvenez, c'est ce que nous avons fait quand il a créé nos modèles imprimables. Donc juste que nous pouvons savoir où sont les limites r n à partir de quels domaines nous pouvons concevoir à. Donc, je vais sauter dans un autre fichier et les copier parce que je les ai déjà créés dans ce fichier et simplement faire commande de contrôle v toe, les baser à l'intérieur et si nous zoomons un peu plus près, vous pouvez voir à quoi ils ressemblent. Donc, voici notre barre d'état Tout transféré en tant que composant, vous pouvez également faire un clic droit dessus et faire sur le composant de lien parce que cela va créer un composant juste ici à ce fichier. Vous pouvez également faire un clic droit ici et en tapant delete, ce qui supprimera le lien vers le composant d'origine dans le fichier que j'ai créé, qui n'est pas ce fichier. Donc, ce que nous pouvons faire maintenant avec cette sélection est frappé commande K, qui va le créer ici. Maintenant, cela signifie que c'est le composant d'origine à l'intérieur de ce document plutôt que le composant copié et collé à partir d'un autre document externe. Donc, ce que cela signifie est que tous les changements que vous apportez à l'intérieur de ce document, qui est appelé notre projet de ce diamant vers l'avenir, seront conservés à l'intérieur de ce document et non dans le document original à partir duquel je copié ceci. Nous pouvons faire la même chose avec l'indicateur d'accueil si vous le souhaitez, mais nous allons simplement le copier et le coller à l'intérieur de chaque fichier. Donc, ce que nous allons faire ensuite est de sélectionner les deux de sorte que vous pouvez simplement faire une sélection rapide comme si frapper le contrôle ou la commande. Tu vois ? Zoom arrière un peu, sélectionnez tous les autres tableaux d'art et appuyez simplement sur le contrôle V. Il va les coller à l'intérieur de tous ces aéroports au même endroit que ce 1er 1 Et c'est un excellent ajout à d'autres B, X, D et grand avenir d'avoir, parce que si vous avez plusieurs objets répétitifs à l'intérieur, tous sont pauvres, vous pouvez simplement les copier et les coller, et il les placera exactement au même endroit qu'ils étaient dans le premier. Notre port. Ensuite, nous allons créer une barre supérieure. Et pour ce faire, sélectionnons rapidement quelques icônes. Donc, ce que nous allons avoir besoin dans ce cas est menu éveil icône de recherche ainsi que l' icône de retour . C' est pourquoi je les ai créés, et vous pouvez rapidement les sélectionner. Donc contrôle. Tu vois, on leur a dit. Sélectionné appuyez sur Contrôle V sur ce premier écran sur l'écran d'accueil. Maintenez le décalage. Il a déplacé jusqu'à la gamme, comme ainsi et placé dans 20 pixels vers le bas. Donc, maj et flèche du bas vers le haut, sélectionné celui-ci. Placez-le sur le bord, ou vous pouvez simplement cliquer ici. N' importe quoi. Piece orteil sur le bord gauche. Faites de même pour une barre de recherche sur le bord droit et pour la recherche Hold shift et la flèche gauche . Donc 12 pour le déplacer. 20 pixels à partir de ce bord et pour le menu. - Merde. Vous voulez flèche droite orteil Ce bord faire la même chose que pour ces sacs à provisions. Tout le quart de travail se place comme ça jusqu'à ce que le quart de viande ait quitté la flèche 12 Et c'est pourquoi nous avons créé icônes parce que cela rend notre travail beaucoup plus facile au début. Ensuite, nous allons copier notre logo. Contrôle sélectionné, Voir Cliquez sur blanc ici, contrôle V. Cliquez ici pour le positionner au milieu, puis déplacez-le simplement jusqu'à ce qu'il soit au milieu. Comme ça. Si vous ne le pouvez pas, vous pouvez sélectionner ces deux et simplement cliquer ici et il les déplacera tous à l'intérieur de la même ligne. Donc, ensuite, je vais les sélectionner tous, appuyer sur le contrôle ou la commande g pour les regrouper, cliquez ici et cliquez sur terne et nommez-les. Jamais bar centre, et je vais les commander un peu mieux. Donc maintenant la barre vient juste en dessous de la barre d'état et je ne peux pas contrôler. Voir. Cliquez ici, Contrôle V. Et c'est de ça que je parlais. Il les basera exactement au même endroit que sur le premier écran. Cela rendra votre travail beaucoup plus facile plus tard sur la route. Maintenant, avant de faire tout autre travail, sélectionnons rapidement les couleurs pour le projet. Donc, je vais simplement créer des rectangles aléatoires enlevés bordure et nous allons avoir besoin de cinq couleurs. Donc, contrôlez en effet. Maintenez le contrôle de changement D maintenez le décalage. Juste pour le déplacer en dessous du contrôle D maintenez le décalage et le déplacer. Et enfin, une fois de plus, contrôler D Now pour son 1er 1 clic ici. Nous allons taper zéro B zéro B zéro b zéro b présentateur. Ce sera une couleur sombre pour ce prochain, nous allons utiliser 858585 percenter pour ce prochain, nous allons utiliser 717171 percenter pour celui en dessous. Nous allons utiliser le centre de presse E B E B E B B E B Et enfin, pour celui-ci, pour celui-ci, nous allons utiliser F f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f nous allons utiliser F f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f Et maintenant que nous avons fait cela, nous devons les créer en tant qu'atouts. Sirkin, cliquez ici. Cliquez sur cette couleur et cliquez ici. Cliquez sur cette couleur cliquez ici, juste ici sur le plus et enfin sur le plus. Et ce que j'aime faire est d'élire l'endroit des couleurs plus sombres en haut et des couleurs plus claires en bas afin que vous puissiez inverser le processus. Vous pouvez d'abord sélectionner le blanc, puis passer en haut et ensuite nous avons créé nos couleurs ensuite. Nous allons créer notre front, donc je vais sélectionner Ce sont pauvres taper T clic juste ici taper,par exemple, par exemple, Démarrer le contrôle de partage e A select open sense à partir d'ici. Si vous ne l'avez pas, vous pouvez également l'installer. C' est un front Google gratuit, et si vous utilisez des téléphones Adobe, vous pouvez également le trouver là. Il suffit de l'installer et vous serez prêt à partir. Notre laisser un lien dans le pdf, et vous pouvez également accéder à tous ces liens orteil le téléphone envoyé aux images, et vous pouvez également trouver quelques autres. Une ressource est que je vais lier à l'intérieur de ce fichier. Alors les premières choses d'abord. Choisissons 18 d'ici. Percenter. Ça va être semi gras, alors choisissez un demi-bol d'ici, et ce sera cette couleur. Maintenant. Nous allons l'utiliser pour nos en-têtes afin que vous puissiez cliquer ici pour créer un nouveau style de personnage . Ensuite, je vais dupliquer tellement contrôlé déplacer profond juste en bas, et je vais utiliser un régulier, et je vais sélectionner cette couleur, qui va être notre âge pour tout le texte. Et enfin, nous allons réduire sa taille. Alors sélectionnez ici à 14% et nous allons orteils utiliser cette couleur pour ainsi dire. Cliquez ici pour créer un autre style de personnage. Et c'est tout pour ce projet parce que nous allons seulement utiliser ces outils styles de caractères . Dans la majorité des projets, vous allez l'utiliser au moins trois. Et dans la majorité des cas, vous allez utiliser différents téléphones. Mais ce client a préféré le simple regard de cela et a voulu aller avec. Donc, ce que je peux dire est, OK, donc ce que nous allons faire maintenant est de créer un guide pour nous aider afin que vous puissiez sélectionner ceci et à partir de ce bord, suffit de déplacer le guide jusqu'à ce qu'il se rencontre ici, afin que nous puissions savent toujours qu'il est 20 pixels de ce bord et faites la même chose pour cette icône ici. Donc, nous pouvons savoir que c'est 20 pixels de cette recherche, et cela rendra notre travail beaucoup plus facile Done Delilight afin que vous puissiez les sélectionner pour les déplacer ici, et vous pouvez aligner comme ceci et simplement tenir votre flèche du bas les a déplacés, par exemple, à cinq pixels. Et ce qui est double clic ici et taper, par exemple, sont le meilleur partage de voile. Disons quelque chose comme ça, et nous allons créer une image pour aller derrière. Donc, utilisez simplement l'érection un peu et sélectionnez d'un bord à l'autre. Retirez la bordure. Ce que nous allons utiliser, c'est un B E V E B, et nous allons utiliser 375 qui à 16% et nous sauterions dans nos couches, locales tout à fait ici, étant centre d'image et déplacer vers le bas pour entendre. Et commandons rapidement certaines de ces couches. Donc, comme je l'ai dit, cela va aux images supérieures ici, et ce que nous allons faire, c'est aligner pour en faire 20 pixels comme ça. Donc, décalez la flèche du bas deux fois et nous voulons vous faire la même chose pour cela. Donc aligner comme si le décalage 12 et c'est comme ça que nous avons créé notre image. Ensuite, nous allons utiliser une pagination juste ici à la, donc nous allons créer rapidement sur les lèvres. Donc, les hommes comme si vous pouvez créer, par exemple, 10 avec 10 percenter faire un cercle parfait et vous pouvez le dupliquer. Donc le contrôle de déplacer comme, par exemple, 10 pixels de contrôle D avec 10 pixels, comme si le contrôle D et ont quatre, par exemple. Vous pouvez les sélectionner en maintenant la touche Maj enfoncée. Bougez-les jusqu'à ce qu'ils se rencontrent ici. Maintenez le décalage et positionnez-les au milieu comme ça. Et vous pouvez également regrouper ceci et ensuite positionner ceci au milieu si vous le souhaitez. Mais je trouve que cela fonctionne très bien. Et si vous le souhaitez, vous pouvez supprimer les bordures de toutes. Alors faisons ça comme si simplement génial là-bas. Et puis ce que nous allons faire est d'utiliser un sélectionné. Alors cliquez dessus, puis sautez dans nos actifs et cliquez ici pour que nous puissions en faire une sélection. Si vous n'aimez pas à quoi cela ressemble, vous pouvez également faire la bordure sur certains d'entre eux. Mais je pense que ça a l'air très bien. Ce que nous allons faire maintenant, c'est les renommer. Alors peut-être que vous pouvez utiliser circa un au lieu de lèvres un et un cercle, aussi. Puis il a encerclé trois. Et enfin chirurgical pour juste ici. Et puis j'aime que les orteils passent de haut en bas. C' est juste plus logique pour moi. Mais certaines personnes le préfèrent dans l'autre sens. Je sais vraiment mon si simplement prendre de l'imagination et vous pouvez passer avec juste en dessous du texte ici. Ensuite, nous allons créer un texte ci-dessous afin que vous puissiez sélectionner ces deux contrôles d les déplacer vers le bas comme ainsi jusqu'à ce qu'ils rencontrent cette image décalage sur la flèche vers le bas deux fois parce que c'est ainsi que nous l'avons fait avec tous. Donc ici, ce que vous allez écrire est le plus populaire comme ça et ici nous allons écrire sceau parce que ce sera un lien et les gens pourront cliquer sur ce lien et voir tout de cette catégorie particulière. Vous pouvez sélectionner les deux, frapper ici, remorquer les aligner parfaitement. Et ce que nous allons faire maintenant est de sélectionner ce contrôle d'image D hold shift. Je veux l'aimer, et ce que nous allons faire est de créer une rangée de trois images. Donc, nous allons rapidement sélectionner le rayon de coin, en tapant cinq pour que nous puissions faire autour des coins et nous allons taper pour les tailles. Disons 1 35 avec 1 60 comme ça. Alors assurez-vous que vous faites la queue comme alors assurez-vous que c'est 20 pixels comme ça, alors assurez-vous qu'il est 20 pas de contrôle profond, dupliqué une fois de plus, aligné, assurez-vous qu'il est 20 pixels vers la droite et enfin contrôlé le Assurez-vous qu'il est également 20 pièces à partir de la droite, et ce que nous voulons atteindre ici, c'est des déclencheurs de glissement afin que les gens puissent glisser et regarder les zones, qui sont hors de l'écran pour le moment. Et nous allons créer cela un peu plus tard, ou ce que vous pouvez faire est que nous allons simplement en créer un, puis le regrouper et dupliquer. Je vais donc dupliquer ce texte. Dell Creek ici, contrôle type dans un nom, contrôle A. Assurez-vous qu'il est au centre comme ça, et vous pouvez le sélectionner et l'image et vous assurer qu'ils sont tous alignés parfaitement contrôlé le encore une fois. Et ce que nous allons en bas, c'est-à-dire, nous allons introduire un prix. Donc, par exemple, 24 et enfin assurez-vous que tous sont au milieu comme ça et là nous l'avons. Notre groupe est prêt. Et assurez-vous que vous êtes, par exemple, 10 pixels du bas. Nous allons créer ça Like so donc tous sont 10 pixels. Donc d'ici à ici, 10 d'ici à ici. 10. Et enfin, ce que vous allez faire, c'est les regrouper tous. Sélectionnez donc les trois en maintenant le contrôle G pour les regrouper. OK, tout à fait ici et tapez l'image Un peut-être. Et maintenant, nous allons utiliser control de pour le dupliquer et placer, comme si 20 pièces pour écrire le contrôle D et déplacer ce 1 20 pixels ainsi. C' est donc notre image. Trois. C' est notre image et enfin c'est notre image. Donc, nous voulons juste les commander un peu mieux. Donc, ils ont plus de sens sur la route. Alors sélectionnez-les tous, déplacez-les juste en dessous. Ici. Aussi plus populaire et voir tous les déplacés juste au-dessus de ceux-ci, de sorte que tout cela a beaucoup plus de sens. Vous pouvez aussi les regrouper tous, et nous allons le faire maintenant. Donc sélectionné, comme si le contrôle. Assurez-vous simplement que vous les avez tous sélectionnés. si robuste, notre chaise et notre joint les plus vendus devraient être en bas comme donc maintenez le contrôle de changement de vitesse. G. Ne pas tout à fait entendre peut-être taper héros, parce que c'est une image de héros ou sont curseur. Et pour ceux-ci, peut-être que nous pouvons contrôler G et les nommer, par exemple. Le plus populaire Et ce que nous voulons faire maintenant est de créer une autre section que nous allons nommer une combinaison de pièces. Donc, contrôlez simplement D sur celui-ci et déplacez celui-ci vers le bas. Donc sélectionné et pour une raison quelconque, il ne bouge pas. Oui, on doit le bouger comme ça. Donc, déplacer deux fois la flèche du bas et maintenant la déplacer. Juste souffler et ils vont frapper ici et taper des combinaisons de pièces. Et pour celui-ci, ce que nous voulons faire est de supprimer les prix, donc supprimer le prix, supprimer le prix. Et enfin, à partir de celui-ci, vous pouvez entrer comme ça et supprimer le prix et vous pouvez sélectionner les noms. Donc premier contrôle de trou contrôle tout l'a déplacé vers le bas jusqu'à ce qu'ils se rencontrent à la fin, comme ainsi et décaler et monter notre pour que vous les faites 10 pixels vers le haut. Maintenant, ce seront les noms de nos chambres, et ce sont les produits les plus populaires. Maintenant, enfin, je veux créer rapidement une section de plus, et pour ce faire, je dois étendre la hauteur de cette œuvre d'art. Et pour ce faire, vous pouvez simplement sélectionner votre port et l'étendre autant que vous en avez besoin. Faisons-le comme ça pour l'instant. Et nous allons rapidement déplacer l'indicateur d'accueil vers le bas. Et ce que nous voulons faire est de dupliquer cette fois de plus. Donc contrôler d maintenir le décalage avec celui-ci jusqu'à ce qu'ils se rencontrent en haut comme si le contrôle, le genre de décalage et la flèche du bas deux fois. Et ce que nous voulons écrire ici, c'est notre processus. Et ici, nous voulons faire campagne lire plus parce que les gens pourraient être intéressés par le processus de cette entreprise et comment ils font leurs pièces et ils peuvent lire plus. Mais ici, nous allons créer une vidéo et faire ça. Donc, nous allons rapidement renommer ces. Donc ce sont les combinaisons de Rome, et cette dernière est notre processus, et nous allons les supprimer pour en laisser une seule sur le groupe, comme si rapidement pour nommer parce que nous n'en avons plus besoin. Et pour celui-ci, ce dont nous avons besoin est 335 avec 178 centre. Et ce que nous voulons faire, c'est le positionner au milieu des années 80. Au milieu. Comme vous pouvez le voir, il touche le guide gauche remplacé ainsi que le guide droit placé. Assurez-vous que c'est drôle. images du texte comme ainsi et ce que nous voulons faire est d'inclure une autre icône, donc nous voulons inclure Afficher Icône Donc contrôle. Voir sauter en vue Contrôle v Toute personne pour renommer cela de l'image à la vidéo et utilisé pour jouer. Je ne peux pas bouger. Il est juste en bas, et vous pouvez sélectionner les deux et simplement faire comme ça, et il sera endroit pour jouer. Je ne peux pas au milieu. Et enfin, ce que nous voulons faire est de déplacer ceci vers le haut et de le déplacer 20 pixels vers le bas. Donc déplacer d'ici demain, puis enfin, 10 pixels de plus et puis cliquez sur notre partie. Vous pouvez zoomer beaucoup plus près afin que vous puissiez être sûr et qu'il se clipse au bon endroit comme ça. Donc déplacer la flèche vers le haut, et c'est notre écran créé. Comme vous pouvez le voir, c'est vraiment facile parce que beaucoup d'éléments se répètent eux-mêmes et vous allez voir dans les prochaines vidéos comment tout cela va être beaucoup plus rapide maintenant que nous avons au moins quelques éléments placés sur notre page . Et nous allons utiliser ces gars beaucoup plus parce que j'ai trouvé qu'ils sont vraiment utiles parce que vous pouvez placer différents guides et différents écrans si vous le souhaitez. Mais ce qui est encore plus important, c'est que vous pouvez copier le placement de ces guides et les coller où vous le souhaitez sur n'importe quel écran. Donc, dans la prochaine vidéo, nous allons commencer avec l'écran de catégorie, et je vais voir là. 10. Créer des Wireframes 2: Commençons donc par l'écran des catégories. Et avant de le faire, cliquez sur Accueil clic droit, localisez les guides, puis copiez simplement les guides. Cliquez ici, cliquez avec le bouton droit sur les guides et les guides basés et le mal basé les guides dans exactement la même position que sur le premier écran. Ce que nous allons faire ensuite est de sélectionner ces deux textes afin que vous puissiez maintenir votre touche de contrôle pour sauter à l'intérieur de la touche Contrôle du dossier. Encore une fois, Contrôle. Voyez, cliquez ici, Contrôle V et ce que nous allons orteils juste ici est jusqu'à présent. Et ici, nous allons écrire en 129 articles parce que ce sera un écran de catégorie. Et une fois qu'ils ont localisé la catégorie, il leur sera facile de naviguer car ils verront combien d'articles il y a à l' intérieur de chaque catégorie. Et peut-être que nous pouvons déplacer ce 40 pixels vers le bas juste pour que nous puissions avoir un peu plus d'espace entre notre nab notre et nos articles et une fois de plus déplacé dans une barre et barre indiquée en haut. Ensuite, nous allons copier ça, Jodi, Jodi, déplacer comme ça et nous sommes allés écrire le contrôle des prix une fois de plus et le déplacer vers le haut de 10 pixels. Donc nous allons l'aligner parfaitement comme cellule et ensuite déplacé 10 pixels. Double-cliquez ici et tapez le tri par car c'est ce qu'ils vont utiliser pour trier ces éléments. Et ce que nous allons faire est de sélectionner la flèche vers le bas. Voyez, bougez ici, Contrôle V. Et nous allons en position d'orteil qui descend Arrow Toby aligné sur notre prix comme ça. Et nous allons le déplacer jusqu'à ce qu'il rencontre nos guides. Déplacez le prix et maintenez le décalage et déplacez-le de 10 pixels vers la gauche, puis choisissez le tri par. Aligner avec le prix comme ainsi et une fois de plus, ne tendent parce que. Ou vous pouvez même l'aligner avec le bord supérieur de ce texte si vous voulez l'aimer. Mais j'ai trouvé que ça fonctionne exactement de la même façon dans l'autre sens. Donc, c'est 10 pixels stand pixel pixel pixel stand, tam pixels partout, le même espacement. Et cela rendra plus facile pour les développeurs plus tard le travail orteil sur votre conception. Ensuite, nous allons sélectionner cette image pour une fois de plus vous pouvez garder le contrôle. Sautez en vue. Utilisez l'image et vous pouvez également l'utiliser dans ces deux textes. Donc, contrôle, voir sauter juste ici, Contrôle V et on va aller aux pieds. Alignez-le comme ça. Et peut-être que nous pouvons maintenant le déplacer de 20 pixels vers le bas de ce texte. Donc décalez la flèche du bas deux fois. Et maintenant, on va sauter. Déplacez-les, Toby, A gauche, alignés. Et ce que nous allons faire maintenant, c'est la position comme ça. Donc, vers le haut et maintenez le décalage les déplaçait 10 pixels à gauche, a commencé à droite et vers le bas et faire exactement la même chose pour ce prix. Donc simplement, Nate, déplace-le comme ça et place-le 10 pixels vers le bas. Ou si le manger est un peu trop, maintenez simplement votre flèche supérieure et avec cinq pixels vers le bas et vous allez le tester un peu plus tard, maintenant nous allons l'agrandir. Donc ça va être, euh, 1 57 avec 1 80 comme ça. Et ce que nous allons faire maintenant, c'est les regrouper tous. Alors assurez-vous que c'est en haut. C' est en bas. Maintenez enfoncée la commande de changement de vitesse G et saisissez , par exemple, l'élément un. Et ce que nous allons faire maintenant, c'est commander certaines de ces couches parce qu'il continue à mettre le calque haut. Ça m'ennuie vraiment, mais pour autant que je sache, tu ne peux rien y faire. Donc, vous pouvez tenir ce contrôle G et peut-être en tapant trier par le centre droit. Et on va placer ça ici. Alors j'en ai pris un. Et ce que nous allons faire maintenant est de les remplir tous et de créer six, par exemple, si contrôlé d déplacer juste ici et sélectionner tous les et contrôler et d Donc 20 pixels, comme si le contrôle D 20 pixels comme si Et nous avons créé un grand off six articles. Maintenant, on va le commander. Donc article un élément à et ceci est le bit ennuyeux. Mais si vous voulez être précis pour vos développeurs un peu plus tard et couper votre travail court parce que vous n'allez pas orteil être sauter et sortir et communiquer avec le développeur sur éléments inutiles, alors je vous ai vraiment recommandé de nommer tous vos tous vos groupes ou vos actifs, car ce sera beaucoup plus facile pour vous que de travailler sur et pour vos développeurs de le comprendre . Et le diable ils ne vous dérangeront pas parce qu'il sera vraiment simple pour eux de naviguer parce que tout est nommé correctement. Tout est nommé dans l'ordre et plus tard sur la route, quand le code qu'ils vont revêtir comme vous lisez, fondamentalement si de haut en bas de la gauche, à droite. Il est donc très facile de les optimiser à l'avance, puis juste pour leur donner les fichiers finaux . Et il vous aimera pour cela parce qu'il réduira une journée de travail aussi courte. Ensuite, nous allons créer des filtres de recherche et je vous verrai dans la prochaine vidéo. 11. Créer des Wireframes 3: Commençons donc par notre écran de filtres de recherche. Et la première chose que je vais faire est de sélectionner la barre de collation Contrôle D. On est là. Désolé. Je devrais utiliser le contrôle, tu vois ? Et puis contrôler profondément et ce que je vais à la prochaine est sélectionner, loué pour contrôler C Control D ici. Et je vais utiliser le canapé une fois de plus. Contrôle D et je vais le déplacer ici. Ensuite, je vais sélectionner l'icône X ou les vêtements que je peux à partir d'ici. Contrôle. Voir sauter à cet écran Contrôle V et je vais le positionner comme ça. Donc au milieu, c'est un bar d'air. Faites-le les vêtements en vue et, par exemple, sélectionnez les vêtements et le menu et assurez-vous aligné parfaitement. Baisse fermer. Supprimez notre nab parce que nous n'en avons plus besoin. Et ce que nous allons faire ensuite est juste. Cliquez ici. Utilisez des guides. Et peut-être que nous pouvons simplement faire un clic droit ici. Non. Donc, nous devons choisir le nom, non ? Cliquez sur les guides. Copier les guides. Cliquez ici. Guides basés gars afin que nous puissions utiliser les mêmes guides et assurez-vous que vous déplacez les vêtements ici jusqu'à présent est aligné correctement. Mais nous allons doubler tout à fait ici et taper des filtres parce que ce seront nos filtres. Et les utilisateurs condamnent filtrer ce qu'ils veulent que les éléments montrent. Donc la première en ligne va être la couleur, et je vais déplacer ça un peu vers le bas. On n'en a pas besoin pour le moment. Donc, ce que nous voulons, c'est le déplacer comme ainsi et tout le changement. 1234 Pour que vous puissiez vous déplacer avec 40 pixels vers le bas comme ça. Et nous allons utiliser ces deux flèches pour que vous puissiez en sélectionner un boulon en même temps. Contrôle. Voir le contrôle V afin que vous ne sautez pas en tout temps. Utilisez cette ligne arabe au milieu pour que vous puissiez toujours aimer les deux aligner comme ça . Et ce que nous voulons est plus avec au milieu du X parce que le X est un plus grand Eichel. Alors placez-le comme ainsi, puis déplacez cette icône juste en dessous. Comme si jusqu'à ce qu'il s'alignent parfaitement contrôlé sur le décalage de la couleur et 12 nous allons les orteils filtrent par prix comme ainsi et maintenant vous pouvez déplacer celui-ci et sélectionner les deux et aligner la flèche. Et ensuite, je vais utiliser ça. Donc, disons, par exemple, 349 control de encore une fois et sur celui-ci, disons 1239 par exemple, sorte que vous pouvez les espacer uniformément et vous pouvez, peut-être même comme ainsi, et nous allons pour les déplacer d'ici. 40 pixels vers le bas, comme ça juste pour avoir un peu plus d'espace. Donc, quand ils sont fermés, leurs 20 pixels séparés et quand ils sont ouverts, ils sont pour ça parce qu'à part juste pour que nous puissions avoir un peu plus d'espace de respiration à côté, nous allons créer un cercle. Alors créez un beau grand cercle. Peut-être 16 avec 16 par exemple, est allé à enlever la bordure et pour la couleur Utilisons dans celui-ci. Ouais, et on va aligner les orteils avec ce texte, ou vous pouvez les sélectionner les deux et vous regardez donc on va sauter dans notre sort de couche une fois de plus, être encerclés, comme, donc contrôlé en profondeur, et assurez-vous que vous êtes au milieu avec celui-ci ainsi et nous allons mettre une sorte de chronologie ah derrière elle. Donc, comment nous allons faire qui est utilisé un rectangle et grandir aller à partir du bord de l'orteil comme si enlever la bordure pour le rayon de coin. On va en utiliser cinq. Et pour la couleur. Utilisons celui-ci, par exemple. Et je pense que ça a l'air bien. On a juste besoin de le déplacer en dessous. Appelons ça une chronologie. Par exemple, en se déplaçant sous le contrôle G sur chacun d'eux. Et vous pouvez même filtrer mes prix. Donc, comme ça et déplacer ce prix vers le haut belle pleuré ici et nous allons taper , par exemple, curseur toute la gamme , comme vous voulez l'appeler. Et à l'intérieur, nous avons deux cercles et notre chronologie. Ou nous pouvons peut-être, par exemple, taper. Arrangez Bijie. Disons comme ça et nous allons tous les regrouper. Sélectionnez donc le prix, sélectionnez cette flèche et sélectionnez tous ces contrôles G et nous allons les regrouper par prix . Ensuite, nous voulons le déplacer jusqu' au bas et commander certains de ces calques un peu vers le haut. Donc la barre des étapes ici, nous sommes allés choisir des filtres et fermer en se déplaçant comme ça. Donc, la flèche et la couleur, on va les positionner comme si le contrôle G. Donc c'est notre couleur. Et nous allons utiliser,par exemple, par exemple, contrôle D sur celui-ci et le déplacer vers le bas. Juste une touche. Alors maintenez le décalage jusqu'à ce qu'ils s'alignent avec le fond de nos cercles comme ça. Alors décalez 1234 et nous sommes allés utiliser des matériaux comme ça. Et nous avons besoin d'une flèche vers le bas juste ici pour que vous puissiez cliquer à l'intérieur du contrôle, voir et sauter à l'intérieur des matériaux frapper le contrôle V et ensuite nous allons déplacer cette flèche comme ceci jusqu'à ce qu'elle s'aligne avec notre flèche vers le haut. Donc, comme ça exactement. Et on va aux pieds. Placez-le comme si supprimez, flèche comme ainsi Et ce que nous voulons créer un aperçu est quelque chose comme une sélection rapide. Ainsi, ils peuvent sélectionner, par exemple, caillot de lettres, d'autres matériaux, par exemple, Sky ou n'importe quel matériau il y a sur l'offre, et nous allons avoir besoin des piles. Donc contrôlez profondément, déplacez-le en dehors du dossier. Et une fois de plus pour aimer ces matériaux, vous voyez pourquoi il est important de nommer tous vos calques et groupes, alors laissez-le en vue et en position. C' est comme ça et en vérité c'est une question parce que nous voulons créer un cadre. Donc, double-cliquez ici en tapant une lettre et contrôlez D et déplacez-le comme ça. Et peut-être qu'on veut créer un caillot comme celui-ci. Donc, ce que nous voulons est de créer notre rectangle autour afin que les gens puissent le sélectionner, et quand ils le feront, il créera un rectangle de base autour d'elle. Alors peut-être que nous voulons créer un rectangle comme celui-ci et peut-être taper. Par exemple, 80 ma dinde. Disons que nous allons supprimer la couleur de remplissage et que pour la bordure, nous allons utiliser la même couleur. Et maintenant, nous allons positionner la lettre comme ça et comme ça. Donc c'est au milieu sur tous les sites, et maintenant nous allons utiliser ces deux-là. Alors appelons-le un cadre et une lettre et le tissu pour battre juste en dessous. Donc ces deux le sélectionnent, déplacez-les jusqu'à ce qu'ils rencontrent notre texte, comme pour les pixels vers le bas et utilisez le caillot et positionnez-le au milieu et peut-être même déplacer. Voyons comme ça 1234 pièces à droite et ensuite, nous avons besoin de deux autres sections. Donc, nous allons utiliser la couleur si contrôlée en profondeur et nous n'avons pas besoin de créer une autre instance de celle-ci, donc nous pouvons utiliser exactement la même instance. Alors utilisez la couleur. Mais pour une raison quelconque, il a sélectionné le texte. Laisse-moi le réparer rapidement. Donc, à l'intérieur de la couleur, nous avons un contrôle Barroso profond. Je suis allé le déplacer jusqu'à ce qu'ils rencontrent la lumière ici. 1234 Et ça va être notre lavable. Le produit est-il lavable ou non ? Ce qui signifie plus La capitale à l'avant comme ça et nous avons besoin d'une instance de plus. Donc contrôlez D et voulez déplacer celui-ci. Donc jusqu'à ce qu'ils se rencontrent, comme si un outil, si vous vous souvenez parce qu'il est fermé, pas ouvert. Et ce ne sera pas un mécanisme. Donc, par exemple, parce que nous avons choisi le canapé ici, est-ce que ce sera un mécanisme ? Tu peux te rétracter ? Sont l'effondrement ou quelque chose comme ça, ou est juste canapé fixe et vous obtenez ce que vous avez payé pour. C' est ça. Vous ne pouvez pas le déplacer. Vous ne pouvez pas l'étendre ou le placer autrement. Donc, c'est fondamentalement ce qui est le mécanisme est que j'ai été rapidement Vérifiez si ceux-ci en ligne. Oui, ils le sont. Et une dernière chose est pour nous de commander des jours et de créer le fond. Alors commençons par le haut avec des filtres à air, nous avons fermé. couleur est le premier prix est le deuxième matériau est le TERT et cela devrait être lavable, comme ça Et enfin, c'est un mécanisme comme ça et une dernière chose. Nous voulons créer un bouton ici. Donc, on va utiliser tout l'esprit comme pour qu'on aille aux pieds. Choisissez cette couleur parce qu'elle est agréable et boulon, nous allons taper Bt N, qui est court pour le bouton, et nous allons le positionner, par exemple, pour les pixels. Mais nous allons d'abord utiliser les dimensions ce qui est utilisé ? 335 avec 50 et je vais utiliser cinq pour le rayon de coin. Et puis je vais le déplacer 40 pièces sur cet indicateur de la maison, et enfin je vais avoir besoin d'un seul texte. Donc, nous allons utiliser des filtres texte si contrôlé profond, plus écrit vers le bas et peut-être, par exemple, traiter comme ça plus en vue, ces filtres resteront au sommet. Cela restera au fond comme ça, et ce sera des blancs. Pas de perspicacité rapide et nous allons écrire, Appliquer la joie de sélection. Assurez-vous qu'il est au centre et assurez-vous que vous le positionnez comme ainsi et comme ainsi afin qu'il soit parfaitement au centre et que vous pouvez également regrouper. Il est donc contrôle D bas, et c'est tout pour notre écran. Comme vous pouvez le voir, c'est vraiment assez simple parce que toutes ces sélections se répètent le plus onction sur Non seulement cela, évidemment, mais n'importe quel logiciel est qu'il met toutes les couches en haut. Je ne sais vraiment pas si vous pouvez réparer une partie de cela et si vous pouvez les commander d'en bas. Mais dans tous les cas, même si vous pouvez, dans la majorité des cas, vous avez remorqué, les commander vous-même, donc c'est le bit le plus long. Si vous voulez rester propre n rangé. Si vous ne le faites pas, c'est vraiment à vous de choisir. , Par exemple, s'il effectue des fichiers d'exercices pratiques ou que vous envoyez des fichiers à un client et que vous souhaitez passer plus de temps à la fin avant la livraison finale au client. Alors c'est bon. Vous n'avez pas besoin de nommer toutes vos couches et de les positionner comme je l'ai fait tout au long de ce projet . Mais il est vraiment préférable si vous le faites parce que les développeurs ou vous aiment et il va couper votre travail court plus tard quand il vient le temps de livrer des fichiers finaux de type final à votre client et à leurs développeurs dans la prochaine vidéo, Nous allons concevoir un écran combiné de chambre, donc je vous y verrai. 12. Créer des Wireframes 4: pour le mauvais écran de combinaison. Tout va être un très simple Alors cliquez sur les filtres de concert. le bouton droit. Vous copiez des guides, non ? Guides basés sur les clics. Parce que nous allons utiliser les mêmes guides. Cliquez ici sur l'icône de vêtements Contrôle C contrôle ici. Et ensuite, on va l'utiliser en retour. Contrôle de flèche. Tu vois ? Sauter à l'intérieur. Cliquez ici. Contrôle V. Et nous sommes allés le déplacer comme ça. Soto, ce bord gauche et ce cerf-volant gauche et nous voulons l'aligner avec notre icône de vêtements. Donc ça ne le fait pas comme ça. Assurez-vous qu'il est 20 picks est du haut, et enfin nous allons supprimer notre icône de vêtements. Donc, c'est vraiment simple. Vous déplacez simplement ces éléments et les utilisez tels qu'ils sont. Nous allons donc faire la même chose pour les filtres. Alors contrôlez, voyez, contrôlez le droit ici, assurez-vous qu'il est 40 pixels vers le bas. Donc 1234 adulte comme ici, nous allons parler d'être salon parce que cette pièce va être notre salon contrôle D et faire une autre copie. Et ici, nous allons écrire dans les produits utilisés comme ça parce que maintenant nous allons créer une carte que nous allons afficher nos produits qui sont utilisés à l'intérieur de cette combinaison de pièces . Alors maintenant, nous allons créer un arrière-plan. Donc, utilisez un rectangle. J' ai enlevé la bordure et pour la couleur de nous allons utiliser cette couleur E b e p, et nous allons utiliser cinq pour le rayon de coin et pour les dimensions vous permet de rue 10 avec 1 80 par exemple, nous allons le mettre Donc par exemple, 40 pixels vers le bas comme ça. 1234 Et nous allons utiliser 20 pièces pour ce texte. Alors 12, nous avons besoin d'un texte. Alors, allons vite sauter ici. Sélectionnez ces textes ou contrôle, Voir sauter ici. Contrôlez V et vous pouvez les placer ici. Ce que nous voulons, c'est créer un nom pour le produit, donc le nom et le public ici, et ce sera un prix. Donc, par exemple, il est juste utilisé 24 pour l'instant. Ensuite, nous pouvons utiliser ces cercles. Donc contrôle, voir fermer tout ce contrôle V et juste juste placé cercle juste ici et ce que nous voulons est oui, Utilisons celui-ci pour le 1er 1 contrôlé le et peut-être 20 pixels contrôlé le peut-être 26 point ceci et je veux simplement créer des couleurs différentes. Donc il a utilisé un peu de couleur brunâtre, comme si peut-être. Et enfin, pour celui-ci, utilisons une couleur rougeâtre. Alors peut-être comme ça ? Ouais, je pense que ça a l'air bien. Et ce que nous voulons, c'est les espacer uniformément. Donc positionnement comme ce décalage 12 et faire la même chose pour le prix. Donc, décalez 12 vers le bas, puis vous pouvez tous les sélectionner afin qu'il puisse sélectionner tous les cercles, contrôler G, sélectionner l'arrière-plan et simplement faire comme ceci afin que vous puissiez les positionner juste au milieu . Maintenant, vous pouvez double-cliquer ici et en tapant quatre,par exemple, par exemple, parce que c'est l'information de base sur nos produits. Donc nous allons taper la couleur trois, déplacer vers le bas. Ça va être un appelant. Ça va être de la couleur aussi. Et enfin nous sommes allés mettre un nom juste ici. Prix en bas ci-dessous. Comme vous pouvez le voir, juste comment il est commandé. Cela va être BG ou vous pouvez l'appeler carte BG si vous voulez Peut-être mettre ne pas la ligne comme ça. Et enfin, nous allons placer toute cette barre d'état vers le bas en haut. Donc, flèche arrière va être juste en dessous de la barre d'état de l'utilisation des produits va être juste ici et salon juste ici. Donc maintenant que nous avons cela, nous avons juste besoin d'un ordre de place pour notre image et de faire vous pouvez simplement dupliquer ce si public aidc RPG dire tout à fait entendre cette image et vous pouvez choisir collier blanc comme ainsi et pour les dimensions. Utilisons 1 40 avec 1 62% et nous allons en position des orteils au milieu comme ça et peut-être le déplacer . 10 pixels comme ça. Maintenant qu'on a notre carte, on peut regrouper tout ça. Donc contrôler G carte de frappe un et vers le haut de contrôle D et vous pouvez déplacer, défausser si vous voulez, alors déplacez-le comme alors assurez-vous qu'ils alignent et ne déplacer flèche droite deux fois de sorte que vous avez 20 pixels font partie. Maintenant, cela va être une carte aussi, et cet écran est terminé donc maintenant nous allons utiliser Lorsque nous commençons à concevoir cet écran, nous allons utiliser une dimension d'arrière-plan pour remplir l'intégralité hors de l'écran, et nous allons utiliser produits séparés à l'intérieur de ces images. Ce seront les noms des produits à l'intérieur des images et les prix ainsi que les couleurs. Et les gens peuvent cliquer ici, et cela les mènera à l'élément sélectionné s'ils le souhaitent. Et à partir de là, ils peuvent avoir le chariot à orteils s'ils le choisissent. Donc, dans la prochaine vidéo, nous allons concevoir l'élément sélectionné et l'élément sélectionné ajusté écrans parce qu'ils sont fondamentalement deux sur exactement le même écran et ils ont juste quelques éléments différents entre eux, alors voyez là. 13. Créer des Wireframes 5: Commençons donc avec les éléments sélectionnés écran. Alors, cliquez sur celui-ci. Guides, guides de copie, élément sélectionné, guides basés sur un clic droit. Et ce que nous voulons, c'est sélectionner cette flèche. Donc, contrôlez C contrôle V parce qu'il va être exactement au même endroit. Et puis vous pouvez sélectionner tout ce contrôle. Voir, Contrôle V et puis je suis les groupes et juste laisser sur l'icône des commandes en place, Vraiment tous les autres, et simplement déplacer jusqu'à ce qu'il rencontre notre guide. Commandez-le un peu mieux. Comme si déplacer Cities bar en haut. Et ce que nous voulons faire maintenant, c'est sélectionner du texte pour que vous puissiez sélectionner ces deux textes. Par exemple, Contrôle, voir sauter ici. Contrôle V. Et on peut les laisser comme ça pour l'instant. Cette semaine, ici. Il écrit le nom du produit ici. Nous allons écrire dans une ligne de texte pour non, et nous pouvons le déplacer. Ainsi, par exemple, 10 pixels vers le bas contrôlés en profondeur. Faites une autre copie comme si 10 pixels vers le bas. Et ça va être notre prix. Donc sur 24 par exemple, et peut-être que nous pouvons les commander un peu mieux, comme ainsi l'a déplacé vers le bas ici. Et ce que nous voulons faire maintenant est de créer une image, et nous pouvons créer une image en utilisant un rectangle et juste la positionner un peu mieux, comme ça, assurez-vous que c'est 375 qui est le poids de notre écran supprimé. Border saut juste ici pour les actifs va être la couleur CB disant, pour toutes nos images, Belka tout à fait ici taper l'image. Ou vous pouvez taper une image de héros , par exemple, et B. G parce que cela va juste être un arrière-plan et nous allons placer une image PNG dessus , qui est l'image sans fond, et vous allez voir à quoi ça ressemble. Une fois que nous arrivons à la partie de conception hors de ce cours, assurez-vous qu'il est 468 et la hauteur comme ça, et assurez-vous de le déplacer 20 pixels de ces icônes comme ceci et assurez-vous que vous faites la même chose pour ces textes. Donc peut-être avec 20 pièces comme ça maintenant, nous allons avoir besoin d'étendre ce notre port tout le chemin vers le bas, et vous pouvez le faire par exemple, 1706 Il va être suffisant et déplacé indicateur de la maison vers le bas comme si Suivant. Ce que nous voulons créer est une couleur d'une taille et peut-être écrire quelque chose comme sur le produit juste ici afin que vous puissiez utiliser exactement ce même texte si contrôlé D et positionner 40 pixels vers le bas d'ici. Double-cliquez à l'intérieur et en tapant la couleur, et nous voulons copier ces couleurs afin que vous puissiez sauter à l'intérieur de la carte. Une info. Et peut-être qu'on devrait les regrouper et qu'ils l'ont nommé pour colorier et faire de même pour l'autre carte. Donc sauter à l'intérieur contrôlé G pas vite. Et c'est pourquoi je continue de dire qu'il est vraiment important de nommer tous vos calques et groupes, car il sera très facile pour vous de naviguer un peu plus tard quand vous avez vraiment beaucoup, alors sélectionnez-les tous, les a regroupés et les a déplacés comme si ensuite nous voulons créer une taille afin de contrôler d déplacer, et juste en dessous donc 1234 Le aperçu de la semaine. J' ai la taille des haricots et faisons un de plus et 1234 ce que nous allons écrire ici est sur le produit et ci-dessous. Nous allons écrire quelques informations sur le produit. Mais avant de le faire, sélectionnons rapidement cela afin de contrôler. Voir contrôle. Nous sommes ici et peut-être que nous pouvons créer quelque chose comme 49 centimètres parce que ce sera pour la chaise. Et peut-être que nous pouvons taper par exemple, 59 centimètres et nous allons créer un cadre autour d'elle. Donc, nous allons utiliser quelque chose comme, créons d'abord un cadre, puis utilisons quelque chose comme 64 semaines 30. Je pense que cela fonctionne assez bien. Et pour la couleur du cadre, nous allons choisir cette couleur comme nous l'avons fait avant de sauter au calque. Passez tout et taper encadrer votre composition, le texte à l'intérieur du cadre un peu mieux afin que vous puissiez sélectionner le texte et assurez-vous de le positionner au centre comme ceci et comme ceci, Ensuite, assurez-vous de déplacer cela tout le chemin ici et assurez-vous que tout cela est une ligne au centre avec notre taille. Donc avec peut-être 12 et assurez-vous que tous sont dans la même ligne exacte comme ceci. Et une fois de plus, assurez-vous que c'est 40 pixels du haut maintenant avec le cadre sélectionné, alors assurez-vous que c'est comme ça. Donc 1234 et faire la même chose pour le sujet du produit. Parce que maintenant les tailles augmentent parce que nous avons créé ce cadre. Donc 12 et c'est 40 pixels d'ici. Ensuite, nous allons créer une image qui ira juste en dessous afin que vous puissiez soit copier cette image. Donc, les blessés se déplacent avec tout le chemin en bas et pour les dimensions utilisées 375 et peut-être à 16. Et assurez-vous qu'il est de 40 pixels vers le bas du texte. Donc 1234 comme ça. Et maintenant, ce dont nous avons besoin, c'est un autre. Donc un autre titre vous contrôlait. Positionnez-le comme ça et peut-être écrire, par exemple, confortable et élégant, et nous allons déplacer cela vers le bas pour les pixels. Donc 1234 et nous avons besoin d'un texte comme celui-ci si contrôlé d placer ici, comme ça. 12 peut-être, et créer un texte de zone. Assurez-vous que votre zone est tout le chemin de guide à guide et déplacez-le juste en bas comme ceci, et nous allons utiliser le branchement Donc une fois de plus, beaucoup de gypse, Philip Place ou un texte insérer. Peut-être qu'on peut avoir six lignes de texte. Donc 1234 5 et 6 et peut-être mener une fuite juste ici et a fini juste ici. Et peut-être que nous pouvons inclure une image de plus si contrôlée en profondeur et positionner 40 pixels de la même manière . Donc, et pour celui-ci, utilisons différentes dimensions. Donc 335 avec 2 16 disons oui, et assurez-vous que c'est 40 pixels vers le bas, et pour ceux-ci allaient utiliser 0550 Donc ce que nous avons fait là-bas, c'est nous autour d'elle, ces deux coins et ces deux sont restés les mêmes. Donc, enfin, sélectionnez ce contrôle D et avec 40 pièces vers le bas Donc 1234 comme ceci. Et enfin, sourde compréhension rapide tapage conçu avec l'utilisateur à l'esprit quelque chose comme ça. Et Derek, nous avons créé notre écran d'articles sélectionnés. Une dernière chose que je veux faire est de les regrouper tous et de les commander un peu mieux. Donc, nous allons utiliser ceci ceci et ce Control G. J'ai été image de héros parce que cela va encore une fois être notre image principale et nous pouvons déplacer barre d' état et ces deux icônes tout le chemin vers l'image de héros haut juste en dessous. Nous allons sélectionner les couleurs de sorte que la couleur et qui va aller juste en dessous de notre image de héros. Ensuite, nous avons la taille et vous pouvez les sélectionner comme ceci si vous le souhaitez. Donc, contrôlez la taille de frappe G. Déplacez-les ici à propos du produit. Des endroits comme ça. C' est donc notre image. La copie rapide Une copie. Et nous allons placer cette image juste en dessous, confortable et élégant comme ça. Et contrôler G. Cole C et présentateur élégant. Et vous pouvez également regrouper ces deux, donc il suffit de déplacer l'image en haut Contrôle G. Et enfin, cela est conçu avec les utilisateurs dans mon et cet écran est terminé. Maintenant, ce que nous pouvons faire est de double-cliquer ici. L' étendue vers le bas. Supprimez ce droit. Cliquez sur les guides, Copier les guides, faites un clic droit. Je ferais des guides spatiaux. Et maintenant, nous allons tout sélectionner sauf pour la barre d'état et l'indicateur d'accueil ou parce que nous avons supprimé l'indicateur d'accueil. On peut l'utiliser aussi. Alors maintenez le décalage. Sélectionnez tout, contrôlez. vois, en sautant à l'intérieur du contrôle V et tu vas tout placer exactement dans la même position qu'ici. Maintenant, ce que nous allons faire, c'est quand les utilisateurs sélectionnent l'un de ces éléments. Alors, sautons vite à l'intérieur et on va aux pieds. Il suffit de cacher ce cadre parce que nous n'en avons pas besoin. Pour l'instant, il va apparaître dans cet écran afin qu'ils puissent, par exemple, choisir cette couleur et elle va apparaître ici, et cette image va rétrécir vers le haut et un bouton sera introduit à droite ici. Alors commençons par l'image. Donc, réduisons sa taille 2435 percenter. Mais assurez-vous de sélectionner juste l'image pour 35 afin qu'elle n'affecte rien d'autre que l' image elle-même. Donc, ce que nous voulons faire maintenant est de sélectionner cette couleur afin de contrôler D et peut-être augmenter sa taille en maintenant Maj vieux et clic gauche. Et nous allons simplement supprimer et Phil inclure la bordure et peut-être la rendre un peu plus grand , comme si zoom arrière et vous pouvez voir à quoi cela ressemble. La taille est toujours sélectionnée, alors peut-être que nous pouvons les déplacer vers le haut. Et il a organisé ça un peu mieux. Donc 1234 Et ce que nous devons inclure maintenant est le fond. Donc c'est comme celui-là Contrôle. Voir sauter ici, contrôler V et simplement déplacer pour les pixels vers le bas. Donc 1234 Et ce que nous voulons, c'est cacher sur le texte du produit. Vous ne pouvez pas le voir de toute façon, mais juste pour vous assurer qu'il est caché de la vue. 1234 Comme vous pouvez le voir, nous avons 43 pixels maintenant, mais c'est OK parce que nous ne voulons pas fausser aucun de ces pixels plus tard parce que vous voulez juste les garder tels qu'ils sont. Ce bouton apparaîtra dès qu'ils frapperont quelque chose d'ici. Et une dernière chose que je veux faire est juste de m'assurer que ce contrôle de couleur est sélectionné, Voir, parce que je veux utiliser exactement le même calque dans cet écran. Donc contrôler v et assurez-vous que vous êtes au milieu ici au milieu ici, au-dessus de la couleur, aussi. Et cachez-le simplement parce que plus tard, lorsque nous commencerons notre animation, nous allons utiliser les ecstasies adobe, fonction d'animation automatique, et pour que cela fonctionne correctement, vous devez avoir tous les calques dans exactement au même endroit et les nommer correctement parce que cela ne fonctionnera pas comme il se doit autrement. Donc c'est fondamentalement tout pour cet écran. Dans la vidéo suivante, nous allons commencer avec les détails de la commande, et comme vous pouvez le voir, dès que vous avez quelques articles autour de la commande, tout fonctionne beaucoup plus rapidement. Tout a bougé un peu plus vite, et vous pouvez les commander comme vous le souhaitez. Et ça te rendra un travail beaucoup plus facile, donc je te verrai dans les prochains jours. 14. Créer des Wireframes 6: Passons maintenant à l'écran suivant, qui est les détails de la commande. Et ce que nous voulons faire est de sélectionner ce bouton notre contrôle. Voir pour y faire face. Contrôle, nous avons juste là. clic droit, guides copie et guides basés sur des guides de clic droit. Même liquide dans tous les autres écrans. Ensuite, ce que nous voulons est un texte et laisser rapidement trouver le texte que je veux. Ou peut-être qu'on peut juste choisir celui-là. Donc nom du produit et une ligne de contrôle de texte Voir badigeonné ici. Et ce que nous voulons faire, c'est positionner ça comme ça et ici, nous allons écrire au total. Et ici, nous allons écrire des détails de commande comme ça. Et je vais positionner le total ici ou les détails tels qu'ils sont et les placer. 123 40 pixels vers le bas. Ensuite, nous allons créer trois cartes différentes et un bouton ci-dessous parce que nous voulons afficher les orteils qui sont ajoutés à l'intérieur de notre panier. Et voici nos détails de commande. Alors tout d'abord, créons la carte. Donc, je vais rapidement dessiner un rectangle enlevé la bordure. Il était de la même couleur pour tout ça. Alors c'est celui-là. Et donnons-le selon Radius Five et utilisé 3351 47 pour cela et je vais orteil autour de lui. Alors déplace-le ici. 1234 et donné 40 pixels. Tellement gentil Big Gap juste ici. Ensuite, ce que nous voulons est de créer une image à l'intérieur. Donc je vais frapper le contrôle sur D pour dupliquer celui-ci. Je vais le rendre blanc. Il suffit de le réduire un peu et peut-être utilisé les dimensions de 1 40 qui, disons 1 à 2, quelque chose comme la dette. Et nous allons faire comme ça au milieu et positionner ça peut être, oui, oui, 10 pixels de la gauche. Maintenant, ce que nous devons créer ici, c'est le nom, prix et le montant. Donc, je vais simplement sélectionner ceux-ci, contrôler en profondeur pour les dupliquer, puis les déplacer juste en dessous, sauter dans mon orthographe de calque juste pour que je puisse voir ce que je fais. Je vais déplacer ces deux-là vers le bas, et nous allons commencer à les commander en juste une seconde, mais son premier rapidement créer un nom qui serait le nom de nos produits. Ça va être le prix de Sula. Choisissez 24 par exemple, Et enfin juste ici. Nous allons créer un cadre simple avec le numéro à l'intérieur ainsi que la flèche. Donc, je vais en utiliser un. Et ce qu'il nous faut, c'est une flèche vers le bas pour qu'on puisse sauter ici. Sélectionnez le contrôle de flèche vers le bas, Voir, Sauter en arrière dans le contrôle, repris, badigeonné et nous pouvons les positionner dans la même hauteur. Donc, comme ça et ce que nous devons créer maintenant, c'est ce cadre. Et pour ce faire, ce sera vraiment un cadre simple. Donc, nous allons utiliser un rectangle pour et créer un cadre simple sans sentir juste la couleur de bordure et pour la couleur de bordure. On peut utiliser cette couleur ici. Maintenant, pour le cadre, nous pouvons utiliser, exemple, la dinde par 30 quelque chose comme ça. Tellement gentil, grand. Et on va se faire deux amis. Alors contrôlez D et assurez-vous qu'ils se chevauchent juste ici. Donc pas comme ça côte à côte, mais donc ils se chevauchent et nous ne voyons pas cette ligne juste ici. Donc je vais positionner ces deux-là au milieu comme donc positionner la flèche juste ici et positionner le numéro juste ici au milieu. Donc, ce que nous avons ici, c'est que nous avons le nom du produit. Nous avons le prix du produit et nous avons le montant afin qu'ils puissent cliquer ici et choisir. Donc, c'est bien. Par exemple, comme expliqué dans la vidéo de cadres de fil imprimables. S' ils veulent choisir quatre chaises, par exemple, ils peuvent le faire à partir d'ici. S' ils veulent, par exemple, acheter des vases. Peut-être qu'ils en veulent six. S' ils veulent des cendriers et des objets plus petits, ils peuvent choisir, quel est le montant qu'ils veulent. Donc, quand ils cliquent sur cette flèche apparaît, Della va apparaître, et ensuite ils seront en mesure de sélectionner autant d'éléments qu'ils veulent. Alors, commandez-les rapidement. Alors choisissons le cadre juste le même ici. Et commandez-les rapidement. Donc nous avons besoin de ceux-ci ici, un au-dessus de celui-ci, et nous avons besoin de notre flèche vers le bas au-dessus de celui-ci. Donc patrouille g pour les regrouper et peut-être que nous pouvons écrire le montant suivant, nous avons besoin du prix qui va au-dessus, et nous avons besoin du nom , qui ira au-dessus, nous allons les déplacer jusqu'au bas. Donc, ce que nous avons ici est l'image et enfin la carte VG afin que nous puissions savoir quelle couche est laquelle. Ensuite, nous pouvons sélectionner ceux-ci, faire une ligne vers la gauche, et peut-être que nous pouvons jouer avec un tel espacement. Alors positionnons-le comme ça jusqu'à ce qu'ils se rencontrent ici, 10 pixels et faisons la même chose pour cette partie inférieure. Donc, comme ici, 10 pixels aussi. Sélectionnez l'ancien et le contrôle G et sélectionnez BG et sélectionné et simplement positionnez-le au milieu sur les groupies et ce que nous voulons est le remorquage. Alignez-les avec le bord droit de l'image et appuyez simplement sur 123 quatre ou peut-être même deux. C' est assez bon pour l'instant. Donc, comme je l'ai expliqué dans les vidéos précédentes, ce n'est qu'un cadre métallique, sorte que vous pouvez l'ajouter tous ces éléments au fur et à mesure que vous allez le long de vos images. Parfois, si nous sommes des ombres portées, vous devez augmenter les espacements, puis revenir en arrière et augmenter les autres. Mais parce que nous avons créé une structure d'espacement stable, donc nous avons généralement 10 20 ou peut-être quatre pixels entre les éléments. C' est vraiment facile pour vous de revenir en arrière et de les repositionner si nécessaire. Donc, nous allons rapidement regrouper toutes ces commandes jusqu'à Control G et l'appeler carte 1, par exemple. Ensuite, je veux commander certains d'entre eux. Donc, nous avons des escaliers étaient au sommet, jamais juste en dessous ou le total des détails. On a la carte 1. Contrôlez le et contrôlez en effet, une fois de plus. Donc je vais déplacer ces deux-là un peu vers le bas jusqu'à ce qu'ils se rencontrent ici. Maj 1 à 20 pixels appelés cette carte à et enfin pour dérangé faire la même chose 12 Et ce que nous avons besoin, enfin, est un bouton. Donc, nous allons utiliser ce bouton de contrôle. Voir Contrôle V ici. Et ce que nous allons écrire ici, c'est procéder au paiement parce que si les utilisateurs sont satisfaits de leur sélection, ils vont procéder au paiement, puis sur l'écran suivant, ils vont choisir leurs options de paiement. Donc c'est soit une carte de crédit ou PayPal, et c'est l'écran que nous allons concevoir ensuite. Donc, je vais voir là 15. Créer des Wireframes 7: Ensuite, créons un écran de paiement. Donc, je vais orteil droit Cliquez sur ce guide Guide de copie. Comme tous les autres. Vous pouvez frapper des guides basés et ce dont nous avons besoin en haut est juste une flèche arrière afin que nous puissions sélectionner celui-ci ici. Vous pouvez zoomer un peu plus près si vous pouvez le frapper pour contrôler le contrôle de la mer. Nous sommes ici, qui va être la seule option pour revenir à cet écran, et vous pouvez abandonner en allant dans le menu de cet écran et aller à la maison ou n'importe quel autre écran il est offert. Je vais copier ces deux-là afin de contrôler le contrôle C. On est là, juste là. Je vais écrire dans les paiements et sur celui-ci, je vais simplement écrire une carte de crédit, et je vais la déplacer vers le bas, donc ça va être dans la même ligne, et ça va être 40 pixels et vers le bas. Donc 1234 et sur la bonne ligne, nous allons écrire. Ajoutez-le. Donc, contrôlez D à lui. Et parce que notre carte de crédit irait juste au-dessous de ce juste ici s'ils cliquent sur Modifier, ils auront la possibilité de changer la carte de crédit et de déplacer certaines informations . Et si la carte de crédit a expiré, ils peuvent en ajouter une nouvelle. Ou ils peuvent changer le code de Radio-Canada et quelque chose comme ça. Donc ça va être notre option. Et maintenant, nous allons concevoir la carte de crédit juste en dessous de cela et l'option PayPal en dessous de la dette . Donc c'est génial de rectangle, et ça va être 335 Même comme tous les autres, mais avec 1 80 et nous allons changer la couleur pour quelque chose de plus sombre utiliser coin, rayon ou cinq. Comme nous l'avons fait pour tous les autres. Sautons dans la couche de remorquage spécial et je vais nommer ce chariot BG comme So smoke Leap comme ça et je vais le déplacer. Disons 20 pixels vers le bas. Donc 12 et nous allons sélectionner ceci pour contrôler le film de contrôle C et l'a placé juste ici, sauter en arrière et utiliser le blanc parce que tout de notre texte va être blanc en vue. Donc je vais le positionner comme ça, et c'est bien, nous allons sauter, sélectionner son logo Visa contrôle. Vous voyez, sautez à droite et appuyez sur le contrôle V sur le chariot en sautant. Et peut-être qu'on peut le laisser tel quel. Donc, déplacez 12 vers le bas, un vers la droite, et ce que nous voulons faire est de repositionner certains d'entre eux. Donc pour celle-là, nous allons utiliser quelques étoiles. Donc, ce que cela va faire est de créer une simulation qu'il y a des chiffres derrière ces étoiles. La même chose que vous faites sur toutes les autres cartes quand vous achetez des trucs en ligne. Donc, je vais créer quatre cartes pour les étoiles, puis simplement frapper l'espace, par exemple, quatre fois. Donc 1234 peut-être cinq. Et puis je peux faire la sélection ici. Contrôle. Voir droite Arrow Control V Control V. Et enfin, pour ce dernier. Utilisons par exemple, 1234 Disons ainsi. Ça va simuler le numéro de notre panier. Suivant Contrôle D dupliquer le même texte de clic et tapez le nom du titulaire de la carte comme ça, Et imaginons juste que le nom est John dope. Disons que c'est vraiment facile et simple à retenir. Nous allons sélectionner tous ces éléments et en faire une ligne à gauche et une fois de plus. Alors décalez 12 et ne vous inquiétez pas pour les positions. Peut-être qu'on peut le changer maintenant. Donc, 10 pixels et 20 pixels à partir du bas, alors voulez. Et vous pouvez positionner ceci, par exemple, juste ici pour que vous puissiez voir quelque chose ici va être au milieu. Vous pouvez être précis si vous voulez, mais ne nous enlisons pas avec les détails. Donc les personnes choisies pour contrôler D et je vais les placer ici. Donc, cela va écrire à la date d'expiration. Amble Odette. On va écrire en date. Alors disons que les deuxièmes mois de congé, 2025. Disons que quelque chose comme ça le rend espacement, ce qui rend agréable et clair 20 pixels à partir de la droite et c'est tout. Nous avons créé notre carte de crédit Visa. Si tu veux. Bien sûr, vous pouvez changer la couleur de cette carte. Vous pouvez ajouter une ombre portée pour la rendre un peu plus attrayante. Mais pour cette étape hors de notre processus, laissons juste comme il est vraiment heureux comment cela s'est avéré, et maintenant nous allons rapidement organiser certains de ces détails afin que ceux-ci vont juste au-dessous du nom appelé nom Holden monterait la date d'expiration Comme si, Card BG et Control G. Cela va être ou carte de crédit comme Donc prochaine, nous devons créer la même chose, mais pour les gens. Alors choisissons ces deux contrôles profonds et positionnés juste ici. Donc 1 à 20 pixels de contrôle de sur les cartes dupliquées. Assurez-vous que vous êtes 20 pixels. Donc exactement la même chose ici. Nous n'avons pas besoin d'une date d'expiration car PayPal ne l'a pas. Donc nous allons supprimer ces deux-là. Et au lieu du visa a eu lieu, nous allons le remplacer par le logo du peuple. Donc situé logo papier juste ici. Contrôle sélectionné. Tu vois ? Saute ici. Cliquez lorsque le visa supprimer Contrôle V et assurez-vous que votre position exactement au même endroit que vous l' avez fait avec le logo visa. Alors passez à la droite 22 le bas 20 et c'est tout. Fondamentalement, vous avez terminé votre travail. Changeons rapidement la couleur pour les différencier un peu. Et nous allons peut-être utiliser ça pour les gens un logo, et j'aime comment ça ressemble, donc nous allons écrire en papal juste ici. Comme ça. Et ensuite, nous allons dupliquer ce bouton contrôle C. On est là et on a tapé. Effectuez un paiement. Donc on va laisser ça dedans, faire un paiement, et c'est tout. Nous avons créé notre écran. Déplaçons rapidement certaines de ces couches. Donc le statut emprunter. Va en haut. On a une flèche arrière. Juste en dessous. Nous avons des paiements. Ici, c'est. Nous avons carte de crédit et éditer, qui ira juste au-dessous de l'enregistrement de paiement ci-dessus donc ici, crackers. Et puis nous avons ce texte qui devrait écrire dans les gens comme ça et à lui. Juste en dessous, nous avons PayPal et enfin nous avons le bouton. Dans la vidéo suivante, nous allons concevoir, stocker, emplacement, écran, où nous allons inclure une carte et quelques fonctions de base ci-dessous. Donc, je te verrai là-bas 16. Créer des Wireframes 8: Maintenant, allons vite de l'avant et finissons ce processus de cadrage de fil avec les emplacements de magasin et enfin un menu. Commençons donc par les emplacements des magasins. Donc même chose, de bons guides de copie. Et peut-être que vous pouvez sélectionner ces deux guides de clic droit et des guides basés. Maintenant, je pourrais le faire au début, mais parfois on ne sait jamais si on veut changer certains d'entre eux. Donc c'est vraiment plus facile de faire un par un. Et puis ne pas avoir à perdre du temps et revenir et faire des changements que vous ne vouliez pas en premier lieu. Alors commençons par ce que nos vêtements ont choisi d'ici. Contrôle. Tu vois, saute ici. Contrôle V. Ensuite, nous avons l'icône de recherche, que nous avons besoin de contrôle. Tu vois ? Saute ici. Contrôle V. Et je vais le positionner ici à ce bord. Assurez-vous que sa position comme il devrait l'aimer. Et ce dont nous avons besoin, c'est de quelques textes de base ou d'utiliser celui-ci. Contrôlez C contrôle V et assurez-vous qu'il est au milieu de ces ceux-là comme ça et assurez-vous que tous d'entre eux notre position comme ils le devraient. Alors assurez-vous que vous avez 20 pixels vers le bas, comme nous l'avons fait. Et assurez-vous que ce soit 20 pièces à droite à partir des icônes de la merde 12 et tapez dans les emplacements de magasin ou même leurs emplacements de recherche, qui a beaucoup plus de sens comme ça. Et enfin, ce dont nous avons besoin est une ligne ci-dessous, sorte que vous pouvez créer une utilisation de ligne dans vital. Mais j'aime le créer en utilisant des calques de forme qui peuvent toujours me ramener. Et je peux toujours les ajuster et les changer plus tard si je veux. Vous pouvez sélectionner ceci ou vous pouvez simplement cliquer ici. Voyons voir. Et peut-être pour la hauteur qu'on peut prendre en être un. Et comme vous pouvez le voir, nous avons nous-mêmes une ligne donc les alignés au bas de ces icônes décalage 12 Assurez-vous que vous avez le même espacement qu'avant, et nous avons fini avec cela, alors peut-être que nous pouvons créer un certain ordre. Donc, la ligne déplacer tout le chemin vers le bas. Donc nous avons, comme ça, fermé cette recherche et les regrouper tous ensemble, et peut-être que nous pouvons écrire dans Search Bar Realty juste pour que nous puissions avoir un écran un peu plus organisé ensuite, nous pouvons créer le partie inférieure de l'écran. Donc, sélectionnons un rectangle comme ça, utilisez cinq comme, donc la bordure enlevée et utilisez le singulier comme nous l'avons fait pour tous ces autres. Ce que nous voulons ensuite est de choisir du texte afin que vous puissiez le choisir dans ce contrôle. C contrôle nous et assurez-vous que vous les placez juste ici à l'intérieur, donc localement pleuré ici et taper. Par exemple, Bell Grand magasin. Ça va être une rue, alors appelons-le comme ça. Bien sûr, vous pouvez écrire dans n'importe quelle rue n'importe quelle ville que vous voulez, mais la détresse parce que c'est à Belgrade, Control de et enfin juste ici pour avoir le même espacement, double type rapide dans. Plus de détails contrôlent un et frappent sous-jacent parce que ce sera un lien simple. Il peut s'agir d'un message pop-up, littéral pop-up d'en bas ou d'en haut. Ça n'a vraiment pas d'importance ou quoi que ce soit. Il peut l'emmener à l'écran complètement différent. C' est à vous et à votre client de décider. Mais plus de détails, les gens peuvent apprendre sur quatre numéros sur l'adresse e-mail sur un site Web spécifique à propos choses comme celles afin qu'ils puissent y accéder directement à partir d'ici. Ensuite, nous avons besoin d'une icône pour la navigation, parce que quand ils trouveront l'emplacement ici, il apparaîtra juste ici et ils peuvent voir calate juste ici. Et il les mènera à l'application préférée, l'utilisation. Donc, cartes Google, façons, cartes Apple et ainsi de suite. Alors choisissons rapidement cette icône. C' est ce seul contrôle Voir sauter ici, Contrôle V Et ce que vous voulez est de créer un cercle simple. Alors peut-être qu'on peut en créer un. Par exemple, 50 par 50. À quoi ressemble la faucille. Donc 50 par 50. Retirez la bordure. Assurez-vous qu'il est blanc. Sautez dans les couches. Le panneau saute juste ici. Tapez DoubleClick en cercles. Et nous voulons sélectionner ces deux positions comme ça. Et ce que nous voulons est de positionner cela au milieu comme ça et peut-être déplacé 40 pixels. Donc 1234 Et peut-être que nous pouvons commander ceux-ci un peu mieux comme ça. Sélectionnez l'arrière-plan, sélectionnez le groupe qui l'a placé au milieu. Peut-être que vous pouvez appeler ce texte. Certainement le critère. J' ai été réparé comme ça, et ça va être une carte, BG. Comme sur tous les autres. Et peut-être qu'on peut les regrouper tous comme ça, assurez-vous de les déplacer ici, contrôler G. et vous pouvez même regrouper ces directions vendues comme ce groupe, toutes. Donc, contrôlez G. Cela va être notre panier, et vous pouvez le déplacer vers le bas et peut-être utiliser 1234 pixels ou 20 pixels. Vérifions rapidement ce qu'on a fait sur les autres. Donc sur ce 11234 Donc c'est 40 pixels et nous l'avons fait correctement. Comme vous pouvez le voir, c'est au milieu. Il ressemble exactement à tous les autres, et ce que nous devons enfin, c'est de créer quelques directions. Maintenant, vous pouvez le faire ici, ou vous pouvez attendre un peu plus tard quand vous aurez votre design fini. Mais faisons-le de toute façon. Donc, je vais sélectionner cette icône d'emplacement, sauter dans notre contrôle de carte v coller en position simple. C' est quelque part par ici, disons alors utiliser un clic mental juste en dessous. Donc, comme ça. Peut-être que comme ça, vous voulez utiliser des informations de rue comme alors pour que nous puissions créer une partie comme ça, et ce dont nous avons besoin est un cercle, et nous pouvons utiliser certains de ces cercles que nous avons déjà créés. Donc, pour les couleurs, couleur sélective et le contrôle de la décoloration, voir vous conjoncture ici dans cet écran Contrôle V pour le coller dans. Vous pouvez le placer comme ça, et ce sera votre destination finale. Donc, en utilisant cette couleur et en remplissant avec cette couleur comme ça et ça va être votre destination finale. Maintenant, ce qui est génial dans Adobe X'd principalement double-cliquer dessus et vous pouvez déplacer les points que vous obtenez. Maintenez le décalage. Si vous voulez faire une partie droite comme ça, peut-être que je veux la positionner comme ça et peut-être même comme ça, et ce qui est génial aussi, c'est que nous pouvons le déplacer une fois que nous avons inclus notre carte juste pour que nous puissions en faire un un peu plus réaliste. Si vous n'aimez pas comment cela ressemble, vous pouvez cliquer sur un animal de compagnie et vous pouvez créer autour gardé, qui, si nous zoomons, vous pouvez voir qu'il semble beaucoup mieux que sans autour gardé parce qu'il va simplement faire comme si vous utilisez mais Gap. Ça va être une simple érection, vraiment, vraiment, comme à quoi ressemble cette casquette ronde. Et comme toutes nos icônes ont ces bords arrondis, vous pouvez le placer et le positionner beaucoup mieux qu'avec le bouchon de bouteille, comme on l'appelle. Donc c'est fondamentalement tout pour l'emplacement du magasin. Et nous allons rapidement et enfin faire juste un écran de menu. Donc, ce dont nous avons besoin, c'est cette icône proche Copiez-le, badigeonné exactement dans la même position. Nous avons également besoin d'un logo, nous allons donc le sélectionner ici. Sautez, remorquez notre contrôle d'écran V. Assurez-vous qu'il est au milieu et qu'il nous faut un arrière-plan. Donc, nous allons créer un beau grand rectangle autour de notre écran entier, enlevé la bordure. Appelez ça BG Move. C' est tout le chemin en bas. Plus tous ces trucs jusqu'à si longtemps déplacé Mamula et pourquoi nous avons créé cela et arrière-plan est parce que nous voulons créer cet écran comme une superposition. Ainsi, lorsque vous créez un arrière-plan, vous pouvez utiliser toutes sortes d'animations différentes. Par exemple, vous pouvez utiliser la ville d'obéissance différente. Ainsi, par exemple, vous pouvez réduire votre ville de paie si vous le souhaitez, puis superposer cet écran entier sur les autres écrans. Maintenant, enfin, ce dont nous avons besoin, c'est beaucoup de texte, alors choisissez celui-là. Patrouille C contrôle V. Assurez-vous que c'est du centre et assurez-vous qu'il est au centre. Assurez-vous qu'il va donc par exemple, 1234 Même comme nous l'avons fait avec tous les autres. Donc ça s'appelle ce premier profil 1 et vous pouvez frapper, entrer et ensuite descendre quelques lignes. Mais j'aime garder mon texte séparé parce qu'il me donne vraiment beaucoup plus de flexibilité afin que vous puissiez le déplacer en bas, comme si 1234 Et peut-être que nous pouvons appeler celui-ci mes ordres comme ça. Contrôle D Ensuite, déplacez celui-ci ci-dessous. Je ne sais pas pourquoi il continue à faire ça, mais comme vous pouvez le voir, ça continue à sélectionner toutes les autres. Mais dans le cas, sélectionnez simplement le top want ou 1234, puis positionnez-le juste en dessous de celui-ci. Je ne sais vraiment pas ce qu'il fait, mais peut-être parce que je garde le poste ? Je ne sais pas. Il ne l'a pas fait avant. Donc, mes paiements vont être dans celui-ci. Et enfin, parce qu'il nous faut deux de plus, nous pouvons copier ces deux-là. Donc mes ordres et mes paiements, nous allons faire baisser ces deux-là. Et comme vous pouvez le voir, il continue de le faire même si vous sélectionnez simplement deux ou trois couches différentes. Mais peut-être qu'on peut le faire comme ça. Alors bougez-le juste une touche. Sélectionnez ces deux afin que tous les déplacements et les déplacent comme si 1234 Cela va être des paramètres comme ça. Et enfin, nous avons déconnecté et voilà. Nous avons fini notre écran. Assurez-vous qu'ils sont tous dans le même ordre. Et si vous n'aimez pas comment cela ressemble, vous pouvez positionner ce texte vers le bas. Laissez-moi donc rapidement les sélectionner tous comme ça. Contrôle G. Et ce que je veux faire est de créer un rectangle simple à partir du bas du X jusqu'au sommet notre logo. Donc, comme ces deux-là, et ensuite il suffit de frapper ici. Il va aux orteils. Aligner au milieu de cet espace parce que le rectangle est en train de remplir l'espace délit enfin, rectangle, puis déplacer certains d'entre eux vers le bas. Donc ici sur le groupe et nous y voilà. Nous avons créé notre écran de menu qui allait trop loin dans le processus de conception. Nous redémarrons le prototypage de nos écrans et c'est tout. Nous avons fini nos cadres de fil une dernière chose et vraiment important. Si vous ne l'avez pas sur auto safe, assurez-vous d'appuyer sur contrôle ou commande s et cela va sauver votre projet. Donc, vous ne perdrez aucun détail quand vous y reviendrez un peu plus tard. Mais Adobe est ces vraiment intelligent et il fait auto safe. Donc, si vous ne l'avez pas activé, assurez-vous de le trouver dans les paramètres ou si vous ne le voulez pas et que vous m'aimez, aimez enregistrer votre propre travail de temps en temps, alors appuyez simplement sur le contrôle ou la commande s, et il va enregistrez-le à l'emplacement souhaité. Donc c'est tout pour la partie encadrée blanche de ce parcours. Ensuite, dans la section suivante, nous allons commencer par la conception. Je vais vous montrer comment la structure des images est mise en place dans votre dossier hippocampes et comment vous pouvez utiliser ces images pour créer Ah, design haute fidélité, que vous allez présenter à votre client donc je vous verrai dans la prochaine une partie du cours . 17. Structure d'image: dans cette partie du cours, nous allons commencer à travailler sur notre design, mais avant de le faire, je veux juste parcourir rapidement les images qui sont à votre disposition ainsi que la façon dont elles sont structurées. Donc, si vous allez à l'intérieur, votre ressource est plus complète et à l'intérieur de votre dossier d'images, ces images ici iront dans différents écrans. Ainsi, par exemple, il s'agit de l'écran de l'emplacement de notre magasin. C' est pour notre écran d'accueil. Ces trois sont pour nos images de combinaison de pièces, et ceci est pour l'image du haut de l'écran d'accueil, et vous allez voir dans les prochaines années une fois que nous commencerons à inclure ces images et apporter quelques changements et ainsi vous avez ces trois dossiers. Donc tous ces dossiers contiennent des images différentes à l'exception de la chaise principale et ils R P et G. Donc, si je vais à l'intérieur du canapé, toutes ces images ont les arrière-plans enlevés. Donc, ils sont PNG, comme vous le voyez ici, ce qui signifie qu'ils n'ont pas d'arrière-plan, et cela signifie aussi que vous pouvez les inclure dans différents arrière-plans et les superposer sur le dessus, ce que je suis va vous montrer dans les prochaines vidéos ST Ng pour ces lampes et pour cette chaise principale. C' est notre image de héros principale pour l'écran des éléments sélectionnés, et c'est un PNG sans arrière-plan, alors que ces deux ont des arrière-plans parce qu'ils sont juste des images explicatives, qui vont aller au-dessous de cette image principale. Donc, c'est fondamentalement la structure de l'image. C' est très facile, très simple. Et dans la prochaine vidéo, nous allons commencer par l'écran d'accueil, et je vais vous montrer comment vous pouvez inclure certaines de ces images, donc je vais voir là. 18. Créer un design 1: Commençons maintenant à concevoir nos écrans et à inclure quelques images et quelques effets différents . Donc avant de faire quoi que ce soit, ce que j'aime faire est simplement de dupliquer tous ces ports et de les glisser et les déposer sous ce cadre métallique, notre section de port. Donc, pour ce faire, il suffit de les sélectionner tous, appuyez sur le contrôle ou la commande D pour les dupliquer. Ensuite, il suffit de cliquer sur l'un d'eux et de les aligner en bas. Et ce que j'aime aussi faire pour les clients parce que vous savez ce que c'est. Fondamentalement, j'aime aussi faire une sélection de texte si rapide, quelque part par ici, tapant des cadres de fil ou un cadre métallique, celui que vous voulez, faire quelque chose de beau et grand. Donc, par exemple, 100 et peut-être même Barbe et que peut-être 200. C' est bien. Et il suffit de le positionner au milieu de ces écrans. Donc à peu près ici, peut-être , oui, et vous pouvez aussi faire comme si principalement 400. Gardons ça comme ça, et tu pourrais frapper le contrôle D et en faire 400 à partir d'ici. Donc, comme ça, puis déplacez simplement ces écrans et vers le bas et déplacez-les. Faites-les 400 à partir de là, je pense que c'est un bon contrôle. Zéro pour s'enclencher en position. Vite terne juste ici. Dactylographier la conception et c'est tout. Maintenant, ce que nous devons faire est d'apporter quelques modifications avant d'inclure des images, et je veux inclure des ombres portées à certaines de ces sections, et je veux aussi inclure une nouvelle couleur parce que j'ai parlé avec le client et qu'ils disent que nous avons besoin éclabousser la couleur pour ces boutons parce qu'ils ont l'air un peu bizarre. Donc, la couleur qu'ils ont choisie me permet de sélectionner rapidement ce fond. La couleur qu'ils ont choisie est F C 7, un centre de presse 00, et comme vous pouvez le voir, c'est une sorte de couleur orange, ce qui signifie qu'il va aux pieds. Se démarquer de ces couleurs et aller simplement le sélectionner et cliquez ici, Toe a ajouté orteil nos couleurs. Vous pouvez appuyer sur le contrôle pour dire à propos de votre projet, parce que nous avons déjà apporté de gros changements, et maintenant nous allons aller et sélectionner ces boutons. Il suffit de cliquer sur votre orteil de couleur, appliquer cette nouvelle couleur à vos boutons, et ce que nous voulons faire aussi est d'inclure une ombre portée, donc je veux aller ici à ce 1er 1 et laissez-moi revenir à mon panneau de calques. Donc je sais qui a été sélectionné ? Ce que je veux faire est d'inclure Shadow Click ici, cinq pour l'axe X, voler pour l'axe Y et 10 40 b accès pour un centre. Et ce que je veux faire est de cliquer sur l'ombre, cliquer ici sur le sélecteur de couleurs, mais de passer à votre panneau d'actifs afin que vous puissiez mieux sélectionner votre couleur. Cliquez donc sur le sélecteur de couleur et cliquez sur cette couleur. Donc c'est 717171 et cliquez ici et tapez 25 percenter, car cela va réduire l'opacité de cette ombre à 25% maintenant. Ce que vous pouvez faire est de cliquer avec le bouton droit de la copie, et vous pouvez faire commande de contrôle. Cliquez pour sélectionner celui-ci directement car il se trouve à l'intérieur du dossier. Comme vous pouvez le voir ici, cliquez avec le bouton droit sur le contrôle des parents. Cliquez sur cette apparence basée sur un clic droit, et cela va les rendre tous semblables. Maintenant, faites la même chose pour la mauvaise combinaison, alors il suffit d'aller de l'avant et de sélectionner tous les apparences basées et enfin faire la même chose pour la vidéo sur cet écran parents. Maintenant allez-y et fermez tous ces dossiers, et j'aime faire tout cela avant. J' inclut des images, car lorsque vous incluez des images dans ces espaces réservés, adobe SD les traitera comme un seul objet. Donc, vous ne pouvez pas supprimer cette image si vous n'avez pas supprimé de ce détenteur de place ou si vous appuyez et faites quelques fois. Alors je vais sauter et le faire. La même chose pour ceux-ci. Donc il suffit de contrôler ou de commander. Cliquez et puis appuyez simplement sur le bouton droit et coller l'apparence Oregon Dough Control ou commande Ault et nous. Mais je trouve ça plus facile de cette façon. Ce que je veux aussi faire est d'appliquer la même ombre aux boutons, mais nous allons aller coller l'apparence sur ces objets parce que c'est beaucoup plus simple faire pour eux parce qu'ils sont tous de la même couleur. Et si vous collez la disparition, il éteindra la couleur de ces boutons à la couleur grise, et nous ne voulons pas cela. Nous voulons également inclure les mêmes ombres pour ceux-ci, mais finissons rapidement avec celui-ci afin de coller l'apparence. Maintenant, nous pouvons le faire pour les cartes, alors il suffit de frapper. Toe la carte BG frappé ombre sauter dans son panneau d'actifs. Alors frappez 55 et 10. Saute dans l'ombre. Cliquez ici. Sélectionnez cette couleur 71 sur votre base 25% et faites de même pour cette couleur finale. Assurez-vous que vous êtes sur la carte, BG. Et si c'est le cas, sautez dans le panneau des actifs. Sélectionnez l'ombre. Donc, une fois de plus, 55 10 cliquez sur l'ombre. Cliquez sur le sélecteur de couleur sélectionné ici 25% pour cent er Et maintenant ce qu'il nous reste à faire est de sélectionner exactement la même ombre, mais pour ces boutons. Donc, je vais sélectionner ce 1er 1 à une ombre. Donc 55 10 Cliquez ici. Cliquez ici. Assurez-vous que vous êtes sur cette couleur. 7171 Assurez-vous que 25 %. Et maintenant ce que vous pouvez faire est juste. Cliquez sur Copier, puis accédez à tous les boutons et appuyez sur l'apparence basée. Maintenant, ne vous inquiétez pas de fermer tous les dossiers parce que nous allons maintenant aller et inclure des images dans notre écran d'accueil par exemple, mais avant de le faire, je dois faire un autre changement pour que vous puissiez cliquer ici, dire cliquez sur le nom de l'aéroport et simplement supprimer ces extensions parce que je n'aime vraiment pas à quoi il ressemble. Il a l'air un peu désordonné, mais allez-y et vous pouvez aussi le faire rapidement à l'intérieur et juste ici. Vous pouvez taper la conception, par exemple, si vous le souhaitez. Mais j'ai trouvé que c'est beaucoup plus simple de cette façon parce que si vous envoyez ce fichier à votre développeur, ce que vous devez faire à la fin du projet, ils seront en mesure de comprendre si c'est, ah, cadre métallique ou un design, parce que numéro un il a des images. Il a quelques ombres que nous avons déjà ajoutées. Il a quelques changements appliqués à elle et aussi il a l'écriture de conception juste au-dessus. Donc, si je zoom arrière un peu, vous pouvez voir juste ici afin qu'ils puissent dire s'il s'agit d'un design ou d'un cadre métallique. Alors maintenant que nous avons fait ces changements, vous pouvez appuyer sur le contrôle pour dire ce projet. Laissez-nous maintenant aller de l'avant et inclure des images pour l'écran d'accueil, donc je faisais un zoom avant un peu plus près. Maintenez le contrôle. Cliquez à l'intérieur de cette image de héros. Vous pouvez fermer ce dossier car il est ouvert et je peux sauter à l'intérieur. Notre image est dossier et je vais localiser la chaise histoire glisser-déposer à l'intérieur et vous effectuez un clic et agrandir cette image comme ça, et vous pouvez positionner la chaise comme si cliquez n'importe où à l'extérieur et pour le rendre un peu plus attrayant l'œil. Il suffit de cliquer ici et de sélectionner dans votre panneau d'actifs la couleur blanche pour ce texte inférieur , car cela le rendra un peu plus debout. Une autre chose que je voudrais faire est de sélectionner le cercle de pagination de début et de supprimer la couleur de champ inclus la bordure et pour la couleur de bordure simple sélectionner blanc parce que cela fera ressortir un peu plus de ces éléments à l'intérieur. Ensuite, nous devons créer la section la plus populaire et peuplée d'images. Donc, ce que j'aime faire est de double-cliquer à l'intérieur de ce nom et de taper Milano pour celui-ci. Je vais taper en général et enfin pour la poupe, mais je vais devoir le déplacer ici. Laisse-moi bouger tout. Donc, sélectionnez l'image trois et déplacez-la. D' accord à Palerme. Maintenant pour ça. Le prix va être en 96 pour les genres va être 96. Et pour le Milano va être 98 maintenant. Changeons les couleurs pour chacun d'entre eux. Sautez dans son panneau de cul Cliquez ici. Alors sélectionnez le prix. Cliquez ici. Sélectionnez le prix pour le tour un clic juste ici et maintenant incluons des images. Donc, sélectionnez ce 1er 1 saut dans les calques Panel sautant maintenant aux images et ce que vous voulez localiser ces lampes Donc nous devons sélectionner cette lampe un glisser-déposer, mais pas ici parce qu'il va remplir toute cette section et le remplacer et le masquer avec des dommages. Mais quelque part dehors, comme ici. Maintenant maintenez Shift vieux et gauche Cliquez, parce que cela va à la compétence, votre image uniformément et vous pouvez vous zoomer et simplement appelé Maj et clic gauche. Si c'est pour vous, faites-le glisser en position. Assurez-vous qu'il est au milieu et maintenant vous pouvez l'espacer. Ainsi, par exemple, à partir du texte du haut du texte que vous, colonel Shift appuyez deux fois sur la flèche vers le haut pour positionner en 20 pixels vers le haut, puis simplement réduire la taille jusqu'à ce qu'il se rencontre comme ceci. Peut-être que vous pouvez même le placer 10 si vous pensez que c'est trop comme ça parce que nous voulons donc rendre l'image un peu plus grande et vous pouvez le tenir comme ça et appuyer au milieu parce que cela va la positionner au milieu de ce porte-place. Maintenant que le 1er 1 est fait, nous allons rapidement aller de l'avant et sélectionnez le 2e 1 Donc sauter le dossier des images d'initiés, Sélectionnez la lampe pour faire glisser et déposer ici et puis même comme nous l'avons fait avec le 1er 1 Hold shift et réduit sa taille simple glisser et déposez-le à l'intérieur de ce dossier. Même chose que nous avons fait avec le 1er 1 Donc positionnez-le comme ceci 10 pixels vers le haut et puis simplement réduit sa taille du haut comme ceci. Assurez-vous qu'il est au milieu, et vous pouvez également le faire ou sélectionner une pièce pour vous assurer qu'elle est au milieu, et vous pouvez fermer ce support et ensuite vous pouvez déplacer le dossier agité un peu plus et peut-être cacher le deuxième dossier afin que vous soyez orteil capable. Inclure la troisième image ici. Sautez à l'intérieur de votre dossier, faites-le glisser et déposez-le juste ici, puis réduisez simplement sa taille comme ça, déplacez un peu vers le bas, zoomez un peu plus près, alors positionnez-le comme ceci jusqu'à ce qu'il se rencontre dans le décalage supérieur et 10 pixels. Maintenez le décalage. Assurez-vous que c'est comme ça, puis positionnez les deux au milieu. Comme ça. Maintenant, je vais aux orteils. Inclure l'image numéro deux. Maintenez la touche Maj et positionnez-le comme. Donc, jusqu'aux rencontres, un décalage 12 qui se déplacera avec 20 pièces vers la droite. Et nous avons rempli la section la plus populaire avec nos images et parce qu'elles sont PNG. Si à n'importe quel moment vous voulez changer d'avis, vous pouvez garder le contrôle. Cliquez à l'intérieur de l'image, puis vous pouvez modifier votre couleur échouée. Alors nous allons sauter en avant. Vous pouvez le changer pour, par exemple, l' une de ces couleurs. Vous pouvez voir à quoi cela ressemble, ou vous pouvez aller de l'avant et choisir une de vos propres couleurs, donc il est tout simplement comme ici pour que je puisse être sûr de quelle couleur il est. Donc, il est e b. Sélectionnez celui-ci et sélectionnez le E B. Donc, comme ils l'ont dit, vous pouvez le changer à vos propres couleurs. Ou vous pouvez inclure une image d'arrière-plan juste en dessous de cette image PNG. Donc, si vous voulez le faire ressortir encore plus qu'il ne l'est en ce moment, suivant pour les combinaisons de pièces faites de même. Alors cliquez ici. Et si un saut en dehors de ce dossier, vous pouvez voir que nous avons trois images de combinaison grandi afin que vous puissiez cliquer sur ce. 1ère 1 est simplement glisser-déposer à l'intérieur parce que nous voulions remplir cette section entière et vous pouvez double-cliquer ici si vous le souhaitez. Et peut-être que je peux le déplacer comme si il, euh, certains jusqu'à ce que je dète et ce que je veux écrire ici, c'est le salon. Donc double-cliquez sur le texte et en tapant peu, et parce que nous ne pouvons pas le voir, peut-être que nous pouvons le rendre blanc. Alors sautez ici et vous pouvez maintenant le voir un peu mieux. Maintenant, ce dont nous avons besoin pour le 2ème 1 est le numéro de combinaison de pièce pour le glisser et le déposer à l'intérieur, vivant comme il est. Double-cliquez ici et tapez dans la chambre comme alors assurez-vous qu'il est blanc. Et enfin, pour un dérangé qui est sélectionné, sautez dans notre combinaison de classeurs. Trois. Sélectionnez glisser-déposer en vue. Et comme avant, vous aurez besoin de le déplacer juste un peu pour pouvoir changer le regard de ces textes et nous allons écrire dans la cuisine pour celui-ci. Assurez-vous de le remettre dans sa position comme si déplacer de 1 à 20 pixels de cette façon, et si un saut un peu plus près, il n'a pas changé la couleur du texte pour une raison quelconque. Mais vous pouvez le changer comme ceci ou quand il a sélectionné simplement appliquer du blanc à elle, puis sauté en arrière. Et je veux positionner en 20 pixels un décalage 12 et fermer cette section parce qu'elle est terminée. Et enfin, ce que nous voulons inclure, c'est notre processus. Donc, nous voulons inclure une image d'arrière-plan juste ici orteil agir comme un espace réservé pour la vidéo, et c'est cette image pour simplement glisser et déposer à l'intérieur, et vous pouvez double-cliquer à l'intérieur et maintenir le décalage, repositionner un peu mieux. Je vais le placer quelque part par ici. Cliquez à l'extérieur et ils vont pouvoir cliquer à l'intérieur et voir qu'il s'agit d'une vidéo. Ils peuvent cliquer ici orteil, lire la vidéo en plein écran ou cliquer sur lire plus, ce qui les mènera à environ US Page, ce qui expliquera leur processus dans beaucoup plus de détails s'ils veulent lire. Donc fondamentalement, c'est tout pour l'écran d'accueil vous. Nous avons donc inclus une nouvelle couleur. Nous avons inclus quelques ombres différentes. Nous avons inclus des images, et je vous ai montré comment vous pouvez inclure à la fois Jay Pek ainsi que des images PNG, et nous changeons quelques couleurs du texte autour, et nous faisons tout beau et clair, et tout semble maintenant beaucoup Mieux. Ensuite, il vous fait encore quand il était juste un cadre métallique avec des rectangles vides. Dans la prochaine vidéo, nous allons passer à l'écran de catégorie, et je vais vous montrer comment vous pouvez inclure des canapés ici, et nous allons changer le nom des canapés ici en haut. Donc, je vais voir là 19. Créer un design 2: Maintenant, c'est plus dans l'écran des catégories. Nous allons zoomer un peu plus près sur ce 1er 1 Appelons Lisbonne et changé le prix 2 à 4 à neuf parce qu'il va passer du plus cher au moins bas ci-dessous. Sur ce 2ème 1, appelons-le Rome, et ça va être deux pour 10. Celui-ci va être Paris et sur le prix va être 13 68 Ensuite, nous avons un Leone si Leone, et pour un prix il va être 12 19. Ensuite, on va aller aux pieds. Inclure le nom de Moscou et pour le prix, veulent 187 et enfin, pour ce perdu. Inclus Prague et Price sera 1090 Suivant, allons-y et incluons nos images à l'intérieur. Retournez à votre dossier d'images, allez à l'intérieur des canapés. Donc, pour un jusqu'à présent, numéro un, sautez à l'intérieur et faites glisser. Déposez-le comme nous l'avons fait avec les images précédentes. Donc, ce que vous voulez est de l'inclure et de réduire sa taille et localiser l'élément numéro un glisser-déposer à l'intérieur de ce dossier et une position juste au-dessus de l'arrière-plan de l'image, vous pouvez zoomer un peu plus près. Vous pouvez réduire la taille à environ ici. Assurez-vous qu'il est au milieu, et vous pouvez sélectionner ces deux et le positionner au milieu si vous le souhaitez. Mais vous pouvez également le déplacer vers le bas de votre image, espace réservé comme Donc appuyez sur 1234 et mettez-le 40 pixels du bord inférieur, peut-être même 50 parce que cela semble beaucoup mieux. Ensuite, nous allons inclure le 2ème 1 pour que vous puissiez cliquer ici. Allez à l'intérieur de votre dossier saut et basé dans le 2e 1 hold shift jusqu'à ce que vous produisiez sa taille et vous pouvez également le faire. Vous pouvez faire un exemple de test. Et si vous faites cela dans quatre boutique comme je l'ai fait en supprimant ces um en dehors des lignes et supprimant l'arrière-plan de vos images, et vous pouvez le faire dans quatre magasins, et vous pouvez vous assurer qu'ils sont tous les deux sur la même taille. Donc, une fois que vous êtes à l'intérieur d'Adobe XY et commencez à changer les choses, et que vous voulez inclure ces images dans ces espaces réservés, elles seront déjà à la même taille qu'elles doivent, sorte que cela réduira votre temps d'attente. Et cela améliorera votre vitesse beaucoup plus afin que vous puissiez travailler beaucoup plus rapidement lorsque vous avez ces dimensions exactes sur ces canapés dans notre exemple. Mais j'aime travailler de cette façon parce que, comme vous allez le voir et vous pouvez le voir ici, tous n'ont pas exactement la même taille. Donc c'est un facteur important. Parce que si elles étaient exactement le même look et la même taille, Donc, par exemple, tous sont comme ça. Alors cette méthode va travailler beaucoup mieux parce que, euh, quand ils sont tous de la même taille, vous pouvez appliquer cette technique. Mais quand ils ne sont pas comme s'ils ne le sont pas dans notre cas, alors vous allez simplement rester avec. Certains étaient des résultats bizarres, mais s'ils sont de la même taille, alors vous êtes tous prêts. Et tu peux travailler comme ça si tu le veux. Donc, si pour une raison quelconque, il le colle, deux d'entre eux et vous allez voir ces bogues dans Adobe X'd de temps en temps. Mais ne faites pas attention à eux et assurez-vous que vous savez ce que vous faites parce que lorsque vous faites une erreur, vous pouvez facilement la corriger parce que vous savez où vous avez fait cette erreur et vous pouvez sauter arrière à tout moment et simplement corriger ça. Donc c'est sauter et inclure notre canapé numéro quatre. Donc, comme je l'ai déjà mentionné, comme vous pouvez le voir, tous sont des dimensions différentes. Tous sont des formes différentes, c'est pourquoi j'aime travailler de cette façon. C' est beaucoup plus long, évidemment, évidemment, comme vous pouvez le voir. Mais de cette façon, vous pouvez vous assurer que tous sont positionnés là où ils devraient et exactement au même endroit. Et parce que certains d'entre eux sont toller, certains d'entre eux sont plus larges que le reste d'entre eux. Ensuite, pour le positionnement, assurez-vous juste que votre globe oculaire il et vous faites une position rugueuse selon les précédentes, parce que pour le 1er 1 si vous vous souvenez, nous le mettons 50 pixels du bas. Et parce qu'il était un peu étroit, cette image et ces autres sont un peu plus grandes, donc vous devez juste compenser et les faire 12345 par exemple. Comme vous pouvez le voir, il est beaucoup plus grand que celui-ci et ainsi que celui-ci. Donc peut-être mettre 40 pixels vers le bas juste pour que vous puissiez à peu près les mêmes exactement qu'ils mentionnent d'ici à ici sur chacun d'eux. Et enfin, incluons la sixième image. Donc sauter ici sur un peu de zoom et inclure le canapé numéro six. Donc je vais le positionner à peu près ici et juste m'assurer que vous réduisez sa taille comme nous l'avons fait avec tous les autres. Positionnez-le à peu près ici et juste réduit la taille encore plus. Et c'est de ça que je parlais. Comme vous pouvez le voir, celui-ci est beaucoup plus grand que celui-ci, mais assurez-vous juste de le positionner ou dans le même espace que celui-ci, et c'est tout pour cet écran. Maintenant, nous allons rapidement plus et faisons des filtres de recherche car il n'y a qu'un seul changement que nous voulons apporter parce que nous avons inclus ces ombres d'arrière-plan. Nous voulons faire de même pour ces matériaux et ces cercles. Donc, d'abord pour les matériaux, changeons la couleur du cadre et incluons cette couleur. Maintenant, incluons la couleur de la sensation pour être blanche et enfin inclure une ombre, comme nous l'avons fait pour tous les autres avant. Alors cliquez sur l'ombre, sélectionnez la couleur. C' est celui-ci et simplement réduire le rythme City à 25%. Et maintenant, nous avons un regard beaucoup plus cohérent qu'avant, et nous avons la même ombre sur tous. Et enfin, vous pouvez faire la même chose pour ces points. Alors, nous allons sauter dans une couche de colonne vertébrale. Donc, pour ces cercles, faisons le même endroit. Inclure l'ombre. Donc 55 10. Et si vous pensez que c'est un peu loin, vous pouvez le réduire à, à et peut-être à cinq. Et maintenant c'est beaucoup plus proche, et ça a l'air beaucoup plus agréable. Sautez à l'intérieur de l'ombre et revenez à votre panneau d'actifs afin de sélectionner la même couleur que pour le reste d'entre eux. Donc, comme ceci, assurez-vous qu'il est sur 25% et ce que nous pouvons faire maintenant est d'attendre qu'il a sélectionné copie de clic droit, Sélectionnez ce clic droit coller parents, et cela va les faire regarder exactement le même que le reste off. Notre conception est, vous pouvez voir qu'il semble beaucoup plus agréable et plus important encore, il semble beaucoup plus cohérent avec le reste de notre désir. Dans la vidéo suivante, nous allons entrer et concevoir un écran de combinaison de pièces, donc je vous y retrouverai. 20. Créer un design 3: Alors, nous allons sauter et conçu une combinaison de pièce. Mais avant de le faire, nous pouvons toujours contrôler notre projet, juste pour nous assurer que nous n'avons pas manqué les changements précédents. Donc ce qui n'est pas juste ici, c'est l'image de la mauvaise combinaison. Donc, incluons le 1er 1 Glissez et déposez-le à l'intérieur de ce port d'art, et je vais sauter et fermer tous ces et simplement déplacer tout le chemin vers l'arrière comme ça , puis augmenter sa taille jusqu'à ce qu'il rencontre les bords extérieurs comme ça. Et vous pouvez même l'augmenter beaucoup plus afin que vous puissiez zoomer à l'intérieur de l'image comme ceci. Par exemple, quelque chose ici est bon, et maintenant les gens peuvent dire que c'est Theis Room. Si tu veux faire ça, c'est bon. Mais si ce n'est pas le cas, vous pouvez toujours réduire la taille à environ ici. Disons, et je pense que ça ressemble beaucoup mieux à ça. Maintenant, ce texte que j'ai trouvé, il n'est pas facile à lire, alors changeons-le orteil blanc. Cela peut être tel qu'il est, et maintenant, parce que nous voulons faire l'arrière-plan de l'image comme ici. Changeons ça. Alors, cliquez ici. Sélectionné. Soyez maintenant parce que nous ne pouvons pas distinguer l'arrière-plan de l'image. Cliquez sur l'arrière-plan et sélectionnons le blanc. Et maintenant, c'est beaucoup mieux. Maintenant, nous avons besoin de ce canapé, alors sautez à l'intérieur des canapés. C' est celui-là, donc pour le numéro trois, sautez à l'intérieur d'un sort de calque. Une fois de plus, assurez-vous que vous avez trouvé l'image. Faites glisser et déposez votre canapé à l'intérieur. Peut-être que vous pouvez le placer ici, et réduisons sa taille jusqu'à ce qu'il s'adapte ici. Alors nous allons sauter et nous assurer que c'est au milieu, comme ça. Ainsi, vous pouvez sélectionner le canapé et l'image, et vous pouvez positionner comme ceci aussi. C' est comme ça. Maintenant, nous allons localiser le nom afin disparités Paris. Et pour le prix, c'est 13 68. Alors assurez-vous de changer cela, et un dernier changement que je veux faire est pour la couleur. Donc j'étais comme cette première couleur. Sélectionnez ceci pour la couleur, par exemple, assurez-vous d'inclure une ombre, donc utilisons 22 et cinq. Et pour l'ombre. Sautons à l'intérieur de leur panneau d'actifs une fois de plus. Même affaire. Donc, sélectionnez cette couleur et plus en raison essentiellement de 25%. Maintenant, cela indiquera que cette couleur est sélectionnée pour ce canapé particulier, mais les gens tolèrent sauter à l'intérieur et aller à la page du produit, puis jouer avec elle et inclure d'autres couleurs en vue. Maintenant sauter en arrière orteil sont des couches. Le panneau a fermé toute cette carte, et elle l'a fait. Et assurez-vous que vous pouvez déplacer la deuxième carte ici et maintenant nous allons inclure d'autres objets à l'intérieur. Et pour celui-ci, nous allons utiliser une lampe,par exemple, par exemple, donc la même affaire que nous l'avons fait avant. Sélectionnez la carte BG et pour la couleur de remplissage, assurez-vous qu'il est blanc et pour l'image, assurez-vous que c'est E. B pour qu'il ressemble exactement le même pour tous les autres. Et nous allons utiliser je ne sais pas ce Gênes une lampe, par exemple. Donc, double-cliquez sur le texte. Changez-le et le prix était de 96. Ainsi, lorsque les gens se déplacent avec leurs doigts vers la droite en utilisant la gâchette de piste, que nous allons inclure dans le mode prototypage, ils seront en mesure de localiser cette lampe et de voir qu'elle est incluse en vue. Sautez dans les images, localisez la lampe donc c'est ce 2e 1 glisser et déposez-le juste ici et assurez-vous simplement de réduire sa taille comme ça et vous tolérez le globe oculaire. Assurez-vous qu'il est au milieu comme ça, et si vous voulez bouger, c'est un peu plus vers le haut. Vous pouvez le faire aussi. Donc c'est une lampe. Déplacez-le en dehors de ce dossier. Assurez-vous qu'il est dans le dossier image comme celui-ci et assurez-vous qu'il se trouve en haut. Donc, lorsque vous avez terminé cela, vous pouvez également le déplacer là où il a été réactivé. La carte numéro un, sélectionnez ce 2ème 1 et déplacez simplement avec 20 pixels vers la droite. Même liquide avec tous les autres. Et maintenant cet écran de salon est terminé, et dans la vidéo suivante, nous allons passer à l'élément sélectionné et l'élément sélectionné ajusté, et nous allons faire les mêmes changements pour les deux, et je vais vous montre comment vous pouvez inclure des ombres portées à certains d'entre eux une fois lorsque les utilisateurs sélectionnent ces éléments. Alors je dirai qu'il 21. Créer des conceptions 4: Passons maintenant à l'intérieur et concevons des écrans d'éléments sélectionnés. Alors les premières choses d'abord. Je vais changer la couleur de cette image de héros fond chaque son la couleur sélectionnée et il est de quatre b c A. Huit centre de presse. C' est de couleur légèrement brunâtre. Ensuite, je vais orteil taper également partage maison et que la seule ligne de texte me permet de taper rapidement et sélectionner tout. Sautez ici et changez le orteil blanc et ça a l'air bien et sautez dans nos atouts. Désolé, couche épinière. Et pour le prix, que ce soit 1 24 Mais pour cela, nous allons utiliser cette couleur ainsi pour qu'elle complète la couleur de notre chaise de maison en haut. Alors double-cliquez ici, Contrôle. Vous voyez, je vais cliquer ici. Contrôle. Veto basé sur Cliquez ici. Contrôle. Voir Pas de clic ici. Contrôlez V et assurez-vous qu'il est blanc. Et enfin pour celle-là. Déplacez-le à cette couleur. Pourquoi ne pas sélectionner ce contrôle de couleur ? Voir et sauter en vue et frapper le contrôle V et non, passons à autre chose et, par exemple, peut-être que nous pouvons changer ces couleurs un peu plus tard, mais je veux inclure ces deux images parce que c'est le bit simple. Donc, dans nos dossiers d'images, localisons la chaise principale. Donc, nous avons la chaise principale numéro un, qui est cette image si sélectionnée d'ici. Vous pouvez toujours vérifier votre panneau Calques et vous assurer que vous êtes au bon emplacement. Faites glisser et déposez-le à l'intérieur et continuez. Sélectionnez ce deuxième dossier d'images et glissez-déposez celui-ci en vue, et vous pouvez faire la même chose pour ces deux dossiers afin que vous puissiez l'ouvrir. Sélectionnez la chaise principale numéro un. Cliquez ici et sélectionnez le numéro de chaise principale pour le faire glisser et déposer à l'intérieur afin que nous ayons un look beaucoup plus cohérent. Maintenant, ensuite, nous allons inclure notre image principale. Sélectionnez donc un arrière-plan d'image de héros. Vous pouvez fermer les zones, et à l'intérieur du même dossier, vous avez l'image de partage principale. Faites glisser et déposez-le à l'intérieur et ST ng. Liquidez-le avec tous les autres, il suffit de glisser et de réduire ses yeux regardant décalage. Vous pouvez zoomer un peu plus près, et peut-être que nous pouvons réduire la taille deux quelque part ici, et sélectionner ces derniers pour vous assurer qu'ils sont là au milieu, puis sélectionnez Contrôle Manger. Voir cliquez ici, contrôler V pour le coller exactement au même endroit. Et parce que c'est ainsi que nous l'avons conçu, vous pouvez voir que la chaise sort un peu de ce fond, qui est avec raison, parce que c'est comme ça que nous voulons faire ressembler l'animation. Donc ça va sembler avoir poussé un peu cet arrière-plan et l'état de la chaise au même endroit. Vous pouvez même réduire un peu les sites de la chaise si vous le souhaitez, juste pour accueillir ces liens. Ou vous pouvez simplement le déplacer comme cinq pixels quelque chose comme ça, sorte que cette longueur soit à l'intérieur de cet arrière-plan. Maintenant, enfin, cliquez ici et pour la couleur sélectionnée, se déplaçant juste en dessous de la couleur principale du film. Assurez-vous que vous êtes en blanc et, pour l'ombre, faites la même chose. Liquidez-le avec tous les autres. Alors 22 et le feu parce que c'est plus petit cercle. Assurez-vous que vous avez sélectionné le panneau des ressources. Cliquez ici, puis sélectionnez cette couleur. Même liquide, on l'a dit aux autres. Bien sûr, c'est sur 25 maintenant pour la couleur sélectionnée. Je vais choisir quelque part près de l'orteil blanc. Donc quelque chose comme ça. Et assurez-vous de copier la même couleur pour ce premier écran car c'est la couleur du siège de la chaise. Et c'est la couleur que nous avons choisie. Maintenant. Faites de même pour ce cadre ainsi sélectionné et pour la bordure. Juifs de cette couleur et pour l'ombre, jugeons 55 10 comme nous l'avons fait pour tous les autres. Cliquez ici, puis assurez-vous de sélectionner cette couleur. Assurez-vous que vous avez l'échec sur blanc et pour l'ombre, assurez-vous que vous êtes sur 25% et ce sont les écrans faits. Donc, vous verrez cette animation beaucoup plus en détail lorsque nous arriverons à la partie prototypage de ce cours. Et maintenant passons aux détails de la commande des orteils, qui est notre prochain écran, et nous allons concevoir dans la prochaine vidéo, donc je vous verrai là-bas 22. Créer un design 5: Concevons maintenant les détails de la commande écran. Donc un zoom un peu plus près maintenant pour ce 1er 1 l'ont déjà écrit. Donc, nous voulons tous la chaise hôte lente comme ça et pour le prix 81 24 Pour ce 2ème 1 nous avons toujours été canapé comme ça Et pour un dérangé, nous avons Milan. Un canapé de lampe coûte de 24 à 9 et une lampe coûte 98. Suivant jusqu'à changer dans ce à cela, ceci pour décolorer. Et enfin ceci à ce fond de couleur devrait être blanc, Comme celui-ci et même comme celui-ci pour le rendre beaucoup plus cohérent avec tous ces autres maintenant, parce que ce fond principal est blanc, peut-être ce n'est pas un bon choix. Donc peut-être que nous pouvons inclure une couleur d'arrière-plan ici, ou une image d'arrière-plan ou quelque chose comme ça. Alors peut-être que nous pouvons expérimenter afin que vous puissiez sélectionner les détails de la commande et peut-être cliquer sur quelque chose comme ça afin que vous puissiez voir beaucoup mieux maintenant. Peut-être que nous pouvons même inclure une couleur plus claire si vous voulez, mais je pense que ça a l'air bon pour l'instant. Et peut-être qu'on peut le réduire un peu. Alors allez juste au-dessus de quelques arrêts pour quelque part par ici. Donc quelque part entre ces couleurs pour le rendre beaucoup plus léger, et je pense que ça a l'air bon pour l'instant. Alors maintenant, nous allons sauter à l'intérieur et inclure nos images. Donc, nous avons aussi House Chair de sorte que vous pouvez sélectionner cette carte pour localiser l'image, sauter à l'intérieur de leur dossier d'images glisser-déposer site et même chose que nous l'avons fait avec toutes nos autres images. Il suffit de réduire sa taille jusqu'à ce qu'il s'intègre à l'intérieur de votre image, espace réservé. Donc comme ça et zoomer un peu plus. Et tu peux le positionner comme ça quelque part par ici ? Je pense que c'est bon. Oui, tu peux fermer ça quand tu auras fini et aller à la carte numéro 2. Donc, ce qu'il nous faut, c'est des canapés et un canapé de Lisbonne. C' est le 1er ? Il suffit donc de le mettre ici et de réduire sa taille. Donc même chose. Liquidez-le pour toutes nos autres images. Maintenant, ces processus peuvent être un peu répétitifs, mais comme vous pouvez le voir exactement ont encore quelques bogues et cela va se produire de temps en temps , surtout lorsque vous installez une nouvelle mise à jour alors assurez-vous de garder cela à l'esprit alors qu'il est gratuit. Il y a encore des boîtes de temps en temps, mais vous pouvez toujours les signaler à la voix de leur utilisateur parce qu'ils aiment entendre ces choses. Et ils peuvent alors écraser tous les bogues dans la prochaine mise à jour. Pas Milan. Une lampe est cette boite ici, faites-la glisser en vue et réduisez sa taille Donc elle s'intègre à l'intérieur de notre espace réservé comme ça Et puis déplacez-la juste un peu plus. C' est à quelqu'un d'ici. Voyons et faisons la même chose pour ça comme nous l'avons fait avec le reste de nos images. Et c'est tout. Notre écran est terminé. La seule chose qui nous reste est de remorquer l'amour, le coût. Et si j'écris ici, mettez deux points à l'endroit ou vous pouvez encore mieux le déplacer ici, puis double vite. Passez à la fin de la saisie 2651 parce que c'est le coût total de réduction. Tous ces articles ajoutés au panier, et si les gens veulent les supprimer du courant, ils peuvent glisser vers la gauche, et il supprimera cet article particulier du panier s'ils veulent ajouter plus de pièces. Ainsi, par exemple, pour les chaises, ils peuvent cliquer ici et ensuite vous remercier. Sélectionnez quatre ou n'importe quel numéro de votre choix. Et cela augmentera le coût total. S' ils veulent le réduire et changer d'avis, par exemple, ils veulent juste une chaise. Ils peuvent faire le processus une fois de plus, et cela réduira le prix total sur tous leurs articles à l'intérieur du panier. Donc, dans la prochaine vidéo, nous allons sauter dans le paiement. Et parce que je n'aime pas comment les couleurs de cette carte, euh, ces gardes ont l'air de les changer et d'inclure des couleurs plus agréables à l'intérieur, donc je te verrai là-bas. 23. Créer un design 6: nous avons maintenant conçu les paiements verts. Mais avant nous, vous pouvez cliquer sur les détails de la commande et sur la couleur de votre champ. Cliquez ici, Contrôle. Tu vois ? Ainsi, vous pouvez copier la couleur d'arrière-plan hors de cela. Notre port cliquez ici sur le champ Contrôle V présentateur. Et il inclura la même couleur qu'il l'était sur ce. Notre port maintenant. Juste ici. Ce dont j'ai besoin, c'est le paiement. Donc je vais copier ceci. Contrôle total. Tu vois ? Saute à droite. Votre contrôle V et basé dans localisé le paiement. C' est juste là. Positionnez-le un peu mieux maintenant parce que déjà créé. Et ces ingrédients, je vais les copier. Alors laissez-moi vous montrer rapidement comment c'est fait afin que vous puissiez sélectionner la carte BG et localiser la couleur du champ ici. Mais laissez-moi rapidement sauter à l'intérieur de mon autre fichier et je vais simplement copier cette couleur. Donc, pour le champ, vous pouvez choisir un ingrédient linéaire et vous assurer que vous êtes dans l'autre sens. Donc la couleur claire est sur le dessus. La couleur plus foncée est en bas parce que notre ombre est en bas. Donc, pour la couleur plus foncée ou ce que nous voulons est cette couleur badigeonné lui. Et pour la couleur plus claire, Ce que nous voulons est laissez-moi rapidement sélectionné d'ici. Alors choisissez ce contrôle V basé sur et voici à quoi il ressemble. Et vous pouvez également changer l'apparence du visa et choisir le blanc. Et qui va orteil semble beaucoup plus agréable qu'avant. Ne pas sauter à l'intérieur de votre couche Spinal une fois de plus aller à l'intérieur, les gens sélectionnent voiture BG, puis choisissez un ingrédient linéaire. Maintenant, faites la même chose. Et parce que nous l'avons fait le 1er 1, il s'est souvenu. Et maintenant, tu es plus sombre. La couleur est en bas et votre couleur plus claire est en haut. Donc, pour ce 2ème 1 pour la couleur plus claire, nous allons choisir cette couleur, donc simplement basée dans et pour la couleur foncée. On va choisir cette couleur, et je vais la coller. Donc, c'est une sorte de belle couleur bleue, et c'est une réminiscence hors de la carte du peuple. Donc, comme vous pouvez le voir ici, nous avons déjà un beau design, qui est juste semble beaucoup mieux qu'avant. Et pour finir, il a été juste changé le logo des gens orteil blanc afin que vous puissiez le sélectionner et cliquez ici orteil blanc. C' est donc beaucoup plus lisible qu'avant. C' est tout pour cet écran. Et dans la vidéo suivante, nous allons commencer à concevoir des magasins et peut-être même un menu, puis terminer le processus de conception, alors rendez-vous là-bas. 24. Créer un design 7: ce qui est maintenant conçu. Stockez les emplacements, l'écran et les premières choses en premier. Changeons certaines choses, donc ça va être blanc. Ce cercle va être orange. Je ne peux pas à l'intérieur du cercle, donc reprendre un peu plus près pour que je puisse le sélectionner va être blanc aussi. Et nous sommes allés inclure l'ombre portée. Comme lire avec tous les autres. 55 10. Et sélectionnons simplement cette couleur et assurez-vous qu'elle est sur 25% de réduction de base, donc elle correspond un peu mieux avec toutes les autres. Ensuite, créons simplement un rectangle pour le haut. Donc sauter dans un escalier de sort de couche étaient barre de recherche, les a déplacés en haut, et je vais créer un rectangle juste en dessous. Donc, comme ça, déplacez-le vers le haut et en déplaçant juste en dessous de la barre de recherche. Alors je vois ce qu'on fait. Que ce soit blanc, la bordure soit enlevée, et nous le faisons parce que nous allons mettre la carte juste derrière. Et si nous mettons la carte juste en dessous de ce texte et le champ de recherche, elle ne va pas lire. Maintenant que nous avons créé ce Bijie, alors ne regardez pas ici en tapant Simplement que James va travailler les orteils. Très bien. Cliquez ici, puis localisez la carte. Faites glisser et déposez-le à l'intérieur. Vous pouvez utiliser n'importe quelle carte que vous voulez. J' utilise simplement, um emplacement aléatoire sur la carte comme ça. Et vous pouvez le positionner un peu mieux si vous le voulez, donc vous pouvez peut-être le mettre quelque part par ici. Je pense que cela fonctionne bien et augmenté jusqu'à ce que les coins se rencontrent en haut dans le bas, se déplaçant juste en dessous de l'indicateur de la maison parce que nous voulons cartographier Toby la couche inférieure. Donc tout le chemin en bas. Et enfin, nous voulons augmenter la taille de cette ligne. Donc, comme vous pouvez le voir, l'art ennuyé esprit est 375 afin que nous puissions sauter dans la barre de recherche, localise la ligne et juste taper 375 et assurez-vous que vous le déplacez jusqu'à ce qu'il rencontre avec la fin du tableau d'art. Comme ça Maintenant que nous avons fait ça, nous devons faire quelques changements ici. Nous sommes donc allés sélectionner l'appelant et la couleur sélectionnée, les déplacer quelque part autour de l'emplacement curatif afin que vous puissiez déplacer la douleur ici. Peut-être, et ensuite vous devez l'ajouter à la pat. Donc ça va d'ici à ici. Mais nous allons d'abord changer la couleur hors du chemin de décoloration. Assurez-vous simplement de sélectionner la bordure, puis de changer la couleur. Donc comme ça. Donc, il est orange et un peu plus agréable et clair. Vous pouvez même augmenter la taille pour le rendre à. Et puis ce que vous pouvez faire est de revenir dans une couche, épeler deux fois sur la pat, puis simplement déplacer ces points de pat afin qu'il suit la pat hors de la carte. Donc quelque chose comme ça ne suffit pas de déplacer l'orteil ici, déplacer ce point de pat un peu plus si quelque part par ici, comme ça et ensuite simplement aller à votre départ un endroit juste ici. Vous pouvez également jouer autour. Vous pouvez doubler rapidement pour les faire autour si vous le voulez. Vous pouvez alors même le déplacer comme ça et faire une belle forme d'arc si vous le souhaitez, vous conduisez des critères probables et vous pouvez changer leur position comme vous le souhaitez afin que vous puissiez les abaisser ou les faire comme ça. Vous pouvez double-cliquer ici parce que c'est le coin et vous pouvez double-cliquer ici aussi, si vous pensez que c'est nécessaire. Mais laissons-le comme il est. Et ne réservez pas avec les détails de cette partie particulière. Donc quand tu as fini ça, je veux juste m'assurer que je double-clique ici de toute façon, que je puisse créer un coin sympa, quelque chose comme ça. Peut-être, Et puis je peux simplement changer cet angle, comme ça pour le rendre un peu plus droit. Ensuite, déplacez cela juste une touche, aussi ici comme ça et puis simplement déplacé dans la douleur. Je ne pouvais pas juste un peu au-dessus, alors bougez-le comme ça et ça a l'air beaucoup plus agréable et ensuite simplement bouger dans ces deux-là jusqu'à ce qu'ils se rencontrent ici. Et peut-être que nous pouvons colorer le cercle intérieur avec cette couleur pour que nous sachions que c'est notre point d'arrivée. Et cet écran est terminé. Et maintenant, ce qu'il nous reste à faire, c'est simplement éditer un élément de plus à l'intérieur de notre menu. Suggérez les paramètres ci-dessous ici, Sautez à l'intérieur du panneau des calques. Vous pouvez dupliquer ces paramètres, euh, texte et simplement taper les emplacements de magasin parce que c'est le peu important que les gens auront besoin de regarder orteil pour s'assurer qu'ils sont tous espacés uniformément, et vous pouvez même sélectionner tous les eux et faire comme nous l'avons fait avant. Sélectionnez donc un rectangle. Assurez-vous que vous êtes sur le point supérieur du X. Sélectionnez un rectangle. Sélectionnez ce groupe. Positionnez-le comme si vraiment le rectangle. Et vous pouvez sur le groupe ce groupe. Si vous le voulez ou vous pouvez le croire comme il est. Appelez-le simplement des articles parce que l'emplacement du magasin est vraiment important et que les gens peuvent atteindre les emplacements des magasins . Je ce cri du menu. Maintenant, une dernière chose à faire est de cliquer sur la couche de plage et de frapper simplement neuf, parce que cela va abaisser votre base 80 à 90%. Et parce que cet écran de menu va être un écran de superposition parce que ce sont les grands sur le 90% il sera trop au-dessus de n'importe quel écran où il se trouve, et il va juste montrer un peu en dessous de l'écran et juste un peu en dessous de ce Bijie. C' est tout pour la partie design de notre application dans les prochaines vidéos Off de Siri. Nous allons commencer par le prototypage et je vais vous montrer comment vous pouvez câbler certains de ces écrans et comment vous pouvez choisir les transitions parfaites et comment vous pouvez le présenter à un client un peu mieux qu'il ne l'est maintenant, donc je vais voir vous là-bas. 25. Organisation: dans cette section du cours, nous allons commencer par le prototypage, et avant de faire tout ce que j'organise mes fichiers. Maintenant, vous pouvez faire la même chose est de le lire pour la conception de sorte que vous pouvez copier et coller ce sont des ports et faire une autre copie ci-dessous. Il suffit de placer le prototypage. C' est ce qu'on va faire maintenant. Mais c'est aussi Il y a aussi une autre méthode que vous pouvez utiliser, qui est juste d'utiliser ces écrans comme ils le sont maintenant. J' aime utiliser le bateau hors des méthodes, en fonction de la taille du projet. Si le projet est plus petit, comme celui-ci, j'aime simplement dupliquer toutes ces parties et juste les placer ci-dessous, parce que dans rend notre travail beaucoup plus facile. Cela rend le travail des développeurs beaucoup plus facile, puis les clients travaillent beaucoup plus facilement quand ils le voient. Adobe eggs se souillent si vous choisissez de les informer sur la façon d'utiliser Adobe X D, ce qui est en fait assez simple. Si tu y penses. Si vous avez un grand projet, alors vous pourriez envisager d'inclure tout ce qui est à l'intérieur de cela et de concevoir une partie du projet. Donc, par exemple, imaginez juste que vous avez 200 nos ports ou quelque chose comme ça, alors cela pourrait prendre du temps et faire, et cela pourrait rendre votre fichier beaucoup plus grand qu'il ne doit l'être. Si vous dupliquez simplement ce sont des cartes, par exemple, vous avez 200 pour les cadres de fil, 200 pour la conception, 200 pour le prototypage. Et vous pouvez imaginer que ce fichier peut être assez grand, assez rapide, et cela pourrait prendre du temps pour votre client ing. Les développeurs juste orteil ouvrir et naviguer autour de ce fichier. Mais parce que nous avons 10 écrans à l'intérieur de ce projet et à l'intérieur de la phase de prototypage , nous allons en faire un peu plus parce que nous devons faire quelques animations et quelques ajustements . Et puis il pourrait être évident d'aller pour le robinet de prototypage ci-dessous. Alors choisissons simplement ce design et choisissons. Ce sont des cartes tout simplement critique contrôle ou commande D pour les dupliquer, puis simplement les déplacer juste en dessous et les positionner pour être en ligne, que ceux-ci en haut, vous pouvez utiliser vieux et simplement glisser vers le bas avec cette conception et double cliquez ici et tapez le prototypage pour le prototype. Cependant, vous voulez, puis simplement positionner un globe oculaire il et vous pouvez également faire la même distance qu'il est d'ici à ici. Ainsi, vous pouvez simplement aller, par exemple, à 400. Je pense que c'est quelque chose que nous avons fait pour le design. Donc il suffit de le faire 400 puis de bouger. Tous ces ports sont un peu plus haut pour que vous puissiez accueillir cet espace que nous venons de créer . Donc quelque chose comme ça et c'est tout pour la préparation du fichier. Dans la vidéo suivante, je vais vous montrer comment vous pouvez gérer les écrans manquants et les éléments manquants parce que j'ai volontairement fait quelques éléments manquants du cadre métallique et de la partie design, donc je vais vous y voir. 26. Gérer les écrans manquants: dans cette vidéo, nous allons traiter des écrans manquants et des éléments manquants. Donc, comme pour l'écran manquant va, j'en ai parlé dans les leçons précédentes. Ainsi, par exemple, chacun de ces écrans peut avoir un autre écran supplémentaire ou peut-être quelques écrans supplémentaires sur le dessus. Donc, par exemple, nous avons un écran, et vous pouvez envisager d'inclure ce Lire la suite, qui va aller à la page sur nous, par exemple, nos propres combinaisons. Peut-être que vous voulez inclure un autre écran séparé, qui leur montrera alors les mauvaises possibilités de combinaison. Quelles sont les combinaisons de pièces ? Peut-être que vous voulez raconter l'histoire derrière les combinaisons de pièces et leur expliquer comment il est venu sur la façon dont vous traitez avec les photographes, affaire élevée avec les designers d'intérieur pour créer ces chambres en premier lieu, et ensuite comment vous pourriez veulent présenter ces produits aux consommateurs. Aussi, ici en haut peut-être que vous pourriez vouloir considérer, parce que nous avons créé pour les points pour la pagination off créer pour différents éléments. Donc quatre images différentes qui vont aller à l'intérieur de ce curseur donc vous pourriez vouloir considérer tous ces écrans ou non parce que ce n'est que la première partie de ce projet, et c'est ce que nous avons expliqué au client. Ils veulent juste voir les os nues de ce projet avant d'aller de l'avant, parce que c'est vraiment important. Nous voulons clouer quelques morceaux les plus importants à l'avant et nous avons dû commencer. Et puis une fois que nous avons trouvé les couleurs, typographie, les images , la direction générale, peut-être qu'ils n'aiment pas ces ombres de fond. Peut-être que nous voulons les supprimer orteil, inclure quelques cadres à l'intérieur et certains hors de ces changements quand nous avons tout cela ensemble, alors nous pouvons aller de l'avant et inclure certains de ces écrans supplémentaires. En outre, il est beaucoup plus facile lorsque vous avez tous ces éléments en place pour créer ces écrans supplémentaires , puis de commencer à la place de 10 écrans comme c'est pour ce projet de commencer avec 200 écrans, alors cela rend votre change beaucoup plus compliqué, beaucoup plus de temps pour vous et vos clients. Parce qu'au lieu de fournir des commentaires pour 10 écrans, ils doivent fournir des commentaires pour 200 écrans. Cela rendra leur travail beaucoup plus difficile, beaucoup plus long, et cela signifie qu'ils doivent mettre leur travail sur le site et ensuite simplement travailler avec votre temps plein sur ce projet. Et laissez-moi vous dire, beaucoup de clients n'ont pas ce luxe de quitter leur travail et leur vie derrière et de se concentrer à temps plein sur vous afin que vous puissiez créer ce projet pour eux. C' est pourquoi nous commençons avec 10 écrans. Nous savons que le client le sait, et vous devez dire à votre client, regardez, ne sont pas tous les écrans dont vous aurez besoin. Mais ce ne sont que des écrans de démarrage dont vous allez avoir besoin pour que nous puissions démarrer ce projet afin que nous puissions aller de l'avant et créer des écrans supplémentaires, y compris de nouveaux écrans. Et nous allons le faire dans les autres parties de ce projet. Donc, sans plus tarder, laissez-moi vous montrer rapidement quels sont quelques éléments manquants, Ces éléments que j'ai oubliés exprès juste pour vous montrer ce qui se passe parce que beaucoup du temps quand vous concevez, vous ne pouvez tout simplement pas prédire tout. Peu importe combien de temps vous êtes dans cette entreprise, peu importe le nombre de projets que vous avez derrière vous, beaucoup du Times, vous pourriez négliger certaines choses. Ainsi, par exemple, vous risquez de manquer une icône. Vous pouvez manquer certains boutons, vous risquez de manquer certaines fonctionnalités d'expérience utilisateur. Donc, dans notre cas, j'ai oublié une icône. Donc, si je zoom un peu plus près et, par exemple, vais à cet écran de catégorie, vous pouvez voir l'icône du panier juste ici. Mais si un saut dans la page du produit ainsi sélectionné la page de l'article, vous ne pouvez pas voir l'icône Ajouter au panier. Donc, lorsque les gens appliquent la sélection ou que nous allons changer ceci pour l'ajouter au panier ou par exemple ,maintenant et quand ils cliquent maintenant, , il va l'ajouter au panier. Mais comme vous pouvez le voir, il n'y a pas d'icône Ajouter au panier. Alors comment on va faire face à ça ? Eh bien, c'est simple. Zoom à l'intérieur de cette icône de commande. Créons un cercle. Donc peut-être quelque chose comme ça. Ça a l'air bien. Positionnez-le ici, peut-être juste ici quelque part comme ça. Et créons rapidement le numéro un. Et comme vous pouvez le voir, il est 14. Abaissons-le à 10 voir à quoi ça ressemble. Peut-être qu'on peut le placer au centre de ce cercle. Je pense que ça a l'air bien, mais tu dois le tester. Ainsi, par exemple, s'ils ont ajouté 10 partages afin que vous puissiez taper 10. Et comme vous pouvez le voir, c'est trop grand parce qu'il ne peut pas accueillir ce cercle. Nous devons donc l'abaisser encore plus. Peut-être 28 et je pense que huit a l'air bien. Donc, ce que je veux faire est simplement en créer un pour ce cas et le faire partir du centre et maintenant le positionner au centre de votre cercle. Donc comme ça. Mais parce que le texte a la zone de sécurité autour en haut et en bas. Et si je zoome beaucoup plus près, vous pouvez voir que cette zone en haut est beaucoup plus grande que cette zone en bas. Donc ce que j'aime faire, c'est au lieu d'ici, c'est le milieu. Mais comme vous pouvez le voir, il y a beaucoup plus d'espace vide en haut. J' aime simplement je balle quelque part ici, donc si vous zoomez un peu, vous pouvez voir qu'il est juste au milieu. Maintenant, ce que nous voulons faire ensuite est peut-être que nous voulons essayer dans la bordure créative, qui est l'épaisseur de cette icône juste pour voir à quoi elle ressemble. Mais je ne pense pas que ça aura l'air si bon. Donc trois, comme vous pouvez le voir, c'est à peu près là, mais ça n'a pas l'air si bon. Donc, nous allons simplement en créer un. Et nous voulons supprimer la bordure et pour la couleur du champ. Choisissons simplement cette couleur. Et je pense que ça a l'air bien. juste utilisé le blanc pour le numéro et je pense que ça a l'air bien. Il est lisible et les gens peuvent lire, lire facilement et voir ce qu'il y a à l'intérieur. Donc, ce que nous voulons faire maintenant est de revenir au panneau des calques. Ne regarde pas ici. Tapez en cercles. Je veux juste que vous vous encerclez, allez aux ordres et que vous choisissiez aussi le Contrôle G. et peut-être que vous ne le nommerez pas. Chariot Icahn. Quelque chose comme ça, Control. Tu vois ? Et ce qu'on veut faire, c'est revenir ici. Où sont les icônes Et nous pourrions vouloir déplacer cela un peu, Donc double-cliquez ici. Déplace-le quelque part par ici. Et vous voudrez peut-être sélectionner tous ces éléments alors jusqu'ici, déplacez-les hors du chemin. Donc, une fois de plus, pour ici zoomer beaucoup plus près contrôle V afin que nous puissions le baser. Alignez-le avec le bord inférieur car il a un cercle en haut et vous pouvez le déplacer vers la droite et voir l'espacement entre. Donc, il est à 60 et maintenant vous pouvez les sélectionner une fois de plus, comme si vous zoomez un peu plus près et faites-le 60 aussi. Comme ça. Et vous pouvez également double-cliquer peut peut-être faire quelque chose comme ça. Maintenant, nous avons cette icône et c'est exactement ce dont je parlais. Donc, la plupart du temps, vous pouvez rencontrer ces problèmes, mais vous voulez juste les traiter au fur et à mesure qu'ils arrivent. Donc, par exemple, maintenant que nous avons ah plein icône de panier, nous pouvons l'inclure dans d'autres endroits. Alors peut-être qu'ils ont ajouté un article au panier à partir d'ici afin qu'ils puissent cliquer ici, sauté à cette page pour ce canapé ajouté panier d'orteils et ensuite retourner à la maison ou simplement cliqué ici pour procéder au paiement. Et peut-être qu'ils changent d'avis. Ils ont dit : Ok, Ok, je veux aller à l'écran d'accueil. Ils ont cliqué sur le logo. Peut-être qu'il les emmènera à la maison ou simplement cliquez ici sur le menu, peut-être choisir des emplacements de magasin, profil de mes commandes ou aller ailleurs. Mais ce chariot Icahn restera rempli et ils peuvent cliquer dessus et revenir ici à tout moment. C' est donc à quel point il est important de traiter les écrans manquants pour traiter les éléments manquants. Et cela se produira essentiellement dans chaque projet sur lequel vous travaillez. Donc, il suffit de le traiter comme il vient le long et a expliqué à vos clients que parfois ces choses peuvent passer inaperçues. Parfois, ils vont changer votre mémoire. Ils vous diront d'inclure certaines choses un peu plus tard dans le projet, alors sachez juste quand ces choses se sont produites, traitez-les comme ils viennent dans la prochaine vidéo, nous allons commencer avec nos prototypes, et je vais vous montrer comment vous pouvez dupliquer certains de ces écrans pour créer des animations impressionnantes. Donc, je vais voir là 27. Prototyping 1: commençons maintenant avec le prototypage face à ce projet et avant de commencer, je veux juste faire quelque chose de clair. Je suis allé de l'avant et enlever une extension des noms ST Ng comme avec elle pour la partie design , si vous vous souvenez, juste pour couper, parfois court pour le discours. Donc, ce que je veux faire maintenant, c'est sélectionner la maison et en faire deux copies. Donc, il suffit de tenir mon ancienne clé et de la faire glisser ci-dessous et de nous faire dans la même une fois de plus. Comme ça ? Alors pourquoi j'ai fait ça ? Parce que je veux faire un déclencheur de glissement pour cette section ainsi que attirer le déclencheur pour cette section afin que les gens puissent glisser et voir un élément différent à l'intérieur de cette section. Donc, comment nous pouvons faire cela est étaient toujours à l'intérieur de notre robinet de conception. C' est là que vous faites tout votre design. Et lorsque vous êtes prêt à commencer à vous prototyper, il suffit de cliquer sur chaque onglet d'emballage, puis de passer à celui-ci et vous pouvez toujours passer d'avant en arrière entre les deux. Donc, pour commencer, nous sommes sur le deuxième écran. Alors à la maison deuxième, et peut-être que vous pouvez même les nommer comme si c'était une maison à et puis sauter ici et puis sélectionner la maison trois juste pour qu'ils puissent Vous savoir ce que vous faites et où vous êtes. Donc à la maison pour affaiblir, Sélectionnez cette section la plus populaire et cliquez sur l'image 123 maintenez le décalage, puis simplement les déplacer juste ici jusqu'à ce qu'ils rencontrent notre guide sur la droite. Et une fois de plus, c'est là que nos guides sont si puissants et si importants pour que nous puissions revenir à la maison trois et ensuite faire la même chose pour les combinaisons de pièces. Donc sélectionné combinaisons de localisateur image 123 et puis simplement les déplacer tous pour entendre. Et maintenant, nous pouvons commencer le prototypage afin que vous puissiez cliquer sur le numéro de la maison un saut à l'intérieur du prototype, et ce que nous voulons faire est de cliquer sur ce premier objet afin que Milan, une lampe dans notre cas, et puis simplement le faire glisser ici et pour l'interaction que vous pouvez utiliser glisser, vous pouvez utiliser auto animate home pour est la destination et pour l'assouplissement. Peut-être que nous pouvons les utiliser et nous allons cliquer sur le nom de l'Our Port Click Play juste ici pour le tester et voir à quoi il ressemble. Donc, vous pouvez voir que c'est le déclencheur de glissement. Et maintenant pour revenir en arrière, il suffit de cliquer ici sur ce 1er dragon de retour. Il aura l'air exactement la même interaction. Et si je clique ici, puis jouer et utiliser le déclencheur de piste une fois de plus, Comme vous pouvez le voir maintenant, nous pouvons y revenir. Donc, c'est une petite animation vraiment cool avec l'assouplissement. Donc, quand tu lâches, ça coule en quelque sorte. Maintenant, comme vous pouvez le voir, parce que ce notre port est étendu vers le bas, vous pouvez également faire défiler vers le bas et localiser notre processus. Mais ce que nous voulons, c'est passer à la deuxième section. Donc, pour la maison trois, nous voulons faire la même chose. Lisez les combinaisons de pièces. Donc, il a sauté à la maison. Un. Sélectionnez Ce 1er 1 vous pouvez zoomer un peu, puis faites simplement glisser sur cette étroite vers le bas, utilisez exactement les mêmes paramètres que vous l'avez fait avant et faites la même chose qu'avant. Alors pourquoi le 1er 1 ? Pourquoi pas le 2e 1 ? Eh bien, parce que le 2ème 1 vous pouvez voir que nous avons cet état. Donc il est déplacé juste ici pour la section la plus populaire, et le 1er 1 ils sont tous dans leur état d'origine, donc c'est ce que nous voulons créer. Donc, si je saute ici, frappe, joue et fais ça, tu peux voir que ça marche très bien. Et je peux aussi le faire et ça marche très bien. Ensuite, nous allons rapidement aller de l'avant et faire cela. Faites de même pour certaines de ces icônes. Donc, pour l'icône du menu, nous pouvons sauter en arrière et cliquer ici. Donc, au lieu de cela, hors de la gâchette, nous voulons utiliser le robinet. Donc, au lieu du glissement, vous voulez utiliser pas à la place de l'action ou de l'animation de l'orteil. Vous voulez choisir trop parce que vous voulez que cette superposition d'orteil d'écran sur le dessus de cet écran, et maintenant vous voudrez peut-être revenir en arrière. Donc, lorsque vous cliquez sur cette icône X ici, faites glisser l'orteil ici, Step seulement la maison se dissout donc il va revenir en arrière et nous allons rapidement tester afin qu'il joue frappé ici, et comme vous pouvez le voir, il va superposer en haut de l'écran, et lorsque vous cliquez sur Actes, il va le fermer à nouveau. Donc, vous pouvez le faire rapidement pour tous ces écrans si vous le voulez, mais nous allons sauter orteil à l'intérieur. Ça en fait partie. Plus tard. Et maintenant, animons rapidement les zones afin que vous puissiez cliquer sur la recherche et cela vous mènera à la recherche ici ou juste ici. Vous pouvez choisir, comme vous voulez les organiser. Alors passons rapidement aux filtres parce que je veux rechercher par filtres. Maintenant, c'est un robinet. Ce n'est pas trop, c'est une transition, et vous voudrez peut-être choisir cette nation. C' est celui-ci et l'animation que vous pouvez choisir, dissoudre ou vous pouvez choisir une légère glissière à gauche. Peut-être qu'on peut s'en remettre à celle-là, alors essayons-le. Voyez à quoi ça ressemble. Jouer. Cliquez ici et il glissera à partir du haut. Et j'aime comment cela ressemble donc vous pouvez simplement cliquer ici près et il vous ramènera , orteil certains de ces autres. Donc, nous allons utiliser cette transition maison glisser vers le haut ou peut-être légèrement vers le bas. Alors cliquez ici, appuyez, jouez, cliquez ici, et quand je clique ici, il fera la même chose et sautera en arrière. Donc, il est venu et sauter en arrière. Et une dernière chose qu'il nous reste à faire pour cet écran est de cliquer ici sur l'icône du panier. Peut-être que vous pouvez zoomer un peu plus près comme ça, puis simplement et le faire glisser vers votre panier. Donc, pour commander les détails, étape, transition ou les détails. Et au lieu de ce léger bas, peut-être que vous pouvez légèrement légèrement à droite, par exemple, juste pour voir à quoi cela ressemble. Donc, en un clic juste là, il va légèrement à droite. Et j'aime comment ça ressemble et une dernière chose à faire. Vous pouvez choisir si populaire et vous pouvez peut-être cliquer sur pour voir vieux. Et cela vous mènera à cette section. Donc, Tep et au lieu de glisser morsures droites Juifs se dissolvent et enfin itinéraire combinaisons de salle. Peut-être que nous pouvons choisir ce 1er 1 parce que c'est notre 1er 1 Et parce que nous ne pouvons pas aller de là , peut-être vous pouvez choisir Seal parce que nous l'avons utilisé pour cette partie hors de l'animation, nous pouvons juste voir tout cliquer ici. Il nous mènera à la combinaison de la salle de séjour robinet de transition et peut-être que nous pouvons choisir légèrement à gauche dans ce cas. Donc, testons-le rapidement pour que tout cela fonctionne correctement. Et si je clique sur le sceau, vous pouvez voir qu'il nous emmène au salon. Et quand je clique sur ce cycle si sélectionné, il peut nous prendre orteil cet écran une fois de plus. Alors, au lieu de la légère gauche, choisissons légère, non ? Donc, une fois de plus, à la maison, cliquez ici, combinaisons de Rome. Alors voyez tout Ok, j'aime ça et je peux retourner à l'écran d'accueil et c'est tout pour cette première vidéo. Dans la vidéo suivante, nous allons passer aux filtres de recherche d'écran de catégorie et ainsi de suite, donc je vais y voir. 28. Prototyping 2: Allons maintenant de l'avant et ennemis ces autres écrans. Donc, pour l'écran de catégorie, si vous sautez ici, il nous mènera à l'écran de recherche. Et peut-être que nous pouvons aller ici, par exemple, parce que c'est ce que nous voulons. Et au lieu de la diapositive droite, vous pouvez choisir dissoudre lorsque je clique sur Insight et sélectionnez ce savon icône pour les commandes. Je peux aller aux détails de commande utilisés. Ces vieux peut-être, et vous pouvez toujours sauter en arrière et cliquer sur certaines de ces icônes et voir ce que vous avez fait. Donc tu peux sauter. Voyez où il est juste ici, et vous pouvez voir sa lumière droite afin que vous puissiez utiliser exactement la même animation pour elle, sorte que vous pouvez cliquer dessus en zoomant un peu plus près, voir si elle est sélectionnée. C' est, Et comme vous pouvez le voir, c'est juste ici, au lieu du résultat, glisser à droite afin que vous puissiez utiliser exactement la même animation dans chaque écran. Maintenant, enfin, nous allons utiliser le menu, alors cliquez ici, sautez dans le menu afin de taper au lieu de la transition, vous pouvez choisir trop, et vous pouvez aller à la légère vers le bas. Même chose située pour l'écran d'accueil, et vous pouvez toujours vérifier et voir si vous avez fait juste cela. Donc au lieu de se dissoudre comme il est juste ici. Peut-être que nous pouvons choisir légèrement vers le bas juste pour avoir cette cohérence dans notre écran. Donc, si je clique ici, cliquez sur le menu. Ce sera légèrement bas, et si je clique quelque part, ça nous emmènera ici. Mais au lieu du X ici, parce qu'il nous amène toujours à l'écran d'accueil, nous voulons le supprimer. Donc, quand on clique sur n'importe lequel de ces sous les écrans, il veut nous ramener à la maison. Mais restez sur cet écran particulier afin que vous puissiez le trouver de temps en temps. Donc, quand vous animez, cliquez ici que quelque part par ici. Il va juste le fermer et ne pas revenir à l'écran précédent que vous alliez rencontrer enfin pour cet écran. Cliquez sur trier par, et il vous mènera à cet écran et au lieu de la transition trop choisissons et ce que je veux, par exemple, est de choisir légèrement droite et de voir à quoi cela ressemble. Cliquez ici, donc trier par diapositive, n'est-ce pas ? Je pense que ça a l'air bien et ST Ng comme nous l'avons fait avant. Donc, nous voulons supprimer cette icône X et essayer à nouveau. Alors cliquez ici. Alors glissez à droite. Et comme vous pouvez le voir maintenant, nous voulons orteil Ajouter quelques écrans supplémentaires juste ici afin que nous puissions appliquer la sélection. Et de cette façon, il nous ramènera à cet écran particulier. Alors maintenant que nous avons animé tout cela, peut-être que vous voulez cliquer sur le logo qui nous mènera à l'écran d'accueil. Alors appuyez sur, peut-être que vous pouvez utiliser l'animation automatique. Mais passons simplement à la transition et peut-être que vous pouvez choisir le diesel, donc quoi que vous ayez le logo, il vous emmènera à l'écran d'accueil. Alors maintenant, nous allons choisir ce filtre de recherche et animons. Mais avant de frapper le contrôle ou la commande s afin que nous puissions dire notre projet et nos changements. Donc, ce que nous voulons pour cet écran est simplement de revenir à la partie design. Tenez votre ancien ou option, continuez à sauter en bas et ce que nous voulons est de les fermer et de les ouvrir et enfin de les faire appliquer. Donc ce sera celui-là. Maintenant, ce bouton devrait être génial pour cette première partie. Alors choisissez cette couleur ou peut-être même dans cette couleur, Voyons voir. Oui, et pour le texte sélectionné Couleur plus foncée. Donc quelque chose comme ça choisir les mêmes paramètres pour celui-ci parce que ça va être génial . Et puis lorsque vous appliquez, lorsque vous faites vos sélections, il vous montrera le bouton de sélection d'application, qui vous ramènera à cet écran. Donc, ce que nous voulons pour le personnel est de changer une partie de cela et de l'ajouter, certains d'entre eux. Donc, ce que vous voulez pour la flèche du prix vers le bas, vous pouvez le retourner vers le haut, donc parce qu'il sera fermé et tout cela va être caché. Donc, au lieu du prix et de la gamme, tout ce sera des matériaux cachés, même Pensez donc localisez la flèche vers le bas et retournez-la pour que tous les matériaux iront juste ici afin que nous puissions avoir le même espacement et vous allez cacher tout ce qui est situé à l'intérieur cette section de matériaux et enfin lavable et mécanisme Meghan. Vous pouvez déplacer ces deux sections vers le haut et avoir le même espacement que pour toutes les autres, comme ça Donc, comme vous pouvez le voir, toutes sont fermées, et maintenant quand vous cliquez sur certaines d'entre elles, nous devons donc cliquer sur le prix et sur les matériaux pour ouvrir ces sections afin que le prix et les bijoux soient ouverts. Mais supprimons ce cadre et croyons simplement le texte. Ainsi, lorsque les gens cliquent sur ce cadre, il les montrera et sera ouvert, et vous pouvez faire quelques changements supplémentaires. Donc, par exemple, peut-être que nous pouvons le faire fermer sur cet écran et ensuite en faire un autre. Donc, comme ça. Donc jusqu'à ce que, comme ici , oui et non, ce sera notre dernier écran. Et pour celui-ci, utilisons les mêmes paramètres que nous l'avons fait avant. Donc comme ça, et je vais te montrer ce que je veux dire. Donc, sur ce 1er 1 tous sont fermés sur ce 2ème 1 Juste ce 1er 1 est ouvert, alors nous allons entrer et fermer les matériaux. Donc une fois de plus, Flèche vers le bas devrait être en place, et cette lettre et caillot va être caché, et vous pouvez déplacer tout cela un peu vers le haut et les faire 20 pixels d'eux. donc à part, 20 pixels sur tous. Donc ça va être notre 1er 1 sur notre 2ème 1 Il va être ouvert, mais juste le cadre sera caché et enfin juste ici. Lorsque vous le sélectionnez, il va apparaître et il va vous montrer ce cadre. Alors maintenant, allons de l'avant et animons tout cela. Donc, ce que vous pouvez faire est lorsque vous cliquez sur Trier par, il vous mènera à cet écran. Donc, nous allons sauter le prototype de l'orteil, alors triez par cet écran et testons rapidement. Voyez si ça marche. Il le fait, et maintenant ce que nous pouvons faire est de cliquer sur le prix sur la flèche et il vous montrera cet écran Donc, la transition de robinet serait auto animates parce que nous voulons que cette belle animation. Et encore une fois lorsque vous cliquez sur ces matériaux, par exemple, et vous pouvez zoomer un peu plus près si vous ne pouvez pas sélectionner l'icône directement et utiliser le même ennemi automatique pour assouplir les filtres de recherche ici. Et enfin, lorsque vous cliquez sur l'échelle, mêmes animations ici, il vous emmènera ici, et enfin, quand vous cliquez, appliquer la sélection. Il vous ramènera à cet écran, et pour cela nous choisirons la transition et pour la transition, vous pouvez choisir dissoudre. Alors testons tout ici pour jouer. Donc, quand je clique sur trier par, il nous mènera à cet écran Prix Cliquez. Il ouvrira cet élément de prix. Cliquez sur les matériaux. Il ouvrira ce grec sur la lettre. Il vous montrera comme une sélection et enfin appliquer la sélection, et il vous ramènera à cet écran. Donc, c'est fondamentalement tout pour cette vidéo est que vous pouvez voir parfois vous devez faire quelques écrans supplémentaires et quelques changements supplémentaires. Mais c'est assez amusant parce que vous pouvez faire ces animations. Et enfin, si vous voulez fermer tous les sauvegarder, vous pouvez simplement aller dans l'autre sens et cliquer sur ces flèches et revenir en arrière et l' ingénierie inverse pour revenir à cet écran. Mais je l'ai trouvé beaucoup plus facile de cliquer. Appliquez des sélections, car c'est ce que les utilisateurs feront dans la prochaine chose. Nous allons sauter dans et faire quelques animations sur la combinaison de la pièce, et je vais vous montrer comment vous pouvez faire une belle animation à l'image de fond aussi . Alors je te verrai là-bas. 29. Prototyping 3: était de sauter à l'intérieur et de créer une animation pour le mauvais écran de combinaison. Donc, une fois de plus sauter dans la partie de conception, maintenez vieux et obligé vers le bas. Alors placez-le ici et ce que nous voulons ici, c'est de déplacer ça vers la droite. Alors sautez à l'intérieur, localisez la carte une et la carte pour simplement sélectionner les deux et les déplacer juste ici. Et ce que nous voulons aussi, c'est de déplacer cette image de fond un peu si quelque part comme ici, peut-être. Et ce que vous allez voir ici, c'est une légère animation. Lorsque vous sautez en arrière et en avant, Donc sauter dans l'augmentation du prototype et ce que vous voulez est de cliquer ici, faites glisser vers le bas ci-dessous. Le déclencheur est un glissement, animation automatique et l'assouplissement que vous pouvez utiliser est sorti. Alors comment cela semble probablement pleuré ici. Donc avant que nous ne le fassions, revenons à ici. Donc, faites glisser l'animateur automatique en combinaison est sorti et maintenant nous pouvons frapper aperçu. Donc, lorsque l'écran précédent s'est ouvert, voici à quoi cela ressemble. Donc vous pouvez voir que nous avons cette belle animation de fond sur cette image. Donc, vous pouvez imaginer si vous avez plus de cartes ici. Donc, si vous avez trois ou quatre, par exemple, vous pouvez alors déplacer l'image un peu moins vers la gauche, et alors toute cette animation aura l'air beaucoup plus agréable et beaucoup plus propre qu'elle ne l'est maintenant. Alors imaginez que vous avez trois ou quatre cartes de plus et les images beaucoup plus blanches, et alors vous pouvez montrer beaucoup plus de détails maintenant parce que ces images libres d'air que j'ai prises d'une splash qui viennent avant que le client ait déjà leurs propres images. Imaginez que tous ces éléments soient parfaitement positionnés. Donc, dans cette première carte, disons qu'ils vendent cette lampe. Et quand vous passez à cette deuxième carte, disons qu'ils vendent ce cadre sur la troisième carte. Disons qu'ils vendent une lampe ou quelque chose comme ça. Donc, partout où l'utilisateur se déplace, ces chariots, ces éléments apparaîtront, puis peuvent simplement frapper sur certains de ces éléments, puis ouvrir les pages dédiées pour ces produits particuliers. Donc c'est vraiment une arme puissante que vous avez juste ici à l'intérieur d'adobe eggs D que vous pouvez explorer et ensuite vous déplacer. Et enfin, ce que nous voulons pour cet écran est de choisir cette image, disons ou cliquez sur le Paris, peut-être et puis faites-le glisser sur cet écran. Ce que nous voulons un pas. Nous ne voulons pas Auto ennemi orteil en transition et nous voulons que ces vieux sont sortis. Donc, une fois de plus, comment cela ressemble à un jeu de frappe et vous pouvez les déplacer autour. Et quand vous voulez sélectionner ce hit sur le nom et il vous emmènera ici Maintenant, imaginez juste que c'était la chaise et non le canapé, parce qu'une fois de plus, nous utilisons des images libres, et le client n'a pas encore fourni leurs propres images. Mais une fois qu'ils le feront, et une fois que nous entrerons dans la phase finale de ce projet, tout fonctionnera beaucoup plus harmonieusement et sera beaucoup plus beau qu'il ne l'est maintenant. Donc, je vous vois dans la prochaine vidéo, où nous allons commencer avec les écrans d'éléments sélectionnés, et nous allons ajouter une animation subtile à ce fond et à cette chaise, donc je vais y voir 30. Prototyping 4: animons maintenant cette sélection d'éléments écrans. Mais avant nous, parce que c'est assez long. Nous ne voulons pas que les orteils fassent copie juste ici, mais plutôt sur la droite. Donc, ce que vous pouvez faire est de déplacer certains de ces écrans, juste sauter dans la partie design de celui-ci, les déplacer juste ici, puis simplement faire le contrôle de pour celui-ci, puis simplement les glisser en position comme ça. Alors pourquoi nous avons fait ça, c'est que nous voulons faire celle-là. C' est donc notre 1er 1 sans aucune sélections dessus. Ensuite, nous voulons faire le 2ème 1 pour la couleur, puis le 3ème 1 pour la taille. Alors laisse celui-là comme si c'était celui-là. Laisse la couleur et on va se cacher pour la taille. Nous allons cacher le cadre, comme ça Et au lieu d'appliquer la sélection Si vous vous souvenez, nous l'avons changé pour acheter maintenant. Donc nous allons le faire pour ces deux boutons. Donc nous allons taper maintenant, Contrôle. Tu vois ? Non, super ici, Contrôle V juste pour gagner un peu plus de temps, vous pouvez les fermer tous et maintenant nous pouvons faire notre animation, donc s'il vous plaît consulter cet article. Sautez dans les douves de prototypage et ce que nous pouvons faire est pour cette flèche. Si je l'ai sélectionné et que je le fais glisser, nous pouvons revenir à l'écran de combinaison de la pièce, et ce sera une transition étape au lieu de la dissolution. Allons à gauche et voyons à quoi ça ressemble. Pour qu'il joue. Et quand je clique ici, il va légèrement à gauche. Ou peut-être que nous pouvons le changer à droite, parce que cela aura un peu plus de sens si vite. Juste ici. Cliquez, jouez et appuyez sur la diapositive, non ? Comme vous pouvez le voir, c'est le cas. Donc maintenant ce que nous pouvons faire est lorsque vous cliquez sur cette couleur ici, il vous mènera à cet écran et à la place hors transition. Nous voulons choisir ou orteil animate est sorti. Trois secondes. Ça a l'air bien. Donc maintenant, si je clique ici, appuyez, jouer et sélectionné la couleur. Comme vous pouvez le voir, il a bougé juste un peu et il a introduit ce bouton d'achat maintenant. Donc maintenant ce que nous voulons est frappé juste ici pour que nous puissions faire une sélection pour la taille. Laissez tout cela comme il est parce que nous voulons exactement la même animation alors frappez dans le 1er 1 Et quand un hit ici, vous pouvez voir l'animation est juste en mouvement légèrement Cette couleur vers le haut Cliquez ici. Comme vous pouvez le voir Maintenant, nous avons cette sélection et enfin, ce dont nous avons besoin est un bouton d'achat maintenant. Donc, quand vous cliquez juste là, peut-être que nous voulons inclure un écran de plus juste ici pour que nous puissions animer cela. Mais déplacons-le d'ici. Détails de commande des orteils Alors cliquez ici, puis juste ici, Tap. Nous ne voulons pas d'autonomie en transition. On veut se dissoudre est sorti trois secondes. Taux cyclique ici hit play. Et quand vous cliquez maintenant, il prendra cet écran. Mais nous voulons faire la même chose à partir d'ici. Parce que les gens ne veulent pas que les orteils fassent une sélection pour cette glace. Peut-être qu'ils veulent aller pour la taille par défaut de n'importe quelle taille il est. Alors peut-être qu'ils peuvent cliquer maintenant d'ici au lieu d'ici. Mais la majorité des gens vont sauter ici maintenant si c'était 59 centimètres dans ce cas, ce prix juste ici va mettre à jour, et puis il va mettre à jour ici aussi bien. Mais parce que nous avons gardé cela simple avec 1 24 pour le prix. Comme vous pouvez le voir, c'est la même chose ici. Total est celui-ci juste ici. Nous voulons donc le garder aussi simple que possible pour ce processus. Donc je pense que ça a l'air sympa. Une fois de plus, cliquez ici. Il jouait juste pour qu'on puisse voir à quoi ça ressemble. Et vous pouvez voir que vous pouvez également faire défiler vers le bas et en savoir plus sur ce produit. Ça a l'air sympa. Donc, quand je clique ici, une légère animation se produit. Vous pouvez frapper la taille, donc juste ici et vous pouvez cliquer maintenant. Il vous mènera à cet écran. Maintenant, enfin, nous voulons animer ces trois icônes, alors cliquez sur eux séparément comme il vous mènera à cet écran donc dissous semble bien ici et enfin juste ici. Donc, quand je clique sur l'un d'eux et puis cliquez sur l'icône, cela me conduira à cet écran. Donc je pense que ça a l'air sympa. Cela semble simple parce que c'est ce que le client voulait en premier lieu. Et je pense qu'on a fait du bon travail pour ces écrans. Maintenant, dans la prochaine vidéo, nous allons sauter dans le remorquage, commander des détails et créer une animation agréable pour le balayage et enlever certains de ces articles du panier, donc je vous y verrai. 31. Prototyping 5: Ne nous laissons pas entrer et créer des animations pour l'écran de détails de commande avant que je ne nous contrôle juste pour que je puisse sauvegarder notre projet. Donc, ce que je veux est de sauter dans l'onglet de conception, tenir mon encombrant et faire deux copies. Donc comme ça, et peut-être que vous pouvez localiser où était celui-ci. Si vous pouvez l'aligner à ce que c'est, alors créez une copie de plus ci-dessous, assurez-vous qu'ils sont de la même hauteur. Et pour celui-ci, ce que nous voulons est de sélectionner la carte à la voiture trois et de les aligner vers le haut avec la carte une, comme ainsi et la carte une, nous allons la cacher, donc ça ne va pas être visible, et nous souhaitez mettre à jour le détail de la commande car nous l'avons supprimé du panier. Donc ce que je veux est de localiser ma calculatrice et c'est 2429 plus 98 ça va être de 5 à 7 maintenant. Donc, comme ceci à 5 à 7, parce que le prix mis à jour parce que nous avons retiré un article du panier. Donc ce que nous voulons ici, c'est d'enlever cette chaise hostile de la maison d'ici. Donc, je veux simplement le supprimer comme ainsi et double-cliquer sur zéro sur mon clavier pour abaisser la capacité à zéro. Et ce que je veux maintenant, c'est essayer de le rencontrer. Donc, je vais aller au prototype. Je vais cliquer sur cette carte, faire glisser et descendre jusqu'ici et ce que je veux est faire glisser Auto. Tout assouplissement de la viande est sorti. Et voyons à quoi ça ressemble. Donc il jouait à Drag ça comme ça. Et comme vous pouvez le voir, il l'a supprimé de cet écran. Maintenant, ce que vous voulez de cet écran vers le bas, c'est que nous voulons animer l'écran entier. Il suffit de cliquer sur le nom des tableaux sombres, cliquez ici, faites-le glisser vers le bas. Ce qu'on veut, c'est du temps. Parce que quand on l'a traîné ici, on n'attend pas un peu. Et puis allez ici à cet écran. Donc délai, Ce que nous voulons est peut-être une seconde auto anime l'action est sortie. Est la durée d'assouplissement est de 0,3 secondes et enfin ce que nous voulons est de cliquer ici. Continuez. J' ai pris le paiement. Allez à cet écran alors appuyez sur, car l'arrière-plan est le même. Nous voulons utiliser le robinet auto animate, peut-être et le paiement et juste nous allons voir à quoi cela ressemble. Alors cliquez sur ce 1er 1 clic jouer. Donc, quand je l'ai retiré, lâche-toi. Il va attendre une seconde, puis déplacer ces deux vers le haut en position. Et comme vous pouvez le voir, Total a également mis à jour. Alors juste frappé. Jouez encore une fois, voyez à quoi ça ressemble. Alors faites attention au total. Il est 2651 Et quand je fais ici et comme vous pouvez le voir, total mis à jour ici et maintenant nous avons juste ces deux articles dans le panier. Encore une chose que nous pourrions concevoir cette fonction. Donc, lorsque vous cliquez sur la flèche et vous pouvez choisir ainsi, par exemple, à des pièces pour les pièces, cinq pièces, quelque chose comme ça, le prix sera mis à jour ici dans le total. Mais nous ne le ferons pas parce que le client était plus intéressé par la façon dont cela va fonctionner. Donc, une fois de plus, cliquez ici, appuyez sur Play et, comme vous pouvez le voir glisser, supprimez-les. Total mis à jour. Passez au paiement. Et comme vous pouvez le voir, nous sommes maintenant sur l'écran de paiement et faisons rapidement les ajustements sur l' écran de paiement Passez bien, alors cliquez ici et peut-être que nous voulons sauter dans l'onglet de conception et faire une copie rapide. Donc, déplacez avec ci-dessous, comme si Parce que ce que nous voulons est de supprimer ces ombres portées du premier écran. Donc, sur la carte de crédit, vous pouvez choisir BG et simplifier l'ombre à la même chose pour la voiture de PayPal. BG a enlevé l'ombre et juste ici sur le 2ème 1 nous voulons enlever l'ombre des gens parce que le client veut payer par la carte. Voici comment ça ressemble à un prototype. Une fois là, vous pouvez sélectionner la flèche et revenir ici. Donc, touchez au lieu d'animer automatique, vous choisirez la transition avec des résultats légers. Oui, parce que vous voulez retourner à cet écran et ce que nous voulons. Nous voulons donc mettre à jour le total. Mais peut-être que nous voulons qu'ils aillent soit leur donner la possibilité de passer à partir de cet écran ou de partir de ce troisième écran. Donc, dans le cas ou si vous choisissez de passer à partir de ce troisième écran et juste avoir deux articles, vous voulez mettre à jour le prix. Mais je veux juste le faire comme ça. Alors peut-être que je peux cliquer ici, faire glisser d'ici, tapoter ou à n'importe quelle viande il est sorti. Donc, c'est bien. Et enfin, nous voulons choisir la carte, puis sauté à ici et défausser le sélectionné. Effectuer un paiement, et ce que nous voulons, c'est qu'ils retournent à l'écran d'accueil, par exemple. Donc ça va être la transition. Dissolution est terminée, et la durée va être d'une seconde parce que nous voulons attendre un peu avant de le faire. Enfin, un dernier changement est à ce bas parce qu'ils ne peuvent pas le sélectionner avant de choisir leur paiement. Donc, ça va ressembler à ces autres boutons que nous avons conçus auparavant. Donc, enfin, voyons à quoi ressemble notre animation, Donc il saute de l'ordre. Détails. Cliquez ici pour cliquer sur le jeu, procéder au paiement. Nous sommes là, donc le prix est le même que vous pouvez voir. Ils ne peuvent pas cliquer, effectuer un paiement avant d'effectuer une sélection. Donc, lorsque vous cliquez ici, cette ombre d'arrière-plan apparaîtra, et maintenant ils peuvent effectuer un paiement. Ils peuvent cliquer ici, et quand ils ont payé, il peut les ramener à l'écran d'accueil. Maintenant, une dernière chose que nous voulons faire est de cliquer ici. Vous pouvez proposer un déclencheur temporel entre ceci et ceci afin que vous puissiez créer une autre copie hors cet écran faisant aller d'ici à ici en utilisant le déclencheur temporel, puis de retour à l'écran d'accueil , euh, en utilisant la dissoudre indécente sélection. Et peut-être qu'on veut le rendre un peu plus grand. Donc deux secondes. Voyez à quoi ça ressemble. Donc quand tu seras là, je peux jouer à frapper, faire un paiement. Et, comme vous pouvez le voir, deux enjeux de seconde pour revenir à cet écran. Donc c'est vraiment facile. C' est très simple. Comme vous pouvez le voir, il suffit de faire ces changements et que vous voulez juste vérifier rapidement cela. Ainsi est la durée de sortie. Peut-être que c'est une seconde et juste vérifier ça, voir à quoi ça ressemble. Donc, quand ils cliquent sur la carte, il faut une seconde pour que cet orteil d'ombre de fond apparaisse. Peut-être que vous pouvez même créer un cadre autour de cette carte juste pour indiquer un peu mieux qu'il n'a sélectionné. Mais je pense que cette ombre de fond fonctionne assez bien avec notre design Orel. Donc dans la dernière vidéo, on va sauter dans les magasins et le menu, et je vais vous montrer ces fosses aussi, donc je vous y vois. 32. Prototyping 6: maintenant, enfin, animons les emplacements des magasins et les écrans de menu. Mais avant nous, je viens de réaliser quelque chose, et ça va arriver beaucoup quand tu dessines. Parfois, vous incluez des choses qui ne sont pas nécessaires pour certains écrans ou certaines pages si vous faites la conception de site Web, et dans notre cas, c'est cette icône. Donc, ce sont les ordres. Je ne peux pas entrer les détails hors commande, parce que pourquoi auriez-vous besoin d'une icône de commande à l'intérieur des détails de commande ? Parce que tu es sur cet écran pour que le Seiken ne fasse rien. Donc, nous allons sauter dans la partie design hit, delete, et nous allons faire la même chose pour tous ces autres écrans, et je vais sauter à l'intérieur et le supprimer pour la partie design aussi bien. Alors cliquez ici, supprimé d'ici et enfin sauté à l'intérieur des détails de commande dans notre câblage et supprimé de là aussi. Donc, comme vous pouvez le voir, il est assez simple orteil faire ces changements simplement sauter à l'intérieur de certains de ces écrans et faire les changements. Mais ces choses vont arriver de temps en temps parce que vous travaillez sur ce projet à temps plein et que vous y avez consacré votre temps et votre énergie. mais parfois on fait certaines de ces petites erreurs. Donc maintenant, enfin, faisons des animations pour les emplacements des magasins. Donc, disons que vous y allez à partir de cet écran ou de tout autre écran où vous avez cette icône de recherche. Il vous emmènera à cet écran particulier et nous allons sauter à l'intérieur d'un design parce que nous voulons faire trois écrans. Donc, nous allons utiliser notre ancienne clé une fois de plus et en faire un duplicate er fois de plus. Donc, ce que nous voulons faire avec le 1er 1 est de supprimer certains de ces éléments. Donc, nous allons supprimer la couleur sélective de couleur. Nous allons enlever la tape et nous allons faire disparaître cette carte pour qu'on puisse la cacher comme ça. Et sur le 2ème 1 au lieu de rechercher des emplacements, nous pouvons taper Bel Great, et nous allons faire de même. Donc, nous allons supprimer la couleur sélectionnée pat et jeter juste ici pour que nous puissions le déplacer de la vue. Et enfin, nous allons tout montrer sur l'écran de démarrage, donc il suffit de double-cliquer ici et de taper Belgrade et assurez-vous que vous avez coché Si vous avez entré partout, comme si nous pouvons sauter dans le prototype. Maintenant, cliquez ici sur ce premier écran. Et l'un des besoins est quand les gens cliquent ici à l'intérieur de cette barre de recherche sur le texte Belgrade apparaîtra. Ça va attendre un peu. Et puis il vous montrera toutes ces informations ici. Donc, lorsque vous cliquez dessus, vous pouvez le faire glisser ici. Alors tapotez ou orteil toute la viande et puis sélectionnez cette ensemble de nos ports, peut-être attendre un peu. Donc, le délai de temps va être une seconde d'animation automatique à cet écran juste ici, et il va vous montrer toutes ces informations. Alors, sautons vite à l'intérieur et voyons ce qu'on a fait. Donc, quand vous cliquez sur ce 1er 1, vous pouvez cliquer l'emplacement va appâter une seconde, et il va vous montrer ce magasin et Belgrade magasin juste ici. Maintenant, vous pouvez faire apparaître cette voiture. Ainsi, par exemple, peut-être affaiblir sauter à cet écran et sauter pour concevoir localiser notre carte. Donc c'est là, juste là, et peut-être qu'on peut le déplacer. Par exemple, vers le bas comme ça et ça va être zéro pacenti et voyons à quoi ça ressemble maintenant pour que vous puissiez sauter dedans. Cliquez ici. Attendez une seconde. Et comme vous pouvez le voir, Card est apparu d'ici. Maintenant, vous pouvez même créer un écran supplémentaire, puis animer cet endroit. Donc, dans la troisième carte d'écran apparaîtra et pop up de bas en bas, comme ce n'est pas en ce moment, mais cette partie va alors apparaître dans le quatrième écran. Vous pouvez le faire si vous voulez, mais je pense que ça a l'air bon pour l'instant. Et puis l'utilisateur peut cliquer ici et naviguer à cet emplacement à partir de son propre emplacement ou cliquer sur plus de détails et en savoir plus sur ce projet de loi. Magnifique magasin. Et peut-être que cela peut être comme une fenêtre pop-up et avec le fond noir, par exemple, sorte que vous pouvez noircir toutes ces autres informations, et vous pourriez avoir peut-être une autre icône ex pour qu'ils la ferment s'ils veulent la fermer de là. Cette carte peut contenir, par exemple, , un peu plus d'informations, peut-être des images sur cet endroit, peut-être un numéro de téléphone, un numéro e-mail, fax. S' ils utilisent le fax, e-mail, adresse de choses comme ça, et ils peuvent les contacter directement à partir de leur. Ou ils peuvent fermer et naviguer jusqu'au magasin en utilisant ce bouton juste ici. Et enfin, ce qu'il nous reste à faire, c'est simplement cliquer sur le menu, utiliser le prototype, puis simplement des ennemis. Une partie de tout ça. Ainsi, lorsque vous cliquez sur le logo, il les mènera à l'écran d'accueil. Donc, appuyez sur transition, dissoudre. Il est sorti. J' aime ça. Et enfin, peut-être que nous pouvons choisir mes commandes aussi, et cela les mènera à l'étape des détails de la commande. Mêmes paramètres à partir des emplacements de magasin ici. Peut-être que ça pourrait les prendre. Remotez ce premier écran, alors utilisez tout de même, et je pense que c'est à ce sujet. Alors peut-être qu'ils peuvent utiliser mes paiements et aller à cet écran. Mais ce devrait être un écran dédié à mes paiements où ils peuvent voir tous leurs paiements. Donc quand je cliquais ici, il jouait et allait dans les magasins. Vous pouvez voir où il et quand j'ai sélectionné une fois de plus, peut-être cliquer sur le logo. Il peut nous prendre ici, Donc, lorsque vous cliquez sur le menu, je peux à partir d'ici cliquer ici, il vous mènera à l'écran d'accueil. Mais par exemple, si vous êtes sur cet écran appuyez sur la lecture, puis appuyez sur le menu. Mais on n'a pas animé d'ici, alors faisons-le maintenant. Cliquez ici, puis juste ici. Tep et dissoudre trop. Je pense que ça a l'air bien, mais ça ne devrait pas légèrement descendre parce que c'est ce que nous avons utilisé pour tous ces citadins . Donc, lorsque vous cliquez là, appuyez, jouer le menu hit, il glisse vers le bas comme vous pouvez le voir bien lorsque vous cliquez ici, il va vous emmener à l'écran d'accueil. Le contrôle est de sauver notre projet, et c'est tout pour l'animation. Comme vous l'avez vu, vous pouvez inclure différents types hors animations Vous pouvez aller avec plus facile une fois comme avec elle. Avec ces flèches, qui s'ouvrent de haut en bas, vous pouvez opter pour des animations de type plus avancées comme nous le faisons avec la combinaison de salle , où tout glisse de gauche à droite de haut en bas. Vous pouvez même rendre le zoom de l'image beaucoup plus proche. Vous pouvez créer un déclencheur de temps comme nous l'avons fait. Par exemple, pour cette carte, vous pouvez animer des cartes pour aller de gauche à droite de haut en bas comme nous l'avons fait avec cet emplacement de magasin. Et enfin, vous pouvez même inclure tout ensemble et tout mettre ensemble pour créer des animations comme nous l'avons fait pour les commandes quand ils traînent sur cette première voiture à gauche, puis ils attendent un peu et tout se remplit comme il se doit , puis met à jour le prix et met à jour les boutons ainsi. Donc c'est fondamentalement tout pour la face de prototypage dans la partie suivante. ce cours, nous allons parler de l'exportation de vos designs et de la façon dont vous pouvez envoyer tout ce que vous avez fait jusqu' à présent à votre client et à leurs développeurs afin qu'ils puissent arrêter. Commencez à développer, et votre client peut comprendre l'ensemble de votre processus que vous mettez en place et comment la conception fonctionne. Une fois qu'il fait froid, il et une fois qu'il est la vie sur les appareils des utilisateurs. Alors je te verrai là-bas. 33. Créer un guide de style: dans cette partie du cours, nous allons commencer par exporter nos actifs parce que nous devons envoyer ces fichiers sur lesquels nous travaillions à nos clients ainsi qu'à leur développeur. Mais avant de le faire, nous devons apporter quelques changements, et nous devons les préparer pour que nous les envoyions. Commençons donc par créer un guide de style. Donc, si je zoom un peu plus près d'ici maintenant, ce fichier a été nommé icônes. Mais je peux simplement cliquer ici et créer un guide de style comme ça, et ce guide de style va contenir des icônes qui ont été utilisées ainsi que des couleurs et des polices. Donc, pour ce faire, je peux simplement agrandir cette illustration et supprimer ceci afin que je puisse inclure le logo ici , comme si je peux peut-être même en faire un duplicata et peut-être en faire un local plus grand. Ce n'est pas l'exigence, mais vous conduisez cela si vous voulez, et maintenant simplement positionner cela au milieu pour le rendre un peu plus attrayant. Et déplacons-le, Toby, quelque part autour de 100, disons juste nous donner un peu plus d'espace, et vous pouvez aussi le faire avec ces icônes. Tout simplement va changer, et peut-être que vous pouvez faire comme ça. Donc 456789 10 et créer un espacement inégal. Maintenant, nous allons utiliser les couleurs, et ce que nous allons faire est d'utiliser une barre d'outils rectangle. Cliquez sur Oui, c'est panneau et nous devons pour 6$ au total, sorte que vous pouvez créer une belle mise en scène comme ça. Positionnez-le, Toby, exactement la même distance que ces deux-là étaient avant. Donc 100 comme ça et puis faites six copies afin que vous puissiez utiliser une grille de répétition et faire comme cela , par exemple, et vous pouvez laisser l'espacement comme si vous le souhaitez. Oregon simplement sur le groupe, enlevé les bordures, puis simplement aller un par un et choisir ces couleurs. Alors vas-y comme ça. Comme ça, comme si E. B. Et enfin, c'est F F comme il était et juste créer une belle bordure pour ça. Maintenant, incluons un texte si immaculé. Cliquez ici, et ce 1er 1 est F C 7800 comme ça, et vous pouvez l'inclure ici. Assurez-vous qu'il est au milieu et augmentez simplement la taille à 10 ou peut-être même 16. C' est donc facile à lire. Faites-le blanc parce que toutes nos couleurs, exception de la couleur blanche, sont blanches et vous pouvez le positionner comme si double-cliquez ici et en tapant zéro B zéro b zéro b pour celui-ci et maintenez Old Key pour le dupliquer à nouveau. Sélectionnez tout cela. Donc celui-ci est 858585 Donc ces couleurs sont assez simples, donc rien de majeur vraiment. Double-cliquez ici. Et pour le prochain, nous avons 717171 Nous avons E B B B B B B B pour celui-ci, donc c'est E B B B e B. Comme ça. Et enfin, parce que c'est un blanc, utilisons cette couleur et tapons simplement f f f f f f f f f f f f Donc c'est tout pour nos couleurs. Et vous pouvez également regrouper l'ensemble de cette touche de contrôle G sauter dans les calques, le panneau et les couleurs de frappe. Vous pouvez l'organiser un peu mieux, sorte que ces deux logos iront jusqu'au bas et finalement ces couleurs iront jusqu'au bas pour que vous puissiez regrouper toutes vos icônes. Trouvons donc l'icône du panier. C' est celui-là. Donc c'est l'ordre. Regroupez-le comme alors sélectionnez-les tous comme ceci. Contrôle G Les fuites je veux dire icônes quand cela juste pour les développeurs afin qu'ils puissent facilement copier les valeurs d'ici et de ne pas aller à l'intérieur de votre conception tout le temps juste pour qu'ils puissent utiliser des couleurs. Maintenant, nous allons inclure quelques fonds, sorte que vous pouvez Presti et sauter interes livres afin que vous puissiez voir quels fonds vous devez inclure. Donc celui-ci est un sens ouvert, et je pense que c'est un demi-boulon comme celui-ci simplement sélectionné d'ici. Donc semi-boulon. C' est un mot comme celui-ci et vous pouvez l'utiliser. Fais 18 comme si c'était ici. Positionnez-le comme ça et assurez-vous que ses 100 mêmes comme ces autres étaient comme ça et vous pouvez en faire une copie. Donc il suffit de contrôler D et de positionner peut-être 23456 Peut-être créer comme ça. Faites en sorte qu'ils soient tous alignés à gauche. Et cela va être 14 et son régulier, et vous pouvez utiliser ce sens ouvert 14 irrégulier pour créer un paragraphe de texte si vous voulez sécuriser le contrôle de touche D, puis simplement le déplacer 60 vers le bas, comme ça, comme ça, créant du texte de zone comme ceci, peut-être jusqu'à ici, puis simplement abaisser comme si Jump dans ses plug ins, Lauren Ipsum rempli de place ou de texte insérer du texte et c'est tout pour cela. Peut-être parce que c'est la même chose, peut-être que nous pouvons faire 40 pixels vers le bas comme si Jump dans un calque spinal sélectionner tout sur le texte et simplement commander le bon chemin autour comme si contrôlé G Déplacer vers le bas. Et voici notre texte, comme So next up. Quoi ? Je veux créer nos ombres parce que nous avons utilisé quelques ombres Si vous vous souvenez de tous ces éléments Donc ce que nous pouvons faire est simplement de sélectionner l'un de ces contrôles C. Nous sommes ici, positionnez-le comme alors assurez-vous que ses 100 ainsi comme ça Et ce que je veux faire est inclure quelques ombres afin que vous puissiez utiliser Shadow Jump ici. Et si vous vous souvenez, c'est 55 10. Appuyez sur Entrée en sautant à son ombre. Localisez ceci. Sélectionnez cette couleur. C' est 25% et vous pouvez également le sélectionner. Hit contrôle D sauter ici et peut-être faire 60 par exemple. Et vous pouvez utiliser deux et cinq parce que c'était notre ombre inférieure. Ainsi, vous pouvez créer ces deux que vous pouvez sauter dans le panneau des calques. Donc, comme les deux contrôlent g froid, ces ombres et enfin quoi ? Je veux inclure notre éclat. Donc, ce que vous pouvez faire est de dupliquer ces deux, donc le contrôle d l'a déplacé comme ça. Et ça va être de l'éclat comme ça et peut-être faire la distance 100 pour que nous puissions tout garder beau et lisse comme il se doit. Vous pouvez réduire cela parce que nous n'avions pas d'illustrations d'animations, donc nous allons finir avec nos ombres. Donc, ce que vous pouvez faire pour ce 1er 1 c'est simplement localiser ce hit de copie basé sur celui-ci et faire la même chose pour celui-ci. Copiez donc ce clic droit basé sur Paris, et ce que nous pouvons faire est de croire les ombres telles qu'elles sont, parce que nous utilisons les ombres là-bas. Mais si vous le souhaitez, vous pouvez en faire une copie alternative et en créer une sans ombres. Et pendant que nous y sommes, nous pouvons le faire aussi bien contrôlé l'Et peut-être que vous pouvez les utiliser pour aimer ça et utiliser ces deux autres simplement les faire 60 comme ça ou 40 Positionner ce 1 40 et vous pouvez déplacer les trois comme ça. Donc c'est 40 pixels tout autour, et peut-être que nous pouvons faire la même chose pour ça. Donc, 12 40. Et maintenant, nous pouvons déplacer les INT Grady à 100 comme ça. Donc, j'aime commander mes fichiers comme ça juste pour que les développeurs ne puissent alors pas, et avoir une meilleure vue et une belle vue de tout ce que j'ai utilisé à l'intérieur de cette conception. Donc pour ces deux-là, on va enlever les ombres. Et sur ces deux-là, on va laisser l'ombre dedans. Pourquoi ? Parce que c'est ce que nous avons utilisé à l'intérieur de notre phase de prototypage, si vous vous en souvenez. Donc pour ces deux-là, nous n'avons pas d'ombre. Et pour ces deux-là, nous le faisons. Alors c'est tout. Pour notre guide de style, vous pouvez appuyer sur le contrôle. E localise votre dossier REFILES trompé si vous le souhaitez, et vous pouvez simplement le sélectionner comme un Pdf J peg PNG. Cependant, vous voulez et appuyez sur exporter, et vous pouvez également le laisser car il est un guide de style, et ils peuvent y accéder. Et enfin, lorsque vous appuyez sur partager un peu plus tard, et je vais vous montrer comment les développeurs et les clients pourront accéder à toutes ces informations à l'intérieur d' Adobe X'd dans le fichier partagé. Mais il est toujours agréable d'avoir une deuxième copie papier si vous voulez, si vous voulez, afin qu'ils puissent y accéder à tout moment. Peut-être qu'ils sont sur leur téléphone. Ils n'ont pas de connexion Internet, mais ils veulent juste vérifier rapidement certains de ces fichiers, et ils seront en mesure de le faire parce que vous l'avez exporté comme un autre fichier. Donc, soit Jay Peak, PNG ou pdf dans la prochaine vidéo. Je vais rapidement vous montrer la structure d'emballage et comment vous pouvez emballer votre fichier à la pour la livraison client. Alors je te verrai là-bas. 34. Structure d'emballage: dans cette vidéo. Je veux juste vous montrer ma structure d'emballage. Vous pourriez avoir votre propre structure. Ça n'a vraiment pas d'importance. Ce qui est important, c'est qu'il doit être facile pour l'orteil du développeur. Comprendre ? Parce qu'à l'intérieur de cette structure que vous avez créée, développeur a accès aux orteils et apprend instantanément où tout est juste pour qu'il accélère aussi leur processus. Donc, avant de créer votre structure d'emballage, vous pouvez zoomer un peu plus près. Notre cas est que vous pouvez voir que nous avons 10 écrans différents et nous avons besoin de créer 10 dossiers différents pour chaque écran. Peu importe s'il n'y a qu'un seul élément à l'intérieur qui doit être exporté. Vous devez toujours les créer comme ils sont à l'intérieur de votre adobe x D. Alors voici à quoi cela ressemble. Donc, comme vous pouvez le voir, nous avons 10 dossiers différents ici, ainsi que notre guide de style. Ce que j'aime aussi faire est de créer un autre dossier et de l'appeler facettes. Appuyez sur Entrée car à l'intérieur de ce dossier, nous allons exporter les icônes de notre guide de style , et voici comment nous allons le faire pour que vous puissiez aller écran par écran, puis exporter toutes ces images. Et pour ces images PNG, ce que vous pouvez faire est d'exporter un arrière-plan afin que vous n'ayez pas à exporter chaque arrière-plan. Parce que si vous vous souvenez, ces trois sont exactement les mêmes. Vous pouvez donc exporter un seul arrière-plan, puis exporter ces trois images PNG. Vous pouvez exporter cette image. Vous pouvez exporter ces trois images ainsi que cette image finale, qui est pour la vidéo. Mais nous allons exporter des orteils dans une vidéo plus tard. C' est tout pour cette structure de fichiers. Je voulais juste vous montrer comment vous pouvez l'organiser avant de l'envoyer au développeur et au client dans la vidéo suivante. Je vais rapidement vous montrer comment vous pouvez partager ce prototype avec votre client, comment vous pouvez obtenir des commentaires, comment vous pouvez travailler avec eux et comment vous pouvez apporter des changements rapides et mettre à jour ce projet et ce prototype avant d'envoyer il à nouveau incliné pour des révisions supplémentaires. Alors je te verrai là-bas. 35. Partager avec le client: Alors partageons notre prototype avec notre client, et vous pouvez zoomer ici. Ça dit Prototype. Cliquez sur la maison, qui est votre premier saut d'écran à l'intérieur de votre prototype et cliquez simplement sur ce bouton de partage juste ici. Vous pouvez inviter la modification des orteils, ce qui signifie que vous pouvez inviter un autre orteil. Modifiez ce fichier, qui signifie que vous allez les envoyer au dossier, que je ne recommande pas si vous ne faites pas partie de l'équipe ou si le client ne vous a pas encore payé , donc s'il l'a fait, vous pouvez leur envoyer ce fichier, toute évidence. Mais s'ils ne l'ont pas fait, je vous recommande vraiment de ne pas leur envoyer de fichiers avant le paiement que vous pouvez partager pour examen, ce qui est ce que vous allez faire. Vous pouvez partager pour un développement, qui est que vous pouvez partager pour vos développeurs pour voir tout, ce qui est aperçu et vous allez cliquer sur partager pour le développement à la fin de ce projet . Donc, quand le client est d'accord avec tout, il n'a plus de changements. Révisions, et vous devez leur envoyer le fichier afin que ce sont les développeurs puissent y accéder. Ensuite, vous pouvez cliquer sur Partager pour le développement. Peu générer un lien de la même manière que partager pour examen, puis le développeur peut y accéder en ligne n'importe où sur n'importe quel appareil. Ils ont juste besoin de la connexion Internet, évidemment, pour être en mesure de voir lesquels utiliser, quelles couleurs vous avez utilisé. Quelle image émet l'espacement entre chacun des éléments à gauche à droite ? Arrêtez le bas entre les deux. Tout est là pour eux, tout est disponible et ils peuvent, bien sûr, utiliser ce dernier fichier adobe xz pour y accéder et vérifier manuellement s'il s'aligne avec ce partage pour l'écran de développement. Enfin, nous avons géré les liens, que vous pouvez gérer vos propres liens. Donc, si vous utilisez la version gratuite d'Adobe X'd, vous avez juste un lien actif que vous pouvez partager avec vos clients ou, si vous utilisez la version payante, offert l'obésité. Donc, si vous avez un abonnement Adobe Creative Cloud, vous avez un nombre illimité de liens hors nombre, et là vous pouvez évidemment aller de l'avant et supprimer les liens inutiles. Vous pouvez les éditer et ainsi de suite. Enfin, vous avez un enregistrement vidéo si vous voulez enregistrer une vidéo, que vous pouvez ensuite partager avec votre client afin qu'il puisse voir le processus avant d'obtenir le prototype, sur lequel il peut cliquer évidemment, ou s'ils reçoivent les fichiers finaux. Nous allons donc cliquer sur partager pour examen et vous ne pouvez pas aimer les commentaires. Vous pouvez nommer le projet ici. Nous ne allons pas faire cela et nous nous embêterons avec elle, mais vous pouvez l'avoir et inclure votre nom de client ici et le nom du projet montrer des indices Hot spot. Je vous recommande de laisser cela propre parce que alors les gens sauront où cliquer à l'intérieur de votre prototype show contrôles de navigation, qui seront les contrôles en bas de votre écran. Donc, je vous recommande de laisser le soleil aussi, ouvrant le plein écran. Je ne le recommande pas parce que les gens sont parfois confondus avec elle parce qu'ils ne savent pas quoi faire et ont finalement besoin d'un mot de passe. Vous pouvez créer un possible pour ce prototype si vous ne voulez pas que quelqu'un y accède sans mot de passe. Et n'importe qui avec Lincoln View ou seulement des personnes invitées peut voir si vous cliquez juste là . Vous pouvez ensuite envoyer des e-mails à certaines personnes et simplement entrer des adresses e-mail et envoyé à ces personnes. Lorsque vous avez terminé avec tout ce que vous pouvez cliquer, créez un lien et il commencera à créer votre lien et en fonction de la taille de votre projet et de votre connexion Internet. C' est à quelle vitesse il va générer ce lien pour vous. Donc, quand il a généré le lien, si vous apportez des modifications, vous pouvez cliquer ici où il dit mise à jour, et il va mettre à jour le lien. Vous pouvez copier, lier ou copier un code incorrect. Si vous voulez le mettre à l'intérieur de votre site, par exemple, et pour le voir, vous pouvez simplement cliquer ici. Si un saut en arrière rapidement, vous pouvez cliquer sur le lien de copie et évidemment partagé ce lien avec votre client. Mais quand vous cliquez là, sachez simplement qu'il faudra un certain temps pour qu'il se charge, surtout si vous avez ah, beaucoup hors écrans. Maintenant, nous avons 22 écrans parce que je dis toujours que nous créons des écrans supplémentaires pour ce projet. Mais si vous avez juste tendance, par exemple, il se chargera beaucoup plus rapidement. Et cela dépend aussi beaucoup de la vitesse de votre connexion Internet, donc vous pouvez évidemment cliquer ici et voir tout ce que nous avons fait. Tout fonctionne bien et vous pouvez cliquer ici en bas, donc ce sont des contrôles inférieurs, et il va basculer entre chaque écran que vous avez créé, et les clients pourraient le faire aussi. Donc, disons qu'ils sont sur cet écran, par exemple, et qu'ils veulent laisser votre commentaire. Ils peuvent simplement placer dans ce qu'ils veulent laisser vos commentaires. Ainsi, par exemple, dans cette carte de crédit et ils donnent, écrivez quelque chose comme Change color, Grady Int ou Changed Radiant de cette carte. C' est vrai. Cela et quand ils ont terminé, ils peuvent simplement cliquer sur Soumettre. Et, comme vous pouvez le voir sur l'écran de paiement, quel est cet écran ? Nous avons ce commentaire donc jamais revenir au premier écran et ils ont laissé votre commentaire. Vous pouvez voir ici. Ok, c'est sur l'écran de paiement. Mais comment puis-je y accéder ? Lequel est cet écran ? Il suffit de cliquer ici, et cela vous mènera directement à cet écran. Et s'ils en ont beaucoup, ce qui est ce qu'ils vont faire, surtout au début, Off chaque projet et puis les points chauds deviennent de plus en plus petits au fur et à mesure que vous allez le long. Vous pouvez simplement cliquer ici, et il vous montrera ou cliquez ici, et il vous montrera juste ici. Alors c'est tout. Fondamentalement, ils peuvent cliquer à travers. Ils peuvent tout voir, quoi il ressemble et vous pouvez voir tous les commentaires ici. Vous pouvez masquer les commentaires si vous voulez voir un mode plein écran, et ils peuvent également accéder au mode plein écran eux-mêmes. Si vous les laissez encore une fois, vous pouvez les inviter à modifier les orteils. Vous pouvez envoyer des e-mails à partir des personnes que vous voulez voir votre prototype. Et comme je l'ai dit, tout fonctionne comme il se doit. Comme vous pouvez le voir ici, il pèse une seconde. Il met à jour le prix. Vous pouvez procéder au paiement. Je peux sélectionner celui-là. Vous pouvez voir les ombres portées juste ici, faire un paiement. Il va attendre et revenir ici. Donc tout est comme nous l'avions prévu. Tout fonctionne correctement, et c'est Adobe X, les fonctionnalités de partage d'un bol. Et j'aime vraiment cela parce que vous pouvez appeler un communiquer avec vos clients directement à travers cela donc vous n'avez pas besoin de sites externes. Ainsi, par exemple, 99 designs, donc vous devez les payer à payer juste pour être en mesure de communiquer avec vos clients. Aussi, c'est beaucoup plus agréable à l'œil. C' est beaucoup plus simple que de communiquer via Gmail et simplement de leur envoyer des images. Donc, comme vous pouvez le voir ici, nous avons 22 images. Imaginez à quel point l'agitation est d'envoyer 22 images à vos clients. Combien de temps ont-ils besoin pour le trouver organisé ou désorganisé ? Tu sais ce que je veux dire ? Donc, fondamentalement, c'est un ajout fantastique. Toe adobe une ville juste parce que vous pouvez faire tout ce dont vous avez besoin à l'intérieur hors, un haut et à l'intérieur de cet écran. Donc, quand ils vous laissent des commentaires et les commentaires, vous pouvez suivre ces commentaires. Retour à Adobe X'd. Vous pouvez revenir à la conception, apporter des modifications rapides, revenir au prototype de partage de clic une fois de plus, et vous pouvez partager pour révision et simplement mettre à jour le lien, puis copier le lien et leur envoyer ce nouveau lien. Donc, si je saute en arrière et que je clique à nouveau sur partager, vous pouvez partager pour le développement et vous pouvez exporter pour les acheteurs Inclure les actifs à télécharger afin que tous ces actifs soient inclus. Tous les actifs sont des images, des icônes, ces arrière-plan, donc chaque chose que vous pouvez avoir besoin d'un mot de passe et vous pouvez cliquer sur créer un lien. Maintenant, les développeurs seront en mesure d'y accéder exactement de la même manière que les clients votent, donc ils seront tout simplement en mesure de mesurer. Par exemple, distance entre ce logo et cette distance d'icône de menu entre ici et ici afin qu'ils puissent faire tout cela en ligne, et ils seront en mesure de générer tout ce dont ils ont besoin pour télécharger directement à partir de là. Mais on va toujours exporter des actifs pour eux. Donc, vous avez des développeurs qui sont confondus avec ce processus. Vous avez des développeurs qui n'ont jamais entendu parler d'adobe eggs, D ou sketch ou certains de ces autres outils qu'ils travaillent, généralement avec pour fermer ou simplement fondamentalement avec quelques images de base dans le passé. Donc, vous avez toutes sortes de développeurs, même chose comme d'avoir toutes sortes de designers, donc vous devez apprendre le travail des orteils avec tout le monde. Donc, s'ils ne savent pas comment faire cela, partagez pour la fonctionnalité de développement dans D. d'Adobe Ne vous inquiétez pas. Dans la prochaine vidéo, nous allons commencer à exporter nos actifs, les conditionner et à les préparer pour les développeurs. Donc, peu importe qui est votre développeur, vous allez pouvoir travailler avec eux parce que vous avez la structure d'emballage en place. Alors je te verrai là-bas. 36. Exporter des actifs: Commençons maintenant à exporter nos actifs. Et c'est ce que j'aime ce guide de style parce que nous avons créé tout ce dont nous avons besoin ici, et nous pouvons simplement tout sélectionner. Mais cliquez sur le design appuyez d'abord, alors sélectionnez-les tous. Hit contrôle E et pour le fichier utilisé SPG présentation de style sur lequel ou CSS interne vous conjecture avec votre développeur ce qu'ils veulent, Mais ils utilisent généralement des attributs de présentation afin que tout tel qu'il a été présenté, vous pouvez vérifier à droite ici si vous voulez optimiser votre taille mais avant parce que ce SVG c'est déjà optimisé point d'orteil. Vous pouvez entendre le changement ici, et je veux nous sélectionner. C' est le dossier, sélectionnez le dossier frappé, Exporter et vous avez terminé. Et si un saut dans mon dossier sauter les actifs orteils, vous pouvez voir des icônes ici, et il va sélectionner toutes ces icônes, qui sont à l'intérieur de ce dossier, et les créer comme un. Et si vous ne le voulez pas, vous pouvez frapper l'élite, et vous pouvez l'ONU grouper ceci et ensuite avec eux sélectionnés comme vous pouvez frapper le contrôle E S V. G et frapper à nouveau l'exportation. Et si un saut dans notre dossier. Maintenant, vous pouvez voir tous d'entre eux sont des actifs distincts comme ça, donc vous ne pouvez pas avoir de toute façon. Ils peuvent copier le code directement à partir du fichier SPG s'ils le souhaitent. Mais si vous voulez, vous pouvez le faire comme ça aussi. Parlez-leur et apprenez ce qui leur est plus facile à utiliser. Donc, est-ce un fichier, ou est-ce des fichiers séparés maintenant parce que vous les avez tous extraits et exportés dans ce dossier séparé ? Parce que nous n'avons pas d'autres icônes supplémentaires que nous n'avons pas exportées ? Vous pouvez simplement utiliser cette ressource plus complète et ne pas exporter d'autres icônes de n'importe quelle étaient dans votre conception. Donc, fondamentalement, vous avez fini avec vos icônes juste en créant ce guide de style, et je pense que c'est un ajout fantastique et juste améliore votre vitesse massivement pendant que vous travaillez . Ensuite, nous allons utiliser l'écran d'accueil afin que vous puissiez sélectionner cette image. Par exemple, appuyez sur le contrôle de commande E Juifs Jay Pek à partir d'ici localiser le dossier d'accueil. Donc, c'est là, juste là. Sélectionnez le dossier hit export, et ce que nous voulons est ouvrir ce haut et vous pouvez le sélectionner comme EMP social, une lampe à terre trois hit contrôle être et ce que nous voulons sp blessures Parce que ce sont PNG à l' origine frappé export et vous pouvez fermer tous ces dossiers si vous voulez. Vous voulez juste exporter un arrière-plan pour qu'il le contrôle et vous pouvez exporter ceci comme un JPEG alors appuyez sur export et ça va le remplacer parce que ce 1er 1 est notre image. Donc, nous allons changer que cela va être notre image de héros comme si désolé fait une faute de frappe comme ce contrôle e j export pic et je peux sauter dans notre dossier, localiser la maison Ici, il est, et simplement supprimer celui-ci parce que nous avons besoin de cette image comme si . Alors cliquez ici sur le contrôle E J Peg Export Et maintenant il va exporter cela parce que nous avons besoin de ce grand fond inclus aussi, prochaines combinaisons de salle. Donc, vous avez salon, chambre à coucher, cuisine, cuisine, sélectionnez les trois et vous n'avez pas besoin de l'image de sélection des orteils parce que nous l'avons déjà sélectionné. Nous avons donc l'image, l'image et l'image. Maintenant, vous pouvez sélectionner comme ça et badigeonner comme ça basé dans comme ça, et faire face dedans parce qu'il a remplacé le nom de l'image une fois qu'il était Mosquée avec cette image. Il suffit donc de les sélectionner. Kid Control E J Peg export. Et enfin, nous allons sélectionner ce dernier, qui est un contrôle vidéo e hit export. Et vous voilà. Donc, comme vous pouvez le voir, il est vraiment facile d'exporter toutes ces images. Maintenant, ce que nous avons ici, ce sont ces canapés, donc vous pouvez toujours les ouvrir tous. Donc pour un, donc pour deux. Vous pouvez également sélectionner une de ces images d'arrière-plan. Donc, pour trois, et maintenez simplement votre touche de commande de contrôle. Choisissez-les tous comme pour qu'il ait contrôlé E, puis changez ici. Et cela s'appelle écran de catégorie. Donc situé juste ici. Sélectionnez dossier frappé X et pas J Peg, mais PNG parce que tous d'entre eux ver PNG hit export va exporter toutes ces images. Et comme vous pouvez le voir, il est assez facile de se déplacer entre ces écrans afin que vous puissiez sélectionner ces deux cercles ou simplement un seul parce qu'ils sont exactement les mêmes. Vous pouvez choisir des matériaux et choisir le champ de frappe E, et vous pouvez les exporter en tant que PNG, par exemple, mais c'est dans l'écran de filtre de recherche, alors assurez-vous juste d'exporter tout correctement. Donc, les filtres de recherche sélectionnent l'exportation de dossier et vous pouvez l'exporter. Que quoi ? Maintenant, comme pour les boutons, vous pouvez l'exporter de deux façons afin que vous puissiez exporter le bas tel qu'il est maintenant. Donc, contrôler e et vous pouvez l'exporter comme un PNG comme ça, Ou vous pouvez exporter le bas sans aucun texte dessus. Donc, c'est vraiment à vous et au développeur de décider comment ils veulent orteil inclure tout ce Suivant nous avons des combinaisons de pièces, donc il contrôlerait E pour exporter cette image et nous pouvons utiliser J pack pour cela. Donc, notre propre écran de combinaison situé juste ici à partir de combinaisons sélectionner et exporter. Ce dont nous avons besoin ici, c'est ce canapé donc contrôler e, nous pouvons utiliser P et G export. Ce dont nous avons également besoin, ce sont ces couleurs, alors sélectionnez les trois couleurs. Le contrôle E P et G est bien. Vous pouvez exporter cette carte BG afin de contrôler e PNG exporté et vous pouvez également exporter cette lampe si vous voulez ainsi situé ici contrôle e p et G export. Et là, vous allez, Vous avez fini parce que nous avons copié et utilisé ces couleurs dans les deux cas. Passons donc à l'écran des éléments sélectionnés et ce que nous voulons ici est d'exporter l' arrière-plan du bateau ainsi que l'image, afin que nous puissions les exporter tous les deux. Ce PNG Control E et vous pouvez le modifier pour être sélectionné élément comme cette sélection dossier PNG export. Quoi ? Nous voulons aussi nos couleurs. Alors sélectionnez vos couleurs comme ceci, qui est sûrement PNG. C' est très bien. Et enfin, ce que nous voulons, ce sont ces deux images. Donc, cette image ainsi que cette image va être l'image numéro un. Image numéro deux, sélectionnez les deux contrôlent E BMG Export. Et nous n'avons pas besoin d'eux à l'intérieur de l'autre dossier. Vous pouvez simplement copier tout vers le bas et le baser sur. Mais je veux le faire quand même. Alors utilisons l'image du héros. Donc héros de la chaise principale, contrôle de l'image E S B et G vient de changer un dossier car il est sélectionné élément ajusté. Ici, c'est. Sélectionnez l'exportation de dossier et ce que nous voulons sont ces couleurs. Alors ouvrez le dossier de couleur et maintenant vous pouvez voir les avantages de ces dossiers et tout organiser correctement parce que vous pouvez voir comment cela fonctionne bien. Et comme vous pouvez le voir, nous ne sommes que huit minutes et combien nous avons fini jusqu'à présent. Donc, vous pouvez vraiment travailler avec beaucoup plus facilement. Donc le contrôle du bouton. Et enfin, parce que nous l'avons fait avant l'image un et l'image pour qu'ils puissent y accéder facilement à l'intérieur de ce dossier aussi bien. Et allons-y rapidement et finissons avec tout le reste. Donc, juste ici, vous pouvez sélectionner un arrière-plan, donc contrôler et changer l'emplacement. Donc, ce sont les détails de l'ordre comme si cliquez sur sélectionner l'exportation de dossier et vous pouvez localiser ces images. Alors ouvrez vos dossiers, donc chaise principale. Donc, pour une lampe un contrôle E PNG export, nous avons besoin d'exporter vers ce bas aussi. Contrôle e comme ça Et enfin nous avons besoin d'exporter ce cadre. Alors, comment pouvons-nous faire ça ? Vous pouvez localiser le cadre, Donc ici, il est, juste ici, et vous pouvez l'exporter et simplement appuyer le contrôle E s B et G export. Et ils le placeront comme nous l'avons fait maintenant. Mais dans le code à côté de l'autre, et ils ont ces icônes dans le texte du panneau d'actifs, nous n'exportons pas. Vous pouvez également exporter le texte si vous le souhaitez. Mais j'ai trouvé que ce n'était pas nécessaire parce que c'est une perte de temps et ils utiliseront le texte dans le manteau de toute façon. Plus tard. Pour cet écran, nous allons sauter à l'intérieur des paiements de changement de contrôle E P et G situés là où il est juste ici. Sélectionnez le dossier et exportez. J' ai donc fait une légère erreur. Nous allons localiser le paiement et exporté l'écran entier, ce que vous pouvez faire si vous le souhaitez. Et je vais te montrer à la fin comment tu peux faire ça aussi. Mais pour l'instant, nous voulons sélectionner le Craker, veulent sélectionner les gens et veut, comme le contrôle inférieur E BMG paiement export. Et nous allons rapidement vérifier si c'est comme il devrait l'être. Donc si j'ouvre cette carte géniale, elle va s'ouvrir dans mon visualiseur d'images juste ici. Et si je le fais glisser vers l'écran, vous pouvez le voir. Enregistrez-le en PNG avec ah, fond transparent et ombre. Passons aux emplacements de départ. Contrôle e modifier les fichiers de livraison emplacements de magasin Sélectionnez le dossier Hit export va exporter tout l'écran. Donc les emplacements de magasin avec croire que vraiment rapide Et ce que nous voulons d'ici est la carte. Donc contrôler l'exportation PNG. Et enfin, ce que nous voulons c'est ce fond car il est tellement situé ici. Donc directions comme ainsi contrôler e comme étant G parce qu'ils pourraient vouloir l'utiliser aussi bien, ainsi que cette carte BeeGees et contrôler l'exportation E et ce fond d'arrêt. Donc contrôler l'exportation PNG. Et voilà. Nous avons tout créé sauf pour cet écran de menu et à l'intérieur de celui-ci. Ainsi, vous pouvez simplement localiser le contrôle d'arrière-plan BG E changement. Trouvez le dossier de menu ici. Ici, c'est. Sélectionnez le dossier hit export Parce que nous voulons juste que cet arrière-plan soit exporté à partir d'ici . A expliqué avant que nous ayons l'icône de sexe préparé déjà. Donc c'est tout pour les actifs exportateurs, partie du discours. Et une dernière chose que je veux vous montrer est comment vous pouvez simplement sélectionner tout leur contrôle de frappe . Encore une fois. Vous pouvez utiliser PNG, mais je vais utiliser Jay Peak, changer les fichiers de livraison de dossier et simplement les livrer pour entendre hit export, parce que cette façon va être plus facile pour vos clients comme ballast vos développeurs de prendre un regardez les écrans tels qu'ils sont. Et vous pouvez également sauter à l'intérieur de chaque dossier et extraire ce design dans ce dossier particulier. Maintenant, si vous avez plus d'une taille, donc celui-ci est pour l'iPhone 10 et 10 s. Mais si vous avez, par exemple, pour le tennis Max ou pour tout autre appareil à inclure dans le futur, , vous pouvez créer un dossier. Alors laissez-moi sauter rapidement. Assurez-vous qu'à l'intérieur de ce dossier emplacements de magasin, par exemple, vous pouvez avoir ces ressources dans des dossiers différents, sorte que chaque dossier peut avoir des sous-dossiers, donc les emplacements de magasin auront des sous-dossiers pour iPhone 10 et tennis, puis un autre dossier pour iPhone. Tennis au tennis, Max et ainsi de suite et ainsi de suite afin que vous puissiez avoir votre organisation N'aime pas ça. Donc, une fois de plus, ils ont les actifs, qui contient toutes les icônes. Ils ont 10 dossiers différents pour 10 écrans différents, et ils ont les actifs à l'intérieur, et enfin ils ont des écrans Jay Peak juste ici. Donc, s'ils double-cliquez sur l'un d'eux. Ils peuvent simplement les ouvrir et simplement les regarder comme ils sont ici. Donc c'est tout pour la partie des actifs d'exportation. Et dans la dernière vidéo de ce Siri. Je veux vous montrer comment vous condensez un paquet, tout ça, et le livrez à un client, donc je vous verrai là-bas. 37. Livrer au client: Donc, quand vous avez tout terminé, vous avez reçu vos commentaires. Vous avez fait vos changements. Vous avez tout emballé comme vous le devriez. Tout est dans le bon ordre. Maintenant, il est temps, Tofino, finaliser ce projet et de l'envoyer au client. Enfin. Alors, comment peux-tu faire ça ? Minimisez simplement cela. Je vais fermer ce dossier. Les voilà, nos dossiers de livraison. Donc, à l'intérieur, vous devriez avoir tous les dossiers que nous venons de créer dans la vidéo précédente. Et vous devriez aussi faire souiller vos œufs d'adobe à l'intérieur. Ce que vous devriez également avoir est un type hors fichier texte. Donc, c'est soit juste un fichier texte de base dans lequel vous partagerez le lien avec votre client. Ainsi, vous partagerez le lien, par exemple, vers le seul prototype. Si vous voulez orteil, croyez-les, accédez à cela pour un peu plus de temps afin que leur développeur ait le temps de tout créer correctement. Ou si vous ne voulez pas le faire parce que vous avez juste un lien et que vous avez une version gratuite d' Adobe X'd. Vous n'avez pas besoin de le faire parce qu'ils ont déjà vu et confirmé tout ce que vous pouvez leur envoyer la vidéo à travers. Si tu veux. Mais s'ils ont Adobe X'd classé dans et il suffit de cliquer sur prévisualiser, puis prévisualiser ce prototype eux-mêmes. Donc, c'est vraiment à vous de voir comment vous voulez structurer cela. Aussi à l'intérieur du fichier texte, vous devriez laisser les liens orteils les polices. Donc nous avons utilisé le sens ouvert et vous devriez le laisser. Vous devriez laisser un lien à l'intérieur. Très obtenu. Donc, si vous l'avez obtenu à partir de téléphones Google, vous devriez leur envoyer ce lien. Si ça vaut à partir des formulaires Adobe, vous devriez leur envoyer ce lien. En outre, toutes les images que vous avez utilisé beaucoup d'images à l'intérieur de ce projet, donc vous devriez leur envoyer des liens vers ces images juste pour que vous puissiez libérer votre espace de remorquage paquet tout et envoyé tout par e-mail parce que c'est le façon la plus facile. S' il est trop volumineux pour l'e-mail, vous pouvez utiliser Dropbox. Vous pouvez utiliser Google drive toe, télécharger là, et je vous recommande toujours de les empaqueter à l'intérieur du fichier zip. Donc, à l'intérieur des fenêtres, je peux simplement cliquer avec le bouton droit sur WinZip et ajouter aux fichiers de livraison. Lorsque je clique à droite, il va commencer à empaqueter les fichiers. Il va commencer à préparer les fichiers et ça va aller orteil Ce qui est le plus important sur toute la taille de ce dossier, et il va être facilement partageable pour moi. Donc, si je fais glisser rapidement cela vers le bas, original était de 308 mégaoctets. Maintenant, c'est 294 Ça ne ressemble pas beaucoup, mais croyez-moi quand vous avez deux, trois ou 500 écrans et que vous les avez dans différentes résolutions. Cela peut facilement détruire jusqu'à un gigaoctets de taille, surtout si vous envoyez des images ou des illustrations à notre client. Et ceux-ci peuvent vraiment monter en rack et augmenter considérablement la taille du fichier. Donc, je vous recommande toujours d'empaqueter les fichiers à l'intérieur du fichier zip et cliquez sur OK, Et si je le fais glisser ici, c'est à ça que ça ressemble. Donc tu n'envoies pas ce client valter. Vous envoyez ce fichier à incliné et ils ont condamné décompresser et utiliser tous les actifs à l'intérieur à la fois votre client et votre développeur. Donc c'est tout pour cette partie du cours. Merci beaucoup d'avoir pris votre temps, votre argent et vos ressources sont et investis à l'intérieur du discours. J' apprécie vraiment, et j'espère que vous avez beaucoup appris du discours. Et dans la vidéo suivante, nous allons rapidement sauter ou quelques conclusions, un aperçu de tout ce que nous avons fait dans cette partition jusqu'à présent, et encore une fois, merci beaucoup. 38. Liens et ressources: et enfin, je veux couvrir les liens et la ressource est donc voici c'est un fichier pdf. Il suffit de l'ouvrir, et une fois qu'il se charge sur votre écran, le voilà. Vous pouvez voir à quoi ressemble tout, et ici vous pouvez télécharger toute la ressource est qui ont été mentionnés dans le cours. Ainsi, par exemple, voici le fonds ouvert pour la science. Vous pouvez poupée Oh, que soit à partir de téléphones Google ou d'Adobe Fonts. Comme je l'ai mentionné dans le cours, il suffit de cliquer ici. Il vous montrera ce clic talek pop up permettre afin que vous puissiez y accéder sur votre navigateur Internet . Quel que soit le navigateur que vous utilisez. Les images gratuites que vous avez préservées parce que toutes les images sont utilisées proviennent d'une splash. Mais je vous ai aussi fourni le site des stocks, qui est le site Web essentiellement pour des images gratuites. Icônes gratuites simuler gratuitement, Donc tout ce dont vous avez besoin gratuitement est à l'intérieur de ce site des stocks. Et enfin, si vous voulez, vous pouvez accéder à mes autres cours et cours soit sur le partage de compétences, soit sur vous savez, moi. J' ai plus sur eux sur le partage de compétences parce que hors de la structure des côtés, mais à l'avenir je vais ajouter plus sur eux sur vous, à moi aussi. Alors merci. Encore une fois, j'espère vraiment que vous apprécierez ce cours. Et j'espère vraiment que vous apprécierez ces ressources est et que vous appliquerez les connaissances que vous avez acquises dans cette classe dans son travail futur. Prends soin de toi. 39. Conclusion: félicitations. Vous avez atteint la fin de cette classe. J' espère vraiment que tu l'as aimé autant que moi. J' espère vraiment que tu en auras beaucoup de violents. Et des conseils si importants qui vous aideront dans votre carrière de design et dans vos futurs projets. C' est donc notre projet final. Voici à quoi ressemble le fichier que vous allez recevoir. Alors passons vite à travers et rappelons-nous ce que nous avons couvert dans ce cours. Nous avons donc commencé avec le dossier de conception et évidemment vous avez déjà vu cela et vous avez reçu ces modèles. Vous pouvez le remplir pour vos futurs projets. Nous avons également couvert les cadres métalliques imprimables, que vous pouvez imprimer. Je vous ai montré comment vous pouvez les trier orteils, obtenir peu, ou pour obtenir plus d'écrans pour vos futurs projets et vos futurs dessins de cadrage métallique imprimables . Et vous avez vu comment certains petits détails peuvent vraiment améliorer votre vitesse et améliorer votre processus. Ensuite, nous avons couvert le cadre de fil et vous expliquer comment vous pouvez commander quelques éléments simples réels comme boîtes et des rectangles, et vraiment créer quelque chose qui aidera à propulser votre processus de conception vers l'avant lorsque vous arrivez à l'étape de la conception. Et en parlant de l'étape du design, dans laquelle nous incluons les différentes images, je vous ai montré la différence entre les piquets P et G. Comment vous pouvez inclure des ombres portées différentes, comment vous pouvez inclure des couleurs à la dernière minute. Donc, ce genre de processus et ce genre de choses vont se produire lorsque vous commencez à concevoir vos propres projets et dans vos projets futurs, surtout avec des clients plus importants, parce qu'ils changent d'avis tout le temps. Et, par exemple, ils n'aiment pas les couleurs de ces cartes de crédit et comptes PayPal. Ça n'a pas d'importance. Vous pouvez facilement les changer. Et ce qui est vraiment important, c'est que vous avez vu comment utiliser votre panneau d'actifs juste ici, à l'intérieur de vous partir d'Adobe X'd. Vous pouvez vraiment couper votre chemise de travail et appliquer ces couleurs et ces styles sur différents éléments dans vos ports. Et enfin, à la fin, nous avons atteint une étape de prototypage, et je vous ai montré comment vous pouvez utiliser des transitions simples et des animations simples jusqu' à des animations vraiment complexes et agréables. Et je vous ai donné quelques conseils et astuces sur la façon dont vous pouvez améliorer encore plus loin avec votre propre projet et enfin récupéré comment vous pouvez partager votre travail avec le client Heiken recevoir des commentaires pour elle, comment vous pouvez le partager avec eux dans les étapes finales, ainsi que comment vous pouvez partager ce travail avec les développeurs et comment vous pouvez parler avec eux types de fichiers parfaits dont ils ont besoin afin que vous puissiez couper votre travail court et vous pouvez terminer le travail le plus rapidement possible tandis que fournir la plus haute qualité possible selon leurs besoins. Donc, vraiment, c'est tout. Merci beaucoup. Encore une fois pour avoir suivi ce cours, j'espère vraiment que vous apprendrez quelque chose de nouveau. J' espère vraiment que vous prendrez quelques trucs et astuces ici et là. Et j'espère vraiment que vous en appliquerez au moins une partie dans vos travaux futurs. Je vous remercie encore une fois et je vous verrai dans le futur cours. Prenez soin 40. Chaîne YouTube pour plus de contenu: Hé, le designer Alex est là. Et je voulais juste vous remercier rapidement. Merci d'avoir pris le discours, et j'espère vraiment que vous en avez autant de valeur que possible si vous voulez consulter plus de contenu. J' ai récemment lancé ma chaîne YouTube, où exploré certains sujets qui pourraient intéresser les concepteurs de freelancers toe techniques de revenu passif de la conception Web, conception APP. Vous concevez la conception UX. Donc, si vous êtes intéressé par l'un de ces sujets, rendez-vous sur ma chaîne YouTube, liez-le dans le pdf, et vous pouvez simplement cliquer là et cela vous mènera à ma chaîne YouTube. Si vous aimez ce contenu, assurez-vous de vous abonner et assurez-vous de suivre, car je vais essayer d'être vraiment régulier avec cette chaîne YouTube et de télécharger autant de contenu que possible. Merci encore une fois d'avoir suivi mon cours, et j'espère vraiment vous voir sur ma chaîne Digger 41. Rejoignez mon groupe Facebook gratuit: Hey, designer, j'espère vraiment que tu as apprécié le cours, et que tu en as autant de valeur que possible. Si vous voulez recevoir encore plus de valeur de ma part et de la communauté du design, j'ai créé un groupe Facebook. Où vous pouvez rejoindre est juste un groupe Facebook pour mes étudiants seuls afin que vous puissiez rejoindre en cliquant sur le lien ci-dessous ordre. Nate off course est un compte Facebook, et c'est un groupe gratuit à rejoindre. Le groupe est formé afin de vous fournir des commentaires supplémentaires afin que vous puissiez joindre vos dessins en suivant ce cours et en utilisant des exemples de ce cours ou tout autre autre hors de mes cours. Ou si vous avez vos propres exemples. Off design travaille du passé du présent. Vous pouvez télécharger ces œuvres sur Facebook Group, puis recevoir des commentaires soit pour moi, soit d'autres membres du design. Je vous encourage également si vous disposez d'un poste pour les partager dans ce groupe afin que tout le monde puisse bénéficier de ce groupe. Encore une fois, le groupe est libre. C' est facile à rejoindre. Il suffit de cliquer sur le lien dans le pdf, et je m'attends vraiment à voir autant d'entre vous que possible dans ce groupe juste pour partager nos expériences en tant que designers, et je vais essayer de poster quelques vidéos supplémentaires, quelques conseils supplémentaires et techniques dans ce groupe Facebook. Mais pour l'instant, on commence tout juste. Nous allons juste en former, et je vous encourage vraiment à vous joindre et à partager votre meilleur travail là-bas. Pour inspirer d'autres concepteurs ou orteils, demandez des commentaires supplémentaires. Assurez-vous simplement, s'il vous plaît, lorsque vous demandez des commentaires, demander des choses spécifiques. Ne demandez pas. Que pensez-vous de cette conception ? Parce que personne ne va répondre à ça. Ou s'ils le font, ils sont sur Lee. Ils vont te dire si ça a l'air sympa ou ça n'a pas l'air sympa. Assurez-vous de demander des commentaires spécifiques sur vos conceptions. Par exemple, faites comme cette combinaison de couleurs. Tu crois que je devrais utiliser un autre front ? Pensez-vous que ces images correspondent bien à la couleur de fond, par exemple, choses comme ça, Alors assurez-vous de demander des commentaires spécifiques lorsque vos conceptions, parce que cela va être beaucoup plus facile pour moi et pour d'autres concepteurs de ce groupe pour vous donner sont des commentaires précis que vous pouvez améliorer beaucoup plus rapidement, puis en demandant simplement quoi ? Tout ce qui sort de ce design. Merci encore une fois d'avoir suivi mon cours, et j'espère vraiment vous voir en vue sur mon groupe Facebook Digger.