Comment configurer macOS pour le Web Design

1. Bienvenue au cours: Dans ce cours, je vais vous montrer comment configurer votre Mac pour la conception web. Commençons. Hé, tout le monde. Bienvenue. Je m'appelle Adi Purdila, et je suis concepteur web et développeur. Maintenant, si vous commencez tout juste dans le design web, cette classe vous montrera tous les outils dont vous avez besoin pour être rapide et efficace. Si vous êtes un concepteur plus expérimenté, alors vous pouvez trouver des applications qui sont en fait très utiles mais vous n'en aviez aucune idée. Dans ce cours, je vais vous montrer les applications que j'utilise presque tous les jours. Ils ont fait une différence significative pour moi et je crois que ce sera la même chose pour toi. Je vais vous montrer quel logiciel de conception j'utilise et aussi quelques alternatives, ainsi que des avantages et des inconvénients courts pour chacun. Vous verrez des applications étonnantes pour choisir des couleurs, créer des palettes de couleurs, et également vérifier le contraste entre les couleurs afin que vous puissiez vous assurer que vos designs sont accessibles. Je vais également vous montrer comment organiser, mettre en signet et prévisualiser vos polices beaucoup plus facilement ; c'est si utile pour les concepteurs car c'est un gain de temps énorme. Vous apprendrez également à gérer et à organiser vos icônes afin que vous puissiez toujours trouver rapidement celles dont vous avez besoin. Dans les deux dernières leçons, je vais vous montrer comment mesurer n'importe quelle distance ou dimension sur l'écran et aussi comment prendre de superbes captures d'écran et les partager avec votre équipe ou vos clients. Maintenant, cette classe s'adresse principalement aux utilisateurs de Mac, mais je pense que vous devriez toujours la regarder même si vous utilisez Windows parce que vous pourriez trouver des raisons convaincantes pour passer à macOS pour la conception Web. La leçon numéro 2 est dédiée à vous, à l'utilisateur Windows, et c'est là que je passe mon raisonnement pour choisir macOS sur Windows pour ce type de travail. Si vous êtes un utilisateur de Mac, vous pouvez sauter directement dans la leçon numéro 3 où je vais vous montrer quel logiciel de conception j'utilise pour créer tous mes designs de nos jours. Es-tu prêt ? Commençons. 2. Un mot rapide pour les utilisateurs Windows: Bienvenue à la première leçon de ce cours. Avant d'entrer dans le contenu principal, je voulais adresser cette vidéo rapide à tous les utilisateurs de Windows qui nous regardent. Comme vous le savez probablement maintenant, cette classe concerne la configuration de macOS pour la conception web. Ça ne veut pas dire que je n'aime pas Windows ou que je ne t'aime pas, ce n'est pas vrai. J' ai grandi avec Windows et PC et j'ai deux PC à la maison sous Windows et Linux, et dans l'ensemble, j'adore ça. Cependant, je crois que pour ce type de travail, pour la conception web, macOS est meilleur que Windows. Cela ne signifie pas que vous ne pouvez pas utiliser Windows pour cela, vous le pouvez absolument. Vous pouvez concevoir n'importe quelle interface, n'importe quelle interface utilisateur que vous voulez sur les deux plates-formes. Mais je pense que vous allez passer un moment plus facile et plus agréable à faire ça sur macOS. C' est tout ce qu'il y a. J' ai en fait de très bonnes raisons de croire ça. La raison principale est la multitude d'applications que vous pouvez télécharger et utiliser, dont la plupart sont gratuites. Toutes ces applications sont incroyablement utiles et la plupart d'entre elles sont uniques, ce qui signifie qu'elles n'ont pas de contrepartie Windows, ou si elles le font, ce n'est généralement pas aussi bon. Avec les applications macOS que j'utilise, tout fonctionne comme prévu et c'est quelque chose que j'apprécie beaucoup. Une autre bonne raison d'utiliser macOS est l'application Sketch qui est uniquement Mac. C' est toujours l'application de conception numérique préférée pour beaucoup de gens, et je me retrouve toujours à atteindre pour elle de temps , même si je suis principalement un utilisateur de Figma de nos jours. Je parlerai plus de Sketch dans la prochaine leçon. J' aime aussi la fiabilité des ordinateurs macOS et Mac en général. Je pense que les gens devraient y prêter plus d'attention parce qu'il est très important que vous ayez un équipement sur lequel vous pouvez compter, surtout si c'est pour votre entreprise. Je reçois rarement des plantages dans macOS. Comme je le disais précédemment, tout fonctionne comme prévu du point de vue matériel et logiciel. En parlant de matériel, je pense qu'Apple a actuellement les meilleurs écrans grand public sur le marché. Ici, je parle de leurs célèbres présentoirs Retina. Actuellement, j'ai deux Mac avec écrans Retina, et c'est l'un d'eux. Laisse-moi te dire une chose. Une fois que vous aurez travaillé sur un écran Retina, vous ne voudrez plus jamais utiliser un autre écran, je vous le promets. Cela est particulièrement vrai pour le design. Ces écrans sont très lumineux, et ils sont également très haute résolution, donc le texte et tout le reste sur eux est vraiment incroyablement net. Maintenant, si vous envisagez de passer à macOS, il n'y a pas de meilleur moment que le présent. J' enregistre ce cours en janvier 2021. a quelques mois, Apple vient d'annoncer leur nouvelle puce M1 et trois ordinateurs qui l'utilisent. L' un d'entre eux est un Mac Mini au prix d'environ 700$. Compte tenu du rapport prix/performance, c'est en fait une bonne affaire et c'est ce que je vous recommande obtenir si vous voulez commencer à utiliser la plate-forme Mac. Maintenant, si vous êtes un utilisateur de Windows, et que vous ne voulez pas changer, parlons de cela. Postez un commentaire dans la zone de discussion et peut-être que je peux vous aider d'une manière ou d'une autre. Peut-être que je peux recommander un outil pour Windows qui vous rendra la vie un peu plus facile. S' il y a suffisamment d'intérêts, j'envisagerai même de faire une classe distincte sur la façon de configurer Windows pour la conception Web. Cela dit, entrons dans la viande et les pommes de terre de cette classe. La toute première étape que vous devrez faire est d'installer votre logiciel de conception. C' est l'application que vous allez utiliser pour créer vos designs. Mais lequel devriez-vous obtenir ? Parce qu'il y a quelques options dignes. Eh bien, découvrons ça dans la prochaine leçon. 3. Logiciel de conception: Hé, bienvenue à la classe. Cette leçon porte sur les logiciels de conception et nous allons jeter un oeil à quelques options disponibles. Je vais rapidement passer en revue les avantages et les inconvénients de chacun. Je vais te dire ce qu'il faut éviter. Et aussi ce que je recommande. Ça a l'air bien. Allons-y. Je vais commencer par te dire ce qu'il faut éviter, d'accord ? En ce qui concerne la conception de l'interface utilisateur ou la conception d'interface, vous devez rester loin d'Adobe Photoshop et d'Adobe Illustrator. Et il y en a quelques autres, mais ce sont les principaux. Et ne vous méprenez pas. Photoshop et Illustrator. applications fantastiques pour ce qu'ils ont été conçus pour faire, pas pour ce type de travail. Donc, pour créer ou concevoir des sites Web, des applications mobiles et d'autres choses, ils ne sont pas très bons pour le faire. Je sais que beaucoup de gens ont commencé à concevoir des sites Web dans Photoshop. Il y a quelques années. Moi inclus. Mais nous l'avons fait parce qu'il n'y avait pas d'alternative réelle là-bas. D' accord. Mais aujourd'hui, allez. Il y a tellement d'applications que vous pouvez choisir. Et je vais vous montrer trois d'entre eux juste dans cette leçon. Techniquement, bien sûr, vous pouvez concevoir n'importe quelle interface que vous voulez à la fois dans Photoshop et Illustrator, mais vous aurez du mal à faire ça. C' est pourquoi je vous recommande de partir. Vous pouvez également utiliser Photoshop Illustrator pour ce qu'ils ont été conçus à l'origine, à savoir l'édition d'images et la création d'illustrations. Parce que nous voulons travailler efficacement. Nous voulons utiliser des outils spécialement conçus pour ce type de travail pour la conception de l'interface utilisateur. Et on va commencer par le croquis. Maintenant, le croquis est assez génial. C' est en fait l'outil que j'ai commencé utiliser ou juste après avoir basculé de Photoshop. Je crois qu'à l'époque c'était la version croquis trois. Maintenant, c'est la version croquis cinq quelque chose. Eh bien, esquissez la version 50 quelque chose parce qu'ils multiplient leur numéro de version il y a quelque temps. Mais normalement, ce serait une version cinq croquis était comme cette version super légère à Photoshop où je pourrais concevoir un site Web ou une interface tellement plus facile, cela a aidé beaucoup de contrôles qui sont spécifiquement conçus pour cela. Évidemment, cette application a évolué avec le temps, est devenu de mieux en mieux. Il dispose maintenant d'un tas de fonctionnalités que vous pouvez utiliser pour rationaliser votre flux de travail en termes d'interface utilisateur, Ceci est assez simple. Vous avez une barre d'outils supérieure que vous pouvez également personnaliser pour contenir votre plus important. Des outils. Ici, vous avez une section pour passer aux différentes pages. Il s'agit d'un panneau de calque afin que je puisse créer n'importe quelle forme que je veux. Ça va arriver ici. Et sur le côté droit, vous avez un panneau inspecteur qui vous donnera accès aux différentes propriétés des objets que vous avez sélectionnés sur ce canevas. En ce qui concerne les avantages et les inconvénients, je pense que le plus grand est que esquisse une application Mac native. C' est donc très rapide qui fonctionne incroyablement bien sur macOS. Et il a même pris en charge macOS, Big Sur, qui est le dernier système d'exploitation d'Apple au moment de cet enregistrement sur cet ordinateur, j'utilise Catalina, qui est la version précédente. Donc, il ressemble à l'interface d'esquisse standard. Mais à Big Sur, il a en fait une interface légèrement mise à jour et à mon avis, il semble brillant. J' aime aussi le fait qu'il a un mode sombre. Et je peux facilement basculer entre le mode sombre et le mode lumière de l'apparence ici. Et c'est à ça que ça ressemble en mode Lite. Et c'est en fait la seule application qui prend en charge un mode sombre de toutes les applications que je vais vous montrer aujourd'hui. Sketch a également une énorme communauté derrière elle. Vous avez beaucoup de sites Web avec diverses ressources faites pour le croquis. Beaucoup de plugins développés par les membres de la communauté. Et fondamentalement, il a tout ce dont vous avez besoin. Dans une application de conception. Avec l'esquisse, vous pouvez créer n'importe quoi, des icônes à l'application conçue à la conception de site Web. Et c'est vraiment une trousse d'outils très complète. Maintenant, en ce qui concerne les inconvénients, je pense que le plus important est le fait que ce n'est pas gratuit. esquisse est actuellement au prix de 99$. Donc, si vous voulez l'utiliser, vous devez payer cela d'avance. Et puis si vous voulez continuer à recevoir la version mise à jour de l'application, vous devrez dépenser 79$ supplémentaires par an. Donc, en gros, vous payez 99$ la première année. Vous avez les mises à jour incluses dans l'application. Mais une fois cette année passée, si vous voulez les versions mises à jour, vous devrez continuer à renouveler essentiellement votre abonnement pour 79$ par an. Donc c'est l'escroc, numéro un. La colonne numéro deux est qu'il y a le fait que ce n'est que Mac. Évidemment, aucun problème pour cette classe car il s'agit de configurer macOS pour la conception web. Mais si plus loin, vous envisagez peut-être de passer à Windows ou d'accéder à vos fichiers de conception à partir d'un autre système d'exploitation. L' utilisation de Sketch n'est pas pour vous car elle ne s'exécute que sur macOS. Et si vous êtes intéressé, vous pouvez obtenir l'application sur sketch.com. Maintenant, l'outil suivant de la liste est Adobe XD. Ceci est encore une autre application puissante et qui est en fait incroyablement populaire en termes d'interface. C' est assez similaire au croquis. Vous avez une barre d'outils ici sur le côté gauche. Vous pouvez également voir le panneau des calques ici et le panneau inspecteur juste ici sur le côté droit. Et quand il s'agit d'Adobe XD, il y a beaucoup de pros. Tout d'abord, c'est absolument gratuit. Il y a aussi une version payante, mais si vous venez de commencer ou si vous n'avez pas besoin comme tous les outils de collaboration. C' est un outil gratuit. Un autre avantage est qu'il fonctionne à la fois sur Mac OS et Windows. Donc, si vous avez peut-être deux ordinateurs, un au bureau, un à la maison, vous pouvez commencer à travailler sur un projet au bureau et vous pouvez le terminer à maison sur un autre système d'exploitation, sans aucun problème. Vous pouvez également choisir d'enregistrer vos documents dans le Cloud afin qu'ils soient accessibles de n'importe où. Adobe X D a également une énorme communauté derrière elle, avec beaucoup d'actifs disponibles à télécharger comme des kits d'interface utilisateur et autres. Beaucoup de plugins sont disponibles. Et tout comme le sketch, il a tout ce dont vous auriez besoin d'un point d'accès de conception, plus en fait quelques fonctionnalités uniques comme la grille de répétition. Donc, par exemple, si j'ai comme un rectangle ici, je peux créer une grille en cliquant sur un simple bouton et en faisant glisser comme ceci, et cela va dans plusieurs directions et je peux facilement ajuster l'espacement entre les éléments de la grille. Donc, c'est une fonctionnalité que je n'ai vu nulle part ailleurs. Il dispose également d'un panneau d'actifs très cool qui vous permet d'enregistrer des couleurs, styles de caractères et des composants pour réutiliser vos projets. Ou par exemple, je peux sélectionner cet élément x D sait qu'il y a deux couleurs qui lui sont appliquées et lire pour un remplissage, d'accord pour une bordure. Et ça crée automatiquement ces deux couleurs pour moi. Encore une fois, si j'ai un élément de texte, je peux enregistrer ces styles de caractères très facilement. Laissez-moi vous donner rapidement un exemple. Je peux cliquer sur ce bouton et il va enregistrer comme helvetica nouveau irrégulier 20 pixels. Il obtient ses informations d'ici. Et plus loin, je peux cliquer avec le bouton droit de la souris, je peux éditer cela. Et je peux changer ces propriétés et tous les textes sur celui qui a ce style de personnage à appliquer seront mis à jour aussi, ce qui est assez génial. Et bien sûr, comme son nom l'indique, c'est un produit Adobe. Nous savons donc que c'est un produit de qualité qui est en fait mis à jour très souvent. Ce que j'aime vraiment chez XD, c'est le fait que c'est très rapide et qu'il a une interface utilisateur très propre. Aussi fait amusant, vous pouvez importer des croquis et des fichiers Photoshop dans Adobe XD. Donc, si vous êtes peut-être en train de passer de l'une de ces applications pour vos besoins de conception Web. Ensuite, vous pouvez importer tous vos anciens fichiers dans XD. Pas de problème. Maintenant, quand il s'agit des inconvénients de l'utilisation d'Adobe XD, pour être honnête, je ne peux pas penser à aucun. Je pense que c'est une application vraiment, vraiment bonne pour tous ceux qui essaient d'entrer dans. Conception Web. Peut-être le fait qu'il n'a pas de nœud sombre, bien que ce soit assez subjectif, tout le monde n'aime pas un mode sombre. Ou peut-être le fait que son interface n'est pas aussi personnalisable que l'interface utilisateur de sketch, par exemple. Peut-être que nous pouvons considérer que c'est une escroquerie. Je ne sais pas. À mon avis. Je ne vois aucun inconvénient réel ou aucune voiture qui vaut la peine de mentionner pour Adobe XD. Maintenant, si vous souhaitez obtenir Adobe XD, vous pouvez l'obtenir dans l'application Creative Cloud. Si vous avez ça. Ou si vous ne le faites pas, vous pouvez simplement aller sur les produits adobe.com slash Slash XD. Et ici, vous pouvez simplement cliquer sur le bouton Démarrer pour gratuit et vous pouvez le télécharger à partir de là. Maintenant, pour Sigma, c'est celui que j'utilise tous les jours. Et j'adore vraiment cette application en termes d'interface utilisateur. Rien de spécial vraiment. Il est très similaire à toutes les autres applications de design là-bas. Nous avons une barre d'outils ici en haut, calques et des actifs à gauche, inspecteur à droite, et le canevas et le milieu. Maintenant, ce que j'aime vraiment comprendre, c'est le fait que c'est gratuit. Il fonctionne sur Windows, Mac OS et Linux. Et cela fonctionne également dans le navigateur. Donc ici, je suis en fait dans Safari. Et j'ai un dossier FISMA ouvert. Mais j'ai également l'application de bureau installée et toute modification que vous apportez à vos fichiers est automatiquement enregistrée dans le cloud. Ainsi, par exemple, je peux dessiner un rectangle dans mon application de bureau. Et quand je passe à l'application Web ou celle basée dans le navigateur, vous verrez que le changement apparaît ici instantanément. Et j'aime le fait que tous mes fichiers sont en ligne et qu'ils sont accessibles partout où je veux. Maintenant, tout comme les deux autres, sigma a tout ce dont vous avez besoin dans une API de conception peut créer n'importe quelle interface avec elle. Mais vous pouvez également concevoir des icônes, des vecteurs, des illustrations, même c'est très, très puissant. Maintenant, en dehors des choses habituelles que vous trouverez dans un tel logiciel, sigma a également quelques caractéristiques uniques, par exemple, la mise en page automatique. Donc, par exemple, je peux ajouter la mise en page automatique à un objet spécifique. Et ensuite je peux. Commencez à déplacer cet objet autour, comme ça. Comme ça. Je peux sélectionner mon cadre principal, je peux choisir une orientation différente. Je peux changer l'espacement entre les éléments. Et aussi je peux changer le rembourrage du récipient principal. Et aussi quelque chose que je n'ai vu dans aucune autre application. Et c'est en fait l'une de mes fonctionnalités préférées dans sigma est les couleurs de sélection. Donc, si vous sélectionnez un groupe d' éléments et que ces éléments ont des couleurs différentes qui leur sont appliquées, vous les trouverez tous sous un seul groupe dans l'inspecteur. Et vous pouvez voir le code hexadécimal. Vous pouvez les changer très facilement sans sélectionner cet élément. Juste à partir de cette interface. Vous pouvez également modifier l'opacité de cette couleur et il peut également créer un style de couleur pour elle. Et si vous ne savez pas quels éléments ont utilisé cette couleur, vous avez ici un petit bouton qui vous permet de sélectionner l'élément avec cette couleur. Une fonctionnalité fantastique. Je l'utilise tout le temps. Et j'aimerais qu'un autre logiciel de conception mette en œuvre quelque chose comme ça. Sigma est très rapide. Il a une interface utilisateur très propre. Et j'ai dit que c'était gratuit. Oui, c'est gratuit. Il a aussi un plan payant, mais c'est pour les équipes. Donc, si vous voulez créer plus d'équipes, vous payez un supplément pour celles-ci. Mais si vous ne le faites pas, alors c'est totalement gratuit. Et n'importe qui sur n'importe quelle plate-forme, sur n'importe quel navigateur peut utiliser sigma, ce qui est fantastique en termes de inconvénients. Le seul que j'ai rencontré jusqu'à présent est que parfois il bute lors de l'importation de SVG. Mais à part ça, je n'ai rien de mal à dire à propos de faux ma main. En fait, c'est ma recommandation personnelle pour un logiciel de conception quel que soit votre niveau de compétence. Donc, si vous commencez juste, je recommande d'utiliser Fatma. Si vous êtes peut-être un vétéran, je vous recommande de passer à Sigma. Je suis convaincu que c'est un bon produit. Bon, maintenant, ces trois applications sont ce qu'on pourrait appeler mainstream, c'est-à-dire. Tout le monde sait pour eux. Ils sont les plus complets en termes de fonctionnalités. Et ils ont tous de très grandes communautés derrière eux. Cela dit, il y a une autre application qui pourrait vous intéresser et qui s'appelle Studio. Ce produit est fabriqué par une société japonaise appelée Studio Inc., basée à Tokyo. Cette application est assez différente de ce à quoi vous êtes habitué parce que vous pouvez créer n'importe quel type de conception d'interface. Mais l'expérience est celle d'un constructeur visuel. Les éléments sont généralement empilés, donc changer l'un affectera les autres. Vous pouvez ajouter des marges et des paddings aux éléments et c'est presque comme travailler sur une page en direct. cool à propos de Studio, c'est qu'il peut créer une version codée de cette conception, que vous pouvez ensuite télécharger sur votre propre serveur. Avec elle. Vous pouvez essentiellement concevoir et coder votre site Web entier sans réellement écrire une seule ligne de code vous-même. Un inconvénient pourrait être le fait que le studio ne fonctionne que dans le navigateur Chrome pour l'instant, et il n'a pas toutes les cloches et les sifflets de ces autres, comme je les appelle applications de conception grand public. Je ne vais pas aller plus en détail sur cette application. Mais si vous êtes intéressé à voir un cours sur Studio, faites-le moi savoir sous l'onglet discussion, j'aimerais vous donner un aperçu plus approfondi de cette application. Bon, alors maintenant il est temps de s'occuper. Votre tâche en ce moment est de déterminer quel logiciel de conception vous souhaitez utiliser. Si vous en avez déjà un préféré. C'est génial. On peut passer à autre chose. Si ce n'est pas le cas, téléchargez l'un d'entre eux et installez-le sur votre système, jouez avec, voyez si vous l'aimez. Peu importe lequel. Ce qui compte, c'est que vous l'aimez et que vous vous sentez à l'aise de travailler avec. Si vous ne savez pas lequel obtenir, alors allez avec ma recommandation et choisissez sigma. Créez un compte gratuit et vous êtes prêt à partir. Vous n'avez même pas à télécharger quoi que ce soit que vous pouvez commencer dans le navigateur, ou tout simplement les télécharger et jouer jusqu'à ce que vous trouviez celui que vous aimez. Passons maintenant à la prochaine catégorie d'outils, à savoir la gestion des quatre couleurs. Et dans la prochaine leçon, je vais vous montrer trois applications très utiles. Alors je te verrai là-bas. 4. Gestion des couleurs: Hé, bienvenue à la classe. Cette leçon porte sur la gestion des couleurs, et je vais vous montrer les applications utilisées pour choisir les couleurs de n'importe où sur l'écran pour vérifier le contraste des couleurs et aussi pour créer des palettes de couleurs. Maintenant, je suis vraiment excité à ce sujet parce que la couleur est l'un des aspects fondamentaux du design, et avoir des outils qui me permettent de le faire est tout simplement fantastique. Commençons par regarder une application appelée ColorsNapper. Vous pouvez obtenir l'application à partir de colorsnapper.com. Il s'agit d'un Mac uniquement. Vous pouvez l'essayer gratuitement et vous pouvez également l'acheter pour environ 12€. Je ne suis pas sûr de ce que c'est en dollars, probablement environ 15$ ou quelque chose comme ça. Maintenant, c'est une application qui se trouve bien dans votre barre de menu dans macOS, et vous pouvez lui attribuer une touche de raccourci, mienne est l'option de commande C, et avec elle, vous obtenez ce grand sélecteur de couleurs que vous pouvez faire plus petit ou plus grand en utilisant votre molette de défilement de la souris C' est comme une loupe. Vous pouvez aller n'importe où sur l'écran et vous pouvez échantillonner n'importe quelle couleur. Voyez comment cela change la valeur hexadécimale là-bas ? Une fois que vous avez trouvé la couleur que vous voulez obtenir, il suffit de cliquer, et cela sera automatiquement enregistré dans l'historique de l'application ici, ainsi que dans votre presse-papiers afin que vous puissiez rapidement passer à une application et vous pouvez appliquer cette couleur ici. C' est aussi facile, et comme je l'ai dit, ça marche n'importe où sur l'écran. Maintenant, vous pouvez également changer le format de la couleur que vous choisissez, donc si vous allez à Couleurs et Formats, ce moment il est défini sur CSS Hex, mais vous pouvez obtenir un Hex Générique sans le signe de hachage à l'avant ou peut-être que vous voulez un format RVB avec des valeurs rouges, vertes, bleues ou RGBA avec un canal alpha, HSL, et quelques autres formats. En fait, la liste ici est assez grande. La fenêtre Couleurs et formats est également accessible via un raccourci clavier, mienne est Shift Command C, et vous pouvez également voir un historique de la couleur que vous avez choisie ici. Vous pouvez le faire défiler à l'aide de la molette de défilement de votre souris. Si vous avez une couleur que vous voulez enregistrer comme favori, vous pouvez simplement cliquer sur cette petite icône, et maintenant vous pouvez cliquer dessus et basculer entre le mode historique et le mode favoris. C' est très pratique. Maintenant, si vous voulez changer une couleur que vous avez choisie, vous pouvez aller à Couleurs et formats, vous pouvez sélectionner la couleur que vous voulez changer, par exemple celle-ci, et vous pouvez cliquer sur cette petite icône ici qui indique Modifier Couleur. Cela va ouvrir cet éditeur où vous pouvez changer l'Opacité, changer la saturation, ou en fait la légèreté de la couleur, ou il peut changer complètement la teinte de la couleur. Vous avez également quelques options supplémentaires ici, vous pouvez choisir entre la roue de couleur ou un curseur RVB en niveaux de gris, HSB. Vous pouvez également choisir entre certaines couleurs prédéfinies dans le système ou choisir entre ce spectre. En termes de préférences pour l'application, c'est assez simple, vous pouvez décider sur les raccourcis clavier que vous voulez pour choisir la couleur, ainsi que pour afficher les couleurs et les formats. Il y a aussi un mode de précision, que je ne vous ai pas montré. Si vous ouvrez le sélecteur de couleurs et que vous appuyez sur la touche Ctrl, cela vous permet de vous déplacer avec beaucoup plus de précision. C' est sans le mode de précision activé, c'est avec le mode de précision activé. Vous pouvez vraiment zoomer et choisir la couleur exacte que vous voulez. Vous pouvez également modifier son apparence comme le niveau de grossissement de la boucle, la zone de capture, vous pouvez choisir d'utiliser un thème sombre ou non, et vous pouvez également modifier certains des formats que vous pouvez utiliser pour enregistrer la couleur, comme utiliser en majuscules lors du choix de l'Hex ou de l'Hex CSS, et ainsi de suite et ainsi de suite. Si vous cherchez un bon sélecteur de couleurs, c'est en fait ma recommandation. On en a un autre dont je vais parler dans un peu, qui s'appelle Sip. C' est aussi un excellent sélecteur de couleurs, mais c'est un peu compliqué pour le choix des couleurs. Au lieu de cela, ColorNapper est une application que j'utilise depuis longtemps et je peux vous le recommander de tout cœur. L' application suivante que je veux vous montrer s'appelle Contraste, et ceci est utilisé pour vérifier le contraste entre deux couleurs et s'assurer qu'elles sont accessibles, et pour déterminer qu'elles utilisent les rapports de contraste des couleurs WCAG. Maintenant, comment ça marche ? Eh bien, disons que vous voulez créer un bouton, et que vous lui donnez une, disons une couleur de remplissage, quelque chose comme ça, puis vous sélectionnez le texte et vous lui donnez une couleur de texte. Disons quelque chose comme ça. Maintenant, si vous allez vérifier le contraste entre la couleur du texte et la couleur de fond, dans ce cas particulier, vous allez trouver qu'il n'est pas accessible, donc les personnes ayant une déficience visuelle auront du mal à se passer en lisant ce texte. Pour ce faire, Contraste est une application qui, à nouveau, se trouve dans votre barre de menu, et vous cliquez simplement sur ce petit outil pipette, sélectionnez une couleur, cliquez dessus et sélectionnez l'autre couleur. Cela détermine le rapport de contraste entre les deux couleurs, dans mon cas c'est 2,04, et c'est un échec. Maintenant, si je vais augmenter la luminosité de cette couleur, et je l'essaie à nouveau Vous verrez que maintenant j'ai un taux de contraste beaucoup plus élevé, 9,26, et c'est un succès en termes d'accessibilité. Les personnes ayant une déficience visuelle pourront lire ce texte. C' est vraiment si simple d'une application. À tout moment, vous pouvez échanger des couleurs en cliquant sur ce bouton, et vous pouvez également voir un aperçu en direct de ces couleurs directement dans l'application, ce qui est un excellent ajout. En termes de préférences, il n'y a pas grand chose à choisir ici. C' est une application très simple, mais vous pouvez définir certaines clés globales pour choisir les couleurs et autres. Mais je n'ai pas configuré aucun d'entre eux parce que ce n'est pas une opération que je fais très souvent ; et cliquer sur l'icône de la barre de menu et juste échantillonner les couleurs comme celle-ci est en fait très simple. Donc, d'habitude, je fais juste ça. Vous pouvez obtenir l'application sur usecontrast.com, et vous pouvez en savoir plus à ce sujet. Ils expliquent également ce qu'est WCAG, comme vous pouvez le voir, c'est le contenu Web et les directives d'accessibilité. Pour le télécharger, vous allez simplement sur le Mac App Store où vous verrez qu'il a un prix de 6$ et 99, qui je pense que c'est un prix très juste pour cette application étant qu'il est si utile. L' application finale que je veux vous montrer quatre gestion des couleurs s'appelle Sip, et il est surnommé comme un meilleur sélecteur de couleurs pour votre Mac. Maintenant, c'est à beaucoup de égards très similaire au premier sélecteur de couleurs que je vous ai montré, ColorsNapper. Mais en même temps est beaucoup plus complexe. Avec Sip, vous pouvez faire la même chose, obtenir notre sélecteur de couleurs sur l'écran, vous pouvez utiliser votre molette de souris pour le rendre plus grand ou plus petit, et vous pouvez échantillonner n'importe quelle couleur. Maintenant, tout de suite, on peut voir une différence. Les couleurs ici sont en fait nommées. Voyez, violet électrique, et si on va au bleu, ça s'appelle bleu crayon. Allons ici, ciel profond, azur. Je pense que c'est cool parce que ça donne ces noms. Vous pouvez également voir le code Hex et un aperçu de cette couleur juste là. Encore une fois, une fois que vous cliquez sur une couleur spécifique, il copie automatiquement votre presse-papiers et aussi dans votre historique des couleurs ici. Une fois la couleur copiée, vous pouvez bien sûr aller à votre logiciel de conception et vous pouvez la coller là. Vous pouvez également cliquer sur une couleur spécifique pour la copier dans le presse-papiers. Vous pouvez copier cela et il peut sélectionner ceci et vous pouvez changer la couleur comme ça. Il peut également cliquer sur ce petit bouton pour éditer cette couleur et encore une fois, vous avez accès à un curseur pour la teinte, un pour l'opacité. Vous avez aussi ce sélecteur juste ici sur le côté. Vous pouvez également entrer les valeurs RGBA manuellement. Une fois que vous avez terminé, appuyez sur le signe OK, et cette nouvelle couleur sera automatiquement copiée dans votre presse-papiers. Vous avez également accès aux formats de couleur. ce moment, il est défini comme CSS Hex, mais voici tous les formats que vous pouvez choisir. Maintenant, si vous avez fait attention plus tôt, j'ai dit que cette application, Sip, est beaucoup plus qu'un simple sélecteur de couleurs. Nous pouvons le voir tout de suite parce que nous pouvons créer des palettes de couleurs. En fait, c'est la façon dont j'utilise pour créer des palettes de couleurs lorsque je travaille sur un Mac. Créer une palette est très simple, vous suffit de cliquer sur cette petite icône de menu et de sélectionner Nouvelle palette, puis vous pouvez commencer à échantillonner différentes couleurs. Peut-être que je vais essayer une couleur de mon doc macOS ici, peut-être une autre d'ici. Ensuite, avec ces couleurs, je peux simplement cliquer et faire glisser dans ma palette de couleurs. C' est aussi facile, et je peux bien sûr agrandir cette fenêtre pour voir toutes mes palettes. Maintenant, Sip a également un vérificateur de contraste intégré. Vous pouvez cliquer sur ce bouton, aller à Vérifier le contraste, et vous pouvez échantillonner deux couleurs. Il va vous donner le contraste exact, très similaire à l'application de contraste que je vous ai montré précédemment. Si vous choisissez deux couleurs qui vous donnent un échec, vous pouvez également cliquer sur « Fix », et cela va modifier les couleurs de telle sorte qu'elles vous donnent un bon contraste. Je ne me retrouve pas vraiment en utilisant cette fonctionnalité, mais si vous le voulez, c'est là. Maintenant, l'une des fonctionnalités que j'aime vraiment à propos de Sip est ce dock de couleur, qui vous donne l'historique des couleurs et quelques-unes des palettes de couleurs que vous avez créées. Cela peut être déplacé de chaque côté de votre écran en fonction de l'endroit où vous le souhaitez. Il fonctionne à peu près la même chose que l'application de la barre de menus, sauf qu'il est un peu plus facile de voir quelles couleurs vous pouvez choisir. Peut-être que je cherche une couleur bleue. Je sais tout de suite que, hé, je peux le trouver ici ou je peux le trouver ici. Suis-je à la recherche d'un rose clair ? Eh bien, je peux le trouver ici et je peux cliquer sur cette couleur pour la copier dans mon presse-papiers, puis je peux le coller dans mon application de conception très rapidement. C' est Sip. Vous pouvez l'obtenir sur sipapp.io Ce n'est pas gratuit, malheureusement, cela coûte environ 10 Euros par appareil. Cependant, il est également inclus dans Setapp. Setapp est un service d'abonnement pour votre Mac qui vous donne accès à de nombreuses applications. Fondamentalement, vous payez un forfait mensuel ou annuel, et vous avez accès gratuitement à un tas d'applications, dont l'une est Sip. En fait, c'est ainsi que je l'utilise sur mon abonnement Setapp. Là, vous l'avez, trois applications fantastiques que vous pouvez utiliser pour travailler plus facilement avec les couleurs. Maintenant, c'est à votre tour de choisir celui qui, à votre avis serait le plus utile si vous le souhaitez, bien sûr, ou si vous en avez besoin. Toutes les applications que je vous montre dans cette classe sont des applications que j'utilise. Cela ne signifie pas que vous devez les utiliser aussi. Mais je pense qu'ils pourraient vous aider, et vous devriez les essayer. Maintenant, un autre aspect majeur du design est la typographie. En tant que concepteurs, nous passons par des dizaines de polices jusqu'à ce que nous trouvions la bonne pour notre projet. Mais comment pouvons-nous gérer toutes ces polices installées sur notre système ? Comment pouvons-nous facilement prévisualiser et choisir la phase de type adaptée à notre conception ? Eh bien, je veux vous montrer deux applications qui vont nous aider à le faire très facilement. C' est à venir dans la prochaine leçon. Je te verrai là-bas. 5. Gestion de polices: Hé, bienvenue à la classe. Cette leçon porte sur la gestion des polices. Je vais vous montrer l'application que j'utilise pour gérer toutes les polices installées sur mon système. Maintenant, macOS a déjà une application pour cela, elle s'appelle Font Book. Vous pouvez l'utiliser pour voir les polices que vous avez installées, voir à quoi elles ressemblent et également créer des collections. Mais nous pouvons faire mieux que ça. J' ai trouvé une meilleure alternative appelée police de caractères. Bien qu'il soit très similaire à l'application par défaut que je vous ai montrée plus tôt, il a quelques fonctionnalités supplémentaires qui le rendent vraiment utile. Vérifions ça. C'est à quoi ressemble l'application. Sur la gauche, nous avons cette barre latérale qui nous permet filtrer les polices qui sont affichées sur le côté droit. Pour chaque police, nous pouvons voir un aperçu. En passant, ce texte est totalement personnalisable. Nous pouvons voir le nom de la police ici, et aussi ce point bleu nous permet de savoir que cette police est activée. Si, pour une raison quelconque, je veux désactiver une police, je peux simplement cliquer ici et désactiver cette police. Actuellement, il s'agit d'une police système qui ne peut pas être désactivée. Mais si j'installe moi-même certaines polices, je peux utiliser cette fonctionnalité pour activer ou désactiver. À tout moment, je peux ouvrir une police dans une plus grande fenêtre en cliquant dessus, et cela va me montrer un aperçu plus grand de tous les personnages. Je peux également voir quelques informations sur cette police particulière. En outre, je peux choisir d'augmenter la taille de ces cases d'aperçu ou de la diminuer comme ceci. De là, je peux choisir de cacher cette barre latérale, et à partir d'ici, je peux activer et désactiver la collection rapide. Avec la collecte rapide, je peux simplement cliquer avec le bouton droit sur une police et sélectionner Collecte rapide. Disons que vous travaillez sur un projet, que vous parcourez votre liste de polices, vous dites, celle-ci fonctionne très bien, donc je vais le récupérer rapidement. Peut-être que celui-ci fonctionne très bien et je vais le recueillir aussi, et peut-être celui-ci aussi. Après avoir fait tout cela, vous pouvez simplement cliquer dessus et cela va vous donner cette collection de polices. Maintenant, vous réduisez essentiellement aux polices que vous avez sélectionnées. Cela vous aidera à prendre votre décision beaucoup plus rapidement. Maintenant, sur le côté gauche, nous avons quelques critères pour filtrer ces polices. Si je cherche Monospaced, je peux cliquer dessus et ça va me montrer toutes les polices qui correspondent à ces critères, ou peut-être que je veux des scripts ou Sans, Ornamental et d'autres choses comme ça. À tout moment, vous pouvez cliquer sur ce petit bouton et vous pouvez créer une nouvelle balise, ou vous pouvez importer des polices. Disons que je veux créer une nouvelle balise qui s'appelle thème WordPress. Disons que je travaille sur un thème WordPress et que je veux sélectionner certaines polices qui fonctionneraient bien pour mon thème WordPress. Voyons voir, peut-être que je vais choisir celui-ci afin que je puisse cliquer bouton droit de la souris sur les balises et que je peux sélectionner le thème WordPress. Quoi d'autre ? C'est peut-être celle-là. Maintenant, si je choisis le thème WordPress, il me montre quelles polices j'ai marquées avec cette balise. Ceci est très utile pour organiser votre bibliothèque de polices car nous pouvons utiliser ces balises pour marquer les polices pour différentes utilisations. Disons que vous marquez certaines polices avec sans-empattement, ou d'autres avec, disons, très lisibles ou quelque chose comme ça, les critères ou les balises ou les catégories que vous utilisez sont entièrement à vous, mais vous pouvez utiliser le pour catégoriser vos polices, et cela vous permettra de les trouver plus facilement plus tard. Maintenant, avec la police de caractères, avec cette application, vous avez également accès à Google Fonts. Fondamentalement, si vous ouvrez les Préférences et que vous allez à .Library, vous pouvez importer Google Fonts ici. Cela téléchargera en fait toute la bibliothèque des polices Google, sorte que vous n'avez pas besoin d'aller manuellement sur le site Web de Google Fonts et de télécharger certaines polices à partir de là. Vous pouvez le faire à partir de l'application directement. Vous pouvez également importer des polices Adobe. Si vous avez des polices d'Adobe que vous souhaitez importer dans l'application, c'est la façon de le faire. Une autre grande caractéristique de la police de caractères est la comparaison de glyphe. Disons que vous avez ces deux polices. Vous pouvez cliquer avec le bouton droit sur l'un ou l'autre et sélectionner comparer. Cela se chevauchera en fait sur l'autre aperçu de la police, et vous pouvez voir les différences entre chaque glyphe. Vous pouvez également le rendre beaucoup plus grand, sorte que vous pouvez voir comment Avenir Heavy se compare à Apple SD Gothic Neo Light dans ce cas. C' est une fonctionnalité très utile. Maintenant, vous pouvez obtenir l'application, la police de caractères, sur typefaceapp.com. Ce n'est pas gratuit, mais vous pouvez obtenir un essai gratuit. Il coûte 2 199 euros sur le Mac App Store, ou si vous utilisez Setapp, c'est le service d'abonnement dont je vous ai parlé, qui est inclus, donc vous n'avez pas vraiment à payer quoi que ce soit sauf l'abonnement pour Setapp qui si je me souviens bien, est d'environ 10$ ou 10€ par mois. Ce n'est vraiment pas si important. En outre, l'application dispose également d'un mode sombre, de sorte que vous pouvez désactiver le mode sombre ou le mode nuit comme il est appelé ici en utilisant ce raccourci clavier ou en allant dans Affichage, Mode nuit. Plutôt cool. Si pour une raison quelconque vous n'aimez pas cette application, j'ai une autre suggestion pour vous. C' est une application appelée RightFont, et c'est beaucoup plus complexe que la police de caractères, mais c'est aussi beaucoup plus cher. Permettez-moi de vous montrer rapidement de quoi il s'agit et ensuite vous pourrez décider vous-même si l'un de ces éléments vous sera utile. Vous pouvez obtenir l'application sur rightfontapp.com. C' est aussi une application Mac. En termes de prix, il en coûte 49$ pour une seule licence, mais vous obtenez également un essai gratuit. L' application de beaucoup de façons est similaire à la police de caractères. Vous avez la liste de toutes les polices installées dans votre système ici. Vous pouvez modifier la taille précédente, vous pouvez modifier le texte de l'aperçu ici. Vous pouvez également l'afficher sous la forme d'une liste, d'une carte ou d'une grille. Vous pouvez également regrouper les polices par famille, ce qui est quelque chose que je n'ai pas vu sur l'autre application, et vous pouvez également choisir parmi quatre thèmes disponibles. Comme je le disais, c'est un peu plus complexe. Ici, vous avez accès aux polices système dans une catégorie distincte, et vous avez également accès à certaines polices d'icônes. Il y a en fait beaucoup d'entre eux qui incluent des polices d'icônes très populaires comme Font Awesome et Ironicons, Foundation, Enypo. Vous pouvez l'utiliser pour prévisualiser ces icônes et les utiliser dans vos projets. Vous avez également accès à Google Fonts. Vous pouvez synchroniser avec Google Fonts, sorte que vous n'avez pas à télécharger manuellement. Vous avez également accès aux polices Adobe qui sont actuellement installées sur votre système. Vous pouvez également synchroniser avec SkyFonts , un autre service de gestion des polices. Il s'agit d'un service en ligne. Ensuite, vous pouvez choisir de créer différentes listes comme toutes les polices activées ou désactivées et ainsi de suite et ainsi de suite. Mais comme je le disais, c'est une alternative. Ma recommandation serait d'utiliser la police de caractères parce que c'est celle que j'utilise. Je pense que c'est assez simple, mais en même temps, cela me permet de mieux gérer mes polices. Si l'une de ces applications a suscité votre intérêt, alors allez-y et téléchargez celle qui vous semble être la plus utile ou celle que vous aimez le plus. Ils ne sont pas les seuls gestionnaires de polices là-bas. Si vous faites une recherche Google, je suis sûr que vous en trouverez beaucoup plus. Ce sont ceux que je vous ai montrés parce que ce sont ceux avec lesquels j'ai travaillé, en particulier la police de caractères. Je le sais, je sais que c'est bon, et je peux te le recommander. Jusqu' à présent, nous avons couvert les outils pour les logiciels de conception, la gestion des couleurs et la gestion des polices. Mais qu'est-ce que les concepteurs utilisent régulièrement ? Icônes. Je me souviens quand j'avais besoin d'une icône, j'allais en ligne à chaque fois et je la téléchargeais à partir de là, ou je passais à travers un tas de dossiers sur mon ordinateur en essayant de trouver le bon. Heureusement, de nos jours, les choses sont beaucoup plus simples, grâce à certaines applications de gestion d'icônes que je veux vous montrer. Je vais le faire dans la prochaine leçon. Je te verrai là-bas. 6. Gestion des icônes: Bienvenue dans la classe. Cette leçon concerne la gestion des icônes et laissez-moi vous le dire ; avoir une application qui peut stocker toutes vos icônes et les catégoriser est formidable, fantastique, incroyable. Avant de commencer à utiliser une application, j'allais en ligne, rechercher une icône, télécharger et l'utiliser, ou rechercher dans mes dossiers [inaudibles] sur mon ordinateur jusqu'à ce que je trouve le bon. Mais pas plus, grâce à une application appelée Iconset. Je peux maintenant trouver n'importe quelle icône en quelques secondes et la faire glisser dans mon application de conception. Laissez-moi vous montrer comment. C'est l'application que je veux vous montrer. Sur le côté gauche, vous pouvez voir les jeux d'icônes disponibles. Ici, vous pouvez voir la liste des icônes de cet ensemble et ici vous avez essentiellement un panneau inspecteur et cela va vous dire le nom de l'icône, quelques balises et quelques détails. À tout moment, vous pouvez, par exemple, copier cette icône en tant qu'icône ou en tant que SVG réellement. Vous pouvez copier le code SVG ou vous avez quelques options supplémentaires ici. Si vous le copiez, vous pouvez simplement le coller dans, ou vous pouvez simplement cliquer et faire glisser et il va créer une copie de cette icône dans votre logiciel de conception. C' est un vecteur, donc vous pouvez le rendre aussi grand ou aussi petit et il va préserver sa qualité. Maintenant, vous pouvez très facilement ajouter un jeu d'icônes. Vous pouvez en cliquant sur ce bouton et en sélectionnant « New Set » et cela va vous permettre de lui donner un nom et de parcourir les icônes. Cela ne fonctionne qu'avec les fichiers SVG, vous devez d'abord télécharger ces icônes sur votre ordinateur, puis les importer dans Iconset, et ils seront disponibles ici , donc vous n'avez pas toujours à aller en ligne et trouver l'icône de droite. Vous pouvez également rechercher des icônes, donc si vous cherchez une flèche, vous pouvez taper cette flèche, elle va vous montrer toutes les icônes qui correspondent à ces critères de recherche. Cette recherche est également basée sur ce que vous avez sélectionné ici dans la barre latérale. Maintenant, à tout moment, vous pouvez exporter un jeu d'icônes en utilisant cette option ici. Cela va l'enregistrer sur votre ordinateur en tant que fichier d'ensemble de points, vous pouvez ensuite partager avec d'autres personnes qui ont l'Iconset et qui peuvent importer ce jeu dans leur propre application. Mais la fonctionnalité que j'aime le plus est le fait que je peux synchroniser toute ma bibliothèque d'icônes. Ici, c'est ce qu'on appelle la bibliothèque de jeux d'icônes. Actuellement, c'est local parce que cet ordinateur n'est pas mon pilote quotidien, donc je ne l'utilise pas pour le travail. Mais si je le voulais, je sauvegarderais cette bibliothèque dans un endroit partagé, dans un emplacement partagé comme Dropbox par exemple. Ensuite, si j'installe l'application sur un autre ordinateur, je peux simplement ouvrir cette bibliothèque et toutes mes icônes seront synchronisées entre les appareils. Très cool. En termes de préférences, vous avez également un mode sombre que vous pouvez activer. Vous pouvez choisir de masquer ou d'afficher le nom de l'icône ainsi qu'une grille d'icônes. Maintenant, la raison pour laquelle j'aime tellement cette application est qu'elle est gratuite et qu'elle fonctionne à la fois sur macOS et Windows. Vous pouvez l'obtenir sur iconset.io et c'est là que vous pouvez télécharger les versions Mac et Windows, et comme je le disais, c'est totalement gratuit. Dans mon cas, c'est très utile car au travail j'ai un ordinateur Mac, à la maison j'ai un PC, donc si je travaille à la maison et j'ai besoin d'accéder à ma bibliothèque d'icônes, je peux télécharger la version Windows et parce que la bibliothèque est synchronisée, toutes mes icônes sont disponibles et je peux utiliser n'importe laquelle d'entre elles quand je le veux. J' ai aussi quelques alternatives que je veux te montrer au cas où tu n'aimes pas Iconset. Mais je dois vous dire que je ne sais pas à quel point ils sont bons parce que je n'ai pas travaillé avec eux, sauf un d'eux que j'ai testé brièvement. D' après les commentaires que j'ai lus en ligne, ils semblent faire un excellent travail, mais vous allez devoir les télécharger et les tester vous-même pour déterminer si c'est vrai ou non. Jetons un coup d'oeil aux quatre alternatives. Le premier s'appelle IconJar, et vous pouvez le trouver sur geticonjar.com. C' est uniquement pour Mac et ce n'est pas gratuit. C' est en fait un 20 ou 30€ par an ou 60€ par vie. Comme vous pouvez le voir dans cet aperçu ici, c'est assez similaire à Iconset. Peut-être qu'il a encore quelques cloches et sifflets ici et là, mais je ne pense pas que pour moi personnellement, au moins, ça ne valait pas la peine d'avoir ça sur Iconset. L' autre s'appelle l'application Nucleo. Chez nucleoapp.com. Il s'agit d'un organisateur d'icônes et d'une bibliothèque d'icônes avec plus de 30 000 icônes. Vous téléchargez essentiellement l'application et vous avez également accès à la bibliothèque Nucleo, mais vous pouvez également ajouter vos propres icônes. Cela fonctionne sur Mac et Windows, et il dispose également d'une application gratuite. Le troisième est appelé le Projet Noun. Vous pouvez rechercher des icônes ici, et il y a aussi une application Mac que vous pouvez télécharger. Il contient également quelques compléments Adobe pour Illustrator, Photoshop et InDesign. Enfin, il y a Iconscout qui fait quelque chose de similaire. Maintenant, c'est à votre tour d'organiser vos icônes. Pourquoi ? Parce que ça va te faciliter la vie et ça va te faire gagner du temps et c'est toujours une bonne chose. Je vous recommande d'utiliser Iconset parce que c'est celui que j'utilise et je sais que c'est bon, plus c'est gratuit, cela fonctionne sur les deux plateformes, mais n'hésitez pas à utiliser ce que vous pensez fonctionner le mieux pour vous. Espérons que les quatre alternatives que je vous ai montrées vous mettront sur la bonne voie. Maintenant question ; que devriez-vous toujours faire en tant que designer ? Mesurer, vous trouverez rarement un concepteur qui va, faisons que 23 pixels. Non, Designerson mesure toujours des choses. Personnellement, si je fais deux boutons et que l'un d'eux est comme un pixel plus grand, ça me rend fou, je ne peux pas le supporter. La mesure est très importante car nous devons être cohérents en termes d'espacement et de dimensionnement. Dans la leçon suivante, je veux vous montrer une application que j'utilise presque tous les jours, ou du moins quand je conçois pour mesurer tout ce que je veux sur l'écran. C' est à venir ensuite. 7. Mesurer: Hé, bienvenue à la classe. Cette leçon porte sur la mesure. Je vais vous montrer une application que j'utilise beaucoup pour mesurer n'importe quelle distance ou dimension n'importe où sur l'écran. Vous pouvez également utiliser cette application pour créer des guides verticaux ou horizontaux et également prendre des captures d'écran de vos mesures. Maintenant, la plupart des logiciels de conception que vous utilisez ont un système de mesure intégré, mais généralement, il ne fonctionne qu'à l'intérieur de ce logiciel de conception. Si vous voulez mesurer quelque chose à partir, disons, d'une image ou d'un site Web, ou vous devez importer cette image ou prendre une capture d'écran de ce site Web importée dans votre logiciel de conception et faire vos mesures. Eh bien, ce que je vais vous montrer fonctionne maintenant au niveau du système, signifie que vous pouvez mesurer n'importe où sur qui signifie que vous pouvez mesurer n'importe où sur l'écran, quelle que soit l'application actuellement active. J' aime vraiment cet outil, alors laissez-moi vous montrer ce qu'il peut faire. L' application en question est appelée PixelSnap et vous pouvez l'obtenir sur getpixelsnap.com. Comment ça marche ? Laissez-moi vous montrer un exemple rapide. Celui-ci vit ici dans votre barre de menus, et vous pouvez définir un raccourci clavier pour l'activer. Le mien est Shift Command F. Lorsque j'appuie sur « Shift Command F », j'ai ces lignes rouges fraîches sur mon écran. Disons que je veux trouver les dimensions de ce bouton Acheter. Vous remarquerez que dès que je me déplace à l'intérieur du bouton, les bords de ces lignes s'accrocheront sur les bords du bouton et juste à côté, cela me donne les dimensions, 122 par 52. Je peux aller ici et ça va dire que c'est 211 par 48. Je peux également mesurer la distance entre ces boutons. Alors celui que je cherche, est bien sûr, le plus petit. Comme vous pouvez le voir, c'est très, très utile. Maintenant, tout en mesurant cette distance, vous pouvez maintenir la position H enfoncée pour maintenir cette distance sur l'écran. Comme vous pouvez le voir, même si je lâche H, cette distance est toujours là. Je peux même déplacer le curseur à l'intérieur et je peux appuyer sur « H » ici, ou je peux appuyer sur « V », cela va me donner ma distance verticale où dans ce cas dimension. C' est cool ? Je peux également obtenir une mesure précise d'un objet faisant glisser un rectangle autour d'eux et qui s'accrochera automatiquement sur les bords. Ici, ça me dit : « Hey, c'est 95 par 35. » Vous avez vu que lorsque j'ai plané sur cette mesure, cela me donne une icône de caméra et si j'appuie dessus, cela me donne une capture d'écran que je peux copier ou enregistrer dans un fichier. Je peux même éditer cette capture d'écran, ce qui est plutôt cool. Maintenant, pendant que cet outil est actif, je peux appuyer sur « Maj V » ou « Maj H » pour ajouter un guide enfichable. Vous pouvez voir que le bleu est maintenant un guide, et je peux utiliser mon curseur de souris pour accrocher ce guide à n'importe quel élément sur l'écran. Disons que je vais en prendre un là et Shift V à nouveau pour en prendre un autre ici, et cela me donne une mesure ici, 122 entre ces deux guides. Puis de ceci au bord de l'écran, j'ai 534 et 783 pour cette partie juste ici. Je peux également maintenir la touche Maj H enfoncée pour ajouter un guide horizontal, que je peux accrocher exactement de la même manière. Maintenant, à tout moment, je peux cliquer avec le bouton droit de la souris pour accéder à certaines options contextuelles, donc je peux ajouter les guides ici, je peux tenir les distances comme je vous ai montré précédemment. Je peux également ouvrir l'outil de capture d'écran, ou je peux entrer en mode arrière-plan. Le mode d'arrière-plan, fondamentalement, garde ces mesures à l'écran pendant que je peux continuer à travailler. Si je veux quitter cela, je peux simplement appuyer sur « Command Shift F » à nouveau, puis « Escape » et je suis sorti de lui. Une autre option cool ; lorsque l'outil est actif, je peux maintenir la touche Maj enfoncée, et cela va me donner un mode réticule. Sans les dimensions, je peux simplement l'utiliser pour vérifier visuellement l'alignement de certaines options comme ça. Ensuite, si je prends des mesures, par exemple, je vais faire H ici, puis un V, et peut-être que je vais économiser cette distance ici. Je peux appuyer sur « Command S » et ça va prendre une capture d'écran, et il va l'enregistrer dans le fichier. Cette capture d'écran contient, et vous pouvez voir un aperçu ici, il contient mes mesures et mes distances, assez génial. Je recommande fortement cet outil. C' est super utile quel que soit l'endroit où vous travaillez. Si vous avez ouvert Figma, peut-être que vous plongez dans un design et que vous voulez trouver la distance entre deux objets sans sélectionner les éléments individuellement et mesurer à l'intérieur de cette application, vous pouvez simplement ouvrir l'outil de mesure et vous pouvez trouver la distance entre les objets très facilement, ou vous pouvez simplement cliquer et faire glisser et trouver les dimensions. Cela peut parfois être ennuyeux car ici, par exemple, j'ai aussi coupé une partie de cette ligne, mais essayons-le sur ce logo. Vous voyez que ça fait un bien meilleur travail. Lorsque vous faites cela, vous devez vous assurer que l'arrière-plan autour de l'élément est à peu près la même couleur et n'a pas d'autres éléments autour de lui. En passant, si vous êtes curieux de ce design, c'est une page de destination que j'ai conçue pour ma première classe Skillshare. Si vous ouvrez mon profil ici sur Skillshare, vous trouverez la classe qui va vous guider dans la conception de cette page entière dans Figma. Maintenant, comme je le disais, vous pouvez obtenir l'application sur getpixelsnap.com. C' est pour Mac, et malheureusement, ce n'est pas gratuit. C' est 39$ pour un ordinateur. Si vous utilisez déjà l'application CleanShot X, qui est faite par la même entreprise, vous bénéficiez d'une réduction. Mais aussi ce PixelSnap, cette application est disponible sur Setapp. J' ai beaucoup mentionné Setapp dans ce cours, et je vais expliquer à nouveau ce que c'est. Setapp est une application basée sur l'abonnement qui vous donne accès à beaucoup de logiciels, beaucoup d'applications pour un prix mensuel ou annuel fixe, et PixelSnap est inclus dans votre abonnement. C' est PixelSnap, une application fantastique pour mesurer tout ce que vous voulez sur votre écran. C' est un peu cher, mais si vous utilisez Setapp, alors vous pourriez aussi bien l'installer car cela va vous aider beaucoup lors de la conception ou même lors écriture de code car cela va vous permettre de prendre ces mesures critiques vraiment rapidement et les traduire en code CSS. Maintenant, pour notre outil final, nous allons jeter un oeil à celui qui crée des captures d'écran ou qui prend des captures d'écran. Je pense que pour le web design, c'est aussi très important parce qu'il peut vous aider à mieux communiquer avec des clients potentiels ou vos coéquipiers en prenant de superbes captures d'écran. Ou il peut vous aider en vous permettant de prendre rapidement des captures d'écran de ce que vous aimez. Nous allons vérifier cette application plus en détail dans la prochaine leçon. Je te verrai là-bas. 8. Captures de films: Hé ! Bienvenue à tous dans la classe. Cette leçon porte sur la capture d'écran. Je vais vous montrer l'application que j'utilise tout le temps pour prendre des captures d'écran, annoter et les partager. Cela remplace en fait l'outil de capture d'écran par défaut dans macOS, et même s'il peut faire toutes les mêmes choses, il a quelques fonctionnalités supplémentaires que vous pourriez trouver très attrayantes. Laissez-moi vous montrer l'application appelée CleanShot X. Vous pouvez trouver l'application sur cleanshot.com. C' est uniquement pour Mac. Ce n'est pas gratuit. Il en coûte $29. Il est fait par la même société qui a créé PixelSnap, l'application que je vous ai montrée dans la leçon précédente. Bien sûr, vous bénéficiez d'une réduction si vous avez également cette application, ou si vous avez Setapp, vous pouvez la télécharger gratuitement car elle est incluse dans votre abonnement. Mais avec CleanShot, il peut essentiellement définir un raccourci clavier pour activer. Dans mon cas, c'est Command-Maj-4. Je vous ai dit que cela remplace l'outil de capture d'écran par défaut de macOS. Cela vous donne un réticule avec les coordonnées x et y de votre curseur sur l'écran, et vous pouvez simplement cliquer et faire glisser n'importe quelle zone sur l'écran et prendre une capture d'écran. Cela s'ouvre ici, et vous pouvez le copier dans votre presse-papiers. Vous pouvez l'enregistrer en tant que fichier ou ouvrir l'outil Annoter. Ici vous pouvez ajouter, par exemple, des flèches, des cercles. Vous pouvez tirer gratuitement en choisissant l'outil Dessiner. Tu peux faire quelque chose comme ça. Vous pouvez choisir différentes couleurs. Ensuite, une fois que vous avez terminé, vous pouvez l'enregistrer en tant que fichier ou vous pouvez cliquer sur « Terminé », et c'est maintenant mis à jour. Vous pouvez le copier ou l'enregistrer, comme avant. Vous pouvez également cliquer sur ce petit bouton qui indique l'épingler sur l'écran, et vous pouvez le déplacer n'importe où. Il va rester au-dessus de toutes les autres applications, et vous pouvez même changer sa taille. Si vous travaillez sur quelque chose dont vous avez besoin pour capturer partie de l'écran et l'avoir là pour référence, pour une utilisation ultérieure, vous pouvez le faire très, très facilement. Maintenant, avec CleanShot, vous avez quelques options. Vous pouvez ouvrir l'application en cliquant sur l'icône de la barre de menus, et il peut également capturer le plein écran. Vous pouvez capturer une seule fenêtre. Vous pouvez cliquer dessus, et cela va faire une capture d'écran de toute votre fenêtre. Vous pouvez également capturer ou faire défiler la capture. Si vous voulez capturer le contenu d'une zone tout en faisant défiler, vous pouvez le faire très facilement. Disons que je veux capturer cette zone ici. Je peux cliquer sur « Démarrer la capture », puis je peux faire défiler. J' y suis allé un peu trop vite. Essayons encore ça. Je peux faire défiler. Comme vous pouvez le voir sur le côté droit, il capture le contenu de la page. Une fois que j'ai terminé, il suffit de cliquer sur « Terminé », et maintenant cela a sauvé toute la page, ce qui est assez cool. Avec CleanShots, vous pouvez également faire une minuterie, et cela va déclencher la capture d'écran après un certain temps. Il peut également enregistrer l'écran, et vous avez également une option très pratique de masquer les icônes du bureau. Peut-être que vous voulez capturer l'ensemble de votre bureau, mais vous ne voulez pas que les gens voient vos icônes, vous pouvez cliquer sur cette option, et ils disparaîtront. Maintenant, la fonctionnalité que je pense aimer le plus est CleanShot Cloud. Permettez-moi de vous donner un exemple. Disons que je veux capturer cette partie ici. Je peux cliquer sur ce bouton qui dit télécharger vers CleanShot Cloud, et c'est le téléchargement. Il copie le lien vers mon presse-papiers. Maintenant, je peux ouvrir ce lien, et voici ma capture d'écran. C' est un moyen très facile de partager une capture d'écran. Peut-être que vous envoyez un e-mail à quelqu'un et au lieu de joindre cette capture d'écran à l'e-mail, vous pouvez simplement lui envoyer un lien. C' est ainsi que vous pouvez prendre de meilleures captures d'écran sous macOS. Comme je le disais, c'est une application de remplacement pour l'outil de capture d'écran par défaut dans macOS, et bien qu'il soit un peu du côté cher, il est également inclus dans Setapps. Donc, si vous avez cela, alors vous pourriez aussi bien juste encore parce que c'est un très, très utile. C' était le dernier outil que je voulais te montrer. Donc, pour terminer ce cours, s'il vous plaît rejoignez-moi dans la prochaine leçon pour le projet et la conclusion de la classe. Je te verrai là-bas. 9. Le projet de cours et la conclusion: Félicitations pour avoir fini ce cours. J' espère vraiment que cela a été à la hauteur de vos attentes et que vous avez appris quelque chose d'utile. Si ce n'est pas le cas ou vous ne l'avez pas fait, s'il vous plaît laissez-moi savoir dans les commentaires. Faites-moi savoir comment je peux m'améliorer parce que votre opinion compte beaucoup pour moi. Aussi, si vous souhaitez que je couvre un sujet spécifique dans l'une des classes de Skillshare, n' hésitez pas à me le faire savoir. Écrivez un commentaire dans la zone de discussion en me disant ce que vous aimeriez voir de moi dans les futures classes. J' ai une tonne d'idées pour de nouvelles classes, mais ce que vous voulez apprendre est également très important, alors encore une fois, s'il vous plaît laissez-moi savoir. Maintenant, prenez un moment et notez les clés de ce cours. Maintenant, à cause du sujet de cette classe, le projet de classe est un peu différent. Pour cela, je voudrais que vous décriviez votre boîte à outils de conception web. Ce qui signifie quelles sont les applications que vous utilisez pour la conception Web et comment vous les utilisez. Faites cela dans vos propres mots, il n'y a pas de modèle à remplir. Vous pouvez simplement écrire une liste ou nous donner une petite histoire pour que nous puissions mieux comprendre le contexte, et je pense que cela servira d'inspiration et aidera toutes les autres personnes qui regardent ce cours. Parce que, qui sait, nous pourrions trouver une application dont nous n'avons pas entendu parler, et c'est super utile. Faites-nous savoir comment ces applications vous aident. De plus, si vous avez d'autres questions ou commentaires, veuillez les poster dans la zone de discussion, onglet, quel que soit votre nom. J' aimerais juste entendre parler de toi. Cela dit, merci beaucoup d'avoir regardé ce cours. J' espère vous revoir dans la prochaine. Prends soin de toi.