Les bases de Sketch : comment concevoir et créer des prototypes à l'aide de Sketch

1. Introduction: Bonjour et bienvenue. Je m'appelle Anna Addition. Je suis un concepteur UX avec des antécédents de développement de faits. Je suis aussi un futur en partage de compétences, et dans la classe d'aujourd'hui, je vais vous enseigner les bases. Sketch Up est l'un des outils de conception professionnels les plus puissants. Il fonctionne avec Mac et utilise un plein de vecteur basé sur les pommes Thea flux de travail pour toutes sortes de créateurs. Que vous soyez concepteur de produit, vous x vous pourquoi concepteur de site Web ou une personne sans compétences professionnelles ou spécialisées ? À la fin de cette classe, vous serez en mesure de concevoir et de prototyper en utilisant l'esquisse. Je vais également partager à la page couverture de l'application mobile désirs pour votre pratique et l'inspiration. Et vous avez appris que certaines des meilleures pratiques d'esquisse fonctionnaient plus efficacement. Alors, nous allons entrer. J' ai hâte de voir ce qu'il crée. 2. Votre projet de cours et des ressources: dans la classe d'aujourd'hui, nous allons créer une conception d'APP mobile à l'aide d'esquisse. Ensuite, nous allons créer un prototype en utilisant ces conceptions. Lorsque vous êtes prêt, téléchargez votre projet dans la galerie. Un projet étudiant complet ne devrait pas aller. Les pages de conception suivantes en format PNG ou JPEG Cover me squash doucement sur S'inscrire pages La page principale que les gens voient après s'être inscrits. Vous aurez besoin des ressources suivantes pour cette classe. Aamodt, Berg et croquis jusqu'à 30 jours d'essai gratuit. Pensez au four que vous voulez concevoir. Vous ne pouvez même pas choisir un existant et le reconcevoir. Ou vous pouvez utiliser le fichier d'esquisse que je partage pour lancer votre projet. Pour vous inspirer des couleurs, n'hésitez pas à utiliser mon tableau d'ambiance de couleur personnel sur Pinterest, alors avançons et apprenons à connaître le croquis. 3. Présentation de l'interface croquis: L' interface de l'esquisse est minime par la conception. Le panneau de gauche affiche tous les calques sont des tableaux et des pages du document. La barre d'outils située en haut contient tous les outils et l'inspecteur d'actions importants sur la bonne façon d'ajuster les propriétés des calques. Enfin, le chimiste au milieu est l'endroit où vous verrez vos dessins. Examinons certains des outils et voyons comment ils fonctionnent ici. Sur la gauche, nous pouvons voir la première page, qui a été créée par défaut. Pour ajouter une nouvelle page, nous pouvons simplement cliquer sur cette icône plus. Nous pouvons créer autant de pages que nous n'étions pas, et pour supprimer une page, nous pouvons simplement faire un clic droit dessus et cliquer sur supprimer pour commencer à concevoir quelque chose dont nous avons besoin dans notre façon de port peut insérer notre bateau à partir de ce coin supérieur gauche, insérez notre port ou en appuyant simplement sur la lettre A sur le clavier. Lorsque nous le faisons, nous pouvons toujours voir les options Dans le panneau de l'inspecteur, les modèles sont d'anciens préfabriqués créés par esquisse pour faciliter le choix de l'appareil à concevoir pour lui déjà. Toute la taille correcte est tout ce que vous devez faire est juste rapide sur l'appareil avec lequel vous voulez travailler, et il va créer un tableau d'art pour vous. Vous pouvez sélectionner des appareils Apple ou Android, des formats de papier Web réactifs ou personnalisés. Une autre façon de créer un tableau d'art personnalisé est trop rapide en glissement. De cette façon, nous pouvons voir ce qui a créé le premier port de sortie ici. Nous pouvons changer le nom et changer la taille de l'aéroport. On peut aller voir l'inspecteur et inclure de nouveaux numéros. Le premier nombre W est pour avec et l'âge est pour la hauteur. Pour changer la hauteur, je n'ai pas mis un numéro différent et appuyez simplement sur Entrée. Ces deux numéros à la baignoire sont pour la position de notre port, donc pour changer la position, nous pouvons changer le nombre. Impressionnez entrer. Ajoutons maintenant quelques couches différentes et jouons avec les outils pour voir comment ils fonctionnent à Adam Rectangle à notre planche entre deux. Appuyez sur la lettre R, puis rapidement et faites glisser pour sur-refouler Oh, puis cliquez et faites glisser à nouveau pour appuyer sur un cercle. Oh, puis appuyez sur Maj, puis rapide et boire ou texte avec appuyez sur garder simplement taper quelque chose par défaut. Ça dit « Tapez quelque chose ». Modifions donc les propriétés de nos formes dans le panneau inspecteur. Vous pouvez changer la couleur de ce cercle, puis faisons la même chose pour leur picotement. Placons ensuite le cercle au-dessus du rectangle pour pratiquer certains de ces outils. Donc, lorsque nous cliquons sur le cercle, il est sélectionné, et ensuite nous pouvons utiliser cet outil pour le Sénat en arrière. Cliquez en arrière, travaillé, puis cliquez sur l'avant pour le ramener. Nous pouvons également regrouper des formes ou les modifier si rapidement et tirer les bords pour créer un conflit. Secouer hors de votre chemin de cercle peut rapidement, n'importe où sur le tableau d'art ou appuyez sur l'édition terminée pour quitter la charge d'édition. Ensuite, nous pouvons faire pivoter, cliquez sur le rectangle appuyez sur Maj et cliquez sur la nouvelle forme complexe, puis masque rapide. Ainsi, nous avons créé notre masque à partir de deux formes. Vous pouvez jouer avec les outils du haut pour voir comment ils fonctionnent pour certains d'entre eux, comme prévisualiser Claude ou exporter. Nous allons les utiliser plus tard dans la classe, alors donnons-leur pour l'instant, mon planning peut sembler un peu différent. Par exemple, ceux-ci je viens ici, je pourrais manquer de votre interface. Et la raison en est que j'ai plusieurs fiches d'esquisse installées et qu'elles fournissent des fonctionnalités supplémentaires . C' est plus mauvais croquis, et je vais le couvrir dans une autre classe. Donc si vous remarquez quelque chose comme ça, ne soyez pas confus. Ceci est la structure de base de croquis était pas aller de l'avant et commencer à concevoir notre application. 4. Partie 1 : concevoir la page de couverture d'App: pour commencer à concevoir le haut. Appuyez sur un pour notre conseil et à partir des modèles sur la droite, je vais choisir l'excès iPhone. Renommons les Sont ennuyés en double-cliquant ici. Non, nous avons besoin d'un retour de la même taille, donc si vous sélectionnez la Tonnelle en cliquant dessus, vous pouvez voir sa taille. Le avec est 375 dans la hauteur est 112. Alors maintenant, nous allons appuyer sont pour rectangle, cliquez et faites glisser, puis nous allons enlever le fausseur et faire la taille exactement la même que notre planche. Donc c'était 375 par 812. Non, je dois aligner une ligne du rectangle avec le conseil ER d'abord, cliquez ici à Alanya horizontalement, puis je clique ici à Lenny verticalement. Alors j'ai besoin de changer la couleur. Donc, je clique sur la couleur. Je peux choisir la couleur d'ici, ou je peux utiliser certaines des couleurs que j'ai déjà dans mon talent pour ajouter votre couleur à votre unité d'appel deux. Rapide cette icône plus ici. Donc je vais choisir ce plus calme et puis je vois qu'il y a différents styles pour les Iraniens. Il a été essayé ceci et voir comment ils fonctionnent. Je vais choisir ce style et pour changer la couleur difficile je clique sur ce cercle, puis descendre à ma palette et choisir cette couleur. Puis cliquez sur le cercle droit quand je descends et choisis cette couleur. Donc maintenant j'ai est remarqué que Cranie int je pourrais faire des changements à ce grand Et en faisant glisser ce bord du cercle deux angles différents, je vais le garder comme ça à partir de maintenant pour ajouter des taxes, appuyons sur le thé sur le clavier et puis tapez simplement le nom de l'APP est un local. Je vais diviser ma taxe en deux parties. Donc, je sélectionne ce prix Commande voir et puis commande être et puis déplacer et la touche fléchée au mouvement. Et cette partie va être conçue. Puis j'ai sélectionné et à nouveau utilisé un décalage et Cherokee pour le déplacer. Sélectionnez les deux parties en sélectionnant la première, puis en appuyant sur le clic rasé et regroupez ces deux parties ensemble. Vous pouvez le nommer local pour l'aligner parfaitement au centre, au milieu de l'œuvre. Au début, appuyez sur cette touche pour aligner horizontalement, puis sur l'Atlantique verticalement. Donc, en ce moment, j'ai ma conception de page Splash dernier aller de l'avant et continuer à concevoir l'application . 5. Partie 2 : Conception des pages d'inscription: Cliquez sur le rig, emmêlé, puis double-cliquez sur le nom pour le renommer et fait. Cliquez sur le symbole de création pour transformer l'arrière en symbole. Appuyez sur OK, et nous pouvons voir que savoir que cet arrière-plan est un symbole. Bientôt, vous verrez comment nous pouvons. Nous utilisons le même élément encore et encore dans notre conception. Alors, cliquez sur Are Your Name, puis appuyez sur la monnaie et le comité pour copier le tableau d'art. Renommons cette deuxième page en page deux, et maintenant nous devons déplacer le logo, puis nous devons le redimensionner. Texte sélectionné et j'ai changé la taille amusante de l'inspecteur. Nous devons déplacer les secondes cartes maintenant cliquer sur le groupe de logo et de nouveau l'aligner horizontalement. Alors présentons un T pour le texte. Qu' en est-il d'une taxe ? Je vais choisir une autre avenue, et la science du texte sera 24. Je suis allé voir un Linus parfaitement au milieu de notre conseil. Vous pouvez sélectionner la signature, concevoir une commande de presse de pièces, être de faire un livre, et donc maintenant nous avons la deuxième page de notre application. Cliquez sur le nom sont nés Presse venir et C commande V deux à venir Nous avons nommé conseil er . Si vous ne renommez pas l'aéroport plus tard, quand vous expert votre monde, il aura des problèmes parce que même seulement supplémentaire ne fonctionnera pas l'un de ceux de nos conseils. Donc non, nous ne créerons pas la cage d'inscription sur la première page. Nous aurons besoin de la voie de bâton de vêtements pliants. Commentaire de presse Soyez pour supprimer la calvitie des regards taxés plaçant la dernière partie pour créer une ligne J'ai appuyé sur la lettre l clic et faites-le glisser ici je peux changer la propriété de ma ligne faisant blanc Je voulais aussi être parfaitement dans le centre Inclure ici. Non, je veux créer un bouton donc j'appuie sur Oh, et Maj clic Indrek a enlevé une bordure faisant maintenant Ici nous avons besoin d'un peu d'ombre parce que c'est trop. Alors faisons quelques changements ici. Je pense que ça a l'air cool. Donc x zéro y zéro dans ce seul et flou. Non, je dois placer une icône sur mon bouton pour ajouter une icône. Je vais au projet connu That escroc dans cette attaque qui fait apparaître des tonnes de différents psychopathe . Je vais choisir celui-ci, et je peux le glisser et le déposer dans mon dossier de croquis. Choisissons la taille pour s'assurer qu'elle est parfaitement au centre du cercle. Donc, laissez à la fois le cercle dans l'icône et puis la ligne il taureaux verticalement et horizontalement , puis ainsi, comme la flèche seulement aller à la section finale de l'inspecteur et utiliser la couleur semble bonne. Alors maintenant, je veux vous montrer comment il peut réellement utiliser notre symbole que nous avons créé précédemment. Il s'agit donc d'un double clic sur l'arrière-plan, qui est notre symbole. Disons que si je veux changer ma couleur d'arrière-plan, je ne le regarde plus, et je passe dans l'humeur de l'édition. Donc ici, je peux sélectionner une couleur différente. Non, revenons voir ce qui s'est passé. Comme nous pouvons le voir dans tous nos conseils sont la couleur de fond a changé, donc c'est la puissance du symbole. Si vous l'avez fait, disons des dizaines de pages différentes, vous n'avez pas à passer du temps pour changer la couleur d'arrière-plan ou tout autre élément encore et encore. Vous pouvez simplement le faire dans un seul symbole et c'est génial. Je ne veux pas revenir à mes couleurs précédentes, donc je vais les changer ici. Bas et la grande chose sur les croquis. Vous pouvez également ajouter vos créateurs en tant que globaux. Donc, comme vous pouvez le voir, lorsque vous cliquez sur cette icône plus, ces exactement même grand et sera ajouté à votre palais et vous pouvez le réutiliser dans n'importe quel autre projet. Non, créons un autre symbole pour rendre notre monde plus rapide. Donc, quand un groupe ces deux ensemble, Mais je vais avoir besoin dans le champ de formulaire de groupe, puis va créer un symbole, je peux cliquer ici ou je peux faire un clic droit et crée un mouvement . De là, je vais garder le nom vendu là où je me sentais. Non, copions et collons ce tableau d'art. Appelons ça notre conseil h 4. Non, comme je peux le voir, la structure est à peu près la même. Mais je veux un autre texte que vous écrivez. Donc ce que je fais parce que c'est un symbole, je clique dessus. Et ici, sur mon inspecteur Pano, je peux changer la valeur. Ce que je fais, c'est que je tape des faisceaux. Appuyez sur Entrée. C' est la puissance du symbole a été copié et coller à nouveau. Voici la page 5 de celui-ci. Celui-ci va être tout mot de passe. Ajoutons également des attaques, d'autres termes et conditions. Retournons à ce tableau d'art et tapons quelque chose comme mon fils. Tu sais. Vous êtes d'accord. Teoh a vu des commissions ? Non. Faisons de cette taxe la taille fixe, puis changé le service. Toi. Modifions la taille de la police et faisons un pixels Tim. Faisons le centrer et la ligne dans le centre. Il suffit de nous copier et de nous coller dans nos propres planches. Ok, alors créons le prochain hors-bord. Les meilleurs chiffres sonne. Confirmer mot de passe Il vous permet de faire juste changer l'année du texte, accord. Il semble que Way ont tous signé des âges. Donc, notre prochaine étape consiste à concevoir une page que les gens voient après avoir configuré 6. Partie 3 : Conception de la page finale: créons pas la page principale que les utilisateurs voient après s'être inscrits rapidement sur ce tableau d'art. Commencer Voir pour copier la commande, être à coller. Chasse le nom de l'aéroport pour appâter. Sept. Retirons certaines des pièces dont nous n'avons pas besoin. Changons de taille pour le rectangle d'arrière-plan pour l'utiliser comme un moyen d'en-tête. Aussi besoin de changer la taille locale. Sélectionnez des parties loup du texte et a changé la taille du téléphone trop 40. Ensuite, déplacons la partie inférieure pour l'aligner correctement. Sélectionnez le groupe de logos qui se déplace vers le haut, puis un éclair au centre du rectangle. Créons maintenant la nourriture. l' Copiezl'arrière-plan avec enchevêtrement. Hé, Stead et vraiment au fond. Ça a changé la taille, et j'ai l'impression que Graydon n'a pas l'air très bien ici. Alors détachez-le du symbole et créons un support différent pour cela. Donc, nous allons sur le terrain au lieu de grand, et je sélectionne ce premier cercle, qui est une seule couleur. Ensuite, je clique sur la pipette à Teoh, choisissez une couleur et sélectionnez celle-ci. Eh bien, ça va être mon pied de page maintenant. Nous avons besoin de quelques icônes pour le pied de page. Supposons que nous avons trois catégories ici. Galerie d'aide dans le profil. Revenez donc au non-projet. Dans le premier, je surge galerie. Voyons ce que nous avons. Je vais choisir celui-là et ensuite aider. Choisissons celui-ci dans le prochain profil. J' essaie d'utiliser des icônes qui sont identiques dans leur style. Essayons celui-là. Maintenant, sélectionnons tout cela par les voitures. Modifiez la taille à 55 pixels, puis le champ de repos et utilisez la couleur. Non, je dois aligner ça. Alors passons rapidement aux outils d'alignement, ce dernier pour l'aligner par le bas, puis pour aligner l'espace entre eux. Une fois que je fais cela, je peux appuyer sur la commande G pour regrouper ces icônes en un seul groupe. Je le renomme deux icônes de pied de page et cliquez sur l'outil d'alignement du milieu pour m'assurer qu'il est parfaitement au centre de la nourriture. Er puis je rapide sur la nourriture ou rectangle appuyez sur Maj et sélectionnez ce groupe et cliquez sur l' autre alignement pour vous assurer qu'il est aligné verticalement dans le pied de page. Maintenant, nous allons créer les principales catégories de notre application je suppose que cette application est pour décider différentes choses comme des bannières , des icônes , des modèles , des logos, etc. Alors créons ces catégories. Appuyez sur sont pour rectangle enlevé le pauvre dîner cliquez sur la couleur du champ. Rob l'outil pipette dans choisi cette couleur très haut de la tonnelle à côté de lui. Allons l'aligner au centre, et ensuite on veut Teoh. Placez un texte dessus. Donc Presti en droit ont conçu. Je veux changer la face de police à Aven ER et a également changé le style trop lourd. Modifions également la taille de la police à 24. Sélectionnez une semaine de tango appuyez sur Shift. Sélectionnez le texte dans une ligne il verticalement. Non, sélectionnons un rectangle et froissons le rayon pour obtenir des coins arrondis, puis appuyez sur Maj . Donc, comme le texte et copier ces deux persévèrent. Le 2ème 1 va être meilleur signe. Nous allons couper l'appât à nouveau dans celui-ci est conçu. La catégorie suivante est la conception d'icônes et la conception locale. Donc, pour la seconde avec 10 bas, je vais choisir une couleur différente en essayant de créer le même grand. Ça s'emmêlerait. Oui, prenez le sélecteur de couleurs et choisissez la couleur. Non, sélectionnons les calques de texte. Vous connaissez ces catégories et vous les avez alignées vers la gauche en cliquant sur l'alignement de gauche. Non, nous voulons ajouter quelques motards pour le rendre visuellement plus attrayant. Revenons au non-projet dans La première chose est la conception de site Web était de concevoir. Choisissons cette icône pour que la prochaine planifie mieux le design parce que je vais choisir celui-là. La prochaine chose est la conception de motif pour l'amour du temps. Je ne choisis pas les icônes parfaites. Voyons ce que nous avons pour la conception d'icônes. J' essaie de choisir des icônes qui sont identiques dans le style. Nous n'avons pas beaucoup d'options pour que je ne puisse pas concevoir, je pense. Ok, allons-y. Et Leslie. Design local. Eh bien, design local. Choisissons celui-là. Maintenant, sélectionnons toutes ces icônes et modifions la taille pour rectifier les pixels. Et puis nous allons les aligner vers la droite. L' étape suivante consiste à cliquer sur le champ et à changer la couleur en blanc ou quelle que soit la couleur qui vous convient . Donc maintenant, nous pouvons voir que ça a l'air mieux avec les ICO. Eh bien, je veux en faire une charge. Un peu plus petit, peut-être 50 pixels dans La dernière chose que nous voulions est de nous assurer que chacune des icônes est alignée au milieu de ce rectangle. Donc, sélectionnez un rectangle, cliquez sur l'icône et l'aligner en ligne au milieu et faites-le pour chacun d'eux. Maintenant, nous avons notre page prête. Nous n'allons pas concevoir l'application entière car cela prendrait beaucoup plus de temps. Mais j'espère que cela vous a suffi de comprendre comment fonctionne le croquis. Donc, notre prochaine étape est d'utiliser cette page est de créer un prototype. 7. Partie 4 : Prototyping: avant le prototypage. Je veux vous montrer comment vous pouvez explorer votre travail rapidement sur les caméras et faire glisser pour sélectionner tous vos ports, puis rendre rapide exportable sur la droite. Vous voyez ces modèles sur notre tableau. Cela signifie que l'arrière-plan est transparent. Il montre qu'il y a un fond blanc, mais quand il est expert, il va être transparent. Donc, nous sélectionnons la couleur Bagram et vérifions inclure en expert. Cela vous assurera qu'il n'est pas transparent, mais il est en fait blanc, sorte que vous pouvez scories, puis cliquez sur expert dans le coin supérieur droit. Et si vous cliquez sur expert, vous pourrez exporter votre travail en PNG. Ici, vous pouvez sélectionner le format que vous voulez un expert. Il peut être pané. Vous J pack étaient différents. Vous voulez créer un prototype clic sur l'art pour cela ? Vous voulez commencer par, puis placer un point chaud dessus. âge de la presse. Cliquez et faites glisser la zone que vous voulez un rapide sur, et quand vous le faites, vous aurez ce que je peux entendre. Si vous cliquez dessus, vous serez en mesure de voir toutes les pages afin de sélectionner la page vers laquelle vous voulez naviguer. A partir de ce point ce cas, c'est Page deux à nouveau avec l'âge de la presse et mettre un point chaud sur l'inscription, qui va être un lien vers cette page suivante. Ensuite, placez un point chaud sur la troisième page à la suivante dans la même chose pour les autres pages. Non, voyons comment fonctionne ce prototype. Rapide sur la première, notre carte que vous avez commencé, quoi et ensuite comme aperçu pour voir avec un prototype et nous allons tester. Comme nous pouvons le voir, cela fonctionne selon les points chauds que nous pourrions. Vous pouvez également télécharger votre travail dans le nuage d'esquisse et le partager avec le reste de votre équipe. 8. Réflexions finales: Merci beaucoup d'avoir pris ça. En plus, j'espère que vous l'avez apprécié. N' hésitez pas à me contacter si vous avez des questions ou des commentaires. Employé, partagez votre projet dans la galerie de cette maison. J' ai hâte de voir ton travail.