Transcription
1. Intro: Bonjour, Je m'appelle Nicole et je suis un designer UX. Mon travail se concentre principalement sur votre conception I X de croquis orteil femme visant à prototypage idées. Et c'est ce que je veux vous apprendre Aujourd'hui, j'utilise fig ma dans mon processus de conception i X parce que c'est le paquet complet que je peux câbler prototype de conception de cadre, collaborer et remettre mon travail tout dans le même outil dans cette classe, vous apprendrez comment utiliser Sigma dans votre propre projet comment construire des systèmes de conception évolutifs cohérents et le processus de conception
complet à partir de pourquoi encadrer orteil remettre votre prototype Ce classless ciblé pour les débutants qui veulent apprendre le processus de conception idéal et expérimenté qui veulent optimiser leurs performances. se voit dans la classe.
2. Le processus de conception: Félicitations pour l'inscription à ce dernier. Avant de vous apprendre à utiliser Sigma d'abord, je veux partager avec vous le processus de conception idéal vous devriez suivre en tant que vous êtes vous X designer ? Beaucoup de gens me demandent comment commencer ? Quel processus de conception utilisez-vous ? Combien y a-t-il de pas ? Certaines personnes pensent que nous commençons simplement par ouvrir un fichier de conception et commençons immédiatement à concevoir. Ce n'est pas une idée. Les grands designers ont un ensemble d'étapes qu'ils traversent pour être en mesure de faire ce qu'ils font. Il y a trois grandes étapes pour chaque que vous êtes la conception UX, projet, compréhension du plan et le design. Nous faisons cette approche où nous comprenons et planifions avant de concevoir, car cela permet de gagner beaucoup de temps. Il devrait utiliser cette communication d'avant en arrière, malentendus et les problèmes que vous pourriez rencontrer dans le projet. La première étape de comprendre est de comprendre l'entreprise derrière l'idée. Il s'agit d'extraire les informations nécessaires du client, comme identifier les problèmes. Trouvez la solution, définissez vos objectifs utilisateur et définissez des personnas. Le plan de la deuxième étape consiste à créer le parcours de l'utilisateur après qu'il s'agit de l' esquisser sur papier et de le partager avec vos clients. Puis, après l'avoir volée et confirmé les cadres de
la femme en papier, la troisième étape est de viser femme, concevoir et prototyper votre et c'est l'étape que nous allons couvrir dans ce cours. Je vais vous montrer étape par étape
comment vous pouvez créer des cadres métalliques interactifs, systèmes de conception de
cloches, échanger des prototypes et collaborer avec votre équipe. Dans la vidéo suivante, je vais vous expliquer pourquoi vous devriez choisir Sigma comme outil de conception.
3. Pourquoi Figma: Alors pourquoi utiliser Sigma dont vous avez probablement entendu parler pour un illustrateur de boutique ou en design ? Ces trois outils ne sont pas faits pour votre conception I X, et je ne recommande pas d'utiliser l'un d'entre eux. Photo Shop est fait pour l'édition de photos. Illustrator est fait pour dessiner des illustrations, et la ligne indépendante est faite pour la conception de magazines. La seule raison pour laquelle nous les utilisions il y a des années était que ce étaient les seules options que nous avions. Mais maintenant, nous avons de nombreux outils qui sont spécifiquement conçus pour votre conception I X. En 2018, les meilleurs outils de conception seraient Fig, MMA sketch, Adobe X'd et quelques autres. Je pense que la stigmatisation est la meilleure de ces options. Pourquoi ? Voici quelques principales raisons pour lesquelles First Sigma est gratuit pour les particuliers, contrairement à Sketch, qui est $99 pour Adobe X'd, qui est stand tout cela pendant un mois. Il a des abonnements payants pour les plus grandes équipes, mais c'est gratuit si vous êtes un individu. En outre, Sigma est basé sur le Web. Cela fonctionne dans le navigateur. Cela signifie qu'il fonctionne sur n'importe quelle plate-forme. Vous penseriez que puisqu'il est basé sur le Web, il aurait beaucoup de bugs. Mais étonnamment, je l'utilise depuis l'année dernière et j'ai à peine rencontré des problèmes de nature en termes votre conception I. C' est très intuitif à utiliser. Par exemple, contraintes vous permettent d'adapter des conceptions lorsque la taille de l'écran change et que les composants
vous permettent de réutiliser des éléments dans vos conceptions. On verra plus de ça plus tard. Vignal possède également des fonctionnalités de prototypage et de collaboration, et vous n'avez pas besoin d'outils de prototypage distincts comme le marbre ou l'idée. Sigma collabore également en temps réel avec des designers. Vous et les autres concepteurs de votre équipe pouvez travailler sur le même fichier en même temps. Vous pouvez également créer des systèmes de conception avec lié. Vous êtes des composants que toute l'équipe peut utiliser. Et enfin, vous pouvez remettre facilement aux développeurs, qui auront accès à des styles de manteau et à des fonctionnalités d'exportation. Le seul inconvénient de la stigmatisation est qu'elle ne fonctionne pas encore hors ligne, mais vous pouvez contourner cela en ouvrant le fichier avant de quitter la ligne. Ainsi, comme vous pouvez le voir figure est le package complet qui vous permet de travailler sur le
processus de conception complet . Dans la prochaine série de leçons, je vais commencer par une introduction à la Fig Mama, puis nous allons vous montrer le processus de conception étape par étape Euronext en utilisant le signal
4. Introduction à Figma: dans cette vidéo, je vais vous donner une introduction conviviale débutante à la Fig MMA Pour commencer à utiliser figment sur votre appareil. Tout ce que vous avez à faire est simplement de vous inscrire en utilisant votre email et votre mot de passe et vous êtes prêt à partir. Vous pouvez ouvrir Fig Ma et le navigateur comme un er l normal ou même utiliser le bureau vers le haut. Nous avons le dernier bouton ici pour créer une nouvelle faute et le bouton d'importation lorsque vous voulez importer d'autres fichiers comme les fichiers d'esquisse ou les fichiers de fig. Maintenant, je suis dans l'eau des courants d'air. C' est là que les fichiers que vous avez créés sont stockés par défaut, mais vous pouvez également avoir des équipes et inviter des personnes à y accéder. Créons une nouvelle ferme. Voici la barre d'outils ici où vous trouverez les outils dont vous avez besoin pour créer des objets sur le
côté gauche . Il y a le panneau de calque dans le bon sens. Nous avons le panneau des propriétés. Commençons par créer un cadre, qui est l'écran que nous allons concevoir. Lorsque je clique sur l'outil de cadre, je peux choisir l'un des suggérer que les presets ici sur la droite. Choisissons iPhone huit et nous allons renommer l'orteil de cadre à la maison car ce sera l'
écran d'accueil de mon bras. Maintenant, créons la guerre de Natwar. Je vais choisir l'outil rectangle pendant que je dessine la Fig. Mon aide m'aide en accrochant mon objet aux bordures du cadre. Je vais le rendre blanc et y ajouter l'ombre subtile. Ensuite, je vais ajouter le titre de l'écran. C' est la salope de la maison. Je vais juste ajouter du texte et l'appeler à la maison. Faisons la taille de la police 16 pixels. Centrez le texte, alignez les manuels au centre du cadre et centrés verticalement à l'aide des
guides intelligents . Allons organiser les choses. Celles-ci vont bien ensemble en un seul groupe. Donc, sélectionnons Um et regroupez la sélection et renommez-les en barre naff. Maintenant, créons un rectangle ici. Lorsque je tiens et que je passe le curseur sur le cadre, je peux voir l'espace entre le rectangle et le cadre. Il semble que ce n'est pas centré, alors choisissons un centre de ligne ici. Ce sera un design de voiture, donc je vais la rendre blanche sur l'ombre de la colonie, une carte a généralement un rayon de frontière, alors prenons ça d'ici. Quatre pixels maintenant, je veux ajouter une image au rectangle. La meilleure façon de le faire est de changer sa volonté d'image et de choisir l'image dans le finder . Maintenant, je vais ajouter le titre de la carte ici en dessous. Maintenant, nous allons le dupliquer et ajouter un autre sous-titre
plus petit sous celui-ci. J' ai, comme celui-ci, une taille plus petite et aussi un gris plus léger. C' est le nom de son sous-titre de la carte. Maintenant, ces objets vont bien ensemble, donc je vais juste les sélectionner et appuyer sur la commande Ito. Regroupez-les maintenant dire, Je veux créer un autre écran et disons que je décide que je veux changer la
couleur de fond du NAB Notre J'aurais besoin de changer la couleur sur chaque écran et imaginez que vous avez 50 ou 100 écrans. Vous passeriez des heures à travailler sur une modification stupide, donc pour éviter ces temps perdus, nous utilisons des composants. C' est là que ça devient vraiment intéressant. Un composant est un objet qui peut être réutilisé plusieurs fois. Ce nombre va être utilisé plusieurs fois dans mon haut, donc je vais le sélectionner et cliquer sur le composant que je peux en haut. Cela l'a converti en un composant. Il a ce beau que je peux dans le panneau de calque. Faisons la même chose pour la carte, car il va aussi être utilisé comme il est, je vais à Dublin, Kate le cadre à nouveau Maintenant que j'ai utilisé des composants. Maintenant, cette barre naff est une instance de cet adversaire du réseau. Le 1er 1 que nous avons créé est l'original, alors que celui-ci est le plus compliqué, qui est une instance hors de lui. Maintenant. Toute modification qui se produit sur l'original est mise à jour sur son instance. Cependant, tout ce qui arrive à l'instance ne se met pas à jour sur l'original, car il s'agit seulement d'une instance de celle-ci. Maintenant, c'est là que ça devient encore plus intéressant. Nous pouvons faire des composants imbriqués. Par exemple. Je veux faire une barre maintenant qui a un bouton de retour. Je vais créer un sac mais ici, puis sélectionner l'instance et le bouton retour et créer un autre composant à partir de celui-ci. Cette fois, je vais l'appeler maintenant loin barre oblique. époque, j'appellerai la barre oblique originale normale. Sujet huit ce cadre à nouveau pour avoir un autre écran de détail maintenant en raison de cette
barre oblique ajouté je peux sélectionner quel type de naff l'excluant dans le menu du composant. Ici. Parlons des contraintes. Contraintes est un moyen de faire en sorte que vos conceptions s'adaptent à la taille du cadre en ce moment, si je agrandis ce cadre dans lequel il se comporte comme nous l'attendons, il ne s'adapte pas à la taille du cadre. Mais nous pouvons corriger cela et le rendre sensible à la taille de l'écran. Donc, faisons ce nah barres comportement horizontal gauche et droite au lieu de gauche et faisons la même chose pour la carte. Le flux est maintenant réactif avec la taille de l'image. Rendons les autres réceptifs à Nous pouvons également définir des préoccupations verticalement. Disons que je veux agrandir cette carte pour le Detail Street maintenant. Cela ressemble à ceci, mais je veux que le titre et le sous-titre orteil restent toujours en bas quand je le fais plus grand. Puisque les titres sont à l'intérieur du composant, je vais aller au composant d'origine et changer leur comportement à partir de là. Donc je vais dire sur ce titre. Faites le comportement vertical en bas sur Lee et le même pour le sous-titre. Maintenant, quand je rends la carte plus longue, elle agit comme je veux. Et bien sûr, cela s'applique à l'autre instance du composant sans avoir à le refaire. Il est très important de noter que la conception de fil vous devriez prévisualiser votre conception dans 100% peu temps en temps il suffit d'appuyer la commande zéro, et il zoome sur 100%. Ceci est de voir les tailles de police en taille réelle avant de vous montrer comment rendre ces écrans interactifs. Dans le cas où vous avez besoin d'exporter vers une image, suffit de sélectionner l'ami que vous voulez exporter et aller à l'exportation en bas à droite, Et ici, il peut choisir plusieurs tailles et plusieurs formats en même temps. Gardez à l'esprit que vous n'avez rien à économiser dans FEMA car cela permet également d'économiser votre travail tout le temps. Parlons maintenant du prototypage. Jusqu' à présent, nous avons été dans le monde du design. Maintenant, nous allons juste le mode prototype. Lorsque vous passez le curseur sur les calques, ces cabines courent pour créer un lien entre les écrans. Nous directons simplement le cercle à l'endroit où vous voulez le lier,
et comme il s'agit du composant d'origine, il applique l'orteil singling toutes ses instances. Donc je dois changer ce truc pour le deuxième garde. Au lieu de cela, lorsque je clique en dehors des écrans, je peux voir tous les liens créés. Débarrassez-vous de ceux créés par défaut à partir du compartiment d'origine. Je fais simplement glisser et déposer pour supprimer le lien. Je veux aussi que ce bouton de retour renvoie à la page d'accueil. Je peux le faire une fois, et il est instantanément appliqué à d'autres instances. Cette flèche bleue signifie qu'il s'agit du premier écran du prototype. Vous congérez cela en le faisant simplement glisser et en le plaçant sur l'écran que vous voulez. Jouons notre prototype en frappant sur cette pièce, Aiken. Maintenant, nous voyons le prototype interactif. Maintenant, tous les liens que nous avons créés fonctionnent comme nous le voulons. Notez que chaque fois que je clique quelque part qui n'est pas un lien. Il donnera le flash bleu pour me dire où sont les objets de longueur. Vous et les spectateurs pouvez commenter en utilisant le Bubel Aiken et commander directement sur le prototype . Maintenant, lorsque vous voulez partager votre prototype avec vos clients ou vos collaborateurs, il vous suffit de cliquer sur le prototype de partage et de copier le lien. Lorsque vous revenez à l'faute, vous pouvez également voir le niveau commun dans le combat lui-même, ce qui est très pratique. Lorsque vous partagez vos fichiers avec des développeurs, ils peuvent voir le code derrière vos conceptions. Lorsque vous choisissez le mode de code ici, vous pouvez choisir les langues CSS que je demande ou android. Sélectionnez donc systématiquement un objet et voyez quelques propriétés de conception ici. Vous pouvez également modifier le format de la couche. Maintenant, cette fonction de cour n'est pas utilisée pour copier simplement coller tout le code de votre conception. Il est plus logique pour les détails de conception avancés comme les ombres ou l'éclat. Les développeurs peuvent également exporter des couches, des objets ou des cadres de la même façon que nous l'avons fait. C' était donc une vue d'ensemble sur les futures de Sigma. Je recommande de commencer à jouer et de s'habituer à l'utiliser avant de commencer à créer votre propre up. Dans la leçon suivante, nous allons commencer à travailler sur un projet réel. La première étape sera pourquoi le cadrage
5. Étape 1 : Créer vos wireframes: dans cette vidéo, je vais commencer par construire les cadres de fil. Les cadres métalliques sont le squelette au large de l'Europe. Il devrait inclure la fonctionnalité de mise en page et votre ex, mais il ne devrait pas montrer le design ou les couleurs hors de cela dans toute la classe. Je vais construire le parcours principal de l'utilisateur à partir d'Airbnb. J' aime utiliser Airbnb comme exemple parce que le design est bien pensé et il a un système de conception
simple et cohérent. Y ami devrait toujours être grande échelle sans couleurs ou motifs. Arrêtez pour être en mesure de se concentrer sur ce qui compte. Suivez avec moi et construisez votre propre site Web. Si vous n'avez pas d'idée de site Web, vous pouvez concevoir Airbnb, Twitter ou toute autre opération que vous utilisez avant de passer aux cadres numériques de femme. Vous devriez d'abord esquisser les cadres de votre femme sur du papier. Donc, j'ai déjà esquissé les cadres de la femme sur papier, et voici comment ils ressemblent à la page d'accueil. Détails de la liste des résultats de recherche, résumé et paiement. Maintenant, dans la figue MMA, nous allons construire presque tout le chemin des cadres, en utilisant des composants. Vous pourriez avoir l'impression que ça va prendre un peu de temps au début, mais ça va vous faire économiser des heures plus tard . La première chose qu'on va faire est de créer une bibliothèque d'yeux ici. Je vais commencer par le composant texte, donc je vais juste créer un calque de texte et converti en composant. Ce sera la taille normale en ce moment. Nous ne nous soucions pas des étoiles du design et du fonds. Je vais le garder comme ça. Faisons aussi les autres textiles. Assurez-vous que le nom du calque reste le même texte et que le nom du composant doit toujours être barre oblique de texte et que le type d'étoile H 1 est de 36 pixels. H deux sera 28e et chacun des trois sera 20 et le petit texte sera 14. Cet espace sera pour d'autres composants que nous créons tout au long de la femme Tout. Alors créons le front de la maison. Avant de commencer à créer des objets, je vais créer la grille dans laquelle je vais construire. Disons que je veux que mon contenu aille à l'intérieur d'un 900 pixels saisi. Le moyen le plus simple est de simplement créer et 900 pixels rectangle. Ensuite, nous devons montrer les dirigeants en frappant le décalage. Notre puis traîne sur les gardes de la règle et claqué les gardes sur le rectangle. Je vais supprimer l'angle strict. Maintenant, faisons le bar de la NASA. Maintenant, nous allons utiliser le texte que nous avons créé là-bas et le copier et le coller ici. Pour créer le menu, Lings deviennent un hôte voyages, des messages et un profil. Aiken. Je regrouperai ces manuels juste pour garder les choses organisées. J' ai aussi besoin du local ici, donc cette barre maintenant sera certainement utilisée dans tous les écrans, donc je vais le convertir en composant aspirine. Allons un peu plus vite. On aura un titre H un ici. J' ai besoin de la taille de l'orteil texte avec le contenu à l'intérieur. Faisons une grande barre de recherche ici. Un espace réservé. Essayez Los Angeles. Ensuite, je vais créer un bouton ici. Faisons un plus sombre et converti en un composant. Maintenant que j'ai l'aspect général, je vais le déplacer vers le guide des étoiles, puis copier une instance de celui-ci, puis éditer le texte pour rechercher la suite. Ajoutons une section intitulée ici et alors ce titre sera probablement en H 2. Faisons la carte d'inscription. Ce sera l'image, et ici nous avons le type de liste de l'appartement entier. Ce sera un petit texte. On aura le titre de la liste ici, et je vais en faire la Nature Street. J' ai remarqué que je veux que toutes mes rubriques soient audacieuses. Donc, nous allons juste éditer que la bibliothèque. Maintenant, je vais faire un autre petit texte pour taper le prix dedans. C' est la liste. Maintenant, je vais en faire un composant et simplement dupliqué pour en créer deux autres à côté. Remplissons les deux autres pour le rendre aussi réel que possible. Très bien, La prochaine section sera des expériences. C' est très similaire aux maisons. Donc, je vais juste répliquer toute cette section et simplement remplir avec un nouveau contenu. On en a presque fini à partir de cet écran. Nous avons toujours le pied de page, alors créons un grand rectangle et ajoutez-y quelques liens. La section Every and e aura sur la presse et l'aide et c'est le titre, Alors faisons le coffre-fort. Je vais faire ça en groupe et l'appeler section Pied de page. Maintenant, dupliquons ceci pour avoir le même texte mais différent. Ensuite, faisons ce pied de page en tant que composant. Donc, nous avons juste la femme a encadré la page d'accueil. Faisons un flux de plus. Je vais dupliquer l'écran car nous allons utiliser de nombreux composants similaires à partir de celui-ci. Ok, débarrassons de tout sauf les annonces et cette page. Nous allons placer le contenu plein avec au lieu de l'intérieur de la grille. Je vais rendre les listes un peu plus petites pour la carte. Je vais juste créer un grand rectangle dans cet écran, la carte découvrant la hauteur du ruisseau et il n'y a pas de pied de page. Donc, la hauteur de mon écran est de 900 pixels, et le roman est de 60 pixels. Je peux juste taper 900 moins 17 et il calculera la taille pour moi. Dupliquons cette liste gratuite pour remplir cet endroit. Nous avons encore les filtres de recherche ici pour gagner du temps. Dupliquons le bouton ici car il aura l'air un peu similaire. Je vais tout faire plus petit que de le détacher de son composant. Faisons de ça le filtre de date. Et quand j'ai fini, je peux en faire un composant et l'appeler une petite ligne vers le haut. Ajoutons deux autres filtres, les invités et le réservoir de maintien. La dernière chose que je vais faire, c'est à la petite barre de recherche. D' abord, je vais faire le composant de la barre de recherche. Ensuite, je vais dupliquer la grande recherche pour la détection et le style qu'il doit être plus petit et avoir une bordure avec un texte plus petit. Maintenant, faisons cet autre composant, et nous l'appellerons barre de recherche Small. Faisons de la hauteur du cadre la même hauteur de mon écran, qui est 900 correctifs et fait. Arrêtons-nous ici. Je vais continuer. Pourquoi encadrer les autres écrans et la prochaine leçon nous allons les rendre interactifs.
6. Étape 2 : rendre vos wireframes interactifs: J' ai déjà porté un ami. Les autres écrans de leur liste de bébé détails, le résumé et les rues de paiement. Maintenant, rendons ces Coréens interactifs. Tout d'abord, nous voulons que le bouton de recherche nous emmène aux résultats de recherche. Ensuite, nous voulons l'orteil de la liste. Emmenez-nous toujours aux détails de l'annonce. Nous pouvons le faire à partir du composant d'origine, et il s'applique à toutes ses instances. Ensuite, le bouton livre nous amène aux détails de l'annonce. Le bouton continuer nous emmène à confirmer, et ils et le jour de confirmation nous ramène à toute la plage. Et enfin, nous voulons l'orteil local. Emmenez-nous toujours à la page d'accueil. Jouons au prototype. Assurez-vous toujours que ce jour de prototype est 100% pour voir les tailles réelles. Maintenant, fois que vous avez terminé avec les cadres de femme interactifs, vous pouvez partager le prototype avec votre équipe ou client et obtenir des commentaires sur l'
interaction de mise en page et dans l'ensemble, avez-vous X. Comme vous pouvez le voir, cette étape n'incluait pas du tout la conception. Dans la leçon suivante, nous allons concevoir les composants pour convertir ces cadres de femme en un prototype de conception
7. Étape 3 : Styliser votre système de conception: Jusqu' à présent, nous avons copain les écrans et les avons rendus interactifs. Et tout en faisant cela, nous construisons une bibliothèque de composants de l'année I. Maintenant, nous sommes prêts à commencer à penser au design. Nous pouvons maintenant commencer sur ces composants que nous avons créés. J' ai placé tous les composants d'origine dans la bibliothèque U I afin qu'il soit plus facile à concevoir. Commençons par la couleur. Je vais commencer par la couleur principale de la marque ici. J' ai déjà copié les couleurs urbaines plus profondes, donc je vais les badigeonner. Ensuite, je vais dupliquer cette couleur pour créer la couleur d'accent. Ensuite, je vais choisir la grâce différente que je vais utiliser pour la conception de l'interface. Commençons par le plus sombre. Je vais commencer par le gris foncé par défaut. Alors je vais jouer avec ça pour le rendre un peu bleu. Maintenant que j'ai ma couleur plus foncée basée, je peux choisir d'autres nuances de cette grande facilement prendre la même couleur en utilisant la controverse de
sélecteur de couleurs . Et maintenant, nous pouvons choisir une nuance de ce grand en luttant contre le format H S B et en rendant le V , qui est la luminosité plus légère quand vous voyez que cette grâce s'avère être deux bleus Il suffit de faire la saturation. Juste s un peu moins Essayez de faire environ cinq gris différents avec environ 20% de différence de luminosité. Ce sont les différentes nuances seront utilisées dans la conception. C' est ma palette de couleurs. Maintenant, faisons les devants parce que nous avons créé des textiles en tant que promoteurs. Maintenant, nous pouvons les changer de la bibliothèque et il sera appliqué sur tous les écrans. Je veux changer ce téléphone orteil se permettre très similaire à la zone et être des utilisations. Choisissez Avenir. Je vais rendre toutes les rubriques lourdes et le reste romain. Maintenant, tout notre texte appliquait les mêmes choses avant. Pour pouvoir utiliser ces couleurs rapidement, nous pouvons les ajouter à nos préréglages de couleurs. Ici, vous pouvez créer une nouvelle couleur ici ou nous ne pouvons pas remplacer les couleurs existantes. Maintenant, il peut sélectionner tout le texte et en faire l'enregistreur sombre par défaut. Je veux aussi que les couleurs primaires et accentuées soient dans mes presets. Donc je vais juste supprimer les vieilles couleurs ici. Rapidement, alors, sont les deux nouvelles couleurs. Maintenant, faisons les bouteilles. Je veux que mes boutons orteils soient toujours habités. Les deux boutons doivent toujours avoir un rayon de bordure et le latin normal doit avoir la couleur
primaire. Le plan. Milton devrait avoir une bordure et une couleur d'accent. Ok, l'entrée aura un petit rayon de bordure et un contour gris. La conception des étiquettes aura un contour gris clair ainsi sur la bordure Rabies. Faisons le maintenant pour Le réseau a une femme par la mauvaise couleur et une grande bordure, mais seulement sur le fond. Nous pouvons le faire en ajoutant une ombre portée avec plus noble et un pixel sur la Why This way, il ne s'applique que sur le fond. Et je dois placer l'Airbnb que je peux. Donc je vais juste changer le sens du réalisateur. Allez à l'image. Je veux que ma photo de profil remplisse l'angle strict. Alors faisons ça aussi. C' est donc le numéro pour la conception de la carte d'inscription. Nous devons d'abord faire en sorte que le rayon de bordure reste pixels. Ensuite, je vais faire le type de liste en majuscules, avoir un peu plus d'espacement des lettres et le rendre encore plus petit. Le prix. Je vais rendre la couleur grise plus claire. Et maintenant, faisons les barres de recherche. Le grand a une couleur de fond blanc et une bordure gris clair, un rayon de bordure et une ombre portée. Je vais ajouter le micro ici. Il existe plusieurs façons d'ajouter des éléments à votre conception. Vous pouvez soit utiliser les téléphones Aiken comme avant aussi ou vous pouvez simplement saisir. Svg Aiken. Je vais monter ça. Je pourrais que je le télécharge précédemment, rendre plus petit placé à l'intérieur du composant de recherche et le rendre génial. La barre de recherche plus petite a la même conception, juste plus petite. Je peux simplement faire un clic droit sur le grand style de copie de la barre de recherche et le baser sur la petite
barre de recherche . Alors je vais rendre l'ombre un peu plus subtile. Ensuite, copiez la recherche que je peux et la rendre plus petite pour le pied de page. Je vais juste changer le champ en blanc, puis au quart supérieur et ensuite les perdre avec. Alors c'est tout. Nous avons fini de concevoir, argumenter la bibliothèque. Nous avons maintenant un système de conception que nous pouvons utiliser dans l'ensemble de notre produit. Voyons à quoi ressemblent nos écrans maintenant, juste en concevant les composants dans la bibliothèque U I avec les écrans sont presque terminés. Comment génial est qu'il n'y a que quelques modifications mineures à faire. Je vais faire ça. Ensuite, dans la leçon suivante, nous allons finaliser le prototype et rendre les écrans réactifs.
8. Étape 4 : Finaliser votre prototype: J' ai donc fait les dernières situations sur les flux que nous avons conçus. J' ai ajouté les images, les Aikens, et commencé tous les écrans. Voyons notre design en direct dans le prototype. Cela ressemble plus à Airbnb qu'à Urban D ressemble à tous en effet. La dernière chose que nous devons faire est de rendre notre design un peu plus réactif avant de terminer le projet. Cela aidera les développeurs à mettre en œuvre nos conceptions en gardant à l'esprit la réactivité. Il nous permet de traduire nos idées et de leur montrer ce qui se passe lorsque l'écran devient plus grand . heure actuelle, notre design n'est pas réactif. Alors réfléchissons à ce que nous voulions ressembler. Donc, nous voulons que les composants qui ont plein avec orteil ont laissé et les contraintes séchées et les autres choses pour rester au centre avec plus petit. Alors faisons ça. Donc, la contrainte jamais et la contrainte floater seraient à gauche et à droite. Et faisons cela pour tous ses composants,
alors le moyen le plus simple de faire rester tout le contenu au centre est simplement de les regrouper tous avec Comanche. Et faisons cela pour tout le centre confiant, et je vais leur donner à tous un centre de contrainte pour cet écran,
cependant, cependant, je veux que l'entreprise évolue avec la taille de l'écran. Voyons donc comment tout s'est passé dans cet écran. Le plein avec Natwar dans Footer, rester à gauche et à droite, tandis que le Continent reste au centre. Dans cet écran, tout évolue lorsque je diminue et augmente l'écran avec, et cet écran est similaire à la page d'accueil, donc mon entreprise est toujours au centre. Ok, c'est pour la réactivité de la lumière entre les points de rupture. Maintenant, quand il y a plus de différences de mise en page entre les tailles d'écran, c'est à ce moment que vous devez concevoir plusieurs tailles. Par exemple, dans la page d'accueil, je ne veux certainement pas garder une grille à trois colonnes sur les tablettes, tailles et les tailles mobiles. Alors faisons une version mobile de toute la salope. Je vais commencer par dupliquer le cadre de la page d'accueil, et je vais affamer ce contenu en frappant le vaisseau de commandement G et le déplacer un peu vers la gauche. Et maintenant, je vais placer les cartes les unes sous les autres. Nous pouvons utiliser les mêmes composants que nous avons créés et cacher certaines couches sur mobile, par
exemple, ici dans le réseau, je veux montrer le nombre, mais je ne veux pas les liens de menu à l'intérieur afin que je puisse juste les cacher. Maintenant que j'ai fait la majeure partie de mon contenu. Si c'est dans la vue mobile, je peux changer la taille de l'image. Avant que je fasse ça. J' ai besoin de changer le comportement de contrainte de tout mon contenu à gauche afin qu'ils restent à gauche lorsque j'ai changé la taille de l'image. Maintenant, je peux le changer orteil iPhone il. Alors je vais lui faire dire le cadre pour le pied de page. Le design va beaucoup changer, donc je vais devoir le détacher de son instance pour changer sa position. Ensuite, je vais juste les déplacer l'un sous l'autre. Chaque titre ici devrait certainement être plus petit sur Mobile. Je ne veux pas que le bouton de recherche s'affiche plus longtemps afin que je puisse simplement le cacher du panneau des calques. Alors c'est tout. Voyons comment ça s'est passé. Comme vous pouvez le voir, nous avons conçu ce site Web avec 99% de composants. C' est la clé pour devenir un grand designer
efficace. N' oubliez pas, avant de finaliser votre projet et de gérer pour les développeurs, assurez-vous que vos couches et composants sont bien connus. Essayez de nommer toutes vos couches pour vous assurer que votre collaboration se déroule bien avec vos collègues. Après avoir fait simplement partager le prototype avec les développeurs afin qu'ils puissent commencer à inspecter la conception et exporter des images. J' ai ajouté ce fichier figure à la description de la classe ici, Frito dupliqué et réutilisé comme vous le souhaitez. Si vous voulez vous défier,
vous pouvez ajouter plus de composants à la bibliothèque d'yeux et continuer à concevoir les autres peaux leur bébé.
9. Réflexions finales: J' espère que vous apprécierez cette dernière. Vous savez maintenant comment concevoir avec le processus de conception idéal. En utilisant des fonctionnalités puissantes de Figments, vous avez appris à construire des cadres métalliques interactifs, construire des systèmes de conception, collaborer avec l'équipe et à transmettre aux développeurs. Vous pouvez maintenant utiliser ce processus dans votre travail quotidien, que vous vous sentiez, répondiez ou travailliez à l'intérieur avant de partir. N' oubliez pas de laisser un commentaire et de partager ce cours avec votre réseau afin que les gens puissent le
savoir. En passant, j'ai un cours complet qui enseigne aux débutants absolus comment devenir vos concepteurs I X. Consultez le lien dans la description. Assurez-vous de me suivre sur Twitter et sur mon bloc moyen où je bloque sur le design. Je vous souhaite bonne chance dans votre carrière de design. Si vous avez d'autres préoccupations, hésitez pas à poster vos questions en
Nicole Saidy, Designer, Coach, Speaker
