Théorie de la conception graphique - Conception Web et numérique

1. Introduction: Vous vous retrouvez parfois à admirer le menu principal d'un site Web, une barre d'onglets unique sur un appareil mobile, une icône amusante ou une animation sympa d'un logo Si c'est le cas, vous allez adorer ce cours. Tout ce qui n'est pas imprimé et qui apparaît sous forme numérique relève de la conception b et numérique, qui est un sous-ensemble du domaine plus large du design graphique Dans ce cours, nous aborderons tout ce que vous devez savoir sur la conception Web, l'interface utilisateur et la conception de l'expérience utilisateur, tailles d' écran, les formats de fichiers , etc. Nous aborderons également en profondeur tous les domaines spécialisés de ce domaine, tels que le design ab, le design d'icônes, le design réseaux sociaux, conception de présentations, l'édition numérique, motion design, et découvrirons comment fonctionnent les systèmes de conception et les campagnes de bannières publicitaires. Nous analyserons des centaines de projets de conception numérique et de laboratoire afin de vous donner une solide compréhension des règles et termes importants que vous devez connaître si vous envisagez de vous lancer dans le secteur. En plus du projet de cours passionnant que vous terminerez, je l'espère, à la fin du cours, vous disposez également de la feuille de travail d'analyse et du glossaire des termes qui vous aideront à mettre en pratique tout ce que vous avez appris J'espère que vous êtes aussi enthousiastes que moi à l'idée de vous lancer et plonger dans l'océan de connaissances et de magnifiques exemples de conception graphique. 2. Rôles dans ce secteur: Comme pour la conception d'impression, si vous envisagez de vous spécialiser dans la conception Web en tant que graphiste, vous devrez également connaître quelques termes essentiels. Ils vous aideront à mieux communiquer avec d'autres professionnels de la région, avec les développeurs et avec vos clients. Mais avant tout, essayons de définir ce qu'est réellement la conception Web. Bien que beaucoup de gens préfèrent utiliser ce terme pour tout ce qui concerne le laboratoire et la création de sites Web, y compris le codage et le développement de ceux-ci, il est utilisé avec plus de précision lorsqu'il se réfère à l'utilisateur l'expérience et tous les autres aspects avant-gardistes d'un site Web. Un concepteur Web devrait normalement travailler sur l'apparence, la mise en page, la structure et le contenu d'un site Web. Un concepteur Web n'est pas principalement responsable du codage d'un site. Cependant, une certaine connaissance du HTML, du CSS, JavaScript et d'autres langages de codage peut être très utile dans ce domaine. Maintenant, au cas où vous voudriez être très précis et que vous vouliez vous assurer que personne ne confond votre rôle avec quelqu'un qui fait également du codage. Vous pouvez également vous qualifier de concepteur visuel purement responsable de l'esthétique de notre site Web, qui peut inclure des boutons, des menus, des arrière-plans, etc. Dans ce cours, nous parlerons également beaucoup design numérique et du rôle d'un concepteur numérique. Et la principale différence entre un concepteur Web et un concepteur numérique réside dans le fait qu' un concepteur Web se concentre uniquement sur la conception de sites Web, et que le concepteur numérique possède un ensemble plus large de compétences. et un ensemble de responsabilités, qui peuvent inclure la conception et la création de bannières et de campagnes de bannières et d'émissions, graphismes animés, d'éléments interactifs, vidéos et également de sites Web. Il y a donc un chevauchement entre ces deux rôles et cela vaut toujours la peine d'être clarifié. Chaque fois que vous postulez pour un emploi, quelles sont les responsabilités réelles qu'ils s'attendent à ce que vous assumiez ? Maintenant, pour mieux comprendre les rôles dans le secteur des concepteurs de sites Web, il faut ajouter quelques termes supplémentaires qui peuvent vous aider. Vous avez probablement entendu parler du front-end et du back-end et ils simplifient les choses, tout ce qui a trait à la conception et à l'apparence d' un site serait considéré comme faisant partie du développement frontal. Mais cela inclut également le code HTML, CSS, le codage JavaScript, optimisation des moteurs de recherche, l'accessibilité, les problèmes entre navigateurs, etc. Encore une fois, en tant que concepteur Web, il se peut que vous deviez vous impliquer dans toutes ces choses. Donc, tout ce qui concerne l'aspect frontal du développement d'un site, Ce qui est rarement une tâche d'un concepteur Web est gérer également les tâches de développement back-end. Il s'agit donc plutôt de l'administration de bases de données, l'architecture des serveurs, de la sécurité, de la transformation des données, de la sauvegarde, etc. Maintenant, si vous venez d'un point de vue visuel et graphique , il s'agit probablement de la partie la moins attrayante de la conception Web, mais c'est évidemment aussi crucial pour que les choses fonctionnent. Et même si vous avez un blog simple, par exemple, vous devrez toujours disposer d'un système de gestion de contenu en arrière-plan. Donc, même si ce n'est pas géré par un professionnel qui fonctionne toujours dans le back-end qui gère toutes les données et informations affichées ou les éléments que les utilisateurs sont interagir avec. Il y a un terme supplémentaire que vous avez peut-être entendu, le développement complet de la pile, qui inclurait à la fois le front et le backend ensemble. Maintenant, l'expérience utilisateur est un autre sujet de grande envergure et nous le traiterons plus en détail dans une vidéo distincte. Mais en termes de conception Web, les trois termes et tâches essentiels sur lesquels vous devez travailler et améliorer autant que possible. Tout d'abord, c'est la navigation pour laquelle nous avons des menus, des boutons, des éléments déroulants et toutes sortes d' éléments interactifs sur un site. Et dans la conception d'impression, il s' agit généralement d'une chose assez simple et assez linéaire. Par exemple, dans un magazine, vous disposerez de la table des matières qui facilite la navigation. Ensuite, vous aurez des numéros de page sur les brins. Mais en plus de cela, c'est vraiment au lecteur de tourner physiquement les pages et de passer d' un article à l'autre. Acheteur disposant d'un site Web, il existe options et des possibilités ou des chemins presque illimités qu'un utilisateur peut emprunter. Et en tant que concepteur Web, vous devez réfléchir à des moyens de vous assurer que les utilisateurs peuvent facilement trouver tous les éléments de navigation et que toute l'expérience sur le site sera transparente. et pratique. Maintenant, il existe un terme encore plus large lorsqu'il s'agit de expérience d' un utilisateur avec un côté qui est la convivialité. Et c'est quelque chose qui inclut la navigation, mais aussi tous les autres aspects qui rendent un site utilisable. Donc, pourquoi la navigation se concentre davantage sur le passage d'une page à une autre, par exemple, la facilité d'utilisation inclurait également la mise en page générale d'une page Web. Quelle est la taille de certains éléments par rapport à d'autres, ou l'intensité du contraste entre les éléments. Mais en général, il s'agit principalement supprimer tous les obstacles éventuels susceptibles empêcher l' utilisateur de trouver les informations pertinentes qu'il recherche. Enfin, l'accessibilité est également très importante, est également très importante, ce qui fait en sorte que les personnes ayant des déficiences auditives ou de visibilité. Nous pourrons également utiliser le site sans aucune frustration ni difficulté. 3. Termes de base pour la conception web: Maintenant que nous avons couvert les principales responsabilités d'un concepteur Web, nous pouvons nous concentrer sur quelques termes supplémentaires avant de parler de choses plus complexes. Commençons par quelque chose de simple. Au-dessus du pli se trouve quelque chose que nous utilisons pour faire référence aux parties ou éléments d'un site qui apparaîtraient abord visibles sur l'écran de l'utilisateur, qu' il s'agisse d'un ordinateur de bureau ou d'un ordinateur portable ordinateur ou appareil mobile. Et en dessous du pli se réfère à tout le contenu supplémentaire de la page pour lequel les utilisateurs devront faire défiler vers le bas. Maintenant, même s'il s'agit plus souvent d'une séparation verticale dans le cas d'une navigation horizontale à l'intérieur d'un site, il se peut que vous ayez aussi au-dessus du pli à gauche, puis sous le pli plus loin de la droite. Mais en général, ce que vous devez toujours faire attention , c'est que la section de pliage ci-dessus de votre conception doit déjà être très engageante et instructive pour s'assurer que quiconque visite le le site partira immédiatement et ils passeront un peu de temps à l'explorer et espérons-le, à rester assez longtemps pour trouver ce qu'ils recherchent. Vous pouvez considérer au-dessus du pli d' un site comme la façade de la boutique, ce qui doit être assez excitant pour que les clients décident réellement de se rendre à la boutique ou à la couverture d'un magazine ou d'un livre, ce qui doit encore une fois être assez excitant pour que les utilisateurs puissent commencer à interagir avec le produit et finalement prendre la décision de l'acheter. Maintenant, vous vous demandez peut-être comment spécifier l' emplacement exact de ce dossier, où le défilement réel commence sur le côté lorsqu'il existe tant de tailles d'écran différentes. C'est en fait quelque chose que nous aborderons plus en détail lorsque nous parlerons spécifiquement des tailles d'écran. Mais puisque nous parlons de l' importance de cette section en termes de rétention ou d'engagement d'un visiteur. L'élément ou composant le plus courant qui occuperait la plupart de cela au-dessus de la zone de pliage est ce que nous appelons la section d'en-tête ou de héros. Et cette information doit vraiment introduire le côté afin qu'elle puisse avoir le titre ou le logo, également un slogan, une image ou une illustration convaincante, éléments de navigation, peut-être des témoignages et toutes les preuves supplémentaires ou les arguments de vente uniques qui méritent d'être mentionnés dès le début. Maintenant, en plus de faire en sorte que cette section de héros se démarque vraiment et attrayante, c'est aussi une bonne idée d'indiquer qu'il y a d'autres contenus pour le bas, ce qui donnera envie aux gens de faire défiler vers le bas et explorez le reste du contenu. N'oubliez pas que, comme dans le design imprimé, la première impression est extrêmement importante. Et c'est pourquoi il est si important de bien trouver l'en-tête ou la section héros ? Maintenant, dans le cas d'un site Web complexe, comme avec Adobe, au début, il peut sembler que la section en-tête ou héros soit assez simple et qu'elle ne contient pas beaucoup d'éléments. Mais il s'agit simplement de garder les choses simples et de s'assurer que les gens trouvent ce qu'ils recherchent rapidement ce qu'ils recherchent sans les accabler. Et remarquez comment ici dans la zone de navigation principale, outre le logo, nous avons ces cinq catégories principales, donc 12345 et ensuite quelques options supplémentaires ici sur la bonne recherche, les informations de compte, et un menu d'accès rapide, qui peut vous guider directement vers un outil spécifique. Mais voyons ce qui se passe si nous cliquons sur, par exemple, sur la créativité et le design. Maintenant, vous voyez que la plupart de la zone d' en-tête est par cet élément que nous appellerions un méga menu, qui ouvre beaucoup plus d' options de navigation pour les utilisateurs. Nous donnons maintenant toutes ces options au tout début là où elles ont été extrêmement écrasantes. C'est pourquoi il était important de garder tous ces éléments cachés sous un seul bouton. En règle générale, la bonne pratique est limiter les parties principales qu'un utilisateur peut prendre d'une zone d' en-tête à environ sept, donner ou retirer, dont les plus importantes doivent être placées. quelque part au centre, comme dans ce cas, gérer votre compte est probablement le plus important et il se démarque vraiment. Cela nous donne donc envie de cliquer dessus. C'est probablement le deuxième plus important. Et puis toutes les autres options de navigation que nous avons ici, une fois de plus, catégorisées et facilitées d'accès via ce méga menu. Un autre bon exemple est le site d'Apple, où une fois de plus, nous avons un design très simple axé sur le produit promu en ce moment, offrant deux options de navigation principales pour en savoir plus, découvrir en savoir plus sur le produit, ou pour aller l'acheter tout de suite. Et toutes les options supplémentaires que vous pouvez trouver sur le côté sont toutes classées et cachées sous ces options ici en haut. Maintenant, rappelez-vous qu'ils n' étaient que quatre ou cinq éléments ici, mais ils ne cessent de croître parce qu' Apple fait des choses tellement différentes. Mais c'est quand même un menu assez simple à passer. Et encore une fois, si je clique sur l'une de ces options, comme Mac par exemple, nous aurons le choix entre beaucoup d' options supplémentaires. Maintenant, vous savez probablement déjà que les éléments de navigation les plus importants d' un site ou des boutons. Et quand il s'agit de concevoir un site, il y a aussi quelques termes spécifiques que nous utiliserions pour définir un bouton dont la plupart du temps aurait une étiquette, peut-être une icône, le fond, qui pourrait également comporter une bordure autour de lui, selon l' esthétique du site, il peut également avoir des coins arrondis, ce qui est défini par le rayon de bordure. Ensuite, pour spécifier la distance entre l'icône et l'étiquette et la bordure du bouton, nous appelons le remplissage. Vous auriez donc des en-têtes en haut, à gauche , à droite et en bas. Et le remplissage est en fait un terme général qui est utilisé non seulement avec les boutons, mais presque tous les éléments que vous auriez sur un site Web, définissant l'espace directement autour du contenu lui-même. Et ce qui suit le rembourrage, c'est ce que nous appelons la bordure, qui est encore une fois définie par les quatre directions. Donc en haut, en bas, à gauche et à droite. Enfin, la plupart des éléments auraient également une marge, que vous pouvez considérer comme l' espace négatif ou l' espace blanc dans la conception Web. C'est donc quelque chose qui est défini comme gardé vide, en s'assurant qu'il y a suffisamment de distance entre tous les autres composants ou éléments du côté. En revenant parler un peu plus des boutons, il y a aussi les états que vous devrez concevoir individuellement. Et la plupart des boutons ont un état normal ou un état de repos. Il y a un état de survol, qui est principalement important sur les ordinateurs de bureau et sur les appareils mobiles. Mais les interactions se produisent en appuyant sur au lieu de cliquer avec la souris et sur l'état actif lorsque l' interaction réelle se produit en fonction du bouton, il peut également y avoir beaucoup de choses. d'options supplémentaires, comme celles que vous pouvez voir ici. Il peut également avoir une progression de chargement des états désactivés. En plus du type de boutons générique que nous avons vu jusqu'ici, il existe de nombreux types de boutons supplémentaires tels que des cases à cocher, des boutons radio, des commutateurs, des puces de choix ou des sélections multiples jetons. Et vous, en tant que concepteur, devez toujours l'utiliser chaque fois qu'ils sont les plus applicables. Par exemple, avec les boutons radio, vous souhaitez que l'utilisateur sélectionne une option spécifique. Pourquoi nous cochons les cases ? Les utilisateurs devraient s'attendre à pouvoir sélectionner plusieurs choix. Un autre terme commun que nous utilisons principalement pour désigner les boutons est appelé «  action » ou « CTA ». En fait, cela peut signifier n'importe quel élément du côté qui aidera les visiteurs à prendre une décision, qu'il s'agisse d'acheter un produit ou de s'inscrire à une newsletter, peu importe ce que vous décidez d'utiliser comme élément d'appel à l'action, il doit toujours se démarquer et être très important sur le côté. 4. Termes supplémentaires pour la conception web: Maintenant, lorsqu'il s'agit de faire référence aux couleurs dans la conception Web, nous utilisions les codes hexadécimaux ou les nombres hexadécimaux, qui est un système de 60 chiffres de base, signifie qu'il y a 16 symboles, y compris chiffres et des lettres pour définir les couleurs. Par exemple, si j'échantillonne l' une de ces couleurs de ce côté et que je viens au sélecteur de couleurs de Photoshop, vous pourrez voir ce code hexadécimal en bas. Celui-ci, par exemple, est d 27643. Mais avant d'essayer de comprendre exactement ce que cela signifie, il y a également un petit avertissement important ici dans Photoshop. Ce petit cube fait référence à tout problème pour Vab avec une couleur particulière. s'agit en fait pas d'une couleur sécurisée pour le Web. Qu'est-ce que cela signifie maintenant ? Il s'agit en fait d'une palette très limitée de 216 couleurs qui est standardisée et affichée manière cohérente sur tous les navigateurs. Et si vous souhaitez trouver la couleur similaire la plus proche que vous devez faire est de cliquer sur ce cube et vous pouvez le voir légèrement décalé vers la droite. Et nous pouvons comparer la sélection originale et cette nouvelle sélection l'une à l'autre. Mais si nous voulons voir les couleurs sur le Web, nous pouvons également cliquer sur cette option ici à gauche. Et comme vous pouvez le constater, il est très limité car toutes les couleurs que je choisirais autour cette zone donneraient les mêmes valeurs et le même code hexadécimal. Donc, si vous gardez un œil sur ce code hexadécimal, peu importe où je clique dans cette région, il nous donnera toujours le même code. Mais si je désactive les seules couleurs Web, nous pourrons nous déplacer et voir comment ce code hexadécimal se met à jour. Maintenant, la bonne nouvelle est que vous n'avez vraiment à vous soucier des couleurs de sécurité Web plus vraiment à vous soucier des couleurs de sécurité Web car ce serait une très petite fraction des utilisateurs qui pourraient rencontrer des problèmes avec la sécurité non Web. couleurs. Et il s'agit principalement des écrans qu'ils utilisent. Et s'ils ont plus de dix ou 15 ans, disons. Mais même si les couleurs de sécurité Web ne sont pas importantes, les codes hexadécimaux sont toujours très importants à comprendre car c'est ainsi que chaque langage de codage se réfère aux couleurs. Et si cela vous intéresse, les deux premiers symboles d'un code hexadécimal se réfèrent à l'intensité des rouges en RVB que le deuxième jeu, qui est le troisième et le quatrième symbole, serait le intensité des verts. Enfin, ces deux-là à la fin seraient l'intensité du bleu. Il s'agit donc des canaux RVB ou rouge, vert et bleu. Et lorsque le code hexadécimal affiche un 00, ce n'est pas une intensité, ce qui signifie qu'aucune couleur n'est utilisée. Alors que si les deux symboles F, F, cela signifie que c'est plein d'intensité. Ainsi, vous auriez la couleur elle-même. Et comme RVB est un modèle de couleur additif, lorsque vous avez les trois canaux vides ou réglés sur 0, vous obtiendrez du noir car la couleur et valeur auraient tous une intensité maximale, donc les trois couleurs entièrement visibles, alors elles s'additionneraient à être blanches. Maintenant, ne vous inquiétez pas, vous n' avez pas besoin d'apprendre de codes hexadécimaux ou de décrire des couleurs spécifiques avec ces codes, il est juste utile de savoir comment cela fonctionne. Mais la plupart du temps, vous pouvez sélectionner des couleurs avec un outil similaire comme le sélecteur de couleurs de Photoshop, quelle que soit l' application que vous utilisez pour concevoir un site. Et enfin, il n' y a que quelques termes supplémentaires qui méritent d'être mentionnés lorsqu'il s'agit de défiler. Tout d'abord, qu'est-ce qu'un élément fixe ou collant ? C'est en fait quelque chose qui restera à l'écran pendant que tous les détails supplémentaires défilent vers le haut et vers le bas. Bien que cet exemple montre un téléphone, cela s'applique bien sûr également aux versions de bureau des sites. Par exemple, sur notre site Web, si je fais défiler vers le bas, vous pouvez voir que la zone de navigation principale reste visible. Ce serait donc un élément collant ou fixe. Puisque nous sommes de ce côté-ci, il y a aussi un autre détail intéressant que nous pouvons voir ici. C'est quelque chose qui s'appelle le défilement parallaxe. Lorsque vous pouvez voir les détails se déplacer à une vitesse différente sur le côté. La section relative à l'adhésion Pro fait donc défiler à une certaine vitesse. Mais les détails de fond ou le graphique à l' arrière-plan de celui-ci sont, semblent stationnaires ou fixes. On a donc presque l'impression qu' il y a deux couches dans la composition et qu'elles se déplacent à différentes vitesses, c'est génial pour créer l' illusion de profondeur et général, rendre la science plus intéressante. Et enfin, puisque nous parlons de défilement, il y a aussi un défilement infini avec sites comme Pinterest où vous pouvez faire défiler vers le bas sur le fil d'accueil et les nouvelles épingles. continuerait à apparaître constamment. C'est donc comme une page sans fin. Mais maintenant que nous avons abordé certains de ces termes essentiels dans la prochaine vidéo, nous pouvons nous concentrer plus précisément sur la structure des sites Web. 5. Structure d'un site web: Bien qu'il existe de nombreux types de sites Web différents qui sont encore quelques termes qui s'appliquent à presque tous. Un terme couramment utilisé est conteneur ou emballage, ce qui signifie essentiellement tout ce qui retient la structure ou le contenu d'un site. Il s'agit donc d'une région qui a normalement une largeur fixe, qui peut être de 1280 pixels, par exemple. Et sa hauteur dépend bien sûr de la quantité de contenu d'une page. La plupart des sites Web sont alignés au centre, ce qui signifie qu'à gauche et à droite de l'enveloppe, vous aurez normalement un arrière-plan, qu'il s'agisse d'espaces blancs ou peut-être d'une couleur ou d'un motif. À l'intérieur du conteneur, vous auriez quelques éléments très distincts, comme la zone d'en-tête, que nous avons déjà abordée dans la vidéo précédente. Et normalement, le menu de navigation principal fait partie de l'en-tête. Il peut également s'agir de deux éléments distincts, et le menu peut être au-dessus de l'en-tête ou vice versa. Mais essentiellement, ce sont les premiers éléments que la visiteuse verrait lorsqu' ils vont sur son site Web. Et ces deux-là ensemble prendront la plupart de ce que nous considérons comme ci-dessus, se replient sur le côté. Plus bas, vous atteindrez le contenu de la page principale qui peut prendre toute la largeur du conteneur. Vous pouvez également avoir la barre latérale à gauche ou à droite de la page. Dans de rares occasions des deux côtés. De même, la façon dont nous avons commencé avec l'en-tête pleine largeur, nous finirons également par un pied de page pleine largeur, qui aura normalement des informations de contact, un petit plan du site et quelques des liens supplémentaires comme les médias sociaux, etc. La plus grande partie du site est normalement la zone de contenu dont nous avons déjà parlé. Et pour faciliter la navigation et séparer le contenu en petits morceaux. Lorsque les utilisateurs défilent vers le haut et vers le bas, il est recommandé de créer des sections distinctes ou, comme on le fait parfois référence, champs que vous pouvez également voir ici. Les domaines que je mets en évidence et chacune de ces sections devraient avoir un rôle distinct. Il peut s'agir de la newsletter dans laquelle les gens peuvent s'inscrire et recevoir des informations sur ce site particulier. Un bon d'analyser un site Web et la quantité de sections utilisées est simplement d' utiliser la commande ou le contrôle moins les raccourcis clavier dans n'importe quel navigateur que vous utilisez, cela devrait fonctionner, ce qui va vous aide à effectuer un zoom arrière et à obtenir cette vue d'oiseau où vous pouvez voir l'ensemble de la structure à distance. Nous pouvons donc voir clairement que le conteneur ou l'emballage aligne tout le contenu au centre. Et il y a ces sections distinctes séparées par couleur, comme ici nous avons cette toile de fond noire ou nous avons la couleur grise pour cette section ici. Et nous avons également cette jolie ligne de dégradé qui divise le pied de page du reste de la page. Lorsque vous regardez le site à cette distance, vous remarquerez également un alignement vertical entre les éléments. Par exemple, nous pouvons voir que le bord de ces images est aligné. Mais si je descends plus loin, il y a aussi un alignement sur ces composants. Et la même chose sera vraie au bord droit de ces éléments. Et les deux bords à gauche et à droite définissent normalement l'enveloppe ou le conteneur lui-même ou la largeur de la page. Cependant, cela peut être trompeur si vous vous concentrez simplement sur le contenu, il est toujours préférable de regarder la page complète, comme dans ce cas, le menu principal en haut ou le pied de page en bas. Et avec cela, nous pouvons voir qu'il y a aussi cet espace à gauche et à droite ici, qui est considéré comme la marge dans le site. Nous pouvons donc le voir ici à gauche, et nous pouvons également le voir sur le côté droit. Et c'est encore quelque chose qui serait considéré comme faisant partie du conteneur. En ce qui concerne les composants réels ou les blocs de construction d'un site, nous ferions référence à des éléments visuels et fonctionnels et à une copie, aux polices, aux couleurs, aux images, aux vidéos, aux animations, le juridique lui-même, même l'espace entre les éléments seraient tous considérés comme des éléments visuels. Alors que tout ce qui est utilisé pour la navigation ou les interactions, y compris les boutons, les listes déroulantes et les menus, serait considéré comme des éléments fonctionnels. Une tâche de concepteur Web consiste à s'assurer qu' il existe un bon équilibre entre ces éléments. Un bon site Web doit toujours indiquer clairement si nous examinons simplement un élément purement visuel ou quelque chose qui a également une fonction. Par exemple, lorsque je survole cette image, je peux voir que mon curseur change, ce qui signifie que lorsque je clique dessus, quelque chose va se passer. Mais outre le changement de curseur, rien d'autre n' indiquait qu'il s'agit un élément cliquable qui peut être de nombreuses façons de rendre les choses plus évidentes. Ainsi, dans le cas d'une image, par exemple, il peut s'agir d'un effet de survol ou d'une petite légende quelque part sur l'image indiquant que cliquez ici pour en savoir plus. En général, rappelez-vous qu' une bonne navigation présente trois caractéristiques principales. Simplicité, clarté et cohérence. Et nous continuerons d'y revenir tout au long de ce cours. Mais il existe également un autre terme que vous pourriez rencontrer : architecture de l'information ou IA, qui fait encore une fois référence à l' organisation des informations et à leur affichage sur notre site Web d'une manière qui est clair, intuitif et sensé. 6. Grilles, plan du site, maquettes, modèles de navigation: Tout comme dans la conception d'impression, hiérarchie visuelle est également extrêmement importante dans la conception Web. Et l'un des principaux moyens de créer cette hiérarchie consiste à utiliser une grille. Ainsi, une grille de site Web peut aider à maintenir visuel ou à l'intérieur du site et entre les éléments. Tout comme dans la conception d'impression, une grille est constituée de colonnes. Ou en cas de conception Web, ces unités sont également appelées unités. Par exemple, à 12 unités, la grille ferait référence à 12 colonnes, ce qui est d'ailleurs la plus couramment utilisée dans la conception Web. Voici un exemple de cette utilisation par le site Web de la BBC. Maintenant, les espaces entre les colonnes que nous appelons gouttière et où plusieurs unités sont utilisées ensemble pour certaines sections d'un site, nous les appelons colonnes. Par exemple, ici, il s'agit d'une colonne à trois unités, ou d'une autre sur la gauche, deux fois plus de dettes importantes, six colonnes d'unités et plusieurs colonnes peuvent former un champ qui ajoute ces divisions horizontales au sein d'une page, que l'on peut également appeler section S. Celui-ci est ici en haut, et il serait considéré comme une autre, encore une fois, dans ce cas composé de trois colonnes et chaque colonne constituée de quatre unités. Pour aller au-delà de la structure d' une seule page au sein de notre site Web, nous utiliserions normalement un plan du site, qui est une représentation diagrammatique de toutes les sections et pages, ainsi que du les liens entre eux. Et c'est un excellent moyen de visualiser les principales unités de navigation et les relations au sein d'un site Web. Un autre terme très courant et auquel nous continuerons référer dans ce cours est le filaire, qui est à nouveau principalement utilisé lors la phase de planification d' un site ou d'une application, ce qui est simplifié esquisse ou brouillon de la structure de page finale représentant principaux blocs de construction tels que des images ou des vidéos de celle-ci, rectangles et des copies généralement avec quelques lignes horizontales. Vous avez peut-être également entendu parler de modèles de numérisation, qui, dans le cas de la conception Web, affectent également la hiérarchie visuelle des attribués. Voici quelques exemples de ces cartes thermiques où nous pouvons voir où les yeux des visiteurs ont tendance à bouger et à rester le plus longtemps. Les zones les plus fréquemment observées sont en rouge. Et nous pouvons immédiatement voir un motif particulier que l'on appelle très communément le motif F. Nous pouvons donc le voir ici aussi. Cela est vrai pour la plupart des sites où il y a beaucoup d'informations ou de copies spécifiques. Bien qu'une autre méthode très courante de numérisation à travers une page soit appelée motif Z. Z, qui, de la même manière que le modèle F, nous commencerons en haut à gauche. De là, il passait à droite, puis se croisait en bas à gauche de l'écran , puis passait en bas à droite. Nous pouvons voir, dans le cas de ce côté, cela fonctionne très bien pour ce schéma de numérisation car c'est exactement l'ordre dans lequel les informations sont affichées et qui auront du sens pour les gens. Ainsi, une structure simplifiée utilisant ce modèle de numérisation peut être l' endroit où nous avons le logo pour commencer ou le nom de l'entreprise que les options d'inscription ou de connexion à droite. Ensuite, nous avons l'image du héros principal ou la section héros avec quelques textes utiles en dessous. Et enfin, le CTA ou le bouton d'appel à l'action ou le lien. Et l'idée, c'est au moment où quelqu'un arrive ici, il sait exactement à quoi il s'inscrit ou à quoi il achète. C'est fou, mais statistiquement, il ne faut que 50 millisecondes pour un visiteur du site Web décide s'il est au bon endroit ou non. En gros, c'est le temps qu'il faut pour qu'ils prennent une décision, qu'ils aiment ou non une page. C'est pourquoi il est si important utiliser la hiérarchie visuelle lors la définition de la structure d'un site et de s'assurer que les visiteurs ne seront pas frustrés. Et ils trouveront toujours ce qu'ils recherchent. 7. Tailles d'écran et design adapté: L'une des choses les plus difficiles dans la conception Web est que l'expérience d'un utilisateur est difficile à prévoir car elle peut vraiment varier en fonction de nombreux facteurs. Mais surtout, la taille de l'écran de l'appareil qu' ils utilisent pour accéder à Internet. Maintenant, comme vous ne pouvez pas prédire quelle sera la taille d'écran la plus couramment utilisée, techniquement, vous devez vous assurer qu'un site fonctionnera et fonctionnera correctement sur n'importe quelle taille d'écran. Et pour y parvenir, il existe plusieurs méthodes telles que conception réactive ou la conception adaptative, et nous en discuterons plus en détail dans cette vidéo. abord, commençons par ce graphique intéressant qui montre qu' au cours des dix dernières années, il y a eu un énorme changement et un changement important dans la façon dont les gens interagissent avec sites et la façon dont ils sont les plus courants. utilisaient leur téléphone portable. Ainsi, plus de 50 % du trafic Web mondial se produit sur les téléphones des gens. C'est pourquoi, de nos jours, la plupart des entreprises envisageraient la première approche de conception Web mobile, une philosophie conçue qui vise à rendre l'expérience utilisateur la meilleure possible sur les petits écrans, les mobiles. d'abord, puis adaptez la conception et la mise en page à écrans plus grands dans une deuxième étape, cette approche s'aligne très bien avec l' optimisation des moteurs de recherche de Google, ce qui favorise également mobile premier design ou sites Web compatibles avec les mobiles. Pour cela, il existe en fait un outil officiel Google en ligne où vous pouvez saisir une URL et après quelques secondes, vous obtiendrez le résultat. Et dans ce cas, je viens de faire un test avec notre propre site et il est sorti sous la forme d'une page adaptée aux mobiles. Il existe maintenant un autre aspect des appareils mobiles que vous devez également garder à l'esprit lorsque vous concevez des sites. Certaines personnes peuvent en réalité voir le site en format portrait, tandis que d'autres peuvent le regarder en format paysage. Et cela peut devenir encore plus compliqué lorsque vous envisagez également des tablettes ou différentes tailles, qui peuvent à nouveau avoir les deux orientations. Mais ce graphique nous aide à comprendre qu' un autre comportement ou statistique très intéressant selon lequel, en fonction de la taille de l'écran d'un appareil mobile, l'orientation préférée changera radicalement. Et nous voyons clairement que plus l'écran est grand, plus les gens seront susceptibles l'utiliser en format paysage. Alors que dans ces tailles plus petites, qui sont les tailles de téléphones mobiles les plus courantes, il est plus probable que les gens les utilisent en format portrait. Nous avons déjà parlé de l'approche de conception mobile d'abord, où nous considérons d'abord le plus petit écran, puis l' adaptons à des écrans plus grands. Et bien qu'il soit inversé, l'ordre de priorité repose toujours sur le même principe que l'approche responsive web design, ce qui signifie encore une fois que la mise en page du site s'adaptera automatiquement au taille d'écran disponible. Mais ce qui est important, c'est que vous regardiez toujours le même site sera simplement rendu différemment. Et le plus souvent, la distinction entre les différentes tailles d'écran repose sur les points d'arrêt définis dans le code CSS d'un site. Et ici, nous pouvons voir un exemple de quelques points d' arrêt couramment utilisés qui se réfèrent à la largeur du site en fonction de la taille d'écran disponible. Ainsi, 1920 pixels, par exemple, seraient la plus grande taille pour laquelle vous auriez besoin de concevoir. 320 pixels constituent une norme pour la taille d'écran la plus étroite ou la plus petite. Et nous pouvons voir que lorsque vous tenez un téléphone, avoir seulement autant d' espace disponible que la zone de contenu réel serait même moindre. Il s'agirait donc d'environ 280 pixels avec les marges à gauche et à droite. Désormais, pour la plupart des appareils mobiles, vous disposerez de ces points d'arrêt plus petits et tous ces points d'arrêt utilisent normalement une seule colonne. La structure serait donc assez uniforme et vous faisiez simplement défiler vers le haut et vers le bas pour accéder à certaines parties du site. Si vous avez de plus grandes tailles d'écran, vous commencerez à introduire plus de colonnes, divisions horizontalement sur le côté jusqu'à ce que vous atteigniez peut-être trois ou quatre colonnes. Même lorsque vous utilisez votre navigateur sur votre ordinateur, vous pouvez réellement tester un site et comment il s'adapte aux différentes tailles d'écran. Nous pouvons donc voir quand j'atteindrai un certain point sans côté, ça va commencer à changer le contenu. Il y avait un point de rupture pour que je puisse sauter d'avant en arrière. Et nous pouvons voir entre les deux points d'arrêt comment certains éléments disparaissent. Ou le menu en haut est simplifié en une simple icône de hamburger comme celle-ci. Ensuite, si je vais encore plus à gauche, c'était un autre point d'arrêt. Les deux colonnes sont donc maintenant simplifiées en une seule colonne. Et encore plus loin ici, tout se trouve maintenant dans une seule colonne. Et puis, si j'allais plus loin, il se rapproche de plus en plus de ce que nous verrions sur un téléphone portable. Voici un autre excellent exemple de site réactif. Encore une fois, si je commence à changer la largeur de mon navigateur, tous les éléments sont immédiatement mis à jour et il y a eu un point d'arrêt. Nous pouvons voir clairement comment tout est réorganisé. Et alors que je descends encore plus loin, nous aurons un autre point d'arrêt visible juste là. Et c'est probablement le dernier. Encore une fois, deux points d'arrêt majeurs. Un juste ici, puis un autre juste là. Ce qui est génial dans ce site, c'est qu'il utilise très bien ces blocs et garde tout est toujours très facile d'accès et trouver quelle que soit la taille d'écran que vous utilisez. Voici également un exemple de visualisation côte à côte la version mobile et de bureau du même site Web. Et bien que la convivialité soit la priorité, et outre la convivialité, la similitude entre les différentes versions du site est également importante. Vous souhaitez que les utilisateurs bénéficient d'une expérience très similaire quel que soit l'appareil qu'ils utilisent pour accéder à un site. conception fluide et la mise en page fluide sont également un autre terme que vous étiez probablement ici, ce qui signifie qu'au lieu de référencer ou d'utiliser pixels pour définir la taille d'un écran. Ainsi, par exemple, la largeur d'un site, calculerait tous les composants du site à l'aide de pourcentages. Ainsi, à mesure que la fenêtre est de plus en plus petite ou plus grande, la mise en page fluide ajuste automatiquement et dynamiquement toutes les valeurs, encore une fois en utilisant des pourcentages. 8. Conception adaptative et densité de pixels: Maintenant, il existe également une autre grande catégorie de conception Web appelée conception adaptative au lieu de la conception réactive, même si l'objectif est le même, pour s'assurer que les utilisateurs peuvent expérimenter un site de la manière la plus confortable en fonction de l'appareil qu'ils utilisent. Mais grâce à un design réactif, il ne s'agissait que d'adapter un design universel aux différentes tailles d'écran. Dans le cas d'une conception Web adaptative, il s'agirait de conceptions totalement uniques et indépendantes créées pour différentes tailles d'écran. Et le principal avantage de la conception Web adaptative est qu'elle améliorera toujours la vitesse du site. Cependant, il est beaucoup plus long et coûteux de développer un site comme celui-ci, car il est évident que vous devrez créer plusieurs versions et vous devrez également maintenir et mettre à jour chacune de ces versions côte à côte. Maintenant, pour aggraver les choses, dans le cas de la conception Web, ce n'est pas seulement la taille de l'écran que vous devez garder à l'esprit, mais aussi la densité de pixels d'un appareil. Et ne confondez pas cela avec la résolution d'un écran. Ainsi, avec cet iPhone particulier, la résolution de l'écran au format paysage est de 1136 pixels 640 pixels à 326 PPI. Densité de pixels, PPI représente les pixels par pouce, de la même manière que ce que nous utilisons en impression, où 300 PPI seraient considérés comme une impression haute résolution, où les pixels d'origine d'une image ou imprimé dans une densité telle que vous ne pourrez pas distinguer ces pixels les uns des autres et vous verrez simplement une image continue. Et encore une fois, la densité des pixels fonctionne de la même manière. Plus ce nombre est élevé, plus les détails seront fins à l'écran. Et en général, cela améliorera l'expérience visuelle. Vous avez probablement entendu parler des écrans Retina d'Apple. Et il s'agit essentiellement ces écrans à densité de pixels plus élevée. Mais de nombreuses autres normes sont utilisées pour ces écrans à haute densité. Et du point de vue de la conception Web, suffit de s'assurer qu' il y a toujours un repli pour les images pouvant fonctionner pour ces écrans à densité élevée. Bien sûr, cela n'est important que pour les images en pixels ou raster, car dans le cas de graphiques vectoriels, ils peuvent s'adapter à la taille nécessaire sans perdre de qualité. Et il existe en fait un format de fichier vectoriel spécifique qui est utilisé dans la conception web, que nous aborderons plus en détail dans la prochaine vidéo. 9. Formats de fichiers couramment utilisés: Les quatre formats de fichiers les plus importants en matière de conception Web sont les jpegs, les PNG, les SVG et les cadeaux. Sur ce tableau, vous pouvez voir une excellente comparaison expliquant les principales différences entre elles et une excellente explication qui vous aidera à décider quel format de fichier convient mieux à l'image avec laquelle vous travaillez. Le moyen le plus simple de comparer ces formats phi les plus couramment utilisés est dans la conception Web consiste à utiliser photoshops, option Enregistrer pour le Web, que vous pouvez trouver dans le menu Export de fichiers. Une fois que vous avez sélectionné celui-ci, vous pourrez en choisir deux ici dans le coin supérieur gauche avec lesquels vous pourrez comparer la qualité d' image d'origine, le format de fichier spécifique ou le préréglage qui vous allez choisir ici du bon côté. Dans ce cas, par exemple, si je sélectionne le format de fichier JPEG, nous pouvons voir que la taille actuelle du fichier est toujours très élevée. C'est près de trois mégaoctets. Mais en réduisant les dimensions réelles des pixels, nous pouvons déjà améliorer cela. Donc, au lieu d'avoir plus de 2 000 pixels, nous pouvons peut-être descendre à une largeur de mille pixels. Et en zoomant un peu plus près, nous pourrons garder un œil sur la qualité. Mais surtout, avec le format de fichier JPEG, lorsque vous souhaitez modifier cette option, c'est le paramètre de qualité réel que nous pouvons définir sur 0, ce qui entraînera la plus grande quantité de compression. artefacts. C'est donc essentiellement ces petits blocs que nous pouvons voir ici à droite. Mais en utilisant la qualité la plus faible, nous obtenons également la taille de feu la plus basse possible, qui dans ce cas est inférieure à 50 kilo-octets. Maintenant, bien sûr, c'est quelque chose que vous pouvez modifier et trouver la meilleure option pour tout ce que vous faites la plupart du temps, régler cela autour de 50 vous donnerait un très bon résultat où la compression n'est guère perceptible, mais la taille du fichier va encore être considérablement réduite par rapport à l'original ou par rapport au paramètre JPEG de la plus haute qualité. Le principal avantage de l'utilisation du format de fichier PNG par rapport au format JPEG est qu'avec ceux-ci, vous pourrez également inclure des informations de transparence. Et c'est en fait un décor que vous pouvez voir tout de suite ici en haut. Mais si vous utilisez ce format de fichier pour la photographie, vous devez vous assurer qu'il est réglé sur PNG 24, ce qui signifie une profondeur de 24 bits, par rapport à PNG huit, qui est une version plus limitée de le même format de fichier avec seulement 256 couleurs ou une profondeur de huit bits. Maintenant, même avec cette version couleur limitée de PNG, le format de fichier serait encore beaucoup plus élevé que le format jpeg à compression moyenne. Nous pouvons voir que c'est presque deux fois plus élevé, soit environ 400 kilo-octets. Pourquoi sommes-nous de la meilleure qualité ? Donc PNG 24, ce serait le plus grand, dans ce cas, qui sera de 1,2 mégaoctets, presque dix fois plus grand que le JPEG compressé. Mais quand il s'agit d'illustrations de graphiques plutôt que de photographies, vous voudriez normalement utiliser des PNG. Nous pouvons donc voir qu'un JPEG entraînerait 41 kilo-octets en utilisant le paramètre de qualité de 50. Et si je passe au format PNG 24, la taille du fichier sera exactement la même. Cependant, nous pouvons déjà utiliser ici l' avantage d' inclure la transparence dans le fichier, qui facilitera l'utilisation de ce graphique sur différentes couleurs d' arrière-plan, par exemple sur notre site Web. Cependant, lorsque je passe à l' option PNG huit de profondeur de couleur inférieure, nous obtenons immédiatement une taille de fichier beaucoup plus petite, ce qui ne fait que 15 kilo-octets. Et comme il n' y a pas de dégradés, effets de flou ou de détails photographiques, les 256 couleurs seront plus que suffisantes pour représenter l'image et nous donner exactement le même résultat que celui que nous avons vu dans la version originale. Maintenant, un fichier GIF est très similaire au format PNG. Encore une fois, il est limité à 256 couleurs et c'est en fait le maximum que vous pouvez enregistrer. Cependant, ici, vous pouvez même aller en dessous de cela. Nous pouvons donc aller jusqu'à deux couleurs, ce qui entraînera bien sûr la plus petite taille de fichier. Cependant, dans ce cas, nous pouvons simplement passer à huit couleurs. Et tout comme pour P&G ici, vous pouvez également décider si vous voulez que la transparence soit incluse ou non. Lorsque vous l'activez, elle sera considérée comme une couleur dans le tableau de couleurs. Aujourd'hui, l'un des principaux avantages d'un GIF par rapport au PNG est qu'il prend en charge l'animation d' images. Voici donc un exemple de fichier GIF comportant 12 images. Et nous pouvons jouer l'animation ici. Et nous pouvons également décider combien de fois nous voulons que cette boucle par défaut soit définie pour toujours. Mais bien sûr, nous pouvons changer cela facilement. Et toutes ces images combinées ensemble entraîneraient une taille de fichier de 32 kilo-octets. La meilleure façon d'étudier ces différents formats de fichiers est de sauvegarder quelques exemples de différents sites Web. Ouvrez-les dans Photoshop. À l'aide de l'option Enregistrer pour le Web, vous pourrez voir les paramètres utilisés lors de leur enregistrement. Nous discuterons plus en détail de l'animation Frame et de la façon de la configurer dans Photoshop. Une fois que nous sommes arrivés à la section Création de bannières dans ce cours. 10. SVG, WebP et JPEG 200: Désormais, lorsqu'il s'agit d'enregistrer des fichiers SVG ou Scalable Vector Graphics, il est recommandé d' utiliser Illustrator. Et à partir de là, il vous suffit d'aller dans Fichier, Enregistrer sous. Ensuite, à partir du format, vous pouvez sélectionner deux types de SVG. C'est la version normale ou compressée. Et en général, l'option compressée vous donnera une taille de fichier légèrement plus petite. Toutefois, ce format n'est pas aussi largement pris en charge que le SVG standard. Donc, je vais juste choisir ça. Et une fois que j'ai cliqué sur Enregistrer, nous obtenons les options supplémentaires ici. Il y a en fait quelques profils différents et d'autres options si vous voulez approfondir les choses. Mais ce qui est le plus intéressant, c'est que lorsque vous cliquez sur le code SVG, il se transforme en code pouvant être utilisé sur les sites Web. Il peut donc être copié et collé directement dans le code d'un site. Et cela sera déjà en mesure de représenter l'image dans un navigateur. Et tout comme pour les graphiques vectoriels dans la conception d'impression, lorsque vous avez un fichier SVG sur un site comme celui-ci, le principal avantage en plus la faible taille du fichier est qu' il est totalement indépendant de la résolution. Donc, même lorsque je zoome très près, nous verrons toujours des bords nets et nets. Nous ne verrons donc jamais de pixelation. Mais il y a beaucoup d'autres choses que vous pouvez faire avec les SVG. Vous pouvez même y inclure des animations. Vous pouvez également les utiliser pour les polices. Voici un autre exemple intéressant de fichier SVG, qui inclut non seulement des animations, mais même des interactions. Je peux donc contrôler le cercle et les chiffres suivent également les changements que je fais. Et toutes les informations requises pour cela retournent le code lors de l'écriture dans les langages HTML, CSS et JavaScript. Enfin, il convient également de mentionner un autre format de fichier qui est plus en plus largement utilisé sur les sites Web. Il s'agit du format WebP développé par Google. Malheureusement, il n'est pas encore pris en charge nativement dans Photoshop. Mais vous pouvez trouver un plugin officiel de Google que vous pourrez télécharger à partir du lien indiqué sur le tableau. Une fois que vous l'aurez installé, vous pourrez ouvrir les fichiers Web Py dans Photoshop. Mais surtout, vous pourrez également enregistrer dans ce format de fichier. Donc, juste pour vous montrer sur mon ordinateur, je l'ai déjà installé. Et si je vais dans le menu Fichier et que je choisis Enregistrer une copie. Ici, en bas, je trouverai l'option VAB p sharp. Ce sera donc le format de fichier web py que nous pouvons voir ici en haut. Une fois que j'ai cliqué sur Enregistrer, j'obtiendrai ces paramètres et je peux même voir un aperçu de certains détails. Et tout comme avec un JPEG, vous pourrez contrôler la qualité. Ainsi, soit en enregistrant quelque chose de manière totalement sans perte, soit en utilisant le paramètre de pertes, vous pouvez réduire la taille du fichier. Ce format de fichier prend en charge à la fois l'animation et la transparence. Donc, d'une certaine manière, il combine tous les avantages des fichiers JPEG, PNG et GIF est désormais largement pris en charge par la plupart des navigateurs. Je recommande donc vivement de commencer à l'utiliser dans des projets de conception Web. terminer, il convient de mentionner qu'il y a eu une tentative d'introduction d' une nouvelle norme pour les fichiers JPEG appelée JPEG 2 mille, qui est en fait prise en charge nativement dans Photoshop, qui permet d'obtenir une meilleure qualité d'image taille de fichier plus petite que les normes JPEG d'origine. Cependant, malheureusement, cette nouvelle norme ne s'est pas vraiment accrochée. La plupart des plates-formes ne supportent pas sa queue. C'est pourquoi je préfère utiliser ces formats de fichiers originaux ou le nouveau format Web dont nous avons parlé. 11. Conception UX et UI: Vous avez probablement entendu parler des termes UX et conception de l'interface utilisateur, ou expérience utilisateur et conception de l'interface utilisateur. Et la plupart du temps, ces termes apparaissaient lorsque nous parlons du développement d'une application et d'un outil en ligne, une application mobile. Mais il peut également être fait référence dans le cas de projets de conception Web. Essentiellement, chaque fois que vous créez quelque chose où utilisateurs interagiront avec votre produit, vous devez réfléchir à l'expérience de l'utilisateur et assurer qu'elle est aussi fluide que possible. Aujourd'hui, les concepteurs UX et UI sont deux professions distinctes, même s'ils travaillent ensemble et qu'ils ont des responsabilités partagées. Ils n'ont pas vraiment à posséder le même ensemble de compétences. Un concepteur UX se concentrerait sur la stratégie, la planification, les tests et essayerait généralement comprendre le problème qui doit être résolu et de trouver une bonne solution. Alors qu'un concepteur d'interface utilisateur se concentrerait sur des éléments tels que la topographie, la conception visuelle, les graphiques, icônes, l'illustration et la couleur. Mais surtout, ces deux règles sont liées l'une à l'autre. Le concepteur d'interface utilisateur ne serait donc pas en mesure de faire du bon travail sans le travail initial d'un concepteur UX. Donc, la plupart du temps, le travail commence ici par la planification. Puis, à la toute fin, il peut atteindre le stade des conceptions visuelles réelles. L'un des meilleurs moyens d' imaginer ces deux rôles et responsabilités et comment ils peuvent s' appuyer sur le travail de l' autre est ces cinq éléments de l'expérience utilisateur, par exemple où le travail est toujours commence par la stratégie. C'est la première couche ou fond de teint. Et c'est en fait l'étape la plus abstraite. À partir de là, tout devient plus en plus concret alors que nous remontons chaque couche après la stratégie pour atteindre la portée. Ce sont donc les exigences réelles que le projet doit répondre. À partir de là, on peut créer une structure qui peut ensuite être affinée dans les squelettes ou les filaires. Enfin, la phase de conception arrive au niveau de la surface lorsque nous nous concentrons sur ce que les utilisateurs verront réellement. Maintenant, vous vous demandez peut-être, dans ces cinq couches, que la séparation serait entre les responsabilités des concepteurs UX et des concepteurs d'interface utilisateur ? Je dirais que les deux couches supérieures sont quelque chose sur lequel le concepteur d'interface utilisateur se concentrerait. Alors que les trois couches inférieures relèveraient davantage d'un rôle de concepteur UX, mais généralement, il y a toujours un chevauchement. Je dirais donc que toutes ces trois couches au milieu pourraient être des responsabilités partagées. Maintenant, une chose qui se situe entre ces deux rôles est que ces deux professionnels devront s' appuyer sur le design thinking. Et il s'agit en fait d'un terme principalement utilisé dans ce domaine. Cependant, le design thinking peut également être appliqué à n'importe quel autre domaine de la conception graphique. Et c'est comme une méthode ou un processus où vous pouvez suivre les étapes les plus importantes pour atteindre le produit final. Tout commence donc toujours par le défi de la conception, identifiant quel est le problème et ce qui doit être résolu. Puis vient la phase d'empathie, qui concerne principalement les entretiens et l'observation des utilisateurs qui effectuent certaines tâches. Ensuite, en se basant sur ces observations et en définissant exactement le problème, l'idéation peut commencer, ce qui peut ensuite passer à la création prototypes réels, puis à les tester. Désormais, si vous souhaitez entrer dans ce domaine, soit en tant que concepteur d'interface utilisateur ou d'interface utilisateur, vous devez apprendre quelques termes essentiels. De même que tous les autres domaines de la conception graphique. Nous allons donc en couvrir quelques-uns dans cette vidéo. Tout d'abord, une personne d'utilisateur est une personne fictive confectionnée qui est un archétype ou un utilisateur d'un produit dont les objectifs et les caractéristiques représentent le plus grand groupe d'utilisateurs du produit. La définition de ces persona utilisateur est au début d'un projet, c'est très utile. Et c'est quelque chose que vous feriez référence à un document similaire à celui du dossier de projet. Une fois que vous avez vos personas d'utilisateurs, vous proposerez également des scénarios qui définiront quand et comment une histoire d'utilisateur se déroule. Et c'est plutôt un récit, qui décrit comment cette musique se comporterait dans une certaine séquence d'événements. Enfin, il est également important de définir le ou les objectifs d'un utilisateur, ce qui est la principale motivation pour laquelle cet utilisateur agit. Une fois qu'ils ont atteint leurs objectifs, c'est à ce moment que le scénario prend fin. Une fois que les personas, les scénarios et les objectifs des utilisateurs sont définis, vous pouvez continuer à explorer les moyens de définir les fonctions les plus importantes de votre application ou de votre outil sur lequel vous travaillez. L'une de ces méthodes est appelée User Story Mapping, où toutes les tâches potentielles sont répertoriées. Il s'agit donc de classer toutes les exigences en matière de fonctionnalités du point de vue de l'utilisateur, commençant par les tâches les plus importantes qu'il envisage d'accomplir, puis de déplacer sur des tâches ou des fonctionnalités supplémentaires dans l'ordre dans lequel ils souhaiteraient probablement les accomplir. C'est un excellent moyen de filtrer les caractéristiques les plus importantes d' un produit et de s'assurer qu'elles sont vraiment visibles et faciles d'accès. Nous avons déjà discuté dans une vidéo précédente de ce que sont les filaires. Je ne vais donc pas passer trop de temps là-dessus. Mais, bien sûr, ils sont extrêmement importants pour la conception de l'interface utilisateur et de l'interface utilisateur. Et c'est ce que nous appelons normalement une vue d' ensemble de faible fidélité de l'outil ou de l'application. L'objectif principal de ces illustrations ou croquis simples est d' établir la structure et flux de la solution de conception possible. La création de diagrammes de flux utilisateur peut également être très utile au stade de la planification pour comprendre les actions et dans quel ordre les utilisateurs les prendront. Et en fonction de la complexité et échelle de l'outil, de l' application ou du site Web, ces diagrammes peuvent également évoluer et finir par être assez complexes avec de nombreux itinéraires variés. Enfin, vous pouvez également combiner votre flux utilisateur avec des filaires, que nous appellerions simplement via flux. Et c'est un excellent exemple. Une fois de plus, nous pouvons voir les filaires de chacune de ces pages ou écrans. Et puis, au lieu d'afficher la structure réelle de l'outil, il se concentre sur les flux de l'utilisateur, donc comment il traverse l'application et quelles sont les prochaines étapes potentielles qu'il pourrait suivre. à partir d'une page ou d'un écran spécifique. 12. Les lois sur l'UX: Outre les termes de base que nous avons abordés dans la vidéo précédente, il est également important de parler de l'expérience utilisateur, des lois ou des principes. Et si vous avez déjà regardé les principes Gestalt ou le sujet de psychologie du design dans ce cours, vous reconnaîtrez probablement certaines de ces règles parce qu'elles sont en fait les mêmes règles. appliqué dans un contexte différent. Mais en plus de cela, quelques lois ont été spécifiquement utilisées pour la conception UX. Permettez-moi de vous en montrer quelques exemples. Tout d'abord, Fitts Law est sur le point de s'assurer que les objets exploitables sont faciles d'accès. Et s'il y a plusieurs éléments exploitables, ils ne sont pas trop proches l'un de l'autre, s' assurant que les utilisateurs n' appuient pas accidentellement ou ne cliquent pas sur quelque chose qu'ils n'étaient pas censés faire. Maintenant, il s'agit d'une illustration très intéressante montrant que lorsque quelqu' un tient un téléphone, ce sont les régions les plus faciles d'accès, et dans ce cas particulier, c'est l'utilisation d'une seule main. Il ne s'agit donc que de l'utilisation du pouce sur l'écran. Et nous pouvons constater que les utilisateurs droitiers auraient une région légèrement différente de celle des utilisateurs de gauche. Plus important encore, ces coins seraient beaucoup plus difficiles à accéder à un utilisateur de gauche, tandis que pour nos utilisateurs de droite, c'est le coin opposé. Mais pour le design universel, bien sûr, il est toujours bon de considérer à la fois les gauchers et les droitiers. En appliquant la loi Fitts, cela signifie que c'est dans ce domaine qu'il serait plus facile d'atteindre les éléments exploitables les plus importants. La loi Hicks consiste à simplifier les choix qu'un utilisateur peut prendre au minimum. Et cet exemple montre une comparaison entre deux types de télécommandes et comment un design très minimaliste comme contrôleur Apple suit très bien la loi Hicks. Mais le même principe appliqué à un formulaire ou à une interaction sur un site Web ressemblerait à ceci. Là encore, au lieu de répertorier autant d'options différentes, vous auriez un ensemble limité d'options. Et peut-être que l'un d'entre eux peut déjà être sélectionné comme résultat optimal ou choix sur le forum. Bien sûr, l'utilisateur sera en mesure de modifier cela. Cependant, le fait d'avoir déjà sélectionné quelque chose rend le processus de décision légèrement plus rapide et plus facile. Jacobs Law stipule que vous devez toujours utiliser des scénarios familiers et une logique pour les choses que les utilisateurs rencontrent régulièrement. Et un bon exemple est le signe en forme, que l'on peut voir dans quelques sites différents ressemblerait beaucoup. Je suis donc en train de passer en revue trois et comme vous pouvez tous les voir d'abord, nous allons commencer par les nous allons commencer moyens les plus rapides ou les plus simples de se connecter, en appuyant sur un compte existant avec Google, Apple ou Facebook. Et ensuite, donner à l'utilisateur la possibilité de se connecter avec son adresse e-mail ou son mot de passe, suivi de la même configuration exacte, encore une fois, en se concentrant sur la connexion. C'est donc le principal appel à l'action ici. Ensuite, des tâches supplémentaires que l'utilisateur pourrait avoir besoin s'il a oublié son mot de passe ou s'il n' a pas encore créé de compte et qu'il envisage de s'inscrire. Une fois de plus, si je passe d'un à l'autre, vous pouvez voir que même si les conceptions sont légèrement différentes, la structure générale est à peu près la même. droit de la grossesse est également une question de simplicité. Et dans ce cas particulier, il s'agit d'utiliser des formes plus simples dans la mesure du possible. Et c'est quelque chose que nous pouvons voir appliquer les designs les plus réussis. Par exemple, les images d'avatar seraient toujours en cercle. Les icônes seraient très claires et simplifiées. Les éléments fonctionnels tels que les boutons auraient également une forme simple et même les informations connectées sont normalement contenues ou regroupées vid en tant qu' élément visuel simple comme un rectangle. 13. Lois supplémentaires sur l'UX: Cette section d'une page du site Web d' Amazon présente deux autres lois en action, le droit de la proximité et la région commune, qui sont tous deux des principes Gestalt. Tout d'abord, la loi de région commune signifie que vous devez conserver les fonctions ou caractéristiques connexes dans les espaces communs. Nous pouvons donc considérer ce regroupement comme un espace commun. Mais si nous examinons ces six groupes ensemble, cela forme également une région commune, ce qui les sépare de ceux que nous pouvons voir ici en haut. Encore une fois, nous pouvons considérer cela comme une seule région. Et comme ces options sont plus élevées dans la page, le texte qui s' y trouve est plus grand et il y a également des visuels à l'intérieur. Ils se sentent immédiatement plus importants. Il sera donc plus facile pour l'utilisateur de trouver les options les plus fréquemment recherchées. Et s'ils ont besoin de quelque chose d'autre, ils pourront passer à la région suivante de la page. Et la façon dont la loi de proximité est appliquée ici consiste éloigner ces deux groupes l'un de l'autre. Un espace plus grand est donc créé ici, même une ligne de division très subtile entre ces deux groupes. Et un autre exemple de la loi de la proximité serait menus dans le cas du site Web d' Adobe, encore une fois, nous pouvons voir que ces options sont maintenues plus proches les unes des autres et qu'elles sont plus liées par rapport au d'autres options que nous pouvons trouver ici sur le côté droit. Ce grand espace vide que nous avons ici est celui qui sépare ces deux groupes l'un de l'autre. Maintenant, il existe également la loi de Miller dont nous pouvons discuter ici avec cet exemple, qui consiste à diviser votre contenu en petits morceaux pour le rendre plus digeste pour vos utilisateurs. Vous souhaitez donc limiter le nombre d'options qu'ils doivent percevoir à tout moment. Et nous avons déjà vu dans une vidéo précédente qu'il y avait un énorme méga menu qui s'ouvrirait au cas où nous cliquerions sur l'une de ces options ici, mais elles sont toutes cachées au début. Nous pouvons donc nous concentrer sur ces cinq options ici à gauche et sur les trois options supplémentaires à droite. Dans le cas du menu de navigation principal, il y a huit options parmi lesquelles les utilisateurs peuvent choisir, qui s' alignent parfaitement avec la loi de Miller, qui indique également que sept sont le nombre magique. C'est la quantité de choses qu' une personne moyenne peut garder dans sa mémoire à court terme. Et tous les sept, c'est la moyenne. Il est toujours bon de considérer plus moins deux. Donc, entre cinq et neuf ans, il devrait s'agir d'une bonne quantité d'informations à afficher. droit de la similitude est un autre principe de Gestalt pour lequel nous pouvons en voir un bon exemple ici. Ainsi, les objets similaires seront toujours perçus comme liés ou connectés les uns aux autres. Et dans le cas d'un simple chatbot ou d'un outil de messagerie, vous serez toujours en mesure de distinguer immédiatement les deux personnes qui participent à la conversation. Nous avons donc une personne ici à gauche et l' autre à droite. Et dans ce cas, la similitude entre ces éléments provient de la couleur de ces blocs, mais aussi de l'alignement sur le côté droit de l'écran. Et ces derniers sont alignés sur le côté gauche de l'écran. Et chaque fois que vous verrez que vos progrès sont suivis, lorsque vous achetez quelque chose en ligne, par exemple , vous verrez la loi de la connectivité uniforme en action. Ainsi, les lignes entre ces éléments, qu'ils aient des écarts entre eux ou qu'ils soient complètement connectés, nous veillerons à ce que vous perceviez ces détails comme une seule unité. L'effet de position en série est également intéressant, ce qui signifie que le premier et le dernier élément de la série seront toujours mieux mémorisés. Donc, en ce qui concerne votre conception, c'est là que vous devez toujours conserver vos informations les plus pertinentes ou les plus importantes. Mais en plus de ces lois les plus courantes que nous avons discutées comme beaucoup d'autres utilisées dans la conception de l'expérience utilisateur. Et ce graphique montre certains d'entre eux. Alors n'hésitez pas à le vérifier, c'est sur le tableau. Mais maintenant que nous comprenons mieux ce que signifie UX et UI, dans la vidéo suivante, nous nous concentrerons spécifiquement sur la conception d'applications. 14. Conception d'applications: Il est fou d'y penser, mais de nos jours, vous pouvez presque tout faire simplement en utilisant votre téléphone portable sans compter sur un ordinateur portable ou un ordinateur de bureau. Je me souviens encore que l' achat de quelque chose en ligne était vraiment complexe et que je n' aurais certainement pas utilisé mon téléphone portable. Mais maintenant, c'est tout le contraire. Et même les services bancaires sont quelque chose que je préférerais faire sur mon mobile par rapport à l'utilisation de mon ordinateur. Et la principale raison en est que les appareils mobiles et les applications mobiles en particulier se sont tellement améliorés au cours des deux dernières années. Et surtout en termes de facilité d'utilisation, qu'ils dépassent réellement, sont plus performants que la plupart des sites Web. Maintenant, dans cette vidéo, je voudrais simplement vous donner quelques exemples ou choses intéressantes qu'un concepteur d'applications devrait prendre en compte dans son travail. Mais bien sûr, c' est un sujet énorme. Et pour pouvoir voir le design AB en action, je vais vous montrer un projet spécifique du début à la fin dans quelques vidéos après celle-ci, en utilisant des projets de conception d'applications Adobe XD comme généralement, tous les autres projets de conception graphique commenceraient dans la phase de recherche. Et c'est là qu'il est plus facile d'apporter des changements à l'orientation de vos projets. Puis recevoir celle-ci pour tendre à la 100e règle de changement, ce qui signifie que vous pouvez dépenser 1$ au tout début cette phase de recherche pour modifier le projet. Sinon, vous ne dépenseriez pas dix fois plus que cela si vous en êtes déjà au stade de la conception, ou pire encore, vous pouvez dépenser 100 fois plus que cela si votre projet est déjà en cours de développement. Et c'est pourquoi il est si important de commencer par une planification de haut niveau, dont nous avons déjà discuté serait une tâche de concepteur UX. Il s'agit donc de la phase stratégique et de l'identification du problème. Et une fois que toutes les fonctions et fonctionnalités importantes d'une application sont toutes identifiées, les concepteurs de l'interface utilisateur peuvent commencer travailler sur différents prototypes. Maintenant, ils commenceraient normalement par ces prototypes de faible fidélité, qui sont de simples esquisses se concentrent sur la disposition et la structure de chaque écran. Et une fois qu'ils ont été testés et approuvés, ils peuvent passer à la création prototypes plus haute fidélité, qui ressemblent beaucoup à la version finale. Mais dans la plupart des cas, ils fonctionneraient déjà de la même manière que le produit final. Vous pouvez donc considérer cela comme des versions pilotes du produit final. Ils sont extrêmement utiles pour toutes les personnes impliquées dans le processus de conception, y compris le client. Bien sûr, surtout, cela va aussi beaucoup aider quand il s'agit de passer de la conception au développement réel. Les concepteurs doivent donc suspendre leur travail auprès des développeurs. Et le fait d'avoir un prototype fonctionnel comme celui-ci, où toutes les interactions sont visibles, va rendre tout plus clair. Et cela permet d'économiser beaucoup de temps et d'argent pour que tout soit correct en beaucoup moins d'étapes. Voici donc un exemple de prototype haute fidélité créé dans Adobe XD. Et c'est en fait quelque chose que nous allons examiner de plus près dans les prochaines vidéos. Mais juste pour vous montrer comment cela fonctionne, je vais juste appuyer sur Commande ou Contrôle Entrée. Et cela nous donne la version finale de cette application dans Adobe XD. Nous pouvons donc déjà commencer l'interaction et cliquer sur différents éléments et voir comment cela va affecter tous les éléments de la conception. Nous pouvons passer à d'autres pages. Nous pouvons basculer entre ces pages. Nous avons même un menu dans lequel nous pouvons une fois de plus passer sur différentes pages ou écrans de l'application. Ensuite, nous pouvons également revenir à l'écran d'accueil et il y a même un petit peu d' informations ici. L'avantage d'Adobe XD est que vous pouvez même tester chaque conception que vous effectuez directement sur votre appareil mobile, tant qu'elle est connectée à votre ordinateur. Et ce type de commentaires immédiats peut être extrêmement utile lorsque vous souhaitez rendre les choses plus conviviales. Vous pouvez donc tester vous-même les choses dès que vous créez quelque chose dans l'application. Vous avez peut-être entendu parler de logiciels ou d'économie, et il s'agit en fait d'un domaine spécialisé qui traite principalement des interactions d'un utilisateur lors de l'utilisation d'un logiciel ou d'une application, ou dans ce cas, une application sur un appareil mobile. Nous avons vu quelques exemples de convivialité et nous avons également discuté du fait que les zones les plus proches du pouce de quelqu'un constitueront emplacement idéal pour les éléments de navigation principaux. Une autre chose importante et essentielle que vous devez garder à l'esprit est que la plupart des éléments votre conception avec lesquels vous souhaitez que l'utilisateur interagisse doivent avoir une taille d' environ dix millimètres. Tout ce qui est plus petit serait assez difficile pour la plupart des gens de pouvoir puiser avec précision. Cela peut être extrêmement frustrant quand on ne peut pas faire fonctionner quelque chose. C'est donc certainement quelque chose que chaque concepteur d'applications doit garder à l'esprit. Et pour cette raison, limiter le nombre d' options, par exemple, sur la zone de navigation principale, que nous appellerons normalement la barre d'onglets à un minimum. Donc, dans ce cas, il n'y en a que trois. Et il y a ces très belles animations qui, bien sûr, dans certaines applications, peuvent simplement rendre l'esthétique d' une application plus unique et plus attrayante. Voici un autre excellent exemple de barre d'onglets appliquant l'un des principes dont nous avons parlé dans la vidéo précédente. Nous pouvons donc constater qu' en affichant uniquement le nom d'une fonction ou l'icône, nous pouvons simplifier l'interface. Et au lieu d'avoir huit éléments, s'il n'y en a que quatre à chaque fois que nous pouvons voir. Il s'agit d'une façon très intelligente d'indiquer l'onglet ou l'écran sélectionné sur lequel se trouve l'utilisateur. C'est donc celui qui apparaît sous forme écrite ou l'autre état sous forme emblématique. Vous vous souviendrez peut-être également la loi Jacobs disait que vous devez vous en tenir à scénarios familiers et cela s'applique également aux icônes ou aux formats familiers de certains éléments de conception. Et l'icône de hamburger pour les menus peut être considérée comme l'un de ces éléments standard que tout le monde saura utiliser. Et nous nous attendrons à ce qu'une superposition comme celle-ci apparaisse chaque fois qu'ils tapoteront dessus. Le mode de fonctionnement de la barre d'onglets ou du menu hamburger. Et chez pair, tous peuvent être parfaitement recréés dans un prototype à l'aide d'outils tels qu'Adobe XD. Et nous en verrons des exemples sous peu. Et il y a un dernier aspect très important de la conception d' appareils mobiles par rapport à la conception d'un site Web, par exemple, à savoir l'utilisation de gestes. Maintenant, ceux-ci sont devenus plus standard que presque tous les utilisateurs ne s'attendaient à pouvoir les utiliser. Selon le type d'application. Bien sûr, vous pouvez utiliser ces gestes pour des choses très spécifiques ou choses auxquelles les utilisateurs s'attendent normalement, comme le pincement ou l' étalement par exemple, un zoom avant et arrière. 15. Outils intuitifs pour la conception web: Maintenant, au cas où vous êtes plus une personne visuelle mais que vous êtes toujours intéressé à vous lancer dans la conception Web. Une question que vous vous posez peut-être si vous pouvez trouver un emploi ou si vous pouvez entrer dans ce secteur sans rien savoir sur le codage. Et la bonne nouvelle, c'est que vous pouvez bien sûr, et vous pouvez même créer des sites Web ou des prototypes entièrement fonctionnels en s'appuyant sur des outils tels les exemples Adobe XD que nous avons vus dans les vidéos précédentes. Mais il existe également des outils tels que Webflow, qui peuvent créer et même déployer des sites Web entièrement fonctionnels sans que vous ayez à écrire une seule ligne de code. Maintenant, le Webflow ne fait pas partie du cloud créatif, il sera encore un outil assez facile à utiliser pour la plupart des graphistes en raison de la familiarité de l'interface. Eh bien, nous verrons cela en action avec Adobe XD utilisé pour un projet de conception Web dans les prochaines vidéos. Dans Creative Cloud, nous avons également Adobe Spark, un excellent outil que vous pouvez utiliser pour créer des pages de prêt rapidement et facilement, une fois de plus, sans effectuer de codage. Et il existait un autre outil dans Creative Cloud appelé Adobe Muse, qui était similaire à Webflow, mais malheureusement, il est maintenant abandonné et Adobe ne le développe plus. J'aime également mentionner Thrive Architect, qui est l'outil que nous utilisons pour notre site WordPress. C'est encore une fois un excellent type de Builder par glisser-déposer, ce qui rend la personnalisation des thèmes et des modèles WordPress tellement plus facile qu'une fois de plus pour s'appuyer sur le codage. Donc, pour répondre à la question initiale, oui, vous pouvez faire de la conception Web sans connaissances en codage. Et en utilisant des outils comme ceux-ci, vous pouvez aller très loin dans vos projets, peut-être même jusqu'à un produit final. Toutefois, si vous avez une connaissance de base des langages de codage, il sera beaucoup plus facile de travailler avec développeurs chaque fois qu'il nécessaire de les impliquer dans vos projets. Donc, au cas où vous seriez intéressé de voir comment Webflow peut être utilisé en combinaison avec XD. Dans les prochaines vidéos, je vais vous montrer un exemple. 16. Adobe XD + Flux de travail Webflow - Premiers pas: Avant de commencer, je voulais juste vous montrer deux sites construits dans Webflow. Ils montrent et mettent en évidence certaines des fonctionnalités intéressantes que vous pouvez utiliser, comme ces effets de parallaxe que vous verrez plus loin ici, les interactions sur le survol et le défilement de page. Et nous pouvons voir qu'il s' agit également d'un côté entièrement réactif. Donc, lorsque j'ai changé la taille de mon navigateur, il s'y adapte. Maintenant, encore une fois, dans Webflow, vous pouvez le faire sans écrire une seule ligne de code et vous verrez exactement comment cela se passe. Mais voici un autre côté vraiment sympa. Je vais juste le rafraîchir pour que vous puissiez voir comment il se charge. Nous avons ici des animations et des effets vraiment soignés. Et vous pouvez voir beaucoup de choses qui se passent ici. Des faits plus cool, des transitions vraiment agréables. Et encore une fois, tout cela est réactif. Et nous avons ici quelques bons menus, même des effets de curseur et ainsi de suite. Maintenant, si vous allez du côté Webflow, vous pouvez trouver ces exemples dans la vitrine. Mais je vais commencer un nouveau projet comme je l'ai promis. Donc, sans plus tarder, commençons. Je vais choisir le côté blanc et je vais juste appeler cette photo de la nature. Je vais créer le projet. Nous voici maintenant dans le générateur Webflow. Et si vous connaissez bien les produits Adobe, la mise en page et l'interface utilisateur sont assez similaires. Sur le côté gauche, nous avons la barre d'outils, puis nous avons des panneaux, et nous avons également sélectionné ici en haut pour changer la vue entre différentes plates-formes ou résolutions d'écran. Mais je vais vous en dire plus à ce sujet au fur et à mesure. Tout d'abord, je vais vous montrer dans XD ce que j'ai créé. C'est donc le visuel pour le côté, la page principale du site Web. Dans XD, vous pouvez utiliser la commande défilement ou Contrôle défilement pour effectuer un zoom avant et rapidement et Commande ou Control 0, tout comme dans Photoshop et Illustrator pour adapter la page ou le tableau d'art à l'écran. Vous pouvez donc voir que c'est un site assez simple. Nous avons un en-tête, nous avons un curseur moyen en haut et quelques choses en dessous. Maintenant, je vais le rendre un peu plus long dans le projet Webflow réel. Mais pour l'instant, c'est tout ce que nous devons noter dans XD lorsque vous commencez à créer vos maquettes, vous pouvez également créer des prototypes. Créez donc plusieurs pages et essayez même comment il va fonctionner lorsque vous passez d'une page à l'autre. Mais pour l'instant, je vais simplement vous montrer que lorsque vous êtes prêt, vous pouvez accéder au menu Fichier et choisir Exporter, Tous les plans de travail ou lot. Vous pouvez également avoir une sélection, puis exporter uniquement les éléments sélectionnés. Mais avant de nous lancer dans Webflow, permettez-moi de vous montrer une chose ici dans XD, qui est également une fonctionnalité incroyable, surtout lorsque vous travaillez sur ces visuels ou ces maquettes. Je vais tout d'abord double-cliquer sur le tableau d'art et le faire glisser plus loin vers le bas. Nous avons donc un peu plus d'espace ici. Et disons simplement que cette mise en page que j'ai dans la caméra et que le texte à côté est quelque chose que j' aimerais avoir plus de plaisir. J'aimerais donc avoir quelques fonctionnalités répertoriées ci-dessous. Pour cela, vous pouvez utiliser la fonction Repeat Grid dans XD. Vous pouvez appuyer sur Commande ou Control R ou cliquer sur cette icône ici à droite. Et cela crée une grille à partir de celle-ci, ce qui signifie que vous pouvez ensuite la faire glisser bas et que vous pouvez dupliquer des choses aussi facilement que cela dans les deux sens , puis travailler parfaitement mais aussi horizontalement. Maintenant, la meilleure chose à ce sujet est que nous pouvons amender chacun de ces objets sans gâcher la grille. Laissez-moi vous montrer ce que je veux dire. Je vais zoomer un peu plus près. Par exemple, si je veux modifier le texte de ce deuxième élément, faune sera à portée de main. Vous verrez que cela ne change rien en haut et en bas. Et pour remplacer l'image, il est préférable de faire glisser et déposer les trois images que vous souhaitez utiliser. Donc, si je les glisser-déposer ici, il va mettre à jour les trois images en même temps. Maintenant, ce qui est cool à ce sujet, c'est que comme il s'agit encore d'une grille de répétition, je peux la sélectionner, ajuster l'espacement entre eux en même temps, je peux également continuer à ajouter d'autres images en bas. . Et remarquez que cela va se répéter avec le premier de cette colonne. Mais bien sûr, je peux faire des montants supplémentaires, comme sélectionner le texte, double-cliquer dessus et commencer à le déplacer. Remarquez comment il les met à jour tous en même temps, ou simplement augmenter la taille du texte. Et sans gâcher la copie, ils bougent tous en même temps. Et ce n'est que l'une des nombreuses choses que j' aime travailler dans Adobe XD, particulier pour la conception Web. C'est vraiment un outil de prototypage rapide à partir duquel vous pouvez commencer et le transformer en site Web fonctionnel dans Webflow. 17. Adobe XD + flux de travail Webflow - Importer des conceptions dans Webflow: Mais j'ai déjà tout préparé pour que nous puissions revenir dans le navigateur. Maintenant, la première chose à faire est ajouter l'en-tête. Pour cela. Je vais cliquer sur le signe plus ici. Et vous pouvez voir que nous avons quelques mises en page prédéfinies ici, mais ce que nous devons commencer, c'est la barre de navigation. Je vais juste faire glisser et déposer ça ici. Maintenant, si vous commencez sans avoir de sections dans votre conception, cela pourrait poser problème ultérieurement. Je recommande donc de le faire d'abord. Et évidemment, vous pouvez le faire plus tard, car vous pouvez faire glisser et déposer facilement chaque élément d' un endroit à un autre. Je vais simplement faire glisser cette section et vous pouvez voir que je peux également utiliser le navigateur pour décider où cela va se trouver ou ici dans la visionneuse ou la zone de mise en page. Je vais donc simplement le déposer ici en haut, puis faire glisser la barre de navigation dans la section, tout comme dans le panneau Calques, vous pouvez voir exactement maintenant que Navbar est à l'intérieur de la section. Maintenant, c'est prêt. Nous pouvons mettre notre première image dans cette boîte. Il existe un raccourci très pratique dans Webflow. Et si vous appuyez sur Commande ou Contrôle E, cela vous donnera une bonne chose. Et si je tape simplement l'image et que j' appuie sur Entrée pour la placer déjà à l'intérieur de l' élément sélectionné afin que nous puissions la voir maintenant dans la section marque, nous avons l'image. Maintenant, je peux choisir l'image et nous pouvons simplement glisser-déposer des images ici, je vais utiliser le Finder et sélectionner l'image dont nous avons besoin, le logo et simplement le glisser-déposer ici. Vous pouvez également faire glisser et déposer plusieurs éléments ou images même temps et les ajouter dans la bibliothèque SAS de Webflow. En passant, vous pouvez également passer à cette vue en appuyant sur G sur le clavier. Vous pouvez donc toujours voir tous vos actifs ou simplement cliquer sur cette icône ici à gauche, il y a aussi un raccourci pour le navigateur, qui est z, ou cliquez sur cette icône ici à gauche. Maintenant que nous avons l'image en place, je peux commencer à affiner l' espacement et le rembourrage. Donc, ce que je vais faire, c'est d'ajouter une marge au-dessus. Et remarquez que je fais simplement glisser ces chiffres vers le haut et vers le bas. Mais ce qui est encore plus frais, c'est que si vous maintenez la touche Maj enfoncée, vous pouvez augmenter et diminuer ces valeurs en même temps, donc dans toutes les directions. Ou si vous utilisez la touche Alt ou Option en faisant glisser vers le haut et vers le bas, il va changer les côtés opposés simultanément. Encore une fois, en maintenant la touche Alt ou Option enfoncée, en cliquant sur un numéro, vous pouvez le réinitialiser. Je peux donc les réinitialiser très rapidement et ensuite maintenir Alt ou Option enfoncée, je vais juste augmenter les marges supérieure et inférieure. Ensuite, je vais également réduire la taille en maintenant la touche Alt ou Option enfoncée. Vous pouvez également cliquer et faire glisser vers la gauche et la droite sur n'importe quelle valeur et vous pouvez très rapidement les mettre à jour ou les modifier. Maintenant, je peux juste le fixer à environ 70 %. Je pense que c'est une bonne taille pour le logo et pour les liens de navigation réels. Je peux sélectionner l'ensemble du menu et je peux continuer à faire la même chose pour pouvoir les déplacer plus loin, quelque chose comme ça. Et puis, bien sûr, nous pourrons commencer à les changer. Alors, je vais juste taper dans des magazines. Et ensuite, je vais choisir celui-ci. Et je pense que dans le design original, si nous revenons à XD, le prochain est l'école. Une fois de plus, il suffit double-cliquer et de commencer à les taper. Maintenant, si nous avons besoin de plus d' options de navigation en haut, il suffit de maintenir la touche Alt ou Option enfoncée et de faire glisser l'une d'entre elles, placer là où elle doit aller. Encore une fois, vérifions que le prochain est celui des auteurs. Donc je vais juste double-cliquer sur le taper dans. Ensuite, nous pouvons également faire la même chose en utilisant commande C ou le contrôle C pour copier , puis la commande ou le contrôle V pour coller. Vous pouvez voir à quelle vitesse nous en avons ajouté un autre. Et je peux simplement taper un portefeuille de taupes pour l'instant. Maintenant, je ne vais pas passer plus de temps sur la barre de navigation pour l'instant. Passons à un élément plus excitant, le curseur. Pour cela, je vais créer une nouvelle section. Vous pouvez donc voir notre première section ici. Je vais simplement le sélectionner et créer une classe pour elle, ce qui est utile car plus tard nous pourrons réutiliser cette classe si nécessaire. Je vais juste appeler ça la navigation ou le menu principal, peut-être, quelque chose comme ça. Créons maintenant une nouvelle section. Nous allons dans les options de publicité, puis glisser cette section juste ici sous la barre de navigation. Pour cette section, je vais utiliser un autre élément. Quickfind est probablement la commande ou le contrôle E le plus simple, tapez le curseur puis Entrée. Donc c'est déjà placé alors, maintenant la hauteur quatre, cela devrait être différent. Je vais donc juste trouver la taille. C'est ici. Donc, au lieu de la hauteur automatique, je vais définir cette valeur à 400 pixels, peut-être même plus gros, 500 pixels. Pour l'instant, on peut toujours changer ce litre, mais c'est une bonne taille. Et je vais vous le montrer ici dans le navigateur. Si nous ouvrons cela, vous pouvez déjà voir que nous avons deux diapositives. Et ici aussi, en bas, nous pouvons voir que maintenant, dans la première diapositive, je vais placer dans la première image. Et la meilleure façon de le placer est de faire glisser et de déposer une image à l'intérieur, je vais utiliser cette option d' arrière-plan. Cliquez donc sur le signe plus et vous verrez que par défaut va ajouter l'image d'arrière-plan. Ensuite, nous pouvons choisir l'image. Et encore une fois, depuis le Finder, je vais simplement faire glisser et déposer une de ces images. Allons-en quelques autres. Je vais donc choisir celui-là. Et puis peut-être que les pélicans ont simplement glisser-déposer ou trois d'entre eux ici. Maintenant, parmi ceux-ci, je vais choisir le premier. Bien sûr, vous souhaitez réduire la taille de vos images. Donc, s'ils sont vraiment à haute résolution, le chargement du site peut prendre beaucoup de temps . Mais c'est en fait l'un des plus grands avantages de la circulation d'air : si vous hébergez votre site avec eux, la vitesse est incroyable. La science se charge donc très vite. Il est vraiment bien optimisé à la fois le code et l'hébergement. Je vais maintenant revenir aux images. Une fois de plus, choisissez Image et je commence par l'image. Mais il est important que, au lieu de l'utiliser comme motif, nous voulions le mettre en couverture. Nous pouvons également épingler la position au centre ou à n'importe quel point de l'image. Donc, si je veux voir un peu plus de la partie inférieure, on peut l' épingler en bas. Maintenant, je vais le placer au centre pour que nous puissions voir le ciel nocturne avec les aurores boréales. Et je vais passer à la diapositive deux et répéter la même chose. Donc, une fois de plus, nous allons aux arrière-plans, choisissons l'image pour cela. Je vais choisir ce deuxième, Canyon, et je vais le régler pour couvrir, puis l' épingler à la partie appropriée. Je pense que cette fois, c'est probablement bon de l'avoir ici au sommet. Maintenant, si vous souhaitez ajouter cette troisième diapositive, le moyen le plus simple consiste à accéder à l'onglet Paramètres. Et ensuite, nous pouvons choisir Ajouter une diapositive est préférable de le faire, puis copier le collage, car si vous copiez une diapositive, elle peut être connectée. L'un d'eux sera donc le parent et l' autre est l'enfant. Et puis il suffit de jouer un peu plus pour les diviser ou les séparer de cette façon. Je pense que c'est plus rapide. Maintenant que nous avons la diapositive trois, nous pouvons revenir dans les options de style. Et puis, plus bas, nous entrons dans l'image, puis nous choisissons une autre image, et nous choisissons celle-ci. Encore une fois, il est déjà prêt à couvrir. Il semble que nous ayons juste besoin de changer de position. Le Centre fonctionnera probablement pour celui-ci. Oui, je l'aime bien. Maintenant, la seule chose que je vais changer, c'est de revenir à la taille principale du curseur. Je vais donc sélectionner le curseur et peut-être augmenter à 550 pixels. Oui, quelque chose comme ça. Désormais, à tout moment, si vous souhaitez tester le fonctionnement de votre site, vous pouvez utiliser Commande ou Contrôle Maj P, raccourci dans lequel vous pouvez le tester. Et par défaut, le curseur ne se déplacera pas. Nous ne pouvons donc basculer manuellement entre les trois images que nous avons ajoutées. Et bien sûr, en fonction de la taille de l'écran, nous en verrons différentes parties dans l'aperçu. Nous pouvons déjà passer à, disons la taille de la tablette dans laquelle je peux voir une proportion légèrement différente dans l'image. Et remarquez que le menu est déjà passé à un menu mobile convivial, ce qui est assez agréable. Vous pouvez également voir à quoi cela ressemblera sur mobile. Nous pouvons donc revenir au mode de conception avec le même raccourci Commande ou Contrôle Maj P, ou cliquer sur l'icône en haut. Nous y voilà, nous sommes de retour. Et je vais sélectionner le curseur et entrer dans les paramètres. Et j'aimerais qu'il joue automatiquement les côtés. Je vais donc simplement ajouter cette option. Ensuite, nous pouvons mettre en place toutes sortes d'autres choses. Comme au lieu du type d'animation que nous avions, nous pouvons choisir le fondu over, ce qui est plutôt sympa. Permettez-moi de vous montrer ce petit petit que nous allons prévisualiser et je lis un peu plus longtemps. Ensuite, nous obtiendrons le flux ou nous pourrons également le voir lorsque nous basculons entre eux. Très bien, c'est tout ce que nous devions faire pour le curseur. 18. Adobe XD + Flux de travail Webflow - Ajouter des animations: Maintenant, je vais vous montrer une fonctionnalité vraiment cool comment ajouter une animation sur le côté. Ce flux a une intégration avec un site appelé Lottie, et vous pouvez trouver cet élément ici sur le côté gauche. Tout d'abord, ajoutons simplement une autre section en bas. Et je vais revenir à l'ajout d'éléments, faire défiler jusqu'au bas, puis vous le verrez ici dans la section médias, animation latae. Je vais faire glisser et déposer cet élément dans cette nouvelle section. Et si je fais défiler un peu plus bas, vous pouvez déjà le voir ici. Et pour trouver quelques exemples d'animations, nous pouvons accéder à ce lien, les fichiers Latif, et il ouvre le site Web où vous devrez créer un compte pour vous-même. Ensuite, vous pouvez télécharger ces animations prédéfinies. Maintenant, certains d'entre eux sont payés, mais il y en a aussi gratuitement. Par exemple, si je tape juste à la caméra, on peut trouver beaucoup d'animations sympas. Et en voici un qui est totalement gratuit. vous suffit donc de télécharger ce fichier JSON. Une fois que vous l'avez téléchargé, vous pouvez importer la rue dans Webflow. Et c'est le format de fichier que vous devez utiliser même lorsque vous créez vous-même quelque chose dans After Effects. Et c'est un aspect vraiment cool de tout ça. Encore une fois, une intégration entre Adobe Creative Cloud Webflow qui permet de connecter ces outils ensemble. Si c'est quelque chose que vous souhaitez en savoir plus et que vous aimeriez que je crée quelque chose dans After Effects plutôt que de le préparer pour Webflow. Faites-le moi savoir dans la section commentaires ci-dessous, et je serai heureux d'enregistrer un tutoriel distinct sur ce sujet. Mais en revenant au concepteur, j'ai déjà téléchargé ce fichier afin que nous puissions l'ajouter à nos actifs. Voici le fichier JSON, et je vais juste le faire glisser et le déposer. Maintenant, il est ajouté. Je peux simplement le remplacer par celui-ci et il est déjà sur le site, mais vous ne le verrez pas si vous passez en mode aperçu. Vous pouvez voir en ce moment que c'est énorme. Pour résoudre ce problème, nous devons disposer d'un élément distinct dans la section. Donc, ce que je fais normalement si je veux contraindre un élément, c'est utiliser un conteneur ou un bloc. Je vais utiliser Command ou Control E , puis taper div. Et ils ont bloqué les arrivées. Maintenant que nous avons ceci, nous pouvons simplement le configurer de manière à ce que l'animation soit à l'intérieur du bloc. Ensuite, nous sélectionnons le bloc def et à partir des paramètres ici à droite, nous pouvons définir sa taille. Je vais donc utiliser pour la largeur, peut-être 200, puis pour la hauteur, peut-être un 150, quelque chose comme ça. Et ensuite, avec cette icône ici, nous pouvons la centrer. Le bloc DFF est donc maintenant au centre. Voyons donc l'aperçu à quoi cela ressemble. Et je pense que c'est parfait. C'est donc à quel point il a été rapide et facile de configurer cette animation. Et nous pouvons revenir dans les paramètres et nous assurer que l'animation continue de jouer. Ainsi, lorsque l'animation elle-même est sélectionnée, nous pouvons accéder aux paramètres et simplement choisir la boucle. Maintenant, juste pour vous assurer que vous comprenez quel point c'était rapide et facile, je vais remplacer cette animation par une autre. Je retourne donc juste aux dossiers de Latif. Et en voici un autre qui montre simplement l'ouverture et comment elle change, ce qui est assez cool. Si je clique dessus, une fois de plus, il s'agit d'une animation gratuite à partir de fichiers Latif. Je vais télécharger le fichier JSON. Ainsi, maintenant que le fichier est téléchargé, nous pouvons revenir à Webflow et nous pouvons accéder nos ressources et simplement faire glisser et déposer le fichier n. C'est donc le fichier d' ouverture JSON. Et puis tout ce que nous avons à faire, c'est à partir des ressources médias, nous pouvons simplement glisser et déposer cela dans le bloc def. Vous pouvez cliquer sur Aperçu de l'animation ici sur le côté droit, et nous pouvons déjà la voir fonctionner. Une fois encore, c'est à quel point il est rapide et facile d' ajouter des animations à vos conceptions Web. 19. Adobe XD + Flux de travail Webflow - Animations de défilement: Permettez-moi maintenant de revenir à XD pour vous montrer la partie suivante de la page. Je vais vraiment sauter cette ici au milieu parce que j'aimerais me concentrer sur cette partie inférieure où j'aborde davantage les fonctionnalités de ces magazines. Le premier concerne caméras et les équipements testés sur le terrain. Pour cela, j' aimerais commencer à introduire des animations de parallaxe maintenant pour avoir quelque chose à faire défiler vers haut et vers le bas et pouvoir voir l'effet de parallaxe. Je vais ajouter un autre élément ici. En ce moment, un conteneur. Je vais utiliser la commande E et taper le conteneur. C'est là. Assurez-vous simplement qu'il n'est pas à l'intérieur du bloc if. Je vais juste le faire sortir. Oui, c'est là. Et je vais placer une image à l'intérieur et choisir l'image. Il suffit de choisir le magazine. Et c'est là. Nous pouvons maintenant créer une nouvelle section en bas. Passons donc à la section signe plus , puis glissons-la et déposez-la jusqu'ici en bas. Notez donc que nous ne pouvons pas ajouter cette section dans une autre section tout à fait normale. Maintenant que nous avons notre section ici, je vais utiliser un autre élément appelé colonnes, qui nous donnera les paramètres que nous voulions 234 ou n'importe quel type de colonnes. Je vais en choisir deux. Notez également que nous pouvons déjà définir la taille ou la division entre ces colonnes. En fait, j'aimerais un peu plus d'espace à droite pour cette première fonctionnalité qu' ici dans cette colonne de gauche. Donc, dans la première colonne, j' aimerais placer une image. Je vais donc à nouveau taper l'image, la placer, puis choisir l'image, faire glisser et déposer l' appareil photo dans notre bibliothèque. Et une fois qu'il est téléchargé, nous pouvons le sélectionner et il est déjà là. Maintenant, à droite, j'aimerais avoir un texte, donc je vais tout d'abord ajouter un titre. Et puis je vais ajouter un autre paragraphe d'élément en utilisant ce raccourci, j'ai vraiment l' impression dans InDesign où nous avons Quick Appliquer avec Commande ou Control Return ou Entrée. Même le raccourci est presque le même. J'aime vraiment ça. C'est vraiment naturel. Je vais maintenant apporter quelques ajustements pour le paragraphe. J'aimerais avoir un peu de rembourrage à droite. Je vais juste le presser un peu comme ça. Et puis je vais simplement taper ici des tests de caméra. Ce que nous sommes là pour l'instant n'a pas vraiment d'importance . Et je vais avoir plus de marge par le haut. Ensuite, je sélectionne l' image et nous aurons également une marge à partir de la gauche. Je vais le rendre plus petit. Donc, tous à gauche font glisser la largeur maximale, quelque chose comme ça. Ensuite, à partir de la position, je vais ouvrir, flotter et effacer et choisir la bonne option. Placez donc l'élément à droite dans cette colonne. Et puis peut-être que je vais simplement augmenter un peu plus la marge sur le texte, quelque chose comme ça. Et maintenant, nous pouvons commencer à ajouter notre effet de parallaxe. Ce que vous devez utiliser, c'est une interaction. Je sélectionne donc l'image, je vais aux interactions ici à droite. Choisissez le signe plus sur le déclencheur d'élément, puis choisissez lors du défilement en vue, puis choisissez Sélectionner une action et créer une nouvelle animation de défilement. Maintenant, il s'agit d'un éditeur vraiment puissant où vous pouvez créer toutes sortes d'animations sympas et combiner plusieurs mouvements. Dans ce cas, je vais commencer par une simple transformation du mouvement. Sélectionnez Déplacer. Et par défaut, lorsque vous voyez des élections de soulignement, lorsque vous sélectionnez quelque chose, cela crée un point de départ et un point de fin. Maintenant, pour que cela fonctionne, vous devez définir quelque chose. Pour le point de départ. Je vais d' abord définir le point de terminaison parce que c'est là que je veux qu'il soit. Je vais donc simplement taper 00 pixels dans les valeurs x et y. Ensuite, je retourne au point de départ et je vais le déplacer vers la gauche. Je veux donc que ça vienne du côté gauche. Et pour la valeur y, je vais juste taper une valeur de 0 pixel. Le petit point d' exclamation disparaît. Cela signifie que l'animation peut fonctionner maintenant et que nous pouvons même tester en activant cette fonctionnalité d'aperçu en direct. Donc, si je fais défiler vers le haut et vers le bas, on peut voir que la caméra vient de gauche sur le côté, ce qui est génial. Mais pour pouvoir le voir correctement, je vais ajouter une autre section à la page. Déposons donc simplement une section ici en bas dans le navigateur, c'est plus facile. Je vais entrer dans les options pour cela et taper 800 afin que nous ayons plus d' espace pour faire défiler vers le bas, sélectionner à nouveau l'image, puis je vais revenir aux interactions. Et au fait, il est bon de renommer vos interactions comme celle-ci en faisant défiler en vue, je vais la sélectionner et changer le nom des animations de défilement parce que c'est quelque chose que nous pouvons réutiliser si nous le voulons. Je vais donc juste le renommer et l'appeler fondu à partir de la gauche. J'aimerais déduire les directions dans les capitales qui le nourrissent généralement de gauche. C'est bien. Mais si je veux y apporter des modifications, il suffit de cliquer sur l'icône de rouage. Et je vais ajouter une action de défilement supplémentaire car j'aimerais qu'elle s'estompe également. Je veux donc que l'opacité soit animée. Et j'aimerais ajouter une image-clé d'opacité supplémentaire. Nous pouvons également les appeler. Il y a donc notre opacité à 100 %. Je vais juste le sélectionner et nous pouvons voir que l'opacité est de 100 %, mais elle devrait commencer par 0 %. Donc, si nous allumons l'aperçu en direct, cela devrait déjà fonctionner. Je ne sais pas pourquoi cela ne s'est pas enregistré. Remettons-le à nouveau. 0, c'est tout. Maintenant, activez l'aperçu. Alors que nous faisons défiler vers le haut et vers le bas, nous pouvons voir à quoi cela ressemble. Maintenant, j'aimerais que l'opacité commence déjà, disons 20 %. Donc, si je monte et que je fais défiler vers le bas, vous pouvez voir comment cela a changé. Et j'aimerais également que l'opacité et le mouvement arrivent à destination finale ou à son point final avant qu'il ne quitte notre fenêtre d'affichage ou notre écran. Je vais donc le mettre en place un peu plus loin. Le point final va donc se situer autour de 6070 %. Donc, si vous vérifiez cela, vous verrez que maintenant il atteint le centre un peu plus rapidement. Je dirais que même plus tôt, c'est mieux. Ce serait 50, 60 %. Le mouvement doit être en fait avant l' opacité ou la décoloration, ou très proche l'un de l' autre, quelque chose comme ça. Alors maintenant, essayons de le tester. Oui, c'est bien. Il arrive donc à sa destination finale quand il est au centre de l'écran, ce qui, je pense, fonctionne très bien. Et bien sûr, vous pouvez ajouter toutes sortes de choses différentes comme la rotation. Encore une fois, nous allons simplement faire défiler les élections, tourner, puis nous pourrons les configurer de sorte que la rotation Z soit égale à 0 à ce stade. C'est donc là encore le point final. Ensuite, nous ajoutons le point de départ pour la rotation. Il suffit d'ajouter cela ici , puis de le faire glisser vers le haut , puis de changer la rotation z peut-être légèrement vers la gauche. Maintenant, une fois de plus, s'il y a ça, faisons défiler vers le bas. Nous verrons qu'il y a aussi une rotation subtile , ce qui est vraiment sympa . 20. Adobe XD + Flux de travail Webflow - Effet hors limites avec défilement parallaxe: Maintenant, sur l'objet suivant, allons encore plus loin l' effet de parallaxe. Je vais créer un effet hors limites cool avec cette image, que nous avons déjà vue dans XD. Maintenant, ce que j'ai fait ici dans Photoshop, c'est que j'ai déjà préparé l'arrière-plan et l'oiseau en deux images distinctes. s' agit donc d'une photo à l'origine. Mais ce que j'ai fait, c'est enlever l'aigle. Et j'ai juste le contexte pour cela. J'utilise le remplissage conscient du contenu. Et sur une couche séparée, j'ai séparé l'oiseau de l'arrière-plan en utilisant simplement le masquage. J'utilise l'outil stylo, tracé le chemin autour de l'aigle. Cela a pris du temps, mais maintenant je l' ai complètement isolé. Je vais donc enregistrer ces deux images séparément. L'arrière-plan sera enregistré au format JPEG et le calque oiseau au format PNG car j'ai besoin de la transparence pour que cela fonctionne. Maintenant, vous pouvez le faire très facilement dans Photoshop en sélectionnant les deux calques. Vous pouvez également cliquer avec le bouton droit de la souris et choisir Exporter sous. Une fois que vous y êtes, vous pouvez sélectionner la couche que vous souhaitez enregistrer en tant que configuration JPEG, la qualité probablement à 60 % est généralement une bonne idée à faire et vous assurer également de réduire la taille . Donc, dans ce cas, l' échelle peut être beaucoup plus basse. La largeur peut probablement être d'environ 600. Pour ce site, je pense que c'est suffisant. Et vous pouvez déjà voir que c'est 60 kilo-octets. Donc, si la taille est toujours importante pour réduire autant que possible. Mais ensuite, nous pouvons sélectionner la couche d' oiseaux et ensuite définir sur PNG pour que nous ayons la transparence. Mais encore une fois, la largeur devrait être inférieure. Encore une fois, 600 pixels dans ce cas, devraient être corrects. Maintenant, c'est un peu plus gros, mais nous pouvons toujours essayer d'utiliser la taille de fichier plus petite avec huit bits. Ensuite, il devient beaucoup plus petit et je pense que c'est toujours beau. Donc, j'ai déjà économisé ça. Laissez-moi vous montrer comment je l'ai mis en place dans Webflow. Nous avons donc déjà une section préparée en bas, et je vais simplement déposer une colonne ici. Je sélectionne donc la section, utilise le raccourci Commande ou Contrôle E, puis je tape des colonnes. Ensuite, je vais utiliser les mêmes paramètres, probablement cinq sur le côté gauche, sept à droite. Nous pouvons déjà ajouter un peu de marge juste pour la séparer du haut. Et puis sur le côté gauche, je vais ajouter un bloc div. Une fois de plus, nous commençons à le taper et à le coller. J'utilise à nouveau le même raccourci pour la modification rapide. Nous avons donc le bloc ici. La raison pour laquelle j'utilise un diblock parce que nous devons d'abord créer un arrière-plan, puis placer l'image au-dessus de cela. Le livre lui-même va donc utiliser l'arrière-plan en l' ajoutant à partir d'ici, arrière-plans cliquent sur le signe plus, puis choisissez l'image. Et nous devrons faire glisser et déposer ces images que j'ai enregistrées. Donc le PNG et l'arrière-plan, donc l'oiseau revient. Il suffit donc de les faire glisser et de les déposer ici. Et je vais choisir pour ce bloc. Je vais sélectionner l'oiseau qui est déjà sélectionné. C'est génial. On peut juste le mettre en couverture. Définissez la position au centre. Et ensuite, nous pourrons aller à la taille réelle de cela. Je vais mettre la hauteur à 600. Voyons simplement à quoi ça ressemble. Bon, donc c'est un peu trop gros. Faisons 300. Et puis la largeur également 300. Ok, ça fonctionne très bien. Je peux maintenant aligner cela sur le centre du cadre, puis ajouter un peu plus de marge ici sur le côté gauche. Je vais juste faire quelque chose comme ça. Ok, ça fonctionne bien. Nous pouvons maintenant ajouter une image à l'intérieur de ces blocs div. Donc, même si nous avons déjà une image à l'intérieur, c'est juste l' arrière-plan du bloc, mais nous pouvons toujours y placer une image. C'est vraiment l'astuce. Donc, ce que je vais faire, c'est d'utiliser le raccourci Command E, puis de commencer à taper l'image. Et remarquez que cela apparaîtra déjà ici dans le navigateur à l'intérieur du diblock. Nous pouvons donc maintenant choisir notre image, et c'est l'oiseau PNG. C'est déjà là. Et nous pouvons encore une fois ajuster la marge, la faire glisser vers le bas. Encore une fois, on a l'impression de travailler dans Photoshop, déplacer les choses si facilement. J'adore ça à propos de Webflow. Je vais juste le mettre en place quelque part. Je pense que c'est bien. Et maintenant que nous l' avons mis en place, nous pouvons passer aux interactions. Cliquez sur le signe plus de l'élément, déclenchez et choisissez la même option que sur la caméra tout en faisant défiler la vue. Sélectionnez ensuite l'option de lecture de défilement. Et cette fois-ci, nous allons créer une nouvelle animation de défilement. Nous pourrions utiliser le même que celui que nous avions sur la caméra. Mais au lieu de cela, je vais en créer un nouveau car ce sera légèrement différent. Nous allons commencer par le mouvement. J'ajoute donc le mouvement et le point de départ. Je veux que ce soit là où il est. Je vais donc taper 00 pour x et y. Et puis le point final, je vais le déplacer plus loin vers la droite, quelque chose comme ça. C'est assez hors limites. Je pense que je ne veux pas qu'il passe en revue le texte, qui sera du bon côté. C'est déjà bien. Mais nous pouvons simplement déplacer cela un peu plus haut, quelque chose comme ça. Et n'oubliez pas d'ajouter 0 pour y. La valeur y ne change pas, mais vous devez quand même ajouter le numéro pour que l'animation fonctionne. Maintenant, tout est mis en place. Nous pouvons activer l'aperçu et faire défiler de nouveau vers le haut et vers le bas. Nous pouvons voir comment cela fonctionne. Ok, c'est génial. Et nous pouvons également ajouter un peu de rotation. Nous allons donc choisir Rotate. Je vais mettre ça ici pour qu' il arrive à ce que ça se passe. Je vais donc ajouter une rotation z de 0 degrés, puis je vais ajouter une autre rotation ici au début où je vais régler la rotation sur, oui, quelque part, peut-être là. OK. Et puis l'autre peut être légèrement pivoté plus haut ? Oui, quelque chose comme ça. Revoyons l'aperçu. Si je fais défiler vers le haut et vers le bas, on peut y voir le beau mouvement. L'aigle sort donc du cadre et tourne légèrement. Bien sûr, cela ne fait que gratter la surface des interactions possibles dans Webflow. Donc, si vous êtes créatif, vous pouvez l'utiliser et créer des effets incroyables sur votre conception Web. Et bien sûr, le site déjà sans que je fasse quoi que ce soit, est déjà réactif. Bien sûr, vous pouvez affiner les paramètres réactifs si vous accédez à la taille de la tablette, puis au paysage et dépeignez la taille des appareils mobiles. Et comme Webflow gère tous les CSS en arrière-plan, si vous effectuez des modifications dans un point d'arrêt n'affectera pas les autres points d'arrêt. Donc, à titre d'exemple, si je veux qu'il déplace ces éléments, je peux entrer et ajuster la marge, déplacer un peu vers le haut, puis notre logo, nous pouvons la déplacer plus loin vers le centre, dans ce cas, quelque chose comme ça. Et maintenant, si je reviens à la taille du bureau ou à la tablette, vous ne voyez pas du tout affecté, mais dans la taille du mobile, nous pouvons voir à quel point il est bien positionné. 21. Systèmes de conception: Un système de conception est une bibliothèque d' éléments d'interface utilisateur et d'autres composants partageant un langage commun. L'utilisation d'un système de conception peut garantir que vous pouvez maintenir l'harmonie dans cas d'un verbe ou d'un projet numérique plus vaste et plus complexe . Désormais, il ne faut pas confondre avec un kit d'interface utilisateur ou un guide de style car ceux-ci font généralement partie du système de conception, qui contient normalement les catégories principales suivantes. Les blocs de construction, la bibliothèque de modèles et les règles qui peuvent faire fonctionner tous les éléments. Juste pour voir quelques exemples de systèmes de conception. Voici les directives relatives à l' interface humaine d'Apple. Nous pouvons commencer par n'importe laquelle de ces plateformes, mais nous allons peut-être nous concentrer sur iOS. portée de main, nous pourrons trouver toutes les informations pertinentes qui garantissent que plupart des applications de l'App Store se sentent et se comportent de la même manière. Il a donc des catégories telles que l'application, l'architecture, l' interaction utilisateur à portée de main. Si nous avons simplement sauté par glisser-déposer, par exemple, nous pouvons voir cela expliquer comment il doit être utilisé et quel est le résultat attendu de ces actions utilisateur. Le système de conception Microsoft est appelé fluent, qui est également multiplateforme. Et encore une fois, nous pouvons trouver toutes les informations pertinentes sur ce site. Le système de conception de Google s'appelle Material Design est trois, c'est la version actuelle ou la plus récente, et il met en évidence quelques nouvelles fonctionnalités de cette itération. Il a donc mis à jour les composants, les bibliothèques et les directives, y compris la conception des appareils pliables , l'implémentation de couleurs dynamiques et les nouveautés d'Android 12e. Mais il y a aussi un terme intéressant ici, les jetons de conception, qui est une dimension très courante dans les systèmes de conception. s'agit essentiellement des éléments constitutifs d'un système de conception. Ils ajoutent les plus petites espèces de valeurs de style et peuvent définir n'importe quoi, de la couleur, de typographie, de l'espacement et même de l'animation. L'un des principaux avantages des jetons de conception est probablement qu'ils peuvent également enregistrer les changements apportés au système de conception au fur et à mesure qu'il continue d'évoluer. Et la conception atomique est un autre terme très couramment utilisé lorsque nous faisons référence aux systèmes de conception. Et cela signifie essentiellement que vous auriez les plus petits composants considérés, les atomes. Et ce sont les blocs de construction les plus simples tels qu'une étiquette des manuels de champs de saisie ou un bouton. Pourquoi ? Lorsque vous commencez à combiner ces atomes, vous créez des molécules qui pourraient être des composants plus complexes. Plusieurs molécules ensemble formeraient un organisme qui pourrait être une section entière à l'intérieur d'un écran ou d'une interface. Maintenant, pour le démontrer dans Adobe XD, j'ai Spectrum, qui est le système de conception d' Adobe. Et c'est en fait un plugin gratuit que vous pouvez installer pour XD, mais dans lequel nous pouvons trouver ces composants comme un bouton que nous pouvons ajouter, qui aura déjà tous les attributs configurés. Et nous pouvons bien sûr y apporter des modifications. Nous pouvons y trouver les différents états, par exemple, et les mises à jour immédiates ici dans la conception. Nous pouvons bien sûr mettre à jour l'étiquette elle-même. Et nous pouvons également changer le thème des couleurs du clair à l'obscurité, ou même passer au mode filaire. Maintenant, en revenant à la liste des composants, nous pouvons trouver tous ces autres éléments comme la boîte de liste déroulante, qui, encore une fois, aurait beaucoup d' options que nous pouvons modifier. Maintenant, comme je l'ai mentionné, ce kit d'interface utilisateur ferait partie d' un système de conception. Et dans ce cas, il s'agit du kit d'interface utilisateur des cartes pour spectre. Et je peux zoomer de plus près afin que nous puissions voir le style et la grille de ces cartes où nous avons les différentes orientations et variations sur les cartes. Il inclut également tous les différents types de cartes, selon l'endroit où elles apparaîtraient dans l'interface. Et juste pour que vous compreniez comment ces cartes sont utilisées, si je passe à l'application Creative Cloud, nous pouvons immédiatement voir ces cartes apparaître ici dans l'interface. Tout cela est donc défini dans le système de conception du spectre que nous venons de voir. Encore une fois, l'élément clé des systèmes de conception est la cohérence, en veillant à ce que tous les éléments soient familiers et semblables les uns aux autres. Bien sûr, un bon système de conception permet également une certaine flexibilité, ce qui signifie qu'il laisserait place à l'amélioration et permettrait au système lui-même d'évoluer et de s'améliorer. Et comme nous l'avons vu avec les exemples que nous avons passés, un autre aspect très important d'un système de conception est qu'il doit être très bien documenté. Cela signifie qu'il doit non seulement être détaillé, mais également mis à jour régulièrement. Maintenant, au cas où vous souhaitez en savoir plus sur les systèmes de conception, assurez-vous de consulter ces quelques exemples que j' ai ici au tableau. Enfin, je voulais également mentionner que, de nos jours, il existe également systèmes d' illustration très similaires à un système de conception, mais qui très similaires à un système de conception, se concentrent sur des éléments illustratifs réels, qu'ils soient statiques ou animés. Et un excellent exemple en est le système d'illustration des systèmes d'exploitation Google Chrome, qui a un style visuel très spécifique garantit à nouveau que tous les éléments se sentiront apparentés et font partie de la même famille. Maintenant, comme nous pouvons déjà voir quelques icônes étonnantes dans notre prochaine vidéo, nous discuterons plus en détail de la conception des icônes. 22. Conception d'icônes: Le design d'icônes est un domaine spécialisé dans le design Web et numérique. Et dans cette vidéo, nous parlerons un peu des principaux principes utilisés dans ce domaine, ainsi que de quelques styles ou tendances distincts qui ont affecté les conceptions d'icônes au cours des deux dernières décennies. Et nous verrons également un modèle d'icônes dans Illustrator qui montre la structure sous-jacente utilisée chaque fois que quelqu'un conçoit une icône. Mais tout d'abord, commençons par les sept principes clés de la conception d'icônes. Clarté, ce qui signifie simplement que l'icône doit être très claire et qu'elle doit être lue immédiatement, veillant à ce que les gens sachent exactement ce que représente l' icône. lisibilité s' applique même si vous n' avez pas de texte ou de topographie dans votre icône. Il peut également faire référence à la distance, par exemple, entre les éléments ou s'assurer que les lignes de l' icône ne sont pas trop épaisses, ni trop fines, donc elles sont juste la bonne quantité pour une taille particulière. Icône. L'alignement est également important pour s'assurer que l'icône, surtout si elle fait partie d' un ensemble, sera équilibrée. Et comme je l'ai mentionné dans le cas d'un jeu d'icônes, la cohérence est également très importante. Veillez donc à ce que les icônes de cet ensemble soient toutes en harmonie. La personnalité dans les icônes signifie qu'elles sont uniques et qu'elles peuvent être facilement reconnues. Les icônes, par exemple, peuvent être abstraites, décalées ou ludiques. Encore une fois, en fonction de la tonalité de l'application ou de l'interface pour laquelle elle est l'application ou de l'interface conçue ? brièveté fait essentiellement référence à la simplicité d'une icône. Donc, pour vous assurer que vous n'utilisez la quantité de détails nécessaire et pas plus que cela. Pensez à la densité propositionnelle dans la conception du logo. Enfin, facilité d'utilisation peut être obtenue en veillant à ce qu' une famille d'icônes ou un ensemble d'icônes soit organisée, bien documentée et testée dans le contexte en termes de clarté des icônes, voici un excellent passant d'icônes claires et immédiatement reconnaissables à celles qui ne sont pas nécessairement simples ou plus brumeuses. Et ce sont, soit dit en passant, toutes des icônes utilisées sur les voitures, tableaux de bord en termes de brièveté, nous pouvons également voir une petite comparaison intéressante ici. Sur le côté gauche, nous pouvons avoir la représentation la plus simple d'une maison, une seule ligne. Et en introduisant plus de détails, nous pouvons rendre le design un peu plus clair ou plus reconnaissable. Et c'est probablement la quantité idéale de détails. Si nous ajoutons trop de détails, cela commence à devenir trop complexe pour qu'une icône fonctionne efficacement. Puisque nous parlons de brièveté, voici un retour amusant sur les icônes de Macintosh de 1984. Et dans ce cas, il y avait beaucoup de limitations qui empêchaient les concepteurs d'icônes d'introduire de beaux détails. Tout d'abord, il s'agit de conceptions monochromatiques, et elles ont également un nombre très limité de pixels à utiliser. Mais parfois, avoir des limites, comme dans ce cas, peut vraiment améliorer les conceptions. Et je pense que ces icônes fonctionnent toujours très bien et qu'elles peuvent encore être reconnues. Et c'est aussi une chose amusante que pour sauvegarder des choses, nous utilisons toujours l' icône d'une disquette, même si elles ont disparu depuis longtemps et je ne pense plus que personne ne les utilise. Maintenant, nous avons également mentionné l'alignement et l' importance d'équilibrer les champs des icônes. Et voici un excellent exemple que l'alignement optique, dans la plupart des cas, est plus important que l'alignement géométrique. En haut, on peut voir que les côtés gauche et droit maintenus la même distance donneront un résultat final étrange dans ce cas. Et c'est principalement à cause de la distribution des valeurs dans ce triangle ici au centre par rapport, par exemple, si nous disposons d'un bouton d'arrêt, qui aurait un bloc de carré, ce qui rendrait l'icône beaucoup plus symétrique. Dans le cas d'un bouton de lecture, vous avez besoin de plus d'espace sur le côté gauche que sur le côté droit. Et c'est ce que nous avons appelé l'alignement optique. 23. Techniques et termes de conception d'icônes: Il existe maintenant deux termes que vous ne pouvez pas éviter en ce qui concerne les conceptions d'icônes. Et voici une excellente comparaison montrant comment Apple est passé du skeuomorphisme original au design plat que l'on peut voir sur le côté droit. Il s'agit probablement de la transition la plus drastique ou la plus extrême, et c'est arrivé sous iOS sept en 2013. Et même si l'icône a changé depuis, n'a pas autant changé qu'entre ces deux versions. Maintenant, la famille d'icônes originale, comme je l'ai dit, utilisait le skeuomorphisme, que nous appelons quand un dessin essaie imiter un objet réel. Un excellent exemple de cela est la nouvelle norme, qui est littéralement une version illustrée une nouvelle norme ou de l'icône de l'application notes, où nous pouvons voir ce petit effet papier déchiré dans ce rendu réaliste d'un bloc-notes. La clé du skeuomorphisme est qu'il essaie d'être photoréaliste et qu'il utilise des textures et beaucoup de détails par un design plat, d'autre part, c'est l'approche minimaliste qui met l'accent sur la simplicité, la lisibilité et la facilité d'utilisation d'un jeu d'icônes. Ce type d'approche repose davantage sur des espaces négatifs, des illustrations bidimensionnelles, des blocs de couleurs solides et des formes et formes simples. Voici également un autre bel exemple de la façon dont Google passé de son jeu d' icônes d'origine pour Gmail, l'application de calendrier, Google Drive, Google Docs et Google Meet ou Hangouts grâce à ces fonctionnalités plus simplifiées versions d'eux. Et l'essentiel que nous pouvons voir ici encore, c'est que ces icônes sont complètement plates. Ils n'utilisent même plus de dégradés ou d'ombres. Et en général, ils sont beaucoup plus cohérents les uns avec les autres que l'ensemble d'origine. Si je veux être difficile, ce n'est probablement qu'une de ces icônes qui se démarque encore. Il s'agit de l'icône Google Drive, dont l' épaisseur de ces lignes est différente de celle des autres icônes de l'ensemble. À l'instar du skeuomorphisme, il existe également une nouvelle tendance appelée le nouveau morphisme, qui se situe quelque part entre le design plat et le skeumorphisme. Il est également parfois appelé interface utilisateur douce, principalement en raison de son esthétique douce. Cela vient du palais des couleurs monochromatiques, des ombres douces et des détails à faible contraste. Voici un autre exemple assez extrême où un bouton marche/arrêt, qui est probablement l'élément fonctionnel le plus important de cette application, est presque invisible, à peine perceptible, mais à équilibrer et pour s'assurer qu'il sera toujours utilisable, il prend beaucoup plus d' espace dans l'écran. C'est donc vraiment un élément dominant et là où il est activé, il se distingue beaucoup plus le contraste des couleurs. Maintenant, au cas où vous vous demandez comment cet effet d'ombre subtil est obtenu dans de nouveaux designs morphiques. Il s'agit d'une excellente comparaison qui montre ou révèle le secret. Ainsi, dans le cas d'un style de conception générique, vous auriez des ombres similaires à celles la carte, par exemple. Et si nous imaginons cet objet de côté, on a l' impression qu' il flotte au-dessus de la surface. Alors qu'une nouvelle carte morphique ayant l'impression de faire partie de la surface et ne se démarque que légèrement, mais elle ne flotte pas. C'est donc plus comme un effet d'extrusion que l' effet flottant que l'effet flottant que nous avons vu à droite. Ainsi, après avoir vu cela, lorsque vous regardez un autre bel exemple de nouveau morphisme utilisé dans un prototype d'application, vous pouvez voir comment ces ombres subtiles et cette extrusion douce fonctionnent sur tous ces éléments. C'est un côté très intéressant qui concerne évidemment pas seulement les icônes, mais aussi les interfaces complètes, mais ce n'est certainement pas le plus utilisable. Parce que rappelez-vous que le contraste est très important en général, dans la conception de l'interface utilisateur. Lorsqu'il s'agit de concevoir des icônes, il peut être utile d'avoir une grille d'icônes qui garantira que toutes les icônes et la famille seront cohérentes et similaires les unes aux autres. Et dans le cas de l'App Store, il s'agit de la grille d'icônes utilisée dans iOS, ou ici le modèle illustrateur de l'icône Play Store. Encore une fois, nous avons la grille sur le côté gauche. Et quelques exemples ici à droite de l'apparence des icônes dans les différents formats. Et pour voir comment ces grilles sont liées aux icônes finales réelles. Voici quelques-uns des exemples tirés des icônes circulaires d'Apple. Nous pouvons donc voir Safari, l'horloge, la boussole et les applications de réglage, et comment le diamètre de tous ces éléments circulaires repose sur le grand cercle original de la grille. Et dans le cas de plusieurs entités circulaires standard dans les icônes, elles se rapporteront également à ces autres icônes plus petites qui sont également définies dans la grille. L'utilisation de grilles d'icônes comme celles-ci peut vraiment vous assurer que vous obtiendrez l'alignement et cohérence d'une icône familiers, n'est-ce pas ? Enfin, je voulais simplement montrer un exemple d'icône animée où le bouton de icône animée où téléchargement se transforme en barre de progression, qui se transforme en icône d'achèvement. C'est donc presque comme trois icônes en une, selon l' état réel de ce processus. En général, pour la conception d'icônes, Adobe Illustrator est l'outil préféré. Toutefois, pour créer quelque chose comme cette icône animée, vous devez également utiliser un outil tel qu'After Effects. Et nous en discuterons plus en détail une fois que nous aurons abordé le sujet du Motion Design dans ce cours. Mais maintenant que nous avons couvert les icônes dans la vidéo suivante, nous pouvons parler de bannières. 24. Les bannières publicitaires: bannières Web sont similaires aux affiches et aux panneaux publicitaires. Il s'agit des principaux outils de publicité en ligne. Le domaine a pour but d'attirer attention d' un utilisateur et de lui donner envie interagir avec la bannière pour accéder au site Web, à la page de destination ou à l'application de l'annonceur dans l'App Store en général, le but de bannières, c'est générer du trafic pour l'annonceur. Dans la vraie vie, il est difficile de mesurer l'efficacité d'une affiche ou d'un panneau publicitaire avec des bannières Web. C'est en fait quelque chose qui peut être mesuré et suivi parfaitement. Et l'un des résultats les plus importants mesurés est appelé CTR ou taux de clics, qui calcule la fréquence à laquelle les utilisateurs cliquent sur une annonce. Il est important que CTR soit un meilleur moyen de mesurer le succès ou l'efficacité d'une annonce par rapport au simple comptage du nombre de clics, car il est toujours relatif à la façon dont beaucoup de gens ont vu les publicités. C'est donc en fait le pourcentage de relation entre le nombre de clics et le nombre d' impressions qui compte. Et la raison pour laquelle il est important de comprendre que les performances des webinaires seront toujours mesurées, c'est parce que vous êtes, le concepteur sera principalement responsable de la façon dont cette bannière peut être réussie. Maintenant, la bonne nouvelle est que tous les principes de conception que nous avons abordés dans conception imprimée et dans d'autres sujets de ce cours s'appliqueront également aux bannières Web. Et pour mentionner quelques choses, l'harmonie des couleurs, le contraste, l' utilisation de l'espace négatif, l'accent sur certains éléments et la typographie audacieuse ne sont que quelques-unes des choses qui vous aideront à réaliser les bannières se distinguent et fonctionnent bien. Maintenant, lorsque nous parlons de types d'annonces numériques, les bannières publicitaires ne représentent en réalité qu' un seul groupe à perte d'argent. Comme vous pouvez le constater, il existe de nombreuses autres options telles vidéo, la publicité, les publicités contextuelles, applications sociales payantes, les applications natives intégrées aux sites Web, contenu ou aux publicités qui s'affichent dans une application mobile. Par exemple. Bien que ces autres types d'annonces nécessitent une approche légèrement différente, leur configuration par rapport à la création de bannières. La raison pour laquelle nous nous concentrons sur les bannières de cette vidéo est qu'il s'agit toujours des types de publicité les plus couramment utilisés dans l'espace numérique. En ce qui concerne la taille des bannières, il y a beaucoup de normes et de noms différents qui leur sont associés. Et vous pouvez voir quelques-uns d'entre eux listés ici. Mais aussi intéressant, vous pouvez voir le nombre de fois où ils sont utilisés. Le plus courant est donc le format de bannière moyen, qui représente 40 % de toutes les bannières sur Internet. Ensuite, la deuxième plus courante est cette bannière horizontale étroite, généralement appelée classement. Le gratte-ciel vidéo est également utilisé. Plus de format d'outil. Et ensuite, le reste des tailles est beaucoup moins utilisé que ces trois premiers. Outre les dimensions des pixels des bannières et d'autres aspects très importants est d' obtenir la taille du fichier correcte ? Et en général, plus il est bas, mieux c'est. Mais la plupart des annonceurs auraient taille de fichier maximale très spécifique que le concepteur devra s'assurer de vous rencontrer. Sinon, vous abandonnez le design, sera rejeté. Nous pouvons donc constater que pour les plus petites tailles de bannières, la taille réelle du fichier est généralement limitée à 50 kilo-octets. Et cela s'applique au JPEG, PNG et aux cadeaux dans le cas de bannières statiques et dans le cas de bannières animées, il existe plusieurs façons supplémentaires de mesurer comment ils vont affecter le temps de chargement de la page. Iab fait référence en fait à l'Interactive Advertising Bureau, qui a créé les directives universelles pour la publicité des bannières, par exemple. L'un d'entre eux est que l'audio par défaut des bannières Web doit être désactivé et qu'il ne devrait être autorisé à lire que si l'utilisateur décide de le lire. Une autre recommandation importante est qu'une publicité doit toujours être très clairement distinguée du reste de l'environnement, dans la plupart des cas, un site Web ou une application. Mais il existe également d'autres règles qui s'appliqueront aux conceptions de Bednar, car elles ne devraient jamais couvrir complètement l'écran d'une application. Comparées aux bannières statiques, les bannières animées peuvent être plus efficaces pour attirer l'attention des gens. Ils peuvent également raconter des histoires plus complexes, ce qui peut également être essentiel au cas où vous ne pouvez pas insérer toutes les informations pertinentes dans une seule bannière statique. Les principaux types de fichiers pouvant être utilisés pour créer ces bannières animées sont les cadeaux, format de fichier vidéo HTML et MP4. 25. Conception de contenus pour les réseaux sociaux: Pour la plupart des gens, les médias sociaux sont devenus l'une des sources d' inspiration, de nouvelles et de divertissement les plus utilisées . Toutes ces plateformes sont conçues de manière à attirer les gens et à passer de plus en plus de temps à les utiliser. C'est pourquoi ils sont devenus aussi efficaces que des outils de marketing numérique. Il suffit de regarder ces statistiques et de voir les données existantes et le reste, ce qui est la prédiction. Cela montre donc les dépenses de publicité sur les réseaux sociaux dans le monde entier en milliards de dollars américains. Et nous pouvons également voir le ratio dépensé sur ordinateur de bureau par rapport au mobile. Les couleurs bleues plus foncées sont celles des appareils mobiles. Nous pouvons constater qu'en 2021, le total des dépenses s'élevait déjà à près de 154 milliards de dollars américains. Et selon cette prédiction, cette tendance va se poursuivre comme nous l'avons observée ces deux dernières années. Aujourd'hui, la tâche d'un concepteur de médias sociaux spécialisé dans ce domaine comprendrait beaucoup de choses différentes. Tout d'abord, il est sur le point de créer des conceptions répondant aux besoins uniques de chaque plateforme de médias sociaux. Cela peut être très difficile, non seulement parce qu'il y a tellement de plates-formes différentes, mais elles changent très fréquemment et sont à jour avec toutes les exigences et les meilleures. pratiques, vous devez constamment apprendre nouvelles choses et adopter de nouveaux flux de travail. Comme pour les autres vidéos de ce cours, je vais me concentrer sur quelques termes importants dans cette première vidéo. Et en fait, nous utiliserons principalement Instagram comme exemple. Cependant, la plupart de ces conditions s'appliqueront également à d'autres plateformes de médias sociaux. Ensuite, dans la vidéo suivante, nous analyserons les miniatures YouTube et verrons ce qui rend certaines d'entre elles plus efficaces que d'autres pour attirer des vues sur cette plateforme. toutes les plateformes de médias sociaux, vous disposeriez d'une chronologie qui affiche la publication dans l'ordre où elle a été publiée. Ainsi, ayant le plus récent en tête, l' une des tâches importantes d' un concepteur de médias sociaux est de s'assurer qu'il y a une certaine harmonie entre ces publications, en particulier pour des plateformes comme Instagram, où la chronologie est centrée sur les images et les vidéos. Et pour établir l' harmonie dans une chronologie, vous devrez compter sur des éléments répétés et cohérence qui peuvent être appliqués à une typographie, couleurs que vous utilisez. Mais il est également important de s'assurer qu'il existe également une variété. Vous voulez donc vous assurer que chaque article se démarque afin qu'ils ne se ressemblent pas tous. Il s'agit donc d'un bon équilibre et il peut parfois être difficile de voir comment nous utilisons certains éléments, répétitifs ou récurrents. Mais nous veillons également à ce qu' il y ait suffisamment de contraste et différences pour que chacun de ces articles soit unique. Désormais, en dehors du flux habituel de la plupart des plateformes de nos jours, vous auriez aussi des histoires, qui pourraient contenir des images ou des vidéos. Mais surtout, ils sont au format vertical plein écran. Et vous auriez la possibilité d'avoir plusieurs écrans, comme dans ce cas, nous utilisons ces écrans supplémentaires pour les tendances du design 2022. Et je peux les parcourir ici sur le bureau ou bien sûr, sur le mobile. Par défaut, ces histoires disparaîtront à moins qu'elles ne soient sauvegardées. Celui-ci que nous avons ici dans la section Collections. Désormais, le concepteur de médias sociaux est non seulement responsable la plupart du temps concevoir des graphiques réels pour les différentes plateformes, mais également d'analyser les performances des publications. titre d'exemple, voici le back-end ou le tableau de bord où nous pouvons voir l' analyse de votre compte Pinterest de concepteurs d' affectations. Et il y a quelques termes importants ici en haut qui seraient à peu près les mêmes sur toutes les plateformes de médias sociaux. Et ce sont là les principaux indicateurs de succès. Tout d'abord, ce sont les impressions. Et dans ce cas, voici les impressions totales de toutes nos images sont publiées sur cette plateforme au cours des 30 derniers jours. Et puis l'impression signifie simplement le nombre de fois que vous publiez ou épinglez. Dans ce cas, nous voyons l'écran d'un utilisateur. Il s'agit déjà d'une mesure importante, mais la plus importante est probablement l'engagement. Cela peut signifier le nombre de fois où les gens cliquent sur une épingle, publient ou interagissent avec elle, qu'ils l'enregistrent ou qu'ils l'aiment. Encore une fois, il peut varier d'une plate-forme à l'autre, mais dans le cas de Pinterest, il comptera les clics et les sauvegardes. De même que le rapport entre les impressions et les engagements, vous auriez également un public total plus large. Les personnes qui vérifient vos épingles et votre alto, dont un certain montant sera votre audience engagée qui aime, clique ou interagit d' une certaine manière avec vos publications. Un autre terme important à connaître dans la conception des médias sociaux est qu'est-ce qu'un post organique ? Nous voulons simplement dire qu'il a été créé et partagé sans qu'aucun paiement ne soit impliqué. Il ne s'agit donc essentiellement pas d'un poste promu. Par exemple, si nous sautons sur notre chaîne YouTube et que je fais défiler jusqu'au bas. Les avis de produits que j' ai reçus étaient tous des promotions payantes. J'ai donc été fourni par appareil, par ces entreprises. Et en retour, j'ai créé la vidéo de critique. Mais il est toujours important préciser dans ce type de publications ou de vidéos qu'ils ne sont pas biologiques et qu'ils incluent une promotion payante, achètent une marque spécifique. La raison pour laquelle j'ai mentionné cela est parce que c'est encore une fois, un autre aspect très important des responsabilités du concepteur de médias sociaux. Ainsi, outre les graphismes ou les conceptions actuels et les analyses, une autre tâche cruciale consiste à maintenir une bonne image de marque tout au long de chaque action menée sur les plateformes de médias sociaux. Cela inclut les commentaires ou les réponses aux commentaires des utilisateurs , la sélection des sujets couverts et le ton général de la voix utilisé dans toutes les plateformes. Ainsi, comme vous pouvez le constater, même si cela peut sembler au premier pas, car travail du concepteur de médias sociaux est assez simple et direct. En fait, c'est assez complexe, et il y a beaucoup plus que de simplement concevoir les publications réelles. Donc, si vous souhaitez en savoir plus sur ce domaine, dans la vidéo suivante, je vais analyser quelques miniatures YouTube provenant de différentes chaînes, ou si vous souhaitez passer à autre chose. Dans le prochain sujet, nous allons approfondir la conception de la présentation. 26. Conception de vignettes YouTube: L'un des moyens les plus efficaces attirer l'attention des gens est d' avoir un coup de tête ou un portrait dans votre miniature YouTube. Il peut donc s'agir d'une seule personne ou d'un groupe de personnes. Mais surtout, vous voulez avoir une émotion exagérée. Donc quelqu'un avec une expression très spécifique. Maintenant, certains YouTubers comme PewDiePie utilisent filtre liquide pour déformer le visage et exagérer encore une fois l'émotion. Alors que d'autres aiment Pizza McKinnon ou Gezer, choisissez un instantané de cette vidéo qui est le plus expressif ou le plus intéressant parmi toutes les expressions. Mais encore une fois, les plus extrêmes sont probablement plus efficaces. Donc quelqu'un ayant peur ou haussé les épaules, ou quelqu'un est en colère, ou quelqu'un a l'air surpris, cela fonctionne généralement le mieux. Maintenant, vous n'avez pas toujours besoin d'établir un contact visuel avec la personne qui se trouve dans votre miniature. Ou cela peut également contribuer à augmenter l'efficacité de la vignette. Mais par exemple, avec Lou du vendeur d'unbox P, il est toujours un peu plus loin en arrière-plan, mais il vous regarde toujours. Alors, ici, bien sûr, le produit est mis en avant et Louise est déconcentré. Il y a donc un peu de cela que nous pouvons voir. Mais quand même il nous regarde et nous regarde toujours avec un visage sérieux dans toutes ses vignettes. Mais comme je l'ai dit, il n' est pas toujours nécessaire d'avoir un contact visuel. Et vous pouvez voir à quel point cela fonctionne bien avec cette vignette, Jeremy Jones regardant vers la droite. Et évidemment, parce qu'il s' agit de l'Homme Invisible, nous nous attendons à ce que quelque chose se produise de ce côté-là soit en dehors du cadre. Encore une fois, c'est une composition très intelligente et bonne, encore une fois, principalement axée sur un coup de tête. Et n'oubliez pas que j'ai mentionné que vous pouvez avoir plusieurs personnes dans vos vignettes. Maintenant, l'équipe du couloir le fait très bien. Ils ont réussi à insérer tant de personnages dans leur miniature. Nous avons donc du matériel ici, nous avons Baby Yoda. Ils ont également le Mandalorien, et nous les avons tous trois dans le cadre. Ainsi, même si la vignette vous offre un très petit espace de travail, ils ont réussi à y insérer autant d'informations. Et avoir tous ces visages ou ces prises de tête le rend vraiment intéressant et beaucoup de gens cliquaient dessus. Bien sûr, vous n'avez pas toujours à remplir complètement votre vignette car l'espace négatif, comme pour chaque conception, peut aider à se concentrer sur certaines zones. Et ici, le jeu se classe. Nous avons toujours ces grands espaces vides dans la vignette parce qu'ils utilisent toujours le même corps expressif et ce type en costume, mais ensuite ils remplacent la tête toujours la principale les personnages d'un jeu. Maintenant, cela donne parfois miniatures très intéressantes, mais généralement cela fonctionne très bien une fois de plus, car il s'agit d'un coup de tête, mais ils utilisent également l'espace négatif dans leur miniatures. Et la technique d'utilisation de l'espace négatif est également très claire ici avec les miniatures de thérapeutes Unbox, une technique qui améliore toujours vos conceptions et contribue à la rendre plus attrayante et intéressante est chaque fois que vous pouvez établir de la profondeur. Et pour créer cela, l' une de ces techniques consiste à utiliser hors limites. Un bon exemple de cela serait la miniature rostrale. Il suffit de l'écrire au-dessus de moi où nous pouvons voir que la pizza se chevauche. La dernière œuvre d'art ici sur le côté droit. C'est ce dont je parle, cette section ici, qui se chevauche crée plus de profondeur et plus d'intérêts. Nous avons donc ce bel effet superposé. Et remarquez également que nous avons un contour blanc autour de la main. Je vais en parler un peu plus, mais c'est l'effet autocollant, qui est essentiellement un moyen de séparer la main de l'arrière-plan. Ainsi, créer une composition multicouche. Et comme nous sommes sur cette vignette, il y a aussi un autre détail ici, le cadre autour de la vignette, qui fait partie du design. Et remarquez encore une fois que la profondeur est vraiment utilisée ici, car la main est devant ce cadre. Un autre effet hors limites très subtil. Si vous consultez nos miniatures, vous verrez que nous l'utilisons beaucoup. Nous utilisons donc tous les deux un cadre et nous utilisons parfois l'effet superposé ou hors limites qui sépare ou élève certains détails et donne l'impression qu'ils sortent du cadre. Il revient à Peter McKinnon, miniature. Nous pouvons également voir cet effet hors limites. C'est donc le fond original ou la toile de fond de sa vidéo. Ensuite, nous avons les épaules qui sortent de cela et chevauchent le design, ce qui intègre très bien tout dans l'ensemble de la composition. Et bien qu'il soit très subtil, nous pouvons également voir le chevauchement ici. L'épaule chevauche très doucement l'affiche. Maintenant, envoyer des textos à vos miniatures peut être à nouveau très efficace, car beaucoup de gens, lorsqu'ils défilent, qu'ils soient sur leur téléphone portable ou l'erreur sur l'ordinateur. Ils ne regardent pas nécessairement les titres. Ils se contentaient de passer à travers et regarder le visuel comme les vignettes. Par conséquent, envoyer des textos à la vignette peut être une bonne stratégie pour attirer l'attention des gens. Assurez-vous qu'ils comprennent le sujet de votre vidéo. Cependant, il fait quelques choses que vous pourriez envisager si vous décidez de le faire. Tout d'abord et surtout, essayez d'éviter les appâts clics. Par conséquent, quel que soit le type que vous tapez, que ce soit dans le titre ou dans la vignette, doit toujours être représentatif du sujet que vous abordez. Ne trompez donc pas les gens en cliquant sur vos vidéos car s'ils n' obtiennent pas le contenu qu' ils attendent, ils ne vous feront pas confiance et ils ne regarderont probablement pas vos vidéos dans le futur. Une autre chose que vous voudrez peut-être prendre en compte est de ne pas répéter le titre exactement dans la vignette. Vous pouvez peut-être avoir quelque chose qui prolonge le titre. Donc, au lieu d' essayer de tout intégrer, vous pouvez simplement trouver un titre ou même ajouter du contexte. Ian Barnard, par exemple, réussi à tenir dans une très longue taxe ici dans la vignette, sept conseils procréés qui vous laisseront sans voix en moins de cinq minutes. Ce sera donc très long pour un titre, mais il fonctionne très bien. Et bien qu'il n'ait pas réellement utilisé un effet hors limites, on a presque l'impression que l' iPad est hors cadre. Et c'est juste à cause de la composition elle-même. Et aussi une autre technique très intelligente est agrandissement ou l'augmentation de la taille de la tête. Faites-le paraître encore plus exagéré et presque comme un personnage de bande dessinée. Quand il s'agit d'utiliser des textes dans vos miniatures, il est bon d'être cohérent et de le rendre reconnaissable. Par exemple, IG N fait un excellent travail dans ce domaine. Nous pouvons donc voir qu'ils ont un modèle ou un standard qu'ils utilisent pour leur composition. Il sera donc toujours sous le même angle. Il y aura cette ombre portée dure derrière ce texte de contour. Et ensuite, nous aurons toujours le titre et sous-titre bien séparés et divisés. Et comme nous regardons cette vignette un peu plus près, je voudrais également mentionner qu' ils ont fait un excellent travail pour ils ont fait un excellent travail ajouter cette touche rouge sur le visage des actrices. Ce n'était pas là à l'origine. Cela a été ajouté car ils utilisent cette toile de fond rouge ici. Et pour créer cette atmosphère réaliste, ils utilisent cet effet Photoshop, qui le rend très professionnel et cinématographique. De même que l'utilisation de la taxe, vous pouvez également inclure des éléments graphiques, qui peuvent à nouveau attirer l' attention des spectateurs. Et il peut s'agir de cercles comme dans ce cas avec le module Ms, ou d'éléments plus gros comme cette énorme flèche ici, et même la séparation entre la gauche et la droite, cette ligne blanche diagonale peut être les étiquettes de prix des éléments graphiques sont extrêmement utiles, tout comme pour la publicité en général. Les miniatures aussi. Il est devenu un élément très couramment utilisé. Pizza MacKinnon utilise ces étiquettes de prix ici sur la vignette deux côtés montrant combien il a payé sur Fiverr pour la retouche photo. Et nous avons également un prix bien intégré dans cette vignette de vache. Et comme nous l' examinons un peu plus près, nous pouvons voir quelques choses dont nous avons déjà parlé, comme la tête tirée ici à droite, le titre ou les textes pour le répéter dans le vignette. Et un chevauchement très subtil encore une fois avec l' épaule et le pneu, juste pour établir cela. 27. Comment faire ressortir les images de vignettes ?: contraste est l'un des aspects les plus importants du design, et il s'applique également aux miniatures YouTube. Vous pouvez donc utiliser le contraste de différentes manières. Vous pouvez soit mettre des couleurs contrastées ensemble, contrastant les valeurs tonales ensemble. Vous pouvez également créer un contraste en utilisant des réglages et des filtres tels que la netteté et la saturation. Voici maintenant un bon exemple de vignette générée automatiquement à partir de la vidéo elle-même. C'est donc quelque chose que vous devez toujours les éviter. Assurez-vous toujours de créer une miniature personnalisée, au lieu de vous fier au moteur YouTube qui générerait au moteur YouTube qui des miniatures pour vous. Il s'agit de la vignette sur YouTube de la bande-annonce de la saison pour, pour l'incroyable série intitulée Last Kingdom sur Netflix. Et il ne s'agit clairement que d'un instantané de la vidéo elle-même. Il n'a pas été conçu ou créé en tant que vignette personnalisée. J'aimerais donc vous montrer comment cela peut être amélioré introduisant le contraste et en le rendant plus excitant. Le meilleur filtre, ce que j' utiliserais normalement est le filtre Camera Raw. Mais avant d'appliquer cela normalement, vous devez choisir Convert for Smart Filters assurer que la couche avec laquelle vous travaillez est transformée en objet intelligent. Vous pouvez donc l' utiliser de manière non destructive. Je vais aller dans Camera Raw Filter, qui ouvre cette zone d'édition distincte. Maintenant, ce que vous voudriez normalement faire est de créer presque comme un effet de tonification HDR où vous augmentez les ombres, augmentez l'exposition. Vous pouvez probablement aller plus loin que cela, vraiment tout exagérer. Et ensuite, vous pouvez probablement augmenter un peu les reflets par les blancs et les noirs. Vous pouvez également faire glisser le curseur vers la droite ou vers la gauche, selon ce qui crée le contraste le plus élevé. Dans ce cas, il est probablement préférable de le faire glisser vers la gauche. J'ai l'impression que nous pouvons encore avoir un peu plus de luminosité ici. Et pour cela, j' utiliserais le pinceau de réglage avec lequel je vais peindre sur cette partie plus sombre du visage. Et ensuite, vous pouvez voir que nous pouvons augmenter de manière sélective l'exposition. Je vais revenir aux paramètres supplémentaires. Et une fois que nous avons les valeurs tonales, configurez correctement, afin que nous puissions voir avant et après que j'appuie simplement sur P sur le clavier qui fait déjà une énorme différence. Et n'oubliez pas que nous envisageons toujours d' utiliser une petite miniature, d' utiliser une petite miniature car c'est ce que les gens vont voir. Nous ne voyons pas toute l'image. Donc, pour ce petit détail, il faut vraiment qu' il soit très expressif. Et pour augmenter encore davantage le contraste, nous pouvons également ajouter de la clarté. Donc, cela fonctionne généralement très bien. On peut aussi ajouter un peu de brume, cependant, je pense que dans ce cas, cela n'aide pas, mais ça va certainement aider à augmenter la vibrance et la saturation. Pour qu'une fois de plus, à distance, vous verrez que cela fonctionne bien, quand nous le regardons de près, il peut être trop cuit. Et bien sûr, je ne l'utiliserais pas sur une affiche, mais pour une miniature YouTube, qui est minuscule, ce sont ces ajustements et modifications qui vont le faire fonctionner. Une autre chose que je ferais normalement est d'ajouter de l'affûtage. Ainsi, à partir de l'onglet de netteté, nous pouvons augmenter l'affûtage. Et encore une fois, vous pouvez devenir fou. Normalement, je n' irais pas aussi loin, mais parce que nous travaillons sur une miniature, je le ferais normalement, peut-être ajouter un peu de réduction du bruit juste pour que vous ne commenciez pas introduire également un beaucoup de bruit dans la composition. Mais maintenant, si nous acceptons ces changements, nous pouvons voir avant et après. De toute évidence, c'est une énorme différence, surtout quand on regarde ça dans une petite taille comme celle-ci. Avant et après une énorme différence. dernière fois, nous avons parlé l'importance d'utiliser des captures de tête dans vos miniatures. Également l' effet hors limites pour créer de la profondeur. Maintenant, un effet ou une technique très efficace à utiliser est l'effet autocollant, que efficace à utiliser est l'effet autocollant, vous pouvez voir très bien utilisé ici sur la vignette de Jess. Ce contour blanc avec une ombre portée subtile autour est celui dont je parle. Et c'est une technique très simple. Pour vous montrer comment faire cela, revenons à la dernière miniature de notre royaume. Ici. Tout ce que je vais faire, c'est d'aller le menu Sélectionner et de choisir Select Subject, qui va sélectionner notre personnage principal. Il nous suffit maintenant d'affiner un peu cette sélection. Je vais donc utiliser l'outil magique en maintenant Alt ou Option enfoncée. Je peux peindre sur des sections que je n'ai pas besoin d'être sélectionnées. Et puis je suis, sans maintenir de raccourcis clavier enfoncés, je vais juste sélectionner l'épée ici sur le côté gauche. Et je pense que c'est à peu près ce dont j'avais besoin dans cette sélection. Maintenant, tout ce que je dois faire, c'est de transformer cela en un plan. Et le moyen le plus simple consiste à créer un calque séparé, juste le calque vide, puis à remplir la sélection avec une couleur. Il peut être de n'importe quelle couleur. J'utilise simplement Alter Option Backspace, qui va remplir ma couleur de premier plan. Ensuite, j'utilise Command ou Control D pour me débarrasser de la sélection. En passant, à ce stade, avec votre outil pinceau, vous pouvez affiner certaines parties de cette sélection. De cette façon, je peux très clairement voir s'il y a des détails qui se chevauchent qui ont été manqués par l'outil de sélection. Mais c'est là la partie importante. Ce que vous souhaitez faire est d'ajouter le contour ou le contour réel à l' aide des styles de calque. Double-cliquez sur le calque, puis choisissez Contour. Et vous verrez que j'ai déjà sélectionné la couleur blanche avec une taille épaisse et la position définie sur l'extérieur. Et je peux toujours augmenter, diminuer la taille de phi one. Mais je vais juste cliquer sur OK pour l'instant. Et je vois qu'il y a ici quelques détails qui ne devraient pas être visibles. Donc, pour cela, je vais utiliser l'outil gomme et supprimer très rapidement cela. Maintenant que je suis satisfait du résultat, il ne me reste plus qu'à réduire l'opacité du remplissage. Donc, la réduction qui permettra de garder le trait visible. Ou n'importe quel style de calque qui se trouve sur ce calque. Et cela rendra le contenu réel qui était cette couleur de remplissage complètement transparent. Mais pour que cet effet plus épais fonctionne encore mieux, je peux ensuite revenir dans les styles de calque et ajouter des ombres portées, qui ont été encore mieux séparées de l'arrière-plan. Nous pouvons augmenter l'opacité. Peut-être que nous pouvons également ajouter un peu plus de distance, de dispersion et de taille à l'effet que vous voulez. N'oubliez pas que vous pouvez également faire glisser et déplacer l'ombre pendant que vous cliquez sur la vignette. Et cela va créer un effet encore plus séparé et plus semblable à un autocollant. Une autre composition efficace que vous pouvez utiliser dans vos miniatures YouTube consiste à créer une division entre le côté gauche et le côté droit. Il peut donc être utilisé avant et après, ou il peut être utilisé pour comparer certaines choses. Et nous avons déjà vu cela être utilisé dans certaines de ces miniatures. Mais regardons de plus près certains d'entre eux. Par exemple, nous avons un beau visage d'ici entre Beauty Pie et le personnage de Minecraft, qui revient encore une fois à utiliser des coups de tête. Nous avons donc deux coups de tête très efficaces ici. Mais nous avons également cette belle séparation ou division entre les deux côtés du cadre. Il y a également un petit chevauchement créé ou un effet hors limites utilisé avec des mains chevauchant les détails en arrière-plan. Et rappelez-vous que nous avons parlé l'expression exagérée à l'aide du filtre à liquéfaction. Un autre exemple de cette composition divisée serait la vignette de Jésus, où nous avons tourné Jésus comme séparateur entre deux compositions, celle à gauche, puis une à droite. Maintenant, l'effet de flou que nous pouvons voir ici est également une technique très courante qui vous donne envie de cliquer sur la vignette. Donc, surtout s'il y a un résultat final ou une révélation dans la vidéo, ce n'est généralement pas une bonne idée à afficher dans votre miniature, car les gens ne seront pas si intéressés de voir ce que c'est. c'est tout. L'utilisation de l'effet de flou pour cette raison peut être très efficace dans les miniatures, que l'on peut également voir avec Peter McKinnon. Il montre celui sur le côté gauche, ce qui était le moins cher. Mais nous avons alors un flou assez fort ici sur le côté droit avec le design plus cher, ce qui nous rend encore une fois enthousiasmés et intéressés de voir à quoi il ressemble réellement. Enfin, je voudrais vous rappeler de ne pas utiliser le coin inférieur droit de votre vignette pour des détails importants car c'est là que le code temporel va apparaître. Vous pouvez donc constater que la plupart de ces créateurs sont conscients de cela. Et ils gardent intentionnellement cette section ici en bas à droite complètement vide. Une fois encore, nous avons un espace vide ici. De plus, IgM garde intentionnellement cette zone MT. C'est donc là que le code temporel apparaîtrait normalement. La seule miniature de tous ces éléments où elle se chevaucherait. serait une information importante Peter McKinnon serait une information importante et c'est parce qu'ils ont les 200$ serait difficile à lire à cause du code temporel. 28. Conception de présentations: Le design de présentation est un autre créneau intéressant dans le monde du design numérique au cas où vous voudriez vous spécialiser dans ce domaine. Dans cette vidéo, je vais vous donner quelques conseils utiles que vous devez garder à l'esprit. Tout d'abord, l'objectif principal d' une présentation est de convaincre le public. Et l'une des meilleures façons de le faire est d' avoir des diapositives intéressantes dans la présentation, mais aussi de se fier à la narration au cas où vous êtes le concepteur et que vous n' allez pas faire la présentation. lui-même. Très probablement, vous serez fourni par la copie que le présentateur souhaite utiliser sur les diapositives. Cependant, vous pouvez toujours suggérer des éléments supplémentaires comme un code. Par exemple, s'il fonctionne bien dans le contexte de la présentation, et cela aide à mobiliser le public. Lorsque vous concevez des diapositives, assurez-vous de ne pas les surcharger. Utilisez donc beaucoup d' espace négatif et évitez modifier trop de texte ou de puces. Assurez-vous que les présentateurs ont leur propre exemplaire pendant leur présentation. Il n'est pas nécessaire qu'il apparaisse réellement sur les diapositives. Au lieu de cela, le design et les éléments que vous utilisez dans vos diapositives doivent toujours être liés ou s'étendre à ce que dit le présentateur. À l'instar d'une chronologie sur une plateforme de médias sociaux, les diapositives doivent également être harmonisées entre elles. Il doit donc y avoir de la cohérence et des éléments répétés, qu'il s'agisse de couleurs, de typographie ou de style d'illustration ou de photographies. Mais pour maintenir l'engagement du public, il faut aussi introduire une sorte de rythme entre les diapositives. Par exemple, vous pouvez utiliser couleurs d' arrière-plan plus fortes ou plus vives pour les diapositives d'introduction, sont des diapositives qui divisent certains chapitres de la présentation et utilisent des diapositives d'arrière-plan plus lumineuses pour le contenu général de la présentation. N'ayez pas peur de rogner certains éléments dans les diapositives. Par exemple, nous avons ici tous ces détails flottants au centre de la diapositive. Bien que la diapositive puisse être beaucoup plus excitante si les choses sont agrandies et qu'elles soient placées sur les bords de la diapositive, une fois de plus, avant de petits objets flottants. Et après que tout soit agrandi, cela a beaucoup plus d'impact et beaucoup plus d'intérêt pour cette diapositive. Ainsi, en ayant ces détails sur les bords et en ne montrant pas tous les détails, cela rendra immédiatement le public plus engagé car il commencera automatiquement à combler les personnes manquantes. et imaginez à quoi ressembleraient ces illustrations dans leur intégralité. Maintenant, bien que PowerPoint et Keynote, ou les outils les plus connus pour créer des présentations, si vous êtes un concepteur de présentation professionnel c'est mieux si vous utilisez des outils tels qu'Adobe InDesign. Et je viens d'avoir une présentation rapide ici à titre d'exemple. Et bien sûr, dans les données InDesign et de nombreuses techniques et outils utiles, comme l'utilisation pages maîtres ou parents, car elles sont désormais appelées pour des détails répétés ou récurrents. Comme dans ce cas, cette petite barre en bas, qui apparaîtrait sur toutes les diapositives. Mais mon outil préféré est en fait Adobe XD pour créer des présentations. Et il y a même un plugin étonnant appelé présentation by Adobe, que vous pouvez installer. Et c'est totalement gratuit. Et il aura beaucoup de modèles prédéfinis que vous pourrez utiliser. Dans ce cas, j'ai déjà commencé un projet de présentation et j'ai choisi un style spécifique. Et lorsque je clique sur des diapositives, je pourrai choisir parmi toutes ces options de modèles prédéfinis. Disons que j'en ai besoin avec un paragraphe et une image. Et dès que j'ajouterai cela, il apparaîtra à côté de ma diapositive précédente, tout est bien sûr complètement modifiable, donc je peux sélectionner des choses, les déplacer, changer le texte, modifier les images. Et je peux également accéder à des éléments sur le côté gauche, notamment des icônes, des formes, des graphiques , des illustrations, des images, etc. 29. Publication numérique: publication numérique, parfois aussi appelée édition en ligne ou édition électronique, fait référence à la publication de fait référence à la publication de documents généralement longs affichés sur le Web ou sur appareils électroniques tels que des liseuses et des tablettes. . Dans cette vidéo, nous allons passer en revue quelques points importants que vous devez savoir sur ce secteur. Quelques termes que vous devez connaître et les avantages et les inconvénients de l'édition numérique par rapport à l' édition traditionnelle. Tout d'abord, voici une statistique intéressante montrant l'opinion des gens en général sur les livres imprimés par rapport aux livres électroniques et celui qu'ils préféreraient dans des situations spécifiques. Par exemple, la plupart des gens préféreraient avoir un livre imprimé lorsqu'ils lisent avec un enfant, alors qu'ils préfèrent un livre électronique lorsqu'ils voyagent ou s'ils veulent obtenir un livre rapidement. Et en cas de lecture de livres au lit, la décision est vraiment partagée entre les livres imprimés et les livres électroniques. L'un des avantages d' une publication numérique est qu'elle peut toucher un public plus large. Parce qu'une publication imprimée sera toujours limitée à la quantité d' impressions créées. Bien sûr, dans le cas d'une publication numérique, aucun produit physique n'a besoin d'être fabriqué et distribué. Le temps nécessaire pour préparer une publication et entre les mains de votre public est très rapide par rapport à l'impression traditionnelle. Et bien sûr, ne pas avoir à s'occuper impression et de la distribution signifie également qu'il est beaucoup plus rentable d' utiliser la publication numérique, mais il est également plus facile de suivre le succès de publications grâce à des statistiques. De même que ce que nous avons vu avec les médias sociaux dans cas d'une publication numérique sur la plupart des plateformes, vous pourrez également voir des données importantes telles que la quantité d'impressions ou de publications tirées de chacune d'elles. Combien de personnes parcourent l' ensemble de la publication, ce qui, la plupart du temps, ne signifie pas nécessairement qu'ils ont vraiment tout lu, mais ils ont simplement vu tout le contenu de la publication. Et vous pouvez également voir la plupart du temps le taux moyen et, surtout, les clics ou les interactions que les gens prennent. Parce que c'est encore une fois, un énorme avantage avec publications numériques que vous pouvez également inclure l'interactivité. Voici un exemple de publication en ligne. C'est un magazine sur la photographie de la nature. C'est en hongrois. Mais nous pouvons voir que, par exemple, dès la première diffusion, nous avons une publicité sur laquelle j'ai cliqué. Il m'amène directement sur le site Web de l'annonceur. L'interactivité dans les publications numériques peut également être utilisée pour de nombreux autres éléments utiles tels que navigation dans la publication. Dans ce cas, nous sommes sur la page de la table des matières. Et ici, je peux facilement accéder à n'importe lequel de ces articles. Allons juste à celui-ci ici. Donc, au lieu de feuilleter toute la publication, je peux y arriver tout de suite. À propos, chaque fois que j'arrive à une nouvelle diffusion sur cette plateforme particulière, issue.com, tout élément interactif sur un spread serait temporairement mis en évidence comme le site Web de ce sponsor ici en bas. Si je vais à nouveau à la page précédente et que j'en arrive ensuite à cette diffusion, on pouvait voir les petits points forts qui apparaissent en bas. Un autre grand avantage des publications numériques est qu' en cas d' erreurs, par exemple, frappe qui sont découvertes après la mise en ligne des publications, elles peuvent encore être facilement modifiées. Et la plupart du temps , cela signifie simplement remplacer une page spécifique qui s' actualisera immédiatement sur chaque appareil où cette publication est affichée. Vous pouvez bien sûr produire des publications numériques directement depuis InDesign à l'aide d'une fonctionnalité appelée Publier en ligne. Voici un exemple de publication que j'ai créée il y a quelques années. Nous pouvons parcourir toutes les pages. Bien sûr, nous serions également en mesure de zoomer plus près si nous le voulons et de faire un panoramique ou encore une fois, zoomer en arrière et même de voir les petites miniatures ici en bas. Si c'est quelque chose que vous aimeriez essayer, il vous suffit d'accéder aux options d'exportation ici haut à droite dans InDesign et de choisir Publier en ligne, où vous pourrez le publier en tant que nouveau document ou mise à jour d'un document existant. C'est donc ce que je voulais dire. Si vous devez mettre à jour votre document après avoir apporté vos modifications dans InDesign, vous suffit de vous assurer sélectionner le document approprié ici et il sera immédiatement mis à jour avec la version modifiée design. Il existe également quelques options utiles supplémentaires, comme vous pouvez autoriser les spectateurs à télécharger le document sous forme fichier PDF au cas où ils souhaitent y accéder hors ligne ou peut-être l'imprimer. Par défaut, des options de partage et d'intégration seront disponibles, que si vous ne souhaitez pas utiliser, vous pouvez masquer dans le visualiseur en ligne. présent, nous nous sommes concentrés sur les avantages des publications numériques. Mais il est également important de mentionner que dans de nombreux cas, une publication serait distribuée à la fois sous forme imprimée et numérique. Nous pouvons donc voir ici un magazine en arrière-plan, nous voyons la version imprimée, et ici sur une liseuse, nous pouvons voir la version numérique. La raison pour laquelle je montre cela est parce que du point de vue de la conception, cela signifie souvent un réarrangement subtil du contenu. Donc, au lieu de vous fier exactement à la même disposition pour ces deux formats, vous devrez peut-être effectuer de petits ajustements et réorganiser quelques éléments. Il y a en fait deux termes très importants que vous devriez connaître. Que sont les publications rechargeables et fixes ou ePubs. Dans le cas d'une composition à mise en page fixe, le contenu des pages reste toujours statique. Il sera affiché exactement de la même manière sur tous les appareils. Et c'est l'option qui est utilisée normalement lorsque l'éditeur veut reproduire tout ce qui a été imprimé alors qu' avec une boule de reflow, c'est-à-dire une publication, le contenu sera toujours en mesure de s'adapte à un appareil particulier. Et dans ce cas, les sauts de page et le nombre de pages varient réellement appareil à l'autre et entre les paramètres qu' un utilisateur préférerait ou le type d'appareil qu'il utilise, il s'agisse d'un téléphone, une tablette ou un ordinateur de bureau. En passant, dans cette comparaison, nous pouvons voir les cinq formats de fichiers les plus courants utilisés pour les publications numériques et les fonctionnalités disponibles avec eux sur le côté droit. Et au cas où vous vous demandez ce que signifie DRM, cela signifie en fait la gestion des droits numériques, qui est une fonctionnalité qui permet l'auteur de n e publication d'avoir contrôle juridique sur ce que l'acheteur sera en mesure de faire le travail. Pour résumer, la publication numérique peut être un domaine très intéressant, surtout si vous connaissez déjà le flux de travail de publication traditionnel, car vous n'avez pas vraiment à apprendre beaucoup de nouvelles compétences supplémentaires, plus d'utiliser l' interactivité et comprendre comment suivre le succès des publications électroniques. 30. Conception de mouvements: Motion Design est un autre domaine très excitant et intéressant, qui peut facilement être quelque chose que vous passez du graphisme car il utilise essentiellement les mêmes principes et les mêmes outils, même avec l'ajout d' Adobe After Effects ou d'Adobe Animate. Et la meilleure façon de décrire ce que représente le design de mouvement est qu'il s'agit d'un type d'animation qui ressemble davantage à un graphisme dynamique ou émouvant que les autres types d'animations plus traditionnels, Comme les dessins animés, design de mouvement est utilisé dans de nombreux domaines, de la publicité aux conceptions de logo et même au design d'interface par rapport à l'animation traditionnelle. Dans le cas de la conception de mouvement, la plupart du temps, vous animez la topographie et les formes. Et sur ce tableau, nous pouvons voir dix principes du design de mouvement, qui sont tous des méthodes et des façons différentes qui, encore une fois, ont été développés à l'origine en animation qui peuvent rendre vos créations plus attrayantes et plus intéressant. L'assouplissement, par exemple, est une technique très courante qui peut rendre l'animation plus subtile et plus réaliste. Ainsi, au lieu d'un changement très brusque ou d'un mouvement très linéaire et ennuyeux, vous pouvez avoir des mouvements plus fluides comme ces deux exemples ici. En général, l'assouplissement n'est qu'un moyen d'aider le spectateur à comprendre ce qui va se passer avant qu'une action ne prenne pleinement effet. Dribble est une excellente plateforme à explorer et à s'inspirer des exemples de motion design. Donc, lorsque vous recherchez ces projets, je vous recommande de choisir l' animation comme catégorie principale, puis taper le Motion Design sur les balises, ce qui vous conduira à des projets vraiment sympas. Et cela vous permettra de mieux comprendre ce qui compte comme un design de mouvement. Cet exemple, par exemple, partie d'une catégorie particulière du design de mouvement que nous appelons topographie cinétique, qui transforme les lettres et les mots en personnages ou acteurs d'une animation. C'est un excellent moyen de rendre un message plus convaincant et attrayant. Et encore une fois, pour attirer l'attention des gens. C'est donc encore une fois, quelque chose qui est très couramment utilisé dans la publicité. Vous vous souvenez peut-être que lorsque nous avons parlé d'icônes, j'ai déjà mentionné que les animer relèverait à peu près dans la catégorie du design de mouvement. Voici également quelques exemples simples qui, même avec quelques lignes, en introduisant un mouvement dynamique, vous pouvez rendre les choses beaucoup plus intéressantes et même raconter toute une histoire par rapport à une simple icône statique, par exemple. Ainsi, si vous souhaitez vous lancer dans la conception graphique, vous travaillerez principalement avec Illustrator et After Effects, préparer vos éléments et composants dans Illustrator, puis les animer à l'aide d'After. Effets. 31. AR et VR: réalité augmentée et la réalité virtuelle ouvrent de nouvelles dimensions dans le monde du design numérique. Si vous envisagez de vous lancer dans ces types de projets, plus d'utiliser des outils tels que Photoshop et Illustrator, vous aurez également besoin de connaissances sur les applications 3D car la réalité augmentée et la réalité virtuelle dépendent de trois expériences dimensionnelles. Outre les compétences 3D, l'animation et le codage sont également importants pour ces types de projets. Mais la bonne nouvelle, c'est que même si vous n'avez aucune de ces compétences et que vous venez purement d'un milieu graphique. Vous pouvez toujours générer des scènes de réalité augmentée à l'aide de l'outil appelé flèche. Dans les prochaines vidéos, je vais vous montrer un projet réel, comment je l'ai mis en place à partir de zéro, basant sur les ressources que j'ai préparées dans Photoshop et Illustrator. Mais avant d'y aller et au cas où vous êtes nouveau dans ces domaines, je veux juste m' assurer que vous connaissez la différence entre la réalité augmentée et la réalité virtuelle. Ainsi, en cas de réalité augmentée, vous utiliserez votre appareil mobile et à travers l'écran de votre téléphone ou de votre tablette, vous pourrez voir une version améliorée de votre propre environnement. Et en vous promenant en tenant votre appareil mobile, vous pourrez voir différents signes des objets placés dans ce monde de réalité augmentée. Et bien sûr, la meilleure utilisation de la réalité augmentée est quand vous pouvez également interagir avec ces détails améliorés qui sont bons exemples de réalité augmentée déjà utilisée dans l'éducation, par exemple. Et l' exigence la plus importante de la réalité augmentée de fonctionner correctement est de reconnaître votre environnement. Maintenant, il peut s'agir d'une pièce entière ou même de l'extérieur. Cependant, il peut également compter sur un objet physique spécifique dont vous avez besoin pour que l'expérience AR fonctionne. Ainsi, dans ces cas, l'expérience interactive est liée à la présence de cet objet physique. Une fois que vous avez cet objet et que votre appareil mobile est pointé, il va le suivre dans l'espace, et il alignera tous les détails de la réalité augmentée, y compris les objets 3D, le animations, sons et interactivité avec cet objet suivi dans votre environnement. Un autre excellent exemple est la façon dont il peut être utilisé pour tester un meuble, par exemple dans votre propre chambre pour vérifier s' il va s'adapter et s'il est de la bonne taille. Parce que c'est également quelque chose qu' un projet EIR peut facilement estimer pour vous. Étant donné que les caméras de la plupart des appareils mobiles peuvent désormais comprendre les distances et la bonne échelle de votre environnement. Ainsi, un projet de réalité augmentée comme celui-ci sera en mesure d'afficher avec précision la taille correcte d'un meuble, par exemple, comparé à la réalité augmentée, la réalité virtuelle ne dépend pas de votre environnement physique réel. Dans ce cas, vous devrez mettre un casque ou un casque, ce qui vous placera dans ce monde virtuel. Et pour faire l'expérience de ce monde, il suffit de tourner la tête. Et dans certains cas, vous pouvez également faire des allers-retours tant qu'il y a un environnement sûr autour de vous pour pouvoir interagir avec un monde de réalité virtuelle. Vous aurez également besoin de manettes en main. Et outre les exemples évidents et les plus couramment utilisés de jeux qui sont déjà outils créatifs incroyables conçus spécifiquement pour la réalité virtuelle, où vous pouvez sculpter, peindre ou faire d'autres choses créatives. Du point de vue du créateur, augmentée et la réalité virtuelle sont domaines extrêmement intéressants et je vous recommande vivement d' essayer les deux par vous-même pour apprécier les possibilités créatives. Joignez-vous donc à moi dans les prochaines vidéos si vous souhaitez savoir comment utiliser Adobe Aero pour créer un projet de réalité augmentée. 32. Conclusion: Félicitations pour avoir terminé ce cours de la série de théorie du design graphique. J'espère que vous l'avez trouvé utile et inspirant. N'oubliez pas de parcourir le glossaire des termes PDF, de revue tout ce que nous avons couvert, et si vous vous sentez prêt, au questionnaire pour tester vos connaissances. Revenez à tout moment sur les références des tableaux millénaires que nous avons utilisés dans ce cours pour vous aider à vous souvenir des choses dont nous avons parlé ou à définir inspiration pour votre prochain projet de design, veuillez nous faire savoir si vous avez senti qu'il manquait quelque chose ce cours ou si vous avez des suggestions sur la façon dont nous pouvons l'améliorer, envoyez-nous un courriel à info sur le site designer.com, et nous vous répondrons dès que possible possible. Nous apprécions vraiment votre contribution et votre aide. Il est maintenant temps pour vous de choisir votre prochain sujet et de plonger dans un autre cours de théorie de la conception graphique. N'oubliez pas qu'il n'y a pas de bon ou de mauvais ordre pour terminer cette série. Toutes les règles que nous couvrons sont tout aussi importantes et tout est lié. Mais le plus important c'est de bien comprendre ces règles et de les appliquer à vos projets. Je suis sûr que vous utiliserez ce que vous avez appris pour créer quelque chose d'incroyable. Et j'ai hâte de le voir.