Concevoir des applications mobiles dans Adobe XD

1. Cours de design d'applications promo skillshare intermed: Nous allons créer une application mobile géniale dans Adobe XD. Bonjour, je suis Chris Barren, certifie le professeur Adobe et, en plus, le PDG de Dean Junkie, une société de conception d'applications mobiles que j'ai fondée et dirigée 2013 à 2018 en seulement 3 heures. Je vais enseigner vous trouverez certains des principes de conception les plus importants pour la conception de l'application, tous basés sur Material Design 2.3. Et cela provient de la directive officielle de Google. Nous allons concevoir une application mobile. Mais en plus de cela, je vais vous apprendre comment aborder un tel projet, du filaire au brief, passant par le produit fini. Gardez à l'esprit que nous n' allons rien coder. Tout se déroulera dans programme de conception Adobe XD qui propose un essai gratuit de sept jours, puis dix dollars par mois. Dans la première partie de ce cours, nous allons aborder tous les composants d'une application. Ensuite, nous allons nous mettre au travail et appliquer toutes ces connaissances. La principale différence qui fait ressortir mon cœur est le processus de réflexion. Non seulement je vous explique comment concevoir certaines choses, je vais également partager toutes mes idées, toute mon expérience, et vous pouvez immédiatement appliquer toutes ces choses vos propres flux de travail. Sur cette base, mettons-nous au travail et commençons. 2. Introduction à la conception de matériel: Bon retour. Dans les prochaines minutes, je veux que nous examinions la conception des matériaux, savoir si c'est le cas ou non, et pourquoi cela devrait vous intéresser. Le design matériel est un langage de conception créé par Google en 2014 dans le seul but de créer des écarts non seulement beaux, mais aussi utilisables, prévisibles et significatifs. Maintenant, le langage de conception semble prétentieux, mais vous pouvez considérer la conception des matériaux comme un ensemble de règles. Si vous suivez ces règles, vous obtiendrez probablement une application qui aura une apparence et une sensation naturelles entre les mains de l'utilisateur. Maintenant, cette directive est accessible au public pour tous. heure actuelle, la troisième version est disponible. Et c'est parce que, comme pour tout, le baume à lèvres a évolué, il est devenu de mieux en mieux. Eh bien, du moins, nous l'espérons. Maintenant, ce que vous devez savoir à ce stade, c'est que la plupart de ces règles du guide, notre tarif, produisent des résultats. Ils parlent de simplifier les mises en page à l'aide de couleurs vives, utiliser le mouvement pour donner du sens, etc. Il suffit de regarder l' ensemble de Gmail et le nouveau où les règles sont respectées. C'est donc nuit et jour. Material Design peut vous aider. Maintenant, toutes ces directives doivent être prises en compte lorsque vous créez une application ou même un site Web. Maintenant, réfléchissez à la façon dont vos vêtements sont fabriqués et pourquoi ils sont fabriqués d'une certaine façon, n'est-ce pas ? C'est la raison pour laquelle les fans ont deux jambes, mais pourquoi un tee-shirt a une certaine longueur ? Eh bien, pourquoi y a-t-il un trou ici, non ? Les politiques doivent respecter certains paramètres, n'est-ce pas ? Si vous ne suivez pas les règles les plus élémentaires, vous allez vous retrouver avec des designs fous. C'est donc ce que la conception des matériaux essaie d'éviter. Le seul problème, c'est l'emballage. Le guide lui-même est un peu difficile à suivre. C'est un peu bouleversant. Maintenant, vous avez peut-être visité le site Web. Mon Dieu, c'est beaucoup trop et tu n'es pas seul. Encore une fois, il s'agit de la troisième version. Google l'a remanié à plusieurs reprises et il est toujours en cours de mise à jour. Malgré tout, cela reste un peu difficile à suivre, surtout dans certaines sections. La formulation est parfois un peu trop complexe. Et dans l'ensemble, cela le rend très difficile à lire et à suivre. Par exemple, des éléments tels que la densité de pixels, les écrans indépendants de la densité, les pixels évolutifs, etc. Ils peuvent intimider n'importe qui. Vous passez ensuite à d'autres parties et vous trouverez des exemples où il est indiqué d'utiliser 72 dB entre le titre et le bord de l'écran, DP. Je pensais que nous allions utiliser des pixels. Comment convertir les pixels en dp ? Avons-nous besoin de la formule ? Avons-nous besoin d'une calculatrice chaque fois que vous ajoutez un rectangle ? Voilà le genre de choses qui vous font vous gratter la tête. Et encore une fois, ce n'est qu'un exemple. Maintenant, ce que nous allons faire dans ce cours, c'est adopter une approche réaliste qui produira de grandes lacunes. Cela nous amène à ce que le design des matériaux n'est pas. Ce n'est pas un cadeau des dieux. Ce n'est pas la fin des applications. Bien que cela nous donne beaucoup de ressources, je ne crois pas personnellement qu'il faille le suivre à 100 %. Comme si c'était la Constitution, comme si c'était la loi. Maintenant, j'ai trouvé des situations où j'ai dû m'écarter, mais pour de nombreuses raisons. C'est pourquoi, dans ce cours, je vais vous enseigner certains des meilleurs principes de conception que j'ai trouvés infaillibles, pratiques et faciles à utiliser. Maintenant, la plupart d'entre eux se trouvent également dans ce guide, tandis que d'autres ont été découverts grâce à ma propre expérience , à mon travail dans Adobe XD et à la création de lacunes. Maintenant, ce que je veux que vous compreniez, c'est qu'il n'est jamais question de savoir si cela fait partie de la conception des matériaux. Et c'est parce que ça n'a vraiment pas d'importance. quoi j'aime me concentrer, ce sont les résultats. Est-ce que l'application a l'air bien ? Peut-il être codé sans aucune solution de contournement ? Cela nous donne-t-il le résultat escompté ? Ce sont là certaines des questions qui me traversent l'esprit et qui orientent ma prise de décision. Il y a donc quelqu' un en une phrase, nous allons utiliser la conception matérielle et d'autres applications, mais nous allons également nous en écarter de temps en temps. Nous y ferons référence, mais nous n'adorerons pas à, cela étant dit, passons à la prochaine conférence. 3. Présentation des composants d'interface Android: Bon retour. Nous devons savoir quels sont les éléments de base que nous pouvons utiliser pour créer des applications, en particulier celles pour Android. Dans cette conférence, je vais vous donner un aperçu des éléments les plus importants. Ça va être rapide, mais vous n'avez pas besoin de les mémoriser à la banque, vous avez un aide-mémoire en pièce jointe. L'idée est que toute recette de gâteau nécessite de la farine, des œufs, du beurre, etc. La plupart d'entre eux ont besoin des mêmes choses. Il en va de même pour les publicités. Partons de la largeur supérieure, la barre d'état. Il s'agit du petit bracelet en haut de n'importe quelle application qui vous indique le niveau de combat, votre opérateur et d'autres notifications. Il peut être noir, transparent ou de couleur unie. Il s'agit de la barre d'état. La barre d'état, la barre d'état, peu importe ce que vous avez l'idée en termes de design, feront probablement une couleur unie parce que c'est la meilleure apparence. Juste en dessous de la barre d'état se trouve la barre de l'application. C'est le nom officiel, mais il a également été appelé barre d' action il y a quelque temps. Certains développeurs l' appellent encore par ce nom, et je suis dans ce bateau. Je pense que c'est ce qui décrit le mieux ce domaine. Maintenant, la barre d'action est très importante car elle remplit multiples fonctions et nous allons en parler dans une conférence dédiée. Maintenant, apprenons à reconnaître que vous pourriez le voir occuper une seule ligne imaginaire, comme ça. Mais il peut également prendre beaucoup plus de place, généralement pour faire de la place aux onglets. Et des cas rares. C'est peut-être transparent, mais même dans ce cas, il y a toujours un élément obligatoire. Et voici cette flèche, qui est le signe universel d' Android. Pour y retourner. Cela s'appelle en fait la flèche vers le haut dans la documentation officielle. Mais encore une fois, on dit généralement que c'est la flèche arrière. Puisque je l'ai déjà mentionné, concentrons-nous sur le prochain élément de base, les onglets. Maintenant, ils peuvent être utilisés pour diviser votre contenu. Les utilisateurs d'Android connaissent très bien le geste de balayage qui change cela, car ils ne sont pas présents partout dans à peu près toutes les applications. Maintenant, il existe deux types de touches, fixes et défilantes. Je préfère la première car elle est plus esthétique puisque nous divisons la largeur du tableau par le nombre de lits, nous pouvons y aller avec un peu moins de choses ou jusqu'à 45 onglets devient trop encombré au cas où vous auriez besoin de plus d'onglets, il est préférable d'utiliser la fonction de défilement. La distance par rapport au bord gauche est également assez importante. Elle est assez grande. Mais dans l'ensemble, ce ne sont que quelques mots. Un autre élément est le menu de gauche, mais pas parce qu'il nous permet de l'agrémenter en termes de design. Il n'y a pas grand-chose que nous pouvons faire. En fait, c'est vraiment utile car cela encombre l'application, simplifie. Et puis les consommateurs de drogues sont les plus habitués à ce menu. Et cela nous permet de cacher beaucoup de contenu à l'intérieur. Ainsi, au lieu d' encombrer la barre d'action de nombreuses icônes ou de nombreux onglets, vous n'avez qu'à déplacer tout cela ici. Cette mise en page est très standard, sorte que les développeurs peuvent rapidement créer l'apparence par défaut, comme vous pouvez le voir ici. Nous pouvons personnaliser les icônes et ajouter un peu de couleur. Mais c'est à peu près tout en termes de personnalisation. Encore une fois, les développeurs jouent toujours un rôle important dans cette compensation, car si vous créez une mise en page légèrement différente, ils devront faire beaucoup de travail de leur côté, ce qui est assez difficile et encore une fois, plus cher. Maintenant, cela ne vaut généralement pas la peine, alors nous allons le garder comme ça. Donc, pour cette raison, le panneau de navigation ne bénéficiera pas d'une conférence séparée, du moins pas pour l'instant. À partir de maintenant, les cartes sont un excellent moyen de présenter du contenu. Vous pouvez les identifier grâce à la base blanche légèrement arrondie, qui se trouve généralement sur un fond gris clair. Il est assez facile de confondre cartes et listes. Il est préférable de les utiliser pour afficher du contenu de nature similaire. Par exemple fiches de recettes, en revanche, peuvent afficher différents types de contenu, tels que du texte, des photos, puis généralement différents. Un tableau de bord est un bon exemple d'utilisation appropriée des cartes. Chaque point d'objet est une partie différente de l'application. OK, maintenant continuons comme ça. Mon composant suivant est présent dans à peu près tous les écrans, et c'est l'écran contextuel. C'est ce qu'on appelle officiellement un dialogue, et il peut être vu sous deux formats. La version normale, très facile à repérer, puis la version en plein écran. Nous allons discuter de ces deux points dans une conférence séparée. Mais vous pouvez rapidement identifier un dialogue sur l'écran d'un téléphone en regardant la barre d'action. Si vous voyez cette icône de fermeture associée à un mot d'action sur le côté droit, alors c'est une boîte de dialogue, d' accord, presque terminée. Mais j'adore ces gars, alors je voulais vraiment les remercier. Des snack-bars. Et ceux-là. Maintenant que ceux-ci semblent faire partie d'un petit déjeuner équilibré, ces gars sont en fait habitués à informer l'utilisateur de diverses choses qui viennent de se passer. plan conceptuel, on peut les confondre avec les dialogues, mais nous allons passer en revue les différences assez tôt pour l'instant, et veillons à les repérer si nous les voyons dans un dessin. Malheureusement, nous ne pouvons pas faire grand-chose en termes de travail de conception. Mais vous devez les connaître. Ils améliorent vraiment l'expérience de l'utilisateur. Les boutons viennent ensuite sur notre liste. Ils sont divisés en deux grandes catégories. Les boutons réguliers et les boutons d'action flottants, également appelés FAB, sont. Désormais, les boutons classiques sont prévisibles. Ils sont grands, non ? Ils ont un état pressé et peuvent être placés à peu près n' importe où sur l'écran, dans un nombre raisonnable de pores. Désormais, les boutons d'action flottants sont généralement positionnés en bas à droite. Effets. Ainsi, lorsque vous faites défiler la page, le bouton reste en place, car cette action est généralement la principale fonctionnalité de l'application. Désormais, par exemple dans WhatsApp, le FAB ouvre une nouvelle compensation dans les nœuds. Leur bébé crée une nouvelle entrée. C'est donc la principale différence entre ces deux catégories, les boutons classiques et leurs bébés. Mais nous allons en parler plus en profondeur dans une conférence séparée. Enfin, parlons des champs de Beck dans Android. Ils sont donc extrêmement polyvalents et vous pouvez les voir dans à peu près toutes les applications disponibles. Ils peuvent avoir une étiquette ou du texte en dessous. Ils peuvent avoir une flèche déroulante ou l' icône du calendrier à côté d'eux. Les étiquettes avec peuvent parfois être affichées en ligne. Et lorsque vous activez le champ, il se déplace au-dessus de celui-ci et se rétrécit. Ces autres sont très amusants. Et ils peuvent changer radicalement l'apparence de votre application. Nous allons les utiliser beaucoup. Mais c'est sur cela que nous avons conclu cet aperçu des principaux composants Android. Je sais que c'est beaucoup de bacon, mais veuillez consulter le aide-mémoire ci-joint et vous pourrez même l'imprimer. Vous n'avez rien à mémoriser car nous allons discuter de tous les détails en profondeur au bon moment. Maintenant, avant de partir, sachez qu'il existe d'autres composants Android tels que des puces, des curseurs, des infobulles, etc. Mais dans mon livre, elles ne sont pas aussi importantes. Et je voulais vraiment y aller étape par étape pour cette raison, nous n'allons pas en parler. Nous allons plutôt nous concentrer sur ce dont nous avons discuté ici car ils figureront dans 90 % de tous les projets. D'accord, je te verrai lors de la prochaine conférence. 4. Voici la meilleure taille de tableau de peinture pour vos applications: Bon retour. Parlons de la taille du tableau d'art, qui peut devenir assez compliqué si vous n' avez pas les bonnes naissances là-bas. Maintenant, nous avons vu que Google mesure tout en dB et en Sb. Maintenant, si vous êtes le codeur, vous connaissez probablement ces termes. Mais qu'en est-il du reste d'entre nous pour le design, c'est ce que nous devons faire ? Eh bien, voici la version courte. Tout d'abord, pour les applications Android, nous allons utiliser 720 comme largeur. La hauteur n'a pas vraiment d' importance, car la plupart du temps, nous aurons des applications plus longues. Alors pourquoi 720, même si nous en avons 360 ou le quatrième dans le panneau des préréglages. Et puis quelques kits d'interface utilisateur que vous avez peut-être vus 375. Voici la situation. 360 est la norme en matière de conception des matériaux. Numéro deux. Vous pouvez voir un exemple ici où la hauteur de la barre d'action est de 56 dB, ce qui se traduit par 56 pixels sur le tableau d'art 360. Maintenant, vous pouvez voir toutes ces autres mesures qui sont très utiles pour les débutants. Maintenant, le problème avec trois sixièmes, c'est que c'est assez petit. Ainsi, lorsque vous exportez cela, vous ne voulez que le montrer à vos amis ou même à vos clients. Ça ne va pas être aussi beau. Ça ne va pas être aussi net, non ? C'est pourquoi je préfère simplement le doubler, le double du tout. Les proportions sont les mêmes , mais il suffit de doubler, non ? C'est pourquoi nous allons utiliser 720. Encore une fois, nous doublons essentiellement la taille de l'écran, mais tout est proportionnel. Vous pouvez donc toujours regarder ces valeurs du gars et les doubler. Et tu seras prête à partir. Par exemple, 56 dB devient 112 pixels, 16 devient 32, et ainsi de suite. Les proportions restent les mêmes. Mais cela donne à une banque l'impression que la norme passe des trois seizièmes à n'importe quoi d'autre. Peu importe. Eh bien, à titre d'exemple approximatif, disons que nous avons un écart de 16 pixels ici, ici, puis ici sur l'écran du téléviseur. Cool. Ensuite, sur la totalité des cent 12 pixels, elle peut augmenter jusqu'à 24 pixels. Mais encore une fois, il y en aura 24 partout. L'idée est donc, encore une fois, que tout est proportionnel. Tout évolue à la hausse ou à la baisse. Et comme nous utilisons des vecteurs, tout va bien. Donc, pour résumer, la taille de votre écran n'est pas vraiment très importante car vos éléments seront toujours redimensionnés à la hausse ou à la baisse. C'est ainsi que fonctionnent les applications. Certains téléphones ont des résolutions très élevées. moins chers ont une résolution plus faible. Alors, allez-vous concevoir versions plus de chaque application ? Non, ce serait fou. Au lieu de cela, vous en créez un en tant que gars, puis la coda va le redimensionner à hausse ou à la baisse en fonction de diverses choses. Et comme nous utilisons des formes et des icônes vectorielles, cela signifie que vous pouvez le faire sans aucun problème de qualité. Tu n'auras pas de bords flous ou ensanglantés. Et encore une fois, je recommande sept 20e pour la largeur. Et cela nous amène au prochain problème de dimensionnement. Quelle est la meilleure taille pour tous nos composants ? Pour les boutons, pour l'action Bode, pour les cartes, etc. Parlons-en dans le prochain clip. 5. Taille dans les pixels : voici pourquoi les gens discutent: Bon retour. Dans la conférence précédente, nous avons parlé de l'utilisation du Material Design Guide. Cool. Maintenant, pour obtenir rapidement toutes les bonnes tailles pour les autres composants, il suffit de rechercher les spécifications, qui sont l' abréviation de spécifications. Et vous n'avez pas obtenu de réponses rapides en termes de taille. Exemple pour la barre supérieure, qui doit mesurer 112 pixels de haut. Dans l'espace sur la gauche, il y aura deux pixels. Maintenant, comment puis-je obtenir ces chiffres ? Je les double juste pour qu' ils s' adaptent au tableau 720. Passons maintenant aux boutons, par exemple, la largeur minimale est de 128 pixels, la hauteur minimale de 72 pixels. Passons maintenant à un autre exemple. Examinons les fabs, par exemple recherchant les spécifications et en développant plusieurs types de dabs. Mais en bref, ceux-ci mesurent 96 pixels de haut, et c'est la norme. Et en voici une autre. Cela fait 144 pixels de haut, juste au cas où vous voudriez une icône et l' étiquette, une étiquette de texte. Mais oui, dans l'ensemble, c'est le moyen le plus rapide de se familiariser avec la conception des matériaux. Je tiens à vous rappeler qu'il s' agit de la deuxième version du guide. Si vous voulez utiliser le troisième matériau, ce que je ne recommande pas vraiment. Juste une minute de mise à jour en ce qui me concerne, vous pouvez toujours doubler ces valeurs, mais vous devrez utiliser 824 comme taille du tableau d'art. Donc, au lieu d'en assembler 28, 24, pas grand-chose. Mais encore une fois, tu le sais. Maintenant, prenons du recul et regardons la situation dans son ensemble. Maintenant, est-ce que les développeurs codent, se soucient-ils si vous utilisez Material Design deux ou trois ou si vous utilisez 36412, ce qui signifie 72824 ? Non, absolument pas. Je répète. La plupart des codeurs ne se soucient pas de la taille d'écran que vous concevez. Et c'est derrière la porte. Mais cela soulève la question suivante : pourquoi tant de personnes se disputent-elles en ligne à propos de la taille du tableau d'art ? Eh bien, réfléchissons à tous les objectifs. En tant que designer. Au début, nous ne voulons qu'une chose, mais pas les chemins qui changent en regardant les écarts. Par exemple, concevoir un énorme bouton qui occupe un tiers de l'écran, n'est-ce pas ? Ce serait mauvais. Ou une icône si petite que seules les extrémités peuvent être utilisées. C'est ce que nous essayons d'éviter en tant que designers débutants, n'est-ce pas ? Et c'est là que le gars entre en jeu. Il s'agit d'un bon ensemble de règles qui empêchent ce type d'erreurs. Encore une fois, vous voulez concevoir des ventilateurs, non ? Tu as besoin de deux jambes, non ? Vous voulez concevoir la voiture. Tu vas avoir besoin de roues. Les normes existent pour une bonne raison. Ils constituent une base solide pour notre conception. Maintenant, à cette fin, voici ce que je suggère. Ouvrez de magnifiques applications sur votre téléphone et prenez des captures d'écran. Recherchez les applications que des millions de personnes utilisent. Faites-les ensuite glisser dans Adobe XD et ajustez leur taille si nécessaire, afin qu'ils puissent tenir dans votre tableau d'art. y a de fortes chances que vous fassiez une capture d'écran. Mais encore une fois, c'est bon. Réduisez-le proportionnellement. Maintenant, la question est si votre taille est à peu près la même ? Tu vois, ce n'est pas une tragédie. Si au lieu de 96 pixels, vous comptez en utiliser 100, la police de Material Design ne viendra pas à votre porte. Maintenant, la principale préoccupation est de ne pas l'atteindre à 400 pixels de haut. Ce serait un problème, ou 20 pixels. Beaucoup de personnes plus intelligentes ont donc décidé que 96 pixels fonctionnaient mieux pour la plupart des gens. C'est pourquoi nous parlons tellement taille, afin de pouvoir partir du bon pied. Mais juste au cas où vous aimeriez pas les directives de conception des matériaux, continuez simplement à prendre des captures d'écran et comparer votre conception aux principales applications. Voyez si Yahoo Mail a décidé que le bouton 96 par 96 fonctionne le mieux, alors vous ne devriez vraiment pas utiliser 20 par 20. Ou si vous constatez que 90 % des applications utilisent des onglets d'une hauteur de 96 pixels. Encore une fois, n'utilisez pas 50 pixels, non ? Ce ne sont là que des exemples aléatoires qui me viennent à l'esprit, mais j'espère que vous comprenez ce que je veux dire. Ces tailles indiquées dans le guide ne sont pas des lois transmises par la divinité. Non, c'est juste un moyen rapide de créer une fondation. Donc, si vous voyez certaines personnes débattre de 363 754,12, quatre AT, avec n'importe quoi d'autre. S'il vous plaît, ne vous impliquez dans aucune dispute. Axé sur les principes de conception. Au lieu de cela, un schéma de couleur grise, symétrie équilibrée, une biographie de pipe impressionnante, etc. C'est ce qui va vraiment donner à votre application une belle apparence. Et bien sûr, ne vous écartez pas trop de la norme. Quelques pixels ici et là, c'est très bien. Mais ne changez pas les tailles de plus de 20 dollars. Et merci beaucoup et je te verrai lors de la prochaine conférence. 6. Apprendre à concevoir la barre d'action (barre supérieure): Bon retour. Parlons de la barre d'action ou de la barre d'applications et voyons ce qu'elle peut apporter à nous en tant que designers. Avant cela, voyons rapidement ce avec le voisin d'en haut, la barre d'état. Cela ne suscite aucun amour et il est assez honteux les développeurs le laissent à son état par défaut. Mais une barre gris foncé n'est pas vraiment une bonne chance. Vous pouvez le rendre transparent ou noir. Les designers ont tendance à utiliser une couleur unie qui correspond à la barre d'action, ce qui est plus esthétique. Cela permet également d'obtenir de meilleurs contrastes avec toutes ses icônes, qui sont pour la plupart blanches. Maintenant, plus récemment, avec Material Design Tree, la barre d'état prend la même couleur que l' ActionBar par défaut, mais c'est tout à propos de la barre d'état. Passons donc à la barre d'action. Maintenant, l'ActionBar peut prendre plusieurs formes et tailles au total, mais vous n'en utiliserez probablement qu'une ou peut-être deux. Maintenant, c'est le modèle classique avec une icône de menu sur la gauche et le logo au milieu. C'est le centre, la barre d'action. Et c'est très populaire pour l'écran d'accueil, c'est-à-dire pour l'écran, que vous y reveniez toujours. Maintenant, cette icône de menu est généralement appelée menu des hamburgers parce que les lignes se superposent. Donc je suppose que ça ressemble un peu à un hamburger de toute façon, c'est très populaire. Mais sachez que ces onglets constituent un composant distinct. Oui, ils sont de la même couleur, mais ils ne font pas partie de la barre d'action, par exemple, d'accord, passant à autre chose. Sur le côté droit, vous aurez souvent des icônes qui vous aideront à effectuer des actions assez importantes. Dans ce cas, nous avons une fonction de recherche très utile sur un site d'actualités ainsi qu'un autre menu. Passons à une autre barre d'action très populaire. Lorsque vous entrez dans un élément, vous obtenez généralement cette mise en page. Cette flèche vous permet de revenir au niveau supérieur en fonction de la façon dont vous le regardez. Ensuite, vous avez un titre qui vous permet de naviguer dans l'application, ainsi qu'une autre icône sur le côté droit. Il s'agit d'une barre d'action typique qui quitte la ligne où la première barre d'action, nous avons dû les centraliser, le logo. Ici, le titre se trouve à gauche. Donc, pour résumer cela jusqu'à présent, nous avons vu deux types de barres d'action, centrée et ligne gauche. Encore une fois, celui centré montre généralement le logo de l'entreprise et vous le verrez généralement sur l'écran principal de l'application. Le titre aligné à gauche s' affiche généralement lorsque vous vous trouvez dans un type de contenu. Cela représente donc deux barres d'action sur quatre. Qu'en est-il des deux autres ? Eh bien, les enfants et un exemple de Gmail. Comme vous pouvez le voir, le titre est très long et assez grand, il ne pourrait donc pas rentrer à côté de la flèche. En fait, vous n'êtes pas censé rendre le titre très petit pour l'améliorer. C'est pourquoi Material Design propose ces deux options. En gros, le titre descend vers le bas de mes conseils, essayez de l'éviter parce que cela n'a pas l'air si beau à mon avis. Maintenant, laissez-moi vous dire la vérité. Les applications sont mises à jour en permanence. Vous pouvez donc consulter ces mêmes applications ce cours et vous pourriez voir del complètement différent. C'est exactement comme ça que les choses se passent. Mais l'essentiel reste toujours le même. Un menu de hamburgers, un titre, quelques icônes sur le côté droit. N'utilisez jamais plus de trois icônes sur le côté droit. Et si le titre ne correspond pas au menu des hamburgers, qu'est-ce que la flèche de retour ? Déplacez-le simplement vers le bas. Ne le rétrécit pas. Maintenant, la question est : pourriez-vous faire de petites variations ? Bien sûr. Par exemple, voici Google Agenda. Ici, sur l'écran principal, vous pouvez vous attendre à ce que le titre soit centré. Mais il s'agit en fait d'une liste déroulante, donc elle quitte la ligne. Et comme les icônes Environ trois se trouvent sur le côté droit, il est logique de placer le mois et l'année sur la gauche. Et toujours dans Gmail, nous avons cette barre d'action dans les économies. Maintenant, cette flèche est très courante. Encore une fois, cela vous montre que vous êtes dans quelque chose et que vous pouvez revenir en arrière, ou comme le dit le guide officiel, vous pouvez monter d'un niveau. Maintenant, l'ActionBar est une icône d'alignement à gauche, un titre sur le côté gauche, puis une icône de menu sur le côté droit. Mais oui, dans l'ensemble, c'est à cela que ressemblent la plupart des barres d'action. Parlons maintenant de la taille en pixels. Vous avez un guide en pointillés pour que vous n'ayez pas besoin de les mémoriser à la banque, nous parlons de la taille de l'écran du V6 de la conception du matériau au double. Donc 720 pixels pour la largeur. Donc, la barre d'état, nous voulons 48 pixels. Et pour la barre d'action 112, cela nous donne un total de 160 pixels. Mais l'espace vide de chaque côté, 32 pixels, est la norme. En utilisant cette taille de tableau d'art, vous pouvez toujours consulter le guide officiel de conception des matériaux et doubler les valeurs affichées ici dans VB. Donc, si nous y jetons un coup d'œil, nous allons voir que la barre d'action est 56 dB fois 2 100,12. Il en va de même pour les marges. Ils disent 16, on va le doubler, donc ça fait 32. Donc, c'est un résultat ou le double du nombre saisi que le guide officiel lorsque vous utilisez mes côtés de guerre recommandés . C'est tout pour la barre d'état et la barre d'action. Vous avez les tailles et les pixels ainsi que les mises en page les plus courantes. Consultez les aide-mémoire pour vous rafraîchir la mémoire. Merci beaucoup. 7. Tout ce que vous devez savoir sur les onglets: Bon retour. Dans cette conférence, nous allons parler de dabs et d'autres composants Android essentiels. Leur objectif principal est de séparer le contenu sur différents écrans. Maintenant, il n'y a qu'une seule règle majeure à garder à l'esprit. Le contenu de chaque onglet doit se situer au même niveau hiérarchique. Qu'est-ce que cela signifie ? Concrètement, cela signifie que vos onglets doivent afficher des éléments qui ont du sens ensemble. S'il s'agit d'une application musicale, juste un exemple aléatoire, vous pourriez y voir de la pop, rock, du hip hop, etc., n'est-ce pas ? S'il s'agit d'un magasin, vous pourriez y voir appareils électroménagers, des téléphones portables, des appareils photo. C'est donc très intuitif une fois que vous considérez tous ces exemples. Mais voici ce que vous ne devez pas faire, ce qui est encore plus clair. Supposons qu'il s'agisse d'une application de livraison de nourriture et qu'elle affiche les paramètres italiens, indiens, puis. Cela ne fonctionne donc évidemment pas, car épargne a sa place à un tout autre endroit de l'application. Voilà donc ce que cela signifie, le même niveau de hiérarchie. Maintenant, en général, la raison pour laquelle tout est susceptible de vous montrer la structure d'information de l'application. Donc, en fait, il y a peu de chance que tu gâches tout ça. Parlons maintenant du côté design. Les onglets peuvent être divisés de différentes manières en fonction de ce qui vous intéresse. Désormais, du point de vue de la navigation, ils peuvent être fixes ou défilants. Maintenant, j'ai réparé mes abdos. Ils ont l'air super. Mais tu es limité à quatre. Les entrées dont la largeur en pixels est déterminée par le nombre. Et voici le calcul. Les onglets signifient un onglet trois sixièmes plus profond, car la largeur totale est de 723 onglets (240). Et si tu veux 1AD, c'est tout ce que tu auras. La méthode la plus simple pour organiser ces éléments dans Adobe XD consiste à créer le rectangle qui affiche l'onglet actif. Cela fait toujours quatre pixels de haut. Entrez ici la largeur, disons 40, puis quittez la ligne, puis centrez le texte ou l'icône avec les onglets, cela signifie que vous aurez besoin de couches de texte individuelles. Et déplacez simplement cette barre. C'est vrai. Maintenant, au cas où nous parlons d'onglets défilants, la distance par rapport au côté gauche doit être 104 pixels, 104 pixels, le Paxos. Ensuite, vous avez des départs de rectangles actifs. Bien entendu, le mot lui-même doit être centré, alors assurez-vous de ne pas vous tromper quant à cette distance. Encore une fois, laissez 100, puis versez les pixels vides du côté gauche. Et puis ce sera ça. OK, Nice. Maintenant, en ce qui concerne la largeur minimale, c'est encore 180. Cela signifie que vous allez obtenir deux touches et demie sur un seul écran. Mais cela ne devrait pas poser de problème étant donné que vous voulez montrer à l'utilisateur que ce sont de nombreux autres onglets. Maintenant, quand vous le voyez en action, vous verrez que cela a vraiment du sens car l'onglet actif devient visible à travers une belle animation. OK, pour avancer, une autre façon de voir les Bell Labs est basée sur leur étiquette. Il peut s'agir d'une icône texte ou d'une icône de texte plus. Mais comme vous le supposez probablement déjà, vous ne devez jamais les mélanger et les assortir. Si vous avez deux libellés de texte, n'ajoutez pas le troisième. C'est juste une icône qui n'a aucun sens. Choisissez une direction et restez dessus. C'est une règle très simple qui s'applique à peu près partout. Or, ces choix ont des tailles très spécifiques. Voyons donc ce que c'est, quelle option 1 avec les étiquettes de texte. C'est de loin le choix le plus populaire. Sa taille et son arrière-plan mesurent 96 pixels de haut. 96. Cela est bien sûr lié à votre barre d'action et à la barre d'état. L'ensemble du bloc, soit près de 720 planches d'art standard, mesure 256 pixels de haut, soit 48, 112, puis 96. Si vous choisissez l'itinéraire des icônes qui utilise la même hauteur pour l'arrière-plan 96, les icônes elles-mêmes doivent être maintenues à la taille de huit x 48 pixels. Si votre icône est de forme irrégulière, vous pouvez utiliser un rectangle pour vous guider. Maintenant, je ne suis pas fan des touches avec des icônes uniquement, car il est assez difficile de comprendre ce qui se cache derrière elles. Personnellement, je m'en tiendrais donc à l' écart de cette option à moins que les icônes ne soient extrêmement intuitives et très connues. Ce groupe est réservé à des éléments tels que la recherche, le GPS, le bone, le Wi-Fi et les quelques autres. Maintenant, la troisième option et la dernière sont l' étiquette et les icônes. Donc, l'icône tx plus, dont encore une fois, je ne suis pas un grand fan à cause de la hauteur. Cela nécessite 144 pixels contre 96 pour une seule ligne. C'est donc une grosse différence. Vous consommez beaucoup d'espace. En effet, cela a l'air bien, mais avec la perte d'espace de pression, il y a quelque chose à dire à propos d'une fonction de défilement où la barre d'action disparaît lorsque vous faites défiler l'écran vers le bas. Mais nous n'allons pas nous concentrer sur le mouvement, car il est très difficile de l'ajouter à tous les projets dans Adobe XD. Mais attention, ce n'est pas la fin du monde. Si vous faites un peu d'espace en haut, la plupart des applications affichent une étiquette, exactement pour cette raison, pour simplifier les choses. Mais en fin de compte, c' est vraiment à vous de décider. Maintenant, revenons à notre sujet, collez deux couches de texte et essayez d' éviter les noms très longs. Cela peut être évité. Ils utilisent le point point, point à la fin du mot, même si Google le dit, cela peut semer la confusion chez l'utilisateur. Maintenant, ce qu'ils proposent, c'est augmenter la hauteur du composant. Mais dans mon livre, ça va paraître pire. Cela nous amène donc à l'état des tampons. Deux d'entre eux sont actifs avec ce rectangle de pixels complet en dessous. Maintenant, il y a généralement une couleur qui se distingue vraiment par son contraste maximal. Et puis nous sommes inactifs lorsque la couche de texte a un aspect délavé et aucune décoration supplémentaire, rien en termes de design. D'après mon expérience, la plupart de mes en-têtes sont de couleurs vives. Ainsi, mon étiquette de texte active et le rectangle en dessous peuvent être d'un blanc pur. Parfois, je m' écarte et j'utilise du jaune, mais uniquement lorsque la combinaison n'est pas choquante et que cela ne gêne pas l'œil. Notez maintenant que couche de texte des onglets actifs ne doit jamais être d'autre couleur que le blanc. Vous pouvez donc jouer avec le rectangle, la barre en dessous, mais pas la couche de texte qui est blanche, est généralement préférable. Maintenant, voici autre chose. points blancs sont très courants. Cela peut donc sembler propre, mais la plupart du temps, nous n' utilisons pas vraiment un fond blanc pur. Maintenant, je veux vous laisser avec cette idée en tête. Parfois, les règles peuvent être enfreintes tant que vous suivez les principes de conception décrits dans l'ensemble de ce cours, vous pouvez sortir des sentiers battus et créer quelque chose de beau, quelque chose qui est utilisable , que vous ayez suivi les directives de conception des matériaux ou non. Mais pour l'instant, il est temps de passer à la taille de cellule suivante. Ils créent vos propres cinq en-têtes. Par intitulé, je veux dire barre d'état, barre d'action dans un système d'onglets, le tout combiné. Maintenant, le but est de vous familiariser avec le processus de configuration dans Adobe XD et expérimenter différentes couleurs et mises en page. En général, nous ne travaillons pas dans des conditions isolées. Nous ne créerons pas uniquement l'en-tête. Nous allons créer le tout. Mais je veux vraiment que tu essaies ça et que tu voies comment tu t'en sors. donc cinq en-têtes différents dans le style de votre choix, dans n'importe quelle mise en page. Pour les icônes, vous pouvez utiliser black icon.com ou simplement en prendre quelques-unes sur Internet. Ça n'a vraiment pas d'importance. C'est juste à des fins pratiques. Nous ne l' utiliserons nulle part ailleurs. Veuillez publier votre travail dans la section des commentaires. Et idéalement, tous ces dessins devraient être placés les uns en dessous des autres sur un seul tableau d'art. Amuse-toi bien, et je te verrai lors de la prochaine conférence. 8. Comment travailler avec des cartes: Bon retour. Les cartes sont l'un des éléments les plus importants de tout appareil Android, et c'est parce qu'elles constituent l'un des meilleurs moyens d'afficher du contenu. Les cartes sont de toutes formes, tailles et apparences. Et il est surprenant de voir combien de variétés portent ce label en voici quelques exemples. Celui-ci montre une vidéo dans la section supérieure et le titre et la description en dessous. Celui-ci a le titre au-dessus, puis une photo, une description et l'appel à l'action. Vous pouvez afficher des cadeaux musique et ajouter des éléments liés à la météo. Vous pouvez avoir toutes sortes de choses comme des icônes, commutateurs, beaucoup de choses, des boutons, par exemple, ou rien du tout. Bref, ils sont extrêmement polyvalents. n'y a qu'une seule règle majeure. Les cartes doivent tenir debout seules sur 2 pieds. Cela signifie qu' ils ne s'appuient pas sur les éléments environnants, les composants ou un contexte spécifique. Passons donc en revue quelques cas afin de mieux comprendre pourquoi les cartes sont si flexibles. Maintenant, si nous regardons l'application mémo au niveau des nœuds, nous pouvons voir les cartes inactives. C'est pourquoi j'ai dit que vous seriez peut-être surpris de voir combien de variétés il s'agit. Dans cette version. Nous n'avons pas de titres, de boutons, de médias d'aucune sorte, de vignettes , de descriptions, rien, juste le conteneur et l'aperçu du contenu réel. Un aperçu, c'est tout. Ce sont des cartes sur lesquelles vous considérez maintenant tout cela, je n'ai pas de taille précise ni de modèle à suivre. Réfléchissez au contenu qui doit être inclus et appliquez les principes de conception de ce cours, particulier ceux que nous aborderons un peu plus tard dans l' exemple en utilisant le droit Le rapport hauteur/largeur, un espacement constant, une typographie de qualité et les membres antérieurs que sont la lisibilité, hauteur de ligne et la taille adéquates sont fondamentalement très importants lorsqu'il s'agit de texte. Ce sont donc les choses qui vont le faire ou le défaire. Passons maintenant à I Herb, un magasin de suppléments très populaire qui propose plusieurs cartes. Sur l'écran initial, voici d'abord une rangée de différentes marques. Donc, une approche très minimale en matière de contenu. Juste en dessous de cette rangée, nous avons quelque chose de complètement différent. Une photo du produit. J'ai ressenti un prix par étoiles, mais aussi un menu qui contient les options. Maintenant, c'est beaucoup. En descendant, nous voyons un autre gardien pour le billet de blog. Encore une fois, les caractéristiques du podo sont inactives et la description à la base de chaque carte se trouve le contenant qui est un rectangle blanc, légèrement arrondi ou carré, qui peut avoir une ombre très subtile. Vous pouvez généralement les trouver sur un fond clair au fur et à mesure que vous les retournez, l'idée que la carte est un élément distinct indépendant de tout le reste. Voici un autre exemple, une application de livraison mondiale qui prend d'assaut l'Europe en matière de livraison de nourriture. Nous pouvons voir ici un autre exemple de cartes utilisées. Cela n'a rien de spécial, mais il est intéressant de voir combien de styles peuvent être utilisés. Maintenant, lorsque vous appuyez sur une carte, elle peut passer en mode plein écran. Mais dans certains cas, une icône déroulante nous indique la capacité de la carte à révéler encore plus de contenu. Cet exemple sur le matériau point io est acheté sur. L'important, c'est que vous n' avez pas à faire défiler les barres et à utiliser votre application. Donc, si la carte révèle plus de contenu que la perle, vous devrez la faire défiler trop humide, mais vous n'obtiendrez pas défilement secondaire uniquement pour cette action. En continuant, les cartes peuvent être empilées les unes sur les autres. Mais il existe de nombreux cas où vous pouvez les placer dans une rangée avec un défilement horizontal. C'est donc une approche très populaire car elle fournit beaucoup de contenu, mais elle est sous le contrôle de l'utilisateur. Cela réduit le risque que l' utilisateur se sente dépassé par la quantité d'inflammation. Encore une fois, soyez prudent lorsque vous mélangez des touches avec des cartes à défilement. Par défaut, l' utilisateur sait qu'il peut balayer et changer d'onglet. Mais s'il touche une zone où se trouve la carte défilante, un parchemin horizontal pour celui de la Garde. Il va finir par les parcourir à la place. C'est donc le genre de chose qui agace vraiment les utilisateurs. C'est quelque chose qui semble insignifiant, comme si c'était un petit inconvénient, mais en fait, les gens détestent ça. Maintenant, pour en revenir à nos cartes, j'espère que vous retiendrez une chose en particulier de cette conférence. Une carte n'a pas un aspect ou une taille particuliers. Il peut inclure de nombreux éléments. Ou il peut prendre la forme d' un rectangle surmonté d'un peu de texte. Et c'est tout. L'essentiel est de disposer les choses de manière à ce que le but de l'application, l'objectif, soit atteint sans surcharger l' utilisateur d'une inflammation excessive. Nous allons maintenant parler de cette deuxième partie dans une conférence dédiée. Mais pour l'instant, je voudrais voir d' autres cartes que vous avez identifiées et d'autres laboratoires. Veuillez publier une capture d'écran afin que les autres puissent voir plus d' exemples de cartes. Cependant, comme je l'ai dit, ils peuvent être de toutes formes et tailles. Ensuite, créez au moins deux cartes de votre choix. Veuillez les créer tous à l'intérieur du tableau 720. Il peut s'agir de tout type de carte avec n'importe quel type de contenu. Je veux vraiment que tu t'entraînes plus que toute autre chose. Mouillez-vous et j'espère vraiment voir d'autres travaux dans la section des commentaires. Merci. 9. Créer des boutons beaux et efficaces: Bon retour. Parlons des boutons, de leur fonctionnement et de l'environnement Android. Nous avons deux catégories différentes. Nous avons des boutons classiques et des boutons d'action flottants, appelés FAB. Maintenant, parlons de celui-ci, FEB, chaque fois que vous lancez un nouveau projet d'application, vous allez probablement vous demander quel est l'objectif de l'application ou ce que l'utilisateur est censé faire dans l'application. Si nous parlons de Gmail, par exemple, l'action principale serait de rédiger un nouveau message. Ou s'il s'agit de l'application de calendrier, nous avons besoin d'un FAB pour créer une nouvelle entrée. S'il s'agit de Google Maps, l'utilisateur doit commencer son voyage très rapidement. S'il s'agit d'une application d'horloge, l'utilisateur doit créer la nouvelle alarme, etc. Tu as compris l'idée. Cette action spécifique est une fonctionnalité essentielle de l'application dont l'utilisateur a souvent besoin. Il doit donc être à portée de main. Il doit être affiché à tout moment. C'est donc là qu'intervient le bouton d'action flottant. Il coche toutes les cases. Sa principale propriété est qu'il flotte au-dessus du contenu dans une position fixe, donc il est toujours là, toujours accessible. Donc FAB, bouton d'action flottant, certaines applications lorsque vous faites défiler l'écran vers le bas, elles apparaissent en haut, mais quand vous vous arrêtez, elles apparaissent toujours vers le haut. Désormais, FAB peut prendre deux formes, régulière et étendue. Désormais, le bouton flottant normal est toujours placé en bas à droite de l'écran. Et j'aime le placer à 32 pixels des bords inférieur et droit. Maintenant, la taille du bouton est d'un douzième par un douzième et l'icône qu'il contient est de 48 x 48. Et comme je l'ai dit, le bouton flotte. C'est pourquoi il a généralement une ombre projetée. Elle est également de couleurs vives et l'icône est généralement d'un blanc pur, elle est donc très facile à obtenir. L'icône la plus courante est le symbole plus, qui signifie généralement créer, créer le nouvel e-mail, créer la nouvelle réservation et une nouvelle entrée, etc. Maintenant, il n'y a qu'un seul bouton d'action flottant, un seul FAB. Et c'est parce que c'est généralement la chose la plus importante dans l'application. Donc, s'il vous plaît, n'avez pas plus d'un FAB. Maintenant, voici une autre chose que je déconseille l'utilisation de plusieurs actions cachées dans un FAB. Maintenant, cette animation, bien sûr, est magnifique. Cela a un impact. Mais quand je l'ai utilisé, j'ai vu moins de clics. Et c'est parce que les gens ne sont pas habitués à tout cela. Alors, encore une fois, veuillez éviter cela. Maintenant, le type de bouton d'action flottant suivant est le bouton étendu, où le bouton normal était limité à une seule icône et assez petit. Le FAB étendu peut également comporter une étiquette de texte ou un texte et une icône. Et vous pouvez le rendre aussi large que vous le souhaitez, mais la hauteur recommandée est de 96 pixels. Maintenant étendu. Les bébés sont parfaits pour les actions qui nécessitent une étiquette textuelle. Parfois, un Nikon ne le coupe tout simplement pas, ce n'est pas assez clair. Maintenant, ils sont également utilisés pour attirer l'attention de l'utilisateur par leur taille. Et c'est parce qu'ils peuvent être assez volumineux et, comme les classiques, ils flottent au-dessus du contenu. Il est donc clair que l'utilisateur est censé cliquer dessus. Maintenant, un bon exemple est le bouton Checkout. Bien sûr, vous avez peut-être une icône pour le panier et en haut à droite, mais vous risquez de la perdre lorsque vous voyez un bouton d'action flottant étendu, vous ne le manquerez pas. Donc, évidemment, lorsque vous voulez finaliser, pas seulement cela, mais c'est une bien meilleure expérience. Passons à la catégorie suivante, les boutons classiques. Maintenant, ils se présentent sous de nombreuses formes et tailles, mais ils sont fixés à une certaine position dans l'application, comme vous allez le voir dans un instant. C'est donc la principale différence entre eux et leurs bébés. Fab est de faire flotter le vout, et ils se trouvent généralement en bas à droite. Les boutons classiques peuvent être absolument partout. Maintenant, il existe cinq types de boutons irréguliers, mais vous n'en utiliserez probablement que trois environ. Il est donc rempli, esquissé et textuel. Cette capture d'écran vous montre exactement ce que vous devez savoir. En gros, vous choisissez le type de bouton en fonction de son importance. Maintenant, dans ce cas, qu'attend l' entreprise de l'utilisateur ? Quelle est l'action la plus utile ? C'est une question de respect. C'est pourquoi le bouton Remplir est là, car c'est lui qui ressort le plus. Cela attire votre attention. Maintenant. Vous pouvez dire : « Hé, vous savez quoi, cela pourrait maintenant faire gagner plus d'argent à l' entreprise. Mais en général, les gens ajoutent plusieurs produits à un panier avant de se débarrasser de la goutte. C'est pourquoi l'accent est mis sur Add Regard. C'est ce que la plupart des gens s'attendent à voir. Il est donc clair que ce sont les actions clés. C'est pourquoi il reçoit le bouton de champ. Et la réaction secondaire se fait maintenant sur le bouton de contour. C'est ce qu'on appelle aussi un bouton fantôme, et c'est parce qu'il n'a pas de corps. Personne ne s'amuse. Le troisième type de bouton est maintenant du texte pur. Dans ce cas, il comporte également une fonctionnalité ou une icône. Posez une question. Encore une fois, cette action est bien moins importante que les deux autres. Il faut donc qu'il crie moins, il n'a pas besoin de se démarquer autant. C'est ainsi que vous pensez des boutons. C'est ce qu'on appelle le principe de hiérarchie. Et en fait, ce n' est pas si compliqué. Vous réfléchissez au niveau d' importance, puis vous descendez. Il s'agit donc d'un plan rempli, puis d'un texte. Maintenant, pour en revenir au guide des matériaux dans sa troisième forme, je n'aime vraiment pas les boutons Donald. Je pense que c'est utilisé pour les étuis marginaux. Donc je ne veux vraiment pas t' embêter avec eux. Et le dernier, le bouton surélevé, est souvent confondu par les débutants avec un FAB étendu. Donc, mon conseil : ne vous concentrez pas sur ces autres pour vous concentrer sur les trois que j'ai mentionnés, et vous serez prêt à partir. Maintenant, quand nous allons concevoir des objets, vous verrez que nous n'allons pas nous arrêter et vous demander, oh, c'est sur FAB, qu'est-ce que c'est un bouton surélevé ? Savez-vous sur quoi nous allons nous concentrer ? C'est beau à regarder ? Est-ce facile à utiliser, etc. Dans l'ensemble, ce sont des boutons en un mot. La deuxième partie de l'équation est qu'il y a toujours un rang à prendre en compte sur n'importe quel écran. Il y a donc l'action la plus probable , comme ajouter au panier, mais il peut y avoir d'autres éléments, comme plus d'informations ou comparer des articles qui sont moins importants, mais ils sont toujours là. Ainsi, sur la base de ce processus de réflexion, vous pouvez décider de l' impact que vos boutons devraient avoir. Cela nécessite un peu d'analyse de cela , de l' écran et des circonstances actuels. Mais nous allons parler de tout cela dans ce cours dès maintenant. C'est ça. Prenons un moment et je vous verrai dans 1 seconde. Merci beaucoup. 10. Travailler avec du texte comme un pro: Bon retour. Dans les prochaines minutes, nous allons discuter des nombreux aspects des champs d'une application Android. Dès le départ, je dois dire que je n' aime pas les designs suggérés dans le guide officiel. Je pense que ces champs semblent un peu datés à l'époque, maladroits, assez nombreux. Ils ont mis à jour les styles depuis que j'ai enregistré cette conférence, mais la nouvelle version me semble un peu décevante . Cela dit, étudions les composantes d'une compétence technique. Et nous parlerons du style à la fin. Désormais, chaque champ doit avoir une étiquette, un endroit où l'utilisateur peut taper, puis un indicateur indiquant son état actif. Parfois, nous pouvons ajouter l'indice ou une icône qui décrit le champ généralement placé à gauche. Ensuite, vous pouvez placer une icône sur le côté droit pour les différentes actions, comme un microphone, par exemple pour la saisie vocale ou une liste déroulante dans le gay. Maintenant, tout cela nécessite une hauteur d'au moins 100 pixels, mais cela varie en fonction de votre style. Le rectangle est appelé indicateur d'activation et possède deux états, inactif d'une hauteur de deux pixels, généralement gris foncé et actif. Quelle hauteur de pixels avec une couleur vive et vive. Désormais, l'étiquette en général est affichée à l'endroit où l' utilisateur est censé taper. Lorsque le champ est tabulé, lorsque vous cliquez dessus, lorsqu'il est actif, l'étiquette se déplace vers le haut et se rétrécit. Cela laisse donc de la place à l' utilisateur pour taper certaines choses. Maintenant, au cas où il y en aurait un autre, trois éléments illuminent l'étiquette, la zone des conseils et l' icône d'avertissement sur le côté droit. Chaque fois qu'aucune information saine n'est affichée, l'erreur est toujours affichée sous le champ. De plus, ce qu'ils utilisent, les types ne sont jamais surlignés en rouge avec aucune autre couleur d'avertissement. Passons maintenant au style. Vos couleurs sont essentielles car elles sont porteuses de sens. Par exemple, si votre champ d'activation est affiché en gris délavé, l'utilisateur pourrait penser qu'il s'agit d'un champ désactivé. en va de même pour l'étiquette. Vous devez donc vraiment réfléchir à la légèreté que vous souhaitez que votre note soit. Vous ne considérez peut-être pas cela comme un problème. Mais la plupart des galeries de design regorgent d' applications qui contiennent vraiment des tonnes de gris très clairs. Et j'insiste sur le fait que ce sont là les concepts, car les rechutes ne ressemblent pas vraiment à cela. Encore une fois, vous pouvez sembler cool sur Dribbble ou Behance. Vous pourriez obtenir des likes. Mais cette qualité très légère ne signifie pas qu'elle respecte toutes les normes que nous avons pour cette conception. En continuant sur cette voie, le champ de texte ne doit jamais ressembler à un bouton ou à une bannière. Les bonnes personnes de Google essaient de configurer les choses en encapsulant ces champs dans un rectangle, n'est-ce pas ? Mais encore une fois, je n' en suis pas amoureux. Je peux honnêtement dire que c'est probablement un choix terrible, tout bien considéré. C'est fonctionnel, c'est clair, mais ce n'est pas agréable à regarder. Ce que je vous propose, c'est de rechercher toutes les coordonnées du Web et de trouver de beaux membres antérieurs qui vous inspirent. Par exemple, dans ma dernière application, j'ai opté pour un angle direct blanc cassé avec un trait légèrement plus foncé, une main délavée et l'étiquette au-dessus. Maintenant, je joue toujours avec elle parce que ce danger omniprésent est là, qu'elle puisse paraître invalide. Dans l'ensemble. Je vais encore jouer avec , mais encore une fois, n'utilisez pas le guide officiel si vous n'en aimez pas pour ce cas précis. voici une autre qui s'est démarquée pour les applications iOS, mais je m' en fous vraiment. Ça a l'air intéressant. C'est intuitif. Alors pourquoi ne pas l'utiliser, non ? C'est le type d'approche que je veux que vous adoptiez. Si ça a l'air bien, utilise-le. En voici un autre, cette fois sur le Web. Comme vous pouvez le voir, tout est dans la diapositive, dans les moindres détails. Cela nécessite un œil attentif et des patients, vous concevez, vous vérifiez sur votre téléphone les valeurs des niveaux de luminosité. Tu t'en fous, tu y travailles jusqu' à ce que tu sois heureuse. Il n'y a aucun code couleur magique que je puisse partager avec vous. C'est une question de DNS, bon espacement et d'excellents choix de couleurs. Mais ce qui fait la plus grande différence, ce sont les contextes. Vous voyez que les exemples de Google sont sans âme parce qu'ils n'ont aucune identité. Ils ne font pas partie d' une vue d'ensemble, d'une application plus vaste. Aucune âme ne le fait aussi. n'y a aucune passion. Tu ne vois rien à quoi ça s'attache. Ce que nous voyons dans les galeries de conception, ce sont des extraits d'applications potentielles qui ont une énorme personnalité. Lorsque vous le décomposez. Il s'agit simplement d' une ligne à laquelle sont attachées quelques couches de texte. Ce qui la rend spéciale, c'est l'attention portée aux détails par le designer et son respect pour l'ambiance générale de l'application, puis cette personnalité, l'atmosphère dans son ensemble, quel que soit le nom que vous voulez. Ce que nous allons faire, c'est concevoir quelques forums dans ce cours où je vais aborder ce point en profondeur. Mais le principal point à retenir de cette conférence est de s'inspirer de partout sur le Web. Parce que les formulaires sont le point de conversion et qu'ils n' existent pas sans texte, les rendements, inscription, le paiement et les autres points essentiels de toute application dépendent largement des champs de texte. Si content, prenez votre temps avec eux et faites-en une partie intégrante de votre application. Alors entraînons-nous. Veuillez prendre un moment pour créer trois écrans différents avec un type de conception de champ de texte différent. Encore une fois, il n'y a aucun contexte ici. Tu dois le faire. J'aimerais voir au moins trois champs par écran. Ce qui est important, c'est d'essayer différentes tailles, dispositions, mises en page et couleurs. Si vous avez déjà regardé mes cours, vous savez que je suis fan de certains codes couleurs. Mais pour cet exercice, je ne vais rien vous donner. Essaie tout ça par toi-même. Lorsque vous aurez terminé, publiez votre travail dans la section des commentaires et je les examinerai. Merci beaucoup et j'ai hâte de le voir. 11. Introduction au projet: Bonjour et bienvenue. Dans la section suivante, nous allons concevoir une application de livraison de nourriture va faire taire le projet. L'objectif est de vous familiariser avec tous les composants d'une application, utiliser Adobe XD de manière efficace et de créer quelque chose de beau. Veuillez regarder chaque vidéo deux fois. Une fois pour comprendre ce qui se passe, puis une deuxième fois pour travailler en faisant une pause aussi souvent que nécessaire. OK, au fur et à mesure que nous allons parcourir chaque écran, je vais vous expliquer mon processus de réflexion et comment je prends rapidement des décisions de conception. Sachez que les principes que j' applique nécessitent une analyse approfondie. Mais j'ai décidé de parler des principes un peu plus tard. instant, je veux que vous travailliez le plus possible et que vous laissiez la majeure partie de la théorie pour plus tard. Vous me demandez peut-être s'il y a beaucoup de choses que j'ai besoin d'apprendre. Pourquoi nous lançons-nous dans un projet de conception d'applications à part entière ? Et c'est parce que je veux que vous acquériez l'expérience en travaillant dans Adobe XD et en conception. C'est pourquoi, en sautant directement dedans, c'est une chose de lire des choses sur des sujets. C'est autre chose de s'entraîner réellement. Ensuite, je veux également que vous conceviez des mises en page standard car c'est ce que vous allez rencontrer dans vos projets quotidiens. Maintenant, si vous regardez les mains du dribble, vous verrez des mises en page et des animations extrêmement créatives et toutes sortes d'effets. Mais la plupart des clients ne dépensent pas une fortune dans le développement d' applications. Ainsi, ce que nous allons créer est basé sur mon expérience travail avec de vrais clients et de vrais codeurs 24 heures sur 24. Cela implique d'appliquer les meilleures pratiques et d'utiliser des mises en page assez standard. Vous devez être conscient que chaque décision de conception peut augmenter ou diminuer les coûts de développement. Alors que quelque chose peut sembler génial sur Dribble, il y a de fortes chances que les développeurs doivent travailler d'arrache-pied pour y parvenir. Évidemment, tout le monde n'a pas des centaines de milliers de dollars à dépenser pour des animations sophistiquées. Encore une fois, j'ai emprunté cette voie à de nombreuses reprises. J'ai également été dans le siège du client où j'ai dû approuver paiements supplémentaires parce que la version finale nécessitait plus de travail que ce que nous avions initialement prévu. J'ai donc été des deux côtés en tant que designer et en tant que client. Je vais intégrer toutes ces connaissances au cours et je vais vous apprendre à choisir vos batailles avec soin. Pour l'instant, restez curieux et faites de votre mieux pour terminer le chapitre en entier. Avant de partir, je dois vous demander votre compréhension qui concerne certaines parties qui seront accélérées ou ignorées. Tout projet de conception d'application décent vous prendra quelques semaines alors que j' essaie de le réduire à son essence. Vous bénéficiez ainsi d'une excellente expérience d'apprentissage en temps opportun. Cela signifie que je dois modifier certaines choses. Des choses comme trouver des icônes, rechercher sur Google d'autres choses qui prennent du temps. Est-ce que ce serait réglé ? Amusons-nous avec notre premier projet sérieux. Allons-y. 12. Comprendre le briefing et les souhaits du client: Bon retour. Il s'agit de notre premier projet d'application sérieux. Ce sera une application de livraison de nourriture. Et nous allons profiter de cette occasion pour parcourir de nombreux écrans et scénarios différents. Ce projet comporte un brief d'environ huit sur dix. Pas étonnant, mais ce ne sont certainement pas quelques croquis sur une serviette. C'est double, comme il se doit. D'une part, nous avons le wireframe, qui nous montre les écrans les plus importants et le contenu à inclure. autre côté, nous avons un document qui décrit ce qui se passe dans l'application au cas où cela ne ressortirait pas clairement du filaire. Idéalement, vous devriez toujours disposer des deux lorsque vous démarrez un nouveau projet. Ce n'est pas à toi de les inventer. Mais si le client le souhaite, vous devriez augmenter votre devis de manière très significative, facturant plus cher, je dirais au moins au minimum, 1 000$ supplémentaires. OK. En annexe du cours, vous trouverez le lien vers le wireframe, le logo et la documentation. Maintenant, cette entreprise s'appelle Live short for delivery, et il s'agit essentiellement d'une application qui livre de la nourriture. Et dans quelques villes, nous devons répertorier tous les restaurants qui proposent des plats à emporter, mais uniquement ceux qui ont leur propre personnel de livraison. OK, c'est bon à savoir. Maintenant, l'entreprise de gauche ne s'occupe pas de la livraison proprement dite. Maintenant, cette partie du brief est très courante. C'est l'essence même du projet et c'est un bon point de départ pour avoir une idée générale de ce que vous allez concevoir. La phase suivante est cruciale, celle du public cible. Et cela va déterminer l'apparence de l'application. Et c'est agréable d'avoir au moins une inflammation. Maintenant, cette application est destinée aux personnes actives avec un revenu disponible. Les deux sexes, probablement célibataire, pas marié, emploi de bureau, peu probable, cadre supérieur. Nous devons payer les points, la qualité de la nourriture et le délai de livraison. Maintenant, ce sont des points utiles car ils peuvent nous aider à déterminer l'apparence de l'application. Comment devrions-nous styliser le LEP. Tout est dans le contexte. J'aimerais maintenant avoir quelques détails supplémentaires, mais comme je l'ai dit, il s'agit d'un huit hors bande. Une autre chose que vous devriez trouver dans ce brief est la valeur de l'application. Nous avons maintenant les principaux problèmes, nous savons donc ce qui doit être corrigé, mais comment l'application s'y prend-elle ? Comment l'application rend-elle les gens heureux ? Ici, l'application possède quelques points forts. Ce sont les vues, le délai de livraison exceptionnel et les vraies photos des produits. OK, plutôt bien, raisonnable. Dans les prochains paragraphes, vous obtiendrez des détails clés qui façonneront l'ensemble du flux de l'application. Maintenant, je vais passer à cette partie, mais veuillez tout lire vous-même après cette conférence, d'après ce que je vois, je pense que l'utilisateur peut ignorer le processus d'inscription et même chose pour l'adresse, il peut simplement l'ignorer. Maintenant, généralement, l'enregistrement est la toute première étape. Mais ici, le client, alias le propriétaire de l'entreprise, a fait un choix intelligent. Il ne veut pas que l' utilisateur se retrouve à remplir des formulaires sans voir la valeur de l'application. C'est pourquoi nous donnons à l'utilisateur la possibilité d' interagir avec l'application, d'en faire une utilisation efficace. Et qu'il est convaincu de pouvoir s' inscrire lors du processus de paiement. C'est un bon signe. Cela montre que le propriétaire, le chef de projet ou le propriétaire de l'entreprise, quel que soit le directeur de l'émission, a pensé à des choses à faire. Nous devons analyser tout cela parce que cela nous indique notre position dans le projet. Devons-nous partager nos propres idées ? Nous permettons-nous de faire voix et de remettre en question certaines décisions ? Eh bien, cela dépend de la façon dont le projet est bien pensé et, bien sûr, de votre rôle, de votre travail dans ce cas, c'est un bon signe. Les choses sont sous contrôle et nous n'avons pas besoin de remettre en question le brief. Parfois, les clients n'en ont aucune idée. Ce n'est pas l'un de ces cas. Se déplacer au cas où l'utilisateur serait connecté et que l'emplacement ne serait pas renseigné, cela indiquera simplement la ville qui compte le plus de restaurants. Mais il peut utiliser une liste déroulante pour changer cela rapidement. Encore une fois, cela semble bon, tout à fait raisonnable. Maintenant, si l' utilisateur est enregistré, la liste déroulante indiquera évidemment sa ville. Maintenant, le système de notation est basé sur des pourcentages, 1 à 100 % au lieu de cinq étoiles, ce qui est pour nous un bon endroit pour ajouter de la personnalité. Nous voyons que nos quatre catégories de notations. va donc falloir concevoir quelque chose d'un peu créatif et intéressant. Maintenant, faisons une nouvelle pause. C'est un autre signe éloquent que les choses ont été analysées en détail par le cerveau de l'opération. systèmes de notation utilisent l'approche standard à cinq étoiles, mais certaines des plus grandes entreprises de la planète ont adopté un système d'aversion similaire. Cela inclut YouTube, Netflix et, dans certaines régions du monde, Facebook. Maintenant, la liste est l'écran fondamental de l'application. Nous avons donc besoin d'une compréhension claire de ce qui doit être inclus et de ce qui peut être affiché ailleurs. Maintenant, nous voyons que nous avons besoin de la photo, d'un titre, d'une note, du type de cuisine, du type de nourriture, du délai de livraison. Sans cette inflammation, nous pouvons passer à autre chose. Le fait est que nous pourrions inclure, par exemple, une commande minimum, non ? Ou les frais de livraison. Nous pourrions inclure la distance en miles ou kilomètres entre le restaurant et l'utilisateur. Tout cela modifierait complètement la structure du design. Encore une fois, je suis très heureuse que nous ayons toutes ces informations et que nous sachions ce qui doit être inclus et ce qui est facultatif. Nous avons quelques autres bribes ici et là, mais passons aux wireframes. Nous devons être conscients que le nombre d' écrans présentés ici n'est pas vraiment exact. Le wireframe affiche généralement les écrans les plus importants et nous devons remplir les blancs en utilisant la documentation, par exemple des fenêtres contextuelles, des écrans intermédiaires, etc. De toute évidence, ils ne sont pas inclus dans la plupart des situations. Tu ne les trouveras pas si tu les as. Bonne nouvelle, mais dans ce cas, je ne pense pas que nous les ayons. Revenons-y maintenant. Les choses sont assez bien agencées. Je pense donc que nous allons passer un bon moment avec ça. Noms simplifiés. Elles sont numérotées, ce qui est génial. Nous pourrions donc parler de l'écran de localisation, par exemple, mais il serait peut-être plus rapide de l'appeler simplement écran 1. Si vous souhaitez commenter quelque chose, veuillez inclure le numéro. C'est la meilleure approche. Revenons-y maintenant. Je vois que nous devons inclure à la fois le menu de gauche et le menu de droite, ce qui n'est pas recommandé par Google. Mais je pense que cela est nécessaire en raison de ces filtres qui aideront l'utilisateur à trouver un restaurant spécifique. Enfin, il faut faire attention aux différents flux de l'application. Nous avons de multiples possibilités. R : lorsque l'utilisateur est enregistré, c'est important. C'est quand il n'a pas compte et qu'il ignore la localisation, donc nous n'avons pas d'adresse et voyons quand il n'est pas enregistré, mais qu'il fournit une adresse. Cela ne nous affectera pas trop lors des premières étapes de conception, mais lors de la phase de prototypage, nous allons devoir régler tous ces scénarios. Nous allons devoir créer l'application et la directive. Cela va donc être assez délicat, mais nous verrons à ce stade la phase de prototypage. Dans l'ensemble, nous pouvons commencer le processus de conception en consultant la concurrence dans ce créneau, nous avons pour trouver l'inspiration. Nous devons voir ce que font les autres. Continuons donc dans le clip suivant. 13. Analyser les concurrents de l'application - Partie 1: Bon retour. À ce stade, le brief ne devrait pas être un mystère. Si vous n'avez pas atteint la largeur, veuillez mettre la vidéo en pause et l'analyser . La prochaine étape consiste à consulter la concurrence de l'application pour voir ce qui se passe dans ce secteur en particulier. Nous avons ici un créneau assez bien établi, celui de livraison de nourriture qui contient plus que suffisamment d'applications que nous pouvons analyser. Ensuite, permettez-vous de mieux comprendre les exigences du projet et de vous inspirer en ce qui concerne le style général. Veuillez noter que ces applications sont basées sur la géolocalisation. Ce que je vais vous montrer n'est peut-être pas disponible dans votre pays, mais vous avez plusieurs captures d'écran de chaque application jointe au cours. La gamme inclut cependant le foie, Food Panda, the Live, qui est une application qui porte exactement le même nom, mais c'est une pure coïncidence. À emporter, puis cliquez sur Menu. Désormais, tous les laboratoires sont constamment mis à jour, sorte que les versions en direct peuvent être différentes. En fait, je suis sûr que c'est différent. Néanmoins, les captures d'écran seront le point de référence. OK, commençons par le live afin de nous en débarrasser. Maintenant, l' écran initial est un gros désordre. Nous avons du jaune banque, du bleu marine et, curieusement, le bouton principal est également jaune. L'arrière-plan semble être une image de la ville, mais il est masqué par ce rectangle plein, qui n'a aucun sens. Lorsque vous effectuez une recherche, même si vous ne comprenez pas ma langue, le roumain, vous constaterez peut-être que ce texte est de mauvaise qualité, très pixelisé et quelque peu déformé. Et c'est parce qu'ils ne comportent pas réellement de couches de textes, officiellement appelées chaînes de caractères par codons. Il s'agit plutôt d'une image qui s'étire. C'est une mauvaise pratique et ce n'est pas bon du tout. OK, passons maintenant à la page de liste. Ici, on voit tout de suite le peu d'attention portée aux détails. n'y a aucun espace vide de chaque côté. Donc, si nous faisons glisser quelques lignes, vous pouvez voir que l'alignement n'est pas parfait. La topographie est modeste, les polices sont ennuyeuses. n'y a aucune diversité dans cette région. Aucune hiérarchie particulière n' est facile à repérer. Au total, quatre sur dix. Et je suis généreux. Lorsque nous entrons dans le restaurant, nous pouvons voir que les onglets ont ces séparateurs verticaux, ce que je n'ai pas souvent vu dans les applications Android. En plus de cela, il n'y a aucune élévation nulle part. Vous pouvez repérer n'importe quelle ombre tombante. Ce n'est pas vraiment une mauvaise chose, mais cela ne fonctionne pas dans le département de design. Pire encore, le geste de balayage qui est souvent utilisé pour modifier rapidement les touches. Eh bien, cela ne fonctionne pas vraiment. C'est un véritable choc. Au lieu de cela, vous devez appuyer manuellement sur ces éléments, ou nous pouvons utiliser ces flèches, qui proviennent de l'époque de Windows XP. Maintenant, honnêtement, je n'ai aucune idée de ce que ces gars pensaient. C'est un excellent exemple d'application créée par des développeurs et des hommes d'affaires qui développeurs et des hommes d'affaires connaissent des designers impliqués, je vous promets qu' en haut à droite, prenez soin de deviner ce que fait cette icône. S'agit-il d'informations supplémentaires sur le restaurant, peut-être d'une fonction de partage, d' ajout aux favoris ? Et la réponse est que je ne sais pas. Quand je tape dessus, rien ne se passe. Il n'a pas d'inconvénient, donc je ne suis pas sûr que cela fonctionne réellement. Mais en passant à autre chose, la caisse est également risible. Tout est assemblé au hasard. Je pense qu'ils voulaient centrer ces couches de textes, mais tout ne va pas. Quoi qu'il en soit, vous ne trouverez pas beaucoup de lignes imaginaires. Rien n'est aligné. Oh, et celui-ci délivre l' icône, prend le gâteau. J'ai changé d'avis. C'est deux sur dix, quatre de plus. OK. Passons à take away.com, une entreprise qui achète des applications de livraison à gauche et à droite, ne nous bloque en rien. Comme c'était le cas dans le cas réel où vous ne pouviez rien voir à moins de saisir une adresse avec un S pour la localisation, pour l'autorisation GPS. Donc, l'application veut essentiellement notre position et immédiatement une liste de restaurants apparaîtra. Maintenant, j'ai personnellement commandé beaucoup de nourriture, donc je suis en fait un utilisateur assidu de ces applications. Takeaway n'en fait pas partie. Je n'aime pas ça et laisse-moi te dire pourquoi. Tout est confus. Rien n'est là où je m' y attendrais. Bien sûr. La liste des restaurants est charmante. De jolis logos propres sur la gauche. Effacez les titres en gras sur la droite. Des icônes intéressantes en dessous. Mais c'est là que s'arrête le train joyeux. Pouvez-vous me dire lequel de ces deux restaurants a obtenu la meilleure note ? Parce que si vous avez déjà utilisé booking.com, je pense que vous savez qu'il y a une énorme différence de qualité. Entre un hôtel 8,0 et un hôtel 8,9. Ou que diriez-vous d'IMDB ? Si vous aimez les films, 6,1 film contre 6,91, nuit et jour. Ce que j'essaie de dire, c'est que 4,5 étoiles pour deux restaurants ne me disent rien. J'ai besoin de plus d'informations pour prendre une décision. N'oubliez pas que j'ai plus de 50 restaurants dans ma région. Ce système stellaire, sans aucune autre information, n' est donc sans aucune autre information, pas suffisant. Mais revenons-en au design pour le moment. J'ai adoré l'orange. Il brille vraiment et contient un bon zinc à ajouter. C'est frais. C'est saisir les icônes d' une fois de plus, de belle et de belle. Et nous avons un interrupteur intéressant qui modifie le fonctionnement de l'application, soit en mode Liberty ou en mode pick-up. C'est bien exécuté. Les polices utilisées ne sont pas uniques. Et on peut en dire autant de leurs icônes, décentes, mais pas géniales. À l'intérieur du restaurant, tout est bien espacé. Mais curieusement, ils ont opté pour cette teinte étrange pour la couleur d'appel à l'action. C'est assez étrange. Désormais, il existe un système d'onglets qui vous permet de passer d'une catégorie à l'autre comme tout utilisateur mobile s'y attend . Certains plats ont des descriptions, d'autres non. En ce qui concerne les photos du plat. Même histoire. Maintenant, la caisse est vraiment terne. Beaucoup de séparateurs, beaucoup de gris, peu d'attention aux détails concernant la typographie. Mais arrêtons le côté design. Ce serait un 6/7 sur dix dans mon livre, le problème, comme je l'ai dit au début, c'est la fonctionnalité. Il suffit de jeter un coup d'œil au système de cartes. C'est quelque part en haut à droite, mais pas dans la barre d'action. Non, il s'agit en fait d'un FAB de boutons d'action flottants, donc il se contente de survoler. C'est assez inhabituel. Le système Deb a des polices bien trop grandes, ce qui me rend difficile de savoir ce qui est disponible dans le restaurant. Le menu de gauche se trouve en fait sur le côté droit. Il est également entièrement personnalisé. Je ne dis pas que c'est une mauvaise chose, mais c'est une autre chose à laquelle je dois m'habituer. Ces quatre icônes au-dessus de la liste des restaurants. Encore une fois, assez étrange. C'est une application qui n'a même pas tenu compte des directives officielles en matière de conception des matériaux. Ils s'en fichaient du tout. Et j'ai l'impression que dans l'ensemble, l'application entre mes mains, c'est maladroit. C'est difficile à exprimer avec des mots, mais cela ne semble tout simplement pas juste. Dans l'ensemble, il s'agit d'un design AB bien meilleur que le design live du précédent. Mais je ne pense pas que je lui donnerais une note supérieure à cinq sur dix, peut-être six si je suis super généreux. Passons maintenant au menu d'aide, qui a une approche totalement différente. abord, j'ai adoré le processus d'intégration, c'est-à-dire les premiers écrans qui vous renseignent sur l'application. agréable et épuré. Et une fois que vous entrez dans l'application, elle m'affiche une liste de restaurants basée sur l'adresse que j'ai saisie. Maintenant, la liste est très facile à regarder. Mais il y a un problème de fonctionnalité. Vous n'avez aucun moyen de trier ces restaurants. Vous devez entrer chacune d'elles et voir de quoi il s'agit. Et c'est l'ambiance qui règne dans l'application. Il faut taper beaucoup pour atteindre la ligne d'arrivée. Bref, beaucoup de clics, où certaines applications vous demandent d'arriver à la phase de paiement avec quatre onglets ou moins. Ici, ce nombre est facilement doublé. Tu dois y consacrer beaucoup de travail. Lorsque vous appuyez sur une entrée, voici ce que vous obtenez. Encore une fois, beau design. C'est un huit et mon livre d'un point de vue design. Voici le menu du restaurant. Nous avons une approche à deux colonnes, mais je ne suis pas sûr que ce soit le meilleur choix. Devrions-nous voir plus d'articles ? Mais la chance n'est pas si grande à cause de cette hauteur. Elle semble trop petite. Cela ne semble pas naturel. ai l'impression que quelque chose ne va pas. Et les polices n'y sont pas prêtes. Tout semble réuni. Maintenant, quand les plats contiennent des photos, c'est un peu d'expérience, mais dans l'ensemble, c' est un mélange. Le bouton d'action flottant est également source de confusion. Je ne sais pas trop ce qui se passe avec ce bouton. Après quelques recherches, je crois que cela me permet de former un groupe, peu importe ce que c'est. En gros, il s'agit de commander avec vos amis. Mais pourquoi le placer si au premier plan ? Quoi qu'il en soit, le fond est un peu trop fort, le gris un peu trop foncé à mon goût. Ça ressort trop. Le système dapp est assez beau et les icônes de l'ActionBar sont également intéressantes. C'est difficile, noté dans certaines parties, c'est un sept, peut-être même une aide. Alors que vous êtes dans d'autres obligations, est-ce que c'est l'autre quatre pieds ? Maintenant, donnons-lui un 6.5 et passons au foie. Mais nous allons le faire dans le prochain clip. Merci. 14. Analyser les concurrents de l'application - Partie 2: Bon retour. Nous en sommes maintenant au foie. Alors analysons-le et voyons s'il s'agit d'une source d'inspiration. La première impression est excellente. La topographie est parfaite, elle a du caractère, elle ajoute de la valeur au design. C'est facile à lire. La prochaine chose que je remarque est le système de cartes horizontales utilisé pour mettre en valeur les restaurants. L'ombre est assez forte, étant donné que le fond semble être d'un blanc pur, mais j'aime bien. En haut. Nous avons un type d'annonce, mais remarquez à quel point elle se trouve bien au-dessus de cette ligne diagonale. J'apprécie également la façon dont ils ont utilisé cette petite icône dans la zone de la barre d'action. Bien sûr, c'est une perte d'espace, mais cela montre qu'ils s'en soucient. Il s'agit de créer une image de marque et de s'assurer que vous savez que vous êtes dans leur application. Mais tu es le foie. En ce qui concerne l'annonce elle-même, j'adore la façon dont le délai de livraison est gravé sur la photo. J'apprécie la hiérarchie de la liste. Je pense que c'est très bien exécuté. Nous avons le titre en gras, différentes balises dans une couleur plus petite et délavée. Le délai de livraison est limité et beaucoup de biens immobiliers ont été attribués en raison de son importance. Enfin, nous avons le système de notation et les pourcentages. Mais ce que j'aime vraiment, c'est cette touche de couleur pour les emoji. Maintenant, voici une autre façon de traduire le principe de hiérarchie dans la liste. Vous savez, si vous avez de la chance, vous pouvez facilement scanner différentes zones et savoir ce qui est important et ce qui ne l'est pas. C'est le principe de hiérarchie. Le contenu se distingue facilement , ce qui en fait une expérience exceptionnelle. Cela se sent sans effort. Maintenant, si nous revenons au live, nous pouvons voir que tout est fondamentalement regroupé. Cela semble bondé et fondamentalement fade, ennuyeux sans aucun goût, même s'il contient peu près la même quantité d'éléments. Maintenant, pour en revenir au foie, cette application ne semble pas suivre les directives de conception des matériaux. En haut, il n'y a pas de système d'onglets, la barre d'action n'est pas irrégulière. Au lieu de cela, nous arrivons à des listes déroulantes, qui sont très rares. Dans la dernière mise à jour. Ils s'en sont débarrassés et je suis heureuse qu'ils aient fait ce changement. La taille des cartes est assez généreuse. Eh bien, cela améliore l' impact de l'application. Vous ne pouvez placer que deux restaurants sur un seul écran. Et la seconde est un peu isolée. Maintenant, pour la petite ville, cela a du sens, non ? Mais pour les grands établissements qui regorgent de restaurants, ça va être assez difficile. En gros, après les six ou sept annonces, tu vas juste t'ennuyer. Maintenant, les photos font forte impression et c'est certainement la plus belle lacune du lot. Mais j'adorerais que cet espace soit utilisé un peu. verrons ce qui est possible lorsque nous commencerons à concevoir. Nous voyons également une barre inférieure, qui inclut la fonction de recherche. Maintenant, d'accord, plutôt bien. Ce qui est intéressant, c'est la palette de couleurs, blanc et Thiel, rien d'autre. Le contenu reste brillant, probablement parce que les images sont assez détaillées. C'est très intelligent. Et nous allons probablement faire de même pour notre propre design. D'autant plus que la plupart des restaurants ne proposent pas de superbes photos de la nourriture. Dans la plupart des cas, les photos sont sombres, les assiettes sont occupées et les couleurs ne sont généralement pas flatteuses. Encore une fois, vous pouvez voir le live pour cela. La différence, c'est la nuit et le jour. Pour en revenir à l'écran initial, nous avons un bouton d'action flottant étendu qui vous permet de le remplir. C'est bien exécuté, mais une fois que vous aurez appuyé dessus, vous verrez un autre signe qui amène cette application à neuf icônes sur dix, sinon plus, qui sinon plus, qui sont en phase avec l'ambiance des abdos. Nous obtenons de belles icônes qui sont en phase avec les applications de Vibe. Jolies images en dessous avec un excellent contraste pour le texte. Bouton d'appel à l'action clair. Il y a peu de choses à dire sur le côté négatif. Dans la liste, nous voyons la photo du restaurant en haut et tous les éléments du menu se trouvent dans la liste déroulante. Aucun système d'onglets à proprement parler. Les polices utilisées sont agréables à regarder, vous pouvez donc facilement savoir de quoi il s'agit. Je n'aime pas. Le fait qu'il n'y ait pas de vignettes pour les plats, autant plus qu'il y a assez de place sur le côté gauche. D'un autre côté, cela le rend assez aéré. On a l'impression qu'il y a assez de salle de lecture. OK, maintenant ajoutons quelque chose à notre panier et voyons comment ça se passe. OK, nous avons une barre collante en bas qui nous indique le panier actuel, et elle est séparée par une ombre en haut. C'est curieux que le bouton ait également une ombre. Je ne suis pas sûr d' être d'accord avec cela. Quoi qu'il en soit, le paiement est un autre point fort. Tout est facile à suivre et ils ont utilisé ces cartes de manière intelligente, un peu musclée d'un coup, mais ils ont quand même fait du bon travail. l'ensemble, l'application est belle et c'est parce que ses éléments sont bien espacés. Leurs polices sont belles et intéressantes et le contenu est laissé briller. Neuf sur dix. Passons à Food Panda pour voir un autre renflement sur le même sujet. Ici, je reconnais immédiatement le même style d'une seule couleur, et celui-ci est utilisé pour attirer l'attention de l'utilisateur. Si tu peux le toucher, c'est rose et rouge. J'aime ce style car il guide l'utilisateur sans le faire réfléchir. La première impression est qu'il s' agit de l'application la mieux conçue du lot, 9,5 sur dix. La principale différence entre celui-ci et le niveau est l'atmosphère. C'est un peu plus convivial, même si c'est un peu plus professionnel, concentrons-nous sur la liste. Il se passe plus de choses sous la photo. Cela semble donc un peu plus occupé que le foie des polices utilisées, d' accord, mais elles n'avaient pas ce nœud spécial qui les différenciait. Revenons rapidement à la question du foie et vérifions le délai de livraison. Remarquez à quel point ces chiffres se démarquent, en particulier ceux. Idéalement, c'est le type de personnalité que je recherche dans mes polices de caractères. Food Panda dispose également d'un bouton d'action flottant, probablement pour vous aider à passer à la caisse. C'est assez clair. L'ActionBar est un élément essentiel de la façon dont cela doit être fait. Il est bien défini, il a une hiérarchie appropriée, bien espacé. S'il y a une chose que j' ajouterais , c'est que je n'aurais pas aimé que l'icône de recherche soit alignée à gauche sur le menu des hamburgers. Cela l'aurait rendu parfait. Pourtant, dans l'ensemble, c'est l'une des meilleures que j'ai vues jusqu'à présent. Passons à la page de liste des restaurants. Ici, nous avons des onglets placés sous la photo principale du restaurant. Ça a l'air sympa. C'est fonctionnel, mais je n'aime pas le système stellaire tel qu'il est illustré ici. Je pense qu'il est perdu. En ce qui concerne les articles réels, ce ratio de spécifications est un peu étrange. Les photos sont bien trop grandes et ça va poser problème à la plupart des restaurants. Quand cette autre antenne apparaît en miniature. C'est autre chose, même si l'on pourrait dire qu'il s'agit d'un plan deux de base. Nous allons devoir trouver une bonne solution dans notre conception en fin de compte, aucune de ces options ne fonctionne pour moi. Livrer c'était simplement abandonner l'idée de montrer une photo du plat. Mais dans d'autres Wireframe, nous le considérons comme une exigence. Dans l'ensemble. C'est attaché ou peut-être légèrement derrière le foie. Appelons ça le neuf, peut-être un 8,5. Maintenant, le fait est que je pourrais facilement continuer, mais je veux que vous exploriez vous-même certaines de ces applications ou que vous en trouviez des similaires. L'objectif est de comprendre comment ils ont essayé de résoudre divers problèmes. Je veux que tu me dises ce que tu aimes et ce que tu n'aimes pas chez eux. En résumé, les conclusions de cette conférence sont les suivantes. Nous devons utiliser une seule belle couleur dans notre application et laisser le contenu briller. Nous devons faire attention au rapport hauteur/largeur des photos dans la liste des restaurants. Nous avons besoin d'une police élégante qui ajoute quelque chose au design, quelque chose de personnel. Enfin, nous devons faire de notre mieux pour inclure au moins deux restaurants complets dans l'écran de liste initial. En guise de conseil, plus vous verrez d'applications, plus vous aurez d'inflammation. Ce processus devrait vous prendre au moins 2 heures, mais pour des raisons de temps, j'ai dû le raccourcir. S'il vous plaît N'ayez pas peur d'être impitoyable dans vos commentaires. Votre objectif est de séparer chaque composant et de voir si c'est quelque chose que vous devez éviter. Ou au contraire, utilisez-la comme source d'inspiration. Prenez de nombreuses captures d'écran et placez-les côte à côte pour pouvoir facilement faire des allers-retours. OK, continuons. 15. Définir la disposition des deux premiers écrans: Bon retour. Avez-vous exploré la compétition par vous-même ? J'espère que vous avez suivi plusieurs ateliers sur votre propre téléphone, ou du moins vous avez regardé les captures d'écran que j'ai jointes à la conférence précédente. Il est maintenant temps de démarrer Adobe XD. La taille personnalisée est correcte. Les paramètres que je vais utiliser sont basés sur Material Design 2.3. Maintenant, pour simplifier les choses, optez pour 720 pour la largeur et 15, 24 pour la hauteur. Maintenant, comment puis-je obtenir ces chiffres ? Je double les valeurs de l'ancien Samsung Galaxy S. Ensuite. Maintenant, pourquoi est-ce que je le double ? Il sera donc plus beau lorsque nous aurons revu le design. Ainsi, nous pouvons tout voir de manière nette et nette sans lunettes. C'est la seule raison pour laquelle nous le doublons pour le rendre beau. Cela n'a pas d'importance pour le code qui s'y trouve. Il s'en fout. Le processus de codage n'est en aucun cas affecté. OK, activons un défilement vertical. Et la fenêtre d'affichage indique simplement le point de coupure, le point où vous devez faire défiler vers le bas pour voir plus de contenu. Au départ, vous allez obtenir 15 ou 20 pixels, puis tout ce qui se trouve en dessous nécessitera le défilement. OK, super. Ensuite, j'ai deux moniteurs à afficher, et je vais constamment regarder le filaire et la documentation de l'autre. Je n'en parlerai pas à chaque fois. Si vous n'avez pas de deuxième écran, faites glisser le filaire à l'intérieur du programme et réduisez-le un peu. OK, quel est le but maintenant ? Eh bien, nous voulons définir notre mise en page, la base du projet sans aucune considération de conception. Donc, pas de couleurs, pas de polices, rien que des trucs de base. Nous voulons des rectangles et des couches de textes dans leur forme la plus pure. Une fois que nous aurons une base de base. Ensuite, nous avons quelques écrans. Ensuite, nous allons commencer à expérimenter différentes couleurs, polices, etc. Bon, commençons maintenant par le premier tableau d'art Si nous avons besoin du logo de l'application, celui-ci est joint au cours. Maintenant, l'icône elle-même n'a aucun style ne contient aucun texte. Cela nous aidera à le maintenir en ligne avec le reste du design. C'est l'idéal. OK, je vais le centrer et le placer dans une position particulière en haut de l'écran. Quelque chose à propos de leur. Ensuite, je vais ajouter le champ de localisation à un rectangle. Cela doit mesurer environ 600 pixels large et environ 80 pixels de haut. J'aime utiliser le panneau des propriétés pour cela. Rappelez-vous w pour la largeur, h pour la hauteur. Ces valeurs ne sont pas précises, car elles interviennent plus tard dans la phase de style. Ce ne sont que des chiffres approximatifs. Sachez quelque chose, s'il vous plaît. Je vais toujours tout centrer sur le tableau d'art, ces outils. Maintenant, je ne veux pas avoir l' air d'un record battu, donc je ne vais pas le mentionner absolument. À chaque fois. De plus, je ne vous dirai pas quand je renomme ou quand un groupe couches à qui cela est donné est absolument indispensable. Tu dois être organisé. Faites en sorte que le rectangle soit gris très clair. Et c'est parce que nous allons ajouter des textes et que nous voulons un excellent contraste. Écrivons quelque chose comme une interview ou un lieu, quelque chose comme ça. Maintenant, nous n'ajouterons pas d' icône à ce stade, mais nous pouvons écrire un GPS pour nous rappeler que nous allons en avoir besoin ici. Nous pouvons également dupliquer ces couches et créer un bouton Soumettre. Vous pouvez faire une copie comme vous le souhaitez. J'aime maintenir la touche Alt enfoncée, utiliser la touche Option sur le Mac, puis faire glisser une copie comme suit. Si tu n'aimes pas faire ça, tu peux aussi utiliser Control the gay, sympa. Changeons le texte. Réduisez le bouton à environ 250 pixels. Et bien sûr, centrez tout ce texte à l'intérieur du bouton. Et puis l'ensemble de l'élément avec l'écran, avec notre tableau. N'oubliez pas de poursuivre votre deuxième visionnage en faisant une pause aussi souvent que nécessaire. Nous avons maintenant deux autres choses à ajouter. Ignorez cette étape et créez un compte Slash Login. La première peut être une couche de texte car elle n'est pas assez importante. Nous ne voulons pas vraiment que les gens l'utilisent. L'autre devrait être un bouton. Ajoutons-le donc n'importe où en bas. Supposons que vous créiez un compte et que vous vous connectiez maintenant. OK, sympa. N'oubliez pas de cliquer sur Escape lorsque vous souhaitez terminer l'édition. OK, redimensionnons-le à environ 500 pixels, donc doublez la taille du bouton Soumettre. Encore une fois, il ne s'agit pas de valeurs finales, mais c'est un bon point de départ. D'après le brief. Je comprends que la création de compte se fait sur un écran différent. Donc, en fait, c'est à peu près tout ici. Mais cela signifie que cela nous donne beaucoup de liberté dans notre conception. Ce que nous devons être clairs en matière de cohérence. C'est une bonne occasion d'en parler. Par exemple, nous pouvons créer les boutons et les champs de texte. Disons : Eh bien, plus de 100 pixels de haut, disons un tiers de jour, non ? Et nous pouvons expliquer cette décision assez facilement. C'est pour des raisons de convivialité, non ? Plus le fardeau est lourd, moins il y a de risques pour les jambes de Minsk ou les coupures accidentelles. C'est logique, non ? Ayez de gros boutons. Jetez un œil à ce vert ici. Dans celui-ci, nous avons quatre textes, des rendements et un bouton. Donc, la taille que nous avons précédemment mentionnée trente crée un gros problème d'espacement. Et évidemment, il n'est pas acceptable d' utiliser des tailles différentes sur différents écrans. Parce que, encore une fois, en termes de cohérence, nous devons prendre nos décisions de conception en fonction de l'ensemble de l'application dans son ensemble, non en tant qu'éléments individuels. C'est pourquoi nous créons des écrans par lots. Et en pensant à la taille de l'ensemble du design, l'ensemble de l'application. Donc, un tiers de D ne fonctionnerait pas. 16. Concevoir l'écran le plus important dans l'application: Bon retour. Passons à la suivante en faisant une copie et en supprimant tout. Maintenant, revenons à l'essentiel. C'est une bonne occasion de se souvenir de nos proportions. La barre d'état doit être de 720 x 48. Nous allons laisser le rectangle vide toute couleur aléatoire et le positionner correctement. Ce que j'aime faire, c'est l'aligner sur le dessus. Ensuite, utilisez la gauche pour aligner notre portail. Faisons glisser une copie pour la barre d'actions. Et cela doit être redimensionné à 112 pixels. 112 pixels C'est là que le panneau des propriétés porte ses fruits, change de couleur en quelque chose de très différent. Peut-être un gris très clair. Juste au cas où vous n' aimeriez pas les deux termes. D'ailleurs, vous pouvez sélectionner plusieurs rectangles à la fois, comme ça, et les désactiver comme ça. Maintenant, ajoutons quelques couches de textes. Nous avons besoin d'un filtre et d'une recherche par Le premier est pour le côté gauche, tandis que les deux autres pour le côté droit. Je vous suggère d'utiliser shift lorsque vous créez des copies, Je vous suggère d'utiliser shift lorsque vous créez des copies car cela vous permet de garder vos couches de texte sur la même ligne. En gros, Alt et Shift tout en faisant glisser. Génial. OK, Maintenant, le triangle déroulant peut être créé à l'aide de l'outil polygone. Assurez-vous de maintenir la touche Shift enfoncée lorsque vous faites glisser pour obtenir un triangle parfait. Vérifiez le côté droit, puis réglez le nombre de coordonnées sur le téléviseur. Il s'agit des valeurs par défaut. Je suis donc prête à y aller. Réglez le point vers le bas. Vous pouvez avoir besoin d'une rotation qui change couleur pour obtenir exactement ce que vous voulez, probablement du noir. Une chose à noter, c'est que certaines personnes préfèrent utiliser le stylet pour quelque chose comme ça. D'autres personnes aiment télécharger des icônes. Le mot clé à l'heure actuelle est la rapidité. Alors fais ce que tu veux, fais-le vite. Maintenant, ça devient intéressant. N'oubliez pas que nous voulons exposer le plus de restaurants possible sans encombrer et encombrer tous les éléments. Commençons donc par un rectangle de 600 x 400 pixels, car il couvrira la plus grande partie de la largeur de l'écran. De plus, nous aurons un rapport hauteur/largeur décent pour commencer. La taille réelle sera indiquée plus tard, mais c'est un bon point de départ. Donc un peu large et assez court. Passez à l'outil de déplacement et placez-le juste en dessous de la barre d'action. Même si nous nous dépêchons, je vais voler le centre. Tout va bien. Pratique. Maintenant, portail, ajoutons un texte fictif. Le titre, allons-y avec le paradis des desserts, juste à côté. Écrivons quelque chose comme le délai de livraison 30 min. Oui, la catégorie est double. Un pour le type de nourriture et un autre pour le type de cosinus. Maintenant, d'accord. Quoi que ce soit, le brief qui me dit cela devrait être la vie dans le désert et la vie internationale. Merci encore, peu importe ce que nous y mettons. Nous voulons simplement présenter quelques informations. Nous avons donc quelque chose à examiner, quelque chose avec lequel travailler. Le classement. Allons-y avec 92  % des 24 voix. Cela couvre tous les éléments en fonction du filaire et du brief. OK, maintenant sélectionnons absolument tout comme ça et voyons si nous pouvons en placer deux. N'oubliez pas qu'il s'agit d'une exigence importante. Oui, cela fonctionne. Mais on peut y installer deux restaurants entiers. Encore une fois, il ne s'agit que d'un brouillon. Rien à ce sujet, c'est précis. Il faut donc le prendre avec un grain de sel. Mais résumons les choses. Jusqu'à présent, nous avons recréé les deux écrans à partir du wireframe dans le but d'avoir quelque chose avec lequel travailler. Dans les prochaines conférences, nous avons parlé de la prise de conscience de l'impact de nos décisions. Plus précisément, comment la création d'un champ de texte ou du bouton en bas âge affectera l'ensemble de l'application et peut poser des problèmes. Nous l'avons stoppé avec force. Je te verrai dans une seconde après la pause. Merci 17. Créer l'écran de détails de restaurant: Bon retour. Passons à l'écran détaillé du restaurant où tous les plats sont listés. Alors sans plus attendre, mettons-nous au travail. Copions les filtres, mais faisons-le, et commençons par une approche de haut en bas en remplaçant la ville par un nom de restaurant aléatoire. Disons que leur livraison de pizza est arrivée à maturité. Ça a l'air assez italien, non ? La liste déroulante et le filtre doivent être supprimés. Mais nous garderons le dernier et le renommerons. Cela devrait indiquer Info. Et ce sera une icône qui nous montrera l'adresse du restaurant, l' écran 15, puis l'écran 16 des vues. Si nous regardons le wireframe, nous pouvons voir quelques onglets, mais on ne sait pas s'ils sont fixes ou s'ils sont défilants. Nous allons commencer par la version corrigée. Je pense que c'est plus probable. abord, copiez la barre d'action et réduisez sa taille à 96 pixels. Bien sûr, changez la couleur pour voir ce qui se passe. Revenons à la taille pour le moment. 96 est assez grand du point de vue de la convivialité, vous pouvez réellement l'utiliser, mais assez petit pour ne pas prendre trop de place. C'est également la valeur recommandée dans le guide officiel de Google. Supprimez les deux groupes d'annonces si vous ne l'avez pas déjà fait. Le texte, je vais utiliser le petit déjeuner, le déjeuner et le dîner comme sujets principaux. Cela signifie qu'un design à trois onglets, donc un rectangle de 40 de large sera nécessaire pour l'acte d'article. Prenons donc l'outil rectangle, cliquons et faisons glisser n'importe quelle forme, puis changeons sa taille à 40 x quatre pixels. Vous pouvez laisser ce champ vide pour l'instant, mais veuillez supprimer le trait. C'est une chose que je n' aime absolument pas à propos d'Adobe XD. Le remplissage est toujours blanc et un tableau s' applique par défaut. Ce n'est pas idéal. Quoi qu'il en soit, assurez-vous de le placer correctement en bas de l'arrière-plan de l'onglet. Cette étape est facultative, mais tout concepteur d'expérience le fera au centre du petit déjeuner avec cette ligne pour s'assurer qu'il avec cette ligne pour s'assurer qu' agit clairement de l'onglet actif. De toute évidence, les textes étaient également centrés verticalement. Et faites de même pour le déjeuner. Assurez-vous simplement de comprendre ce principe. Vous sélectionnez deux couches, le texte et le rectangle, puis vous utilisez les outils d'alignement. Mais qu'en est-il du dîner ? Verticalement, ce n'est pas un problème. Dessinez un cadre pour sélectionner les deux et utilisez la commande appropriée. OK, bien, mais qu'en est-il de l'horizontale ? Eh bien, voici la piste. Sélectionnez la ligne noire et écrivez la ligne à. Si une seule couche est sélectionnée, les mondes d'alignement considéreront l'écran, la planche à dessin, comme le deuxième élément. Ainsi, une ligne droite fait que la ligne touche le côté droit. Maintenant, maintenez la touche Shift enfoncée et cliquez sur dîner pour le sélectionner. Centrez-le horizontalement, et c'est tout. En fait, il reste encore une étape. Nous devons mettre une ligne noire sur le côté gauche, désélectionner en cliquant n'importe où. Ensuite, sélectionnez-le, puis laissez la ligne agir. Génial. Maintenant, je vous conseille de travailler en zoomant afin de pouvoir facilement saisir les bonnes couches. Et juste comme ça, le système d'onglets est, alors, regardons encore une fois le filaire , gardez à l'esprit que ce n'est pas la solution ultime de notre conception. Nous pouvons expérimenter différents looks si nous avons des idées. Mais pour l'instant, je pense que nous allons rester simples et suivre le schéma, c' simples et suivre le schéma, est-à-dire une mise en page à une seule carte. Si nous ne sommes pas satisfaits d'une mise en page à une seule carte, nous pouvons essayer une approche différente. Je n'ai vraiment pas aimé le design à deux colonnes que nous avons vu dans la vidéo précédente. Nous devons créer un porte-image pour chaque plat, une vignette. Je pense que cela doit être une forme un peu carrée, probablement un peu plus large. Commençons donc par un rectangle d'une taille de deux à cinq par un AD. Comme je l'ai dit, pas exactement au carré, mais pas trop haut parce que nous avons vu que cela ne fonctionne pas très bien. Placez-le à 30 pixels des tampons. N'oubliez pas de maintenir la touche Alt enfoncée, c'est la touche Option sur le Mac. Ensuite, utilisez les touches fléchées avec ou sans décalage. Shift suffira, s'il vous aide à déplacer la couche et par incréments de dix pixels. Ça a l'air sympa. Bon, pour l'instant, revenons au titre et à la description. J'ai préparé quelque chose dans un code ODE, le titre de notre GU, tout cela pour l'instant. Maintenant, voilà le truc. J'aurais pu utiliser Lorem Ipsum, mais je pense qu'un vrai titre m'aide beaucoup. La description doit être une couche de texte de paragraphe au cas où vous souhaiteriez modifier rapidement votre contenu. Cela signifie donc que vous devez cliquer et glisser. Maintenant, localiser les lignes devrait suffire, bien que nous puissions les supprimer uniquement au cas où nous ne serions pas en mesure d'afficher suffisamment de produits à l' écran sans faire défiler la page. C'est ça. OK. Au fait, au cas où vous voudriez un texte fictif rapide, je vous recommande lipson.com. C'est un excellent site Web pour le faux texte, faux contenu dans l'ensemble. Prenez votre temps et assurez-vous ne pas précipiter ces éléments essentiels. C'est le fondement de notre conception. Donc, si vous avez une idée fixe et que vous vous y tenez, vous risquez de vous mettre dans un coin. Encore une fois, soyez flexible, par exemple concerne la taille des vignettes. Je ne sais pas si c'est suffisant. C'est à un moment que la compétition a échoué ou au contraire, ils ont brillé. Pour en revenir à notre liste, nous devons ajouter le prix, disons 14 dollars. Ce sera la troisième ligne. Et ensuite, ajoutons le poids du produit, ce qui, si je comprends bien, est très important. Tout cela provient du brief, ailleurs, ici, écrivons 350 g. Enfin, nous allons avoir besoin d'un texte « Ajouter au panier ». Mais je suis presque sûr que ce sera une icône. Mais pour l'instant, plutôt que de me laisser un moment pour régler tout cela, j'aime tout aligner , même s' ils vont bouger lorsque nous commencerons à jouer avec la taille et la police. Mais encore une fois, c'est quelque chose que je veux absolument faire parce que cela me permet de me sentir mieux. Idéalement, nous voulons un chemin imaginaire permettant à l'utilisateur de voir la miniature, le titre, le prix, le poids du produit, puis le bouton Ajouter au panier. Tout doit se dérouler. Plus tard, nous devons régler la taille et la couleur pour faciliter le processus. Maintenant, même si les choses sont assez regroupées, concluons-en avec un séparateur. Utilisez la ligne pour appuyer sur la touche de raccourci L et réglez-la sur peut-être deux pixels, afin qu'il soit plus facile de sélectionner un pixel. Les files d'attente sont incroyablement difficiles à repérer. Maintenant, pourquoi utilisons-nous un diviseur ? Parce que dans un espace restreint, cela nous aide à séparer notre contenu. Sans cela, nous devrions utiliser beaucoup plus d'espace vide. Et nous voulons éviter cela. D'ailleurs, il devrait être placé environ 30 pixels de la photo, juste pour obtenir cette belle symétrie. Maintenant, pour terminer, regroupez le tout car nous voulons en faire des copies. Remplissons tout l' écran avec des clones. Et voyons où nous en sommes. Ce que j'adore, c'est cette superbe option appelée Repeat Grid qui peut vraiment accélérer les choses, mais nous n'allons pas l'utiliser. Je veux que tu prennes de la vitesse à l'ancienne. Je veux que tu fasses du travail manuel. Une fois le dernier placé, sélectionnons-les tous et utilisons cette commande, distribuons maintenant que tout est parfaitement aligné et que c'est la forme d' esquisse. Arrêtons-nous un instant. Merci. 18. Comment faire de grands choix de conception: Bon retour. J'aimerais faire une pause afin que nous puissions discuter d'un point important. Comment sommes-nous censés prendre des décisions de conception importantes dans le cadre de ce projet en particulier ? Optons-nous pour l'image d'arrière-plan en plein écran sur le premier tableau d'art ? Ou devons-nous rester simples ? Et si nous restons simples, optons-nous pour du blanc uni ou utilisons-nous un motif subtil lié à la nourriture ? Si nous utilisons un fond blanc, comment cela va-t-il affecter l'écran suivant ? Allons-nous utiliser du blanc pour la barre d'action ? Cela signifie que nous devrons également utiliser le blanc pour la barre d' état. Comme vous pouvez le constater, lorsque la décision a un impact sur tout le reste. Et c'est parce qu'une application doit être cohérente, que tout doit fonctionner ensemble. La question demeure donc comment sommes-nous censés prendre une décision ? La palette de couleurs n'est pas définie non plus. C'est donc un autre facteur. Optons-nous pour le vert pour suggérer de la fraîcheur ? Bleue parce que c'est apaisant et sûr. Rouge ou orange parce qu'il fait chaud. Il y a beaucoup de questions de ce genre, et je crois que c' est la raison pour laquelle de nombreux designers ont passé des heures sans progresser. Voici ma réponse. Tu les fais toutes. Oui. Tu as entendu ça, non ? Vous créez toutes vos idées. Tu les mets côte à côte. C'est ainsi que vous pouvez non seulement vous améliorer, mais aussi choisir un style pour l'ensemble de l'application. C'est ce qu'on appelle un processus itératif, lequel vous avez une idée que vous pouvez avoir, puis vous faites glisser un nouvel écran et vous essayez une autre idée, une autre idée et une autre. Laissez-moi vous montrer un exemple. J'ai dû créer un écran de calendrier où nous avions quelques rendez-vous ainsi qu' un nouveau qui devait être affiché pour approbation maintenant. OK. Le nouveau système comportait deux périodes d' indisponibilité réglables d'environ 15 minutes chacune. OK. Maintenant, c'est beaucoup de choses à gérer. L'horaire variait de 6 h 00 à 12 h 00 , ce qui représentait un grand nombre d'heures. Bien entendu, je voulais en placer le plus grand nombre possible un seul écran afin de minimiser le défilement. C'était mon objectif. Mais je devais aussi disposer de suffisamment d'espace pour que l'écran soit utilisable par des personnes ordinaires, pas seulement par des tireurs d'élite ou des embouts. Nous avons dû avoir de gros boutons. C'était donc un défi. Alors, qu'est-ce que j'ai fait ? J'ai commencé exactement comme je vous l'ai montré lors de la conférence précédente. J' y ai ajouté tous les éléments, la forme la plus simple. Puis j'ai commencé à travailler, à expérimenter. J'y suis allé en jouant avec différentes distances entre chaque ligne. J'ai constamment regardé chaque version sur mon téléphone et j'ai fait des progrès réguliers avec chaque version. roi suivant, le cœur du design, le rendez-vous proprement dit bouillonne. Et je veux vous montrer comment ce mot est utilisé ici. J'ai essayé de montrer l'heure à l'intérieur du rectangle ainsi que du texte décrivant sa présence. Ensuite, j'ai appris que le rouge était un peu trop, alors j'ai essayé de le nettoyer un peu. J'ai donc laissé une seule ligne rouge, puis j'ai ajouté le motif subtil qui marque cette zone. C'était légèrement mieux, mais pas beaucoup. Ensuite, j'ai créé une autre version, une autre variante, où il n'y a pas de zones qui se chevauchent, juste pour avoir une meilleure idée de la façon dont ce design s'applique à diverses circonstances. J'ai ensuite repéré le problème. Le vert que j'ai utilisé pour un nouveau rendez-vous est le même vert que le bouton d'appel à l'action. J'ai donc décidé de le changer. C'est devenu violet. J'ai ensuite ajouté un bouton Modifier pour m'assurer qu'il est clairement modifiable. D'accord, mais ensuite j'ai dit : « Cool, essayons d'autres styles ». C'est ce que je pensais. J'ai donc arrondi complètement le rectangle , puis j'ai gardé la seule ligne rouge. Je l'ai ensuite quadrillé et je l'ai laissé courir d'un bord à l'autre. Je laisse également tomber la ligne rouge et ils l'ont remplacée par ce symbole. Les couleurs se changeaient un peu, alors j'ai fait une autre copie et je l'ai remplacée par du violet. Je l'ai aussi fait toucher le rectangle, un tout petit détail, mais tout était sur la table. OK. Isolé. Ça a l'air plutôt bien. Mais qu'en est-il quand c'est à côté d'un autre rendez-vous ? C'est la prochaine chose qui m'est venue à l'esprit. J'ai donc créé un nouvel écran dans ce but précis. Encore et encore, vous pouvez voir divers autres cas, couleurs, schémas, symboles, etc. Maintenant, l'intestin est court. Finalement, j'ai décidé d'opter pour ce design. Un grand saut par rapport à mon point de départ. C'est ce que j'entends par itération itérative du processus. Itératif. Vous avez une idée, vous la créez le plus rapidement possible, puis vous passez au concept suivant. Vous créez cette nouvelle version à côté de la version originale et vous les comparez. Vous mettez plusieurs idées en réserve jusqu'à ce que vous soyez vide. Vous essayez d'améliorer chaque version, mais vous pouvez également mélanger et associer des éléments issus de différentes idées. En gros, répétez jusqu'à ce que vous soyez heureux. Parfois, l'écran prend une demi-heure. Parfois, cela peut vous prendre des jours. Vous devez faire des pauses constantes où vous ne regardez pas du tout vos designs. Ensuite, vous revenez et vous le vérifiez à nouveau. Chaque variante vous rapproche de la meilleure version que vous êtes capable de dessiner. Donc, que vous appeliez ces itérations des variations, des versions ou quoi que ce soit d'autre, l'idée demeure vous devez prendre les idées de votre esprit et les mettre sur le canevas. C'est mon état d'esprit dans n'importe quel projet. 19. Créer différentes versions pour le premier écran: Bon retour. Il est temps de se remettre au travail sans application de livraison de nourriture . Nous avons maintenant quelques écrans qui attendent une certaine attention. Commençons par l'écran de localisation. Et la première idée que je veux essayer est l'image d' arrière-plan en plein écran, qui est un choix très populaire dans ce créneau. Pour trouver de superbes photos totalement gratuites. Utilisez unsplash.com. Si le projet dispose d'un budget décent, vous pouvez également utiliser Adobe Stock, mais commençons gratuitement. Ici. Vous allez probablement chercher de la nourriture et nous allons télécharger tout ce que sont les étincelles et ne nous fier qu'à dix images. Idéalement, une image vue de dessus sera probablement plus belle. Mais gardons l'esprit ouvert à ce sujet. Une fois que j'aurai vu quelque chose d' intéressant, je vais appuyer sur le bouton Télécharger. Maintenant, le processus est assez simple. Choisissez plusieurs photos , puis faites-les glisser dans Adobe XD. J'en ai déjà sélectionné, mais je te promets de les avoir choisis exactement comme je te l'ai dit. Je les ai rebaptisés de 1 à 6 pour que vous puissiez les suivre facilement. Voilà le truc. Avant de les ajouter, ajoutons un rectangle de la taille du tableau d'art. De cette façon, la photo sera redimensionnée automatiquement. C'est très utile. Faites donc glisser un rectangle et concentrez-vous sur le panneau des propriétés. Ici. Nous allons changer sa taille à 720 par 15, 20. OK, maintenant, l' essentiel est de changer le remplissage en quelque chose de sombre et de désactiver la bordure. Maintenant k. Enfin, le rectangle ne doit pas être au-dessus de toutes les autres couches. Accédez donc au panneau des couches, cliquez dessus et faites-le glisser vers le bas comme cela. OK, génial. Nous sommes maintenant prêts à ajouter nos photos. C'est là que la magie commence à opérer. Nous recherchons maintenant une image intéressante qui offre un bon contraste pour le logo et toutes les autres actions disponibles sur cet écran. La première montre plusieurs assiettes de spaghettis et quelques verres de vin. C'est donc conforme à l'application. C'est logique. Maintenant, la première question est le logo serait-il blanc ou de couleur unie ? Si nous optons pour la première option, il va falloir rendre l'image un peu plus foncée. Si nous en faisons une couleur unie, l'arrière-plan doit être aussi simple que possible. Voyons donc de quoi il s'agit. Tout d'abord, ajoutons un autre rectangle d'un noir pur, exactement de la même taille. D'accord, maintenant, pour l'opacité, 50 % devrait également nous donner un grand contraste. Très bien, plutôt bien. Maintenant, rappelez-vous que l'objectif est de tester les choses. Ce n'est pas une décision définitive. OK, maintenant, faisons en sorte que le logo soit blanc. D'ailleurs, il ne s'agit pas d'un PNG, mais d'un SVG. Bref, cela signifie que nous pouvons redimensionner sans perte de qualité. De plus, nous pouvons changer sa couleur en utilisant le remplissage. Génial. S'il s'agissait d'un PNG, nous pouvons annuler tout cela. Mais ça a l'air très joli. Et une chose à propos des logos, qu'ils n'ont pas besoin de vous frapper au visage, comme un sac de Brex. Ne le rendez pas énorme. Il suffit de penser à ce qu'a fait le libéral. Bien que sur l'écran de liste initial, ils utilisent la version mini du logo. Bon, revenons à ce design, un arrière-plan sombre est logique, autant plus que le champ de texte d' autant plus que le champ de texte sera probablement blanc. Faisons en sorte que cela se produise. Nous allons augmenter le rayon des coordonnées des rectangles à cinq pixels. Angles carrés. Ça n'a pas l'air si beau que ça. Maintenant, pour les boutons, nous allons faire de même. Mais changeons de couleur. Donnons-leur un vert vif juste pour voir à quoi ressemblerait un appel à l'action ordinaire. Prenez votre temps et essayez de réduire les angles en échantillonnant les couleurs ou en utilisant le panneau des propriétés sur plusieurs couches à la fois. Maintenant, OK, de bonnes choses. Veuillez faire en sorte que toutes ces couches de textes soient blanches. Et n' oubliez pas de sauter cette étape. Il est là, mais vous ne le verrez peut-être pas très bien. Non, je change sa couleur, sa position, ou peut-être les deux. Je pense qu'en bas de l'écran, ça va être un peu mieux, non ? Nous ne pouvons pas juger ce look dès le départ parce que nous devons le comparer à autre chose. Sans oublier que ce sont là les grandes lignes. Nous ne fonctionnons pas encore à un niveau satisfaisant. Nous cherchons actuellement la direction générale. Et une fois que nous aurons expérimenté ces deux écrans, nous pourrons revenir et affiner cela, atteindre la perfection. Pour l'instant, essayons une autre approche. Dupliquons cela et essayons une alternative où le logo est peut-être n'importe quel type de couleur unie, peut-être un bleu foncé, par exemple, donc un choix assez sûr. Maintenant, il se peut que le logo doive être légèrement surélevé et que la photo doive descendre. Maintenant K. Et pendant que nous sommes ici, saisissez l'outil de saisie, le raccourci clavier D, et écrivons le live juste en dessous l'icône pour avoir une meilleure idée des choses. Maintenant, pour le formatage, conservez la police standard, mais mettez-la en gras et peut-être 60 pixels ou quelque chose comme ça. Assurez-vous d' utiliser le codon de la même couleur. Nous ne voulons pas de l' arc-en-ciel sur nos mains. Je répète en jouant à ce stade, ce n'est pas la police finale. Ce n'est pas le look final. Maintenant, porte. Dans le passé, j'aurais peut-être suggéré un dégradé estompeur pour la photo. Nous pourrions le faire dans Photoshop, mais je ne pense pas que ce soit le bon look. La plupart des applications ont cessé d'utiliser des reflets ou le fondu remonte à longtemps. Je pense donc que la version plein écran pourrait être la meilleure. D'accord, cela peut fonctionner, mais essayons quelques images de modèles dans cette version. Ici, le processus est masquez la couche noire à 50 % en utilisant cette icône ici. Génial. Ensuite, faites glisser une autre image, Image Tool au-dessus de l'image d'origine. Enfin, révélez le rectangle noir. Maintenant, je ne peux pas dire que je l'aime. Laissez-moi passer rapidement en revue toutes les options. Nous avons besoin de quelque chose de riche, d' extravagant et d' intéressant à regarder. L'espace en bas à gauche ne va pas voler. Ce n'est donc pas bon. Essayons d'être le numéro de la photo. Maintenant, il s'agit d'amis mangent ensemble, un excellent concept, mais le rapport hauteur/largeur est loin donc nous perdons la majeure partie de son éclat. Ensuite, la photo numéro cinq. Cela fonctionne aussi, mais je pense que le précédent convient mieux. Le problème principal est la nourriture présentée. Il s'agit d'une salade à base d'œufs. Maintenant, le public cible s'attend à une nourriture de bonne qualité, mais même si nous ne parlons pas de cadres supérieurs, nous ne parlons pas de gastronomie. Une salade aux œufs, ce n'est pas le bon look, je pense que ce ne sera pas quelque chose d'appétissant. Je pense que les hamburgers rapides, des trucs comme ça, conviendront au public cible. Enfin, numéro six, il a ce look riche et abondant. Mais je n'aime pas la nourriture elle-même. C'est trop axé sur les desserts. Nous voyons des œufs en arrière-plan. Mais encore une fois, c'est plutôt vers les déserts. L'option pour cela fonctionne et je pense qu'elle coche toutes les bonnes cases. Un bon choix se démarque immédiatement, et celui-ci est l'un d'entre eux. Elle offre une vue de dessus. Il propose des plats multicolores intéressants. La table en bois a un joli terrain confortable et familier. Donc oui, une très bonne option pour une meilleure apparence. Maintenant, laisse-moi te le ramener. Maintenant, cela soulève la question suivante : que pouvons-nous faire d'autre ici ? La seule idée qui me vient à l'esprit est un fond blanc pur ou peut-être un motif subtil qui est peut-être une couleur blanc cassé. Maintenant, je ne vais pas faire en sorte que cela se produise parce que les applications absolument nageantes et blanches sont généralement haut de gamme. Et ce n'est pas le cas. Pensez au restaurant étoilé Michelin ou la grande mode nommée « produits  ». Par exemple , ce sont des marques qui peuvent proposer un design minimaliste avec peut-être une touche de couleur, mais la plupart sont purs. blanc. Ce n'est pas le cas ici, donc je ne vais même pas l'essayer. En conclusion, à ce stade, nous en tiendrons à tout le concept initial de 50 % de noir et à la photo numéro quatre. Cette planche peut être jetée. C'était une bonne idée, mais ça ne marchera pas. Ok, je te vois dans une seconde. 20. Explorer différentes idées pour la page du restaurant: Bon retour. Continuons avec l'écran de liste des restaurants, qui est la deuxième chose que l'utilisateur va voir. Il s'agit de l'un des écrans les plus importants de l'application. Nous devons donc expérimenter différents décalages. Dès le départ. Je sais que je veux voir une version sans fond, donc d'un blanc pur. Et l'un d'eux serait peut-être un gris clair qui offrira un bon contraste à nos annonces, qui devraient comporter des cartes blanches. Maintenant, j'ai eu ces idées en faisant des recherches sur la concurrence. Et ce sont deux styles très courants, très populaires. OK, commençons par le contenu réel. J'ai préparé cette image d' une crêpe pour la couverture du restaurant, donc je vais l'intégrer, mais parlons de chiffres. Maintenant, les directives officielles de conception des matériaux indiquent que nous avons besoin de 16 dB de chaque côté, ce qui correspond à 32 pixels dans notre cas. Maintenant, faisons quelques calculs, 720 -64, que les deux de chaque côté signifient 656 pixels, 656. C'est donc la largeur du rectangle. C'est ce que nous devons également utiliser pour les séparateurs de l'écran d' édition. Encore une fois, veuillez le centrer après l'avoir redimensionné, cela va sans dire maintenant, il sera probablement plus beau avec des coins légèrement arrondis. Passons donc à cinq pixels pour le rayon des coins. Et pendant que nous sommes ici dans le panneau des propriétés, désactivez la bordure si vous ne l' avez pas déjà fait. Comme je l'ai dit, XD les ajoute par défaut. Je vais également vous faire sortir quelques guides parce que nous devons nous assurer que tout est à la hausse. Vous pouvez obtenir des guides en déplaçant vers la gauche de l'écran. Et vous allez obtenir ce curseur, cliquer sur faire glisser, et vous aurez ainsi un guide. Cela ne fonctionne que du côté gauche et du bord supérieur. Bon, pendant que nous y sommes, supprimons la deuxième entrée. Nous y sommes allés juste pour voir si nous pouvions en placer deux sans faire défiler la page. Et en effet, ça va. Parlons maintenant de hiérarchie. Nous avons un certain nombre d'articles ici. Et la question est de savoir laquelle est la plus importante ? Il faudrait que je dise le titre, non ? Mais la note s'en rapproche , car c'est la principale valeur de l'application. C'est ce que dit le brief de toute façon. Vient ensuite le délai de livraison, qui est certainement un facteur décisif. Et enfin, à la quatrième place avec probablement les étiquettes liées au type d'aliment. Ils peuvent être utilisés pour filtrer rapidement types d'aliments ou des cuisines similaires. L'utilisateur peut appuyer dessus. Et évidemment, la liste sera rechargée avec ce filtre particulier appliqué. Nous parlons de l' importance, car cela nous indique comment ces objets doivent être placés et stylés. Ils vont donc de pair. Tu ne regardes pas ce qui est beau. Vous pensez à leur importance pour la première version. Et je tiens à souligner d'abord je vais placer le titre et la note sur la même ligne à cause de ce dont nous avons parlé, les balises peuvent occuper la deuxième ligne. Et j'aimerais placer le délai de livraison quelque part sur la photo, de la même manière que ce que nous avons vu dans Food Panda Zap. Déplaçons l'ensemble de cet élément 32 pixels de la barre d'action. OK ? Dans la mesure du possible, visez la symétrie. Cela donne simplement au design un aspect beaucoup plus raffiné. Clients, je ne vous dirai jamais la distance sur les côtés. Y a-t-il du D2 mais en haut c'est 38 ? Non, ils ne te le diront jamais, mais croyez-moi, ils vont le remarquer, ils vont le ressentir dans leur instinct. Ce n'est pas intellectuel, ce n'est pas quelque chose qu'ils peuvent exprimer, mais ils le ressentent. OK. Maintenant, le titre fait 40 pixels, et mettons-le en gras. La police par défaut est totalement correcte. Ce que nous recherchons, nos idées approximatives, le rend également noir pur. Le gris standard n'est pas génial. Je voulais le répéter. Ce ne sera pas la police de caractères que nous allons utiliser. J'essaie juste de voir si l' importance que nous leur avons accordée a du sens. J'ai aligné le titre sur le guide de gauche et laissez environ 20 pixels entre le titre et l'image de couverture. Pour le délai de livraison, je vais placer un rectangle noir en haut à gauche de l'image de couverture. Et je pense que je pourrais ajouter l'horloge à côté. Nous ferons tout cela plus tard. Mais pour l'instant, assurons-nous qu'il soit bien positionné. Ensuite, triez ce qui a surélevé le texte et le panneau des calques pour pouvoir le voir, puis lisez-le. Bon, maintenant réduisons l'opacité des rectangles à 30 % de. Cela va donc nous donner un grand contraste, mais vous pouvez toujours voir le portail photo. Cela nous donnera également plus de place pour tous les autres éléments, plus d'espace. Mais la question est de savoir si cela doit rester blanc avec du texte en noir dessus, ou vice versa ? Maintenant, je pense qu'un rectangle noir fonctionne un peu mieux. Essayons-le. Passons donc du blanc au noir. Vous avez désactivé la bordure, puis passez à la couche de texte. Il doit être blanc, mais changez son poids pour qu'il soit semi-gras. Il se démarque donc un peu plus pour que vous puissiez le lire facilement. Lorsque vous avez terminé, sélectionnez ces deux couches et centrez-les horizontalement puis verticalement. Encore une fois, cet article doit être placé en haut à gauche. Maintenant, la question est de savoir pourquoi là-bas et pas ailleurs ? Eh bien, j'ai vu d'innombrables applications utiliser cet emplacement spécifique. Je vais donc faire de même. D'accord, nous allons garder les balises exactement telles qu'elles sont, mais nous allons les aligner à gauche avec le titre. C'est facile parce que nous avons ce guide de la distance. Laissons environ 20 pixels entre eux. En fait, faisons-en un gris moyen , un peu comme 777. Désormais, un code hexadécimal comporte généralement six caractères. Mais dans Adobe XD, si vous insérez les trois premiers, les autres seront copiés et collés automatiquement. OK, parlons de la note. Je veux quelque chose qui ressemble à la règle du foie. Un visage Smiley est donc très agréable car le meilleur endroit sur le Web pour les icônes est slab icon.com. Mais sachez que la plupart des icônes nécessitent un abonnement. Je ne vais pas vous montrer comment j'ai cherché le visage Smiley parce qu' il n'y a rien de spécial à cela. Sachez juste que je télécharge toujours le SVG, ce n'est pas du PNG, et c'est très important. C'est ce que je vous recommande également d'utiliser. Voici donc le résultat final. Vous voudrez peut-être savoir comment trouver de superbes icônes. Mais nous y reviendrons plus tard dans le cours. Car la taille 40 par 40 est une bonne solution. D'habitude, je deviens plus petit, mais c'est une icône fantastique, je suis très heureuse. Alors pourquoi ne pas le montrer ? Placez-le à quelques pixels du texte. Au fait, je pense qu'il est préférable de mettre le pourcentage en gras et vert, car c'est la partie qui ressort vraiment de la liste. Ils entrent dedans et font la queue, tout est bien. Garder ces deux éléments sur la même ligne que la Bible, mais faire en sorte que l'élément touche le bon guide, d' accord, pour faire de bons progrès. Mais il n'y a pas encore de quoi crier. N'oubliez pas qu'il ne s'agit que de la première version. Passons à la partie supérieure parce que ça me dérange vraiment. Je voulais juger ce design sans aucune distraction et ces rectangles gris, eh bien, ils ne le font pas pour moi. Nous allons donc régler cela dans le clip suivant. Merci. 21. Configurer la barre d'état et la barre d'action: Bon retour. Lorsque j'analyse le design, j'aimerais le situer dans son contexte. Maintenant, pouvons-nous tout isoler et nous concentrer uniquement sur cette carte ? Bien sûr que nous le pourrions, mais pourquoi le ferions-nous ? C'est pourquoi nous devons gérer la barre d'action et la barre d'état. La première option est un look très épuré. Les deux formes doivent être blanches, mais nous aurons une ombre projetée pour la barre d'action afin qu'elle ne se perde pas. Nous devons les séparer d'une manière ou d'une autre Maintenant, c'est bien mieux que d'utiliser un trait, une ombre projetée. Donc, s'il vous plaît, n' envisagez même pas d'ajouter un trait. Une bordure qui est un contour se trouve dans Photoshop, une bordure dans Adobe XD. Je suis désolée pour ça. OK. Pour les décors, le sexe et le sexe. Et c'est tout. C'est bon d'y aller. Rien de spécial. Nous avons une bonne ombre. Avancer. nous manque des éléments importants dans la barre d'état. Voici donc un dossier qui n' est pas sain. Cette ressource est jointe et je m' attends à ce que vous l'utilisiez dans tous vos projets. Encore une fois, veuillez utiliser Shift si nécessaire. L'idée est la suivante. Il n'y a rien de vraiment spécial ici. La barre d'état est basique et très simple, nous ne devons donc pas perdre de temps avec elle. Il suffit de le copier-coller , et c'est tout. OK, remplaçons la couche des textes de la ville par San Francisco, écrite en gras, 40 pixels, noir pur, sans feuilles de vigne. C'est exactement le même nom que le restaurant. Centrez-le avec la barre d'action. N'oubliez pas que même si cela ressemble à un gros bloc continu, il existe en fait un rectangle distinct pour cette zone spécifique. Gauche. Alignez-le avec notre guide et nous pourrons continuer. Au fur et à mesure que vous vous familiariserez avec XD, je vous suggère d'apprendre les commandes pour aligner horizontalement et verticalement. Ils vous aident vraiment, vous n'aurez donc pas à déplacer votre souris complètement en haut à droite. Déplacez l'icône déroulante si vous ne l'avez pas déjà fait. Enfin, pour gagner du temps, je vais passer à l'étape suivante et vous montrer les icônes que j'ai sélectionnées pour cette bonne zone. Vous les avez attachés. Ces pixels devraient également être de 40 pixels. centrés à l'intérieur du rectangle. Sachez que lorsque vous les déposez dans le projet, ne les déposez pas directement au-dessus du rectangle car vous n'allez pas passer un bon moment. n'est pas ce que tu veux. En fait, il faut les placer un peu plus bas. OK, maintenant écris la ligne, l'icône de recherche qui les sépare laisse 40 pixels, donc les gros doigts ne seront pas un problème. Nous avons oublié le menu des hamburgers sur la gauche. C'est une évidence, c'est un must. S'il vous plaît, donnez-moi une seconde pour faire la magie des choses. Voici une jolie icône. Encore une fois, ce que vous voulez éviter, cela , voyez le point culminant. Si je dois lâcher prise, vous ne passerez pas un bon moment. Donc, annulons le contrôle Z. C'est ce que nous voulons réellement. Je vais utiliser mes guides pour le positionner correctement. Je vais laisser 30 pixels entre elle et San Francisco. Encore une fois, assurez-vous d'utiliser les centres verticaux alignés, la porte. Vous vous demandez peut-être pourquoi je n'ai pas utilisé 40 pixels entre ces deux éléments. Deux au milieu, l' espace sur la droite. Et c'est parce que cet endroit affichera également l'adresse de l'utilisateur lorsqu'il sera connecté. Nous allons donc avoir besoin du plus d'espace possible. Nous avons une dernière chose à régler. La flèche déroulante doit être redimensionnée à environ 20 pixels par dix. Et je pense qu'il devrait être placé le plus près possible de la ville. Mais 30 pixels seraient plus beaux. Je vais m'en tenir à dix maintenant, d'accord ? Oui, j'en suis plus que content. Une fois que tout est dit et fait, veuillez sélectionner tous ces éléments et les centrer dans la barre d'action. Comme ça. Génial. Si tout est en ordre, rien ne doit bouger. Eh bien, peut-être un pixel de deux. Remarquez que la police semble décalée vers le bas. Cela m'agace vraiment, mais souvenez-vous que ce n'est pas la police finale. Nous pouvons donc faire avancer les choses. Pas de soucis à ce sujet. OK, c'est notre premier design. allons sélectionner l'entrée et nous utiliserons enfin cette option. Répéter la grille. Comme je l'ai dit, je tiens à le situer dans son contexte. J'aimerais donc voir toute la hauteur occupée par les entrées. Dans l'ensemble. C'est un brouillon. Ce n'est qu'une idée, mais elle contient tous les éléments nécessaires et nous pouvons commencer à jouer avec eux et en proposer au moins deux options. C'est ainsi que cela se passe et c'est ce que je vous recommande de faire également dans vos propres projets. OK, continuons après une courte pause. 22. Créez rapidement une autre version - le moyen facile: Bon retour. Dans cette vidéo, nous allons explorer plusieurs versions de cette carte. Nous allons le dupliquer, donc nous allons garder les choses belles et propres. Cela nous aidera également à comparer toutes les versions, toutes les itérations. D'accord, la première chose que nous devrions essayer est un fond gris clair. En fait, j'ai goûté à la belle couleur de Dribble qui a une belle touche de bleu. Le code couleur exact est cependant f z, F11, F8. Et c'est très subtil. Veuillez noter qu' aucun rectangle n'est défini comme arrière-plan. Il s'agit de la couleur de l'ensemble du tableau d'art, vous devez donc la sélectionner pour modifier le remplissage. OK, maintenant le texte n'est pas très beau sur ce fond gris. Créons donc le rectangle de base de la carte. Voici le processus rapide. Sélectionnez l'image en cliquant dessus. Créez maintenant une copie avec Control D, D comme dans un doublon. Accédez au panneau Calques et sélectionnez celui du bas. OK, maintenant augmentons la hauteur à 500. Pour le moment, cela n'a aucun sens, mais voilà le truc. Cliquez sur le fond pour ouvrir la couleur mendiante, déplacez-la. Et maintenant, vous allez voir le rectangle apparaître, rendre d'un blanc pur, bien sûr. Et c'est tout. Nous avons maintenant une carte. OK, bien sûr. Le texte ne correspond pas, puis ajoutez quelques éléments à corriger. Mais c'est le processus. Encore une fois, dupliquez, sélectionnez le calque inférieur dans le panneau des calques, augmentez la hauteur, puis jouez avec la couleur de remplissage. Retournez au travail. Nous allons sélectionner l'image et modifier le rayon de coordonnées en bas. Sachez que nous avons une grille de répétition ici. D'une part, c' est formidable parce que nous affectons toutes les copies par le dessous. Mais l'inconvénient est que nous devons maintenant maintenir contrôle et cliquer sur l'image pour la sélectionner. Si vous ne le faites pas, voici ce qui va se passer. Laissez-moi désélectionner, vérifier le panneau des couches, non ? Rien n'est sélectionné. OK ? Maintenant, si je clique simplement au-dessus de l'image, je vais sélectionner la grille, pas la photo elle-même. La conclusion est donc que vous devez maintenir la touche Ctrl enfoncée et cliquer pour sélectionner un élément. OK, revenons au rayon du coin. Nous avons déjà utilisé ce champ ici, non ? Mais si nous voulons modifier des coordonnées individuelles, nous devons cliquer ici. Je vous conseille de cliquer sur le premier et de vérifier l'icône. Cela vous montre dans quel coin vous êtes réellement en train de toucher. Utilisez la touche de tabulation pour passer rapidement à une nouvelle. Ce que nous voulons en fait , c'est vous pour les deux derniers, juste comme ça. Maintenant, OK, génial. Nous pouvons maintenant commencer à organiser nos couches de texte. Sélectionnez ces deux éléments et déplacez-les de 30 pixels vers l'intérieur. Quant à la distance sur l'axe vertical, cela n'a pas vraiment d'importance pour le moment, mais j'ai essayé de les placer quelque part au milieu, le côté droit, exactement la même chose là, les pixels. Mais gardez cela en ligne avec le titre. Je n'ai jamais envoyé l'écrit sur cette situation. Considérez-les comme deux rangées individuelles. D'ailleurs, il s'agit d'une méthode pour savoir comment utiliser Control and Shift. Laissez-moi clarifier les choses. Maintenez donc le contrôle et cliquez sur le dipôle. Maintenant, sélectionnez cela. En supposant que nous voulons aussi le désert accaparé, nous devons maintenir Shift. Maintenant, consultez le panneau des couches pour cela. N'oubliez donc pas que la touche Ctrl et cliquez dessus vous permet de sélectionner une seule couche. Si vous souhaitez ensuite sélectionner plusieurs autres couches, vous devrez maintenir la touche Shift enfoncée comme ça. Encore une fois, en utilisant Shift pour sélectionner plusieurs couches, gardez à l'esprit que nous allons refaire tous ces derniers ajustements, ces modifications fines lorsque nous arriverons au cours de typographie, lorsque nous allons réellement choisissez une police et ainsi de suite. Après un peu de bricolage, c'est la première cicatrice. Veuillez déplacer votre souris entre les cartes afin que nous puissions également ajuster cet espace. Regardez ce rectangle rose, cliquez sur Maintenir, et cela vous permettra de modifier l'espace. Là-bas. D est tout à fait bien. C'est ce que nous recherchons. OK ? C'est notre première option. les regardant côte à côte. Je pense que c'est une amélioration, mais dans l'ensemble, je ne suis pas très content de cette taille. Dupliquons l'intégralité de ce tableau d'art pour pouvoir essayer autre chose. Assurez-vous d' avoir suffisamment de place. Nous avons beaucoup de place et Adobe XD. Supposons que nous réduisions la carte de 40 pixels, par exemple, cela signifie que le rectangle de base doit être réduit à 460 et que la fin de celui-ci ne doit être que de 60. Ensuite, nous devons gérer ces couches de texte. Et c'est là que votre vitesse se traduit vraiment par votre dextérité. C'est le mot clé Rapid File. Sélectionnez-les et déplacez-les vers le haut pour les Pexels. Et tu sais quoi ? Pendant que nous y sommes, ajoutons également une touche de couleur à ces balises. Ils ont l'air ennuyeux tels qu'ils sont. De plus, il ne saurait pas que ce sont des actions. Vous pouvez en fait les appuyer et vous allez filtrer vos résultats de recherche. Donc, n'importe quelle couleur fera l'affaire. Mais je préfère ne pas utiliser le vert du classement. J'aimerais éviter toute confusion et vraiment séparer ces deux éléments autant que possible. barre oblique rouge serait tout le contraire. Alors allons-y avec quelque chose comme ça. Encore une fois, le code de couleur n'a pas vraiment d'importance à ce stade, car nous allons définir la palette de couleurs un peu plus tard. N'oubliez pas que nous travaillons toujours sur l'en-tête travaillons toujours sur les cartes elles-mêmes. OK, je suis très content de celui-ci. Dans l'ensemble, le rapport hauteur/largeur est plutôt bon. Il n'est pas aussi grand que je le souhaiterais, mais il est quand même assez grand. Et cela se traduit par un fort impact visuel. Lorsque vous ouvrez l'application, elle sera magnifique. Les photos vont vraiment te toucher. Maintenant, réfléchissons à ce que nous pouvons faire d'autre ? Faites une autre copie, veuillez contrôler D ou Alt, faire glisser. Et imaginons que nous pourrions avoir ces balises et la couleur d'arrière-plan unie pour montrer que les boutons peuvent être tapotés, il y a une action derrière eux, n'est-ce pas ? Mais comme je veux que la note attire également beaucoup d'attention, je pense que je vais la déplacer au-dessus de la photo. Alors allons-y. Déplacez la note dans la coordonnée en bas à droite de la photo. Quelque chose dans cette zone. Évidemment, nous pouvons le voir, mais nous pouvons ajouter un rectangle qui va fournir un bon contraste. La taille après le bit de va-et-vient est de 50 x 60 pixels. Cela va bien fonctionner et, bien sûr, il doit être d'un blanc pur. Maintenant, voilà le truc. Vous pouvez rencontrer des problèmes pour déplacer le rectangle sous les textes et les emoji. Maintenant, c'est parce que nous avons une grille de répétition. Alors, quelle est la solution ? Eh bien, c'est très simple. Vous devez utiliser un raccourci clavier (crochet gauche). Cela va déplacer la couche sélectionnée vers le bas. Juste comme ça. Si vous voulez l' augmenter, c'est Control, non ? Clé à crochet carré. C'est l'un des moyens les plus simples d'obtenir une grande lisibilité sans faire de compromis. Ajoutez simplement le rectangle. Laissez 30 pixels entre les bords inférieur et droit. Comme vous pouvez le voir, une fois que j'ai défini la valeur, dans ce cas 30, je la garde. Augmentons ensuite la rondeur jusqu'à la valeur maximale qu'elle corresponde à la forme des visages Smiley. Au fait, vous pouvez mettre n'importe quelle valeur ridicule ici, comme 90 ou peu importe, ira au maximum, et c'est tout. OK, désactivons la bordure. Si vous ne l'avez pas déjà fait. Cela ne nous aide en aucune façon. Mais je pense qu'il est temps de placer les emoji et les textes au centre de cette forme, quelque chose comme ça. Il suffit de le déplacer. Recherchez toujours les deux lignes bancaires. Maintenant que nous sommes là, sélectionnez bien la base et créez un groupe avec Control G. Maintenant, et créez un groupe avec Control G. pourquoi avons-nous besoin du groupe ? Ce n'est que trois couches, non ? Eh bien, nous allons probablement déplacer cela , il vaut mieux rester organisés. Appelez ça de la notation et ce truc, c'est tout. Faisons une petite pause et nous reprendrons dans un instant. 23. Plus de variations pour la carte: Bon retour. Nous allons nous occuper des sacs. Ici. Je vais créer un autre rectangle arrondi d' environ 40 pixels de haut. La largeur va varier en fonction de la longueur du mot, mais nous voulons environ 20 pixels de chaque côté. Alors, s'il vous plaît, soyez généreux. N'oubliez pas qu'ils utilisent la touche de raccourci clavier gauche entre crochets, la position correcte dans le panneau des couches qui la déplace vers le bas. Ok, ça devrait être orange et rouge. Mais ne vous inquiétez pas trop pour l'ombre. Assurez-vous simplement que le texte blanc pur sera visible. se déplace assez vite parce que c'est un truc standard. Vous devriez donc être en mesure de suivre. Mais bien sûr, vous devez mettre la vidéo en pause souvent et évidemment travailler sur votre deuxième visionnage. Les coordonnées doivent être arrondies au maximum pour correspondre à la note. Bien entendu, tout doit être centré. Maintenant, voici le truc. La hauteur de la carte n'est pas bonne. Nous ne pouvons tout simplement pas faire en sorte que cela fonctionne même si nous augmentons légèrement le titre. Je suggère que nous le remplacions par 470. Et après tout ce qui est dit et fait, c'est à cela que ça doit ressembler. Le fait est que toutes tes idées ne seront pas géniales et c'est très bien. Il est essentiel de les créer le plus rapidement possible , puis de les juger toutes en les regardant côte à côte. Terminons cette version en déplaçant cette livraison vers le bas à partir de la coordonnée supérieure gauche. Cela doit en fait être placé sur la même ligne que le titre du restaurant. Écrivons en livraison dans 30 minutes. Cette police de base convient pour le moment. Ce que nous recherchons, c'est l'équilibre. La carte est-elle belle ? Maintenant, je ne peux pas dire que je l'adore avec une note sur le côté droit. Maintenant, à la fin de cette session, nous pouvons copier ce design et effectuer un zoom arrière pour voir toutes les options qui donnent une chance à la Fed. Assurez-vous que tout est boutonné. Si vous consacrez beaucoup de temps à votre design, vous serez naturellement plus enclin à l'aimer davantage. Donc, tous ces derniers ajustements sont importants, ils vous influencent. OK. Nous avons commencé ici sans arrière-plan et avec de grandes cartes. Ce sont clairement les mots lorsque la deuxième version est belle, mais que la troisième est nettement meilleure en raison de la taille plus petite de la carte. J'ai aussi aimé la touche de couleur que l'orange aide beaucoup. Mais quand je compare les deux, je pense que les balises solides étaient une erreur. C'est un peu trop occupé et pas équilibré. Cela valait le coup d'essayer, mais je ne vais pas vous dire j'ai aimé la note flottante, mais nous devrons y travailler un peu plus. OK, faisons une pause et nous allons continuer dans un instant. Merci. 24. Explorer une disposition finale: Bon retour. J'espère que tu t'amuses et que tu travailles avec moi. Mais bien sûr, lors de votre deuxième visionnage, nous avons joué avec différentes options et nous savons avec certitude que nous voulons nous en tenir à cette version, mais pas de balises. Alors allons-y. Créez une autre copie du dernier tableau d'art et supprimons les rectangles oranges. J'aime les couleurs, donc je pense que nous allons les appliquer à ces textes. Les couches les diviseront par un trait d'union et nettoieront tout cela. Ce diviseur peut être noir ou quelque chose comme ça. En ce qui concerne la distance entre eux, je dirais entre 15 et 20 pixels. La question qui se pose est la suivante : devons-nous maintenir cette position ? Je pense que nous pouvons jouer un peu plus avec. Voici mon idée. Déplaçons le délai de livraison sous le titre, car le brief indique qu'il s'agit d'un facteur très important pour les utilisateurs de l'application. Cela signifie donc que les œufs seront placés sur le côté droit comme auparavant, 30 pixels du bord. Très bientôt, nous allons commencer à choisir des polices et cela ne fera que s'améliorer. Pendant notre pause, j'ai pris le temps de trouver l'icône de l'horloge qui correspondait à toutes les autres. C'est ici. Et vous pouvez opter pour 30 par 30 ou 40 par 40, ce qui vous convient le mieux. La plus petite taille convient, car ce n'est pas une action. 40 pixels, c'est ce que nous avons utilisé dans la barre d'action. Cela aurait été approprié, mais dans l'ensemble, je vais choisir valeur la plus basse, 30 sur 30. OK, s'il te plaît, prends un moment pour tout arranger entre l' horloge et l'heure. Je pense que dix pixels, c'est bien. Et évidemment, tout doit être centré verticalement. L'icône de l'horloge, le délai de livraison et enfin les catégories. Juste comme ça. En option, nous pouvons raccourcir ce texte pour délivrer les 30 minutes. Je pense que c'est assez clair. Nous pourrions même supprimer la livraison car nous avons cette icône en forme d'horloge. Mais je pense que je vais le laisser dans cette version. Enfin, même si j'ai adoré la notation, le design couvre une partie importante de la photo. Voici donc ce que je propose. J'ai été inspiré par le bleu du foie. Je veux donc que la note reste à cet avantage. Cela devrait également équilibrer le design. Le fait est que nous avons besoin de l'ombre portée, donc veuillez contrôler, cliquez sur le rectangle et activez-le. C'est ce qu'on appelle le projet de loi, un bouton d'ailleurs, un projet de loi. Bill comme en médecine, parce que c'est assez rond. Ils pouvaient le chronométrer et le placer à 30 pixels de la droite. Mais voilà le truc. Même si ce n'est pas la police finale, je pense qu'il y a trop d' espace vide de chaque côté. Sélectionnez donc le rectangle de base, pas le groupe Au fait, vous feriez autre chose et redimensionnez-le. Et voici une astuce intéressante lorsque vous souhaitez redimensionner une couche, mais que vous souhaitez conserver sa position tout en maintenant touche Alt enfoncée tout en la faisant glisser. Il s'agit de la touche Alt ou de la touche Option sur le Mac. Comme vous pouvez le voir, vous affectez les deux extrémités. Cela signifie que le contenu qu'il contient reste centré. C'est donc la touche Alt et la version idéale. Cette forme est aussi large que ces deux balises. Mais bien sûr, ceux-ci changeront tout le temps en fonction des mots réellement affichés. Ici, l'international est assez long, mais il est évident que d'autres catégories peuvent être courtes, alors ne perdez pas votre temps là-dessus. Mais oui, ce serait la situation idéale. Cela dit, je pense qu'il s'agit d'une grande amélioration par rapport à la version précédente. L'ombre est trop forte. Une fois que nous l'avons un peu calmé. Ça va être très joli. Six pour cent d'opacité, c'est très bien. Sachez que l'opacité est contrôlée à partir de ce champ. Vous pouvez également utiliser cette zone verticale, mais j'aime utiliser le champ à la place, c'est plus facile. Je crois fermement que c' est de loin la meilleure version. C'est mon point de vue, mais qu'en penses-tu ? Faites-le moi savoir dans la section des commentaires et assurez-vous de travailler sur votre propre version lorsque vous aurez terminé celle-ci. OK, faisons une pause. 25. Variations de création pour la barre d'action: Bon retour. Concentrons-nous sur la meilleure région pour le moment, nous avons créé quelque chose de très propre, même comme iOS, mais est-ce la bonne voie à suivre ? N'oubliez pas que nous sommes allés sur la largeur assez rapidement parce que nous voulions analyser les cartes sans être jetées. Mais il est temps de créer des options de modèle. Créons une copie afin d'explorer certaines options. Faites de la place et allons-y. La première qui me vient à l'esprit est très créative et c'est l'utilisation de la photo pour l'ensemble de cette zone. Cela peut être une photo de la ville et ce serait San Francisco, puisque c'est la photo actuelle. Supprimons la barre d'état et développons la barre d'actions et cette zone. Maintenant, pourquoi voulons-nous le supprimer ? Parce qu'il est beaucoup plus facile d'ajouter une photo à l'intérieur d'un seul rectangle. Si cela nous plaît, nous pouvons alors parler à un codeur et voir quels efforts il faudrait réellement pour que cela se produise. Parce que, encore une fois, cela modifie la structure des coûts. Le fait est que je sais que c'est possible, mais je ne sais pas à quel point c'est cher, quel point c'est difficile. Mais nous allons avoir cette discussion si nous aimons ça. Allons voir. J'ai mis la vidéo en pause et je suis allée sur unsplash.com pour sélectionner plusieurs photos de ce pont emblématique. Ils sont là, et essayons-les. Voici donc le premier. Nous avons de nombreux éléments qui ne fonctionnent pas sur un fond coloré. Donc, dans ce cas, je vais rapidement les rendre blancs. Rien d'autre, ne vous laissez pas tenter par le jaune, orange ou le vert citron. Ce sont les pires écarts du diable. Seul le blanc fonctionnera. Ok, ce n'est pas si mal que ça. Et nous pouvons effectivement ajouter le rectangle noir avec une faible opacité pour améliorer la lisibilité de ce texte. Mais pour l'instant, continuons avec les photos. N'oubliez pas que vous pouvez toujours double-cliquer sur l'image et la repositionner, voire la redimensionner. Adobe XD fait de son mieux pour placer la photo à l'intérieur du rectangle, mais cela ne fonctionne pas toujours bien. Alors n'ayez pas peur d'y entrer et de le changer. Par exemple, pour la dernière image, numéro six, elle doit être placée bien plus bas. Mais nous devons réfléchir à cette stratégie. Voulons-nous vraiment attirer l' attention sur la barre d'action C ? Nous aimons la simplicité du foie, mais cela nous éloigne de cela. Et je ne pense vraiment pas que ça en vaille la peine. Certaines de ces photos semblent correctes. Mais cela dit, ce n'est pas incroyable, ce n'est pas fantastique, tout va bien. compliquons donc pas les choses. Nous allons donc détruire cette idée. Au lieu. Essayons une Heather solide, quelque chose de simple, une nouvelle copie. Et nous allons expérimenter avec des couleurs vives et audacieuses, quelque chose de très saturé. En haut de ma liste, j'ai le vert, orange, le violet et le bleu. Les options sûres de base que la plupart des gens aiment. Donc, ce que je vais faire, c'est les empiler côte à côte pour que nous puissions leur donner une chance équitable. est donc très important de faire des copies. Donnez-moi un moment pendant que je passe en revue toutes ces versions. Je vais devoir beaucoup accélérer la vidéo. Mais il ne se passe rien de spécial. Il s'agit simplement de jouer avec le sélecteur de couleurs. OK, les voici. Maintenant, avez-vous un favori ? Pensez-vous qu'une option colorée est meilleure que celle du blanc pur ? Parce que c'est de là que je me tiens, je pense que le blanc est le meilleur. Les photos sont riches en couleurs, donc je pense que nous sommes en train de poser problème. Le blanc est beaucoup plus élégant. Ma conclusion, prenons avec elle et affinons-la. Si vous pensez le contraire, poursuivez simplement votre choix et montrez-moi votre résultat final. Il s'agit d'une méthode gustative, mais aussi de la façon dont vous interprétez le brief, façon dont vous voyez ce que veut le client. OK. Faisons une pause et je te verrai dans une seconde. 26. Concepts de conception pour l'écran de détails de restaurant (3): Bon retour. Nous sommes prêts à les filtrer, mais le restaurant détaille le design, voyons quelles variations nous pouvons proposer pour ce green. Mais d'abord, mettons-le à jour. Ces rectangles doivent être blancs. Et celui des onglets doit avoir une ombre portée activée. N'oubliez pas que nous avions des paramètres spécifiques pour cela, et non les paramètres par défaut. C'était du sexe et du sexe. C'est très important lorsqu'il s'agit d'ombres, car nous ne voulons pas que l'ombre apparaisse en haut du rectangle. est donc essentiel de modifier les paramètres. Passons maintenant à la barre d'état qui doit être noire pure, à l'exception du rectangle lui-même. Dans le passé, j'utilisais des PNG, de vraies photos, mais pour la barre d'état, il vaut mieux utiliser un élément ajustable. Et le format que vous recherchez est le SVG. Mais mieux encore, vous pouvez simplement copier-coller à partir de n'importe quel cadeau, de n'importe quelle ressource du Web. Il suffit de regarder n'importe quel cadeau pour Adobe XD et vous le trouverez probablement. OK, en descendant, nous devons ajouter des icônes. J'ai mis un peu de temps à trouver la flèche arrière et l'icône d'inflammation correspondantes. Ils doivent être placés exactement comme un écran, mais ils doivent tous être placés sur la même ligne. Chambre suffisamment large. Je pense que nous avons peut-être oublié d'ajouter les guides à cet écran spécifique. Ajoutons donc cela ici. Il y a une piste. Ajoutez n'importe quel rectangle de 656 pixels de large. Comme d'habitude, le panneau des propriétés est la meilleure solution lorsque vous recherchez la taille spécifique. Ensuite, lorsque vous l'avez et que vous envoyez le rouge, vous pouvez faire glisser le guide , puis supprimer la couche supplémentaire. C'est aussi simple que cela. C'est l'un de ces hacks que j'adore absolument. Cette technique est née d'une nécessité. Et seul un freelance qui valorise réellement son temps a cette approche. Si vous voyez quelqu'un déplacer manuellement un guide pixel par pixel, vous savez qu'il est bien trop détendu. Au sein de l'entreprise, supprimez les textes d'information si vous ne l'avez pas déjà fait et placez l' icône d'information à côté du guide. Répétez l'opération pour l'autre côté. Veuillez prendre votre temps et vous assurer de le faire correctement. Bien entendu, le moyen le plus simple de les organiser est de sécher la grande boîte qui les saisit toutes, puis d'appuyer sur la commande d'alignement et vous aurez franchi une étape importante. Génial. Laissez 30 pixels entre la flèche et le titre. C'est donc beau et aéré. Cette police n'est pas très bonne, mais bientôt nous allons commencer à apporter quelques touches finales. Ce sera un peu plus tard. Maintenant, maintenant, pour faire correspondre l'écran numéro deux, nous allons changer le titre de l'écran à 40 pixels en gras. Encore une fois, conservez cette police de caractères. S'il vous plaît, faites-le en noir pur. Maintenant, cela peut être un peu risqué. création prend tellement d'ampleur, mais nous allons tout régler assez tôt et nous pouvons apporter diverses modifications. L'idée principale ici est de rester cohérent. Je n'aime pas utiliser des valeurs différentes sur des écrans aléatoires. Après avoir mis de côté, vous devez vous y tenir. Et oh, au fait, lorsque vous changez de taille, il vaut mieux tout aligner à nouveau. Pour les onglets. Allons-y. Sélectionnez-les toutes en même temps car c'est la méthode de travail la plus intelligente, puis changez cette orientation pour la centrer. Cela les fera rester en place car mon plan est d' augmenter la taille à environ 24 pixels. C'est vrai pour les rendre audacieux et évidemment noirs. S'ils ne sont pas déjà noirs, ce gris m'en sort vraiment. Ça ne me plaît pas. Nous avons passé beaucoup de temps à les organiser à l'aide de cette ligne qui montre l'onglet actif. Et le fait est que je ne veux pas que tous ces efforts soient vains. C'est pourquoi nous changeons cette orientation. OK, passons à autre chose. Sélectionnez la première entrée et vous devriez regrouper si vous avez suivi. Si ce n'est pas le cas, regroupez maintenant avec Control G. Encore une fois, activons une grille de répétition en partant de la droite. Excellente. Faites-le glisser vers le bas pour que nous puissions en obtenir quelques copies. Évidemment, l'espacement ne semble pas correct, mais ce n'est qu'un fait. Nous recherchons 30 ou 32 pixels. C'est l'une des modifications de gain par rapport grille de répétition de Photoshop qui nous montre à quoi ressemblera notre design lorsque nous aurons beaucoup d'entrées, et ce, avec un minimum d'effort. Prenons cette ligne à titre d'exemple. Ce n'est pas la bonne taille. Il doit avoir une largeur de 656 pixels. sélectionnera l'un d'entre eux et utilisera la zone de transformation dans le panneau des propriétés, saisira 656 et le déplacera. Au fait, profitons de cette occasion pour utiliser également le champ x. X est pour l'accès horizontal. Donc, si nous saisissons 32 pixels ici, cela signifie que la couche sera placée à 32 pixels du bord gauche de l'écran. Donc x axe horizontal, et ça part du côté gauche. Et sur l'axe vertical, il part du haut. Bon, maintenant, pour les photos, nous devons utiliser unsplash.com. Encore une fois, j' ai déjà préparé quelque chose, donc je vais les faire glisser tous en même temps au-dessus du premier rectangle. Et comme il s' agit d'une grille répétitive, XD sait que je veux une photo différente pour chaque entrée. Au fait, si vous n'avez pas désactivé la bordure, veuillez le faire. Pas besoin de ça. Et pendant que nous sommes ici, laissez-moi vous montrer une autre fonctionnalité de la grille de répétition. J'ai ce nœud simple qui est mauvais. Il s'agit simplement d'un fichier point TXT standard avec plusieurs d'entre eux. Si je fais glisser ça sur l' une des couches de texte, disons le titre du plat, regardez ce qui se passe. Magie Je vais répéter cette étape pour le prix descriptif, et enfin pour le poids, le nom du bloc-notes n'a pas d'importance. Je les renomme simplement pour que vous puissiez les suivre facilement. La seule chose dont vous devez être conscient est de laisser un espace vide entre vos entrées. Voici à quoi ressemble le fichier de description point TXT. Même si la vanne comporte plusieurs lignes, XD sait quand commence le siècle prochain en se basant sur cet espace vide. Et s'il y a trop de texte, réduisez simplement la hauteur de la couche de texte et c'est tout. L'excédent va être caché. Cool. Lorsque c'est fait et que vous êtes prêt à passer à autre chose, concentrons-nous sur Ajouter au panier, l'action principale de ce green. Voilà le truc. J'ai cherché longuement et sérieusement, et j'ai décidé d'utiliser ce symbole plus. je comprends bien, lorsque vous touchez l'ensemble de cette région, le produit est automatiquement ajouté au panier. n'y a pas d'autre page, il n'y a pas d'autre écran. Eh bien, sans ajouter la phase de style pour l'instant, veuillez alléger le séparateur pour ne pas vous distraire. Cette couleur ne fonctionne tout simplement pas pour moi. Un gris très clair. Des solutions comme ddd devraient bien fonctionner en tant que solution temporaire. Et oui, vous pouvez ajouter des lettres dans le code couleur. Le code hexadécimal ne contient pas que des chiffres, il peut également contenir des lettres. Pour poursuivre notre chaîne de commandement à partir de l'outil d'écran, je vais mettre le titre, prix et le poids en gras. Réglons-les à environ 30 pixels. Bien que cela puisse être un peu trop, cela pourrait être un peu difficile. Une fois que nous avons commencé à rouler, nous pouvons avoir une meilleure idée de notre espacement. Oh, au fait, tu déplaces le titre un peu vers le bas si nécessaire. Cependant, il s'agit d'une étape facultative, rappelons-le. Nous allons bientôt choisir une police différente. Idéalement, le titre doit être aligné sur la miniature. Le prix attend, une icône doit être alignée en bas avec la vignette, mais comme une unité entière. Maintenant, d'accord, en attendant, je tiens à vous rappeler que je veux voir deux créations de votre part. Vous voulez une réplique parfaite de ce que je fais ici avec exactement les mêmes icônes, polices, tailles et couleurs que celles que vous voyez dans le cours. Et une autre qui comprend vos propres nouvelles photos, de nouvelles polices, de nouvelles icônes, nouvelle mise en page, les œuvres. Je souhaite également voir du contenu différent. Veuillez ne pas publier votre travail sans utiliser une grille de répétition. Choisissez différents noms de restaurants, étiquettes, prix, etc. Ne soyez pas paresseux à ce sujet. Maintenant, avant de continuer, veuillez créer ces deux éléments de menu, gris 777, s'il vous plaît. Je pense que c'est ce que nous utilisons jusqu'à présent. Et c'est parce que nous voulons montrer qu'ils ne sont pas actifs. OK. Voyons ce que nous pouvons faire ici. Je dois te demander mon chemin. La première consiste à utiliser une photo au lieu de la barre d'action, ce qui pourrait mieux fonctionner ici que sur l' écran numéro deux. Et la troisième consiste à fournir au client une diversion défilante au lieu du design à trois Deb fixes. Faisons tout cela dans la vidéo suivante après la pause rapide. Merci 27. Variation des détails du restaurant: Bon retour. Créons-en une copie et commençons à travailler sur la première variante de cet écran, le rectangle de la barre d'état principale et relevons la barre d'action. Nous voulons ajouter une image dans cette région. Mais voilà le truc. Nous pourrions agrandir cette zone, même si ce n'est pas aussi courant. Nous avons cette option. À partir de mes tests et de mes recherches. Une hauteur d'environ 270 va assez bien fonctionner. Et encore une fois, même si ce n'est pas standard, c'est très faisable. Les onglets devront bien entendu être déplacés en dessous avec tous les autres plats. N'oubliez pas de travailler intelligemment, par exemple pour mieux voir ce sur quoi nous travaillons, remplacez la couleur de fond par une couleur comme le gris. De cette façon, nous saurons par où les onglets doivent commencer. L'idée est de créer quelque chose de similaire à Food Panda. Prenez votre temps car il y a beaucoup de couches. Je vous recommande de zoomer et dézoomer pour avoir plus de contrôle. Avec ce changement, vous devrez probablement retirer l'un des plats par le bas. Mais je pense que c'est bon. Nous en avons plus qu'assez. OK, maintenant nous pouvons commencer à construire sur cette couche. Ajoutons la photo du placard du restaurant. Dans ce cas, c'est l'image d'une pizza. J'ai déjà préparé quelque chose. Évidemment, nous pouvons voir le texte, mais pratiquons la technique précédente. Le contrôleur de largeur dupliqué jouera avec le remplissage, sorte que l'image sera remplacée par une couleur. Optez pour le noir pur. Maintenant, j'ai réduit l' opacité à environ 40 % de. Il se peut donc que nous en ayons besoin de plus, mais nous verrons que tout ce qui se trouve dans cette zone doit être rendu blanc, y compris les icônes de la barre d'état. Cela va prendre une minute, mais laissez-moi vous montrer comment j'aime travailler, surtout si je ne l'ai pas enregistré. Je vois que la barre d'état est groupée. Ce n'est pas bon. Dissocions-le comme ça. Ensuite, je vais faire glisser une case pour sélectionner toutes ces couches. Consultez le panneau des couches pour confirmer. Le problème, c'est que j'ai deux blessures supplémentaires, la photo et le rectangle noir, même s'ils portent le même nom, je sais laquelle est laquelle. OK, maintenez la touche Contrôle enfoncée et cliquez dessus dans le panneau des calques pour les désélectionner. Maintenant c'est fait. Je peux changer tous ces gars en une seule fois, comme ça. Génial. N'oubliez pas que nous avons en mode itération des dérivations de gauss bancaires, bien que la barre d'action ne soit pas présente en soi. Je vais toujours garder ces deux couches positionnées à cet endroit, la flèche arrière et le titre. Laissons tomber l'icône d'information car elle se perd dans le mix. Et ajoutons les éléments de notation quelque part au milieu de cette zone. Bien que ce ne soit pas obligatoire, c'est une bonne idée. Retrouvez-le sur l'un des tableaux d'art précédents que nous avons créés. L'ombre projetée peut avoir besoin d'être intensifiée, mais au final, cela ne fera pas une grande différence car voici le truc. Même à 50 % d'opacité, il est à peine visible. Sur un téléphone. Vous ne remarquerez probablement pas l'ombre quand tout sera dit. Et puis voici à quoi ressemble la variation. Personnellement, je l'aime plus que la version épurée, mais tout est une question de goût. Et dans ces situations où vous avez deux options très solides, vous pouvez laisser le client décider. Je vais les garder tous les deux, puis nous pourrons passer à l'option d'onglet défilant. Utilisons le concept initial où la barre d'action est standard. Faisons donc une autre copie. Et tout cela devrait d'ailleurs être côte à côte, afin que nous puissions facilement les juger. Ici, la principale différence est que les éléments de menu sont tous placés sur une seule couche de texte et qu'ils sont poussés vers la droite. Supprimez donc ces deux catégories et trouvez cinq ou six catégories d' aliments. J'ai préparé quelque chose dans un bloc-notes, mais tu peux créer le tien. Le fait est que tout cela provient de la directive officielle sur la conception des matériaux. Il s'agit soit des onglets fixes, soit des onglets défilants. C'est donc là que je trouve toutes ces options en ce qui concerne les touches défilantes. Encore une fois, en utilisant les mesures du visage, vous pourriez potentiellement l' incliner et simplement aligner les objets comme bon vous semble. Il suffit de le regarder. Vous pouvez également utiliser la mesure officielle. Je vais choisir cette option et vous pouvez la voir en action. Vous pouvez donc voir ce qui est, quoi. Tout d'abord, le rectangle, doit être modifié à 180 pixels, ce qui est le minimum selon le guide. Ensuite, vous devez le placer à 140 pixels du bord. C'est 52 dp d'après le guide officiel. Maintenant, rappelez-vous comment vous pouvez le faire facilement. Vous pouvez utiliser le champ x du panneau des propriétés x pour l'axe horizontal, et il commence toujours par la gauche. Excellente. Maintenant, en ce qui concerne mon premier pas, celui-ci doit être aligné horizontalement avec le rectangle. Mais bien sûr, c'est un problème car cette couche contient de nombreux éléments de menu. Maintenant, dans ce cas, je pense que nous pourrions ajouter un rectangle de chaque côté et nous pourrions faire des allers-retours manuels. Mais je vais juste donner une idée approximative. Lorsque vous avez terminé, veuillez changer la couleur de tous les autres onglets en gris délavé. La couleur du code que nous avons définie est le triple sept, donc 777. Il y a une chose que j'aimerais aborder. Vous êtes peut-être curieux de connaître l'arrière-plan et de savoir pourquoi je l'ai laissé blanc, car nous pourrions essayer une couleur blanc cassé. Mais ici j'ai décidé de ne pas le faire. Je l'ai essayé hors caméra et ça n'avait tout simplement pas l'air correct. Mais ne développez aucun secret que les enfants ont qui pourrait ressembler et, à mon avis, c'est boueux, sale, occupé, loin de l'air le look que nous voulons créer. Maintenant, voilà le truc. Une autre option serait de créer des rectangles, des rectangles blancs, appelés cartes pour chaque plat. Mais c'est une autre chose que j'ai décidé de ne pas faire. Et le raisonnement est l' échantillon numéro un, soit il faudrait presser de l'espace parce que chacun d'entre eux nécessiterait plus de rembourrage et d'espacement. Ce n'est donc pas une bonne idée. Et la deuxième chose, c'est une liste, donc les cartes n'ont pas vraiment leur place ici. Selon les directives officielles de conception des matériaux, tous les articles vont ensemble. Et si vous vous souvenez de la conférence sur les gardes, on y voyait en fait des objets individuels qui ne vont pas nécessairement de pair. N'oubliez pas l' exemple de tableau de bord ou l'application Notes. C'est pourquoi, à la fin de la journée, j'ai décidé de ne pas utiliser l'arrière-plan. Mais oui, vous l'avez. Ce sont les options, numéro en plein écran de v. Bien sûr, nous devons choisir une police ou une palette de couleurs et appliquer quelques touches finales. Nous pouvons passer à cette partie parce que je n' ai pas d'autres idées sur l'écran. Alors allons-y. Nous allons peaufiner les choses. Je te verrai dans un instant. 28. Choisir la meilleure police de caractères: Bon retour. Il est temps de parler de topographie et nous utiliserons le même processus itératif sur ces quelques écrans. Sélectionnez les meilleures versions et vous êtes la vue et placez-les côte à côte afin que nous puissions rapidement les parcourir. Si tu es indécis, c'est bon. Mais Leaves choisit trois tableaux d'art différents afin que nous puissions explorer chaque police de caractères dans un certain nombre de situations. J'ai déjà séparé le mien de l'arrière et nous allons travailler sur des copies. Nous allons donc rester simples avec une seule police de caractères comportant au moins deux poids, normal et gras. Il y en a plus, c'est génial. Mais un autre facteur est sa taille. Voilà le truc. Nous voulons qu'il soit aussi petit que possible en termes de kilo-octets. Donc, si nous sommes indécis à propos de deux polices de caractères similaires, nous opterons pour la plus petite. Nous recherchons des polices sans empattement parce que nous voulons un look épuré, net et moderne. Et les polices de caractères à empattement sont les plus délicates. Ils ne fonctionnent pas aussi bien. Enfin, le point de recherche essentiel est la personnalité. Nous voulons que quelque chose de similaire produit, arrondi, intéressant et avec un peu de personnalité qui ajoute de la valeur au design. Maintenant, vous êtes peut-être en train de vous gratter la tête à ce sujet. Qu'est-ce que cela signifie, personnalité ? Eh bien, disons-le de cette façon. Si nous utilisons Arial, par exemple vous ne gagnerez aucun design. Les mots de mon livre consacraient de nombreuses polices de caractères qui n'ont aucune personnalité. Ils sont simples, ils n'attirent en aucun cas l' attention, le mélange, et c'est pour cette raison qu'ils sont polyvalents et qu'ils peuvent être utilisés dans de nombreuses circonstances. Dans le contexte d'un design AB, nous voulons que notre texte se démarque Notre choix de faire ou de défaire le design est donc très important. Maintenant, j'ai déjà mentionné Ariel, mais tardivement, certains poids d'Open Sans robo, de Source Sans Pro et bien d'autres encore, entrent dans cette catégorie terne. Ce sont les polices que vous devriez éviter. OK, allons-y avec Google Fonts. Je vais désactiver l' empattement et l'écriture manuscrite. Et je vais aller en ville en cherchant au moins quatre ou cinq polices de caractères. La première qui attire mon attention est Montserrat, qui est l'une de mes préférées. Je vais les parcourir rapidement car la recherche proprement dite prend au moins 20 minutes. OK ? Maintenant, Ubuntu a beaucoup de couches. Donc ça fait deux, mais je ne sais pas si c'est comme ça que vous le prononcez. Je pense que c'est Ubunto. Bref. Passons à autre chose, Nieto, ça a l'air très joli, donc je vais l'ajouter aussi, ça dit que c'est un peu trop léger, mais peut-être qu'il a d'autres poids. Et nous pouvons voir qu'il contient pas mal de styles. Enfin, des sables mouvants, c' est très beau également. Maintenant, par souci de concision et de concision, je vais m'arrêter ici. Mais lorsque vous le faites vous-même, veuillez accéder à d'autres polices de caractères. Le plus c'est le mieux. Et au fur et à mesure que vous vous entraînez, vous allez commencer à développer une base de données mentale de polices de qualité. Vous aurez soit un marchand avec des listes , soit votre prochain projet. C'est pourquoi je ne perdrai pas de temps à faire défiler la page. Je sais déjà ce que je recherche et vous ferez de même si vous suivez cet exercice, téléchargez des archives, extrayez. Et je vais vous montrer comment je les trie rapidement par taille, surtout si vous avez sélectionné de nombreuses polices de caractères. Maintenant, dans ce dossier, vous allez rechercher du TDF foncé. Et cela va tous les révéler. Si vous avez vu obtenir les fichiers en mode détails, vous devriez obtenir la taille et la colonne séparée. Et nous pouvons immédiatement constater qu' Ubunto est quatre fois plus lourd que des sables mouvants, 400 ko contre 10. Pour l'instant, je ne vais pas le rayer de ma liste pour l'instant. Mais il doit être absolument fantastique pour le garder en option. Et c'est parce que tout le monde dans l'espace abside est très sensible à la taille de son application. Dans mon entreprise, je cherche constamment à éliminer le gras. Et ce serait en haut de ma liste. La vitesse de chargement est extrêmement importante, il est donc indispensable de réduire la taille de l'application. Passons à Adobe XD et voyons de quoi il s'agit. Je les ai déjà installés dans le dossier des polices de mon système. Il suffit de les copier-coller. Allons voir les sables mouvants. Et il n'y a pas de magie ici. C'est tout simplement la magie du montage. Vous devez sélectionner toutes les couches de textes et les modifier. Je vais accélérer le processus afin que vous puissiez voir le résultat final. C'est un processus qui demande beaucoup de temps, mais je veux que vous vous entraîniez et que vous consultiez le Web. Nous pourrions utiliser diverses fonctionnalités d' Adobe XD pour y aller rapidement. Mais à ce stade, je veux vraiment que vous le fassiez manuellement. OK. Maintenant, quelle est votre première impression ? Regardez de plus près, zoomez avant et dézoomez. Est-ce un gagnant ? Je n'en suis pas sûr. Continuons donc avec les autres. Sachez que ces modifications vont évidemment ruiner votre alignement. se peut donc que vous deviez apporter quelques modifications ici et là. Encore une fois, cela semble assez solide étant donné qu'en le parcourant assez rapidement, nous pourrions travailler avec un degré de précision plus élevé, mais pour l'instant, il n' en a pas besoin à cette étape de la processus. OK, passons à la police suivante. Nous allons faire le ménage dans quelques conférences plus tard. Pour l'instant. Allons-y. est tellement beau, c' est un peu plus léger, mais voyons le en action. Sachez qu'il existe une autre version appelée Nieto Sands. n'est pas ce que nous voulons, juste la version normale. J'ai donc l'impression que cela ressemble à des sables mouvants, mais qu'il est légèrement plus rond. Vous pouvez voir que, surtout dans les délais de livraison, le téléviseur est beaucoup plus net que celui-ci. Mais c'est une course serrée. Cela dépend vraiment de ton visage. Maintenant, je vais zoomer en avant pendant que j' essaie toutes les autres polices de caractères. Merci à Dieu pour le pouvoir de tout. N'oubliez pas que vous devez le faire vous-même et développer de nombreuses options disponibles sur les polices Google. n'y a pas d'alternative au dur labeur. Essayez d'être aussi efficace que possible. Vous pouvez sélectionner les couches de texte en gras et modifier la police directement en fonction de cette épaisseur. Cela signifie que vous devez être très rapide avec votre technique de clic sur la console. Peu importe comment vous le faites, il est important que vous le fassiez. De plus, vous devez avoir un bon nombre de couches de textes. Si nous l'avions fait, il suffit d'ajouter l' écran de localisation, le premier. Ce ne serait pas pertinent. C'est comme demander aux gens de la rue pour qui ils votent. Ils disent candidat X. Ensuite, vous signalerez que l'étude montre 100 % des gens veulent voter pour le candidat X. Cela ne fonctionne pas de cette façon. Ne vous y trompez pas. Aux votes, ça ne suffit pas. C'est pareil ici. Deux ou trois couches de texte seulement, ce n'est pas suffisant. Il faut voir les choses et les contextes dans de nombreuses situations. Utilisez donc plusieurs types de textes, couches, des titres, des descriptions, sous-titres, des chiffres, un fond blanc , un arrière-plan mixte, etc. Mais sachez que plus vous incluez de plans de travail, la difficulté augmente. C'est pourquoi nous n'avons pas créé tous les écrans et avons laissé cette étape à la fin. Eh bien, c'est possible aussi. Il est préférable de décider du style d'une application. À un stade précoce. Il est ainsi beaucoup plus facile de changer les choses. Voici toutes les polices que je sélectionne pour lesquelles vous avez ce fichier joint et je vous suggère d'explorer chacune des options. Xd peut vous donner quelques avertissements si ces polices ne sont pas installées. Visitez d'abord Google Fonts pour éviter toute interruption. Chaque police possède ses propres points forts. Mais ce que je peux clairement voir dès le départ, c'est qu'Ubunto n'en vaut pas la peine. Ça a l'air bien, mais ce n'est pas quatre fois plus beau que les autres. Montserrat est également très belle. Mais dans l'ensemble, je pense que la plus belle n'est pas nécessaire. Il a beaucoup de poids. Il est assez petit, donc cela n'augmentera pas la taille de l'application. Et il possède ce zinc spécial qui le distingue, notamment dans sa variante noire. Il est assez gros et rond. Compte tenu du public cible, je pense que c'est un excellent premier choix. Au cas où quelque chose se produirait ultérieurement, nous pouvons facilement changer la police de caractères pour n'importe laquelle de ces alternatives, et nous pouvons en explorer d'autres. Mais c'est la fin de cette conférence. Nous avons fait de grands progrès et je voulais vous féliciter pour votre persévérance dans le projet. Je vais te voir dans un instant. Merci. 29. Définir et affiner le style de notre application: Bon retour. Il est temps de réserver quelques minutes pour définir le style AP. Nous recherchons les couleurs, les tailles de police, les hauteurs de ligne, etc. Nous allons donc appliquer tout cela au reste des écrans. Je sais que c'est ennuyeux, mais nous avons une technique qui sauve des vies et c'est le panel des actifs. Commençons par la palette de couleurs. Une fois que ce panneau est actif, à partir de là, le processus se déroule comme suit. Disons que nous choisissons une pipe, disons San Francisco. Nous ouvrons le sélecteur de couleurs et nous expérimentons différentes nuances, non ? Ce qui est formidable, c'est que nous pouvons voir le changement en temps réel. Maintenant, pour faire court, j'ai décidé de l'utiliser en tête-à-tête. Faites f49, qui est une nuance de bleu très foncée. Je dis les codes couleurs exacts pour que vous puissiez suivre. Mais honnêtement, j'ai juste joué avec le sélecteur de couleurs jusqu'à ce que je sois heureuse. C'est presque noir, mais c'est idéal pour de nombreuses couches de textes. Maintenant, comment l'appliquer ? Tout d'abord, nous l'avons ajouté dans le panneau Actifs. Accédez à la couleur et cliquez sur ce symbole plus. Et juste comme ça, nous avons l'échantillon juste ici pour vous montrer la puissance du panneau des actifs et en donner un exemple rapide, comme ce titre, Desert Heaven, qui est noir en ce moment. Maintenant, allez dans le panneau Actifs et faites-le en bleu. C'est plus rapide que d'utiliser la zone de remplissage du panneau des propriétés. Mais en fait, c'est la vraie raison pour laquelle ce panel est extrêmement important. Supposons que le client n'aime pas cette couleur. Il veut plutôt lire. Ok, tu y vas. Vous cliquez avec le bouton droit sur l'échantillon et vous choisissez Modifier. Maintenant, apportons n'importe quel changement. Et c'est aussi simple que cela. Les deux couches sont automatiquement mises à jour Deux couches, ce n'est pas si grave. Mais imaginez que nous avons 200 écrans et près de 1 000 couches de textes. C'est là que le panel des actifs est absolument indispensable. Appuyons donc sur Control Z pour annuler. Pour continuer, veuillez sélectionner trois tableaux d'art et les déplacer séparément si ce n'est pas déjà fait. Nous devons tout nettoyer un peu. Je veux l'écran de localisation, l'écran principal de la liste où la note flotte sur le bord, sur le côté droit. Et enfin la Vierge où nous avons des onglets défilants. Donc, trois écrans au total et nous pouvons constituer notre panel d'actifs. OK, concentrons-nous sur le second. Le titre est bleu, affiché en noir Nieto neuf pour la taille que nous pouvions choisir pour D. Mais je pense qu' un plus petit serait peut-être mieux, je pense qu'avant est un bon choix. Le style doit également être appliqué au titre du restaurant. Eh bien, dans le panneau des actifs, vous pouvez également le faire. Descendez dans Styles de personnage et cliquez sur ce Plus. Et juste comme ça, vous allez voir le nouveau Nieto 34. Mon conseil est de le renommer en cliquant avec le bouton droit , d' obtenir, de l'appeler titre ou quelque chose comme ça. Ensuite, appliquons-le. Cliquez sur Dessert en maintenant la touche Ctrl enfoncée pour la sélectionner , puis cliquez sur l' entrée pour la tester. Faisons un changement radical. Cliquez donc avec le bouton droit dessus et sur le panneau Ressources, cliquez sur Modifier et créez-le, par exemple 50 pixels ou quelque chose de fou comme ça. Et oui, cela fonctionne. Appuyez sur Escape, puis sur Control Z pour annuler. Alors partons du haut. Le titre est terminé, non ? Mais qu'en est-il de toutes ces icônes ? J'aime bien cette orange, alors essayons-la. Prenez le menu des hamburgers et mettons-le à la couleur suivante : or, F, F, E, C, z, z, z, cependant, qui est un très bel orange intense. Ajoutez-le ensuite au panneau Actifs. Mon plan est donc de l'appliquer à toutes ces autres icônes. La liste déroulante, le filtre et la recherche. Utilisez la touche Ctrl pour sélectionner le premier. Ajoutez ensuite Shift à la sélection multiple, et ils deviennent oranges. Charmant. Veuillez appliquer la même couleur sur les étiquettes en bas à droite. Comme vous pouvez le constater, avec un minimum d'effort pour modifier le design et en un rien de temps. En gros, ce que nous faisons en ce moment, c'est la marque de chaque article. Les balises étaient donc déjà oranges, mais nous voulions indiquer à Adobe XD qu'il devait appliquer ce style spécifique à partir du panneau des ressources. En gros, nous relions les points en connectant la couche au panneau Assets. Qu'en est-il du délai de livraison ? Eh bien, cela doit être indiqué dans le nouveau Nieto regular 24, les pixels dans un gris assez foncé. Allons-y avec 777. Nous pouvons ajouter cette couleur ainsi que le style du personnage. Je pense qu'il est très probable que nous allons l'utiliser comme corps du texte, c'est-à-dire la description de chaque plat. Renommez-le donc en body. Je tiens à préciser que je n'en suis pas sûr à 100 %. Il se peut que je change d'avis. Nous allons voir au fur et à mesure, mais comme nous avons le panel d'actifs, nous pouvons rapidement changer d'avis sur la notation. Allons-y avec le nouveau Nieto 20. Donc assez petit. On peut le rendre gris, c' est un code couleur 777, comme ça. Ensuite, sélectionnez la pièce à 92  % et rendez-la noire. noir en termes de poids, d'ailleurs, parce que pour la couleur, nous allons rester au vert, vous pouvez essayer les emoji pour cela parce que nous avons changé la police, l'alignement Ça n'a aucun sens. Mais c'est une solution rapide. Une question que vous pouvez vous poser est la suivante : Chris, comment avez-vous choisi la 34e place noire pour les titres ? Pourquoi pas 30, pas 40 ? Et la réponse est très simple. Je les ai essayés. J'ai téléchargé le design sur mon téléphone et je les compare d'abord entre eux , puis avec d'autres applications que nous avions analysées précédemment et qui semblaient être le meilleur choix. Il en va de même pour toutes les autres tailles. OK, avance vite, et voici notre résultat. Voici à quoi devrait ressembler votre projet à ce stade du jeu. Faisons une petite pause. Merci. 30. Pratiquez votre vitesse: Bon retour. Nous sommes sur l'écran numéro deux, et je souhaite remplacer ici tout ce contenu fictif de toutes les ressources que j'ai préparées pour cette grille. Tout d'abord, les photos, saisissez-les et faites-les glisser sur la première entrée. Si vous pensez que l'un d'entre eux n'est pas correctement configuré, double-cliquez dessus et vous pourrez les repositionner ou même les redimensionner manuellement. Ensuite, je vais faire glisser les titres. N'oubliez pas qu'il s'agit simplement d'un fichier texte standard. Ça n'a rien de spécial. OK ? La position n'est pas correcte. Mais le point principal est le suivant. Il faut d'abord modifier le texte pour écrire une ligne. Et ce n'est que maintenant que nous pouvons le positionner correctement à 30 pixels du bord. Et c'est parce que la longueur change. Génial. Enfin, les votes. Lorsque vous faites glisser le contenu, le style change et vous ne pouvez rien faire pour l'empêcher si ce n'est d' avoir deux couches distinctes. Je ne veux pas faire ça, donc je vais le garder tel quel. Au cas où j'aurais le temps, je pourrais modifier chaque entrée manuellement, mais ne comptez pas là-dessus. Vous vous demandez peut-être, Chris, pourquoi faites-vous tout cela ? Et c'est très simple. D'une part, c'est une excellente pratique. Vous devez faire de l'exercice jour après jour et être prêt. Ensuite, il est important que nous montrions au client et au développeur quelque chose que nous sommes fiers d' avoir du faux contenu répétitif, beaucoup de Lorem Ipsum, cela brise la magie. C'est pourquoi je dois le faire. Et juste pour le ramener à la maison, réduisons la taille de la photo de 40 pixels. Je pense que c'est nécessaire. Cliquez dessus en maintenant la touche Ctrl enfoncée et regardons-les. Trois sixièmes, passons à 320. Et pour leur carte de 70, passons à 430. Bien sûr, plus rien n' est aligné, mais nous savons que Shift nous aide à déplacer des objets, puis à augmenter les pixels. Nous avons donc besoin de quatre onglets. La question est de savoir s'il faut le redimensionner ? Non, mais comme je l'ai dit, je ne veux pas travailler dur et voir si je peux améliorer le design, si je peux l'améliorer encore. Et je trouve que c'est plus beau. Bien, quand vous serez prêt à partir, passons à l'écran pour commencer par le titre, sélectionner et appliquer le style de personnage appelé exactement comme cela par Bell. Pour la flèche de retour et l'icône d'information, elles doivent être de couleur orange. Excellente. Enfin, sélectionnons tous ces éléments et alignons-les correctement. Magnifique. En descendant, l'onglet actif doit également être orange pour que vous sachiez quoi en faire. OK. Le rectangle est désormais orange. Cool Pour les onglets. Eh bien, pour être honnête, je ne suis pas sûr. Commençons par le style du titre. Maintenant. C'est évidemment trop grand, mais nous pouvons le réduire à 26 pixels. Comme auparavant, les onglets inactifs reçoivent le traitement bleu. Il va donc falloir régler ce problème. Voici ce que je propose. Nous allons sélectionner tous les autres éléments et les placer dans un fichier texte distinct. Celui-ci doit être configuré et Nieto 26 comme avant, mais dans la forme normale, vous ne devez jamais modifier la taille de la police même si elle est inactive, ce n'est pas une bonne pratique uniquement le poids et la couleur. Quant à l'actif, il faut le rendre orange. Maintenant, voici le truc. Vous ne savez peut-être pas combien d'espace vous devez laisser entre les pâtes et les pizzas. Après tout, nous voulons le milieu, l'espace entre la pizza et le risotto, non ? Mais comme il s' agit d'une seule couche, vous ne pouvez pas savoir quelle est la distance réelle. Eh bien, voici le truc. Ajoutez le rectangle entre les deux et regardez la largeur. Une fois que vous avez cette valeur, c'est assez facile avec la couche sélectionnée, maintenez la touche Alt enfoncée et vérifiez la mesure existante. Ensuite, affinez-le à l'aide des touches fléchées. Peut-être change-toi et tu seras prêt à partir. OK, passons aux noms des plats. Eh bien, je pense que cela devrait être le même que l'onglet. Donc c'est du noir aiguille, 26 pixels, mais cette fois-ci, en bleu, ce que j'adore, c'est le fait que ce soit une grille, une grille répétée. Donc, tout change. Il est donc assez facile de juger de la taille. Vous pouvez facilement jouer avec elle. Mais j'en suis vraiment content. Pour la description, utilisons le style corporel. Nieto est une police plus grande que la police par défaut, mais je ne veux conserver que trois lignes de texte. Redimensionnez donc si nécessaire. Pour le prix et le temps d'attente, appliquons le style 26 titré et vérifions la position Wanted en bas alignée sur la vignette. Mais voici le truc. Il se peut que vous deviez le regarder. Il se peut que vous deviez l' approximer. Et c'est parce que cette police spécifique dispose de beaucoup d'espace supplémentaire en haut et en bas. Et tu ne peux rien y faire. L'alignement de deux mondes ne fonctionnera donc pas bien. Je pense cependant que le prix devrait être indiqué en orange. Oui, je pense que c' est bien mieux. Enfin, l'ajout au panier doit également être orange. Après tout, c'est une action qui doit se démarquer. Et croyez-le ou non, je pense que nous en avons fini avec cet écran. S'il y a autre chose que vous souhaitez modifier, c'est le moment. Par exemple, le poids du produit. Je ne suis pas sûr que ça mérite d'être si gros. Ce n'est pas si important. Faisons donc en sorte que ce soit en gras plutôt qu'en noir. Le fait est que le panneau Assets est absolument fabuleux. Et tu pourrais faire une entrée pour chaque petite chose. Comme vous l'avez peut-être remarqué. Mais je ne l'ai pas fait. Je n'ai pas ajouté tous les styles au panneau Ressources et c'est intentionnel. Je ne veux pas ajouter trop de choses et m'y confondre. C'est l'heure de faire une petite pause. Merci 31. Terminer le premier écran: Bon retour. Passons au premier écran, celui de localisation. Reprenons les choses par le haut et faisons sorte que nous soyons sur la même longueur d'onde. L'icône doit être 18180, d'un blanc pur. Placez-le à 80 pixels du bord supérieur. C'est une excellente occasion d'utiliser le champ y. N'oubliez pas qu'il s'agit de l'axe vertical et qu'il commence par le haut. Le nom de l'application, du live, doit être écrit. Composez-le de la manière suivante. Je pense à une unité entièrement noire, 70 pixels en blanc pur. Oh, au fait, je pense qu'il vaut mieux ajouter blanc et un panneau de ressources. C'est juste une chose rapide. Si nous déplaçons constamment notre souris dans cette zone, il est préférable d'avoir du blanc ici également. OK, maintenant je l' ai centré sur la toile. Et placons-la à une dizaine de pixels de l'icône, donnons-y. C'est alors le suivant. Je pense qu'on peut dire sans risque de se tromper que l'orange sera la couleur principale de l'action. Appliquons-le à ces deux boutons. Qu' en est-il du texte ? Eh bien, tout d'abord, changeons cela pour montrer aux restaurants ce qui est plus que significatif. Commençons par 26 titres et voyons ce que c'est, quelle taille en elle-même est assez correcte, mais c'est un peu trop gros pour cette petite taille. Passons donc en gras. Et en fait, cela fait une grande différence. Je ne suis pas sûr que vous puissiez le voir à travers l'enregistrement, mais croyez-moi, c'est assez substantiel. Vérifie sur ton téléphone et sur ce que tu vas être d'accord avec moi, d'accord. A centré le texte , puis le bouton. Si tu ne l'as pas déjà fait. Le problème que je rencontre ici est que la hiérarchie n'est pas claire. Alors réfléchissons-y. Nous avons trois actions disponibles, non ? Vous pouvez saisir l'emplacement puis un bouton d'envoi, sauter cette étape et passer à l'écran suivant, ou enfin au numéro trois, créer un compte ou vous connecter. En général, ces deux directions peuvent être considérées comme distinctes, connecter et s'inscrire, mais je vais les combiner pour faciliter les choses. Alors, comment s'y prendre ? Bien qu'il soit normal d'avoir deux boutons ayant le même niveau d'importance, je pense qu'il est préférable de les appliquer à style différent pour créer un compte. D'après ce que j'ai compris du brief, le processus d'inscription n'est pas si important. Vous pouvez visiter les restaurants sans vous inscrire. Cela signifie donc que les restaurants d'exposition sont la priorité. C'est la chose numéro un et cet écran. En tant que tel, rendons-le super large, 656. D'accord, nous devrions également augmenter sa hauteur à 90 pixels, juste pour qu'elle ressorte davantage. Au fait, j'ai de nouveau centré les textes. Pour le moment, le champ doit correspondre aux boutons que nous avons. Donc 656 aussi, les choses changent rapidement, mais souvenez-vous des barres aussi souvent que nécessaire. Pour le texte. C'est ce qu'on appelle officiellement un indice. Veuillez appliquer le style du corps du texte. Lorsque l'utilisateur touche le champ, la main s'en va, centre et laisse environ 30 pixels sur sa gauche. Ça devrait bien paraître, et je trouve ça plutôt sympa. Nos progrès sont décents, mais maintenons le rythme. J'ai interrompu l'enregistrement et j'ai cherché la jolie icône GPS. Ça y est, tu l'as attaché. La taille est de 28 x 40 pixels. Lorsque vous créez votre propre version, assurez-vous de trouver vos propres icônes. Faites-le en orange car vous pouvez appuyer dessus que l'application obtienne automatiquement votre adresse, placez-la sur le côté droit du champ et laissez 30 pixels sur cette droite. En parlant de 30, c'est ce que je veux laisser entre ces deux items. Sélectionnez donc le champ, indiquez le Nikon et regroupez-les. Cela permettra de le repositionner plus facilement si nécessaire. Comme je l'ai dit, laissez 30 pixels entre les deux et placez-les quelque part près du centre de l'écran. Prenez votre temps , déplacez-les et laissez X d vous aider. Bon, pensons que c'est la partie la plus importante de l'écran. Mais alors, quelle est la prochaine étape ? Je pense que la création d'un compte vient en second. Maintenant, nous pourrions aussi lui donner un bouton orange, mais je pense que cela va concurrencer les restaurants branchés. En tant que tel. Je pense qu'il vaut mieux le placer en bas de l'écran. Mais d'abord, allons-y, évitez cette étape pour le style. Allons-y. Augmentez la hauteur à 100 pixels pour ne pas la rater. Ce n'est pas vraiment énorme, mais c'est légèrement plus que le principal appel à l'action. Faites-en un fond noir pur dont l'opacité est réduite à 60 %. Pas de bordure pour ça, juste au cas où tu l'aurais toujours. L'idée est de lui donner beaucoup d'espace, mais sans trop le faire ressortir. C'est pourquoi j'ai choisi le noir et sa faible opacité lui permet de s'étendre sur toute la largeur de l'écran. Cela signifie 720 pixels. Alignez-le correctement et vous devriez maintenant voir où je veux en venir. Lorsque vous avez terminé, veuillez modifier le texte pour créer un compte ou connecter avec un C majuscule Toutes ces informations sont vraiment importantes en fin de compte. Enfin, envoyons le décalage rouge M, où M représente le milieu et Shift C avec C signifie Centre. Mais évidemment, vous devez faire sélectionner cela par les deux couches . De bonnes choses. Dans l'ensemble, il s'agit d'une bonne conception pour la réaction de deuxième année. Jetons un coup d' œil à notre design pendant une courte pause. Merci. 32. Un nouveau style de bouton pour avoir un bon flux: Bon retour. Il ne nous reste qu'un élément principal. Ignorez cette étape. Je vais utiliser quelque chose de nouveau. Commencez par un rectangle de 300 x 90 pixels. Conservez le rayon équivalent comme précédemment, soit cinq pixels. Cela ne fait aucun doute. Ne mélangez jamais ces valeurs. Vous en choisissez un et vous vous y tenez. Si vous ne l'aimez pas, changez-le à dix, mais vous devez le changer partout. Maintenant centré sur le tableau d'art. Et voilà, désactivez le remplissage. Ce que nous allons faire, c'est créer un bouton appelé bouton fantôme. Fantôme parce qu'il n'a pas de corps. C'est pourquoi nous désactivons le remplissage. Au lieu de cela, nous allons utiliser une bordure épaisse trois pixels, d'un blanc pur. Au fait, assurez-vous que votre orthographe est et que vous mettez chaque lettre en majuscule, la première lettre du mot, et que vous centrez tout correctement. Mais voilà le truc. Il se peut que le contraste par rapport à l'image d'arrière-plan ne soit pas suffisant, surtout si vous utilisez une autre photo. Bien sûr, nous pouvons augmenter l'opacité, mais même cela ne suffira peut-être pas. De plus, le plus important, c'est que lorsque vous n'avez pas de remplissage, ces boutons sont incroyablement difficiles à sélectionner. Il. Voici ce que je propose. Réactivez le champ pour le rendre noir pur, puis abaissez son opacité à environ 30 % de. Donc. Vous devrez peut-être activer le panneau des couches et modifier l'ordre de ces couches. Mais ce n'est pas un problème pour la touche Control Square Bracket. D'ailleurs, je déteste le fait de pouvoir voir la fois mon panneau de couches et mon panneau de ressources. Cela fait des années et je ne pense pas qu'il y aura bientôt des panneaux flottants. C'est vraiment dommage. Revenons au design. Analysons cela. Le logo est donc en haut. Vous y jetez un coup d'œil puis vous descendez en plein milieu, vous avez la zone principale où vous devez placer votre position. trucs géniaux et sympas. Il est grand, lumineux, il se démarque. Maintenant, la question est pouvons-nous ajouter d' autres détails supplémentaires pour le rendre encore plus beau ? Eh bien, une idée est d'inclure une icône à l'intérieur du bouton orange. Mais faisons plutôt quelque chose d'un peu plus intéressant, un effet de saignement. Sélectionnez donc le rectangle orange et activez une ombre tombante au cas où vous auriez une bordure, veuillez la désactiver. Nous n'en avons pas besoin pour la couleur. Nous ne voulons pas que l' ombre soit noire. Utilisez donc la pipette et sélectionnez cette orange. Sachez que vous ne pouvez pas utiliser le panneau des ressources dans ce cas. Pour les réglages. Je l'ai fait un million de fois. Voici donc ce qui fonctionne le mieux, cinq pour le champ Y et 15 pour le champ B. Enfin, réglez l'opacité à environ 60 %. Une fois que vous aurez désélectionné, vous verrez ce que je veux dire, un effet de saignement. En gros, c'est un effet semblable à un néon. Il se démarque beaucoup. Et c'est juste un détail supplémentaire que certains clients peuvent adorer, ou ils pourraient dire cela. Mais quoi qu'il en soit, je vais m'en aller parce que je suis calme. Apprécié. OK. Quoi d'autre ? Eh bien, je n'aime pas la position de sauter cette étape. Il ne fait que flotter. Nous pourrions le rapprocher, mais je préférerais ne pas me faire taper dessus accidentellement. Alors faisons-le plutôt. Obtenez l'outil de saisie, le raccourci clavier D et écrivez ou aiguille, en gras, 26 pixels, divorce blanc pur. Donc, ou comme alternative, centrez-le horizontalement et déplacez-le 50 pixels à partir du bouton orange. Maintenant, voici ce que nous voulons de la symétrie dans tous les cas, c'est quelque chose que vous devez toujours viser. Donc, si nous en avons 50 en haut, nous en avons besoin de 50 entre sauter cette étape et cet article ici. Maintenez la touche Alt et mesurez les Utilisez ensuite les flèches de votre clavier. Ok, ça prend forme, mais ce n'est pas fini. Fais bien la ligne, touche L. Faisons quelques calculs. Nous savons que ces gars mesurent 656 pixels de large. Je veux donc le diviseur ici, mais sans passer par ce mot, je pense que 50 pixels suffisent déjà. Alors allons-y. 656 -50 est 606/2, c'est 30 pour B. OK, donc faisons glisser une ligne et redimensionnons ensuite ces 303 pixels. Maintenez la touche Shift enfoncée lorsque vous ajoutez une ligne pour obtenir un 1303 droit, blanc pur. Les lignes ne sont pas remplies, alors n'essayez pas d'utiliser le panneau des ressources qui s'y trouve. Ça ne marchera pas. Faites-le blanc depuis le panneau des propriétés, bien sûr. Et pour l'épaisseur, je vais choisir deux pixels. L'un est un peu trop petit pour être aussi grand. Maintenant, dupliquez-le, faites glisser la touche Ctrl D ou Alt et placez-la de l'autre côté. Il devrait être assez facile à aligner. Vous avez ce bouton orange en haut, alors utilisez-le. Lorsque vous êtes prêt, centrez et regroupez le tout avec Control G. Et je pense que celui-ci prend vraiment le gâteau. Cela semble intéressant et aide l'utilisateur à naviguer dans ses options. OK, faisons une pause et nous ferons une analyse complète par la suite. Merci. 33. VUE D'ENSEMBLE: Bon retour et félicitations. Vous venez de terminer la première partie de notre application de livraison de nourriture. Je sais que cela a été un sacré voyage, mais j'espère que vous êtes arrivé à ce stade avec un minimum de mordage des ongles, jurons et de grattage de tête. Le processus est un peu difficile au début. Très similaire au puzzle de 1 000 ans avant notre ère. Mais au fur et à mesure que vous progressez, pièce par pièce, l'image entière devient plus claire et vous pouvez prendre de la vitesse. Je ne peux pas souligner la valeur des patients et du dévouement. Cette application de livraison est un projet du monde réel, quelque chose que vous pourriez rencontrer dans votre travail agence de design ou sur n' importe quelle plateforme indépendante. Je ne m'en vante pas, mais la plupart des tutoriels conçus ne vous montrent pas de rechute. Ce ne sont que de jolies photos et c'est tout. n'y a aucune idée ni aucune fonctionnalité qui les sous-tendent. Et c'est comme apprendre à faire du vélo alors le monde est rempli de monster trucks. Donc, même si le processus d'apprentissage est difficile, je suis fermement convaincu que plus l'entraînement est difficile, plus le combat est facile. Cela signifie que lorsque vous décrochez le poste, vous pouvez vraiment briller parce que vous avez suivi cette formation. Nous avons encore beaucoup de chemin à parcourir. Mais regardez où nous avons commencé une structure filaire, la mise en page, puis quelques expériences de conception, nous choisissons une police de caractères ou une palette de couleurs, et nous résolvons les problèmes réels en essayant d'adapter autant de restaurants et autant de plats que possible sans que l'écran ne soit occupé. Nous avons parlé du bon rapport hauteur/largeur pour les photos, la chaîne de commandement, c' est-à-dire de la hiérarchie. Nous utilisons des cartes, des icônes, diverses techniques de topographie et nous avons appris à utiliser le panneau des actifs. Encore une fois, du fond du cœur, félicitations pour être arrivée jusqu'ici. Reste avec moi et tu feras encore mieux. Mais le premier écran est probablement le plus délicat. En effet, vous pouvez saisir votre position dans ce champ, mais vous pouvez également utiliser le GPS de votre téléphone. Vous pouvez également ignorer cette étape. Et l'application vous montrera les restaurants du labo, juste de la ville. Tout cela se trouve dans le brief et j'espère que vous l'aurez lu. Enfin, vous pouvez vous inscrire ou vous connecter. Savoir structurer toutes ces actions n'est pas une blague. Ce n'est pas une mince affaire. Nous les avons triés en fonction de leur importance , puis nous avons pris des décisions de conception en conséquence. C'est pourquoi nous utilisons le bouton fantôme, c' est pourquoi nous avons réduit l' opacité de ce rectangle. Dans l'ensemble, encore une fois, félicitations, travail fantastique pour être arrivé ici. Je te vois dans une seconde.