Création d'applications mobiles de A à Z avec Sketch 3 - Partie 2 (bases de la UI Design) | Maxime C | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Création d'applications mobiles de A à Z avec Sketch 3 - Partie 2 (bases de la UI Design)

teacher avatar Maxime C, Entrepreneur and Designer

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Bienvenue dans la partie 2

      0:46

    • 2.

      Lignes directrices iOS

      5:45

    • 3.

      Croquis pas à pas 3

      3:20

    • 4.

      Jouer à LEGO

      8:24

    • 5.

      Les bases du texte

      4:09

    • 6.

      Les bases des couleurs

      3:21

    • 7.

      Alignements et grille

      4:46

    • 8.

      Insérer des images

      2:14

    • 9.

      Buttons de design

      6:36

    • 10.

      Temps pour la pratique - Flux de la caméra

      3:54

    • 11.

      Correction d'exercices - Flux de la caméra

      4:23

    • 12.

      Aperçu sur votre appareil avec Sketch Mirror

      2:21

    • 13.

      Exportation des planches

      4:04

    • 14.

      Icône design v1 d'application

      4:08

    • 15.

      Projet de la partie 2

      0:45

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

1 295

apprenants

3

projets

À propos de ce cours

La clé pour créer une application réussie est de faire quelque chose que les gens veulent et qui fonctionne. Et c'est vraiment ce dont le design est question. C'est pourquoi ce cours ne se limite pas à créer une jolie application, il s'agit de créer un produit qui a du sens pour les gens et qui est beau.

Dans ce cours de 3 heures, nous vous enseignerons un flux de travail complet de design qui vous permettra de transformer votre idée en application mobile entièrement pensée et attrayante à l'aide de Sketch 3.

Ce cours est enseigné avec un exemple. Chaque leçon représente une étape du processus de design qui sera appliquée à l'application que nous allons créer afin que vous ayez une compréhension claire de tous les principes de design qui seront discutés.

Le cours est divisé en 3 parties, assurez-vous de vous abonner à toutes :

Dans la partie 1, nous nous focaliserons sur les techniques de recherche UX qui nous permettront de nous assurer de créer une application attrayante, quelque chose qui fonctionne vraiment et qui a du sens.

Dans la partie 2, nous traiterons des bases de la conception d'interfaces utilisateur. Nous allons apprendre à utiliser Sketch et créer une première version de votre application, en utilisant principalement des éléments standard iOS. Le mot clé ici sera l'efficacité.

Dans la partie 3, nous prendrons le temps d'aller plus loin dans l'interface utilisateur personnalisée, les techniques de croquis avancées, la Design d'icônes et beaucoup d'autres surprises en créant une version finale de notre application.

Rencontrez votre enseignant·e

Teacher Profile Image

Maxime C

Entrepreneur and Designer

Enseignant·e

I'm an entrepreneur and web and mobile app designer. I've created 2 startups. I teach entrepreneurship and design at SciencesPo, a top school in Paris. I'm also a UX consultant and interface designer, I work mainly with startups.

I strongly believe in the power of teaching by example and my goal is to make sure my students will be able to use the skills I teach them immediately.

Voir le profil complet

Compétences associées

