Intro à la conception d'UX/UI : créer un prototype numérique interactif

1. Introduction: Passer de vos premières idées, vos premiers croquis, filaires, à un prototype numérique entièrement fonctionnel est un défi. Ce cours vous guidera à travers toutes les étapes dont vous avez besoin pour créer votre propre prototype numérique interactif conçu avec un logiciel de conception préféré. Je m'appelle Patricia Reiners. Je suis un concepteur UX/UI basé à Berlin. Je conçois des interfaces numériques pour de nombreuses entreprises, beaucoup de start-ups, agences, mais aussi pour des grandes entreprises comme Google ou Adobe par exemple. Je partage des connaissances sur les UX/UI par le biais d'ateliers, de discours en public et d'enseignement dans une université et d'un mode de vie pour podcast sur la conception de l'expérience utilisateur. Concevoir de belles interfaces numériques n'est en fait pas si difficile si vous connaissez quelques règles et directives. Vous apprendrez les bases de la conception d'interface pour créer une meilleure invitation. Vous apprendrez à passer de vos premiers croquis à un prototype numérique entièrement fonctionnel et à quelques étapes simples. Vous allez créer votre propre moodboard pour votre design, choisir les couleurs, la typographie, les illustrations et les images pour votre interface. Je vais également partager un grand nombre d'exemples, de bonnes pratiques et de ressources qui vous aident à démarrer et même à accélérer votre flux de travail de conception. Ce cours est livré avec un kit d'interface utilisateur Adobe Xd, une liste de ressources et de nombreux modèles qui vous aident tout au long de ce cours. En tant que projet de classe, vous allez concevoir votre propre interface numérique pour un article dans votre cuisine, qui sera prêt à être téléchargé dans votre portefeuille ou sur les réseaux sociaux après avoir terminé ce cours. Ce cours est parfait pour tous ceux qui veulent en savoir plus sur la conception d'interface, principes de conception et les règles de base de la conception d'interface. J' ai vraiment hâte de vous accueillir dans cette classe, alors commençons. 2. PROJET DE CLASSE: Bonjour et bienvenue dans cette classe sur la conception d'interface. Il s'agit de la deuxième partie du prototypage pour le futur cours. J' espère que vous avez déjà regardé le premier cours, au cas où vous ne l'avez pas fait, je vous recommanderai fortement de le faire d'abord. Mais même si vous ne l'avez pas fait et que vous ne voulez pas en apprendre davantage sur le prototypage, vous pouvez simplement utiliser le matériel que je vous fournit ici et vous pouvez commencer ici. Un peu sur mes antécédents personnels. Je m'appelle Patricia Reiners. Je suis UX/UI Designer ici à Berlin. J' ai étudié le design de communication un peu plus graphique, et à un moment donné, je suis complètement passé à UX/UI Design. J' ai commencé ma carrière dans une agence où j'ai travaillé pour nombreuses entreprises et clients différents et j'ai beaucoup appris. À un moment donné, je suis passé à la conception freelance et maintenant je dirige ma propre entreprise, j'ai commencé un podcast, je fais beaucoup d'ateliers, de l'éducation, travaillant pour de nombreuses entreprises et clients différents dans le monde entier et Je pense que c'est vraiment fascinant et super intéressant. Je veux partager avec vous le processus, beaucoup d'outils, beaucoup de méthodes, tout ce que j'ai appris ces dernières années. J' ai beaucoup de matériel pour vous déjà préparé, donc vous avez juste besoin de le télécharger et de commencer. Voici quelques recommandations avant de commencer. Tout d'abord, s'il vous plaît télécharger un logiciel de conception préféré. Je vais travailler avec Adobe XD. J' ai également préparé une trousse d'interface utilisateur avec beaucoup de ressources et de conseils et astuces pour vous. Vous pouvez simplement le télécharger et l'utiliser tout au long du cours si vous voulez travailler avec un autre outil de conception qui est complètement correct. N' hésitez pas à utiliser l'outil avec lequel vous êtes le plus à l'aise. La deuxième chose est de préparer des affiches. C' est toujours très utile, et un stylo. Vous pouvez avoir des papiers si vous voulez prendre des notes, si vous voulez réécrire quelque chose. D' autres ressources que j'ai préparées pour vous avec la liste des ressources, le kit de l'interface utilisateur, tout, tous les modèles que vous pouvez trouver ici dans le dossier des matériaux, il suffit de le télécharger et de l'utiliser. Vous pouvez simplement l'ouvrir et commencer. Qu' est-ce qu'on va apprendre dans ce cours ? Tout d'abord, nous allons passer par toutes les étapes que vous devez savoir quand vous voulez concevoir des interfaces numériques. Nous allons parler de couleurs, nous allons parler des lignes directrices de conception, nous allons parler de la façon de choisir des images et des illustrations, même où les trouver. Nous allons parler de règles UX/UI très basiques qui vous aideront à devenir un meilleur concepteur une fois que vous aurez terminé cette classe. Je vais également vous guider étape par étape dans mon propre processus de conception. Vous pouvez simplement me suivre lors de la conception d'une interface numérique avec Adobe XD et apprendre sur le chemin. Ce cours est idéal pour tous ceux qui veulent vraiment approfondir la conception de l'interface utilisateur, qui veulent en savoir plus sur les principes de conception, sur tout ce que vous devez savoir comme une bonne interface. En tant que projet de classe, vous allez concevoir votre propre interface numérique pour un appareil ou un article dans votre cuisine. Nous allons passer par toutes les étapes de cette classe. La seule chose que vous devez faire d'abord est de télécharger l'outil de conception numérique que vous voulez utiliser, et le reste va se passer tout au long de ce cours. Commençons. 3. Différence entre l'UX et l'UI: Bienvenue dans le 3ème chapitre de ce cours. Maintenant, nous allons parler très rapidement de la différence entre UX et UI. Quelle est vraiment la différence entre la conception de l'expérience utilisateur, la conception de l'interface utilisateur ? Qu' est-ce que ça veut dire vraiment ? Nous allons passer par ça très vite. Lorsque vous voulez répondre à ce que signifie réellement UX, UI, nous devons jeter un oeil à l'UX ou au processus de conception centré sur l'homme. Lorsque vous voulez concevoir un produit numérique, vous ne le concevez pas simplement. Nous avons déjà parlé de cela dans la première partie du cours, que vous passez par différentes phases. Ici vous pouvez voir ces phases et elles se chevauchent. Vous voyez les petits cercles se chevaucher. D' abord, vous commencez par l'empathie. Vous voulez vraiment comprendre l'utilisateur, vous faites de la recherche et essayez d'apprendre. Votre objectif est de découvrir les problèmes que vous pouvez résoudre pour eux. La partie suivante définir, vous analysez vraiment ce que vous avez appris, la recherche, vous êtes venu si vous connaissez les problèmes, et définir ce que vous apprenez et ce que vous voulez résoudre, ce que vous pouvez réellement faire pour résoudre ce problème. Ensuite, la partie suivante, vous avez l'idée. C' est la partie la plus amusante que je dirais, parce que là vous venez avec des idées. Si nous regardons le sujet du frigo que j'ai choisi pour mon projet, je me suis rendu compte qu'il y a beaucoup de problèmes en matière de gaspillage alimentaire, beaucoup de nourriture qui ne se trouve pas vraiment dans le réfrigérateur. C' est un gros problème et l'idée était que nous créons une interface de réfrigérateur intelligente où vous voyez quand les choses tournent mal et vous pouvez créer vos propres recettes. Ensuite, nous avons déjà créé notre prototype, mais vous pouvez aussi le faire numériquement et ensuite vous pouvez le tester, puis l'implémenter. Implémenter serait comme une application codée ou vous créeriez comme une interface codée avec HTML et CSS pour votre réfrigérateur. Qu' est-ce que UX maintenant ? Généralement, nous pouvons dire UX signifie la conception de l'expérience utilisateur, donc l'expérience utilisateur. Depuis que le terme est venu, UX s'est alors développé pour devenir un service avec de bonnes affaires. Une bonne entreprise signifie une bonne expérience utilisateur ou une bonne expérience utilisateur parce que l'utilisateur est si important. Seuls les produits et services qui offrent une expérience utilisateur transparente seront couronnés de succès sur le marché. Avec cela, la demande pour les concepteurs UX a considérablement augmenté. Alors que le marché de la technologie continue d'évoluer, vos concepteurs UX sont plus cruciaux que jamais. Si vous décidez de devenir designer UX, félicitations, tous les designers UX s'amusent vraiment bien. La demande pour UX ou UX designer se reflète à la fois dans les salaires moyens des concepteurs UX qui sont assez élevés, ainsi que dans le marché de l'emploi des professionnels UX, qui est également assez élevé. La conception UX se concentre généralement sur l'interaction entre l'être humain, l'utilisateur, cela pourrait être moi ou vous, et les produits et services quotidiens. Il peut s'agir de sites Web ou d'applications ou même de machines à coton. J' aime vraiment cet exemple ici parce qu'il montre l'expérience utilisateur dans la vie réelle. Parfois, les concepteurs viennent avec des solutions vraiment géniales, mais quand ils testent le design, quand ils le voient dans la vraie vie, ils se rendent compte que l'utilisateur n'a pas vraiment apprécié la façon dont le concepteur est venu avec l'idée. Ils ont utilisé l'expérience qui leur est la plus facile. Je pense que c'est vraiment intéressant. C' est un très bon exemple d'une bonne expérience utilisateur échouée. La définition générale de l'UX ou de l'expérience utilisateur est UX est ce qu'un utilisateur d'un produit particulier éprouve lorsqu'il utilise ce produit. Vous ne pouvez pas créer quoi que ce soit de valeur pour un utilisateur sauf si vous comprenez le type de problèmes qu'il veut résoudre, et comment vous pouvez résoudre ces problèmes afin que l'utilisateur veuille ou mieux encore avoir besoin de votre solution. Je pense que c'est super intéressant. Regardez sur votre téléphone et vérifiez toutes les applications que vous avez là, puis voyez ce que vous utilisez tous les jours. Vous pouvez simplement penser dans votre main, quel genre de problèmes sont ces applications, ou ces produits, les produits numériques que vous utilisez tous les jours résolvent pour vous ? Chaque matin, par exemple, j'utilise l'application Headspace. Je fais une méditation. Je suis un grand fan de cette application. Le problème que cette application ce qu'elle résout pour moi est que faire une méditation par moi-même est vraiment difficile. Je veux commencer dans la journée, détendre et calme et concentré. C' est un vrai problème et je ne sais pas vraiment comment résoudre ça. Je pense que toutes les méditations guidées même en ligne sont difficiles à trouver. Ce guide est super utile, et il résout un très gros problème pour de nombreux utilisateurs parce que beaucoup de gens utilisent réellement cette application. UX signifie l'expérience utilisateur. Nous en avons déjà parlé, et l'interface utilisateur signifie la conception de l'interface utilisateur. Je trouve également super intéressant de regarder de près quelques mauvais exemples UX parce que vous savez déjà, ce que vous pourriez peut-être faire mieux. Il est également un peu plus facile de comprendre ce que cela signifie vraiment UX parce que nous devons différencier cela de l'interface utilisateur. Exemples de la vie réelle, je suis un grand fan de cet exemple ici. C' est un ascenseur. Ils ont vraiment besoin de regarder où avez-vous besoin pour appuyer sur les boutons. Vous pouvez juste penser dans votre main ce qui pourrait être un peu déroutant ici. Ce qui est déroutant ici, c'est qu'il y a plusieurs fois, les sont un peu confus. C' est super difficile à trouver et quelques boutons ont déjà disparu. La raison de cela ou de la raison pour laquelle cela s'est réellement produit, c'est qu'ils se sont rendu compte à un moment donné qu'ils ont besoin de la langue pour les aveugles. Il n'y avait pas assez d'espace sur les boutons pour qu'ils le placent simplement sur le côté, ce qui est également très difficile pour les aveugles, parce qu'ils le trouvent sur le côté et qu'ils doivent encore appuyer sur le bouton du côté droit. Certainement un exemple vraiment horrible. C' est aussi, je pense, un aspect intéressant dans la vraie vie. Tu dois tirer quelque chose, mais il n'y a pas de poignées. Comment devriez-vous tirer sur cette porte ? Un autre exemple que je trouve intéressant est de WhatsApp, je suppose que beaucoup d'entre vous l'ont probablement déjà vu. Vous pouvez supprimer des messages et l'utilisateur ou tout le monde dans ce chat obtient ce message, vous avez supprimé ce message. Je ne sais pas si vous avez fait ça à un moment donné, mais je l'ai fait. La seule réponse est, qu'avez-vous supprimé là, dites-moi ce que c'était. Je veux juste savoir. Il y a une discussion et parfois on ne veut pas le dire et les gens se fâchent. D' autres plateformes comme Signal, par exemple, elles suppriment simplement le message sans préavis. Je pense que c'est aussi intéressant. Je ne sais pas si tu as déjà flippé avec Ryanair. C' est une compagnie aérienne très bon marché. L' interface de réservation de Ryanair peut être considérée comme un exemple de tactiques sombres, sournois, UX de conception qui rend l'expérience vraiment compliquée et assez déroutante pour inciter les utilisateurs à dépenser plus d'argent qu'ils n'en ont besoin. Dans ce cas, nous avons caché des addons. Ici, nous pouvons voir que l'option de l'absence d'assurance est interdite dans un menu totalement sans rapport, ce qui rend difficile pour les utilisateurs de la trouver, et c' est certainement le contraire de l'utilisateur d'abord, plutôt que de considérer la fonctionnalité et convivialité d'une plate-forme. Ici, les utilisateurs certainement pas mis en premier, mais oui comment faire plus d'argent avec les assurances. Un autre utilisateur douloureux toujours super longues listes déroulantes. Si vous ne trouvez pas quelque chose, si vous avez besoin de chercher un pays et que c'est vraiment, vraiment difficile, c'est super long. C' est aussi je pense intéressant, je suppose que beaucoup d'entre nous l'ont déjà expérimenté. C' est super, super frustrant car nous avons déjà un million de mots de passe à retenir, et il n'y a rien de plus frustrant que des exigences de mot de passe inutilement compliquées comme celle ici. Les mots de passe complexes sont plus difficiles à retenir, ce qui signifie que votre monarchie perdra constamment du temps à créer de nouveaux mots de passe pour remplacer les anciens. Je pense que c'est aussi un exemple intéressant. C' est une revue cinq étoiles sur la fibre. En un coup d'œil, les utilisateurs qui sont habitués à la normalisation la plus proche d'un nombre explicite d'étoiles représentant la note peuvent supposer que le produit en question ne reçoit que la note d'une étoile. Avoir une étoile à côté d'un numéro est anti-intuitif pour les clients. Il pourrait même s'enregistrer comme une cote du tout. Un autre exemple vraiment intéressant est ce produit ici. Je ne sais pas. Elle est devenue virale il y a quelques années. C' est le Juicerro. C' est un presse-agrumes, et c'est un très intéressant parce que le problème ici n'est pas vraiment le f de la fonctionnalité, et ici, comme une femme montre vraiment comment cela fonctionne, a inventé un élément inutilement pour avoir ce presse-agrumes, parce que vous ne pouvez pas simplement presser le jus de ces bouteilles en plastique avec vos mains nues. Donc tu n'as pas vraiment besoin du presse-agrumes. Aussi très mauvaise expérience utilisateur, parce que vous vous sentez très frustré. Depuis que le terme est arrivé, l'expérience utilisateur a beaucoup grandi et est devenu super, super important. Bien que ce cours porte sur votre conception et vos interfaces, je voulais juste parler un peu de votre AKS, parce que c'est si important et va vraiment main et main, et si vous voulez devenir un concepteur ou un concepteur d'interface utilisateur à succès, comprendre l'utilisateur et ce que signifie UX, et l'intégrer dans votre flux de travail ferait de vous un concepteur vraiment génial, et vraiment se démarquer dans la foule où beaucoup de gens se concentrent uniquement sur le beau design. Voici une recommandation et un livre vraiment génial. Nous allons aussi mettre cela dans la liste des ressources. C' est la conception des choses de tous les jours de Don Norman. UX est en fait propre depuis le début du 19 de Don Norman et il a effectivement travaillé chez Apple, chez un scientifique cognitif. Don Norman était super intéressé par tous les aspects de l'expérience d'un utilisateur avec un produit ou un service, y compris les graphismes industriels, l'interface et l'interaction physique. Pour re comprendre cela, il est venu avec tout ce qui comprend cette analyse et appeler cette expérience utilisateur. Il montre un exemple vraiment intéressant. On a déjà parlé des portes. Je vous ai montré l'exemple des portes. C' est un autre intéressant, parce que beaucoup de portes ressemblent à ça. Il y a ce push and pull et avec deux poignées. Quel est le problème ici ? Le problème est que les gens ont vraiment besoin de lire ceci pour comprendre ce qu'ils doivent faire, s'ils ont besoin de pousser ou s'ils ont besoin de tirer. Beaucoup de gens ne savent pas lire. Certaines personnes ne savent pas comment ça se lit. Leurs enfants ne savent pas lire du tout ou même comme personnes âgées qui ne savent pas lire parce qu'ils ont de mauvais yeux. En fait, ils ont trouvé une autre solution, ou Don Norman a recommandé une autre solution pour que l'utilisateur n'ait besoin d'aucune sorte d'explication, ils savent ce qu'il doit faire. Je pense que c'est un exemple vraiment intéressant ici avec la porte, parce que si vous avez ces deux portes, vous savez exactement où se trouve la poignée sur le côté droit. Bien sûr, vous devez tirer. Sur le côté gauche, là où il n'y a pas de poignée bien sûr, vous devez pousser. Vous le savez automatiquement, vous n'avez pas besoin d'explication, et votre interface, votre conception UX/UI devrait être comme ça, mais l'utilisateur sait automatiquement quoi faire. Même si vous voulez devenir concepteurs d'interface utilisateur, vous devez toujours garder l'utilisateur à l'esprit que super, super important. Voici une petite explication sur les différences entre UX et UI. Je pense que c'est intéressant. Ça vient de la fonderie coréenne. Ouais, jette un coup d'oeil ici. Voici aussi la tâche que vous faites ou les différences. Si vous souhaitez travailler en tant que concepteurs UX, vous vous intéressez beaucoup plus à la recherche d'utilisateurs et à l'analyse des clients. Vous effectuez une analyse des concurrents, développement de contenu, la structure du produit. Vous faites des tests, filature, prototypage, coordination avec n'importe quel type de visuels sur le concepteur d'interface, coordination des développeurs, et beaucoup d'itérations. En tant que concepteur d'interface utilisateur, c'est ce dont nous allons parler, c'est plus la recherche de conception, c'est l'image de marque, c'est un développement de conception graphique, guides d'utilisation et des scénarios, c'est le prototypage d'interface utilisateur, interactivité et animations, réactivité et adaptation à toutes les tailles d'écran, et même implémentation avec les développeurs. Mais aussi des images d'illustration, tout type d'atouts. 4. Wireframes: suis tombé amoureux du problème et non de la solution [inaudible]. Dans la conception UX/UI, vous aimez vraiment le problème et vous essayez de comprendre le problème, vous essayez de trouver le problème, puis vous venez avec la solution. Mais d'abord, vous devez comprendre le problème pour vraiment trouver une excellente solution. C' est ce que nous avons déjà fait. Nous avons trouvé un concept. On a des croquis, des fils. Dans ces premiers prototypes et ces prototypes de papier, pourrait également être filaires numériques. Vous testez votre idée avec les utilisateurs et vous êtes prêt à itérer. Vous êtes prêt à changer vos conceptions, votre concept, parce que vous réalisez peut-être que l'utilisateur n'a pas vraiment obtenu ce que vous vouliez leur montrer ou l'aider avec. La plupart du temps, vous devez ajuster quelques choses et changer cela avant de passer au numérique, et créer un super haute fidélité, un prototype numérique super parfait. Comment commencez-vous à trouver des problèmes ? Qu' avons-nous fait jusqu'à présent ? La tâche était de concevoir ou de reconcevoir une interface pour votre cuisine même si cet article dans votre cuisine n'a pas d'interface maintenant. Je me suis concentré sur le réfrigérateur afin que votre article ait pu être quelque chose d'autre comme le grille-pain ou le four par exemple. Ensuite, nous avons commencé à chercher des problèmes. Nous avons eu des conversations différentes avec les gens. Peut-être que vous avez fait des recherches sur les utilisateurs. Nous avons noté tous les problèmes sur Post-it ici. Par exemple, dans le réfrigérateur, c'est très chaotique et vous ne savez pas comment stocker la nourriture. Vous ne pouvez pas vraiment vous rappeler quelle nourriture est la vôtre et ce qui peut appartenir à vos colocataires. Vous ne pouvez pas vraiment trouver les choses à l'intérieur parce que c'est désordonné, etc. Ensuite, nous nous concentrons sur un problème que j'ai trouvé le plus intéressant et c'est que vous ne savez pas quoi cuisiner avec ces choses dans le réfrigérateur. C' est certainement un très gros problème. Ensuite, nous recherchions des solutions. Par exemple, montrer à l'extérieur ce qui se trouve à l'intérieur, organiser le réfrigérateur pour qu'il soit plus facile de le voir, obtenir des recommandations de recettes tous les jours avec les ingrédients dans le réfrigérateur, ou faire des photos des ingrédients à acheter et recevoir des rappels tous les jours. L' idée que j'aime le plus est d'obtenir une recette ou des recommandations tous les jours avec les ingrédients dans le réfrigérateur. C' était notre tâche, puis nous avons trouvé le concept, donc nous avons conçu ce prototype papier 5. Créer un moodboard: Dans ce chapitre, nous allons parler d'un tableau d'humeur. Comment commencer lorsque vous voulez créer une interface numérique ? La plupart du temps, gens se sentent vraiment dépassés par tous les choix et, ils ont peur de l'écran large ou du livre blanc qu'ils ne savent pas comment commencer. Ma recommandation est de commencer par une analyse où vous pensez vraiment du groupe cible. Qui voulez-vous vraiment attirer ici, ou qui êtes-vous vraiment en train de concevoir et ensuite développer une planche d'humeur. N' hésitez pas à télécharger le tableau d'ambiance et les modèles du groupe cible. Ces modèles vous aideront dans ce chapitre. Avant de commencer, nous aurons une analyse très rapide et réfléchirons à notre groupe cible et aussi à la planche d'humeur. Lorsque nous pensons au groupe cible, le groupe cible désigne en fait les personnes pour lesquelles vous concevez. Vous avez trouvé un problème, vous avez trouvé quelques idées pour les résoudre, et [inaudible] premier prototype alors qui sont en fait votre groupe cible ? Qui sont les personnes pour lesquelles vous concevez ? Vous définissez toujours cela dans la première partie du cours. Mais on va recommencer au cas où tu ne l'aurais pas déjà fait. Tout d'abord, vous définissez pour qui vous concevez vraiment. Qui est votre groupe cible ? Dans mon cas, je conçois un générateur de recettes pour un frigo intelligent. Mon groupe cible est les familles avec de jeunes enfants. Ils vivent en ville et ils sont plus ou moins avertis de la technologie. C'est la raison pour laquelle ils ont acheté ce frigo intelligent. Leurs objectifs sont en fait que la plupart des familles économisent vraiment de l'argent pour réduire leur propre gaspillage alimentaire, et de cuisiner des repas sans avoir besoin d'autres achats, mais ce qui les aide à être spontanés. L' aspect et la sensation pour l'ensemble du design doivent être bien sûr, convivial, devrait être frais, devrait être léger et il doit être doux et facile à utiliser. C' est vraiment important parce que même peut-être que les enfants veulent aider ou utiliser le tableau d'ambiance ainsi que le design. Nous avons déjà défini cela, alors prenez quelques minutes pour le remplir et vous pouvez utiliser le modèle ou vous pouvez également utiliser le stylo et le papier. Mais d'après mon expérience, il est vraiment utile de trouver cela d'abord. Maintenant, nous pouvons commencer avec le tableau d'ambiance et c'est en fait l'une de mes parties préférées. Je pense que c'est très amusant. Je suis presque sûr que vous apprécierez vraiment. Qu' est-ce qu'une planche d'humeur ? Généralement, vous pouvez dire qu'un tableau d'ambiance est un arrangement d'images, de matériaux, de morceaux de textes, etc ont l'intention d'évoquer ou de projeter un style ou un concept particulier. Il s'agit beaucoup de l'aspect et de la sensation d'un projet. Voici quelques exemples que j'ai vraiment aimé c'est une marque personnelle que j'ai trouvé sur Behance. Vraiment belle planche d'humeur sur les différentes choses qui sont liées à cet objectif final. Par exemple, la couleur du style de topographie des matériaux, comment il craint réellement. Je pense que c'est aussi vraiment intéressant parce qu'ils peuvent déjà voir des motifs de couleur, des icônes différentes. Lorsque vous voyez que vous comprenez automatiquement l'aspect et la sensation du produit final. Comment pouvez-vous commencer avec votre conception ? D' après mon expérience, c'est génial d'avoir de l'inspiration, donc j' aime généralement passer par différents sites d'inspiration pour les designers. Je peux fortement recommander d'utiliser dribbble. C' est une plate-forme vraiment géniale pour n'importe quelle inspiration de design, donc parfaite pour les planches d'ambiance. Vous pouvez créer un compte là-bas ou vous pouvez simplement le rechercher vous-même sans télécharger ou télécharger quoi que ce soit. Vous pouvez rechercher un terme spécifique, par exemple, la cuisine, puis vous avez différents exemples de conception d'application. Vous pouvez simplement faire des captures d'écran et les placer dans votre tableau d'humeur. J' ai aussi un compte là-bas et j'ai enregistré beaucoup de collections alors n'hésitez pas à les consulter ou à me suivre ou à voir ce que j'économise pourrait être intéressant pour vous. Une autre plate-forme que je peux recommander pour les planches d'humeur est Behance. Behance a un réseau social vraiment génial pour spray créatif. Vous pouvez présenter votre travail. J' ai aussi téléchargé quelques projets là-bas, alors n'hésitez pas à les vérifier, peut-être, c'est intéressant pour vous et j'ai aussi quelques collections là-bas et différentes planches d'humeur pour différents projets. N' hésitez pas à les utiliser pour les copier et les coller pour votre moodboard. La troisième recommandation est Pinterest. Je suppose que beaucoup d'entre vous connaissent probablement déjà Pinterest. C' est une plate-forme vraiment cool avec des images différentes. Vous avez une recherche, vous pouvez rechercher différentes choses et ensuite, à la fin, créer votre propre tableau d'humeur. Ici, vous pouvez voir quelques-uns de la planche d'humeur, quelques-uns des dossiers que j'ai créés pour différents sujets, même pour les tenues comme, maison future, la cuisine donc tout ce qui m'inspire, même à côté de ce projet. J' ai également créé un dossier qui s'appelle application et là je sauve tout le chemin comme dans ceux-ci que je trouve sur Pinterest que je pense sont vraiment beaux et peut-être que je peux les utiliser plus tard pour une planche d'humeur. Ouais, encore une fois, vraiment fortement recommandé de créer un dossier là-bas et enregistrer tout ce que vous trouvez inspirant pour les projets futurs ou même pour celui-ci, puis commencer à créer votre moodboard. La tâche ici est de redéfinir votre groupe cible, écrire ceci le modèle que j'ai créé pour vous, et aussi de créer le tableau d'ambiance. Lieu, tout ce que vous trouvez inspirant ou l'aspect et la sensation de votre projet là-dedans. Cela pourrait être des conceptions d'applications, cela pourrait être des matériaux, cela pourrait être de la typographie, cela pourrait être des icônes, des images, tout ce que vous pouvez trouver. Vous pouvez le placer ici et vérifier ça. Maintenant, vous pouvez regarder le nouveau design mon tableau d'humeur et je vais vous guider à travers le processus de conception de mon propre tableau d'humeur. J' espère que c'est inspirant pour vous et utile. Mais ceci est de requêtes mon propre tableau d'humeur. Le vôtre peut sembler complètement différent et c'est tout à fait bien alors ne vous inquiétez pas si le vôtre a l'air un peu différent. 6. Choisir les couleurs: Dans ce chapitre, nous allons parler des couleurs. Comment choisir la palette de couleurs parfaite pour vraiment transporter votre mission qui transforme vraiment les bonnes émotions pour votre design. Ma recommandation est de choisir votre palette de couleurs pour votre design à bon escient. Je vais parler de quelques choses que vous devez savoir sur les couleurs, quand les utiliser, comment les utiliser, et pour quelle couleur nous allons travailler, quel but. Je vais également partager quelques outils et sites Web vraiment cool pour venir avec des palettes de couleurs vraiment grandes. Se concentrer sur les aspects psychologiques des couleurs et partie essentielle de la compréhension de la théorie des couleurs. Lorsque vous sélectionnez une palette de couleurs UX pour votre produit, votre application, votre design ou autre, vous réfléchissez généralement à l'apparence des choses, mais il est tout aussi important de penser à ce qu'elles ressentent. La couleur a une influence psychologique puissante sur le cerveau humain, chaque couleur représentant différentes significations et émotions pour vos utilisateurs. Après avoir examiné de près la psychologie de la couleur. Où utiliser, quelles couleurs pour provoquer quelle émotion, voici quelques recommandations. Tout d'abord, limitez le nombre total de couleurs. Lorsque vous créez un nouveau jeu de couleurs, il peut être tentant d'y ajouter des dizaines de couleurs. Mais il vaut mieux éviter cette tentation. Pourquoi ? Parce qu'il est vraiment difficile d'atteindre un équilibre visuel lorsque vous utilisez trop de couleurs. L' utilisateur se sent vraiment submergé par beaucoup de couleurs. Vous pouvez facilement submerger l'utilisateur, il est donc préférable de vraiment limiter le nombre de couleurs. La roue de couleur comprend les couleurs primaires, donc les couleurs rouges, jaunes , bleues et secondaires, qui sont un mélange de couleurs primaires. Couleurs orange, vert, violet et tertiaire. Couleurs créées en mélangeant des parties égales d'une couleur primaire et d'une couleur secondaire. Citron, roux ou buff. Vous savez probablement déjà que de l'école, je sais que nous en avons parlé à l'école, mais c'est encore beaucoup planer pour vous quand vous choisissez vos couleurs. Lorsque nous parlons de palettes de couleurs il existe différentes façons de créer ces palettes de couleurs. Par exemple, monochromatique. Les schémas monochromatiques utilisent une seule couleur, mais avec des variations de teintes, nuances et de tons de la couleur. Ce schéma est très facile pour les yeux puisque les couleurs vont naturellement bien ensemble, ils créent un effet 3D. Nous avons également desschémas de couleurs analogues, schémas de couleurs analogues, utilisez quelques couleurs connexes. La couleur est la couleur dominante, tandis que d'autres l'ont soutenue. Les couleurs de soutien enrichissent le schéma et le rendent plus attrayant visuellement. Ensuite, nous avons gratuit. forme la plus basique, les schémas complémentaires se composent de seulement deux couleurs contrastées. Par exemple, une couleur verte dominante et une excellente couleur rouge. Ces régimes fonctionnent bien si vous voulez attirer l'attention. Parler de couleurs complémentaires, quelles sont les couleurs complémentaires ? C' est vert et rouge, ou bleu et orange, et jaune et violet. Ils provoquent un très grand contraste. Ils ont généralement l'air très bien ensemble. Voici quelques exemples. Voici un exemple d'Andrea Hock. Elle est venue avec ces trois belles planches d'humeur, et cette palette de couleurs monochromatiques avec beaucoup de formes bleues différentes sont vraiment belles. Un autre exemple que je trouve vraiment intéressant est celui de Chipmunk. Il est une bonne évolutivité, est essentiel pour le concepteur web, sorte que vous pouvez numériser facilement le contenu, et vous avez un point de mise au point facile. Les médecins devraient être en mesure de trouver l'information dont ils ont besoin en un coup d'œil. Super facile. Les couleurs que vous utilisez peuvent prendre en charge cela car elles peuvent aider à guider l'œil de l'utilisateur. Par exemple, vous pouvez utiliser une couleur contrastée pour un bouton d'appel à l'action. Pour le bouton ici, pour donner plus de poids visuel et le rendre plus important. Ici vous pouvez voir que nous avons un fond jaune, nous avons une topographie noire et un peu de blanc dans l'illustration pour mettre un autre point culminant ici. La seule autre couleur est le porc une plante de l'action de culture que nous voulons vraiment utiliser pour cliquer sur. C' est vert, donc il y a un grand point culminant sur celui-ci. La chose cool des couleurs est que vous pouvez vraiment mettre l'accent sur les faits saillants. Vous pouvez également voir que, je pense en photographie, ici par exemple, où tout est noir et puis vous voyez le jaune au milieu, pour un grand point culminant, vous pouvez provoquer des contrastes et voici quelques exemples. C' est l'un des projets sur lesquels je travaillais pour la vie. Ceci et ceci dans un flux en direct en ligne. Ce que vous pouvez voir dans les exemples ici que je nous montre qu'il ya toujours la couleur de mise au point, la couleur principale, et différentes couleurs autour que vous avez une palette de couleurs vraiment belle, avec toutes les couleurs que nous ajustons parfaitement ensemble. Voici, par exemple, une application bancaire. J' aime vraiment cet exemple parce que vous pouvez voir les couleurs bleutées et grisâtres ici, qui représentent vraiment la confiance et la sécurité. Je peux fortement recommander de consulter quelques-unes de ces ressources vraiment impressionnantes. Un que j'aime personnellement vraiment est la couleur appelée une application web. Vous pouvez glisser à travers différentes couleurs, les vérifier, et créer votre propre palette de couleurs et à la fin, même la télécharger. Une autre recommandation est refroidisseurs, plate-forme vraiment génial où vous pouvez créer vos propres palettes de couleurs ainsi. Nous avons beaucoup d'exemples, vous pouvez les générer, et faire beaucoup de choses différentes avec. Il suffit de vérifier, c'est vraiment belle palette de couleurs fait vraiment une différence quand il s'agit de votre projet. Voici la tâche maintenant. Si vous n'avez pas créé de palette de couleurs dans votre tableau d'ambiance, choisissez une palette de couleurs pour votre propre interface. Maintenant peut-être déjà quelques couleurs dans votre tableau d'humeur, vous pouvez les utiliser. Utilisez l'un des outils que j'ai recommandés. Commencez et téléchargez la palette de couleurs et ajoutez-la à votre bibliothèque de conception et à Adobe XD ou dans le programme de conception. 7. Accessibilité: Ce chapitre porte sur l'accessibilité. Ce sujet devient de plus en plus important seulement parce que nous définissons notre groupe cible. Cela ne veut pas dire que notre groupe cible est parfait et qu'ils ont un côté parfait et qu'ils savent comment le faire. Il y a beaucoup de gens qui ont un certain handicap et je pense que c'est super intéressant et deviendra de plus en plus important aussi pour nous en tant que concepteurs de penser à des solutions qui incluent tout le monde et pas seulement les gens qui sont parfaits. Cela est également important pour les gens qui commencent leur carrière parce que nous devons également penser à ces personnes. Lorsque nous pensons à l'accessibilité ou aux personnes handicapées, nous pensons généralement aux personnes aveugles ou sourdes ou à des choses comme ça. Mais ce qui m'a vraiment ouvert les yeux, c'est ce graphique que j'ai vu il y a quelques années et je pense que c'est vraiment intéressant parce que penser à l'accessibilité ne signifie pas seulement penser aux personnes aveugles ou qui n'ont qu'un seul bras, mais aussi les personnes qui sont temporairement ou une situation une sorte de handicaps. Lorsque nous pensons à des gens qui ont des problèmes de vue, ne sont pas seulement des aveugles, mais peut-être des gens qui ont des problèmes même dans le temps ou qui sont des conducteurs distraits, des choses comme ça. Même avec le toucher, bien sûr, il y a des gens qui n'ont qu'un bras et ne peuvent pas utiliser leur bras droit s'ils veulent utiliser une interface. Mais il y a aussi des gens qui ont des blessures au bras, ou même des gens qui pensent à de nouveaux parents qui portent leur bébé. Penser à cela m'a vraiment ouvert les yeux et je pense qu'il est vraiment intéressant pour nous de garder à l'esprit quand nous concevons. Parfois on nous demande, j'ai trouvé cette citation sur Internet, on nous demande, quel est un exemple d'accessibilité ? Un exemple d'accessibilité serait tout contenu ou fonctionnalité entièrement accessible et utilisable par les personnes ayant certaines déficiences. Ce sont peut-être des gens qui ne peuvent pas utiliser leur bras parce qu'il est cassé, qui ont un bras qui porte un bébé, gens qui ont des infections de l'oreille et qui ne peuvent pas entendre ça bien, ou des gens qui ont des problèmes oculaires, des gens qui ont perdu leurs lunettes, etc. Cela peut faire référence à des éléments individuels, des caractéristiques, ou à l'ensemble de l'expérience Web. Un exemple de la vraie vie est cette chose dans de nombreux bus. Peut-être avez-vous vu que lorsque vous avez utilisé le bus la dernière fois pour les personnes qui veulent accéder à l'autobus avec le fauteuil roulant ou même pour les parents ou toute personne qui utilise des roues à un moment donné ont cette rampe. Ce qui est le plus facile pour nous en tant que concepteurs est de vraiment se concentrer sur les couleurs parce que fournir un contraste aide les personnes ayant des problèmes oculaires ou qui n'ont pas la meilleure vue du tout pour recevoir quelque chose. Nous devons avoir un très grand contraste entre la topographie en arrière-plan ou le bouton en arrière-plan. Il y a quelques outils que je peux recommander pour vérifier si la palette de couleurs vous avez choisie fonctionne parfaitement pour les personnes handicapées, donc si le contraste est assez grand. Parce que c'est quelque chose que vous êtes le plus critiqué si ça ne marche pas. Je peux fortement recommander de vérifier cela. Il y a aussi un plugin vraiment génial pour Adobe XD, qui est appelé plugin Stark. Là, vous pouvez vérifier pour une palette de couleurs et voir à quoi il ressemble pour les personnes qui ont des problèmes de vue. Vous pouvez simplement le trouver dans le dossier du plugin. 8. Images et illustrations: Transporter les émotions est très important pour chaque design que vous allez créer dans votre carrière de design, et les images et illustrations peuvent vraiment vous aider à le faire. Il est vraiment essentiel d'obtenir cela correctement, vraiment choisir les bonnes images qui s'adaptent à votre design, illustration adaptée à votre design. Dans ce chapitre, nous allons parler à travers différentes méthodes, comment trouver ces images, comment vraiment trier ce qui a du sens, et aussi quelques ressources. Où pouvez-vous réellement trouver des images ? Où pouvez-vous trouver des illustrations si vous n'êtes pas un illustrateur ou un photographe afin que vous puissiez les créer vous-même ? Lorsque les concepteurs savent travailler avec l'imagerie, ils sont mieux à même de manipuler les réactions émotionnelles d'un public. Les conceptions de produits peuvent augmenter ou diminuer la qualité de leurs images d'expérience utilisateur, c'est pourquoi il est essentiel de les corriger. premières impressions sont très importantes, en particulier dans la conception web. Selon les recherches, nous avons aussi peu que 50 millisecondes pour faire une impression qui détermine si quelqu'un va continuer ou quitter votre expérience Web, votre application, votre service. L' apparence d'un site Web ou d'une application a tout à voir avec l'identité visuelle d'un produit, mais l'identité visuelle et l'expérience utilisateur vont de pair. Sans un, toute l'expérience en souffre. Quand utiliser des photos, des vidéos ou des illustrations maintenant ? Tout d'abord, pour afficher un scénario spécifique. Les photos sont parfaites à utiliser lorsque vous avez une vision à l'esprit. Vous pouvez commander un photographe pour exécuter cette vision ou utiliser une fonctionnalité de recherche robuste sur les sites de photos stock, alors essayez de trouver le bon. Donc, si vous voulez montrer quelque chose sur la cuisine, la narration visuelle, vous pouvez également intégrer une image sur la cuisine ou l'endroit où une famille cuisine. Aussi, pour mettre en valeur un produit. Si les concepteurs de votre site Web ou d'applications se concentrent sur un produit spécifique, vous voudrez certainement présenter une image de ce produit. Ainsi, vous pouvez utiliser la vidéo ou le stop motion pour montrer comment le produit est utilisé des images fixes de plusieurs trajets inclinés avec un curseur. Ou aussi pour le facteur wow. Lorsqu' elle est utilisée de manière appropriée, une image peut déclencher une forte réaction émotionnelle dont les utilisateurs se souviendront. J' aime aussi vraiment cet exemple de Julie Sandusky. Elle a conçu cette belle application sur le partage de nourriture où elle a combiné très belles illustrations avec des images très naturelles. Donc je pense qu'une très bonne combinaison des deux. Une autre chose importante ou une astuce est si vous voulez utiliser des images ou des illustrations pour tester cela sur différents appareils, car vous ne savez jamais vraiment quel type d'appareil l'utilisateur utilise. Il peut s'agir d'un iPhone, cela peut être sur leur iPad, ou même l'expérience Web. Si vous n'êtes pas photographe et si vous n' avez pas de budget pour commander un photographe professionnel, mais je peux fortement recommander certains sites Web avec du matériel de stock gratuit, par exemple, Unsplash. Vous pouvez rechercher des mots spécifiques , puis vous obtiendrez une grande sélection d'images différentes que vous pouvez utiliser pour votre projet. Quand il s'agit d'images ou d'illustrations, je peux fortement recommander d'utiliser UnDraw. C' est un plug-in pour Adobe XD avec beaucoup d'illustrations différentes que vous pouvez télécharger, ajuster, modifier les couleurs, puis utiliser pour votre projet. Voici une liste de ressources avec toutes les ressources que je peux recommander pour les photos, les vidéos et les illustrations, la plupart d'entre elles sont 100% gratuites, donc vous pouvez simplement vérifier et regarder comme vous l'aimez. Voici la tâche maintenant. Choisissez des illustrations ou des images pour votre propre conception d'interface, intégrez-les dans votre bibliothèque de conception, ajustez l'espace colorimétrique à votre palette de couleurs, puis vous êtes prêt à partir. 9. Polices et typographie: [BRUIT] Dans ce chapitre, nous verrons comment trouver la bonne topographie, les bonnes polices pour vos créations. Nous parlerons de ressources, moyens de les combiner et de nombreux conseils et astuces qui vous seront utiles, non seulement pour la conception numérique, mais aussi, je dirais, pour tous les types de design que vous créerez en tant que designer. Choisir la bonne police peut être un défi, mais je souhaite partager avec vous quelques conseils et astuces qui vous aideront à sélectionner la police parfaite pour votre projet. La première recommandation concerne en fait l'image de marque, car la sélection de la police fait également partie de l'image de marque du design général. police que vous choisissez doit incarner le caractère et l'esprit de votre marque. Essayez de faire correspondre le style de police au caractère de votre marque. Imaginez qu'un designer final utilise Comic Sans pour une application bancaire qui ne conviendrait pas du tout Il est donc toujours important que ces deux éléments s'intègrent vraiment et que la typographie corresponde vraiment à la marque en général. La deuxième recommandation concerne la lisibilité, car il est généralement évident qu'il vaut mieux qu'une police soit très lisible et très claire. Parfois, c'est illisible, même si cela a l'air vraiment cool mais gardez toujours à l'esprit que les utilisateurs doivent passer plus de temps à comprendre ce qui y est écrit et peut-être qu'ils ferment la fenêtre ou la suppriment parce qu' ils ne peuvent tout simplement pas le lire. Cela prend trop de temps. Évitez plutôt d'utiliser des polices sophistiquées ou tout texte en majuscules, ainsi des corps ou des textes très volumineux qui attirent l'attention du lecteur. Il est préférable d'utiliser des polices décoratives uniquement pour les titres et les titres. Assurez-vous également choisir une police de caractères qui fonctionne bien dans plusieurs tailles et épaisseurs afin de maintenir lisibilité sur tous les sites de votre téléphone, sur votre page Web, pour du texte plus grand ou plus petit, etc. L'une des premières décisions que nous devons prendre lorsque vous souhaitez choisir une police est de savoir s'il s'agit d'une police avec empattement ou sans police. Bien que la décision puisse être basée sur plusieurs points clés, l' un des plus importants est la longueur de votre copie. En général, les polices serif sont plus faciles à lire pour les textes longs que les polices sans. polices Serif, [inaudible], parcourent une ligne, surtout si les lignes sont longues. Nous l'avons probablement vu dans de nombreux journaux, où ils utilisent de nombreuses polices serif. S'il est également important de prendre en compte votre public cible, sans est de préférence destiné aux jeunes enfants ou à toute personne apprenant par le biais de ce type de réseau. Sans convient également aux lecteurs ayant une certaine déficience visuelle. De plus, il est préférable d' utiliser des polices sécurisées pour le Web. Certaines polices sont sécurisées pour le Web. Elles sont donc prises en charge par défaut par tous les principaux navigateurs Web. Voici quelques polices de caractères sans danger avec lesquelles vous pourriez commencer, par exemple Arial, Tahoma, Verdana. Génial Des polices de caractères Safe Sans comme Georgia, Lucida, Times New Roman. Vous devez également penser à la famille de polices Certaines polices font donc partie de familles de polices plus importantes, pourrait-on dire, et elles proposent un très grand choix de styles et de poids différents qui donnent plus de liberté aux concepteurs. Lorsque vous regardez Helvetica ou Helvetica Neue, elles incluent de nombreuses sous-polices différentes. Lorsque vous choisissez une police pour votre design, choisissez plutôt une police avec une très grande famille de polices car cela vous aidera à déterminer si vous avez des exigences différentes. Je dirais que pour la plupart des projets, il suffit d'avoir au moins deux polices ou trois polices. Pour de nombreux projets, ou je dirais d'après mon expérience, il suffit d'avoir trois poids, à savoir un poids pair, gras et un italique, tandis que d'autres peuvent nécessiter des versions supplémentaires pour créer une bonne hiérarchie visuelle. plupart du temps, n'avez besoin que d' une seule police de caractères pour créer votre design. Cependant, dans certains cas, vous souhaiterez utiliser plusieurs polices de caractères. Un pour votre corps et un pour le titre, par exemple. Le conseil suivant est de limiter le nombre de polices. Je sais qu'il existe tellement de belles polices et que nous aimerions tous en utiliser autant que possible, mais je recommande de vraiment limiter le nombre de polices. Évitez d'utiliser plus de deux ou trois polices dans votre création, car chaque fois que vous pensez avoir besoin d'une nouvelle police, optez plutôt pour des tailles différentes ou des sous-polices différentes, par exemple, puis intégrez-en une nouvelle. Conseil suivant. Essayez d'utiliser des polices qui ne sont pas trop similaires. L'idée même de l'utilisation de plusieurs polices dans un design est créer une hiérarchie et une diversité visuelles. C'est pourquoi il ne sert à rien choisir deux polices qui semblent identiques. En fait, plus les polices se ressemblent, plus elles risquent d'entrer en conflit. Le contraste est une chose très importante, non seulement en matière de design, mais aussi pour la typographie en général. Lorsque vous choisissez d'utiliser plusieurs polices de caractères, assurez-vous que les polices que vous utilisez présentent différences de contraste importantes, mais n' oubliez pas que le contraste n' est pas synonyme de conflit La combinaison idéale de polices doit donc créer une harmonie. Il existe une règle simple. Trouvez deux polices de caractères qui ont une chose en commun mais qui sont par ailleurs très différentes. Combiner serif et sans est une solution classique, par exemple. Lorsque vous combinez deux polices très différentes, l'essentiel est d'établir une hiérarchie claire entre les deux. Une police doit être plus visible que l'autre et cela peut être réalisé en écrivant la taille et le poids de chaque police de caractères. Je recommande de choisir une police pour le titre et une autre pour le texte. Celui du titre peut être un peu plus sophistiqué et celui de la copie doit être facile à lire. Comment trouver la police parfaite maintenant ? Voici quelques outils et recommandations. L'un d'eux est UXPRO, un outil vraiment cool qui permet de combiner des polices, trouver les différents outils utiles, afin que vous puissiez y jeter un coup d'œil. L'autre astuce concerne les polices Adobe. J'adore ça, car vous pouvez télécharger des polices sur votre Creative Cloud. Voici maintenant la tâche. Choisissez la typographie de votre projet, une, deux ou trois polices, ajoutez-la à votre bibliothèque conception dans l'outil logiciel de conception que vous utilisez et c'est parti. [BRUIT] 10. Apprendre les principes de la conception: Dans ce chapitre, nous allons parler des principes de conception de base. Si votre expérience est la conception graphique, certains de ces principes peuvent vous être familiers parce que ces principes sont des principes généraux. Quel que soit le type de design que vous venez avec, il peut s'agir d'une affiche, même d'un flyer, d'une carte de visite ou d'une interface numérique, ces principes de conception fonctionnent toujours. Je pense que c'est vraiment fascinant si vous les connaissez et les utilisez parce que cela fait vraiment la différence d'un bon design ou d'un grand design. Je vais passer par quatre principes de conception. Il y en a en fait plus, mais je pense que ces quatre sont les plus importantes. Vous pouvez les utiliser pour tout type de design. Il pourrait être un post Instagram, pourrait être une affiche, pourrait être un dépliant, pourrait être un design visuel, mais aussi, la conception d'interface. Le premier principe de conception est l'alignement. L' alignement fournit une stabilité cognitive et des relations visuelles. Chaque élément de l'interface utilisateur doit être aligné avec un ou plusieurs autres éléments. Voici un très bon exemple. C' est une page Web normale, et vous voyez que vous avez une grille visuelle où la plupart des choses sont alignées visuellement. Cela aide l'œil à se concentrer vraiment et à ne pas avoir de distraction. Vous voyez cela pour n'importe quel type de domaines. Par exemple, si vous avez différentes icônes qui ne sont ni le milieu, ni les zones de texte et les titres, tout doit être aligné. La même chose des cartes, vous voyez ceci, et c'est le seul puzzle. Ceci est possible pour les éléments de conception verticaux, mais aussi pour les éléments de conception horizontaux. Ensuite, nous avons la proximité. Les éléments proches les uns des autres sont perçus comme un seul groupe. Les éléments non liés sont séparés visuellement. Regrouper certains éléments contextuellement pour former un tout perçu. C' est, je pense, un très bon conseil. Si les choses appartiennent ensemble, vous voyez sur le côté droit, par exemple, il y a une image et ces deux blocs blancs. Si vous les placez près les uns des autres, il est perçu comme une zone qui appartient ensemble. Assurez-vous toujours de vraiment placer les zones qui appartiennent ensemble plus près les unes des autres. Voici un exemple d'Amazon, et là vous voyez qu'il existe différentes informations. Tout d'abord le nom de l'article, l'image, le montant que vous devez payer, le logo, les étoiles, tout est vraiment proche ensemble. Si vous regardez ici en un seul coup d'œil, vous savez automatiquement ce qui appartient ensemble parce que toutes les zones qui appartiennent ensemble sont vraiment proches les unes des autres. Si vous comparez ces deux-là, je pense que c'est vraiment intéressant parce que l'un n'est certainement pas parfait parce que tout est très proche, et vous ne pouvez pas vraiment voir la différence. Vous pouvez voir celui-ci sur le côté droit est celui qui est recommandé. Les zones qui appartiennent ensemble sont proches les unes des autres, et il y a une certaine distance entre les éléments individuels de sorte que si vous fermez les yeux, vous saurez automatiquement ce qui appartient ensemble. Sur le côté gauche, tout est vraiment proche et toutes les distances d'un article à l'autre, les boutons, tout semble appartenir à un produit. Ensuite, nous avons le contraste. Un manque de contraste entre le texte et l'arrière-plan contraint l'œil parce qu'ils ne savent pas quelle couleur mettre au point. Le contraste attire l'attention sur des éléments spécifiques. Ce n'est pas seulement important pour la topographie des titres, mais pour tout. Le contraste peut être presque tout ce qui est différent du reste. Ici, vous avez, je suppose, un très bon exemple. Vous avez le design de base, la couleur de base que vous voulez utiliser, la topographie de base. Ensuite, celui qui est plus sombre attire automatiquement l'attention sur car le contraste avec l'arrière-plan est plus grand que le gris d'origine et le subordonné, ce qui est presque comme l'arrière-plan. En revanche, je pense qu'il est vraiment important de gérer ce droit parce que ce que vous voyez là est le contraste insuffisant, trop de tension, et l'équilibre et la tension. Il y a vraiment point doux entre pas trop de tension, mais aussi de contraste. Quand nous parlons de contraste, il ne s'agit pas seulement de couleurs, mais cela pourrait aussi être proportionnel par genre si un élément est plus grand que les autres. Espace blanc, la distance entre les différents éléments peut être le mouvement, mais aussi le contraste par différentes couleurs ou tailles, formes ou alignement. L' une des choses les plus importantes est probablement la hiérarchie, car la hiérarchie fournit à l'utilisateur une feuille de route pour naviguer tout au long de votre conception. À une époque où l'attention et la patience sont limitées, hiérarchie peut être l'arme secrète qui permet vos utilisateurs de trouver ce dont ils ont besoin tout en les encourageant à explorer plus loin. Compte tenu de l'importance de l'expérience utilisateur, hiérarchie est souvent essentielle au succès d'une interface. La hiérarchie dans la conception est généralement un sujet très important. De nombreux autres principes de conception tels que l'alignement, l'accent, la proportion, l'espace blanc , etc. peuvent aider à influencer une structure hiérarchique dans votre conception. C' est un très bon exemple parce que vous allez le lire d'abord, puis vous le lirez, puis celui-ci, et ensuite vous le lirez à la fin. En créant une bonne hiérarchie, vous pouvez guider l'utilisateur et vous pouvez déjà déterminer ce que l'utilisateur lit en premier, deuxième et dernier. Habituellement, vous démarrez la plus grande police, vous l'utilisez généralement pour le titre. Ensuite, vous avez le sous-titre, puis vous avez quelques sous-titres, puis la copie. Il existe vraiment une différence entre différents types de visages et différentes tailles ainsi. Ensuite, nous avons la répétition. répétition est utilisée pour créer une hiérarchie visuelle. Il peut s'agir de polices, couleurs, de textures et d'éléments graphiques. La réutilisation des éléments de ces éléments visuels crée de la cohésion. Très important, toujours recycler, réutiliser des choses que vous avez déjà inventées ; différents éléments de conception, différents modèles. Ici, nous avons un titre, un texte de copie, et le bouton. Il suffit de les réutiliser si vous avez un élément très similaire ou peut-être le même, vous utilisez le même motif. Pour cela, vous pouvez l'intégrer dans votre bibliothèque de conception et simplement réutiliser chaque fois que vous l'utilisez. Même ici. Exemple Amazon, encore une fois, tous ces articles sont exactement les mêmes. Il est vraiment facile pour l'utilisateur de scanner ce très rapidement et de comprendre que tous ces articles sont des articles qu'ils peuvent acheter, donc ils appartiennent à la même marque. 11. Règles d'or de l'interface: Donc, les règles d'or de la conception d'interface. Il y a dix règles et je vais vous en parler avec quelques exemples. Je recommande donc vivement de prendre un stylo et du papier et de prendre quelques notes. Parce que cela sera très utile pour tous ceux qui veulent approfondir les choses et qui veulent vraiment comprendre le fondement de la conception de l'interface. Commençons donc par le premier. Faites correspondre le système et le monde réel. Le système doit donc parler la langue de l'utilisateur avec des mots, des phrases et des concepts qui lui sont familiers plutôt que le système ou ils saisissent des termes. Un exemple est d'utiliser des termes que l'utérus comprend vraiment et non des mots très spécifiques et que personne ne comprend vraiment. Utilisez donc des métaphores du monde réel, par exemple, l'utilisation de métaphores et la conception de l'interface utilisateur permettent aux utilisateurs de créer un lien entre le monde réel et l'expérience numérique. Nous sommes des métaphores murées et utilisateurs puissants en leur permettant de transférer les connaissances existantes sur façon dont les choses devraient ressembler ou fonctionner. Par le biais de l'interface. métaphores sont souvent utilisées pour rendre ce qui n'est pas familier, familier. Prenez la corbeille de votre bureau, par exemple, qui contient les fichiers supprimés. C'est quelque chose que vous connaissez dans la vraie vie. Tu y mets quelque chose parce que tu veux le jeter, tu n'en as plus besoin. Ce n'est pas une véritable interdiction de poubelle sur votre ordinateur portable ou sur votre ordinateur, mais cela représente visuellement la même chose. Ainsi, l'utilisateur comprend facilement ce que cela signifie. Visualisation de l'état du système. Tenez les utilisateurs informés de ce qui se passe grâce à un retour d'information approprié dans un délai raisonnable. Les utilisateurs sont beaucoup plus indulgents lorsqu'ils ont des informations sur ce qui se passe et qu'ils reçoivent retour d'information périodique sur l' état du processus. La visibilité de l'état se produit essentiellement lorsque les utilisateurs lancent une action qui met un certain temps à se terminer sur l' ordinateur, comme une barre de chargement par exemple, ou un chargement que les utilisateurs n'aiment pas voir rien sur l'écran de l'appareil alors que l'application est censée faire quelque chose. L'utilisation de l'indicateur de progression est donc l'un des aspects subtils de la conception de l'interface utilisateur qui a un impact très important sur le confort et le plaisir des utilisateurs. Donc, un conseil très simple très utile lorsque vous voulez commencer. Le numéro trois est le contrôle de l'utilisateur. Supportez, annulez et rétablissez, car de nombreux utilisateurs choisissent souvent les fonctions système par erreur et devront clairement marquer la sortie pour laisser l'état indésirable. Cette règle signifie que l' utilisateur doit toujours être en mesure de revenir rapidement en arrière, peu importe ce qu'il fait. Cela permet aux utilisateurs d'explorer le produit sans craindre constamment l'échec, n'est-ce pas ? Parce que si quelque chose échoue, s'ils font quelque chose de mal, ils peuvent l'annuler et continuer. Lorsqu'un utilisateur sait que les erreurs peuvent être facilement annulées. Cela encourage l'exploration d'options inconnues, afin que l'utilisateur se sente plus à l'aise et plus confiant dans l'exploration de votre application ou de votre site Web. Au contraire, si un utilisateur doit être extrêmement prudent dans chaque action qu'il entreprend, cela conduit à une exploration plus lente et à une expérience nerveuse qui sait ce que le système, bien sûr, devrait parler la langue de l' utilisateur avec des mots, des phrases, des concepts familiers à l'utilisateur plutôt que des trope orientés système. Job en a parlé. Évitez donc vraiment le jargon et les termes orientés système lors de la conception d'un produit. Il est important d' utiliser un langage facile à lire et à comprendre. Et le système doit parler la langue de l'utilisateur avec des mots, des phrases et des concepts familiers au perdant plutôt que du jargon ou des termes orientés système. Le numéro cinq est donc la prévention des erreurs. Essayez d'améliorer les conditions sujettes aux flèches en premier lieu ou vérifiez-les et présentez aux utilisateurs une option de confirmation avant qu'ils ne s'engagent dans l'action, n'est-ce pas ? Les commentaires sont donc généralement associés à des points d' action pour chaque action de l'utilisateur. Le système doit donc montrer une réaction claire et significative. Le système de retour d'information pour chaque action espère que les utilisateurs atteindront cet objectif sans friction. Votre conception doit tenir compte de la nature de l'interaction. Pour les actions fréquentes, l'utilisateur peut répondre. Par exemple, lorsque les utilisateurs interagissent avec un objet interactif tel qu'un bouton, il est essentiel de fournir une indication et l'action a été reconnue, n'est-ce pas ? Il peut donc s'agir de quelque chose d'aussi simple qu'un bouton qui change couleur lorsqu'on appuie dessus ou qu'une sorte d'interaction se dégage. L'absence d'un tel retour d'information oblige les utilisateurs à vérifier si l'action est censée être exécutée. Ainsi, lorsque vous concevez une interface, assurez-vous toujours d' avoir ce type de retour d'information. L'agresseur se sent donc plus à l'aise. Le numéro six est la reconnaissance. Les instructions d'utilisation du système doivent être visibles et, bien entendu, facilement récupérables chaque fois que cela est approprié. est clair, mieux c'est. Promouvez donc une clarté visuelle. Une bonne organisation visuelle améliore la convivialité et la lisibilité, permettant aux utilisateurs de trouver rapidement les informations qu'ils recherchent et d'utiliser l' interface plus efficacement. Ainsi, lorsque vous concevez des mises en page pour votre interface, évitez de présenter trop d'informations à la fois sur l'écran. Il en résulte un encombrement visuel. Concentrez-vous donc uniquement sur les choses dont vous avez besoin, pas trop, ne submergez pas l'utilisateur. Et rappelez-vous le principe, la forme suit la fonction. Alors faites en sorte que les choses semblent fonctionner. Appliquez les principes généraux de l'organisation du contenu, tels que le regroupement d'éléments similaires, numérotation des éléments et l'utilisation de titres et de textes d'invite. Une bonne organisation visuelle améliore la convivialité et la capacité de loisirs, permettant aux utilisateurs de trouver rapidement les informations qu'ils recherchent et d'utiliser l' interface plus efficacement. Flexibilité. Les accélérateurs invisibles par l'utilisateur novice peuvent souvent accélérer l' interaction de l'utilisateur expert, tel que le système peut répondre aux besoins des bijoutiers inexpérimentés et expérimentés. Ainsi, des utilisateurs de différents niveaux de compétence ont été adaptés. Les utilisateurs de différents niveaux de compétence doivent être en mesure d' interagir avec le produit à différents niveaux. Ne sacrifiez pas les utilisateurs experts pour une interface facile à utiliser pour les norovirus ou les utilisateurs occasionnels. Essayez plutôt de concevoir en fonction des besoins d'un ensemble diversifié d'utilisateurs. Peu importe donc que votre utilisateur soit un expert ou un débutant. L'ajout de fonctionnalités telles que des tutoriels et explications est extrêmement utile pour les utilisateurs sans riz. Cela permet simplement de s'assurer que les utilisateurs expérimentés peuvent ignorer cette partie. Une fois que les utilisateurs sont familiarisés avec un produit, ils rechercheront des raccourcis pour accélérer les actions couramment utilisées Vous devez fournir un chemin rapide aux utilisateurs expérimentés en leur permettant d'utiliser des raccourcis. Nous l'utilisons dans une application que j'ai conçue pour une startup fruitière. Nous y avons créé un livre de cuisine numérique, intégrant différentes options pour les utilisateurs professionnels. Donc pour les personnes très professionnelles qui cuisinent, non ? Mais aussi des tutoriels pour ceux qui ont besoin d'un peu plus d'aide. Aide, minimisez ces conceptions. Chaque unité d'information supplémentaire dans un dialogue est en concurrence avec l'unité d'information concernée. Éliminez tous les éléments qui n'aident pas vos utilisateurs. Les interfaces ne doivent pas contenir d'informations pertinentes ou rarement nécessaires. Les informations non pertinentes génèrent du bruit dans les yeux. Il est en concurrence avec les informations pertinentes et ambitieuses, C'est une visibilité relative. Simplifiez les interfaces en supprimant les éléments inutiles du contenu qui ne prend pas directement en charge les tâches utilisateur. Développez-vous pour concevoir votre œil de manière à ce que toutes les informations soient présentées à l'écran, mais à la fois précieuses et pertinentes. Chaque élément et évalué en fonction de la valeur, il fournit à l'utilisateur. Un bon exemple d'application qui suit l'approche « less is more » en évitant de surcharger l'interface du contenu ou des fonctionnalités est AR, writer. Neuf documentations sur la liste des tâches de l'utilisateur. Les étapes concrètes à suivre , telles que les informations, doivent être faciles à rechercher et à trouver, créer une interface facile à naviguer. La navigation doit toujours être très claire et évidente. Les utilisateurs doivent pouvoir explorer l' interface et n'importe quel produit logiciel. Même complexes, soyez comme des produits d'entreprise à entreprise qui concernent fonctionnalités telles que des tableaux de bord, par exemple, si une grande quantité d' informations ne doit pas intimider les utilisateurs au point qu'ils ont peur de appuyez sur un bouton, non ? Parce qu'il se passe tellement de choses. Une bonne interface utilisateur, une bonne interface utilisateur placent les utilisateurs dans leur zone de confort en fournissant un contexte en fournissant un contexte sur où ils se trouvent et où ils sont passés, où ils se trouvent, ce qu'ils peuvent faire ensuite. Fournissez des repères visuels. Les repères visuels servent de rappels aux utilisateurs. Permettez aux utilisateurs de naviguer facilement dans l'interface en fournissant des points de référence lorsqu'ils se déplacent dans l'interface d'un produit. Il peut s'agir de titres de page, surlignements pour les options de navigation actuellement sélectionnées ou d'autres aides visuelles qui permettent aux utilisateurs de voir immédiatement où ils se trouvent dans l'interface. Les utilisateurs ne devraient jamais se demander : « Où suis-je réellement, comment suis-je arrivé à l'écran ? Donc, fournissez une icône, réfléchissez une petite flèche arrière, par exemple, un gros titre pour que les utilisateurs comprennent où ils se trouvent. Les utilisateurs doivent recevoir des indices qui les aident à prévoir le résultat d'une action. Un utilisateur ne devrait jamais se demander quoi dois-je appuyer pour faire ceci ou perdre cela ? Récupérez après des erreurs. Les messages d'erreur doivent être exprimés en langage clair, car nos flèches peuvent toujours apparaître. Et ce n'est pas un problème. Mais vous devez également créer un virus. Les flèches apparaîtront toujours, vous devez donc vous préparer pour cela et les concevoir. Un message d'erreur bien conçu est vraiment important et, autre côté, peut transformer un moment de frustration en un moment de conversion. Et un message d'erreur efficace est une combinaison de notification de flèche explicite d'astuces pour résoudre le problème. Alors peut-être avez-vous vu ce genre de messages d'erreur comme, oh, quelque chose, quelque chose de pas si bon s'est passé. Mais qu'est-ce que je peux faire maintenant ? Je l'étire donc, inclus quelque chose que l' utilisateur sait quoi faire. J'espère que cela vous a été utile. J'espère que tu as pris quelques notes. Faites-moi savoir si vous avez des questions et n'hésitez pas à utiliser ces informations dans la conception de votre interface . 12. Outils de design: Maintenant, nous allons parler de différents outils de conception que je peux recommander. Je vais utiliser Adobe XD tout au long de ce quiz. C' est mon outil de conception préféré, mais il y a beaucoup d'autres outils de conception dont vous allez parler très rapidement. N' hésitez pas à utiliser l'outil avec lequel vous vous sentez le plus à l'aise, vous aimez le plus. C' est très bien donc vous n'avez pas besoin d'utiliser Adobe XD, vous êtes libre d'utiliser l'outil que vous voulez. Mais parlons des différentes options très rapidement. Il existe actuellement trois principaux outils de conception sur le marché. Le premier design réussi était Sketch. Quelques années tout le monde, chaque concepteur a utilisé Sketch parce que c'était le premier outil d'interface très professionnel avec beaucoup de plugins, outil de rappel, c'est autour, je dirais comme $100 par an. Ensuite, nous avons Adobe XD, qui fait partie d'Adobe Creative Cloud. Si vous disposez d'un abonnement Creative Cloud, vous pouvez utiliser Adobe XD. C' est en fait mon outil préféré parce que vous avez une super belle combinaison avec After Effects et tous les autres outils avec vos bibliothèques. Cela fonctionne très simple et vous avez beaucoup de fonctionnalités de prototypage vraiment cool. C'est aussi gratuit. Vous pouvez simplement télécharger Adobe XD et pas besoin de payer pour cela, la même chose avec Figma. C' est un autre outil vraiment commun et super populaire en ce moment. Il est également gratuit comme basé sur le Web et la collaboration fonctionne super bien. Aussi, vraiment bon outil pour juste essayer et vérifier. Choisissez l'un des outils. Si vous ne savez pas lequel, utilisez Adobe XD parce que j'ai créé le kit dans Adobe XD et le télécharger, préparez-vous et nous nous voyons dans la leçon suivante où nous allons commencer avec la conception de l'interface utilisateur. 13. Présentation d'Adobe XD: Donc, dans ce chapitre, je vais vous guider à travers Adobe XD, nous aurons une introduction de base sur l'interface d'Adobe XD, ce que vous pouvez faire, et comment commencer avec votre interface. Donc, si vous êtes déjà familier avec Adobe XD ou si vous voulez utiliser un autre outil de conception et que vous ne souhaitez pas en savoir plus sur cet outil, c'est tout à fait bien. Il suffit de sauter cette leçon, et nous verrons chaque heure dans la prochaine où je parle de l'interface et des gadgets pour mon processus de conception. Mais si vous voulez en savoir plus sur Adobe XD et comment les utiliser, je vous recommande fortement de rester ici parce que je vais vous guider à travers l'interface de base, ce que vous pouvez faire, et sur les trois choses intéressantes que vous devez savoir, qui est la conception, le prototype et le partage. Donc je dirais qu'on va plonger. À la fin de cette vidéo. Je vais aussi partager quelques ressources qui sont probablement vraiment utiles pour vous alors restez jusqu'à la fin. Mais avant de parler des ressources, je veux vous donner un aperçu super rapide des outils que vous êtes prêt à commencer. Lorsque vous téléchargez Adobe XD et lorsque vous l'ouvrez, vous verrez quelque chose comme ça, où vous avez différentes options ici. D' abord ici, vous avez cette zone de tutoriels où vous pouvez rechercher des tutoriels ou apprendre quelque chose de plus, donc ici si vous cliquez sur Apprendre. Ensuite, vous êtes guidé vers la zone du tutoriel avec beaucoup d'informations sur les composants. Alors assurez-vous de vérifier que si vous voulez en savoir plus, il y a beaucoup de ressources vraiment cool, beaucoup de tutoriels vraiment cool et tout ce que vous devez savoir. Mais nous allons commencer, et dans notre cas, nous allons commencer par un point de départ de base et ici vous pouvez choisir la taille du plan de travail de sorte que l'appareil pour lequel vous concevez. Cela pourrait être un iPhone, une expérience Web, une histoire Instagram, ou aussi personnalisé. Vous pouvez changer cela à la fin donc ce n'est pas si important, nous allons commencer avec l'iPhone. Ça a l'air bien. Maintenant, Adobe XD s'ouvre et nous avons déjà un plan de travail, ces choses sont appelées plans de travail, avec la taille parfaite pour un iPhone. Je recommande toujours de commencer avec le côté téléphone que vous avez car vous pouvez également télécharger dans l'App Store, l'application Adobe XD, et tout tester sur votre appareil. C' est super utile et quelque chose que je recommande fortement. Donc maintenant, vous voyez l'interface et vous pouvez déjà voir que c'est très, très minimaliste, surtout par rapport à d'autres outils de conception comme Photoshop, par exemple. La zone où nous allons commencer est celle en haut à gauche car ici vous avez tous les outils comme l'outil rectangle afin que vous puissiez dessiner un rectangle ou vous pouvez également dessiner un cercle. Ensuite, en cliquant sur cette petite flèche ici ou en cliquant sur V sur votre clavier, vous pouvez sélectionner, par exemple, le rectangle. Ensuite, vous avez le panneau inspecteur sur le côté droit et vous pouvez faire des changements par exemple, vous pouvez changer la couleur en rouge, vous pouvez ajouter une sorte de bordure, un peu plus grande, par exemple, vous pouvez ajouter une sorte d'ombres dans nos ombres, flou d' arrière-plan, opacité, donc tout ce que vous savez à partir des outils de conception normaux. Un peu la même chose pour tous les autres forums. Je pense que ce qui est juste vraiment intéressant si vous placez au-dessus de l'autre, sélectionnez les deux, vous pouvez également les combiner pour exécuter à une zone, par exemple, puis les changer pour qu'ils soient un, ou les outils probablement d'Illustrator. Une autre chose vraiment cool ici est comme l'outil de stylo, sorte que vous pouvez également dessiner quelque chose si vous voulez dessiner une icône, par exemple, puis remplir toutes les choses que vous savez à partir de vos outils de conception. Nous allons le supprimer à nouveau. Ensuite, nous avons les outils de texte où nous allons aller un peu plus près et nous dessinons une zone de texte, nous allons juste écrire la conception d'interface ici, et puis vous voyez déjà, je vais cliquer sur la flèche à nouveau pour sélectionner l'ensemble et que nous pouvons changer la typographie ici. Je vais choisir les poppins, c'est aussi la police avec laquelle je vais travailler. Nous allons choisir une autre taille de police, c'est gras, et ensuite nous pouvons également changer la couleur ici sur le côté. Beaucoup de fonctions différentes, vous savez, probablement tout déjà d'InDesign, etc, donc maintenant nous avons la topographie ici. Ce que je pense est vraiment intéressant pour vous aussi c'est que lorsque nous venons avec certains types de dessins que nous aimons vraiment, par exemple, un certain type de style de topographie si nous choisissons, c'est le titre et puis en cliquant juste une option et le glisser-déposer ci-dessous, ceci est notre texte de copie, et ce serait un peu plus petit et nous choisissons Regular, quelque chose comme ça. Nous pouvons également ajouter des styles de personnages spécifiques ici sur le côté afin de pouvoir les réutiliser, mais je vais en parler dans une seconde. Nous pouvons ajouter d'autres plans de travail différents si nous voulons en ajouter un autre, par exemple, si nous voulons faire un autre design sur l'iPad Pro, nous pouvons simplement cliquer ici sur le pré-sélectionné, sous options, nous avons un autre plan de travail ici. Mais nous pourrions également cliquer sur Options, puis le placer à côté de lui. C' est vraiment utile, je dirais. Ici, en bas, nous avons aussi trois types de fonctions, la première est la bibliothèque, je vais en parler dans une seconde, puis nous avons les couches. Lorsque nous cliquons sur un plan de travail, nous pouvons également renommer cela, par exemple, écran d'accueil. Ensuite, nous le voyons ici sur le côté, c'est l'écran d'accueil de l'iPad. Si nous sélectionnons le plan de travail ici, nous voyons ce qu'il y a sur ce plan de travail et nous avons trois éléments, le texte de copie Lorem Ipsum, nous avons le titre, puis nous avons notre élément ici de l'ellipse et du rectangle. Donc, là, vous avez un très bon aperçu de ce qui est sur chaque plan de travail, et donc il vous aide à garder une trace. Ensuite, nous avons ici, c'est la dernière icône en bas, différents types de plug-ins et plug-ins sont vraiment, vraiment cool. Vous pouvez simplement les télécharger, vous allez ici et ensuite aller à Parcourir les plugins et vous avez une énorme liste de différents plugins que vous pouvez télécharger là-bas gratuitement. Vous pouvez les utiliser et accélérer vraiment votre flux de travail. Ceux-ci sont super utiles de mon expérience. Donc, si ce serait notre interface et nous aurons besoin, par exemple, d'une icône, je peux recommander les icônes pour le plugin de conception. C' est une très bonne bibliothèque d'icônes par exemple, nous cherchons, je ne sais pas, verrouiller quelque chose comme ça, nous pouvons simplement cliquer dessus et c'est automatiquement ici et ensuite nous pouvons aussi changer la taille parce que C'est recto- base, et maintenant nous avons une petite serrure ici, par exemple, si nous en avons besoin. Il y a beaucoup d'icônes, donc si vous avez besoin d'icônes, hésitez pas à les utiliser. Ils sont super utiles. Un autre plugin que j'aime aussi vraiment est non utilisé. Il y a beaucoup d'illustrations vraiment cool que vous pouvez utiliser et les utiliser, par exemple, pour différents types d'occasions. Manger ensemble pourrait être une bonne chose, donc tout ce dont vous avez besoin ici. Vous pouvez choisir quelque chose de la même chose avec les illustrations humaines, c'est aussi vraiment cool. Alors n'hésitez pas à l'utiliser si vous n'êtes pas un illustrateur, si vous ne voulez pas en faire vous-même. Puis ici, en haut, nous avons la bibliothèque, ce qui je pense est vraiment cool. Si nous avons des couleurs spécifiques ici, nous avons deux types de couleurs que nous pouvons ajouter à notre bibliothèque simplement en cliquant sur le signe plus et les deux couleurs sont ajoutées à la bibliothèque. Vraiment utile pour mon expérience parce que dans le cas où vous avez besoin de concevoir quelque chose ou de concevoir un bouton, par exemple, quelque part, vous pouvez simplement réutiliser cela. Alors imaginez que c'est notre embarquement, notre interface, nous avons une sorte d'illustration ici, mais pour verrouiller, alors nous avons une sorte de texte de copie et maintenant nous voulons un bouton. Donc nous allons dessiner un rectangle, quelque chose comme ça et nous allons choisir une couleur, ceci, par exemple, peut aussi avec ces petites poignées ici, nous pouvons arrondir les bords un peu nous ne voulons pas une bordure, mais nous pouvons également copier et coller cette Commande+C, Commande+V. Ensuite, nous allons centrer ce blanc et ensuite nous allons remplacer cela ici dans le bouton, plus petit et aussi ici. Joli. Ensuite, nous allons regrouper ceci, soit cliquer sur le côté droit et faire le groupe, soit nous cliquons sur Commande+G. Maintenant, je vais aussi vous montrer quelque chose de vraiment cool parce que vous pouvez créer ce genre de composants. Vous pouvez soit cliquer sur la commande K, soit aussi cliquer avec le bouton droit de la souris, puis faire un composant, et faire un composant à cet élément ici en tant que composant sur votre petite bibliothèque de conception. Si vous voulez concevoir la même chose sur votre iPhone, iPad ou sur n'importe quel autre écran, vous pouvez simplement faire glisser et déposer ceci et vous le placez ici afin que vous n'ayez pas besoin de redessiner cela. vraiment cool, c'est que lorsque vous changez quelque chose ici, par exemple, vous décidez, non, j'ai besoin d'une couleur plus claire par exemple, ou je veux juste une autre police, par exemple, Helvetica, ou je ne sais pas, quelque chose d'un peu plus fou et les changements dans tous les composants ou partout où vous placez cela sur votre écran, donc c'est vraiment utile. Cool. Donc, nous allons mettre cela sur le côté. Une autre chose que je veux vous montrer parce que je pense que c'est vraiment cool, donc je vais juste ajouter un autre plan de travail ici un autre, ce n'était pas le leur. Donc maintenant je veux concevoir différents types d'éléments, cela pourrait être, par exemple, comme différents types d'éléments alimentaires. Donc, j'ai un cercle et là je veux placer une photo de la nourriture et ensuite je veux ajouter un peu de carotte par exemple. devrait être un peu plus petit, comme une vingtaine. Centrer ça, cool. Je vais regrouper ça. Ensuite, vous pouvez cliquer sur le côté droit. Voici la grille de répétition. Cliquez dessus et puis vous obtenez ces petites poignées. Tu peux juste le tirer vers le bas. Quelque chose comme ça. Vous avez une sorte de grille. Vous pouvez également modifier les distances ici. J' ai déjà préparé quelques fruits et légumes ici, que nous pouvons juste, si vous les avez dans un dossier, sélectionner tout ce que vous voulez intégrer et les placer ici dans l'un des cercles. Ils sont automatiquement triés par rapport aux autres car il s'agit toujours d'une grille de répétition et cela fonctionne également pour un type. Vous sélectionnez la carotte où se trouve le type. J' ai préparé un document texte avec tous les noms des fruits dans le même ordre qu'ici. C' est un document texte normal. Ensuite, je vais faire glisser et déposer ceci et placer ceci ici dans le champ de texte. Oui, ça trie automatiquement, parfois j'ai besoin d'ajuster un peu pour obtenir la taille. Cela devrait être centré. Si je change quelque chose, ça change sur toutes les zones ici. Vraiment cool. Ensuite, je vais intégrer le bouton ici aussi. Maintenant, si le mot sélectionne alors que la typographie n'est probablement pas ce que nous voulons, nous allons le changer ici. Si vous voulez changer quelque chose, assurez-vous toujours que vous changez dans le composant maître et que vous voyez cela avec le petit cercle vert ici. C' est juste blanc au milieu. Si vous ne pouvez pas le trouver, vous pouvez simplement cliquer avec le bouton droit de la souris, puis cliquer sur « Modifier le composant principal ». Ensuite, vous allez ajouter le composant principal. Plus sombre, par exemple, et nous allons aussi changer la typographie ici à nouveau. Aux pop-ins. Joli. Ensuite, dans le plan de travail suivant, je vais juste le copier et le coller et supprimer tout. De plus, nous allons dégrouper cette zone parce que nous n'avons plus besoin de ce groupe. Je vais ajouter la pomme rouge ici et peut-être aussi rendre ça un peu plus grand parce que je veux vous montrer la prochaine étape maintenant. Une autre chose dont je n'ai pas vraiment parlé, c'est les zones en haut. Nous sommes toujours en mode design, nous concevons des éléments, nous créons nos bibliothèques et nous concevons les écrans. Mais nous avons aussi le prototype et la part. Allons au prototype. Pas tant de choses ont vraiment changé, mais maintenant nous pouvons rendre tout cela interactif. Comment ça marche ? Si nous cliquons sur un élément, nous obtenons la vente, nos panneaux ici. Nous pouvons glisser et déposer ceci sur le plan de travail où se trouve la destination. Lorsque nous cliquons sur quelque chose, lorsque nous cliquons sur ce bouton, par exemple, où voulons-nous obtenir et c'est l'écran. Ensuite serait l'écran. Ensuite, nous cliquons sur le déclencheur qui serait tapé. Peut également être glissé ou un keynote ou même une voix. Ensuite, nous pouvons aussi faire comme auto animation, superposition, défiler, juste besoin d'essayer cela. Je recommande de commencer par dissoudre. Je vais cliquer sur « Sélectionner », et ce serait la même chose. Essayons ça. On va passer en mode aperçu. C' est le petit bouton Play ici. Cliquez sur « Suivant ». Sélectionnez, cool, ça marche. Vous pouvez simplement jouer avec, essayer et si vous travaillez dans un groupe, je peux également recommander d'abord, vous pouvez enregistrer ceci comme un document Cloud. Lorsque vous dites cela, vous pouvez également le voir avec le Cloud. Si elle est enregistrée dans le Cloud, vous pouvez ajouter plus de personnes ici. Qu' est-ce qui sauve ? Ensuite, vous pouvez ajouter plus de gens ici sur le côté. N' hésitez pas à commencer et à l'essayer. Si vous avez besoin de plus d'aide, vous trouverez beaucoup de tutoriels cool en ligne. Voici quelques personnes que je peux recommander de vérifier. Ouais, maintenant je vais parler très vite certaines ressources vraiment cool qui sont géniales. Vous avez également exceller à travers ces ressources en cliquant ici dans la barre supérieure sur le fichier, puis sur Obtenir les kits d'interface utilisateur. Ensuite, vous pouvez, par exemple, télécharger le Kit Apple iOS ou Material Design Kit ou Microsoft Windows. Comment ça a l'air ? Par exemple, vous cliquez ici sur le Material Design. Une autre fenêtre s'ouvre dans votre navigateur et vous pouvez télécharger les directives de conception de matériaux, qui sont des sons de conception de produits vraiment cool. Voici beaucoup de choses vraiment cool juste pour tester et en apprendre plus. Voici le kit de conception Adobe XD. Nous allons télécharger ceci, permettre. Cela prendra probablement une minute. Nous allons cliquer dessus et ensuite nous devons cliquer sur le thème sombre. Puis il s'ouvre. Nous obtenons tout le kit de conception, je suis dans Adobe XD. Il est vraiment utile d'en apprendre davantage sur le design, sur les différents éléments d'interface. Il suffit de jouer avec elle et de comprendre comment ils structurent la conception de l'interface. Parce que les concepteurs les plus intelligents travaillent en fait chez Google, ils travaillent sur Facebook. Ils viennent avec ce kit d'interface utilisateur, c'est la meilleure ressource gratuite que vous pouvez obtenir. Téléchargez-le, vérifiez-le. Si vous n'utilisez pas Adobe XD, il est également disponible pour, je pense aussi pour Figma et aussi pour Sketch. C' est à ça que ça ressemble. Tous les éléments de conception. Vraiment cool pour vous d'en apprendre davantage sur le design, sur la façon dont ils structurent, comment ils construisent des éléments d'interface. Ouais, fortement recommandé de vérifier ça. Super utile et précieux. En outre, une autre chose que je trouve vraiment cool et intéressant, et non seulement les Kits de l'interface utilisateur, mais aussi les sites Web. Parce qu'ils expliquent, ils parlent de ce qui fonctionne bien et de ce qui ne fonctionne pas bien, quand il s'agit de conception d'interface. particulier Google sur leur site Web et Material Design partage beaucoup de connaissances sur les conceptions d'interface, sur la façon de structurer, comment faire certaines choses. Comme vous pouvez le voir, il y a beaucoup d'éléments que vous devez penser. Ça pourrait être comme un menu. Cela pourrait être une sorte de structures de navigation. Ça pourrait être une icône. Ils documentent tout super bien. C' est beaucoup de plaisir et j'ai été vraiment utile passer par là et ils partagent aussi ces petits gifs où ils montrent, ok, cela fonctionne bien et cela ne fonctionne pas si bien. Ceci n'est pas recommandé. Une ressource vraiment géniale. Beaucoup d'entreprises, aussi Microsoft par exemple, ou Apple aussi, partagent ce genre de connaissances. Assurez-vous d'avoir un coup d'oeil, passer par le passé et de passer par quelques exemples. Cela vous sera plus utile que je suis probablement tout ce que vous pouvez acheter en ligne ou penser. Maintenant, il est temps de commencer. Soyez servi avec votre outil de conception. Utilisez les esquisses que vous avez faites et créez votre flux de travail de conception. Commencez par concevoir vos premiers écrans et assurez-vous toujours de penser vraiment à un flux que vous pouvez cliquer sur, que vous avez un prototype interactif à la fin. 14. Conception d'UI: Comme vous le savez, j'ai trouvé un concept pour un frigo intelligent, un générateur de recettes, nous avons déjà créé le concept dans le dernier quiz. Mais voici encore les prototypes papier de croquis, et j'ai créé une interface numérique pour cela. Laissez-moi vous expliquer le processus, l'écran et comment j'ai commencé à utiliser le kit d'interface utilisateur avec lequel j'ai partagé. Ici pouvez-vous voir d'autres écrans que j'ai conçus pour le flux de travail, et si vous vous souvenez, l'idée était de créer une recette intelligente générée avec toutes les choses que vous avez dans le réfrigérateur. J' ai parcouru les croquis et l'idée était que, que vous pouvez déjà voir de l'extérieur du réfrigérateur quand les choses vont mal. Pendant combien de temps pouvez-vous les garder dans le réfrigérateur, vous devez utiliser ceux ici dans les deux prochains jours, la semaine prochaine, puis dans le mois prochain, et ici vous pouvez générer une recette avec ces ingrédients ici. J' ai créé différents écrans, maintenant d'abord, où j'intègre le premier ingrédient, le second , le troisième, puis je vais faire quelques ajustements, peut-être la difficulté du temps aussi, et aussi les catégories. Je suis intolérant au gluten, donc je veux vraiment une recette sans gluten. Ensuite, nous avons la troisième page, qui est les recettes recommandées où je vais en choisir une, et voici la page détaillée avec toutes les informations et je peux simplement cliquer sur « Commencer à cuisiner ». Ce ne sont en fait que trois écrans avec quelques variantes. Je suis déjà en mode prototype parce que maintenant j'ai besoin de créer un prototype numérique, et d'abord, je vais cliquer sur la tomate, puis je vais avoir cette petite poignée ici, et je vais aller à cette page. Ensuite, je vais sélectionner le fromage ici et je vais aller à cette page. Ensuite, je vais sélectionner l'oignon, il est là, et je vais aller à cette page, j'ai trois ingrédients ici. Ensuite, je vais cliquer sur les « Catégories », qui est sans gluten, génial. Ensuite, je vais cliquer ici sur cette chose que je vais accéder à cette page, et puis je vais cliquer sur cette entendre et accéder à cette page. Cool. Ensuite, je peux aussi cliquer dessus. Essayons ceci comment cela fonctionne, je veux aller sur l'écran d'accueil et sélectionnez celui-ci, cliquez sur le « bouton Play ». Ensuite, je veux cliquer sur la tomate, le fromage et l'oignon. Cool. Sans gluten et 15 minutes et facile. Créer une recette. Génial, génial. Maintenant, à l'étape suivante, nous allons tester ce design sur un iPad sur notre réfrigérateur, ou avoir un arrière-plan un peu plus réaliste. Pour cela, nous avons tué le mode prototype. Nous sélectionnons le premier écran et nous cliquons sur cette petite flèche. Là, nous voyons le flux dans toutes les choses qui sont connectées et il est plus facile pour nous de trouver cela. Assurez-vous également d'enregistrer ceci dans le cloud. Vous voyez cela avec la petite icône de nuage ici et téléchargez l'application Adobe XD pour l'iPad ou pour votre iPhone ou tout autre appareil que vous voulez tester. Il suffit de télécharger l'application Adobe XD pour iPad ou iPhone, c'est gratuit. Ouvrez-le et ouvrez le fichier que vous avez enregistré dans le cloud. C' est assez cool parce que vous avez déjà accès au flux de travail que nous venons de créer [inaudible] l'écran d'accueil et vous pouvez simplement cliquer à travers, à travers toutes les zones qui touchent les zones fonctionnent ici aussi bien. C' est super sympa pour les tests utilisateur. Vous pouvez simplement cliquer sur l'ensemble du flux utilisateur et voir tout fonctionne. Ça a l'air plutôt sympa, génial. Dans la prochaine étape, nous allons tester cela sur le réfrigérateur. C' est l'élément que nous avons choisi pour cette interface et j'aime vraiment le tester. Placez l'iPad ici. Si je fais des tests utilisateur avec des utilisateurs gratuits, et il est toujours logique de placer cela devant le réfrigérateur afin qu'il soit aussi réaliste que possible. La tâche, maintenant, rendre votre propre conception interactive et construire un prototype numérique en intégrant ces zones de déclenchement. Utilisez l'outil de conception de votre choix, puis testez la conception sur votre téléphone, sur votre iPad ou même le logiciel Adobe XD. Ce qui fonctionne le mieux pour vous, mais assurez-vous que votre test est que vous testez le flux utilisateur interactif avant de tester le flux utilisateur interactif. 15. BONUS : regardez-moi travailler: Ce chapitre est un chapitre bonus. Tu peux juste me regarder travailler. Vous pouvez juste me regarder, je conçois ma propre interface. Tu sais que j'ai conçu un générateur de recettes pour un frigo intelligent dans ma cuisine. Prenez un verre, penchez-vous en arrière, et regardez-moi travailler, et ainsi vous pouvez suivre mon processus de travail et à quoi il ressemble lorsque je conçois une interface qui pourrait vous être utile. 16. Partager et exporter: Dans cette leçon, nous allons parler de la façon dont vous pouvez réellement partager votre conception et le télécharger sur votre réseau social préféré, comment vous pouvez effectuer des tests utilisateur et aussi comment vous pouvez partager cela avec les clients. Voici le flux que nous avons créé et il y a une chose que je veux juste changer. Nous avons combiné tous les écrans ensemble, mais je veux changer l'interaction pour l'animation automatique. Cela fonctionne beaucoup mieux à la fin. Nous voulons changer cela sur tous les écrans avant d'enregistrer le projet final. Je vais cliquer sur « Plate ». Ensuite, je vois sur l'écran ici, et j'ai différentes options. Par exemple, j'ai une notification, j'ai un microphone, et là vous pouvez déjà enregistrer ce que vous dites. On ne va pas faire ça. Nous allons cliquer sur la petite icône « Erreur de lecture » ici. Ensuite, nous commencerons avec le prototype. Je fais des tomates le fromage, les oignons, sans gluten, et puis vous faites les autres ajustements, et le tout est enregistré il recette. Cliquez sur le « Recette », puis nous allons arrêter l'enregistrement et l'enregistrer sur notre écran. Dans l'étape suivante, nous aurons besoin d'un des arrière-plans que j'ai créés pour vous, cliquez sur « Exporter », puis exportez vers des effets après. Si vous n'avez pas After Effects sur votre ordinateur, nous allons passer à After Effects maintenant, hésitez pas à le télécharger, même le test de gravure. Il ouvre automatiquement l'image que j'ai créée pour vous sur la même approche, nous allons insérer la vidéo que nous venons de créer. Je vais placer ceci ici ci-dessous dans la petite zone de notre composition, et ensuite nous ferons quelques ajustements. Tout d'abord, la vidéo devrait être un peu plus petite. Nous cliquons sur « S » pour l'échelle, puis l'échelle un peu vers le bas. Ensuite, nous allons cliquer sur « P » pour la position et aussi changer la position un peu parce que vous voulez placer cela sur notre réfrigérateur. Maintenant, nous allons faire un autre changement. Nous allons cliquer sur le « Modi » ci-dessous et puis nous allons ici, insérer la transformation 3D. Ensuite, nous avons la possibilité de retransformer quelque chose en trois dimensions. abord, nous allons mettre ce petit peu dans la police et ensuite nous allons le changer. Transformez-le un peu sur le côté, inclinez un peu sur le côté droit. C' est un peu comme un travail d'ajustement. Il faut donc quelques minutes parfois pour trouver la position parfaite à gauche, à droite de celle pour le plaisir, qu'il semble réaliste sur la première. Alors essayez des choses différentes. Vous avez trois axes, donc l'axe x, Epsilon et l'axe z. Alors essayez-le. Vous pouvez également cliquer sur votre « Alt », puis il joue l'animation. Impressionnant. Donc tu vois tout le film. Une autre chose que nous allons encore cliquer sur le « Modi » à nouveau et puis nous allons passer de la normale à se multiplier, et puis il semble vraiment que c'est sur le réfrigérateur, sur le devant. Nous allons zoomer un peu avant et voir à quoi il ressemble. Peut-être faire quelques changements à nouveau, changer un peu la position. C' est toujours beaucoup de travail qu'il semble parfait et très réaliste. Donc, cela prend certainement quelques fois, mais n'hésitez pas à prendre le temps dont vous avez besoin et intégré pour créer un prototype tridimensionnel très réaliste. Ensuite, nous allons créer une autre composition pour Instagram. Choisissez la taille dont vous avez besoin, puis nous allons placer l'autre composition dans juste un peu, et comment nous le voulons. Aussi juste de la longueur. Un peu plus longtemps, pas tout. Nous cliquons sur « Exporter » puis « Rendu ». Ensuite, cela ressemble à ça et vous pouvez le partager dans votre vidéo. Vous pouvez partager ça partout où vous voulez et nous avons ensuite la vidéo finale. Vous pouvez partager cela sur les médias sociaux dans votre étude de cas ou aussi au projet final de ce cours. Maintenant, exportez votre prototype et partagez-le sur un réseau social ou sur la zone finale du projet. J' ai hâte de le voir. J'ai vraiment hâte de voir vos résultats et je suis vraiment excité de vérifier ce qui est venu pour cela. 17. Derniers conseils: Félicitations pour être arrivé au tout dernier chapitre de ce cours. Vous pouvez être très fier de vous-même parce que vous avez traversé toutes les étapes, vous avez probablement beaucoup appris sur la conception d'interface, et maintenant vous êtes prêt à concevoir votre propre interface numérique. Bravo, et je suis très fier de toi. Maintenant, je vais partager quelques derniers trucs et astuces qui espère, vous seront utiles même après ce cours ou une fois que vous aurez terminé. Tout d'abord, la cohérence est essentielle. Une fois que vous avez conçu une bibliothèque de conception, assurez-vous qu'elle est cohérente. cohérence signifie réutiliser les mêmes couleurs, la même topographie, les mêmes motifs, et ne pas trouver d'idées totalement différentes pour toutes les interfaces, pour chaque site ou écran d'application. Sois très, très cohérent. Réutilisez les éléments que vous avez déjà conçus. Je pense que c'est l'une des choses les plus importantes à savoir et beaucoup de gens ou beaucoup de design ne le font certainement pas, ce qui est un problème et vraiment, vraiment déroutant pour l'utilisateur. La deuxième astuce pour vous est que tout est au sujet du processus, alors n'ayez pas peur d'itérer pour changer votre conception une fois vous réalisez que cela ne fonctionne pas ou après l'avoir testé avec de vrais utilisateurs, et réalisez qu'ils ne comprennent pas vraiment certaines choses, ou que les éléments de conception que vous avez créés comme des motifs, ou la typographie, ou les couleurs ne fonctionnent pas vraiment. Bien sûr, testez votre conception avec les utilisateurs, avec des collègues, avec n'importe qui, et envoyez-leur le prototype, et laissez-les cliquer à travers leur prototype où nous aidons à regarder et à comprendre leur processus et ce que vous pourriez ajuster. Une fois que vous voulez concevoir votre portefeuille ou que vous souhaitez intégrer ce projet, vous pouvez l'approuver dans votre portefeuille. J' ai aussi quelques conseils pour vous. Assurez-vous vraiment que si vous créez quelque chose pour votre portfolio, n'ayez pas peur de vraiment montrer le processus, les itérations, tout ce que vous avez appris, et toutes les itérations, les tests, ce qui a fonctionné, ce qui n'a pas fonctionné sur, vraiment montrer le processus. N' oublie pas de raconter une histoire. L' histoire de la conception centrée sur l'utilisateur, vous pouvez être servi avec la recherche, vous avez trouvé le concept, puis vous avez créé vos premiers prototypes, vous l'avez testé. Qu' en est-il de vos apprentissages, et peut-être devriez-vous revenir en arrière à un moment donné, et faire d'autres recherches aussi. C' est peut-être juste un prototype et c'est une histoire très intéressante à raconter. Si vous voulez creuser plus profondément sur la façon de concevoir votre portefeuille, comment concevoir des études de cas, comment trouver un site Web vraiment génial, je peux également vous recommander de regarder mon autre cours sur la masterclass de portefeuille. Ici aussi sur cette plate-forme, où vous pouvez trouver plus d'informations sur les études de cas, sur les différents processus, beaucoup de ressources. Je peux fortement vous recommander de regarder ce cours même après ou de le regarder à nouveau si vous l'avez déjà regardé, et si vous voulez construire votre portfolio maintenant, cela vous sera vraiment utile. Merci beaucoup d'avoir suivi ce cours. Honnêtement, j'ai hâte de voir vos résultats, alors n'hésitez pas à me connecter et dire bonjour sur le réseau social, partager votre projet final ici. Je suis super heureux de vous donner quelques commentaires et je suppose que les autres étudiants aussi. J' ai vraiment hâte de voir vos résultats, votre processus, et aussi de vous voir grandir en tant que concepteur. Je vous souhaite beaucoup de chance et de succès, et j'ai hâte de vous voir dans mon prochain cours.