Flux de travail pour une conception Web moderne → Idéation, création de fils, maquettes et prototypes.

1. Introduction: Avec la conception Web réactive, la conception Web adoptive et des centaines d'applications de conception en ligne, beaucoup de choses ont changé avec le processus de conception Web au cours des dernières années. Designers, ils Sketch, ils Wireframe, ils Prototype, ils collaborent même avec leurs développeurs, ils génèrent même des guides de style en ligne pour leurs développeurs. Nous allons couvrir tout ce processus moderne de conception Web au cours de ce cours alors laissez-moi vous montrer ce que nous allons couvrir dans ce cours en détail. Dans ce cours, nous allons concevoir un projet de site web réactif à partir de zéro, ce qui impliquera l'obtention d'informations de clients, l'étude des mémoires de conception, Ideation ou au moins des croquis, Wireframing, puis Mockup ou web design pour grands, moyens ou petits écrans ainsi que la configuration et le calcul des grilles, et enfin, nous créerons des spécifications et des guides de style pour nos développeurs. A la fin des flux et des interactions, nous allons construire un prototype simple en utilisant InVision App. Je vais également vous montrer quelques approches et cadres de conception comme Atomic Design, la conception avec l'approche Content-first, Responsive Web Design Considérations et Designing for Developers. Les outils que nous utiliserons au cours de ce processus sont maquettes Balsamiq pour créer des trames filaires. Ensuite, Adobe Photoshop pour créer votre web design ou maquettes pour les grands, moyens et petits écrans. Ensuite, nous allons utiliser Zeplin pour créer des guides de style en ligne pour les développeurs, et à la fin nous allons créer un prototype simple avec l'application InVision. Maintenant, quels problèmes je vais résoudre pendant ce cours ? Comment entrer dans l'esprit de votre client, et où obtenir des inspirations de conception pour commencer votre conception, et comment calculer votre grille pour différentes tailles d'écran, et comment configurer des guides pour différentes tailles d'écran, dois-je besoin de contenu avant de concevoir, et mon design peut-il être facilement converti en code, quelles sont les dernières approches efficaces en matière de design web réactif ? Je vais répondre à toutes ces questions pendant ce cours. Ce cours n'est pas destiné aux débutants dans Photoshop. Si vous étiez un débutant, vous devriez regarder mes autres cours de conception d'interface utilisateur. Salut, je suis Ahsan [inaudible] et je conçois interfaces utilisateur depuis huit ans et je suis un freelance. Si vous voulez apprendre mon processus de création de superbes designs web et de design web réactif en utilisant des tableaux d'art et comment vous allez créer un site web convivial cool, alors vous devriez suivre ce cours. Voyons à l'intérieur de ce cours. 2. Ce que nous aborderons dans ce cours: Maintenant, laissez-moi vous montrer un peu en profondeur ce que nous allons couvrir dans ce cours. En fin de compte, nous allons essentiellement concevoir ce site web réactif pour tablettes, mobiles et vues de bureau ainsi que création de leurs grilles que vous pouvez voir ici, il est quadrillage de quatre colonnes. Ensuite, nous avons huit colonnes grille pour tablette. Laisse-moi te montrer. Nous avons une grille de 12 colonnes pour notre bureau. Autre que cela, nous allons également créer cette documentation en ligne droite. Vous pouvez voir ici l'espacement et les spécifications de nos développeurs. Parallèlement à cela, nous allons également développer notre guide de style de l'interface utilisateur. Vous pouvez voir ici toutes les couleurs, dégradés, topographie, motifs, iconographie, éléments de formulaire, éléments d'interface utilisateur, tout ce que nous allons concevoir en utilisant le guide de style. Au cours de notre processus de conception, nous allons créer plus de planches. Vous pouvez voir ici, j'ai créé un tableau de plus ici. Ensuite, nous allons créer un guide de style à la fin, ce qui est sera en utilisant Zeplin. Vous pouvez voir ici tout le code, couleurs, les ombres, et tout le textile généré ici. Ensuite, nous allons également créer un prototype pour les flux ou animations montrant à vos développeurs que c'est ce que je voulais dire. Vous pouvez voir ici comment cette barre de navigation sort et s'estompe. Peu de concepts de conception que je vais couvrir sont la conception atomique. Vous pouvez voir ici comment nous allons concevoir en utilisant la chimie des atomes, des molécules, des organismes, des modèles et des pages. Nous allons également concevoir en utilisant ce système de grille 8 points, qui est emprunté à Google Material Design et je vais vous montrer comment nous allons utiliser cette échelle de 8 points système de grille dans nos conceptions. partie de la partie que nous allons couvrir est de UX, qui va être notre idée ou notre esquisse et obtenir des détails de vos clients et comment nous allons obtenir des croquis initiaux de notre client, comment nous allons concevoir des filaires, et comment nous allons traduire nos filaires en maquettes. Comment nous allons livrer ces maquettes dans des style, puis des guides de style codés pour nos développeurs à la fin. Si vous avez des suggestions sur ce cours, vous pouvez me demander directement, vous pouvez m' envoyer un message, vous pouvez poser toutes les questions que vous aimez. Si vous êtes resté quelque part ou si vous voulez ajouter une leçon ou que vous voulez plus de détails sur ce sujet, faites-le moi savoir que je vais vous aider. Commençons. 3. Requriements du cours: Commençons maintenant par ce dont nous aurons besoin pour ce cours. On va avoir besoin de deux choses. L' un est votre niveau de compétence et le second est le logiciel comme Photoshop. Nous avons besoin de la dernière version de Photoshop CC en ce moment c'est 2017. Je ne sais pas quand vous allez acheter ce cours. Ça pourrait être 2018 ou autre chose. La dernière version de Photoshop, vous pouvez télécharger la version d'essai de Photoshop ou vous pouvez acheter leur photographie, package CC mensuel emballé. N' essayez pas d'aller pour une seule application, nous avons juste besoin d'un paquet de photographie mensuel. C' est juste pour $10 par mois. Maintenant, en termes de compétence, ce que nous allons avoir besoin, c'est que nous allons avoir besoin au moins des compétences que j'ai écrites dans mon cours de conception d'interface utilisateur dans Photoshop. Vous pouvez voir sur cet écran en ce moment. Vous devez au moins savoir comment vous allez configurer Photoshop pour la conception de l'interface utilisateur, comment utiliser Photoshop, comment configurer des touches de raccourci personnalisées et comment installer des extensions, des ressources, des scripts, tout. Je pense que les deux ou trois premières sections, vous devez savoir comment faire ces choses avant de commencer ce cours. Aussi, si vous êtes inquiet au sujet des combinaisons de typographie, vous devez suivre mon cours de typographie de type pour vos designers. Je ne vais pas vous montrer tous les trucs et astuces, comment j'ai sélectionné le faux pour ce design. Ce cours couvrira spécifiquement toutes les étapes et le processus d'un concepteur web moderne, de son processus de conception jusqu'à sa manipulation aux développeurs. Même nous allons produire certains des guides de codage et de style dans ce cours. Il y a beaucoup d'informations dans ce cours. Ne ratez pas ça, et commençons. 4. Extensions Photoshop dont nous avons besoin: Avant de commencer avec notre conception web réactive Photoshop et notre workflow de conception web moderne, je vais vous montrer et partager avec vous quelques-uns des plug-ins et des scripts dont nous aurons besoin pendant ce cours. Jetons un coup d'oeil à eux et je vais vous montrer les gratuits et les payants. Maintenant, à partir de maintenant, je ne vais pas vous expliquer tout ce que je sais que vous êtes expert, au moins en gestion de Photoshop. Si vous n'êtes pas un expert, vous devriez voir mes quelques autres cours, qui sont la conception de l'interface utilisateur dans Photoshop et la typographie pour les combinaisons typographiques et le choix de la police et de la police appropriées pour votre projet. Commençons, je vais vous montrer la plupart du temps, les libres et les plus importants dont nous aurons besoin pendant tout ce cours. Voyons ce que nous avons. Maintenant, le premier plugin que je vais vous montrer est ce UberFaces pour montrer les icônes d'avatar et les visages des gens. Vous pouvez apporter différentes photos dans Photoshop pour la plupart des photos portrait et les avatars dans votre conception d'interface utilisateur. Similaire est celui-ci, c'est fondamentalement un randomuser.me. Ils ont l'extension Photoshop, vous pouvez télécharger le dernier. Ensuite, nous avons cette encre. Nous allons générer des spécifications pour nos développeurs, vous pouvez voir cet exemple ici, la hauteur et la largeur des éléments et aussi la force. Donc vous pouvez voir ici, ça va montrer la force ici. Alors nous allons avoir besoin de ce Gridify. C' est vraiment le plug-in le plus nécessaire pendant mon cours. Tu as vraiment besoin de celui-là. Ensuite, vous pouvez également installer cette police Awesome PS. Parfois, nous avons besoin de quelques icônes de la bibliothèque Font Awesome, qui est essentiellement pour les développeurs et bootstrap. Quatre autres que je vais mentionner ici sont les plugins dont nous n'avons pas vraiment besoin, mais ils sont géniaux. L' un d'eux est ce guide. Cela coûte 10$ et c'est l'un des meilleurs que j'ai vu pour la présentation de vos notes et de vos guides. Ensuite, nous avons ce Subtil Patterns pour apporter un motif différent dans Photoshop. Ensuite, nous avons le CSS Hat 2 pour l'amener et l'utiliser pour différents CSS. Générer instantanément des couleurs CSS, des dégradés pour vos calques et éléments Photoshop. Ensuite, pour encore une fois, les spécifications du développeur, vous pouvez voir que c'est un autre. Ceux-ci sont appelés spécifications de ligne rouge, vous pouvez voir ici. La plupart de nos développeurs ont besoin de savoir quelles sont les distances entre les différents éléments du haut et quelles sont les largeurs et les hauteurs de ces éléments comme les boutons. Donc c'est l'un d'entre eux, mais c'est un peu coûteux. On va utiliser ce jeu gratuit, Ink. Essayez d'abord de donner à mes étudiants les plugins gratuits parce que je pense, vous ne devriez pas dépenser trop pour acheter des plugins s'il y a une bonne alternative gratuite. Peu d'autres plugins, celui-ci exporte également les calques Photoshop, mais nous allons utiliser Photoshop panneau d'exportation à la place, donc peut-être si vous aimez celui-ci ou si vous concevez pour iOS ou Apple, alors vous pouvez extraire 2X ou 3X sortie pour les écrans de rétine, alors nous avons peu de plugins comme celui-ci. C' est Renamy, et c'est pour les fichiers SVG, exportant des fichiers SVG, principalement pour les icônes. Ensuite, vous exportez les icônes SVG, elles vont se développer et se contracter facilement, ce sont des formes vectorielles. En HTML et en programmation, ils vont vraiment aider vos développeurs plutôt que d'exporter des fichiers PNG. Ensuite, nous avons encore quelques choses que je vais vous montrer. Maintenant, pour la partie installation des plugins, je vais vous montrer quelques-uns des articles que vous devez connaître. Donc, si vous n'avez pas vu mon cours précédent, conception de l' interface utilisateur dans Photoshop, vous avez vraiment besoin de le voir ou de le prendre. Vous allez trouver le code de réduction pour mes autres cours à la fin de ce cours, donc si vous devez le suivre avant de suivre ce cours, vous devriez le suivre. Dans ce cours, je vous ai montré l'ensemble du processus d'installation de différents plugins Photoshop CC dans Mac ou même le système d'exploitation Windows, et comment vous allez utiliser ce programme d'installation ZXP pour installer différents plugins dans Photoshop CC 2017, et aussi comment vous allez l'installer manuellement. Je vais partager ces deux liens la plupart du temps, essayer de lire les instructions de n'importe quel plugin que vous téléchargez parce que j'ai vu beaucoup de mes étudiants qui me posent des questions et quand je leur dis, « Avez-vous lu le fichier readme ou instructions d'installation ? » Puis ils disent : « Oh, j'ai oublié de le lire. Je ne suis pas en mesure de l'installer. Maintenant, je l'ai installé. » Avant de me contacter ou de me poser des questions, essayez de lire attentivement le guide d'installation et suivez les étapes. Ce sont tous les plugins dont nous allons avoir besoin, je vais répéter à la fin à nouveau. Les quatre ou cinq plugins dont nous avons vraiment besoin sont ce plugin Uber, UberFaces. Soit vous pouvez utiliser UberFaces ou ce générateur d'utilisateurs aléatoires. J' aime ce UberFaces plus. Ensuite, nous avons vraiment besoin de cette encre, et aussi de cette Gridify, et de cette Font Awesome Photoshop. Si vous pouvez en avoir d'autres, c'est à vous de décider, mais je ne recommande pas de dépenser trop pour eux. Passons maintenant à la leçon suivante où je vais vous montrer mon interface de configuration Photoshop. Je vais aller avec beaucoup de vitesse parce que toutes ces choses que j'ai discutées dans mon cours Photoshop conception d'interface utilisateur, qui est pour les bases et les utilisateurs professionnels ou même experts, alors passons à la leçon suivante. 5. Comment organiser un projet de conception Web: Dans cette leçon, nous allons parler de l'organisation des dossiers. Beaucoup de designers que j'ai vu, ils essaient normalement d'organiser leur PSD dans différents dossiers et tout est dispersé, ils ne localisent pas les polices ou les actifs utilisés. Donc, en fin de compte, c'est un très gros gâchis si vous travaillez avec une équipe, une équipe de développement ou un chef de projet, vous devez être très bon pour organiser vos affaires. Permettez-moi de vous montrer comment j'organise normalement mes PSD et actifs et différents fichiers. abord, nous allons créer un dossier avec le nom du projet, comme Wstudio Design ou vous pouvez également le nommer avec le nom d'un client, et vous pouvez également créer plusieurs projets dans un dossier client unique. Donc, si vous obtenez beaucoup de travail à partir d'un seul client, vous pouvez créer le nom du client, puis créer plusieurs dossiers de projets. Alors nommez-les, vous pouvez également marquer la date. Donc c'est comme 2017, donc je sais que je l'ai fait en décembre 2017 ou novembre 2017. Vous mémorisez cela à la fin si vous avez besoin de le trouver, vous pouvez facilement le trouver que je l'ai fait en 2017. Maintenant, voici un exemple de la façon dont je vais nommer le dossier d'un client. Voici le nom de mon client et à l'intérieur que j'ai un projet de conception de ce client et si je vais à l'intérieur de ce projet de conception, vous pouvez voir qu'il y a différents dossiers, le contenu du site, le contenu écrit, le texte et la copie, Je vais le garder dehors. Aussi ce guide de style américain que nous allons créer à la fin, en ce moment, vous n'avez pas besoin de vous inquiéter à ce sujet, juste vous allez garder ces deux à l'extérieur. Ensuite, le filaire, trouver le dossier pour les filaires, vous pouvez voir ici j'ai un filaire. Ensuite, nous avons tous les PSD avec leurs aperçus, alors assurez-vous de toujours créer un aperçu de chaque fichier que vous concevez parce que parfois en regardant juste les développeurs de noms ou peut-être les gestionnaires de projets, ils ne vont pas obtenir ce que ce est tout au sujet. Donc juste en voyant son petit aperçu, ils savent que c'est le grand design. Aussi, vous pouvez voir que je les ai nommés landingpage_lg, lg signifie grand, la plupart des développeurs connaissent ce terme, mais quand même s'ils ne connaissent pas ce terme, vous allez générer un aperçu et ils vont voir le et sachez instantanément que ce fichier est moyen pour un écran moyen ou grand écran ou petit écran. Maintenant, dans l'inspiration, il est fondamentalement votre planche d'humeur ou les inspirations, vous pouvez voir ici j'ai beaucoup, vous pouvez voir comment j'ai eu des inspirations de différentes photos et images, vous pouvez voir ici j'ai pris les photos du site si comme, je prends des captures d'écran. Vous pouvez voir ici, voici un autre thème ou tableau d'humeur, je vais parler beaucoup de planche d'humeur et nous allons en créer un en ligne afin que nous puissions collaborer avec d'autres designers ou peut-être des développeurs ou des gestionnaires de projet. C' est ainsi que vous allez organiser tous vos dossiers et vos actifs. Dans le dossier assets, nous allons garder toutes nos polices ainsi que les images stock que nous allons utiliser pendant notre projet. Donc, la prochaine fois, je ne veux pas voir final, final finit par foiré organisation de dossier si vous concevez pour un client. Donc, tous mes étudiants, je veux juste m'assurer que vous savez comment organiser vos dossiers de conception, peut-être que d'autres designers pourraient le faire différemment, mais je pense que je le fais comme ça. Donc ce sont les inspirations, PSD est la finale, PSD est avec des aperçus, filaires. Aussi avec des aperçus, je pense que j'ai oublié l'aperçu ici. Ensuite, le contenu du site, guide de style de l' interface utilisateur, les inspirations et les ressources. Il y a encore une chose que vous pouvez créer ici, peut-être que vous pouvez créer un document de spécifications, peut-être un dossier de spécifications pour vos développeurs. Maintenant, dans ce dossier, nous allons garder le document en ligne rouge, laissez-moi vous montrer le document en ligne rouge. Copions ça d'ici et je vais le coller. Donc c'est notre document en ligne rouge, nous allons le partager dans un autre dossier, comme vous pouvez le voir ici, nous avons montré les distances et les tailles de nos boutons et toutes les autres choses différentes. Donc, ce sont les spécifications de distances et peut-être que nous pouvons déplacer notre guide de style d'interface utilisateur dans la spécification comme ça. Je pense que c'est tout, c' est ainsi que vous pouvez obtenir une bonne organisation de dossiers pour vos projets de conception. Passons donc à la leçon suivante. 6. Organiser vos couches de PSD et vos groupes: Dans cette leçon, je vais parler de l'organisation vos couches Photoshop en groupes et de la façon dont vous allez les nommer correctement, sorte que vos développeurs ou d'autres membres de l'équipe ou d'autres concepteurs, chaque fois qu'ils ouvrent votre fichier PSD, ils savent ce que signifie ce dossier ou ce groupe ou cette convention de dénomination signifie. Commençons. Maintenant, vous pouvez voir sur la droite dans mon panneau de calques, laissez-moi juste le rendre un peu plus grand. Je vais augmenter la taille des vignettes en ce moment. Maintenant, si vous regardez cela dans le panneau Calques, vous pouvez voir en haut, sont essentiellement les spécifications annotées par Ink. Je vais nommer ça des spécifications, quelque chose comme ça. Alors que les développeurs savent que ce sont les spécifications. Vous pouvez les cacher ou vous pouvez les montrer. Vous pouvez voir ici dans les lignes rouges ici, si j'essaie de les cacher, vous pouvez voir qu'ils sont cachés et montrés. Donc ce sont les spécifications. Ensuite, la prochaine sera Grid. Il y a deux grilles, grille verticale et horizontale. Vous pouvez voir ceci est la grille de colonne, vous pouvez voir ici, 1200 pixels de large et ceci est la grille verticale. Il est préférable que vous les nommez comme une grille verticale à 8 points, quelque chose comme ça. En outre, vous pouvez utiliser quelque chose comme 1200 pixels, 10 pixels, marge, avec la gouttière de 30 pixels. Donc, le développeur sait que c'est le système de grille que vous avez utilisé. Maintenant aller de l'avant, vous pouvez voir que nous avons en-tête en haut, alors nous avons, si j'ai essayé de le cacher, vous pouvez voir toute cette zone de héros et la zone d'en-tête est cachée. À l'intérieur de cet en-tête, j'en ai un, qui s'appelle le contenu. Donc, vous pouvez voir tout mon texte et mes boutons sont sur ce contenu. Si vous allez à cette navigation et logo, il est une section supérieure, puis ce fond vidéo, il est dans un autre groupe. Vous pouvez également déplacer ce calque dans le calque d'arrière-plan vidéo comme ça. C' est un pâté de maisons ici zone vidéo. C' est ainsi que vous allez aligner et organiser l'ensemble de votre contenu dans différents dossiers et sections. Ensuite, nous avons la section suivante, qui est ce processus sur les jalons de chaque projet que nous prenons, la section 1. Maintenant, si vous cliquez sur une icône, vous pouvez voir ici, J'ai ce dossier appelé étapes. Toutes les quatre étapes sont à l'intérieur de cela et ils ont leurs dossiers séparés avec leurs icônes, comme vous pouvez le voir, étape 1 icône. Donc, la plupart du temps, les développeurs utilisent des conventions de nommage avec des tirets ou des traits de soulignement. Essayez donc de les utiliser, utilisez des lettres minuscules, étape 1 icône, ou étape 2 icône, étape 1 icône ou étape 2 icône, étape 3 icône. Vous pouvez voir par ici. Il en va de même pour les boutons. Donc, si je clique sur ce bouton, vous pouvez voir que j'ai nommé ce bouton entier, btn-main. Fondamentalement btn est pour le bouton et c'est principal. Ne vous inquiétez pas de cette couche, mais la plupart du temps votre dossier doit être nommé correctement, il s' agit donc d'un groupe. Maintenant, passons à quelques autres choses. Maintenant, vous pouvez voir au pied de page, nous avons ce pied de page à la fin et vous pouvez les cacher ou les montrer comme vous le souhaitez. Une chose de plus parfois, peut-être exprès, je peux faire un clic droit ici et donner un peu de couleur à cela, comme c'est orange ou peut-être que je veux donner une couleur rouge à cet en-tête ou peut-être que je veux donner la couleur rouge à ce et aucune couleur à tous. Cette couleur rouge signifie qu'il s'agit d'un dégradé et qu'il est verrouillé et que le développeur ou l'un des concepteurs qui vont travailler dessus, ils peuvent immédiatement savoir que ce calque est fondamentalement verrouillé. Aussi, si vous voulez l'arrière-plan comme celui-ci, vous pouvez utiliser quelque chose comme celui-ci ou vous pouvez ajouter un nouveau calque comme celui-ci, couleur unie et l'utiliser pour l'arrière-plan, je vais le nommer bg. Il est facile de changer de couleur à tout moment. Je peux le rendre gris ou n'importe quelle couleur que j'aime. Voici donc comment vous allez organiser l'ensemble de votre en-tête de document section 1, section 2, section 3, section 4 et pied de page. Pour créer tous ces dossiers, j'ai l'action enregistrée ici, donc je vais le montrer dans la prochaine vidéo quand nous allons commencer à les concevoir. moment, le but principal de cette conférence est que la façon dont vous allez organiser vos couches de sorte que les développeurs ou d'autres concepteurs ou d'autres membres de l'équipe, ils peuvent facilement comprendre ce que vous avez conçu. Passons à la leçon suivante. 7. Faire des conventions de noms avec des développeurs: Maintenant, j'ai quelques conseils supplémentaires sur le nom de vos couches correctement. Maintenant, si vous regardez l'un des éléments comme ces boutons ou menus déroulants, ce qui est cliquable ou a une interaction dessus, il y aura deux ou trois états supplémentaires pour cela. Si j'ai ce bouton que vous pouvez voir ici, il a deux états. L' un est ceci, et l'autre est l'état stationnaire ou actif. Je vais les nommer très correctement. La même chose est l'histoire avec ce bouton obtenir un devis, j'ai deux versions de celui-ci. L' un est ce bouton fantôme. Lorsque l'utilisateur va passer le curseur dessus, il va être libre comme ceci. Maintenant, quand vous allez nommer les couches de groupes de cette interaction, vous allez être très prudent. En ce moment, vous pouvez voir ici que j'ai bouton-guillemet fantôme. Ensuite, ce bouton va être rempli et avec un trait de soulignement que j'ai indiqué ici, c'est le vol stationnaire et l'état actif. Donc, il va être stationnaire et état actif pour les deux états, il va être comme ça. Maintenant, sur les appareils mobiles, plupart du temps, il n'y a pas d'état de vol stationnaire parce que le toucher va être essentiellement l'état actif. Lorsque quelqu'un essaie de toucher le bouton, n'importe quel bouton de votre site Web, sur un écran mobile, il n'y a pas de survol sur un écran mobile alors gardez cela à l'esprit. Si vous planifiez une animation ou quoi que ce soit ou une interaction, ajustez avec l'ensemble et un autre pour l'actif, alors vous êtes dans une mauvaise position. Alors réfléchis bien. Votre bouton aura à la fois des états actifs et survolés identiques car sur appareils mobiles il n'y a pas d'état de survol. Vous ne pouvez donc pas survoler une icône ou un élément sur votre, n'importe quel bouton sur votre écran mobile. Maintenant, si vous regardez ce bouton, je vais vous montrer comment je l'ai renommé. Donc, vous allez ajouter l'état actif de survol, et puis c'est l'étape simple. Vous pouvez également ajouter l'état normal ici comme cette normale à la fin juste pour indiquer clairement que vos développeurs comprennent que ce qu'il va être. Assurez-vous donc que pour toutes les icônes, même si ces icônes ont des interactions sur le vol stationnaire ou quelque chose comme ça, vous allez ajouter un autre groupe et le renommer en fonction de son état. C' est la bande principale. Comme vous pouvez le voir ici, c'est essentiellement le vol stationnaire ou l'état actif. Vous pouvez voir que je l'ai mentionné ici designer surbrillance hover. Donc, c'est l'élément mis en surbrillance ou l'utilisateur se concentre en ce moment ici. C' est donc la bande que je voulais vous donner pour nommer vos calques et boutons ou listes déroulantes qui sont interactives et les nommer correctement afin que vos développeurs sachent que cela va être un changement de couleur ou un changement d'état. Passons maintenant à la leçon suivante. 8. Qu'est-ce un bon briefing de design ?: Maintenant, chaque fois que vous commencez un projet de conception, qu'il s'agisse d'un design web, d'un logo ou d'une application, la première chose que vous allez obtenir de votre client est le descriptif de conception. Maintenant, il y a deux types de clients. Celui qui peut créer un très beau dossier de design et d'autres qui vont juste dire, nous avons besoin d'un site web. Dans ce cas, vous allez obtenir les informations de votre client, que je vais traiter dans la prochaine leçon. moment, dans cette leçon, je vais vous montrer des exemples, des exemples réels de plus de trois ou quatre slips design et quels sont les détails que vous pouvez obtenir avec eux alors commençons. Maintenant, voici notre mémoire de design du concours 99designs.com web design. J' ai ouvert ce concours qui est essentiellement en cours d'exécution en ce moment, site Web élégant pour les produits parentaux intelligents. Maintenant, si vous allez dans ce bref onglet, j'ai ouvert celui-ci. Il y a peu de sections. Renseignements généraux de cette organisation. Ensuite, nous avons des styles visuels personnalisés. Ensuite, nous avons des détails sur le contenu ; quel sera le contenu de votre conception ou de votre page, et ce que vous devez éviter. Ensuite, nous avons d'autres informations comme d'autres notes, vous pouvez voir il y a toutes les différentes pièces jointes et logos et photos de marque, images que vous pouvez voir ici. Ce sont de très belles images prises sur fond blanc. Il y a aussi des produits livrables. Ce sont essentiellement pour le concours que les fichiers finaux seront dans celui-ci [inaudible] Maintenant, parlons d'eux un par un. Les renseignements généraux porteront sur ce qu'est l'organisation ? Quel est leur public cible, ce soit pour les parents, que ce soit pour les personnes âgées, que ce soit pour les conseillers financiers ou autre. Vous devez lire tout cela attentivement. Alors, quelle est l'industrie de cette organisation ? Que ce soit une industrie de la mode, l' industrie de la technologie, et puis nous avons un site Web existant. La plupart du temps, normalement, notes de conception ont des sites Web existants et vous devez reconcevoir ce site Web ou vous devez en créer un meilleur. Ensuite, nous avons ces styles visuels, donc il n'y a rien ici spécifié ce client dans le style, mais il y a beaucoup de sites Web inspirants. De ces sites Web inspirants, vous allez obtenir beaucoup de planche d'humeur ou vous pouvez dire que ce dont votre client a vraiment besoin. A propos de chaque site, il a spécifié qu'il cherche quelque chose comme ça. Puis il aime la propreté de ce site. Ensuite, c'est dans la tendance, à la mode, projet propre, image minimale du produit, élégant. Ce sont les styles qu'il cherche. Pour chaque site web ou site d'inspiration que votre client vous envoie, même si vous lui demandez un bref, alors mentionnez toujours ce qu'il aime à ce sujet. N' obtenez pas seulement deux ou trois URL, des URL de site Web qui ne vont pas vous aider du tout. Demandez à votre client, qu'aimez-vous de ce site web ? Quelle est la partie spécifique que vous aimez à propos de ce site Web ? Prenez cela dans votre esprit et prenez des captures d'écran de ces sites Web. Ce que je fais c'est que j'ouvre ces sites Web inspirants et je prends la capture d'écran en utilisant ce plugin que j'ai, ce plugin Firefox. Je crois que ça s'appelle Shot. Je ne me souviens pas de son nom, mais je vais partager l'URL pour cela. Il y a beaucoup de bons qui peuvent prendre des captures d'écran aussi, parfois je crée juste un fichier PDF de ce bref et l'enregistrer dans un dossier. Passons aux détails du contenu. Maintenant, les détails du contenu seront ce qu'est cette page et ce que le contenu de cette page, les en-têtes et tout le reste. Vous pouvez voir qu'il a moins de description, mais peut-être dans les pièces jointes, vous trouverez le contenu du discours. Maintenant, ce qu'il faut éviter, ce sont les choses que vous devez éviter. Maintenant, ici, il n'a rien spécifié, mais j'ai vu beaucoup d'autres mémoires où le développeur ou le chef de projet ou le client, ils demandent normalement d'éviter telle ou telle chose. Maintenant, dans l'autre, vous pouvez voir qu'il y a beaucoup d'actifs de conception dans la pièce jointe. En outre, le client vous a dit le thème de votre design, c'est très important. Il devrait être deux ou trois mots comme élégant, ludique, intelligent, créatif, haut de gamme, tendance et premium. Ce sont les thèmes ou les tendances du design que vous allez chercher. Ce sont toutes les images du produit, téléchargez-les et enregistrez-les dans le dossier des actifs dont je vous ai parlé. C' est ainsi que vous allez interpréter n'importe quel mémoire de conception. Vous devez chercher quels sont les thèmes qu'il recherche. Tendance, haut de gamme, créatif, ludique, intelligent. Vous pouvez voir qu'il a une touche de sac à couches premium ou tout ce qu'il est. Laissez-moi vous montrer un autre exemple. Maintenant, voici un autre exemple que j'ai sauvé. Il pourrait s'agir d'un ancien projet de 99designs. Nom de l'organisation, description de l'organisation et public cible. C' est très important. Vous devez demander à l'un de vos clients, si votre client ne vous donne pas de mémoire de conception, vous pouvez créer un document Word ou n'importe quelle question, répondre au PDF, et assurez-vous que votre client répond à toutes ces questions, alors faites un basé sur cela. Je vais partager le modèle avec vous, alors ne vous inquiétez pas, vous pouvez le télécharger à partir d'ici. Maintenant, vous pouvez voir l'industrie, le site Web existant, nombre de pages, la description de la page, style, l'idée de thème, ce qu'il faut éviter. Vous pouvez voir que ce client a donné très moins d'informations donc ce n'est pas un très bon mémoire de conception, mais je pense que cela peut fonctionner avec ce site Web inspirant ; vous pouvez voir que le client mentionne ce qu'il aime sur ce site Web. Il y a d'autres notes, système de gestion de contenu, et la pièce jointe de leur logo. Assurez-vous que chaque fois que vous recevez un mémoire de conception de votre client, vous devez obtenir les directives de conception ou le logo ou l'image de marque de cette entreprise. Vous pouvez voir ici qu'il a déjà un site Web, vous devez donc le reconcevoir. Vous pouvez obtenir le logo à partir de là. Mais il est préférable que vous obteniez le logo au format Adobe Illustrator ou une image transparente au format PNG. Permettez-moi de vous montrer un autre exemple, ceci est un mémoire très détaillé sur un site web, TraderPlaza, vous avez peut-être vu mon design sur [inaudible] pour ce site Web. Maintenant, vous pouvez voir que c'est très long. Vous devez le lire très attentivement. Vous pouvez voir qu'il a montré des informations importantes, objectif principal de la page d'accueil, styles visuels. Il a également mis en évidence quelque chose en rouge. Ensuite, ils ont quelques sites Web inspirants listés ici ; aussi les choses qu'ils aiment à ce sujet, les détails du contenu. Il est très spécifique dans les détails du contenu. Vous pouvez voir la navigation en haut de gauche à droite, le logo, deux liens et la liste déroulante de la langue. Il a un contenu très spécifique. Vous pouvez voir ici, même il montre ce que vous allez écrire dans l'en-tête 1 et l' en-tête 2 dans votre zone d'image d'en-tête. Vous pouvez voir d'autres choses qu'ils veulent sur le formulaire et d'autres contenus. Laissez-moi vous montrer un autre exemple. C' est l'application Web. Il est appelé Ripenn, donc la conception de la page d'accueil de l'application. Il y a des objectifs UX. Quels sont les principaux objectifs, ce que les utilisateurs vont accomplir avec ce design ou avec cette application. Ce sont les actifs de conception nécessaires. Ensuite, ils ont la nouvelle page d'accueil. Ils ont expliqué tout ce qui est nécessaire sur cette application web. Ensuite, cette partie New Seed et il y a cette partie Stream Page, Stream Page Count. Si vous avez quelque chose comme ça d'une application web, vous devez comprendre comment cela fonctionne. C' est le but de cette conception, sinon, vous auriez besoin de poser des questions à vos clients que de quoi il s'agit. Parfois, avec les notes de conception, ce que vous allez obtenir, vous allez obtenir ces aperçus par défaut des pages que vous devez redessiner, quelque chose comme ça donc vous devez les garder avec vous. Il s'agit de slips design et de la façon dont vous allez les interpréter. Si vos clients ne vous ont pas donné de bref de conception éléments de conception ou de ressources de conception comme leur logo, leurs images de produit, c'est le moment où vous allez les obtenir auprès de votre client. C' est la première étape. J' espère maintenant que vous comprenez beaucoup sur les mémoires de design et quels sont leurs formats. Passons à la leçon suivante. 9. Obtenir des idées initiales et des ébauches early: tâche la plus difficile pour tout concepteur est d'entrer dans la tête de leurs clients. C' est la tâche la plus difficile. Maintenant, la meilleure façon d'entrer dans la tête de votre client, et ce dont vos clients ont vraiment besoin est de les laisser esquisser leurs propres idées. Donnez-leur du papier. Si vous pouvez aller chez vos clients, donnez-leur du papier et laissez-les dessiner ce dont vous avez besoin, ce que vous voulez dans l'en-tête et la première section de votre site Web, deuxième section, la troisième section et le pied de page. Cela va vous aider à faire et à ne pas faire de votre filaire ou de votre design web. Maintenant, ne vous concentrez pas trop sur ces mises en page ou ces esquisses de vos clients. Vous allez les améliorer plus tard. Permettez-moi de vous montrer quelques exemples de croquis de clients. Maintenant, vous voyez l'un des croquis du client. Vous pouvez voir qu'ils peuvent être très rudes et qu'ils n'ont pas trop de détails. Assurez-vous que tout ce que votre client écrit, il doit être lisible afin que vous puissiez voir plus tard ce que vos clients ont vraiment écrit à ce sujet, parce que parfois vous allez oublier ce que vous avez discuté avec votre client ou ce qu'il est. Si vous êtes sur un site distant et que vous les avez reçus de votre e-mail, alors vous allez avoir des problèmes si vous ne pouvez pas lire son écriture manuscrite. Maintenant, laissez-moi vous montrer quelques exemples supplémentaires. Voici quelques exemples supplémentaires. Vous pouvez voir celui du milieu et celui de gauche. Ceux-ci viennent de certains de mes clients, et vous pouvez voir que le milieu a un très gros problème que je ne peux pas lire très bien. Élever votre, c'est quoi ce mot ? Score. Je pense que la carte de crédit, vous pouvez économiser autant de votre vie. C' est donc très lourd. Je ne peux pas lire ce qu'il est écrit ici. C' est un très mauvais exemple, alors assurez-vous que votre client écrit quelque chose de très lisible et lisible. Vous pouvez facilement le lire et le comprendre. Sur le côté gauche, encore une fois, le même problème est qu'il y a des choses que je peux comprendre, mais la qualité de l'image est très faible. Aussi, vous pouvez voir ces notations, je ne peux pas lire ce qui est écrit ici. Batterie de message ou je ne sais pas ce que c'est. J' ai donc eu ce niveau 1, niveau 2, niveau 3, niveau 4, mais je ne sais pas quelles sont les annotations ici. Qu' est-ce que cette barre de croquis ou quoi que ce soit ? Ce sont donc les problèmes que vous pouvez obtenir avec ces esquisses client. Alors soyez conscient, assurez-vous de convaincre votre client qu' il vous plaît dessiner ou écrire des choses lisibles comme vous pouvez voir ici dans le bon exemple. C' est une image agrandie d'un croquis client, mais je pense qu'il est très lisible. Je l'ai obtenu à partir d'un site web en ligne, googlé, donc ce n'est pas le mien. Donc c'est la vidéo et c'est la boîte de réflexion ou quoi que ce soit. Ensuite, nous avons des plans, de l'aide ici. C' est donc très concis et très bien écrit. Vous pouvez le lire facilement. Donc, vos esquisses de clients devraient être de cette façon. Vous pouvez également aider votre client, peut-être leur montrer quelques exemples, leur envoyer quelques exemples des croquis, et leur laisser dessiner les siens. De cette façon, ils savent que c'est le résultat final qu'ils vont obtenir. Maintenant, une fois que vous obtenez tous les croquis, l'étape suivante sera affichée dans la vidéo suivante. Passons donc à la vidéo suivante. 10. Questions à poser à votre client avant chaque projet de conception Web: Maintenant, à ce stade, nous avons déjà reçu les croquis de notre client. Le moment est venu d'aller de l'avant et d'obtenir plus d'informations sur la conception et le projet que vous allez faire pour votre client. Il y a deux séries de questions que je vais poser. La première concerne l'entreprise elle-même et ses concurrents, et la seconde concerne ses utilisateurs finaux ou clients. Maintenant les questions sur son entreprise, les affaires de votre client. La première est comment décrivez-vous vous-même votre entreprise ? S' il s'agit d'une seule personne ou d'une personnalité, si je crée un site web sur une figure sociale ou une personnalité sociale, alors ils se décriront que je suis expert enthousiaste ou peut-être que je suis un sport expert ou je suis un blogueur ou quelque chose comme ça. Mais si c'est une entreprise, alors ils vont la décrire comme nous le faisons avec ce genre de vente et nos ventes mensuelles sont la suivante. Donc tout sur leurs affaires, qu' ils vendent quelque chose de proche ou quelque chose comme ça. Deuxièmement, quel est l'objectif principal de votre site Web ? C' est très important. Votre client doit penser à un seul objectif ici. Cela montrera que quel est le but de votre design. Vous allez avoir une bonne idée de cette réponse. Maintenant, le troisième est, quel problème vous voulez résoudre avec cette conception ? C' est très crucial. Maintenant, vous devez savoir à quel problème votre client est confronté. C' est le point de base où vous voulez le frapper vraiment dur pour obtenir de l'argent bon. Quoi qu'ils écrivent ici, ça va être très bon pour toi. Le quatrième est, qui sont vos concurrents, et ajouter les liens du site Web. C' est vraiment crucial. Vous devez voir ce que font les concurrents, quelle mesure leur entreprise se vend, quelle est la structure de leurs sites Web ? Quelles couleurs ils utilisent ? Comment ils ont présenté leurs pages d'apprentissage, quels sont les en-têtes ou les déclencheurs de conversion qu'ils utilisent là-bas ? Il y a beaucoup d'informations que vous pouvez obtenir des concurrents. Ensuite, nous avons la dernière question qui est, avez-vous le contenu prêt pour votre site Web ? Il s'agit de votre client et de son site Web. Vous devez avoir le logo et le contenu du texte prêts avant de commencer à concevoir. Sinon, ça va faire beaucoup de mal à la fin. Parfois, lorsque vous avez le texte, et si vous n'avez pas le texte, toute la structure de votre dessin peut être modifiée. Comme si vous allez mettre quatre ou cinq lignes dans la zone d'en-tête ou de héros de votre site Web, et lorsque votre client vous donne le contenu réel, ils vous donnent une ou deux lignes. Donc, il va vraiment changer votre design. Vous devez le reconcevoir ou le remplacer ou le modifier beaucoup. Obtenez le logo et les lignes directrices de la marque. S' ils ont des directives de marque, comment utiliser leur logo ou les choses et le contenu du texte, ou le contenu de leur page, comme des images, des en-têtes de texte, tout. Donc, vous devez obtenir cela prêt avant d'entrer dans la conception. Maintenant, la deuxième série de questions concerne les utilisateurs et les clients. La première question sera, quelles sont les caractéristiques démographiques de vos clients ou utilisateurs ? Quel est leur âge ? Quelle est leur échelle salariale ou peut-être quelle est leur authenticité ? Qu' il s'agisse de jeunes femmes ou de personnes âgées ou quelque chose comme ça. Cela déclenche que, vous allez viser votre design vers la femme, et quel peut être votre jeu de couleurs pourrait changer sur cette information. Démographie peut changer votre conception et la forme de votre conception. Maintenant, la septième question est, quelle impression vous voulez donner à vos utilisateurs quand ils voient votre site Web pour la première fois ? C' est vraiment important. Ce sont les directives de conception ou les mots-clés de conception. Je les appelle des mots-clés de conception comme le site doit être fiable, ou peut-être qu'il devrait montrer un peu de plaisir ou de créativité, ou peut-être qu'il est très sérieux ou audacieux. Ce sont donc les thèmes. Ils vont vraiment vous aider à choisir votre typographie, vos polices, peut-être vos couleurs, peut-être la rondeur de vos boutons. Maintenant, la huitième et dernière question, quelles informations vos utilisateurs chercheront sur votre site web ? C' est vraiment important. Qu' ils recherchent des coupons de réduction ou qu'ils recherchent la meilleure offre, qu'ils veuillent télécharger un fichier PDF ou le registre de l'eau ou qu'ils veulent s'abonner. C' est la fonction principale de votre site Web. Ceci met fin à ce questionnaire. Je vais partager ce questionnaire avec vous au format PDF et au format Word. Vous pouvez le donner à vos clients et l'utiliser comme vous le souhaitez. Si vous voulez y ajouter d'autres questions, vous pouvez ajouter d'autres questions. Mais c'est ainsi que vous allez obtenir de bonnes informations avant de commencer votre conception. Passons donc à la leçon suivante. 11. Utiliser le modèle de collecte de contenu pour le contenu de site Web: Maintenant, laissez-moi vous montrer comment vous voulez que le contenu de votre client soit dans le format. Permettez-moi de vous montrer le format que j'utilise pour que mon client remplisse son contenu. Donc, ici, nous avons la navigation supérieure et il a des liens vers notre ascenseur de marque, Études de cas, Contactez-nous, Obtenir un devis. Donc, s'ils ont quelque chose qu'ils doivent spécifier comme faire ou ne pas faire, ils peuvent spécifier en rouge dans la ligne suivante. Ensuite, nous avons le titre, puis nous avons le sous-titre, le premier paragraphe et ensuite nous avons, vous pouvez voir ici les boutons. C' est ainsi que vous allez tout exposer, Section 1. C' est donc très important. Tout devrait être dans différentes sections. Vous pouvez voir que c'était notre navigation en haut de l'en-tête et les titres. Ensuite, nous avons la première section, nous avons des jalons. C' est notre rubrique principale, et c'est notre sous-rubrique. Vous pouvez voir que c'est une notation que j'utilise. Cette première ligne, puis il y a deux tirets pour la deuxième ligne qui va être sous-titre. Vous pouvez également utiliser le même format ou la même chose comme ça, encore et encore, mais je l'aime simple. Ici, nous avons les étapes de processus un, deux, trois, quatre, leurs détails. Ensuite, nous avons la section 2, puis la section 3. Notre équipe principale est spéciale, nous sommes un sac plein de sorciers numériques, des images avec des titres ici. C' est essentiellement le document qui va façonner notre conception. C' est tout le contenu écrit, vous en avez peut-être beaucoup, mais en ce moment, c'est celui que j'ai utilisé pour mon design W Studio, que vous allez faire à l'avenir. C' est la section pour ou vous pouvez aussi l'appeler ici pied de page, quelque chose comme ça. Laissez-nous pour vous prêt à aller plus loin. Donc c'est le bouton, consultez au téléphone ou dites-nous ce que vous voulez. Liens sociaux, bureau de fantaisie, adresse de bureau, email et numéro de téléphone. C' est ainsi que vous voulez obtenir tout le contenu de votre client. dehors de cela, vous avez aussi besoin de logos et les images que vous avez utilisées comme cette image que j'ai utilisée, c'est essentiellement l'image de stock, mais vous voulez les images des membres de l'équipe d'origine de votre site Web ou de leurs clients ou tout ce qu'ils ont. Alors obtenez les images, le logo, avant de commencer à concevoir. Il s'agit du contenu dont vous avez besoin pour obtenir de votre client. S' ils ont des images de produit, ils vont vous donner les images du produit. Un autre conseil est que parfois ces images de produit peuvent avoir besoin d' une certaine retouche ou qu'elles doivent être modifiées. Donc vous pouvez facturer un supplément pour cela, mais maintenant, j'ai ces images qui sont déjà éditées et qui sont sur le fond blanc, donc je n'ai pas besoin d'être éditées. Gardez cela à l'esprit, parfois cela peut changer la date limite ou l'heure du projet. Si vous obtenez le contenu, vous pouvez informer votre client que maintenant cela va prendre quelques jours supplémentaires parce j'ai besoin de modifier toutes ces images que vous m'avez données parce qu'elles sont sur un fond rouge ou quelque chose comme ça. Gardez toutes ces choses à l'esprit, utilisez ce modèle. Je vais partager ce modèle avec vous. Passons donc à la leçon suivante. 12. Planches d'ambiance pour la conception Web: Aujourd'hui, je vais parler de Mood-Boards. Maintenant, pourquoi les mood-boards sont-ils importants dans tout projet de conception ? Parce qu'ils vont façonner la direction, l'équipe ou le style de ce projet. Les planches d'humeur sont juste une collection de quelques images, textes ou coupures ou même différentes captures d'écran de différentes parties de sites Web, même des images portrait de différents modèles ou quelque chose comme ça, ou même n'importe quelle photographie à l'extérieur. Même si vous avez pris une photo de votre classe ou quelque chose comme ça juste pour obtenir l'idée ou le thème du style de ce design. Il peut s'agir de couleurs, familles de polices ou de types ou de textes que vous aimez, même si vous aimez certaines icônes d'un site Web, il suffit de couper cela. C' est essentiellement pour définir votre thème et le style de votre design. Maintenant, j'ai utilisé cet outil en ligne, il s'appelle N-I-I-C-E.C-O, niice.co. C' est vraiment cool. Il crée une planche d'humeur, une planche d'humeur en ligne. Il y a différents styles que vous pouvez choisir. Il y a différents styles et options, vous pouvez télécharger votre logo et d'autres choses donc je n'en ai pas besoin. Je change juste le titre et le sous-titre, et il y a aussi des options que vous pouvez exporter. Dans le compte libre, il me reste trois exportations. Je peux l'exporter sous forme de PDF, et aussi de fichier Zip pour toutes les images. Aussi, je peux partager cela avec le lien de téléchargement e-mail, lien privé, mot de passe Dropbox, de sorte que vous pouvez le partager avec n' importe qui ou vous pouvez l'exporter et l'envoyer à n'importe qui. L' essentiel est que vous pouvez également ajouter des gens à ce tableau, vous pouvez ajouter vos équipes de développeurs ou un autre concepteur avec lequel vous travaillez, vous pouvez l'ajouter ici. Maintenant, le but principal est que vous allez définir le thème de votre design. Vous pouvez voir dans cette conception, je vais utiliser une police comme celle-ci. J' ai donc besoin d'une police très audacieuse, très épaisse, très courbée et audacieuse et sans empattement comme celle-ci, j'aime celle-ci. Alors aussi j'aime celui-ci, ce sont les icônes que j'ai aimé. J' ai aimé deux icônes de couleurs, icônes de ligne. Cela pourrait être une bonne source d'inspiration pour nos fonctionnalités ou la zone des étapes de processus. Aussi, vous pouvez voir ici nous avons un autre échantillon pour le texte ou la typographie. Ensuite, vous pouvez voir ici, encore une fois, nous avons le style, les couleurs, typographie, vous pouvez voir les gris, les usages des gris et des violets que je l'ai pris d'ici. Ensuite, nous avons une autre inspiration que j'ai recueilli ici, vous pouvez voir cette Expériences utilisateur Inspiré par les gens. Ce paragraphe, ce bouton, vous pouvez voir l'ombre, les couleurs, les lumières autour d'elle, nous pouvons l'étendre, agrandir comme ça. Donc, vous pouvez le voir clairement. Vous pouvez alter ou cliquer sur cette option pour réduire la taille. Ce sont différentes images que j'ai collectées ou les clips de texte, ou différentes captures d'écran que j'ai recueillies pour obtenir le thème et la direction de notre conception. Si vous regardez celui-ci, vous pouvez voir comment cette image est découpée à l'intérieur de cette boîte en bas. C' est l'idée que j'ai prise dans ce domaine, cette planche d'inspiration et je l'ai utilisée dans notre section équipe, où j'ai montré les images de notre équipe debout. Ce sont toutes les choses et les thèmes, couleurs et les idées de texte et de topographie, même les idées de mise en page. J' ai utilisé certaines des idées de mise en page de ceux-ci. En outre, vous pouvez voir cette image ont superposition de noir. Donc superposition très noire et superposition gris-noir, j'ai aimé. J' ai utilisé une superposition violette, semblable à celle-ci. Aussi l'arrangement du contenu ici, je l'aime vraiment. Ici, nous avons l'adresse, ici nous avons nos liens sociaux. C' est la meilleure façon de créer votre équipe de conception. D' autres peuvent également ajouter des images ou quelque chose comme ça ici. Si vous cliquez sur ce « Plus Sign », vous pouvez télécharger des images, vous pouvez ajouter une vidéo, vous pouvez ajouter du texte et vous pouvez ajouter des sous-tableaux si vous avez plusieurs tableaux, comme deux ou trois. En ce moment, je n'ai vraiment pas besoin de plus que ces quelques uns. J' aime vraiment ceux-là et je n'ai besoin que de ces deux-là, commencer mon design. Même si vous pouvez ajouter votre logo ici, s'il est déjà conçu, vous pouvez l'ajouter ici, afin qu'ils puissent correspondre au style avec tout cela. C' est tout à propos des humeurs. Si vous concevez sans un tableau d'humeur, il vous manque quelque chose. Vous pouvez créer des tableaux d'humeur en ligne ou vous pouvez avoir juste un dossier avec rempli de toutes ces images pour obtenir l'inspiration. Normalement, je crée un dossier sur mon disque dur. J' utilise cet outil peut être il y a quelques jours, je l'ai vraiment aimé. Mais quand même, je préférerai mon propre disque dur si je travaille seul. Si vous travaillez en équipe, cet outil est une bénédiction. Il y a une version gratuite et aussi une version pro, ce moment j'utilise la version gratuite et c'est assez pour moi. Il s'agit de planches d'humeur. Passons à la leçon suivante. 13. Phase d'idée (au moins 3 mises en page en page): La première étape dans n'importe quel type de conception est l'idéation. Maintenant, l'idée signifie que vous allez obtenir quelques croquis grossiers de votre idée et l'obtenir sur le papier très rapidement. Au moins, je suppose que vous avez besoin d'au moins trois dessins. Tout d'abord, commencez par la première conception, puis un autre. Peut-être que vous pouvez ajouter jusqu'à six mises en page comme ça. Parfois les équipes de conception, elles viennent avec plus de 20 ou peut-être 30 mises en page ou croquis différents dans cette phase d'idéation. Vous pouvez voir ici, j'ai les croquis initiaux, quatre croquis différents, quatre mises en page différentes pour la même page que nous avons conçue. Maintenant, sur le côté gauche, si vous pouvez voir par ici, nous avons le logo sur le côté gauche et la navigation et le bouton par ici. Une chose que vous devez garder à l'esprit que dans votre phase d'idéation ou dans cette section, vous n'allez pas utiliser de mots. Vous pouvez voir ici, les boutons sont juste des boîtes pleines remplies de marqueur noir ou d'encre, et les lignes ici sont juste les lignes ondulées pour le texte ici. C' est juste une vidéo que ça ici, ce sera une vidéo ici. Ensuite, ce sont quatre icônes, vous pouvez voir ici. Encore une fois, le texte vague quatre textes. Ensuite, voici quelques images ou portraits d'équipes. C' est juste la mise en page. Vous pouvez voir ici, je suis juste exposer mon contenu sur cette page très rapidement. Maintenant, c'est la disposition centrale pour l'en-tête supérieur. Maintenant, dans cette section, vous pouvez voir ici, j'ai complètement changé la mise en page. Je place la vidéo ici et le texte et le bouton ici. Ensuite, les quatre étapes, je les utilise dans l'icône de l'étape ou l'image ici, les détails ici. Icône pas ici, détails par ici. C' est ainsi que je change la mise en page de la première itération ici. Ensuite, vous pouvez voir dans cette section pour notre équipe, vous pouvez voir les images sont totalement changées. Ici, nous avions des formes ovales, et [inaudible] sur le [inaudible] maintenant qui nous avons la moitié du corps de l'image ou la moitié du corps de notre équipe. Puis en bas, vous pouvez voir que j'ai une carte et un emplacement. Nous pouvons également ajouter le numéro de téléphone ici. Ensuite, sur le côté droit, j'ai un formulaire à contacter ou peut-être commencer un formulaire de devis. Puis en bas, j'ai quelques lignes ici et des liens sociaux. Tout ici est illustré de la manière la plus simple. Vous n'allez pas élaborer ici l'annotation et l'élaboration vont être dans la phase filaire. Donc, une fois que vous allez décider de ces quatre options ou cinq options ou six options, vous allez finaliser l'une d'entre elles et vous allez construire filaire dessus. Vous pouvez voir ici, nous avons une autre mise en page. J' ai en fait mélangé deux pages. J' ai donc essayé de le mettre ici, mais vous pouvez voir que la section 3 est un peu mal alignée parce que j'ai utilisé la page suivante. Vous pouvez voir par ici. Maintenant, ici, nous avons une autre mise en page. Ici, nous avons deux vidéos ici, et nous avons notre texte et notre bouton ici. En outre, vous pouvez voir le long de la vidéo, nous avons un texte ou peut-être un témoignage de notre client, alors nous avons totalement différent ici 1, 2, 3 est le processus et ici je montre les membres de mon équipe qui sont responsables de cette pas. Ensuite, nous avons, encore une fois, quelques images de membres de l'équipe ou peut-être je pense que ce sont quelques témoignages de clients supplémentaires avec le processus ou peut-être que nous pouvons en avoir un ou deux. C' est donc l'idée que j'ai utilisée dans le design final. Nous avons eu deux témoignages de clients ici. Maintenant, vous pouvez voir dans la dernière, cette disposition historiquement centralisée un et deux, et c'est presque la même chose ici. Celui-ci est totalement différent pour la carte du pied de page et le formulaire de contact. Alors celui-ci est totalement différent. Nous avons un bouton et un texte ici, et nous avons des offres récentes ou quelque chose de nouveau ici qui est peut-être des tweets récents ou quelque chose comme ça, ou des liens de projets récents. Ensuite, nous avons cette barre sociale ici et nous avons peu de liens et de textes ici. C' est ainsi que vous allez exposer quelques idées d'idées initiales et croquis sur votre conception. Il s'agit également d'une phase de conception de l'expérience utilisateur. Je pense donc que nous allons aborder certaines des phases de conception de l'expérience utilisateur dans ce cours. Je pense que c'est beaucoup d'idées. Passons maintenant à la phase filaire. 14. Introduction à des maquettes Balsamiq: Maintenant, nous allons utiliser Balsamiq Mockups pour concevoir notre maquette pour cet exercice, pour ce design. Il s'agit essentiellement d'une prochaine étape de notre phase d'idéation. Maintenant, je vais utiliser Balsamiq Mockups. Je vais vous donner une partie de l'introduction de ce logiciel. Il est très facile à utiliser, donc ne vous inquiétez pas à ce sujet. Vous pouvez télécharger sa version d'évaluation pendant 30 jours. Aussi, si vous pouvez l'acheter, je pense que ça vaut la peine si vous dessinez beaucoup de filaires. Si vous ne voulez pas l'acheter, vous pouvez utiliser même Photoshop. Vous pouvez télécharger ces kits pour les kits filaires. Vous pouvez voir ici, il y en a beaucoup, vous pouvez voir, ou vous pouvez créer votre propre. Ce n'est pas une grosse affaire. Maintenant, l'avantage d'utiliser Balsamiq est qu'il utilise un style très sommaire. Donc, l'utilisateur final, nos clients, si vous leur présentez votre filaire, ils ne seront pas confus que c'est la conception finale. Le deuxième avantage est qu'il a beaucoup d'extensions. Vous pouvez voir, vous pouvez charger beaucoup d'autres maquettes de design comme vous pouvez voir ici. Il existe différentes bibliothèques pour prendre en charge la conception iOS ou Android. Même vous pouvez voir, eh bien, les modèles Apple Watch. Ensuite, nous avons beaucoup de grands modèles comme celui-ci, Bootstrap. Si vos développeurs utilisent Bootstrap, alors vous pouvez tout de suite aller de l'avant et filtrer ensemble de votre conception en utilisant cette bibliothèque d'amorçage. En outre, il existe des modèles pour UX Design. Nous n'avons pas besoin d'eux en ce moment, Cas d' utilisation et autres projets. Donc, il y a beaucoup de grande bibliothèque de symboles qui est libre à utiliser. Vous pouvez le charger. Je vais vous montrer comment on va le charger. Ce sont essentiellement des fichiers BML. Vous pouvez voir, ou si vous cliquez avec le bouton droit sur « Télécharger BMML ». Si vous cliquez ici, Télécharger BMML, vous allez télécharger ce fichier et nous allons charger dans notre Balsamiq Mockup pour charger ce fichier. Maintenant, passons à la fenêtre de Balsamiq Mockups, et je vais juste vous donner l'aperçu de la façon d'utiliser cette application. Voici l'écran de Balsamiq Mockups. Vous pouvez voir ici, ici nous avons un nouvel outil de projet Balsamiq. Vous pouvez double-cliquer et changer le nom en Wstudio. Je vais le renommer. Sur le côté gauche, vous pouvez voir ici nos maquettes. Il pourrait y avoir une, deux, trois ou quatre trames filaires. C'est à vous de décider. Ensuite, sur le côté droit, nous avons des informations sur le projet. Si vous voulez cliquer et décrire quelque chose ici, vous pouvez donner quelques informations à vos concepteurs ou autre, vos développeurs, d'autres membres de l'équipe. Ensuite, il y en a deux autres, croquis, et vous pouvez voir ici, mode esquisse est quelque chose comme ça. Nous avons cet iPhone ici, donc vous pouvez voir qu'il est un peu grossier. Ce n'est pas parfaitement rond. Si je passe à filaire, vous pouvez voir qu'il a changé de forme. C' est un peu plus précis. Donc, c'est à vous de décider lequel vous voulez utiliser. C'est un peu plus propre. Peu importe lequel vous utilisez. Je vais, maintenant, supprimer ça. Donc, renommons ceci en page de destination. Voici notre page de destination. Je vais juste vous familiariser avec cette interface en ce moment. Je ne vais rien créer ici. Maintenant, en haut, vous pouvez voir ici, nous avons tous les actifs. Les ressources sont essentiellement les fichiers que vous pouvez importer. Par exemple, si vous souhaitez utiliser des images dans vos maquettes, vous pouvez les importer ici, en accédant à ce Projet, Importer, Actifs. De la même manière, vous pouvez importer les bibliothèques de symboles BMML. J' ai ce iOSControls.BMML. Je peux sélectionner ce fichier et l'ouvrir, et il va être Symbols Library, vous pouvez voir ici. Où je peux le trouver, si je vais à ce symboles suisses, vous pouvez voir que j'ai chargé beaucoup de grilles bootstrap, cette alerte iOS7, mais comme vous pouvez le voir ici. Ce sont des contrôles IOS7. Vous pouvez voir qu'il s'agit d'un contrôle à bascule. Ce sont les contrôles qui n'étaient pas par défaut, présents dans ce logiciel et je les ai chargés à partir de cela. Maintenant, laissez-moi vous montrer quels autres contrôles il a. Vous pouvez aller à Assets, vous pouvez aller à Big où nous avons des graphiques, des images, et quelques autres choses. Ensuite, vous pouvez aller à Boutons. Il y a beaucoup de boutons, interrupteurs marche/arrêt, boutons de pas numériques, et beaucoup d'autres contrôles. Vous pouvez également aller en commun. Il y a icône, nom d'icône, images, liens, étiquettes. En outre, vous pouvez aller à Containers, où nous allons utiliser cette fenêtre de navigateur. Vous pouvez voir ici pour notre conception filaire, formulaires d' arrière-plan pour le contrôle des formulaires, icônes. Nous avons une bibliothèque complète d'icônes Font Awesome par ici. Ensuite, nous avons des contrôles iOS. Vous pouvez voir par ici. Ensuite, nous avons des contrôles de mise en page comme le jeu de champs, barres de boutons, les accordéons, les sitemaps, les barres de tâches. Ensuite, on a Mockup. Quelles sont les commandes que nous allons donner. Peut-être sur le côté de n'importe quelle partie d'un filaire. Ensuite, nous avons des médias où nous avons des images, webcam, lecteur vidéo. Donc si vous ne trouvez aucun symbole, écrivez ici comme bu. Je vais écrire pour les boutons, et vous pouvez voir qu'il y a beaucoup de boutons. bouton, bouton, barre, bouton cercle, boutons multilignes, bouton pointu. Il y a aussi quelques icônes commençant par B. Donc si j'écris bug, vous pouvez voir ici, nous avons une icône ici, ce qui est un bug. Voici comment vous utilisez cet ajout rapide. C' est un outil très utile ici. Aussi, si vous allez au symbole, ce sont les symboles que j'ai chargés. J' ai téléchargé le fichier BML, et j'ai importé quelques bibliothèques BML comme Bootstrap et iOS7 contrôles ici. Maintenant, aussi, vous pouvez aller à des textes quand vous devez écrire un titre, une étiquette, ou quelque chose comme ça. Donc ce sont tous les textes importés, chapelure, bloc de texte. Vous pouvez utiliser quelque chose comme ceci s'il n'y a pas de contenu ou si vous voulez une idée très sommaire de votre mise en page. Voici toute l'introduction de votre interface Balsamiq Mockup. Vous pouvez ajouter de nouvelles maquettes ici. Vous pouvez dupliquer celui-ci en cliquant avec le bouton droit sur cette flèche, renommez-le dupliqué. Vous pouvez également créer des versions alternatives pour la même maquette ou filaire que vous concevez. En outre, il y a plus de contrôles. Vous pouvez voir si j'essaie de créer quelque chose, laissez-moi juste mettre quelques choses ici. J' ai ceci et j'ai cette image, et je veux les aligner. Si ce n'est pas aligné, je vais les sélectionner tous les deux avec Shift. Si vous ne voyez rien ici, vous pouvez cliquer sur celui-ci, Panneau d'information. Ce sont les contrôles pour les aligner. Je peux les aligner au milieu, ou je peux les aligner à gauche, ou je peux les aligner comme ça, au centre vertical. C' est ainsi que nous l'alignons. Si nous allons l'aligner par rapport à un conteneur, comme j'ai cette fenêtre de navigateur, donc je vais le déplacer en arrière en cliquant avec le bouton droit de la souris et Envoyer à Retour. Par exemple, quelque chose comme ça et je vais faire un clic droit et le verrouiller. Donc, il ne va pas se déplacer nulle part. Ne le déverrouillons pas et je vais les déplacer tous les deux. Créer un groupe, Contrôle G ou Commande G pour créer un groupe, et je vais déplacer ce groupe avec ceci, donc je vais l'aligner comme ça. Aussi, si vous faites glisser quelque chose comme ça, vous pouvez voir ici nous avons un guide intelligent. Cela montre que c'est le milieu. C' est le coin gauche par ici, quelque chose comme ça. Si nous cliquons ici, vous pouvez voir, vous pouvez également mettre quelques barres de défilement ici. Modifiez l'arrière-plan. Tout sur ce contrôle, les propriétés de n'importe quel contrôle vont être ici ; taille, position, superposition, extra, etc. Il y a peu de contrôles comme je pense Copier Coller, peut-être Groupe, Ungroup. Je n'ai rien utilisé d'ici. J' utilise simplement mon clavier parce qu'il s'agit de raccourcis clavier très explicites. Tu peux t'enfermer ici. La plupart du temps, ce que je fais est que je verrouille cet écran du navigateur afin qu'il ne bouge pas et ne place pas mes objets par rapport à cela. C' est ainsi que nous allons utiliser ces Maquettes Balsamiq. Il est très facile à utiliser. Je pense avoir beaucoup expliqué. Une fois que vous commencez à l'explorer, vous allez vraiment adorer cet outil. Passons à la leçon suivante où nous allons réellement concevoir notre filaire. 15. Wireframing dans des maquettes Balsamiq partie 1: Dans cette leçon, nous allons concevoir ce filaire pour notre projet web design studio W et nous allons utiliser des maquettes Balsamiq. J' ai donné une introduction, et pendant cette leçon, je vais vous montrer quelques-unes des touches de raccourci que je vais utiliser beaucoup de temps. Commençons. Nous allons créer un nouveau projet, ou nous allons ouvrir un projet que nous avons sauvé la dernière fois. C' est notre studio W, il est juste vide et nous avons créé une maquette. Si vous n'avez pas de maquette ici, vous pouvez cliquer sur ce signe Plus et créer une nouvelle maquette ici ou Control N ou Command N pour une nouvelle maquette. La première chose que nous allons faire, c'est que nous allons avoir un conteneur ici, qui va être notre navigateur. Notre fenêtre de navigateur, rendons un peu plus large au moins 900 pixels ou peut-être un peu plus de 900. Comme ça. De plus, nous allons l'étendre un peu plus, peut-être 1 500 ou quelque chose comme ça ici. Je pense que ça suffit. Si nous voulons l'étendre davantage, nous allons l'étendre davantage. Maintenant, nous allons cliquer avec le bouton droit de la souris et nous allons verrouiller ce navigateur Web. Maintenant, notre page Web de base du navigateur Web est corrigée ici. La première chose que nous allons obtenir, c'est les médias, qui seront notre image ou notre logo ici. Vous pouvez également utiliser celui-ci ou celui-ci, c'est pour vous. Je vais utiliser cette image, je vais le nommer logo. Notre logo va être ici, puis nous allons utiliser notre navigation. Voyons quelle navigation nous avons ici, peut-être une barre de liens comme ça. C' est notre barre de liens, et je vais les renommer peut-être en design web. Pour que cela soit couronné de succès, nous allons utiliser notre document Word ou vous pouvez voir le contenu de notre page, Web Design Brand Uplift. Nous l'avons renommé dans le design original, donc c'est la tournée, qui nous sommes, ou ici nous avons eu des études de cas, contact, et obtenir un devis. Nous allons placer ces quatre liens ici, copions-les d'ici. Ce document Word, copiez-les d'ici, et je vais le coller ici. Ils sont tous séparés par une virgule, je vais utiliser la même syntaxe qu'ils ont utilisée. Il suffit de mettre une virgule ici comme ça, et notre navigation est terminée. Il y a un autre bouton ici, qui est Obtenir une citation. Je vais cliquer sur le bouton ici, je vais faire glisser un bouton ici, double-cliquer, et nous allons obtenir un devis. Nous avons notre bouton ici, et nous avons notre logo et tout mis en place. Maintenant, nous avons ensuite les éléments d'en-tête, sous-titre, notre image ou notre vidéo ici. Pour le lecteur vidéo, je vais faire glisser ce lecteur vidéo ici. Déplaçons ce lecteur vidéo ici comme ça. Ne vous inquiétez pas du design ou du design final, c'est juste un filaire. Il suffit de placer les éléments qui seront là pour que notre client voit et juge que cet élément ne manque pas ici. Je vais me lever l'icône de jeu ici, on va le déplacer comme ça. Maintenant, pour le titre, nous allons retourner à notre document Word, copier ceci dans notre texte, où est notre texte ? Ici, nous avons du texte, ou où est le titre ? Sous-titre, un gros titre. Nous allons traîner ce gros titre, placer ça ici et nous allons le traîner comme ça. Est-ce que ça va être multi-ligne ? Voyons voir dans ce panneau. Taille automatique, et nous n'avons pas, je pense que multi-ligne ici. Nous allons utiliser un texte multi-lignes ici comme ceci. Nous avons du texte multi-lignes, enlevons-le, quelque chose comme ça. Nous allons augmenter la taille à 40, ce qui était notre taille des manchettes, plaçons quelque chose comme ça. Nous avons notre titre ici. Maintenant, pour les sous-titres, sous-titres, nous allons utiliser ceci, voyons quel est notre sous-titre, sous-titre ou notre premier paragraphe. Je vais l'utiliser comme ça. Maintenant, gardez à l'esprit que même si vous placez ces choses comme ça à la fin, peut-être que dans le design nous pourrions les remplacer ici. Ce n'est pas un problème de placement ou de conception, c'est juste que notre contenu sera dans cette partie et dans cette zone ou je ne manque aucun contenu crucial ici, juste pour être sûr et être sur la même ligne ou la même page avec votre client. Ceux-ci sont très cruciaux, supprimons et je vais utiliser à nouveau la touche Alt ou Option pour faire une copie, tout comme Photoshop, et je vais mettre quelque chose ici comme ça, et nous allons utiliser peut-être 28, Non, je pense que 20 suffiront. Nous avons notre sous-titre ici, ne vous inquiétez pas de l'alignement, nous ne sommes pas inquiets pour la conception en ce moment, nous voulons juste nos éléments ici, premier paragraphe, nous devons être très rapides dans ce domaine. Je viens de mettre quelques textes ici, paragraphe, nous avons paragraphe, et c'est notre paragraphe ici. Maintenant, nous avons besoin d'un bouton pour commencer, bouton ici, nous avons un bouton Démarrer, donc nous allons cliquer dessus, Get Started Now. Il y a deux choses, vous pouvez redimensionner ces boutons, vous pouvez également leur donner des couleurs si vous le souhaitez. Normalement, je suggère que les couleurs ne devraient pas être données, peut-être si votre client ne comprend pas et si c'est un bouton ou non, vous pouvez le mettre en évidence quelque chose comme ça. Cela signifie que c'est un bouton et c'est très mis en évidence ici. Maintenant, notre en-tête est presque terminé, déplacons ceci un peu vers le bas, comme ceci, et aussi celui-ci ici. Maintenant, notre en-tête est terminé, créons une ligne horizontale ou une règle H qu'il est appelé. Je vais obtenir une ligne ici pour m'assurer que cette section est terminée, donc nous allons passer à la section suivante. 16. Wireframing dans des maquettes Balsamiq partie 2: Maintenant, ce que nous allons faire est de copier celui-ci et celui-ci parce que notre prochaine section a aussi un titre et un sous-titre comme ça. Voyons quelle est la sous-position ou la rubrique. Jalons, je vais sauter certaines sections de cette vidéo avec beaucoup de cette vidéo avec beaucoup de rapidité parce qu'elles sont la même tâche que nous avons fait encore et encore. Ne vous inquiétez pas si je le fais très vite. Je vais l'aligner au centre. Peut-être quelque chose comme ça. Maintenant, c'est au centre. Contrôle C, Contrôle V. Je pense que j'ai fait des copies supplémentaires donc je vais aussi lui donner l'alignement central, quelque chose comme ça. Maintenant, nous avons notre chemin par ici. Maintenant, nous avons les étapes 1, 2, 3, 4 et ils vont avoir quelques icônes. Je vais aller aux icônes. Vous pouvez placer quelques icônes, sauter, vous perdez votre temps ici en sélectionnant des icônes. Ce que je vais faire, c'est aller à Media. Je vais donner un nom d'icône comme, prénom a été d'évaluer votre conception d'entreprise pour vos utilisateurs. Évaluez votre entreprise, quelque chose comme ça. Ensuite, nous avons un texte en dessous. Ce sera un texte comme celui-ci. Je vais te donner un pourboire ici. Contrôle C, Contrôle V. Il va être au milieu comme ça, un peu court. Peut-être que tu peux changer la couleur en gris terne pour quelque chose comme ça. Maintenant, ce que nous allons faire c'est nous allons le regrouper, contrôler ou commander G, et en appuyant sur Option, nous allons faire 1, 2, 3, 4 copies. Nous avons déjà fait les quatre exemplaires. C' est ainsi que vous allez créer même dans vos designs. C' est une très bonne méthode. Créer un élément qui va être répété encore et encore. Rendez-le parfait, puis répétez-le. Ici, nous avons la deuxième option. Je vais sauter ça avec rapidité, parce que ça va être une tâche répétitive. Vous devez double-cliquer pour entrer dans n'importe quel groupe. Vous pouvez également cliquer avec le bouton droit et le dissocier. Où est le détachement ? C' est fondamentalement ceci. En outre, vous pouvez cliquer sur ce dégrouper. Je pense que c'est Commande Shift Control G ou Command Shift G, pour dégrouper. Ils sont faciles à éditer comme ça. Sinon, vous devez double-cliquer dessus pour entrer dans le symbole. Maintenant, je vais encore accélérer ma vidéo. Je vais les regrouper. Alignez-les à nouveau parce que certains d'entre eux sont mal alignés. Je vais cliquer sur les deux pour les aligner à nouveau, comme ça. Si vous pensez que quelque chose n'est pas aligné, assurez-vous de l'aligner comme ceci. Tous ont été alignés. Maintenant, je vais faire des ajustements. Peut-être que je vais les sélectionner tous comme ça. Ce n'est pas un groupe. Commande G ou Contrôle G. Maintenant, nous allons sélectionner tous les groupes et nous allons cliquer. Je pense que c'était celle-là, oui, celui-là. Il les a alignés tous horizontalement au milieu comme ceci avec la même distance de chaque côté. Maintenant, ils sont alignés beaucoup mieux. Option Alt. Je le tiens et je le fais glisser pour en faire une autre copie. Maintenant, nous allons passer à une autre section qui est notre équipe, je suppose. Oui, nous avons notre équipe. Vous pouvez également montrer vos réalisations ou quelque chose comme ça. Mais je vais sauter cette section. Notre équipe est spéciale. Nous sommes pleins de ça. Je vais copier la commande C ou le contrôle C, contrôle ou la commande V. Maintenant, nous allons avoir des images par ici comme des coups de tête ou quelque chose comme ça. Dans les médias, nous avons cette webcam, qui ressemble à ce dont nous avons besoin ici. On en a un ici comme ça, et on peut avoir des textos ici. Peut-être un lien ou juste un texte. Nous pouvons utiliser ce sous-titre ou peut-être du texte. Voici le nom avec le titre. Il s'appelle John Doe. Nous ne devrions pas nous inquiéter beaucoup du texte qui est très petit. Nous avons ici un texte qui était un texte volumineux. Ici, nous pourrions avoir juste une ligne ou un titre ou une étiquette ou quelque chose comme ça. Alors ne vous inquiétez pas pour ça. Je vais le mettre ici et je vais le dupliquer et écrire son nom comme Internet. Peut-être sur Internet Marketter, quelque chose comme ça. Je vais rapidement dupliquer tout cela. Alignez-les en premier. J' appuie sur la touche Maj pour faire plusieurs sélections. Alors je vais les aligner comme ça. Regroupez-le, sélectionnez-les tous, Commande G. Nous avons un groupe ici. Il va être aligné avec le groupe supérieur ici, Alt ou Option touche 1, 2, 3. Maintenant, je vais les aligner rapidement avec cet alignement horizontal. Vous pouvez voir que nous avons fait notre équipe. Encore une fois, nous avons besoin d'une règle horizontale. Donc, nous allons le dupliquer comme ça. Maintenant, nous avons quelques problèmes d'espace ici. Déverrouillez le navigateur, et le rendre un peu plus grand comme ça. Encore une fois verrouillez-le pour ne pas vous tromper en le déplaçant par erreur. Encore une fois, nous avons besoin d'un titre ici et d'un sous-titre. Faisons un peu de taille. Commande C, commande V. Nous avons un paragraphe ici. Pour notre paragraphe, nous allons utiliser ce texte ici. Ce sont les notations que vous pouvez utiliser. Vous pouvez voir votre couleur de cheveux rouge. A l'intérieur de cela, le texte sera de couleurs rouges. Donc, si vous voulez utiliser quelque chose comme ça, vous pouvez l'utiliser, mais je veux juste utiliser un texte et un paragraphe simples, donc nous ne devrions pas nous inquiéter à ce sujet maintenant. Je vais sélectionner ceci, double-cliquer, coller ici, centrer l'aligner et comme ça. Maintenant, nous avons deux boutons par ici. Ajoutons quelques boutons ou peut-être que nous pouvons copier le même bouton. Commande C, et commande B. Déplaçons le vers le bas comme ça. Je le traîne. Donc nous avons deux boutons, je pense obtenir un devis ou je pense que la consultation gratuite. Donc on a deux boutons par ici. Nous avons des textes ici, ce qui va être un label, je suppose. Mettons des textes comme, citation gratuite, je ne me souviens pas de ce qu'on a mis ici. Ici aussi, nous avons des numéros de téléphone 0800-333-555. Il va donc être aligné avec cela. Maintenant, nous avons presque la forme de notre page principale. Ajoutons l'adresse ici, qui est celle-ci, commande contrôle C. Ajoutons du texte ici, qui va être ceci. Voyons ce qu'on avait. Le paragraphe est en gras. Nous devons ajouter des astérisques pour le rendre gras. Donc j'utilise un astérisque devant ces lignes. Donc, nous avons celui-ci en gras. Donc, c'est fait. Déplacez nos liens ici, qui seront nos liens sociaux. Écrivons sur Facebook. Donc, ce sera le lien Facebook. Ensuite, nous avons besoin d'une place Twitter. Ensuite, nous avons besoin d'un Instagram ou LinkedIn. Peut-être que je pense à LinkedIn. Maintenant, vous pouvez également cliquer sur tous, rendre l'espace entre eux constant, et nous allons les regrouper, contrôler G de commande G. Déplaçons comme ça. Nous avons donc notre filaire initial prêt. Nous n'avons pas besoin de nous soucier beaucoup de comment il va être regardé, quand il est finalisé conception. Nous avons juste besoin des éléments pour être sur cette page. Donc, en ce moment, vous pouvez voir qu'il n'est pas au milieu. Aussi celui-là, ça doit être au milieu comme ça. Donc, nous avons un problème ici. Vous pouvez également sélectionner l'ensemble du groupe comme ceci, et les déplacer. Il n'a pas besoin d'être parfait en pixel, mais je pense qu'il devrait avoir une certaine forme. Donc, pour avoir l'idée de comment ça va ressembler. Je pense qu'on a manqué quelque chose ici. Aussi, je pense que nous avons ajouté deux commentaires d'utilisateurs ici. Cela peut être ajouté dans la phase de conception. Donc, si vous voulez l'ajouter ici, vous pouvez ajouter aux commentaires des utilisateurs ici. Où est notre mise en page ? Je suppose que tu te moques. Ainsi, nous pouvons également utiliser des frais généraux maquettes, nous pouvons ajouter les commentaires des clients dans ce domaine. Je vais le bouger comme ça. Je vais créer ceci, et le déplacer ici comme ça. Il est donc logique que nous pointons sur cette section. C' est ainsi que vous annotez votre design. Vous pouvez également créer des versions alternatives où vous modifiez votre mise en page ou votre conception peut être une maquette de plus pour la même et l'envoyer à votre client. J' utilise aussi ces supports bouclés, peut-être la vidéo de votre client en utilisant votre produit, quelque chose comme ça. Donc, je continue à ajouter ces annotations ici pour assurer que votre client ou désolé votre client, comprendre ce que je voulais dire, puis nous allons l'exporter vers PNG. Nous allons exporter tout ça à la PNG et nous allons l'envoyer à notre client. Voyons à quoi ressemblera notre PNG. Donc, nous avons la page de destination PNG. C' est notre filaire et vous devriez en être fier. Nous avons utilisé la plupart des techniques de conception de l'expérience utilisateur. Assurez-vous d'annoter pour expliquer vos idées et quelque chose comme ça. Dans la phase suivante, nous allons concevoir à l'aide de ce filaire et créer une phase de haute fidélité ou de conception visuelle de votre page de destination. Passons donc à la leçon suivante. 17. Cadre de conception atomique: Aujourd'hui, nous allons parler d'un cadre de conception appelé Atomic Design. Ce cadre de conception a été proposé par Brad Frost. Je pense que c'est la voie à suivre en ce moment ces derniers temps où nos applications web et nos applications mobiles, ils ont 50 écrans. Ensuite, vous avez besoin d'un framework pour contrôler votre conception. Pourquoi je vais y toucher, parce que c'est un cours de conception un peu avancé. Nous allons voir ce qu'est réellement Atomic Design, et sur la base de cela, nous allons construire notre guide de conception d'interface utilisateur dans la prochaine leçon. Qu' est-ce que la conception atomique ? conception atomique en gros, elle a été tirée de l'idée de la chimie où nous avons des atomes, des molécules et des organismes. Maintenant, ce qu'il fait, c'est qu'il existe cinq types de différents niveaux de dessins. Nous divisons nos éléments de conception en cinq niveaux. Atomes, est la forme la plus simple molécules. Puis différents éléments de conception qu'ils combinent pour créer des molécules. Puis différentes molécules combinées pour créer des organismes. Nous avons rassemblé différents organismes, et ils créent des modèles qui peuvent être transformés en pages avec l'ajout d'un contenu dans celui-ci. Voyons quelques-uns des exemples de ce billet de blog. Vous pouvez voir ici, ici nous avons des atomes, molécules, des organismes, des modèles et des pages. Maintenant, les atomes sont vous pouvez voir les blocs de construction, très simple dans les éléments d'interface Web comme l'étiquette de n'importe quel champ, puis champ d'entrée comme le bouton. Ce sont tous des atomes. Ensuite, nous avons des molécules. Vous pouvez voir que nous combinons ces trois atomes pour créer une barre de recherche. Cela va effectuer une seule tâche. Une molécule va effectuer une seule tâche. Pourtant, ils sont très simples. Ils n'ont pas de fonctions complexes ou ils ne sont pas très complexes. Ensuite, les organismes. Maintenant, les organismes vont entrer dans une forme quelconque de la conception. Comme vous pouvez voir votre en-tête ou il l'appelle tête de masse de n'importe quel élément de conception. Je l'appelle l'en-tête et la navigation. Vous pouvez voir cette barre d'en-tête ou cette barre de navigation. Il a le logo, puis il a la navigation, tous les liens. Ensuite, il a une barre de recherche ou peut-être qu'il peut également avoir des liens sociaux. Ça va être un organisme. Nous avons une molécule ici, une molécule par ici, et une molécule par ici, qui sera notre logo et notre lien ou peut-être un atome. Fondamentalement, nous combinons différentes molécules pour créer et concevoir l'élément. On l'appellera des organismes. Pourquoi nous avons besoin de toute cette méthodologie, et de tout ce cadre pour contrôler notre conception ? Si vous concevez une très grande application, et que nous avons cet en-tête dans toutes les pages différentes, et peut-être que nous avons des en-têtes différents dans quelques pages, donc cela va tout contrôler. Nous savons que cet élément de conception ou ce modèle de conception ou organisme est pour cette page, et celui-ci est pour cette page. Vous pouvez voir ici quelques autres exemples comme celui-ci est la barre supérieure Yahoo. Ensuite, nous avons Tumblr, puis nous avons le CNN, et Facebook, et Google. Vous pouvez tout lire à ce sujet si vous le voulez. Il y a aussi un livre de Brad Frost sur ce sujet. Si vous voulez aller plus en détail, je pense que vous pouvez aller de l'avant, et commander son livre, qui est de 10$, je suppose. Maintenant, les modèles vont essentiellement combiner différents organismes. Normalement, les modèles seront comme un filaire. Ils ne vont pas remplir le contenu réel de la page. ce moment, nous avons créé différents organismes, ou vous pouvez les appeler modèles de conception. Nous sommes en train de construire une bibliothèque de design. On peut choisir un bloc ici, et mettre le second bloc, donc c'est fondamentalement un autre organisme. Ensuite, nous avons peu d'organismes, vous pouvez voir par ici. Ici, nous avons un billet de blog. C' est un autre organisme. Ensuite, nous avons la liste, liste des images, c'est un autre organisme. Ensuite, nous avons ce paragraphe et la description de la vidéo pour cette vidéo, c'est un autre organisme. C' est ainsi que nous créons un modèle. Maintenant, les modèles vont essentiellement nous aider à construire notre conception très rapidement. Pourquoi ? Si vous avez conçu un blog WordPress ou un site WordPress que vous savez, que les pages de blog et les pages de post de blog, ils sont différents de la page principale de votre site Web. Nous allons concevoir un modèle pour la page principale. Ensuite, pour la deuxième page, nous allons juste obtenir cet organisme, et le placer en haut de l'autre pour créer une autre page. Ce sera très facile si nous avons cadre intégré à suivre le long des lignes directrices de conception. Il s'agit essentiellement d'un cadre de conception. Nous allons l'utiliser dans l'élaboration de lignes directrices de conception de l'interface utilisateur. C' est un très bon cadre. Je voulais vraiment que vous alliez là-dedans. Maintenant, il y a une autre façon de créer la même approche. Peu de gens, ce qu'ils font est qu'ils utilisent ces modèles, et ils les utilisent comme un modèle en niveaux de gris. Ils continuent à l'améliorer et à y ajouter des détails jusqu'à la conception finale. Vous pouvez voir ici, il a montré que le studio Pittsburgh suit un processus similaire où les étoiles de design, gris et la mise en page moins. Ils essaient normalement d'augmenter sa complexité et sa fidélité. La fidélité est essentiellement la précision ou la proximité du produit réel. Si c'est un filaire et qu'il n'a pas de contenu, juste des lignes comme celle-ci, c'est une faible fidélité. On n'a pas de textos ici. Vous pouvez voir ici, une fois que nous commencerons à mettre du texte et quelques détails, ce sera une fidélité moyenne. Les maquettes, maquettes colorées que nous créons dans Photoshop, c' ce qu'on appelle la haute fidélité. Pages. Maintenant, les pages sont les mêmes qu'un modèle, c'est juste qu'elles ont le contenu réel. Vous pouvez voir ici, ils ont commencé à ajouter du contenu dans cela, comme des images. Donc le vrai contenu ici. C' est du vrai contenu, c'est pourquoi il apparaît ici. Les pages vont être le plus haut niveau de fidélité, que je viens de vous décrire, qu'ils sont fondamentalement les maquettes. C' est le Design Atomique. Vous pouvez lire ce post. Je vais partager le lien vers ça. Aussi, ils en ont un autre, je pense que c'est aussi une explication plus ici. Je vais partager les deux liens avec vous. Vous pouvez le lire. C' est très nécessaire. Je pense que vous avez l'idée d'Atomic Design et pourquoi je l'ai suivie dans mes designs. Passons à la leçon suivante pour créer des directives de conception de l'interface utilisateur. 18. Système de grille en 8 points: Aujourd'hui, nous allons parler d'un cadre de conception appelé système de grille à 8 points. C' est essentiellement le système de grille, vous pouvez l'appliquer au système de grille verticale et aux systèmes de grille horizontale aussi. Maintenant, si vous ne savez pas ce que sont les systèmes de grille verticaux et horizontaux, vous devez voir ma typographie de cours pour les concepteurs d'interface utilisateur. J' ai beaucoup expliqué sur les systèmes de grille et rythme vertical et beaucoup d'autres éléments de conception liés aux grilles. Le système de grille à 8 points est populaire en raison de la conception des matériaux. conception matérielle de Google est basée sur le système de grille 8 points et vous pouvez également l'appeler système de grille 8 pixels. Je vais expliquer avec quelques exemples ce qui est réellement système de grille de 8 pixels et comment nous pouvons l'appliquer dans notre conception Web ou toute conception d'interface utilisateur. Permettez-moi de l'expliquer avec un exemple de fichier Photoshop. Je vais ouvrir un nouveau fichier. Je vais prendre la largeur est de 1 280 et la hauteur sera de 2 400, 1 280 est je pense standard pour une grille Bootstrap, donc je vais le créer. Nous avons ce dossier. Maintenant, ce que je vais faire, c'est que je vais créer un système de grille à 8 pixels ou 8 points ou une mise en page de guide dessus. Vous pouvez accéder à une nouvelle mise en page de guide. Nous allons utiliser 12 colonnes et gouttière. Maintenant, à l'intérieur de la gouttière, assurez-vous que tout ce que vous utilisez dans vos mesures sera le multiple de huit. Vous pouvez voir ici j'ai gouttière est égal à 24 pixels, ce qui est à nouveau le multiple de huit. Vous pouvez également utiliser 16 si vous voulez, c'est à vous de décider. Maintenant, dans les lignes pour le rythme vertical, vous pouvez utiliser la hauteur pour être de 48 pixels, ou vous pouvez utiliser 16 pixels, ou vous pouvez utiliser huit pixels. C' est à vous de décider. Dans mon exercice de conception, j'ai utilisé la superposition de patron de la grille verticale de 8 pixels. Si vous allez avec 48, vous aurez plus d'espace et je pense qu'il est plus facile d' aligner peut-être et vous pouvez également utiliser 32, c'est à vous de choisir. C' est ainsi que nous allons créer un système de grille à 8 points. Maintenant, laissez-moi vous expliquer avec quelques boutons. Par exemple, si j'essaie de créer un bouton, vous pouvez voir ici, il va vraiment aller parfaitement bien à l'intérieur de cette grille, et sa taille sera égale au multiple de huit. Si je vais à ce panneau d'informations et si je Contrôle clique sur ce calque, vous pouvez voir ici 200 par 48 pixels. Fondamentalement, il est multiple de huit, donc 48 est un multiple de huit. Vous pouvez également utiliser quelque chose de similaire ici, peut-être 196 ou quelque chose comme ça, qui est aussi un multiple de huit. Mais je pense que la plupart du temps cette hauteur sera assez bonne pour compenser tous les éléments de conception. C' est ainsi que vous allez faire ces éléments de conception. Maintenant, d'autres paramètres que vous pouvez faire ici est d'aller aux préférences et guide les grilles et les tranches, et j'utilise 64 pixels de ligne de grille pour chaque, donc la division est quatre. Si nous divisons 64 par 4, ce sera 16 pixels. C' est fondamentalement une grille qui peut vous aider à créer votre, donc je vais activer la commande de la grille deux-points, coma, je pense que c'est une citation. Donc, commande citation, et vous pouvez voir que nous avons ceci. Maintenant, si nous essayons d'utiliser cette grille, qui est la grille de Photoshop, vous pouvez voir que vous pouvez concevoir un bouton qui est parfaitement à l'intérieur de la plage de ce système de grille à huit pixels. Laisse-moi te montrer ce que c'est. Il est 256 par 64. Ceux d'entre vous qui ont étudié l'informatique, vous savez déjà que nos ordinateurs et nos morsures et notre système entier sont basés sur huit, donc 32, 64, quelque chose comme ça. Cela fonctionne très bien lorsque vous concevez quelque chose. Laisse-moi cacher ça. Sur cette page, vous pouvez voir cela semble vraiment cool, très proportionnel. De même, vous pouvez utiliser l'échelle de type. Echelle de type, vous pouvez utiliser huit pixels, 16 pixels, 24 pixels. Alors vous pouvez avoir, créons quelque chose ici. Je vais utiliser 16 pixels. Les couleurs devraient être celle-là et nous allons taper quelque chose ici. C' est 16 pixels, c'est 32 pixels, c'est 24 pixels, et c'est 64 pixels. Changeons les tailles d'ici. Je vais utiliser 64 pour celui-là, 24 pour celui-ci, 32 pour celui-ci, et 16 pour celui-ci. Cette échelle va vraiment vous aider dans le design. Cela ne signifie pas que vous devez être trop fixe sur cette échelle de type. Vous pouvez également utiliser des marges et des paddings pour l'ajuster. Dans ma conception réelle, je n'utilise pas 64 ou 24 pixels, j'utilise 49 et 54 pixels, et j'utilise la marge et le rembourrage pour les adapter dans mon système de grille de 8 pixels. Il s'agit d'un système de grille de 8 pixels. Vous pouvez utiliser ce système de grille dans vos paddings, dans vos marges, dans vos presque tous les éléments de votre conception. Si vous avez une section, comme j'ai cette section par exemple, cette section ici, et j'ai une autre section. Changons cette couleur à autre chose pour que vous puissiez voir. J' ai cette section, et mon contenu commence à partir de cette zone. Par exemple, c'est mon contenu. C' est mon contenu, c'est ma section. Ce que nous allons faire, c'est que nous allons utiliser la hauteur de, par exemple, 96. Je vais m'en servir. C' est mon bloc d'envoi que j'ai utilisé pour définir le rembourrage supérieur et le rembourrage inférieur de mon contenu. Cela, vous pouvez également l'appeler marges. Ceux qui connaissent un peu de programmation ou connaissent le HTML, ils savent que cela peut être réalisé par des marges ou des paddings. Ça va être notre section. Par exemple, une section a une hauteur de 800 pixels ou autre. C' est notre contenu, et ce sont nos rembourrages en haut et en bas. Vous pouvez voir ici pourquoi j'utilise ce bloc de 64 pixels. Vous pouvez voir si je clique ici, il est 96, la hauteur est 96 parce que 96 est un multiple de huit. Nous aurons cette mise en page tout au long de notre conception. J' ai beaucoup expliqué sur ce rythme tout vertical dans ma typographie, donc si vous ne l'avez pas pris, je pense que vous devriez le voir, et vous obtiendrez beaucoup de choses sur les systèmes de grille et la conception modulaire et toute cette verticale des trucs rythmiques. Ce système de grille à 8 points ou 8 pixels est un nouveau concept. Beaucoup de concepteurs, même pour les applications mobiles qui utilisent des applications mobiles de conception, ils l'utilisent. Google Material Design l'utilise. Le design Android est basé sur ce système de grille 8 pixels ou 8 points. Je pense que c'est beaucoup sur le système de grille à 8 points. Passons à la prochaine leçon où nous allons concevoir les lignes directrices de l'interface utilisateur pour notre projet. 19. Typeface et sélection de couleurs: Dans cette leçon, je vais parler de la façon dont j'ai décidé la combinaison de polices et les combinaisons de couleurs pour ce projet. Ce que je fais en fait, c'est que j'expérimente normalement dans Illustrator pour les combinaisons de polices. Pourquoi ? Parce que dans Illustrator, les polices sont un peu très belles et elles ont de bonnes courbes, elles n'ont pas de bords pixélisés ou quelque chose comme ça. Donc, je peux voir plus purement ou de plus près ce qu' est le bord et ce que la police est, ou le ton de la police, ou le message de la police, la police transmet. J' ai donc essayé de nombreuses combinaisons de polices. Vous pouvez voir ici, Nunito Sans avec Nunito et Yorkten audacieux avec Nunito Sans et Orkney avec Corbert. Ensuite, nous avons Yorkten avec Nunito. J' ai aimé Yorkten la plupart du temps, donc je l'ai utilisé pour la rubrique. J' en ai juste la version audacieuse. Je crois que je l'ai eu sur un site premium. Ensuite, il y a une autre police que j'ai vraiment aimé, c'est cette Pier Sans. Donc c'était aussi très beau. Ce que j'ai fait, c'est que j'ai mis en évidence certains d'entre eux avec des couleurs différentes, ce que j'ai vraiment aimé. Vous pouvez voir ici, c'est une autre combinaison, mais pour moi, ce n'était pas très bon pour l'entreprise basée sur la technologie. Donc il y en a un autre que vous pouvez voir ici, Proba Pro et Serif72 Beta. Il y avait une autre police audacieuse que j'aimais vraiment. C' était Trueno, et c'était aussi la police libre. J' ai vraiment adoré, mais je pense qu'à la fin, j'ai été bâton pour celui-là. Je suis allé pour celle-là. Yorkten et Nunito Sans. Nunito Sans est essentiellement la police de police de Google. Ainsi, vous pouvez également utiliser ces deux, Nunito Sans et Nunito. Si vous n'avez pas ce Yorkten, je vais essayer de lier si je peux trouver son lien gratuit. Je vais essayer de trouver si c'est encore gratuit. Maintenant, c'est comme ça que je suis allé pour différentes combinaisons de polices et je continue à essayer. D' abord, je choisis deux ou trois polices pour cette rubrique. Fondamentalement le texte d'affichage ou le texte d'en-tête. Parce que je voulais quelque chose d'audacieux, puissant, fiable. Donc j'utilise celui-ci. Ensuite, pour le texte, j'utilise une police ou j'essaie de choisir une police qui est très lisible, même sur de petites tailles, et j'essaie de voir qu'elle correspond à ceci ou avec toute notre équipe. Donc, si nous avons une technologie créative ou un studio basé sur la technologie, il devrait correspondre à notre police de caractères. Notre police devrait donc transmettre le même message. Maintenant sur les couleurs. J' ai conçu ce logo pour cet exercice. J' ai essayé trois couleurs. C' est une couleur légèrement sarcelle avec le violet et le violet bleuâtre, essentiellement bleus et violets principalement et ils sont combinés pour former ce W-W. Je, encore une fois, utilise Nunito Sans, je suppose ou peut-être je pense Nunito. Je crois que j'utilise Nunito. Je ne m'en souviens pas. Donc Nunito j'utilise pour ce logo et je choisis les couleurs, les trois couleurs de ce logo dans mon thème principal, et nous utilisons essentiellement la variation de ce dégradé. C' est ainsi que j'ai choisi différentes polices et différentes combinaisons de polices, polices de caractères et combinaisons de couleurs. Dans la prochaine leçon, je vais vous montrer mon guide de design U-I et le modèle que j'ai utilisé et je vais vous donner un exercice pour en créer un vous-même, ok ? Vous pouvez voir par ici. Voici quelques autres combinaisons de couleurs que j'ai essayé. C' est un peu très pointu et très énergique. Je ne voulais pas transmettre ce message. C' est un peu, vous pouvez dire un produit vert ou peut-être vert. J' ai négligé cette couleur, donc j'utilise celle-ci. C' est ainsi que j'ai obtenu le schéma de couleurs et les correspondances de typographie et sélectionné mes polices de caractères. Passons à la leçon suivante. 20. Quels sont les guides de style UI ?: Dans cette leçon, nous allons couvrir le concept des guides de style de l'interface utilisateur, ou parfois appelés tuiles de style, et pourquoi avons-nous vraiment besoin d'eux. Ensuite, nous allons voir quels sont les modèles de conception ou les bibliothèques de modèles et quelles sont les autres grandes entreprises comme Yelp ou Salesforce, comment elles utilisent les guides de style pour aider leurs développeurs et concepteurs. En fait, la raison pour laquelle nous utilisons le guide de style est de rapprocher développement et vos designers sur la même page ou de les rapprocher. Donc, c'est en ce moment que le guide de style est construit avec Photoshop. Il existe des guides de style qui sont construits avec HTML et ils sont en ligne. Je vais vous montrer les exemples dans quelques minutes. Voyons d'abord quelques-uns des exemples, et comment j'ai créé ce guide de style d'interface utilisateur. J' utilise un modèle de Medialoot et c'est un très bon modèle de guide de style de l'interface utilisateur. n'y a pas de gradients dans son, mais je les ai ajoutés. Tout d'abord, nous allons définir toutes les couleurs que nous allons utiliser. Donc j'utilise peu de couleurs ici, différentes nuances de la même couleur. Vous pouvez voir ici, c'est notre couleur principale. C' est une autre ombre. C' est une nuance un peu plus claire. Maintenant, ce que j'ai utilisé est que j'utilise ce sélecteur de couleurs pour changer la saturation et la luminosité, pour obtenir quelques couleurs supplémentaires. Ensuite, nous avons ce gris clair. Ce gris clair est également plus proche de ce violet je pense. Ensuite, nous avons des gradients, puis nous avons la typographie. C' est l'échelle typographique que j'ai choisie. Je vais te montrer comment j'ai choisi ça dans une autre leçon. Ensuite, nous avons notre corps texte, notre hyperlien, comment le lien sera. Ensuite, nous avons les sections de boutons. Quelles sont les tailles des différents boutons ? Ce sont des styles différents ; normal, stationnaire, actif. Ce sont d'autres styles que nous pouvons utiliser pour le même bouton. Ensuite, nous avons l'iconographie, toutes les icônes que je vais utiliser, je vais les coller ici. Vous pouvez voir, ce sont les icônes que j'ai utilisées dans mon design. Ce sont des icônes personnalisées, je les achète à Creative Market. Donc c'est comme ça que je les ai eus. Je change leurs couleurs en fonction de mon thème. J' utilise le violet et cette couleur sarcelle pour obtenir ces icônes. Ensuite, nous avons nos éléments de forme. Maintenant, tout ce guide de style de l'interface utilisateur suit les règles de la conception atomique. Vous pouvez voir que nous sommes en train de définir nos atomes ici. Comme vous pouvez le voir, nous avons des boutons, des textiles, des dégradés, des couleurs, sont tous les atomes que nous allons utiliser pour construire notre design. Vous pouvez également voir ces éléments de formulaire. Ce sont aussi les atomes. Si vous les combinez, ils vont créer notre bibliothèque de modèles. Donc, la première étape est dans tous les processus de conception, si vous concevez un très grand site Web, une application web, ou peut-être une application web sociale, alors vous devez construire ce guide de style d'interface utilisateur. Il va vraiment vous aider dans le développement et dans votre processus de conception. Nous allons aligner votre développement et conception un peu plus près avec ce guide de style. Vous pouvez voir ici maintenant cela est appelé éléments de l'interface utilisateur, et c'est essentiellement nos molécules. Vous pouvez voir ici, c'est notre barre d'étape, barre de progression, alors c'est aussi la barre de progression de l'étape. Ce sont d'autres contrôles. Ce sont encore nos atomes. C' est encore une fois, cette conception de l'interface utilisateur. C' est notre article et il combine trois choses : notre paragraphe, nos titres et nos images ici. C' est donc une molécule dans la conception atomique. Vous pouvez l'avancer plus loin. Vous pouvez créer beaucoup de bibliothèques de modèles différentes pleines de celui-ci. Vous pouvez créer des fenêtres modales. Vous pouvez créer un formulaire à part entière, des messages d'erreur, pages d'erreur, des modèles, des pages différentes. C'est à vous de décider. Mais c'est le point de départ de toute conception. Si vous pouvez créer ceci, parfois quand je conçois, je crée d'abord la première conception, puis je construis ce guide de style d'interface utilisateur à partir de leur conception. Ainsi, vous pouvez aller de haut en bas, ou de bas en haut. C' est à vous de décider. Vous pouvez avancer ou inverser ; c'est votre propre technique. Mais parfois, je peux les changer quand je vois que la conception globale ne correspond pas à ceux-ci, donc je pourrais les changer. Ce sont tous les dégradés, toutes les couleurs que nous allons utiliser, et toute la typographie. Permettez-moi de vous montrer quelques autres exemples qui sont vraiment bons, vous pouvez les utiliser dans votre conception. Donc en voici un autre. C' est aussi un guide de style, et il a différentes sections. Vous pouvez voir ici la typographie. Ensuite, nous avons des boutons et des onglets, des icônes, formulaires, puis nous avons des graphiques, temp. Ce sont les palettes de couleurs. Vous pouvez utiliser une palette de couleurs pour la typographie, l'arrière-plan et les illustrations. Maintenant, c'est totalement différent, et je pense que c'était des carreaux de style Mindy Wagner, je pense que c'est le cas. Ceci est un autre guide de style, plan de travail, et il est de [inaudible], je pense. J' aime vraiment ce designer et je le suis beaucoup. Donc vous pouvez voir ici, il a différents plans de travail. L' un est mis en place avec des couleurs, l'autre avec la typographie. Vous pouvez voir ici, il y a tous les différents types. Vous pouvez voir comment il a montré cette cour ici. Ensuite, nous avons ce formulaire. Donc, tout ce qu'ils suivent est la même ligne directrice. J' aime vraiment celle-là parce qu'il a peu de choses en plus. Vous pouvez voir ici, si nous allons à ces couleurs, alors nous avons tout ce système de grille. Vous pouvez voir qu'il montre également la grille, 1080 pixels grille, et avec ces colonnes. Ensuite, vous pouvez voir ici nous avons des paramètres de police. Encore une chose, si vous pouvez ajouter la hauteur de ligne avec votre police, je pense que c'est la meilleure chose qu'un développeur puisse obtenir. Donc il est absent du mien par ici. Je peux également ajouter la hauteur de ligne ici. Mais nous allons créer quelque chose de similaire avec notre outil Zeplin. Donc, nous allons utiliser à la fin Zeplin pour créer un guide de style dans le codage. Pas ça, juste l'image. Ce sont des guides de style différents. J' aime vraiment cet outil unique, cela a beaucoup d'autres options. Vous pouvez voir ce sont les contrôles de formulaire, les motifs, et c'est le paragraphe, c'est la hauteur de ligne et tout. En outre, vous pouvez mettre un petit texte. Vous pouvez voir ici, ce sont des cas de petits textes, Montserrat 12 pixels, et la hauteur de ligne est de 18 pixels. C' est ainsi que vous allez concevoir un guide de style. Maintenant, laissez-moi vous montrer quelques-uns des exemples de guides de style en ligne que d'autres grandes entreprises géantes utilisent, et comment elles l'utilisent en construisant des bibliothèques de modèles et tout le reste. 21. Exemples de guides de style UI: ce moment, je vous montre les directives, directives typographiques de Salesforce, vous pouvez voir ici. Ce sont leurs lignes directrices, couleur, accessibilité, saisie de données, affichage des données, mise en page, mouvement, navigation. Vous pouvez voir ici, voici la ligne directrice typographique : Mince, légère, régulière, audacieuse. Quatre types de polices qu'ils utilisent. Ils ont leur propre police et vous pouvez voir en bas ce sont les paramètres qu'ils utilisent. Ensuite, vous pouvez également utiliser, voir ces icônes ici. Si vous accédez à Icônes, vous pouvez voir qu'il s'agit de la couleur et de l'icône différentes qu'ils utilisent. Ceci est un exemple de guide de style Salesforce ou peut-être la bibliothèque de motifs que vous pouvez voir. Ensuite, nous avons ces très beaux modèles mailchimp.com et ceux-ci sont vraiment grille. Ils ont leur système de grille montré ici, comment vous allez utiliser leur système de grille et aussi avec des exemples de code. Donc, c'est fondamentalement la fin ultime de votre guide de style. Vos codeurs vont développer ce système et c'est essentiellement le système de votre guide de style d'interface utilisateur conçu dans un format de codage. Ils vont utiliser ces éléments et ils vont les brancher ensemble dans le cadre de conception atomique pour créer des pages entières et des modèles. Vous pouvez voir ici nous avons des valeurs de pixel et aussi cette hauteur de ligne. La valeur du pixel, c'est la hauteur de la ligne, semi-gras que nous avons sous-titre et hauteur de la ligne. C' est ainsi qu'ils ont montré ces quelques autres exemples du code que vous pouvez utiliser. C' est vraiment génial. Vous pouvez également aller à ce Tables et voir comment leurs styles de tables sont, vous pouvez voir ici. Il y a un exemple en direct, un exemple codé, interactif. C' est donc la bibliothèque de modèles ultime que vous allez construire à partir de votre guide de style d'interface utilisateur. En outre, vous pouvez voir si vous allez à ce Code pour l'Amérique, vous pouvez voir qu'ils ont leur propre guide de style. Vous pouvez voir ce sont l'icône, tailles qu'ils utilisent, ces autres icônes. Si nous descendons, vous pouvez voir ce sont toutes les couleurs qu'ils utilisent : primaire, secondaire. C' est la mise en page qu'ils utilisent. C' est ainsi que vous allez créer un guide de style entier et ce que votre guide de style va faire, il va faire quelque chose de similaire à cela à la fin. Votre concepteur et vos développeurs, ils vont se réunir pour créer quelque chose comme ça. En fin de compte, c'est le système qui va faire avancer votre conception. C' est une application web très complexe ou quelque chose comme ça. Ce sont des guides de style différents. Ceci est un guide de style pour Yelp et je vais partager ces liens avec vous afin que vous puissiez vous familiariser avec ce guide de style et les bibliothèques de motifs et tous ces trucs et c'est vraiment leurs techniques modernes de conception, vous devriez donc vraiment vous familiariser avec eux. Passons à la leçon suivante. 22. Créons un guide de style: Dans cette leçon, je vais vous montrer comment j'ai créé mon Guide de style de l'interface utilisateur et où j'ai obtenu le modèle pour cela. J' ai obtenu le modèle du site medialoot.com et c'est un modèle gratuit que vous devez attribuer si vous le partagez quelque part. Nous le partageons maintenant. Je vous montre que j'utilise celui-là. Il y a peu de choses qui n'étaient pas présentes, comme vous pouvez le voir il y a trois couleurs, gris foncé, gris clair, et le bleu. Mais j'ai ajouté quelques couleurs ici. J' ai augmenté la taille de cette portion. Puis aussi, j'ai changé la typographie, taille des boutons, et peu de choses ici. Maintenant, je vais passer à ma vue Photoshop de ce fichier que j'ai créé. Ici, vous pouvez voir ceci est mon guide de style. Il y a peu de choses que je vais partager avec vous comme comment j'ai créé ou obtenu trois nuances de ces couleurs parce que beaucoup de gens, ils luttent normalement avec des schémas de couleurs. Maintenant, si je vais à ce gris foncé, si vous double-cliquez dessus, vous pouvez voir que c'est le gris foncé, mais ce n'est pas totalement gris, c'est un peu de couleur pourpre. Comment j'ai eu ces couleurs, ces couleurs sombres ? En fait, je commence avec cette couleur ici. Je vais ensuite faire quelque chose comme ça. Vous pouvez voir que cela va être dans cette couleur. La deuxième méthode que vous pouvez utiliser est, vous pouvez cliquer sur n'importe quelle couleur, et vous pouvez aller à cette luminosité, et la réduire à 20 pour cent. Aussi la saturation, réduisez-le à 20 pour cent. Vous pouvez voir que vous allez obtenir une couleur gris violacé très foncé. Encore une fois, vous pouvez vous déplacer dans cette direction si vous le souhaitez, à une large couleur à l'intérieur du gris. Il va obtenir une partie de ce violet et la plupart du noir. Ensuite aussi, vous pouvez voir ce gris clair est également totalement pas gris clair, il est incliné vers cette couleur bleue ici. Il est gris, blanc et bleu. Ce n'est pas totalement de couleur grise. Ensuite, nous avons ce bleu. Mes couleurs principales étaient un, deux et trois. J' ai obtenu toutes ces couleurs de ces trois couleurs. Celui-là, comment je l'ai eu ? J' ai changé la luminosité ou un peu de saturation, si vous voulez. Vous pouvez voir ici, nous avons la teinte 226. La teinte de cette couleur sera 226. C' est la même couleur que j'utilise, 226. Vous pouvez voir ce ne sont que les nuances et les différentes teintes, les différents tons de cette couleur. Fondamentalement, j'ajoute du blanc blanc ici à ceux-ci. Ici aussi, j'ai un changement de saturation ici. J' essaie de le saturer plus pour qu'il y ait plus de netteté. Vous pouvez essayer beaucoup de couleurs. Ce n'est pas très difficile si vous savez comment utiliser cette technique, saturation de la teinte et la luminosité. J' ai décrit cela dans mon UI Design in Photoshop Cours, qui est le cours le plus vendu dans la conception de l'interface utilisateur. Maintenant, en arrivant vers le gradient, notre gradient de base était celui-ci, puis j'ai créé celui-ci. J' ai enlevé une couleur d'ici, donc c'est du bleu à la couleur sarcelle. Ensuite, nous avons cette couleur pourpre foncé à sarcelle. Ce sont essentiellement les mêmes dégradés, c'est juste que j'ai essayé d'ajouter quelques nuances de la même couleur, peut-être une couleur terne, ou peut-être une couleur un peu plus vive pour créer ces dégradés. Maintenant, pour les développeurs, vous pouvez créer autant de couleurs, vous pouvez utiliser autant de couleurs dans les dégradés. Si vous êtes concepteur, vous devez savoir que votre développeur a juste besoin que les arrêts de couleur. Comme vous pouvez voir quoi ici, si je vais à cette superposition de dégradé, vous pouvez voir ici, si je double-clique dessus ou cliquez dessus, c' est les arrêts. Vous pouvez voir ici, c'est notre arrêt à zéro pour cent et nous avons l'arrêt ici, qui est à 100 pour cent. Ce qu'ils ont besoin, c'est que de quelle couleur vous utilisez à zéro pour cent ? Et à 50 pour cent ? Si vous avez utilisé trois couleurs, si vous en avez utilisé deux alors zéro et 100 pour cent sera plus que suffisant. En outre, il s'agit d'un gradient linéaire. La deuxième méthode est que vous pouvez simplement cliquer avec le bouton droit de la souris et copier CSS, et c'est tout. Vos développeurs vont juste avoir besoin du fichier CSS. Si je le colle ici, vous pouvez voir que c'est le dégradé déjà généré dans ce fichier CSS. Nous n'avons pas besoin de nous inquiéter beaucoup, c'est juste à des fins de présentation que vos développeurs savent que leur développement ou leur fichier HTML correspond à vos styles. Ensuite, nous avons cette typographie. Ici, j'ai cette échelle de visionneuse. Je vais y arriver un certain temps. J' ai également ajouté ce petit texte ici. C' est 16 pixels, et ce corps utilise 20 pixels, vous pouvez le voir ici, je l'ai mentionné ici. En outre, les rubriques ont 54, 36, 28, 24, 20, 20. Ceux d'entre vous qui ont regardé mon cours de typographie savent alors que je crée ces échelles de type. C' est essentiellement une échelle de type de base de 16 pixels, et j'ai utilisé 1,5 comme rapport de mise à l'échelle. Je vais vous montrer comment j'ai eu ça dans quelques minutes. En outre, vous pouvez voir ici ce sont différents styles de boutons. Encore une fois, j'utilise les mêmes dégradés en haut. Vous pouvez voir ce sont les dégradés que j'utilise à l'intérieur des boutons. Certaines des ombres que j'utilise, vous pouvez voir par ici, des ombres portées. J' utilise la couleur pourpre ombre portée, violet foncé, 30 pour cent, puis la distance, 20, taille. Je vais partager ce fichier avec vous, alors ne vous inquiétez pas que vous ne sachiez pas ce que sont ces styles. même, vous pouvez également dire à votre développeur que quelle est la rondeur de votre bord, huit pixels de vos boutons. Ce sont quelques autres styles. Vous pouvez voir que j'ai utilisé ces styles à différents endroits dans mon design. Ensuite, j'ai ces icônes. J' ai créé ces icônes. Je les ai tirés du fichier Illustrator. J' ai changé leur couleur et je l'ai collée. C' est un fichier vectoriel avec un objet intelligent ici. Si je double-clique dessus, ils vont être ouverts dans Illustrator. Nous avons ces champs de formulaire. Je viens de changer la bordure ou le trait de ces champs de formulaire pour obtenir cet effet. heure actuelle, nous nous concentrons sur la conception d'une page de destination, mais vous avez l'idée que vous pouvez créer plus de contrôles et de clients plus conçus comme la mise en page des publications, les articles et les citations, et beaucoup de d'autres choses. Je ne veux pas entrer dans les détails en ce moment. Je pense que ces quelques styles et ce guide de style est plus que suffisant pour nous. Commençons et commençons à préparer notre conception. 23. Échelle de caractères expliquée: Mais avant ça, laisse-moi expliquer comment j'ai eu ça. J' utilise une échelle de type très complexe ou très différente. Vous pouvez voir ici mon objet vectoriel s'est ouvert. Minimisons ça. Donc, j'utilise cette échelle de type, site d'échelle modulaire. Vous pouvez voir 16 pixel est ma base, 1.5. Donc 16 pixels, 24, 36, 54, ce sont les quatre tailles. Ensuite, pour les écrans mobiles et l'écran de la tablette, j'utilise 1.75. Donc c'est 49, 28. Ce sont quelques autres tailles que j'ai. Alors si je vais à 1.25, ce sont les tailles, 25, je peux les utiliser, 32 ou 31. Alors je peux utiliser 48 si je veux. Donc ce sont toutes les différences et plus de tailles que j'ai obtenu de la balance. Si vous voulez en savoir plus à ce sujet, vous devez voir mon cours de typographie. Là, j'ai expliqué pourquoi et comment nous obtenons ces échelles. Vous pouvez également utiliser ce style de typographie et l'échelle de la conception du matériau. Vous pouvez voir leurs styles de base sont 12, 14, 16, 20, 34, et vous pouvez également les utiliser. Donc, c'est vraiment génial si vous voulez les utiliser, nous allons les ajuster en utilisant des marges et des paddings. Je pense que j'ai expliqué tout cela dans le cours de typographie, mais quand même, si vous ne savez pas, nous allons les aligner en utilisant des marges et des paddings et tout le reste. C' est ainsi que j'ai construit mon guide de style d'interface utilisateur, je vais l'utiliser dans ma conception. La deuxième chose que vous pouvez faire est que vous pouvez voir en bas, j'ai ajouté toutes ces couleurs que je vais utiliser. En outre, si vous pouvez accéder aux Styles, tous mes styles de boutons sont enregistrés ici. Donc, si vous allez sur ce bouton et vous devriez savoir que comment enregistrer un style, nouveau style et il sera sauvegardé ici. Cela va vraiment accélérer notre travail parce que ce cours est plus axé sur le flux de travail et la façon dont je vais parvenir à un flux de travail rapide. Vous pouvez voir ici, tous mes boutons sont listés ici. Aussi, j'utilise ces bibliothèques, mais je pense qu'elles sont très désordonnées pour moi en ce moment. Donc, je vais rester avec Nuances et Styles maintenant. C' est ainsi que vous utilisez votre guide de style pour créer votre design et aligner votre design avec les développeurs. Passons à la leçon suivante. 24. Outils en ligne pour des calques de grille: Chaque fois que vous concevez quelque chose, il est vraiment important que vous planifiiez votre conception avec vos grades et guides et votre grille modulaire très soigneusement. Maintenant, dans la conception Web, les tailles les plus courantes lorsque vous commencez pour une conception de bureau, elles vont être de 1280 pixels. Donc aujourd'hui, je vais vous montrer les outils en ligne qui peuvent créer des grilles et des guides avec votre système de grille qui est beaucoup utilisé par les développeurs, qui est bootstrap et d'autres grands systèmes. Pour une taille de bureau, nous allons voir quels outils de grille sont utilisés normalement. Il y a quatre outils que je vais vous montrer dans cette leçon. L' un est ce grille.guide, et la taille que nous allons utiliser est cette 1 280 et 12 colonnes, et le plus grand ratio externe est fondamentalement sa marge. Donc, si vous voulez obtenir une marge à l'extérieur, vous pouvez le voir calculé que la marge n'est pas possible. Si vous passez à 1.0, il y a une certaine marge. Vous pouvez le voir dans cette zone de pêche rosé rouge, et le jaune est essentiellement notre taille de colonne. Donc, vous pouvez voir la largeur de la colonne est de 98, largeur de la gouttière est de huit, mais nous avons besoin de quelque chose de plus. Peut-être 20 pixels de largeur de gouttière est bon ou peut-être si vous concevez pour un site Web de mode, vous pourriez avoir besoin de très grands espaces alors vous pourriez avoir besoin de cet espace de gouttière 32 ou 44. Normalement, je pense que j'irais avec ces deux, 32 ou 20 pixels. Je pense que c'est plus que suffisant. Huit pixel est un peu plus petit. Vous pouvez également passer à 1,5. Vous pouvez voir si je veux passer à 1,5, il me montre quelques options comme pour la largeur de gouttière 4, 10, 16, 22. Maintenant, le truc cool, c'est que nous pouvons télécharger ce fichier PNG, et vous pouvez le voir ici. Il s'agit d'un fichier PNG et d'un sous-motif. Vous pouvez facilement l'importer dans Photoshop. Laissez-moi créer un nouveau fichier. Nouveau tableau d'art 1,280 largeur, 2,400 hauteur et je vais utiliser le tableau d'art. Vérifiez ceci, et créez simplement ceci. Donc nous avons notre tableau d'art par ici. Faites glisser ce guide et collez-le ici. Nous allons le dimensionner comme ça et vous pouvez voir qu' s'agit d'une représentation de grille de vos grilles et guides. Nous avons donc notre configuration de système de grille horizontale, colonnes ou la configuration du système de grille de colonne, et vous pouvez voir que nous avons ces marges et toutes ces autres choses mises en place. C' est ainsi que je crée les guides instantanément, plutôt que de les créer avec ces nouvelles mises en page de guide. C' est mieux parce que je les verrouille alors pour qu'ils ne bougent pas. Un autre qui est très similaire est celui-ci. Je l'ai utilisé beaucoup de temps, et le truc cool est que vous pouvez utiliser n'importe quelle taille. Si je vais concevoir pour une tablette, je vais utiliser 768, et peut-être que je peux réduire la largeur de la gouttière ou peut-être le garder même, peut-être 28, et maintenant je vais changer ce nombre de colonnes à huit. Supprimons les marges. C' est ainsi que vous créez vos systèmes de grille. Nous allons créer trois grilles différentes et les tailles que j'utilise est de 1 280. Donc, vous pouvez également utiliser 20 pixels ou peut-être 10 pixels ici et 12 ici, comme ceci. Changeons la taille. Si j'utilise des taux de gouttière de 24 pixels et des taux de marge de 10 pixels, vous pouvez voir que cela devient vert plutôt que rouge. Donc, nous utilisons plein 1,280 pixel. Assurez-vous donc que chaque fois que vous essayez de créer une grille, elle utilise toute la largeur. Si vous allez à cet outil, cela fait automatiquement tous les calculs, donc nous ne nous inquiétons pas à ce sujet. Vous pouvez aussi le laisser zéro, vous pouvez voir si nous le laissons zéro nous avons 16 et 28. Vous pouvez également utiliser celui-ci. Ce PNG est grille 28 largeur est également très impressionnant. Il est plus proche de 30 et bon espacement. Nous pouvons également utiliser ce 16. Donc n'importe lequel de ces deux-là, vous pouvez choisir. Ces deux-là sont géniaux. Maintenant, passons à cet outil de régulation. C' est aussi la même chose. La chose cool à ce sujet est si vous avez juste besoin de deux entrées largeur globale et colonnes. Donc, si vous entrez ces, il va calculer les combinaisons entières pour vous-même. Si vous définissez la largeur de la gouttière sur quatre, vous pouvez avoir 12 colonnes avec 103 pixels largeur, et il peut également créer un fichier PNG. Utilisons celui-ci et voyons à quoi il va et à quoi il va ressembler. Donc ça ressemblait à ça. Il est également très bon outil pour créer des colonnes et je pense que le nom est très cool, 12 colonnes, 70 largeur et 40 gouttière. Un outil très bien aménagé. J' ai vraiment aimé comment il l'a nommé aussi celui-ci, ces deux outils sont géniaux. Maintenant, le dernier outil que je vais vous montrer est ce grilld.org modulaire. Il a un calcul bizarre parce que vous devez faire tout le calcul vous-même. J' insiste donc pour que vous l'utilisiez avec un autre outil comme celui-ci ou celui-ci. Je sais que si je mets la largeur de la colonne à 81 et la largeur de la gouttière à 28, je peux facilement avoir 12 colonnes. Donc, en cela, je vais utiliser ma ligne de base qui est de huit pixels. Je vous ai parlé du rythme vertical du système de grille de huit pixels. Nous utilisons donc un système de grille à huit points ou un cadre de conception à huit points qui est utilisé par l'équipe de conception de Google et nous allons générer cette conception modulaire en fonction de cela. Donc, si vous ne savez pas ce qu'est le design modulaire, vous devez voir mon cours typographique. Juste une brève introduction que nous allons diviser notre conception en différents modules. Vous pouvez voir ici si je change la taille à six, vous pouvez voir que cette ligne blanche sépare fondamentalement notre module entier. Vous pouvez utiliser la hauteur de vos modules et quelque chose comme ça. Maintenant, j'utilise 12 colonnes. C' est essentiellement nos colonnes verticales comme ça. Ces modules sont essentiellement rythmes verticaux. Ils sont donc utilisés pour le rythme vertical et ce sont nos colonnes. Notre base est essentiellement de huit pixels, vous pouvez également définir sur 16 si vous le souhaitez. Vous pouvez voir que c'est ainsi que cela va changer la conception. Vous pouvez également opter pour un multiple de huit. Donc, si vous allez à 32 ou 48, ça va montrer quelque chose comme ça. Il aide notre conception à aligner facilement les choses et à espacer les différents éléments. Vous pouvez utiliser ces zones blanches, ces lignes horizontales blanches pour espacer différentes zones et sections. Maintenant, ce qui est cool à propos de cet outil, c'est que vous pouvez télécharger un client Photoshop et vous pouvez l'appliquer rapidement dans votre document Photoshop. Laissez-moi donc créer un nouveau document. Je vais aller à New, et j'ai enregistré un modèle juste pour créer rapidement ce 1,280. Double-cliquez, et nous avons cette couche une. Je vais à Alt Option Supprimer. Option Supprimer l'outil rapidement. Remplissez-le avec de la couleur blanche, et maintenant je vais double-cliquer sur ce calque et Options de fusion. Je vais aller voir Patron et j'ai ce Patron, ce qui va bien. Donc 108 par 40 pixels. Si j'y vais, vous verrez qu'il y a plus de clients. Maintenant, vous pouvez voir que j'ai utilisé celui-ci et il a l'air vraiment cool. Je pense que la largeur de la colonne est de 28 et la largeur de la gouttière est de 28. Maintenant, nous l'avons utilisé. Donc, si vous voulez un peu d'espace autour de votre Canvas, alors pour les tableaux d'art, vous allez accéder à cet outil de tableau art et cliquez sur ce tableau et changez sa largeur à 1 400. Nous allons aligner cette couche 1 au milieu, comme ceci. Donc, vous pouvez voir que c'est comme ça que j'obtiens ma configuration de grille. Donc, si vous voulez utiliser vos grilles et votre grille modulaire, il existe d'autres façons que vous pouvez également utiliser un patron. Créez un patron avec ces lignes de huit pixels et configurez dans Photoshop et vous pouvez l'appliquer. Mais si je n'ai qu'une seule couche pour mettre en place toutes mes colonnes et mon rythme vertical, et mes grilles verticales et horizontales, alors je pense que c'est le meilleur outil qui est celui-ci modulargrid.org. Il peut créer votre grille modulaire. Parfois, quand je conçois, je n'utilise pas cette grille de huit pixels à l'avant. Je continue juste à placer les choses avec juste les colonnes. Pour les ajustements fins, vous allez laisser votre design à la fin. Maintenant, je vous ai dit comment je vais mettre en place ma grille, grille verticale et horizontale et les quatre outils que vous pouvez utiliser pour configurer vos grilles. C' est vraiment cool. Pour cet outil, vous pouvez voir ici, laissez-moi vous montrer, que vous pouvez également créer un fichier de transplantation Adobe PNG fichier et aussi un script. Donc, si vous voulez exécuter un script, c'est à vous de décider. J' utilise normalement ce fichier PNG. Donc, si je clique ici, vous pouvez voir qu'il va me donner une grille. Le problème avec cette grille, c'est qu'elle ne me montre aucun chiffre. Il ne me montre pas combien de largeur de colonne ou quoi qu'il ait utilisé. Assurez-vous donc que vous le nommez correctement. Donc, si j'y vais, gouttière de 24 pixels et marge de 10 pixels. Je vais retourner à Photoshop. Nommez votre calque 1,280 et 24 gouttière, et ce qui était 10 pixel 10 marge. Ainsi, votre développeur sait quels paramètres avez-vous utilisés pour créer votre système de grille. Vous devez toujours leur dire que vous utilisez ces paramètres. Alignons ça au milieu comme ça. C' est ainsi que cette grille est disposée. Si vous voulez utiliser celui-ci, je normalement ce que je fais est que je superpose cela avec couleur grise et j'ai aussi essayé de le faire un peu comme ça. Eh bien, cachons celui-ci comme ça, et ce que je fais est normalement je le fais glisser comme ça et je le fais à la hauteur de tout le document. Ensuite, nous allons le verrouiller et nous allons les rassembler tous les deux dans un dossier de grilles ou un groupe. Nous avons donc cette configuration de grilles et c'est ainsi que vous allez configurer vos notes et colonnes et tout pour commencer à concevoir votre mise en page Web. 25. Planification de votre grille pour la vue de bureau: Maintenant, la deuxième chose est que nous allons également créer les autres vues comme 768. Vous pouvez voir que nous avons maintenant le problème. Nous pouvons créer huit colonnes et vous pouvez voir qu'il montre la largeur 780. Le problème est que je pense que vous devez obtenir différentes tailles parfaitement. Passons à cette calculatrice et voyons quels calculs nous pouvons avoir pour les autres systèmes de grille. Donc si j'essaie d'avoir huit colonnes ici, je peux avoir 16, 18, 24. Donc, 16 et 32, ils sont communs dans les deux. Je suppose, si je vais à 1 280 et 12. Voyons voir. J'en ai 16. Ainsi, la taille de la gouttière de 16 colonnes est commune dans chacun d'entre eux. Donc je pense qu'on peut rester avec celui-là. Aussi si je vais à quatre et 400 et aller à ces quatre. Voyons voir. On en a encore 16. Je pense qu'une largeur de gouttière de 16 est commune dans toutes mes tailles. Aussi, essayons juste celui-là. Même si j'utilise la largeur de l'iPhone, qui est de 320 pixels, j'ai toujours 16 pixels comme largeur de gouttière dans les trois combinaisons que j'ai essayées. Donc, si je vais à 960, voyons. Même en 960, nous avons 16, 24. On en a 28 ici. Si je vais à 16, on en a 16 et 32. Donc, je pense que nous allons utiliser 1.200 et utiliser 12 pixels afin que nous puissions voir combien de combinaisons. Si nous utilisons 1 200 taille de grille, taille de largeur, et avec 12 colonnes, la largeur de gouttière commune est de 24. Donc, si je passe à 768 et huit colonnes, j'en ai encore 24, ce qui est assez soigné. Si je vais à 400 et quatre colonnes, j'en ai encore 24. Donc, 24, je pense, est le gagnant et aussi vous pouvez aller avec 1.200 pixels. Voyons si je vais avec 1 240 et 12 colonnes, 48. Voyons voir. On peut aussi utiliser quelque chose comme ça, 48. Nous pouvons pouvons utiliser un système de grille de 1 200 avec 12 colonnes et je pense que nous pouvons télécharger le PNG à partir d'ici. Il peut créer un très joli PNG. Donc c'est à vous de décider. Vous pouvez utiliser 1 200, 1 280 ou 1 400. C' est à vous de décider. Vous pouvez également utiliser 1 400 si vous le souhaitez. Vous pouvez voir maintenant qu'il est passé à 28, mais 16 est commun dans chacun d'entre eux. C' est à vous de décider, quoi que vous décidiez, assurez-vous que votre largeur de gouttière est similaire, mais je pense que vous pouvez utiliser n'importe quelle largeur de gouttière. Ce n'est pas un problème si vous avez une conception mobile plus petite, vous pouvez changer la largeur de la gouttière. Maintenant, la raison pour laquelle j'essaie de trouver une largeur de gouttière commune est que je pense que cela peut créer un problème pour vos développeurs, mais je pense qu'il est possible dans le système de grille 4 que vous pouvez utiliser différentes largeurs de gouttière de colonne. Mais je pense que si vous essayez d'exécuter votre développeur dans ces problèmes, je pense que dans Bootstrap, les développeurs peuvent changer la largeur de la gouttière et la taille de la gouttière pour différents appareils ou différentes mises en page comme petit ou peut-être grand ou moyen périphériques. Alors ne vous inquiétez pas beaucoup à ce sujet. Si nous avons vraiment besoin de changer la largeur de la gouttière, nous allons la changer. Donc pour l'instant, nous n'avons pas besoin de nous soucier de la façon dont il va être implémenté dans votre situation réelle ou le codage réel. Mais gardez à l'esprit que je pense qu'il est préférable que vous utilisiez quelque chose de commun où nous avons la même largeur de gouttière dans tous vos designs avec différentes tailles de colonnes, nombre de colonnes. Cela finit par mes calculs de grille et faire des grilles et créer un rythme vertical pour votre conception. Dans la leçon suivante, nous allons commencer à concevoir quelque chose et mettre tout en place selon mon plan. Passons donc à la leçon suivante. 26. Comment utiliser l'espace blanc dans la conception du Web: Maintenant, nous allons planifier notre rythme vertical, et nos grilles et guides que nous allons mettre en place dans cet exercice. Maintenant, laissez-moi d'abord vous montrer comment toute ma conception est disposée, et j'utilise un système de grille à 8 points ou un cadre de conception à 8 points ici, qui est Google Material Design emprunté à Google Material Design. Si je vais à ces grilles, vous pouvez voir ici, si j'essaie de cacher mes grilles verticales, vous pouvez voir que j'utilise 1200 pixels de largeur et j'utilise 12 colonnes. moment, dans cet exercice de conception, ma largeur de gouttière est de 30 pixels. Mais je vais utiliser 24 pixels juste pour m' assurer que nous allons utiliser notre système de grille à 8 points. Peu importe la distance que vous choisissez, assurez-vous que votre rythme vertical, qui est celui-ci, ces lignes, doivent être de huit pixels de large, donc huit pixels de haut. Vous pouvez voir ici, si vous allez dans cette zone, laissez-moi zoomer, maintenant vous pouvez voir combien d'espace j'ai laissé du haut, 1, 2, 3, 4, 5. Donc, il est 5 multiplier par 8 donc c'est, je pense, 40, 40 pixels en haut. Encore une fois, vous pouvez voir en bas, nous avons la même distance, 1, 2, 3, 4, 5. Notre rythme vertical est presque après tous les cinq blocs. Aussi, vous pouvez voir notre bouton est 1, 2, 3, 4, 5, 6. Nous allons utiliser la même technique dans notre conception. Vous pouvez voir ces distances. Ce sont les points clés qui peuvent vraiment créer très élégant et très unique dans votre design. Ainsi, votre design aura l'air très élégant et frais et propre. Une même technique que vous pouvez voir ici, si je vais dans cette zone, vous pouvez voir que nous avons une distance de 1, 2, 3, 4. Entre le titre et ce paragraphe, j'en ai quatre, alors vous pouvez voir ici, encore une fois, nous avons cinq, je suppose, 1, 2, 3, 4, 5. C' est ainsi que tout mon design fonctionne. Si vous allez dans cette zone, vous pouvez voir ici, encore une fois, entre ces deux rubriques, sous-titre et titre, nous avons 1, 2, 3, 4, 5 blocs séparés. C' est ainsi que nous allons exposer tout notre design. Ces distances comptent vraiment. Vous pouvez voir ici, encore une fois, dans ce domaine, nous avons 1, 2, 3, 4. Parfois, j'utilise 32 pixels de distance, et parfois j'utilise 40, et à quelques endroits dans nos sections, j'utilise 64 et parfois 96 pixels. Si nous allons dans cette zone, vous pouvez voir ici, il est presque 60 et 96 pixels de cette section à cette section. De cette zone encore, il a, laissez-moi vous montrer, donc il est 56. C' est ainsi que nous allons exposer tout notre design. Avant cela, assurez-vous d'avoir toutes vos nuances de couleur prêtes ici. Si vous ne savez pas comment les créer, il vous suffit de sélectionner n'importe quelle couleur et de les ajouter aux nuanciers. Vous pouvez cliquer ici, et il sera ajouté ici. Normalement, je garde beaucoup d'échantillons. plupart du temps, les échantillons que je vais utiliser sont en bas, de cette zone à cette zone. Passons maintenant à nos outils pour créer cette grille de huit pixels. En ce moment, parce que mon mouvement de huit pixels n'est pas fixe, parfois j'utilise cinq espaces , parfois quatre espaces, parfois en utilisant sept ou huit espaces, donc je vais utiliser cette seule ligne de huit pixels. Je vais utiliser quelque chose de similaire à cela. Il y a plusieurs façons de créer cela. Il y a des outils en ligne, vous pouvez également créer un motif de pixel, vous pouvez voir ici, j'ai cette superposition de motif. J' ai créé ce modèle. Allons « Déverrouiller » ceci. Laisse-moi te montrer. J' ai créé ces modèles, vous pouvez voir ici, c'est huit et c'est 16 pixels, et c'est, je pense que c'est 24. Ce sont donc différents systèmes de grille de pixels que vous pouvez utiliser. Vous pouvez également utiliser 16 si vous le souhaitez. Peut-être que cela simplifiera votre placement parce que les grilles sont plus larges. Vous pouvez voir certains de mes éléments ne sont pas synchronisés ici. Vous pouvez voir ici, mais c'est presque parfaitement en forme, vous pouvez voir le titre. Aussi le bouton ne convient pas ici car il a huit pixels et huit pixels en haut et en bas. Mais vous pouvez voir que toute l'idée du bloc est ici. Nous allons mettre en place quelque chose comme ça. Alors commençons et installons quelque chose comme ça. 27. Configurer et grille pour la vue sur l'ordinateur: Maintenant, nous allons créer notre grille modulaire en utilisant ce site modulargrid.org. Nous allons utiliser huit comme ligne de base, huit pixels, ce qui est ces petites lignes, ces lignes verticales. Ensuite, nous avons notre module, 78, qui est cette colonne, cette largeur. Ensuite, nous avons 12 modules, qui est 12 colonnes ici. La largeur de la gouttière est de 24 pixels, qui est cette zone blanche. C' est l'espacement entre nos deux colonnes. Ensuite, nous aurons notre hauteur de module, qui est un. Parce que si j'essaie de mettre zéro ici comme ça, ça a créé des problèmes. Donc, j'utilise celui-ci. C' est ainsi que la mise en page se fait ici. Nous avons notre largeur totale de 1 200. Cliquez sur ce « Télécharger ». Votre modèle est en téléchargement. Maintenant, nous allons déplacer ce modèle. Je l'ai déjà déplacé, vous pouvez le copier dans votre dossier presets, dans le dossier patterns. A partir de cela, nous allons le charger dans Photoshop. Maintenant, nous allons créer un nouveau fichier dans Photoshop. Nous allons créer Nouveau. J' ai beaucoup lutté avec les plans de travail et j'ai beaucoup appris. Laissez-moi vous montrer quel est le processus que nous allons utiliser, 1 200 sur 2 400, et nous allons cliquer sur Plans de travail. Ils travaillent d'une manière très bizarre. Il y a beaucoup de bogues dans les plans de travail. Je ne les aime vraiment pas du tout, mais nous devons les utiliser. Il y a deux façons, que vous puissiez les utiliser la première fois et continuer à concevoir à l'intérieur du plan de travail ou que vous puissiez simplement créer n'importe quel document sans plan de travail. Ainsi, lorsque vous créez un nouveau document, décochez celui-ci et vous pouvez créer un document de 1 200 pixels sans ce plan de travail. Je pense que ça a un sentiment de buggy pour moi, donc je vais maintenant rester avec ce plan de travail. Voyons comment ça va se passer. Maintenant, pour ce calque, créons un autre rectangle ici. Cliquez ici, qui devrait être 1.200. Maintenant, pourquoi je crée ça. Je vais vous le dire dans quelques minutes, la hauteur sera de 24. C' est mon principal document rectangle ici, rectangle. J' ai créé un rectangle. Maintenant, je vais faire si je vais créer des sections de ce dessin à l'intérieur de ce plan de travail 1. J' ai créé notre action ici. Si vous ne savez pas quelles sont les actions et comment les créer, vous devez voir mes autres cours ou vous pouvez aller en ligne. C' est très facile. Je vais partager cette action avec vous, au moins vous devez savoir comment les charger. Je vais créer différents dossiers. Vous pouvez voir ici, Grid Header, Navigation, tout. C' est à l'intérieur de ça. Déplaçons cela à l'intérieur de l'en-tête. Maintenant, je vais dupliquer mon rectangle et je vais le déplacer à l'intérieur de la grille. Dans la grille, j'ai déjà téléchargé la grille qui est dans mes modèles. Je vais utiliser Pattern Overlay, et je vais utiliser la grille. Faisons la colorer en blanc. Je vais aussi colorer ce blanc, ce sera notre arrière-plan. Je vais verrouiller cette couche ici, et ça va être notre grille. Aussi, vous pouvez le nommer comme une gouttière de 1,200, 24 pixels ou quelque chose comme ça pour vous assurer que vous vous souvenez que c'est comme ça. Voici comment est ma structure de dossier ou les groupes que j'ai créés à l'intérieur de mon plan de travail. Vous pouvez également le renommer en bureau, quelque chose comme ça. Dans ce domaine, nous allons concevoir. Voyons voir quelle est la taille de ceci. Il va être égal à 1 200, et je vais voir quelle est la taille de cette couche. C' est aussi 1 200, mais je ne sais pas pourquoi c'est foiré ici. Voyons voir quel est notre modèle. Vous cliquez simplement sur ce « Snap to Origin » et je pense que le motif sera à son emplacement. Alors appuyez sur « OK », et voyons. Zoom sur ce que notre colonne, que tout est aligné. Tout est bon. Maintenant, nous pouvons commencer à concevoir dans ce domaine. La deuxième option est que je vais étendre mon plan de travail à 1 400 juste pour avoir de l'espace autour de lui. Voyons voir, je n'ai pas cliqué sur le plan de travail. Assurez-vous de cliquer sur le plan de travail, sélectionner le plan de travail dans le panneau Calques et de choisir la taille comme celle-ci. Maintenant, je vais aligner ma grille à l'intérieur de ça, comme ça. Voici comment vous allez créer un document de 1 400 pixels. Vous pouvez également créer 1 400 documents au début. Je vais remplir ce document de la même couleur. Je pense que sa taille est un peu décalée, donc je vais le redimensionner comme ça. C' est mon expérience, je vais, encore une fois, le verrouiller pour que je ne bouge pas. Je vais essentiellement aligner les choses sur ce contexte. Voici comment notre document principal est configuré et c'est ainsi que vous allez utiliser les plans de travail. Donc, si vous n'utilisez pas de plans de travail au début, à la fin, vous allez sélectionner tous vos calques, quelque chose comme celui-ci, et vous allez cliquer avec le bouton droit de la souris sur Plan de travail à partir de Calques ou de Groupes. Vous pouvez également aller dans cette zone et vous pouvez aller Plan de travail à partir des couches. Nous allons donc sélectionner toutes nos couches et tout ce qui est à l'intérieur notre design et nous allons créer un plan de travail à partir de là. Donc j'utilise la deuxième méthode, qui est que nous commençons avec un plan de travail. Nous avons notre configuration de grille. Dans la leçon suivante, nous allons concevoir notre en-tête, et je vais vous montrer quelles choses vous devez ouvrir en même temps que vous allez concevoir un en-tête. Alors passons à autre chose. 28. Concevoir le lieu de l'en-tête/héros partie 1: Maintenant, commençons notre conception que nous avons créée dans la dernière leçon. Sauvegardons ça avec un nom, comme wstudio. Maintenant, j'ai ouvert tous les documents dont j'ai besoin. L' un est ce contenu. J' ai besoin que ce contenu soit ouvert. Ensuite, j'ai besoin de ce document où nous avons notre logo, qui est le fichier Illustrator. Les autres choses dont vous avez besoin sont cette image que j'utilise, qui sont essentiellement mes atouts. Je vais utiliser cette image, qui est une image libre de redevances. En outre, je vais charger mon Guide de style de l'interface utilisateur dans Photoshop. Je vais charger ce site maintenant dans mon Photoshop comme ça. La première chose que nous allons faire, c'est que nous allons les arranger de façon horizontale comme ça. J' ai ce Guide de style de l'interface utilisateur chargé en haut comme ceci, et mon design est ici. Déplaçons un peu vers le haut et je vais cliquer sur celui-ci et zoomer dessus à 100 pour cent. Maintenant, nous allons sélectionner cet en-tête. Je vais sélectionner cet en-tête, la navigation et le logo, et je vais récupérer mon logo d'ici. Copier. Je vais le coller ici, Control V, Command V, Smart Object, et ce sera un objet intelligent. Maintenant, pour la grille, on va faire 20 pour cent pour qu'on puisse le voir, et je vais le verrouiller. Faisons 10 pour cent. Je pense que 20 pour cent, c'est bon. Je vais le verrouiller et je vais bouger. Une fois que je verrouille cela, je peux cliquer sur n'importe quel calque derrière cela. ce moment, je suis juste en train de les aligner sans utiliser de distances ou d'espaces. L' étape suivante est que nous allons utiliser ce corps de texte, qui sera nos liens. Je vais cliquer ici une fois. Maintenant, nous allons obtenir le contenu d'ici. Je vais copier ces liens à partir de ce document de navigation supérieur, et je vais le coller ici comme ça. Je vais aussi colorer ça. J' ai déjà cette palette de couleurs, alors assurez-vous d'avoir cette palette de couleurs. Vous pouvez également créer des variations de ces couleurs comme j'ai utilisé celui-ci. Un peu plus sombre, couleur grisâtre. Cachons la grille ici. Créons des guides autour d'elle pour que je connaisse la limite, au moins. Je vais cacher ma grille maintenant juste pour que je puisse concevoir librement. Maintenant, je vais créer un bouton noir ici, qui était dans notre guide de style ici. C' est un bouton normal. Cliquons sur ça et je vais l'attraper. C' est notre couche, et je vais l'attraper et la traîner ici. C' est notre bouton en ce moment. Appelons-le, « Obtenez une citation » quelque chose comme ça. Nous allons utiliser régulièrement ici. La taille du lecteur régulière 20 pixels, et la taille du bouton devrait être 144 par 40 parce que nous allons utiliser un petit bouton. Ça va être un petit bouton. Contrôle T ou commande T, 144 par 40. Assurez-vous que vous n'avez pas cliqué dessus, sinon cela va gâcher votre hauteur et votre largeur. Je vais le déplacer un peu vers le bas comme ça. Je pense que je vois un peu d'espacement, donc je vais enlever ça d'ici. Il s'agit essentiellement d'un suivi. Ça a l'air bizarre. C' était trop, peut-être cinq, c'est bien. Je vais bouger ça avec ça. Faisons en sorte que nous allons l'aligner ici. Sélectionnons ceci et alignons-le ici. Vous pouvez voir que les gars intelligents arrivent, ils alignent les choses avec celles-ci. Je vais aligner tout comme ça. Je pense que mon coin arrondi est un peu trop, donc je vais utiliser quatre pixels ici comme ça. Il a l'air bien. Nous avons « Obtenir un devis » et la section supérieure presque terminée. Ensuite, est notre titre et paragraphe et bouton ici, puis nous ajoutons une image vidéo ici. Avant cela, nous allons définir la hauteur de notre zone supérieure. Créons la hauteur de 800, quelque chose comme ça. Ce que je vais faire, c'est que je vais créer quelque chose de haut de 800 pixels ici comme ça. Maintenant, pourquoi j'ai besoin de ce bloc pour obtenir la section supérieure. Je vais créer un guide, comme ça. C'est sur 800. Maintenant, je vais le supprimer. Je pense que maintenant je devrais passer à cette tuile comme ça. Prenons un peu d'espace par ici. En outre, nous pouvons zoomer un peu plus facilement pour nous. J' ai plus d'espace ici. Maintenant, nous avons besoin d'en ajouter un, il suffit de faire glisser ceci, et supprimer tout le reste. Je vais utiliser la rubrique 1. Je crois que j'ai tout effacé. La police est Yorkten, et nous allons utiliser 54, et aussi je vais utiliser la hauteur de la ligne pour être 54. Vous pouvez également utiliser 56 si vous le souhaitez. Maintenant, nous avons notre cap ici, allons l'aligner au hasard. Ne vous inquiétez pas trop de l'alignement, nous allons corriger cela une fois que nous serons dans notre grille. Maintenant, nous avons besoin d'un paragraphe ici et nous allons sélectionner notre outil D et texte et faire glisser quelque chose comme ça. Nous allons copier cette zone, ce paragraphe, et passer à Photoshop. Il a Nunito Sans, Regular, et 20 pixels ou 20 points, et nous allons utiliser 24 ici. Vingt-quatre est fondamentalement notre hauteur de ligne. C' est aussi un multiple de huit. Vous pouvez voir que cette couleur est très nette, donc nous allons la rendre terne comme ça. Nous avons spécifié cette couleur dans votre guide de style. Vous pouvez voir ici si vous allez à ça. Vous pouvez voir ce sont les couleurs de votre gris foncé et clair. L' étape suivante est que nous allons créer un bouton ici. Pour cela, nous avions notre style de bouton, qui était celui-ci. Je vais glisser et déposer mon bouton ici. C' est-à-dire, « Commencez maintenant ». C' est notre bouton. Alignons ça au milieu comme ça. Ça a l'air bien. BTN-Main. C'est notre btn-main. Déplaçons le dans notre zone d'en-tête. Ça va être par ici. Qu' est-ce que c'est ? Je crois que c'est notre bouton. Allons zoomer. C' est la barre de navigation btn-quote-nav. Il est dans la navigation. Je vais le déplacer vers la navigation et le logo, navigation et le logo, la navigation et le logo. Renommons le en « Logo ». C' est notre objet intelligent vecteur, celui-ci. Maintenant, nous allons déplacer ce bouton ici. Sélectionnez ce bouton, V, et je vais le déplacer comme ça. Ne vous inquiétez pas de l'alignement vertical, nous allons le faire entrer après que nous aurons réparé l'ensemble du design. Maintenant, nous allons créer quelque chose ici. Nous avons quelques couches à l'extérieur. Nous devons les déplacer à l'intérieur de l'en-tête. Allons maintenant notre grille parce que nous avons besoin de notre grille maintenant, et je pense que nous en avons besoin au moins 50 pour cent pour que je puisse voir quelle est la taille de mes colonnes. Nous avons ces colonnes ici. Créons un rectangle, et je vais créer un rectangle comme celui-ci. Ça va être notre espace vidéo. Vous pouvez créer ou coller n'importe quelle image ici. J' ai un dossier plein d'images gratuites, laissez-moi vous montrer. Voici le dossier que j'ai d'images libres de l'espace de travail, donc je vais prendre n'importe quelle image d'ici et je vais la faire glisser dans mon Photoshop et nous allons la déplacer ici comme ça. C' est donc notre image. Je vais le placer à l'intérieur de ça. Quelque chose comme ça. Nous allons le regrouper et l'appeler « Zone vidéo ». Encore une fois, il va être à l'intérieur de l'en-tête ou vous pouvez l'appeler zone de héros ou quoi que ce soit, c'est à vous de décider. Je vais arranger quelques choses. Donc vidéo zone et il va avoir un peu de superposition dessus. Je vais utiliser un peu de superposition sur cette zone. Passons à Styles de calque, Superposition de dégradé, et nous allons utiliser le même dégradé que nous avions, peut-être celui-ci. Nous avons tous ces gradients dans nos guides de style, je pense. Voyons où ça va être. On va en faire quelque chose comme ça. Peut-être que nous pouvons utiliser superposition ou multiplier ou peut-être assombrir. Continue d'essayer jusqu'au moment où tu auras. Je vais utiliser la superposition avec la normale. Ça a l'air bien. 29. Concevoir le lieu de l'en-tête/héros partie 2: Je peux en ajouter plus si je veux aimer ça. Donc, c'est comme ça que ça ressemble. Je peux utiliser n'importe quel autre, peut-être comme celui-ci. Encore une fois, je pense que j'avais une ombre à l'arrière-plan de cette zone. Donc, je vais ajouter de l'ombre sur ce rectangle. Allez donc dans Styles de calque et Ombre portée. Donc j'ai cette ombre. Vous pouvez utiliser n'importe quelle couleur pour cette ombre ou peut-être une couleur plus foncée au hasard à partir d'ici. Donc je vais utiliser cette couleur maintenant. Taille, je vais utiliser 10, déplacer cinq pixels. Donc je pense que ça a l'air super. Quatre-vingt-dix, quelque chose comme ça. Peut-être qu'on peut utiliser une couleur plus foncée autour d'elle. Donc quelque chose par ici. C' est comme ça que j'utilise un peu d'ombre ici. Maintenant, nous pouvons ajouter un bouton ici, ce qui est très facile. Nous allons utiliser un outil Ellipse. Maintenez la touche « Maj » pour les proportions. Donc j'ai cette éclipse et elle va être blanche ici. Ensuite, nous avons besoin d'un bouton Play qui va être dans nos outils de forme personnalisés. Donc, c'est fondamentalement un rectangle arrondi. Vous pouvez voir qu'il est sélectionné, vous devez le trouver. Si vous ne le trouvez pas, vous devez activer toutes vos formes ici. Donc ce que je vais faire, c'est que je vais le traîner comme ça. Couleur pourpre, je pense que c'était ce violet, et on va le bouger au milieu de tout ça. Donc je vais le déplacer au milieu de tout ça. Je vais aussi le placer avec mes yeux. Alors assurez-vous d'entraîner vos yeux. Si c'est proportionnel, vous l'aimerez. C' est ainsi que j'ai créé presque la section supérieure de mon en-tête. Peut-être que j'ai besoin des gradients. Voyons quels autres effets nous pouvons avoir. La lumière linéaire est également belle. Aussi la lumière dure est superbe. La lumière douce est aussi bonne. Lumière et couleur, couleur d'esquive linéaire uniquement, écran éclaircit, brûlure linéaire, brûlure couleur, multiplier, assombrir. Donc, nous allons utiliser la normale avec l'opacité comme celle-ci. Vous pouvez aussi l'augmenter si vous le voulez, quelque chose comme ça. Il a l'air bien. Aussi, vous pouvez utiliser la couleur, qui est celui-ci, ce violet bleuâtre. Il a l'air mieux ici. Dans le bouton Original, j'ai créé une autre ombre portée, qui est celle-ci. Vous pouvez voir que nous avons trois ombres ici, vous pouvez voir que c'est le dégradé, et ensuite j'ai une ombre qui est l'ombre bleuâtre. Vous pouvez également utiliser cette couleur pourpre bleuâtre pour cette ombre. Si vous voulez le rendre un peu plus sombre, vous pouvez augmenter la saturation comme ceci et c'est à vous de décider. Effectuons un zoom avant pour voir ce qui se passe réellement avec le bouton. Donc vous pouvez voir ici que nous avons des ombres. Augmentons l'autre ombre, qui est celle-ci. Rendons-le un peu plus terne comme ça et augmentons sa taille. Nous allons aussi le multiplier plus comme ça. Il a l'air mieux maintenant. Si vous voulez cacher cette couleur trop forte autour d'elle, qui est bleu, vous pouvez plutôt ajouter cette couleur, donc c'est un peu de bleu violacé. Maintenant, il a l'air mieux et plus élégant. Le moment est venu de l'aligner sur notre grille. Donc je vais allumer ma grille. La première chose que je vais faire est, voyons quelle est la taille de ça. Hauteur, je vais correspondre à la hauteur de mon logo. Je vais appuyer sur ma grille, 48. Donc ça va tenir à l'intérieur de mes barres, huit barres de pixels. Je vais aussi à un, deux, trois, quatre. Donc, vous pouvez utiliser quelque chose comme ça. Quatre lignes du haut et puis nous allons aligner cette zone avec celle-ci, comme celle-ci, deux, trois, quatre, cinq. Alors peut-être que je pense que je vais le placer ici. Donc cinq du haut. Maintenant, pour le bouton, je vais l'aligner comme ça. Donc, il est presque aligné au milieu. Je pense que c'est un, deux, trois, quatre, cinq. Il est donc de 40 pixels du haut. Ceux-ci comptent vraiment, assurez-vous que ça va être comme ça. Maintenant, à propos de cette zone, élargissons un peu comme ça. Maintenant, nous avons notre espace vidéo et c'est notre jeu. Regroupez-les ensemble. Bouton Play-BTN ou Lecture. Donc nous avons notre zone vidéo, allons la dimensionner en fonction de notre grille. Je vais le dimensionner comme ça et d'ici comme ça. Voyons donc ce qui est plus proche de la 591. Cinq cent quatre-vingt-dix un diviser par 8. Donc je pense qu'il nous faut 74 multipliés par 8 592. Donc je vais le tailler 592, comme ça, et ça va s'intégrer parfaitement dans ma grille. Je pense que je n'ai pas besoin de m'inquiéter pour ça. C' est déjà je pense à l'intérieur de cela, aligné avec la taille. Note sur les colonnes. Vous pouvez voir ici, j'utilise deux colonnes pour cela. Ensuite, je vais utiliser ceci ; une, deux, trois, quatre, colonnes pour cela. Donc ces liens prennent une, deux, trois, quatre colonnes. Vous pouvez voir ces quatre colonnes. Cela va vraiment aider vos développeurs à tout aligner, quelque chose comme ça. Ensuite, nous avons notre logo dans ces deux colonnes. Quatre autres colonnes sur trois sont vides. Donc, vous ne devez pas vous inquiéter à ce sujet. Maintenant, nous allons aligner notre texte sur nos lignes comme ça. Déplaçons un peu ici et déplacons notre bouton à l'intérieur de la grille. Quelque chose comme ça. Maintenant, nous allons cacher notre grille et zoomer pour voir à quel point notre design est proportionné. Il a l'air superbe. Maintenant, si vous voulez ajouter la zone suivante ou la section suivante, vous pouvez l'ajouter ici. Nous ajoutons un certain chevauchement de cette zone avec notre section suivante. Maintenant, dans la prochaine session, nous allons créer la section suivante de cette conception. Passons donc à la leçon suivante. 30. Étapes de conception partie Partie 1: Maintenant, dans cette leçon, nous allons créer la deuxième section, nous l'appelons la première section, Section 1 et vous pouvez voir que notre en-tête est presque terminé. Il y a peu de choses que j'ai manquées ici, qui est une ligne, qui est celle-ci. Ne laissez pas votre client abandonner votre site Web dans les trois premières secondes. Donc ce que je vais faire, c'est que je vais obtenir ça dans cette zone, sélectionner T ou texte, et nous allons le coller ici. clic droit et convertissez en texte de paragraphe Peut-être qu'il ne sera pas adapté dans ce domaine. Nous allons créer un paragraphe. Ça va être comme ça. Voyons ce qui se passe ici. On a ça. Alignons sur la gauche, donc ça a l'air mieux. Alignez-le au milieu ou peut-être que nous l'alignerons par la suite. Définissons la taille de la police, qui va être Yorkten Normal Bold, et ce sera, quelle échelle avons-nous ? Vingt-quatre est bon. On l'a ici. Nous allons donc utiliser 24, et ce sera Yorkten Normal Bold. Nous pouvons également utiliser 24 et peut-être 28. On veut venir ici, comme ça. Je pense que 24 a l'air bien. Notre hauteur de ligne sera de 28. Donc on a ça ici. Allons sur notre grille, quelque chose comme ça. La chose que nous allons faire, c'est qu'il nous faut des chevauchements ici. Allons zoomer et voir où nous avons cela aligné. Quelque chose comme ça. Peut-être qu'on peut utiliser cette colonne ici. Il est donc plus facile d'aligner comme ça. Maintenant, la deuxième partie que nous allons faire est que nous allons d'abord créer la couleur d'arrière-plan ou la couche d'arrière-plan de cette partie. Nous allons déplacer cette Section 1, et je vais saisir mon outil de rectangle et nous allons faire glisser quelque chose de similaire à cela. Quelque chose comme ça. On va ajuster la taille par la suite. Alors ne vous inquiétez pas pour ça. Il suffit de le faire glisser comme ça. Notre couleur va s'étendre des deux côtés. Nous allons le déplacer quelque chose comme ça. Maintenant pour ça, je ne sais pas quel est le problème avec ça. Double-cliquez, et nous utilisons cette couleur, qui est f2f4f7. C' est un peu bleuâtre, cette nuance ici. Si je vais à cette nuance et je continue à augmenter la luminosité et je continue à réduire la saturation, comme ceci. Donc je vais chercher quelque chose ici. Je vais prendre le milieu de tout ça. Une couleur qui est un peu gris-bleuâtre ou gris bleu-blanc très clair. C' est comme ça que j'ai eu cette couleur. Je l'utilise 5-2-5-4-5-7. Vous pouvez voir qu'il est très proche de la teinte de ceci. Donc, c'est 226 et c'est 223. La saturation est deux, la luminosité en 97. Je vais appuyer sur « Ok ». Voyons où est la limite de ceci. Déplaçons un peu vers le haut. Multiplions notre grille. Donc, nous allons utiliser multiplier quelque chose comme ça ou peut-être assombrir. Donc c'est une meilleure vue. C' est une astuce que je viens de découvrir il y a quelques jours que vous pouvez créer quelque chose de ça, et nous allons le nommer arrière-plan. Donc c'est notre BG. Vous pouvez voir. Colorions quelque chose d'autre, afin que nous puissions facilement l'aligner. Maintenant, je pense qu'il est aligné, et couvrons le noir et cachons notre grille. Vous pouvez voir comment notre section se déplace dans la section suivante, et nous avons quelques ombres ici sur cette section. Maintenant, nous allons créer quelques styles. Nous allons créer des textiles de carburant. Nous pouvons donc les réutiliser encore et encore. C' est notre style de paragraphe fondamentalement. Passons donc au style de paragraphe. Si vous ne voyez rien ici, vous pouvez accéder à Fenêtre et activer les styles de paragraphe ici. Je vais créer un nouveau style de paragraphe. J' ai double-cliqué dessus et sélectionné des textes entiers et je vais créer de nouveaux. C' est notre style de paragraphe gris. C' est notre style de paragraphe gris. Appuyez sur « OK » et passez à celui-ci, puis nous allons à nouveau double-cliquer dessus. Que se passe-t-il ici ? Gardions ça. Nous allons sélectionner ceci, créer un nouveau style et ce sera notre rubrique 1, rubrique 1 ou rubrique principale. Bien que nous ne l'utiliserons pas encore et encore, je suppose, mais je pense que ce sera des titres de section. Ce sera le titre de section. Il va sauver toutes les couleurs et tout. Je vais vous montrer comment ça va nous aider à la fin. C' est notre titre de section, et je pense que nous avons besoin d'un style de plus, qui sera celui-ci. Je vais choisir celui-là. Je vais créer un sous-titre blanc. Ce sera notre sous-rubrique blanche, et gardons ça comme ça. Encore une chose, nous allons créer un sous-titre de cette couleur. Je vais donc en créer un autre dans la section suivante. abord, ce que nous allons faire, c'est que nous allons passer à cette question, à savoir l'article 1. Assurez-vous que vous êtes à l'intérieur. Sinon, vous allez cliquer dehors quelque part. Maintenant, nous avons ceci, c'est notre rubrique et voici notre sous-rubrique. Passons à cette zone et je vais sélectionner T. C' est une très belle astuce que j'ai découvert, appuyez sur Maj pendant que vous allez cliquer, sinon il va écrire pour ce chemin ou cette forme à l'arrière-plan. Donc j'ai quelque chose comme ça. Collez-le ici, et je vais utiliser mes styles, qui est mon style de paragraphe. J' ai l'en-tête de section et cliquez dessus. Nous avons notre style de retour. Maintenant, nous allons utiliser la sous-rubrique, qui va être quelque chose comme ça. Si vous sélectionnez un calque, calque de texte dans Photoshop, il y a une très belle astuce que si j'ai sélectionné celui-ci et puis je clique sur cette icône de texte, il va créer le texte dans le même style, couleur et taille de la police, laquelle j'ai récemment cliqué. Parfois, il est très difficile pour moi de trouver les polices que j'ai. Donc, ce que je fais est, je clique juste sur le calque que j'aime, puis retourne au dossier ou groupe, puis clique à l'intérieur et il va me donner le même tout. Alors essayons ça. Contrôle C et je vais le coller ici comme ça. Maintenant, je vais utiliser une couleur. Je pense que j'ai utilisé cette couleur dans mon design. Alors, oui. Nous avons cette couleur. Maintenant, nous allons créer un autre style, le style de paragraphe. Je vais double-cliquer dessus, et je vais cliquer sur ceux-ci. Ça va être notre sous-rubrique « pourpre ». Sous-tête pourpre, quelque chose comme ça. Pour que tu puisses t'en souvenir. Sous-tête blanche, quelque chose comme ça. J' en avais besoin celui-là. 31. Étapes de conception partie 2: Donc nous avons notre sous-titre violet ici. Maintenant, nous allons créer la prochaine section qui sera nos icônes et leurs détails ici. Ce que je vais faire, c'est le même tour. Tout d'abord, voyons le processus que nous avons eu. Évaluez votre entreprise et le design pour les utilisateurs, testez les produits sur vos vrais utilisateurs, commercialisez votre produit. Maintenant, nous allons d'abord obtenir tous ces textes. Donc, avant cela, nous allons créer un seul échantillon. Un bloc. Donc d' abord, le premier bloc va être celui-ci. C' est notre premier bloc. Je vais mettre ça dans cette zone. Je vais le dimensionner en conséquence peut-être que je pense que j'ai besoin d'une taille de 128. Je pense que 128, c'est bien, ça a l'air bien. Effectuons un zoom arrière et voyons comment il est dimensionné. Ouais, je pense que ça a l'air bien. Ensuite, nous allons créer un sous-titre ici, qui sera, « Évaluer votre entreprise », donc je vais utiliser évaluer votre entreprise ici. Évaluez votre entreprise. C' est notre première étape et nous allons utiliser quelque chose de plus proche. Peut-être celui-là. Je pense qu'un peu plus sombre, c'est bien. Donc on a ça. Pourquoi je n'ai pas créé de style pour celui-ci, c'est parce que nous n'avons pas besoin d'un style ici, nous allons utiliser 20 comme ça, et je pense que c'est bon. Peut-être qu'on a besoin de quelque chose de similaire à ça. Donc, nous avons presque fait ça. Il suffit de copier le reste du texte, Ctrl C et je vais créer un paragraphe ici comme ceci et je vais centrer l'aligner. Appliquons notre style de paragraphe, qui est le paragraphe gris. Donc je n'ai pas besoin de remplacer mon style, alors j'ai fait ça. Maintenant, nous allons activer notre grille parce que nous allons utiliser trois colonnes ici. Alors passons ici et c'est ce qui se passe beaucoup avec moi que je n'ai pas cliqué à l'intérieur de la bonne zone. Donc je vais passer à la section 1, Ctrl G et ce sera mon étape 1. Maintenant, déplacons-le à l'intérieur de ces trois colonnes. Nous l'avons presque au milieu de ces trois colonnes. Maintenant, la deuxième chose que nous allons faire est que nous allons l'aligner afin que nous n'ayons pas besoin de tout aligner à nouveau. Alors nous allons l'aligner comme ça. Je pense que ça a l'air bien. Ce sera le W majuscule, et notre première étape est terminée. Maintenant, nous allons répliquer ceci dans les trois autres colonnes. Je vais juste remplacer l'icône et le texte. Donc je vais le faire très vite. Donc je vais au Ctrl G ou au Commandement J et je vais le déplacer ici comme ça. Assurez-vous qu'une fois que vous apportez votre autre icône ici, vous les nommez correctement et vous les dimensionnez correctement afin que je ne cache pas l'icône précédente, je copie juste l'autre et la taille à l'intérieur de cette grille. Je vais utiliser 128 donc cela va s'aligner correctement. Vous devez vous souvenir de la taille que vous avez utilisée. Je vais supprimer le précédent. C' est ainsi que je vais tout copier et je vais répliquer ces quatre étapes. Maintenant, nous avons terminé notre tâche répétitive. Il y a encore une chose que vous pouvez faire. Vous pouvez aller à cette grille supérieure et nous allons diviser cela en quatre sections pour nous assurer que nous utilisons tout avec précision. Ce que nous allons faire, c'est que nous allons permettre à nos guides. Cachons notre grille. Nous allons utiliser notre Griddify et nous allons le diviser en quatre verticaux. Alors assurez-vous qu'il est vertical comme ça et nous allons le diviser comme ça. Donc, maintenant, nous avons quatre domaines ici, il y a un problème. Faisons d'abord la sélection de cette zone comme ceci. Ensuite, nous allons les diviser comme ça. C' est parfait. Donc Ctrl D ou Commande D pour masquer la sélection et je pense que peut-être le plug-in GuideGuide pourrait fonctionner. moment, tout est aligné. Vous pouvez également créer ces guides au début de votre document parce que maintenant je l'ai étendu avec 1 400, donc mes guides ne fonctionnent pas. Voyons si je peux les créer avec mon plug-in GuideGuide, effacons les guides et je vais utiliser mon plug-in GuideGuide. Voyons si cela peut créer une marge. Donc 12 colonnes, la largeur va être 78, gouttière va être 24, et c'est au centre. Je vais donc ajouter des guides. J' ai donc mes guides et ce plug-in a vraiment sauvé ma journée. GuideGuide, vous devriez l'avoir. Donc, je viens de faire une sélection et j'ai créé les guides autour d'elle pour que vous puissiez voir qu'il est parfaitement sur ma mise en page, qui est derrière cela, donc c'est mon patron. Vous pouvez l'utiliser pour aligner facilement, vous pouvez effectuer des sélections comme celles-ci et aligner vos éléments. Donc, la prochaine que je vais créer dans la leçon suivante parce que cela prend beaucoup de temps. Allons l'aligner au milieu. Désolé. déplacer tous vos éléments dans les zones appropriées. Comme j'ai ce problème ici, donc c'est l'étape 4. Vous pouvez également déplacer tous ces éléments dans un autre groupe appelé étapes. Cela va simplifier votre travail comme ça. C' est au milieu, donc je peux me cacher et les montrer comme ça. C' est ainsi que nous allons créer des directives et des guides différents, même si j'ai élargi la taille de mon document. Sinon, le système de guide par défaut de Photoshop ne fonctionne pas. Il crée des guides sur l'ensemble du document. Passons donc à la leçon suivante. 32. Réalisation de critiques utilisateurs: Maintenant, dans cette leçon, nous allons ajuster une partie du rythme vertical de cette zone, et aussi nous allons créer deux commentaires d'utilisateurs ici. Commençons. abord, nous allons cacher cette grille parce que nous avons nos colonnes ici. Merci au plugin GuideGuide ici, ça m'a vraiment sauvé la journée. La première étape est, je vais créer une éclipse ici de 64 ou peut-être 96 pixels par 96 pixels. Assurez-vous que vous êtes à l'intérieur du calque ou de la section appropriée. Une autre section, déplacons-la en bas et créons un groupe. Créez un groupe appelé avis utilisateur. Nous avons notre premier utilisateur. Nous allons en créer un et le dupliquer. Nous créons un bloc et nous allons le répéter. C' est ce qu'on appelle la répétition en termes de conception. Passons à la section 2. Renommons cette section 2 en commentaires. Utilisez les commentaires des utilisateurs et je vais le colorer en blanc. Je ne sais pas pourquoi cela ne fonctionne pas parce que je pense que nous avons une expérience. Déplaçons-le au-dessus de l'arrière-plan. Maintenant, nous avons notre expérience. Je vais le déplacer dans la section 1. Nous pouvons également l'appeler revue de section. Assurez-vous que votre organisation et votre arrangement sont bons. Maintenant, je vais avoir une frontière autour de lui. Ce sera un coup, et je vais utiliser un coup de 4 pixels, et ce sera cette couleur nette. Peut-être celui-là. Ça a l'air bien. Ce sont les couleurs que j'édite à partir de cette zone, celle-ci, et nous allons utiliser un utilisateur de plugin UberFaces. Pendant que votre couche est sélectionnée, vous allez cliquer sur celle-ci, et nous avons notre seul utilisateur ici. Nous allons utiliser du texte ici. Ça va être notre nom. Créons 20. Utilisez 20 pixels et nous allons les déplacer tous les deux dans cette zone. Ce que j'essaie de faire, c'est, j'utilise toutes ces colonnes ici et ces six colonnes pour la deuxième révision. Déplaçons ça comme ça. Je vais zoomer. Peut-être qu'on peut utiliser une autre police, qui sera Nunito Sans. Voyons comment ça va ressembler ici. Nunito Sans Régulier. Il a l'air mieux. Colorions celui-là. Utilisons Nunito Sans semi audacieux ici et nous allons utiliser la couleur foncée, qui va être celle-là. Quelque chose comme ça. Il a l'air mieux. Voyons à quel point on dirait audacieux. Bold a l'air mieux, je suppose. Nous avons mis ce style ici comme ça. C' est un style personnalisé, alors ne vous inquiétez pas à ce sujet. Nous pouvons également modifier et modifier les polices à la fin. Réglage fin, gardez ça à la fin. Si quelqu'un peint une voiture, ils vont tout affiner à la fin. Appuyez sur Maj et faites glisser comme ceci. En ce moment, je vais coller du Lorem ipsum d'ici. Coller Lorem ipsum. Je vais utiliser le textile ici, qui était le style paragraphe, où c'est notre paragraphe gris. C' est notre première revue. Je vais aligner ce visage avec l'examen comme ça, quelque chose comme ça, et celui-ci aussi avec ça. Je vais l'aligner sur cette ellipse. Désolé, comment on appelle ça ? L' ellipse. Ellipse, pas éclipse. C' est lié à la lune, je suppose. Nous avons créé notre avis utilisateur. Voyons ce que nous avons dans notre évaluation utilisateur. Où est notre texte ? Déplacez-le à l'avis de l'utilisateur et maintenant nous avons notre bloc complet. Maintenant, assurez-vous que nous avons un espacement constant du côté gauche. Un, deux, un, deux, trois, quatre. J' utilise 24 pixels d'ici. Si vous voulez obtenir cela un peu plus longtemps, vous pouvez l'utiliser quelque chose comme ça. Peut-être quelque chose comme ça. Ça a l'air bien. Maintenant, nous avons notre examen prêt. Maintenant, nous allons le dupliquer et nous allons dupliquer tout le groupe. Un, deux, un, deux, trois, quatre. Fondamentalement, il a aussi la même distance. Voyons si on peut l'aligner ici. Comment ça ressemble de cette façon ? Il a toujours l'air bien, donc nous n'avons pas besoin de nous soucier des alignements. Maintenant, nous allons changer l'image ici. Nous allons, encore une fois, utiliser ça. Allons chercher des hommes ici. Créez un autre. Celle-ci a l'air bien. On a ça par ici. Mettons-le à l'intérieur de ça. Déplaçons celui-là. Supprimons les deux et sélectionnons simplement celui-ci, et je vais le clipser à l'intérieur. C' est bien. Quel était le nom de ça ? Carl Bates. Utilisons ce Carl Bates. Maintenant, nous avons nos avis alignés. Vous pouvez également utiliser quelque chose comme ça. Peut-être que vous pouvez centrer les aligner et garder celui-ci à gauche. Allons activer nos couches, et nous allons centrer aligner ce nom, et simplement les regrouper. Nom, image. Nous allons centrer l'aligner en utilisant celui-ci. Ces colonnes, nous allons les aligner au centre et au milieu. Faisons la même chose pour celle-là. Vous pouvez aussi laisser de côté toute la colonne ici pour celui-ci et aussi celui-ci. Je vais double-cliquer dessus pour le redimensionner et quelque chose comme ça. Il y a beaucoup de styles. Vous pouvez équilibrer ces problèmes et les problèmes d'espacement large plus tard. Maintenant, vous pouvez voir qu'ils ont l'air plus équilibrés. Nous allons maintenant ajuster notre rythme vertical. 33. Ajustement de l'espace blanc et rythme vertical: Maintenant, dans cette leçon, nous allons finaliser cette deuxième section et nous allons déplacer les choses pour obtenir notre espacement vertical correct. Je pense qu'on devrait toujours finir notre section comme ça. Maintenant ce que je vais faire, c'est que je vais voir quel est l'espacement de mes différents éléments ici. Vous pouvez voir ici que nous avons un, deux, trois, quatre, cinq, six, sept, huit. Il va être 48 presque. Faites-le à l'intérieur de ces lignes. C' est la partie que j'utilise, ce bloc entier pour aligner cela. Ensuite, pour celui-ci, je vais l'aligner d'ici en bas de cette section un, deux, trois. Je pense que c'est un peu plus loin. Je pense que celui-là a l'air bien. Trois blocs que je déplace ou utilise à l'intérieur du milieu. Vous pouvez également utiliser quelque chose comme ça, peut-être deux blocs. Ce que je parle de deux blocs signifie ces deux blocs, un blanc et un rouge. Ça a l'air bien. Cachons notre grille et voyons à quoi elle ressemble. Il a l'air bien. Les distances sont bonnes. Voyons quelles sont les autres distances pour nos autres étapes et icônes. Ce sont nos pas. Peut-être que je peux utiliser un, deux, trois, quatre. Je pense que ça me plaît ici, comme ça. Zoom arrière. Cet espacement semble bon. Ensuite, nous allons déplacer notre section de révision des utilisateurs avec ceci. Je pense que j'ai oublié le titre de commentaire utilisateur ici. Ce que je vais faire, c'est que je vais dupliquer ce Control G et le déplacer avec mes touches Maj et fléchées, et je vais le renommer ce que mes utilisateurs disent de moi. Je pense que c'est ce que nos clients disent de nous. C' était en noir parce qu'il était dans la même section, donc je vais utiliser cette couleur. Je vais l'aligner au milieu rapidement, et Contrôle D. Voyons où je peux l'obtenir. Je pense que c'est une nouvelle section. Ça a l'air bien. Ici, c'est bon, et ensuite on va bouger ces deux-là, peut-être par ici. Zoom arrière pour voir l'effet. Assurez-vous toujours d'effectuer un zoom arrière pour voir à quoi il ressemble. Je pense qu'il a l'air un peu équilibré, il a l'air bien. Réglons la taille de cette zone. Nous avons, je pense, 96 de ce côté-ci. Votre haut et le bas de chaque section doivent être similaires. Si vous utilisez quelque chose comme ça ici, donc je vais placer quelques guides ici comme ça, en frayant la distance. C' est 96 en gros. Je vais utiliser 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 et 12. Nous allons utiliser 12 pâtés de maisons ici. Utilisons juste une hauteur de 96 et la largeur 1,200. Il est plus facile pour moi d'utiliser quelques blocs comme ça. Vous pouvez voir ici que je peux l'aligner avec les lignes, et je vais sélectionner mon arrière-plan et je vais l'aligner avec ceci comme ça. Nos distances sont parfaites. Voyons s'il y a un autre problème, utilisons-le comme ça. Je pense que c'est en dehors de ma colonne. Ce n'est pas un gros problème, je pense qu'ils sont presque au milieu de cette zone. Y a-t-il autre chose que je dois changer ? C' est presque parfait. Quelque chose comme ça. Mon rythme vertical est parfait. Nous devons passer à la prochaine leçon et à la prochaine partie, qui sera notre équipe. Pour cela, je vais vous voir dans la prochaine leçon. 34. Concevoir la section d'équipe Partie 1: Maintenant, dans cette leçon, nous allons créer notre troisième section qui concerne notre équipe. Alors commençons et nous allons créer ça dès maintenant. Maintenant, nous allons changer la taille de notre tableau d'art, nous allons sélectionner l'outil de tableau d'art à partir d'ici et nous allons cliquer sur le nom du tableau d'art et nous allons augmenter la hauteur à 3 400, quelque chose comme ça. Vous pouvez voir, il s'est étendu à partir du bas. Maintenant, nous allons changer notre grille, alors déverrouillez-le. En fait, ce qui se passe ici, c'est qu'il va être dimensionné en fonction de notre tableau d'art. Nous l'avons dimensionné et c'était notre forme, il est très rustique de le changer. Maintenant, nous avons les motifs, donc le motif est déjà appliqué à cette forme. Maintenant, nous allons en créer une autre, verrouillons cette grille et nous allons passer à la section deux. Ici, nous allons créer un arrière-plan. Créons un arrière-plan comme celui-ci. Il est assorti à celui-ci, le fond supérieur, et je vais avoir une couleur qui est un peu de couleur pourpre grisâtre terne, un peu plus terne que le haut. Je vais sélectionner ceci, dissimulons la grille. Vous pouvez voir comment cela se passe bien. C' est blanc pour obtenir plus d'accent sur cette zone, alors c'est un peu gris terne et c'est plus gris. Maintenant, nous allons changer le nom en arrière-plan ou BG. BG est court pour le fond est utilisé dans le codage CSS et HTML beaucoup. Je pense que vos concepteurs, développeurs vont vraiment adorer ce BG. Maintenant, nous allons avoir quelque chose ici, qui va être notre cap. Notre équipe est spéciale, nous sommes un sac plein de sorciers numériques. Ce sont les mots que nous allons utiliser. Notre équipe géniale, donc je vais le changer maintenant, nous allons l'aligner au milieu puis je vais utiliser une autre ligne. Appliquons notre style de paragraphe. Ici, nous avons notre style de paragraphe, qui était celui-ci, et nous allons le changer pour cela. Alignons à nouveau au milieu, Ctrl+D ou Commande+D pour désélectionner. Donc, ce que je fais, c'est que je sélectionne rapidement toute la toile ou le tableau d'art, et je l'aligne au milieu en utilisant cela. C' est notre deuxième section, on va les monter comme ça. Maintenant, ce que j'ai fait ici, c'est que j'ai ajouté les images de mes 40 membres, et nous allons à nouveau utiliser des grilles, des grilles et des guides. J' ai utilisé un truc très simple, laissez-moi vous montrer. Ici, nous avons cette belle fille et nous allons la copier ici, dans cette zone. Maintenant vous pouvez voir, elle est là. Nous allons l'attraper et le réduire pour que nous puissions le concentrer dans ce domaine. On peut avoir quatre ou trois membres de l'équipe au moins ici. Tu peux en avoir trois ou quatre, c'est à toi de décider. Abaissons la taille comme ça. Maintenant, nous allons simplement utiliser un truc très simple, qui est multiplier ou assombrir. Je pense que Darken va bien marcher. Darken va bien fonctionner sur le fond de la diapositive. La deuxième chose que nous allons faire, c'est que nous allons la garder dans ce contexte. C' est comme ça que j'ai fait ce truc très simple, on va le déplacer un peu ici, comme ça. Voici notre seul membre de notre équipe. Utilisons quelques autres d'ici, je vais utiliser la même astuce encore et encore, assombrir et le déplacer dans la zone et à l'intérieur de ceux-ci. Allons leur permettre. Encore une fois, clipsez-le à l'intérieur de cette boîte. Déplace-le. Maintenant, comme vous pouvez le voir, j'ai utilisé trois colonnes pour chaque image, vous pouvez voir ici. Vous pouvez utiliser quatre colonnes si vous avez trois membres de l'équipe ou vous pouvez utiliser trois colonnes si vous voulez en afficher plus de trois. J' évite le caniveau, ici nous avons quatre membres de l'équipe et nous pouvons utiliser leurs titres en haut. Je vais en créer un, puis sauter l'autre est très rapidement, donc vous savez que j'ai des utilisateurs. Créons ce rectangle arrondi ici et nous allons utiliser quelque chose comme 15 sur peut-être 16 pixels ici. Ne regarde pas bien, donc nous allons utiliser 32. 24 pixels et il est arrondi entièrement. Voyons quelle hauteur il a, il a 48 hauteurs, parfait. 48 pixels de haut. C'est parfait. Maintenant, je vais combiner une autre forme, qui va être celle-ci. Je pense que c'est plus que suffisant, déplacons-le comme ça. Maintenant, nous allons combiner ces deux formes par Commande+D ou Ctrl+E. Déplaçons en dehors de ce clip et appelons-la tag ou quelque chose comme ça. C' est notre nom principal et l'étiquette de ce membre, gardons 64, quelque chose comme ça. Maintenant, nous allons utiliser un textile, qui va être Nunito Sans régulière 20 pixels, et la couleur que je vais utiliser est blanche. Je vais utiliser le designer, quelque chose comme ça. Ça a l'air vraiment cool. Utilisons notre couleur noire, qui est notre couleur noire d'équipe, qui est celle-ci. 3d3d3f. Si vous voulez mettre en surbrillance cette couleur, vous pouvez l'utiliser. Je réduit la luminosité pour obtenir plus de combinaison de couleurs, sorte que vous pouvez voir qu'il est plus noir. Pourquoi j'utilise cette combinaison, parce que mon arrière-plan est un peu terne. J' ai un fond gris foncé, donc j'utilise plus de couleur de surbrillance comme ça. Même si vous voulez rester avec la couleur précédente, c'est à vous de décider. Si vous voulez coller avec cette couleur, cela semble très décent aussi. Déplaçons cela au milieu en utilisant sur vos propres yeux. Maintenant, nous allons à Ctrl+G ou Commande+G pour regrouper ceci et en faire une balise. Nous allons utiliser une autre balise. Maintenant, il y a plus de créativité. Si vous voulez utiliser, vous pouvez utiliser un style comme celui-ci. Déplacez les balises de haut en bas avec les têtes des différentes personnes de votre équipe, donc marketing ou quelque chose comme ça. Ensuite, nous avons une autre étiquette, qui va être cette personne. Maintenant, je vais déplacer cela un peu vers le bas et un peu sur la droite, et cela va être membre de l'équipe de conception UX, et passons cela au milieu. C' est comme ça que nous faisons des trucs créatifs ici. C' est ainsi que j'ai utilisé toutes ces balises. Maintenant, pour mettre en évidence, je vais utiliser cette couleur sarcelle pour mettre en évidence cela. Aussi, si vous voulez le garder à plat, vous pouvez le garder à plat. Normalement ce que j'ai fait c'est que j'ai ajouté une ombre portée ici, qui était cette couleur, je suppose. Non, je pense que c'était la même couleur, et vous pouvez y ajouter un peu d'obscurité, peut-être le garder 50 %, quelque chose comme ça, et nous allons réduire l'opacité à 30, quelque chose comme ça. Juste pour faire qu'il est mis en évidence. Donc quelqu'un passe au-dessus de cette personne, il va mettre en évidence comme ça. C' est comme ça que nous avons fait quelque chose de cool et passons un peu vers le bas juste pour s'assurer qu' il est aligné sur celui-ci ou peut-être un peu plus bas que celui-ci. 35. Concevoir la section d'équipe Partie 2: Maintenant, vous pouvez utiliser n'importe quelle police de script pour les noms sur eux. Voyons si j'ai une police manuscrite. Je pense que j'ai utilisé un marqueur, peut-être écrirons un marqueur. Voici Eds Market Main Script Regular. J'ai celui-là. J' utilise Permanent Marker Regular, je pense que c'est la police Google et vous pouvez l'utiliser aussi. Ce que je vais faire, c'est que je vais écrire leur nom, Jenna Jem, quelque chose comme ça. Déplaçons ça ici et nous allons utiliser un marqueur permanent pour la taille de 24 pixels, et nous allons utiliser notre couleur blanc grisâtre. Nous allons y ajouter une ombre portée. Parce qu'il ne sera pas visible comme ça, donc je vais ajouter une ombre portée, comme ça, juste pour le rendre un peu plus proche du texte, comme ceci. Il a l'air bien. Maintenant, nous allons les dupliquer et les enchaîner sur les gens donc je vais sauter ça. Maintenant, nous avons terminé presque cette partie, nous avons juste besoin d'aligner notre truc vertical qui est avec la grille verticale. Voyons ce qu'on va faire ici. Maintenant, prenons celle-là et nous allons utiliser quelque chose de semblable à ce que nous avons fait, alors voyons ce que nous avions ici. Cliquez sur cette grille, et je vais la multiplier et la faire à 100 pour cent. Voyons à quoi ça va ressembler. Je ne suis toujours pas en mesure de voir l'arrière-plan, donc ce que je vais faire, c'est que je vais rendre l'arrière-plan un peu plus sombre pour le but de l'alignement. Je pense que c'est un peu mal aligné, nous allons le faire descendre, vous pouvez voir ici. C' est un peu de chirurgie, je l'appelle la chirurgie de conception, parce que vous devez être très précis, donc 1, 2, 3, 4, 5 et 6. Je pense que je vais laisser cinq en haut, huit, cinq c'est 40 ; 40 pixels en haut. Déplaçons celui-ci un peu comme ça, donc il est à l'intérieur de cette zone. Maintenant, nous pouvons réduire notre taille d'arrière-plan principale. Voyons comment est la distance. Nous avons ici presque comme 107 ou peut-être 108, quelque chose comme ça, et nous en avons 107 ici, donc c'est presque parfait. Nous avons le même espace ici dans cette zone et dans cette zone. Maintenant, je vais changer la couleur à l'arrière-plan que nous avons utilisé. Voyons plus de choses, peut-être zoomer et voir le fond de celui-ci et vous pouvez voir que nous avons un problème. Nous avons maintenant le rythme vertical parfait. Ce n'est pas nécessaire, si votre codeur ne peut pas les rendre très précis, peu importe, mais assurez-vous que les distances du haut et du bas sont les mêmes. Ils devraient être dans un bon espacement ; c'est essentiellement une utilisation de l'espace large. Maintenant, vous pouvez voir sur ce fond, qui est très coloré, j'ai utilisé des ombres portées. Comme je l'ai dit à propos de cette technique dans mes cours précédents, que si vous avez un fond très coloré, vous devez utiliser une ombre portée. Maintenant, cette zone est terminée, alors passons un peu vers le bas parce que nous avions une ligne à l'intérieur comme ça. Je pense que je sens que cette distance est un peu petite, donc je vais l'augmenter en sélectionnant ces 2 et 1, 2, 20, et 1, 2 , 3, 4, donc j'ajoute 24 autres ici. Encore une fois, nous allons les déplacer 24 pixels vers le bas. Permet de sélectionner tous ces balises et toutes les balises, et je vais les utiliser. Désolé, pas ça. Qu' est-ce que c'est ? Aussi celle-là. Contrôle G. Ce sont mes objets sur les images. Ce sont en fait des éléments au-dessus des images. Je vais sélectionner les quatre images de ces personnes et les objets, puis nous allons les déplacer 1, 2, 3, 4, donc juste pour obtenir la distance exacte. On les déplace vers le bas et on les déplace vers le bas. Nous sommes bons avec cette section, et je pense que nous avons créé très belle section. Passons à la leçon suivante où nous allons créer la dernière section, qui sera le pied de page. Passons à la leçon suivante. 36. Concevoir le pied partie 1: Maintenant, dans cette leçon, nous allons créer la dernière section, qui va être notre pied de page. J' ai déjà rassemblé quelques images gratuites, que nous allons utiliser. Vous pouvez utiliser n'importe lequel d'entre eux. Toute image de votre bureau, ou une image cool prise de l'extérieur comme celle-ci, ou peut-être votre siège de bureau vide. Vous pouvez discuter avec nous ou quelque chose comme ça. Ce que je vais faire, c'est que je vais glisser dans le pied de page cette image. C' est notre expérience. Maintenant, je vais maintenir ma touche « Option » ou « Alt » avec la touche « Maj » pour créer quelque chose comme ça. J' augmente la taille à quelque chose comme ça. Vous pouvez également modifier la taille du plan de travail. Sélectionnez ce tableau d'art et je vais utiliser peut-être 3460, ou peut-être 3500, juste augmenter 100 de plus. On a plus d'espace. Maintenant, c'est fait, alors nous allons superposer quelque chose d'autre, qui va être notre rectangle. Il suffit de faire glisser un rectangle comme celui-ci et nous allons utiliser un peu de couleur, peut-être celui-ci. On va utiliser la superposition. Ensuite, sur ce Mort pour Stock, l'image que nous avons utilisée, cache celui-ci. D' abord, nous allons le faire en niveaux de gris. Je vais aller à Ajustements. Il y a plusieurs façons de changer la couleur. Je vais utiliser la superposition de couleur. Je vais utiliser la couleur pourpre d'ici. Allons le déplacer ici. Celle-ci ou vous pouvez l'utiliser, c'est à vous de décider. Il y a plusieurs façons d'obtenir beaucoup de grand effet. Si vous allez à cette couleur, vous pouvez voir ceci est essentiellement coloré en noir et blanc. Vous pouvez également utiliser une autre couleur. Maintenant, il a été coloré. Maintenant, vous pouvez activer la superposition, et rendons la normale et rendons un peu d'opacité. Utilisez un peu d'opacité comme ça. Maintenant, vous pouvez voir que j'ai obtenu le même effet. Il y a plusieurs façons d'obtenir cet effet. Passons à la fin pour qu'il n'y ait rien à voir à l'intérieur. Maintenant, c'est notre bureau. qui est cool, c'est que vous pouvez changer la couleur quand vous le souhaitez. Vous pouvez aller à celui-ci, celui-ci, ou celui-ci, ou cette couleur, ou peut-être cette couleur, c'est à vous de décider. Maintenant, nous allons zoomer et voir à quoi il ressemble. Il est très bien construit. Maintenant, ajoutons quelques styles et choses ici. Notre but était, Laissez-nous vous Wow et tout ça. Il s'agit d'un paragraphe, prêt à franchir une nouvelle étape. Je vais créer un nouveau titre, appuyez sur « Maj » et « Contrôle V ». Maintenant, vous pouvez voir que la police est très étrange ici. Ce sont nos sous-titres, donc je vais le coller dans un nouveau calque. J' ai deux lignes maintenant. C' est notre style de paragraphe principal. Ce que je vais faire, c'est que je vais utiliser le titre de section. Je vais remplacer en ce moment et je vais utiliser la couleur blanche. Maintenant, ça ne dérange rien d'autre, ne change rien d'autre. Pour celui-ci, je vais utiliser à nouveau sous-tête blanc et remplacer tout. Changeons. Ne vous inquiétez pas de la distance, nous allons en créer un autre ici, et cette fois nous allons coller le paragraphe ici. Quelque chose comme ça. Ici, nous avons le paragraphe et nous allons utiliser le style de paragraphe gris. Nous allons utiliser la couleur blanche ici. Ne changez rien d'autre, appliquez-le une fois et utilisez votre propre imagination pour changer les choses. Je vais le rendre un peu large juste pour avoir deux lignes ici. Nous allons tout aligner à la fin, créons juste tous ces trucs géniaux et passons à autre chose. Maintenant, nous allons utiliser notre guide de style de modèle. Je vais rapidement l'aligner comme ça. Allons tout sortir de là. Je vais utiliser Shift V et fondamentalement je vais utiliser ce bouton. Ça va venir ici. C' est ce dont j'avais besoin. Ce sera notre bouton Consulter gratuitement avec nous. Ça a l'air vraiment cool. Déplaçons-le au milieu un peu comme ça, un peu par ici. Allons activer vos guides, votre grille. allons le dupliquer et nous allons utiliser quelque chose comme ça. Alignons ça avec celui-ci. Nous ferons l'alignement à la fin. Continuons tout d'abord à créer des choses. Ce que je vais faire, c'est que je vais utiliser cette couleur noire et ce bouton sera blanc. Je crois que ce bouton était Dites-nous ce que vous voulez. Peut-être que le besoin est bon. Nous avons zoomé et vous pouvez voir nos boutons sont vraiment beaux. Maintenant, la deuxième chose est que nous pouvons ajouter quelque chose ici, qui va être notre email hello@wstudio.org, quelque chose comme ça. La couleur sera blanche, peut-être que nous pouvons utiliser ce blanc. Ensuite, nous allons le dupliquer et nous allons l'aligner sur celui-ci 0800 ce sera notre numéro de téléphone. Maintenant, assurez-vous que nous avons tout dans ces boutons. Comme vous pouvez le voir maintenant, c'est un peu différent, donc je vais le déplacer à l'intérieur de cela. C' était btn consulter, et celui-ci était btn email. Ce sont deux boutons et tout est aligné. Allons les aligner comme ça. Nous avons tout aligné au moins ces boutons. 37. Concevoir le pied partie 2: Nous avons besoin d'une adresse ici et je pense que les liens sociaux ici. Il reste quelque chose d'autre ? Oui, je pense que c'est la seule chose qui reste encore ou peut-être tout droit réservé. C' est la dernière chose que nous devons mettre ici. Maintenant, nous allons utiliser le même paragraphe, dupliquer, et je vais le déplacer en dehors de ces boutons. Où est-ce qu'on crée tout ? Ils sont en dehors du pied de page, donc je vais les déplacer à l'intérieur du pied de page comme ça. Ils sont maintenant à l'intérieur du pied de page, donc tout semble bien. Où on était la dernière fois ? C' est l'endroit où nous étions la dernière fois. Voici notre bureau. Vous pouvez voir une fois que vous avez établi votre propre modèle de conception ou système, il sera très facile pour vous de l'implémenter et l'utiliser soigneusement et de créer des designs impressionnants avec elle. Je vais sélectionner ceci et le colorer avec celui-ci. Vous pouvez également utiliser cette couleur ou peut-être la couleur noire, c'est à vous de décider. La couleur noire est aussi belle, celle-ci. Il y a plusieurs façons de mettre l'accent sur celui-ci, sorte que vous pouvez également utiliser gras ici et changer la couleur pour le même blanc. Tu peux le laisser comme ça. Voyons voir quelle est la hauteur de la ligne parce qu'elle est un peu bizarre pour moi. Non, je pense que la hauteur de la ligne est parfaite. Nous avons besoin d'icônes complètes ici, donc je vais utiliser un truc très pratique qui s'appelle polices d'icônes sociales. Vous pouvez voir ici que j'ai peu d'entre eux alignés, alors nous allons le dupliquer, et utiliser une police d'icônes sociales, donc nous pouvons utiliser celle-ci, Socialico Regular. Donc je vais utiliser celui-là, Socialico Regular. Ce dont nous avons besoin, c'est Facebook et non Amazon. Peut-être que j'ai besoin de Bhars, LinkedIn. Elles sont très petites. Vous pouvez choisir n'importe qui vous plaît. En fait, vous devez simplement taper quelques mots. Si j'essaie d'utiliser quelque chose comme ça, donc je vais utiliser F. Si j'appuie juste F, vous pouvez voir l'icône Facebook puis Twitter, W. Je vais juste mettre un peu au hasard ici parce qu'il sera très difficile pour moi de trouver les bonnes. Je vais utiliser ces quatre et la taille de police que je vais utiliser pourrait être 64, quelque chose comme ça. Allons sur mes grilles et voyons ce que je fais ici. Ces polices sont appelées polices sociales. Vous pouvez les installer et ils vont vous donner des formes comme celles-ci, et vous pouvez simplement les utiliser dans vos conceptions. Vous n'avez pas besoin d'apporter différentes formes ou icônes. Si vous voulez utiliser un SVG ou des icônes, vous pouvez les utiliser, mais normalement je fais quelque chose comme ça. C' est très pratique pour moi. Déplaçons ça en dehors de ça. Voici notre adresse de bureau, déplaçons celle-ci, et nous allons les aligner comme ça, ou peut-être comme ça. Désolé, ça devrait être comme ça. Il y a un problème, qui est cette boîte. Assurez-vous qu'il est dimensionné avec précision, sinon ils ne vont pas s'aligner. J' ai aligné les deux et si vous voulez changer la taille, vous pouvez changer la taille de ceux-ci. Notre bureau de fantaisie est superbe. Je pense que vous pouvez peut-être utiliser la police Yorkten Bold, qui est notre deuxième police ici. Vous pouvez le remplacer comme ça. Il a l'air plus cool, plus bon comme ça. Vous pouvez également augmenter la hauteur de la ligne si vous le souhaitez, quelque chose comme ceci. Mais je pense que la hauteur de la ligne était bonne. Ça n'avait pas l'air bizarre. Maintenant, c'est terminé. Réglons nos hauteurs de ligne et tout le reste. Voyons où on peut tout changer. Changons d'abord la taille de la grille par ici, peut-être quelque chose comme ça. Nous avons l'espace au sommet qui va être prêt à prendre. Je pense qu'on en a un, deux, trois, quatre, cinq, six, sept, huit. Utilisons huit ici et nous allons en utiliser deux ici. Nous ajoutons quelque chose comme ça et nous allons le déplacer ici. Il a l'air parfait. Déplaçons un peu ici et pour les boutons, je vais les mettre tous les deux dans un groupe de boutons et je vais les déplacer un peu vers le haut, peut-être ici. Ils ne sont pas alignés. Allons les aligner d'abord, quelque chose comme ça. Ils sont alignés très parfaitement avec cette grille. Déplaçons-les, ces deux éléments un peu plus haut. Effectuons un zoom arrière et voyons comment il est en équilibre. Ouais, je pense que ça a l'air bien, mais peut-être maintenant ils ont l'air parfaits. Je ne me souviens pas si j'ai manqué quelque chose, mais je pense qu'ils ont l'air super. Maintenant, nous allons dimensionner notre toile. Ce qu'il nous faut ici, c'est un, deux , trois, quatre, cinq, six, sept, huit. Voyons ce que nous ajoutons en haut. Qu' est-ce qui ne va pas avec ça ? Maintenant, la seule chose qui reste est que nous devons changer le fond de cette conception, qui est cette zone. Nous devons le clipser et pour cela je vais utiliser à nouveau un bloc de 48 pixels de haut. Je vais le rendre large, la même largeur, donc il va être au sommet de ceux-ci. Je vais l'aligner en bas comme ça. Maintenant, je vais voir quelle taille reste ici parce que c'est un peu difficile pour moi de calculer. Maintenant, je vais voir 163, donc je dois supprimer 163 pixels de notre plan de travail. Passons au plan de travail et je vais retirer 163 de cette hauteur. Il sera de 3 500 moins 163, 3 337 divisés par 8. Voyons voir, c'est 417 par 8, 3 336, donc la taille devrait être 3 336. C' est la taille parfaite. Maintenant, nous allons enlever cette barre blanche d'ici. La deuxième chose est que nous allons cacher notre grille et Voila, notre design est parfaitement prêt. C' est ainsi que nous allons utiliser les plans de travail et créer un design génial qui est aligné verticalement et tout. Il y a peu de changements que j'ai fait ici comme j'ai changé le bouton en noir, et aussi cet effet de dégradé, je l'ai changé pour être celui-ci, ce dégradé plus sombre que nous avons utilisé dans notre exercice et aussi j'ai changé l'angle. L' angle est maintenant 140 comme ça. L' angle est presque d'ici. J' ai changé quelques choses ici, alors vous pouvez voir que ce design est superbe. Si vous avez des questions, demandez-moi. Dans la prochaine série, nous allons créer des vues de tablette et des vues mobiles pour cette conception. Pourquoi j'ai utilisé des plans de travail ? Nous l'aurions conçu sans plans de travail parce que le plugin Zeplin, il a besoin de plans de travail. Nous allons exporter ce plan de travail vers Zeplin pour créer des choses géniales pour nos développeurs. Je suis ouvert à toutes les questions. Si vous avez besoin de moi pour répondre à des questions, vous pouvez me le demander à tout moment. Passons à la leçon suivante. 38. Considérations réactives de conception Web Partie 1: Avant de commencer à concevoir des vues d'appareils intelligents pour les utilisateurs de tablettes, nous allons considérer certaines des techniques de conception réactive que vous devez garder à l' esprit lors de la conception pour les écrans mobiles, les écrans de tablettes ou les sites Web réactifs. Maintenant, la première chose est que je vais vous montrer est la priorisation du contenu, ce qui signifie que sur les petits écrans, nous avons moins d'espace disponible. Nous pourrions donc avoir besoin de cacher ou de montrer une partie du contenu en fonction de son importance. Il est également appelé chargement conditionnel, et vous devez décider avec les utilisateurs ou les membres de votre équipe comme votre PDG ou le propriétaire du site Web que le contenu est important pour vos utilisateurs. Vous devez décider avec votre client que le contenu que vous allez cacher et le contenu que vous allez afficher. Permettez-moi maintenant de vous montrer l'exemple de la priorisation du contenu. Ici, comme vous pouvez le voir, c'est notre vue de bureau. Sur un appareil mobile, nous devrons peut-être en cacher un. Il s'agit d'un paragraphe, cela pourrait prendre un certain temps. Notre espace et nous allons l'enlever, et au lieu de cela nous allons le montrer. Il s'agit d'une ligne plus importante, qui est de ne pas laisser votre client abandonner votre site Web dans les trois premières secondes. Ceci est plus important que de lire ce paragraphe ou d'afficher ce paragraphe sur un écran mobile. Ce que nous faisons, c'est que nous allons cacher cela, et nous allons déplacer cela ici. Je vais parler d'autres techniques. Mais en ce moment, ça veut dire que nous allons cacher certaines choses. Nous pourrions avoir besoin de cacher ces quatre éléments dans un bouton, et nous allons montrer ces boutons, donc deux boutons en haut. Il s'agit de la priorisation du contenu. Ce bouton est très important, donc nous devons le garder ici. Ce sont les choses que nous allons prendre en compte lorsque nous concevons des sites Web réactifs. Maintenant, l'étape suivante est des images réactives. Nous allons livrer différentes images pour différents écrans. Parfois, même l'image entière est changée avec une autre image que je l' ai vue sur beaucoup de sites Web en raison de son temps de chargement et de sa vitesse. Des images plus grandes, elles vont prendre beaucoup de temps alors ce que les développeurs font, c'est qu'ils créent différents ensembles d'images pour différentes tailles d'écran. Laissez-moi vous montrer l'exemple. Maintenant, vous pouvez voir ici nous avons cette très grande image de fond de ce lecteur vidéo. Ce fond derrière ce bouton de lecture, nous allons le presser sur un écran mobile. Ce que nous allons faire, c'est que si sa taille est de 800 x 700 pixels, nous allons générer trois tailles différentes. Peut-être que pour un écran mobile, nous pourrions générer une taille qui n'est que de 400 pixels de large. Ce qu'il va faire, c'est qu'il va se charger très rapidement sur des écrans plus petits. C' est la technique principale derrière ces images réactives ou changer différentes images sur différentes tailles d'écran. Maintenant, la technique que nous utilisons la plupart du temps lors de la conception est Alter les positions de bloc de contenu. Ce que nous allons faire, c'est que nous allons repositionner nos blocs de contenu en fonction de la taille de l'écran. Par exemple, si vous avez vu certains blogs, vous pouvez voir que les barres latérales se déplacent normalement vers le bas du contenu principal. Laissez-moi vous montrer l'exemple. Voici un modèle de quelqu'un que je pense qu'il s'appelle Milana. Maintenant, ce que vous pouvez voir ici, c'est qu'il a deux colonnes : la mise en page de la colonne principale de base qui est celui-ci est notre contenu principal. Vous pouvez voir ici, ce sont des messages différents. C' est essentiellement la barre latérale sur le côté droit À propos de moi, Suivez-nous, Étiquettes, etc. Maintenant, quand il va être pressé sur un écran mobile, vous pouvez voir le contenu principal va être en haut. Toutes les autres choses que vous pouvez voir ici À propos de moi et tout, elles sont repositionnées en bas. En outre, ils appliquent la priorisation du contenu parce que ce contenu n'est pas une grande valeur, nous avons besoin que l'utilisateur voit ce contenu d'abord. C' est ainsi que nous allons changer les blocs de l'ensemble des éléments de conception. Maintenant, vous pouvez voir qu'il y a une chose de plus que même ils ont changé toute la mise en page. Maintenant, les billets de blog ont une mise en page différente. Ils sont dans une disposition de carte comme ça. Voici comment vous allez concevoir des sites web réactifs. Une autre considération que beaucoup de designers ne comprennent pas est moins l'utilisation des images. Si vous allez charger une tonne d'images sur chaque écran de votre site Web, et qu'il va prendre beaucoup de temps pour que votre site Web se charge, vous allez vraiment ralentir votre site Web. Sur les smartphones, je pense que les utilisateurs ne vont pas attendre plus de cinq secondes pour charger le site Web. Votre site Web devrait se charger très rapidement. Maintenant, pour que cela se produise, vous devez utiliser moins d'images. Maintenant, laissez-moi vous montrer l'exemple de moins d'images. Maintenant, ce que nous allons faire est que vous pouvez voir dans tout ce design il n'y a que peu d'images, l'une est celle-ci. Voici les quelques membres de l'équipe, quatre images, et cet arrière-plan. n'y a que cinq images dans tout ce design. Ces quatre seront des icônes SVG. Je vais t'expliquer à la fin. Ceux-ci vont tous être générés par le code CSS ou le code développeur. Cela peut aussi être une icône SVG, et tout le reste est juste CSS ou peut-être que ce logo est une image. Tout le reste n'est pas une image. Je pense que ce sera très petit, moins de chargement sur votre site web et très moins de taille pour les images. Maintenant, si vous superposez quelque chose comme ça sur une image, cela va vraiment réduire leur taille. Si vous utilisez une image comme cette image en couleur, elle aura un peu plus d'espace de taille en kilo-octets. 39. Considérations réactives de conception Web Partie 2: Maintenant, une autre considération est la taille des titres et du texte. La plupart des designers, ils ne savent pas que nous pouvons aussi rendre notre typographie réactive. Nous allons changer notre titre et la taille du texte pour chaque écran. Maintenant, je prends normalement trois échelles typographiques différentes, et je les utilise pour chaque taille d'appareil. Pour les appareils moyens ou les affichages de tablette, je vais utiliser une autre taille de titre peut être inférieure à la taille du bureau. En outre, pour les smartphones, nous allons utiliser de petites tailles de tête parce que si nous utilisons la même taille de tête que nous avons ici dans cette conception, vous pouvez voir ici, nous contribuons à construire la confiance avec le design. C' est 54 pixels. Si j'essaie de l'utiliser sur un très petit écran, écran mobile, vous pouvez voir comme ici, il va prendre tout l'écran. Je pense que même cela va prendre trois lignes pour montrer ce titre avec 54 pixels. Ce que je vais faire, c'est que je vais utiliser une taille plus petite, peut-être 49 pixels ou peut-être 38 pixels ou 36 pixels juste pour m'assurer qu'il est lisible et qu'il prend bien soin du petit écran. Telles sont les considérations que nous allons prendre en compte lors de la conception d'appareils mobiles ou de petits appareils. Maintenant, la dernière considération est différentes grilles de colonnes. Ce que nous allons faire est, nous allons utiliser huit colonnes pour la vue tablette et pour les smartphones, je vais utiliser quatre colonnes juste dans un but de simplicité et d'alignement. Maintenant, en fait, ce qu'il fait est, dans le codage réel, le nombre de colonnes est le même, mais en fait, notre conception va prendre les colonnes entières ou peut-être la moitié d'entre elles dans la plupart des cas. Permettez-moi de vous montrer les exemples. Maintenant, si vous voyez cette vue tablette, vous pouvez voir que nous avons une, deux, trois, quatre, cinq, six, sept, huit colonnes. Maintenant, ce que nous allons faire est, vous pouvez voir ici, nous utilisons du contenu [inaudible]. Ici, j'ai supprimé le paragraphe de la vue de ma tablette. Vous pouvez voir que je quitte cette première colonne et j'utilise cette zone ici comme ça. Ou peut-être que vous pouvez dire que j'utilise aussi le milieu de cette zone. J' ai sauté cette colonne et j'ai déplacé mon contenu ici. En outre, vous pouvez voir que j'ai cette hiérarchisation de contour ou comme vous pouvez le voir, mes liens sont cachés dans cette zone. Ensuite, vous pouvez voir que j'ai une taille totalement différente pour ma zone vidéo. Maintenant, vous pouvez voir que ma zone vidéo prend tout l'espace. Il utilise huit colonnes, mais en ce qui concerne notre codage ou les développeurs, vous pouvez voir qu'il prend toute la largeur ou 12 colonnes complètes. Ne vous inquiétez pas pour ça. Même si vous utilisez moins de colonnes, vos développeurs devineront que comment ils vont déplacer cela. Ne vous inquiétez pas pour ça. Vous pouvez voir maintenant, il prend six colonnes. Cette zone et cette zone vont prendre six colonnes. Maintenant, la base de tout ce design réactif est les moitiés, les quarts et les pleins. Vous pouvez voir ici nous utilisons la moitié des colonnes et ici, nous utilisons des colonnes presque complètes. Nous sommes au centre de tout aligner. Ensuite, dans ce domaine, nous utilisons également la moitié. Vous pouvez voir que cette zone est la moitié, cette zone est la moitié. Nous utilisons des demi-colonnes pour cette mise en page. Dans les écrans mobiles, nous avons moins d'espace, donc nous allons centrer tout aligner. Vous pouvez voir ici, ils sont empilés en haut et en bas. C' est ainsi que nous allons concevoir pour le petit écran. Il y a encore une chose que vous pouvez voir ici. Cette image, elle est totalement différente de l'image que nous avons sur le bureau. Il est coupé, il est plus petite image de sorte qu'il peut charger plus rapidement sur un écran mobile. C' est ce que vous allez faire sur votre écran mobile, ou design réactif. Assurez-vous de masquer le contenu ou d'afficher la base de contenu sur différentes choses. Vous pouvez voir ici, j'ai caché le paragraphe et j'ai utilisé cette ligne qui était ici. Utilisez-le ici comme un paragraphe. Ne laissez pas votre client abandonner votre site Web dans les trois premières secondes. C' est ainsi que nous allons tout changer. Maintenant, vous pouvez voir que mon bouton de citation a disparu. C' est juste à l'intérieur de celui-ci. Nous avons notre bouton Devis ici. En outre, vous pouvez ajuster les tailles de vos boutons. Vous devrez peut-être les presser si la taille de votre bouton est trop grande pour que les petits écrans gardent tout en proportion. Vous pouvez également voir que ce bouton et ce bouton, ils ont différentes tailles. « Obtenir un devis » et « Appel de consultation gratuit » en haut de l'autre. Ils sont empilés. Aussi, j'ai déplacé ces liens et j'ai déplacé tout le reste en bas. Les prix et les clients ont plus de priorité, donc je l'ai déplacée vers le haut. Il s'agit d'un mouvement de bloc de contenu ou d'un repositionnement de bloc de contenu basé sur la hiérarchisation du contenu. Ce sont quelques concepts que vous devez vous familiariser avec avant de concevoir pour des sites Web réactifs, et pour les utilisateurs de tablettes ou de tablettes, les petits appareils. Je pense que nous en avons fini avec cette conférence. Allons passer à autre chose. 40. Grille de planification pour la vue sur tablette/moyen: D' accord. Maintenant, dans cette leçon, nous allons commencer notre design responsive, qui va être pour les affichages de tablettes ou de tablettes, iPads ou n'importe quelle tablette. Avant cela, j'ai apporté quelques modifications à la conception de mon bureau. Vous pouvez voir ici, il y a très peu de changements, mais ils sont très subtils et très uniques. Ce que j'ai fait, c'est d'abord, j'utilisais ces six colonnes pour cette zone vidéo et j'ai senti que l'espace blanc entre ces deux zones était trop grand. Ce que j'ai fait, c'est que j'ai étendu cette zone, ce conteneur, à la moitié de cette colonne, à la septième colonne. Maintenant, il utilise un, deux, trois, quatre, cinq six. Sept colonnes en gros. N' ayez pas peur d'utiliser des demi-colonnes. Maintenant ton codeur, ce qu'il va faire, c'est qu'il va utiliser ce bloc de sept colonnes. Mais il va utiliser une partie du rembourrage ou de la marge sur cette zone. Il va ajouter 39 ou 38 pixels marges ou rembourrage sur le côté gauche. C' est ainsi que la programmation fonctionne. Alors n'ayez pas peur que mon design ne touche pas cette zone ou cette grille, il ne s'adapte pas parfaitement. Qu' il s'adapte parfaitement ou non, c'est à vous de décider. Vos codeurs vont concevoir comme ça. Ils vont penser logiquement, ils vont ajouter un peu de rembourrage ici. C' est la même condition ici. Vous pouvez voir dans cette zone, nous avons un rembourrage ou une marge. Ce sont les distances qu'ils vont prendre en charge et la mise en page de la grille. Assurez-vous que vous faites quelque chose comme ça et que vous savez ce qui se déplace derrière le code et comment le code fonctionne. Quelques autres choses que j'ai ajoutées ici sont cette ligne, et ce symbole de copyright, et tout ce texte est en majuscule. Aussi, j'ai utilisé 16 points. Vous pouvez voir ici, c'est une petite taille de texte, 16 points pour ces Clients Prix dans ce manuel ici. Donc maintenant, notre taille de document est de 4 000 pixels de haut. Encore un changement. Ce que j'ai fait ici, c'est, laissez-moi vous montrer. Dans ce domaine, nous avons eu beaucoup d'espace entre ce Obtenir un devis et ces liens. Donc, ce que j'ai fait, c'est que j'utilise 32 pixels de distance. Donc un, deux, trois, un deux. Donc, je suis en ce moment à 32 pixels du bouton Obtenir un devis. C' est également multiple de huit, alors assurez-vous de déplacer les distances comme ça. Cela va vraiment vous aider à créer une certaine harmonie dans votre design. Maintenant, nous allons sauter dans le navigateur pour calculer nos grilles pour notre vue tablette. Maintenant, nous allons utiliser gridulator pour calculer nos grilles. Pourquoi j'utilise le 736 ? Bien que j'utilise la taille du document de 768, parce que nous allons laisser quelques marges autour de notre conception, pour obtenir un peu d'espace de respiration. Si vous déduisez 768 et en déduisez 32, vous obtiendrez cette valeur ici. Nous allons donc utiliser les 71 et 24 et passons dans ce domaine. Nous avons déjà tout mis en place. Huit pixels est notre ligne de base, 71 huit modules, 24 pixels gouttière, une hauteur de module et 736 est notre taille. Nous allons télécharger ce modèle et nous allons l'installer dans Photoshop. Nous allons le sauvegarder, nous allons le couper, et nous allons le coller dans le dossier de notre Pattern de Photoshop. Préréglages, motif. Vous devez le trouver dans votre Mac ou même si vous utilisez Windows, vous devez trouver ce dossier. C' est dans le dossier d'installation ou peut-être dans le dossier de bibliothèque de MAC, je suppose. Donc 736, alors appelons-le 736. Je vais recharger mon Photoshop pour obtenir ce modèle. Maintenant, j'ai ouvert mon ancien bureau. Vous savez ce que nous allons faire, c'est que je vais dupliquer ce plan de travail, parce que nous avons besoin de tout le contenu. Je vais cliquer avec le bouton droit de la souris sur le plan de travail en double et je vais le nommer tablette et nous allons dupliquer un autre. Nous avons donc une autre copie du même plan de travail. Ce qu'on va faire, c'est changer la largeur, 768, comme ça. Donc, nous avons changé la largeur, maintenant nous allons appliquer la grille et tout le reste sur elle. Pour l'instant, nous ne changerons rien d'autre que la grille. Il suffit de déverrouiller ces couches. Maintenant, dans le Pattern, ce que nous allons faire est que nous allons charger ce modèle 736 « Ajouter », et il va être dans le dernier, comme ceci, cliquez sur « OK ». Ce que nous allons faire, c'est nous allons le dimensionner, Control T ou Command T et nous allons utiliser le 736. Que se passe-t-il ici ? 736 pixels. Maintenant, nous allons l'aligner au milieu de cette toile, sur toute cette zone. Je vais tout sélectionner et l'aligner au milieu, comme ça. Passons à l'outil Déplacer. Je ne sais pas pourquoi il ne l'aligne pas au milieu. J' ai appelé les contrôles. Donc nous avons ceci au milieu, mais notre modèle est un peu décalé. Nous allons zoomer et vous pouvez voir que c'est notre modèle, il est vraiment éteint. Donc, je vais cliquer sur ce Snap to Origin, et il va corriger notre modèle. Maintenant, vous pouvez voir comment j'ai tracé tout le modèle. Nous avons un peu d'espace autour du design. Vous pouvez voir ces marges et nous utilisons cette zone à l'intérieur pour mettre en page notre conception. Assurez-vous que lorsque vous concevez des vues sur tablette ou mobile, vous allez utiliser moins d'espace pour ces marges. N' utilisez pas trop de largeur ici parce que nous avons déjà très peu d'espace. Dans la leçon suivante, ce que nous allons faire est que nous allons utiliser cette conception, cette grille pour concevoir notre mise en page. Vous pouvez voir que c'est aussi un problème ici. Maintenant, il est parfait à partir du haut aussi. Donc, dans la leçon suivante, nous allons changer cette conception pour cette zone d'en-tête et passons à la leçon suivante. 41. Concevoir une zone Header/Hero pour la tablette: Maintenant, dans cette leçon, nous allons étudier ce tableau et nous allons nous concentrer uniquement sur ce domaine. Donc, cet en-tête supérieur ou cette vue de modèle de notre zone d'en-tête ou de héros. Alors commençons. abord, je vais cacher cette zone de bureau, donc je peux me concentrer sur ça. Il suffit de zoomer un peu. Ce que nous allons faire, c'est abord nous allons tenir ça. Donc maintenant, vous pouvez voir que notre grille n'est pas verrouillée, alors assurez-vous qu'elle est verrouillée. Consignez également ce dossier. Maintenant, nous allons le déplacer sur la gauche, comme ça. Maintenant, vous pouvez voir l'espace semble un peu étrange parce que, nous avons une petite vue, donc nous allons le déplacer vers le haut. Peut-être laisser ces trois lignes ou peut-être, je suppose que ces quatre seront plus que suffisantes. Avant ça, on avait cinq lignes par ici. Maintenant, nous allons les déplacer ici, mais je pense quand même que nous allons avoir besoin de quelque chose, c'est plus obtenir le bouton de citation ici. Il va donc être aligné à droite de cette zone. Je pense que nous pouvons adapter nos liens ici, si vous voulez, vous pouvez les garder comme ça. Mais ce que je fais normalement, c'est que je déplace normalement ça ici, et ici je vais créer un menu de hamburger. Donc, si vous pouvez cacher le menu des hamburgers, c'est à vous de décider. Je pense que c'est mieux que tu ne caches pas du tout tes liens. Donc, si vous voulez vraiment les cacher et que vous pensez que si quelqu'un serre plus sur la vue de la tablette ou peut-être changer quelque chose, alors cela peut donner quelques problèmes, vous pouvez ajuster cela. Maintenant, une autre technique est que, vous pouvez également changer les tailles de ces zones. Donc, si vous voulez le changer à 16 points ou 16 pixels, c'est à vous de décider. Mais je pense que jusqu'à maintenant tu peux garder cette taille. Alors bougeons-le comme ça. Donc 1-2-1-2-3-4. Donc, je suis en ce moment en utilisant 24 pixels. Laisse-moi cacher la grille ici, et voir si quelque chose a l'air bien. Donc je ne sais pas pourquoi ça s'est passé. Déplaçons-le par ici. Je pense que ça a toujours l'air bien, je ne sais pas, mais quelque chose se sent mal. Donc ce que je vais faire, c'est que je vais changer ma navigation. Alors je vais le cacher. Nous allons déplacer ce bouton de citation sur le côté gauche, ici, et nous allons rapidement ajouter trois lignes ici, pour créer une navigation comme celle-ci. Je vais donc changer la hauteur à deux pixels. Donc, un contrôle G, deux contrôle G, ou le commandement G trois. Donc je vais le déplacer ici. Sélectionnons-les tous, et donnons-leur quelques distances proportionnelles. Donc je vais cacher la grille maintenant, donc ça a l'air bien. Si vous voulez avoir un peu arrondi, quelque chose comme ça ici. Laisse-moi lui donner un nom comme ça, un bouton comme ça. C'est à vous de décider. Donc je vais le changer pour peut-être quelque chose comme ça, ou peut-être comme ça. Maintenant, je vais déplacer toutes ces formes en haut, et je peux changer leur couleur. Donc je dois les changer manuellement, un par un. Créons le dégradé et voyons à quoi il ressemble en ce moment. J' ai donc un 72 très dur, mais la hauteur devrait être 48. Quelque chose comme ça. Peut-être que vous pouvez réduire la taille de ceux-ci. Ça va être 36, quelque chose comme ça. Donc, cachons notre bouton de devis et voyons à quoi il ressemble. Il a l'air presque parfait. Maintenant, si vous voulez changer le style de votre bouton de code, vous pouvez également le faire. Assurez-vous que les tailles de vos boutons sont identiques. Donc, déplacons la taille de celui-ci en proportion, quelque chose de similaire à celui-ci. Il a l'air très large. Celui-ci semble mieux, et obtenez votre code, vous pouvez le supprimer complètement. Donc en ce moment, dans cette conception, je vais l'enlever complètement, parce que nous avons déjà ceci, commencer maintenant par ici. Ce que je vais faire, c'est peut-être que j'ai besoin d'une ombre portée ici, pour la mettre en évidence. Alors ajoutons de l'ombre portée ici, et je vais utiliser huit pixels, car la distance de taille va être de quatre pixels, et la direction sera de 90 degrés. Donc une ombre très subtile autour de mon objet. Alors élargissons un peu plus, peut-être 10 pixels comme ça. Donc ça a l'air bien. Nous avons donc mis en place notre icône de navigation ici, ainsi qu'une surcharge de logo. Maintenant, nous allons nous concentrer sur ce domaine. Il y a une technique de plus maintenant, nous n'avons pas besoin de nous concentrer sur celles-ci, donc je vais cacher toutes les autres sections parce que sinon elles vont me gêner. Chaque fois que je glisse ou change quelque chose. Maintenant, bougeons. Donc encore une chose que nous devons effacer ces guides. Des guides donc clairs, et nous allons créer des guides, encore une fois, pour cela, nous allons sélectionner cette zone. Je vais aller guider. Je sais que la taille de la colonne était de 70. On avait huit colonnes. [ inaudible] était 24, et nous pouvons ajouter les guides qui sont comme ça. Nous avons donc mis en place nos guides. Ça va vraiment nous aider. Ce guide de plug-in a vraiment sauvé ma journée plusieurs fois. Donc maintenant, ce que nous allons faire, c'est que nous allons le déplacer un peu vers le haut. Aussi celle-là. Vous êtes donc libre d'aligner tous les ennemis que vous aimez. Je suis en train de m'aligner ici, donc ce que je vais faire, c'est que je vais déplacer mon espace de jeu vidéo maintenant sur la gauche, et nous allons utiliser toute la largeur. Quelque chose comme ça. Donc nous allons le placer ici. Je vais obtenir ce rectangle, qui est fondamentalement le conteneur et je vais le redimensionner avec toute cette zone. Aussi, vous pouvez le redimensionner de cette façon, comme ceci. Je pense que c'est plus que suffisant, la taille est plus que suffisante. Vous pouvez également le presser un peu plus, donc il est en ligne avec votre guide. Maintenant, nous allons redimensionner cette modalité, a l'air vraiment grand,128 [inaudible]. Donc, ça a l'air génial au milieu. Nous pouvons également cacher cette zone si vous le souhaitez. Mais en ce moment, dans cette itération de conception, je vais le garder. Ainsi, vous pouvez également décider de ces choses par la suite. Donc, parce que notre vue tablette, je pense que nous allons voir peu de choses ici. Alors déplacons ce bouton un peu vers le haut, comme ça, dans cette zone, quelque chose comme ça. Nous allons déplacer notre idée vidéo vers le bas, un peu plus vers le bas, obtenir un peu d'espace. Nous avons donc presque terminé notre section. Mais nous avons besoin d'un espacement horizontal ou quelque chose comme ça. Nous allons donc utiliser [inaudible]. Alignons d'abord celui-ci. Nous allons les mettre dans un hamburger pour groupe. En ce moment, je vais l'aligner en plaçant un guide ici. Alors alignez ce menu hamburger avec mon logo, qui est là où est mon logo. Alors voici mon logo. Je vais les sélectionner tous les deux, et je vais les aligner comme ça. Maintenant, je vais le déplacer. Quelque chose comme ça. C' est mieux Maintenant, si nous avons aligné cette zone supérieure, maintenant nous sommes à la hauteur. Comme ça. Je pense que c'est déjà à l'intérieur de ça. Maintenant, nous allons le déplacer ici. C'est bien. Maintenant, ce bouton. Je pense qu'on peut passer à une étape supérieure. Maintenant, ça a l'air bien. Cachons nos grilles et voyons à quoi ça ressemble. Est-ce que ça a l'air super ? Oui. Il a l'air superbe. L' espace blanc est presque parfait. Donc, notre section supérieure, notre section d'en-tête est complète. Passons à la section suivante où nous allons changer d'autres sections. Passons donc à la leçon suivante. 42. Section Étapes de conception (comment cela fonctionne) de tablette: Maintenant, nous allons nous concentrer sur la prochaine zone, qui était notre zone de pas. Il y a une technique. Maintenant ce que je vais faire, c'est que je vais juste montrer cette section 1 et je ne vais pas activer tous les autres. Ce que je vais faire, c'est que je vais le déplacer parce qu'on avait plus d'espace ici. L' espace est changé. Maintenant, il y avait quelques chevauchements ici. moment, dans cette section, je pense que je dois peut-être remonter un peu mes antécédents si vous devez regarder de très près celui-ci. Vous pouvez voir ici dans le côté gauche, ce fond est jusqu'ici. Il se chevauche avec cette section. Maintenant, nous allons zoomer et nous allons éteindre la grille, activer cette grille guides, colonne de contrôle. Maintenant, nous allons aligner tout au milieu. Ceux-ci vont prendre quatre et quatre colonnes. Commençons et commençons à bouger ces choses. Contrôle+A et Alt Control+H. Maintenant, vous pouvez voir que nous avons quelques problèmes. Je vais te montrer dans quelques secondes. Maintenant, vous pouvez voir que nous avons des problèmes. Ce que nous allons faire, c'est que nous allons cliquer avec le bouton droit de la souris et convertir en texte de paragraphe. Nous n'avons pas de paragraphe, maintenant nous allons le dimensionner comme ça. Je quitte cette colonne de gauche et aussi cette colonne. Je place tout dans ces deux, trois, quatre, cinq, six colonnes du milieu. Vous pouvez voir ici comment j'ai tout placé. Maintenant, pour la deuxième ligne, je vais aussi le convertir en paragraphe et je vais le changer comme ceci. C' est presque terminé. Cachons cette section de révision parce que nous n'en avons pas besoin en ce moment et ce que nous allons faire, c'est que nous allons passer à ces étapes. D' abord, nous allons les déplacer ici un peu comme ça. Maintenant, pour les étapes un et deux, et nous avons trois et quatre. Trois et quatre, on va les déplacer en bas comme ça. Vous pouvez voir comment je place tout et vous pouvez voir qu'ils ont bougé en haut, donc je vais les déplacer à l'intérieur des marches. Je pense que c'est un bug avec Photoshop. Chaque fois que j'essaie de les déplacer et ils sortent indépendamment de leurs groupes. Maintenant, je vais les aligner. Etapes 2 et 4, nous devons les déplacer ici dans cette zone. C' est presque le milieu de ces quatre colonnes. Ce que j'essaie de faire, c'est que je suis presque en train de les aligner au milieu de ces quatre colonnes, aussi pour ces deux étapes. Je les ai presque alignés au milieu de tout ça. Créons ceci et alignons-les au milieu. Maintenant, ils sont le milieu parfait et aussi ces deux, je vais utiliser la sélection avec ces guides. Ces guides vous aident vraiment à les aligner instantanément et cette ligne est hors de mon chemin, donc je vais la déplacer vers le bas. Nous allons également élargir cette zone. Réduisons les choses ici et nous allons le déplacer un peu vers le bas parce que nos commentaires clients vont être par ici. Prenons quelque chose comme ça. Vous pouvez voir à quel point il est cool en ce moment même je viens de commencer à réorganiser mes blocs de contenu. Je les appelle des blocs de contenu parce que nous avons étudié quelques bits de la conception atomique. Maintenant, pour la section de révision. Donc, notre section d'examen, je vais le déplacer au milieu comme ça et c'est un examen qui était en dehors de cette zone où je vais le déplacer sur la gauche, puis en bas comme ceci. Effectuons un zoom arrière pour voir quelques problèmes d'espacement. Ça a l'air bien. Déplaçons les deux un peu vers le bas comme ça. Aussi ce contexte, nous devons élargir. Il est vraiment sage de voir votre design de temps en temps d'un peu lointain. Zoom arrière et zoom avant pour voir quand vous avez besoin d'aligner quelque chose de parfaitement, vous devez zoomer, et si vous voulez voir l'ensemble de la conception comment les différents composants se réunissent, vous devez zoomer. Ce sont les éléments clés que vous devez garder à l'esprit lorsque vous concevez pour quelque chose comme celui-ci. Maintenant, je vais allumer mes grilles et vous pouvez voir qu'elles sont presque au milieu. Alignons celui-ci au milieu et aussi ces commentaires. Sélectionnez cette section et je vais aligner le milieu, quelque chose comme ça. Je ne sais pas pourquoi ce n'est pas aligné au milieu. C' est au milieu, mais en quelque sorte à cause de cette zone, je pense qu'il ne semble pas qu'il soit au milieu. C' est peut-être parce que l'alignement de ces deux paragraphes n'était pas exact. Je vais placer une autre ligne ici et guider. Control+Z. Nous avons presque terminé cette zone. Alignons-les verticalement. Je vais allumer ma grille et voir ce que nous avons ici. Cette zone est presque parfaite. Déplaçons un peu vers le haut comme ça. Il a l'air superbe. Je pense qu'ils ont l'air parfaits. Ils sont presque dans l'alignement parfait. Naturellement, c'est aussi presque parfait. Quelque chose comme ça. Ce que j'essaie de faire, c'est que j'utilise cette zone entière de trois blocs pour l'aligner au milieu. Pour ces deux-là, ils sont presque alignés. Je pense qu'on n'a pas besoin de changer quoi que ce soit. Peut-être comme ça. Aussi comme ça. Voyons quel espace nous avons entre ces deux-là. Nous en avons 118 de ce côté-ci et de ce côté-ci. Voyons s'il peut me montrer l'espace de ça à ça. Je vais sélectionner, placer une ligne ici. C' est la meilleure méthode, je suppose pour moi. Voyons quel est l'espace ici. Il est 38, ce qui est très étrange. Un, deux, trois, quatre, cinq, ça devrait être 40. Voyons combien d'espaces nous avons ici, un, deux, trois, quatre, donc nous avons un espace de moins par ici. C' est ce qui se passe. Déplaçons un peu vers le bas et ensuite nous allons aussi déplacer ça ici, comme ça. Maintenant, c'est parfait. Ils ont presque le même espace avec ces éléments. On a cinq places par ici. Il [inaudible] un 40 pixels loin et 40 pixels loin d'ici. C' est bon et où est notre expérience ou la section 1 ? C' est notre BG. Voyez où il est. Nous avons un, deux, trois, quatre, cinq, six, sept. Peut-être que nous pouvons utiliser autant et voyons ce que nous avons en haut. Un, deux, trois, quatre, cinq, six et sept. Nous avons sept espaces et je pense que nous avons aussi sept espaces ici. Donc je vais le dimensionner comme ça, un, deux, trois, quatre, cinq, six, sept, huit. Revenons un pas en arrière, un, deux, trois, quatre, cinq, six, sept. Nous avons un espace parfait autour d'elle et il est presque 7 fois 8 pixels. Je crois que c'est 56 ou 42. Il fait 56 pixels en haut et en bas pour chaque section que nous allons créer, alors assurez-vous que cet espace sera similaire dans toutes les sections. Nous avons complété cette section. Passons à la leçon suivante. 43. Concevoir une section d'équipe pour les tablettes: Maintenant, dans cette leçon, nous allons concevoir la section 2, qui est notre prochaine section. Je pense que c'est notre équipe, et nous allons concevoir cela dans cette vue de tablette, et je vais sauter certaines des parties parce qu'ils sont principalement alignés jusqu'à maintenant, vous avez peut-être vu la plupart de ma technique donc je suis la disposition contenu et comment je place et déplace tout horizontalement et verticalement. Commençons cette section et je vais d'abord sélectionner ceci, et je vais aller à Propriétés, et nous avons besoin d'un peu plus de hauteur dans ce plan de travail alors peut-être que je vais ajouter 4 400 ici, comme ceci. Si vous voulez redimensionner votre grille, vous pouvez le déverrouiller et la redimensionner chaque fois que vous avez besoin de la redimensionner, quelque chose comme ça, comme ça. Encore une fois, n'oubliez pas de les laisser tomber, et je vais passer à la section, zoomer, activer votre section 2, maintenant, je pense qu'elle est cachée derrière cette zone supérieure donc nous allons la déplacer vers le bas, Shift Arrow, pour les déplacer vers le bas comme ça. Voyons maintenant si je vais les aligner ou les fusionner avec cette zone. Ce que je vais faire, c'est que je vais sélectionner ceci et faire glisser une ligne ici, en regardant bien. Maintenant, ma section, nous allons zoomer, elle est parfaitement alignée. Je vais faire la même chose ici, je vais les aligner au milieu, et ensuite je vais utiliser chaque membre de l'équipe pour utiliser ces quatre colonnes. Je vais aller dans cette section très vite, ne vous inquiétez pas que tout se passe si vite, commençons. Il y a une chose que je vais changer ici, c'est que je vais les couper toutes ces images dans leurs propres blocs. Je vais les déclipser d'ici, comme ça, et ce que je vais faire, c'est que je vais utiliser un bloc de taille personnalisée ici , quelque chose comme ça. La hauteur va être 428, quelque chose comme ça. C' est notre premier, donc je vais le clipser à l'intérieur de celui-ci, je vais changer cette couleur de cette zone d'écrêtage dans le même arrière-plan, et je vais renommer celui-ci. Je vais sélectionner tous ces calques en appuyant sur Maj, et je vais à Contrôle G ou Commande G pour les regrouper. Si j'essaie de cacher cela, vous pouvez voir que c'est un bloc complet. Maintenant, je vais la placer dans cette zone, quelque chose comme ça, ou peut-être pour les colonnes que je vais utiliser quelque part ici, et je vais faire la même chose pour celle-là. Je vais tout sauter rapidement, je vais, encore une fois, utiliser la même boîte de hauteur, qui va être ce rectangle, qui est 436, taille 36, hauteur, et je vais tout couper à l'intérieur, tout le monde à l'intérieur, et nous allons les regrouper comme ça. Il se passe quelque chose d'étrange que lorsque j'essaie de déplacer certains groupes, ils sortent de leur groupe et ils se sont déplacés vers le haut de ce plan de travail. C' est un bug dans Photoshop, ne vous inquiétez pas si je regroupe quelque chose et que quelque chose bouge. Ça a été déplacé hors de ma zone, donc je vais le traîner ici, quelque chose de foiré, je suppose. C' est essentiellement le tag pour cette personne, qui était un concepteur UX. Je vais le déplacer ici, quelque chose comme ça. Maintenant, nous avons placé tout à l'intérieur, je vais toujours le faire et les clipser à l'intérieur, aussi nous allons étendre la taille de l'arrière-plan, qui va être celui-ci ici. Nous avons également besoin de changer la taille de notre tablette de travail et je vais faire 600 entrer ici, pour s'assurer que tout va bien. Maintenant, si vous ne trouvez aucun calque ou qu'il est en dehors de vos limites de calque ou de votre calque comme votre Canvas, vous pouvez maintenant contrôler cliquer dessus et vous pouvez voir qu'il est sélectionné, il l'a mis en surbrillance, et ici, j'ai trouvé que cela a été déménagé ailleurs, donc je vais le déplacer à l'intérieur de ce réseau social, je suppose que j'avais des médias sociaux. Ça va être dans les médias sociaux, et je vais le déplacer à gauche et en bas. Voyons où elle est en ce moment, elle a été déplacée ici. Je vais d'abord le sélectionner, déplacer ici, puis je vais le déplacer vers le bas dans mon groupe de médias sociaux. C' est Sonia Bismal, et la même chose que je vais faire pour lui. Voyons où est l'autre nom, créons une autre couche et remplacons-la comme ceci, juste pour accélérer les choses. Maintenant, nous avons quatre groupes différents, et je vais les aligner en conséquence. Créons notre spectacle, nos guides, et voici notre concepteur, passons à l'intérieur de ceci, c'est du marketing. Ensuite, nous avons UX designer, il va être au milieu de cette zone. C' est presque terminé, montrons nos grilles et alignons-les mieux avec la grille. Maintenant, vous pouvez voir que je vais le déplacer quelque part ici ou peut-être un peu vers le bas parce que j'ai besoin d'un peu d'espacement. Ici, je l'ai configuré comme ça, et aussi si vous pouvez le dimensionner à l'intérieur en fonction de votre Canvas, cela pourrait être mieux. Rien n'est en dehors de votre Canvas, c'est mieux comme ça. Ceux-ci les alignent, marketing, passons d'abord au groupe. Si je sélectionne quelque chose, ça va me donner le groupe. Ça ne marche pas, donc je vais retourner à Layers, marketing, je vais le déplacer un peu vers le bas, égal à cette fille ici, designer générale. C' est bien, ils sont presque tous les deux alignés, ils vont être ici. Nous sommes tous mis en place pour cette zone d'équipe, dissimulons ces grilles et voyons à quoi ressemble notre design. Il a l'air vraiment cool. Cette zone est faite, passons à la zone de pied de page, qui va être notre dernière partie pour cette vue tablette. Passons à la leçon suivante. 44. Concevoir le pied pour la vue de tablette: D' accord. Maintenant, dans cette leçon, nous allons concevoir la dernière partie qui est notre pied de page pour la vue tablette ou la vue moyenne. Donc je vais le faire glisser vers le haut et zoomer. J' ai allumé mes grilles et mes guides comme vous pouvez le voir ici. Ok maintenant, le dernier de notre pied de page. Donc je vais l'activer. En ce moment, elle est cachée derrière ces sections. Donc je vais le déplacer vers le bas parce qu'il était en place avant et donc je vais le déplacer vers le bas comme ça. D' accord. Il va donc prendre beaucoup de place. Donc je vais faire quelque chose comme ça. Alors maintenant, nous allons élargir cette image. Peut-être qu'on va se concentrer sur un autre endroit. Peut-être que ce siège seulement. D' accord. Quelque chose comme ça. Aussi cette zone, nous allons le déplacer au-dessus de cette image, quelque chose comme ça. Ok, maintenant ces milieux sont terminés. Maintenant, nous allons les déplacer. Ces titres et ce que nous utilisons en haut, nous utilisons quelque chose comme ceci. Nous utilisons donc l'alignement aligné à gauche pour cela. Je ne sais pas pourquoi c'est un peu plus petit à me regarder, peut-être que je suis en train de zoomer. C' est donc notre paragraphe. Vous pouvez également le déplacer sur la gauche. Il y a d'autres options comme nous pouvons tout enlever ici, quelque chose comme ça. Ou vous pouvez l'activer ici et le garder comme ça. Peut-être que nous pouvons utiliser tout cet espace ici, mais il ne sort pas de cette position. Donc maintenant, nous allons aussi avoir besoin de déplacer ces boutons un peu vers le haut. Vous pouvez voir qu'on n'a pas besoin de les empiler de haut en bas parce qu'ils ont un bon espacement ici. On a de l'espace par ici. Donc on n'a pas besoin de les espacer comme ça. Ok, quelque chose. Donc je pense qu'on devrait les garder tels qu'ils étaient avant et ne pas changer l'espacement entre eux. Puis à propos de cette zone, ce bureau de fantaisie. Donc, bureau des arts de fantaisie, clients, tout ça, nous allons les déplacer un peu vers le haut. Vous pouvez voir comment il a bougé. Alors bougeons-les comme ça. Pour cela, je vais les déplacer d'abord à l'intérieur, puis nous allons les déplacer en arrière. Quelque chose de semblable à ça. Ok, maintenant vous pouvez voir qu'ils sont tous déplacés vers le haut, donc je vais les regrouper en bas de page. Je vais le bouger, quelque chose comme ça. Donc, nous devons le déplacer ici. Alors, quel est ce rectangle ? Il s'agit essentiellement de superposition. Nommez toujours vos calques correctement, superposez le violet. Donc c'est à contrôler. Vous pouvez également changer la superposition pour celle-ci, celle-ci, celle-ci ou celle-ci, ou même pourpre. Maintenant, nous allons utiliser notre grille pour les aligner correctement. J' ai donc besoin de changer la taille de la grille. Ok, ma grille est parfaite. Maintenant, fermons ça et je vais le changer comme ça. Donc, pour ce domaine, nous allons utiliser d'accord. Donc, c'est quelque chose d'correct. Je vais donc les déplacer un, deux, trois, quatre, cinq, six et sept. Donc sept espaces de cette zone et fermons ça. Je vais choisir celui-là. On va le déplacer ici comme ça. Aussi celui-là, je vais le déplacer un peu vers le haut. Donc, quand j'ai essayé de l'étendre, quelque chose de vraiment étrange arrive qu'il change le modèle. Donc je pense que ce que nous devons faire, c'est que nous devons le déplacer un peu vers le bas comme ça. Ou peut-être que nous devons ajuster ce Snap à Origin. C' est le problème que nous avions quand nous redimensionnons notre grille. Une fois que vous avez redimensionné, vous devez accrocher à l'origine de vos motifs. Alors assurez-vous de le faire autrement, cela va créer des problèmes pour vous. Ok, donc voici mon. Donc le haut est parfait. Allons les aligner. Ils sont presque parfaitement alignés. Tous ces lettrages et typographies. Maintenant je pense qu'on doit les déplacer un peu vers le haut de ces boutons. Ils sont vraiment loin. Quelque part par ici. Je pense qu'ils ont l'air bien, l'espacement est bon. Déplaçons cette zone. Aussi, pied de page bas un peu vers le haut. Je pense peut-être par ici. Maintenant, l'espacement a l'air bien. On n'a pas besoin de changer quoi que ce soit d'autre. Maintenant, ce que nous allons faire, c'est changer la taille de notre tableau d'art, un, deux, trois, quatre et cinq ou peut-être quatre. Alors plaçons un guide de grille par ici. Ok, donc peut-être par ici, comme ça. Donc, il est presque à 4 888. Quatre huit huit huit divisent par huit. Alors sélectionnez ce tableau d'art, allez dans « Propriétés ». Je vais utiliser 4, 8, 8, 8 quelque chose comme ça. Maintenant, nous avons presque terminé cette conception. Je pense que tout a l'air parfait. Zoom arrière et masquons nos guides et nos grilles. Voyons à quoi ça va ressembler. Donc, il a l'air parfaitement génial. Très gentil, bien, avoir de bonnes marges par ici. Peut-être que vous pouvez augmenter les marges ici de 24, je suppose. Donc, si vous avez une plus grande taille à l'intérieur de 24, je pense que si vous augmentez vos marges à 24, alors je pense que ce sera mieux. Donc, pour cela, je pense que la prochaine fois, si vous créez votre design, vous aurez besoin de 768 moins 24 moins 24. Donc 720. Donc, utilisez la largeur de 720, créez une grille de 720, laissant 24 et 24 marges ici. J' utilise donc 16 pixels, mais pour moi, je pense qu'il regarde un peu plus près des frontières des deux côtés. Mais, je pense que vous pouvez le gérer. C' est ainsi que nous avons terminé la conception de notre tablette et la dernière partie. Si vous avez des questions, posez-moi. Dans la section suivante, nous allons concevoir pour la vue mobile. Pour cela, vous devez voir la section suivante. Passons donc à la section suivante. 45. Configuration des planches d'art pour la vue mobile: Maintenant, nous allons commencer notre Mobile View de notre conception. Nous avons déjà créé les vues de bureau et de tablette, mais avant de créer un autre plan de travail, nous allons configurer nos grilles et guides. Pour ce faire, nous allons passer à notre Google Chrome et nous allons utiliser quelques outils en ligne. Alors voyons ce que sont ces choses. Ok, donc comme toujours, nous allons utiliser ce modulargrid.org, Gridulator, et cette fois, je vais aussi vous montrer comment vous pouvez le faire avec ce Grid.Guide. D' accord. Maintenant, la largeur que je vais utiliser est de 400. Donc 400 pixels, j'adore concevoir pour cela. Si vous voulez vraiment aller à la dernière taille d'écran, vous devriez concevoir pour celui-ci, 320, et nous allons utiliser des colonnes, nombre de colonnes, 4. Donc je vais utiliser 400, pas 4 000, 400, et votre rapport de gouttière devrait être de 1. Donc, c'est un outil. C'est un autre outil. Ce que je vais chercher, c'est que je vais chercher ma grille de 8 pixels. Donc, c'est la largeur de gouttière 8. On peut utiliser celle-là, ou peut-être on peut l'utiliser. Donc, je vais utiliser celui-ci, la largeur de la colonne 80 et la largeur de la gouttière va être 16. En outre, vous pouvez voir sur les côtés droit et gauche il y a une marge qui est également égale à 16. Maintenant, si vous construisez votre grille avec Gridulator, vous devez en soustraire les marges. Donc 368 et vous pouvez voir ici, ici, nous avons le calcul 80 et 16. Maintenant, si nous allons à cette grille modulaire, parce que nous allons utiliser ces lignes aussi, donc nous allons utiliser la ligne de base, qui est toujours nos 8 pixels, qui est cette hauteur de 8 pixels de ce petit espace ici, et puis nous avons la taille du module 80, le nombre de modules 4. Nous avons quatre colonnes. La taille de la gouttière sera de 16, hauteur du module 1, et notre taille de mise en page est de 368. Donc, fondamentalement, nous laissons 16 et 16, 32 pixels pour les marges. Nous allons donc télécharger ce modèle Photoshop et l'installer dans Adobe Photoshop installation, Presets and Patterns dossier. Donc, je l'ai nommé 400 16marge 16gouttière. Donc je vais le charger dans Photoshop et nous allons installer notre plan de travail après ça. Alors commençons. Maintenant, dupliquons notre plan de travail pour tablette. Je vais cliquer avec le bouton droit de la souris sur ma « Tablette » et « Plan de travail en double », et je vais le nommer mobile. J' ai donc mon autre plan de travail, maintenant, nous allons le dimensionner et nous allons utiliser 400 pixels de largeur et pour la hauteur, je pense que nous allons avoir besoin de plus 6400 parce qu'il va s'empiler les uns sur les autres. Nous avons donc besoin de beaucoup d'espace pour ajuster ce contenu. Maintenant, installons notre grille. Donc, nous allons aller à cette zone de grille et nous allons déverrouiller cela, et nous allons aller à « Patterns », et allons charger notre modèle, qui est 400 ajouté. Ce sera à la fin. Si vous passez la souris dessus pendant un certain temps, vous allez voir le nom. Vous pouvez voir 96 x 16 pixels, donc c'est notre grille. Donc, nous allons, encore une fois, redimensionner à la largeur de 368. Donc je vais l'aligner au milieu. Ce n'est pas bien, alors nous allons passer à l'origine et cela va tout changer. C' est ainsi que nous allons mettre en place notre grille, et dans la leçon suivante, nous allons changer notre conception pour cette vue mobile. Passons donc à la leçon suivante. 46. Concevoir un en-tête pour les petits appareils: Avant de nous lancer dans notre conception de vue mobile, nous allons voir une partie de la concentration de l'échelle typographique. Je vais changer l'échelle typographique parce que nous avons moins d'espace ici, donc nous allons utiliser moins de gros titres et nous pourrions devoir changer la taille de nos textes ou peut-être des sous-titres. Laissez-moi vous montrer mon échelle typographique. Maintenant, l'échelle que j'ai choisie est 16, 20, 24 , 28, 32, 36, 49 et 54. Ces trois sont pour des positions, des positions plus grandes, et ces deux ou trois peuvent être utilisées pour des sous-positions. Ceci est pour le texte et c'est pour le petit texte. Pour les petits appareils, je vais passer à la rubrique 36, à sous-rubrique 24 et au texte 20 et au petit texte 16. Voyons à quoi ça va ressembler. Commençons à concevoir notre partie d'en-tête. Maintenant, ici dans l'en-tête, comme vous pouvez le voir en haut, nous avons trop d'espace. Nous en avons 16 ici, donc nous allons en laisser seulement deux parce que sur les appareils mobiles, vous allez vraiment économiser de l'espace. Ne tuez pas les marges, ne le rendez pas trop emballé. Réparons d'abord cette grille. Nous allons utiliser moins cette fois. Peut-être deux, on peut le changer à la fin, alors ne vous inquiétez pas pour ça. Maintenant, à propos de la navigation, voyons où est notre hamburger. Je vais changer, ramener mon hamburger dans la vue parce qu'il était trop loin. Nous allons le placer ici, au bord de tout ça. Nous avons placé ceci, maintenant, plaçons notre cap ici. Alignons ça avec cette zone ici, comme ça. Essayons 49. Quarante neuf, c'est un peu gros, essayons 36. Trente six, ça a l'air bien. Maintenant, nous allons dimensionner notre paragraphe à partir d'ici, faites-le glisser d'ici comme ça. Maintenant, vous devez également changer la hauteur de votre ligne. Où est parti mon texto ? Revenons en arrière. Je vais zoomer pour tester ces choses. Parfois, il vaut mieux que vous zoomez sur votre design. C' est parfois mieux de les contrôler comme ça. Maintenant, je vais sélectionner le texte et voyons ce que nous pouvons utiliser ici, peut-être 36. Pour les titres, nous allons utiliser la même hauteur de ligne parce que dans la typographie pour votre design, nous avons étudié que cela va vraiment aider. Vous pouvez soit utiliser l'alignement à gauche, soit utiliser l'alignement au milieu. Je l'aime comme ça parce que c'est plus harmonieux et aussi si votre design contracte plus. Si nous avons moins d'espace, ça va toujours bien paraître. Nous l'avons aligné ici. Maintenant, peut-être que sur les appareils mobiles, nous pourrions avoir besoin de changer ou d'ignorer ce paragraphe. Nous allons sauter cela et nous allons mettre à niveau quelques autres choses comme le bouton Getting Started. Nous allons le faire monter et il a l'air très grand en ce moment. Nous allons nous y adapter par la suite. Il suffit de bouger les choses. Où est notre espace vidéo ? Maintenant, cette fois, je vais déplacer ce texte qui est au-dessus de la zone vidéo. Je vais le déplacer ici. Je vais le déplacer juste en dessous de mon titre principal. Vous ne pouvez pas le voir parce qu'il est de couleur blanche, donc je vais changer sa couleur pour ce gris. Il est en ce moment en 24 points. Si vous voulez utiliser moins de points, peut-être que nous pouvons essayer 20 ici parce qu'il a l'air très grand devant celui-là. Aussi, je vais utiliser Nunito Sans Régulier, voilà. Cette fois, avec ça. C' est essentiellement notre style de paragraphe. Appliquons un style de paragraphe. Où est notre style de paragraphe gris de base. Je vais remplacer, et c'est notre style de paragraphe. Ce que j'ai fait, c'est que j'ai complètement changé son design et sa police. Nous allons les aligner ensuite, donc ne vous inquiétez pas. Maintenant, à propos de la zone vidéo, c'est très grand pour moi, donc je vais le presser. Déplaçons cela en dehors de la zone, ce texte, parce qu'il est toujours à l'intérieur de cette zone. Je vais le redimensionner comme ça. Voyons s'il va le redimensionner cette fois. Maintenant, déplacons-le ici comme ça. Maintenant, ça a l'air bien. Je pense qu'il faut ajuster le rythme vertical de notre zone supérieure ici. Commençons par celle-là. Je vais l'aligner ici au milieu comme ça, ou peut-être ça, comme ça. Ceci est déjà très bien aligné, et cela est déjà aligné. J' ai 1, 2, 3, 4, espaces par ici, 1, 2, 3, 4, 5 espaces par ici, et 1, 2, 3 espaces par ici. En ce moment, ce texte est plus lié à celui-ci, donc il est plus proche de celui-ci. C' est une concentration de conception très simple qu'ils sont tous les deux liés lorsque nous allons utiliser des blocs ou des groupements. Ceci est lié à celui-ci. Maintenant, nous allons zoomer. Peut-être que je pense que le titre est trop proche de notre logo et peut-être que nous pouvons réduire la taille de notre logo ici. Essayons de réduire la taille de notre logo et de voir à quoi il va ressembler. Réduisons sa taille pour le mettre ici. On dirait beaucoup mieux. Je pense que garder celle-là plus grand parce qu'il nous faut un peu de pouce. Nous avons besoin d'une meilleure conversion parce que les pouces ne sont pas très petits, donc nous allons utiliser celui-ci un peu plus grand. Sa taille est en fait 62 par 48 pixels. Il doit être au moins supérieur à 44 ou 48 pixels. Assurez-vous qu'il est au-dessus de cela. Pour ce domaine, je vais l'aligner de haut en bas. logo est à l'intérieur de l'en-tête, alors déplaçons le logo, ou peut-être que j'ai besoin de sélectionner tout cela avec shift. Nous pouvons cliquer sur tout cela avec shift. Aussi avec la zone vidéo, et je vais les regrouper, donc c'est mon contenu d'en-tête. Nommons le contenu de l'en-tête. Je vais le déplacer un peu par ici ou peut-être par ici. Maintenant, il a l'air bien déplacer le modèle un peu vers le haut. Vous pensez peut-être que je perds beaucoup de temps sur ces alignements, mais ils en valent vraiment la peine. Ils vont vraiment façonner votre design. Je vais cacher ça. Faisons-le glisser à l'intérieur de mon en-tête et je vais cacher ma grille pour voir comment le design se dessine. Il a l'air vraiment bien. Je pense que je vais garder la taille du bouton aussi grande. Il n'a pas l'air très étrange. Mais si vous voulez utiliser la taille moyenne, vous pouvez l'utiliser. Chargons notre guide de style de l'interface utilisateur. Maintenant, voici mon guide de style et vous pouvez voir que le bouton de taille moyenne est 208 par 56 pixels. Faisons en sorte que ça soit si grand. Mais nous pouvons changer la hauteur parce que le contenu va changer la largeur de votre bouton. Déplaçons-le à 56 pixels. Je vais changer la hauteur de ceci à 56 pixels et voyons à quoi il ressemble. Il a l'air bien. Réduisons un peu la largeur. Il a l'air bien maintenant. Aucun problème avec quoi que ce soit. Je vais le sauver. Vous pouvez voir comment j'ai décalé ou changé la taille du bouton de ceci à ceci. Aussi, notre échelle typographique, vous pouvez voir comment j'ai changé la taille du logo et tout. En outre, si vous voulez changer l'image entière, vous pouvez changer ici. Vous pouvez simplement ajouter une ligne de texte ici que cela va durer 30 secondes ou 40 secondes, juste pour montrer à l'utilisateur que cela ne va pas prendre beaucoup de temps pour voir cette vidéo. Ensuite, nous allons concevoir nos étapes de la Section 1. Passons à la leçon suivante. 47. Section d'étapes pour les petits appareils: Maintenant, nous allons redessiner la section 1 de notre version mobile. Pour cela, nous allons avancer un peu vers le haut. Vous pouvez voir que cette section est un peu petite, donc nous allons déplacer notre section 1 un peu vers le haut comme ça. Essayez de l'aligner ou de le prendre derrière notre espace vidéo. Peut-être que nous pouvons l'aligner en conséquence comme ça. Maintenant, à propos de ces gros titres, nous allons changer la taille à 36. Nous allons aussi les aligner au milieu. Si vous souhaitez créer un style de paragraphe, vous pouvez créer un nouveau style de paragraphe pour les en-têtes mobiles. Créons un nouveau style de paragraphe. Nous allons l'appeler les titres mobiles. Pour les en-têtes mobiles, je pense que notre hauteur de ligne était trop élevée. Je vais utiliser 36 comme ça. C' est comme ça que ça va être au milieu. On a beaucoup d'espace, donc je vais le déplacer. Aussi pour celui-ci si vous voulez créer un autre style que vous pouvez créer, mais je pense que je vais juste le déplacer à 20 et le centrer, et ici nous avons un autre texte. Je vais le faire rapidement parce que vous savez que la plupart des choses que je fais sont répétitives. Donc, j'utilise une zone par ici. Allons sur notre grille pour voir comment nous alignons tout en fonction de notre grille. La grille doit être verrouillée et nous allons cliquer dessus. Nous allons l'étendre complètement avec les quatre colonnes que nous utilisons comme ça. Aussi pour celui-ci, faisons quelque chose comme ça. Maintenant, pour ceux-ci, nous allons les aligner les uns sur les autres afin qu'il n'y ait plus rien à faire, juste l'alignement. Je vais sauter ça très vite. Maintenant, si vous voulez redimensionner les icônes, c'est à vous de décider. Je pense que si vous voulez les redimensionner, peut-être que vous pouvez les redimensionner. Il suffit de les déplacer comme ils sont, donc ce sont 128. Faisons les 96, exceller la hauteur. Faites-le pour tous. Je pense qu'ils ont l'air bien maintenant. Nous allons tout contrôler avec SVG. SVG sont essentiellement des graphiques vectoriels évolutifs. Je pense que vous devriez en parler à vos codeurs et ils vont adorer cette idée. Maintenant, nous avons redimensionné toutes nos icônes. Maintenant, nous allons aligner cela verticalement avec notre alignement vertical en rythme vertical. Voyons combien de bars nous avions ici, 1,2,3,4,5,6,7. On en a six. Je vais en laisser six ici, 1,2,3,4,5,6 donc nous en avons déjà laissé six ici, mais nous allons avancer un peu. Peut-être par ici. Aussi, je pense que la hauteur de la ligne est étrange. Il va être 24 maintenant, donc 20 et 24, ils ont l'air bien. Ensuite, nous allons zoomer pour voir les distances dont nous avons besoin à chaque étape. Nous allons avancer un peu vers le haut, ici, je pense que ça a l'air bien. Je pense qu'il y a beaucoup de distance, plus de distance entre ceux-ci, donc je vais aussi les déplacer un peu vers le haut, les ajuster. Je vais les ajuster rapidement. Je pense que cela a l'air bien,1,2,3,4,5,6. Nous utilisons un écart de six, donc c'est essentiellement 48, je suppose. Maintenant, nous allons activer nos autres sections de révision. Je vais aligner aussi, je vais obtenir ceci et je vais l'aligner au milieu. Maintenant, nous allons aligner cela au milieu aussi, donc nous allons d'abord aligner nos titres. Déplaçons d'abord cette section et baissons. C' est une section entière. Je pense que je devrais aussi proposer cela dans cette section. Je vais déplacer toute cette section comme ça. Changeons cela en paragraphe, clic droit sur le texte du paragraphe parce que nous avons besoin de plusieurs lignes ici. Je vais utiliser toute la largeur, et je vais utiliser centraliser. Normalement, un ou deux mots sont en bas parce que nous ne pouvons pas le contrôler. Si vous voulez vraiment le contrôler, vous pouvez avoir quelque chose comme ça. C' est à vous de décider, mais je l'aime vraiment dans la position par défaut. En outre, ce que nous allons faire est que nous allons empiler les commentaires des utilisateurs, et nous allons coller le nom en bas. Quelque chose comme ça. Ce que je vais faire, c'est que je vais regrouper l'image. Regrouperons l'image. Élargissons cette zone. C' est le groupe d'images, qui est notre [inaudible] ici, et je vais l'aligner au milieu avec cela. Aussi, nous allons l'aligner comme ça. C' est un peu bizarre parce que notre taille de paragraphe est un peu plus grande. Je vais faire court comme ça. Peut-être que tu peux le garder à gauche. Mais nous allons centrer celle-ci en fonction de cette zone, quelque chose comme ça. Parce que les textes plus longs, je pense qu'ils ne devraient pas être alignés au milieu parce qu'il sera difficile de les lire. Maintenant, nous allons faire la même chose pour celui-ci. Maintenant, nous allons régler la hauteur verticale pour ce rythme vertical, nous allons cacher cette section 2, et nous allons utiliser celle-ci, et ajuster son rythme vertical. Avant cela, nous allons également dimensionner son arrière-plan. Je vais le redimensionner comme ça. Ici, nous avons notre expérience. Nous allons également le redimensionner pour avoir toute la largeur de notre zone ici, qui est mobile. Ils ont l'air bien. J'utilise deux espaces, qui est de 16 pixels entre eux. Nous allons faire de même pour celui-ci parce qu'il n'y a pas deux lacunes. Maintenant, il y a deux espaces, 16 pixels entre eux et aussi je vais utiliser 16 pixels ici. Ça va être quelque chose. J' ai besoin de trois ou peut-être quatre par ici. Ils ont l'air un peu bien ici. Bonne quantité d'espace, il peut vraiment créer des effets très impressionnants, et vous pouvez voir ici comment je l'utilise. Si j'éteins la grille, vous pouvez voir que c'est très joli. Si je les rapproche de plus près, ils ne seront pas vraiment en bonne forme ou en bonne position. Je pense que nous avons presque fini avec ce domaine. Changeons la taille de celui-ci. Ce sont quatre lacunes qui sont plus que suffisantes. Passons à la prochaine leçon où nous allons changer ou modifier notre section 2. 48. Concevoir une section d'équipe pour les petits appareils: Maintenant, nous allons concevoir la Section 2, qui est notre équipe et nous allons l'activer. Voici notre équipe. abord, nous allons déplacer cette section un peu vers le bas comme ça et cacher notre grille. Voyons comment nous avons les écarts entre les deux. La première chose est que nous allons sélectionner ceci et nous allons utiliser notre rubrique mobile, et il va remplacer les styles. Aussi, si vous pouvez créer un style à partir de celui-ci ici, vous pouvez voir. Où est notre ? Je pense que j'ai oublié de changer la taille de celui-ci aussi, donc il est 24, nous allons en faire 20. Utilisons quelque chose comme ça. Notre taille de toutes ces rubriques est de 20, donc nous allons utiliser 20. Aussi je pense que nos textes ont trop de suivi, donc nous allons le réduire sur l'écran mobile. Aussi pour celui-ci, je vais utiliser cinq, alors utilisons toute la zone. Maintenant, il y a une chose que j'ai laissée qui est clair nos guides et nous allons créer, encore une fois quelques guides supplémentaires en utilisant notre Guide. Je vais laisser quelques marges autour, qui vont être 16, 16, 4 colonnes. Gouttière va avoir 16 ans. Je vais ajouter quelque chose comme ça ici. C'est notre grille. C' est bien que nous ayons cette grille de retour. Il est plus facile avec la grille d'aligner tout de sorte que je n'ai pas besoin d'activer et de désactiver mon autre grille. Changeons le libellé. Cela peut également aider parce que parfois vous avez besoin de changer votre copie ou votre texte en fonction de votre grille et tout. Déplaçons nos commentaires d'utilisateurs un peu vers le haut. Cette fois, je vais les déplacer ici. Ils ont l'air bien. Cachons notre guide et nos guides. Ne montre plus ça. Ce que nous avons ici, c'est notre super équipe. Je vais aligner ça, et je vais le déplacer un peu vers le haut. abord, cachons cette grille pour que nous soyons ouverts à nos alignements et à tout ce qui est sans aucune distraction. Cinq et 24, c'est notre taille. Pourquoi ne pas créer un autre style de paragraphe pour celui-ci ? Je vais en créer un nouveau. Ce sera Yorkten, la police sera Yorkten. La taille va être 20, et ça va être 24, et la couleur va être celle-ci, et ça va être cinq. Il va être sous - rubrique mobile. Supprimons celui-ci et je vais utiliser celui-ci, donc nous sommes bons. Maintenant, nous n'avons pas besoin de changer trop de fois. Nous avons créé notre style. Ici, nous pouvons réduire ce rectangle, la taille que nous avons utilisée ici, et nous allons le dimensionner à, disons 300 pixels. Diminons-le à 264, quelque chose comme ça. Je vais le déplacer. Je pense que c'est bien. Nous allons changer la même chose pour tous. Je vais calculer 264 plus 16 plus 16. On peut utiliser 296. Je pense que 296 va bien paraître parce que je dois montrer les humains ici, donc 296. Il a l'air bien. Montrez juste le haut de la tête. Quelque chose comme ça, maintenant nous allons déplacer ce concepteur UX un peu vers le haut. Avant cela, je pense que nous voulions notre marketing et les guides, je pense que le deuxième était le marketing, donc je vais le déplacer ou ici, comme ça. J' appuie sur « Shift » pour bouger tout comme ça. Nous allons faire quelque chose comme ça. Fermons cette Section 2 et je vais la déplacer à nouveau parce que c'est un bug, chaque fois que j'essaie de déplacer quelque chose qui sort de mon spectateur en dehors du Canvas, il recule vers le haut de ceci. Ok, donc j'ai réparé l'arrière-plan, ai aligné ici. Maintenant, nous allons aligner tout verticalement. Maintenant, c'est à vous de décider. Assurez-vous de garder ces zones identiques. Je pense qu'on a une inadéquation ici. Nous avons plus d'espace ici, nous avons moins d'espace. Je vais allumer ma grille et voir ce qu'on peut changer. abord, je vais changer le contexte pour voir plus clairement où tout se trouve. Donc je vais le déplacer d'un pas vers le bas comme ça, déplacer celui-ci vers le haut, ou peut-être plus haut comme ça ici jusqu'à l'écart de 16. Nous allons déplacer notre groupe vers le haut. Je pense qu'ici, ça a l'air bien. Alors voyons quelle est la distance que nous avons ici. Allons d'abord réparer ça, nous allons le déplacer dans ce groupe, l'équipe. Le type du marketing doit être aligné comme ça. Ça va être mordu au sommet comme ça. C' est presque parfait. Ce type de marketing est parfaitement aligné et nous avons un écart de 1, 2, 3, 4 et 8, et 9. Je pense que je devrais le déplacer un peu plus pour avoir le même écart, quelque chose comme ça, donc 1, 2, 3, 4, 5, 6, 7, 8. Je vais, avec la distance de huit, huit blocs de huit pixels. Aller également à déplacer l'arrière-plan avec cette zone. Je vais le colorer en arrière ce qu'il avait. On avait la couleur. Maintenant, cette section est faite et c'est presque parfait. Vous devez les aligner au milieu, donc si je les ai mal alignés, je vais les aligner ensuite. Je pense que nous sommes bons d'aller à la section suivante, avant cela, je vais les aligner au milieu. C' est ça. Je pense que nous avons terminé cette section. Passons à la leçon suivante. On va faire les photos. 49. Concevoir le pied pour la vue de tablette: Maintenant, nous allons concevoir pour la dernière section, qui va être notre pied de page, et allons au pied de page et émulons et vous pouvez voir son alignement est désactivé, donc nous allons déplacer notre pied de page. Assurez-vous de sélectionner un peu le pied de page vers le bas, peut-être comme ça. Maintenant, nous allons bouger les choses. Ne vous inquiétez pas pour eux. Il y a deux choses que nous allons faire. Nous allons redimensionner ces tailles de boutons dans la hauteur, et nous allons également redimensionner nos en-têtes, et tout sera aligné au centre. Donc je vais le faire très rapidement parce que je ne veux pas que la vidéo soit très longue. Nous ferons certains des derniers ajustements et de la concentration [inaudible]. Commençons. Maintenant que nous sommes tous prêts, nous allons ajuster le rythme vertical en utilisant nos grilles de détermination verticales. Donc, nous allons activer la grille et je pense qu'elle n'est pas correctement dimensionnée, donc ce que je vais faire, c'est que je vais la redimensionner. Voyons voir, il est toujours verrouillé. Je vais le redimensionner jusqu'à cette zone et la deuxième chose que nous devons faire est que nous devons à nouveau cliquer sur cette capture sur les deux régions parce que parfois cela va changer à quoi cela va ressembler. Nous devons également changer la taille de notre tableau d'art. Je vais passer au tableau d'art, et je vais redimensionner mon tableau d'art comme ça. C' est mieux. Maintenant, je vais utiliser mon rythme vertical ici dans cette zone et voyons. Je vais d'abord verrouiller cette zone, alors verrouiller. Nous avons une distance de 1, 2 ,3, 4, 5, 6. Six a l'air bien, ou peut-être cinq est ce que je suppose. Cinq est mieux, et je vais l'utiliser ici comme ça. Nous pouvons également changer cela sur notre écran mobile qui cliquez pour nous appeler maintenant parce que nous pouvons facilement activer cela, nous pouvons cliquer pour appeler à tout moment si nous sommes sur un appareil mobile. Nous allons utiliser cette fonctionnalité quelque chose comme ça. Je pense que cette distance est bonne. Mettons un pâté de maisons ici jusqu'à cette zone ou peut-être que c'est là que je vais placer un guide par ici. Je vais sélectionner mon tableau d'art qui va être d' ici et nous allons cliquer sur ce tableau d'art et je vais le dimensionner. Choisissons ce tableau d'art et redimensionnons-le comme ça. C' est une nouvelle fonctionnalité que je ne savais pas qu'elle peut être redimensionnée comme ça. Nous avons redimensionné notre planche d'art et nos distances sont de 1, 2, 3, 4,5 d'ici. Il reste peu de choses comme vérifier toutes ces distances en haut et en bas des sections, laissez-moi simplement les confirmer, si elles sont similaires 1, 2, 3, 4, 5, 6. J' en ai six ici. Alors passons un peu vers le bas parce que j'utilise six en haut. Un peu en bas. Maintenant, vous pouvez voir ce que je fais est que j'utilise ce bloc entier pour aligner cela au milieu. Ne pensez pas que j'harmonise parfaitement tout sur ces lignes, nous avons juste besoin de définir certaines zones. Une chose que j'ai vue ici, c'est cette taille. Cette taille de texte est un peu étrange parce que tout le reste est aussi de 24 ou 28 ou environ. Je vais utiliser 24 ici pour celui-ci et nous allons le dimensionner donc c'est en deux lignes comme ça. Nous devons nous assurer que nos tailles de texte ont un peu de contraste, alors cachons tout. Vous pouvez voir par ici. Ce texte et ce texte, ils devraient avoir une certaine différence de taille. Vous pouvez voir, je pense que nous avons déjà construit ça et je pense que ça a l'air superbe. Nos icônes sont toutes dimensionnées, peut-être si vous voulez les dimensionner, réduire la taille de ces éclipse, vous pouvez les réduire mais je pense que 96 est parfait. Ils devraient ressembler à certains êtres humains, pas trop petites choses. Donc oui, je suppose que nous sommes à peu près, nous avons terminé ceci s'il y a quelques ajustements, vous pouvez les utiliser, assurez-vous que toutes vos tailles de titres sont différentes de tout le reste comme ça. Encore une chose que vous pouvez faire ici, vous pouvez également cacher ce contenu. Cela dépend de votre entreprise ou de votre propre client. Si vous voulez cacher vous venez d'afficher ici numéro un ou quelque chose, étape numéro 1 évaluer votre entreprise, et supprimer ce texte. Si vous voulez le garder, c' est à vous de décider mais je pense que ce texte n'est pas trop, donc je vais le garder ici parce que j'ai redimensionné mes icônes. C' est la vue de notre vue mobile de notre site Web, vous pouvez voir ici nous avons terminé l'exercice. Je pense que nous avons pris un voyage assez long et j'apprécie vraiment la patience de tous les designers qui se sont tenus avec moi et qui m'ont permis de créer ce cours et de continuer à regarder cela jusqu'à la fin. C' est le produit que nous avons obtenu à la fin. Maintenant, dans la section suivante, nous allons créer un guide de style, qui va être codé guide de style en utilisant Zeppelin pour le livrer à nos codeurs. Je vais aussi vous montrer d'autres outils que vous pouvez aussi faire la même chose. Passons à la section suivante. 50. Quels développeurs doivent connaître votre conception de Web ?: Dans cette section, nous allons concevoir pour les développeurs et nous allons traduire notre conception afin que nos développeurs puissent facilement le coder. Nous allons donc regarder beaucoup d'outils différents, beaucoup de techniques différentes. Comment concevoir votre document de spécification de ligne rouge et comment nous allons utiliser différents outils en ligne pour développer notre guide de style codé à la fin. Commençons et laissez-moi vous montrer ce que nous allons couvrir dans cette section. Alors commençons. Maintenant, nos développeurs, ils ont besoin de connaître beaucoup de choses comme les distances entre les différents éléments. Alors, quelle est la distance ? En haut de cet élément, vous pouvez voir ici. En outre, ils ont besoin de savoir quelles sont les tailles des différents éléments. En plus de cela, ils ont besoin de connaître la grille. Combien de colonnes vous avez utilisées. Vous pouvez voir ici combien de colonnes cet élément prend et combien de colonnes cet élément prend. Ils ont besoin de construire une mise en page. Donc, ce qu'ils vont faire, c'est qu'ils vont donner à ce logo ces deux colonnes et toutes les autres colonnes seront pour ce bouton « Obtenir un devis », et pour cette navigation. Ici aussi, vous pouvez voir ici qu'ils vont donner 1, 2, 3, 4, 5, 6, 7 colonnes à cet élément et ils vont laisser une marge ou un rembourrage sur le côté gauche. Donc, c'est comme ça qu'ils vont coder. En outre, ils vont connaître les différents styles, styles calque que vous utilisez. Vous pouvez voir ici dans les effets, dégradé sur les ombres portées du calque. Je vais parler de ces effets de couche dans une conférence séparée et nous allons les voir très attentivement. Donc, une chose, c'est les distances. L' autre chose, c'est notre mise en page. Combien de colonnes ? Ils ont besoin de savoir quelles sont les colonnes pour chaque élément. Ensuite, nous avons, par ici, vous pouvez voir ici il y a quatre étapes différentes et chacune en prend trois. Donc, ici, nous avons une mise en page différente. Ici, nous avons six colonnes prenant tout. Ici, nous avons encore trois colonnes et aussi ici. Donc, la première chose qu'ils vont faire, c'est qu'ils vont construire leur mise en page. Combien de colonnes pour chaque ligne ? Donc, c'est une rangée pour leur conception. C' est la deuxième rangée ou la deuxième section pour leur conception. Ensuite, il s'agit d'une autre ligne et c'est une autre ligne de quatre colonnes, ou quatre éléments. C' est ainsi que fonctionne le codage. Ils vont spécifier des colonnes pour chaque élément de conception et ils vont rapidement construire leur mise en page. Donc, une fois qu'ils ont construit leur mise en page, ils vont avoir de l'importance sur les couleurs et le texte, les polices , leurs tailles, leurs couleurs, leurs alignements et aussi ils vont développer ces boutons. Ils vont donner des styles à leur CSS et ils vont être différents boutons comme le bouton « Noir » ou le bouton « Gradient » ou le bouton « Bleu ». Donc vous pouvez voir ici que nous avons le bouton « Blanc ». Cachons cette grille. Ici, nous avons 1, 2, et 3 et 4 différents boutons que nous avons utilisés ici. Je n'ai pas utilisé de lien, mais je pense que vous pouvez utiliser cette couleur cyan pour le lien, comme vous pouvez le voir ici. Ce sont donc les choses qu'ils doivent savoir, puis ils doivent savoir quelles sont les tailles de police et les hauteurs de ligne que vous avez utilisées ici. Donc, la hauteur de la ligne pour celui-ci. Aussi quel rembourrage et marges vous allez utiliser pour celui-ci. Nous allons couvrir tout cela dans un autre outil en ligne appelé Zeppelin. Nous allons apprendre à ce sujet parce que c'est vraiment une bénédiction pour tous les développeurs. Donc, ce sont différentes choses que nous allons dire à nos développeurs et assurez-vous aussi que vous nommez vos couches et les regroupez correctement, comme vous pouvez le voir ici, section d' en-tête sur section à pied, puis tous les boutons et icônes. Ils devraient être nommés correctement, sinon ils vont vraiment avoir des difficultés à trouver vos couches et vos noms. Donc les distances, les couleurs, les styles, les polices , leurs tailles, leurs couleurs, combien de colonnes chacune va prendre ? Ce sont les choses que votre développeur doit savoir sur votre conception. Passons donc à la leçon suivante et voyons plus à ce sujet. 51. Créer des spécifications de l'espacement de lignes rouges pour les développeurs → Partie 1: Maintenant, dans cette leçon, nous allons concevoir un document de spécification de ligne rouge, mais nous allons simplement en concevoir une partie spécifique. D' autres parties, nous allons les obtenir dans un outil en ligne appelé Zeppelin. Donc, le plugin que nous allons utiliser pour l'extension Photoshop est appelé Ink. C' est un plugin gratuit et je vais vous montrer dans quelques secondes comment l'utiliser. Alors commençons. Voici le plugin Ink dont je parlais, ink.chrometaphore.com. C' est un plugin gratuit, et vous pouvez voir ici, il peut générer la largeur et les hauteurs de n'importe quelle sélection, n'importe quel calque. En outre, il peut afficher toutes les propriétés de couche d'un calque de texte. Comme vous pouvez le voir ici, il va montrer que quelle est l'opacité pour les noms, le style, aussi pour la taille avec la hauteur de la ligne. Ce sont beaucoup de détails différents que vous pouvez obtenir à partir de ce plugin. Vous devez l'installer. Assurez-vous donc d'installer ce plugin. Maintenant, je vais passer à Photoshop. Maintenant, ici vous pouvez voir dans mon Photoshop, vous pouvez voir ceci est le plugin Ink. Si vous ne voyez pas cette extension, vous pouvez aller à l'extension et cliquer sur Encre. C' est comme ça. Sa mise en page est affichée. Il existe différentes options que vous pouvez activer et désactiver, telles que les mesures de calque, les propriétés principales du calque d'impression, les couleurs, les effets de calques ou la génération d'un fichier XML. Il est déjà éteint. Ce sont différentes icônes, vous pouvez voir ici. Ce sont pour les sélections. Si je sélectionne quelque chose comme ça, et puis je clique dessus, vous pouvez voir ici, il va montrer la taille de ma sélection. J' ai donc sélectionné 49 pixels comme ça. Ces trois contrôles sont pour les sélections, et ces trois sont pour les calques. Si je clique sur un calque comme celui-ci et que je clique sur l'une de ces propriétés comme celle-ci, il va me montrer la largeur et la hauteur de ce calque. Vous pouvez voir par ici. C'est ainsi qu'il génère toutes ces spécifications. Maintenant, ce que nous allons faire, c'est que nous allons juste utiliser quelques guides, et nous allons montrer les distances entre chaque élément. Quelle est la distance d'ici à ici ? Quelle est la distance entre ces deux éléments ? Alors, quelle est la distance entre le haut de cet élément et cette zone ici ? Donc toutes ces distances, nous allons montrer. plus importants sont les distances dans différentes sections. Si vous considérez que cela va être une section ou une rangée de notre conception, alors quelle est la distance entre celle-ci et la rangée suivante ? Aussi, vous pouvez voir ici, voici notre deuxième section. Vous pouvez voir qu'il s'agit de la distance entre notre section supérieure, la section d'en-tête ou la section [inaudible] et la section suivante. En outre, nous allons montrer les distances entre les sous-sections, comme vous pouvez le voir ici. Ensuite, nous pouvons voir les distances entre ces éléments, aussi ces éléments, et aussi en bas. Alors commençons. Je vais vous en montrer quelques-uns et je vais sauter les autres, puis peut-être les sauter rapidement, vous puissiez voir comment je les conçois. Maintenant, la principale technique derrière la génération cette spécification de ligne rouge est que nous allons utiliser des directives. Donc, ce que nous allons faire, c'est que nous allons sélectionner n'importe quel élément. Sélectionnez l'outil de déplacement. Nous allons sélectionner n'importe quel élément comme celui-ci, puis nous allons glisser et déposer une ligne directrice ici, donc il va s'y tenir. Donc c'est très gentil. Ensuite, nous allons sélectionner celui-ci, et nous allons en laisser tomber un autre comme celui-ci, peut-être celui-ci. Assurez-vous de sélectionner le conteneur. Je vais sélectionner ceci, et encore une fois, laisser tomber, et ça va s'adapter comme ça. Ensuite, si vous voulez, vous pouvez aussi déposer quelque chose ici comme ça. S' agit-il d'un paragraphe ? Je pense que c'est un paragraphe. Je vais le convertir en texte de point. Donc, il peut accrocher la grille exactement où il devrait être. Ensuite, vous pouvez aussi utiliser quelque chose ici, puis par ici, quelque chose comme ça, puis vous pouvez aussi aller d'ici, et puis d'ici comme ça. Donc tu as l'idée de ce que j'essaie de faire ici. Maintenant, j'ai placé toutes les différentes lignes directrices. Maintenant, pourquoi j'ai placé ces directives ou guides ? Je peux donc aider mon développeur à estimer les distances entre les différents éléments. Vous pouvez voir que j'ai sauté ici un, pourquoi ? Parce que si je vais lui montrer la distance entre ces deux éléments, je pense qu'il comprendra que la distance entre ces deux éléments change. La position et la sous-position seront identiques. Donc nous n'avons pas besoin de lui montrer ces guides encore et encore, donc je vais les retirer. Retirons celui-ci. Nous allons le lui dire une fois, et il va partir de là. Ce sont les distances que nous allons générer, et ce sont toutes des distances verticales de haut en bas. Ce que je vais faire, c'est que je vais faire une sélection ici, comme ça. Je vais appuyer sur ça. Il s'agit essentiellement de mesurer la hauteur. Fondamentalement, nous allons générer toutes ces hauteurs. Je vais contrôler D ou commander D pour désélectionner. Ensuite, je vais passer entre ça, et je vais, à nouveau, générer ça. Donc, ce n'est pas un peu exact. Donc ce que je vais faire, c'est que je vais en placer un ici. C' est en fait notre objectif principal. C' est toute la zone. Vous pouvez voir ici, il a besoin de savoir qu'il y a une certaine distance entre ces frontières. Je vais, encore une fois, sélectionner cette zone et je vais appuyer sur celle-ci. C' est 62. Je pense que ce n'est pas dans notre grille. Voyons ce que notre grille devrait avoir. Ça devrait être 64 ans. Donc ce que je vais faire, c'est que je vais corriger l'erreur ici. Donc il devrait être 64, donc je vais mettre 64 ici. Voyons quelle est la distance entre ces deux-là. Si vous sentez que la distance n'est pas dans votre grille ou votre grille de huit pixels, vous allez la calculer, et 104 diviser par 8, donc c'est à l'intérieur de notre grille. Ensuite, nous aurons besoin d'un peu d'espace entre ces zones, ces rubriques. Alors plaçons une grille ici comme ça, et voyons combien nous avons ici, peut-être 16, je suppose, ou peut-être 32. Donc, ça va être 32. Ne vous inquiétez pas, il peut y avoir des problèmes d'un ou deux pixels, notre œil n'est pas parfait, donc nous ne allons pas nous inquiéter à ce sujet. Nous allons changer la taille en nombres entiers afin nos concepteurs sachent ou les développeurs sachent que comment ils vont construire ce design. Ce sont différents. Calculons la taille entre ces deux aussi. Je pense qu'il sera 42, donc il devrait en être 40. Il y a donc une distance de deux pixels. Éliminons celui-ci. La distance de n'importe quelle section sera de 96. Donc oui, c'est bon. Alors quelle sera la distance entre ces deux rubriques ? Choisissons ceci. Je crois qu'il est 16 ans. Il est 20, mais je pense que ça ne devrait pas être 20, ça doit être quelque chose de plus près de 24, je suppose. Allons sur ma grille et voyons ce qui s'est mal passé ici. Voyons donc s'ils sont alignés correctement. Je pense qu'il y a un peu de problème ici. En fait, cette section utilise toutes ces lignes ici. Donc, un peu de ligne, un peu de notre texte est un peu hors de la grille. En fait, ce que nous devons faire c'est qu'il faut contrôler D. Je pense que 24 fonctionnera, vous n'avez pas besoin de vous en soucier. En fait, ça devrait être quelque chose comme ça au bas de la grille. C' est ainsi que cela va fonctionner. Mais au milieu, c'est bon, ne vous inquiétez pas beaucoup à ce sujet. Ce ne sont là que les lignes directrices. Alors cachons notre grille. 52. Créer des spécifications de l'espacement de lignes rouges pour les développeurs → Partie 2: Remarque, faites de votre design deux pixels parfait. Assurez-vous juste que vous allez utiliser les bonnes tailles ici ou la distance est ces, grandes et mineures distances, elles comptent vraiment beaucoup. Vous pouvez même développer une échelle et en parler vos quotas. Que si vous voulez utiliser un grand espace comme celui-ci, un grand rembourrage, alors il devrait être 104, le rembourrage de section sera de 96 pixels, la distance entre le titre et le sous-titre sera de 24. Donc c'est votre échelle. Vous pouvez voir que nous utilisons 40 beaucoup et aussi 104, et parfois nous utilisons 64. Donc 40, 64, 104, 32. C' est notre échelle de rembourrage. Donc, nous sommes des espaces de vie entre les différentes zones, alors vous pouvez voir ici. Nous pouvons également activer notre grille pour voir où devrait être notre guide. Donc je vais placer mon guide ici. Vous pouvez aussi faire quelque chose comme ça. Je vais mesurer la distance entre ces deux-là. Donc c'est 80, c'est 10 fois. Peut-être qu'on peut aussi utiliser 64 ou 96 ici. Je pense qu'on peut utiliser 64 ici aussi. Donc, si vous voulez changer un peu votre design, vous pouvez le faire. Ensuite, nous avons un peu d'espace entre ces deux secteurs, je pense qu'il sera presque 64. C' est 44. Pour les faire en une seule échelle, nous devons le raccourcir à 40. Donc, ça va être 40 et ça aura l'air bien. N' utilisez pas trop d'espaces différents, je pense que nous avons déjà beaucoup d'espaces différents, 96, 64, 40, 32. Ainsi, il peut supprimer l'harmonie entre votre design, alors n'en utilisez pas trop. Je pense que ce bloc est égal à la taille de 96, je suppose. C'est 96. Donc je vais le déplacer ici comme ça. C' est ainsi que nous allons développer notre documentation sur la ligne rouge. Donc je vais tout sauter. Maintenant, vous pouvez voir que j'ai ajouté tout un rythme vertical du nombre d' espaces et du nombre d'espaces différents ou de pagaies que j'utilise. Vous pouvez voir ici, nous avons 80, 40, 96, 40, 96, 64, 104. En outre, si vous voulez utiliser ou rendre votre design trop compatible ou varier en harmonie, vous pouvez ajuster vos espaces par la suite. Donc, si vous voulez utiliser 104 partout, vous pouvez réduire ce 144 à 104, si nous utilisons un plein 40 pixels en bas et aussi en haut. Vous pouvez voir que nous avons aussi 64 pour le médium alors 104 est le plus grand. Peut-être que si vous voulez ajuster, vous pouvez ajuster cela. Plutôt que d'utiliser 144 ici, nous pouvons aussi opter pour 104. Donc j'utilise 40 pixels de moins ici. Vous pouvez voir comment votre design peut ressembler ici, l' ajuster et voir s'il va s'améliorer. Si ce n'est pas le cas, alors vous pouvez augmenter et utiliser 144 à la place. Parlez-en à vos développeurs à ce sujet, créez un rythme ou une échelle complète de différents paddings et marges et dites-leur que ce sont les différentes distances que vous utilisez. Ils seront heureux de parler de votre processus et de tout. Alors réunissez votre équipe et dites-leur ce que vous utilisez ici. Vous pouvez aussi voir que je peux les centrer dans ce bloc ici. Si vous le voulez, vous pouvez aussi faire quelque chose comme ça. Aussi, vous pouvez voir toutes mes spécifications sont dans ce document, ce dossier encre, donc je peux instantanément les cacher et les montrer. Ce plugin est vraiment cool, vous devez l'utiliser et vous devriez livrer un fichier PNG ou vous pouvez leur montrer le PSD comme ça. Vous pouvez simplement fournir un aperçu PNG de votre document comme ça. En outre, la même chose, vous pouvez faire avec votre tablette et les vues mobiles. Je ne vais pas répéter cela parce que nous avons ici des largeurs différentes. Nous avons un espacement différent ici, peut-être un rythme vertical différent que nous utilisons ici, nous utilisons moins d'espacement. Vous pouvez développer une, deux ou trois échelles différentes, ou peut-être deux échelles pour différents appareils et vous pouvez les utiliser pour le remplissage et les marges entre vos différents éléments. Il s'agit donc d'utiliser de l'encre, et j'espère que vous avez apprécié cette leçon, alors passons à la leçon suivante. 53. Quels styles de calque peuvent être convertis en code (HTML) ?: Dans cette leçon, nous allons parler différents effets Photoshop et styles de calques pris en charge par vos développeurs ou de ce qu'on appelle CSS Cascading Style Sheets. Si vous parlez à un développeur, vous devez savoir que ces choses sont possibles. Si vous n'êtes pas sûr, alors vous devriez parler à vos développeurs ou équipe de développement que « Je vais utiliser cet effet ou ce dégradé dans ma conception, est-ce possible en CSS ou non ? » Pouvez-vous le convertir en code facilement ou non ? Je vais vous montrer quelques-uns des outils et des sites où vous pouvez utiliser les dernières expériences CSS et différents effets. Je pense que si vous les connaissez et que vous êtes exposé à ces effets et que vous savez que ces choses sont possibles en CSS, vos développeurs ne peuvent pas discuter avec vous. Commençons. Je vais commencer par différents effets de calque Photoshop. Maintenant, ici, j'ai un certain soutien qui provient de la tête CSS, c'est l'extension du plugin Photoshop et il repère différents styles CSS et peut générer leur code instantanément. Il affiche le remplissage de calque dégradé/solide, superposition de dégradé, l'ombre portée, les calques de texte, l'ombre interne, la superposition de couleur, lueur interne, le contour, la lueur extérieure, le rayon de bordure. Border Radius est ce que nous utilisons dans les boutons rectangulaires arrondis. L' opacité, l'opacité ou la transparence. Ensuite, nous avons moins de style et SASS et Stylus. Ce sont des langues différentes, ou vous pouvez dire des préprocesseurs CSS. Tu n'as pas besoin de t'inquiéter pour eux. Passons à Photoshop et je vais vous montrer combien de styles et de styles de mise en page vous pouvez utiliser ici. Ici, nous avons ce bouton. Je vais le sélectionner car il utilise beaucoup d'effets différents. Si nous allons à Styles de calque, vous pouvez voir que j'utilise un « Gradient Overlay ». Cette superposition de dégradé est possible. Tu n'as pas besoin de t'en inquiéter. Vous pouvez utiliser autant de couleurs que vous le souhaitez, n'importe quel angle que vous voulez. Ensuite, nous avons ces « Ombres Drop ». Vous pouvez même utiliser plusieurs ombres portées et elles peuvent être converties en code facilement. Aussi pour les ombres intérieures, vous pouvez utiliser plusieurs ombres intérieures. Vous pouvez également utiliser Stroke, mais ne passez pas sur deux coups. N' utilisez pas plus de deux coups de caisse réelle. Vous voyez que je les ai doublés. Évitez ce biseau et emboss. Lueur intérieure, ombre intérieure, contour, superposition de couleur, superposition de dégradé et ombres portées et lueur extérieure, évitez cette superposition de motif et ce satin et ce biseau et gaufrage. Vous n'avez pas besoin de les utiliser. D' autres effets peuvent être facilement calculés dans votre codage et si vous faites un clic droit dessus, vous pouvez voir que vous pouvez « Copier CSS », qui est le code pour vos développeurs et si vous le collez, vous pouvez voir ici il a un rayon de bordure, qui est les coins de vos boutons. Puis image de fond, ici nous avons tous les gradients. Ensuite, nous avons plusieurs ombres de boîte, qui est notre ombre portée, nous avons la position absolue, ne vous inquiétez pas à ce sujet, nous avons cette largeur et cette hauteur et ne vous inquiétez pas à ce sujet. Laissez-moi vous montrer l'exemple en direct comment j' utilise ce code et le convertir en ce bouton ici. Laisse-moi te montrer. Voici la même chose, mais, et ce n'est pas une image, c'est fondamentalement un exemple codé. Je suis en ce moment en utilisant ces paramètres ici. J' utilise le même code généré par Photoshop et ai collé ici et vous pouvez voir ici. Toutes les ombres. Vous pouvez voir trois ombres sont violettes et deux ombres faibles qu'elles sont superbes ici. Ensuite, laissez-moi vous montrer quelques-uns des plus d'effets, qui sont possibles et de nouvelles choses et blogs que vous devez voir et les sites que vous devez voir pour vous exposer. L' un est ce codepen.io. Il y a beaucoup d'expériences différentes en cours ici. Vous pouvez voir que cet arrière-plan incliné est fait par codage, donc ils n'utilisent aucun type d'image ici. Aussi, vous pouvez voir cet effet CSS cinématographique. Ceci est également généré avec CSS. Il y a des millions de possibilités que vous pouvez faire maintenant avec le dernier CSS3. Aussi, vous pouvez voir si je survole, vous pouvez voir qu' il y a un lourd bordé autour de cela. Laissez-moi vous montrer que ce sont des effets de clic différents. Ils sont vraiment interactifs, vraiment génial. Si vous connaissez ces effets que vous avez vus, voici le blog tympanus.net et il y a des millions d'expériences et de choses différentes ici. Vous pouvez voir, c'est Play and Pause, vous pouvez l'utiliser sur une application audio ou quelque chose comme ça. Ensuite, vous pouvez voir qu'il y a beaucoup de styles de boutons. Ce sont des styles très interactifs. Vous pouvez dire à vos développeurs que vous allez utiliser ce style ou celui-ci sur mon bouton. Ici, ce sont des styles différents. Si je les appuie, ils montrent différents styles, comme vous pouvez le voir ici. Il y a beaucoup de possibilités que vous pouvez faire. Ici, il y a différentes options. Il y a différents effets de chargement de différents textes. Ceux-ci sont possibles avec juste un codage que vous n'avez pas besoin de vous soucier de sa mise en œuvre. Si vous savez déjà que cet effet est possible, alors vous avez l'emprise au-dessus de votre équipe et de votre équipe de développement. Vous savez que vous pouvez facilement leur dire que j'ai besoin de cet effet ici. Laissez-moi vous montrer qu'il y a d'autres possibilités que vous pouvez voir. Le dégradé se déplace de cette direction vers cette direction. Si j'essaie de changer l'angle, ou si j'essaie d'ajouter une couleur de plus ici, peut-être celle-ci. Permettez-moi de vous montrer l'aperçu et vous pouvez voir que notre gradient a changé et qu'il passe de cette direction à cette direction. Il y a beaucoup de possibilités. Vous pouvez utiliser beaucoup de styles différents, différents styles d'en-tête que vous pouvez voir ici. Aussi, j'ai vu ce style sinueux. Vous pouvez voir ces courbes. Ces courbes sont également possibles avec CSS et HTML et tous ces styles différents. Il y a beaucoup de possibilités. Je vais inclure les liens pour tous ces sites et j'espère que vous avez apprécié cette leçon. Si vous voulez en savoir plus sur eux, vous pouvez me poser dans les questions. Ce sont là les principaux effets. Vous devez savoir que ceux-ci sont possibles dans Photoshop et aussi vos développeurs peuvent développer en utilisant ces styles. J' espère que vous avez beaucoup appris sur ces styles de calque. Passons à la leçon suivante. 54. Installation Zeplin pour la collaboration en conception Web: Dans cette leçon, nous allons utiliser Zeplin, un outil en ligne et aussi c'est une extension Photoshop et nous pouvons l'utiliser pour collaborer très bien avec nos développeurs. Nous allons donc l'installer et ensuite nous allons exporter nos tableaux d' art dans Zeplin et c'est un outil en ligne. Dans la leçon suivante, nous allons réellement développer un guide de style à partir de notre PST, qui est téléchargé sur Zeplin. Commençons. Voici le site de Zeplin. La meilleure chose à ce sujet est qu'il a une version gratuite. Vous devez donc vous inscrire gratuitement et vous devez télécharger l'extension. Vous devez télécharger leur extension Photoshop. Vous pouvez voir par ici. Vous pouvez également aller pour leurs différents tutoriels et comment l'utiliser. En bas, vous pouvez voir ici, application Mac et application Windows, vous pouvez télécharger ces. Une fois que vous avez téléchargé ceci, vous pouvez voir, vous allez voir quelque chose comme ça, Zeplin installer. Je suis sur Windows en ce moment. Donc je l'ai installé. Mon système Windows est 64 bits, donc je l'ai installé et il va apparaître dans votre Photoshop. Passons maintenant à Photoshop. Je suis ici à l'intérieur de mon Photoshop et vous pouvez voir que vous devez aller à ce Windows et l'extension, alors vous devez passer à votre Zeplin. Vous pouvez voir ici, si je clique dessus, il va charger, prend un certain temps et vous pouvez voir que j'ai un tableau d'art sélectionné à me montrer, exporter le tableau d'art sélectionné à Zeplin. C' est pourquoi nous avons utilisé des tableaux d'art dans nos designs. Maintenant, vous ne pouvez exporter qu'un seul ou vous pouvez tous les exporter. Mais je pense que vous pouvez exporter un par un. Voyons ce qu'il va faire. Il va me montrer que ces trois tableaux d'art sélectionnés. Maintenant, il y a une autre fonctionnalité que vous pouvez voir ici. Il montre la marque comme un atout. Qu' est-ce que ça veut dire ? C' est comme si j'ai cette image, c'est mon logo. Je vais cliquer sur celui-ci avec ce bouton et il va le marquer comme un atout. actif signifie que nous avons besoin de différentes images PNG ou JPEG pour ce logo. Donc, toutes les autres choses qui peuvent être générées avec CSS ou codage seul, comme ce texte et ces boutons nous n'en avons pas besoin. Mais ce seront nos atouts. Assurez-vous de les nommer correctement comme ceci est mon icône de drapeau et je vais le nommer correctement, aussi, toutes ces icônes. C' est juste pour la démonstration. Vous devez savoir comment je vais les marquer comme un atout. Je vais les marquer comme un atout. Aussi ces images sont aussi un atout. Vous pouvez utiliser la balise entière comme image. Vous pouvez également marquer ce groupe. Vous pouvez voir ici, ignorer les sous-couches du groupe, désactiver toutes les couches de ce groupe dans Zeplin. Ça va faire quelque chose comme ça. Ignorer, désactivez tous les calques de ce groupe dans Zeplin. Donc, il ne va pas vous montrer des calques à l'intérieur de cette zone de balise. C' est notre étiquette. Mais supprimons cela maintenant et aussi ces images que je veux les nommer Sindbad. Je dois aussi les marquer comme un atout. Donc, vous devez marquer toutes vos images comme 1, 2, 3, 4, ce fond. Je dois les marquer tous les deux, les regrouper. Je vais les regrouper et je vais l' appeler bg-footer et je vais le marquer comme un atout. Aussi, je vais ignorer les sous-couches du groupe parce que je n'ai pas besoin d'eux séparés. Il s'agit d'un seul arrière-plan. C' est ainsi que vous allez marquer tous vos actifs, vos images, vous devez exporter. Si vous voulez quelque chose comme cette image comme une icône, je vais le marquer. C' est ce qu'on appelle l'icône userstest, et je vais le marquer comme un atout. Vous pouvez également les marquer comme un atout aussi, mais je pense que c'est possible dans le codage CSS, vous avez juste besoin d'une image et vous pouvez la rendre ovale et y mettre un trait avec votre codage. C' est possible avec le codage, nous n'avons pas besoin de changer quoi que ce soit ici, peut-être que nous devons changer cela comme un atout parce que c'est un bouton de lecture. Vous pouvez également marquer comme actif. Assurez-vous que vous devez faire toutes ces choses. En outre, nous pouvons marquer cela comme un atout, peut-être Control G et video-bg. Donc je vais les marquer comme un atout, ignorer les sous-couches. Je ne vais exporter qu'un seul d'entre eux. Pour rendre ce processus plus facile pour vous de digérer. Importons ça. J' ai déjà un projet. Si vous n'avez pas de projet, il va vous montrer que créer un projet. Pour cela, vous devez démarrer votre application Zeplin ici. Je vais fouiller Zeplin. Si je clique sur Zeplin, vous pouvez voir un que nous avons cette extension dans notre Photoshop alors nous avons une autre application à part entière où vous pouvez créer différents projets dans Zeplin. Maintenant, vous pouvez voir que nous avons créé Zeplin ici. Supprimons ce projet maintenant. Nom du projet Wstudio. Je vais le supprimer. J' ai supprimé le projet pour vous montrer comment il va fonctionner si vous n'avez pas de projet. Si j'essaie maintenant d'exporter mon, vous pouvez voir qu'il me montre qui en créer un à partir de l'application. J' ai donc chargé l'application et je vais créer un nouveau projet ici, voyons, créer mon premier projet. Ce sera Web. Je vais donc créer mon projet Web ici. Il est en train de créer mon projet en ce moment. La densité est 1x, nous avons conçu sur 1x, pas 2x, qui est la rétine. Nous concevons à 72 pixels, donc 1x et ensuite nous ne ferons rien. Donc on peut changer le titre ici, Wstudio, quelque chose comme ça. Maintenant, nous allons aller à Photoshop, comme vous pouvez le voir ici et nous allons sélectionner à nouveau ce et vous pouvez voir ici nous pouvons importer. Nous avons donc cette importation, mais il faudra un certain temps pour importer. Il va le charger dans le serveur Web. Maintenant, vous pouvez voir notre tableau d'art est chargé dans l'application Zeplin et vous pouvez voir ici, voici notre tableau d'art de bureau et ce sont les mêmes paramètres nous avons fait ici et aussi si vous voulez inviter d'autres membres, vous pouvez cliquer ici et invitez d'autres membres avec un nom d'utilisateur ou vous pouvez mettre votre nom de courriel. C' est la meilleure application de collaboration. Vous pouvez également ajouter ceci à Slack. Vous pouvez également amener votre équipe Slack ici si vous avez Slack URL. Revenons à notre tableau de bord. Vous pouvez voir ceci est notre guide de style. instant, nous n'avons pas de guide de style, mais nous allons créer ce guide de style dans la prochaine leçon. Ouvrons cela et voyons quelle description cela peut vous donner. Vous pouvez voir ici, je voulais les cacher, mais je crois que je les ai oubliés. Si vous voulez les garder, vous pouvez les garder. Je vais faire un zoom arrière à 75 pour cent. Ça a l'air bien. Si vous cliquez sur un calque, vous pouvez voir que c'est CSS et aussi ses couleurs et toutes ses propriétés sur le côté droit. Si vous cliquez ici, vous pouvez voir que vous pouvez également marquer. Ceci est le lien pour ce fichier, si vous voulez l'envoyer à quelqu'un, vous pouvez l'envoyer à quelqu'un. Ensuite, vous avez différentes couleurs que vous avez utilisées dans l'ensemble de ce document. Vous pouvez voir ici, c'est la couleur rouge, elle arrive ici. On n'en a pas besoin. Aussi, vous pouvez voir ce sont tous les actifs. Vous pouvez voir par ici. Vos développeurs peuvent simplement cliquer dessus et les télécharger et ce sont quelques modèles ici. C' est ainsi que fonctionne notre projet. Si nous téléchargeons plus d'écrans, ils viendront ici. moment, je vais travailler avec seulement cet écran pour rendre cette conférence un peu courte. Dans la leçon suivante, nous allons créer un guide de style à partir de ce tableau d'art. Passons à la leçon suivante. 55. Créer un guide de style UI avec Zeplin: Maintenant, dans cette leçon, nous allons apprendre comment développer notre guide de style en utilisant Zeplin, alors commençons. Ici, nous avons notre plan de travail ouvert dans notre tableau de bord. Si nous cliquons dessus, vous pouvez voir ici nous allons obtenir ceci. Si nous cliquons sur n'importe quel bouton, vous pouvez voir ici, c'est le bouton que vous pouvez, voir qu'il montre tous les champs qu'il a utilisés, et avec tous ces ombres portées. Donc ce sont deux ombres portées, alors nous allons les sauver. Avant cela, je pense que nous devons ajouter toutes ces couleurs. Maintenant, même le Zeplin n'est pas parfait, vous pouvez voir que nous avons utilisé dégradé de cette couleur à cette couleur, et il y a quatre couleurs. Il montre qu'il s'agit d'un remplissage dégradé, mais il ne montre pas où est l'arrêt de la couleur. Donc, pour cela, nous allons obtenir l'aide de Photoshop. Nous allons cliquer avec le bouton droit de la souris sur cette couche dans Photoshop et copier CSS pour obtenir ces valeurs pour nos développeurs. En ce moment, ce qu'on va faire, c'est qu'on va copier cette ombre de couche, donc je vais peut-être le bleu délavé. La couleur est bonne. Ils utilisent vraiment très belle couleur, ardoise 57. Je vais ajouter peut-être de l'ombre autour d'elle, donc pour m'assurer que mes développeurs savent que ce seront des ombres. Vous allez les nommer comme ceci, donc ce signe de hachage signifie la classe, donc c'est pour les développeurs, ce nom entier. Assurez-vous qu'il n'y a pas d'espaces entre eux et qu'ils commencent par la minuscule. Si vous voulez utiliser des majuscules, je pense qu'il est préférable d'utiliser une minuscule ici. C' est tout le CSS, vous pouvez voir ici, il y a des ombres de boîte, il y a aussi des dégradés ici. Le code est déjà généré ici, nous n'avons pas besoin de les ajouter dans notre palette de couleurs. Donc, d'autres couleurs, nous allons ajouter cette couleur. C' est notre couleur gris anthracite. Alors quelque chose d'autre que nous devons ajouter ? Nous devons ajouter notre Nunito Sans-Regular, c'est notre style. C' est essentiellement notre style, et ajoutons celui-ci. Donc c'est notre NAV-Text. C' est normal, peut-être que c'est normal parce que nous ne planons pas dessus, alors peut-être comme ça, alors nous allons utiliser celui-ci. Ceci est notre texte de paragraphe et la couleur, donc nous allons au texte, paragraphe texte. C' est un autre style de texte, c'est notre rubrique 1. Je vais utiliser la rubrique 1 ici, tête 1 quelque chose comme ça. Assurez-vous que vos noms sont un peu descriptifs afin que vos développeurs sachent ce qu'ils voient. Ça va être notre heading3-blanc. C' est le titre de niveau 3. Il ne devrait pas être comme ça, en tête 3-violet. Vous pouvez aussi l'appeler sous-titre, c'est à vous de décider. Ensuite, nous allons aussi l'utiliser. rubrique 1 est essentiellement votre titre principal, la plus grande taille de titre de votre document, la rubrique 1. Je pense que nous avons déjà ce style, donc nous n'allons pas l'ajouter à nouveau. Je vais appuyer sur « Escape ». Vous pouvez l'appeler paragraph-head, quelque chose comme ça. C' est un autre titre, appelons-le la rubrique 4. Ensuite, nous avons ces styles, laissez-les comme ça. Si vous cliquez dessus, vous pouvez voir qu'il s'agit de l'actif que nous avons sélectionné, sorte que vous pouvez voir que nous pouvons télécharger ces ressources. Si vous cliquez ici, cela va télécharger les actifs PNG, et ils seront en trois tailles : 1x, 2x et 3x. Laisse-moi ouvrir ça pour toi, je vais l'ouvrir. Vous pouvez voir ici, c'est la plus grande taille 3x. C' est le deuxième, et c'est le troisième, donc ils sont pour trois résolutions différentes d'écrans différents, mais je pense que nous allons utiliser celui-ci. Maintenant, le problème que vous pouvez voir ici est qu'il n'est pas coupé. Lorsque vous finissez votre design et que vous allez télécharger, avant de le télécharger sur Zeplin, vous devez couper ceci. Vous devez supprimer cette partie en dessous de celle-ci. Vous devez rastériser ce calque et supprimer la partie inférieure. Ne le cache pas, en ce moment je l'écrase, mais vous pouvez voir qu'il a téléchargé toute l'image. Je pense aussi que c'est le problème avec cela, vous pouvez voir ici, il me montre toutes les limites de cette image, sinon, ce qu'il devrait faire est qu'il ne devrait pas sortir de la limite de cette image. C' est l'erreur, je crois que j'ai oublié. Vous devez découper toute cette zone, rogner cette zone et recadrer vos calques et vous assurer que vos calques ne sont pas des objets intelligents. Si vous avez un objet intelligent, ils ne seront pas rognés. Assurez-vous de convertir vos objets intelligents en calques rasterisés. Tu dois faire un clic droit, laisse-moi te montrer. Maintenant je suis dans Photoshop, laissez-moi vous montrer de quoi je parlais, donc c'est essentiellement notre pied de page. Vous devez donc appuyer sur « C » pour le bouton de recadrage, et vous devez cliquer ici une fois. Laisse-moi te montrer ce que ça va être. Maintenant, ce que nous allons faire, c'est que nous allons faire nos couches avec la taille de ceci. Assurez-vous que vos calques sont tous coupés, je vais rastériser ce calque, vous pouvez voir ici, je dois sélectionner ceci et je vais inverser la sélection. Je vais tout supprimer de cette zone. Alors sélectionnez ceci et supprimez tout ce qui est autour d'elle. Maintenant, si j'essaie de sélectionner celui-ci, vous pouvez voir qu'il a ceci. Supprimons tout ici aussi. Donc, si j'ai quelque chose ici, je vais utiliser cette sélection comme ça et appuyer sur « Supprimer », « Contrôle D », et sélectionnons-la. Assurez-vous que votre sélection est quelque chose comme ça. Sachez que vos zones ne doivent pas être en dehors de cette frontière, donc s'il s'agit de limites de document. Je vais revenir parce que je dois partager mes fichiers avec vous. Maintenant, je suis de retour. Maintenant, autre chose que vous pouvez voir ici, est aussi vous devez supprimer cette partie inférieure de ces images une par une, faire votre sélection comme ça et supprimer tout ce qui est en dessous. Assurez-vous d'avoir la copie originale du dessin, donc si vous voulez plus tard déplacer quelque chose de haut en bas, cela ne vous pose pas de problèmes. Il y a peu de problèmes, comme vous pouvez le voir ici, c'est bon mais je pense encore, les tailles ne sont pas exactes. Vous pouvez donc utiliser uniquement Photoshop et exporter ces images via Photoshop. Vous pouvez le faire en cliquant simplement avec le bouton droit de la souris sur « Exportation rapide en PNG ». Cela va vraiment bien fonctionner dans Photoshop. Il va vraiment rapidement exporter vos actifs. C' est ainsi que vous allez le faire rapidement. Passons maintenant à la création d'autres styles ici. Vous pouvez voir ici, c'est notre bouton blanc et voici notre tealish de couleur. Voyons s'il reste une autre couleur ici. Oui, nous avons une couleur ici qui est déjà ajoutée, mais nous n'avons pas cette couleur, cela se fait aussi en couleur bleue. Voyons si on a autre chose. Je pense que nous avons déjà construit nos couleurs. Vous pouvez voir ici ce sont les couleurs utilisées dans ce design. Je crois que je n'ai pas cette couleur peut-être. J' ai donc besoin d'ajouter cette couleur, c'est pour le titre, et aussi je pense que j'ai oublié d'ajouter ce style. Ceci est fondamentalement heading1, et ce n'est pas heading1, il est juste 20 pixels Yorkten normal bold. Donc, ce n'est pas en route. Voici notre paragraphe-texte, c'est notre heading1. Alors passons en revue le guide de style en allant ici. Ce sont nos deux ombres. couleur gris anthracite, tealish, bleu denim-bleu, grisâtre, et nous avons oublié notre couleur gris clair ici, je suppose. Vous pouvez voir que nous avons déjà construit heading1, heading3. Si nous cliquons dessus, vous pouvez voir toutes ces tuiles sont dans ce code. Tête de paragraphe et paragraphe texte, text-normal, en-tête 4, en-tête 3, en-tête 1. Vous pouvez trouver des conventions de dénomination avec votre équipe de développeurs, et s'ils ont un schéma de dénomination différent comme ils mettent heading-1 ou quelque chose comme ça, c'est à vous de décider. Ou peut-être que vous pouvez simplement l'appeler h1 et h3, quelque chose comme ça. Peut-être des noms plus courts. Voici mon guide de style. Ensuite, nous avons h4, navigation-text-normal, paragraph-text, paragraph-head. Je pense qu'on n'a pas besoin de ça ici. Il s'agit donc d'un autre style, c'est pour l'en-tête des paragraphes. Nous avons notre plan de travail et nos couleurs ici, peut-être que si nous avons manqué notre couleur, vous pouvez les rajouter. Voyons voir, je pense que je n'ai pas cette couleur, couleur gris ardoise. C' est le contenu, vous pouvez voir, vous pouvez également copier ce contenu. Il y a CSS pour chaque élément. Vos développeurs peuvent parcourir ce document et ils en trouvent un. Vous pouvez voir ici, si je clique dessus, il montre aussi la largeur et la hauteur de cela ainsi que le rayon. Toutes ces formes sont des coins, quel est le rayon de coin ? Vous pouvez également voir qu'il montre le remplissage de couleur et notre document montre déjà les distances. Aussi, si vous cliquez sur cela, vous pouvez voir qu'ils peuvent télécharger les actifs. Ce sont donc quelques choses dont vos développeurs ont besoin de vous ; différentes distances, couleurs, guide de style. Cela peut vraiment créer un guide de style très agréable, vous pouvez voir ici nous avons 1, 2, 3, 4, 5 couleurs avec deux ombres. Vos quartiers peuvent copier tout ce CSS, ils peuvent également utiliser d'autres choses comme SASS, SCSS, Less, Stylus. Ce sont différents plus cadres pour créer vos guides de style et styles dans le codage HTML. Maintenant, même si vous êtes notre développeur, vous allez vraiment aimer cet outil, et je pense que j'aime vraiment cet outil. Je viens de commencer à l'utiliser il y a un mois. Vous pouvez voir ici, vous pouvez également inviter vos membres. Ceci est le propriétaire, et tout cela est à propos de votre outil Zeplin guide de style en ligne. Vous pouvez voir ici que vous en avez créé un, et cela va vraiment aider vos développeurs. Maintenant je pense que c'est plus que suffisant à propos de Zeplin, il y a plus d'outils que je vais les couvrir dans la prochaine leçon. Vous pouvez les utiliser avec vos développeurs. Passons à la leçon suivante. 56. Zepling vs Avocode → Comparaison des outils de collaboration concepteurs/développeurs de collaboration: Maintenant, dans cette leçon, je vais comparer trois outils différents qui peuvent rapprocher votre codage et votre conception. Certains d'entre eux sont très puissants et certains d'entre eux sont destinés aux concepteurs et à tous les membres de l'équipe, et certains d'entre eux sont simplement axés sur les développeurs. Voyons voir quels sont ces outils. L' un d'eux que je t'ai montré, c'est Zeplin. Il y a quelques autres fonctionnalités [inaudibles] que j'ai oubliées. L' un d'eux est que vous pouvez ajouter différentes commandes ici, bien que les membres de votre équipe puissent vous donner des commentaires. C' est le signe plus que vous pouvez utiliser pour déposer votre commentaire partout, où vous le souhaitez. Comme, « C'est le logo, devrait-il être en couleur ou en noir et blanc ? » Vous pouvez poster ceci et d'autres peuvent répondre ici. Aussi, vous pouvez voir que c'est comment vous pouvez cacher et montrer vos notes, donc ce sont mes notes. Vous pouvez également choisir les couleurs que vous voulez, et vous pouvez aussi les [inaudibles]. Vous pouvez zoomer, zoomer. C' est un outil de collaboration très agréable. Ensuite, l'autre concurrent, ce qui est très bon est cet Avocode. Il n'a pas de version gratuite. Vous pouvez simplement l'utiliser pendant 14 jours et le minimum qu'ils ont est de 9$ par mois. C' est aussi très puissant, très proche de Zeplin. Je pense que certaines fonctionnalités sont peut-être meilleures, comme vous pouvez le voir ici. Il peut également générer du code pour le développement d'applications mobiles comme Swift, CSS dans JS, Android. Ce sont beaucoup plus de fonctionnalités d'édition, même pour le développement d'applications mobiles. Contrôle de version basé sur le cloud, c'est très bon pour concepteurs car vous devez suivre toutes vos modifications. Maintenant, ce qu'il va faire, il va à la version de vos modifications que vous modifiez pour apporter à votre fichier PST. Il va être dans différentes versions comme les développeurs utilisent GitHub. Collaborations de conception en temps réel, ils peuvent également commenter ici. Il a également d'autres outils comme la mesure, la couleur, les diapositives, la main. Je l'ai utilisé il y a quelques années, peut-être un an ou deux ans, mais la version récente, je ne les ai pas utilisés et je ne suis pas abonné à ce service. Mais je pense que ça vaut vraiment la peine de vérifier. Ces deux applications sont en ce moment les plus performantes de l'industrie, Avocode et Zeplin. Autre qui est libre, est ce crochets et il est fondamentalement un éditeur de code du site Web Adobe, société Adobe. Ce qu'il fait, est en fait destiné aux développeurs. Il va charger votre fichier PST en bas. Je ne pense pas que ce soit très utile pour moi. Je n'ai pas beaucoup aimé par rapport à ces deux outils. Avocode ou Zeplin, vous devez utiliser l'un d'eux. Ils vont vraiment rapprocher le fossé entre les concepteurs et les développeurs. Maintenant, après cette section, vous savez quels sont les outils nécessaires pour réunir votre équipe de développement et de conception. Il s'agit d'apporter votre design pour les développeurs et de concevoir pour les développeurs. Je pense que vous avez beaucoup appris. Si vous avez des questions, posez-moi. Je suis là pour vous aider. Si vous ne comprenez rien, je vais créer d'autres conférences à ce sujet. Passons à la leçon suivante. 57. Sympli vs Avocode → Comparaison des outils de collaboration concepteurs/développeurs de collaboration: Aujourd'hui, je vais vous montrer deux autres outils qui aident les concepteurs à collaborer avec les codeurs et à faire en sorte que vos PSD se convertissent facilement au codage. Maintenant, l'un d'eux est Sympli, je viens de tomber dessus et j'ai vu peu de designers en parler. Ici, vous pouvez voir ici qu'il a la même fonctionnalité, vous pouvez marquer vos actifs dans Photoshop comme vous l'avez fait dans Zeppelin et ensuite vous pouvez l'exporter ici. Donc, ce qu'il a fait est, en fait, il a créé des styles, des actifs, et tout automatiquement. Pour moi, le problème était que je n'avais pas trop de contrôle. Vous pouvez voir ici, ce sont tous les actifs que j'ai déclarés et si je clique ici, il va juste télécharger le bitmap et voyons ce qu'il va créer. Je pense que cela va faire la même chose, donc j'aimerais avoir quelques fonctionnalités SVG ici, donc si je peux télécharger ces icônes ou cette icône dans SVG. Ces actifs sont créés automatiquement, aussi, toutes ces couleurs ont été créées automatiquement, vous pouvez voir ici. En outre, vous pouvez voir ici tous les styles de texte, les icônes sociales, la police que j'ai utilisée pour les icônes sociales, c'est ici. Donc, il y a quelques choses supplémentaires que je pense pour moi, et je ne sais pas comment obtenir le code d'ici, donc j'ai tout cela, si je clique ici ou où je dois aller pour obtenir ce code, donc c'est un peu problématique pour moi parce que je veux le code CSS ici. C' est bon pour, je pense, les développeurs qui utilisent Android Studio ou Xcode, j'ai vu beaucoup de designers qui utilisent Android Studio ou ils conçoivent pour les applications Android, ils adorent vraiment. Mais pour moi, je pense que c'est tout simplement correct, je ne l'ai pas beaucoup aimé parce que je n'ai pas beaucoup de contrôle sur cette zone, donc il génère en fait tout automatiquement. J' ai vraiment aimé Zeppelin, je pense que c'est l'outil parfait pour les concepteurs web et les développeurs web, je ne suis pas sûr des développeurs d'applications mobiles ou des concepteurs, je pense que peut-être cet outil est bon pour la conception d'applications Android. Maintenant, venez à cet Avocode. J' essaie maintenant l'Avocode, laissez-moi vous montrer. Maintenant, j'ai ouvert mon fichier PSD dans cet Avocode et la première chose que j'ai remarqué est que l'information est écrasante. Nous avons quelques sections ici, comme la main, vous pouvez déplacer les choses autour, puis sélectionner et vous pouvez sélectionner n'importe quoi et toutes ses propriétés vont être ici, vous pouvez également sélectionner le texte. Donc, si vous êtes un développeur, je pense que cet outil va vous donner un peu d'aide, vous pouvez également copier du texte ici ou si vous voulez l'exporter, vous pouvez l'exporter comme PNG, JPEG, et SVG n'est pas là. Ensuite, vous pouvez également avoir du code, si vous passez à cette vue, vous pouvez voir que vous avez codage ici. Je ne pense pas qu'il génère tous les codes, si je vais dans cette zone, laissez-moi aller dans cette zone ici, si je sélectionne ceci, maintenant vous pouvez voir qu'il me donne l'option de l'exporter en PNG mais vous pouvez voir ici, le gradient est généré, c'est une bonne nouvelle, donc il crée le gradient et tout. Je pense que le code est parfait ici, mais dans l'ensemble, j'aime vraiment Zeppelin plus que celui-ci. Cela crée des guides dessus, sorte qu'il crée automatiquement des guides. Ensuite, vous pouvez aussi aller à la couleur et vous pouvez ramasser n'importe quelle couleur. Choisissons cette couleur, par exemple, il est donc difficile pour moi de choisir cette couleur, donc ça m'a donné la couleur ici. Ajouter comme variable, vous pouvez également ajouter une couleur avec variable, peut-être violet, quelque chose comme ça. Je ne sais pas ce que cela signifie par variable, peut-être que c'est une variable de moins de source, d'autres choses, peut-être d'autres langages de prétraitement, mais en ce moment, je n'ai pas compris ce que cela signifie. Dans Zeppelin, il a été très facile de créer l'ensemble du guide de style à partir de différents éléments ici. Maintenant, vous pouvez voir que nous avons des barres d'activité, ce sont les couches ici, toutes les couches. Je pense que c'est tout, si vous voulez l'explorer plus, vous pouvez l'explorer davantage, mais de mon point de vue, je pense que c'est tout simplement correct. Peut-être que je ne sais pas comment l'utiliser correctement, mais quand même, je pense que Zeppelin est le meilleur parmi tous ces quatre web design et développement web. C' est tout pour cette conférence, si je viens avec un nouvel outil, je vais vous mettre à jour. Alors jusque-là, au revoir et prenez soin de vous. A bientôt avec quelques mises à jour. 58. Introduction aux prototypes: Dans cette leçon, nous allons parler des prototypes et de leurs objectifs, pourquoi nous les créons, pourquoi devons-nous les créer dans notre processus de conception web, pourquoi nous avons besoin de prototypes en ce moment. Commençons. Maintenant, la première question est, que sont les prototypes ? prototypes sont essentiellement une version interactive de votre produit final, que vous conceviez une application Web, une application mobile ou un site Web, il devrait y avoir des interactions. Si vous appuyez ou cliquez sur quelque chose, il interagit et affiche un autre écran, c'est essentiellement le prototype. L' objectif de votre prototype est de tester vos produits, produits numériques comme des sites Web ou des applications mobiles avec vos utilisateurs. Parlons du but des prototypes. Maintenant, pourquoi des prototypes sont créés pour obtenir les commentaires de vos utilisateurs pour tester la facilité d'utilisation de votre site Web, si votre site Web présente des défauts de convivialité, comme si un utilisateur peut se connecter facilement, ou créer un compte facilement, ou configurer leur panier facilement. Aussi, pourquoi nous créons des prototypes, il y a une autre raison, qui est que nous avons besoin de tester nos flux et directions. Maintenant, si je clique sur le bouton Connexion, si elle va afficher une pop-up ou une nouvelle page. Cette décision sera basée sur la conception, alors comment vous allez transmettre ce message à votre développeur. Vous devez leur montrer vos flux et interactions sur vos sites Web ou applications mobiles. Parlons des types de prototypes. Il existe peu de types de prototypes, comme la faible fidélité, la haute fidélité, et il existe aussi des prototypes codés qui sont très proches du produit réel. prototypes papier sont essentiellement des prototypes statiques ou des prototypes à faible fidélité qui sont créés sur papier. Il vous suffit de dessiner différentes formes et de tester vos utilisateurs, et ils sont créés dans les premiers stades pour obtenir les commentaires des utilisateurs. Je ne vais pas approfondir ces prototypes car dans ce cours, accent n'est pas mis sur l'expérience utilisateur, mais sur les sites web ou la conception web. Voici un exemple de prototype de papier. Vous pouvez voir ici, c'est une image visuelle de Getty Fisher et c'est un prototype de papier fonctionnel très faible fidélité. Ce qu'il fait est que l'utilisateur appuie, ou clique, ou sélectionne sur un élément de menu et vous allez leur montrer l'écran suivant par vous-même. Fondamentalement, toute l'animation et l'interactivité vont être manuelles et vous allez changer l'écran et leur montrer la prochaine diapositive papier. Maintenant, dans ce cours, pourquoi nous créons des prototypes, nous devons montrer nos interactions et nos flux de notre site Web d'un bouton, une page à l'autre, ou d'un lien à une autre page. Ce sont les interactions, comme le survol de tous les boutons, et les animations, et quelque chose comme ça. Ce sont les animations et les interactions dont nous avons besoin pour montrer ou dire à nos développeurs. Il existe de nombreuses applications pour créer des prototypes. InVision App est mon préféré parmi ceux, Marvel ont également un compte gratuit, et proto.io n'est pas gratuit du tout, mais ils ont beaucoup d'animations et d'interactions différentes. Proto.io est très avancé, mais il n'a pas de compte gratuit. En outre, vous pouvez utiliser UXPIN pour créer des filaires et des prototypes. Je n'ai pas créé de prototype en utilisant UXPIN, mais j'ai utilisé InVision App et Marvel. Dans la leçon suivante, nous allons créer un prototype très simple en utilisant l'application InVision. Passons à la leçon suivante. 59. Se familiariser avec l'application d'Invision pour le prototypage: Maintenant, dans cette leçon, nous allons réellement créer un prototype à l'aide de l'application InVision. Vous pouvez voir ici, c'est le prototype que je vais vous montrer. Avec cet exercice, vous serez en mesure de créer n'importe quel type de prototype, qu'il s'agisse d'une animation coulissante ou d'un déplacement page à une autre ou d'une liste déroulante ou quelque chose du genre. Dans cet exemple, nous allons créer ce flux de sortie fondu dans la liste déroulante. C' est notre prototype pour la vue de la tablette. C' est ainsi que nous allons montrer à nos développeurs que c'est ainsi que l'animation va fonctionner. Permettez-moi de vous montrer l'interface de l'application InVision. Donc, je vais revenir à ce InVision mon tableau de bord. Voici différentes catégories comme Tous, Prototypes, Cartes et Favoris. Les conseils sont fondamentalement plus de planches. Vous pouvez également créer plus de tableaux à l'aide de l'application InVision. Nous ne sommes intéressés que par les prototypes. Si vous cliquez sur « Tous », vous pouvez voir ici, il y a différents tableaux et autres choses, plus de conseil, SimplySocial et Inside Design, et Findli Board. Ce ne sont que des planches factices. Nous allons cliquer sur « Prototypes ». Si vous allez à ce Prototype, vous pouvez voir ici. Je peux également charger plus d'écrans ou télécharger plus d'écrans si je le veux. ce moment, j'ai deux écrans, un est essentiellement le premier écran Tablet1, et le second est l'endroit où j'ai ouvert ma barre de menu de navigation. L' un est sans navigation, autre est ouvert barre de navigation. Je dois juste montrer ces interactions. Si je vais à cet écran, « Afficher l'écran », vous pouvez voir ici, il y a cinq contrôles différents ici. Vous pouvez voir le mode Aperçu, puis nous avons le mode de construction. Dans le mode de construction, vous pouvez voir ici, il y a un hotspot créé ici. C' est très facile, vous avez juste besoin de cliquer et de faire glisser comme ça, et déplacer votre hotspot ici, puis vous pouvez lier à un autre écran. Si je veux aller à un autre écran, donc je peux cliquer ici. Vous pouvez voir ici, voici deux écrans. En outre, il y a quelques autres options comme lien arrière/fermer, écran comme superposition. Je n'ai pas testé celui-ci, et peut-être dans la prochaine conférence je pourrais tester cette fonctionnalité. Ce sont peu de choses. Vous pouvez également créer un lien vers URL externe si vous voulez le lier à un autre site Web ou quelque chose du genre. Écran suivant en série. Mais j'aime aller ici parce que c'est plus spécifique. C' est ainsi que vous créez un hotspot. Vous pouvez voir que nous avons déjà créé un, et si vous cliquez dessus, vous pouvez voir qu'il est lié à Tablette/2 ou le deuxième écran. Ensuite, vous pouvez voir ici, le geste que j'utilise est « Tap » et la transition, il y a différentes transitions et effets, comme instantané, dissoudre, pousser à droite, glisser à droite. Si j'avais ma barre de navigation ici en pleine largeur, je pourrais utiliser cette poussée à gauche et afficher une section de navigation noire ici. Mais en ce moment, comme nos éléments de navigation sont très bas, nous avons donc trois ou quatre, il n'est donc pas sage de créer une zone glissante complète ici. Nous avons juste besoin de quelques éléments ici, donc une barre de navigation pop-up ou fondu out suffit. Il y a peu d'autres contrôles que vous pouvez voir ici comme ceci, maintenir la position de défilement après le clic. Nous n'avons pas besoin de sauter ce design de haut en bas. Nous avons juste besoin de maintenir notre position de défilement. Nous allons cliquer sur ce bouton. Il y a une autre option, inclure hotspot dans le modèle. Hotspot, c'est que je vais utiliser cette partie dans les six ou sept écrans. On n'a pas besoin d'un hotspot en ce moment. C' est tout à propos de ça. Nous allons cliquer sur « Enregistrer ». Nous n'utilisons pas d'en-tête fixe. C' est ainsi que notre design est comme ça. Il y a une autre option, « Mode commentaire ». Si vous passez à cela, votre équipe peut collaborer et commenter pour laisser des commentaires sur différentes parties comme peut-être vos développeurs pourraient montrer que « est-ce fondu loin animation », quelque chose comme ça. Cliquez sur « Envoyer ». Vous pouvez voir ici, c'est le commentaire que j'ai. Il y a aussi un autre « Mode Inspection ». En ce moment, je pense qu'il a besoin de mon PSD pour ça. C' est comme un extracteur Zeplin ou Photoshop, Adobe Photoshop. Il va montrer les spécifications et les différentes couches de mon fichier PSD. ce moment, c'est en mode bêta. Maintenant, je pense, ce pourrait être une version qui maintient pour les designs. C' est une nouvelle fonctionnalité. Mode Historique, vous pouvez voir quelles sont les modifications et les versions que j'ai faites pour cette conception. Ensuite, vous pouvez le partager socialement, vous pouvez télécharger plus d'écrans, vous pouvez aller à « Configurations » et paramètres. Ici, vous pouvez voir que j'utilise iPad - Blanc, ou vous pouvez utiliser iPad - Noir. Mon design commence sous la barre d'état, que vous ayez exclu la barre d'état en haut de votre conception ou non. Aussi, vous pouvez avoir un peu d'arrière-plan, transparent, premier plan, clair, sombre, d'autres options, cacher la barre d'état, et vous pouvez « Enregistrer » comme ça. Ensuite, nous avons l'état de l'écran. Quel est l'état d'avancement, par exemple si cette conception est en attente, en cours, doit être examinée ou approuvée. Ensuite, vous pouvez générer des liens Liveshare à partir d'ici. Vous pouvez le partager en direct avec les membres de votre équipe et ils peuvent le dessiner en direct. Ils peuvent faire des commentaires à ce moment-là. Vous pouvez également « Partager », et vous pouvez voir ici, il y a un e-mail de plus. Je peux taper l'e-mail ici, ou si je vais un peu vers le bas, laissez-moi vous montrer, ici, vous pouvez voir le lien de partage public. Vous pouvez cliquer ici et vous pouvez partager ce lien, et une fois que quelqu'un clique sur ce lien, ils vont voir ce design comme ça et cet écran comme celui-ci, et ils peuvent cliquer ici. Ou si ce clic ailleurs comme ça, il va montrer qu'il s'agit de la zone cliquable. C' est la partie interactive. C' est très facile. 60. Prototypage avec l'application Invision: Maintenant, comment vous allez extraire vos écrans de Photoshop. Passons à Photoshop. Je vais vous montrer très simple. On a juste besoin de deux écrans d'états différents. L' un est celui-ci et l'autre est celui-ci. Maintenant, nous sommes dans Photoshop et vous pouvez voir que nous sommes là, c'est ma conception de tablette. Ce que j'ai fait est que j'ai juste étendu un autre rectangle ici et mis mes liens ici comme ça et aussi j'ai fait cette croix avec juste en utilisant quelques lignes. Ce que je vais faire, c'est que je vais sélectionner Contrôle A, et il va sélectionner toute la toile. Ce dont nous avons besoin, c'est que nous avons juste besoin de sélectionner cette tablette. Je vais faire un clic droit dessus et cliquer sur Exporter rapide en PNG. Si je clique sur Exporter en PNG, cela va me montrer la tablette 1. C' était la tablette 2. C' est le deuxième écran. Appelons ça la tablette 2. Je vais l'enregistrer sur le bureau tout de suite. Ils sont déjà enregistrés, donc cela va me montrer une erreur. Ensuite, nous allons cacher cette navigation, et nous allons supprimer cet état de vol stationnaire. Vous pouvez voir ici, c'est planer. Je vais montrer mon menu hamburger, comme ça. Encore une fois, je vais cliquer avec le bouton droit de la souris et cliquer sur Exporter en tant que PNG et je vais l'enregistrer en tant que Tablet 1. Nous avons maintenant deux images, une cet état, puis un autre état avec la barre de menu ouverte ici. Nous allons les importer dans InVision. Revenons à InVision. Je vais vous montrer comment nous allons utiliser ça. Où se trouve mon tableau de bord InVision ? Donc c'est mon tableau de bord. ce moment, j'utilise la version gratuite, donc je vais supprimer ceci, juste pour vous montrer comment je l'ai fait à nouveau. Veuillez confirmer que vous comprenez. Je vais le supprimer comme ça. Je comprends. Commencez le premier prototype. Je vais sélectionner mon prototype. Je vais sélectionner ma tablette Android, ou peut-être iPad. Donc je vais l'appeler Wstudio Tablet View, quelque chose comme ça. Commencez. Il va créer mon premier écran. Il y a deux façons de télécharger vos écrans ici. La première est que vous synchronisez vos projets à partir de Photoshop ou Sketch ici. Vous pouvez télécharger leurs plugins. Vous pouvez commencer à partir d'ici. Il existe une extension InVision pour Photoshop. Je l'ai installé. Mais je préfère cette méthode, je vais mettre un signe plus en utilisant ce signe plus et je vais télécharger ces fichiers, deux fichiers. Je vais les sélectionner et les ouvrir, et ils vont être téléchargés ici. Maintenant, une fois que nos écrans ont été chargés ici, nous allons commencer par notre premier écran, voir l'écran. Cliquez ici et vous pouvez voir ici qu'il va le charger comme ça. Maintenant, nous allons passer à ce mode de construction, et nous allons cliquer et faire glisser sur cette zone ou cette icône de liaison ici. Donc, l'icône de hamburger, et je vais sélectionner mon écran 2. Le geste va être Tap et la transition sera Dissoudre. Vous pouvez également utiliser cet instant ou dissoudre. Je pense que dissoudre va vous donner un très bon effet de décoloration. Donc, je vais cliquer ici, Enregistrer. C' est tout, si vous voulez changer vos paramètres comme je mets noir, fond transparent, et premier plan devrait être sombre ou clair. Je vais donc utiliser Light and Save. Je vais à nouveau passer en mode Aperçu, et essayons de le tester. Cliquez ici. Il va à un autre écran, mais qu'en est-il de cliquer à nouveau ici. Maintenant, nous sommes sur le deuxième écran alors maintenant ce que nous devons faire est que nous devons aller au deuxième écran et revenir au mode de construction. Maintenant, nous sommes dans le deuxième écran, et je vais faire glisser cette zone ici comme ça, et je vais la lier à l'écran 1 qui est la tablette 1. Aller également à sélectionner le Dissoudre et maintenir la position de défilement après le clic. Maintenant encore, nous allons aller à Preview. Vous pouvez voir ici maintenant qu'il fonctionne avec le même effet que nous avons besoin. Premier écran à deuxième et deuxième à premier. Du premier au deuxième et du deuxième au premier. C' est ainsi que nous allons créer des prototypes. Vous pouvez créer des prototypes similaires, peut-être pour cet effet de survol ou peut-être un glissement vers une autre fenêtre, ou glisser vers un autre écran ou certains effets comme ça. Ou peut-être si vous voulez faire apparaître votre formulaire de conseil ici, si vous cliquez quelque chose ici et que vous montrez l'utilisateur le formulaire à remplir pour le contact. Vous pouvez le montrer en utilisant ce prototype. C' est ainsi que nous créons des prototypes. C' est très simple, très facile, et pour InvisionApp c'est très gratuit, je pense. Il s'agit donc de prototypage. Si vous avez des questions, demandez-moi. Vous pouvez également utiliser Marvel. Il a une fonctionnalité similaire, mais il n'est pas très simple. Je pense que leur facilité d'utilisation et leur expérience utilisateur n'est pas si bonne. Cette application InVision est très facile à apprendre et vous n'aurez aucun problème ou problème. Il est très intuitif et ils ont une bonne interface. Donc ça va résumer mon cours. Si j'ai des mises à jour ou de nouvelles choses, je vais l'ajouter au cours. Je vais partager avec vous les liens vers différentes applications pour le prototypage dans la prochaine leçon. Passons donc à la leçon suivante. 61. Créer des polices d'icônes personnalisées à l'aide de l'application Iconmoon: Un de mes étudiants avait des problèmes pour installer son extension Font Awesome PS, et j'ai pensé que pourquoi ne devrais-je pas vous dire l'inverse, ce qui est plus génial que d'utiliser ces extensions ? Qui utilise ICOMoon et crée votre jeu d'icônes personnalisé. Dans cette vidéo, nous allons créer notre police d'icônes personnalisée, et nous allons l'utiliser dans Photoshop pour montrer beaucoup d'icônes différentes. Pour chaque projet, que vous utilisiez des applications mobiles ou des applications web, vous avez besoin de quelques icônes, peut-être comme 20 ou peut-être 25 icônes, maximum 20 icônes, je suppose. Nous allons sélectionner 20 icônes personnalisées de différentes bibliothèques, et vous pouvez également importer des icônes SVG, que je vais couvrir dans notre prochaine leçon. En ce moment, nous allons utiliser cet iComoon. J' ai créé mon compte à ce sujet. Donc, je vais aller à cette application iComoon. Vous pouvez voir ici, il y a différentes choses en haut. Voici mon paramètre de projet. Si je vais à cela, j'ai utilisé ces icônes de commerce électronique. Je l'ai nommé moi-même. Tu peux le nommer comme tu veux. Vous pouvez créer un nouveau projet. Pour celui-ci, nous allons créer un nouveau projet, et nous allons supprimer celui-ci. Je vais l'appeler Iconset-Webdesign, quelque chose comme ça. C' est ainsi que je l'ai nommé. Allons ici sur la sélection, et je vais ajouter des icônes de différentes bibliothèques. Vous pouvez voir ici, il y a peu de bibliothèques qui sont libres et peu d'entre elles, vous devez acheter. Vous pouvez voir ici, vous avez la bibliothèque Font Awesome, vous avez des icônes Matériel, et vous avez d'autres icônes. Vous pouvez voir ici, il y a beaucoup d'options. Assurez-vous d'avoir des icônes qui ont beaucoup de glyphes. Vous pouvez voir ici, il a 845 icônes différentes, et la taille de la grille est de 24. Ils sont parfaits pour les téléphones mobiles car leur grille est de 24 pixels par 24 pixels. Ceux-ci sont pour le web principalement. Pour cet exercice, je vais ajouter cet emblématique. Je les ai ajoutés, et permettez-moi d'en ajouter plus. Je peux sélectionner autant de bibliothèques que je veux. Vous pouvez voir ici, il y a quelques icônes premium. moment, je vais ajouter cette police impressionnante et aussi ceci. Alors ajoutons un autre. Alors celle-là. Je vais ajouter ces trois icônes et bibliothèques. Pour cet exercice, sélectionnons quelques-unes des icônes, comme cet Android, aussi celui-ci, cette case à cocher, celle-ci. Maintenant, je vais sélectionner de Font Awesome. Vous pouvez voir ici, il y a des étoiles, étoile vide et remplie. Il est préférable que vous choisissiez dans une bibliothèque Icône car ils ont un style particulier. Alors n'essayez pas de mélanger deux ou trois styles différents. Peut-être que ce genre d'icônes, petites icônes peuvent fonctionner. Mais d'autres icônes, comme celle-ci, ont des courbes et des formes différentes et même des tailles de grille pour les icônes d'application. Ils ne fonctionneront donc pas très bien. En ce moment, je vais m'en tenir à ça et je vais aller à « Générer la police », ici. Maintenant, vous pouvez voir que j'ai 14 glyphes sélectionnés, qui va être de cette taille. Vous pouvez voir par ici. Ce qui est cool, c'est ce que nous allons faire, c'est que nous allons changer les clés. Sur cette zone, où vous voyez cet alphabet ou signe bizarre, vous devez supprimer ce backspace. Je vais appuyer sur ma touche A de mon clavier. Donc A, B, C, D, E, M et N. Vous pouvez également les nommer par leur icône. Si c'est coche, tu peux appuyer sur T ici, juste pour te souvenir, mais j'aime le faire comme ça. Une fois que j'ai mappé ces icônes à mes touches de clavier, je vais aller à ces options, et je vais prendre en charge Internet Explorer 8, préfixe d' icône, tout semble bien. Si vous voulez aller à cette mesure de police ou modifier quoi que ce soit, je ne sais pas grand-chose sur ces paramètres supplémentaires. Si vous voulez ajouter des métadonnées, comme URL, description, copyright, concepteur, ou si vous avez conçu vos propres icônes, vous pouvez aller ici. Je vais le nommer webdesign-cours. Appelons ça comme ça. Donc je vais le télécharger. Ça va me donner ça. Alors téléchargez-le. Je vais aller dans ce dossier, l'extraire. Ce sera un fichier zip, dossier zip. Donc, il y a un fichier de démonstration, vous pouvez voir ici. Si vous double-cliquez, vous verrez toutes les icônes utilisées dans un fichier HTML. Si vous êtes un développeur frontal, vous devez voir celui-ci. Si vous êtes un concepteur, alors vous devez aller dans ce dossier, webdesign-cours. C' est le fichier de police, le fichier police TrueType, et je vais cliquer avec le bouton droit de la souris et l'installer. Assurez-vous que votre Photoshop ne fonctionne pas en ce moment. Je l'ai installé. Maintenant, je vais passer à mon Photoshop. Je vais utiliser ce jeu d'icônes personnalisé. C' est vraiment cool. Je pense que ça peut vous faire gagner du temps. Nous allons créer juste un fichier simple. Appuyez sur T de votre clavier pour sélectionner ce texte. Je vais sélectionner ce webdesign, je pense que c'était webdesign-icon police d'ici. Donc, il est celui-ci, webdesign-cours régulier. Je vais cliquer ici, A, B, C, D, E, F, G, H, I, J, K, L, M, N. Donc ce sont les clés que j'ai utilisées, je suppose. Augmentons la hauteur de la ligne. Maintenant, vous pouvez voir que j'ai utilisé ces jeux d'icônes personnalisés dans Photoshop. Si facile. C'est tellement génial. C' est la meilleure technique. Je l'aime parce que vous pouvez simplement sélectionner quelques icônes dont vous avez seulement besoin dans votre application, votre design web, ou votre design. Si vous avez besoin comme 20, 13, ou 10 icônes, vous n'avez tout simplement pas besoin d'utiliser la taille de 500 Ko du jeu d'icônes Font Awesome. Vous avez juste besoin d'utiliser cette bibliothèque. En outre, vous pouvez voir qu'il n'y a que quatre Ko de taille maximale de fichier. Si vous chargez ce fichier SVG ou EOT à l'aide de votre navigateur Web, vous ne chargez que quatre Ko pour vos icônes. C' est donc très rapide pour vos sites Web et applications web. Il s'agit donc de créer des icônes de police à l'aide de cette application ICOMoon. Je vous verrai dans la prochaine leçon quand je vais créer une autre leçon où nous allons créer des icônes SVG, vos icônes personnalisées. Alors jusque-là, au revoir, prenez soin, et passons à la leçon suivante. 62. Utiliser et exporter des icônes SVG dans le design Web: Aujourd'hui, je vais parler de SVG ou Scalable Vector Graphics. Maintenant, que sont fondamentalement SVG ou Scalable Vector Graphics ? Ils sont essentiellement du code, je vais coder, et ils sont vecteurs, cela signifie qu'ils peuvent être étendus ou contractés à n'importe quelle taille sans les déformer ou les pixéliser. Maintenant, dans les tendances récentes du web design, ils sont vraiment utilisés dans la conception web et le développement web. Les développeurs les aimaient, vous pouvez les mettre à l'échelle comme vous le souhaitez. Vous pouvez les faire 64 pixels, 128 pixels, ou quelle que soit la taille que vous voulez. Maintenant, dans cette leçon, je vais vous montrer les deux méthodes et la meilleure méthode pour extraire le code SVG, ou Scalable Vector Graphics, afin que vous puissiez l'envoyer à vos développeurs. Si vous connaissez déjà le développement ou le codage pour les sites Web ou le développement frontal, vous allez adorer cette leçon, parce que je vais vous montrer une partie du code à la fin. Commençons. C'est une icône simple que j'ai faite dans Photoshop. Maintenant, vous pouvez voir ici qu'il n'y a que quelques formes par ici. Maintenant, si j'y vais, c' est le dossier ou le groupe. J' ai toutes ces formes contenues dans. Maintenant, si vous voulez créer un fichier SVG à partir de Photoshop, la méthode est que vous allez cliquer avec le bouton droit de la souris et exporter sous, et cette fenêtre va s'ouvrir et à partir du Format, vous allez sélectionner SVG. Maintenant, vous pouvez voir ici c'est le fichier SVG. Maintenant, nous allons l'exporter et je vais l'exporter sur le bureau. Appelons-le Icône filaire Photoshop, donc PS. Maintenant, nous l'avons exporté. Voyons où il est. C'est là. Je vais cliquer avec le bouton droit de la souris et l'ouvrir dans un texte sublime. C' est mon éditeur de code, maintenant vous pouvez voir que c'est tout du code, il n'y a rien ici. SVG ID et tout ce genre de choses, c'est tout du code. Il y a un écart entre ici, supprimons ça. Maintenant, vous pouvez voir que c'est tout le code. Maintenant, comment utiliser ce code ? Vous allez simplement le copier et le coller dans n'importe quel éditeur HTML que vous aimez. Je vais le coller ici, créons un autre div. Si vous êtes un concepteur, ne vous inquiétez pas de ce div ou de choses de codage. Je vais le coller ici, et vous pouvez voir que c'est comme ça que j'ai mon icône SVG ici. Maintenant, je ne recommande pas d'utiliser Photoshop pour extraire des graphiques SVG. Je vous recommande vraiment d'utiliser Adobe Illustrator. Parce que c'est un outil vectoriel et il va rendre vos icônes très nettes et très agréables. C' est ainsi que j'ai utilisé l'icône de Photoshop SVG, et je vais la supprimer dès maintenant. Passons à cet Adobe Illustrator. Maintenant, au milieu de cet exercice, je vous ai montré mes icônes, utilisé le fichier Adobe Illustrator, où j'ai toutes mes icônes. Maintenant pourquoi j'ai utilisé Adobe Illustrator pour obtenir toutes mes icônes dans une seule taille et un seul endroit parce que, en fin de compte, je les extrait normalement dans SVG ou Scalable Vector Graphics. Maintenant, l'avantage est, je peux les mettre à l'échelle où mon développeur web, il peut changer les couleurs, il peut les mettre à l'échelle. Tout ce qu'il veut. Maintenant, les étapes sont, d'abord, vous allez sélectionner cette icône, tout sélectionner, puis vous allez aller à l'objet et développer. Assurez-vous d'étendre, de remplir et de caresser tout. Maintenant, comment l'exporter vers SVG ? Maintenant, nous allons aller à Fichier, et aller à Exporter, et exporter pour les écrans. C' est une toute nouvelle fonctionnalité, vient de venir dans Adobe Illustrator. Je vais aller à ce panneau d'exportation, et je vais le faire glisser ici comme ça. J' ai un Set 1, je peux le renommer Icône Wireframe Illustrator, puis je vais appuyer sur Exporter et il va exporter, il suffit de sélectionner un dossier et vous allez l'exporter. Sélectionnez le dossier, et nous l'avons exporté sur le bureau, et vous pouvez voir qu'il s'agit du code généré par Illustrator. Il est déjà minimisé. Vous pouvez voir ici que c'est très gentil. Maintenant, si vous êtes un codeur, vous pouvez voir, vous pouvez contrôler les couleurs de remplissage à partir d'ici. Ce sont cinq classes pour cinq formes différentes. Vous pouvez voir ce sont les couleurs utilisées dans ces, cette icône. Maintenant, laissez-moi vous montrer comment j'ai utilisé ce code dans mon éditeur de code. Maintenant, vous pouvez voir ici est le même code que nous avons généré quelques secondes en arrière, et vous pouvez voir ici il y a trois tailles. Si vous voulez augmenter la taille, vous pouvez aller de l'avant, vous pouvez augmenter la taille à ce que vous voulez. Maintenant, je vais augmenter la taille de la plus grande icône. Vous pouvez voir à quel point ils sont propres et croustillants. Leurs coins, tout, rien n'est pixélisé. C' est la chose que nous pouvons utiliser dans les graphiques vectoriels SVG et évolutifs. Ils peuvent être mis à l'échelle, ils sont tous basés sur le code. Ce sont différents rectangles et formes. Ils sont faits de formes avec codage. Maintenant, laissez-moi vous montrer la magie, vous pouvez utiliser n'importe quelle couleur ici. Je vais changer le jeu de couleurs en ce moment avec toutes les classes ici. Maintenant, vous pouvez voir comment j'ai changé toute l'icône. Si je veux changer même la bordure extérieure, vous pouvez voir ici, j'ai changé toute la palette de couleurs de l'icône. Maintenant, c'est la raison principale via les graphiques vectoriels évolutifs sont si populaires dans ces jours. Je pense que beaucoup de gens les utilisent. En outre, ils ont très petite taille, accord, peut-être trois ou quatre Ko. L' autre caractéristique qu'ils ont est des animations. Vous pouvez voir ici, ils peuvent être estimés comme ça. Ce crocodile par ici. Quand je survole, tout est basé sur SVG. Il ouvre sa bouche vraiment agréable. J' adore ces animations SVG. Vous pouvez voir quelques autres exemples ici. Ce sont des animations SVG. C' est aussi un joyeux anniversaire poly, et laissez-moi vous montrer à quoi ils vont ressembler quand ils se chargeront. C' est vraiment agréable effet de chargement, alors vous pouvez voir ici comment cette animation fonctionne. C' est également SVG animé. Vous pouvez voir ce sont aussi des animations SVG, horloge SVG, vraiment sympa. Laissez-moi vous montrer cette icône. Chaque fois que je clique dessus, vous pouvez voir que c'est une animation très cool. J'adore ça. Il y a peu d'animations comme des animations de dessin que vous pouvez faire avec ces visionneuses de bibliothèques, et il y a beaucoup de bibliothèques que vous pouvez voir. Laisse-moi te montrer. Maintenant, vous pouvez voir comment cela s'est transformé. Rejouons celui-là. Maintenant, ce SVG est vraiment puissant. Il y a peu de méthodes que vous pouvez aller avec eux. Vous pouvez également créer un sprite SVG de 10 ou 50 icônes. Vous pouvez les utiliser facilement avec vos pages Web. Vous pouvez utiliser l'outil de lune icône que j'ai partagé avec vous dans la dernière leçon, amd vous pouvez voir ce que ici dans les paramètres, vous pouvez créer ce sprite SVG. Je vais inclure le lien que vous pouvez rechercher en ligne, Google en ligne pour svg-sprite, il y a un très bon article sur les astuces CSS. Il y a des tonnes de choses que vous pouvez faire avec ces icônes SVG. Ces graphiques SVG sont très puissants, vous pouvez voir ici comment j'ai changé tout le schéma de couleurs et tout ces icônes d'ampoule. La seule chose dont vous devez vous souvenir est que lorsque vous l'utilisez avec cet illustrateur, vous allez sélectionner la forme entière et vous allez l'étendre une fois. Ensuite, vous pouvez le faire glisser ici. Comme ça, et je vais le nommer filaire, et nous allons l'exporter. Je vais l'exporter sur le bureau filaire, et maintenant je vais copier tout le code, contrôler A, contrôler C, et je vais le coller dans mon éditeur ici. Supprimons celui-ci et collez-le ici, comme ceci. Maintenant, il utilise essentiellement les mêmes classes, donc il ramasse les mêmes couleurs ici à partir de cette icône que vous pouvez voir ici, ce sont les couleurs. Si j'essaie de changer quelque chose, vous pouvez voir qu'il va changer les couleurs dans les deux formes. Il obtient spécifiquement des couleurs d'ici, donc ce sont les mêmes classes. Si je veux changer les classes des couleurs, je peux les renommer ici. Peut-être CLZ ou quelque chose comme ça. Maintenant, c'est à vous de choisir. Si vous êtes un codeur ou des programmeurs, vous pouvez le faire, c'est très facile. Vous avez les cours, vous pouvez les apprivoiser comme vous le souhaitez. Maintenant, c'est la principale raison pour laquelle j' aime vraiment ces SVG chaque fois que vous concevez une application ou quoi que ce soit, ou peut-être la conception web pour WordPress pour notre page Web, une page de destination. Essayez d'utiliser les icônes SVG autant que vous le pouvez. Ils peuvent vraiment réduire la taille de la page. Ils peuvent, être animés. Ils peuvent avoir des angles très nets et tout, ils ne vont pas être pixélisés sur appareils rétiniens ou même si vous le visualisez sur un iMac ou 27 pouces, ils vont avoir l'air vraiment sympa. Il s'agit de SVG, animations SVG en utilisant des icônes SVG. Tout est sur SVG et animations SVG, tout ce que vous devez me demander, Vous pouvez me poser dans les questions dès que je reçois plus de mises à jour ou que vous voulez mettre à jour ce cours, Je vais ajouter plus de conférences. Jusque-là, essayez de rejoindre ma page Facebook et aussi abonnez-vous à ma chaîne YouTube, prenez soin de vous et à bientôt. 63. Guide de style en 2020, utilisant Figma: J' ai créé ce cours il y a presque trois ans. Maintenant, depuis lors, beaucoup de choses ont changé et beaucoup de gens qu'ils utilisent Figma et Adobe XD et Sketch. Ce sont les derniers outils pour la conception web et la conception d'interface utilisateur. J' ai des cours distincts pour l'outil Figma et l'outil Adobe XD. Ici, je vais vous dire comment vous pouvez utiliser différents plugins, comment vous pouvez utiliser différents composants, comment vous pouvez construire vos guides de style américain en utilisant Figma et Adobe XD. Commençons. Maintenant, j'ai déjà ouvert ma Figma. C' est mon dernier projet et vous pouvez voir ici est mon design. J' ai en fait trois pages. Laisse-moi zoomer. Laissez-moi vous montrer comment j'organise mes fichiers et construit mes différents prototypes et tout ici. Chaque fois que je conçois, je conçois principalement la première page, par exemple cette page de destination, puis je commence à créer des composants. Composants est en fait la partie réutilisable dont nous avons discuté dans Photoshop, Smart Objects ou des choses comme ça. Mais je pense que Photoshop n'est pas un bon outil pour le design web de nos jours. Peut-être que vous pouvez les utiliser pour une conception de page de destination unique, mais pas pour un site Web où nous avons trois ou quatre pages. Chaque fois que je conçois, j'ai normalement mes fichiers de conception comme ceci. Dans toute cette toile ici, j'ai créé plusieurs tableaux d'art. Nous avons des tableaux d'art de tablette, des tableaux d'art de version mobile, et nous avons des tableaux d'art de bureau ici sur la droite. Maintenant, vous pouvez voir chaque fois que je dois gérer, je gère mes guides de style ici. Je crée différents composants comme vous pouvez voir ici des composants réutilisables. Nous avons ces boutons ListBig, et ensuite nous avons deux boutons. Laissez-moi vous montrer, un peu zoomant. Voici mes boutons. Voici un élément de liste, voici mes éléments de formulaire de type. Ce sont quelques autres composants ici, des composants plus gros. Ici, j'ai ce logo et je pense que c'est toute la barre de menu ici avec logo. Voici mes échelles de couleur. J' ai utilisé un outil en ligne pour créer ces échelles de couleur. Mais si vous voulez créer une échelle de couleurs comme celle-ci à l'intérieur de Figma, il y a un plugin. Laisse-moi te montrer. Si je vais à « Recherche », appelons le générateur d'échelle de couleur. Nous avons un plugin appelé générateur d'échelles de couleur, et si vous cliquez sur n'importe quelle couleur, par exemple, laissez-moi créer un autre rectangle ici. Créons ce rectangle et choisissons n'importe quelle couleur. Par exemple, je vais sélectionner celui-ci. Je veux une échelle de couleurs générée à partir de ce rectangle ici. C' est ma couleur moyenne, ou vous pouvez dire point de départ. Maintenant, je vais utiliser mon plugin appelé générateur d'échelle de couleur. Vous pouvez sélectionner les étapes, par exemple 6, 10, 8, donc je vais cliquer sur 8 ici. Vous pouvez voir que j'ai toutes mes couleurs ici, et elles ont été nommées comme vous pouvez le voir ici, rectangle 15/10, 20, 30. Ce sont des intensités différentes, allant des tons plus clairs aux tons plus foncés. C' est ainsi que je vais construire mon jeu de couleurs sur mon guide de style ici. Ceci est une autre page, j'utilise une page séparée. Pour mon guide de style, vous pouvez voir ici, donc je peux facilement suivre ou changer quoi que ce soit ici si je le veux. Tous mes composants, tous mes styles, tous mes boutons, ma liste, mes couleurs, ils vont être ici. Chaque fois que vous concevez dans Figma, lorsque vous êtes sûr que vous n'avez pas besoin de changer, vous avez conçu ceci, il suffit de créer un composant. De même pour ces textes, nous allons créer des styles de texte. J' ai discuté de cela dans ma classe Figma, et vous pouvez voir ici j'ai créé ce style. Si je veux créer un style pour celui-ci, par exemple ce texte, je peux cliquer ici et appuyer sur ce bouton « Plus » et créer un nouveau style ici. De même, vous pouvez voir ici, je les ai nommés barre oblique de bureau, ou barre oblique de tablette. Nous avons différents titres ici. Vous pouvez voir la rubrique 1. À l'intérieur de la rubrique 1, j'ai bureau, tablette, mobile. Ce sont trois styles différents pour mon texte. De même, permettez-moi de vous montrer mon flux de travail dans Adobe XD. Maintenant, dans Adobe XD, vous pouvez voir que c'est mon propre site Web, mon propre projet. Ce que je fais ici, c'est que je crée un guide de style comme celui-ci. J' ai des tableaux d'art séparés ici, par exemple ces couleurs. Ensuite, nous avons Type Scale. Ensuite, nous avons des styles de texte. Ici, nous avons l'échelle de type. En plus de cela, vous pouvez voir ici ce sont différents styles. Par exemple, il s'agit d'un lien. C' est encore une fois un lien. Il s'agit d'un style de citation. Encore une fois, nous avons la même chose sur le fond sombre. Ensuite, j'ai des formulaires de boutons et quelques icônes ici que vous pouvez voir ici. Encore une fois, j'ai créé des composants. Vous pouvez voir ici, ce sont quelques autres composants. Ce sont tous des composants maîtres. Vous pouvez voir ici, laissez-moi zoomer et vous montrer tout mon guide de style ici. Mon guide de style est en différentes sections : couleurs, échelle de type, puis nous avons des boutons, des éléments de formulaire. Ensuite, j'ai toutes les illustrations sur différents milieux. Donc c'est tout. Chaque fois que vous créez votre guide de style, assurez-vous abord de créer au moins une de votre page, puis continuez à créer des composants et ces composants seront dans vos ressources ici. J' ai ajouté toutes ces couleurs que j'ai utilisées ici dans mes actifs. Si vous voulez les déplacer, vous pouvez les déplacer. Comme vous pouvez le voir, vous pouvez glisser et déplacer comme ça. Par exemple, c'est l'orange, donc je vais le déplacer vers la section orange ici. Si vous avez comme celui-ci vert ou gris, essayez de les nommer correctement. Peut-être que vous pouvez les nommer par leur fonction. Par exemple, comme celui-ci, c'est ma couleur secondaire, je peux le nommer comme ceci. C' est ma couleur primaire, appelons-la couleur primaire. Tu peux faire quelque chose comme ça. C' est plus facile pour vous de vous en souvenir. Laissez-moi vous montrer mon design en fait. C' est le design. Cachons ça. C' est le design. Vous pouvez voir que c'est mon bouton J'ai déjà créé un composant pour ce bouton. Ensuite, nous avons beaucoup de styles de texte ici. Ce sont mes couleurs. Vous pouvez voir l'arrière-plan et l'écran en haut. C' est en fait 100 pour cent. C' est ainsi que j'utilise réellement des guides de style dans ma conception. J' ai des tableaux d'art séparés remplis de ces couleurs, échelle de type, boutons, et tous les différents composants, donc je dois utiliser encore et encore y compris mes illustrations ici. Je peux simplement faire glisser et déposer les illustrations. Vous pouvez également les ajouter dans vos actifs ici comme vous pouvez le voir ici. Ici, j'ai différents boutons ici. Ce sont quelques composants comme ce composant de cours. Ensuite, nous avons différents boutons. Laisse-moi zoomer et te montrer. Vous pouvez voir que c'est le bouton, et nous avons différents champs de texte. C' est vraiment facile dans ces nouveaux outils de conception d'interface utilisateur qui sont Figma, alors nous avons Adobe XD, puis nous avons Sketch. Il suffit de créer des composants qui vont être réutilisés. Vous devez créer vos styles de texte pour différentes échelles de texte sur des arrière-plans blancs et sombres, et c'est tout. Vous devez avoir tous ces éléments et vous pouvez les réutiliser encore et encore dans vos conceptions. J' espère que ça va vous remplir. Ce cours a été enregistré il y a trois ou quatre ans. Pour moi, je crois que ça vieillait. C'est ma réponse. J' ai enregistré quelques leçons pour vous les gars. J' espère que vous en profiterez et si vous avez des questions, vous pouvez me poser. Il suffit d'oublier que vous devez créer votre guide de style dans Photoshop ou fichier PSD, créer dans Adobe XD, Figma, ou tout outil. Suivez ce cours et montrez-moi ce que vous avez. Nous nous retrouverons dans une autre leçon. Jusque-là, prenez soin et au revoir. 64. Transfert dans Figma et Adobe XD 2020: Dans cette vidéo, je vais vous montrer comment je passe réellement en utilisant Figma et Adobe XD. Maintenant, dans mes vidéos précédentes, mes anciennes vidéos, je vous ai parlé de Zeplin, Avocode et tous ces différents plug-ins, pour remettre votre design à vos codeurs. Maintenant, dans cette vidéo, je vais vous montrer comment je le fais avec Figma et Adobe XD. Ce sont les derniers outils, donc je suis en train de mettre à jour de nouvelles vidéos, en ajoutant de nouvelles vidéos à ce cours. J' espère que vous apprécierez cela. Commençons et montrons mon processus, comment nous utilisons Zeplin et comment nous utilisons Figma pour donner du code ou des spécifications à nos développeurs. Commençons maintenant. Maintenant, si vous êtes sur Figma, comme vous pouvez le voir ici, vous n'avez pas besoin d'utiliser des outils tiers pour afficher votre code ou donner vos spécifications à vos développeurs. Vos développeurs là-bas, vous devez les inviter à votre projet. Par exemple, comme celui-ci, vous pouvez aller par ici. Voyons voir, par exemple, j'ai ici un autre designer. Ici, de même que vous pouvez, ici nous l'avons. Je pense que j'ai partagé, vous pouvez le partager avec une autre personne, et vous pouvez simplement écrire l'e-mail de votre codeur ou copier le lien et ils peuvent voir les spécifications. Ils ont juste à faire, c'est qu'ils doivent aller à cet onglet Inspecter ici. Si vous cliquez ici, vous pouvez voir, dans l'onglet Inspecteur, nous avons toutes les propriétés : hauteur, haut, gauche. Le placement de cette rubrique ici. Ensuite, nous avons le contenu, ils peuvent copier le contenu à partir d'ici. Ensuite, nous avons cette typographie. En bas, vous pouvez voir que nous avons le code CSS. Vous pouvez, encore une fois, le traduire sur iOS et Android aussi. C' est une fonctionnalité vraiment cool. Je pense que Figma est en fait une preuve future. Si je dis à quelqu'un que vous devez passer à un outil qui est créé pour les générations futures, je pense que je dirais que c'est Figma. J' ai un cours séparé sur Figma. Si vous êtes intéressé, vous pouvez prendre ça. Vous pouvez simplement copier ceci. Essayons de copier ceci ici et voir si ça l'a été, oui. Si vous essayez de copier ici, vous pouvez voir qu'il est en train créer un style entier ici comme ceci. C' est vraiment sympa. Il a tout, mais pas cette couleur ici. La couleur est manquante. Je pense que la couleur est par ici. Si on descend ici, je pense que c'est tout le code où on a la couleur et tout. Essayons de copier ceci, et collez-le ici. Nous n'avons pas besoin de position et de tout ici, nous avons juste besoin de ça et il a tout. C' est mieux, cela a de la couleur avec elle. C' est ainsi que vos codeurs peuvent copier la section CSS à partir d'ici. Ensuite, parlons des icônes ici. Vous pouvez voir que j'ai quelques icônes ici, comme ce téléphone, ce document ici. J' ai essayé d'utiliser le format SVG afin de pouvoir facilement les donner à mon développeur. Je leur donne toutes ces icônes au format 24 x 24 pixels. Au format SVG, ils peuvent les utiliser ici. De même pour toutes ces images, je les ai extraites. Vous pouvez voir si vous allez à Design, et si vous passez ici à Exports, vous pouvez les exporter en JPG, PNG, SVD ou PDF. J' ai utilisé tous ces logos et les ai exportés et remis à mes développeurs. Il est plus facile pour eux d'utiliser ces images. Ne mettez pas de pression sur vos développeurs. Vous devez les faciliter. Vous devez extraire toutes ces images et leur donner afin qu'ils puissent facilement coder cela. Vous pouvez voir ici nous avons quelques autres icônes illustratives, ce logo. C' est encore une fois, je vais exporter. Je l'ai déjà donné dans un format SVG. Vous pouvez également exporter ce fichier depuis Adobe Illustrator directement au format SVG. C' est ainsi que j'utilise cet onglet Inspecter ici pour donner à mes codeurs tout ce dont ils ont besoin. Normalement, je partage ce document avec eux ou je les invite à ce projet. C' est tout ce dont vous avez besoin. Il suffit de cliquer sur « Partager ». Vous pouvez voir ici, voici mon développeur, Tayyab Hanif. Ce sont mes clients ici, Manny Vetti, et quelques autres membres de l'équipe. C' est un projet pour eux. J' ai fait ce projet avec ces codeurs et ces clients. C' est mon flux de travail dans Figma. Passons à Adobe XD maintenant. Dans Adobe XD, j'utilise Zeplin. Zeplin est un excellent outil pour partager vos spécifications avec vos développeurs. Une autre façon est que si vous cliquez sur n'importe quel tableau d'art et que vous pouvez aller ici, où est le Partager ? Allez dans l'onglet Partager, et vous pouvez le nommer comme peut-être la page de destination, quelque chose comme ceci. Dans les paramètres, vous allez cliquer sur ce développement, donc Exporter pour Web. Actifs téléchargeables, si vous voulez cliquer, ils peuvent télécharger des ressources à partir d'ici. Mais je pense que je ne le recommande pas. N' importe qui avec le lien, donc si vous créez ce lien, de vos codeurs, vos développeurs, ils peuvent utiliser ce lien pour voir les spécifications de développement sans utiliser de plug-in ou tiers aussi comme Zeplin. C' est une façon, par exemple, comme celle-ci. Je vais l'ouvrir maintenant. Voyons ce qu'on a ici. Adobe améliore constamment cet outil. Voyons ce qu'on a ici. Vous devez cliquer sur ce code ici sur la droite. Vous pouvez voir que nous avons toutes les couleurs, nous avons tous les styles différents utilisés. Vous pouvez également cliquer sur ce code. Ce sont en fait mes styles de couleurs, ou vous pouvez dire mon guide de style. Vous devez double-cliquer ici. Une fois que vous double-cliquez sur un élément, vous pouvez voir que c'est en fait le code et il utilise réellement des variables pour les développeurs. Vous devez les nommer très correctement. Comme vous pouvez le voir ici, police sans nom, style de police, normal, normal, var. Je n'aime pas ce style de codage. Je pense que c'est vraiment déroutant pour beaucoup de développeurs. L' autre façon est, voyons comment, quel est l'inverse ? Dans l'onglet Création, sélectionnez ce tableau et accédez à Exporter. J' ai déjà installé Zeplin. Cliquez sur Zeplin, et il vous montrera l'écran du plugin Zeplin, comme vous pouvez le voir ici. Il vous montrera la sélection quel que soit le projet que vous avez sélectionné et exporté. Une fois que tu l'as exporté, laisse-moi te montrer mon Zeplin ici. Une fois que vous avez exporté, vous pouvez voir tous ces écrans sont ici dans ce tableau de bord Zeplin. Si je clique dessus, et si je clique sur celui-ci, c'est le chargement. Si je clique sur celui-ci, vous pouvez voir ce sont mes couleurs, sont mes styles de titre, et c'est le code CSS. C' est bien mieux. C' est un code direct. Vous pouvez voir ici, très gentil, très facile. Pourtant, ils utilisent la marine var. C' est plus facile, car je peux facilement ajouter des couleurs ici. Par exemple celui-ci, vous pouvez voir qu'il a été ajouté. Vous pouvez cliquer et accéder au guide de style. Vous pouvez voir que j'ai déjà créé le guide de style. Il a mes textiles, il a mon espacement et ma disposition. Je n'ai pas utilisé de composants. Je n'ai pas exporté de composants. Lien vers le guide de style si vous avez créé un autre guide de style spécifique pour votre fichier distinct de conception. Vous pouvez le lier ici. Je préférerais simplement aller créer ces palettes de couleurs et des catalogues de style de texte. C' est assez pour moi. Je donnerai tous les différents atouts, l'icône et tout séparément à mes développeurs. De même, vous pouvez voir ici, allumons la grille. Vous pouvez voir qu'il a une très belle option d'allumer et d'éteindre la grille, vous pouvez voir. Si vous avez créé à l'aide de grilles, c'est une bonne option. Votre développeur peut voir combien de grilles ont été allouées. Par exemple, ce continent ici, 1, 2, 3, 4, 5, 6 grilles ici. C' est presque dans les 50 pour cent ici. C' est ainsi que j'utilise et exporte normalement mes designs. J' utilise Zeplin avec Adobe XD et Figma. Je n'ai pas besoin d'utiliser Zeplin, bien que vous puissiez installer Zeplin comme plugin ici. Si vous voulez installer Zeplin ici, vous pouvez aller à Community, Plugins, et vous pouvez trouver Zeplin ici. Un plugin, il a déjà été installé. Si vous voulez télécharger quelque chose sur Zeplin, vous pouvez l'utiliser en utilisant Figma aussi. Mais je préférerais aller à cet onglet Inspecter. C' est vraiment pratique, c'est vraiment facile. Par exemple, vous pouvez voir que je peux facilement voir mon CSS juste avec un simple clic. C' est tout. C'est mon nouveau processus. C' est ma nouvelle méthode de main off pour les développeurs utilisant Zeplin et Figma. J' espère que vous avez apprécié cette leçon. Si vous avez des questions, vous pouvez toujours me poser. On se retrouve dans une autre leçon. D' ici là, prenez soin de vous. Au revoir. 65. Prototypage sur Adobe XD et Figma 2020: Dans cette vidéo, je vais vous parler de la façon dont vous pouvez prototyper vos sites Web ou vos idées de design web en utilisant Figma ou Adobe XD. Donc je vais vous montrer les outils que vous pouvez utiliser, Catch ou autre chose. Ce cours porte en fait sur le processus et la façon dont vous pouvez faire différentes choses, ou montrer vos prototypes ou représenter des prototypes à vos développeurs ou à vos clients. Maintenant, si vous voulez un prototypage avancé, je peux aussi vous montrer un outil vraiment avancé. Si tu veux y aller, tu peux y aller. Mais je pense que pour le web design, prototypage Figma et les pouvoirs de prototypage Adobe XD sont plus que suffisants. Commençons et voyons comment j'utilise réellement différents prototypes et comment je crée réellement dans Figma et Adobe XD. Maintenant, si vous regardez ces fichiers Figma, vous pouvez voir ici. Si nous devons aller à ce prototype onglets pour voir comment tous ces différents écrans ont été liés. En fait, j'ai montré ce prototype à mon développeur. Ces boutons vont en fait vers ce formulaire ici. Laisse-moi te montrer en fait. Il suffit de cliquer sur l'élément que vous avez et de lier à la page souhaitée que vous voulez. Ensuite, ici, vous pouvez cliquer sur l'interaction que vous voulez Sur Click, Sur Glisser, En appuyant sur, ou tout ce que vous voulez. Dans l'animation, nous allons sélectionner Dissoudre ou Smart Animate, ou tout simplement Instant. Vous pouvez bien voir, ici, nous avons deux interactions différentes, Hover et cliquez sur « Hover », il va se comporter autre chose, sur clic, il va naviguer vers la forme de texte en un instant. Donc c'est tout. Si vous voulez voir le prototype, vous pouvez partager le prototype avec vos clients, vos développeurs, car ils vont vraiment en avoir besoin. Ils ne savent pas comment coder cela. Vous pouvez voir, par exemple, cette animation de vol stationnaire, cela a été fait en utilisant seulement Figma. De même pour ce bouton, vous pouvez voir ici. De même, si nous cliquons sur ce bouton, je pense que c'était celui-ci. Voici un autre de ces boutons. Ceux-ci vont se fondre à une couleur plus foncée. Il s'agit d'une simple animation de vol stationnaire. De même, si vous cliquez ici, vous pouvez voir cela apparaît et si vous cliquez ici, son retour en arrière. C' est un autre que j'utilise pour le montrer à mes développeurs. De même, dans Adobe XD, vous pouvez faire de même avec l'onglet Prototype ici. Vous pouvez essayer de lier différents écrans, par exemple, comme celui-ci. Ça va être mon écran d'accueil. Donc je vais cliquer ici. Pour cette navigation en haut ici, si je clique sur ce « Cours à venir » ou peut-être parcourir les cours, je peux le lier à cela ici sur Type, Transition. Je pense que j'irai avec cette simple transition. Utilisons les cours Page, Easy Out, Easy In, trois secondes. Laisse-moi te montrer le prototype maintenant. Si je clique sur « Parcourir les cours », vous pouvez voir que cette page a été chargée dans cette Parcourir les cours. Pourquoi cette zone a été coupée, je ne suis pas sûr. Voici une technique simple pour créer un prototype simple. Vous pouvez faire la même chose avec le survol ici dans Adobe XD. Ils ont des états différents. Si je vais à « Conception » et cliquez sur. En fait, je crois que je l'ai déjà prototype. Si vous pointez dessus, vous pouvez voir que c'est l'effet que j'ai montré à mon développeur en fait, que c'est ainsi que vous allez animer ce bouton. C' est très facile. Il suffit de cliquer ici. Vous pouvez voir que nous avons Tap et Hover. Sur le survol, vous allez sélectionner le « Hover State ». Vous pouvez voir ici, Hover State a été sélectionné. Si vous allez à « Design », vous pouvez voir qu'il s'agit d'un composant. Lorsque vous créez un composant, vous pouvez créer un logiciel d'état différent. Vous pouvez créer plus d'états. Par exemple, Disabled State ou quelque chose comme ça. Si vous voulez l'animer en utilisant prototype, vous pouvez utiliser le commutateur entre ces états ici. Vous allez changer les couleurs et toutes les choses différentes pour cela désactivé. Par exemple, c'est mon désactivé. Si je vais ici et essaye d'utiliser cet état par défaut sur le vol stationnaire, destination va être désactivée. Donc maintenant, j'ai désactivé ceci. Laisse-moi voir. Vous pouvez voir maintenant si je survole sur ce bouton, c'est un bouton désactivé. C' est ainsi que vous allez montrer à vos développeurs que c'est mon prototype de base. C' est ainsi que l'ensemble du flux du site va fonctionner et des choses comme ça. Il s'agit d'utiliser Adobe XD et Figma pour le prototypage de votre site web, très simple, très simple. Vous pouvez même conserver les positions de défilement. Vous pouvez avoir différentes navigations qui vont coller à leur position. Tout le reste va bouger. Ce sont les capacités de ces outils de nos jours. J' ai donc pensé que je devrais mettre à jour ma leçon. J' espère que vous avez apprécié et appris quelque chose de nouveau. Si vous avez des questions à me poser, nous nous retrouverons dans une autre leçon. Jusque-là, prenez soin et au revoir.