Explorer le design neumorphe avec Figma : ajouter du volume aux interfaces

1. Cours et introduction à l'enseignant: Bonjour, je suis Kate Liebich et je suis designer d'expérience utilisateur à Francfort, Aujourd'hui, plongeons-nous dans le monde du neumorphisme et découvrons comment ajouter vie et mort aux interfaces Tout au long de ma carrière, j'ai réalisé toutes sortes de projets, des plus simples aux plus complexes. Mais croyez-moi, les designs neumorphiques peuvent être un peu un casse-tête pour les concepteurs et Ce qui est passionnant, c'est que jouer avec l'idée de profondeur dans vos designs revient à ajouter une toute nouvelle dimension. Dans ce cours, j'ai le plaisir de vous montrer mes astuces spéciales pour créer ce type d'interfaces. Je vais vous parler des ombres et de la lumière, le duo dynamique qui fait ressortir vos designs comme en 3D Nous allons également nous salir les mains. La création d'éléments qui semblaient artisanaux est découpée à l'aide de nombreuses méthodes intéressantes. Je vais également partager avec vous une technique super cool et unique sur la façon choisir une couleur rouge pour éléments neumorphiques et les designs neumorphiques Je dirais que vous pouvez réellement utiliser cette technique à l'avenir pour n'importe Nous allons créer notre ambiance créative et créer quelques écrans qui mettront quelques écrans en valeur vos nouvelles compétences. À la fin de ce cours, je vous l'ai promis, vous aurez la confiance nécessaire pour créer Neumorphic. Vous êtes comme un pro Et n'oubliez pas que le projet que nous allons réaliser à la fin de ce cours sera la cerise sur le gâteau de votre portfolio de design. J'ai hâte de vous voir participer à ce cours. neumorphiques prêts à porter. On se voit là-bas. 2. Différents styles de morphisme: Vous ne vous souvenez probablement pas à quoi ressemblent les interfaces Alt. Les éléments que vous voyez ici constituent la première étape vers le skeumorphisme Ce colorant a été inspiré par des éléments du monde réel expliquer des fonctions nouvelles et inconnues Il utilise une analogie ou une métaphore Ainsi, n'importe qui pourrait comprendre comment fonctionne un ordinateur. N'oubliez pas que l'icône de la corbeille dans l'ancien Mac OS ou l' icône Safari en 2003 ressemblaient à ça. C'est un pur skeumorphisme. Mais le temps passe vite. Les utilisateurs ont beaucoup de temps pour distinguer un bouton d'une icône sans ombres ni reflets inutiles. Et les images tridimensionnelles ont particulièrement disparu des interfaces. Les smartphones sont devenus la norme et la surcharge des interfaces ne fait qu'agacer les gens. skeumorphisme en tant que style devient dépassé, mais de nombreuses choses différentes en sont sorties. design plat est devenu populaire après la sortie d'iOS 7 et est toujours utilisé par tout le monde studios de design à Apple, Google et Microsoft. Il est considéré comme le successeur du skeumorphisme graphique. Mais l'idée principale de Leginon est opposée. Comme aujourd'hui, l'interface ne doit pas distraire l'utilisateur avec une texture et un volume supplémentaires Mais dans les années 2000 et 1920, tout est devenu quelque chose de nouveau. Et alternative. Néomorphisme. Une combinaison de volume et d'éléments plats. Mais il est impossible de l'utiliser sous sa forme pure. Car il sera alors difficile pour l'utilisateur de comprendre l'état des éléments de l'interface. Les couleurs sont très proches les unes des autres. Cela demande beaucoup d' espaces blancs dans lesquels tous les boutons restent reconnaissables et compréhensibles Par conséquent, il a bien fonctionné dans une application mobile dotée d'un petit nombre de fonctions. Vous avez maintenant une compréhension des styles de morphisme de l'interface utilisateur. Dans ce cours, nous allons apprendre comment créer et concevoir facilement ces éléments en utilisant uniquement des lumières et des ombres et comment combiner ces éléments avec d'autres éléments importants afin de les utiliser dans l'interface. Passons au logiciel Figma et aux principaux outils que nous allons utiliser dans ce 3. Aperçu de Figma: Dans cette vidéo, je vais vous présenter le premier aperçu du logiciel Figma et du puissant outil de conception utilisé par les professionnels du monde entier Personnellement, je préfère utiliser Figma car vous pouvez créer votre compte gratuit et l'utiliser pour vos propres besoins En même temps, vous disposerez de tous les outils nécessaires pour créer des interfaces utilisateur permanentes. Si vous vous habituez à un autre outil, vous pouvez sauter cette leçon et passer à la suivante où nous allons apprendre comment structurer et comment vous pouvez construire des pédales et des lampes que vous allez utiliser n'a donc pas d'importance outil que vous allez utiliser n'a donc pas d'importance . Les principes de base sont les mêmes. Commençons par la présentation du logiciel. Lorsque vous lancerez Figma, vous serez accueilli avec un document vierge Créez ensuite un nouveau document. Cliquez simplement sur le bouton plus situé dans le coin supérieur gauche ou utilisez le raccourci clavier pour Windows Control plus M pour Mac, Common plus N. Une fois le document ouvert, vous pouvez organiser votre travail en différentes sections Figma vous permet d'ajouter plusieurs pages à votre document. Pour ajouter une nouvelle page, allez dans le panneau de droite et cliquez sur l'icône de la page. Vous pouvez également l'utiliser. Le raccourci clavier pour Windows Control plus, plus N pour aucun plus commun plus N. Passons maintenant à la création de votre premier cadre. Un cadre représente un écran ou une section spécifique de votre design. Pour créer un cadre, cliquez sur l'icône du cadre dans la barre d'outils de gauche ou utilisez le raccourci clavier F. Cliquez simplement sur la zone principale et dessinez votre premier cadre. Sur le côté droit, vous pouvez modifier la taille du cadre si vous en avez besoin. Figma propose une variété d' outils pour vous aider à concevoir et à créer votre vision Voici quelques éléments essentiels pour vous aider à démarrer. Outil de déplacement. Cet outil vous permet de sélectionner et de déplacer des objets dans votre outil de création de formes. Utilisez cet outil pour dessiner des formes telles que des rectangles, des cercles et des polygones. L'outil à stylet. L'outil Stylo vous permet de créer des formes de costumes et de les passer en plaçant des points d'ancrage et en ajustant leurs courbes. Outil de rédaction de textes. À l'aide d'un outil de texte, vous pouvez ajouter un EditText à vos conceptions Enfin, explorons le panneau de droite où vous trouverez une gamme de commandes permettant d'affiner vos conceptions Dessinons d'abord un rectangle. Vous pouvez utiliser les raccourcis clavier, et nous allons modifier la taille du rectangle sur le côté droit juste pour essayer de comprendre comment cela fonctionne Explorons plus en détail le panneau de droite. Ici, je ressens les principales caractéristiques nécessaires pour être conscient des alignements. Ces commandes vous aident à aligner les objets à la fois horizontalement et verticalement. Les contraintes vous permettent de définir comportement et la réaction des objets lorsque le dessin est redimensionné. Figma propose quatre types de contraintes. gauche, droite, supérieure, inférieure échelle gauche, droite, supérieure, inférieure et contrainte fixe Vous pouvez jouer avec eux et voir comment cela fonctionne. Paramètres des couches. Cette sélection vous permet d' ajuster les propriétés de la couche, telles que l'opacité, modes de fusion et les effets Figma fournit un outil de sélection de couleurs permettant de choisir et d'appliquer facilement des couleurs à vos éléments de conception Il peut s'agir d'un fond ou d'un trait, mais nous y reviendrons plus en détail dans la suite. Et c'est tout pour ce bref aperçu de Figma. N'oubliez pas que ce n'est que la partie visible de l'iceberg. Figma propose de nombreuses fonctionnalités puissantes à explorer et vous permettant de donner vie à vos idées de conception. Dans la prochaine leçon, nous allons mettre en lumière le panneau des effets. Et croyez-moi, ça va faire de l'ombre à Fn. Nous allons examiner les paramètres d' ombre et explorer différentes configurations. Préparez-vous à découvrir le pouvoir magique des ombres sur vos interfaces Nous allons essayer différentes configurations et vous verrez à quel point il est plus facile d'ajouter un volume aux éléments et à vos interfaces simplement avec Shadow éléments et à vos interfaces Alors commençons. 4. Figma : panneau effets d'ombres: Dans cette leçon, nous allons approfondir l'une des figures. Effets d'ombre. Préparez-vous à l' intégrer à vos créations. En utilisant uniquement les effets d'ombre, vous pouvez ajouter une touche de réalisme en profondeur à vos éléments de conception. Commençons par découvrir comment appliquer des ombres dans le logiciel Figma Pour cette démonstration, prenons comme exemple une forme de cercle simple. Nous pouvons le trouver dans le coin supérieur gauche. OK, dessinons un petit cercle. Pour appliquer une ombre, sélectionnez la forme et accédez au panneau de droite. Cliquez simplement sur le bouton Plus et vous trouverez la magie que nous recherchons dans l'ombre. Explorons maintenant les différents paramètres disponibles pour créer des ombres et Figma En ajustant ces paramètres, vous pouvez laisser libre cours à votre créativité et personnaliser les ombres pour obtenir l'effet souhaité Examinons d'abord les positions X et Y. Ces paramètres contrôlent le positionnement horizontal et vertical de l'ombre déposée. Vous pouvez créer des effets uniques en ajustant les valeurs de chaque axe Vous pouvez également essayer des nombres négatifs, et cela fonctionnera également dans le sens opposé. Découvrez comment déplacer l'ombre dans différentes directions en ajustant les valeurs. Il vous permet d'expérimenter et de créer des effets dynamiques. Flou. Le paramètre de flou détermine la douceur ou la netteté valeurs de flou élevées créent une ombre plus douce et plus diffuse, tandis que des valeurs de flou plus faibles produisent une ombre nette et non définie Remarquez comment l'ombre devient plus douce ou plus nette à mesure que nous ajustons la valeur du flou Jouez avec ce réglage pour obtenir le niveau d'effet souhaité. Continuons avec le paramètre d'étalement, qui contrôle la taille ou l'expansion de l'ombre autour de la forme. augmentant la valeur d' étalement l'ombre s'étend plus loin des bords de la forme. Regardez comment l'ombre s'étend ou contraste lorsque nous modifions cette valeur de pred Ce paramètre vous permet de contrôler la portée de l'Ombre créer des effets visuels intéressants, que nous utiliserons certainement dans nos prochaines leçons. Vous pouvez certainement modifier la couleur de l'ombre, le réglage de couleur qui rappelle la teinte de l'ombre. Vous pouvez choisir n'importe quelle couleur qui complète votre design ou correspond à l'ambiance du désert Explorez différentes couleurs d' ombre pour améliorer l'ambiance de votre design. Jouez avec différents joueurs américains jusqu'à ce que vous trouviez la solution idéale. Le paramètre d'opacité contrôle la transparence de l'ombre valeurs d'opacité plus élevées se traduisent par une ombre plus prononcée et plus solide Alors que des valeurs plus faibles rendent l'ombre plus subtile. Le réglage de l'opacité peut modifier considérablement l'impact de l'ombre Testez différents niveaux pour trouver l'équilibre parfait entre permanence et soudaineté. Figma propose également des ombres intérieures, ce qui crée un effet d'ombre à l'intérieur de la forme plutôt qu'à l'extérieur Il peut être utilisé pour ajouter un sourd ou pour simuler des effets d'ambassade. Nous allons certainement l'utiliser. Le paramètre Inner Shadow ouvre la voie à une toute nouvelle gamme de handicaps. Essayez-le pour ajouter de la touche et créer de la profondeur. Une autre fonctionnalité existante est que Figma vous permet d'appliquer plusieurs ombres à une seule forme Cela signifie que vous pouvez porter et combiner différents effets d'ombre, ce qui vous donne encore plus de contrôle sur vos créations. L'impact visuel, juste avec l' ombre, vous permet d'apporter différentes étapes aux éléments de l' interface utilisateur et d'ajouter une sorte d'animation dite statique. Par exemple, en mode survol, l' ombre du bouton est plus petite que celle par défaut, ce qui donne l' impression qu'il bouge et que l'utilisateur a l'impression de bouger physiquement Dans la leçon suivante, je vais vous montrer comment appliquer plusieurs effets d' ombre et de lumière à un élément. Notre objectif est de créer des éléments neumorphiques puis de les placer sur vos interfaces par le biais de vos 5. Ombres et architecture légère: Avant de nous plonger dans la création des éléments de la future interface utilisateur, examinons rapidement l'architecture des ombres et des lumières en termes simples. Si nous voulons donner à des objets un aspect 3D sur une surface plane, nous devons comprendre comment fonctionne la lumière et où doivent aller les ombres pour que cela paraisse réel. glissant, nous pouvons faire en sorte que les ombres aillent dans différentes directions et qu'elles soient plus foncées ou plus claires Cela nous aide à façonner nos éléments de design et à leur donner l'impression qu'ils ont du volume et de la forme. Imaginons donc que nous ayons une source de lumière. Je vais les placer dans le coin supérieur gauche. Bien entendu, lorsque nous créerons l'interface utilisateur elle-même, nous n'avons pas besoin de jouer un rôle de lumière, mais nous devons au moins imaginer où elle se trouve afin de placer correctement nos ombres . Donc si c'est encore le cas, je vais dessiner un cercle. Et comme vous pouvez déjà le voir ici, j'ai ajouté une ombre. Et l'ombre, dans cet exemple particulier, doit se trouver du côté opposé à la source lumineuse. Et la lumière est réfléchie ou le côté lumineux de cet élément fait face à la lumière. Une autre astuce est que si vous placez certains objets plus près de la lumière, vous pouvez voir que l'ombre a une couleur un peu plus forte. Elle est beaucoup plus solide. Et pour les éléments un peu éloignés de la lumière, le plaisir devient moins fort et plus résistant, comme c'est le cas pour ces éléments Vous pouvez également voir une autre chose entre ces deux cercles différents. On dirait que celui-ci est un peu plus grand. Et ce grand cercle a une forme plus plate. Il fait également partie de l'architecture de la lumière et de l'architecture des ombres. Comme vous pouvez le voir ici, l'ombre est très petite et subtile. Ensuite, nous avons l'impression qu'il s'agit élément très plat, que cette ombre est un peu plus longue et que ce cercle est plus grand que le carburant Vous pouvez également le trouver dans votre espace environnant. Vous. Regardez maintenant votre bureau ou votre chambre et vous verrez, et vous constaterez que plus ils sont grands, ombre est longue Une autre astuce dont nous devons nous souvenir lorsque nous revenons aux interfaces de dessin est que toutes nos ombres doivent être placées du même côté pour tous les éléments d'une interface. Ce que je veux dire par là, alors imaginez si nous plaçons cette lumière de l'autre côté, du côté droit. Cela signifie donc que toutes nos ombres ici présentes connaissaient également aucun de ces termes. Alors essayons ça. La même logique s'applique ici. La lumière est placée dans le coin supérieur droit. Tous les éléments ont leurs ombres sur le côté opposé. Assurez-vous que tous les éléments présentent des ombres du même côté. Sinon, vous obtiendrez le résultat P38. Lorsque nous allons concevoir une interface utilisateur et utiliser notre normal d'éléments que nous allons créer. Nous devons les utiliser avec douceur et délicatesse, tout au long de l'interface et de l'utilisateur également Commençons donc la leçon suivante et créons enfin nos éléments pour les interfaces 6. Créer divers éléments neumorphes: Dans cette leçon, nous allons commencer par une configuration très simple. N'oubliez pas que notre objectif est d'obtenir une sorte d'effet de volume. Mais sur une surface plane. La première chose que je voudrais vous montrer est simplement d' ajouter de simples ombres à un élément. Revenons donc à Figma. Mais d'abord, créons un cercle. Nous utiliserons le raccourci clavier 0 ou trouverons simplement notre élément dans le coin supérieur gauche Je vous conseille de ne pas en avoir un trop gros, sinon Shadow et nos spécifications pourraient vouloir fonctionner et seront trop petits. Choisissons une taille de 160. Et autre chose importante, vous devez vous assurer que votre arrière-plan utilise également une version bêta, par exemple une couleur chaude. C'est le bon hexagone et le cercle lui-même doit également être de la même couleur qu'il ne le sera Vous verrez que cela aura l' air plus réaliste afin de changer la couleur d' arrière-plan et de choisir le plan de travail lui-même. Et puis ici, remplacez le champ par l' hexadécimal requis pour changer également la couleur du cercle sur le panneau de droite Lorsque le cercle est sélectionné, vous pouvez changer la couleur ici ou simplement le placer. Vous pouvez simplement le sélectionner sur la surface en cliquant, je suis sur le clavier. Bon, essayons donc d' atteindre notre objectif et créer le premier élément neumorphique en cliquant sur ce plus sur le côté droit Nous ajoutons donc le premier drop shadow. Ça, tu sais, c'est déjà très beau. Mais essayons d'obtenir un effet plus réaliste. Je vais donc suivre les spécifications déjà préparées pour ce cercle en particulier. Jetons un coup d'œil ici. Existe 20. Pourquoi presque 20 ans ? Le paramètre de texte de présentation est 14. Et je n'utiliserai pas dans cet exemple la couleur hexadécimale. Colorions devant une E 916 Sympa. Notre élément semble donc déjà très réaliste. Et comme vous vous souvenez du projecteur sur le côté gauche, je l'ai toujours ici juste pour vous montrer et pour suivre la structure dont nous avons discuté. Maintenant, ajoutons un autre effet qui sera notre lumière, également l'effet d'ombre projetée. Nous allons donc cliquer à nouveau sur Plus dans le panneau de droite. Et maintenant, nous allons utiliser le col blanc pour construire. Cela se reflète sur le côté gauche. OK, alors choisissons-les de couleur blanche, comme ici. Et l'opacité sera de 8 %. Et toute notre position sera opposée à la position de l'ombre elle-même. Il fait donc encore moins -20 et -20, et le ventilateur est à 16. Sympa. Jetons un coup d'œil à quoi cela ressemble. Il s'agit donc de nos premiers éléments neumorphiques qui pourront déjà être utilisés dans l'interface Mais essayons d'autres spécifications. C'est un peu plus subtil. Construisons des éléments un peu plus plats. Éléments. Je vais copier le même cercle parce que certaines spécifications sont similaires et que c'est juste plus facile pour nous. Encore une fois. Passons à la section Effets. Remplacez l' ombre projetée par cette valeur arrière. Donc X est un blurb 16 six par six. Et la couleur, comme vous pouvez le voir, est la même. Et changeons l'opacité à 17. Jetons un coup d'œil. La lumière, le côté léger, ont également des spécifications un peu différentes. Nous utiliserons donc moins dix ou X moins, moins dix. Pourquoi plus bleu ? Il a 30 ans. Le reste est correct. Couleur et opacité. Nous avons déjà changé D'accord, jetons un coup d'œil. Si vous le comparez à Elements, vous pouvez voir que cela semble un peu plus plat et que ce cercle est un peu plus factorisé. Essayons donc un autre exemple qui sera un peu plus complexe en termes de spécifications, et nous devons ajouter quatre ombres avec des paramètres différents. Le premier drop shadow, avec ces paramètres, est 66160 La couleur est la même, 70 % de leur capacité. OK, alors nous devons ajouter un autre drop shadow. Vous verrez la différence entre ces deux éléments. Que ce cercle sera plus naturel, plus complexe car nous aurons plus d'effets sur le dessus. Nous allons donc ajouter une autre ombre avec ces paramètres pour une diffusion de quatre à quatre souffleurs en utilisant les couleurs. Alors que concave vers le haut. C'est donc 55550 et l'opacité est de dix. D'accord ? Et nous le placerons, vous pouvez les déplacer. Des ombres tout autour. Nous allons le placer en bas. L'effet de lumière est de moins dix, moins 1034 de flou. Et le col blanc, bien sûr. Et je vais opacité, la transparence est un T. Ajoutons une autre lumière, des reflets Et c'est assez similaire, mais tout droit. C'est donc moins dix. Moins dix. Le flou vaut donc dix. La couleur blanche. Et ils sont passifs. Oui. D'accord, nous avons donc quatre réglages différents pour cet élément. Et voyons quelle est la différence entre cela et une différence très subtile. Mais dans l'interface, vous verrez que cet élément semble un peu plus naturel. neumorphisme consiste à obtenir un effet 3D en utilisant l' ombre et Ainsi, les éléments apparaîtront ou s' inséreront dans la surface. Commençons la leçon suivante et découvrons les éléments convexes et concaves 7. Éléments concepte et bombé: Commençons par créer des éléments convexes. Les formes contextuelles apparaissent en arrière-plan lorsqu'elles vous invitent à les toucher. Les éléments concaves apparaissent instantanément comme s'ils étaient incurvés dans la surface. Bien entendu, les ombres et la lumière sont les ingrédients clés pour obtenir ces effets. Ici, j'ai créé plusieurs éléments et styles. Et B vont les créer ensemble. J'ai déjà décidé de donner un nom à chaque style de cet élément. Et nous verrons une autre option dans Figma où vous pouvez également enregistrer pour l'avenir afin de l'utiliser pour d'autres éléments Commençons par nos premiers éléments concaves et convexes. L'un sera convexe, haut et pointu, et l'autre concave, profondément tranchant Je vais le placer, battre le haut et nous choisirons un autre outil de forme, qui sera un rectangle. Les seins sont sur votre clavier ou vont simplement sur le côté gauche, dans le coin supérieur. Et un rectangle en forme de pic. La taille Tapons 150 pixels par un cinquième. Et point important. Choisissons également leur couleur d'arrière-plan comme celle-ci, y1, y1, y1 C'est une couleur très claire sur presque du blanc, mais il y a quand même une petite différence par rapport au blanc. Je peux vous montrer si je veux, placer un rectangle et le rendre blanc. Comme vous pouvez le constater, c'est très différent. Il a comme cette couleur grisâtre et chaude. D'accord, nous avons donc notre rectangle. Rendons également les coins un peu plus lisses. Je vais probablement en mettre 32 ici. Oui, c'est bien pour créer ces beaux Elements fluides. Passons maintenant à nos paramètres d'effets spéciaux. Et nous aurions besoin de créer deux ombres tombantes et deux ombres intérieures pour obtenir cet effet. Et n'oubliez pas de choisir la même couleur du rectangle que celle de notre arrière-plan. Faisons-le ensemble. Je vais juste le faire avec eux sur ce ton. D'accord. Créons donc le premier drop shadow. Encore une fois, cliquez sur Plus et sur le panneau d'effets. Et nous allons utiliser ces premiers réglages pour obtenir l'effet d'ombre et ce sera notre ombre à l'extérieur. Donc X vaut 15. Pourquoi 15 ans ? Blur a une valeur de 35. L'opacité de la transparence est de 35. Et choisissons cette couleur. Nous allons beaucoup l'utiliser dans cette leçon. 806-80-6806. Ok, ça a déjà l'air sympa. OK, alors créons une autre ombre, dans laquelle notre lumière se reflétera à l'extérieur. Donc quelque part dans le coin supérieur gauche. C'est donc moins dix. Moins dix correspond à 40 couleurs car il s'agit du blanc le plus clair. Sois juste heureuse, ou six fois. Cuir F. Et leur opacité, comme vous pouvez le voir, est de 70. Agréable. Alors je vous le conseille aussi, ça a déjà l'air bien. Je vous conseille également de lui apporter plus de profondeur et de sélectionner notre forme et d'ajouter de l'effet, nous devons choisir l'ombre intérieure au lieu de l'ombre déposée Fais attention à ça. Et nous allons expliquer cinq raisons. Cinq, le flou vaut 40. Et la couleur, comme je l'ai mentionné, nous l'utiliserons beaucoup cette fois. Et Duane T est notre opacité. OK, maintenant c'est comme si c'était un élément convexe, mais maintenant il y a un peu de concave à l'intérieur C'est donc comme pousser un peu au milieu. Et ajoutons également un briquet ou un efflux à l'intérieur, qui sera également à l'intérieur Ombre intérieure avec une couleur blanche comme effet de lumière. Et voyons voir, c'est un effet de flou de moins dix -10,44 et 17 %. OK, maintenant nous l'avons. À présent. Utilisons la fonctionnalité intéressante proposée par Figma. Nous allons l'enregistrer Nous allons enregistrer ce Fx dans un seul style. J'appellerai ce style convexe, haut et pointu, mais vous pouvez l'appeler comme vous le souhaitez. Alors, comment faire ? Dans ce panneau d'effets, vous pouvez voir ces quatre points. Nous cliquons ici et nous cliquons à nouveau sur le signe plus, pour créer un style. C'est la raison d'être de notre style. Et je vais placer le nom Convex tall sharp et créer ce style. Vous voyez maintenant qu'il apparaît ici. Et si je vais dessiner un autre rectangle, ou si nous voulons former un cercle en ellipse. Maintenant, je vais dans le panneau d'effets et je vois mon style ici, ici, Convex Talk Sharp, et je clique dessus Et il dispose déjà de tous ces paramètres. Et en fait, c'est très pratique. Il est très rapide de créer d'autres éléments pour vos interfaces, si vous voulez les enregistrer maintenant. Et aujourd'hui, nous allons créer six styles différents. Vous pouvez déjà les utiliser dans la prochaine leçon pour créer des interfaces. OK, nous allons continuer. Et nous avons ce style concave, profond et plus net Et essayons à nouveau d'obtenir le même effet que celui que nous voyons ici. Encore une fois, je dessine un rectangle qui sera d'un pixel sur 150. Et nous aurons à nouveau des coins arrondis et lisses. N'oubliez pas non plus de choisir la même couleur d' arrière-plan et d' accéder directement aux effets. Donc d'abord, Shadow outside, c'est notre couleur, que je vais utiliser à nouveau. Et X vaut 15. Pourquoi 15 ans ? Plus bas ? C'est 40 ans. Comme vous pouvez le constater, les paramètres sont très similaires les uns aux autres tout le temps ou simplement des positions différentes, différentes, principalement du flou et de l'opacité Et puis nous avons vraiment un effet complètement différent. OK, donc le premier drop shadow est terminé. Créons ensuite des reflets de lumière extérieure. Pour cela, nous aurions encore besoin de drop-shadow. Et pour la lumière, vous utiliserez toujours la bonne couleur. X est égal à moins dix. Y est égal à moins dix égal à 40. Et à. OK. Ensuite, nous allons utiliser une ombre intérieure, ombre intérieure et huit pour la couleur X, Y. Pour T pour Boston Tea et le flou est égal à 15. Agréable. Et le dernier Inner Shadow va sélectionner leur forme. La dernière ombre intérieure sera de moins huit. Moins huit. La couleur est blanche, le nerf est 15 et l'opacité est 60 D'accord, Nice. Et nous pouvons créer un style à nouveau, encore une fois, quatre points et plus, et je l'appellerai concave, profondément net. Encore une fois, vous pouvez utiliser votre dénomination qui vous convient. Créez un style. OK, maintenant, continuons. Et créons ces styles un peu plus plats. Et je passe directement à la création de cet élément. Encore une fois, reprenons le rectum pour le dessiner. N'oubliez pas d'utiliser la touche shift pour créer un carré , pas un rectangle. Et la taille est la même, 150, le coin est de 30 pour la plupart des coins, des coins et des rayons. Et la couleur, vous la rechoisissez, la couleur de fond. Dans la leçon suivante, je vais parler des couleurs et de la façon de créer des couleurs vraiment cool et agréables pour votre néomorphisme Et ce sont d'autres éléments. Je vais vous montrer certains de mes secrets comme je les crée habituellement. Passons donc à nos styles. D'abord. Encore une fois, Effects. Drop Shadow pendant 4 h 8. Je vais colorier à 6h40, c'est notre équipe politique. D'accord. Ensuite, directement, nous créons la prochaine ombre, qui sera le flux le plus clair à l'extérieur. Et le mien en col blanc. Dan, dix ou 40,74, Opacité. L'effet suivant est l'ombre intérieure. Encore une fois, notre couleur foncée et chaude est cinq. Pourquoi 5 h 40 ? 20 %. Et le dernier réflexe d' ombre, c'est le mien, puis moins dix, pas 40. Et oui, bien sûr, la couleur est le blanc avec 70 % d'opacité. Et nous avons notre élément avec tous les styles nécessaires. Maintenant, sauvegardons-le dans notre bibliothèque. Encore une fois, quatre points dans le nouveau style. Alcool le Convex Low, Sharpe, et mets-le dans leur bibliothèque. Passons directement au composant suivant. OK, nous allons créer l'élément concave 15030 pour former, coordonner, réduire la couleur de fond et plonger dans les effets Première ombre projetée. Ce 18. Suivez les paramètres ici. Couleur. Le flou est de 30,15 % car ils le transmettront à une autre ombre projetée. L'effet de lumière à l'extérieur. Encore une fois, la couleur de nos lumières est blanche , moins dix, -1 030,30 Vient ensuite l'ombre intérieure. Ombre, et la couleur pour Y est quatre, le flou est huit et plus 60 Et la dernière, c'est la lumière qui se reflète à l'intérieur. Encore une fois, c'est l'ombre intérieure, il fait moins quatre. Moins quatre. Couleur. blanc. Le flou, c'est la boisson, le thé et l'opacité Sauvegardons-le. Bibliothèque de styles. Donc, un commentaire lorsque vous l'enregistrez, les éléments doivent, bien sûr, être sélectionnés, doivent être sélectionnés. Et vous créez un code concave et plus net. Et les deux éléments suivants, un peu plus fluides. C'est aussi bien pour certaines interfaces utilisateur et vous pouvez également les utiliser pour vos idées. Créons le premier élément lisse convexe. Encore une fois, le même tango. Je pense qu'une fois que vous aurez répété ces six éléments, vous apprendrez. Et vous comprendrez quels sont réellement et comment tous ces différents paramètres interagissent pour obtenir un effet concave ou un effet convexe Ainsi, comme vous pouvez le voir lorsque vous avez des ombres plus anciennes sur le côté droit et, comme dans cet exemple, à l'extérieur. Et ils sont plus forts qu'il n'y paraît L'élément est convexe Mais si vous placez une ombre plus forte à l'intérieur, vous aurez l'impression que cet élément est concave. Continuons avec notre style suivant. Encore une fois, un cinquième pour eux, taille 30 à quatre, rayon d'angle La couleur d'arrière-plan, et plongez abord dans les paramètres de l'effet, est notre ombre déposée, et les paramètres seront supérieurs à zéro bit de paramètres différents. Mais je pense que ce que nous voulons obtenir, c'est comme éléments convexes lisses avec une sorte de forme lisse Donc zéro est zéro, Y est quatre, flou est 30 et la couleur est un peu différente C'est notre couleur de fond. Encore une fois, disons-le. Élément suivant. La lumière se reflète à l'extérieur. Encore une fois. Nous les ajoutons. Nous avons édité le drop shadow, dix pour 54. Pourquoi ? Alors ? Une couleur foncée et chaude, pourcentage bon marché est positif. Et apprends 40. Ajoutons une ombre intérieure. Si dix ou quinze. Pourquoi ? La couleur est blanche ? Laura ? 14. Et l'opacité à première vue, devient en fait aussi un peu de rouge que vous pouvez utiliser en été Mais finissons-en. Ajoutons également une ombre intérieure pour eux. L'ombre elle-même, pas la lumière et la couleur. Et la couleur doit être différente du reste si ce n'est trop profond Ce que nous avons fait moins le flou de 2010 est de 20,40 % D'accord ? Et comme précédemment, créons le style Convex en douceur. Je l'appelle et je l'enregistre dans notre bibliothèque. OK, alors le dernier élément de cette leçon, encore une fois, créons le rectangle. Même taille et même angle, rayon 32, même couleur. Pour les éléments, sélectionnez-les en arrière-plan et ajoutez l'ombre projetée. Tout d'abord, 188-30-4806 pour la couleur et 15 pour Ombre égale moins quatre, X moins Y. Blurb, et 34 Pasiphae, la couleur est 88 est une couleur sale. Et une forme 40 de Bassett. Et la dernière ombre intérieure. C'est donc moins quatre X moins Y. Quatre touches de flou, 60, opacité Et nous en avons terminé avec le dernier élément de cette leçon. Sauvegardons-le maintenant dans nos Styles. Je l'appellerai concave lisse afin de l' utiliser dans les prochaines leçons. Nous avons maintenant appris à manipuler tous leurs effets afin créer différents styles pour des éléments concaves et convexes avec une profondeur différente et un effet lisse Et dans la prochaine leçon, je vais parler des couleurs. C'est très important. Rendez-vous dans la prochaine leçon. 8. Choisir la bonne couleur: Le choix de la couleur adaptée à vos éléments et à votre forme est crucial pour obtenir une interface neumorphique époustouflante En suivant quelques règles simples, vous pouvez créer une expérience visuelle qui donne une sensation de chaleur, froid ou quelque chose entre les deux Dans cette leçon, je voulais partager avec vous une technique unique, comment créer une couleur à partir de zéro. Je sais que pour certains designers, il peut parfois être très difficile de trouver la bonne couleur. Alors allons-y directement. Mais parlons d'abord des voitures chaudes et froides. Comprendre la différence entre les deux vous aidera à créer le mode désert dans vos designs neumorphiques. Les couleurs chaudes évoquent une sensation de rugosité, d'énergie et de vivacité. Alors que les couleurs froides apportent une sensation de calme et d'arrogance N'oubliez pas que lorsqu'il s'agit d'identifier les voitures chaudes et froides, pensez aux verts bleutés comme à un rhume Et des rouges, des oranges et des rouges, des jaunes aussi chauds. Continuons dans l'interface Figma. Et j'ai déjà préparé deux plans de travail pour notre prochaine leçon, l'exploration des couleurs Si vous souhaitez faire de même, allez sur le côté gauche de l'interface, recherchez le menu, sélectionnez le cadre et dessinez le cadre de la taille de votre choix. Commençons maintenant par choisir la palette de couleurs. Le choix de la bonne couleur est crucial pour toute interface utilisateur. Nous devons prendre en compte la surface, l'élément lui-même et l'ombre. Pour l'éclairage, il est généralement préférable de se contenter d'un collier blanc, dont la valeur est six fois F en hexadécimal Pour ne pas compliquer les choses, je vais vous montrer une technique pour sélectionner la bonne couleur pour votre interface. Je vais d'abord dessiner un rectangle. Vous pouvez utiliser la touche R pour en créer un. La taille n'a pas d'importance pour cette leçon, car nous nous concentrons uniquement sur les couleurs. La couleur du rectangle n'a pas d'importance, qu'il agisse du rouge, du vert ou du bleu. Vous pouvez sélectionner n'importe qui dans le sélecteur de couleur, placer l'endroit quelque part dans le nombre d'or. Qu'est-ce que cela signifie ? Le côté tout à droite, mais à environ un tiers de la longueur de la ligne à partir de la droite. Ce n'est pas nécessairement le cas, mais je dirais que cela fonctionne mieux pour des couleurs plus douces et plus calmes. Et tu vas voir pourquoi. Définissons également la transparence de la couleur. Pour ce faire, descendez légèrement vers le bas et réglez-le à 5 %. Appuyez sur Entrée pour appliquer la couleur. Maintenant, dessine un autre rectangle qui recouvrira un peu le précédent. La couleur de ce rectangle doit être aussi simple que le gris foncé avec une transparence également fixée à 5 %. Nous mélangeons donc deux couleurs pour trouver la couleur que nous cherchons, qui sera notre couleur principale. Fournir l'interface. Appelez cela, ou chaud, dans ce cas, plus froid, je dirais humeur La couleur grisâtre aide à approfondir le ton. Maintenant, pour connaître la valeur hexadécimale de cette couleur, dessinez un autre rectangle, quelque part ici Et appuyez sur la touche I de votre clavier, ou utilisez le sélecteur de couleur et sélectionnez la couleur rouge, les boules de couleurs se superposant au rectangle précédent Ce sera notre couleur principale pour les futurs éléments neumorphiques. Et je vous montrerai ce qu' il faut faire plus tard. Maintenant, créons quelques couleurs supplémentaires. Placez un autre rectangle quelque part ici. Sélectionnez notre premier. Créez ce rectangle et déplacez cette sélection vers la couleur de votre choix. Vous remarquerez que la couleur du premier rectangle change de ton légèrement plus chaud ou plus froid Optons pour une couleur plus chaude cette fois. Encore une fois. Utilisez la touche de votre clavier pour sélectionner l'hexadécimal des couleurs superposées Refaisons le même exercice et créez un autre rectangle pour copier rapidement le rectangle précédent Appuyez sur Alt tout en le sélectionnant et en le déplaçant. Nous avons maintenant trois couleurs que nous pouvons utiliser dans notre interface Neumorphic. Ensuite, sélectionnons la bonne couleur pour les ombres. Et je vais vous montrer une technique qui s'y rapporte. Créez un cadre dans lequel nous allons travailler avec les ombres et les styles. Utilisez le sélecteur de couleur. Encore une fois, appuyez sur I sur le clavier et sélectionnez la première couleur que nous avons créée. Pour l'instant, tout récemment, utilisons les effets de la leçon précédente et ajoutons-y des couleurs. Pour ce faire, accédez au panneau d'effets situé sur le côté droit. Et vous devriez voir tous vos styles ici. Si vous ne les voyez pas, assurez-vous que vous travaillez dans le même fichier Figma lequel nous travaillions dans la leçon précédente Vous pouvez utiliser ces styles que nous avons créés et, éventuellement, les transformer ultérieurement en système de conception. Nous avons créé un autre rectangle et sélectionné un style que vous pourriez utiliser auparavant. Pour ce rectangle est sélectionné Convexe, Sharpe faible si le nom est suivi, si vous suivez la convention de nom de la leçon précédente Toutefois, les couleurs de l'arrière-plan et de l' élément ne correspondent pas bien. Pour résoudre ce problème, lissons d' abord le rectangle avec 32 pixels de rayon d'angle. Détache ce style pour changer les couleurs de l'ombre et de la surface ce faire, cliquez sur le petit bouton situé derrière les styles nommés. Nous pouvons maintenant voir toutes les ombres projetées par notre créateur et ombres intérieures de la leçon précédente pour ce style en particulier. Alignez tous les éléments avec l'arrière-plan en sélectionnant votre élément, en utilisant le sélecteur de couleur et une couleur sur la surface d' arrière-plan Ça a déjà l'air bien mieux. Cependant, de mon point de vue, les nuances et les autres couleurs ne correspondent pas tout à fait les unes aux autres. Alors faisons-le ressortir un peu plus. Comment y parvenir ? Eh bien, c'est la couleur que nous avons créée dans le plan de travail précédent. Créons un autre rectangle. Pour choisir la bonne voiture, sélectionnez la couleur d'arrière-plan et ouvrez le sélecteur de couleur Maintenant, localisons l'emplacement cette couleur dans la palette de couleurs. Il semble être de couleur magenta bleutée. Pour lui choisir une teinte. Nous préférerions quelque chose de similaire dans le ton, mais plus sur une teinte grisâtre, sale et plus foncée. Bien sûr Mettons-le quelque part au milieu de cet espace, divisons-le en trois parties et ajustons l'opacité à environ 80 %. Génial. Nous devons maintenant sélectionner la couleur elle-même, comme nous l'avons fait dans le plan de travail précédent. Créez un autre rectangle, sélectionnez cette couleur et nous pouvons supprimer le précédent. Il voit qu'il n'y a aucune opacité. Cliquez sur le hexadécimal de couleur pour le copier. Sélectionnez votre forme et accédez au panneau Effets. Jetons un coup d'œil à l'ombre de fond. Nous devons le remplacer par la couleur que nous venons de créer. Il suffit de coller la valeur hexadécimale ici. La partie claire reste pendant un certain temps, nous n'avons donc pas besoin de les toucher. Maintenant, l'ombre intérieure, encore une fois, nous l'avons remplacée par la couleur que nous venons de créer. Il suffit de copier-coller l'hexadécimal. Maintenant, éliminons notre élément. C'est plutôt joli, parfait. Vous pouvez utiliser les étoiles créées et simplement changer la couleur des éléments et sélectionner l'ombre. Bien sûr Vous pouvez également jouer avec les couleurs dans le sélecteur de couleurs si vous préférez, manière plus intuitive. Je le fais souvent sans techniques spécifiques, mais il est parfois utile d'utiliser la méthode. Je te montre juste quand quelque chose ne va pas. OK, récapitulons. Cela peut sembler beaucoup d'étapes, mais une fois que vous avez compris le processus, cela devient facile et rapide. Répétons-le donc plusieurs fois et vous vous y habituerez et vous familiariserez avec cela. Créons un autre plan de travail. Sélectionnez le cadre et dessinez une autre forme. Je vais choisir une couleur que nous avons créée précédemment. La seconde, un peu plus chaude, je dirais. Encore une fois, trouvons son ombre. D'abord. Rendez la forme un peu plus lisse avec sodium pour obtenir le rayon des coins de la sauce comme le précédent. Sélectionnez l'un des styles. Je vais choisir un élément convexe. Tu peux voir que ça n'a pas l'air bien. Les voitures grisâtres semblent sales. Répétons le processus. Sélectionnez d'abord la couleur de l'élément à partir de l'arrière-plan, appuyez sur I et cliquez n'importe où sur l'arrière-plan. Maintenant, essayons de créer la couleur de l'ombre. Sélectionnez le rectangle, choisissez un endroit de la palette de couleurs où se trouve la couleur et déplacez-le quelque part au milieu de ce carré. Mais maintenant, la couleur de l'ombre est grande. N'oubliez pas que ce sera trop clair, nous devons donc l'ajuster un peu, créer un autre rectangle et sélectionner la couleur que nous avons créée sans transparence. Et pour le choisir, c'est notre propre Hex. Sélectionnez-le, appuyez sur Commande C ou Ctrl C sous Windows pour copier l'hexadécimal Revenez maintenant à notre palette de styles ou menu de style et modifiez les ombres. Il existe quatre styles. La première ombre, nous passons donc la couleur sélectionnée ici. La lumière blanche reste alors inchangée. Et nous devons également changer l'ombre intérieure pour obtenir la couleur créée. Regardons notre élément. Ça a l'air plutôt cool. C'est ainsi que vous pouvez utiliser différentes couleurs pour l'interface. Comme je te l'ai promis, essayons une ombre plus claire. Encore une fois. Sélectionnez une couleur que nous avons créée dans le plan de travail précédent. Le dernier, le troisième, c'est un peu verdâtre. Préparez le rayon du coin pour obtenir une forme plus lisse. Et accédez au panneau d'effets. Sélectionnez un autre style, détachez-le et n'oubliez pas de sélectionner la couleur de l'élément à partir de l'arrière-plan Vulcanisé, mais encore un peu sale. Créons la bonne couleur d'ombre. Sélectionnez un rectangle et agrandissez la couleur à partir de l'arrière-plan pour trouver son groupe de couleurs. Comme nous l'avons fait dans les deux précédents, des plans de travail. Déplacez-le vers le bas. Et comme je l'ai dit, faisons en sorte que ce soit un peu plus clair. Pour ce faire, poussez notre spot un peu vers la droite, et peut-être quelque part au milieu ou même un peu plus haut. Voyons à quoi ça ressemble. De plus, l'utilisation de la transparence peut donner une couleur plus profonde. Tu t'en souviens ? OK. Sélectionnez maintenant cette couleur sans transparence comme nous le faisions précédemment. Deux fois. Utilisez le compte-gouttes. C'est notre couleur cible. Copiez l'hexadécimal de cet élément et collez la couleur dans l'ombre intérieure et dans l' ombre déposée de nos éléments Ça a l'air plutôt cool. Vous pouvez maintenant créer vos propres couleurs et éléments pour l'interface. Comme vous pouvez le constater, cela donne un effet super agréable et donne à l'interface une sensation élégante et unique. Nous sommes presque à la fin de notre cours. Mais revenons au côté obscur du nombre d'éléments. Oui, tu as raison. Dans le prochain flex , nous allons créer un mode sombre. Nous allons commencer. 9. Mode sombre: J'ai décidé d'ajouter cette leçon car je pense que dans l'état actuel du monde, c'est très important. Comme dans cette vidéo, nous allons convertir toutes les statistiques et tous les éléments que nous avons créés dans les leçons précédentes en mode sombre ou adapté aux équipes La plupart des implémentations actuelles des applications mobiles ou Web nécessitent un simple passage du mode clair au mode sombre, et bien sûr également pour les interfaces Neumorphic Essayons donc de créer des éléments pour le mode sombre. Je peux vous dire dès le début que ce ne sera pas difficile car nous allons utiliser les mêmes styles que ceux que nous avons déjà créés et que nous avons déjà utilisés dans les leçons précédentes. Nous ajustons simplement la couleur de fond, ajustons la couleur de l'élément. Et en fait, c'est tout. Bien sûr, les équipes obscures. Ils sont un peu spécifiques, en particulier en ce qui concerne le design sur le terrain et le skeuomorphisme, car il est plus difficile donner plus de volume à tous ces éléments , car tout est calme, sombre et presque invisible et le texte contraste très bien avec les arrière-plans Donc, même si nous allons utiliser le design neumorphique pour les équipes obscures, nous devons être très Tout d'abord, à cause de l'ombre elle-même, nous ne pouvons choisir qu'une couleur noire pour cela. Sinon, il ne sera pas visible car il ne sera pas en mesure de fournir cet effet de volume ou de créer l' effet de volume pour les éléments. Comme vous pouvez le voir dans ces exemples, toutes les couleurs d'arrière-plan et la couleur principale. C'est un peu sombre, mais ce n'est ni noir ni noir pur. Ainsi, vous pouvez voir les ombres et l'élément en ressortir. Surface. Bon, revenons donc à nos styles précédemment créés et passons rapidement au mode sombre. Tout d'abord, je vais sélectionner le premier élément. Il s'agit d'un carré de 150 x 150 pixels avec un rayon de coordonnées de 32 pixels. Et ils sont tous pareils. Sélectionnez donc le premier élément, le toucher, le style à partir de celui-ci. Et maintenant, nous allons travailler avec toutes ces ombres tombantes et ces ombres intérieures. Sélectionnons notre afin de changer la couleur de fond. Comme nous allons aborder le thème sombre. Sélectionnez notre plan de travail, allez dans le panneau de droite. Regardez les composants du carburant sélectionnés et choisissez une couleur la palette quelque part en bas, dans le noir, dans la zone sombre. Mais bien sûr, ce ne sont pas les très noirs, comme je l'ai déjà expliqué, sont tous debout, ils ne seront pas visibles. Faisons des couleurs plutôt froides, quelque chose comme ça. Comme vous pouvez le voir, c'est un peu en bas et il fait assez sombre Mais on peut toujours distinguer la teinte de la couleur. Alors. Effet poisson rouge. Et bien sûr, nous devons copier la couleur sélectionnée car nous allons l'utiliser également pour l'élément lui-même Comme vous vous en souvenez dans les leçons précédentes, la couleur de l'élément et la couleur de la surface doivent être les mêmes. Ou nous pouvons également le faire simplement en sélectionnant l'élément. Et en appuyant sur Color, j'ai ouvert Color, Color Picker et j'ai sélectionné la couleur sur la surface. D'accord ? Comme vous pouvez le constater, tous les styles des leçons précédentes restent les mêmes et ce n'est pas ce que nous voulons Cela ne nous aide pas à donner à cet élément un aspect volumineux. On dirait que Volume le dit. OK, allez dans le panneau de droite des effets. Voyons quelle est la première ombre de Schulz. Alors faisons en sorte que ce soit super simple. L'ombre doit être très foncée pour que nous puissions la voir. Nous pouvons donc simplement sélectionner une couleur très noire, qui est essentiellement six fois zéro. Et l'opacité doit être de 100 %. Donc en gros, il n'y a pas, il n'y a pas de positif et la couleur est pure. Le suivant est le col blanc. Souvenez-vous que dans les leçons précédentes, c'était notre effet de lumière ou c' était essentiellement le reflet de la lumière. Ici. Nous n'en avons pas besoin si fort. Et je vous conseille de le réduire pour ajouter 10 % opacité Ensuite, l'ombre intérieure. Encore une fois, c'est notre ombre, mais à l'intérieur de l'élément, encore une fois, nous allons choisir la couleur la plus foncée avec une opacité de 100 % Et l'ombre intérieure suivante, encore une fois, elle était blanche. Faisons en sorte que ce ne soit que dix pour cent de Boston. Regardez nos éléments. Je dirais que c'est terminé et que nous pouvons l' utiliser dans l'interface. Et faisons de même pour tous les autres éléments. La première ombre est de couleur noire pure à 100%. La suivante est qu'elle est blanche. C'est donc dix pour cent seulement. L'ombre intérieure, encore une fois, doit être très foncée et ne pas être transparente à 100 %. Et la couleur blanche, encore une fois, est beige. Et bien sûr, nous avons oublié de choisir une couleur à partir de la surface. Je ferai de même avec les autres éléments. Et le dernier, le style. Choisissez une couleur noire. 100 %, col blanc, 10 %, encore une fois, col noir et blanc pur J'étais à dix pour cent. Je dirais que c'est 10 %. Choisissez une surface. Maintenant, nous avons nos éléments et essayons de les changer. Et puis Dark Team, la couleur de cette équipe. Comme ici, comme vous pouvez le voir, il y a plusieurs voitures et ça a l'air différent. Utilisons une couleur chaude pour le fond. À nouveau, sélectionnez Artboard. Et choisissons une couleur comme ça. Vous pouvez utiliser ma sélection. Copiez simplement l'hexadécimal à partir d'ici. Et qu'allons-nous faire ? Vous me dites que nous sélectionnons tous nos éléments et choisissons une couleur à partir de la surface. Et c'est tout. Dans une seconde, nous allons passer à la dernière leçon de ce cours. Félicitations. Nous allons utiliser tous les styles et éléments de création pour enfin créer une interface utilisateur 10. Créer une interface mobile neumorphe: C'est la dernière leçon de ce cours, et je suis très heureuse de pouvoir enfin concevoir une interface. Avec vous, nous avons appris à utiliser le logiciel Figma afin de créer des formes simples y ajouter des lumières et des ombres, créer des styles réutilisables et de trouver des couleurs complexes pour les futures interfaces utilisateur Dans cette leçon, nous allons créer deux écrans simples pour l'application mobile. Comme vous vous en souvenez probablement, je conseille d'utiliser des normes d'éléments très subtiles pour ne pas surcharger l'interface Si vous jetez un coup d'œil sur Triple ou Pinterest et que vous recherchez Neumorphic do is, vous remarquerez probablement que la plupart des bons exemples n'utiliseront qu'une petite partie de ces éléments Le reste sera constitué de composants fonctionnels et plats qui donneront à l'utilisateur une sensation d'équilibre. C'est un exemple que nous allons créer dans cette leçon. J'ai préparé ce dessin à l'avance, et trois d'entre eux obtiendront le même résultat, mais ensemble Suivez-moi sur Figma. Créons un cadre, mais procédons un peu différemment. Sélectionnez les deux cadres. Et sur le côté droit, vous verrez les différentes tailles. Vous recherchez leur interface mobile ou leur interface Web. Je vais choisir la taille de l'iPhone. Et bien sûr, n'oubliez pas tous les éléments que vous avez créés auparavant et tous les styles. Nous allons certainement les utiliser maintenant. D'accord, nous pouvons donc commencer depuis le tout début à partir du petit menu en haut du coin. Interface. Non. Pour ce faire, je vais choisir un rectangle et dessiner de simples lignes d'arbre. Oui, nous pouvons leur attribuer une couleur. Choisissons juste une couleur plus foncée. Et passons au titre de la page car notre interface va permettre de planifier un événement pour l'utilisateur. Faisons un avertissement convivial et une interface utilisateur conviviale. Si vous souhaitez créer un texte et une interface, il vous suffit de sélectionner les canaux le coin supérieur gauche du stylo. Et nous pouvons sélectionner le style de police. Je conseillerais pour cette interface de sélectionner un nouveau style de shérif. Ou suivez-moi tout simplement. Choisissez cette police. J'aime vraiment ça. Ajoutons un espace entre les lignes. Je souhaite également ajouter une petite ligne. Le bas peut généralement le trouver dans les iPhones appelés barre d'accueil informelle Mais cela permet de les examiner de plus près et de manière plus réaliste. Interface réelle et réelle. Le prochain élément de notre interface sera le calendrier. C'est super facile à créer. Il suffit de replacer un outil de texte, de mettre un chiffre, je sélectionne la police Roboto pour créer un peu de contraste. Eux. En-tête principal. Modifiez la taille pour la réduire. Et que faire, nous devons placer essentiellement 77 numéros dans une rangée, puis les copier dans des rôles similaires et les jouer ensemble. Je vous conseille d'avoir un chiffre et de le placer dans une sorte de carré afin qu'il soit plus facile de les ajuster et d' uniformiser tout le calendrier. J'ai senti que mon adaptation n'était pas la bonne. Si vite, oui. Réorganisez un peu l' espacement entre les nombres et copiez-collez simplement toutes les lignes ensemble Nous pouvons maintenant sélectionner tous les nombres ensemble, les déplacer et les ajuster légèrement à la taille dont nous avons réellement besoin. C'est presque fini. Supprimons certains chiffres dès le début, car ne sont généralement pas les monstres, pas ceux d'un jour. Et placez tous les nouveaux numéros des mois. Ce serait un travail difficile et répétitif, mais je ne savais pas comment on pouvait le faire différemment de cette façon. Et le week-end, nous avons besoin changer la couleur pour qu'elle soit un peu plus claire pour le montrer à l'utilisateur. Et quelques petits ajustements. Regarde à quoi ça ressemble ensemble. D'autres éléments. Je souhaite également placer la barre supérieure de l'iPhone pour créer plus d' éléments pour l'interface. Outil. Vide Un petit peu, ajustez la composition. Enfin, nous pouvons utiliser les éléments que nous avons préparés auparavant et nous apprendrons à créer. Bien entendu, vous pouvez créer vos styles pour ce design. Mais je vous conseille d'utiliser ce que nous avons déjà légèrement ajusté leur angle de rayon à 16, ainsi que la taille du bouton. Avec un appareil mobile, il est généralement préférable d'avoir des boutons de plus de 50 pixels de hauteur. Sinon, c'est Hopi trop petit pour leur doigt. Il suffit d'utiliser du texte pour ajouter une icône au bouton. Et créons rapidement une autre icône, qui sera une loupe et une recherche Ça a l'air bien. J'ajouterais également plus d' attention et des éléments ces événements déjà créés ou sélectionnés le jour du calendrier pour aujourd'hui, par exemple. Encore un peu d'excellence. Et pour apporter des couleurs. Il semblerait que nous en ayons terminé avec le premier écran, mais vous souhaitez en créer un autre pour faciliter l'événement Donc, en gros, lorsque l'utilisateur le bouton plus, le faisceau, il y aura une autre chute d'écran pour l' Maintenant, regardez ensemble les écrans du bol. J'ai l'impression que les boutons pourraient être un peu plus grands. Nos éléments, et modifions-les à 65 pixels. Pour le deuxième écran, retirons le pli de la manière dont vous le souhaitez. Et comme il s'agira d'une sorte de fenêtre contextuelle, l'arrière-plan doit être sombre Et puis la fenêtre contextuelle elle-même apparaît depuis le haut. Et pour cette fenêtre contextuelle, nous allons utiliser le même sélecteur de calendrier, car vous créez le nouvel événement dans Flow et vous devez sélectionner une date Pour quelle date tu vas être. Même. Changez le titre. Et bien sûr, nous allons utiliser un autre élément que vous pouvez créer un dépôt et atteindre si vous présentez le TextField Mais ajustons d'abord rapidement certains éléments du sélecteur de couleurs Je vous conseille de choisir l'un d'entre eux. Elément concave. Cet élément représentera un champ de texte, ou mieux encore, une zone de texte, dans laquelle l'utilisateur ajoutera sa description pour l'événement. Changez la couleur, bien sûr, de l'élément, choisissez la couleur de l'arrière-plan. Et je vois, de mon point de vue, que certaines de leurs ombres peuvent être un peu légères. Bien sûr, nous devons également ajuster le rayon des coins. Et j'y attacherai le style et les petits détails ainsi que l'opacité de leurs formes Il ne sera donc pas si fort. En tant qu'interface. Très léger et simple. Bien sûr, l'utilisateur doit fermer cette fenêtre contextuelle d'une manière ou d'une autre. Nous devons donc placer quelques boutons supplémentaires. Annulez probablement et ensuite il pourra choisir, faire grogner la fenêtre contextuelle ou ajouter cet événement Ne comptez pas. Un autre petit et dernier élément que je voudrais ajouter à cette interface est le petit texte d'aide à l'intérieur de la zone de texte. Ainsi, l'utilisateur comprendra qu'il peut réellement taper à l'intérieur de cette forme à l'intérieur du carré. Et nous avons terminé la dernière leçon. Je vous ai montré un exemple d'interface utilisant un bras d'éléments. C'était probablement un peu rapide, mais mon objectif principal était de vous montrer et de vous donner une sorte de direction plutôt que de vous contenter de vous plier et de vous rencontrer. Pour créer exactement la même interface, vous pouvez utiliser ces idées ou le ressenti de la composition de l'équilibre pour réaliser vos idées Vous pouvez l'essayer vous-même et simplement créer une interface similaire ou même complètement différente. la dernière partie de ce cours, je vais vous expliquer la tâche que vous pouvez effectuer vous-même. Ensuite, je suis heureuse de passer en revue vos résultats et vous faire des suggestions sur la façon de les améliorer 11. Projet du cours: Félicitations, nous avons terminé notre cours. Votre tâche consiste à concevoir un ou deux écrans pour une calculatrice de base à l'aide de styles neumorphiques. Bien entendu, vous pouvez utiliser des éléments que nous avons créés ensemble ou créer vôtres en utilisant toutes les techniques nous avons apprises au cours de ce cours Je vous encourage à utiliser tous les principes du néomorphisme pour créer des interfaces visuellement attrayantes N'oubliez pas qu'à la fin, ces interfaces seront utilisées par des personnes. Une fois que vous aurez terminé vos designs, vous pourrez les partager avec moi sur le forum du cours. Et je suis plus qu'heureux de vous faire part de vos commentaires ou de vous aider à vous améliorer. J'ai hâte de voir ce que tu vas trouver. N'ayez pas peur d'être créatif et de l'avoir financé. N'hésitez pas à expérimenter et souvenez-vous que c'est en pratiquant qu'on devient parfait. Merci d'avoir participé à cette incroyable expérience d'apprentissage. Et je suis heureuse de vous voir dans mes prochains cours. Merci de vérifier mon profil. J'ai également un autre cours qui s'appelle la composition. Si vous souhaitez vous entraîner davantage et vous inspirer davantage du monde vous entoure afin de développer vos compétences en termes de mise en page et de composition. Alors jetez-y un coup d'œil et à plus tard. À bientôt. Au revoir.