Design Design UI/UX Design pour mobile

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Bienvenue à la partie 2: Bienvenue de retour. Juste un rappel rapide. Il s'agit bien sûr de la deuxième partie d'une troisième partie . Alors assurez-vous d'avoir pris la première partie avant de plonger dans la fête. D' accord. Dans cette partie va concevoir une première version off. Notre APP se concentrera sur l'efficacité pour avoir un prototype sur notre conception dès que possible. Le but ici est de voir les choses telles que nous les imaginons. Alors que l'écriture des histoires est logique pour vous sur les gens que vous montrez ce premier conçu pour Si vous n'avez pas noté les combats étudiants pour le cours dans la première partie. Assurez-vous que vous le faites. Maintenant, dans la section de prédiction de classe. Comme je l'ai dit, vous n'avez besoin de le faire qu'une seule fois. Il y a tout ce dont vous avez besoin pour les trois parties du cours maintenant je vis ici avec mon bon ami. Un espace de concepteur incroyable pour les prochaines leçons sont amusantes 2. Directives sur iOS: dans cette vidéo, nous allons parler des directives IOS. Chaque nouveau système d'exploitation apporte une série d'éléments différents qu'Apple vous encourage vraiment à intégrer dans votre design. Vous pouvez trouver les anciennes directives officielles à cette adresse éléments est que les utilisateurs d'iPhone sont déjà habitués à interagir avec eux car ils les trouvent déjà dans l'application de chaque pomme comme leur norme Apple, vous et votre développeur sera Derrick Lee les trouver dans X Code, le logiciel utilisé pour développer IOS APS sans avoir à exporter des éléments. C' est aussi génial parce que vous trouverez de nombreux fichiers d'esquisse réalisés par un grand designer avec tous ces éléments pour ouvrir un aperçu. Le nom de fichier IOS huit. Tu l'aimes dans ce dossier de leçon. Ce fichier est fait par une grande entreprise de design canadienne nommée T Home manque qui a été acquis par Facebook depuis lors. Il vous fournit parfaitement des éléments de conception qui peuvent être utilisés dans votre conception. Ces fichiers sont un excellent moyen d'apprendre comment les choses sont construites, alors prenez quelques secondes pour jouer avec ces éléments. Pour faire référence aux mêmes mots, vous devrez vous habituer à diss lexical en haut de chaque écran, vous avez la barre d'état. La barre d'état affiche des informations en temps réel concernant votre connectivité, l'heure ou le niveau de l'arbre du Tibet. Le texte peut être facilement noir ou blanc, mais pas dans la couleur que vous voulez. L' arrière-plan peut être défini à ce transparent, sorte qu'il aura la couleur de votre barre de navigation. Il mesure toujours 44 pixels de haut et étiré, selon l'intelligence de l'écran. Pour une application très immersive, comme un jeu, vous pouvez choisir de cacher le fil des étapes. Mais méfiez-vous. Si votre application utilise une connexion Internet, les utilisateurs peuvent ne pas deviner qu'ils aiment leur connexion. S' ils ne voient pas leur statut, barre-moi juste jusqu'à la barre d'état. Il y a une barre de navigation ou une barre de navigation. La barre d'écrou affiche généralement l'action liée aux années d'écoulement. Très souvent, vous verrez un bouton de retour sur la gauche et la date suivante ou la date de valeur sur la droite. La barre naff pourrait être colorée avec le coupon 10 Les gens choisissent souvent de mettre la couleur leur Brent. L' état est la guerre et assez barre ensemble sont 100 à nouveau huit pixels de haut. Nous vous recommandons vraiment de vous souvenir de ce chiffre que j'étais aussi. Utilisez-le assez souvent pendant le cours en bas de l'écran, vous pouvez utiliser la barre d'onglets supérieure vous permet de basculer entre différentes sections de votre application qui ne sont pas liées les unes aux autres car il est vraiment proche de votre pouce. La barre supérieure contient généralement en principe l'action de votre application. Comme ouvert l'accès de la caméra que vous avez ouvert votre flux d'accueil ou Booker Uber Top Bargain contient jusqu'à cinq onglets, et il est 99 PC haut. Il est totalement personnalisable si nécessaire. C' est un modèle de pièce commun qui est vraiment efficace, mais comme presque tout le reste, ce n'est pas obligatoire. Dans les sketches de l'Iowa, vous trouverez beaucoup d'autres éléments que je représente. En fait, vous avez probablement votre application comme nouvelles informations de partage. Apple News Tender est d'avoir chaque icône contour. Mais bien sûr, et on verra ça plus tard. Vous pouvez personnaliser qu'il s'agit d'un bouton de commutation. Il est utilisé comme un vrai bonbon pour un Enough, par exemple, est l'outil parfait pour basculer les notifications dans les listes déclarantes. Les listes sont moyen d'organiser le contenu ici, vous devez exemple de liste. Cet élément est appelé segment et contrôle. Il peut inclure deux ou trois sections à ce paramètre. Vous l'utiliserez lorsque vous aurez besoin de votre plus facile de faire un choix entre deux options qui peuvent être sélectionnées ensemble. Par exemple, si vous demandez, hum, um, si son enfant est un garçon ou une fille comme filtre, vous, vous l'utiliserez en haut de l'écran pour créer dans le même écran deux ou trois listes de différents articles. Par exemple, il est utilisé en haut de la liste des notifications. Cette interface est Golden Action Ship. C' est une façon de proposer une solution différente à une action. Par exemple, dans l'application de messagerie. Si vous voulez répondre à un e-mail, vous devrez choisir entre répondre, répondre tout ou transférer. La barre de recherche peut se trouver en haut de la liste ou directement dans la barre de navigation. Selon votre cas d'utilisation, vous devrez choisir la meilleure option. Ah, claviers américains sont des standards et ont toujours la même haine dans l'Iowa. Vous pouvez définir une couleur spécifique pour être la couleur active, la couleur qui sera affichée lorsque le fond est actionnable par défaut. C' est un bleu électrique spécifique, mais vous pouvez voir du rose dans l'application de musique ou du jaune dans l'application de notes. Par exemple. Vous pouvez choisir la couleur de votre marque si vous voulez aller plus loin dans les directives IOS, nous vous recommandons vraiment de tromper un designer nommé Manto on Medium. Voici le lien. Si vous créez votre propre application, commencez par choisir les différents éléments dont vous avez besoin pour la concevoir. Vous devrez peut-être être un peu créatif, mais vous pouvez vraiment trouver un moyen de faire presque tout ce dont vous avez besoin. C' était les éléments standard. Maintenant que vous connaissez le plus ancien nouveau lexical dans la leçon suivante, nous allons utiliser ces éléments pour concevoir une première version d'Instagram suivant les directives Onley IRS . 3. Croquis de marche 3: donc bienvenue à cette partie du cours. Nous allons commencer à concevoir l'interface réelle. Alors ouvrons, esquissons et créons un nouveau document. Ne paniquez pas si je n'entre pas dans les détails plutôt que de vous montrer comment tout fonctionne en ce moment , je vais vous montrer les outils dont vous avez besoin et comment les utiliser comme nous avons conçu. Pourtant, ce n'est qu'un aperçu général. esquisse est divisée en quatre parties au centre. Vous avez une toile de dessin illimitée sur le dessus. Vous avez une barre d'outils était une fonction principale. Vous devez dessiner et créer des formes. Ainsi, par exemple, nous pouvons dessiner un rectangle. Cliquez sur Insérer le rectangle den de forme, cliquez et faites glisser pour dessiner un rectangle à la taille que vous voulez. Maintenant, il crée également une nouvelle forme d'insert ovale. Nous pourrions aussi président ou O sur votre clavier. En tant que raccourci. Vous pouvez plus facile drone roman ou cercle parfait en maintenant Shift pendant que vous faites glisser. Ces deux icônes vous permettent de regrouper et des objets de groupe ONU ceux que vous effectuez un zoom avant et un zoom arrière . Les icônes des anciens doivent transformer Une forme de l'éditeur les utilisera plus tard dans le cours. Dysfonction appelé Muro est l'un des meilleurs croquis de chose. Il vous permet de prévisualiser un design en temps réel sur votre appareil, mais nous avons une écoute dédiée pour cela. Sur le côté droit, vous trouverez des séances plus anciennes pour modifier votre forme. Voici les coordonnées de votre objet là vraiment utile lorsque vous voulez faire un design parfait pixel . Il s'agit d'une dimension de votre objet. Le casier au milieu vous permet de garder la proportion de votre forme pendant que vous la redimensionnez . Nous pouvons définir l'opacité et,bien sûr, bien sûr, les couleurs que vous pouvez séparément dit la couleur hors de la bordure et la couleur du champ. Comme vous pouvez le deviner. Il y a aussi une section dédiée couleurs dans ce cours pour montrer vieux étonnant poursuite S'il vous plaît croquis. Trois. Ci-dessous sont les ombres. C' est un peu vieux de l'époque, mais il y a encore une bonne chose à faire. C' est Shadows qu'on dessinait ? Vous avez peut-être remarqué que chaque forme que nous avons conduit de l'énergie a généré un menteur sur le panneau de gauche . Dans l'esquisse, chaque forme est un calque. Vous pouvez les déplacer dans votre liste de calques pour les placer en arrière-plan ou au premier plan . Ainsi, par exemple, si je mets le rectangle en haut de la liste des calques, il sera en haut du cercle dans le canevas pour masquer un calque. Cliquez sur l'icône qui apparaît à côté de son nom, et lorsque vous voulez geler un calque, faites un clic droit sur le nom latent et sélectionnez chance. Je sais que c'est beaucoup d'informations pour la première marche à travers, mais vous verrez qu'à la fin du cours, vous saurez ce que représente chaque icône. ce moment. Prenez quelques minutes pour jouer avec les différentes fonctions, et quand vous pensez être prêt, passez à la vidéo suivante, où nous commencerons à concevoir la première version de l'APP. 4. Jouer LEGO: afin de continuer à voir simple, inefficace. Dans cette leçon, nous allons concevoir l'aversion sur Instagram en utilisant des éléments standard Onley. conception standard est la première étape avant la conception hybride et la conception personnalisée. La norme conçue suit les directives IRA en utilisant Onley, éléments iose, iconographie et l'interface utilisateur. C' est ce qu'Apple utilise dans les anciens points d'accès, mais c'est aussi ce que les autres entreprises aiment. Qu' est-ce qui se passe ? Par exemple, le design hybride se combine-t-il ? Êtes-vous des Occidentaux avec des éléments personnalisés tels que des flux ? Des icônes appelées ? Beaucoup de succès comme Twitter, Facebook, Pinterest ou instagram utilisent la conception hybride. Enfin, il y a aussi un exemple de design personnalisé avec des gestes de nouvelles, des UX innovants et totalement personnalisés. Vous je Snapchat tinder ou papier Facebook sont un bon exemple de conception personnalisée. Nous vous recommandons fortement de commencer à concevoir a été tourné parce que c'est la meilleure façon d'être efficace. S' il est facile à concevoir, il sera facile à développer et vous pourrez rapidement tester votre produit avec de vrais utilisateurs . Si les gens commencent à aimer ce que vous construisez avec des normes, vous aurez tout le temps. Vous devez améliorer votre conception avec leurs commentaires. Donc pour l'instant, nous allons juste jouer à Lego et tout ce que vous devez savoir est comment copier et coller ouvrir le fichier Lane Instagram I West Under Kit dans ce dossier de leçon Voici tous les éléments allaient utiliser pour construire notre application Maintenant génial. Un nouveau document était fin commune ou si je savais, nommez-le Instagram A U. S normes. Nous allons commencer par concevoir le premier écran Pour cela va créer un tableau impair avec exact que j'ai mentionné souvent iPhone six écran clic sur le bord sur la droite, vous pouvez remarquer que croquis suggère automatiquement nos tailles de conseil. Vous pouvez vous asseoir X écran d'iPhone, six iPad, ordinateur de bureau et toutes sortes d'icônes. Pour cette leçon, nous allons sélectionner iPhone six portrait nommé l'écran d'accueil Art Board en cliquant sur son nom dans la liste des calques. Vous pouvez également utiliser un raccourci. Les commentaires sont de renommer un calque. Maintenant, jouons à Lego et mettre les éléments sont leur emplacement exact. Nous allons commencer par la barre de navigation, aller à l'autre fichier et copier l'ensemble du fichier de commutation de groupe de barre de navigation et le baser. Placez-le sur le dessus de votre hors-bord. Voyez comment le croquis vous aide à mettre en place. Bon thé, le dissenteur de la ligne rouge nous dit. Le bloc est bien centré, et ceux sur les sites indiquent que les deux côtés du bloc touchent les âges de l' hors-bord. Si l'élément que vous essayez de sélectionner est dans un groupe, vous devrez peut-être accélérer plusieurs fois pour l'atteindre. Cliquez sur le bouton de retour dans la barre de couteau jusqu'à ce que vous ne sélectionnez que le bouton de retour. Vous pouvez également maintenir un commentaire pendant que vous parcourez le groupe dans le canevas pour sélectionner directement les éléments que vous voulez. Il y a aussi un moyen de le faire est de sélectionner l'élément dans le groupe directement dans la liste des calques . Supprimez le niveau arrière et la flèche comme nous n'en aurons pas besoin pour l'écran, renommé le titre de la barre naff Instagram et nommons le bon niveau direct. Maintenant, revenez à l'autre fichier avec l'ancienne ressource est ces cinq narrations correspondent à cinq flux différents. C' est pourquoi Instagram choisit d'utiliser l'onglet. Sont était cinq robinets que leur système de navigation. Chaque histoire aura son propre onglet pourrait être l'onglet entier. Notre groupe joue la barre supérieure en bas de l'écran. Cette fois, nous allons utiliser les flèches pour ajuster la position de l'élément. Si vous appuyez sur un étroit sur votre clavier, votre objet déplacera un pixel dans la durée des seins arabes. Si vous maintenez la touche Maj tout en faisant cela, elle déplacera 10 pixels par Dell Pixels. Sélectionnez la première histoire. Ce sera la première étape que je veux prendre, partager de belles images, copier et coller dans votre fichier. Ce sera notre rappel. La possibilité de prendre de belles photos est notre principale caractéristique, sorte qu'il serait placé dans la caméra droite centre dans l'icône au centre de la barre Tep. Faites la même chose avec le deuxième récit. Je veux voir des photos de mes amis. Ce sera nos propres pieds à la maison en dessous du premier onglet à gauche. Je veux voir les heures d'images des autres, troisième récit, et ce sera notre onglet d'exploration, accord. Explorez sur le deuxième onglet, vous pouvez maintenant apporter moins de récits. Je veux en savoir plus sur les gens. Activité sur l'APP est notre histoire habituelle forcée et sera notre quatre étape Enfin, comme nous voulons également avoir accès à ce que les gens voient de moi profil droit ci-dessous le dernier arrêt sur les droits. C' est ça. Nous avons toute la navigation. Maintenant, apportons le contenu. Il y a une règle très simple que vous devez garder à l'esprit lors de la création de vos écrans. Le contenu est roi. Qu' est-ce que je veux dire par là ? Presque partout, un AB de Mumbai n'est pas au courant. Un autre outil pour gérer le contenu derrière le terme contenu. Il y a une grande variété de chants et de formats. Il peut s'agir de messages d'information et de formations sous forme de textes, de photos, photos, graphiques, représentations ou même de cartes. Les actions les plus courantes à nouveau sont la création, consultation, le partage et la gestion du contenu. Il peut être intéressant de vous demander pour chacune de votre montre d'écran en essayant de faire avec votre contenu. Dans notre cas, le contenu est des images, en fonction de ce que nous voulons que l'utilisateur fasse. Nous voulons afficher des images de la même manière qu'ils seront grands quand le conseil d'utilisateur eux et plus petits quand il les partage. Alors que nous construisons le flux d'accueil, rendons le contenu aussi grand que possible. Dessiné un bord carré à bord. N' oubliez pas de tenir des trucs. Pourquoi faire glisser pour le garder place carré à zéro dans X dans 148 N. Y. Maintenant, tant que contenu secondaire, va jouer une image de profil de l'utilisateur qui a posté l'image. Allez à insérer une forme. mal joue la souris dans le coin supérieur gauche de la place. Tu viens de ramer maintenant. Cliquez et faites glisser jusqu'à ce que vous atteigniez le bas de la barre de navigation. N' oubliez pas de maintenir le décalage pour maintenir les proportions. Maintenant, vous devriez avoir un roman qu'il est situé juste entre la barre de navigation, la photo et le bord de l'écran. Nous allons jouer la même marge autour des ovales et de ces trois éléments. Pour ce faire, nous allons redimensionner l'ovale par le centre. Sélectionnez l'ovale, cliquez sur une poignée dans un coin appuyez sur Maj et vers l'arrière jusqu'à ce que vous voyez que la marge est de 15 pixels à vérifier. Si nous avons bien fait notre travail, vous pouvez sélectionner l'ovale et appuyer sur lorsque vous sur ou les autres éléments avec votre souris. Il vous montrera la distance entre les deux objets. Ici, nous avons 15 sur la gauche, 15 sur le haut et 15 sous le bas. Il semble que ce n'était pas si mal dans cette leçon. Nous avons donc comment jouer Lego avec des éléments. Comment les jouer et traiter les marges entre eux. Dans la prochaine leçon apportera un peu de texte dans ce haut et rappelez-vous, le contenu est roi. 5. Les bases du texte: dans cette leçon, nous allons insérer du texte dans notre maquette. C' est peut-être l'une des leçons les plus faciles. Comme vous le savez déjà, la première partie du cours est axée sur l'efficacité, donc nous prendrons le temps. J' ai parlé de la typographie et de Karen plus tard dans ce cours. Mais rappelez-vous, quelques choses. N' utilisez pas plus de deux ou trois téléphones dans votre conception lorsque vous ne savez pas quoi financer. Pour choisir Big Helvetica et 11 pixels est la hauteur minimale que vous pouvez utiliser en ligne par les appareils. Maintenant, revenons à notre conception comme nous l'avons laissé, nous avons déjà placé un espace réservé pour les images si bien maintenant joue les blocs de texte aller à insérer dans le texte. La prochaine fois, nous allons juste appuyer sur le court get tea a dessiné un bloc de texte sous la barre naff. Ça n'a pas besoin d'être extrêmement précis. Pourtant, dans ce texte, bloc affichera le nom de l'utilisateur qui a posté l'image. Disons pour cet exercice que notre utilisateur s'appelle Michael Jordan sur le côté droit, vous pouvez définir l'avant de votre texte. Vous n'avez pas toujours clair et facile à lire ? Ce n'est pas très original, mais il fonctionnera parfaitement pour nous définir la taille dans Helvetica 16. Mais dans ce cas, nous voulons également que le nom de notre utilisateur soit cliquable afin de découvrir son profil. C' est une règle courante dans la conception mobile d'utiliser des téléphones moyens ou gras lorsque vous voulez que les textes soient cliquables, donc nous choisirons le moyen dans le meilleur. Vous l'auriez souligné, mais ça a l'air un peu vieux de nos jours. Faisons la même chose en dessous de l'image. Presti pour ajouter un bloc de texte dessiner un en dessous de l'image dans le 1er 1 mettra le nombre de vols. Donc, disons que nous avons reçu 1234 likes. Et dessinons un autre bloc de texte pour les commentaires. Disons dunk hashtag n b A. Le commentaire contient des mots qui ne sont pas cliquables, donc nous laissons le devant comme régulier. Ok, maintenant nous allons savoir quel téléphone utiliser Instagram pour son logo. Nous pourrions demander à Google quel téléphone utiliser Instagram pour ce logo et avoir notre insert, mais vous n'aurez pas toujours les réponses, alors nous allons voir comment traiter le téléphone. files d'attente dans le nouveau logo sont faites sur mesure, donc nous allons utiliser le précédent Lego go go sur Google pour trouver le logo Instagram dans une image, enregistrez-le sur votre bureau si nécessaire. Recadrer l'image pour ne conserver que le texte. Maintenant, allez à ce que différent et téléchargez votre vainqueur. Quel différent vous demandera de taper la lettre qu'il n'a pas reconnu sein Suivant et nous y allons . Instagram Utilisez un téléphone nommé Billabong. Maintenant, recherchez Billabong, Front sur Google. Alléluia ! C' est gratuit. Vous pouvez le télécharger, mais c'est déjà nouveau dossier pour cela. Écoutez, allez dans le dossier et double-cliquez sur le fichier billabong. Votre Mac va ouvrir sieste nommé annuaire téléphonique, Cliquez sur Installer le filmé, et ici vous allez. Si vous utilisez des téléphones personnalisés, vous devez les donner au développeur, et nous vous recommandons fortement d'utiliser des téléphones Web Freon dans le dossier. Nous avons également laissé tomber quelques téléphones gratuits cool que vous pourriez utiliser maintenant que nous avons ajouté le téléphone croyant . Nous pouvons changer le titre de la barre naff avec le logo d'Instagram, double-cliquant sur assez groupe de barre jusqu'à ce que vous puissiez modifier le titre, puis offre le téléphone de Helvetica à Billabong dit la taille à 35. Bien sûr, ce n'est pas le logo exact d'Instagram, mais cela fonctionnera certainement pour notre prototype. C' est ça enlevé. Coupe est encore un peu rude, mais il commence à ressembler à une véritable application. Nous apporterons un peu de couleur dans la prochaine leçon. 6. Les bases de la couleur: dans cette partie du cours aura sur les couleurs d'une manière très pratique, donnera plus de détails sur la théorie des couleurs, comment être les couleurs, harmonie et bien plus encore dans la deuxième partie du cours à ce niveau sera juste utiliser un couleur d'arrière-plan sélectionné après la barre de navigation sur le côté droit, vous pouvez voir que son champ était blanc. Cliquez sur l'aperçu des couleurs ici. Vous pouvez voir que nous sommes sur l'onglet couleur plate. Nous resterons ici pour le moment. Grosse la couleur que tu veux. Si jamais vous rêvez de voir l'orange instagramme, c'est votre moment de gloire. Lorsque vous mettez votre corps en couleur, vous devez tourner votre barre d'état en blanc. Cette opération sera un bon résumé de ce que nous avons appris jusqu'à présent. Choisissez la barre d'état avec des textes blancs aux États-Unis Vous l'aimez co payer et basé sur le tableau d'art. Mettez-le dans le bon dossier barre Naff. Masquez le noir en cliquant sur le contexte II à son nom. Si tu veux. Sénateur parfaitement utilisé l'heure ou le mettre sur 00 que notre fond noir aide à placer leur barre d'état va le garder et a dit qu'il est couleur comme transparent total. Sélectionnez l'arrière-plan de votre ensemble sa barre et a dit l'opacité à zéro. Impressionnant. Et si vous voulez que votre instagram soit une réplique totale de l'original ? Sketch comprend un sélecteur de couleurs étonnant qui vous permet de prendre une tente là où vous voulez sur votre écran. Evan. Si elle est hors de l'APP, c'est une fonctionnalité qui peut vous faire gagner du temps car vous n'avez plus à faire glisser une image pour esquisser sélectionner sa couleur. Ouvrez le dossier de cette leçon. Vous avez une capture d'écran de l'application Instagram real. Ouvrir c'était l'aperçu. Ensuite, revenez au croquis. Mettez cette capture d'écran côté à paris latéraux rattraper en redimensionnant les deux fenêtres. Cliquez sur l'arrière-plan de votre barre de navigation, puis cliquez sur la couleur, puis sélectionnez le sélecteur de couleurs. Maintenant, cliquez où vous voulez dans la barre naff de capture d'écran. Ici, tu y vas. Vous n'utilisez pas le bleu Instagram officiel dans votre application. Comme vous pouvez le deviner, nous allons utiliser cette couleur plusieurs fois, donc nous allons l'enregistrer en cliquant sur le plus pour l'ajouter dans notre bibliothèque Squatch. Maintenant, mettez tous les techs qui sont applicables dans ce bleu, comme le nom de notre utilisateur, le nombre off likes et le hashtag dans notre équipement. Prenons aussi quelques secondes pour policier ce que nous avons fait jusqu'à présent. Disons que ces taille amusante à 16 a tourné un titre en blanc et l'étiquette directe, aussi. C' est ça. Nous savions faire face aux couleurs. Si vous avez un projet personnel, sélectionnez l'appel que vous ne voulez pas et enregistrez-le dans vos commutateurs. Dans la leçon suivante, nous allons apprendre à aligner parfaitement les objets en créant un nouvel écran. 7. Alignements et grille: dans cette leçon, vous verrez comment utiliser les outils d'alignement. Ils sont vraiment utiles et très faciles à utiliser. Maintenant que nous avons rompu, l'écran d'accueil va regarder l'écran de l'expo. Sélectionnez l'écran d'accueil hors-bord. Vous pouvez cliquer directement sur le nom de l'arbol dans le cannabis Selected Copiapo board était venu , voir, et basé il était à venir. V Renommez-le en appuyant sur commun sont nommez-le. Explorer écran, cliquez sur la barre de couteau pour renommer le Type, explorer et dit le téléphone retour dans un Levitique 17 médium. L' écran nous permet de prendre de nombreuses photos à la fois. Donc, au lieu d'avoir une image au milieu affichera convenu de vignettes, a fait tout ce que nous n'avons pas besoin d'une telle pile et des espaces réservés. Maintenant, nous allons nous mettre d'accord sur les mâles ont dessiné un carré et le redimensionner à 125 pixels par 125 pixels. N' oubliez pas que si vous voulez conserver des proportions, vous devez appuyer sur Maj car vous voyez que le style par défaut de l'esquisse pour les formes est un gris clair en arrière-plan dans un gris foncé pour la bordure. Nous allons dessiner de nombreux carrés sans bordure dans cette leçon, donc Voyons comment nous pouvons modifier le style par défaut. Sélectionnez cette requête juste vrai et vérifiez les livres Border Maintenant cliquez sur Modifier et ledit style comme par défaut. Maintenant la forme plus ancienne Will dro n'aura pas de frontières. Nous allons rivaliser sur la place et la baser. Vous pouvez plus facile copier coller avec venir et voir et venir. L' envie ou la sécheresse a traîné l'élément en appuyant sur. Copiez trois carrés où vous voulez. Dans le hors-bord joue le bord gauche d'un carré sur la bordure gauche de la planche d'art et le bord droit d'un autre carré sur la bordure droite de Thea Porter. Maintenant, nous allons utiliser les alignements pour et laisser la magie se produire. Sélectionnez les trois carrés et alignez-les sur le dessus, en appuyant sur ce bouton. Vous voyez, tous les éléments sont maintenant alignés. Maintenant, gardez le carré de rue sélectionné et cliquez sur le premier bouton dans l'œil Outils de ligne dans d'autres pour distribuer les éléments horizontalement. Il est bouton et la capacité de mettre exactement le même espace entre les différents éléments. Maintenant, nous pouvons dupliquer la première ligne ci-dessous et créer notre grille. Super. Maintenant que nous savons comment utiliser l'outil d'alignement, nous allons voir une autre façon de faire la même chose, et nous allons commencer par supprimer tout ce que nous venons de faire. Il suffit de garder le premier carré dans le coin gauche. Nous allons utiliser l'outil de grille, cliquez sur orange et faire grille, ledit Rosaires. Quatre était une marge d'un pixel et ledit colonnes avec trois avec un choix sur la marge. Cliquez sur Megret. Sélectionnez tous les rectangles que vous avez créés dans le panneau de gauche et alignez-les visuellement avec la photo de l'autre tableau d'art. Finissons le travail correctement maintenant sélectionner tous les terminaux dans la liste des calques et les grouper en cliquant sur ce psycho nommé le Dragon de grille de groupe. Déposez ce groupe sous l'onglet de navigation sont dans la liste de retard. Revenez à Instagram. IOS avéré fichier enfant Pour apporter la barre de recherche Coupet et basé dans votre tableau impair. Placez-le bord à bord sous la barre de navigation. Faites la même chose pour le segment et le contrôle. Remplacer la Labelle gauche par des photos. Cela va épuiser l'affichage des photos aléatoires. Je peux Breaux et remplacer le droit que j'ai construit par les gens. Cela affichera les personnes recommandées que je peux suivre. C' est ça. Eh bien, maintenant vous savez comment aligner, objetter et dupliquer des objets pour vivre des règles spécifiques. Ces deux-là sont si utiles que nous allons les utiliser beaucoup dans le cours, donc n'ayez pas peur. Si vous avez des difficultés à les utiliser, vous vous habituez rapidement à eux. Maintenant que notre maquette ressemble presque à une sieste, amenons quelques images dedans pour voir à quoi ça ressemblera nous allons voir ça dans la prochaine vidéo. 8. Insert les images: bonjour encore dans cette partie du cours, nous allons vous montrer comment insérer des images dans le croquis, et ils vont vous montrer les deux et vous dire pourquoi vous devriez choisir l'un ou l'autre. Le premier consiste à utiliser un masque. On va le faire pour l'écran d'accueil. Ouverture d'une photo nommée Picture Home Indus Listens dossier. Il suffit de faire glisser l'image directement dans votre fichier, la redimensionner et de la placer au-dessus de l'espace réservé dans votre écran. Maintenant, disons, comme se vanter de l'espace réservé, Terminer l'image et cliquez sur le masque dénoyautée. Nous allons faire cela à nouveau était une image de profil de notre utilisateur glisser et déposer l'image de profil Michael Jordan dans votre croquis est tombé. Placez-le au-dessus de l'image de profil, espace réservé et du masque. Ici, tu y vas. Ce qui est génial avec cette méthode est la capacité de frapper la partie de l'image que vous voulez montrer. L' inconvénient est que vous avez deux couches pour une image et soumettre compliqué. Alors voyons une autre façon d'ajouter une bonne image à l'expo cri, Sélectionnez le premier carré cliquez sur l'onglet couleur et allez à l'heure de force nommée Pattern Quicken. Choisissez l'image et sélectionnez Choisissez une tuile est lorsque vous avez un motif, mais dans ce cas, nous voulons l'image pour sentir le carré. Donc, sélectionnez le champ. Faites-le à nouveau pour les carrés plus anciens avec parler à Big Three avant et ainsi de suite. Et si vous voulez utiliser vos propres images, allez-y. Comme vous pouvez le voir, ce milieu est vraiment Festen facile. Il fonctionne également très bien avec des branchements froids parleront de cela plus tard. L' inconvénient est que c'est moins précis. C' est ça. Nous avons donc deux façons d'insérer des images dans votre design. Nous allons utiliser l'option masque si nous voulons être vraiment précis dans le placement de notre image et de sentir option. Si nous voulons juste surforme pour avoir une image en arrière-plan. Dans la vidéo suivante, nous allons insérer des actions dans notre application en concevant des boutons. 9. Boutons de conception: salut à nouveau dans cette leçon va concevoir des boutons à tous d'un utilisateur pour interagir avec le contenu. Revenons à nos histoires une seconde. Nous travaillons actuellement sur les pieds de l'utilisateur en tant que Kevin. Je veux voir les photos de mes amis et leur donner des commentaires pour qu'ils sachent que je leur donne la validation. Jusqu' à présent, nous avons autorisé les pulsions d'utilisation. C' est des photos d'amis. Maintenant, nous voulons lui permettre de commencer et, comme deux images que je reste sous n'inclut pas vraiment les boutons Apple préfèrent lorsque vous utilisez cônes de niveau de texte oi. Je n'ai pas encore besoin d'avoir notre icône personnalisée. Nous allons utiliser un angle indirect au niveau du texte pour créer un bouton pour faire l'appel à l'action. Un appel plus fort à l'action ou C T. A. est la capacité de votre conçu pour encourager les gens à établir des liens ici. Pour cliquer sur le bouton, revenons à notre écran d'accueil et nettoyons un peu. Sélectionnez une image de profil et le nom d'utilisateur et les groupez-les nommé un nom d'utilisateur de dossier le contenu de l' image principale , sélectionnez le nombre de J'aime et les commenter et les regrouper ce même. Cette description du titulaire a fait glisser son groupe quelques pixels ci-dessous. Si lorsque vous cliquez dessus, un seul élément est sélectionné à la place de l'ensemble du groupe, et cochez la case. Lorsque vous sélectionnez sur le côté droit, placez la barre d'onglets au-dessus du groupe Description dans la liste des calques. Maintenant, formons nos éléments exploitables. Bon à insérer rectangle la prochaine fois que nous allons pains. Un raccourci est Dessiner un rectangle de 30 pixels de haut par 90 pixels de blanc. Placez-le à 15 pixels du bord de l'écran. Vous pouvez facilement le faire en tapant 15 dans X, et n'oubliez pas que vous pouvez vérifier en survolant votre élément. Pourquoi opprimer afin de le faire paraître encore plus que la connexion Will Button donnera un rectangle enregistré. Corners a dit. Le Reg est à quatre heures. Vous avez peut-être remarqué ces jours-ci que c'est l'entraînement pour que les boutons ressemblent à des peelings. Spotify utilise ce lot, par exemple, pour le faire, juste dit que le commun a enregistré le maximum et votre rectangle deviendra appel. Si vous avez besoin d'aller au-dessus de 40, vous pouvez taper la valeur que vous voulez. Pour l'instant, donnez-moi que pour Dupliquer le premier rectangle, cliquez et faites glisser en tenant et joue un nouveau rectangle à côté du 1er 1 Enfin, cliquez et faites glisser et placez un dernier rectangle sur le bord droit de l'écran pour le placer pixels à partir du bord droit du type moins 15 dans l'exposition. Maintenant, nous allons insérer les niveaux qui décrit la fonction de chaque bouton inséré bloc de texte et a dit l'avant dans Helvetica Irrégulier 16 dit que la couleur était un gris foncé. Placez le bloc de texte sur le premier bouton et tapez comme juste le bloc de texte wits pour le faire correspondre avec le bouton et dit que le texte doit être centré dans le bloc de texte. Copiez le bloc de texte sur l'autre bouton et tapez. Commentaire. Notre troisième bouton sera d'accéder aux options, telles que signaler le contenu ou copier le lien de l'image. Ce n'est pas aussi important que les autres qui vont le concevoir différemment. Copia bloc de texte sur elle et tapez plus maintenant décoché les dollars de couleur de champ et vérifier la balle. Les dollars. Cela attirera à nouveau l'effet de la ville de notre bouton. Voir ta représente un appel à l'action. Par exemple, entre cela, ceci et ce bouton qui pourrait avoir une meilleure conversion sur le 1er 1 Il y a beaucoup d' article sur la façon d'augmenter la conversion à nouveau. Diggin si vous voulez d'abord ou informations grouper chaque niveau de texte avec le rectangle derrière eux. Nommé le dossier avec le nom de l'action, donc nous aurons, comme commentaire et plus encore. Le bouton plus fera apparaître une triche d'action avec différentes options. Le bouton de commande fera glisser cette reine vers la gauche et révélera le clavier. Quant au bouton similaire. Une fois que vous l'avez touché, il sera juste en rouge sélectionner l'arrière-plan du bouton similaire et regarder un joli rouge tourner l' avant en blanc sur le même écran. Nous avons maintenant le même bouton dans ST. Statut différent. Actif, inactif et secondaire. Séparons les trois éléments des informations ci-dessous. En dessinant une ligne, vous pourriez penser que le poids le plus facile a dessiné une ligne sera de cliquer sur insérer en ligne, mais en fait ce n'est pas le cas. Le Lion Tool n'est pas vraiment génial en croquis. C' est assez difficile à définir et pas très intuitif. C' est pourquoi nous utiliserons un outil que nous connaissons bien. Maintenant. rectangle de dessin à angle direct le définir avec un 345 et il est huit à un. Pixel a dit que la couleur était un gris clair, car il doit être une information vraiment discrète, a déclaré la position à 583 dans Pourquoi, et le placer au milieu. Vous pouvez, par exemple, utiliser les grandes images et les aligner toutes les deux par le centre. C' est ça. Voyons un peu de lexical avant d'envelopper quand vous avez dans la limite comme un bouton sur un contenu, comme une photo. Il est délimité par une bordure qui peut être visible ou non. L' espace entre la bordure et ce qui est à l'intérieur, par exemple, entre la bordure d'un meilleur et le texte du bouton. Ça s'appelle le caressage. Enfin, l'espace entre l'élément et ce qui l'entoure, par exemple, le bord de l'écran. C' est de l'or, la marge. D' accord. Nous avons déjà appris beaucoup de choses dans la Lexus et nous serons dans l'exercice qui vous fera utiliser tout ce que nous avons vécu jusqu'à présent. Prêt. Allez 10. Temps de pratique - Flux de caméra: c' est tout. Des nuits. Il est temps de travailler seul. Nous avons déjà parcouru un certain nombre de fonctionnalités, telles que dessiner des formes, placer des textes, importer des images et insérer des éléments natifs Iose. Il est temps pour toi de t'entraîner. L' or est de construire les écrans des flux de caméra. Mais avant qu'il puisse commencer, laissez-moi vous parler de quelques bonnes pratiques. D' abord, nous allons réorganiser les hors-bord. La navigation principale de notre application est basée sur cinq étapes, dans ce cas, une pratique qui organise nos planches et votre toile est trop grande. Cinq roses, une par robinet, donc on laisse l'écran d'accueil ici et joue l'explosion juste en dessous. Vous pouvez écrire le nom des onglets sur le côté gauche de sorte que si vous partagez vos cinq autres personnes pour comprendre comment l'APP fonctionne dès qu'ils ouvrent le fichier. Donc c'est le type de la maison et a dit la taille assez grande pour que vous puissiez le voir quand vous avez vraiment zoomé . Copiez et collez ci-dessous et tapez explorer. Enfin, faites la même chose pour l'appareil photo. Vous souvenez-vous de l'histoire d'utilisateur que nous définissons en vous ? Exception. Eh bien, nous allons les utiliser maintenant pour définir ce qui aura à concevoir dans chacun des écrans de la caméra ouvrir l'instagram i Western Cet enfant que je veux prendre dans partager de belles photos était l'histoire pour le robinet de la caméra Kobe et badigeonné en dessous de la caméra niveau. Voyons maintenant comment nous pourrions y parvenir à travers différentes étapes. Créer, pas bord. Appuyez sur une insertion iPhone six. La première étape pour atteindre son objectif sera de prendre une photo. Donc renommé sont à la fois caméra et juste en dessous. Je peux prendre une photo que ces écrans sont connectés Ensemble, vous pouvez placer un étroit entre les écrans pour dessiner un clic étroit sur, insérer une flèche direction droite. Se rapporter à elle. J' apprécie daté de la photo et cliquez sur les copies suivantes de Border Side. La deuxième étape consiste à rendre la photo agréable, alors amenons des filtres renommés à bord. Les filtres à l'écran se trouvaient juste en dessous. Je peux faire un balayage pour choisir le filtre. Lorsque je clique sur un filtre, il modifie l'image. Sont froid ingley Maintenant que la photo a l'air belle, donnons quelques détails en cerise. Avec le monde comme l'action est la même, vous pouvez être basé la première flèche créer, affirmer hors-bord et renommer le partage et écrire l'histoire ci-dessous. Je peux ajouter une description pour faire ma photo. Je peux sélectionner les réseaux sur lesquels je veux le partager maintenant. Notez ce qui s'est passé dans la dernière action. Ma photo est partagée dans mon flux d'abonnés et sur les réseaux. J' ai sélectionné la caméra pour les extrémités, et je suis de retour dans mes pieds pour sa reine de votre application. Essayez de vous concentrer sur une ou deux actions afin que vous utilisiez un dunk. C' est la dernière. C' est ça. Tu sais, je dois sentir le vide. Nos conseils. Vous n'avez pas nécessairement à répliquer Instagram. Notre histoire d'utilisateurs peut avoir des réponses différentes en termes de vous. I Dans ce dossier de leçons, vous trouverez tous les éléments dont vous avez besoin et le fichier rempli. Essayez de faire de votre mieux par vous-même. Et si vous êtes coincé sur la façon de faire quelque chose, comment regarder la vidéo suivante, nous allons vous montrer comment terminer l'exercice entier. Bonne chance 11. Correction de l'exercice - Flux de caméra: Bienvenue de retour. Nous allons vous montrer comment nous avons terminé l'exercice. Nous n'avons pas exactement répliqué Instagram, mais nous avons juste donné la réponse à l'histoire de l'utilisateur ci-dessous chaque port devrait. Vous pourriez, bien sûr, créer votre propre design Si vous le faites a été un peu accéléré. Donc, nous allons la musique citoyenne deejay tous les jours je passe mon temps à attendre près de trouver peut comprendre oui, Chaque jour je passe mon temps à sentir la façon dont je prends Peut-il aller à une autre dimension maman parle vous avez été siroter la façon dont obtenir des vérités jetées dans ce flux Juste des bits d'affaires solaires vont aux villes de prêt aller en prison, aller à l'église Great. Et seul Dieu peut me juger. Ouais, tu sais, comme pas de regard laid. Tellement bien, oui, je sais. Je plaide le cinquième si vous avez besoin de Teoh Motion en regardant m'approcher dans une place. Le social le plus proche n'allait jamais. Il sait que c'est plein d'espoir. s'oppose à Justin. Juste des émotions. - Je veux jouer un autre clip au milieu avec un message aux patrons pour rater cette nouvelle pourvoirie sur la cabine de sang. Montre-moi cette marque ce bon stand. Plus gros brioches de copie comme juridique sur le point d'obtenir un morceau de la Je suis d'accord avec juste bien juste boire ma fenêtre de vin. Mais je n'aime pas prendre le temps de cette façon de poulet. Ok, même non. 12. Aperçu de votre appareil avec Sketch Miroir: Hey, j'espère que tu as passé un bon moment à la conception de la caméra flottante. Maintenant, nous allons ouvrir au fichier avec des écrans plus anciens déjà conçus. Ouvrez le fichier instagram. J' ai toujours corrigé dans cette leçon. Dossier 2, mon pote. Ces dossiers. Nous allons utiliser l'une des meilleures fonctionnalités dans le croquis. Ça s'appelle Sketch Miro. C' était en fait l'une des raisons qui m'a fait faire doux de Photoshopped à croquis . Miro vous permet de prévisualiser le design en temps réel directement sur votre appareil. est essentiel de pouvoir prévisualiser une conception sur l'appareil pour lequel vous concevez. C' est le seul moyen d'être sûr que ce que vous faites a vraiment du sens, et cela vous permet de repérer les flux potentiels. abord, vous devez aller à la boutique APP sur votre iPhone ou je parie et chercher le repas de croquis vers le haut. Cela vous coûtera 5$ Mais si vous ne voulez pas dépenser cette somme d'argent, pas de soucis, nous vous donnerons quelques alternatives. Ils sont gratuits, mais un peu moins pratiques parce que pas construit dans le croquis. Une fois que vous avez téléchargé cuisine, vous sur votre iPhone. Assurez-vous que votre ordinateur et iPhone sont connectés au même réseau WiFi maintenant revenir à votre croquis, Fell et ouvert. Sketch repas sur votre appareil. Vous devriez voir un rouge qui apparaît à côté de l'icône du milieu. Cliquez dessus et sélectionnez votre appareil. Si tout a bien fonctionné, vous devriez voir maintenant les hors-bord apparaissent sur vos conseils. Maintenant tu peux non plus, mon frère. Vous effectuez tous les deux un balayage sur votre appareil ou sélectionnez l'arbol spécifique que vous souhaitez afficher dans votre esquisse. Cinq. C' est la meilleure façon de définir la taille de vos téléphones ou de voir à quoi il ressemble vraiment à la couleur sur l'écran réel. Toutes les modifications que vous apportez sont mises à jour en temps réel. Bien sûr, où vous venez en vous pour utiliser attraper repas. Mais si vous n'êtes pas drayd ou si vous ne voulez pas dépenser 5$ la meilleure alternative à l'esquisse Mayo est nommée revue de pétoncles. Vous pouvez télécharger gratuitement sur votre Mac directement sur ce lien. L' Android et IOS jusqu'à notre gratuit aussi bien. Cela ne fonctionne pas aussi bien que Catch me bien parce qu'il ne montrera pas votre design en temps réel. Vous devez exporter PNG classé, puis les ouvrir à l'échelle A pour pouvoir les voir sur votre téléphone. Amusez-vous à jouer avec cette application dans la prochaine leçon se rapprochera de mettre cela à la vie . 13. Exportation des planches: dans les leçons de pratique. Nous avons conçu une application à l'aide d'un appel d'offres américain un citrons. Ce n'est pas parfait, mais c'est fonctionnel, et c'est ce qui compte le plus. En fait, c'est plus que suffisant pour commencer à coder. Essayons donc au monde, commençant par un développeur aux développeurs, le gars qui va coder l'application transformant votre design d'un prototype à une application que les gens obtiennent dans Jacquizz, il est votre partenaire dans le codage criminel n'est pas quelque chose que nous couvrons dans ce cours . C' est un ensemble différent de compétences. Cependant, il est crucial que votre développeur ne comprenne pas votre design, et c'est sur cela que nous travaillons dans cette leçon. Si vous êtes un développeur, les choses seront plus faciles pour vous si vous n'êtes pas quelques conseils pour travailler efficacement avec le développeur. Ce qui compte maintenant, c'est qu'il a aimé l'avenir principal de votre produit ? Donc, ne obtenez pas pour déclaré Si dans l'application de travail et Icahn est un pixel embauché et attendu, ce sont des détails esthétiques qui peuvent être corrigés plus tard. Rappelez-vous également, les développeurs sont des ingénieurs, et ils apprécient vraiment la communication avec précision dans les limites. Si vous voulez que votre relation soit un couple paisible devrait toujours se rappeler que dans cette partie du cours. Nous avons conçu l'application en utilisant uniquement IOS éléments avérés. Tous ces éléments sont natifs. Inclus dans le code X est un logiciel de développement utilisé pour développer les abs de l'Iowa. Cela signifie que vous n'aurez pas à exporter les différents éléments que votre concepteur a créés à partir du développeur. Nous avons seulement besoin de voir comment vous positionnez les éléments pour recréer votre design dans X. Bon de lui montrer que nous sommes Onley Nique exporte vers différents écrans. Voyons donc comment exporter des hors-bord avant d'exporter dans notre carte, vous devez le rendre exportable. Sélectionnez vos sont ennuyés en cliquant sur son nom dans votre canevas ou directement dans la liste des calques , puis cliquez sur le coin inférieur droit pour le rendre exploitable. Un aperçu apparaîtra instantanément. Vous pouvez choisir votre ancien entre différents fichiers image car également choisir de multiplier la résolution de son écran. Mais on parlera de ça. Quand va exporter les éléments le définir sur un X et PNG. Vous pouvez maintenant faire glisser et déposer directement l'aperçu sur votre bureau pour l'exporter. Sélectionnez d'autres commentaires hors-bord, par exemple, le rendre exportable et l'exporter. Placez l'ancien écran dans un dossier qui nommera les écrans d'exportation. Revenez maintenant à l'esquisse et sélectionnez tous les hors-bord sauf l'écran d'accueil et l' écran commun . Sélectionnez le 1er 1 en cliquant sur son nom dans la liste des calques, puis cliquez sur. Pourquoi tenir commentaire Pour ajouter les deux autres choix, Make them Oh, exportable Maintenant à l'écran d'accueil sous l'écran commun à votre sélection, vérifiez les dollars de couleur de fond et gardez la couleur en blanc. Cela inclura l'arrière-plan blanc dans chaque écran afin qu'ils n'aient pas l'air transparent . Maintenant que toutes vos planches sont exportables, vous pouvez décider de les exporter toutes celles-ci. Pour ce faire, cliquez sur l'icône d'exportation dans le coin supérieur droit de votre esquisse. Cela vous montrera tous les éléments qui peuvent être exportés dans vos fichiers. Sélectionnez ceux que vous souhaitez exporter, puis cliquez sur Exporter. Sélectionnez les captures d'écran d'exportation de dossier que nous venons de créer. Cela mettra automatiquement à jour les écrans dans leur dernière version. Maintenant, vous pouvez partager ce dossier avec un développeur et commencer à coder pendant que l'Europe est en cours développement. Vous avez le temps de créer l'icône, et c'est ce que nous allons faire dans la leçon suivante. 14. Conception d'icônes d'application v1: Hey, allons Chef de notre application est en cours de développement en ce moment est l'occasion parfaite de concevoir l' icône de l'icône Pourtant l'icône représente votre application dans le magasin APP et sur l'écran d'accueil de vos clients remplissant. Il est important qu'il soit cohérent avec l'identité de l'Europe et le style IOS, donc il ne semble pas bizarre parmi toutes les autres icônes. Vous voulez créer quelque chose de simple. Cela était clair pour les utilisateurs qui représenteront votre application et se démarquer sur l' écran d'accueil . Jetons un coup d'oeil à l'icône IOS. Ils sont assez simples. Gmail App Icône est une enveloppe. Le lecteur de musique. Quelques notes Trouver un élément graphique qui représente votre application est un bon moyen de ces dans votre icône cool et efficace. Si vous voulez être efficace, la chose la plus simple à faire est de concevoir un Nikon suivant l'exemple de Facebook le premier plus tard du nom de votre application avec le front droit avec votre couleur principale comme arrière-plan, et c'est pourquoi nous allons faire dans ce dossier de leçon. Vous trouverez une icône de ligne de feu, cupidité, le modèle. Cela nous aidera à concevoir un Nikon qui gonflent la proportion. Alors allons-y. Le à bord pour les icônes est un carré de 1000 et 24 pixels par 1000 et 24. Pixel dessine maintenant un carré pour remplir ce tableau et teinté dans le spécifique Instagram Louis trouvé plus tôt. S' il n'apparaît pas dans vos échantillons, Dakota est 125688 Ne vous inquiétez pas des coins de bouillon pour le moment. On s'occupera de ça plus tard. Maintenant que nous avons, l'arrière-plan va juste mettre le premier plus tard hors de notre haut dans les bons téléphones. Insérer des ponts, type bloc. Le plus tard, j'ai dit la couleur en blanc et la taille à 900. Placez-le au milieu de votre hors-bord, dit les oeufs à 300 un Y à 40. Ça pourrait suffire, mais nous allons un peu proxénète. Notre icône était à leurs forces. Cheetos plat dupliquer votre calque de texte était venu et voir et venir envie dans le type de position blanc plus 30. Ce sera à 30 pixel dans la position de notre calque de texte, et nous allons le faire descendre 30 Pixel dit. La transparence de cette couche à 50%. Nous devons maintenant icône fantaisie, clic droit sur l'autre nom né et exporté. Vous pouvez ajouter cette icône à votre soumission agin. Apple a besoin d'une quantité incroyable de combat avec différentes tailles. Heureusement, les gens ont déjà créé le fichier afin que nous puissions générer tout à la fois, et nous verrons cela plus tard. Si vous voulez, une version de votre icône était autour du coin est de le mettre sur votre site Web. Une carte de visite ou a été pull ou un pull que vous pouvez poursuivre comme ça ? Retournez à votre fichier de cage d'icônes et copiez le dossier de dépliage Official Greed hors-bord. Dans les Loyalistes, vous verrez un calque nommé icône Edge sélectionnée et placez-le juste au-dessus de votre fond bleu. Sélectionnez la couleur du champ avec notre bleu et décochez la case de la bordure. Cachez laid pour démarrer les couches d'arrière-plan et tous les autres hommes ci-dessous. Exportez votre à bord et voilà. Vous pouvez commander votre première tête d'autocollants. C' est la fin de la première partie du cours. Nous avons traversé les rudiments, et nous sommes maintenant prêts à avoir une application sur l'APP Store et commencer à voir ce que vous faites avec. Félicitations dans la deuxième partie passera de étudié, conçu à la conception personnalisée et de créer une application qui semble vraiment bien. Nous allons approfondir les fonctions d'esquisse et vous transformer en masque d'esquisse. Nous allons parler des tendances de deux jours et comment rester. Restez à jour. Je vais vous apprendre les meilleures pratiques à être efficace et utiliser des plug-ins incroyables développés par la communauté de croquis. se voit de l'autre côté. 15. Projet 2e partie du projet: D' accord. Félicitations pour avoir terminé la deuxième partie du cours. J' espère que tu t'es amusé avec ici et que tu as aimé apprendre à te croquis. Si vous l'avez fait, n' hésitez pas à nous le faire savoir et à nous laisser un avis. Votre projet dans cette partie de la classe est de concevoir une icône simple pour votre application pour concevoir les écrans de votre flux de fonctionnalités clé en utilisant autant que possible les éléments standard IOS. L' idée est de venir pour le premier projet le plus rapidement possible pour voir si cela fonctionne. Téléchargez donc deux ou trois écrans de votre flux de fonctionnalités clés sur ce que nous appelons le V. La version une de votre application que j'ai pu dans la troisième et dernière partie de ce cours plongera plus profondément dans la conception de fonctionnalités avancées esquisser, les meilleures pratiques et bien d'autres choses passionnantes à venir avec un design personnalisé pour notre application. Alors on se voit dans la troisième partie