Créer un tableau de bord SaaS dans Figma : une masterclass complète sur un projet de conception d'UI

1. Bienvenue dans la masterclass sur le tableau de bord SaaS de Figma !: Bienvenue dans le cours Figma Project SAS Dashboard. Si vous avez déjà appris quelques notions de base de Figma et que vous souhaitez découvrir comment les concepteurs d'interface professionnels abordent les projets du monde réel, ce cours est fait pour vous Bonjour. Je m'appelle Ahmal Hasan et je suis un concepteur UIUX avec plus de quatre ans d' expérience dans la conception d' expériences et de produits numériques, d'applications Web et applications Web Dans ce cours, je vais vous expliquer exactement le même processus de création d' un tableau de bord SAS moderne à partir de zéro. Tout comme les cours basés sur la théorie, ce cours est entièrement basé sur des projets. Nous allons prendre un brief de conception et le transformer en une interface utilisateur entièrement professionnelle de bord ASAS en utilisant un flux de travail très professionnel Nous commencerons par planifier le projet, comprendre les besoins des utilisateurs, créer des mises en page et des croquis de base, ainsi que par établir une orientation de conception Ensuite, nous allons concevoir le tableau de bord pièce par pièce, depuis la navigation et les en-têtes jusqu'aux cartes et aux panneaux d'activité, les différents boutons et la visualisation des données En cours de route, vous apprendrez à créer des composants réutilisables, établir une cohérence visuelle et à organiser efficacement votre travail. Nous explorerons également le prototypage, les micro-interactions et les animations Des choses qui donnent vraiment vie à votre design, rendent plus réaliste et interactif. À la fin de ce cours, vous aurez conçu une interface de tableau de bord SAS complète qui pourra devenir un élément précieux de votre portefeuille tout en vous apportant une expérience pratique sur un projet de conception courant. Passons donc à la construction. 2. Comprendre le tableau de bord SaaS en bref.: Bonjour, et bienvenue dans l'une des premières leçons de ce cours où nous allons concevoir un tableau de bord SaaS ou un tableau de bord logiciel en tant que service. Dans cette première leçon d'introduction, nous allons donc discuter de ce que nous allons développer dans le cadre de ce cours de projet. Et c'est exactement ce que c'est. Nous avons un cours dans le cadre duquel nous élaborons un projet ensemble, et je vous montre étape par étape comment nous pouvons nous y prendre. Il est très important de comprendre ce que nous construisons ou ce que nous concevons. Nous le concevons pour quelles sont leurs fonctionnalités requises. Passons-les en revue très rapidement. Il s'agit essentiellement de notre brief de projet. C'est quelque chose qui pourrait être beaucoup plus vaste, mais je le réduis au minimum pour les besoins de ce cours Une question très simple est que concevons-nous ? Il s'agit d'un projet fictif, mais nous concevons essentiellement un logiciel de gestion de projet sous la forme d'un tableau de bord de service appelé flow desk pour les petites équipes créatives. Il s'agit d'un tableau de bord que nous proposons aux membres de différentes équipes et entreprises, auquel les chefs de projet peuvent accéder et gérer leurs projets, leurs équipes, etc. Cela nous amène à la question suivante : qui s'adresse-t-il exactement ? Quel est notre public cible et quelle est notre base d'utilisateurs ? La réponse est que l'utilisateur principal est un chef de projet qui a besoin de voir rapidement l' avancement du projet, les tickets en retard Dates limites et activité de l'équipe. Ils doivent donc tout contrôler. Ceci n'est pas destiné à des membres spécifiques de l'équipe. Ce n'est pas pour la haute direction, le patron de votre patron. Cela est strictement réservé au chef de projet. Ils doivent donc avoir des données spécifiques à l'esprit, et nous en arrivons maintenant aux fonctionnalités requises. Ce qui doit être inclus dans ce prototype pour être suffisant. C'est ce que nous pensons et il n'est pas nécessaire que ce soit tout, mais juste certaines choses, des fonctionnalités qui peuvent être nécessaires. Le chef de projet doit donc être en mesure de vérifier l'état des projets actifs. Il ne s'agit donc pas de projets antérieurs, mais de ceux qui sont actuellement actifs. Et puis, en voyant rapidement les chiffres ou les statistiques importants, ils doivent comprendre : combien de temps prend chaque membre de l'équipe par ticket ? Combien de temps prend chaque projet avant d'être clôturé ? Combien de projets sont ouverts, combien sont fermés ? Qu'est-ce que l'efficacité ? Ils doivent comprendre ces choses. Ils devraient alors être en mesure de trouver les tâches urgentes et en retard Ils doivent être soulignés. Qu'est-ce qui est dû aujourd'hui ou demain ? Ils devraient être en mesure de revoir travail d'équipe et de réorganiser charge de travail de l'équipe afin qu' aucun membre de l'équipe n' ait trop ou pas assez à faire. Ensuite, bien entendu, accédez aux projets, tâches, aux rapports et aux paramètres. Ce ne sont là que quelques éléments de base qu'ils devraient pouvoir avoir. Juste pour vous donner une idée très rapide de ce que je veux vraiment dire, quelque chose de similaire . Voici les tableaux de bord. Ce sont des configurations très complexes. Ils ne sont pas vraiment faciles, cela va être un défi et ils sont composés de nombreux éléments. Il contient de nombreuses statistiques, y compris des graphiques, vous indiquent que le projet est bloqué et que la révision est terminée, puis cela vous donne la charge de travail hebdomadaire indiquant le nombre de tâches en cours, puis il y a aussi quelques chiffres, total des tâches terminées, le total des tâches par client, etc. Mais en plus de cela, vous avez quelques boutons supplémentaires tels que l'activité. Vous avez des notifications, des discussions, un historique et vous avez ce menu latéral où vous et vous avez ce menu latéral où vous avez de nombreuses options et pages différentes. Il vous montre ici, je suppose, les statistiques de croissance, mais cela pourrait aussi être un tableau de bord. Ensuite, il y a les projets, les feuilles de temps, l'automatisation, l'intégration va falloir prototyper toutes ces différentes options. Cela n'a pas besoin d'être aussi compliqué que ça. Mais l'essentiel est que cela devrait donner un très bon aperçu de ce qui se passe, et nous n'allons pas faire chaque page. Nous allons simplement créer le tableau de bord lui-même. Voici un autre exemple de meilleure qualité. Mais c'est le même principe. Vous avez ce menu latéral. Vous avez vos paramètres, vos tâches de déconnexion, vos projets, etc. Ensuite, vous avez ici un aperçu un peu plus simple. Ce tableau de bord vous indique : OK, voici les tâches que vous avez actuellement ou les tâches principales. Voici l'objectif mensuel. Voici les statistiques du projet. Vous pouvez consulter pendant 12 mois, 30 jours, etc., ainsi qu'un résumé du projet, un aperçu du projet. Cela dépend vraiment de ce que vous pensez être important pour l'utilisateur de voir. C'est quelque chose que nous allons faire dans les prochaines leçons où nous allons dessiner, prototyper et créer des Cela implique de comprendre et de déterminer quel est le problème et quelle devrait être notre meilleure solution. Quelles données devons-nous montrer à nos utilisateurs, en gros ? C'est quelque chose dont nous parlerons lors de la prochaine leçon. Merci de m'avoir écouté. Je te verrai dans la prochaine leçon. 3. Sketching the Dashboard Layout: Nous avons donc maintenant une idée générale de ce que nous voulons construire, et maintenant nous devons l'affiner un peu en esquissant Maintenant, je vais utiliser Fig Jam, que j'utilise en ce moment pour ce brief, et c'est très simple. Nous pouvons soit utiliser l'outil Stylo et essayer de créer quelque chose avec celui-ci, soit utiliser certaines de ces formes également. Je vais utiliser quelques formes ici et là juste pour vous faciliter la tâche, puis jouer un peu avec les stylos. Nous avons ici notre cadre. Ce sera notre premier écran. Et, pour être honnête avec vous, je ne pense pas que nous puissions aller aussi loin pour créer quelque chose de complètement différent du tableau de bord normal. C'est tout à fait normal et normal de copier la mise en page générale. Cela dit, je pense que nous pouvons créer en toute sécurité une zone ici pour notre connexion. Nous pouvons avoir quelques cercles ici, afin que vous puissiez avoir votre compte ou quelque chose comme ça. Vous pouvez avoir vos notifications et votre historique, certains paramètres de ce genre. Je mettrais aussi une recherche peut-être ici. Je mettrais une fonction de recherche ici et nous aurions alors ici et nous aurions alors notre menu latéral, mais il serait réduit. Je veux créer une version où il est réduit, et lorsque vous le survolez, il ira vers la droite Voici quelques icônes. Je vais donc simplement dessiner quelques carrés ici. Il s'agit de votre menu latéral et vous avez peut-être vos paramètres ici. Et oui, il suffit de le survoler pour qu'il s'étende. Ensuite, nous aurions notre tableau de bord. Cela nous permettrait d'avoir beaucoup plus d'espace dans le tableau de bord. Pour être honnête, je me demandais ce qui serait cool et je pense peut-être à Spotify. Spotify a un très beau design de fenêtre, c'est une fenêtre. Il y a différentes sections et tout le reste. J'essaie de créer quelque chose de similaire. Je pense que ce que nous pourrions faire, c'est avoir une section ici et cette section comporterait essentiellement plusieurs tickets. Donc, il vous montrerait essentiellement les billets les plus urgents ou les plus récents, les plus récents ou quelque chose comme ça. Au fait, nous pouvons l' annoter. Ce serait formidable si nous pouvions simplement indiquer billets urgents, et peut-être qu'en dessous, il y aurait les billets les plus récents Donc, juste pour qu'ils puissent avoir un aperçu très clair de ce qui va arriver, de ce qui est urgent, de ce qui doit être fait aujourd'hui. Et puis, comme nous l'avons mentionné ici, nous aurions un profil ou écrivons-le comme ceci : historique, notifications, profil, et d'abord, nous avons le droit de recherche ici. Et puis voilà, côté pliable. Nous avons maintenant le plan général, et ce ne sont que des éléments secondaires, mais nous devons maintenant parler du beurre et du pain de toute cette opération, ces petits tickets, ces petites sections. Et ils ont presque toujours la même configuration. Vous savez, vous avez ces sections qui sont soulignées ou colorées, remplies, puis vous avez des informations. Et on utilise toujours des icônes de couleurs pour indiquer, vous savez, qu' y a urgence ou peut-être que vous avez mis à jour l'heure, et là vous avez des signes de baisse, de hausse, de diminution, d'augmentation, etc. Nous n'allons donc pas encore en parler , mais je pense que nous pourrions avoir une très grande fenêtre ou une section, et cette section nous permettrait comprendre certaines choses à l'aide de graphiques. Donc, pour vous montrer les tâches terminées et les tâches éventuelles. Ici, je vais annoter ceci et indiquer les statistiques des tâches terminées, tâches en retard, etc. Et puis je pense nous pourrions avoir soit des chiffres, donc nous pourrions avoir un chiffre Oups, puis une explication, un chiffre, une explication, similaire à ceci ici Mais au lieu de faire six choses différentes, je veux en faire trois ou nous pourrions faire un cercle, un graphique circulaire, vous savez, un graphique circulaire ou quelque chose comme ça pour montrer ce qui se passe. Mais c'est la première section, et ensuite j' aimerais en faire une découpe ou la différencier. Ensuite, j'aimerais avoir plusieurs sections qui montrent les choses plus en détail. Ensuite, nous pourrions ajouter un graphique, quelque chose comme celui-ci, éventuellement. D'accord, nous avons donc un graphique, et nous aimerions avoir plus d' informations sur les membres de l'équipe, peut-être. Je pense que ce serait vraiment bien. Et peut-être que quelque chose comme ce graphique à barres est également très intéressant, car il vous donne une meilleure vue d'ensemble. Cela pourrait donc vous montrer différentes personnes et ce qu'elles font, etc. Et oui, voyons voir. Ce n'est donc qu'une idée, mais je pense que j'aimerais avoir quelques sections supplémentaires. Je ne sais donc pas ce qu'ils seraient, mais ils vont être coupés ici. Et oui. Je ne sais toujours pas avec quel type de grille je souhaite travailler, mais je pense que j'aimerais rester flexible avec ces boîtes à bento Donc, comme vous pouvez le voir ici, c'est très simple. Par exemple, vous avez cette grille comme ceci et comme ça. Mais ici c'est différent. Il est découpé de différentes manières. Vous avez donc ici cette carte qui occupe deux espaces et ici chacune occupe une place, et ici vous avez quatre cartes différentes. C'est différent, mais nous allons jouer avec et voir ce qui en ressortira. Mais comme je l'ai dit, comme je l'ai mentionné, nous ne réinventons Nous ne réinventons pas la roue. C'est à peu près la même chose, mais nous essayons simplement de comprendre en quoi nous voulons le rendre différent. petits détails sont parfois importants, l'endroit où vous voulez placer la recherche, où vous voulez placer le profil, ou le fait que nous ayons un guichet d'urgence. Peut-être que j'aimerais même mettre quelque chose en bas de page qui vous permettra de vous concentrer sur une tâche ou peut-être, en fait, laissez-moi voir ce que je peux faire ici. Essayez de les supprimer. Alors peut-être qu' ici, comme Spotify, je vais m'en aller. Nous pourrions avoir une question de concentration ici et peut-être que nous aurions une sorte de situation de type Pomodoro , un contre-Pomodoro Donc, en gros, vous diriez : « OK, je suis chef de projet ». Je gère tout en même temps, et c'est beaucoup, mais je veux continuer à m'occuper de quelque chose pour me concentrer sur une tâche à la fois. Parce qu'il est très facile de se perdre dans la sauce, surtout lorsqu'il s' de tant de choses différentes. Donc, garder quelque chose ici en dessous pourrait peut-être vous permettre de rester concentré. Alors oui, c'est notre sketch. C'est très basique et primitif, mais c'est exactement ce que nous voulons. Nous n'inventons encore rien. Nous essayons juste de nous en faire une idée. Je vous verrai donc dans la prochaine leçon. 4. Configuration des cadres, des grilles et de la direction du design: Dans cette leçon, nous allons donc essayer très rapidement de déterminer l'orientation de notre conception et de créer le premier cadre, et peut-être définir des directives, des grilles, tout ce qui nous aidera vraiment à établir les bases de la mise en page Donc, tout d'abord, je suis déjà allée l'avant et j'ai préparé de petites choses. L'un d'eux est juste un logo très simpliste, pas très poli avec un F et un D. C'est très simple, mais c'est essentiellement comme un flow desk Et oui, c'est écrit essentiellement comme ça. Ce sera donc plus ou moins notre suppléant. Nous pouvons le retoucher, pas de problème. Et puis nous avons nos couleurs ici. Nous avons donc notre primaire, qui est ce type de bleu foncé mélangé à ce gris foncé. Ensuite, nous avons ces autres couleurs, des accents que nous pouvons utiliser. Nous avons ce jaune orangé ainsi que ce rose. Ce ne sont que quelques couleurs de base que j'aimerais utiliser pour le moment, mais nous pouvons travailler dessus au fur et à mesure, mais juste pour avoir un peu de base. Comme vous pouvez le constater, j' aimerais juste vous faire savoir que, comme il s'agit d'un projet fictif que nous allons exécuter plus ou moins rapidement dans les 2 prochaines heures, la configuration ici est très basique. Mais si vous deviez réellement concevoir un tel site Web, un tel programme ou un tel tableau de bord, vous auriez besoin de bien plus que cela. C'est très simple, il ne faut le faire ainsi que parce que nous allons aller de l'avant et l'étendre . Ce sera un très petit projet pour le moment. Pour la typographie, comme pour la police, nous avons Geist comme police, une police très simple qui peut être utilisée de manière très flexible C'est notre orientation de conception très générale, il s'agit donc d'une feuille de style très simpliste à utiliser en cours de route Maintenant, allons-y et créons nos cadres. Vous allez passer à votre outil de cadre , nous allons choisir un ordinateur de bureau et un Mac Pro 16 pouces. Donc, juste comme ça, nous avons créé ce cadre, et c'est sur celui-ci que nous allons travailler principalement. Alors maintenant, allons-y et configurons quelques grilles. Personnellement, je ne suis pas un grand fan d'eux, mais ils peuvent être très utiles au début pour avoir un petit guide sympa. Nous passons donc au guide de mise en page et nous ajoutons des colonnes. J'aime bien avoir quelques chroniques. Et ce que nous allons faire, c'est dire : faisons-en quatre. Je ne veux pas plus de quatre cartes, et je vais ajouter une marge pour le moment, puis le caniveau ira bien pour le moment Il s'agit de notre disposition très générale. Maintenant, gardez juste à l'esprit que sur la gauche à droite, nous allons avoir, je vais juste le colorier. Nous allons avoir notre barre latérale quelque part ici. OK. Et en même temps, nous allons avoir la gauche sur la droite, nous allons avoir, vous savez, des billets, donc des billets urgents et ainsi de suite. Gardez donc cela à l'esprit. Mais pour être honnête, je veux créer notre design comme celui-ci , puis ajouter la section Ajouter ce commentaire un peu plus tard. Donc oui, de cette façon, nous pouvons nous concentrer sur le contenu du milieu, puis nous pouvons ajouter notre petite fonctionnalité de commentaire ou de tâche sur la droite un peu plus tard. OK ? Je vais donc juste les supprimer pour le moment. Voici donc à quoi ressemble la configuration générale actuelle, et nous allons commencer à en tirer parti dans les prochaines leçons. Je te verrai dans les prochaines leçons. 5. Creating the Sidebar Navigation: Maintenant, allons-y et créons notre zone d'en-tête ici, tous les éléments que nous avions dans notre croquis, les notifications et le profil de l'historique de recherche . Nous n'allons donc pas trop compliquer les choses, mais nous allons simplement le créer très simplement Maintenant, afin de créer les notifications d'historique, je vais commencer par celles-ci. Et pour ce faire, je veux créer des boutons. Je vais donc créer un seul composant, et je vais écrire A ici. Je vais en faire une police géniale. OK, font awesome seven. Vous ne savez pas qu'il s'agit d'une police qui crée des icônes. Par exemple, nous avons ici icônes de notifications. C'est une cloche. Nous tapons simplement la cloche et nous l'avons là. Nous allons faire en sorte que ce soit une taille 20, et nous allons maintenir la touche Maj enfoncée et A pour en faire une mise en page automatique, et nous allons nous assurer que la largeur et la hauteur sont les mêmes, puis nous allons simplement verrouiller le rapport hauteur/largeur. avons donc ici. Voici la police. Je vais le centrer, et je vais appeler ça un bouton. Ou un bouton d'icône. Ensuite, nous allons essentiellement en faire un composant. Allons-y, et nous allons le remplir. Donnons-lui une couleur. Nous allons le rendre régulier comme ça. Et nous allons lui donner quelques coins dorés. Huit, c'est peut-être suffisant. Nous avons donc ici notre bouton icône. Je vais donc l'ajouter, le coller ici, et voici cette cloche. OK ? Ensuite, nous pouvons le copier, puis créer les boutons d'historique pour voir si nous pouvons obtenir l'historique ou le répéter ou quelque chose comme ça. Nous allons donc sur le site Web, Font Awesome, et nous pouvons trouver celui que nous voulons, rotation de l'horloge vers la gauche. Nous allons donc simplement le coller ici. Et nous constatons qu'il n'est pas disponible sur Solid. Nous pouvons donc faire en sorte que nous revenions en arrière. Nous allons faire de tout cela un solide. Maintenant, nous avons ces deux et nous pouvons augmenter la taille, nous pouvons changer certaines choses, nous pouvons en faire 24 à la place. Maintenant, nous avons ces boutons ici, puis nous avons besoin d'une recherche. Je vais créer un cadre ici, lui donner certain rayon et le créer comme ça. Ensuite, je vais juste y mettre du texte et dire « rechercher ». Je vais avoir une icône assez pratique ici , puis du texte publicitaire. Je vais choisir les deux. Et nous y voilà. Je vais juste m'assurer qu'il est suffisamment sombre pour être lisible. Ensuite, je peux transformer tout cela en une mise en page automatique et l' étendre un peu, bien sûr, au final, nous avons la photo. Pour la photo, nous pouvons simplement aller de l'avant et rechercher sur les pexels n'importe quelle photo d' Bon sang, la femme n'a pas vraiment d'importance. Allons-y et choisissons n'importe quelle personne ici. J'ai juste besoin d'une belle photo de leur visage. Copiez-le, collez-le, et je vais créer un cercle. Je vais juste copier le remplissage, coller ici, puis je vais le recadrer pour pouvoir centrer un peu son visage ici. Je pense que c'est suffisant. Nous pouvons lui donner quelques bordures si vous le souhaitez, juste pour nous assurer qu'il sera remarqué ou quelque chose comme ça. Maintenant, ce que nous allons faire, c'est conserver tous ces éléments et les mettre dans une mise en page automatique. Voyons à quoi cela ressemble en ce moment. Je pense que la taille est correcte. Nous pouvons aller de l'avant et même le réduire un peu. Voyons à quoi cela ressemblerait sur un MacBook. OK. Maintenant, en le regardant réellement sur un MacBook, il n'est pas si gros du tout. C'est plutôt bon. Donc oui, nous pouvons continuer. Maintenant, nous devons également inclure nos logos. Je vais juste le copier. Je vais le coller ici. Je vais juste y retourner. Assurez-vous que tout est inclus. Copiez-le, collez-le ici. Ensuite, avec K, je vais le redimensionner. K redimensionne tout d'une manière agréable pour que rien ne soit disproportionné. Donc c'est plutôt bon. Ensuite, je vais l'ajouter ici. Et ce que je vais faire, c'est inclure tout cela dans un seul cadre. Donc, une mise en page automatique, encore une fois, en utilisant Shift et A, et maintenant c'est terminé. Ce que je vais faire, c'est étendre cela jusqu'au bout, et je vais en donner 36 ou peut-être 24. Je vais aussi le remplir juste pour être en mesure de savoir où il va. Et je vais lui donner un peu rembourrage à droite et à gauche Voici ce qui est sympa. Je vais les choisir à nouveau. Je vais les souligner. Je vais créer une mise en page automatique dans une mise en page automatique, mais je vais peut-être lui donner un maximum si nous le souhaitons. Si vous le souhaitez, vous pouvez lui donner un maximum et le centrer. Et de cette façon, il resterait ici au milieu. Donc, même si l'écran est vraiment large, il le restera jusqu'ici. Cela ne va pas aller bien au-delà. Mais nous n'en avons pas vraiment besoin en soi, à mon avis. Donc, restons-le comme ça, et nous allons prendre le remplissage et le rendre blanc. Et oui, juste comme ça, nous avons un joli petit en-tête. Bien entendu, nous pouvons l'étendre. Nous pouvons y ajouter d'autres éléments. Mais pour l'instant, ça semble plutôt bien. Nous pouvons, bien sûr, modifier les petites choses comme l' espacement au lieu de 22, cela pourrait être 24, et c'est à peu près tout la prochaine leçon, nous allons essayer de créer la barre latérale ou le menu latéral. 6. Designing the Header and Search Area: Donc, depuis la dernière leçon, j'ai ajouté ce petit truc à partir d'un kit d'interface utilisateur juste pour lui donner un aspect plus réaliste. Donc juste pour ça, tu sais, surtout avec cette encoche. Alors maintenant, il semble que nous soyons en fait sur un site Web. De cette façon, nous pouvons mieux savoir où se trouveront nos en-têtes et combien d'espace cela va prendre Au lieu que ce soit juste ici, vous pouvez voir qu'il ne me reste plus beaucoup d'espace maintenant. Donc, soit vous redimensionnez l'en-tête, soit vous le conservez tel quel et vous vivez avec, c'est à vous de décider Mais de cette façon, nous avons une meilleure compréhension de la taille des objets ou des éléments de design dont nous disposons Mais je pense que pour le moment, ça a l'air bien. Dans cette leçon, nous allons concevoir le menu latéral, ce qui ne sera pas une tâche facile. OK, alors gardez cela à l'esprit, s'il vous plaît. Pour ce faire, j'aimerais créer un autre composant. Nous allons donc commencer par créer ces boutons spécifiques. Bien sûr, nous pouvons nous appuyer sur ce composant lui-même, mais je pense qu'il serait bon de pouvoir créer des composants complètement différents. Je viens de le copier, je l' ai collé ici et je vais détacher l'instance Au lieu d'être un bouton icône, je vais dire bouton de menu, et nous allons en faire un composant à part entière. Maintenant, ce que nous voulons essentiellement, c'est avoir un bouton avec une icône, mais aussi du texte. Ce texte, permettez-moi de l'ajouter ici. Je l'ai copié ou coupé, collé. Nous allons le rendre horizontal. Et nous n'allons pas bloquer le rapport hauteur/largeur. Nous allons le serrer dans nos bras. Ensuite, nous allons cliquer œil contre œil pour faire tomber cette couleur. Nous avons donc maintenant un article. Cet article pourrait être, je veux dire, pour le moment, il est écrit SFP, qui est la police d'Apple, mais ce n'est pas ce que nous voulons Nous voulons dire qu' il s'agit, par exemple, tableau de bord, de notre bouton de tableau de bord. Donc, une chose que nous pourrions faire, c'est, je veux dire, voyons à quoi ça ressemble ici, plutôt beau, mais peut-être pourrions-nous c'est plutôt beau, mais peut-être pourrions-nous l' agrandir encore, pour être honnête. Nous pourrions agrandir un peu l'icône. C'est un peu trop gros. Et nous agrandissons la police. Il pourrait y en avoir 20 au moins. Ou faisons cela, ramenons cela à 24 et à ce 24 également. Ensuite, nous donnerons ce 616. Et oui, voyons à quoi cela ressemblerait ici. Je vais juste le coller ici et je vais créer différentes versions. Je vais tous les mettre dans une mise en page automatique, revenons sur notre site Web et voyons ce que nous pouvons ajouter au tableau de bord. Vous pouvez le filtrer et le rendre uniquement gratuit, et nous verrons ce qui nous convient le mieux. Par exemple, cela pourrait être mieux pour le tableau de bord, pour être honnête, n'est-ce pas ? Et puis nous avons d'autres points qui concernent les projets , le calendrier des tâches, puis les rapports et les paramètres des équipes. Rapports d'équipe. Maintenant, nous allons devoir l' aligner à gauche, et nous allons faire la même chose ici. Nous y voilà. Maintenant, il est aligné à gauche pour chacun d'entre eux. Et nous allons juste devoir trouver les icônes pour chacune d'elles. Mais voyons à quoi ça ressemble en ce moment. Je veux dire, pour être honnête, ça n'a pas l'air trop mal. Peut-être que nous avons besoin d'un peu plus d' espacement entre eux. Mais à part ça, je pense que c'est une bonne façon de les énumérer. Nous pouvons donc vérifier, bien sûr, les autres modèles sur lesquels nous nous basons, afin que nous puissions venir ici et voir comment ils l'ont fabriqué Le leur est peut-être un peu plus petit. C'est ce que je dirais. C'est quelque chose que nous pouvons essayer de faire, mais le fait est que nous n'avons pas beaucoup d'objets ici. Alors revenons en arrière, voyons à quoi ça ressemble. Alors peut-être que nous pouvons réduire un peu la taille de la police , peut-être que non. Faisons donc un 20 afin réduire un peu l'espacement C'est bon. Voyons donc si nous pouvons le rendre régulier. Le problème avec la version normale est que les polices n'ont pas toujours l'option normale lorsque vous êtes sur le plan gratuit avec cette icône. Donc, avec cette solution d'icônes, nous allons simplement la garder comme ça. Je pense que ça a l'air bien, et nous avons juste besoin de remplir les icônes. Et une chose importante est que lorsque vous l'avez, vous devez créer une autre variante. Dans cette variante, le texte doit être masqué, il suffit de le rendre invisible, de le masquer, puis vous avez deux versions différentes, vous pouvez toutes les conserver. Et puis vous pouvez avoir la version avec ou sans icônes, d'accord ? Comme nous l'avons mentionné, nous voulons créer deux versions différentes, l' une normale et l'autre réduite. C'est donc essentiel pour y parvenir. OK ? La façon de procéder consiste donc à créer deux versions différentes à partir de ce menu. Je ne l'ai pas encore complètement configuré. Nous avons toujours besoin d'un bouton ici, alors ajoutons simplement un bouton de paramètres. Mais avec le bouton des paramètres, nous voulons qu'il soit à peu près bas Je vais juste écrire le matériel, puis les paramètres. Nous voulons donc que ce soit ici. Séparez simplement. Nous allons donc en faire une mise en page automatique et la distance devrait être automatique. Maintenant, nous l'avons comme ça et nous nous assurons qu' il se répand complètement. Ensuite, nous allons nous assurer que l'espacement est correct, donc nous en avons peut-être 24 d'ici et de là, puis le rembourrage de haut en bas, de gauche à droite devrait être de 24, et maintenant cela semble plus normal Maintenant, nous allons le retirer et lui donner peut-être un arrière-plan, puis en faire un composant et nous allons dire menu latéral ou barre latérale Ce que l'on appelle une barre latérale. Cette barre latérale aura deux versions qui ne comporteront que des icônes, pas de texte Nous allons le faire en choisissant tous les éléments ici. Il ne nous reste plus qu'à choisir chacun de ces éléments ici et nous allons mettre la deuxième variante. Nous pouvons en changer le nom. Alors ce que nous allons faire, c'est venir ici et tout faire échouer. Nous allons l'effondrer. De cette façon, avec nos icônes, il sera configuré de manière à prendre beaucoup moins de place. Voyons donc et testons-le. Je vais juste le coller ici et le placer là où il devrait être. Voyons à quoi ça ressemble maintenant. Boum. Tu vois ? Maintenant, il prend beaucoup moins de place. Nous pourrions aller plus loin et même diminuer le rembourrage, honnêtement, de droite à gauche, juste comme ça Mais nous devons juste nous assurer que tout va bien ici. Fais-le dans tes bras et c'est parti. Voici à quoi ressemble notre barre latérale en ce moment. Bien sûr, je dois remplir les icônes et modifier certaines choses, mais c'est ainsi que cela fonctionne, et nous allons continuer sur ce point un peu plus tard. Nous allons créer le mécanisme dans lequel vous cliquez sur le bouton. Nous ne l'avons pas encore fait, mais nous allons le créer plus tard. C'est bon. Rendez-vous dans la prochaine leçon. 7. Building Dashboard Cards and Stats Blocks: La section des cartes. C'est dans cette section que nous allons voir les cartes et le tableau de bord proprement dit. Donc, le vrai contenu. Au fur et à mesure que nous commencerons à le concevoir, j'aimerais en quelque sorte jeter un œil à Spotify. Je vous ai déjà dit que c'est ce que j' essaie de rechercher en ce moment dans ce design parce que j'aime vraiment la façon dont ils le font. Vous savez, Spotify est une entreprise qui a reçu de nombreuses critiques à propos de sa mise en page, peut-être parce qu'elle est trop complexe ou quelque chose comme ça. Mais je l'aime vraiment beaucoup. Vous avez votre en-tête ici, votre recherche avec votre profil et d'autres choses. Et c'est très similaire, tu sais. Et puis sur la gauche, vous avez ici votre playlist. Vous avez différentes choses, comme un accès rapide. Et voici leur tableau de bord. Vous avez le choix entre plusieurs options différentes. Vous avez des curseurs et ainsi de suite. Et ici, vous avez votre joueur qui vous accompagne toujours. Et sur la droite, vous avez une section qui vous montre davantage la chanson que vous écoutez , le générique de l'artiste, etc. Donc, ce qui est plutôt cool, c'est que si vous y jetez un œil, s'agit pas d'une section différente. On dirait que c' est une fenêtre, non ? exemple, il s'agit d'une fenêtre et vous jetez Par exemple, il s'agit d'une fenêtre et vous jetez un coup d' œil dans le tableau Ce que font habituellement les entreprises, c'est donner l'en-tête l' impression qu'il se trouve au-dessus. Ensuite, vous avez ce menu et il est également en haut. Il y a beaucoup de choses les unes sur les autres. Mais au lieu de cela, ce qu'ils font ici, c'est donner l'impression que l'en-tête est connecté à cette partie, qui est également connectée au lecteur et que vous n' avez que deux fenêtres. Ce qui est cool, c'est que vous pouvez redimensionner ces fenêtres. Vous pouvez les prendre vers la droite ou gauche. Et c'est pareil ici. Vous pouvez le redimensionner, puis vous pouvez voir les noms complets ou vous pouvez le reprendre, etc. C'est exactement ce que je recherche ici. Je veux un look si simple, propre et moderne qu'il ne donne pas l'impression sont tous des éléments superposés, mais plutôt qu' il y a une fenêtre, et cette fenêtre vous montre les options, non ? Je vais masquer le guide de mise en page pour l'instant juste pour que nous puissions y voir plus clair. En fait, je vais prendre la mise en page ici, le guide de mise en page, et je vais l'ajouter à ce cadre. Je vais y remédier un peu. Donc, juste pour vous donner une idée de ce que nous voulons faire. Donc, si je le fais, c'est parce que je veux que le guide soit là parce que nous voulons créer la disposition des bento ici , d'accord ? Mais cachons-le encore une fois pour le moment. Alors maintenant, comme vous pouvez le voir, c'est exactement ce dont je parle. Nous avons donc essentiellement cette fenêtre qui nous montre les cartes, cette zone, et tout le reste semble assez normal. Ça a l'air connecté, tu sais, ce qui est vraiment fluide. Et plus tard, nous ajouterons également la section des commentaires ou la section des tâches ici. Donc, comme pour la mise en page avec Spotify, d'accord ? Ensuite, nous aurions le contrôleur ou la tâche en cours que nous effectuons actuellement, et nous y reviendrons plus tard. Mais pour l'instant, concentrons-nous. Alors maintenant, nous avons une mise en page assez soignée ici. Allons-y et voyons ce que nous pouvons faire ici en termes de cartes. Donc, comme je l'ai mentionné, nous allons avoir différentes mises en page pour différentes cartes Mais ce que nous pouvons faire, cependant, c'est essayer de créer une mise en page très basique. Alors jouez avec les tailles et ainsi de suite. Alors pour le moment, voici à quoi ça ressemble. On peut tout gâcher. Je pense que c'est trop d'espacement. Peut-être que nous pouvons 24 et que nous pouvons aussi fabriquer la gouttière 24. Nous pouvons également ajouter quelques lignes. Alors maintenant, comme vous pouvez le constater, il semble plus clair d' où peuvent provenir les cartes. Alors apportons-le ici. Donc, lorsque nous apportons cet élément ici, vous pouvez voir qu'il pourrait s'agir d'une seule carte, n'est-ce pas ? Mais nous pourrions également ajouter une autre carte qui pourrait prendre beaucoup plus de place. Je peux prendre l' espace de deux cartes, ou peut-être que les deux peuvent occuper tout cet espace. Il est donc très flexible de nos besoins et de ce que nous devons montrer. Cela dépend entièrement de nous, et tout ça devient trippant Voilà à quoi cela ressemblerait, assurez-vous de le désactiver si souvent, de temps en temps, juste pour que cela ne perturbe pas votre façon de voir les choses et de voir à quoi cela ressemble, et c'est comme si, OK, ce n'est pas trop mal. Mais une chose, bien sûr, que je recommanderais est de jouer également avec les ombres. C'est ce qu'ils font souvent. Il peut s' agir d' ombres très simplistes, comme celle-ci, ou encore moins Comme vous pouvez le constater, c'est comme de simples ombres rapprochées qui les font ressembler à des tickets. Ou nous pourrions travailler avec quelque chose d'un peu plus fort, afin de réduire l'opacité et de la rendre plus floue, puis d'obtenir quelque chose d'un peu plus doux pour les yeux, C'est donc une chose à garder à l'esprit. Je pense que je veux utiliser ce style pour le moment, mais nous pourrons le modifier plus tard. Cela dépend entièrement de nous. OK, alors allons-y. Je vais juste prendre l'une de ces cartes, la plus petite version ici, et je vais jouer . Voici la mise en page. Maintenant, nous pouvons le faire de différentes manières, mais l'une des façons dont j'aimerais le faire est d'ajouter un titre. Ce titre peut donc être en hausse ou en baisse. Cela dépend entièrement de nous. Voyons comment les autres l'ont fait. Ils le font généralement. C'est noir, très grand et lisible et la même chose ici, il indique les tâches en cours. Ensuite, vous pouvez voir un graphique. Vous pouvez voir une option pour le filtrer chaque semaine, chaque jour, peu importe ce que c'est. Donc oui, c'est un peu ce que nous recherchons. Ici, vous l'avez sous forme de boutons ou de menu déroulant. C'est donc quelque chose que nous pouvons choisir. Nous pouvons donc ajouter cela en haut et nous pouvons dire que nous pouvons revenir ici et voir ce que nous avons mis. Donc des statistiques. Voici donc notre texte, et nous n'avons pas à vous confier une tâche. Vous pouvez simplement dire le titre. Assurez-vous qu'il est aligné vers la gauche. Il a la bonne police, la bonne police, et ici, il est indiqué qu'elle est alignée à gauche et en haut, ce qui est suffisant pour nous. D'accord ? Ensuite, nous pouvons ajouter d'autres options. Ça peut être une image, ça peut être n'importe quoi. Mais c'est une belle mise en page générale. Voyons quelles autres informations nous pourrions ajouter. Je veux dire, pour être honnête, nous n'avons pas une mise en page simple. Nous avons beaucoup de mises en page différentes ici. Difficile à dire, nous allons faire exactement la même mise en page, car chaque fois, vous avez un type de graphique différent. Je pense que c'est suffisant pour avoir une mise en page très simpliste Ensuite, vous pouvez ajouter votre graphique, vous pouvez ajouter vos chiffres, quels qu'ils soient. Et oui, d'accord, alors que pouvons-nous faire d'autre ici ? Eh bien, nous pouvons ajouter une zone d'options. Vous pouvez donc avoir un bouton indiquant, voici vos options. Nous allons simplement créer quelques cercles les uns à côté des autres. Nous allons en faire une mise en page automatique. Nous allons également faire en sorte qu'il atteigne 13 points. Et nous allons changer la couleur, rendre un peu plus foncée. Et nous allons l'aligner ici. Mais pour celui-ci, nous allons l'aligner sur la droite. D'accord ? Donc, lorsque nous le redimensionnons, comme vous pouvez le voir, le titre restera en haut à gauche, et cet élément restera en haut à droite D'accord ? Voici donc votre bouton d'options supplémentaires, puis voici votre titre, et ici vous aurez votre graphique, quel qu'il soit. Je vais garder cela comme un petit élément principal, un peu comme l'original, puis je vais jouer avec d'autres. Nous avons maintenant parlé de cette vue d'ensemble des tâches pour afficher les tâches terminées en retard, etc. Faisons-le très rapidement. Nous allons parler d'une vue d'ensemble des tâches. Ensuite, nous allons créer ces rectangles , les faire aux coins arrondis et leur donner quelques couleurs. D'accord ? Nous allons donc écrire ici les chiffres. Nous allons ajouter ce texte, puis nous allons ajouter ces rectangles , puis nous allons y ajouter du texte, et nous allons le réduire. 12 est le plus petit que nous puissions utiliser habituellement en ce qui concerne les applications Web Je vais donc faire en sorte que ce soit régulier et je vais dire 42 ou quelque chose comme ça. Ensuite, je vais en faire un cadre ou nous pouvons en faire une mise en page automatique. OK. Alors je vais le copier. Ensuite, comme vous pouvez le voir, je peux le redimensionner et changer les choses. Je peux le faire et je peux dire 24. Mais 24, quoi 42, quoi ? Je vais ajouter un peu de texte. Je vais dire terminé. Même chose ici. Nous pouvons ajouter du texte ici, pour le faire, etc. Ensuite, une fois que nous en avons deux, nous pouvons les mettre dans une mise en page automatique, et bien sûr, il est tout à fait logique de changer les couleurs. L'une des couleurs que nous avons choisies est le rose , puis l'une d'entre elles est l'orange. Maintenant, il est plus logique de les trier également . Quelle couleur indique « urgent » ? C'est plutôt vers le rouge. Ensuite, vous avez cette couleur qui dit, oui, en attente ou nous pouvons simplement dire urgent, puis nous pouvons dire, oui, nous pouvons dire de faire ici, puis c'est terminé. Ou nous pourrions dire, je veux dire, pour terminé ou pour bloqué pour l'un d'entre eux. Cela pourrait donc être fait. Cela pourrait être bloqué. Ensuite, cela serait terminé, mais nous aurions besoin d'une couleur verte pour cela. Oui, donc c'est déjà écrit. C'est une bonne façon de le démontrer, mais vous pourriez avoir une question. OK, eh bien, les chiffres, nous ne les avons pas encore fixés, mais vous dites qu'il y en a 24 urgents et 42 à faire. Donc, ces urgences, sont-elles également prises en compte dans les choses à faire ou non ? C'est une bonne question. Nous devons nous poser des questions logiques. Allons-nous inclure 42 tâches dont 24 sont urgentes et 24 sont bloquées. Ou s'agit-il d'une catégorie complètement différente ? Ou est-ce que ce 42 à faire n' est pas urgent ? Tu sais ? est comme si nous avions 42 tâches non urgentes et 24 tâches urgentes. Donc, au total, nous avons autant de tâches à accomplir. Ce serait une bonne question. Hein ? Nous devons donc en quelque sorte comprendre de telles choses. Sinon, cela n'aurait aucun sens de les montrer sous des formes différentes , d'accord ? Essayons de le manipuler et de voir où cela nous mène. Maintenant, bien sûr, une autre chose que nous pouvons faire est de les prendre tous et de les déplacer vers la droite. De cette façon, ou peut-être pas exactement, ou nous pouvons les déplacer vers la droite et trouver un moyen de les faire tous partir du même endroit parce que pour le moment, tout commence ici. La façon de le faire est de créer une longueur ou une largeur spécifique. Nous avons donc une largeur de 65 et je vais donner à tous une largeur de 65 qu'ils puissent tous partir du même endroit. c'est un peu plus agréable Je dirais que c'est un peu plus agréable à regarder parce que c'est un peu plus organisé Bien entendu, vous pouvez également modifier ces chiffres, il est plus logique de les mettre ici, et voilà. Maintenant, ça a l'air beaucoup plus beau. Nous avons des choses à gauche, des choses à droite, et c'est plus compréhensible. Maintenant, une chose que j'aime faire chaque fois que je crée un type de tableau de bord, si possible, si c'est possible, si c'est quelque chose qui peut être programmé, c' ajouter un symbole de statut, pour ainsi dire, c'est une bonne chose, c'est une mauvaise chose parce que c'est souvent très difficile à analyser et à comprendre. Nous avons tant de tâches urgentes et tant de tâches bloquées, et changeons les chiffres. Alors, qu'est-ce que ça me dit ? C'est la question. Qu'est-ce que cela me dit à long terme ? Quels sont les avantages de ce graphique ? J'aimerais ajouter un texte disant que vous êtes sur la bonne voie. C'est bien, c'est positif ou il y a une augmentation, il y a une diminution. C'est une bonne charge de travail. C'est une chose que nous pourrions faire et nous pourrions ajouter en tant que badge. Nous pouvons le créer en tant que composant, mais nous devons simplement comprendre quelle est la meilleure façon de l'ajouter. Je dis juste ici catégorie ou statut, et je vais en faire une mise en page automatique, en lui donnant de la couleur, du vert. Les 10 % verts et ça va faire quatre par quatre peut-être ou huit par huit. Maintenant, il s'agit d'un composant et il indique son statut. Nous pouvons l'ajouter quelque part ici. Pour le texte, je vais le mettre en vert foncé. Et peut-être pourrions-nous ajouter une sorte de symbole ou un objet. J'ajouterais donc ce cercle ici, et je le rendrais également vert foncé. Peut-être donnez-lui un peu, comme une ombre ou un éclat, si possible. Ça n'a pas l'air génial. Ça n'a pas l'air super beau, mais je pense que nous pouvons essayer de le découvrir d' une manière ou d'une autre En gros, nous voulons dire qu' il existe différents types de stats et ici c'est indiqué sur la bonne voie. Vous pouvez dire « sur la bonne voie » à titre d'exemple. Nous pouvons réduire l'espacement ici, puis en ajouter un autre où il est indiqué de revenir en arrière Comme ça. On peut le rendre encore plus jaunâtre. Je peux m'en occuper et ensuite nous pourrons en créer une troisième qui indiquera que vous devez faire votre travail. Oui, en gros, ajoutez simplement différents types de statut. Mais nous pourrons nous occuper du libellé , des couleurs et de ces choses plus tard. Mais ce n'est qu'un début une très belle carte pour l'aperçu des tâches. Nous pouvons transformer certaines choses en mise en page automatique comme celles-ci, par exemple, puis nous assurer que cette face est égale. Alors je vais juste aller de l'avant et le copier ici. Remettons en place nos lignes et nos colonnes. vais juste les supprimer, et je vais les ajouter ici. OK. Donc, si nous pensons qu' il a besoin de beaucoup plus d'espace, nous pouvons lui en donner plus ou le redimensionner Cela dépend entièrement de nous. J'ai l' impression que c'est une carte importante. C'est donc quelque chose auquel nous pouvons accorder beaucoup plus d'espace. Alors voyons voir. Nous devons juste vraiment le redimensionner. Nous pouvons donc simplement le redimensionner dans celui-ci ici ou nous pouvons l'étendre totalement à vous Mais oui, essayons de l' étendre un peu. Ça a l'air mieux. Cela vous montre bien plus la longueur, les différences drastiques. Et c'est plus ou moins à cela que cela ressemblerait. Maintenant que je regarde les choses d'ici, j'ai l'impression que c'est peut-être un peu trop petit, mais ce sont les choses que nous devons continuer à faire encore et encore, vérifiant encore et en voyant, oh, le texte ici est trop petit. Nous devons l'agrandir, peut-être agrandir la carte entière. Mais comme je l'ai dit, cela ne fait partie du perfectionnement de votre design en cours de route, et c'est quelque chose que nous allons faire C'est bon. À voir la prochaine leçon. 8. Créer un filtre déroulant down: Bon retour. Donc, depuis la dernière leçon, j'ai ajouté quelques éléments de mon propre chef juste pour combler certaines lacunes, compléter certains détails, faire des travaux de jardinage qui seraient trop ennuyeux pour vous. Mais en gros, il suffit de remplir ces cartes, non ? Vous avez donc compris le concept. Il suffit de créer quelques graphiques, de noter les mois et, vous savez, je viens de combler quelques lacunes, comme je l'ai dit. Nous avons donc maintenant une vue d'ensemble des tâches, les KPI de l'équipe, performances des heures supplémentaires, vous savez, sur des mois ou des années ou quoi que ce soit Et puis il y a la charge de travail. Mais ce qui est vraiment intéressant , c'est de le supprimer. Une chose que j'ai également faite, c'est que j'ai redimensionné des éléments Vous l'avez probablement remarqué pour rendre le texte plus lisible car nous avons beaucoup d'espace, alors pourquoi ne pas l'utiliser. Dans le même temps, nous ne voulons pas submerger les gens avec trop d'informations, trop de texte Alors pourquoi ne pas simplement agrandir un peu le texte. Comme vous pouvez le voir maintenant, certaines choses sont également grises tandis que d'autres sont noires pour attirer davantage l'attention. Ici, vous voulez savoir combien de tâches vous avez, puis ici, c'est toujours visible, mais on leur accorde un peu moins d'importance. Mais en fin de compte, quand quelqu'un doit lire 24, il va lire « urgent  » par la suite et comprendre : « OK, 24 tâches urgentes », etc. Mais abuser du noir peut amener les gens à avoir tellement d'informations à assimiler psychologiquement qui bouleversent leur perception, essayez de ne pas le faire Mais dans cette leçon, nous allons ajouter un bouton ou peut-être plusieurs boutons qui nous aident à filtrer en fonction du temps. Parce que pour le moment, ce n'est pas clair. Est-ce ce mois-ci, cette semaine ? Cette année, je veux dire, de quoi parle-t-on de l'aperçu des tâches ? De quoi parle-t-on en termes de KPI d'équipe ? Nous devons disposer d'un cadre de référence pour pouvoir comparer. Est-ce que nous comparons cela au mois dernier ou à l'année dernière ? Ça va être très différent. La réponse sera complètement différente en fonction de la question que nous posons. Allons-y et créons un bouton très simple qui nous permet de filtrer l'heure. Ce que nous allons créer est essentiellement une liste déroulante. Donc, comme pour créer n'importe quel bouton, nous allons commencer par ajouter un élément de texte, et nous allons écrire ici chaque semaine ou peut-être, disons, cette semaine. OK ? Maintenant, nous allons maintenir la touche Maj enfoncée dans A, et cela va nous permettre de passer à A. Cela va en faire une mise en page automatique, puis nous allons choisir ici la même couleur de texte ici. Nous allons lui donner la même couleur. Et ce que nous allons faire, c'est utiliser l'outil Pen et créer cette petite flèche. Nous allons lui donner zéro rond comme rayon d'angle, et lui donner la même couleur. Nous y voilà. Donnons maintenant un peu de rayon de maïs à l'ensemble du bouton. Quel est le rayon du maïs que nous avons ici ? Ça fait 24, donc ça 16. Voyons voir si ce n' est pas forcément pareil. Ça pourrait être huit aussi. Nous avons donc maintenant une décision à prendre. Tout d'abord, collons-le ici. Je vais le coller ici. Donc pour le moment, c'est juste blanc, et comme vous pouvez le voir, ça n'a pas l' air si blanc. Ça a l'air un peu gris. Et c'est parce qu'il n'a pas la même ombre. Nous avons donc maintenant plusieurs options. Nous allons soit ajouter cette ombre ici, puis vous pouvez voir qu'elle a en quelque sorte une dimension tridimensionnelle, puis elle a le même aspect, mais alors nous avons un risque ici. Et le risque est que nous ne le sachions pas vraiment car ces cartes ne sont pas cliquables en elles-mêmes Vous ne pouvez pas cliquer sur la carte elle-même, mais vous devez cliquer sur ces trois points ou sur autre chose. S'il y a un bouton à l'intérieur, tu peux cliquer dessus. Mais cela devrait être cliquable et cela devrait être un peu plus clair Personnellement, je dirais qu'il est toujours préférable d'opter pour un style un peu différent. Cela pourrait donner une ombre plus forte. Hein ? Mais ensuite, tu manques un peu le look. Personnellement, je dirais qu'il est possible d'ajouter un petit plan comme celui-ci, un trait, peut-être même de supprimer complètement le remplissage, c'est à vous de décider. Cela nous permet de lui donner un aspect différent, et ce look différent peut nous aider à le rendre identifiable. Voyons donc ce que nous pouvons faire avec le bouton. Nous ne voulons pas que le trait soit trop épais, et nous ne voulons pas non plus qu'il soit trop long en arrière-plan. Donc, dans l'état actuel des choses, je pense que c'est suffisant, je dirais. Mais en ce moment, ce qui se passe, c'est que nous avons comme une zone très vide ici. C'est très vide. Et je pense que nous devrions le remplir. Donc, la façon de le faire est peut-être d'ajouter un titre. Je veux dire, la question est de savoir sur quelle page nous sommes ? OK, nous sommes sur flodesk.com. Lequel de ces éléments, projets de tableau de bord, sur quelle page sommes-nous ? C'est pourquoi il est important de copier-coller ce titre, d'ajouter un titre ici et de dire aux gens qu'en ce moment, nous sommes sur cette page et qu'il est important d'en faire un titre plus grand que les autres. Nous devons avoir une certaine hiérarchie. Donc ici, je dirais tableau de bord, non ? Donc, c'est simple pour le moment, nous restons très simples et c'est ce que nous disons. Maintenant, nous avons ce bouton en ce moment. On dit que cette semaine, c'est génial. J'ajouterais que ce serait encore mieux si nous ajoutions plus d'options de filtrage. Nous filtrons donc l'heure. Que pourrions-nous également filtrer ? Peut-être une équipe de conception spécifique ? Peut-être. Je ne suis peut-être pas sûr que nous puissions filtrer parce que je veux dire, peut-être que vous avez plusieurs équipes ou plusieurs sections au sein de votre équipe. Vous avez donc l'équipe de conception ou la section de conception, la section de programmation, etc. Tout cela pourrait être intégré, mais je m'en remets à plus tard. Maintenant, ma question est la suivante : OK, nous avons donc ce bouton qui filtre les choses en fonction des semaines ou des mois et ainsi de suite. Devrions-nous en faire une spécifiquement pour chaque carte ? Parce que c'est quelque chose que d'autres ont fait. Ici, vous avez chaque semaine. Tâche donc en cours, vous pouvez les filtrer chaque semaine. Et voici les statistiques de ce projet. Vous pouvez le filtrer seul ou filtrer les tâches quotidiennes seul. Et ce que je remarque, c'est que beaucoup d'entre eux font les choses séparément pour chaque carte. Mais pour être honnête, je pense que la façon dont nous l'avons fait est plus logique, car vous avez alors un seul bouton qui change tout au lieu d' avoir à changer de bouton. Et si je voulais voir nos statistiques pour toute l'année ? Dois-je changer chacun d' entre eux ? Cela n'a aucun sens. Mais je vais passer à autre chose maintenant et dire cette année, d'accord ? Je vais l'aligner sur la droite. La raison en est que nous avons celui-ci ici et qu'il vous montre plusieurs mois après le début de l'année. Je dirais que cette année a beaucoup plus de sens dans ce contexte. Alors restons-en là. Si nous le voulons, nous pouvons même faire un peu plus, voir si cela fonctionne. Pour être honnête, je ne le préfère pas. C'est bon. Maintenant, bien sûr, nous devons nous assurer que nos cartes sont également alignées. Je vois que l'un d'entre eux a été déplacé d'une manière ou d'une autre, et il arrive très souvent que, pendant que vous êtes en train de concevoir , vous déplacez des objets sans y prêter attention . Assurez-vous donc de ne pas tout gâcher ou, dans le meilleur des cas, utilisez simplement la mise en page automatique. Cela vous facilite vraiment la vie. Voilà, nous venons de créer un bouton, un peu comme un filtre, et cela nous a permis de rendre le design plus facilement compréhensible et plus ajustable. Bien, nous avons maintenant créé ce bouton, mais nous avons besoin de la fonctionnalité déroulante pour fonctionner réellement, pour pouvoir voir et comprendre de quoi il s'agit. Et le moyen d'y parvenir est de les mettre dans une mise en page automatique pour le moment, puis de créer une autre variante. Et cette variante devrait inclure différentes options. Je vais le cacher tout de suite. Je vais me cacher, je vais masquer cette erreur de temps en temps, puis je vais copier et coller, mais je vais faire en sorte que la direction soit verticale, copier-coller, copier-coller. Maintenant, nous avons cette semaine , puis ce sera ce mois-ci. Oups. Nous allons nous assurer que tout est aligné en haut à gauche, puis nous allons le dire ici. Et ça, je ne sais pas, ou l'année dernière. D'accord, nous allons donc avoir toutes ces options. Et ce que nous allons faire, c'est prototyper de telle sorte que lorsque vous cliquez dessus, il passe à l'autre à l' aide de Smart Animate. Et lorsque vous cliquez sur quelque chose ici, cela revient en arrière. Maintenant, normalement, il devrait en choisir un, non ? Cela devrait être choisi cette semaine, ce mois-ci, et cela changerait. Mais pour le moment, nous restons simples, donc cela ne devrait pas changer. Voyons donc à quoi cela ressemble en ce moment. Tu vois ? Il s'étend. Mais le problème, c'est que c'est transparent. Donc, ce que nous allons faire, c'est le rendre coloré une fois que vous aurez cliqué dessus et que vous aurez vu à quoi il ressemble. OK, c'est pas mal du tout. Vous cliquez dessus et cela vous montre, cette année, ce mois-ci, oui. OK, maintenant nous avons ce menu déroulant. Vous pouvez le modifier un peu. J'ai agrandi un peu la police pour qu'elle soit plus facile à lire, et je vais venir ici pour leur donner un peu plus d'espacement entre elles et voir à quoi cela ressemble Oui, c'est un peu mieux. Et vous pouvez travailler avec quelque chose comme ça. C'est ainsi que vous créez essentiellement un bouton de filtre déroulant Merci d'avoir regardé. Dans la leçon suivante, nous allons créer les cartes de tâches et travailler sur ce panneau ici. 9. Designing the Task Cards: Allons-y et créons des cartes de tâches. D'accord ? Ce sera donc principalement dans cette section. Nous pouvons aller de l'avant, copier ce texte, intégrer dans ce cadre et effectuer des tâches. Nous avons donc maintenant les tâches à accomplir. Je pense que ce serait plutôt bien si nous créions différentes catégories. Nous pouvons donc parler de tâches urgentes ou quelque chose comme ça. Ensuite, nous pourrions avoir de nouvelles tâches, quelque chose de ce genre. Soit ça, soit nous pourrions avoir des tâches et vous pourriez les trier. En fait, c'est peut-être une meilleure idée. Je ne sais pas Nous en déciderons dans un instant. Mais maintenant, allons-y et créons les cartes générales. Nous allons donc créer des cartes et essayer de faire en sorte qu' elles soient plus ou moins compactes. Nous voulons y ajouter des informations , mais sans exagérer Donc je copie le style d'ici à là et vous savez, essayons juste de le comprendre d'une manière ou d'une autre, pour créer une très belle mise en page sans en faire trop, d'accord ? Donc maintenant, l'idée est que nous devrions avoir un titre, et, vous savez, le titre est ce qu'est réellement la tâche. Et dans ce cas, la tâche peut être très simple. Il peut s'agir de rouleaux de design. Ce qui est intéressant, c'est que, vous savez, la tâche peut tout dire. Je pourrais dire design des rollups pour Chicago Fair, non ? Nous allons organiser une foire à Chicago. Cela s'appelle la Foire de Chicago ou peut-être y a-t-il une foire à Chicago et nous allons concevoir les roll ups pour celle-ci. Mais au lieu de créer un titre comme celui-ci, nous pourrions les autoriser à le faire . En gros, je vais simplement supprimer ce cadre. Je vais dire design roll ups. Et puis, en guise de commentaire, il va donner une information supplémentaire il va dire Chicago Fair. OK. Et puis il donnera également une date. C'est ça qui est sympa. Nous le décomposons au lieu de n'avoir qu'une seule information , le divisons simplement en plusieurs couches différentes, disons. Je vais le copier et je vais ajouter je vais ajouter une icône ici et ce sera une horloge. Nous allons donc les assembler, puis nous allons les copier. Ce sera l'heure ou la date. Et on pourrait dire que le 21 avril, c'est en fait trop tard. Disons le 21 juillet , puis nous aurons des informations supplémentaires ici. Quelle est cette information, je ne sais pas. Il peut s'agir de pièces jointes pour que nous puissions les relier. Je ne suis pas sûr. Voyons voir. Oui, Link devrait fonctionner. Ouais. Allons-y. Nous allons également faire en sorte que cela soit solide. Nous allons dire qu'il y a deux pièces jointes ou quelque chose comme ça, et c'est la tâche. Essayons de le décomposer un peu. Ensuite, nous pourrions également montrer qui est ajouté à cette tâche. Nous pourrions procéder comme suit. Et juste pour vous rappeler que cela est également basé sur ce que j'ai vu d'autres plateformes faire. Ce n'est pas nous qui réinventons la roue . Gardez donc cela à l'esprit. Nous ne faisons pas tout ce qui est complètement nouveau à partir de zéro, mais nous utilisons plutôt mais nous utilisons plutôt les expériences d'autres personnes. Je pense que c'est une très belle configuration que nous avons ici. Nous pourrions changer un peu les choses, mais je pense que c'est très bien. Nous pourrions essayer de faire en sorte que les cartes aient un peu moins de rayon d'angle parce que cela semble exagéré Mais c'est aussi important pour la cohérence, donc je ne suis pas sûr. Revenons un peu en arrière, voyons à quoi ça ressemble. Parce que plus vous avez de rayon d'angle, moins vous pouvez stocker d'informations sur ces éléments. Mais je pense que c'est bon. Maintenant, nous avons cette configuration comme ça, et je pense que c' est vraiment génial. Je vais en faire un composant et je vais dire ticket. C'est notre ticket ou notre tâche, et je vais l'ajouter ici et je vais le copier , puis je vais les mettre en page automatique. Nous pourrions soit le faire de cette façon lorsque nous avons ces tâches urgentes et qu'elles sont organisées cette façon, soit nous pourrions avoir d'autres tâches ici. Organisé comme ça. Ensuite, nous pourrions ajouter d'autres tâches ou nous pourrions le faire sous forme de filtre. Il existe une option de filtre, mais je pense que c'est mieux et rapprochons-le un peu plus Allons-y. C'est très rempli. Je ne vais pas mentir. J'ai l'impression qu'il est très rempli et qu' il n'est peut-être pas centré. Oui, c'est vrai. Ce n'est pas centré. Mais c'est toujours important. Cela vous donne un bon aperçu de ce qui se passe. Ce qui est très important, c'est que nous devrions également être en mesure de réduire ce menu. C'est quelque chose qu'il faut également garder à l'esprit. Maintenant, ce que nous devrions également être en mesure de faire , c'est de renseigner les détails, et c'est quelque chose que je vais faire juste pour que vous n'ayez pas à me regarder faire ce travail subalterne Mais c'est actuellement notre système de tickets. Ça a l'air vraiment sympa. Il est propre et donne suffisamment d'informations sur l'objet de la tâche, son emplacement ou le projet, disons, pour quel projet exactement. Peut-être pourrions-nous disons, pour quel projet exactement même le souligner pour montrer de quel projet il s'agit, puis vous pouvez cliquer dessus. Ou nous pourrions les changer. En fait, c'est peut-être faisons-le. Dans ce cas, nous avons une hiérarchie un peu meilleure. Tu vois ? Donc oui, vous avez comme Chicago Fair, des rollups de design, etc. Ensuite, il est clair de quel projet il s'agit, quelle est la tâche réelle ? Quand arrive-t-il et combien de pièces jointes, avez-vous des informations à ce sujet, des commentaires, etc. ? Et puis qui est réellement affecté à cette tâche ? Je dirais donc que c'est une très bonne version résumée d'un ticket, et nous devrions certainement en avoir une version plus étendue. Mais pour l'instant, cela suffit. Dans les prochaines leçons, nous verrons également comment réduire ce menu ou ce panneau de section latérale ainsi que celui-ci. C'est certainement quelque chose que nous allons faire dans les prochaines leçons, en plus d'ajouter du prototypage, un peu d'interaction et de micro-interactions à cette conception Merci beaucoup de votre attention, et je vous verrai lors de la prochaine leçon. 10. Creating Tables, Charts, Graphs: Très bien, nous avons donc une très belle mise en page pour le moment, mais j'aimerais prendre un moment pour vous montrer comment j'ai créé ces graphiques et comment vous pouvez les recréer Dans cette leçon, nous allons donc avoir une sorte d' exercice pour recréer ces graphiques. Commençons. Maintenant, le premier que nous avons fait ensemble, donc vous avez déjà une idée de la façon dont nous l'avons fait. Maintenant, nous allons mettre les autres de côté et nous allons essayer de les recréer un par un Nous avons donc ici quelques KVI. Je vais juste le copier et le coller , puis je vais supprimer cette partie. façon dont cela fonctionne est très, très simple, et vous devriez essayer d'y penser dans les termes que je vais vous dire maintenant, n'est-ce pas ? nombreuses manières différentes Vous pouvez les recréer Mais la façon dont je le fais ou la façon dont je vais vous montrer comment faire est, à mon avis, la plus propre, car beaucoup de gens conçoivent des choses, en particulier lorsqu'il s'agit de conception graphique, en particulier avec d'autres applications qui ne sont pas Figma, dans lesquelles de minuscules pixels ne fonctionnent pas correctement L'icône va un peu de droite à gauche, l' espacement est légèrement décalé Ce sont toutes des choses que nous allons éviter, nous allons essayer d'éviter tout cela en procédant de cette façon. Donc, la première chose que tu vas faire, c'est de commencer par les icônes, d'accord ? Je vais donc simplement mettre un élément de texte ici. Je vais le copier. Ce sera notre texte, le procès-verbal, et ce sera notre icône. Je vais taper ici, génial. Génial, font awesome seven free. Ensuite, je vais écrire le nom de cette icône, qui est un chronomètre Nous allons le rendre solide, car certaines icônes ne sont disponibles que sous forme solide dans la version gratuite. Nous allons donc le faire , et juste comme ça, nous l'obtiendrons immédiatement, n'est-ce pas ? Donc, au lieu de mettre un cercle derrière, nous allons créer une mise en page automatique. Maintenant, vous devriez avoir deviné que j' adore vraiment les mises en page automatiques car elles facilitent beaucoup les choses Au lieu de vous soucier de deux éléments, vous n'avez qu'un seul cadre, n'est-ce pas ? Un cadre qui inclut le truc, tu sais, il inclut l'icône en plein milieu, d'accord ? Maintenant, remplissons-le. Maintenant, le remplissage actuel n'a pas d'importance. Il faut juste que ce soit une couleur que l'on puisse voir et identifier. Nous allons lui donner un rayon de 50 ou 100 coins arrondis, juste pour nous assurer qu'il est complètement rond. Une autre chose est de s'assurer que la largeur et la hauteur sont identiques. Ici, vous pouvez voir que ce n'est pas un vrai cercle, alors faisons en sorte qu'ils soient tous les deux 36. C'est bon. Maintenant, c'est parfait et assurez-vous que cette icône est également centrée, pas vers la gauche. Maintenant, il est parfaitement centré, et vous pouvez maintenant déterminer la quantité de rembourrage que vous souhaitez Donc, pour le moment, vous pouvez le faire avec le rembourrage ou vous pouvez simplement le faire vous-même, veillant à verrouiller le rapport hauteur/largeur Donc ici, au lieu de travailler avec le rembourrage, vous pouvez simplement écrire en 40 pour avoir plus d'espace Nous pouvons vérifier la taille de la police ici. C'est 24, donc nous en ferons 24 ici, et nous pouvons en faire 45 et ça semble assez proche. Je vais cliquer sur I pour prendre la couleur à partir d'ici. Je vais choisir l'icône et je vais prendre la couleur de cette icône. Maintenant j'ai le texte. Ici, je vais juste écrire 50 minutes, puis nous avons cet élément ici. Maintenant, ce sera le même principe. Je copie ceci et j'écris 25 %. Je vais créer la police 12. Je suppose que c'est sa taille. Ensuite, je vais en faire une mise en page automatique et nous ferons la même chose. Remplis-le, peu importe. Faites-en 50, 100 et fabriquez le rembourrage, changez-le, remplacez-le par ce qui vous convient Ensuite, vous l'avez sous forme d'icône. Je vais le copier . Je vais le dupliquer, génial. Ensuite, vous allez écrire la flèche vers haut et encore une fois, la rendre solide. Maintenant, nous l'avons ici. Je vais le réduire, dix, puis je vais réduire l'espacement entre eux et le rembourrage de droite à gauche Alors ça y ressemble plus. Maintenant, je vais supprimer la couleur. Je vais choisir ces deux, et je vais prendre à partir d'ici ou je peux simplement les copier d'ici parce qu'il est si petit. C'est bon. Alors maintenant, ça ressemble beaucoup. Il ne nous reste plus que ce titre, nous allons donc le copier. fait, je tiens Alt enfoncé tout en le déplaçant, je le tiens enfoncé et je le déplace tout en maintenant Alt enfoncé et vous le dupliquez, puis je vais écrire le temps moyen par tâche. Fais ce 16, puis vole la couleur d'ici. Boum. Maintenant, il s'agit d'une étape très importante. Nous avons maintenant une mise en page automatique ici, une mise en page automatique ici. Nous allons tous les choisir la même ligne et en faire une mise en page automatique pour eux-mêmes, pour eux-mêmes. Maintenant, toute cette rangée est réunie. Maintenant, nous pouvons faire un espacement de quatre ou huit ou ce que nous voulons Vous pouvez également choisir de les rapprocher les uns des autres. Juste en option parce que, tu sais, l'idée ici est plus proche. C'est du texte. Les 52 minutes augmentent donc de 25 %, et tout cela est dû au chronomètre, qui est lié au temps moyen Vous les connectez donc logiquement. Cela ne fait pas une énorme différence car l'espacement n'est pas très visible à l'œil nu, mais pour un designer, il est assez visible Ensuite, nous allons en faire une mise en page automatique, non ? Alors à sept ans, je n'aime pas ces chiffres inégaux, tu sais, alors fais-en un huit. Pourquoi pas ? avons donc maintenant et il ne vous reste plus qu'à le dupliquer, le dupliquer. Changez l'icône ici, liste du presse-papiers. Nous y voilà. Ensuite, avec cette icône, c'est une étoile, puis il vous suffit de prendre les informations, copier-coller, de les copier-coller. Ce qui est bien, c'est que vous n' avez pas besoin de trop déplacer les objets grâce à la mise en page automatique, vous n'avez donc pas besoin de déplacer les objets pour cela, et c'est ce que nous allons faire. Nous devons prendre cette couleur à partir d'ici, appuyer sur I, prendre cette couleur, puis changer ceci en cela. Bam, allons-y. Et assurez-vous que nous avons ce texte ici . Nous pouvons l'étendre un peu. Nous pouvons simplement cliquer ici, puis c'est étendu. Ensuite, nous allons choisir tous ces éléments et les mettre dans une mise en page automatique. Au lieu de 19, je vais en faire 16. Vous remarquez ici qu'il y a une petite différence. Vous pouvez donc double-cliquer et ensuite ce sera Hug, maintenant vous avez beaucoup plus d'espace. Je vais en faire 24, 36, voir ce qui fonctionne pour vous, puis vous pourrez le placer au milieu et boum, nous l' avons juste copié très rapidement, très facilement Il s'agit de comprendre par où commencer. Au lieu de créer toutes les icônes en même temps, puis tous les chiffres, créez simplement un look solide. Lorsque vous en êtes satisfait, continuez simplement à le dupliquer et à le modifier Passons maintenant à la seconde. Je vais le copier, le coller comme avant, et je vais le supprimer pour que la façon de le faire soit assez simple. Vous allez appuyer sur O ou choisir l'outil ovale tout en maintenant la Shift enfoncée pour vous assurer qu' il est bien droit et qu'il a le même rapport hauteur/largeur. Ce n'est pas comme une extension ou quoi que ce soit de ce genre. Ensuite, nous allons prendre cette couleur. Maintenant, copiez-collez, nous l'avons copié et collé. Maintenant, je vais m'en tenir à ce point, et je vais prendre une part du gâteau. Ensuite, je vais cliquer sur Je choisis celui-ci. Maintenant, rincez et répétez le copier-coller. ce que je vais faire. Il n'est pas nécessaire que ce soit aussi exact. Puis pareil, copiez-collez. Je vais lui donner plus d'espace. Appuyez ensuite à nouveau sur l'outil O oval, redressez-le en maintenant la touche Shift enfoncée, et vous avez l'outil. Ensuite, vous obtenez cette image quelque part, vous pouvez simplement copier le remplissage, copier l'image ici, copier l'image là, puis prendre les remplissages et vous avez ici un cercle avec Ce que nous allons faire, c'est simplement le remplir en blanc et ajouter un point d'interrogation. Maintenant, vous avez peut-être remarqué que ce n' est pas parfaitement pareil. Je le fais juste très rapidement. Il n'est pas nécessaire que ce soit exactement la même taille, juste la même idée. Nous avons maintenant ces textes, et comme vous pouvez le voir ici, nous travaillons à nouveau avec les mises en page automatiques ce faire, écrivez John 20 %, puis vous obtenez un tout petit ovale et vous obtenez la couleur. Vous maintenez les deux touches en maintenant la touche Maj enfoncée, puis maintenez la touche Maj et la touche A Maintenant, elles sont mises en page automatiquement et l'espacement est de quatre Maintenez maintenant la touche Alt enfoncée pendant que vous copiez. Maintenant, mettez-les tous dans une mise en page automatique et donnez-leur également quatre ou peut-être huit, puis changez les valeurs. Il suffit de copier-coller. Il semblerait que nous ayons deux John. Nous l'avons fait, je ne suis pas sûr. John, Mary et Lawrence, puis nous y mettrons Lawrence, nous l'assignerons, et nous prendrons les couleurs. Laurence est là et Mary est là. Boum. Juste comme ça, nous l'avons copié. Et c'est ainsi que vous pouvez créer un graphique très rapidement. Maintenant, bien sûr, vous pouvez utiliser des graphiques provenant d'autres programmes, d'autres endroits où vous pouvez les importer. Cela dépend entièrement de vous, mais voici comment vous pouvez le créer rapidement et très facilement avec Figma Pour être honnête, je trouve que c'est plus facile de le faire Figma elle-même. Passons maintenant à la dernière question, celle-ci peut être un peu délicate ou accablante, mais ce n'est pas le cas en fait. Alors maintenant, je le copie et je le mets ici et , comme toujours, je le supprime simplement. Personnellement, je prends le stylet et je maintiens la touche Shift enfoncée pour tout remettre en ordre. Je le fais tomber. Ici, là où je veux, puis je l'étends. J'essaie de m'assurer que l'espacement ici est similaire à ici Je ne peux pas toujours être parfaite. Assurez-vous que le trait soit très léger car cette information n' est pas si importante que ça, ces axes. Ensuite, nous avons cette belle ligne. Cela peut être un peu délicat. Vous allez cliquer ici puis vous allez maintenir la touche Maj enfoncée juste pour obtenir un très bel angle d'inclinaison, puis vous allez maintenir la touche Maj enfoncée et vous assurer d'obtenir une belle courbe Ensuite, tu peux aller où tu veux. Par exemple, ici, vous n'avez pas besoin de maintenir la touche Maj enfoncée puis de l'étendre jusqu'à obtenir une belle courbe égale, remontez où vous le souhaitez. Tu l'amènes ici. Et encore une fois, retrouvez cette courbe. C'est en gros la même idée, double-cliquez dessus juste pour vous assurer que c' est enregistré comme ça. Vous pouvez revenir à cette première et lui donner également une jolie petite courbe dès le début. Et maintenant tu as une jolie petite couleur. Maintenant, je vais essayer de le faire avec une couleur différente, juste pour vous montrer ce que j'ai fait ici. Maintenant, je vais le rendre vert, non ? Maintenant, comment puis-je obtenir ce joli petit dégradé ? C'est une bonne question. C'est un style de design très courant, d'ailleurs, c'est pourquoi je le fais. Pour ce faire, vous allez copier et coller cette ligne. OK ? Donc, juste pour te faire savoir, ce n'est pas une ligne parfaite. Les courbes peuvent être améliorées, mais c'est tout à fait normal. Vous allez laisser l'un d'eux tel quel, et pour le second, vous allez double-cliquer dessus pour voir les points. Ensuite, tu vas retourner au penol. Vous allez vous connecter ici. Maintenez la touche Shift enfoncée pour descendre tout droit. Il semblerait que nous ayons raté la cible. Alors tu vas le fermer. Vous allez l' amener ici, le fermer , et voilà. Alors maintenant c'est fermé. Vous allez maintenant supprimer le trait et ajouter un remplissage. Mais au lieu d'un matériau de remplissage normal, vous allez choisir le dégradé et ce dégradé sera linéaire Et il doit avoir plus ou moins la même couleur. Mais à partir du bas, vous allez lui donner 0 % d'opacité et vous allez donner à tout cela peut-être 50 % Alors, juste comme ça maintenant, vous avez ce joli petit dégradé. Vous pouvez maintenant l'ajuster. Tu peux le porter à 25 %. Je trouve qu'il vaut mieux être plus léger. Vous pouvez même atteindre 10 %, c'est à vous de décider, ou vous pouvez même tracer la ligne elle-même. La ligne ci-dessus, vous pouvez la rendre plus claire ou plus foncée ou c'est à vous de décider. Mais je trouve qu'il y a toujours quelque chose entre les deux. Je vais donner ces 25 % ici et ça n'a pas l' air trop mal. Maintenant, le plus important est que cette partie soit en haut et que cette partie soit en bas. Vous pouvez bien sûr l'ajuster , mais à quoi bon le faire ressembler à ça ? Il est censé décrire l'augmentation réelle ou la proximité du Vous pouvez voir à quel point c'est proche. Ici, ce n'est pas si près parce que ce n'est pas si vert que ça. Ici, on s'approche du sommet, mais pas si près. C'est ici que c'est le plus proche, par exemple. Ensuite, nous avons cette ligne, cette ligne vous indique où se situe le pic ou le maximum. Vous allez simplement obtenir l'outil linéaire, appuyer sur L ou choisir l'outil linéaire à partir d'ici, et vous allez maintenir la touche Maj enfoncée et continuer tout droit. Maintenant, abaissez-le d'un cran pour vous en rapprocher ou vous en approcher, et vous aurez accès à ces options. Accédez aux options de trait et au lieu d'un trait plein, vous aurez un tiret. Ensuite, vous pouvez modifier ici les tirets, comme vous pouvez en faire dix, par exemple, puis vous avez ces jolis petits tirets puis les rendre grisâtres pour qu'ils ne soient pas si clairs parce que ce n'est pas l'attraction principale Ensuite, nous pouvons maintenant ajouter les mois. Nous commençons par le mois de janvier et ce que vous allez faire, c'est l' apporter ici, maintenir la touche Alt enfoncée et l'organiser, il n'est pas nécessaire que ce soit parfait. Sachez simplement de combien de mois vous avez besoin. Vous avez donc un, deux, trois, quatre, cinq, six, sept, un, deux, trois, quatre, cinq, six, sept. Ensuite, je vais tous les choisir et les mettre dans une mise en page automatique en maintenant les touches Shift et A enfoncées, puis je vais les étendre jusqu'à la fin. Ensuite, je vais choisir Auto. Auto s'assure que l'espacement automatique est automatique afin que tous ces éléments atteignent la fin du cadre et que l' espacement soit Elle s'étend jusqu'ici. Je vais juste étendre cette petite ligne grise. Je suis désolée pour ça. Je vais juste le prolonger un peu jusqu'ici. Bien sûr. C'est bon. Maintenant, nous allons le changer et nous pouvons écrire sur fb, puis nous passerons aux mois de janvier, février, mars, avril, mai, juin, juillet Ne me jugez pas, mais parfois j'ai besoin chanter la chanson pour me rappeler l'ordre du mois est juste une mauvaise habitude que j' ai ou non, juste une habitude que j'ai prise et que j'ai du mal à abandonner. Maintenant, nous nous assurons qu'il est lisible, c'est-à-dire qu'il se trouve en dessous de cette ligne. Voici donc la ligne d'accessibilité, en veillant à ce qu'il y ait suffisamment de contraste. que nous avons copié le style et nous pouvons désormais présenter différentes analyses, différents rapports, graphiques et tableaux sur Figma sans avoir besoin d'applications différentes Est-ce que c'est un peu difficile. Est-ce rapide et utile ? Oui, certainement parce que je m'en souviens. Je veux dire, tu peux avoir un autre design, tu peux avoir un autre look. Mais si vous concevez réellement un tableau de bord, il est très important de définir le design. C'est vous qui créez le design. Ne reprenez aucun élément de PowerPoint, d'Excel ou de tout autre programme qui est peut-être obsolète. Créez votre propre design, et cela devrait être la base. Alors, consacrez le temps nécessaire pour créer quelque chose beau, qui correspond à votre style et au style du design sur lequel vous travaillez. Merci beaucoup de m' avoir écouté. Je te verrai dans la prochaine leçon. 11. et nettoyage finaux de l'interface utilisateur: Bon retour. Dans cette leçon, nous allons examiner de plus près le design que nous avons créé jusqu' à présent, même si nous en sommes vraiment fiers, mais nous allons essayer de le peaufiner un peu. Ce qui me saute aux yeux, c'est que d'une certaine manière, il n'y a pas beaucoup de couleurs, ce qui est une bonne chose à mes Nous ne voulons pas submerger les gens avec trop de couleurs. Nous avons beaucoup de blanc, gris, d'ombres, etc. Nous utilisons très bien ces éléments. Cependant, en même temps, nous utilisons beaucoup de couleurs très vives comme le violet, le bleu, le jaune et le vert. Et même s'ils sont utiles à certains égards, par exemple, le vert indique une augmentation, le rouge indique une diminution, puis nous avons également ce système de couleurs qui permet de revenir en arrière et de faire preuve de prudence. Ces étiquettes sont toutes utiles. Cependant, dans d'autres endroits comme ici, par exemple, ils ne nous aident que dans le sens où ils nous montrent que ces valeurs sont différentes, par exemple, urgent est différent de ce qu'il faut faire , bloquer, terminer, etc. Cependant, il y a une question : doivent-ils être aussi brillants ? Doivent-ils assumer une telle charge cognitive ? Parce qu'en ce moment, vous savez, ils attirent mon attention et je les regarde directement ici et ici. Ce ne sont là que quelques-unes des choses que j'aimerais améliorer dans notre design. Commençons donc par cela en fait. Cela a l'air génial, mais que pouvons-nous y faire ? Il existe différentes possibilités quant à ce que nous pourrions faire. Maintenant, une chose que nous pouvons faire à ce sujet est d' essayer d'utiliser un système plus logique, disons. Donc, au lieu d'utiliser simplement des couleurs aléatoires ou pas vraiment aléatoires, ce sont les couleurs de l'image de marque. Au lieu de cela, nous pourrions essayer de les utiliser dans un sens plus léger. Donc, en utilisant ce violet, nous pourrions peut-être en utiliser une version plus légère. Donc, d'une manière ou d'une autre, ne le supprimez pas complètement, mais juste pour le rendre plus léger. C' est quelque chose qui ressemble plus à ça que je parle. Vous pouvez toujours les différencier, mais ils ne sont pas très brillants. Ils ne sont pas du tout brillants sur ton visage. Je trouve que c'est bien mieux. Ce n'est peut-être pas aussi cool du point de vue du design, mais cela prend moins de charge de travail cognitive Dans votre cerveau, vous ne le regardez pas directement. La charge cognitive est donc moindre. Cela ne fatigue pas non plus vos yeux, car vous passez du blanc au violet très vif, bleu vif, au vert et au jaune, mais maintenant c'est un peu plus doux pour les yeux, je dirais C'est l'une des façons dont nous pourrions le faire. Une autre méthode consiste à utiliser un système logique car nous avons une tâche urgente à accomplir. Maintenant, le terme terminé a du sens parce que c'est vert, mais il est également urgent de le faire davantage vers le violet. On peut le faire passer au rouge. C'est un peu plus logique. Il est plus logique que l'urgence soit rouge parce que nous l'utilisons partout ici, par exemple. Quand il s'agit de faire, collées et complétées, ces couleurs n'ont pas toujours vraiment de sens. Cela peut être cela ou simplement le gris. Pour être honnête, en utilisant le gris, nous abandonnons une couleur que nous avons ici, mais cela nous aide un peu, et maintenant nous nous retrouvons avec le système de feux de signalisation que nous utilisions auparavant avec ces étiquettes, ce qui est beaucoup plus logique parce que vous avez l'urgence, qui est rouge, à faire est plus ou moins neutre. Je veux dire, c'est quelque chose que vous devez faire, mais cela n'a aucune indication. Vous n'allez pas vous rabattre dessus, et vous ne vous en sortez pas vraiment très bien, c' est juste pour le faire. Alors tu es coincé. C'est jaune, ce qui signifie que vous êtes à mi-chemin, que vous devez aller quelque part. Vous ne l'avez pas terminée et vous n'avez pas échoué. Ce n'est pas juste pour le faire, c'est quelque part au milieu, à gauche au milieu. Vous pouvez donc essayer de le comprendre à partir de là. Le jaune a du sens parce que le jaune est toujours, euh, tu sais, indécis quelque part au milieu Vous savez, comme pour les feux de signalisation, le jaune signifie : « Hé, ça va presque être rouge ». Mais ce n'est pas encore le cas. Alors peut-être saisissez votre chance, conduisez vite, ralentissez peut-être. Donc ici, vous devez en quelque sorte dire , j'ai besoin de votre attention. Tu dois faire quelque chose pour moi. Et puis, pour terminer, il suffit de dire vert. C'est vert, c'est positif. Pas besoin d'y penser, pas besoin de le deviner. Maintenant, une autre idée est de compléter également une couleur neutre. Mais comme nous avons déjà du gris, ce serait un peu déroutant car il n'y aurait pas beaucoup de différence, ou nous pourrions le faire plutôt vers bleu car c'est plus ou moins la couleur que nous avons ici. Mais je pense que le vert est une très bonne chose. Selon les objectifs, vous pourriez même penser à terminer la suppression au lieu de la terminer. L'idée sous-jacente est que, vous savez, vous n'avez pas besoin de savoir ce qui est terminé. Vous devez savoir ce qu' il reste à faire. Mais cela va vraiment plus loin dans l'expérience utilisateur. Personnellement, je n'y crois pas. Je pense qu'il est bon de savoir ce que vous avez accompli, quels domaines vous avez fait un excellent travail et ce que vous avez appris. savoir si ce doit être un vert vif est discutable, car je pense que cela vous prend de l'énergie en ce moment. Et ce n'est pas exactement ce que tu veux faire. Mais je pense que pour le moment, nous optimisons cela et cela semble beaucoup mieux. C'est bon. Alors, que pouvons-nous faire d'autre ici ? Je pense donc que les couleurs et les polices sont correctes. Ils ne sont pas mal. Ils ne sont rien. Mais en ce qui concerne ce point, j'ai l'impression que le schéma des gris est trop neutre pour moi Je pense qu'il y a peut-être un moyen de changer les choses. Je ne suis pas sûr. Essayons des choses. J'essaie donc juste de choisir des couleurs ici et de lui donner un peu plus d'identité Je ne sais pas si nous pouvons y parvenir parce que nous ne voulons pas non plus tout gâcher en même temps Je pense également qu'il n'y a pas beaucoup de contraste ici. Essayons d'obtenir un peu plus de contraste. Le cercle ici n'est pas très important, mais l'icône serait géniale si nous pouvions le distinguer pour qu'il soit plus compréhensible. Je pense que c'est mieux. Je pense que cela lui donne un peu plus d'identité. Et oui, c'est un changement très mineur, rien de trop important. Donc oui, je pense que c'est une bonne chose et que nous avons un bon espacement. Les choses s' arrangent dans ce domaine. Maintenant, pour en venir ici, c'est un gâchis qui doit être résolu. Au lieu de cliquer sur chaque élément, je vais simplement filmer les couleurs de la sélection ici et je vais changer les choses ou du moins essayer de le faire. Sur le même principe, une chose que nous pourrions faire très facilement est de simplement choisir des couleurs plus claires, des couleurs plus pastels. Nous avons donc ce bleu ici, très clair. Je choisirais de le rendre gris maintenant, puis nous allons peut-être l'utiliser ici comme bleu clair. C'est bon. Maintenant, je vais le rendre un peu plus léger. Et en ce qui concerne le jaune, voyons ce que nous pouvons faire. Revenons aux couleurs de sélection. Je crois que je vous ai dit que j'allais le faire , puis j'ai tout gâché et je ne l'ai pas fait correctement, donc je vais juste y remédier maintenant OK. Maintenant, retournez en arrière. Avec ce violet, nous allons choisir quelque chose de plus clair mais pas trop clair. Et puis il y a le jaune. Il semblerait que nous ayons deux jaunes différents. Donc ça a l'air, je veux dire, c'est plus doux pour les yeux, mais pour être honnête, je n'en suis pas très contente. Ça n'a pas l'air génial. Voyons ce que nous pouvons faire pour y remédier. Alors peut-être qu'au lieu de le remplir, nous pouvons peut-être faire une sorte de trait quand il s'agit de cette zone vide. Je pourrais faire la même chose ici et juste un coup. Et quand est-ce qu'il s'agit de revenir à ces couleurs ? Devrions-nous le ramener ? Ne devrions-nous pas ? Nous pouvons les fabriquer. J'ai encore fait l'erreur. Vous devez le faire à partir des couleurs de sélection afin de pouvoir changer le cercle correspondant à la tranche, au lieu d'avoir à le faire deux fois. J'essaie de faire en sorte que ces couleurs soient également reconnaissables ici et qu'elles soient également différentes les unes des autres. Maintenant, ils étaient trop proches. Alors voyons voir. Maintenant, idéalement, vous savez, ce que nous faisons en ce moment, c'est une sorte de supposition, et nous voyons ce qui fonctionne le mieux, mais idéalement, vous ne devriez pas le faire comme ça au hasard, mais plutôt le faire en ayant mis en place un système de design sympa avec un guide de style et des couleurs définies Mais nous n'en avons pas, donc nous faisons les choses, vous savez, vite et sales et, vous savez, essayant de comprendre les choses, sinon, ce que j'aime faire parfois, c'est ajouter des couleurs similaires pour que vous ayez quelque chose comme ça. Je pense que c'est bien parce que même si nous avons deux couleurs maintenant, cela lui donne plus d' identité ou plus de caractère. Mais ce que vous remarquez, c'est que cela peut être problématique car John et Mary ont alors des couleurs très similaires. Cela peut donc être compliqué. Ce que nous pourrions faire, c'est échanger John et Mary. Donc, pour ce faire, je vais juste le copier et le coller ici, puis je vais le choisir et je vais ouvrir mon presse-papiers Maintenant, il y a un peu au milieu d'eux, une sorte de tampon. Ce rose est au milieu. Alors maintenant, tu peux les différencier un peu. Ils ne sont pas si clairement différents. Mais j'ai l'impression que la palette est plus harmonieuse ici. Je ne sais pas J'ai l' impression que je l'aime davantage. Il n'utilise pas le jaune, il n'utilise pas d'autres couleurs, mais je pense que c'est bien Nous n'avons pas besoin de les utiliser partout. Et n'oubliez pas que je n'en ai que trois, mais idéalement, vous en auriez un quatrième, un cinquième, un sixième selon la taille de votre équipe, puis vous utiliseriez plus de jaune. Peut-être que vous pourriez introduire l' orange, le rouge, peu importe. Assurez-vous simplement d' avoir quelques couleurs au début, puis vous continuerez à les étendre à d'autres couleurs différentes. Mais je pense que nous pouvons vivre avec ou peut-être que nous pouvons faire quelque chose comme ça. Voyons voir. Je pense que c'est mieux. Nous utilisons maintenant ce gris grisâtre ou bleuâtre, qui fait de l'exercice, ou ce gris violacé, pourrait-on dire Maintenant que cela fonctionne, il y a un lien entre cette zone, cette zone et cette couleur, et maintenant un peu plus ici. C'est plutôt du côté obscur. Maintenant, en ce qui concerne cela, je l'aime beaucoup, mais il y a quelques ajustements mineurs que nous pourrions faire. J'ai pu voir que cette ligne arrivait ici, alors nous pourrions la jeter à l'arrière. Voir. Il suffit de le remettre ici et il sera toujours transparent, afin que nous puissions simplement le soulever. Nous y voilà. C'est beaucoup plus agréable et on a pu voir la même chose ici. Il y a un petit chevauchement, nous allons le supprimer et voyons voir. Nous allons également le démonter. Une autre chose que nous pourrions faire est d' ouvrir ce cadre. Nous pourrions également ajouter un cercle pour simplement indiquer le point culminant. Les cercles sont toujours intéressants avec des graphiques pour indiquer certains points ou périodes importants . Vous pouvez également utiliser la souris pour afficher différents points, etc., ainsi que leurs valeurs. Nous avons ici le point le plus élevé. Peut-être devrions-nous souligner le point le plus bas, quelque chose comme ça. Même s'il serait bon d' indiquer qu'il s' agit du point le plus bas. Je ne suis pas sûr que nous puissions choisir cette couleur. OK, donc je pense que nous devrions mettre ces lignes par-dessus tout et ensuite d'accord. Ou nous pourrions nous assurer que ce n'est pas transparent Il y a un accident vasculaire cérébral ici OK ? Nous allons supprimer ce remplissage et nous assurer qu'il est à 100 %, et nous n'aurons qu' à déterminer, nous allons simplement choisir la couleur elle-même et la porter à 100 %. Nous y voilà. Maintenant, nous n'avons aucun problème de transparence, et c'est la même couleur que nous. C'est bon. Maintenant, c'est un peu plus beau, même si j'ai l' impression que le rouge est trop fort , redéfinissons-le OK. Je pense que je vais juste le ramener ici. Au lieu du gris, je pense que je vais choisir la même couleur pour choisir la couleur à partir d'ici. Nous avons maintenant le point le plus bas et le point le plus haut. Vous pouvez indiquer quel est ce numéro. Je ne sais pas ce que la performance ici est censée indiquer ou comment elle serait mesurée, mais disons que nous en avons 89 % ici Il s'agit d'un sommet, 89 %, et d'un faible 74 C'est comme lancer des chiffres. Mais maintenant, vous pouvez constater que les choses se rapprochent parce que vous avez maintenant des chiffres, des indications, vous comprenez que c'est le point le plus se rapprochent parce que vous avez maintenant des chiffres, des indications, vous comprenez que bas, le point le plus élevé, c'est ce que c'était et quelques indications ici et là pour nous faire savoir que ces graphiques ont vraiment du sens. Je dirais que ce serait également formidable ici si nous ajoutions un axe Y. Nous le ferions donc essentiellement en ajoutant quelques chiffres. Prenons donc la couleur à partir d'ici. Donc, alignez cela vers la droite, et nous dirons que c'est 90 %. Je vais prendre tout ce graphique vers la droite. Nous choisirons toutes ces options. Nous les mettrons en mise en page automatique, puis ils se répandront d'eux-mêmes. Ensuite, nous allons voir que ce chiffre est de 74 %, ce doit être quelque part de 80 % Peut-être que nous en avons exagéré avec les chiffres. Voyons ce que nous pouvons faire à ce sujet. Étends ça ici. Maintenant, nous pouvons voir si c'était 70 %, peut-être que nous le supprimerons également. Cela représenterait environ 74 %. Et ce serait en gros 79. Nous avons donc maintenant l'axe Y, et il nous indique que nous devrions également, de préférence, étiqueter. Cela devrait donc dire que c'est la performance, que c'est le moment. Mais ici, dans ce cas, c'est logique, sont les mois, donc c'est clair et voici le pourcentage. Mais lorsque vous cliquez dessus, il devrait vous indiquer, d' accord, c'est ainsi que nous mesurons le pourcentage. Mais ici, nous ne sommes pas des mathématiciens, nous ne sommes pas des statisticiens Notre travail ne consiste pas à déterminer quel est le meilleur moyen mesurer les performances au fil du temps ou quoi que ce soit d'autre ou la productivité, mais nous essayons simplement de les représenter graphiquement. Habituellement, vous devriez avoir un numéro approprié quelque part. Je viens de me rendre compte qu'ils ne font pas partie de ce groupe, donc je vais juste les insérer dans le groupe, les placer correctement. OK. Nous y voilà. Je pense que c'est suffisant. Très bien, alors maintenant on change juste ça. Passons maintenant à d'autres aspects. Nous avons donc ces boutons ici, nous avons les notifications. Je ne veux pas trop changer. Je ne veux pas trop polir , car cela peut aussi se retourner contre Parmi les autres choses que nous pourrions faire, nous pourrions jouer avec l'espacement ici avec le rembourrage J'ai l'impression que nous avons peut-être mis trop de rembourrage. Mais cela dépend bien sûr de votre design. Je pense donc que nous pouvons peut-être simplement les réduire. Gardez le contrôle, puis vous pourrez en quelque sorte le recadrer. OK, donc maintenant nous avons plus d'espace. Nous avons économisé quelques pixels, ce qui nous permet d'économiser beaucoup plus d'espace. Et quand il s'agit de ça, une chose qui m'embête, c'est qu'on ne peut pas dire où ça s'arrête. Tu sais, c'est juste blanc. Je pense donc que nous pourrions peut-être lui donner une ombre. Voyons donc comment nous pouvons le faire, car cela peut être un peu délicat. Donc, si nous lui donnons un flou de 24 heures et que nous allons y jeter un coup d'œil. Et le principal problème qui se produit Oups. OK. Est-ce que vous pouvez voir l'ombre d'en haut, ce que vous ne voulez certainement pas. Donc, pour y remédier, je vais le donner, je vais fabriquer le Y 24, puis faire en sorte que le tout soit peut-être 15 % Voyons donc à quoi cela ressemble en ce moment. OK, c'est vraiment génial. Vous pouvez voir maintenant, parce que l'ombre descend beaucoup, elle se mélange, donc on dirait qu'elle n'est pas séparée d'ici, mais il y a suffisamment d'ombre pour vous montrer qu'il s'agit d'un menu latéral, et cela différencie ce menu du contenu de droite Donc c'est vraiment génial. Mais une chose qui me dérange encore ce sujet, c'est peut-être l' espacement Permettez-moi de maintenir la touche Ctrl Alt A enfoncée pour modifier toutes les instances, les différentes versions de celles-ci. J'édite ici et là en même temps. Je vais le diminuer et voir à quoi cela ressemble. Ce qui me dérange, c'est que lorsque vous mettez en évidence, il y a une grande différence ici Peut-être que ce que nous pouvons faire, c'est que je vais encore une fois contrôler Alt A, donc je choisis toutes ces options. Peut-être que je peux simplement ajouter plus de rembourrage. C. Avant de partir, je vais y retourner. Je vais m'assurer que cela va être difficile. C'est bon. Je reconnais que cela va être difficile. Je vais le faire 16 par 16. Maintenant, je vais écrire 53 et je vais en faire un format d'image verrouillé. OK, ou en fait, je vais supprimer le journal et je vais faire la même chose ici, je vais le créer. C'était combien ? 53. C'est bon. Voyons maintenant à quoi ils ressemblent. Maintenant, ils devraient être beaucoup plus gros, mais je vois qu'ils n'ont pas changé ici Cela signifie que nous avons un peu trop foiré les instances Cela se produit parfois si vous modifiez manuellement les instances. Alors maintenant, je vais juste les modifier manuellement ici. 53. Maintenant, voyons voir. Les boutons sont donc beaucoup plus grands, ce qui nous permet de les choisir beaucoup plus facilement notamment parce que nous n'avons pas beaucoup d'objets, cela fonctionne bien. Maintenant, nous pouvons revenir en arrière et faire en sorte l'espacement soit encore inférieur à quatre, non ? Maintenant, ils sont plus proches l'un de l'autre. Ainsi, lorsque vous survolez l'un d'entre eux, il y a très peu d' espace entre eux, et je pense que c' est ainsi que cela devrait être le plus possible. C'est mon propre goût ou les principes de conception, le style sur lequel j'ai été formée C'est à ça que ça ressemble le plus souvent. Donc oui, ça a l'air vraiment sympa. Tu sais, c'est un tout petit détail, mais ça fait toute la différence pour moi. Il se peut que le tableau de bord soit un peu trop court, nous pouvons donc l'étendre un peu. particulier, vous devez garder à l'esprit que lorsque vous localisez pour différentes langues, cela signifie que lorsque vous avez un produit, vous avez un design, puis vous allez avoir différentes langues ici Surtout lorsqu'il s'agit de langues spécifiques comme l'allemand, texte est très, très long. Donc, au lieu d'un tableau de bord, vous auriez un très long mot à dire. Dans ce cas, deux options s'offrent à vous. Vous allez soit libérer suffisamment d' espace pour que les utilisateurs puissent écrire leur version linguistique localisée, peu importe, soit vous allez devoir recadrer le mot, pas vraiment le recadrer, mais le couper. Ce sera B, point point point point. L'idée est que oui, le mot est trop long, il faut donc deviner de quoi il s'agit. Mais c'est vraiment mauvais pour les utilisateurs. Vous devriez essayer d'éviter cela, car au lieu d' afficher le tableau de bord, disons qu'il s'agit de mots beaucoup plus longs, comme « contrôle du tableau de bord ». Mais au lieu de dire contrôle du tableau de bord, vous dites simplement tableau de bord, contre, point point point. Alors ce n'est pas une arnaque compréhensible sur le tableau de bord, quoi ? Qu'est-ce qui est exactement décrit ici ? C'est ce qui arrive , honnêtement, avec des langues comme l'allemand, parce qu'elles ont de longs mots. La traduction du tableau de bord en allemand peut vous donner un mot très long, puis si le menu n' est pas assez long, s'il n'est pas assez large, il sera réduit et les utilisateurs ne comprendront pas de quoi il s'agit C'est tout ce que j' essaie de t'expliquer. L'idée est de vous assurer d'avoir suffisamment d'espace. Même si tu penses, hé, mes mots sont assez courts. Ils vont trouver leur place ici. Mais pensez d'une manière durable, long terme, en pensant à l' avenir et à ce qui va arriver. Et quand vous le ferez, les choses prendront tout leur sens. C'est bon. Maintenant que nous l'avons, je pense que le polissage est suffisant. Honnêtement, nous pourrions faire beaucoup plus, mais nous n'en avons pas le temps. Je pense qu'on devrait appeler ça une pause. Maintenant que nous nous sommes concentrés sur les éléments les plus importants susceptibles d'entraver l' expérience des utilisateurs, je pense que cela suffit et que nous pouvons passer à des choses plus importantes Merci beaucoup de m' avoir écouté, et je vous verrai lors de la prochaine leçon. 12. Créer des interactions : survol et états appuyés: avec votre design constituent un élément essentiel micro-interactions que les utilisateurs ont tout au long de leur interaction de tout design. Ils ont besoin de sentir qu'il est vivant, réactif, qu'il répond à leurs clics, à leurs survols, etc. C'est pourquoi nous utilisons la fonctionnalité d'interaction de Figma. J'espère que vous le connaissez. Nous l'avons utilisé un peu jusqu'à présent, mais nous allons maintenant l'utiliser un peu plus intensément Nous allons commencer à le faire très simplement. Nous n'allons pas aller trop loin, mais nous venons de créer ces billets Ce que nous allons faire maintenant, c'est créer une autre instance. OK, c'est comme ça que nous allons procéder. J'ai rendu tous les textes grisâtres, et ce que nous allons faire maintenant, c'est rendre au moins ce texte plus foncé C'est aussi simple que possible. Rien de trop fou. Ce que nous pourrions également faire, c'est renforcer les ombres, ce qui est facultatif. Maintenant, je vais le prototyper. Je vais accéder au panneau du prototype, prendre cette flèche, la placer ici, au lieu de cliquer sur un clic, je vais dire en survolant, animer intelligemment L'animation s'anime intelligemment et nous allons voir à quoi elle ressemble OK. J'aime beaucoup le texte et tout le reste, mais j'ai l'impression que l' ombre est trop visible. C'est bien par-dessus bord Ce que vous pouvez faire, c'est que nous pouvons le porter à dix et peut-être augmenter la position, faire le Y et le huit. Maintenant, c'est l'ombre qui s'y cache. Je pense que ce n'est pas mal du tout. Ce que nous pourrions également faire, c'est ajuster cela pour que cela se produise beaucoup plus rapidement. Au lieu de 300 millisecondes, 100, soit moins d' Ce qui est bien, c'est qu'on a l' impression que le site Web est plus rapide. Cela donne cette impression parce qu'il répond à vos survols beaucoup plus rapidement qu'auparavant. C'est une chose que nous pouvons faire. Nous pouvons passer aux autres éléments dès maintenant, un par un. Nous avons créé ce filtre. Je vais juste écrire un filtre. Pour ce faire, nous allons simplement copier-coller celui-ci ici et essayer de le rendre plus interactif. La façon de le faire est peut-être de le rendre un peu plus sombre. Assombrir un peu le texte, peut-être. Voyons voir. Nous devons donc le prototyper maintenant. Donc, sans appuyer mais en planant, nous y voilà. Ce n'est pas très facile à voir, pour être honnête. Je dois juste supprimer un peu ce mode. OK. Nous y voilà. Parfois, avec un trait, c'est difficile à voir sur figma parce que le trait est un peu trop fin pour cela, mais ça a aussi l'air sympa Peut-être qu'il fait un peu trop noir. Et nous pouvons aussi le faire d'une manière qui prenne un peu plus de temps, 200 ou 200 millisecondes, je trouve que c'est plutôt beau, plutôt génial Et nous pouvons aussi les rendre un peu plus sombres, le texte ici. Nous y voilà. Vous passez la souris dessus, vous appuyez dessus Parfait. Nous y voilà. OK. Maintenant, nous avons également ces boutons de menu, et nous avons ces boutons d'icônes. Ces boutons d'icônes se trouvent ici. Même s'il s'agit tous de boutons d'icônes, techniquement, c'est différent. Nous pourrions l'appeler boutons d'en-tête ou quelque chose comme ça. Très bien, alors comment ça marche ? Ce que nous allons faire en gros, c'est cliquer dessus de la même manière, créer une nouvelle instance, et rendre le remplissage un peu plus foncé, un tout petit peu. Et il en va de même pour l'icône elle-même. Voyons maintenant à quoi cela ressemble. Alors en planant, nous y voilà. est aussi simple que ça. Tu vois ça ? Potentiellement, nous pourrions également en augmenter la taille Pour être honnête, nous pouvons le faire 50 x 50. Ensuite, nous avons beaucoup plus d'espace entre eux autour d'eux, et de cette façon, nous avons plus d'espace pour cliquer sur le bouton , n'est-ce pas ? C'est donc chose faite. Ce que nous pourrions également faire, c'est que c'est du niveau professionnel. Nous pourrions en ajouter une version sur laquelle vous cliquez ou sur laquelle vous appuyez Lorsque nous maintenons les deux, nous cliquons sur le signe plus, le faisons glisser ici, et nous allons dire en appuyant sur. Alors tu les vois ? Nous appuyons dessus, puis ils se décolorent C'est pendant que vous appuyez sur. Hum, en ce moment, je pense que ça commence à boguer. Mais oui, cela devrait se produire en appuyant uniquement ou nous pourrions dire une fois que vous avez cliqué dessus. Donc, une fois que vous avez cliqué dessus, c'est l'état choisi. Mais ce n'est pas ce que nous voulons, mais en fait, nous pourrions peut-être le supprimer d'ici. Nous y voilà. Et nous pourrions le remettre en marche tout en appuyant sur. Lorsque vous passez la souris dessus, puis que vous appuyez dessus , cela devrait se transformer en cela Mais n'oubliez pas qu'il y a un survol. C'est ce qui gâche les choses. Le survol le ramène à l'état, puis revient ici et ainsi de suite Essayons-le à nouveau maintenant. Maintenant, tout en appuyant, je termine mon pressage et c'est fait. C'est parti. Bien entendu, le but n'est pas que quelqu'un clique pendant longtemps, mais qu'il clique une fois, puis ça ressemble à ça, puis ça apparaît Mais il n'est pas non plus nécessaire que ce soit comme cette couleur. C'est juste une couleur très forte liée à l'identité, mais ce n'est pas obligatoire. Mais c'est juste pour vous montrer à quoi cela pourrait ressembler. Passons maintenant aux boutons du menu. C'est bon. Donc, quand j'en ai plusieurs, j'aime les copier et les coller ici, les deux, puis je commence à prototyper Ensuite, nous le faisons en survolant et je peux faire la même chose ici, en survolant Ensuite, nous pourrions les ajuster avec les mêmes valeurs que celles que nous avons ici. Cette couleur, prenez-la ici, collez-la, et cette couleur aussi. Maintenant, pour ceux-ci, je ne vais pas créer de version pressée. Laisse-moi juste l'ajuster. Je ne vais pas créer une version pressée, mais plutôt une version qui est choisie, qui est sélectionnée. Lorsque vous êtes sur une page spécifique et qu'elle est sélectionnée, cela devrait apparaître. Je vais peut-être choisir la même chose ici ou, en fait, laisse-moi faire ça. Je vais les choisir et je vais les colorer. Ouaip. Je vais l'acheter et le rendre super léger. Bien entendu, il est toujours bon de donner ensuite des noms à vos variantes. Ici, je vais dire taper, et c'est par défaut, et je vais dire ici en survolant, puis en appuyant sur Même chose ici, je vais juste écrire du texte. Je vais choisir ces valeurs par défaut lors du survol lorsque vous appuyez sur le bouton. Nous pouvons également ajouter quelque chose ici et dire « réduire », « non ». Comme nous l'avons dit, ils sont par défaut. Mais ce sont des effondrements, vous vous effondrez oui et ici vous vous effondrez, non. Cela permet de mieux comprendre ce que vous avez, car maintenant, lorsque nous arriverons à cette partie ou que je vais la modifier ici, je vais choisir celles-ci et je vais les dire sous presse. Nous avons dit que nous ne voulions pas que cela soit publié sous presse, mais plutôt sélectionné. Exactement. Maintenant, lorsque nous passons à notre design, il nous indique sur quelle page nous nous trouvons, ce qui est vraiment cool, vu l'effet de survol C'est vraiment sympa. C'est vraiment cool. Il ne nous reste plus qu'une chose à faire, à savoir prototyper ce panneau qui sortira, tout en faisant en sorte que celui-ci soit également pliable Nous pouvons faire la même chose pour les deux. Nous devons juste trouver comment. Et ce n'est pas trop difficile, alors faisons-le dans la prochaine leçon. Merci beaucoup de m' avoir écouté. Je te verrai dans le prochain. 13. Creating Collapsing Feature of Panel: Je crois que je vous ai assez taquiné à propos de cette jolie petite interaction qui consiste à plier ces panneaux, celui de droite, et à agrandir celui de gauche Maintenant, ce ne sera pas une astuce si facile, vous devez donc faire attention car moi-même je ne sais pas exactement comment je vais m'y prendre. Il existe de nombreuses façons de procéder pour y parvenir, et nous allons simplement essayer l'une d'entre elles et voir ce qui en ressort. J'aimerais d'abord me concentrer sur la création d'une interaction pour celui-ci, juste pour le réduire et le remettre en place. Et la façon de le faire est, je veux dire, qu'il existe différentes façons de le faire, non ? Mais l'une des façons de le faire est qu'il existe une sorte d'icône que beaucoup de gens créent. Je vais juste vous montrer à quoi cela ressemble, en le créant très rapidement. Il y a généralement une ligne comme celle-ci au milieu, pas juste au milieu, mais sur le côté. Et il y a une flèche. OK. Donc ça ressemble un peu à ça. Je pense que nous pourrions en faire usage. Mais il ne va pas exactement là où nous voulons qu'il aille. C'est un peu difficile à contrôler. Mais je pense que nous allons trouver une solution. C'est suffisant. Je vais juste le prendre ici. Oups. Je vais y mettre celui-ci. Je vais changer ça. Oups. OK. Je vais le couper et l'ajouter ici. OK. Ensuite, je vais changer les couleurs. Je vais faire en sorte qu'il fasse vraiment noir, pas trop. Voyons à quoi cela ressemble s'il est visible. OK. Ce n'est pas si visible, pour être honnête. Et nous voulons qu'il soit perçu comme étant compris par les gens. Alors peut-être allons-le un peu plus grand. L'idée est qu'il montre un panneau latéral ici. Nous pouvons également essayer de le rendre un peu plus épais. Cela n'a pas très bien fonctionné. Revenons donc à ce qu'il était et essayons de le faire fonctionner. Maintenant, nous l'avons et ce que nous allons faire, c'est le prendre, nous allons le coller ici et nous allons faire tout cela un composant et nous allons l'appeler un panneau de tâches. Ensuite, nous allons en ajouter cette instance. Dans ce cas, nous allons essentiellement le fermer comme ça. D'accord, ce que nous faisons, c'est essentiellement fermer tout cela, puis nous allons prendre tout le contenu que nous avons à part l' icône que nous venons de créer Nous allons prendre tout le contenu jusqu'ici et le déplacer vers la droite pour qu' il disparaisse en gros Alors peut-être que nous pourrions même le réduire. Voyons maintenant à quoi cela ressemble. Peut-être que nous allons nous en occuper. Ensuite, nous en ferons un joli petit bouton. Nous allons transformer cela en cela, mais pas en cliquant sur le panneau, mais en cliquant sur ce bouton, cela se transformera en ceci et cela prendra peut-être 300 millisecondes Ensuite, lorsque nous cliquons sur ce bouton, il revient en arrière. Ouais. Alors peut-être devrions-nous inverser ce bouton. Il fait référence à ce chapelet pour qu' il soit entendu que lorsque vous cliquez dessus, il va s'inverser Maintenant, nous allons le retirer, le garder de côté, et nous allons ajouter ce panneau. Nous allons l'aligner ici et voir comment cela fonctionnerait maintenant. Eh bien, c'est très chouette. Vous pouvez voir que cela a très bien fonctionné, a une jolie petite animation. Mais il y a un problème. Nous ne voulons pas qu'il s'effondre ici, nous voulons qu'il aille vers la droite et nous voulons que tout cela s'étende. Ce qui va également être un peu délicat. Pour ce faire, nous allons conserver ces trois éléments et faire une mise en page automatique. Ensuite, ce que nous allons faire, c'est les mettre sur le côté et nous allons arriver à ce petit tableau de bord. Et lorsque nous étendrons ce tableau de bord, vous vous rendrez compte que les choses deviennent incontrôlables. n'est pas ce que nous voulons. Nous voulons que les choses restent les mêmes lorsque nous les déplaçons. Je vais choisir tous les éléments et je vais les encadrer, puis je vais les centrer de haut en bas. Maintenant, lorsque nous le déplacerons, ils resteront centrés. OK. Maintenant, ce que nous allons faire, c'est passer à cette mise en page automatique et nous allons lui dire que pour ce cadre, il remplira le conteneur autant que possible, sauf que nous allons ajouter un peu de rembourrage sur la droite parce que nous ne voulons pas que l'espace sur la droite soit encombré comme ça Tu vois ? Nous allons donc le dire sur la droite. Nous allons cliquer ici et dire à droite, nous voulons 24, maintenant ça a l'air en bonne santé. Maintenant, revenons en arrière et voyons que quelque chose ne va pas. Rafraîchissons ceci. Très bien, voici à quoi ça ressemble. Et lorsque nous cliquons sur le bouton de réduction, il va le réduire, comme vous pouvez le voir, et il va simplement garder ce bouton ici. Maintenant, cet espace est encore un peu gaspillé, pour être honnête, ce qui ne me plaît pas. Mais le but ici est de mettre davantage l'accent sur ce que vous avez ici. Alors gardez cela à l'esprit, ne vous laissez pas distraire par autre chose C'est une fonctionnalité vraiment intéressante que vous pouvez créer, mais nous voulons créer quelque chose de similaire pour la gauche, mais pas nécessairement avec ce bouton, mais plutôt avec autre chose. Et juste pour le faire jusqu'au bout, je veux m'assurer que nous en avons également une version. Nous allons le copier-coller. Je veux une version de ce document qui soit mise en évidence. Celui-ci a cette couleur, mais il devrait en fait être blanc. Lorsque vous le surlignez, il deviendra un peu plus sombre. Nous allons donc ajouter une interaction avec le pointeur de la souris. Il est 200 et voyez à quoi il ressemble. Nous y voilà. Mais il fait un peu trop sombre. Laisse-moi tricher à partir d'ici, prends cette couleur. C'est bon. C'est juste ici, et nous pouvons peut-être rendre la couleur elle-même un peu plus foncée. OK. Je ne le vois pas très bien parce qu'il est trop fin. Mais oui, voilà. Maintenant, vous avez une certaine interaction ici, ce que j'adore vraiment. C'est une fonctionnalité vraiment intéressante. Très bien, nous avons maintenant appris à créer un menu de panneau latéral pliable ou quel que soit le nom que vous voulez lui donner. Dans la leçon suivante, nous allons apprendre comment créer une fonction de survol ici Maintenant, comme je l'ai mentionné, nous allons procéder un peu différemment. Au lieu d'avoir ce bouton ici, comme beaucoup de gens le font, je veux qu'il fonctionne avec une fonction de survol Ainsi, lorsque vous passez la souris dessus, il vous montrera les objets Si vous ne le survolez pas, il va continuer à s'effondrer comme ça parce que vous n'en avez tout simplement pas besoin OK, alors je te verrai dans la prochaine leçon. 14. Créer une interaction avec la barre latérale.: Maintenant, pour ce qui est de mon prochain tour de magie, je vais ajouter une fonction de survol qui vous montre la version non réduite du menu latéral, complètement ouverte avec tous les titres et le texte, etc. OK ? Nous y sommes donc presque parce que nous avons déjà ces deux instances, donc nous nous sommes vraiment simplifiés les choses . Nous pouvons le nommer ici. On pourrait dire, vous savez, un effondrement. Et puis on pourrait dire ici, non, et ici on peut dire oui, partiellement effondré. Très bien, comment faisons-nous ? Eh bien, ce n'est pas si difficile. Vous allez simplement accéder à la page du prototype ici, vous allez arriver ici et vous allez cliquer en survolant Le déclencheur est que lorsque vous le survolez, il passe à la version non réduite, et cela se produira avec l'animation Smart Anim Ease out 500 out Maintenant allons-y et voyons à quoi cela ressemble. Voilà. Ça a l'air vraiment chouette. C'est très bien, mais peut-être que tu peux le faire un peu plus vite. Donc 300 peut-être. Et vous pouvez passer en revue chaque élément de la liste, et c'est à peu près tout. Mais ce n'est pas simple, car nous avons actuellement un problème. Lorsqu'il se déplie, lorsqu'il s'étend, il recouvre une partie du tableau de bord d'une manière très peu complémentaire. Et le moyen de s'en débarrasser est peut-être d' aller de l' avant, d' en arriver à ce cadre dans son ensemble et de le faire en sorte qu'il englobe le contenu. Donc, lorsque cela se produit, lorsque nous faisons cela, le tableau de bord va se déplacer vers la droite avec les tâches. Mais veillons à ce que cela ne gâche pas notre effet ici. Et c'est malheureusement le cas. La raison en est que lorsque vous faites cela, vous indiquez le cadre, vous étreignez le contenu, ne l'agrandissez pas, vous n'allez pas plus loin. Si ce contenu devient plus petit, vous devriez diminuer avec le contenu. S'il grossit, vous grandissez avec lui. Mais ces deux effets vont désormais à l'encontre de l'autre. Nous devons maintenant trouver un moyen de les faire s'entendre. Je vais le faire en fabriquant ce conteneur à cadre plein. Mais le problème, c'est que dès que vous le faites, cette largeur de l'ensemble du cadre passe du statut de contenu fixe à celui de contenu fixe. Lorsque vous faites le contraire, cela passe du statut de remplissage à celui de fixe. Comme vous pouvez le constater, ils sont totalement opposés. Ils s'éteignent mutuellement. Il existe une solution. Ce ne sera pas exactement ce que nous voulons faire. Mais pour ce faire, vous allez le mettre dans une mise en page automatique à part entière, mais au lieu de le mettre en forme, vous allez lui donner une largeur fixe. Cela signifie que lorsque le menu s'agrandit, le cadre qui le contient ne s'agrandira pas avec lui. L'effet qui en résulte est celui que vous voyez en ce moment. Il se dilate donc, mais pas avec le cadre, rien d'autre ne bouge. Mais ce que nous voulons, que l'ensemble de ce menu se en haut du tableau de bord, et non derrière celui-ci. Voici comment le résoudre. Vous allez cliquer sur le cadre et vous allez passer à ces ajustements en ce qui concerne l'empilage des toiles Au lieu de terminer en haut, vous allez dire le premier en haut La première couche ici va être au-dessus de l' autre et vous l'avez là. Bien entendu, cela ne maintient pas l'effet que nous souhaitons avoir là où cela apparaît essentiellement comme s'il s'agissait de fenêtres. Mais je pense que c'est bon. Nous pouvons vivre avec cela et nous pouvons retourner ici et le configurer pour remplir le conteneur afin que cette astuce fonctionne. Maintenant, regardez comment cela fonctionne. Donc, de ce côté, ça marche et de ce côté, c'est extensible et ça a l'air plutôt chouette Nous avons nos projets, nos tâches, notre calendrier, notre équipe, tout ce dont nous avons besoin, et cela a un petit effet sympa. Maintenant, une chose qui, pour être honnête, m' agace un peu, c'est que parfois, tu sais, ce n'est pas ça Il y a une autre couche, une couche supplémentaire. Parce que et si je voulais cliquer sur l'icône, mais dès que j'y arrive, vous ne faites que déplacer des objets. Et il existe une solution à ce problème. Ainsi, au lieu d' utiliser le survol tout en survolant comme déclencheur, vous devriez utiliser la la souris, car la souris Entrée indique : «  Lorsque la souris entre dans cet objet, elle va se développer ou effectuer cette action », mais vous êtes autorisé à ajouter un délai Par exemple, 500 millisecondes. Ainsi, ce qui se passe alors lorsque vous passez la souris dessus ne s'étend pas immédiatement Vous devez survoler puis 500 millisecondes plus tard, il s'ouvrira Je vais en faire 1 500 en fait. Cependant, il y a un problème. Une fois que vous le survolez, il ne revient pas en arrière. Pour résoudre ce problème, vous devez revenir à ce cadre et lui donner une interaction, et le déclencheur doit être le départ de la souris. Une fois que la souris s'en va, après 1 500 millisecondes, vous avez également une option Vous avez un délai, puis il va s' effondrer. Voyons à quoi ça ressemble. Vous passez la souris dessus, puis un peu plus tard, il s'ouvre. Tu l'enlèves. Puis elle se ferme. Ce qui est vraiment cool, c'est que cela peut sembler une petite différence, mais c'est exactement le but de l'expérience utilisateur. Il s'agit de ces petites micro-interactions. Ce qui est cool, c'est que cela donne à l'utilisateur, tout d'abord, possibilité de passer très rapidement d'un onglet à l'autre car il y a des utilisateurs expérimentés veulent passer très rapidement onglet à l'autre. Ils veulent cliquer ici et là. Donc, le fait de l'étendre n'aide pas la personne. Cela les empêche de faire des choses, non ? Et c'est comme une animation supplémentaire qui n'a pas besoin de se produire. S'ils cliquent déjà sur la page qu'ils souhaitent consulter, vous n'en avez pas vraiment besoin. pourquoi c' est cool, car cela ajoute un délai au cas où quelqu'un ne serait pas vraiment familier ou si quelqu'un est un nouvel utilisateur et qu'il se demande : « Hé, c'était quoi cette page ? Ensuite, cela prend ces trois secondes supplémentaires , puis cela leur ouvre la porte. Et leur dit, d'accord, voici une explication de tout. dirait que vous ne vous y connaissez pas, alors voici tout expliqué. Ensuite, une fois que vous vous déplacez et voulez toujours revenir, vous avez encore le temps. C'est pourquoi l'effondrement est également retardé. Mais une fois que tu auras dit « Hé, j'ai terminé », je dois vérifier ces choses, puis tout s'arrêtera. Mais je vais le faire au lieu de 1 500, je pourrais le faire en 1 000 millisecondes Retarder, je pense que c'est plus que suffisant. Voyons maintenant à quoi cela ressemble, puis je choisis où je veux, et c'est terminé. Boum. C'est aussi simple que ça. Ça ne sera pas plus facile. Et oui, je trouve ça vraiment cool. Nous avons maintenant une très belle mise en page interactive, et elle semble vivante, non ? On dirait que c'est personnalisable. Vous pouvez dire : « Hé, je veux voir les tâches ». Je ne veux pas voir la tâche. Je veux voir si je veux filtrer l'année. Non, en fait, je veux ouvrir le menu ici et vérifier d'autres choses. Tout à fait OK, totalement faisable. C'est vraiment génial. Et cela ne fait que renforcer l'expérience utilisateur. Maintenant que c'est fait, dans les prochaines leçons, nous allons faire deux autres choses. L'une d'elles est que nous allons peaufiner un peu notre interface. Nous avons commencé avec beaucoup d'enthousiasme et nous avons fait beaucoup de choses Mais il est peut-être temps pour nous de revenir en arrière et de repenser certaines d'entre elles. regardant très rapidement, je pourrais dire : « Hé, les couleurs sont un peu trop vives. Je ne parle pas de changer les couleurs, toutes les couleurs immédiatement, mais peut-être de jouer avec elles, les rendre un peu plus claires, les développer parce nous voulons nous assurer que l'attention de l'utilisateur est dirigée vers les choses sur lesquelles il devrait réellement se concentrer. OK. Et en plus de cela, nous allons ajouter d'autres fonctionnalités. L'une de ces fonctionnalités concerne donc les notifications. Nous pouvons également faire quelque chose avec l'historique, le profil, la recherche. Ce sont toutes des possibilités de ce que nous pourrions faire. En plus de cela, j' aimerais également créer la possibilité pour nous d'accéder à une autre page. Maintenant, juste pour vous prévenir, je ne pense pas que nous ayons le temps remplir ces pages avec un contenu significatif, mais je pense que nous devrions prototyper le processus de passage d'une page à l'autre. C'est bon. Merci beaucoup d'avoir regardé, je vais voir la prochaine leçon. 15. Scrolling: Très bien, maintenant nous avons une très belle mise en page. Mais il y a une chose qui manque encore ou peut-être que cela pourrait être un petit ajout intéressant, et c'est en fait cette partie ici. Nous avons les tâches, mais vous pouvez voir que l'une d' entre elles est interrompue, et ce n'est pas par erreur. Si tu le sais, tu le sais. Il s'agit essentiellement d'une petite fonctionnalité intéressante, d'une petite astuce que les concepteurs et les ingénieurs utilisent beaucoup et qui vise essentiellement à montrer qu'il y a plus de contenu. C'est ce qu'on appelle une sorte de teaser ou du moins je l'appelle comme ça. Je taquine le contenu et cela vous montre qu'il est possible de faire défiler la page vers le bas et de voir de plus en plus Voyez si nous avions façonné tout cela, si nous l'avions dimensionné de manière à ce que la dernière carte arrive ici, alors vous n'auriez aucune idée qu'il y en a d'autres. Maintenant, allons-y et examinons notre design ici. Nous avons ces fonctionnalités intéressantes. Nous les avons construits. Mais maintenant, je veux faire défiler la page vers le bas, mais ce serait vraiment cool si je pouvais faire défiler la page vers le bas dans ce panneau. Comment pouvons-nous le faire ? Au lieu de modifier ici, assurez-vous d'accéder au composant lui-même. Vous ne souhaitez pas effectuer de modification à l'aide d'une instance. Vous voulez vous assurer que vos modifications sont enregistrées sur le composant principal, venez ici et voici ce que vous allez faire. Vous allez vous rendre panneau des prototypes juste ici, et vous allez passer à l'onglet Prototype. Et tu vas en arriver à déborder. trop-plein signifie que tout ce qui passe au-dessus du cadre, au lieu de le faire défiler, est réglé à Maintenant, bien sûr, cela dépend. Est-ce un défilement vertical ou est-ce que c'est droite et à gauche comme à l'horizontale ? Ou est-ce que c'est dans les deux sens ? Eh bien, pour nous, c'est vertical. Maintenant, vérifions-le. Voilà. Vous pouvez donc faire défiler l'écran vers le haut et vers le bas et vous pouvez voir des choses. Je veux dire, ça se coupe un peu. C'est un peu recadré d'ici. Ce n'est pas parfait, mais ça marche. Donc c'est vraiment bien et nous avons quelque chose de bien à faire. Maintenant, une façon de résoudre ce problème serait de créer le tout dans une mise en page automatique. Mais pour le moment, il est un peu trop tard pour le faire car cela va gâcher beaucoup de choses. Mais je veux dire, on peut essayer. Alors voyons voir. Eh bien, nous allons juste le faire. OK. Et nous allons amener ce mauvais garçon. Nous allons l'apporter ici. Ensuite, nous allons configurer les valeurs. OK. C'est bon. Nous voulons donc nous assurer que la taille est exactement la même que celle que nous avions auparavant, soit 839 Au lieu d'être un câlin, il devrait être 839, puis nous pourrons modifier l'espacement Je vous recommande de les assembler et de les assembler dans une mise en page automatique. De cette façon, ils sont plus proches l'un de l'autre. Ils ont, par exemple, un espacement de 16, puis vous pouvez donner 24 à tout le reste Maintenant, vérifions-le. Je vais juste me rafraîchir. Maintenant, lorsque vous faites défiler la page vers le bas, voyons voir. C'est bon. Il reste encore une chose à faire, c' est de tout mettre dans une mise en page automatique , puis d'aller dans le cadre principal et de supprimer le défilement Faites en sorte qu'il ne fasse pas défiler. Nous avons maintenant une mise en page semblable à un cadre dans un cadre, et nous allons ajouter un peu d'espacement ici Encore un petit peu. Nous essayons simplement de nous assurer que le tableau de bord et les tâches ici sont alignés. Je vais juste lui en donner quatre. Voyons maintenant à quoi cela ressemble. Eh bien, il y a encore une chose à faire. Maintenant que vous voyez ça, ça déborde. Ce que tu vas faire, c'est le faire tomber. Tu vas l' apporter ici. Ou ce que vous allez faire, c'est le faire remplir un récipient et ensuite, juste comme ça, nous le réparons. Vous pouvez faire défiler l'écran vers le haut pour avoir suffisamment d'espace vers le haut, et lorsque vous faites défiler l'écran vers le bas, vous verrez qu'il y a suffisamment d'espace. Ça baisse, et oui c'est à peu près tout. Si nous avons fait tout cela, c'est parce que c'est plus propre. Cela fonctionne mieux car vous avez maintenant des mises en page automatiques. L'espacement est parfait entre eux, et de cette façon, nous pouvons avoir un très bel espacement par rapport à un espacement constant C'est bien, c'est logique et ça marche. Donc oui, c'est essentiellement ainsi que vous pouvez créer un défilement. Et juste pour bien comprendre, je vais simplement copier l'une de ces cartes plusieurs fois pour ces cartes plusieurs fois vous montrer jusqu'où nous pouvons faire défiler la page vers le bas. Donc, si vous aviez beaucoup de tâches, voici à quoi cela ressemblerait. Il suffit de faire défiler l'écran vers le haut et le bas pour voir beaucoup de choses. Maintenant, je ne le recommanderais pas. Je vous recommande moment donné de dire «   afficher toutes les tâches ». Cela aurait beaucoup plus de sens. Mais oui, le but de cette leçon était d'apprendre à faire du défilement et vous apprenez à le faire, félicitations Je te verrai dans la prochaine leçon. 16. Creating a Pop-up Notification Panel: C'est bon. Donc, une chose qui manque à ce design en ce moment , après tout ce que nous avons fait, c'est peut-être une certaine interactivité dans ce domaine. Maintenant, nous avons déjà intégré des effets de survol, ce qui est plutôt cool, je dois dire Mais peut-être pouvons-nous faire en sorte qu' ils soient cliqués, non ? Et si on cliquait dessus ? Nous avons également ces articles de presse, ce qui est également cool. Mais qu'en est-il de voir un véritable panneau qui affiche les notifications ? Allons-y et concevons-le très rapidement. Il existe donc différentes manières de procéder. Vous pouvez créer un écran complet pour les notifications. certains sites Web, vous savez, lorsque vous cliquez sur les notifications, vous accédez à une page complètement différente, mais je n'aime vraiment pas ça. Personnellement, j' aime quand vous avez un panneau qui n' occupe pas la totalité de l'écran, mais une partie de l'écran, et qui affiche les notifications une par une, puis vous pouvez, si vous voulez voir toutes les notifications, passer à une autre page parce que c'est juste plus rapide. Vous n'avez pas besoin de changer de page et vous pouvez simplement vérifier très rapidement. Allons-y et concevons-le. Donc, la première chose que nous allons faire est de créer un cadre, de nous procurer l'outil de cadre et de créer quelque chose Je suis en train de le regarder en ce moment, mais nous pouvons le changer Je vais l'élargir un peu, puis lui donner un certain rayon d'angle, pour m'assurer que c'est pareil. Ensuite, nous pouvons également lui donner une ombre tombante similaire. Maintenant, nous l'avons. La première chose que nous allons faire est de lui donner un titre. À l'intérieur, nous allons écrire quelque chose , en faire une mise en page automatique et lui donner 24. Et je vois ce que tu penses, oh, on a juste regardé la taille et puis, tu sais, on l'a complètement gâchée Eh bien, tu as raison. Nous allons donc appeler ce centre de notifications. C'est bon. Ou disons simplement les notifications. Il suffit de rester simple. Ensuite, nous allons créer ces cartes de notification. Ils seront donc similaires aux tickets. Ce ne sera pas quelque chose de complètement différent. Donc, prenons cela comme base, collons-le, cliquons avec le bouton droit de la souris, détachons Instance, puis allons-y, vérifions-le et voyons comment nous pouvons le changer Une chose qui pourrait nous être utile est d'avoir l'heure, une date et une heure, pas de pièces jointes, pas de personnes. Oui, c'est plutôt cool d'avoir du temps pour ça, et nous n'avons pas nécessairement d'une icône , pour être honnête, donc nous pouvons simplement le supprimer puis nous retirerons ce cadre, et nous pourrons peut-être y mettre la date. OK. Et maintenant, nous avons ces deux-là. Et puis ce que j' aimerais faire en plus c'est créer un cercle ici. Je vais en faire un cadre, lui donner une couleur et lui donner un rayon de 50 angles. C'est maintenant un endroit où nous pouvons y ajouter une icône. Créons simplement une icône, mettons la lettre A et écrivons génial. Ensuite, nous allons simplement écrire une exclamation. Oups, exclamation. Marque ou point, point d'exclamation. Cela n'a pas marché. Faisons juste un point d' interrogation ou vous pouvez peut-être simplement mettre un point d' interrogation, espérons-le. Nous n'avons pas de solide. Voyons donc simplement l' exclamation. C'est ça. C'est tout ce dont nous avions besoin. Nous allons le mettre ici, puis nous allons en faire une mise en page automatique et nous assurer qu'il a un rapport hauteur/largeur verrouillé, et nous allons voler la couleur d'ici, mettre là, et OK. C'est de couleur très claire. OK, c'est très clair, mais on peut le changer et le rendre un peu plus sombre. Pas de soucis. Très bien, maintenant ça ressemble à ça. Je ne suis toujours pas très content. Vous pouvez simplement le supprimer complètement et n' avoir qu' un seul titre pour les notifications. Il est toujours bon d'essayer de se demander quel type de notifications je pourrais recevoir. Je vais donc les ajouter dans une mise en page automatique, et les mettre également dans une mise en page automatique. Nous allons en faire huit, puis les mettre dans une mise en page automatique. Ensuite, nous allons faire de tout cela une mise en page automatique. Oui, ça marche. Cela fonctionne d'une manière ou d'une autre. OK. Peut-être que nous pouvons diminuer le rayon des coins ici et pareil pour le rembourrage C'est bon. Nous allons maintenant en faire un composant et le tester. Nous allons parler de notification. Maintenant, nous l'avons sous forme de notification, copions-la, collons-la ici, puis nous allons la rendre verticale, et nous allons lui donner 36, puis nous allons copier-coller, copier-coller. Rassemblez tout cela dans la mise en page automatique. 16 ou 8 ans, puis nous les avons ensemble, près les uns des autres. Ensuite, ce que nous allons faire, c'est lui donner un contenant de remplissage. Nous allons le faire remplir le récipient, puis nous allons faire en sorte que tous ces éléments remplissent également le récipient. Ici, nous remarquons déjà un problème. Cela fait partie intégrante du processus. Vous vous rendez compte que vous avez ici une valeur d'espacement spécifique. Mais en réalité, il devrait être en mode automatique. Cela permet de lancer ces trois points jusqu'au bout. Ici, cela n'a pas l'air différent, mais maintenant vous pouvez voir que cela vient d'être corrigé. Maintenant que nous avons ces notifications et qu'elles viennent d'être lancées, nous pouvons en avoir plusieurs et, comme avant, nous pouvons également ajouter d' autres notifications afin que la personne doive faire défiler la page. Cela ne pose absolument aucun problème. Il ne nous reste plus qu'à revenir en arrière et à les rendre un peu neutres Nous allons donc simplement dire la date et le titre de la notification. Nous remarquons maintenant qu'un autre problème est qu'il n'y a pas de remplissage ici. Alors peut-être que nous voudrions le faire remplir le récipient. Même chose pour celui-ci, alors remplissez le récipient. Vous pouvez le faire en maintenant la touche Alt enfoncée et en double-cliquant. Pareil, c'est déjà fait, c'est bien, voilà bien Bam OK, donc le titre de la notification, puis vous pouvez voir, vous pouvez dire ici, une description, description très rapide ou un résumé. Vous pourriez donc dire ici qu'une tâche urgente nécessite une attention particulière. Vous n'avez pas respecté la date limite pour une tâche marquée comme urgente. Prends soin de toi, prends soin de da da da da, puis le message continue. C'est bon. Nous pouvons donc faire la même chose pour les autres, mais l'idée principale est que nous pouvons également changer d'icône afin de pouvoir écrire ici la question. OK. Et maintenant je remarque un autre problème Le texte est aligné sur la gauche. On y retourne, on l' aligne au centre. Maintenant c'est centré. Parfait. Et si vous remarquez, je veux dire, c'est une tâche urgente, mais elle n'en a pas l' air. Il se mélange simplement aux autres. Eh bien, c'est à cause des couleurs. Maintenant, quand nous choisirons une palette de couleurs plus urgente comme celle-ci, je volerai cette couleur ici. Cela semble alors beaucoup plus urgent. C'est ce que j'aime dans le fait d'avoir ces cercles, ces images ou icônes ou tout ce que vous pourriez utiliser, c'est qu'ils donnent une idée en utilisant des couleurs, en utilisant des formes, et ils vous disent : « Hé, il se passe quelque chose ». Ici, vous pouvez voir le point d' interrogation et vous pouvez voir qu'il y a un problème. Ici, vous pouvez indiquer qu'une activité suspecte a été détectée. Avez-vous connecté votre compte depuis un autre appareil ? Veuillez vérifier abla. OK. Ensuite, nous pouvons donner le 14 janvier, le 7 janvier, le 16 janvier ou devrions-nous dire juillet juillet ? C'est bon. Et puis vous pouvez avoir beaucoup d'autres icônes. Les icônes peuvent aussi être très intéressantes, je ne sais pas. Je veux dire, nous pouvons revenir à celui-ci et faire en sorte que ce soit chronométré. Horloge, quelque chose comme ça, puis nous pourrons avoir d'autres types de notifications. Mais surtout, voyons comment nous pouvons lier ce panneau de notification ici à ce bouton. Alors, comment allons-nous le lier ? Nous allons passer au prototype, et maintenant nous voyons déjà que nous avons un effet de survol, aucun problème, aucun problème Nous allons le traîner jusqu'ici. Maintenant que nous l' avons, nous allons dire : OK, vous allez cliquer lorsque vous cliquez dessus, n' est-ce pas ? C'est donc le déclencheur. L'action va être une superposition ouverte. La superposition est le cadre 67. Nous pouvons lui donner un nom. Nous pouvons dire notifications, pop up ou fenêtre ou quel que soit le nom que vous voulez. Et puis tu le vérifies, non ? C'est la bonne. Au lieu d'être centré, vous allez choisir le manuel, puis vous allez le placer là où vous le souhaitez, pour être honnête. Voici donc très bien placé. Vous pouvez également assombrir un peu l' arrière-plan. En réalité, la plupart des applications ne le font pas, et oui, vous n'avez pas vraiment besoin d'animation Maintenant, voyons à quoi cela ressemble. Nous allons maintenant cliquer dessus. Ça y est. Il y a un problème, c'est qu'il se mélange trop à l' arrière-plan. Vous pouvez résoudre ce problème de deux manières. Soit vous allez faire de l'arrière-plan, soit vous allez donner une couleur à l'arrière-plan. C'est une astuce pour y parvenir. C'est vraiment bien parce que cela vous permet de vous concentrer entièrement là-dessus. Cela détourne l'attention de tout le reste, n'hésitez pas à l'utiliser s'il fonctionne pour vous. Mais à part cela, une autre chose que vous pouvez faire est d' essayer de rendre ce panneau plus intéressant. Cela peut être dû à la couleur. C'est peut-être avec des ombres. Nous en avons 5 %. Nous pouvons le faire à 50 %. Et cela semble vraiment horrible en ce moment, mais ce n'est qu'une idée de ce que vous pourriez faire Redonnons de la couleur . Essayons peut-être de travailler uniquement avec les ombres. Mais oui, avec les ombres, c'est beaucoup mieux maintenant. Mais je dirais quand même, vous savez, essayez peut-être de faire un mix. Essayons donc de le faire maintenant. Nous allons donc donner un aperçu, mais ce ne sera que 10 %. Et oui, c'est beaucoup plus joli. Très bien, je répète, en l'ouvrant. Voilà. Ce sont des notifications. Assurez-vous simplement d'avoir une issue , car lorsque les utilisateurs appuieront dessus, ils recevront des notifications. Ils doivent cliquer dessus. Donc, soit cliquez en dehors de celui-ci, ce qui est un paramètre que j'ai inconsciemment mis ici Si ce n'était pas le cas, vous cliqueriez ici et là et peu importe, et vous ne pourriez pas sortir. Donc, si c'était le cas, vous devez avoir un bouton X ici. Juste pour que les gens puissent annuler la fenêtre contextuelle, la fermer et passer à autre chose. Assurez-vous simplement que c'est coché et que cela a du sens. C'est ce que font de nombreuses applications. On dirait une fenêtre. Une fois que vous avez cliqué en dehors de celui-ci, il disparaît. Je voulais juste revenir ici et vous dire, au fait, que vous n'avez pas besoin de prendre cette configuration exacte. Par exemple, si nous supprimons les ombres ici. Maintenant, vous voyez les notifications, elles fonctionnent toujours sans ombres, très bien. Sinon, vous pouvez prendre une ligne. Je vais coller la ligne ici et je vais remplir le contenant, et je vais le rendre un peu génial. Voilà. Juste une ligne comme ça. Je vais l'alléger, puis le copier-coller, copier-coller, le copier-coller, puis vous aurez ces séparateurs entre chaque notification, et vous aurez une idée des notifications que vous avez Je vais le reprendre. À propos de mon style. Je préfère les ombres, donc je vais m'en tenir à cela, car parfois, si vous voulez vous assurer que chaque élément et chaque coin sont visibles, vous accordez trop d'importance, vous mettez trop de pression sur l'utilisateur pour qu'il perçoive tout cela. Ces cartes ont du sens parce que vous devez savoir que chacune d'elles est une carte distincte que vous pouvez déplacer, que vous pouvez changer , peu importe. Mais ici, ce n'est pas le cas. Maintenant, une chose que nous pouvons faire est d'ajouter un effet de survol. Nous l'avons déjà fait. Nous pouvons le refaire. Je peux juste ajouter cette ombre à 10 %, puis je pourrais la rendre un peu plus foncée. Et c'est encore plus sombre. Alors je vais juste en faire un effet Haber. Voyons à quoi ça ressemble. C'est très rapide. Nous allons donc faire Smart Animate 200 et nous allons nous calmer Nous allons lui donner 5 %. Maintenant, regardez à quoi ça ressemble. Avec ce changement de couleur, c'est un peu trop, donc je vais le remettre là où il était ou du moins essayer de le faire. Eh bien, ce n'est plus visible. Un tout petit peu plus foncé Ok, ça a l'air plus naturel, et maintenant c'est mieux. Cela semble plus interactif maintenant que nous pouvons choisir ces éléments, au moins passer la souris dessus, puis passer à autre chose OK ? Une autre chose que nous pouvons faire est le défilement J'essaie de faire défiler la page depuis longtemps. Je ne sais pas si vous l'avez remarqué, mais ce serait une fonctionnalité intéressante à ajouter. OK ? Donc, comme nous l'avons appris auparavant, nous allons faire en sorte que cela remplisse le récipient. Donc, tout comme il va être coupé et que vous pouvez voir qu'il y a plus de contenu. Accédez au prototype et cliquez sur Vertical cette fois. Je veux dire, la dernière fois que nous avons fait de la verticale aussi, vous pouvez ensuite faire défiler la page vers le bas. Très bien, c'est aussi simple que ça. Il y a juste une chose qui m'embête. Visuellement parlant, vous pouvez constater que les notifications ne sont pas alignées avec les cartes. Lorsque vous les survolez, cela a du sens, mais nous voudrions peut-être changer cela Si vous vouliez faire une telle chose, vous le réduisez peut-être à 12 et vous ne donneriez que des notifications. Vous le mettriez dans son propre cadre et vous lui donneriez 12 % de rembourrage De cette façon, ils seraient alignés. Maintenant, je ne suis pas sûr que différentes personnes aient des préférences différentes, vous devez donc vérifier. Mais je ne sais pas, ça marche pour moi. J'aime son apparence. Je vais juste réduire l'espacement ici. Et maintenant, ça a l'air beaucoup plus beau, je dirais que je ne suis pas sûre Cela demande certainement du travail, mais oui, c'est génial. Nous sommes sur le point de faire quelque chose. Maintenant, bien sûr, comme je l'ai déjà mentionné, vous pouvez également le réduire beaucoup, mais vous devrez ensuite ajuster le placement. Oui, je trouve que ça semble plus naturel. Cela ressemble plus à une application et vous pouvez voir toutes vos notifications, cliquer dessus, les choisir, ce que vous voulez faire. Et voici comment, en gros, vous pouvez utiliser une fenêtre contextuelle ou une superposition C'est ce que nous appelons apigma et comment vous pouvez le créer, l' utiliser, le lier à la fonction de prototypage Merci beaucoup de m' avoir écouté, et je vous verrai à la prochaine leçon. 17. Connecter les écrans du tableau de bord: C'est bon. Dans cette leçon, nous aimerions donc essayer quelque chose d' un peu différent. Nous allons créer un écran complètement différent. Donc un deuxième écran, et dans d'autres cas, peut-être un troisième, un quatrième, un cinquième. Mais pour cette leçon, nous allons juste faire un deuxième écran. Je veux vous montrer très rapidement comment cela va se passer, comment nous allons y parvenir et comment nous pouvons les relier d'une manière vraiment agréable et fluide. D'accord, donc la première chose que nous allons faire est de nettoyer cette zone. Nous allons le mettre de côté. Juste pour que nous puissions avoir un bon flux ici. J'aime aller de gauche à droite et de haut en bas, pour libérer de l'espace. Maintenant, je vais le copier et le coller. Nous avons maintenant un deuxième écran. Nous pouvons appeler le premier tableau de bord, et le second, des tâches. Il s'agira d' un écran où nous développerons uniquement le tableau de bord pour afficher toutes les différentes tâches. Donc, la première chose que je vais faire est supprimer le tableau de bord dans le second. Il n'y a pas de tableau de bord, mais il y a des tâches. Cependant, ce sera un autre type de tâche. Il n'y aura pas ce panneau qui créera cette animation là où elle sera masquée ou minimisée. Nous allons détacher l'instance, cliquer sur Détacher l'instance, puis nous allons prendre ce petit morceau, retirer, et oui, nous allons travailler avec cela nous allons travailler avec Au lieu d'avoir des tâches urgentes puis des tâches plus récentes, je pense à façonner les choses différemment, car nous avons une équipe et les différents membres de l'équipe ont des tâches différentes. Nous allons créer quelque chose de similaire à d'autres programmes un exemple de programme de gestion des tâches ou Trello est un exemple de programme de gestion des tâches ou de gestion de projet Si vous le connaissez, il existe de nombreux autres types de solutions Encore une fois, nous n'allons pas réinventer la roue, nous allons créer quelque chose de similaire Je vous l'admets juste pour que vous ayez en tête au lieu de penser, ouah Il va créer quelque chose de complètement différent. Non, je ne vais pas faire ça. Je vais m'en tenir à ce qui a été prouvé, essayé et prouvé et tout le reste. C'est bon. Je vais donc supprimer ces titres car je pense qu'ils ne nous aident pas vraiment ici. Cependant, je pense à les inclure tous ensemble dans un cadre, je vais donc mettre une mise en page automatique. Je vais y ajouter de la couleur. Je pense que nous pourrions peut-être ajouter un peu plus de couleur. Peut-être que ça pourrait être très dynamique cette fois. Peut-être pas si dynamique. Mais voyons ce que nous pouvons faire. OK, ça n'a pas l'air correct. Supprimons simplement cela. Découvrez ce que nous pouvons trouver. Nous voulons donc une couleur qui ne soit pas trop importante. Alors peut-être que je pense à ça. Peut-être pourquoi pas ? Quelque chose qui doit être mis en arrière-plan. Et la raison pour laquelle je le fais, c'est que je pense juste à le changer. Nous pouvons également choisir la même couleur ici ou choisir une couleur plus foncée, afin qu'elle soit grise au lieu d'un peu plus foncée. Mais je pense que nous pourrions ajouter un peu plus de couleur ici parce que nous voulons faire ressortir les tâches. Nous voulons qu'ils soient très clairs. Donc, comme les tâches sont blanches, nous voulons que l' arrière-plan soit d'une couleur différente, pas que tout soit aussi clair. Ouais Voyons donc et si nous les appelons « poisson transparent » ? C'est quelque chose que nous pouvons également faire. De cette façon, nous nous concentrons beaucoup plus sur les tâches elles-mêmes. Donc, pour en venir à ce texte, je me demande : pouvons-nous le colorier en blanc ? Peut-être. Ensuite, il faudrait le rendre un peu plus sombre pour la lisibilité Mais maintenant, nous devons revenir à cette couleur et repartir de là car je tiens à préciser qu'il s'agit d'une couleur similaire. OK, ce n'est pas trop mal. C'est quelque chose avec lequel tu peux travailler. C'est juste D'accord. Cela ne fonctionne pas parfaitement avec ce bleu, mais c'est vrai. Maintenant, nous avons des tâches, mais nous allons leur donner des noms différents. Quels étaient donc les membres de l'équipe que nous avions ? Je vais donc considérer que je suis le chef de projet, donc j'ai un nom différent, qui est peut-être Alan. Ensuite, nous aurons John et Mary. Et puis nous avons un autre John, apparemment. Non, on a changé ça. C'était quoi ça ? Laurence. Nous avons donc Laurence. Très bien, alors copiez-le en le collant ici. Nous avons donc Alan John, Mary Lawrence. Nous pouvons donc changer les choses. Nous pouvons faire en sorte que ce contenant soit entièrement rempli, nous en aurons donc beaucoup qui occuperont de la place. Mais pour être honnête, ça n'a pas l'air génial. Alors reprenons-le en compte. Nous pouvons également le centrer, mais cela n'a pas l'air génial Je vais donc le garder ici et cela vous donne la possibilité d'ajouter autre chose. Peut-être que nous pouvons le montrer en créant quelque chose comme ça , puis en y mettant un signe plus. Coupez-le et collez-le ici, et c'est parti. Nous l'avons juste ici. Nous pouvons le réduire un peu. D'accord. Laissez-moi le mettre ici. Parfait Nous avons donc ceci. Ça a l'air vraiment génial. Ce que nous pourrions faire c'est que nous devons changer les articles ici. Nous ne voulons pas que tout soit pareil. Et une autre chose que je viens de remarquer, c'est que ce sont deux cadres différents, ce que nous ne voulons pas. Je vais donc en supprimer certaines en fait. Pour être honnête, ils n'ont pas besoin d'avoir autant de tâches. C'est donc quelque chose à garder à l'esprit. Je vais donc copier-coller la base. Et puis, comme nous l'avons dit, Mary a beaucoup plus de tâches que les autres, et John n' en a pas beaucoup à faire. Hein ? Et une chose à laquelle il faut faire attention, c'est aussi de voir quels noms ici, quels visages ou quelles photos nous avons ici. Mary devrait donc avoir les cartes avec son nom et ainsi de suite. Mais c'est quelque chose que nous pourrons régler plus tard. Je veux dire, il n'est pas nécessaire de trop se concentrer sur ces choses pour le moment . Mais oui, maintenant nous avons cette jolie petite configuration. N'oubliez pas que cette leçon ne traite pas de la création du deuxième écran mais de la façon de le connecter. Pour le connecter au menu principal ou tout autre élément que vous avez ici afin pouvoir passer de cet écran à celui-ci. Maintenant que nous l'avons configuré, la première chose à faire est de passer au prototype. Le premier écran contient le flux 1. Maintenant, pour des raisons de facilité d'utilisation, vous pouvez transformer ce flux en deux en passant au prototype et en en faire un point de départ du flux. Cela vous permet essentiellement visiter les deux pages. OK, les deux écrans. Vous pouvez voir celui-ci et celui-là, et vous pouvez juger : OK, il est beau, n'est pas très beau, peu importe. Ensuite, vous pouvez venir ici et faire votre travail sans être interrompu. Vous pouvez donc les consulter tous les deux sans avoir à cliquer sur le menu car c'est ce que nous faisons en ce moment. Pour ce faire, nous allons passer aux tâches et maintenir les touches Ctrl Alt et A pour choisir les deux icônes ou le même élément entre les instances, puis vous allez maintenir le signe plus et le suivre jusqu'au bout. Nous avons donc maintenant onclick. Il va naviguer vers les tâches. Je vous recommande de le faire instantanément car lorsque vous créez des sites Web en particulier, il est vraiment difficile de créer des animations et des transitions vraiment sympas . Ainsi, en fonction de ce que votre équipe est prête à faire, la plupart du temps, vous cliquez sur une page et elle se charge. Il n'y aura pas d'animation vraiment cool à moins que vous ne travailliez sur une application Web, c'est une autre histoire. Mais en général, ce sera juste dissous ou instantané, pour être honnête. Cela va juste charger la page. Alors maintenant, testons-le. Nous venons ici. Nous passons à la tâche, nous allons cliquer dessus. Bam, on y est, d' accord ? Juste comme ça. Cela dit facilement, mais n'oubliez pas de retourner là où vous étiez. Faisons-le dès maintenant. Nous allons conserver tableau de bord dans les deux cas et nous allons l'emmener ici, pareil, maintenant vérifions-le. Juste comme ça, nous pouvons passer d'une page à l'autre. Mais attendez une minute, il y a un problème, il y a un petit détail. Il s'agit du point culminant. Ici, le tableau de bord est toujours surligné et ce n'est pas quelque chose que nous voulons. Je vais revenir ici. Je vais choisir les deux en maintenant la touche Ctrl Al enfoncée sur A, et je vais la définir par défaut. Maintenant, elles sont toutes par défaut et je vais accéder à cette instance sur cette page et je vais la sélectionner, je vais venir ici et je vais choisir cette tâche, et je vais également la faire sélectionner. Maintenant, testons-le. D'accord. Maintenant, nous avons un problème. Attends, rechargeons-le. Nous avons un tableau de bord, le tableau de bord est choisi, sélectionné, excellent. Maintenant, nous passons à la tâche, la tâche est sélectionnée, nous l'ouvrons. Attends une minute, c'est écrit « tableau de bord ». D'accord. Nous avons maintenant un problème car la version sélectionnée indique simplement le tableau de bord, qui n'est clairement pas ce que vous voulez voir. Ici, il semblerait que nous ayons un problème. Ce problème provient généralement de la dénomination ou de la façon dont vous configurez ces versions. faut que tu le vérifies. Maintenant, vérifions-le. C'est la valeur par défaut et non, pas de réduction. Il s'agit d'un unhover sans réduction, et cette option est sélectionnée sans réduction Maintenant, pour en revenir à cela, par défaut, survoler, oui, sélectionné, oui OK, il n'y a donc aucun problème ici. Maintenant, vérifions-le ici. Quel pourrait être le problème ? Voyons voir. D'accord ? C'est normal. Il indique par défaut, pas d' effondrement, par défaut, pas d'effondrement, par défaut, pas d'effondrement. D'accord. Donc, je pense que le problème pourrait être le fait de la dénomination. Donc, parfois, les noms ici ont un problème. Donc, par mesure de sécurité, je vais appeler ce bouton des tâches. D'accord ? Ensuite, vous devez nommer chaque instance. Pour en revenir à cette instance, je vais l'appeler bouton des tâches. Il faut que ce soit exactement la même écriture, d'accord ? Alors maintenant, vérifions-le. D'accord. Cela me pose toujours le même problème. Très bien, j'ai juste rechargé la page et nous n'avons plus le bogue Donc, lorsque vous l'ouvrez, il ne vous montre rien de surligné, d'accord ? Vous voyez donc cette page, nous sommes sur cette page, puis lorsque vous l' ouvrez, vous voyez toutes les options que vous pouvez ouvrir. Juste comme ça, vous pouvez accéder au tableau de bord. Il n'y a aucun problème avec les icônes. D'accord ? Voici comment vous pouvez relier très facilement deux écrans différents. Et cette méthode est également réaliste. Nous ne faisons rien de fou. Il y a certaines choses que vous pouvez réparer, comme ce rayon d'angle, par exemple, c'est horrible. C'est beaucoup mieux, pas parfait, mais bien mieux. Mais oui, c'est essentiellement ainsi que vous pouvez connecter deux écrans différents à l'aide d'un menu. Il s'agit simplement de prototypage, différents types de déclencheurs, de différents types d' actions, mais au final, nous y arrivons et nous y parvenons, et c'est ce qui est important Merci beaucoup de m'avoir écouté et je vous verrai lors de la prochaine leçon. 18. Previewing and Testing the Prototype: Très bien, passons maintenant à la partie la plus importante, qui est de partager votre travail. Après tout, vous avez beaucoup travaillé et vous devez maintenant le partager avec le monde entier, le partager avec vos collègues, vos clients, qui que ce soit, vous devez faire connaître votre travail. Il existe différentes manières d'y parvenir. Une méthode très simple consiste à cliquer sur le gros bouton bleu. Je sais que c'est assez évident, donc c'est facile, mais je dois juste prendre note. Il existe deux types de partage. Vous pouvez partager le fichier comme dans ce fichier de conception, ou vous pouvez partager le prototype et il est indiqué que vous partagez le prototype. Elles se ressemblent beaucoup, mais ce sont en fait des choses différentes. Faites attention lorsque vous faites cela. La façon de le faire dans les deux cas est de continuer et de cliquer sur Copyink comme ça, vous avez un lien Vous pouvez également inviter quelqu'un en écrivant son e-mail, mais surtout, avant de faire quoi que ce soit, cliquez sur Uniquement les personnes invitées et passez à n'importe qui. Lorsque vous le faites, vous pouvez également ajouter un mot de passe obligatoire. Mais lorsque vous le faites, vous avez besoin d'un compte professionnel pour cela, juste pour vous le faire savoir. Mais lorsque vous le ferez, vous pourrez le partager avec n'importe qui en utilisant simplement le lien. Si plusieurs personnes participent à un projet, en particulier si vous partagez le fichier, le fichier de conception, vous pouvez également décider qui en est le propriétaire, qui est éditeur, commentateur , etc. Vous disposez de plusieurs options de partage différentes. Vous pouvez copier le lien DevMDE pour le transmettre à un développeur. Vous pouvez copier le lien du prototype , comme nous le faisions ici, et vous pouvez publier auprès de la communauté ou obtenir un code intégré C'est bon. Et il existe une autre façon de partager votre prototype l'exporter. Vous pouvez le faire en cliquant directement sur un ou plusieurs cadres, en allant exporter et en ajoutant une exportation. Vous pouvez décider si vous voulez être au format PNG, JPEG, SVG ou PDF Et il y a d'autres paramètres à explorer, ou vous pouvez simplement les exporter directement à partir d'ici, accédant au fichier, à l'onglet, à l'option fichier, puis en exportant ou en exportant des cadres au format PDF. C'est aussi simple que cela. Ce n'est pas si compliqué, mais vous devez simplement vous demander quel est le meilleur moyen de partager le fichier avec vos clients vos collègues ou les personnes avec lesquelles vous le partagez. Tu dois te poser cette question et obtenir une bonne réponse. Merci beaucoup de m' avoir écouté, je vous verrai dans le prochain. 19. Projet de cours : concevez votre propre tableau de bord SaaS: À présent, c'est à vous de créer votre propre tableau de bord. de ce projet de classe, vous allez concevoir votre propre variante d' un tableau de bord SAS en utilisant les techniques et les flux de travail que nous avons abordés tout au long de ce cours. Vous pouvez choisir soit appuyer sur le tableau de bord que nous avons déjà créé, pour continuer, l'optimiser et le rendre encore meilleur, soit de créer votre propre tableau de bord avec un secteur complètement différent ou des cas d'utilisation complètement différents. Par exemple, vous pouvez créer un tableau de bord pour le financement de la gestion de projet, pour une application de fitness ou tout autre tableau de bord SAS que vous souhaitez créer. Commencez par définir l'objectif de votre tableau de bord, puis identifiez les différents types d' informations que les utilisateurs ont besoin de voir. Après cela, allez-y et faites une présentation générale de la conception. Commencez à créer vos composants réutilisables, différentes sections et à comprendre comment les informations seront affichées. Et bien sûr, n'oubliez pas d' appliquer un style cohérent à votre design. Maintenant, une fois votre tableau de bord terminé, ajoutez des interactions, éventuellement des animations pour montrer comment les utilisateurs utiliseraient votre tableau de bord. Et bien sûr, assurez-vous d'en faire une expérience agréable, quelque chose que les gens seraient ravis de voir et d'interagir avec, des animations et des fonctions de grande envergure ou des plus petites micro-interactions. Une fois que vous avez terminé, téléchargez une capture d'écran de votre tableau de bord ou partagez un lien vers un prototype Figma et placez-le simplement dans la section de la galerie de projets Bien entendu, n'hésitez pas à inclure une brève explication de vos décisions de conception ou des commentaires expliquant le type de tableau de bord que vous essayez de créer. Ce projet est l'occasion pour vous d' aller de l'avant et d' utiliser tout ce que nous avons appris, mettre en pratique et de l' appliquer de manière montrer vos propres idées et votre créativité. Passons donc à la conception. 20. Félicitations ! Et ensuite ?: Félicitations pour avoir terminé le cours. Vous avez maintenant terminé l'intégralité d'un projet de tableau de bord SAS du concept au prototype. Tout au long du cours, vous avez pratiqué la planification, conception de mises en page, la création de composants, la hiérarchie visuelle , la conception d' interfaces et de nombreuses autres compétences qui se traduisent et se transfèrent directement vers de véritables projets et compétences IX. Au fur et à mesure que vous continuez à apprendre, je vous encourage vivement à créer davantage de concepts de tableau de bord, repenser les produits existants et explorer différents secteurs et cas d'utilisation Chaque projet que vous pratiquez actuellement enrichira non seulement votre portefeuille, mais renforcera également vos compétences en matière de conception. Si ce n'est pas déjà fait, assurez-vous d'avoir téléchargé votre projet sous forme de capture d'écran ou lien vers la galerie de projets. J'adorerais vraiment voir ce que vous avez trouvé et comment vous personnalisez vos propres projets. Comme toujours, si vous avez apprécié ce cours, pensez à laisser un commentaire. Cela nous aide vraiment à améliorer les cours à venir et aide également les autres étudiants à découvrir ce cours. Merci beaucoup de m' avoir rejoint, et je vous verrai dans le prochain projet.