Magie des cadres : créer des designs d'interface utilisateur faibles et élevés

1. Introduction: Bonjour à tous et bienvenue à notre séance d'aujourd'hui. Aujourd'hui, nous allons nous plonger dans le monde fascinant de la charpente métallique Qu'est-ce qu'un cadre métallique exactement ? Il s'agit d'un guide visuel qui représente le cadre de base de notre application ou d'un site Web. Pourquoi les wireframes sont-ils très importants ? Oui, c'est très important car cela permet de comprendre la clarté et la fonctionnalité des écrans ou des pages qui vont être développés. Maintenant, à qui bénéficierons-nous de ce cours ? Laisse-moi te le dire. Il y a d'abord les designers en herbe, ceux qui souhaitent démarrer une carrière dans le design d'interface utilisateur Le deuxième est celui des entrepreneurs. personnes qui envisagent de lancer leur propre start-up et souhaitent concevoir leur propre interface utilisateur. Vient ensuite le graphiste. Si vous aimez l'art, ce cours ajoutera une nouvelle compétence à vos outils et vous permettra d' explorer le nouveau design de l'application. Le dernier est un passionné de design. Si vous aimez simplement le design, c'est une façon amusante d'apprendre quelque chose de nouveau. Il s'agit essentiellement d'un cours très polyvalent, qui peut être bénéfique, comme toute personne intéressée par le design. Il existe deux types de wireframes, les wireframes basse fidélité et les wireframes haute fidélité Et dans ce cours, nous allons apprendre à la fois les wireframes et tout se déroulera sur le terrain 2. Vidéo de projet: Si vous poursuivez le travail sur le projet, vous créerez un total de quatre trames filaires. Il vous permettra de pratiquer à la fois des techniques de wireframing à haute fidélité et à faible fertilité pour le filaire à faible fritte Première étape, choisissez le concept d'application que vous souhaitez concevoir. Deuxième étape, commencez par les trames filaires basse fidélité. Voici les plans initiaux de la conception de votre application. Troisième étape, esquissez la mise en page de base. N'oubliez pas de vous concentrer sur les fonctionnalités et non sur les détails. Quatrième étape, concevez au moins deux cadres filaires basse fidélité. Ensuite, il y a les trames filaires à haute teneur en Fili. Pour cette première étape, vous devez choisir l'un de vos cadres filaires à faible valeur finie, qui sera converti en filaire haute fidélité Deuxième étape, commencez par ajouter les couleurs ou les textures. Cela permettra à vos créations de passer à la troisième étape. Créez au moins deux wireframes à finition élevée. Enfin, après avoir pris une capture d'écran des trames filaires basse fidélité et haute fidélité, partagez-la simplement dans votre galerie de projets. 3. Apprenez à concevoir des cadres métalliques de faible fidélité avec des activités pratiques.: Bonjour à tous. Donc, sans perdre notre temps, commençons par le wireframe Pour cela, sélectionnons le tableau mobile. Maintenant, nous pouvons trouver le téléphone ici. Nous pouvons l'utiliser, iPhone 12, Pro Max. Maintenant, nous l'avons. OK. Je veux vous montrer cette page de signature en fil métallique. Nous allons le faire exactement ici. Pour cela, on fait d'abord les rectangles, j'appuie sur R. Ce sera le premier rectangle Nous pouvons le dupliquer en appuyant sur la commande D. Oui, cela se fait également. Nous aurons encore besoin d'un troisième rectangle. Encore une fois, appuyez sur la commande D. Voilà. Tu peux le voir ? Si je monte, cela ne me montre pas le bon alignement. Dès que je me suis déplacé, je peux voir la couleur marquée ici, ce qui signifie qu'elle est déjà correctement centrée comme cette couleur. Nous pouvons maintenant ajouter les bordures. Nous pouvons définir la taille de la bordure de l'intérieur ou nous pouvons la faire également au centre ou à l'extérieur. Mais je trouve que l'extérieur a l'air cool. OK. Nous allons passer à la suivante. Encore une fois en dehors de 1 à 34, encore une fois, le troisième qui est un nom de journalisation, encore une fois, en dehors de 134. OK. Je pense donc que ces boîtes sont assez grandes. Rendons-le un peu plus petit, ce 35065. OK. 31565. Un 65. Maintenant, nous pouvons écrire ici le genou à mémoriser et les laisser choisir une case. Alors laissez-nous le faire. OK, donc cette police est plutôt correcte. Nous ne pouvons faire qu'une chose. Je dois juste le copier-coller ici, d'accord ? OK, et la boîte carrée ici, c'est pour moi, de taille 25 ou 25. Nous pouvons remplir cette couleur bleue. C'est une couleur assez foncée. Nous recevons un peu de lumière. Aucun modèle. OK, je pense que 30 c'est suffisant. OK, celui-ci est terminé. Et maintenant, nous allons aborder le reste lors de la prochaine conférence. 4. Apprenez à insérer du texte et des champs de saisie dans un design Wireframe de faible fidélité avec des activités pratiques.: Bonjour à tous. Mettons maintenant les champs de saisie. Nous aurons besoin de champs de saisie pour l'e-mail, le mot de passe et le login car nous avons créé ces rectangles Insérons maintenant le texte. Tu vois, tu peux faire comme texto, car je mets le courrier électronique d'abord sur le téléphone. Mets-y un peu d'herbe et le fonds, d'accord. Ce fonds fonctionne bien, et bien sûr sa taille. Donc ça se passe plutôt bien. Nous pouvons le copier à nouveau. Nous pouvons le copier, d'accord. Donc ça se passe bien. Nous pouvons maintenant le copier et le coller ici. OK. Maintenant, crée un mot de passe et passe sur le côté, d'accord ? Comme vous pouvez le constater, nous avons déjà les lignes d'alignement. OK, c'est correct. Ensuite, nous nous reconnecterons. Vous pouvez simplement dupliquer cette commande placée au centre, et ce sera votre identifiant. Je pense qu'il devrait être moins coloré. OK, donc je vous suggère de le rendre plus léger. OK, ça fait du bien, et cette nouvelle connexion le rendra un peu plus léger. OK. Je pense qu' il devrait faire noir. Oui, ça a l'air plutôt cool. L'e-mail est terminé, mot de passe de connexion, vous vous souvenez de moi ? Et maintenant, c'est le point. Pour réussir, nous devons prendre deux rectangles dans lesquels nous nous trouvons ici L'un d'eux va être comme ça. J'en ai gagné un autre. OK. C'est le F 25. OK. Faisons-le pivoter. Retirez les eaux et nous pourrons à nouveau faire une rotation. Ça a l'air cool, non ? OK, si tu veux, on peut étendre ça. 27 regarderont. Kay, sois cool. Sélectionnons-le et commandons le groupe G, faites en sorte qu'il ne soit pas blanc. J'ai compris. Est-ce que c'est fait ? Bien entendu, nous devons le réduire. Non, je trouve que ce bâton n'a pas l'air si argenté, donc il a l'air cool Euh, ce sera donc la couleur blanche T. Alors maintenant, connectez-vous par e-mail par mot de passe, souvenez-vous que c'est fait. Repartons avec le login. J'ai donc exécuté la commande D. Ce sera le login, la taille que je cherche à obtenir. Je pense qu'il devrait être plus grand. C'est fait. OK. Faisons les trois lignes de côté 75 fois 12. Dupliquons les deux fois 1.2, enlevez les cuissardes Mettez les couleurs, optons pour plus de lumière, d'ombre. Je pense que c'est beaucoup plus important. Faisons en sorte que ce soit 60 x 50. voyez, dans la prochaine conférence, nous terminerons les choses restantes. Merci. 5. Apprenez comment ajouter plus de détails dans le Wireframe haute fidélité avec activité pratique: Donc, comme nous le savons tous, nous sommes arrivés ici. De la même manière, nous pouvons simplement tout copier-coller. OK, j'ai oublié de les regrouper d'abord. D'accord ? Vous pouvez voir que sur le rectangle de gauche, copie quatre, copie trois et rectangle, nous pouvons simplement regrouper commande G, puis la nommer barre latérale. D'accord ? Comme nous l'avons fait, il sera très facile de simplement le copier-coller ici. Et nous pouvons simplement lui donner une belle couleur qui convient à l'arrière-plan. Bien entendu, sélectionnons la couleur. Il en va de même pour le second, il en va de même pour le troisième De même, nous pouvons utiliser une icône de recherche. Il suffit de le copier ici. Et collez. OK, il y a donc de la colle ici, donc on peut juste le déplacer, on peut le rendre plus blanc, bien sûr, il est plus beau. Et augmentez également à nouveau les frontières. Optez pour ce qui est plus blanc. Et les frontières, c'est parti. Oups, je ne savais pas qu'il y avait une barre latérale ici Ils l'ont simplement supprimée. Cela se produit lorsque nous copions quelque chose. Comme si nous ne savions pas que nous pouvions entrer dans n'importe quelle partie de ce canevas de croquis. Donc c'est bon. Tu dois juste faire très attention après ça. Alors, on y va. Je pense que c'est fait maintenant, donc je peux, et laissez-moi vérifier si tout est correctement aligné. OK, donc je pense que cela devrait être plus grand et je pense que la taille devrait être plus ou moins similaire à la taille 6. OK. Ça a l'air cool. Je pense qu'en supprimant cela, ce sera plus compréhensible dans la mesure où nous pourrons le faire. OK, et cherchez aussi. OK, c'est fait. Écrivons maintenant le login dans le texte. Nous pouvons faire une chose, augmenter la taille ou quelque chose comme ça. Oui, ça se passe bien. Même 45, c'est bien, non ? Oui Nous pouvons également changer la police. OK, ça a l'air plus sympa. Alors allons-y avec les remplissages. Et on peut aussi mettre la jolie couleur. Nous pouvons augmenter la taille. Je trouve que ça a l'air plutôt bien. Nous ne pouvons faire qu'une chose. Nous pouvons regrouper ce rectangle ainsi que cette commande de saisie d'e-mail. Nous pouvons également le nommer sous forme d'e-mail. Nous pouvons le regrouper, le regrouper et le nommer comme mot de passe. C'était un bouton de courrier électronique, non ? Cet e-mail contenant le mot de passe. Et c'est à nouveau une connexion, nous pouvons regrouper ces deux boutons de connexion par nom . Très bien, donc ces trois-là sont terminés. Maintenant, nous pouvons passer à la prochaine étape qui est de vous souvenir de moi, d'avoir oublié votre mot de passe. Je n'ai pas de compte, créez-vous un compte. Donc, pour cela, passons à la prochaine conférence. Couvrez le reste lors de la prochaine conférence. 6. Il est temps de terminer notre premier design de cadre métallique haute fidélité: OK. Comme nous pouvons le constater, cette page est prête. Je dirais que la page de connexion est complètement terminée. OK, il y a encore une chose qui reste la frontière. Faisons la bordure, créons la couleur du dégradé. Cela sera encore plus beau. Je préfèrerais le vert droit sur un côté. Qu'est-ce que tu en penses ? Devons-nous opter pour la même chose alors ? Mot de passe OK. Je pense que nous devrions opter pour cette couleur différente. Ce côté sera vert et l' autre sera rouge. OK, vert et rouge. Essayez-en une autre, oui, je pense que nous devrions essayer une autre couleur au lieu d' essayer quelque chose de jaune vif. OK. Je pense que c'est jaune et que c'est en train de devenir, et nous ne pouvons pas voir la frontière. Passons à l'autre couleur. OK, je pense que ça a l'air bleu ciel. C'est bon, on y va. Ou du bouton Sang. Maintenant, je pense que nous avons presque terminé. Il suffit de vérifier, d' accord, d'enregistrer le courrier, le mot de passe, tout est fait. Comme vous pouvez le constater, il y a quelques différences entre ce que j'ai fait plus tôt et celui-ci. Et c'est tout à fait normal. Si vous voulez que je refasse la même chose, je vais simplement copier ce texte et le mettre en toile de fond. Maintenant que nous avons dépassé le temps, nous avons vu que ce fond est large, ce texte devient noir. Mais comme nous avons un fond noir, j'ai conservé ce blanc et ces couleurs vives sous forme de texte. Donc, ce qui a l'air sympa. Oui, tout tournait autour de la haute fidélité. Et passons à la prochaine conférence au cours de laquelle je vous enseignerai la page d'inscription. OK, à la prochaine conférence. 7. Apprendre à créer une structure de fil haute fidélité de plus avec des activités pratiques: Bonjour et bienvenue à ma conférence. Dans cette conférence, nous allons commencer par la page suivante. Permettez-moi de vous montrer une chose maintenant. Nous allons commencer par la deuxième page, celle de l'inscription. Maintenant, vous devez avoir compris que c' est également une tâche très facile, que vous pouvez faire. Très bien, commençons à créer la même page d'inscription. Accédez à nouveau au plan de travail. Sélectionnez iPhone 12, Pro Max. Allons-y. Il suffit de faire en sorte que l'arrière-plan soit noir dès maintenant. Nous allons d'abord commencer par les rectangles, d'accord ? Il suffit de les dupliquer. Le 123, donc faites-en 300 et faites ce 16. D'accord ? Nous pouvons dupliquer ce prix 1.3 Alors c'est parti. D'accord, nous ne sommes donc pas obligés de vérifier tout cet espacement lorsque nous faisons comme ça, lorsque nous nous rapprochons, nous apprenons à connaître l'espacement approprié De même, je vais vous montrer qu'une minute est la seconde, comme ça, puis elle viendra et s'arrêtera après 58 minutes. OK, maintenant nous avons le 58. La taille des rectangles est de 300 x 16. Maintenant, insérons le texte. OK, complétons également cette partie. Allons-y D, faisons-en 2060. Maintenant, c'est au centre. Nous pouvons le colorier de couleur vive. Encore une fois, j' aimerais choisir le rouge foncé, et le reste serait blanc. D'accord, si tu veux, tu peux aussi faire les bordures. De même, vous devez d'abord augmenter le mot. Ensuite, j'ai sélectionné le dégradé linéaire que je préfère le plus. La couleur que je sélectionne est, encore une fois, une couleur bleutée. Doit être clair car le fond est de couleur noire. couleurs des rectangles ou des dégradés que nous utilisons doivent être claires Passons au côté orange. Oui, cela donnera à nouveau les côtés les plus brillants et les plus brillants pour le vert suivant Oui, c'est ce qu'il faut. Oui, j'ai adoré. Maintenant, entrez le texte, qui est encore une fois une partie très simple pour T, puis vous pouvez écrire juste tre. C'est bon. Placez-le au centre. Fais la taille 50. OK, gardez-le à 40 je crois. Oui, ça a l'air bien. Vous pouvez même modifier les polices. Je préfèrerais un noir. Oui, cela donne la version sombre et épaisse. Passons maintenant aux entrées telles que le nom, passe du courrier électronique et la confirmation du mot de passe, ainsi qu'à la réinscription Je dirais de le copier et de le coller ici. OK. Non, je ne l'ai pas fait. C'est bon. OK. Je dirais donc que vous devez le dupliquer et vous devez le dupliquer et nous pouvons le mettre dessus et simplement l'écrire. S'inscrire OK. Je trouve que ça a l'air très épais et sombre, cool. Ça a l'air sympa. Maintenant, encore une fois, nous pouvons saisir le texte de son vrai nom. Mais encore une fois, je vais opter pour celui-ci et la taille devrait également être correcte. 30 ou 25, je crois. Oui, je pense que c'est bon. Parce que son nom, ce sera un e-mail. Ce sera un mot de passe. Ce décalage consiste à être correctement aligné. OK. Et puis encore une fois, commandez, désolé, commandez le double de confirmation du mot de passe. Maintenant c'est fait. Je pense que tout a été correctement configuré, comme le nom d'enregistrement, le mot passe confirmé par e-mail, le mot de passe, tous sont correctement utilisés. Maintenant, la prochaine chose est la flèche. D'accord ? Passons donc à la flèche. Pour cela, il nous faut à nouveau un rectangle. L'autre peut simplement le dupliquer. OK, allons-y. Tout d'abord, supprimez cette couleur, rendez-la blanche. Je pense que c'est rose, non ? OK, ça a l'air cool. Et encore une fois, les frontières. Supprimez les bordures. OK. Maintenant, il suffit de le sélectionner également. Désolée. Maintenant, sélectionnez-le et faites simplement pivoter. air plus beau. Il suffit de faire les coins arrondis et c'est amusant. OK, maintenant je pense que c'est plutôt bien. Sélectionnez les trois. Il suffit de créer la commande G group et de cliquer sur la flèche droite. OK, maintenant cette flèche est également terminée. Si tu veux, tu peux l'agrandir. Vous pouvez également simplement étendre les lignes ou quelque chose comme ça à 21 degrés, pour que tout soit égal. Vous pouvez noter à nouveau 20 degrés. Et vous pouvez également créer plus de coins, coins arrondis et simplement le régler correctement. Bien, je vais aussi faire en sorte que ce soit un peu plus rond. Oui, maintenant c'est parti. Eh bien, allons-y. OK, maintenant que nous en avons terminé, cette flèche est terminée, elle est correctement alignée. Je pense que cette couleur est bonne. Vous pouvez mettre la couleur de votre choix, mais je ne pense pas que ce soit nécessaire. Ça a l'air plutôt cool. Oui, cette page est terminée. 8. Conclusion: Félicitations et complétez ce cours de charpente métallique. Vous avez maintenant des compétences très intéressantes en matière wireframes basse fidélité et haute fidélité De plus, vous vous êtes entraînée à la fois sur le filaire des pouliches basses et des pouliches hautes Plus important encore, vous avez acquis la confiance nécessaire pour relever les nouveaux défis de conception. Mais attendez, ce n'est pas encore fini. Commencez simplement à explorer et à mettre en pratique vos conceptions d'interface utilisateur. Ce cours est peut-être terminé, mais votre parcours de conception ne fait que commencer.