Comment concevoir des pages d'accueil qui convertissent dans Sketch pour les débutants

1. Intro: Hé tout le monde. Bienvenue dans mon premier cours Skillshare. Je suis excité d'être ici avec toi. Je m'appelle Daniel [inaudible], et je suis un concepteur d'interface utilisateur indépendant et d'expérience utilisateur. Avant de concevoir, j'ai étudié le commerce international en marketing. Dans ce cours, nous allons combiner le meilleur des deux mondes et voir comment nous pouvons concevoir des pages d'atterrissage modernes et belles mais vous avez aussi un cours super riche ou professionnel. Dans ce cours, nous apprendrons quels sont les éléments les plus importants d' une page de destination à forte conversion et comment nous pouvons utiliser le design pour atteindre ce cours d'affaires. Après une brève introduction, je me concentre à travers un projet allant de l'idée initiale jusqu'à l'exécution. Je vais vous montrer comment et où trouver l'inspiration pour les pages de destination, comment créer votre propre palette de couleurs, comment choisir les meilleurs fonds disponibles pour votre projet, ainsi que les plans d'esquisse les plus pratiques. Ou le processus de conception sera créé dans l'esquisse, qui est l'application de conception d'éclairage industriel pour la conception d'applications mobiles et web. Dans cette classe, nous allons créer, une page de destination complète pour les vues de bureau et mobiles. À la fin de ce cours, vous aurez la possibilité de créer votre propre conception de page de destination pour votre entreprise ou votre idée. Je serai là pour vous aider et vous faire part de vos commentaires. Cette classe est des données pour les débutants et les concepteurs intermédiaires qui aimeraient apprendre à utiliser le croquis et aussi comment améliorer en tant que concepteur en connectant design et cours d'affaires. J' ai hâte de te voir en classe et de commencer à concevoir ensemble. 2. Éléments d'une page de réussite: Salut, bienvenue dans ce cours. Tout d'abord, merci beaucoup d'avoir rejoint cette classe. Tu es incroyable. Avant de sauter directement dans le croquis et de commencer à concevoir notre page de destination, permettez-moi de vous montrer comment je commence habituellement chacun de mes projets ainsi que les éléments clés d'une page de destination à conversion élevée. Ma première question est, pourquoi voudriez-vous créer une page de destination ? Vous voulez probablement créer une page de destination car vous avez déjà un produit ou service que vous souhaitez promouvoir et vous avez besoin d'une page de destination pour obtenir plus de conversions. Avec une excellente page de destination, vous pouvez augmenter les conversions de votre produit ou service. Dans notre cas, cela signifie que plus de gens vont télécharger, acheter votre produit ou s'inscrire à votre service. L' autre raison la plus populaire pour laquelle vous avez besoin de la page de destination est que vous avez une bonne idée que vous aimeriez valider avant de construire dessus. Vous aimeriez voir si les gens sont suffisamment intéressés par cette idée. Avec une excellente page de destination, vous pouvez rapidement valider votre idée et voir s'il y a assez d'intérêt pour elle, sorte que vous pouvez savoir si cela vaut la peine de construire et d'exécuter votre idée. Examinons maintenant rapidement les éléments clés d'une page de destination. Commençons par l'objectif commercial. Avant de commencer un projet, j'essaie toujours de comprendre quel est le principal objectif commercial que j'aimerais atteindre avec une page de destination. En fonction de l'objectif commercial, vous pouvez créer l'objectif de conversion, qui est l'objectif principal de la page de destination. Par exemple, si nous créons une page de destination pour une application, l' objectif de conversion le plus important peut être qu'une fois que les utilisateurs ont visité la page de destination, ils ont également téléchargé l'application. Dans le cas où l'application n'est pas encore prête, bonne pratique est de demander leurs adresses e-mail à fins de marketing et de les avertir lorsque l'application est finalement lancée. Si possible, essayez d'obtenir autant d'informations sur les utilisateurs potentiels que vous le pouvez, afin que vous puissiez adapter l'expérience de la page de destination à leurs besoins. Rappelez-vous toujours que vous concevez pour les utilisateurs, et pas vous-même ou non pour les quartiers de l'État ou les propriétaires d'entreprise. Si c'est bien fait, l'utilisation de la validation sociale sous forme de témoignages ou de courtes études de cas peut grandement améliorer la crédibilité de votre page de destination. Pendant le processus de conception, je vais vous montrer comment j'utilise la validation sociale de manière efficace. Après avoir établi les principes fondamentaux, nous pouvons nous concentrer sur la création d'une expérience agréable et mémorable, dont les utilisateurs se souviendront. Jetons un coup d'oeil au projet que nous devrons créer. Le bref de projet ressemble généralement à ce gros bloc de texte quand je l'obtiens. Pour cette classe, j'ai créé une fausse entreprise fictive, appelée Showtrackr, qui a un service et une application pour le suivi automatique des émissions de télévision. Voici le bref : Showtrackr vient de lancer une nouvelle application iOS et web, et ils aimeraient obtenir plus d'utilisateurs pour s'inscrire à leurs services impressionnants. Leur groupe cible comprend des adoptants précoces axés sur la technologie dans la tranche d'âge de 15 à 30 ans. Le plus grand avantage de leur service est qu'ils utilisent des technologies de pointe, comme l'apprentissage automatique, pour suivre et recommander automatiquement des émissions de télévision. La base d'utilisateurs actuelle aime leurs services et ont beaucoup de bonnes recommandations sur Twitter. La page d'accueil doit être simple et délicieuse, en utilisant les couleurs principales de la marque ainsi que suivre les dernières tendances du design de Dribble. Essayons de regrouper ces informations pour que nous puissions travailler avec cela. abord, nous avons l'objectif commercial, qui est de faire en sorte que plus d'utilisateurs utilisent leur plateforme. Basé sur l'objectif commercial, nous connaissons également l'objectif principal de conversion, qui est d'amener les utilisateurs à commencer à s'inscrire processus en donnant leurs adresses e-mail. tous les utilisateurs, nous savons qu'ils sont des adopteurs précoces axés sur la technologie dans la tranche d'âge de 15 à 30 ans. Nous avons également beaucoup de bonnes recommandations sur Twitter, que nous pouvons utiliser pour la validation sociale. Enfin, la page d'accueil doit être simple et agréable, en utilisant les couleurs principales de la marque ainsi que suivre les dernières tendances du design de Dribble. Comme vous pouvez le voir sur le côté droit, nous avons également quelques visuels, y compris la recherche iPhone 10 et aussi une capture d'écran de cette application web, que nous pouvons utiliser lors de notre processus de conception de page de destination. Maintenant que nous avons une meilleure compréhension du résultat final souhaité, créons la première version de nos filaires. Beaucoup de concepteurs préfèrent créer les fils filaires initiaux sur papier. Cependant, j'aimerais le faire à l'intérieur du croquis, mais la clé ici est la faible fidélité. Vous ne voulez pas vous soucier des couleurs, des polices ou de tout ce qui est orienté sur le détail. L' objectif principal ici est de trouver une grande structure pour la page de destination. J' ai donc commencé avec la navigation, qui sera une navigation à position fixe visible pendant la mêlée. Dans la navigation, j'ai également placé un bouton « appel à l'action », ce qui est vraiment important parce qu'il est toujours visible, et les utilisateurs peuvent décider à tout moment qu'ils souhaitent s' inscrire au service et utiliser le bouton « appel à l'action ». La section héros est clé, créant une page de destination efficace. Cela doit être visuellement attrayant et beau et intéressant pour les utilisateurs, donc je place aussi le bouton « appel à l'action » là. Il est instantanément visible après le chargement de la page. Nous avons un look iPhone mettant en valeur l'application. Ensuite, nous aurons une section de fonctionnalités, avec les trois caractéristiques les plus importantes du produit et du service. Ensuite, nous avons une section de cas réelle où nous pouvons démontrer et présenter l'application, et ensuite nous avons aussi quelques bascules pour rendre le prototype plus interactif, et fondamentalement ce n'est pas seulement une maquette statique, mais c'est un visuel plus complexe. Ensuite, nous aurons à la preuve sociale et les témoignages dans ces rectangles si nous devons citer et aussi un lien vers le profil Twitter de la personne qui a recommandé le service. Nous avons également une section d'appel à l'action en bas de la page avec quelques messages simples et aussi un bouton « appel à l'action ». Cette mise en page nous donne également un cadre de la page de destination. Si vous faites attention, nous avons une partie call-to-action à la fin de la page et au début de la page, et nous avons le contenu principal qui amplifie le message de la page de destination. Fondamentalement, ce sont les points où nous essayons de mettre en valeur les possibilités de l'application et du service. Les utilisateurs peuvent s'inscrire en bas ou en haut de la page, et aussi à tout moment parce que nous avons la navigation toujours visible. Si vous le regardez côte à côte, vous pouvez voir le résultat final que nous devions créer. Vous pouvez également voir comment cela se rapporte aux filaires initiaux. Avant de nous lancer dans la partie de conception, voyons comment nous pouvons trouver des inspirations incroyables pour nos projets. 3. Trouver des inspirations: Pour trouver des inspirations de haute qualité, je vais habituellement au dribble et je suis aussi quelques personnes. Mais vous pouvez également vérifier les coups les plus populaires. Vous pouvez également le filtrer pour la semaine dernière, le mois dernier, l'année dernière, afin que vous puissiez vous nourrir des dernières tendances. Ce que je fais habituellement est de rechercher la page de destination du terme et de voir le projet qui a une balise ou sous description, ils ont la page de destination du terme, et vous pouvez également voir un ancien terme populaire et aussi, les œuvres les plus récentes. Ceci est également très utile pour avoir une peur des dernières tendances. Ce que je fais habituellement que si je trouve une catégorie de designer que j'aime, je l'aime aussi. C' est donc la fonction de vie qui est utilisée dans mon cas. Si vous visitez mon profil, vous pouvez également jeter un oeil aux goûts que j'ai donnés au projet. Ainsi, vous pouvez voir une collection de mes conceptions préférées aussi pour les pages de prêt, et pour les applications. Il s'agit essentiellement d'une liste organisée de designs que je recommande entrer dans les détails et de les étudier pour obtenir plus d'inspiration. L' autre grand site que je recommande de vérifier est un bon laboratoire que la conception. Ici, vous pouvez rechercher la conception pour des sections spécifiques de votre page. Vous pouvez donc avoir une vue de page complète comme ici, mais vous pouvez également rechercher uniquement la partie de navigation, ou peut-être sur la section juste un héros, ou donner une inspiration pour les parties d'appel à l'action. Ceci est un site Web génial à craindre que ces annonces et seulement chercher ce qui est habituellement besoin. Donc, si vous avez juste un piège, avec le design dans le pied de page, alors vous pouvez avoir une inspiration de pieds de page étonnants ici. S' il y a quelque chose que vous aimez, vous pouvez simplement cliquer dessus et voir le site Web complet où ce dossier a été trouvé. Donc, c'est aussi un très grand site Web. L' autre est uijar.com. Ceci est un site web similaire à la bonne conception web. Vous pouvez donc le filtrer pour les sites Web, mais vous pouvez également avoir une certaine inspiration pour les applications, les illustrations et l'image de marque. Fondamentalement, c'est aussi un site Web créé avec des designs étonnants. Enfin, vous avez des applications Apple, qui est très similaire à repo. Ici, vous pouvez également filtrer pour le web et voir les conceptions les plus populaires et les plus tendance pour les pages de destination et les sites Web complets. Donc, je recommande vraiment de vérifier celui-ci aussi. Lorsque vous avez trouvé un design que vous aimez, essayez de commercialiser, ou vous pouvez également le télécharger si vous le souhaitez. Vous pouvez donc simplement télécharger l'image et n'oubliez pas de vérifier les pièces jointes. Ainsi, vous pouvez avoir un look et une sensation de la conception complète. S' il y a un design que vous aimez, vous pouvez simplement le glisser et le déposer et l'enregistrer sur votre bureau ou le mettre dans le dossier de votre commande de planification, et vous pouvez jeter un oeil à tout moment quand vous avez besoin d'une inspiration et obtenez de nouvelles idées à partir de ces conceptions. 4. Les bases de l'utilisation Sketch: Pour créer le design, nous utilisons vraiment une application appelée sketch, qui est le meilleur outil de conception pour créer des applications mobiles modernes et des conceptions à la hausse. Si vous avez déjà des croquis, vous pouvez l'ouvrir maintenant et suivre. Mais si vous ne l'avez pas installé, vous pouvez télécharger un essai gratuit à tout moment et l'essayer. Si vous ouvrez l'esquisse, nous pouvons simplement créer un nouveau document. C' est l'interface principale de l'application d'esquisse. Les outils les plus courants que nous utilisons, se trouvent ici, sous l'élément de menu Insertion, et ici vous pouvez insérer un tableau d'art, une forme comme un rectangle, une étoile, ou juste une ligne. abord, nous devons créer un tableau d'art. À côté de chaque élément, vous pouvez voir une lettre, qui est un raccourci. Donc, si j'appuie sur A, il va juste créer un tableau d'art, et ici vous pouvez, trouver différentes tailles de tableau d'art. Donc, si nous concevons pour mobile, vous pouvez juste avoir un tableau d'art pour l'application mobile, ou si j'appuie à nouveau sur A ou juste aller ici, au tableau d'art. Je peux également sélectionner un web responsive, mais j'ai des préréglages pour la conception web responsive. Nous allons utiliser un ordinateur de bureau HD. Donc, il est déjà prédéfini, et prêt à l'utiliser. Sur le panneau inspecteur sur le côté droit, vous pouvez modifier la vue d'un tableau d'art, ainsi que la hauteur d'un tableau d'art. Donc, puisque si vous avez un design de page Web beaucoup plus long, nous pouvons simplement le changer et, avoir un tableau d'art beaucoup plus long, prêt pour nos designs. L' autre fonction que nous utilisons lors de notre processus de conception, est la forme rectangulaire. Il y a un raccourci sur le clavier. Si vous appuyez sur « R », vous avez accès à l'outil rectangle. Donc, si je suis au tableau d'art, et que j'appuie sur « R », je peux commencer à dessiner. Lorsque vous créez un rectangle, sur le côté droit, vous pouvez définir la position. Ainsi, vous pouvez le positionner avec des nombres. Vous pouvez également définir les valeurs de largeur et de hauteur. Il est également bon de noter que, ce sont, des champs intelligents. Donc, vous pouvez faire aussi, des calculs, là-dedans. Donc, il y a beaucoup de fonctionnalités dans ces champs d'entrée, et vous devez faire confiance à cette réponse, de sorte que vous pouvez faire pivoter une forme, ici. En outre, vous pouvez également définir le rayon de bordure. Vous pouvez également modifier le champ de la forme, ainsi que la bordure. Ainsi, vous pouvez définir la bordure, vous pouvez définir la largeur de la bordure. Donc, fondamentalement, vous pouvez affiner les détails. Vous pouvez ajouter des ombres, que vous utiliserez aussi beaucoup. Donc, ce sont toutes les valeurs que vous utiliserez fréquemment. Dans la couleur filée, la valeur par défaut est RVB, comme je me souviens. Mais si vous cliquez sur les petites lettres ici, vous pouvez le passer à HSB, qui est la saturation de la teinte et la luminosité. Ainsi, vous pouvez définir la teinte, la valeur de teinte est fondamentalement celle-ci. Le spectre de couleurs, vous pouvez définir la saturation. Aussi, vous pouvez définir la luminosité, de la couleur. Il est donc beaucoup plus facile de travailler avec ce sélecteur de couleurs, juste ici. Vous pouvez également définir des dégradés, dégradés linéaires ou des radians circulaires, ainsi que des sensations d'image. Donc, nous allons beaucoup utiliser ce panneau pendant notre processus de conception. Sur le côté gauche, vous pouvez voir la liste des calques. Donc, si nous avons quelques couches, que vous pouvez voir toutes ces couches, vous pouvez également les regrouper, appuyant sur « Commentaire » et « G », et « Shift Command G » et les regrouper. Mais vous pouvez aussi avoir une icône là, et ici vous pouvez également personnaliser la barre d'outils, selon vos besoins. Donc, ce sont toutes les couches, que nous avons sur un tableau d'art. Ce qui est aussi vraiment important, c'est que vous pouvez avoir plusieurs pages. Vous pouvez donc avoir essentiellement plusieurs espaces de travail, dans un seul document d'esquisse. Ainsi, par exemple, vous pouvez travailler sur la conception de l'application, pour l'iPhone puis, sur ce tableau d'art, et sur cette page, vous pouvez travailler sur la conception web sur cette page. Ainsi, vous pouvez avoir plusieurs espaces de travail, avec plusieurs tableaux d'art ainsi. Enfin, ma fonction préférée avec le croquis, est l'outil de mesure. Donc, lorsque vous sélectionnez un rectangle, et vous appuyez sur la « touche Option », ou la « touche Alt » de votre clavier. Vous pouvez voir les mesures exactes des éléments de notation. Ainsi, vous pouvez le mesurer à la carte d'art, vous pouvez mesurer un élément à un autre élément. Vous pouvez utiliser ces mesures pour créer une image parfaite. C'est tout. C' est également très utile, si vous avez plusieurs objets, que vous souhaitez aligner. Est-ce, il y a des outils d'alignement, juste ici. Vous pouvez donc rapidement réaligner ces éléments comme vous le souhaitez. Vous pouvez donc les répartir uniformément, ou les positionner au centre du tableau d'art, si vous les regroupez et appuyez sur Entrée. Ainsi, nous utiliserons également cette alerte lors de notre processus de conception. 5. Installation de plugins: L' un des plus grands avantages de l'utilisation de sketch, est l'énorme quantité de plugins externes qui peuvent rendre notre travail beaucoup plus facile et plus rapide. Afin de gérer ces plugins. Il existe une option pour les plugins gérés. Ceci est également disponible dans les préférences. Si vous optez pour Sketch et préférences, vous obtenez également les plug-ins disponibles que vous avez déjà installés. Ou si vous voulez en avoir de nouveaux, vous pouvez simplement cliquer sur le bouton Obtenir des plugins et il vous mènera à Sketch site avec une liste des plug-ins les plus populaires. Vous pouvez également rechercher quelque chose comme le générateur de contenu, qui est un plugin génial. Donc, je recommande vraiment la vérification de ce plugin générateur de contenu qui sera également utilisé pour engager notre projet. Il est génial pour générer automatiquement le profil d'utilisateur, des images, des noms, ou tout texte. C' est un plugin vraiment utile. L' autre que nous allons utiliser est le bouton To Label. Il est super facile de réétiqueter un certain bouton que nous avons conçu. Je vais aussi vous montrer celui-ci en action. En outre, nous allons utiliser le Paddy qui est vraiment comme l'étiquette de modèle, mais avec beaucoup plus de fonctionnalités, donc c'est un réseau capable. Afin de télécharger et installer un plugin, vous pouvez simplement cliquer que télécharger le fichier zip et il téléchargera automatiquement le plugin pour vous. Je l'ai aussi téléchargé. Lorsque vous avez téléchargé le plugin, vous pouvez simplement double-cliquer sur le fichier du plugin Sketch dans le dossier. Il dit que le plugin est complètement installé, donc installé avec succès. Vous avez déjà le plugin qui est juste ici. Si vous souhaitez l'essayer, vous pouvez simplement créer un bouton simple. Disons que c'est Button. On peut regrouper ces deux éléments, puis on a activé le Paddy. Nous pouvons stratifier le pagayage de sorte que le haut en bas et à gauche à droite pagayage. Sélectionnez le haut et le bas. Ce serait 20 et le type gauche, mettez-le à 40 et appuyez sur appliquer, et il est déjà appliqué. Chaque fois que nous renommons un bouton dire, Nouveau bouton, il sera redimensionné automatiquement. C' est un plugin vraiment cool et pratique, et il est vraiment similaire à l'autre bouton que j'ai déjà mentionné. Si vous créez un autre bouton, nous pouvons dire qu'il s'agit d'un nouveau bouton et le positionner comme nous le voulons afin que nous puissions aligner au centre et les regrouper. Maintenant, nous pouvons utiliser ce plugin de bouton ou simplement utiliser la commande de raccourci G. Nous pouvons simplement renommer le bouton et tous les autres styles seront appliqués. Ces plugins sont vraiment similaires et vous pouvez utiliser n'importe lequel d'entre eux qui vous permettent d'aimer plus. L' autre plugin utile que nous avons également discuté est le Générateur de contenu. Si j'ai un couple de ton induit et des textos pour les noms, tu peux garder ton client dehors. Si vous sélectionnez cela, vous pouvez voir que nous avons besoin des photos personnelles et disons, images féminines. Il sera automatiquement rempli, et il est également vrai pour les noms. On a besoin de noms féminins et c'est déjà fait. Il est très facile de travailler avec vos données et avec vos images. 6. Créer une palette de couleurs: Créer une palette de couleurs agréable et cohérente peut parfois être difficile, mais laissez-moi vous montrer quelques conseils et astuces que j'utilise lorsque je cherche les couleurs parfaites. J' ai un couple de grands sites ouverts que j' utilise habituellement à la recherche des couleurs parfaites, donc l'un d'entre eux est uigradients.com, ici vous pouvez voir vraiment beaux gradients créés par des marques et d'autres designers, et vous pouvez aussi voir les valeurs exactes qu'ils utilisent, et cette ressource est énorme, fondamentalement vous pouvez trouver n'importe quoi ici, l'autre que j'aime vraiment utiliser est la roue de couleur d'Adobe, et ici vous pouvez définir différentes règles, donc comment cela fonctionne est que vous spécifiez d'abord la couleur principale, une couleur de marque, puis sur la base de différentes règles, il peut vous offrir d'autres couleurs pour une entreprise qui fait de la couleur, et la dernière que j'utilise est le Grabient, c'est vraiment similaire à la Les dégradés d'interface utilisateur, mais ils ont des types de dégradés vraiment différents, vous pouvez également les affiner et y ajouter la couleur supplémentaire afin qu'il soit plus interactif et plus modifiable. C' est également un excellent site pour vérifier, et je vais sauter dans le croquis, j'essaie toujours de commencer par définir le personnage principal, la couleur d'accent, ou la couleur prévue que nous allons utiliser tout au long du projet, c'est généralement la couleur des motifs puis les éléments les plus importants du site, et généralement essayer de chercher quelque chose autour des nuances bleues ou violettes de couleurs, donc je suis fondamentalement juste faire ressortir sa saturation et la luminosité et la valeur de teinte, il est donc vraiment bon de garder à l'esprit que la couleur doit fonctionner très bien à la fois sur une surface brillante ainsi que sur les surfaces sombres ou noires si nous avons une interface de répertoire comme un motif sombre dans l'application, ou juste un sombre fond, donc il est également bon de garder à l'esprit que cela doit fonctionner dans les deux cas, donc oui, ici, nous pouvons jouer avec différentes nuances et couleurs pour trouver celui qui correspond vraiment à notre marque, donc pour notre projet, J' ai déjà eu la valeur donc, vous pouvez également le copier et l'utiliser, donc c' est la couleur principale que nous allons utiliser sur notre page de destination, et nous aurons également une couleur pour le texte, certains concepteurs disent qu'ils ne recommandent pas d'utiliser plein noir pour le texte, parfois je suis d'accord, mais c'est vraiment en fonction du cas, meilleure pratique est d'utiliser un bleu vraiment foncé qui est presque noir, mais de nos jours, les écrans LED sont plus courants, par exemple sur l'iPhone 10, parfois, il peut être utile d'utiliser un noir parfait comme arrière-plan d' une section sur le site, par exemple, afin que vous puissiez décider. Vous pouvez ajouter un utilisateur noir parfait pour le texte, ou vous pouvez simplement utiliser une couleur bleu très foncé, et cela est également vrai pour le blanc, donc certains concepteurs disent qu'il est correct d'utiliser un complètement blanc pour le texte, mais c'est vraiment dépend aussi de l'arrière-plan. Si nous avons un fond parfaitement noir et que nous aimerions écrire dessus, il est vraiment recommandé de ne pas utiliser la couleur blanche car elle peut être vraiment brillante et plutôt diminuer le contraire, alors utilisez 90 ou 80 pour cent de blanc dans cas d'un fond noir. Mais pour notre projet, nous pouvons utiliser un noir parfait pour le texte et aussi blanc pour le texte blanc et les éléments, et ce qui doit être un besoin, c'est que si nous avons trois dégradés et de cette façon nous sommes des dégradés de marque, donc tous les les p, a, b dans la forme diagonale, et voyons, c'est la première étape du gradient, qui est ajouté ici et puis c'est la seconde. Il suffit de le positionner. Parfait. On a l'autre ici. En termes de dégradés, j'essaie généralement de créer et d'utiliser deux couleurs, ils se voisins les uns des autres. Dans ce cas, le jaune et l'orange sont presque rouges et ils sont vraiment proches les uns des autres sur le spectre de couleurs ainsi que vous pouvez voir le violet et le bleu, donc ceux-ci sont également à côté de l'autre, et de cette façon il est à peu près sûr qu'ils vous aurez fière allure l'un à côté de l'autre. Ils sont sûrs à utiliser dans un gradient sans aucun problème ni crainte d'erreurs. Maintenant, nous avons les couleurs principales que nous allons utiliser tout au long du projet, et ce que je recommande de faire est qu'ici vous pouvez enregistrer ces couleurs en tant que couleurs de document. Plus tard, vous pouvez simplement l'utiliser rapidement en un clic, donc nous gardons juste cette couleur, donc chaque fois que nous concevons et que nous avons besoin de la couleur spécifique, nous pouvons simplement sauter ici, puis cliquer dessus et elle sera là instantanément. Je recommande d'enregistrer ces couleurs, peut-être que le noir et blanc est inutile, mais si vous utilisez le bleu direct ou une nuance différente pour les couleurs claires, il est vraiment pratique de les mettre ici, et cela fonctionne également avec le dégradé afin que vous puissiez également enregistrer ces dégradés en tant que couleur du document, et nous les utiliserons beaucoup pendant le projet donc, il est vraiment recommandé de les mettre ici pour les prochains textes. Lorsque si nous concevons un bouton, par exemple, nous pouvons simplement passer rapidement à travers les gradients et [inaudible], nous avons le dégradé juste là. Nous avons notre configuration de couleurs et nous pouvons continuer avec le projet. 7. Choisir les polices: typographie est l'élément le plus important du design parce que nous voulons nous assurer que l'expérience de lecture est aussi grande que possible. Les gens sont toujours à la recherche de raisons d'arrêter de lire. Avec l'excellente typographie, nous pouvons être sûrs que les utilisateurs vont lire nos messages et lire serait un plaisir pour eux. Si vous souhaitez en savoir plus sur la typographie, je vous recommande de consulter deux articles. L' un d'eux est le Guide de cinq minutes pour une meilleure typographie. Il s'agit d'un excellent résumé des principes clés de la typographie. Au cours de notre pratique, nous avons vraiment utilisé ces techniques et principes. Mais si vous êtes intéressé par la typographie, je vous recommande vraiment de lire cet article et d'en apprendre plus sur différents poids des polices ainsi que les hauteurs de ligne et les longueurs de ligne. Ceci est un excellent article pour apprendre la typographie. Mais nous allons utiliser presque toutes ces techniques dans pratique dans le prochain chapitre ou vidéo. L' autre article est une typographie pratique qui viennent, est la typographie en 10 minutes. C' est aussi un excellent résumé des principes typographiques les plus importants. Pour les polices, j'utilise généralement Typekit, qui est un service payant d'Adobe. J' aime vraiment ce service et c'est vraiment abordable et ils fournissent beaucoup de haute qualité sur les polices premium. Mais pour notre projet, nous allons utiliser une police gratuite, car elle est disponible pour tout le monde et vous pouvez facilement la télécharger. Nous utiliserons la police Source Sans Pro. Fondamentalement, afin de le télécharger, vous pouvez simplement sélectionner cette police. Ensuite, vous avez ici un bouton de téléchargement et vous pouvez le télécharger sur votre ordinateur. Une fois que vous l'avez téléchargé, vous pouvez simplement ouvrir le dossier et vous commandez maintenant les fichiers de police dont vous avez besoin. Il suffit d'ouvrir l'application de l'annuaire téléphonique sur votre Mac et simplement glisser-déposer vos polices là-dedans. Si je fais cela, il recevra un message d'erreur car je les ai déjà installés. Mais c'est le processus complet d'installation d'une police sur votre ordinateur. Donc c'est vraiment facile. Après avoir installé la police, vous pouvez simplement aller dans votre document, puis vous commencez à taper. Vous avez la possibilité de sélectionner la police que nous venons d'installer. Donc vous avez toutes les évasions, le semi-Boyd, Boyd noir, régulier. Vous avez toutes les différentes versions de la police. Nous sommes donc mis en place et nous pouvons continuer à concevoir la page de destination. 8. Concevoir la page de destination: Enfin, nous pouvons maintenant commencer à concevoir notre page de destination. C' est le processus de conception. Tout d'abord, nous aurons besoin d'un plan de travail, nous pouvons simplement appuyer sur A sur le clavier ou simplement sélectionner Plan de travail, puis sélectionnez le « Desktop HD ». Comme la page de destination sera une page relativement longue, puis changez la hauteur à environ 7 000 pixels de hauteur. Plus tard, nous pouvons toujours changer cette valeur si ce n'est pas suffisant, donc nous pouvons à tout moment l'augmenter à 10 000 ou 8 000, peu importe parce que c'est modifiable à tout moment. Commençons par concevoir d'abord la navigation. Pour la navigation, nous aurons besoin du rectangle, qui est positionné exactement au coin, et la largeur est de 100 pour cent, donc c'est une pleine largeur, et la hauteur est de 50 pixels. En ce qui concerne les appels de couleur de fond, il devrait être blanc avec un 97 pour cent d'opacité, donc lorsque l'utilisateur via scroll, alors il sera en mesure de développer plus tard, puis le contenu, il peut être visible sur juste un peu, et nous pouvons également ajouter un flou d'arrière-plan de cellules authentiques. Afin d'avoir un peu de séparation en dessous, il est recommandé d'ajouter l'ombre, qui n'est qu'un pixel vers le bas. Les brasseries sont nulles et l'opacité est de 10 pour cent noire. Nous pouvons ajouter le logo de l'entreprise ou le logo de la marque, ce qui est vraiment simple. Tracker court. Nous devrions être 18 pixels, également gras. Afin d'avoir un peu plus de séparation, le dernier mot devrait être la couleur de la marque comme celle-ci. En termes de positionnement, le contenu du site sera de 1100 pixels de largeur. C' est, la boîte à l'intérieur de nous allons mettre en page, le contenu. Si vous le souhaitez, vous pouvez tourner des règles et vous pouvez également utiliser des guides ici. Vous pouvez simplement créer, en double-cliquant, créer deux lignes juste là et vous pouvez les garder comme référence. Mais je dis généralement juste que c'est 170 pixels de la gauche et aussi de la droite donc c'est assez facile et nous n'avons pas besoin d'un système plus complexe pour le moment. Si vous avez un autre actif de projet prêt, donc vous avez le contenu ici. C' est le nom de la marque. Il est des éléments de navigation. Nous pouvons simplement les créer aussi. Devrait être un 14 pixels en taille de police et le régulier, le premier nous avons les caractéristiques, puis nous avons la communauté, et le commencer, puis placez-les 60 pixels les uns des autres. Si vous les regroupez, positionnez-les au centre et étudiez. Maintenant, nous avons besoin d'un autre de ceux-ci pour la connexion, qui peut être un gras et nous avons aussi besoin d'un bouton get start. Pour le bouton, je recommande d'utiliser quatre pixels, rayon de bordure. Et utilisez également la couleur de la marque comme arrière-plan. Changez la couleur en blanc. En termes d'ombre, je recommande d'utiliser une couleur de la couleur du bouton qui vient de modifier la luminosité de sorte que les inconvénients du bit donc il est plus sombre autour d'elle et juste diminuer l'opposé à 10 ou 20. Modifiez également le texte ici en semi-gras, au lieu de gras et positionnez-le au centre comme celui-ci, et aussi celui-ci juste là. Parfois, il est aussi bon de croire à nos yeux et pas seulement aux chiffres. En raison de l'ombre et de l'équilibre visuel qu'il peut être aussi évident, le meilleur outil pour mettre exactement par chiffres au centre, mais aussi faire confiance à vos yeux dans le processus. Vous pouvez simplement télécharger, vérifier tout, et c'est parfait. Maintenant, nous avons le titre, le titre et le titre principal est celui-ci donc nous avons des pelles régulières automatiquement. Il devrait être un pixel 70 en taille de police et noir et aussi, comme ceci, et la hauteur de la ligne est de 72 et nous l' élevons aussi comme ceci et puis nous avons le texte de description régulière, que nous avons celui-ci. Aussi, c'est une bonne idée d'utiliser emojis parce qu'il est vraiment populaire de nos jours et il peut regarder votre produit ou service stable à jour et moderne donc c'est juste une belle touche d'utilisation de celui-ci et la taille de police ici est de 21. Aussi pour la hauteur de la ligne, je le multiplie généralement par 1,5, 1,6 donc il devrait être autour de 7-1 en général donc c'est correct pour la hauteur de la ligne. Oui, quelque chose comme ça. Mettez-le en pixels, ce qui le rend parfait. Maintenant, nous pouvons créer la section Aller à l'action de la page et dans notre cas, ce ne sera pas seulement un bouton. Ce sera un champ de saisie pour l'adresse e-mail parce que si sous les utilisateurs de donner ces adresses e-mail. Ici, nous pouvons créer un rectangle qui est 450 pixels en largeur et 23 pixels en hauteur et aussi le rayon devrait être de quatre pixels. La couleur d'arrière-plan doit être blanche. Cependant, afin de rendre cela visible, si vous appliquez des ombres. Une ombre serait d'un pixel vers le bas et de deux pixels flou et noir avec une opacité de 5 pour cent. Si vous allez ajouter une ombre supplémentaire, avec des valeurs différentes, mais le contraire sera également 5. Maintenant, il est beaucoup plus visible mais ils peuvent encore améliorer cela en appliquant une bordure qui sera juste en épaisseur sera juste une moitié et la couleur de bordure peut être le noir avec 10 pour cent d'opacité ou juste 5 pour cent d'opacité. Donc c'est vraiment à nous de décider ce que nous préférons pour notre projet, nous préférerons la version 5 pour cent. Ensuite, nous pouvons créer un bouton, qui est 140 et donc vous mettez la couleur de la marque. Ce que nous pouvons faire ici, c'est une position comme celle-ci. Si nous regroupons ces deux éléments ensemble, et que nous cliquons sur le rectangle plus grand en bas, nous pouvons l'utiliser comme un masque. Comme vous le voyez, nous avons le rayon de la frontière juste là donc c'est parfait de cette façon. Nous pouvons avoir le texte de 16 pixels qui dit cela. Commencez le suivi, car commencez à suivre vos émissions TV. C' est aussi une bonne idée d'utiliser des textes spécifiques en termes de boutons d'action, c'est juste des tests génétiques. Au lieu d'utiliser juste l'invité pointillé ou rejoindre ou s'inscrire, et il est également bon d'essayer différents phrasés comme commencer le trekking parce qu'il est plus connecté aux fonctions de l'application ou le service que cette société fournit. Vous pouvez également voir le positionnement ici. Maintenant, nous devons avoir le titre du champ de saisie, donc dire que c'est un e-mail, et nous pouvons également utiliser la couleur de la marque dans ce cas. Ensuite, nous pouvons avoir juste le texte automatique de base, comme your@email.com. Juste donner à l'utilisateur une idée de l'entrée dont nous avons besoin d'eux. On peut juste utiliser cette opacité de 30 pour cent. Juste comme ça. On le positionne comme celui-ci. Gardez toujours une variété de calques de sorte que tout se trouve dans un seul groupe ici, cause du masquage, il devrait être de 30 pixels au-dessous du texte de description. Si vous avez des partenaires, c'est une bonne idée de les mettre sur la page d'accueil. Au début. Les utilisateurs peuvent voir que vous travaillez avec de grandes marques et partenaires. Nous avons ces logos. Nous pouvons les scanner, donc la hauteur est de 30 pixels. Netflix peut en avoir 25. Si vous faites quelque chose. Toutes les majuscules, c'est une bonne idée d'augmenter le caractère et l'espacement entre les caractères, ainsi que de diminuer la taille de la police. Comme ça. Nous avons les nobles, et fixons cette opacité à 30 pour cent et les répartissons uniformément. Super, et positionnez-les comme ça. Impressionnant. Maintenant, pour rendre cette section de héros visuellement plus intéressante, créons quelques rectangles et utilisons les dégradés de marque que nous avons déjà créés lors du chapitre couleur dans la vidéo couleur. On peut avoir un carré de bécher avec 60 ou 40 pour cent du rayon de Puerto. Nous pouvons également utiliser cette fonctionnalité de coins lisses par mon croquis. Cela rend les coins plus arrondis fondamentalement. Nous pouvons sélectionner l'un des dégradés principaux et aussi réduire l'opacité à 90 pour cent au flou d'arrière-plan de 10 pixels. Utilisez également une ombre de huit et 16 pixels, et définissez-la 20 ou juste 15, comme ceci, et créez-en une autre dans la couleur pourpre de la marque. Vous voyez qu'ils sont au-dessus de l'autre et l'opacité et aussi l'arrière-plan floue, créant un effet intéressant. Maintenant, il suffit de les faire tourner. Alors faisons pivoter ceci, 65 pour cent en degrés et celui-ci en 45 degrés et essayons de simplement les aligner ou peut-être que c'est une bonne idée de les aligner d'abord, puis de les faire pivoter. Ceux-ci sont parfaitement alignés de cette façon et nous pouvons juste les faire tourner maintenant. C' est parfait, oui, laissez-moi les regrouper. Il est important que nous ayons la barre de navigation. On les colle juste ensemble et on les place en haut. Vous pouvez également renommer ce groupe si vous le souhaitez. Parfait et nous avons besoin d'un autre rectangle, qui serait 300. Nous utiliserons le dégradé bleu et appliquerons toujours la même opacité et le même flou d'arrière-plan, aussi l'ombre. Tournez-le à 45 degrés et placez-le ici. Maintenant, nous pouvons obtenir la maquette de l'iPhone 10 enfin, et l'utiliser. Il est de 310 pixels de largeur. Ajoutez également une ombre, comme 20 pixels vers le bas, 30 pixels de flou, et 10 % d'opacité, comme ça. Maintenant, vous pouvez jouer avec le positionnement jusqu'à ce que vous trouviez la position parfaite avec laquelle vous êtes à l'aise. Quelque chose comme celui-là, génial. Eh bien, si vous voulez voir ce qui est visible exactement au chargement de la page. Ce qui est au-dessus de la police, en dessous de la police. Nous pouvons simplement sélectionner le tableau d'ajout et modifier la hauteur à 900 pixels. Il s'agit de la résolution par défaut de Retina MacBook Pro. C' est 1440 par 900. Ceci est pratiquement visible sans accroupie sur la page de destination. Si vous venez d'arrêter ici et je pense que pendant une seconde, vous pouvez voir que le visiteur de votre Instagram que ce qui est le principal point de vente ou la principale caractéristique de cette application, comment l'application ressemble. Ils ont aussi un peu d'explication. Ils peuvent immédiatement s'inscrire et commencer à utiliser. S' ils sont autorisés à avoir un compte, ils peuvent se connecter. Ils peuvent également s'inscrire et ils peuvent également donner leurs adresses e-mail, et ils voient également qu'il y a vraiment de grandes marques dans le cadre de ce service. Ils peuvent automatiquement commencer à suivre leurs émissions TV avec Netflix, ou avec une analogie, des systèmes de réseau domestique ou essentiellement simplement les appareils normaux. Fondamentalement, toutes les informations nécessaires sont juste ici pour l'utilisateur décide s'il souhaite s'inscrire instantanément. Mais dans le cas où ils ne sont pas prêts à poursuivre le processus d'inscription, nous pouvons leur donner plus d'informations sur cette application et ce service. Nous pouvons simplement continuer avec les textes supplémentaires. Nous avons la section des fonctionnalités à venir. Voyons voir. Nous avons les fonctionnalités, et ils ont également celui-ci pour le contenu. Il pourrait être plus rapide de juste, c'était celui-ci, rapidement saisir le contenu pour le site comme celui-ci. Maintenant, nous pouvons le définir trop léger et 80 pour cent d'opacité pour le rendre un peu moins significatif et peut avoir celui-ci en noir et aussi celui-ci. D' accord. Maintenant, nous devons juste diminuer la hauteur de la ligne ici, comme ça. C' est comme dans le cas du titre principal. Maintenant, nous allons créer les trois fonctionnalités les plus importantes de l'application et du service. Créons un rectangle avec une largeur de 300 pixels. Ce sera notre guide. Il ne sera pas visible dans la fente vide. On va juste l'utiliser comme guide. Vous les positionnez juste. Maintenant, nous pouvons coller le contenu à l'intérieur. Nous avons le suivi automatisé, qui ne sera qu'un. La taille de la police doit être de 18 pixels. Ensuite, nous avons une description comme celle-ci. Ce n'est que 16 pixels et la main droite est 24. Ici aussi, la largeur peut être 300 pixels comme ça et peut-être un demi En savoir plus bouton et lien. Dans la couleur de la marque, et aussi avec la petite icône, aiguiser comme. Afin de créer celui-ci, nous devons avoir un carré de six par six et enlever pour remplir les bordures, et aussi définir l'épaisseur à deux. Maintenant, il suffit d'appuyer sur Entrée, il va ouvrir cette forme et vous avez les ciseaux, et vous pouvez simplement enlever deux d'entre eux. Maintenant, je dois juste le faire tourner comme ça, et juste le positionner. Vous pouvez maintenant simplement regrouper et le placer au milieu. Parfait. Maintenant, nous devons créer une petite icône, c'est un rectangle 50 par 50. Nous pouvons à nouveau utiliser l'un de nos dégradés de marque. Environ 14 pixels de rayon de bordure avec coin lisse et appliquez également un peu d'ombre comme dans le cas du bouton Appel à l'action dans la navigation. Nous pouvons simplement saisir une couleur et la mettre à 20 dans l'opacité, ou en fait seulement 15, et ensuite nous pouvons placer le bouton Play dedans. Si nous allons à Icônes, Caractéristiques et le jeu, mais nous pouvons le positionner. Gardez à l'esprit que le positionnement du bouton Play peut être un peu difficile, alors ne faites pas confiance aux chiffres essaient de faire confiance à votre oeil. Autour de ça. Il suffit de les regrouper et de les placer au milieu. Super. Maintenant, il suffit de répéter ces étapes. Maintenant, nous allons créer une séparation interactive entre la section des deux entités. Peut-être que j'utilise les affiches de la série télé. Créons un rectangle avec une largeur de 220 pixels et la hauteur de 330 pixels. Peut-être que j'utilise un rayon de bordure de six pixels, et peut-être que je les positionne 30 pixels entre chacun d'eux comme ceci. Définissez l'ombre avec 0, 10, 20 et 10 pour cent pour l'opacité, et peut-être que j'ai besoin de sept d'entre eux, donc une de plus comme ça. Maintenant, nous pouvons les regrouper, placer au milieu et le positionner comme ça. Maintenant, nous pouvons changer le remplissage de ces deux images et juste commencer à utiliser les images de sorte que nous avons dans les affiches de l'émission de télévision. Nous avons les images dont nous avons besoin. Vous pouvez simplement glisser et déposer là et c'est fait. Faites-moi savoir laquelle est votre préférée ou y a-t-il de nouvelles émissions de télévision ici que vous n'avez pas encore regardées, ou si vous les avez regardées, qui était votre préférée. Je suis juste curieux. Voyons House of Cards au milieu et The Flash, et le dernier. Parfait. D'accord. Nous avons une phase interactive et une séparation visuellement intéressante entre les différentes sections. Maintenant, nous pouvons nous concentrer sur la création de la section de cas réel. Maintenant, créez la section showcase des applications, alors créons un sous-titre ici. Prenez le contenu, attrapez l'autre, parfait. Réglez la largeur sur 460 et alignez-la vers la gauche. Celui-ci aussi, définissez-le gras et la taille de la police est de 46 avec la hauteur de ligne de 50. La hauteur de la ligne devrait être d'environ 28, et aussi diminuer le contraire, sorte qu'il obtienne moins d'attention. Celle-là est mieux entre les éléments. Positionnez-le comme ça. Nous devons créer ces Tagore interrompues. Si nous utilisons à nouveau la technique des ombres différentes. C' est la première ombre, et nous en avons une seconde aussi, comme ça. Réglons la largeur à 340 et la hauteur à 54, et définissons le texte. Maintenant, nous pouvons saisir les icônes. Donc, dans les icônes, vous avez un dossier pour le cas réel, et à l'intérieur, vous avez le tableau de bord. Il suffit de le placer à l'intérieur et de le positionner. Parfait. Maintenant, il suffit de les copier et d'obtenir le contenu des autres boutons. Parfait. Prends juste les icônes. Super. Maintenant, nous allons utiliser les captures d'écran que nous avons. Alors commencez par la capture d'écran de l'application. Créons simplement un rectangle avec la largeur de 820 et la hauteur de 511. Ce sera le masque que nous allons utiliser. Il suffit de le placer sous le séparateur. Maintenant, si nous attrapons la capture d'écran, donc nous avons la maquette de l'application web. Il suffit de le placer ici. La largeur peut aussi être de 820. Essayez de positionner comme ceci juste au-dessus du rectangle que nous avons créé. Maintenant, vous pouvez simplement les regrouper et utiliser le rectangle comme base du masque. Maintenant, vous pouvez définir le rayon de la bordure à six et appliquer également l'ombre, qui sera 0820, et le contraire sera un peu 10. Maintenant, vous voyez que nous avons des coins arrondis, et nous avons aussi l'ombre. Parfait. Maintenant, nous pouvons également ajouter la maquette de l'iPhone ici aussi. Donc, définissez la largeur sur 65 et ajoutez également de l'ombre. Super. Maintenant, nous le positionnonsjuste positionnons positionnons ici. Impressionnant. Donc, de cette façon, il y a aussi un aperçu de cette application. Vous pouvez voir la maquette Eiffel dans son intégralité aussi. Ensuite, l'utilisateur clique sur ces différents modes. Le contenu de ceci peut changer en fonction de Tagore sélectionné ici. Maintenant, nous pouvons créer le témoignage en tant que section. Nous allons simplement créer le grand rectangle qui sera la base de cette section et juste définir l'arrière-plan en noir. Placez-le 140 en dessous de la section précédente. Maintenant, nous pouvons placer le contenu ici, et il suffit de copier les coller et de changer la couleur en blanc. Nous aurons également besoin de ce petit sous-titre ici. Dis que c'est de la communauté. Et nous avons le contenu. Impressionnant. Il suffit de changer un peu la position afin que nous ayons un espace beaucoup plus actif autour de cet élément. Il suffit de créer le bouton, que nous avons la couleur d'impression et aussi Lire plus comme texte sur elle. Oui, exactement. Définissez le poids de la police sur semi-gras. Aussi, ligne centrale. Trouve-toi juste sur les détails. En outre, la taille de la police doit être 16. Vous pouvez aussi avoir la même ombre comme ici. Que nous utilisons cette couleur pour l'ombre. Maintenant, créons les cartes pour les témoignages. Il suffit de créer un rectangle d'une largeur de 260 par 210 et de définir le rayon de porter à 10 pixels et vous pouvez également utiliser cette fonction de la plupart des coins. Définissez la couleur d'arrière-plan sur blanc et réduisez l'opposé à huit. Ensuite, nous allons créer un cercle pour l'image de profil, puis aussi un calque de texte. Assurez-vous qu'il est aligné à gauche. Il devrait être semi-gras et taille de police de deux pixels et demi. Maintenant, à partir de la grille de fruits, il suffit de saisir l'icône Twitter et vous pouvez juste mettre à jour la couleur et régler le contraire à 30 pour cent comme ça. Maintenant, je peux juste prendre un de ces témoignages. Il suffit de le placer là-dedans. Mettez à jour la hauteur de la ligne et diminuez également le contraire et assurez-vous qu'elle est parfaitement positionnée. Maintenant, nous avons juste besoin d'ajouter une date et fixer, en face à 50 pour cent et juste une date normale. La façon dont cette carte fonctionne est que lorsque l'utilisateur clique dessus, son flux sera dirigé vers le tweet réel. Ou vous pouvez utiliser aussi Facebook ou le message Facebook réel. C' est vraiment important parce que sinon, si c'est juste le nom et l'opinion ou juste une citation ici, la plupart des utilisateurs disent que c'est une fausse citation et ils disent que le propriétaire de l'entreprise ou le concepteur ou développeur juste compris et c'est juste une fausse opinion. Mais en fait lier celui-ci à un vrai Tweet ou message Facebook et les lier ensemble. C' est la meilleure façon de créer des témoignages parce que de cette façon l'utilisateur peut valider par lui-même que, « Ok, c'est une vraie opinion. » « C'est une vraie citation et c'est le post Facebook original ou tweet à elle. » C' est vraiment important de le faire parce que cette façon donne beaucoup plus de crédibilité à notre page de destination. Maintenant, nous pouvons tout regrouper et créer une deuxième version avec l'autre. Vous pouvez utiliser des guillemets ou vous pouvez simplement utiliser le texte, c'est à vous de décider et juste mettre à jour la hauteur. Que se passe-t-il si vous avez d'autres exemples pour le cours ? Vous pouvez utiliser plus d'exemples que je dois. Donc, vous pouvez personnaliser cela. Maintenant, nous allons juste sélectionner chaque seconde des images de profil et aller à générateur de contenu photos personnelles et femelle et également utiliser les couches de texte de celui-ci. Aussi, allez à générateur de contenu noms personnels et féminins. Il suffit d'aller chercher les photos du maire ainsi que les noms. C' est ainsi que vous pouvez générer rapidement du contenu 3D dans votre conception. Donc juste des noms et parfait. Maintenant, nous pouvons également préparer cela ensemble et juste mettre à jour l'espacement un peu. Parfait, maintenant, nous pouvons diminuer la hauteur de cet arrière-plan et regrouper tout ensemble et utiliser le calque d'arrière-plan comme base du masque. Parfait. Maintenant, nous sommes arrivés à la dernière partie de la page d'accueil, qui n'est pas une section d'appel à l'action. C' est très facile parce que les [inaudibles] sont des éléments existants. Comme celui-ci, vous pouvez juste le placer juste en dessous la section des témoignages comme celle-ci et nous pouvons mettre à jour le contenu ici. Ce n'était pas aligné au centre. Donc je répare ça aussi. Parfait. Maintenant, je viens de mettre à jour le contenu et nous pouvons également utiliser l'écart [inaudible] existant que nous avons créé comme ceci. Maintenant, nous pouvons avoir quelques icônes pour les profils sociaux de l'entreprise. Nous pouvons commencer avec eux sur Twitter, puis Facebook et YouTube, et les distribuer uniformément. Ok, il suffit de les regrouper, de régler le contraire à 20 % et de les aligner au milieu. Maintenant, nous avons le pied de page, ce qui a été très simple. Il suffit de le définir sur semi-gras et de cinq pixels pour le centrer. Configurez-le jusqu'à 30 pour cent et rapprochez-le également. Super, et il suffit de repositionner la hauteur de la planche d'art. Parfait. Maintenant, nous sommes prêts avec la prochaine version de la page de destination. Félicitations pour avoir complété la version manuel de cette page de destination. J' espère que cela a été utile. Maintenant, nous pouvons continuer et nous concentrer sur la version mobile aussi. Continuons à regarder. 9. La conception pour mobile: Créons la version mobile de notre page de destination. abord, nous aurons besoin d'une sortie à nouveau, puis pour mobile, je vais généralement avec l'iPhone 8 ou l'iPhone 10 tailles. Mais dans notre cas, les deux tailles sont identiques car la largeur de l'iPhone sera la même. Choisissons la sortie iPhone 10 et la rendre plus longue comme dans le cas de la version de bureau. Maintenant, nous pouvons utiliser les mêmes éléments que nous avons utilisés pendant la version de bureau et nous pouvons simplement les réutiliser à nouveau. Nous avons modifié les paramètres. Nous avons la barre de navigation, c'est pleine largeur et puis nous avons le logo de la marque, juste comme ça. Ensuite, si vous regardez la navigation, ces liens sont des encodages, donc ils font simplement défiler vers les différentes sections de la page, et je pense que l'utilisation [inaudible] pour inutile pour la version mobile, ce est vraiment nécessairement d'aller au bouton Action. Au lieu de rendre cette barre de navigation bondée avec beaucoup d'options différentes, je veux juste garder le bouton essentiel et le plus important, qui est le bouton Démarrer, comme ceci. Maintenant, copions et collez les autres éléments de la section héros. Nous avons le titre, sous-titre et la partie appel à l'action, et nous les copions et les collons ici. Nous allons mettre à jour les tailles de police afin d'essayer d'apparaître 42 pixels avec 48 pixels de hauteur de ligne, comme ça, et la largeur sera de 343 pixels. De cette façon, nous avons 16 pixels d'espace négatif des deux côtés, et nous mettrons également à jour la navigation en conséquence. Pour ce texte, nous aurons la taille de police de 18, et la largeur ici sera la même. Aussi, n'oubliez pas de mettre à jour la hauteur de la ligne également. Nous avons juste besoin de mettre à jour la partie appel à l'action, et nous aurons également besoin des logos de la marque. Nous pouvons le mettre à l'échelle ou nous pouvons également mettre à jour la vue d'espacement si vous le souhaitez. Donc peut-être juste l'échelle un peu comme ça et mettre à jour l'espacement. Maintenant, nous pouvons juste saisir les visuels et les faire 60 pour cent à l'échelle. Vous pouvez également copier le téléphone et mettre à jour la largeur à 300 pixels. Maintenant, nous pouvons également continuer à copier la section des fonctionnalités. La faute de frappe de police est là. Si vous regardez le texte ici, nous pouvons voir qu'il n'y a qu'un seul mot sur la dernière ligne. Donc, pour éviter cela, c'est peut-être une bonne idée de mettre à jour la taille de la police, donc c'est une technique. Mais dans le cas où nous changerons le texte, alors nous devrons changer la taille de la police aussi. Vous pouvez l'adapter au contenu lui-même, mais dans une règle générale, j'aime aussi les garder alignés à gauche parce que si vous regardez les autres sections et les autres parties de fonctionnalités, cela aura plus de sens et il semblera plus cohérent. Lorsque nous copions ces éléments, vous pouvez simplement avoir à aligner ces éléments également. Vous pouvez simplement répéter le même processus avec les autres fonctionnalités également. Ici, vous avez une option pour centrer tout aligner si vous le souhaitez, ou vous pouvez juste aligner tout à gauche. La seule chose à garder à l'esprit que pour être cohérent ici. Donc, si vous décidez que vous voulez centrer cette ligne alors, vous devriez faire la même chose avec le reste mais si vous voulez aller avec l'alignement gauche comme je l'ai fait, assurez-vous d'aligner tout à gauche ici aussi bien. Nous pouvons également mettre à l'échelle toute cette gamme d'émissions de télévision. Peut-être que c'est trop grand. J'aime ça. Vous pouvez également mettre à jour l'espacement à 16 ou 15 pixels de chaque côté. Maintenant, nous pouvons continuer avec la partie vitrine. Donc, comme avant, nous allons simplement copier et coller le contenu et mettre à jour la taille de la police. Cela devrait être de 32 pixels avec une hauteur de ligne de 38 pixels. En outre, définissez la largeur et centrez-la. Celui-ci doit être à 16 pixels avec une hauteur de ligne de 24 pixels. Mettez également à jour la largeur et centrez-la. Super. Nous pouvons également copier ces bascules. Super. Ensuite, on peut juste copier le téléphone. Ici, je n'ai gardé que la maquette de l'iPhone puisque, lorsque le visiteur voit ce site sur son téléphone, ils aimeraient probablement avoir une idée de la façon dont l'application va ressembler sur leur téléphone. Ils ne seront pas vraiment intéressés par la réplication de texte en ce moment. Mais vous pouvez également inclure cela aussi. Afin d'avoir une vue plus simple et de lui donner plus de contexte à l'utilisateur. Je recommande d'utiliser uniquement la maquette de l'iPhone 10 en cas d'affichage téléphonique. Maintenant, nous pouvons avoir la section de la communauté, la section des témoignages. Tout comme dans le cas de la version de bureau, l'idée est de créer l'arrière-plan , puis de copier le texte. Mettez également à jour le contenu. Copiez également le bouton. Maintenant, il suffit de copier les cartes. Pour ce faire, nous allons utiliser et clouer la carte d'une manière différente. Au lieu de les positionner verticalement, nous les positionnerons horizontalement. Donc, nous allons juste avoir un peu de place pour jouer ici. Super. On peut juste les mettre côte à côte. Nous mettrons à jour la hauteur de chaque carte afin que chaque carte ait la même hauteur. Super. On peut juste les coller ici. On n'aura pas besoin de se reposer pour l'instant. Super. Maintenant, nous mettons juste à jour l'espacement. Parfait. Enfin, nous avons juste à créer la partie appel à l'action du pied de page. Pour ce faire, tout d'abord, il suffit de copier et de coller ces fonctionnalités bloc de texte. Nous pouvons centrer tout aligner et mettre à jour le contenu. Pour la partie appel à l'action, nous pouvons simplement utiliser le même champ de saisie e-mail de la section Héros. Il suffit de copier les icônes sociales et le texte du pied de page. Assurez-vous que l'opacité est de 20 % et mettez à jour les distances. Assurez-vous que vous centrez tout aligner. Vous pouvez simplement faire cela régulier et seulement 11 pixels dans le cas d'une taille de police. Super. Nous avons juste besoin de mettre à jour la hauteur de ce tableau publicitaire. Incroyable. La dernière touche que je fais habituellement à ce stade est de tout regrouper afin d'avoir un fichier d'esquisse plus propre. Nous pouvons donc les regrouper et vous le nommez comme navigation. Alors, c'est le « Héros ». Nommez ce héros, et ceci ici avec des fonctionnalités. Voici les émissions de télé. Ensuite, nous avons la vitrine de l'application. Témoignages. Enfin, nous avons l'appel à l'action du pied de page. Nous pouvons simplement les mettre à jour et les trier comme ils apparaissent dans le document. abord est la navigation, puis nous avons le héros, puis les fonctionnalités, puis les émissions de télévision et de vitrine d'application, témoignages et appel à l'action de pied de page. Incroyable. Maintenant, nous sommes prêts avec notre conception. Il est prêt à être remis à un développeur. Vous pouvez travailler sur l'animation et commencer à le développer et faire de ce site un véritable site Web. Maintenant, vous avez l'image design parfait pour la version de bureau ainsi que pour la vue mobile. Le développeur peut aller à partir de ce document ou vous pouvez l'aller plus loin et faire de votre page de destination un prototype, ou même un vrai site Web. 10. PROJET DE CLASSE: Hé, là. Félicitations pour avoir presque terminé ce cours. Maintenant, c'est ton tour. Je voudrais que vous créez un design de page de destination, comme nous l'avons fait dans les vidéos précédentes. Si vous disposez déjà d'un produit ou d'un service, vous pouvez créer une nouvelle conception de page de destination afin d' obtenir plus de clients et d'augmenter les conversions. Si vous avez une excellente idée pour une application ou un service impressionnant, vous pouvez également concevoir la page de destination pour qu'elle mesure l'intérêt des gens. Ou si vous êtes concepteur, et que vous souhaitez mettre à jour votre portfolio, vous pouvez reconcevoir votre page d'accueil, ou si vous avez une newsletter, vous pouvez concevoir la page de destination afin d'obtenir plus d'abonnés. Enfin, si vous souhaitez simplement vous concentrer uniquement sur les parties visuelles, vous pouvez utiliser le même mémoire de projet, comme nous l'avons fait pendant ce cours, et créer une nouvelle page de destination pour notre bref dossier, nous utilisons le même texte et images. Assurez-vous de poster vos projets ci-dessous, et je serai là pour vous aider et vous donner vos commentaires à tout moment. 11. Finition: Félicitations, vous avez terminé avec succès ce cours. J' espère que cela a été utile et que vous avez appris quelques nouvelles techniques. J' ai vraiment hâte de voir vos designs dans les projets de classe, et si vous avez besoin d'aide, hésitez pas à demander à tout moment. N' oubliez pas de laisser un commentaire si vous avez apprécié ce cours et de le partager avec d'autres. Si vous souhaitez voir mes autres projets, téléchargez gratuitement mes ressources de conception ou lisez des articles de design en profondeur. N' oubliez pas de consulter mon Profil Triple, et si vous souhaitez être informé de mes nouveaux projets, vous pouvez rester à jour sur Twitter. Faites-moi aussi savoir si vous êtes intéressé par les futures classes, que ce soit le prototypage ou le développement frontal. Encore une fois, merci beaucoup de rester dans le coin et j'espère vous voir la prochaine fois. 12. Bonus : flux de travail Dribbble: Salut, bienvenue dans cette leçon bonus. Dans cette vidéo, je vais vous montrer comment je prépare mes dessins pour un Dribbble. Si vous ouvrez notre fichier de croquis, je crée vraiment une autre page juste pour le plan Dribbble. Il suffit de copier la conception de la pâte que je vais inclure dans cette prise de vue. Pour le Dribbble, nous aurons une règle stricte pour le téléchargement, ce qui signifie que la largeur doit être de 800 pixels et la hauteur doit être de 600 pixels. Ce sera l'image que vous pourriez télécharger sur Dribbble. Ici, je viens de copier cette conception et de mettre à jour la hauteur à 900 pixels, sorte que seule la section Hero et la Navigation sont visibles. Maintenant, je vais convertir ce design en juste une image régulière. Pour ce faire, il suffit de vérifier cette couleur d'arrière-plan juste pour que l'arrière-plan remplisse l'outil en blanc régulier , puis vous pouvez simplement l'ajouter à un JPEG comme format. J' ai juste glisser-déposer ce design et maintenant j'ai l'image juste ici. Cela sera inclus dans ce plan Dribbble. En arrière-plan, je vais créer un rectangle et je vais définir la couleur sur blanc et juste ajouter un pour cent de saturation juste un peu. Il n'est pas complètement léger, il a généralement une teinte de bleu ou de violet, tout comme dans notre design, comme ça. Maintenant, je mets la largeur à 750 ou affichage sur entre les numéros et costumes peut-être oui, le 720 et que j'ai pris le centre. Je vais juste créer un autre rectangle pour le masque et le centrer. Maintenant, nous pouvons regrouper ces deux ensemble et le faire comme un masque et régler le rayon de la frontière à quatre ou six, nous fixer, laisser toujours quatre pour le moment. Maintenant, nous pouvons appliquer une ombre pour ce groupe et aussi nous assurer que pour l'ombre, nous utilisons également un peu de bleu foncé teinté avec une nuance bleue. Cela rendra le design plus important et conforme aux tendances de Dribbble ces derniers temps. Juste comme ça. Maintenant, dans le cas de rendre cette photo un peu plus intéressante, si vous utilisez les cartes, tout comme nous exigeons que nous l'utilisions pendant le processus de conception et d'ajouter une base de données de caractères éditer aussi. Nous pouvons simplement regrouper ceux-ci et la peau à 60% et les placer derrière eux. J' essayerais juste de l'aligner parfaitement. Maintenant, faites la même chose avec l'autre aussi. Maintenant, si vous avez un coup d'oeil, vous pouvez voir que le navigateur lui-même ou le site lui-même, il semble être transparent d'une manière étrange que vous voyez toujours la barre de navigation. Mais alors le diagramme que je voulais dire est effondré avec le contenu aussi. Ce qui en fait un effet visuel vraiment agréable et intéressant. C' est littéralement en ligne avec les clients de Dribbble de nos jours. Ouais, fondamentalement c'est une version de faire un tir ou l'autre que je devrais utiliser est juste placer les rectangles d'une manière intéressante et attrayante. Peut-être juste essayer de jouer avec le positionnement d'eux afin que l'arrière-plan n'est pas seulement un blanc ennuyeux et il est rectangles vous pouvez le rendre plus intéressant et plus attrayant pour vos adeptes et peut-être pour d'autres qui sont à la recherche l'inspiration. Maintenant, la seule étape que vous avez à faire est d'exporter réellement cette illustration, donc dans un format 1x et PNG, vous pouvez simplement l'exporter facilement vers votre prochaine application comme ça et maintenant vous pouvez la télécharger sur Dribbble. C' est ça. Vous avez les tirs Dribbble prêts. Merci encore de m'avoir rejoint pour ce cours et j'espère que vous avez appris quelque chose et que c'était utile. Je suis vraiment impatient de recevoir vos commentaires et aussi vos commentaires. Merci beaucoup et passez une belle journée.