Maîtrise de la conception UX/IU : de la théorie à l'hébergement de site Web en direct dans Adobe Xd, Figma et Webflow

1. Introduction du cours: Être un concepteur UX d'interface utilisateur ne se limite pas à travailler dans Adobe XD figma. Il s'agit de comprendre vos utilisateurs à travers les décisions de conception que vous prenez au cours du processus de conception. Hidden Zara, Alex est là et bienvenue dans ce cours Skillshare, où nous allons passer de zéro à héros en tant que designer UX d'interface utilisateur. Je suis un créateur de produits numériques et j'ai créé jusqu'à présent 500 produits de design numérique. Je suis également créateur de cours et, jusqu'à présent j'ai enregistré plus de 40 cours différents, tous consacrés à votre UX design et aux réseaux sociaux. Et jusqu'à présent, 60 000 étudiants se sont inscrits à des cours. Et dans ce cours, nous allons aborder les bases de la conception UX, quoi elle consiste et pourquoi est-elle essentielle au processus de conception ? Concevez des dossiers, expliquez ce qu'ils sont et comment les communiquer à vos clients. Les propositions de projet, ce qu'elles sont et pourquoi vous en avez besoin pour chaque projet. sur les utilisateurs et comment les utiliser pour créer une personnalité utilisateur, analyse de la concurrence et comment éviter les erreurs commises par vos concurrents. Les flux d'utilisateurs se font de différentes manières. Les utilisateurs parcourent votre site Web, maquettes papier et expliquent pourquoi ils sont utiles pour la conception, la structure, mises en page et les grilles. Ils expliquent également comment les utiliser pour améliorer la cohérence du design, topographie et l'appariement des polices, et comment choisir les polices idéales pour vos designs, votre iconographie et les jeux d'icônes adaptés à vos projets. Théorie des couleurs et comment choisir les couleurs parfaites pour n'importe quel projet. Travailler avec des images, des ensembles d' images et les avantages des collections, des moodboards et expliquer pourquoi ils sont importants pour définir la charge des projets, kits d' interface utilisateur et les systèmes de conception , et quelle est la différence entre les deux. Ensuite, nous passerons au projet de ce cours et concevrons un site Web à partir de zéro dans Adobe XD Figma, utilisant les techniques que nous avons apprises dans ce cours, construisant dans Bloodflow, rendant réactif et en le publiant sans écrire une seule ligne de code. Des études de cas et comment les utiliser pour attirer de meilleurs clients pour vos projets. Et où trouver le poste en fonction du type d'emploi que vous souhaitez obtenir. Ce cours comprend 20 sections, l'une des 200 leçons et les 28 heures de contenu vidéo. Vous obtiendrez tous les modèles et fichiers pratiques utilisés dans ce cours, Vous obtiendrez tous les modèles et fichiers pratiques à la fois pour Adobe XD et pour fémur. Vous pouvez donc suivre les deux années d'enregistrement et les commentaires de plus de 60 000 étudiants qui ont contribué à la création de ce cours, qui en fait le cours UI UX le plus important et le plus complet jamais créé en ligne. J'ai hâte de te voir à l'intérieur. Et commençons le parcours de conception de l'UI UX. 2. Structure de cours: Bonjour et bienvenue au cours. Dans cette première leçon, je vais parler un peu structure du cours et des fichiers de projet. La structure du cours comporte donc essentiellement deux parties principales. L'une est la théorie, la première est la partie pratique. La majorité des jeunes designers, en particulier, évitent simplement la partie théorique et se lancent directement dans l'outil de conception sans connaître les bases du design, du processus, des méthodologies que vous pouvez utiliser le chemin. Et c'est pourquoi ils ont du mal ou pire encore, les démons se chargent de la partie design et passent directement au Webflow ou directement au code, ou quelque chose comme WordPress ou Wix ou tout autre outil qu'ils sont en utilisant sans jamais savoir comment concevoir réellement. C'est pourquoi j'ai décidé de créer ce cours en premier lieu pour aborder à la fois les deux structures, donc à la fois la théorie et la pratique, et pour vous montrer les deux et comment l'utiliser à la fin. Donc, comme je l'ai dit, si vous le souhaitez, vous pouvez apprendre la partie théorique, ou si vous connaissez la théorie, vous pouvez passer directement à la partie pratique, mais nous le recommandons vivement, surtout si vous venez de J'ai commencé à étudier et à apprendre cette partie théorique, car elle vous sera utile à la fin de votre carrière. Et une dernière chose que je voudrais mentionner à propos de cette leçon concerne les fichiers d'entraînement. Chaque section, si elle contient des fichiers, seront liés dans le fichier zip. Vous pouvez télécharger le fichier zip dans cette section et l'utiliser. Ou s'il est indiqué autrement, selon l'endroit où vous regardez ce cours, vous aurez l'un ou l'autre fichier zip dédié pour télécharger chaque fichier de cette classe. Ou vous aurez, comme je l'ai dit, différentes sections avec des fichiers zip pour chacune de ces sections que vous pouvez télécharger et suivre. Commençons donc. 3. Projet du cours: Votre projet de classe pour ce cours consiste à suivre la section dans laquelle nous créons réellement le design du site Web, en suivant les instructions de la vidéo et en suivant le dossier pratique que j'ai fourni, Je veux que vous créiez votre propre design. Vous n'avez pas besoin de trop changer. Vous pouvez utiliser les images que j'ai fournies , par exemple , mais j'adorerais voir des couleurs différentes, peut-être même une topographie différente. Et je veux juste vous voir expérimenter les outils et les techniques que j'ai fournis dans ce cours. Si vous ne vous sentez pas à l'aise de créer ce type de design à grande échelle, de le sauvegarder et de le télécharger dans votre projet de classe. Ensuite, vous devriez peut-être suivre ces différentes tâches pour chaque section, car chaque section possède sa propre mission Vous pouvez peut-être terminer cette tâche, enregistrer au format JPEG et la télécharger à un projet de classe. J'ai hâte de voir ce que vous pouvez créer et je vous invite à partager votre travail. J'ai hâte de vous fournir tout type de feedback et toute forme d' aide possible et partager votre travail dans le cadre des projets de classe. 4. Mises à jour du cours de Figma: Maintenant qu'Adobe a acheté Figma, je souhaite mettre à jour ce cours à l'avenir et inclure tout le contenu non pertinent de Figma. Vous aurez donc la possibilité d'avoir du Adobe XD ainsi que du contenu Figma en termes de différence. Certaines fonctionnalités de Figma ne sont pas incluses dans Adobe XD, par exemple Fig Jam et Pages, ainsi que toutes sortes de fonctionnalités de prototypage un peu plus avancées qui se trouvent dans Adobe XD. Mais d'un autre côté, Adobe XD possède certaines fonctionnalités que Figma ne possède pas. Cette mise à jour va donc être déployée progressivement au cours des prochains mois. Et je vais essayer de mettre à jour chaque partie de ce cours qui contient contenu XD vers du contenu Figma également. Je vais commencer par les principales parties de ce cours, telles que la conception, les propositions de brief et de projet, la personnalité et la conception des pages elles-mêmes, leur exportation et l'utilisation de Webflow, car ce sont les principales parties de ce cours qui doivent évidemment être mises à jour. Mais au cours des prochains mois et de l'année prochaine, par exemple, je vais même aller jusqu'à inclure la conception, la configuration du système et la création de votre propre kit d'interface utilisateur. Mais tu vas devoir attendre encore un peu pour ces leçons. Mais si vous jetez un œil au contenu mis à jour que j'ai créé jusqu'à présent, vous aurez facilement un aperçu de la façon de le créer dans Figma. Il y a aussi la question des futures mises à jour, maintenant qu'Adobe a racheté Figma et ce qu'elle va faire Figma à l'avenir, c' inclure toutes les fonctionnalités de Photoshop, par exemple est-à-dire inclure toutes les fonctionnalités de Photoshop, par exemple toutes les fonctionnalités d' Illustrator, par exemple, personne ne peut le dire pour le moment, pour le moment. Mais pour l'instant, profitez ces mises à jour et assurez-vous de rester dans les parages, car je à jour ce cours à l'avenir et ajouterai tout le contenu pertinent au fur et à mesure de sa sortie. Et bien sûr, s'il y a également des mises à jour majeures de Figma à l'avenir, je les aborderai également dans ce cours. En termes de contenu X D, j'ai abordé à peu près tout ce qui doit être abordé pour Adobe XD. À l'avenir, nous allons nous concentrer uniquement sur le contenu de Figma en termes d'utilisation de XD. Adobe a publié une déclaration, déjà enregistrée dans une vidéo séparée à ce sujet, selon laquelle elle conservera XD pour le moment. Cela signifie que pendant les deux prochaines années, par exemple , vous pourrez utiliser x comme il est tout à fait normal, il continuera à recevoir des mises à et il vient d'être mis à jour plus tôt dans la journée. Vous pouvez donc le consulter, installer ces mises à jour, vous pouvez l'utiliser. Vous pouvez suivre ce cours tout à fait normalement. Donc, dans un an et demi ou deux ans, rien ne changera. Vous pouvez utiliser XD, vous pouvez utiliser Figma, peu près exactement de la même manière. Comme je l'ai dit, je vais créer le contenu de ce cours et couvrir tout ce que vous devez savoir à la fois pour Adobe XD et Figma. Alors profitez du cours. Assurez-vous de consulter toutes ces mises à jour si vous êtes intéressé par le contenu de Figma. Et pour certains, vous devrez regarder le bateau parce que je ne voulais pas vous faire perdre trop de temps à recréer tout le contenu pour qu'il soit exactement le même pour XD Figma. Je viens de parler de ce qui est différent entre Figma et Je viens de parler de ce qui est différent entre Figma Adobe XD car, comme je l'ai mentionné au début de cette vidéo, ils font désormais partie de la même famille Adobe. Donc, à l'avenir, tout sera à peu près identique. Alors profitez du cours. 5. SECTION 1 UX: design UX est extrêmement important dans le processus de conception, car si vous le considérez comme une maison, design UX est la structure XOR de la maison. conception de l'interface utilisateur physique est donc la façade réelle qui donne sur une maison et lui donne belle apparence de l'extérieur. Et le véritable code qui apparaît à la fin est celui des fenêtres, de l'électricité et d'Internet. Ainsi, pour qu'une maison soit habitable et qu'elle fonctionne, chacune de ces étapes est extrêmement importante dans le processus de conception global. Sauter l'une de ces étapes est donc une très mauvaise idée. Dans cette première section de ce cours, nous allons simplement parler des bases de l'UX design. Commençons donc. 6. Qu'est-ce que le design UX: conception de l'expérience utilisateur est le processus qui consiste à concevoir des expériences efficientes, efficaces et agréables pour les utilisateurs. Donc, en d'autres termes, vous devez savoir pour qui vous concevez ? Que concevez-vous en premier lieu et quels problèmes ce produit ou service contribue-t-il à résoudre ? Donc, pour le savoir, vous devez effectuer ce que l' on appelle une étude sur l' expérience utilisateur. Et vous devez comprendre qui sont vos utilisateurs, quels sont leurs besoins, quels sont leurs désirs ? Parce que tous les utilisateurs ne sont pas identiques. Votre travail en tant que concepteur UX consiste donc à cibler ces besoins et à aider à les résoudre par le biais d'un processus de conception UX. Parce que chaque projet est différent, chaque utilisateur est différent et ses besoins varient d'un projet à l'autre. En tant que concepteur d'expérience utilisateur, vous devez vous adapter aux besoins de ces utilisateurs. 7. Que fait le designer UX: L'Ux designer comprend les besoins et les objectifs de l'utilisateur. Ils entrent en contact avec les utilisateurs pour comprendre ce qu'ils attendent réellement de ce produit ou de ces expériences. C'est ce que l'on appelle la recherche sur les utilisateurs. Et il s'agit de la première étape du processus de conception UX. L'étape suivante consiste à définir clairement les besoins et les désirs des utilisateurs en matière de produits, afin de définir clairement les objectifs du produit. Cela conduit à la phase d'idéation au cours de laquelle les concepteurs UX proposent des solutions potentielles aux problèmes auxquels les utilisateurs sont confrontés. Vient ensuite la phase de prototypage au cours de laquelle les concepteurs UX prennent leurs idées et les transforment en prototypes fonctionnels, qu'ils partagent ensuite avec les parties prenantes et les autres membres de l'équipe pour simplement tester et assurez-vous qu'ils fonctionnent réellement avant de les mettre en production et avant de le pousser à des tests supplémentaires avec les utilisateurs. Ensuite vient la dernière étape, qui consiste tester, au cours de laquelle les concepteurs d'expérience utilisateur proposent leurs solutions aux utilisateurs pour s'assurer qu' elles fonctionnent réellement et pour s'assurer qu'ils résolvent réellement les problèmes auxquels l'utilisateur est confronté. Le processus de conception UX n'est jamais terminé car lorsque vous testez réellement le produit que vous avez créé en tant que designer UX, tout comme vous le faites plus tard, par exemple six mois ou 12 mois plus tard, les besoins des utilisateurs vont changer. Vous devez donc améliorer ce produit ou expériences en fonction des besoins de ces utilisateurs. Et les concepteurs d'expérience utilisateur sont là pour le faire tout au long du cycle de vie du produit ou du service. Ils doivent continuer à faire des recherches, ils doivent continuer à améliorer le produit ou service pour répondre aux besoins de l'utilisateur. Parce que, comme je l'ai dit, les besoins et les désirs des utilisateurs évoluent constamment. Parce que dans le monde en rapide évolution dans lequel nous vivons aujourd'hui, ces changements sont nécessaires de temps à autre, par exemple pour certains produits. Mais ces modifications sont requises sur une base mensuelle, ce qui est très rare. Mais en général, c'est environ six mois ou un an. Et en tant que concepteur d'expérience utilisateur, vous devez comprendre quels sont ces besoins en menant des entretiens avec tous ces chercheurs sur les doses orales. Et vous devez adapter le produit ou le service pour répondre aux nouvelles exigences et aux nouveaux besoins de vos utilisateurs. 8. L'UX est-il le même que l'interface utilisateur: La conception de l' interface utilisateur, ou conception d'interface utilisateur, est le processus de conception d' expériences telles que des sites Web ou des applications mobiles. Il n'en est qu'à un stade avancé du processus de conception UX, mais il est tout aussi important car il ne s'agit pas seulement d'une partie du processus de conception UX, de la partie cruciale du processus de conception UX. Vous pouvez avoir les meilleures recherches, une stratégie de contenu parfaite. Mais si leur expérience n'est pas belle et lisible, personne ne voudra l'utiliser. Certains concepteurs d'expérience utilisateur vont jusqu'aux wireframes papier et s'arrêtent là parce que leur niveau de compétence a diminué, mais on peut appeler cela des wireframes de journaux. C'est là que les concepteurs d'interface utilisateur interviennent pour transformer ces maquettes papier afin transformer ces chercheurs et ces idées en modèles fonctionnels, prototypes fonctionnels, parfois même code que les utilisateurs peuvent réellement utiliser, test. Ensuite, les concepteurs d'expérience utilisateur et les concepteurs d'interface utilisateur peuvent s'améliorer conjointement pour une meilleure utilisabilité et pour des tests et des recherches plus poussés. Les concepteurs d'interface utilisateur n'ont pas besoin de savoir comment coder, mais il est important qu'ils comprennent comment fonctionne le code et comment structurer leur conception pour la partager avec les développeurs. Il existe également ce que l' on appelle des outils sans code, qui, de nos jours, sont très courants dans le secteur de la conception d'interface utilisateur UX. Et ce sont des outils tels que Webflow et l'application Bravo Studio, qui vous aident, en tant que concepteur d'interface utilisateur, créer toutes ces expériences et à les transformer à partir de conceptions statiques et des prototypes en de superbes sites Web ou applications mobiles fonctionnels. Les outils sans code sont vraiment géniaux car vous n'avez pas besoin de savoir coder. Mais encore une fois, il est très important que vous compreniez comment fonctionne le code , comment structurer les designs, car il sera très simple de créer ces expériences dans des outils que j'ai mentionnés tels que Workflow ou une application Brow Studio, ou pour envoyer ces designs et les exporter correctement pour vos développeurs, car l'ensemble du système doit fonctionner comme un seul système. Sinon, il va tout simplement s'effondrer. Car encore une fois, quel est l'intérêt d' étude magnifiquement exécutée sur toutes ces réunions avec les clients et les utilisateurs ? Si ce n'est pas quelque chose que les utilisateurs voudraient réellement utiliser sur leurs appareils tels que les ordinateurs portables, les appareils mobiles, les tablettes, etc. C'est pourquoi la conception de l'interface utilisateur est cruciale dans tout ce processus, car elle est là pour transformer ces idées et les transformer en concepts fonctionnels, plus souvent que jamais à l'aide de ce que l' on appelle des outils sans code, que je viens de mentionner. Ou simplement savoir comment structurer ces conceptions en quelque chose que l'on appelle, par exemple , un système de conception, qui est ensuite évolutif plus tard dans le processus de conception, par exemple six mois, 12 des mois, voire quelques années plus tard. Parce que ce système de conception est là pour les aider à adapter le produit et à le mettre à jour au fil du temps. Parce que vous, en tant que concepteur d'interface utilisateur serez là dans cette entreprise, par exemple pendant, disons deux ans. Mais que se passe-t-il après votre départ, après avoir changé d'entreprise, après avoir travaillé en tant que travailleur indépendant, quelqu'un d'autre doit vous remplacer et reprendre là où vous vous étiez arrêté. C'est là que ces systèmes de conception ou kits d'interface utilisateur, par exemple, s'avèrent utiles. Et c'est là que le poste de concepteur d'interface utilisateur est vraiment crucial. Parce qu'une fois de plus, c'est le principal fossé et le pont clé entre les concepteurs UX en tant que concept et recherche, et les développeurs en tant que personnes qui mettent ces concepts et ces recherches au service du développement pour la réalité. utilisateurs à utiliser. Le design de l'interface utilisateur n'est pas un design UX, mais c'est une partie du processus de conception en général et tout aussi importante , à mon avis. Pour ça. 9. Compétences UX: Un bon concepteur d'expérience utilisateur doit avoir de l'empathie pour écouter ses utilisateurs et comprendre leurs besoins. Lorsqu'ils mènent des recherches sur les utilisateurs, les concepteurs d'expérience utilisateur doivent savoir quelles questions poser pour mieux comprendre les problèmes à résoudre. Et ils doivent comprendre comment utiliser les outils nécessaires pour accomplir ces tâches, car les outils sont nombreux et nous les aborderons dans l'une des prochaines leçons. Mais vous devez comprendre les questions à poser pour aider autres membres de l'équipe à résoudre le problème auquel sont confrontés vos utilisateurs. La communication avec les utilisateurs, mais également autres membres de l'équipe tels que les concepteurs et les développeurs d' interface utilisateur, est la clé d'un processus de conception parfaitement fonctionnel. Et c'est une compétence clé que tout bon designer UX devrait posséder. grands designers UX se spécialisent également dans ce que l'on appelle la rédaction UX, la conception visuelle et parfois même le marketing, afin de faciliter l'ensemble du processus de conception et d'apporter plus de valeur à l'équipe dans laquelle ils travaillent. Vous n'êtes pas obligé de posséder toutes ces compétences qui viennent d'être mentionnées. Et il existe de très nombreuses autres compétences. Mais plus vous en aurez, plus vous apporterez de la valeur à l'équipe dont vous faites partie. Ou si vous travaillez en tant qu'indépendant, plus vous avez de chances d'avoir projets plus importants et plus coûteux sur lesquels travailler car vous allez jouer rôle crucial dans cette équipe, parce que tu possèdes toutes ces compétences. Ces compétences viennent avec le temps. Ne vous inquiétez donc pas si vous ne faites que commencer et que vous ne possédez pas certaines de ces compétences ou si vous ne comprenez pas ce que sont certaines de ces choses. Commencez petit ou grand, construisez à partir de là, puis améliorez vos compétences au fil du temps. 10. Dans la maison VS Créateur indéniable UX: Lorsque vous travaillez au sein d' une agence, il y a de fortes chances que vous travailliez simplement en tant que designer UX. Plus l'entreprise est grande, plus elle a de chances d' avoir un rédacteur dédié et équipe de recherche dédiée, concepteur d'interface utilisateur dédié ou, par exemple, des développeurs. Ainsi, vous pouvez vous concentrer sur l'UX design lui-même et sur l'ensemble du processus lui-même. Et plus vous avez de chances faire partie intégrante de cette équipe car vous pouvez simplement vous concentrer sur vos tâches en tant que concepteur d'expérience utilisateur. Entre-temps, nous apportons de bons produits, un salaire, mais nous sommes limités, car vous ferez partie intégrante de cette équipe de conception. Mais vous allez simplement travailler seul en tant que designer UX. Mais lorsque vous travaillez en tant que designer indépendant, plus vous savez comment faire ces choses, plus vous apporterez de la valeur à la partie de l'équipe ou au projet sur lequel vous allez travailler. Ainsi, vous pouvez obtenir un salaire plus élevé. Pour ces raisons, vous pouvez par exemple entreprendre deux ou trois grands projets par an, puis vous détendre le reste de l'année. Vous n'êtes pas obligé de travailler le reste de l'année, par exemple , ou vous pouvez entreprendre nombreux petits projets en raison de très nombreux petits projets en raison de vos compétences . Encore une fois, plus vous avez de compétences, plus vous avez de chances de travailler sur ces grands projets et d'apporter grande valeur à ces entreprises. Et encore une fois, plus vous pouvez apporter ces valeurs à l'équipe dans laquelle vous faites partie, plus vous avez de chances d' obtenir un gros salaire grâce à ces projets. Cela dépend simplement de ce que vous aimeriez faire et de l'endroit où vous souhaitez vous situer dans votre carrière. Certaines personnes aiment travailler dans une agence pendant des années. D'autres personnes aiment simplement travailler en freelance. Certaines personnes aiment faire les deux. Peut-être travailler dans une agence puis travailler en freelance. autre côté, cela dépend simplement de qui vous êtes, endroit où vous voulez être dans votre vie et dans votre carrière. Par exemple, certaines personnes apprécient la stabilité de l'agence parce qu'elle continue à générer des coûts, des revenus ou des personnes aiment prendre le risque et se lancer dans des projets plus importants en tant que designers UX indépendants. Mais encore une fois, cela dépend également de vos compétences, ce que vous savez faire, niveau de compétence dans le travail que vous faites ? Par exemple, dans ce cas, UX designer. Dans quelle mesure pouvez-vous bien communiquer avec les autres membres de l'équipe ? Comme je l'ai mentionné, par exemple les concepteurs d'interface utilisateur, les développeurs et les graphistes, parfois l'équipe marketing. Tout dépend donc de vous. Si vous débutez ou si vous recommandez vraiment d'essayer de faire les deux, commencez peut-être par le design indépendant juste pour comprendre les besoins du client. Vous pouvez peut-être accéder à des plateformes telles que Upwork ou 99 designs. Choisissez quelques projets de conception ici et là, puis comprenez simplement ce dont ces clients ont réellement besoin. Comprenez leurs utilisateurs, comprenez leurs besoins et apprenez à mener des recherches appropriées sur l'expérience utilisateur. Et puis passez à autre chose. Peut-être qu'avec cette expérience, vous postulez à un emploi dans une agence de design, juste pour comprendre comment et comment c'est de faire partie d' une équipe physique travaillant avec d'autres personnes au sein de cette agence. Et comprenez simplement le rythme du travail au sein d'une agence, lorsque vous travaillez sur un projet à la fois avec plusieurs personnes dans le même bureau, en même temps. peut-être ce qu'il y a de mieux pour toi. Mon conseil est donc d'essayer de faire les deux et de voir où vous vous trouvez. Et puis n'oubliez jamais que vous pouvez toujours passer de l'agence à l'indépendant et revenir à l'agence. Cela n'a pas vraiment d'importance. Ce qui compte ici, c'est d'essayer de faire les deux pour comprendre les deux côtés de la médaille. 11. Outils pour les créateurs d'UX: Il existe de nombreux outils différents que vous allez utiliser en tant que concepteur d'expérience utilisateur. Donc, dans cette vidéo, je vais juste aborder quelques questions de base. Et aussi, comme je l'ai mentionné dans les leçons précédentes, fil du temps, au fur et à mesure que vous perfectionnerez vos compétences, vous découvrirez quelques-uns de ces magasins et quelques autres outils qui font des choses similaires. Tout dépend de vous, du projet, des besoins des utilisateurs, de ce que vous aimez vraiment faire et de ce que vous devez faire. Assurez-vous donc de faire vos recherches. Et pour ces outils que je vais vous montrer dans cette vidéo, je vais créer un PDF qui sera joint à ce cours et que vous pourrez télécharger. Et vous pouvez simplement cliquer sur ces liens pour y accéder facilement sans plus attendre. Commençons. Les premiers outils que nous allons aborder sont donc des outils de recherche sur l'expérience utilisateur. Maintenant, certains de ces outils sont premium et vous devez les payer. Quel péjoratif, ces outils proposent au moins un essai gratuit afin que vous puissiez les tester et afin que vous puissiez les tester et voir s'ils vous conviennent. Une recommandation que j'ai pour vous est la suivante : si vous ne faites que commencer, assurez-vous de faire vos recherches sur les outils gratuits et de le faire à pied. Ce que je veux dire par là, c'est que vous pouvez utiliser la majorité de ces outils gratuits tels que Skype, comme Google Meet et d' autres outils de ce type pour mener vos recherches et vos entretiens avec les utilisateurs, par exemple et des outils comme DOS. Et assurez-vous de toujours être payé avance pour vos projets. Surtout si vous devez payer pour certains de ces outils parce qu'ils sont chers, ils peuvent être très chers à terme, en particulier de plus en plus d'outils que vous ajoutez à votre boîte à outils . de plus en plus cher. Donc, assurez-vous toujours, toujours d'être payé avance avant de commencer à utiliser ces outils. Comme je l'ai mentionné, les outils de recherche sur l'expérience passent avant tout et nous avons des livres Teller qui vous permettent de comprendre la boîte à outils UX interactive de votre client pour démarrer votre prochain projet avec recherches appropriées. Assurez-vous de regardez la vidéo. Encore une fois, les liens apparaîtront dans le PDF, cliquez dessus et accédez à tous ces outils. Vous pouvez ainsi personnaliser le processus de conception en fonction des besoins de votre projet. Vous pouvez obtenir ce pilote avec des modèles interactifs uniques. Donc, la majorité de ces modèles, entretiens avec les parties prenantes, entretiens avec les utilisateurs, et vous pouvez simplement adapter tous ces modèles à vos besoins et aux besoins de votre projet particulier. Vous disposez des données que vous pouvez analyser et créer des équipes avec des tags. Ainsi, vous pouvez taguer par exemple les erreurs d'inscription. S'inscrire une seule inscription nécessite une intégration où les utilisateurs sont bloqués et tout cela. Ensuite, nous avons le réglage de l'UX. La seule plateforme de recherche sur l'expérience utilisateur dont vous aurez besoin est celle d'outils permettant améliorer la convivialité des sites Web et des applications, du prototype à la production. Vous pouvez ainsi consulter les tests d' utilisabilité, les recherches sur l'architecture de l'information, analyses du comportement des utilisateurs. Encore une fois, lorsque les utilisateurs sont bloqués, ont-ils besoin d' aide pour que vous puissiez faire toutes ces recherches ici ? Vous pouvez ensuite exporter ces recherches pour mieux comprendre et analyser, par exemple en communiquant avec votre équipe pour mieux comprendre ce dont elle a réellement besoin. Solution tout-en-un pour générer des données : en prenant des décisions éclairées lors de la conception de votre site Web, vous pouvez organiser votre contenu à la perfection afin de pouvoir trier les cartes, effectuer le tri des cartes, tester l'arborescence. Vous pouvez mettre l'accent auprès de vos utilisateurs. Vous pouvez ainsi effectuer des tests de préférences, des enquêtes de test de cinq secondes, des enregistrements de session , etc., puis analyser les données ultérieurement pour comprendre ce dont vos utilisateurs ont réellement besoin. Enfin, nous avons ce qu'on appelle l'échec. Donc, en gros, tous ces outils sont vraiment similaires, font un travail vraiment similaire. Et je déteste ces pop-ups ennuyeux. Ils ont donc la plateforme, les solutions, les études de cas, les ressources nécessaires que vous puissiez apprendre à utiliser ces outils. Et enfin, ils ont les prix. Encore une fois, des solutions d' expérience client intuitives pour améliorer les expériences. Vous pouvez transformer l'excellence en expérience en avantage concurrentiel. Vous pouvez donc voir tous ces outils. Voyons donc la plateforme. Vous pouvez donc utiliser des enquêtes interactives, des commentaires par SMS et e-mail, des commentaires numériques. Vous pouvez importer des commentaires, des contextes, des thèmes de cartographie du parcours. Ils disposent donc de la majorité de ces outils. Encore une fois, si vous ne faites que commencer, vous n'avez pas besoin de tout savoir. Il vous suffit de vous familiariser avec les recherches plus générales sur l'UX. Et l'essentiel, c'est que toutes les agences, toutes les équipes n'utilisent pas ces outils. La majorité des grandes agences le font, mais les petites agences en équipes ne le font pas parce que leurs projets sont beaucoup plus petits besoins de ces utilisateurs sont bien moindres. Enfin, à la fin, mais ce qui est tout aussi important, les budgets de ces projets sont beaucoup plus restreints. grands projets vont donc faire appel à tous ces outils et à toutes ces recherches, aux chercheurs, car ils ont plus d'utilisateurs et ces utilisateurs ont plus de besoins que les petits projets. Vous devez donc le comprendre. Ensuite, nous avons des outils de conception UX pour créer des plans de site et des flux d'utilisateurs. plans de site et les flux d'utilisateurs sont très importants et constituent un élément crucial du processus de conception de l'expérience utilisateur. Je vais donc vous montrer ici deux outils, mais encore une fois, il existe de très nombreux autres outils qui font la même chose. Vous pouvez donc voir à quoi ressemblent ces outils ici. Vous pouvez ainsi créer un plan du site, créer un flux utilisateur, explorer des personnages, créer des cartes du parcours client. Enfin, vous pouvez créer des wireframes, ce qui est en cours de réalisation pour cette plateforme particulière appelée carte de flux. Encore une fois, les fuites se trouveront dans un PDF afin que vous puissiez facilement vérifier votre bouche. Alors, comment ça marche ? Bien expliqué ici. Vous pouvez donc créer un plan du site. Vous pouvez voir à quoi cela ressemble ici. Vous pouvez créer des organigrammes. Vous pouvez rechercher des utilisateurs. Vous pouvez jouer avec les parcours clients. Vous pouvez gérer le contenu de manière à pouvoir comprendre et télécharger des fichiers sous forme de descriptions de pages, textes et simplement de propos criminels. Et enfin, partagez avec le client pour obtenir des commentaires. C'est donc génial. Et puis il y a le débordement. Vous pouvez ainsi créer des diagrammes de flux utilisateur interactifs qui racontent une histoire. Vous pouvez communiquer vos designs comme jamais auparavant. Vous pouvez ainsi transformer vos designs en magnifiques flux d'utilisateurs et vous pouvez voir à quoi cela ressemble ici. Donc, un peu différent de ce site Web appelé carte de flux, vous pouvez télécharger vos conceptions ici et les connecter à des organigrammes, puis partager ces organigrammes avec vos clients parce que par ex. certains clients ne comprennent pas de tels designs. Ils veulent vraiment de tels designs. Ainsi, selon qui est votre client, qui sont vos coéquipiers, quels sont leurs désirs et leurs besoins , le budget et le calendrier, vous devrez choisir l' un ou l'autre. Je ne fais donc que vous montrer ces exemples. Encore une fois, les liens seront au format PDF. N'oubliez pas de les consulter pour voir et comprendre ce qui vous convient le mieux. Ensuite, nous avons des outils pour créer des wireframes et des prototypes. balsamique est le premier outil. C'est un outil bien connu. Vous pouvez donc faire toutes ces choses ici. Vous pouvez interviewer toutes ces personnes. Vous pouvez les placer dans ces wireframes. Et le but de Balsamiq c'est qu'ils vous proposent ces modèles vraiment basiques. Donc, si vous recherchez ce genre de choses, vous pouvez utiliser du balsamique. Je vais vous montrer rapidement le produit. Vous pouvez voir ici, en arrière-plan, à quoi il semble qu'ils vous fournissent tous ces éléments de base pré-préparés, qui ressemblent à des sites Web, à des applications mobiles. Ainsi, vous pouvez rapidement communiquer vos idées aux clients et aux parties prenantes. Mais à mon avis, ce que vous pouvez faire, c'est passer à la vitesse supérieure et transformer ces idées en prototypes plus nombreux, plus beaux et plus réalisables. Pour cela, j'aime utiliser des outils comme Adobe XD. Je l'utilise tous les jours. J'adore ça. J'ai consacré mes années dans ce secteur à Adobe XD parce que je crois sincèrement que cet outil est génial. Tout le monde ne sera pas d'accord avec moi. C'est très bien. C'est pourquoi nous avons des outils comme Figma et des outils comme Sketch. Mais à mon avis, Adobe XD est le meilleur car il fait partie de la famille Adobe. Ce que je veux dire par là, c'est que si vous devez ajuster certaines images, vous pouvez utiliser Photoshop. Si vous devez créer des illustrations, vous pouvez utiliser Illustrator. Si vous avez besoin de modifier certaines vidéos très rapidement, vous pouvez utiliser Premiere. Si vous devez créer des effets, vous pouvez utiliser After Effects. Et tous ces outils font partie d'une même famille, ce qui réduit le temps d'utilisation pour passer d'une application à l'autre, ce qui réduit le temps consacré à votre apprentissage. Toutes ces nouvelles applications font partie du même système. J'ai de nombreux cours et cours sur Adobe XD. Assurez-vous donc de les consulter également. Si vous souhaitez en savoir plus sur Adobe XD, ce que c'est et ce qu'il peut faire. Mais pour l'instant, je l' aime beaucoup et j' aime vraiment l'utiliser. Mais contrairement à Adobe XD, qui fait partie de cette grande famille, Figma et Sketch sont des sociétés distinctes qui se consacrent uniquement à ces outils. Mais cela signifie qu' ils seront plus dévoués à leurs utilisateurs. Mais ces outils ne seront jamais aussi complets que ceux de la famille Adobe, par exemple Adobe XD. Parce que les équipes à l'origine ces entreprises sont bien de ces entreprises sont bien plus petites que celles d'Adobe, par exemple , elles peuvent publier mises à jour plus importantes chaque mois, par exemple pour Adobe, XD est le cas. Ensuite, pour Sketch, dont je sais qu'ils lancent des mises à jour chaque année tandis que l' équipe Adobe XD effectue des mises à jour tous les mois. Encore une fois, je n' essaie pas d'utiliser l'un de ces outils parce que je n'ai pas de cheval dans cette course, comme on dit. Mais je te dis juste ce que j'aime faire. Vous pouvez décider vous-même, par exemple, pour certaines personnes, Adobe XD n'est pas une solution. Figma est la solution. Et pour certaines personnes, le sketch l'est toujours. À mon avis, Adobe XD, Figma R2 sont les meilleurs outils pour le travail ici. Mais c'est vous qui allez prendre la décision finale à la fin de la journée. Ensuite, nous avons les outils pour la recherche et les tests UX. Et voici usertesting.com, qui est l'un des meilleurs sites Web pour ce service en particulier. Vous pouvez avoir une vision directe et précise de ce que pensent et vivent vos clients pensent et vivent grâce aux récits d'expérience client. Vous pouvez donc vraiment vous plonger dans ces outils. Comme je l'ai dit, je ne vais pas le faire dans cette vidéo en particulier. J'essaie simplement de vous montrer ces outils qui sont à votre disposition afin que vous puissiez explorer plus en détail quels outils vous intéressent et quels outils sont importants pour le projet sur lequel vous travaillez. Vous pouvez donc poser ici toutes les questions que vous pouvez cibler, les personnes que vous pouvez impliquer et mettre en valeur, que vous pouvez découvrir et analyser et partager des idées. Ils couvrent donc essentiellement l'ensemble de cette procédure de test utilisateur pour vous dans cet outil en particulier. Ensuite, nous avons une caméra UX qui vous permet de proposer une expérience d'application parfaite. Donc, encore une fois, il y a une application de ciblage ici. Leader du marché dans le domaine de l'analyse de l'expérience applicative , il permet aux équipes mobiles fonctionnalités contextuelles rapides et de haute fidélité. Donc, une seule analyse des applications mobiles. Donc, si vous travaillez sur des projets mobiles, c'est peut-être la solution idéale pour vous. Ou si vous travaillez sur des projets de bureau et mobiles, cet outil vous convient peut-être. Encore une fois, assurez-vous d'utiliser les outils qui sont réellement essentiels pour vous. Et encore une fois, je vais répéter ce que j'ai dit au début de cette vidéo. Assurez-vous d'être payé d'avance, car ces outils peuvent rapidement s'accumuler à mesure que vous en ajoutez de plus en plus. Et avant de commencer à dépenser de l'argent pour ces outils, mon meilleur conseil est de les essayer, de les tester et de voir s'ils vous conviennent vraiment sur ce projet en particulier. Ne t'attache pas à un outil. Si cela ne vous convient pas, assurez-vous de les tester, les essayer et de comprendre s'ils sont vraiment nécessaires ou non pour ce projet en particulier. Enfin, nous disposons des outils nécessaires à la collaboration en équipe. Ce que nous avons ici, c'est le slack, et c'est l'un des outils les plus connus sur le marché. Mais dans Slack, vous pouvez créer toutes sortes de communautés différentes. Vous pouvez créer des discussions distinctes avec des personnes distinctes au sein de votre équipe. Vous pouvez également l'utiliser pour les utilisateurs. Vous pouvez faire des recherches, effectuer des tests ici même, dans la diapositive, mais il s'agit principalement d'un outil de communication entre les équipes et les coéquipiers. Ensuite, pour la livraison, vous pouvez utiliser ce que l' on appelle l'échantillonnage. Et l'échantillonnage fonctionne bien avec les outils que j'ai mentionnés précédemment, tels que Adobe, XD, Figma et Sketch. Vous pouvez donc l'intégrer de manière native, démarrage est gratuit, mais au fur et à mesure que vous y ajoutez de plus en plus de plans de travail, plus vous en ajouterez dans ce fichier, cela va commencer à coûter cher. Le point clé de Chaplin est de vous permettre de travailler avec des développeurs afin de partager facilement vos conceptions avec les développeurs. Ils peuvent ensuite mesurer les distances, les marges de remplissage, etc. Pour pouvoir facilement comprendre ce qu'ils doivent utiliser dans le code. Vous pouvez ensuite le faire de manière native dans Adobe XD. Figma. Je ne suis pas sûr de Sketch, mais certaines personnes aiment vraiment utiliser le pouvoir de Chaplin, car vous pouvez également laisser des commentaires ici et là, ce que vous pouvez également faire dans Adobe XD et Figma. Mais encore une fois, certaines personnes aiment également utiliser Zeplin parce qu'elles y sont habituées ou parce qu'elles doivent ensuite faciliter le code mort plus tard d'une manière ou d'une autre. Encore une fois, c'est à vous de décider ce qu'elle veut vraiment faire ces outils et ce que vous devez vraiment utiliser. Donc, comme je l'ai mentionné à quelques reprises tout au long de cette vidéo, assurez-vous de consulter le PDF. Je vais laisser tous les liens que j'ai mentionnés dans ce PDF. Assurez-vous de voir lequel de ces outils vous convient le mieux. Lequel de ces outils vous convient le mieux ? Et encore une fois, mon conseil clé est ne pas vous précipiter et d'investir tout votre argent dans ces outils. Si vous n'allez pas les utiliser, assurez-vous de les tester. Assurez-vous de bien comprendre ce qu'ils font. Il faudrait les apprendre ici et là. Parce que lorsque le projet arrive, vous connaissez tous ces outils qui vous aideront dans ce projet en particulier. Mais n'investissez pas votre argent dans le projet et dans ces outils que vous n' utiliserez pas à ce moment-là, assurez-vous au fur et à mesure que vous vous développez, que vous grandissez, que vous découvrez ces outils vous permettent simplement d'utiliser les outils dont vous avez réellement besoin pour votre travail , puis d'évoluer plus tard au cours de votre carrière. Et au fur et à mesure que ces outils apparaîtront, assurez-vous de tous les explorer car c'est très important, mais ne vous précipitez pas et n'investissez pas votre argent dans chacun d'entre eux. 12. AFFECTATION: Votre devoir pour cette section du cours est simplement d'en savoir plus sur l'UX design. Vous pouvez vous informer en consultant des sites Web tels que Nielsen Norman, ou en consultant des sites Web tels que Career Foundry et en lisant simplement différents blogs en ligne rédigés par des designers UX renommés. Juste pour vous informer un peu plus, dans ce cours, nous allons simplement parler des bases de l'UX design, des approches de base, car c'est le cours pour les débutants après tout. Et je ne voulais pas vous ennuyer avec trop de méthodologies et juste vous embrouiller encore plus Une fois que vous aurez appris toutes ces bases dans ce cours, vous vous porterez bien mieux prêt à attaquer certaines informations supplémentaires et certaines techniques plus avancées utilisées par les concepteurs d'UX. Vous pouvez donc utiliser ces deux-là ou simplement parcourir les agents YouTube. Smart, avoir une chaîne YouTube vraiment géniale et il existe nombreux designers UX différents que vous pouvez suivre sur YouTube pour apprendre même plus. Il existe même différentes classes sur l'UX design, mais avant de vous lancer dans des achats différents sur l'UX design, assurez-vous en particulier que le premier vous informe à partir de celles-ci des ressources gratuites qui sont juste mentionnées pour voir si le design UX est quelque chose qui vous passionne vraiment et que vous souhaitez vraiment poursuivre. 13. Réflexions de conception: Lorsque vous commencez à travailler avec vos clients, brief de conception est extrêmement important pour chaque projet. C'est donc ce dont nous allons parler dans cette section. Qu'est-ce que le brief de conception, comment le structurer et comment utiliser le modèle gratuit que j'ai fourni. Commençons donc. 14. Qu'est-ce qu'un brief de design: Le brief de conception est indispensable lorsque vous commencez chacun de vos projets. Chaque fois qu'il s'agit d'un petit ou d'un gros projet, vous devez comprendre l'ampleur des besoins de votre client avant de passer à la recherche sur l' expérience utilisateur et tout le reste de l'expérience utilisateur. partie de votre projet. Mais tout d'abord, arrêtez-vous dans ce voyage avec votre nouveau client ou un client existant, c'est le brief de conception. Vous devez commencer par un brief de conception chaque projet, en particulier pour les nouveaux clients, car ils pensent souvent comprendre ce dont ils ont réellement besoin dans le cadre de ce projet, mais que lorsque vous entrez et leur expliquez qu'ils n'ont pas vraiment besoin de ceci, ils ont besoin de cela. De cette façon. Grâce à cette discussion avec votre client, vous allez vous forger une opinion et vous allez suivre voie qu'il ne pensait pas nécessairement que vous alliez suivre. D'accord, ils ont peut-être besoin d'un site Web pour être conçus. C'est très bien, mais ils n'ont peut-être pas besoin de cette page exacte. Ils ont peut-être besoin de deux de ces pages. Peut-être qu'ils n'ont pas besoin de tant d' informations sur cette page en particulier et ainsi de suite. C'est là que le brief de conception est utile. Vous devez créer le brief de conception et en discuter dès le début de votre projet. Tout d'abord, il se peut que vous passiez parfois un appel avec votre client, juste un appel d'introduction. Qui vous êtes, qui ils sont, ce dont ils ont besoin. Ensuite, lors de votre prochain appel, vous pourrez peut-être préparer un brief de conception. Vous pouvez le remplir lorsque vous discutez avec eux car vous devez comprendre qui ils sont, sur quels marchés ils se situent, quelle est la taille de l'entreprise, quelle est la taille du projet, où ils souhaitent ce projet est prêt. Quels sont les objectifs de ce projet ? Quels sont les objectifs de ce projet ? Quel est le budget de ce projet ? Vous devez vous poser toutes ces questions dès le début de votre projet. Parce que si tu le gardes pour plus tard, il sera peut-être trop tard. Dans ce cours, je vais vous montrer mon modèle. Je vais en fait vous donner ce modèle et vous pourrez utiliser et réutiliser exactement ce même modèle pour tous vos futurs clients. Vous pouvez modifier les couleurs. Vous pouvez inclure leurs logos si vous le souhaitez. Tu peux en faire ce que tu veux. L'avantage de ce modèle, que je vais vous montrer dans la prochaine leçon, est qu'il est imprimable. Si vous vous rendez en personne aux réunions avec vos clients, vous pouvez l'imprimer, vous pouvez le leur donner, puis vous pourrez tous les deux discuter de certaines modifications si nécessaire avant que nous passez à autre chose avec votre projet et avant que nous ne commencions à concevoir ce projet en particulier, ce modèle peut être modifiable à l'infini . Je vous le donne dans le cadre de ce cours pour que vous puissiez l'utiliser tout ce que vous voulez pour votre prochain projet. Donc, dans la prochaine leçon, je vais vous montrer ce modèle. Je vais vous montrer comment vous pouvez le modifier, et je vais vous montrer comment vous pouvez l'utiliser pour vos futurs clients. Alors je t'y verrai. 15. Créer un mémoire de design dans Adobe Xd: La création d'un brief de conception dans Adobe XD peut être très simple, et vous pouvez utiliser et réutiliser ce même brief de conception lorsque vous l'enregistrez en tant que modèle pour tous vos futurs clients. Ce qui est génial, c'est qu'il est conçu en tenant compte des dernières fonctionnalités d'Adobe XD, telles que les piles, telles que les composants. Vous pouvez donc toujours changer les couleurs, les polices, les icônes et bien plus encore. Je vais vous donner ce modèle. Vous pouvez l'utiliser dans tous vos futurs projets si vous le souhaitez. Alors, sans plus attendre, commençons. Le voici donc dans Adobe XD. Voici à quoi ressemble le modèle. Et ici, nous avons l'essentiel du brief de conception, et ici nous avons le modèle de brief de conception proprement dit. Maintenant, avant de passer à autre chose et de vous montrer ce qui est réellement inclus, je voulais juste vous montrer rapidement ceci. Nous avons ici la couleur des paragraphes, qui est la couleur de tous ces paragraphes. J'ai la couleur de l'icône ici. Alors évidemment, la couleur des icônes et la couleur du titre, qui est la couleur de ces titres. Maintenant, gardez à l'esprit que, étant donné que le design est essentiel, cela ne doit pas être modifié. Vous pouvez le modifier, le supprimer si vous ne voulez pas l'avoir ici. Mais c'est un objectif principal et le but est de vous rappeler ce que vous pouvez inclure dans votre modèle de brief de conception, qui est ce modèle ici. Ma recommandation est de le garder tel quel et de simplement l' ajouter à cette partie. Mais si vous le souhaitez, vous pouvez toujours le supprimer. Si tu veux. Je tiens à noter que si je sélectionne cette option, vous pouvez voir que cette zone entière est la zone de texte car, comme je l'ai dit, elle n'est pas destinée à être modifiée. Mais comme je l'ai dit, encore une fois, vous pouvez le supprimer. Vous pouvez en faire ce que vous voulez pour commencer. Pourquoi en avons-nous ici ? Si je zoome un peu plus, nous avons le profil de l'entreprise et nous avons la même chose ici. Ensuite, nous avons un aperçu du projet, même chose ici. Nous avons des buts et des objectifs. Tu comprends le point. Toutes ces choses importantes sont donc incluses ici. Passons donc en revue chacun d'entre eux et je vais vous expliquer ce qui les sous-tend et pourquoi vous devriez inclure quelque chose comme ça. Donc, tout d'abord, le profil de l' entreprise, vous devez inclure des détails tels que le nom, les produits industriels ou les services proposés par l'entreprise. N'oubliez pas que vous pouvez explorer ce modèle ici. Vous pouvez le modifier, étendre la zone de texte, le modifier. Vous pouvez ajouter plusieurs pages, vous pouvez en faire ce que vous voulez. s'agit simplement d'un indicateur dans lequel vous devez inclure toutes ces informations afin que votre client puisse mieux comprendre ce dont vous avez réellement besoin pour ce projet en particulier. Encore une fois, proposition de vente unique, qu'est-ce qui les différencie de leurs concurrents ? C'est très important et parce que vous devez savoir lorsque vous commencez à explorer la concurrence, vous devez savoir ce qu'il y a à gagner pour eux, ce qu'il y a de différent pour leurs concurrents, donc ce qui est différent pour leur entreprise et la concurrence de Derek, ce qui les différencie de la concurrence, etc. Quelles sont les principales parties prenantes ? Quels sont les principaux décideurs, essentiellement contributeurs et les points de contact dans le cercle d'affaires avec lequel vous traitez au sein de cette organisation ? Est-ce que c'est le PDG, est-ce les RH ? qui avez-vous affaire au quotidien cette liste de projets de concurrents directs et indirects ? Vous pouvez donc faire vos recherches à leur sujet. C'est ce que je mentionnais à propos de argument de vente clé et proposition de vente unique, etc. faut donc comprendre qui sont là, concurrents directs et indirects. Vous devez demander ces informations à vos clients, surtout si vous n'êtes pas dans ce secteur ou ce créneau. Peut-être que vous ne comprenez pas qui est cette entreprise, quoi elle a affaire et d'autres choses de ce genre. Cela vous permettra de mieux comprendre le projet et ce que vous devez réellement faire dans le cadre de ce projet. Si vous avez demandé ces informations, alors ce que vous pouvez faire lorsque vous collectez toutes ces informations, vous pouvez les rassembler dans un document Word ou quelque chose comme ça. Vous pouvez accéder directement à votre modèle de brief. Vous pouvez saisir la société de votre projet ici. Au fait, j' utilisais Roboto, comme vous pouvez le voir ici, qui est une police Google gratuite. Vous pouvez donc simplement le télécharger et commencer à l'utiliser immédiatement. Et encore une fois, vous pouvez simplement cliquer avec le bouton droit de la souris ici pour modifier et modifier toutes ces polices, couleurs, icônes, etc. Nom du client ici, date limite du projet, quand le projet va-t-il se terminer, ce qui est crucial pour chaque projet, nom du projet. Donc, si le projet a un nom, vous pouvez le saisir ici, par exemple, je ne sais pas s'il s' agit d'un site Web ou autre , d'une application, d'un tableau de bord ou d'un profil d'entreprise, n'est-ce pas ? Vos recherches sur l'entreprise ici. C'est donc ce dont nous parlions ici. Ensuite, nous avons un aperçu du projet. Alors, c' est ici que vous allez créer une description détaillée du projet. Désolé, cela tient autant de contexte que possible. Essayez de demander à votre client ce qu'il fait et pourquoi il le fait. Le quoi ? Construisez-vous quelque chose de nouveau, ce qui est crucial ? Êtes-vous en train de redessiner ce qu'ils ont déjà ? Quels sont leurs atouts inattendus à la fin de ce projet ? Et enfin, ils essaient d' identifier les problèmes qu'ils rencontrent. Une fois que vous aurez compris les problèmes, vous trouverez une solution plus facilement. C'est donc ici que vous allez réellement poser quelques questions et faire preuve de créativité. Je te montre juste la bonne direction quant à ce que tu devrais faire. Mais vous devez essentiellement ouvrir ce bref modèle, par exemple sur un écran ou sur une partie de l'écran. Et lorsque vous leur parlez, vous pouvez simplement saisir les informations qu' ils vous communiquent, ou vous pouvez utiliser un document Word, vous pouvez utiliser un stylo et du papier. Vous pouvez faire ce qu'il veut, puis simplement mettre toutes ces informations dans ce bref modèle. Encore une fois, si nous allons ici, cliquez ici, tapez Control ou Command E pour l'exporter, je peux le sélectionner au format PDF puis vous pourrez partager ce PDF avec votre client. Ils peuvent ensuite vous donner d' autres commentaires sur ce que vous allez faire sur ce projet en particulier aujourd'hui, être d'accord, ils ne sont pas d'accord, etc. Ensuite, nous avons des buts et des objectifs, qui sont également très importants. objectifs reflètent l' objectif initial de votre projet, tandis que les objectifs mettent en évidence les méthodes permettant d'atteindre cet objectif. Donc galt, par exemple, le client veut plus de trafic sur son site Web. Exemple objectif : augmenter le nombre de sessions hebdomadaires de 20  % à cette date précise. C'est donc l'exemple parfait. La plupart du temps, lorsque les clients ne comprennent pas, quoi voulez-vous réellement que cela soit conçu ? Voulez-vous, comme dans ce cas, augmenter le trafic sur votre site Web ? Si c'est le cas, qu'allez-vous faire de ce trafic Allez-vous le convertir en prospects et utiliser des fils chauds ou froids ? Allez-vous leur offrir une sorte de produit gratuit ou un cadeau afin de pouvoir les joindre à votre liste d'e-mails. Voulez-vous qu'ils vous appellent ou voulez-vous qu'ils achètent quelque chose ? S'agit-il d'un produit nouveau sur le marché ? Est-ce le produit qui existe sur ce marché ? Quel est votre public cible et que voulez-vous réellement qu'il fasse une fois qu'il aura accédé à votre site Web ? La plupart du temps, et croyez-moi, lorsque vous posez ces questions à vos clients, ils commencent à réfléchir et à dire «  oui, vous avez raison ». Peut-être n'avons-nous pas besoin d'un site Web comportant 50 pages différentes, comme nous en avons parlé en premier lieu. Peut-être que j'ai juste besoin d'une belle page de destination, peut-être d'une page d'information, peut-être de la page produit. C'est en gros ça. Vous devez donc leur poser toutes ces questions pour qu'ils comprennent ce dont ils ont réellement besoin de ce projet en particulier et de vous en tant que designer sur ce projet. Encore une fois, comme je l'ai dit, par exemple objectif, augmentez le nombre de séances fréquentes de 20 %. Supposons donc que vous souhaitiez reconcevoir votre site Web afin vendre votre produit et que vous souhaitiez offrir cadeau au plus grand nombre de personnes possible afin de pouvoir les convertir par votre newsletter par e-mail chaque semaine. L'objectif est donc simplement augmenter le nombre de signatures hebdomadaires à ma newsletter afin de pouvoir convertir, disons, 10 % de personnes supplémentaires le mois prochain. C'est donc ton indice. But, objectif clair, que dois-je faire en tant que designer plutôt que de commencer par la manière dont je dois le faire, comment je dois intégrer tout cela ? Devraient-ils utiliser les solutions existantes pour les e-mails, comme Mailchimp, par exemple , ou dois-je créer quelque chose de nouveau et les orienter dans cette direction ? De plus, comme ils disent qu'ils souhaitent davantage d'inscriptions par e-mail afin de pouvoir convertir ces personnes plus tard, vous devez créer ces inscriptions par e-mail pour qu'elles soient plus visibles sur votre site Web. Vous pouvez voir que nous commençons déjà design UX simplement en ayant un bon brief de conception, c'est pourquoi le brief de conception est très important. En établissant des buts et des objectifs dès le départ, comme je l'ai dit, vous êtes non seulement prendre des décisions plus éclairées, mais vous êtes également mieux armé pour prouver votre valeur et valeur pour le client en dehors de l' esthétique visuelle de votre site Web. Donc, encore une fois, vous êtes un designer qui résout des problèmes. Vous n'êtes pas là pour créer quelque chose de beau et c'est tout. Vous devez résoudre leurs problèmes grâce à votre design et le rendre beau en même temps C'est tout l'intérêt d'être designer. Public cible. Encore une fois, vous ne savez pas pour qui et pour qui vous concevez. Vous ne pouvez pas concevoir. Une autre façon d'éclairer vos décisions de conception consiste à acquérir une solide compréhension des utilisateurs qui interagiront avec l'application ou le site Web de vos clients. Si votre client a déjà fait ces recherches, vous avez de la chance. Mais s'ils ne l'ont pas, vous devrez faire cette recherche vous-même. Vous pouvez vendre ce service en tant que service différent et gagner plus d'argent, ce qui est crucial. Ce qui devrait ressortir de vos recherches, c'est la personnalité du public. informations concernant la personnalité de votre public doivent inclure des informations telles que l'âge, le sexe, le pays, Fresno, la ville de résidence, le lieu de travail, les habitudes de consommation des médias, habitudes quotidiennes telles que les voyages, les repas au restaurant, socialisation, etc. Cela nous indique, par exemple, que si je conçois un site Web de chaussures pour des personnes de 30 ans, ce site Web doit être complètement différent de celui que je conçois si je conçois le même site Web pour des personnes de 65 ans. Parce que les 65 ans sont majoritairement malvoyants. Ils n'aiment pas les couleurs vives. Ils ont déjà beaucoup plus d'argent que le premier groupe de trentenaires. Vous devez donc penser à toutes ces choses lorsque vous commencez à concevoir, vous devez créer des personnages. Pour qui concevez-vous cela ? Par conséquent, lorsque vous aurez ces personnages, lorsque vous aurez fait ces recherches, lorsque vous aurez ce public cible prêt, vous saurez quelles couleurs utiliser, quelles polices utiliser, quelles tailles de police utiliser, quel type d'imagerie, quel type de ton, quel type de langage ? Disons donc que la langue des enfants de trois ans est complètement différente de celle des enfants de 65 ans. Si vous utilisez de l'argot et termes que seuls les personnes de 35 ans comprennent, ces personnes de 65 ans ne seront pas en mesure de comprendre et elles partiront tout simplement. Cela augmentera donc votre taux de rebond et vous tournera le dos à la case départ. Ensuite, nous avons conçu les exigences. Vous devez les spécifier avance car la plupart du temps, il s'agit en particulier d'un modèle Adobe XD. Disons que mes clients aiment travailler dans Sketch. Je ne travaille pas dans Sketch, je travaille dans XD. Ensuite, nous atteindrons la fin du projet. On ne saura absolument pas quel outil j'utilise. Et puis il y a eu deux demandes de fichiers de croquis. Bien sûr, il y a beaucoup de conversions. Vous pouvez payer pour certains services afin d'effectuer ces conversions votre place ou vous pouvez effectuer cette conversion vous-même. Mais à quoi bon ? Pourquoi s'embêter ? Vous pouvez simplement demander à l'avance. Donc, les dimensions des actifs et les résolutions. Tout d'abord, c'est crucial pour l'argent. S'ils veulent juste, par exemple , un écran iPhone Ten, c'est tout. Ensuite, vous allez facturer une certaine somme d'argent. Mais s'ils veulent un iPhone 89, 101-112-1314, peu importe, toutes ces tailles, puis des versions Android également. Bien sûr, vous allez devoir facturer beaucoup plus d'argent parce que vous allez devoir faire beaucoup plus de travail. Posez donc ces questions dès le départ. Les formats de fichiers, comme je l'ai mentionné, doivent être convenus avec les développeurs avant de commencer à travailler. Certains développeurs aiment utiliser des fichiers Figma, d'autres aiment dessiner des fichiers. autres s'en fichent tant que vous utilisez quelque chose comme, je ne sais pas, des plateformes de partage ou l'un de ces plugins, explorons-la. Voyons ce que nous pouvons faire ici. Quelque chose comme Zeplin, par exemple, pour que beaucoup de gens aiment utiliser Zeplin, disons. Donc, si vous n'utilisez pas d' urine de Zeplin qui ne vaut rien, vous ne leur servez à Vous devez donc utiliser Sapling. Mais si vous n'avez jamais utilisé de jeunes arbres auparavant, cela peut créer une situation délicate pour vous . Vous devez donc l'apprendre au milieu du projet. Alors demandez dès le départ, cela vous aidera beaucoup à avoir besoin d'une palette de couleurs. Ont-ils leurs couleurs actuelles ? Parce que s'ils le font, tu as de la chance. Si ce n'est pas le cas, vous devez le créer à partir de zéro. Pensez donc à toutes ces choses. Les éléments d'image doivent également être inclus. Ils ont leurs propres images ou vous devez utiliser des images. Si vous devez utiliser des images, vous devez utiliser des images gratuites ou premium. C'est très simple de poser ces questions, mais la majorité des designers ne le font tout simplement pas. Vous devez y réfléchir car s'ils le souhaitent, s'ils veulent utiliser des images premium, par exemple, qui paie pour ces images premium ? Est-ce que ça sort de leur poche ? Ou certains pensent que c'est parce qu'ils vous payent disons 5 000$. Tout est inclus dans toutes ces images, toutes ces icônes, vidéos, séquences d' archives, tout est inclus dans ces 5 000 v. Alors pensez à toutes ces choses présentes. Cela va vous faire gagner beaucoup de temps. Ensuite, nous avons des documents de copie associés. En particulier, les copies de documents peuvent être quelque chose comme un contrat ou si vous pouvez utiliser un accord de confidentialité, par exemple un accord de confidentialité ou si vous pouvez utiliser leur logo, disons dans cette orientation, pas dans cette orientation. Vous devez donc leur parler de toutes ces choses afin de mieux comprendre ce dont ils ont réellement besoin et ce que vous pouvez réellement leur fournir. Enfin, nous devons livrer les fichiers. Vous devez toujours fournir vos maquettes, directives de votre marque. Si vous les avez créées, moodboards ou tout autre élément susceptible d'aider les clients à comprendre et à avoir confiance en vous, je peux avoir confiance en votre travail. Ce que je veux dire par là, c'est que si vous avez créé votre mood board, il vous suffit de le leur livrer. Parce que si vous facturez cette somme pour le mood board au milieu du projet, montrez-leur le mood board. Si vous avez créé des wireframes en papier et des maquettes denses, affichez en quelque sorte ces filaires en papier. Cela leur montrera combien de temps et efforts ont réellement été consacrés à ce projet en particulier. Enfin, nous avons la principale raison ici. Donc budget et calendrier. C'est très important, très gênant pour les designers, car beaucoup de designers ne veulent tout simplement pas avoir affaire à de l'argent. Mais l'argent est très important, surtout pour vous, car vous devez facturer ce que vous avez réellement travaillé sur ce projet en particulier. Sinon, vous n' aurez tout simplement pas de chance car lorsque vous signez le contrat, c'est tout. Vous ne pouvez rien faire d'autre que de créer un projet distinct ou de sortir de ce projet et bien plus encore. C'est pourquoi j'ai cette animation ici où Pink Punk fait des Pink Punk allers-retours entre vous et le client, vous devez spécifier toutes ces choses à l' avance avant de vraiment lancez votre Adobe XD et commencez à travailler de cette façon. Concevez des modèles de brief comme celui-ci peuvent vous aider beaucoup, en particulier lorsque vous établissez un budget et surtout lorsque vous cristallisez, combien de temps avez-vous réellement besoin pour toutes ces tâches ? des parties de votre projet ? Donc, pour y revenir, si vous travaillez dans une agence, vous ne vous occupez pas de cette partie, mais si vous êtes indépendant, cette partie est absolument essentielle à votre réussite, c'est ce que je viens de dire. Le budget, en fonction de son importance, vous permettra de savoir jusqu'où vous allez vous lancer dans le projet et y consacrer votre temps et vos ressources. Vous ne créerez pas de maquettes papier, maquettes filaires, puis cinq révisions différentes de dessins. Et puis, je ne sais pas, cinq prototypes différents, puis l'animation de vos icônes , puis la création de maquettes complètement distinctes adaptées à leur projet. Vous ne ferez pas tout cela s' ils ne font que vous payer ou, je ne sais pas une somme stupide selon l'argent dont ils disposent, selon leurs besoins. C'est la durée du projet. Vous devrez donc facturer ce que vous avez réellement travaillé pour ce projet en particulier. Sinon, ils ne feront que vous utiliser à la fin de la journée. Ce que nous avons de la valeur au temps avant toute autre chose, car les clients ne le feront pas, si vous n'appréciez pas votre temps, personne d'autre ne le fera. Calendrier. Les projets doivent respecter les délais et rester rentables. C'est pourquoi les horaires sont indispensables pour vos slips. Chaque programme doit comporter des arrêts. Donc un au début, un à la fin, et autant ou aussi peu que nécessaire au milieu. C'est ainsi que vous et vos clients saurez que vous êtes sur la bonne voie. C'est pourquoi j'ai créé cette date de début, date de recherche, date d'audience. Vous pouvez bien entendu tous les modifier. Date de présentation, date de révision, date de livraison. Vous pouvez ajouter autant d' arrêts que vous le souhaitez. Tu peux les supprimer, tu peux faire ce que tu veux. Rédigez donc votre budget et votre calendrier ici. Donc, ventilation du budget ici, par exemple 2000 à l'avance, 2000 au milieu, disons quelque chose comme ça. Donc présentation, disons 2000. Enfin, à la fin, la livraison, années 2000 là-bas, soit 50  %, commencent leur planification, pieds pour cent à la toute fin. Vous devez donc tenir compte de ce que vous valez réellement et de ce que vous êtes réellement à l'aise de demander à vos clients. Et enfin, la répartition de la chronologie. Tu ne peux pas faire ça tant que tu es en vie. Vous devez donc créer des délais parfaitement clairs. Semaine à votre client, quand commence, quand se situe le milieu, quand se termine ? Quand auront lieu les révisions ? Combien de révisions ai-je ? Quand dois-je le livrer ? Quand devriez-vous livrer ceci et bien plus encore ? Vous devez donc prendre en compte tout cela dès le début de votre projet. Enfin, ce que nous avons ici c'est que sans le brief de conception, vous perdez simplement votre temps à espérer avoir obtenu ce qu'ils aiment du premier coup. En utilisant le brief de conception, vous vous assurez que vous et vos clients êtes sur la même longueur d'onde dès le départ. Avez-vous donc apprécié votre temps ainsi que celui de vos clients ? C'est donc ce que je mentionnais au tout début de ce cours. Vous devez créer un brief de conception chaque fois pour chaque projet Peu importe si le client est un client pour lequel vous avez déjà travaillé dans le passé, vous devez créer un brief de conception pour ce projet en particulier. Tout le monde est donc sur la même voie. Assurez-vous de créer ces points d'arrêt et ces lacunes dans votre projet. Donc, comme je vous l'ai déjà montré ici. Commencez donc par là, données de date de début pour la recherche, pour le public, recherches pour la présentation du design. D'autant plus que vous et vos clients pouvez être sur la même quant à ce qui est exigé de ce projet et à ce qui est livré dans le cadre de ce projet. 16. Brève présentation de design: Dans cette vidéo, nous allons découvrir les éléments essentiels du design et voir à quoi cela ressemble dans Figma, car il s'agit exactement de la même chose dans XD que dans Figma, mais nous souhaitons tout de même vous expliquer, car il existe certaines différences lorsque vous souhaitez créer ou réutiliser quelque chose de ce type. Et même histoire, comme avec les modèles Adobe XD, vous obtiendrez également des modèles Figma. Tu peux jouer avec eux. Vous pouvez les utiliser et les réutiliser pour vos propres projets. Passons donc à Figma et laissez-moi vous montrer à quoi ressemblent ces modèles. Nous voici donc à Figma et, comme vous pouvez le voir, nous avons les éléments essentiels et notre brief. Et en gros, c'est exactement la même histoire que dans Adobe XD, comme déjà mentionné. Donc, si vous voulez modifier quelque chose, si vous voulez modifier quelque chose, c'est exactement pareil. Donc, seuls les outils se trouvent en haut et non ici. Et vous avez toujours votre panneau de propriétés ici, sur votre droite. Si nous jetons un coup d'œil ici, nous avons les styles locaux. Ce sont vos styles de texte et ce sont les textiles que j'ai appliqués à partir des documents eux-mêmes. Même histoire qu'avec Adobe XD, c'est juste qu'ils se trouvent de ce côté. Eh bien, à Figma, ils se trouvent juste ici. Et il va lire tout ce qui se trouve dans ces fichiers. Et puis, lorsque vous cliquez sur un cadre, dans ce cas, parce que nous n'avons pas nos tableaux dans Figma, nous avons des cadres. Ensuite, il va prendre les couleurs de sélection, c'est-à-dire les couleurs situées à l'intérieur de ce cadre. Mais si je clique à l'extérieur, cela nous ramènera aux styles locaux. Maintenant, gardez à l'esprit que ces modèles sont simples et inutiles. Plus tard, lorsque nous arriverons à un design, je vais montrer des techniques plus avancées. Mais pour l'instant, pour les briefs de conception, les propositions de projets et les personnages, par exemple , les modèles, ce sera très simple, car c'est dans un but très simple, car vous pouvez l'utiliser et le réutiliser très rapidement. Nous avons donc ici la couleur de fond, qui est la couleur d'arrière-plan globale. Ensuite, nous avons les styles de texte et vous pouvez voir le texte d'information, titres des sections de texte principales. Donc, comme avant, j'aime renommer et nommer toutes mes couches. Ensuite, nous avons le gris principal , le gris foncé et les traits sont toutes les couleurs auxquelles vous êtes déjà habitué en termes d'édition Si je sélectionne quelque chose, il s'affichera ici. Alors laisse-moi me retrouver pour que tu puisses voir un peu mieux. Ce dont je parle ici, en gros, ce que vous pouvez voir ici c'est que le texte a été sélectionné. Un élément essentiel n'est pas le tableau d'art, mais le cadre lui-même. Il a été sélectionné et vous pouvez voir ici comment il est positionné. Nous avons donc ici le titre de la page, qui est en fait le style de ce texte. Et puis nous avons le gris principal, qui est la couleur réelle de ce texte. Si vous souhaitez modifier quelque chose, vous pouvez cliquer ici. Et vous pouvez voir que le titre de la page est de 148 pixels et automatique. Et tu veux le changer. Vous pouvez cliquer ici pour modifier quelque chose et vous pouvez modifier le nom. Vous pouvez voir la police, vous pouvez voir qu'elle est en gras, l'alignement du texte est automatique et ainsi de suite. Et il en va de même pour les couleurs, vous pouvez simplement cliquer ici. Et voici les couleurs de l'intérieur du document. Et voici la couleur personnelle que Figma vous suggère d'utiliser si vous souhaitez la remplacer les couleurs que Figma suggère ici. Mais si ce n'est pas le cas, vous pouvez simplement cliquer ici et vous passerez au gris principal. Et ici vous avez les propriétés, ici nous avons l'opacité. Vous pouvez le cacher, l'afficher, etc. Enfin, nous avons cette icône de lien. Et si vous voulez le détacher, il le deviendra, il deviendra sa propre propriété. Vous pouvez cliquer ici à la fois pour la couleur et la police, et cela va les détacher de là. Mais pour ce qui est de la structure générale, cela me semble être quand x D. Nous avons donc ici le titre, ici nous avons tous ces autres textes. Voilà pour les brèves informations essentielles. Et vous pouvez regarder cette vidéo pour en savoir plus sur ce qui est inclus dans chacun d'entre eux. Maintenant qu' Adobe a racheté Figma, Figma réel deviendra bientôt presque exactement le même que XD, avec toutes ces fonctionnalités Figma et des fonctionnalités supplémentaires d'Adobe , telles que bibliothèques Creative Cloud et bien plus encore. Donc, en gros, vous allez bientôt pouvoir ouvrir des fichiers XD dans Figma. Mais je voulais quand même vous montrer ces vidéos pendant la transition , car cela peut prendre jusqu'à un an, voire deux ans. Ici, à l'intérieur de notre brief, nous avons le même titre. Vous pouvez voir que cela s'appelle le titre de la plage et qu'il a cette couleur grise principale. Mais ici, les choses sont un peu différentes. Donc, si je le souligne ici, vous pouvez voir que nous avons ici ce groupe et que nous avons ici certaines contraintes. Vous pouvez créer une mise en page automatique si vous le souhaitez. Mais ici, nous avons des sections qui se trouvent à l'intérieur de la mise en page automatique, et vous pouvez le voir ici. Maintenant, les piles sont également superposées dans Adobe XD. C'est juste qu'ils ont peut-être une ou deux options supplémentaires dans Figma que nous n'avons pas dans Adobe XD Vous pouvez voir qu'elles sont positionnées verticalement et leur position en haut à gauche, c' est-à-dire l'alignement d' où elles viennent. Donc, ici et à l'intérieur de ces sections, nous avons toutes des sections distinctes. Et l'espacement entre chacune de ces sections est de 60 pixels , comme vous le voyez ici. Et vous pouvez le positionner à 40 pixels, par exemple vous pouvez voir ce que cela fait, mais je vais le laisser à 60 pixels. Encore une fois. Vous pouvez ouvrir ce fichier de projet. Tu peux t'amuser avec. Vous pouvez l'explorer, voir et approfondir la façon dont j'ai créé tout cela. Désormais, chacune de ces sections possède sa propre structure. Donc, si je l'ouvre, vous pouvez voir que nous avons la date limite du projet. Donc, même histoire que dans Adobe XD. Et si je zoome d'un peu plus près, à l'intérieur de cette date limite du projet, nous avons l'entreprise et voici l'icône, puis nous avons la date limite du projet elle-même. Maintenant, si je sélectionne la date limite du projet, vous pouvez voir que nous avons une mise en page automatique distincte. Maintenant, cette fois, c'est horizontal. Il est positionné de l'alignement gauche vers le centre. Et nous avons ici l' espacement entre les éléments. Donc, entre ceci et cela, quand je passe la souris, vous pouvez voir que c'est 40 pixels. Vous pouvez maintenant sélectionner cette petite ligne rouge ici et l'étendre à gauche et à droite si vous le souhaitez. Il suffit donc de cliquer et de faire glisser pour l'étendre. Mais personnellement, je préfère écrire mes valeurs rondes ici. Donc, par exemple, 60 pixels, ça va faire exactement cela. Enfin, pour chacun d'entre eux, donc pour la date limite du projet, par exemple, vous pouvez voir qu'ici, nous avons la mise en page automatique dans le sens vertical à 40. Donc, si je mets cette valeur à 60, vous pouvez voir ce que fait cette chose en particulier. Bien sûr, car ils sont tous à l'intérieur de la mise en page automatique. Si j'ajuste celui-ci à, voyons 100, ils vont tout déplacer vers le bas parce que tout se trouve dans sa propre mise en page automatique. Mais si je reviens en arrière, vous pouvez voir que cette section est maintenant arrondie. Maintenant, en ce qui concerne ces icônes, lorsque vous sélectionnez notre brief ou sélectionnez n'importe quoi dans notre bref cadre, vous pouvez passer aux ressources. Et voici vos brèves composantes locales pour ces icônes particulières. Vous pouvez maintenant dessiner votre propre icône qui ressemble à un X-Y. Vous pouvez échanger des icônes et créer des distances entre les icônes. Et nous en reparlerons un peu plus tard lorsque nous en viendrons au design. Mais en gros, voici à quoi cela ressemble. Et enfin, passons aux couches. Nous allons sélectionner la période et je vais vous montrer comment elle a été créée. Donc, en gros, nous n' avons rien d'extraordinaire ici. Nous avons juste un cercle et nous avons un cercle de date de début et de fin. Si je le sélectionne. Ici, vous pouvez voir que nous avons notre trait et cela nous montre qu'il est lié, mais qu'il est simplement lié à la couleur du trait. Vous pouvez voir ce trait de couleur ici si je me cache. Vous pouvez donc le voir un peu mieux. Et nous avons ici la couleur de remplissage, qui est cette couleur blanche. C'est donc à quel point il est très simple de travailler avec cela. Et comme je l'ai mentionné, c'est exactement la même chose que dans Adobe XD. Maintenant, nous avons juste ces documents dans les cadres et non dans les aéroports, comme c'est le cas dans Adobe XD, par exemple, et voilà. Vous allez obtenir ce fichier. Vous allez pouvoir l' ouvrir dans Figma et l'explorer par vous-même. Je veux juste créer cette vidéo rapide juste pour montrer quelques différences. Vous allez rencontrer des fichiers Figma qu'Adobe XD possède et vice versa. Je vous encourage à jouer avec ces fichiers, à les ouvrir, à les explorer un peu plus, juste pour vous familiariser avec Figma. Mais si vous avez déjà ouvert quelque chose dans Adobe XD, si vous avez travaillé dans Adobe XD pendant une courte période, vous remarquerez quelques différences ici et là, mais les outils sont fondamentalement identiques. Et c'est là tout le problème. Je ne voulais pas non plus recréer ce contenu Adobe XD pour Figma. Je voulais juste créer ces vidéos pour vous expliquer ce qui est identique Qu'y a-t-il de différent entre ces fichiers ? Parce que je ne veux pas vous faire perdre votre temps car ces outils sont fondamentalement exactement les mêmes. Et maintenant qu'Adobe est à la fois Figma, ils seront exactement les mêmes à la fin. C'est donc tout pour cette vidéo, assurez-vous de consulter le modèle. Il est joint aux fichiers du projet de cours. Assurez-vous de l'ouvrir et assurez-vous d' ouvrir les modèles Figma pour chaque section de ce cours, afin de vérifier les différences entre les fichiers Adobe XD et les fichiers Figma. 17. SECTION 3 Propositions de projet: Les propositions de projet jouent un rôle extrêmement important dans tout pipeline de projets de designer indépendant, car vous ne voulez pas simplement envoyer les prix à vos clients et leur dire : « Voilà, vous voulez dépasser ce prix ». vers le bas afin qu'ils puissent facilement comprendre pour quoi ils vous payent. Vous voulez digérer, afin qu'ils puissent comprendre assez facilement ce que vous avez travaillé sur ce projet. Combien de temps cela va-t-il prendre ? Combien de temps chaque élément du projet va-t-il réellement coûter ? Pourquoi prenez-vous toutes ces mesures ? Quelles sont les étapes réelles de ce processus de conception ? Donc, tout ce que nous allons aborder dans cette section, et je vais vous montrer un modèle que vous pouvez utiliser. Et je vais vous donner ce modèle afin que vous puissiez l'utiliser dans vos futurs projets, simplement pour accélérer un peu votre processus et le rendre un peu plus crédible aux yeux de vos clients. Commençons donc. 18. Qu'est-ce qu'une proposition de projet: L'une des plus grandes erreurs que je constate, en particulier chez les jeunes designers est de ne pas envoyer les propositions de projets. Mais lorsque le client les contacte et leur demande le prix du projet, ils se contentent de donner une idée approximative, ils ont fini par dire, par exemple conception du site Web coûte 2 000 dollars, mais les clients ne comprennent généralement pas parce que ils ne sont pas eux-mêmes designers dans la plupart des cas. Et ils ne comprennent pas que ce qui est impliqué dans projet de conception de site Web en particulier est une conception ajustée. Est-ce du codage ? Est-ce un thème WordPress ? Ils ont entendu parler de quelque chose appelé Wix, par exemple ou un Webflow. Ce qui est inclus dans le prix et dans ce que vous leur offrez. Vous devez expliquer chaque détail afin de justifier votre prix. Cela vous donnera une apparence professionnelle et raffinée en tant que designer et, en retour, permettra à votre client de mieux comprendre ce qu' il implique réellement dans ce projet de conception de site Web. Maintenant, cela ne doit pas simplement impliquer la conception de sites Web. Il peut s'agir de la conception d'applications , de brochures, de logos. Quoi que vous fassiez, vous devez expliquer à vos clients ce que vous leur offrez exactement que vous leur offrez au prix que vous demandez. C'est exactement ce qu'est la proposition de design. Dans ce cours, nous allons parler de la proposition de conception de l'interface utilisateur car elle fait partie d'un monde du design et d'une sphère du design, ce qui est très différent de la conception d'un logo ou d'une brochure. design, car il comprend une fois différentes étapes pour accéder à la solution , à savoir la conception de sites Web , la conception d' applications, etc. Dans ce cours, nous allons donc parler des propositions de conception d'interface utilisateur UX. Mais quoi que vous fassiez, quelle que soit la branche ou la conception dans laquelle vous vous trouvez, vous pouvez appliquer le même principe. Il suffit de les adapter à votre propre niche de design, votre propre sphère de design, à tout ce que vous faites, et suivez-les simplement pour vos futurs clients. 19. Quand devriez-vous l'envoyer: Quand exactement devez-vous envoyer votre proposition à vos clients ? Eh bien, cela doit d'abord commencer par la découverte, l'appel ou le courrier électronique. Ainsi, lorsque vos clients vous contactent, vous les redirigez par e-mail vers Zoom, Google Meet, Skype, par exemple , quel que soit l'appareil que vous utilisez. Ou vous pouvez simplement poursuivre cette conversation par e-mail si vous n'êtes pas à l'aise devant la caméra ou lorsque vous parlez au micro, si votre anglais n'est pas très bon, vous allez collecter tous ces informations sur ce qu'ils doivent réellement faire pour ce projet en particulier. Et vous devez leur poser une série de questions et consulter mes tutoriels et cours sur l'interface utilisateur, en particulier ma masterclass Adobe XD. Parce que j'y aborde en profondeur brief de conception et les questions que vous devriez poser à vos clients afin d'avoir une idée parfaite de ce dont ils ont exactement besoin à ce sujet que vous devriez poser à vos clients afin d'avoir une idée parfaite de ce dont ils ont exactement besoin à ce . projet particulier. Une fois que vous avez collecté toutes ces questions et que vous avez collecté toutes ces réponses, il est temps de commencer à préparer cette proposition de conception d' interface utilisateur utilisateur. Et vous y allez inclure tous les services que vous allez fournir à votre client pour ce projet en particulier. Donc, par exemple, si vous faites des recherches sur des projets, si vous faites des entretiens personnels, si vous faites des recherches personnelles, si vous faites des maquettes papier, des maquettes filaires dans Adobe XD, parce que je suis en utilisant Adobe XD, cette classe traite d'Adobe XD, mais elle peut être n'importe quoi, Illustrator, Sketch , Figma, peu importe ce que vous utilisez, assurez-vous d'inclure tous ces détails. Et puis, bien sûr, la conception de l'interface utilisateur, l'exportation de ressources temps que vous consacrez à ce projet, car c'est l'élément clé que la plupart des designers négligent. Le temps que vous consacrez à ce projet, qu'il s'agisse d'envoyer des e-mails, de passer des appels téléphoniques, faire des conversations vidéo avec vos clients via Zoom, Skype ou Google Meet ou autre. Tous ces éléments devraient être inclus dans la proposition de projet de dette. Parce que de cette façon, les clients comprendront exactement ce que vous leur facturez pour un stage, comme je l'ai dit, cela vous donnera une apparence plus raffinée et professionnelle. Et encore une fois, les clients auront une idée claire de ce que représente chaque dollar que vous leur demandez, à quoi sert-il ? Veillez donc à envoyer des propositions de projets. Et dans la vidéo suivante, nous allons voir comment en créer un dans Adobe XD. Et je vais vous montrer quels sont, à mon avis et selon mon expérience, certains éléments clés que vous devriez réellement inclure dans vos propositions de projet. 20. Créer une proposition de projet dans Adobe Xd: Comme je l'ai dit précédemment, je suis un utilisateur d'Adobe XD et je l'adore vraiment. Je l'utilise tous les jours depuis des années. Et dans ce cours, je vais vous montrer comment créer votre propre proposition de projet et quelles sont certaines des questions que vous devriez poser à vos clients et quels sont certains des services qui vous devriez offrir à vos clients. Passons donc à Adobe XD et je vais vous montrer ce que j'utilise. Voici la proposition de projet Mike. Et c'est en fait la proposition de projet que j'ai créée. Je l'ai créé en tant que produit et vous pouvez vous procurer ce produit si vous le souhaitez. Prix vraiment symbolique, je vais laisser le lien dans le PDF. Vous pouvez simplement cliquer sur ce lien et obtenir une largeur, une réduction énorme si vous le souhaitez. Sinon, vous pouvez simplement suivre ce cours et créer le vôtre avec vos propres questions, réponses et tout le reste. Nous allons donc aborder chacun de ces sujets dans des leçons distinctes. Mais je voulais juste vous expliquer rapidement pourquoi j'utilise Adobe XD et pourquoi j'ai configuré tout cela comme je l'ai fait. Tout d'abord, vous pouvez créer ces aéroports. Et cela représente une hausse de 2 500 dans les années 1920, ce qui n'est pas vraiment idéal pour l'impression. Mais de nos jours, vous envoyez de toute façon la majorité de vos propositions par e-mail. C'est ce que j'ai découvert au fil de mes années d'expérience, j'ai presque 15 ans dans ce secteur. J'ai trouvé que les types de fichiers de cette taille fonctionnaient très bien à la fois pour l'impression et pour l'envoi par e-mail. Et pour vous montrer que ce sont exactement ces modèles qui vous sont présentés dans XD. Donc, je suis simplement allé de l'avant et j'ai imprimé sur une feuille de papier A4. Et vous pouvez voir, par exemple, qu'il s'agit du prix du projet. Vous pouvez voir la qualité et voir à quoi elle ressemble. Et je peux également vous montrer les détails de ce projet, par exemple pour que vous puissiez voir clairement, même si cela se lit très bien et cela dépend vraiment de la présence de votre client ? Allez-vous le leur donner en personne ou allez-vous envoyer ces fichiers par e-mail ? C'est pourquoi j'ai dit qu' Adobe XD est génial parce que c'est un outil basé sur des vecteurs, ce qui signifie que tous les éléments que vous concevez ne perdront jamais de qualité. Et ils ne sont pas basés sur des pixels, comme Photoshop, par exemple, c'est pourquoi je ne recommande ni ne conseille d'utiliser Photoshop. Je vous conseille d'utiliser Adobe XD. De plus, Adobe XD intègre cette fonctionnalité étonnante. Comme vous pouvez le constater, vous pouvez concevoir un prototype et partager l'intérieur du design. Vous pouvez concevoir toutes ces choses que vous voyez à l' écran à l'intérieur du prototype. Vous pouvez réellement connecter tous ces détails. Si vous souhaitez créer notre prototype, les clients peuvent cliquer dessus. Vous pouvez leur envoyer ce lien. Ils peuvent cliquer et accéder à différentes pages si vous souhaitez le créer en tant que site Web personnalisé. Par exemple , aucun codage n'est impliqué, mais il semblerait que tel soit le cas. Et cela ajoute une touche supplémentaire de professionnalisme et de personnalité à votre design. Enfin, il y a le partage. Ainsi, quoi que vous fassiez dans un prototype, vous pouvez accéder à l'onglet Partager. Vous pouvez générer un lien, puis l'envoyer à vos clients si vous le souhaitez. C'est pourquoi j'adore Adobe XD parce que je l'utilise pour tous mes travaux, que ce soit pour la conception de l' interface utilisateur et pour certains travaux qui ne sont pas de l'interface utilisateur, comme les réseaux sociaux, par exemple, mais peu importe ce que vous créez, que ce soit conception d'applications, conception de sites Web , conception de produits, quoi que vous fassiez, vous pouvez facilement le prototyper et le partager depuis Adobe XD. Et c'est pourquoi j'adore l'utiliser. De plus, comme vous pouvez le constater, nous avons tous ces composants mondiaux. Donc, pour ce design et ce modèle en particulier, comme je l'ai dit, vous pouvez obtenir ceci. Encore une fois, le lien sera au format PDF. Il suffit de cliquer et d'y accéder. Vous pouvez cliquer avec le bouton droit de la souris, par exemple sur cette couleur H1, vous pouvez appuyer sur Modifier. Supposons que la couleur de votre client soit, disons trois, E, C6, f, par exemple, appuyez simplement sur Entrée ou Retour. Et comme vous pouvez le constater, en un seul clic, il a appliqué tous ces changements globaux à cette couleur particulière. Vous pouvez le faire avec toutes ces couleurs. Et je vous conseille vivement, si vous finissez utiliser ce modèle à la fin de la journée, chaque fois que vous apportez une modification, simplement sélectionner la couleur hexadécimale que vous avez sélectionnée pour votre projet client. Appuyez sur la commande C du contrôleur, cliquez avec le bouton droit de la souris ici, appuyez sur Renommer et remplacez simplement ce code hexadécimal d'origine par votre nouveau code hexadécimal. De cette façon, il sera mis à jour en temps réel et montrera vraiment à vos clients que vous avez vraiment prêté attention aux petits détails. Encore une fois, cela est conçu pour vous donner bien meilleures chances de décrocher ce client et ce projet. Parce qu'une fois de plus, vous allez vous démarquer en tant que professionnel parmi ces designers amateurs qui demandent simplement 500 ou 5 000 dollars pour un site Web sans jamais expliquer ce qui est réellement impliqué dans ce processus. En dessous, nous avons des styles de personnages. Et vous pouvez réellement changer ces styles de personnages comme je vous l'ai montré avec les couleurs. Et nous avons toutes ces icônes. Et je vous donnerai le lien vers ces icônes si vous souhaitez les acheter, leurs icônes premium. Mais si tu ne le fais pas, c'est bon. Vous pouvez simplement utiliser n'importe quel type d'icônes gratuites que vous souhaitez. Et enfin, nous avons le composant pour le pied de page. Nous avons donc le composant parent, qui est ce composant principal ici. Et puis tous ces autres composants de pied de page sont en fait des composants enfants. Ainsi, chaque fois que vous apportez une modification à ce composant, qui est un composant parent principal, il s'adapte, change et traverse tous ces différents aéroports. La première page de cette proposition de projet est donc la couverture. Et dans la vidéo suivante, nous allons aborder ce qui est réellement inclus à l'intérieur de la couverture. Alors je t'y verrai. 21. Couverture de proposition: Dans cette vidéo, nous allons parler de la couverture de la proposition. Voilà, et permettez-moi de vous expliquer rapidement ce que c'est. Donc, si nous passons de mon panneau de ressources à mon panneau Layers ici et que nous cliquons, vous pouvez constater que l'organisation du projet est bonne et que tout est facilement accessible. Donc, quel est en fait le nom du sous-projet, c'est là que vous allez entrer le nom de votre projet. Par exemple, s'il s'agit de notre site Web automobile, vous allez dire par exemple refonte de notre site Web ou quelque chose comme ça. Mais assurez-vous de saisir le nom exact du projet car, une fois de plus, cela donnera confiance à vos clients. Et cela va vraiment vous différencier de tous ces autres designers, car vous avez prêté attention à ces petits détails ci-dessous qui indiquent le nom de l'entreprise. Dans cet exemple imaginaire, il s'agira d'Audi, quel que soit le site Web de l'entreprise, audi.com, par exemple, et l'adresse de l'entreprise est votre adresse locale de ce concessionnaire Audi. Bien entendu, ce n'est qu'un exemple. Vous allez entrer les informations de votre client. Et ce qui est génial, c'est que vous sélectionnez ce nom et disons, par exemple , Audi, la refonte du site Web. Comme j'ai inclus du rembourrage, il s'élargira au fur et à mesure que vous tapez. Mais si vous ne souhaitez pas de rembourrage, vous pouvez simplement sélectionner ces informations sur le projet. Vous pouvez voir que le rembourrage est vérifié ici. Vous pouvez simplement le décocher pour qu'il ne s' étende pas au fur et à mesure que vous tapez. Je veux juste ne pas être derrière ça, il y a une image. Et je vous conseille vraiment d'inclure une sorte d'image d' arrière-plan de l'offre provenant de leur site Web existant, réseaux sociaux, de leur page LinkedIn, leur capture d'écran YouTube, etc. Encore une fois, juste pour leur montrer que vous prêtez vraiment attention aux détails. Ils pourraient vraiment se sentir chez eux car c'est vraiment personnalisé pour leur entreprise, pour leurs besoins. Comme c'est le cas, en gros, mais vous leur montrez simplement comment vous pouvez réellement concevoir cela, en y prêtant vraiment attention , en leur montrant comment vous pouvez réellement concevoir cela que vous vous souciez vraiment de leurs activités et de les aider. dessous, nous avons le pied de page et ce que j'ai expliqué précédemment. Par exemple, si vous n'avez pas votre propre site Web ici, vous pouvez saisir par exemple votre adresse Behance et votre profil de beacons , votre profil dribble, votre profil Upwork, quoi que vous fassiez, quoi que vous fassiez Si vous le faites, vous pouvez simplement le saisir ici. Encore une fois, assurez-vous d'installer ces polices. Et je laisserai également les liens vers les polices dans un PDF. Si vous souhaitez les consulter, nous avons l'e-mail. De toute évidence, ce n'est que la valeur par défaut. Vous allez entrer votre adresse e-mail et nous avons un contact, puis vous pouvez y saisir vos informations de contact. Vous pouvez inclure l'icône WhatsApp ici ou l'icône Viber si vous utilisez l' un de ces services. Et en gros, lorsque vous les incluez ici dans ce premier pied de page, comme expliqué en tant que composant parent, seront automatiquement mis à jour pour tous ces composants. Donc, si je vous montre cela, disons par exemple que c'est Alex sur indesign.com, qui est mon site Web. Lorsque je le tape, vous pouvez voir qu'il s'applique à toutes ces pages, ce qui est le but des composants principaux. Voilà à quel point ils sont faciles à utiliser. Donc, en gros, c'est une chose de moins que je voulais mentionner, c'est qu'il y a une grille ici, comme vous pouvez clairement le constater. Ainsi, lorsque vous sélectionnez le nom du plan de travail, vous pouvez voir ici, laissez-moi me cacher. Nous avons donc 12 colonnes. La largeur de la gouttière est de 60, soit la distance entre ces colonnes. La largeur des colonnes est A2, qui correspond à la largeur de ces colonnes. Enfin, nous avons des marges liées à gauche et à droite. Les marges sont simplement cet espace entre cette dernière colonne à droite et cette dernière colonne à gauche. Il faut donc un espace entre le bord du plan de travail et la colonne elle-même. Donc, en gros, c'est tout pour la couverture. Et comme vous pouvez le constater, il peut être très important de choisir la bonne couleur. Et lorsque vous commencez à l' ajuster ici, cela sera facilement traduisible vers ces autres pages. Et une dernière chose à noter ici, vous pouvez même ajouter leur propre logo si vous souhaitez identifier le logo d'inclusion. Mais si vous le souhaitez, vous pouvez y mettre leur logo, ce qui est juste une couche supplémentaire de personnalisation et une preuve supplémentaire que vous vous souciez de vous. Dans la vidéo suivante, nous allons parler des détails du projet. Alors je t'y verrai. 22. Détails du projet: Les détails du projet constituent l'une des parties les plus importantes de votre proposition de conception d'interface utilisateur. Jetons donc un coup d'œil et voyons ce que tu peux faire, non ? Voici donc la page de détails de mon projet, comme vous pouvez le voir ici. Donc, si je vous amène à quelques détails, tout d'abord, si je clique ici, nous avons le titre de la page et cette icône ici. Mais comme je l'ai mentionné précédemment, vous pouvez utiliser vos propres icônes. Vous pouvez modifier les icônes car elles sont créées en tant que composants si je les sélectionne ici. Je n'ai donc pas inclus celui-ci en tant que composant en me laissant appuyer sur Control K pour le créer. Donc, par exemple, si je veux le modifier ici, je peux simplement ajouter ce composant, par exemple cette icône. Et elle sera mise à jour en temps réel et remplacera cette icône précédente par cette icône existante. C'est donc le titre de votre projet. Et nous nous sommes divisés ici même. Et par exemple, vous pouvez même ajouter le nom du projet si vous le souhaitez, mais je ne vais pas vraiment vous embêter avec ces informations. Donc, par exemple détails du projet de refonte du site Web Audi si vous le souhaitez, mais je pense que c'est suffisant. Comme vous pouvez le constater, il n' y a pas de numéro de page car vous pouvez vraiment exporter des pages individuelles à la fois si vous le souhaitez, si elles ont juste besoin de détails sur le projet, par exemple , ne sert à rien cela ne sert à rien avoir le numéro deux, par exemple numéro trois en haut parce que c'est quoi, qu'est-ce que c'est réellement ? Vous pouvez donc l'exporter sans numéro de projet numéro de page et cela peut toujours fonctionner correctement. Donc, ce que nous avons ici, c'est le projet Oreo. Nous pouvons donc créer des pages de description de projets pour concevoir un design réactif et un calendrier du projet. Tout cela a donc, bien sûr, sens et c'est très important. La description du projet est celle que vous avez réellement convenue avec votre client par e-mail. Nous sommes Discovery Call et des trucs comme ça. Des pages à concevoir. Ou il peut s'agir d'écrans à concevoir si vous faites de la conception mobile, qui sont des écrans qui sont des pages que vous avez accepté de concevoir, un design réactif. Et bien sûr, juste une note supplémentaire sur les pages à concevoir. S'il y a des pages supplémentaires à concevoir, cela se fera lors de la phase de recherche. Ensuite, vous pouvez simplement mettre un astérisque ici et, par exemple , dire : « Nous n'avons toujours pas discuté ces pages supplémentaires une fois celles-ci terminées », alors probablement, par exemple nous pouvons ajuster les prix et des trucs comme ça. Assurez-vous donc de faire attention à ce design réactif. Bien entendu, si vous avez accepté le design réactif, assurez-vous simplement de discuter avec leurs développeurs tailles exactes pour un design réactif. Et enfin, la chronologie du projet. Quand est-ce que ça va commencer ? Quand se situe le point médian et quand va-t-il se terminer ? Qui sont bien sûr extrêmement importants pour tout type de projet sur lequel vous travaillez. Il existe un site Web d'une seule page ou de 100 pages. Cela n'a pas d'importance. C'est extrêmement important. Ensuite, nous avons le calendrier du projet. Donc, pour toutes ces choses, combien de temps me faudra-t-il pour terminer chacune d'entre elles ? Donc, par exemple, dix jours, 20 jours, 16 jours, huit jours, ce sont les révisions. Les révisions dépendent donc toujours de votre rapidité et de celle de vos clients pour vous fournir des commentaires. Donc, par exemple si cela leur faut, disons trois jours pour vous commentaires, car ils ont besoin vérifier auprès de leurs partenaires , partenaires commerciaux, etc. Alors évidemment, il vous faudra beaucoup plus de temps pour fournir le résultat final, la révision finale. C'est pourquoi je mets toujours, comme vous pouvez le voir ici, huit plus huit plus ceux-ci et dépend vraiment de leur rapidité. Enfin, nous avons enseigné une durée totale de projet de 54 jours et plus. Encore une fois, le plus, c'est cette révision. Donc, en gros, c'est tout pour la structure. Et maintenant, laissez-moi vous expliquer rapidement comment tout cela est configuré. Donc, si nous abordons un projet ou si nous le révisons et que nous l'ouvrons, nous avons le titre, qui est le suivant. Vous pouvez donc modifier cela ou embaucher comme vous le souhaitez. Voici donc les détails que nous avons convenus lors de nos conversations par e-mail et par appel. Donc, si vous finissez par acheter ce modèle, encore une fois, le lien sera au format PDF. Vous pouvez modifier cela. Si vous n'avez pas eu d'appel avec eux, alors vous avez simplement une conversation par e-mail avec eux, vous pouvez supprimer cette conversation téléphonique de cette conversation téléphonique. Et juste un petit mot. Si vous finissez par utiliser exactement ce modèle ou si vous finissez par recréer exactement le même modèle, que je vous montre. Assurez-vous de le personnaliser en fonction de vos besoins et de ce dont vous avez réellement besoin. Donc, comme je l'ai mentionné ici, payez l'appel. Assurez-vous de parcourir chacun de ces éléments et personnaliser simplement pour chaque client en particulier, car cela vous prendra environ 1 heure pour faire tout cela et vous rapporterez vraiment des dividendes lorsque dépend de vos clients, votre professionnalisme et de leur satisfaction. Donc, si nous revenons à ici, ce que je voulais montrer, c'est ceci. Voici donc les articles. Voici donc ces objets et, comme vous pouvez le voir, ils sont inclus dans une pile verticale de 40. C'est donc la distance. Donc, si je l'inclus à 80, par exemple , comme vous pouvez le voir, la distance sera plus grande entre tous ces objets. Et enfin, parce que c'est une pile et que c'est une fonctionnalité incroyable d'Adobe XD. Si je prends la chronologie de ce projet, par exemple, et disons que je souhaite le déplacer au-dessus du design réactif. Ce que je peux faire, c'est simplement cliquer ici, faire glisser, le positionner. Et comme vous pouvez le voir, il va automatiquement changer de place entre les deux. Maintenant, ce qui est également important, c'est entre les deux. Il y a donc une distance nette. Donc, ici, nous en avons une pile de 100. Donc, à l'intérieur de cette pile principale, nous avons ces deux-là. Donc, l'aperçu du projet, qui est celui-ci, et la chronologie du projet, qui est celui-ci avec une distance de 100. Cela signifie donc que vous passez à l'intérieur de chacun de ces éléments, qu'il s'agisse d'un projet, d'une vue ou d'une chronologie du projet. Et disons que je souhaite supprimer cette chronologie du projet pour une raison quelconque. Je clique simplement dessus, je le supprime, puis le contenu ci-dessous sera automatiquement déplacé vers le haut pour remplir cet espace, ce qui correspond maintenant à un week-end lorsque je supprime l'élément précédent. Et si je passe la souris ici et que je sélectionne ceci, vous pouvez voir que nous sommes toujours à 100 de distance entre les deux, ce qui est génial. Si vous souhaitez supprimer l'un de ces éléments, disons que je travaille exactement avec ces éléments. n'est pas le cas, et vous pouvez simplement supprimer n'importe lequel de ces éléments qui ne correspond pas à vos besoins. Vous pouvez le faire pour celui que vous voulez. Donc, des pages à concevoir, disons que vous n'avez qu' une seule page et que vous les supprimez. Comme vous pouvez le constater, cette modification s'appliquera à toutes ces pages et à tous les éléments qu' elles contiennent. Bien entendu, il en va de même pour la chronologie du projet. Donc, s'il s'agit d'éléments de la chronologie, si je sélectionne un élément, cliquez sur Supprimer. Comme vous pouvez le constater, la durée totale du projet va s'ajuster et remplacer simplement cet élément précédent, que je supprimerai simplement. Bien entendu, cela est extrêmement important car vous souhaitez les parcourir avec les détails du projet autant que possible pendant votre conversation par e-mail, pendant votre conversation téléphonique, car de cette façon, vous allez lever tout doute quant à ce qui est réellement inclus dans ce projet en particulier. Donc, encore une fois, si je vous reprends, vous pouvez voir les pages de description du projet à concevoir, responsive design, la chronologie du projet. Et bien sûr, vous pouvez ajouter tous les types d'objets que vous souhaitez ici, par exemple ceux qui sont prêts à être conçus. Vos actifs, les miens, toutes ces choses. Vous pouvez donc les inclure ici, par exemple si vous souhaitez, bien sûr, entretenir. Comme vous pouvez le constater, étude de projet, recherche sur les concurrents, brief de conception et inspiration. Bien entendu, comme je l'ai mentionné, vous pouvez supprimer n'importe lequel d'entre eux et inclure vos propres éléments indiquant exactement ce sur quoi vous travaillez sur ce projet en particulier. Parce que tous les projets ne l'exigeront pas. Ainsi, par exemple, une recherche de projet est peut-être déjà réalisée pour vous, vous allez donc réduire votre nombre de jours. Les recherches sur la concurrence peuvent être datées comme ça pour vous. Donc, encore une fois, vous allez réduire ces jours ou les augmenter en fonction de la rapidité avec laquelle vous travaillez réellement sur ce projet en particulier. Ensuite, nous avons la tarification des projets. Je vous verrai donc dans la prochaine vidéo où nous discuterons de la tarification du projet, de son importance et de la manière dont vous pouvez réellement l'adapter à votre proposition globale de projet. Alors je t'y verrai. 23. Tarifs de projet: Dans cette vidéo, nous allons parler de la tarification des projets. Allons donc y jeter un coup d'œil. Et le voici. Encore une fois, cela semblait être les détails du projet et la couverture du projet. La tarification des projets est extrêmement importante car lorsqu' il s'agit d'argent, les clients sont généralement réticents Disons les choses comme ça. Et ils ne savent pas vraiment dans quoi ils s'embarquent. C'est donc là la proposition de projet dans son ensemble est utile, mais aussi la tarification du projet sur une page séparée. Passons donc rapidement en revue et voyons ce qui est inclus ici. Donc, encore une fois, exactement la même structure. Je ne vais pas trop vous ennuyer avec ces détails. Donc, comme vous pouvez le voir, nous avons la pile de 81 groupes, est-ce que celui-ci est là pour les frais de projet. Et le deuxième groupe se trouve ici pour les options du projet. Ainsi, chaque fois que vous supprimez l' un de ces objets, par exemple, il rebondit comme je vous l'ai montré précédemment. Alors laisse-moi te montrer ça encore une fois. Disons que je supprime cet article. Comme vous pouvez le constater, ils vont tous sauter pour occuper l'espace. C'est maintenant le week-end où je retire cet article. En parlant d'articles, comme vous pouvez le constater, nous avons des frais de projet. Voici donc ce que je parlais tout à l'heure en tant que deux : qu'est-ce que cela va susciter la confiance des clients et leur expliquer exactement en détail ce que vous facturez réellement ? ce projet en particulier. Donc, si vous y jetez un œil, nous avons une étude de projet et vous pouvez entrer dans les détails, leur expliquant plus tard lors de votre appel. Si vous souhaitez examiner cela avec eux ou par e-mail, par exemple s'ils vous disent ce qu'est exactement une recherche de projet, vous devez par exemple leur dire, eh bien, je dois faire des recherches sur votre entreprise. J'ai besoin de faire des recherches sur vos concurrents , et c'est la prochaine étape. Qui est votre concurrent ? Qu'est-ce que tu es ? Qu'est-ce que la nature aime ? Quel est l'objectif du produit/service de votre entreprise ? Quels sont vos clients cibles, par exemple où ils se trouvent, quelles sont les entreprises sur lesquelles ils travaillent ? Et toutes ces choses entrent dans la recherche de projet, le brief de conception. Vous allez en fait rédiger vous-même le brief de conception si vous vous inscrivez, comme expliqué précédemment lors de ma masterclass Adobe XD, par exemple, vous allez obtenir le modèle de brief de conception et vous pouvez l'utiliser conjonction avec cette proposition de design pour travailler avec l'inspiration de vos clients, ce qui est un élément clé. Votre inspiration est un élément important dans chaque projet. Nous devons donc vous inspirer. Vous devez passer du temps sur tous ces différents sites Web à explorer les solutions possibles, les mises en page possibles, les styles , les couleurs, la typographie, l'échelle, etc. Vous avez besoin d'inspiration et vous devez investir votre temps pour atteindre ces résultats. s'agit donc simplement d'un prix de base, que je facture évidemment beaucoup plus cher pour toutes ces choses. Nous avons des documents, des études conceptuelles filaires, des plans du site et des organigrammes. Et j'y inclus toujours mon temps, mais vous pouvez ajouter une ligne séparée. Je le dis simplement comme ça parce que je vais manquer d'espace ici. Mais vous pouvez inclure une ligne séparée. Et pour ce faire, par exemple, sélectionnez un objet, appuyez sur la touche Ctrl D pour placer un objet en dessous. Et par exemple, disons l'heure du courrier électronique, l'heure des appels et des appels vidéo. Cela peut être votre moment. Donc, chaque fois qu'ils veulent vous rencontrer et vous parler de ce projet en particulier. Vous allez le facturer. Et double-cliquez simplement ici, et disons 900$, disons que c'est tout. Assurez-vous donc d'inclure toutes les choses que vous allez personnellement investir dans ce projet. Donc, tout votre temps, à la recherche, à la conception, à la planification, à partage de ces liens, à la révision des commentaires , à toutes ces choses qui seront incluses dans ce prix. Enfin, à la fin de la journée, je les ai simplement parcourus et ajoutés, et le résultat est ce prix, soit 30 750 dollars. Mais il s' agit évidemment d'un prix imaginaire. Une fois de plus, j'ai facturé beaucoup plus pour mes projets. Vous pouvez donc les parcourir et les ajuster simplement à ce qui vous convient le mieux. Par exemple, un article, une étude conceptuelle filaire, site et des organigrammes. Vous voulez peut-être ajouter quelque chose d'autre ici. Disons donc l'exploration filaire sur papier , filaire. Si c'est ce que vous faites, recherche conceptuelle, du plan du site, bla, bla, bla, et vous pouvez facturer plus d'argent parce que vous avez ajouté cet élément supplémentaire. Ou si, par exemple, vous ne faites pas de recherche conceptuelle, double-cliquez ici, sautez, supprimez la recherche conceptuelle, puis ajustez simplement ce prix en sur quoi vous travaillez sur ce projet en particulier. C'est donc essentiellement ce que sont les frais de projet. Et comme je l'ai dit, c' est ce qui va donner confiance à votre client. Pour vraiment comprendre et être plus à l'aise pour vous payer cet argent. Parce que maintenant tu leur as montré, d'accord, ce sont toutes les choses sur lesquelles je vais réellement travailler pour toi sur ce projet en particulier. C'est pourquoi je dois facturer cet argent que je vous ai expliqué, car toutes ces choses sont réellement impliquées dans ce projet en particulier. Passons à cela. Nous avons donc des options de paiement. Et encore une fois, le paiement est extrêmement important, jamais, quel que soit le projet sur lequel vous travaillez , quel que soit le client sur lequel vous travaillez, sans être payé au préalable. Et c'est là que les options de paiement s'avèrent utiles. Encore une fois, il ne s'agit que d'options de paiement utilisées dans le passé. existe de nombreuses autres, comme le paiement hebdomadaire, le paiement mensuel Il en existe de nombreuses autres, comme le paiement hebdomadaire, le paiement mensuel, les paiements ponctuels ou le paiement à 100 %. Si cela vous convient, vous voudrez peut-être vous ajouter à leur entreprise, par exemple en devenant actionnaire , etc. Il existe donc de très nombreuses autres façons d' être payé. Mais je suis allée de l'avant et inclus trois des plus courantes. Donc, par exemple, deux paiements égaux. Donc, partout où votre total ici est simplement divisé par deux. Et puis, juste ici, 50 % à l'avance, juste avant de commencer ce projet. Et puis 50 % à la fin, juste avant que je doive vous envoyer les fichiers finaux pour ce projet en particulier, nous avons trois paiements égaux. Donc 33,3 % au début, au milieu et à la fin du projet. Et nous avons deux paiements, par exemple 70, 30 ou 60, 40 fractionnés. C'est pourquoi j'ai dit qu'il existe de nombreuses options de paiement différentes, alors assurez-vous de choisir celle avec laquelle vous êtes le plus à l'aise. Et puis mets-le simplement ici. Donc, si c'est le cas, je pense que dans ce cas, c'était 70 à 30, soit 9625 et le dernier paiement est pour un à cinq. Et assurez-vous simplement d'expliquer quand vous vous attendez à ce qu'ils effectuent ces paiements, à une d' entre elles que vous incluez . L'objectif de ces options de paiement est de leur donner des options et de expliquez-leur que vous pouvez leur donner des options. Donc, dans la majorité des cas, l'argent est stigmatisé, ce que je ne comprends vraiment pas parce que vous fournissez le service. Comme si vous vous rendiez au magasin pour acheter de la nourriture, par exemple, ce vendeur vous fournira le service pour lequel ils sont payés. On dirait que c'est le cas avec la conception de sites Web ou la conception d'applications. Ce n'est donc pas différent du tout. Assurez-vous donc de leur proposer ces options de paiement , car il leur sera parfois beaucoup plus simple de fractionner ce gros paiement, surtout s'il s'agit de paiements importants en trois ou quatre parties. pièces ou cinq pièces. Assurez-vous donc de leur donner d'abord ces options puis ces options entre YouTube, vous pourrez le peaufiner encore plus loin. Je vais donc vous donner un exemple. Par exemple, ils peuvent vous demander deux paiements, mais au lieu, disons, de payer 70 ou 30 %, ils voudront peut-être payer dans l'autre sens, peut-être 30 % au début du projet, 70 % à la fin du projet, peut-être que tu es à l'aise avec ça. Ou au lieu de trois paiements égaux, vous pouvez le diviser en cinq paiements égaux. C'est pourquoi j'ai dit : donnez-leur simplement ces options de paiement avec lesquelles vous êtes à l'aise et avec lesquelles vous souhaitez travailler. Et puis entre vous deux, vous pourrez vous arranger. Par exemple, comme je l'ai dit, pour égaler trois paiements égaux via des paiements égaux, peu importe ce avec quoi vous êtes à l'aise et avec lequel votre client est à l'aise, alors parvenez simplement à cet accord inclus dans les options de paiement et vous serez tous les deux satisfaits. Donc, en gros, c'est tout pour les options de tarification. Comme vous pouvez le constater, il est extrêmement important de régler tous ces problèmes , car une fois de plus, cela montrera à vos clients que vous êtes professionnel. Cela leur donnera plus de confiance en vous pour vous embaucher. Et comme vous allez utiliser cette proposition de design, cette proposition de projet, adaptée à leur activité et à leur image de marque, les mettra vraiment à l'aise idée de vous embaucher que un autre designer. Ensuite, nous avons les termes et conditions. Une page extrêmement importante. Je vous verrai donc dans la prochaine vidéo où nous allons en discuter. 24. Conditions générales: Ensuite, nous avons les termes et conditions. Allons donc à l'intérieur. Et le voici. Voici donc les termes et conditions, encore une fois, une page extrêmement importante car voici quelques règles de base que vous allez établir. Votre client va comprendre ce qui est inclus, ce qui ne l'est pas, ce qui est possible, ce qui ne l'est pas, ce qui est disponible, ce qui ne l'est pas. Toutes ces choses devraient donc être répertoriées dans deux termes et conditions. Ce ne sont là que quelques-uns des miens, bien sûr, pour certains projets moins gourmands. Pour certains projets, j'en utilise beaucoup plus. Donc, si vous devez utiliser bien plus que, vous pouvez simplement dupliquer cette planche d'art pour n, pour n'importe laquelle d'entre elles. D'ailleurs, vous pouvez maintenir option de la touche Alt sur votre mot clé, le dupliquer et, par exemple appeler ces termes et conditions un terme ou simplement continuer là où vous vous êtes arrêtés ici, mais Assurez-vous de positionner cette page à la place de cette page À propos de moi. Il suffit de l'éloigner du chemin, comme ceci. En gros, il suffit de faire une copie et de la déplacer. Il suffit donc de supprimer à propos de moi, le placer ici. Ainsi, plus tard, lorsque vous l' exporterez sous forme de plusieurs PDF, votre client pourra faire défiler l'écran vers le bas si vous avez besoin d'inclure plus de termes et conditions. Maintenant, en parlant de termes et conditions, ce que vous devriez réellement y inclure. Nous avons donc des ressources pour les projets. Ainsi, par exemple les images que vous allez utiliser pour vos projets, qui sont autant d'images incluses dans ce projet, allez-vous finir par utiliser des images d' Unsplash ou payer pour des images provenant d'Envato Elements, par exemple ou en payant pour les images très coûteuses de photographes qui vont payer pour ces images, pour les icônes, pour les polices, pour les illustrations, pour les maquettes 3D, pour les maquettes 2D, pour toutes ces choses. Voici les ressources du projet. Qui va payer pour ça ? Si vous voulez payer pour cela en tant que designer, vous devez revenir à la tarification du projet et augmenter considérablement le prix de ce projet, car vous finirez par payer pour tous ces prix si le client va payer pour chacun d'entre eux, puis comment tout cela va fonctionner. Allez-vous trouver une ressource, puis leur demander de l'acheter ? Ou vont-ils vous envoyer l'argent à l'avance pour les ressources qui ne sont pas incluses dans le prix de votre projet ? Il s'agit de fonds supplémentaires pour le projet. Alors, est-ce qu'on va vous envoyer cet argent pour les ressources de ces projets ? Tu vas les payer avec cet argent. Et puis vous aurez toujours cet argent, que vous avez accepté comme prix total du projet. Assurez-vous donc de faire attention à ces choses. Ensuite, nous avons les révisions de projets, ce que les clients apprécient le plus. Vous devez limiter les révisions de vos projets. Tout d'abord, quand ces révisions auront lieu ou se produiront tous les jours, à la fin de la semaine ou au bout de deux semaines. Ou ce que j'aime vraiment faire c'est m'intéresser aux aspects spécifiques de votre projet. Donc, si je vous ramène à la tarification du projet, par exemple, dans mon cas, il n'y a pas d'avis avant d'avoir atteint cette section. Adobe XD redéfinit donc, puis je vous donne deux séries de révisions et de commentaires. Je ne veux pas qu'ils me dérangent quand je fais mes recherches, moodboards, mes préparatifs, ma planification, etc. Ensuite, quand j'aurai terminé les wireframes et que je leur aurai donné ce lien partageable, nous pourrons commencer les révisions. Ils ont droit à des révisions dans ce prix inclus. S'ils ont besoin de révisions supplémentaires, dans le cadre des révisions du projet, vous finirez par leur indiquer coût de vos révisions après ces révisions. Et si vous leur apportez des révisions supplémentaires ici, ils doivent payer pour les révisions à la fin du projet, car elles sont actuellement incluses dans le prix. Mais s'ils décident de le faire, par exemple dans Greeley sur XD, des wireframes avec lien partageable. Ensuite, vous leur ferez payer pour ces révisions à la fin du projet. Sinon, vous n' allez pas livrer le fichier, des trucs comme ça. Mais pour éviter toute confusion, c'est pourquoi nous avons des termes et conditions. Vous allez donc inclure toutes ces choses ici. Donc, ajout de projet. Disons donc qu'ils veulent une carte de visite supplémentaire. Non, non. Vous ne travaillez pas sur une carte de visite. Vous travaillez simplement sur ce projet de conception d'interface utilisateur utilisateur. Disons qu'ils le souhaitent, pour que vous incluiez des publications sur les réseaux sociaux et un design de brochure ou un design de menu si leur restaurant nano, juste un design d'interface utilisateur utilisateur. Merci beaucoup. Et pour cela, si vous travaillez avec eux, vous pouvez créer une proposition de projet supplémentaire, qui n'est pas une interface utilisateur utilisateur, mais une proposition de projet de conception graphique. Et puis travaillez simplement dessus avec toutes ces choses. Encore une fois, les termes et conditions sont extrêmement importants car ils vous aideront à éviter toute confusion, toute confusion avec votre client, et vous pourrez simplement vous mettre au travail facilement. Ensuite, nous avons des jours ouvrables. Si vos clients travaillent le week-end, c'est très bien. C'est bien pour eux. Mais si vous ne travaillez pas le week-end , mettez-le simplement ici. S'ils veulent vraiment que vous travailliez le week-end, mais que vous ne voulez pas travailler le week-end, facturez plus cher. C'est pourquoi c'est là pour les formats de fichiers. Encore une fois, si vous travaillez dans XD , je recommande vivement car je l'adore vraiment. Mais ils vous demandent par exemple types de fichiers Adobe Illustrator ou des types de fichiers Photoshop. Vous pouvez dire dans ces formats de fichier, par exemple, je ne les livre pas parce que je travaille dans XD. Mais moyennant des frais supplémentaires, je peux y aller et je peux vous les livrer, car ce sont des outils de conversion en ligne que vous pouvez utiliser et que vous devez payer pour eux. C'est pourquoi vous allez payer, gagner plus d'argent en demandant paiement supplémentaire dans ces formats de fichier parce que vous ne travaillez pas avec eux. Tu cherches, n'est-ce pas ? Ainsi, après la fin du projet, qui obtient les droits d'utilisation du design et à quel moment, ce qui est crucial, s'ils ne vous ont pas payé le paiement final, ils n'ont pas le droit de l'utiliser design. S'ils l'ont fait, vous pouvez leur envoyer le design final, et c'est à eux de décider. Ils peuvent en faire ce que je veux. Ils peuvent le vendre, ils peuvent le revendre. Ils peuvent faire ce qu'ils veulent. Ou si vous avez des exigences supplémentaires, vous pouvez les mettre ici dans les droits d'utilisation. Par exemple, avec ce modèle, je ne veux pas que vous vendiez ce modèle. C'est pourquoi sur Gamma Road, où je le vends, il existe une politique stricte en matière de caméras. Vous pouvez l'acheter, vous pouvez l'utiliser pour vos propres clients. Vous pouvez l'utiliser pour un nombre illimité de projets, mais vous ne pouvez pas le revendre comme le vôtre. Sinon, Gum Road et moi-même sommes légalement tenus de vous poursuivre en justice parce que vous avez enfreint cette règle, qui est très simple en termes de conditions générales. Enfin, il y a l'annulation de projets, qui est ma préférée en fait. Cela m'est donc déjà arrivé lorsque je travaille avec des clients, par exemple pendant deux mois, et ils finissent par faire faillite. Cela m'est vraiment arrivé. Ce n'est donc pas mon problème. Ils veulent que je leur donne ce design, mais ils ne m'ont toujours pas payé lors des derniers frais de projet. Donc, ce qui se passe avec l'endettement, c'est que l' annulation de ce projet fait partie des termes et conditions, vous pouvez vraiment le décrire. Donc, si, pour une raison ou une autre, vous ne voulez pas me payer pour le projet, vous n'obtiendrez pas les fichiers du projet ou vous obtiendrez les fichiers de projet pour cette partie particulière que nous terminé jusqu'au moment où tu m'as dit que tu n'allais pas me donner d'argent pour la fin du projet. Cela m'est vraiment arrivé et je l'ai fait exactement comme ça. Assurez-vous donc de faire attention, être sage à propos de ces choses car vous ne contrôlez pas la vie de quelqu'un d'autre. Tu ne sais pas ce qui va leur arriver demain. Peut-être, peut-être qu'ils vont mourir. Qui sait ? Peut-être qu'ils vont déménager dans un autre pays. Peut-être qu'ils vont divorcer. Peut-être que leur entreprise va faire faillite. Peut-être, je ne sais pas, que Bourse va s'effondrer. Beaucoup de choses peuvent se produire, alors assurez-vous de vous assurer tant que designer travaillant sur ce projet, annulant ce projet. Donc, en gros, comme je l'ai dit, vous pouvez inclure des éléments supplémentaires si vous le souhaitez. Ce ne sont là que quelques-uns de ceux que j'utilise tout le temps. Mais comme je l'ai dit, pour certains projets, j'en utilise moins. Pour certains projets, j'en utilise davantage. Et surtout si vous travaillez avec des clients réguliers, vous pouvez éviter certaines de ces choses, mais assurez-vous d'être plus intelligent et d'inclure tout ce que vous jugez nécessaire. Ce ne sont là que quelques-unes des directives incluses. Et encore une fois, comme pour tous ces objets, nous avons ces objets et ils sont empilés. Ainsi, par exemple, pour ces droits d'utilisation , vous pouvez appuyer sur Supprimer, cela apparaîtra en haut. C'est donc la même structure que celle que je vous ai montrée avec la tarification du projet, les détails du projet et la page de découverte. Enfin, ce qui nous reste à couvrir concerne moi, ce qui constitue une fois de plus une page clé. Je vous verrai donc dans la prochaine vidéo et nous allons discuter de celle-ci. 25. À votre sujet: Enfin, parlons de ma page et de son importance. Alors, c'est ici. Et encore une fois, toute cette structure de page, comme je vous l'ai montrée, est la même. Mais ce que vous pouvez faire avec cette image c'est que je l'ai incluse pour qu'elle soit aussi large. Donc, par exemple, si vous le souhaitez, vous pouvez vous installer dans un bureau comme celui-ci. Si vous avez un bureau comme si vous travailliez sur votre ordinateur, par exemple, et que vous pouvez afficher une image comme ça. Ou si vous ne le faites pas, vous pouvez simplement ajuster la taille de cette image. Il suffit de cliquer dessus. Tu vas l' ajuster. Vous pouvez le placer au centre. Ce texte suivra, afin que vous puissiez vraiment jouer et en faire ce que vous voulez. Mais j'ai inclus cela parce que dans la majorité des cas, clients aiment vraiment vous voir, votre visage, mais ils aiment aussi voir sur quoi vous travaillez. D'où ces images ci-dessous. Ces images peuvent être extraites de votre travail précédent le week-end ou sur Dribble. Par exemple , vous pouvez simplement y mettre des images, ce qui redonnera confiance à nos clients, car vous afin de montrer une plus grande partie de votre travail, qu'ils ont réellement vendue parce qu'ils ont contacté votre portfolio quadriennal depuis votre site Web, Behance Dribble, où que vous hébergiez votre portfolio et votre travail. Par conséquent, vous pouvez vraiment y inclure des images juste pour leur rappeler la qualité de votre travail, ce que vous êtes capable de créer en tant que designer, car il y a une légère possibilité qu'ils ne finiront pas par vous embaucher s'ils pensent que le budget est trop important, par exemple ou quelque chose comme ça, alors cette page est vraiment là pour leur rappeler pourquoi la quantité due dans le premier lieu. Parce que dans la majorité des cas, les clients voient réellement des dizaines de designers différents. Ils ne savent pas vraiment lequel est lequel. Donc, en leur rappelant ici certains de vos travaux, vous pouvez vraiment les aider à décider de vous accompagner sur ce projet en particulier. Comme vous pouvez le voir, cela indique votre nom UI UX designer, mais vous pouvez clairement double-cliquer ici. Permettez-moi de saisir mon propre nom car j'ai inclus le rembourrage ici. Donc, quand je commence à taper, vous pouvez voir que le roulement s'ajuste. Vous pouvez donc inclure UI, UX designer, slash, graphiste. Nous avons créé un blogueur, blog ou quoi que ce soit d'autre, vous pouvez l'inclure ici et il s'étendra. Et comme je vous l'ai montré précédemment, vous pouvez simplement ajuster cette image comme vous le souhaitez. Cela va suivre. Ça peut finir par saigner ici. Et bien sûr, vous pouvez la changer pour une autre couleur. Il n'est pas nécessaire que ce soit blanc, donc tu peux vraiment jouer avec ça comme si tu étais avec moi. Il est écrit Project Resources ici. Si peu, un peu plus sur moi, par exemple, vous allez inclure des informations vous concernant ici. Donc tu vas vraiment leur expliquer, qui es-tu ? Quelles sont vos informations ? Quelle est votre formation, par exemple, quelle est votre expérience sur ces projets ? Alors, sur quoi avez-vous travaillé par le passé, quels sont certains de vos centres d'intérêt. Par exemple, je m' intéresse vraiment aux voitures , puis je vais leur expliquer cela. Et si vous travaillez dans ce créneau en particulier, carnage, par exemple en disant que vous êtes vraiment inspiré par les voitures, que vous vous intéressez vraiment aux voitures. Les chances et les possibilités sont extrêmement élevées. Les clients vont vous embaucher pour ce projet en particulier parce que vous vous intéressez vraiment à cette sphère et à cette partie du marché. Il est donc extrêmement important de pouvoir raconter une histoire à ces clients, car c'est l' histoire qui vous embauchera au bout du compte. Encore une fois, si tu ne veux pas qu'ils soient là. Donc, ces trois paragraphes, vous pouvez appuyer sur Supprimer, supprimer ce paragraphe, déplacer ces images vers le haut. Vous pouvez simplement étendre ces images comme ceci si vous souhaitez qu'elles soient plus grandes. Encore une fois, il est extrêmement adaptable. Tu peux en faire ce que tu veux. Enfin, ce que je veux montrer ici, c'est si vous êtes un homme et que vous vous identifiez comme un homme, vous pouvez double-cliquer ici, et vous pouvez afficher cette icône de courrier ou nous avons également l'icône féminine. Vous pouvez donc simplement ajuster l'opacité, apporter ici si vous vous identifiez comme une femme. Vous pouvez donc le mettre ici. Sinon, vous pouvez utiliser une icône non sexiste si vous vous identifiez comme telle, c' est très bien aussi, bien sûr. Vous pouvez donc l'inclure si vous le souhaitez. Je ne l'ai pas inclus ici, mais encore une fois, je vais laisser le lien vers ces packs d'icônes. Ils ne l'ont pas incluse, mais si vous avez votre propre icône personnelle, mieux encore, incluez-la simplement là. Je t'ai montré comment les remplacer. Je peux simplement glisser-déposer votre icône à la place de ce composant et il sera mis à jour en temps réel. Enfin, comment pouvez-vous réellement l'exporter ? Vous pouvez simplement sélectionner Je n'aime pas. Appuyez donc sur Ctrl E, choisissez un PDF, appuyez sur Exporter, et il sera exporté sur votre bureau. Et par exemple, où il se trouve, le voici. Permettez-moi de double-cliquer dessus et de l'ouvrir. Voici Control Zero. Voici donc le nom de votre projet, les détails du projet, le prix du projet, les termes et conditions me concernant. Et si je vous amène sur cette page, par exemple zoomer un peu plus près. Car encore une fois, il s'agit d'un format de fichier vectoriel. Vous pouvez voir la qualité du texte. Il est vraiment impeccable et il ne perd aucune qualité, comme vous pouvez le voir ici. Et si je vous prends comme ça, vous pouvez voir à quel point ce texte est clair et net. C'est pourquoi j'aime travailler dans Adobe XD. Si vous pensez que ce texte gris n'est pas facilement lisible, encore une fois, vous pouvez vous rendre ici où il est écrit gris neutre. Appliquez-le pour qu'il soit un peu plus foncé, puis il s'appliquera à tous vos projets. Encore une chose à noter : si vous souhaitez exporter ce type de fichier et tout autre type de fichier, vous pouvez sélectionner des aéroports individuels et les partager ici si vous le souhaitez, mais vous pouvez appuyer sur Contrôle E ou Commande D au lieu de PDF, vous pouvez les partager sous forme d' image PNG, d'image JPEG ou SVG si vous souhaitez que vos clients les prévisualisent au format JPEG, par exemple, vous pouvez simplement les partager ou comme je vous l'ai montré avec PDF, vous pouvez simplement les sélectionner tous en appuyant sur Ctrl E. Et puis au lieu de PDF, sélectionnez JPEG, appuyez sur Exporter, puis envoyez-leur des images JPEG si c'est ce dont ils ont besoin. Mais comme je l'ai dit d'après mon expérience, PDF fonctionne vraiment très bien parce qu'ils peuvent vraiment ouvrir ce PDF et l'emporter avec eux par e-mail, sur leur ordinateur portable, leur bureau, leur téléphone portable, leur tablette, peu importe ils utilisent, ils peuvent prendre ce PDF et c'est vraiment agréable, simple et léger. Il est donc facilement partageable avec eux par e-mail, via les pages de réseaux sociaux, ces applications de communication comme WhatsApp , Viber, etc. Voici donc essentiellement comment travailler avec la proposition de conception UI UX. Encore une fois, si vous voulez le consulter, le lien se trouve dans le PDF. Assurez-vous de cliquer sur ce lien et d' y accéder à un prix très avantageux. Ou je vous encourage vraiment à créer le vôtre si vous le souhaitez. 26. Modèle de figma de proposition de projet UX: Dans cette vidéo, je voulais vous montrer comment créer la proposition de projet de conception UI UX. Et comme pour toutes ces vidéos, je vais vous montrer comment les créer dans XD sous la forme d' un didacticiel complet, puis vous montrer en quoi XD Figma est différent , parce que je ne veux pas vous faire perdre votre temps. Dans cette vidéo, nous allons donc remarquer les différences entre l'utilisation de Figma et celle de XD pour créer ce type de modèles. Passons donc à Figma. Et ici, à Figma, vous pouvez voir à quoi tout ressemble. me semble donc que lorsque X est juste, nous n'avons pas nos planches ici. Nous avons ces cadres qui sont fondamentalement exactement les mêmes. Il s'agit simplement de la zone de contenu dans laquelle vous insérez votre contenu. Maintenant, lorsque je clique à l'extérieur, vous remarquerez que ces textiles et tous les textiles sont exactement les mêmes que dans XD et maintenant dans Figma. Et puis nous avons ces styles de couleurs qui sont exactement les mêmes dans XD et Infimum, car nous voulions ces modèles aient exactement la même apparence. La seule différence majeure se situe ici. Ils sont appelés mise en page automatique dans XD, ils sont appelés piles. Et ce sont ces groupes que vous voyez ici dans lesquels vous pouvez positionner vos éléments. Ainsi, par exemple pour la tarification du projet, nous avons ici la mise en page automatique au lieu de piles dans le sens vertical. Et la distance entre toutes ces sections est de 80 pixels. Nous avons maintenant deux sections qui contiennent des informations sur les prix, savoir cette section ici, et l'option de paiement, qui se trouve ici. Maintenant, si je sélectionne la tarification du projet ici, j'ai la distance entre cette section et cette section, qui est cette distance ici même. Si je passe la souris dessus, cela indiquera AT, et si je l'augmente à 120, par exemple, vous pouvez voir ce que cela fait. Donc, tout l'intérêt est juste un nom différent, l'outil est exactement le même et il fait exactement la même histoire qu'avant. Si je viens ici en dehors de tout ce qui se trouve ici, j'ai ma couleur H1. Si je veux l'ajuster, laisse-moi appuyer ici, en haut, pour que tu puisses le voir ici. J'ai la couleur H1, mais si je clique ici pour l'ajuster, je voudrais peut-être cliquer ici. Et vous remarquerez qu'il sera à jour en temps réel, en s'ajustant à la couleur de votre choix. Donc, si je reviens un peu en arrière en utilisant Control Z. Donc, même histoire que dans XD, par exemple, et ça va revenir à la position initiale. Maintenant, si nous passons aux actifs, nous avons ici la couverture qui est le pied de page, qui est cet élément ici même. Et pour créer un composant, c'est exactement la même chose. Dans ce cas, il vous suffit de sélectionner le groupe, et vous venez ici et vous créez des composants ou utilisez la touche Control Alt, par exemple, et ce composant s' affichera. Et si je le fais glisser quelque part ici, vous remarquerez ce qu'il y a à l'intérieur. Nous avons ici le site Web et le texte du site Web, nous avons l'e-mail, les textes des e-mails et le contrat, et le but de tout cela, comme dans Adobe XD, si vous avez regardé cette section, est de vous aider à créer sur cette première section. Et puis il va se mettre à jour automatiquement sur celui-ci, celui-ci et celui-ci. Vous n'avez donc pas à taper, à copier-coller votre texte et à perdre du temps de cette façon. Au lieu de cela, vous allez simplement créer un seul composant au début, qui se trouve en fait ici. Et puis elle héritera de ces tuiles plus tard. Ici. Si nous changeons, vous pouvez voir que nous sommes maintenant en couverture. Donc, dans la couverture, qui est celle-ci, il va localiser ce composant en particulier. Donc, si je reviens ici, sélectionnant ma couverture , je veux me débarrasser de cette couleur de remplissage car je n'en ai pas vraiment besoin. Je dois cliquer dessus par accident. Et c'est en fait notre composant principal. Et vous pouvez voir qu' en cliquant ici, vous pouvez ajouter de la variance à cette composante. Et nous allons parler des variantes dans la section design de ce cours. Mais je voulais juste remarquer rapidement que si vous apportez une modification ici, contrairement au style de vie en matière de couleurs le choix des polices sera mis à jour en temps réel sur tous ces autres cadres ou tableaux d' art si vous le souhaitez. Et cela va apporter ce changement dans chacun d'entre eux. Même histoire que dans Adobe XD. Donc, en ce qui concerne la couleur, vous pouvez voir que nous avons ce composant particulier pour les détails du projet. Nous avons ici, si je l'ouvre, juste ce composant, qui est cette icône juste ici. Même histoire pour la tarification du projet, même histoire pour les termes et conditions. Et pour ce qui est de moi, nous avons juste ces deux icônes, qui sont ces deux icônes ici. Donc, en gros, si je clique à l'extérieur, je vous ai déjà montré comment modifier le texte, vous ai déjà montré comment modifier les polices, en gros, la même histoire. Cliquez ici et laissez-moi me retrouver. Et ici, vous pouvez choisir la famille de polices que vous pouvez choisir en termes d'apparence et de sensation, les distances, etc. Et bien sûr le nom et à quoi ça sert. Donc, si j'y reviens, je voulais juste vous montrer une chose de moins car nous avons l' image ici. Si je passe de deux couches d'actifs à cette option, nous avons cette image Permettez-moi donc de la fermer pour ne pas vous embrouiller. Comment ajouter une image dans Figma ? Vous pouvez donc glisser-déposer votre image ici. Et ça va le peupler. Ensuite, vous pouvez le faire glisser à l'intérieur, puis vous devez le masquer et ainsi de suite. Mais je n'en suis pas vraiment fan. Donc, si vous sélectionnez votre image ici, vous pouvez voir du gris naturel. Donc, au lieu de la chance dans XD, que j'aime beaucoup Adobe XD et que je n' aime pas dans Figma. Mais maintenant qu'Adobe a racheté Figma, j'espère qu'ils l'ajouteront à l'avenir. Vous ne pouvez donc pas simplement glisser-déposer sur l'espace réservé. Vous pouvez plutôt glisser-déposer ici. Donc, ici, il est écrit gris naturel. Faites-le glisser pour oser. Attendez un peu jusqu'à ce qu' il le reconnaisse. Et une fois que c'est fait, vous pourrez simplement le sélectionner, faire glisser et le déposer dessus, et il le remplacera par votre couleur. Mais dans ce cas, l'œuvre, alors laissez-moi la détacher pour qu'elle devienne la couleur de fond. Alors faites glisser et vous pouvez voir que maintenant il devient bleu et lâchez prise. Et ensuite, il va s'y peupler. Mais que se passe-t-il si vous souhaitez ajuster cette image ? Laisse-moi me cacher pour que tu puisses le voir. Vous pouvez simplement cliquer dessus au lieu de le remplir, vous pouvez appuyer sur recadrer. Alors, remplissez, ajustez, recadrez et tuilez. Ainsi, lorsque j'appuierai sur Crop, je pourrai le redimensionner, le repositionner, le redimensionner et l'ajuster comme je le souhaite. Et il s'adaptera parfaitement à ce site, comme c'est le cas dans Adobe XD. C'est donc juste une chose que je déteste chez Figma et que j'aime plus particulièrement à propos d'Adobe XD. Parce que dans certains cas, on a l' impression que certains clics sont trop loin, comme si c'était le cas. Dans ce cas, dans XD, vous pouvez glisser-déposer, double-cliquer, puis ajuster comme vous le souhaitez. Eh bien, vous devez le créer séparément, vous devez le déverrouiller si, par exemple la couleur a été attachée comme c'est le cas dans ce cas, puis vous devez la déposer dessus, puis regarder cela en un clic, deux clics, puis trois clics pour que je puisse la recadrer à l'intérieur dans XD. C'est beaucoup plus intuitif, mais c'est juste l' une des choses que j'espère qu'Adobe ajoutera à Figma à l'avenir. Maintenant qu' ils en sont propriétaires, vous pouvez vraiment effectuer toutes les modifications que vous souhaitez. La même histoire que celle que je vous ai montrée précédemment dans Adobe XD. Et encore une fois, si vous vous demandez ce que sont toutes ces choses et que vous sautez la partie dxdy, regardez-la car elle est très importante pour savoir comment établir correctement le prix de votre projet et comment réaliser cette proposition de projet UI UX. C'est juste que vous pouvez ouvrir ce modèle dans Figma et regarder la partie XD pendant que nous vous expliquons pourquoi j'ai fait certains choix et pourquoi tous ces éléments se trouvent là où ils se trouvent. Donc, en gros, c'est tout pour cette vidéo. Je voulais juste vous expliquer rapidement et vous montrer les différences entre les fichiers XD et les fichiers Figma. Assurez-vous d'ouvrir ce modèle dans Figma. Vous allez l'obtenir, vous pouvez l'utiliser et le réutiliser pour vos propres projets et vous assurer de l'explorer, comment je l'ai créé. Et peut-être jouer avec certains réglages. Incluez peut-être vos propres icônes, vos propres couleurs, vos propres choix de typographie et voyez comment vous pouvez les personnaliser. Parce que c'est là tout le problème. Ne vous contentez pas d'utiliser ce modèle sans ambages pour vous assurer de l'ajuster et d' apporter des modifications qui vous conviennent et qui correspondent à votre style particulier. 27. SECTION 4 Recherche d'utilisateur: Les personnalités des utilisateurs sont l'un des éléments cruciaux de tout processus de conception car vous ne voulez pas simplement utiliser les données et les appeler utilisateurs. Vous voulez mettre un visage derrière votre personnalité, derrière la personne pour laquelle vous concevez ce site Web ou cette application. Et c'est ce que l' on appelle UI UX Persona. Vous souhaitez utiliser ces personnages aussi précisément que possible sur la base des recherches que vous avez effectuées. Et nous allons parler différentes méthodologies que vous pouvez utiliser pour vos recherches dans cette section du cours. Mais en gros, c'est à cela que sert tout l'objectif. Vous voulez le traiter comme une personne réelle et pas seulement comme des données utilisateur. Commençons donc. 28. Qu'est-ce qu'un utilisateur Persona: Lorsque vous commencez votre projet de conception, vous devez savoir pour qui vous concevez. Sinon, vous allez simplement concevoir pour tout le monde. Et les décisions de conception que vous allez prendre ne seront pas utiles. Parce que plus tard, lorsque les gens n'achètent pas, lorsqu'ils ne s'inscrivent pas, votre client vous demandera pourquoi. Et c'est clairement parce que le public cible n' a pas été défini. Ce public cible est connu sous le nom de personnalité de l'utilisateur. Et au lieu de cibler un public, dans ce cas, vous allez simplement cibler une seule personne, une personne imaginaire, mais une seule personne quand même. Mais comment savoir qui est cette personne que vous ciblez pour votre personnalité d'utilisateur ? Vous allez le savoir en faisant vos recherches sur les utilisateurs. En faisant vos recherches sur les utilisateurs, vous allez savoir qui est votre public cible et à partir de ce public cible, comme je l'ai dit, vous allez prendre et créer ce personnage imaginaire. Vous allez utiliser les données réelles ce qui est crucial ici. N'utilisez pas simplement des données imaginaires parce que vous pensez que vos utilisateurs pourraient aimer une certaine chose. Essayez de définir votre personnalité à partir des recherches spécifiques que vous avez effectuées auprès des utilisateurs afin d'obtenir plus d'informations possible. Maintenant, vous pouvez imaginer un quota en fonction du comportement de vos utilisateurs, de leur âge ou autre. Essayez toutefois de recueillir les informations cruciales telles que l'âge, le statut professionnel, par exemple sexe, comme la ville ou le pays dans lequel se trouvent vos utilisateurs. Essayez de collecter les données et d'être aussi précis que possible afin de savoir comment créer correctement votre personnalité d'utilisateur dès le début de votre projet. Pourquoi créer un personnage en premier lieu est assez simple. Juste pour le désigner comme un utilisateur plutôt que comme un utilisateur, vous allez le désigner comme un personnage, vous allez utiliser à nouveau données réelles que vous avez collectées grâce à des recherches sur les utilisateurs. Mais vous allez associer un nom et un prénom fictifs, un poste fictif à ce personnage afin de pouvoir le traiter comme une personne réelle, même s'il ne s'agit que d'une personne imaginaire, ce personnage l'est, mais comme je l'ai dit et je ne cesse de le répéter, vous allez utiliser de vraies données, ce qui vous donnera l' impression d'être une vraie personne. Lorsque vous passez à l'étape du développement de votre projet, vous allez faire référence à ce personnage d'utilisateur par son nom et son prénom, comme s'il existait réellement. Et il sera beaucoup plus simple de s'adapter et d' apporter des modifications à votre personnage lorsque vous le ferez tant que personne réelle, plutôt que de simplement dire « vos utilisateurs » ou «  nos utilisateurs » ou quoi que ce soit d'autre. Comme je l'ai dit, vous allez vous concentrer sur ce personnage et le concevoir spécifiquement pour ce personnage afin de rendre votre design fonctionnel et de le faire fonctionner pour cette personnalité, votre base d'utilisateurs dès le début de votre projet. Mais comment faites-vous vos recherches sur les utilisateurs ? C'est ce que nous allons aborder dans la prochaine leçon, à savoir où se concentrer et à quoi faire attention. 29. Types de méthodes de recherche: Il existe de nombreuses méthodes de recherche que vous pouvez utiliser pour votre projet. Et la façon dont vous pouvez savoir lequel utiliser dépend de la taille de votre projet. Si le projet est plus petit, il est évident que nous n' utiliserons pas les types utilisés par Google, Microsoft ou Apple, par exemple . Mais vous allez établir votre type de recherche sur les utilisateurs en fonction de la taille de votre public et de la taille de votre projet. Parce qu'à mon avis, il est toujours préférable de commencer modestement et de s'adapter au fur et à mesure que l'entreprise grandit, que les objectifs augmentent, que la base d'utilisateurs augmente. Ensuite, si vous commencez juste par un grand n, si vous vous concentrez simplement sur cet énorme public et que vous essayez ensuite de le réduire un peu. Ensuite, vous avez besoin d'objectifs. Vous avez besoin d'un objectif précis et d'un certain objectif de la part de votre client sur lequel vous pouvez vous concentrer, sur lequel concentrer vos recherches. Vous ne pouvez donc pas concevoir pour tout le monde, je pense que nous l'avons mentionné dans les leçons précédentes. Par conséquent, vous avez besoin de votre personnalité d'utilisateur et de la même histoire pour la recherche sur les utilisateurs. Vous devez comprendre quel est l'objectif. Qu'est-ce que tu essaies de résoudre ? Quel est l'objectif de ce projet ? Quels sont les points faibles ? Quelles sont peut-être les faiblesses du marché que vous essayez d' explorer avec ce produit. Par conséquent, vous devez comprendre pour qui vous concevez et quels sont vos objectifs. Parce que si les objectifs sont les mêmes, vendons autant de ces produits que possible. Ce n'est pas un objectif réaliste. Ce n'est pas un bon objectif. L'objectif ici devrait être quelque chose comme essayons de le faire, je ne sais pas si vous vous concentrez sur, disons, une industrie automobile. Essayons de vendre ces pneus, qui dureront par exemple six mois de plus que ceux de la concurrence. Et ils offriront une bien meilleure adhérence que la concurrence. Et vendons-le à, disons, aux familles des quartiers ou des villes du centre-ville. Voici donc quelques objectifs réalistes que vous pouvez réellement atteindre au lieu de vendre des millions de ces pneus, mais à qui et comment vous allez les atteindre. Par conséquent, vous devez définir vos objectifs. Ensuite, après avoir défini vos objectifs, vous pouvez élaborer une stratégie quant au type de recherche sur les utilisateurs que vous allez également aborder. Parce que, comme je l'ai dit, lorsque vous commencez modestement, vous n'avez pas besoin de tester, disons, 200 utilisateurs, car vous pouvez simplement tester cinq utilisateurs sans gaspiller vos ressources de recherche, sans perdre votre temps à gaspillez votre argent là-dedans pour leur faire perdre leur temps et leur argent en faisant ces recherches inutiles, vous pouvez concentrer vos efforts de recherche sur, par exemple cinq à dix personnes. Et à partir de ces groupes, vous pouvez déterminer qui est votre public cible et qui est votre personnalité d'utilisateur. Dans la prochaine leçon, nous allons parler de différents types de méthodes de recherche sur les utilisateurs. Et lequel pouvez-vous choisir pour votre projet en fonction de vos objectifs ? Comme je l'ai dit. 30. Qualitatif VS: Lorsque vous commencez le projet, vous devez savoir sur quoi vous concentrer, comme je l'ai mentionné dans les leçons précédentes, mais vous devez également savoir quel type de recherche utilisateur vous devez choisir. Et il y en a de nombreuses différentes dans cette leçon, je vais juste en nommer quelques-unes. Et comme ce cours est assez court, vous pouvez concentrer vos efforts plus tard lorsque vous déterminerez celui qui vous convient le mieux, puis vous pourrez le distiller et explorer d' autres itinéraires possibles vos recherches spécifiques sur les utilisateurs. Mais en gros, vous pouvez diviser vos méthodes de recherche sur les utilisateurs en méthodes qualitatives et quantitatives. Le qualitatif est en fait quelque chose que vous pouvez synthétiser en chiffres réels, en données réelles. Alors que le quantitatif consiste en fait à obtenir le plus de données possible. quantitatif peut être quelque chose comme des enquêtes auprès des utilisateurs ou des questionnaires en ligne, lesquels vous pouvez obtenir autant de contributions utilisateur différentes que possible. Ensuite, vous pouvez utiliser méthodes de recherche qualitative pour concentrer ce chiffre vers le bas, pour le distiller afin de comprendre réellement ce que signifient tous ces chiffres. Par exemple, si vous avez milliers d'utilisateurs du monde entier, ce sont des données quantitatives parce que vous avez de la quantité, alors vous allez distiller ces utilisateurs en utilisant des données qualitatives pour obtenir en fait le résultat que vous recherchez, par exemple dans quel pays se trouvent ces utilisateurs ? Et puis plus bas, quelle ville sont-ils situés ? Si vous le pouvez, vous pouvez comprendre leur âge et type d'appareil qu'ils utilisent. Vous pouvez comprendre le type de navigateur, par exemple , lorsque vous avez toutes ces données, ces données qualitatives, et c'est-à-dire en gros, vous pouvez séparer par quantité et qualité. Par conséquent, les noms en question sont également de deux autres types, à savoir sont attitudinaux et comportementaux. concerne l'attitude, il s'agit essentiellement l'attitude et du comportement de vos utilisateurs. Donc, en gros, ce qu'ils disent est attitudinal. Comportemental, c'est la façon dont ils se comportent. Et pour les deux, vous pouvez utiliser différents types de méthodes de recherche, par exemple pour Attitudinal, comme je l'ai dit précédemment, vous pouvez utiliser des questionnaires, vous pouvez utiliser des forums en ligne. Vous pouvez utiliser quelque chose comme Typekit pour créer un formulaire simple. Vous pouvez le mettre sur un site Web existant ou l'envoyer par e-mail aux utilisateurs et vous pouvez ensuite voir ce qu'ils disent. Et cela peut être une méthode de recherche quantitative sur les utilisateurs car vous allez accumuler la quantité d' informations avant de les mettre en qualité. Et puis le comportement est quelque chose de vraiment différent. C'est pour les étapes ultérieures de vos recherches, par exemple lorsque vous avez déjà réalisé un prototype, vous pouvez le placer dans la même pièce que vous. Ensuite, vous pouvez effectuer les tests de qualité, par exemple, il s'agit de la méthode comportementale, car vous allez voir comment vos utilisateurs vont se comporter une fois dans la pièce. Tu n'es pas obligée de faire ça. Vous pouvez utiliser du maïs, par exemple, que j'utilise. Et je vais relier toutes ces ressources que j'ai mentionnées dans le PDF de ce cours. Assurez-vous donc de les consulter, de les consulter, de cliquer et de voir tous ces sites Web par vous-même et les explorer un peu plus loin. Vous pouvez également utiliser ce que l'on appelle des cartes thermiques. Les cartes thermiques nécessitent un certain ensemble d'appareils à placer sur votre tête. Mais il existe également des logiciels et les cartes thermiques sont essentiellement ce que leur nom indique où les utilisateurs regardent, c'est quoi, où la carte sera la plus chaude, où ils regardent sur la liste se trouve l'endroit où la carte sera appelée, par exemple, pour que vous puissiez savoir où concentrer vos efforts de conception car vos utilisateurs se penchent principalement sur ceci plutôt que sur cela. Ainsi, vous pouvez concentrer vos messages importants, par exemple sur votre page, sur la partie spécifique de la page que les utilisateurs consultent le plus. Donc, si vous pensez que la taxe devrait être mieux lotie, mais qu'aucun de vos utilisateurs ne cherche dans cette direction. Essayez ensuite de voir où ils regardent. Par exemple, s'ils regardent dans cette direction, mettez peut-être le texte ose. Si le texte est la partie la plus importante de cette section de votre page, par exemple, pour des raisons comportementales. Vous pouvez suivre le comportement de vos utilisateurs en temps réel. Donc, encore une fois, en fonction votre méthode de recherche, de vos objectifs, ce que vous essayez d' accomplir avec vos recherches. Veillez à utiliser d'abord des données quantitatives afin de pouvoir accumuler les données de vos utilisateurs. Ensuite, essayez d'utiliser des données qualitatives pour obtenir des chiffres réels avec lesquels vous pouvez travailler et les présenter à vos clients, par exemple afin de leur montrer les résultats de la recherche que vous avez trouvés, puis vous pouvez utiliser ces résultats de recherche plus tard dans votre conception. N'oubliez pas non plus les attitudes. Alors, quelle est leur attitude, comment disent-ils qu'ils vont réagir ? Et puis comportementale, comment ils réagissent réellement lorsque vous leur présentez un test, un prototype, design avec un site Web, et que vous leur demandez de le tester en temps réel, soit devant de vous ou en ligne. Dans la vidéo suivante, nous allons parler du choix de vos participants. Si vous n' avez pas de participants et si vous avez déjà un public, quelle est la différence et comment choisir entre les deux ? Alors je t'y verrai. 31. Choisir vos participants: Le choix de vos participants est un élément crucial de votre recherche sur les utilisateurs, car si vous choisissez les mauvais participants, les résultats de votre recherche ne seront pas valables. Par conséquent, vos recherches sont vraiment inutiles et vous avez fait perdre votre temps, celui tout le monde et de l'argent à vos clients, car dans la plupart des cas, vous devez payer pour n'importe quel type d'utilisateur. les recherches que vous effectuez. Il est donc très important de choisir les bons participants pour le type de recherche que vous allez faire et de choisir le bon nombre de participants pour cette recherche spécifique. Comment choisir les participants ? Eh bien, il existe vraiment deux types différents que vous pouvez choisir parmi le public existant. C'est le cas si vos clients ont un site Web, une application, une liste d'e-mails. Et vous pouvez vraiment atteindre ces clients potentiels , les clients. Et vous pouvez vraiment leur demander leur avis et leur demander de leur temps. Et puis vous pouvez vraiment mener cette recherche sur les utilisateurs cette façon, car vous avez déjà cette audience existante. L'autre façon de le faire est avec des personnes inexistantes. C'est le cas si l'entreprise de votre client ne fait que démarrer. Ensuite, il faut trouver ces participants pour participer et comment s'y prendre ? Eh bien, encore une fois, deux méthodes différentes pour cela. C'est avec les gens en personne. Vous pouvez donc vraiment rencontrer différentes personnes face à face et vous pouvez tester votre endettement de manière ou en ligne. Et vous allez choisir l'un ou l' autre en fonction d'une chose simple. Votre client est-il local et son public sera-t-il local ? Par conséquent, vous allez probablement choisir en personne. Vous pouvez également choisir en ligne mais en fonction de votre pays, de votre région et de votre ville, par exemple , si l'audience de votre client doit être mondiale, la meilleure méthode consiste donc à choisir ces personnes en ligne. Je vais laisser quelques liens, le PDF vers ce cours, où vous pouvez cliquer sur ces différents sites Web où vous pouvez trouver différents publics pour faire vos recherches et vos tests. Et ces sites Web vont évidemment vous le facturer. Il est donc très important si vous voulez travailler en indépendant intégrer à la facture de votre client. Vous pouvez séparer ce formulaire de votre service, par exemple , prendre en compte l' ensemble du processus de conception comme un seul frais, puis facturer ce montant, le coût distinct. Ou vous pouvez tout prendre en compte dès le départ. C'est peut-être la meilleure façon d'aborder. La partie UX de votre projet peut être facturée séparément , puis la partie interface utilisateur et peut-être la partie développement plus tard séparément car vous disposez déjà de toutes ces informations provenant de votre partie UX. Et puis, lorsque vous passez à la partie interface utilisateur et à la création même de votre design, il est peut-être préférable de la facturer séparément. Je vous dis simplement cela parce que, souvent, vous devez obtenir des recherches sur les utilisateurs qui ne sont pas vraiment convaincantes. Cela signifie que vous posez peut-être les mauvaises questions. Peut-être que vous n'avez pas recruté le bon nombre de personnes et que tout ce client chercheur devra payer. Parfois, si votre session dure par exemple 30 minutes, vous devrez payer pour que les gens s'assoient pendant 30 minutes et écoutent vos questions, ou pour remplir le questionnaire, ou pour tester votre prototype, ou pour tester votre hypothèse. Donc quoi que ce soit, tu vas devoir payer ces gens. Il est donc très important de comprendre dès le départ que vous devez créer votre client pour ce service spécifique. Vous pouvez également fixer le prix de votre projet complètement séparément. conception de l'interface utilisateur et la livraison se feront donc en une seule charge. Et la conception de l'expérience utilisateur sera distincte, en particulier avec ces méthodes utilisateur, ces approches utilisateur et d'autres choses de ce genre. Avec de vraies personnes, c'est beaucoup plus facile parce que vous allez vous asseoir avec elles. Vous allez préparer votre liste de questions dès le départ. Nous allons leur poser ces questions et parfois, si vous les payez pour 30 minutes, vous constaterez souvent que votre conversation durera 15 minutes pour tous , vous pouvez donc les payer la moitié du prix et des trucs comme ça. Mais encore une fois, il est très important de prendre compte cette dépense dans les dépenses de votre projet. Parce que souvent, cela peut coûter très cher. Ces personnes, comme vous allez le voir sur ces sites Web que je vais relier dans le PDF, factureront entre 20 dollars de ces sites Web que je vais relier dans le PDF, factureront entre 20 dollars de l'heure et 200 dollars de l'heure, selon l' utilisateur méthode de recherche que vous allez effectuer sur ces utilisateurs. Et selon, si vous avez par exemple cinq utilisateurs, cela fait 20 utilisateurs. Vous pouvez clairement voir que ces dépenses vont être considérables. Mais c'est complètement différent pour vos utilisateurs existants, car vous pouvez vous adresser vos utilisateurs existants et leur offrir une sorte de réduction soit sur des fonctionnalités ou des produits existants, vos utilisateurs existants, car vous pouvez vous adresser à vos utilisateurs existants et leur offrir une sorte de réduction soit sur des fonctionnalités ou des produits existants, soit fonctionnalité future ou futur produit que votre client lancera ultérieurement. Mais soyez très prudent avec vos utilisateurs actuels, car il y a souvent un biais, car la plupart d'entre eux aiment peut-être déjà le produit qu'ils utilisent. Ils seront donc très biaisés dans les réponses qu'ils vont donner à vos recherches. Assurez-vous donc de prendre en compte tout cela et consulter le PDF que je vais fournir, comme je l'ai dit, pour cliquer sur tous ces liens vers les sites Web où vous pouvez les trouver de consulter le PDF que je vais fournir, comme je l'ai dit, pour cliquer sur tous ces liens vers les sites Web où vous pouvez les trouver des testeurs de recherche utilisateur qui vont venir à votre secours pour vous aider dans votre projet. En gros, où que vous soyez dans une rangée, assurez-vous simplement de prendre en compte les dépenses liées à ce projet en particulier. 32. Visualiser vos données: Lorsque vous avez des informations sur vos recherches, cela devient souvent très chaotique, car imaginons que vous ayez dix questions à poser à chacun de vos participants. Supposons que vous réalisiez une enquête auprès des utilisateurs. Vous aurez dix questions, vous aurez dix participants différents. Vous allez donc obtenir 100 réponses différentes. Alors, comment factoriser tout cela n ? Eh bien, il existe différents modèles en ligne que vous pouvez trouver gratuitement et ils sont utilisés majeure partie du secteur où, par exemple dans une feuille de calcul Excel ou Google Sheets, vous pouvez inclure ce modèle que vous obtenez et il calculera vos réponses en fonction ce que diront vos utilisateurs . Ou si vous utilisez méthodes quantitatives, par exemple vous créez une page de destination et que vous souhaitez connaître le nombre de clics que vous allez obtenir. Il est préférable d'utiliser Google Analytics car la quantité d'informations que vous obtenez de Google Analytics est tout simplement énorme. Vous devez donc comprendre et organiser les choses d' une manière ou d'une autre afin de pouvoir les prendre en compte, disons, une semaine ou deux semaines ou un laps de temps, selon la façon dont vous allez faire des tests longtemps. Par conséquent, vous pourrez prendre en compte toutes ces informations ultérieurement. À la fin de la journée, lorsque vous le ferez, vous deviendrez votre personnalité d'utilisateur. Nous y reviendrons dans la prochaine leçon, nous allons en fait vous donner un modèle que vous pourrez remplir. Et je vais vous expliquer un peu plus en détail les différentes informations que vous pouvez mettre dans ce modèle. Mais il est très important de visualiser vos données et, enfin, présenter à votre client avant de passer au processus de conception. Parce que souvent, vos clients auront des commentaires un peu différents des vôtres. Il est donc très important de leur montrer les données et, par exemple de combattre tout ce qu'ils ont à dire. Si c'est un peu différent parce qu'ils voulaient croire que c'était différent, mais les données réelles montrent que c'est différent. Il est donc très important de leur montrer ces données, visualiser afin qu' ils puissent les comprendre plus facilement. Donc, par exemple, si vous utilisez XD Figma ou Photoshop, quel que soit le logiciel, assurez-vous de créer un modèle lequel vous pourrez présenter ces données à l'aide d'icônes, par exemple en utilisant différentes images afin qu'elles puissent comprenez facilement les données que vous allez obtenir, car les données que vous allez obtenir ne sont généralement que du texte. Et le texte est vraiment difficile à comprendre pour les gens. La visualisation de ces données sera donc beaucoup plus facile à comprendre et à approuver pour vos clients , ce qui vous permettra de poursuivre le processus de conception. Comme je l'ai dit dans la leçon suivante, je vais vous proposer un modèle XD, que vous pourrez utiliser et visualiser vos données une fois que vous les aurez obtenues et saisies dans la personnalité de l'utilisateur. Alors je t'y verrai. 33. Créer votre utilisateur Persona: Dans cette leçon, je vais vous proposer un modèle Adobe XD pour la création de personnages utilisateur. Et vous pouvez utiliser ce modèle pour tous vos futurs travaux. Et je vais également partager avec vous différentes sections que vous pouvez utiliser pour ce modèle et les futurs modèles que vous allez créer. Commençons donc. Me voici donc dans Adobe XD et comme je l'ai dit, vous allez obtenir ce modèle. N'oubliez pas de le consulter dans les ressources du cours. Et lorsque vous cliquez ici, qui indique Bibliothèques, vous verrez toutes les différentes couleurs utilisées, que vous pouvez évidemment modifier. Vous pouvez simplement cliquer avec le bouton droit de la souris, appuyer sur Modifier et choisir la couleur de votre choix. Comme vous pouvez le voir, il va être mis à jour. Assurez-vous simplement car nous avons ce dégradé. Si vous voulez choisir cette couleur, par exemple pour cliquer avec le bouton droit de la souris et copier ici où il est écrit « dégradé, appuyez sur Modifier », puis cliquez en haut car ce sont les éléments jaunes. Appuyez sur Contrôle ou Commande V pour le coller. Et tu auras exactement la même couleur que moi ici. Ou vous pouvez simplement le tester ici et vous pouvez voir qu'il sera mis à jour ici. n'est donc qu'un conseil sur la couleur. Il en va de même pour les styles de personnages. Voici Poppins. Vous pouvez utiliser tous les styles de caractères que vous souhaitez. Je n'ai volontairement utilisé aucune icône pour les choses soient vraiment simples et concises. Vous pouvez donc utiliser différents types de composants. Vous pouvez utiliser différentes vidéos si vous souhaitez présenter votre identité d'utilisateur comme une personne réelle Vous pouvez l'imprimer en l' enregistrant simplement au format PDF. Vous pouvez appeler ici, appuyer sur Contrôle ou Commande E ici. Ensuite, vous pouvez simplement utiliser un PDF, par exemple vous pouvez l'exporter, vous pouvez l'exporter sous forme d'image pour l'imprimer. Vous pouvez également l'exporter au format PDF ou image et partager avec vos clients en ligne pour une meilleure compréhension. Mais encore une fois, terminons tout cela. Il est très important d' avoir votre personnalité d'utilisateur pour comprendre pour quoi vous concevez. Il est très important de partager ces informations au sein de l'équipe. Vous travaillez peut-être dans. Votre client, les parties prenantes, l'équipe marketing, développeurs, tous les autres designers, tous les membres de l' équipe le savent. Il s'agit, dans ce cas, de Marcus Morris, par exemple, il s'agit donc de notre personnalité d'utilisateur. Donc, la façon dont tout est structuré dépend de la section. Et vous pouvez modifier toutes ces sections. Vous pouvez les voir ici. Lorsque je clique sur le panneau Calques, vous avez votre image utilisateur, qui est celle dont parle cette section supérieure. Ensuite, il y a les besoins, les frustrations, les réseaux sociaux et, enfin, les marques préférées. Donc, à propos de la section, c'est qui est réellement cet utilisateur ? Et de quoi ils parlent. Vous allez le comprendre une fois de plus grâce à vos recherches sur les utilisateurs. Utilisons donc les utilisateurs existants. Par exemple, si vous utilisez, disons, Google Analytics, vous comprendrez que la majorité de vos utilisateurs sont, disons, des hommes, dans ce cas, ils viennent de Londres, ROYAUME-UNI. Vous allez donc lui donner un nom, disons des marqueurs. Et il adore les promenades avec cette fille et cette femme de deux ans qui se soucient profondément de votre environnement et du meilleur avenir pour sa fille. Vous allez le comprendre grâce à votre carburant, à de nouvelles recherches. Vous n'allez donc pas simplement utiliser Google Analytics dans ce cas, vous allez réellement contacter ces personnes potentielles en fonction de votre Google Analytics. Vous allez noter l'âge car vous pouvez voir la tranche d'âge ici. Et vous allez connaître l'emplacement ici même. Par conséquent, vous pouvez encore modifier qui est votre tube de ciblage. Vous pouvez ainsi contacter ces personnes potentielles et comprendre de quoi elles parlent. Cette personne a donc dit qu'elle avait une fille, par exemple une femme. Il se soucie profondément de l'environnement. Il est passionné par toutes ces choses. Vous allez donc le mettre dans À propos de l'occupation de la section. Ils vont dire quels sont leurs revenus. S'ils ne vous indiquent pas le revenu, vous pouvez facilement le déterminer grâce aux recherches que vous pouvez effectuer en ligne, car il existe de nombreux chercheurs différents pour chaque pays du monde. Vous pouvez donc y placer le revenu directement à partir du revenu, ce qui est encore une fois très important. S'ils vous le disent, sinon, vous pouvez le découvrir vous-même en faisant des recherches en ligne à partir des revenus, vous pourrez comprendre combien cet utilisateur peut réellement dépenser sur mon site Web. Donc, si ce n'est pas le bon utilisateur pour moi parce que ses revenus sont trop faibles, peut-être en ciblant le mauvais utilisateur à cause de mes produits pour des services ou trop chers pour cet utilisateur en particulier. Vous pouvez donc comprendre pourquoi cette recherche est vraiment importante. Encore une fois, vous pouvez comprendre cela en effectuant n'importe quel type de recherche sur les utilisateurs que nous venons de mentionner précédemment. Vous pouvez trier les cartes, par exemple, vous pouvez remplir vos questionnaires, vous pouvez créer vos journaux d' utilisateurs, par exemple, où les utilisateurs vous disent quelque chose à leur sujet chaque jour. Et vous pouvez faire quelque chose comme des enquêtes, par exemple où vous pouvez découvrir qui sont réellement ces personnes, puis vous pouvez les contacter et leur poser ces questions spécifiques ou toute autre question qui devez le savoir en fonction de vos objectifs. Encore une fois, c'est très important. Une fois que vous en avez besoin, vous pouvez comprendre leurs besoins, car vous pouvez leur demander quelles sont leurs frustrations, quels sont leurs besoins. De quoi ont-ils réellement besoin d'un tel produit ? Par conséquent, en fonction des réponses que vous allez obtenir, vous pouvez les filtrer dans cette section spécifique. Dans ce cas, comme j'ai choisi une marque de carte tout droit sortie de nulle part, c'est le meilleur moyen de rechercher une voiture d'occasion en ligne. Permettez-moi de le réduire et de zoomer un peu pour que vous puissiez le voir un peu mieux. C'est donc une meilleure façon de rechercher une voiture d'occasion en ligne. Cette personne veut trouver une voiture d'occasion en ligne, mais elle est simplement confondue avec toutes ces différentes offres. Un moyen plus facile de comprendre la voiture qu'il regarde. Donc, la plupart du temps, vous verrez toutes sortes d'informations différentes sur ces sites Web automobiles et simplement une sorte de code que les professionnels de l' industrie automobile comprennent. Mais les personnes extérieures à l' industrie automobile ne savent pas vraiment ce qu'elles recherchent. Ils ont donc besoin d'un moyen plus simple de comprendre ce qu'ils regardent. Approche facile pour se renseigner sur le véhicule. Dans de nombreux cas, il ne s'agit donc que d'un formulaire de courrier électronique. Peut-être que je veux un numéro de téléphone direct, peut-être que je veux utiliser WhatsApp, Messenger ou Y-bar ou autre chose que vous utilisez. Des frustrations, des sites Web trop fréquentés et confus, ce qui est la majorité des cas. Encore une fois, en ce qui concerne la surcharge d'informations utilisée par l'industrie. Les sites Web ne sont pas adaptés aux mobiles. Dans la majorité des cas, vos utilisateurs utiliseront des appareils mobiles de nos jours. Donc, si le site Web n'est pas adapté aux mobiles, c'est un gros drapeau rouge. Dissipateur thermique, une publication sans prix. Ils veulent donc de la transparence. Ils veulent comprendre quel que soit courant qu'ils étudient. Combien ça coûte ? Ils veulent donc voir la transparence. Cela les attirera davantage vers cette annonce et les achètera peut-être plus tôt. habitudes sur les réseaux sociaux. Donc Facebook, Twitter, Instagram, LinkedIn. Pourquoi est-ce important pour vos efforts de marketing ? Plus tard ? Et marques préférées, vous voulez voir qui sont les marques préférées. Parce que parmi ces marques préférées, vous pourrez peut-être choisir un indice de style plus tard pour votre design. Disons que si vous voyez un motif, par exemple grandes images et du texte net, du noir sur blanc ou des dégradés ou des images de personnes que vous aimez vraiment , cela les attire à nouveau vers ces sites Web. Dan, tu peux peut-être leur rendre visite et inspirer de ton design ou de ta refonte spécifique, peu importe ce que tu essaies de faire. Dans ce cas, je viens tomber sur un tas de ces différents logos, mais vos utilisateurs vont en fait vous proposer un ensemble spécifique de marques. Assurez-vous de les noter et de les mettre ici pour vous inspirer. Enfin, nous avons quelque chose comme une citation. Vous pouvez choisir cette citation et demander à vos utilisateurs s' ils ont une citation préférée. Si ce n'est pas le cas, vous pouvez simplement trouver quelque chose en ligne à mettre ici. Enfin, ce que je voulais vous montrer, c'est que nous avons un dégradé d'image, je vais le masquer. Nous avons une image que je veux faire glisser et déposer rétablir le dégradé. Et maintenant, lorsque vous mettez un visage au-dessus de votre personnalité d'utilisateur, cela lui donne réellement cette personnalité. Cela vous montre en fait la personne laquelle vous essayez de concevoir ce site Web pour certains. Une dernière chose que je voudrais ajouter ici est que ce ne sont que les sections relatives ce modèle de personnalité utilisateur spécifique. Vous pouvez ajouter un tas de sections différentes, encore une fois, en fonction de vos objectifs, en fonction de vos recherches ici. Donc, par exemple, vous souhaitez peut-être ajouter des balises spécifiques mentionnées par vos utilisateurs. Peut-être leurs sentiments, peut-être qu'ils sont tristes, peut-être qu'ils se sentent heureux. Vous allez donc connaître les couleurs que vous allez utiliser. Vous allez connaître le rythme, vous allez utiliser la topographie, la mise en page en fonction de tout ce que vos utilisateurs vont vous dire dans vos recherches. Vous allez mettre cela dans votre personnage et vous allez toujours vous référer à ce personnage pour vous le rappeler et pour le rappeler à votre équipe. Si quelqu'un veut utiliser, disons, une couleur noire et que ce sont des sites Web un peu rosés, cela ne fonctionnera pas très bien. Vous allez toujours vous référer au modèle de personnage pour mieux comprendre et pour mieux comprendre et vous rappeler, à vous et à votre équipe, pour qui vous concevez ? Voici donc ce modèle de personnalité utilisateur. Assurez-vous de le consulter, de le télécharger, de l'utiliser. Assurez-vous de remplacer toutes les sections qui, selon vous, ne correspondent pas nécessairement à vos recherches spécifiques. Comme je l'ai dit, vous pouvez simplement revenir ici et je vais y retourner tout de suite. Si vous le souhaitez, vous pouvez rendre cette image beaucoup plus petite que vous ne le pouvez, par exemple positionner cette section de manière à ce qu'elle soit juste ici. Vous pouvez jouer avec ce que vous voulez avec ce modèle qui vous est offert gratuitement. Assurez-vous donc de l' explorer et de créer votre personnalité d'utilisateur idéale. 34. Modèle Persona Figma: Permettez-moi de vous montrer comment utiliser un modèle de personnage auquel ressemble Figma. Quelles sont les différences entre le fichier Figma et le fichier Adobe XD et comment vous pouvez l'utiliser et le réutiliser dans vos propres projets. Nous voici donc à Figma, et vous pouvez voir que le design est exactement le même. Et c'est là tout l'intérêt, car je ne voulais pas qu'il y ait de différences entre les fichiers Figma et XD, car en tant que concepteur, vous serez en mesure de choisir l'outil avec lequel vous allez travailler. Comme je ne cesse de le mentionner tout au long de ce cours, Figma va prendre le relais car Adobe a racheté Figma. Cela va se produire à un moment donné. Mais avant que cela n'arrive, assurez-vous d'utiliser XD si vous êtes moi-même à l'aise avec Eggs Deep Black. Par exemple, j'aime beaucoup XD plus que Figma. Mais Figma va lentement se transformer en produits Adobe au fil du temps. Il aura donc exactement les mêmes fonctionnalités que d' autres outils Adobe, tels que la superposition, par exemple les aéroports, etc. Seul le temps dira à quoi ressemblera Figma plus tard. Mais le but de cet exercice est de vous montrer que si vous ouvrez un modèle XD, si vous ouvrez un modèle Figma, comparez les deux. C'est pourquoi ils sont exactement identiques. y a pas vraiment de différence là-dedans. Et les outils eux-mêmes vous seront extrêmement familiers à utiliser. Si vous avez déjà utilisé XD ou Figma vous passez d'un outil à l'autre. Donc, si nous regardons cela, vous pouvez voir à quoi cela ressemble. Ce ne sont donc que des groupes ici. Si je passe aux actifs, nous n'aurons aucun composant parce que je ne voulais pas créer de composants à dessein. Vos marques préférées seront vos marques préférées et non ces marques ici. Alors pourquoi les avoir en tant qu' icônes distinctes sont des actifs distincts ici. Ensuite, l'image elle-même sera un peu différente quant à la façon dont vous allez ajouter une image. Parce que lorsque vous sélectionnez une image où il est écrit gris clair, vous allez faire glisser votre image à l'intérieur de cette image où il est écrit gris clair. suffit de le faire glisser ici et de le relâcher. Et il va remplir cette section avec cette image particulière. Le dégradé de l'image va rester là où il est. vous suffit de joindre l'image et Il vous suffit de joindre l'image et de la glisser-déposer sur l'image elle-même, comme vous le faites dans Adobe XD, mais vous la faites glisser jusqu'à un endroit où elle apparaît en gris clair, penchez dessus puis vous lâchez prise. Et il va remplir cette section avec votre image. C'est donc super simple. Donc, ne le relâchez pas ici, faites-le glisser, puis relâchez-le ici. Mais il est indiqué qu'il est gris clair en termes de couleurs, comme je l'ai mentionné dans la brève vidéo de conception. Par exemple , lorsque vous cliquez ici, vous pourrez voir les couleurs de votre document. Ou si vous cliquez en dehors de tout, vous verrez des textiles ici, vous verrez des styles de couleurs. Et ici, nous avons un dégradé, qui ne concerne que cette partie du dégradé d' image. Bien sûr, vous pouvez le modifier ici, donc si vous ne l'aimez pas, vous pouvez cliquer dessus. Laisse-moi te trouver pour que tu puisses le voir un peu mieux. Voici donc le dégradé. Vous avez l'icône Paramètres sur laquelle vous pouvez cliquer, et voici votre dégradé. Donc, ici, vous pouvez le choisir en linéaire. Vous pouvez jouer avec différentes couleurs, différentes orientations. Vous pouvez coller votre code hexadécimal ici. Vous pouvez configurer votre obésité. Ensuite, ici, vous pouvez jouer avec le positionnement. Vous pouvez ajouter différents arrêts, différents flous et ainsi de suite. Et je viens de l'appeler dégradé, mais vous pouvez le renommer comme vous le souhaitez. Vous pouvez simplement cliquer ici, renommer comme vous le souhaitez. Description à qui s' adresse, à qui s'adresse-t-elle ? Alors c'est peut-être pour la section des héros. Tu peux le mettre là. Donc, comprenez le point, puis vous pouvez ajouter des propriétés supplémentaires. Il ne comporte qu'un seul dégradé linéaire, mais si vous cliquez dessus, vous pouvez ajouter un dégradé linéaire supplémentaire , réduire légèrement l' opacité et simplement y explorer en termes de choix et de styles de police. Ici, vous pouvez voir que, par exemple si je sélectionne cette option ici, nous avons les couleurs d'accent pour ces points , puis nous avons une couleur presque noire pour le texte. Et si nous sélectionnons le texte lui-même, par exemple dans les besoins, nous avons la mise en page automatique, qui revient à accéder à ces piles dans Adobe XD. Donc, l'histoire sera exactement la même que dans Adobe XD. Vous venez de placer certains éléments dans un groupe. Ici, ils sont appelés mise en page automatique. Dans Adobe XD, on les appelle des piles. Vous allez définir le positionnement et la direction entre les éléments à l'intérieur de ce groupe. Donc, dans ce cas, la mise en page automatique va de haut en bas. Donc direction verticale. Et il en a besoin d'un, besoin de trois groupes à l'intérieur. Une distance de huit pixels, juste ici. Donc, si je passe à 20 pixels, par exemple, vous pouvez voir à quoi cela va ressembler, car cela finira par espacer ce point et ce texte. Mais si je sélectionne les besoins en soi, donc toute la section, il y en a 17 ici. Donc, si j'augmentais ce chiffre à 40, par exemple, vous pouvez voir ce que cela fait. Il suffit donc de jouer avec ces exemples. Et si, à tout moment, vous souhaitez faire passer de la verticale à l'horizontale, vous pouvez simplement cliquer ici et vous vous pouvez simplement cliquer ici et vous pouvez voir ce que cela fait, c'est le ramener et l' adapter automatiquement en même temps. Ce sont donc certaines choses que je voulais mentionner ici. Si vous le souhaitez, vous pouvez remplacer rapidement ces couleurs, comme expliqué précédemment. Si vous le souhaitez, vous pouvez rapidement remplacer les polices qu'il contient. Vous pouvez remplacer le positionnement à l'intérieur, vous pouvez modifier l'ordre. Mais cette vidéo est juste pour vous faire savoir quelle est la différence entre un fichier XD et un fichier Figma ? Et comme vous pouvez le constater, il n'y a pas trop de différences. Ces outils sont fondamentalement identiques. Il s'agit simplement de la façon dont vous travaillez avec les images. Par exemple, cela va légèrement différer entre XD Figma, mais en fin de compte, c'est exactement la même chose. Vous allez le constater une fois que nous aurons abordé la section design de ce cours, car je vais passer en revue la conception dans XD, puis la conception complète dans Figma, juste pour vous montrer certaines différences dans votre façon de travailler. Si vous regardez ces deux sections, vous remarquerez que l'ensemble du processus est presque exactement le même et c'est là tout l' intérêt. Ne vous laissez pas limiter par l'outil. Vous devez connaître toutes ces choses qui ont été mentionnées dans le cours pour devenir un bien meilleur designer que vous ne l'êtes actuellement. Mais n'ayez pas l'air trop grand, limitez-vous. Je peux le créer dans Microsoft Paint si mes clients me le demandent, mais c'est beaucoup plus facile dans Figma ou XD, car ces outils ont été créés à l'origine pour effectuer un tel travail. 35. AFFECTATION DE LA SECTION 4: Votre mission pour cette section est d'utiliser le modèle que j'ai fourni et de le remplir avec vos propres informations. Vous pouvez imaginer votre personnalité d'utilisateur. Vous pouvez mettre une autre image. Vous pouvez changer les couleurs, vous pouvez changer la typographie, assurez-vous de changer les logos dans la dernière section du modèle juste pour vous l'approprier et entraîner à l'utiliser réellement. Puis, le moment venu. Ou si vous avez déjà des clients et que vous souhaitez créer un personnage utilisateur pour ce projet en particulier. Vous avez ce modèle ou vous pouvez explorer d'autres modèles gratuits que vous pouvez trouver en ligne. Mais maintenant, vous avez une idée de ce qu' est réellement la personnalité d' un utilisateur et pourquoi ces modèles sont utiles. 36. SECTION 5 Analyse compétitive: L'analyse concurrentielle est un élément extrêmement important du processus de conception, car vous voulez savoir qui vous êtes en concurrence ? Largeur. Vous voulez savoir qui est votre concurrent. Vous voulez voir ce qu'ils font de bien ce qu'ils font de mal afin d'éviter cela dès le départ avant même de commencer votre processus de conception. Vous souhaitez analyser différents détails de leur produit ou de leurs pages sur les écrans de leurs applications mobiles. Vous voulez comprendre quel type de langage ils utilisent sur leur site Web ou leur application. Et vous voulez comprendre un peu mieux ce que vous pouvez suivre et ce que vous pouvez apprendre d'eux. Pour ne pas faire les mêmes erreurs. Commençons donc. 37. Qu'est-ce qu'une analyse compétitive: L'analyse concurrentielle est une partie essentielle du processus de conception, car elle vous aide à analyser et à comprendre vos concurrents, voir ce qu'ils font et comment votre produit ou votre entreprise se positionne face à cette concurrence. Il est très utile de faire une analyse de la concurrence, en particulier au début du processus de conception, car vous pouvez clairement comprendre quels sont vos objectifs, quels sont vos cibles et quels sont vos faire de la compétition, qui est identique ou différent de ce que vous prévoyez de faire. Vous pouvez effectuer une analyse de la concurrence quel que soit le site Web de votre client qu'il possède un site Web ou non. Mais il est toujours recommandé de commencer dès le début du processus de conception par l'analyse de la concurrence afin de comprendre quels sont vos principaux objectifs et quels sont vos principaux objectifs. des cibles pour ce projet en particulier ? En effectuant une analyse concurrentielle, vous pouvez comprendre les forces et les faiblesses de vos concurrents et vous pouvez comprendre où vous devriez viser en tant que designer et quels problèmes devez-vous résoudre ? Vous pouvez également comprendre s'il existe une lacune sur le marché et votre produit ou service peut-il combler cette lacune ? En effectuant cette analyse concurrentielle, vous pouvez comprendre les avantages et les inconvénients de votre produit. Peut-être que votre offre n'est pas suffisamment convaincante. Vos concurrents proposent quelque chose plus convaincant à un meilleur prix, par exemple, et l'essentiel pour nous, designers, est de comprendre si vous devez réellement apporter des modifications de conception à ce design en particulier juste pour le plaisir ? Ou est-ce que votre concurrence vous demande réellement d'appliquer ces changements ? Ce que je veux dire par là, c'est qu'il ne faut pas simplement concevoir pour le design. Concevez dans le but d'être meilleur que vos concurrents dans une tâche ou un objectif particulier. Enfin, une analyse concurrentielle vous aide à résoudre les problèmes d' utilisabilité car vous pouvez comparer vos concurrents voir ce qu'ils font. Découvrez si votre produit est suffisamment utilisable pour vos utilisateurs sur différentes tailles d'écran, par exemple sur un ordinateur de bureau, une tablette ou un mobile. Votre produit s'adapte-t-il bien à toutes ces tailles, s' affiche-t-il bien, réussisse-t-il aux tests, par exemple à des fins d'optimisation ? Les images se chargent-elles rapidement si vous avez des animations quelle vitesse les animations s'exécutent-elles ? Vous pouvez faire toutes ces choses dès le début de votre processus de conception, simplement pour comprendre comment votre produit ou votre design se situe par rapport à vos concurrents. Dans la vidéo suivante, nous allons parler de différents types d'analyse de la concurrence. Alors je t'y verrai. 38. Types d'analyse compétitive: Il existe deux principaux types d'analyse concurrentielle. Et cela dépend de l'état d'avancement de votre processus de conception et de la position votre processus de conception et de la votre client dans son activité. Tu vas faire l'un ou l'autre. Soit vous allez effectuer une analyse complète dans laquelle vous allez prendre quelques-uns des principaux concurrents et quelques concurrents secondaires, puis vous allez simplement comparer l' ensemble de leurs solutions. Désormais, il peut s' agir de sites Web, d'applications mobiles ou de produits de conception numérique, par exemple, et vous allez comparer tous les aspects de tous ces concurrents. Ensuite, vous allez trouver une solution en fonction des objectifs de votre projet particulier Vous pouvez également effectuer une analyse future. Cela signifie, par exemple que vous pouvez analyser le menu sur notre site Web. Vous pouvez analyser la fonctionnalité de recherche d'un site Web. Vous pouvez analyser le défilement sur l'application. Et vous pouvez essentiellement créer une fonctionnalité requise pour votre processus de conception, analyser cette fonctionnalité auprès de vos concurrents et voir comment ils se situent. Au début, vous devez définir vos objectifs et définir votre produit. Vous devez être précis quant aux objectifs de votre produit ou de votre service en particulier. Et vous devez le définir et comprendre quel est votre public cible et qui essayez-vous de concurrencer ? Ensuite, vous devez compiler la liste des concurrents directs et indirects. Les concurrents directs sont les concurrents qui se situent exactement dans le même créneau que vous ou celui de votre client, ou les concurrents indirects n'ont pas le même créneau que votre créneau, alors vous devez dresser la liste d'entre eux et comprenez, par exemple pour une analyse complète, chaque chose, ce qu'ils font, comme je l'ai mentionné. Mais bien entendu, cela ne signifie pas que vous allez analyser, disons, 200 pages différentes, mais plutôt les pages principales de leur site Web et de leurs principales pages d'offres. Peut comprendre ce qu'ils proposent exactement et ce que vous pouvez apprendre d'eux. Pour votre entreprise en particulier, vous devez avoir un objectif clair, des objectifs en tête. Donc, par exemple, si votre objectif est de vendre plus que vous ne devez aborder cette analyse simplement en fonction de cet élément. Vous devez donc comprendre comment ils vendent leurs produits. Vous pouvez donc vous renseigner sur une ou deux informations sur votre site Web et votre processus particulier. Cela ne signifie pas que vous allez les copier mot par mot ou section par section. Mais comprenez simplement comment ils le font, pourquoi ils le font et que pouvez-vous apprendre d'eux ? Parce que c'est le processus d'apprentissage. C'est pourquoi cela se produit au tout début de votre processus de conception. L'un des éléments clés ici est d' identifier les facteurs de différenciation entre les produits. Cela signifie, par exemple si votre client et tous ses concurrents vendent des cartes, par exemple, disons quelle est la différence entre toutes ces cartes ? Est-ce le prix ? Est-ce la disposition des sièges ? Est-ce que ce sont les moteurs ? C'est l'impact environnemental. Qu'est-ce qui différencie ces concurrents de votre produit et en quoi votre produit peut être différent ou meilleur dans certains cas que le vôtre. Vous devez alors comprendre si cet objectif est suffisant ? Est-ce suffisant pour figurer sur un site Web comme fonctionnalité principale, par exemple comme argument de vente clé ? Vous devez comprendre tous ces éléments lorsque vous abordez l'analyse de la concurrence. En gros, ce que vous offrez, est-il meilleur ou moins cher que vos concurrents ? Et comment pouvez-vous emballer cela pour que l'utilisateur puisse mieux le comprendre et, espérons-le, en acheter davantage si tel est votre objectif principal ? Dans la vidéo suivante, je vais vous montrer comment effectuer une analyse complète. Et je vais vous montrer quelques étapes que vous pouvez suivre et comment aborder l'analyse complète. Alors je t'y verrai. 39. Comment faire une analyse complète: Dans cette vidéo, je vais vous montrer comment effectuer une analyse complète de vos concurrents et comment l'aborder ? Bien entendu, nous n'allons pas entrer dans trop de détails, mais je veux simplement que vous en compreniez l'essence même et les bases quant à la manière dont vous pouvez aborder cela avec vos clients. Commençons donc. Nous avons donc ici deux sites Web qui vendent essentiellement le même produit, savoir la voiture dans ce cas précis. Et j'ai choisi mes deux sites Web locaux. Donc, si vous voyez un Serbe ici et là, n'y prêtez pas attention. J'ai juste essayé de le convertir en anglais. Mais le but ici est de comprendre comment j'ai abordé cette question lorsque je travaille avec mes clients. J'ai donc essayé de comparer deux marques avec des prix vraiment similaires et des offres très similaires, car supposons que mon client se situe dans la même fourchette de prix que ces deux marques. Elle est positionnée sur le même marché que ces deux marques. Et ils proposent essentiellement la même palette de produits, disons, que ces deux marques. Alors, comment pouvons-nous positionner notre site Web rapport à cette concurrence simplement pour voir ce qu'ils font et ce que nous pouvons apprendre si nous effectuons une analyse complète de leurs sites Web ? Donc, en commençant par le haut, nous avons le menu et nous l' avons à nouveau. Mais ici, nous avons une approche plus conviviale car elle nous donne non seulement l'icône, mais aussi la recherche. Donc, si je clique sur Rechercher, je peux rapidement rechercher un modèle, puis appuyer sur OK ou sur Fermer, ce qui est une très bonne interface utilisateur. Ensuite, nous avons le logo ici, sur la droite. Sur ce site Web, nous n'avons que le menu. Lorsque je clique pour ouvrir le menu, nous avons toutes ces options, mais nous n'avons pas la fonction de recherche. Et je sais pertinemment que Qia propose de nombreux véhicules différents. Ils ont de nouveaux véhicules, ils ont des véhicules d'occasion. Une bonne fonction de recherche est donc vraiment nécessaire ici, mais comme vous pouvez le voir, elle n'existe pas vraiment. Ensuite, nous avons cette énorme image de bannière ici, car il s'agit du nouveau produit qu'ils proposent ici chez Citroën. Mais ici, ici, nous avons juste cet énorme curseur de section sur les héros. Et nous n'avons aucune option ici. Nous ne pouvons rien faire. Nous avons juste cet énorme curseur avec ces deux flèches. Mais si je me trouve à l'écran juste pour que vous puissiez voir lorsque vous faites défiler l'écran vers le bas, les informations sont réellement là. Donc, quand je clique ici, vous pouvez voir que nous avons des informations, des boutons, ils fonctionnent en survolant. Tout va bien, mais si vous êtes là, vous ne savez pas quoi faire. Et c'est vraiment une mauvaise expérience utilisateur à mon avis. Ensuite, nous avons ce nouvel avion S3, qui est ce véhicule parce qu' il est écrit ici. Donc, encore une fois, ce qu'ils proposent est très clair. nous avons ce bouton avec mon avis, nous avons ce bouton avec un effet de survol plus agréable, puis ce survol, nous avons simplement souligné les textes. Ce survol est donc beaucoup plus facile à voir, beaucoup plus agréable à regarder. Et cela fonctionne bien mieux que ce survol pour Qia. Si nous faisons défiler l'écran un peu vers le bas, nous avons notre gamme. Je peux donc cliquer ici et cela glisse vraiment. C'est donc un inconvénient, car si je fais défiler la page vers le bas, oui, je peux voir qu'il y a une pagination je peux cliquer dessus et cette information disparaît. Mais si je clique sur cette diapositive, il n'y a pas de bouton ici. C'est donc un gros inconvénient, car c' est l'un de leurs modèles les plus chers. Et vous allez vous attendre à ce que cela fonctionne très bien, mais cela ne fonctionne pas dans ce cas. De plus, il n'y a pas de flèches ici. Donc, si je clique ici, je vais accéder à cette page en particulier que je ne veux pas. J'ai juste envie de glisser entre les deux, mais il n'y a pas de flèches ni de touches ou est-ce mieux dans ce cas ? Peut-être qu'une combinaison des deux pour notre produit serait bien meilleure qu'une combinaison des deux lorsque vous les assemblez. À mon avis, si vous faites défiler l'écran un peu plus vers le bas, il y a une plage. Nous avons donc des véhicules de tourisme et nous pouvons même les démolir. Et nous avons des véhicules commerciaux, ce qui est génial. Nous disposons de véhicules professionnels. Et cela va me montrer ces véhicules essentiellement commerciaux, mais ils sont un peu plus petits pour les entreprises. Disons que si vous voulez acheter en gros, vous pouvez le faire avec ces voitures, mais restons-en aux véhicules de tourisme dans ce cas. Nous n'avons donc ici que ces deux-là. Et je sais pertinemment qu' il y en a bien d'autres. Mais comment y accéder ? Parce que c'est C3, C3b, alors que le C4, où se trouve le s5, alors que le C1, il n'y a aucune option me permettant de cliquer à gauche ou à droite, par exemple lorsque je touche un site Web, si je fais défiler la page vers le bas, n'y a pas de section comme celle-ci. Donc, si j'essaie de l'agrandir et de faire défiler la page vers le bas, vous pouvez voir qu'il n'y a pas de section comme celle-ci sur les sites Web de Qia. Permettez-moi donc de coller ceci ici et d'essayer de l'agrandir ainsi, afin de nous en tenir à ce que je vous ai montré précédemment. Donc, si je fais défiler la page un peu vers le bas, c'est une très grosse case à cocher pour moi, pour Citroën en l' occurrence, parce que. Ils vous montrent tout de suite leur modèle. Pendant ce temps, nous ne voyons ces modèles qui sont présentés ici. Et je sais pertinemment que ce véhicule, qui est électrique, n' est pas en vente pour le moment sur mon marché local en Serbie. Alors pourquoi le mettriez-vous ici si je ne peux pas l'acheter ? Donc, si je clique juste là, je recevrai toutes ces excellentes critiques. Il va me donner tous ces articles sur cette voiture, mais à quoi bon ne pas l'acheter ? Eh bien, sur le site de Citroën, ils sont très honnêtes dans ce cas. Donc, tous ces véhicules que vous voyez sur leur site Web peuvent être achetés aujourd'hui, ce qui est bien, à mon avis, sur le site Web ci-dessous que nous avons un conseiller. Nous pouvons en apprendre davantage sur ce conseiller. Nous avons des points de vente, ce qui est une fois de plus fantastique car je peux savoir où se trouvent mes revendeurs locaux , où se trouve le réseau de service, quelles sont les heures d'ouverture, etc. Ensuite, nous avons une sorte de blog ici, toutes les dernières nouvelles, nous avons la newsletter, et enfin nous avons une option photo et des informations sur les réseaux sociaux. Enfin, cela reste collant à tout moment. Donc, des listes de prix et des configurations, afin que je puisse immédiatement configurer mon véhicule neuf ou d'occasion. Nous avons une liste de prix, ce qui est fantastique parce que je veux juste voir un prix en un coup d'œil qui est toujours créé. Et enfin, nous avons nos services et notre gamme. Et nous avons cela qui nous ramène au sommet. Mais si nous comparons cela à la Kia, si je fais défiler la page ici, comme je l'ai dit, je trouverai un représentant. n'y a donc pas d'autre option que sur le site de Citroën pour les voir tout de suite. Je dois cliquer sur Page externe. Nous avons le test de conduite, qui signifie essentiellement un essai routier. Mais Google ne l'a pas très bien traduit dans ce cas. Je peux donc réserver un essai routier, ce qui est génial. Et je ne peux pas le faire ici sur les prix et les catalogues du site Citroën. Mais tout cela, je dois cliquer et sortir, ce que vous devez toujours faire avec Citroën également. Au moins dans leur cas, vous pouvez voir ces informations à tout moment. Enfin, nous avons un pied de page, qui est un gros pied de page, ne ressemble pas dans le cas de Citron. Alors laisse-moi me déplacer à nouveau, juste pour que tu puisses le voir. Nous avons donc ici des services et une gamme, alors qu'ici nous avons des véhicules neufs, véhicules d' occasion pour les entreprises, pour les propriétaires, des innovations concernant KIA, nous recrutons un peu perdu et tout ça. Donc, en fonction de ce que vous aimez et de l' approche que vous aimez, vous allez opter pour l'une ou l'autre. Mais à mon avis, juste entre les deux, je préférerais combiner les informations relatives à notre client fictif dans ce cas particulier. J'utiliserais donc les informations du site Web de Citron et j'utiliserais conception du site Web de Qia dans ce cas, pour aborder un peu une combinaison de toutes ces informations, je vais certainement mettre une recherche ici même sur le site Web principal. Absolument. Et je déplacerais ces informations vers le haut, je réduirais cette image un peu plus comme sur ce site Web. Parce que même sur des pages plus grandes, même sur des tailles encore plus grandes, comme dans ce cas précis, vous pouvez voir la quantité d' espace vide et gaspillé ici. Je comprends pendant qu' ils le font, mais à mon avis, vous n'êtes pas vraiment obligé de le faire. Vous pouvez simplement l'aborder comme le fait Citroën. Donnez simplement à vos utilisateurs la possibilité d'accéder à des pages externes pour en savoir plus sur certains produits, par exemple, mais dans ce cas particulier, j'aimerais vraiment la combinaison entre les deux sites Web. Dans la vidéo suivante, je vais vous montrer une comparaison des fonctionnalités. Et comment pouvez-vous aborder la comparaison des fonctionnalités à l'aide cet exemple que je viens de vous montrer pour ces deux sites Web, car il est beaucoup plus facile de s'en tenir à ces sites Web. Alors je t'y verrai. 40. Comment faire une analyse de fonctionnalités: Dans cette vidéo, nous allons faire une analyse des fonctionnalités et nous allons utiliser les deux mêmes exemples qui sont simplement montrés dans une vidéo précédente, mais plutôt que de nous concentrer sur l'ensemble du site Web et toutes les pages, la réactivité et d'autres choses de ce genre. Nous allons simplement nous concentrer sur une seule fonctionnalité et voir comment ces deux marques utilisent cette fonctionnalité unique, l' option de configuration de voiture sur leur site Web. Commençons donc. Nous avons ici ces deux sites Web que je vous ai montrés précédemment. Et comme je l'ai dit dans cette vidéo, nous allons nous concentrer sur une seule fonctionnalité , à savoir la configuration de votre voiture. C'est très important et, dans la plupart des cas, vous voulez que la voiture réponde exactement à vos spécifications. peut s'agir de la couleur des roues la garniture intérieure ou, disons, je ne sais pas, du dossier d'information à l'intérieur. Alors peut-être que vous voulez avoir cet écran plus grand. Vous souhaitez peut-être prolonger la garantie de sécurité ou tout ce que vous souhaitez C'est là que le configurateur de voiture est utile. Me voici sur ces différentes pages. Et à mon avis, Qia fait les choses non seulement mieux dans ce cas précis, mais Miles mieux. Ce que je veux dire par là, c'est que la citrulline est option beaucoup plus simple que celle d'une Kia à acheter immédiatement. Parce que si vous voulez acheter ce sutra et ce modèle, il s'agit d'un C3 dans ce cas, vous suffit de venir ici, il vous suffit de venir ici, de sélectionner votre option et de l'obtenir. C'est aussi simple que cela. Alors qu'avec Qia, c'est l'ensemble de ce processus qui lui donne ce look plus raffiné. Encore une fois , ils sont bons tous les deux. Si vous achetez en gros, Citroën est peut-être la meilleure option pour vous, car vous pouvez simplement parcourir, analyser le prix, comparer le prix, voir avec d'autres modèles celui qui vous convient le mieux. Comprenez ces forfaits et procédez simplement à votre achat avec la clé. Ou vous pouvez vous adonner un peu plus tous ces petits détails. Tout d'abord, il s'agit des pages, pages dédiées à ces deux modèles spécifiques. Nous pouvons donc voir ici des véhicules, nouveaux S3, et ici nous pouvons voir ce tonique. Voici donc deux pages pour ces modèles particuliers. Donc, tout d' abord, la page Citroën n' est pas très réactive car vous pouvez voir que je peux la parcourir ici et ici, nous avons quatre étapes différentes dans le processus d'achat. La première étape consiste essentiellement à déterminer le modèle et le riche pack d'options que vous souhaitez choisir. La prochaine étape consiste à réserver votre essai routier. prochaine consiste à laisser les informations et la suivante est la conformation, qui est la dernière, devrais-je dire, le numéro quatre dans ce cas précis. Et ils ont la possibilité de comparer les modèles ici. Ils ont la possibilité d'utiliser des filtres. Je peux donc utiliser cinq portes, je peux utiliser trois portes, la boîte de vitesses, type de carburant, le diesel ou l'essence, et les niveaux d'équipement. Et vous pouvez simplement cliquer sur ce filtre et appliquer ces différentes modifications. Et encore une fois, j'ai traduit ces sites Web de mon marché local vers l'anglais. Vous pouvez donc mieux comprendre qu' ici nous avons l'extérieur, ici nous avons l'intérieur et ici nous avons l'écran cible, qui, si je clique juste là, va simplement l'agrandir gros et le mettre en plein écran. Et en dessous, nous avons ces différents angles. Il s'agit donc essentiellement d'images PNG. Dans ce cas particulier, vous remarquerez que nous n' avons pas la possibilité de choisir différentes couleurs, par exemple , c'est là que la deuxième étape est utile. Plus tard. Nous avons le pack de terrain et vous pouvez voir que les options changent lorsque je clique juste là et que nous avons le Shine Pack. Encore une fois, cela va changer, en ajoutant simplement quelques détails ici et là. Même chose pour l'intérieur. Vous pouvez voir à quoi cela ressemble sur le terrain à l' arrière. Vous allez avoir un écran d'infodivertissement plus grand dans le dos honteux, vous aurez un peu plus d'options ici et là. Ensuite, lorsque vous cliquez sur l'intérieur, vous avez les 360 degrés. Mais juste pour l'intérieur, vous pouvez cliquer et faire glisser pour comprendre à quoi ressemble l' intérieur, et c'est tout. C'est tellement simple. Encore une fois, identique à la page d'accueil de la vidéo précédente dans laquelle nous la comparons. En gros, c'est ça. Vous avez immédiatement votre prix ici. Citroën est donc un peu plus honnête, disons les choses comme ça. Ce qu'ils vous proposent, ce qu'ils vous montrent, c'est Qia, mais cette page est vraiment très simple. Encore une fois, ce n'est pas du goût de tout le monde , mais si nous regardons l'exemple de Kia ici, tout de suite, des images plus grandes, un design plus beau, plus d'options, j'essaie de vous vendre en sept ans. garantie, que Citron ne mentionne nulle part, quel type de garantie vous avez réellement ici. Peut-être que si je clique sur Lire la suite, je recevrai ces options. Mais je ne peux appliquer aucune de ces options directement ici. Pendant que vous êtes Qia, vous avez cette belle imagerie. Vous pouvez cliquer sur toutes ces images et vous avez les informations ci-dessous. Vous pouvez comprendre ce que sont toutes ces choses. Donc, quand je clique ici, plein de contenu, c'est l' habitacle. Cela vous donne donc la réponse immédiatement. Ensuite, nous avons Dystonic et nous avons les superbes gammes GT. Ainsi, vous pouvez clairement voir la différence entre les pare-chocs, les roues. La combinaison de couleurs se trouve ici. Et vous pouvez lancer une vue à 360 degrés. Vous pouvez voir à quoi cela ressemble, mais je souhaite le lancer pour le modèle standard. Je peux l'arrêter à tout moment , cliquer, faire glisser et comparer moi-même , sous n'importe quel angle, ce que j'aime ce que je n'aime pas, et peut-être que ce n'est pas l'option pour moi. Enfin, nous avons l'essai routier afin que vous puissiez le réserver immédiatement à partir d'ici. Bien que vous ne puissiez pas le faire sur le site Web de Citroën, vous devez suivre toutes ces différentes étapes et vous avez le catalogue ces différentes étapes et vous avez le catalogue qui vous permettra de comprendre les options pour votre voiture. Vous pouvez comprendre que ce ne sont que les couleurs qu'ils proposent ici, mais vous voulez peut-être une couleur personnalisée. Peut-être que c'est une option dans leur catalogue, vous pouvez donc cliquer ici. Peut-être qu'ils vous offrent des options supplémentaires, des services supplémentaires, une garantie plus longue, etc. C'est pourquoi le catalogue est vraiment utile. Enfin, nous avons les couleurs, donc ce sont des combinaisons prédéterminées, et vous pouvez voir que lorsque je clique dessus, elles changent en temps réel, ce qui est fantastique car vous pouvez comparez et voyez ceux que vous aimez ceux que vous n'aimez pas. Et peut-être que je peux même cliquer ici pour simplement choisir les couleurs qui ne sont pas bicolores, car la majorité d'entre elles sont bicolores, comme celle-ci, par exemple je suis juste un fil plus simple ou plus conservateur . Je voudrais peut-être cliquer ici pour comprendre cela et voir à quoi cela ressemble N. Enfin, quand vous aurez terminé, vous pouvez lancer 360 dans cette couleur en particulier pour voir à quoi cela ressemble tous les côtés, ce que je trouve fantastique. L'inconvénient est que lorsque j'ai lancé la vue et que je passe, disons, à cet angle puis que je clique pour appliquer cette couleur différente. Cela va nous ramener ici, et ce n'est pas si avancé, disons, de s'en tenir à cette vue et à cette palette de couleurs particulières. Mais cela n'a pas vraiment d'importance. Vous pouvez toujours le lancer et il défilera toujours comme ça et vous pouvez le faire vous-même si vous le souhaitez. Ensuite, en dessous, nous avons des caractéristiques. Ils nous montrent quelles options vous offrent dès la sortie de la boîte, quelles sont, disons, des options supplémentaires. Vous avez choisi celui-ci et vous pouvez voir la couleur, mais elle n'a pas été mise à jour. C'est peut-être un inconvénient parce que je n'ai pas choisi celui-ci. En fait, j'ai choisi celui-ci gris. Alors pourquoi n'a-t-il pas été mis à jour ici ? C'est peut-être une option à explorer un peu plus en profondeur. Vous pouvez changer de véhicule ici. Donc, si tu ne veux pas ce tonique, tu veux peut-être une autre voiture d'ici. Tu peux le faire sur place. Enfin, vous pouvez réserver un bureau à sec ici. C'est donc la deuxième étape que Citroën franchit ici. Ils mettent tout cela sur la même page, ce qui est beaucoup plus facile à comprendre en un coup d'œil. Découvrez ce que l'on attend de vous. Je dois mettre mon nom, prénom, numéro de téléphone pour que je puisse comprendre de quoi il s'agit. Et voici le prix, que j'ai pour Citroën ici, mais j'ai le prix juste ici. Ce que j'aime le plus chez Citroën, c'est qu'elle nous montre ces différentes options de prix directement ici. Le prix est donc toujours disponible tandis qu'avec Qia, vous devez faire défiler la page vers le bas. Voyons voir, c'est 15249. Peut-être que si je choisis cette option plus coûteuse, est-ce que cela va changer cela ? Non, c'est juste une image de bannière. Peut-être devraient-ils mettre à jour ces options d'achat supplémentaires afin de proposer des offres spéciales et d' utiliser des véhicules. Tout cela est donc génial, mais je préfère l'ouverture du site Web de Citron ici. Alors peut-être que pour notre site Web, site Web imaginaire, la combinaison des deux fonctionnerait beaucoup mieux. Disons donc que le design, l'imagerie, options de personnalisation et tout cela pourraient peut-être mieux fonctionner, par exemple, alors que l'ouverture, la transparence et la facilité d'utilisation devraient peut-être fonctionner avec Citron, par exemple. Mais ce n'est pas à moi de dire quoi que ce soit parce que nous n'avons pas vraiment d'objectifs. Dans cette vidéo en particulier, je ne vous montre que des exemples. Lorsque vous faites cela avec vos vrais clients, vous devez comprendre leurs objectifs ainsi que leurs budgets. Parce que le développement d'une solution telle que Kia dans ce cas particulier peut prendre beaucoup plus beaucoup plus cher qu'une solution comme celle-ci. Et selon l'argent que vous pouvez gagner pour vos clients, peut-être que l'option Citroën est une meilleure option que l'option Kia, même si je dis que c'est peut-être avec cette imagerie statique, comme il le fait ici, vous pouvez faire bien mieux que ce que fait Citroën par défaut ici. Faites donc attention à de tels détails. Découvrez ce qu'ils proposent et notez toutes ces options, toutes ces solutions, ce que chacun d'entre eux propose, notez-le pour comprendre et comparer. Passez en revue un grand nombre de vos concurrents pour comprendre ce qu'ils font mieux ou moins bien que vous et ce que vous pouvez apprendre d'eux. Dans la vidéo suivante, nous allons parler des outils. Quels outils pouvez-vous utiliser ? Alors je t'y verrai. 41. Quels outils à utiliser: Dans cette vidéo, nous allons parler des outils que vous pouvez utiliser pour l' analyse de la concurrence et quels sont les meilleurs outils que les autres ? Et enfin, en fin de compte, quels outils vous conviennent le mieux ? Commençons donc. Voici donc l'image, et voici les images que j'ai prises en ligne. Et je voulais juste vous montrer que les outils que vous utilisez n'ont pas vraiment d'importance . Ce qui compte, c'est qu' ils fassent un travail pour vous, car si vous utilisez Adobe XD dans votre travail en permanence, par exemple . Cela n'a aucun sens de passer à d'autres outils, car Adobe XD peut tout aussi bien faire le travail, sinon mieux que tous ces autres outils. Il en va de même si vous utilisez Photoshop, si vous utilisez Word, si vous utilisez des produits Google, cela n'a pas vraiment d'importance. Ce qui compte, c'est que vous soyez en mesure de faire la comparaison pour tous ces différents produits. Vous pouvez donc voir que dans ce cas particulier, ils utilisent Adobe Illustrator pour effectuer des analyses concurrentielles. Si nous passons à un autre cas, ils utilisent Google Sheets. Dans ce cas. Ici, ils utilisent Google Slides pour une meilleure représentation. Ici, on utilise des tableaux blancs, donc vous pouvez même le faire. Vous pouvez le faire avec du papier autocollant, vous pouvez le faire avec un tableau blanc, vous pouvez le faire avec des feuilles de papier blanc. Vous pouvez imprimer, comme vous pouvez voir qu'ils l'ont fait ici. Vous pouvez imprimer toutes les pages de ces sites Web et comprendre ce qu'elles font, mais vous pouvez également prendre captures d'écran et les transférer dans Adobe XD. Et vous pouvez faire tout cela dans Adobe XD. Si vous utilisez XD, cela n'a pas vraiment de sens de vous procurer un tableau blanc coûteux, des marqueurs coûteux pour imprimer tous ces papiers, une imprimante si vous ne l'avez pas, lorsque tout cela peut être fait dans Adobe XD ou dans l'outil que vous utilisez déjà pour votre travail. Enfin, nous avons ici l' outil appelé extenseur, et vous pouvez faire la plupart des choses qui viennent d'être mentionnées, mais parfois même un peu plus car ils proposent tous ces modèles que vous pouvez créez-vous à la fin de la journée, lorsque vous commencez à travailler avec ces clients, vous pouvez répéter ces modèles dans n'importe quel type d'outil que vous utilisez. Mais par exemple, dans ce cas, vous pouvez simplement créer des liens vers vos concurrents. Vous pouvez mettre les informations ici. Comme je l'ai mentionné, ils vous fournissent ces modèles. C'est donc un peu plus facile à faire avec un outil comme celui-ci lorsque vous avez un calendrier aussi court, mais ce n'est pas forcément le cas. Vous pouvez le faire avec n'importe quel type d' outil ou de logiciel que vous utilisez. Donc, comme je l'ai mentionné, peu importe ce que vous utilisez tant que vous l'utilisez correctement, tant que vous l'utilisez, n'est-ce pas ? Et tant qu'il fait l'affaire. Dans la vidéo suivante, nous allons parler des points à surveiller, des erreurs courantes et des pièges. Alors je t'y verrai. 42. Choses à prendre en compte: Dans cette vidéo, nous allons parler des éléments à prendre en compte lorsque vous analysez vos concurrents et de certaines des meilleures pratiques quant à la manière dont vous pouvez aborder cette analyse de la concurrence quand est-ce que tu le fais ? Et la première chose à faire est ne pas simplement faire les choses pour le design. Réfléchissez aux objectifs. Réfléchissez à ce que propose réellement votre client. Quelle est leur offre principale ? Et essaient-ils de se différencier de la concurrence ou essaient-ils de battre la concurrence en termes de prix ? Essaient-ils de battre la concurrence en termes de volume de ventes ? Quel est l'objectif ici et quel est le problème que vous essayez réellement de résoudre ? Ne passez donc pas des mois à essayer de mettre belles images, comme je vous le montre dans l'une des vidéos précédentes avec des exemples de voitures. Ne le faites pas simplement pour le plaisir de le faire. Faites-le si nécessaire. Si tel est l'objectif principal et s'il s'agit de résoudre le principal problème auquel votre client est réellement confronté, prochaine étape consiste à ne pas faire les choses simplement pour le plaisir de faire les choses. Ce que je veux dire par là, c'est que si vous voulez être différent, essayez de vous différencier de ce que vous proposez et de la manière dont vous l'emballez , juste pour vous différencier de vos concurrents et présenter votre offre. d'une manière bien meilleure et convaincante. Plutôt que d'essayer de redéfinir la recherche en apparence ou de placer l'icône du menu à la place, disons du côté droit au côté gauche, simplement pour être différent. N'essayez pas de faire ça. N'essayez pas de réinventer l' eau chaude parce que vous consacrez simplement un temps précieux à des choses qui n'ont pas d'importance. Et dans le cadre de choses qui n'apporteront aucune valeur à votre client et à ses clients. Essayez de suivre quelques exemples et certaines règles déjà établis par le secteur dans lequel évolue votre client, surtout s' il occupe un créneau particulier, essayez de comprendre ce que Nietzsche le fait et pourquoi ils le font. Et essaie de le faire toi-même, juste à ta façon. Encore une fois, n'essayez pas de copier ce qu'ils font, car cela ne fonctionnera pas pour votre offre et votre produit. Essayez d'être différent, mais essayez d'être convaincant dans ce que vous faites. principal point à retenir ici est de faire les choses avec un but. N'essayez pas de faire les choses juste pour le plaisir de faire les choses. Faites les choses dans un but qui va apporter un changement à vos clients et à vos clients. Des clients à la fin de la journée. 43. AFFECTATION: Votre mission pour cette section consiste simplement à choisir deux marques différentes. Il peut s'agir des marques que vous voulez, annualisées et utilisez simplement ce que je vous ai montré dans cette leçon. Vous pouvez utiliser votre écran. Vous pouvez le diviser par deux. Vous pouvez placer ces deux sites côte à côte, et vous pouvez simplement les analyser, en partant du haut vers le bas. Commencez par la section d'en-tête, commencez par la section héros, commencez par la topographie, commencez par la copie. Ils utilisent des éléments provenant d'images, façon dont ils les positionnent. Y a-t-il une histoire derrière ce design ? Ce qu'ils essaient de dire, essayez d'analyser tous les détails dont nous avons parlé dans cette section et essayez de les noter. Vous pouvez utiliser Word, vous pouvez utiliser Microsoft Office, vous pouvez utiliser Google Docs, comme vous le souhaitez. Vous pouvez même utiliser une feuille de papier. Entraînez-vous simplement, comprenez simplement ce que vous regardez à l'écran. Ne vous concentrez pas trop sur le positionnement des éléments et de tous ces éléments visuels, mais concentrez-vous sur éléments plus importants tels que la structure, comme le sujet dont ils parlent réellement ces pages et par exemple à quoi ressemble la copie elle-même , car c'est la copie accompagnée des images qui parle réellement aux utilisateurs. 44. SECTION 6: flux d'utilisateurs vous montrent comment vos utilisateurs naviguent sur vos pages, comment ils naviguent sur votre site Web ou votre application mobile. Et en ce qui concerne les flux d'utilisateurs, vous essayez simplement de comprendre quel est le chemin le plus court possible pour vos utilisateurs pour atteindre un objectif Vous pouvez également les diversifier et créer tri d'un flux de tâches pour chaque tâche que vous souhaitez utiliser, vous allez créer différents flux de tâches en fonction de votre flux d'utilisateurs global. Commençons donc par cette section. 45. Qu'est-ce que les flux d'utilisateurs: Les flux d'utilisateurs, tous les organigrammes, comme on les appelle parfois nos chemins, les enjeux de vos utilisateurs lorsqu' ils utilisent un produit, ils affichent une partie complète votre utilisateur prend depuis le point d'entrée , vers la droite, jusqu'à le point final lorsqu'ils terminent leur voyage. Vos utilisateurs peuvent prendre de nombreuses mesures en fonction de la façon dont ils ont accédé à votre produit, par exemple s'il s'agit de notre site Web, de notre page de destination ou quelque chose comme ça, peut-être qu'ils ont accédé à cette page de destination lorsqu'ils cliquez sur le lien contenu dans votre e-mail ou, s'il s'agit page Shoppe, il peut s'agir d'une page produit ou quelque chose comme ça, peut-être approfondissez-la en consultant peut-être approfondissez-la en consultant notre campagne que vous avez menée sur Facebook ou Instagram ou quelque chose comme ça . Peut-être qu'ils ont cliqué sur un lien contenu dans une vidéo YouTube et qu'ils ont cliqué sur la page de cette boutique. Ou s'il s'agit d'une application, ils installent peut-être cette application en utilisant un lien ou en la téléchargeant directement depuis un magasin. Et puis, quand ils l'ont installée dans cette application, ou peut-être qu'ils l'ont ouverte et ont accédé à l'écran de démarrage. Les flux d'utilisateurs ont donc simplement pour tâche d' orienter tous ces chemins de manière à ce qu' logiques pour vos utilisateurs, très faciles à comprendre et à les optimiser de manière à ce qu'ils aient quelques clics pour atteindre ces objectifs, en fonction de l'identité de votre client et de ce que votre produit essaie de faire. Ces objectifs peuvent être d' acheter un produit, de réserver un service, télécharger, d'obtenir un cadeau, s'inscrire à une newsletter par e-mail et bien plus encore. En tant que concepteur, en utilisant ces flux d'utilisateurs, votre objectif est donc de créer ces flux optimaux et les chemins optimaux que vos utilisateurs peuvent emprunter pour effectuer ces tâches de manière aussi simple que possible comprendre et le plus rapidement possible pour qu'ils puissent le résoudre et atteindre leur objectif final. L'objectif de vos clients est d' augmenter les conversions Ainsi, en utilisant ces flux d'utilisateurs, vous allez vous rapprocher cette meilleure conversion en réduisant le nombre de clics, par exemple . Ainsi, en utilisant ces flux d'utilisateurs, vous allez vous rapprocher de cette meilleure conversion en réduisant le nombre de clics, par exemple vos utilisateurs doivent le prendre pour atteindre ces objectifs. En utilisant les flux d'utilisateurs, vous allez déterminer le nombre total d'écrans ou de pages dont vous aurez besoin à cette étape du projet. Et cela vous fera gagner beaucoup de temps plus tard lorsque vous arriverez aux étapes de conception de votre projet, car cela vous permettra d' améliorer votre compréhension globale de ce projet. Et donc, cela va vous accélérer encore plus à ce stade du projet, vous pouvez même informer les développeurs de ce qui se passe. Et vous pouvez même leur montrer ces organigrammes et nous en reparlerons dans les dernières étapes de ce cours. Mais c'est tout le but de ce processus, c'est de comprendre que ce projet vaut bien mieux que de simplement commencer par le design, car c'est vraiment une mauvaise approche. Parce que vous devez vraiment commencer par ces flux d'utilisateurs afin de comprendre le nombre d'écrans et le nombre de pages dont vous aurez besoin plus tard, lorsque vous arriverez à cette partie de conception de votre projet. Dans la vidéo suivante, nous allons discuter des différents types de ces flux d'utilisateurs et de la manière dont ils sont utilisés. Alors je t'y verrai. 46. Différents types de flux d'utilisateur: Il existe de nombreux types de flux d'utilisateurs en fonction de ce que vous essayez de résoudre dans votre projet et de ce que vous essayez d'accomplir. Mais il existe essentiellement trois types principaux qui sont utilisés dans l'ensemble. Et puis, parmi ces trois types principaux, il existe de nombreux types différents que vous allez rencontrer au cours de votre carrière de designer. Et il s'agit de flux de tâches, flux filaires et de flux d'utilisateurs. Les flux de bureau sont ce que leur nom suggère et ils montrent comment l'utilisateur interagit avec une tâche donnée en cliquant sur le même point d'entrée pour atteindre le même point d'entrée et le même point final, tous vos utilisateurs vont suivre le même parcours. Ce voyage va donc vous montrer une tâche simple, par exemple inscrire à notre newsletter par e-mail, acheter le produit ou réserver un service auprès de vous ou quelque chose comme ça. Tous ces utilisateurs doivent effectuer la même tâche. Cette tâche comporte de nombreuses étapes différentes selon la complexité de la tâche. Par conséquent, ces flux de tâches sont utilisés pour la dette. Ils ne sont pas utilisés pour d'autres choses complexes, par exemple différents points d'entrée, différents points de sortie. Mais le but des flux de tâches est se concentrer sur une seule tâche et d'optimiser cette partie utilisateur de manière à ce qu' il dispose d'une liste d'étapes aussi complète que possible pour accomplir cette tâche. Ensuite, nous avons les flux filaires. Et ces flux de travail sont en fait une combinaison de ces flux de tâches et de structures filaires de base. C'est pourquoi on les appelle des flux filaires. Leur but est de montrer les différents parcours des utilisateurs tout au long votre produit et les différents points d'entrée aux différents points de sortie. Cependant, il n'y a pas trop de détails à l'intérieur. Ils sont juste là pour montrer toutes ces différentes parties que vos utilisateurs peuvent utiliser. ne s'agit donc pas d'être trop détaillé, mais de montrer à vos clients, à vos coéquipiers, qu'il faut également intégrer les développeurs. De nombreuses pièces différentes que vos utilisateurs peuvent prendre. Mais pour utiliser au moins quelques détails pour montrer à quoi peuvent ressembler ces écrans ou pages. Ensuite, utiliser des flèches, par exemple simplement pour montrer quelles sont les différentes parties que vos utilisateurs peuvent prendre. Et enfin, nous avons les flux d'utilisateurs eux-mêmes. Il s'agit en fait d'une combinaison de flux de tâches et de flux. Et les flux d'utilisateurs montrent en fait tous les différents flux que vos utilisateurs peuvent emprunter, tous les différents chemins qu'ils peuvent emprunter. Et il s'agit en fait d'une combinaison de flux de tâches et de flux intermédiaires. Ce que je veux dire par là, c'est qu'ils sont une combinaison de ces deux éléments. Et je vais vous le montrer dans les étapes ultérieures de ce cours. Et en gros, ils montrent tout. Ils montrent chaque point d'entrée, ils montrent chaque point de sortie. Ils montrent toutes les multiples parties que vos utilisateurs peuvent emprunter, qu'il bon ou du mauvais chemin. Ils proposent des voies alternatives et toutes ces choses. Ils sont donc aussi détaillés que possible. Ainsi, en fonction de ce dont vous avez réellement besoin ce projet et de l'étape où vous en êtes dans les étapes de conception de ce projet, vous utiliserez l'un ou l'autre. Parfois, les flux d'utilisateurs sont en fait votre meilleur choix car cela dépend de l'évolution de votre projet, l'évolution des commentaires l' évolution de la recherche. Ils sont beaucoup plus simples à modifier, ils sont beaucoup plus simples à modifier. Ensuite, si vous commencez tout juste par flux de tâches et que vous y parvenez, ajoutez des flux filaires ultérieurement puis utilisez les flux utilisateur à la fin. flux d'utilisateurs sont donc peut-être le meilleur moyen d'y parvenir. Et quand utilisons-nous réellement ces flux d'utilisateurs ? Nous en parlerons dans la prochaine vidéo. Alors je t'y verrai. 47. Quand sont-ils utilisés: Les flux d'utilisateurs sont utilisés dès le début d'un projet fois que toutes les recherches et profils des utilisateurs ont été achevés. Comme je l'ai dit précédemment, ils sont utilisés pour déterminer le nombre d'écrans dont vous aurez besoin, l'ordre logique de ces écrans ou sur ces pages, ainsi que le comportement réel de vos utilisateurs . interagir et parcourir toutes ces différentes pages. Ensuite, vous pouvez discuter de cet ordre et de tous ces flux avec vos clients et avec vos développeurs ou collègues afin d'obtenir le meilleur résultat possible la meilleure optimisation possible. Avant de passer aux étapes de conception de ce projet, elles sont utilisées pour créer une interface intuitive et agréable afin que nos utilisateurs trouvent notre produit ou prennent plaisir à l'utiliser, et ils sont également utilisé afin d'augmenter le taux de conversion, comme je l'ai déjà mentionné, car en utilisant ces flux d'utilisateurs, vous allez déterminer très tôt dans ce processus de conception, quand vos utilisateurs vont cliquez, achetez ou achetez certaines choses dans le cadre de ce processus plutôt que plus tard dans le processus de conception, ce qui rendra le processus de conception beaucoup plus facile à réaliser, beaucoup plus facile à créer. Parce que vous déterminez tous ces éléments dans vos flux d'utilisateurs. Vous pouvez les utiliser pour créer de nouveaux produits, ou vous pouvez les utiliser avec des produits existants pour affiner les parcours que vos utilisateurs peuvent emprunter dans ce produit et pour augmenter l' optimisation ou conversion ou quel que soit l' objectif de ce projet. Comme je l'ai dit, ils peuvent être créés pour des produits nouveaux ou existants. Et ils sont très utiles lorsque vous créez des composants que vous utiliserez plus tard dans les étapes de conception de ce projet de conception, car certains composants sont principalement utilisés, tels que pieds de page de navigation. Et au cours de cette étape de votre projet, vous pouvez facilement déterminer ce qui va se trouver dans cette navigation ou ce pied de page. Vous pouvez également les utiliser pour créer ce que l'on appelle des images de héros, par exemple, ou des curseurs sont des composants différents, comme la dose. Ensuite, vous pourrez facilement redimensionner ou redimensionner ces composants, que vous en ayez besoin ou non plus tard dans votre projet. Enfin, il existe un excellent moyen de montrer à vos coéquipiers, clients et développeurs vos idées sur ce projet. Toutes ces différentes parties que vos utilisateurs peuvent prendre. Parce que la validation dans cette partie du projet est très importante car, comme je l'ai déjà mentionné à plusieurs reprises, cela va accélérer votre conception, la partie de ce projet est bien plus car dans cette partie avec ces flux d'utilisateurs, vous allez déterminer tous ces détails importants. Et puis plus tard, le design sera processus beaucoup plus facile et beaucoup plus agréable à réaliser. Parce qu'il s'agit simplement d'explorer la créativité plutôt que de faire face à toutes ces tâches complexes que les utilisateurs doivent résoudre. En parlant de flux d'utilisateurs dans la vidéo suivante, nous allons en fait créer des flux d'utilisateurs à l'aide d'Adobe XD. Alors je t'y verrai. 48. Créer des flux d'utilisateurs dans Adobe Xd: nombreux itinéraires différents Vos flux d'utilisateurs peuvent emprunter de nombreux itinéraires différents. Il existe de nombreuses formes différentes que vous pouvez utiliser. Mais il existe certaines formes de base que chaque designer devrait comprendre. Ils sont en fait la norme dans l'industrie depuis des décennies. Et il est très important de les connaître, surtout si vous travaillez avec des équipes distantes. Si vous comptez rejoindre une agence plus tard, ou si vous travaillez déjà dans une agence et que vous essayez de nous faire comprendre un langage compréhensible par tout le monde. Dans cette vidéo, je vais donc vous montrer un modèle. Vous allez pouvoir télécharger ce modèle et l' explorer davantage, puis vous appuyer sur ce modèle. Plus tard dans le cours, je vais vous montrer quelques modèles plus complexes que vous pouvez obtenir si vous le souhaitez , puis développer ces modèles de base et les construire simplement sur eux. Voici donc ce modèle. C'est ce qu'on appelle des éléments de flux de tâches. Et si vous souhaitez obtenir ce modèle, il vous suffit de le télécharger à partir des fichiers de classe, puis de l' ouvrir dans Adobe XD. Ce que nous avons ici, ce sont tous les éléments, tous les composants. Nous avons donc la saisie, l'action, le processus, la flèche de décision et la flèche négative, et ce sont vos couleurs. Donc, le col d'entrée, le col blanc, qui est essentiellement la couleur du texte partout, et la couleur des marches. Si vous souhaitez modifier ces couleurs marque de votre client, par exemple vous pouvez simplement cliquer avec le bouton droit de la souris. Vous pouvez le copier ou le modifier puis simplement changer cette couleur comme vous le souhaitez. Comme vous pouvez le constater, ils seront mis à jour en temps réel. Vous pouvez coller votre code hexadécimal ici si vous le souhaitez. Ensuite, la couleur hexadécimale que vous avez choisie sera mise à jour. Permettez-moi donc de revenir un peu en arrière. Comme je l'ai dit, il s'agit d' un modèle très basique et vous pouvez ensuite vous appuyer sur ce modèle. Donc, si nous zoomons un peu plus tous ces différents éléments, je vais vous montrer ce qu'ils sont tous et ce qu'ils font tous. Donc, tout d'abord, nous avons l'entrée, et c'est le cercle de saisie, ou le point d'entrée est généralement affiché sous la forme d'un cercle, mais vous pouvez l'afficher de différentes manières à votre guise. Rien de tout cela n'est réellement standardisé. Il s'agit simplement de concepteurs de l'industrie utilisent tous ces éléments et modèles depuis des décennies. Et puis trouvez simplement toutes ces différentes solutions. Nous avons donc un point d'entrée et cela peut aussi être le point de sortie. Ainsi, si vous vous souvenez des quelques vidéos que j'ai mentionnées précédemment, le point d'entrée quelques vidéos que j'ai mentionnées précédemment, le peut être, par exemple, une page de destination de votre site Web ou l'écran de connexion de votre application ou autre. Le point d'entrée par lequel les utilisateurs saisissent réellement votre design, votre produit, votre application mobile, votre site Web, quel qu'il soit. Ensuite, nous passerons à l'action. Ainsi, les utilisateurs peuvent cliquer, les utilisateurs peuvent naviguer, les utilisateurs peuvent affirmer, les utilisateurs peuvent taper, toutes ces différentes choses sont des actions. pouvez également effectuer des actions si vous cliquez sur le bouton suivant dans votre application, par exemple pour passer d'un écran à un autre. Ou si vous cliquez sur une certaine icône, par exemple flèche pour aller vers la gauche et la droite, ou si vous faites glisser votre doigt pour utiliser la pagination, le cercle d'action se trouve juste là. Et je vais vous le montrer en une seconde avec ce modèle très basique que j'ai trouvé en ligne, puis je l'ai simplement recréé en utilisant ces éléments. J' ai donc créé tous ces éléments pour vous et vous pouvez simplement télécharger et utiliser ce modèle. Comme je l'ai dit. Ensuite, nous avons traité. Alors, que se passera-t-il une fois que nous aurons terminé cette action ? Sommes-nous donc allés sur une page spécifique ? Sommes-nous passés, par exemple d'une petite image à une image pleine largeur ? Sommes-nous passés à la diapositive suivante ? Avons-nous acheté le produit ? Avez-vous accédé à la page de paiement ? Toutes ces choses sont vraiment importantes dans le cadre du processus. Vous devez donc le noter pour que vous puissiez le comprendre en tant que designer, ou si vous travaillez avec coéquipiers, des développeurs ou des clients, vous devez leur montrer ce processus. Ensuite, nous avons cette forme de diamant, qui est la décision. Donc, en gros, cela signifie si l'utilisateur s' est engagé à dire oui ou non à un certain processus ou à une certaine action. Ce que je veux dire par là, c'est lorsque vous accédez à notre page de paiement, par exemple et que vous souhaitez acheter un produit ? Cela peut être une décision par oui ou par non. Oui, je souhaite acheter le produit. Ensuite, vous allez sur la page de paiement, vous allez sur la page de paiement et ainsi de suite ou si non, si je clique sur Non, où est-ce que cela m'amène ? C'est pourquoi ce diamant est très important et on l'appelle généralement diamant de décision. Je vais vous montrer comment modifier tous ces éléments en une seconde. Mais ensuite, nous avons des flèches. Maintenant, ces flèches remplies, comme vous pouvez le voir, nous en avons deux types. Ces flèches remplies sont donc essentiellement des flèches pas à pas. Ils font donc passer les utilisateurs d' une étape à l'autre. Et puis ces flèches sont essentiellement ce que je les ai étiquetées ici. Les flèches négatives apparaissent lorsque l'utilisateur dit, dit non ou lorsqu'il ne peut pas effectuer une tâche donnée, par exemple si la recherche ne trouve rien, aucune flèche n' apparaît et elle les prend à l'étape suivante ou à l'étape précédente ou quelque chose comme ça. Donc, en gros, c'est pourquoi ces flèches sont utilisées. Maintenant, si je dézoome un peu, vous pouvez voir ce flux. Et en gros, je me suis inspirée en ligne et je l' ai injustement recréée en utilisant ces éléments. Comme l'utilisateur entre ici, il est accueilli par une page d'accueil ou un écran de bienvenue, par exemple, à partir de là, il peut sélectionner une tâche. La tâche est sélectionnée, puis ils peuvent avancer. Si c'est correct, ils peuvent passer à la page de détails. Si ce n'est pas correct, c'est ça. S'ils cliquent sur Non, par exemple, cela les ramènera aux tâches sélectionnées. Ce nœud peut donc être un bouton concret lorsqu'ils cliquent sur non, ou ils peuvent être un X, par exemple s'ils veulent fermer la fenêtre contextuelle ou la manière dont s'ils veulent fermer la fenêtre contextuelle ou la vous structurez votre mise en page, en gros, le point est pareil. Ils peuvent soit avancer, donc oui, soit reculer. Donc non, c'est pourquoi ils sont utilisés. Ensuite, nous passons à cette page de détails, par exemple et à partir de la page de détails, je peux cliquer sur la recherche, disons pour trouver quelque chose. Et puis, lorsque je m' engage à rechercher, je peux rechercher des éléments. Si je n'ai trouvé aucun objet, aucun objet n'apparaîtra. Donc, dans ce cas, j'ai imaginé que c'était une icône X, donc par exemple aucun élément n'a été trouvé. Ensuite, vous pouvez fermer pour terminer une recherche. Encore une fois, pour trouver un objet, objectif est atteint dans ce cas particulier car c'est le but de cet objet. Ensuite, vous pouvez cliquer sur Commander. Et c'est votre point de sortie, donc ordonné. Ou si je ne veux pas commander, je peux peut-être cliquer sur Non ou annuler ou quelque chose comme ça. Et cela va me ramener à cette page de détails. Vous pouvez donc voir à partir de cet exemple très simple et rapide quel point ces organigrammes sont utiles. Il s'agit essentiellement d'un flux de tâches que j'ai mentionné précédemment car il ne montre qu'une seule tâche. Dans la vidéo suivante, nous allons aborder certains modèles plus avancés et certaines étapes plus avancées que vous pouvez suivre lors de la création de ces flux. Mais en gros, il ne s'agit que d'un modèle très basique. Encore une fois, vous pouvez le télécharger, l'utiliser dans Adobe XD et l'explorer. Et je vous encourage vraiment à vous appuyer sur ce modèle, à ajouter plus de pages, à ajouter plus d'écrans, etc. Et une chose que je ne vous ai pas montrée, par exemple , sur cette tâche, je voudrais zoomer et disons qu'au lieu de sélectionner une tâche, je veux faire autre chose. Vous pouvez voir sa première phrase, donc c'est une police Google gratuite. Vous pouvez le télécharger gratuitement sur Google Fonts et Adobe Fonts, peu importe ce que vous utilisez. Donc, ce que j'ai fait ici, c'est que j'ai inclus le rembourrage. Ce que je veux dire par là, c'est que si je clique juste là, vous pouvez voir que le rembourrage est activé sur ce composant. Donc, si je double-clique ici, je peux taper quelque chose, par exemple, rendre plus visible et vous pourrez voir comment la boîte s'agrandit. Donc, en gros, dans ce cas , si je reviens en arrière, j'ai utilisé 20, comme vous pouvez le voir ici, espacement entre tous mes éléments. Mais tu peux en utiliser dix, tu peux en utiliser cinq. Vous pouvez même superposer ces flèches. Donc, si je le positionne ici, vous pouvez voir à quel point il chevauche bien cette étape. Vous pouvez donc vraiment faire ce que vous voulez. De plus, lorsque vous faites glisser ces composants, il vous suffit de les faire glisser ici. Je veux le modifier, double-cliquer à l'intérieur, par exemple point d'entrée ou autre, ou du point de sortie, peu importe. Vous pouvez le positionner ici, vous pouvez le placer au centre en sélectionnant ces deux éléments, positionnez-le comme ceci. Ou vous pouvez simplement le supprimer. Vous pouvez le faire pour tous les autres éléments qui vous sont présentés. Et enfin, pour ces flèches, parce que celles-ci sont assez simples, vous pouvez double-cliquer à l'intérieur. Vous pouvez maintenir votre touche Shift sur cette flèche juste ici. Ensuite, vous pouvez cliquer sur la position pour obtenir la forme juste ici. Si vous souhaitez raccourcir cette flèche, par exemple si vous ne voulez pas qu'elle soit aussi longue pour une raison quelconque. Et aussi pour ces flèches, si je vais dans mon panneau Calques et que je les ouvre, vous pouvez voir, donc flèche négative, nous avons l'étiquette, qui est cette étiquette de nœud à l'intérieur de laquelle vous pouvez également modifier si vous le souhaitez, par exemple option négative ou aucune option, ou ce n'est pas une option ou ce que vous voulez écrire. Et puis nous avons les flèches gauche et droite et nous avons cette ligne de flèche au milieu. Alors, que pouvez-vous réellement en faire ? Vous pouvez cliquer sur la flèche gauche, par exemple maintenir la touche Shift enfoncée et la rapprocher. Vous pouvez faire de même avec celui-ci, ou si vous le souhaitez, vous pouvez même les éloigner davantage. Disons donc comme ça. Ensuite, vous pouvez cliquer sur ce centre et l'étendre simplement comme ça. Si vous ne voulez pas que ce soit comme ça, vous pouvez simplement cliquer sur la flèche et ajuster cela pour voir que nous avons la couleur de la bordure, qui est cette couleur. Et puis nous avons la largeur du trait, nous avons la largeur du tiret. Donc, en gros, la largeur entre tous ces différents tirets, vous pouvez ajuster ce que vous voulez pour obtenir le style que vous recherchez. Et en gros, c'est tout l' intérêt de ce modèle pour vous aider dans ce processus d'exploration. Donc, comme je l'ai mentionné dans la vidéo suivante, nous allons discuter modèles un peu plus complexes. Je vais vous montrer où vous pouvez obtenir ces modèles, qui sont en fait les miens, et ensuite ce que vous pouvez réellement en faire. Alors je t'y verrai. 49. Travailler avec des diagrammes de flux dans Adobe Xd: Dans cette vidéo, je vais vous montrer quelques modèles plus complexes. création de ces modèles a pris des mois. Ces modèles sont en fait des que mon équipe et moi-même avons créés dans le passé. Et vous pouvez obtenir ces modèles, des liens qui figureront dans le PDF avec des réductions, car ce sont des modèles premium. Et je vais vous montrer comment ils sont tous créés, quoi ressemblent-ils dans Adobe XD ? Tu peux les obtenir si tu veux. Si ce n'est pas le cas, vous pouvez créer le vôtre comme bon vous semble. Voici donc mon site Web appelé Web donut.net. Encore une fois, le lien sera au format PDF et c'est le premier modèle qui sera appelé flowy. Et vous pouvez voir que vous avez 108 écrans, 128 éléments et deux papiers différents. Vous pouvez donc utiliser ces documents si vous souhaitez aligner votre organigramme , puis l'imprimer plus tard pour le montrer à vos coéquipiers. Les clients sont des développeurs. Donc, si c'est au pluriel, juste un petit peu, vous pouvez voir à quoi ressemblent certains de ces éléments et nous allons les explorer en une seconde dans Adobe XD. Mais en gros, c'est l'essentiel. Il existe de nombreux éléments différents, ces articles et nous avons des organigrammes des flux d'eau, qui sont beaucoup plus grands. Nous avons donc 400 composants au total. Donc 200 écrans, 200 éléments et deux papiers encore une fois, et cette fois, nous avons une version claire et foncée, donc je peux même l'explorer. Et vous pouvez voir qu'ils sont adaptatifs, ce qui est inclus. Vous avez donc trois types de fichiers différents, Photoshop, Sketch et XD. Dans celui-ci, nous avons Photoshop et des fichiers de croquis. Mais comme XD est créé par Adobe, vous pouvez simplement ouvrir un fichier Photoshop. Il fonctionnera parfaitement dans XD car il est intégré à cet effet : des composants parfaits au pixel près, composants parfaits au pixel polices Google Fonts gratuites ou une utilisation partout où vous trouvez des polices. Et si vous achetez, il s'agit en fait de didacticiels vidéo pour les deux , inclus dans une structure de couches organisée. Vous allez le voir dans une seconde. Ce sont des papiers pour imprimer américain et A4 si vous le souhaitez, des variations illimitées et vous pouvez voir à quoi ressemblent certains de ces éléments. Maintenant, si je minimise cela et que je reviens à XD, c'est la taxe pour notre émission de radio. Vous pouvez voir à quel point c'est simple, mais si je vous montre, par exemple fluide, vous pouvez voir à quoi cela ressemble. Je combine donc en fait ces trois. Permettez-moi donc de m' en rapprocher un peu plus. Ce sont donc des éléments Web, des éléments mobiles, et ce sont tous des éléments supplémentaires. Donc, si vous les achetez, ils seront disponibles en trois fichiers, mais vous pouvez les combiner dans un seul fichier dans XD Comme vous pouvez le voir ici, vous suffit de double-cliquer pour le modifier. Ce sont donc des éléments mobiles, par exemple, et que pouvez-vous réellement faire avec ces éléments ? Vous pouvez donc facilement à votre tableau d'art et créer un tableau d'art de 1920 x 1080, par exemple et disons que je veux commencer par un écran de connexion. Je peux le copier, le coller ici. Et changeons cette couleur en fait. Alors laissez-moi, laissez-moi prendre une belle couleur gris clair juste pour que vous puissiez voir un peu mieux ce que je fais. Et puis je peux commencer par cette flèche, par exemple ici. Alors copiez-le, collez-le ici. Et je peux peut-être le positionner ici. Alors, lorsque mes utilisateurs cliqueront sur ce bouton, où vont-ils les mener ? Comme il s'agit d'un écran de connexion, peut-être, comme vous pouvez le voir, nous avons différentes catégories ici. Peut-être que nous allons nous lancer dans le commerce électronique et peut-être que je vais passer à ceci, puis à ceci. Et puis voyons voir, peut-être cet écran aussi, comme ça. Contrôlez C en sautant ici, contrôlez V pour les coller tous. Et je vais le faire. Donc, par exemple, ils vont apparaître sur cet écran juste ici. Ensuite, je vais dupliquer ma flèche Control C Control ou Control D, comme tu veux. Et puis, par exemple, s' ils cliquent dessus, positionnez-le dessus. Si vous cliquez sur ce produit, par exemple ou ici, et que nous avons différentes flèches ici. Donc, si je supprime celui-ci, je peux utiliser cette flèche, par exemple vous puissiez voir pourquoi ces modèles sont importants, car vous pouvez réellement travailler beaucoup plus rapidement lorsque vous le faites. Donc, si je contrôle X, contrôle V, positionnez-le ici. Lorsque vous cliquez ici, disons qu'il s'agit d'un bouton. Et vous pouvez faire la même chose que je vous ai montrée précédemment. Vous pouvez donc les étendre si vous le souhaitez. Et permettez-moi de m' étendre jusqu'ici. Je peux vraiment accéder à cet écran. Vous pouvez donc constater que cela ne correspond pas à tous les flux de tâches précédents, car il s'agit d'un flux utilisateur beaucoup plus complexe car, comme vous pouvez le voir, nous avons deux boutons. Ils peuvent cliquer sur Annuler, par exemple, et nous pouvons dupliquer cette flèche. Je peux le retourner, par exemple juste pour vous montrer à quoi cela pourrait ressembler. Je peux donc peut-être le positionner ici. Je peux peut-être les pousser un peu vers le haut. Je peux le positionner ici. Peut-être qu'ils peuvent cliquer ici. Et puis cette flèche va en fait les mener vers ce premier écran, par exemple, vous pouvez même la retourner et positionner ces éléments. Je vais te le montrer dans une seconde. Donc Control D sur celui-ci. Et tu peux le positionner juste ici. Ensuite, vous pouvez l'étendre. Cela peut sembler un peu ennuyeux, mais il est très important de comprendre ce flux d'utilisateurs. Et à partir de maintenant, par exemple s'ils cliquent réellement sur ce bouton bleu, où cela les mènera-t-il ? Et prenons cela juste pour qu' il soit un peu plus facile de s' y retrouver. Je vais donc le déplacer ici, peut-être comme ça, puis le positionner un peu vers l'intérieur. Je vais supprimer celui-ci. Vous pouvez voir à quel point cela prend rapidement pour créer. Ensuite, lorsqu'ils cliqueront sur ce bouton bleu, ils pourront peut-être accéder à cet écran. Et à partir de là, permettez-moi de positionner cette flèche jusqu'en haut, ici, de la positionner ici. Ensuite, je peux cliquer ici, le déplacer comme ça et le réorganiser un peu. C'est peut-être notre écran de confirmation ou quoi que ce soit d'autre, nous pouvons l'appeler comme ça. Et puis, lorsqu'ils cliquent sur ce bouton bleu, ils peuvent accéder à la page d'achat et terminer cette étape. Maintenant, ce que nous pouvons faire avec celui-ci, c'est les combiner avec les flux de tâches originaux que je vous ai montrés. Par exemple, I. Peut utiliser ce cercle de saisie. Et puis excusez-moi, car j'en ai beaucoup ouverts. Je peux le positionner ici et le déplacer. Vous pouvez voir qu'il est lié car il s'agit en fait d'une instance provenant de nos différents composants. Je peux donc cliquer avec le bouton droit ici et le rendre local. Et puis ce que je peux faire, c'est sauter sélectionner les deux comme ça appuyer sur Shift Control et le réduire un peu. Je peux également réduire mes textes. Alors peut-être dix, quelque chose comme ça. Ensuite, nous pouvons l'utiliser comme point d'entrée ici. Mais vous pouvez aussi les utiliser. Donc, par exemple, c'est notre maison, peut-être que c'est notre point de contrôle C. Et ensuite, au lieu de ce cercle d'entrée, je peux le rendre un peu intéressant en les positionnant. Je peux donc le positionner comme mon cercle de saisie N, par exemple I. Je peux utiliser cette couleur si je le souhaite. Je peux changer cette icône. Si je veux. Je peux même changer la couleur de l'icône. Cliquez simplement ici, vous pouvez en faire ce que vous voulez. De plus, ce que vous pouvez voir ici sont toutes ces différentes maquettes, qui sont essentiellement des formes. Ensuite, vous pouvez utiliser ces maquettes pour montrer, par exemple qu'il s' agit d'une vue d'une application mobile. Et je peux utiliser cette maquette simple. Positionnez-le ici en haut, écrivez peut-être des textes ici. Déplacez tous ces éléments un peu vers le bas, peut-être, puis écrivez ici. Voici un aperçu de ce à quoi ressemblera la version mobile sur Android ou iOS, par exemple , ou ce que vous voulez. Ou je peux utiliser tous les autres. Donc navigateur, version pour ordinateur portable, version de bureau, peu importe. Ensuite, si l'étape est terminée, nous pouvons utiliser celle-ci, par exemple, alors positionnons-la ici. Et je peux le positionner au centre de ma flèche comme ça. Ensuite, je peux utiliser ma couleur principale, par exemple pour dire que l' étape est terminée, ou je peux la positionner ici, juste là, l'agrandir si je le souhaite. Je peux même y inclure une bordure. Quoi que ce soit, je peux utiliser une ombre dessus sur ce fond. Comme ça, je peux me positionner là-dedans. Quel que soit votre style pour ce flux utilisateur particulier, vous pouvez implémenter ce style à l'aide de ces modèles. Et vous pouvez voir en quelques minutes si vous ne parlez pas comme je suis, vous pouvez évidemment le créer en un laps de temps beaucoup plus court. C'était donc fluide. Si nous sautons ici, juste pour vous montrer rapidement éléments Web de l'organigramme du flux d'air. Et vous pouvez voir le nombre d'éléments différents que nous avons ici. Et vous pouvez évidemment créer des composants à partir de ces éléments. Vous pouvez modifier leurs couleurs. Donc, par exemple je veux changer la couleur de cet en-tête. Je peux le positionner ici. Ou si je veux changer complètement la couleur de mon arrière-plan, je peux le changer comme ça. Et évidemment, si vous avez des couleurs comme je vous le montre déjà dans ce modèle par défaut comme celui-ci. Donc, si vous avez créé vos couleurs, vous pouvez simplement appliquer cette couleur à cet élément. Vous allez travailler beaucoup plus vite de cette façon. Mais si tu ne le fais pas, c'est très bien. Vous pouvez intervenir ici et même changer les couleurs. Donc, par exemple, cela peut être rouge vif ou autre. Et puis cela peut être de la même couleur. Je peux donc le sélectionner comme ceci et vous pouvez voir à quoi cela ressemble. Il est donc évident que de nombreuses options sont incluses ici et tous ces éléments sont les mêmes. Vous pouvez voir que nous avons de nombreuses flèches différentes incluses à l'intérieur. D'un point d'entrée à de nombreux points de sortie. Tu peux faire ce que tu veux. Vous pouvez utiliser le danger, vous pouvez utiliser le rafraîchissement. Et je vous encourage vraiment à utiliser vos propres icônes. Vous pouvez utiliser ces icônes gauche et droite pour les étapes si vous le souhaitez. Mais en gros, vous pouvez voir à quoi ils ressemblent. Ils contiennent beaucoup plus de détails. Plutôt que ceux que je vous ai montrés précédemment pour les flux de tâches. Donc, en gros, vous avez deux options. Vous pouvez utiliser cette version qui est extrêmement légère, ou vous pouvez utiliser cette version, qui est beaucoup plus complexe. Mais il ne s'agit pas d'une mise en page définitive. Il s'agit simplement de mieux transmettre vos idées à vos coéquipiers, vos clients, à vos développeurs. Et l'avantage est que vous avez plusieurs points d'entrée et de sortie, plusieurs flux. Donc, par exemple, si je passe à celui que nous avons créé en utilisant flowy, donc comme ça, je peux créer, comme je l'ai mentionné ici. Nous avons donc ces deux flèches, par exemple, nous avons un bouton de fermeture juste ici, par exemple, où nous mène ce bouton de fermeture, il nous ramène à l' écran de connexion ou à cet écran. Vous pouvez donc imaginer que vous pouvez créer ces flux multiples, des flux complexes, des flux complexes, comme dans le modèle que je vous donne gratuitement. Vous pouvez intervenir ici. Et vous pouvez simplement ajuster tous ces éléments et les réduire. Si vous souhaitez appliquer une couleur différente, vous pouvez également le faire. Vous pouvez donc utiliser la couleur de votre choix sur ceux-ci. Et bien sûr, car il existe de très nombreux éléments différents divisés en catégories : témoignages promotionnels, équipe, blog, commerce électronique, etc. Pour les versions mobile et de bureau, votre flux de travail sera beaucoup plus rapide et vos délais de livraison seront beaucoup plus rapides. Et encore une fois, l' avantage de l'utiliser est que vos clients comprendront mieux que si vous utilisiez simplement quelque chose comme ça. C'est un excellent point de départ. Mais si les choses doivent être un peu plus complexes, par exemple, comme je vous le montre ici. Vous devez donc créer plusieurs flux, évidemment comme dans chaque application ici, alors je recommande vivement d'utiliser un modèle premium comme celui-ci , car cela améliorera vraiment votre flux de travail dramatiquement. Et cela va vraiment vous permettre de travailler beaucoup plus rapidement et de montrer vos idées à vos coéquipiers. Les clients sont des développeurs, ce qu'ils vont comprendre, car, surtout pour les clients, leur montrer quelque chose comme ça ne les rendra pas vraiment faciles à comprendre, mais leur montrer quelque chose comme ça, par exemple, cela leur permettra de mieux le comprendre parce qu'ils reconnaîtront au moins certains de ces éléments, plutôt que de simplement leur montrer ces formes vierges comme des cercles, des carrés, des losanges et des trucs comme ça. C'était donc un aperçu très rapide de ces modèles premium. Encore une fois, si vous souhaitez les obtenir avec une très grosse réduction, les liens se trouveront dans le PDF. Vous pouvez simplement cliquer sur ces liens et saisir le code de réduction que je vais vous fournir puis les obtenir et les utiliser dans XD, vous pouvez voir comment quelque chose comme ça peut améliorer considérablement votre flux de travail. Vous aurez toujours accès à ce flux de tâches de base gratuitement, bien sûr. Et vous pouvez le télécharger et l'utiliser. Mais si vous voulez améliorer votre jeu, si vous voulez montrer vos idées la meilleure façon possible à vos clients, à vos coéquipiers et à vos développeurs, alors l'utilisation ces modèles premium vous sera améliorée ce flux de travail massivement. Comme vous l'avez vu, vous pouvez tout changer, vous pouvez les ajuster comme vous le souhaitez. Vous pouvez travailler aussi vite ou aussi lentement que vous le souhaitez. Vous pouvez utiliser toutes sortes de couleurs différentes, toutes sortes de formes et d'icônes différentes , etc. Donc, si vous voulez utiliser quelque chose comme ça, encore une fois, je vais vous donner les liens et réductions dans un PDF et vous pourrez les consulter. Dans la vidéo suivante, nous expliquerons comment partager quelque chose comme ça avec vos coéquipiers, clients et développeurs. Alors je t'y verrai. 50. Partage de vos flux: partage de vos flux d'utilisateurs est un élément très important de l'ensemble du processus, car cela permettra réellement à vos clients, coéquipiers et à vos développeurs de comprendre le processus de réflexion qui sous-tend tout cela. Et cela va vraiment rendre la discussion beaucoup plus simple que de simplement faire ceci et simplement leur dire avec des mots ou quelque chose comme ça. Dans cette vidéo, je vais donc vous montrer quelques moyens pratiques que vous pouvez utiliser pour le montrer à vos clients et à vos développeurs. Donc, le premier est un, je l'ai créé pour mes modèles premium qui vous sont montrés. Donc, à la fois pour un flux que vous voyez ici et pour les organigrammes de flux d'air. Et vous pouvez les ouvrir si vous les achetez, ce que j'ai mentionné dans la vidéo précédente. Ce sont ces papiers. C'est donc le format A4, c'est le format d'une lettre américaine. Et vous pouvez simplement les ouvrir pendant que vous travaillez et aligner tous vos éléments ici, puis simplement les imprimer tous. Vous pouvez sélectionner cette option. Vous pouvez appuyer sur Ctrl ou Commande E dans XD, puis sélectionner PDF ici. Ensuite, vous pouvez appuyer sur Exporter et ce PDF prêt à être imprimé sera exporté. Vous pouvez l'imprimer et le montrer ensuite à vos clients. Ou si vos clients travaillent à distance et que vous n'êtes pas à leur portée ou quelque chose comme ça, vous pouvez simplement partager ces PDF avec vos clients, puis ils peuvent imprimer ces PDF, puis laissez des notes sur ces PDF. Ou mieux encore, vous pouvez simplement les aligner ici, puis cliquer ici pour les partager avec vos développeurs ou vos clients. Pour cela, vous pouvez simplement cliquer ici. Et cela va générer ce lien public. Ensuite, vous pouvez lui donner un nom ici, par exemple, disons un élément Webflow ou flux filaire pour un site Web ou quelque chose comme ça. Ensuite, vous pouvez le montrer ici. Il s'agit du nom du lien, puis vous pouvez simplement copier ce lien et partager avec vos clients. Ils peuvent ensuite laisser vos commentaires ici dans leur navigateur, puis vous pouvez simplement modifier l' apparence de ce flux utilisateur dans votre XD , puis revenir ici, dans l'onglet Partager. Ensuite, mettez simplement à jour ce lien, puis revenez et partagez à nouveau ce lien avec votre client. Le nom du client, le nom du projet, la date limite, le nombre de pages du site Web et d'écrans d' applications sont ce qui est vraiment important et ce qui déterminera réellement le montant que vous allez réellement facturer à la fin de ce projet, ou combien de temps le projet va prendre. Parce que d'habitude, ce sont surtout les designers indépendants qui facturent l'ensemble du projet. Ainsi, ils savent, par exemple , grâce à une conversation avec le client, si le client a un projet existant ou quelque chose comme ça, ils savent déjà combien il va facturer en collectant tous ces informations. Mais si ce n'est pas le cas, vous pouvez simplement travailler par étapes. Vous pouvez donc facturer cette phase d'exploration et de test utilisateur, de recherche utilisateur. Ensuite, une fois que vous aurez terminé, vous saurez, en utilisant simplement ces flux d'utilisateurs, combien d'écrans vous allez concevoir plus tard, combien de pages de site Web vous allez concevoir. Et à partir de ce chiffre, vous pouvez ensuite faire une estimation éclairée et facturer cette somme d' argent à vos clients. C'est pourquoi le partage est très important dans cette phase du projet. Parce que vous allez facilement savoir en utilisant ces flux d'utilisateurs combien d'argent vous allez réellement facturer à vos clients. Maintenant, c'est l'une des méthodes et vous pouvez ensuite suivre ce modèle, surtout si vous les achetez ou si ce n'est pas le cas, vous pouvez simplement utiliser quelque chose comme ça. Disons que c'est vous qui l'avez créé. Vous pouvez lui donner un nom ici, donc double-cliquez pour l' appeler comme vous le souhaitez. Donc, par exemple, le flux mobile, bien sûr, sera beaucoup plus propre lorsque vous le créerez réellement . Vous pouvez appuyer sur Contrôle ou Commande E. Ensuite, au lieu de PDF, vous pouvez sélectionner JPEG ou PNG. Vous pouvez cliquer sur Exporter, puis envoyer à un client de cette façon. En outre, ce que vous pouvez faire, c'est connecter ces pages. Disons donc que c' est le port numéro un, c'est notre port numéro deux. Vous pouvez passer en mode prototype, les connecter, puis simplement partager ce prototype, comme je l'ai mentionné ici, puis copier ce lien et le partager avec votre client. Désormais, l'avantage d'utiliser directement quelque chose comme ça dans Adobe XD est que vous ne gaspillez pas de papier. Tu ne perds pas ton temps. Tu ne leur fais pas perdre leur temps. Vous pouvez simplement partager un lien. Ils peuvent accéder à ce lien, commenter ce lien et vous faire part de leurs modifications. Vous pouvez le modifier dans XD, mettre à jour le lien, renvoyer, puis ils peuvent laisser le nouveau puis ils peuvent laisser commentaire jusqu'à ce que tout le monde soit satisfait. Ensuite, vous commencerez processus de conception avec des instructions claires de la part de vos clients, avec une compréhension claire de leur part et des développeurs quant à ce qui doit être fait dans ce cadre. projet. 51. AFFECTATION: Votre mission pour cette section est d'utiliser le modèle que j'ai fourni pour créer votre propre flux utilisateur. Vous voyez à quel point il est facile à créer, quel point il est facile à comprendre et pourquoi c'est un élément réellement utile de votre processus de conception. Essayez donc de vous l'approprier. J'ai essayé d'imaginer un client imaginaire et ce que vous voulez que vos utilisateurs obtiennent sur ce projet en particulier. Alors, entraînez-vous, essayez de vous débrouiller par vous-même. Vous pouvez changer les couleurs, vous pouvez changer la typographie, vous pouvez modifier l'ordre. Vous pouvez positionner ces flèches comme vous le souhaitez. Essayez simplement de vous l'approprier de pratiquer et de mieux apprendre. 52. SECTION 7 cadres de fil en papier: Fournir des cadres est un élément important du processus de conception car il est beaucoup plus facile , car il est beaucoup plus facile de se tromper sur une feuille de papier, mettre au rebut et de la jeter. Ensuite, pour toujours commencer par votre logiciel de conception , vous devez toujours le lancer, le configurer, le préparer pour votre flux de travail, etc. filaires en papier sont donc là pour accélérer ce processus et, quelle que soit votre idée, mettez-la sur une feuille de papier. Peu importe que cela fonctionne ou non. Il vous suffit de mettre toutes vos idées en tête sur une feuille de papier, de choisir deux ou trois des meilleures idées, puis de passer au logiciel de conception de votre choisir deux ou trois des meilleures idées, puis de passer au choix. C'est particulièrement important si vous travaillez en équipe, car tous les membres de l'équipe peuvent accéder à une seule feuille de papier beaucoup plus rapidement que si vous utilisiez un outil de conception et que vous souhaitez collaborer avec vos coéquipiers. Commençons donc. 53. Qu'est-ce que les filières de papier: wireframes en papier sont des éléments très importants de votre processus de conception UX, car ils constituent un moyen peu coûteux, facile et simple de faire passer vos idées de la tête baissée sur une feuille de papier. Ces idées sont juste pour vous, car à ce stade, vous allez simplement explorer les et les combinaisons de mises en page possibles en page et les combinaisons de mises en page possibles que vous allez explorer. Allez-vous, par exemple utiliser de nombreuses images ou plusieurs textes, de nombreuses icônes ou des éléments de ce genre ? Il s'agit donc simplement d' explorer la mise en page possible. Vous pouvez également partager ces wireframes avec vos clients, développeurs, parties prenantes et coéquipiers, bien entendu, afin d' obtenir leur avis et comprendre si vous allez dans la bonne direction, wireframes sont juste pour créer ces mises en page avant de passer au logiciel, car il est beaucoup plus rapide concevoir sur une feuille de papier et de dessiner ces formes régulières sur une feuille de papier juste pour obtenir vos idées venant de votre tête et juste pour comprendre où ce projet va éventuellement mener. Dans la vidéo suivante, nous allons discuter combinaisons de mises en page possibles et certains éléments principaux que vous pouvez inclure dans vos maquettes papier. Maintenant, ces éléments ne sont que quelques-uns des principaux éléments que j'ai découverts. Les 15 années que j'ai passées dans ce secteur fonctionnent mieux dans les wireframes papier. Mais bien sûr, vous pouvez toujours revenir en arrière et ajouter des éléments supplémentaires en plus de ces éléments habituels. Alors je t'y verrai. 54. Quels éléments inclure: Vous pouvez inclure quatre éléments principaux dans vos maquettes papier. Et ce sont des images, du texte, des boutons, des formulaires ou des champs. Les images existent parce qu'elles ont vraiment aidé à raconter une histoire et à guider vos utilisateurs vers l'objectif final possible. Maintenant, cet objectif final peut être pour eux d'acheter un produit que vous utilisez ou de réserver un service que vous proposez ou tout autre objectif. Mais en gros, les images sont là pour vous aider à raconter l'histoire beaucoup plus facilement car vous savez que dire une image vaut 1 000 mots et qu'en parlant de mots, vous devez utiliser du texte. Désormais, lorsque vous utilisez des textes, vous les utilisez en conjonction avec vos images pour mieux raconter l'histoire et mieux guider vos utilisateurs à travers cette histoire. Parce que la combinaison de textes et d'images aura vraiment un impact sur votre design, peu importe ce que vous créez. S'il s'agit d'un site Web, d'une application mobile produit Web basé sur un produit ou quelque chose comme ça, cela vous aidera simplement à raconter une meilleure histoire et à mieux guider vos utilisateurs. Je vais vous donner un exemple rapide. Par exemple, si vous vendez une chaussure, disons qu'une bonne image de cette chaussure sera beaucoup mieux convertie car vos utilisateurs comprendront tous les détails de la chaussure. Est-ce une chaussure de course ? S'agit-il simplement d'une chaussure de marche classique ? est de quelle couleur ? Quels matériaux sont utilisés et d'autres choses de ce genre. Tous ces éléments seront donc bien mieux représentés si vous avez des images de haute qualité, alors si vous avez des images de faible qualité et uniquement des éléments basés sur des champs de texte et une mise en page sur le côté image. L'utilisation simultanée de textes et d' images apportera donc beaucoup plus de valeur à vos utilisateurs. Ils comprendront beaucoup mieux votre produit ou service. Mais à la fin du but, ils doivent faire quelque chose. Et c'est là que les boutons entrent en jeu. Les boutons sont extrêmement importants car ils sont généralement appelés CTA ou call to action. Et c'est exactement ce qu'ils sont. Les utilisateurs doivent effectuer certaines actions. Ils doivent acheter ce produit, par exemple la chaussure que je viens de mentionner, ou ils doivent réserver un service, par exemple si vous offrez un service indépendant, un service design ou quoi que ce soit d'autre, ils ont pour le réserver à la fin de leur voyage. Journey est soutenu par des images et des textes. Et puis à la fin, il y a un bouton, mais ils doivent renseigner certaines informations dans votre dessin. C'est là que les formulaires et les champs entrent en jeu. Maintenant, les forums peuvent comporter de nombreuses mises en page, combinaisons, et ils peuvent être utilisés pour diverses choses. Mais ils sont généralement là pour collecter des informations sur les utilisateurs, par exemple les adresses e-mail, les informations de carte de crédit, la création de comptes utilisateur, etc. forums et les champs sont donc des éléments très importants de votre structure papier. Il existe désormais de nombreux éléments différents que vous pouvez inclure dans vos maquettes papier, par exemple des logos, des avatars, des logos de partenaires. Vous pouvez inclure les miettes de navigation, pagination, les différentes flèches, les info-bulles, etc. Mais tous ces éléments, je vais provenir de ces quatre catégories principales qui, selon moi fonctionnent le mieux au fil des ans dans le domaine du wireframing papier. Il existe aujourd'hui de nombreux styles de maquettes en papier. Et en fonction du temps dont vous disposez et du budget alloué à ce projet, vous explorerez ces styles possibles. Et dans la vidéo suivante, nous allons explorer ces styles et je vais vous montrer certains des principaux styles utilisés dans le cadre du filetage sur papier, mais aussi certains des styles sur lesquels vous pouvez dessiner ceux-ci pour améliorer l'aspect général et la qualité de vos maquettes papier. 55. Styles de filigrane: Il existe de nombreux styles filaires différents à partir de simples cases que vous pouvez dessiner sur une feuille de papier, juste pour mettre vos idées la tête baissée sur cette feuille de papier, et juste pour commencer à les former. cette disposition possible. Mais encore une fois, ils dépendent de l'ampleur du projet, du temps dont vous disposez et du budget du client. À la fin de la journée, vous allez créer différents styles et explorer différentes combinaisons de mise en page. Dans cette vidéo, je vais donc vous montrer ces styles et ce que vous pouvez faire avec des wireframes en papier. Donc, si nous revenons à Google et que nous faisions simplement une recherche rapide sur Google pour les simplement une recherche rapide sur Google pour les wireframes papier, si vous passez aux images. Et bien sûr, il existe de nombreux sites Web différents que vous pouvez explorer pour cela. Mais nous pouvons simplement explorer Google Images car c'est le plus rapide. Vous pouvez le voir ici pour le site Web, pour l'application, pour le prototype Android Design Envision mobile , peu importe. Vous pouvez explorer tout cela et, en gros, une mise en page comme celle-ci. Permettez-moi de passer à ici pour que vous puissiez mieux voir. Cette mise en page d'image, comme celle-ci, est la mise en page la plus courante car ces cases représentent des images qui représentent de gros éléments sur vos maquettes papier. Et ces gribouillis ci-dessous représentent le texte. Vous pouvez maintenant afficher ce texte de différentes manières. Vous pouvez utiliser des lignes plus épaisses. Vous pouvez mettre en valeur les lignes avec de la couleur. Et nous en parlerons dans certaines des prochaines vidéos de ce cours. Mais maintenant, il ne s'agit que d'un style simple et régulier que la majorité des designers utilisent. Vous allez utiliser ce style si vous ne disposez pas de trop de temps sur ce projet, si le budget du client est limité , etc. Mais en gros, c'est la principale dette stylistique que j'aime utiliser pour montrer ce style. Par exemple, vous pouvez voir ce dessin ici. Maintenant, c'est le style suivant et vous pouvez bien sûr voir le texte, qui est le vrai texte dans ce cas, qui demande encore une fois beaucoup plus de temps. Pensez donc à toutes ces choses la prochaine fois que vous dessinerez ces maquettes en papier. Parce que si vous ne consacrez pas trop de temps à vos projets, si le client ne vous paie pas trop d'argent, n'investissez pas trop de temps dans des maquettes papier. Encore une fois, le but des wireframes papier est d' explorer des idées rapides et de les saisir de la tête baissée sur une feuille de papier. de compte, c'est tout l'intérêt En fin de compte, c'est tout l'intérêt des wireframes papier. N'investissez donc pas trop de temps. Vous pouvez voir à quel point ils sont désordonnés. Par exemple, agit que de quelques gribouillis et vous pouvez voir une combinaison de ces éléments simples, par exemple ces cases, ces gribouillis pour les textes mais aussi des textes ordinaires comme e-mail, mot de passe, etc. Vous pouvez voir le bouton Modifier ici. Vous pouvez voir que ce type de dessin s'offre à une personne pour le profil. Vous pouvez voir cette coche pour les fichiers enregistrés. Donc, encore une fois, vous pouvez combiner tous ces éléments en fonction du temps dont vous disposez sur ce projet. Mais si je ferme ça très rapidement et que j'explore différentes mises en page, vous pouvez voir celle-ci qui est bien organisée. Et j'aime faire ce style personnellement. Et vous allez le voir dans certaines des dernières vidéos de ce cours. J'aime me laisser de l'espace sur le côté droit ou sur le papier parce que c'est là que je peux dessiner mes idées. Je peux établir des directives possibles de la part de mes coéquipiers pour les clients et d'autres choses de ce genre. Par exemple, si vous avez une idée, vous avez cet espace vide à droite ou à gauche, peu importe si vous écrivez de la main droite ou de la main gauche. Le but ici est de laisser un espace pour les notes, par exemple, vous pourrez vous rappeler plus tard : À quoi pensiez-vous au moment de la création de ce wireframe papier ? Donc, la prochaine fois que tu y retourneras, tu te souviendras, d'accord, c'est ce que je pensais en ce moment. donc très important d'avoir un espace comme celui-ci est donc très important d'avoir un espace comme celui-ci et cela vous aidera vraiment plus tard. Encore une fois, pour la mise en page, vous pouvez voir le texte ici, mais vous pouvez aussi ces boîtes simples. Mais si je clique sur celui-ci, vous pouvez voir à quel point il est détaillé. Nous avons donc ici toutes ces illustrations géniales, par exemple pour que vous puissiez explorer des mises en page comme DOS. Et ici, nous avons des marqueurs. Nous avons tous ces différents éléments que vous pouvez utiliser. Si je clique sur celui-ci, vous pouvez voir cette personne utilise des marqueurs. Ils utilisent tous ces wireframes. Et si je clique sur celui-ci, vous pouvez voir que cette personne, ce designer occupe l'espace de celles-ci. Donc, par exemple, c'est la couleur principale de l'application et vous pouvez voir qu'elle a utilisé des boutons en forme de cœur décolorés. Vous pouvez donc vraiment opter pour ce style si vous souhaitez mettre en valeur la couleur du logo de la marque de votre client ou quelque chose comme ça. Ensuite, si je fais défiler la page un peu plus vers le bas, vous pouvez voir cette approche, qui est utilisée dans les bureaux du monde entier. Ainsi, par exemple, les concepteurs aiment vraiment utiliser cette approche car ils peuvent facilement la montrer à l'équipe. Ils peuvent le présenter au client ou aux parties prenantes car ils peuvent dessiner sur une feuille de papier, le découper avec des ciseaux, puis simplement le coller au mur, par exemple et simplement les présenter des wireframes permettant à leurs clients de comprendre le flux global de l'application ou du site Web, par exemple, si l'utilisateur clique sur le bouton Session du livre, où va-t-il être dirigé ? Vous pouvez donc utiliser des modèles de ces appareils mobiles ou de sites Web, peu importe. Ensuite, vous pouvez simplement guider vos utilisateurs à travers votre structure papier. Et si je fais défiler la page un peu plus vers le bas, j'essaie juste de trouver, par exemple , ce style, vous pouvez voir que des stylos beaucoup plus détaillés sont utilisés dans différentes mises en page. Êtes-vous, comme vous pouvez le voir, le menu contextuel utilisé ici. Vous pouvez donc utiliser tous ces éléments qui vous aideront, vous, vos utilisateurs et vos coéquipiers, à comprendre comment ces wireframes vont devenir un véritable design plus tard, une fois que vous aurez accédé à votre logiciel de choix. logiciel que je préfère est Adobe XD, qui est incroyable, mais j'utilise quand même wireframes papier dans tous mes projets car comme je n'arrête pas mentionner dans cette vidéo et dans ce cours, Le logiciel que je préfère est Adobe XD, qui est incroyable, mais j'utilise quand même des wireframes papier dans tous mes projets, car comme je n'arrête pas de le mentionner dans cette vidéo et dans ce cours, me donne simplement la possibilité de mettre toutes ces idées rapides sur une feuille de papier et de les communiquer à mes clients. Encore une fois, vous pouvez voir dans cet exemple, vous pouvez voir dans cet exemple que vous pouvez obtenir des détails avec des wireframes papier ou vous pouvez vous compliquer avec des wireframes papier. Tout dépend donc vraiment de vous, du budget du client et du temps que vous consacrez à ce projet. Parce que comme je n'arrête pas de le mentionner dans ce cours, vous n'allez pas passer trop de temps à dessiner ces illustrations détaillées, ces icônes de détails. Si le client ne vous paie pas assez d'argent pour le faire pour ce projet en particulier. Il suffit donc de garder ces choses à l'esprit. Et pour ce qui est du style, vous pouvez voir si vous n'êtes pas vraiment douée pour dessiner comme moi, je ne le suis pas, je ne suis pas vraiment douée pour dessiner, mais j'utilise toujours ces maquettes en papier pour plus d'un dix ans maintenant, et cela ne m'a jamais posé de problème. Vous pouvez donc toujours utiliser une règle, par exemple pour garder les lignes droites. Ou vous pouvez utiliser différents papiers à points qui seront mentionnés plus loin dans ce cours. Mais le but ici est de mettre ces idées de votre tête sur une feuille de papier , car il n' existe aucun logiciel qui soit plus rapide que votre cerveau et votre main. Il suffit donc de garder ces choses à l'esprit. Dans la vidéo suivante, nous allons discuter de l' équipement dont vous aurez besoin pour dessiner ces maquettes en papier, car il existe des options d'équipement très basiques et il existe des options d'équipement très avancées . Je vais donc simplement les partager avec vous. Et encore une fois, en fonction du budget du client et du temps dont vous disposez réellement sur ce projet, vous allez utiliser l'un ou l'autre. Alors je t'y verrai. 56. Équipement dont vous avez besoin: En ce qui concerne l'équipement, il existe de nombreux choix différents. Vous pouvez passer à partir d'un équipement vraiment standard. Et je recommande vraiment, surtout si vous débutez, commencer par un équipement standard, surtout si vous n'avez jamais utilisé de maquettes en papier auparavant. Et puis gravissez les échelons et achetez simplement toutes ces options plus chères fur et à mesure que vous montez de niveau. Donc, dans cette vidéo, je vais juste vous montrer peu du matériel que j'utilise, qu'un romancier utilise au fil des ans. Et juste pour te montrer de quoi il s'agit. Voici donc tous les équipements que je possède actuellement et que j'ai utilisés dans tous mes différents projets. Donc, ceci n'est qu'un simple bout de papier blanc. C'est le papier d'impression parce que je vis en Europe. J'utilise une feuille de papier A4 si vous êtes aux États-Unis, au format lettre pour vous. Mais en gros, j'utilise ce papier A4 car mon imprimante le supporte. Et si vous vous souvenez bien, je viens de le mentionner lorsque je souhaite partager ces wireframes avec mes clients, mes coéquipiers et d'autres choses de ce genre. Je trouve vraiment qu'il est plus facile de le faire avec un scanner. Je peux donc simplement prendre cette feuille de papier A4, numériser, puis l'envoyer à toutes les personnes en question. Ensuite, ce que nous avons, c'est juste ce vieux crayon ordinaire. Et vous pouvez utiliser ce crayon pour dessiner ce que vous voulez sur cette feuille de papier. Et juste de l'équipement de base sur place. Ensuite, j'ai ce stylo et vous pouvez utiliser n'importe quel stylo, mais je vous recommande vivement d'avoir un stylo noir ou bleu. Peu importe ce que vous utilisez, vous aurez toujours besoin d'en utiliser certains. Et puis j'ai aussi ce groupe, qui est complètement noir mais un peu plus foncé, comme vous pouvez le voir ici. Ce groupe m'aide donc vraiment à annoncer certains détails, comme Drop Shadows, par exemple . Ou si je veux juste le remplir de couleur. Ensuite, j'ai une règle et dans la majorité de mes wireframes, je n'utilise pas de règles du tout parce que je trouve vos règles ne font que me ralentir beaucoup. Mais si vous le souhaitez, vous pouvez toujours utiliser une règle juste pour vous aider à démarrer, juste pour jeter les bases. Parce que si vous dessinez à main levée, vos mises en page ressembleront évidemment à ceci, par exemple si vous vous souvenez de l'exemple précédent pour les images que je vous ai montrées. Mais si vous le souhaitez, vous pouvez utiliser la règle juste pour obtenir ces lignes parfaites comme celle-ci, mais vous pouvez voir à quel point cela est plus lent par rapport à cela. Encore une fois, nous allons toujours revenir à cette chronologie et à la chronologie du projet. Cela dépend donc vraiment du temps dont vous disposez sur votre projet, vous allez utiliser l'un ou l'autre. Ensuite, nous avons tous ces marqueurs, vous pouvez donc utiliser différents marqueurs. Et ce n'est qu'un type que j'ai acheté dans mon magasin local. Peu importe donc de quel type de créateur il s'agit. C'est un pastel Firebird, voyons voir. C'est de la fibre Pelican, Christelle, c'est une marque inconnue, du néon ou autre. Cela n'a donc pas vraiment d' importance, car encore une fois, ces marqueurs ne sont là que pour mettre en valeur la couleur utilisée par votre client. Disons que nous avons un bouton, et créons un bouton ici. Et disons que je souhaite surligner ce bouton utilisant cette couleur pour que vous puissiez voir à quel point c'est rapide. Et si vous vous souvenez de cet exemple, que je vous montre en ligne, vous pouvez simplement mettre en valeur cette couleur et intégrer simplement à votre projet. Si c'est la couleur du client, une fois que vous commencez à gagner, certains clients souhaitent commencer à prendre de l'ampleur. Une fois que vous commencez à gagner peu d'argent, mais une fois que vous commencez à gagner suffisamment d'argent à ces projets pour commencer à réinvestir dans elle-même et dans votre équipement. Je vous recommande vraiment de vous les procurer. Maintenant, c'est ce que l' on appelle du papier quadrillé à points. Et ce papier provient de nombreuses cultures différentes, de nombreux formats différents ressemblent une fois de plus à ce papier. Mais la différence réside dans tous ces points, ils sont là pour vous aider à ne pas utiliser de règle. Maintenant, encore une fois, vous pouvez utiliser une règle. Et dans les prochaines vidéos, vous allez voir qu'une fois que nous aurons commencé à dessiner ces wireframes, j'utiliserai la règle pour des raisons de cohérence, de mise en page des combinaisons et des trucs comme ça. Parce que j'y suis habitué à ce stade. Dans la majorité de mes cas, je n'utilise pas le rouleau parce que ces idées ne me concernent que pour moi. Ces papiers, si vous commencez à les utiliser ou besoin de différents types d'équipement, car si je montre, si je prends ce marqueur, par exemple et que je commence à dessiner dessus, vous ne pouvez pas voir ce marqueur très bien car ce papier quadrillé à points est beaucoup plus épais que ce papier. Ces marqueurs ne fonctionnent donc pas vraiment ici. Vous avez donc besoin d'un équipement spécialisé comme celui-ci. Maintenant, ce sont des stylos Jelly Roll et celui-ci vient de Sakura. C'est, je ne sais pas, une autre marque, peu importe. Donc, la marque n'a pas vraiment d' importance dans ce cas, ce qui compte, c'est la façon dont elles fonctionnent. Donc, en gros, ces stylos, contrairement à ces crayons, par exemple ou aux stylos que vous utiliserez normalement, ne contiennent pas de gel à l'intérieur. C'est ce gel qui permet à cette structure filaire de se démarquer. Comme j' ai tous ces points, vous pouvez voir que je dessine beaucoup plus rapidement sans règle. Et je vais quand même avoir une certaine cohérence et une belle mise en page. Et vous pouvez clairement voir la différence entre ceci et cela. Ça a l'air tellement mieux, parce que c'est sur une feuille de papier noir. J'utilise ces stylos blancs plutôt que celui-ci parce que c'est sur une feuille de papier blanc et je les utilise, donc ils ressortent beaucoup mieux. Il a l'air beaucoup plus raffiné et professionnel. Et cela va vraiment beaucoup mieux impliquer vos clients. Je l'ai découvert au fil des ans parce que les clients aiment vraiment voir sur quoi vous travaillez parce qu'ils vous payent pour votre travail à la fin de la journée, évidemment. Il faut donc vraiment leur montrer à quoi sert leur argent. Donc, en gros, c'est tout pour l'équipement. Vous pouvez commencer petit. Tout le monde peut se permettre l'un ou l'autre d'entre eux. Vous pouvez donc commencer petit, vous pouvez commencer lentement. Et puis, une fois que vous avez effectué une mise à niveau, une fois que vous commencez à gagner de l'argent, vous pouvez investir dans différents marqueurs. Encore une fois, il n'est pas nécessaire qu'il s'agisse d'une marque aussi chic de nuances de marqueurs ou rien de tout ça. Parce que vous n'êtes pas illustrateur, vous ne dessinez pas, vous esquissez simplement ces idées sur une feuille de papier pour les présenter à vos clients. Dans la vidéo suivante, nous allons commencer par le croquis. Je vais vous montrer quelques idées et je vais vous montrer comment vous pouvez travailler avec ces maquettes en papier et comment vous pouvez réellement transformer les idées que vous avez en tête. Placez-les sur une feuille de papier puis transformez-les en mise en page, que vous pourrez ensuite utiliser dans votre logiciel préféré. Alors je t'y verrai. 57. Dessin sur du papier clair: Dans cette vidéo, nous allons dessiner sur une feuille de papier ordinaire, et je vais vous montrer comment vous pouvez inverser la mise en page que vous avez en tête et la déposer sur cette feuille de papier. Comme je l'ai mentionné dans l'une de mes vidéos précédentes, notre exemple de chaussure, Dent, lorsque vous utilisez des images en conjonction avec du texte, est très important pour leur donner du contexte. Et il est très important d'avoir des images de haute qualité qui aideront à raconter une meilleure histoire à vos utilisateurs. Donc, dans cet exemple, nous allons dessiner, nous allons utiliser l' exemple de chaussure que j'ai mentionné dans la vidéo précédente. Commençons donc. Comme vous pouvez le voir, ce que j'ai ici n' est qu'un simple morceau de papier imprimé, comme je vous l'ai montré précédemment. J'ai deux marqueurs que je vais utiliser uniquement pour indiquer les boutons, par exemple les zones cliquables. J'ai ma règle, j'ai un crayon et j'ai ce stylo. Je vais utiliser le crayon pour les ombres tombantes, par exemple juste pour annoncer certaines de ces ombres tombantes. Alors, sans plus attendre, commençons. Ce que j'aime vraiment faire sur tous mes wireframes, c'est que, comme je l'ai mentionné dans la vidéo précédente, où nous explorons les styles de wireframes, j'aime vraiment laisser cette partie de mon papier vierge parce que m'aide à prendre quelques notes que j'ai et qui seront très utiles pour les retrouver plus tard si je me souviens de quelque chose, ou pour mes coéquipiers ou mes clients si je veux les guider dans une certaine direction. Alors, qu'allons-nous faire ? Tout d'abord, nous allons en dessiner un bref aperçu. Comme je l'ai dit, vous pouvez utiliser une règle, mais ce n'est vraiment pas obligatoire. Et vous pouvez être très strict avec vos angles, par exemple vous pouvez faire des angles droits. Vous pouvez utiliser les règles que les concepteurs automobiles utilisent, par exemple , simplement pour donner tous ces angles et d'autres choses de ce genre. Mais je ne vais pas faire ça. Je ne vais pas m'embêter avec trop de détails. Je vais juste faire quelque chose comme ça. Donc, ce sera notre navigation ici en haut. Je vais utiliser un style d'avion et de navigation parce que vos utilisateurs sont habitués à ce que certains types de navigation soient certifiés. Alors ne compliquez pas les choses trop, assurez-vous d'utiliser quelque chose que tout le monde peut comprendre. Dans la plupart des cas, les navigations ont déjà fait leurs preuves. N'essayez donc pas d'inventer de l'eau chaude simplement pour le plaisir, utilisez des navigateurs qui fonctionnent déjà dans Ready Convert. Eh bien, dans ce cas, je vais utiliser la navigation. Je vais mettre un logo ici. Et pour cela, je vais simplement dessiner un cercle. Et je peux utiliser immédiatement ma couleur pour pouvoir la remplir joliment comme ça. Et puis je pourrai faire quelque chose comme ça. Je peux donc utiliser à nouveau ma règle, m'assurant de me situer quelque part au milieu. Cela n'a pas vraiment d'importance. Et je vais les utiliser pour indiquer ma navigation ici. Ce que je vais faire, c'est dessiner deux boutons. Je vais donc le faire à main levée. Par exemple, comme ça. Par exemple, comme ça. Ce bouton juste ici sera le bouton de connexion, par exemple parce que c'est le point principal. Je souhaite que mes utilisateurs se connectent et aient autant d'utilisateurs que possible. Et cela peut être, par exemple , le bouton d' inscription, qui ramènera mes utilisateurs dans leurs profils. Je vais le noter. Je vais donc dessiner une flèche comme celle-ci. Il a donc utilisé celui-ci. Ainsi, nous pouvons mieux le voir. Alors inscrivez-vous et cela peut être une connexion ici. Je peux le souligner car encore une fois, c'est bien plus important que de s'inscrire car vous avez déjà ces utilisateurs, mais vous devez convertir nouveaux utilisateurs et attirer de nouveaux utilisateurs sur votre site Web. Ensuite, je voudrais créer une belle image de grand héros afin pouvoir la positionner approximativement ici, par exemple, et comme nous avons parlé de chaussures, encore une fois, je ne suis pas très douée pour dessiner, mais je suis je vais juste illustrer cela ici. Bien sûr que tu peux. Si tu es douée pour le dessin, tu peux dessiner ceci. Vous pouvez également prendre des images sur Internet, les découper, puis les coller sur une feuille de papier. Mais encore une fois, cette approche demande beaucoup de temps et d'énergie. Assurez-vous donc de bien comprendre cela avant de vous lancer dans un tel processus. Dans mon cas, je vais juste griffonner quelque chose qui ressemble à une chaussure. Mais avant de le faire, je voudrais positionner un texte. Je vais donc utiliser un joli gros titre ici. Comme ça. Et je vais le remplir avec une couleur comme celle-ci. Alors je vais utiliser des sous-titres ici. Ensuite, je pourrai utiliser mon crayon pour le remplir ici. Et puis en dessous, je peux utiliser un bouton car celui-ci est juste là et décrit votre produit. Tirez dans notre étui. Et je vais réutiliser cette couleur. Créons donc maintenant une forme de base qui ressemble à la chaussure. Encore une fois, je ne suis pas très douée pour le dessin. Donc je vais, disons, faire quelque chose comme ça, peut-être comme ça, puis terminer ici. Peut-être comme ça, comme ça, puis déposez-le ici. peut-être pour les lacets, quelque chose comme ça. Et utilisons des rayures sur le côté. Comme si vous aviez une forme ici, et voilà, nous avons quelque chose qui ressemble à une chaussure. Et puis ce que je peux faire à l'arrière, je peux créer peut-être un cercle ou une forme, ce qui donnera à notre chaussure, le devant, quelque chose comme ça. Et voilà. C'est l'image de notre héros. Le but de cette image de héros est donc de mieux convertir vos utilisateurs. Ce titre va donc indiquer de quoi il s'agit. C'est une chaussure. Donc le nom de la chaussure, le nom de la marque ou quelque chose comme ça. sous-titre va décrire un peu plus de détails sur l'émission. Donc, par exemple les matériaux dont il est fait ou à quoi sert-il ? Est-ce pour courir, est-ce pour marcher, des trucs comme ça ? Et puis le bouton, les utilisateurs peuvent vérifier et accéder à une page séparée, qui concerne cette chaussure en particulier. Il suffit donc de garder toutes ces choses à l'esprit. Alors, ce que je peux faire , c'est dessiner une pagination ici. Les utilisateurs peuvent donc cliquer sur ces points. Et disons que ce point est rempli. Ou cela peut être un curseur automatique et il peut simplement aller automatiquement vers la gauche et la droite. Et les utilisateurs ne peuvent pas vraiment cliquer dessus pour les modifier, ou ils le peuvent, selon la mise en page que vous choisissez réellement à la fin. Ensuite, ce que je vais faire ci-dessous, c' est créer une sorte de bande de logo. Utilisons donc une règle et créons quelques cercles de base. Alors peut-être que je pourrais créer quatre cercles. Ensuite, faites simplement quelque chose comme ça. Et positionnez-le, par exemple avec des partenaires ou des magasins partenaires, quelque chose comme ça. Disons donc que c' est une chaussure bien connue. Et puis ces partenaires peuvent représenter tous ces magasins célèbres, par exemple où cette chaussure est en sel. Ensuite, en dessous, ce que je peux faire est d'inclure une vidéo comme celle-ci, par exemple. Et je suis juste en train de trouver des idées. Je suis juste en train de tester ces choses et de les explorer. Alors peut-être que nous pouvons faire quelque chose comme ça. Je peux peut-être créer un cercle tout de suite, comme ça. Et puis utilisez ce stylo pour placer un bouton de lecture au centre comme ceci. Cela peut donc être une vidéo. Et puis derrière cette vidéo , je peux par exemple inclure une belle ombre tombante comme celle-ci. Et cette ombre en forme de goutte indiquera que les utilisateurs peuvent cliquer sur cette vidéo en particulier. Mais je peux également indiquer que c'est l'image. Ainsi, même s'il s'agit d'une vidéo, il s'agit toujours d'un élément d'image. Et puis ce que je peux faire ici c'est mettre un joli gros titre. Ensuite, mettez un gros sous-titre derrière, désolé, en dessous, comme ceci. Et puis, par exemple, un bouton, où les utilisateurs peuvent cliquer et effectuer une certaine action. Disons donc que cette vidéo décrit cette chaussure ou le processus de création de ces chaussures ou quelque chose comme ça. dessous, ce que nous pouvons faire, par exemple, est fournir certains services et de fournir un aperçu des services réellement fournis par ce site Web. Donc, par exemple, en plus de vendre des chaussures, ils prennent peut-être chaussures d' occasion et les mettent ensuite sur leur site Web. Ils sont peut-être en train de les remettre à neuf. Vous devez donc vraiment discuter avec votre client de tous ces détails et de ce qu'il fait réellement. Mais dans notre cas, par exemple, peut-être que nous ne vendons pas seulement des chaussures, peut-être que nous vendons également des vêtements. Donc, par exemple, vous vendez des t-shirts, nous vendons des vestes, nous vendons toutes ces choses. Je vais donc mettre ces trois boîtes. Une de mes images, et utilisons quelque chose comme ça peut-être juste pour indiquer que ce sont nos images. Encore une fois, si vous utilisez cette main libre, vous serez beaucoup plus rapide. Mais je vais juste vous montrer dans ces vidéos que vous pouvez utiliser une règle comme celle-ci. Ce sont donc les images que disent les analystes d'autres services, quels autres produits ? Donc, encore une fois, je pourrai savoir plus tard, quand je reviendrai ici, de quoi il s'agit. Nous avons donc peut-être un texte plus volumineux. Par exemple le titre de ce produit, puis nous avons une description comme celle-ci, puis nous avons un lien. Je peux donc le faire comme ça. Ensuite, je peux le mettre en valeur en utilisant cette couleur. Et puis je peux pointer du doigt pour adhérer et dire lien. Les utilisateurs peuvent donc cliquer ici pour accéder à ce produit. Ce que nous pouvons faire ci-dessous, c'est peut-être mettre une grande image et grande image de héros ou une vidéo diffusée en boucle comme celle-ci. Alors peut-être modéliser avec le produit. Comme ça. Et puis en dessous, nous pouvons terminer cela, par exemple avec une autre section comme celle-ci. Peut-être pouvons-nous par exemple dire quelque chose comme à propos du fabricant de ce produit en particulier ou quelque chose comme ça. Ou peut-être pouvons-nous même montrer un autre produit ici avec une image. Et comme nous avons utilisé une mise en page de gauche ici, nous pouvons peut-être utiliser une mise en page de droite ici juste pour diviser notre mise en page un peu comme ceci. Et je peux appeler cette image de produit comme ça. Et puis ce que je peux faire, c'est mettre un titre ici, joli gros sous-titre ici, comme ça. Ensuite, mettez un bouton ici. Encore une fois, les utilisateurs peuvent acheter ce produit ou au moins visiter une page pour acheter ce produit. dessous, ce que nous pouvons faire, c'est créer un formulaire de contact. Donc, ce que je peux faire, c'est mettre un titre ici, un sous-titre ici, par exemple, puis un tas de ces titres. Alors remplissons ceci. Remplissons ceci. Donc, ce que c'est, par exemple, je peux le mettre ici. Donc, formulaire de contact, par exemple, nous aimerions avoir de vos nouvelles, contactez-nous en utilisant les informations de contact ci-dessous, puis l'adresse, numéro de contact, l'adresse e-mail ou quelque chose comme ça. Ensuite, nous pouvons mettre notre formulaire de contact ici. Ce sont donc des champs de formulaire comme celui-ci. Et je peux par exemple mettre une ligne comme celle-ci juste pour indiquer par exemple votre e-mail, votre nom, votre adresse, quelque chose comme ça. Et puis en dessous de tout cela, on peut mettre un bouton. Mettons un bouton ici, juste pour casser un peu notre mise en page, car nous avons un bouton gauche juste ici, comme celui-ci. Ensuite, ce que je peux faire à la fin, c'est couper ça, par exemple comme ça. Ensuite, je pourrai mettre un logo ici, comme celui-ci. Et puis je peux mettre un menu d'éléments de navigation. Voyons voir, 123-456-2345. Je peux peut-être Jeremy et un autre ici. Ce sera donc notre navigation, par exemple original Copyright 2022, et le nom de la marque comme celui-ci, par exemple, et ensuite vous pourrez mettre les conditions d'utilisation. Vous pouvez mettre une politique de confidentialité ou quelque chose comme ça. Ainsi, vous pouvez voir en quelques minutes, 10 minutes environ, que vous pouvez créer quelque chose qui soit vous pouvez créer quelque chose qui très beau et qui montre vraiment à vos clients le DID ou que vous l'avez fait. Et tu peux mettre cette idée comme ça sur une feuille de papier. Mais j'ai oublié d'écrire ici, c'est pour mettre une ombre de fond, par exemple I. peux même pointer du doigt, appeler ça en drop shadow pour que les clients, les coéquipiers, les développeurs et toutes les personnes impliquées puissent savoir ce que tu voulais vraiment dire par là. Alors voilà. C'est ainsi qu'il est facile de dessiner sur une feuille de papier ordinaire. Et si vous débutez ou si vous avez déjà débuté dans ce secteur, je vous recommande vivement d'utiliser ce papier car il est extrêmement bon marché. Comme vous pouvez le constater, il est extrêmement rapide à dessiner. Mais dans la vidéo suivante, je vais montrer qu'il s'agit d'un papier quadrillé à points, le papier noir que j'ai. Mais vous pouvez également obtenir de nombreuses autres couleurs. Et juste pour vous montrer à quoi cela ressemble, cette mise en page ressemble à ce morceau de papier. Ensuite, vous pouvez comparer ce que vous préférez réellement. feuille de papier ordinaire ou une feuille de papier quadrillée à points si vous voulez y investir un peu plus d'argent. Alors je t'y verrai. 58. Dessin sur un papier de grille à points: Dans cette vidéo, nous allons utiliser ce papier quadrillé à points noirs que je vous ai montré. Et nous allons créer exactement la même mise en page que précédemment avec le papier d'impression blanc ordinaire . Et je vais montrer quelques différences entre ce morceau de papier noir foncé et ce morceau de papier blanc. Commençons donc. Et tout d'abord, vous avez toutes ces différentes épaisseurs de stylos. C'est donc le numéro cinq, par exemple c'est le numéro huit, c'est le numéro dix. Évidemment, plus le chiffre est élevé, plus la ligne sera épaisse. Je vais donc commencer par le plus léger. Je vais donc faire comme avant. Je vais simplement créer le plan. Et il est beaucoup plus facile d'aligner votre règle ici parce que vous utilisez ces notes. Je vais faire quelque chose comme ça. Je vais faire quelque chose comme ça, par exemple, comme je l'ai dit, c'est beaucoup plus rapide et plus facile lorsque vous pouvez réellement compter le nombre de ces points que vous avez. Donc, tout d'abord, créons cette navigation afin que je puisse créer un cercle pour mon logo. Et comme je n'ai pas couleur orange que nous utilisions auparavant, je vais utiliser celle-ci juste pour la renseigner. Comme ça. Ensuite, je vais utiliser le même style. Allons-y juste pour les indiquer. Et je vais simplement créer à nouveau ces deux boutons. Je peux donc créer un bouton comme celui-ci, bouton On comme celui-ci. Ensuite, je vais utiliser cette couleur grise pour remplir mon bouton d'inscription. Et je vais utiliser cette couleur violette pour remplir mon bouton de connexion. Encore une fois, vous pouvez utiliser différentes couleurs. Si je prends ceci et que nous testons cela, lisons et voyons si cela fonctionne mieux. Je ne crois pas. Mais allons-y. Il est beaucoup plus foncé que ce violet en fait. Je vais donc changer comme ça, mais évidemment, selon la couleur du client, vous allez utiliser l'une ou l' autre. J'en ai déjà parlé. Passons donc à la suivante. Je vais utiliser le numéro huit parce que je ne trouve pas que ces lignes sont assez épaisses. Alors alignons-le comme ça. Et vous pouvez voir tout de suite le cœur plus sombre. C'est pourquoi je vais les utiliser pour mon titre, par exemple remplissons-le comme ça. Ensuite, je vais utiliser ce nœud gris pour mon sous-titre. Comme ça. n'y a pas beaucoup de différence , mais vous comprenez. Et je vais utiliser ce bouton rouge pour notre bouton. Remplissons-le bien, comme ça. Ensuite, je vais utiliser ces cercles pour notre pagination. Remplissons ceci. Comme ça. Ensuite, je vais utiliser cette chaussure plus légère pour créer ma chaussure comme ça, par exemple comme ça. Et bien sûr, en fonction du temps que vous souhaitez investir, du temps dont vous disposez sur votre projet. Encore une fois, je peux continuer à me répéter ou vous pouvez investir en fonction du projet en question. Alors ressentons la même chose. Tracons ces lignes très rapidement, comme nous l'avons fait précédemment. Et si tu te souviens bien, nous avions ce cercle. Maintenant, je vais utiliser le numéro dix, qui est le plus épais que j'ai, comme celui-ci, et le remplir simplement avec une couleur de fond ici. Maintenant, ce que vous pouvez également faire, c'est par exemple les remplir avec cette couleur. Comme ça. Encore une fois, je reviens toujours au temps que vous avez réellement consacré à ce projet. Vous pouvez donc en faire ce que vous voulez. Ensuite, nous avons cette bande de logo. Laissez-moi donc créer ici même. Et nous avons eu ces cercles. Il est donc positionné pour différents cercles. Mon Excel. Et en dessous, nous avions cette vidéo comme celle-ci, comme ça. Et je vais en fait créer un cercle au centre comme celui-ci. Et voyez où se trouve mon numéro dix. Alors, c'est ici. Je vais simplement dessiner ce bouton de lecture à l'intérieur en utilisant ma couleur blanche. Et je peux continuer à utiliser ce chiffre dix pour mon titre. Je peux utiliser cette couleur grise pour mes sous-titres. Et voyons voir. Je peux utiliser ce chiffre cinq. Je peux l'utiliser pour le bouton, puis le remplir simplement avec ma couleur rouge comme ça. Ensuite, nous avons ces titres. Continuons donc à utiliser le numéro dix. Voir les titres. Je vais le faire à main levée comme ça. Donc titre principal, sous-titre. Et ce que nous avions ci-dessous se trouve dans ces images. L'avantage cet article, c'est que vous pouvez réellement compter. Je ne vais pas m'embêter car nous avons déjà créé cette mise en page, mais si vous le souhaitez, vous pouvez compter le nombre de points que vous utilisez pour votre mise en page. Ainsi, vous pouvez vous assurer que toutes vos lignes sont parfaites, toutes vos hauteurs sont parfaites. Ce qui, à son tour, va créer une mise en page beaucoup plus propre. Donc, encore une fois, en fonction de ce que vous voulez réaliser, ce que vous voulez utiliser, vous pouvez opter pour l'un ou l'autre. Je préfère légèrement ce papier noir car les détails se détachent bien mieux que sur une feuille de papier blanche. C'est bien sûr un peu plus cher, puis un morceau de papier blanc. Mais selon ce que vous voulez réaliser, ce que vous voulez créer, vous allez choisir l' un ou l'autre. Nous les avons donc créés et continuons avec celui-ci. Nous avions donc ce titre comme celui-ci. Je vais passer à celui-ci pour les petites lignes comme celle-ci. Et finalement, nous avons eu ce lien à la fin. Comme ça. Ensuite, nous avons eu cette grande image. Utilisons donc celui-ci pour le décomposer un peu. Comme ça. Et je vais simplement utiliser à main levée pour ne pas perdre trop de temps. Et je pense que la meilleure option serait de décrire cela un peu mieux avec le chiffre dix. Comme ça, parce que cela va en fait décrire l'ensemble du site Web bien mieux que cela, cinquième, mais comme je l'ai dit, vous pouvez explorer et faire ce que vous voulez. Passons maintenant à la création de ce titre. Alors faisons-le. Je vais placer ce titre ici. Nous allons avoir ce sous-titre. Et ce que nous avions alors, c'est cette image. Vous voyez donc déjà des taches sur le papier. J'espère que ce n'est pas trop gênant quand vous portez un appareil photo, mais vous devriez attendre un peu, juste pour leur donner un peu plus de temps pour le régler. Ensuite, une fois qu'ils l'ont fait, vous pouvez continuer à créer, mais vous devriez vraiment leur laisser un peu de temps pour se configurer. Et deuxièmement, formez un peu comme ça. Ensuite, nous avons notre bouton. Utilisons le rouge. Maintenant, j'essaie vraiment d'aller le plus vite possible, juste pour ne pas trop vous ennuyer avec ces détails, car nous avons déjà suivi ce processus une fois avec une feuille de papier blanc. Donc, ce que nous avons ci-dessous , c'est le titre. Essayons donc de rester dans la même ligne. Nous avons donc le sous-titre du titre. Et puis nous avons eu le titre sur la droite. Ensuite, il y avait le sous-titre en dessous. Et puis nous avons eu ces répliques. Donc, utilisez-en un peu plus sexuellement. C'est donc le numéro huit. Passons au numéro cinq, parce que je veux montrer ces petites lignes ici comme ça. Et ensuite, voyons voir. Je peux utiliser le numéro huit pour créer ces champs de formulaire comme celui-ci. Vous pouvez donc voir que vous pouvez facilement passer d'une règle à une grille de notes, car c'est tout l'intérêt de l'avoir en premier lieu. Vous pouvez donc voir sans règle quel point je peux les créer plus rapidement, gardant la même mise en page, la même cohérence. Tout semble exactement comme il se doit. Enfin, positionnons notre bouton ici, à droite, remplissez-le de couleur. Ça, comme ça. Et enfin, à la fin, terminons les choses. Créons ce pied de page. Je peux donc le positionner comme ici. Et je peux terminer. Le pied de page est apparu un peu plus grand qu'avant, mais cela n'a pas vraiment d'importance. Et ce que je peux faire ici, c'est créer ces six. Donc 123456. Et je peux dessiner dans mon cercle pour mon logo. Je peux utiliser ma couleur, bien le remplir. Enfin, voyez ci-dessous cela. Utilisons-en donc un plus fin. Mettons-le donc au centre en fait. Donc OC 2022. Et ce que je peux faire, c'est utiliser numéro dix ou mieux le chiffre huit pour indiquer les conditions d'utilisation, par exemple politique de confidentialité. Et voilà. Bien sûr, vous pouvez dessiner tous ces détails. Passons donc à celui-ci, par exemple les magasins partenaires. Mais je ne veux pas vous ennuyer avec trop de détails, car nous avons déjà suivi ce processus auparavant. Donc, en gros, c'est tout. C'est ainsi que vous utilisez ce papier quadrillé à points et ce papier quadrillé à points noirs. Dans mon cas, je devrais vraiment trouver des marqueurs adhésifs, colorier ces stylos gel en couleur pour accentuer un peu mieux ces couleurs car certaines couleurs fonctionnent bien, comme cette couleur dorée, que je vais vous montrer. Ainsi, par exemple, vous pouvez l'utiliser pour vos boutons, mais si vous voulez utiliser la couleur exacte de la marque de votre client, vous aurez des difficultés dans certains cas, surtout si vous n'en avez pas. Maintenant, c'est l'une de mes marques préférées. Ça s'appelle Sokoto. Ça vient du Japon. Et ils créent vraiment ces superbes stylos. Vous pouvez voir comment et à quel point vous pouvez obtenir de bons résultats avec ces stylos. Ils les vendent donc dans une variété de couleurs différentes. Et vous pouvez les acheter si vous le souhaitez. Mais ces trois-là coûtent autant que 20 d'entre eux. C'est donc tout l'intérêt, c'est toute la raison. Mais je voulais vous montrer que vous pouvez les obtenir en différentes variétés, à différents prix , comme avec ces marqueurs que vous allez utiliser pour les feuilles de papier blanc. Maintenant, laissez-moi clarifier cela et laissez-moi vous montrer la différence entre ce morceau de papier noir et ce morceau de papier blanc. Alors, c'est ici. C'est la même mise en page en utilisant deux techniques différentes, en utilisant deux papiers différents. Nous avons donc ici ce livre blanc que nous avons déjà couvert, et voici ce papier à points noirs. Et vous pouvez essentiellement vous faire votre jugement. C'est beaucoup plus cool et il est beaucoup plus rapide de créer à main levée car vous avez cette grille de points. Mais si vous voulez simplement surmonter la douleur liée à leur utilisation, car encore une fois, ils sont remplis de ce gel et ce gel va se traduire sur une feuille de papier. Je suis prête à passer par là parce que mes clients sont beaucoup plus époustouflés par un tel résultat mes clients sont beaucoup plus époustouflés par un tel résultat que par le nôtre. Mais si vous ne faites que commencer, si vous ne vous embêtez pas à les utiliser et à avoir l'air un peu plus professionnel tout en en payant le prix. Alors, bien sûr, vous pouvez les choisir. Évidemment, peu importe ce que vous choisissez pour créer vos maquettes en papier pipe. Beaucoup plus important est l'histoire qu' ils racontent, la mise en page et l'apparence de la mise en page. Alors, quel papier utilises-tu ? Mais bien sûr, pour y revenir, vous pouvez utiliser des options moins chères. Vous pouvez utiliser des options beaucoup plus coûteuses. Mais en fin de compte, c'est le résultat qui compte, et non le bout de papier. Il y a en fait un autre conseil que je souhaite partager avec vous dans ce cours, à savoir utiliser des modèles. Et nous y reviendrons dans la prochaine vidéo. Alors je t'y verrai. 59. Utiliser des modèles imprimables: L'utilisation de modèles principaux est un excellent moyen d'améliorer votre vitesse et votre productivité lorsque vous travaillez avec des maquettes papier lorsque vous travaillez avec des maquettes papier. Maintenant, il ne s'agit que de modèles d'appareils connus, par exemple téléphones, des navigateurs , des montres, et peu importe ce sur quoi vous travaillez, vous pouvez utiliser des tablettes, ordinateurs portables, tout ce que vous voulez. Donc, dans cette vidéo, je vais juste vous montrer une ressource gratuite que je propose pour que vous puissiez l'utiliser. Mais il y a aussi une mise en garde à ce sujet. Vous devez corriger certaines de ces tailles car elles sont un peu plus anciennes. Je vais également fournir des modèles que je vais vous montrer en une seconde, qui sont imprimables au format PDF afin que vous puissiez les imprimer immédiatement. Mais je vais également vous montrer quelques liens premium dans le PDF. Vous pouvez cliquer ici, les visiter et les acheter si vous le souhaitez. Mais ce n'est pas vraiment obligatoire. Je vous offre toutes ces ressources gratuites, mais si vous le souhaitez, vous pouvez acheter les ressources premium. Voici donc mon site Web, web donut.net, et ce sont des appareils imprimables, des modèles. Comme mentionné, je vais laisser le lien dans le PDF et vous pouvez cliquer pour y accéder , il suffit de les télécharger. Ce sont des fichiers Photoshop. Vous pouvez également ouvrir des fichiers Photoshop dans Adobe XD si vous ne possédez pas Photoshop. Et ce ne sont essentiellement que des maquettes de ces téléphones. Nous avons donc des montres connectées, nous avons des téléphones portables et vous pouvez voir l'iPhone 7 et le Galaxy Pixel, le Samsung Galaxy S7. Ces appareils sont donc un peu plus anciens à ce stade, mais comme je l'ai dit, vous pouvez simplement les utiliser. Par exemple, vous pouvez supprimer ces boutons, retirer ces caméras, placer la caméra au centre, par exemple pour obtenir un appareil plus récent. Allons-y comme ça. Vous pouvez également combiner ces éléments, mais comme vous pouvez le constater, il n'y a pas d'encoche. Mais je vais vous montrer dans une seconde, je vais vous fournir un modèle imprimable au format PDF, afin que vous puissiez avoir un téléphone avec une arche, nous avons des tablettes, nous avons le navigateur Google Chrome, et c'est en gros tout. Alors venez ici, téléchargez-le maintenant. Et il s'agit essentiellement de cliquer sur M pour vous montrer ce que vous allez obtenir. Il s'agit de modèles imprimables que vous pouvez obtenir dans le format de fichier PDF. Il suffit de les imprimer. Et comme vous pouvez le voir, c'est le navigateur que je viens de vous montrer. Ce sont les téléphones qui ont l'encoche en haut. Je les ai donc créés. Et ce sont des montres connectées, par exemple pour Apple Watch ou quelque chose comme ça. Alors, comment pouvez-vous utiliser ces petits, allons-y avec celui-ci. Par exemple, dessinez simplement dessus et ils sont très utiles car vous pouvez réellement montrer à vos clients et à vos coéquipiers à quoi ressembleront tous ces éléments une fois que vous les aurez réellement placés dans votre logiciel et une fois que vous commencez à créer. Par exemple, utilisons un logo juste au centre sur les trois. Et utilisons une règle. Dans ce cas, vous pouvez comprendre pourquoi règle ici est vraiment utile. Parce que je peux par exemple mettre une barre d'onglets juste en bas sur les trois en même temps. Vous avez donc compris. Vous pouvez simplement dessiner ici. Et j'ai volontairement laissé tout cet espace vide. Donc, par exemple, vous pouvez toujours le faire. Vous pouvez mettre du texte ici, vous pouvez en faire ce que vous voulez. Mais en gros, les modèles imprimables vous feront gagner beaucoup de temps, surtout si vous les présentez plus tard aux clients. Je les ai trouvés extrêmement utiles lorsque vous créez des applications mobiles comme celles-ci. Et lorsque vous créez de tels concepts horlogers, vous pouvez constater que ces montres sont légèrement plus petites. donc très utile de créer une maquette, en gros, est donc très utile de créer une maquette, en gros, de montrer à vos clients à quoi ressemblera le produit final . Mais qu'en est-il du Web ? Eh bien, c'est un peu délicat. Ce que nous avons ici, c'est Google Chrome, essentiellement un modèle. Ce que vous pouvez faire ici, c'est revenir à l'exemple que je vous ai montré précédemment, afin de pouvoir, par exemple dessiner à nouveau cette chaussure. Encore une fois avec mon épopée. J'essaie de trouver des compétences ici, mais tu comprends. Vous allez l'utiliser pour présenter des concepts rapides à vos clients. Et bien sûr, vous pouvez également inverser la tendance. Utilisez-le donc dans cet espace et utilisez simplement cette barre. Retournez-le et repositionnez-le simplement en haut à l' intérieur de Photoshop. Ensuite, vous aurez beaucoup plus d'espace en dessous. Ce que vous pouvez également faire, c'est utiliser la même approche. Utilisez donc cette barre, retournez-la, affinez-la un peu et positionnez-la juste en haut. Donc, dans ce cas, tout cet espace en dessous sera vide. Ce ne sont donc que quelques-uns des exemples que je voulais vous montrer. Ils sont gratuits. Tu vas les avoir. Vous pouvez simplement les télécharger et les utiliser dans votre projet, n'est-ce pas ? Maintenant, si je reviens ici, c'est celui de mon site web, web donut.net. Et je vais également fournir des ressources haut de gamme avec un tas d'autres appareils de ce avec quelques directives, par exemple et des informations de ce type dans le PDF. Tu peux les obtenir si tu veux. Et vous vous demandez peut-être si c'est génial d'utiliser cette feuille de papier blanche, mais qu'en est-il de cette élégante feuille de papier à points noirs ? Eh bien, c'est un peu délicat car vous devez vous assurer d' aligner toutes ces maquettes à l'aide de cette grille. Assurez-vous donc simplement que quel que soit le type de papier sur lequel vous achetez votre papier quadrillé à points, assurez-vous de leur demander les dimensions ou mieux encore, vous pouvez simplement utiliser une règle mesurer les dimensions entre les bords de votre papier. Donc, juste les bords extérieurs de votre papier. Par exemple cette arête, cette arête, cette arête, parce que le centre n'a pas vraiment d'importance. Pourquoi faisons-nous cela ? Eh bien, lorsque vous les créez et que vous les posez sur la feuille de papier avant de les imprimer, vous pouvez simplement vous assurer que vous les mesurez correctement, que tout s'ajuste comme il se doit. Ainsi, lorsque vous les imprimez, elles auront l'air alignées et cohérentes. Tout va correspondre à votre grille de points. Donc, lorsque vous commencerez à tout dessiner, je vais avoir beaucoup plus de sens car si vous les imprimez comme ça, tous ces cadres ne seront pas alignés avec votre grille de points, ce qui va à l'encontre de l'objectif de la grille à points en premier lieu. Assurez-vous donc de faire attention à de tels détails. Encore une fois, utiliser de tels modèles est un excellent moyen de les présenter à vos clients ou à vos collègues, simplement pour leur montrer à quoi pourrait ressembler le produit fini. Assurez-vous donc de les consulter. Une fois de plus, je vous offre des ressources gratuites et premium vous puissiez décider ce que vous souhaitez utiliser. 60. Partage de vos filières: Comme je l'ai dit tout au long de ce cours ces maquettes sur papier sont principalement destinées vous et à vos idées, juste pour déterminer les mises en page possibles que vous allez utiliser dans votre conception une fois que vous aurez atteint logiciel. Mais si vous travaillez en équipe avec un autre designer, ou si vous souhaitez simplement partager votre processus avec le client. Et le client veut savoir où vous en êtes dans ce projet à ce moment précis, puis vous pourrez réellement partager ces maquettes papier avec votre client. Mais comment pouvez-vous réellement le faire ? Où, si le client ou vos équipes de conception sont locaux, vous pouvez simplement prendre une feuille de papier et emmener au bureau et le leur montrer de cette façon. Si vous vous souvenez, lorsque je vous montre les styles possibles pour le filaire dans la vidéo précédente, vous avez remarqué que certains designers découpaient ces wireframes dans la feuille de papier pour ensuite les présenter comme suit : manière. Vous pouvez également le faire. Mais le moyen le plus simple que j'ai trouvé au fil des ans, surtout pour les clients qui voulaient simplement voir, étaient simplement curieux parce que la majorité des petits clients, en particulier, ne comprennent pas vraiment votre processus et ils ne savent pas vraiment ce que sont les wireframes papier et ils veulent simplement savoir pour quoi ils paient. Donc, dans ces cas, vous pouvez simplement utiliser votre téléphone, déposer une feuille de papier, vous assurer d'un bon éclairage, puis prendre une photo de votre téléphone. Vous n'êtes pas obligé de partager tous les wireframes papier, car si vous avez 20 pages différentes sur un site Web, vous aurez 20 feuilles de papier différentes. Vous pouvez donc simplement en partager un ou deux, juste pour ils voient et comprennent ce que vous faites réellement et pour quoi vous payent-ils, si le client veut suivre l'ensemble du processus et tout des wireframes en papier, vous pouvez le faire aussi. Ou si vous avez un scanner, ce qui est le moyen le plus simple que j'ai découvert au fil des ans, vous pouvez simplement numériser tous ces papiers. Vous pouvez les mettre dans un fichier zip, par exemple, puis simplement envoyer ce fichier zip par e-mail à votre client ou à vos développeurs, collègues, etc. Donc, encore une fois, tout le monde ne va pas vous l' exiger. Mais s'ils le font, vous avez toutes ces options pour partager des maquettes papier avec eux, car ils ont parfaitement le droit de savoir sur quoi vous travaillez sur ce projet et où vous en êtes actuellement. 61. AFFECTATION: Votre tâche pour cette session est de créer tout type de structure papier que vous souhaitez. Il peut s'agir d'un site Web comme nous le faisons dans ce cours. Cela peut être une application mobile, tableau joint, ce peut être ce que vous voulez. Entraînez-vous simplement avec certaines de ces boîtes. Vous pouvez utiliser différents styles présentés dans cette classe. Tu peux faire ce que tu veux. Il s'agit simplement de pratiquer. Ne vous inquiétez pas d' utiliser des papiers fantaisistes. Ne vous inquiétez pas d'utiliser des crayons ou des stylos fantaisistes. Utilisez simplement le type de papier que vous voulez. Vous pouvez même utiliser une serviette et un stylo. Assurez-vous donc de vous entraîner, essayer et essayer de comprendre pourquoi cela accélérera votre processus de conception une fois que vous l' aurez maîtrisé. 62. SECTION 8: La création de mises en page communes dans la conception de l'interface utilisateur est extrêmement importante car ces mises en page ont déjà fait leurs preuves, n'est-ce pas ? Ils prouvent déjà qu' ils fonctionnent réellement. N'essayez donc pas simplement d'inventer l'eau chaude, car pour le plaisir, essayez de toujours utiliser ces méthodologies éprouvées Ces mises en page et ces grilles éprouvées sont là juste pour organiser un peu notre contenu. un peu mieux sur différents points d'arrêt ou tailles d'écran. Commençons donc. 63. Qu'est-ce qu'un maquillage: La mise en page dans la conception de l'interface utilisateur peut simplement se référer à l'organisation des éléments inclus sur une page ou sur un écran mobile. En gros, tout ce qui est inclus dans votre conception et la manière dont il est structuré et organisé peuvent être classés dans la catégorie de la mise en page. Il existe de nombreuses configurations différentes. Il y a donc la mise en page mobile, la disposition sur ordinateur, la disposition sur tablette. Il existe également des mises en page en paysage, des mises en page en portrait et bien plus encore. Mais en gros, la principale chose que vous devez savoir ici , c'est que lorsque quelqu'un mentionne la mise en page, il parle essentiellement de la structure globale de tous vos éléments qui mèneront à une page ou un seul écran. façon dont vous créez votre mise en page dépend de votre projet. Quelle est la complexité de votre projet, quelle est sa taille. Utilisez-vous une grille ? Utilisez-vous des guides, utilisez-vous certains états de composants, certains éléments ? Toutes ces choses peuvent donc dépendre de votre mise en page et du résultat final de votre mise en page. Dans ce cours, nous allons nous concentrer sur la façon de créer votre mise en page, comment utiliser les grilles, comment structurer votre contenu à l'intérieur de vos grilles et à l'intérieur de votre mise en page. C'est donc ce dont nous allons parler dans ce cours. Mais vous pouvez toujours naviguer en ligne et voir différentes mises en page après ce cours. Et comprenez simplement ce que les autres utilisent dans d'autres sujets, dans d'autres cours, dans d'autres projets. Et tu vas le comprendre beaucoup mieux après ce cours. 64. Qu'est-ce qu'un système de grille et pourquoi c'est important: Les systèmes de grille sont utilisés dans la conception pour mieux organiser votre contenu. Parce que si vous n' utilisez pas de système de grille, vous ne savez pas où certains éléments doivent s'aligner à gauche ou à droite, ou en haut et en bas. Les systèmes de grille sont donc essentiellement conçus pour ce faire, pour que votre contenu reste organisé, pour que votre contenu ait une apparence cohérente et pour que votre point de vue soit bien mieux perçu parce qu'ils sont pour voir ce contenu organisé plutôt que ces éléments éparpillés qui ne s'alignent pas. Les systèmes de grille sont également utilisés par les développeurs car ils peuvent coder beaucoup plus simplement et beaucoup plus facilement que sans aucun système de grille, car ils peuvent placer le contenu dans le conteneurs, puis vous définissez la largeur fixe de ces conteneurs. Ils peuvent également être variables s'ils utilisent quelque chose comme une mise en page de contenu flexible. Par conséquent, ce contenu peut être beaucoup plus facilement évolutif. S'ils créent un design réactif, vous pouvez, en tant que concepteur, mieux concevoir ce contenu pour design réactif, car vous êtes en utilisant ces systèmes de réseau. système de grille le plus connu est Bootstrap. Il en existe également de nombreux autres. Et dans cette classe, nous allons mentionner Bootstrap, et nous allons également mentionner ce que l'on appelle le système de grille à huit pixels, car ce système de grille est vraiment, à mon avis, le plus évolutif là parce que tous les éléments sont divisibles par huit. Les systèmes de grille sont excellents car, comme je l'ai dit, ils permettent de maintenir votre contenu en ligne et de l'organiser. Et ils sont très faciles à coder pour les développeurs. Parce que, surtout avec ces systèmes de grille bien connus comme Bootstrap, par exemple, ils possèdent déjà ces composants. Cela leur permettra donc de réduire considérablement leur temps de développement , car tous ces composants sont déjà préfabriqués. Il leur suffit de les saisir dans leur propre code. Dans la prochaine leçon, je vais vous montrer comment configurer des grilles dans Adobe XD. C'est très simple, alors je vous y verrai. 65. Comment configurer des grilles dans Adobe Xd: Dans cette leçon, je vais vous montrer comment configurer des grilles dans Adobe XD. Passons donc immédiatement à Adobe XD. Et ici, dans Adobe XD, vous pouvez voir que j'ai créé ces tableaux d'art de 1920 sur 1080, et je vais rapidement vous le montrer dans Adobe XD, mais vous pouvez également le configurer dans Sketch. Vous pouvez configurer cela dans Figma. Et à mon avis, Figma est l'un des meilleurs outils du marché, car il contient le plus de fonctions incluses par défaut. XD est excellent. Et grâce à la communauté, ils finiront par inclure toutes les options dont dispose déjà Figma, car ces outils se font constamment concurrence. Et c'est formidable pour nous, en tant que concepteurs, car c'est nous qui profitons essentiellement de la concurrence entre ces outils, car nous pouvons toujours nous attendre à disposer des outils les plus récents et les plus récents fonctionnalités incluses dans les nouvelles mises à jour. Donc, parce que j'adore Adobe XD, je l'utilise depuis des années Je l'utilise tous les jours dans mon travail. Ce cours est dédié à Adobe XD. Mais si vous utilisez Figma ou Sketch, vous pouvez également le faire dans ces outils. Ou si vous ne savez pas comment faire, vous pouvez simplement rechercher des cours en ligne ou rechercher des vidéos YouTube. Donc, si vous revenez à Adobe XD, comme je l'ai dit, nous avons ici les aéroports de 1920 sur 1080. C'est juste un aéroport normal. Vous pouvez le configurer à partir d'ici. Vous pouvez cliquer sur Plan de travail, puis le configurer ou sur l'écran d'accueil. Maintenant, pour configurer nos grilles, il vous suffit de sélectionner cette planche d'art. Allez ici où il est écrit « grille ». Et deux possibilités s'offrent à vous. Vous avez la mise en page et le carré. Comme je l'ai dit, figma propose plus d' options qu'Adobe XD. Et j'espère vraiment que l'équipe Adobe XD inclura bientôt toutes ces autres options dans Adobe XD. Mais pour l'instant, comme je l'ai dit, nous avons la disposition et la grille. Pour en revenir à Adobe XD, comme vous pouvez le voir, nous avons la mise en page et le carré, et je vais choisir la mise en page juste pour vous montrer. Et vous pouvez cliquer ici juste pour afficher votre mise en page. Ce que nous avons ici, nos colonnes, nous avons la largeur de la gouttière, la largeur des colonnes, et nous avons des marges liées ici. Vous pouvez l'utiliser comme valeur par défaut. Vous pouvez le définir comme valeur par défaut, ou modifier toutes ces valeurs, puis définir ce modèle par défaut. Maintenant c'est génial. Si vous travaillez avec quelque chose comme Bootstrap, vous pouvez créer une grille bootstrap ici, en faire une grille par défaut. Et puis, chaque fois que vous revenez, et si vous travaillez toujours avec Bootstrap, vous n'avez pas à perdre votre temps les créer tout le temps. Vous pouvez simplement cliquer sur Définir par défaut, ouvrir et cela s' affichera comme valeur par défaut. Donc, si nous revenons ici, ce que vous pouvez voir ici, ce sont les colonnes, qui sont ces bits bleus, nous avons la largeur de la gouttière, qui est l'espace entre vos colonnes. Nous avons la largeur de colonne, qui est la largeur de ces bits bleus, qui sont les colonnes. Et enfin, nous avons des marges à gauche et à droite. Et vous pouvez également cliquer ici pour définir les marges supérieures et les marges inférieures. Nous avons des marges gauche et droite. Si vous cliquez ici, cela reliera simplement les marges gauche et droite et tout ce que vous définissez ici, il les intégrera. Donc, par exemple, si je veux élargir mes colonnes, par exemple, je ne sais pas, 65, appuyez sur Entrée ou Retour. Vous pouvez voir ce qu'il fait. Cela a donc augmenté la largeur de la gouttière. Cela a enregistré la largeur de ma colonne ici. Et cela m'a simplement montré ces marges liées de cette manière. Je n'aime pas trop l'espacement entre ces gouttières. Je vais les modifier, par exemple, cliquez ici. Et puis simplement changé en quelque chose de plus petit, comme, je ne sais pas, 40 par exemple et lorsque j'appuie sur Entrée ou Retour, comme vous pouvez le voir, ces valeurs vont changer. Ce que vous devez faire ici, c'est jouer avec ces valeurs dans Adobe XD pour obtenir les valeurs que vous souhaitez. Et généralement, lorsque vous définissez les valeurs qui vous conviennent, vous pouvez passer à autre chose et en faire une valeur par défaut. Ou chaque fois que vous revenez à Adobe XD lorsque vous créez votre premier tableau d'art et que vous commencez à concevoir. Créez-les ensuite lorsque vous copiez réellement cet aéroport vers un autre aéroport et que vous les dupliquez. Donc, si je reviens ici et que je vous montre cela également, ce que nous avons ici, c'est ce premier tableau d'art et disons, par exemple , que ce sont nos valeurs. Peut-être que j'aimerais changer cela en 60 peut-être, ou changer cela en 40, ceci en 100, et ce 2.0, 80. Et vous pouvez voir comment cette mise en page change. Disons donc que c' est ma valeur par défaut. Il me suffit d'appuyer sur Contrôle ou Commande D pour dupliquer ce plan de travail. Et comme vous pouvez le voir, ces valeurs seront enregistrées pour vous. Encore une chose que je voulais vous montrer, c'est si j'appuie sur Control Zero pour me mettre à l' endroit sélectionné une fois de plus. Cliquez ici. Vous pouvez modifier ici la couleur de ces colonnes. Donc, si vous n'aimez pas cette couleur bleu sarcelle par défaut fournie par Adobe XD, vous pouvez simplement la changer comme vous le souhaitez. Enfin, vous pouvez réduire l'opacité ici. Ce n'est donc pas trop dérangeant lorsque vous commencez à travailler. Donc, en gros, c'est tout pour Adobe XD. Comme vous pouvez le constater, c'est extrêmement simple. Vous pouvez créer toutes sortes de rapports, vous pouvez créer des bureaux, des pores comme celui-ci, vous pouvez créer des aéroports pour tablettes, des tableaux d'art pour téléphones. Vous pouvez les faire pivoter horizontalement et verticalement. Ensuite, vous pouvez créer ces grilles pour vos designs. Dans la prochaine leçon, nous parlerons de Bootstrap, et je vous y verrai. 66. Travailler avec Bootstrap: La grande majorité des développeurs et des concepteurs aiment travailler avec Bootstrap, car il s'agit d'une base bien connue et de systèmes de grille bien connus depuis des années. Et de nombreux sites Web sont en fait conçus et construits sur Bootstrap en utilisant quelque chose que vous connaissez, la plupart des gens connaissent, qui est excellent parce que le design et le processus de développement peut se faire beaucoup plus rapidement. Donc, si je vous emmène ici, il s'agit en fait du site Web d'Adobe XD. Et vous pouvez accéder aux fonctionnalités ici. Et vous pouvez accéder aux kits d'interface utilisateur car ce sont les composants que vous pouvez télécharger sur le site officiel d' Adobe. , ce que nous avons ici Comme vous pouvez le constater, ce que nous avons ici, c'est le design Apple. Nous avons Google Material Design, et vous pouvez utiliser ces kits d'interface utilisateur. Vous pouvez les télécharger et les utiliser dans vos propres projets. Mais ce qui nous intéresse pour cette leçon en particulier, c'est Bootstrap. Donc, si vous faites défiler l'écran jusqu'ici, vous pouvez voir un Bootstrap ici. Bill propose donc des sites réactifs rapides avec des actifs et des composants préconçus avec Bootstrap Five. Maintenant, bootstrap a ses propres versions, vous pouvez donc concevoir votre site Web sur Bootstrap, Bootstrap pendant trois ans car c'est le Bootstrap Five au moment de la création de cette classe. Donc, si vous regardez ce cours dans le futur et que vous venez ici et que vous dites Bootstrap six, sept ou dix ou quoi que ce soit d'autre, sachez simplement que c'est la version du Bootstrap, mais sachez simplement que la structure orale, la conception globale est fondamentalement la même. Ils incluent simplement de plus en plus de composants, de plus en plus de code dans chaque version. Et ce qui nous intéresse dans cette classe, c'est juste un design, juste les composants, juste les noms des composants qui vous seront affichés dans une seconde. Donc, si nous revenons ici, vous pouvez simplement cliquer sur Obtenir le kit. Quand tu l'auras, laisse-moi fermer ça. Voici à quoi cela ressemble lorsque vous l'ouvrez dans Adobe XD. Donc, ce que vous avez ici, c'est que j'ai ces polices manquantes et vous pouvez les installer si vous le souhaitez. Si vous avez un droit ici, cela indiquera que vous avez des polices manquantes. Ce que nous avons ici, ce sont ces couleurs. Nous avons des styles de personnages parce qu'ils utilisent Helvetica. Je ne l'ai pas sur mon Windows. C'est pourquoi ils sont affichés comme manquants, mais je peux simplement les remplacer si je le souhaite. Ensuite, nous avons ces composants. Nous avons ces icônes et tous ces éléments. Il s'agit donc d'interrupteurs à bascule, de commutateurs étrangers, etc. Ce sont donc tous des composants de Bootstrap. Permettez-moi de passer à mon panneau Layers ici. Et si je zoome jusqu'ici, vous pouvez cliquer ici, accéder à l'aperçu si vous le souhaitez, puis, par exemple cliquer sur le système de grille, il sera redirigé vers le système de grille si c'est quelque chose que tu veux. Mais j'aimerais simplement parcourir ce site. Commençons donc par la mise en page. Maintenant, la mise en page est extrêmement importante car la mise en page vous aide à comprendre comment le Bootstrap est imaginé et vous pouvez facilement comprendre toutes ces autres choses, comme Bootstrap en ligne. Par exemple, la Fondation en a un et bien d'autres. Mais en gros, ils ont tous une philosophie similaire quant à la façon dont ils sont construits, utilisés et mis à niveau pour suivre les dernières fonctionnalités du Web. Donc, si nous revenons ici, vous pouvez voir que nous avons un système de réseau. Maintenant, si je zoome un peu plus près, comme vous pouvez le voir, nous avons la colonne et toutes ces entretoises de chaque côté. Nous avons donc le marqueur droit et le marqueur gauche. C'est ainsi qu'ils les appellent. Et nous allons l' expliquer dans une seconde. Mais ce que nous avons en dessous, c'est la taille de notre grille. Les tailles de grille, si vous vous en souvenez, lorsque vous sélectionnez vos tableaux d'art et que vous pouvez cliquer ici pour créer cette grille. Maintenant, voici les tailles de grille. Nous avons donc les plus grands, proviennent de 1 200 pixels sur des mots. Donc, si vous créez quelque chose de plus de 1 200 pixels, vous pouvez utiliser cette taille et elle sera évidemment encodée en fonction de la taille de votre fenêtre d'affichage. affichage est essentiellement l'ordinateur de bureau, par exemple le mobile, ou l' écran votre utilisateur consulte votre site Web ou votre application. C'est la taille de votre fenêtre d'affichage, dans ce cas, elle est de 1 200. Et cela signifie en gros que toute cette grille aura une largeur de 100,11, 40 pixels. Donc, 1140 pixels de large, c'est tout cela. Et si je la sélectionne, tu peux cliquer ici et voir dans ta largeur nous sommes à cette taille, donc 1140. Maintenant, si nous allons un peu plus loin et avant de le faire, vous avez toutes ces autres tailles et vous pouvez voir comment vos colonnes et votre contenu vont évoluer sur tous ces autres appareils. Mais si nous sélectionnons rapidement celui-ci, nous avons les colonnes. Nous avons 12 colonnes différentes. Si vous vous souvenez de la vidéo précédente dans Adobe XD, nous avons créé ces 12 colonnes et toutes comportent des gouttières et des entretoises, mais elles sont un peu différentes car elles sont bootstrap et je vais vous le montrer dans une seconde. Nous avons donc les gouttières ici. Nous avons donc la gouttière gauche et la gouttière droite. Et c'est en fait la principale différence entre Bootstrap et quelque chose d'autre que vous pourriez créer vous-même ou découvrir quelque chose par vous-même. Bootstrap a cette particularité vraiment étrange placer ces gouttières à gauche et à droite. Donc, avant les marges à gauche et à droite, vous avez ces gouttières. Donc, si je le ramène à Adobe XD. Vous voyez ce que je veux dire. Alors imaginez qu'il s'agit la marge de gauche et que ce sera la marge de droite, juste ici. Donc tous ces espaces vides sur la droite, et au lieu que la colonne aille jusqu'ici, en fait, ils ont un caniveau gauche à la place. Je ne sais donc vraiment pas pourquoi ils le font. Je l'ai vu en code. En gros, ce que vous devez faire lorsque vous les créez c'est que vous devez faire attention à la façon dont vous les créez. En gros, de ces 101 140 pixels de largeur pour vos colonnes, vous devez déduire ces gouttières gauche et droite, et vous aurez donc votre zone de contenu à cet endroit. Donc, ce que je vais faire, c'est utiliser celui-ci, appuyer sur Ctrl C pour le retirer de là. Et je vais aussi sauter à l'intérieur et m'ouvrir dans celui-ci. Utilise la commande C, puis saute à l'extérieur pour aller ici, la commande V. Et si je fais une copie, D, saute à l'intérieur d'ici et tu verras ce que je fais en une seconde. Allez jusqu'ici et allez jusqu'ici. Zoomez et alignez-les comme ceci. Et puis changez simplement la couleur pour quelque chose d'autre que vous pouvez réellement voir, par exemple cette couleur bleue, ce que vous pouvez voir en bleu, en fait la zone de contenu. Cette zone de contenu est donc la zone où votre design actuel va être placé, où tous vos éléments vont être placés. Et ces paires à gauche et à droite sont en fait ces gouttières qu'ils ont laissées dedans. Je ne sais pas pourquoi ils font cela, mais en gros, ce bit bleu que je viens de créer est en fait votre zone de contenu. Maintenant, si nous revenons à XD, vous pouvez voir qu'ils ont tout cela dans toutes leurs tailles pour la grille. Et vous pouvez simplement ajuster, modifier et créer votre zone de contenu pour toutes ces choses. Donc, en fait, au lieu de 1140 pour la largeur, votre largeur réelle sera de 1108. Ensuite, vous devrez créer ce contenu et ces colonnes à l'intérieur. Une caractéristique clé d'Adobe XD, qui est en fait assez mauvaise. Si vous créez pour Bootstrap, vous ne pouvez pas afficher ces gouttières à gauche et à droite. Parce que si je choisis cette option une fois de plus pour ce plan de travail et que je ne fais pas attention au fait que cet aéroport est extrêmement vaste. Je veux juste faire passer le message. Si je clique ici, comme vous pouvez le voir, nous ne pouvons pas utiliser les gouttières à gauche et à droite. Par conséquent, nous sommes limités à ce qu' Adobe XD a à nous offrir. Donc, dans ce cas, ce que vous devez faire, c'est en fait Allons-y directement. Laisse-moi créer mon tableau d'art et faire ce qu'ils m'ont dit. Donc 1 200 avec 1080 ou quoi que ce soit d'autre. La hauteur n'a donc pas vraiment d' importance, car la hauteur s'adapte réellement à votre design. Donc, si nous sautons ici, et que je vais sélectionner ceci, et que nous retirons les gouttières gauche et droite. Et sélectionnons celui-ci et celui-ci. Donc, Control C, je vais intervenir ici, contrôler V, m'assurer qu'ils sont au centre. Il s'agit donc en fait de notre zone de contenu. Ce que vous pouvez faire dans ce cas c'est que vous pouvez réellement dessiner des guides. Donc, si je le déplace vers le bas pour que vous puissiez voir ce que je fais, nous pouvons réellement dessiner des guides. Alors, commencez par les guides, alors passez simplement la souris ici et positionnez-le là. Si tu veux y dessiner un guide, dessine-en un autre. Ensuite, vous devrez créer ces guides tout au long de votre conception. Donc comme ça, comme ça. Et puis commencez par chaque colonne disponible. Donc, ce que je recommande, c'est où que se trouve votre gouttière. Alors juste là, insérez simplement cette grille ici. Il existe également des plug-ins que vous pouvez installer et qui vous aideront à y vous pouvez installer et qui parvenir. Mais je vous montre juste la version la plus lente et la plus ennuyeuse. Si vous le faites vous-même, vous voulez simplement être aussi précis que possible, mais vous pouvez bien sûr installer un plug-in pour le faire beaucoup plus rapidement. Mais gardez simplement à l'esprit que vous devrez vérifier le plug-in pour voir ce qu'il fait et ce qu'il a fait et s'il a fait du bon travail. Donc, si nous revenons ici, vous pouvez voir la largeur de votre colonne dans ce cas. Je vais donc dupliquer mon bit bleu, appuyer sur Contrôle D, et je vais le réduire à ici, le déplacer vers le haut et voir ce que j'en retiens. Nous avons donc une largeur de 63. C'est donc la largeur réelle de notre colonne. Et ce que je peux faire maintenant, c'est créer la grille de répétition à partir de celle-ci. Donc, ce que je veux faire, c'est savoir à quel point c'est large. Et je peux simplement maintenir la touche Ctrl enfoncée et voir que ma gouttière gauche a 16 ans. Ce que tu peux faire, c'est que tu as deux options. Vous pouvez utiliser la grille de répétition. Vous pouvez les créer puis simplement passer curseur entre les deux jusqu'à ce que vous ayez 16 ans, comme ceci. Et puis tout simplement. Ajustez cela. Donc, si nous survolons, nous sommes à 16, comme vous pouvez le voir. Donc, tout ce que nous avons à faire est d'en créer 12. Donc 24681012. Je dois donc le couper là où se trouve celui-ci, juste ici. Comme ça. Et évidemment, je n'ai compté que pour ce caniveau. Ce que tu dois faire, c'est commencer par là. Et comme vous pouvez le voir, nous avons cette gouttière ici. Et nous avons cette gouttière ici, parce que c'est 16 fois le double , alors que 16 c'est en fait 32. Donc, ce que nous allons faire, c'est sauter à l'intérieur de notre grille de répétition ici et encocher pour le transformer en ceci. Et maintenant, vous pouvez voir que nous avons exactement la même configuration de bureau que la dette bootstrap. Donc, ce que nous devons faire ensuite, c'est que vous pouvez supprimer celui-ci si vous le souhaitez. Et je peux même continuer et supprimer celui-ci si je le souhaite. Et ce que je vais faire, c'est le supprimer. Et en fait, je vais les garder dedans, ou je peux retirer celui-ci si je veux, parce que cette quantité se trouve au centre. Donc, ce que vous devez faire, c'est que vous ne pouvez pas concevoir à partir de cette ligne vers l'avant ou sur le côté gauche, désolée, car c'est cette gouttière sur laquelle le rembourrage a été inclus sur le côté gauche. Il y a aussi la même histoire ici. Donc, en gros, votre contenu sera là. Ce que je vais faire à ce stade, si vous voulez adopter cette approche une fois de plus, c'est que je vais cliquer avec le bouton droit pour dissocier la grille. Et vous pouvez l'appeler par exemple un pour la première colonne, c'est 23. Cela peut être quatre et renommons rapidement ce 567-89-1011. Et enfin 12. Si vous le souhaitez, vous pouvez commander la carte. Ainsi, au lieu de placer 12 couches au-dessus de votre pile de couches, vous pouvez la déplacer vers le bas. Premièrement, déplacez-le complètement vers le haut. C'est donc à vous de décider comment vous voulez changer cela. Si nous revenons ici, ce que vous pouvez faire à ce stade, c'est simplement les ajuster pour les déplacer vers le bas comme ça. Et vous pouvez les mettre dans un groupe, appelez cette grille. Vous pouvez le verrouiller pour qu'il ne bouge pas. Et ce que tu peux aussi faire, c'est sauter dedans. Et vous devez tous les sélectionner et simplement réduire l'opacité. Mais comme il est verrouillé, réduisez simplement l'opacité dès maintenant disons dix pour cent, quelque chose comme ça. Ensuite, tu pourras le déplacer jusqu'ici. Et maintenant, lorsque vous avez terminé, vous pouvez simplement le verrouiller et ajouter votre contenu ici. Donc, à quoi ressemblera votre contenu, disons que nous créons des déchets, par exemple deux, ici même. Ensuite, vous pouvez simplement le pousser jusqu'à ce que vous en soyez satisfait, comme ça. Et arrondissons les angles, par exemple, mettons-le ici. C'est peut-être quelque chose comme une image. Puis Ctrl D si vous voulez par exemple créer un bouton dans le même style. Disons qu'il va avoir quatre colonnes large et quelque chose comme ça. Mettons-le à une hauteur de 17 ou quelque chose comme ça. Et réduisons ce chiffre à dix, car 20, c'est trop. Vous pouvez donc simplement imaginer comment cela va fonctionner. Lorsque vous déplacez ces éléments vers la gauche et la droite, vous pouvez voir comment cela fonctionne, comment vous pouvez jouer avec cela, par exemple. Donc, en gros, ce que vous devez faire ici, c'est qu'à l'intérieur du bootstrap, il y a 12 colonnes, huit colonnes, six colonnes, quatre colonnes et deux colonnes. Et bien sûr, une colonne qui est à la base de tout cela. Donc, si nous revenons ici, ce que vous pouvez faire, c'est redimensionner votre design en fonction de Bootstrap et de ces colonnes. Je vais donc partager cela dans une seconde. Ils l'ont créé ici même. Vous pouvez donc voir qu'il s'agit d'une colonne ou d'une colonne plus petite, comme vous souhaitez l'ajuster. Et si je supprime celui-ci, vous pouvez clairement voir ce qu'ils ont fait ici. Vous pouvez donc créer des colonnes paires, quatre colonnes avec des gouttières standard, trois colonnes, deux colonnes, une colonne. Ainsi, comme vous le souhaitez, vous pouvez même les créer. Cela signifie que vous pouvez créer une énorme colonne et une petite colonne, essentiellement pour remplir cet espace de 1140. Et vous pouvez jouer avec votre mise en page comme une dette, mais je vais vous le montrer ici. Dans cet exemple, nous avons douze éléments blancs en colonnes. Ensuite, si je le duplique et supprime quatre colonnes comme celle-ci. Nous avons donc ici les éléments de huit colonnes de large et nous les plaçons ici. Si je le duplique, déplacez-le ici. Supprimez-en deux. Maintenant, nous avons six positions, maintenant nous en avons quatre. Et si vous avez l'idée, vous pouvez passer à la version 2.21. Et en gros, voici comment fonctionne votre mise en page dans Bootstrap à l'aide d'Adobe XD. Donc, comme vous pouvez le constater, c'est très simple une fois que vous l'avez maîtrisé. Mais vous allez devoir créer ces grilles vous-même car, comme je l'ai dit, nous n'avons pas la possibilité de choisir le rembourrage à gauche et à droite. Et vous pouvez simplement conserver ces guides sur la gauche, sur la droite, afin savoir où peut aller votre contenu. Et cela n'a évidemment pas d'importance si vous utilisez ces grandes images. Permettez-moi donc de vous le montrer rapidement en une seconde. Imaginons donc que nous utilisions une énorme image qui va s'agrandir. Voyons 246 colonnes de large. Et disons que je souhaite positionner cette image sur la gauche pour aller jusqu' au bord de mon tableau d'art. Tu peux vraiment le faire. La position est juste ici. Et pour les développeurs de code, supprimons en haut à gauche, c' est-à-dire celui-ci, passons à zéro. Et nous devons supprimer celui-ci qui se trouve en bas à gauche. Il suffit donc de le trouver ici, c' est-à-dire celui-ci à zéro. Donc, ces deux-là sont à zéro et ces deux-là ressemblent à des tentes. Vous pouvez donc réellement le faire. Et les développeurs vont en fait étendre la largeur de cette image dans le code. Mais comme vous pouvez le constater, cela prend toujours six colonnes. Votre contenu s' adaptera simplement à la marge que vous avez ici sur la gauche. C'est le bootstrap. En résumé, comme vous pouvez le constater, c'est très simple à créer une fois que vous avez commencé. Et je ne vous ai pas vraiment montré ce qui est inclus dans ce kit d'interface utilisateur. Je peux donc vous le montrer en une seconde. Nous avons donc le contenu ici, nous avons la topographie, nous avons ces chiffres, nous avons ces icônes, nous avons différents tableaux. Nous avons différentes couleurs ici. Nous avons différentes formes. Nous avons des groupes de saisie, différents composants, des composants, des états, des badges, des barres de navigation, des boutons. Nous avons des cartes, les carrousels s'effondrent. Vous avez donc tous ces éléments. Je vous encourage vraiment si vous utilisez Bootstrap ou si vous envisagez d'utiliser Bootstrap, alors plongez simplement dans ces éléments juste pour les explorer un peu plus et pour comprendre Bootstrap un peu mieux avant de commencer votre prochain projet. Dans la vidéo suivante, nous allons parler d' une grille de pixels. Alors je t'y verrai. 67. Travailler avec un système de grille 8px: Un système de grille que de nombreux concepteurs utilisent est un système de grille à huit points ou un système de conception à huit pixels. Et je vais vous montrer comment procéder dans Adobe XD. Donc, si nous sautons ici, vous pouvez voir que j'ai de nouveau créé mon document par défaut, donc 1920 sur 1080 et nous pouvons aller ici où il est écrit grille. Mais au lieu de la mise en page, nous allons en fait passer aux carrés. Et vous pouvez définir la taille du carré ici. Et encore une fois, comme pour la mise en page, vous pouvez utiliser default, définir par défaut, et dans ce cas, la valeur par défaut est huit. C'est donc essentiellement le but de cette grille de conception à huit pixels. Tout votre contenu sera créé à l'intérieur de ces huit carrés de pixels. Et en gros, ils utilisent huit parce que huit est divisible par quatre par 16, par 32 par 64. Et vous utiliserez ces tailles plus tard si vous utilisez ce système de grille à huit points et son système grille de pixels pour créer votre contenu et l'espacer de manière uniforme. Alors laissez-moi vous montrer ce que cela signifie. Si nous revenons à XD ici. Donc, encore une fois, si je zoome complètement et de près, choisissez mon outil rectangulaire et créez un rectangle comme celui-ci. Vous pouvez voir que c'est huit par huit, donc huit pixels par huit pixels. Par conséquent, il s'agit du système de grille à huit pixels. Et disons que je souhaite concevoir quelque chose comme ça et que je souhaite supprimer la bordure. Incluons la couleur grise ici. Et en gros 12345678. Il s'agit en fait de la largeur. Donc huit cases, huit carrés équivalent à 64 car chacune d' elles mesure huit pixels de large. C'est donc exactement ce que vous devez garder à l'esprit : peu importe ce que vous créez en utilisant ce système de conception à huit pixels et ce système de grille, vous allez en fait vous allez en fait multiplier tous vos éléments par huit. Rentrons à l'intérieur et imaginons ça une fois de plus. Donc, si nous prenons le texte, par exemple et si je le tape ici, appelons-le, c'est un titre. Et fermons-le juste là. Ce que tu dois faire, c'est régler sur quelque chose comme, je ne sais pas, 16. Parce qu'une fois de plus, nous créons avec un système de conception à huit pixels. Et je vais le placer dans cette position. Ne vous inquiétez pas pour cela, car vous pouvez toujours revenir ici et vous pouvez voir que l' interligne est là. Et vous pouvez vous assurer de changer toutes ces choses si vous le souhaitez. Donc, si nous le réglons sur 16, il va en fait le configurer comme ça. Mais si je le mets sur 32, par exemple, il va le déplacer. Donc, lorsque vous commencez à les créer, revenons à 16, comme ça. Je voulais juste montrer, donc c'est un titre. Une fois que vous avez appuyé sur Entrée pour accéder à une nouvelle ligne et à un sous-titre. Et si je le ferme, tu pourras voir ce qu'il fait. Donc, il faut toujours laisser cet espacement un peu, mais vous pouvez toujours l'inclure et simplement le pousser. Jusqu'à 20 ans, je crois. Quelque chose comme 19 ans peut-être. Il est vraiment difficile de juger le texte de cette façon, car c'est juste qu'Adobe XD pose problème car ils incluent cet espacement irrégulier. Vous ne pouvez donc jamais contourner votre texte sans ces cases. C'est tout simplement d'un blanc immaculé. Imaginons donc que c'est notre titre, c'est notre texte, par exemple Control D. Et je voudrais le déplacer à huit, vous pouvez voir, ou par exemple 16. Ainsi, nous allons continuer à développer notre écriture horizontale. Disons que je veux le doubler. Vous pouvez donc toujours revenir à cette page pour appuyer sur Entrée. Et il va en fait utiliser la calculatrice pour cet exemple. Nous avons donc 64, je vais entrer 64 ici, multiplié par deux. Donc ça va être 128. Vous pouvez toujours utiliser cette calculatrice ou, comme je l'ai dit, la faire ici, mais pour une raison quelconque, elle ne fonctionne pas. Oui. Cela fonctionne avec les divisions. Faisons comme ça. Donc, par exemple 32. Et pour une raison quelconque, cela ne fonctionne pas comme ça. Nous allons donc l'étendre à 64. Déplacez-le ici jusqu'à 64, et puis peu importe 128, vous aurez l'image. C'est essentiellement ainsi que vous allez obtenir le rythme horizontal et vertical en utilisant les grilles de huit pixels. Et en gros, tout votre contenu aura un positionnement stratégique. Et dans les prochaines vidéos que je vais créer dans ce cours, je vais vous montrer qu'avec un vrai design, nous allons parler de rythme horizontal et vertical. Et je vais utiliser ces composants prédéfinis que j'ai créés à partir de l'un de mes cours précédents, juste pour vous montrer à quoi ressemblera votre mise en page et votre rythme vertical dans XD. Alors je t'y verrai. 68. Rythme horizontal dans Adobe Xd: Dans cette vidéo, nous allons parler du rythme horizontal dans Adobe XD nous allons le faire en utilisant son incroyable fonctionnalité appelée stack. J'ai donc un projet ouvert, et ce projet provient en fait d'une de mes classes appelée Adobe XD masterclass. Si cela vous intéresse, vous pouvez le trouver et le regarder. Il dure plus de 20 heures. Et tout ce que vous voyez ici dans ce document, nous l'avons créé dans cette classe. Donc, si cela vous intéresse, jetez un œil et découvrez peut-être comment créer tous ces éléments. Mais dans ce cours, nous allons simplement nous concentrer sur le rythme horizontal dans Adobe XD en utilisant des piles. Si je choisis l'une de ces planches d'art, par exemple passons à celle-ci, par exemple, appuyez sur Ctrl D. Et je vais en créer une copie, et je vais la déplacer sur le côté. Ce n'est donc pas gênant quelque part par ici. Et je veux juste te montrer le pouvoir des piles. Les piles se trouvent juste ici, sur la droite. Et en gros, imaginez simplement que vous positionnez un grand nombre de vos composants , alors que vous avez déjà beaucoup d' éléments dans un groupe. Ensuite, vous créez ces piles, qui sont en fait des espaces ou des gouttières, si vous voulez, pour votre conception. Désormais, les piles sont excellentes car vous pouvez les créer à l' horizontale ou à la verticale. Dans ce cas, voyons comment cela fonctionne. Comme je l'ai dit, nous avons les piles et si je saute ici, j'ai déjà une pile incluse. C'est une pile horizontale de deux O2, donc en gros 202 pixels, mais je peux sauter encore plus dedans et apporter les modifications de cette façon. Parce que j'ai cette mise en page ici. J'ai 12 colonnes. La largeur de la gouttière est de 60, la largeur de la colonne est de 82 et les marges sont reliées par a, gauche et droite, R1, 38. Ce sont donc la grille et le système de grille qui sont utilisés pour créer ce design et l'ensemble de cette classe que vous examinez ici. Il est donc évident que nous avons deux O2 ici, car cela correspond à la largeur de la colonne orale. Si je saute ici, vous pouvez placer ce texte dans un groupe, ce texte dans un groupe et ce bouton dans un groupe lui-même. Ensuite, vous pouvez créer une pile pour cela. Donc, si je sélectionne mes piles, vous pouvez voir qu'il le sait. Je veux une pile verticale et vous pouvez voir que c'est 40. Donc, tous les espacements sont de 40 dans ce cas. Donc 40 ici, 40 ici. Mais que se passe-t-il si vous souhaitez modifier cela pour qu'il soit plus simple de cliquer et de faire glisser le pointeur pour le positionner à 80, par exemple pour qu'il soit 80 ici et 40 juste ici ? Vous pouvez le faire si vous le souhaitez ou si ce n'est pas le cas, si votre client vous le demande , par exemple , modifions l' espacement ici. Vous pouvez simplement sauter sur l' intrasite 60, par exemple en vous assurant de le déplacer au centre et vous y êtes. J'aime donc beaucoup cette disposition et vous pouvez toujours basculer entre vos piles verticales et horizontales si vous le souhaitez. Positionnons donc ceci au centre et je veux montrer comment cela fonctionne. Donc, pour le moment, nous avons cet empilement, qui est l' empilement horizontal de deux O2. Mais si je clique ici, comme vous pouvez le voir, je vais passer en pile verticale. Maintenant, cette disposition n'a pas changé car nous n'avons pas mis tous ces objets dans une pile. Donc, si je vous montre que nous avons ceci, ceci, cela, et incluons tout cela en fait. Donc, si je frappe ici et là, jusqu'à notre texto. Maintenez ma touche Shift enfoncée, sélectionnez-la toutes, appuyez sur la touche Ctrl G pour les mettre toutes dans un groupe, puis incluez-les dans une pile. Et puis, par exemple, voyons voir, donc cela fait 150 à eux deux. Positionnons donc ce chiffre sur un cinquième si nous le voulons. Il est déjà 01h50. Positionnons-le donc de cette façon. Et tous nos éléments seront désormais positionnés à 01h50. Maintenant, cela n'incluait pas cela parce que nous n'en avions pas 150 ici. Donc, si je reviens en arrière et que je le réduis à zéro ou si je reviens en arrière une fois de plus, ce sera à zéro parce que nous en avons 150 ici. Nous en avons 150 ici. Et pour tout cela, mais nous n'en avons pas 150 entre ceci et le pied de page. Encore une fois, c'est la meilleure façon d'utiliser piles dans Adobe XD pour créer votre rythme. Si vous avez du mal avec votre rythme, la règle de base est le doubler ou de le tripler, comme vous voulez l'inclure. Donc, en gros, disons que j'utilise 40 ici. Si je veux déplacer les espaces entre les deux, disons mon image et mon texte en dessous de mon image. Ensuite, je vais utiliser quelque chose comme 60, 80 ou 20 ou quelque chose comme ça. Multipliez donc simplement vos valeurs. Vous pouvez toujours le doubler ou le tripler si vous ne savez pas comment les utiliser et simplement lorsque vous trouvez quelque chose qui fonctionne, qui est beau, que nos clients ont approuvé, par exemple ou que vous pensez simplement cela semble visuellement attrayant plutôt que de simplement opter pour cela et de passer à autre chose. Mais commencez par vous assurer que les espacements sont cohérents. Assurez-vous d'avoir des valeurs cohérentes. Donc, en gros , cela signifie que si vous avez choisi AT, restez avec AT, ne vous y prenez pas comme souhaitez, disons en inclure 60 ici pour vous parce que votre mise en page fonctionne pour résumer, vos espacements ne seront pas cohérents. Votre design n' aura pas l'air cohérent et sera donc un cauchemar pour vos développeurs de le développer plus tard, car vous pouvez simplement leur indiquer, d' accord, les espacements entre, par exemple H1 et mon image ont 40 ans. Ils le sauront et ils l'incluront dans le code de tous vos designs. Assurez-vous donc d'être cohérent, aussi cohérent que possible. Donc, si vous ne faites que commencer, car ce cours est vraiment destiné aux débutants. Si vous ne faites que commencer, assurez-vous lorsque vous créez vos premiers éléments, si vous le souhaitez, quoi ils ressemblent, assurez-vous d'utiliser vos tailles dans vos créations. Parce que, comme je l'ai dit, il sera beaucoup plus simple pour vous de vous souvenir de ce que vous avez utilisé précédemment pour tous ces espacements. Et il sera beaucoup plus simple pour vos développeurs de le développer car ils verront vos espacements beaucoup plus facilement. Si nous revenons à XD, je veux vous en montrer quatre à la fin, c' est que vous pouvez les placer dans une pile. Je vous l'ai déjà dit, si nous cliquons ici, vous pouvez voir que nous avons deux O2 ici, ce qui est évidemment beaucoup trop. Donc, ce que vous pouvez faire est de cliquer ici, puis de cliquer ici et de faire glisser ou de régler manuellement. Disons donc que je veux le mettre à 18. Et voici à quoi ressemblent les données. Je peux donc sauter ici et changer cela pour qu'il en soit ainsi. Et l'avantage des piles c'est que vous pouvez double-cliquer ici et les organiser. Donc, si je n'aime pas ça, je peux simplement le changer. Donc, se positionner, c'est être en haut, celui-ci en bas. Et je peux simplement faire des allers-retours entre ces éléments, ce que vous pouvez également faire à l'intérieur des piles horizontales. Nous sommes donc en pile horizontale si, pour une raison ou une autre, je veux mettre cela ici. Comme vous pouvez le voir, X d va facilement le changer, mais il ne va pas l'aligner. Je dois l'aligner ici car cette image va jusqu'ici. Si l'image va ou où se trouve ma grille, elle l' alignera simplement sur cette valeur. Vous pouvez voir à quel point c'est simple à utiliser. Ces piles montrent à quel point elles sont géniales et faciles à utiliser avec votre rythme. Vous pouvez utiliser la grille de répétition dans Adobe XD, mais j'ai préféré utiliser les piles car elles vous permettent mieux contrôler la mise en page de votre design et vos espacements. Donc, en gros, c'est tout pour Adobe XD et j' aime beaucoup l'utiliser. Je vous encourage vraiment à l'utiliser. Et si vous ne l'avez pas utilisée ou si vous ne l'avez pas essayée, assurez-vous de le faire car ils ont la version gratuite et vous pouvez toujours utiliser cette version gratuite, vous n'avez pas à payer pour cela. Si tu n'en es pas sûr. Si vous voulez explorer un peu plus Alert et Figma a appris Sketch, par exemple I. vous encourage vraiment à essayer Adobe XD, à l'essayer et à essayer toutes ces valeurs. Et bien sûr, je vais laisser les liens vers tout ce que j'ai mentionné dans ce cours. Dans le fichier PDF, vous pouvez simplement l'ouvrir, cliquer dessus et accéder à toutes ces informations sans avoir à les rechercher vous-même. 69. AFFECTATION de l'article 8: Votre tâche pour cette section est simplement de jouer avec différentes grilles. Assurez-vous d'essayer de créer, disons, une grille de bureau, une grille tablette et une grille téléphonique. Et en essayant d'inclure un nombre différent de colonnes avec une largeur de gouttière différente , par exemple et la largeur de la colonne. Essayez simplement de jouer et d'essayer de voir les différents résultats que vous allez obtenir. Jouez également avec la couleur des colonnes réelles. Et juste pour voir ce qui fonctionne le mieux pour vous. Peut-être que pour certaines personnes, le bleu fonctionne mieux. Pour certaines personnes, lire, fonctionne mieux pour d'autres, noir fonctionne mieux juste pour leur vision. Essayez de comprendre ce qui fonctionne pour vous. Essayez de vous entraîner et de comprendre pourquoi ces fonctionnalités sont si importantes une fois que nous avons commencé à concevoir. 70. SECTION 9 Typographie et appariement de polices: L'un des éléments cruciaux de toute typographie de design réside dans la présence d' images pour raconter une histoire. Et plus la topographie aura d'impact sur vos utilisateurs, mieux l'histoire sera racontée en même temps que les images. Dans cette section du cours, nous allons donc parler de typographie et en particulier de l'appariement des polices. Comment associer vos polices de différentes manières. Et quelles sont les différentes polices que vous pouvez associer ? Commençons donc. 71. Polices de caractères: L'une des principales erreurs que je constate chez les jeunes designers est qu'ils appellent des polices, polices de caractères, ce qui n'est pas vraiment vrai. Typeface est en fait une famille de polices. Et la police n'est qu'une variation au sein de cette famille. Permettez-moi de vous donner un exemple rapide. Imaginez simplement que vous utilisez la police Roboto, par exemple, et qu'à l'intérieur de l'autre police d'eau, vous avez Bolt, Regular, Tin, Ultra Bold. Ce sont toutes des polices, mais le rapport lui-même est une police. familles endettées sont les principales idées fausses des designers. Ils essaient de faire valoir l'idée que la police est essentielle alors qu'elle ne l'est pas vraiment. Ce que vous pouvez avoir, c'est différents types de variations de police à l'intérieur d' une famille ou d'une bouteille, en est très bon exemple parce que vous avez Roboto normal, Roboto normal et puis vous avez quelque chose appelé roboto slab, qui est une police complètement prise, très grosses lignes, et qui est vraiment utilisée principalement pour l'impression, mais vous pouvez aussi l'utiliser dans une sorte de conception Web audacieuse. Mais c'est là le problème. N'essayez pas de confondre les polices avec les familles de polices, car les familles de polices peuvent contenir plusieurs polices différentes. Et les polices ne sont que des variantes au sein de cette famille de polices. Comme je l'ai dit, il peut y avoir plusieurs polices dans une même famille. Alors gardez cela à l'esprit et ne vous y trompez pas. Vous pouvez utiliser la famille complète ou police de caractères dans votre design, ou vous pouvez simplement utiliser une variante telle que , dans cet exemple, Roboto regular ou Roboto bold. Nous allons y revenir dans quelques vidéos de ce cours. Mais je voulais juste le souligner. 72. Types de polices: Souvent, lorsque j'interroge jeunes designers pour savoir quand je leur parle, ils ne savent pas vraiment quelle est la différence entre Serif et Sans Serif en matière de police C'est vraiment très simple. Et je suis allée de l'avant et j'ai trouvé un très bon article. Je vais le lier dans le fichier de ressources de classe. N'oubliez donc pas de le consulter et lire par vous-même, car nous n'allons pas approfondir cette vidéo, mais je voudrais juste vous montrer rapidement quelles sont les différences entre les empattements, sans empattements, et lorsque chacun d'eux est utilisé. Voici donc cet article que j'ai mentionné et qui provient d'adobe.com, Creative Cloud Design Discover. Et je vais laisser le lien vers cet article, comme je l'ai dit dans les fichiers de ressources de la classe. Vous pouvez donc voir quelques exemples ici. Peut-être que cela ne vous semble pas faire de distinction. Vous avez peut-être vu des polices comme celles-ci. Vous avez peut-être vu des polices comme celles-ci. Mais quelle est réellement la différence entre Serif et Sans Serif ? Nous avons donc ici l'indice dans le nom et la principale différence entre ces polices. Ces choses à la fin de la lettre elle-même sont donc du surf. Et vous pouvez voir ici nous n'en avons pas qui font du surf sur sable, si je ne me trompe pas, c'est français. Donc sans ces empattements à la fin. C'est donc la principale différence entre les serfs et les serveurs d'envoi. Maintenant, quand vous pouvez les utiliser, vous pouvez voir quand utiliser les polices serif. Il va donc être très détaillé savoir quand les utiliser et comment les utiliser. Vous pouvez les consulter en version imprimée ici. N'oubliez donc pas de consulter cet article pour en savoir plus. Et bien sûr, vous pouvez en savoir plus pour savoir quand les trouver. Mais en résumé, utiliser des empattements et des capteurs est vraiment très simple. Tout dépend du sujet de votre conception, de l'orientation de votre conception et de la raison pour laquelle vous concevez. Donc, par exemple, si vous concevez site Web audacieux, peut-être quelque chose de nouveau , quelque chose pour la jeune génération, vous n'allez pas utiliser les empattements, qui sont les polices utilisées pour ces éléments. À la fin de chaque lettre, vous allez utiliser des polices sans empattement, car les polices Cera sont en fait attribuées à quelque chose d'ancien. Et si vous concevez pour quelque chose qui est ancien, par exemple vous créez une sorte de site Web vintage ou si vous organisez une sorte de salon de voitures anciennes peut-être ou quelque chose qu'ils ont résolu. Ensuite, vous allez utiliser les polices Serif, qui ont ces éléments à la fin des lettres. Mais en règle générale, si vous ne concevez pas pour quelque chose de traditionnel , d'élégant, de vieux, vous utiliserez ces polices sans empattement, car elles sont polices plus modernes et plus accessibles, en particulier dans la conception de sites Web, car elles fonctionnent en ligne et sont optimisées pour le travail en ligne, pour la lisibilité, l'accessibilité, pour évolutivité, pour toutes ces raisons, polices sans empattement sont bien meilleures à utiliser, en particulier dans la conception de sites Web. Mais comme je l'ai dit, vous pouvez toujours trouver des milliers de polices d'empattement différentes si vous souhaitez les utiliser dans la conception de votre site Web ou de votre application. Tout dépend de votre sujet, pour lequel vous concevez, de votre public cible et de ce que vous essayez de transmettre, du type d'émotion de satisfaction avec la police tu es en train de choisir. Gardez donc ces éléments à l'esprit lorsque vous concevez pour le Web. 73. Poids de police et comment les utiliser: Lorsque vous commencez à utiliser une famille de polices, en fonction de la famille elle-même, vous verrez qu'elle contient de nombreuses polices différentes, qui portent des noms différents tels que regular teen bold, extra bold, italic, en gras, en italique et bien d'autres encore, selon la famille de polices elle-même. C'est ce qu'on appelle des poids. Et comment utiliser ces pondérations dans différents scénarios. C'est ce dont nous allons parler dans cette vidéo. Et je vais vous montrer un exemple et vous donner juste une idée de l' endroit où les utiliser. Voici donc l'exemple, et je suis dans Adobe XD, s'agit du fichier de conception de l'un de mes cours précédents, et je l'utilise simplement comme exemple juste pour vous montrer toutes ces différentes épaisseurs de police et comment les utiliser pour mettre en valeur ce que vous souhaitez mettre en valeur dans vos créations. Donc, ce que nous avons juste ici, dans la section des héros, si je le sélectionne et que je viens ici sur le côté droit. Alors laisse-moi juste choisir celui-ci. On y va. Vous pouvez voir que le nom de la police est Open. Sans, la taille est de 24 et le poids est normal. Alors pourquoi est-ce régulier ? Eh bien, parce que je voudrais juste que les gens voient ça d'abord, qui est évidemment plus grand, plus prononcé et qui a une couleur différente. Cela attire l' attention parce que je veux d' abord attirer leur attention sur ce texte blanc, parce que je voulais qu'ils lisent ce texte en premier. Par conséquent, je tiens à le faire paraître différent de ce texte en haut et en bas alors qu'ils sont ici au centre en train de lire cet hôtel de charme sur l' héroïne. Je veux qu'il voie qu'il y a un autre texte en haut et en bas. Ensuite, j'ai envie de les lire. Je veux qu'ils le lisent parce qu'ils sont là. Donc, si je lance rapidement le prototype ici, vous pouvez voir à quoi cela ressemble. Je suis donc dans la section des héros et tout ce qu'ils peuvent voir, c'est ceci. Votre œil est donc naturellement attiré vers le milieu de cette page, vers le milieu de cette image. Et vous pouvez lire que cet hétéro signifie hôtel de charme après une dette. Vous pouvez voir tout ce qu'il y a d'autres textes là-bas. Bienvenue dans le boutique-hôtel d'Halloween. OK, chez vous, loin de chez vous. C'est donc le poids de la police. Voilà comment les utiliser. Et vous pouvez remarquer que cette police a un aspect différent. Vous pouvez voir qu'il s'agit d'un empattement, comme nous l'avons mentionné dans une vidéo précédente. Alors pourquoi ? Parce que l'image de marque de cet hôtel et son design l'exigent vraiment. C'est pourquoi j'ai opté pour ce genre de look. Donc, si je choisis cette option, vous verrez que cela s'appelle Playfair Display 70, c' est-à-dire la taille de police, beaucoup plus grande dans ce cas. Parce que sans parler, encore une fois, de toutes ces choses que j'ai mentionnées, mais pour attirer l'attention sur ce point. Et puis vous pouvez voir le poids en gras et en italique. C'est Italica. C'est donc un peu penché vers la droite et c'est audacieux. Il est plus prononcé qu'en police normale. C'est ainsi que vous pouvez équilibrer pondération de vos polices dans de nombreux exemples différents. Et si nous défilons un peu vers le bas, vous pouvez voir encore une fois que voici la même police maintenant dans une couleur différente pour obtenir le contraste entre fond blanc et la police elle-même. Et vous pouvez voir votre maison loin de chez vous. Donc, encore une fois, nous allons peut-être revenir à ce slogan. Alors vous pouvez voir quelque chose de vraiment intéressant ici. Donc, si je sélectionne celui-ci, vous pouvez voir que c'est Open Sans 24 Bolt. Et si je sélectionne celui-ci, Open Sans 24 normal. Et vous pouvez voir qu'en sélectionnant boulon et une couleur normale et en choisissant une couleur différente, je pointe leur direction je pointe leur direction et leur attention dans une direction différente. Dans cet exemple, vous pouvez voir que j'ai voulu lire ce sous-titre parce qu' il est très important. Je veux juste que leur esprit prête attention à ces trois choses. Donc, lits king size, nourriture incluse, accès à la plage, car ce sont arguments de vente très importants pour ce site Web en particulier afin d' attirer de nouveaux visiteurs. Et ensuite, s'ils le souhaitent, ils peuvent bien sûr lire le texte ci-dessous. C'est pourquoi celui-ci est audacieux et celui-ci est régulier. Celui-ci a une couleur légèrement plus foncée que celui-ci parce que je veux d'abord que ses yeux soient attirés par ce texte. Même histoire avec ceci et avec ça juste ici. Si nous défilons un peu maintenant, nous pouvons voir les mêmes textes ici. boutique-hôtel Headwinds est très bien. Et voici une citation d'un de nos anciens clients sur ce site ou un témoignage, vous pouvez voir Jenny de Londres, mais celui-ci est beaucoup plus prononcé. Il est beaucoup plus grand. Donc, si je le sélectionne et que je viens ici, vous verrez que c'est Open Sans 36 en italique. Et il a cette couleur plus foncée que celle-ci, qui est Open Sans 24 irrégulière. Encore une fois, je veux qu'ils lisent d' abord la citation et qu'ils voient ensuite de qui elle provient. Dans ce cas, le nom n'a pas trop d'importance. Vous pouvez vous en débarrasser pour les séquences de mise en page. Peu importe leur expérience avec cet hôtel, car le prochain client que vous tenterez d'acquérir pour votre hôtel voudra d'abord vivre cette expérience. Je m'en fichais vraiment, est-ce que c'est la marque de Jenny, ou qui que ce soit ? Ils ne s'en soucient pas vraiment, ils se soucient vraiment de l'expérience. Ensuite, vous pouvez voir le contraste dessous avec le bouton Book Now, qui est bleu et contient du texte blanc. Encore une fois, pour des raisons de contraste, si nous faisons défiler l'écran un peu vers le bas, vous pouvez le voir dans tout ce design. Et pas seulement ce design, mais tous les designs que je crée. Parce que je pense toujours à ces choses. Qu'est-ce qui est le plus important ? Qu'est-ce qui est moins important ? Qu'est-ce que les gens vont voir en premier ? Et comment puis-je accentuer cela avec mes polices et leur poids de police ? Vous pouvez le voir ici. Donc, pour les noms de la pièce, police est beaucoup plus grande que toutes celles indiquées ci-dessous. Et vous pouvez le voir avec les fonctionnalités, oui et non. Bien entendu, nous choisissons ensuite différentes couleurs pour montrer quelles fonctionnalités sont disponibles lesquelles ne le sont pas. Et puis nous avons à nouveau le style différent avec le lien ci-dessous. Alors, en savoir plus, ils peuvent cliquer sur ce lien, c'est différent. Alors, quand, comment vont-ils voir le changement ? Vous devez donc penser à toutes ces choses. Ici. Vous pouvez voir les fonctionnalités. Nous avons donc une piscine privée, nous avons un beau jardin, nous avons un parking privé. Tout cela est très facile à lire avec un but précis. C'est pourquoi j'ai choisi cette police, qui est beaucoup plus grande, qui est un peu différente, qui est Boulder, a une couleur plus foncée que la police en dessous. Une fois de plus, j'utilisais Open Sans comme police principale. Celui-ci est là, et Playfair affiche cette grande police en gras. Encore une fois, si nous faisons défiler l'écran un peu vers le bas, vous pouvez constater que cela se reproduira. Visitez donc Délos, qui est le titre, et voici le texte. Donc, si je ne veux pas lire ce texte, tout ce que je peux voir et tout ce que j'ai besoin de savoir, c'est visiter Délos. Il y a donc quelque chose à faire sur les écrans. Et si nous faisons défiler la page un peu vers le bas, encore une fois, réservez votre séjour chez nous. Cela les invite donc vraiment à réserver leur séjour auprès de cet endroit. Et encore une fois, vous pouvez voir ce contraste se produire ici avec le fond blanc et ce texte gris foncé. Et un dernier exemple est l' inscription aux newsletters. Cela vous appelle donc vraiment à agir, à passer à l'action. Et puis voici ce que vous voyez. Tout d'abord, inscrivez-vous à une newsletter. C'est ce que vous voyez ensuite, et c'est encore une fois dans un but parce que je veux le prononcer, inscrire à une newsletter parce que c'est l'action que je veux qu'il entreprenne. Et puis, une fois que j'ai attiré leur attention en m'inscrivant à la newsletter, inscrivez-vous et recevez des nouvelles et des mises à jour et bla, bla. C'est vraiment secondaire parce que je veux qu'ils restent sur cette partie de la page le plus longtemps possible. C'est ainsi que vous pouvez utiliser des polices, styles de police et différentes couleurs, et peut-être même différentes familles de polices pour mettre en valeur ce que vous voulez que vos utilisateurs voient sur votre page. Vous pouvez explorer cela de manière beaucoup plus détaillée. Et selon la palette de couleurs de votre projet, cela peut être vraiment encore plus complexe, voire plus simple que l'exemple que je viens de vous montrer, qui ne contient que quelques couleurs. 74. Choisir les polices: Lorsqu'il s'agit de choisir les polices pour votre projet, il y a vraiment deux considérations principales. Vous devez disposer de polices existantes et du thème principal du projet Les polices existantes sont évidemment les polices que votre client utilisait auparavant. Ensuite, vous pouvez jeter un œil à ces polices. Découvrez l'ensemble de la famille de polices, voyez ce qu'elle contient et réfléchissez peut-être à la façon l'accentuer un peu plus. Ce dont nous avons parlé dans une vidéo précédente de ce cours. Comment pouvez-vous les utiliser un peu différemment pour montrer certaines caractéristiques principales du produit ou d'un service proposé par votre client ? Ensuite, vous pouvez regarder les couleurs, voir comment les utilisateurs utilisaient auparavant cette famille de polices avec ces différentes couleurs. Peut-être que si vous en avez la possibilité, vous pourrez peut-être changer ces couleurs. Vous pouvez peut-être inclure des couleurs plus foncées ou des couleurs plus claires. Vous pouvez peut-être ajouter des nuances de ces différentes couleurs qu'ils utilisent déjà ou introduire nouvelles couleurs entièrement au projet pour donner plus de vie au projet et le rendre plus habile. sur lequel tu travailles. L'autre façon de le faire est d'utiliser de nouvelles polices. Et lorsque vous choisissez de nouveaux fonds, faites attention à ce que j'ai déjà mentionné dans l'une des vidéos précédentes. Jugé dû au projet lui-même. Évidemment, vous n' allez pas utiliser ces polices audacieuses, lumineuses et loufoques. Si vous créez un site Web pour une banque, peut-être parce que la banque essaie transmettre un sentiment de confiance, de sécurité et de stabilité. Je ne connais pas la noblesse dans certains cas. Vous devez donc y prêter attention. En quoi consiste votre projet ? Qu'est-ce qu'il essaie de transmettre aux utilisateurs eux-mêmes. Vous devez donc utiliser ces polices qui correspondront bien à l'équipe du projet. Bien sûr, si le projet se porte bien, disons que vous créez un site Web pour une entreprise de bandes dessinées ou un magasin de jouets ou tout autre type de contenu lié aux enfants, tel que jeux, des chasses d'eau ou des meubles, peu importe ce que ça a à voir avec les enfants. Mais même avec les enfants, il existe encore certaines limites quant aux moments où vous pouvez utiliser certaines polices manière dont vous pouvez les utiliser. Parce que l'héritabilité est vraiment essentielle, surtout en ligne, vous devez vous assurer que vos polices sont lisibles à la fin de la journée, quel que soit votre public cible, peu importe si c'est sérieux ou ludique, s'il est coloré, tout monochrome, vous voulez tout de même être capable savoir s'il est lisible ou non. Et pour ce faire, vous pouvez le tester sur différents appareils. Lorsque vous créez un site Web, par exemple, vous devez le tester sur de grands écrans tels que des écrans de bureau et des ordinateurs portables, mais vous devez également vous assurer qu'il fonctionne bien et qu'il est lisible sur les plus petits des écrans tels que Forms. Si vous utilisez quelque chose comme Webflow, c'est très facile à faire. Créez simplement une page réactive à partir de votre design et envoyez-vous simplement le lien, envoyez peut-être ce lien à une personne plus âgée, peut-être la nouvelle, et voyez si elle peut lire facilement si la couleur le contraste est bon, si les épaisseurs de police sont bonnes, si votre rythme de couleurs est bon. Ils peuvent donc vraiment le lire. Ils peuvent vraiment le comprendre et ils peuvent voir ce que vous essayez de transmettre sur cette page en particulier. Assurez-vous donc de toujours tester, assurez-vous de toujours penser à l'avance. À qui parlez-vous ? À qui tu parles ? Quel est votre public principal ? Et les polices sont-elles lisibles avec ces couleurs sur ce fond ? 75. Associer des polices: Parfois, dans certains exemples, vous souhaitez utiliser différentes familles de polices, comme dans l'exemple que je vous ai montré précédemment avec ce site Web de voyage. Peut-être souhaitez-vous afficher une section différente de cette page ou une application mobile utilisant une certaine famille de polices. Et puis une autre section, peut-être voulez-vous qu'ils aient l' impression de lire un article. Par conséquent, vous n' allez pas utiliser une police loufoque. Vous voulez simplement faire la somme d'une ancienne police ordinaire qui soit vraiment lisible, compréhensible et très facile à voir et à lire pour les utilisateurs. Par conséquent, vous devez vous renseigner sur appariement de polices et comment associer des fonds ? Eh bien, il existe différents outils en ligne qui peuvent vous y aider. Et je vais en montrer quelques unes dans cette vidéo en particulier. sommes donc au premier de ces types d'aspiration à froid. Et j'ai déjà créé une vidéo YouTube. Je vais le lier dans les ressources de la classe. Vous pouvez simplement cliquer et regarder l'intégralité de cette vidéo où j' explique tous ces différents outils. Mais je vais juste vous donner un bref aperçu. Dans cette vidéo en particulier, vous trouverez de l'inspiration et des guides qui vous indiqueront comment associer ces différentes polices. Encore une fois, tout dépend de ce qui a déjà été mentionné à quelques reprises dans cette vidéo, du sujet de votre projet et du public auquel vous essayez de vous adresser. Par conséquent, vous n' allez pas utiliser des polices loufoques comme elles ne cessent de le mentionner aux banquiers, par exemple ou à un public sérieux. Mais vous pouvez faire l' inverse avec les enfants et utiliser des couleurs plus ludiques et des polices plus ludiques. Tapez inspiration est donc le premier site Web et vous pouvez choisir de nombreux styles différents. Vous pouvez voir Open Sans et Cream. Certains textes sont les polices utilisées ici. Voici les couleurs. Vous pouvez choisir différentes couleurs parmi. Ici, vous pouvez choisir les polices de titre, vous pouvez choisir les polices du corps. La police des titres est celle qui se trouve juste en haut, qui est utilisée pour les en-têtes ou pour les titres. Et la police du corps est celle-ci, qui est utilisée essentiellement pour les paragraphes et pour tout le contenu contenant plus de texte. Et il est davantage destiné à des tarifs plus longs. En gros, les titres sont plus géniaux, mais vous pouvez aussi les lire et Atlanta très rapidement, mais les paragraphes, vous pouvez vraiment avoir à passer votre temps à les lire. Et c'est le point principal ici. Avec les paragraphes, vous pouvez explorer avec différentes polices et épaisseurs de police. Mais pour les paragraphes, vous devez vous assurer que votre police est lisible, que la couleur présente un joli contraste par rapport à l'arrière-plan. Et ce n'est vraiment pas trop fatiguant vos yeux de passer plus de temps à lire cet article, surtout s'il y a un article plus long, si vous créez un site Web pour, pour des actualités, par exemple pour vos yeux de passer plus de temps à lire cet article, surtout s'il y a un article plus long, si vous créez un site Web pour, pour des actualités, par exemple extrêmement important. C'est le principal problème que vous devez aborder d'abord et immédiatement dans le cadre de ce projet en particulier, car l'intérêt d'un site d'information est les internautes passent beaucoup de temps à lire ces articles. Par conséquent, vous voulez avoir une police de qualité qui soit vraiment lisible. Et ces titres qui sont vraiment faciles à regarder parce que vous ne voulez pas ils sortent trop du lot, en particulier sur ce type de sites Web, parce que vous voulez qu' ils continuent à être lus ces articles ci-dessous. Alors, explorez ce site Web. Comme je l'ai dit, je vais citer la vidéo que j'ai déjà créée sur ma chaîne YouTube à ce sujet. Et je l'explique plus en détail. Et je vais laisser les liens dans cette vidéo, alors n'oubliez pas de la consulter. La paire de polices en est une autre. Vous pouvez donc voir ici que nous avons une dalle sans empattement. Vous pouvez donc voir que c'est une sorte d' écriture monospace à gros caractères. Il existe donc un tas de ces différents styles de police parmi lesquels vous pouvez choisir. Et vous pouvez voir toutes ces polices importantes et la police principale. Vous pouvez voir les combinaisons ici, vous pouvez voir plus d'appariements de polices. Choisissons donc les polices d'affichage et nous vous montrerons toutes ces polices d'affichage. Vous pouvez les explorer. Ensuite, nous avons ceci, qui concerne les paires de polices, point py people.com. Vous pouvez sélectionner une famille de polices ici. Ensuite, vous pouvez choisir un style et un style de texte différents. C'est donc normal, c'est en gras, cette dalle des textes secondaires, c' est-à-dire les textes de paragraphes que nous venons de mentionner. Ensuite, il vous donnera les paires disponibles. Et enfin, Font Joy, qui est super, super simple à utiliser. Nous avons donc Generate et cela va générer un appariement de polices différent. Vous pouvez choisir plus de contraste, ou vous pouvez choisir plus de similitude ou un contraste équilibré. Vous pouvez passer du noir au blanc pour voir à quoi cela va ressembler. Surtout si vous concevez un mode sombre sur votre site Web ou votre application, vous pouvez voir des paires de polices, différentes tailles de texte , différentes épaisseurs, etc. Nous avons donc Montserrat, qui est ici même. Nous avons ici cette fausse police Varney, qui est celle-ci juste ici. Ainsi, vous pouvez voir H1, H2 et le paragraphe ou le titre, un titre, deux paragraphes ou un titre principal , un sous-titre et un paragraphe. Sanchez est le texte du paragraphe lui-même. Vous pouvez donc cliquer. Cela va vous mener à Google Fonts, qui correspond à quatre caractères de cette police Sanchez. Ensuite, je peux cliquer ici et choisir, je ne sais pas, peut-être celui-ci juste pour voir à quoi il ressemble. Si ça ne me plaît pas, vais les changer. Disons que je n' aime pas vraiment celui-ci ou celui-ci. Je pourrais peut-être opter pour quelque chose d'un peu plus brillant comme celui-ci. Je peux le verrouiller ici. Et cela va verrouiller ce Montserrat. Je n'aime pas vraiment celui-ci, donc je peux aller de l'avant et en générer davantage. Vous pouvez voir que Montserrat est verrouillée, peut-être que j'aime bien celui-ci, mais je n'aime pas celui-ci. Nous pouvons aller droit au but. Vous pouvez toujours faire défiler la page vers le bas. Et à la fin, lorsque vous avez trouvé la combinaison de polices parfaite que vous souhaitez utiliser, comme je l'ai mentionné, vous pouvez cliquer ici. Cela va vous mener à Google Fonts. Assurez-vous de télécharger la famille de polices Montserrat dans la famille de polices Montserrat, puis découpez-les. Et Pylon Quinn, dans cet exemple particulier, s' assure de tous les télécharger, les installer sur une machine. Vous avez donc toutes ces différentes épaisseurs de police, comme je l'ai mentionné, gras normal, et bien plus encore. Et voilà. Voilà à quel point il est facile de créer une paire de polices. Assurez-vous de faire attention aux points suivants, au contraste, à la lisibilité et au sujet de l'objet pour lequel vous concevez en premier lieu. Tu t'occupes de tout régler. Ensuite, il sera très facile à concevoir et il ne sera guère facile à tester. Et en parlant de tests, assurez-vous de toujours les tester auprès de votre public, surtout si vous y avez accès. Par exemple, si vous concevez pour des enfants, vous pouvez peut-être avoir accès aux enfants et voir comment ils interagissent avec le prototype, comment ils interagissent avec le site Web, avec l'application mobile. S'ils comprennent facilement où ils doivent cliquer ou s'ils tombent sur ces différents éléments de votre design, cela leur retient peut-être trop l'attention. Ou si vous travaillez avec un public plus âgé, peut-être que, comme je n'arrête pas de mentionner les banques, vous avez peut-être accès aux personnes qui travaillent dans les banques. Si vous travaillez pour une banque dans ce cas précis, vous pouvez peut-être la tester avec elle, leur confier une tâche concrète, confier une tâche concrète, voir à quel point elle est facile pour eux de trouver cette tâche, à quel point elle l'est pour eux pour naviguer dans votre application et la facilité avec laquelle ils peuvent lire le texte vous essayez d'afficher sur cette page en particulier. 76. Échelle de police: Lorsque vous concevez pour le Web ou pour des applications mobiles, vous devez procéder à une mise à l' échelle de la taille et de l'épaisseur des polices. Et cela peut être réalisé avec une échelle de police. Vous pouvez créer une échelle de police afin que les développeurs puissent plus facilement comprendre ultérieurement quel type de taille de police convient à quoi, et c'est ce que vous pouvez inclure dans votre guide de style, juste pour les afficher à côté de votre les couleurs , ainsi que vos images, vos styles et bien plus encore. Dans cette vidéo, je vais donc vous montrer comment créer une échelle de police simple. Vous n'êtes pas obligé d' utiliser cette approche. Vous pouvez trouver d'autres approches en ligne. Il existe littéralement des dizaines d'approches différentes en ligne. Découvrez celui qui convient le mieux à vous, votre projet et à vos objectifs de mise à l'échelle. Commençons donc. Nous voici donc dans Adobe XD et je vais simplement vous montrer comment créer une échelle de police rapide à l'aide d'Adobe XD. Si vous utilisez Figma Photoshop, y créer tout ce que vous pouvez créer. Mais à cette fin, je vais utiliser x D parce que je l' aime vraiment et que je l'utilise tous les jours. Je vais donc cliquer sur T pour créer H1 , par exemple , alors ce que je vais utiliser, c'est, disons, une bouteille comme ça. Au lieu de l'ordinaire, je vais opter pour noir, disons. Et je vais opter pour la taille 80. C'est tellement énorme. Et ce sera mon H1. Peut-être, peut-être même plus, peut-être 88, quelque chose comme ça. On y va. Ensuite, je vais appuyer sur Contrôle D ou Commande D, et le réduire à 64 environ. Et voilà. Au lieu du noir, je vais opter pour Bolt. Et au lieu de H1, je vais l'appeler H2. Donc, ce qui est créé ici est une distinction claire entre Heather, Heather et ici. L'un est quelque chose que je vais utiliser dans mes images de héros, par exemple au centre du design lui-même, au centre de ces images de héros. Contrairement à l'exemple que je vous ai montré précédemment. Mais c'est juste plus accentué, plus grand, plus audacieux, noir dans ce cas, mais celui-ci est en gras parce que je voudrais peut-être l' utiliser comme titre de mes sections ou quelque chose comme ça. Donc, c'est en gras et non en noir et c'est 64 88. Donc, si nous descendons un peu plus loin, vous pouvez créer un H3 dans ce cas. Et au lieu de 64, nous pouvons peut-être en utiliser 48 pour ce cas. Et au lieu d'utiliser Bolt, en fait non, restons audacieux pour cela. Ensuite, si nous baissons un peu, nous pouvons créer quelque chose comme H4. Et au lieu de 48, on pourrait peut-être opter pour 40, dans ce cas n. Utilisons l'irrégulier cette fois. Vous pouvez donc clairement voir la distinction entre ceux-ci. Donc, si nous baissons un peu H5, et dans ce cas, nous pouvons peut-être utiliser quelque chose, je ne sais pas, 24. Peut-être, on y va. Peut-être pouvons-nous l'utiliser comme texte de paragraphe ou comme exemple ou quelque chose comme ça, quelque chose d'un peu plus petit et H6, allons-y avec, je ne sais pas, 16 peut-être que dans mes cas, vous n'avez vraiment pas envie de pas plus de 16. Nous avons donc H1, H2, H3, H4, H5 et H6. Vous pouvez peut-être renommer ce H6 et l'appeler textes de paragraphes. Vous pouvez peut-être montrer quelque chose comme ça à vos développeurs, voir ce qu'ils en pensent. Et ce que vous pouvez également faire, c'est appuyer Ctrl D une fois de plus sur chacun d'entre eux et taper l'alphabet. Donc a, a, B, B, C, D, D, E, et ainsi de suite. Vous pouvez donc taper l'alphabet complet et afficher épaisseur et la taille de la police dans cet exemple particulier sur l'alphabet, ou utiliser quelque chose comme Je ne sais pas, un texto de Lorem Ipsum ou quelque chose comme ça. Je n'ai pas le raccourci clavier ici et le plug-in n'est pas installé ici. Alors allons-y avec ça. Lorem Ipsum ROC s'est donc rencontré, je pourrais peut-être copier ce texte et ensuite faire de même avec celui-ci. Il suffit de le coller. Cela va vous permettre de montrer à votre client et à vos développeurs à quoi ressemblera un texte particulier dans des cas d'utilisation particuliers. Disons donc que j'ai volontairement commencé avec cette couleur en particulier. Et pourquoi j'ai choisi de le faire, c'est simplement pour vous montrer les principales différences entre ce texte. Mais dans ce cas précis, ce que je ferais exprès, c'est que je changerais rapidement cette couleur pour quelque chose de beaucoup, beaucoup plus foncé. Et peut-être l'enregistrer ici sous forme d'échantillon de couleur. Ou je peux continuer et modifier mes couleurs ici. Alors ce que je peux faire, c'est. Débarrasse-toi de celui-ci. Je pourrais peut-être continuer tout de suite et choisir la même couleur, mais passer à quelque chose comme ça, puis choisir une couleur différente. Ce que vous pouvez faire, c'est donner un nom à vos échantillons immédiatement. Donc celui-ci est de couleur H2. Et voilà. Celui-ci est H1. Et peut-être pourrions-nous aller encore plus loin. Désolé, enregistrons ceci en tant que H2. Je peux donc revenir en arrière et utiliser le H12 , puis passer à la vitesse supérieure, quelque chose comme ça. Sauvegardez-le ici, enregistrez-le ici. Appelez ça h trois. On y va. Et enfin, peut-être que je voudrais choisir quelque chose d'encore plus brillant. Pour celui-ci, peut-être, peut-être pas, mais tout dépend vraiment de vous. Peut-être quelque chose comme ça. Et voilà. Et je peux lui donner le nom de H4. Dans ce cas particulier, vous pouvez voir qu'ils sont vraiment similaires. Mais voici l' intérêt de cette vidéo, mais vos clients ont peut-être la couleur principale, disons que le bleu est leur couleur principale. Donc, dans ce cas, nous pouvons peut-être opter pour quelque chose comme trois C6 FF. Donc, un bleu très vif et fort, c'est peut-être leur couleur principale. Alors, comment intégrer cette couleur dans votre design ? De toute évidence, vous n' allez pas l'utiliser pour cela. C'est vraiment pour les sections sur les héros , ce que j'ai déjà mentionné. Vous allez peut-être l' utiliser pour les trois. Donc trois font C6, F, F. Et comme vous pouvez le voir tout de suite, cela semble bien mieux dans cet exemple que dans cet exemple. Pourquoi ça ? Parce que si vous l'utilisez pour la plus grande taille de texte que vous avez dans votre conception, cela ne fera que détourner attention de l'utilisateur sur tout le reste. Ce n'est pas quelque chose que tu veux. Le texte est vraiment là pour expliquer les choses , guider vos utilisateurs vers ce qu'ils doivent faire ensuite et pour vraiment les aider à atteindre l'objectif leur visite sur votre site Web ou votre application mobile en particulier. Donc, dans ce cas, j'utiliserais la couleur pour le texte, quelque chose comme ça. Et je ne l'utiliserais pas pour les textes de paragraphes car, comme je l'ai mentionné précédemment, vous voulez que vos paragraphes soient lisibles. Vous voulez qu'ils soient facilement compréhensibles et que vos utilisateurs puissent naviguer facilement dans votre design. Donc, une dernière chose que j'ai oublié de faire c'est que je veux conserver cette couleur. Nous l'avons déjà. Et voilà. Donc H5, je veux le sauvegarder. On y va. H5. Et nous allons utiliser la même couleur pour le paragraphe lui-même. Et une dernière chose que je veux faire est de sélectionner toutes mes tailles de police, d'accéder aux styles de caractères et de cliquer dessus. Vous pouvez donc voir que cela va affirmer quelque chose comme ça. Mais ce que je peux faire, c'est passer à Control ou Command Z. Cliquez ici pour enregistrer celui-ci afin qu'il soit le premier. Et puis comme ça et vers le bas comme ça. Et il suffit de monter et de monter. On y va. Et bien sûr, vous pouvez les renommer. Vous pouvez venir ici et taper H1. Et vous pouvez le faire avec tous les autres. Donc H2, H3, et ainsi de suite et ainsi de suite. Je ne vais pas trop t'embêter avec ça. Mais le but ici est de les renommer. Comme je l'ai dit, il sera beaucoup plus facile pour les développeurs de comprendre plus tard ce que vous essayez de transmettre si vous n'allez pas développer ce design vous-même. Alors on y va. C'est à quel point il est très facile à utiliser. Et vous pouvez voir si vous faites une erreur comme je l'ai fait tout à l'heure, vous pouvez simplement voir tous les k dans H1 sélectionnés ici. Ou si vous avez accidentellement changé de couleur, vous pouvez continuer et voir, d'accord, il y a un clic H1 juste là, et la couleur correspondante sera utilisée . Vous pouvez donc voir à quel point c'est très simple. Et je vais vous fournir ce fichier, que je viens de vous montrer comme dossier d'entraînement pour que vous puissiez le tester. Explorez, exploitez-la pour vous-même, peut-être en jouant avec ces différentes couleurs qui viennent de vous être montrées, ou peut-être avec différentes familles de polices complètement différentes. Nous utilisons donc Roboto dans ce cas particulier Peut-être souhaitez-vous utiliser quelque chose avec une surface à l'intérieur, comme la police d'affichage Playfair, que j'ai mentionnée précédemment, ou souhaitez-vous être encore plus audacieuse que Un robot ? Tu peux le faire correctement. Là-bas. On y va. Ce sont les échelles de police, et voici comment les utiliser. Comme je l'ai dit, vous allez avoir ce dossier d'entraînement, assurez-vous de l' exploiter, de jouer pour obtenir un résultat parfait. Ou si vous n'aimez pas cette approche à huit pixels, comme je l'ai dit au début de cette vidéo, vous avez un tas de ces différents exemples en ligne. Assurez-vous de les explorer par vous-même et de voir ce qui vous convient le mieux. 77. AFFECTATION de l'article 9: Votre tâche pour cette section est d'utiliser l'un des différents outils que je vous ai montrés dans cette section. Et essayez d'associer différentes polices et essayez de voir si elles fonctionnent ensemble. S'ils le font, pourquoi travaillent-ils ensemble ? Lequel fonctionne le mieux pour les titres ? Lequel fonctionne le mieux pour les paragraphes, par exemple et j'ai essayé d'expérimenter différentes couleurs en utilisant l'un de ces outils que je viens de vous montrer. Et essayez de comprendre quelle combinaison de couleurs, quel type de combinaison amusante vous aimez le plus. Peut-être même essayer différentes tailles et voir quelle taille vous convient le mieux en tant que spectateur. Et cela aura évidemment le même impact pour vos utilisateurs. Alors expérimentez, amusez-vous et apprenez quelque chose de nouveau. 78. Iconographie: En tant qu'éléments de design, les icônes sont extrêmement importantes car l'image contient 1 000 mots et les icônes sont là pour prouver que, d'accord, vous pouvez utiliser différentes icônes pour raconter une meilleure histoire, plutôt que de simplement en utiliser plusieurs des textes, vous pouvez remplacer tous les textes par une simple icône, ce qui racontera une meilleure histoire que tout ce texte que personne ne va lire après tout. Les icônes sont donc extrêmement importantes, mais quel type de style allez-vous utiliser ? Comment associer différentes icônes, où trouver des icônes ? C'est ce dont nous allons parler dans cette section. 79. Qu'est-ce que les icônes: Les icônes sont des éléments graphiques qui sont utilisés dans vos conceptions pour aider vos utilisateurs à mieux comprendre vos conceptions. Ils ne sont là que pour mieux correspondre au texte ou aux images. Lorsque vous utilisez des icônes, veillez à ne pas en faire trop, car le but des icônes est d'aider votre autre contenu, et non de le souder oralement. Cela signifie essentiellement que lorsque vous utilisez des icônes, assurez-vous de les utiliser à des endroits spécifiques où cela a du sens. Assurez-vous de ne pas utiliser d'icônes lorsque vous avez plusieurs espaces dans vos designs et un espace énorme dans vos designs, plusieurs espaces dans vos designs et un espace énorme dans vos designs, car ainsi les images seront beaucoup plus belles dans vos designs. Les icônes sont également utilisées pour expliquer aux utilisateurs ce qu'ils doivent faire un peu mieux. Ce que je veux dire par là, c'est que vous ne pouvez tout simplement pas utiliser d'images, si vous ne trouvez tout simplement pas d'images qui expliqueront des situations complexes. Eh bien, si nous ne pouvons pas utiliser la vidéo à certains endroits, les icônes sont une bien meilleure façon de le faire, car vous pouvez toujours inclure plusieurs icônes pour expliquer plusieurs sujets dans un seul espace. C'est pourquoi les icônes constituent une excellente approche et un excellent moyen de les utiliser dans vos designs. Les icônes peuvent être simples ou complexes. Ils peuvent être colorés ou en noir et blanc. Et nous allons parler de toutes les classifications dans les prochaines vidéos, où trouver les différences entre différentes icônes et comment utiliser correctement vos icônes. 80. Différents types d'icônes: Il existe de nombreux types d'icônes. Et selon la raison pour laquelle vous les utilisez, vous allez utiliser un certain type d'icône où ce contour est rempli de couleurs. Et il existe plusieurs manières d'utiliser les icônes, dont nous parlerons plus loin dans ce cours. Mais il existe également plusieurs catégories. J'ai donc ici des icônes matérielles, et vous pouvez les voir ici, en haut, que nous avons décrites. Et vous pouvez voir toutes ces icônes soulignées. Vous pouvez constater que le principe de base des icônes en forme de plan, mais pas pour toutes les icônes, en particulier pour ce cœur que vous pouvez voir ici, est d'avoir un espace vide à l'intérieur et avoir simplement contour à l'extérieur de l'icône. Si je repasse au champ, vous pourrez voir à quoi ils ressemblent tous . Mais encore une fois, vous pouvez le voir en effectuant une recherche, par exemple cela n'a tout simplement aucun sens que certaines icônes soient complètement remplies. Parce que si nous ressentons complètement cette icône de recherche, elle perdra son utilité. Il va disparaître. Cet espace entre les deux pour cette déconnexion, le même pour cette phase, le même pour cette bordure préférée. Pareil si nous optons pour les coins arrondis, en gros, cela vous montrera simplement les coins arrondis de ces icônes. Si nous optons pour des bords tranchants, cela vous montrera les arêtes vives. Et en gros, toutes ces icônes sont parfaites au pixel près, toutes ces icônes sont parfaites au pixel car la majorité d'entre elles sont au format SVG. Et nous en reparlerons un peu plus tard dans la partie Adobe XD de ce cours. Quand je vais expliquer les différents formats de fichiers et comment pouvez-vous travailler avec différents formats de fichiers. Enfin, nous devons nous tourner vers la tonalité, comme son nom l'indique, possède tous ces contours, tout rempli de couleurs. Mais elle vous montre également ces motifs bicolores, en gros une couleur, un ton pour le contour dans ce cas, et un ton et une couleur pour la ligne de cet étui. Encore une fois, selon les icônes que vous utilisez dans quel but , cela s'affichera différemment. Et si je vous montre ici dans cet exemple, il s'agit du pack premium d'Envato Elements, dont vous pouvez voir ici l'icône colorée. Si je clique ici pour agrandir cette image et vous montrer la différence. Voici donc les icônes colorées et voici l'icône du contour. Vous pouvez donc voir tout de suite la différence entre ces icônes, essentiellement dans le plan, comme je vous l'ai montré ici sur ce livre gratuit de Google Material Icones. Au fait, toutes ces ressources que je mentionne seront liées dans un PDF. Assurez-vous de télécharger ce PDF et pour explorer tous ces liens et pour y accéder vous-même, il vous suffit de cliquer sur le lien de votre choix. N va vous y mener dans votre navigateur. Si nous revenons ici, comme je l'ai dit, nous avons ces icônes soulignées et nous avons ces icônes surlignées ici. La différence entre les deux réside évidemment dans l'épaisseur et le style. Donc, si je vous ramène aux icônes matérielles, vous pouvez voir qu'elles sont extrêmement simples. Ils sont très simples à utiliser. Mais si je vous emmène ici à ces icônes de voyage, vous constaterez qu'elles sont bien plus complexes. Ils contiennent des éléments plus riches à l'intérieur. Ils ont un teint multiple, ils ont même des traits différents. Ils sont donc très complexes. Si tu veux faire ce genre de choses. Encore une fois, selon le projet en question, vous utiliserez soit ces icônes plus simples soit ces icônes complexes. Enfin, si je vous amène à ces icônes colorées, vous pouvez voir que nous avons toujours tous ces traits, mais maintenant nous avons de la couleur et avec des icônes colorées, vous remarquerez parfois qu'ils utilisent une couleur ou comme dans ce cas, ils utilisent plusieurs couleurs. Vous pouvez donc voir que nous avons du vert, du rouge, nous avons ce gris foncé, nous avons ce gris clair et nous avons cette couleur presque blanche. Nous avons aussi cette couleur bleu sarcelle, nous avons cette couleur jaune, cette couleur rouge. Donc, en fonction du projet en question et de ce que vous faites avec vos icônes, vous allez choisir l'un de ces styles, soit l'un ou l'autre, que je vous ai montré ici avec les icônes matérielles. Des styles donc très simples. Ou si vous recherchez à nouveau ces styles complexes, vous pouvez choisir entre un contour ou une couleur. Et bien sûr, comme j' utilise Envato Elements depuis des années, je sais que toutes ces icônes sont de très haute qualité, vous pouvez donc ajuster toutes ces couleurs. Donc, par exemple, je souhaite utiliser les couleurs de ma marque. Supposons que votre client ait deux couleurs, par exemple le bleu et le rouge. Ensuite, si nous revenons à celles-ci, vous pouvez ajuster toutes ces couleurs. Donc, au lieu du jaune au lieu du vert au lieu de tout cela, supposons que vous utilisiez du bleu et du rouge. Vous pouvez facilement obtenir ce résultat en ajustant simplement ces couleurs dans l'outil de votre choix. Pour ce cours, nous utilisons Adobe XD. Je vais également vous montrer cela un peu plus tard et comment vous pouvez ajuster certaines de ces icônes en fonction de votre marque. Mais c'est tout le principe de ces icônes colorées. Encore une fois, en fonction de ce que vous faites, du type de projet sur lequel vous travaillez, complexité de votre projet, qu' essayez-vous de décrire à ses visiteurs en utilisateurs ? Est-ce quelque chose de vraiment simple ? Ensuite, vous allez utiliser ces icônes matérielles gratuites. Qu'est-ce que vous pouvez même utiliser des icônes premium qui sont aussi simples que ces icônes matérielles. Ou d'un autre côté, vous allez utiliser quelque chose de beaucoup plus complexe, comme ces icônes premium que je vous ai montrées chez Envato Elements. 81. Bibliothèques d'icône, packs et formats de fichier: En fonction de l'utilisation que vous allez faire de vos icônes, vous allez choisir une bibliothèque d' icônes ou un pack d'icônes. La différence, c'est que dans les bibliothèques il y a parfois des milliers d' icônes différentes, comme les icônes matérielles que je vous ai montrées. Et il n'est pas vraiment possible de télécharger l'intégralité de la bibliothèque car, comme je l'ai dit, ces bibliothèques peuvent parfois contenir jusqu'à 10 000, 15 ou 20 000 icônes différentes. Il est donc très difficile de télécharger et de trier toutes ces icônes . Ensuite, vous pouvez utiliser quelque chose appelé Icone jar, qui ne fonctionne malheureusement pas sous Windows, mais cela fonctionne sur Mac. Donc, si vous utilisez Mac, vous pouvez utiliser Icone Jar très facilement. Parcourez ces différents packs à votre guise. La majorité de ces packs sont premium, vous devrez donc les payer. Mais si vous utilisez quelque chose comme des icônes matérielles vous pouvez vous en sortir gratuitement. Et nous aborderons la version gratuite par rapport à la version premium un peu plus tard dans ce cours. Mais pour l'instant, permettez-moi de vous expliquer rapidement ces différents types de fichiers et formats de fichiers. Donc, si je vous amène directement à Adobe X d, c'est mon chat, un kit d'interface utilisateur, et vous pouvez l' obtenir. Le lien se trouvera dans le PDF si vous le souhaitez, mais ce n'est pas obligatoire. Je ne vous montre ici qu'à titre d'exemple. Nous avons donc ici un kit d'interface utilisateur, mais vous pouvez simplement l' imaginer comme un projet sur lequel vous allez travailler pour votre client. Et imaginons que vous allez utiliser des icônes. Alors, où pouvez-vous trouver ces icônes ? Web, comme je vous l'ai montré. Vous pouvez les trouver en ligne sur ces ressources premium et sites Web premium comme Envato Elements. Et en fait, je vais l'ouvrir dans une seconde, juste pour vous le montrer. Mais si je reviens à XD, vous pouvez également trouver le menu de ce plugin ici, et vous pouvez utiliser ce que l' on appelle des icônes pour le design. Par exemple , il existe de nombreux plugins différents, et vous pouvez cliquer ici pour accédez au menu des plugins. Ensuite, vous pouvez simplement rechercher des icônes ici, appuyer sur Entrée ou Retour. Et il va vous montrer tous ces différents packs d' icônes. Sachez que la majorité d'entre eux ont des versions gratuites. Toutes les icônes ne sont donc pas gratuites. Ils ont juste quelques versions gratuites et des icônes gratuites que vous pouvez utiliser. Parce que la majorité d'entre elles sont des bibliothèques d' icônes, comme je l'ai mentionné. Ils vous offrent donc la possibilité d'utiliser une icône gratuite. Donc, si vous installez l'un de ces plugins, sachez qu' il vous montrera toutes ces icônes et vous allez penser que, oui, elles sont toutes gratuites, c'est génial. Mais en fait, ils ne le sont pas. Ils vous offrent simplement quelques options gratuites, mais pour la majorité des icônes, vous devrez payer. Donc, si nous revenons ici, si vous installez ce plugin d' icônes pour le design, il fonctionne au moment de l'enregistrement de cette classe, mais assurez-vous simplement de le comprendre. ne suis pas en mesure de m' assurer que tous ces plug-ins fonctionnent en permanence. Parce que tout comme le logiciel, comme tout ce qui va et vient dans la vie. Assurez-vous donc de parcourir ces plugins si vous utilisez Adobe XD, consulter la voix des utilisateurs et de consulter le blog officiel d' Adobe XD pour voir quand ils les mettent à jour, notamment pour les icônes. Parce que comme je l'ai dit, parfois ces plugins vont et viennent. Les développeurs s'ennuient et ne les mettent pas à jour pendant des mois, donc ils ne fonctionnent pas correctement. Et assurez-vous simplement de comprendre si vous empruntez cette voie. En utilisant ces plugins dans Adobe XD, assurez-vous de vous familiariser avec le plug-in pour savoir si le plug-in fonctionne réellement. Et si vous avez la possibilité d'utiliser ces icônes dans vos projets premium ou gratuits, ce qui est très important, car parfois ces icônes peuvent être utilisées pour des projets pré-gratuits, mais parfois elles le peuvent peut également être utilisé pour des projets préliminaires et premium. Assurez-vous donc de vous familiariser avec l'option qu' ils vous proposent. Si vous utilisez un outil tel qu'Envato Elements, par exemple, ils vous donnent la possibilité d' utiliser ces ressources comme vous le souhaitez. Et si nous revenons aux éléments Envato ici, vous avez la possibilité de tous les utiliser. Ainsi, à partir de vidéos, musique, d'effets sonores, de modèles graphiques, kits d' interface utilisateur, de photos, de modèles Web , de modèles 3D et d'icônes, par exemple, vous avez la possibilité de les utiliser tous comme vous le souhaitez, quand vous voulez participer au projet que vous souhaitez. Mais bien sûr, c'est premium, vous devrez donc le payer. Assurez-vous simplement de comprendre si vous utilisez un logiciel gratuit, plug-in gratuit, une icône gratuite. Assurez-vous de voir la licence sur leur site Web. Ou si le plugin possède un site Web, assurez-vous de vous familiariser car la dernière chose que vous voulez faire et avoir dans votre vie est le procès intenté par quelqu'un d'autre qui a créé cet actif. Vous pensez simplement que c'est super, tout cela est gratuit, mais dans la majorité des cas, la grande majorité des cas, ce n'est pas gratuit. Vous devrez payer pour au moins certains, comme ces plugins que je vous ai montrés qui ont une version gratuite, mais ils ne sont pas entièrement gratuits. Donc, encore une fois, avant de passer à autre chose, assurez-vous de vous familiariser avec ce que vous utilisez. Si vous utilisez simplement du matériel, ce n'est pas grave, car il est open source, créé par Google, comme Google Fonts. C'est gratuit et vous pouvez l'utiliser comme vous le souhaitez. Donc, si nous revenons ici, comme je l'ai dit, nous avons cette icône du design. Et si j'ai quelque chose comme un cœur saisi ici, vous pouvez voir ici que toutes ces bibliothèques sont des bibliothèques d'icônes, donc elles extraient des icônes gratuites à partir de bibliothèques d'icônes d'aversion. C'est donc tout de suite le problème. C'est le problème que j'ai évoqué dans la première vidéo de ce cours sur le changement constant des styles. Parce que c'est le principal problème que je rencontre avec le fait d'être designer. Ils ne comprennent tout simplement pas. Ils utilisent une icône provenant d'une bibliothèque précédente, autre icône d'une autre bibliothèque Packer. Et ils n' ont tout simplement pas la cohérence et leurs designs. Un look pas raffiné, pas un look professionnel , un look amateur. Et vous pouvez vraiment savoir, non seulement en tant que designer, mais aussi en tant que client, qui n'est pas designer lui-même. Encore une fois, assurez-vous de les utiliser, de vous familiariser et de les utiliser tous dans le même style et avec la même apparence. Parce qu'une fois de plus, cela ne fera que donner à vos créations aspect non professionnel et non raffiné. Comme vous pouvez le voir sur ce pack d'icônes en forme de plume, par exemple, nous n'avons qu'une seule icône. Mais à partir de ces icônes géniales, nous avons plusieurs icônes, mais encore une fois, non, pas dans le même style. Par exemple, je veux les icônes de plan car elles fonctionneront bien avec mon projet. Mais vous ne pouvez pas trouver ce style ici. Pour les modèles iconiques, vous pouvez trouver différents styles. Mais que se passe-t-il si vous effectuez une recherche à partir d'une autre icône et que vous ne l'avez pas dans Iconic ? Par exemple, je veux utiliser ce cœur iOS à vide, par exemple Let's Delivery. Je travaille peut-être sur un site de livraison. Vous pouvez voir qu'il n'y a pas une seule icône à l'arrière. C'est donc un problème tout de suite. Si vous souhaitez obtenir de la cohérence et donner à vos designs un aspect professionnel et raffiné. Alors, ce que vous pouvez faire dans ce cas, c'est trouver une bibliothèque contenant la majorité de ces icônes et les utiliser gratuitement si vous commencez. Mais si vous avez déjà commencé et que vous avez de l'intérêt, je ne peux vraiment pas vous recommander service suffisant ou payant qui mettra toutes ces icônes à votre disposition à portée de main à tout moment. Je vais maintenant vous montrer le pack premium. C'est la grande constante que j'ai tirée du fait que c'est un pack haut de gamme. Mais si je zoome un peu plus près, vous pouvez voir que toutes ces icônes sont dans ce style. Donc, esquissez le style, il n'y a pas de style complet, il n'y a rien d'autre. Style juste esquissé, ce qui est idéal si vous utilisez ce style tout au long de votre projet. Donc, parce que c'est le cas, je pense à environ 240 ou 2 400 en fait. Zoomez un peu. Oui, je crois que c'est 22400 parce que nous avons tous ces différents packs et je les dissocierais simplement comme ça. Mais je peux naviguer en ligne et voir, mais je pense que ce sont 2 400 icônes différentes. Vous pouvez donc imaginer qu'ils ont l'icône pour chaque occasion possible. Et si vous utilisez exactement ce style, vous pouvez l'utiliser dans tous vos projets, tout au long de votre conception. Assurez-vous simplement d'utiliser ce style exact pour obtenir cette cohérence et ce look professionnel. Et vous pouvez le faire parce que toutes ces icônes se ressemblent. Parce qu'ils sont créés par la même équipe de personnes. Vous pouvez voir qu'ils se ressemblent tous . spécifications, ils semblent appartenir l'un à l'autre et vous pouvez facilement les personnaliser. Vous pouvez changer la couleur, vous pouvez changer ce contour, faire ce que vous voulez. Vous pouvez voir, par exemple changer cette couleur et modifier l' épaisseur de la bordure si vous l'ouvrez au format de fichier Adobe Illustrator. Et je pense que c'est le moment idéal pour parler des formats de fichiers. Donc, en gros, les formats de fichier sont très importants en fonction du projet sur lequel vous travaillez. Si vous travaillez avec des images JPEG, vous ne disposez pas de l'option de transparence. Cela signifie essentiellement couleur d'arrière-plan de votre image JPEG qu'elle va afficher. Vous ne pouvez pas utiliser cette icône. Vous ne pouvez pas modifier sa couleur sans modifier la courbure générale de l'image. Donc, en gros, c'est juste une image intégrée. C'est une image bitmap. Ainsi, lorsque vous zoomez de très près, il perd considérablement de sa qualité. Vous ne pouvez donc pas vraiment l' utiliser pour des projets de pages Web, pour nos projets de pages où vous devez atteindre une certaine évolutivité. Vous ne pouvez certainement pas l'utiliser pour l'impression, car dès que vous commencez à imprimer, en particulier sur des tirages plus volumineux, vous constaterez une perte de qualité. Il y a aussi P et G, qui ne sont en gros qu'une image bitmap comme le JPEG, mais avec de la transparence. Ainsi, avec le JPEG, vous avez l'image d' arrière-plan intégrée et vous n'avez aucune transparence. Avec le format PNG, vous avez de la transparence. Mais encore une fois, comme il s'agit d'une image bitmap, nous sommes toujours confrontés à ce problème de perte de qualité. Ainsi, dès que vous commencerez à zoomer, vous constaterez cette perte de qualité. Donc, pour les gros tirages, il est vraiment interdit d'utiliser un PNG. Alors, ce que vous pouvez faire dans ce cas, c'est que je recommande vraiment que tous vos projets fonctionnent avec des images SVG. En gros, si je reviens ici, si je zoome de très près sur cette icône, vous ne pouvez pas voir de pixels. Donc, si je vous y ramène encore une fois car je le télécharge pour cet exemple en particulier. Donc, si je reviens à Adobe XD, cliquez ici sur votre ordinateur, ouvrez BSD ou AI. Parce qu'Adobe XD est le produit d' Adobe. Et parce qu'Adobe Illustrator et Adobe Photoshop, ce qu'il s'agit, sont essentiellement des produits d'Adobe. Ainsi, vous pouvez facilement ouvrir l'un de ces formats de fichiers. Et ça va garder la cohérence ça va maintenir la qualité. Parce qu'une fois de plus, c'est le produit de la même entreprise. Donc, si nous revenons ici, PSD ou AI s'ouvrira dans un dossier contenant ces icônes spécifiques d'Envato Elements. Ce sont donc des icônes de voyage. Et ce que nous avons ici, c'est AI pour Adobe Illustrator, EPS, qui est également un autre format de fichier qui préserve la cohérence. Il s'agit d'un format de fichier vectoriel comme Adobe Illustrator, comme le SVG. Il va donc conserver la qualité. Malheureusement, EPS n'est pas supporté par Adobe XD. Toutes ces icônes sont donc exactement les mêmes, mais dans ces différents formats de fichier, nous avons ci-dessous un pot d'icônes, que j'ai mentionné précédemment. Donc, si vous utilisez un Mac, vous pouvez toujours ouvrir le pot d' icônes et les ajouter à votre collection. Nous avons la PNG et je ne suis pas contre la PNG. Vous pouvez toujours utiliser des icônes PNG et des images JPEG si vous le souhaitez, par exemple sur les publications sur les réseaux sociaux, car elles ne nécessitent pas une résolution aussi élevée. Vous pouvez donc toujours utiliser des images PNG si c'est la seule chose que vous avez. Mais pour tout ce qui est plus volumineux, par exemple pour l' impression, ou en particulier pour quelque chose sur lequel les utilisateurs peuvent zoomer de très près, comme les pages Web, les projets Web et les applications mobiles vous recommandons vraiment optez pour quelque chose comme SVG. Si nous revenons ici, nous avons maintenant la différence entre les formats SVG et vous verrez cela dans la majorité des autres packs d' icônes et types d'icônes. Est-ce que c'est lorsque vous utilisez le SVG, cela séparera ces SVG dans la majorité des cas. Et il va afficher des icônes distinctes. Donc, si nous revenons ici, vous pouvez voir que nous avons expliqué et inexpliqué, ce qui correspond essentiellement à la quantité de détails. Donc, si nous allons ici, nous avons de la couleur et des contours, comme je vous l'ai montré. Et cela ne montre rien car vous devez ouvrir les SVG directement depuis le dossier, mais ils sont là. Cela va les montrer essentiellement sous forme de PNG. J'espère donc que cela apparaîtra ici. Alors laisse-moi voir si je peux changer ça. Maintenant, parce que nous l'avons ouvert en tant que PSD et IA, mais peu importe. Je peux le montrer si je les ouvre dans un dossier comme celui-ci ou si j'agrandis la couleur. Voici donc les icônes SVG. C'est ce que je disais, vais les montrer individuellement. Vous pouvez donc toujours glisser-déposer ces icônes SVG à partir d'ici, que je vais vous montrer dans une seconde. Mais pour en revenir à cela, ce que je ferais dans ces cas, c'est utiliser l'IA, car l'IA ou Adobe Illustrator sont des formats de fichier vectoriels qui ne perdront jamais en qualité. Vous pouvez l'utiliser pour n'importe quel type de projet sur lequel vous travaillez. Vous pouvez l'utiliser pour les petites tailles, les grandes tailles. Il s'agit de toujours maintenir la cohérence de la qualité et des détails de ces icônes. Donc, si nous revenons à ce que nous avons, nous avons la couleur et la couleur s'étendent, ce qui, dans le cas particulier de ce pack en particulier, ne tient qu'à la quantité de détails et à la richesse des détails. Mais dans certains autres packs, vous n'allez pas voir que nous proposons des voyages et une expansion des voyages. Donc, en gros, le voyage est sans couleur, la couleur parcourue est avec la couleur. Passons donc à la couleur des voyages, par exemple , parce que je veux montrer comment vous pouvez modifier ces couleurs. Et pendant que cela s'ouvre, permettez-moi de minimiser cela et de le ramener à nouveau. Parce que je veux juste montrer que tu peux toujours, ce sont des SVG. Vous pouvez les cliquer, les faire glisser et les déposer dans votre fichier Adobe XD. Et si je zoome de très près, très près, vous pouvez voir que nous n'avons aucune perte de détails. Nous avons tous ces détails contenus dans cette icône. Et si je reviens à ce pack d' icônes que je viens d'ouvrir, vous pouvez voir à quoi il ressemble. Permettez-moi donc de supprimer celui-ci. Je peux retourner ici. Permettez-moi de vous montrer rapidement celui-ci pour que vous puissiez voir à quoi il ressemble. Donc, si je l'ouvre et que j'appuie Control Zero pour le mettre en place, zoomez de très près dessus. Ainsi, vous pouvez voir toutes ces différentes ombres. Vous pouvez voir que la qualité est vraiment excellente. Donc, si nous revenons en arrière et sélectionnons, par exemple , je ne sais pas, passons à celui-ci. Appuyez sur la touche Ctrl C. Revenez à cette page, puis appuyez sur la touche V pour la coller dans tableau que vous avez le tableau que vous avez sélectionné et vous pouvez simplement le mettre en place. Maintenant, parce que j'ai déjà quelques couleurs pré-préparées ici. Si je souhaite adapter cette icône à mon style, je dois simplement la sélectionner, par exemple . Vous pouvez maintenir la touche Ctrl enfoncée et cliquer à l'intérieur. Et nous avons la frontière juste ici. Si nous sélectionnons cette bordure, vous pouvez voir qu'elle a été modifiée et mise à jour avec cette couleur. Et par exemple, je veux faire de même avec celui-ci. Je peux peut-être le faire ici. Et nous l'avons ici. Ainsi, vous pouvez voir et avoir une idée de la façon dont vous allez les adapter à votre projet, par exemple , ce sera bleu clair. Et je vais utiliser cette couleur pour travailler avec ça. Et peut-être que j'ai cette orange, peut-être que je voudrais l'utiliser ici pour celles-ci. Peut-être voudrais-je m'en servir pour être, je ne sais pas, blanche moi aussi. Nous avons la frontière, donc. Allons-y avec celui-ci. Et pour ce rouge, allons-y avec celui-ci afin que vous puissiez vous faire idée de sa facilité d'ajustement. Et nous ne sommes qu'à quelques clics. Vous pouvez facilement ajuster ces icônes en fonction de votre style. Bien sûr, c'est avec les icônes colorées, vous pouvez donc voir comment c'est maintenant. Donc, si nous vous ramenons à ce que c'était avant et à ce que c'est aujourd'hui. Vous pouvez donc constater un changement complet. Et si je vous emmène ici aux couches, vous pouvez voir toutes ces couches. Maintenant, ce que je veux vous montrer également, c'est ceci. Donc, si vous utilisez ces icônes comme contours. Donc, si je reviens ici, agrandisse la couleur, nous avons tracé le contour et passons à l'ascenseur, qui est la même icône. Si nous zoomons de très près, vous pouvez voir que nous n' avons aucune couleur à l'intérieur. Nous avons juste ce schéma. Donc, si je veux changer cela, je vais simplement cliquer ici et vous pourrez voir qu'il se met à jour en temps réel en fonction de mes couleurs, dont j'ai besoin. C'est donc l'option que vous avez lorsque vous utilisez ces icônes premium. Enfin, ce que je souhaite partager avec vous, c'est l'exportation réelle des icônes elles-mêmes. Vous pouvez donc parfois exporter ces icônes pour les développeurs s' ils n'utilisent pas de plugins, s'ils utilisent des options Bridge, comme Zeplin , et qu'ils ne les utilisent pas. C'est un outil qui vous permet d'exporter des icônes manuellement, afin qu'ils puissent les utiliser dans certains cas. Vous pouvez donc également le faire dans Adobe XD. Et pour vous donner ces options d'exportation, revenons ici et sélectionnons l' icône que vous avez déjà ici. J'ai donc ces multiples icônes ici. Donc, si je sélectionne celui-ci, clique dessus et que je vais dans le panneau des couches, vous pouvez voir son icône de profil. Donc, si je veux juste sélectionner une exportation, celle-ci, je dois appuyer sur Contrôle ou Commande E. Cette boîte de dialogue m'affichera. Donc, encore une fois, souvenez-vous de ce dont nous avons parlé il y a une minute à propos de ces formats de fichiers. Donc, si je reviens ici, nous avons des points P et G. Comme je l'ai dit, la PNG est idéale pour les réseaux sociaux et, à mon avis, honnêtement, rien d'autre. Vous pouvez cliquer ici pour choisir SVG, ce qui est génial. Encore une fois, si vous souhaitez l'exporter pour tout ce qui est de haute qualité et qui exige de la qualité. Assurez-vous donc de le faire. Nous avons également le format PDF. Le PDF est idéal à exporter si vous avez, par exemple un guide de style avec plusieurs icônes à l'intérieur, et que vous souhaitez simplement exporter ce guide de style pour que votre client puisse payer et voir si c'est quelque chose qu'il vouloir. C'est idéal pour les mood boards, par exemple qu'ils puissent imprimer ce PDF et prendre des notes, peut-être le scanner et vous le renvoyer. Ainsi, selon le cas d'utilisation, PDF peut vraiment être utile. Et enfin, nous avons le JPEG. Le format Jpeg est très utile si vous voulez simplement l'envoyer à votre client pour qu' il l'examine, juste pour voir si cette icône correspond vraiment à ses besoins. Si cette icône leur plaît. Vous allez peut-être utiliser ce JPEG, mais pour les développeurs, pour le développement, des fins de développement, je recommanderais toujours, toujours les icônes SVG. C'est donc en gros tout pour les icônes. J'espère vraiment que vous aurez l'idée et que vous aurez une idée de la façon de les utiliser. Différences entre les packs, les packs premium, les packs gratuits. Nous en parlerons dans un instant dans une vidéo séparée de ce cours, car je pense qu' un instant dans une vidéo séparée de ce cours, il est très important, en particulier pour les designers débutants, savoir quoi utiliser et où l'utiliser pour quel type de projets. Assurez-vous simplement de l'utiliser conformément à la licence. Donc, si vous pouvez les utiliser pour des avant-projets et que la majorité des icônes disponibles peuvent être utilisées pour des avant-projets, surtout si vous travaillez uniquement pour vous-même, des fins de présentation sur Behance ou dribble, par exemple des dettes. Presque toujours bien. Mais juste pour être sûr, assurez-vous de vérifier auprès du créateur sur son site Web si vous avez la licence appropriée. 82. Icônes de haut niveau VS: Hormis le prix, différence entre les icônes gratuites et premium réside évidemment dans la variété et les avantages. Donc, avec les icônes gratuites, comme je vous l'ai montré dans ce plugin dans la vidéo précédente, vous pouvez parfois avoir une variété de deux, peut-être trois icônes, mais avec des icônes premium. À la lumière des cas, vous aurez le choix entre des centaines de choix différents. Ainsi, en fonction de vos projets, ces trois icônes peuvent parfois ne pas fonctionner correctement. Et plus important encore, si vous continuez à utiliser des icônes gratuites, ce n'est pas grave au début si vous débutez dans ce secteur. Mais dès que vous gagnez de l'argent, dès que vous avez du succès, nous vous recommandons toujours d'utiliser des icônes premium car cela vous différenciera des débutants. Et cela montrera à vos clients que vous vous souciez d'eux, car vous allez donner à vos créations note professionnelle et vous allez leur donner une distinction entre toutes les autres. designs sur le marché. Comme je l'ai mentionné, j' aime beaucoup utiliser les éléments Envato car sur les éléments Envato vous avez toutes ces différentes options. Et je viens de vous montrer la pointe de l'iceberg. Et si je vous montre, par exemple nous utilisons ces icônes et elles proviennent uniquement d'une icône, ce qui est une excellente option sur Envato Elements. Vous pouvez voir que cette personne a créé ces icônes et vous pouvez simplement cliquer ici pour trouver exactement le même style les icônes que nous utilisons. Donc, si nous allons ici, vous pouvez voir qu'ils possèdent plus de 1 000 actifs différents. Donc, si je clique trop sur les modèles graphiques et que je fais défiler l'écran vers le bas. Maintenant, si nous revenons aux graphiques et que nous défilons vers le bas, vous pouvez voir que nous avons ces icônes exactement dans le même style. Donc, si vous aimez la cohérence, vous pouvez toujours parcourir ces différents packs ici , sur Envato, des éléments provenant exactement du même créateur et de la majorité de ces créateurs sont simplement en train de décomposer ces packs à partir d'un dos énorme et gigantesque. C'est pour que vous, en tant que consommateur, puissiez accéder beaucoup plus facilement à ces piquets. Et encore une fois, vous n'avez pas besoin d'utiliser éléments Envato qui sont vraiment comme ça parce que sont tous ces éléments sur ce sont tous ces éléments sur Envato Elements, que j'ai mentionnés graphismes aux photos, en passant vidéos, des polices, de la musique, tout ce dont vous pourriez avoir besoin. Mais ce cours est entièrement consacré à l'icône, c'est donc ce que je mentionne ici. Bien Imaginez que, par exemple j' utilisais Je me souviens de quelque chose comme ça il y a deux ans ou quelque chose comme ça. Et je l'utilise depuis plus de cinq ans maintenant. Avec Envato Elements, j'utilisais les icônes d'un seul créateur. Ce n'était pas ce créateur ou ces autres créateurs, mais peu importe. J'utilisais une icône pour un projet hôtelier que je menais. Et puis j'ai eu un projet de boutique de location de voitures. J'utilise également la même icône de créateur d'Envato Elements pour ce projet en particulier, ce qui m'a permis de naviguer beaucoup plus simplement car je travaillais sur deux projets en même temps. Je cherchais donc des icônes One Creator et elles correspondaient aux deux projets. Les deux projets sur lesquels je travaillais en même temps comportaient donc des icônes du même créateur, mais elles ont l'air complètement différentes car sur un site Web, j' utilisais des icônes colorées. Sur un site Web, j' utilisais des icônes de plan, mais elles provenaient du même créateur Il m'a donc été très facile d'y accéder. Encore une fois, vous n'avez pas besoin d'utiliser Envato Elements simplement parce que vous souhaitez bénéficier du service que vous souhaitez Il existe des milliers de services différents. J'aime beaucoup les utiliser parce que comme je l'ai mentionné à plusieurs reprises, j'aime beaucoup la façon dont vous avez toutes ces choses ici parce qu'il n'y a aucun projet qui ne soit destiné à vous obligent à utiliser des photos, à utiliser des polices différentes. Et en parlant de polices, c'est la même histoire avec les polices, avec les images comme avec les icônes, lorsque vous utilisez des objets haut de gamme. Donc, des icônes, des polices et des images haut de gamme donneront vraiment à votre design un aspect soigné et professionnel. Et cela va vraiment lui permettre de se démarquer de la foule. Et j'espère vraiment que cela attirera clics, des liens ou des inscriptions pour vos clients, car il aura l'air beaucoup plus raffiné et professionnel que la concurrence, car la majorité des la concurrence, en particulier pour les petites entreprises, utilise des sites Web tels que Unsplash ou utilise des sites Web tels que des icônes matérielles pour les icônes. Et ils se ressemblent tous en gros. Ainsi, tous les designers qui travaillent sur ces sites Web ont exactement la même apparence. C'est donc votre principal avantage et points de différenciation  : assurez-vous de pouvoir, dès que possible, commencer à utiliser ces icônes premium et ces services haut de gamme, ces packs premium, juste pour vous ces icônes premium et ces services haut de gamme, ces packs premium, différencier si vous vous retrouvez dans la foule, apporterez à votre design look beaucoup plus professionnel et raffiné. Et sans oublier que vous n'allez pas avoir de problèmes car, comme je l'ai mentionné dans les exemples précédents, si vous utilisez ces ressources gratuites en ligne, vous allez avoir des problèmes si vous n'utilisez pas eux correctement. Assurez-vous donc de toujours vérifier auprès de la licence. Donc, si nous faisons défiler l'écran jusqu' et que nous pouvons explorer la licence, cliquez ici. Ainsi, vous pouvez voir une licence commerciale simple, afin de pouvoir l'utiliser comme vous le souhaitez. Vous pouvez enregistrer des objets chaque fois que vous les utilisez. Des directives claires sur ce qui n'est pas autorisé. Vous ne pouvez donc pas les revendre, vous ne pouvez pas les mettre sur des services à la demande tels que, je ne sais pas, par exemple Creative Market UI. Donc, en gros, vous ne pouvez pas prendre ce que vous trouvez ici et le vendre comme votre propre licence pérenne, ce qui signifie que même à terme, si vous vous désabonnez de leur service, vous êtes toujours couvert par cette licence, que j'aime beaucoup. Ainsi, par exemple, votre client a découvert que vous êtes couvert et que vous avez toujours accès à toutes ces icônes auparavant. En gros, cela signifie que plus tard, si vous utilisez l'un de ces logiciels et outils gratuits, fortes chances que vous soyez endetté, en particulier avec les plugins, que j'ai mentionnés dans un des vidéos précédentes, qu'ils vont juste s' ennuyer avec ce projet. Ils vont le tuer et disparaître. Donc, plus tard, par exemple, votre client vous appelle, vous avez travaillé sur un site Web et vous utilisez icônes provenant de ce plug-in en particulier, par exemple, mais ce plugin n'existe plus, donc vous Impossible de trouver les icônes que vous avez utilisées dans le projet à ce moment-là. Vous ne trouvez plus ces icônes. Alors, que peux-tu faire ? En gros, tu es bloqué. Vous devez trouver d'autres icônes qui ne sont pas identiques à ces icônes. À son tour, votre design n' aura pas l'air professionnel, raffiné et cohérent comme vous le faisiez auparavant. Vous devez donc trouver d'autres moyens de faire en sorte que ce projet fonctionne. C'est pourquoi j'aime bien et quels sont les deux éléments, car comme indiqué ici , vous pouvez toujours revenir en arrière, télécharger, consulter vos projets précédents et vous pouvez toujours téléchargez davantage ces icônes. Encore une fois, si votre client souhaite que vous travailliez sur les prochaines pages, les futurs écrans de son application mobile, sa future présentation, diapositives, tout ce sur quoi vous travaillerez à l'avenir, par exemple son lancement tout juste. Vous pouvez toujours revenir à Envato Elements, toujours revenir à cette catégorie en particulier, au projet sur lequel vous travaillez, prendre ces icônes et continuer dans le même style, utilisant avec les mêmes icônes, en utilisant le même service, en utilisant la même licence qu'auparavant, continuez simplement à travailler sur ce projet. Comme je l'ai dit, c'est ce que j' aime vraiment dans ces services haut de gamme. Et avec les services gratuits, vous n'y arriverez pas. La mise en garde ici concerne les icônes matérielles, vous comprenez. Donc, comme ce sont des icônes open source gratuites, vous pouvez les utiliser à tout moment. Mais nous savons tous comment Google gère ses produits. Personne ne vous garantit donc qu'ils ne vont pas simplement tuer les icônes de Material Design à un moment donné. Alors, que pouvez-vous faire à ce moment-là ? Encore une fois, je n' utilise pas cette vidéo et ce cours pour vous obliger à acheter quoi que ce soit. Cela dépend entièrement de vous. Tu peux faire ce que tu veux de ta carrière. Je ne te donne pas vraiment mon opinion. Je vous explique simplement comment vos créations ont été regardées et regardées par quelqu'un qui fait cela depuis près de deux décennies. J'ai embauché et licencié de nombreux designers au ma carrière pour les deux entreprises et pour ma propre entreprise. Et je peux vraiment savoir très facilement si quelqu'un utilisait des ressources gratuites, en particulier avec des icônes, mais aussi avec des polices, des images ou s'il utilisait des ressources premium. Et vous pouvez vraiment faire la différence entre les designs raffinés et amateurs. Alors gardez cela à l'esprit. Encore une fois, je ne vous presse pas d'acheter quoi que ce soit. Tu peux faire ce que tu veux de ta carrière, de ta vie. Donc, encore une fois, aucune pression pour moi. Je dis simplement que cela aura l'air beaucoup plus professionnel et raffiné si vous utilisez des ressources premium plutôt que gratuites. 83. Conseils pour les meilleurs résultats: Dans cette vidéo, je vais vous donner quelques conseils pour obtenir les meilleurs résultats à mon avis. Et ils vont vraiment vous différencier de vos concurrents, des autres designers. Et cela va vraiment différencier vos designs des autres designers non professionnels. Donc, tout d'abord, je lis ici un extrait de la liste. C'est beaucoup plus simple pour moi. Utilisez des icônes uniques. Ces icônes uniques sont celles que j'ai mentionnées ici sur Envato Elements. Je ne vais donc pas y revenir une fois de plus, mais utiliser des icônes uniques, car cela vous différenciera en tant que designer et votre design permettra à votre client de se démarquer de la concurrence. Et ça va vraiment t'aider à raconter une meilleure histoire. Parce que lorsque vous utilisez des icônes uniques, cela aidera vraiment la marque de vos clients à se démarquer car cela associera ces icônes à cette marque beaucoup plus clairement. Et cela lui permettra de se démarquer beaucoup plus clairement de la foule. Le deuxième est de s'assurer que cela a du sens. Donc, chaque fois que vous utilisez ces icônes, assurez-vous qu'elles ont du sens. Ne vous contentez donc pas de placer des icônes sur une page au hasard, à un endroit quelconque la page, en vous attendant simplement à ce que vos utilisateurs les comprennent et voient ce que vous voyez en tant que designer, personne n'est designer , mais toi. Assurez-vous de savoir, cela permet de comprendre que votre client n'est pas un designer. Sinon, ils ne vous embaucheront pas pour être designer. Assurez-vous donc de bien comprendre où vous placez ces icônes. Assurez-vous que cela a du sens. Veillez à ne pas les submerger. Assurez-vous de placer ces icônes à des endroits où cela a du sens. Rappelez-vous donc une fois les icônes sont là pour faciliter le texte. Il ne faut donc pas utiliser trop de textes, mais plutôt utiliser une icône. Ou s'il n'y a pas assez d' espace pour une image, vous pouvez peut-être utiliser une icône. Si vous utilisez des ensembles d'icônes, si vous utilisez des rangées d'icônes, assurez-vous que cela a du sens, surtout si vous racontez le processus ou une histoire. Dans ces cas, assurez-vous d'utiliser des icônes, mais encore une fois, assurez-vous de les utiliser lorsque cela a du sens. La prochaine étape est d'être cohérent. Nous en avons donc parlé dans ce cours. Si vous utilisez une icône provenant d' une bibliothèque ou d'une bibliothèque, assurez-vous qu'elle est cohérente. Donc, s'il s'agit d'un contour, assurez-vous que toutes vos icônes sont surlignées. S'il est rempli, assurez-vous que c'est le style que vous recherchez. Si vous utilisez des icônes colorées comme celles que je vous ai montrées dans Adobe XD dans ce cas précis, veillez à utiliser des couleurs qui correspondent bien à cette marque en particulier. Ne vous éloignez pas trop de ces couleurs. Le rouge et le vert conviennent dans certains cas, en particulier pour les alertes, pour le danger, pour un travail bien fait pour une exécution correcte, etc. Vous pouvez donc utiliser une couleur rouge et verte , peut-être une couleur bleue si c'est la couleur correspondante. Et je prévois de créer une classe de couleurs plus tard cette année. Alors n'oubliez pas de revenir et de voir ça. Mais dans le cas des icônes, assurez-vous de rester sur la marque pour voir où vous pouvez utiliser certaines couleurs dans vos icônes. Soyez modéré, alors n'en faites pas trop. Vous pouvez utiliser des icônes à certains endroits, mais ne devenez pas fou et utilisez-les partout. Parce que les clients vont tout simplement être confus. De plus, lorsque vous faites preuve de modération expliquez vos icônes si nécessaire. Donc, si nous vous ramenons à Adobe XD, laissez-moi vous ramener ici. Donc, ce que nous avons ici, c'est cette barre d'onglets qui ne contient aucun texte en dessous, mais je peux facilement ajouter le texte de ces icônes, par exemple ici où il est écrit Peut-être, il est dit, disons profil, peut-être cela peut être la France, c'est le Tchad, ce décor. Utilisez donc les textes, les explications, mais cela a du sens et soyez modéré. Comme vous pouvez le voir, je n'ai que quatre icônes ici. Je n'ai donc pas 60 icônes différentes. Je n'ai pas deux rangées d'icônes. J'en ai quatre parce que c'est vraiment suffisant. Et je n'ai pas besoin d'en utiliser plus que ça. Je n'ai pas besoin d'en utiliser moins que ça. C'est très bien. Enfin, un dernier conseil est de vous amuser, car le processus de conception vise à aider à résoudre les problèmes de vos clients, mais aussi à vous amuser en tant que designer. Donc, si vous explorez ces nouvelles icônes que vous venez de découvrir, vous êtes peut-être très enthousiaste à l'idée de les intégrer dans les projets de vos clients. Assurez-vous de vous amuser le plus possible, car cela vous permettra d'être plus créatif, d'évoluer davantage dans le design lui-même, essayer de nouvelles idées, essayer des solutions possibles que vous enseignés, par exemple ne sont pas possibles il y a quelques instants. Il s'agit de s'amuser. Il s'agit de s'amuser. Assurez-vous donc d'utiliser ces icônes pour vous amuser le plus possible et pour essayer de représenter ce fonds que vous n'avez pas sur la convivialité du design lui-même. Donc, si vous créez un processus, par exemple , assurez-vous d' utiliser ces icônes de manière créative, mais n'en faites pas trop. Soyez modéré. Assurez-vous de suivre ces conseils, que j'ai mentionnés dans cette vidéo. Assurez-vous de rester constant. Veillez à utiliser le même style d'icône. Veillez à utiliser le même pack d'icônes autant que possible et à vous amuser. En gros, ce sont tous les conseils pour cette vidéo. Et encore une fois, faites bon sens lorsque vous utilisez ces icônes. N'en faites pas trop. Assurez-vous simplement d'utiliser le même style, d' être modéré et de vous amuser. 84. AFFECTATION de l'article 10: Votre mission pour cette section est simplement de choisir une équipe au hasard. Vous pouvez choisir une équipe, par exemple des voitures de luxe. Ensuite, vous pouvez essayer de trouver les différentes icônes qui conviendront à cette équipe. Choisissez peut-être huit ou dix icônes différentes et essayez de les associer. Essayez d'utiliser le même style. Essayez d'utiliser la même épaisseur de ligne, par exemple un rayon de bordure, ou des couleurs d'arrière-plan différentes, quel que soit le type de style d'icône que vous allez réellement utiliser , essayez d'utiliser exactement les mêmes tailles et essayez pour avoir un rythme cohérent avec vos icônes, par exemple si celle-ci a un fond noir, assurez-vous qu'elles ont toutes un fond noir. Ou si l' épaisseur de la ligne est distincte, assurez-vous qu'elles ont toutes la même épaisseur de plaisir. Assurez-vous de les organiser et de voir à quoi ils ressemblent et s' intégreraient-ils bien aux projets réels ? Essayez donc de vous entraîner de cette façon. Ainsi, lorsque vous commencerez un vrai projet, il vous sera beaucoup plus facile de comprendre quel type de pratique vous devez utiliser et où trouvons-nous réellement les icônes. qui fonctionnent pour vous ? 85. Sélection de couleurs: Choisir les bonnes couleurs peut être très difficile pour certains designers, car vous ne voulez pas que vos designs soient trop ennuyeux, mais vous ne voulez pas non plus qu'ils soient trop ludiques. Il est important de choisir les couleurs en fonction de votre projet, de l'équipe qui s' occupe de votre projet, s' occupe de votre projet, du rythme de votre projet, de ce que votre projet essaie de faire transmettre aux utilisateurs et bien plus encore. C'est donc ce dont nous allons parler dans cette section. Comment choisir les couleurs qui conviennent à votre projet particulier. 86. Pourquoi la couleur est importante: Outre la typographie, le rythme, les grilles et bon nombre de ces autres éléments, la couleur est l'un des éléments les plus importants de chaque design. Sans couleur, les utilisateurs ne sauront pas où aller. Ils ne sauront pas quoi faire et ne pourront pas distinguer les éléments les uns des autres car tous les éléments se ressembleraient en noir et blanc. Dans cette vidéo, expliquons pourquoi la couleur est importante et à quoi devez-vous penser lorsque vous choisissez couleurs pour vos projets de conception d'interface utilisateur UX. Il donne le ton de votre projet. Donc, si vous vous adressez à vos spectateurs d'une manière plus professionnelle, vous allez utiliser des couleurs différentes que si vous parlez d'une manière ludique et amicale. Il faut toujours y penser. Assurez-vous de parler à vos clients, bien les comprendre, de comprendre leur secteur d'activité, comprendre le créneau et, par conséquent, lorsque vous choisissez des couleurs pour ce client en particulier, veille à donner le ton. Si le ton est professionnel, utilisez la pierre professionnelle, mais assurez-vous de suivre ce ton tout au long de votre conception. C'est donc agréable et cohérent. Ainsi, vos utilisateurs savent toujours quel est le ton de votre design, où qu'ils se trouvent dans votre design, cela détermine le mode spectateurs. Ce que je veux dire par là, c'est que si les couleurs sont trop sombres, les spectateurs seront d'une certaine humeur. Si les couleurs sont trop claires, elles seront dans un mode différent. Si les couleurs sont trop vives, elles le seront peut-être sur leurs yeux. Ils seront d'humeur différente. Assurez-vous donc de faire attention à tout cela et de comprendre quelle est l'ambiance que vous souhaitez créer pour vos spectateurs. Encore une fois, est-ce le joueur ? Est-ce le business ? Est-ce l'apprentissage ? Est-ce le mode de mise au point ? À partir de tous ces différents indicateurs, vous devez en apprendre davantage sur leur humeur. Donc, lorsque vous choisissez une couleur, vous devez tenir compte de cette ambiance. Donc, par exemple, si nous voulons qu'ils soient calmes et détendus, je vais utiliser des couleurs naturelles, par exemple blanc, le vert et le marron, etc. Si je veux les garder en forme, si je veux que leur énergie augmente et qu'elle reste élevée, je devrais peut-être utiliser des couleurs vives comme le rouge, le bleu foncé, le vert, etc. Veillez donc à faire attention à l'humeur de vos spectateurs car elle est extrêmement importante dans tout design. Il met l'accent sur les actions. Ainsi, par exemple, si vous voulez qu'ils cliquent sur un bouton, vous devez choisir la couleur de vous devez choisir la couleur de ce bouton pour qu'il apparaisse, car vous voulez qu'ils regardent ce bouton et agissent, donc qu'ils cliquent dessus. Ou si vous souhaitez qu'ils soumettent un formulaire, si nous voulons qu'ils laissent votre adresse e-mail, vous utiliserez de la couleur pour mettre en valeur les zones sur lesquelles vous souhaitez qu'ils cliquent ou qu'ils agissent. Et bien sûr, en fonction des mesures que vous souhaitez qu'ils prennent, du secteur d'activité de votre client, vous allez choisir différentes couleurs et différentes nuances de ces couleurs, il suffit de guider le regard de vos spectateurs vers l'action particulière que vous souhaitez qu'ils entreprennent. Cela contribue à la lisibilité. C'est extrêmement important, car vue est vraiment altérée depuis près de deux décennies, car nous avons tous ces appareils équipés d' écrans et la majorité des personnes ont des problèmes avec leur vue. Ainsi, lorsque vous planifiez, en particulier pour les paragraphes, en particulier pour les textes, veillez à utiliser des couleurs qui ne seront pas altérées pour les yeux de votre spectateur. Ce que je veux dire par là, c'est qu'ils ne sont pas trop forts, mais aussi qu'ils ne sont pas trop faibles parce que si leur vue est faible, ils ne le feront pas, ils ne seront pas capables de le lire. Les couleurs sont trop faibles et inversement, il faut donc trouver un juste milieu. Par conséquent, votre lisibilité sera bien meilleure et votre taux de rebond beaucoup faible, car ils resteront sur la page beaucoup plus longtemps et liront le texte et les informations que vous indiquez sur votre design. Enfin, il guide les yeux de l'utilisateur. Ce que je veux dire par là, c'est que si vous voulez qu'elles soient orientées de gauche à droite, vous pouvez positionner stratégiquement vos couleurs dans cette direction afin les guider dans votre design. Vous pouvez organiser l' expérience du spectateur comme vous le souhaitez. Et puis, lorsqu'ils regardent de gauche à droite, ils peuvent rechercher par exemple couleurs plus vives ou des couleurs plus foncées ou quelque chose comme ça. Vous êtes responsable de leur expérience utilisateur. Par conséquent, convertissez l' expérience utilisateur en une meilleure expérience en utilisant des couleurs et en les naviguant dans votre design à l'aide de couleurs. Il existe de nombreuses théories et techniques différentes choisir les couleurs qui sont importantes pour votre design. Ce ne sont donc que quelques-uns qui, au fil des ans, fonctionnaient mieux pour moi et pour mes clients. Assurez-vous donc de naviguer sur Internet pour obtenir des conseils et astuces supplémentaires des informations utiles pour comprendre lorsque vous concevez et garder toutes ces choses à l'esprit. Et juste pour créer la meilleure expérience utilisateur possible pour vos utilisateurs en utilisant la couleur. Dans la prochaine leçon, nous allons parler des couleurs qui existent. Alors je t'y verrai. 87. Quelles couleurs existent: Il existe de nombreuses couleurs différentes, mais lorsque vous choisissez des couleurs pour la conception de votre interface utilisateur UX, vous devez essentiellement penser à trois couleurs, couleur principale, couleurs secondaires et la couleur tertiaire. La couleur principale est la couleur qui est la couleur générale de votre design. La couleur secondaire est utilisée, par exemple pour les boutons ou pour les textes, les liens, les hyperliens, etc. Et la couleur tertiaire est essentiellement la couleur d'accent. Or, ce n'est pas le cas pour tous les projets. Parfois, vous devez simplement choisir deux couleurs, par exemple, et nous en reparlerons un peu plus tard dans ce cours. Mais la chose importante à noter en tant que concepteur d'interface utilisateur utilisateur est que vous n'utiliserez pas la couleur CMJN dans la majorité des cas. Cela signifie cyan, magenta, jaune et clé. La raison en est que les couleurs sont majoritairement utilisées pour la conception graphique et pour les travaux d'impression. Comme nous travaillons à l'écran, nous n'allons pas utiliser ces couleurs car elles ne correspondent pas bien aux couleurs que vous allez utiliser à l'écran. Dans la majorité des cas, vos projets de conception UX d'interface utilisateur utilisent des codes hexadécimaux et des couleurs RGB. Les codes hexadécimaux sont l'abréviation de hexadécimal. Et en gros, cela signifie qu'en 16e, ne vous embêtez pas trop à ce sujet. Il s'agit simplement du nombre de pixels à l'intérieur de la couleur, mais n'oubliez pas que couleurs hexadécimales ont tous ces codes différents. Vous allez utiliser ce code hexadécimal dans la majorité des cas. Et dans certains cas, vous utiliserez également la couleur RGB. RGB signifie rouge, vert et bleu. Et il existe également d'autres couleurs, comme le HSL, qui sert à la teinte, à la saturation et à la luminosité. Mais selon les développeurs, selon le projet, si le client possède déjà ses combinaisons de couleurs et les couleurs sont déjà créées pour lui, vous allez utiliser ses couleurs et des couleurs dans ce code couleur particulier, qu'ils ont mentionné dans leur théorie. Donc, en gros, dans cette vidéo, je vais juste vous montrer comment tout cela fonctionne et comment trouver ces couleurs. Nous voici sur les sites Web d'Apple et la plupart d'entre vous connaissent Apple. En gros, ils créent ces appareils et gadgets technologiques, et ils ont également leur système d'exploitation pour leurs appareils mobiles et leurs appareils de bureau. Tout cela n'a pas d'importance. Ce qui compte, c'est que vous pouvez cliquer avec le bouton droit de la souris dans votre navigateur et installer ce plugin appelé Color Pick, surtout si vous êtes un utilisateur de Google Chrome, comme moi. Lorsque vous cliquez dessus, vous verrez toutes ces différentes couleurs qui sont utilisées sur cette page en particulier. Maintenant, ce ne sont pas toutes les couleurs de la marque. Il ne va pas tirer des couleurs de chaque page de ce site Web en particulier. Mais si vous regardez ici, vous pouvez voir toutes ces couleurs. Vous pouvez donc voir cette couleur rose-violet. Par exemple , cette montre et les textes qui l'entourent, vous pouvez voir cette couleur bleue. C'est peut-être celui-ci. Et si je fais défiler la page vers le bas, peut-être trouverons-nous cette couleur. C'est ici. Et si nous faisons défiler davantage, vous pouvez voir que cette couleur foncée pour le texte est par exemple celle-ci et celle-ci. Nous pouvons donc facilement comprendre quelle est la couleur utilisée par la marque sur cette page en particulier ? Encore une fois, je mentionne cette page en particulier parce que si je passe à la page Mac, par exemple ici, ils utilisent des couleurs complètement différentes. Revenons donc à la page d'accueil et revenons ici. Encore une fois, call it big est totalement gratuit. Je vais le lier dans un PDF et vous pourrez y accéder. vous suffit de l' installer dans votre navigateur. Et la raison pour laquelle c'est important, c'est que vous pouvez simplement échantillonner les couleurs comme je vous l'ai montrée. Il suffit donc de cliquer avec le bouton droit sur la couleur de choisir parmi les styles de page. Il va prendre ces couleurs de cette page en particulier , puis vous montrer toutes ces couleurs ici. Ce que vous pouvez voir, ce sont les valeurs RGB pour chaque couleur particulière. Vous pouvez supprimer cette couleur si vous le souhaitez et si vous ne voulez pas la voir ici. Ensuite, si je clique sur cette horloge ici, vous pouvez voir que nous avons des couleurs hexagonales. Donc, si je passe en hexadécimal, vous pouvez voir comment cela fonctionne. Donc, si je passe du RGB au format hexadécimal, vous pouvez clairement voir la différence. Maintenant, les couleurs hexadécimales sont ces couleurs, et c'est le code couleur. Je vais le montrer un peu plus tard dans Adobe XD. Maintenant, chaque outil possède ces codes hexadécimaux. Donc, si vous utilisez Photoshop, XD, Sketch, Figma, peu importe. Ils en ont tous, et ils ont généralement du RGB et certains d' entre eux ont également du HSL. Si vous passez au HSL, c' est-à-dire à la saturation des teintes et à la luminosité, vous pouvez voir à quoi cela ressemble. Donc, en gros, vous pouvez le copier, en particulier avec des codes hexadécimaux. Sélectionnez donc cette copie avec le bouton droit de la souris ou contrôlez C, contrôle V, et collez-la dans l'outil favori de votre choix. Et puis vous pouvez avoir cette couleur et travailler à partir de cette couleur. Cela est particulièrement important si vous travaillez avec des clients dont le site Web est déjà terminé. S'ils ont terminé leurs applications ou quelque chose comme ça, et qu'ils ne savent pas quelles couleurs ils utilisent, vous pouvez simplement extraire le site Web comme je devrais juste vous le montrer, cliquez avec le bouton droit sur la couleur, choisissez la couleur parmi styles de page et vous pourrez ensuite simplement comprendre quelles couleurs ils ont utilisées dans leur conception. C'est important car s'ils souhaitent modifier leur palette de couleurs, par exemple plus bas. Ou si vous avez besoin d' une couleur spécifique, vous pouvez utiliser cette approche, copier cette couleur en particulier, puis l'utiliser dans votre conception. L'autre façon de procéder est de faire une capture d'écran de leur conception précédente. Faites-le glisser dans l' outil de votre choix, dans mon cas, Adobe XD, puis échantillonnez simplement cette couleur à partir de votre design. Ce ne sera pas une bonne approche car vous allez perdre quelques pixels lorsque vous ferez ces captures d'écran. Par conséquent, ces couleurs seront légèrement différentes de que vous utiliseriez si vous utilisiez cette approche car cela dépend du style de page. Donc, si je le reprends une dernière fois, ici, si je clique avec le bouton droit sur la page et que je vais sur Inspecter, vous pouvez voir que si nous parcourons le code, si nous allons ici, vous pouvez voir 1d1df. Passons donc ici, un d1, d1. Vous pouvez donc voir tout de suite que cela provient du style de page, donc il extrait les couleurs directement du code. n'y a donc pas de place l' erreur car cela provient directement du code. Vous pensez peut-être, oui, mais qu'en est-il de ces images ? Prenons donc cette image, par exemple, cliquez avec le bouton droit sur Inspecter. Nous y sommes et nous avons cette couleur. Donc, si je clique dessus, vous pouvez le voir ici. Vous vous demandez peut-être et si mon client n'a aucun site Web existant sur lequel vous allez créer la palette de couleurs en fonction ce dont nous avons parlé précédemment, fonction de ce que nous allons parler à propos des prochaines leçons de ce cours. Ils proviennent principalement du secteur de niche dans lequel ils évoluent, par exemple s'ils travaillent dans le secteur bancaire, s'ils travaillent dans le secteur informatique, les chances dépendent du public cible, du site Web ou du mobile l'application va parler à. y a de fortes chances qu'ils choisissent des couleurs spécifiques dans ces cas. Assurez-vous d'explorer la concurrence, voir ce qu'elle fait et de créer vos couleurs fonction des besoins de votre client, en fonction de la concurrence, en fonction du mode de visualisation dans lequel vous souhaitez les placer. Je veux donc qu'ils achètent quelque chose. Voulez-vous qu'ils apprécient le contenu et qu'ils y restent plus longtemps ? Je veux être sérieux, tu veux être joueur. À partir de toutes ces choses, vous allez déterminer la couleur que vous allez choisir dans votre design. Enfin, comme je l'ai dit, assurez-vous d'utiliser le choix des couleurs car c'est très simple. Il suffit de cliquer avec le bouton droit de la souris sur n'importe quelle page pour afficher toutes ces couleurs. Et en gros, vous pouvez sélectionner cette couleur, appuyer sur la copier et la coller dans votre design. Dans la prochaine vidéo de ce cours, nous allons parler des combinaisons de couleurs et expliquer pourquoi elles sont importantes, quelles combinaisons de couleurs existent et comment sélectionner, euh, laquelle est la bonne pour toi. Alors je t'y verrai. 88. Les combinaisons de couleurs: Il existe de nombreuses manières de combiner les couleurs pour vos projets de conception UI UX. Mais dans ce cours et dans cette leçon, je vais parler de seulement quatre d'entre eux sont les quatre principaux et les quatre qui sont les plus utilisés dans la conception, plus une autre, qui est en quelque sorte un bonus sur cette leçon, ceux pour notre cours monochromatique, analogue, complémentaire et triadique. Explorons donc tous ces éléments et voyons ce qu'ils sont. La palette de couleurs monochromes est ce que son nom suggère. Vous allez simplement prendre une couleur et choisir différentes feuilles de cette couleur particulière. Ainsi, par exemple, vous choisissez la couleur bleue, qui est très foncée, puis vous allez choisir différentes nuances de cette couleur bleue pour mieux correspondre à cette couleur bleu foncé principale. Par conséquent, vous allez utiliser ces tons plus clairs, par exemple pour vos boutons ou inversement, vous pouvez utiliser les tons plus clairs pour le texte ou les tons plus foncés pour les boutons du des liens et des trucs comme ça. Les couleurs analogues sont des couleurs qui se trouvent l'une à côté de l'autre sur la roue chromatique Vous allez choisir trois couleurs très proches les unes des autres. Ainsi, lorsque vous prenez une roue chromatique , vous pouvez choisir différentes nuances de ces couleurs qui se trouvent juste à côté. Ce que cela va vous permettre de faire c'est que votre design sera beaucoup plus cohérent car il aura l' air d'appartenir l'un à l'autre. Vos éléments seront de couleurs similaires, d'une importance similaire à ces couleurs car vous n' allez pas choisir différentes nuances de vos couleurs, juste les couleurs suivantes les uns aux autres sur la roue chromatique. Des couleurs complémentaires, c'est ce que son nom suggère. Vous allez prendre deux couleurs qui se trouvent sur l' échelle complètement opposée de la roue chromatique. Ensuite, vous allez les combiner. Vous pouvez choisir votre couleur principale dans cette roue chromatique. Ensuite, à partir de votre couleur principale, vous pouvez positionner votre roue chromatique de cette manière pour trouver votre couleur complémentaire sur le côté opposé de la roue chromatique. Vous pouvez utiliser différentes nuances de ces couleurs, donc des couleurs méchantes et complémentaires. Mais je vous suggère toujours choisir votre couleur principale et c'est la chose la plus simple à faire si votre client possède déjà quelque chose comme un logo ou une carte de visite, ou la couleur qu'il aime. Ensuite, vous pouvez simplement mettre cette couleur dans votre couleur. Nous choisirons la couleur complémentaire et, par conséquent, vous pourrez choisir différentes nuances de ces couleurs. Et vous pouvez savoir quelle couleur est la couleur complémentaire de cette couleur. Et enfin, nous avons des couleurs triadiques. Désormais, les couleurs triadiques ne sont en fait que trois couleurs régulièrement espacées dans votre roue chromatique. Vous pouvez donc simplement l' imaginer comme un triangle, et vous pouvez faire pivoter ce triangle pour choisir la couleur principale et couleurs complémentaires qui se trouvent du côté opposé pour former un triangle, vous pouvez choisissez votre couleur principale, et vous pouvez donc sélectionner les deux autres couleurs qui se trouvent sur les côtés pairs de ce triangle. Et l' approche des bonus est 603010. Maintenant, cette approche nécessite trois couleurs différentes que vous pouvez choisir comme vous le souhaitez, mais assurez-vous de choisir votre couleur principale, qui représentera 60 % de votre design. 60 % est la quantité que vous allez utiliser pour votre couleur principale, 30 % est votre couleur secondaire ou complémentaire, puis ces dix pour cent sont votre couleur d'accent. Il s' agit d'une approche couramment utilisée dans l'interface utilisateur, UX design et InDesign en général. Donc, en gros, vous pouvez utiliser l'une de ces méthodes qui viennent d'être mentionnées pour sélectionner les trois couleurs que vous souhaitez. Et vous pouvez utiliser le triadique si vous le souhaitez, juste pour voir à quoi ressembleront ces trois couleurs sur le rectangle . Mais assurez-vous de former ces couleurs de manière à ne pas se submerger. Si votre couleur principale est de 60 %, veillez simplement à utiliser cette couleur pour 60 % de votre dessin, puis 30 %, puis 10  % , soit 100  % de vos couleurs. N'utilisez aucune autre couleur. Assurez-vous simplement que vous utilisez cette approche dans cette méthode pour n'utiliser que ces trois couleurs. Ce ne sont donc que quelques-unes des principales combinaisons de couleurs. Comme je l'ai mentionné, il existe de nombreuses autres combinaisons de couleurs différentes, mais j'ai découvert que ces quatre me convenaient le mieux au fil des ans. Et j'ai découvert que la majorité des designers de l'industrie l'utilisent. Dans la vidéo suivante, je vais vous montrer quelques outils qui vous aideront à sélectionner ces couleurs. Alors je t'y verrai. 89. Outils de sélection des couleurs: Dans cette vidéo, je vais vous montrer quelques outils de sélection de couleurs que j'ai ces dernières années. Et j'ai découvert que la majorité d'entre eux, en particulier Adobe One, sont utilisés par la majorité des designers. Parce qu'une fois que vous aurez appris à connaître l'outil, une fois que vous en aurez connu deux, vous allez vous retrouver coincé avec lui et vous allez l'utiliser à nouveau, car s'il n' est pas cassé, ne le réparez pas. Comme je l'ai dit dans cette vidéo, je vais vous donner quelques exemples. Si vous n'aimez aucun d'entre eux, vous pouvez simplement naviguer sur Internet pour trouver celui qui vous convient le mieux. Voici donc le premier qui s'appelle Peloton. Et comme vous pouvez le voir sur le design du site Web, il est vraiment assez ancien. Maintenant, à quoi ressemble tout cela, vous pouvez cliquer ici pour sélectionner la couleur monochromatique unique, comme nous venons de parler, couleurs adjacentes ou trois couleurs, vous pouvez voir des couleurs triadiques. Donc triade de trois couleurs, tétrades, donc pour les couleurs. Et enfin, utilisez quatre couleurs librement, et vous pouvez sélectionner deux couleurs, trois couleurs comme vous le souhaitez. Donc, comme je l'ai mentionné dans la vidéo précédente, en fonction de ce que vous voulez créer ici, vous allez sélectionner les couleurs monochromes, par exemple ou adjacentes, qui sont des couleurs complémentaires ou quelque chose comme ça comme ça. Optons donc pour la triade dans ce cas. Vous pouvez donc voir que lorsque je commence à le faire pivoter, vous pouvez voir les couleurs. Disons donc que c' est ma couleur principale. Et vous pouvez voir qu' ils sont régulièrement espacés dans ce triangle et qu'il me montre toutes les feuilles de ma couleur principale. Et vous pouvez maintenir la touche Shift pour déplacer les stores individuellement. Donc, si je le tiens et si je sélectionne cette forme, par exemple si je sélectionne celle-ci, vous pouvez voir que nous obtenons couleurs complètement différentes ici. Donc, si je la fais pivoter jusqu'ici, vous pouvez voir que nous avons maintenant cette palette parfaitement assortie. Maintenant, vous pouvez accéder aux préréglages et choisir différents préréglages pour cette couleur triadique, qui est très utile si vous n'avez pas assez de temps. Et parmi les couleurs que vous avez choisies, il vous montre ces préréglages. Donc, si nous revenons aux couleurs, si vous les faites pivoter jusqu'ici, par exemple revenant aux préréglages, vous pouvez voir qu'elles sont maintenant complètement différentes. Vous pouvez donc choisir ces couleurs, vous pouvez en faire ce que vous voulez. Et si nous me cachons d'ici, vous pouvez voir les tables s'exporter. Si je clique juste là, vous pouvez voir que vous pouvez les exporter au format HTML, CSS, Less sass, ACML, et sous forme de texte, vous pouvez exporter des échantillons de couleurs et exporter ces combinaisons de couleurs pour celles que nous créé, ce qui, à mon avis, est très important et très utile car cet outil est gratuit. Et d'ailleurs, je vais relier tous ces outils mentionnés dans cette vidéo à l'intérieur du PDF. Assurez-vous donc de l'ouvrir, cliquer sur ces liens si vous souhaitez accéder à ces sites Web et à toutes les ressources et conseils mentionnés tout au long de ce cours. Donc, en gros, c'est le Palatin pour vous. Vous pouvez randomiser, réinitialiser, revenir aux couleurs d'origine. Donc, ici, et comme je l'ai dit, vous pouvez choisir n'importe lequel, quel style vous voulez. Ensuite, nous avons Color Hunt. Vous pouvez donc le voir encore une fois, nous avons maintenant des sélections différentes ici car elles sont présélectionnées. Vous pouvez donc sélectionner au hasard, il n'affichera que des couleurs aléatoires. Vous pouvez choisir le mois le plus populaire, l'année , l' ancien temps, ou vous pouvez choisir celui-ci. Donc, si je choisis des couleurs pastel, si ce sont les couleurs que vous recherchez pour votre projet en particulier, vous avez du rétro, vintage, clair, foncé, surtout foncé, c'est important et populaire de nos jours et une époque où nous avons mode sombre pour la conception de l'interface utilisateur UX. Donc, si vous concevez pour le mode sombre, assurez-vous de vérifier cela. Ensuite, vous pouvez voir les tons de peau, est particulièrement important pour les marques de beauté. Par exemple, qui est particulièrement important pour les marques de beauté. Par exemple, une fois de plus, pour en revenir à l'humeur de vos spectateurs, nous revenons à ce créneau. Nous allons en revenir à ce client. Ainsi, lorsque vous collectez tous ces points, lorsque vous les reliez, vous allez comprendre de quel type de couleurs et de combinaisons de couleurs vous avez vraiment besoin pour votre projet en particulier ? Donc, si nous faisons défiler l'écran jusqu'en bas, vous pouvez voir que nous n'en avons pas. Donc, si nous revenons ici, nous n'avons pas de triade monochromatique de couleurs adjacentes, mais nous les avons. Ce sont donc les modes, les projets, par exemple les secteurs dans lesquels évolue votre client. Passons donc à l'obscurité, par exemple et vous pourrez tout voir. Tu peux les aimer si tu veux. Vous pouvez voir qu'il a été posté il y a 13 heures. Choisissons celui-ci. Et si je passe la souris, vous pouvez voir que j'ai le code hexadécimal juste là. Pour chacune de ces couleurs. Vous pouvez aimer cette palette. Vous pouvez le télécharger sous forme d'image. Et vous avez toutes ces couleurs ici sous forme de codes hexadécimaux et de RGB C'est ce que j'ai mentionné précédemment La majorité des concepteurs d'interface utilisateur utilisent des codes hexadécimaux et, dans certains cas, RGB les couleurs car elles sont faciles à intégrer dans le code pour vos développeurs. C'est pourquoi ils les utilisent. Et aussi parfois des couleurs HSL car elles peuvent utiliser des pourcentages. Assurez-vous donc de parler à vos développeurs. Si vous commencez tout juste avec ces couleurs, assurez-vous de leur parler. Le code hexadécimal leur convient-il, ou le RGB ou le HSL, selon ces valeurs et ces informations que vous allez obtenir de vos développeurs, vous allez choisir vos couleurs pour ce projet en particulier. Donc, encore une fois, vous avez palette foncée plus adulte ici. Et si vous pensez que cette couleur ne fonctionne pas, vous pouvez par exemple choisir des couleurs vertes pour pouvoir jouer avec ces couleurs. Ensuite, nous avons colors.com, vous pouvez donc commencer à le générer. Encore une fois, je vais relier tous ces sites Web dans un PDF. Et ce que nous avons ici, c'est ce savon. Nous avons toutes ces couleurs différentes que vous pouvez explorer, voir, ajuster. Vous pouvez voir à quoi cela ressemble pour le daltonisme. Vous pouvez donc tous les choisir. Et si on le ferme. Vous pouvez créer un collage et créer une palette à partir d'une photo. Donc, si votre client vous envoie ce logo ou la couleur qu'il aime, vous pouvez télécharger cette photo ici. Il va générer la palette de couleurs à partir de cette couleur particulière. Maintenant, vous pouvez voir que vous obtenez les noms ici, ce qui est génial si vous souhaitez utiliser ces noms plus tard dans votre design comme jetons, par exemple lorsque vous définissez vos couleurs pour vos développeurs. Ensuite, ils comprendront facilement la couleur que vous avez mentionnée, car ils pourront la mettre dans le code. Ainsi, par exemple , ce loup des bois, Allah, Buster, et cultivé, ils peuvent mettre tous ces mots dans le code, en les connectant à la base de données principale. Par conséquent, la base de données principale va extraire les noms de ces couleurs et les représenter sous forme de site Web ou d'application mobile. Alors, comment travaillez-vous réellement avec cela ? Eh bien, nous avons toutes ces options ici pour que vous puissiez supprimer la couleur, afficher les nuances. Disons que je veux utiliser celui-ci. Maintenant, prends celui-là. Vous pouvez enregistrer la couleur dans vos favoris. Tu peux le faire glisser. Donc positionné ici pour changer l'apparence de votre palette de couleurs. Vous pouvez copier le code hexadécimal et le verrouiller. Vous pouvez donc choisir l'une de ces différentes couleurs. Tu peux les arranger. Donc, si un médaillon, et disons que je veux le positionner ici , reste de cette couleur et il ne changera pas. Comment exportons-nous à partir d'ici ? Tu l'as. Disons que j'aime cette palette de couleurs, mais permettez-moi de vous montrer les angles de vue. Et disons celui-ci, mais je n'en suis pas vraiment sûr. Je peux cliquer ici. Alors juste ici. Choisissez l' hexadécimal ou l'un d'entre eux. Permettez-moi de passer au sélecteur et de sélectionner par exemple cette teinte foncée ici. Je l'aime bien et je peux le fermer. Je peux donc explorer mes couleurs plus loin de cette couleur particulière ou simplement les laisser telles quelles. Enfin, si je souhaite l'exporter, vous pouvez utiliser Control E ou copier l'URL pour l' envoyer aux développeurs. Vous pouvez l'exporter au format PDF, ce qui est excellent comme image. Vous pouvez obtenir les couleurs CSS, ce qui est incroyable pour vos développeurs. De toute évidence. Ase, SVG, qui est également excellent, et vous pouvez obtenir le code si vos développeurs le souhaitent également. Enfin, vous pouvez intégrer le code de ces couleurs particulières si vous souhaitez les enregistrer de cette façon pour vos clients ou développeurs. Ensuite, nous avons Adobe Color, qui est l'un des plus anciens du secteur. Mais à mon avis, c'est peut-être l'une des meilleures, car il est intégré à Adobe XD. Avec les produits Adobe, vous pouvez les ouvrir dans une application Creative Cloud morte si vous êtes utilisateur de Creative Cloud, et vous pouvez donc simplement accéder à ces couleurs et les ouvrir dans le logiciel de votre choix. Vous pouvez créer, vous pouvez explorer, vous avez des tendances et enfin vous avez des bibliothèques. Ainsi, à l'intérieur des bibliothèques, vous pouvez créer votre bibliothèque, puis ouvrir dans Adobe XD, par exemple, vous pouvez simplement copier ces couleurs, les coller dans votre XD. C'est vraiment aussi simple que cela. Si vous êtes utilisateur d'Adobe, il existe également une intégration Photoshop, une intégration Illustrator. Ainsi, quel que soit l'outil de la famille Adobe que vous utilisez, vous bénéficierez de cette intégration. Nous avons donc Extract Team, outils d' accessibilité aux dégradés d'extraction, ce qui est également excellent. Donc, si je clique juste là, vous pouvez voir le rapport de contraste, vous pouvez voir le score, vous pouvez voir. Vous pouvez donc cocher Salt for fail 17 points et moins. Nous devons donc ajuster cette couleur, passer 18 points au-dessus et passer aux icônes et aux graphismes exploitables si vous utilisez ces couleurs. Donc, en gros, ce que nous devons changer, c'est la couleur du texte. Dans ce cas particulier, ce cas d'Adobe. Et ici, sur la gauche vous avez tous ceux que j'ai mentionnés. Donc, actuellement, c'est personnalisé, mais si je passe à l' analogue et que je clique dessus, vous pouvez voir que nous ne pouvons choisir que cette couleur. Si nous optons pour le monochrome, vous pouvez voir à quel point cela ressemble à du triadique. Donc, en gros, trois couleurs. Et vous pouvez voir ce triangle dont nous avons parlé. C'est donc notre couleur principale, sont nos couleurs secondaires et tertiaires. Vous pouvez en avoir gratuitement. Donc, sur les côtés opposés cette roue chromatique, divisez gratuitement. Donc, en gros, cela, et vous pouvez ensuite choisir si vous voulez que cela soit proche ou éloigné. Et tu peux les diviser, les déplacer. Vous pouvez déplacer ces différentes nuances pour obtenir la meilleure palette de couleurs possible. Et double-cliquez sur Split gratuitement. Donc, en gros, la même chose mais deux fois plus de couleur. Vous avez le carré, le composé et les nuances. Donc, en fonction de ce que vous voulez, ce que j'ai mentionné tout au long de ce cours, vous pouvez toujours opter pour la personnalisation et l' ajuster comme vous le souhaitez, par exemple si je choisis la gratuité et si je choisis personnalisé et je veux les ajuster , utilisons celui-ci simplement au hasard. Allons-y avec ça. Vous pouvez également régler ici les tons de cette couleur particulière. Si je sélectionne cette couleur, je peux ajuster les tons pour cette couleur particulière de la manière suivante. Je peux ajuster toutes ces choses. Je peux rapidement copier ce code hexadécimal si je le souhaite. Enfin, vous pouvez l'enregistrer en tant que mon équipe couleur, par exemple, je peux le nommer. Je ne connais pas projets de mon site Web, disons. Et vous pouvez voir les codes que vous allez obtenir sur place. Voici donc les balises dont vous pouvez vérifier l'accessibilité. Encore une fois, juste pour voir si c'est suffisant. L'équipe est protégée contre les daltoniens , ce qui est génial. Vous pouvez donc l'enregistrer si vous le souhaitez. Il apparaîtra dans vos bibliothèques XD ou Photoshop. Enfin, vous pouvez extraire l'équipe. Vous pouvez donc extraire la couleur de l'image et l'enregistrer sous forme de palette de couleurs. Vous pouvez extraire le dégradé. Donc c'est pareil. Encore une fois, les outils d'accessibilité, que nous avons mentionnés précédemment et dont nous avons la roue chromatique, ce qui est génial. Enfin, si vous l'utilisez , assurez-vous de l'enregistrer, il apparaîtra dans l'outil de votre choix. Vous avez également ces jeux colorés. Vous avez changé d'équipe pour pouvoir la choisir. Vous avez exploré, vous pouvez donc explorer différentes combinaisons de couleurs. Qu'est-ce qui est tendance, qu'est-ce qui ne l'est pas ? Donc, si je passe aux tendances, vous pouvez voir ce que cela va m'apporter. Donc, par exemple, cela va me donner un tas d'images tendance. Et vous pouvez voir les couleurs qui sont extraites de ces images particulières. Donc, si vous aimez ces couleurs, vous pouvez les télécharger au format JPEG ou les ajouter à la bibliothèque, qui apparaîtra à nouveau dans votre XD ou Photoshop Illustrator ou tout autre appareil que vous utilisez. Et enfin, le choix de la couleur, que nous avons mentionné précédemment. Encore une fois, c'est génial. Je vais laisser les liens vers tout ce que j'ai mentionné dans le PDF. Mais je vous recommande vraiment d' opter pour la couleur rose car cela vous facilitera la vie. Il s'agit de Spotify, vous avez donc ces couleurs sur Spotify et, bien sûr, vous pouvez vous rendre sur le site Web de votre choix si vous souhaitez choisir les couleurs de ce site Web en particulier. Et ça va vous montrer juste ici, à l'intérieur du bec coloré. On y va. Ce sont les couleurs, ce sont les outils j'espère vraiment que vous les trouverez utiles. Encore une fois, je vais vous donner tous ces liens dans le PDF. Ouvrez le PDF, cliquez sur le lien, vous voulez y accéder et assurez-vous commencer à explorer ces couleurs. N'oubliez pas d'explorer ces outils pour voir lequel vous convient le mieux. Et une fois que vous l'avez trouvé, assurez-vous de l'explorer plus en profondeur, comme vous l'avez vu dans Adobe Color. N'oubliez pas d'explorer les tendances. Assurez-vous de télécharger des images, explorer et de voir et comprendre comment choisir les couleurs de vos projets de la meilleure façon qui vous convient le mieux. Dans la vidéo suivante, je vais vous montrer comment créer des guides de style d' exportation pour les développeurs à partir d'Adobe XD. Alors je t'y verrai. 90. Guides de style: Le guide de style est un élément très important de conception de votre interface utilisateur, car vous y présenterez toutes les couleurs, icônes, images et tous les autres éléments que vous avez utilisés dans vos conceptions UX. Vous allez les montrer à vos clients et surtout à vos développeurs. Parce qu'à partir de ce guide de style, ils peuvent extraire des informations importantes telles que la couleur à utiliser dans votre code. Je vais donc vous montrer un projet que j' ai réalisé précédemment pour l'une de mes masterclasses. Et je vais explorer ce qu' est un guide de style et vous montrer quelques trucs et astuces. Nous voici donc dans Adobe XD, et voici le nouveau projet de site Web de la banque. Et comme je l'ai dit, cela vient de ma masterclass Adobe XD. Je vais le lier dans le PDF. Vous pouvez y jeter un coup d'œil si cela vous intéresse. Et ici, nous sommes partis de l'architecture du site Web, nous sommes passés aux wireframes papier, aux wireframes dans Adobe XD, sites Web et à la conception de tableaux de bord. Et puis j'ai finalement fait un design réactif et un design réactif pour les tableaux de bord. Nous avons également fait une présentation du projet et, enfin, un guide de style. Ainsi, si nous passons des couches à l'option « Ici », qui est « Document Assets », vous pouvez voir toutes les couleurs et tous les codes couleurs utilisés. Donc, en gros, ce sont des jetons colorés. Lorsque vous passez la souris, vous pouvez voir que le blanc uni est un FFF. Si vous passez la souris ici, vous pouvez voir les valeurs RGB d'opacité 100. Si nous zoomons de très près, vous pouvez voir que nous avons un guide de style pour les projets ici. Donc, ce que je vous recommande de faire, c'est lorsque vous créez les guides de style de ces projets, assurez-vous de toujours inclure le code hexadécimal si ce sont ceux que les développeurs exigent ou les codes RGB. Si, encore une fois, ce sont ceux dont les développeurs ont besoin. De plus, ce que vous pouvez voir ici, c'est que nous avons du blanc uni, qui est cette couleur. Et j'ai également inclus le code hexadécimal afin que les développeurs puissent facilement sélectionner ce code hexadécimal s'ils le souhaitent. Et en allant plus loin, vous pouvez voir toutes ces autres couleurs. Ce que vous pouvez faire, c'est leur donner ce fichier XD. Ils peuvent alors simplement le prendre. Donc si je vais ici, je peux copier cette couleur. Alors cliquez avec le bouton droit et copiez. Je peux aller ici, copier cette couleur, par exemple collant dans mon éditeur de code. Et donc je peux l' avoir dans mon code ou je peux le sélectionner ici et le copier. Ou mieux encore, vous pouvez simplement contrôler ou commander E sur votre clavier pour l'exporter au format PDF. Lorsque vous cliquez sur Exporter, il sera exporté au format PDF. Et puis, lorsqu'ils les ouvriront plus tard, ils pourront simplement sélectionner ce code hexadécimal dans le PDF, le copier et le coller dedans. Pour la typographie, vous pouvez également voir pour l'iconographie. Donc, toutes les icônes que nous avons utilisées dans ce projet en particulier ainsi que toutes les illustrations et éléments supplémentaires que vous utilisez. Vous pouvez le mettre ici, mais vous pouvez aussi le faire ici, où est votre couleur ? Vous pouvez toujours combattre ombres d' arrière-plan, les flous, l'opacité, couvertures et tous ces autres éléments ici , parce que les portes apportent également une contribution universitaire, parce que tous ces arrière-plans, les ombres et les flous contiennent également de la couleur. Donc, une autre chose que vous pouvez faire avec cette cible est de la partager. Donc, si je sélectionne simplement cette planche d'art, allez sur Partager. Vous pouvez voir qu'il ne s'agit que d'une sélection. Donc, si je dézoome, vous pouvez voir que rien d'autre n'est sélectionné car je viens de sélectionner cet aéroport en particulier. Donc, mais il peut le faire, c'est le partager. Je peux créer le lien, mais au lieu de Design Review, je vais utiliser le développement. Je peux créer un lien. Et pendant la création, ce que je veux vous montrer ici c'est que les développeurs peuvent obtenir ce lien. Ils peuvent tirer toutes ces couleurs de ce lien en particulier. Et vous pouvez également choisir cette part pour le développement tout autre tableau d'art que vous avez intégré à votre conception. Par exemple, nous avons la conception du site Web ici et nous avons la plupart de ces planches d'art, vous pouvez donc sélectionner eux tous. Vous pouvez les partager à des fins de développement. Et par conséquent, vos développeurs seront endettés. Ils peuvent le choisir. Donc, si je clique ici pour accéder à notre guide de style, ils s'ouvriront dans mon navigateur, et ils afficheront à quoi tout cela ressemble dans mon navigateur. Donc, si je vous montre ici pendant son ouverture, nous avons des objectifs de projets. Donc, selon la façon dont vous avez nommé votre tableau d'art, cela apparaîtra de cette façon. Donc, encore une fois, nous avons toutes ces couleurs différentes. Donc, si je sélectionne l'un d'entre eux, par exemple, assurez-vous de celui-ci. Et si je passe au code ici, vous pouvez voir toutes les couleurs et toutes les nuances de mes couleurs , extraites d'ici. Donc, si je sélectionne celui-ci, vous pouvez voir qu'il s'appelle Danger read et que nous avons tout de suite des propriétés CSS. Nous avons donc une largeur et une hauteur en haut à gauche, nous avons un arrière-plan, nous avons un arrière-plan ici. C'est donc ce code hexadécimal et nous avons une opacité de 100. Donc, en gros, ce qu'ils peuvent faire à partir d'ici c'est qu'ils peuvent choisir de copier à partir d'ici. Ils peuvent cliquer sur cette couleur. Ici. Tri copié par couleur. Laisse-moi me cacher juste pour que tu puisses le voir. Donc, si je sélectionne cette couleur, clique dessus, vous pouvez voir la couleur copiée Elle est donc copiée et ils pourront la coller plus tard dans le code. Nous pouvons également passer ici. Vous pouvez donc voir la racine de toutes ces couleurs. Encore une fois, le blanc uni, le gris clair, gris foncé, le vert principal, toutes les couleurs que j'ai nommées familles Point. Nous avons donc des familles de polices, ce qui est également très intéressant pour les développeurs, toutes situées ici, dans notre guide de style. Et enfin. Ce style de personnage est neuf. Donc, si on fait défiler l'écran jusqu' en bas, c'est celui-ci. Donc, si je sélectionne juste cela et que je reviens au code. Permettez-moi donc de le sélectionner une fois de plus. Vous pouvez voir tous les états que j'ai créés pour ce design particulier. Nous avons donc Visa, Black and White, Mastercard. Mastercard Black and White suggère de modifier tous ces logos. Et en gros, si je double-clique sur l'intérieur et que je choisis l'apparence, si nous choisissons Contrôle et cliquons, vous pouvez voir un dégradé linéaire. Ainsi, toutes les couleurs d'un dégradé linéaire vous permettent de voir la direction du dégradé, de l' opacité et de l'ombre. C'est celui que j'ai mentionné précédemment. Drop Shadow a donc cette couleur et ces valeurs. Donc, en gros, vos développeurs peuvent extraire ces valeurs directement à partir d'ici. Ils ont à nouveau le code CSS ici. Enfin, s'ils passent à l'option « entendre », ils peuvent sélectionner cette option. Et puis ils peuvent voir à l'intérieur du CSS racine tout ce qui se trouve à partir d'ici. Donc, en gros, ils n' ont qu'à trouver cette carte ici et ils peuvent copier le code CSS à partir de là. Donc, si je sélectionne celui-ci, par exemple, et vous pouvez voir l'état par défaut presque noir. Donc, si je maintiens la touche Contrôle enfoncée et que je clique à l'intérieur, vous pouvez voir du gris clair. Si je sélectionne et que je clique à l'intérieur. Vous pouvez donc voir cette couleur, qui est la couleur de sa peau. Et si je zoome un peu plus près. Allons-y avec 100, par exemple si nous zoomons et cliquons sur cette couleur verte, par exemple, vous pouvez voir les couleurs pour qu'ils puissent cliquer, qu'ils peuvent copier dans le presse-papiers et coller ce qu'ils veulent. Enfin, ils peuvent cliquer ici sur les commentaires. Et ils peuvent tirer sur cette épingle, par exemple ici. Et vous pouvez dire quelque chose comme Aimez-vous ces icônes ou devraient-elles être en noir et blanc ? S'ils disent oui, par exemple , vous pouvez cliquer sur cette icône. Vous pouvez revenir au code, trouver l'un d'entre eux. Donc, par exemple, disons celui-ci. Et nous n'avons qu'un état par défaut pour cela. Et par exemple, vous pouvez créer différents états pour ces icônes. exemple, nous avons la valeur par défaut, nous avons le survol. Vous pouvez donc voir qu'il change de couleur pour l' état par défaut et pour le survol. Donc, selon ce que vous avez fait avec vos couleurs, elles réagiront de cette manière particulière. Donc iconographie, couleurs, même chose, même histoire. Ainsi, lorsqu'ils sélectionneront, ils obtiendront du CSS. Ils peuvent simplement cliquer pour copier, presse-papiers et le coller dans leur code. Donc, en gros, c'est à quel point il est facile de travailler avec Adobe XD avec des couleurs et des guides de style. Et je vous recommande toujours de l'exporter au format PDF car vos développeurs sont peut-être en déplacement. Parfois, ils peuvent en discuter avec votre client. Assurez-vous de leur envoyer le lien du guide de style lui-même, afin de ne pas trop les confondre et assurez-vous de leur envoyer des liens séparés. conçoivent souvent des maquettes, du papier, des maquettes, quoi que vous fassiez, car ainsi ils peuvent facilement inspecter toutes ces couleurs. Parce que si vous les mettez tous dans un seul lien, ce que vous pouvez faire, vous allez simplement les confondre. Et j'ai trouvé que cette approche fonctionne mieux avec mes développeurs. Mais assurez-vous de toujours parler à vos développeurs avant de commencer à travailler. Assurez-vous de mentionner les couleurs hexadécimales ou RGB. Assurez-vous de voir s'ils sont bons avec certaines de ces couleurs. Et enfin, ce que je ne t'ai pas montré. Si je sélectionne cette couleur, par exemple, je peux cliquer ici. Laisse-moi me cacher. Vous pouvez donc voir que nous avons une couleur unie, dégradé linéaire, un dégradé radial et un dégradé angulaire dans XD, nous avons de l'obésité pour la couleur, nous avons des tons de couleurs différents, ici nous avons l'opacité du canal Alpha pour la couleur elle-même. Et enfin, nous avons le hex, le RGB, le HSB. Ainsi, en fonction de ce que souhaitent vos clients et développeurs, vous pouvez le choisir ici. Donc, en gros, c'est tout. C'est pourquoi les guides de style de ces projets sont très importants, car ils regroupent tous les éléments que vous avez utilisés dans votre conception en un seul endroit tous les éléments que vous avez . Lorsque vous travaillez sur vos projets, veillez à toujours créer ces guides de style en parallèle à ce que vous faites, car il sera beaucoup plus facile de exporter par la suite pour vos développeurs. pour y jeter un coup d'œil. Donc, en gros, c'est tout. Je pense que vous avez vu quel point les guides de style sont importants pour les développeurs. Ils ne sont pas si importants pour vous, mais ils peuvent l'être pour les autres designers qui pourraient travailler sur ce design en particulier après vous. Parce que dans la majorité des cas, vous ne serez peut-être pas intéressé à continuer à travailler sur ce projet en particulier. Peut-être que d'autres designers vont vous remplacer et continuer à travailler sur ce projet. Donc, avec quelque chose comme un guide de style, il sera toujours beaucoup plus facile pour ce designer de continuer là où vous l'avez laissé dans le même style. Et bien sûr, il sera beaucoup plus facile pour les développeurs de travailler avec le guide de style, car ils disposent de toutes les informations dont ils ont besoin pour commencer à appeler ce projet. 91. AFFECTATION de l'article 11: Votre devoir pour cette section est d'utiliser l'un de ces outils que j'ai mentionnés dans cette section du cours. Et pour essayer de choisir vos couleurs préférées pour un projet. Essayez d'utiliser un projet imaginaire si vous avez utilisé le même projet imaginaire tout au long de cette classe jusqu'à présent , assurez-vous d'utiliser également la sélection de couleurs pour ce projet. Veillez à utiliser l' un de ces outils. Essayez de comprendre quelles couleurs fonctionneraient le mieux, lesquelles ne fonctionneraient pas mieux, et essayez de voir si ces couleurs sont, disons, malvoyantes. Si vous utilisez l'un de ces outils en ligne, certains d'entre eux l'ont effectivement. Ils vous diront si ces couleurs vont passer ou non. Il est donc très important d'utiliser ces outils pour les personnes malvoyantes et malvoyantes qui ont des difficultés à lire ces couleurs vives. Comme je l'ai dit, explorez, amusez-vous et voyez quelles couleurs vous conviennent le mieux. Essayez de voir l'un de ces outils et de choisir celui qui convient le mieux à votre processus. 92. SECTION 12: Outre la topographie, les images constituent un élément crucial qui raconte une histoire dans votre conception. Donc, savoir comment choisir une paire d'images différentes permettra vraiment à votre design se démarquer de la foule. Dans cette section, nous allons parler des images gratuites par rapport aux images payantes. Comment choisir les séries d'images, comment choisir le bon rythme pour vos images et bonne équipe en fonction de votre projet et bien plus encore. Commençons donc. 93. Pourquoi les images sont-elles importantes: Tu vois ce qu'on dit, cette photo vaut 1 000 mots. Eh bien, c'est la même histoire dans les peintures que dans le design, particulier dans le graphisme, mais la même chose peut être dite dans la conception Web et la conception d'applications. Le choix des bonnes images peut donc réellement déterminer le rythme auquel les spectateurs regardent votre projet, qu' il s'agisse d'un projet d'application ou d'un projet de conception de site Web. Cela peut également déterminer le ton lequel vous vous adressez à vos visiteurs. Cela peut donc être sérieux ou amusant, ludique. Cela peut également déterminer le rythme auquel vos spectateurs peuvent regarder votre projet. Cela signifie donc que je vais utiliser des images plus petites, des images plus grandes. Allez-vous utiliser une image en plein écran des images en pleine largeur et bien plus encore. Ils détermineront également dans quelle mesure notre site Web est ludique ou sérieux. Et ils vont également déterminer les couleurs que vous allez utiliser. C'est votre design, car le ton de vos images va vraiment le déterminer. Parce que si vous utilisez par exemple des images très sombres, vous allez utiliser certaines couleurs, ce qui contrastera beaucoup mieux avec ces images sombres. Ou si vous utilisez des images très claires et aérées, vous allez les contraster, mais en utilisant quelque chose de beaucoup plus sombre, par exemple un noir foncé, un gris foncé ou un vert foncé ou quelque chose comme ça. Les images sont donc vraiment le facteur clé dans la création de vos designs et choisir les bonnes images pour vos designs va faire ou défaire votre design. 94. 3 types d'images de projet: En ce qui concerne les images de projets, il existe en fait trois types principaux. Le premier concerne les images prises par le photographe. Il s'agit donc d'images que votre client possède déjà et qu'il a prises auprès notre photographe haut de gamme qui les a prises séries et a créé toute l'histoire pour votre client, puis les a livrées . à votre client. Ensuite, votre client vous fournira ces images et vous les utiliserez à votre tour dans vos conceptions. Deux sont des images gratuites. Ce sont donc les images que vous trouverez généralement sur des sites Web tels que Unsplash ou Pixabay. Et ces images présentent vraiment un énorme défaut et cette variété. Cela signifie donc que vous pouvez trouver une superbe image d' un excellent photographe, et c'est tout. Vous ne pouvez donc pas trouver une autre image, par exemple un modèle dans une pose différente, un coucher de soleil vu d'un autre point de vue, ou une rue de la ville d'un point de vue différent également. Vous ne pouvez donc pas les trouver. Et généralement, ces images ne sont vraiment pas de très bonne qualité. Habituellement, il existe quelque chose comme 1920 x 1080 HD ou au moins jusqu'à la taille k. Enfin, troisièmement, nos sets haut de gamme. Maintenant, ce sont les sites Web que vous pouvez trouver en ligne. En général, j'aime utiliser Envato Elements et leur propre site Web 2020, ce qui signifie qu'ils ont choix entre plus de 50 millions d'images. Et cela signifie que ces photographes haut de gamme créent des scènes. Imaginez, par exemple vus au bureau et qu'ils mettent en scène ce décor. Ils installent ce bureau. Ils payent pour les modèles et prennent des centaines d'images différentes sous tous les angles tous les angles différents modèles faisant des choses différentes. Et le principal avantage de ces images est qu'elles ont toutes été prises dans un environnement contrôlé par un seul photographe, sous une seule source d'éclairage avec les mêmes modèles, avec la même équipe dans la même pièce. Donc tu as compris l'idée. Ces images peuvent facilement être utilisées dans vos projets. Et par exemple, si vous devez modifier légèrement la largeur, par exemple la luminosité, vous pouvez le faire dans Adobe Lightroom. Ensuite, vous pouvez prendre toutes les images que vous téléchargez pour votre projet. Vous pouvez créer un seul tweet, par exemple pour la luminosité ou l'opacité, ou pour le vignettage ou quoi que vous fassiez avec cette première image. Et si vous souhaitez appliquer la même modification à toutes vos images, par exemple si vous avez téléchargé l'ensemble de 50 images différentes, vous pouvez simplement appliquer cette première modification à la première image, puis appliquez-le à un grand nombre de vos autres images de la même collection, vous pouvez simplement synchroniser ces modifications. Et par exemple, Adobe Lightroom va appliquer ces modifications. Vous n'êtes pas obligé d'utiliser Lightroom. J'aime beaucoup l'utiliser parce que je suis un utilisateur d'Adobe. J'utilise Adobe XD ou Adobe Photoshop. J'utilise Premier et j' utilise bien sûr Lightroom pour toutes mes images. Et j'ai beaucoup aimé cette fonction, mais elle ne se limite pas à Lightroom. Vous pouvez le trouver dans d'autres outils et logiciels. Assurez-vous donc de le rechercher, mais cela vous fera gagner beaucoup de temps. Donc, que vous utilisiez des images de clients, vous devrez peut-être modifier certaines choses ici et là. Parce que d'habitude, ces photographes prennent des photos fantastiques, mais peut-être que si vous créez sites Web conçus pour notre ton légèrement plus foncé, disons, vous allez appliquer certains ces modifications en plus de ces images. En général, les photographes aiment laisser ces images bien rangées. Les concepteurs vont donc à leur tour apporter ces modifications. Donc, par exemple , la saturation, la luminosité, contraste et d'autres choses comme la dette à ces images. Encore une fois, si vous utilisez des images gratuites, c'est génial, surtout pour les clients à petit budget, car ils ne se soucient pas vraiment de l'apparence de leur blog. Mais si vous travaillez avec des clients disposant de budgets raisonnables, vous pouvez facilement intégrer ces séries d'images haut de gamme votre travail à partir de sites tels que Envato Elements, par exemple et I Je le recommande vraiment car vous pouvez trouver des millions de ces différentes images. Et en retour, ils donneront à votre travail un aspect beaucoup plus professionnel, beaucoup plus raffiné que si vous utilisiez simplement ces trois images. 95. Comment choisir des images de niche: Il existe de nombreuses façons de choisir des images de niche, mais je vais simplement vous donner quelques conseils et techniques sur façon dont je le fais et comment je l'ai fait au cours des 20 dernières années. Donc, selon le créneau dans lequel vous travaillez, il y a un certain ton. Donc, par exemple, si vous créez un site Web pour les costumes pour hommes, il y a de fortes chances qu'il s'agisse d'un site Web haut de gamme. Et ils essaient de donner le ton professionnel, design épuré, style de vie que ces costumes vont incarner. Donc, évidemment, vous n'allez pas utiliser quelque chose comme un jaune vif ou un rouge vif ou quelque chose comme ça. Vous allez certainement utiliser ces couleurs gris clair, gris foncé, peut-être un soupçon de bleu, peut-être même doré, quelques endroits si vous travaillez contre la couleur noire. Cela va donc vous permettre de vous démarquer , évidemment en blanc. Donc, lorsque vous choisissez vos images, assurez-vous de garder ces éléments à l'esprit car vous n'allez pas choisir vos modèles sur fond jaune et sur fond, ce qui va ruiner le look de ton costume. De toute évidence, vous allez vous adapter au ton. Cela signifie donc que vous allez rechercher des modèles qui occupent ces positions, par exemple sur des fonds blancs correctement exposés car il vous sera beaucoup plus facile de les intégrer . des images dans votre travail. Également des modèles sur fond noir car vous pouvez utiliser quelque chose comme un écran sur l'obésité, puis vous pouvez réduire ce fond noir par rapport à votre design. Ainsi, vous pouvez facilement extraire votre modèle de votre arrière-plan et l' adapter facilement à votre design. Ce n'est donc évidemment qu' un exemple parmi d'autres. Assurez-vous de donner le ton et de voir dans quel ton se situe votre créneau. Vous allez donc rechercher des images qui se situent dans cette niche et sur ce ton, ce qui est très important car vos visiteurs s' aligneront beaucoup plus facilement si ils voient des choses qu'ils comprennent, plutôt des choses qu'ils ne comprennent pas. Donc, par exemple, revenons à cet exemple de costume. Imaginez que vous êtes ce monsieur recherche d'un costume pour votre mariage, par exemple pour le mariage de votre ami ou quelque chose comme ça, alors vous recherchez un costume vraiment haut de gamme, quelque chose de vraiment haut de gamme, quelque chose de très cher, parce que tu veux te présenter ce jour-là et avoir une belle apparence. Ensuite, vous visitez ce site Web, qui est tout en couleurs criardes et tout en rouge, vert, bleu. Cela ne te donne pas cette sensation. Cela ne vous donne pas cette impression du site Web qui vend ces costumes coûteux. Donc, quelque chose ne va pas aller bien. Certaines choses vont bien paraître. Peut-être qu'au premier coup d'œil, vous n' y penserez pas trop. Mais lorsque vous commencez à naviguer, vous remarquerez évidemment que quelque chose ne va pas ici. Cela ne vous donnera pas confiance nécessaire pour acheter ce costume, car cela ne vous donnera pas l'ambiance que vous attendez habituellement du site Web sur les costumes. Ensuite, vous vous rendez sur le site Web du concurrent, qui contient tous les éléments dont nous avons parlé pour cet exemple en particulier, vous vous y sentirez beaucoup plus à l'aise. Vous vous sentirez beaucoup plus à l'aise avec votre décision d'achat et vous vous sentirez beaucoup plus à l'aise, pour ainsi dire, parce que vos attentes sont satisfaites par ce site Web plutôt que ce site Web précédent avec toutes ces couleurs vertes. C'est pourquoi il est très important, lorsque vous choisissez des images, assurer que vous choisissez des images de niche, que votre public puisse s'identifier facilement. Par conséquent, votre site Web sera en retour beaucoup plus accessible à vos utilisateurs et à vos applications mobiles, car vos utilisateurs reconnaîtront ces indices, ces images. , ces couleurs, ces styles, parce qu'ils y sont habitués. N'essayez donc pas de trop expérimenter et optez pour vos images à outrance. Assurez-vous de vous en tenir à ce que vous savez et de vous en tenir à ce qui fonctionne, qui est le plus important. Après tout, assurez-vous que vos utilisateurs se sentent l'aise lorsqu'ils visitent votre site Web ou votre application mobile. Parce qu'en retour, cela va générer plus de conversions. 96. Premium VS: Dans cette vidéo, je vais vous montrer quelques différences principales lorsque vous recherchez vous-même des images. Voici donc les exemples où votre client n'a aucune image. Vous devez donc rechercher des images pour ce projet en particulier. Et je vais vous montrer quelques différences clés entre les images gratuites et premium et ce que vous êtes censé rechercher lorsque vous recherchez des images. Nous avons donc ici notre site Web appelé unsplash.com, qui est généralement utilisé par ces designers de nos jours. Et il y a aussi pixabay.com et bon nombre de ces autres sites Web. Mais généralement, Unsplash et Pixabay sont les sites Web que l'on recherche. Donc, si nous saisissons un costume, par exemple comme je vous l'ai montré dans les exemples précédents. Et comme nous en avons parlé dans la vidéo précédente, je vais simplement vous montrer et comparer les différences entre un site Web gratuit et un site premium. Comme je l'ai dit, nous avons un costume ici, je vais copier ce texte et je vais accéder à ce site Web qui contient des éléments volatils, qui est un site haut de gamme. Et je vais simplement le coller ici. Recherchez les photos, mais vous pouvez rechercher toutes ces différentes choses. Ainsi, des vidéos, des modèles de vidéos, de la musique, des effets sonores, modèles graphiques tels que des modèles d'impression et une interface utilisateur, des enfants UX, des présentations graphiques se produisent, des photos, des polices , des modules complémentaires, des modèles Web, de la 3D et bien plus encore. Nous avons donc saisi des costumes et ils ont également ce site Web appelé 2020 avec 50 millions d'images supplémentaires. Oui, cela représente 50 millions d'images supplémentaires. Et toutes ces images de très haute qualité téléchargées par tous ces photographes indépendants. Donc, si nous allons sur ce site Web qui est en stock pour 2020 et que nous saisissons ici. Nous avons donc exactement la même requête de recherche sur tous ces sites Web. Et ce que nous avons ici sur Unsplash, c'est que lorsque nous survolons, nous avons cette course de chasseurs. Nous avons un autre photographe, un autre photographe, un autre photographe. Ce sont donc tous des photographes différents. Alors allons-y, voyons voir, c'est Benjamin Roscoe et celui-ci. Allons donc visiter leur profil. Comme vous pouvez le constater, ils prennent des photos de la ligne d' horizon, des barres, des détails inversés. Ici, nous avons quelques images de cette personne en costume. Mais c'est essentiellement ça. Vous pouvez voir que nous n'avons que trois ou quatre images différentes. Et encore une fois, ces barres d' images tout en bas. Encore une fois, si je clique sur cette image, par exemple, je peux cliquer sur « Lire la suite » pour voir tous ces différents détails. Et je peux taper les informations. Nous pouvons voir que l' appareil photo est Sony, ISO 400, et voici les dimensions. Ils sont donc très bons à ce stade. Et vous pouvez voir le nombre de téléchargements et d'utilisation de cette image. Mais si nous revenons en arrière et cliquons sur cette image, par exemple , accédez aux informations. Vous pouvez voir qu'il fait cinq K. Mais encore une fois, nous avons le même problème. Ainsi, lorsque je clique sur ce profil, par exemple, vous pouvez voir que nous avons de nombreuses images différentes, mais qu'il n'y a qu' une seule image d'un costume. Imaginons donc que vous souhaitiez utiliser cette couleur de costume en particulier, par exemple, et que vous souhaitiez l'utiliser dans cet environnement. Disons que c'est à l'intérieur contre ces escaliers et ce genre de choses. Vous pouvez donc simplement imaginer que votre modèle va être photographié à l'intérieur, par exemple à l'intérieur d' un centre commercial, en train de faire du shopping ou quelque chose comme ça. Il faut donc trouver des images de cette nature. Eh bien, ce n'est qu'une image et vous êtes pratiquement bloqué. Tu n'as pas d'autre choix. Donc, si nous revenons en arrière et jetons un coup d'œil à toutes ces autres images d'un costume. Comme vous pouvez le constater, il n' y en a pas beaucoup plus. Il y en a peut-être un, mais il y a un sapin de Noël à l'intérieur. Cela ne fonctionnera donc pas pour toutes vos occasions. Et comme vous pouvez le constater, il n'y a pas beaucoup d'options ici pour votre projet en particulier. Nous pouvons donc consulter certains de ces sites Web et trouver quelque chose qui fonctionnera pour nous. Disons donc que c' est le centre commercial et que c'est le magasin à l'intérieur du centre commercial. Ouvrons donc cela dans un nouvel onglet. Remarquons rapidement qu'il s'agit d'une taille de huit K, par exemple et vous pouvez lire ces informations plus en détail. Vous pouvez en apprendre davantage à ce sujet. Et nous pouvons voir que c'est quatre, nécessite un atelier de couturier. Mais si je fais défiler la page ici, vous pouvez voir que tout cela provient de la même série. Vous pouvez donc voir ce même modèle, le même arrière-plan, le même éclairage, le même photographe. Donc, vous pouvez voir sur les images, c'est un photographe. Donc, toutes, et ce qui est génial, c'est que si je clique sur Afficher plus et que je les ouvre dans un nouvel onglet, vous pouvez voir combien de ces différentes images nous avons. Ainsi, vous pouvez clairement créer une histoire à partir de toutes ces images. Vous pouvez donc commencer par votre page en accueillant par exemple votre utilisateur dans votre boutique, puis en lui expliquant. La qualité de vos costumes et la façon dont ils sont fabriqués, le temps qu'il faut à chaque personne pour voir un bouton en particulier, par exemple. Vous pouvez donc vraiment zoomer sur les détails avec ces images car elles ont qualité de huit K. Elles sont vraiment énormes. Vous pouvez ensuite leur expliquer comment l'ajustement fonctionnera lorsqu'ils essaieront la combinaison, comment ils se sentent, quand les matériaux de la combinaison seront achetés et bien plus encore. Vous pouvez donc le faire avec ces images premium. Vous pouvez vraiment raconter une histoire plutôt que de simplement montrer une image singulière. Cela donnera à votre site Web un aspect beaucoup plus professionnel, beaucoup plus raffiné. Parce qu'une fois de plus, vous pouvez immerger votre spectateur dans cette expérience car vous disposez de toutes ces différentes images provenant du même plateau. Regardons-les donc une fois de plus. Vous pouvez voir qu'ils boivent du café. Nous avons le montage ici. Nous testons le matériau. Nous avons le montage ici. Nous sommes d'accord, par exemple, sur le fait que nous avons des matériaux différents. Nous savons comment la cravate va s'ajuster. Vous pouvez donc voir clairement à partir d'un seul exemple qu' un prêt correspondant correspond au nombre de ces différentes images que nous avons. Vous pouvez donc simplement vous imaginer zoomer sur ces détails et ce que vous pouvez réellement faire avec toutes ces différentes images plutôt qu' avec une seule image. Enfin, nous pouvons faire de même ici. Donc, si je tape été poursuivi en justice et que je l'ouvre, vous avez ces différentes collections. Et à l'intérieur de ces collections. Donc, si je les ouvre, vous pouvez trouver différents photographes. Donc, par exemple, j'aime beaucoup ce costume. Peut-être que je peux y aller et le rechercher, ou peut-être que je pourrais même jeter un œil à celui-ci. Voici donc les collections. Vous pouvez ouvrir ces collections de ces différents photographes, puis explorer d' autres images. Nous avons donc ici cette image et ce modèle. Donc, si je clique ici et que j' ouvre leurs collections, nous avons ces différentes photos, nous avons des amours différents, nous avons toutes ces choses différentes ici. Nous pouvons ainsi explorer et voir toutes les images de ce photographe. Vous pouvez clairement voir que nous avons un tas de ces différentes images. Mais encore une fois, si vous n' aimez pas 2020 et toutes ces images différentes, vous pouvez toujours revenir à Envato Elements car ces deux images font partie de la même collection. Ainsi, lorsque vous recevrez cet abonnement à Envato Elements, qui est un abonnement annuel il sera inclus. Donc, si vous ne trouvez pas d'image ici, vous pouvez peut-être essayer 2020. Vous pouvez le voir dit par Envato. Ce ne sont donc que quelques comparaisons différentes entre les images gratuites et payantes. Assurez-vous simplement de comprendre que vous ne pouvez pas effectuer travail professionnel de haut niveau avec des images gratuites. En raison de ces limitations, que je viens de mentionner, vous devez utiliser des ressources professionnelles telles que des images d' Envato Elements, par exemple. Vous n'êtes pas obligé d'utiliser des éléments Envato. Il existe un tas de sites Web différents. Mais comme je vous ai montré ce qui est inclus dans votre abonnement, je les ai beaucoup aimés et je les utilise tous les jours pour mes projets. En retour, cela donnera à vos projets apparence beaucoup plus soignée, beaucoup plus professionnelle. Et si vous essayez de vendre votre design à votre client, par exemple si vous essayez de lui présenter idée de design ou une modification de conception, refonte complète ou quelque chose comme ça. ce faire, avec ces images professionnelles et soignées, Pour ce faire, avec ces images professionnelles et soignées, il sera beaucoup plus simple que de simplement saisir des images différentes provenant de différents photographes avec des expositions différentes, avec différents modèles sur une page, puis en essayant de leur vendre des dettes. 97. Optimisation d'image: L'optimisation des images est un autre élément clé lorsque vous créez des projets à l'aide de ces images, créez des projets à l'aide de ces images, en particulier de grandes images. Cela signifie qu'un logiciel de votre choix réduira la taille de l'image, qui à son tour sera téléchargée beaucoup plus rapidement sur le serveur, par exemple, qui chargera votre site Web beaucoup plus rapidement, en lui donnant un meilleur classement sur Google, ce qui signifie un meilleur référencement. Donc, en gros, cette optimisation du référencement est extrêmement importante, en particulier sur les projets de conception de sites Web, sur les projets de conception mobile . Elle est également très importante, surtout si vous tirez à partir de la même base de données. L'optimisation de vos images va donc offrir à vos utilisateurs une bien meilleure expérience sans perdre la qualité de ces images originales. Donc, si je vous ramène une fois de plus ici à Envato Elements, vous pouvez voir par exemple cette image que nous regardions précédemment. Donc, comme vous pouvez le voir, près de huit K. Donc, quand je clique sur le téléchargement, tous ces différents projets de classe s' affichent. Donc, par exemple, je vais appeler cela des projets d'image. Pour notre projet d'image, par exemple, et je peux simplement créer ce projet. Maintenant, cela signifie que sur Envato Elements, je peux ajouter tous ces différents éléments à ce projet en particulier. Vous pouvez donc imaginer que je vais utiliser toutes ces différentes images. Je vais utiliser différentes icônes, peut-être même un thème WordPress. J'ai peut-être besoin de musique extraite de mes vidéos. donc simplement intégrer tous ces différents éléments que vous avez téléchargés depuis pouvez donc simplement intégrer tous ces différents éléments que vous avez téléchargés depuis Envato Elements dans ce projet que nous venons de créer. Cela signifie qu' il sera beaucoup plus simple pour vos clients de concéder sous licence tous ces articles au cas où cela serait nécessaire. Ainsi, par exemple, vous pouvez utiliser un seul abonnement pour un nombre illimité de clients, et chaque client peut avoir ses propres projets. Cela signifie que l'octroi de licences peut être aussi simple que de simplement copier une licence, puis l'envoyer à vos clients. À leur tour, ils conserveront cette licence et la conserveront. Vous n'avez donc pas besoin de mettre à jour ces licences chaque année. En gros, une fois que vous l'avez payé, une fois que vous l'avez téléchargé, c'est tout. Vous pouvez donc facilement concéder sous licence tous ces différents éléments, y compris les images sur Envato Elements pour vos projets. Donc, si nous revenons ici, je peux simplement cliquer sur notre projet d'image pour créer ce projet. Ensuite, je peux simplement ajouter et télécharger. Et le téléchargement va commencer ici. Maintenant, vous pouvez voir que cette image est assez grande. Il fait en fait presque 18 Mo. Donc, une fois le téléchargement terminé, il est temps d' optimiser nos images. Maintenant, l'optimisation des images n' est pas vraiment nouvelle. C'est fait par les développeurs depuis des décennies, par les designers depuis quelques décennies également. En gros, cela va simplement réduire le nombre de pixels à l'intérieur de votre image. Il contiendra la taille de votre image. Il va contenir de la netteté, va contenir de la qualité. Mais en retour, cela vous donnera une taille de fichier beaucoup plus petite, car tous ces différents appareils photo ajoutent simplement la taille du fichier, en particulier en fonction de l'objectif que vous utilisez dans modèle de caméra que vous utilisez. Donc, pour ne pas vous ennuyer avec trop de détails, je vais vous le montrer en pratique. Donc, comme je suis sous Windows, j'utilise ce que l'on appelle The Riot. Et si vous utilisez un Mac, vous pouvez utiliser ce que l'on appelle l'image optimale d'une boucle, le fichier PDF, et vous pouvez simplement cliquer sur le lien pour télécharger celui dont vous avez besoin. Et il existe de nombreux outils différents pour les deux systèmes d'exploitation, Windows et Mac. C'est donc vraiment à vous de décider lequel vous voulez choisir. Je choisis, non ? Et je l'utilise depuis des années maintenant et cela a bien fonctionné pour moi. Donc, si je te reprends, tu pourras simplement voir à quoi ressemble la droite. Et ça y est. C'est vraiment un outil de base et je veux vraiment que vous puissiez facilement apprendre à utiliser et à quoi il sert. Il a ces deux fenêtres et si je fais glisser et déposez mon image à l'intérieur, c'est l'image que nous avons choisie. Vous pouvez voir que vous pouvez ouvrir une image, importer des images par lots, ce qui est encore une fois très important, surtout si vous travaillez avec ces collections. Pour ne pas perdre de temps. Imaginez simplement que vous avez par exemple 50 images différentes que vous téléchargez. Et c'est un excellent moyen, par exemple avec Envato Elements. Vous n'utilisez peut-être même pas toutes ces images, mais c'est génial car elles sont là. Vous pouvez simplement tous les sélectionner, les télécharger tous, les mettre dans la même collection. Maintenant, optimisez-les tous en utilisant right, par exemple , alors ici, je vais simplement utiliser une image. Et ce que je vais faire, c'est cliquer dessus et le faire glisser jusqu'ici. Ensuite, une fois qu'il sera chargé , il me demandera ceci. Ce fichier contient donc une image en haute résolution, non ? Peut gérer de telles images, mais le traitement peut être assez lent dans cette situation. Ils veulent d'abord le redimensionner. Il est recommandé de ne pas modifier l'image d'origine. Remarquez donc ce qui va se passer lorsque je clique sur Oui. Il va nous donner cette taille originale. Il va donc l'agrandir à une nouvelle taille, 100 par 100. Conservez donc le rapport hauteur/largeur. Il s'agit d'un pourcentage, car vous pouvez voir ici et le réduire en pixels spécifiques. Mais je vous recommande de conserver ce pourcentage. Alors, il va simplement se demander si ce pourcentage a été réduit à 100 % ? Cela signifie que lorsque je clique sur OK, vous pouvez voir l' image initiale ici. Donc 17,5 Mo de taille et la nouvelle image fait 3,4 Mo. Maintenant, il va se charger beaucoup plus lentement. Donc, lorsque je clique ici et que je survole, vous pouvez voir 17,5 Mo. Et voici l' image ici. Mais quand je l' optimiserai, ce sera 3.4. Donc, quand je clique sur Enregistrer, OK, ici, nous voulons le remplacer. Je veux taper, oui. Et elle va essentiellement remplacer cette image. Donc, quand je clique maintenant et que je survole 17,5 Mo, laissez-moi l'actualiser rapidement. Et vous pouvez voir que c'est 3,4 Mo. Donc, en gros, nous avons commencé avec 17,5 Mo. Nous en sommes maintenant à 3,4 Mo. Et le plus important, c'est que si je passe la souris ici, vous pouvez voir 7952 avec 5304. Et si nous vous ramenons ici, vous pouvez voir que ce sont exactement les mêmes dimensions que celles de l'image d'origine. Cela réduit simplement la taille de l'image dans son ensemble. Donc, ce que cela signifie pour vous, en gros, cela va donner à vos développeurs beaucoup plus de marge de jeu, car vous réduisez la taille de ces fichiers, vous pouvez aller encore plus loin. Par exemple, j'utilise Adobe XD au quotidien pour concevoir tous mes projets. Vous pouvez donc imaginer que je vais placer cette image à huit K dans quelque chose qui est, par exemple , 1920 x 1080. Ensuite, je vais l' exporter depuis XD dans cette résolution particulière. Donc 1920 x 1080, ce qui va encore réduire l'espace requis. N va encore réduire la taille de cette image. Vous pourriez dire, pourquoi ne pas l'utiliser comme ça tout de suite ? Eh bien, parce que vous importez toutes ces énormes images dans le logiciel de votre choix. Dans mon cas, Adobe XD va prendre retard car ce sont des fichiers volumineux. Comme vous l'avez vu, cette image représente à elle seule 17,5 Mo. La majorité de mes fichiers font environ 20 Mo. Vous pouvez donc imaginer que le fichier de conception entier fait 20 Mo et que cette seule image fait 17,5 Mo. Gardez donc ces éléments à l'esprit lorsque vous créez, en particulier pour le Web, car vous essayez de faire en sorte que Google optimise ce site Web. Vous essayez de faire en sorte que le plus de personnes possible trouvent ce site Web. Il est donc très important que vous optimisiez ces images. Et lorsque vous travaillez sur des projets de conception mobile, c'est également important. Parce qu'alors, le système d'exploitation et l'application elle-même, qui ne vont pas extraire toutes ces énormes images de la base de données, vont simplement extraire une image unique taille assez petite. Et il contiendra toujours cette énorme qualité qu'il possédait à l'origine. Quand le photographe a pris cette photo. 98. Structure de nom: Tout comme pour l'optimisation de vos images, il est très important de nommer correctement vos images, car elles seront ainsi affichées correctement sur votre site Web ou sur votre application mobile. Il sera beaucoup plus simple pour vos développeurs de trouver ces images, les inclure dans le code. Et il sera beaucoup plus simple pour code d'extraire ces images des bases de données. Permettez-moi donc de vous montrer ce que je veux dire sur l'image que nous venons de télécharger. Donc, si nous regardons cette image, je l'ai téléchargée à nouveau dans le même projet, afin que vous puissiez voir le nom jusqu'à l'année, passer de PA à VBC et C4 ou autre. C'est-à-dire que l'image a été réduite. Donc, comme vous pouvez le voir encore une fois, 17,5 Mo de sel en taille originale, et vous pouvez voir le titre ici. Et si je vous emmène ici, vous pouvez voir que nous avons un nom comme celui-ci. Alors, que pouvons-nous faire avec cette image, car elle sera prise en compte dans le logiciel de notre choix. Dans mon cas, Adobe XD. Dans votre cas, c'est peut-être Sketch, Figma, Photoshop Illustrator, peu importe. Donc, ce que vous pouvez faire avec cette image c'est que vous pouvez cliquer dessus avec le bouton droit de la souris et la renommer de cette façon. Ainsi, lorsque vous le glisserez et que vous le déposerez dans logiciel de votre choix, vous vous souviendrez de ce nom. Et puis, lorsque vous l'exportez, il va l'exporter comme ça. L'autre chose que vous pouvez faire est d'accéder à quelque chose comme Lightroom, par exemple, et vous pouvez modifier les métadonnées de cette image en particulier, qui vous donnera beaucoup plus de détails sur la date à laquelle cette image se trouve, a été prise avec quel appareil photo, avec quel objectif vous exposez, etc. Cela peut donc vous être demandé si vous travaillez sur un type de projet de conception graphique, par exemple pour des éditoriaux et d'autres sujets de ce genre, surtout si cette image est imprimée sur de grandes toiles. Certains grands clients haut de gamme vont donc avoir besoin de toutes ces informations pour Mu. Assurez-vous donc de comprendre que, quel que soit le type de projet sur lequel vous travaillez, avez certaines exigences, mais pour la majorité de ces projets Web et projets de conception d' applications, renommer simplement votre fichier suffira. Donc, si je vous ramène une fois de plus à notre image, vous pouvez simplement imaginer que cette image, par exemple, se trouve dans la section de votre héros. Ce que vous pouvez faire, c'est cliquer avec le bouton droit sur Renommer et l'appeler simplement hero, IMG. Ou si vous êtes un développeur et que vous souhaitez ajouter des tirets, ajoutez hero, dash, IMG ou un trait de soulignement comme ceci. Alors, soulignons IMG. Cela dépend donc vraiment d'un développeur à l'autre. Ainsi, lorsque vous commencez votre conception, si vous avez accès aux coordonnées de vos développeurs, demandez-leur simplement ceci, ou demandez simplement à vos clients pour qu'ils puissent demander à votre développeur. Cela sera donc beaucoup plus rapide pour vous lorsque vous commencerez à sera donc beaucoup plus rapide pour vous lorsque vous créer, de sorte que vous pourrez renommer toutes ces images et ressources, par exemple des icônes et des illustrations avant de commencer à travailler, puis plus tard, lorsque vous commencerez à travailler. Ensuite, vous devez renommer tous ces fichiers une fois que vous les avez inclus dans le logiciel de votre choix. Je sais que dans Adobe XD, c'est vraiment très pénible d' inclure des images, comme avec ce nom j'ai vu jusqu'à l'erreur 58, peu importe. Et puis, lorsque vous essayez de les exporter vers votre bureau et que vous souhaitez les envoyer à nos développeurs, vous devez tous les renommer manuellement dans votre dossier d'exportation, par exemple et surtout si vous partagez avec quelque chose comme sapling, par exemple avec vos développeurs, puis vous devez les renommer en Sapling. C'est donc vraiment une agitation. Si vous pouvez renommer toutes vos images ou au moins certaines de vos images à l'avance. Parce que de cette façon, la conception sera beaucoup plus simple pour vous. Et assurez-vous également de demander à vos développeurs quel type d'abréviation préfèrent-ils ? De plus, si vous utilisez cette image de héros, par exemple , et que vous imaginez que si je vous emmène ici, il s'agira peut-être de nous. Ce sera le premier produit, ce sera la première section du blog. Ce sera un témoignage ou quoi que ce soit d'autre. Assurez-vous de renommer correctement toutes vos images. Par exemple, si votre témoignage comporte quatre images, demandez à votre développeur quelles sont les abréviations. Donc, par exemple, un tiret de témoignage, un tiret de témoignage, deux tirets trois , quatre et peu importe, ou un trait de soulignement ou sans tirets, traits de soulignement, etc. Donc, juste un témoignage pour toutes ces personnes réunies. N'oubliez pas de leur demander s' ils aiment que Caps Lock soit activé. Mais la majorité des développeurs ne le font pas. La majorité des développeurs, du moins que je connaisse, aiment utiliser des images avec des lettres minuscules et des chiffres, donc ils n'aiment pas qu'elles soient en majuscules. Écoutez, par exemple ce ne sont que quelques conseils et techniques J'aime partager avec vous parce que je pense que cela vous permettra de gagner beaucoup de temps sur ces projets et d' améliorer considérablement la qualité de vos prestations à vos clients. 99. AFFECTATION de l'article 12: Votre mission pour cette section consiste simplement à choisir un autre projet sur lequel vous souhaitez travailler. Si vous avez fait appel à une seule équipe tout au long de ce projet, vous pouvez utiliser celle-ci, par exemple vous assurant de choisir cinq images différentes qui conviendront le mieux ce projet en particulier et d'essayer de les optimiser ils utilisent certains outils que j'ai mentionnés dans cette classe. Et j'ai juste essayé de voir quel impact cela aura lorsque vous commencerez réellement à concevoir. 100. SECTION 13: mood boards sont un excellent moyen de vous mettre dans l'ambiance, où le nom des mots d' humeur en tout cas, et ils sont incroyablement faciles à créer. Dans ce design moderne, Castle sera l'outil qui était autrefois très prisé. À l'époque où nous avions l'habitude de créer des sites Web et des applications avec Photoshop, par exemple, mais aujourd'hui, avec ces outils de conception modernes, il est plus facile que jamais de créer des mood boards. Et ils sont incroyablement utiles pour vous mettre dans l'ambiance, pour vous inspirer et pour comprendre un peu mieux ce que votre client attend réellement de ce projet, quelles sont les couleurs que vous devriez utiliser, quel type d'images devriez-vous utiliser ? Et juste pour t'inspirer à propos de ce projet. Commençons donc. 101. Qu'est-ce qui est des tableaux d'ambiance et pourquoi les utiliser: mood boards sont vraiment extrêmement importants et, à mon avis, ils constituent l'élément clé de tout processus de conception, il s'agisse d'un projet de grande ou de petite envergure, car lors de la phase de mood board, vous pouvez vraiment communiquez clairement avec vos clients et expliquez précisément ce dont ils ont besoin. À qui parlent-ils ? Quelle est la taille du projet, quelle est la taille du public, qui est le public et toutes ces différentes questions. Et vous pouvez utiliser le mood board pour déterminer l'orientation globale du projet , la direction à suivre pour le design. Vous pouvez le faire avant de commencer à concevoir, ce qui vous fera gagner beaucoup de temps car vous allez déterminer le style, le projet rentable, les couleurs, les polices, l'iconographie, etc. plus à ce stade particulier avec les moodboards, plutôt que plus tard, lorsque vous lancez votre logiciel de conception préféré et que vous commencez à concevoir, vous pouvez clairement communiquer ces valeurs à vos clients. Décrivez ensuite à votre client ce qui est vraiment important pour ce projet en particulier. Ils peuvent donc comprendre avant que vous ne commenciez réellement à concevoir, quoi doivent-ils se concentrer ? Comme je l'ai dit, cette étape est très importante à mon avis car elle vous fera gagner beaucoup de temps par la suite, à vous et à votre client. Parce qu'à cette étape particulière, vous allez déterminer où va aller le style général du projet. Bien entendu, le design variera énormément plus tard, lorsque vous commencerez à concevoir. Mais le ton général du projet, avec les couleurs, les polices , la direction du design, tout sera déterminé à ce stade précis avec les mood boards. Plus tard, vous pourrez commencer à concevoir. Vous pouvez ajouter tous ces types d'éléments différents. Mais pour l'instant, comme je l'ai dit, nous allons nous concentrer sur les bases et les choses les plus importantes. Vous allez utiliser votre brief de conception pour déterminer tous ces éléments de conception et prendre des décisions de conception. Vous allez poser à votre client toutes ces questions de design à l'aide de votre brief de conception, par exemple quel est son public cible, quel est son créneau ? Y a-t-il des concurrents dans ce créneau ? Quels sont les principaux concurrents ? Qui sont les plus petits concurrents ? Quel est le ton général du design ? Alors, est-ce amusant ou ludique ? Est-ce sérieux ? Est-ce une entreprise ? Quel est le ton général de livraison de la copie du site Web ? Et bien plus encore. Comme je l'ai dit, vous allez déterminer tous ces éléments lors de étape du mood board plutôt que plus tard dans la phase de conception, ce qui, comme je l'ai dit, vous permettra d'économiser un tas de choses du temps consacré à la conception, tant pour vous que pour votre client. Dans la prochaine leçon, nous allons discuter des éléments que vous devriez prendre en compte pour vos mood boards. Alors je t'y verrai. 102. Quels éléments à considérer: Selon le créneau dans lequel se situe votre projet et celui de votre client, vous allez inclure ou envisager d'inclure différents éléments. Donc, si votre style est corporatif, vous allez évidemment utiliser des images d'entreprise. Vous allez utiliser une police claire pour lire parce que vous devez comprendre qui est votre public cible. Ce ne sont donc pas des enfants, ce sont probablement des personnes d'âge moyen ou plus âgées. Vous devez donc tenir compte de la topographie, contraste, facilité de lecture du site Web. Vous devez donc tenir compte de tous ces éléments lorsque vous planifiez votre créneau et votre projet. De plus, l'imagerie joue un rôle très important, car l' imagerie va donner le ton et donner le rythme du projet. Vous devez donc tenir compte du fait que les couleurs sont également une caractéristique importante de la conception de votre site Web quel que soit le design. Il faut donc tenir compte des couleurs. Les couleurs sont-elles amusantes et ludiques ? Comment le texte va contraster entre ces couleurs ? Vous pouvez donc déterminer toutes ces choses dans le processus Mood Board, dans le processus de conception en général. Vous allez donc décrire découvrir tous ces éléments lorsque vous commencez à créer vos moodboards, plutôt que lorsque vous commencez réellement à créer votre design. Dans la vidéo suivante, je vais vous montrer comment effectuer vos recherches, comment, par exemple, vous adapter à différents créneaux, comment explorer différents éléments et comment les présenter à votre client afin que les deux d'entre vous pouvez parvenir à un accord sur la direction que prendra ce projet et style et la direction de la conception orale. 103. Comment faire vos recherches: Dans cette vidéo, nous allons en fait commencer par la recherche. Et je vais vous montrer quels sont les sites Web que vous pouvez utiliser pour faire vos recherches et pour communiquer clairement avec votre client sur les éléments à prendre en compte. Alors laissez-moi accéder à mon ordinateur et je vais vous montrer quelques sites Web. Les premiers sites Web que nous avons sont donc en fait dribble. Comme vous le savez, dribble est utilisé comme source d'inspiration, comme beaucoup de temps pour ces designers, en particulier dans le monde de la conception d'interfaces utilisateur. Vous pouvez donc facilement utiliser le dribble ici pour explorer tous ces éléments. Vous pouvez donc l'utiliser pour explorer l'imagerie. Vous pouvez l'utiliser pour explorer la topographie et voir comment la topographie est tracée sur certains de ces exemples. Donc, si nous faisons une recherche rapide ici, par exemple si je tape corporate, appuyez sur Entrée pour voir où cela nous mène. Passons donc à la conception Web, par exemple, cela ne nous apporte rien. Utilisons donc la banque, par exemple, ou la banque. Et voyons où cela nous mène. Vous pouvez donc voir ici, pour les banques, qu'il n'y a pas de couleurs criardes à part ces dégradés ici. Mais il s'agit de déterminer le ton général du site Web lui-même. donc probable que cette application bancaire mobile s'adresse à un public différent. Sûrement un public plus jeune. Mais vous pouvez voir ici qu'ils utilisent vraiment toutes ces couleurs dorsales. Ils utilisent ces couleurs noires, blanches. Ils utilisent ces verts clairs comme des fils, par exemple, donc la couleur joue probablement un rôle clé et vous pouvez faire vos recherches ici sur Dribble pour les explorer en fonction du projet en question et le projet sur lequel vous travaillez, quels types de couleurs devez-vous utiliser pour votre projet de conception particulier. Ensuite, si nous examinons la topographie, vous pouvez voir que la topographie ici est vraiment claire. Il était vraiment espacé de manière uniforme. L'espacement est donc vraiment très bien fait ici. Et vous pouvez constater que la majorité de ce texte est en noir sur couleur, ce qui va à son tour le rapprocher du spectateur et le rendre plus facile à lire. Cet exemple est donc vraiment génial. Et si nous allons dans l'autre sens, nous pouvons le voir dans cet exemple, par exemple parce que toutes ces illustrations et ces couleurs sont ludiques . Encore une fois, les textes jouent un rôle clé car ils sont très faciles à lire, comme vous pouvez le voir ici. Si nous vous emmenons sur Behance, qui est un autre site Web que vous pouvez utiliser pour vous inspirer. Si nous jetons un coup d'œil ici et, par exemple en tapant la même chose. Alors, Bank Center, voyez où cela nous mène. Utilisons donc celui-ci par exemple et nous verrons qu'il est différent de Dribble si vous ne le saviez pas déjà. Parce que sur Dribble, vous pouvez vraiment publier ces présentations plus courtes comme celle-ci, par exemple une seule image. Lorsque vous êtes sur les beacons, vous pouvez vraiment publier ces longues présentations et approfondir le projet. Et cela peut vraiment être un excellent moyen de vous informer sur la concurrence de vos clients, par exemple, supposons qu'ils travaillent dans le secteur bancaire. Vous pouvez l'utiliser, par exemple simplement pour comprendre comment ils font leurs recherches, quel est leur public cible, quelles sont leurs couleurs et quel est le raisonnement qui sous-tend le choix de ces couleurs ? Vous pouvez donc facilement l'adapter à votre projet particulier. Si nous faisons défiler la page vers le bas pour passer à notre étape de conception, vous pouvez voir qu'ils utilisent réellement ces couleurs dorsales. Donc en noir et blanc avec une touche de bleu. Et c'est vraiment le design d'entreprise à son meilleur. Vous pouvez voir de gros textes, donc très faciles à lire. Vous pouvez voir les logos, vous pouvez voir ces dégradés derrière. Dans cet exemple en particulier, tous ces éléments me paraissent donc vraiment tangibles , faciles à lire , faciles à comprendre , faciles à nettoyer. Et vous pouvez voir comment la topographie se détache sur un fond blanc, comment elle se positionne par rapport à ces balises, par exemple, stands hauts se dressent juste ici. Ces grands titres. C'est donc très facile à lire. Si nous jetons un coup d'œil à l'imagerie, voici l'explosion , Shopify a son propre site Web. Et je vais laisser des liens vers tout ce dont je parle dans le PDF. Vous pouvez télécharger le PDF et cliquer simplement sur ces liens pour accéder à tous les fichiers que j'ai mentionnés. Et ce sont vraiment des images gratuites en haute résolution, donc gratuites pour un usage personnel et commercial. Vous pouvez donc vraiment trouver de superbes images ici, y2q ici, en premier lieu, c'est pour expliquer l'imagerie. Ainsi, par exemple cette image et cette image vient tout droit du départ racontent une histoire complètement différente, même si le ton est vraiment assez similaire car ils utilisent probablement les mêmes photographes. Ces photographes aiment utiliser certains filtres, exemple pour certaines couleurs et la façon dont certains appels se distinguent des différentes couleurs. Comme dans cet exemple, nous n'avons pas besoin de voir le ciel bleu. Nous pouvons voir ce ciel soufflé avec un filtre juste en haut. Ces photographes aiment donc utiliser ces techniques. Mais pourquoi est-ce important pour vous en tant que designer, c'est simplement pour comprendre où vous pouvez mener votre projet en termes d'imagerie. Donc, si nous faisons défiler la page vers le bas, vous pouvez voir différentes collections. Disons par exemple qu'il s'agit d'un café. Et vous pouvez voir toutes ces images de café avec une texture grunge, filtres très foncés dans l'ensemble. Et vous pouvez vraiment vous adresser à votre public s'il s' agit de votre public, et vous pouvez facilement comprendre qui est votre public en parcourant simplement ces images. va de même pour les plus jeunes. Voici des jeunes. Est-ce qu'ils apprécient le café ? Oui Le café de vos clients prend-il ce ton, cette ambiance ? Est-ce que c'est comme ça ? Alors, est-ce vraiment propre et simple ? Ou est-ce que c'est quelque chose d'un peu plus sale, quelque chose d'un peu plus démodé. Ainsi, vous pouvez facilement identifier et parler facilement à votre public si vous utilisez de telles images. C'est pourquoi j'ai dit que les images jouent un rôle très important dans chaque design. Si je vous emmène enfin à Envato Elements, qui est l'un de mes sites de ressources préférés. Vous pouvez voir ici que j'ai exploré toutes ces différentes images pour la conception des écouteurs. Et j'utilise des jeunes. Des jeunes, en l'occurrence, pour la conception de casques, car c'est le principal groupe démographique de mon client. J'explore simplement quelques images ici. Désormais, Envato Elements est un service premium que vous devrez payer pour l'utiliser. Mais c'est fantastique car en un seul endroit, vous pouvez trouver des vidéos, modèles de vidéos, foires sonores musicales, modèles graphiques et bien plus encore, y compris des images. Dans mon cas, je vais éventuellement associer ces images, dont la topographie correspondante aux icônes correspondantes et bien plus encore pour obtenir le look cohérent que mon client aura besoin, s'ils sont d'accord, nous pouvons simplement passer à la phase de conception et commencer, par exemple, par des wireframes. Mais avant tout cela, je voudrais déterminer si mon client aime suivre ce style de tutoriel ? Est-ce quelque chose qui les intéresse ? Est-ce quelque chose qui les intéresse ? Est-ce la bonne couleur ? Est-ce le bon ton ? Ces modèles prennent-ils les bonnes poses ? Je vais donc prendre en compte tous ces éléments avant de passer à la conception. Parce que lorsque je commence à concevoir, toutes ces décisions ont été prises dans le cadre du mood board, mood board faisant partie du processus. Je peux donc simplement les appliquer à mon design et commencer simplement à travailler sur mon design. C'est pourquoi les moodboards sont importants. C'est ainsi que vous faites vos recherches. Et dans la vidéo suivante, nous allons commencer par Adobe XD. Je vais vous montrer quelques exemples déjà créés et je vais vous montrer comment vous pouvez créer les vôtres et comment vous pouvez communiquer vos idées à vos clients. Alors je t'y verrai. 104. Créez un tableau d'ambiance dans Adobe Xd: Dans cette vidéo, nous allons utiliser Adobe XD pour créer notre mood board. Et je vais également vous montrer certains de mes exemples que vous pouvez acheter si vous le souhaitez ou si ce n'est pas le cas, vous pouvez simplement les explorer pour vous inspirer. Si nous passons à Adobe XD, ce que j'ai fait ici, c'est créer un document de 1920 sur 1080. Maintenant, si vous voulez imprimer ce document, vous pouvez venir ici et le faire pivoter. Bien sûr, vous pouvez être aussi précis que vous le souhaitez. Vous pouvez importer le nombre exact de pixels de votre format de papier si vous souhaitez l'imprimer ultérieurement. Ainsi, par exemple, si vous utilisez le format A4, vous pouvez rechercher le A4 en ligne ou l'ouvrir dans Photoshop et vous pouvez simplement voir la taille exacte en pixels. Vous pouvez saisir cette taille de pixel ici. N'oubliez pas que vous n'êtes pas obligé d'utiliser 300 DPI car Adobe XD est un outil vectoriel. Vous n'êtes donc pas obligée de le faire. Vous pouvez simplement importer pour 72 DPI ici. Vous pouvez simplement créer votre mood board et l'exporter ultérieurement. Vous pouvez l'enregistrer ici, comme vous le voyez Je l'ai enregistré dans mes documents Cloud, ce qui est génial car je peux y accéder où que je sois. Ainsi, par exemple, si je travaille sur un ordinateur de bureau comme je le fais actuellement, je peux me rendre à la réunion de mon client dans son bureau, par exemple, et je peux récupérer mon ordinateur portable. Je peux ouvrir Adobe XD avec le même compte. Et je peux simplement récupérer ce document depuis mon cloud et nous pouvons simplement discuter de notre mood board comme ça. Donc, si nous revenons à Adobe XD, je vais simplement le nommer Moodboard ici. Avant de poursuivre, je voudrais vous montrer mes exemples. Voici donc mon site web, web donut.net. Et comme je l'ai dit, vous pouvez acheter ces modèles si vous le souhaitez. Vous pouvez facilement les ouvrir dans Adobe XD, puis travailler dessus comme ça. Si ce n'est pas le cas, vous pouvez simplement les utiliser comme source d'inspiration. Donc, ce que nous avons ici, ce sont ces moodboards, au format A4 et au format lettre américaine ici. Et vous les obtenez dans Adobe XD dans des fichiers Photoshop. Si certains de ces produits sont des fichiers Photoshop, vous pouvez facilement les ouvrir dans Adobe XD car ils ont été créés par la même entreprise. Adobe possède donc à la fois Photoshop et XD, et ces fichiers fonctionneront parfaitement dans Photoshop et XD. Si nous revenons ici, vous pouvez voir toutes ces différentes mises en page pour les images et les quatre couleurs. Vous pouvez facilement échanger ces images contre des logos, par exemple, et vous pouvez voir qu' elles sont imprimées, prêtes et toutes ces mises . Si nous revenons à celle-ci, c'est pour Instagram car elle est carrée, mais vous pouvez facilement adapter pour travailler avec n'importe quelle taille, comme vous pouvez le voir ici pour les stories ou pour les vrais, par exemple, ce sont des posts Instagram, des stories Instagram. Vous pouvez voir à quoi cela ressemble. Et si nous passons à celui-ci, c'est pour les modèles de mood board sur les réseaux sociaux. Encore une fois, c'est pareil. Et vous pouvez voir qu' ils sont carrés ou rectangulaires, ce qui est idéal pour Facebook. Par exemple, si vous utilisez les réseaux sociaux et que vous pouvez facilement les échanger, vous pouvez les modifier. Vous pouvez utiliser toutes ces différentes mises en page pour créer les vôtres. Et vous pouvez facilement les adapter et voir à quoi ils ressemblent sur les différentes pages de réseaux sociaux. Et enfin, nous avons celui-ci. Donc quatre d'entre eux, et comme je l' ai dit, je vais les relier tous dans le fichier PDF. Vous pouvez simplement, si vous voulez cliquer sur le lien correspondant à chacun d'entre eux, vous pouvez facilement y accéder si vous le souhaitez. Si ce n'est pas le cas, comme je l'ai dit, vous pouvez simplement vous en inspirer. Donc, si nous revenons ici, vous pouvez voir à quoi ressemble celui-ci. Une fois de plus, il est prêt à être imprimé. Vous pouvez voir certains de ces éléments de présentation tels que les différents logos, différentes couleurs, les différentes images, et vous pouvez voir le résultat ici. Maintenant, vous pouvez l'utiliser si vous voulez facilement vous faire gagner beaucoup de temps, sinon, comme je l'ai dit, ils sont parfaits pour vous sinon, comme je l'ai dit, inspirer. Vous pouvez vous inspirer pour savoir où placer tous ces différents éléments. Et si ce n'est pas le cas, vous pouvez simplement créer vôtre en fonction du le vôtre en fonction du projet sur lequel vous travaillez actuellement. Comme il l'a dit dans l'une des vidéos précédentes, selon la taille du projet, le créneau dans lequel se trouve votre projet, celui dans lequel se trouve votre client, vous allez investir plus ou moins de temps. Et cette partie des projets ne devrait pas prendre beaucoup de temps. Cela devrait être très simple et rapide. Cela ne devrait pas vous prendre plus d'une journée, quelle soit la taille de l'entreprise, peu importe la taille du projet, que soit le créneau dans lequel se trouve votre client. Il suffit donc d'y réfléchir. Ne passez pas trop de temps sur les mood boards car ils sont là simplement pour déterminer la pâte orale, le style, le ton du projet. Et puis, lorsque vous commencerez à concevoir, vous allez investir la majorité de votre temps dans ces changements particuliers. Donc, si nous jetons un coup d'œil en arrière dans Adobe XD, voici à quoi ressemble notre document, et je peux simplement le fausser ainsi, par exemple si nous voulons obtenir un résultat un peu plus proche de quatre, comme je l'ai dit, vous pouvez facilement saisir les valeurs correctes ici si c'est ce que vous souhaitez. Commençons donc par les images car j'ai préparé quelques images. Je veux simplement créer un rectangle et je peux utiliser une grille de répétition si je veux obtenir un aspect comme celui-ci, et je peux choisir de ressembler à ceci, par exemple, alors vous pouvez simplement dissocier la mienne, double- cliquez sur l'un d'entre eux et ramenez-le simplement ici. Par exemple, je peux facilement le redimensionner. Et cela n'a pas besoin d'être parfait si vous ne voulez pas simplement l'adapter comme ça pour créer un cercle, par exemple, ou un élément comme celui-ci, ils peuvent se chevaucher, vous pouvez inclure différentes ombres. Donc, par exemple, comme ça. Donc 5520, disons et ramenons cette ombre à huit, par exemple quelque chose comme ça. Ce que je vais faire, c'est sélectionner tous mes éléments comme ceci. Je vais supprimer la bordure et inclure quelque chose comme le DDT, qui est d'une belle couleur gris clair. Je pourrais peut-être le réduire un peu à quelque chose comme ça. Et par exemple, je peux en parler ici. Je peux le positionner ici. Je peux continuer avec le bouton droit de la souris et je peux copier l'apparence avec le bouton droit de la souris et coller l'apparence afin de pouvoir coller la même ombre. Mais je vais simplement réduire le rayon d'angle à zéro. Et peut-être que je peux facilement insérer cette image. Peut-être que je pourrais étendre celui-ci un peu à quelque chose comme ça. Je peux peut-être étendre cela ici. Comme vous pouvez le constater, il s'agit clairement une variation différente des exemples qui vous sont présentés. Donc, si je reviens à ces exemples, vous pouvez voir que ces images sont vraiment très droites. Ils sont facilement inclus dans les os ici. Et vous pouvez voir toutes ces différentes couleurs positionnées ici. Vous pouvez voir différents textes, vous pouvez voir différentes images. Mais dans notre exemple, tout est partout. Je le fais juste pour vous montrer que vous pouvez également adopter cette approche. Encore une fois, selon le projet, selon le créneau. Parce que vos entreprises clientes n' apprécieront pas ce style que je crée actuellement dans Adobe XD. Mais vos clients qui aiment utiliser un style amusant et ludique apprécieront vraiment ce type de design. Donc, si nous revenons à Adobe XD je vais vous le montrer ici. Nous allons donc simplement nous positionner ici. Peut-être que quelque part ici, les analystes utilisent Control D. Je vais le dupliquer et le positionner approximativement ici, par exemple, et peut-être quelque part par ici. Et peut-être que je peux utiliser la même distance de 52 dans ce cas, peut-être que je peux le faire. Et je pourrais peut-être changer la couleur derrière mon portable pour que tu puisses le voir. Je peux donc changer la couleur pour une couleur un peu plus foncée parce que nous allons utiliser cet échantillon de couleur pour nos couleurs. Je peux donc réduire la taille à ici, et je peux à nouveau utiliser la grille de répétition pour extraire certaines couleurs, par exemple quelque chose comme ça, peut-être dissocier la migration. Et je pourrais peut-être le situer un peu ici. Je pourrais peut-être l'augmenter comme ça. Et peut-être pourriez-vous en utiliser un de plus. Donc Control D. Je peux le réduire légèrement et peut-être le positionner ici. Maintenant que nous avons tous ces éléments, ce qui manque peut-être, c' est une certaine typographie. Je peux donc appuyer sur T et taper, par exemple manière ludique. Ceci et je peux par exemple utiliser quelque chose comme Open Sans. Dans ce cas, je pourrais peut-être utiliser un peu gras et je pourrais l'ajuster à 36, peut-être juste pour que vous puissiez le voir. Tellement joueur. Contrôle D, je peux par exemple taper. Control D, quelque chose comme l'amitié. Contrôle D, je peux le mettre ici, café. Et disons Control D. Relaxation. On y va. Voici notre mood board préparé. Ce que je vais faire ensuite, c'est simplement apporter mes images. J'ai déjà quelques images que j'ai préparées juste pour cette démonstration. Mais vous pouvez continuer et utiliser les images de vos clients, ou vous pouvez utiliser l'un des sites Web dont nous avons parlé, ou encore mieux Envato Elements car ils contiennent littéralement tout. Ce que je vais faire, c'est glisser-déposer une image ici. Juste pour le peupler. Je vais aller le déposer ici. Au fait, vous pouvez utiliser la grille de répétition lorsque vous l'avez créée, vous pouvez simplement glisser-déposer la première image qui sera remplie avec toutes vos images. Ensuite, vous pourrez effectuer tous les changements que j' ai effectués dans ce cas. Mais j'aime bien le faire comme ça. Ou peut-être que je peux le placer ici parce que c'est un café. Je vais le placer ici. Je vais peut-être placer cette image ici. Double-cliquez, déplacez-le comme ceci. Et voyons voir, peut-être que je peux positionner cette image ici comme ça. Cela ne fonctionne pas pour notre exemple. Donc, ce que je vais faire, c'est peut-être glisser-déposer, disons cette image comme celle-ci. Et je pense que c'est bien mieux. Ce que je vais faire ensuite, c'est simplement échantillonner quelques couleurs. Mais avant de le faire, je peux peut-être trouver une autre image qui correspondra, eh bien. Parce que je n'ai préparé aucun logo ici. Mais par exemple, je peux peut-être cliquer ici et utiliser l'un d'entre eux. Voyons donc ce que c'est. Logo de l'interface utilisateur. Donc je pense que maintenant, parce que vous pouvez utiliser ces plug-ins et extensions pour le faire facilement. Comme je l'ai dit, vous pouvez soit extraire des images de votre client, de votre ordinateur, d' Envato Elements, par exemple, soit de l'un de ces plugins. Mais disons UI Faces. Et je veux inclure dans Unsplash, je veux utiliser, disons, des filtres masculins et féminins. Et je vais cliquer sur Appliquer au hasard. Et il va choisir une image et elle va s'appliquer de manière aléatoire à cet espace réservé à l'image en particulier. Comme vous pouvez le voir, il a positionné celui-ci. Si c'est quelque chose que tu veux, très bien. Mais revenons à notre dossier et voyons voir. Ce que j'aimerais faire, c'est apporter celui-ci parce que c'est un café. Et je peux double-cliquer positionner ici parce que le café devrait vraiment être au centre de ce design en particulier. Enfin, ce que je veux faire c'est échantillonner quelques couleurs. Donc, ce que j'aimerais faire, c'est passer du plus clair au plus foncé. C'est plus facile, juste dans mon cas, mais tu peux faire l' inverse comme tu veux. Donc pour celui-ci, je peux simplement cliquer ici et, par exemple sélectionner celui-ci. Et je peux cliquer ici et peut-être commencer par, je ne sais pas. Allons-y avec celui-ci. Peut-être. Je peux cliquer ici et essayer l'un d'entre eux. Ensuite, je pourrai passer à mes couleurs foncées comme celle-ci. Ce sera vraiment génial si votre client possède déjà des meubles, par exemple s'il vous envoie des images de son café sur place. Vous pouvez donc facilement insérer ces images, échantillonner les couleurs de ces images en particulier et les présenter facilement sur ce mood board. Alors on y va. Comme je l'ai dit, vous pouvez aller très en profondeur. Vous pouvez vraiment entrer dans de nombreux détails. Ou vous pouvez simplement créer quelque chose comme ça qui est rapide, qui est nettoyé juste pour montrer à votre client quelles sont les possibilités de ce projet en particulier. Mais vous pouvez aussi simplement sélectionner ces couleurs. Sautez ici, cliquez ici pour les ajouter à vos couleurs. Et par exemple, si vous devez changer la couleur de ce texte, je peux simplement cliquer ici, par exemple, et je peux facilement changer et appliquer différentes couleurs. Si vous voulez obtenir ce look encore plus ludique, vous pouvez vous retrouver avec quelque chose comme ça. Si c'est quelque chose que votre client appréciera. Si c'est leur créneau, si c'est quelque chose qu'ils aiment, elle ira de l'avant. Mais si c'est un peu plus corporatif, vous pouvez peut-être vous lancer dans Inexploré. Je vais m'organiser comme je vous l'ai montré dans ces moodboards que nous avons créés. Enfin, ce que je veux vous montrer, c'est que vous pouvez inclure certains éléments de fond. Donc, par exemple, je peux le dessiner, le faire glisser et créer un rectangle comme celui-ci. Je peux créer une couleur comme celle-ci. Je peux le positionner ici. Et si je n'aime pas la couleur, je peux facilement l'échanger et changer pour quelque chose comme ça. Juste pour que mes images ressortent un peu. Et d'inclure peut-être ces éléments ludiques dans le fait que votre client pour les jambes. Et vous pouvez obtenir un tel résultat. C'est tout pour cette vidéo. Dans la vidéo suivante, je vais vous montrer comment partager ce mood board avec votre client. Si vous souhaitez obtenir des commentaires en ligne ou non, vous pouvez facilement les imprimer. Et je vais vous montrer comment exporter pour l'impression depuis Adobe XD, à quoi ils ressemblent et ce que vous pouvez réellement en faire. Alors je t'y verrai. 105. Partagez ou exporter votre tableau d'ambiance: Dans cette vidéo, je vais vous montrer quelques paramètres que vous pouvez utiliser pour exporter votre moodboard et votre police, puis les imprimer. Et je peux également vous montrer ce que vous pouvez faire pour partager ce mood board en ligne avec votre client et obtenir des commentaires de cette façon. Donc, si nous revenons à Adobe XD, voici notre mood board que nous avons créé. Ce que vous pouvez faire, c'est simplement le partager comme ça. Vous pouvez donc partager ce tableau d'art particulier que nous avons créé avec votre client et vous pouvez simplement partager celui-ci. Vous pouvez également cliquer ici pour accéder à l'onglet Partager. Cliquez sur Générer un lien sur le bouton bleu, qui apparaîtra juste ici. Vous pouvez copier ce lien et le partager avec votre client. Maintenant, ce lien va vous permettre de recueillir des commentaires et votre client pourra laisser vos commentaires sur ce mood board en particulier s'il est votre client pourra laisser vos commentaires sur ce mood board en particulier s'il est loin de vous , par exemple excellent moyen de communiquer avec des clients qui ne sont pas dans votre région. Vous pouvez donc simplement partager ce lien avec eux. Ils n'ont pas besoin d' avoir un compte Adobe, aucun compte d'ailleurs. Ils peuvent simplement accéder à ce lien et vous laisser des commentaires. Vous pouvez parcourir mes autres cours sur la conception de l'interface utilisateur UX pour voir cela en action et pour voir ce processus de partage en action. Parce que ça va vraiment en profondeur et qu'on peut vraiment pointer les spins. Et ils peuvent laisser certains commentaires sur certaines parties de votre conception, etc. Plus tard, lorsque vous commencerez à créer votre design dans Adobe XD, par exemple, vous pourrez développer ce fichier existant afin d'ajouter des wireframes, vous pourrez ajouter un design. Vous allez faire du prototypage. Vous pouvez ajouter des guides de style, vous pouvez accéder à tout ce qui se trouve dans ce fichier. Votre lien de partage va donc évidemment augmenter. Assurez-vous d' utiliser la version gratuite d'Adobe XD pour partager un seul design avec votre client, car c'est la limite du forfait gratuit. Si vous avez un plan premium et un plan premium, comme abonnement Adobe XD Creative Cloud ou un plan Adobe XD Premium, vous n'avez pas cette limite. Mais si vous utilisez la version gratuite, vous êtes limité à un seul lien que vous pouvez partager avec votre client. Donc, encore une fois, si cela vous intéresse, n'oubliez pas de consulter mes autres cours, car ces cours peuvent vraiment être approfondis. Et je crois que dans l'un de mes cours précédents, il y avait environ 3 heures de session. Nous trouverons ici des informations sur les paramètres de partage d'Adobe XD, car vous pouvez partager pour les clients, vous pouvez partager pour les développeurs, vous pouvez partager votre présentation ou vous pouvez personnaliser partage et ajustez tous ces différents paramètres à l'intérieur de celui-ci. Je n'ai donc pas le temps de suivre ce cours en particulier et je ne veux pas vraiment vous ennuyer parce que nous avons juste des mood boards. Mais lorsque vous commencez à vous développer, c'est vraiment essentiel pour comprendre ce que vous devez faire pour partager avec vos clients. La prochaine chose que nous pouvons faire est de l'exporter. Donc, si nous revenons ici, je peux accéder à Fichier, Enregistrer sous et l'enregistrer comme ça. Ou je peux simplement appuyer sur Control E sur mon tableau d'art et je peux simplement l'exporter comme ceci. Je peux donc utiliser le PNG, le SVG, PDF et le JPEG. Vous pouvez définir la destination ici. Il s'agit donc de la sortie vers laquelle votre fichier sera transféré une fois qu'il sera enregistré. Donc, ce que je vais faire, c'est appuyer sur JPEG, sur Exporter, puis sur Control E une fois de plus. Puis changez-le en PDF. Et je vais l' exporter une fois de plus. raison pour laquelle je fais cela est que je veux simplement avoir la possibilité d'imprimer à la fois des fichiers JPEG et PDF et simplement comparer avec quel type d'élément il fonctionne le mieux. Ainsi, par exemple, dans certains cas, les PDF sont de meilleure qualité. Dans d'autres cas, les fichiers JPEG présentent une plus grande égalité. Donc, ce que je recommande vraiment, c'est d'exporter Bolt et de voir où chacun d' eux va vous mener. Je vais donc l' imprimer maintenant, puis vous montrer à quoi il ressemble et ce que vous pouvez faire avec ces versions imprimées. Je vais maintenant vous montrer à quoi il ressemble imprimé. Nous avons donc ce fichier Adobe XD, et vous l'avez imprimé ici. Et vous pouvez vous contenter de cette version imprimée utilisant simplement votre stylo et votre papier pour contacter votre client et discuter des solutions possibles, des changements possibles. Donc, si vous les rencontrez chez eux, à leur bureau, par exemple, ils pourraient dire qu'il fait trop noir. Il s'agit par exemple de la clé, du monde clé peut-être qu'ils souhaitent utiliser dans leur copie, disons. Ou si c'est quelque chose qu'ils s'efforcent d'atteindre. Vous pouvez donc vraiment discuter avec eux de tous ces différents sujets, toutes ces différentes solutions que vous avez créées ici et les imprimer ici. Ainsi, par exemple, vous pouvez dire que ces images ne fonctionnent pas. Et ils veulent en voir davantage. Par exemple, nous n'avons inclus aucune personne ici. Peut-être plus de monde. Des images. Plus de ces modes de café, par exemple quelque chose comme ça. Vous avez donc l'idée, vous allez discuter avec eux de tous ces changements, de toutes ces images différentes, de toutes ces couleurs. Et lorsque vous êtes d'accord avec eux, par exemple ici, nous n'avons inclus qu'une seule police. Mais peut-être que si vous incluez plusieurs polices différentes dans votre moodboard, ils vont peut-être prendre celle-ci et vous dire «  allez-y avec celle-ci ». Et si vous avez choisi plusieurs polices avec plusieurs couleurs, ils diront peut-être que oui, cette police avec cette couleur, par exemple fonctionnera très bien. Dans notre cas. Vous remarquerez qu' une petite équipe, une tendance se développe une fois que vous aurez commencé à explorer cette question, une fois que vous aurez commencé à discuter avec vos clients, j'ai volontairement laissé ou un espace blanc autour de tous mes des images , de toutes mes couleurs, juste pour que je puisse facilement les écrire. Tu n'es pas obligée de faire ça. Vous pouvez facilement changer de n, par exemple vous pouvez appeler cette image par le numéro 1234. Et de l'autre côté, vous pouvez le retourner, par exemple sur première image, vous pouvez dire « bien ». Image 3, par exemple pas belle ou trop sombre ou ce que vous voulez obtenir. Comme référence. C'est juste pour vous aider lorsque vous commencez à développer ce design, lorsque vous commencez à développer ce ton. Et comme je l'ai dit, c' est vraiment génial parce que vous pouvez l' imprimer, le donner à votre client. Ils peuvent laisser ces notes sur place et ils peuvent facilement se faire une idée de l' évolution de ce projet dans les deux sens. Si vous le pouvez, vous pouvez apporter ces modifications avec les éléments dont nous venons de parler. Et tu peux l' imprimer une dernière fois. Vous pouvez retourner voir votre client s'il se trouve quelque part près de chez vous, puis vous pouvez vous asseoir avec lui une fois de plus et lui demander simplement c'est la bonne direction maintenant ? Est-ce à cela que vous voulez que cela ressemble davantage dans cette direction ? Aimez-vous davantage ce style et toutes ces différentes questions. Donc, s'ils disent oui, vous pouvez sauter ici et vous pouvez facilement les prendre, par exemple comme ça. Et s'ils n'aiment pas celui-ci, peut-être que tu peux faire comme ça. Comme je l'ai dit, ce n'est qu'un exemple rapide de ce que vous pouvez faire avec ces composants en plusieurs parties. Assurez-vous donc de comprendre que ce processus de mood board prendra temps et que, parfois, sur certains projets, il vous faudra par exemple 15 minutes pour créer, puis peut-être 30 minutes pour en discuter avec vos clients sur certains projets, il vous faudra une journée pour créer en deux à trois jours pour discuter avec votre client, afin de déterminer le style général, par exemple une direction neuronale du projet lui-même. Assurez-vous donc de le calculer dans votre budget, car cela fait partie du processus de conception, vous devriez facturer les moodboards. Assurez-vous donc de bien comprendre que lorsque vous commencez à travailler, comme je l'ai dit, veillez à vous adapter au format de votre papier. Donc, par exemple, c'est A4. Si vous travaillez avec le format de lettre américain , par exemple , vous pouvez l'ajuster à cette taille particulière dans Adobe XD ici. Comme je l'ai dit, vous pouvez sauter ici, ajuster les pixels selon vos besoins, les ajuster comme vous le souhaitez. Vous pouvez le retourner si vous le souhaitez et vous en assurer lorsque vous l'imprimez. Ne vous inquiétez pas pour 300 DPI car comme je l'ai dit, Adobe XD est un outil de type vectoriel. Alors c'est tout. Assurez-vous de le tester, assurez-vous de l'essayer, assurez-vous de parler à vos clients. Parce que, comme je l'ai dit à plusieurs reprises tout au long de ce cours, cette partie du processus de conception consiste à déterminer le style général, l'orientation générale, le ton de votre rôle. Assurez-vous donc d'en tenir compte dans vos directives de conception. 106. AFFECTATION de l'article 13: Votre mission pour cette section est de créer vos propres moodboards. Vous pouvez n'en utiliser qu' un que vous pouvez créer, vous pouvez en créer cinq autant que vous le souhaitez et autant de temps que vous devez réellement investir dans un seul. Mais essayez simplement de commencer par une et essayez simplement de choisir des couleurs aléatoires parmi des images aléatoires que vous aimez vraiment. Et essayez de les combiner en quelque chose utile que vous pourrez réellement utiliser dans votre projet. Essayez de vous entraîner de cette façon et plus tard, si vous voulez l' essayer avec de vrais projets et de vrais clients, assurez-vous de prendre leur logo, de choisir des couleurs. Assurez-vous de prendre leurs images préférées, celles existantes ou celles qu'ils aiment réellement, essayez de vous inspirer différemment des différents sites Web qu'ils ont fournis à différents sites Web qu'ils ont Design Brain, par exemple et j'ai juste essayé de tout combiner dans un mood board utilisable. 107. Kits d'IU: Les kits d'interface utilisateur peuvent être extrêmement importants et extrêmement utiles dans votre processus de conception, car vous pouvez réutiliser certains de ces éléments encore et encore. Dans cette section du cours, nous allons parler de ce qu'est un kit d'interface utilisateur, comment créer le vôtre à l'aide d'Adobe XD et comment réutiliser certains de ces éléments dans vos conceptions. Commençons donc. 108. Qu'est-ce que les kits UI ?: Les kits d'interface utilisateur sont essentiellement une collection de différents éléments que vous pouvez utiliser pour vos projets de conception d'interface utilisateur. Ces projets peuvent aller de projets de conception mobile à des projets de conception de sites Web en passant des projets de conception de produits tels que des tableaux et des applications Web et des projets de cette nature. Ils peuvent être de différents types de fichiers, par exemple Photoshop, Sketch, Illustrator, Figma, Adobe XD. Et dans ce cours, nous allons nous concentrer sur Adobe XD. Il peut également s'agir d' images de largeur et sans images. Et nous allons explorer certaines différences entre ces deux types. Pourquoi l'un est-il meilleur que l' autre et l'inverse ? Et vous allez principalement utiliser ces kits d'interface utilisateur pour accélérer votre flux de travail, car vous allez effectuer ces tâches répétitives, en particulier dans la conception de l'interface utilisateur, par exemple vous allez créer des navigations pour tous vos projets. Ainsi, au lieu de recréer cette navigation en soi pour chaque projet en particulier, vous allez simplement créer un type de navigation, puis simplement développer votre idée à partir d'un seul type de navigation, que je vais également vous montrer plus tard dans ce cours. Donc, en gros, vous allez accélérer votre flux prochaine fois que vous lancerez un projet de conception , car tous ces différents types de fichiers seront enregistrés sur votre ordinateur. Et puis, en gros, vous serez en mesure d'utiliser et de réutiliser tous ces différents éléments pour tous vos différents projets. Maintenant que nous allons travailler dans Adobe XD, nous allons travailler avec composants et vous allez pouvoir réutiliser ces composants pour changer les couleurs, changer les types de fichiers, pour changez la structure, pour changer l'ombre de fond, par exemple pour changer les couleurs et bien plus encore avec vos enfants, vous allez pouvoir vous adapter à différents projets. Encore une fois, par exemple, si vous créez dans Adobe XD en tant que tel, vous pouvez créer des composants, par exemple la conception de sites Web en plein écran, disons 1920 x 1080, puis vous pouvez descendre et créer redimensionnez les tailles réactives pour vos projets de conception réactive. en va de même pour les designs mobiles, par exemple vous créez votre kit d'interface utilisateur pour les applications Web iOS. Ensuite, vous souhaitez créer ce même kit d'interface utilisateur pour fonctionner sur Android. Ce sera beaucoup plus simple si vous avez déjà préparé les types de fichiers et les fichiers. Ensuite, en repartant de zéro, cela vous permettra facturer davantage pour vos projets car vous serez en mesure de livrer plus rapidement. Parce que vous êtes prêt avec ces kits d'interface utilisateur et que vous préparez tous ces éléments pour vos futurs projets. Dans la vidéo suivante, nous allons donc explorer ces différences entre les kits d'interface utilisateur avec images et sans images. Quels sont les avantages et les inconvénients de chacun d'entre eux ? Et je te verrai dans la prochaine vidéo. 109. Types de kits of: Dans cette vidéo, nous allons explorer principales différences entre les kits d' interface utilisateur avec images et sans images. Quels sont les principaux inconvénients et arguments de vente de chacun d'entre eux ? Commençons donc. J'ai donc ouvert un UI Eight, un site Web sur lequel vous pouvez acheter ces kits d'interface utilisateur. Et nous parlerons de ces sites Web un peu plus tard dans cette vidéo en particulier Je veux juste me concentrer sur les différences entre les kits d'interface utilisateur avec images et sans images. À quoi peut servir chacun d'entre eux ? Et ce que vous pouvez apprendre sur la création ces kits d'interface utilisateur pour vos différents types de projets. Ce que nous avons ici, c'est ce kit d'interface utilisateur quantique, qui est, comme on dit, une énorme bibliothèque de cartes pour les services Web. Et comme vous pouvez le voir, ils ont créé ici même tous ces différents composants, qui sont essentiellement des modèles ressemblant à des sites Web que vous pouvez utiliser et réutiliser pour vos futurs projets. Alors pourquoi est-ce utile si je clique avec le bouton droit de la souris, que je l' ouvre dans le nouvel onglet et que je zoome pour que vous puissiez voir un peu de ces détails. Vous pouvez voir qu' ici, nous avons par exemple ce Sony Dual Shock pour manette noire, ou nous avons le prix, nous avons cette icône. Donc, en gros, ce que vous pouvez faire avec ce design, c'est que vous pouvez tout simplement travailler avec ce design exact. Il suffit de créer un composant, par exemple pour ce contrôleur à double affichage. Et supposons que vous souhaitiez remplacer cet élément interne du composant, par exemple pour ajouter un produit différent, disons que vous souhaitiez vendre l'iPhone, alors vous pouvez créer une composante d' endettement de cette carte en particulier. Vous pouvez simplement glisser-déposer l'image de votre iPhone. Vous pouvez glisser-déposer les informations de l'iPhone que vous avez en vente. Et Dario, tu n'as pas besoin de créer la carte une fois de plus, tu n'as pas à ajouter d'ombre. Vous n'êtes pas obligé de choisir la police spécifique. Vous n'êtes pas obligé de choisir la mise en page typographique, vous n'avez pas à choisir la hiérarchie. Tout cela est fait pour vous dans le projet précédent par vous-même. Et maintenant, vous pouvez simplement utiliser et réutiliser exactement ce même composant dans vos futurs projets. Je vais expliquer cela un peu plus tard dans la leçon, en particulier sur Adobe XD, comment vous pouvez redimensionner ces composants, comment nous pouvons les modifier, les utiliser et les réutiliser, etc. Mais dans cet exemple, comme je l'ai dit, nous voulons nous concentrer sur les kits d'interface utilisateur avec et sans images et sur ce que vous pouvez utiliser chacun de ces quatre. Donc, pour en revenir à cet exemple, vous pouvez voir combien ils en ont. Ils ont cette voiture de vente, par exemple ils ont cette charge plus de composants. Donc, en gros, il est extrêmement important de créer tous ces composants est extrêmement important de créer dans un kit d'interface utilisateur, car vous allez utiliser et les réutiliser pour chaque projet. Ainsi, dans les navigations, les pieds de page, les fiches de blog, ce sont des articles de boutique, etc. Tout cela vous sera donc très utile pour vos futurs projets. Si nous examinons celui-ci, appelé plateforme, notre kit filaire. Alors, quelle est la différence entre celui-ci et celui-ci ? Fondamentalement, les kits filaires sont ces kits d'interface utilisateur sans aucune image. Et vous pouvez les trouver en ligne ou où que vous recherchiez. Et je vous recommande vivement créer ces types de wireframe via des kits d'interface utilisateur. Pourquoi ? Parce que vous pouvez toujours glisser-déposer des images aux emplacements de ces kits de wireframing. Et vous n'avez pas à vous connecter à ces gros types de fichiers car évidemment, quels sont les logiciels que vous utilisez, si vous n'avez pas d'images incluses dans vos conceptions, vos types de fichiers seront nombreux plus petit. Il sera beaucoup plus facile de travailler avec ces fichiers. Ensuite, si vous les avez avec des images, il sera également beaucoup plus simple de montrer ces enfants filaires à vos clients et de leur dire simplement, imaginez inclure des images à l'intérieur, à l' intérieur de l'image espace réservé, par exemple vous pouvez changer la couleur. Supposons que vous puissiez parler à votre client et lui communiquer cette idée, par exemple que cette image sera bleue, comme dans ce cas, ici, pour qu'il sache, accord. Donc cet arrière-plan sera simplement une image. Il leur sera donc beaucoup plus simple de comprendre et visualiser dans leur tête que l'image va y être envoyée. Ce que vous y trouverez, c'est sera beaucoup plus simple de modifier et d'apporter il sera beaucoup plus simple de modifier et d'apporter des modifications à ces kits filaires qu'aux kits d'interface utilisateur. Parce que les kits d'interface utilisateur contenant des images seront beaucoup plus difficiles à modifier car vous devrez toujours suivre une sorte de structure d'image. Vous allez toujours suivre une sorte de ton d'image. Peut-être allez-vous échantillonner vos couleurs à partir de vos images. Il est donc préférable d'utiliser beaucoup plus simplement les couleurs et d'utiliser tous ces éléments provenant de Wireframe Kids, car vous n' avez pas d'images en place. Plus tard, lorsque vous déterminerez la structure avec votre client au cours de votre travail sur ce projet, vous pourrez simplement glisser-déposer des images à l'intérieur, puis ajuster légèrement le design. Par exemple, incluez l' ombre déroulante ici et là, juste pour faire ressortir le bouton, par exemple faire ressortir le bouton, la navigation, l'image du héros ou les textes. Peut-être devriez-vous changer la couleur du texte de foncé à clair et inversement en fonction de l'image de votre choix. Par conséquent, les enfants filaires sont beaucoup plus utiles à mon avis. Et puis les kits d' interface utilisateur parce que, comme je l'ai dit, les kits d'interface utilisateur suivent la structure des images et s'adaptent donc à cette structure et à ces images, tandis que les enfants filaires utilisent simplement la structure elle-même et ne s'adaptent pas à n'importe quoi. Vous pouvez simplement glisser-déposer des images à l'intérieur ultérieurement. Enfin, il y a encore une chose que je voudrais mentionner, à les organigrammes. Les organigrammes sont disponibles en différents types de tailles de fichiers, différents types d'éléments. Et c'est ce que l'on appelle l'organigramme mobile du schéma. Et je pourrai vous montrer l'un de mes produits organigrammes un peu plus tard, car je dois le faire, et je vais vous montrer comment je les ai créés et comment vous pouvez les utiliser pour communiquer des idées à vos clients. Revenons à celui-ci, parce que vous ne pouvez pas le voir. Ici. Je l'ouvre dans un nouvel onglet, et vous pouvez voir ici qu' ils n'utilisent pas de vrais textes. Ils n'utilisent pas d'images réelles. Ils utilisent simplement ces espaces réservés, par exemple ce sera un paragraphe, ce sera un sous-titre. Voici l'image, voici le bouton, voici la pagination, vous pouvez voir qu'ils utilisent icônes pour la navigation et la recherche. Utilisation de ces icônes sociales pour Facebook et Twitter. Et cela vous permettra communiquer vos idées beaucoup plus rapidement à votre client. Car encore une fois, comme pour les kits de wireframing et les kits d'interface utilisateur, vous ne perdez pas votre temps à choisir ces images, choisir ces couleurs. Vous créez simplement des mises en page que vous pouvez communiquer et partager avec votre client. Une fois ces couches approuvées, vous pouvez travailler sur les détails. C'est pourquoi il est si important de créer ces kits filaires, ces kits d' interface utilisateur et ces organigrammes . Vous pouvez donc simplement imaginer que vous pouvez commencer à travailler sur un organigramme, par exemple pour votre client. Ensuite, une fois ce projet terminé, vous pouvez simplement réutiliser cet organigramme en termes de création d'un kit d'interface utilisateur pour votre prochain projet, vous pouvez simplement créer des composants pour les formes, les couleurs, les polices, pour images, pour les boutons, etc. Et vous pouvez simplement utiliser et réutiliser ces composants dans vos futurs projets, ce qui vous fera gagner beaucoup de temps et vous aidera à poursuivre vos projets plus rapide vous permettra de facturer beaucoup plus car vous passerez beaucoup moins de temps chaque projet car vous avez déjà créé tous ces composants. 110. Quels composants sont importants: En matière de structure, ces composants sont vraiment importants et moins importants. C'est donc à vous de décider quels types de composants vous souhaitez utiliser. Supposons donc que vous travaillez tout le temps sur des projets de blog. Il suffit de jeter un coup d'œil à vos travaux précédents et comprendre quels types de composants vous avez utilisés dans le passé. Évidemment, une sorte de barre de recherche ou une sorte de pied de page de navigation, peut-être même des curseurs ici ou des images, des portes sont vraiment obligatoires car sont des types d'éléments qui vont consacrez tout votre temps à vos projets. Mais selon le créneau, vous êtes indépendant des projets pour lesquels vous travaillerez auparavant et sur lesquels vous travaillerez auparavant, c'est vous qui déterminerez les types de ces éléments sur lesquels vous allez travailler à utiliser dans vos kits d'interface utilisateur. Je vais donc vous montrer les exemples précédents que je vous ai montrés. Et vous pouvez déterminer, en fonction de la dose , les types d'éléments que vous pouvez choisir. Et dans les prochaines vidéos de ce cours, je vais vous montrer quels types d'éléments ont utilisés dans le passé et ce que vous pouvez en tirer. Donc, pour en revenir à ces exemples que je vous ai montrés précédemment, vous pouvez voir qu'ils proposent le commerce électronique ici. Et si je fais défiler la page jusqu'ici, pour que nous puissions voir le commerce électronique. Et si je fais défiler la page vers le bas, vous pouvez voir le tableau de bord. Donc, si vous travaillez sur des projets qui nécessitent tous ces éléments, vous pouvez imaginer à quel point tout cela prend du temps. Vous pouvez donc les créer une seule fois et les réutiliser simplement en changeant les couleurs, en modifiant par exemple la position de ces différents textes, etc. Si nous faisons défiler l'écran jusqu'en bas, nous avons des cartes d'entreprise. Cela peut donc être, par exemple , un portfolio d' équipe, à propos de nous, des témoignages , des fonctionnalités, des prix, etc. Si nous faisons défiler la page vers le bas, nous pouvons voir de la musique et des cartes vidéo. sont donc peut-être pas aussi importants que les précédents, et ils peuvent varier d'un projet à l'autre. Cartes d'actualités et de magazines. Encore une fois, si vous travaillez constamment sur des projets de blog, ceux-ci sont vraiment cruciaux. Ainsi, une fois que vous les aurez créés, il sera beaucoup plus simple de les réutiliser et de les réutiliser pour de futurs projets. Et vous pouvez le voir ici, nous avons donc différents types de navigation. Nous avons ces cartes sociales qui, encore une fois, selon le projet sur lequel vous travaillez, peuvent être importantes ou moins importantes. Nous avons des éléments de base et des cartes de style. Nous avons donc des éléments de base tels que cette navigation, ces pieds de page, ces miettes. Nous avons ces différentes icônes, chargeurs, curseurs, boutons, couleurs. Et enfin, vous avez les exemples de pages de ce kit d'interface utilisateur quantique particulier. Et vous pouvez consulter ces pages pour vous inspirer et voir où ils ont utilisé tous ces différents éléments. Si nous examinons la plateforme et que nous avons des en-têtes, nous avons du contenu. Donc, encore une fois, des blocs de contenu, des curseurs, des grilles simples. Donc, en gros, des images dans une grille à gauche et à droite. Nous avons cet homme pour Grid. Nous avons des fonctionnalités Futures Left, non ? Par exemple, avec une maquette de téléphone portable, avec une maquette de site Web, désolé, maquette d' ordinateur portable avec maquette de tablette. Nous avons à nouveau des portefeuilles différents, selon l'endroit sur lequel vous travaillez, la nature moment où vous souhaitez utiliser l'un ou l'autre. Nous avons le commerce électronique, particulièrement important si vous travaillez avec des sites Web de commerce électronique. Nous avons des cartes bloguées. Et évidemment, vous pouvez utiliser et réutiliser ces différents composants, par exemple ces blocs-cartes, vous n'êtes pas obligé les utiliser pour les sites Web de blog. Vous pouvez les utiliser par exemple pour les sites Web de commerce électronique, c'est la beauté de ces kits d'interface utilisateur. Vous pouvez simplement réutiliser ces cartes dans vos futurs projets et les adapter simplement pour qu'elles conviennent à ce projet en particulier. Nous pouvons ainsi avoir des témoignages d' équipes, des prix stables, des appels à l'action. Ces tableaux de prix sont particulièrement ennuyeux à créer parce que vous avez, disons, que vous avez, disons 20 exemples différents de ces tableaux de prix en ligne et que tous ces autres exemples sont juste des variantes de ces exemples. Alors pourquoi perdriez-vous votre temps à tout recréer ? Tous ces éléments se contentent de créer par exemple cinq ou six tableaux de prix à la fois, puis de les réutiliser pour vos futurs projets vous fera gagner beaucoup de temps, en particulier avec ces détails ennuyeux où vous avez la majorité de ces différents choix, en particulier en ce qui concerne le tableau des prix. Vous avez donc des options, vous avez des prix, vous avez un plan mensuel, un plan annuel. vous faudra donc beaucoup de temps pour créer tous ces détails pour chaque projet en particulier. Par conséquent, les avoir dans un seul kit d'interface utilisateur vous fera gagner beaucoup de temps. Si nous jetons un coup d'œil ici, appelons à l'action, est particulièrement important avec toutes ces cartes promotionnelles, nous avons des forums et des contextes. Encore une fois, avec ces formulaires, combien de ces variations pouvez-vous réellement avoir ? Supposons donc que vous puissiez créer par exemple 15 ou 20 formulaires de contact. Et voilà. Vous pouvez les réutiliser pour tous vos futurs projets. Et les en-têtes et les pieds de page, en particulier, sont ennuyeux à créer à cause de la répétitivité. Et ils utilisent tous ces différents éléments. Par exemple, le logo du client sera à gauche, droite et au centre en bas. Et c'est en gros tout. Ainsi, lorsque vous commencez à créer ces kits d'interface utilisateur, vous pouvez avoir une idée des types d'éléments dont vous avez besoin pour en créer davantage. Quels types d'éléments vous devez créer de manière moins évidente, quel que soit le type de nature, dans une sorte de formulaire de contact il sera bon d'inclure. Mais en gros, une fois que vous commencez à créer, vous pouvez utiliser le formulaire de contact pour cela, à partir de ce projet. Vous pouvez utiliser le formulaire de contact de ce projet et simplement adapter et travailler pour vos futurs projets. C'est tout ce point de vue, je plaisante. C'est pourquoi je pense qu'il extrêmement utile de les avoir et de les créer. Et évidemment, la création de ce kit d' interface utilisateur ne sera pas facile. Cela ne viendra pas en premier. C'est le processus que vous allez utiliser et réutiliser tout au long de votre carrière. Vous pouvez donc supprimer certains éléments qui ne sont plus pertinents en termes de style, de fonction. Peut-être que certains éléments ne sont utilisés dans l'industrie ou plus. Vous pouvez donc simplement les supprimer et utiliser des éléments qui s'adaptent et s'adaptent simplement au kit d' interface utilisateur que vous utilisez. C'est la beauté des kits d' interface utilisateur et c'est pourquoi je les aime tant. Et je pense que tu devrais aussi commencer à les explorer. 111. Structure de kit d'interface utilisateur dans Adobe Xd: Dans cette vidéo, je vais vous montrer quelques idées de structure pour vos kits d'interface utilisateur dans Adobe XD. Je vais vous montrer mes exemples car je crée ces interfaces utilisateur et UX depuis quatre ans maintenant. Et j'ai plus de 500 produits de design dans ma boutique en ligne, réalisés sur the.net. Je vais laisser les liens vers tout et en parlant de cela dans le PDF, vous pouvez simplement cliquer sur ces liens, les visiter et les explorer. Et si cela vous intéresse, achetez même tous ces différents produits que j'ai mentionnés que je mentionnerai à l'avenir. Une fois que nous aurons trouvé ces types de vente et ces profils sur ces sites Web, vous pourrez vendre vos designs. Mais pour l'instant, examinons la structure de ces kits d'interface utilisateur, comment ils peuvent fonctionner dans Adobe XD, et comment vous pouvez en tirer des leçons pour créer les vôtres. Donc, ce que j'ai ici, c'est le générateur de pages de destination converti, qui est le produit que nous avons créé il y a quelque temps. Et c'est le kit Wireframe, évidemment, comme vous pouvez le voir. Et si je zoome un peu plus près, vous pouvez voir ici que nous avons la navigation, les en-têtes, l' histoire, les fonctionnalités, les avantages, la promotion, les témoignages, l'équipe, les prix, etc. Et pour tout cela, nous avons plusieurs options, évidemment parce qu'il s'agit du générateur de pages de destination. Ce sont les éléments qui seront utilisés pour la majorité des pages de destination. Et il est destiné à quelqu'un qui crée ces pages de destination en permanence, car la majorité de ces entreprises créent ces pages de destination en permanence, par exemple pour leur plaisir des campagnes de démarrage, pour leurs lancements de produits, pour leurs promotions de produits, pour toutes ces campagnes, pour les publicités Facebook, pour les publicités Instagram, les publicités YouTube, etc. Les pages de destination sont donc extrêmement importantes pour cela. Ce produit particulier est conçu pour fonctionner avec les pages de destination. Donc, encore une fois, nous revenons au créneau. Quel est votre créneau et quel est type de projet sur lequel vous travaillez ? Vous allez créer des composants qui fonctionneront dans ce créneau. Si nous revenons ici, par exemple, je peux voir que c'est 1 400. Et je peux intervenir ici pour créer un nouveau tableau d'art. Et je peux sauter ici, créer celui-ci, cliquer ici et simplement l'ajuster à 1 400, comme ça pour que tous nos éléments fonctionnent. Et je vais l' étendre davantage. Donc, ce que je peux faire, c'est par exemple cliquer sur cette commande de navigation C. Cliquez ici, sur la commande V. Et je peux, par exemple, cliquer ici, contrôler C, contrôler V, et ajuster cela pour m'adapter. Je peux même les mettre à l'intérieur de la pile, puis je peux simplement les glisser-déposer à l'intérieur de la pile. Mais nous pouvons également le faire plus tard. Par exemple, je souhaite montrer ces différentes fonctionnalités. Voyons donc où sont les fonctionnalités. Les voici. Donc, par exemple, I. Je peux utiliser cette seule commande C, contrôle V. Et vous pouvez voir à quel point la création de ces sites Web est facile, disons cette position ici. Peut-être que je veux utiliser celui-ci maintenant. Positionnez-vous ici. Peut-être que je veux utiliser celui-ci ici. Comme ça. Et disons que le moment est venu de fixer les prix, mettez-le ici. Et peut-être quelque chose comme ça. Je veux convaincre encore plus les gens. Mets-le ici. Et la position n'a pas d'importance, euh, pour le moment et vous allez voir pourquoi dans une seconde. Alors mets-les ici. Et disons que maintenant que votre page de destination est terminée, vous pouvez toutes les sélectionner, appuyer sur Ctrl G pour les placer dans un groupe, puis les placer dans une pile. Il s'agit de la pile verticale et je peux mettre la distance de 150, par exemple entre elles et appuyer sur Entrée ou Retour. Et maintenant, nous avons un espace uniformément espacé entre tous nos éléments. Je peux tous les mettre en haut de la page comme ça. Et par exemple, je ne veux pas que ce soit un cinquième de ce chiffre. Je peux donc simplement ajuster celui-ci à zéro. Et tous ces autres vont en avoir 150 pour l'espacement. Vous pouvez donc voir à quel point il est simple de créer une page de destination. Vous pouvez double-cliquer ici pour le fermer ici. Et disons par exemple que la copie est prête et que vous souhaitez apporter des modifications aux images. Vous pouvez simplement glisser-déposer vos images à l'intérieur d'ici, les placer, puis simplement apporter des modifications. Par exemple, nous avons cette icône d'image ici. Je peux simplement appuyer sur Supprimer pour le supprimer. Et je peux par exemple réduire l'opacité de mon image pour la faire ressortir un peu plus. Et par exemple, je veux ajouter une image supplémentaire ici. Peut-être cette image, je voudrais ajouter quelque chose à la vidéo. Peut-être. Peut-être que cette image fonctionnera pour que vous puissiez voir à quel point il est simple de travailler avec ces différentes images. Je peux donc le sélectionner, peut-être pour obtenir 40 % d'opacité. Je peux peut-être utiliser une icône différente ici. Et peut-être que je voudrais dire que c'est, je ne sais pas, quelque chose d'un peu plus rond. Je peux donc sauter ici, taper 20 pour le rayon d' angle. Si je veux le faire, vous pouvez ajuster cela pour avoir une idée de la simplicité de la création de ces éléments. Il s'agit donc essentiellement de ma structure et de la façon dont mon équipe et moi travaillons depuis des années sur ces structures. Et je vais vous montrer structure différente pour les enfants mobiles. Et voici le kit Chetty UI. Et vous pouvez voir que nous avons des images ici. Il va évidemment être assez simple de remplacer toutes ces images. Vous allez simplement utiliser exactement la même structure. Donc, si je jette un œil ici, je voudrais peut-être ajuster ces images pour pouvoir la sélectionner et celle-ci, et peut-être sélectionner deux images différentes, les faire glisser et déposer à l'intérieur. Et je veux utiliser celui-ci, par exemple pour que vous ayez une idée de sa rapidité. Mais ce que vous pouvez également faire, c'est cliquer ici, et nous avons ici tous ces différents éléments. Maintenant, les éléments sont vraiment utiles. Nous avons ce bleu principal et je veux cliquer avec le bouton droit de la souris, cliquer sur Modifier, et peut-être le changer en rouge. suffit donc de remarquer comment cela s'applique à toutes nos différentes modifications et de l'ajuster simplement pour être lu. Je peux aussi utiliser Control Z. pour annuler cela. Nous pouvons également modifier les tailles de police et les choix de police. Nous pouvons modifier l'épaisseur des polices. Nous pouvons modifier tous ces différents éléments. Donc, ce que je peux faire, c'est appuyer sur Modifier et, par exemple je veux choisir d'autres téléphones comme Open Sans, par exemple appuyer sur Entrée. Et cette modification sera appliquée à l'ensemble de notre conception. Vous pouvez donc voir à quel point c'est facile et simple. De plus, nous pouvons avoir tous ces différents composants que nous pouvons modifier indépendamment. Vous pouvez donc voir, par exemple que nous avons ces points noirs, ici, juste ici. Donc, dans notre design et dans tout le reste, qui est noir, nous voulons le remplacer par quelque chose de sauvage, comme lire une fois de plus, par exemple pour que vous puissiez voir ce que nous avions. Cette couleur s'appliquera tout au long de la conception artistique. Et il s'appliquera là où nous l'avions au départ. C'est pourquoi tous ces composants sont extrêmement utiles. Et dans l'exemple suivant et dans la vidéo suivante, je vais vous montrer comment transformer votre design existant en UIKit, car vous n'allez pas acheter ces kits d'interface utilisateur pour chaque projet. Et je pense que c'est une bien meilleure approche, même si je vends ces kits d'interface utilisateur, c'est bien meilleure approche de commencer par un kit d'interface utilisateur haut de gamme juste pour votre structure, juste pour cet élément, juste pour quelques éléments ennuyeux, que vous pouvez ensuite réutiliser pour vos propres projets, puis pour créer votre propre kit d'interface utilisateur en utilisant ces éléments, en utilisant ces tactiques et techniques, qui fonctionnera pour votre cas d'utilisation particulier. Parce que je vais revenir au créneau une dernière fois. Parce que vous occupez par exemple une niche de voyage, les éléments qui vous ont plu dans votre projet peuvent ne pas fonctionner pour quelqu'un qui travaille dans un créneau de blog, par exemple parce qu'ils peuvent avoir besoin d'éléments différents. Dans la vidéo suivante, je vais donc vous montrer comment transformer votre projet existant en kits d'interface utilisateur. 112. Création de kit d'interface utilisateur dans Adobe Xd: Dans cette vidéo, je vais vous montrer comment transformer votre projet existant en UIKit , puis le réutiliser pour vos futurs projets. Cette approche peut être utilisée pour différents projets , petits et grands. Et vous pouvez utiliser certains éléments ou vous pouvez utiliser tous les éléments et continuer simplement à partir de là. Vous pouvez utiliser un seul type d'élément, par exemple navigation, s'il s' agit d'un élément qui se répète tout le temps dans votre projet, ou vous pouvez utiliser différents types d'éléments, par exemple les deux navigations, les images des héros, pieds de page, blog, cœurs et tous ces types d'éléments. Je vais donc montrer dans cet exemple de projets existants comment le transformer en kit d'interface utilisateur. C'est le projet que j'ai créé pour l'un de mes cours précédents. Je vais le laisser, laisser le lien vers celui-ci dans le PDF pour que vous puissiez y jeter un œil si cela vous intéresse. Tous ces éléments sont donc créés dans cette classe. Il dure donc plus de 20 heures. Et encore une fois, je vais laisser le lien dans le PDF pour que vous puissiez y accéder rapidement. Et ce que nous avons ici, ce sont différents composants pour les couleurs, les styles de personnages, tous ces composants, pour toutes ces différentes cartes, nous avons des icônes différentes, des structures différentes, n'est-ce pas ? ici. Nous avons le logo, les flèches, les cartes et bien plus encore. Donc, ce que vous pouvez faire pour cela c'est que si je clique ici, encore une fois, nous sommes au 120e au lieu de 1 400 comme nous l'avons fait la dernière fois. Donc, ce que je peux faire, c'est cliquer sur mon plan de travail pour créer un nouveau tableau d'art. Ou je peux simplement dupliquer l'existant. Quoi de mieux, ce que je peux faire c'est aller directement dans le dossier. Et puis Nouveau, désolé s' il y a un peu de retard parce que j'exécute tous ces éléments sur ma machine. Et ce fichier est assez volumineux. Je vais donc créer un nouveau fichier, et je vais simplement réutiliser certains de ces différents éléments dans mon projet. Très bien, maintenant que ce projet a été créé, je vais passer directement à la conception de ce site Web. Et je vais sauter jusqu'ici, appuyer sur Control C. Ensuite, je vais passer au projet que nous venons de créer, appuyer sur Control V, pour pouvoir simplement coller ce design. Et ce que je peux aussi faire, c'est revenir ici. Et peut-être que je pourrais en utiliser un autre. Utilisons cette seule commande C. Et je vais me lancer dans ce projet, appuyer sur la commande V. Et puis une fois que nous y serons, juste pour gagner un peu de temps, je vais En fait, éteignez-le, alors tuez-le. Et comme vous pouvez le constater, certains éléments de notre projet précédent ont déjà été collés, comme toutes ces différentes icônes. Mais nous n'avons pas de couleurs ni styles de caractères et nous pouvons les travailler séparément. Voici ce que je voulais te montrer. Je vais donc l'élargir. Et disons que je souhaite utiliser cette navigation, mais tout d'abord, utilisons la même grille. Donc, si je l'active, nous avons, voyons voir, 12 colonnes. Donc 60, 82, et je vais faire de même pour ça. Nous en avons donc 60, 82. On y va. C'est donc le même que celui-ci. Et je vais réduire l'opacité de ces lignes de grille comme ça. Disons donc que je souhaite utiliser cette navigation pour pouvoir appuyer sur Control C, la coller ici. Et ce que je peux faire, c'est le positionner ici. Et disons qu'il s' agit de notre première navigation. Passons à nos couches. Nous pouvons donc utiliser par exemple Nav one. Et ce que je peux aussi faire, c'est le dissocier. Alors, cliquons avec le bouton droit. Laisse-moi juste voir où il se trouve. Composant non lié. On y va. C'est donc le seul bout. Nous pouvons le créer pour en faire des composants locaux. Nous pouvons appuyer sur Control K si nous le voulons, et nous pouvons créer différents états à partir de celui-ci. Je peux donc cliquer ici et taper, par exemple disons gros bouton, gros btn. Et ce que je veux faire ici, c'est simplement double-cliquer à l'intérieur et étendre ce bouton pour entendre et peut-être déplacer davantage nos éléments de navigation. Disons que je veuille les aligner ici, ou peut-être mieux encore au centre comme ça. Donc, si nous examinons cet état par défaut et cet état, nous avons ces deux états distincts. Donc, ce que vous pouvez faire avec celui-ci est simplement maintenir Alt dans votre état par défaut, positionner ici aussi, je ne sais pas, disons 60, puis d'utiliser cet état. Et vous avez déjà deux types de navigations différentes. Disons donc que je souhaite en créer un autre. Nous pouvons donc revenir à l'état par défaut, qui est celui-ci, créer un nouvel état. Et par exemple, je peux mettre quelque chose comme sans texte, quelque chose comme ça. Donc, dans cet état, nous allons essentiellement entrer et supprimer notre texte, ouvrir, sélectionner notre texte, appuyer sur Supprimer. Il ne nous reste plus que notre bouton. Et nous pouvons soit développer ce bouton, laisser tel quel. Tout dépend vraiment de toi. Donc, ce que je vais faire, c'est sélectionner celui-ci, déplacer à 60 et cliquer sans texte. Alors on y va. Nos trois éléments différents et nos trois éléments de navigation différents ont trois éléments différents et nos trois éléments déjà été créés. Vous pouvez aussi les organiser, et j'aime beaucoup le faire. Donc c'est maintenant un, c'est maintenant les deux. Et ça va être Nav Three. Permettez-moi de vous donner un autre exemple afin que nous puissions revenir à celui par défaut et créer un sans bouton ou sans btn pour faire court. Donc, ce que nous allons faire, c'est essentiellement faire un point de sélection. À partir de là, nous sommes 40 et je vais sélectionner notre bouton supprimé et sélectionner tous nos éléments de navigation. Comme ça. Positionnez-les jusqu' au bord du décalage 1234. Nous sommes donc à 40 de cet avantage, comme nous le sommes avec cet avantage. Et en gros, je vais le faire encore une fois. Je vais donc maintenir ma touche Alt ou Option, sélectionner Know Btn. Et nous y voilà. Je peux revenir à l'état par défaut et vous pouvez voir à quel point c'est rapide, quel point c'est rapide. Et cela va vous faire gagner beaucoup de temps. Je vais passer à un gros bouton comme celui-ci. Cela vous fera donc gagner beaucoup de temps suite pour vos futurs projets. Et vous avez déjà vu à quel point il est simple de copier-coller dans la vidéo précédente. Mais vous pouvez aussi faire pour ce héros des images, par exemple , appuyons sur Control C. Je passe à Control V. Et ce que je vous recommande de faire , c'est de le renommer navigation et de créer un rpart pour ces images de héros, par exemple dans ce cas, disons que nous avons ces personnes ce côté et nous allons le dupliquer. Contrôle J, désolé, contrôle D, comme ça et positionnez-le à 60. Encore une fois, cela se trouvera dans un plan de travail séparé, alors créons-le. Je vais donc supprimer ces deux-là. Et vous pouvez placer des pieds de page dans votre navigation si vous le souhaitez. C'est déjà à vous de décider comment vous voulez les créer. Et je vais l' appeler héros, par exemple parce que vous allez consacrer la majeure partie de votre temps à ces images de héros . Disons donc cela pour ce deuxième exemple, qui sera un héros pour ce héros. Remarquez que je ne crée pas de composants à partir de ceux-ci. Je voudrais vous montrer cette deuxième approche. Ainsi, comme je vous l'ai déjà montré avec ceux-ci, les composants sont évidemment extrêmement simples à créer, mais vous pouvez également vous en passer et créer simplement les éléments séparés vous-même. Disons donc que je souhaite positionner ce texte vers la droite. Ce que nous pouvons faire avec ceux-ci, c'est placer dans un groupe, les mettre dans une pile et simplement inverser l'ordre, comme ça. Et maintenant le texte est de ce côté, les gens sont de ce côté. Et ce que nous pouvons également faire, c'est utiliser ces éléments de fond. Donc cette forme de héros, peut-être que je voudrais la renverser comme ça, et je veux la positionner comme ça. Et tous ces différents éléments. Donc Hero Elements, je vais les positionner juste ici. Donc, vous voyez à quel point c'est simple. J'ai aussi un masque ici avec mon cercle de héros à l'intérieur. Je vais donc le positionner ici. Alors on y va. Nous n'avons que quelques clics. Nous avons deux options différentes que nous pouvons présenter à nos clients. Ce que cela va vous apporter une fois de plus, c'est vous permettre de travailler beaucoup plus rapidement sur ces projets, en particulier avec ces tâches répétitives comme je l'ai mentionné. Donc, la navigation, les images de bas de page et tous ces différents éléments qui se répèteront tout le temps, comme les tableaux de prix, par exemple , pour qu'il vous soit beaucoup plus facile en tant que designer de créez toutes ces variations dans votre style, en utilisant vos composants, en utilisant votre langage de conception, en utilisant votre police préférée, en utilisant vos couleurs préférées, puis réutilisez-les simplement des composants pour vos futurs projets. Est-ce de la triche pour vos clients ? Sachez, car vos clients veulent juste le résultat final. Ils se fichent de savoir comment vous arrivez à ce résultat final. Est-ce quelque chose que vous avez réutilisé ? C'est évidemment le cas, mais assurez-vous simplement de ne pas utiliser les logos que vous avez déjà utilisés dans vos projets et de ne pas utiliser de marque, par exemple certaines couleurs de vos livres de marque que vous obtenez avec votre clients, par exemple, certaines couleurs sont des marques déposées, certaines polices sont des marques déposées. Veillez donc à utiliser par exemple polices Google gratuites lorsque vous commencez à les créer, puis adaptez-les simplement aux spécifications de votre client, par exemple pour les couleurs et les polices. Laisse-moi te montrer encore une chose. Avec la puissance de x D, nous avons tous ces différents éléments. Imaginez donc que nous voulions utiliser cette image. Donc Control C, Control V ici. Et disons que c' est notre première carte. Appelons ça la carte 1, comme le canard. Et voici la pile, comme vous pouvez le voir. Je vais donc appuyer sur Alt. Qu'est-ce qui est encore mieux ? Je peux le créer en tant que composant. Donc, Control K, nous avons cet état par défaut avec l'image sur la gauche. Donc, nouvel état, bonne image. Et puis ajustez-le simplement ici. Comme ça. Et ce que je vais faire pour celui-ci c'est simplement les retourner. Alors on y va. Et je vais ajuster cette carte. Premièrement, je vais m'assurer que mon image est là, et c'est parti. Il s'agit donc de notre état par défaut. C'est une bonne image. Et encore une fois, je vais en créer un autre. Centrez donc l'image comme celle-ci. Et je vais apporter un tel changement. Donc 123, donc on est à 60 ans comme ça. Et évidemment, pour celui-ci, je vais opter pour l'image centrale. Donc, ce que je vais faire, c'est sauter ici. Et je vais changer la position de ma pile. Donc, ce que je vais faire, c'est les placer dans un groupe. Je vais utiliser la pile verticale de la SEC comme ceci. Et en gros, élargissez simplement l' image jusqu'aux bords comme ça. Double-cliquez sur l' intérieur, par exemple juste ici. On y va. Le texte sera au centre dans un instant. Passons donc à l'état par défaut et travaillons sur l'image centrale ici. Parce que c'est notre composante. Ce que je veux faire, c'est essentiellement ajuster ce texte. Allons-y, voyons la largeur automatique. Donc, ce que je vais faire, c'est double-cliquer à l'intérieur et ajuster ce texte. Bingo un peu dehors. Mais vous pouvez également créer une hauteur automatique et l' ajuster comme ceci. Et apportez simplement ce dont vous n'avez pas besoin ici comme ça. ne nous reste donc que quelques clics. Nous allons être en mesure de l'ajuster. Et vous pouvez faire du poids automatique, vous pouvez faire de la hauteur automatique, comme vous le souhaitez. Et je vais m' assurer que c'est aligné au centre comme ça. Et je vais peut-être le positionner au centre et positionner mon bouton au centre également. Et assurez-vous que nous avons 40 ans sur tout cela. Et assurez-vous simplement que nous le sommes, car nous sommes dans une pile, par exemple 64, celui-ci. Et vous pouvez également le saisir ici. Donc, si je sélectionne mon groupe ici, sélectionnez 60, et c'est sélectionné. C'est parti en quelques clics. Vous avez trois cartes différentes que vous pouvez utiliser. Donc, en gros, nous avons l'image par défaut, l'image droite, l'image centrale. Vous pouvez donc en faire ce que vous voulez. Nous pouvons donc voir à quel point il est simple de créer ces éléments dans Adobe XD. Et encore une fois, je vous invite à commencer à réfléchir à votre projet, à réfléchir à votre niche, qui sont des éléments qui se répètent tout le temps, qui sont recherchés. Mes éléments qui sont extrêmement ennuyeux. Pouvez-vous acheter quelque chose ou télécharger quelque chose gratuitement qui améliorera votre flux de travail, ce qui accélérera votre flux de travail ? Ou devez-vous tout créer à partir de zéro en fonction du nouveau chorion, en fonction de votre style de design. Si tel est le cas, commencez simplement par créer tous ces éléments réguliers, comme je vous l'ai montré dans cet exemple, par exemple navigation, le pied de page, toutes ces différentes voitures qui sont en répétant tout le temps, puis en élargissant simplement à partir de là au fil du temps. Enfin, ce que je veux vous montrer c'est que si nous revenons à Adobe XD, vous pouvez voir qu'il a enregistré ce fichier dans le cloud. C'est extrêmement important, surtout si vous le partagez avec vos collègues concepteurs, avec vos clients ou si vous travaillez à distance dans des entreprises, par exemple vous avez le bureau et vous fonctionne également sur ordinateur portable. Mais ce que je recommande également, c'est de l' enregistrer sur votre bureau. Pour ce faire, vous pouvez simplement écrire ici dans Fichier, Enregistrer sous, et vous pouvez choisir un document aussi sûr que local sur votre bureau. Cela vous permettra de simplement avoir ce fichier. Par exemple, s'il n' simplement avoir ce fichier. Par exemple, y a plus d'électricité, vous pouvez l' emporter sur votre ordinateur portable et emporter votre ordinateur portable où vous le souhaitez. Si vous devez vous adapter et apporter des modifications rapides, si Internet n'existe plus, ce qui est vraiment le principal avantage des documents locaux, vous pouvez simplement les enregistrer localement et travailler ou non. Si vous n'avez pas de connexion Internet. 113. Systèmes de conception VS: Il existe également un autre type de modèle disponible en ligne , appelé système de conception. Et le système de conception est pratiquement mort. Cela implique différents types de polices, différents types de règles, différents types de grilles dans de nombreux autres projets, en particulier si vous travaillez avec du code. Vous allez donc attribuer des extraits de code différents. Vous allez attribuer différents jetons pour les couleurs, les polices et bien plus encore. Le système de conception est donc beaucoup plus complexe, avec un kit d'interface utilisateur. Ainsi, en fonction des projets sur lesquels vous travaillez, vous pouvez créer un système de conception plus petit si vous travaillez sur de petits projets ou si vous travaillez sur des projets plus importants, je recommande vivement travailler avec le système de conception. Mais la principale différence entre le kit d' interface utilisateur et le système de conception est que UIKit a déjà créé ces composants prédéfinis. Comme vous l'avez vu dans la vidéo précédente, nous avons déjà créé cette navigation. C'est donc prêt. Il contient le logo à l'intérieur duquel vous pouvez échanger avec votre prochain projet client. Il a le type à l'intérieur, donc tout est déjà positionné. Vous pouvez simplement renommer certains de ces types. Vous pouvez changer la police, vous pouvez changer les styles, vous pouvez changer la taille et tout le reste. Et ce bouton était déjà en place. Vous pouvez donc simplement ajuster la largeur, la hauteur, la couleur du bouton, l'ombre de fond et tous ces éléments. Et c'est le kit d'interface utilisateur en bref, alors qu'avec le système de conception, vous devrez recréer cette navigation à partir de zéro. Et parce qu'à l'intérieur du système de conception, vous avez une structure très cohérente. Donc, une fois de plus, je reviens au projet plus vaste, en particulier à l' énorme projet où la majorité des designers travaillent sur le même projet. Le système de conception est alors vraiment crucial car vous devez disposer un référentiel central d'éléments à utiliser pour tous ces différents concepteurs sein de votre équipe. Mais si vous travaillez seul si vous travaillez avec un seul autre designer, ou si vous travaillez directement avec le client, le kit d' interface utilisateur est une bien meilleure solution, à mon avis, car encore une fois, cela va considérablement accélérer votre flux de travail car tous ces éléments sont déjà créés. Vous n'êtes pas obligé de les créer à de zéro tout le temps. Bien que la conception de systèmes soit extrêmement importante, extrêmement précieuse et extrêmement utile, à mon avis, pour ces petits projets, vous n'avez pas vraiment besoin de créer ces systèmes de conception parce que vous avoir les composants. Nous pouvons donc simplement ajuster les composants. Vous pouvez simplement ajuster la taille de la police. Vous pouvez simplement ajuster la famille de polices. Vous pouvez ajuster la couleur. Vous pouvez ajuster tous ces différents éléments, par exemple les icônes. Supposons que vous utilisiez ces icônes d'image dans votre design. Et vous voulez simplement l' échanger très rapidement pendant que vous pouvez créer un composant. Et la prochaine fois, sur le prochain projet, si vous souhaitez modifier cela, vous pouvez simplement glisser-déposer une icône différente à l'intérieur. Il va échanger ces composants. Et voilà. Vous n'avez pas besoin d'un système de conception pour tous ces petits projets. Encore une fois, cela dépend du type de projets sur lesquels vous travaillez, type de créneau dans lequel vous vous trouvez. En particulier pour ces petites niches, ces systèmes de conception ne sont pas vraiment utiles. Encore une fois, tout dépend de vous et je vais vous laisser les liens vers certains des systèmes de conception les plus connus dans un PDF, vous pouvez télécharger la version XD. Vous pouvez les ouvrir dans Adobe XD et découvrir simplement quels sont ces systèmes de conception et ce que vous pouvez en tirer. Parce que tout cela est créé par de grandes entreprises. Et encore une fois, ces grandes entreprises créé ces systèmes de conception ont créé ces systèmes de conception parce que plusieurs designers travaillent en même temps au sein d'une même équipe. Ils ont donc besoin de ce référentiel central d' éléments à utiliser par tous ces différents concepteurs. Sinon, si vous n'êtes qu'un seul homme, si vous travaillez sur de petits projets, vous pouvez simplement utiliser des kits d'interface utilisateur et tout ira bien. 114. Kits d'interface d'utilisateur gratuits Premium: C'est bien beau de créer vous-même ces kits d'interface utilisateur. Mais il est parfois plus facile de simplement télécharger ou acheter ces différents kits d'interface utilisateur qui seront utilisés pour vos futurs projets, peut-être pour les éléments ennuyeux comme nous en avons parlé précédemment, j'ai aimé la navigation, le pied de page, les tableaux de prix, etc. Alors, où vous pouvez trouver ces kits d'interface utilisateur, je vais vous le montrer dans la prochaine leçon où nous discuterons de la vente vos propres kits d'interface utilisateur personnels sur ces sites Web. Mais en gros, ce que je voulais partager dans cette leçon, c'est ces kits d'interface utilisateur haut de gamme sont conçus que ces kits d'interface utilisateur haut de gamme sont conçus en pensant à une marque stupide. Ce que je veux dire par là, c'est qu' aucun lien certain entre ce kit d'interface utilisateur et une certaine marque. Vous pouvez imaginer que si iOS publiait son kit d'interface utilisateur, il serait spécifique à ces directives de marque, à ces directives de grille, à ces directives topographiques, et tout cela différents éléments qui comprennent ce kit d' interface utilisateur particulier et ce système d'exploitation particulier dans ce cas. C'est donc pareil. Si Facebook, par exemple, lance son propre kit d'interface utilisateur, il sera reconnu grâce à cette couleur bleue, la police de caractères et à tous ces éléments. Bien qu'avec ces kits d'interface utilisateur premium et gratuits, que vous pouvez trouver en ligne, il n'y a pas de marque précise en tête. Pourquoi ça ? Parce qu'il est destiné à être utilisé par d'autres designers. Il va être assez simple pour vous de changer les couleurs, changer les polices et tous ces éléments dont nous avons parlé tout à l'heure. C'est donc tout l'intérêt du kit d'interface utilisateur premium ou gratuit. Maintenant, quelle est la différence entre un kit d'interface utilisateur gratuit et premium ? De toute évidence, le premier est le prix. Les kits d'interface utilisateur gratuits peuvent être téléchargés gratuitement, bien entendu, et le premium peut être acheté. Et la principale différence, à mon avis, réside dans le nombre d'éléments. Habituellement, ces kits d'interface utilisateur gratuits ne contiennent que dix ou 20 éléments différents. Alors que les kits d'interface utilisateur haut de gamme, comme le kit d'interface utilisateur quantique, en particulier celui que je vous ai montré précédemment, contiennent par exemple 1 000 éléments différents. Il existe également des différences entre les types de fichiers, par exemple avec les kits d'interface utilisateur gratuits, généralement qu'un seul type de fichier, par exemple Adobe XD ou Adobe Photoshop, Sketch ou Figma ou autre. Bien qu'il s'agisse de fichiers haut de gamme, concepteurs s'efforcent généralement d' inclure tous ces différents types de fichiers. Donc, peu importe ce que vous utilisez, vous serez couvert. Il existe également une différence dans la différenciation des éléments. Ainsi, dans les kits d'interface utilisateur gratuits, vous obtiendrez simplement 23 catégories, par exemple . Alors qu'avec les kits d'interface utilisateur haut de gamme, vous aurez généralement 10 2050 catégories différentes. Enfin, je voudrais mentionner le soutien. Si quelque chose tombe en panne, si quelque chose ne fonctionne pas avec trois kits d'interface utilisateur , en gros, peu importe, c'est gratuit et vous n'aurez aucune assistance de la part du concepteur. concerne les marchés premium, surtout si vous les achetez directement sur leur site Web, vous aurez essentiellement droit à l'assistance. Et vous serez le premier à obtenir de l' aide auprès des concepteurs qui ont créé ces kits d'interface utilisateur. Dans la vidéo suivante, je vais donc parler de la vente de vos propres kits d'interface utilisateur. Et nous allons essentiellement parcourir ces différents sites Web. Et je vais vous montrer où vous pouvez vous procurer les kits d'interface utilisateur premium. Et vous pouvez également vendre vos propres kits d'interface utilisateur sur ces sites Web spécifiques. 115. Créer et vendre votre kit d'interface utilisateur: Qu'il s'agisse d'acheter des kits d'interface utilisateur haut de gamme en ligne ou de vendre vos propres kits d'interface utilisateur en ligne. Il n'y a qu'une poignée de sites Web sur lesquels vous pouvez le faire avec succès. Il existe de nombreux sites Web différents. Et en tant que personne qui travaille dans ce secteur depuis six ans , je vous conseille ne pas essayer de vendre partout parce que vous allez simplement vous en laisser dix, vous allez perdre trop de temps dessus. sites Web qui ne vont pas générer vos ventes. J'ai suivi ce conseil. Suivez cette vidéo de quelqu'un qui le fait depuis , comme je l'ai dit, six ans maintenant et j'ai 100 000 ventes sur tous mes différents produits. Je dois donc savoir où vous devriez vendre et où est-ce rentable ou non. Donc, dans cette vidéo, je vais vous montrer, comme je l'ai dit dans la vidéo précédente, ces sites Web où vous pouvez acheter kits d'interface utilisateur haut de gamme et où vous pouvez vendre vos propres kits d'interface utilisateur. Maintenant, tout d'abord, pourquoi vous devriez vendre vos propres kits d'interface utilisateur. En fait, c'est une bonne idée de le faire et c'est juste une bonne source de revenus supplémentaires pour vous-même. Si, par exemple, vous avez créé un joli kit d'interface utilisateur pour l'un de vos projets précédents. Vous pouvez simplement le développer en utilisant les conseils et les techniques dont nous avons parlé plus tôt. Il suffit de le préparer et de le vendre sur l'un de ces différents sites Web. Vous pouvez le mettre en vente au prix indiqué sur tous ces différents sites Web. Vous pouvez simplement vous adapter au prix du marché. Vous pouvez découvrir ce que font les autres. Il vous suffit de l'ajuster vous-même. Donc, si vous avez par exemple 100 éléments dans vos kits d' interface utilisateur et que vous ne proposez qu'un seul type de fichier, Adobe XD. Veillez à ne pas facturer trop cher , car vous êtes en concurrence avec quelqu'un d'autre qui le crée dans Adobe XD Sketch Figma Photoshop. Peut-être que votre enfant se vendra bien mieux que votre kit d'interface utilisateur car il propose tous ces types de fichiers différents. Allons à l'intérieur et je vais vous montrer tous ces différents sites Web et où vous pouvez vendre vos produits. Et tout d'abord, l'auto-hébergement. Donc, en gros, l'auto-hébergement consiste à héberger les produits et à attirer vos clients. Vous êtes donc en charge de la promotion, vous êtes en charge de la vente, vous êtes en charge de la livraison de tout le reste. Et ce sont également des places de marché où vous pouvez vendre sur toutes ces différentes places de marché et elles font tout le travail pour vous. Commençons donc par l' auto-hébergement. En gros, le site Web que j' utilise depuis des années est Gum Road. Vous pouvez ajuster, vous pouvez télécharger tous ces différents produits. Vous pouvez créer des liens personnalisés, des remises personnalisées, des couleurs personnalisées. Vous pouvez créer ces différents boutons d'appel à l'action, comme indiqué ici, commencez à vendre ou achetez maintenant, ou achetez maintenant, comme vous le souhaitez. Et vous pouvez en gros associer cela à la présentation des balises, une présentation en dribble, vous pouvez simplement emmener vos spectateurs ici et ils peuvent acheter auprès de votre magasin d'appareils photo. Ou vous pouvez faire ce que j'ai fait avec mon équipe, c'est-à-dire créer un site Web. Et sur ce site Web, vous pouvez créer par exemple des kits d'interface utilisateur. Et disons que vous pouvez voir UIKit ici, UX Kids ici. Nous en avons donc un tas. Et supposons que les utilisateurs souhaitent acheter celui-ci, par exemple, ils peuvent simplement cliquer. Cela les dirigera vers la page spécifique à ce produit, qui contiendra la description ici. Qu'est-ce qui est inclus ? Cela fonctionne dans quel logiciel et lorsque vous cliquez sur Acheter maintenant, ils accèdent à la page Gum Road. Ils peuvent simplement cliquer sur « Je veux nous » et ils peuvent acheter ce produit. Et comme vous pouvez le constater, il est beaucoup plus simple de passer du site Web à l'écoute. Ce que vous pouvez également faire, c'est la vente intégrée. Cela signifie que lorsqu' ils cliquent sur Acheter maintenant, une fenêtre s'ouvre ici et ils peuvent acheter directement à partir de là. Mais assurez-vous simplement de comprendre si vous utilisez gum road, surtout si vous utilisez quelque chose comme Google Analytics, par exemple, ces deux-là vont tomber en panne. Donc, en gros, assurez-vous, et c'est pourquoi je dis que cela vous redirige vers une page d'achat sécurisée. Donc, quand ils se rendent ici, comme vous pouvez le constater, gum road est vraiment sécurisé, car c'est mon site Web, mais je veux juste avoir ce niveau de sécurité supplémentaire parce que les gens laissent leur carte de crédit numéros, leurs adresses e-mail PayPal. Je ne veux donc pas qu' il arrive quoi que ce soit à ça. Donc, en gros, c'est mon avis. Vous avez également un site Web appelé Sulfide, qui ressemble en gros à Come Road, mais à mon avis, gum road existe depuis le début de ce jeu en ligne et vous pouvez, comme je l'ai dit, ajusté pour s'adapter à ce que vous faites, l'apparence de votre produit, dans ce cas, UIKit, mais vous pouvez vendre toutes sortes de choses différentes. Passons maintenant aux places de marché. Et je vais vous montrer quels sont les principaux marchés du marché. Et comme je l'ai dit, vous pouvez explorer tous ces autres marchés, en particulier lorsque vous commencez à vendre, lorsque vous commencez à gagner du terrain. Tous ces acteurs du marché vont vous contacter et vous dire qu'ils ont ce nouveau site Web révolutionnaire qui vous rapportera beaucoup d'argent. Vous ne saurez pas quoi en faire, mais ne les écoutez tout simplement pas. Assurez-vous de commencer à vendre sur ces principaux sites Web , puis de vous étendre à ces sites Web plus petits. Mais avec un seul produit à la fois. Si vous avez 500 produits comme moi, il est littéralement impossible de télécharger tous ces produits sur tous ces différents sites Web. Et pourquoi aurais-tu même envie de faire ça ? S'ils n'ont pas, par exemple 1 million de vendeurs différents ou s'ils ne vous rapportent pas suffisamment de ventes. Donc, pour commencer, nous avons Envato Market et ce site Web est Graphic River. À l'intérieur de cela, vous avez des éléments Web et des interfaces utilisateur. Tu peux sauter dedans. Vous pouvez voir à quoi ressemblent certains de ces différents produits. Comme je l'ai dit précédemment, vous n'êtes pas obligé de vendre des kits d'interface utilisateur. Tu peux vendre ce que tu veux. Mais ce cours est entièrement consacré aux kits d'interface utilisateur. Ensuite, nous avons conçu un modèle et ces gars sélectionnent sans crainte ce qui peut être publié sur leur site Web. Et vous pouvez voir que tous ces éléments sont vraiment de haute qualité, vraiment de premier ordre, en particulier pour ces kits d'interface utilisateur et, par exemple si je clique ici juste pour vous montrer ces différentes présentations parce que vous travaillez avec eux pour créer ces présentations. Vous pouvez voir qu'ils sont vraiment en plein écran, vraiment l'air soignés. Ils ont vraiment l'air professionnels. Ils ont vraiment l'air haut de gamme, et c'est l' essentiel. Et je pense que vous pouvez également ajouter différentes animations lorsque vous créez avec elles. Ensuite, nous avons Creative Market et Graphic River et Creative Market, ou là depuis la nuit des temps. Et vous pouvez parcourir tous ces différents modèles. Passons donc aux modèles Web, par exemple, vous pouvez voir combien il y en a. Mais si j'opte pour des modèles et que j'opte pour, permettez-moi de me rappeler où ils se trouvent tous. Donc des éléments graphiques du Web. Et si je clique ici, nous pouvons filtrer. Passons donc à Adobe XD. Et vous pouvez voir tous ces différents éléments pour Adobe XD. Et nous pouvons même filtrer cela davantage en utilisant des modèles de sites Web de réseaux sociaux. Et nous avons des kits de wireframing, par exemple , je peux le sélectionner. Et vous pouvez voir des enfants branchés, quoi ils ressemblent, combien y en a-t-il ? Voici les miens. Et vous pouvez les parcourir si cela vous intéresse. Et c'est en gros tout. Il vous suffit d'aller ici et voir ce que font ces autres designers : C, laquelle de leurs catégories ils utilisent, C dans quel logiciel ils créent ces enfants filaires, interface utilisateur kits et ainsi de suite. Et en gros, commencez à partir de là et explorez ce qui fonctionne pour vous. Enfin, ce que nous avons également, c'est que vous avez huit ans, ce qui est bien connu dans l'industrie. Ils sont également de haut niveau et de haute qualité. Et ils jouent vraiment un rôle lorsqu'il s'agit de sélectionner qui est en mesure de vendre sur leur site Web afin que vous puissiez les consulter. Je les recommande vraiment. Enfin, nous avons des éléments Envato et nous avons conçu des bundles. Envato Elements ne représente qu'une partie du marché d'Envato. Vous devez donc faire une demande séparée pour vendre des éléments Envato. Mais une fois que vous le faites, vous êtes essentiellement payé selon le montant que quelqu'un télécharge vos produits. Donc, si je recherche un kit d'interface utilisateur, par exemple vous pouvez voir tous ces différents éléments. Et en gros, la différence entre cette place de marché et toutes ces autres places de marché , sauf qu'elles ont toutes des cartes d'accès, mais qu'elles ont des limites quant à la manière dont de nombreux éléments que vous pouvez télécharger par semaine, par mois, par jour, etc. Bien qu'Envato Elements n'ait aucune limitation, vous pouvez télécharger ce que vous voulez, où vous voulez, et vous payez un abonnement annuel au lieu de trois mois, six mois, un mois, peu importe. Tous ces autres sont essentiellement des paiements au fur et à mesure. Donc, si vous choisissez d'acheter ce produit, par exemple, vous l'achetez simplement. Ou si vous choisissez d' acheter mes produits, vous pouvez simplement les acheter. Et c'est la même histoire avec tous les autres, et même histoire avec Gum Road, mais avec les appareils photo, vous pouvez choisir de créer des packs séparés. Donc, si nous revenons ici, si je fais défiler la page vers le bas, par exemple peux créer un ensemble de kits d'interface utilisateur à partir de tous mes produits. Et je peux choisir de créer un énorme bundle filaire comme je l'ai fait. Et vous pouvez le faire assez facilement à l'intérieur des caméras, alors que vous ne pouvez pas le faire sur tous ces différents sites Web. en revenir à Envato Elements, comme je l'ai dit, vous ne gagnez pas d'argent pour des produits distincts achetés par quelqu'un d'autre, mais vous gagnez de l'argent. Mais combien de vos produits ont été téléchargés et combien de téléchargements avez-vous dans cette catégorie pour votre bonus de contributeur ? Donc, par exemple, combien de ces différents produits vous possédez dans la majorité de ces autres produits. Et encore une fois, si cela vous intéresse, vous pouvez simplement parcourir leur site Web. Et encore une fois, voici le kit d'interface utilisateur de mon produit Austria. Enfin, je voudrais partager avec vous des offres de conception, qui est l'un des sites Web les plus récents du secteur, mais cela vaut la peine d'être poursuivi car vous pouvez également y vendre tous ces kits d'interface utilisateur, comme nous l'avons mentionné, mais ils proposent également différents packs qu' ils proposent de temps à autre. Et en gros, le bundle est une sorte de package et vous pouvez acheter un bundle, par exemple dix designers différents ont dix kits d'interface utilisateur différents. Ils utilisent tous ces kits d'interface utilisateur, les mettent dans un seul package appelé bundle slash the price down, puis se contentent de les commercialiser comme des fous. Et en gros, ce bundle va générer quelques milliers de ventes, puis ils se contentent de partager cet argent entre ces designers . En général, il se passe qu'il y en a deux différents modèles. , 50, 50 ou 50 ce cas, 50, 50 ou 50 vont aux lots de designs, et 50 vont à tous les autres designers. Et il existe également un modèle 50 et le reste, 50 % va à des packs de design, et le reste revient à celui qui possède le plus gros kit d'interface utilisateur qui gagne le plus d'argent. Qui a le moins de joie, les enfants reçoivent le moins d' argent. Donc, en gros , selon le site Web, l'offre le forfait, vous allez obtenir un certain pourcentage de l'argent. Je vais créer un cours distinct à l'avenir. Expliquer tout cela, expliquer comment préparer les balises des présentations, comment préparer les descriptions, comment choisir votre ciblage, comment décrire au mieux votre produit, comment les créer des listes courtes, comment créer ces images de couverture et tous ces éléments. Je vais surtout parler de soutien. Pourquoi le support est important, comment vous pouvez contourner le fait de fournir une assistance en fournissant une bonne description et proposant un bon produit en premier lieu, quoi consiste un excellent produit et bien plus encore. Si ce cours vous intéresse à l'avenir, suivez-moi sur les réseaux sociaux ou laissez-moi un message. Vous pouvez me suivre ici où que vous regardiez ce cours et rester à l'affût pour l'avenir. Et vous pouvez également suivre ma chaîne YouTube. Je vais également laisser le lien vers celui-ci dans le PDF, je diffuse toutes sortes de contenus Adobe XD. Donc, si cela vous intéresse, assurez-vous de me suivre là-bas et je vous annoncerai ce cours dans le futur. 116. AFFECTATION de l'article 14: Pour cette section, vous devez utiliser Adobe XD et créer votre propre kit d'interface utilisateur. Il n'est pas nécessaire que ce soit énorme. Vous pouvez simplement créer deux ou trois éléments, tels que la navigation un curseur, ou deux ou trois sections différentes comme un formulaire de contact, par exemple quelques éléments que vous pourriez réutiliser dans votre processus de conception de site Web ou processus de conception de votre application. Essayez simplement de vous entraîner de cette façon , car ce sera beaucoup plus simple plus tard, lorsque vous passerez à de vrais projets. Ou si vous avez déjà de vrais projets en cours de réalisation, il sera beaucoup plus simple de les réutiliser sur ces composants plus tard dans ce projet. 117. SECTION 15 Systèmes de conception: Les systèmes de conception sont l'un des outils les plus puissants dont disposent les concepteurs aujourd'hui. Ils sont extrêmement importants, incroyablement puissants lorsque vous commencez à les utiliser, car vous ne perdez plus de temps avec les éléments que vous avez déjà créés. Vous commencez à réutiliser certains de ces éléments, couleurs, typographies, styles et bien plus encore. Ils sont particulièrement importants lorsque vous les connectez au live code. Lorsque vous créez un système de conception dans un outil de conception, c'est formidable de l'avoir, mais lorsque vous l'associez à des éléments dynamiques dans un outil tel que Webflow que nous allons utiliser dans cette classe. Il va être incroyablement facile à utiliser, incroyablement rapide à utiliser. Et cela va vous faire gagner beaucoup de temps. Et vos clients gagnent beaucoup d'argent car vous n' allez pas trop expérimenter une fois que vous aurez réellement les fonctions de base d'un système de conception. Commençons donc. 118. Qu'est-ce qu'un système de conception: système de conception, comme son nom l'indique, est une approche systématique de création de conceptions d'interface utilisateur et d'expérience utilisateur. L'objectif principal de chaque système de conception est de suivre ce que chaque membre de l'équipe a créé. L'objectif principal du système de conception est l'évolutivité. Qu'il s'agisse de l'évolutivité immédiate ou de l'évolutivité à venir. Mais la tâche principale du système de conception est de maintenir cette échelle cohérente. Cela signifie que chaque modification que vous apporterez se reflétera dans le reste de votre design, sera cohérente et restera dans l'apparence de ce qui est déterminant que vous apporterez se reflétera dans le reste de votre design, sera cohérente et restera dans l'apparence de ce qui est déterminant le tout début d'un système de conception. Tout bon système de conception se compose de deux réservoirs, règles et de normes et de bibliothèques de modèles. Les règles et les normes sont à la disposition de tous les coéquipiers pour qu'ils les suivent à la lettre, car c'est la seule façon d'adapter le système de conception de manière uniforme. Il va croître et rester constant tout au long de sa durée de vie. Parce que la durée de vie du système de conception est la durée de vie de l'entreprise. Ce n'est jamais fait, ce n'est jamais fini. Ainsi, tant que l'entreprise ou le produit existe, le système de conception peut coexister avec ce produit ou cette entreprise, tandis que la bibliothèque de modèles , en revanche, existe et qu'elle va évoluer tout le temps en fonction des besoins, organise les besoins et les besoins futurs de chaque projet et de chaque entreprise en particulier. La principale idée fausse qui circule est que systèmes de conception sont réservés aux grandes entreprises, ce qui n' est pas le cas. Vous pouvez utiliser un système de conception pour les petites entreprises, vous pouvez utiliser le système de conception avec moins de composants, avec moins de directives et de normes numériques. Et ces directives peuvent être un peu rudes au début. Mais au fur et à mesure que le projet avance, à mesure que l'entreprise se développe, les règles et les normes vont se durcir et le système de conception va enfin prendre sa forme, la forme prévue par début. Et elle ne fera que croître avec l'entreprise. Les systèmes de conception peuvent aussi bien être destinés aux concepteurs qu' aux développeurs. Et cela peut être réalisé en utilisant quelque chose que l'on appelle un jeton. Nous en reparlerons un peu plus tard dans ce cours. Mais en gros, la collaboration entre les concepteurs et les développeurs est la clé de tout bon système de conception. Ainsi, dès que la modification est apportée ou diffusée, concepteurs et les développeurs doivent être sur la même longueur d'onde pour que leur système de conception fonctionne et le changement soit immédiatement mis en œuvre. Et c'est aussi simple que possible. C'est extrêmement important pour les startups, mais aussi pour les entreprises établies, car vous ne voulez pas altérer le design et les fonctionnalités du produit en modifiant simplement le design trop de système avec quelque chose qui ne convient pas à tous les membres de l'équipe. Il y a certaines choses que tout bon système de conception devrait avoir. Dans la prochaine vidéo, nous allons parler de cela. Quelle est la bonne structure pour chaque bon système de conception ? 119. Structure d'un système de conception: Comme je l'ai mentionné dans la leçon précédente, structure d'un bon système de conception se compose en fait de deux choses : règles et des normes et des bibliothèques de modèles. Les règles et les normes peuvent se présenter sous de nombreuses formes différentes. Par exemple, chaque règle doit coïncider avec quelque chose que vous faites dans ce système de conception. Disons que la règle peut porter sur la grille ou sur la typographie. La règle peut porter sur la couleur, sur l'espacement, sur le rythme horizontal ou vertical. Il peut s'agir de n'importe quoi. Et les rôles peuvent bien sûr être cassés, mais ils peuvent l'être au tout début d' un système de conception, car plus tard, lorsque le projet est développé, lorsque le projet s'est développé, c'est beaucoup il est plus difficile d' enfreindre une règle que lorsque vous commencez tout juste avec un système de conception. Les normes peuvent être un peu comme les valeurs d'une entreprise. Ils peuvent être quelque chose comme une langue, comme l'ambiance du projet et sortir du site Web du client ou de la marque du client. Et cela doit être suivi à fond dans un système de conception, car vous ne voulez pas trop vous écarter, en particulier dans un système de conception qui est vraiment une entreprise. Vous ne voulez pas qu'ils changent trop, car entreprises sont vraiment habituées à ce genre de ton, à ce type de design, à ces types de couleurs, ces topographies, à ces hiérarchies et bien plus encore. bibliothèques de modèles constituent la deuxième partie d'un bon système de conception. Et vous pouvez modifier ces bibliothèques de modèles fur et à mesure de votre croissance. Le principal conseil ici est que dès que vous commencez à créer des bibliothèques de modèles de systèmes de conception, vous n'avez pas besoin de créer des éléments qui ne sont pas nécessaires pour le moment. Par exemple, si votre projet ne possède pas de tableau de bord, vous ne créerez pas d' éléments tels que des graphiques ou des diagrammes car ils ne sont tout simplement pas pertinents pour le moment. Vous n'allez pas remplir votre système de conception de tous ces composants inutiles, car n' oubliez pas que vous êtes là en tant que concepteur. Votre équipe de conception est là pour créer ces conceptions, mais celles-ci doivent être accessibles et faciles à comprendre pour les développeurs qui doivent développer tous ces éléments pour un projet en particulier. Il suffit donc de créer les éléments nécessaires à ce moment-là et de laisser le système de conception évoluer au fil du temps en fonction des besoins du projet. Maintenant, comment pouvez-vous diviser tous ces composants dans la bibliothèque de composants ? Il existe essentiellement trois catégories principales. Il existe des atomes, des molécules et des organismes. Et vous pouvez bien sûr ajouter des modèles. Vous pouvez, bien entendu, étendre nombre d'autres variantes que vous souhaitez, par exemple organigrammes ou des wireframes, des wireframes haute fidélité. Mais en gros, les atomes, les molécules et les organismes sont présents tout bon système de conception et ils adaptent le projet à l'échelle . Et vous pouvez toujours ajouter d' autres de ces éléments, comme je l'ai dit plus tard dans le projet, à savoir aligner. Comme leur nom l'indique, les atomes sont les plus petits du groupe, et ils peuvent être assez simples, par exemple couleur ou la taille du texte, la largeur d'un bouton ou quelque chose comme ça. Ensuite, les molécules sont créées à partir d'atomes. Lorsque deux atomes sont combinés, vous allez essentiellement créer une molécule, par exemple un menu déroulant ou quelque chose comme ça. Et puis les organismes sont, disons, un forum créé à partir de différents éléments, par exemple champs de saisie et des boutons. Ensuite, vous allez obtenir une forme qui est un organisme créé pour divers, à partir de divers atomes et molécules combinés en un seul organisme. C'est ce que l'on appelle la structure atomique et c'est vraiment notre norme industrielle depuis des décennies. Mais vous pouvez créer votre système de conception comme vous le souhaitez. Mais si vous utilisez cette approche atomique, il vous sera beaucoup plus simple de créer vos éléments et de les réduire à l'avenir. Le point principal de tout système de conception est la cohérence. Il faut donc tout le temps penser à la cohérence. Partout où vous créez simplement un bouton simple, vous devez réfléchir à la façon dont ce bouton va adapter aux différentes s' adapter aux différentes tailles d' écran, à la largeur, à la hauteur. Est-ce que cela va changer de couleur, est-ce que ce sera avec des coins arrondis, sans coins arrondis ? Pour avoir à penser à tous ces éléments pendant que vous construisez votre système de conception, vous devez penser sur les règles et les normes, que nous avons mentionnées au début de cette leçon. Et vous devez également penser aux autres éléments de votre bibliothèque de modèles. Comment vont-ils coïncider les uns avec les autres, ou comment vont-ils bien paraître sur la page. Ainsi, peu importe ce que vous créez un nouvel élément dans la bibliothèque de modèles , vous devez le mettre sur une page, le tester immédiatement, voir s'il fonctionne avec le reste de votre bibliothèque de modèles. Et ensuite, si c'est le cas, vous pouvez le garder et sinon, vous pouvez toujours le mettre au rebut. C'est tout l'intérêt de notre système de conception. Il va toujours évoluer, il va toujours changer et il ne ressemblera plus jamais à ce qu'il était hier. Dans la prochaine leçon, je vais vous montrer quelques excellents exemples de systèmes de conception élaborés par les leaders de l'industrie et les normes du secteur. Je vais te montrer à quoi tu dois faire attention. Plus loin dans ce cours, je vais vous montrer comment créer votre propre système de conception dans Adobe XD et ce que vous pouvez réaliser en créant des systèmes de conception dans Adobe XD. Alors je t'y verrai. 120. Exemples de systèmes de design: La meilleure façon de créer votre propre système de conception est d' apprendre des normes de l'industrie et des géants de l'industrie. Et pour cela, je vais juste vous montrer quelques exemples et vous pouvez les retrouver dans le PDF ci-joint. Vous pouvez simplement cliquer sur ces liens pour accéder à tous ces exemples que je vais vous montrer. Il apprend simplement d'eux ce qu'ils créent. Mais avant de commencer, l'essentiel est ne pas vous sentir obligé de prendre chaque composant créé par ces entreprises. Parce que, comme je l'ai mentionné précédemment dans les leçons précédentes, ces composants existent pour une raison. Donc, à moins que vous n' utilisiez l'un de ces composants, ne les créez pas. Lorsque vous commencez à créer un système de conception, il est très important de commencer petit. Ensuite, au fur et à mesure de l'évolution de votre projet, vous allez ajouter tous ces différents composants. Car quel est l'intérêt de créer des composants ? S'ils ne sont pas nécessaires pour le moment, ils ne feront que vous ralentir et vous n'optimiserez pas votre temps sur ce projet en particulier si vous créez des composants inutiles pour votre projet. Je vais donc vous montrer tous ces exemples. Le premier exemple que nous avons est la conception matérielle de Google. Bien entendu, cette conception matérielle est utilisée dans leur système d'exploitation Android. Apple a ses propres directives, appelées directives relatives à l' interface humaine, et vous pouvez également les trouver. Je vais relier tous ces systèmes de conception mentionnés à quelques autres systèmes de conception qui ne seront pas mentionnés dans cette vidéo à l'intérieur du PDF. Une fois de plus, ouvrez le PDF, cliquez sur ces liens pour y accéder et le parcourir par vous-même. Ce que nous avons ici, c'est vous présenter le matériel que vous êtes au moment de réaliser cette vidéo. C'est une nouveauté et la norme de l'industrie dans le monde Android. Donc, en gros, continuez à utiliser la conception matérielle. Vous pouvez consulter les directives, les composants, les icônes, les composants pour le Web, les directives d'accessibilité et les didacticiels pour les développeurs. Vous pouvez en apprendre davantage sur leur blog. Et passons rapidement en revue ces éléments. Et je ne vais pas entrer dans les détails car la majorité de ces systèmes de conception sont fondamentalement les mêmes. Ils utilisent les mêmes normes, les mêmes directives, mais ils ont simplement une apparence différente parce que, par exemple avec ce système de conception matérielle, il est pour Android, donc pour les appareils mobiles. Bien que d'autres systèmes de conception le soient, il en existe quatre, par exemple sites Web ou des projets Web, ou pour des tableaux de bord ou des éléments similaires. Bien entendu, tous ces éléments seront différents entre les systèmes de conception mobiles et de bureau. Mais la clé est la même, les normes sont les mêmes. Supposons donc que vous ayez ces directives, principes, ces styles et ces meilleures pratiques. Cela signifie que pour chaque élément, est le meilleur moment pour utiliser cet élément ? Dans ce cas, par exemple vous n'allez pas utiliser certains sélecteurs de dates, disons. Dans certains exemples, vous allez utiliser différents types de sélecteurs de dates dans ces exemples. C'est pourquoi ces principes et bonnes pratiques existent. Si vous avez déjà regardé un projet de marque ou la présentation de l'image de marque d'une marque, vous pouvez les regarder le week-end, par exemple en recherchant ces vidéos sur YouTube. En gros, les meilleures pratiques existent. Et c'est la raison principale, par exemple pourquoi vous utilisez le logo dans cette orientation plutôt que dans la désorientation. Pourquoi utilisez-vous des images blanches ici et pas ici ? C'est pourquoi ces meilleures pratiques existent. Pour mettre en œuvre ces meilleures pratiques ces principes et ces styles, vous devez commencer modestement. Il faut recommencer depuis le début. Vous devez créer ces différents boutons et expérimenter. Découvrez ce qui fonctionne, ce qui ne fonctionne pas, qu'est-ce qui fonctionne ? Assurez-vous d'effectuer une mise à niveau à partir de là, d'ajouter de nouveaux éléments, ajouter de nouveaux styles, de nouveaux composants à partir de ces éléments et de voir ce qui fonctionne et ce qui fonctionne, ce qui ne fonctionne pas, lancez-le éloignez-vous et passez simplement à autre chose. Cela m'amène bien aux composants. Donc, des conseils de conception et la documentation pour les développeurs pour les éléments de base de l'interface utilisateur interactive. Et vous pouvez les voir ici. Il s'agit de boutons, d' images, de forums, champs de saisie, d'icônes et bien plus encore. Ces composants sont là pour vous faciliter la tâche. Et je vais vous le montrer dans une leçon ultérieure ce cours, une fois que nous aurons découvert Adobe XD. Les composants sont donc là pour accélérer considérablement les choses car ils peuvent être utilisés dans votre système de conception, tout au long de votre projet. Et ils peuvent être utilisés par différents designers votre équipe car, bien entendu, fonction d' édition d'Adobe XD, différents membres de l'équipe peuvent se trouver sur différents côtés planètes. Et ils peuvent tous utiliser le même système de conception et les mêmes composants issus de ce système de conception particulier. Bien entendu, vous pouvez toujours modifier les composants. Vous pouvez toujours les mettre à jour. Vous pouvez ajouter différents composants, styles et bien plus encore. C'est la clé pour créer des composants qui seront réutilisables dans l'ensemble de votre système de conception. Nous expliquerons cela un peu plus tard, mais pour l'instant, passons à autre chose. Les icônes sont une ressource essentielle pour tout bon système de conception. Bien sûr, comme il s'agit de Google, ils ont leurs propres icônes matérielles. Lorsque vous commencerez à utiliser votre système de conception, vous utiliserez probablement d' autres icônes dans votre système de conception. Mais au fur et à mesure que ce système de design évolue, que vous trouvez la voix d'une marque, que vous trouvez l'orientation et les directives de la marque, vous allez également faire évoluer ces icônes. Donc, si vous n'êtes pas un expert en création d'icônes, peut-être que votre client le pourra. Engagez quelqu'un qui l'est, puis vous pourrez utiliser ces icônes dans ce système de conception. Ensuite, nous avons des composants pour le Web. Implémente et personnalise donc les applications Web matérielles avec notre code et notre documentation. Bien entendu, cela s'étend des appareils mobiles au Web. Enfin, nous avons des directives d'accessibilité qui sont extrêmement importantes. Découvrez comment aider les utilisateurs aux capacités diverses à naviguer, à comprendre et à utiliser votre interface utilisateur, car tout le monde n' a pas la même vision. Certaines personnes ont une déficience visuelle, par exemple certaines personnes ont de la difficulté à lire. Vous devez donc penser à toutes ces personnes car il y a beaucoup de vos utilisateurs. Nous allons malheureusement avoir certains de ces problèmes et nous devrons y penser tout le temps lorsque vous créez votre système de conception. Enfin, nous avons des tutoriels pour les développeurs. J'ai donc implémenté du matériel avec Java, Kotlin, Objective-C, Swift et Web of Water. Donc, selon le système de conception, selon les développeurs, vous allez utiliser telle ou telle technologie. Donc, en gros, il n'y a bonne ou de mauvaise réponse ici, vous devez parler à vos développeurs. Vous devez parler avec votre client, encore une fois, en fonction de ce qu'il va utiliser. Dans ce cas, pour le matériel, c'est la majorité pour les appareils mobiles, pour Android. Donc, bien sûr, ils utiliseront technologies différentes de celles que vous utiliseriez, par exemple , je ne sais pas, PHP ou quelque chose comme ça pour WordPress ou autre. Ces technologies vont donc être différentes. Et en fonction de la technologie que vos développeurs vont utiliser, vous allez créer votre système de conception à ces fins de développement. Donc, en gros, vous pouvez sauter ici, vous pouvez cliquer sur le design. Tu peux voir. Donc base, vue d'ensemble, mise en page de l'environnement , navigation, couleur, typographie , son, iconographie, forme, mouvement. Donc, comme je l'ai dit, et je vais continuer à dire tout au long de ce cours. Ne vous laissez pas intimider par tous ces différents éléments, car encore une fois, c'est Google. Ils comptent littéralement des milliards d'utilisateurs leurs appareils et dans toute leur entreprise. Bien entendu, ils utiliseront tous ces différents éléments dont on n'a probablement jamais entendu parler, et encore moins qu'ils n'utiliseront jamais. Alors ne vous laissez pas trop intimider avec ça. Nous avons donc des composants. Et ce sont des boutons, des cartes, des cases à cocher, des puces, des tableaux de données, etc. Ensuite, nous avons développé pour Android, pour Web Flutter, iOS. Nous avons des ressources et vous pouvez en savoir plus sur ces ressources. Donc, du battage médiatique, une échelle de frappe, un créateur, des outils de personnalisation de la forme, etc. Ils ont le blog. Alors assurez-vous d'y jeter un coup d'œil. Encore une fois, je laisserai les liens vers tout ce que j'ai mentionné dans cette vidéo et plus encore dans le fichier PDF. Cliquez sur ces liens pour y accéder. Ensuite, nous avons le système de conception Atlassian. Donc, un langage de conception de bout en bout pour créer des expériences simples, intuitives et magnifiques. Donc, encore une fois, vous allez remarquer que nous avons des composants, nous avons des modèles. Ils ont donc une mission, la personnalité et ils ont promis, c'est ce que j'ai mentionné dans la vidéo précédente. Vous n'allez pas parler aux deux mêmes personnes qui l'utilisent en caleçon sur leur appareil mobile. Et deux PDG de grandes entreprises qui occupent par exemple des bureaux coûteux. Le ton n'est donc tout simplement pas le même. Vous devez donc parler à votre utilisateur dans la langue qu'il comprendra. Ensuite, nous avons les fondations. Donc couleur, iconographie, typographie. Encore une fois, selon votre utilisateur, vous utiliserez différentes couleurs, différentes icônes et différents types, contenus, langue et grammaire, vocabulaire et style d'écriture. Donc, encore une fois, nous parlons à l'utilisateur. Qui est votre utilisateur ? Vous devez parler à votre utilisateur dans la langue qu'il comprendra. Vous pouvez donc explorer cela. Et nous avons ici du contenu sur les fondations de la marque. Cliquons sur le contenu pour voir langage, une grammaire et un vocabulaire inclusifs. Vous pouvez cliquer ici, composants. Nous avons donc notre terme, groupe extérieur, badge et tout de suite, vous remarquerez que cela semble très différent parce qu'il y a deux choses complètement différentes. Donc, si je clique sur la bannière, par exemple ici, vous pouvez voir à quoi ressemble cette bannière. Et tout de suite, nous pouvons voir le code, nous pouvons voir l'erreur, nous pouvons voir l'annonce. À quoi ça ressemble ? Comment évolue-t-il ? Comment rétrécit-il ou grandisse-t-il ? Et vous pouvez voir l'utilisation. Alors, comment ça marche ? Donc, anatomie, nous avons l' icône, nous avons le message, et nous avons les actions qui sont facultatives dans ce cas. N'hésitez donc pas à parcourir toutes ces catégories pour en savoir plus sur leur utilisation et leur intégration. Juste ici. Ensuite, nous avons Shopify, le système de design Polaris, Salt. Passons d'abord aux fondations. Des valeurs expérimentées, c'est ce que j'ai mentionné. Donc, leur approche, ce qu'il faut en tenir compte. Ils sont responsabilisants, conçus, déficients, dignes de confiance et familiers. Ce sont donc toutes les valeurs qu'ils recherchent avec leur marque, donc leur système de design. Ensuite, nous avons le contenu. Donc, voix et ton, Shopify est le reflet vocal de qui ils sont. Alors, qui sont-ils simplement mis en place ? L'entreprise a été construite par de vraies personnes qui comprennent ce secteur et se soucient d'aider les autres à réussir. Ce sont donc des del, des valeurs. Nous avons le design. Encore une fois, les couleurs du design, les principes et la communication sont essentiels. Les couleurs ont un sens. Carlos, suivez les directives d'accessibilité pour voir les rôles de couleur. Donc de la surface, essentiellement des éléments qui se trouvent derrière d'autres éléments de la surface. agit donc des éléments tels que le texte, par exemple principal, par exemple pour les éléments, disons le bouton secondaire pour les éléments, qui sont, disons, des coches ou icônes ou quelque chose comme ça, interactifs . Peut-être qu'une animation est en cours. Toutes ces couleurs sont donc là pour une raison. Encore une fois, je reviens à chaque fois que le point que j'ai soulevé précédemment ne crée pas d'éléments qui ne figurent pas nécessairement dans votre système de conception. Vous pouvez donc voir les variantes de couleurs et vous pouvez voir ces couleurs implémentées ici. Encore une fois, je vous encourage à consulter tous ces éléments et à en apprendre davantage à leur sujet. Vous pouvez donc voir des illustrations. Ils utilisent ces illustrations. Mais pourquoi, pourquoi utilisent-ils cette illustration particulière dans ce style particulier, en utilisant ces couleurs particulières. Vous pouvez donc en savoir plus sur tout cela ici sur cette page. Ensuite, nous avons le système de conception en carbone, créé par IBM, qui est une énorme entreprise. Et j'adore ce système de conception parce que vous pouvez cliquer ici et cliquer sur les kits de conception pour obtenir la version esquisse, mais vous pouvez également obtenir la version Adobe XD, qui est quelque part par ici. Et vous pouvez l'ouvrir dans XD, c'est ici. Mais il a été construit par la communauté du carbone. Il n'est donc pas exactement parfait car il n'a pas été créé pour Adobe XD plutôt que pour Sketch au départ. Ils sont ensuite passés à Figma, mais ils supportent également Adobe XD et Azure. Vous pouvez donc y amener les enfants, ouvrir et vous pouvez également faire de même pour Shopify en tant que système de design Polaris. Et je suis presque sûr que vous pouvez également vous procurer Atlassian. Vous pouvez donc l'ouvrir et en savoir plus sur son apparence. Mais revenons au carbone, en gros, un système de conception open source pour les produits et les expériences numériques. Le langage de conception est son système de base composé d'un code fonctionnel, outils et de ressources de conception, directives relatives à l'interface humaine et d'une communauté dynamique de contributeurs. On y va. De nombreux designers contribuent à ce système de conception. C'est pourquoi vous pouvez télécharger ces fichiers et les explorer gratuitement. Commencez donc à concevoir. Vous pouvez voir tous ces différents éléments, ce qu'ils utilisent, mais je suis plus préoccupé par les directives. Ceci. Ils commencent donc par la grille. La grille est au cœur de tout bon système de conception. Donc, si je joue juste cette vidéo, comme ça, vous pouvez voir grille en deux x et à quoi elle ressemble ? En gros, il s'agit d'une boîte , puis la boîte peut s'étendre à d'autres boîtes, qui peuvent être plus grandes ou plus petites. Mais en gros, c'est par incréments de deux. Tout s' accroche bien à ces boîtes. En gros, vous pouvez voir l'espacement ici. Deux cases séparent le texte, les images, la mise en page, etc. N'oubliez donc pas de tout explorer et vous pourrez voir comment fonctionne le rythme vertical ici, et comment fonctionne la gamme ici dans cette vidéo en particulier. Je vous encourage donc vraiment à l'explorer davantage. Vous pouvez voir des icônes, des pictogrammes, mouvements, ce qui est très important. Alors, comment ont-ils utilisé l'animation ? Donc, si je clique ici pour visionner cette vidéo, vous pouvez voir comment ils utilisent le mouvement dans leur système de conception, comment fonctionne l'animation, comment fonctionne la transition, comment les choses fonctionnent, par exemple la facilité d'entrée dans l'animation dépend de l'animation et bien plus encore. Alors explorez-le, téléchargez-le et assurez-vous de le vérifier par vous-même. Enfin, nous avons Salesforce. Vous pouvez donc commencer. Vous pouvez voir quelles plateformes sont Carottes ou Lightning Visual selon les directives de conception de Heroku, Android et iOS. Donc, vue d'ensemble, générateur, graphique, saisie de données, affichage des données et bien plus encore, accessibilité, c'est ce dont nous avons parlé, plans de composants ou une vue d'ensemble, disons accordéon, je veux jetez un œil au en conséquence, à quoi ça ressemble ? C'est donc une bonne chose. Je peux cliquer ici et comprendre quelle était l'intention qui sous-tendait cet accordéon. Donc, dans ce cas précis, vous pouvez voir que cet accordéon est fermé, mais lorsque je clique, toute cette section s'agrandit vers le bas. Alors, dans quelle mesure va-t-on augmenter vers le bas ? Par exemple, si vous l'utilisez sur une grille de pixels, que vous avez mentionnée dans le système de conception en carbone d' IBM. Ensuite, il va s'étendre par incréments de deux. Et vous pouvez utiliser ces règles, normes et directives dans l'ensemble de votre système de conception, quel que soit le produit que vous créez. Vous pouvez donc à nouveau cliquer sur l'alerte, par exemple sur l' avatar des badges. Cliquons sur le panier et voyons à quoi ressemblent leurs cartes. Voici donc la voiture, voici les nouvelles voitures plus petites, les voitures plus courtes, pourquoi leurs cartes. Vous pouvez ainsi voir comment tous ces éléments sont mis en œuvre, comment ils sont présentés sur la page. Et si je clique ici, pour que nous ayons l'action 12.3, nous avons l'info-bulle, tous ces différents éléments. Enfin, nous avons ce qui concerne les utilitaires, donc le texte de la marge, le dimensionnement, la fonction, la liste verticale. Enfin, nous avons des jetons de design. Les jetons de conception sont donc un atout incroyable dans les systèmes de conception et nous en parlerons dans l'une des prochaines leçons, car ils sont vraiment au cœur de tout bon système de conception. Et ils constituent réellement le pont entre concepteurs et les développeurs pour connaître le système de conception, l'utiliser au maximum et continuer à l'utiliser à l'avenir. C'est pourquoi nous utilisons des jetons de conception dans nos systèmes de conception. Et je vais également vous le montrer dans Adobe XD dans la prochaine leçon. Mais pour l'instant, consultez ces liens. Comme je l'ai mentionné, ils seront au format PDF. Assurez-vous d'explorer le plus possible et d' en apprendre le plus possible. Parce que vous pouvez voir que le système de conception n'est pas quelque chose que vous allez apprendre en un jour ou deux. Il faut vraiment des mois et des années pour qu'un bon système de conception se développe. Mais ne vous laissez pas décourager par la création de votre propre système de conception, car les avantages sont énormes  : au fur et à mesure que vous concevez, fur et à mesure que vous construisez et développez, vous allez étendre votre propre conception. système. Dans la prochaine leçon, nous allons parler d'Adobe XD. Que pouvez-vous créer dans Adobe XD en termes de systèmes de conception et comment pouvez-vous adapter votre système de conception dans Adobe XD ? Alors je t'y verrai. 121. Créer un système de conception dans Adobe Xd: Adobe XD est un outil génial car dans un seul et même outil, vous pouvez concevoir des prototypes et les partager avec vos clients, développeurs et parties prenantes. C'est excellent pour créer des systèmes de conception, et c'est ce dont nous allons parler dans cette leçon du cours, à savoir comment créer vos propres systèmes de conception dans Adobe XD. Plus tard, nous parlerons de la mise à l'échelle de ces systèmes de conception dans Adobe XD. Commençons donc. Me voici dans Adobe XD et j'ouvre jusqu' à 12 planches d'art 80 x 800. Il s'agit simplement du tableau d'art de base que vous trouverez sur l'écran d'accueil, ici même sur un Adobe XD D. Alors, comment créer votre système de design ? Eh bien, vous devez commencer petit, alors commençons par la grille. Donc, si je me cache pour que vous puissiez le voir, au lieu de lancer cette mise en page, je vais la passer à case n. C'est ce dont nous avons parlé précédemment pour le système de conception d' IBM. Ils utilisent cette itération de deux. Il va donc y avoir de très petits carrés ici, mais je vais utiliser le numéro huit, par exemple quelque chose comme ça. Ensuite, je vais allumer ma calculatrice et je vais l'apporter ici. Nous avons donc le 12e AT, pour la largeur. Donc 1280/8, c'est un sixième. Cela signifie que lorsque vous zoomez complètement ici, vous pouvez voir que ces carrés font huit pixels sur huit pixels car c'est la taille du carré. Si je les abaisse à deux, vous pouvez voir que leur taille a diminué, mais je vais les augmenter à huit parce que les huit pixels sont une sorte de norme industrielle ou une grille à huit points si tu le souhaites. Et c'est ce que nous allons utiliser pour notre système de conception imaginaire, ici même dans Adobe XD. Donc, pour commencer, nous pouvons créer quelque chose de petit, comme un bouton, par exemple, alors commençons par la topographie. Je peux donc dire quelque chose comme cliquer ici peut-être. Et utilisons peut-être quelque chose comme Open Sans, parce que c'est une police Google gratuite vous pouvez trouver en ligne. Et je vais le positionner approximativement ici. Allons-y avec 24, car 24 est divisible par huit, bien sûr. Ensuite, je vais créer mes boutons. Je vais donc créer un espace autour de cela. Et je vais cliquer avec le bouton droit de la souris pour le renvoyer à la fin pour que nous puissions voir nos textes. Maintenant, je peux commencer à jouer et à me positionner sur ma grille. Donc, si je maintiens la touche Alt, vous pouvez voir que j'ai 16 ans de ce côté, 16 de ce côté et 7,8 de ce côté, huit c'est bien, mais sept c'est moins. Donc, ce que vous pouvez faire ici n' est pas grand-chose, car Adobe XD, ces outils de texte ne sont pas vraiment aussi développés qu'Adobe Illustrator, par exemple ou Adobe Photoshop. Mais cela va très bien fonctionner dans ce cas car nous ne faisons que créer notre projet de démarrage ici même. Donc, la première chose à considérer, est-ce que c'est votre type trop grand ? Si c'est le cas, vous pouvez augmenter l'espacement à 16 de chaque côté, par exemple, mais vous pouvez toujours voir 15,15 ici. Si nous commençons comme ça, il y en aura toujours 15 à cause la façon dont Adobe XD traite le texte. Encore une fois, que pouvez-vous faire si vous travaillez avec une marque, qui nécessite ce langage, ce dont nous avons parlé précédemment, alors vous allez ajuster ce rayon d'angle à quelque chose comme huit, par exemple, et maintenant nous avons les coins arrondis. Donc 64 est la taille de notre bouton, divisible par huit, bien sûr, 144 divisible par huit. Nous pouvons donc maintenant procéder. Ensuite, il y a la convention de dénomination. Ce bouton est donc assez gros. Donc, par exemple, vous allez l'appeler btn. Btn Dash BG, bouton, arrière-plan, tiret grand. Et vous devez le faire dans l'ensemble de votre système de conception pour tous vos éléments, car de cette votre système de conception pour tous façon, vous saurez et les concepteurs de votre équipe sauront , les développeurs sauront, est-ce pour notre site Web, tablette, montre mobile ou quelle que soit sa taille ? La prochaine étape consiste donc à les regrouper. faut donc se demander d'où vient ce texte. Dans ce cas, il part de la gauche. Donc, si je passe la souris ici, vous pouvez voir qu'il est aligné à gauche et qu'il en est sorti. Il va donc automatiquement redimensionner le bouton non agrandi vers la droite. Ou vous pouvez le corriger si vous le souhaitez, vous pouvez cliquer sur des sites fixes et le bouton ne s'agrandira pas. Donc, en fonction de l'objectif des boutons, disons BTN, large et variable. Nous pouvons donc utiliser VAR, par exemple quelque chose comme ça, ou simplement l'appeler btn large. Et puis, si nous voulons que cela soit corrigé, nous pouvons l'appeler btn large fixe. Donc, encore une fois, gardez une trace de ce contexte BTN. Grand, mais grand. Si vous utilisez fixe, par exemple, ce sera pour l'arrière-plan du bouton, btn, BG, large fixe ou BT et BG. Un fixe plus grand comme vous voulez l'appeler. La convention de dénomination est donc vraiment cruciale, car dès que vous commencerez à ajouter de plus en plus de ces éléments de plus en plus de ces éléments, il vous sera beaucoup plus difficile de suivre ce que vous aurez créé ensuite. parce que nous voulons que ce bouton s'agrandisse, je vais activer le rembourrage. Ainsi, la prochaine fois que quelqu'un dira quelque chose comme maintenant, vous verrez que le bouton va s'étendre. Mais encore une fois, à cause de cet élément progressif que nous avons créé, si je clique ici, vous pouvez voir 16161516, il va s'étendre, mais vous pouvez toujours le remplacer. Donc, si je clique ici et si je l' étends encore plus ici, donc si je clique ici et que je l'étends à 20, peut-être que la migration sera bien meilleure en un clin d'œil. Vous pouvez donc toujours apporter ces modifications pour vous assurer que nous sommes en 136.64. tout est donc divisible par huit. Dans notre cas, si vous pensez grilles et à la manière de créer des grilles, vous pouvez bien sûr utiliser cette grille de huit pixels pour votre grille solide, disons 12 colonnes pour cette grande taille, huit colonnes pour taille tablette, quatre colonnes pour la taille mobile. Et en fonction des tailles que vous choisissez, vous allez choisir le nombre de colonnes et largeur de ces colonnes. Bien entendu, nous ne faisons que commencer. Vous pouvez voir à quoi cela ressemble. Et avant de poursuivre, je vais cliquer ici, accéder à mes bibliothèques et ajouter de la couleur, car c'est la couleur de mon texte dans ce cas. Et je vais ajouter un style de personnage. Alors, comment peux-tu appeler ça ? Et c'est très important, car nous entrons maintenant dans le domaine des jetons de design. Et je vais expliquer un peu plus en détail les jetons de design dans la prochaine leçon de ce cours. Mais en gros, je vais appeler cela h quatre, par exemple parce que c'est la taille de ce texte. Et pour la couleur, je vais la renommer en quelque chose comme, je ne sais pas, gris normal ou autre, tiret et gris ordinaires, quelque chose comme ça. Donc, tous les membres de mon équipe savent que, d'accord, c'est H pour « ouvert » depuis 24, et quand ils survolent, vous pouvez voir les opposés, espacement de 24 caractères, la taille 24 points. Vous allez donc être en mesure de le savoir tout de suite. Ensuite, il y a le bouton avec ou sans bordure. Comment allez-vous traiter cela, comment tous ces éléments vont s'accumuler. Est-ce qu'il en a, a-t-il le tiret ou pas ? Vous devez donc réfléchir à toutes ces choses, mais assurez-vous de créer plusieurs copies de ce bouton. Découvrez ce qui fonctionne, voyez ce qui ne s' arrête pas lorsque vous commencez à ajouter des éléments à ce bouton, assurez-vous de commencer par les composants. Donc, Ctrl ou Command K sur votre clavier pour créer un composant. Il s'agit de l'état par défaut. Le premier composant à créer est donc peut-être l'état de survol. Je vais donc l'appeler « hover ». Et la prochaine fois que quelqu'un survolera ce bouton, il changera peut-être de couleur. Donc, au lieu du blanc, vous pouvez peut-être le changer en quelque chose de léger comme celui-ci. Cliquez ici, appuyez sur Ctrl, Enter pour prévisualiser ce que nous créons. Et maintenant, lorsque je passe la souris sur ce bouton, vous pouvez voir qu'il est en état de survol. Voilà à quel point il est facile de créer le début d'un système de conception. Et maintenant, je vais vous montrer ce que j' ai créé ces deux dernières années. Et il m'a fallu six mois pour créer dans Adobe XD. C'est ce qu'on appelle le système de conception Inception. Et le voici. Il s'agit du fichier principal du système de conception Inception. Cela m'a pris six mois de travail continu pour le créer. Et vous pouvez obtenir ce système de conception si vous le souhaitez. Je vais laisser le lien dans un PDF. Voici la page Inception Design System.co. Et encore une fois, je laisserai le lien dans le PDF. Vous pouvez cliquer ici et accéder à ma chaîne YouTube pour regarder le cours gratuit. Dedans. Je passe en revue chaque élément. Je pense que cela dure environ une heure ou quelque chose comme ça. Il se trouve sur ma chaîne YouTube et vous pouvez le regarder pour en savoir plus sur son fonctionnement et ce qui est inclus. Vous pouvez le voir, vous pouvez concevoir plus rapidement. Vous pouvez lire quelques critiques. Il est conçu pour être mis à l'échelle à l'aide d'une grille de huit pixels. Il a une structure moléculaire comme nous l'avons mentionné. Il s'agit de locaux et de clouds qui peuvent travailler à la fois localement et dans le cloud avec vos collègues. Et il contient des organigrammes, des modèles et des icônes Lottie, qui sont des icônes animées. Il est conçu à l'aide des dernières fonctionnalités telles que les piles, les composants, les états et les acides de documents. Permettez-moi donc de revenir à Adobe XD et de vous montrer. Tout d'abord, qu'est-ce qui est inclus dans ce système de conception ? Nous avons ici quelques informations et directives de base sur le système de conception lui-même, comment l'utiliser et où l'utiliser. Ensuite, nous avons les grilles. Nous avons trois tailles d'écran différentes, essentiellement des tailles d'écran. Nous avons des tailles grandes, moyennes et petites, ou des ordinateurs de bureau, des tablettes et des appareils mobiles, indépendamment de la taille, nous avons différents numéros de colonne de couleurs différentes. Donc, pour les grandes, nous avons 12 colonnes. Pour le support, nous avons huit colonnes et pour le petit, nous en avons quatre. Nous avons ici les guides et vous pouvez facilement copier ces guides et les coller dans vos tableaux d'art. Ensuite, nous avons la topographie et vous pouvez voir que j'ai divisé la topographie en deux rubriques et un corps. Les titres sont disponibles dans ces différentes tailles et les corps dans ces différentes tailles. Ensuite, nous avons les couleurs, les couleurs principales et les couleurs de soutien. Vous remarquerez que je n'ai pas d'ombres ici et c'est dans un but précis car lorsque vous aurez ce système de design, vous pouvez ajouter vos propres ombres. Et ils s'adapteront au système de conception lui-même. Ensuite, nous avons le logo que vous pouvez remplacer par le logo de vos clients. Nous avons ces différents logos que vous pouvez utiliser dans vos projets. Nous avons des icônes et tout de suite, vous remarquerez ces grilles de huit pixels, donc de taille carrée. Et si je le cache ici, juste pour que vous puissiez voir le système de conception lui-même un peu mieux. Ensuite, nous avons des icônes ici, et ce sont des icônes statiques. Et bien sûr, le système de conception est également livré avec des icônes animées, qui fonctionnent de manière native dans Adobe XD, ce qui est idéal pour le prototypage. Ensuite, si je zoome un peu, nous avons ici des atomes et des molécules, et vous pouvez les trouver ici. Si vous l'ouvrez, vous pouvez voir que nous avons des grilles, des icônes, des avatars, des listes déroulantes, des modèles d'images, une pagination, ligne d'application, une recherche par accordéon et bien plus encore. Tous ces éléments sont donc des atomes et des molécules. Et si je zoome un peu plus près, tu peux voir. Nous avons donc des boutons, entrées de texte, des sélecteurs, des zones de texte, des cases à cocher, des sélecteurs de date radio, des sélecteurs, des commutateurs de contenu, des onglets, des indicateurs de progression, des entrées numériques, des accordéons, des images qui sont extrêmement importants. Nous avons des blobs, des listes déroulantes, nous avons différents appareils, des notifications, une pagination, Zapatero est le modèle, et bien plus encore que sur le côté gauche, nous avons des organigrammes, qui sont situés ici. Donc, si je zoome, nous avons des organigrammes de bureau, des organigrammes mobiles, puis nous avons des éléments de flux de tâches. Bien entendu, pour les flux de tâches, nous avons des éléments d'organigramme qui sont utilisés pour relier ces différents organigrammes. Et puis ce que nous avons ici, nous avons ces formats de papier. Nous avons donc ici un portrait au format A4, paysage, un portrait aux lettres américaines et un paysage. Et chacun d'entre eux, si je passe dans le panneau Calques ici et que je clique à l'intérieur, il contient différents éléments qui sont utilisés pour vous aider à créer plus rapidement à l'aide de ce système de conception. Donc, si je le sélectionne, vous pouvez voir que nous avons ici une grille à points. Donc, si j'active cette grille de points, vous pouvez voir à quoi elle ressemble. J'ai donc même une vapeur ici, que je vais vous montrer tout de suite, qui a été utilisée récemment pour l'une de mes diffusions en direct mes diffusions en direct et vous pouvez la retrouver sur ma page YouTube. Donc, si je m'en rapproche, ce papier a en fait été créé à l'intérieur de ce système de conception. Et il a en fait été imprimé puis dessiné à l'aide d'un stylo ordinaire. Vous pouvez donc constater à quel point cela est polyvalent et utile lorsque vous créez de tels éléments dans votre système de conception. Donc, pour y revenir, nous avons aussi nos téléphones. Donc, il a montré que vous pouviez utiliser ces téléphones. Bien évidemment, imprimez-les comme je vous l'ai montré avec ce papier en particulier. Et vous allez remarquer qu' ils seront positionnés ici. Et évidemment, si le papier est un paysage comme celui-ci, il sera positionné différemment et il utilisé pour le cadrage du papier si vous le souhaitez. Ensuite, nous avons un navigateur réactif, un navigateur de bureau et un navigateur mobile, et il en va de même pour toutes ces tailles. Ensuite, nous avons les informations relatives à l'organigramme. Nous avons le nom du projet client, la date limite, nombre de pages du site Web , le nombre d'écrans d'applications, et vous pouvez bien sûr combiner une grille à points et l'organigramme pour changer de place, vous pouvez les positionner, les imprimer et y créer essentiellement des composants et des organigrammes. Et enfin, ce que nous avons, si je change ici, nous avons les modèles. Nous avons ici des modèles de trois tailles différentes, comme je viens de le mentionner précédemment. Nous avons donc des grandes, des moyennes et des petites, et elles se trouvent ici. Il s'agit donc de grands modèles répartis en 15 catégories différentes. Il s'agit de petits modèles appartenant aux mêmes catégories, mais simplement ajustés à la taille de la tablette. Et ce sont des modèles, petits ou moyens, et ceux-ci sont petits pour les tailles de téléphone. Alors, comment fonctionne tout cela ? En gros, si j'ouvre cela, nous avons des couleurs, donc nous avons des couleurs principales et des couleurs de soutien, comme je l'ai dit. Et ce sont les principaux composants. En somme, si je change de couleur, ce bleu océan juste ici, par exemple, peux simplement modifier ici et changer la couleur. Il va mettre à jour cette couleur en temps réel partout où cette couleur se trouve dans ce système de conception. Donc, à partir d'ici et l' échantillon jusqu'ici, en passant par ici et par ici, il va être mis à jour en temps réel et changer et mettre à jour cette couleur. Si vous décidez d'obtenir ce système de conception et que vous commencez à travailler sur un projet pour votre client. Vous pouvez simplement remplacer ces couleurs par les couleurs de vos clients cela changera tout au long de ce système de conception. Il en va de même pour les styles de personnages. Donc pour les rubriques, par exemple si je décide de changer cela, c'est Proxima Nova pour le moment. Mais par exemple, si vous décidez de le transformer en science ouverte, comme je l'ai dit, vous pouvez le mettre à jour en temps réel. Cela va changer tout au long de votre conception. Ensuite, nous avons ce que j'ai dit, atomes et des molécules, des organigrammes et des modèles, et comment pouvez-vous les utiliser ? C'est vraiment très simple. Permettez-moi donc d'utiliser ce gros dépose-le ici. Et je vais te montrer. Donc, si je clique ici, disons que je souhaite masquer ces colonnes juste pour que vous puissiez voir ce que je fais. Et disons que je souhaite faire glisser et déposer certains éléments à l'intérieur pour que ce soit bon pour les atomes et les molécules. Et activons cette mise en page en fait. Mais passons au carré juste ici, juste pour que vous puissiez voir ce que je fais réellement. Allons-y avec quelque chose comme une liste déroulante, une grande liste déroulante. Faisons-le glisser et déposez-le à l'intérieur. Vous pouvez voir à quoi il ressemble pour que je puisse le positionner où je veux. Et puis revenons à nos chroniques. Cliquez sur notre liste déroulante, positionnez-la ici et vous verrez qu'elle fonctionne immédiatement. Et comme il s'agit d'un composant avec plusieurs états, vérifions l'état de focus, par exemple récupérons ouvert. Et je peux bien sûr m' y intéresser, m'adapter et modifier n'importe lequel de ces états. Donc, au lieu de dire liste déroulante large, vous pouvez peut-être indiquer votre pointure ou la couleur de vos chaussures ou tout ce que votre projet exige que la beauté de ce système de design. Ce sont donc des atomes et des molécules. Bref. En gros, vous pouvez les adapter et les utiliser comme vous le souhaitez. Et laissez-moi vous montrer rapidement les modèles. Nous avons donc ici les modèles et utilisons-en grand. Ce dont nous avons besoin, c'est de la navigation. Alors glissez et déposez mon navigateur, par exemple, je vais le mettre à la position souhaitée. Fermez ceci. Utilisons la section des héros. Allons-y sur le numéro quatre, par exemple positionnons-le ici et ici. Fais peut-être quelque chose comme ça. Alors ce que nous pouvons faire, c'est utiliser l'appel à l'action peut-être, alors utilisons le cinquième appel à l'action. Prenez-le en photo, assurez-vous qu'il est au centre, juste là, jusqu'à ce qu'il rencontre notre section de héros et que vous ayez l'idée. Vous allez simplement glisser-déposer ces éléments à l'intérieur. Tu vas les construire. L'avantage de tous les modèles et de tous les organigrammes, c'est qu'ils sont disponibles en deux modes différents. État par défaut, qui est le mode clair et le mode sombre. Donc, si je clique sur ma navigation, je repasse en mode sombre, clique ici, que je passe en mode sombre, clique ici, que je passe en mode sombre en quelques clics. Et si je cache ma grille juste pour que tu puisses voir que nous l'avons. Donc, si je le prévisualise très rapidement, vous pouvez voir à quoi il ressemble en temps réel. Il a même ces effets de survol. Et bien sûr, lorsque vous modifiez et adaptez tous ces composants, par exemple ce logo, et que vous le remplacez par le logo d'un client. Vous pouvez ajouter différentes icônes, vous pouvez ajouter différentes images. Il va s'adapter en temps réel. Et c'est tout l' intérêt d'un système de conception, c'est de vous faire économiser des milliers et des milliers d'heures créer ces tâches ennuyeuses car il n'y a rien au monde que je déteste le plus. Et pour créer des pieds de page, j'ai mon pied de page ici. Cliquez donc ici, faites glisser et déposez la position du pied de page à cet endroit, par exemple Snap, c'est un mode trop sombre comme ça. Positionnez-le ici. Appuyez une fois de plus sur Aperçu. Et voici mon pied de page en place. C'est la beauté de ces systèmes de conception, c'est de créer rapidement, de créer une échelle de largeur. Et c'est ce que vous pouvez voir avec ce système de conception Inception en particulier, que j'ai créé au cours des six derniers mois, c'est que j'ai créé tous ces éléments. Permettez-moi donc de supprimer ceci. J'ai créé tous ces éléments, mais je peux facilement les redimensionner. Je peux ajouter d'autres éléments ici en utilisant des éléments existants, je peux les repositionner, les réorganiser , changer leurs couleurs, changer leur rayon d'angle. Parce que si je zoome de très près sur l'un de ces boutons, vous pouvez voir que le rayon d'angle est de quatre si je vous montre ici, mais peut-être que je voudrais modifier le rayon d'angle sur ce bouton principal vers quelque chose d'un peu plus grand. Laisse-moi zoomer pour que tu puisses voir tous les états un peu plus grands, jusqu'à environ 20. Appuyez sur Entrée. Et vous pouvez voir en temps réel cela changera partout où se trouve ce bouton, partout où ce bouton est utilisé, pas seulement ici, mais également dans tous mes modèles. Il va donc être mis à jour en temps réel. C'est l'essentiel des systèmes de conception. Dans Adobe XD. Vous devez les modifier dans les composants par défaut et tous ces composants que vous glissez et déposez Je vais vous montrer nos composants enfants. Vous pouvez donc le modifier, l'adapter et utiliser ces modifications locales. Par exemple, dans cette section sur les héros que je viens de vous montrer précédemment, vous allez mettre à jour le texte. Vous voulez ajouter votre propre texte, vos clients taxent peu importe, puis la composante dette changera . Mais si nous voulons apporter modifications plus globales, comme la couleur d'arrière-plan , la police, etc., vous allez apporter ces modifications ici même, dans les composants principaux, Le système de conception Inception est livré avec deux fichiers, le fichier maître et le fichier léger. En gros, la seule différence est à l'intérieur du fichier principal, que je viens de vous montrer, vous pouvez voir tous les éléments ici en un seul endroit, à l'intérieur du fichier léger. Vous ne pouvez pas le faire parce que je les ai tous volontairement supprimés du canevas afin de garder le plus de canevas libre possible afin que nous puissions concevoir sans aucune distraction comme les regarder ici. Il s'agit donc peut-être de diviseurs pour commencer par le fichier maître pour apprendre tous ces composants. Bien entendu, j'ai fourni des images de tous ces composants qui permettent de voir en un coup d'œil à quoi ressemble le composant quoi ressemble le modèle avant de commencer à travailler avec ceux-ci. La dernière chose que je voulais vous montrer à ce sujet, ce sont ces organigrammes. Alors laisse-moi les ouvrir ici. Fermons donc les modèles, ouvrons les organigrammes. Passons aux organigrammes de bureau. Utilisons l'en-tête, par exemple et glissez-le et déposez-le ici. Utilisons le contenu. Peut-être que je veux le positionner ici. Utilisons autre chose, comme la position du curseur ici. Alors, l'avantage de ces composants, c'est que vous pouvez simplement les dupliquer en les positionnant ici. Et comme ce sont les composants, comme je l'ai dit, vous pouvez simplement cliquer sur faire glisser pour remplacer ce composant en temps réel. Alors, portefolio, glissez-le et déposez-le ici. Je voudrais peut-être utiliser le formulaire numéro cinq. Mon client dit que je n' aime pas l'apparence de la formule Phi. Peut-être que tu peux essayer autre chose, d' accord, pour le numéro trois, voilà. Vous pouvez voir à quel point c'est très simple de les créer. Lorsque vous souhaitez connecter tous ces éléments, fermons ceci. Utilisons donc les éléments de l' organigramme. Utilisons par exemple des chiffres. Passons donc au numéro un. Peut-être que c'est la première page, par exemple fermons-la. Utilisons les flèches. Je vais donc utiliser cette flèche, la faire glisser et déposer en place. Peut-être que lorsque les utilisateurs cliqueront sur ce bouton ici, ils accèderont à cette page. Je vais donc simplement étendre cela et sélectionner ma gamme et mes produits laitiers, mais voici à quel point c' est très simple à utiliser et à créer n, par exemple si vous l'avez laissé tomber, disons arabe par erreur, Je veux le remplacer. Je veux le faire avec celui-ci. Et voilà. C'est l'erreur que je recherchais. Par exemple, à partir de cette paire, à partir de ce curseur, je veux qu'ils accèdent à cette pièce de portfolio. Vous pouvez voir à quel point c'est très simple à créer. C'est ce qui fait la beauté de ces systèmes de conception. C'est évidemment extrême, comme je l'ai dit, il m'a fallu plus de six mois pour tout créer. Cela m'a demandé deux ou plus de deux ans de recherche. Et si je vous montre certains de ces modèles, vous pouvez voir à quoi ils ressemblent. Nous avons donc ici un appel à l'action pour l'avenir. J'ai donc fait des recherches pour déterminer ce qui est le plus utilisé dans l'industrie. Quelles sont les normes de l'industrie et quelles sont les plus utilisées ? Donc, les grilles de contenu, les prix, nous avons le blog, nous avons un identifiant et nous avons des forums, contactez-nous. Et bien plus encore. Et tout cela est réactif, comme je le montre ici. Et tout cela utilise x, ces dernières fonctionnalités. Donc, si je clique ici et que je saute à l'intérieur de ces images, vous pouvez voir que nous avons la pile, nous avons le jumelage. Donc, si je choisis de changer cette balise, par exemple , je peux cliquer ici, et cela changera la direction de cette pile dans cette direction. Et vous remarquerez que cela va réduire ce contenu et qu'il s'adaptera de la même manière à ce que je crée sur mon système de conception. Encore une fois, si cela vous intéresse, Design System est Inception Design System.co. Il existe un cours YouTube pour cela. Tout est expliqué de manière beaucoup plus détaillée. Vous pouvez consulter cette page pour voir l'avenir. Comme je l'ai mentionné, atomes ou molécules, organismes, organigrammes, modèles, mode sombre, icônes animées, cours inclus. Tout cela se trouve donc dans le système de conception Inception. Si vous souhaitez créer votre propre système de conception, assurez-vous simplement de faire attention à deux choses. Assurez-vous lorsque vous commencez à vous adapter à un objectif précis. Ne vous contentez pas d'effectuer une mise à l'échelle à des fins de mise à l'échelle et veillez à n'utiliser que les éléments nécessaires à votre système de conception. Pour mon système de conception, j' ai utilisé des éléments issus de mes recherches que la majorité des designers utilisent. Mais pour votre système de conception, vous n'allez peut-être pas utiliser ces éléments. Peut-être que tu vas utiliser autre chose, autre chose. Mais en gros, commencez par petits éléments tels que des boutons, comme je vous l'ai montré, puis développez à partir de là , ajoutez des composants, mais assurez-vous ajouter uniquement les composants qui sont vraiment nécessaires dans votre système de conception. Dans la vidéo suivante, nous allons parler des jetons de conception, ce qu'ils sont élaborés, d' un peu plus en détail à leur sujet et de la manière de les utiliser dans votre système de conception. Alors je t'y verrai. 122. Des tokens de conception: Les jetons de conception sont au cœur de tout bon système de conception car ils constituent un excellent outil de collaboration entre les concepteurs, les développeurs et les parties prenantes. Dans cette vidéo, je vais vous montrer comment je m'y prends et comment s'y prennent certaines grandes entreprises, et quelles sont les meilleures pratiques en matière de jetons de design ? Commençons donc. Nous voici donc de retour dans Adobe XD et encore une fois dans le fichier master de mon système de conception Inception, que je vous ai montré dans la vidéo précédente. Et les jetons de design se trouvent juste ici, sur la gauche. En gros, ce que j'ai mentionné précédemment dans la leçon précédente, ils portent le nom. Ce nom est donc très utile car lorsque vous collaborez avec d'autres designers, disons que je souhaite utiliser cette couleur de l'océan pour, disons, la couleur de fond de notre modèle ou quelque chose comme ça. Ensuite, je dois dire cela à mon collaborateur en matière de design ou à mes collègues de conception : disons utiliser cette couleur bleue à l'intérieur de l'arrière-plan de ce modèle. Mais nous avons plusieurs couleurs bleues, quel col bleu ? Utilisation. Un B8, un F9. Encore une fois, cela va être très difficile pour les gens, surtout si vous travaillez avec eux très éloignés les uns des autres. Si vous travaillez à domicile avec vos coéquipiers, il leur sera difficile de mettre en œuvre ce changement. Et il va être difficile pour tous les l'équipe de se souvenir de ce code hexadécimal, par exemple , c'est pourquoi nous utilisons des noms. Dans ce cas, je peux simplement leur dire d' utiliser le bleu océan arrière-plan du modèle et tout le monde sera sur la même longueur d'onde. Ocean est beaucoup plus facile à retenir que, par exemple, un hashtag 1, un B8, un f e, 9 ou autre. Les développeurs peuvent donc utiliser la même fonction et je vais vous le montrer en une seconde dans un grand système de conception. Mais en gros, c'est tout l'intérêt du design. Les jetons les utilisent judicieusement et utilisez-les au fur et à mesure que votre système de conception évolue. Bien sûr, vous pouvez les utiliser pour le texte. Dans ce cas, je n'ai que le titre et le corps, mais par exemple vous pouvez utiliser la taille de caractère spécifique pour des éléments spécifiques, par exemple si le caractère se trouve juste en dessous, disons même des animations ou des illustrations mieux, alors vous pouvez les utiliser conjointement avec ces illustrations, par exemple, une illustration de titre, une illustration de titre grande, une illustration de titre est petite ou autre. Et puis, lorsque vous avez demandé à vos développeurs de changer le titre, grand outil d'illustration, disons 64 points. Tous les membres de l'équipe seront en mesure comprendre bien mieux que, sinon, ce que j'ai mentionné précédemment propos des composants et des différents noms de composants. Donc, si nous zoomons ici sur mes boutons, par exemple pour changer, le panneau des couches, cliquez ici. Vous pouvez voir que les boutons par défaut sont grands, car ce sont de gros boutons. Ensuite, nous avons le bouton par défaut, moyen, le bouton par défaut petit. Ce sont donc des boutons par défaut, mais si je passe à autre chose, par exemple ici, nous avons des sélecteurs. Sélecteurs pour la valeur de la ligne, grands sélecteurs pour la valeur de la ligne, sélecteurs moyens pour la valeur de la ligne, disons une valeur petite ou autre. Vous devez donc faire attention à tous ces détails. Et nous avons des images. Nous avons donc pris une image en grand format et combien de colonnes prend votre image ? Donc, dans ce cas, image grande à colonne image grande image à neuf colonnes de plus de 12, pleine largeur, support plein écran même histoire, petite, même histoire. Ensuite, nous avons des appareils, par exemple un appareil, un tableau de bord, un navigateur ou autre. Vous devez donc utiliser ces jetons de conception pour expliquer ce que vous créez dans votre système de conception et ce pour quoi chaque jeton de conception est conçu en premier lieu. Je vais donc maintenant vous montrer ceci, qui est un système de conception Salesforce Lightning Design. Les jetons de conception vous le montrent déjà dans la leçon précédente où nous avons parlé de tous ces systèmes de conception géniaux. façon dont ils l'utilisent est fondamentalement identique. Nous avons donc une variante sombre et accessible à la marque, accessible en blanc. Ils utilisent donc des combinaisons et ils utilisent ces supports. Vous pouvez ainsi voir l'accès mondial disponible sur la plateforme. Sinon, je peux passer la souris ici, interne, donc disponible pour les développeurs internes de Salesforce uniquement sous réserve de modifications. Ils ont donc mis en place toutes ces règles dès sa sortie. Donc numéro de version 1234 et ainsi de suite, T-Mobile. L'utilisent-ils donc avec une équipe ? L'utilisez-vous avec une application ? L'utilisez-vous pour le front-end ou le back-end ? Vous l'utilisez pour ce que les visiteurs voient, ou pour le tableau de bord interne ou le tableau de bord des visiteurs, vous devez étiqueter tous ces éléments. Et ici, vous pouvez voir autre chose. Ils utilisent donc d' abord des valeurs RGB et hexadécimales. Ensuite, la majorité des marques utilisent l'inverse, c'est-à-dire qu'elles utilisent d' abord la valeur hexadécimale, la valeur RGB ensuite. Vous devez donc prendre en compte tous ces éléments en ce qui concerne votre propre système de conception. C'est pourquoi j'ai créé cette structure simple dans système de conception Inception, car la majorité des gens sont capables de comprendre que nous nous concentrons. C'est donc juste pour la défocalisation, mais si je crée une variation de la mise au point, par exemple différentes nuances de mise au point. Je vais peut-être dire quelque chose comme se concentrer à 80 %, le bouton de mise au point ou le focus. Je ne sais pas, section héros ou autre. Vous allez le dire à l'intérieur du jeton de design lui-même. Tous les membres de l'équipe seront donc en mesure de le comprendre. Et si je vous montre ici encore une fois, si nous faisons défiler la page un peu plus vers le bas, vous pouvez voir combien de couleurs différentes ils ont. Choisissons-en donc un au hasard, par exemple celui-ci, palette cloud blue, 15. Ils ont donc 15 variantes différentes de cette palette. Couleur bleu nuage. Non, ce n'est pas un T-Mobile et ici, ils l'utilisent en interne. Il s'agit de la version 2.14, 0.0. Et vous pouvez voir un nuage bleu poli, ainsi que la façon dont ils l'utilisent et comment ils fonctionnent. Donc, en gros, comme je n'arrête pas de le mentionner , tout dépend de votre projet, de vos besoins . Vous n'aurez pas toutes ces couleurs différentes si vos clients n'en ont pas besoin pour ces couleurs différentes si vos clients un projet. Alors pourquoi s'embêter à créer et passer autant de temps à créer toutes ces couleurs, nuances, variations et bien plus encore alors que vous pouvez vous en tirer avec quelque chose comme ça, par exemple juste quelques couleurs ici et puis, et c'est l' essentiel et Keating, lorsque le projet coûte, vous pouvez toujours ajouter plus de couleurs. Donc, par exemple, laissez-moi vous le montrer également. Cliquons pour sélectionner cela. Changeons-le pour « je ne sais rien », peu importe, ici. Et si nous voulons ajouter cette couleur, je peux simplement cliquer ici. Et je peux dire quelque chose comme renommer, peut-être appeler ça blob purple, quelque chose comme ça. Est-ce la couleur principale de ma carte secondaire ? C'est ce que l'on appelle les couleurs principales. Alors mets-le juste ici, blob purple. Et puis, lorsque je sélectionnerai mon blog, la prochaine fois que je pourrai cliquer sur Blood, le violet s'appliquera en même temps. Par exemple, si nous avons ces blobs dans la section héros de votre site Web, par exemple, ou s'il s'agit de votre application, vous pouvez indiquer votre design. Coéquipiers, remplacez le blob numéro 5 par un blob de couleur violette. Cliquez, cliquez sur OK. C'est pourquoi les jetons de design sont géniaux. C'est pourquoi ils sont utiles, car vous pouvez les utiliser pour créer tous ces éléments dans votre système de conception. C'est beaucoup plus rapide et tous les votre équipe peuvent être sur la même longueur d'onde et comprendre ce que vous créez bien plus rapidement que si vous n'utilisiez pas ces jetons de conception au départ. Dans la prochaine leçon, nous parlerons de la mise à l'échelle de votre système de conception. Quand devez-vous le faire et comment devez-vous le faire ? Je t'y verrai. 123. Évoluer votre système de conception: Lorsque vous adaptez votre système de conception, vous devez toujours le faire dans un but précis et vous devez toujours le faire étape par étape. Pourquoi le redimensionnez-vous ? Où comptez-vous l'adapter ? Pour quelles pages, pour quelles tailles, pour quels appareils, vous devez penser à tous ces éléments au fur et à mesure que vous évoluez. Passons donc à Adobe XD Je vais vous montrer et vous donner quelques conseils pour savoir quand et comment adapter vos systèmes de conception. Nous voici donc à nouveau dans Adobe XD dans fichier principal de mon système de conception Inception. Si vous souhaitez consulter ce système de conception, assurez-vous de cliquer sur le lien dans le PDF et voilà, vous pouvez le consulter si vous êtes intéressé. Dans ce cas, disons que vous venez de créer ces boutons et que vous avez choisi ces trois tailles. Si grand, moyen et petit. Et à partir de là, vous voudrez peut-être ajouter une taille extra large. Que devez-vous faire ? Vous devez d'abord consulter vos développeurs Dois-je créer différents boutons pour cette très grande taille ou êtes-vous capable de les redimensionner et de les repositionner ? Encodez, par exemple, peut-être que la très grande taille du bouton lui-même n'est pas vraiment nécessaire. Peut-être que l'espacement devrait être ajusté et qu'il s'adaptera à une taille plus grande. C'est pourquoi la communication entre les concepteurs et les développeurs est essentielle. Vous n'investissez donc pas votre temps dans ces changements qui ne sont pas vraiment nécessaires et obligatoires. Donc, s'ils ne sont pas obligatoires et nécessaires, vous obtiendrez un look épuré comme celui-ci. Mais si c'est le cas, vous aurez peut-être 20 tailles de boutons différentes. Et puis plus tard, vous déciderez que, par exemple la taille 7 n'est pas vraiment nécessaire. Quelles tailles utiliser. C'est très simple. Vous devez parler à votre client et à l'entreprise pour laquelle vous travaillez. Quelles sont les tailles utilisées par vos utilisateurs ? S'ils n'en utilisent, par exemple qu'une seule grande majorité. Assurez-vous de concentrer toute votre attention sur cette taille unique. Et puis, lorsque vous attirez plus d'utilisateurs par la suite, par exemple, ces utilisateurs arrivent, la majorité d'entre eux arrivent à la taille d'un ordinateur de bureau, disons que la majorité d'entre eux utilisent ordinateurs portables et puis tout à coup, un afflux massif de nouveaux utilisateurs utilisent l'iPhone. Alors, comment adapter cette taille de bureau à la taille de l'iPhone ? Vous devez donc parler à vos clients, vos développeurs, vous devez faire vos recherches en permanence. Et puis, lorsque vous effectuez une mise à l'échelle, cela n'a pas vraiment de sens de passer à une tablette si vos utilisateurs n'utilisent pas de tablettes. Pensez donc à toutes ces choses, mais pensez-y au fur et à mesure que vous créez votre système de conception, car il n'y a pas de point d'échelle. Pour des raisons d'échelle, cela a tout l'intérêt d'évoluer un but précis, à savoir attirer de nouveaux utilisateurs, répondre aux besoins et aux désirs des nouveaux utilisateurs, et vous devez donc évoluer en gardant cela à l'esprit. De plus, comme je ne cesse de le mentionner tout au long de ce cours, ne créez pas d'éléments inutiles. Par exemple, si vous ne soutenez pas les avatars, car vous avez peut-être des profils dans votre projet, dans votre produit, dans votre tableau de bord ou autre. Peut-être que vous n' avez pas la possibilité pour eux de se connecter et de créer leur compte, alors pourquoi créeriez-vous des avatars ? Cela n'a pas vraiment de sens. Ne les créez pas simplement pour être là, mais parce qu'ils ne sont pas nécessaires à votre projet. Et n'aie pas trop peur. Par exemple, si vous venez de créer une info-bulle et que vous n'en avez pas créé 50 différentes. Peut-être qu'ils ne le sont pas nécessairement. Et Tooltip, comme son nom l'indique, est très simple car il ne s'agit que de quelques informations. Ne prêtez donc pas trop d'attention à toutes ces petites choses. Assurez-vous de bien faire les choses importantes, comme la mise en page, les grilles, la grille d'espacement , l'horizontale et la verticale. Débarrassez-vous de toutes ces choses avant de vous soucier des infobulles. Et une dernière chose que je voudrais vous dire à propos l'échelle de votre système de conception concerne ces modèles. Donc, si nous zoomons ici et que nous vous montrons, nous avons là des équipes d' appel à l'action Futures. Peut-être que nous avons des notes de contenu, peut-être que nous avons un portefeuille, des prix et, par exemple vous créez un tableau de bord. À l'intérieur de ce tableau de bord, vous aurez une seule page qui n'est qu'une vue d'ensemble, par exemple , vous allez leur donner la possibilité de voir, je ne sais pas, disons des dépenses mensuelles ou quelque chose comme ça. N'entrez pas trop dans les détails. En adaptant de nouveaux composants pour qu'ils fonctionnent avec cela, vous pouvez peut-être utiliser les composants existants et laisser les développeurs intégrer la solution qui n'est pas native. S'il est natif, comme les graphiques, par exemple , vous devez créer un design pour un seul graphique et ne pas embêter à créer plusieurs graphiques, à faire plusieurs choses juste pour avoir avec tous ces graphiques, assurez-vous de vous concentrer sur ce qui est nécessaire pour ce projet. Ensuite, au fur et à mesure que de nouvelles fonctionnalités seront ajoutées ultérieurement, veillez à évoluer en fonction de ces nouvelles fonctionnalités et de votre système de conception. Ne vous embêtez pas à créer les éléments qui ne sont pas nécessaires ou pas nécessairement, car cela ne fera qu'encombrer votre système de conception et ralentir votre progression sur ce projet en particulier et la progression de vos développeurs. Parce que n'oubliez pas que tout ce que vous concevez, à l'intérieur de votre système de conception, les développeurs doivent faire appel aux développeurs. Ne gaspillez donc pas leur temps précieux si ces éléments ne se trouvent pas nécessairement au moment. Et vous pouvez créer un backlog. Ainsi, par exemple, ces éléments , disons, sont nécessaires pour le moment. Ces éléments sont nécessaires dans trois mois, ces éléments sont nécessaires dans six mois. Vous pouvez ainsi créer des arriérés d'éléments. Et au fur et à mesure que le projet avance, mesure que le projet avance, vous pourrez aborder ces éléments un peu plus tard car ils ne sont pas nécessaires pour le moment. Donc, encore une fois, et enfin, l'échelle, car elle doit être mise à l'échelle, ne vous contentez pas d'évoluer pour le plaisir de la mise à l'échelle. 124. AFFECTATION de l'article 15: Pour cette section, vous devez simplement utiliser deux ou trois éléments différents dans Adobe XD et essayer de vous entraîner à créer votre propre système de conception. Parce qu'à partir de ces éléments de base, vous pouvez vraiment vous diversifier, comme vous l'avez vu dans cette section du cours, et créer des systèmes de conception massifs que vous pourrez utiliser tout au long de vos projets. N'essayez pas d'investir trop de temps dans cette approche pour le moment, mais assurez-vous d'avoir cette approche à l'esprit, surtout si vous ne faites que commencer et que cela vous semble un peu confus, Ça a l'air un peu difficile, toi. N'essayez pas de trop vous en charger. Vous pouvez utiliser des éléments comme je l'ai mentionné dans la section précédente. Avec les kits d'interface utilisateur, vous pouvez utiliser l'un de ces éléments, par exemple , les remplacer ici et là simplement les remplacer ici et là pour accélérer un peu votre processus. Mais c'est tout l' intérêt d'accélérer votre processus. Car où que vous travailliez, vous essayez toujours d'être plus rapide. Tu essaies toujours d' être plus précis. Vous essayez toujours de livrer à vos clients un peu plus rapidement et sans aucune révision si possible. Les systèmes de conception vont donc vous permettre de mourir. Comme je l'ai dit, ils sont extrêmement importants, mais si vous ne faites que commencer et que tout cela semble un peu trop long, ne vous inquiétez pas. Vous pouvez toujours y revenir plus tard dans votre carrière. 125. Conception de site Web dans Adobe Xd: Très bien, nous y voilà. Après tout ce temps, nous allons enfin commencer le design. Et dans cette section du cours, nous allons commencer à travailler sur notre design, qui sera destiné à un concessionnaire automobile exclusif. Ils vont vendre des voitures d'occasion. Et nous allons l' aborder en utilisant certaines des méthodologies que nous avons mentionnées dans le cours jusqu'à présent. Et après avoir créé le design, après avoir créé différentes interactions sur notre design, après avoir choisi les couleurs, nous avons choisi la typographie, nous avons choisi les bonnes images, nous avons choisi la bonne mise en page et nous l'avons testée, nous nous sommes entraînés avec elle et nous comprenons, et nous obtenons le résultat final de la part de notre client. Ensuite, nous allons le transférer dans le flux de travail. Commençons donc par cette section. 126. Résumé de design: Très bien, allons-y directement et commençons par notre brief de conception. Et ce que j'ai ouvert ici, ce sont les modèles Adobe XD du brief de conception, que je vous ai déjà montrés dans l'une des leçons précédentes sur le brief de conception lui-même. Et vous pouvez obtenir ce modèle et vous pouvez l'utiliser. Je vais partager l'original, et je partagerai également celui-ci, qui contient les informations sur le projet que nous allons couvrir. Et comme vous pouvez le voir, c'est complètement le même que celui que je vous ai déjà montré tout à l'heure. Sans plus attendre, rencontrons notre client pour ce projet. Ce sera donc un client imaginaire, basé en fait sur un vrai client que j'ai eu il y a quelques années. J'ai donc tiré les leçons, les étapes et les approches de ce projet en particulier. Et je l'ai intégré directement à ce projet. J'aime toujours l'utiliser et le faire pour mes cours. J'aime toujours utiliser de vrais projets, ce fait auparavant , les transformer en connaissances et en ce que j'ai appris sur eux pendant que je travaillais sur eux, en les transformant en véritables cours et en vous montrant quelques de mes approches et de certaines de mes méthodologies. C'est donc la même histoire pour celui-ci, mais parce que c'est extrêmement difficile, étant donné que nous avons affaire à des voitures trouver des images de voitures que vous pouvez utiliser plusieurs angles différents qui seront abordés dans une seconde où nous parlerons de différentes images que nous allons utiliser dans ce cours. C'est vraiment difficile à faire. C'est pourquoi j'ai choisi ce client imaginaire car, comme je l'ai dit, de vraies voitures avec tous ces angles différents sont vraiment difficiles à trouver. Passons donc directement à XD. Et laissez-moi simplement vous montrer ce brief de design et ce qu'il contient. Bien sûr, vous pouvez le lire vous-même car, comme je l' ai dit, je vais vous le donner. Mais je vais juste passer rapidement en revue cela et expliquer en quelque sorte comment j'ai obtenu ces informations et pourquoi j'ai choisi ces informations. Comme je l'ai dit, sur la base de l'expérience acquise par le sous-comité des méthodologues précédents, nous avons expiré un site Web dédié aux voitures Spider, c'est le projet que j'ai mentionné. Nous avons la date limite du projet ici, qui est de trois mois pour tout faire. Donc, pour faire de la recherche, de la conception et de la création de Webflow, nous avons le profil de l' entreprise. Il s'agit donc d'un concessionnaire de voitures d'occasion situé à Belgrade, en Serbie. Ils sont la voiture de luxe et la niche. C'est donc très important car un revendeur de voitures d'occasion peut être essentiellement tout ce que vous pouvez vendre des voitures d'occasion, par exemple essentiellement tout ce que vous pouvez vendre des voitures d'occasion, par exemple 1 000 ou 2 000 dollars, 100 000 dollars ou 500 000 dollars parce que les voitures d'occasion sont des voitures d'occasion peu importe où ils se situent dans la gamme des prix. Ce seront toujours des voitures d'occasion, mais dans ce cas, elles en vendent entre 50 000 et 500 000. Pourquoi est-ce important ? Parce que vous voulez savoir comment structurer l'information. À qui tu parles ? Il est donc évident que ces personnes, en tant que clients, seront différentes de celles que vous créiez un site Web pour des voitures à 1 000 dollars, par exemple, certaines images porteront évidemment sur différents types de voitures que vous utiliserez sur car l'imagerie va être différente. Peut-être. L'iconographie va être différente parce que vous voulez attirer un public plus large. Ils vendent principalement des berlines, des VUS et des superclasses. Vous pouvez donc voir qu'ils ont parfois une berline sexy en stock. Il s'agit de haies extrêmement puissantes ou puissantes en termes de puissance. Par exemple, nous avons quelque chose comme une Mercedes, une 45, une ANG ou une Audi RS 3, par exemple, ou quelque chose comme ça. Ils ont donc parfois cela en échange partiel. Ce que signifie l'échange de pièces, c'est que si je vais vous acheter une voiture, j'ai déjà mes propres glucides, donc je vais vous les donner. Vous allez en fixer un prix et me facturer à la baisse en fonction de ce prix. Donc, si vous fixez le prix de ma voiture, disons 20 000$, par exemple, vous allez déduire ces 20 000$ du prix initial de la voiture que vous vendez. C'est ce que l' on appelle un échange partiel. Comme je l'ai dit, ils demandent parfois à ces parties de changer voiture en échange de la vente de leurs propres actions. Comme je l'ai dit, cela est basé sur une expérience réelle que j'ai eue avec le client il y a quelques années, et c'est ainsi qu' ils mènent leurs activités. Et c'est ce que font la majorité de ces vendeurs de voitures. Même chose. Et une fois que je l'aurai compris, c'est important car nous voulons savoir ce que nous allons mettre sur le site Web lui-même. Elles sont donc différentes de la concurrence car toutes leurs voitures ou les voitures de démonstration des concessionnaires et la majorité des voitures proviennent d'Allemagne. raison pour laquelle c'est important, c'est que ces voitures ne sont pas utilisées par des personnes ordinaires. Ils sont principalement utilisés par les journalistes qui vont se rendre chez les concessionnaires pour tester ces voitures. Et c'est très important car ils achètent ces voitures d'occasion auprès des revendeurs officiels allemands. Leur mission est d'être transparente, honnête et de fournir une garantie complète sur l'historique de la voiture en fonction de la voiture et un excellent service après-vente. Marco est la personne clé dans une entreprise qui compte cinq autres employés, alors il est essentiel cette entreprise ne compte que six personnes . C'est donc une très petite entreprise. Ils font appel à des prestataires externes pour les transferts de voitures depuis l'Allemagne et ont des partenaires pour les prêts et les douanes. Ils ne font donc pas tout cela eux-mêmes. C'est pourquoi ils peuvent être si maigres avec seulement six personnes dans l'équipe. Ils font appel à tous ces partenaires externes pour les aider. Leur concurrent direct est DSD, et je vais vous montrer leur site web un peu plus tard. Et je suis consternée par les concurrents indirects, les automobiles, ce qui se traduit essentiellement par des voitures d'occasion, mais sur une bien plus grande échelle, car ils vendent des voitures de toutes les tranches de prix. Imaginez Amazon, mais pour les voitures, et je vais vous montrer ce site un peu plus tard. Ensuite, nous avons Project ou étiez-vous. Actuellement, ils ont une page Instagram où ils affichent leur stock, donc ils n' ont pas de site Web pour le moment, ce qui était la même histoire pour le client que je mentionné précédemment, ils ont travaillé pour eux. Mais ils veulent avoir un site Web parce qu'ils peuvent afficher plus rapidement et plus d'images Instagram les limite à leur propre taille, à leur propre mise en page. Ils veulent montrer de grandes images. Ils veulent montrer des images détaillées des intérieurs, par exemple des choses comme ça. Et ils ne peuvent pas contenir plus de dix images sur la ligne de la grille Instagram. C'est pourquoi ils ont choisi de créer un site Web et de disposer d'un point de contact direct via le formulaire de contact et présenter certaines de leurs fonctionnalités en un seul endroit. Vous pouvez avoir tout cela sur le site Web, sur Instagram, désolé, vous pouvez avoir des images. Lorsque vous cliquez en dehors des images, par exemple des histoires ou autre, vous pouvez lire la description, mais vous ne pouvez ensuite que cliquer et contacter la personne qui vous intéresse, oubliez que vous consultez le site Web des boutons, vous pouvez faire tout cela sur une seule page. C'est pourquoi ils veulent d'abord un site Web. Ils veulent qu'il soit réactif et qu'il puisse rapidement ajouter de nouveaux articles au site sans me contacter en tant que designer pour le moindre détail, mais ils aimeraient mon soutien s'ils se retrouvaient bloqués. C'est là que nous utiliserons CMS Webflow plus tard, car nous pourrons facilement ajouter de nouvelles voitures à leur stock. Ou si les voitures ont été vendues, nous pouvons facilement les retirer du stock. Et je vais montrer que dans Webflow build un peu plus tard et à quel point c'est très facile , une fois que vous l'avez configuré, le processus de configuration lui-même prend un peu de temps, est un peu délicat. Mais une fois que vous l'aurez réellement configuré, travailler avec lui pour vos clients sera très simple et direct. Ils ont les images de leur stock, mais aucune autre image d'icônes. C'est là que nous intervenons en tant que designers pour trouver des images adaptées à leurs besoins et à ce projet en particulier, ainsi que les icônes que je vais vous montrer dans une seconde lorsque nous passerons à design dans XD, ils veulent être reconnus en tant que revendeurs de luxe, mais n'aiment pas les sites Web sombres et les images volumineuses. C'est ce que j'ai fait avec mon ancien client, que j'ai mentionné. Je suis allée de l'avant et j'ai discuté avec eux, j'ai aimé ces couleurs, aime ces images, quel type de site Web aime pour m' inspirer, par exemple, puis j'ai pointé du doigt tous ces sites Web sans couleurs foncées. Alors je leur ai demandé , aimeriez-vous les couleurs foncées ? Parce que les couleurs sombres sont généralement associées à quelque chose luxueux et cher. Ils ont dit : « Nous n' aimons pas ça parce que je n'en suis tout simplement pas fan. Comme le minimalisme. Nous aimons que les choses soient simples, organisées, faciles à utiliser et qu'elles ne vous fatiguent pas les yeux, car la majorité de ces sites Web en ligne que vous consultez pour le luxe, je suis généralement de couleur noire pour arrière-plan, images très sombres, puis du texte blanc ou des textes dorés. Donc je n'ai pas vraiment aimé ça. Ils pensent que c'est trop, que c'est trop vieux. Mais ils aiment la couleur bleue et la simplicité. Et leur site Web idéal est Car Wow, qui va également montrer en une seconde de quoi il s'agit et pourquoi ils l'aiment tant parce que je leur ai posé toutes ces questions. Le principal problème qu'ils essaient de résoudre est de présenter leur stock et d'avoir un point de contact en un seul endroit plutôt que de communiquer par le biais de DM Instagram, ce que vous venez de mentionner, et pourquoi ils ont besoin un site Web en premier lieu. Buts et objectifs. Leur objectif principal est donc de présenter la marque de luxe en tant que concessionnaire de voitures de luxe et de se démarquer des autres concessionnaires qui vendent des voitures familiales bon marché. Alors imaginez ça. Lorsque vous choisissez trois sites Web et que vous les assemblez, vous remarquerez que ces gars vendent des produits chers et pas seulement des couleurs ordinaires. C'est donc toute l' idée ici. L'objectif principal de ce projet est d'envoyer des personnes depuis leur page Instagram vers ce nouveau site Web et d'augmenter les réservations d' essais routiers, c' est-à-dire lorsque vous appelez le showroom et réservez un essai routier pour une certaine voiture de 10 % dans les deux premiers mois suivant son lancement. Ils veulent donc que nous lancions le site Web, place le référencement, par exemple puis que dans les deux prochains mois suivant le lancement, ils veulent être en mesure d'augmenter les réservations pour les essais dix les réservations pour les essais routiers % dans les deux premiers mois suivant le lancement. Ensuite, nous passons au public cible. C'est assez simple car ils sont ouverts depuis trois ans. Et un type de personne revient sans cesse , à une petite exception près de temps à autre, mais en général, il s'agit d'un seul type de client qui revient sans cesse vers eux. Il s'agit d'un homme serbe de 45 à 65 ans vit généralement à Belgrade, est propriétaire d'une entreprise possède sa propre entreprise parce que ces voitures sont assez chères. Ce sont donc les types de personnes qui peuvent réellement se permettre ce type de voitures. habitudes de consommation des médias, Instagram et LinkedIn toute la journée, YouTube pour les soignants et l'exploration, les habitudes quotidiennes. Alors Jim, un mode de vie sain aime publier du contenu sur Instagram. Comment savons-nous toutes ces choses ? Parce que nous interrogeons nos clients et ils nous ont répondu qu'ils travaillaient sur Instagram. Tous leurs clients viennent d'Instagram, ils peuvent donc voir qui sont ces personnes. Parce que lorsque vous envoyez un message, vous pouvez cliquer sur le profil. Vous pouvez explorer le profil et voir qui est cette personne. Comment connaissez-vous l'âge ? Quand achetez-vous réellement une voiture ? Vous devez leur donner votre permis de conduire, vous devez leur donner votre carte officielle, par exemple passeport ou autre, pour vérifier votre identité à partir de ces informations. Nous pouvons savoir qu'ils ont 45 à 65 ans. Ce sont généralement des hommes parce que genre de personnes arrive. Vous pouvez également connaître leur résidence et la ville des résidents grâce à ces documents officiels émis par le gouvernement, car ils doivent y signer des documents. Vous ne demandez donc pas ce type d'informations uniquement pour votre propre intérêt ou pour mieux informer, mais pour créer un personnage d'utilisateur auquel vous pourrez accéder en une seconde. Ainsi, à partir de ces informations, vous pouvez savoir qui sont ces personnes. Vous pouvez également rechercher ces personnes sur Instagram, car vos clients vous ont dit qu'ils les avaient trouvées sur Instagram et qu'ils les avaient contactées via Instagram pour y aller et pour les essayer ces véhicules et à acheter éventuellement ces véhicules. C'est ainsi que nous savons qui ils sont et à quoi ils ressemblent. Parce que nous avons parcouru leurs fils Instagram, nous les avons trouvés sur LinkedIn. C'est ainsi que nous savons qu' il y a des propriétaires d'entreprises car nous voyons qu'ils créent leur entreprise. Nous voyons combien de temps ils l'ont travaillé. Cette entreprise, qui sont les principaux points de contact dans cette entreprise, se trouvent là où les entreprises sont situées. Depuis combien de temps est-il ouvert ? Combien de personnes y travaillent ? Vous pouvez consulter toutes ces informations sur LinkedIn et YouTube, car ils ont indiqué à notre client qu'il sur LinkedIn et YouTube regardait de nombreuses vidéos et critiques YouTube parce que ce sont des voitures chères. La Serbie est une petite ville et un pays assez petit. Par conséquent, il n' y a pas beaucoup de voitures de ce type qui circulent comme en Angleterre, par exemple à Los Angeles ou ailleurs. Vous devez donc vous informer par d'autres moyens. Et ce média dans ce cas est YouTube pour les critiques de voitures. Et juste pour explorer ces voitures et les comprendre un peu plus. Les habitudes quotidiennes. Encore une fois, ne me répétez pas trop sur Instagram car vous pouvez voir ce qu'ils font, où ils voyagent, ce qu'ils font. Ainsi, vous pouvez en quelque sorte savoir où ils se trouvent au quotidien. Et vous pouvez également voir quand ils ont publié ces images. Vous pouvez donc comprendre assez facilement à quelle fréquence ils posent pour le like sur Instagram ? Et encore une fois, tout cela est très important car vous pouvez facilement cibler vos publicités un peu plus tard fois que vous avez lancé un site Web directement via Instagram, car encore une fois, tout leur public est sur son gramme de toute façon. Nous pouvons donc cibler Instagram, nous pouvons maintenant accéder à LinkedIn parce que nous savons qui sont ces personnes, ce qu'elles aiment, quel âge elles ont, où elles vivent, etc. Enfin, nous arrivons à ces deux points. Nous avons donc des exigences de conception. Donc, puisque nous utilisons Webflow, une seule dimension est requise avant la construction. Et je vais vous montrer comment créer un design réactif dans Adobe XD en une seconde. Mais nous n'allons pas parler conception réactive, car ce n'est qu'une perte de temps lorsque vous travaillez seul, directement de XD à Webflow, nous, les dimensions en tant que solutions, nous pour avoir un plan de travail de 40,40 pixels. Le format de fichier XD est alors notre format de fichier principal. Nous allons utiliser les formats JPEG, PNG et SVG pour le contenu des images et des icônes. Palettes de couleurs requises pour être créées, afin qu'ils n'en aient pas. Nous devons en créer un. Les images doivent être incluses. Leur stock est inclus, en quelque sorte. Je vais donc expliquer cela un peu plus tard. autres images proviennent d' Envato Elements. Dans notre cas, toutes les images proviennent des éléments de ma devise, mais je vais y revenir dans une seconde. Comme je l'ai dit, les documents de copie associés doivent être créés. Cela signifie donc, par exemple, un guide de style. que nous allons créer. Et nous allons exporter toutes ces autres options, comme la tarification et ce brief de conception, dans ce cas, le budget et le calendrier. La chronologie est donc divisée en deux parties. L'un pour la recherche et la conception, les quatre autres pour le développement de Webflow. Et gardez toujours cela à l'esprit. Prévoyez toujours un peu plus de temps pour le développement de Rockfall, car il peut parfois y avoir des bugs. Ainsi, lorsque vous aurez le temps de comprendre tous ces bogues et de les résoudre, il est préférable de consacrer un peu plus de temps à votre générateur de flux de travail. Donc pour ce type de projet, cinq K pour la recherche et la conception, cinq K pour le Webflow construit. Et comme je l'ai dit, trois mois pour le terminer dans ce cas. Cela ne semble donc pas beaucoup, mais je veux juste créer quelque chose qui soit adapté aux débutants. Habituellement, ces types de projets me durent environ un mois et je facture un peu plus que ce que vous voyez ici pour ce type de projets. Donc deux semaines pour la recherche, un mois pour la conception, un mois et demi pour la construction. Vous pouvez donc voir ce que j'ai dit. Je laisse juste un peu plus de temps pour la ceinture elle-même. Ensuite, nous avons intégré la présentation sur la planification, la recherche, la conception du public et la livraison. Vous pouvez parcourir toutes ces dates juste pour comprendre un peu plus structurées. Enfin, j'ai mis mon nom ici, mon e-mail ici. Juste pour vous donner une idée, car plus tard, je pourrais vouloir l' envoyer à mes clients pour que je puisse le sélectionner, appuyez sur envoyer à mes clients pour que je puisse le sélectionner, Ctrl ou Commande E pour l'exporter. À partir de là, je vais choisir le PDF, puis appuyer sur Exporter, exporter ce PDF afin de pouvoir le partager facilement avec eux afin qu'ils puissent le voir et le comprendre un peu de plus et ils ont pu voir toutes mes intentions avec ce design et ce que je voulais faire. C'est donc tout pour le design brief, n'hésitez pas à l'explorer un peu plus. Je vais l'inclure comme je l'ai dit, le modèle original et celui-ci, vous pouvez l'ajouter comme vous le souhaitez. Ils sont fondamentalement les mêmes. Celui-ci est juste rempli, l'autre est juste vide. Et maintenant, nous allons passer aux propositions de projets. Et je vais vous expliquer comment envoyer ces propositions de projets et comment être plus efficace avec elles. Alors je t'y verrai. 127. Proposition de projet: Maintenant que nous savons qui est notre client, passons directement aux propositions de projets car nous voulons leur envoyer le prix réel. Nous voulons qu'ils vérifient le prix. Et nous voulons définir certains termes et conditions. Alors ne vous y trompez pas un peu plus tard. Passons donc directement à z. Et voici le modèle de proposition de projet. Vous pouvez obtenir ce modèle. Je vais laisser le lien car c'est le modèle premium que je suis en train de vendre et il n'est pas trop cher. Je pense que c'est entre 5 et 6 dollars, quelque chose comme ça. Et il contient également une page supplémentaire qui est volontairement supprimée pour ce projet, à savoir la page à propos de moi et je crois qu'il faut aller de l'avant et vous offrir une réduction. Assurez-vous donc de cliquer sur le lien dans le PDF pour l'obtenir. Donc, ce que nous avons ici, c'est la couverture. Ensuite, nous avons les détails du projet, les prix du projet et les termes et conditions. Et vous vous en souvenez de la leçon précédente. Vous pouvez donc l'obtenir là-bas ou vous pouvez l'obtenir à partir de ce lien. Cependant, c'est plus facile pour vous si vous souhaitez réellement l'utiliser. Si ce n'est pas le cas, j'ai dit ce que j'ai déjà dit dans cette partie du cours, vous pouvez créer ces choses vous-même. Mais si le temps, c'est de l'argent, vous pouvez vous procurer celui-ci. Nous avons donc la couleur des voitures exclusives Pilar. Voici leur adresse. Voici mon site Web ici et mes informations. Ensuite, nous avons les détails du projet. Donc, un aperçu du projet, ce que nous avons convenu lors de notre conversation par e-mail et par appel. Parfois, vous allez rencontrer vos clients directement en personne. Vous allez donc le mettre ici, mais la plupart du temps, vous devez vous occuper des e-mails, des appels téléphoniques, par exemple des appels vidéo, etc. Assurez-vous donc de le mettre là. Description du projet. Nous en avons donc déjà parlé. Nous avons un site Web à concevoir et à développer, préventes proposent des voitures exclusives. Il doit être conçu dans XD, développé et hébergé dans Webflow pour faciliter la conception de pages de maintenance. Nous avons donc à peu près la page principale, qui est notre page héros, qui présentera les valeurs de la marque, mission et une partie du stock. Ensuite, nous avons les voitures où toutes les voitures seront présentées. Nous avons des prêts pour expliquer les prêts ainsi que la page de contact où les gens peuvent réellement les contacter. Nous venons de discuter de toutes ces avec notre client et nous lui demandons quels sont les principaux aspects de votre activité. Ils nous ont donc dit qu' ils vendaient des voitures, généralement par le biais de prêts, donc par l'intermédiaire de leurs partenaires. Nous devons donc déjà créer ces deux pages. En général, nous devons créer une page d'accueil car nous devons structurer ces informations et les montrer aux personnes qui découvrent le site Web. Ils ne savent pas vraiment ce que fait cette entreprise. Nous voulons donc les convertir assez facilement et les envoyer directement dans la section voiture de la page. Ensuite, nous avons la page Contactez-nous car nous voulons les gens puissent facilement contacter cette entreprise, mais nous inclurons également police de contact sur notre site Web. Et j'aime toujours faire cela parce que Y force les gens à faire défiler la page vers le haut, par exemple en cliquant sur le contact alors que vous pouvez avoir un formulaire de contact sur chaque page si votre client l' exige. Enfin, nous aurons toutes ces pages, comme je l'ai mentionné, où nous allons présenter une voiture individuelle en stock. Vous voudrez peut-être savoir combien de kilomètres la voiture possède l'identifiant, quelle couleur elle est, quel est son ingénieur ? Je ne connais pas toutes ces autres images supplémentaires, nous en reparlerons donc en profondeur un peu plus tard. Toutes les pages doivent être conçues de manière réactive, ce que nous avons déjà mentionné. Le calendrier du projet doit être achevé en 90 jours, ce que nous avons déjà mentionné dans notre dossier de conception. Donc, finalement, c'est vraiment important. Nous avons donc des études de projets, des recherches sur la concurrence, conception et des inspirations, des documents, wireframes, des recherches conceptuelles, des plans du site et des organigrammes. Tout cela va nous prendre 14 jours dans ce cas. Ensuite, nous avons les moodboards, sélection des couleurs, le style des icônes, la comparaison et l'exploration. Adobe XD a été conçu pour partager des liens permettant de recueillir des commentaires, ainsi deux séries de révisions et de commentaires à effectuer en 15 jours. Ensuite, nous avons la conception de l'interface utilisateur avec des images, des couleurs , des ombres et des icônes dans un style déterminé, ainsi que deux séries de commentaires. Nous avons également 15 jours, mais gardez à l'esprit que nous faisons ces deux jours en même temps. C'est donc un peu trompeur, mais vous voulez quand même expliquer à vos clients combien de temps cela vous prend réellement pour créer ? Enfin, nous avons Asset Export, le développement de sites Web dans Webflow, la connexion d'un domaine à un hébergement Webflow. De toute évidence, ils vont fournir toutes ces informations, ainsi qu' une séance de consultation d'une heure sur la façon d' utiliser Webflow pour ajouter de nouvelles voitures sur le site, ce qui est très important. Vous voulez être en mesure de communiquer avec vos clients, les expliquer, tout ce que vous pouvez. Ils vont donc moins vous embêter à l'avenir. que tu veux toujours faire. Vous voulez toujours configurer correctement vos projets. Vous voulez toujours démarrer correctement votre conversation avec vos clients. Ils ne vous appellent donc pas tous les jours. Ils ne vous envoient pas d'e-mails toutes les 2 heures. Vous voulez les expliquer en détail. Comment utiliser Webflow, comment utiliser le design, comment utiliser le brief de conception, tout ce que vous créez pour eux. Assurez-vous simplement d'expliquer et de consacrer un peu de temps à ce projet. De toute évidence, vous pouvez créer ce temps, intégrer cela à votre projet. Mais ne leur dites pas que vous le construisez réellement, car construisez toujours votre œuvre. Assurez-vous de facturer vos e-mails, vos appels téléphoniques. Je viens de le mentionner, si vous créez des vidéos. Tout ce que vous faites pour votre client fait partie du travail. Pas seulement du design, pas seulement du Workflow Build. Veillez donc toujours à intégrer tout ce que vous faites dans votre proposition de projet. Ensuite, il y a la partie amusante, nous avons les prix. Nous avons donc ici les frais de projet. Donc recherche, compétition, conception de la recherche, brief et inspiration. Tout cela va nous prendre beaucoup de temps. Je n'ai pas tout à fait additionné les chiffres ici, mais ça ne me dérange pas. Nous avons donc des recherches de projets, des recherches conceptuelles sur papier, des moodboards, une sélection des coûts. Cela a coûté autant, cela coûte autant, cela a coûté autant. Et le but ici est d'atteindre le total de 10 000$. Je n'ai pas inclus Webflow ici, alors créons-le ici. Donc Webflow. Site Web Webflow build ou site Web adaptatif Webflow construit avec un CMS inclus, qui est un système de gestion de contenu, qui leur permet d' ajouter toutes ces nouvelles voitures à leur stock. Ensuite, nous avons des options de paiement. Nous avons donc deux paiements égaux. Donc cinq k Maintenant, cinq k à la fin, trois paiements égaux font 3333 chacun. Donc, le premier en ce moment, second une fois que nous avons terminé la conception et le turbo et une fois la construction de Webflow terminée, nous avons deux paiements, cinq K Maintenant cinq k à la fin. Donc, peu importe ce que vous voulez, vous pouvez ajouter un paiement, vous pouvez modifier toutes ces informations. Ensuite, nous avons les termes et conditions. Comme je l'ai dit, il y a aussi une page qui me concerne, j'ai volontairement supprimée parce que clients m'ont contactée pour ne pas avoir besoin de me connaître. Ils me connaissent déjà à mes pages sur mon site Web. Par exemple, nous avons des ressources pour le projet, sauf accord contraire, doivent être fournies par les révisions des projets du client. Combien de révisions peuvent-ils avoir avant que nous ne passions à l'édition suivante, afin que vous ne puissiez pas y ajouter votre conception graphique. Il s'agit uniquement de la conception de l'interface utilisateur, d'une recherche et d'un Webflow créés à partir de votre site Web. Ne m'ajoutez pas de choses supplémentaires, comme le design de bannières ou le design de cartes de visite en mandarin ou , le design de brochures, peu importe, qui ne sont pas inclus dans ce prix. Si, en tant que designer, vous savez comment faire toutes ces choses, si vous avez plus de pouvoir, je vous encourage vraiment à en créer encore plus pour vos clients, tirer encore plus d'argent, à construire une relation encore meilleure avec eux. Mais pour moi, je n'aime pas vraiment faire ces choses. Je sais comment les faire. C'est juste que je n'aime pas les faire. Pour moi. Recherchez l' interface utilisateur, l'expérience utilisateur et la conception. C'est ce que je fais et c'est ce que j'aime pendant les journées de travail. Donc, si vous travaillez du lundi au vendredi, ils travaillent le week-end. Ils peuvent vous envoyer un e-mail, mais soyez franc avec eux. Je ne travaille pas le week-end. Vous pouvez donc envoyer votre e-mail. Je recevrai votre e-mail, mais j'y répondrai lundi. Assurez-vous donc d'être franc avec vos clients ou d'où et quand. Si je travaille de 9 h à 17 h, assurez-vous d'inclure le fuseau horaire. C'est facile pour ce projet en particulier car mes clients et moi sommes dans le même fuseau horaire. C'est donc assez simple, mais si vous travaillez dans un autre fuseau horaire, c'est très important de le faire. Quels sont également vos jours fériés ? Si vous travaillez le week-end ? Faites-vous payer encore plus par heure ou quel est votre tarif le week-end ? Formats de fichier. Donc, généralement, si vous travaillez dans ASD, ils veulent des fichiers Figma, puis assurez-vous de spécifier que vous allez fournir uniquement des fichiers XD. Si vous travaillez dans Photoshop, par exemple pour la retouche d'images, comme je le fais, j'aime toujours indiquer ces droits d'utilisation. Alors, qui obtient les droits cette conception et cette construction et , en cas d'annulation du projet, s'ils décident de l'annuler en cours de projet, que faites-vous ? Allez-vous leur rembourser l'argent ? Combien allez-vous les rembourser, quand vous allez les affiner ou si vous n'allez pas les rembourser du tout. Assurez-vous donc de réfléchir à toutes ces choses lorsque vous commencez et de les aborder de manière logique Que feriez-vous dans cette situation si vous travailliez avec quelqu'un dans une telle situation, vous décidez simplement d'annuler, voudriez-vous être remboursé ? te mettrait mal à l'aise ? Assurez-vous donc de comprendre toutes ces choses. Comme je l'ai dit dans la partie précédente du cours où nous avons parlé de propositions de projets. Et maintenant, dans celui-ci, vous pouvez obtenir ce modèle avec la réduction. Je vais vous donner un code promo. Et en gros, c'est ça. Vous allez l'exporter au format PDF, sélectionner celui-ci et les sélectionner tous. Alors faisons-le. , si vous maintenez la touche Shift Control ou la Commande E vous exportez au format PDF et vous serez exporté en tant que PDF unique, mais tous ces différents PDF ensemble. Vous allez donc l' avoir comme première page. Il s'agit de la deuxième page et ainsi de suite, c'est ce que nous voulons à la fin. Vous pouvez donc l'exporter, vous pouvez l'imprimer si vous souhaitez le faire remettre directement à votre client. Si votre client est local, sinon, comme je l'ai dit, vous pouvez l' exporter au format PDF et vous pouvez simplement l'envoyer par e-mail. C'est donc tout pour cette vidéo. Nous allons passer à la suivante où nous allons parler de notre personnalité. Et je vais vous montrer ce modèle que nous avons abordé précédemment, comment le remplir pour ce projet en particulier. Alors je t'y verrai. 128. Profil utilisateur: Dans cette leçon, nous allons parler personnalité de l'utilisateur et de ce que nous avons appris jusqu'à présent grâce au brief de conception , à notre conversation avec notre client, aux recherches que nous avons menées sur Instagram, sur LinkedIn, sur YouTube. Mais nous l'avons compris grâce à ce que nos clients nous ont dit et à ce que nous avons vu directement en ligne. Et vous pouvez même aller encore plus loin et simplement appeler ces personnes qui ont déjà acheté des voitures à votre client , puis simplement rendez-vous avec eux et leur poser quelques questions simples. Répondez à un questionnaire sur les bases de l'expérience utilisateur, par exemple, qu' avez-vous aimé découvrir ? vous, qu'est-ce qui pourrait être amélioré en matière d'expérience d'achat ? As-tu contracté un prêt ? Tu as dit au revoir en espèces ? Avez-vous utilisé d' autres méthodes pour acheter cette voiture auprès de l'entreprise ? Comment l'entreprise vous a-t-elle traitée ? Avez-vous obtenu un acte de garantie que vous jugez sûr d'obtenir une garantie ? Et combien de temps avez-vous utilisé la voiture ? Avez-vous revendu la voiture pour leur poser toutes ces questions et simplement leur dire qu'elle sera anonyme ? Vous allez simplement faire des recherches pour les futurs acheteurs afin de pouvoir créer ce site Web de la bonne façon, si cette personne souhaite revenir et acheter encore plus de cœurs, ou pour futurs acheteurs à l'avenir qui vont venir. Vous pouvez le faire avec cinq de leurs clients, par exemple , s'ils sont intéressés, vous pouvez dire que cela sera totalement anonyme. Personne ne sera au courant de vous et voudra simplement savoir pourquoi vous avez décidé d'acheter auprès de cette entreprise ? Qu'est-ce qui vous a attiré dans cette entreprise ? Et comment avez-vous découvert votre expérience ? C'est ce que vous voulez savoir sur vos clients. Et puis, lorsque vous irez plus loin, vous obtiendrez un nouveau personnage d'utilisateur. Comme je l'ai mentionné précédemment, nous savons que ces personnes ont 45 ans, nous savons que ce sont des hommes, nous savons que le propriétaire de leur entreprise, nous l'avons mentionné jusqu'à présent et que nous l'avons découvert sur LinkedIn, nous savons que ces personnes ont 45 ans, nous savons que ce sont des hommes, nous savons que le propriétaire de leur entreprise, comme nous l'avons mentionné jusqu'à présent et que nous l'avons découvert sur LinkedIn, nous l'avons découvert sur Instagram, ils gagnent plus de 100 K. Vous pouvez facilement voir en prenant ce qu'ils doivent faire, en insérant dans les calculateurs gouvernementaux pour comprendre combien d'argent ils peuvent comprendre combien d'argent ils gagner. Ou mieux encore. Ce pays, qui est la Serbie. Mais vous pouvez l'obtenir dans presque tous les autres pays. Vous pouvez vous adresser à l'organisme gouvernemental qui délivre des licences aux entreprises pour qu'elles soient opérationnelles. Donc, si vous voulez ouvrir une entreprise, vous devez d'abord obtenir une licence auprès du gouvernement et auprès de celui-ci, essentiellement pour vous donner le feu vert afin de pouvoir ouvrir une entreprise et donc suivez nos activités réelles, sont-elles toujours opérationnelles ou la défunte RT close afin que vous puissiez suivre toutes ces informations sur sites Web et les revenus du gouvernement. Vous pouvez consulter les revenus, qui sont des données accessibles au public car vous pouvez voir combien d'argent ils ont gagné au cours des 12 derniers mois. Par exemple, ont-ils des prêts permanents ? Vous pouvez donc comprendre un peu à combien d'argent vous avez affaire dans cette entreprise. Et par conséquent, vous pouvez déduire combien d'argent un PDG peut-il gagner ou un entrepreneur ? Et comme je l'ai dit, vous pouvez trouver sur LinkedIn les salaires possibles pour ces postes. Vous pouvez donc vraiment atteindre ce chiffre. Ou encore mieux si votre client sait combien d'argent ses clients gagnent et combien ils sont prêts à dépenser encore mieux pour vous donner plus de pouvoir. Vous pouvez facilement arrêter de fumer, déduire cela, et vous pouvez le mettre dedans. Encore une fois, c'est très important car le ton général et le langage du site Web visent à cibler ces personnes plutôt que tout le monde. C'est pourquoi nous voulons le formater de cette manière. Statut, marié. Pourquoi le savons-nous ? Grâce à Instagram, encore une fois, localisation de Belgrade, en Serbie, c'est ce que nos clients nous ont dit. Stefan est le propriétaire de l'entreprise de Belgrade, en Serbie. Il aime dîner avec ses amis et regarder des émissions YouTube sur l'auto-assistance et l'amélioration. Tout cela peut être vu sur leur fil Instagram et leurs histoires. Père de deux enfants, passionné d' architecture le week-end, il aime explorer et s'immerger dans la vie marine. Ce qui le passionne le plus dans nos voitures et il aime les voitures de sport de luxe, principalement pour leur apparence et leur son. Et puis nous avons besoin d'un meilleur moyen de rechercher une voiture d'occasion en ligne. Un moyen plus simple de comprendre la voiture. Il envisage une approche plus simple pour se renseigner sur le véhicule. Toutes ces choses que nous avons mentionnées et toutes ces choses sont ce que nos clients nous ont dit, que leur client leur a dit. Nous comprenons donc ce que nous voulons construire ici même. Frustrations, les sites Web sont trop bondés et confus, ce que je vais vous montrer dans l'analyse concurrentielle, qui sera publiée un peu plus tard. Les sites Web ne sont pas adaptés aux mobiles, ce qui est encore une fois interdit de nos jours. Hé, une seule publication sans prix, moi à ce que j'achète une lampe pour voir le prix tout de suite. Parce que quel est l' intérêt de le vendre ? Si vous ne voulez pas me montrer le prix, comment puis-je l'acheter ? Nous voudrons que vous les contactiez et qu' ils vous arnaquent lors d' un autre achat. n'est pas ce que vous voulez, vous voulez une transparence totale. Ensuite, nous avons l'utilisation des réseaux sociaux ici. La majorité sont donc Instagram et LinkedIn. Je pourrais peut-être mettre YouTube ici, mais Facebook et Twitter se situent quelque part entre les deux. Ensuite, nous avons la citation et nous avons les marques préférées, que je n'ai en fait pas modifiées par rapport au modèle que je vous ai déjà montré. Mais ce qui est crucial, c'est que notre client nous a dit qu'il aimait le site Web Cardboard. En fait, j'ai pris la couleur sur le site Web de Cowell, que je vais vous montrer dans une seconde et je l'ai mise là. Ça m'a tellement inspirée. Je comprends donc qu' ils aiment le bleu et je veux pousser encore plus loin cette couleur bleue. Et je vais vous montrer dans l'une des prochaines vidéos comment procéder et pourquoi est-ce important ? Ensuite, nous passons à l'analyse concurrentielle. Et je vais vous montrer une analyse concurrentielle de cette activité. Nous allons comparer ces concurrents, qu'ils soient directs ou indirects. Et pour mieux comprendre, quelle est la date ? Super, ce qu'ils ont fait si bien pour que nous puissions aller l'avant et corriger ces erreurs dans notre futur design. Alors je t'y verrai. 129. Analyse concurrentielle: Passons maintenant à l' analyse concurrentielle et je vais vous montrer quelques concurrents directs et indirects pour notre marque. Et je vais souligner certaines bonnes et mauvaises choses qui nous ont tous deux fait le deuil. Et nous avons ici deux sites Web et je vais d'abord vous montrer comme celui-ci, puis nous allons l'agrandir un peu parce que tout d'abord, ce concurrent direct n' est pas réactif. Vous pouvez le voir ici. Donc, si je restreint encore davantage ce site Web, vous pouvez voir l'ensemble du problème ici. Vous pouvez donc imaginer que lorsque vous accédez à votre appareil mobile et que vous faites défiler l'écran vers la gauche et la droite, vous devez pincer, zoomer et vous déplacer, peu comme au milieu des années 2000. Ce texte n'est donc pas centré de cette façon. Nous avons donc un très gros problème. Regardons donc cela d' abord, car il s' agit de la véritable plateforme dont je vous ai parlé, savoir qu'il existe un concurrent indirect. Et ils vendent sur la plateforme. Ils ne vendent pas sur leur propre site Web, mais cette entreprise possède son propre site Web. Donc, tout d'abord, ils ont une obligation, nous allons nous en débarrasser car la majorité de ces personnes, surtout parce qu' elles sont propriétaires d'entreprise, elles sont propriétaires d'entreprise expérience dans le domaine des affaires en ligne. Ils ne vont pas cliquer sur le logo pour rentrer chez eux. Ensuite, nous avons des offres. Je vais essayer de traduire cela en anglais. Ce sera donc un peu plus facile à comprendre pour vous. On y va. Nous avons donc une maison, comme je l'ai mentionné, nous avons une offre de véhicules. Il y a donc des véhicules actuels, véhicule à l'arrivée. Ce sont donc de vrais Cusco viennent d'être achetés et qui se trouvent dans le transport, par exemple qui viennent d'être achetés et qui se trouvent dans le transport, par exemple le financement, dont nous avons besoin d'une galerie, dont nous n'avons pas besoin parce que l' offre de véhicules va nous l'offrir et nous allons pour pouvoir voir toutes les images qui s'y trouvent. Ensuite, nous avons la page de contact dont nous aurons besoin. Ensuite, ils ont cette jolie section sur les héros ne parle pas de marque, mais de performance. Mais nous ne savons pas si, par exemple , en ce qui concerne les voitures, vous saurez tout de suite qu'il s'agit d'un groupe à écartement Porsche 911 Turbo. Et vendez-vous simplement des produits à emporter ou vendez-vous d'autres marques ? Vous dites que ce n'est pas une question de marque, mais pourquoi me vendez-vous une marque spécifique en arrière-plan ? Et vous allez le voir dans une seconde. Ils ont une grande partie de cette marque sur leur page Instagram et sur ce site Web. Donc je ne comprends pas vraiment ça. Ensuite, nous avons des véhicules d'arrivée et nous avons une offre de véhicules. Et vous pouvez voir que ces deux cases ne sont pas alignées et que nous ne voyons aucune image derrière. Nous ne voyons aucune option de couverture disponible. Ensuite, nous avons les meilleures offres. Nous avons donc Porsche, Porsche, Porsche, qui vient d'être mentionnée. Ce n'est donc pas une question de marque, mais montrons-leur toutes les portions que nous avons. Nous allons donc faire des voitures, pourquoi cette salle d'exposition. Nous avons donc des véhicules certifiés, essais routiers et une livraison gratuite. Vous avez donc besoin d'un financement ? Nous sommes là pour vous, nos partenaires. D'accord. Alors nous avons cette image pour une raison quelconque, visitez-nous et conduisez votre nouvelle voiture. Ils ont donc une adresse e-mail et un numéro de téléphone. Ensuite, ils ont la carte, qui est géniale. Et ils ont ce simple pied de page à la fin. C'est très simple, et j'aime beaucoup ça, mais je ne comprends tout simplement pas vraiment toutes ces différentes sections. Mais peu importe. Examinons toutes les voitures. Nous avons donc un tas de Porsche et nous avons des BMW. Alors prenons quelque chose, prenons une Porsche. Nous avons donc des points de vue. Donc, si je clique là, ça me prendra et revenons à la page précédente. Nous avons donc des visiteurs et ils n'ont aucun contact ici. J'ai aimé qu'il n'apparaisse pas sur la page d'accueil. Donc ça n'a pas d'importance. Passons à autre chose. Donc, ce que nous avons ici, c'est que nous avons réservé une voiture, nous avons la même voiture. Mais à quoi bon, si je n'ai pas de profil où je peux voir tous ces lacs, je pense que c'est bien de pouvoir vous contacter via ces réseaux. Donc, si je partage cela sur Twitter, est-ce que cela va ouvrir le partage. Oui, il va donc ouvrir un widget de partage. D'accord, au lieu d'un widget de contact. Donc j'aime bien cette voiture, je vais vous contacter via Twitter et cliquer ici. Et il va en fait le partager sous forme de tweet. D'accord, probablement la même chose pour WhatsApp et Pinterest. Nous avons donc cette galerie. Donc, si je clique sur la galerie, elle s'ouvre très bien. Ensuite, nous avons tous ces points en bas, ce qui est très bien. Mais encore une fois, cette mise en page est un peu écrasée. Nous avons donc 2467 images ici. Ce n'est peut-être pas la meilleure mise en page, mais nous l'explorerons un peu plus tard. Ensuite, nous n'avons qu' un tas de textes. Nous avons une description générale des informations. C'est donc assez bien divisé, assez facile à comprendre, mais ce n'est pas trop visuel. Peut-être. Dans notre cas, nous pouvons le décomposer en différentes sections. Et vous allez le voir sur le deuxième site Web. Et dans ce que TRB Upside, que je vais vous montrer, qui n'est pas du tout là, mais le site Web d'inspiration pour notre client. Et puis nous avons toutes ces informations. Enfin, nous avons les deux mêmes sections juste en bas. C'est donc notre courant. Et si vous passez au financement, ce que nous voyons, c'est des meilleurs taux simples et rapides, on obtient plus d'informations, de sorte qu'ils n' ont même pas cette page. D'accord, donc c'est le concurrent direct. Examinons maintenant le concurrent indirect. Si je fais défiler la page un peu plus pour le cacher encore plus, c'est parti. Nous avons donc la plateforme, comme je l'ai mentionné. Ce n'est donc pas leur site Web. Ils nous donnent donc toutes ces informations. Permettez-moi donc d'essayer de le traduire également en anglais. On y va. Donc deux ans d'activité, marques de véhicules Sara, véhicules en provenance de Serbie. Ils ne sont donc pas des importateurs, ils viennent directement de Serbie. Possibilité d'acheter à crédit ou sous forme de prêt, ce qu'ils peuvent vous offrir. Donc, encore une fois, comprenez qu' il s'agit d'une plateforme et je vais vous le montrer. Donc ça s'appelle voitures d'occasion ou Paulownia Toby Lia, si je traduis en anglais, voilà. Vous pouvez donc voir que tout cela provient de divers vendeurs professionnels. Donc, tous ces vendeurs, et puis nous avons d'autres vendeurs et Marcellus, imaginez Amazon pour les voitures. Ce concurrent est juste là sur cette plateforme, donc ce n'est pas son site Web, il vend juste ici. Vous pouvez parcourir différentes catégories, ce qui est génial, mais notre client n'a pas trop de voitures. Ils n'ont par exemple que six ou huit voitures, nous n'avons donc pas besoin d'options de recherche. Nous avons juste besoin d'une page où nous pouvons présenter toutes leurs voitures car elles se vendent généralement assez rapidement. Et vous pouvez le voir sur le site Web de ce concurrent, si nous faisons défiler la page ici, donc les véhicules proposent 2467 voitures. Vous n'avez donc pas besoin d'une option de recherche pour sept voitures, mais vous avez besoin d'une option de recherche, par exemple si vous avez 20 marques différentes, si vous avez 100 cartes, si vous avez tous ces éléments, afin que est là où tu en as besoin. Encore une fois, cela vient d'une plateforme, donc je vais juste ouvrir une voiture. Ils ont beaucoup de photos différentes ici, ce qui est génial. Et tout d' abord, d'un coup d'œil, vous pouvez voir l'année de production de la voiture. De quel type de voiture s'agit-il ? Combien de kilomètres ont été parcourus ? La transmission ? Nous avons donc le type de moteur. Nous avons combien de pouces cubes ? Ensuite, nous avons la puissance et nous avons quel type de véhicule s'agit-il ? Dispose-t-il de deux portes pour ces fibres ? Toutes ces informations sont donc très utiles ici. Nous n'en avons aucun. Et en fait, cette section semble, je me disais pendant une seconde, peut-être qu'elle est réactive, mais en fait, elle ne va pas de gauche à droite. Passons donc à ici. Et ici, nous pouvons voir l'assurance. Permettez-moi également de traduire celui-ci pour que vous puissiez le comprendre plus facilement. Nous avons donc le prix de l'inscription, puis nous avons le calculateur d'assurance, nous avons le contrat d'achat, tout cela est fourni par la plateforme. Encore une fois, je ne saurais trop insister sur ce point. Et j'ai beaucoup aimé cette mise en page. Je pense que c'est très bien. Et quand je clique, l' image s' affiche en plein écran, ce qui est très bien. Nous avons le x, donc juste la mise en page typique, puis nous avons des informations générales. Donc, si l'on considère cela par rapport à cela, je pense que cela semble bien mieux parce que cela va le diviser en certaines sections parce que cette plateforme certaines sections parce que cette plateforme existe depuis 20 ans, par exemple ils savent quoi faire car ils collectent des données depuis plus de 20 ans. Ils comprennent leurs clients et savent quel type d'informations il est vraiment important de mettre sur la page de vente. Vous avez donc plus d'informations sur le modèle. Peut-être qu'il peut y avoir une vidéo YouTube, peut-être. Ensuite, nous avons la sécurité, nous avons le matériel. Remarquez comment cela reste en place, épinglé en haut à tout moment, ce que j' aime beaucoup sur ce site Web. Si je l'agrandis, si nous faisons défiler la page vers le bas, nous n'avons pas de boutons, ils se déplacent simplement vers le bas de la page. Si vous revenez à ici, et si je suis capable de le redimensionner maintenant sans casser mon ordinateur, essayons de le dessiner ainsi. Parce que j'utilise tous ces logiciels d'enregistrement, c'est pourquoi vous voyez ce problème noir et noir. Nous avons l'équipement, nous avons l'État. La voiture actuelle est-elle donc d'occasion ? Où se trouve-t-il en tant qu'historique d'entretien, ce qui est extrêmement important pour les voitures chères. Ensuite, nous avons la description. Alors peut-être de quoi, de quel type d' équipement possède la voiture ? Et peut-être du matériel supplémentaire. Vous pouvez voir qu'il y en a beaucoup ici et c'est toujours le cas pour les véhicules Mercedes. Et puis ils ont toute cette description en bas. Certains, à mon avis, nous avons besoin de quelque chose comme ça, mais dans un style plus minimaliste car encore une fois, nous n'avons pas besoin de toutes ces informations car nous allions avoir une page séparée pour les prêts automobiles et ils seront en mesure de voir ces informations. Et nous voulons simplement qu' ils puissent nous contacter assez facilement pour se renseigner sur cette voiture en particulier, pour en savoir plus obtenir plus d'informations à ce sujet et pour réserver un essai routier. Parce que n'oubliez pas que notre objectif est d' augmenter les réservations d' essais routiers de 10 % au cours des deux prochains mois. C'est ce que nous voulons et c'est pourquoi nous voulons créer une belle mise en page, peut-être avec une carte comme celle-ci, mais peut-être qu'elle pourra rester collée lorsque nous descendons. Vous pouvez voir ici que c'est juste là. Et si je commence à descendre, nous avons ces informations ici, mais nous n'avons pas ces informations. Cliquez donc pour voir le numéro et envoyez un message au vendeur. Nous avons juste ces informations qui sont partagées les réseaux sociaux, signalent l'annonce , puis l'ajoutent aux likes et nous avons le prix. Mais à mon avis, même pour cet énorme site Web, c'est beaucoup plus important. Ensuite, cette information. Alors gardez cela à l'esprit. Je veux voir le prix, mais pourquoi ne puis-je pas le voir ici ? Pourquoi ne puis-je pas vous contacter via, ne pouvez-vous pas envoyer de message ou vous appeler directement d'ici, en particulier sur un appareil mobile ? Vous pouvez simplement l'imaginer, redimensionnons rapidement cela un peu. On y va. Ensuite, permettez-moi de l'étendre de ce côté et de me dire, oui, vous pouvez voir à quel point ces sections peuvent être bondées. Et puis nous avons ces onglets qui ne s'ouvrent pas pour une raison quelconque, peu importe. Mais vous pouvez simplement imaginer que s'ils fonctionnent, lorsqu'ils ouvrent toutes ces informations, ils les voient simplement. Et pendant tout ce temps, lorsque vous faites défiler la page sur votre appareil mobile, vous n'avez que ces informations. OK, je vais bien. Je souhaite acheter ce véhicule. J'adore ça. C'est bon. Laisse-moi les appeler. Vous devrez faire défiler l'écran jusqu' en haut pour pouvoir le voir. J'ai aimé la façon dont ils ont fait preuve en réagissant parce que leur navigation est tout simplement énorme, parce que ce site Web est assez énorme, comme ils l'ont dit. Alors mettons-le ici, et passons à autre chose. Vous pouvez donc voir combien ils en ont ? Ils en ont donc beaucoup à l'intérieur. Maintenant, nous avons juste besoin de quelque chose comme ça. Donc assez facilement, assez simple car notre marque est assez simple. Enfin, après toutes ces informations et après avoir compris ce que nous voulons, nous comprenons un peu mieux ce dont nous avons besoin maintenant. Ensuite, nous voyons bien la voiture, qui est le site Web qui a inspiré notre client. Et c'est là que j'ai pris cette couleur bleue et c'est comme ça que je l'ai fait. Il suffit de cliquer avec le bouton droit de la souris, d'appeler un pic à partir des styles de page. Cliquez, et c'est parti. Donc, si vous le souhaitez, vous pouvez parcourir ce pic de couleur. C'est ce que l'on appelle le sélecteur de couleur ou le choix de couleur. Et puis ici, vous allez voir toutes les couleurs utilisées sur le site Web, mais je ne vais pas le faire ici. Je vais m'intéresser aux voitures d'occasion, par exemple , mais en fait, non, passons aux voitures neuves. Et voyons quelque chose qui est populaire. Peu importe. Prenons ces offres pour Hyundai Tucson. On y va. Et voici cette mise en page de la carte, dont je parlais. Et voilà. Mais ce que je veux vraiment montrer, c'est ceci, je pense que c'est ici, on y va. Des critiques approfondies si populaires. Donc, quand j'ai commencé à faire défiler la page, vous pouvez voir que cette section de la page me suit vers le bas avec des informations extrêmement importantes, c'est ce que j'ai dit. Vous pouvez donc simplement voir quantité d'informations dont je dispose ici, à gauche de la page. Mais dans cette barre latérale droite qui reste en haut, peu importe où je suis sur la page, toutes ces informations sont facilement accessibles pour moi. Je peux facilement le comprendre ici Si je commence à faire défiler la page vers le bas, c'est perdu. Particulièrement sur un appareil mobile. C'est la même histoire ici. Donc, si nous faisons défiler l'écran jusqu'au bas, cela s'arrête là où les informations que vous pouvez voir s' affichent en cliquant et disparaissent, car nous passons maintenant aux autres parties du site Web. Donc ça m'a vraiment plu. Et en termes de couleur, encore une fois, vous pouvez cliquer avec le bouton droit sur le bouton droit de la souris pour sélectionner une couleur parmi les styles de page. Et c'est totalement gratuit d'ailleurs, vous pouvez l' installer en tant qu'extension Chrome. Et puis vous pouvez voir ici que cela nous montre des styles RGB, mais nous voulons des textiles parce qu'ils sont beaucoup plus faciles à travailler. Vous pouvez simplement sélectionner cette couleur bleue, la copier et la coller directement dans Adobe XD. Et voilà. Maintenant vous l'avez et maintenant vous pouvez voir très facilement, c'est pour le faire fonctionner. Maintenant que nous connaissons toutes ces informations, maintenant que nous savons ce que nous voulons, ce que nous ne voulons pas, ce que nous aimons, ce que nous n'aimons pas. Nous savons ce qu'ils aiment en tant que client, nous savons quel type de couleur nous pouvons viser. Maintenant que nous pouvons commencer à cibler les flux d'utilisateurs ? Et maintenant, nous pouvons peut-être passer à la structuration des parcours que nos utilisateurs emprunteront lorsqu'ils accèderont à notre site Web et à ce qu'ils vont faire ensuite. Passons donc à Adobe XD et travaillons avec certains flux d'utilisateurs. 130. Flux d'utilisateur: Dans cette leçon, nous allons travailler avec les flux d'utilisateurs car ce site Web va être assez simple en termes de navigation, en termes de pages. Ils ne seront pas nombreux. Ensuite, nous allons aborder cette question un peu plus rapidement que si nous devions le faire sur une page un peu plus complexe. Passons donc à XD et vous connaîtrez ce modèle si vous avez regardé les parties précédentes du cours. Parce que je vous ai déjà montré ce modèle et que je vous ai donné ce modèle. Agression. Nous avons un point d'entrée, nous avons le blanc, nous avons les marches, nous avons tous ces différents éléments. Et si je choisis cette option, nous aurons Open Sans comme police. Mais en fait, je vais utiliser Poppins pour la police, par exemple alors voyons voir, peut-être que nous le pouvons. Allons ici. Permettez-moi donc de sélectionner ces éléments en bas, appuyez sur Ctrl C ou Command C sur un Mac. Permettez-moi de passer à un document XD vierge , à savoir celui-ci Control ou Command V pour le coller. Et je vais les sélectionner ici et appuyer sur Non, voyons voir, passer à l' endroit où il s'agit du composant principal. Revenons maintenant à ce fichier et fermons-le. Et maintenant, sauvegardons-le sur mon bureau, par exemple, alors allons-y et nommons cela notre flux utilisateur. On y va. Alors tout d'abord, ajoutons le composant principal ici. Et ici, je veux prendre cette couleur bleue que nous avons choisie. Alors sélectionnons-le pour le remplissage, choisissons cette couleur. Et je vais appeler cette couleur, par exemple principale, bleu. Et j'aime bien ça aussi. Allons-y et débarrassons-nous de ça. J'ai aussi aimé les autres couleurs. Donc pour la voiture alors que les sites web, donc si je vous y emmène, c'est parti. Donc, quand je survole, nous avons cette couleur plus claire. Donc, ce que je peux faire, c'est peut-être survoler puis cliquer avec le bouton droit sur bec coloré et partir de là si possible. Ou sinon, peut-être pouvons-nous aller ailleurs, car ils l'utilisent probablement ailleurs. Vous pouvez voir ici la couleur du lien, elle est assez similaire. Alors peut-être que nous pouvons le trouver. Le voici dans leur logo. Vous pouvez donc soit prendre le logo, bouton droit de la souris quelque part ici, et voyons voir. Cliquez en dehors du pic de couleur. Maintenant, il me donne juste cette couleur. J'ai donc déjà pris cette couleur, mais vous pouvez la parcourir. Vous pouvez l'ouvrir dans un nouveau document. Vous pouvez même utiliser le CSS si vous le souhaitez. Prends cette couleur. Et je vais juste y aller et je vais cliquer ici, cliquer ici, puis cliquer ici pour coller cette couleur. Maintenant, vous pouvez voir qu'il s'agit d'une légère différence, mais nous allons quand même l'appeler couleur du survol parce que je souhaite utiliser cette couleur pour nos liens, par exemple, et pour la couleur de survol de nos boutons un peu plus tard. Nous avons donc le point d'entrée, nous avons l'action, nous avons le processus. Peut-être que nous pouvons laisser ça, mais je vais prendre une décision, appliquer la couleur principale à l'arrière-plan. On y va. Et tout ça, je vais prendre la couleur du survol. On y va. Et pour tout cela, voyons voir, il s'agit d'une frontière, d'une frontière à l'autre. Appliquons cela comme couleur de bordure. Sélectionnons-la, appliquons-la à notre couleur principale comme ceci, et celle-ci sera la couleur de survol. On y va. Sélectionnez cette couleur pour être notre couleur de bordure, puis celle-ci pour être notre couleur. En plus de ce clic droit, appliquez l'aquarelle. Cela va également planer. Et nous allons nous débarrasser de la chaudière en appliquant la couleur de la bordure ici. Vous pouvez donc voir à quel point il est très simple de changer cela. Ensuite, nous allons avoir l'entrée ou juste ici sans nous soucier de la taille du tableau d'art. Je vais m'en débarrasser en une seconde et le réduire un peu. Donc, si je vous ramène ici et que je m'assure que nous sommes centrés, 20 par exemple nous avons le point d'entrée, c' est-à-dire ce que l'utilisateur atterrit sur notre site Web. Et alignons cela un peu. Alors, allons appuyer sur Shift et les flèches. Donc peut-être 40,40, pour être un peu plus précis. Donc, encore une fois, nous avons l' entrée, puis nous aurons voyons, voyons voir, voyons voir. Peut-être un processus. Alors appelons ça, disons Parcourir les voitures. Et au lieu de cela, permettez-moi de me limiter à ce côté-ci. Donc, quand je tape ici, parcourt les voitures, c'est parti. Sur la page d'accueil, nous passerons à l'action. Alors comme ça, on y va. J'avais encore 40 ans, nous en savons 20. On y va. Charmant. Alors voyons voir. Peut-être des clics pour voir toutes les voitures, parcourir les voitures, ou peut-être un Vieux Carré. Vieux Carré, qui est la voiture en question. Peut-être veulent-ils simplement consulter les informations générales sur la voiture elle-même. Nous avons donc le Vieux Carré. Alors je vais le dupliquer une fois de plus, positionné ici, Vieux Carré. Et peut-être qu'ils prennent une décision. À partir de là, nous allons suivre deux méthodes distinctes. Il y en aura donc un ici, donc juste ici, donc Shift 12, puis Shift Control D, commande D, droite, les deux, donc nous aurons une décision, puis nous passerons à l'action. Et voyons ce que nous pouvons faire. Parcourez les voitures. Peut-être que nous pouvons appuyer sur le contrôle D sur celui-ci. Et voilà. Contacts, revendeur. Et voilà. À partir de contacts liés à la dette, nous pouvons, par exemple appuyer sur le bouton Contrôle D ici, puis inverser la tendance. On y va. Assurez-vous que c'est au centre. Shift. L'une de ces actions provient de ces contacts. Juste ici. Voyons voir, réservez un essai routier. Je crois. Donc. C'est ce que nous voulons. Nous voulons qu'ils puissent réserver un essai routier ou que nous puissions faire autre chose. C'est donc une option lorsqu' ils ont contacté le revendeur. Ou ils peuvent voir une décision. Peut-être qu'en fait, nous pouvons réduire tout cela et je vous montrerai pourquoi dans une seconde. Donc Vieux Carré, car nous aurons des informations supplémentaires ici. Dupliquons donc cela. Sinon, retournez-le, assurez-vous que nous sommes au centre. Assurez-vous que nous avons 20 ans. On y va. D'ici. Faisons avancer tout cela encore plus maintenant afin que nous puissions vous entendre davantage. Espace. Le contrôle D permet de s'assurer que nous sommes au centre. On y va. À partir de là, nous allons sceller les prêts, par exemple voir les prêts. On y va. Ensuite, à partir des prêts, ils peuvent ensuite passer au contrôle D. Peut-être que nous pouvons faire pivoter cela à peu près ici, ici, au centre. On y va. Nous allons donc positionner cela pour qu'il soit là. 20. Je vais toucher le sol pour qu'il se rejoigne ici. On y va. Et puis appuyez sur la touche D, réduisez-la ou faites-la pivoter. Comme ça, assure-toi que je suis là. Charmant. Je vais prendre celui-ci en le faisant pivoter latéralement pour le positionner approximativement au centre. Il n'est pas nécessaire que tout soit parfait, peut-être à peu près par ici. Ou mieux encore. Nous pouvons prendre cela et tracer une ligne de grille si nous voulons simplement être parfaitement précis. Eh bien, je prends vraiment cette flèche, elle est au centre. Et voilà. Positionnez ceci, positionnez-le, ceci jusqu'à ce qu'il se rencontre, puis positionnez-le ici. Voyons voir, nous ne sommes pas là. On y va. Et si je dézoome un peu, zoome ici, nous y sommes. Donc, ce que nous avons fait ici c'est nous débarrasser de ce guide pour qu'il ne nous dérange pas trop. Alors Wendy parcourt les voitures, elle peut cliquer pour voir une voiture individuelle. C'est Vieux Carré, juste ici. Depuis Vieux Carré, ils peuvent cliquer sur Afficher les prêts, qui peut être un bouton, par exemple, qui peut les diriger vers le discours sur le prêt et avoir une décision à prendre . Peut-être que nous pouvons déplacer cela ici en fait. Ils ont donc une décision. Voyons voir, 21 contre deux contre quatre, peut-être 20. On y va. Et ça va vraiment être là. On y va. Et cela peut être légèrement réduit à peu près ici. Déplaçons ça ici. Alors 14, vas-y et une fois dedans, c'est tout. Encore une fois, une fois qu' ils ont vu la voiture, ils ont une décision à prendre. Ils contacteront le concessionnaire au sujet de cette voiture en particulier ou ils consulteront les prêts. Ainsi, lorsque le revendeur peut réserver un essai routier ou voir les poumons contacter le revendeur, puis réserver un essai routier. Et je suis d'accord sur les termes et conditions du prêt place ou ils peuvent prendre une décision. Ils peuvent dire, par exemple voir d'autres voitures. Et puis cela peut être leur décision à partir de cette page en particulier. Et ils peuvent soit aller ici pour parcourir d'autres voitures, soit accéder à la page spécifique sur la vue ou les voitures. Nous pouvons donc structurer cela de différentes manières. Cette page Vieux Carré va donc en fait être créée dans le CMS, dans Webflow. Nous allons donc créer une seule page , puis la dupliquer encore et encore et la remplir avec le contenu de cette voiture spécifique. Mais dans ce cas, nous pouvons peut-être les emmener voir d'autres voitures pour qu'ils puissent parcourir les voitures. Peut-être que nous pouvons même combiner les deux et créer une sorte de widget en bas de la page où ils n'ont pas à accéder à la page spécifique et à charger une page spécifique à chaque fois. Peut-être pourront-ils voir les voitures associées au bas de la page. Nous pouvons donc voir ici. Donc C, voitures connexes en bas de cette page. On y va. Et puis à partir de là, nous pouvons cliquer pour voir une voiture. Donc, encore une fois, je ne les amènerai sur cette page et ne perdrai pas de temps et de vitesse de chargement. Nous les redirigerons simplement vers la même page, mais pour une carte différente. Comme ça. Dupliquons sexuellement celui-ci, peut-être pour nous assurer que nous sommes dans un centre ici. On y va. Et 20 pareils. Donc, d'accord, je vais donc sélectionner cette flèche, ouvrir les éléments à partir de celle-ci, puis sélectionner cette flèche, coller les éléments sur le site. Ensuite, je vais simplement supprimer celui-ci. Supprimez celui-ci et assurez-vous que les deux se rencontrent juste ici. Celui-ci se réunit juste ici. Je crois. Il suffit de donner un coup de pouce supplémentaire. On y va. Maintenant que je l'ai fait, laisse-moi cacher celui-ci. Cliquez sur celui-ci et affichez-le pour que vous puissiez voir ce que j'ai fait. Je l'ai juste dupliqué et positionné ici. Et en fait, nous n' avons pas de non dans ce cas. Mais si c'est le cas, nous les redirigerons simplement vers l'une de ces différentes pages. Donc, réserver un essai routier est notre destination finale. Mais les contacts du revendeur peuvent être, ça peut être ça. Utilisons donc un livre, un essai routier comme destination finale. Donc Control D ici. Appelons ça une sortie. Comme ça. Je vais me débarrasser de ces flèches parce que je n'en ai pas besoin dans ce cas, Control D, et pour m'assurer que nous sommes au centre. On y va. Pour une raison ou une autre, nous ne sommes pas dans celui-ci. OK. Nous allons sélectionner ces deux. On y va. Deux, on y va. Charmant. Assurez-vous qu'ils sont bien positionnés et nous aurons 20 ans. Et enfin, il s'agit de notre flux d'utilisateurs. C'est ainsi que nos utilisateurs navigueront sur notre page. Faisons donc en sorte que ce soit à 40 ans. Et je vais supprimer l'espacement, par exemple 40 h, 5 h 00 pour le déplacer jusqu'ici afin que vous puissiez voir que vous n'avez pas à utiliser des tailles spécifiques pour vos planches d'art. Vous pouvez voir comment vous pouvez facilement les ajuster et les appliquer à différentes tailles. Mais nous en avons 40 partout, comme vous pouvez le voir ici, il s'agit de notre flux d'utilisateurs. Allons-y et révisons-le rapidement une fois de plus. Débarrassons-nous de ça. Encore une fois. Nous n'aurons qu'à voir ce que j'ai fait. Faites-les tous dupliquer. Alors voyons ça encore une fois. Nous avons donc le point d'entrée, qui est la page d'accueil sur laquelle nos utilisateurs vont s'endetter. Ils peuvent parcourir les voitures. Cela peut se trouver sur une page d'accueil ou sur une page séparée. De là, ils peuvent cliquer sur la voiture et la voir pour plus d'informations. Et à partir de là, ils peuvent prendre une décision. Ils peuvent soit consulter un prêt et voir certaines options pour les poumons dont ils disposent, par exemple quelle entreprise accorde des prêts et d'autres termes et conditions de recherche , et y inscrire toutes ces informations. À partir de là. Ils peuvent contacter le concessionnaire ou vous contacter directement, s' ils souhaitent voir la voiture et ils l'apprécient. Peut-être veulent-ils en savoir plus sur fait qu'il est toujours disponible à la vente. Est-il disponible pour un essai routier ? Si c'est le cas, quand sera-t-il disponible pour un essai routier et tout cela séparément. Ou ils pourraient voir des voitures connexes. S'ils n'aiment pas une voiture spécifique à leur dette, ils peuvent cliquer sur cette carte ou sur plusieurs cartes. Nous allons parler de la mise en page dans un moment. Et puis Vieux Carré pour plus d'informations sur cette carte qu'ils apprécient réellement s'ils contactent le revendeur. Encore une fois, notre objectif principal est de les amener à réserver un essai routier. Et ce sera notre stratégie de sortie car l'essai routier sera en fait la dernière étape de ce processus au cours de laquelle ils réservent un essai routier. Et nous savons en fait qu'ils ont réservé un essai routier et c'est ce que nous voulions vraiment faire. Nous avons donc tous ces composants. Au fur et à mesure que nous créons cette page tout au long de ce cours, je vais en fait enregistrer un fichier, un fichier. Et quand tu l'auras, il sera terminé, évidemment parce que j'enregistre ce cours en ce moment. Mais vous serez en mesure de suivre étape par étape. Je vais vous donner une information complète. Vous pouvez donc vous en servir comme référence. Mais je vous encourage vraiment à construire le vôtre à mes côtés tout au long de ce cours. Comme je l'ai dit, ce n'est que la première partie. Vous pouvez voir que nous avons ce flux d'utilisateurs. Nous allons maintenant passer aux maquettes papier dans la prochaine leçon. Et je vais les scanner et les mettre ici pour pouvoir m'y référer plus facilement. Comme je l'ai mentionné, la prochaine étape sera celle des wireframes papier . Je vais utiliser cette feuille de papier à points noirs, que j'ai déjà mentionnée dans le cours. Mais ne t'en fais pas pour ça. Si vous ne l'avez pas, vous pouvez utiliser n'importe quel vieux morceau de papier. Alors je t'y verrai. 131. Architecture de contenu: Dans la dernière vidéo, j'ai dit que nous allions passer aux wireframes papier, et nous passerons en fait wireframes papier dans la vidéo suivante. Mais dans cette vidéo, je souhaite vous montrer une autre approche, appelée architecture de contenu, dans laquelle vous planifiez le type de contenu qui sera diffusé sur chaque page, importance et comment on le positionne sur la page pour le mettre en haut, pour le mettre en bas. Nous allons en parler dans cette vidéo. Et vous n'avez pas vraiment besoin de le faire spécifiquement dans cet ordre précis. Vous pouvez passer directement aux wireframes papier si vous avez déjà un plan d' architecture de contenu en tête. Mais si ce n'est pas le cas, je voulais tout de même vous montrer cette méthode car je pense qu'elle peut être bénéfique de temps en temps selon le projet en question. En particulier sur les grands projets où vous avez plusieurs éléments de contenu et blocs de contenu. Il est donc beaucoup plus facile et important de l'aborder de cette façon lorsque vous planifiez réellement une architecture de contenu plutôt que de ne pas le faire autrement. Si votre client n'est pas en contact avec la conférence, vous pouvez également le facturer. Mais la majorité d'entre eux auront au moins une idée du type de contenu qui sera affiché sur les pages et où ils aimeraient présenter. Quelle est leur offre principale, quelle est leur offre secondaire , leur offre tertiaire, etc. Ce qui est plus important, ce qui est moins important. Vous pouvez donc structurer tout cela à l' aide de l'architecture de contenu. Nous voici donc dans Adobe XD et cela va être assez simple. Je vais donc appuyer sur un sur mon clavier, par exemple pour l'un de ces aéroports. Et prenons 13, 66, peu importe. Et c'est ce que nous appelons architecture de contenu. En fait, appelons-la Sitemap Slash Content Architecture parce qu' elle contiendra à la fois de l'intérieur et, oups, je ne voulais pas le faire. Débarrassons-nous de celui-ci. Et pour celui-ci, ce que je veux vraiment, c'est le remplacer par Poppins. Choisissons donc Poppins. Là-bas. Et voilà, parce que j' aime beaucoup Poppins ces derniers temps. Et c'est souvent une police. Cela fonctionne dans Webflow, dans le magazine Works Seen, Google Fonts, donc cela fonctionne bien sur le Web. J'aime son apparence, alors remplacons-le ici. On y va. Et ce serait beaucoup plus simple si je créais des composants séparés pour ceux-ci, plutôt que de simplement prendre des composants existants, mais peu importe, nous allons nous en occuper. Alors Poppins, où nous sommes. Alors voilà Poppins, on y va. Poppins réserve un essai routier. Pins et goupilles de sortie. OK, donc ce que je vais faire, c'est en prendre un. Choisissez donc cette carte, par exemple appuyez sur Ctrl C pour la copier, puis en sautant ici, contrôlez V pour la coller. Je suis allé dissocier le composant et j'ai appuyé sur Contrôle G ou Commande G pour le regrouper à nouveau, l'appeler stack, l' appeler appariement pour avoir exactement les mêmes détails. Il y aura donc quelque chose comme une page d'accueil pour que vous puissiez voir comment elle évolue bien. Nous allons donc appliquer ici une couleur foncée. Je ne sais pas On peut peut-être prendre quelque chose qui est presque noir. Peut-être. voilà, j'aime bien. Et si nous prenons Q ici et que nous nous cachons sur la page, vous pouvez voir qu'il est 21 h 22 contre 4, ce qui est presque noir. Et je pense que cette couleur peut bien fonctionner pour, disons, les titres. Donnons-lui donc une couleur foncée et ombragée car elle est assez foncée et peut-être utiliserons-nous une couleur plus claire plus tard. Et voyons voir, c' est du blanc pur, alors donnons-y. Appelons cela des blancs purs. Et j'utilise des tirets dans ma stratégie de convention de dénomination. Vous pouvez utiliser des soulignements, vous pouvez utiliser deux tirets, vous pouvez faire ce que vous voulez. Et enfin, nous avons Poppins comme police d'écriture ici. Je ne vais pas l'ajouter ici tout de suite. Je l'ajouterai plus tard lorsque nous commencerons à travailler sur notre design. Appelons donc cela par exemple maison », notre élément de navigation, « élément de navigation ». On y va. Et puis, à partir de la page d'accueil, nous pouvons le dupliquer parce que n' oubliez pas que nous avons des prêts ou, mieux encore, nous avons d'abord des voitures. On y va. Et à l'intérieur des voitures, regroupons-les ensemble. Contrôlez donc G, appelez-les objets de navigation et mettez-les dans une pile comme ça. Maintenant, je peux sauter à l'intérieur et je peux le déplacer et me positionner plus haut que je veux ou je peux sélectionner ceci et plus haut que je veux ou je peux sélectionner ceci et lui donner 150, par exemple. Donc, encore une fois, nous avons une page d'accueil où toutes nos informations seront structurées, puis nous avons des voitures où toutes les voitures seront présentées. Ensuite, s'il s'agit d'une double dette, nous pouvons placer un prêt dans lequel nous indiquerons tous les différents prêts disponibles. Et enfin, lorsque nous dupliquons cela, donnons-lui, par exemple, un contact. Comme ce sera notre page de contact. Et comme je n'aime pas trop l'espacement, il est assez grand. Réduisons-le à des centaines, et peut-être que cela fonctionnera pour le moment. Prenons donc le texte d'ici, contrôlez C, contrôlez V pour le coller à l'extérieur. Et comme vous ne la voyez pas, laissez-moi la mettre ici pour que vous puissiez voir à quel point cette couleur est bonne dès maintenant . Donc, ce que nous allons faire ici, c'est évidemment que toutes nos pages doivent être naviguées. Donc, la localisation de Navi. On y va. Et je vais appuyer sur Control G pour regrouper cela. Et je vais l' appeler texte ou sections. sections encore meilleures car chaque site Web comporte des sections différentes. Je vais le mettre 40 puis appuyer sur la pile ici dans cette direction parce que je veux dupliquer ce texte plusieurs fois pour avoir plus d'options. Donc, Control D, et je vais donner à ça, voyons voir, 20. Oui, je pense que cela fonctionne très bien. Tout de suite, ce dont nous avons besoin au sommet, c'est savoir qui est cette entreprise ? Parce que lorsque vous venez en tant que nouveau visiteur, vous voulez savoir qui est cette entreprise ? Que faites-vous en une fraction de seconde avant de quitter le site ? Nous voulons donc être intelligents avec notre copie. Dites-leur que ce sont des voitures exclusives. Ils vendent des voitures, mais des cartes exclusives. Donc, si vous n'êtes pas de ce type d'acheteur, disons que ce n'est peut-être pas le bon site Web pour vous. Ou si vous êtes ce type d'acheteur vous savez que vous êtes au bon endroit. Alors peut-être pouvons-nous écrire qui nous sommes, qui nous sommes comme ça, comme un titre. Ensuite, en dessous, nous voulons peut-être leur dire ce que nous faisons. Donc, ce que nous faisons, vendre des voitures exclusives et Dislocation. Nous avons affaire à ces marques, peut-être à quelque chose comme ça. Ensuite, ce que nous proposons, cela peut se trouver dans la section contenant différentes cartes sur la page, par exemple où nous pouvons montrer différentes voitures en fonction de leur offre et de l'offre initiale qu'ils proposent sur moment. Peut-être que nous pouvons apporter certains avantages. Peut-être nos avantages. Peut-être que nous pouvons obtenir des soins de beauté gratuits, un lave-auto ou peut-être une protection complète de la carrosserie, des roues ou des pneus d'hiver supplémentaires sont tous ces avantages lorsque vous achetez une voiture sur place. Peut-être que, comme nous l'avons vu sur le site Web de ce concurrent, nous pouvons peut-être leur offrir le transport gratuit entre le showroom automobile et leur lieu de vie réel. Peut-être que cela peut être un avantage. Et enfin, peut-être où nous sommes, où nous sommes. Mets-le sur une carte, comme ça. Et puis en dessous, vous pouvez peut-être nous contacter. Parce qu'une fois de plus, il est très important d'avoir un formulaire de contact. Enfin, nous aurons un pied de page en bas de page. Passons donc rapidement en revue tout cela une fois de plus. Nous avons donc la navigation parce que nous avons besoin navigation sur chaque page, évidemment , pour savoir qui nous sommes, nous voulons nous présenter et leur dire ce que nous faisons. Parce que nous voulons présenter nos services et non pas simplement dire que nous vendons des voitures exclusives, mais peut-être de quelle manière le faisons-nous ? Peut-être établir un peu de confiance. C'est l'exemple parfait où vous allez utiliser ou les témoignages peuvent être des choses comme ça, ce que nous proposons. Donc oui, nous proposons ces voitures exclusives, mais nous leur proposons peut-être fonctionnalités supplémentaires, comme peut-être que nous avons une garantie, peut-être que nous avons, comme je l'ai mentionné, ce service de polissage et d' autres choses de ce genre, nos avantages . Alors pourquoi choisiraient-ils vous ou vos concurrents ? Peut-être que vous offrez une garantie supplémentaire, voyons voir, pour une année supplémentaire. C'est bien ai l'esprit tranquille, car je devrai peut-être payer le service et les frais. Alors, où en sommes-nous ? Ce qui est encore une fois très important. Et nous pouvons afficher une carte, nous contacter et un pied de page. Et peut-être pouvons-nous dupliquer ces sections l'ensemble de nos pages et de notre navigation. Évidemment, cela se retrouvera sur chaque page. Voyons voir, il s'agira des sections d' accueil, puis de Control D pour les dupliquer. Je vais le déplacer à peu près ici. Ou mieux encore, je peux les dissocier. Je peux donc facilement les aligner ici et ensuite nous pourrons résoudre ce problème un peu plus tard. Mba peut déplacer ça ici. Je peux peut-être le déplacer ici pour nous laisser un peu d'espace. Voyons voir, 100 pixels. On y va. Donc, sur ce point, nous voulons nous débarrasser de toutes ces informations. Nous aurons donc des informations que nous allons réutiliser sur l' ensemble de nos pages. Nous allons créer des composants dans XD et Webflow. Nous allons créer ces symboles que nous pourrons réutiliser exactement avec la même méthodologie et la même structure que dans XD, Figma, comme dans tout autre outil que vous pourrez réutiliser sans avoir à les recréer tout le temps. Donc, ce que nous aurons ici, c'est que nous pouvons peut-être aussi avoir des informations promotionnelles. Voyons quelque chose comme Wrally pour le bal de fin d'année, alors que pour quelque chose comme ça. Voyons voir. Meilleure promotion sous une forme où nous pouvons peut-être ajouter un slogan ou quelque chose comme ça. Ensuite, ce que nous pouvons faire, c'est créer du stock. Et peut-être que nous pouvons mettre huit voitures. Peut-être juste pour montrer qu'ils ont huit voitures en ce moment, supposons que nous puissions avoir un appel à l'action clair. Ou en fait, nous n'en avons pas parce que nous avons le stock. Peut-être que nous pouvons mettre cette carte pour chaque voiture. Ils peuvent cliquer sur la carte pour accéder à la page complète, qui vous montrera toutes les voitures C'est à vous de décider quand vous les verrez réellement. Nous sommes donc ici à parcourir les voitures, qui sont les voitures de notre navigation, qui est celle-ci ici. Ainsi, lorsque vous cliquez sur Parcourir les voitures, vous verrez Afficher les voitures. Ainsi, à partir de chacune de ces huit, lorsque vous cliquez sur chacune d'entre elles, vous verrez cette page d'affichage du panier et, à partir de là, le processus de décision a lieu. Nous avons donc voyons voir, ce sont des sections réservées aux voitures. Ensuite, nous avons les prêts. Alors allons-y et cliquons sur Ctrl D. Dupliquez-le. Position, de ceci à ici. Oh, désolée. Voyons où nous en sommes. Nous sommes vus comme vendre, peu importe. Donc, encore une fois, je vais me débarrasser de celui-ci. Je vais me débarrasser de celui-ci parce que ce sont les sections que nous conservons et répétons. Nous aurons donc ici, par exemple, meilleures informations promotionnelles. Mais différent parce que le précédent était pour les voitures, celui-ci concerne les prêts. Donc, évidemment, ce sera un peu différent de ce que nous pouvons faire, c'est leur montrer notre offre. Parce que tous ces autres concurrents ont leur propre offre. C'est notre offre et c'est pourquoi nous sommes un peu différents et peut-être leur montrons nos partenaires. Parce que comme nous l'avons mentionné, inexploré en bref, cette entreprise ne le fait pas seule. Et puis ils ont ces partenaires extérieurs qui les aident à se déplacer depuis l'Allemagne. Si vous vous souvenez que les voitures arrivent d'Allemagne vers la Serbie, alors nous avons ces partenaires pour les prêts parce que cela peut être le cas des banques des sociétés de prêt sont cellulaires et papa, ce qui se passe avec le poumons. ont des compagnies d'assurance et ce sont tous des partenaires extérieurs. Nous avons donc des prêts et nous avons des partenaires spécifiquement pour les prêts. Ensuite, nous pouvons avoir où nous sommes, nous contacter et le pied de page, je pense que c'est très bien. Et appelons cela les sections des prêts et des prêts. Pourquoi nous avons deux espaces ici et là, nous y allons. Et enfin, appuyons sur Control D une fois de plus. Dupliquez-le et naviguez peut-être ici et contactez-nous. Alors voilà, voyons voir, je vais me débarrasser de ceci et de cela. Et au lieu d'être top premium car j'ai peut-être la meilleure image, l'image meilleur héros, par exemple parce que n'oubliez pas que les sections sur les héros se trouvent sur vos pages, pas seulement sur la page d'accueil, c'est juste première page, première section de la page ci-dessus, par défaut. Appelons donc cela une section Contactez-nous. On y va. Regroupons maintenant tous ces éléments. Je vais donc appuyer sur Shift Control G. Je vais appeler cette page d'accueil. On y va. Ce sera notre page de voitures. Ce sera notre page sur les prêts. Animé. Et enfin, page Contactez-nous la page de contact. On y va. Je vais regrouper tous les hit stack ici. Et je vais appeler cela notre plan du site. Architecture des contenus. Une jolie tablette. Donc si je le positionne comme nous le faisions précédemment avec 40, et nous voici à 40. Je peux double-cliquer, ajouter ceci ici. Il n'est peut-être pas nécessaire que ce soit parfait. Je suis un peu trop attachée à ces détails. Alors parfois, tu devras juste te montrer indulgente avec moi. Alors laissons les choses comme ça. Nous avons donc un flux d'utilisateurs sur la base duquel nous avons créé notre architecture de contenu. Et maintenant , sur cette base, nous allons enfin passer aux wireframes papier. Maintenant, c'est beaucoup plus simple, car nous avons intégré toutes ces idées dans le plan du site et l'architecture du contenu sera beaucoup plus simple à concevoir que si nous avons tout juste commencé avec des wireframes en papier. Encore une fois, cette méthode n' est pas vraiment nécessaire, mais c'est bien de l'avoir. Et c'est bien si vous avez toutes ces idées en tête pour simplement les intégrer à la page d'architecture de contenu, surtout si vous avez plusieurs sections différentes pour un grand site Web comme un blog, par exemple il est donc beaucoup plus simple de procéder de cette façon plutôt que de simplement commencer par des maquettes papier directement. Donc, dans la section suivante, nous allons enfin passer aux wireframes papier. Alors je t'y verrai. 132. Cadres de fil en papier: Maintenant que nous connaissons notre architecture de contenu, passons rapidement à la question et rappelons-nous un peu. Nous avons donc ici des voitures de page d'accueil, prêts, qui nous contactent, et nous pourrons assez facilement distinguer toutes ces pages grâce à ce dont nous avons parlé jusqu'à présent dans l' architecture du quadrant. Ce que nous allons faire ensuite, c'est passer aux wireframes papier. Et ce que j'ai ici, c'est juste ce bout de papier à points noirs. Comme je l'ai mentionné précédemment, vous n'êtes pas obligé d'utiliser ce type de papier. Vous pouvez simplement utiliser une vieille feuille de papier blanc ordinaire, ou vous pouvez utiliser un bloc-notes, vous pouvez utiliser ce que vous voulez dans ce que vous avez. J'aime les utiliser, en particulier pour ces cours, car s'agit d'un papier noir avec des points blancs dessus. Et quand j'ai commencé à écrire avec ces stylos gel blancs, se traduiront très bien pour vous et vous pourrez très bien le voir. Passons donc à autre chose. Ce que je vais d'abord faire, c'est créer un plan rapide juste au centre de ma page ou un fluide, car n'oubliez pas que plus tard, je vais le scanner et l'intégrer dans Adobe XD. Donc, redescendez jusqu'ici en gros. Cela n'a donc pas besoin d'être parfait, comme je l'ai mentionné à quelques reprises. Et je vais juste le laisser comme ça. Donc, ce que je vais faire d' abord, c'est que j' ai déjà quelques taches, mais encore une fois, cela n'a pas vraiment d'importance. Ce que je vais faire. Tout d'abord, si je vous ramène ici, nous avons la navigation et nous savons qui nous sommes directement d'ici. C'est donc sur cela que nous allons nous concentrer ici. Bloquons donc une section rapide ici. Donnons-lui le nom d'un logo et utilisons-en un plus petit. Appelons donc celui-ci des prêts automobiles, et contactez-nous. On y va. Et si je zoome un tout petit peu, vous pourrez le voir un peu mieux. On y va. Alors voitures, prêts, contactez-nous. Et maintenant, laissez-moi zoomer d'un simple toucher pour que vous puissiez le voir un peu mieux. Donc, ce que nous allons avoir ici , c'est une sorte de section sur les héros. Bloquons donc les petits éléments afin de pouvoir tous les avoir sur notre page, comme ça. Nous aurons donc ici peut-être un titre, peut-être un sous-titre. Et puis nous aurons peut-être un bouton. Alors laisse-le n. Et ensuite, nous aurons une sorte de voiture. Parce qu'une fois de plus, il s'agit d'un site Web automobile et il suffit de vérifier mes compétences en dessin. Fou. Mais cela n'a pas vraiment d'importance, comme je l'ai mentionné à quelques reprises, car c' est juste pour nous. Nous voulons être en mesure de présenter à nos clients quelque chose d' attrayant et nous voulons être en mesure de le comprendre assez facilement. C'est pourquoi nous utilisons ces maquettes en papier pour afficher rapidement quelques idées sur une page. Alors peut-être que je peux avoir quelques icônes ici. Alors je vois, on y va. En dessous. Peut-être que nous pouvons avoir notre section. Voyons ce que nous avons ici. Nous avons donc ce que nous sommes. Alors peut-être que nous pouvons continuer et créer une sorte d'image. Peut-être à peu près par ici, de ce côté. On y va. Et je peux taper qui nous sommes et peut-être quelques paragraphes de textes. Alors si nous y arrivons, nous avons ce que nous faisons. Ce que nous faisons. Peut-être qu'il peut s'agir d'une section avec les voitures directement. Peut-être pourrions-nous avoir les cartes que nous avons mentionnées et voir toutes les voitures, car c'est ce que nous faisons après tout. Donc, ce que nous pouvons avoir ici, ce sont peut-être trois cartes. Allons-y avec une mise en page comme celle-ci. Comme je l'ai dit, peu importe si je ne suis pas aussi précis, car j' essaie de précipiter cette section parce que nous avons plusieurs pages. Mais je veux juste vous expliquer noyau de mon processus de réflexion. Nous aurons donc ici le nom, peut-être le prix et peut-être quelques informations ici. Donc le nom de la voiture, prix de la voiture et quelques informations de base. Et nous discuterons de ces informations de base dans une seconde et nous aurons évidemment des images de voitures ici. Ensuite, fermons ces cartes ici même. Connectez ces lignes très rapidement. Et puis en dessous, on pourra peut-être avoir C sur toutes les voitures. Peut-être. Voir toutes les voitures. On y va. Bouton au centre. Je pense que cela fonctionnera très bien. Alors. Peut-être que nous pouvons avoir une section ici de ce côté, peut-être juste ici. Je peux donc avoir un peu plus d' espace en bas. Cela peut donc être imagé et nous pouvons l'appeler ainsi que nous proposons. Peut-être que nous pouvons avoir trois Nikon différents , quelque chose comme ça. Je PEUX donc peut-être avoir du texte, du texte et du texte ci-dessous, quelque chose comme ça pour que nous puissions remplir cette section. Alors peut-être pourrons-nous le bloquer. Parce que si je t'emmène ici, nous aurons nos avantages. Donc, ce que nous offrons et peut-être nos avantages peuvent se trouver dans la section ci-dessous. Peut-être quelque chose comme ça. Peut-être que nous pouvons avoir, je vois, et pour l'icône, je vois N, puis peut-être avoir un titre pour chacun de ces avantages. Et il peut y avoir un paragraphe de texte ou quelque chose comme ça. Vous pouvez donc voir que je les passe en revue assez rapidement parce que c'est tout l'intérêt. Vous avez peut-être deux, cinq ou dix idées différentes. Je veux écrire une feuille de papier le plus vite possible. Et comme nous avons en place cette belle architecture de contenu claire, mis en place cette belle architecture de contenu claire, il est beaucoup plus simple de la mettre en place de cette manière. Alors ce que nous voulons, c'est prendre contact avec nous. Alors, contactez-nous. On y va. Et peut-être pourrions-nous l'avoir sous d'un formulaire normal comme celui-ci. On y va. Et puis peut-être un au centre pour tout remplir. On y va. Bouton juste ici, BTN. Et puis en dessous, ce que je veux, c'est avoir peut-être une carte. Très bien, par ici. On y va. Il peut s'agir d'une carte. Et voilà. Et puis où nous en sommes, peut-être où nous sommes. Et peut-être pouvons-nous utiliser la même mise en page, simplement la réutiliser, qu'il s'agisse d' icônes, de textes d'icônes, de textes, de textes. On y va et on met peut-être, je ne sais pas, une adresse, un numéro de téléphone, un e-mail, peu importe. Et enfin, fermons cette page d'accueil. Vous pouvez placer un logo au centre. Ensuite, je peux utiliser le plus petit. Peut-être que nous pouvons utiliser FB pour Facebook, TW pour Twitter, iGE pour Instagram et L, et pour LinkedIn ou autre. Et puis ici, nous pouvons avoir la même navigation. Donc, de ce côté , appelons cela des voitures. Prêts, contactez-nous. On y va. Donc, si je zoome juste pour le toucher, vous pourrez le voir un peu mieux. On y va. Donc, tout d'abord, nous avons la navigation juste en haut. Ensuite, nous avons cette section consacrée aux héros avec le contenu sur le côté. Et de l'autre côté, nous avons l'image de qui nous sommes. Ensuite, nous avons toutes ces cartes en place que vous pouvez voir ici. dessous, nous avons ce que nous offrons, puis en dessous, nous avons nos avantages. Peut-être que nous pouvons mettre une flèche ici ou simplement être des avantages. Avantages. On y va. Voici donc nos avantages en dessous. Nous avons Contactez-nous. Ensuite, nous avons la carte sur les informations de chaque côté, qui est identique à cette section. Et enfin, nous avons le pied de page en bas de la page. Ce que nous venons de faire, c'est placer certaines informations que nous avons ici , dans l'architecture de contenu, sur une feuille de papier pour les visualiser beaucoup plus facilement. Maintenant, ce dont nous avons besoin, c'est de créer des voitures. Parlons donc de la dette maintenant. Tout d'abord, prenons celui-ci qui est le numéro dix. Je vais l'appeler chez moi. Maintenant, allons-y et créons des voitures. Je vais donc utiliser à peu près la même mise en page que celle que j' ai faite ici. Alors partons d'ici peut-être que Let's see here n'a pas besoin d'être précis. Voyons voir, j'utilise lequel est ce numéro dix. Alors peut-être que je n' utiliserai pas celui-ci de manière idéale, mais encore une fois, cela n'a pas d'importance. Il suffit de mettre en place la structure brute. On y va bien. Fermons celui-ci. Utilisons le numéro huit. Donc, encore une fois, si nous vous ramenons ici, à l'intérieur des voitures, ce que nous avons, c'est la navigation. Nous avons ces trois répétitions plus la négation. Nous avons donc quatre sections qui se répètent. Nous avons les meilleures informations promotionnelles et nous en avons huit fois. Alors, comment pouvons-nous y parvenir ? C'est très simple, copions simplement notre navigation. Alors écrivons un logo, écrivons des voitures. On y va. Et écrivons, voyons les lois et contactez-nous. On y va. Et pour les informations promotionnelles, ce que je peux faire, c'est peut-être faire quelque chose d' un peu différent. Nous avons donc toujours ces informations sur le problème ici. Mais prenons peut-être une voiture de profil. Une fois de plus, mes talents épiques de dessinateur sont en place. On y va. Donc, voiture de profil, peut-être pourrions-nous avoir un cercle d'arrière-plan et peut-être une sorte de titre en haut. Quelque chose comme ça avec un cercle en arrière-plan autour de la voiture. Je pense que cela fonctionnera très bien. J'ai distingué cette section de toutes les autres. Peut-être. Peut-être pourriez-vous écrire quelque chose comme notre collection exclusive. On y va. Et nous allons simplement utiliser ces cartes que nous venons de créer et les placer ici. Parce que n'oubliez pas que si je vous emmène ici, c'est la section des voitures qui affichera toutes les voitures sur la page. Et c'est ce que nous allons créer. Maintenant. Créons-en un à partir d'ici. Alors prenons cette hauteur, peut-être. Commencez ici, positionnez-le ici, puis ici. On y va. Et prenons, je ne sais pas si cela ne va pas être très beau, mais peu importe, comme je l'ai mentionné, ce n'est qu'un croquis. Et croyez-moi, si je ne parle pas, je le fais dix fois plus vite qu'ici. Alors fermons ces cartes comme ça, comme ça, comme ça. On y va. Donnons-leur la même image du haut de la page ici. On y va. Fermons-le comme ça, juste pour savoir qu'il s'agit d'une image. Il y avait un nom sur chacun d'eux. Nom, puis nous avons eu un prix. Et puis nous avons eu ces informations en bas à droite. Donc, ce que nous allons faire, au lieu de me laisser dessiner tout ça, je vais les taper huit fois, comme ça. Et puis en dessous, nous allons simplement créer, nous contacter. Contactez-nous. Parce que si cela vous amène ici, vous pouvez voir que dans la section des voitures, nous avons le stock, c'est-à-dire celui que nous venons de dessiner. Et puis nous avons notre page Contactez-nous et notre pied de page. Alors peut-être nous contacter, vous pouvez y aller. Et puis où nous en sommes. Nous avons ici l'image d'une carte. Carte. Et enfin, nous pouvons avoir le pied de page en bas. Donc quelque chose comme ça. Cela peut donc être un logo. Cela peut être, voyons voir, des voitures, des prêts, des contacts. On y va. Ce peuvent être ces icônes, adorables. Maintenant que la section de la voiture est créée, passons rapidement aux poumons. Et si nous nous souvenons, nous avons une fois de plus la navigation sur les meilleures informations promotionnelles, nous avons nos partenaires d'offre, et puis cette même section. Donc, si nous le remettons ici, créons-en un autre. Donc, encore une fois, cela n'a pas besoin d'être parfait. Peut-être que je ne les scannerai même pas parce qu'ils sont vraiment extrêmement rugueux. Peut-être quelque chose comme ça , juste pour nous donner un peu de place. Jolie erreur. Voyons voir. Permettez-moi de prendre le numéro dix parce qu'il est assez épais et que je peux y inscrire un logo. Et puis des voitures, des prêts, des contacts. J'ai vécu. Et rien que pour eux. Donc, ce que nous pouvons faire, c'est peut-être avoir un titre au centre. On y va. Et puis peut-être que nous pourrons avoir deux voitures. Il peut y avoir une voiture ici. On y va. Et il peut y avoir une voiture ici. Quelque chose comme ça. On y va. Alors peut-être que nous pouvons penser à la section d'animation car ces deux voitures peuvent sauter du site. Le titre peut être glissé depuis le bas ou depuis le haut. Vous pouvez donc commencer à penser à ces choses tout de suite sans jamais les créer. Nous avons donc ici cette option. Ensuite, en dessous, ce que nous pouvons faire, c'est peut-être avoir, rappelons-nous. Nous avons nos meilleures informations promotionnelles , à savoir ici. Ensuite, nous avons notre offre, puis nos partenaires. Voyons donc notre offre. Notre offre. Peut-être pouvons-nous créer la même mise en page que celle que nous avons faite sur la page d'accueil. Peut-être quelque chose comme ça pour les avantages et peut-être pouvons-nous faire de même. Alors peut-être que nous pouvons taper. Je vois, je vois, je vois. Arrondissez-les en cercles. Ensuite, nous avons le titre, puis nous avons les textes des paragraphes juste en dessous. Ensuite, nous avons nos partenaires. Appelons-les donc par quelque chose comme Non, donnons-leur la mise en page que nous avions faite précédemment sur la page d'accueil, juste de ce côté. Donc, ce que je vais faire, c'est avoir mon image ici. On y va. Et peut-être faire quelque chose d'un peu différent cette fois. Alors peut-être mettre un logo ici. Alors laisse-moi choisir le numéro dix. Donc logo. Et puis peut-être que de ce côté, je pourrais mettre une carte et appeler cela un logo pour les partenaires. Et peut-être pouvons-nous les appeler nos partenaires. Partenaires. On y va. Et puis peut-être pourrons-nous mettre la même mise en page que celle que nous avons faite sur la page d'accueil ici pour qui nous sommes, mais juste pour nos partenaires et pour ne pas perdre trop de temps juste pour nous rappeler où nous en sommes. Contactez-nous en bas de page pour que je puisse prendre le numéro dix, alors contactez où nous sommes avec l'image. Et enfin un pied de page pour que nous puissions avancer rapidement. nous reste plus qu'à nous contacter. Faisons-le donc en 2 s car ce sera très simple. Je n'aurai pas besoin de créer de lignes supplémentaires ici. Je peux peut-être le mettre ici. J'ai été logo. On y va. Et au lieu d'écrire, nous savons déjà ce qu'ils sont. Donc, si nous nous souvenons de la page Contactez-nous, nous n'avons que la navigation et ensuite toutes ces choses. Donc, l'image du meilleur héros et où nous en sommes. Tous ces éléments sont donc restés. Alors peut-être que nous pouvons donner une belle image d'un héros. Ensuite, nous pouvons nous écrire en nous contactant où nous sommes avec l'image d'une carte. Et enfin pour le terme. Et maintenant, ce que nous devons faire, c'est créer la page où nous allons fournir des informations supplémentaires sur la voiture. Donc, si je vous amène à l'une de ces pages que nous venons de consulter, alors celle-ci, par exemple, nous avons toutes ces différentes sections. Nous avons la voiture, nous avons les images. Nous allons filtrer toutes ces informations dans un instant. Mais pour l'instant, il va falloir créer quelque chose comme ça. Alors, comment pouvons-nous y parvenir ? En fait, c'est très simple quand on sait ce qu' il faut mettre, mais je vais juste mettre quelques blocs dedans. Et plus tard, dans XD, nous parlerons des différentes sections que nous pouvons créer. Pourquoi créons-nous et d' autres choses de ce genre ? Nous avons donc ici la page sur les voitures. Laissez-moi l'appeler voiture dans la page détaillée. Et laissez-moi, permettez-moi de créer un bref aperçu par ici, à peu près par ici. Et n'oubliez pas que cette page sera créée à l'aide de Webflow, CMS. Il n'en créera donc qu'un. Et puis, lorsque nous saisirons toutes les informations, CMS se chargera de tout le travail. Ainsi, nos clients pourront inclure des images supplémentaires et des informations distinctes pour chaque voiture. Donc la couleur de l'année, la production, le kilométrage, toutes ces informations. Ils pourront l'inclure pour toutes les autres voitures qu'ils installeront . Mais la structure et la disposition générales seront exactement les mêmes. Donc, si je t'emmène ici, nous avons la barre de navigation juste ici, donc le logo et nous n'avons aucun article. Ensuite, nous allons peut-être le diviser en deux sections, comme je vous l'ai montré sur ce site Web en particulier. Nous avons une section avec les images et les informations et la deuxième section avec la carte qui va peut-être suivre et la mise en page que je vous ai montrée. Donc, ce que nous pouvons faire ici, c'est peut-être créer une mise en page qui ressemblera à ceci. Et bien sûr, vous pouvez toujours jouer avec cela et ajuster ces sections. Je vais donc mettre une image géante et peut-être des images plus petites. Ensuite, placez une bannière avec une icône ou du texte à l'intérieur, qui, lorsque vous cliquez dessus, agrandira l'image. Donc j'ai mis ça ici, ça ici. Et puis de ce côté, nous allons créer cette carte, peut-être de la même taille que celle-ci. Cela n'a pas vraiment d' importance pour le moment, mais lorsque nous passerons au design, cela aura de l'importance. Donc, ce que nous pouvons faire ici, c'est mettre les informations que vous avez mentionnées, le sel, nous pouvons peut-être indiquer le nom de la voiture, prix de la voiture. Peut-être une petite description ici. Et puis peut-être pourrons-nous mettre deux boutons. L'une concerne peut-être la réservation d'une voiture, qui, lorsque vous cliquez dessus, vous accédez au formulaire de contact. Et l'autre peut être des options seules ou des options prêt C. Des options. On y va. Et cela peut vous prendre un discours trop long, des prêts, un formulaire de contact, une page ou autre. Ce sera donc une mise en page pour cette section. Et puis en gros, ce que nous allons faire, c'est faire main libre et je vais le tourner ici. entendrai peut-être quelque chose comme ça. Donc, vue d'ensemble ou révision. Un tas d' informations différentes à l'intérieur. Ensuite, nous aurons les spécifications de la voiture. Et cette section peut être longue. Nous sommes une bonne information. Ensuite, ce que nous pouvons faire, c'est peut-être mettre performance, puis intégrer toutes les informations à la performance. La sécurité, comme nous l'avons vu sur ce site Web. Parce que la sécurité est très importante. De toute évidence. Peut-être des aides à la conduite ou quelque chose comme ça. Alors peut-être pourrions-nous mettre l'extérieur et le type de détails extérieurs qui ont de l'extérieur. Il peut s'agir de pièces colorées et d'autres objets de ce genre. Intérieur. Peut-être que vous avez des sièges en cuir ou un système de climatisation latéral ou quelque chose comme ça. Alors peut-être pourrons-nous mettre des dimensions. Dimensions. On y va. Et c'est possible. Cette section peut être fermée ici. Et cette carte peut suivre cette section. Et voilà. Au fur et à mesure que vous faites défiler l'écran vers le bas, il se déplacera vers le bas. Ensuite, nous aurons peut-être une option pour, disons, explorer des voitures similaires. Alors peut-être que je peux écrire ça. Découvrez des voitures similaires. Et ici, nous n'aurons les trois cartes que nous avions sur toutes les autres pages. Donc carte une, carte après carte trois. Mais dans ce cas, il se contentera de charger d'autres voitures de cette collection, qui seront créées dans le CMS. Donc, si vous regardez une Mercedes classe S ici, elle ne sera pas affichée en tant que classe ici parce que nous regardons la classe S ici sur cette page. Au lieu de cela, il extraira les informations de la carte suivante afin que nous les définissions dans Webflow. Je pense donc à tous ces processus dès le départ. Donc, lorsque nous passerons réellement à Webflow il sera beaucoup plus simple de le créer. Nous ne parlons donc pas de la classe S ici. Et ici, vous êtes juste en train de le regarder ici. Mais il y aura des voitures différentes. Donc nom, prix et informations, nom, prix, informations, nom, prix et informations. Ensuite, nous aurons toutes les mêmes informations. Nous devrons donc nous contacter là où nous sommes. Et enfin, à terme. Et comme nous le faisons dans le CMS, ces informations seront les mêmes. Enfin, cette page que nous venons de créer, donc la page détaillée de la voiture, sera exactement la même pour chaque carte que nous créerons. Et les clients pourront facilement mettre à jour cette page et ajouter images supplémentaires à une voiture existante ou créer nouvelles voitures et créer ces pages dynamiques pleines de contenu. C'est là que Webflow, CMS, va s'avérer utile. Enfin, passons en revue ce que nous avons fait jusqu'à présent. Nous avons donc commencé par la page d'accueil, que je vous ai montrée ici. Nous avons donc des prêts auto résidentiels Contactez-nous. Enfin, la page détaillée de la carte. Nous avons donc commencé par une page d'accueil. Ensuite, nous sommes passés à la page des voitures. Nous allons créer les huit cartes de voitures différentes. Et ces sections en bas vont se répéter. Ensuite, nous sommes passés aux prêts où nous allons afficher deux images de voitures différentes. Nous leur montrerons notre offre pour les poumons. Nous leur montrerons nos partenaires pour qu'ils puissent établir la confiance. Et puis ces sections seront les mêmes. Enfin, pour la page Contactez-nous, que je pourrais peut-être marquer ici, contactez-nous. Nous aurons juste l'image du héros juste en haut. Vous aurez le formulaire de contact que nous avons vu sur tout le site Web où nous nous trouvons pour l'emplacement et le pied de page. Enfin, l'argument le plus important en termes de convergence sera la page de détails de la carte, qui est cette page. Et ça va juste leur montrer les détails la voiture sur laquelle ils ont cliqué. Chacune de ces pages précédentes, qu'elle figure sur les cartes, se trouve dans la section voiture de la page. Et comme je l'ai mentionné, il y aura des images juste en haut. Ensuite, il y aura des aperçus. Alors peut-être que je pourrais zoomer juste une touche pour pouvoir le montrer un peu plus en détail. Comme je l'ai dit, nous aurons des images ici avec quatre images différentes et l'icône pour agrandir les images et passer en plein écran, peut-être ici pour voir plus de détails. Nous aurons notre véhicule d'évaluation en quatre avec des performances, une sécurité, des aides à la conduite, des dimensions extérieures et intérieures. Enfin, nous aurons exploré des voitures similaires issues de cette même collection de voitures qui seront créées ultérieurement dans Webflow. Et enfin, les mêmes sections, comme nous contacter où nous sommes et le pied de page ci-dessous. Enfin et surtout, Discard les suivra partout où ils défileront de haut en bas dans cette section en particulier. Nous savons donc que nous avons atteint la fin de nos maquettes papier. J'espère vraiment que cela vous a plu et j'espère vraiment que vous avez compris pourquoi il est important de créer cette architecture de contenu et ce plan de site parallèlement à ces wireframes papier. Et qu'il est beaucoup plus simple de créer ce type de contenu, car vous planifiez à l'avance en réfléchissant à où créer quelque chose et comment créer quelque chose dont vous avez besoin pour votre site web. Dans la prochaine leçon, nous parlerons des images, où je les ai obtenues pour ce projet en particulier. Où pouvez-vous les amener comment je vais structurer les images pour ce projet et quels sont les termes et conditions indiquant où et comment vous pouvez utiliser ces images dans votre propre projet si vous souhaitez les utiliser pour votre portfolio, par exemple que je vous y voie. 133. Images de projet: Dans cette leçon, nous allons parler des images dans lesquelles j'ai trouvé mes images pour ce projet en particulier. Comment utiliser ces mêmes images et comment les concéder sous licence ultérieurement si vous souhaitez les utiliser dans votre portfolio. Si ce n'est pas le cas, vous pouvez utiliser d' autres images, mais laissez-moi simplement vous montrer l'approche que j'ai adoptée car c'est très compliqué. Donc, si j'y vais, j'ai utilisé toutes mes images d'Envato Elements comme je le fais pour tous mes tutoriels YouTube, tous mes cours. Et j'utilise ce site Web depuis des années maintenant, et je le trouve fantastique. Le principal problème est donc de trouver une voiture et de prendre des photos sous tous les angles possibles, comme vous pouvez le voir ici. Peut-être au même endroit. Et puis vous faites de même avec l'intérieur. Je n'ai donc pas fait d'intérieur car il est très difficile de trouver des intérieurs en 3D en ligne et de prendre des images de haute qualité. Vous pouvez le faire en ligne sur les sites Web de l'entreprise. Mais pour montrer à vos clients qui aura réellement ces images, car ils en ont en stock dans leur salle d'exposition. Ils peuvent ainsi prendre des images sous tous ces angles différents, y compris l'intérieur. Le but ici est de leur montrer comment fonctionnera le site Web afin qu'ils puissent remplacer les images que vous avez insérées dans ce modèle Webflow que nous fournirons et créerons ultérieurement. Donc pour créer quelque chose comme ça, ce que je fais, il a fait appel à Envato Elements. J'ai téléchargé ce logo et j'ai simplement remplacé le nom par une araignée, qui est le nom de notre entreprise imaginaire. ai pris ce logiciel 3D, cette plante 3D et ce panneau mural en calcaire , je les ai ce panneau mural en calcaire , déposés dans Photoshop et j'ai créé quelque chose comme ça. Donc, si j'appuie sur Ctrl H pour masquer ces guides, j'ai ici la texture d'arrière-plan, qui est un arrière-plan juste ici. J'ai la parole. J'ai la plante un peu floue. Et j'ai le canapé juste ici, et j'ai le logo juste en haut. Et si nous vous ramenons ici, quels sont leurs besoins ? Ce sont les voitures. Donc, si je prends ce morceau de Guinée, par exemple, il y a ma voiture. Il s'agit du rendu 3D auquel vous allez accéder dans Envato Elements. Donc, ce que j'ai fait, c'est lancer la vue 3D pour que vous puissiez faire pivoter cette voiture comme vous le souhaitez. Disons que je veuille le prendre sous cet angle, puis sous cet angle, puis sous cet angle et peut-être sous cet angle plutôt que celui-ci, pour imiter ce que nous voyons ici dans la vraie vie, ce que je vais faire est sélectionnez celui-ci, puis téléchargez cet angle au format PNG, ce que j'ai fait. Sélectionnez cet angle de téléchargement au format PNG, sélectionnez Télécharger au format PNG. Et je l'ai fait pour les huit voitures que vous pouvez voir ici. Et j'en ai même ajouté, je crois, quelques autres, comme celui-ci , que nous utiliserons dans la section des héros. Et laisse-moi voir. Je pense que c'est ça. Probablement, oui, parce que nous en avons neuf ici et que ces voitures sont des maquettes. Et je les ai simplement ouverts dans Photoshop. Et je viens de supprimer toutes ces différentes sections avec le design, je les exporte simplement au format PNG. Et j'ai fait de même pour celui-ci. Si je me souviens bien, je pense que sur page des voitures, il y aura une voiture regardant du côté du cercle en arrière-plan avec un texte en haut, ce qui est un peu comme ça. J'ai donc pris cette photo et j'ai peint toutes les voitures noir à cause de cette équipe de luxe. Ensuite, j'ai trouvé toutes ces images haut de gamme sur Envato Elements, qui sont des millions. Et vous pouvez utiliser toutes sortes d'images différentes. En voici une pour les vendeurs de voitures. Voici un vendeur de voitures montre la voiture aux gens et voici celui où ils sont peut-être en train de conclure un contrat ou quelque chose comme ça. J'utilise donc toutes ces images dans le design. Et vous allez le constater au fur et à mesure que nous avancerons. Et je vais vous fournir toutes ces images à utiliser. Selon l'endroit où vous consultez ce site Web, il s'agira peut-être d'un lien Dropbox afin que vous puissiez le télécharger de cette façon. Ou je vais le mettre dans la section de cette section de conception que vous aurez en partie où vous pourrez télécharger des images, il vous suffit de cliquer dessus pour les télécharger. Si vous souhaitez utiliser ces images, c'est très important. Vous devez les obtenir vous-même auprès d' Envato Elements, car elles sont toutes sous licence et vous devez payer pour cette licence si vous souhaitez utiliser ces images existantes dans votre projet, que nous allons montrer. Si vous les utilisez à des fins d'apprentissage, c'est très bien. Vous pouvez simplement les télécharger, mais vous ne pouvez pas les utiliser n'importe où, pas dans votre portfolio, pour les mettre en valeur sur Instagram, non pour travailler avec des clients, car vous en êtes responsable images en dessous de beaucoup. Donc, si vous n'avez pas de licence pour ces images, toutes les sociétés qui publient ces images sur Envato Elements, y compris Envato Elements elle-même, peuvent facilement vous poursuivre en justice parce que vous ne le faites pas avoir la bonne licence. Mais si vous les utilisez à des fins d'apprentissage, juste pour vous-même, juste sur votre ordinateur, juste pour apprendre, juste pour mettre les choses ici. Alors c'est bien de les utiliser comme ça car encore une fois, il est extrêmement difficile de trouver des images comme celles-ci. Ou si vous le souhaitez, au lieu de voitures exclusives, vous pouvez remplacer ces images par vos images de votre voiture ou de celle de votre voisin, ou de votre voiture ou autre. Ensuite, vous pouvez simplement dupliquer ces images et les mettre en place au lieu d' utiliser ces images. Donc, comme je l'ai dit, c'est ce que j'ai fait. Et puis, lorsque je passe à Photoshop, je vais simplement prendre les images qui viennent d'être téléchargées, faire glisser et les déposer dans Photoshop. Et il va les placer en tant qu' objets intelligents, mis en place par cellule. Ensuite, laissez-moi les organiser de manière un peu différente. Laisse-moi cliquer. OK, donc numéro un, numéro deux, numéro trois, numéro quatre. Ce sont donc toutes les positions. Et si je reporte Control H Back Control T, je pourrais les redimensionner sans les alourdir. Donc, encore une fois, Control T, juste avec un lift and shift, peut-être quelque chose comme ça. Et voilà. Je vais les cacher. Je vais juste travailler avec le numéro un maintenant, comme ça. Alors peut-être que je peux le positionner juste au centre, peu près ici, peut-être là où les roues se touchent, peut-être juste là. Ensuite, je vais faire de même pour le numéro deux, donc là où les roues se touchent je vais peut-être le positionner approximativement ici. Ensuite, pour le numéro trois, vous avez l'idée. Il vous suffit donc de la positionner approximativement ici et vous voulez avoir l'illusion qu'il s'agit d' une vraie voiture dans une véritable salle d'exposition, comme celles qui viennent de vous être présentées ici. Mais maintenant, nous avons affaire à l'image Photoshop et au rendu. Alors, à quoi cela ressemble-t-il lorsque vous l'avez réellement rendu ? Cela ressemble à quelque chose comme ça. C'est donc le rendu réel que nous allons utiliser dans ce cours. Voici donc celui-ci. Ensuite, laissez-moi cliquer pour pouvoir les modifier ou me permettre de l' ouvrir une fois de plus. Essayons-le maintenant. Je ne sais pas ce qui se passe ici. Alors annulons ça. Ouvrons-le. Encore une fois. J'espère que cette fois fonctionnera car j'utilise tous ces logiciels en arrière-plan. Parfois, cela va provoquer des problèmes sur mon ordinateur. Permettez-moi donc de fermer Photoshop très rapidement, car vous l'avez déjà vu. Et essayons-le maintenant. Voici donc cette image. Alors maintenant, quand je passe à gauche et à droite, vous pouvez voir 12345678. Nous montrons donc la voiture sous tous les angles sauf à l'intérieur. Parce que comme je l'ai mentionné, il est vraiment difficile de trouver des intérieurs en ligne qui soient bons. Mais ce sera un bon point de départ car je l'ai fait, si je me souviens bien, pour huit voitures différentes. Donc, si je lance Cadillac Escalate, par exemple , et que je vous montre que c'est complètement pareil dans le même habitacle. Lancons ce Maclaurin par exemple pour que vous puissiez voir à quoi il ressemble dans cet intérieur. Et enfin, permettez-moi de le montrer et de dessiner Vogue. Et voilà. Vous pouvez donc voir qu'ils sont exactement les mêmes dans tous les intérieurs et qu'ils sont tous issus des éléments Envato de cette collection. Et comme je l'ai dit, pour ne pas trop me répéter. Vous pouvez utiliser ces images à des fins d'apprentissage sur votre machine, mais vous n'êtes pas autorisé à les publier ailleurs. Si vous le souhaitez, vous pouvez joindre ces deux éléments et simplement les télécharger pour vous montrer à quel point c'est très simple. Disons donc que je vais ouvrir celui-ci. Et je vais faire défiler l'écran un peu vers le bas. Peut-être que je veux utiliser cette voiture pour une raison quelconque, sinon nous ferons encore mieux. Disons que je choisis ce rendu. Pour qu'il s'affiche. Peut-être que je veux le faire pivoter comme ça. Peut-être que je veux utiliser cet angle, B et G. Téléchargez cet angle, et vous pourrez le voir ici. Donc, site de showroom automobile exclusif, qui est la collection qui a déjà été créée pour Discussion. Cliquez ici, ajoutez-le maintenant chargez et j'ai donc une licence. Passons maintenant à cet angle de cette image. Si je le remplace par une anode, ce téléchargement d'angle est ajouté à la même collection non autorisé. ai maintenant une licence pour celui-ci, et je peux l'utiliser dans un nombre illimité de projets. Je peux créer un nombre illimité de ces collections. Je peux les ajouter, créer ces collections pour certains types de sites Web ou d'applications mobiles, afin qu'ils puissent faire ce que je veux. Et une dernière chose que je voulais vous montrer concerne ces images. Donc, si je prends ceci et que peut-être un vendeur de voitures prend ceci, et que ce n'est qu'une image, vous pouvez voir des images supplémentaires de cette personne que les images gratuites ne peuvent pas vous donner. Tout simplement. Vous pouvez voir d'autres photos similaires, ce qui vous montrera des photos de ce photographe en particulier et d'autres photographes. Vous pouvez donc voir différents types de vendeurs de voitures, différents types de showrooms automobiles, etc. Mais si vous voulez parler de cette personne, qui est Ross Helen dans ce cas, cliquez ici, en vous basant sur vendeur de voitures, tapant Entrée ou Retour. Et voilà. Vous avez des centaines d'images différentes de ce même vendeur de voitures dans le même showroom automobile, regardant des voitures, explorant des voitures, testant des voitures, vendant des voitures, positionnant différents endroits, toutes sortes de des choses différentes. Parce que ce photographe a pris ces photos dans le même éclairage, en utilisant les mêmes modèles, en utilisant le même showroom, dans le même état. Ce sera donc beaucoup plus professionnel si vous l' utilisez à partir d'ici. Ensuite, si vous utilisez une image d'ici, une image de là, 1 pouce de ce photographe, une image neutre de ce photographe n, bien sûr, vous pouvez filtrer toutes ces différentes des filtres géniaux pour retrouver vos images encore mieux de cette façon. C'est donc tout pour les images. N'oubliez pas que si vous souhaitez les utiliser à nouveau, vous devez les utiliser sous licence auprès Envato Elements n'importe où dans votre portefeuille, dans le travail de vos clients, ou les partager sur Instagram, le week-end, quoi que vous fassiez, vous devez concéder une licence pour ces images. Sinon, vous enfreignez leurs lois et risquez d' être poursuivi en justice. Mais si vous souhaitez utiliser ces images à des fins d'apprentissage, ce qui fait l'objet de ce cours, vous pouvez utiliser ces images gratuitement. Ne téléchargez simplement pas votre travail en ligne. Dans la section suivante, ou désolé, dans la prochaine leçon, nous allons passer à Adobe XD et enfin commencer à concevoir ce projet. Commençons donc. 134. Création de tableau d'humeur: Maintenant que nous avons créé des maquettes sur papier, il est temps de passer à notre conception et de commencer à explorer différentes images, différents choix de style, différentes approches. Et pour mieux nous y aider, nous allons utiliser des mood boards. Vous n'allez pas entrer dans trop de détails. De toute évidence, j'ai déjà créé ce projet. De toute évidence, notre client imaginaire sait ce qu'il aime, mais c'est juste là pour nous mettre dans l'ambiance de toute façon. Je vais donc quand même te montrer. Mais avant cela, laissez-moi vous amener à notre fichier Adobe XD où je vais vous montrer que je nettoie un peu ce wireframe. Vous pouvez donc voir que je suis reparti une fois de plus et que les créer a encore quelques aspérités, mais peu importe parce que mais peu importe parce que c'est le filaire après tout. Et nous en avons juste besoin pour nous référer lorsque nous commençons concevoir, juste pour nous rappeler comment les choses ont fonctionné et comment nous l'avons imaginé. Encore une fois, ne considérez pas cette structure filaire comme une décision de conception finale. Ce sera le cas dans ce cas parce que, comme je l'ai dit, déjà conçu parce que nous allons rester assis ici pendant, je ne sais pas, des semaines à le concevoir. Mais lorsque vous créez votre propre projet, vous pouvez toujours le modifier. C'est juste pour quelques idées de base. Et vous verrez que nous allons encore modifier certaines mises en page ici et là dans ce wireframe, même si j'ai déjà créé ce design auparavant. Mais cela n'a pas d'importance. nous allons continuer à faire. Permettez-moi simplement de déplacer cette image car c'est une image juste ici. Parce que je vais appuyer sur la touche A de mon clavier et créer quelque chose comme 1920 x 1080. Permettez-moi d'appeler ça de l'humeur. Moodboard. Et voilà. J'ai déjà ce logo, que vous retrouverez dans ce fichier, car en tant que créateur, vous l'obtiendrez lorsque vous aurez suivi le cours et que vous commencerez à travailler avec moi, Positionnez-le à peu près au centre, quelque part par ici. Je pense que ça va très bien fonctionner. Et comme je l'ai dit, c'est juste là pour nous aider à naviguer un peu plus. Vous verrez donc que ces polices manquantes sont devenues noires parce que ce logo contient cette police, mais ne vous inquiétez pas pour cela. Nous n'allons pas l'installer juste pour avoir une police. Créons donc un rectangle et permettez-moi d'utiliser une grille de répétition ici. Donc quelque chose comme ça. Et élargissons-la un peu. Et dissocions la grille. Et ce que je peux faire, c'est peut-être étendre cela un peu, peut-être étendre cette mise en page tactile ici, cela n'a pas vraiment d' importance parce que je veux juste pouvoir faire glisser et déposer quelques images rapides à l'intérieur. Permettez-moi également d'en déposer un ici. Agrandissons cela. Les analyses devraient dupliquer celui-ci et le positionner approximativement ici. On y va. Maintenant que nous avons cette mise en page, je peux l' agrandir d'un simple toucher. Encore une fois, vous pouvez explorer avec les couleurs. Reportez-vous simplement à cette section sur les moodboards. Je ne vais pas trop nous embêter car, comme je l'ai dit, j'ai déjà préparé un design. Je voulais juste vous montrer comment je m' y prendrais si je devais le créer à nouveau à partir de zéro. Donc, ce que vous pouvez faire, c'est créer ces mood boards comme vous le souhaitez. Mais, comme je l'ai dit , ne traitons pas trop de détails inutilement. Quelque chose comme ça. Je pense que ça va très bien fonctionner. Allons-y, débarrassons-nous des analystes des frontières, donnons-leur une couleur gris clair afin de voir où placer nos images. Et pour les images, nous pouvons nous rendre sur Dribbble pour nous inspirer. En fait, les analystes le font avant de passer à la voiture. Waouh, peut-être que quelque chose comme ça fonctionne bien. N'oubliez pas que notre client n'aime pas vraiment les mises en page sombres. Ils aiment donc ces mises en page plus légères. Et peut-être pouvons-nous utiliser quelque chose comme ça. Peut-être, je ne sais pas, vous pouvez faire défiler la page et voir ce qui fonctionne. Je ne sais pas, peut-être quelque chose comme ça. Ces cartes sont jolies. Donc, ce que nous pouvons faire dans ce cas, c'est parce que j'aime ces cartes. Ce que je peux faire, c'est avoir un outil pour faire une capture d'écran et je vais capturer la région. Et peut-être que je ne sais pas à peu près par ici. Cela n'a pas vraiment d'importance car je voulais juste m' inspirer de cette image . Nous n'allons pas nécessairement copier quoi que ce soit de ce design, comme vous le verrez lorsque nous commencerons à concevoir. Mais créons-en un autre ici. Et j'utilise quelque chose qui s'appelle Green Shot. Tu peux utiliser ce que tu veux. En fait, non, fermons ça. Et je vais réellement capturer cette région. Parce que je pense que quelque chose comme ça pourrait fonctionner un peu mieux pour notre design. Clôturons ça. Et peut-être que j'aime bien cette zone avec le texte à l'intérieur. Alors, accrochons-nous à la dette. Voilà, car c'est une sorte de mise en page agréable et élégante. Et peut-être cette carte avec le côté actuel. Encore une fois, vous pouvez utiliser la mise en page que vous souhaitez pour votre projet et ce qui vous inspire pour ce projet. Peut-être quelque chose comme ça, enregistré directement. Et voyons voir, peut-être que nous pouvons utiliser à partir d'ici et rien de vraiment. Mettons donc fin à la journée avec le dribble. Et capturons et jetons parce qu'ils pensent que nous allons réellement utiliser notre mise en page comme ça. Je peux donc le faire glisser et l' enregistrer directement à partir d'ici. Et voilà. Et ce que j'aime aussi, c'est le jeter ici. Vous pouvez donc voir à quel point c'est simple. Je fais juste le tour et je capture ce que j'aime. Nous n' allons pas nécessairement tout utiliser. Nous allons simplement nous inspirer. Comme je l'ai dit, je n'aime pas vraiment ça. Je pense qu'il y a trop de monde. Vous pouvez donc simplement faire défiler la page pour trouver les détails que vous souhaitez. Peut-être ces cartes, et elles fonctionnent très bien. Alors capturons cela. Région de capture. On y va. Donc quelque chose comme ça parce que nous voulons toujours que les boutons soient là. Et peut-être que ces mises en page sont superbes. Mais je pense que c'est suffisant pour le moment. Laissons le site web de Carla ouvert. En fait, nous avons commencé à y faire glisser nos images. Vous pouvez donc voir ce que je fais ici. Je les place juste à gauche, à droite et au centre où je peux. Faisons quelque chose comme ça, peut-être ici. Et puis positionnez-le ici. Et voilà. Alors peut-être que je peux le pousser ici parce qu' il est un peu plus large. Pour cette carte, je pourrais peut-être utiliser cette mise en page et je suis intéressée par cette mise en page inférieure avec le prix et les boutons peut-être. Et puis voyons voir, peut-être pouvons-nous le positionner approximativement ici et peut-être même zoomer un peu. Nous pouvons donc recadrer cette image, peut-être ici, car encore une fois, je m'intéresse aux cartes, pas nécessairement à la disposition du tableau de bord lui-même. Et encore une fois, je l'utilise juste pour une référence rapide. Ici, nous pouvons utiliser kill this parce que je me suis embêté avec cette couleur noire en arrière-plan. Augmentez cela d'un simple toucher. On y va, juste pour voir des boutons et une voiture. Ce que je peux faire ici, c'est ajouter ça, qui est pour mon prix. Et peut-être que je pourrais le déplacer approximativement ici, juste pour savoir que c'est cette section. Encore une fois, nous pouvons le recréer ici, sur le côté, mais cela ne m'intéresse pas trop pour le moment. Je veux juste m'inspirer de ces designs. On y va. Donc j'aime bien ceux avec les cartes. Et je ne sais pas, peut-être qu'une fois plus, nous pourrons retourner à la voiture. Eh bien, voyons voir. Revenons à la page d'accueil et voyons ce que nous avons ici. Et voilà. J'aime bien ces sections, alors mettons-les en valeur. C'est la région de capture. Derek, va enregistrer directement et laisse-moi revenir à x D et les faire glisser et déposer dedans. On y va. Donc, ce que je peux faire, c'est peut-être même les redimensionner parce que c'est un fond blanc. Alors allons-y et faisons-le. Quelque chose comme ça. On y va. Et voilà. C'est notre mood board. Encore une fois, vous pouvez continuer et utiliser ce que vous voulez. Vous pouvez vous y prendre de différentes manières, mais je pense que ce sera le cas pour le moment. Encore une fois, ce ne sont que des bribes ici et là, juste là pour nous inspirer. Je pense que cela suffit pour ce projet car nous avons déjà notre flux d'utilisateurs. Nous disposons d'un plan du site et d'une architecture de contenu. Nous avons déjà créé nos maquettes en papier. Nous avons maintenant nos mood boards. Nous savons quelles couleurs et quels styles nos clients aiment vraiment. Je n'ai donc pas vraiment aimé, encore une fois, ces sites Web sombres. Ils aiment les sites Web plus légers et ils aiment les sites Web qui contiennent du bleu, comme le site Web de carve-outs, qui se trouve ici. Elles sont comme ces cartes, leur mise en page , leur design et leur style minimalistes. Je pense donc que nous sommes prêts à partir. Dans la vidéo suivante, nous allons passer au design. Et nous allons en fait commencer à créer des aéroports et en place certains éléments, tels que des grilles. Alors je t'y verrai. 135. Grille, typographie et couleurs: Commençons maintenant par le design et la première chose que nous allons faire est de revenir à Adobe XD et de commencer par certains aéroports. Je suis donc dans notre fichier et nous allons faire un zoom un peu, quelque chose comme ça, et appuyer sur un sur mon clavier. Et laissez-moi créer un aéroport. Peu importe lequel. Passons donc à 1920 x 1080, je peux rapidement enregistrer ce design. Ce que je vais faire, c'est le renommer en page d'accueil. Donc x D va aboyer de temps en temps. Soyez donc indulgent avec moi sur ce point. Donc, la page d'accueil est là. Ce que je vais faire en fait, c'est changer la taille. Donc, je vais y aller avec 14 ou 40. Et pourquoi je fais ça ? Parce que dans Webflow, c'est naturel et c'est un point de départ, car dans Webflow, vous partez de la taille du bureau et vous concevez vers le bas. Vous passez donc d'un ordinateur de bureau à une tablette, puis à un appareil mobile. Ou si vous voulez créer des points d'arrêt encore plus grands, qui correspondent en gros à ces tailles d' écrans, vous allez commencer par ce type de taille, puis vous remonterez, comme, je ne sais pas, 1619220003000 et ainsi de suite et ainsi de suite. Mais dans ce cas, nous allons simplement opter pour 14 ou 40 parce que c'est ce qu'ils vont nous donner. Ensuite, nous allons avoir une disposition en 12 colonnes. Et voyons voir ici ce que nous pouvons faire, c'est peut-être opter pour 39 pour la largeur. On y va. Et allons-y avec des largeurs de colonne de 6044. Et mon objectif ici, c'est d'avoir un contre un pour mes marges gauche et droite. Voyons voir. Donc, un contre un. Est-ce que je peux le faire ? Non, essayons encore une fois. tête-à-tête est devenu une cellule pour que tu puisses voir ce que je fais réellement. J'essaie donc juste de faire en sorte que XD travaille avec moi ici. Allons-y avec 39 ici. Allons-y avec 61 ici, 64 peut-être. Donc en tête-à-tête. Et voilà. Donc 386051 pour un. Et ce que je voulais faire ici, c'est obtenir exactement la même disposition ici, à gauche et à droite. Donc, lorsque je dessine une case dans mes colonnes comme celle-ci, vous pouvez voir que c'est 11 98, et ne vous inquiétez pas, car XD est un peu bogué avec ces mises en page. Mais nous aurons une disposition en 12 colonnes avec une largeur maximale de 1 200 pixels à l'intérieur de Webflow. Alors débarrassons-nous de celui-ci. Permettez-moi donc de revenir à mes colonnes et baisser la mise en page et l'ec2 , environ cinq, peut-être. Voyons quelque chose comme ça. Et voilà. Vous pouvez donc voir ce que je fais un peu mieux. Ce que je vais également faire, c'est peut-être commencer par une certaine topographie. Alors allons-y et faisons-le. Frapons T sur notre clavier en tapant. Voyons le titre, le premier titre. Et je vais choisir Poppins ici, ce qui est génial. Voyons voir, je peux peut-être opter pour 64 ou 64 boulons. Je pense que cela fonctionnera très bien. Et allons-y, je ne sais pas, peut-être 86 pour la hauteur de la ligne. On y va. Donc, ce que je fais ici, c'est que j' essaie de déterminer mon échelle de caractères. Donc, en général, ce qui fonctionne le mieux est de procéder par incréments de huit. Donc, dans ce cas, nous avons la rubrique 1, qui est 64. Allons-y et dupliquons cela. Ce qui va se passer maintenant, c'est passer à la deuxième position, qui sera 32. Peut-être. Et voilà. Je pense que cela fonctionnera très bien. Et voyons voir. Ce que nous pouvons faire ensuite, c'est peut-être le porter à 53, quelque chose comme ça. Je pense que cela fonctionnera très bien. D'accord. Et ce que nous pouvons faire, c'est appuyer une fois de plus sur Ctrl D en tapant le titre 3. Et pour le titre 3, ce que nous pouvons faire, c'est opter pour 24. Vous pouvez donc voir ce que je fais ici. 24, 30 à 64, peut-être que vous pouvez utiliser 40 quelque part, peut-être 48, peut-être 56. Mais en gros, passez par incréments de huit. C'est une sorte de petit truc sympa. Allons-y donc avec 40 ici également. Et nous avons 24, 30, 32 ans, nous avons 64 ans. Voici donc notre troisième rubrique. Et dans Webflow, il y a quelque chose qui s'appelle textblock. Et en général, dans la conception Web, il ne s'agit que de quelques textes de base que vous allez utiliser lorsque vous commencerez à écrire. C'est donc ce que nous allons faire ici. Utilisons donc le bloc de texte. Et voilà. Et pour le bloc de texte, nous pouvons peut-être opter pour quelque chose d'un peu différent. Alors allons-y avec, je ne sais pas, peut-être 20. Et voilà. Au lieu de mettre en gras, passons à l'ordinaire. Je pense que cela fonctionne très bien. Et passons à Control et D encore une fois. Tapons le paragraphe. Pour un paragraphe, on peut peut-être en choisir 16. Et pour les 16, voyons voir, peut-être que 26 fonctionneront ici. Alors 26 ans, voilà. C'est donc notre paragraphe. Et enfin, nous aurons un autre texte appelé label. Laissez-moi vous montrer où cela va mener. Donc, si je zoome ici sur cette page, c'est la page des détails de la voiture. Lorsque vous cliquez sur l'une de ces cartes, sur l'une de ces pages. Donc, ici ou ici, ou même ici, vous irez sur cette page, puis cette étiquette apparaîtra juste au-dessus l'étiquette nominative indiquant le type de voiture. Donc, si vous vous souvenez, ils vendent des VUS, ils vendent ces limousines, ils vendent des berlines. Ils vendent des super voitures. Nous n'aurions pas à diviser ces voitures en trois catégories juste pour montrer de quel type de voiture il s'agit, et c'est pour cela que nous allons utiliser le texte de l'étiquette. Donc, si je reviens à mon label, ce que nous allons faire avec le label, c'est réduire encore la taille et ne pas avoir à suivre nécessairement la règle des huit ici. Alors peut-être que je peux y aller avec 12. Et voilà. Nous pouvons y aller avec des personnes régulières et peut-être 19 ici. Alors voyons voir. Il s'agit en fait de l'interligne, qui est essentiellement l'espacement entre vos deux lignes. Donc, si je copie ce texte et que je le positionne vers le bas puis vers le bas, l'espacement entre chacun d'eux est de 12. C'est donc ce que nous essayons d'atteindre ici, car nous devrons intégrer ces valeurs ultérieurement dans Webflow. Il sait donc quand il commence à adapter ce qu'il faut faire et où aller à partir de là. Alors on y va. Nous l'avons maintenant terminé. Ce que nous pouvons faire, c'est peut-être jouer avec certaines couleurs. Cachons donc la mise en page pour le moment. Ce que je peux faire, c'est simplement dessiner un rectangle et me laisser peut-être le colorer en gris, peut-être quelque chose comme ça. Donc, ce que je ferais, c'est utiliser la couleur de la carrosserie pour le fond. Donc, si vous vous souvenez bien, le site Web de la voiture n'avait pas de fond complètement blanc, mais un petit fond gris léger. Ce que je peux faire, c'est peut-être utiliser une couleur comme celle-ci. Laissez-moi me cacher pour que vous puissiez le voir un peu mieux, c' est-à-dire F6, F5, F5. Et vous pouvez voir qu'il est légèrement blanc cassé. Et je peux l'ajouter ici même à mes échantillons de couleurs. Déplaçons-la légèrement vers le bas, et appelons-la couleur de la carrosserie. Parce qu'en HTML, l'élément principal dans lequel vous mettez vos éléments dans une page s'appelle le corps. Et c'est dans ce corps que tout va aller et c'est ce que nous allons colorier. Donc, en gros, dans les logiciels de conception tels que XD ou Figma, la couleur de votre tableau d'art ou de votre cadre sera la couleur du corps lorsque vous le déplacerez en HTML, car il s'agit de la balise HTML, qui est l'étiquette principale du développement. Ne t'inquiète pas pour ça. Nous n'écrirons aucun code. J'essaie simplement de vous expliquer comment penser à ces choses lorsque vous commencez à concevoir, puis à passer au développement. Ce sera donc la couleur de notre corps. Ensuite, nous aurons besoin d' une sorte de couleur gris clair, solide, positionnez celle-ci ici pour que vous puissiez voir D2, D2, D2. On y va. Et permettez-moi de l'ajouter en gris clair, comme ça. Et vous pouvez voir que j'utilise toujours des tirets pour distinguer ce que j' essaie de créer ici. Positionnons-le donc ici. Et ce dont nous avons besoin maintenant, c'est gris plus foncé pour le distinguer un peu mieux. Quelque chose comme ça fonctionne bien d'habitude. Ajoutons-le donc ici. Appelons ça gris foncé, quelque chose comme ça. Enfin, ce dont nous aurons besoin, c'est faire la distinction entre H1 et H2. H1 se trouve généralement en haut de chaque page. Et puis, au fur et à mesure que vous descendez la page, vous aurez des blocs de texte et des paragraphes H2, H3, ainsi que des blocs de texte. Et vous devrez le dire dans votre référencement, vous devrez l'expliquer dans votre structure. Ainsi, lorsque vous commencerez à développer cela dans Webflow, plus tard, vous devrez commencer à utiliser ces noms. Parce que plus tard, lorsque Google indexe votre site, il doit comprendre de quel type de texte il s'agit, où il se trouve sur la page et quelle est son importance. Et il sait à quel point c' est important parce que vous le lui avez demandé, parce que vous utilisez ces H1, H2, H3, P pour le bloc de texte du paragraphe, etc. Vous le verrez dans Webflow. Mais j'essaie juste de vous expliquer cela ici. Pendant que nous sommes dans XD, lorsque vous commencez à concevoir, vous devez constamment penser à ces éléments. Passons maintenant à cette couleur, comme je l'ai dit, pour le H2, peut-être même le H3. Copions donc cette couleur et je comprendrai dans une seconde comment j'ai obtenu ces couleurs. Permettez-moi donc de l'ajouter ici. Alors allons-y avec H3 et peut-être le paragraphe. Parce que nous avons toujours besoin que ces paragraphes soient lisibles car ils sont assez petits. Vous pouvez les voir ici. Alors allons-y et ajoutons-le. Donc, celui-ci aura une couleur de titre foncée car c'est un H1. Voyons voir. Salut deux, peut-être que nous pouvons utiliser, voyons voir. Donc 2122 contre quatre. C'était quoi ça ? Alors peut-être que nous pouvons utiliser la même couleur. Donc, celui-ci pour les titres foncés et pour les enfants de trois ans, on pourrait peut-être le remplacer par un résultat gris foncé. Voyons voir. Alors, trois, permettez-moi de la changer pour cette couleur qui est, je crois, le gris foncé. À présent. Celui-là. Est-ce que c'est le cas ? Non. Oui, utilisons-la pour ça. Ce sera donc notre couleur h3 pour notre bloc de texte. Voyons ce que nous pouvons faire. Nous pouvons utiliser celui-ci. Donc gris foncé pour le paragraphe. Nous avons déjà expliqué que nous allons utiliser celui-ci juste pour le différencier un peu. Et pour l'étiquette, ce que l'on peut utiliser, c'est moi avec ce gris clair ou même cette couleur de carrosserie. Permettez-moi de vérifier dans mon dessin original ce que j'ai utilisé pour D à E, trois zéros. Laisse-moi voir quelle couleur est morte. C'est donc celui-ci. Donc, comme le texte étiqueté est trop petit, j'utilise toujours celui-ci. Maintenant que nous avons fait ce nous pouvons faire, c'est aller de l'avant et les ajouter. Je vais donc sélectionner mon label. Et voyons voir, cliquez sur Styles de caractères. Je vais appeler cette étiquette. Ensuite, je vais passer au paragraphe, taper le paragraphe. Passez ensuite au bloc de texte. Et voilà. Et ce sera notre h3h3. Ce sera notre H2. Et enfin, ce sera notre H1. Et voilà. Maintenant que nous avons tout cela, laissez-moi vous expliquer rapidement comment je suis arrivée à ces couleurs. Donc, en général, chaque fois que je dessine, peu importe ce que je dessine, j' essaie toujours d'avoir plusieurs nuances de gris. Les couleurs grises les plus foncées correspondent généralement à plus grande topographie de la page. Donc, pour H1 ou H2, vous pouvez être un peu plus léger dans cette obscurité. Je n'ai jamais utilisé la couleur noire complète car elle est très difficile à lire pour certaines personnes. Vous pouvez donc toujours l'entailler comme une nuance de deux en passant d'une couleur complètement noire à une couleur grise. Et puis j'aime toujours créer tout le contraire. Couleurs, identiques, disons très gris clair. Donc, toujours légèrement blanc cassé. Vous pouvez toujours utiliser du blanc, mais essayez simplement de vous assurer que vous avez une couleur blanc cassé. Comme dans ce cas, nous avons cette couleur corporelle que nous utiliserons plus tard pour notre corps. Mais c'est tout le problème ici en termes de couleur bleue. Mais vous pouvez voir ici que nous utilisons simplement couleur que nous avons trouvée sur leur site Web. Ajustez-la juste au toucher pour qu'elle ne soit pas complètement identique, car vous ne voulez jamais utiliser exactement la même couleur que quelqu'un d'autre ou juste un peu de cette couleur, alors nous avons la couleur du survol, qui est la même que cette couleur, donc juste du bleu mais dans une perspective différente. Et en termes de tailles pour les polices. Comme je l'ai dit, j'aime utiliser cette échelle de huit pixels pour ma typographie. Vous pouvez donc commencer par huit, ce qui est généralement assez petit mais suffisant pour, disons, les applications mobiles. Ensuite, vous pouvez choisir 16, 24, 30 à 40, 48, 56, peu importe. Vous pouvez donc aller jusqu'au Latino 90 ou n'importe quel type de taille que vous souhaitez. Mais dans notre cas, 64 est l'endroit où nous allons nous arrêter pour le H1. Et c'est essentiellement notre échelle de caractères. Donc, ce que je vais faire maintenant c'est m'en débarrasser. Parce qu'une fois de plus, c'est notre page d'accueil et nous allons la traiter comme ça. Revenons donc à notre réseau. Et dans ces cas, revenons à mes colonnes et réduisons ce chiffre à zéro. Pour l'opacité. Abaissons ce chiffre à zéro, ou peut-être 2 %, juste pour que nous puissions voir ce que nous faisons ici. Revenons donc à 2 %, et revenons à ici également pour présenter afin de ne pas nous distraire lorsque nous commençons à concevoir. Et nous allons réellement les utiliser. Enfin, pour la fin de cette vidéo, permettez-moi de l'étendre car c'est ce que nous allons utiliser dans la vidéo suivante. Nous allons enfin aborder cette page d'accueil. Et je vais en fait commencer par définir quelques éléments et vous montrer comment j'ai créé mon design original. Commençons donc. 136. Conception de page d'accueil: Reprenons là où nous nous sommes arrêtés dans la vidéo précédente et commençons à travailler sur notre page d'accueil. Donc, ici, je vais coller mon logo juste ici. Et laissez-moi le positionner de manière à ce qu'il soit aligné ici. Ensuite, je vais utiliser le raccourci de mon outil rectangulaire est r, et je vais lui donner une hauteur de 80, par exemple parce que vous voulez toujours donner de la hauteur à vos éléments car cela sera beaucoup plus facile à définir plus tard dans Webflow. Positionnez-le ici et laissez-moi me débarrasser de la frontière. Et ce sera mon Nav et B G, et tu devras nommer tes couches. C'est très important. Appuyons sur Ctrl K pour transformer ce logo en composant. Et vous pouvez voir que nous pouvons l'utiliser directement ici. Et pour ce qui est des conventions de dénomination, vous devez nommer vos couches plus tard, car plus tard dans Webflow, ce sera très important car nous utiliserons toutes ces classes. Donc, si vous ne nommez pas vos couches, vos designs vont s'effondrer. Commencez donc à nommer vos couches dès que possible. Vous allez vous faciliter la vie lorsque vous accéderez à Webflow plus tard. Tapons donc la dette et la navigation. Utilisons donc des voitures. Et pour cela, nous pouvons peut-être utiliser un bloc de texte, voyons voir. Ouaip, cela fonctionne très bien. Et si vous vous souvenez qu'à partir d'ici, nous n'avons que des voitures, contactez-nous. Donc juste trois d'entre eux. Donc, ce que nous pouvons faire, c'est le mettre dans un groupe et l'appeler objets de navigation, comme ça. Et voyons voir, peut-être que la distance entre tous ces éléments peut être de 24. Activons donc la pile et dupliquons-la encore deux fois. Revenons en arrière et passons à 24, comme ça. Et nous allons lui accorder un prêt et donner ce nom aux voitures. Désolé, non, non. Contactez-nous. Et voilà. Et enfin, permettez-moi de les déplacer ici et de les positionner au centre de cet élément. Et voilà. Et pour la page d'accueil, allons-y et passons cette couleur à la couleur du corps. Et vous pouvez voir tout de suite ce qui s'est passé. Alors pour le moment, passons également à la couleur de la carrosserie. Et voilà. Ça a donc l'air assez transparent. Ce que nous allons faire, c'est transformer chacun de ces éléments en ses propres composants. Appuyez donc sur Control K, Control K, Control K. Celui-ci sera réservé aux voitures. Celui-ci sera un prêt, et celui-ci sera Contactez-nous. Et voilà. Et pourquoi je fais cela simplement parce que je veux créer des états d'horreur. Pour cela, cliquez ici pour créer une fleur. Harvard. Et voilà. Pour le survol. Tout ce que je veux faire, c'est simplement en faire une couleur de survol. Et voilà. Parce que, si vous vous en souvenez, c'est notre couleur de survol. Donc, tout devrait être dans la couleur du survol une fois que vous avez survolé. Alors celui-ci, transformons-en un état d'horreur. Changeons la couleur. Donnons également cet état d'horreur. Changeons la couleur. Ramenons ça. Ramenons cela, et ramenons-le à la valeur par défaut, contrôlons l'état, saisissons pour prévisualiser, et vous pourrez voir à quoi cela ressemble. Nous commençons donc à avoir la mise en page et l'idée que nous voulons créer. Et je pense que cela va très bien fonctionner. Passons maintenant à autre chose et regroupons-les. Nous avons donc les éléments de navigation du logo et f, b, g. Donc, contrôlons G pour regrouper cela dans un groupe, appelons-le navigation. Et voilà. Et comme nous allons réutiliser cette navigation dans notre design, cette navigation dans notre design, et maintenant que nous avons déjà ces objets, ce que je veux faire, c'est sélectionner à nouveau mes éléments et ajouter un nouvel état, qui va être sélectionnée. État. En fait, copiez ce texte ne pas avoir à réécrire. Donc, l'état sélectionné et le désélectionner nous indiquera que nous sommes sur cette page. Utilisons donc le bleu principal pour ce bleu principal et cette boucle principale. Donc, ce qui se passe, c'est lorsque l'utilisateur clique et visite cette page, et pendant qu'il est sur cette page, vous verrez la couleur visitée. Appuyons donc sur Control K pour transformer notre navigation en composant, comme je l'ai dit, car nous commencerons à l'utiliser plus tard. Utilisons ensuite T pour notre outil de texte. Et ici, tapez votre partenaire pour votre partenaire, pour des voitures exclusives. Et ce texte sera H1. Décomposons-le en deux lignes, quelque chose comme ça. Ramenons-le jusqu'ici. Contrôlez D pour dupliquer cela, laissez-moi sélectionner le texte de mon InDesign d'origine. Transformons cela en bloc de texte et collons mon texte M. Nous avons donc voitures d'occasion certifiées avec un faible kilométrage et historique documenté parlé à nos clients de voitures d'occasion certifiées avec un faible kilométrage et un historique documenté. Et ils vous offrent des voitures à faible kilométrage parce qu'ils les achètent chez ces concessionnaires officiels en Allemagne. Et une histoire documentée, car il est évident que les voitures proviennent directement des concessionnaires, il est donc beaucoup plus simple de les suivre de cette façon. Donc, ce que vous faites, c'est dupliquer celui-ci une fois de plus. Et je vais utiliser quelque chose comme explorer nos voitures. Et ce sera le texte de notre bouton. Et pour ce qui est du bouton, allons-y et utilisons quelque chose comme ça. Peut-être que vous cliquez avec le bouton droit de la souris sur Envoyer vers arrière et que vous apportez cette scène ici. Je vais le centrer ici. Tu peux le voir. Centrez-le donc ici. Et donnons-lui une couleur bleue principale et supprimons la bordure. Sélectionnez mon texte et mettez-le en blanc. Et pour cela, ce que nous pouvons faire, c'est peut-être utiliser huit pour le rayon d' angle ici. Quelque chose comme ça pour que nous puissions obtenir cette apparence et cette sensation arrondies. Voyons voir, je pourrais peut-être le pousser légèrement pour l'entendre. Positionnez-le au centre. Et encore une fois, donnez-leur des noms. Ce sera donc notre BTN BG, donc l'arrière-plan du bouton, et ce sera notre texte. Donnons-lui donc le nom principal, btn. Donc bouton principal. Et je vais immédiatement en faire un composant en appuyant sur la touche Ctrl. Cliquez sur Plus et passez la souris, appelez ça survoler. À l'intérieur de notre État d'Horace. Tout ce que je veux faire, c'est changer cela en une couleur de survol. Fermez donc ceci, revenez à l'état par défaut, cliquez sur Aperçu. Et quand je prévisualise, vous pouvez voir à quoi cela ressemble. Maintenant, nous avons le pointeur de la souris sur nos éléments de navigation, et nous avons également le pointeur sur notre bouton, qui fonctionne très bien. Ce que je veux faire, c'est obtenir un peu d'espacement ici. Alors tournons cela, déplaçons-les vers la gauche, regroupons-les et appelons-le par exemple héros. Contenu. Comme ça, mets-le dans une pile et donne-lui une distance de 32. Les piles sont donc utiles, comme vous pouvez le voir ici. Pour toi aussi. Donnez un espacement rapide pour mieux organiser votre contenu et, en général, pour améliorer votre vitesse lorsque vous commencez à travailler avec ce contenu. Voyons donc ce que nous pouvons faire ici. Je peux peut-être utiliser l'image. Alors laisse-moi voir ce que je peux faire. J'ai préparé mon image de héros ici, qui provient encore une fois d'Envato Elements. Permettez-moi de l'utiliser à peu près ici. Peut-être. Quelque chose comme ça va très bien fonctionner. Je crois. Ce dont j'ai besoin dans ce cas, c'est d' utiliser une sorte de cercle pour qu'il sorte du cercle. Parce que si vous vous en souvenez d'ici, nous aurons ces deux cercles autour. Et peut-être que cela aura l'air bien si la voiture vient de ce cercle ou quelque chose comme ça, j'ai appris à le savoir. Permettez-moi donc de le faire très rapidement. Donc, ce que je peux faire dans ce cas c'est utiliser mon cercle, quelque chose comme ça. Et donnons-lui quelques dimensions approximatives, comme 38 par 388. Ce sera donc un cercle. Positionnez-le ici, puis passez-le au second plan, envoyez-le vers l' arrière et positionnez ma voiture ou à peu près ici. Ce sera le cas, voyons comment on peut l'appeler. Peut-être Hero Image Circle, quelque chose comme ça. Et redonnez un peu notre image de héros. Contrôlez un D, nous allons appeler ce masque image de héros de mosquée. Positionnez-le en haut, puis appuyez simplement sur Shift Control, Shift Command M. Nous allons l'appeler Hero IMG, donc image du héros. Et permettez-moi d'étendre ce masque à ce site, ou peut-être même de ce côté, quelque chose comme ça. Il va très bien travailler. Tout ce que je veux, c'est avoir mon cercle en vue. Je peux peut-être l' agrandir de ce côté. Voyons ce que nous pouvons faire ici. Donc, je pense que quelque chose comme ça va bien fonctionner. Et voilà. Alors peut-être que comme ça, vous pouvez également utiliser un rectangle. Tu peux faire ce que tu veux. Mais dans ce cas, je vais juste utiliser mon cercle. Non, mieux encore, utilisons un rectangle. Donc, masque non groupé. Débarrassons-nous de celui-ci. Et utilisons un rectangle car nous avons une grille. Et il sera un peu plus logique pour nous d'utiliser le rectangle dans ce cas comme ça. Et nous l'appellerons masque et Shift Control. Shift Command M, et appelons-la image du héros. Et je pense que nous y sommes bien. Tout ce que je veux, c'est simplement sélectionner mon cercle d'arrière-plan, débarrasser de ma bordure. Donc ça ressemble un peu à ça. Et je suis vraiment content de la façon dont cela ressemble. Alors voyons voir. Nous sommes là au centre, peut-être à peu près ici sur les bords. Et peut-être déplacer légèrement notre cercle pour qu'il ne soit pas coupé par le masque. Et on y va. Maintenant que nous sommes endettés. Peut-être que nous pouvons même centrer notre masque, juste une petite enchère par rapport à peu près ici. Et elles sont importantes car vous souhaiterez que vos mesures soient exactes et précises ultérieurement lorsque vous passerez réellement à Webflow. Positionnez-le donc et déplacez légèrement tout mon contenu vers le bas. Et ce que je vais faire dans ce cas, c'est, voyons voir, je veux utiliser un cercle. Commençons donc par un cercle , car je vais positionner comme nous l'avons créé ici. Vous pouvez donc voir que nous aurons deux icônes et deux cercles. Donc, pour ce top , appelons-le, Let's See Top Hero Circle. Top Hero Icone Circle ou quelque chose comme ça. Et pour la couleur, nous pouvons utiliser notre bleu principal. Et j'ai mon icône ici. Encore une fois, toutes ces icônes seront déjà préparées. Et je les montrerai à la fin de la partie design du cours. Vous pouvez simplement les utiliser. Je peux peut-être créer un guide de style ici afin que vous puissiez simplement copier et coller toutes ces icônes que j'utilise actuellement, et les utiliser pour suivre. Maintenant que nous l'avons positionné , allons aux stands, appelons-le Top Hero, encerclons. Comme ça. Et peut-être que nous pouvons le déplacer à peu près ici. Dupliquons-le. Déplacez-le peut-être ici, peut-être réduisez légèrement la taille à quelque chose comme ça. Ce sera donc notre fond. En bas, un cercle, en bas, un cercle. Et voilà. Et pour cela, permettez-moi d'utiliser une autre icône, qui se trouvera dans celle-ci. Maintenant, poussons-le ici. Et j'utilise juste une icône en forme de clé pour montrer en quelque sorte une clé de voiture. Tu vas prendre ta voiture, quelque chose comme ça. Et ici, nous utilisons le lot pour la garantie. Transformons-en donc un composant, et transformons-en également un composant. Il sera donc beaucoup plus facile plus tard pour moi de créer ces guides de style et pour vous de les utiliser dans ce fichier. Donc, pour celui-ci, ce que je peux faire, c'est même le pousser jusqu'ici ou peut-être le porter à 20, quelque chose comme ça. Oui, laissons-la là. Et utilisons une couleur gris foncé, peut-être quelque chose comme ça. Et je pense que cela fonctionne très bien. Enfin, ce que je peux faire c'est regrouper tout cela et l'appeler image de héros, quelque chose comme ça. Et positionnez ces deux-là à peu près ici. Nous allons donc peut-être déplacer ce contenu vers le bas, disons 100 pixels à partir d'ici, ce qui, je pense, fonctionnera très bien. On y va. Et maintenant, regroupons-les et appelons ce héros. Et voilà. Faisons-en un autre. de faire une petite pause, créons la section suivante, qui sera ce que nous sommes. Et nous aurons une image sur le côté. Nous aurons des lignes de texte indiquant qui nous sommes en haut. Donc, comme nous avons utilisé H1 ici, il serait naturel pour nous d'utiliser H2 juste en bas. Alors tout d'abord, commençons par notre image. Donc, ce que je vais faire, c'est créer un rectangle rapide, quelque chose comme ça. Et voyons voir, peut-être que nous pouvons utiliser 246 colonnes comme celle-ci. Et pour les dimensions, disons, je ne sais pas, peut-être cinq, trois-trois en hauteur. Et voyons voir, peut-être pourriez-vous le pimenter un peu pour pouvoir ouvrir ce panneau ici. Et cela vous donnera un rayon d'angle pour chaque angle individuel. Ce que je vais faire, c'est arrondir juste ce coin à 24 pixels, quelque chose comme ça. Débarrassez-vous de la frontière parce que je n'en ai pas besoin. Et donnons-lui un nom. Peut-être qui nous sommes, qui nous sommes ou quelque chose comme ça. Permettez-moi de prendre l'image telle que nous sommes. On y va. Donc, c'est ce gars d'Envato Elements, si tu te souviens bien. Et peut-être pouvons-nous l'agrandir d'un simple toucher, les positionner au centre, peut-être à peu près par ici. Peut-être un peu plus. Et j'aime bien l' apparence. Je pense que c'est bon. Et maintenant, allons-y et ajoutons ce texte sur le côté. Comme je l'ai dit, nous allons utiliser l'âge de trois ans. Tapons donc une Spider Exclusive Cars, une sorte de H2. Et voilà. Et adaptons-le à cette affaire. Maintenant, positionnons-le peut-être ici, Control D. Et ce que je peux faire là-bas, c'est peut-être créer une sorte de slogan ou quelque chose comme ça. Utilisons donc Textblock pour cela. Et collons quelques textes de passion et de dévouement. Vous pouvez utiliser quelque chose comme ça ou quelque chose de différent. Juste pour donner un peu plus de vie à vos paragraphes, un peu plus de sens, un peu plus de style. Vous n'utilisez donc pas simplement des textes vierges que vous trouvez en ligne. Comme vous l'avez vu, ce dernier paragraphe, je l'ai transformé en un paragraphe comme celui-là et je vais le coller. Il s'agit donc simplement d'eux quand ils ont commencé, quand ils ont créé leur entreprise, nombre de clients qu'ils avaient. Peut-être quelques faits et chiffres importants , tels que le nombre de sites avec lesquels ils traitent et peut-être l'emplacement du siège social, combien d'employés ont-ils ? Donc des trucs comme ça. Cela fonctionnera très bien dans la section À propos de nous. Enfin, positionnons-les là où ils devraient être, ils devraient être en haut. Cela devrait être ici. Regroupons-les. Donc Control ou Command G, positionné ici. Et appelons-le comme voyons voir, TextContent ne sont que du texte. Et donnons-lui une pile de 24, comme ça. Et regroupons ces deux. Mais avant cela, positionnez-le simplement au centre. Je pense que cela fonctionnera très bien. Alors voyons voir. Oui. Regroupez ces Control G et saisissez quelque chose comme qui nous sommes. On y va. Avant d'aller plus loin, je peux simplement le déplacer parce que nous en avions 100 ici. Je souhaite conserver un espacement constant tout au long de ma conception et de la construction de Webflow. Nous allons donc opter pour 101, 50 ou 200, selon la section en question. Donc, ici, nous pouvons en avoir un vingt, peut-être que nous pouvons le réduire à 200 parce que je pense que nous avons assez d'espace. Et voilà. Si j'appuie sur Contrôle ou Commande Entrée pour passer en mode aperçu, nous avons notre bouton qui fonctionne très bien. Ensuite, nous avons des voitures, des prêts, contactez-nous. Nous avons notre belle section de héros avec cette image qui vient en quelque sorte de ce cercle. Et si vous aviez des couleurs supplémentaires, comme des couleurs d'accent, vous pouvez transformer un cercle en cette couleur d'accent pour lui donner un peu plus de vie. Ensuite, nous avons cette section, peut-être que c'est Marco, notre principal président au sein de l'entreprise. Peut-être que c' est lui qui pourra nous aider à acheter une voiture ou autre. Et puis nous avons un texte de présentation sur l'entreprise. Dans la section suivante, nous allons donc passer à cela, savoir les cartes pour nos voitures. Et ce sera une section très importante car, comme vous pouvez le constater, ces chariots vont se répéter tout au long de notre conception. Je vous verrai dans la prochaine vidéo quand nous allons créer exactement cela. 137. Conception de page d'accueil: Reprenons maintenant là où nous nous sommes arrêtés et créons ces sections de cartes. Donc, ce que je peux faire, c'est peut-être utiliser un autre âge de trois ans et en coller quelques-uns, c'est une sélection exclusive, peut-être m'assurer que c'est au centre, comme ça. Et peut-être que je pourrais aussi l' éloigner de 200 points de cette section, quelque chose comme ça. Vous pouvez donc voir que nous le positionnons là. Ensuite, ce que je peux faire, c'est peut-être utiliser ma grille pour créer mes trois cartes. Créons-en donc d'abord un, puis nous en créerons d'autres. Donc, tout d'abord, pour notre carte, nous allons utiliser : voyons voir. Peut-être pouvons-nous lui donner un nom tout de suite et l'appeler peut-être stock. Article B, G, ou vous pouvez lui donner un nom de voiture, article BG ou autre. Mais comme il s'agit de leur stock et de ce qu'ils ont en stock, nous utiliserons exactement cela. Donc, ce que nous pouvons faire maintenant, c'est voir, peut-être que je peux utiliser une couleur de bordure ici tout de suite. Donc, 2D, peut-être celui-ci ici, a appliqué la couleur de la bordure. Nous allons juste en utiliser un. Couleur de bordure donc légère car nous l'utiliserons pour l' effet de survol un peu plus tard. Donc, ce que je peux faire ici, c'est peut-être étendre cela. Voyons voir. Peut-être que je pourrais même arrondir les coins à huit pour avoir une apparence et une sensation cohérentes. Et tout d'abord, je vais me débarrasser de la bordure juste ici, mais je vais simplement réduire l'opacité, comme ça. Ensuite, ce que je peux faire, c'est appuyer sur Ctrl D et l'utiliser comme image. Alors voyons voir. Je peux peut-être dire que c' est arrivé parce que ce sera le nom de notre voiture ou l'image de notre voiture. Et voilà. Voyons voir. Tout d'abord, pour la taille de la carte, vous pouvez peut-être opter pour une hauteur de 450 ou quelque chose comme ça. Allons-y donc pour 50 dans ce cas. Et pour l'image de ma voiture, je peux opter pour quelque chose comme 250. Voilà donc l'image de ma carte. Mais pour la hauteur, voilà. Je vais juste me débarrasser de certains de ces coins arrondis en bas. Donc, si vous passez la souris, ce sera en haut à gauche, en haut à droite, bas à droite, nous ne voulons pas, et en bas à gauche, nous ne voulons pas non plus. Donc, ce que je peux faire, c'est sauter tout de suite et ajouter mon image. Passons donc à l'ouragan Lamborghini. Et encore une fois, vous pouvez voir à quoi ils ressemblent. Et je vais ajouter le chiffre trois pour tout cela, car il indique simplement la voiture aux trois quarts. Il donne donc suffisamment de détails pour que vous sachiez de quoi il s'agit. Il suffit donc de le glisser-déposer dans leur ego. Et ce qu'il peut faire ici, c'est commencer par quelques informations. Donc, ce que je vais faire ici, c'est taper une alarme antidouleur ou Heaney qui récidive ? Mais au lieu de 32, optons pour quelque chose de plus petit, comme 24. Voilà, assurez-vous qu' il est aligné à gauche. Joli médecin à peu près par ici. Et voyons voir pour l'espacement, ce que nous pouvons faire, c'est peut-être en avoir 24 au total. Donc 12, 123-412-1234. Et voilà. Ce sera notre espacement. Et puis peut-être que je pourrai à nouveau dupliquer ce contrôle D. Et voyons où je peux aller avec 16 cette fois. Donc 20123416, ce sera notre prix. Permettez-moi donc de prendre le prix de notre design original et de le passer au bleu. Et enfin, nous donnerons quelques informations en bas. Et nous utiliserons ces informations pour dire à notre public quelle est l'année de la voiture, quel est le kilométrage parcouru la voiture ou quelque chose comme ça ? Juste quelques informations jetables avant de passer aux informations principales. Dupliquons donc cela, donnons-lui le bloc de texte et donnons-lui 2021, peut-être l'âge de la couleur. Et positionnons-le dans une commande de groupe G, comme vous pouvez le voir ici. Et peut-être pouvons-nous appeler cela quelque chose comme l'année, les kilomètres. Tu peux voir. Et donnons-lui une pile et dupliquons notre couche de texte. Et positionnons ce chiffre sur 24. Et cela peut être le nombre de kilomètres parcourus par la voiture ? Vous pouvez utiliser le kilométrage. J'utilise kilomètres parce que c'est plus facile pour moi. Mais peu importe ce qui vous convient, vous pouvez le faire aussi. Mettons-le donc juste en dessous de notre image. Voyons ici ce que nous avons. Nous en avons 16, ici nous en avons 16, 24. Il est donc naturel que nous prenions 24 points en partant du bas, je pense. Donc. Imaginons cela à 2042 pixels de plus. Zoomons d'un simple toucher et vous comprendrez pourquoi c'est utile. Maintenant que nous avons notre mise en page, je peux regrouper ces éléments et l' appeler carte de voiture, texte. Regroupez ensuite le tout et appelez-le peut-être carte de voiture ou quelque chose comme ça. Et nous allons le dupliquer. Contrôle D. et Contrôle D. Permettez-moi d'échanger rapidement certains de ces éléments. Voilà, je vais faire escalader ma Cadillac. Et puis voici mon prix. L'année sera 2020. Et les kilomètres seront quelque chose comme ça. There Go, fonctionne bien. Et puis passons à quelque chose d' un peu différent. Cette fois, la voiture sera électrique. Et allons-y avec le kilométrage. Kilomètres. L' année sera 2020. 2 km feront 6 000 et peut-être 40. ont donc tous un faible kilométrage et nous allons les pousser vers le bas. Ce sera au centre. On y va. Et voyons voir, peut-être pouvons-nous utiliser un peu d'espacement tout de suite. Donc, au lieu de 113, nous pouvons peut-être opter pour quelque chose de beau et rond comme 64. Donc, encore une fois, nous nous en tenons à cet espacement de huit. Je pense que cela fonctionne très bien. Et ce que je vais faire dans ce cas, c'est peut-être frapper et dire l'une de ces cartes. Je ne sais pas Laisse-moi l'utiliser. Appuyez donc sur Control C ou Control D et poussez-le simplement ici. Permettez-moi donc de sélectionner cette image et d'utiliser du gris clair comme ça. Et laissez-moi le sélectionner ici. carte de voiture fonctionne très bien. Laissons-en là parce que je vais donner des noms à ces cartes. Ce sera donc hourra car. Cela peut être aggravé. Vois si c'est l'année, et ça peut être clair, juste pour que je sache ce que c'est. Et en termes d'images, revenons en arrière et trouvons simplement la Cadillac Escalade numéro trois. Et revenons à Lucy là-bas. Numéro trois, glissez et déposez. Et encore une fois, vous obtiendrez ces images afin que vous puissiez également jouer avec elles. Alors maintenant, transformons-les en composants. Cet effet de survol ne fonctionnera pas très bien ici, je pense, car nous avons une bordure d'un pixel et elle sera simplement recouverte par l'image. Donc, ce que je peux faire dans ce cas, c'est simplement réduire largeur de l' image à 372 peut-être. Donc, juste deux pixels de chaque côté et positionnez son centre. Faites de même ici. Donc 372, parce que je réfléchis juste à la façon de procéder plus tard dans Webflow. Et je pense que ce type d'approche fonctionnera très bien, car avec l' état par défaut, vous aurez simplement sans frontières. Et à l'état de survol, nous aurons une bordure d'un pixel, C37, pour nous assurer qu'elle est au centre. Et encore une fois, c' est notre état par défaut. Sélectionnez donc le contrôle des ouragans, augmentez la touche Control K Lucid Air Control. Et maintenant, amenons-les à survoler. Sélectionnez ce texte et sélectionnez l'état d'horreur. Et voilà. Choisissez l'état ferreux, adorable. Et au lieu de l'état d'horreur, sélectionnez l'arrière-plan et portez l'opacité de la bordure à 100. Faites de même pour celui-ci. Et faites de même pour celui-ci. Et voilà. Fermez tous vos composants, revenez à l'état par défaut. Et je pense que nous devrions être prêts à y aller. Ouaip. Jetons donc un petit aperçu juste pour voir ce que nous avons. Nous avons donc toujours tous ces éléments que nous avons conçus dans la vidéo précédente, mais nous avons maintenant cette carte. Ainsi, quand je survole, vous pouvez voir à quoi cela ressemble. Cela a juste ce joli petit effet de survol sur nos frontières. Et je pense que cela ne fait qu'ajouter un peu à cette convivialité, car vous montrez aux utilisateurs qu'ils ont réellement survolé le pointeur de la souris et qu'ils peuvent réellement faire quelque chose pour y remédier. Ce que nous allons faire ensuite, c'est utiliser notre bouton principal. Il suffit de le glisser-déposer à l'intérieur. Je vais ajouter le type de modification des principaux composants. Je ne sais pas pourquoi c'est changé ici, alors débarrassons-nous de celui-ci. Alice vient d'ajouter celui-ci en premier. Donc, ce que je vais faire, c'est peut-être , voyons voir, je peux activer une pile sur mon bouton, ce qui activera le jumelage. Et je vais me débarrasser de la pile parce qu'elle conservera toujours notre rembourrage. Et maintenant, je peux continuer, faire glisser mon bouton principal et le faire glisser jusqu'ici, le positionner au centre. Et vous pouvez voir que nous avons maintenant ce crayon et ce diamant, ce qui indique qu'il s'agit d'un composant enfant de ce composant principal. Donc, en termes simples, quels que soient les changements que nous apportons ici, cela se traduira ici. Mais quels que soient les changements que nous apportons ici, ils ne se traduiront pas ici car il s' agit de l'original. Donc, dans ce cas, ce que je veux faire, c'est modifier le texte pour voir toutes les voitures et vous pouvez voir comment le bouton réagit. Sélectionnez le texte, passez à l'état de survol pour le modifier également ici. Et voilà. Parce que nous avons deux États. N'oubliez pas que si vous en avez plus, vous devrez en changer davantage. Donc, quand je planerai, dirai « explorez nos voitures ». Mais ici, quand je survole, il y aura le message suivant : « Regarde toutes les voitures et leur taille va changer ». Donc. Ce que je peux faire, c'est peut-être le pousser à 64 ans également, quelque chose comme ça. Assurez-vous qu'il est au centre. Et voilà. Et nous allons appeler cette section sélection exclusive ou notre sélection. On y va. Sympa. Et la prochaine sera ce que nous proposerons. Si je vous ramène ici, voyons où nous en sommes avec le temps. Donc, ce que nous proposons, c'est ce que nous allons concevoir de temps en temps pour faire une petite pause. Je vais donc saisir ici ce que nous proposons. Et pour cela, voyons voir, utilisons à nouveau H3. Donc h trois, nous sommes dans le H2, désolé, nous sommes en position centrale, son centre, et donnons-lui à nouveau la distance de 200. Voyons donc 213. Alors, encore une fois. Voyons 200. Leur ego et leur tanière. Ce que nous pouvons faire, c'est simplement utiliser une autre de ces images. Permettez-moi donc de le créer très rapidement. Et peut-être pouvons-nous utiliser simplement l'autre coin arrondi comme nous le faisions précédemment. Voyons donc 246, peut-être sept colonnes maintenant, quelque chose comme ça. Donc 2467, en termes de taille, allons-y avec cinq ou sept. Et en termes de rayon de coordonnées, prenons le rayon 24 dans le coin inférieur gauche. Débarrassez-vous de la bordure et laissez-moi glisser-déposer mon image à l'intérieur, qui figurera dans celle-ci pour ce que nous proposons. Et voilà. Je peux continuer, double-cliquer et peut-être l'agrandir un peu. Mais je ne pense pas que ce soit nécessaire parce que cela montre la clé. Et je vais déplacer légèrement ces deux sections vers le bas. Encore une fois, nous sommes à 200 d'ici. Et ici, nous allons réellement commencer à utiliser certains éléments. Alors voyons voir. Je pourrais peut-être réutiliser ce badge. Donc, un badge de garantie comme ça. Et peut-être que je peux le colorer en bleu. Et je peux peut-être lui donner des dimensions différentes. Voyons voir, peut-être que le droit sera vraiment une bonne chose. Ce que je vais saisir ici, c'est extension de garantie, car c'est ce qu'ils proposent. Et nous allons peut-être utiliser H3 pour celui-ci. Parce que je pense qu' il fonctionnera bien mieux que l'A12. Voyons voir à quelle distance nous pouvons peut-être le positionner. Tout d'abord, sélectionnez-les pour vous assurer qu'ils sont au centre et passez à 16, quelque chose comme ça pour que nous puissions garder notre espacement et les organiser un peu mieux. Je vais donc le pousser jusqu' au point de contrôle G. Et j'ai reçu l'ordre de le transformer en pile. Et peut-être que ce que nous pouvons faire ci-dessous est peut-être utiliser du texte. Tapez donc T, sélectionnons-le et collez-le dedans. Et ce que je vais faire, c'est le transformer en bloc de texte. Assurez-vous que c'est du côté, du côté gauche. Ici, pour la distance entre un barrage, nous allons utiliser la s104. Vous pouvez donc voir que nous maintenons cette cohérence, donc quelque chose comme ça. Et allons-y de ceci et juste un peu plus bas. Nous allons donc à nouveau appeler une garantie de disque. Nous pouvons donc donner ceci, voir comment nous pouvons le structurer. Nous pouvons appeler cette icône de garantie ou quelque chose comme ça. Voyons l'icône ou le titre. Maintenant, donnons-lui juste 1.2. Ensuite, regroupez simplement ces deux et appelez-les également garantie. Ça va être très simple pour nous de le faire. Et nous allons nous soucier de nommer un peu plus tard dans Webflow. Donc, ce que je vais faire avec eux, c'est peut-être les structurer de manière à ce que nous ayons une distance de 40 entre eux, quelque chose comme ça. Cela va donc se faire jusqu'au bout. Ce sera jusqu' au sommet. La prochaine fois, nous appellerons maintenance. Et enfin, nous appellerons les prêts. Et pour la maintenance, permettez-moi d'utiliser l' icône de maintenance pour mon design original. Je vais intervenir ici et le positionner ici. Assurez-vous que je suis au centre de mon design, car il s'agit d'une pile. Appuyez simplement sur Supprimer pour le remettre en place. Et comme vous pouvez le constater, nous sommes toujours au centre avec ces deux éléments. Donc, si je les sélectionne, cliquez ici. Et voilà. Permettez-moi donc de copier le texte de maintenance. Et voilà. Nous allons juste voir. Pose ça jusqu'ici. Super, parce que nous ne tournée de la ligne centrale vers la gauche. C'est ce que nous allons faire. Faisons ça pour ici. Faisons ça pour ici. Voyons où nous en sommes, nous y sommes et qui nous sommes également. Donc illégalement, copions les textes de maintenance et copions. Voyons voir, il s'agira également de maintenance. Et voilà. Et il s' agira également de prêts. Tapons donc les alarmes. Et pour ce qui est de l'icône, je vais également copier l'icône et faire la même chose que précédemment. Donc, en sautant d'ici, Control or Command V s' assure qu'il se trouve au centre du mélange, juste avant que les prêts n'atteignent ce lot, retirez-le, et le tour est joué. Nous avons maintenant ces deux-là dans la position que nous voulions qu'ils soient. Permettez-moi donc de copier le texte des prêts. Et voilà. Et cette section montre simplement aux utilisateurs ce qu'ils proposent réellement. Ils offrent une garantie prolongée. Vous avez donc cette tranquillité d'esprit supplémentaire. Ils proposent la maintenance conformément à leurs partenaires car ils ne fournissent pas eux-mêmes la maintenance. Enfin, ils accordent à nouveau des prêts par l' intermédiaire de leurs partenaires afin que vous puissiez vous associer à eux uniquement pour cela. Encore une fois, enfin, nous avons un espacement de 40 entre tous nos articles. Et voyons voir, peut-être pouvons-nous appeler ce groupe de contrôle G et l'appeler, disons « informations sur l'offre ». Et assurez-vous que ces deux-là sont au centre et que nous sommes à 64 d'ici. Quelque chose comme ça. Je pense que ça va très bien fonctionner. Et ce que nous pouvons faire, c'est les regrouper et leur donner le nom que nous proposons. Notre offre est encore meilleure. Et voilà. Si nous avons un bref aperçu ce que nous avons fait jusqu'à présent, nous avons exploré nos voitures. Nous avons ces trois-là, nous avons ce héros, nous avons dans cette section À propos, ces cartes avec des effets de survol. Nous avons également notre nouveau bouton avec notre effet, ce que nous proposons. Nous avons donc tous ces éléments à l'intérieur. Et maintenant, voyons ce qui va suivre. Vient ensuite les avantages, alors contactez-nous où que nous soyons. Enfin, le pied de page se trouvera en bas. Encore une fois, un design va évoluer beaucoup plus rapidement car nous allons créer des contacts là où nous sommes, pied de page et une section héros, une sorte de section de navigation, désolée. Et nous allons simplement les copier et les coller dans nos designs. Donc, juste ce premier, lorsque nous commencerons à les décomposer et à positionner ces éléments sur la page, sera beaucoup plus simple plus tard, lorsque nous passerons à beaucoup plus simple plus tard, lorsque nous autre chose et que nous créerons cela. C'est donc tout pour celui-ci. Et laissez-moi vous voir dans la prochaine vidéo où nous allons continuer. 138. Conception de page d'accueil: Passons maintenant à la section suivante qui portera sur les avantages. Donc, ce que je vais faire, c'est sélectionner cette commande de texte C, la positionner en dehors du contrôle V et saisir nos avantages. Comme ça, assurez-vous qu'il est au centre et poussez-le complètement vers le bas. Ensuite, je vais utiliser un outil rectangulaire rapide pour créer une sorte de section de rupture ici. Et laissez-moi lui donner une hauteur de peut-être, voyons 469, je crois. Voyons 200 ici. Comme tous les autres. Et donnons-lui un nom, comme la section des avantages sociaux BGN. Ce que je vais faire dans ce cas, c'est donner cette couleur foncée transformer ce texte en textes blancs purs et le déplacer grossièrement ici. Maintenant que nous l'avons fait, je vais utiliser une image que je trouve également sur Envato Elements. Et je vais également le laisser dans une collection. Positionnez-le approximativement ici pour que nous voyions ce feu arrière, quelque chose comme ça. Et voyons voir. Pour ce qui est de l'obésité, je peux peut-être en taper une sur mon clavier, mais pas sur tout, juste sur cette image. Oups, désolée. Faisons ça encore une fois. Alors fais-le, mais au lieu de BG, appelons-le avantages IMG image. Et puis à l'intérieur de celle-ci, faisons glisser et déposez cette image. Double-cliquez en maintenant la touche Maj enfoncée et cliquez avec le bouton gauche de la souris. Et une fois que vous avez terminé, appuyez sur l'un de votre clavier pour le réduire à une opacité de un à dix pour cent. Et si nous poussons ce navigateur ici, vous pouvez voir à quoi cela ressemble. Nous avons donc ce bel effet de fantôme. Et ce sera peut-être l'une des parties les plus sombres de notre site Web ou de notre rôle. Parce que si vous vous souvenez bien, nos clients nous ont dit qu'ils n'aimaient pas vraiment ces mises en page sombres. Donc, ici, ce que nous allons faire, c'est peut-être au lieu de 32, peut-être que nous pouvons utiliser H3 et utiliser à nouveau des blancs. Et saisissons la livraison gratuite. Et voilà. Et avec ça, appuyons sur Ctrl D pour le dupliquer. Et ici, peut-être pouvons-nous utiliser le texte du paragraphe. Donc paragraphe, et passons à la couleur du corps cette fois, au lieu du blanc pur. Et voilà. Et tapez épingler ce texte. Et pour ce qui est de l'espacement, on peut peut-être opter pour 24. Allons donc au 123424 et assurons-nous que nous sommes au centre. Et je vais simplement copier l'icône que j'utilisais ici. Et positionnez-le approximativement autour de vous. Ici. On y va. Et cela peut aussi être 24. Pour un espacement agréable et uniforme. Ce sera une icône de livraison gratuite et je vais appuyer sur Control K pour la transformer en composants, livraison gratuite et dans tout le pays où elle se trouve. On y va. Nous aurons donc ces trois boucles. Donc livraison gratuite, livraison gratuite, Control à l'échelle nationale, G, pour le regrouper. Et nous appellerons cela la livraison gratuite ainsi. Et pour m'assurer que nous sommes bien positionnés, je vais faire glisser un rectangle autour de ces quatre colonnes pour l'espacement . Sélectionnez ensuite mon contenu et cliquez ici pour vous assurer qu'il est centré. Maintenant que je l'ai fait, je peux contrôler D, appuyer simplement sur le bouton Contrôle central D et le positionner ici. Utilisez à nouveau mon astuce rectangulaire. Mais avant, parce que nous allons modifier le texte ici. Alors faisons-le d'abord. Comme ça. Et ce sera un échange partiel. Et nous l'appellerons Farm Exchange. Maintenant que nous l'avons fait, nous pouvons le positionner de manière uniforme, car le texte des paragraphes constitue la partie la plus large de la section. Pour l'échange de pièces, permettez-moi d'utiliser l'icône du design original du zoom in d'un simple toucher. Positionnez-le ici. Et ajoutons-y ces deux-là. Jusqu'en bas. Et voilà. Appuyez sur la touche Ctrl K pour en faire un composant. Et maintenant, au centre, nous allons parler de polissage en trois étapes. Vous serez donc en sécurité lorsque vous recevrez le refrain d'un distillateur, car ils vont polir votre voiture sans la salir ou pour sa peinture être contaminé ou quelque chose comme ça. Donc, dans ce cas, positionnons-le ici. Mettons-le jusqu'ici. Et voilà. Débarrasse-toi de ça. Appuyez sur Control K à ce sujet. Assurez-vous qu' ils sont tous centrés. Comme ça. Assurez-vous ensuite que le texte est centré. Ces deux-là le sont déjà parce que nous l'avons déjà fait. Et comme vous pouvez le constater, en quelques étapes, nous les avons obtenus. Maintenant, pour ce qui est de ces icônes, je les ai obtenues évidemment, vous allez les intégrer au design, comme je l' ai dit, mais je les ai obtenues auprès de spécialistes des icônes. Et ce que j'ai fait ici, c'est que j'ai créé ma collection. Et vous pouvez voir toutes ces différentes icônes que nous allons utiliser tout au long de notre design. Et pour utiliser l'un d'entre eux, c'est assez simple. Cliquez pour le copier, puis vous pourrez le coller où vous le souhaitez dans votre design. Tu peux l'adapter, le modifier comme il veut. C'est donc très simple à faire. Ce que je vais vous recommander c'est d'accéder à vos plugins, qui se trouvent dans cette zone. Cliquez sur le Plus, localisez l'icône Scout, puis rendez-vous simplement leur site Web si vous souhaitez créer cette collection. Ou lorsque vous téléchargez quelque chose, vous pouvez accéder à mes téléchargements et les retrouver plus tard sur le site Web, puis cliquer sur l'icône en forme de cœur pour les ajouter à mes collections. Ensuite, vous pouvez tous les placer dans vos collections. C'est pourquoi il est très simple d'utiliser ces icônes et c'est là que j'ai trouvé toutes ces icônes géniales. J'aurais donc pu utiliser les éléments Envato, mais je ne voulais pas. Pour les icônes, j'ai fait exprès d' utiliser l'icône Scott, juste pour vous montrer à quel point il est facile d' utiliser n, que vous pouvez les trouver toutes de superbes icônes là-bas. Allons-y avec le polonais en trois étapes. Voyons voir. Et voyons ce que nous pouvons faire. Nos avantages les placent au premier rang. Voyons voir d'ici à ici, peut-être que nous pouvons donner ça à 64, comme ça. Ensuite, sélectionnez l' ensemble de notre contenu et déplacez-le vers le centre comme ceci. On y va. Et je peux tout regrouper et dire que les avantages sont des avantages comme ça. Passons maintenant directement à notre formulaire de contact. Si je vous ramène ici, si vous vous souvenez que nous avons « Contactez-nous », alors nous allons peut-être avoir, voyons combien de champs, où nous pouvons avoir cinq champs au total. Alors peut-être que celui-ci peut être dépensé ici et lui donner un nom. Ensuite, nous pouvons en avoir deux pour l'e-mail, le numéro de téléphone, puis un pour le message, et enfin un bouton pour envoyer un message ou quelque chose comme ça. C'est exactement ce que nous allons faire. Alors, tout d'abord, sélectionnons celui-ci et collez-le ici, puis déplacez-le ici, positionnons-le ici et assurez-vous que nous sommes 200. J'adore la façon dont XD vous offre ces options de positionnement. C'est donc assez simple à faire. Et pour nos champs, nous allons tout simplement utiliser un rectangle comme celui-ci. Et appelons ce champ de saisie comme ça. Et pour les champs de saisie eux-mêmes, ce que nous pouvons faire est peut-être de voir utiliser une couleur blanche, ce que je pense qu'il utilise déjà. Oui. Donc, couleur blanche. Et voyons voir pour les démences, où nous pouvons aller avec 60 ans Je pense que cela fonctionnera très bien. Débarrassez-vous de la bordure et du rayon. Passons donc aux carrés, appuyons sur T et saisissons, par exemple, le nom complet. Nom complet Et pour ce texte, j'utiliserai textblock. Assurez-vous que c'est ici. Et en termes d'espacement, on peut peut-être opter pour 16. Je pense que ça va très bien fonctionner. Donc quelque chose comme ce Control D pour le positionner approximativement ici. Et puis voyons peut-être que pour ce texte, nous pouvons utiliser des textes de paragraphes. Et voilà. Et entrez votre nom complet. Et assurez-vous que nous sommes bien alignés ici. Il ne nous reste plus que le poumon. Et à partir de là, nous pouvons nous positionner au centre. Et puis pour la distance, on peut y aller avec 16. Passons donc au Shift 121234. Donc, si je maintiens ma touche Alt ou Option de chaque côté, vous pouvez voir les distances. Donc, si je survole ici, vous pouvez voir que nous sommes 17 de haut en bas, et ici nous sommes 16 de ce côté. Donc, ce que je peux faire ici, c'est sélectionner ceci et cela, et voyons voir, peut-être que je peux appeler cela des entrées. Voyons la commande G pour les regrouper, appelons-les entrées. Et puis déplacez le nom complet juste en dessous ici. Et cela peut être nommé, peut-être un nom. Et voilà. Ce que je peux faire c'est appuyer sur Ctrl D pour le dupliquer. Et voyons voir pour le positionnement, peut-être que je peux avoir une distance de 32 ici. Donc quelque chose comme ça. Au lieu de FullName, nous avons ici un e-mail. Et ici, je vais taper votre e-mail. Nous avons donc déjà le contenu, nous avons la structure, nous avons tout, mais nous allons simplement renommer ces éléments. Ce sera donc un e-mail. Et en termes de largeur, ce ne sera pas la pleine largeur. Il aura une largeur de six colonnes, car n'oubliez pas que nous avons 12 colonnes sur toute la largeur. Alors 123456, c'est parti. C'est donc notre e-mail. Et ce que je peux faire dans ce cas, c'est mettre les deux en groupe. Peut-être simplement vous montrer un peu comment le responsive design fonctionnera plus tard. Cela peut donc être un e-mail et un téléphone, comme ça. Et dupliquons celui-ci. Contrôlez D et positionnez-le ici. Il touche donc le bord. On y va. Et ça peut être un téléphone. Sélectionnez le type de téléphone, les livres. Et au lieu de saisir votre e-mail, entrez peut-être votre numéro de téléphone comme ça. Enfin, ce dont nous avons besoin, c'est d'un plus grand. Je vais donc utiliser cette position à 30 pour le déplacer vers le bas. Ce sera un message. Et donnons-lui quelque chose comme un message. Et tapez. Écrivez votre message ici. Quelque chose comme ça. En termes de hauteur, il sera un peu plus grand que ces deux-là, simplement parce que nous voulons laisser suffisamment d'espace à nos utilisateurs pour écrire le message qu'ils souhaitent. Donnons-lui donc quelque chose comme 171. Je pense que ça va être très bien. Enfin, allons-y et ajoutons notre composant pour le bouton principal. Glissez-le et déposez-le à l'intérieur, assurez-vous que nous avons 32 ans. On y va. Et là encore, nous avons ce diamant noir entier, ce qui signifie que nous utilisons des composants mineurs. Et ici, nous écrirons Envoyer, message. Et voilà. Positionnez-le ici. Vous pouvez voir que nous n'avons pas de taille fixe pour le bouton. C'est ce que je voulais en fait. Passons donc à notre état d'horreur. Glissez et déposez dans l'état par défaut. Et voilà. Donc 32. Et maintenant, je pense que tout est bien positionné. Regroupons-les tous en appuyant sur Contrôle ou Commande G. Appelons-le contacts ou simplement formulaire, car c' est ainsi que cela s'appelle également dans Webflow. Enfin, pour la distanciation, ce que nous pouvons faire, c'est opter pour le 64 car c'est ce que nous utilisons tout au long de notre désir. Comme ça. Et voilà. Maintenant que nous avons notre formulaire, saisissons au lieu de ce que nous proposons Contactez-nous » au lieu de ce que nous proposons. Cette section est terminée. Regroupons-le, appelons-le forum. Et appuyez immédiatement sur Control K pour le transformer en composant. Parce que n'oubliez pas que nous allons l'utiliser tout au long de notre conception, y compris dans la section suivante intitulée Où nous sommes et le pied de page. Et c'est ce que nous allons aborder ensuite, car nous en sommes déjà à 13 minutes de cette vidéo. Faisons donc une pause ici et laissez-moi vous voir dans la prochaine vidéo où nous allons créer ces deux sections. 139. Conception de page d'accueil: Passons maintenant à la section suivante, qui sera consacrée à la carte. Et tout d' abord, laissez-moi dessiner un rectangle rapide ici, quelque chose comme ça. Voyons voir, 246, peut-être sept. Donc quelque chose comme ça, 2467. Et voilà. Pour ce qui est de la hauteur, on peut peut-être en choisir cinq ou sept. Laisse-moi me débarrasser de la couleur de la bordure pour cartographier comme ça. Et laissez-moi dessiner une carte rapide à l'intérieur, qui est la carte du lieu que j'ai choisi. Et bien sûr, vous pouvez continuer et choisir un autre emplacement. Tu peux faire ce que tu veux ici. Mais je vais juste utiliser celui-ci. Maintenant, pour ce qui est du texte à l'intérieur, je vais utiliser celui-ci. Contrôlez donc C, contrôlez V, et positionnez-le simplement ici, assurez-vous qu'il est aligné à gauche comme ça, et déplacez-le jusqu'ici. Et ici, je vais taper où nous en sommes. Contrôle D. Et celui-ci va être en panne. Et il s'agira également d'un bloc de texte, car nous voulons leur donner un peu plus d' informations sur notre situation et sur ce à quoi ils peuvent s'attendre. J'ai donc visité notre salle d'exposition pour apporter votre voiture pour une offre d'évaluation gratuite. Donc, s'ils veulent faire cet échange partiel entre les personnes mentionnées, ils peuvent le faire ici. Collons ça à 24. Positionnez-le approximativement ici. Et voilà. Et maintenant, permettez-moi peut-être de dupliquer cette position du texte ici, je vais utiliser, Voyons voir, paragraphe et mots clés adresse. Ce sera notre première section. Et poussez-le ici. Permettez-moi de sélectionner mon icône et de la coller ici. Et tout de suite, avant d' aller plus loin, laissez-moi le sélectionner, appuyez sur Contrôle K pour le transformer en composant. Et faisons en sorte que ce soit 16. Oui, je pense que cela fonctionnera très bien. Et voilà. Assurez-vous de les regrouper , de les empiler et leur donner un nom d'adresse. Quelque chose comme ça. Voyons voir, c'est bon. Déplace ça ici. Et à partir de là, au lieu de 24, nous pouvons aller plus loin et en faire 32. Et l'adresse, nous utiliserons à nouveau ce texte. Alors, contrôlez C, contrôlez V, positionnez-le ici, assurez-vous qu'il est aligné à gauche. Il se trouve juste en dessous de notre adresse. Et permettez-moi de double-cliquer et de copier-coller l'adresse. Bien sûr, tu peux utiliser le tien. Il s'agit évidemment d'imaginer une confiance pour les besoins de ce cours, mais vous pouvez utiliser ce que vous voulez. Donc, je vais y aller avec 16, et passons à l'adresse. Maintenant, dans ce cas, je vais activer la pile, qui sera verticale et comptera 16. Il va donc être beaucoup plus facile pour moi d' ajuster tout cela. Passons ensuite à la commande D ici à 24, contrôlons la largeur 24. Et cela va se faire jusqu'au bout. Ce sera au centre. Ce dernier sera ouvert aux heures d'ouverture. Et ce second sera trouvé. Maintenant, permettez-moi de copier très rapidement le contenu du design original. Nous pouvons avancer un peu plus vite et le tour est joué. Numéro de téléphone, juste un numéro de téléphone aléatoire que vous pouvez choisir. Encore une fois, ce qui vous convient, puis horaires d'ouverture. OK, et enfin, allons-y et montrons-le parce que vous voulez que vos utilisateurs sachent quand vous ouvrez, rouvrez les jours fériés, ouvrons le samedi ou le dimanche. Travaillez-vous peut-être dans un fuseau horaire différent ou autre. Il faut donc toujours le leur dire et leur donner ces informations précieuses. Débarrassez-vous donc de celui-ci, Control K pour en faire un composant. Et je vais donner à cela le nom des heures d'ouverture. Et voilà. Et enfin, il nous reste un numéro de téléphone. Passons donc à l' étranger ici. Donc, contrôlez C, contrôlez V, et sélectionnez-le. Et laissez-moi sélectionner l'icône de mon téléphone. Et voilà. Où il se trouve. Ça y est. Assurez-vous qu'il est au centre au-dessus de mon texte. Je vais appuyer sur Control K. Cela va bien le positionner là-bas. Mais je peux aussi transformer ce texte en une pile. Sélectionnez donc tous mes textes, Control G. Et ce que je peux faire, c'est peut-être appeler du contenu sur la dislocation. Contenu de localisation, centrez-le avec ma carte comme ça. Et le contenu de localisation va être transformé en une pile de ce type. Il va avoir des valeurs différentes parce que 24 ici, 32 ici, peu importe. L'important, c'est d'en faire une pile. Regroupons cela et appelons-le. Voyons où nous en sommes. Et enfin, appuyez sur Control K. Parce qu'une fois de plus, nous réutiliserons ce contenu dans notre design. Assurez-vous que nous sommes à 200 d'ici. Et voilà, à partir de ce bouton. Enfin, la dernière section qui reste nous permet de créer ce pied de page. C'est exactement ce que nous allons faire. Je vais prendre mon navigateur, utiliser mon logo Control C, zoomer un peu ici, appuyer sur Control V. Et voilà. Assurez-vous qu'il est au centre, encochez-le complètement vers le bas. Parce que vous vous en souviendrez, logo est au centre. Sur le côté gauche, nous avons les icônes des réseaux sociaux. Sur le côté droit, nous aurons notre système de navigation. ce qui est de la navigation, appuyez sur les éléments de navigation Ctrl C. C'est donc tout l' intérêt d'Adobe XD. Avec tous ces outils, vous voulez pouvoir réutiliser tous vos éléments car quel est le point de vue ? En les sélectionnant encore et encore. Permettez-moi d'utiliser ces icônes sociales qui ont déjà été créées dans mon précédent InDesign. Et il va également coller les composants, ce que je ne veux pas nécessairement, mais gardons-le ainsi. Nous avons donc des icônes sociales et nous avons l'état par défaut, qui est cette couleur gris foncé. Nous avons l' état de survol, qui est bien sûr l'effet de survol notre couleur de survol pour notre design. Donc, ce que nous pouvons faire, c'est pour chaque survol, nous assurer que nous appliquons la même couleur ici. Notre survol. Utilisons donc la couleur du survol. Assurez-vous que nous le sélectionnons. Voyons voir. Pourquoi, n'est-ce pas en train de sélectionner ceci, alors ce rectangle, quel qu' il soit, et voyons voir, survolez, utilisez cette couleur, utilisez cette couleur, utilisez cette couleur, utilisez cette couleur. Et enfin, pour cet usage, décoloré. Et voilà. Tout fonctionne donc comme il se doit. Une fois de plus, j'ai repris ces icônes à partir de ce plug-in appelé Icone scout. Et si je fais défiler l'écran un peu vers le bas jusqu'à mes téléchargements, je pense. Et papa l'est. Vous pouvez donc voir ici toutes ces icônes. Permettez-moi donc de revenir à mon panneau de couches et de les ramener à leur état par défaut, comme ça. Et comme ça. Enfin, positionnons cela ici. Et ce que je veux faire, c'est peut-être les pousser à 64 points sur notre logo. Quelque chose comme ça. 64 ans, voilà. En dessous du logo. Et une dernière chose que je veux faire est tourner le texte vers le bas. Tapons donc quelque chose comme zone de texte. Et nous allons utiliser pour cela, nous utiliserons le texte du paragraphe et je vais copier et coller le texte, qui ne sera quelques informations de base sur l'entreprise. Et vous pouvez voir, d'accord, réserver dans le cadre des voitures exclusives 2023 et nous aurons le même espacement. Donc, à partir de là, voyons voir, je maintiens Alt 3. Voyons ce que nous pouvons faire ici. Voyons voir si nous pouvons le faire passer à 64. Et voilà. Maintenant que c'est fait, déplacez-le vers le bas et regroupez-le tous, appelez-le pied de page. Pied de page. On y va. Et passons le pied de page à 200 à partir d'ici. Et enfin, une dernière chose que je veux faire. Et une chose ennuyeuse dans XD, c'est que je ne peux pas fermer mes tableaux d'art à la fin. Je dois donc double-cliquer ici, cliquer et faire glisser et simplement mesurer comme ça. C'est donc une perte de temps, mais que pouvez-vous faire ? C'est juste une légère onction sur toutes les habitudes logicielles. Et c'est celui de XD pour moi. Donc, si je le sélectionne 64, c'est parti. Donc, avant de passer à la page suivante, je voudrais avoir un aperçu de celui-ci et expliquer ce que nous avons fait jusqu'à présent dans cette partie du cours. Nous avons donc notre navigation en haut, nous avons les cartes, les prêts, contactez-nous. Nous avons notre section dédiée aux héros, votre partenaire pour les voitures exclusives qui leur expliquent immédiatement ce que vous êtes, ce que vous faites et à qui cela est destiné à certifier les voitures d'occasion kilométrage et historique documenté. Nous leur parlons donc de nos voitures, de ce qu'elles sont, explorons nos voitures pour qu'ils puissent cliquer dessus et accéder à la page du cours, comme nous l'avons déjà mentionné. Ensuite, un peu plus sur nous, Happy Smiley People. Et dans cet emplacement exclusif, nous avons notre sélection exclusive avec des cartes qui se ressemblent. Nous avons toutes les voitures, donc nous avons des éléments et des informations visibles ici, tels que le nom, le prix, l'année de production et le nombre de kilomètres parcourus par la voiture. Une fois de plus, Seal Cars vous emmène à la section des cours sur les extensions de garantie, la maintenance et les prêts. Je pourrais avoir l' esprit tranquille ou bénéficier d'avantages. Donc, si vous achetez une voiture par notre intermédiaire, ce que vous allez obtenir. Vous allez donc bénéficier de la livraison gratuite, échange de cadeaux polonais en trois étapes, afin que vous puissiez leur vendre votre ancienne carte et ils recevront une partie de l'échange. Ensuite, nous avons le formulaire Contactez-nous, qui est très important. Nous avons le message d'envoi où nous sommes, donc notre position et encore une fois, informations importantes sont incluses ici, ainsi adressées pour le numéro, les heures d'ouverture. Enfin, nous avons le pied de page avec tous ces liens fonctionnels. Et puis, dans ces icônes, cette icône YouTube m'embête et elle ne fonctionne pas pour une raison quelconque, mais peu importe. Nous allons le corriger plus tard dans Webflow. Et c'est en gros tout. C'est tout pour la partie design de la page d'accueil. Dans la vidéo suivante, nous allons passer à la page des voitures, et nous allons approfondir un peu ces cartes. Nous allons en avoir huit et nous allons les positionner de manière un peu égale. Et je vais vous montrer le pouvoir de réutiliser tous ces composants de la même manière. Navigation, comme un formulaire de contact À propos nous, une carte et un pied de page en bas. Je vous verrai donc dans la prochaine vidéo lorsque nous poursuivrons notre conception. 140. Conception de page de voitures: Passons maintenant à la page du cours et reprenons là où nous nous sommes arrêtés Je vais vous montrer comment vous pouvez réutiliser certains des éléments que nous avons mentionnés. Nous en sommes donc à notre conception et ce que je vais faire est assez simple. Il suffit de sélectionner l'ensemble de mon tableau d'art, d' appuyer sur Ctrl D et de venir ici. Et au lieu de la page d'accueil, tapez voitures. Pour le moment, ce que nous voulons, c'est que cette page soit sélectionnée, si vous vous en souvenez. Donc, si je sélectionne mes voitures, nous avons choisi simplement pour montrer à un utilisateur que nous sommes sur cette page. Donc, si je clique ici, vous pouvez voir que je ne peux plus survoler, mais je peux survoler ici et ici. Cela indique simplement que nous sommes sur la même longueur d'onde. Nous allons donc faire pour cette section de nous débarrasser de cela, cela et de nous débarrasser de ces sections, quelque chose comme ça. Et ce que je vais faire, c'est peut-être y ajouter un peu parce que toutes les voitures sont présentées. Nous n'avons pas besoin de voir le bouton de toutes les voitures et nous allons simplement nous en débarrasser. Maintenant, tout d'abord, laissez-moi sélectionner ce texte, appuyer sur Ctrl C et réutiliser ce contenu ici même. Au lieu d'être aligné à gauche, assurons-nous que son centre est aligné comme ceci. Et laissez-moi sélectionner les textes. Votre partenaire pour une voiture exclusive. C'est donc exactement le même texte qu'ici. Et pour ce qui est de l'espacement, ce que nous pouvons faire, c'est peut-être le positionner à 40 depuis le haut. Alors déplacez 1234 parce que nous voulons qu'il soit assez proche du sommet, comme ça. Et bien sûr, vous voulez qu'il soit juste en dessous de notre barre de navigation. D'accord ? Donc, je vais faire glisser un joli cercle en arrière-plan. Donc, pour ce faire, vous pouvez bien sûr utiliser votre cercle comme celui-ci et le positionner au centre, en supprimant la bordure en termes de couleurs Utilisons le bleu principal parce que c'est notre entreprise couleur dans ce cas. Allons-y avec les dimensions de 300 par 300. Peut-être. Assurez-vous qu'il est au centre et déplacez-le vers le bas de notre texte. Peut-être que nous pouvons même le pousser jusqu'ici. Donc, juste en dessous de nos textes, assurez-vous qu'il est au centre. Il y a quelque chose qui ne va pas dans ce texte. Donc, si je le positionne ici, non. OK, c'est peut-être un XD Buck. Passons maintenant à autre chose et je vais glisser-déposer mon image de ma voiture ici. Une fois de plus, j'ai utilisé Envato Elements pour celui-ci. C'est cette maquette que j'ai mentionnée. Et cette voiture est simplement découpée dans cette maquette. Donc, ce que je peux faire dans ce cas, c'est peut-être placer légèrement plus haut, peut-être 300 ou quelque chose comme ça, afin d' avoir un beau chiffre pair. Et à partir de là, je peux peut-être le pousser légèrement jusqu'ici, peut-être quelque part par ici. Et je ne veux pas vraiment pouvoir voir le cercle en bas. Le fait de citer le positionnement de celui-ci fonctionne très bien, citer le positionnement de celui-ci comme vous pouvez le voir, parce que c'est transparent, cela montrera quand même le cercle en arrière-plan, mais nous n'aurons pas le cercle ici, cela va juste nous donner ce bel effet si nous le voulons. Enfin, pour cette section, ce que je veux, c'est peut-être la porter à 100 %. Voyons donc quelque chose comme 100, car nous voulons toujours pouvoir voir cette section au-dessus de la faille. Ainsi, lorsqu'il s'agit d'un aperçu, encore une fois, vous pouvez voir au-dessus du pli, nous pouvons toujours voir cette section. Et dans cette section nous voulons utiliser cette carte, cette carte, carte, toucher Ctrl C, sauter ici, ouvrir notre sélection et taper Control V, quelque chose comme ça. Positionnez-le vers le bas. Et ce qu'il peut faire pour l'espacement, c'est que je peux lui en donner peut-être 32. Alors 32, 32, c'est parti. Et ce que vous pouvez faire, c'est sélectionner ces trois, Ctrl G, et les placer dans la première rangée. Voilà. Ici, à l'intérieur de celui-ci, parce que ce n'est pas un composant et que c'est la partie cruciale, car s'il s'agissait d'un composant, je devrai recréer ce que j'ai fait pour ces trois composants. Je crée l' état d'origine, je crée l'état d'horreur, puis je modifie le texte de chacun d'entre eux à l'intérieur de chacun de ces états. C'est pourquoi il est utile d'avoir cette carte en veille sans aucun composant, de sorte que vous puissiez facilement échanger vos éléments vers la gauche, droite et le centre sans interruption. Ensuite, vous pouvez créer des composantes en plus de la dette. Donc, si nous revenons ici et que nous me permettons simplement de le dupliquer, pour Control D ou mieux encore, je peux y aller. Quelque chose ne va pas avec mon XD pour le moment. Je suis vraiment désolée pour ça. On y va. Ce sera donc notre première rangée. Encore une fois. Ce sera notre rangée du milieu. Voilà. Et je vais allumer ma pile. Je peux aussi activer la pile de 38 unités ici. Dupliquons donc ces deux. Et mettons 38 car c'est la distance entre nos colonnes. Contrôlez D une fois de plus, et positionnez-le de manière à ce qu'il soit en bas. N'oubliez pas que nous avons huit voitures, donc nous aurons 32 ans et nous nous débarrasserons de cette dernière. Ce sera donc notre dernière ligne. Voilà. Et enfin, il est temps pour nous d'ajouter toutes ces informations. Donc, en termes d'informations, ce que je veux faire, c'est que ce sera Tesla, et disons que c'est impitoyable tout de suite. Mais d'abord, copions les informations, ce sera beaucoup plus facile de cette façon. L'année automobile sera donc 2021, c'est très bien. Et le kilométrage sera de 40 000 km. Alors appelons-le Tesla. La prochaine sera Porsche. Et cette dernière sera McLaren. Donc, pour la Porsche, ce que je peux faire, c'est sélectionner et j'ai insisté. Ce sera le prix. De toute évidence. Lorsque vous créez un tel design, vous devez vous assurer de positionner vos prix manière uniforme, car il est évident que McLaren sera beaucoup plus chère que la Porsche, par exemple et la Tesla. Vous devez donc vous assurer de sélectionner ces prix et tous ces éléments en fonction de la dette. Le kilométrage sera donc assez faible. 2020 est l'année. Voilà. Ce que je peux faire tout de suite , c'est utiliser mes images. Donc McLaren numéro trois. Et n'oubliez pas que j'utilise le numéro trois pour chacun d'entre eux. Porsche numéro trois. Ce sera donc la Porsche Cayenne, et enfin la Tesla Model X. voilà. Avant de passer à ceux-ci, appuyons sur Control K, Control K, Control K pour les transformer en composants. Passons à notre état, appelons-le survoler, sélectionner Contrôle C. Et je vais faire de même pour ici, donc survolez, survolez également celui-ci. Ce que je vais faire dans sa propriété, c'est simplement sélectionner mon aquarelle et la porter à 100. Fais de même ici. Portez-le à 100, et faites de même ici. Portez-le donc à 100. Et maintenant, quand je passe par défaut, par défaut, par défaut, cela va revenir en arrière. Enfin, passons à ces deux dernières cartes, et cette dernière sera Cadillac. Appelons ça comme ça. Donc Cadillac ou mieux encore, allez voir TSV car nous avons déjà une Cadillac au top. Celui-ci va être un peu moins cher. Peut-être que dans le cadre de cet échange partiel que j'ai mentionné, nous serons en 2019. 2019. On y va. Et le kilométrage va être assez élevé. kilométrage dû à l'année de production sera 2021 et ce sera un Range Rover Evoke. Et enfin, amenons-en là et le kilométrage sera compté dans celui-ci. Voilà. Donnons-lui donc le nom. Disons que la ville compte trois habitants. Ce sera une gamme comme celle-ci. Et enfin, introduisons les images. Que sont le Range Rover USA numéro trois, glisser-déposer Insight et pour Cadillac, passons au numéro trois, glisser-déposer à l'intérieur. Alors on y va. Maintenant que nous avons fait tout cela, nous pouvons utiliser les sections restantes dont nous avons parlé précédemment et simplement les afficher. Sélectionnez donc toutes les sections restantes, déplacez-les jusqu'ici et assurez-vous que nous sommes à 200 d'ici. Quelque chose comme ça. Je pense que ça va très bien fonctionner. Ouaip. Et c'est en gros tout. Tout ce que nous avons à faire, c'est simplement fermer cela. Et si vous vous en souvenez, je déteste tout simplement cette fonction de x dy. Mais que peux-tu y faire ? Parce que je dois le faire manuellement, vous n'êtes pas obligé de le faire. Vous pouvez simplement les laisser tels quels car cela n'a pas vraiment d'importance. À l'intérieur de Webflow, nous allons définir le plafond de l'espacement en bas de la marge. Et il respectera cette marge sur chaque page. C'est donc beaucoup plus simple à développer qu'InDesign, mais néanmoins, certains. Voici notre pont. Donc, si je sélectionne ma page de cours, vous mets au courant. Une fois de plus, nous avons sélectionné des voitures ici, des prêts et contactez-nous. Nous pouvons toujours passer la souris sur le bouton pour les voitures exclusives. Voilà. Nous avons donc maintenant cette image avec un joli cercle bleu en arrière-plan , tout droit vers nos voitures. Nous pouvons donc planer sur chacune de ces voitures. Vous pouvez voir que l' effet de survol fonctionne très bien sauf sur ces deux-là. Et passons à ce que la tâche de contact fonctionne, fonctionne, fonctionne, tout fonctionne. Nous avons donc oublié de le faire sur celui-ci. Alors revenons en arrière. Contrôle K, contrôle K. Transformons cela en un état de survol comme celui-ci. Et activons également ce CSV sur Horace State, en survolant. Je vais ramener cette couleur de bordure à 100. Et sur le Range Rover, voyons voir, aquarelle jusqu'au 100. On y va. Revenons-les aux valeurs par défaut. Par défaut. Et voyons un aperçu de notre page une fois de plus. Voyons donc les voitures, les prêts nous contacter. Tout fonctionne bien. On y va. Et passons maintenant le curseur dessus. Il y a un peu de retard dans le survol, mais ne vous inquiétez pas. Nous allons corriger cela dans Webflow, afin de ne pas perdre trop de temps dans la conception elle-même. Enfin, ce que je veux faire, c'est simplement augmenter. Appelons donc le cercle VG de cette voiture. Et je vais le positionner ici. Et peut-être donnez-lui le nom de la section promotionnelle ou des voitures pour presque la section, quelque chose comme ça. Ensuite, nous avons notre sélection et nous avons tous nos autres éléments. Alors on y va. C'est notre page pour cette vidéo. Dans la prochaine, nous allons concevoir une page de détails de carte de débit dans laquelle vos utilisateurs cliqueront sur l'une de ces cartes pour ouvrir et en savoir plus sur la voiture en question. Et c'est ce que nous allons aborder dans la prochaine vidéo. Alors je t'y verrai. 141. Page de détails de la voiture: Allons-y maintenant et créons la page détaillée de cette voiture ou la voiture sélectionnée, comme vous voulez l'appeler. Revenons à XD. Et là, ce que je vais faire tout de suite , c'est qu'au lieu de dupliquer celui-ci, je vais dupliquer le héros trié la page d'accueil parce que je vais réutiliser cette section. Appelons-la donc, par exemple voiture sélectionnée. Et voilà. À l'intérieur de la carte sélectionnée, je vais me débarrasser à nouveau de certaines de ces sections, alors appuyez sur Supprimer puis sur Supprimer. Je vais garder celui-ci, supprimer, supprimer, et je vais conserver toutes ces sections. Ce que je veux faire ensuite, c'est peut-être, voyons voir, peut-être que nous pouvons l'étendre un peu jusqu' à parcourir 200 distances. Et voilà. Et ce que je vais faire, c'est simplement étendre mon tableau d'art beaucoup plus bas, car nous aurons un peu plus d'espace pour travailler ici. Donc, ce que je vais faire maintenant, c'est choisir une voiture. Peut-être que je pourrais choisir un Range Rover ou quelque chose comme ça. Donc, ce que nous pouvons faire dans ce cas c'est parce que nous allons créer la disposition à deux colonnes. Une colonne contiendra tout le contenu. Il y aura donc des images, une vue d'ensemble, une description, des informations sur les spécifications du véhicule. Tout cela se trouvera sur la gauche et sur la droite Nous aurons cette carte qui aura une mise en page autocollante, qui suivra de haut en bas. Une fois que nous commencerons à faire défiler la page sur ordinateur ou sur mobile, cela changera et cela apparaîtra en bas de la page. Et c'est ce que nous allons créer maintenant. Donc, si nous vous ramenons ici, nous avons une disposition en deux colonnes. Commençons donc à travailler avec elle. Sélectionné maintenant. Eh bien, permettez-moi de commencer à créer certaines de ces images. Positionner quelque chose comme ça. Parce que si nous le prenons ici, vous pouvez voir que nous avons une image, puis en dessous nous avons quatre images différentes. Ensuite, la carte défile de haut en bas, et elle sera positionnée un peu plus tard dans le Webflow. Alors, endettons-nous. Créons cela très rapidement. Donc, pour cette première image, je peux lui donner un nom d'image, une image principale ou quelque chose comme ça. Et voyons voir, peut-être que nous pouvons lui donner 8,4 largeurs de colonne. Donc quelque chose comme ça. Nous pouvons donc avoir une disposition large en quatre colonnes ici. Et voilà. Et pour ce qui est de la taille, allons-y avec, je ne sais pas, 437, quelque chose comme ça. Débarrassons-nous de la bordure, laissez-moi intervenir et positionner immédiatement mon image. Ce sera donc la première image. Alors laisse-moi le glisser et le déposer à l'intérieur. Et voilà. Et pour ce qui est de l' espacement par le haut, nous pouvons peut-être en choisir 40, peut-être encore une fois, donc quelque chose comme ça. Concentrons maintenant notre attention sur ces images, car nous avons huit colonnes. Maintenant. Quatre des images, chacune d'elles pouvait prendre deux colonnes de largeur. Alors faisons-le. Dupliquons celui-ci. Pour ce qui est de l'espacement, on peut opter pour 24. Je pense que ça va très bien se passer. Et ramenons-le jusqu'ici. Et ce sera l'image numéro deux. Positionnons-la à l'intérieur d' un groupe et appelons-la images de voitures. Donnons-lui une pile. Nous pouvons l'organiser un peu mieux. Et voyons voir en termes de distances, voyons ce que nous pouvons avoir. Alors peut-être qu'ici, ou qu'avons-nous ici, c'est que si je fais défiler la page vers le bas et que je me cache juste un doigt, vous pouvez voir que la largeur de la gouttière, c' est-à-dire la distance entre ces colonnes, est de 38. Donc cet espace vide entre les colonnes bleues. Et c'est ce que nous allons attaquer ici. Tapez donc 38. Et comme vous pouvez le voir, elle s' alignera sur la prochaine colonne disponible. Ce sera donc l'image numéro trois, Control D. Il y aura un numéro imagé pour n control dy dt sera l'image numéro cinq. Et voilà. Maintenant, permettez-moi de vous présenter rapidement ces images. Donc ça va être deux, ça va être trois, ça va être quatre. Et finalement, ça va être cinq. Et bien sûr, quand vous le souhaitez, vous pouvez cliquer sur ce bouton ici, que je ne pense pas que nous ayons créé. Maintenant, il y aura un bouton qui vous indiquera de voir toutes les images, par exemple si vous cliquez dessus, il s'agrandira et vous affichera une mise en page en forme de boîte lumineuse, que nous créerons un XD. Et c'est un standard dans Webflow. Nous n'y prêterons donc pas trop d'attention. Pour ce qui est de cette image de héros. Ce que je vais faire, c'est cliquer ici et taper, par exemple voir. Toutes les images. Transformez ce texte en bloc de texte. Et voilà. Position et à peu près ici. Et pour ce qui est du rectangle que nous allons utiliser ici, quelque chose comme ça. Débarrassez-vous de la chaudière. Et voyons voir. Appelez ça peut-être toutes les images en arrière-plan ou en tout cas la lumière du soleil. Antécédents amateurs. Et voilà. Voir toutes les images. Et puis en termes de distances et de tailles, nous pouvons peut-être opter pour le 50145145 puis le 50. Quelque chose comme ça. Et regroupons ces deux. Non, ça ne marche pas bien pour moi. Alors peut-être que je peux réduire cela et le réduire au paragraphe. Et voilà. Maintenant, cela fonctionne beaucoup mieux. Donc, si je m'assure qu' ils sont au centre, contrôlez G et tapez, par exemple voir toutes les images. Et pour ce qui est de l'espacement, on peut peut-être opter pour 24. Donc 12, 123-412-1234. Nous sommes donc 24 de chaque côté. Si je maintiens la touche Alt ou Option enfoncée, vous pouvez voir à quoi cela ressemble. Nous pouvons donc les regrouper pour les appeler image un, image un, et nous pouvons les appeler images de voitures, par exemple, et maintenant tournons notre attention sur ce site pour la carte elle-même. Donc, ce que je vais faire, c'est utiliser à nouveau notre outil rectangulaire et dessiner un rectangle rapide, quelque chose comme ça. Il aura une couleur de fond blanche. Et voyons voir, peut-être pourrions-nous arrondir les angles à huit, quelque chose comme ça. Débarrassez-vous de cette frontière. Nous n'en avons pas besoin. Et ici, nous pouvons l'appeler, par exemple barre latérale de la voiture et lui donner un nom, bien sûr, barre latérale, films PG, ici. Et ici, ce que nous pouvons faire, c'est créer cette étiquette que nous avons mentionnée. Je vais donc créer le texte. Débarrassons-nous de celui-ci. Et tapez Saloon, qui sera un type de voiture. Et je vais l'appliquer, le texte de l'étiquette. Et voilà. Et nous aurons l' arrière-plan étiqueté en pièce jointe. Créons donc un rectangle rapide. Encore une fois, donnez-lui un nom. Étiquette, BG. Et voilà. En dessous du texte. Je vais me débarrasser de la bordure et pour la couleur, je vais utiliser la couleur de la carrosserie. Donc, si je clique sur l'aperçu une fois de plus, vous pouvez voir qu'il a la couleur de la carrosserie et celle-ci a la couleur blanche, ce qui va juste le différencier et le faire ressortir un peu plus. Et vous pouvez voir à quel point nos images sont belles. Donc, pour ce qui est de la taille des antécédents étiquetés sur la dette, donc ce que je peux faire, c'est peut-être utiliser la taille 3034 pour la taille. Assurez-vous que c'est bien centré. On y va. Et j'ai un petit aperçu intéressant de la voiture, alors je vais le coller dedans. Et c'est l'icône du saloon. Je vais tout de suite en faire des composants. Assurez-vous qu'il s'agit d' une position comme celle-ci. Et pour ce qui est de l'espacement, ce que je peux faire, c'est peut-être le positionner à 16 de ce côté. 16. Pour ce qui est de l'arrière-plan étiqueté, je peux peut-être en mettre quatre pour le rayon d'angle. Donc pas huit car cet élément est assez petit, alors les distances ici peuvent être huit peut-être. Alors allons-y avec ça. Cela peut être une étiquette, icône, une étiquette que je peux empiler et tourner huit comme ça. Enfin, pour ce qui est de ces distances, je pourrais peut-être amener ces deux-là ici et leur donner une distance de 16. Comme si c'était le cas, on y va. Et maintenant, nous avons notre expérience en matière d'étiquette et le contenu de l'étiquette. Je vais donc appeler ce label, et appelons-le Saloon Label. Et voyons ce que nous pouvons y faire. Donc, pour la berline, je peux appuyer sur Control K. Ce sera donc notre état par défaut en termes de positionnement de cette étiquette, peut-être qu'il peut y en avoir 24 de chaque côté. Alors allons-y avec 24 puis 24 comme ça. Transformons-en une pile qui permettra de rembourser la dette que nous aurons besoin de créer demain. Je vais donc devoir créer le SUV, et je devrai créer les icônes des super voitures. Donc, ce que je peux faire, c'est simplement faire glisser ces icônes dedans. Voyons donc Solu, une super voiture, qui n'est pas cette supercar. Je vais le traîner ici. Et le SUV, je vais le traîner ici. Et voilà. Donc, ce que je peux faire, c'est utiliser ces icônes. Appuyez sur Control K, appuyez sur Control K. Et voilà. Et supprimez-les simplement d'ici. Donc, ici, nous avons le salon comme état par défaut. Ce que je vais faire ensuite, c'est cliquer ici pour l'état du SUV sur l'étiquette avant et le déplacer ici. Donc, à l'intérieur de l'état du SUV, je vais ouvrir l'icône de mon étiquette, sélectionner l'icône de mon solute et localiser l'icône de mon SUV, qui est celle-ci. Il suffit de le faire glisser et jusqu'à ce qu'il devienne bleu comme ça, je le lâche, il va se remplir. Et puis ici, tapez SUV. Et comme nous avons cette section de contenu, je vais la transformer en une section alignée à gauche. Revenez à l'état par défaut ici, sélectionnez mes textes, assurez-vous qu'ils sont alignés à gauche afin qu'ils s'étendent vers la droite et non sur tous les sites. Et voilà. Maintenant SUV, c'est parti. Donc, état par défaut, voyons voir, 24, 24, ça va. Alors allons-y, continuons comme ça. Et enfin, créons-en un pour la super voiture. À l'intérieur de celui-ci, saisissons, voyons voir, supercar. Et voilà. Et au lieu de Saloon, localisez simplement l'icône de la supercar faites-la glisser vers le haut jusqu'à ce qu'elle devienne bleue. Lâchez prise. Et nous avons maintenant une icône de supercar qui passe de la berline à la supercar. Il a l'air bien, mais le SUV est légèrement déplacé. Voyons où nous en sommes à ce sujet. Alors 24, voyons si nous allons bien maintenant, nous ne le sommes pas, donc nous devons encore nous assurer d'être là. Donc 24 à l'intérieur du SUV. C'est aligné à gauche, nous devrons donc le corriger manuellement. Mais ne vous inquiétez pas car dans Webflow, nous utiliserons simplement celui-ci. Donc, à l'intérieur du SUV, je vais juste le pousser ici. Comme vous pouvez le constater, comme le Range Rover est un SUV , nous avons 24 ans et commençons maintenant à ajouter nos éléments de texte. Alors tout d'abord, commençons par le nom. Donc un Range Rover, Voc. Et ce texte va être H trois. Donc 24, quelque chose comme ça. Et voyons où il se trouve. Donc étiqueté juste ici. Je ne comprends pas pourquoi ça ne s'affiche pas, mais peu importe. Positionnons-le de cette façon. Et voilà. Et les distances seront également de 24. Donc 24 et voilà, Ctrl D pour le dupliquer. Et celui-ci sera notre prix. Et le prix ne sera que le bleu principal. Et encore une fois, 24 d' ici, Control D est lubrifié. Ce dernier sera le texte de notre paragraphe, comme ça. Et à l'intérieur de cela, nous pouvons mettre des informations supplémentaires telles que la disponibilité pour le retrait. Maintenant, si ce n'est pas le cas, si c'est dans le transport, nous pouvons peut-être y mettre ces informations si nous le voulons. Mais il est disponible pour le retrait. Maintenant, nous pouvons simplement faire glisser notre composant où se trouve le bouton principal. Et voilà. Alors fais-le glisser. Et ce que nous pouvons faire, c'est nous assurer d'avoir 24 ans. Il en va de même pour tous ces autres éléments. Ici. Je peux taper quelque chose comme réserver cette voiture. Et voilà. Et en vol stationnaire, je vais également simplement saisir cette voiture de réserve. Et voilà. Et maintenant, ce que je peux faire, c'est dupliquer ce bouton. Assurez-vous que j'ai 24 ans. Double-cliquez ici. Oups, juste un. Et assurez-vous que nous sommes à 24 d'ici également. Comme un autre. Et voilà. Et avec ce bouton, je vais en fait dissocier le composant Dissocier. Et ce sera l'arrière-plan du bouton Outline. À l'intérieur de l'arrière-plan du bouton de plan, je vais simplement sélectionner mon texte, qui est ce texte juste ici. Et je vais taper uniquement les options C. Et voilà. Et pour cela, ce que je peux faire, c'est le regrouper, appeler outline ou BTN, outline. Comme ça. Et seules les options C auront une couleur de disque. Alors peut-être ce gris foncé ou quelque chose comme ça. Oui, allons-y avec le gris foncé. Et le bouton n' aura pas la couleur de remplissage, mais la couleur de la chaudière sera gris foncé, quelque chose comme ça. Et voilà. Appuyez sur la touche Ctrl K pour en faire un composant. Créez maintenant un état de survol pour celui-ci. À l'intérieur de la couverture, nous changerons cette couleur en peut-être un paragraphe h3 et changerons également la bordure de notre bouton en paragraphe HD. Il va donc juste se différencier un peu plus. Donc, si je prévisualise cela très rapidement, vous pouvez voir que cela fonctionne et que cela fonctionne aussi. Nous avons donc maintenant ces deux-là. Encore une fois, la suppression restera en haut de la page et elle défilera juste un peu vers le bas. C'est donc ce que nous allons faire. Regroupons rapidement tous nos éléments. Nous allons donc sélectionner l'étiquette. Range Rover indique ci-dessous le prix indiqué sur l'étiquette pour le retrait, alors que nous avons notre bouton principal. Nous avons le contour des boutons. Voilà, la barre latérale du chariot, sélectionnez-la en entier, Control G ou Command G. Et nous allons appeler cette barre latérale de voiture. Et voilà. Et mets-le juste derrière. Maintenant, nous avons nos images et nous pouvons les placer, par exemple dans un groupe, dans un groupe principal. Appuyons donc sur Control G et appelons-le, par exemple contenu automobile. Informations sur le contenu de la voiture ou sur l'inflammation de la voiture. Tu peux l'appeler comme tu veux. Je vais juste appeler ça du contenu automobile. Et voyons 24 de chaque côté. Je peux peut-être même étendre ce bouton. Donc, ce que je peux faire dans ce cas est peut-être étendu au B24. Mais pour cela, je vais devoir dissocier ce composant. Commençons donc par celui-ci. Voyons où nous en sommes. 22, 24, et voilà. Et si je passe au survol, cela a changé parce que je voulais prendre toute la largeur de cet élément parce que c'est à cela qu'il ressemblera plus tard dans Webflow. Et pour celui-ci, ce que nous pouvons faire, c'est voir, dissocier, grouper, appeler main btn, appeler main btn, et peut-être lui donner une classe de large ou quelque chose comme ça , appuyer sur Ctrl K. Ensuite, étendre cette valeur pour l'adapter ça et crée un joli petit état Horace. Appelez ça : planez dans l'état d'horreur. Ou nous devons simplement changer la couleur du survol et le ramener à la chèvre laitière principale. Et maintenant, lorsque je prévisualise, nous avons un peu plus d'espace ici, à l'intérieur de notre carte. Ainsi, lorsque je survole la souris, vous pouvez voir que les informations semblent un peu plus lisibles qu'avant. Je vais donc arrêter la vidéo ici. Et dans la prochaine vidéo, nous allons continuer à créer cette section car nous aurons beaucoup de contenu ici. Comme nous en sommes déjà à 17 minutes de cette vidéo, nous allons continuer. Alors je t'y verrai. 142. Conception de boîtes lumineuses: Lorsque vous cliquez sur cette grande image, vous voulez pouvoir voir toutes les images et simplement les faire défiler vers la gauche et la droite entre elles. Et c'est ce que Light Box vous permettra de faire dans Webflow. C'est très simple à faire. Il sera un peu compliqué plus tard de le connecter au CMS. Mais en termes de mise en page, c'est simple car le composant est déjà là. Mais pour afficher quelque chose comme ça dans XD, vous devez le concevoir. Passons donc à XD justement à cela. Nous voici donc dans Adobe XD. Et ce que je vais faire pour celui-ci, c'est créer une page complètement différente. Appuyez donc sur Ctrl D ici pour dupliquer celui-ci et l'appeler boîte à lumière. S'il veut créer, s'il veut travailler sur moi. Essayons donc à nouveau. Allez. Boîte à lumière. On y va. Charmant. Et je vais juste réutiliser ces images. À partir de là, je vais dissocier cela. Mettez les images dessus comme ça, et débarrassez-vous de tout le reste comme ça. Ensuite, je vais le plafonner à la taille d'origine, qui est celle-ci. Il suffit donc de double-cliquer et de réduire la taille à quelque chose comme ça. On y va. Alors peut-être 1080 ou quelque chose comme ça. Donc, si je clique sur Aperçu, vous pouvez voir à quoi cela ressemble. Nous ferons une boucle. Ensuite, ce que je vais faire, c'est me débarrasser de ça, voir toutes les images comme ça. Et peut-être que je pourrais même me débarrasser de celui-ci en le séparant. Et maintenant, ce que je peux faire, c'est peut-être les positionner un peu différemment. Donc, dans ce cas, ce que nous pouvons faire, c'est peut-être, voyons voir, peut-être que nous pouvons créer un joli arrière-plan ici. Créez donc l'arrière-plan et dissocions-le également. Dissociez donc, ce sera une lightbox. Bg. On y va. Et je vais le positionner de manière à ce qu'il soit sur toute la largeur de notre tableau d' art. On y va et on se débarrasse de la frontière. Et pour ce qui est de la couleur, allons-y, je ne sais pas, quelque chose comme ça. Peut-être une opacité réduite à 80 % ou quelque chose comme ça. C'est donc un peu transparent comme ça. Enfin, ce que je peux faire, c'est peut-être expérimenter avec la taille de cela. Peut-être jusqu'ici. Voyons voir. La hauteur peut donc être de 6609. Ici, ça marche bien. Assurez-vous que c'est dans un centre. Ça a l'air bien. Et ici, ce que je vais faire, c'est parce que nous avons 12345, je vais en créer davantage. Donc Control D 67.8. Je vais donc localiser les images de mon Range Rover. Alors, images de voitures, localisons le Range Rover. Nous avons donc 12345. nous en faut donc six maintenant. On y va. Alors il nous en faut sept. On y va. Et enfin, il nous faut le numéro huit. Charmant. Une dernière chose que je veux faire est de sélectionner mon x ou mes vêtements à partir d' ici et de les positionner approximativement ici. Voyons voir, nous avons 56 ou 49 ans. Donc, poussons-le pour qu'il soit au centre, en gros, pour que cela n'ait pas vraiment d' importance dans ce cas particulier. Parce qu'une fois de plus, light box possède son propre stock ou mise en page qu'elle suit dans Webflow. Et pour cette mise en page, nous avons peut-être besoin de la positionner au centre comme ceci, ce qui, je pense, fonctionne pour ce cas. Ce que nous pouvons également faire, c'est peut-être le réduire à 64, comme ça. Et peut-être placer ça au centre entre nos vêtements et ces images, c'est parti. Une dernière chose que nous allons vouloir faire pour cette mise en page dès maintenant est de simplement nous connecter. Vérifions-y rapidement. On y va. Donc, ce que je vais faire maintenant, c'est quand quelqu'un clique sur cette image, par exemple sur cette image principale. Et voilà. Je vais passer en mode prototype. Cliquez et faites glisser cette poignée bleue vers ma nouvelle lightbox, notre port. Et ce que je vais faire au lieu de faire la transition, je vais choisir Overlay, qui consiste simplement à le superposer sur notre tableau d'art. Animation. Peut-être que nous pouvons glisser vers le haut ou vers le bas ou simplement appuyer sur Aucun. Cela n'a pas d'importance. Ou nous pouvons choisir de dissoudre peut-être ou quelque chose comme ça, mais allons-y sans. Et lorsque vous cliquez quelque part en dehors de cette planche d'art, vous obtenez cet effet de glissement qui disparaît tout simplement. Alors testons-le. Ainsi, lorsque je sélectionne cette planche d'art et que je clique sur Aperçu, nous ne pouvons rien voir. Nous pouvons donc faire défiler l'écran vers le bas, explorer toutes ces informations. Mais quand je clique ici, vous pouvez voir que la boîte à lumière se met simplement en place. Et bien sûr, vous pouvez ajuster ce composant, mais nous n'allons pas perdre trop de temps avec cette vidéo. Vous pouvez évidemment ajouter que lorsque je clique sur cette image, elle sera remplacée par cette image. Lorsque je clique, cette image sera remplacée par cette image, mais je dois créer un composant géant avec huit états différents. Donc, l'état un sera imagé numéro un, l'état deux sera imagé numéro pour rester trois et ainsi de suite. Mais je ne veux pas trop vous ennuyer. Ce qui est important ici, c'est que lorsque je clique ici, ça va tout simplement disparaître. Donc, à tout moment, je peux revenir en arrière, cliquez ici, ça va l'afficher. Mais quand je clique ici, ça va disparaître et ça va me ramener là-bas. C'est pourquoi il est très simple créer ce composant de boîte à lumière. Citons sur Enregistrer notre design et ce que nous pouvons créer. La prochaine page est peut-être celle de nos prêts. Les prêts étant très importants, nous allons quand même réutiliser certains de ces éléments. Et nous aurons cette section, cette section, et cette section qui sera différente et toutes ces autres sections seront identiques. Je vous verrai donc dans la prochaine vidéo où nous allons commencer par la section des prêts. 143. Page de prêts: Allons-y maintenant et créons la page consacrée aux prêts car, comme je l'ai mentionné précédemment, ils travaillent avec des partenaires extérieurs pour les poumons, ainsi que pour le transport des prêts car, comme je l'ai mentionné précédemment, ils travaillent avec des partenaires extérieurs pour les poumons, ainsi que pour le transport des des voitures, des agents des douanes et d'autres choses de ce genre. Passons maintenant à XD et travaillons sur la page des prêts. Nous voici donc de retour dans Adobe XD. Dupliquons une fois de plus l'une de ces pages. Nous pouvons donc peut-être utiliser ce contrôle D. Et je peux appeler cela un prêt. Et si vous voulez une meilleure cohérence, vous pouvez déplacer cela jusqu'ici. Et bien sûr, l'animation fonctionnera toujours correctement car si je repasse au prototype, vous verrez que cela est toujours connecté. Donc, peu importe où vous le déplacez, il fonctionnera toujours très bien. Donc, dans ce cas, nous allons choisir nos voitures. Dans ce cas, passez à l'état par défaut, accédez aux prêts sélectionnés car il s'agit de la page sélectionnée. Après tout. Et voilà. Et maintenant, ce que je vais faire c'est apporter quelques ajustements. Je n'ai donc pas besoin de cette section supérieure, mais utilisons-la en fait. Mais je vais juste me débarrasser de ces images, il va falloir encore vérifier ça. Et ça va se passer seul. En fait, non, revenons un peu en arrière. se passe donc quelque chose. Alors allons-y et débarrassons-nous de celui-ci. Ce sera donc au lieu de la section des promesses de voitures, ce sera une section des promesses de prêts. On y va. Et ici, nous allons simplement utiliser le même texte, la même position, des prêts pour la voiture de vos rêves. Débarrassez-vous de cette section car nous n'en avons pas besoin. Et nous aurons ces sections en bas. Mais allons-y et étendons notre tableau d'art juste pour toucher et déplacer légèrement ces trois sections vers le bas, quelque chose comme ça. Ensuite, nous nous occuperons du positionnement un peu plus tard. Ici, nous allons utiliser ces deux images, que j'ai mentionnées. Je vais donc utiliser celui-ci du Range Rover, et je vais utiliser celui-ci de l'Audi RS 5. Et je vais aller de l'avant et inverser la tendance en cliquant ici. Et je vais les positionner comme ça. Et voyons où nous en sommes. pouvons donc peut-être nous déplacer vers le centre de notre page maintenir la touche Maj Alt enfoncée et cliquer avec le bouton gauche de la souris pour les réduire de manière uniforme. Maintenant, ce que nous pouvons faire, c'est simplement les positionner un peu mieux. Donc ça va être là. Ça va être là. Et évidemment, nous devons en réduire la taille, encore plus, jusqu'à ce que nous obtenions l'apparence et la sensation que nous voulons. Peut-être juste ici, je pense que cela fonctionnera très bien. Oui, peut-être que je peux mesurer ça, juste une touche. Donc, pour en profiter par rapport à Audi, c'est très bien. Il suffit de les déplacer ici. Et pour ce qui est de l'espacement, je peux simplement les pousser jusqu'à ce qu'ils touchent la ligne du texte juste ici. ce qui est du texte lui-même, il est toujours maintenu à 40, ce qui, Pour ce qui est du texte lui-même, il est toujours maintenu à 40, ce qui, selon nous, fonctionnera très bien, mais je ne suis pas vraiment satisfait de l'Audi, alors peut-être que je pourrais la pousser légèrement. On y va. Je pense que cela fonctionne très bien. Alors voyons voir. à l'an 5, je pourrais peut-être augmenter. Juste une touche. En fait, non, laissons les choses comme ça et ne perdons pas trop de temps parce que je trouve ça très joli. La section suivante sera donc cette section ici. Donc nos offres et en dessous nous aurons nos partenaires. Examinons donc d'abord nos offres, et faisons-le d'abord. Prenons donc d'abord les textes. Je vais donc prendre le T ici et saisir quelque chose comme les meilleurs prêts du marché accordés par nos partenaires. On y va. Je vais le positionner au centre et m' assurer que nous sommes dans le H2. Accrochez-le au centre. On y va. Et voici ce que je vais faire ensuite c'est m'assurer d'être au centre. Enfin, assurez-vous que je ne suis pas 200, mais peut-être 150 sur ces images. Parce qu'une fois de plus, je veux être en mesure de voir toutes ces informations juste au-dessus de la faille, ce qui, je pense, est très important des raisons de référencement et pour des raisons de référencement et parce que vous souhaitez que vos informations être lisible à tout moment si possible. Donc, voici ce que nous allons faire, c'est le refaire une fois de plus. Passons donc à la commande D. Cela du panneau Layers. Et je vais taper quelque chose de simple et pratique, mais en faire le H3 Control D dessus. Déplacez-le au centre et choisissez peut-être plusieurs options de paiement, Control D une fois de plus. Et cela peut être une tranquillité d'esprit. Nous faisons donc essentiellement exactement la même mise en page que nous l'avons fait. Où le faisons-nous ? Comme nous l'avons fait ici. Nous pouvons donc simplement le prendre et le colorier à nouveau si nous le voulons, mais je vais juste le recréer directement du haut. Donc, ici, je vais appuyer sur Ctrl D pour choisir les textes des paragraphes ici. Et pour les textes des paragraphes, ce que je peux faire, c'est choisir ceci ici et peut-être que je pourrais le changer gris foncé juste pour apporter une légère modification. Il n'a donc pas exactement la même apparence que le texte en haut. Contrôle C, contrôle V. C'est parti. Et maintenant, ce que je peux faire avant de passer à plus de contenu et d'informations, c'est de pouvoir coller ces icônes en place, d' accord, ici et là je vais choisir celle-ci, la coller juste ici. Et enfin, je vais choisir celui-ci, le coller ici. Passons maintenant à nos couches. Donc, tout d'abord, nous allons avoir 24 distances entre chacun d'eux. Donc ici, ici et ici, nous pouvons voir que nous sommes 24 dans chacun d'entre eux, ce qui est très bien. Parlons simplement de ces icônes. Assurez-vous qu'ils sont alignés en bas. Et voyons 24. On y va. Maintenant, ce que je peux faire, c'est simplement les regrouper. Regroupons-les donc. Regroupons ces analystes dans ce groupe. Et je peux les transformer en piles, ce qui va juste les organiser un peu bien pour moi. Je n'ai donc pas à perdre trop de temps à m'occuper ma mise en page et de tout le reste. Alors tout d'abord, positionnons-le au centre et faisons de même pour celui-ci. Sélectionnez donc tout, assurez-vous que c'est au centre. Et sélectionnez tout ici. Allez. On y va. Et assurez-vous que c'est juste celui-ci. Et assurez-vous qu'il est également au centre. On y va. Maintenant que c'est fait. La deuxième ira au centre et la seconde proposera plusieurs options de paiement. On y va. Le premier sera simple et pratique. Et le dernier sera la tranquillité d'esprit. Donc je prends juste le texte pour qu'il soit un peu plus rapide. Et enfin, comme le centre sera toujours au centre, cliquez ici. Mais pour les autres , utilisons cette astuce rectangulaire. Je vais donc juste le positionner ici. Cliquez ici, assurez-vous que c'est au centre. On y va. Et déplacez-le ici jusqu'à ce qu'il s' adapte à notre grille, plutôt. Donc. Sélectionnez les deux. On y va, et on se débarrasse de ce rectangle car on n'en a plus besoin. En termes d'espacement, ce que nous pouvons faire, c'est peut-être choisir 64. Je pense que cela fonctionnera très bien. Voyons où nous en sommes. Donc, juste comme ça, 64 ans, nous y sommes. Et comme nous utiliserons une grille dans Webflow, nous pouvons appuyer sur Control G ici et peut-être les appeler Loans Grid. On y va. Et appuyez une fois de plus sur Control G dans cette section. N'oubliez donc pas que nous sommes 150 parce que vous voulez être vu au-dessus de la faute. Déplacez-le ici. Et appelons cette section « leaders du marché ». Passons ensuite à la section suivante. Et pour gagner un peu de temps, je vais simplement réutiliser cette session depuis la page d'accueil Control C, Control V, et la pousser pour qu'elle soit identique à celle-ci. En fait, non, maintenons-la à 200 pour espacer les autres. Donc, voici ce que je vais faire c'est que ce sera une image isolée. Et cela peut être, voyons voir, nos partenaires. Nos partenaires. Parce que cette disposition est exactement la même que sur l'écran d'accueil. Je suppose que vous pouvez également le faire dans Webflow . Ainsi, au lieu de recréer encore et encore, vous pouvez simplement double-cliquer sur copier et simplement coller votre copie directement à partir du logiciel de conception de votre choix, dans ce cas, Adobe XD prête une image. Laissez-moi le localiser ici et glissez-le et déposez-le à l'intérieur. On y va. Peut-être, poussez-le jusqu'ici peut-être. Maintenant que c'est fait, laissez-moi choisir mes logos, les glisser-déposer à l'intérieur. Tout d'abord, réduisons-les à quelque chose comme ça ou, mieux encore créons des boîtes qui entoureront nos logos. Alors allons-y avec quelque chose comme ça, et donnons-lui les dimensions de 270 x 60. Et en termes de rayon d'angle, je peux me débarrasser de la bordure, mais en termes de rayon d'angle, je veux être capable Voyons l'épingle huit ici et huit ici, ce qui lui donnera en haut à droite et en bas à gauche de huit. On y va. Je peux le placer au centre de mon image. Voyons voir, peut-être 20 ou 24 ou même mieux de chaque côté. Et ce sera pour le bronzage, leur logo. Ce sera donc un porte-logo, quelque chose comme ça. Et dupliquons celui-ci car nous devrons le positionner ici. 24 de ce côté , comme vous pouvez le voir. Et ramenons-les ci-dessous à ici. Utilisez le bronzage, leur logo, redimensionnez-le, juste un mélange tactile. Nous sommes au centre de notre porte-logo, appuyez sur Control G. Ce sera le logo de notre meilleur partenaire. Encore une fois, il ne le renommera pas pour une raison quelconque. Je ne sais pas pourquoi. Essayons donc à nouveau. Meilleur partenaire, logo. Connaissez un sujet, mais au top. On y va. Et enfin, passons à suivante qui sera évidemment la plus basse. Commençons donc par l' aligner au centre et au centre et appuyez sur Contrôle G, dans ce cas. Et au lieu de boire, je vais lui donner une bouteille. Logo du partenaire inférieur. Oserons-nous y aller bien ? Vous pouvez donc voir maintenant que nous avons également cette page. Enfin, il ne nous reste plus qu'à sélectionner ces sections en bas de la page. Sélectionnons-les donc. Maintenant, organisons cela un peu mieux. Nous aurons donc nos partenaires juste en dessous de nos poumons. Nous aurons donc des prêts héros, une section promotionnelle, puis des prêts de compensation de marché sont des partenaires, ce qui n'est pas 170 et cela devrait être à 200. C'est parce que nous avons mis des logos en place. On y va. Et maintenant, permettez-moi de sélectionner ces trois et de les mettre en place jusqu'à ce qu'ils aient 200 ans. On y va. Et enfin, une dernière chose à faire est de le recadrer en B64. Oups, on y est presque. 64 ans, on y va. Maintenant que cette page est terminée, il ne nous reste plus qu'à créer la page Contactez-nous, ce qui sera évidemment très simple. Nous allons simplement réutiliser ces informations et simplement coller l'image à l'intérieur. Je te verrai donc dans la prochaine vidéo. n'ai vraiment pas besoin de créer la prochaine vidéo, mais je vais tout de même la créer certitude et vous donner quelques informations supplémentaires que nous n'avons pas abordées ici. Alors je t'y verrai. 144. Page de contact: Allons-y et concevons la page Contactez-nous. Comme je l'ai dit, ça va être très simple. Cela va être fait en quelques secondes car nous avons sauvegardé tous ces composants. Passons donc directement à XD et créons. Nous voici donc dans XD, mais je vais sélectionner celui-ci, Control D une fois de plus. Et poussons cela un peu plus loin car cela nous distrait pour une raison ou une autre. On y va et on le met en place. Maintenant, nous les avons tous. Donnons-lui donc un nom s'il veut le renommer. On y va. Contactez-nous. On y va. Et ici, ce que nous allons faire tout de suite c'est sélectionner l'état par défaut des prêts, sélectionner, nous, sélectionner sélectionné parce que c'est ce que nous allons sélectionner après tout. Et débarrasse-toi de celui-ci. Donc ceci, ceci et cela supprimeront toutes ces informations. Enfin, il nous faut simplement glisser-déposer une image à l'intérieur. Voyons quelque chose comme ça. On y va. C'est une fois de plus une image énorme d'Envato Elements et du recouvrement de créances, dont je vous ai déjà parlé et que je vous ai montrée. Nous pouvons donc le déplacer ici. En fait, je sais que nous allons le couper. Utilisons donc un rectangle d' une hauteur de 600, disons. Débarrassons-nous de la frontière. Maintenant, poussons-le droit vers le haut. Je veux dire le bas de notre navigation. Et disons que c'est le showroom d'araignées, peut-être parce que disons que c'est le showroom de cette entreprise. Et maintenant, à l'intérieur de cet espace réservé, faisons glisser et déposez cette image, double-cliquez et ajustez-la pour qu'elle s'adapte à peu près ici ou quelque chose comme ça. Oui, il suffit de lui couper les chaussures et je pense que ça marchera très bien. Enfin, la seule chose que nous devons faire pour l'instant est de le pousser vers le haut et de lui donner une distance de 100, par exemple parce que nous n'avons pas besoin que ce soit 200. Encore une fois, pour que tout soit juste au-dessus de la ligne de démarcation. Coupe-le à 64, peut-être 63, 65. On y va. Alors finalement, c'est tout. Notre conception est terminée et c'est par là que nous commençons. Nous avons donc commencé par une page d'accueil. Ensuite, nous sommes passés à la page du cours où nos utilisateurs pourront sélectionner les voitures qu'ils souhaitent lorsqu'ils seront redirigés vers ce rapport, appelé voiture sélectionnée, appelé voiture sélectionnée, où ils pourront voir informations supplémentaires. Ils peuvent même cliquer sur cette image pour être accueillis avec cette boîte à lumière. Et puis s'ils passent aux poumons, les les prêts seront fournies informations sur les prêts seront fournies ici même sur cette page. Et enfin, Contactez-nous, qui n'est qu'une simple page Contactez-nous. Alors voilà. C'est tout pour la partie design, en gros, plus ou moins. Dans la prochaine leçon, je vais vous montrer comment relier certaines interactions de base et quelques animations de base entre ces pages. Ainsi, lorsque vous le partagerez avec vos clients, ils pourront profiter au moins quelques transitions avant de passer à Webflow. Nous ajouterons quelques animations finales et nous serons vraiment va faire en sorte que ce site Web se démarque. Alors je t'y verrai. 145. Animer le design: Très bien, travaillons maintenant sur notre animation. Nous n'allons pas faire quelque chose fou parce que, comme je l'ai mentionné, nous allons le faire dans Webflow avec toutes les sections chargées et d'autres choses de ce genre. Mais vous devez quand même montrer à votre client quelque chose dans la partie design. Alors allons-y maintenant. Donc, dans XD, je vais tout d' abord passer en mode prototype, comme je le faisais auparavant. Et sélectionnez mes prêts ici. Donc, trouvez des objets, des prêts. Et ici, je vais cliquer sur cet avantage et simplement le faire glisser vers les prêts. Et au lieu d'une formule, parce que c'était la dernière interaction, je vais utiliser la transition. Utilisons, je ne sais pas, l'animation appartient. Peut-être que nous pouvons utiliser Dissolve, peut-être qu'il n'y a plus de point zéro, disons 4 s et faisons de même pour nous contacter. Cliquez donc sur faire glisser jusqu'ici, vous conserverez les mêmes paramètres. Maintenant, à l'intérieur de cette page, ce que je vais faire, comme vous pouvez le voir, est déjà connecté car nous utilisons le composant enfant de ce composant principal. C'est pourquoi j'ai dit dès le début que les composants sont extrêmement importants dans XD. Donc, sur cette deuxième page, parce que nous ne l'avons pas connectée aux éléments de navigation des voitures. Je vais juste le faire glisser jusqu'ici et vérifions-le ici. Il ne l'a toujours pas connecté ici car il s'agit du composant enfant. Nous ne pouvons pas le connecter ici car il se trouve déjà sur cette page. Ce que nous devrons donc faire, c'est connecter chacun de ces éléments. Voitures, faites-la glisser jusqu'ici, sélectionnez-la à partir d'ici, éléments de navigation, les voitures la font glisser ici. Et enfin, faites de même pour celui-ci. Si vous voulez gagner un peu de temps, vous pouvez le faire lorsque vous commencez à la page suivante. Donc, dans notre cas, lorsque nous avons commencé avec cette page de cours, nous devrions le faire à ce stade afin d'avoir la liberté de faire toutes ces choses. Donc, ce que nous allons faire ensuite, ce ne sont que quelques trucs très basiques. Alors explorez nos voitures. Ce que nous pouvons faire ici, c'est cliquer et faire transition vers cette section. Oui, faisons juste la superposition. Donc, juste quelques transitions de base. Regardez toutes les voitures, nous allons faire la même chose. Il va donc simplement passer à cette page. Et enfin, nous irons au Range Rover. Et lorsque je sélectionne la plage, elle clique et fait glisser le pointeur jusqu'ici. Et voyons ce que nous pouvons faire. Appuyez donc sur Transition. Oui, allons-y, passons à quelque chose de différent. Optons donc pour la transition au lieu de la transition, nous pouvons opter pour l'animation automatique et destination de la carte sélectionnée est supprimée, peut-être facilement. Maintenant, partons en toute simplicité , réservez cette voiture. Ce qu'il peut faire, c'est peut-être les amener sur cette page. Au lieu de l'animation automatique, nous allons simplement utiliser la transition Dissolve, afin que l'animation soit dissoute. Et enfin, sur cette page uniquement sur les options C, cela vous amènera simplement à la page des poumons ici. Et la quantité va envoyer le formulaire de contact. Évidemment, nous pouvons animer ces icônes en survolant et d'autres choses de ce genre. Mais comme je l'ai dit, nous n'allons pas trop nous embêter car nous avons déjà beaucoup travaillé. Donc, si je clique sur un aperçu rapide du test, cliquez sur les prêts pour accéder à la page de lancement. Cliquez sur Contactez-nous. Cela va nous mener à la page Contactez-nous. Cliquez sur les voitures. Et ce dont nous avons besoin ici, c' est de connecter cela non pas à la page d'accueil mais à la page du cours. C'est donc de ma faute. Alors voyons voir. Les voitures sont en fait connectées ici. Donc pas ici. Nous allons donc simplement le déplacer vers cette page. Ici. Nous allons le déplacer vers cette page. Et ici, nous allons le déplacer vers cette page. On y va. Et maintenant, cela devrait fonctionner. Nous sommes donc à présent chez nous. Donc, quand je clique sur deux voitures, je passe aux voitures. Prêts, revenons aux voitures. Et voilà, les prêts arrivent. Et la tâche de contact va passer à nous contacter. Une dernière chose que nous voulons, c'est connecter un logo pour retourner à la maison. Cliquez donc ici, nous en sommes à la dissolution. C'est bien. Sélectionnez un logo à dissoudre. Sélectionnez un logo, dissolvez-le. Nous allons sélectionner le logo et vous pouvez faire la même chose en pied de page. Donc ici, ici, parce que le composant d'origine trouve évidemment sur la page d'accueil elle-même, il ne fonctionnera donc pas de cette façon. Et enfin, on y va. Alors maintenant, lorsque nous le changeons et disons que nous visitons la page des prêts ou pas. Cliquez pour le modifier. Et quand je clique sur le logo, je rentre chez moi. Donc, Explore our cars va nous mener jusqu'ici. Cela va nous ramener chez nous. Voir toutes les voitures. Cela va nous emmener ici et jetons un coup d'œil au Range Rover. Donc, quand je clique ici, oups, ça va nous mener ici. Ce n'est donc pas bon. Alors changeons cela très rapidement. Donc, si je sélectionne cette option, au lieu des animations automatiques, je vais choisir la transition et destination est la même animation que Dissolve est sortie. C'est un bureau d'analyste. Donc, si je clique ici, localise mon Range Rover, que je localise mon Range Rover, je clique sur « C'est parti ». Maintenant que nous sommes en haut de la page, réservez cette voiture qui nous mènera à la page Contactez-nous. Alors, les voitures passent à nouveau au Range Rover. Options C uniquement. Ce discours va te prendre trop de temps. Donc, si je passe au pied de page, si nous cliquons sur le logo, cela nous amènera à la page d' accueil. Alors voilà. Il s'agit simplement d'une petite transition rapide et d'un petit cours intensif sur l'animation dans Adobe XD. Bien entendu, nous allons en parler beaucoup plus en détail dans Pipe Flow, où nous allons animer chacune de ces sections, chacune de ces cartes, nous allons animer un peu ou passez la souris sur les images. Nous allons animer toutes ces icônes volent en place. C'est juste pour vous montrer ce qui est possible dans Adobe XD. Évidemment, si vous ne travaillez pas sur quelque chose comme Webflow plus tard, vous ne faites que du design. Peut-être passer beaucoup plus de temps dans Adobe XD et animer, comme je l'ai dit, cette boîte à lumière, par exemple , ou ce type de formulaire Vous pouvez peut-être créer un état de composant distinct, quelque chose comme ça, juste pour donner à votre client un peu plus de valeur dans vos animations. Dans la vidéo suivante, nous allons parler de la façon d' exporter tous ces actifs pour Webflow. Alors je t'y verrai. 146. Exporter les biens: Voyons maintenant comment exporter nos ressources pour un développement ultérieur dans Webflow. Et je vais vous montrer quelques formats de fichiers, quoi ils peuvent être utilisés et comment structurer réellement vos fichiers pour vous offrir un meilleur cas d'utilisation car c'est vous qui allez à quoi ils peuvent être utilisés et comment structurer réellement vos fichiers pour vous offrir un meilleur cas d'utilisation, car c'est vous qui allez le flux de travail de développement. Mais surtout, si vous le configurez pour un autre développeur ou une autre équipe de développement puisse l' utiliser facilement. Passons donc à XD et montrons comment procéder. Nous voici donc dans Adobe XD et je vais simplement exporter certains de ces éléments. Donc, tout d'abord, ce que je peux faire, c'est sélectionner ceci car je vais exporter ceci, ceci et ceci en tant qu'éléments séparés. Je vais donc tous les sélectionner en appuyant sur Contrôle ou Commande E. Et ici, je peux sélectionner PNG, mais je ne vais pas vraiment le faire. Ce que je vais faire ici, c'est sélectionner ces deux. Donc, ces cercles appuient sur Control E. Et changeons rapidement ici. Permettez-moi de configurer le dossier ici, sur mon bureau, par exemple, et je vais le faire, disons une place sur les actifs. On y va. Laisse-moi te montrer celle que je vais faire. Donc, à l'intérieur de ce dossier, je vais créer un autre dossier et l'appeler images. Et une autre icône polaire. Et comme il peut s'agir d'images ou d'icônes, tout dépend vraiment de vous, mais dans ce cas, je vais leur mettre deux images. Maintenant, gardons-les aussi. Icône, sélectionnez le dossier et assurez-vous de sélectionner le SVG car cela permettra aux développeurs de conserver la capacité de l'éditeur plus tard, et pour vous-même, vous allez expérimenter un peu dans Webflow, des animations, des retards, des animations de parcours, etc. Mais si ce n'est pas simplement exportez , vous conserverez la même constance de qualité que celle que vous aviez ici. Parce que nous avons correctement nommé toutes nos couches. Il est très simple pour nous d'exporter tous ces actifs. Passons maintenant à autre et exportons certaines de ces icônes. Nous avons donc ici nos icônes, alors sélectionnons-les ici. Nous avons donc ici la garantie, la maintenance, les prêts. Ouvrez tous ces dossiers. Sélectionnez cette option. Oups, je n'ai pas créé le composant pour cela. Et ça. Et voilà. Alors maintenant, comme ils sont dans la pile, voyons voir. Oui, comme c'est la pile, je ne peux pas sélectionner celle-ci et celle-ci consiste simplement à tout sélectionner. Appuyez sur Ctrl E, SVG pour les icônes. Et voilà. Sélectionnez celui-ci ainsi que les icônes. Et sélectionnez celui-ci ainsi que les icônes. Vous remarquerez que j'ignore ces images pour le moment, mais cela ne fait aucune différence. Appuyez donc sur Ctrl E pour exporter celui-ci. Appuyez ensuite sur Ctrl E pour exporter celui-ci. Tous au format SVG, et enfin celui-ci au format SVG. Et voilà. Passons maintenant à ici. Alors, comment vous adressez-vous ? Appuyez donc sur Control E, exportez, sélectionnez le téléphone, et voici l'icône du téléphone. C'est donc intime. Contrôle K, contrôle E. Exportations. On y va. Et les heures d'ouverture, cliquons sur le renommer pour voir, le téléphone. J'ai fait une erreur. Laisse-moi te le montrer. Téléphone à icônes. Permettez-moi de m'en débarrasser car je transforme tout ce texte avec l'icône en composant et je ne veux pas le faire. Donc, ce que je vais faire, c'est revenir ici, Z pour annuler cela, sélectionner l'icône du téléphone, appuyer sur Contrôle E. Maintenant, exportez-le. C'est très bien Et faites de même pour les heures d'ouverture. Donc, au lieu de tout, je vais simplement sélectionner l'icône de l'horloge, Control-V. C'est parti, et l'icône de l'horloge a été exportée. Maintenant, laissez-moi fermer cela et sélectionnons ces icônes en bas. Nous les avons donc, je vais les sélectionner tous contrôlant E SVG. Et la dernière chose que je veux faire est également d'exporter mon logo au format SVG. Parce que je veux garder cet acompte. La carte est quelque chose que nous allons mettre à jour plus tard et intégrer directement dans Webflow Solids traite les images. Tout d'abord, nos avantages pour le contrôle de l'image E. Et au lieu du SVG, je vais choisir le JPEG cette fois en raison du meilleur taux de compression. Revenons donc aux images. Sélectionnez un dossier, cliquez sur Exporter. Faites de même pour cela. Donc, ce que nous proposons, et je ne vais pas les exporter car je les ai déjà dans des dossiers séparés. Je vais sélectionner celui-ci. Julie, on y va. Et enfin, sélectionnez celui-ci. Mais au lieu d'un fichier JPEG, car il a un arrière-plan transparent, je vais le sélectionner comme exportation au format PNG. On y va. Il ne nous reste plus qu'à faire de même pour toutes ces différentes pages. Ici. En gros, nous n'avons rien à faire parce que nous avons tout sélectionné. Mais ici. En fait, sélectionnons ceci, transformons-le en. Maintenant, sélectionnons d'abord l'image car nous sommes dans ce dossier. Exportez à nouveau le PNG car il s'agit d'un arrière-plan transparent. Ici. Passons au SVG et changeons de dossier. Passons aux icônes. On y va. Sélectionnez Exporter des dossiers. Je ne vais pas toucher à ces images. Tout le reste ici va bien sauf ça. Alors traitons-en un peu. L'icône du SUV a donc cliqué sur SVG. On y va. Je vais changer de label car n'oubliez pas que nous avons trois de ces icônes. Passons donc à l'exportation de supercars. Passons à l'état par défaut pour une berline. Icône du salon. On y va. Ici, je vais le remettre en SUV et simplement l'aligner sur le reste du contenu ici. S'il veut craquer. On y va. Donc, tout a l'air plutôt sympa. Je ne vais pas m'occuper de ces images. Et passons rapidement à ces icônes car il y en a beaucoup ici. Mais pour accélérer légèrement mon processus, je peux essayer de tous les sélectionner tout en supprimant la pile de chacun d'eux. Si nous essayons de le faire, nous y voilà. Cela va donc supprimer la pile de chacune d'elles, ce qui me permettra de sélectionner plusieurs icônes en même temps. Donc, si je les ouvre, je peux sélectionner, sélectionner, sélectionner. En fait, non, ouvrons tout cela. Donc, sélectionnez, sélectionnez, sélectionnez, et je maintiens la touche Contrôle enfoncée pendant que je fais cela d'ailleurs. Et il contrôlerait les icônes E SVG. On y va. Vous pouvez maintenant les remettre en piles si vous le jugez nécessaire. Mais je ne vais pas trop m'en soucier. Tout est exporté, c'est très bien. Voyons si nous avons d'autres icônes. Essayons donc d' exporter ceux-ci. Donc touche Ctrl sur celui-ci, Control K sur celui-ci, et control K sur celui-ci. Voyons voir, parce qu'ils sont empilés, je crois. Pour une raison ou une autre, oui, c'est empilé. Alors peu importe, exportons un par un. Je ne veux pas perdre trop de votre temps et du mien également. Nous en sommes déjà à presque 8 minutes de cette vidéo. Et vous pouvez voir que ce processus se répète encore une fois. Voyons donc si j' ai d'autres icônes. Je n'accepte pas l'icône de fermeture ici. Mais je ne vais pas l'exporter car, comme je l'ai dit, Webflow contient son propre composant lightbox. Passons maintenant aux images. La dernière exportation d'image était donc celle-ci. Je ne vais pas l'exporter car nous les avons déjà dans des dossiers. Passons donc à ces questions. Sélectionnez donc ces deux contrôles E. Transformez-le en PNG car il a à nouveau un arrière-plan transparent. Et passons à nos images. Sélectionnez, appuyez sur Exporter, puis sélectionnez ces trois options. Comme ça. Au lieu du PNG, je vais choisir le JPEG car ils ont tous leur propre arrière-plan, comme celui-ci, Control E, JPEG. Et voilà. Nous avons exporté tout ce dont nous avions besoin pour exporter depuis notre fichier exporter depuis notre fichier afin de pouvoir le créer dans Webflow. Vous pouvez donc voir à quel point c'est simple, surtout si vous gardez une trace de ce que vous faites, où vous le faites. Et si vous positionnez correctement ces éléments, ne les nommez pas correctement. C' est donc comme si c' était rapide de l'exporter sur notre bureau et de commencer à préparer Webflow. Voilà pour le design. La dernière leçon, que je voudrais aborder un peu, est le responsive design. Dans cette section du cours, nous n'allons pas faire du responsive design dans Adobe XD, comme je l'ai mentionné, car ce serait une perte de temps. Néanmoins, je souhaite vous montrer comment travailler avec un design réactif en utilisant ces éléments Stacks et comment mieux planifier le responsive plus tard dans Webflow. Alors je t'y verrai. 147. Concevoir pour réactif: Enfin, abordons un peu notre design réactif. La conception réactive est essentiellement la façon dont design s'adapte aux différentes tailles d'écran, également appelées points de rupture. Et généralement, dans vos outils tels que Webflow, vous avez environ trois ou quatre points d'arrêt principaux, puis vous pouvez ajouter des points d'arrêt supplémentaires et entre ces points d'arrêt principaux, vous avez des points d'arrêt supplémentaires points d'arrêt. Donc, par exemple, pour la tablette, c'est le principal point de rupture, mais vous avez des tailles de tablettes supplémentaires, comme par exemple iPad est une surface, Samsung fatals une. Ils ont donc tous des points d'arrêt différents. Dans différentes tailles d'écran. Je vais donc vous montrer comment travailler avec cela dans XD. Nous voici dans Adobe XD, notre design est terminé. C'est ainsi que vous allez séparer de cette section où je vais créer toutes ces icônes, toutes ces couleurs, styles, styles de typographie, juste pour créer vous aurez la vie un peu plus facile lorsque vous aurez accès à ce dossier. Mais néanmoins, je voulais tout de même vous montrer comment travailler avec le responsive design ici. Donc, par exemple je ne sais pas, dupliquez cette page. Alors, contrôlez D juste là, appuyez sur la touche A de votre clavier pour obtenir un tableau d'art, et utilisons des tablettes. Utilisons cette taille de tablette, par exemple, et nous pouvons la sélectionner. Et choisissons les huit colonnes, par exemple, choisissons quelque chose comme 60 de chaque côté pour l'élargir un peu. Donc, ce que nous pouvons faire ici, c'est sélectionner notre navigation, en la basant ici. Et si la taille de l'écran le permet, nous pouvons simplement l'ajuster et le déplacer légèrement. Et puis peut-être pourrons-nous déplacer cette pièce jointe ici. C' est donc aussi facile de l'ajuster, mais je dois l'ajuster de ce côté, comme ça. Et puis double-cliquez sur l'intérieur et positionnez-le. Ces sections seront évidemment très simples car elles ne font que s'adapter à l'intérieur. Positionnez-le donc approximativement ici. Parce que nous avons maintenant un peu moins de taille. On peut peut-être y aller avec 32. On y va. Et maintenant, en termes d'image, passons un peu à quelque chose comme ça. Circle peut rester. Ou peut-être pouvons-nous déplacer l'image un peu vers le bas pour qu'elle puisse couvrir le cercle. Maintenant, changeons de position et permettez-moi de garder ce chiffre à 5 % obèses, afin que vous puissiez voir les choses un peu mieux. Ensuite, pour ce qui est de la section suivante, nous pouvons simplement la copier, coller ici, et le tour est joué. Maintenant que nous avons cette section, je vais m' assurer qu'elle se trouve au centre de notre tableau d'art, comme ceci. Mais maintenant, vous pouvez voir ce que nous avons. Nous devons donc ajuster chacun d'entre eux. Donc, pour ce qui est de cela, je vais le dissocier. Et je vais placer ces deux derniers en bas, juste ici. Et ça va aller ici. Déplaçons donc ces deux vers le bas. Ça ira ici, ça ira ici. On y va. Maintenant, ce que nous pouvons faire, car nous avons huit colonnes, chacune de ces cartes peut en occuper quatre, alors poussons-les à entendre. Imaginez-les entendre et poussez-les à entendre. Et bien sûr, ils peuvent tous parcourir environ 32 km. Nous allons donc les sélectionner et peut-être Nudge et 32. Et ça peut aussi être 32, comme ça. Enfin, pour ce qui est de la largeur, je peux simplement sélectionner toutes mes cartes d' un côté, comme ça. Et assurez-vous simplement que la largeur le couvre ainsi. Et faites de même pour ceux-là. Mais comme ils ont un effet de survol, nous n'avons pas besoin de l'effet de survol ici. Donc, vous pouvez soit les dissocier, soit si vous êtes trop paresseux, passer à l'effet de survol. Vous pouvez voir qu'il fonctionne, qu'il est revenu à son état d'origine. Et vous pouvez simplement prolonger la même chose que je l'ai fait ici. Mais mieux encore, il suffit de se débarrasser de l'effet de survol en les dissociant simplement en tant que composants. Ensuite, parce que nous avons ce formulaire de contact, par exemple, je peux le copier et le coller ici. Et comme nous avons besoin la couleur d'origine de ce site Web, donnons-lui une couleur de carrosserie. On y va. Maintenant, tout se passe bien comme il se doit. Donc, ce que je peux faire, c'est faire la même chose. Assurez-vous donc que c' est au centre. Assurez-vous de positionner ce bouton ici. Assurez-vous de le déplacer ici. Assurez-vous de le déplacer ici. Et maintenant, nous avons ces deux-là. C'est le responsive en un mot. Il vous suffit donc d'aligner ces champs dans la mesure où l' espace le permet. Et ils vont simplement s' empiler bien et occuper l' espace disponible où que l'espace se trouve. Réduisons donc ce formulaire et voyons ce que nous avons d'autre. Nous avons donc dans ce champ, donc copiez et collez. Mais pouvons-nous le faire ici Nous pouvons immédiatement le transformer en pile. Mais d'abord, dissociez-le car il s'agissait des composants d'origine. Dissociez donc Control G et transformez-le en pile. Et cela peut être par exemple là où nous en sommes si oups. tasses regardent où nous sommes. Et comme nous avons la pile, je peux simplement changer la position de la pile et faire passer la distance à 64. Peut-être. Voilà, vas-y. Et ce que je peux faire ici, c'est simplement l'aligner. Alors viens ici, viens ici, étends ça pour remplir toute la largeur. Peut-être réduire un peu la hauteur à quelque chose comme ça. Et ensuite, cela peut peut-être être transféré dans les centres. Alors peut-être que je peux le placer au centre et tout mettre sur une seule ligne de texte où nous sommes peut être au centre. On y va. Et maintenant, je peux peut-être localiser le contenu. Je peux le déplacer au centre de ma page comme ceci. Mais maintenant j'ai ces trois-là. Donc, ce que je peux faire avec eux, c'est les mettre en groupe, les empiler dans cette direction. On y va. Et maintenant, il suffit de leur faire entendre, dissocier ma pile, de venir ici, positionner ici et de s'assurer qu' elle est au centre. Et voilà. Vous avez maintenant une mise en page complètement différente. Ce que je peux faire, c'est placer ça au centre. Et tout cela est vraiment très beau. Certains, ce que je peux faire ensuite, c'est simplement ajuster mon pied de page. Donc, contrôlez C, contrôlez V pour le pied de page. Assurez-vous que c'est au centre. On y va. Et ajustez simplement ce que j'ai ici. Je ne sais pas pourquoi. Pour une raison quelconque, j'ai oublié d'ajouter le pied de page en tant que composant. Je ne sais pas pourquoi j'ai fait ça, mais peu importe. Parce que nous l'avons conservé tout au long de notre conception, mais gardons-le par souci de cohérence. Donnons-lui un contrôle supplémentaire C, contrôle V. Voyons où nous en sommes. 200. Et le pied de page ira ici. En fait. Pour ne pas perdre trop de temps. Permettez-moi de le faire un peu plus tard. Concentrons-nous maintenant là-dessus. Double-cliquez donc ici et déplaçons ces icônes de réseaux sociaux ici. Comme ça, déplacez ça au centre, comme ça, et déplacez-le ici et là, vous y allez. C'est à quel point il est très facile créer un design réactif et ajusté. Évidemment, vouloir et ne pas faire, c'est ne pas avoir fait la navigation parce qu'une fois de plus, je ne voulais pas perdre trop de temps. Utilisons donc ce logo pour une raison quelconque. Ça m'est en quelque sorte tombé dessus, juste ici. Je ne sais pas pourquoi, mais cela n'a pas vraiment d'importance. Donc, si je clique sur l' aperçu très rapidement, vous pouvez voir à quoi cela ressemble. Ainsi, au lieu d' une disposition en trois colonnes, nous avons maintenant une disposition en deux colonnes. Et comme nous sommes sur tablette, la meilleure idée est peut-être de dissocier ces composants, car vous ne pouvez pas passer le curseur sur la tablette parce que vous utilisez votre doigt et non votre souris. Et c'est la même histoire ici. Voici donc comment vous créez des designs réactifs organisant simplement ces éléments de haut en bas, de gauche à droite et en les déplaçant vers le bas. Déplacez celui-ci vers le haut, déplacez celui-ci vers le bas, redimensionnez-les en fonction de la largeur de votre écran. Parce que c'est la largeur qui compte. La hauteur n'a pas vraiment d'importance car la hauteur peut être infinie. C'est donc là que je vais terminer cette leçon sur le responsive design. Parce qu'une fois de plus, nous allons l'aborder de manière beaucoup plus détaillée dans Webflow. Il n'est donc vraiment pas nécessaire que je explique cela plus en détail ici, mais je voulais juste vous expliquer ce que vous pouvez faire dans Adobe XD et comment vous pouvez obtenir une partie de cette réactivité sur vos pages. Dans la vidéo suivante, nous allons commencer par Webflow car nous avons déjà exporté tous nos articles géniaux. Et je vais vous montrer comment démarrer avec Webflow, quoi il s'agit et comment vous y retrouver si vous ne l'avez jamais utilisé auparavant. Alors je t'y verrai. 148. Avenir d'Adobe Xd: Dans cette dernière leçon, avant de passer à Webflow, je voulais juste aborder l'avenir d'Adobe XD car de la récente nouvelle concernant l'achat de Figma auprès d'Adobe, je voulais juste vous donner mes 0,02 dollars car je suis également ambassadeur d'Adobe XD et je travaille en étroite collaboration avec l'équipe Adobe coulisse sur tout cela au fur et à mesure de son évolution. Donc, en gros, ce que vous devez savoir , c'est si vous savez comment concevoir, si vous connaissez la structure du design, si vous savez comment structurer le design du début à la fin pour qu'il les bons problèmes et aider le bon public. Vous ne vous souciez pas vraiment du logiciel que vous allez utiliser. Parce que si vous êtes un bon designer, vous pouvez même utiliser Microsoft Paint si vous le souhaitez, et vous continuerez à créer de bons designs. Peu importe donc le type de logiciel que vous allez créer et utiliser pour atteindre les objectifs que vous vous êtes fixés dans le cadre du projet sur lequel vous travaillez. En gros, ce qui va se passer, c'est au moment de l' enregistrement de ce cours, les discussions se poursuivent. Cet octet n'est donc pas encore définitif. En gros, ils devront quand même le rendre final. Ils doivent donc encore discuter avec les propriétaires de Figma, car il ne s'agit pas d'un seul propriétaire, mais de plusieurs propriétaires différents. Tout le monde doit être sur la même longueur d' onde pour que cette adhésion soit acceptée. De plus, les équipes juridiques doivent résider les unes avec les autres. Ils doivent signer un tas de documents différents. Et puis, s'il est réellement possible Figma fasse partie d'Adobe Creative Cloud, comme c'est le cas pour tous les autres produits Adobe, il doit y avoir quelques modifications et ces modifications doivent se produire dans Figma. Donc, en gros, les polices Adobe doivent être incorporées. Une meilleure optimisation de l'image et une meilleure inclusion des images doivent être incluses à l'intérieur. Certaines fonctionnalités 3D doivent être incluses, la vidéo doit être améliorée, de même que la prise en charge native du low T, que possède déjà Adobe XD, mais pas Figma. Au moment de l' enregistrement de cette vidéo, Figma vient donc d' introduire la possibilité de la vidéo, et Adobe XD avait déjà cette possibilité depuis plus d'un an. Donc, pour que tout cela soit adopté et qu'ils arrêtent XD, cela prendra environ un an et demi. Et d'ici un an et demi, vous serez en mesure de passer facilement à Figma, car Figma ressemblera beaucoup à XDR dans un an et demi, une fois intégrée à la suite Adobe Creative Cloud . En ce qui concerne XD et son arrêt, ils ne l' arrêteront pas du jour au lendemain. Et j'en discute tout le temps avec l'équipe Adobe XD à ce sujet parce que j' ai tous ces cours, toutes ces vidéos YouTube. Et j'ai besoin de le savoir, car beaucoup de mes étudiants me demandent quel sera l'avenir d'Adobe XD. Cela ressemblera à ceci : une fois que la transition aura commencé, ils supprimeront progressivement les mises à jour d'Adobe XD. Encore une fois, ils ne l' éteindront pas du jour au lendemain. Et au cours des deux prochaines années, XD existera toujours tel quel. Et il bénéficiera toujours de mises à jour de base de temps en temps. Et comme de nombreux utilisateurs utilisent Adobe XD, je pense que plus d'un nombreux utilisateurs utilisent Adobe XD, comme de nombreux utilisateurs utilisent Adobe XD, je pense que plus d' million ou deux millions d'utilisateurs utilisent Adobe XD au quotidien. Vous pouvez imaginer que toutes ces personnes seront vraiment en colère si vous éteignez leur outil préféré du jour au lendemain. Ils passeront donc lentement à Figma. Une fois que le Figma sera intégré à Adobe Creative Cloud, si tout est réglé d' un point de vue légal, évidemment. Et puis, une fois qu'ils auront éteint XD, l'idée sous-jacente est qu'il ressemblera beaucoup à Adobe XD. Les deux auront donc essentiellement l' air presque identiques. Seuls les outils auxquels vous êtes habitué dans XD ou dans Figma seront minuscules, légèrement différents. Par exemple, le positionnement de certains de ces éléments se fera ici plutôt qu'ici. Donc rien de trop important. Et la dernière chose que je veux aborder est la compatibilité des fichiers, car vous aurez toujours tous ces fichiers XD. Par exemple, j'ai créé un système de conception appelé Inception. Et vous pouvez le consulter sur mon site web, Alex, sur design.co. Et ce système de conception Inception est uniquement créé pour Adobe XD. Mais une fois que Figma fera partie d'Adobe Creative Cloud, j'espère que vous aurez la possibilité d' utiliser les fichiers XD de manière native directement dans Figma en raison de toute cette compatibilité croisée de fichiers qui Adobe Creative Cloud a. Parce qu'actuellement, vous pouvez ouvrir par exemple un fichier Adobe Illustrator dans XD. Vous pouvez ouvrir des fichiers Photoshop dans XD. Vous pouvez ouvrir différents ensembles d' icônes et images d'icônes Disons que dans InDesign, vous pouvez les importer dans Illustrator. Depuis Illustrator, vous pouvez les envoyer vers After Effects. Depuis After Effects, vous pouvez les envoyer à Premiere et ainsi de suite. Tous ces flux de travail doivent donc être mis en œuvre avant qu'Adobe XD ne soit définitivement arrêté. Et cela se produira au cours des deux prochaines années. Donc, encore une fois, pour en revenir au début de cette vidéo, l'objectif de ce cours n'est pas vous limiter à Adobe XD, vous montrer et de vous apprendre comment appliquer ces meilleures méthodes méthodologies utilisant le design thinking et utilisant le processus de conception. Ainsi, quel que soit l' outil que vous utilisez, vous serez toujours en mesure d'être le meilleur concepteur d'interface utilisateur utilisateur possible. Donc, une fois cela fait, passons à Webflow et passons à Webflow et commençons à construire à partir de l'intrigue Web. À présent. 149. Conception de site internet à Figma: Dans cette partie du cours, je vais vous montrer comment créer un design que nous venons créer dans Adobe XD, figma. Quelles sont les différences entre travailler dans XD travailler dans Figma, et quelles sont les deux que je préfère ? Pourquoi créer quelque chose comme ça en premier lieu ? Eh bien, s'il ne le savait pas déjà, Adobe a racheté Figma pour une énorme somme d'argent au cours des deux prochaines années, l' intégrera à sa suite d'outils Creative Cloud. Ce que cela signifie pour vous en tant que designer n'est fondamentalement rien du tout. Si vous savez comment utiliser Adobe XD, vous savez à peu près comment utiliser Figma, car ces deux outils sont exactement les mêmes, à l' exception de quelques fonctionnalités clés de Figma. Adobe XD ne l' a pas, et vice versa. Maintenant, ce que cela signifie pour Figma en général, qu' ils disent qu'ils n' y changeront rien du tout. Ça va rester pareil. Mais Adobe n'est pas digne de confiance, à mon avis, car si vous regardez simplement leur activité au cours des dernières décennies, ce qu'ils ont fait avec les macromédias, ce qu' ils ont fait avec Dreamweaver, ce qu'ils ont fait avec la démence et, récemment, ce qu'ils ont fait avec XD. Ils vont faire à peu près la même chose avec Figma. Cela signifie qu' ils vont lentement ajouter de nouvelles fonctionnalités à lentement ajouter de nouvelles fonctionnalités ces fonctionnalités existantes et en faire une sorte de version de Photoshop, comme ils le font avec tous leurs outils. Mais en tant que designer, nous devons nous adapter à ces tendances et à ces changements dans l'industrie. Et en fin de compte, ce ne sont que des outils. Donc, si vous avez suivi ce cours jusqu'à présent, vous avez constaté que le processus de conception ne se limite pas à la manière de travailler dans un outil de conception tel que XD ou Figma. ne s'agit que d'une toute petite pièce à la fin du puzzle. Une autre chose que je tiens à mentionner est que je vais vous montrer les deux flux car dans ce cours, nous aborderons Webflow dans la section suivante de ce cours. Et je vais montrer quelques différences : comment exporter fichiers depuis XD, puis travailler dans Figma, travailler dans Webflow et comment travailler directement dans Figma. Ensuite, il vous suffit de copier et coller votre design dans Webflow. Et pourquoi je ne pense pas que ce soit une bonne idée. À mon avis, vous devriez toujours exporter tous vos actifs et les recréer à partir de zéro dans Webflow, sauf si vous créez ces pages de destination très simples qui peuvent être recréées en 1 h ou 2 h ou quelque chose comme ça. À mon avis, ce plug-in vaut vraiment la peine d'être essayé. Et cela vaut vraiment la peine de passer de Figma à Webflow, mais pas l'inverse, pas pour ces pages, disons, complexes, car à mon avis, mais pas l'inverse, pas pour ces pages, disons, complexes, car à mon avis, si quelque chose doit se casser, si vous ne savez pas comment le réparer dans Webflow, vous allez vraiment trébucher. Assurez-vous donc de consulter la partie Webflow et voir comment la créer à partir de zéro. Et je ne vais pas réenregistrer cette section, car elle a déjà été enregistrée à partir de ces actifs exportés Adobe XD vers Figma, car c'est exactement la même chose. Encore une fois, l'image est une image, que vous l'ayez exportée depuis Adobe XD ou Figma, vous finirez toujours dans Webflow dans cet exemple particulier. Donc, comme je l'ai dit dans la leçon suivante, nous allons commencer par cette transition depuis XD Figma. Et je vais montrer quelques différences dans la façon de travailler avec les deux outils. Je vous verrai donc dans la prochaine leçon et commençons. 150. Tableau d'humeur: Très bien, moins que de passer à Adobe XD. Permettez-moi de vous montrer où nous en étions et où nous allons nous retrouver au cours de cette partie du cours. Nous voici donc dans Adobe XD et voici ce que nous avons créé jusqu'à présent. Comme vous vous en souvenez peut-être, nous avons créé ces wireframes papier pour créer des flux utilisateurs, plans de site pour l'architecture de contenu. Nous avons ensuite créé ce moodboard en copiant et collant des images provenant du Web. Et nous avons créé ce guide de style à la fin de notre projet. Maintenant, je ne vais pas aborder exactement les mêmes étapes car je les ai déjà créées et vous les probablement déjà regardées. Vous allez donc vous ennuyer car tout est exactement pareil. Ce que je vais faire dans cette partie du cours se concentre pas sur les maquettes papier, mais sur le flux utilisateur. Mais je vais montrer quelques différences dans Figma en ce qui concerne ces flèches en particulier. Et nous allons travailler sur le plan du site et l'architecture du contenu. Et pas à cause du contenu en soi, je vais simplement copier ce contenu à partir d'ici et le coller dans Figma. Mais je vais vous montrer quelques trucs et astuces d'organisation que vous pouvez utiliser dans Figma Debt. Adobe XD est un peu différent encore une fois, alors pour le mood board, nous allons simplement le copier parce que je ne veux pas vous faire perdre votre temps avec ce guide de style. Même histoire. Je vais simplement copier et coller ceci parce que nous utilisons simplement les mêmes actifs. Et je vais juste montrer comment configurer cela pour vos développeurs plus tard car Figma possède cette fonctionnalité appelée pages, qui n'est pas disponible dans Adobe XD. Je vais donc y montrer quelques différences. Ensuite, nous allons attaquer notre design. Nous allons commencer par la page d'accueil, passer aux voitures, aux voitures sélectionnées, etc. Je vais donc faire exactement la même chose que nous l'avons fait ici. Je vais juste montrer comment le recréer dans Figma et quelles sont les différences. je l'ai dit, je veux vous expliquer ce processus Comme je l'ai dit, je veux vous expliquer ce processus en partant de zéro, parce que je voulais simplement vous montrer que ces outils sont presque exactement les mêmes. En tant qu'étranger. Vous pourriez examiner certaines fonctionnalités et penser par vous-même, eh bien, il y a quelques différences principales ici. Ce ne sont pas exactement les mêmes, mais croyez-moi, ils le sont. Au fur et à mesure que je vous explique ce processus, vous pouvez visionner l' intégralité de la partie XD du cours et maintenant l'intégralité de la partie film du cours. Et voyez par vous-même à quel point ces outils sont vraiment différents. La vérité, c'est qu'ils sont presque exactement les mêmes. il existe quelques différences ici et là, disons, dans les conventions de dénomination et dans ces pages, par exemple, fonctionnement des composants et d'autres choses de ce genre. Mais en fin de compte, le tableau d'ensemble est exactement le même et ces outils font exactement le même travail. Je vais donc mettre cela de côté et vous montrer comment travailler dans Figma. Nous voici donc à Figma. Et comme vous pouvez le constater, l'outil est légèrement différent de XD. Parce que dans XD, si je le répète, vous pouvez constater que toutes nos fonctionnalités, tous nos composants, couleurs et styles se trouvent ici, et que nos outils se trouvent sur le côté gauche, tandis que dans Figma, nous avons nos outils ici et notre panneau de propriétés ici. Le partage est exactement le même que dans XD. Vous n'avez tout simplement pas partagé ce prototype de conception ici, mais vous concevez tout de suite. Vous n'avez pas besoin de partager en soi, vous devez simplement le partager une fois que le partage commence, puis il se met à jour automatiquement car il se trouve dans le navigateur. Mais ici, vous pouvez simplement cliquer pour prévisualiser, comme dans Adobe XD. Et au lieu d'avoir toutes vos couleurs, styles, ressources icônes de ce côté, vous les aurez simplement de ce côté lorsque vous cliquerez quelque part à l'extérieur. L'autre différence majeure, c' est que nous n'avons pas nos planches. Donc, dans XD, nous avons nos oiseaux. Ce sont donc toutes des planches d'art, comme vous vous en souvenez peut-être, il s' agit par exemple de 14 40 x 5775. Je vais donc me lancer et le copier très rapidement. Juste cette largeur. Revenez ici et je dois appuyer sur F pour le cadre, faire glisser un cadre rapide. Et puis, pour la largeur, collez simplement celui-ci N. Et voici mon cadre. Si je me souviens bien, c'est une page d'accueil. Permettez-moi donc de copier ce texte ici. Revenez ici, double-cliquez sur le nom du frame control V et appuyez sur Entrée. Donc, en gros, ce que j'ai fait ici, c'est qu'il a créé un aéroport. C'est juste qu'il ne s' appelle pas notre port à Figma. Ça s'appelle un cadre. Et le cadre possède quelques fonctionnalités que les ports n'ont pas. Mais en gros, en un mot, ce sont exactement les mêmes. Commençons donc par le premier et je vais appuyer sur Supprimer très rapidement sur celui-ci, car ce que je veux faire, c'est faire glisser x dy vers l'extérieur. Pour ne pas m'aveugler pendant que je commence à travailler sur cette chanson, nous allons juste appuyer sur Control C et Control V pour coller quelques acides ici et là. Je vais donc entrer ici et coller ce filaire en papier à l'intérieur, comme ça. Ensuite, je vais essentiellement créer un rapport ou un cadre comme celui-ci. Et je vais l'appeler moodboard. Et laisse-moi vérifier. C'est le 19 201-080-1920 par 1080, comme ça. Ensuite, je vais sélectionner tout le contenu qui se trouvait à l'origine dans ce mood board, et sélectionner Control V pour le coller. Et vous pouvez voir qu'il va le coller exactement avec le même poids. Au lieu d'avoir des images séparées, Au lieu d'avoir des images séparées comme celles que j'ai ici dans XD, il va les coller en une seule image. Donc, ce que je peux faire à ce stade s'appelle ce mood board images. Et si vous souhaitez exporter des images séparées, vous pouvez le faire, car comme vous pouvez le voir, je les ai sélectionnées. C'est bon, ici. Tu peux le faire. Vous pouvez donc contrôler C, copier, contrôler V coller. Il va donc coller une seule image. Vous pouvez ensuite le redimensionner en maintenant la touche Shift enfoncée et en le collant juste là pour pouvoir le positionner où vous le souhaitez. Mais dans ce cas, je ne veux pas vous faire perdre votre temps, car si nous voulons voir comment j'ai obtenu ces images, assurez-vous de regarder la section Mood Board du cours. Ensuite, ce que je vais faire, c'est glisser-déposer mon logo à l'intérieur. Et je vais le placer quelque part ici et je vais l'appeler logo. Et vous pouvez voir que nous avons quelques problèmes ici. Donc, ce que je vais faire tout d'abord, c'est par exemple voir. Je pourrais augmenter l'espacement des lettres comme ceci, puis m'assurer que ces deux lettres sont centrées. Et je vais mettre le plan tel quel, sélectionner mon logo, et voici votre composant ici. Cliquez donc sur Ctrl+Alt ou sur Command Alt sur un Mac. Au lieu de contrôler K, vous pouvez voir qu'il est indiqué que control Alt K , dans XD, est simplement Control K ou Command K, Command Alt. Donc, en gros , exactement le même logo. Et si vous souhaitez créer une version de ce logo, nous n'en avons pas besoin, mais si vous le souhaitez, vous pouvez simplement cliquer ici pour ajouter une variante. La variante est une version ou notre composant enfant de ce composant principal. Et dans ce cas, voyons ce que nous pouvons faire. Donc, cette variante, je peux l'appeler, par exemple au lieu de variantes, je peux l'appeler blanche. Vous pouvez donc voir que nous l'avons maintenant. Et si je double-clique ici, vous pouvez voir la propriété 1 blanche. Donc, la propriété 1 signifie que c'est la première propriété. Si nous ajoutons une autre variante, ce sera la propriété de la propriété trois et ainsi de suite. Donc, peu importe le nombre de ces propriétés que vous ajoutez, cela finira comme ça. Je vais donc sélectionner mon plan. Cliquez ici. Assurez-vous de choisir le blanc. Et je vais ajouter ce blanc comme couleur pour pouvoir cliquer ici et me cacher pour que vous puissiez le voir un peu mieux. Et je peux ensuite cliquer là où il est indiqué « styles de couleurs ». Je vais cliquer ici et l'appeler blanc, comme ça. Et description : couleur blanc pur. Nous y voilà. Nous avons donc maintenant ce style blanc. Vous pouvez voir qu'il est appliqué. Et je peux sélectionner ces deux textes et accéder à ma couleur complète, qui est celle-ci ici. Cliquez sur ces points. Je pense à sélectionner le blanc. Il va donc être mis à jour en conséquence. Nous avons donc maintenant un logo en deux versions. Nous avons du blanc et nous avons cette couleur sombre d'origine. Allons-y et organisons-les un peu mieux. Je vais leur donner un coup de pouce. Et avant de poursuivre, vous pouvez voir que nous avons la page ici. Je peux cliquer sur la page, bouton droit ici, renommer la page. Et je peux voir, par exemple des actifs ou une araignée parce que c'est le nom. Acides. Appuyez sur Entrée. Nous y voilà. Et je peux créer une nouvelle page, et je peux appeler ça du design. Donc, dans le design, je voudrais peut-être sélectionner Control C et Control V pour coller ces wireframes. Parce que si je veux me souvenir à tout moment, si quelque chose a été fait correctement, par exemple , je peux double-cliquer ici et appeler ce document filaire, par exemple , puis revenir à un outil d'observation. Je peux m' en débarrasser si je veux, mais je vais le laisser tel quel. Maintenant, ce que je veux faire ensuite pour cette section particulière est de commencer à créer ce plan de site ou cette architecture de contenu. Appuyez donc sur frame, appuyez sur F. Maintenant, cliquez et copiez et collez le nom des textes. Une fois que l'architecture de contenu du plan du site pour ce cas particulier, je vais faire 1173616 parce que , oups, pas le logo. Ce 11173616. Nous y voilà. Parce que je veux que le contenu soit exactement le même. Et je tiens à mentionner que vous allez obtenir ces fichiers Figma en tant que fichiers de projet, comme nous l'avons fait avec les fichiers XD. Assurez-vous donc de les télécharger, assurez-vous de les ouvrir sur votre ordinateur au moment où vous souhaitez les ouvrir et venez ici. Revenez aux fichiers , puis à l'importation de fichiers. Et vous allez importer ces fichiers en tant que nouveaux fichiers. En gros, il y aura quelque chose comme l'importation à partir d'autres outils ou quelque chose comme ça. Alors laisse-moi juste vérifier. Pour ce nouveau fichier de conception et ce nouveau fichier d'importation, vous pouvez cliquer sur Importer un fichier pour des fichiers provenant d'autres outils. Et puis à l'intérieur, vous allez pouvoir l'ouvrir. Permettez-moi donc de revenir à mon dossier, comme ça. Nous y voilà. Passons à l'étape suivante et créons rapidement cette architecture de contenu, car nous en sommes déjà à 10 minutes de cette vidéo. Créons donc rapidement ce qui est terminé. Et puis je vais y retourner. Vers le flux d'utilisateurs dans la vidéo suivante. Commençons donc par la page d'accueil. Et tout d'abord, créons un texte. Choisissons donc Poppins ici. Poppins, on y va. Et Poppins va avoir 20 ans irréguliers. Nous y voilà. Et la couleur peut être du blanc pur, par exemple, donc ce que je peux faire à ce stade, c'est taper la page d'accueil. Nous y voilà. Et ce que je peux faire, c'est appuyer sur Shift a, pour créer un cadre autour de cela. Et je vais utiliser exactement les mêmes paramètres que précédemment. Je vais donc m' assurer que c'est centré. Et je vais inclure le couplage horizontal de, voyons voir, 44, 44 pixels. Nous y voilà. Et maintenant, j'ai besoin d'un rembourrage vertical de 26 pixels, par exemple, et je vais obtenir exactement la même forme que cette forme. Maintenant, juste à Figma. Maintenant, en termes de couleurs, laissez-moi choisir la couleur que nous avons déjà ici et ici, où il est écrit Remplir, je vais cliquer sur Plus, cliquez ici, collez cette couleur. Nous y voilà. Et maintenant, je vais sélectionner la couleur du texte ici. Et voyons voir, en fait ça devrait être blanc. Nous y voilà. Couleurs de sélection. Voyons voir. Alors remplissez. Nous y voilà. Si je sélectionne mon texte, maintenant, c'est parti. Ça devrait donc être blanc là-bas. D'accord ? Donc, si je maintiens ma touche Alt ou Option enfoncée, vous pouvez voir que nous sommes 26 en haut et en bas, et 44 de chaque côté, même chose étant liquidée ici. Vous pouvez donc voir maintenant que nous avons le cadre. Et en termes de conventions de dénomination, adoptons la même convention de dénomination. Je vais donc l'appeler élément de navigation comme je l'ai fait dans Adobe XD. Et je vais simplement le dupliquer. Donc, Control D. Et voici comment je vais appeler ça des voitures. Contrôle D. Je vais appeler ça des prêts. Contrôle D. Ce sera Contactez-nous. Et si vous avez regardé la vidéo sur l'architecture de contenu, ce que je vous encourage vivement à faire, vous devriez simplement réfléchir au type de contenu qui figurera sur chaque page. C'est là tout l'intérêt de l'architecture de contenu. Et dans ce cas, nous réfléchissons simplement à ce que nous allons inclure dans quelle page. Je veux dire par là ce dont chaque page a besoin. Permettez-moi donc d'essayer de copier et coller le texte, mais il s'agit simplement d'une image. Alors allons-y. Alors appuyez sur T, je suis en train de naviguer. Et voyons ce qu'il a fait ici. Et c'est ce qui va être corrigé dans les versions ultérieures de Figma. Maintenant que cela fait partie de XD. Voyons donc cette couleur. Je vais donc sélectionner cette couleur, laissez-moi voir comment je l'ai appelée. couleur foncée éclatante, je crois. Oui. Renommez-le et ajoutons-le rapidement ici, cliquez ici. Si foncé, ça ajoute de la couleur, des cheveux foncés, et c'est parti. Maintenant, nous allons simplement créer un groupe et l' appeler groupe. Laisse-moi voir comment je l'ai appelé. À l'intérieur se trouvent les sections d'accueil. Maintenant, pour ce groupe, je peux créer une mise en page automatique comme celle-ci. Et je peux le mettre au fond, comme ça. Et voyons ce que j'ai fait dans Adobe XD. Vous pouvez voir ici que nous avons utilisé pile jusqu'au bas de 20. Revenons donc à Figma. ce cas, empilez les 20 dernières mises en page automatique. Ainsi, lorsque je fais la duplication et que je maintiens la touche Alt enfoncée, vous pouvez voir que nous avons distance de 20 points entre ces deux éléments, ce que nous voulons vraiment. Alors, qui sommes nous ? Nous y voilà. Vous pouvez cliquer en dehors de Control D, cela va le placer. Donc, ce que nous faisons, contrôler D, contrôler D, contrôler D. c'est contrôler D, contrôler D, contrôler D. Donc, ce seront nos avantages, là où nous nous trouvons et carte, donc ce sera Contactez-nous. Puis enfin, contrôlez D One more time footer. Nous y voilà. Maintenant que nous avons ces sections destinées aux maisons, ce que nous pouvons faire, c'est les regrouper. Donc, cet élément de navigation et cette section d'accueil, nous pouvons les placer dans un groupe de contrôle G. Et voyons voir, je peux appeler cela, par exemple page d'accueil comme ça. Et assurez-vous d'activer la mise en page automatique pour cela. Et cette fois, je vais parcourir la distance de 40. Nous y voilà. Et maintenant, je vais terminer cette vidéo ici. Débarrasse-toi de ça. Parce que ce que je peux faire, c'est même histoire que dans Adobe XD. Tout d'abord, assurez-vous que c'est centré comme ça. Et puis faites trois autres copies. Donc Control D, Control D. Oups. Control D, comme ça. Et je peux maintenant double-cliquer dessus appeler ces voitures , puis les modifier toutes. Je vais double-cliquer ici, taper des prêts et tout modifier. Double-cliquez ici et tapez Contactez-nous, puis modifiez tout cela. Rendez-vous donc dans la vidéo suivante une fois que j'en aurai terminé, puis nous passerons au flux d'utilisateurs. Alors je te verrai là-bas. 151. Flux d'utilisateur: Maintenant que l'architecture de contenu du plan de site I est terminée, passons maintenant au flux utilisateur et voyons à quoi il ressemble dans XD. Alors ça y est. Nous allons créer rapidement ces composants de la même longueur que nous l'avons fait pour l'architecture de contenu actuelle dans Figma sort, laissez-moi vous montrer comment procéder. Nous allons donc le placer quelque part ici, par exemple espacer et cliquer avec le bouton gauche de la souris pour naviguer, appuyez sur F pour le cadre. Dessinez-en un et je vais l'appeler, par exemple User Flows, comme nous l' appelions dans Adobe XD. Maintenant, donnons-lui la même chose, disons les dimensions. Permettez-moi donc de sélectionner celui-ci et de voir ce que nous avions ici. Nous en avons donc 18 73 et 749 comme ça. Donc largeur et hauteur, et je vais le placer juste ici, puis le positionner ici, peut-être quelque part autour de celui-ci. Peut-être pouvons-nous le remplacer pour qu'il ait exactement la même apparence, comme s'il se trouvait dans XD par quelque chose comme ça. Ensuite, je pourrais peut-être positionner mon logo et à peu près ici. Et je vais positionner ce logo un peu différemment, car je vais créer un guide de style dans la prochaine leçon, pour montrer comment procéder. Nous allons donc y placer ce logo, mais pour l'instant, positionnons-le peut-être juste ici afin de pouvoir le rapprocher un peu plus. Passons maintenant au flux d'utilisateurs. Pour commencer, je vais dessiner quelques rectangles. Alors appuyez sur R, appuyez à nouveau sur sont à l'intérieur. Ensuite, je vais copier ces deux couleurs. Copiez donc mon bleu principal. Collez-le ici. Nous y voilà. Je vais cliquer ici. Cliquez pour ajouter un nouveau style de couleur et laissez-moi me cacher pour que vous puissiez voir ce que je fais. Et je vais appeler celui-ci principal bleu. Je l'appelle la couleur bleue principale. La principale différence entre XD Figma est donc que vous pouvez voir les options descriptives de d et expliquer plus en détail à quoi sert cette couleur. Donc, en gros, si cette couleur est utilisée uniquement pour les boutons, vous pouvez la décrire. Par exemple, la couleur du bouton bleu principal ou s'il est utilisé uniquement pour les images d'arrière-plan pour les ombres ou pour toute autre raison. Vous pouvez ensuite le décrire ici. Et cela est particulièrement utile pour les développeurs. Non, vous n'avez pas Afficher plus d'options. Donc, quand je clique juste là, vous pouvez voir que nous avons ces propriétés. Je peux l'ajuster, ou je peux même ajouter de nouvelles propriétés ici même. Par exemple, peux ajouter les superpositions, je peux cliquer ici. Et puis au lieu de solide, je peux inclure un dégradé linéaire. Je peux donc peut-être réduire l'opacité de ce dégradé linéaire. Et je peux également ajouter toutes ces options. Maintenant, je peux simplement appuyer sur Créer un style parce que nous n'en avons pas besoin. Je vais juste appuyer sur Créer un style. Et maintenant, nous avons ce style de blues principal. Maintenant, je vais faire la même chose. Alors laissez-moi simplement copier et coller celui-ci. Cliquez ici, cliquez ici et appelez cette couleur de survol. Passez la souris sur la couleur ou survolez le bouton sur la couleur. Donc, plus tard, nos développeurs sauront ce que c'est. Maintenant que j'ai créé ces deux-là, permettez-moi de m' en débarrasser très rapidement. Et je vais utiliser les mêmes textes de Poppins 20. Et je vais vous montrer comment ajouter ce texte un peu plus tard, mais pour l'instant, nous allons simplement le créer à partir de zéro. Donc, ce que je vais faire, c'est créer un cercle et le raccourci est 0 ici. Vous pouvez maintenir la touche Shift enfoncée ici. Et laissez-moi tout fermer pour qu'ils ne nous dérangent pas. Donc, pour celui-ci, ce que je peux faire, c'est l'appeler un cercle, comme une dette. Et pour les dimensions, allons-y avec un cinquième, t avec un cinquième. Donc quelque chose de beau et de grand. Cliquez sur vos couleurs, appuyez sur le bleu principal, saisissez le texte à l'intérieur. Et je vais appeler ça une entrée comme ça. Et comme vous pouvez le voir, il va garder même couleur et ajoutons-y un blanc. Et regroupez-les tous, assurez-vous qu'ils sont dans un centre, comme la dette. Et je vais d'abord les mettre dans un groupe. Et je vais appeler cette entrée. Ensuite, je vais en faire un composant. Maintenant, nous avons une entrée. Je vais donc le placer ici très rapidement. Ensuite, si je fais défiler l'écran jusqu'en bas, nous avons une entrée, une action, un processus et une décision. Donc, pour ce qui est de l'action, nous allons essentiellement créer ce cercle plus clair. Mais maintenant que je le regarde, nous ne l'avons pas vraiment utilisé. Donc, ce que nous pouvons y faire, nous pouvons peut-être simplement utiliser l'action. Alors allons-y à nouveau. Alors appuyez sur 0 ici, créez un cercle, 15150. Nous y voilà. Et je vais y attacher la couleur de survol. Je vais l'appeler cercle. Ensuite, utilisez l'outil de texte, tapez une action comme ça. Et assurez-vous simplement que le texte est aligné au centre de la même histoire ici. Assurez-vous donc que les deux sont centrés comme ça. Genre, alors, on y va. Et je vais les regrouper pour appeler cela de l'action. Peut appuyer sur Shift a immédiatement. Je vais simplement vous montrer que le flux de travail que nous avons utilisé dans XD fonctionne exactement de la même manière ici. Maintenant que nous avons pris des mesures, ce que nous voulons, c'est le processus. Donc, pour le processus, créons un rectangle rapide. Vous pouvez appuyer sur R ici. Et pour le processus, nous pouvons utiliser exactement la même couleur. Nous y voilà. Et je vais l'appeler le rectangle. Comme ça. Appuyez sur T pour l'outil de saisie, j'épingle le processus comme ça. Et voyons ce que nous pouvons faire ici pour que je puisse le pousser ici. Et voyons voir, celui-ci mesurait 86 mètres de haut. Alors allons-y. 86 de hauteur et assurez-vous que c'est au centre. Nous y voilà. Et pour les côtés, ce que nous pouvons faire, c'est peut-être en inclure 44. Je pense que c'est bien. Oui. Donc, si un groupe le regroupe et l'appelle processus, voilà, appuyez sur Shift a et je peux le transformer en composant. Cette fois, j'ai fait l'inverse, mais vous pouvez quand même voir qu' ils apparaissent en tant que composants. Donc, en gros, vous pouvez le faire comme vous le souhaitez. Enfin, nous avons une décision. Donc, pour ce faire, vous pouvez créer un carré. Alors allons-y une fois de plus, et transformons cela en 100 par 100. Nous y voilà. Et nous pouvons utiliser la même couleur d'horreur. Nous y voilà. Et je peux appeler cette décision ainsi. Prenez la décision qui consiste à appuyer sur Shift pendant que vous faites pivoter, assurez-vous de les positionner au centre de cette manière. Nous y voilà. Et en fait, transformons cela en une couleur foncée. Donc couleur bleue principale. Et regroupez-les pour prendre une décision. Et puis cliquez ici pour en faire un composant. Enfin, pour utiliser toutes ces flèches, vous pouvez simplement utiliser une flèche à partir d'ici. Donc, pour connecter tout cela et en faire ceci, ce que nous avons ici dans notre fichier XD. Donc, ce que je peux faire, c'est tout sélectionner comme ça ou contrôler C. Entrez ici, tapez Control V, et il va le coller sous forme d'image. Ce sera donc une jolie petite référence pour nous. Donc, ce que nous pouvons faire ici c'est peut-être faire quelques sélections. Donc, juste ici, nous avons cette décision. Donc, ici, au lieu de procéder, nous allons taper quelque chose comme Parcourir les voitures et vous pouvez voir que cela s'ajuste automatiquement. Donc, pour cette action, nous allons saisir la carte d'affichage. Nous y allons et nous assurons que les deux sont au centre. Donc, même histoire que dans XD auparavant. Mais pour une raison ou une autre, ce ne sera pas une pépite, alors laissez-moi le sélectionner manuellement et le placer ici. Alors Vieux Carré, on y va. Ensuite, nous avons cette décision. Et assurons-nous qu' ils soient tous centrés sur la vie. Assurez-vous donc de les pousser ici. Donc, ici en haut, on voit, voit en bas, donc Control D une fois de plus. Consultez donc les prêts. Nous y voilà. Cela ira au centre de ce Control D. Down. Et voilà, vous pouvez voir Related cars. Assurez-vous que c'est dans la commande centrale D. Ici, je vais écrire en contact, revendeur s'assure que c'est au centre. Contrôlez le livre. Faites un essai routier, autorisez la boucle puis dupliquez celle-ci. Au lieu de saisir une entrée, tapez exit. Maintenant que nous avons User Flow, ce que nous pouvons faire à ce stade est lié à des flèches. Alors peut-être que nous pouvons les espacer et les positionner comme ça, peut-être les pousser un peu. Peut-être pouvons-nous nous assurer qu'ils sont centrés. Déplace-les un peu. Peut-être faire quelque chose comme ça, quelque chose comme ça parce que nous avons place et je vais vous donner un coup de pouce. Ensuite, assurez-vous que ceci, ces deux sont centrés et c'est à peu près ici. Alors maintenant, allons-y et ajoutons toutes ces flèches. Tout d'abord, je vais simplement utiliser Shift L, mais je vais cliquer sur la flèche juste pour vous le montrer. Tu peux utiliser le quart de travail. Nous y voilà. Maintenant, 40 flèches, si je me souviens bien, oui, si nous utilisons cette couleur, vous ne pouvez pas avoir ce cercle. Vous devrez le recréer si vous voulez qu'il soit exactement le même que dans Figma. Mais pour l'instant, je vais juste l' utiliser tout au long de ce cercle. Alors, entrons dans le vif du sujet. Laisse-moi vraiment m' installer ici. Alors, ici, nous pouvons peut-être utiliser pour, pour l'épaisseur, pour la couleur. Je peux utiliser la couleur du pointeur et instantanément nous avons notre flèche. Donc, ce que je peux faire, c'est sélectionner Ctrl D pour le dupliquer, Ctrl D pour le positionner ici. Je vois qu'il a sauté à la même distance, mais je veux qu'il soit à peu près ici. Nous y voilà. Et peut-être que ces deux ne sont pas centrés. Maintenant, ils le sont. Allons-y et centrons rapidement tout cela . Nous y voilà. Maintenant, ce que nous pouvons faire parce que nous avons ces flèches plus compliquées, comme celles-ci, par exemple, nous pouvons faire certaines combinaisons. Alors, tout d'abord, finissons avec ces exemples de flèches. Donc, Control D, allons-y à peu près. Contrôle D, positionnez-le ici comme ça. Et je vais appuyer sur Shift. Nous y voilà. Assurez-vous que c'est en position centrale à 23, disons. Ensuite, contrôlez D, couvrez et faites pivoter, maintenez la touche Maj enfoncée. Nous y voilà. Et 23 ici, et voyons 23 ici. Nous y voilà. Peut-être que nous pouvons faire la même distance juste pour le plaisir. Et positionnez-le ici. Voyons voir, alt 20, deux ans et demi. Et voilà, 24 ou k s' assurent que c'est au centre comme ça. Et je vais laisser les choses telles qu'elles sont actuellement. Donc, la seule autre chose dont nous avons besoin, celle-ci et celle-ci. Nous allons donc sélectionner celui-ci et celui-ci Control D pour créer des doublons. Je vais donc placer celui-ci ici, celui-ci ici, c'est parti. Et je vais le modifier à peu près ici. Alors, voyons voir. Et celui-ci va aller au centre, et celui-ci va aller ici. Nous y voilà. Maintenant, nous avons besoin de ces deux. Nous devons donc nous connecter, voir les jaunes et contacter le revendeur. Pour une raison ou une autre, j'ai un doublon ici. Laisse-moi m'en débarrasser. Donc, ce que je vais faire, c'est contrôler D pour dupliquer celui-ci pour m'assurer qu' il se trouve au centre. Contrôlez D une fois de plus. Et je vais faire pivoter celui-ci. Faisons ça encore une fois. Nous y voilà. Maintenant, ce que je peux faire, c'est étendre celui-ci. Maintenez la touche Shift enfoncée pour revenir au centre. Étendez celle-ci, toute ma touche Shift, puis sélectionnez simplement la fin ici. Disons donc qu'il n'y en a aucun. Et puis ces deux vont se connecter ici. C'est donc le premier avantage de Figma par rapport à x, z à mon avis, car vous avez un outil comme celui-ci. Maintenant, nous n'avons plus les cercles que j'ai créés dans XD, mais peu importe, nous pouvons simplement les utiliser comme tels. Il suffit donc d'appuyer sur Control D sur celui-ci. Et je vais le donner ici même. Zoomons donc un peu pour pouvoir les utiliser et les fusionner. Nous y voilà. Nous allons donc passer des voitures liées au C à la voiture de visualisation. Alors dans ce cas, allons-y. Effectuez une rotation en maintenant la touche Shift enfoncée. Vous y voilà. Assurez-vous de le positionner au centre de notre cercle comme suit. Ensuite, déplacez doucement le bureau vers la droite, comme ceci. Assurez-vous qu'il est au centre. Assurez-vous que cela se rencontre ici même. Si le maintien change, et voilà. En résumé, nous venons de créer notre flux d'utilisateurs et il nous a fallu 14 minutes pour le faire. Ce flux de travail présente donc certains avantages . Il y a certains inconvénients. Vous pouvez voir, par exemple, Ice les a toutes sélectionnées et j' essaie de les déplacer. Parfois, ça ne bouge tout simplement pas, parfois c'est un peu têtu envers moi et des trucs comme ça. Vous pouvez donc le voir ici. Nous n'avons pas ces points bleus que nous avions dans la version XD, mais je pense quand même que cela fera très bien l'affaire. Gardez simplement à l'esprit que vous pouvez passer au germe de figue, ce qui n'est pas abordé dans ce cours. Et pour les Allemands, j'ai presque créé pour ce genre de choses, mais je voulais montrer qu'il est également possible de le faire dans Figma, en utilisant exactement le même flux de travail que utilisant exactement le même flux que nous utilisions jusqu'à présent dans XD. Donc, pour l'instant, je vais tous les sélectionner. Maintenant, voyons voir. C'est la flèche qui s'est éloignée de nous et qui a appuyé sur Contrôle G. Appelez cette flèche juste pour que les choses soient un peu plus organisées. Et ce que je vais faire, c'est masquer ce flux d'utilisateurs. C'est donc essentiellement tout pour notre flux d'utilisateurs. C'est essentiellement tout pour la structure ici. Dans la leçon suivante, nous allons nous concentrer sur ce point, qui est le guide de style. Je vous y verrai donc et là nous allons structurer notre typographie. Je vais glisser-déposer ces icônes. Je vais positionner le logo. Nous allons comprendre boutons et nous assurer de les positionner à cet endroit et de mettre en forme tous nos éléments avant de passer à la conception et avant de nous lancer conception et avant de nous conception de la page d'accueil. Alors je te verrai là-bas. 152. Guide de style: Continuons et travaillons sur notre guide de style. Alors tout d'abord, laissez-moi créer ce cadre très rapidement. Donc F pour le cadre, cliquez maintenant sur l'appeler guide de style. Et encore une fois, nous sommes sur les pages en tant qu'actifs de Pilar et nous allons passer au design lorsque nous commencerons par le design. Mais finissons d'abord par notre processus de création d'actifs. Donc, ici, si vous souhaitez l'étendre, vous pouvez simplement cliquer ici et l' étendre aussi longtemps que vous le souhaitez. Mais dans notre cas, ce sera 2 400. Je vais donc juste essayer de faire en sorte que tout soit exactement pareil, comme dans Adobe XD. Donc, tout d'abord, ce que je veux faire, c'est taper des couleurs ici . Nous y voilà. Et celui-ci, je vais opter pour 32 ans et m'enfoncer, comme une dette. Et la couleur sera si foncée ici en ajoutant des couleurs. Je ne sais donc pas vraiment pourquoi il ne l'a pas traduit. Oh, nous y voilà. Il a donc fallu du temps pour mettre un peu à jour. Nous allons donc le placer 64 à partir du haut, comme ça. Et nous allons le placer 32 à partir de ce site. Alors voyons voir, vous avez cette jolie petite option en haut qui vous indique où elle se trouve. Donc deux pixels. Et si je maintiens la touche Alt ou Option sur Mac, vous pouvez voir que nous sommes à 64,32. Alors allons-y et commençons par la topographie, car c'est beaucoup plus important, à mon avis. Ces couleurs parce qu'elles vont être créées très rapidement. Donc, typographie, je vais coller ce texte ici. Assurez-vous qu'il est aligné à gauche, assurez-vous qu'il est également aligné à gauche. Nous n'aurons donc pas ces problèmes plus tard. Nous y voilà. Tout d'abord, je vais appuyer sur Control D ici et essentiellement copier et coller intégralité du texte à l'intérieur. Et tout d'abord, ce sera 64 boulons. Nous y voilà. Et je vais le placer, voyons 40 à partir d'ici. Comme ça. Ensuite, je vais déplacer cela vers le bas, le placer dans un groupe appelé topographie. Comme ça. Cliquez sur la mise en page automatique ou modifiez un mélange si 40 est la différence, puis je vais sélectionner celui-ci et venir ici. Alors, tout d'abord, voyons les couleurs. Oui, nous pouvons avoir cette couleur de titre. C'est très bien. Je vais cliquer ici et ajouter un nouveau style. Et je vais l'appeler H comme ça. Donc, en gros, ce sera notre H1. Et maintenant allons-y et dupliquons celui-ci. Cliquez ici. Maintenant, je vais cliquer sur ce lien pour le dissocier. Alors pour le second, voici ce que je veux. Alors peut-être que je peux simplement contrôler D et sélectionner tout cela. C'est donc beaucoup plus simple pour nous de créer. Voyons voir, ce sera un bloc de texte. Nous y voilà. Et un paragraphe. Nous y voilà. Et du texte non étiqueté dedans, c'est parti. Alors, tout d'abord, allons-y et vérifions si nous avons cette configuration. Assurez-vous donc de sélectionner H1, puis cliquez dessus, cliquez ici. Et voyons ce que nous avons. Nous avons donc ce qu'il dit, un interligne. Nous avons donc un espacement des lettres et une hauteur de ligne. Donc, dans ce cas, c'est automatique. Mais ici, nous allons taper 86, par exemple, nous y voilà. Et maintenant, tout va être beaucoup plus net. Nous y voilà. Voici donc notre H1 pour ce second, ce que nous voulons, c'est le transformer en 32. Alors, verrouillez. Et voyons voir la couleur, je pense que c'est la même chose. Oui, ça l'est. Donc, c'est un contre un, deux ou quatre. Nous y voilà. C'est très bien. C'est donc pareil. Je vais procéder aux ajustements. Nous avons donc 56 pour la hauteur ou l'espacement des lignes. Comment allez-vous l'appeler ? Voyons donc 56. Nous y voilà. Et je vais cliquer ici, cliquer ici et l'appeler H2. Alors pour cette troisième, je vais faire, voyons voir, la couleur est différente. Alors peut-être que je devrais créer ces couleurs pour ne pas nous confondre. Alors voyons voir comme ça. Nous avons donc déjà survolé, nous avons le bleu principal, nous avons le titre foncé, qui est cette couleur juste ici, de couleur plus foncée. Alors peut-être que je peux y aller très rapidement, le faire. Donc, notre contrôle D, contrôle D, contrôle D, contrôle D. Voyons voir. Donc, pour celui-ci. Ce que je peux faire, c'est cliquer ici , puis échantillonner cette couleur. Pour celui-ci, je peux faire de même et échantillonner cette couleur. Pour celui-ci. Je peux le tester en gris clair. Nous y voilà. Ce sera d'un blanc pur. Nous l'avons déjà. Et enfin, nous avons ce dernier qui est une couleur de carrosserie. Nous y voilà. Alors, prenons un échantillon de celui-ci. Nous y voilà. Alors, tout d'abord, ajoutons ceux-ci tels quels. Donc comme ça. Et ça va être là juste pour je sache ce que tout est. Donc, pour leur donner des noms, d'accord, nous pouvons commencer par celui-ci. Ajoutons-le donc rapidement. Créez un nouveau style. Ce sera un paragraphe à trois tirets. Colorez donc chacun des trois et des paragraphes. Nous y voilà. Recréez-le. moi qui l'ai fait. Essayons donc encore une fois. Donc h3, le paragraphe, couleur, créent du style. Nous y voilà. Maintenant, celui-ci. Cliquons ici, puis ici, appelons-le gris foncé. Créez du style. C'est ce que nous appellerons un gris clair. Nous y voilà. Enfin, c'est ce que nous appellerons la couleur du corps. D'accord ? Maintenant que tout est terminé, nous pouvons le faire à ce stade. Peut-être que nous pouvons le supprimer, sélectionner le disque car nous devons également appliquer la couleur du boîtier ici. Il suffit donc de cliquer ici. Et voilà, parce que nous voulons nous assurer que cela se démarque un peu. Alors voilà, ce que nous voulons avec ce h3, c'est voir. Donc, dans ce cas, nous aurons besoin de cette couleur h3. Alors cliquez ici, en trois paragraphes. Nous y voilà. Et ajustons cela. Donc 40 pour la taille, nous passerons à 24. Nous y voilà. Bolt est toujours là. Oui. Cliquons ici sur New Style, ce sera en HD. Maintenant, ce sera un bloc de texte. Donc, tout d'abord, descendons à quatre à 20. Passons à un restaurant laitier ordinaire. Et nous avons ici cette couleur, qui est gris foncé. Sélectionnez donc la couleur gris foncé ici. Nous y voilà. Et 44, espacement comme ça. Nous y voilà. C'est donc notre bloc de texte. Et créons ce style. Donc bloc de texte, car plus tard dans Webflow, nous utiliserons exactement ce style. C'est donc très important. Donc, voici ce que nous allons faire c'est qu'il nous manque un paragraphe pour certaines raisons. Alors dupliquons ceci et laissez-moi le copier et le coller ici. Nous y voilà. Donc, pour les textes des paragraphes, nous avons besoin de la couleur D, donc de D pour e30. Laisse-moi vérifier si c'est cette couleur. De D à E, trois zéros. Il en va de même pour le paragraphe. Donc, trois paragraphes , je crois que ce sera 16, 26, irrégulier. Et nous allons créer un nouveau style, appelez-le paragraphe. Nous y voilà. Enfin, nous avons le texte de cette étiquette. Et cette couleur sera la même que celle-ci. Passons donc au paragraphe 3. Et ici, nous allons lui en donner 12. Irrégulier. Et ce qui est écrit ici, 24 lignes de haut. Nous y voilà. C'est donc ce que nous appellerons du texte non étiqueté Créer un style. Nous y voilà. Maintenant, nos styles sont terminés, nos couleurs sont terminées. Et créons simplement un échantillon de couleur. Donc, pour vous montrer comment procéder. Allons-y en gros et créons 177-17-7149. En fait, je vais le faire non. Prenons quelque chose comme 186 avec 177. C'est une bien meilleure position ici. En termes de rayon d'angle, vous placez la coronaire ici. Nous en avons donc huit. Nous y voilà. Et je vais l'ajuster de cette couleur à notre bleu principal. Nous y voilà. Et je vais faire en sorte que ce soit pour le ou 32 ans, voyons à partir de là. Donc 22, tiret 32. Encore une fois, lorsque vous appuyez sur Shift et flèche du bas se déplace de dix pixels, comme dans Adobe XD. Je vais donc appeler cette couleur Biji, comme nous le faisions dans XD ou Color Card peut-être. Et puis appuyez sur T juste ici. Et voyons voir. Nous y voilà. C'est donc notre couleur. En termes de taille, nous pouvons faire 24 volts. Alors peut-être que nous pouvons utiliser l'un de ces styles. Donc 24, et c'est celui-ci. Nous y voilà. Et au lieu de cette couleur, je vais utiliser, disons, cette couleur. Assurez-vous que c'est centré. Nous y voilà. Et je vais appuyer sur Control D pour le dupliquer et m' assurer de le positionner ici, et ce sera r. Voyons voir, changeons-le en textblock. Nous y voilà. Et nous allons l' appeler Hover Color. Nous y voilà. En termes d'espacement, allons-y avec 16 ici. Donc quelque chose comme ça. On y va, voilà. Laisse-moi fusionner tout ça. Regroupons cela et appelons cela une carte de couleur. Nous y voilà. Appuyez sur Control G. Et je vais enregistrer les couleurs du projet. Appuyez sur Shift a pour transformer cela en mise en page automatique. Et puis voyons que la distance entre elles peut être de 24, comme ça. Et voyons combien de couleurs j'ai. 12345678. Donc sept autres copies. Un, oups, pas ça. Je devrais sélectionner la carte de couleur 1234567. Nous y voilà. Et je vais continuer et renommer. Tout cela est hors écran, donc vous ne vous ennuyez pas. Ce que je vais vous montrer ici est, alors allons-y avec 64 ici. Nous y voilà. Ce que je vais montrer ensuite, c'est de l'iconographie. Alors, tout d'abord, allons-y et utilisons ces couleurs Control D, positionnons-les ici à 64. Ensuite, nous allons sélectionner ce texte appelé iconographie. Nous y voilà. Et je vais accéder à mes icônes, assurer de les localiser dans vos fichiers de projet. Je vais appuyer sur Shift sur une manette, je dois dire, pour toutes les sélectionner, en les faisant glisser et en les déposant à l'intérieur. Ils sont donc tous en quelque sorte entassés ici et là. Je vais donc les organiser un peu plus tard. Mais en gros, ce que vous devez comprendre, c'est les choses vont être un peu différentes de ce que vous faisiez auparavant, pour les organiser dans Figma et dans XD. Voici donc comment ils sont organisés dans XD. Et je vais essentiellement les mettre tous dans le même groupe. Mais avant de le faire, je vais tous les transformer en composants. Cela va donc prendre un peu de temps. Je vais donc mettre la vidéo en pause et l'arrêter. Et puis revenez peut-être vers vous dans la vidéo séparée pour vous montrer comment utiliser ces boutons. Ensuite, nous allons mettre fin aux boutons du logo et à ces cartes de voiture, juste pour montrer très rapidement certaines techniques de mise en page. Ensuite, nous allons terminer la vidéo ici. Et puis dans la vidéo qui suit, nous allons passer au design et commencer à créer notre page d'accueil. Je vous retrouve donc dans la prochaine vidéo où nous allons terminer avec ce guide de style. 153. Créer un style guide 2: Voici donc où se trouve le guide de style. Maintenant, je suis allée de l'avant et j'ai rempli toutes ces couleurs différentes, différents noms, j'ai trié toute l'iconographie. Et si je clique dessus, vous pouvez voir que je viens de mettre toutes ces icônes dans page automatique avec une distance de 32. Si vous souhaitez l'explorer un peu plus, n'oubliez pas que vous pouvez ouvrir tous ces fichiers. Vous pouvez les explorer par vous-même et le voir structurer tous ces éléments afin que vous puissiez apprendre par vous-même. Si nous revenons ici, cela a également fait revenir le logo qui se trouvait à l'extérieur. Maintenant c'est à l'intérieur. Et j'ai configuré tous ces boutons et les textes des cartes de voiture. Donc, pour les boutons eux-mêmes, allons-y et créons-les très rapidement. Allons donc à droite et positionnons-le 32, par exemple quelque chose comme ça. Je vais donc l'appeler btn BG ici, et je vais le donner, voyons ce que nous pouvons faire. Peut-être huit pixels comme ça pour la hauteur. Passons à la largeur. Allons-y avec deux à cinq. Hauteur 73. Nous y voilà. Et je vais appuyer sur T, taper le bouton principal comme ça. Et je vais voir, voyons voir pour les textes, ce que nous pouvons faire, c'est utiliser, voyons voir. Peut-être un bloc de texte. Oui, je pense que le manuel est bon. Et pour la couleur, on opte pour le blanc pur. Cela permet de s'assurer que le texte part du centre et de le positionner ici. Nous y voilà. Et pour le fond du bouton, ce que je vais faire pour la couleur, c'est utiliser le bleu principal. Maintenant, je vais le regrouper, l' appeler main, main btn pour le bouton principal. voilà, cliquez sur Créer des composants et cliquez pour créer une variante. Et pour cette variante, nous allons simplement passer du bleu principal à la couleur de survol, car cette variante sera appelée survol. Nous y voilà. Et maintenant, la seule chose à faire est de sélectionner ceci, de passer au prototype. Et vous pouvez cliquer sur Afficher les paramètres du prototype de cette façon. Et je vais cliquer dessus. Et je vais l' attacher ici. Nous y voilà. Ainsi de suite pendant le survol , passez à la propriété 1, qui dans ce cas est le survol. Nous y voilà. Et l'émission instantanée ou vous pouvez opter pour la dissolution ou l'animation intelligente, mais je vais juste opter pour l'instant. Si nous voulions voir à quoi cela ressemble, vous pouvez simplement cliquer ici, mais en gros, cela va simplement passer en arrière et en avant. Et c'est ce que nous voulons vraiment pour cette animation en particulier. Et parce que nous ne voulons pas vraiment faire perdre du temps à nos utilisateurs. Donc, quand je passe juste ici, vous pouvez vraiment le voir à ce stade. Alors peut-être devrions-nous le reconnecter. Voyons voir en survolant. Afficher la section prototype. Voyez ce que nous pouvons faire. En vol stationnaire. Passez à. Nous y voilà. Peut-être qu'on devrait juste en sortir un. Passons donc aux actifs. Et allons-y avec le guide de style. Trouvons notre bouton. Nous y voilà. Je vais donc le faire glisser ici. Maintenant, quand je survole, tu peux voir que ça devient fou. Alors, tout d'abord, supprimons cela. Allons-y deux fois et revenons trois fois. Retour. Nous y voilà. Je voulais donc simplement supprimer celui-ci. Nous y voilà. Nous sommes donc maintenant exactement dans cette direction. Ainsi, lorsque je fais glisser ce bouton et que je survole, nous pouvons voir que nous avons maintenant cette jolie couleur bleue pour la section Hover. Alors on y va. Je vais me débarrasser de celui-ci. Nous avons maintenant notre bouton principal avec survol. Revenons au design. Et je vais le positionner à peu près ici et là, nous parcourons une certaine distance. Allons-y avec 64, donc 123 avec 64. Agréable. Et puis nous avons ce bouton de survol. Et maintenant, nous avons juste besoin du contour du bouton. Continuons donc une fois de plus pour créer un rectangle. Et ici, ce dont nous avons besoin, c'est de créer cela. Donc trois contre six, soit 73. Nous y voilà. Et je vais faire, oups, pas x et y, largeur et hauteur. Donc encore une fois, trois contre six avec 73. Nous y voilà. Maintenant, je vais continuer et sélectionner le contour de ce bouton. Je vais donc revenir à mes couches et l'appeler bouton de contour B, G. Dans ce cas, c' est parti. Je vais utiliser le même texte. Je vais taper le contour du bouton. Nous y voilà. Et dans ce cas, pour la couleur, on peut opter pour une couleur gris foncé. Comme ça. Et peut-être que je peux le faire au centre. On devrait manger ça aussi ? Comme une dette. Et voyons comment on peut l'appeler. Contour du Btn. Charmant. Maintenant, en ce qui concerne le contour lui-même, je dois simplement utiliser cette couleur comme bordure. Donc, dans ce cas, je vais me débarrasser du remplissage. Je vais inclure un accident vasculaire cérébral. Et pour la couleur du trait, je vais utiliser la couleur gris foncé. On y va, comme ça. Et voyons maintenant ce que nous avons fait, comme vous pouvez le constater, nous venons de le souligner. Il s'agit donc de l'état par défaut, de l'état de survol. Il s'agit donc de l' état de survol dans ce cas. Pour les plus difficiles, nous avons juste ceci pour la couleur de la bordure, c' est-à-dire de D à e30. Et c'est cette couleur, je crois. Oui. Donc, trois paragraphes, juste pour le survol ou la question. Alors maintenant, allons-y. Alors BTN outline, créons un composant. Agréable. Créons une variante. Dans cette variante, elle s'appellera hover. À l'intérieur du survol, nous allons simplement changer ce paragraphe du gris foncé au paragraphe HD et le faire du gris foncé au paragraphe HD et passer du gris foncé à une couleur CH à trois paragraphes. Nous y voilà. Et maintenant, enfin, passons au prototype et faisons la même chose qu'avant. Sélectionnez donc celui-ci et je vais le faire glisser ici tout en survolant, pour passer à l'absence d'animation instantanée. Et nous y voilà. Nous avons terminé nos boutons. Assurez-vous de le placer ici pour le garder bien organisé. Donc 48, c'est très bien. Gardons-le là. Et ce que je vais faire, c'est positionner ceci ici, ceci ici, et regrouper tous ces soi-disant boutons. Nous y voilà. Cela représente 64 décès. Charmant. Enfin, pour la dernière section, qui concerne une carte de voiture, je vais la porter à 64. Voyons voir, 64 ans, on y va. Et pour cette carte de voiture, je peux la créer ici, ou mieux encore, peut-être la positionner plus tard. Je ne sais donc pas vraiment quoi faire dans ce cas. Passons au design, désolé. Sois quelque chose comme ça. Oui. Donc, ce que je peux faire, c'est simplement les utiliser comme références. Parce que nous n'en avons ici que les grandes lignes. Ce n'est rien de trop important. Et c'est pour notre Harvard, c'est pour notre carte de voiture principale. Alors, commençons réellement, créons cela. Alors allons-y avec quelque chose comme ça. Je vais donc appuyer sur R ici et m'assurer qu'il correspond à cette hauteur. Nous y voilà. Je vais opter pour huit pour le rayon d'angle. Et je vais faire le plein. Allons-y et installons le blanc pur. Nous y voilà. Et pour la hauteur, partons pour 43, pour la largeur, partons pour 374. Nous y voilà. Positionnez-le ici en grade, et je vais l'appeler Stock Item B, G. Maintenant, pour le trait, incluons le trait, cliquez ici. Je vais opter pour une couleur plus foncée, mais dans ce cas, je vais juste voir ce que nous pouvons faire ici. Donc, accident vasculaire cérébral, couleur foncée, peut-être que nous pouvons utiliser celui-ci. En fait, copiez-le d' ici et collez-le ici. Nous y voilà. Et je vais juste le cacher pour le moment parce que nous n'en avons pas besoin pour le moment. Maintenant que c'est fait, je peux appuyer sur Control et D. Et voilà. Et voyons voir ce que nous avons d'autre ici ? Nous avons donc une image de voiture, une image de voiture pour cela. Je vais me débarrasser de l'accident vasculaire cérébral parce que je n'en ai pas besoin. Ici. Je vais utiliser ce gris foncé ou même gris clair. Je ne pense pas que le gris foncé soit vraiment nécessaire pour cela. Ce que nous pouvons faire, c'est l'étendre un peu. Donc, pour le rayon des coins supérieur gauche et supérieur droit, nous allons le laisser à huit, mais pour ces deux, nous allons l'avoir à zéro, comme ça. Et voyons voir pour la hauteur, ce que nous pouvons faire, c'est la régler à 250. Ce sera l'image que nous aurons de notre voiture. Ensuite, la prochaine chose à faire est d'inclure les textes des cartes de voiture. Alors appuyez sur T juste ici. Encore une fois. Et appelons-le. Lamborghini Horror Kahn. Voyons voir, ça devrait être 24. 24. Est-ce que celui-ci est beau ? Assurez-vous qu'il est aligné à gauche. Ça l'est. C'est génial. Voyons voir pour l'espacement oral, ce dont nous avons besoin ici est de 24,24. 24.24, c'est super. Appuyez sur Control D pour le dupliquer. Et ici, je vais utiliser le même texte, mais je vais utiliser la couleur principale cette fois, qui est le bleu principal. Et permettez-moi de copier ce prix très rapidement. Et voilà, Control D Encore une fois. Et puis ici, nous allons utiliser un texte plus petit. Alors allons-y régulièrement en fait. Alors H30, allons-y avec le bleu principal du bloc de texte. Allons-y avec le paragraphe H2, je pense, ou non, peut-être que nous pouvons opter pour le gris foncé cette fois. Voyons donc du gris foncé. Nous y voilà. Ça va battre l'année. Alors 2021, appuyez sur Shift a et appelez-le, voyons des années, des kilomètres comme des dettes, puis orientez-vous dans cette direction. C'est très bien. Voyons voir, peut-être 24, c'est la distance. Nous allons l'inclure. Nous y voilà. Et ici, ce que je vais faire, c'est simplement dupliquer celui-ci ici. Je vais saisir combien de kilomètres la voiture a-t-elle parcourus ? Ou combien de kilomètres y a-t-il sur le compteur ou comment vous voulez l'appeler ? Nous pouvons donc regrouper ces trois éléments. Donc, le nom, le prix, l'année, les kilomètres, etc. Je vais l'appeler, par exemple voiture, les textes des voitures créent une mise en page automatique pour cela. Et alors peut-être pourrons-nous connaître la distance. Ces 216. Oui, allons-y avec 16, quelque chose comme ça. Nous y voilà. Alors voyons 24, 14, allons-y 24. Et cette fois, nous y allons et nous l'avons peut-être ajusté pour quelque raison que ce soit. Mets-le à zéro comme ça. Mettons ça à zéro comme ça. Et maintenant, nous avons juste un texte normal sans ces problèmes. Donc 16 c'est partout, 24 c'est partout. C'est ce que j'aime. 17 juste en bas. Cela devrait en fait être 24. Donc 241 616,24. Peut-être devrions-nous étendre cela un peu moins. Zéro. Nous y voilà. Maintenant, nous sommes 24 partout. Pour 50. OK, alors on y va. Maintenant que c'est fait, nous pouvons regrouper cette carte dorée. Eh bien, restons comme ça. Donc carte de voiture. Et créons un composant et nous allons nous débarrasser de celui-ci. Et nous allons mettre un ensemble de composants, il suffit de le mettre de ce côté. Et ici, nous allons l'étendre comme cette variante, qui est celle-ci. Il s'agit en fait de se débarrasser de celui-ci. Et ajoutons une variante. Mais je ne comprends pas vraiment pourquoi il le met ici. Mais ça n'a plus d'importance maintenant. Ça l'est. Alors appelons-le simplement Hover. Survolez. Nous y voilà. Pour le survol, la seule chose dont nous avons besoin est de le montrer. Nous y voilà. C'est à peu près ça. Passons maintenant à l'état par défaut, passez au prototype et connectons les deux. Donc, en survolant, cela va passer à l'instance suivante. Nous y voilà. Et maintenant, je vais juste rapidement le faire glisser ici. Passez au design. Nous y voilà. Alors maintenant, la seule chose qui reste fondamentalement ici est celle-ci. Alors, comment pouvez-vous réellement résoudre ce problème en ayant cette même bordure sur cette image. Revenons donc à l'image par défaut de la voiture d'État. Et je vais avoir un coup de chaleur, et je vais avoir le même accident vasculaire cérébral comme celui-ci. Nous y voilà. Et je vais le cacher. Revenez ici, faites le même trait pour le montrer. Alors voilà. En gros, des décès, à quel point c'est facile et super simple de créer une mise en page comme celle-ci. Mais ici, ce que nous pouvons faire , c'est peut-être aussi le cacher. Devons-nous examiner cette mise en page et ce que nous avons fait ? Nous avons donc le remblai et nous avons la bordure. Et la bordure indique que c'est zéro pour cent. Stock. L'élément B, G, E de largeur est à 374 dans l'image actuelle, est-ce 372 ? Nous y voilà. Je suis vraiment désolée. En fait, cette image ne rencontre aucune bordure. Débarrassons-nous donc de celui-ci et faisons de même ici. Nous y voilà. La seule chose dont il a vraiment besoin, c'est de battre 372 comme ça. Et assurez-vous de sélectionner ces deux. Nous aurions dû le placer au centre, comme ceci, de sorte que vous ayez un pixel de chaque côté. Voilà, 372, on y va. Il suffit de le placer d'un pixel au centre. Peut-être devrions-nous même le pousser d'un pixel vers le bas. Je pense. Quelque chose comme ça. Mais à mon avis, cela n'a pas vraiment d'importance. Vous pouvez simplement le laisser comme ça parce que ce n'est qu'un petit détail. Et il ne sera visible que pendant une seconde. Tout dépend vraiment de toi. Si tu veux, tu peux appuyer dessus. Mais pour l'instant, je vais arrêter, désolée pour mon nez. J'ai encore un peu froid, mais je voulais quand même aller de l'avant et vous proposer cette mise à jour afin que vous puissiez profiter à la fois de Figma dans XD pour la liste que nous devrions vraiment faire. Avant de terminer cette section, il suffit de créer cette mise en page de base pour ce tableau d'art particulier. Et nous pouvons utiliser cet aéroport partout. Alors appuyez sur F comme ça. Je vais l'appeler, par exemple taille du tableau d'art, les paramètres de nos tableaux ou, disons page Web de notre transporteur portuaire. Appelons-le ainsi. Réglons-le pour l'entendre. Voyons que les paramètres que nous avons ici sont 40, 40 pour la largeur. Donc, pour 14 ou 40, on opte pour la hauteur, peu importe. Nous pouvons ajuster cela plus tard. Nous allons maintenant ajouter une grille de mise en page. Il suffit donc de cliquer ici au lieu de cette grille, cliquer ici sur les colonnes, 12 colonnes. Voyons la mise en page que nous avions ici. Comme vous pouvez le voir, c'est un effondrement total de 38, 65, un contre un. Essayons donc de reproduire cette même mise en page. Voyons donc, tout d'abord, la couleur peut changer en cours d'utilisation, une sorte de couleur, je ne sais pas, peut-être bleutée ou rougeâtre je ne sais pas, peut-être bleutée ou rougeâtre, quelque chose comme ça. Nous pouvons ajuster la visibilité à peut-être 5 %, juste pour que vous puissiez voir ce que je fais et y mettre fin. Alors allons-y dans le caniveau. À cause de la COVID 38. Voilà. Et les marges de chaque côté doivent être individuelles. Nous y voilà. Nous avons donc maintenant ces deux marges, 38 et la colonne, qui devraient être 65. Alors allons-y. Ça me montre la voiture, mais je peux y aller dans les deux sens. Donc, une fois 213085 morts, c'est tout à fait normal. Et nous y voilà. Maintenant, nous allons simplement le réutiliser lorsque nous commençons avec le design et le coller ici. Et voilà, en quelques clics. Nous avons configuré nos documents. Et en gros, il a exactement la même apparence, contrairement à ce document XD sur lequel nous avons travaillé jusqu'à présent. Encore une fois, si vous souhaitez approfondir tous ces détails concernant cette conception, assurez-vous de consulter la section x D sur la réflexion qui sous-tend la conception, sur l' ensemble du processus, en particulier en ce qui concerne les wireframes papier , l'architecture des quantités de recherche , etc. Mais cela garantit simplement que le processus de conception réel de Figma et quelle est la différence entre FEMA dans XD ? Dans la vidéo suivante, nous allons aborder la conception du site Web en tant que telle. Je vais vous montrer comment réutiliser ces composants que nous avons créés ici. Alors je te verrai là-bas. 154. Configuration de page de conception: Dans cette vidéo, archivons et commençons à créer le design. Et je vais vous montrer comment recréer un design que nous avons déjà fait dans Adobe XD dans Figma. Alors allons-y. Nous voici donc de retour à Figma, et c'est là que nous nous sommes arrêtés la fois précédente. Donc, ce que je vais faire tout d'abord, c'est cette page Web que nous avons. Je vais appuyer sur Control C, à la conception du site Web lui-même, accéder à cette page, appuyer sur Control V pour le coller à l'intérieur. Et je vais le positionner ici. Évidemment, nous n'allons pas l' utiliser car nous avons déjà créé ce design dans Adobe XD. Mais si vous créez ce document pour première fois ou si vous le partagez la première fois ou si vous le partagez avec vos clients, vos collègues sont des designers. C'est extrêmement utile d'avoir quelque chose comme ça, car ils peuvent toujours faire référence au papier par cadre et y revenir pour plus de détails. Donc, si je vous ramène au document Adobe XD, nous avons 123 456 pages. Commençons donc par cela. Donc Contrôle D, Contrôle D, Contrôle D, Contrôle D, Contrôle D. Donc 123456. Et donnons-leur tous des noms. Donc, tout d'abord, ce sera la page d'accueil. Ensuite, nous aurons des voitures. Ensuite, nous aurons sélectionné la voiture. Ainsi, lorsque vous sélectionnez une carte sur la page du cours, revenez à la carte sélectionnée et je vais vous expliquer l'ensemble du processus en une seconde, cas où vous n'auriez pas regardé les vidéos XD. Et je vous recommande vivement de les regarder car, comme je ne cesse de le mentionner, je ne vais pas entrer dans trop de détails ici. Pour ne pas trop me répéter et pour ennuyer les personnes qui ont déjà regardé la partie du cours consacrée aux leçons XD. Il s'agira donc de prêts. Et puis vers d'autres pages, nous avons « Contactez-nous ». Enfin, ce ne sera qu' une superposition pour la boîte à lumière. Et comme la boîte à lumière va être coupée, vous allez avoir une hauteur de 1080 pixels. Nous y voilà. Et cela va juste surpasser la superposition elle-même. Permettez-moi donc de vous expliquer rapidement le fichier XD, comme suit. Et je vais expliquer en gros ce qu'est ce site Web si vous n'avez pas regardé la partie XD du cours. Nous avons donc ici la page d'accueil. Et sur la page d'accueil, nous allons essentiellement afficher l'offre complète de ce discours. Ce ne sera donc qu'une simple page de prêt. Ces sites Web, donc qui ils sont, me permettent de masquer ces lignes pour que vous puissiez les voir. Ces guides. Alors qui ils sont, ce qu'ils représentent. Ce sont donc des concessionnaires automobiles exclusifs. Donc, en gros, ils vont vendre ces voitures haut de gamme et non ces voitures bon marché que vous pouvez trouver pratiquement dans n'importe quel autre magasin ou chez n'importe quel autre concessionnaire . Donc, en gros, ces gars-là sont un peu différents parce qu'ils vendent ces voitures haut de gamme. Nous voulons donc représenter cela et nous le ferons en termes d'imagerie. J'ai donc déjà fourni ces images et vous pouvez les voir ici. En gros, voici à quoi ils vont ressembler. Vous avez un tas de ces différentes images que nous utiliserons pour le développement de notre Webflow et non pour la conception. Parce que pour le design, nous allons simplement utiliser une de chaque carte, essentiellement pour créer ces cartes Nous avons déjà créé une sélection exclusive sur la page d'accueil qui montrera la sélection de ce site Web et de ce revendeur, ce qu'ils proposent, ce qu'ils ont en stock pour le moment, ce qu'ils proposent. Donc, dans ce cas, garantie prolongée , maintenance et prêts. Ce ne sont là que quelques fonctionnalités clés qu'ils vont offrir à leurs clients, leurs avantages. Ils vous offriront la livraison gratuite peu importe où vous vous trouvez dans le pays. Polissage en trois étapes. Donc, avant de livrer le dessin animé, ils vont le peaufiner en trois étapes, en échange partiel. Cela signifie qu' ils vont vous enlever votre ancienne voiture et en déduire le prix de votre ancienne voiture, qu'ils jugeront essentiellement en fonction du nombre de kilomètres parcourus, du stade dans lequel jugeront essentiellement en fonction du nombre de kilomètres parcourus, du se trouve la voiture en ce moment et n'a pas été détruite. Y a-t-il des dommages dessus et ainsi de suite ? Ensuite, nous avons la page Contactez-nous. Nous savons où nous en sommes avec la page de la carte et nous avons le pied de page. Maintenant, ces sections que vous allez remarquer vont se répéter beaucoup. Nous avons donc ici la carte des contacts et le filtre plis de la carte de contact ou pied de page de la carte de contact, le bas de page de la carte de contact. Il vous sera donc très bénéfique de les créer en tant que composants une fois que vous les aurez terminés. Et c'est ce que nous allons faire. Et en gros, cette page est ce site Web lui-même sera très simple à créer dans Webflow plus tard. Et si je ne vais pas utiliser ce plugin issu flux de travail de l'outil Figma qui ont été eux-mêmes publiés , c'est à cause de cette page en particulier. Oui, vous pouvez le créer dans ce plug-in, mais ce sera le cas, en empruntant de nombreuses voies différentes pour que cela fonctionne dans Webflow. Donc, à cause de cette page elle-même, je ne vais pas utiliser ce plug-in, mais je vais néanmoins vous le montrer dans l'une des leçons suivantes. Juste pour que vous puissiez voir comment créer un site Web comme celui-ci dans Webflow Pauper, cette page en particulier. Cela ne fonctionnera pas dans Webflow car nous allons utiliser différentes techniques. Alors, gardez cela à l'esprit. Si vous essayez de créer quelque chose à l'aide de ce plugin, assurez-vous de le tester d' abord et de voir s'il fonctionne. Oui, vous pouvez créer une mise en page comme celle-ci dans Figma. Cela vous sera bénéfique de toute façon et vous n'aurez pas à importer toutes les pages. Vous pouvez créer certaines pages manuellement car vous pouvez créer des composants dans Webflow Vous pouvez créer des composants dans Figma qui va importer tous ces styles, choix de couleurs, polices et composants de figma vers Webflow. Vous pouvez donc utiliser certaines d'entre elles, mais gardez simplement à l'esprit que ces pages sont comme celles-ci, car elles nécessitent une réflexion supplémentaire et originale. Et en gros, du piratage de Webflow pour les faire fonctionner, car il n'y a aucune option par défaut dans Webflow prédéfinie pour créer de telles mises en page. Donc, pour ces pages de base comme celle-ci, comme celle-ci, ces deux-là, ça va très bien fonctionner. Mais dès que vous rencontrez quelque chose comme ça avec cette mise en page, avec cette mise en page collante, avec cette superposition. Ainsi, lorsque les utilisateurs cliquent sur l'une de ces images, options de cette boîte à lumière leur seront affichées. est donc là qu'il se décompose. Je voulais donc juste te le montrer et te l'expliquer. Bien sûr, les images proviennent d'Envato Elements, dont j'ai déjà parlé dans la section XD. Et vous avez la possibilité d'obtenir toutes ces images si vous l'abonnement premium Envato Elements, car ces images sont des images premium Si vous ne le souhaitez pas, vous pouvez utiliser des images gratuites. C'est à vous de décider. Mais si vous voulez utiliser ces images exactes que j' utilise dans mon design. Vous devez les utiliser sous licence auprès d'Envato Elements, sinon vous ne pourrez pas les utiliser dans votre portefeuille. Assurez-vous donc de consulter également cette licence. Assurez-vous de consulter ce PDF, assurez-vous de consulter toutes ces images que je fournis dans cette collection particulière. Et comme je l'ai mentionné, tous ces actifs proviennent d' Envato Elements. Ce sera donc tout pour cette leçon en particulier. Dans la leçon suivante, nous allons commencer par la page d'accueil et je vais étendre un peu comme ça. Vous pouvez donc simplement cliquer ici. Et comme je l'ai dit, nous allons partir de la page entière et commencer à créer la mise en page de notre page d'accueil. Alors je te verrai là-bas. 155. Conception de page d'accueil: Allons-y et commençons par la page d'accueil. Et la première chose que je veux faire est de me rendre dans mes actifs et de rechercher un logo. Juste ici, en haut. J'ai ce logo. Je vais le glisser-déposer quelque part par ici. Permettez-moi de vérifier mon design original. Je pense que je le positionne à 20. Ce que je peux faire, c'est le placer en haut, le déplacer deux fois vers le bas, maintenir ma touche Alt ou option enfoncée et voir que je suis à 20 pixels. Ensuite, je vais créer la navigation. Je vais donc taper des voitures comme ça. Et je vais choisir l'option prédéterminée pour les styles de texte. Allons-y avec le bloc de texte. Nous y voilà. Laisse-moi juste vérifier. Oui, nous y voilà. Je vais juste utiliser cette couleur, donc gris foncé dans ce cas. Et laissez-moi l'aligner facilement avec mon logo. Vous pouvez sélectionner les deux. Vous pouvez cliquer ici, vous assurer qu'ils sont alignés et les déplacer de trois pixels vers le bas. Nous y voilà. Maintenant que nous avons des voitures, je peux appuyer sur Control G pour les regrouper. Et je vais l' appeler Top Nav et le transformer en mise en page automatique dans cette direction. Et voyons, à partir de ces deux D, que je peux faire quelque chose comme 24. Je pense que ça va très bien se passer. Appuyez sur Ctrl D, Ctrl D pour faire deux copies supplémentaires. Celui-ci sera un Lowe's et celui-ci, ici, sera Contactez-nous. Nous y voilà. Maintenant que c'est fait, je vais tous les sélectionner. Alors Top Nav et assurez-vous de les photographier ici. Tout d'abord, nous devons créer des composants pour chacun d'entre eux, car il s'agit d'un état par défaut. Si cela vous ramène à XD, si vous ne l'avez pas visionné, assurez-vous de le visionner à nouveau. Nous avons donc l'état de survol et nous avons l'état sélectionné. Donc, si je zoome un peu plus près ici et choisis que l'état par défaut de ma voiture est cette couleur gris foncé, l'état d' Horace est cette couleur de survol, que vous pouvez voir ici. Et puis l'état sélectionné est cette couleur bleue principale. Cela sera sélectionné lorsque vous serez sur la page où vous vous trouvez actuellement pour les créer. Revenons donc à Figma. Et pour faire quelque chose comme ça, ce que je peux faire, c'est les sélectionner tous, appuyer sur Control C et les emmener à l'extérieur, quelque part par ici. Parce que je voulais être capable de créer ces composants. Je vais donc les sélectionner tels quels. Et je vais transformer cela en composant, transformer cela en composant et ceci, puis je vais en créer deux autres comme ça. Et ajoutez une autre variante à une variante, à une variante, ajoutez une variante et ajoutez une variante. Laisse-moi les espacer un peu. Maintenant, ce qui est ennuyeux propos de Figma, si vous me le demandez, c'est que vous ne pouvez pas le faire dans votre tableau d'art comme vous le pouvez dans XD. Ainsi, au lieu d'utiliser XD, vous pouvez simplement les changer sur place. Mais ici, à Figma, vous pouvez le faire ici même. Ensuite, vous pouvez choisir l' état que vous souhaitez, mais cela continue de créer ces variantes. C'est donc quelque chose que je n' aime pas vraiment dans Figma, mais que pouvez-vous y faire ? Alors allons-y. Il s'agit de notre état par défaut. Ce sera notre état d'horreur. Je vais donc simplement sélectionner le type en survolant. Sélectionnez mon survol, comme ça. Appuyez sur Control C. Et voilà. Et je vais sélectionner celui-ci. Quelle variante 2. Ensuite, je vais également y coller en couleur. Sélectionnez celui-ci en fonction du survol. Ici. Nous y voilà. Et c'est ce dernier qui va être sélectionné. Sélectionné. Permettez-moi de sélectionner, sélectionné. Laissez-moi le faire ici. Et je le fais parce que ce sera beaucoup plus simple pour moi de les organiser plus tard. Parce que ce qui vient ensuite consiste simplement à changer ces couleurs ici et là. Maintenant que nous y sommes, sélectionnons tous les états d'horreur. Passons maintenant à la couleur de remplissage. Oups, pas la couleur de fond, mais sélectionnez le texte lui-même au lieu du gris foncé. Passons à la couleur, à la couleur, à la couleur de l'horreur , puis sélectionnons celle-ci au lieu du gris foncé. Passons au bleu principal. Bleu principal, et allez à l'intérieur, appuyez sur le bleu principal. Nous y voilà. Maintenant que cela a été créé, ce que nous pouvons faire ici, c'est les tester. Donc, ce que je peux faire, c'est que je peux réellement m'en débarrasser. Permettez-moi donc d'accéder à mon panneau d'actifs. Et en fait, ce que je peux faire, c'est sélectionner ces domaines de base ici. Et voilà, Control G. Transformez cela en Auto Layout 24. Oups, c'est 62424. Nous y voilà. Assurez-vous que nous sommes au centre de ces deux. Nous y voilà. 24 ou 2018, 20. Il suffit de le déplacer et d'estimer. Donc, ici, je vais sélectionner cela et vous pouvez voir que nous avons des voitures, nous contacter et des prêts. C'est donc ce que nous avons ici. Et ici, nous avons la valeur par défaut, nous avons le survol. Nous l'avons sélectionné. Je vais donc sélectionner la valeur par défaut et ce seront nos options pour ce composant en particulier Vous pouvez détacher une instance si vous souhaitez acheter et si vous apportez des modifications à ces composants principaux, ces instances suivront. Allons-y rapidement et renommons-les en Top Nav. Nous y voilà. Et je vais le faire glisser ici. Maintenant que c'est fait, allons-y, regroupons cela et quand l'appeler navigation. Et en dessous de la navigation, nous allons essentiellement inclure cette section consacrée aux héros. Créez donc une section consacrée aux héros. Et je vais les copier très rapidement. voilà, Control D. Et nous allons prendre celui-ci. C'est parti, Control D tout de suite. Je vais le remplacer par ceci. Je vais changer la couleur de fond en gris foncé. Ce sera le H1. Nous y voilà. Je vais bien les aligner ici. Charmant. Et puis les actifs. Je vais faire glisser mon bouton dedans. Pour mon bouton, je vais taper quelque chose comme explorer des voitures. On y va, Nice. Ensuite, je dois créer ce groupe. Donc Control G. Permettez-moi de passer aux couches. Ce seront nos textes de héros. Nous y voilà. Transformons cela en mise en page automatique en abaissant 32 pour être la distance. Assurez-vous de les espacer sur le côté gauche. voilà, c'est sympa et facile, n'est-ce pas ? Et une dernière chose dont nous avons besoin ici est de créer notre section de héros. Maintenant, pour ce faire, je vais apporter mon image. J'ai donc mon image du Maclaurin. Nous allons le placer juste là , puis créer deux cercles. C'est donc un hit. Très bien, le voilà qui change. Nous y voilà. Contrôlez D pour le dupliquer, positionnez-le à peu près par là. Et je vais appeler ce petit cercle. Et ce sera un grand cercle. Nous y allons et le positionnons ici et là. Maintenant, en ce qui concerne le petit cercle, ce que nous allons faire en termes de taille, c'est de lui donner 1054105 juste pour qu'il ait exactement le même lac dans notre design original dans XD et ce grand cercle Voyons voir, peut-être pouvons-nous le créer à 13130. Comme ça. Nous y voilà. Et je vais sélectionner la page entière et masquer cette mise en page pendant une seconde. Nous y voilà. Agréable et facile. Et ce qui nous manque ici , c'est ce cercle blanc, je pense. Alors, tout d'abord, changeons les couleurs réelles. Donc, ce cercle PG devrait être, désolé, pas ça, mais ceci, devons-nous dire bleu et ce cercle ici devrait être gris foncé. Nous y voilà. Et maintenant, il me faut créer ce cercle d'arrière-plan. Revenons ici. cercle de l'image du héros est donc de 388 par 388. Dupliquons donc celui-ci. Cercle d'images de héros. Voyons voir, la couleur sera blanche et la taille sera 388. Par 388. On y va, quelque chose comme ça et on le place juste derrière cette image de héros. Et assurez-vous qu'ils sont centrés, quelque chose comme ça. Nous y voilà. Assurez-vous que c'est ici, c'est ici. Et je pense que c'est génial. Juste pour vérifier cela très rapidement car cela ne montrait pas les couleurs de la carrosserie. Cachons-nous donc cette année, nous avons les cercles de héros. Nous devons tous le créer car je l' ai exporté à partir du design original sous forme d'image. Maintenant, allons-y et appliquons réellement ce changement à tous ces éléments. Donc je vais juste maintenir Shift. Et pour la couleur de remplissage, je vais utiliser la couleur de la carrosserie. Nous y voilà. Maintenant, la prochaine chose que je vais faire est rétablir mes chroniques juste pour que nous puissions voir ce que nous faisons. Et ici, je vais vous présenter quelques icônes. Alors, tout d'abord, introduisons l'icône clé ici. Je vais le pousser, le mettre au centre. Et voilà, Control G pour le grouper. Et puis ici, je vais utiliser cette autre icône pour ce type de métal, comme celle du badge. Assurez-vous que ces deux éléments se trouvent dans la commande centrale G. Et voilà, revenons aux couches. Et dans XD, je vais le nommer ainsi. Et un nom et des aversions. Positionnez-le donc un peu plus bas, positionnez-le ainsi. Et je vais regrouper tout cela et l'appeler Hero IMG. Nous y voilà. Ce que je peux faire, c'est les sélectionner tous les deux, assurer qu'ils sont alignés au centre. Voyons voir, peut-être pouvons-nous les 100 à partir de l'image du héros, depuis la navigation supérieure, désolée. Maintenant que nous avons l' image, nous avons le texte. Ce que nous pouvons faire, c'est les regrouper pour les appeler héros. Nous passons à la section suivante. Et pour la section suivante, nous n'aurons besoin que de cette image. Mettez-le en place comme ça, puis utilisez simplement quelques lignes de texte. Alors, commençons par D. Organisons un peu nos textes. Alors faisons-le encore une fois. Nous y voilà. Contrôle D. Et je vais en utiliser un autre. Contrôle D. Je vais en utiliser un autre. Nous y voilà. Maintenant, celui-ci devrait être un paragraphe, celui-ci devrait être h3. Celui-ci devrait l'être, voyons voir. Bloc de texte. C'est très bien. Juste une couleur différente, gris foncé. Nous y voilà. En termes d'espacement. Passons de C à D à D à E. Donc, il devrait y avoir trois paragraphes là-dedans. Nous y voilà. Pour ce qui est de l'espacement, allons-y avec 24. Donc, ce que je peux faire, c'est m' assurer qu'ils restent seuls. Nous devrions les regrouper. Qui sommes nous Texte, activez la mise en page automatique vers le bas 24. Nous y voilà. Et assurez-vous simplement de le positionner ici. Nous avons donc 12345 lignes, puis cette image va l'aligner sur le centre. Cliquez sur Control G pour l'appeler qui nous sommes. Et la distance qui nous sépare d'ici est de 200. Donc quelque chose comme ça. Donc 200. Allons-y et passons à la section suivante. La section suivante sera consacrée à cette offre exclusive. Donc, pour ce faire, créons un élément de texte comme celui-ci. Collez notre sélection exclusive pour vous assurer que nous sommes au centre et assurez-vous de choisir h trois. Nous y voilà. Assurez-vous de le placer au centre, de manière à ce qu'il soit à 200 par rapport à la section ci-dessus. Alors, il suffit de le pousser ici. Voyons 200. Charmant. Ce que nous allons faire, c'est intégrer les cartes que nous avons créées. Nous pouvons donc les trouver ici. Nous y voilà. Nous avons ici la même carte. Positionnez-le juste là. Et ce que nous allons faire, c'est placer le 64 ici. 64 ans, nous y voilà. Et je vais passer à Control D pour le dupliquer. Control D va le placer ici. Et je vais revenir en arrière et trouver mon bouton, le positionner là, m' assurer qu'il est au centre. Et assurez-vous que cette carte se trouve à une distance de 64. Maintenant, ce bouton devrait indiquer « Voir toutes les voitures ». Encore une fois, parce que c'est génial avec Figma et pas génial avec XD. Lorsque vous passez en mode survol, le texte change automatiquement. Dans XD, vous devez le modifier manuellement. Permettez-moi donc de remplir quelques textes. La Cadillac Escalade sera donc celle-ci. Le prix sera le suivant. Tu vois, l'année sera 2020. Comme ça. Et laissez-moi passer à mon panneau de couches et voici où nous en sommes, tant d'années, cartes de kilomètres, de champ de texte. Cela devrait être un peu différent car nous avons 28 distances ici. Changeons cela à ici. Je ne sais pas pourquoi c'est 28, ça devrait être 24. Donc, pour une raison quelconque , il est mis à jour ici. Peut-être devons-nous fixer la hauteur, pas la largeur. Je sais que pour une raison ou une autre, ça ne changera pas ou Derek, donc ça change quand un interrupteur doit être réparé, je crois. Oui. Donc, quand je passe à largeur fixe, largeur fixe ici, largeur fixe. Donc, lorsque je change la hauteur en largeur fixe, je reviendrai à 24. Faisons-le donc pour chacun d'entre eux. Donc, à hauteur fixe, on y va. Et largeur fixe. Je ne sais pas pourquoi c' est arrivé. Parce que lorsque vous passez à autre chose, tout est intégré, XD reste tel que vous l'avez demandé. Ce sera donc Lucid Air. Ce sera le prix. Et ce seront les kilomètres, et l' année sera 2022. Nous y voilà. Maintenant que cette section est terminée, ne me reste plus qu'à la tester rapidement. Vous voyez en vol stationnaire, on y va. Cela a donc changé et on s'en est souvenu, ce qui est très agréable. Je vais donc me rendre sur la page de mon cours. Et localisez un capot Lamborghini apparu et sélectionnez-le. Donc, pour l'image de la voiture. Et je vais aller de l'avant et le transformer en remblai. Fais la même chose ici. Il suffit donc d'ajouter un remplissage. Et voilà. Que s'est-il passé ? Et je vais placer mon image en haut du remplissage. Faites de même pour Cadillac Escalate. Il suffit de localiser l' image numéro trois. Positionnez-le dessus. Et cela va fonctionner un peu plus lentement si l'image est grande, même si je l'ai optimisée. C' est le problème avec Figma. Vous ne pouvez pas simplement glisser-déposer des images. Comme si vous pouviez manger Adobe XD, c'est ce qui est vraiment ennuyeux dans cet outil. Donc, quand je le fais glisser, il va le placer. Nous y voilà. Alors Lucid, Air, image numéro trois et placez-la juste là. Nous y voilà. Nous avons nos cartes. C'est super. Alors organisons cela un peu mieux. Permettez-moi donc, tout d'abord, d'inclure ces cartes dans une voiture de groupe. Des cartes. Nous y voilà. Transformez la mise en page automatique. Nous y voilà. Et maintenant, sélectionnez tout cela. Et une sélection exclusive. Nous y voilà. Et transformez cela en mise en page automatique. Maintenant que cette section est terminée, la section suivante sera la section Offres. Alors allons-y et créons cela. Alors, tout d'abord, allons-y et copions ceci. Alors notre sélection exclusive, allez-y et cliquez ici, là où elle se trouve, juste ici. Et voilà, à l' intérieur de la navigation. Mais ici, nous devons organiser cela. Nous y voilà. Et je vais également placer ce chiffre à 200. Comme ça. Alors, ce que nous proposons, c'est parti. Et j'ai besoin de cette image très rapidement pour montrer ce qu'ils proposent à cette position. Et voyons voir, nous pouvons l'avoir à 64 pixels de ce bord. Assurez-vous de l'aligner. 64. Nous y voilà. Il ne me reste plus qu' à taper ce texte. Mais avant de le faire, je voudrais faire glisser ces icônes très rapidement. J'ai donc besoin du cycle de maintenance. J'ai besoin de l'icône de garantie prolongée. Laisse-moi le trouver très rapidement. Pour une raison ou une autre, cela ne s'affiche pas ici. D'accord. Voyons les prêts. Prêts. Nous y voilà. Si nous choisissons la garantie, je vais juste utiliser celle-ci. Cela n'a pas d'importance. Alors allons-y et remplissons-le en étant bleus. Ou voyons ce que nous pouvons faire. Donc, quand je suis passé à Layers, ouvrez-le. Nous avons donc un rôle ici. La pièce est remplie. Donc bleu principal, celui-ci a un fond dessus. Alors peut-être que celui-ci est rempli en bleu. Donc, bleu principal, on y va. C'est donc fait. Maintenant, cela devrait être en haut, car nous voulons afficher la garantie prolongée ici, puis cela devrait être en baisse et cela devrait également être en dessous. devraient donc tous être alignés sur celui-ci. Alors allons-y et commençons. Je vais donc choisir l'outil de texte ici. d'être prolongée garantit que je suis là. Voyons voir, 24 boulons. Cela va donc nous amener à l'âge de trois ans. Charmant. Et maintenant, ce que je peux faire, c'est sélectionner ceci, dupliquer, dupliquer les tomates. Nous y voilà. Ce que je vais faire, c'est m' assurer que ces deux éléments sont centrés. Ces deux sont centrés. le sont aussi. Nous y voilà. Je veux essentiellement dupliquer cela comme ça. Assurez-vous qu'il s'agit d'un bloc de texte. Assurez-vous de le positionner ici, et assurez-vous d'utiliser la couleur gris foncé Control D. Control D. voilà. Maintenant, ces deux-là, je vais passer à mon panneau Calques et m' assurer de les regrouper. Je vais les regrouper, je vais dissocier les deux. Nous y voilà. Ainsi, la mise en page automatique, la mise en page automatique et la mise en page automatique seront de 16. Ça va être 16 aussi, et ça va être 16 aussi. Ce dont nous avons besoin ici, c'est de taper le mot maintenance. Ce dernier devrait dire, euh, plein de choses. Dans le dernier, nous devrions avoir ce texte. Dans celui-ci. Nous devrions avoir ce texte. C'est donc essentiellement ce qu'ils proposent. Donc, voici ce que je vais faire, c'est taper Los. Ce sera de la maintenance. Et ce premier devrait être 1.2. Cela devrait indiquer une garantie. Nous y voilà. Et maintenant, les distances entre le texte et le titre doivent être de 24. Donc, en fait, sélectionnons ceci, mettons-les dans un groupe. Sélectionnons-le, mettons le groupe amino et ce groupe. Il s'agit donc de prêts, celui-ci de maintenance. Et enfin, celui-ci est 1.2. Donc, quand je mets cela dans la mise en page automatique et que j'utilise 24, fais de même pour celui-ci. Et faites de même pour celui-ci. Ce que je peux également faire, c'est les mettre dans une autre mise en page automatique si je le souhaite. Donc, comme ça et la distance qui les sépare toutes. Alors appelons-le quelque chose comme un texte d'offre. Ce texte semble un peu petit. Ça devrait être H2, en fait. Cela devrait également être H2. Alors, changeons-le. Nous y voilà. Et je pense que cela devrait aussi être H2, si je ne me trompe pas. Oui. Donc, au lieu de H trois, passons à H12, assurons-nous qu'il est aligné. Oui, ça l'est. Celui-ci est à 64, 200 degrés, celui-ci 48. Donc, ce que je peux faire, c'est peut-être le pousser à 64. Ici, passe à 200. Alors ça devrait être à 64 ans. Nous y voilà. Et puis cela devrait être une mise en page automatique à 40 et placez-la simplement juste en haut, comme ça. Ou peut-être que vous pouvez même le mettre au centre, peu importe, cela couvrira la dette de toute façon. Donc, ce que nous proposons de textes, c'est parti. Je vais donc sélectionner ces trois touches Control G, ce que nous proposons ainsi et ici, vous pouvez les mettre dans une mise en page automatique si vous le souhaitez. Je ne vais pas m'embêter avec ça. Je vais simplement passer à la section suivante. Dans la section suivante, vous trouverez les avantages. Donc, dans ce cas, nous allons très rapidement profiter de certains avantages. Imaginez un endroit assis juste ici. Assurez-vous que nous sommes au centre. Ça fait en sorte que nous soyons 200. Encore une fois, à partir de l'image ci-dessus, nous y voilà. En plus de la dette. Ce que je vais faire, c' est simplement dessiner un rectangle, alors appuyez sur R et assurez-vous qu'il est couvert de cette manière, sorte qu'il couvre toute la largeur de notre image. Et cela s' appellera le contexte de la section des avantages. Nous y voilà. Cela peut être cette couleur de remplissage. Voyons donc, peut-être pour chaque paragraphe et chaque image, nous allons simplement réduire nous allons simplement réduire l'opacité à dix pour cent. Alors allons-y avec quelque chose comme ça pour avoir cette belle image transparente. Je pense que ça a l'air génial. Salut, allons-y et organisons nouveau ces sections. Voyons donc ce que nous avons. Nous devrions avoir un GPS sur le dessus. Alors, héros, c'est ce que nous sommes. Il s'agit d'une sélection exclusive. Nous y voilà. Ensuite, ce que nous proposons et maintenant ces avantages vous seront utiles. Donc, ce que je peux faire tout de suite, c'est simplement les placer dans un groupe et appeler cela des avantages. Nous y voilà. Je vais donc sélectionner ce texte. types T sont des avantages. Nous y voilà. Agréable. Mets-le au centre de ces deux, comme ça. Et assurez-vous simplement que c'est là. Et voyons d'en haut, ce que je peux faire, c'est peut-être 95 ou quelque chose comme ça. C'est une distance si belle, Control D. Et pour celle-ci , utilisons H trois. Nous y voilà. Maintenant, ce sera une livraison gratuite comme ça. Et je vais le fusionner ici. Et voyons voir pour celui-ci, peut-être que nous pouvons en utiliser 16. Donc pour le paragraphe et pour la couleur, on opte pour le blanc. Donc, ça devrait aussi être blanc. Cela devrait également être blanc. Donc en fait, vous savez quoi, peut-être que nous pouvons utiliser cette couleur d'Artboard ici. La couleur de la carrosserie. Je pense que ce sera une bien meilleure option ici. Nous y voilà. Je vais donc appuyer sur Control D sur celui-ci ou non, plaçons d'abord une icône. Donc, tout d'abord, voyons voir, peut-être que nous pouvons les positionner à 24 de distance comme ça. Utilisons cette icône. Alors, tout d'abord, fermons ça. Et voyons voir, nous devons trouver cette icône. Poids, le localisateur. Nous y voilà. La distance entre les dettes devrait à nouveau être de 24. Voyons donc où nous en sommes pour le moment. 20. Nous avons donc 24 ans. Donc, si je les sélectionne et les regroupe tous, cliquez sur Layers. Livraison gratuite. Nous y voilà. Contrôle D ou Contrôle D une fois de plus. Nous y voilà. Maintenant, je vais simplement appuyer sur R, créer un rectangle, sélectionner ces deux et m'assurer de le positionner au centre. Ensuite, utilisez exactement le même rectangle. Revenez ici, alignez-le, déplacez-le, alignez-le sur la grille. Sélectionnez-les pour vous assurer que nous sommes dans un centre. Débarrassez-vous de ce rectangle. Nous n'en avons plus besoin. Maintenant, ce second devrait dire un polissage en trois étapes. Nous y voilà. Et il suffit de copier et coller les textes. Parce qu'encore une fois, ce ne sont pas les avantages que nous avons déjà mentionnés. Et ce dernier devrait être un échange partiel. Nous y voilà. Enfin, le texte à l'intérieur. Maintenant, en ce qui concerne ces éléments, ce que je peux faire s'appelle cet échange de pièces. Cela devrait être poli. C'est une livraison gratuite, c'est très bien. Ce dont nous avons besoin à ce stade c'est de remplacer ces icônes. Je vais donc sélectionner cette icône, revenir à mon panneau d'actifs et localiser mon icône polonaise. Donc, les laitières doivent essentiellement mettre ça dedans, revenir à des couches comme ça. Appuyez sur Supprimer. Assurez-vous que je suis au centre avec ce texte. Et je vais aller de l'avant et le porter à 24 heures. Nous y voilà, beaux et grands. Et enfin cette icône d'échange de pièces. Alors voyons voir, il suffit de localiser la voiture avec une clé de voiture. Nous y voilà. Et il suffit de le mettre en place, le positionner ici, puis sélectionner l'original, de s'en débarrasser. Nous y voilà. Revenez donc au panneau Calques et voyons échange de pièces comme celui-ci. Maintenant que nous avons cette section, ne nous reste plus qu'à espacer ces trois. Utilisez donc ces trois et réduisez-les à 64 grâce à ces avantages. Voyons voir. 64 ans, nous y voilà. Le vernis devrait donc être au centre. Faisons en sorte qu'il soit au centre. Nous y voilà. Et les avantages devraient également être au centre. Assurez-vous qu'il se trouve au centre. Nous y voilà. session sur les avantages est donc terminée. Ensuite, nous devons nous contacter. Nous avons le formulaire et le pied de page. Mais je ne vais pas trop vous ennuyer avec cette leçon, car nous en sommes déjà à 30 minutes ou quelque chose comme ça. Arrêtons-nous donc ici et continuons avec la page des héros. Dans la vidéo suivante, nous allons terminer ces trois sections car elles se répèteront tout au long de notre conception. Alors je te verrai là-bas. 156. Conception de page d'accueil: Allons-y et terminons cette section de la page d'accueil et le discours lui-même. Je vais donc taper T et taper Contactez-nous. Et je vais passer du bloc de texte au H12. Assurez-vous qu'il est au centre et qu'il est aligné comme suit. Et assurez-vous que c'est à 200 d'ici, comme ça. Et ensuite, ce que je vais faire, c'est dupliquer celui-ci également. Et je vais le sélectionner comme bloc de texte, comme ça. Et voyons voir, je peux le positionner peut-être à 64 à partir d'ici. Voyons voir. Comme ça. Et je vais utiliser cette couleur gris foncé. Nous y voilà. Je ne sais pas vraiment pourquoi il en hérite, mais peu importe. Utilisons donc cette couleur gris foncé et je vais écrire en nom complet ici. Et je vais l' aligner à gauche comme ça. Nous sommes donc à 64 ans, c'est génial. Et je vais appuyer sur Control et D encore une fois pour dupliquer cela. Et je vais utiliser les textes des paragraphes ici. Et je vais m' assurer de changer cela en, voyons voir, en trois paragraphes. Et je vais dire quelque chose comme Entrez votre nom complet. Nous y voilà. Et maintenant, je vais créer le champ de saisie pour cela. Alors voyons, utilisons un rectangle et faisons-en glisser un d'un bord à l'autre, comme ça. Maintenant, pour la distance, c'est bon et allons-y pour la hauteur de 60. Cliquez avec le bouton droit et vous pouvez voir, alors passez à la page, Envoyer vers Retour. Vous pouvez utiliser la barre oblique inverse si vous le souhaitez et assurez-vous de la positionner au centre même. Maintenant, en termes de couleur, cela va avoir la couleur blanche en termes de nom, ce sera un champ de saisie. Et maintenant, pour ce qui est de la distance qui les sépare, je vais déplacer ce 16. Ainsi, lorsque j'appelle ma touche Alt, vous pouvez voir qu'il y en a 16 sur la page de gauche et 17 en haut et en bas. Alors maintenant, allons-y et regroupons ces deux. Et je vais appeler cette entrée comme ça. Et je vais regrouper ces deux commandes G. Et je vais appeler ce nom comme ça. Voyons voir. Pour les distances, nous pouvons peut-être utiliser la mise en page automatique et 16, comme ça. Nous y voilà. Maintenant, appuyez sur Control D pour le dupliquer, et je vais le déplacer à 32. Alors voyons voir. 32. Nous y voilà. Maintenant, ce second devrait être un e-mail. Et le champ de saisie lui-même doit être plus court, donc six colonnes de large. Donc 123456. Et alignons cela sur la colonne. Nous y voilà. Joli agrandissement. Ce sera donc un e-mail. Tapez donc un e-mail. Et au lieu de saisir votre nom complet, il sera écrit « Entrez votre e-mail » comme ça. Maintenant, ce que nous pouvons faire ici, c'est placer cela dans un groupe et l'appeler milieu si vous le souhaitez. Mais je ne vais pas le faire, je vais juste appuyer sur Control D pour le dupliquer, le positionner ici et l'aligner sur la page. Je ne sais pas vraiment pourquoi. Il me le montre pour une raison ou une autre. Mais nous sommes prêts à partir, je pense. Alors allons-y jeter un coup d'œil. Pour une raison ou une autre. Il ne s'accroche pas au réseau. La largeur est donc de cinq AT, alors assurez-vous qu'il s' agit également de cinq AD. Nous y voilà. Maintenant, il va parfaitement s'intégrer à la grille des deux côtés. Celui-ci ne sera donc pas envoyé par e-mail. Celui-ci va être amusant. Je vais taper sur le téléphone. Entrez votre numéro de téléphone. Super. Et maintenant, dupliquons celui-ci et positionnons-le ici. 32. Il s' agira d'un e-mail ou d'un message. Et cela va dire quelque chose comme écrivez votre message. Ici. Nous y voilà. Et maintenant, renommons cela en message et assurons-nous de le positionner ici. Et ce domaine, nous allons l'étendre un peu. Il fera donc 171 m de haut, juste pour donner à nos utilisateurs un peu plus d'espace afin qu'ils puissent inclure n'importe quel type de message . Suture aux actifs, utilise notre bouton principal. Et ici, nous allons avoir même distance de 30 pour nous assurer de l'aligner à gauche, de double-cliquer à l'intérieur et de taper « envoyer un message ». Nous y voilà. Et revenez à la position du panneau des couches ici et assurez-vous de ****** nous contacter ici. Je vais les regrouper, les appeler entrées. Et je vais regrouper tout cela, le positionner, être contacté. Et voici la partie cruciale. Si je te montre ça, alors contacte-nous. Je vais sélectionner l' ensemble de ce champ et le transformer en un composant. Maintenant, cela va me permettre de le copier et de le coller dans toutes ces autres sections que je vous ai déjà montrées précédemment. Alors allons-y et créons le suivant. Assurez-vous donc que nous sommes 200. Oui, nous le sommes. Notre prochaine section sera donc celle où nous en serons. Alors, faisons rapidement glisser une carte comme celle-ci, nous assurer que nous sommes ici , que nous sommes à 200 de celle-ci. Comme ça, on y va. Alors maintenant, ce que nous allons faire ici c'est utiliser ce même H12. Alors, où en sommes-nous ? Et je vais utiliser celui-ci comme H12. Nous y voilà. Aligner à gauche. Ça fait en sorte qu'il y a deux grilles ici. Maintenant, c'est un bloc de texte. Nous utiliserons du gris foncé. Utilisez celui-ci, assurez-vous qu'il est aligné à gauche , positionnez-le là. Voyons voir, nous serons à 24 de ce bord. Voyons voir. 24. Charmant. Ce sera donc le titre. Et assurez-vous de le pousser jusqu'ici. Positionnez-le en haut, juste pour avoir assez d'espace ? Maintenant, nous aurons besoin de quelques icônes ici. Donc, la première icône dont nous aurons besoin est de faire glisser un téléphone. Faisons glisser une horloge, celle-ci, et peignons un localisateur. Donc, celui-ci va monter en haut. Celui-ci va aller jusqu'au bas de l'échelle. Celui-ci sera au centre. Nous y voilà. Maintenant, appuyez sur D, tapez l' adresse et transformez ce bloc de texte en paragraphe. Et assurez-vous de les regrouper pour vous assurer de les positionner de la même manière. Et ça y est, on y va. Maintenant, d'ici à ici, il devrait y en avoir 16, je pense. Oui. Mais avant de le faire, assurons-nous de le coller ici. Et je veux d'abord organiser mon contenu pour pouvoir ensuite aller un peu plus loin. Comme ça. Nous y voilà. Cela devrait donc indiquer un numéro de téléphone. Et laisse-moi coller le numéro de téléphone. Ce seront les heures d'ouverture. Voici les heures d'ouverture. Nous y voilà. Donc, tout d'abord, assurons-nous qu'ils sont centrés, mettons-les dans un groupe, assurons-nous que la conception automatique de la mise en page garantit qu'il est à 16. Ces deux sont dans un groupe. Tout d'abord, alignez-les, placez-les dans un groupe, utilisez la mise en page automatique 16. Ces deux éléments doivent être alignés dans un groupe ou sur la mise en page et 16. Et ces autres peuvent aussi avoir 16 ans. Vous pouvez donc regrouper ces 16 mises en page automatiques. Ensuite, vous pouvez vous assurer qu'ils sont alignés à gauche dans une mise en page automatique de groupe 16. Et ceux-ci sont alignés à gauche dans une mise en page automatique de groupe 16. Maintenant, il ne nous reste plus qu'à revenir à notre panneau Calques, car nous n'avons que des images, donc des heures. Maintenant, cela peut être un téléphone et le premier peut être adressé. Nous y voilà. Maintenant, nous pouvons mettre tout cela dans un groupe et nous assurer de l'appeler, par exemple contenu. Mettez-le dans la mise en page automatique de 24. Nous y voilà. Et maintenant, il ne nous reste plus qu'à éloigner ça d'ici. Alors laissez-moi voir ce que j'ai fait dans le design original. Alors oui, on peut peut-être le mettre à 32. 32 ans, nous y voilà. Sélectionnez l'ensemble de notre contenu, placez-le au centre de la carte assurez-vous qu'il est aligné à gauche. Ça l'est. Et voyons voir, regroupez le tout. Assurez-vous que nous sommes 200. Nous sommes positionnés jusqu'en bas. Et nous appellerons cette section où nous sommes. Comme ça. Transformez-le en un composant. Maintenant, un dernier élément que nous devons inclure ici est le pied de page lui-même. Donc, pour cette étape en particulier, je vais simplement utiliser ma navigation, la dupliquer, la centrer et la déplacer jusqu'en bas. Fais en sorte que je sois à peu près ici et là, on y va. Ensuite, je vais y aller et dissocier tout ça. Comme ça. Et veillons à ce que je sois suffisamment dispersé, juste pour que vous puissiez le voir un peu mieux. Je vais donc utiliser ce logo, assurant qu'il est au centre. Et je vais essentiellement utiliser mon outil de texte et coller le texte qui s'y trouvait à l'origine. Et voyons voir, nous pouvons utiliser le style de texte correspondant au paragraphe. voilà, et assurez-vous de le placer au centre de notre page. Le javelin 64 de ceux-là sont comme ça. Et le logo devrait également être à 64 de ceux-ci. Comme ça. Maintenant, une dernière chose que nous devons faire est d' intégrer ces icônes de réseaux sociaux. Nous avons donc Twitter, nous avons YouTube. Localisons Instagram, désolé, LinkedIn et Facebook. Permettez-moi donc de les organiser un peu mieux. Donc, d'abord, Facebook, puis Twitter , puis YouTube, puis les liens, assurez-vous qu'ils sont tous alignés au centre. Et voyons ce que nous avons. On peut peut-être les mettre dans un groupe. Activer Auto Layout 24 est très bien. Revenez au panneau Calques, et je vais appeler ce groupe ou ce cadre des icônes sociales. Nous y voilà. Et maintenant, je vais simplement les aligner au centre avec ce texte juste ici. Assurez-vous simplement et revérifiez. Nous y voilà. Je vais donc sélectionner tout cela, appuyer sur Control G, remettre tout cela là, l' appeler pied de page, comme ça, et m'assurer que je suis à 200 d'ici. Nous y voilà. Et une dernière chose que je veux faire est de déplacer ce document et de le découper un peu. Donc, en gros, je suis à 64 ans de ce bord inférieur. Il ne reste donc plus que trois pixels demain. Donc hauteur, voyons voir, il faut en ajouter deux de plus. Voyons l'original, ce qu'il dit, 5775. Pour une raison ou une autre, nous l'avons légèrement étendu, mais c'est important. Ajoutons-en deux autres. Ajoutons-en un de plus. Donc 5796. Voyons voir. Nous y voilà. Voici donc notre page d'accueil terminée. Allons-y et cachons ça très rapidement. Allons-y et prévisualisons-le parce que je voulais vous montrer quelque chose, car nous avons tout de suite quelques problèmes. Nous devrons donc régler ces problèmes. Nous sommes donc là pendant le chargement, mais nous n'en avons pas. Ouvrons-le donc en plein écran. Cachons ça. Nous n'avons pas cet effet de survol. Il va donc falloir changer cela. Connecté ici. Lorsque je survole, vous pouvez voir que les images disparaissent. Nous devrons donc passer la souris sur chacune d'entre elles et ajouter des images supplémentaires. Encore une fois, tout fonctionne bien ici, ça a l'air génial ici. Tout fonctionne très bien ici comme il se doit. Allons-y et ajoutons-le. Tout d'abord, allons-y et connectons-les. Alors, tout d'abord, passez au prototype et passez ici. Ces deux-là, ces deux là. En vol stationnaire. Cela devrait se faire en survolant. Cela devrait se faire en survolant. Et quand je clique sur le pointeur lui-même, à la propriété 1 en un clic. Nous y voilà. En un clic. Et enfin, en un clic. C'est super. Maintenant que cela fonctionne, nous pouvons à nouveau nous concentrer sur ceux-ci. Revenons donc à notre design. Passons au survol. Cliquez ici, passez à la section Comment, ou cliquez ici, passez au survol. Donc, tout d' abord, nous devons ajouter un Lucid Air, car je l' ai déjà ouvert ici. Ensuite, allez-y et ajoutez escaladé. Nous y voilà. Et ajoutez Oticon très rapidement. Nous y voilà. Maintenant, nous devons sélectionner celui-ci, mettre par défaut, le mettre par défaut, mettre par défaut. Nous y voilà. Maintenant que tout cela est terminé, notre page est pratiquement terminée. Et dans la section suivante, nous allons passer à la conception de cette section de cours, qui en contiendra essentiellement un tas et qui aura plusieurs sections ici. Nous devrons donc l'étendre un peu, et nous allons également dupliquer certaines de ces sections. Nous ajouterons du contenu supplémentaire. Nous en ajouterons de plus en plus et nous copierons certaines de ces sections Certaines pages comme celle-ci «  Contactez-nous » seront extrêmement simples à concevoir car, comme je l'ai mentionné, nous avons déjà terminé la majorité de ces sections. Je vous retrouve donc dans la prochaine vidéo où nous allons attaquer la page des voitures, et je vous y verrai. 157. Conception de page de voitures: Allons-y maintenant et concevons la page de cette voiture. Donc, ce que je vais faire, c'est revenir à notre page d'accueil car j'ai oublié d'en faire un composant. Alors maintenant, quand je suis passé à ici, reviens à mes actifs et je passe à aspirer à en faire des actifs de site Web. Donc, ce que j'ai ici se trouve sur ma page d'accueil, j'ai tout cela. Donc, navigation, je vais le glisser-déposer, le positionner ici, le positionner ici, puis le positionner sur 20. Ce que je peux également faire, c'est faire la même chose pour chacun d'entre eux. Parce que fondamentalement, ce que nous aurons est dans la même mise en page sur chaque page. Alors pourquoi ne pas gagner du temps directement ici ? Voyons voir, Contactez-nous sera notre dernier poste ici, puis ici. Nous y voilà. Et toutes ces pages comporteront essentiellement toutes ces actions avec le formulaire de contact, la carte et le pied de page. Alors allons-y et faisons-le. Et laissez-moi vérifier si j'ai créé le pied de page, je ne l'ai pas fait. Transformons-en donc également un composant. Donc, tout d'abord, allons-y et faisons glisser ce pied de page m dans cette page, dans cette page, dans cette page et cette page. Assurez-vous qu'il est aligné à gauche. Et positionnez-le simplement à 40 pixels du bas, car évidemment, nous allons l' ajuster un peu plus tard une fois que nous aurons ajouté le contenu. Je vais donc déplacer toute cette section vers le bas parce que je suis juste au-dessus. Je vais ajouter ma carte, assurer qu'elle est centrée et qu'elle se trouve à 200 pixels d'ici. Et centré sur le formulaire de contact. Et je vais en fait l' ajouter à 200 pixels à partir d'ici. Alors c'est la même histoire. Je vais placer ces deux-là au centre. Et ce sera à 200 pixels, et ce sera également à 200 pixels. Alors faites la même histoire ici. Nous aurons donc la carte et le formulaire de contact. Nous aurons la carte formulaire de contact, le centre, le centre. Et voyons 222200200 au centre. Vous pouvez donc voir combien de temps nous économisons pour plus tard. Et cela ne fera que réduire considérablement le nombre de nos clones de fruits. C'est pourquoi ces composants sont si utiles. Donc, pour la section chorale elle-même, je vais essentiellement dupliquer cette section et la faire glisser ici. Voyons les couches. Quand je clique ici, sélection exclusive. Nous avons ici une sélection exclusive. Assurez-vous de le placer au centre. Ce que je vais faire ici pour le début, c'est utiliser ce texte ici. Et je vais juste le placer au centre, au centre ici. Et je vais écrire dans le texte pour être votre partenaire pour les voitures exclusives. Et voyons voir, je peux faire ce texte 40. Voyons juste qu'il y a quelque chose qui ne va pas ici. Nous y voilà. Maintenant, c'est beau et centré. Donc, à partir de ce bord, je vais passer au 1234. Assurez-vous de le déplacer de 40 pixels vers le bas. Nous y voilà. Et je vais créer ce cercle qui va passer en arrière-plan. Alors appuyez sur 0. Comme ça tout de suite, utilisez la couleur bleue principale. Et pour les tailles, je vais opter pour 300 x 300. Voilà, assurez-vous qu' il est centré. Et à partir de ce bord, je vais essentiellement l'aligner au centre de mes textes et à son bord inférieur. Et là, laissez-moi ajouter l'image de la voiture, que je vais utiliser, la placer au centre et la déplacer quelque part ici, juste pour que nous ne voyions pas le véritable cercle en arrière-plan. Ensuite, je vais déplacer cette section de sélection exclusive et m'assurer qu'elle se trouve cette section de sélection exclusive à 100 pixels d'ici. Comme ça. Et je vais me débarrasser de C, toutes les voitures tombent comme ça. Et voici ce que nous avons, si vous vous en souvenez, nous avons ces cartes de voiture. Je vais donc supprimer la mise en page automatique dans ce cas car je vais les dupliquer et les désactiver. Donc, pour les cartes de voiture, je vais maintenant modifier la mise en page automatique. Revenons donc en arrière une fois de plus, car nous avons ce groupe avec trois cartes à l'intérieur, donc 12.3 et nous n' avons pas de mise en page automatique dessus. Ce que je vais faire, c'est placer ce groupe dans un autre groupe. Et maintenant, tournez la disposition automatique dans cette direction et la distance entre ces voitures devrait être de 32. Comme ça. Et maintenant, il ne vous reste plus qu'à appuyer sur Ctrl D, Ctrl D pour avoir deux copies supplémentaires. Maintenant, ce sera une sélection exclusive. Et il ne nous reste plus qu'à remplir ces informations ennuyeuses. Mais avant de le faire, je veux le faire. En gros, poussez-les à être en place. C15, 620. Nous y voilà. Et maintenant, juste 64 en partant du bas, ici. Allons-y et faisons-le très rapidement. Nous avons donc tout mis en place. Voyons où nous en sommes. 59, donc juste un peu plus. Nous y voilà. Maintenant que c'est fait, allons-y et concentrons-nous sur ces voitures car cette page est plus ou moins terminée. Donc, ce que j'ai ici, c'est la Tesla Model X. Je vais donc me concentrer d'abord sur le contenu lui-même. Et l'année automobile est 2020. En fait, 2021. Pourquoi pas ? Laissons les choses comme ça. C'est donc le modèle Tesla, X, pas S, désolé. La prochaine voiture qui suivra sera donc une Porsche Cayenne. Le prix sera en vigueur cette année, ce sera en 2021. Et des kilomètres. Donc 18 000 692. Nous y voilà. La prochaine sera McLaren. Alors, encore une fois, concentrez-vous uniquement sur les voitures exclusives. C'est la raison d' être de cette concession. Vous pouvez utiliser n'importe quel type de voiture si vous le souhaitez. Si vous ne souhaitez pas avoir ces images Envato Elements, si vous ne souhaitez pas les concéder sous licence, vous devez utiliser vos propres images. Bien sûr, vous pouvez simplement vous assurer suivre certaines des règles que nous avons mentionnées dans ce cours en termes de cohérence mise en page, d'espacement , de rythme , etc. Juste pour avoir essentiellement la même mise en page que celle que nous avons faite ici. Alors 56, voyons voir, 24, nous y sommes toujours. C'est très bien. Et c'est la voiture la plus ancienne de cette collection. Alors peut-être que quelqu'un l' a donné en échange d'une pièce. Enfin, utilisons cela pour révoquer un Range Rover. Si vous parcourez 90 kilomètres , nous sommes en 2021. Maintenant, comme je ne l'ai pas, je vais m'en débarrasser et le supprimer. Donc, en gros, ce sont toutes nos voitures. Ce que je vais faire à ce stade c'est fermer certains d' entre eux, car je n'ai pas besoin qu'ils soient ouverts autant. En fait. Allons-y et fermons-les comme ça. Nous y voilà. Donc, ce que je vais faire à ce stade, c'est localiser mes images. Voyons donc la Tesla numéro trois et changeons-la. Nous y voilà. Ce sera une Porsche Cayenne. Ce sera McLaren. Ce sera une Cadillac CTS, désolée. Enfin, ce sera un Range Rover Evoke. Une dernière pièce du puzzle. Souvenez-vous simplement de ce que nous avons fait auparavant. Vous pouvez tous les fermer car ils sont tous les trois terminés , si vous vous en souvenez sur la page d'accueil. Donc, ce que nous allons faire maintenant, c'est sélectionner celui-ci, le transformer en survol. Sélectionnez celui-ci, transformez-le en survol. Ceci pour survoler. Cela devrait donc être survolé, cette application est appréciée, elle devrait être survolée. Nous y voilà. Alors maintenant, laissez-moi les sélectionner toutes à nouveau. Alors partons de l'arrière. Il s'agit donc d'un Range Rover, fermez-le et définissez-le par défaut. Cts, nous avons juste envie de prendre l'image au centre du champ parce que je peux le faire dans XD. J'espère donc que l'équipe ajoutera cela à l'avenir, maintenant qu'ils font tous les deux partie de la même équipe, car il est font tous les deux partie de la même équipe plus logique de le placer ici plutôt qu'ici sur ce petit terrain, donc cela n'a tout simplement aucun sens. McLaren devrait donc vraiment être cette image. Nous y voilà. Joli et décontracté. Donc, par défaut, cela devrait être poussé en coréen. Trouvons donc ce numéro trois. Nous y voilà. Glissez et déposez et revenez à l'état par défaut. Et le dernier est le Teslas. Localisons donc le numéro trois de la Tesla. Nous y voilà. Maintenant, ils sont tous terminés. Vous pouvez voir que nous ne sommes qu'à 10 minutes. Cette page est déjà terminée. Et allons-y et testons-le très rapidement. Parce que oui, une chose que j'ai oublié de mentionner est ici parce que nous sommes sur la page du cours. Je vais sélectionner celui-ci et le transformer en champ sélectionné. Maintenant, vous pouvez voir là-haut qu'il est écrit «  voitures » et que c'est sélectionné. Et la façon dont nos effets fonctionnent toujours, Contactez-nous, fonctionne toujours. Et je vais trouver comment me débarrasser de ce bar pour ne pas nous déranger. Donc, je pense que oui, je pense qu'il ne s'est pas chargé ou quelque chose comme ça parce vous avez vu que nous l'avons échangé et que nous les avons tous remplacés. Je vais donc peut-être devoir intervenir et les refaire toutes. Quel que soit chaque cas particulier. Je vais donc le faire hors caméra juste pour m'assurer que cela fonctionne. Mais tout cela fonctionne. C'est toujours là. Tout cela est là. Cars est sélectionnée et page supplémentaire de Diego a été complétée. Encore une étape, c'est fait. Alors peut-être parce que V colle ça en premier. Oui, vous pouvez voir que lorsque j'ai changé la valeur par défaut en survolant, cela fonctionne ici. Oui, non, cela ne fonctionne pas non plus sur une page d'accueil. Je devrais donc peut-être le mettre en place ici, puis revenir vers vous juste pour vous expliquer et vous faire savoir quelle était la solution. Mais pour l'instant, la page des voitures est terminée. Dans la vidéo suivante, nous allons passer à la carte sélectionnée, qui est la partie la plus difficile de toute cette conception. Je vous y verrai donc et je vais également vous montrer comment le configurer. 158. Conception de page de voiture: Reprenons là où nous nous sommes arrêtés dans la leçon précédente. Et avant cela, je veux juste montrer comment j'ai réparé les cartes de cette voiture. Donc, en gros, je les ai recréés à partir de zéro. Et tout ce que j'ai fait ici, c'est simplement créer le nom du titulaire actuel afin que le nom du titulaire actuel puisse apparaître clairement. Et vous allez le voir si vous téléchargez ce fichier et que vous l'ouvrez vous-même dans la Figma. Et je n'ai fait qu'en créer un autre exemple. Vous pouvez donc voir qu'ici j' ai le survol et ici j'ai la valeur par défaut. Donc, en gros, je viens de le créer et d'ajouter une variante. variante est le survol de chacune de ces cartes. Dans la variante de survol de chacune de ces cartes, je n'ai fait que sélectionner cet arrière-plan et afficher cette couleur de trait. C'est essentiellement parce que tout ce que j'ai essayé de faire a échoué ici. Alors maintenant, lorsque je prévisualise la page d'accueil, par exemple , tout ce que je veux vous montrer ici, c'est juste pour que vous voyiez que cela fonctionne réellement maintenant, car ce sont les composants réels de la page elle-même. Donc, quand je survole, le seul changement qui se produisait était simplement afficher ce contour hors de la couleur d'arrière-plan ici. C'est donc à peu près tout. Nous pouvons maintenant passer à la page suivante. au long de ce processus, j'ai fait la même chose ici, comme je l'ai mentionné. Et ici, tout ce que je veux faire est créer la page de carte sélectionnée. Maintenant, il y aura le sélecteur d'image juste ici pour la boîte à lumière. Et nous allons l' animer un peu plus tard. Il y aura les informations ci-dessous et je vais y faire un peu court. Mais avant de passer à tout cela, je voulais vous montrer l'échange d' instances dans Figma. Donc, quand je sélectionne ceci, vous pouvez voir que j'ai créé une sélection exclusive puis rho 12.3. Et maintenant, quand je sélectionne celui-ci, par exemple, et que je veux l'échanger. Vous pouvez voir que j'ai réservé ici, à savoir le Range Rover. Lorsque je clique, différentes instances s' affichent. C'est une bien meilleure option que XD, je dois l'admettre, car il beaucoup plus rapide de les remplacer de cette façon. Ensuite, pour le localiser ici, cliquez sur le glisser-déposer dessus pour échanger des instances. Vous pouvez donc simplement cliquer pour le changer en Porsche, par exemple, puis le redevenir Range Rover. Méthode beaucoup plus rapide, surtout si vous avez des milliers de ces icônes différentes, etc. Donc, pour la carte sélectionnée, ce que je veux faire, et comme je l'ai dit, je l'ai créée. Je vais donc apporter cela très rapidement à quelque part ici, juste pour que nous puissions gagner un peu de temps. J'ai les spécifications de ce véhicule. Alors allons-y et commençons par les images. Donc, ce que je veux faire, c'est utiliser mon outil rectangulaire ici. Alors R et créez l'image ici, sur huit colonnes de large. Donc 786 est la largeur et la hauteur est 437. Nous y voilà. Donc ça va être image1, comme ça. Et puis en dessous, nous aurons quelques images de voitures. Allons-y et créons-les très rapidement avec une distance de 24. Je peux même dupliquer celui-ci. Positionnez-le comme étant 24. Comme ça. Et je vais juste le réduire comme ça. Et il devrait être de 93 en hauteur et 168 en largeur. Vérifions donc si nous y sommes. Nous y voilà. Alors, qu'est-ce que 68, 93 ? Nous y voilà. Et je peux appeler cette image numéro deux et la placer dans un groupe d'images distinct. Et je peux même activer la mise en page automatique et dupliquer celle-ci. Il suffit donc de le sélectionner. Et voyons voir, la distance peut être de 38, par exemple et pour une raison ou une autre, oui, simplement parce qu'elle est placée sur une seule image. Donc, en fait, avant de faire ça, reproduisons les choses à l'ancienne, comme ça et comme ça. Créons donc simplement une copie séparée. Donc ça va être deux, ça va être trois. Et le nom de vos couches est très important, surtout ici parce que lorsque vous accédez à Figma, vous voulez vraiment que les choses fonctionnent. Ce sera donc un pinceau numéro quatre et ce sera l'image numéro cinq. Maintenant, je peux les regrouper, les appeler des images. Nous y voilà. Et 24, c'est la distance, ce qui est très bien. Maintenant, ce que je vais également faire, c'est créer un peu cette balise alt ici. Alors encore une fois, je vais lui donner une couleur blanche. Nous y voilà. Et voyons voir. Ce sera 145, largeur 50. Nous y voilà. Et je vais nommer toutes les images, BG, Voyons voir, les distances peuvent être, voyons ce que nous avons fait précédemment. Donc 24, 24 de chaque côté. Alors allons-y. Donc 24, 24 enfants peuvent voir. Toutes les images sont centrées et assurez-vous de les positionner ici. Il s'agit d'une taille de paragraphe, soit dit en passant, Ctrl G pour placer les petits groupes, voir toutes les images. Nous y voilà. Maintenant, ce que je peux faire à ce stade, c'est simplement intégrer mes images. Je vais donc localiser mon Range Rover. Donc, tout d'abord, cette première image ne sera que l'image numéro un. Cela va être photographié numéro deux. Ce sera l' image numéro trois, l'hémorragie numéro quatre et enfin l'image numéro cinq. Nous y voilà. Et nous corrigerons ce problème plus tard lorsque nous créerons cet effet Lightbox. Mais pour l'instant, je pense que nous sommes prêts à y aller et je pense que nous allons simplement laisser les choses telles quelles. Donc, ici, nous allons simplement aligner cela sur la navigation. C'est 40, mets-le en pixels. Et nous y voilà. Maintenant, nous sommes à 40 points du sommet. Donc, ici, je vais simplement appuyer à nouveau sur R et créer un rectangle de quatre colonnes de large. On y va, comme ça. Et pour celui-ci, voyons ce que nous pouvons faire. Peut-être que nous pouvons ajouter un peu de rayon de maïs au mélange. Oui, donc pour le rayon d'angle, prenons huit. Pour la couleur de fond, on opte pour le blanc. Et pour la hauteur, on opte pour un vingt. C'est cette section qui va en fait être agrandie et diminuée. Donc, en fait, allons-y de quatre à 53, quelque chose comme ça, c'est un bel agrandissement. Donc, ce que je vais faire, c'est appeler cet arrière-plan de la barre latérale de la voiture. Nous y voilà. Ici, je vais commencer à créer ces étiquettes. Commençons donc par l'icône, repérons les actifs et localisons l' icône du SUV, qui est celle-ci. Faites-le glisser dans la chaleur, c'est quelque chose comme ça. SUV Hit D. Maintenant, cela devrait partir de la gauche et les textes devraient en fait être étiquetés comme ça. Maintenant, cela devrait avoir une hauteur de 33. Il doit s'agir de la couleur de la carrosserie et du rayon d'angle. Nous y voilà. Revenez à notre panneau Calques et je vais le positionner ici. Alors étiquetez BG. Nous y voilà. Voyons voir pour la distanciation, ce que je peux faire, c'est peut-être en utiliser 16. Tout d'abord, positionnons-le au centre. Tout ça comme ça. Et voyons ça. On peut en apporter 16, comme ça. Et le texte lui-même garantit qu'il est centré. Ça l'est. Ça peut être à huit heures. Peut-être. Nous y voilà. Donc, ce que je peux faire, c'est placer cela dans un groupe appelé type de cicatrice, comme ça. Et assurez-vous d'activer la mise en page automatique avec huit, puis un arrière-plan étiqueté. Ce que je peux faire, c'est peut-être en mettre 16 de chaque côté. Voyons voir. Ramène-le ici. Deux pixels, donc ce qui devrait être 88. Nous y voilà. Vérifions-le encore une fois. Donc 6.7. Nous y voilà. Maintenant que c'est fait, je vais simplement regrouper cela et l'appeler une étiquette. Et je vais juste le positionner en partant du bord supérieur et du bord inférieur pour être, désolée, du bord supérieur et du bord gauche à 24. Nous y voilà. Maintenant que c'est fait, c'est blanc. Il s'agit essentiellement de la couleur la plus nette, elle se détachera donc du fond blanc. Donc, ce que nous allons faire ensuite , c'est simplement apporter notre titre ici. Alors tapez Range Rover, ce sera RH trois. Nous y voilà. Et la distance ici devrait être de 24. Contrôle D Encore une fois. Transformez-le en bleu car ce sera le prix. Nous y voilà. Contrôlez D une fois de plus. Et là, je vais le transformer en bloc de texte, ou mieux encore en paragraphe. Chaque paragraphe, et je vais en faire un paragraphe. Il sera, par exemple, disponible pour le retrait dès maintenant. Et la distance pour cela sera également de 24. 24 ici, 24 ici. Toutes les distances sont donc cohérentes et ce sera un jeu d'enfant à développer plus tard dans Webflow. Donc, ce que je vais faire à ce stade c'est insérer ces boutons. Ce sera donc notre premier bouton, le 24. Nous y voilà. Et la distance ici devrait être de 24, donc c'est bon. Et maintenant, je vais introduire le deuxième bouton que nous avons créé, qui est celui-ci. Positionnez-le ici. Donc, assurez-vous que nous sommes 24 ici. 24. Et voyons voir, nous devrions réduire cela jusqu'à 24 ans. La hauteur devrait donc être de 448. Nous y voilà. Alors c'est tout. Maintenant, pour ce qui est de ce bouton, il devrait être, voyons voir, 73 est la hauteur, trois à six est la largeur. Cela devrait également être de trois à six. Mais avant de changer cela, permettez-moi de passer à la réserve. Cette voiture. On y va. Nous y voilà. Remettons-le en mode survol. Cela fonctionne. C'est super. Cela fonctionne pour le survol, c'est génial. Et cela devrait indiquer uniquement les options C. Nous y voilà. Ces boutons sont maintenant terminés. Toutes les informations y ont été incluses. Allons-y, sélectionnons-le Control G et appelons-le barre latérale de la voiture. Nous y voilà. Et cette barre latérale de Webflow suivra notre contenu au fur et à mesure que nous défilerons vers le bas. Donc, en gros, c'est ce que nous allons inclure ici. Passons maintenant à l' aperçu qui sera présenté ici. Alors, tout d'abord, utilisons un rectangle. Alors positionnez notre position pour qu'elle fasse huit colonnes de large. Et utilisons, voyons voir, huit pour le rayon d'angle. Assurez-vous que c'est blanc, afin qu'il ressorte de cet arrière-plan et assurez-vous de le positionner à nouveau 24. À partir de là, ce sera l' arrière-plan ou Oreo BG appuie T et tapez aperçu. Nous y voilà. Assurez-vous qu'il est aligné à gauche, juste là. Et nous allons opter pour H 3 à cette occasion. Donc 24 encore une fois, vérifions 24. C'est super. Et maintenant, le moment est venu pour nous de créer cette mise en page. Mais avant de le faire, je voudrais corriger cette mise en page, car ce sera beaucoup plus rapide. Permettez-moi d'aller de l'avant et de reproduire les deux. Placez-les dans un groupe et positionnez-le ici. Maintenant, ce groupe va être décrit comme ça. Et cela devrait indiquer la description du véhicule. C'est super. Contrôlez D pour le dupliquer. Et cela devrait en fait être un paragraphe. Nous y voilà. Eh bien, laissez-moi copier et coller le texte. Donc ça devrait être 24, comme ça. Et sa hauteur totale devrait être de 198. Changeons donc cela à 198. Nous y voilà. Nous sommes donc à 32 du bord inférieur. C'est super. Maintenant, je n'aime pas vraiment cela, alors je vais le remplacer par un paragraphe de trois ans, et c'est essentiellement tout pour cette section en particulier. La description est donc terminée. Passons maintenant à l'aperçu de la voiture. Mais encore une fois, avant de le faire, ramenons ce chiffre à 24. Passons à 24, que nous venons de créer. Comme ça. Nous y voilà. Et je vais déplacer cela un peu plus tard. Mais en gros, c'est à 200, comme toutes les autres choses, mais nous devrons inclure cette section. Mais passons d'abord à la vue d'ensemble, car nous avons quelques icônes ici. Donc, ce que nous allons faire d'abord, c'est simplement inclure le texte et, pour le texte lui-même, je vais simplement créer un tas de ces éléments de paragraphe. Je vais donc l'appeler 2021. Ce sera pour l'année. Donc, paragraphe pour la couleur du paragraphe, je vais utiliser celui-ci. Nous y voilà. Et je vais rapidement accéder à l'icône et à l'icône du calendrier juste ici. Mets-le ici, et assure-toi que je les ai regroupés. Assurez-vous que je les appelle un calendrier. Assurez-vous ensuite que j'ai activé la mise en page automatique, mais avant de le faire, assurez-vous de les avoir centrées de cette manière. Mise en page automatique du calendrier. Et voyons voir, la distance pour cela peut être de 16, par exemple, je pense. Oui. Alors 16 ans, on y va. Maintenant, je vais le pousser ici. Nous y voilà. Et en gros, ce que je vais faire à ce stade, c'est simplement créer un tas de copies. Voyons voir, 24 à partir de ce bord, ça devrait suffire. Oui, je pense que c'est génial. Il suffit donc de créer deux autres copies comme ça. Et je vais le placer automatiquement dans cet appel. La transmission, qui sera à essence pour le type de carburant, fera 15 246 km. C'est ce que la voiture a fait jusqu'à présent. Alors voyons voir. Nous avons le calendrier, qui est celui-ci. Ensuite, nous avons le kilométrage, qui devrait être inférieur au calendrier. Ensuite, nous avons le type de champ, qui doit être inférieur au kilométrage. Enfin, nous avons la transmission, qui devrait être envoyée ici. Donc, ce que nous pouvons faire à ce stade, c'est un peu pousser cela à peut-être, je ne connais pas l'ADH ou quelque chose comme ça. Alors allons-y avec, voyons voir, 88. Ensuite, je peux sélectionner ces quatre, monter en haut et tout ranger. Oui. Il en fait six, ça marche bien, mais je ne suis pas vraiment sûr. J'aime ce que je faisais auparavant. Répartissez donc l'espacement horizontal. Nous y voilà. Je pense que ça va très bien se passer. Voyons donc un T9. Maintenant, allons-y et essayons d'échanger ces icônes. Donc, pour celui-ci, nous aurons besoin de cette transmission. Assurez-vous donc de le trouver. Nous y voilà. Pour celui-ci. Allons-y pour échanger. Nous allons passer au type de champ. Celui-ci, c'est le kilométrage. Je pense donc que cette icône du compteur kilométrique devrait très bien faire l'affaire ici. Nous y voilà. Maintenant que tout est terminé, ce que nous pouvons faire, c'est essentiellement les mettre dans une rangée et dupliquer cette ligne, la positionner vers le bas. Ce sera donc une rangée numéro deux à l'intérieur de cette rangée. Passons à un moteur. Parce que ce sera le type de moteur. Cela devrait dire moteur V8. Type de moteur, comme nous le voulons. Au lieu du kilométrage, il y aura l'icône de la porte. Voyons donc où il se trouve. Nous y voilà. Et il y aura cinq portes. Nous y voilà. Maintenant, le prochain devrait avoir des sièges, donc sept sièges. Cette icône va donc correspondre aux graines, qui se trouvent juste ici. Sièges. Et ce dernier devrait être pour la garantie. Parce que certaines voitures seront couvertes par une garantie, d'autres non. Tout dépend de l'âge de votre voiture au stade de la vente. Et si vous pouvez prouver que c'est le vôtre, si vous pouvez le prouver, cela vaut la peine de dire et d'autres choses de ce genre. Alors on y est. On y va. C'est donc à peu près tout pour ça. Et je pense que cette section est terminée. Tout ce que nous avons à faire, c'est de le ranger un peu. Je vais donc également le placer à 24 et le transformer en 196. La hauteur est donc de 196. Nous y voilà. Nous sommes donc à 32 du bas, 24 de chacun de ces côtés. Et maintenant, ce que je vais faire, c'est mettre ça en haut et ça en bas. Appelez cette vue d'ensemble. Et laissez-moi me montrer de ce côté. Donc 24 de ce côté, passons simplement à 24, poussons cela à 24 également. Ici, nous aurons juste besoin de copier cette section. Donc, en gros, il suffit de le pousser ici, s' assurer qu'il est centré. Et voyons la distance, nous la mettrons à 200. Voyons donc où nous en sommes, quelque chose comme ça. Donc 200, puis les sections ci-dessous devraient être à 200, ainsi que quelque chose comme ça. Nous y voilà. Et je vais juste l'étendre vers le bas pour que mon pied de page ne soit pas couvert. Ce sera à 64 ans, comme nous le faisions auparavant. Donc, la hauteur devrait être de 5856, je pense. Nous y voilà. Donc, un peu de maths suffit. Vous y voilà. C'est cette page. Tout est terminé. Passons donc à l'aperçu pour la fin de cette vidéo. Je veux juste vous montrer ce que nous avons fait jusqu'à présent et ce que nous allons faire avec cette page en particulier. Nous aurons donc ici ces images. Et lorsque vous cliquez sur l'une des images, la boîte à lumière apparaît. Vous pouvez le constater dans la partie Adobe XD du cours, mais nous le ferons également dans l' une des vidéos suivantes. Nous avons réservé ce cours, vos options de prêt et vos voitures doivent être sélectionnées ici, ce qui sera corrigé tout de suite car il s'agit en fait de la partie de la page du cours. Nous allons donc sélectionner cela. Et au lieu de la valeur par défaut, choisissons sélectionné. Vous pouvez maintenant voir qu'il est surligné ici. Réservez cette voiture ou les options C seules. Il suffit donc d'ajouter S ici. C'est pourquoi nous vérifions cela. C'est donc génial. Donc, des options pour Ceylan. Vous pouvez donc voir ces options de prêt sur la page suivante. Et cela ne vous donnera que des options générales. Mais bien sûr, chaque voiture et chaque prix seront différents. Il est donc préférable de contacter la personne qui accorde les prêts au sein de cette entreprise ou société externe pour vous proposer la meilleure option possible. Donc, les options pour Ceylan, nous allons vous présenter le discours sur le prêt lui-même. Réserver cette voiture, c'est juste vous emmener au forum Philip. Vous pouvez remplir ce formulaire, réserver. Cette voiture va savoir que vous venez de cette page. Cela va donc être beaucoup mieux car nous aurons une excellente description du véhicule, ce qui est excellent. Tout cela est génial. Tout cela va bien. Nous avons 200 voitures scellées au total. Contactez-nous. Nous y voilà. Donc, tout cela fonctionne très bien. Et nous y voilà. C'est ça. C'est tout pour cette page, la page des prêts, nous contacter va être super simple et légère. Ce sera essentiellement la même mise en page, mais en ajoutant plus d'images. Je vous retrouve donc dans la prochaine vidéo où nous allons créer cette page de prêts. Alors je te verrai là-bas. 159. Créations, contactez-nous et la conception de pages: Commençons par la page Prêts. Donc, ce que je vais faire tout d'abord, c'est juste sélectionner ce texte ici. Contrôlez C, venez ici, contrôlez V, collez-le en place. Et je vais le remplacer par quelques textes supplémentaires. Donc, prêt de la voiture de vos rêves. Et je vais venir ici avec mes photos. Et je vais juste ajouter des images qui seront placées dans la section des héros en haut. Alignez-les ainsi, amenez-les ici et assurez-vous de les aligner encore plus sur quelque chose comme ça, puis rapprochez-le un peu, peut-être même de quelque chose comme ça. Mais oui, je pense que tout ira bien car il me sera facile d'aligner ces images en termes d'alignement général. Je pense que nous sommes bien ici. Nous allons donc sélectionner ces images, appelons-les images de héros. Nous y voilà. Et je vais regrouper tout ça, appeler ça un héros. Il suffit de vérifier le texte très rapidement. C'est génial. Sélectionnez les prêts et nous passerons à l'étape suivante. Nav Je ne sais pas pourquoi ça ne m'apparaît pas. Nous y voilà. Donc, les prêts que je vais choisir sélectionnés pendant que nous y sommes, allez sur Contactez-nous et choisissez, sélectionnez-le. Nous y voilà. Retournez donc aux poumons. Ce dont nous aurons besoin ici, c'est de créer une autre section en dessous. Alors appuyez sur T et je vais écrire quelque chose comme ça, en assurant que c'est centré. Et au lieu de ça, je vais opter pour ça. Donc, encore une fois centré, au centre de la page. Et je vais choisir 150 de cette image. Alors comme ça, on y va. vais évidemment le mettre en dessous de ma section héros. Ensuite, je vais le dupliquer, pour assurer que c'est pour l' âge de trois ans dans ce cas. Je vais essentiellement recréer la même mise en page que celle que nous avons ici. Nous pouvons même le copier si vous le souhaitez. Allons-y donc et faisons-le, car en gros, nous utiliserons simplement la même mise en page. Alors, sélectionnez ces trois, appuyez sur Control C, revenez ici. Appuyez sur Control V. Assurez-vous que nous sommes au centre de la page comme ça, et assurez-vous que nous sommes, voyons voir, 64 à partir d'ici. Alors 64, on y va. Maintenant, je vais passer à la couleur h3. Nous y voilà. Faites de même pour cela. Donc h3h3 et ça, voyons voir, c'est peut-être cette couleur gris foncé. Je pense que ça va très bien se passer. Et gris foncé et gris foncé. Maintenant, pour ce qui est du contenu, remplissons-le. Nous y voilà. Nous y voilà. Et je vais laisser les icônes pour la fin car nous y accèderons dans une seconde. Je vais vous montrer comment utiliser et réutiliser rapidement certaines de ces sections car elles se répètent. Vous allez de toute façon le faire dans Webflow. Alors pourquoi ne pas le faire également dans Figma ? Donc, ici, nous allons sélectionner cette icône et nous allons l'obtenir et la modifier à votre convenance. Je peux même taper facilement. Nous y voilà. Ce sera, voyons voir, le paiement de la voiture. Remplacez-le donc par des paiements automobiles. Ensuite, ce sera la garantie de la voiture. Garantie du véhicule. Nous y voilà. Maintenant, tout ce que je veux faire, c'est aligner les trois. Comme ça, je crois. Non, essayons jusqu'au fond. Nous y voilà. Maintenant, tout semble aller bien. Voyons si je sélectionne celui-ci. Nous avons 64 ans, nous en avons 72 pour une raison ou une autre. Peut-être que cette icône est un peu plus courte. Donc, je vais simplement sélectionner les trois, appuyer sur Dissocier et tout organiser manuellement. Donc, d'ici à ici, nous devrions être à 24. voilà, d'ici à ici, nous devrions être à 74 ans. Nous y voilà. Cela devrait également être à 24 heures. Nous y voilà. Et cela devrait également être un 24 , car nous avons échangé des instances et modifié certaines de ces icônes. Essayons à partir d'ici. Je ne sais pas pourquoi ça ne va pas s'aligner ici. Nous y voilà. Allez. Bon, maintenant c'est fait, c'est fait, c'est fait, c'est super. Donc, contrôle G, contrôle G. voilà. Cela va être simple. Ce sera un paiement. Ce sera une garantie. Tranquillité d'esprit. Nous y voilà. Alors maintenant, nous le sommes. Lorsque nous les sélectionnons tous, nous devrions avoir 64 ans. Nous le sommes. Nous allons le mettre ici, appuyer sur Control G et appeler cela des prêts leaders du marché, par exemple There we go. 150 dans la section ci-dessus, dans ce cas , je vais sélectionner cette section, le contrôle C, contrôle V, juste ici. Quelle que soit la raison, je ne l'ai pas collée. Alors allons-y avec quelque chose comme ça pour le moment. Et ce que je vais faire, c'est simplement faire glisser une autre image ici pour remplir celle-ci. Nous y voilà. Et je vais les sélectionner pour m' assurer qu' ils sont centrés. Ici. Permettez-moi de copier ce texte. Nous y voilà. Collez ce texte. Nous y voilà. Maintenant que c'est fait, je vais les sélectionner pour cliquer ici. Nous y voilà. Et maintenant, je veux ajouter les logos supplémentaires qui ont été inclus précédemment. Alors laisse-moi les glisser à l'intérieur. Nous y voilà. Nous l'avons donc envoyé là-bas et nous avons ce S en location. Donc, un jour, le zinc va arriver ici et le zinc endormi va arriver ici même. Voilà. Donc 24 de chaque côté. Nous y voilà. Maintenant que c'est fait, je vais sélectionner essentiellement ces trois. Alors, ajoutons-le. Alors, qui sommes-nous ? Nous devrions changer cela pour nos partenaires. Nous y voilà. La main de notre partenaire. Ramenons ces deux-là dedans. Quelque chose comme ça. Nous y voilà. Assurez-vous simplement qu'il est parfaitement au centre. 24. Et maintenant c'est fait. Nos partenaires sont donc terminés. Qui sommes-nous, partenaires fiscaux ? Texte. OK. En gros, c'est tout pour cette page. ne nous reste donc plus qu'à aligner ceci, ceci et cela à une distance de 200 pixels. Agrandissons-le. Nous y voilà. Double-cliquez ici pour sélectionner notre cadre de prêts. Poussez-le vers le bas, et nous devrions être prêts à faire quelque chose comme ça. Donc moins trois. Donc 3885. Nous y voilà. Parce que nous sommes là et qu'il ne nous manque que l'image , en gros, ici même. Finissons donc également la page de contact. Je vais donc simplement glisser-déposer une image ici, assurer que son centre est aligné. Assurez-vous qu'il s' aligne vers le haut, 20 pixels vers le bas, par exemple, ou mieux encore. Oui, 20 pixels, c'est très bien. Tout ce que nous devons faire ici est de sélectionner tout ce contenu et de l'afficher. Donc, au lieu de 200, optons pour 100 car nous n'avons pas besoin de cet espacement. Voyons donc 100. Et encore une fois, il suffit de réduire cela à la base. Nous y voilà. Voyons où nous en sommes. On en est à 9 minutes. Peut-être pourrions-nous également terminer cette superposition. Donc 4273564. Nous y voilà. Allons-y et fabriquons la lightbox elle-même. Alors laissez-moi copier ceci. Laisse-moi coller ça. Et la boîte à lumière elle-même. Voyons voir. Ça devrait être dix. Donc 10905609. Nous y voilà. Assurez-vous qu'il est au centre. Vais-je croire que nous allons l'introduire ? Cela va rester tel quel. Donc 168 par 93, c'est génial. Et il ne nous reste plus qu'à en ajouter trois autres, car nous en avons 12345. Trois autres feront donc très bien l'affaire ici. Donc, tout d'abord, je vais revenir ici et transformer cela en mise en page automatique. Viens ici, transforme-le en mise en page automatique. 123. Donc ça devrait être le numéro six, ça devrait être le numéro sept. Et voilà, ça devrait être le numéro huit. Maintenant que c'est fait, nous pouvons également les aligner un peu mieux. Donc, tout d'abord, il faut le placer au centre de la page. Je vais le réduire légèrement. Appuyez dessus, par exemple , voyons voir, 64, peut-être 64 de ce côté, c'est génial. Et peut-être 16 de ce côté. Fais-moi voir quelque chose comme ça. Comme je veux pouvoir voir toutes les images ou peut-être même mieux, nous pouvons simplement les prendre au centre de cette manière. Alors on y va. On peut en voir une vingtaine depuis ce bord. Donc quelque chose comme ça. Oui. Maintenant que nous l'avons, nous pouvons appuyer sur R pour le rectangle et le positionner de manière à remplir complètement ce cadre. Nous y voilà. Positionnez-le en arrière-plan. Et je vais l'appeler fond de boîte à lumière. Je vais lui donner cette couleur gris foncé. Nous y voilà. Et je vais lui donner une ville de base de 80 %. Comblez donc le gris foncé et l'obésité de 80 %. Nous y voilà. Ce dont nous avons également besoin ici, c'est de cette icône de fermeture. Nous pouvons donc utiliser celui-ci. Nous y voilà. Positionnez-le à peu près ici pour qu'il soit aligné. Et je vais lui donner la couleur de sélection, voyons voir. Donc, au lieu de celle-ci, non de la couleur de fond , sélectionnons-la. Fail doit être blanc. Nous y voilà. Jolies jongleries. Et vu d'en haut, ça devrait être, je ne sais pas, peut-être 53 ou quelque chose comme ça. 56 ans, je crois. Oui, 56. Et c'est essentiellement ça. C'est notre superposition terminée. Parce que nous l'avons laissé à 80 %. En gros, cela va être transmis. Ainsi, lorsque nous le placerons sur cette page, nous pourrons avoir l' opacité en arrière-plan. Regroupons-les donc et appelons-les boîte à lumière comme ça. Et nous y voilà. Notre design est terminé, tout a été fait. Dans la vidéo suivante, nous pouvons attaquer certains prototypes de base. Et dans la vidéo qui suit, je peux peut-être vous montrer comment exporter certains de ces actifs. Enfin, à la fin, je vais vous montrer ce plugin, qui va vous aider à transformer certains designs de base de figma en Webflow sans écrire une seule ligne de code, à sans écrire une seule ligne de code, ajouter sans toucher à tous ces composants dans Webflow lui-même, car vous pouvez tout faire dans Figma. Mais encore une fois, n'oubliez pas que c'est pour les pages vraiment basiques. Je vous retrouve donc dans la prochaine vidéo où nous allons commencer par le prototypage. 160. Création de prototypes dans Figma: Commençons maintenant par un prototypage assez basique. Donc, ce que je vais faire, c'est juste ici où il est écrit voitures, je vais passer au prototype et je vais le faire glisser vers la page des voitures. Je vais cliquer, naviguer un instant parce que je ne veux aucune sorte d'animation entre les prêts. Même histoire. Il suffit donc de le sélectionner et d' accéder à la section Prêts et de nous contacter, le sélectionner et d'accéder à Contactez-nous. Maintenant que nous l'avons appliqué à partir d'ici, comme vous pouvez le constater, il est transféré à chaque instance de ce composant particulier. Bouton C pour appeler les voitures. Ce que je vais faire, c'est simplement le sélectionner et à partir de là, je vais accéder à cette page instantanément. Passons à Smart Animate car nous aurons cette option ici. Navigation Contactez-nous. Tout cela va à peu près rester le même. Maintenant, à partir de cette page, nous allons sélectionner le Range Rover. allons donc sélectionner la carte de crédit et nous irons à cette page particulière. Allons-y également avec Smart Animate, dans ce cas. Est-ce que Garcia prête des options ? Donc, en ce qui concerne les options de prêt, je vais me lancer dans les poumons. Ici, voyez toutes les voitures ou cela nous amènera à cette page juste ici. Je ne pense même pas que nous besoin de ce bouton maintenant que j'y pense, mais laissons-le tel quel car nous allons inclure plus tard dans Webflow. Et c'est à peu près tout pour cette page en particulier. Maintenant, pour l'instant, tout est fait ici, tout est fait. ne nous reste plus qu'à connecter cette boîte à lumière. Donc, pour ce faire , vous pouvez cliquer ici ou ici. Je vais donc sélectionner C toutes les images. Cliquez et faites glisser le pointeur jusqu'à la zone lumineuse lorsque vous cliquez dessus. Accédez à, je vais accéder à Ouvrir la superposition. Et je vais juste choisir instantanément. Et à l'intérieur de la boîte à lumière, je vais cliquer et sélectionner cette option pour fermer. Cliquez ici. En un clic. J'ai déjà cette interaction d'une manière ou d'une autre. Alors fermons ça. Fermons ça. Alors sélectionnez-le à nouveau. Cliquez et faites glisser ici. Donc, en cliquant, je vais fermer la superposition. Donc, en gros, cela va fermer celui-ci. Maintenant, une chose que je n'ai pas recherchée est de savoir comment masquer cette barre de menu particulière qui vient de haut en bas. Donc, celui-ci, il y a probablement une option, mais j'étais trop paresseux. Alors maintenant, quand je clique, ça va juste m'y emmener, ce qui est bien. Ici. Nous pouvons voir à quoi tout cela ressemble. Et je peux même y retourner. Mais je devrais probablement en faire un prototype. Alors vérifions-le ici. Donc, les voitures, tout fonctionne. Lorsque je clique ici, cette page s'ouvre. Donc, tout fonctionne très bien. Vous pouvez voir que nous avons les couvertures. Voir toutes les voitures va nous mener à cette page. Elle va conserver cette position qui n'est pas idéale, mais réserver néanmoins ces options de prêt automobile C. Il va nous falloir deux poumons. Et lorsque vous cliquez sur Afficher toutes les images, cette page s'ouvre. Maintenant, ce que nous pouvons faire avec cette page, c'est la réduire un peu en hauteur. Alors allons-y et fermons ceci. On y va et on ferme ça. Passez au design. Donc, ce que nous avons ici est 64, si je me souviens bien, oui, nous en avons. Nous pouvons donc simplement augmenter les choses. Voyons où nous en sommes ici, 118. Catia pense que ça va très bien fonctionner. Et voyez où nous en sommes. Oui, donc je dois également affiner l'image de la lightbox. 68, donc quatre de moins, 150. Nous y voilà. Et la lightbox elle-même devrait être de 150. Nous y voilà. Maintenant que c'est fait, nous pouvons peut-être cliquer sur Aperçu ici sur cette page afin de voir s'il y a une différence par rapport à ce que nous avons créé. Oui, il y en a, parce que maintenant ça le pousse un peu vers le haut vers le centre. Et c'est à peu près tout pour le prototypage oral et ce que vous pouvez en faire. Nous n'allons pas devenir fous ici, car nous allons prototyper plus tard dans Webflow. Dans la vidéo suivante, je vais montrer quelques options d'exportation et comment vous pouvez exporter certaines de ces ressources pour les développeurs si vous ne les développez pas vous-même ou pour vous-même. Si vous développez cela dans Webflow comme nous allons le faire, je vous y verrai. 161. Exporter des actifs depuis Figma: Passons maintenant à l'exportation de certains de ces articles. Et je vais essentiellement expliquer trois formats différents, formats de fichiers vers lesquels vous pouvez exporter. Vous pouvez donc consulter à peu près les variantes d'exportation à ce stade et commencer par la partie Webflow de ce cours pour comprendre un peu comment importer certaines de ces options, quoi elles servent quoi sert chaque format de fichier. J'ai expliqué tout cela dans la partie du cours consacrée au retour en arrière. Dans cette partie du cours, nous allons utiliser des éléments d'exportation depuis Adobe XD. Figma fonctionne exactement de la même manière. Montrez-vous ici, par exemple, nous avons ces icônes maintenant, chaque icône que je vais exporter au format SVG. Et pour ce faire, je vais sélectionner l'icône elle-même. Cliquez ici où il est écrit Exporter, cliquez sur Sélectionner. Et ici, je peux changer le format de fichier de PNG en JPEG, SVG et PDF, essentiellement pour ce cours. Et en général, ce qui vous intéresse c'est le PNG, le JPEG et le SVG. Gardez simplement ceci à l'esprit. SVG est génial pour les icônes car il conservera la même qualité et restera constant, quelle que soit la taille sur laquelle vous concevez, car le SVG est un graphisme vectoriel évolutif, il conservera toujours la même qualité. Jpeg est destiné aux images intégrées qui n'ont pas de fond transparent. Et je vais vous montrer l'un d'entre eux ici. Par exemple, cette image ici. Il n'a pas d'arrière-plan transparent, donc le format JPEG convient parfaitement à ce format de fichier particulier. Enfin, nous avons P&G. P&g est idéal pour des images comme celles-ci, par exemple pour des images comme celles-ci, comme celles-ci. Parce qu'ils ont des arrière-plans transparents. Donc, pour exporter, vous avez vraiment deux options différentes. Disons que je souhaite exporter cette icône au lieu du format PNG, je vais sélectionner SVG. Ce que vous pouvez faire, c'est ajouter différents suffixes ici, par exemple 1x2x3 x. Si vous souhaitez l' exporter en x2, x3 x, vous suffit d' ajouter un x comme suffixe. Cliquez ici. Il va automatiquement ajouter à, ajouter pour cliquer à nouveau, trois sorties a3x. Vous pouvez en ajouter de plus en plus si vous le souhaitez, mais nous n'en avons pas vraiment besoin. Donc, en gros, je vais m'en débarrasser. Vous pouvez voir à quoi cela ressemble ici. Mais je vais simplement les fermer tous et les exporter vers celui-ci. Je vais supprimer le suffixe car je n'en ai pas vraiment besoin. Ce que je peux faire, c'est simplement cliquer sur Exporter l'image de la clé de la voiture. Et vous pouvez voir ici, si je me donne un coup de pouce, qu' il l'exporte très rapidement sur mon bureau. Maintenant, cela me permet de simplement le faire glisser et de le déposer dans Webflow, comme je vais le faire dans la prochaine partie du cours lorsque nous aborderons le Web à des fins de développement. Et il sera très simple de glisser-déposer pour que tous vos fichiers soient cohérents selon ces modèles organisationnels particuliers. Alors laissez-moi vous le montrer également. Voici à quoi ressemblent essentiellement ces images. Vous pouvez donc voir que certains d'entre eux sont au format SVG, comme celui-ci et celui-ci. Il s'agit d'un PNG. Ainsi, lorsque je couvre très rapidement, vous pouvez voir une extension de fichier PNG. Il s'agit d'un fichier JPEG car nous n'avons pas vraiment besoin de l'extension PNG. C'est le PNG parce qu'il a un arrière-plan transparent que vous pouvez voir, donc ici, c'est un Jpeg, comme je l'ai mentionné, car il n'a pas d' arrière-plan transparent en termes d' icônes, vous pouvez voir qu'elles sont toutes au format SVG. Et en gros, je les ai toutes exportées. Mais que se passe-t-il si vous souhaitez exporter plusieurs icônes ? Eh bien, vous pouvez simplement sélectionner l'icône pendant que vous concevez. Cliquez sur Exporter, remplacez-le par SVG. Et maintenant, quand je sélectionnerai celui-ci, il saura que j'y sélectionne toujours le SVG. Il va sélectionner celui-ci en tant que SVG. Peut-être que celui-ci peut être exporté au format JPEG, et celui-ci, en grand format. L'image du héros peut donc être exportée chez P&G. Que se passe-t-il si nous voulons sélectionner une exportation ? Tous, eh bien, vous pouvez le faire très facilement en cliquant ici. Ensuite, déposez et exportez. Et il va exporter tous les éléments que vous avez essentiellement alignés pour exportation, car vous les marquez tous, vous avez sélectionné les formats de fichier. Ensuite, vous pouvez accéder à l'exportation de fichiers et l'exportation vers la destination souhaitée. En gros, c'est à peu près tout. Voilà à quel point il est facile d'exporter. Je ne vais pas me donner la peine de choisir un expert dans tous ces domaines. En gros, avec cela, vous n' avez même pas besoin d'exporter cette ellipse. Vous pouvez le recréer dans Webflow, mais je pense que je l'ai quand même exporté depuis Adobe XD car il est beaucoup plus simple d'importer des fichiers au format SVG et d'en créer un vous-même. Parce que dans Webflow, il s'agit à peu près d'un div avec juste un rayon d'angle de 100 % et une couleur bleue à l'intérieur. C'est à peu près ça. Ensuite, vous pouvez jouer avec les options de positionnement de Webflow. Vous n'exportez pas de polices. Vous n'exportez pas de couleurs, vous n'exportez pas de boutons. Vous créez toutes ces choses dans Webflow. Donc, en gros, vous n' avez pas besoin de le faire et de les exporter directement depuis Figma. En parlant d'exportation de Figma vers Webflow. Dans la vidéo suivante, je vais aborder ce célèbre plugin. Nous allons l'explorer et voir ce que vous pouvez faire dans Figma, comment le connecter à votre projet Webflow et comment travailler sur des projets similaires, mais pas celui-ci. Alors je te verrai là-bas. 162. Plugin de figma à webflow: Très bien, alors allons-y. Je vais vous montrer comment connecter le flux de travail de l'outil Figma. C'est la première fois que je le fais et je vais vous montrer à quoi cela ressemble. Donc, en gros, vous allez accéder à votre panneau de recherche de plugins, Figma à Webflow et vous allez installer celui-ci. Assurez-vous simplement que c'est réalisé par Webflow Labs. Vous pouvez le voir ici. Donc, juste pour vous assurer qu'il s'agit d'un plugin officiel, cliquez sur Exécuter. Et il va essentiellement exécuter une installation. Vous pouvez le voir ici. Et il va vous montrer toutes sortes d'options différentes. Safari n'est donc pas pris en charge. Utilisez le flux de travail dans Chrome. Je l'utilise dans Chrome, donc je ne sais pas vraiment pourquoi il me le montre. Et c'est à peu près tout. Donc, ce que nous avons ici, que nous avons des mises en page et une structure. Vous pouvez donc inclure une section et un conteneur. Deux colonnes, trois colonnes, quatre colonnes d'en-tête plus trois colonnes et ainsi de suite. Et vous devriez vraiment apprendre cela dans la section Webflow du cours lui-même, savoir plus sur tous ces éléments et sur la manière de structurer vos sites Web. Et puis peut-être y revenir. Si vous n'êtes pas familier avec la structure HTML de base de vos pages, nous avons la mise en page, et ce sont essentiellement les modèles que vous pouvez utiliser. Mettons donc cela de côté. Passons en fait à nos actifs ponctuels. Utilisez la page de notre site Web, appuyez sur Contrôle C. Revenez au contrôle de conception du site Web V. Positionnez-le à peu près ici. Nous y voilà. Ce que je vais faire, c'est utiliser ce logo de navigation, cliquer avec le bouton gauche de la souris et ajouter à Canvas. Je vais donc cliquer et espère qu'il l' ajoutera ici. Ce n'est peut-être pas que c'est ailleurs. Tu sais, pour une raison ou une autre, ça ne marche pas. Je ne sais pas vraiment pourquoi. Peut-être devrions-nous commencer par une conférence sur la structure. Débarrassons-nous de celui-ci. Essayons donc comme ça. Nous y voilà. Donc nouvelle page. Nous devons utiliser les leurs. Donc 14, 40. Dans ce cas. Ici, nous allons juste laisser le logo de navigation. Cela inclura ce héros qui se dirige vers la gauche. Voyons voir. Donc, équipe de héros, voyons les fonctionnalités, matrice des fonctionnalités. Nous y voilà. Vous pouvez donc voir qu'il commence à ajouter toutes ces sections, peut-être une section d' équipe, des cercles d'équipe. Nous y voilà. Peut-être des témoignages. Utilisons donc celui-ci. Et peut-être que nous pouvons utiliser des logos. Peut-être celui-ci, Footer, peut-être celui-ci. Et nous y voilà. Essayons encore une fois. Nous y voilà. Maintenant que nous avons tout, explorons rapidement cette mise en page car vous devrez utiliser cette mise en page particulière pour pouvoir implémenter cette mise en page dans vos propres pages. Donc, tout d'abord, nous pouvons voir que la mise en page est fixée à 14:40 API, 14, 40 pixels. Nous en avons donc 14, 40 également. Mais le nôtre n'est pas fixe. Donc, vous devriez essentiellement le réparer. Et vous devez transformer tout votre contenu en mise en page automatique. Vous pouvez donc voir qu'ils ont la mise en page automatique. Donc, par exemple, si je le fais ici, je peux créer une mise en page automatique au lieu d'une largeur fixe. Et voilà. Mon contenu est le même que le leur. Alors, que devons-nous faire ensuite ? Eh bien, en gros, tous ces éléments devraient être dans leur propre mise en page automatique distincte. Nous avons donc maintenant le logo de la barre de navigation à gauche, qui est cette barre de navigation en haut. Et si je l' ouvre, tout d'abord, vous pouvez voir que c'est tout seul, c'est une mise en page automatique. Et vous pouvez voir que nous avons un rembourrage horizontal de 24. Donc, si je l'ouvre, nous avons le conteneur de la barre de navigation, qui est le conteneur dans lequel le contenu doit entrer. Ensuite, nous avons le contenu de la barre de navigation elle-même. Oui. Maintenant, empruntez du contenu, qui contient tout cela. À l'intérieur, nous avons la marque de la barre de navigation et le menu de la barre de navigation. C'est donc ainsi que vous devez structurer vos fichiers et vous assurer de les configurer pour remplir le contenant et y intégrer les éléments. Donc, lorsque je sélectionne cette option, vous pouvez voir qu'elle est de 14 à 40 p. Mais comme elle est réglée à une distance de 24 de chaque côté, vous pouvez le voir ici. Ensuite, lorsque je sélectionne mon conteneur, ils définissent la largeur fixe de 1 200 , puis la largeur totale du contenu qu'il contient. Cela va le rendre réactif immédiatement. Ce qui va se passer ici, c'est que vous pouvez sélectionner celui-ci. Par exemple, et au lieu de cela, vous pouvez inclure votre propre logo à l'intérieur d'ici. Vous pouvez donc échanger des instances, par exemple , ou simplement glisser-déposer votre logo à l'intérieur. Et essayons réellement de le faire. Allons voir une araignée. Nous y voilà. Vous pouvez voir que vous pouvez placer votre logo à l'intérieur et que vous pouvez simplement vous débarrasser de leur logo, tout en vous assurant de garder la distance entre les dettes. Donc, en fait, Control X, Control V. Appuyez dessus, supprimez cela, et c'est parti. Nous remplaçons maintenant le logo par notre propre logo. Nous pouvons placer toutes nos instances ici sur de nombreuses fonctionnalités ici et ainsi de suite. Mais en fait, comment connecter tout cela. Vous devez ouvrir vos tableaux de bord de flux de travail et trouver le projet. Ce fichier Figma est-il lié à ? Dans notre cas, cela s' appelle une araignée des voitures exclusives conçues dans Webflow, c'est pareil. Ainsi, lorsque vous ouvrez le tableau de bord de votre flux de travail, vous allez vous connecter. Il suffit donc de cliquer ici. Vous allez vous connecter , puis vous allez cliquer sur ce projet en particulier pour le connecter. Ensuite, lorsque vous le connectez , vous pouvez copier tous les textes et styles de couleur, uniquement du texte et uniquement des styles de couleur. Vous pouvez accéder aux paramètres du plugin et y configurer. Maintenant, en gros, pour chaque fichier Figma, vous pouvez vous connecter à différents sites Web pour des projets et faire l' inverse. Pourquoi ? Je ne pense pas que cela soit utile pour des projets complexes, car vous pouvez pratiquement tout faire ici. Mais comme je l'ai dit, pour notre cas d'utilisation particulier, cette page nécessite vraiment quelques ajustements supplémentaires . Et vous allez voir que lorsque vous arriverez sur la page Webflow, à cause de ces boîtes à lumière, j'ai dû combiner plusieurs boîtes à lumière parce que le flux de travail ne possède pas les options par défaut dont j'ai vraiment besoin pour exécuter ce projet. Il est donc très difficile de faire certaines choses lorsque vous vous contentez de suivre l'itinéraire par défaut. Vous devez parfois faire semblant et faire certaines choses d'une manière différente, d'une autre manière. Mais sur ce point, je vais terminer cette étape de conception et de prototypage dans la prochaine vidéo. En gros, vous allez pouvoir commencer par la partie Webflow de ce cours. Vous pouvez ouvrir ce fichier Figma pour l'explorer. Vous pouvez exporter tous ces actifs comme je vous l'ai montré. Vous pouvez jouer avec certains paramètres de prototypage. N'oubliez pas que tout fonctionne exactement de la même manière dans Figma que dans Adobe XD. Les deux seules différences principales, comme vous l'avez vu jusqu'à présent, sont essentiellement trois. Comment créer ces styles pour le texte et les couleurs. Parce que dans XD, ils se trouvent juste ici, sur le côté gauche. À Figma, ils sont ici. Vous pouvez donc cliquer dessus pour échanger des instances car dans XD, vous pouvez faire glisser le composant le placer au-dessus du nouveau composant. Vous avez ici cet échange d' instances, qui, à mon avis, est un peu meilleur qu'ici. Et en gros, dans toute la structure qu'ils appellent mise en page automatique ici, et dans XD, ils sont appelés piles. Tout le reste, à mon avis, est exactement pareil. Certaines choses sont encore pires à mon avis, comme l'ajout d'images que vous ne pouvez pas simplement glisser-déposer au-dessus de la forme. Ensuite, vous devez, ici sur le côté droit, trouver cette forme, puis la faire glisser et la déposer là-bas. Bien entendu, il existe d'énormes différences concerne le fémur, qui sont meilleures que dans XD, vous pouvez ajouter des grilles horizontales et verticales, par exemple, vous pouvez ajouter plusieurs opacités et plusieurs couleurs, styles et textiles en plus des quantités existantes. Vous ne pouvez pas le faire dans XD. Il y a donc à peu près des morts. Et il s'agit, bien sûr, de fonctionnalités de prototypage avancées, telles que des utilisations et des modifications, et vous pouvez modifier les courbes et d'autres choses de ce genre. Mais je ne voulais pas trop vous embêter avec ce genre de choses, car nous allons le faire plus tard dans Webflow de toute façon. Alors quel est l'intérêt ? Ici, je viens de vous montrer quelques éléments de base pour le prototypage dans XD et ici dans Figma. Cela va donc à peu près clore cette section du cours consacrée à la conception. Désolé si certaines vidéos ont été plus longues, mais j' essayais juste d'expliquer le plus possible cette transition depuis XD Figma. Vous pouvez voir que c'est à peu près pareil et qu'il en sera de même maintenant qu'Adobe l' a acheté. Je vous verrai donc dans la prochaine leçon où nous allons commencer par le flux de travail. 163. AFFECTATION de l'article 16: Votre tâche pour cette section est d'utiliser les fichiers que j'ai fournis et d'essayer d' utiliser soit différentes images, soit différentes couleurs, soit une topographie complètement différente. Et juste pour jouer avec les fichiers, je vous encourage vraiment à suivre ce cours dans son intégralité, car les fichiers sont fournis pour cette raison particulière. N'essayez pas simplement d'utiliser le fichier fini et de jouer avec lui pour essayer de me suivre, essayer de suivre et de créer à mes côtés pendant que j'enseigne. Donc, pour mieux comprendre, plutôt que de simplement utiliser le fichier fini et de démonter en morceaux, c'est toujours la meilleure approche pour apprendre au fur et à mesure. Donc, pendant que j'enseigne, que vous regardez ces leçons, il est toujours préférable de suivre et d'essayer de la créer vous-même. Et pendant que vous le créez pour la première fois, essayez peut-être un tout petit peu pour utiliser peut-être une nuance de gris différente et pas exactement la même teinte de gris que celle que j'ai utilisée dans cette leçon. Et c'est la meilleure façon d'apprendre, à mon avis. 164. SECTION 17: Dans cette section du cours, nous allons utiliser ce que nous venons concevoir et l'intégrer au flux de travail. Workflow est un outil fantastique conçu sans code en tête. Cela signifie que le code s' exécute en arrière-plan, mais que vous vous occupez en fait du contenu visuel, mais il est différent de tous ces autres outils parce que vous allez apprendre le HTML, CSS et JavaScript en cours de route sans que vous ayez à connaître une seule ligne de code. Commençons donc avec le Webflow et finissons ce projet. 165. Introduction au flux Web: Webflow est un outil incroyable qui vous permet de créer des sites Web riches en contenu entièrement réactifs et entièrement animés, tout sans connaître une seule ligne de code. De toute évidence, il est préférable que vous sachiez coder, car vous pourrez ensuite développer cette fausse fonctionnalité Web. Mais si vous ne savez pas coder, ce n'est pas grave, car vous pouvez soit créer votre design à partir de zéro, comme nous le faisons dans ce cours, soit utiliser certains des milliers de personnes qui ont pleuré, différents modèles fournis par Webflow. Ensuite, vous pouvez modifier l'un de ces modèles et simplement continuer là où ils s'étaient arrêtés avec ce modèle. Encore une fois, il est avantageux que vous connaissiez au moins la structure du code. Mais si vous ne le savez pas, nous en parlerons dans ce cours, nous le ferons bientôt. Mais pour l'instant, Webflow est un outil fantastique car il ne vous permet pas de vous enliser dans certains plugins et mises à jour comme WordPress, par exemple, il n'est pas très limité comme corrigé, par exemple où tout est déjà prêt et vous êtes limité avec ces modèles, largeurs et tailles, etc. Mais vous pouvez créer tout votre contenu à partir de zéro. Vous pouvez créer vos designs personnalisés à partir de zéro. Et c'est vraiment officiel, surtout en ce qui concerne les fonctionnalités du CMS, que nous aborderons plus tard dans ce cours. Et bien sûr, la fonctionnalité de commerce électronique, qui permet à vos clients de vendre des produits en ligne à l'aide de Webflow. Ce qui distingue Workflow de tous ses concurrents, c'est qu' il propose de l'hébergement, ce qui est très bénéfique pour vous et vos clients. Parce que dès que vous aurez terminé votre conception, lorsque vous aurez obtenu l' approbation finale de vos clients, vous pourrez immédiatement commencer à héberger. Vous pouvez intégrer l'hébergement bloqué de votre nom de domaine directement depuis Webflow. Ou vous pouvez acheter votre nom de domaine pour quelque chose comme GoDaddy, par exemple, et simplement implémenter ce nom de domaine dans votre hébergement Webflow. Enfin, si vous ne voulez pas héberger des sites Web avec Fire Flow, vous devez l'héberger sur sites Web externes tels que Whole Stinger ou Host Gator ou quelque chose comme ça, Blue Host peut-être. Webflow propose également cette option. Vous pouvez exporter tout votre code et le préparer simplement dans un seul dossier. Vous pouvez ensuite télécharger ce dossier dans un dossier racine de votre site Web d'hébergement. Permettez-moi donc de vous montrer quels flux et ce qu'ils peuvent faire à l'heure actuelle. Nous voici donc sur webflow.com et vous pouvez visiter ce site Web juste pour vous familiariser un peu avec ce que Webflow peut faire, à quoi il ressemble. Bien entendu, nous allons aborder beaucoup de choses dans ce cours, mais il est toujours utile que vous en sachiez au moins un peu avant de vous lancer dans le contenu lui-même. Donc, ce que nous avons ici, c'est à quoi ressemble Webflow. Il s'agit donc du mode de prévisualisation et vous avez cette icône ici, que nous aborderons de nombreuses fois au cours. Ici, en haut, vous avez vos différents points de rupture, que j'ai mentionnés dans la section design. Il s'agit donc du bureau et dans Webflow, tout part du bureau et cela descend comme déjà mentionné. Vous concevez donc d'abord pour un ordinateur de bureau, puis vous passez à une tablette, ce qui est distinct. C'est un paysage mobile et c'est un portrait mobile. Et ici, vous pouvez voir la taille de l' aperçu de votre fenêtre. Donc, si vous avez un ordinateur portable plus petit, c'est vraiment avantageux car vous pouvez saisir ici différentes tailles, comme par exemple largeur de 2000 pixels de l'écran. Et il imitera la largeur d'un écran de 2000 pixels, même si votre écran mesure 13, 80 ou quelque chose comme ça. Ensuite, nous avons la fonction adenine que vos clients peuvent modifier assez facilement une fois vous publiez le site, car vous pouvez simplement les inviter ou partager le lien ou lorsque vous traduisez et transférez votre site Web de votre conception à son hébergement, par exemple , ils pourront le modifier directement. Ils peuvent changer de texte, créer de nouveaux textes. Ils peuvent copier et coller différentes sections du site Web. Ils peuvent créer du contenu complètement nouveau via un CMS, que nous allons aborder un peu plus en détail. Ensuite, vous pouvez voir les modifications enregistrées ici. Et ici, vous pouvez publier les modifications pour que le monde entier puisse les voir. C'est donc assez simple une fois que vous l'avez maîtrisé, mais cela va paraître compliqué, mais je vous promets que ce n'est pas du tout compliqué. Pensez-y comme un gros outil de conception, un peu comme Photoshop ou quelque chose comme ça. Et ça va être très facile à comprendre pour toi. Une dernière chose que je voudrais aborder à propos d'un Webflow inquiétant est la suivante. Si vous souhaitez héberger vos sites Web ailleurs, CMS ou de commerce électronique, y compris sur des forums, cela ne fonctionnera pas correctement car tous ces éléments sont combinés dans les fonctionnalités des flux de travail. Donc, si vous souhaitez créer des éléments de votre CMS comme nous allons le faire dans ce cours pour toutes ces voitures et des pages détaillées de toutes ces voitures, vous devez utiliser Webflow. Dans le cas contraire, il ne sera pas correctement connecté et ne fonctionnera pas correctement. Assurez-vous donc de garder cela à l'esprit. Il en va de même pour la fonctionnalité de commerce électronique du Webflow. Vous devez donc héberger produits de votre client dans Webflow pour que cela fonctionne. Enfin, je voudrais aborder les forums. forums tels que le formulaire de contact que nous allons créer dans cette classe sont connectés via l'API des flux de travail. Il envoie donc les informations directement via Webflow. À votre adresse, disons Gmail ou tout autre e-mail que vous recevez. Cela ne fonctionnera donc pas correctement non plus. Mais si vous créez des forums de contacts, vous pouvez simplement les modifier un peu plus tard. Dans quelque chose comme, je ne sais pas, Sublime Text peut être ou quel que soit votre éditeur de texte, si vous connaissez juste un peu de code pour pouvoir simplement pointer cet e-mail. Il ne s'agit donc pas d'envoyer cet e-mail via des serveurs de flux de travail, mais directement via votre serveur Vous pouvez simplement placer cela et cela directement dans Gmail, par exemple si vous êtes héberger votre e-mail sur Gmail. Mais je voulais juste le souligner et il est très important, si vous travaillez avec vos clients, de leur dire que s'ils ne veulent pas héberger sur Webflow, alors CMS, commerce électronique et les forums ne fonctionneront pas directement là-bas. Donc, une chose à garder à l'esprit pour les sites Web statiques , c'est que les pages qui ne bougeront pas resteront complètement statiques, comme les pages de destination sont toutes les autres pages de ce site Web, sauf pour les pages relatives à différentes voitures. Cela va changer. Gardez donc cela à l'esprit et informez vos clients dès le départ de ce qu'ils y investissent. Nous voici donc de retour sur le site des flux de travail. Et comme je l'ai mentionné, permettez-moi de faire défiler la page et de vous montrer quelques exemples de ce que vous pouvez créer. Ici vous pouvez voir le sélecteur de couleurs, donc au même goût, disons Photoshop ou tout autre outil. Nous allons créer ces échantillons de couleurs comme nous l'avons fait dans Adobe XD. Vous pouvez voir ici la publication de sa nation. Vous pouvez donc publier via un domaine intermédiaire, ce que vous êtes autorisé à faire pour maximum de deux sites Web avec le forfait gratuit de Webflow. Et ici, vous pouvez connecter votre domaine personnalisé ou votre hébergement personnalisé ou tout ce que vous voulez directement via Webflow afin de pouvoir connecter votre domaine personnalisé comme lattice.com dans ce cas, et vous pouvez l'héberger directement sur Webflow, comme je l'ai mentionné, et il connectera tout cela pour vous. Vous pouvez publier pour sélectionner les domaines comme celui-ci, ou vous pouvez accéder aux options avancées et exporter du code et d'autres éléments de ce type. Donc, là où il est dit publier, vous pouvez cliquer dessus et l' option d'exportation du code s' affichera, que je montrerai un peu plus tard. Donc, si je commence à faire défiler la page vers le bas, vous pouvez voir que tous ces sites Web sont créés ou que certaines pages sont créées sur Webflow. Upwork est presque entièrement créé sur Webflow, et je sais que Gamma Road est également créé sur Webflow. Vous pouvez ainsi voir combien de designers utilisent Webflow en ce moment. Et voici à quoi cela ressemble une fois que vous commencez à travailler dans le flux de travail. Vous pouvez donc simplement cliquer sur Ajuster et cela s'ajustera en temps réel. Comme n'importe quel autre outil de conception. Et cela me rappelle beaucoup Photoshop, notamment à cause de la palette de couleurs et du positionnement de tous ces différents éléments. Vous pouvez glisser-déposer des éléments sur la page pour être vraiment précis. Et vous pouvez même saisir un code personnalisé à l'intérieur. Comme je l'ai dit, si vous savez coder, si ce n'est pas le cas, c'est très bien. Tu ne sais même pas coder. Je te le montrerai plus tard. Une puissance créative qui va bien au-delà des modèles. Vous pouvez donc voir que c'est le CMS qui va être abordé un peu afin que vous puissiez extraire le contenu de votre bibliothèque C'est ce que nous allons créer un peu plus tard. Nous allons donc créer cette page dynamique qui n'a qu'une seule page, un seul modèle, qui hébergera la mise en page et le contenu de toutes nos différentes pages dynamiques. N'oubliez donc pas que nous allons avoir huit voitures différentes, donc huit pages dynamiques différentes. Mais au lieu de créer à nouveau huit pages différentes, ou simplement de copier-coller des éléments. Nous allons tout faire dans le CMS. C'est pourquoi un système de gestion de contenu ou CMS comme celui-ci est bénéfique pour vos clients. Vous pouvez lancer des boutiques de commerce électronique personnalisées, comme je l'ai mentionné, afin de positionner les prix et de mettre différentes options de couleur, boutons, etc. Nous pouvons monétiser le contenu réservé aux membres par le biais de l'adhésion. Et tu peux le faire ressortir. Vous pouvez donc voir toutes sortes d' animations différentes ici. Et vous pouvez être vraiment très précis avec les animations. Et nous aborderons l' animation un peu plus tard. Mais nous pouvons essentiellement créer un cours complet sur les animations parce qu'elles sont si avancées et peuvent l'être. Mais en même temps, ils peuvent être très faciles à créer. C'est à vous de décider ce que vous voulez créer avec les animations de votre site Web. Donc, si vous faites défiler l'écran un peu vers le bas, il est optimisé pour le marketing et soutenu par le design. Vous pouvez donc voir quelque chose comme ça. Pourquoi ils ont mentionné que vos clients souhaitaient peut-être ajouter un nouveau texte, peut-être en mettre une nouvelle copie et vous pouvez le voir ici Nous avons donc ce bouton Publier. Ainsi, une fois que vous avez modifié votre copie, vous pouvez cliquer sur Publier et cette modification sera publiée en direct. Vous pouvez ainsi optimiser le référencement. Vous pouvez donc ajouter des balises de titre, vous pouvez ajouter des méta-descriptions. Vous pouvez créer des flux avec logique, ce qui est vraiment bénéfique, surtout si vous utilisez quelque chose comme Air Table, peut-être pour extraire des informations d'Air Table directement via votre Web, site web complet. Et vous pouvez connecter ces exemples de logique personnalisés, un peu comme Zapier. Donc, si l'utilisateur fait cela, alors vous le faites et vous le lui montrez. Ainsi, vous pouvez connecter toutes sortes de choses différentes. Par exemple, si un utilisateur m' envoie un e-mail, inscrivez cette adresse e-mail de cet utilisateur dans une base de données appelée Marketing for Mondays ou quelque chose comme ça. Vous pouvez donc être très précis et vraiment créatif grâce la logique Webflow et connecter tous vos outils préférés. Donc, si vous utilisez Google Analytics, vous pouvez, si vous utilisez le pixel Facebook, vous pouvez le faire également si vous vendez via Teachable, si vous vendez des cours via Teachable Teachable, si vous vendez des cours via Teachable. Vous pouvez donc faire beaucoup de choses ici même dans Webflow. Vous pouvez donc vous développer car il est conçu pour la croissance à l'échelle de l'entreprise, en particulier si vous créez des blogs plus volumineux. Ce n'est peut-être pas la bonne option pour les blogs, qui sont peut-être de nouvelles tailles, car cela peut parfois être fastidieux car ces grands sites Web ont tendance à changer de page de temps en temps, interagir avec différents éléments de temps à autre. Alors peut-être qu'une solution personnalisée est géniale. Mais jusqu' à ce que l'entreprise de chacune d'entre elles ressemble à une agence de presse avec des milliers d'articles de blog différents, publiés quotidiennement, Webflow est une excellente option pour cela. Vous pouvez voir certains sites Web créés dans Webflow. Et en gros, le ciel est la limite en matière de créativité. Vous pouvez voir créé dans Webflow, tout savoir à sujet et voir ce que les gens ont créé. Ils ont une excellente ressource appelée Webflow University, et vous pouvez regarder leurs tutoriels sur webflow.com ou sur YouTube. Ils ont une excellente chaîne YouTube et vous pouvez y accéder gratuitement jusqu'à ce que vous soyez prêt à le lancer. Vous pouvez créer votre site gratuitement et prendre le temps dont vous avez besoin. Ajoutez simplement un plan de site pour plus de pages et un domaine habituel lorsque vous serez prêt à explorer le monde. Vous pouvez donc comprendre pourquoi ils proposent cela gratuitement parce que vous pouvez construire, vous pouvez l'apprendre, tout préparer. Et puis, lorsque vous serez prêt pour le lancement, vous devrez payer. À ce propos, abordons rapidement les prix et voyons à quoi cela ressemble. Donc, si je passe aux prix ici, vous pouvez voir que nous avons des plans de site. Nous avons un CMS de base, de base, professionnel et d'entreprise. Maintenant, cela peut être un peu compliqué. Les plans de site sont donc parfaits pour essayer Webflow. Et lorsque vous achetez un forfait de site payant pour publier, héberger et débloquer des fonctionnalités supplémentaires. Cela va donc essentiellement vous permettre de publier votre site Web fini, et c'est à cela que servent les plans de site. Ainsi, vous pouvez voir ce qui est inclus dans la version de base. Vous pouvez inclure le domaine personnalisé Zero CMS items. Ce n'est donc pas pour CMS, 500 abonnements mensuels au forum. Vous pouvez donc attirer autant de personnes via votre e-mail et 50 Go de bande passante. Et pour le CMS, vous pouvez avoir des éléments du CMS des années 2000, que j'ai mentionnés. N'oubliez pas que nous en avons huit, par exemple dans ce cas. Mais dans notre cas, disons que lorsqu'un client vend cette voiture, il va évidemment supprimer cette annonce. Nous avons donc ici des articles CMS des années 2000. Nous n'en avons que huit, mais nous en avons vendu un, donc nous allons le supprimer maintenant que nous en avons sept, nous voulons en ajouter deux de plus. Nous en avons donc neuf maintenant. Nous allons en vendre un et en supprimer un. Nous en avons donc huit maintenant. Vous pouvez donc voir les années 2000, c'est vraiment difficile à faire évoluer, surtout pour une entreprise de cette taille. Donc 23$ par mois ou si je passe ici à l'année. Il est donc construit chaque année, donc 23 fois 12, et c'est ce que vous allez obtenir. Nous avons donc le général, puis nous avons le commerce électronique, qui, une fois de plus vous offrira des fonctionnalités différentes. Nous avons donc ici des milliers d'articles différents et un volume de ventes annuel de 2 000 200 000. Et ici, vous avez un volume de ventes illimité. Donc, évidemment, en fonction de vos compétences en affaires, vous allez développer et ajouter ces différents plans de site. Et évidemment, lorsque vous vendez ces sites Web à vos clients, il est important de leur expliquer tout cela afin qu'ils comprennent qu' il vaut mieux qu' ils commencent plus petit. Donc, si votre client n'a pas de pages CMS, il ne veut pas de contenu dynamique car cette plante fonctionne très bien. Mais dès qu'ils ajouteront du contenu CMS, vous devrez acheter ce plan. Ils devront l'acheter à nouveau car ils hébergeront leur site Web sur le flux de travail s'ils souhaitent un CMS. S'ils ne veulent pas de CMS, ils veulent simplement un hébergement régulier, alors c'est probablement une bonne option. Mais s'ils n'ont besoin d'aucun type de CMS, ce n'est peut-être pas une bonne option car cela devient assez cher lorsque vous l'ajoutez. Parce que s'ils veulent modifier ce dont ils ont besoin, ils doivent créer un plan de conception auquel vous pourrez accéder en une seconde afin qu' ils puissent apporter des modifications, télécharger de nouvelles images, les remplacer et des trucs comme ça. Peut-être que ce n'est même pas une bonne option, mais c'est vraiment à vous et à votre client de vous mettre d'accord. Par exemple, l'un de mes clients ne souhaitait pas héberger son site Web sur Webflow, mais pour chaque modification, il m'a contacté et je lui ai facturé chaque modification sur le site Web. Mais c'est juste la façon dont vous êtes d'accord avec vos clients, car pour ce client en particulier, nous avons simplement fait en sorte que Dan change sur une période d'un an. Ce n'est donc pas si difficile, mais si votre client besoin de modifications constantes sur son site Web, achat d'un hébergement Webflow est peut-être une bonne option pour lui. Nous avons des espaces de travail pour les indépendants et les agences. Nous n'allons pas trop en parler pour cela. Mais évidemment, si vous faites partie d'une agence ou si vous créez une agence, c'est ce qui doit être expliqué. Et ici, nous en avons encore plus. Donc. Nous avons un concepteur de produits, c'est ce qui nous intéresse. Et nous avons la structure, naviguez dans ses symboles, toutes sortes de choses différentes. Nous allons donc en parler dans une seconde. Je veux juste voir si je peux trouver les prix ici. Je ne pense pas pouvoir. Si je vais voir le tableau de bord je vais sur le compte et je vais sur les plantes. J'ai donc été léger mais ça va être annulé à cette date car je veux passer à la version pro, mais je ne voulais pas le faire avant. Ainsi, lorsque vous annulez votre plan, vous pouvez payer mensuellement ou annuellement. Vous pouvez donc voir que c' est mon plan actuel. Vous pouvez commencer gratuitement. Comme je l'ai mentionné ici, vous avez deux projets. Nous proposons une mise en scène gratuite, mais vous n'avez pas de code à exporter . Vous devrez donc payer pour pouvoir exporter du code, sans étiquette blanche. Cela signifie que vous pouvez ajouter votre propre logo à l'éditeur et supprimer la marque Webflow, sans protection par mot de passe sur le site et sans tableau de bord d'équipe. Donc, vous ne l'avez pas ici non plus, mais vous l'avez dans ce plan, raison pour laquelle j'ai choisi ce plan est que mes clients puissent exporter du code et que j'ai dix projets, ce qui, je pense, est suffisant pour moi. Encore une fois, vous pouvez la construire manuellement ou chaque année, ou la construire chaque mois comme vous le souhaitez, mais vous devrez acheter cette usine, comme je l'ai mentionné, si vous voulez plus de deux projets et si vous voulez pouvoir exporter du code, si vous ne voulez rien faire de tout cela. Si vous voulez juste apprendre, ce plan de départ à plat convient parfaitement. Vous pouvez apprendre Webflow. Vous pouvez créer autant de projets que vous le souhaitez. Il vous suffit de supprimer certains d'entre eux lorsque vous atteignez cette limite de deux projets. Et puis une fois que vous aurez obtenu quelques clients, vous pouvez acheter le plan de requête et simplement continuer là où vous avez dix projets ou quand cela deviendra petit, bientôt, espérons-le, bientôt pour vous, alors vous pouvez passer à la sonde. Encore une fois, pour couvrir rapidement, vous devez acheter des plantes à comptes si vous souhaitez avoir plus de deux projets et pouvoir exporter du code. Si vous souhaitez héberger sur Webflow, pas vous mais vos clients, ils devront acheter des plans d'hébergement. Et s'ils veulent être en mesure d'apporter eux-mêmes des modifications à leurs sites Web, ils devront également acheter ces plans de compte afin de pouvoir apporter des modifications et capable d'ajouter des images par eux-mêmes, par exemple et de jouer avec le CMS et d'autres choses de ce genre. Vous devez donc expliquer cela à vos clients. Il s'agit simplement d'une dépense normale pour l'entreprise. Donc, tous ceux qui font des affaires, moi et moi-même, par exemple, je paie pour que Teachable puisse organiser tous mes cours. Je paie pour que Gmail puisse avoir une messagerie professionnelle. Je paie en fonction du flux de travail, comme vous pouvez le voir dans cet exemple, je paie pour un plan d'affaires, par exemple afin que tout cela fasse partie de l'entreprise et qu'ils aient juste à savoir que c'est à leurs frais. Gardez cela à l'esprit. Ils devront acheter un domaine. Ils devront acheter un hébergement, dans tous les cas, que ce soit via Webflow ou via hosting girl, Bluehost, Host, Gator, tout ce qu'ils devront acheter , c' est aussi un domaine. Vous devrez acheter votre domaine via GoDaddy ou Google Domains, ou via Webflow. C'est donc de toute façon qu'ils devront acheter ces choses. Webflow vous offre simplement cette option supplémentaire qui vous permet de tout concevoir, créer, mettre en scène, lancer et héberger en un seul endroit. Donc, si vos clients veulent le faire, c'est très bien. Si ce n'est pas le cas, il est de votre responsabilité de leur expliquer. Dans ce cas, toutes ces fonctionnalités ne fonctionneront pas. Si vous n'hébergez pas sur Webflow. C'est aussi simple que cela. Alors on y va. Nous avons expliqué Webflow. J'espère que cela vous semble plus logique maintenant Si cela ne vous permet pas de l' explorer une fois de plus, regardez cette vidéo une fois de plus. Nous verrons par vous-même et créerons votre compte là-bas. Encore une fois, il est totalement gratuit pour vous de démarrer jusqu'à deux projets sans aucun expert en code. Mais je vais vous montrer à quoi cela ressemble dans ce cours. Ensuite, nous allons préparer nos fichiers et commencer à créer notre projet Webflow. Alors je t'y verrai. 166. Créer le projet: Très bien, préparons maintenant nos fichiers depuis Adobe XD et veillons à les traduire via Webflow. Et je vais vous montrer comment démarrer un nouveau projet. Commençons donc. Nous voici donc dans Adobe XD et voici notre projet, et c'est là que nous l'avons arrêté. Donc, encore une fois, nous avons le flux d'utilisateurs, nous avons créé des wireframes papier. Nous avons un plan du site et une architecture de contenu. Nous avons notre mood board, et voici notre design. Mais cela, vous ne l'avez pas vu auparavant dans les vidéos. Voici donc le guide de style et comment vous pouvez créer quelque chose comme ça. C'est tout simplement super simple. Et tout d'abord, pourquoi vous voudriez créer quelque chose comme ça en premier lieu. Le guide de style est beaucoup plus facile : il suffit de copier-coller des styles et des éléments si nécessaire, et de conserver et d'avoir tous vos éléments en un coup d'œil. Vous pouvez donc voir ici que j'ai créé des couleurs, de la typographie, iconographie, du logo, des boutons et des cartes de voiture. Alors pourquoi est-ce important ? Eh bien, il est beaucoup plus facile pour moi de le créer maintenant dans Webflow. Et je vais vous le montrer dans une seconde. Mais avant de savoir comment créer un peu de plaisir, vous créez simplement, disons pour la typographie, tous ces éléments. Et si vous souhaitez modifier quelque chose, il vous suffit de cliquer ici et le changement sera appliqué comme je vous l'ai montré dans ce cas. Donc pour les couleurs, j'ai fait exactement la même chose car je veux pouvoir copier ces codes hexadécimaux d'ici ou d'ici. Mais il est beaucoup plus simple de les avoir en un coup d'œil, à la fois pour vous et pour vos clients. Pour les développeurs, si vous l'envoyez pour un développement ultérieur. Mais dans ce cas, il s'agit simplement de nous rappeler ce qui est impliqué dans ce projet et ce qui est inclus dans ce projet. Donc, tout d'abord, laissez-moi passer à Overflow. Et voici mon point de vue. Il s'agit du site de mise en scène que j'ai créé pour vous guider tout au long de ce cours. Et dans ce cas, je vais créer un nouveau site qui se trouve ici, dans mon tableau de bord Webflow. Donc, si je clique ici et que vous pouvez voir, vous pouvez commencer avec les modèles. Et vous avez ces modèles, qui sont des modèles premium, créés par une communauté de designers. Et vous pouvez y aller avec de la viande dans Webflow et ici, où il est indiqué que vous avez des modèles de ressources. Donc, si je clique avec le bouton droit de la souris et que je l' ouvre dans un nouvel onglet, vous pouvez voir toutes sortes de modèles différents, mais ils sont pour la plupart premium. Mais vous pouvez filtrer gratuitement ici en haut. Et vous pouvez voir toutes sortes de modèles gratuits ici. Mais la majorité des bons et excellents modèles sont premium. Vous pouvez donc effectuer une recherche par catégorie populaire CMS, commerce électronique. Vous pouvez découvrir tout cela ou vous pouvez cliquer sur Meet in Webflow pour vous inspirer. Et il va montrer des sites Web incroyables créés dans Webflow. Mais de retour dans notre tableau de bord, je vais simplement commencer par un modèle vierge. Vous pouvez voir, bien sûr, c'est gratuit. Donc, quand je clique juste là, je dois lui donner un nom. Donc, dans ce cas, je vais lui donner le nom d'un site Web de voitures exclusives à Spider juste pour le distinguer de celui que j'ai créé à l'origine. Cliquez sur Créer un site. Et il va commencer à créer. Dans ce cas. Ici, nous sommes accueillis par nos designers. Alors avant de passer à autre chose, je voulais juste vous parler un peu plus de ce designer. Ce qu'il fait, y compris certaines fonctionnalités que vous devez connaître et découvrir. Et quel type de code est nécessaire pour que vous compreniez au moins comment cela fonctionne. Nous voici donc de retour dans notre designer et voici à quoi ressemble tout dans Webflow. Ça a commencé à partir d'ici. Lorsque vous passez la souris sur le logo de ce flux de travail, vous pouvez cliquer pour afficher un tableau de bord, les paramètres du projet et un éditeur. Donc, si je clique à l'extérieur d'ici, nous avons toutes sortes d'éléments que nous pouvons ajouter à notre page. Mais où les ajouter, vous pouvez cliquer ici pour ouvrir tous ces éléments. Nous avons donc des éléments et des mises en page, qui sont essentiellement des modèles prédéfinis que vous pouvez utiliser. Dans ce cours, nous allons tout recommencer à zéro, mais vous pouvez utiliser certains de ces éléments si vous le souhaitez. C'est un peu comme des kits d'interface utilisateur. Vous pouvez simplement les faire glisser et déposer à l'intérieur. Nous avons donc ici la mise en page, les éléments de base, la typographie , les CMS, les médias, les forums, les composants, toutes sortes de choses différentes. Donc, pour que vous puissiez ajouter quoi que ce soit, vous avez trois options. Donc, si je veux ajouter une section, je peux cliquer, faire glisser et lâcher prise ici, ou me laisser la supprimer d'ici. Ce que je peux faire, c'est, disons, appuyer à nouveau sur Section. Faites-le glisser ici dans le navigateur, qui ressemble en quelque sorte à un panneau de couches. Et il est situé juste ici. Vous pouvez le voir en une dernière chose. Et nous allons le faire tout le temps. Lorsque je sélectionne le corps et que j'appuie sur Contrôle K ou Commande K, je peux taper quelque chose comme section, appuyer sur Entrée ou Retour, et le message sera affiché ici. Nous allons l'utiliser tout au long de ce cours, alors assurez-vous de vous y habituer une fois de plus Control K. Donc, dans cette section, je vais mettre un bloc div, par exemple l'intérieur du blog div, par exemple Control Encore une fois, je vais taper H pour le titre et cliquer sur ma souris. Et disons qu'il s'agit du H2 puis en dessous de cette rubrique Control K, IMG pour l'image. Et en dessous de cette barre d'image K, disons le paragraphe. Et vous pouvez voir à quel point c' est simple car c'est du HTML. N'oubliez pas qu'en HTML, tout se passe du haut à gauche vers le bas. C'est ainsi que le HTML empile les choses. Ce n'est pas l'un à côté de l'autre. Ou si je l'ouvre ici dans le navigateur, vous pouvez voir dans cette section que nous avons notre bloc div, qui contiendra tous nos éléments. Ensuite, à l'intérieur du bloc div, nous avons un titre distinct. Nous avons une image et un paragraphe, et ils ne sont pas l'un en dessous de l' autre comme c'est le cas dans Photoshop, XD ou Figma ou tout autre outil de conception, mais ils se trouvent l'un en dessous de l'autre. Nous devons donc créer quelque chose qui s'appelle l'axe y. Et nous y reviendrons un peu, un peu plus tard. Mais avant cela, je voudrais vous montrer d'autres choses. Donc, ce que nous avons ici, c'est que cette boîte contient des symboles, et les symboles sont essentiellement des composants que nous allons aborder un peu. Donc, si je vous redirige vers XD, nous avons ici un composant pour la navigation, puis un composant pour notre formulaire de contact, pour la carte, la localisation et le pied de page, par exemple et il en sera de même ici dans Webflow, où nous allons créer ces composants une fois que nous aurons commencé notre mise en page. dessous, nous avons ce navigateur, que je vous ai déjà montré. C'est un peu comme votre panneau de couches. Et ici, vous pouvez annuler toutes les vies réelles ou les ouvrir ici, vous pouvez détacher le navigateur et il se déplacera, mais je ne recommande pas de simplement cliquer sur épingler le navigateur pour qu'il reste là tout le temps. Vous pouvez survoler puis ajuster la largeur du navigateur, quelque chose comme ceci. Si vous souhaitez en savoir plus sur le navigateur lui-même, trouverez les pages ci-dessous. Vous allez donc ajouter vos pages supplémentaires, de nouvelles pages, des pages utilitaires, nous avons un mot de passe et quatre ou quatre redirections. Vous pouvez l'ajouter à celles-ci. Vous pouvez cliquer ici et vous pouvez l'ajouter tel qu'il ressemble. Ou si vous souhaitez créer une nouvelle page, vous pouvez cliquer ici. Et si vous souhaitez créer un nouveau dossier, ce qui est évidemment utile pour de nombreuses raisons. Mais pour l'instant, nous allons simplement créer de nouvelles pages pour ce site Web. Ci-dessous, nous avons le CMS, qui est un système de gestion de contenu. Nous y reviendrons un peu plus tard, nous devrons donc créer une nouvelle collection. La collection sera constituée de voitures à vendre ou simplement de voitures, peu importe. Ensuite, à l'intérieur de cette collection, nous allons créer une page ou un élément , puis simplement recréer cette page à nouveau. Une fois que nous aurons commencé à créer nouvelles données et de nouvelles informations et à les intégrer. En dessous, nous avons le commerce électronique. Et vous pouvez voir ce que cela dit ici, mais nous n'allons pas aborder le commerce électronique dans le discours. En dessous, nous avons des actifs. Ici. Vous allez pouvoir glisser-déposer tous vos actifs. Et en fait, faisons-le dès maintenant. Donc, si vous vous en souvenez, nous les exportons ici. Nous avons toutes les images de nos projets ici, nous avons toutes les icônes de nos projets. Je vais donc simplement les sélectionner tous, les cliquer, les faire glisser et déposer dedans. Et vous pouvez voir qu'il va être rempli de toutes ces différentes icônes. Et je vais faire de même avec mes images. Il suffit donc de sélectionner toutes mes images, faire glisser et de les déposer à l'intérieur. Et voilà. Et il téléchargera toutes vos images et les positionnera. Ils parlent d'images. Ce que vous pouvez faire pour les icônes, c'est cliquer sur cette horloge. Donc, lorsque vous survolez, vous verrez ce rouage dans le coin supérieur droit. Donc, lorsque je clique juste là, je vais vous montrer si l'image est descriptive ou décorative ? Parce que c'est descriptif parce qu'il essaie d'expliquer quelque chose. Je vais dire quelque chose comme un homme debout dans le showroom automobile comme ça et le fermer simplement. Pourquoi j'ai fait ça ? Si je clique encore une fois pour l'ouvrir, c'est parce que les personnes malvoyantes utilisent des lecteurs d'écran pour naviguer sur le site Web. C'est pourquoi vous l' utilisez. Et si je clique ici, ajoutez-en d'autres pour que les personnes concluent l' affaire sur la vente de voitures, vente de voitures ou quelque chose comme ça. Et voilà. Ensuite, nous allons taper quelque chose comme des personnes explorant une salle d'exposition de voitures Spider Car. Comme ça. Et ici, nous aurons des prêts pour une Spider, des voitures exclusives, quelque chose comme ça. Alors, ce que nous pouvons faire, c'est créer quelque chose comme clause Mercedes Benz SI. Et voilà. Ce sera une image ou un coloriage de voiture-araignée. Voiture. Peut-être une image, ou parce que c'est décoratif, ce que je peux faire, c'est m'en débarrasser et passer à la décoration. Ils ne transmettent donc pas de sens et ne nécessitent pas de textes alternatifs Ils ne sont donc là qu'à des fins de décoration. Mais comme c'est le cas, je vais taper quelque chose comme Audi RS five et passer à ma gamme, qui sera celle-ci, Range Rover, Vogue. On y va. Alors maintenant, le texte alternatif va les montrer et il se traduira bien en les montrant à mon public. Laissez-moi juste voir ces avantages. L'image semble un peu floue car elle est opacité. Alors laisse-moi m'en débarrasser. En fait. Permettez-moi de passer à Adobe XD. Laissez-moi le trouver ici. Et si je vous montre que c'est à dix pour cent, mais je veux le faire dans Webflow. Je vais donc l'étendre ici, appuyer sur Contrôle ou Commande E. Et nous avons des images JPEG, c'est très bien. Exporter. Et puis ramenez-le à 10 % ici. Maintenant, si je passe au flux de travail et que je vous ramène à mes voitures, vous pouvez voir maintenant que c'est bon. Je vais donc le trouver ici. Cliquez dessus et cliquez sur Supprimer. Confirmez, supprimez. On y va. Et maintenant, je peux retourner dans mon dossier, cliquer sur le glisser-déposer dedans. Et maintenant, il va le positionner à 100 %. Parce que, comme je l'ai dit, je veux pouvoir ajuster ces paramètres. Ce que vous devez faire pour toutes vos images. Mais je ne vais pas trop vous embêter avec le discours, mais c'est juste la meilleure pratique pour le faire. Dans ce cas, chacune de vos images ou icônes doit contenir un texte alternatif. Le texte alternatif sera extrait du nom. C'est pourquoi nous les nommons dans XD. icône de voiture tellement pratique, c'est ce que ce sera. Description de la décoration. Vous pouvez donc écrire une description de l'image. Le texte alternatif est utilisé par les lecteurs d'écran et/ou si une image ne se charge pas. Il va donc utiliser le texte alternatif, et ce sont les anciens textes que nous allons créer. Vous pouvez donc simplement utiliser quelque chose comme ça. Icône de voiture si pratique. Vous pouvez donc soit le créer. Donc Kuan, icône automobile indulgente. Et il va utiliser les anciens textes qu'il contient. C'est donc à vous de parcourir toutes vos images, toutes vos icônes, tous vos logos et ce qui y est inclus. Et en parlant de logos, je ne pense pas que nous ayons exporté le logo ici. Je pense que nous ne l'avons pas fait. Revenons donc très rapidement à XD. Zoomez un peu. J'ai mon logo là-bas, mais je vais le faire directement à partir d'ici. Donc, au lieu du JPEG, utilisons le SVG et mettons-le à l'intérieur de nos images. Et si nous passons à mon flux Web, c'est parti. Revenez à mes images et où se trouve mon logo ? Là-bas ? Il est conçu pour le glisser-déposer à l'intérieur. Et voilà. Maintenant, nous avons notre logo. Donc, encore une fois, si vous souhaitez faire glisser l'une de ces images, disons celle-ci, il vous suffit de cliquer dessus, de la faire glisser et de la déposer à l'intérieur. Et vous pouvez voir qu'il va se placer, sera placé juste là. C'étaient donc nos images. Et enfin, nous avons quelques paramètres ici. Vous pouvez donc voir les sauvegardes générales. Le flux de travail du commerce électronique crée automatiquement des sauvegardes pour vous. Et il va y sauvegarder tous vos éléments. Mais en gros, c'est tout à partir de là. Nous avons donc ici des audits, ici nous avons une recherche personnalisée, alors trouvez n'importe quoi. Nous avons ici des didacticiels vidéo que vous pouvez y trouver. Et voici la section d'aide. Donc, si je ferme tout cela et que je laisse mon navigateur ouvert. Ce que j'ai ici, c'est l'aperçu, donc l'aperçu inversé. Et voici à quoi ressemblera votre site Web en direct. Et vous pouvez cliquer sur toutes sortes de points d'arrêt différents pour voir à quoi ressemblera votre site Web sur ces points d'arrêt. De plus, ce que vous pouvez faire, c'est dire que je suis sur une tablette, que vous avez ce pseudo. Ainsi, lorsque vous cliquez et faites glisser le pointeur , il passe d'une taille à l'autre. Vous pouvez simplement regarder ce qui se passe ici , en haut, pendant que je traîne. Il va donc passer d'une taille à l'autre. Ou comme je l'ai mentionné, vous pouvez cliquer ici et saisir quelque chose comme 2000 pixels juste pour voir à quoi ressemblera le site Web en 2000, ou disons 4 000 pixels. Et vous pouvez le voir juste là. Il va donc simplement imiter cela et vous le montrer. Donc, si je reviens à ici, ce que nous allons faire ensuite, c'est me laisser vous guider à travers ce panneau et nous allons simplement arrêter la vidéo là parce que je ne veux pas qu'elle soit trop confuse pour toi et trop longtemps. Donc, cette vidéo, cette section traite des styles. Lorsque je passe la souris ici, vous pouvez voir que c'est le panneau de style. Il s'agit du panneau Paramètres. Ce sont les gestionnaires de style. Donc, au fur et à mesure que vous ajouterez vos cours, nous y reviendrons dans une seconde. Toutes ces classes seront répertoriées ici. Et enfin, voici votre section d'animation. Nous aborderons toutes ces sections tout au long du cours, mais surtout cette section de style. Donc, en gros, la façon dont vous pouvez voir Webflow se situe de ce côté, c'est-à-dire tout ce qui concerne le HTML, donc tout ce qui concerne la structure, façon dont tout va être déposé sur la page. Et ici à droite se trouve tout ce qui est CSS. Alors, à quoi tout va ressembler et comment cela va être stylisé. Donc. Ce que je peux faire dans ce cas, par exemple, nous débarrasser de tous ces éléments. Il suffit donc de cliquer sur Supprimer sur chacun d'entre eux. Et travaillons simplement sur notre rubrique. Nous allons lui donner un cours un peu plus tard. Dans la prochaine vidéo, nous allons donc en parler. Mais ici, vous pouvez modifier la façon dont il est affiché. Disons que je souhaite placer la marge supérieure à 100 pixels. Je peux cliquer ici, épingler 100 pixels, et ça va le positionner ici. Puis en bas, même taille. Ensuite, pour la taille, disons que je souhaite créer un autre bloc div en dessous. Appuyez donc sur Control K div, juste pour que vous puissiez voir ce que je fais. Et peut-être que je peux le positionner pour qu'il s'agisse d'un jumelage. Je ne sais pas, 60 pixels peut-être. Et puis utilise la couleur juste ici pour quelque chose comme ça. Et voilà. Et pour la taille, donnons-lui une largeur. Donnons-lui une hauteur de 200 pixels, juste pour que vous puissiez voir ce que je fais. Et en fait, poussons-le encore plus jusqu'à ce que j'en connaisse la hauteur, la largeur, disons 500. Nous avons donc ici une boîte qui est le bloc div, 500 de largeur 200 pixels. Et si je commence à l'étendre comme si je maintenais Shift et ma flèche gauche enfoncée, vous pouvez voir dans quelle mesure il s'étend. Si j'ajoute la marge, qui est l'espace à l'extérieur de votre objet, vers la gauche, vous pouvez voir à quoi il ressemble. Ou sur la droite, ce sera exactement le même et le rembourrage correspond à l'espacement à l'intérieur de votre objet. Donc, si je vais de l'avant dans ce blog div en tapant Control K et que je tape quelque chose comme textblock, mettez-le dedans. Vous pouvez voir que le texte est maintenant à l'intérieur. Donc, si je tape quelque chose comme ça, c'est notre bouton, vous pouvez voir que le texte sera là. Vous pouvez imaginer que c'est peut-être notre bouton. La hauteur est donc, disons, de 100 pixels et la largeur, disons de 50. Et voilà. Vous pouvez donc maintenant voir comment il fait circuler le texte. Mais il existe également un autre moyen pour moi de résoudre ce problème, qui s'appelle Flexbox. Donc, lorsque je clique ici , nous aborderons longuement Flexbox tout au long de ce cours. Vous pouvez le faire basculer horizontalement et verticalement. Et ici, vous pouvez positionner la manière dont vos éléments sont placés sur la page afin de voir à quel point c'est simple. Et si je l'ajuste un peu, vous pouvez voir que nous avons maintenant une sorte de bouton à l'intérieur. Il s'agit donc du bloc d'affichage, flex d'affichage, de la grille d' affichage, de l'affichage, du bloc en ligne. Il s'agit de la ligne intégrée par défaut pour le texte, et elle est entièrement réservée aux caractères masqués. Donc, si je clique dessus, cela masquera tous les éléments qui se trouvent à l'intérieur de ce bloc div, y compris le bloc lui-même. L'espacement, comme je l'ai déjà expliqué, la taille, je vais déjà l'expliquer. Il s'agit donc de votre poids, de votre taille, de votre largeur minimale et de votre taille minimale. Et vous le ferez, par exemple pour les écrans de petite taille, disons que pour les très petits écrans mobiles, je ne veux pas que mes éléments soient plus petits que cette taille en largeur ou en hauteur. La largeur maximale ou la hauteur maximale font exactement le contraire. Donc, par exemple , ne dépassez pas 1 300 pixels de largeur, par exemple, pas 1 300 pixels de largeur, par exemple, le débordement affichera des éléments à l'intérieur. Nous y reviendrons un peu plus tard. Nous avons les options de remplissage , idéales pour les images. Je vais également vous le montrer plus tard. Nous avons le positionnement, donc nous avons un positionnement statique, relatif, absolu, fixe et collant. Nous aborderons la plupart d' entre eux dans ce cours. Ensuite, nous avons la topographie qui couvrira cela en grande partie. Dans la leçon suivante. Nous avons les connaissances nécessaires pour toutes sortes d'éléments différents. Ensuite, nous avons le rayon de la bordure, nous avons les bordures et enfin, nous avons les effets et les animations juste en bas. C'est là que je vais vraiment arrêter cette vidéo. Parce que si je donne beaucoup plus de détails dans cette vidéo, la vidéo durera bien plus de 20 minutes. Ça y est en ce moment. Passons donc à la vidéo suivante et ne vous en faites pas. Si cela semble trop confus pour le moment, ce sera beaucoup plus clair une fois que nous commencerons à travailler dans Webflow. N'oubliez pas que le côté gauche est le code HTML, qui est une structure. côté droit se trouve le CMS et les animations peuvent être en js, qui est un script jaune. Nous allons donc aborder tout ce qui se passe dans ce cours. Ne vous laissez pas intimider si vous ne savez pas ce qui se passe. Si vous êtes un peu perplexe, ce sera très simple, je vous le promets. Et je te verrai dans la prochaine vidéo. 167. Guide de style: Guide de style. Nous allons maintenant l' intégrer à Workflow et créer notre guide de style. Nous voici donc sur Webflow et je vais essayer de le rendre le plus rapide possible, tout en essayant de vous expliquer le plus en détail possible. Donc, l'une des premières choses que je vais faire est d'ajouter mes couleurs. Donc, ce que je vais faire, c'est sélectionner le corps, qui est le body tag. Et encore une fois, si nous vous passons à Adobe XD, comme ça. Nous avons donc la page, imaginez-la comme si c'était notre port dans ce cas, mais ce n'est qu'une page. Ainsi, tout ce qui se trouve à l'intérieur de cette page se trouve dans le body tag. Il est donc très important de le comprendre. Et la structure ressemble à ceci. Donc, si je clique ici, nous avons le système de navigation, nous avons le héros, qui nous sommes, et ainsi de suite. Ce sont toutes des sections. À l'intérieur des sections, vous pouvez voir des conteneurs. Vous pouvez donc imaginer que cela s' étend à toutes sortes de choses, appelons-le ainsi. Il s'étend complètement du bord gauche au bord droit. C'est une section. Le conteneur est en fait celui-ci, dont la largeur est de 1 200 pixels, comme nous l'avons expliqué. Et puis à l'intérieur de ce conteneur nous avons différents blocs div, qui sont encore une fois des conteneurs différents contenant ces informations. Cela semble probablement trop confus pour le moment, mais ne vous inquiétez pas. Je te promets que ce ne sera pas le cas. Donc, encore une fois, nous avons ici section qui va du bord gauche au bord droit. Nous avons un conteneur qui contient du contenu dont la largeur ne doit pas dépasser 1 200 pixels. Et puis nous avons des conteneurs supplémentaires, également appelés blocs div. C'est l'un d'entre eux, par exemple, qui contient le contenu et vous pouvez le voir ici. Donc du contenu sur les héros, et celui-ci en est un autre pour l'image des héros car il contient trois images différentes. Allons donc dans Webflow et commençons à ajouter nos couleurs, comme je l'ai mentionné. Donc, si je passe ici, faites défiler l'écran un peu vers le bas, ce côté, ce que nous avons, ce sont les couleurs. Donc, ce que je peux faire, c'est là où il est écrit « typographie », je peux commencer à ajouter mes couleurs, ou simplement «  Voyons voir les arrière-plans ». Je peux même y aller. Et ce que je veux faire, c'est te faire passer à XD. Et tout d'abord, je veux ajouter cette couleur de carrosserie. Alors laissez-moi le copier, cliquez avec le bouton droit de la souris et copiez-le. Passez à Webflow. Sélectionnez ce texte ici. Appuyez sur V pour le coller. Et il va coller cette couleur de carrosserie pour l'ajouter Laissez-moi passer ici pour que vous puissiez la voir un peu mieux ou juste ici, dans la matière. J'ai donc collé le codage des effets. Je vais cliquer ici et je vais taper la couleur de la carrosserie comme ça. Appuyez sur Entrée pour ajouter cette couleur de carrosserie. Ensuite, nous avons la couleur blanche. Je vais donc passer au blanc. Cliquez ici et saisissez quelque chose comme du blanc pur , car c'est ce que nous avions dans XD. Ensuite, si je passe à XD, nous avons ensuite du gris clair. Cliquez donc avec le bouton droit de la souris, copiez, accédez à Webflow et sélectionnez simplement Coller, Enter. Cliquez ici, tapez en gris clair. Et je n'utilise pas de tirets, mais tu peux. Donc, c'est vraiment à vous de décider comment vous allez l'utiliser. Ensuite, nous avons le gris foncé. Je vais donc entrer ici. Cliquez sur gris foncé. Vous pouvez voir que Webflow vous donne quelques indications quant au type de noms que vous souhaitez utiliser. Copiez et collez ma couleur n. Et pour celui-ci, je veux lui donner ce nom. Donc H trois paragraphes. Donc H trois paragraphes. Je sais donc lequel il s' agit et où l'utiliser. Ensuite, nous avons celui-ci. V, cliquez sur la couleur Plus foncée pour ajouter de la couleur. Et puis nous avons notre bleu principal. Revenez ici. Ajoutez-le ici. Donc, le bleu principal. Et enfin, nous avons la couleur de notre couverture. Alors copiez-le, collez-le, cliquez ici et appelez-le survoler la couleur. On y va. Maintenant que vous avez toutes nos couleurs, appliquons ces couleurs pour le corps. Ainsi, quand je survole, vous pouvez voir à quoi ils ressemblent. corps est sélectionné dans le navigateur appliquer la couleur de la carrosserie et pour appliquer la couleur de la carrosserie et il contiendra la couleur de la carrosserie, qui sera exactement la même que celle de nos modèles ici. Passons maintenant à la typographie. Et c'est pourquoi je l'ai créé. Donc, si je zoome un peu pour que vous puissiez le voir un peu mieux, quelque chose comme ça. donc tout d'abord faut donc tout d'abord intégrer les polices Poppins. Donc, pour que nous puissions le faire, laissez-moi me cacher. Pour cette partie, vous pouvez aller ici, cliquer et accéder aux paramètres du projet. Sur le site Web actuel exclusif à Spider, vous avez toutes sortes d'options différentes. Donc, pour le général, vous pouvez saisir toutes sortes de choses différentes ici. Et pour l'icône Fab, je vous recommande vivement de télécharger ce clip Web destiné aux appareils iPhone lorsqu'ils sont enregistrés dans une sorte de favori. Donc, cela va juste montrer qu'il suffit de télécharger image de 56 x 256 pixels de votre logo, peut-être cinq, je peux faire de même. Donc 32 sur 32, il suffit de télécharger ici. Il s'agit du fuseau horaire dans lequel vous vous trouvez, marque Webflow, vue d'ensemble et de toutes sortes de choses différentes. Donc, ce qui m'intéresse ici, c'est l'hébergement. Vous pouvez ajouter ces plans d'hébergement. Comme nous en avons parlé, l'éditeur est celui qui est capable de l'ajouter. Les forfaits et la facturation vous permettent ajouter les plans de site dont nous avons parlé. Le référencement est quelque chose que nous aborderons un peu plus tard. Donc, les balises de certification du site Google, etc. Vous pouvez donc peut-être ajouter un plan de site personnalisé si vous l'avez ici. Et vous pouvez désactiver l'indexation des sous-domaines Webflow. Maintenant, la raison pour laquelle c'est important, c'est que si vous souhaitez lancer ce site Web en avant-première, il ne l'indexera pas. Google ne sera donc pas en mesure de le trouver tant que vous ne l' autoriserez pas à le trouver. Cela empêchera vos utilisateurs de visiter le site Web avant qu'il ne soit prêt. C'est pourquoi c'est là. Ensuite, nous avons les formulaires. Donc, ici, dans un formulaire, vous pouvez ajouter un nom étranger, envoyer des soumissions à l' adresse e-mail de votre choix. Vos soumissions à traiter, la ligne d' objet, la réponse à l'adresse modèles d' e-mails afin que vous puissiez y mettre tout cela, récupérer la validation pour empêcher l'intégration des formulaires formés par les spammeurs. Vous pouvez ainsi créer différentes intégrations de formulaires à partir de différents fournisseurs en ligne. Nous avons des sauvegardes, des intégrations. C'est donc ce que j'ai mentionné pour Google Analytics, par exemple Google Optimize pour Google Maps. La clé API est requise pour utiliser Google Maps dans les sites Web Webflow, ce que nous allons créer un peu plus tard. Vous pouvez donc créer une clé API JavaScript de Google Maps et la coller ici. Et je consulterai notre guide des cartes un peu plus tard. Quand nous y arriverons, un pixel Facebook pour suivre l'accès à l'API, vous pourrez générer le jeton API et le connecter à toutes sortes de différents fournisseurs externes qui vont ensuite communiquer via cette API via Webflow. Crochets Web, vous pouvez attacher vos crochets Web, ils se trouvent à l'extérieur, j' autorise les applications. Enfin, le code personnalisé est que ce n'est pas là que vous allez exporter votre code personnalisé. Je vais partager cela dans une seconde. Mais ici, lorsque je clique sur Publier, vous pouvez voir ce dont nous avons parlé précédemment. Il va donc être publié gratuitement sur ce domaine de stage. Vous pouvez également accéder au domaine personnalisé , puis connecter le domaine que vous avez acheté. Le code personnalisé est ici. Si vous souhaitez ajouter des fonctionnalités personnalisées, exemple, je ne sais pas, des fenêtres contextuelles supplémentaires, peut-être, ou une fonction de discussion différente qui parlera de discussions externes, etc. comme ça. C'est donc ce que nous allons importer ici. Vous pouvez donc voir ici quelque chose qui s'appelle Head Code. tête est l'élément qui se trouve au-dessus du corps. Il se trouve sur la même page et le corps et la tête de chaque page de votre site Web se trouvent juste au-dessus. Le contenu ne passe pas dans la tête, mais le code entre dans la tête. Le contenu se trouve à l'intérieur du body tag. Et puis nous avons le code du pied de page, qui, une fois de plus, se trouve tout dessous et à l'intérieur, il peut se trouver, vous pouvez le voir dans le code avant le corps du texte ou avant la fin du body tag, et il passe au en bas de page. Parfois, vous allez ajouter différents styles dans le flux. Parfois, vous allez ajouter des styles différents et plus encore, en fonction de ce que vous essayez d' intégrer à votre site Web. Ce qui nous intéresse ici, ce sont les polices. Donc, si je clique sur les polices, nous pouvons facilement intégrer les polices Google ici. Si votre client possède des polices personnalisées, vous pouvez simplement les décompresser et les télécharger ici. Nous allons leur montrer polices Adobe sont légèrement différentes, car encore une fois, vous avez votre jeton d'API et il vous suffit de le coller ici pour enregistrer le jeton. Et il va extraire cette police des polices Adobe et l' afficher sur Webflow. Nous nous intéressons aux polices Google parce que je voulais simplifier les choses et nous avons besoin de Poppins. Donc si je vais à Poppins, on y va. Ce dont j'ai besoin, c'est régulier. J'ai besoin de cette audace, disons de plusieurs centaines, ce qui est audacieux. C'est normal et moyen, par exemple, je peux simplement cliquer sur Ajouter une police. C'est ajouté, et je peux cliquer ici pour revenir à mon designer, qui va le charger ici. Et maintenant, nous pouvons commencer à ajouter nos polices. Pour ce faire, je vais tout d'abord créer les sections que j'ai mentionnées. Donc, si je vous ramène à XD une fois de plus, nous allons créer cette section pleine largeur. Ensuite, nous allons créer un conteneur de 1 200 pixels. Appuyons donc sur la touche Ctrl et saisissons, disons section. Ici, je vais ajouter une classe de section. Appuyez sur Entrée. Et cette classe de section sera la même pour toutes les sections de notre site Web. Et il va contenir toutes sortes d' éléments différents que nous allons mettre à l'intérieur. Je ne vais donc pas aborder ces éléments du tout. Ce que je peux faire, c'est peut-être l'ajouter en pleine largeur. Donc une largeur maximale de, disons, 100 %. Et vous pouvez simplement saisir le pourcentage, appuyer sur Entrée. Et Webflow est intelligent comme ça, car il ne fera que remplacer le pourcentage de largeur des pixels. Et ce que vous pouvez également faire, c'est cliquer ici et l'ajuster. Et ce que nous allons faire maintenant, c'est que maintenant que nous sommes dans cette section, qui est la classe de section, je vais appuyer sur Control K et mettre un div. Et vous pouvez voir diblock apparaître pour ce journal div, qui se trouve ici. Je vais lui attribuer une classe de contenant. Alors Kuan, Dana, appuyez sur Entrée. Et nous avons ici la classe de conteneur. Ce que je vais faire tout d' abord, c'est cliquer ici pour l'espacement, qui va centrer l'élément horizontalement. Et ça va juste le placer au centre. Et je vais lui donner une largeur maximale de, disons, 1 200 pixels. Comme ça. Et vous pouvez voir que c'est au centre de ma page parce que j'ai cliqué juste là. Donc c'est, c'est mon contenant. Et pour mon contenant , je vais simplement inclure du rembourrage , qui est l'élément à l'intérieur. Et cela me permettra de créer design réactif plus facilement plus tard. Je vais donc cliquer ici. Vous pouvez voir que nous avons déjà quelques préréglages. Je vais en mettre 20 de ce côté et 20 de ce côté. Et voilà. Et maintenant, lorsque nous commencerons à insérer du contenu, il y aura un rembourrage de 20 pixels sur les côtés gauche et droit, que vous verrez dans les prochaines leçons une fois que nous aurons commencé à concevoir côté. Mais pour l'instant, cela nous donne simplement cette marge de manœuvre lorsque nous optons pour des tailles plus petites. Et cela nous permettra un design réactif beaucoup plus simple par la suite. Donc, comme vous vous en souvenez, à l'intérieur du contenant , notre contenu. Je vais donc m'en débarrasser pour l'instant car nous allons cliquer sur le corps. Nous contrôlons K et saisissons en-tête H et choisissons simplement le titre 1 tel quel. Et je vais cliquer ici. Et vous pouvez voir que nous avons cette balise HTML qui contient tous les titres H1. Nous allons sélectionner cela car désormais, où que vous ayez vos paramètres H1, traduits sur l' ensemble de votre site Web, quelle que soit la page sur laquelle vous vous trouvez, c'est ce que nous vouloir. Donc, si je fais défiler la page un peu vers le bas pour que vous puissiez voir ce que je sélectionne. Au lieu de zones, je vais sélectionner mes Poppins, qui se trouvent ici. Et le poids va être audacieux. Revenons à XD et voyons ce que nous avons créé. Alors on y va. Maintenant, nous avons, voyons voir, H1 Poppins, 64 boulons, et 86 est l'interligne. Donc si j'y retourne, passons au 64 volts, 86 volts est la couleur. Et enfin, c'est la couleur que nous allons choisir. C'est vraiment sombre ici. Tellement sombre, couleur. On y va. Et maintenant, notre police est prête et elle va être alignée à gauche, ce qui est bien. Ce sera donc notre H1. Donc si je vais taper quelque chose comme le premier titre, juste pour que nous sachions de quoi il s'agit. Et si je tape Ctrl K, h, réutilise le titre. Cette fois, nous allons choisir H2 et sélectionner toutes les rubriques H2 car nous avons changé cela pour toutes les rubriques H1. Et si je clique ici, vous pouvez voir que les valeurs proviennent de toutes les rubriques H1. Il extrait donc ce style de tous les en-têtes H1, qui sont des éléments HTML. Et ils sont identiques pour chaque page de notre site Web. Donc, encore une fois, il s' agit du H2 et il apparaît dans toutes les rubriques H2 ici. Donc, au lieu de zone, changeons-la en Poppins ici. Ça va être audacieux. Et voyons voir, pour la taille, nous avons 32 boulons, 56 interlignes. Laisse-moi juste vérifier la couleur à un, deux ou quatre. Et si je passe juste ici jusqu' à un, deux ou quatre, c'est la même couleur. Alors, passez à 56. Donc, ici, 22 ans, je cache que cette couleur 56 sera plus foncée. On y va. On y va. Notre H2 est prêt et cela affecte toutes les rubriques H2. Maintenant, si j'appuie sur Control K, tapez le titre H et les en-têtes H3 et H4, H3. Nous allons à nouveau choisir Poppins. Et revenons à XD. Donc c'est Bolt aussi, mais 24 ans. Et est-ce la même couleur maintenant ? C'est maintenant la couleur des paragraphes de l'âge de trois ans car c'est le H3. Alors changeons, ou nous sommes désolés. Donc, 24,40 est l'interligne. Donc 24, ça va faire 40. Et cette couleur sera cette couleur pour H3 et le paragraphe. On y va. Nous affectons donc toutes les rubriques h3. Et voyons ce que nous avons à faire ensuite. Nous avons le bloc de texte. Alors faisons-le. Et je vais taper le bloc de texte Control K. Mais maintenant, regardez ce qui se passe lorsque je clique ici. Nous n'avons pas cette option de bloc de texte, nous devrons donc créer notre propre zone de texte. Il suffit donc de taper un bloc de texte, mon peintre, et cela affectera toutes les zones de texte. Nous allons donc sélectionner Poppins. On y va. poids est normal. Et voyons ce que nous avons pour la couleur. Nous avons ce 70, 70, qui est gris foncé, je crois. Et il y en a 20 irréguliers et 40 pour l'interligne. Allons-y, c' est du gris foncé. Nous y voilà, et 20h40. Et on y va. Nous avons maintenant notre taille de police. Nous en avons donc 24 ici, et nous en avons 20, ce qui, je pense, sera peut-être un peu trop sur le Web. Je ne sais pas Allons-y, gardons-le là. Nous avons donc nos blocs de texte, et maintenant nous allons sélectionner notre paragraphe, qui est un 16, 26 normal , et il a cette couleur h3. Donc 16, 26 réguliers. Créons donc ce paragraphe K de contrôle. Et je vais sélectionner tous les paragraphes ici, Poppins, 16, 26 ans. Et pour la couleur, nous allons utiliser un paragraphe de trois ans. On y va. Charmant. Donnons-lui simplement un graphique textuel. On y va. Ce sera notre H2. Ce sera RH trois, ce sera notre bloc de texte. Enfin, ce dont nous avons besoin pour notre paragraphe, c'est tous les styles ont été complétés pour les anciennes balises de paragraphe, vous pouvez le voir ici. Enfin, ce dont nous avons besoin, c'est que tous les textes, alors appuyez simplement sur Ctrl K, saisissent un bloc de texte. Et voilà. À l'intérieur de la zone de texte, je vais l'appeler. Voyons voir. Des textes ainsi étiquetés, qui seront Poppins 12.20. Appelons donc cela le texte de l'étiquette par là. Et comme je l'ai dit, Poppins, 12 ou 20 ans, ce sera comme je l'ai dit, Poppins, 12 ou 20 ans, normal pour la taille. Vous pouvez donc voir que c'est normal, moyen et gras que nous utilisons pour la couleur. Voyons voir, voyons voir. Modifiez-le en passant de D à e30, qui, si je survole, est de cette couleur. Donc H trois paragraphes est la couleur qu'il utilise. Cliquez donc ici, trois paragraphes. On y va. Et maintenant, nous avons des textes étiquetés, que je vais écrire ici. Des textes étiquetés, et c'est parti. Nous avons donc maintenant tous nos éléments. N'oubliez pas que nous avons déjà inclus toutes nos images. Nous les avons donc simplement glissées et déposées à l'intérieur. Et maintenant, nous avons créé notre section, notre contenant, toute notre typographie, toutes nos couleurs. Nous sommes donc prêts à commencer et à créer ce site Web. De ce point de vue, nous n'en avons plus besoin. Je peux simplement revenir en arrière et appuyer sur Supprimer sur chacun d'entre eux. Et tu te souviens de ce corps, nous avons déjà utilisé cette couleur de carrosserie à l'intérieur. Maintenant que nous sommes prêts, dans la vidéo suivante, nous allons aborder conception de ce site Web et je vais vous montrer comment recréer facilement ce que nous faisions dans Adobe XD maintenant dans Webflow. Alors je t'y verrai. 168. Construction de barreaux: Très bien, enfin, commençons par la création de notre site Web Webflow. Et commençons dès maintenant. Nous voici donc dans Webflow et ce que je vais d' abord faire, c'est sélectionner mon corps. Cliquez ici. Et ce que nous avons ici, ce sont toutes sortes de ces différents éléments que nous pouvons inclure. Mais encore une fois, comme je l'ai mentionné, je vais utiliser des raccourcis pour me déplacer plus rapidement. Et je vais simplement utiliser Control K une fois de plus et taper nav, ce qui m' affichera cette barre de navigation. Mais avant de mettre cette barre de navigation, je vais créer une section, donc une section Control K. Et en mettant une section à l'intérieur de cette section, je vais mettre une barre de navigation. Contrôlez donc la barre de navigation K. Et voilà. Je vais appeler cette barre de navigation barre de navigation. Alors donnez-lui un cours comme celui-ci. Et ici, nous pouvons avoir toutes sortes de paramètres différents, mais ce n'est pas le cas, cela ne nous intéresse pas vraiment. Ce qui nous intéresse, c'est ce conteneur dans lequel se trouvent toutes ces informations, car ce conteneur a une largeur d'environ 960. Nous allons donc résoudre ce problème en sélectionnant notre conteneur, car notre conteneur, si vous vous en souvenez, mesure 1 200 pour la largeur maximale. Je vais donc appuyer sur Control K une fois de plus en tapant div et mettre mon div à l'intérieur. Comme ça. Je vais appeler cette barre de navigation div, quelque chose comme ça, ou navigation ou appelons-la principale en haut, barre ou quelque chose comme ça, ou NAV. La déviation. Appelons-la, appelons-la ainsi parce que nous n'aurons un seul moyen de comprendre la question de la dette. Je vais mettre tout cela n. Et au lieu de la navigation, renommons ce fichier en conteneur. Comme ça. En fait, c'est encore mieux. Supprimons la classe et recommençons à zéro. Donc conteneur, parce que nous avons déjà cette classe et que nous allons l'appeler navigation, barre de navigation comme ça. Nous avons donc maintenant une classe combinée. Et quelle est la classe combinée, c'est votre classe principale, qui dans ce cas est container. Et il sait déjà qu'il mesure 1 200 pixels de large car il s'agit d'un conteneur. Et nous avons déjà créé ce conteneur. Désolé, barre de navigation, car nous voulons savoir quelle est la valeur ajoutée ajoutée. Donc, dans ce cas, nous savons que le conteneur mesure, comme je l'ai dit, 1 200 pixels de largeur et qu'il a un appariement de 20. Comme vous pouvez le constater, notre barre de navigation est due au fait que c'est la navigation en haut. Ce que je vais faire ensuite, c'est le styliser un peu. Je vais donc sélectionner mon contenant. Et voilà, gardons simplement ce contenant pour le moment. Peut-être que nous pouvons le sortir complètement d' ici en écrivant. Maintenant, gardons-le. Gardons-le tel qu'ils l'ont créé. Parce que je pense que nous pouvons ajouter de la valeur comme ça ou je peux même ajouter, voyons voir, un conteneur de 1 200. Et notre conteneur est de 1 200, donc c'est très bien. J'ai donc simplement ajouté cette classe de conteneur à leur conteneur d'origine. Et à l'intérieur de ce conteneur, je viens de le créer sous forme de barre de navigation. C'est donc un peu confus, mais ne vous inquiétez pas. Tout sera expliqué dans un instant. Donc, ce que je vais faire ici, c'est là où il est écrit marque. Je peux peut-être ajouter cela, mais en fait, avant cela, commençons par notre contenant et changeons d'abord la couleur. Donc, si je fais défiler la page jusqu'au bas où il est écrit couleur, cela indique transparent. Je vais sélectionner la couleur de la carrosserie ici. Et je vais faire de même pour la barre de navigation. Vous pouvez donc voir que cette couleur gris clair DDD a été sélectionnée, mais je vais juste sélectionner la couleur de mon corps. Nous y voilà, et maintenant nous y sommes. Donc, tout d' abord, pour la marque, je vais simplement accéder à nos actifs ici, sélectionner mon logo, le glisser-déposer à l'intérieur. On y va. Et je vais simplement utiliser des textes alternatifs provenant de l'actif, qui est le logo. Ou je peux appuyer sur une description personnalisée et, par exemple, sur un logo Spotter. Et voilà. Et je vais juste le placer là. Maintenant, je vais sélectionner ce lien de navigation. En fait, nous devons d'abord styliser ces liens de navigation. Donnons-lui donc une classe de lien de navigation comme celle-ci. Et en termes de style, ce que nous pouvons faire, c'est si je reviens à mon design ici, si je le sélectionne et que je saute ici, vous pouvez voir que nous avons le style du bloc de texte, donc 20 irrégulier et 40. Nous allons donc y appliquer ces paramètres. Passons donc à Poppins, où nous sommes. Et puis nous passerons à 2040. sans aucune décoration ici. Donc, sans aucun lien. Et je vais mettre cette couleur, qui est celle-ci, je crois. Oui, tellement gris foncé, c'est notre couleur pour le lien. Et comme nous avons la classe Nav Link, je peux les sélectionner pour m'en débarrasser. Contrôle C, contrôle V, contrôle V. J'en ai donc maintenant trois. Donc si nous y retournons, nous aurons des voitures seules et nous contacterons. Cela va donc dire voitures. Cela va dire prêts, et cela va dire, contactez-nous. On y va. Voyons maintenant le style, car nous en avons 20 de chaque côté pour ce contact. Je voulais rester à droite de la page. Donc, ce que je vais faire, c'est en ajouter une autre qui est une classe de combo pour la dernière fois que je vais me débarrasser de ce rembourrage sur le côté droit comme ça. Il va donc s' y tenir ici. Créons donc maintenant le style. Nous sommes donc ici sélectionnés par défaut. Passons donc à l'état de survol. Il suffit donc de cliquer sur cette flèche, sélectionner l'état de votre survol. Tout ce que nous avons à faire ici, c'est changer la couleur du gris foncé à la couleur du survol, comme ça. Et puis voici, passons état dépressif et insérons un état dépressif. Je veux choisir notre couleur bleue principale. On y va. Voilà à quel point il est facile de le créer. ne vous reste plus qu'à cliquer ici. Je vais passer en mode aperçu et passer la souris. Vous pouvez voir que nous avons tout de suite l'effet de survol . C'est pourquoi je l'ai mentionné dans la section design, ne vous inquiétez pas trop. Ne passez pas trop de temps avec vos éléments. Je pense que ça va très bien fonctionner. Enfin, nous allons sélectionner notre conteneur avec tous nos éléments et le transformer en une flexbox horizontale. Et disons comme ça, et sélectionnons notre logo. Ce sera simplement notre marque qui la positionnera ici et elle la placera ici. Et jouons avec certains paramètres. Donc, à l'intérieur du conteneur, sélectionnons notre menu de navigation. Et ici, nous avons l'alignement et l'ordre, et je peux cliquer juste là et sélectionner celui à perdre, ce qui le poussera ici. Sélectionnez ensuite mon conteneur et jouez peut-être avec ces paramètres comme celui-ci, par exemple et si vous passez la souris, vous pouvez voir à quoi cela sert. C'est pour la fin et c'est l'espace entre les deux afin de répartir uniformément du début à la fin. Maintenant, lorsque je clique sur l'aperçu, vous pouvez voir que mon logo est centré à côté de ces éléments. Et lorsque je passe la souris ici et que je clique, vous pouvez voir que ma navigation fonctionne très bien car nous avons ce rembourrage de 20 pixels de chaque côté. Vous pouvez donc voir à quoi cela ressemble. Et maintenant, lorsque je clique ici, vous pouvez voir à quoi ressemblent mes liens ici, positionnés directement, afin que tout se passe bien et que nous puissions encore ajuster la dette. Donc, quand j'irai ici, je reviendrai en arrière, et je pourrai peut-être sélectionner l'ensemble de mon composant. Je pourrais peut-être passer au style et vous pourrez voir comment fonctionne l' ouverture dans le menu déroulant. Et ça marche, ça marche. Cela fonctionne donc pour les tablettes, cela fonctionne pour le paysage téléphonique et cela fonctionne pour le paysage mobile. Donc, si je dis afficher, par exemple l'intérieur de la tablette, je peux maintenant commencer à le styliser. Donc, si je clique ici, que puis-je faire pour mon logo ? Nous allons donc sélectionner celui-ci. Et à l'intérieur de l'arrière-plan, vous pouvez voir que cet arrière-plan est sélectionné. Je peux peut-être sélectionner ce fond plus sombre. Je pense que cela va fonctionner. Peut-être un peu mieux, je pense que non. Nous pouvons donc voir que cela est sélectionné pour l'arrière-plan. Passons donc à l'icône. La couleur est transparente dans ce cas, donc je ne sais pas d'où elle tire le jeu de style. Voyons donc ce que nous pouvons faire ici. Oui, il s'agit donc de prendre ce style à partir de là. Mais quand je le mets ici, c'est parti. Il s'agit donc simplement de prendre le style à partir de là. Donc, quand je le sélectionne à partir d'ici, je ne sais pas pourquoi il ne change pas. On y va. Donc, finalement, cela s'applique. Je vais donc sélectionner cet âge de trois paragraphes, peut-être plus, peut-être même cette couleur plus foncée. Je ne sais pas Mais gardez-le simplement gris clair tel quel, puis allez à l'intérieur de mon icône et changez couleur de mon icône pour cette couleur peut-être. Mais pour une raison ou une autre , c'est devenu ça. Donc, ce que nous pouvons faire, c'est plus tard, peut-être changer l'icône elle-même car elle est entourée d'une boîte. Vous pouvez voir la boîte autour de l'icône. Revenons donc au transparent et peut-être pourrons-nous sélectionner cette case. Peut-être que nous pouvons appliquer quelque chose différent, comme peut-être décoloré. Et voilà. Et pour ce qui est des liens de navigation, voyons la transition des couleurs de navigation. Voyons où nous en sommes. On y va. Alors sélectionnons simplement celui-ci. Et appliquez-le partout. Et à cause de ça, oui, alors on y va. Maintenant, nous avons les trois comme ça. Je pense que c'est bon. Et c'est pour le survol. Ce que nous pouvons faire, c'est passer au principal. Vous pouvez donc voir que cela contient un lien de navigation. Maintenant, nous allons encrer et celui-ci était le dernier. Alors maintenant, Lincoln moins. Vous pouvez donc l'ajouter à l'un ou l'autre d'entre eux. Et sélectionnons l'état du survol. Et à l'intérieur des styles, ce que nous pouvons faire, c'est voir le préchargement. Alors, où cela nous mène-t-il ? Je ne pense pas que nous puissions le faire, nous devrions vraiment sélectionner cela. Tu vois, je pense que c'est bien. C'est très bien, car vous ne serez pas en mesure de couvrir toute façon lorsque vous commencerez par votre design. Donc je pense que c'est bien, ça a l'air bien. Ça a l'air bien aussi. Nous y reviendrons un peu plus tard, mais je pense que pour l' instant, c'est bien. Jusqu'à ce que nous remplacions l'icône. En fait, ce que nous pouvons faire, c'est peut-être passer rapidement à X d. Alors allons-y. Ici, à l'intérieur de mes plugins. Ce que je peux faire pour les découvreurs d'icônes, s'il se charge, voyons ce qu'il fera. Revenez donc à Icone Scalp une fois de plus. Et ici, ce que je peux faire, c'est chercher de près. On y va. Nous avons celui-ci. Ou mieux encore, nous avons déjà cette icône de fermeture. Voyons ce que c'est quelque part par ici, je crois. Mais je ne l'ai pas ajouté en tant que composant. Et voilà. C'est pourquoi il n'y est pas. Donc, si je sélectionne celui-ci et que j'appuie sur Ctrl C, je peux le fermer. Je n'en ai pas besoin. Revenez ensuite à mon iconographie, êtes ici, appuyez sur Control V, par exemple puis choisissez, disons, couleur foncée du titre et fermez l'icône, appuyez sur Contrôle K. Et puis ce que je peux faire, c'est ouvrir mon iconographie et la dette et mets-la simplement dans mes icônes. Cela va se situer tout au bout d'ici. Et voilà. Maintenant, j'ai juste besoin de l'aligner au centre ou quelque chose comme ça. Appuyez sur Contrôle ou Commande E au format SVG au lieu d'images, je vais l'exporter sous forme d'icônes. Sélectionnez le dossier, cliquez sur Exporter au format SVG. C'est très bien Fermons ce contrôle et revenons à Webflow. Et je vais me diriger vers cet endroit. Et laisse-moi ouvrir à nouveau mon dossier. Nous avons donc des atouts d'observateur. Nous y allons en tant qu'icônes. Et je vais sélectionner C, fermer l'icône, la faire glisser et déposer à l'intérieur. On y va. Et maintenant, quand je passe à la tablette, je peux aller ici où il est écrit icône et sélectionner cette option. Et ajustons-le à la couleur de la carrosserie. On y va. Et sélectionnez mon icône. Et voyons voir, sélectionnez ces paramètres. Peut-être que je peux même le glisser à l'intérieur. Alors vérifions-la. Cliquez dessus et faites-le glisser vers l'intérieur. Voyons si cela fonctionne. Tu t'assois, oui. Donc, lorsque je sélectionne cette icône et que je clique sur Supprimer, elle va la mettre là. Donc, quand je clique ici, cliquez ici, et voilà. Tout y est. Et cliquons sur Afficher pour voir à quoi cela ressemble. Je pense que ça a l'air très bien. Et maintenant, nous pouvons même aller de l'avant et aller plus loin dans ce domaine. Donc, tout d'abord, je pense que nous n'avons plus besoin de cette couleur, gris clair, alors changeons-la en couleur de la carrosserie. On y va. Et tout cela peut être la couleur de la carrosserie si vous le souhaitez, mais je pense que le gris clair fonctionne très bien. Et restons-en là. Comme vous pouvez le constater, nous avons maintenant l'icône personnalisée. C'est donc à quel point c'est facile et c'est aussi beau. Et il fonctionnera parfaitement sur toutes les tailles différentes. Maintenant que nous avons créé notre barre de navigation, cela nous a pris pas mal de temps parce que je voulais expliquer, car nous allons la réutiliser tout au long de notre conception. Ce que nous allons faire maintenant, c'est en faire ce symbole. Pour créer un nouveau symbole, nous allons placer cette barre de navigation dans notre section. Je vais donc simplement sélectionner l'intégralité de ma barre de navigation. Parce que plus tard, nous allons créer une section. À l'intérieur de cette section, nous pouvons insérer la barre de navigation. Ou mieux encore, nous pouvons simplement le placer à l'extérieur. Donnons-lui un nom. Mais il a nommé une classe de barre de navigation. Comme ça. Allons supprimer la barre de navigation, la barre navigation principale supérieure. C'est ainsi que notre section sera appelée dans ce cas. Juste pour que nous puissions le voir sur la page portant ce nom. Comme vous pouvez le voir. Sélectionnez notre symbole, créez un nouveau symbole, et je vais l' appeler barre de navigation. Et créez un symbole. Et voilà. Maintenant, nous avons notre barre de navigation principale, et maintenant, où que nous soyons sur le site Web, nous pouvons procéder à la modification et nous pouvons simplement copier et la coller lorsque je passe à mes symboles Vous pouvez voir que maintenant avoir une instance de la barre de navigation. Si nous l'utilisons sur quatre pages, nous aurons quatre instances différentes et ainsi de suite. Donc, en gros, c'est ce que nous avons obtenu jusqu'à présent. Maintenant, dans la vidéo suivante, permettez-moi de fermer ceci pendant une seconde. Dans la vidéo suivante, nous allons passer à cette section et créer cette image avec une voiture . Ici, nous allons avoir un peu de rembourrage au-dessus de 100 pixels. Je te verrai donc dans la prochaine vidéo. 169. Section de héros: Très bien, alors continuons là où nous nous sommes arrêtés nous avons cette section sur les héros. Revenons donc au débordement. Et nous allons sélectionner notre corps, appuyer sur Ctrl K et taper S pour cette section. Je vais revenir ici, taper dans la section pour lui donner cette classe Control K, tapez div pour le bloc do, je vais l'appeler C pour le conteneur. On y va. Et maintenant, dans cette section, appelons-la, donnons-lui une classe de héros combinée. Et à l'intérieur de ce conteneur, nous pouvons peut-être le mettre dans différentes plongées. Je pense que cela peut être très bénéfique. Mais en fait, avant cela, ce que nous pouvons faire, c'est mettre dans un emballage. Le wrapper est en fait l'élément qui va, n'oubliez pas si nous revenons à XD ici. Nous devons donc l'emballer dans cet emballage. Donc, ce que je peux faire, c'est soit m'en servir comme contenant et appeler ça rappeur, soit créer un tout nouvel emballage. Je vais donc le faire au lieu d'utiliser container comme wrapper, je vais appuyer une fois de plus sur Control K en tapant div, et maintenant appeler celui-ci Hero Wrapper. Et voilà. Et tout le but ici est d' y intégrer notre contenu. Vous pouvez donc voir que le conteneur est là, Hero Wrapper est à l'intérieur. Nous avons toujours ce rembourrage de 20 pixels parce qu'il permet envelopper le héros et à l'intérieur du héros rappeur, ce que nous voulons vraiment, c'est ajouter des divs. Alors, appuyons sur Control K, tapez div. Ce bloc div sera, disons, du contenu de héros. Et voilà. Et vous pouvez le voir ici. Et je veux en sélectionner un autre, appuyer sur Ctrl K, taper div. Et ce bloc div peut être hero.eg. Pour l'image du héros, par exemple dans le contenu du héros, nous pouvons peut-être, tout d' abord, utiliser l'emballage du héros et le transformer en une boîte flexible. Et cela va mettre nos contenus côte à côte, comme vous pouvez le voir ici. Maintenant, à l'intérieur de ce conteneur, ce que nous pouvons faire, c'est, ou mieux encore dans cette section, ce que nous pouvons faire , disons, lui donner une marge maximale de 100 secondes. Nous avons donc cette section, héros. Et je vais utiliser une marge supérieure de 100, et cela va éloigner ce contenu de ma navigation. Revenons donc au héros, rappeur. Ce que je vais faire ici, c'est par exemple. peux peut-être, disons, distribuer comme ça. Cela va donc déplacer le contenu d'un côté à l'autre. Comme nous l'avons fait ici la navigation dans le contenu des héros. Ce que nous pouvons faire, c'est taper Control K dans l'en-tête H, et je vais choisir le H1. Utilisons simplement le texte. Donc H1 et utilisez toutes les rubriques H1. Et voilà. Je ne sais pas pourquoi je n'ai pas remarqué que quelque chose ne va pas. Donc si je vais à Poppins et 64 et que j'utilise ma couleur pour la couleur foncée. On y va. Maintenant, quand je colle mon texte, oui, quelque chose ne va pas. Je ne sais pas pourquoi cela n'a pas permis sauvegarder les cours que nous faisions auparavant. Donc, si je sélectionne mon âge d' un an, vous pouvez voir que c'est 86 ans. Donc, si je reviens en arrière et que je tape 86, c'est sûrement un bogue ou quelque chose comme ça. Donc, votre partenaire pour je vais appuyer sur Entrée pour des voitures exclusives. On y va. Maintenant que je suis endetté, je vais appuyer sur Ctrl K pour obtenir un texte, pas un lien texte. Désolé, je peux me débarrasser de cette touche de contrôle. Bloc de texte. Je vais tout de suite lui donner une classe de bloc de texte. Et voilà. Maintenant, c'est ce que nous avons. Je vais donc copier mon texte, le coller ici. Une histoire documentée a l'air ravissante. Et une dernière chose que je veux faire est d'ajouter un bouton. Appuyez donc sur le bouton Control K. On y va. Et je vais lui donner une classe de main btn, comme nous l'avons fait pour le, avec le design dans Adobe XD. Donc, tout de suite, je vais utiliser la police de caractères Poppins. Je crois que c'était 20. Alors laisse-moi vérifier mon design. Alors voyons voir. Voici Poppins 20 normal et 40, et ce sera de la couleur blanche. Voyons voir, 2040, Poppins, normal, c'est ce dont nous avons besoin. La couleur sera d'un blanc pur. Et voilà. Et maintenant, pour ce qui est du rembourrage, peut-être que nous pouvons en mettre quelque chose comme, je ne sais pas, peut-être 16. Je maintiens donc Alt et le bouton gauche de la souris enfoncé, 16. Ou vous pouvez cliquer ici pour dire que j'ai 16 ans. Cliquez ici, ils ont 16 ans si cela ne fonctionne pas pour vous. Et pour cela, je vais utiliser quelque chose comme 52. Je pense que ça va bien fonctionner. Et pour le rayon d'angle, vous pouvez faire défiler l' vers le bas et taper quelque chose comme huit. Je pense que cela fonctionnera très bien. Et voilà. Je ne vais m'occuper d' aucune taille pour le moment. Je pense que c'est bien pour la couleur nous allons sélectionner notre couleur principale. Et voici ce que nous allons faire, c'est taper, explorer notre cours et vous verrez que le bouton s'agrandit comme dans Adobe XD. Enfin, je vais sélectionner ici l'état du survol, la couleur. Je vais le remplacer par notre couleur. On y va. Retirez-le d'ici parce que je veux que mon état actuel soit le suivant. Et maintenant, si je clique sur Aperçu et que je survole, vous pouvez voir à quoi cela ressemble. Je trouve que ça a l'air génial. Ça a l'air bien. Et revenons-y maintenant. Et voyons le rappeur Hero. Ce que je peux faire, peut-être, oui, peut-être que je peux donner mon héros une largeur maximale de 1 200. Et voilà. Et à cause du contenu qui augmente, je pourrais peut-être y ajouter 20 points supplémentaires, disons quelque chose comme ça. Et maintenant, quand je clique ici, vous pouvez voir que maintenant ils sont réellement alignés, le sous-marin prend juste 20 points et lui en donne 20 autres à l'intérieur. Donc, quand je passe ici, vous pouvez voir que nous en avons 20 ici et 20 ici, ce qui correspond à notre logo supérieur. Ou ce que nous pouvons également faire, c'est revenir en arrière et simplement le supprimer à partir d'ici. Mais je pense que cela fonctionnera très bien pour cet exemple. Donc ici nous en avons 20, ici nous en avons 20 ou mieux, je peux m'en débarrasser ici. Donc zéro puis zéro ici parce que nous avons le conteneur qui contient le 20. Et je peux simplement ajuster la barre de navigation. Appuyez donc sur Entrée. Et dans la barre de navigation, ce que je peux faire, c'est que pour mon conteneur, j'en ai 20. Et quand je rentre ici, encore une fois, j'en ai 20. Donc, ce que je peux faire, c'est atteindre zéro. Ici, je peux atteindre zéro, et maintenant ces deux-là vont s'aligner. Ainsi, lorsque j'appuie une fois de plus sur l'aperçu, vous pouvez voir que le contenu est aligné et que nous avons toujours ces 20 rembourrages de chaque côté. Voilà à quel point il est facile de le réparer et ne vous inquiétez pas pour cela. Nous y reviendrons un peu plus tard avec Responsive. Revenons à notre design et travaillons avec la section du contenu des héros. Maintenant, ce que je peux faire ici pour contenu d'un héros, c'est peut-être leur donner un peu de rembourrage, de marge ou quelque chose comme ça, juste pour les différencier, un petit peu. Donc, dans ce cas, je peux saisir et sélectionner tous les titres H1. Et dans ce cas, ajoutons le héros H1 ici au lieu de la marge supérieure. Je vais m'en débarrasser. Et pour la marge inférieure, je vais en ajouter 32. Et voilà. Ici, pour mon bloc de texte, ce que je peux faire, c'est dire Textblock et ajouter une classe de héros combinée. Et à l'intérieur de cela, nous pouvons ajouter une marge inférieure de 32 g de produits laitiers. Et si je vous ramène à notre design, c'est exactement ce que nous avons. Donc, si je sélectionne mon ancienne clé, 32, puis 32 ici, cela fonctionne à merveille. Je pense que cela va très bien fonctionner pour nous. Mais une dernière chose que nous pourrions faire est sélectionner le contenu de ce héros et peut-être de lui donner une largeur maximale. Donc, dans ce cas, je vais venir ici et il est écrit largeur. Et oups, pas ce clic puis cette réinitialisation. Voyons la largeur. Je peux lui donner une largeur de 60 %. Je ne sais donc pas ce qui se passe. Donc 60 et tapez le pourcentage. Et voilà. Alors maintenant, il va plafonner la largeur à 60 %. Comme je l'ai mentionné, vous pouvez utiliser des pixels, pourcentages, vous pouvez utiliser toutes sortes de ces différentes valeurs ici même dans Webflow. Mais dans ce cas, nous allons utiliser 60. Et pour les images de nos héros, nous pouvons utiliser toute la largeur. Donc, ce que nous pouvons faire, c'est revenir à notre conception. Voyons où nous en sommes. Et si je sélectionne la boîte entière, vous pouvez voir que c'est 515 avec 450. Donc, si nous revenons ici, je pourrais peut-être opter pour quelque chose d'un peu différent, comme cinq contre deux et peut-être 388. Voilà, quelque chose comme ça. Et à l'intérieur de notre image de héros , comme c'est fait, voyons voir avec le bouton, je ne sais pas pourquoi cela me donne cette marge. Voyons donc le contenu des héros. Dispose-t-il d'une marge ? Non. Voici donc nos emballages ou peut-être pouvons-nous les placer au centre. On y va. Alors maintenant, le texte va être au centre avec notre image. Donc, avec notre image , je vais appuyer sur Control K pour taper dans l'image. Pour mon image, j' aimerais utiliser cette voiture. Et voilà. Maintenant, tapez Control K une fois de plus, tapez l'image, une fois de plus, choisissez l'image. Et voyons voir, nous aurons besoin ça et de Control K une fois de plus, IMG, nous aurons besoin d'une autre image. Et cette image va être ce cercle gris, qui est celui-ci. On y va. Et maintenant, vous pouvez voir qu'à cause du code HTML, il les a positionnés en dessous. Et je n'ai pas vraiment envie de faire ça. Donc, ce que je vais faire, c'est utiliser mon image de héros. Et maintenant, nous allons parler de positionnement. Donc, si je fais défiler l'écran un peu vers le bas, ici, nous avons la position statique au lieu de statique, qui est juste là. Je vais le mettre à un parent. Et relatif vous permet essentiellement de pointer votre code. Parce que n'oubliez pas que Webflow écrit le code en arrière-plan à chaque fois que nous commençons à concevoir Il pointe du code vers une tâche spécifique que vous souhaitez qu'il réalise. Donc, dans ce cas, je souhaite sélectionner cette image. Et au lieu de, voyons voir, au lieu d'une position statique, je vais la mettre en position absolue. Et vous pouvez voir que c'est une image de héros absolue. Ainsi, quelle que soit l'image du héros, elle sera absolue à cette position. Donc, dans ce cas, je vais placer mon image bleue le coin supérieur gauche , puis je pourrai ajuster le positionnement en une seconde. Mais je vais aussi sélectionner cette couleur grise et la sélectionner comme absolue. Mais dans ce cas, dans le coin inférieur droit, comme ceci. Maintenant, je peux le sélectionner et venir ici et peut-être que je peux ajuster ce cercle bleu. Voyons voir. Réinitialisons-le. Et peut-être que je peux l'ajuster ici et peut-être même entendre quelque chose comme ça. Et vous pouvez voir à quel point c'est simple à faire avec celui-ci. Je ne vais peut-être pas trop expérimenter ici. Et je pense que nous pouvons y mettre un terme. Et si vous souhaitez en ajuster la taille, ajustez-le simplement comme ceci, en tirant depuis le coin. Et puis je pourrais peut-être le déplacer légèrement vers le bas, le pousser légèrement. On y va. Nous avons terminé notre section. Gardez à l'esprit. Nous allons l'ajuster un peu plus tard en ce qui concerne le responsive. Et cette section est, voyons voir, à 100 mètres du haut. Il va donc respecter cela. Donc, quand je prévisualise, voici quoi ressemble notre site Web jusqu'à présent. Nous n'avons pas de lien ici car nous allons créer une page, la rédiger un peu plus tard. Même histoire avec ces pages. Une fois la page d'accueil terminée, nous allons déplacer et positionner ces pages. Et ce que j'ai oublié de te dire concerne mon positionnement. Je vais donc en parler dans une seconde. Mais surtout quand il s'agit de la tablette, tout va tomber en panne. Nous y reviendrons un peu plus tard, lorsque nous passerons à la réactivité. Mais pour l'instant, revenons ici. Et ce que je vais faire ici c'est avec cette image sélectionnée, ou mieux encore avec cette image sélectionnée avec cette image bleue. Et je vais trouver celui-ci qui est l'indice Z. Et en gros, vous avez votre indice x, qui se situe en haut et en bas. Vous avez votre indice y, qui se situe à gauche et à droite. Et puis dans l'autre sens, les index y, l'indice maximum supérieur et inférieur se situent à gauche et à droite. On y va. Et le z-index se trouve à l'avant et à l'arrière. Donc, en gros, revoyez les choses en 3D, parce que le HTML place les éléments les uns sur les autres sans se soucier de l'espacement. C'est pourquoi ils ont créé ce z-index. Donc, pour que nous puissions le signaler. Vous pouvez donc voir ici que cette image de Sean transparaît. Je vais donc sélectionner ce bleu, mettre un indice z de cinq peut-être. Et maintenant, je vais savoir que c'est clairement visible sur cette image de voiture. Et je vais faire de même pour celui-ci. Il suffit donc d'utiliser le numéro cinq, d'appuyer sur Entrée, et maintenant je saurai ce qui se passera. Ce sera devant cette image. Mais pour ce qui est de son positionnement, étant donné que l' image principale est relative et que ces deux images sont absolues, il va les positionner là. Alors voilà. C'est notre section consacrée aux héros. Et je vais l' appeler ici. Parce que si je sélectionne mon Hero Wrapper, vous pouvez voir que la flexbox est positionnée à l'horizontale. Si je passe à la verticale, c' est encore une fois génial, pour le responsive. Vous pouvez donc voir à quel point c'est simple à ajuster. Mais comme je l'ai dit, nous allons l'ajuster un peu plus tard et jouer avec les paramètres. Pour l'instant, nous allons simplement passer en revue ces sections. Et comme je l'ai dit, c' est le héros de notre section. Et dans la prochaine leçon, parlerons de la largeur de la section à propos de nous, et je vous verrai dans la vidéo suivante. 170. Qui sommes-nous: Très bien, créons maintenant la section qui nous sommes. Et je vais sélectionner le corps. Parce que si je crée cette section, cela va me donner une erreur car je ne peux pas mettre section à l'intérieur de cette section. Nous allons donc sélectionner le type de commande corporelle K en C pour cette section. Sélectionnez la section, et je vais lui donner une classe combinée de qui nous sommes. Disons. Au lieu de cette touche de contrôle div. Pour le div, je vais sélectionner une classe de conteneur combinée. On y va. Et maintenant, pour celui-ci, je vais lui donner une marge maximale de 200, disons. Et je vais le pousser à 200 à partir d'ici. Parce que si je vous ramène à Adobe XD, vous pouvez voir que lorsque je passe la souris, nous en avons 200 entre ces deux sections. Nous en avons 100 entre cela et la navigation. avons donc besoin maintenant. Donc, si je sélectionne cette section et ce conteneur, ce dont nous avons besoin, c'est de créer un autre div, donc Control K, tapez le bloc def. Et nous allons l'appeler, disons qui nous sommes. Rappeur, quelque chose comme ça dans ce contenant. Et pour ce rappeur, ce que je vais faire, c'est activer l'écran flexible parce que je vais créer Control K, mettre dans une image. Et cette image va être cette image. Voilà. Je vais ensuite sélectionner qui nous sommes, rappeur. Et à l'intérieur, créons une autre division de contenu. Et créons qui nous convient. Et à l'intérieur de ce contenu, ce que nous pouvons faire, c'est peut-être mettre, voyons voir, un titre H2 et taper H2. Voyons s'il est enregistré dans les paramètres. Donc tous les réglages H2. Je ne sais pas. Pourquoi ne le savais-je tout simplement pas. Donc je ne comprends pas. Donc H12 ici, ça ne l'a pas sauvegardé pour une quelconque raison. Donc, si je choisis Poppins ici, et que je choisis la couleur H2, qui est cette 132. Et voyons voir, je crois que nous sommes à 48 ans ou quelque chose comme ça, entre 30 et 56 ans. Restons les décès de 56 personnes. Toutes les rubriques H2. Voilà. Maintenant, nous l'avons. Laissez-moi donc sélectionner mon texte et opter pour des voitures exclusives à un observateur. On y va. Avant d'aller plus loin , je peux peut-être donner une marge à mon image ici afin de pouvoir les espacer uniformément. Encore mieux. Qui nous sommes, notre enveloppe, nous pouvons faire la même chose. Cliquez donc ici, cela va les positionner juste là. Et puis l'image, je peux en mettre 80, quelque chose comme ça. Et puis on n'en a même pas besoin. On peut peut-être le positionner sur la gauche. Voilà. Et maintenant, nous avons les 80 pixels. Si je survole mon image et que je passe la souris ici, vous pouvez voir que l' espacement des pixels AD pour la marge est indiqué ici. Maintenant, dans notre contenu, je vais appuyer sur Ctrl K et taper bloc de texte comme celui-ci, lui donner une classe de bloc de texte comme celle-ci. Et je vais sélectionner mon type de texte avec passion et dévouement, Control K. Et voyons si nous avons un style pour le paragraphe. Encore une fois, non, je ne sais pas pourquoi cela se produit. Sélectionnez donc Poppins ici. Prenons donc la taille 16, sélectionnez la couleur de H3 et du paragraphe. On y va. Et pour la hauteur, voyons où nous en sommes avec Adobe XD, elle est de 26. Alors venez ici au 26. On y va. Et je vais juste sélectionner mon contenu ici. Et je ne fais que sélectionner et coller. Vous pouvez coller depuis Adobe XD car j'ai deux écrans. Je copie et colle simplement le texte de nos designs. Donc, si je vous emmène à Adobe XD, vous y voilà. Il suffit donc de double-cliquer sur Control C revenir à Webflow et de le coller simplement. C'est donc en gros tout pour cette section. ne nous reste plus qu'à le styliser un peu. Donc, tout d'abord, qui nous appelons wrapper, parce que c'est la flexbox. Je vais cliquer ici, ce qui va centrer mon contenu. Et maintenant je vais donner un cours à cette image. Je vais donc le rebaptiser qui nous sommes. Img, genre, juste pour que nous sachions ce que c'est. Et voyons ce que nous pouvons faire. Alors peut-être que nous pouvons donner ceci. Il avait engagé T2. Je vais lui donner un cours séparé. Donnons-lui donc un Th2. Qui sommes nous. Eh bien, voyons voir. H2. Sombre, peut-être, parce que vous allez le réutiliser sur notre site Web. Et pour ce qui est de la marge, je vais opter pour zéro. Pour la marge inférieure, je vais choisir 24 peut-être. Ici, pour ce bloc de texte, je peux ajouter une classe combinée de qui nous sommes. Voilà. Et ici, je vais ajouter une autre marge inférieure de 24 et le paragraphe est bien. On y va. Cette section est maintenant terminée. Et vous pouvez voir à quel point c'était très simple. Donc, quand je clique ici, vous pouvez voir que nous avons maintenant cette section supérieure avec le bouton. Et maintenant, nous avons cette section inférieure. Et quand je suis passé à une tablette, évidemment, nous allons changer les deux et l'image ira en haut. Le texte va aller en bas. Donc ça va très bien fonctionner. Et voici cette somme. J'ai fait une erreur parce qu'au lieu de mettre l'icône du menu, j'ai mis l'icône des vêtements. Je vais donc régler ce problème. Revenons à ici. Revenons à notre barre de navigation en tapant Entrée, allons ici et sélectionnez notre icône. Laisse-moi passer à X d, et laisse-moi aller ici. Et voyons voir, sélectionnez notre menu de recherche. On y va. Menu et peut-être pouvons-nous utiliser celui-ci. Je pense que ça va être une bonne chose. Voilà. Choisissons de le coller ici. Et donnons-lui un nom au menu. Icône. Donnons-lui cette couleur, que vous utilisez une couleur plus foncée. On y va. Et je vais le mettre juste ici, au centre. Il va donc être beaucoup plus simple pour moi de le coller dans mes icônes et de le positionner complètement bas en dessous de l' icône de fermeture. On y va. Assurez-vous qu'il est au centre et appuyez sur Ctrl E pour l'exporter vers les ressources. On y va. Et maintenant, quand je passerai à mon dossier, laissez-moi simplement savoir où il se trouve. On y va. Et je vais accéder à mes icônes, puis sélectionner mon Webflow. Accédez à mes actifs. Trouvez cette icône de menu. On y va. Charmant. Et puis pour l'icône du menu, cliquons ici pour l'agrandir. Je ne sais donc pas pourquoi ça me montre comme ça, mais peu importe. Allons simplement à l' icône du menu ici et ajoutons-la ici. On y va. Et ce que je peux faire, c'est peut-être le rendre un peu plus grand. Donc largeur, on peut peut-être opter pour 16 16 ou 24 x 24 pixels. On y va. Ça a l'air charmant. Sélectionnez ceci, supprimez-le. Pour une raison quelconque. Vous pouvez voir qu'il ne s'en débarrasse pas tout de suite. C'est donc vraiment embêtant. Image du menu. Débarrasse-toi de ça. On y va. Et je vais donner cette icône Renommer au menu. On y va. Maintenant, ça a l'air génial. Maintenant, quand je reviens à mon instance, sélectionnez le bureau, cliquez sur Aperçu, puis sur tablette. Nous avons maintenant cette icône de menu. Donc, quand je clique, vous pouvez voir que tout cela fonctionne maintenant comme il se doit. Alors retournez-y et revenez en arrière. Maintenant, dans la section suivante, nous allons revenir sur XD pour vous montrer par où nous allons réellement commencer avec nos cartes. Donc, comme je l'ai dit, et je l'ai ici. Nous allons concevoir cette carte. Nous allons y mettre ces informations, puis nous ajouterons ces images un peu plus tard. Alors je t'y verrai. 171. Section de sélection de voiture: Très bien, allons-y et concevons cette section de manière à ce que vous puissiez voir que le titre est au centre, puis nous avons ces trois cartes avec le bouton Bot en arrière-plan, en bas. Désolée. Passons donc à notre flux de travail, n'est-ce pas ? Alors laisse-moi fermer mon dossier pour ne pas me distraire. Je vais sélectionner mon corps en appuyant sur Ctrl K. J'ajoute div, div block. Et pour ce bloc div, je peux l'appeler en fait non, débarrassons-nous de lui. Désolé, le type Control K a été sectionné en premier, donnez-lui une classe de section et une voiture ou une sélection. Sélection. Ce sera notre section. À l'intérieur de cette division. Pour le contenant. On y va. Et à l'intérieur de ce contenant, nous pouvons peut-être créer un emballage ou quelque chose comme ça. Mais ici, donnons-lui d'abord une marge de 200 pour pouvoir l'éloigner de cette section, celle-ci. Et à l'intérieur de ce conteneur, ce que je peux faire, c'est taper Control K type dans div, div block. Et ce sera notre emballage de cartes de voiture. On y va. Donc, à l'intérieur de ce conteneur, je vais d' abord taper Control K, taper le titre. Je vais utiliser le H2 pour cela, et je vais utiliser tous les titres. On y va. Enfin, nous y sommes maintenant et je vais juste ajouter le H2 centré. On y va. Et à l'intérieur du H2 centré, je vais me débarrasser de ceci et de cela. On y va. Et je vais m'assurer que c'est centré comme ça. Et à l'intérieur, je vais taper, comme dans notre collection exclusive. On y va. Et je vais juste le mettre au-dessus de mes cartes d'emballage. Et si je sélectionne ma section, vous pouvez voir que nous en avons maintenant 200 pour la marge intérieure du rappeur de contenu. Ce que je vais faire, c'est transformer cet emballage de contenu en grille un peu plus tard. Mais avant cela, appuyez sur Control K en tapant div pour ajouter un autre div qui hébergera mes éléments. Et cette division, je vais lui donner le nom de la carte de voiture. Et voilà. Donc, à l'intérieur de ma carte de voiture , je vais saisir toutes mes informations. Voyons donc ce que nous pouvons faire. Disons qu'à l'intérieur de la carte de voiture, je peux appuyer sur Control K sur l'image. Et restons-en là pour le moment. Image de la voiture car elle va extraire une image du conteneur. Mais en fait, voyons ce que nous pouvons faire. Donc pour le moment, je peux utiliser des images de voitures et peut-être ajouter trois images différentes sur le guinée-hourra Khan en était une. Laissez-moi donc le sélectionner à partir d'ici. Alors, qui est le compte qui va être ajouté. Alors voyons voir, l'escalade va être ajoutée. Et Lucid Air sera également ajouté à l'intérieur. Parce que nous ajouterons des images plus tard lorsque nous commencerons à modifier notre CMS. Mais pour l'instant, nous allons simplement le mettre ici. Donc, image de la voiture, je vais appuyer sur cette horloge, choisir une image, et je vais sélectionner un compte Twitter juste pour que nous puissions le voir, c'est évidemment énorme parce que nous devons ajouter tous ces éléments supplémentaires. Et pour cela, à l'intérieur des cartes de voiture, je vais créer un autre div Control K. Il suffit de le considérer comme un type de dossier dans div. Et ce bloc de division peut être nommé quelque chose comme informations de la carte de voiture, la carte, les informations de la carte. Et à l'intérieur de ces informations, je peux peut-être ajouter cet âge de trois ans, contrôler l'épingle de type K tête H3 et voir ce que nous avons ici. Donc, toutes les rubriques H3 n'ont toujours pas pris les informations. Prenons donc Poppins. Je ne sais pas pourquoi, lorsque je l'ai conçu pour la première fois, cela ne m'a posé aucun problème, mais maintenant, pour une raison ou une autre, c'est le cas. Nous avons donc ces trois couleurs, alors allons-y. Alors colorie h trois et un paragraphe. On y va. Et je fais une sélection , juste pour que vous puissiez voir ce que je fais. Et ce que je vais faire, c'est utiliser les trois paragraphes. C'est très bien. Ici, je vais taper que Lamborghini se produirait. On y va. Et ici, je vais appuyer sur Control C, Control V pour le coller. Et ce h3 va être un H trois bleu. Et tout ce que je veux faire, c'est simplement passer à la couleur bleue. Et cette couleur bleue sera en fait pour le prix. Alors partons avec 1949990, désolé. Enfin, nous allons créer un autre bloc div à l'intérieur parce que si je vous passe à mon design, si vous vous souvenez bien, nous avons créé kilomètres cette année et je vais pour le sélectionner et le donner sous forme de classe combinée. Cette année, le kilométrage est rembourré et la distance est de 24. C'est donc exactement ce que nous allons faire ici. Donc Control K une fois de plus en tapant div if block, je vais lui donner cette classe qui juste copiée années-kilomètres. Et ajoutons deux textes à l'intérieur. Ctrl K saisit donc du texte. Et voyons voir, Textblock peut-être. Je pense que oui, textblock, donnez-lui une classe de bloc de texte ici. Bloc de texte, c'est parti. La première aura lieu en 2021. Et voilà. Je vais appuyer sur Control C, Control V pour en créer un autre. Et ce sera pour les kilomètres. Allons-y avec 63 à 4 km. Et je vais juste les changer, puis sélectionner vos kilomètres annuels. Viens ici, à l'écran. Cliquez ici pour obtenir la flexbox, cliquez pour être au centre , puis distribuez-les comme ça. Et voilà. Maintenant, il ne nous reste plus qu' à jouer avec les réglages de nos éléments. Donc, ce que je peux faire avec H trois bleu ici , c'est de lui donner peut-être au lieu de cette marge, je vais opter pour zéro. Marge inférieure, on peut opter pour 16 ou quelque chose comme ça. Voyons voir. Ou peut-être du rembourrage, nous pouvons le donner à 16 personnes. On y va. Et ce H trois, appelons-le h trois ténèbres. Peut-être. Ici, nous allons le supprimer, et ici nous allons le supprimer et peut-être lui donner 16 également. Mais maintenant, ce que nous pouvons faire c'est oui, oui, juste donner ça. Et pour ce qui est de la carte de voiture, je vais lui donner un rembourrage de 24. Parce que si je te ramène à XD et que je sélectionne le texte de ma carte de voiture, dans ce cas, 24, 24 ici. Donc, pour le faire dans Webflow, sélectionnez puis passez 24 ici, quatre ici. Et enfin 24 ici. Et voilà. Maintenant que notre carte est prête, nous allons lui donner une classe de personnes qui aiment la voiture et sur les cartes de voiture, rappeur, je vais transformer l'écran de la ligne en une grille. Et la grille fonctionne comme ça. Vous avez vos colonnes et vos lignes. Maintenant, ce sont les colonnes pour le moment, nous n'en avons que deux. Mais si je vais ici et que je tape ce plus, nous avons maintenant trois colonnes et maintenant deux lignes. Vous pouvez voir que c'est la ligne numéro un, ces trois grandes colonnes. Et maintenant, voici la deuxième ligne, ces trois petites colonnes, pour nous en débarrasser car nous n'en avons pas besoin. Je vais juste appuyer sur Supprimer juste ici sur les lignes. Et maintenant, nous n'aurons qu' une seule colonne, très simple. Vous pouvez donc jouer avec les paramètres ici pour la grille et les tailles, etc. Mais avant de faire quoi que ce soit, nous avons la carte de voiture, qui se trouve dans une colonne de notre grille. Je vais appuyer sur Control C, Control V, Control V pour le coller trois fois. Et avant de passer à autre chose, ce que je veux faire ensuite, c'est pour ma carte de voiture, je voudrais lui donner ce contexte. Donc, carte de voiture, utilisez mon design pour le fond. Je peux choisir la couleur et sélectionner ma couleur blanche. Vous pouvez le voir ici. Il vous suffit donc de sélectionner votre blanc pur. On y va. Et il va colorer les couleurs de chaque côté. Maintenant, ce que nous avons ici c'est le rayon des coins arrondis. Je vais donc sélectionner la dette et les aides à la saisie. On y va. Nous avons maintenant le huit pour le rayon d'angle et pour les images, sélectionnons cette première, par exemple parce que toutes sont exactement les mêmes ici pour celle-ci, je pense que nous allons avoir des escalates. Alors, cliquons avec le bouton droit ici. Dupliquez le type de classe en mode escaladé. On y va. Je vais immédiatement remplacer l'image pour qu'elle ne soit pas confuse. On y va. Et ici pour mon image, ce que je vais faire pour le rayon, c'est cliquer ici. Pour le coin gauche, je vais taper huit. Pour le coin droit, je vais taper huit et je vais les remplacer par ces deux-là, mais pas par celui-ci parce que je le change. Ainsi, lorsque je sélectionne mon escalade et que je fais de même, que je saisis l'aide, saisis huit. Et ça va arrondir ces angles comme ça. Et c'est exactement ce que je veux. Mais la dernière chose, c'est pour ça. Donc, vous pouvez voir ici avec les années, les kilomètres, ce que je vais faire, c'est peut-être , voyons voir, peut-être que je peux mettre le jumelage ici ou 24 peut-être. Et je pense que cela fonctionnera très bien. Ou peut-être même mieux avec 16 parce que nous n'avons pas besoin d' autant d'espacement ici de ce côté. Et voilà. Nos cartes sont prêtes. Mais mieux encore, ce que je peux faire, c'est taper zéro ici parce que je veux y parvenir. Et en tapant au lieu de blocs de texte, je vais l'appeler année de la carte de voiture. Et si nous en revenons au design, voyons voir ici. On y va. Nous avons une pile de 24 distances. Donc, quand je reviens à notre design, prenons Q ici. Et pour les blocs de texte, nous pouvons sélectionner cette année de voiture de blog technique et simplement ajouter une marge de 24. On y va. Et maintenant, nous allons le configurer pour qu'il soit comme ça, pour qu'il soit aligné jusqu'ici. Et cette année, le kilomètre, pour une raison ou une autre, ne s'est pas traduit ici. Donnons-lui donc un cours. C'était donc une carte Textblock, une année de carte. Donc, si je l'ajoute ici, année de la carte, elle s'appliquera. Sélectionnez celui-ci. Carte, année de la carte. Il va l'appliquer. On y va. Et une dernière chose qu'il nous reste à faire est de simplement sélectionner cette option. Donc Cadillac grimpe en flèche, c'est le prix. Ce sera l'escalade de la chance. Je pense que c'est comme ça que tu l'écris. Avec deux L, escaladez 2020 et ce sera le kilométrage. Cela va donc être en 2020. Et ce sera le kilométrage. On y va. Et enfin, ce sera Lucid Air. Allons-y et remplaçons. Tout d'abord, cliquons ici. Dupliquez la classe, appelez-la Lucid pour cette image et remplacez simplement l'image ici. On y va. Et pour le prix, revenons à XD. Voyons voir. 2022 est l'année. C'est le prix. Ça va être 22. 22, on y va. Et pour les 40 km de l'année, désolé, nous pouvons revenir ici et taper une dette. Alors on y va. Nous avons maintenant nos cartes. Et la dernière chose que je veux faire, c'est d' abord réduire tout cela, puis sélectionner notre carte comme ça. Je vais sélectionner ma carte , puis placer une bordure ici. Je vais donc cliquer sur la bordure. Au lieu de la couleur noire, je vais choisir cette couleur ou mieux encore, cette couleur, puis la réduire jusqu'à zéro pour qu'elle ne soit pas visible. C'est donc notre état par défaut. Et maintenant, créons un état d'horreur. Et tout ce que nous avons à faire, c'est simplement ramener ce chiffre à 100, comme ça. Alors maintenant, quand j'aurai cliqué sur l'aperçu, j'espère que cela fonctionnera. On y va. Mais pour une raison ou une autre, il reste ici. Voyons donc comment ça s'appelle. Fais-le. On y va. Donc, si je supprime cela, cliquez sur Aperçu tout de suite, survolez. Vous pouvez voir que tout cela fonctionne très bien. Mais maintenant, nous avons un petit problème, car c' est trop proche et trop proche l' un de l'autre. Donc, si nous revenons à mon flux de travail et voyons ce que nous pouvons faire ici. Peut-être pouvons-nous ajouter à l'emballage des cartes de voiture une marge supérieure de 64 points. Et voilà. Enfin, pour que la grille elle-même puisse la modifier, vous pouvez cliquer sur cette icône. Nous avons ici ce FR, qui est la fraction de la grille. Et comment vous pouvez y penser, les colonnes de votre grille sont divisées par défaut sur une valeur égale à la nôtre Nous avons donc ici trois fractions, donc trois fractions égales. Et vous pouvez ajuster ces fractions en cliquant ici, en les ajustant, en créant une colonne, à court terme, en agrandissant une colonne. Mais ce que je vais faire dans notre cas, c'est en venir à XD et C. Nous en avons donc 38, donc nous n'avons pas nécessairement à obtenir le même résultat. Mais si cela avait été 24, peut-être pour l'écart entre ces colonnes, appuyez sur Entrée, vous pouvez voir. Alors peut-être que nous pouvons en avoir 32, voire 38. Voyons voir. Donc oui, je trouve ça plutôt sympa. Il est peut-être déjà trop tard. Je ne pense pas que 38 soit vraiment nécessaire. Et voilà, car cela rend mes images un peu plus petites. Et vous pouvez voir que les effets de survol fonctionnent comme il se doit. Et voilà. Maintenant, nous l'avons créé. Maintenant, évidemment, parce que ce sera notre contenu dynamique. Une fois que nous aurons terminé cette page, nous allons commencer à parler ce contenu dynamique avant de passer à la page suivante, car nous en aurons évidemment besoin pour les pages suivantes. Mais pour l'instant, voyons rapidement ce que nous avons fait. Nous avons donc ici notre navigation. Nous avons notre bouton, et il fonctionne. Nous avons ces deux sections. Ensuite, nous avons cette section avec notre image et cette largeur ou le texte. Enfin, nous avons notre collection exclusive lorsque nous survolons la souris Elle fonctionne exactement de la même manière, comme nous l'avions imaginée dans Adobe XD. Je suis donc très content de ce à quoi cela ressemble. Dans la section suivante, nous allons parler de ce que nous proposons. Et je te verrai dans la prochaine vidéo. 172. Section de l'offre: Très bien, continuons là où nous nous sommes arrêtés et commençons par notre section Offres. Appuyez donc sur Control K sur le type de corps dans la section. Et je vais ajouter une classe de section. Et peut-être notre offre. On y va. Et à l'intérieur de ce contrôle, tapez « div ». Pour le div, donnez-lui une classe C de conteneur. On y va. Et pour notre section, voyons voir, peut-être pouvons-nous lui donner une marge de 200 secondes afin de pouvoir la pousser depuis le bas de l'intérieur du conteneur Control K pour qu'elle bas de l'intérieur du ait été div. Pour la division, je vais y ajouter une catégorie d'offre. Notre emballage d'offres. On y va. Et à l'intérieur de cet emballage, je vais peut-être voir ce que nous pouvons faire. Peut-être que nous pouvons mettre, voyons voir, utilisons ce H2. Appuyez donc sur le contrôle C ici, fermez tout cela et appuyez sur le contrôle D juste à l'intérieur de notre conteneur. Et ça va juste le mettre juste en dessous de notre emballage. Il suffit de le mettre ici. Et je vais simplement utiliser les textes de ce que nous proposons comme ceci. On y va. À l'intérieur de notre emballage. Ce que je vais faire, c'est peut-être en faire une flexbox. Parce que n'oubliez pas que si nous vous ramenons à notre design ici, revenez à ce que nous proposons. Nous avons toujours ces deux colonnes, comme nous l'avons fait pour le héros et peu importe. Donc, dans cette colonne, nous allons avoir cette section. Permettez-moi donc de terminer ceci pour que ce ne soit pas confus. Donc, ici, dans notre offre, nous l'avons proposée en quatre et nous avons notre image sur le côté. C'est donc exactement ce que nous allons faire avec notre design ici. Fraptons donc Control K, tapez dans def, ajoutons un div. Et cette division ressemblera au contenu de notre offre. On y va. Et peut-être pouvons-nous appuyer sur Control K pour saisir l' image et ajouter cette image à l'offre, qui est celle-ci. On y va. Enfin, étant donné que nous en avons fait une boîte flexible, assurez-vous de l'avoir centrée et de la répartir. Nous avons donc placé ce positionnement égal entre nos éléments. Alors maintenant, nous avons ceci et nous avons cela. Enfin, notre offre rappeur peut avoir une marge de 64. Peut-être. C'est parti pour le distinguer du texte. Et si je vous ramène ici, comme vous pouvez le voir, nous avons toujours ces 64 textes. Donc, dans le contenu de notre offre, ce que je veux faire, par exemple , c'est voir ce que nous pouvons faire. Peut-être créer, peut-être créer trois nouvelles différentes. Parce que si je prends ici, peut-être que cela peut être un div et tout le contenu devrait y entrer. Donc, à l'intérieur de cette division, nous pouvons avoir trois autres divs. Donc 12.3 et à l'intérieur de chacun d'eux peut se trouver un div qui va contenir ceci, qui contient la pile de 16, l'icône So et le texte, et le texte en dessous. Nous allons donc le structurer comme ça. Donc, si je reviens à mon flux de travail ici, nous avons le contenu de notre offre, qui est le suivant. Et si je suis endetté, je peux peut-être appuyer sur Control K en div. Et à l'intérieur de cette division, que je vais appeler Voyons voir, offrez une garantie. Offrez une garantie. Ce que je vais y mettre est peut-être une image. Pour l'image, je vais utiliser l'icône « Voyons voir, voyons voir, voyons où nous en sommes pour ce lot ». Mais j'ai besoin de ce badge bleu. Il semblerait qu'il ne l'ait pas exporté parce qu'ils en ont juste une version blanche. Mettons-le pour l' instant jusqu'à ce que nous passions à X d, icône de garantie sélectionnée, badge , bleu, exports Control X. On y va. Et maintenant, laisse-moi le trouver dans mon dossier. On y va. Nous sommes chez Icones. Et voyons voir, je peux cliquer ici sur mes icônes. C'était donc la garantie, le badge, l'icône, le bleu, le glisser-déposer. On y va. Permettez-moi de fermer ceci pour que cela ne nous dérange pas. Remplacez l'image par celle-ci. Et maintenant c'est à l'intérieur. Donc, si je reviens ici, nous avons ici la garantie de l'offre et voici cette image. Je vais donc taper quelque chose comme la guerre. Ran. T, icône, bleu. Nous y voilà et décidons que j'ai besoin d'un texte qui sera un h3. Contrôlez donc K, tapez le titre, sélectionnez le H3. Voyons s'il est enregistré. Mes paramètres, toutes les rubriques H3. Oui, il l'a fait. Enfin, adorable. Et vous pouvez voir les paramètres ici. Et ce que je vais faire, c'est peut-être ajouter une classe combinée de H3 et Dark. Comme ça, juste pour que nous sachions ce que nous avons. Et je vais me débarrasser de ce roulement pour moment car je n'en ai pas besoin dans ce cas. Et ici, nous allons écrire quelque chose comme une extension de garantie. On y va. Nous allons maintenant utiliser cette offre de garantie et la transformer en une flexbox. Assurez-vous qu'il est centré. Et je vais sélectionner mon icône ici, l'icône de garantie bleue, et lui donner une marge de 16 parce que c'est ce que nous avions, si vous vous souvenez bien, dans notre design, au lieu du contenu de notre offre, ce que je peux faire C'est peut-être, voyons voir. Peut-être que je n'ai pas envie de faire ça. Peut-être que je pourrais le renommer pour proposer un titre, peut-être. Classe donc renommée pour offrir un titre. On y va. Et je vais créer un autre div ici. Mettez ça en haut, puis mettez ce titre dans ce div, comme ça, puis faites cette offre. Offre Voyons voir la garantie. Offrez une garantie. Dans le cadre de cette offre de garantie, je vais ajouter un bloc de texte, K, bloc de texte. On y va. Et ici, je vais lui donner une classe de Textblock. Et laisse-moi juste prendre quelques textos. On y va. Et ici, pour ce bloc de texte, je peux proposer un titre. Je peux peut-être le baisser un peu . Voyons ce que nous pouvons faire. On peut peut-être lui donner une note de 24. Sélectionnez donc le titre de notre offre et la marge passera à 24 % ci-dessous. Je pense que cela fonctionnera très bien. Nous avons ici notre offre de garantie. Ce que je peux faire avec cette section, c'est le contenu de notre offre, qui est encore une fois la principale division qui la maintient en place. Ce que je peux faire, c' est peut-être en faire une pile, mais peut-être que je n'en ai même pas besoin. Allons y jeter un coup d'œil. Donc, s'il fonctionne comme Control C, Control V, Control V, il va le coller trois fois, ce qui est bien, je trouve que c'est bien, car notre wrapper d'offres est lui-même une flexbox. Ce n'est donc que l'enfant de notre Flexbox, ce contenu d'offre. Donc, ici, ce que je vais faire, c'est offrir une garantie, c'est bien. La prochaine étape sera celle de la maintenance. Voyons donc ce que je peux faire ici. Alors offrez une garantie, je vais cliquer ici. Dupliquez la classe. Au lieu de la garantie, je vais saisir la maintenance. Ensuite, je vais sélectionner les textes ici. Donc, pour le titre, c'est bien , mais celui-ci, je vais le remplacer, remplacer l'icône et nous avons juste besoin de trouver cette icône de maintenance. Voyons donc où il se trouve. On y va. Et au lieu que l'icône de garantie fleurisse, je vais dupliquer la classe et saisir la maintenance. Icône. On y va. Et comme vous pouvez le voir, il conservera le même réglage de 16, ce que nous voulons exactement. Et enfin, changeons ce dernier. Alors cliquons avec le bouton droit, cliquons avec le bouton gauche de la souris, désolé, nous avons dupliqué la classe. Et ce sera une offre de prêts. Et double-cliquez ici pour saisir les prêts. Et cela ne fera que dupliquer le cours. Icône, adorable. Et au lieu de cette icône, remplacons-la par l'icône des prêts. Trouvons-la donc là où elle se trouve. C'est la main qui tient une voiture. Trouvons-le donc. On y va. Icône des prêts dans le monde entier. Il garde toujours cette distance de 16 points. Maintenant, permettez-moi de prendre le texte et de le coller ici. Et prenez le texte d'ici, collez-le ici. Charmant. Et ce que je vais faire ensuite, et enfin, si je le ramène à XD, il y a une certaine distance entre chacun d'eux. Nous en avons donc 40 et nous en avons 40 ici. C'est peut-être ce que nous pouvons faire ici également. Donc si je ferme tout, euh, voyez ce que j'ai fait précédemment. Alors offrez une garantie, peut-être que je pourrais la porter à 40 et proposer une maintenance. Peut-être que je peux aussi porter ce chiffre à 40. Voyons donc à quoi cela ressemble. On y va. Quand je clique sur l'aperçu, je trouve que c'est très bien. Mais peut-être que 40 c'est un peu trop et nous voulons avoir de la place pour notre image. Alors allons-y avec 32. Je pense que ça marchera très bien. Donc 32 ans, adorable, adorable. Maintenant, cette section est pratiquement terminée. Vous pouvez donc voir ce que nous avons fait et à quelle vitesse cela s'est passé. Et je vous verrai dans la prochaine vidéo où nous allons créer cette section d'avantages. Et cela va demander un peu plus de travail à cause de la superposition des images. Alors je t'y verrai. 173. Section des avantages: Très bien, allons-y et notre section sur les avantages sociaux. Donc, si je vous ramène au flux, je vais sélectionner le body hit Control K, type C pour nous, désolé, S pour une section. Rubrique. On y va. Ils ont été contrôlés Kate et Div, et ce sera notre conteneur. Charmant. Et maintenant, à l'intérieur de ce contenant, nous pouvons peut-être le mettre dans l'emballage. Donc Control K tapez div. Et cette division peut être, voyons voir, des avantages. Rappeur. Comme ça. À l'intérieur de ce contenu, il y aura évidemment notre contenu textuel. Maintenant, pour ce qui est de cela, appelons cette section des avantages. Voilà, et donnez-lui une marge maximale de 200, comme pour tous les autres que nous avons fait. Enfin, ce que je veux faire ici c'est apporter quelques modifications. Donc, pour le conteneur, je veux qu'il soit réellement sur toute la largeur. Je vais donc taper en pleine largeur pour ma classe de combo. Et pour la largeur ici, je vais taper 100 %. Et cela occupera la totalité du pourcentage de mon écran. Les avantages du wrapper seront en fait de 1 200 pixels. On y va. Et nous allons le centrer comme ce conteneur. Ensuite, ce que je vais faire, c' est qu' au lieu d'indiquer arrière-plans, image, dégradé, je vais sélectionner cela et mettre une image. Je vais choisir mon image. Et à partir de là, je vais sélectionner mes avantages. On y va. Assurez-vous qu'il est centré, qu'il n'est pas carrelé et assurez-vous qu'il est réglé pour couvrir. Et de cette façon, ça va très bien se couvrir. Enfin, ce qu'il nous reste à faire ensuite, c'est peut-être, voyons voir, apporter quelques modifications internes. Donc, si j'y vais et que je vais voir, je pourrais peut-être mettre du contenu dans notre emballage d'avantages sociaux. Et pour l'instant, voyons voir, donnons une certaine taille à ce contenant. Donc, si je vous ramène ici, ce que nous avons à notre avantage est de 469. Utilisons donc cela pour l'instant comme espace réservé. Revenons à ici. Les conteneurs doivent donc avoir une hauteur de 469, comme ça. Et maintenant, nous l'avons. Cela permet donc à l'emballage et au contenant de vivre l'un dans l'autre. Mais travaillons simplement avec l'emballage des avantages pour le moment. Je vais donc appuyer sur Control K, taper H pour le titre. Et voici le titre que nous allons choisir, voyons voir, H12, peut-être. On y va. Et il conservera tous nos paramètres. Passons donc au H2 blanc. Et pour cela, ce que nous pouvons faire, c'est supprimer cette marge. Débarrassez-vous de cette marge ici. Nous pouvons opter pour la couleur blanche et la couleur centrée comme ça. Et je peux taper quelque chose comme nos avantages sociaux. Charmant. Et en dessous, nous pouvons peut-être créer un autre div Control K en tapant div. Cette division bénéficiera d' une classe de nos avantages. Quelque chose comme ça. À l'intérieur de la dette. Ce que je peux faire, c'est peut-être en créer un autre. Nos avantages sociaux seront donc notre principale division. Et appuyons sur Control K, tapez div. Cette division sera appelée livraison gratuite. Livraison. On y va. Sélectionnons-le à partir d'ici, appuyez sur Ctrl K pour saisir une image. Et je vais ajouter une image rapide, qui sera cette icône de livraison, qui représente la voiture avec une épingle sur le dessus. On y va, et c'est celui-ci. Et en dessous, ce que je vais faire, ce sont peut-être des publicités. Voyons voir, peut-être un H3 Control K, h. Allons-y avec H3. Enregistrez les paramètres. Non, ça ne l'a pas fait pour une raison quelconque. Toutes ces trois rubriques, c'est parti. Charmant. Et je vais simplement ajouter H trois blancs. Comme ça. Sélectionnez-le ici. Assurez-vous qu'il est blanc. Et assurez-vous également qu' il est centré comme ça. Ici, je vais taper quelque chose comme livraison gratuite, autoriser la boucle. Et dans le cadre de notre livraison gratuite, je vais appuyer une fois de plus sur Control K et taper P. Pour le paragraphe. Tous les paragraphes. Il a fallu du style et je vais taper quelque chose comme le paragraphe ou la couleur du corps p ou p. Parce que c'est le style qu'il va falloir adopter. Et à partir de là, je vais choisir la couleur de la carrosserie , comme ça. Laissez-moi simplement copier et coller ce texte. Voyons quelque chose comme ça. Copions et collons donc ce joli javelot. Et voici en gros à quoi ressemblera notre contenu. Maintenant, évidemment, ce n'est pas centré, donc le Peabody College devrait être centré. On y va. Et pour que je puisse centrer tous ces éléments, je peux les transformer en Flexbox, mais ne le faisons pas, car utilisons simplement nos avantages et transformons-les en une grille. Et vous pouvez voir qu'il a immédiatement centré ces éléments à l'intérieur. Utilisons donc 32, comme nous l'avons fait précédemment. Et ajoutons simplement une colonne supplémentaire. Débarrassons-nous de cette rangée. Charmant. Et je vais appuyer sur Control C, Control V, Control V pour coller deux fois de plus. cette livraison gratuite , Avec cette livraison gratuite , je peux la transformer en une flexbox verticale et je vais juste cliquer ici où il est écrit centre. Et il va centraliser tout mon contenu à l'intérieur. Charmant. Tout est là où il devrait être. Vous pouvez même simplement l'appliquer au centre, mais je ne pense pas qu'il faille nécessairement le placer en haut. Donc, ce que nous pouvons faire ensuite, c'est ici, au centre, nous n'avons pas besoin de livraison gratuite, donc je peux dupliquer ce cours et le qualifier de polonais en trois étapes. Comme ça. Et cette dernière va être, cliquons ici, dupliquons la partie de classe, dupliquons la partie de classe échangeons, échangeons en boucle. Et ajoutons réellement le contenu. Alors collez-le dedans. Comme ça. Ce dernier fera partie d' un échange et du contenu qui y figurera. Et voilà. Maintenant, pour ce qui est de H trois blanc, je vais me débarrasser de ce haut de gamme. Et pour le dernier, ce que je peux faire, c'est taper 24. Cela va me donner le bel espacement que je souhaite. Et pour l'image, ce que je peux faire c' est créer une icône. Et peut-être que je pourrais aussi mettre la marge inférieure de 24. Ce sera l'icône polonaise. Et fais de même pour ça. Pendant que nous sommes ici, assurez-vous de vous débarrasser de celui-ci et d'utiliser notre vernis, qui est charmant. Et enfin, sélectionnons celle-ci qui est une icône d'échange de pièces. Et sur celui-ci, allons-y également avec 24. Cliquez ici et remplacez-le par l'échange de pièces. C'est-à-dire, voyons voir, pour être sûrs de le voir dans mon design. Oui, celui avec la clé. Celui avec la clé, qui est adorable. Et que pouvons-nous faire ensuite ? Maintenant que nous avons tout notre contenu, vous pouvez constater que notre liste d' avantages sociaux reste en quelque sorte en haut de cette page. Donc, ce que nous allons faire, c'est transformer un contenant en une boîte flexible, puis utiliser notre emballage et nous assurer simplement qu'il se trouve au centre comme ceci. Ensuite, ce que nous pouvons faire, c'est nous assurer que nos avantages sont supérieurs. Donc, si je sélectionne ici, vous pouvez voir qu' ici nous en avons 64, donc c'est ce que vous allez créer ici également. Nos avantages devraient donc avoir une marge maximale de 64 % et tout s'alignera très bien. Enfin, nous allons utiliser notre conteneur et faire défiler l'écran où se trouve notre image. Maintenant, ce que nous allons faire, c'est sélectionner la couleur. Voyons donc peut-être la superposition de couleurs. Et pour la couleur, ce que nous pouvons faire, c'est peut-être utiliser celle-ci. Donc, cheveux foncés et colorez-les simplement d'environ 10 %, peut-être même un peu plus, quelque chose comme ça. Donc, dans ce cas, comme c'est inversé, nous pouvons peut-être passer à 80 % juste avoir le même effet que dans XD. Donc, si je l'amène à XD, vous pouvez voir à quoi cela ressemble. Donc, si j'appuie sur Control Enter ici, désolé, Control, Control Enter pour l'aperçu et que je fais défiler l'écran vers la droite, juste ici. Vous pouvez voir que nous avons maintenant cet effet. Je pense donc que cela fonctionne très bien. La prochaine étape est notre forum. Allons-y et terminons ça, parce que je trouve que ça a l'air plutôt bien. Et je ne pense pas qu' aucune autre modification ne nécessaire à cette section, pour être honnête. Et cela va très bien fonctionner car il s'agit d'une grille. Lorsque nous commencerons à les redimensionner, nous allons évidemment simplement placer le contenu l' un sur l'autre. Mais pour l'instant, tout fonctionne comme il se doit. Ces prêts, commençons par le haut. Donc, nous avons ceci, nous avons ceci, nous avons ces cartes qui fonctionnent très bien. Nous avons cette section qui fonctionne à merveille, et puis nous avons cette section. Je suis donc très content de ce à quoi cela ressemble. Et dans la section suivante, comme je l'ai dit, nous allons aborder la question sur le forum. Alors je t'y verrai. 174. Formulaire de contact: Très bien, passons maintenant au formulaire de contact. Et avant de passer au workflow, rappelons-nous rapidement à quoi il ressemble dans XD. Nous avons donc ici le texte « Contactez-nous », puis nous avons un champ de formulaire complet ou un champ de saisie. Celui-ci occupera six colonnes ou trois colonnes plus haut, vous devriez l'appeler parce que ce sera une grille. Et celui-ci prendra un peu plus de place car il sera un peu plus grand pour que le message accompagne l'espace réservé au message. Enfin, nous allons simplement réutiliser le composant de notre bouton principal avec le message d'envoi. Passons donc à Webflow. Et tout d'abord, il faut toujours appuyer sur Ctrl K et taper dans la section. Et une chose que je tiens à mentionner c'est que vous pouvez constater que le flux de travail est désormais économisé. Et quand je clique sur la section C ici et là, c'est parti. Et ça va nous montrer cette coche. Vous pouvez voir que nous avons toujours des modifications non enregistrées, mais lorsqu'elles seront enregistrées, elles seront affichées. Au lieu d'ici, je vais appuyer sur Control K, tapez dans div, div block presenter. Et pour le bloc div, je vais ajouter une section de conteneur, comme ça, c'est parti. À l'intérieur de ce contenant, je vais en ajouter un autre. Alors, frappez, et voilà. Cela a maintenant enregistré nos modifications. Appuyez sur Ctrl K, tapez div, comme ça. Et celui-ci, je vais appeler forum wrapper, par exemple warm wrapper, parce qu' une fois de plus, il va emballer ce formulaire à l'intérieur de notre champ. Alors ouvrons-le. Et à propos de la dette, sélectionnons d'abord cette section et appelons-la forum. Voyons ce que nous pouvons faire. Appelez cela un formulaire de contact. Parce que vous allez peut-être avoir différents forums sur votre site Web. Et pour cette section, encore une fois, passons à 200 avec la marge supérieure. Il va donc bien intégrer ce contenu à l'intérieur. Maintenant, à l'intérieur de ce contenu, ce que je peux faire, c'est voir. Peut-être que là où il est écrit « forum wrapper » à l'intérieur de ce conteneur, Peut-être que là où il est écrit « forum wrapper à l'intérieur de ce conteneur je peux appuyer sur Control K et M ressemble à un titre H2 et recherchez H2 centré fort. Et ici, je vais simplement écrire, contactez-nous. Et encore une fois, comme il directement en HTML en dessous de notre élément principal, je vais placer le Form Wrapper ci-dessous, ce qui va placer le formulaire Contactez-nous ci-dessus. Pour le wrapper du forum lui-même, je vais lui donner une marge maximale de 64. Nous conservons donc l'aspect agréable et cohérent de notre design. À l'intérieur du Form Wrapper , je peux appuyer sur Control K pour taper dans le formulaire. Et il va simplement ajouter ce bloc de formulaire à l'intérieur. Quand je clique dessus, il va le mettre dedans. Et voici à quoi cela ressemble. Donc, si je ferme ceci, nous avons le nom, l'adresse e-mail et le bouton à l'intérieur. Donc, à l'intérieur de Form Wrapper, nous avons notre bloc de formulaire. Ensuite, nous avons l'élément de formulaire lui-même. Nous avons ici l'étiquette du champ. Et cette première, nous allons l'appeler, par exemple, je ne sais pas. Nom complet. C'est ce que c'était auparavant. Et à l'intérieur de notre TextField, ce que je peux faire, c'est que lorsque je clique ici nous allons dire le nom, nous allons dire le type. Et enfin, pour l'espace réservé, je vais écrire, entrez votre nom complet. Et vous pouvez voir ce texte apparaître ici. Maintenant, en termes de style, ce que je peux faire, c'est pour cette étiquette de champ, ce que je peux faire, c'est me débarrasser de celle-ci. Mais en fait, non, voyons ce que nous avions dans XD. Nous en avons donc 16, et c'est évidemment 16, c'est 24. Allons-y et faisons-le dans Webflow. Il va donc avoir un rembourrage inférieur de 16, un look animé. Et celui-ci va, j'ai le rembourrage inférieur de 16 aussi, comme ça. Et notre champ de texte, Revenons à XD, aura une distance de 32. Voyons voir, l' étiquette du champ de texte peut avoir 32, par exemple , c'est parti. Enfin, ce champ du bas, mais non, pas ce champ de texte devrait avoir 32. On y va. Et TextField, celui-ci devrait aussi en avoir 32, comme ça. Au lieu d'une adresse e-mail, ce dont j'ai besoin ici, c'est oui, saisissons un e-mail et cliquons sur le champ de texte pour saisir des espaces réservés, donc entrez votre e-mail. Et passons maintenant à quelques cours. Donc, tout d'abord, ce sera un texte de champ. Donnons-lui une classe de Textblock. Supprimez donc la classe et donnons-lui une classe de textblock en fait. Je suis donc du style Qin, tout ce que je veux ici. Donc TextField et form. Désolée. Donc, ici, ce que je vais faire, c'est qu'au lieu de boulon, je vais opter pour l'irrégulier. Et au lieu de la couleur du disque, je pourrais utiliser quelque chose comme cette couleur. Oui, je pense que ça fonctionne bien. Voyons ce que nous avions ici. Maintenant, ici, nous avions en fait cette couleur grise mais juste normale. Revenons donc à ici. Passons donc à la couleur grise, irrégulière. On y va, et on va juste l'ajuster à 16. Ici. On y va. Nous avons donc maintenant des manuels un bloc de texte et un formulaire. Nous allons donc sélectionner cela ici. Supprimez donc le bloc de texte de la classe et Form était la classe combinée. Et ça aide, mais pas pour ça, mais pour ça. Supprimez le formulaire de bloc de texte. Joli travail. C'est ce que nous avons maintenant. Et allons-y, stylisons ça. Donc, dans le style du champ de texte, je peux sélectionner ce texte. Et voyons comment nous pouvons styliser cela. Alors peut-être que nous pouvons ajuster cela. Supposons que l'avion reçoive un e-mail et que vous puissiez y accéder cas de succès et d'erreur. Vous pouvez donc voir à quoi ressemble le succès, quoi ressemblent les champs d'erreur, mais nous allons simplement cibler le principal. En termes de TextField. Afficher tous les paramètres ici. Et pour les tailles, optons pour quelque chose comme Poppins. Poppins aussi avec 16. Et allons-y avec 24 ici. Et passons à la couleur de celui-ci. Et celui-ci. Optons pour une couleur plus foncée. Je pense que ça ira très bien. Au lieu de TextField, renommons la classe et appelons-la, par exemple champ de texte du forum. On y va. Et pour une raison ou une autre , cela n'a pas changé. Peut-être que l'opacité y joue un rôle. Donc, si je clique rapidement sur l'aperçu, le tour est joué. Cela fonctionne donc, mais pour une raison ou une autre, cela n'a pas changé ici. Alors, que pouvons-nous faire à l'intérieur du pâté de maisons ? Des champs de formulaire ? Nous allons l'ajuster pour qu'il ressemble à XD. Nous en avons donc 16 de chaque côté, par exemple, donc ajustons cela. Donc, pour l'appariement dans le champ de texte du formulaire, je vais opter pour un rembourrage de 16 ici. Rembourrage de 16 pièces juste ici, ou juste de ce côté. De ce côté, il y aura zéro. Mais pour une raison ou une autre, cela ne me permettra pas de le faire. Alors peut-être que si je sélectionne mes paramètres de champ de texte, donc le champ de texte du formulaire. Alors allons-y et laissez-moi le remplacer par huit. Et cela peut aller jusqu'à huit également. Je suis donc ravie que cela puisse être 16, cela peut être 32, donc ça pousse vers le bas et en termes de taille, passons à la hauteur de 50. Et maintenant, nous avons ce qu'il nous faut. Et le texte à l'intérieur d'un look. Ça a l'air bien. La couleur doit être blanche, donc c'est bien. Donc, champ de texte du forum, appliquons ce formulaire. Champ de texte. On y va. Nous avons la même chose à l'intérieur et nous avons le style et l' accompagnement. Maintenant, fermons-le rapidement car nous avons ce bouton d'envoi. Je n'en ai pas besoin. Je vais appuyer sur Ctrl K et taper sur le bouton. Et à l'intérieur, je vais simplement ajouter notre bouton principal, comme ça. On y va. Et pour notre bouton principal, celui de droite permet d'envoyer un message comme celui-ci. Et maintenant que c'est terminé, je peux tout simplement mettre un div Control K de type div dans div. Et ce bloc div peut héberger ces deux groupes. Parfois, ils peuvent être un peu têtus. Il suffit de le mettre dans le bloc de texte, à l'intérieur. On y va. Et ce bloc de définition peut être appelé par exemple champ de nom comme ça. Et ce champ de nom n'a pas vraiment besoin d'avoir un style supplémentaire. Je pense que c'est bien. Créons-en maintenant un autre. Sélectionnez donc le Form Control K pour ajouter div. Mettez-le juste en dessous de notre champ de nom et mettez-le dedans. Comme ça. Ce que je vais faire, c'est peut-être appeler cet e-mail comme ça. Je vais appuyer sur Control C, Control V sur cet e-mail, ce que je vais faire c'est le renommer, mais dupliquez d'abord la classe, et maintenant renommez-la en téléphone. Ici, je vais sélectionner celui-ci. Je vais taper le numéro de téléphone ici pour le texto. Ça va être amusant. Il va s'agir de saisir votre numéro de téléphone. Comme ça. Charmant. Et voici, voyons voir, pour l'e-mail, ajustons cela. Donc c'est l' e-mail, c'est bon. Et voici le nom, donc le nom, l'e-mail. Et ici, on a quoi ? Nous avons le numéro de téléphone, comme le téléphone, et voilà. Enfin, ce que je vais faire pour celui-ci, c'est appuyer sur Control C, Control V. Et celui-ci va l'être, donc dupliquer la classe sera un message comme ça à l'intérieur du message ici. Disons quelque chose comme un message. Ici, nous allons taper le message à haute voix. Et au lieu de saisir votre numéro de téléphone, je pourrais peut-être dire quelque chose comme écrire votre message. Enfin, ce que je veux faire, c'est me débarrasser de cette frontière. Sélectionnez donc l'une d'entre elles et cliquez ici puis ici, et vous supprimerez chaque bordure. Ainsi, lorsque je clique, vous pouvez voir à quoi cela ressemble. Je pense donc que ça a l'air très bien. Mais évidemment, nous devons maintenant le placer dans une grille et l'aligner un peu plus. Alors, comment pouvons-nous y parvenir ? En fait, c'est très simple. Utilisons notre wrapper de forum, qui sera notre grille cette fois. Alors, cliquez ici. Ensuite, nous avons besoin, par exemple, six colonnes différentes. Disons donc 123456. Et disons que pour les rangées, nous avons besoin de quelque chose comme, je ne sais pas, peut-être cinq rangées. Nous en avons donc déjà un ici, donc 12345. Et pourquoi en avons-nous besoin ? C'est assez simple parce que nous allons simplement les dépenser. Nous allons donc sélectionner le champ du nom. Voyons ce que nous pouvons faire. Donc, bloc de formulaire de texte. Voyons comment ajuster la dose. Oui, je pense que ce dont nous avons besoin n'est pas là. Mettons donc cela en évidence. Mais je vais le faire sur le formulaire lui-même en fait, disons que c'est notre grille. Donc, encore une fois, 23456. Oui, c'est bon. Et ici, nous avons dit 12345. On y va. Alors maintenant, sélectionnons, voyons notre champ de nom, cliquons ici dans le coin avec ce point et élargissez-le simplement. Pour occuper toute la largeur de votre page. Ensuite, prenez l'e-mail et répartissez-le sur trois colonnes. Donc 123, c'est ce que nous allons faire ici. On y va. Prends le téléphone 123 et prends le message , fais-le suivre jusqu'ici. Et pour ce qui est du message, mais je peux le faire pivoter pour prendre la largeur des deux colonnes. On y va. Et maintenant, il vous suffit de sélectionner notre bouton. Et ce que nous pouvons faire, c'est peut-être couvrir toute la section. Mais en fait, savoir que ce que nous allons faire, c'est peut-être couvrir une seule colonne ou quelque chose comme ça. Et puis peut-être pourrions-nous aller ici et taper en dernier pour qu'il soit perdu, et peut-être le placer sur le côté juste ici et peut-être simplement le parcourir jusqu'ici. On y va. Nous avons maintenant notre bouton. Alors maintenant, la dernière chose à faire est simplement d'ajuster la largeur de cette section de message. Alors, comment pouvons-nous y parvenir ? Devons-nous ajuster la hauteur de celui-ci pour le champ de saisie de texte ? Revenons donc au champ de texte étranger de notre message. Et je vais ajouter une classe de message combinée parce que souvenez-vous que c'est 50, mais ici je veux une classe B17, par exemple Derek go. Et maintenant, ce que je peux faire, c'est peut-être voir. Je dois m'assurer que mon texte est en haut. Alors peut-être que je peux m'occuper du rembourrage dans ce cas. Donc, pour celui-ci, ce que je peux faire pour le rembourrage inférieur, je pourrais peut-être opter pour le 112. Et voilà, 168. Et pour celui-ci, dois-je le mettre à zéro ? Oui, je pense que cela fonctionne très bien. Il suffit donc de jouer avec les valeurs de remplissage. Jouez avec une valeur de marge c, où vous vous trouvez dans votre dessin. Alors maintenant, quand je clique sur l'aperçu, vous pouvez voir le nom complet et je clique ici, vais récupérer mes informations, mes informations e-mail. Et pour le message, vous pouvez peut-être taper quelque chose. Bonjour les gars. Comment allez-vous ? Mais avant de l'envoyer, je dois en fait connecter ce formulaire à l'intérieur de mon designer, comme je vous l'ai déjà expliqué. Vous pouvez y mettre l'e-mail de votre client et, par conséquent, il pourra réellement l' envoyer où vous le souhaitez. Alors, à quelle adresse e-mail ? Je pense toujours que ce bouton est peut-être trop fort. Donc si je clique dessus et que j'en vois 16, peut-être que si j'ajuste ce chiffre à huit, tout ira bien. Non. Non, je ne pense pas que ce sera le cas. Laissons donc les choses telles qu'elles sont là. Je pense que ça va fonctionner tel quel. Maintenant que nous l'avons créé, nous allons le réutiliser tout au long de notre conception. Ce que nous allons faire, c'est cliquer ici, créer un nouveau symbole et l'appeler, par exemple formulaire de contact. C'est parti, créez simplement, et nous avons maintenant le symbole du formulaire Contactez-nous. Nous pouvons revenir à l'exemple. Et maintenant, quand je clique sur l'aperçu, rien ne change vraiment, mais nous l'avons toujours là. De plus, lorsque je clique ici, vous pouvez voir que le rembourrage de 20 pixels à l'intérieur de notre conteneur le contient toujours à l'intérieur. Mais maintenant, quand j'ajuste cela, je devrai évidemment ajuster ces colonnes un peu plus tard, mais vous pouvez voir qu'elles répondent assez bien en mode responsive. Alors on y va. Maintenant, la section suivante que nous allons faire est la section avec la carte. Je vous verrai donc dans la prochaine vidéo où nous allons aborder cette question. 175. Section de carte: Passons maintenant à la carte. Et nous voici dans XD et vous pouvez simplement voir le contenu ici. Nous allons donc avoir ce contenu à gauche et à droite , comme nous le faisions précédemment avec la section supérieure. Ensuite, nous aurons ce texte à l'intérieur et l'adresse. Car l'adresse et l'icône seront les mêmes que celles que nous avons créées ici. Donc, si je sélectionne cela, vous pouvez voir que cela a une pile de 16, la distance entre les deux. Et évidemment, il y aura un espacement de 24, et ici, il y aura un espacement de 32, ici 24. Allons donc à l'intérieur de l'OLP et commençons à construire cette section. Voyons donc ce que nous pouvons faire ici, c'est aller dans le corps, appuyer sur Ctrl K, taper une section, puis revenir au concepteur, lui donner une classe de section. Lovely Control K div, bloc de division. Et pour cette section, étant donné que c'était le formulaire pour cette section, je vais demander pourquoi ce n'est pas le cas. Attends, attends, attends, attends, attends. Je pense lui donner une catégorie de section pour une raison quelconque. Non, peu importe. Et je vais taper quelque chose comme une carte. On y va. Maintenant, ce bloc de définition va être un conteneur. Et à l'intérieur de ce conteneur je vais lui donner un autre div, appelé map wrapper. On y va. Et pour cette section, je vais lui donner une marge, marge maximale de 200. Voilà, je peux donc le distinguer un peu. Maintenant, dans cette enveloppe cartographique, que je vais transformer en flexbox. Je vais mettre le contenu sur le site. Donc, en mettant div et ce bloc div, nous pouvons appeler quelque chose comme contenu de la carte ou quelque chose comme ça. Voyons donc où nous en sommes satisfaits, où nous sommes satisfaits. Et nommez simplement ce wrapper de cartes. Peut-être pourrions-nous le renommer en Where We are rapper, car nous aurons peut-être des cartes à différents endroits sur notre site Web plus tard. Alors laisse-le comme ça, vis comme ça. Assurez-vous donc que ces deux éléments sont centrés. Et ce que nous allons faire ici , c'est simplement ajouter une carte, pour que Control K saisisse la carte. Et voici une carte. Il va donc simplement ajouter votre carte à l'intérieur. Et comme j'ai déjà saisi ma clé API, vous allez obtenir votre clé API en créant votre compte Google. Si vous n'en avez pas déjà un, vous devez saisir les informations de votre carte de crédit. Nous allons maintenant être construits. Google doit simplement vérifier que vous êtes un être humain et que vous êtes une entreprise. Si vous le faites dans le cadre de votre propre entreprise, il est probablement judicieux de créer cette clé API, car vous allez la créer à nouveau pour vos clients. Mais si vous n'êtes pas une entreprise, assurez-vous que votre client crée ce compte, il suffit de saisir la clé API Google N qui vous indiquera pour la carte vous mènera à ce Google Cloud. Et comme je l' ai déjà expliqué, lorsque vous accédez aux paramètres ici, lorsque vous accédez aux paramètres ici, accédez aux paramètres du projet. Je peux aller ici ? Et voyons voir les intégrations. Allez, chargez, s'il vous plaît. Et voilà. Vous avez Google Optimize, puis Google Maps. Vous pouvez donc cliquer ici où il est indiqué clé API JavaScript de Google Maps. Et vous allez obtenir cette clé API que vous pouvez simplement copier-coller. Juste là. Vous pouvez appuyer sur Enregistrer et cette carte s'affichera. Mais encore une fois, il vaut mieux que vous, si vous le faites tout le temps, car il vous sera très simple de simplement copier et coller la clé API dans vos futurs projets et il vous suffit de changer le nom et votre adresse ultérieurement lorsque vous en aurez besoin. Ou votre client, s'il a besoin de la carte, il peut créer un compte. Ce sera gratuit pour eux. Il suffit de le saisir dans les informations de la carte de crédit Google puisse vérifier qu'il s'agit bien d'un être humain. Évidemment, s'ils commencent à avoir du trafic directement à partir de cette carte. Les gens prennent cette carte, cliquent dessus, accèdent à la carte et accèdent à la navigation, par exemple pour la voiture, pour la promenade ou autre, puis Google va parcourir cette carte et voir combien de visites font les entreprises ont et commencent à les facturer à la fin du cycle Je pense que c'est environ 200 visites ou 300 visites gratuites et puis elles vont commencer à les facturer comme ça. Voici donc notre carte Google, c'est notre clé API. Donc, ce que je vais faire, c'est sélectionner mon conteneur et sélectionner ma carte. On y va. Cliquez sur Sélectionner ici car je souhaite saisir l'adresse. Revenons donc à XD. Voici l'adresse de Belgrade, en Serbie. Et laisse-moi y retourner. Bien entendu, vous pouvez prendre l'adresse de votre choix. Nous avons donc ce présentateur et il mettra à jour cette adresse plus tard lorsque vous le regarderez en direct. Et vous pouvez l'adapter à la route, au terrain, à l'hybride satellite, mais je vais juste le laisser sur route. Alors voyons voir. Tu peux laisser ça comme ça. Vous pouvez zoomer si vous le souhaitez, mais laissons les choses comme ça par défaut. Donc, ce que nous pouvons faire ici, dans ce cas, c'est voir, peut-être que nous pouvons donner une largeur de contenu de 40 %. Comme ça. Nous allons simplement étendre notre carte et peut-être pouvons-nous lui donner une marge de 64, voyons voir. Peut-être. On y va. Et je pense que cela va bien améliorer notre carte. Mais ici, dans ce cas, nous avons les cartes les plus larges, donc 683 par défaut. Donc, si je vais ici sur ma carte, je peux évidemment ajouter la largeur maximale, par exemple 683, quelque chose comme ça. Et ça va juste pousser mon contenu comme ça. Il s'avère que la haute technologie peut être utilisée à 100 %, ce qui occupera 100 % de mon contenu ici. Mais comme je n' ai aucun contenu, je devrais probablement commencer à ajouter ce contenu. Alors cliquons ici et réinitialisons cela pour que nous puissions voir notre carte. Donc, en ce qui concerne le contenu, nous allons, par exemple mettre les titres H2. Tapez donc Control K dans le titre, sélectionnez notre H2. Allons-y et voyons ce que nous avons. Donc H2, dark Live. Et pour celui-ci, ce que je peux faire, c'est voir, peut-être pourquoi, pourquoi il ne conserve pas les paramètres. Je ne sais pas pourquoi ce qui se passe. Allons donc supprimer la classe, toutes les rubriques H2. Il conserve toujours la superficie pour quelque raison que ce soit. J'espère donc que vous rencontrez ce problème. Donc H2 et nous sélectionnons simplement ceci, donc 32. Et voyons où nous en sommes. Nous en sommes donc à 56. Donc 32,56, juste ici. Et voilà. Ce sera notre cap H2. Et stylisons ça pour qu'il soit trop foncé. Oui, il suit des cours dans toutes les rubriques H2, mais cela ne me montre pas que c'est important. Alors cliquons ici, pour savoir où nous en sommes, comme ça. Et puis en dessous, appuyons sur Ctrl K, saisissons le bloc de texte, donnez-lui une classe de bloc de texte, comme ceci. Et sélectionnons simplement copier nos textes, mettons-les dedans. On y va. Et maintenant, pour les distances, voyons ce que nous pouvons faire pour ce bloc de texte, je peux le mettre là où nous sommes. Pour une raison quelconque, il garde l'espacement de 20. Donnons-lui un espacement de 32 en fait dans ce cas. Donc, mais changez-le simplement pour qu'il y ait une situation où nous sommes endettés. Et au lieu de 20 torr, allons-y avec 32. On y va. Cela fait donc baisser les choses. Et en ce sens, ce que je peux faire, c'est un bloc de texte où nous sommes comme ça et où le bas devrait être 24 ou 32. Et voilà. Parce que si nous vous ramenons à mon design, vous pouvez voir qu'ici nous en avons 24 et ici nous en avons 32. Revenons donc à ici. Cela devrait en fait être 24, désolée pour ça. Cela devrait être 32. Nous allons bien maintenant. Donc, ce que je vais faire ensuite, c'est mettre un diblock Control K en tapant div, div block. Et le premier sera pour l'adresse, l'adresse à l'intérieur de ce bloc div. Ce que je vais faire, c'est saisir un autre bloc de contrôle div. Kate avait été divisée en blocs, et ce sera le titre, par exemple voyons voir, robe, titre comme ça. Et à l'intérieur de cela, appuyez sur Ctrl K, tapez dans l'image. Pour l'image, je vais choisir cette icône en forme d'épingle, qui sera, évidemment, vous pouvez utiliser la recherche, mais je ne veux pas vous embrouiller encore plus, est charmante. Et à l'intérieur du titre de cette adresse, je vais appuyer sur Ctrl K, taper dans le paragraphe et utiliser tous les paragraphes. Voyons voir, pour une raison ou une autre, cela n'a pas changé cela. Poppins 16, 24, et cette couleur doit être composée de trois paragraphes. Donc, comme je l'ai dit, pour une raison ou une autre, cela n'a pas modifié la dette. Alors allons-y. Alors allons-y avec une robe comme ça. Et ici, je vais ajouter l'icône de classe d'adresse. On y va. Et le titre de l'adresse. Nous allons les placer à l'intérieur de la flexbox, assurant qu'ils sont centrés. Et assurez-vous que nous verrons ce que nous pouvons faire ici. Pour cela. Pour une raison ou une autre, ils ne sont pas centrés. Voyons ce que nous pouvons faire ici. Cela ressemble à un paragraphe. Oui, c'est exact. Alors, passez à zéro. On y va. Parce que c'était le cas, nous remplaçons le paragraphe. Alors, où se trouve l'icône de l' adresse ? Donnez-lui simplement une marge de 16 sur le côté droit, car nous voulons simplement imiter notre design. J'ai cet espacement. Donc, si je sélectionne ceci, vous pouvez voir que la pile est à 16 pixels, comme nous l'avons fait ici. Donc, ce que je vais faire ensuite, c'est utiliser cette adresse. Et en fait, nous avons le titre, alors appuyez sur Ctrl K, tapez P pour le paragraphe. Et à l'intérieur de ce paragraphe, essayons tous les H1. On y va. Maintenant, il l'a conservé et il suffit de coller dans notre adresse un joli titre adressé. Voyons ce que nous pouvons faire ici. Nous sommes donc à une distance de 16, nous pouvons donc lui donner un rembourrage inférieur de 16. Titre donc adressé, rembourrage inférieur de 16, ce qui va légèrement faire baisser notre adresse. Sélectionnez ensuite notre adresse, appuyez deux fois sur Contrôle C, Contrôle V, Contrôle V. Charmant Et ici, ce que nous pouvons faire, c'est que le numéro du milieu devrait être composé de numéros de téléphone. Dupliquez donc le numéro de téléphone de la classe. Cet intérieur devrait dupliquer le titre du forum de la classe et vous débarrasser de cette copie de texte comme ça. Et cela devrait être dupliqué. Donc ça devrait être amusant. Charmant Allons-y et commençons à les remplacer. Donc ça devrait être amusant. Trouvons le téléphone où il se trouve. On y va. Donc, au lieu d'une adresse, il devrait y avoir un numéro de téléphone. Et au lieu de décès, ce devrait être plus 381-123-4567. Donc juste un nombre aléatoire. Et enfin, pour ce dernier, ce devrait être des heures d'ouverture, dupliquer le cours. Des heures d'ouverture comme ça. Et dans le cas de la dette, nous pouvons faire double emploi. Peut-être que nous pouvons l' appeler comme heures d'ouverture, titre, animation. Et encore une fois enfin, pour l'icône intérieure, au lieu d'une robe, dupliquez. Donnons-lui la classe d'horloge, l'icône de l' horloge, car c'est ce va y être présenté. Localisons-le ici. Voyons où il se trouve. Alors, icône de l'horloge, c'est parti. Et enfin, allons-y. Donc heures d'ouverture. Et ici, nous allons taper quelque chose comme du lundi au vendredi, de 14 h à 16 h. Oui. Je pense que ça va très bien fonctionner. Maintenant que vous l'avez fait, nous devons mettre l'espacement entre les deux. Donc, si je clique ici, vous pouvez voir que l'espacement est de 24, alors allons-y maintenant. L'adresse doit donc avoir une marge inférieure de 24. Le numéro de téléphone doit avoir une marge inférieure de 24. Et les heures d'ouverture devraient rester les mêmes. Maintenant, quand je sélectionne ma carte et que je la renomme en carte, oups. Renommez-la en main, notre carte principale. Essaie ça. On y va. Et maintenant, la hauteur peut être modifiée pour remplir ce contenu, ou elle peut être de 100 % pour remplir l'espace de ce contenu. Mais pour une raison ou une autre, cela n'a pas été rempli. Je ne comprends pas pourquoi. Revenons donc à la valeur par défaut et laissons-la s'appliquer. Ou nous pouvons retourner à XD et voir la hauteur de 507. Alors peut-être que nous pouvons ajuster cela. La carte principale devrait donc être 507. On y va. Et maintenant, il se remplit beaucoup plus bien. Donc, si je clique sur Aperçu très rapidement, il s'agit d'un aperçu cartographique générique, véritable carte sur les sites publiés. Nous devons donc publier notre site Web, soit un domaine en deux étapes, qui est celui-ci, soit deux domaines personnalisés, qui sont celui-ci, pour pouvoir voir l'emplacement, mais cela ne nous intéresse pas vraiment pour le moment. Cela va très bien fonctionner car nous l'avons déjà configuré dans Google et dans Webflow. Donc, ici, tout est comme il se doit, tout est correctement positionné. Tout fonctionne comme nous le voulions. Et ici, nous pouvons le régler à l'horizontale ou à la verticale. Vous pourrez voir à quoi cela ressemble plus tard pour Responsive. Donc tout fonctionne très bien. Voici donc notre carte. La dernière chose que je veux faire est de revenir ici où il est dit « symboles », «  créer un nouveau symbole ». Je vais l'appeler carte. Créez un symbole. C'est parti, et maintenant nous avons ce symbole. Et on y va. Une dernière chose que je pense que nous devons faire est d'aller de l'avant et de créer notre pied de page. Et je vous verrai dans la prochaine vidéo où nous allons faire exactement cela. 176. Section de pied: Très bien, nous allons maintenant créer ce pied de page et terminer notre page d'accueil. Plus tard dans la leçon suivante nous aborderons cette page de collection CMS, qui sera le point central de notre page. Mais pour l'instant, parlons simplement du pied de page lui-même. Donc, ce que je peux faire, c'est revenir à Webflow ici. Et nous venons de créer nos cartes. Nous allons donc sélectionner notre corps dans la section des épingles de type Control K. Et retournez voir le concepteur, donnez-lui une classe de section comme celle-ci. À l'intérieur de cette section, je vais placer le bloc div, que je vais appeler container un fichier animé. Et cette section sera Footer. Et il y aura une marge de 200 au sommet. Joli mélange. Et à l'intérieur du conteneur, je vais appuyer sur Control K pour ouvrir division et appeler ce rappeur de bas de page. Comme ça. Et à l'intérieur du footer rapper, ce que je peux faire, c'est mettre à mon image. Donc touche de contrôle, image. Pour mon image, je vais choisir mon logo, qui est celui-ci. Allez. Et Footer Wrapper contient juste l'image pour le moment. Et ce que je peux aussi faire, c'est mettre ce texte en bas, donc Ctrl K, taper P pour le paragraphe et hériter de tous les paragraphes. Cela fonctionne très bien maintenant, ce qui est très agréable. Permettez-moi de copier ce texte, le placer ici. Et donnons-lui une classe de p. Voyons p , la couleur du corps, p centré. Soyez centré pour être centré sur le paragraphe. Et je vais juste cliquer ici pour centrer ce texte ci-dessous. Mais j'ai également besoin de ces quatre icônes et de la navigation depuis la barre de navigation. Je vais donc tricher un peu. Il suffit donc d'ouvrir votre barre de navigation et de trouver votre contenant. Et voyons le menu de navigation. Je peux appuyer sur Control C pour le copier à partir d'ici, je peux simplement revenir à mon instance, revenir à mon pied de page, y sauter et le coller juste au-dessus du paragraphe lui-même. Vous pouvez donc voir, peut-être que je peux y revenir et ajuster ici. Alors voyons voir. Au lieu du menu de navigation, je peux le renommer classe en éléments de navigation. On y va. Et je vais les prendre tous et peut-être les placer en bas. Essayons ça encore une fois. Alors appuyez sur Control C, revenez ici, contrôlez V, ça ne marche pas. Revenons donc ici et voyons ce que nous pouvons faire, car j' essaie toujours de m'y retrouver. Nous avons donc une classe de liens de navigation. Revenons donc ici, et je vais appuyer sur Ctrl K pour transformer ce texte en lien texte. Essayons maintenant avec Nav Link. Maintenant clignote. On y va. Et ça va juste nous donner le même texte qu'avant. Le premier sera celui des voitures. On y va. Et mettons-le dans un bloc div, div. Mettez-y le texte appelé bloc div. Disons que la navigation relie le pied de page. Liens en bas de page. On y va. Et dupliquons-le encore deux fois. Donc, Control C, Control V, Control V, c'est parti. Ce lien de navigation devrait avoir une marge de 24, je pense donc qu'il faut vérifier très rapidement. Maintenant, le lien de navigation des articles. Il a en fait un rembourrage de 20. Et ce dernier. D'accord ? Passons donc à la dette. Donc, si je reviens à ce lien de navigation, donnons-lui le jumelage de 20 ici. Donc ils ont tous une paire de 20, sympa. Et sur le côté gauche également. Charmant. Nous n'en avons donc même pas besoin sur le côté gauche. Alors allons-y avec zéro et celui-ci, je vais juste lui donner une classe de combinaison du dernier et du dernier, et cela supprimera cette paire de zéros. Donc, des voitures, nous allons avoir des prêts ici. Et enfin, nous allons devoir nous contacter, nous contacter. On y va. Maintenant que nous l'avons, positionnons-le ici. Une dernière chose que je veux faire est d'appuyer sur Control K en tapant div. Et cette division, je vais appeler des icônes sociales comme ça. Et à l'intérieur de cela, je vais appuyer sur Control K pour taper sur l'image. Et puis peut-être que je pourrai le copier tout de suite. Donc Control C, Control V, Control V, Control V, Control V, car nous savons que nous en avons quatre. Et tous les quatre devraient vraiment y aller. Donc, non, celui-ci n'a pas fait d'erreur. Je devrais copier celui-ci. Contrôle C, contrôle V, contrôle V. C' est parti. Et je vais mettre une flexbox et sur l'image, donnons ça, voyons voir Facebook. Et voyons ce que nous avons dans le contenu lui-même. Nous en avons 24. Revenons donc ici et donnons-lui une marge de 20 pour que le prochain soit Twitter. Et donnons-lui une marge de 20 pour que le prochain soit YouTube, marge de 24. Et ce dernier devrait être LinkedIn, je pense. Et il ne devrait pas y avoir de marges. À cette occasion. Pour Facebook, cliquez ici, puis choisissez l'image et laissez-moi choisir l'icône Facebook , qui est charmante celle-ci. Ensuite, pour celui-ci, nous avons Twitter. Choisissons donc Twitter. Pour celui-ci, nous avons YouTube. C'est parti. Et enfin, pour celui-ci, nous avons LinkedIn. Localisons donc notre LinkedIn. C'est parti. Maintenant que nous avons toutes nos icônes, je vais les placer dans un autre div afin de les espacer uniformément. Donnons-lui donc un contrôle. K tape encore une fois div. Il s'agira du contenu du pied de page. Et à l'intérieur du contenu de ce pied de page, positionnons ces deux éléments comme pour nous assurer qu'ils sont là. Sélectionnez le contenu du pied de page, activez le flux, puis activez-le pour que je puisse les répartir uniformément, comme ça. Et les icônes sociales, ce que nous pouvons faire, c'est je pense qu'elles sont un peu grandes. Donc, pour une raison quelconque, ils ont la largeur maximale. Parce que pour toutes les images, donc si je tape zéro, voyons voir, les largeurs devraient être égales à zéro. Peut-être que la meilleure option est d'avoir la hauteur, car ils auront la même hauteur de 24. Revenons donc sur celui-ci. Comme ça. La hauteur doit donc être de 24 pixels. Est-ce que c'est le cas ? Est-ce exact ? Oui, bonjour à 24 ans. Sélectionnez celui-ci. La hauteur doit être de 24 px. Vous pouvez donc simplement saisir ce que vous voulez dans Webflow. Donc 24 px à l'intérieur de la hauteur et vous pouvez voir comment il les ajuste facilement. Donc 24 p., c'est parti. Et maintenant, positionnons ceci au centre, comme ceci. Et nous y voilà. Maintenant, cela ressemble à ce qu'il se doit. J'en suis content. Et maintenant, enfin, nous pouvons sélectionner notre pied de page, transformer en une zone flexible et nous assurer qu'il est vertical cette fois. Et assurez-vous de centrer tous nos articles. On y va. Et maintenant, ce que je peux faire, c'est peut-être essayer. Sachez, voyons ce que nous pouvons faire ici. Nous pouvons peut-être ajuster certains de ces éléments. Alors voyons voir. Peut-être pouvons-nous lui donner une largeur de 100 %. Cela ne fonctionne pas. En fait, non, débarrassons-nous de celui-ci. Disons simplement qu'il faut s'en tenir à la suppression et à l'image. Donc oui, en fait, nous pouvons mettre la grille, mais avant de faire, ce dont j'ai besoin c'est de la remplacer par le lien. Donc, ce que je peux faire, c'est venir ici et utiliser la marque parce que la marque est en fait notre logo, tapez Control C. Je vais remplacer mon image ici, celle de la marque que je viens de prendre. Cliquez donc sur Supprimer, car une fois que nous aurons corrigé la marque, elle affichera un lien vers une partie spécifique de la page. Donc, voici ce que je peux faire pour mon emballage de pied de page, au lieu du contenu de ce pied de page, comme je viens de vous le montrer, ce que je peux faire, c'est le mettre à l'extérieur. Comme ça. On y va. Et maintenant, nous pouvons créer notre grille. ce faire, il suffit de sélectionner l'enveloppe du pied de page et de créer notre grille. Et ce que je vais faire ici, c'est peut-être aussi. Oui, nous pouvons avoir deux colonnes, mais nous pouvons avoir par exemple quatre lignes. Donc, la première sera que le logo occupera toute la ligne. Ces deux-là vont avoir le leur, et celui-ci aura son propre type de C3, je pense que tout ira bien. Prenez une distance plus longue, sur toute la largeur de celle-ci. Mais non, c'est comme si la marque s'étendait sur toute la largeur de la colonne elle-même. Assurez-vous que c'est au centre comme ça. Alors ces deux-là iront bien parce qu'ils absorbent, chacun prend cette taille, sauf celui-ci. Devrait s'aligner vers la droite, comme ça. Et enfin, nous avons les centres de paragraphe. Passons donc à la lumière ici. Et donnons-lui simplement le pied de page central du paragraphe. Et peut-être pouvons-nous lui donner cette marge inférieure de 64. Peste noire. Cela va donc pousser encore plus notre contenu. Enfin, ce que je veux faire, c'est peut-être les espacer un peu plus. Nous avons donc, voyons voir, 64, je crois 69, mais allons-y avec 64. Et ici, nous en avons 64 également. Faisons-le donc rapidement. Donc, voici ce que je peux faire, c'est peut-être opter pour le pied de page du logo de la marque. Et je vais sauter dans la barre de navigation. Au lieu d'une marque. Je vais l'appeler logo. Juste un logo. D'accord. Et en venant ici. Pour ce dossier de logos, je vais lui donner la marge inférieure de 64. Charmant. Et voyons ce que nous pouvons faire ici. Peut-être que les icônes sociales sont des liens de navigation en bas de page, ou mieux encore. Nous pouvons suivre le paragraphe et lui donner la marge supérieure de 64, ce qui permettra simplement de les garder sans surveillance et de les retrouver. Nous avons donc notre pied de page et c'est parti. Tout a l'air magnifique. Tout semble être ce que nous avons l'intention de faire. Donc, une dernière chose à faire ici est de les transformer en états de survol. Donc, pour ce faire, je vais essayer de m'endetter. Nous survolons donc. Il me suffit de remplacer la couleur par celle-ci. Mais maintenant, il ne s'agit que de remplacements et de contenu. Nous y reviendrons un peu plus tard. Mais pour l'instant, je vais juste le laisser tel quel. Parce que comme vous l'avez vu avec la barre de navigation, vous pouvez toujours revenir en arrière. Et ici, je vais créer un nouveau symbole et l'appeler pied de page comme ça. Et nous y voilà. Une dernière chose que je voudrais faire est de donner à cette section une marge maximale de 20 points. On y va. C'est donc très joli pour la rentrée. Et nous y voilà. L'ensemble de notre site Web est maintenant terminé. La page d'accueil est donc terminée. Je sais que je divague beaucoup, mais j' essaie juste de vous donner beaucoup de détails à retenir, car il vous sera beaucoup plus facile de vous y retrouver plus tard. Nous avons donc ici la voiture, c'est des prêts et contactez-nous. avons ici pour une raison ou une autre, cela change cela. va donc falloir que j' y retourne et que j'adapte ce H1 car ça me rend dingue. Tout ça a l'air bien. Juste cela devra être ajusté une fois de plus. Ça a l'air bien. Ça a l'air bien. Ça a l'air bien. Ça a l'air bien. On y va. Nous devons donc ajuster chacun d'entre eux et nous devons ajuster ceux-ci. Alors faisons-le. Tout d'abord, sélectionnons celui-ci. Nous avons donc trois cartes noires, des cartes. On y va. Et sélectionnez celui-ci, ajoutez une carte, des cartes. Donc, si celle-ci annonce des cartes, et que cette voiture bleue en contient 160 ici, donc 16, et que cette voiture, voiture, elle devrait également en avoir 16. On y va. Maintenant, c'est réglé et les finalistes s'occupent de celui-ci. Donc, un héros, pour une raison ou une autre, il se transforme en Poppins, gras 64 couleurs, c'est celui-ci. Voyons juste l'espacement. Ici. C'est 86. Revenons donc à notre héros. 86 devraient être là. On y va. Et maintenant, il semble que cela se passe comme il se doit. Alors maintenant, ça a l'air bien. L'espacement semble bon ici et là. Et ici. C'est une bonne chose. C'est une bonne chose. Encore une fois, il s'affichera une fois qu'il sera publié et que le pied de page sera comme il se doit. Alors on y va. Notre page d'accueil est terminée. Comme je l'ai dit, résumons en cliquant ici. Ce que nous avons fait jusqu'à présent, c'est que nous avons recréé la page d'accueil qui sera beaucoup plus simple à partir de là, car la même chose que dans XD. Une fois que nous l'avons conçu, nous pouvons copier et coller ces symboles sur toutes nos pages. Et nous pouvons gérer et commencer à créer de manière beaucoup plus dynamique, beaucoup plus rapidement. Je vous verrai donc dans la prochaine vidéo lorsque nous en parlerons ici même, à savoir le CMS. Cela va être extrêmement compliqué de commencer, mais en fait, ce n'est pas trop compliqué du tout une fois que vous l'avez maîtrisé, peu comme un Webflow lui-même. Je vous verrai donc dans la prochaine vidéo et nous allons commencer par le CMS. 177. Créer une collection CMS: Dans cette vidéo, nous allons parler collections CMS dans Webflow. Et je vais vous montrer comment en créer un, en particulier pour ce projet, et comment connecter tous les éléments de la collection CMS de votre projet. Commençons donc. Et nous voici dans Webflow et c'est ce que nous avons obtenu jusqu'à présent. Donc, si nous rafraîchissons un peu notre mémoire, maintenant , nous avons la navigation, nous avons notre bouton, nous avons cette section avec l'image. Nous avons ces cartes ici. Ensuite, nous avons ce que nous proposons avec ces icônes sur le côté. Nos avantages sont beaux, puis nous avons un formulaire de contact qui fonctionne. Vous pouvez saisir des messages et vous pouvez avoir le bouton Envoyer un message ici. Ensuite, nous avons la carte et je vous ai montré comment intégrer la carte à l'intérieur. Et enfin, nous avons le pied de page en bas. Alors, comment s'y prendre pour inclure la collection CMS ? Nous allons cliquer ici où il est écrit Collection CMS, cliquez ici. Donc, avant de commencer avec toutes ces informations, il convient de se rappeler ce que nous devons réellement y inclure. Nous avons donc ici notre fichier XD et nous devrions créer la page du cours. Mais avant cela, car ces trois cartes et ces huit cartes seront toutes connectées à notre collection CMS. Et cela signifie essentiellement qu'il va extraire toutes ces données de la collection du CMS. Et si je vous le montre très rapidement, cela va être nommé, ce sera le prix, ce sera l'année. Ce sera le nombre de kilomètres parcourus par la voiture. Il va extraire toutes ces informations, créer contenu dynamique et afficher tout cela dans notre collection de CMS. Ensuite, nous allons créer cette page. Et cette page va en fait être consacrée aux détails de la voiture. Mais avant de saisir tous ces détails, nous devons d'abord créer la collection CMS, puis pointer les éléments vers cette collection CMS et les relier tous ensemble. Nous allons donc commencer par cette page et nous allons extraire les informations de cette page. Donc, pour nous aider à obtenir ce dont nous avons réellement besoin ici, laissez-moi vérifier rapidement si je l'ai connecté. Donc super voiture, SUV et berline. Voici donc les icônes. Si je reviens à notre Webflow, revenez à nos articles très rapidement et juste pour vérifier si nous les avons. Donc oui, SUV, insuline Supercar. Si nous revenons à mon CMS, comme je l'ai dit, cliquez ici. Donc, tout d'abord, nous devons créer la collection CMS elle-même. Donc nom de la collection, nous allons l'appeler voitures, par exemple, et ici nous avons des champs de collection. Maintenant, le nom et le slug seront inclus en tant que base. Et vous pouvez voir que l'URL de la collection est celle des voitures. Vous pouvez donc voir la page website.com Four Slash Cars pour la page Slash Cart. Et c'est ce que nous allons inclure à l'intérieur. Donc, tout d'abord nous allons inclure un champ. Et vous pouvez ajouter toutes sortes de champs différents et pour ne pas perdre trop de temps avec cette leçon, vous pouvez survoler l'un de ces champs pour en savoir plus. Et vous pouvez voir à travers ces leçons quelles sont certaines d'entre elles. Nous allons utiliser du texte brut, peut-être qu'une image en texte enrichi et plusieurs images sont ce que nous allons utiliser ici. Mais vous pouvez voir que vous pouvez avoir des liens, des e-mails, des numéros de téléphone et des numéros, date et une heure, des sélecteurs, des options de couleur. Donc, par exemple, cette liste déroulante d'options est idéale si vous avez plusieurs sélections ou catégories différentes ou quelque chose comme ça. Commençons donc par le texte brut. Et je vais donner un nom à ce texte. Et appelons-le peut-être Carney. Le nom de la voiture, quelque chose comme ça. Je vais appuyer sur le champ Enregistrer. Ensuite, je vais, voyons voir, ajouter un nouveau champ, du texte brut. Je vais appeler ça le prix de la voiture. On y va. Appuyez sur le champ Enregistrer. Ensuite, le champ suivant sera, voyons voir, image. Et ce sera l'image d' une carte de voiture. Appuyez sur Enregistrer le champ. Et vous pouvez déjà voir ici, sur le côté droit, l'aperçu qui est en cours de construction. Et si je clique ici, ce dont nous avons réellement besoin et ce que nous créons , c'est cette image de carte de voiture. Il peut donc extraire cette image de la collection d'images que nous créons ici et l'afficher où nous voulons l'afficher. Donc, encore une fois, nous avons le nom actuel, nous avons le prix de la voiture et voici l'image de la voiture. Concentrons-nous donc maintenant sur tous ces autres détails dont nous disposons. Revenons à Webflow. Donc, image de la carte de voiture, ce que nous pouvons faire ensuite, c'est inclure une autre image. Passons donc à l'image. Et ici, je vais l'appeler, par exemple, étiquette de type de voiture. Et cette étiquette est la véritable icône qui va apparaître ici. Nous avons donc ici l'icône du SUV. Alors, appuyons sur Enregistrer le champ. Maintenant, en dessous, nous pouvons mettre le texte brut et celui-ci appelé type de voiture. Type de voiture, il dirait terrain. Ensuite, en dessous, nous pouvons en ajouter une autre, appelée année de production. Il dirait Phil, je veux que la voiture soit produite, en ajouterait une autre. Et disons le kilométrage, les kilomètres ou quoi que ce soit d'autre, choisissez-en un autre. Et ce sera du type à essence. Cliquez sur Enregistrer. Et si je vous ramène à notre document XD, ce sont en fait ceux-ci. Donc, kilométrage, transmission de terrain, type de moteur, portes, sièges, garantie. Tout cela sera donc automatiquement mis à jour sur notre site Web. Le dernier était donc type de carburant plutôt que la transmission, la transmission. Et ici, vous pouvez avoir toutes sortes de personnages différents. Vous pouvez limiter le nombre de caractères si ce champ est obligatoire. Cela va donc mettre l' étoile un peu comme celle-ci. Et nous allons simplement appuyer sur le champ Enregistrer parce que ce sera assez simple. Le type de moteur est le suivant. Oups, désolée. Donc des textes simples et du type de gin. Et voilà. La prochaine sera, voyons voir, les portes. Combien de portes possède la voiture ? La prochaine sera, voyons voir, les sièges. Et voilà. Enregistrer le champ. La prochaine sera, voyons voir, la garantie. Et maintenant, les dettes sont réglées. Ce que nous allons faire ensuite, c'est mettre le texte enrichi parce que je souhaite inclure la description du véhicule, qui est celle-ci. Nous en avons donc terminé avec cette section et nous en avons terminé avec ces informations. Vous pouvez donc voir que Car Year va arriver à partir d'ici et la montrer ici également. Le kilométrage sera affiché ici et ici. Le nom actuel et le prix de la voiture sont indiqués ici et ici ainsi qu'ici et ici. Et l'image de la voiture va s'afficher ici. Et nous avons également inclus le SUV, qui est le type de voiture, et l'icône qui accompagne le type de voiture lui-même. Ici, nous allons inclure un texte enrichi et je vais appeler cette description du véhicule pour ce cours. Je vais juste utiliser la même description, les mêmes données, mais il est évident que vos clients incluront des informations différentes, évidemment en fonction de la voiture. Allons maintenant plus loin et ajoutons de nouveaux champs. Et vous pouvez voir qu'il nous en reste 16 sur 30. Donc, Web for vous limite à 30. Passons donc à zéro à 100 km/h. C'est la vitesse à laquelle la voiture atteindra cette vitesse. Incluons les voyelles, par exemple, vous pouvez inclure toutes sortes d'informations différentes. Je suis juste d'accord avec ça. Ce sera à toute vitesse. Et si je vous ramène à XD, nous utilisons en fait ces informations ici même. Donc, tout en étant puissant, il toutes sortes de choses différentes. La dernière étape était donc la vitesse maximale. Le prochain est le pouvoir. Et voilà. Cliquez sur Enregistrer dans un nouveau fichier. Voyons les cylindres. Et évidemment, pour les voitures électriques il suffit d'écrire quelque chose comme un A. Donc, ce sont des cylindres. C'est Torque. Devrait dire terrain. Au nouveau. Ce sera de la hauteur. Enregistrez le nouveau. Ce sera du poids. Cliquez sur Enregistrer, ajoutez-en un nouveau. Cela va être lié. Lié. Voyons si nous l'avons fait, accord, oui, nous l'avons fait. Excellent travail et ajoutez-en un nouveau. Ce sera de l'espace de démarrage. Espace pour le coffre. Voyons voir. Nouveau. Nous allons dire empattement. Dites « terrain ». Je sais que c'est ennuyeux, mais c'est essentiellement ce que vous allez faire pour vos clients. Nous allons donc nous baser et la prochaine étape consiste à charger des poids. Et en fonction du projet en question et de ce sur quoi vous travaillez, vous allez ajouter les différentes informations ici et là. Alors voyons voir. Nous allons inclure le dernier poids de chargement. Le point suivant est la largeur. Donc largeur. Ensuite, nous inclurons la capacité du réservoir de carburant. Enfin, ce que nous ferons, c'est peut-être en réduire certains. Alors peut-être en chargeant des poids, je pourrais m'en débarrasser ou quelque chose comme ça. Je ne suis pas vraiment sûr car il me reste deux champs et il m'en faut trois de plus. Donc, si vous cliquez sur Ajouter un champ, ce que je vais inclure, c'est l'image. Et appelons-le Car Hero. Image. Cliquez sur Enregistrer. Et si nous prenons XD, c'est cette image qui deviendra notre image de héros automobile. C'est ce qui va réellement déclencher la véritable lightbox. Toutes ces images seront connectées à l'intérieur de la boîte à lumière, mais cela ne fera que la déclencher. Voyons donc de quel type d' informations nous pouvons nous débarrasser. Parce que si je reviens ici, je dois ajouter un champ supplémentaire pour l'image multiple. Appelons-la Car Gallery One. Et voilà. Et vous pouvez voir que nous n'avons plus de champs, mais nous avons toujours besoin que le champ soit inclus. Je peux donc me débarrasser de cette description du véhicule ou de l'un de ces détails. Voyons donc ce que nous pouvons éliminer ici. Alors peut-être que nous pouvons nous débarrasser du poids de chargement. Débarrassons-nous de celui-ci, car l'espace de coffre est essentiellement ce qui indique ce poids de chargement après tout. Donc, quel est le poids de votre botte, c'est ce que vous pouvez mettre à l'intérieur. Et évidemment, vous pouvez mettre toutes ces informations plus tard si vous le souhaitez. Et nous allons le mettre et votre client pourra ajouter manuellement pour chaque page qu'il crée. Donc, comme nous parlons ici pour un petit projet, fois qu'ils ont ajouté une page, ils peuvent y accéder manuellement et ajouter la page. Parce qu'une fois de plus, nous parlons d'un petit lot de cartes. Dans ce cas, ils n' ont que huit voitures à vendre. Cela va donc être très facile pour eux. Sinon, vous pouvez contourner ce problème en vérifiant simplement ce que nous avons éliminé de la capacité, je pense, du poids de chargement. Alors laisse-moi y retourner. Permettez-moi de cliquer sur Enregistrer à ce sujet et de trouver le poids de chargement, qui est celui-ci. Cliquez ici, puis cliquez sur Supprimer. On y va. Et maintenant, il nous en reste un. Alors cliquez ici, plusieurs images, voiture, galerie aussi. Et voilà. Alors maintenant, à quoi ça va ressembler, ça va être l'image d'un héros, donc l'image numéro un, puis 234 et ça va être ou peut-être cinq, puis 678. Je dois le faire pour des raisons de mise en page car il s'agit d'une sorte de bogue de flux de travail. Mon ami et moi l'avons en quelque sorte terminé. Et voici un gourou du Webflow à mon avis, car il le fait depuis des années et des années. Donc, en gros, ce qui se passe dans Webflow, c'est qu'il va me montrer les huit images. Vous voudrez peut-être les plafonner. Il n'est pas vraiment facile de connecter ces images via une boîte à lumière. Ainsi, lorsque quelqu'un clique sur l'une des images, la boîte lumineuse s' ouvre et les huit images apparaissent. Donc, si vous utilisez cette méthode, il est préférable de savoir quoi faire. Donc, dans ce cas, nous allons faire parce que nous avons huit images pour chaque voiture. De toute évidence, votre client peut avoir beaucoup plus d'images. Donc, dans ce cas, tout d' abord, si nous regardons ici, l'image actuelle du héros sera celle-ci. Donc, l'image numéro un. Ensuite, pour la prochaine, qui sera, voyons voir, celle-ci. Donc, la première galerie Carrier, laquelle nous allons inclure nos images, 234,5. Et puis nous allons en inclure un autre et le masquer. Il sera toujours là, mais nous allons le cacher et ils iront dans cette galerie. Les images restantes y seront donc destinées pour votre projet particulier. Si vous avez par exemple 40 images différentes, vous pouvez mettre les images restantes. Donc, les cinq premiers, c' est le numéro 12345. Donc cinq images au total. Ensuite, il suffit de placer les images restantes dans cette galerie de voitures, de les connecter toutes et elles apparaîtront à l'intérieur de la boîte à lumière. Et je vais vous le montrer dans un instant. Mais en gros, nous en avons terminé. Enfin, je sais que c'était une leçon ennuyeuse, mais que pouvez-vous y faire ? C'est ce que vous devez faire avec les leçons du CMS. N'oubliez donc pas que nous avons baptisé nos voitures de collection. Ainsi, lorsque je clique sur Créer une collection, vous pouvez voir que vous êtes sur le point de fermer cette collection. Enregistrez maintenant les modifications. Souhaitez-vous enregistrer ces modifications ? Oui, enregistrez les modifications. Et maintenant, notre collection a été créée. Cependant, nous n' avons aucun article. Et vous pouvez voir que le Webflow est intelligent parce que j'appelle mes voitures de collection. Il me demande de faire une nouvelle voiture, d'en créer une nouvelle. Je peux donc le faire dès maintenant. Je peux cliquer sur Nouvelle voiture et lui donner un nom afin de pouvoir simplement copier les informations que j'ai créées précédemment. Imaginons cet ouragan Lamborghini et vous verrez à quoi il ressemblera sur website.com Slash Cars, Lamborghini, Horeca. Nous avons donc un nom personnalisé. Le nom de la voiture sera donc ouragan. Le prix sera indiqué sur cette image de carte unique. Laissez-moi vous montrer à quoi vont ressembler les images. C'est le pli dans lequel vous allez entrer. Chacun d'eux possède évidemment toutes ces images. Nous allons avoir besoin du chiffre trois pour cet exemple particulier. Donc, glisser-déposer l'image à l'intérieur étiquette du type de voiture est ce que nous devons glisser-déposer depuis notre dossier. Donc, tous ces actifs que vous avez exportés précédemment, si vous vous en souvenez. Alors voyons voir. C'est une supercar, donc tapez S, voici l'icône de la supercar. Je vais juste le glisser et le déposer en place ici. On y va. Passons maintenant aux champs pour que le type de carte soit super voiture. C'est évidemment ce que votre client va créer à chaque fois. Ainsi, lorsqu'ils cliquent sur une nouvelle carte, comme vous l'avez vu ici, tous ces champs les attendent. Il leur suffit de poursuivre et de saisir des informations. Et dans la majorité des cas, vous allez obtenir ces informations auprès de votre client. Et je vais vous montrer notre site Web dans une seconde où j'ai obtenu la majorité de ces informations. De toute évidence, tout cela est de notoriété publique et vous pouvez évidemment le trouver en ligne. Mais si vous ne le pouvez pas, il existe ces sites Web qui vous seront d'une grande aide. Il suffit donc de coller du texte. Et comme je l'ai dit, ce texte sera le même pour toutes les voitures , et je vais le créer. Il vous suffit donc de copier et coller ces informations ici. Laisse-moi ouvrir ça ici. Donc, comme je l'ai dit, la puissance maximale , pour les cylindres, voitures qui fonctionnent sur batteries n'en ont évidemment pas. Donc, vous allez mettre NA par exemple et je vais le montrer un peu plus tard également. Tellement lié, vous y voilà. La capacité en litres sera là, nous irons, poids de chargement. Oups. Nous allons donc baser l'espace de démarrage. Oups, ça m'a toujours manqué. Poids de chargement de l'espace. Donc, sans poids de chargement plutôt que largeur. Et enfin, la capacité du réservoir de carburant. On y va. Ensuite, enfin, nous arrivons à cette section que nous venons de créer. Donc, ce que nous allons faire ici c'est que si je vous ramène à XD, nous avons cette image numéro un. C'est donc ce que nous allons créer ici même. Permettez-moi donc de vous ramener à mes images. Et commodément, ils portent tous le nom ouragan 123 et ainsi de suite. Nous avons donc le héros numéro un, alors glissez-le et déposez-le à l'intérieur. Ensuite, nous avons la galerie de voitures. Donc, si je vous ramène à XD une fois de plus, nous avons une image de 234,5. C'est ce que vous allez inclure ici. Donc 234,5 vont aller ici, puis les images restantes vont aller ici. Donc, en gros, 67,8. Comme je l'ai dit, cela sera masqué sur la page, mais il sera toujours connecté. Et en gros, c'est tout. Nous avons créé notre première voiture. De toute évidence, nous ne pouvons pas encore le voir, nous devons donc le connecter. Nous y reviendrons plus tard, mais permettez-moi de cliquer sur Créer dès maintenant. Et il va créer notre première voiture. Parce que nous avons huit voitures. Je vais maintenant m'en aller, créer les sept voitures restantes, puis revenir vers vous. Mais en gros, je vais faire la même chose que je vous ai montrée ici. Donc, ce que nous pouvons faire ensuite , c'est peut-être pour l'escalade de Cadillac. Vous pouvez donc voir, recréer cet ouragan. Quand je clique sur une nouvelle voiture, il y aura toujours tout ça, tous les champs que nous avons créés Il ne me reste plus qu' à entrer mon nom puis mon prix, c'est l'image de la carte de voiture fournie par mon client. Revenez simplement à mon dossier ici, localisez mon escalade. Je vais donc utiliser l'image numéro trois pour cet exemple. Glissez-le et déposez-le ici, et le tour est joué. Permettez-moi donc d'y revenir et créer les cartes restantes. Je vous recontacterai lors de la prochaine leçon. 178. Utiliser la collection CMS: Très bien, nous y voilà. Et j'ai créé nos huit voitures. Et si je les feuillette très rapidement pour que tu puisses voir la distance ou marcher. Donc, exactement la même configuration que celle que j'ai mentionnée, c'est exactement la même et elle restera exactement la même, comme vous le voyez ici. Si nous vous emmenons simplement tester le modèle X, par exemple parce qu'il s'agit d'une voiture électrique. Vous pouvez voir, par exemple, que pour les vœux, il n'a évidemment pas de valve. Donc des NaN pour des cylindres parce qu'il n'a pas juste un A. Donc c'est comme ça que j'ai traité ça. Et maintenant, nous avons huit voitures, toutes remplies d'informations une fois de plus, et vous l'avez vu avec les images qui vous sont fournies. Vous pouvez simplement mettre les images, comme je l'ai mentionné. Passons donc rapidement en revue cette même McLaren, encore une fois, la même histoire. Donc, pour l'image du héros de la voiture, mettre l'image numéro un, puis les images 234,5, elles sont toutes étiquetées. Et pour cette galerie finale, qui contient plusieurs images 67,8. Maintenant que nous avons toutes ces informations, que pouvons-nous y faire ? Alors, cliquons sur Enregistrer les modifications. Cela a donc économisé. Donc, si je reviens à ma collection de CMS, vous pouvez voir que nous avons tous ces changements. Mais si nous passons aux pages, disons aux pages, puis à notre page d'accueil, car c'est la seule page que nous avons. Et ce que nous pouvons faire ici, c'est que je vais saisir les informations ici. Nous avons donc ici cet emballage de cartes de voiture. Et parce que c'est une simple grille, et si je clique ici, les distances entre elles sont de 32. Nous allons donc le recréer rapidement. Donc, ce que je dois faire, c'est où sont mes éléments ? Vous pouvez voir que nous avons les listes de collections. Donc, ce que je peux faire, c'est cliquer sur la liste des collections, faire glisser et la déposer juste dessous de ma collection de voitures exclusive, et la voilà complètement vide. Donc, ce que je peux faire, c'est double-cliquer pour connecter une collection. Vous pouvez double-cliquer dessus, ou vous pouvez cliquer ici où il est indiqué source. Et cette fenêtre de dialogue va apparaître. Il vous suffit de cliquer ici. Et avec les collections CMS, nous n'avons que des voitures. Alors regardez ce qui se passe maintenant quand je le fais. Lorsque je clique sur des voitures, il extrait les informations provenant de tous ces détails que nous collectons. Donc, ce que je vais faire ensuite c'est simplement le laisser là. Et disons que si je l'ouvre, vous pouvez voir que nous avons la liste des collections et que je vais lui donner un nom, appeler collection de voitures, une liste juste pour que nous sachions que ce sont les voitures qui se trouvent à l'intérieur. Et quand j'ouvre l'intérieur, vous pouvez voir que nous avons enfin des objets de collection. Donc, à l'intérieur de cet objet de collection, je vais prendre l'une de ces cartes, appuyer simplement sur Control C, sauter dans l'objet de collection de voitures et appuyer sur Control V. Et vous pouvez voir, évidemment, il va coller les informations que j'ai incluses dedans. Et cela ressemble exactement à tout cela car nous ne lui avons toujours pas dit par quoi il devait tirer. Allons jusqu'au sommet. Et ce que nous pouvons faire en fait c'est pour la liste de collecte ou même pour le contenant, ce que nous pouvons faire, voyons voir. Pour la liste des collections de voitures, permettez-moi de créer cette grille. Donc, lorsque je clique ici, je peux inclure l'espacement de 32 liquides, ajouter une autre colonne, puis je vais supprimer cette ligne. ne nous en restera donc que trois, comme nous l'avons fait sur la rangée juste en dessous. Et parce que nous n'en avons pas besoin, car nous avons déjà inclus la carte de voiture à l'intérieur, qui a déjà un effet de survol. Vous pouvez voir qu'il hérite d'un sélecteur. Si je clique ici, vous pouvez voir que c'est la carte de voiture. Donc, lorsque je clique sur l' aperçu ici, vous pouvez voir que mes effets de survol fonctionnent toujours. Donc, en gros, l'emballage des cartes à jeter n'a plus besoin d'être là. Il suffit donc de cliquer sur Supprimer et de s'en débarrasser. Et pour la liste des collections de voitures, rappeur, ce que je vais faire dans ce cas, c'est la donner, par exemple je ne veux pas lui donner de cours. Ce que je vais faire, c'est lui donner cette marge maximale de 64 points. Et ça va juste le faire baisser un peu. Donc, pour la liste des collections de voitures, dans ce cas, je vais montrer et ajouter une classe combinée de, disons maison. Juste pour que nous sachions que nous sommes sur la page d'accueil, par exemple , mais que je peux y aller, c'est aller dans les paramètres. Et si je sélectionne, voyons voir. Je ne sais pas, on peut les filtrer , on peut faire n'importe quoi. Mais dans ce cas, ce que je vais faire, c'est les connecter d'abord. Ainsi, lorsque vous sélectionnez l'article, vous avez ce bouton et vous pouvez voir Obtenir une image de voitures, qui fait partie de notre collection. Donc, lorsque vous cliquez juste là, il vous sera demandé quel champ. L'image de la carte de voiture est donc ce que nous allons obtenir. Et tout de suite, vous pouvez voir qu'il me montre différentes voitures de ma collection, ce qui est fantastique. Donc, quand je clique juste là sur le H3 noir, je vais recevoir des textos provenant de voitures, sélectionner un champ, et je vais juste sélectionner le nom. Vous pouvez donc voir automatiquement qu'il sait quel nom je veux saisir parce que c'est ce que nous lui avons demandé de faire. Sur n'importe lequel d'entre eux, je peux sélectionner celui-ci, par exemple et obtenir du texte à partir d'images. Ce sera évidemment le prix de la voiture. Voilà, vous pouvez voir les mises à jour des prix réels sur l' ensemble de mes voitures. Cela m'a permis de le connecter. Cliquez ici, sélectionnez le champ. Et ce sera : voyons voir, voyons voir, voyons voir le prix, le nom, le type, l'année de production de la voiture , je crois. Oui, la production est ici. On y va. Et enfin, ce dernier sera le kilométrage. Connectons-le donc ici. Voyons donc où nous en sommes ici, kilométrage parcouru, nous y voilà. Maintenant, toutes nos voitures incluses à l'intérieur sont correctement connectées à notre liste de collection. Cet effet de survol fonctionne sur chacun d'entre eux. Donc, ce que nous pouvons faire dans ce cas, c'est que j'ai cet emballage. Je peux limiter mes objets et en afficher trois, par exemple, et voilà. Nous avons maintenant notre mise en page d'origine, mais vous pouvez voir que c'est un peu faux. Donc, ce que je peux faire, c'est cliquer et ajouter un nouvel ordre de tri. Je peux donc soit utiliser l'ordre alphabétique inversé, soit choisir un nom en texte brut. Voyons donc ce que je peux faire ou ajouter un nouveau filtre. Voyons ce que nous pouvons faire ici. Comment les commander ? Peut-être par ordre de tri. C'est parti. Donc, ordre trié, réduisons cet ordre de tri, remontons jusqu'au bas. Créé du plus ancien au plus récent, plus récent au plus ancien, cliquez sur Enregistrer. C'est ce que je devrais faire. Non. Passons du plus ancien au plus récent. Et nous y voilà. Enfin, enfin, nous avons cette commande que nous devons inclure ici. Alors on y va. Nous avons des Lamborghini, Cadillac et Lucid Air. Et si je reviens ici, nous aurons le même effet ici. Ce qui nous manque ici, c'est ce bouton. Permettez-moi donc d'appuyer sur le bouton d'épingle de type Control K. Cliquez sur le style de nos boutons. Donc, bouton principal. On y va. Et ce bouton doit écrire C. Toutes les voitures. Voir toutes les voitures. Et voilà. Et tout ce que je veux faire ici, c'est peut-être placer cette section sous forme de pile verticale et peut-être centrer mes éléments comme ça. Et ce bouton aura une classe combinée ou mieux encore. Je peux parce que j'ai déjà utilisé le wrapper de liste de collections. Et où est-ce que j'ai mis ça ? J'ai ajouté ici. Donc, je peux également ajouter un emballage de liste de collections ici. Et voilà. Parce que nous avons la marge 64 et permettez-moi de créer la marge de 64 en bas pour ce bouton. Et si je sélectionne ce bouton dans XD Hover, vous pouvez voir que nous en avons maintenant 64. Alors voilà. Vous savez maintenant comment connecter vos objets à votre liste de collection. Et à l'intérieur des paramètres, vous pouvez jouer avec tous ces différents paramètres. Vous pouvez même ajouter des attributs personnalisés tels que la valeur du nom et d' autres éléments de ce genre. Et appuyez simplement sur Supprimer. Si vous ne voulez pas mettre quelque chose à l'intérieur, vous pouvez paginer les éléments. Vous allez donc ajouter que les flèches sont ces points pour la pagination. Et vous pouvez afficher une limite et indiquer le nombre d'objets que vous souhaitez limiter. Ici, nous en avons trois sur la page suivante que nous allons créer, nous en aurons huit. C'est donc ce que nous allons aborder dans la prochaine vidéo car c'est maintenant terminé. Passons à l'aperçu. On y va. Et maintenant, cela ne nous mène nulle part car nous devons d'abord créer une page et l'attribuer à une collection particulière, ce qui nous mènera ensuite à cet endroit. Alors pour la fin de cette vidéo, créons rapidement une nouvelle page. Créez une nouvelle page. Appelez ça des voitures, qui sera cette page juste ici pour les voitures. Et cliquez simplement sur Créer. Quelque chose s'est passé juste ici, dans la navigation. Je vais donc revenir à ma page d'accueil. Laisse-moi voir ce qui se passe. Donc, pour une raison ou une autre, il le positionne ici. Alors peut-être que je change de classe ou quelque chose comme ça. Laisse-moi vérifier le contenant. Déduis quelque chose non. Côté du conteneur, barre de navigation. Optons pour une horizontale. Allons-y ici. Je ne sais pas pourquoi il a fait ça. Passons à mon logo. Assurez-vous que c'est le premier. Les objets de navigation s'assurent qu'ils sont perdus, quelle que soit la raison pour laquelle ils l'ont fait. Permettez-moi donc de revenir à mon exemple et de voir ce qui s'est passé ici. Parce que je viens de le faire pour ma barre de navigation. Et vous pouvez voir qu'il a cassé quelques mises en page ici et là. Alors laisse-moi voir ce que j'ai fait. Laissez-moi, laissez-moi vraiment le découvrir et je vous reparlerai dans la prochaine vidéo. Et ces choses se produisent, surtout lorsque vous essayez parler en même temps et de comprendre ces choses. Dans la vidéo suivante, je vais donc vous montrer quelle était la véritable solution. Mais je viens d'ajouter une classe de combo qui a un peu modifié notre mise en page. Je te verrai donc dans la prochaine vidéo. 179. Construire une page de voitures: Très bien, comme je l'ai dit, je vais vous montrer ce que j'ai fait et ce que j'ai mal fait. Alors, tu sais, quand quelque chose comme ça arrive, que faire. Généralement parce que ces classes héritent les unes des autres, parce que nous utilisons un conteneur de classe pour tous nos conteneurs. Juste ici. Je viens d'ajouter la Flexbox et elle a cassé tous mes contenants. Donc, ce que je vais faire ici , c'est parce que nous avons ce conteneur, je vais simplement ajouter une classe de cartes combinée. Des cartes. On y va. Pour cette classe combinée. Maintenant, je vais mettre la flexbox verticale et m'assurer qu' elle fonctionne parfaitement ici. Vous pouvez voir si je commence par le haut, nous avons la navigation, nous avons cette section, cette section. Tout fonctionne donc comme il se doit. Ça a l'air bien. Cela fonctionne très bien. Ça a l'air bien. formulaire de contact fonctionne bien. Tout fonctionne bien parce que je l'ajoute simplement sur le contenant lui-même et je ne l'ai pas remarqué parce que je parle de l'enregistrement et de toutes sortes de choses. C'est pourquoi cela s'est produit. Maintenant que cette page d'accueil est enfin prête, nous pouvons, comme je l'ai mentionné dans la vidéo précédente, accéder à la page de cours que nous venons de créer. Donc, si je clique ici, vous pouvez voir que le fond est héréditaire pour le corps. Donc, si je clique juste là et que je viens ici, vous pouvez voir pour une raison ou une autre. Mais les anciennes pages doivent être appliquées à cette couleur gris clair, couleur du corps. On y va. Permettez-moi de retourner à la page d'accueil et sélectionner mon corps, quelle que soit la raison pour laquelle il l'a créé. Supprimons donc cette classe et sélectionnons le corps des anciennes pages. Et il va hériter de la couleur de la carrosserie, c'est ce que je veux en fait. Tout fonctionne donc comme il se doit. Revenons une fois de plus à cette page de cours et commençons à utiliser la puissance de ces symboles. Donc, tout d'abord, je dois vous montrer ce que nous allons concevoir ici. Cela va donc être assez simple. La seule section que nous allons réellement créer est cette section ici. Il va donc simplement avoir ceci copié, ce texte. Et il y aura juste le cercle et l' image d'une voiture à l'intérieur en dessous. Nous allons simplement avoir à peu près la même section , mais sans aucune limite sur nos articles. Et il affichera tous ces éléments sans le bouton. Ensuite, nous allons simplement réutiliser ces éléments ci-dessous. Commençons donc avec ça. Donc, ce que je vais d'abord faire c'est te laisser te ramener ici. Commençons par la barre de navigation. Glissez-le et déposez-le à l'intérieur. Et laissez-moi les utiliser, voyons ce que nous allons faire. Contactez-nous d'abord, puis la carte. Je peux donc aussi toucher le corps, appuyer sur le type Contrôle K sur la carte. Il va afficher le symbole de la carte, cliquez ici, appuyez sur Ctrl K, tapez pied de page. Et les symboles de bas de page s' afficheront. Il suffit donc de cliquer ici et vous pouvez voir qu'il hérite de l'espacement que nous avons défini pour la marge supérieure. Il fonctionne donc comme n'importe quel autre outil de conception comme XD, Figma, Sketch ou autre. Lorsque vous configurez vos composants et que vous les créez, cela va simplement vous montrer tout cela. Alors tout d'abord, commençons par créer une section. Choisissez votre contrôle corporel, Kate, j'ai été section et donnez-lui une classe de section. On y va. Je vais placer cette section juste en dessous de ma barre de navigation car c'est elle qui contiendra le texte, l'image et ces deux images à l'intérieur. Ensuite, allons-y et appuyons sur Control K, tapez dans div. Ce div sera notre conteneur. Comme ça. Et à l'intérieur de ce conteneur, nous pouvons inclure, par exemple contrôle K pour épingler le titre. Nous allons utiliser le titre H1, utiliser tous les titres H1. Voyons voir, pour une raison ou une autre, cela ne l'a pas inclus. Allons-y avec Poppins. Une couleur Bolt 64 sera de cette couleur, de couleur plus foncée. Et permettez-moi de me souvenir de la taille. La hauteur va être de 86. On y va. Et je vais ajouter une classe combinée centrée sur H1. On y va. ici, je vais juste apporter ce changement. suffit donc de cliquer pour qu'il soit au centre. Et voilà. Et pour l'instant, je vais juste coller ce texte. Maintenant, en dessous de ce texte se trouve mon contrôle de division Kate, mais div, ce bloc div, je vais l'appeler Hero Car. Carte de héros. On y va. Et à l'intérieur de cette voiture de héros, je vais simplement mettre ces deux images, donc Control K, cette image. Et cette première image peut être de cette voiture vue de côté. Et voilà. Et je peux utiliser tous les textes des ressources. Voilà, parce que ça s'appelle Mercedes Benz, je crois. Enfin, appuyez sur Contrôle K, tapez une image et ajoutez-en une nouvelle. Et celui-ci sera ce cercle bleu. Charmant. Et enfin, ce que nous allons faire pour ces deux-là, c'est peut-être voir. Je pourrais peut-être en faire une boîte flexible comme celle-ci et m'assurer que mes articles sont centrés verticalement. Peut-être que pour la position de ces voitures, je peux peut-être me rendre ici, me rendre ici, alors que la position est là, et cliquer sur relatif. Et cette voiture peut être absolue, par exemple, mais je pense qu'il vaut mieux le faire d'abord avec ce cercle. C'est tellement absolu, on y va. Et voyons voir, je pense que la voiture peut être relative. Par exemple, voyons voir. Nous allons d'abord l' appeler Cars, Hero, IMG. On y va. Voyons voir. Ici, ce que nous pouvons faire, c'est voir. Oui, disons que la voiture est relative. En fait. Au lieu de statique, je vais dire que c'est relatif. Et je vais lui donner un indice Z de cinq. Et ce cercle, je vais donner un indice Z de un, peut-être quelque chose comme ça. Tout sera donc bien centré à l'intérieur. Maintenant, en ce qui concerne notre voiture de héros, nous n'allons pas lui donner de dimension. Voyons voir. Cette carte de héros. Donnons-lui une marge, peut-être une marge supérieure de 64 environ, ce qui nous donnera juste cette mise en page distincte et réduira légèrement notre contenu. Maintenant, nous allons le renommer et nous l'appellerons Cars Hero, BG Circle. Et voilà. Et ici, nous allons simplement le centrer un peu mieux sur quelque chose comme ça. Je peux donc même le déplacer un peu vers le haut ou un peu vers le bas. Tout dépend vraiment. Et cette voiture va danser un peu, mais ne t'inquiète pas pour ça. Comme vous pouvez le constater, nous avons maintenant notre mise en page. Plus tard, évidemment. Nous allons jouer avec cela et réduire la taille de ce cercle. C'est évidemment trop énorme pour le moment, mais tout fonctionne comme il se doit, même sur cette deuxième page, quelle que soit la raison pour laquelle ces liens sont arrivés sur le site. Alors laisse-moi régler ça très rapidement. Si je vais sur ma page d'accueil, cliquez ici, accédez aux paramètres de la tablette. Rentre à l'intérieur. Voyons si je clique sur Afficher. Oui, donc ces liens ne sont pas associés. Donc, pour l'instant, je vais inclure l'association de 20 rembourrages gauches. Et ça va juste les déplacer un peu. Et cela devrait résoudre le problème, mais nous avons ici un nouveau problème. Et allons ouvrir les objets de navigation. Et pour la couleur de fond, je pourrais peut-être me débarrasser de la couleur de fond. On y va et on fait de même pour ce dernier. Cliquez ici pour vous en débarrasser. Il suffit donc de cliquer ici où c'est vide. Et maintenant, nous avons réglé le problème. Donc, si je clique ici puis ici, tout fonctionne comme il se doit, et maintenant ils sont prêts à partir. Si nous revenons à notre page de cours et que nous la testons ici. Si je le prévisualise très rapidement, cliquez pour l'ouvrir. Vous pouvez maintenant voir que nous avons cet espacement entre les deux. Maintenant que cette section est terminée, je peux passer à la section suivante, qui, dans notre conception, concerne ces voitures. Donc, notre collection exclusive. Ce que je peux faire, c'est revenir au flux de travail. Cliquez sur mes pages, allez sur la page d'accueil, et c'est un avantage de Webflow. Je peux cliquer ici et utiliser toute cette section. Vous pouvez donc voir pour une raison ou une autre que je l'ai attribué à une classe de sections. Renommons donc cette classe et appelons-la collection ou sommes exclusives. Je ne peux pas taper, par exemple collusive collection. On y va. Je vais juste appuyer sur Control C sur cette section. Revenez à la page de mon cours. Sélectionnez mon body control V, et il sera collé dans cette section en bas, le voici juste ici. Je peux le faire glisser juste ici. Et vous pouvez voir qu'il conservera le même espacement qu'auparavant. Mais maintenant, je vais cliquer sur dupliquer la classe , puis simplement la renommer voitures. Parce que je veux être sûre que c'est juste ici sur cette page. Voici donc la page du cours et voici la page d'accueil. Donc, si je sélectionne ici, vous pouvez voir si je ferme cette section, c'est juste une collection exclusive, et c'est ce que je veux. Ainsi, lorsque j'apporte des modifications, elles ne se propagent pas sur cette page, mais restent uniquement sur la page du cours. Donc, quand je sélectionne cela, la première chose que je veux faire est de me débarrasser de ce bouton. Sélectionnez ensuite l'emballage de ma liste de collections, cliquez ici, puis nous avons la page d'accueil ici. Je vais donc également dupliquer la classe ici et lui donner un nom, voitures. Et voyons ce que nous avons d'autre. Je pense que nous avons une nouvelle liste de collections. Nous le faisons. Dupliquons donc cela et appelons cela des voitures ici également. On y va. Et article de collection. Nous n'avons rien, alors maintenant tout fonctionne bien. Oui. Donc, sur l'emballage de la liste des collections, je vais accéder aux paramètres et afficher mes huit articles. On y va. Et maintenant, cela apparaît comme il se doit. Donc, si je clique sur l'aperçu ici, vous pouvez voir que nous avons maintenant la page du cours, donc nous avons cette image en haut. Je ne sais pas pourquoi il continue rebondir de haut en bas, mais il ne devrait pas. Et voici ce que nous avons. Tout fonctionne donc comme il se doit. Je pense que c'est tout simplement génial. Et voyons voir, pour cela, peut-être que nous pouvons le limiter. Donc, pour le conteneur, voyons en un ici, une voiture. Ce que je peux faire, c'est ajouter quelques marges pour pouvoir utiliser automatique et je peux utiliser Auto ici à gauche et à droite. Et j'espère que cela devrait cesser avec le rebond. Et pour l'image du héros, celle-ci, je peux lui donner une largeur maximale de 100 %, ce qui est déjà le cas. Et je pense que c'est tout. Je pense que cela va régler le problème à long terme. Comme vous pouvez le constater, dès qu'ils passent en mode aperçu, défilent de haut en bas, cela se corrige tout seul. Mais juste au moment de la prévisualisation, cela va sauter à gauche et à droite. Et lorsque je cliquerai pour ouvrir ces nouvelles pages plus tard, vous verrez que ce problème se reproduira. Mais avec cette nouvelle page et toutes ces différentes images que nous avons créées et en parlant de net new page, revenons à la page d'accueil. Et voici ce que nous avons sous les pages c'est que nous avons notre modèle de voitures, qui est la page que nous allons concevoir ensuite, et je vous verrai dans la prochaine vidéo quand nous aborderons cette question. Et cela contiendra de nombreuses informations différentes que nous avons déjà créées. Alors je t'y verrai. 180. Construire un modèle de voitures: Pour que nous puissions inclure toutes ces informations que nous avons mises dans notre CMS. Nous devons utiliser ce modèle de cours, qui est automatiquement créé. Donc, quand je clique juste là, vous pouvez voir que rien ne se passe vraiment. Alors, quand je sélectionnerai le corps, laisse-moi vérifier. Il hérite de ce corps de balises de toutes les pages. Donc, la couleur de la carrosserie, ce qui est bien, mais comme vous pouvez le voir, aucun élément à l'intérieur. Permettez-moi donc d'appuyer sur Control K dans la barre de navigation. Ajoutons notre barre de navigation et créons cette page comme nous l'avons fait précédemment. Donc, ce que je vais faire ensuite, c'est appuyer sur Contrôle K et taper dans le formulaire, Contactez-nous dans le champ K, tapez la carte, et Contrôle K et tapez dans le pied de page. Et voilà. Nous avons maintenant tous nos éléments habituels comme nous le faisions sur toutes les pages précédentes, mais il ne nous reste que les informations ici. Donc, si je reviens à XD, ce que nous devons inclure, c'est ce tas d' informations. Commençons donc. Faisons-le et créons toutes ces informations. Si je reviens ici, j'ai évidemment besoin d'une nouvelle section. Et je vais mettre dans la classe de section, comme je le fais toujours. Mettez-le juste en dessous de ma barre de navigation. Et à l'intérieur de cette section, appelons-la d'abord, par exemple les détails de la voiture comme ça. Et à l'intérieur de cette section, voyons ce que nous pouvons faire, c'est mettre un div, bloc div, l'appeler conteneur. Et donnez-lui immédiatement une autre catégorie de détails de carte. Un contenant comme ça. Voici donc les détails de la carte, jetez le conteneur de détails juste pour que nous sachions ce que nous faisons. Et ensuite, voyons voir. Nous pouvons faire plus de plongées. Donc, Control K, tapez def. La première portera sur les informations de la carte. Et ce sont les informations qui se trouveront sur le côté gauche de la page. Images et tout le texte ci-dessous. Et vous pouvez le voir ici. Et enfin, appuyez une fois de plus sur Control K et ajoutez une autre division. Et cette division, je vais appeler Car action card, c'est-à-dire cette voiture qui se trouvera sur le côté droit, il suffit rester en haut puis de nous suivre en faisant défiler l'écran vers le bas. Donc, ce que nous pouvons faire ici pour le conteneur, c'est activer la flexbox, utiliser mon horizontale. Et voyons voir, on peut le coller en haut et on peut le positionner comme ça. Ensuite, pour les informations sur la voiture elles-mêmes, elles doivent avoir un peu de largeur. Allons-y avec 65 %. On y va. Pour la carte d'action automobile, ce que nous pouvons faire, c'est utiliser peut-être 30 %, quelque chose comme ça. Et il va évidemment y avoir ces 5 % entre les deux, comme ça. Enfin, ce que je veux faire, c'est peut-être y aller avec une petite marge sur le contenant. Peut-être opter pour quelque chose comme 40 en haut, juste pour nous démarquer un peu de la navigation. Et puis commençons avec la carte d'action automobile en fait. Donc, ce que je peux faire d'abord, c'est voir. Regardons d'abord le design. Nous avons donc ici cette étiquette, nous avons des textes, ces textes et deux boutons et un fond blanc avec un angle de rayon de huit, je crois. Oui, on y va. Revenons-en donc à mon design. Nous allons sélectionner la carte Action de la voiture. Commençons par mettre le contenu à l'intérieur. Je vais donc appuyer sur Control K. Mais avant de le faire, revenons ici où il écrit image et dégradé et où il est écrit Couleur, je vais sélectionner une couleur blanche. Et je vais choisir que le rayon d'angle soit de huit pixels, valeur y. Puis, à l'intérieur, il appuyait sur la touche Ctrl et appuyait sur h3, se dirigeant et en sélectionnant h3 juste ici. Pour cet âge de trois ans, voyons voir. Ce que je peux faire, c'est le donner. Voyons tous les en-têtes h3. Voyons à quoi cela ressemble. Encore une fois. Débarrassons-nous donc de ce h3c, ce que nous avons dans le noir. Encore une fois, il n'a hérité d'aucun style. je ne sais pas ce qui s'est passé. Alors débarrasse-toi de tout ce H3 pour celui-ci, Poppins. Je ne sais vraiment pas ce qui arrive à 24 ans. Et voyons voir, cela devrait être 40 et la couleur devrait être celle de trois ans. On y va. Alors maintenant, je vais taper quelque chose comme le nom de la voiture. Et voilà. Je vais appuyer sur Control C, Control V. Et ce H trois aura un h trois bleu. On y va. Nous héritons de dettes. Et en dessous, nous allons inclure Control K p pour le paragraphe. Mettons tous les paragraphes. Encore une fois, il n'a pas hérité de l'attribut style. Je ne sais pas ce qui se passe, car chaque fois que vous le faites, il hérite du style comme il se doit. Alors allons-y avec 16. Et allons-y, que pouvons-nous faire ici ? Voyons voir, 26 peut-être. Donc 26. Et dans ce cas, laissez-moi simplement choisir cette couleur foncée, par exemple, telle devrait être. Et dites qu'elle peut être retirée dès maintenant et vous pourrez voir comment la carte évolue réellement. Donc, ce que nous allons faire dans ce cas, c'est peut-être que nous pouvons le mettre dans un div dès maintenant. Alors, appuyez sur Control K. J'ai été div et mettez tout cela dans un div. Comme ça. Donc, cette division devrait s' appeler quelque chose comme Car Action, Content, contenu de la carte de correction, quelque chose comme ça. Et il devrait y avoir un rembourrage intérieur de 24 cm de ce côté. Parce que je veux le supprimer du bord gauche de mon écran, quelque chose comme ça. En ce qui concerne les dettes, je peux appuyer sur Ctrl K, taper B pour le bouton. Et je vais sélectionner mon bouton principal ici. Et ce bouton principal peut également avoir une classe distincte de bouton d'action Car. On y va. Peut-être que je peux simplement taper quelque chose comme réserver. Cette voiture. On y va. Je pense que ça va très bien fonctionner. Ensuite, je vais appuyer sur Control C, Control V pour coller ce bouton. Je vais me débarrasser de ces cours. Pour ce cours, je vais le dupliquer et simplement l'appeler « Let's see Batson outline ». Pour le contour des boutons, nous allons avoir la même chose ici, exception du C, des options de prêt. On y va. Et ce que nous avons ici, voyons voir. Réservez cette voiture de manière à ce qu'elle ait la même largeur. Alors peut-être que je peux avoir 47 rembourrages ici. Réduisons donc un peu ce chiffre à 47 pour pouvoir faire correspondre la taille de ces deux boutons. contour de ce bouton doit avoir, disons, une couleur blanche car le fond est blanc. Le texte à l'intérieur devrait être, voyons voir, pas celui-ci, mais peut-être celui-ci. Et il devrait avoir un plan comme celui-ci. Mais au lieu du noir, donnons-lui ce contour. Et le rayon d'angle est toujours de huit, et ajoutons-lui un rembourrage. Voyons dans quelle mesure nous les avons séparés ici de 24. Le roulement supérieur devrait donc être d'environ 24 et le rembourrage inférieur devrait également être de 24. Cela nous donne donc simplement cet espace pour notre carte en bas. Alors, voici ce que nous pouvons faire, c'est donner à ce paragraphe quelque chose comme pick, P. pickup. Voyons maintenant ce que nous avons pour les distances dans notre conception. Nous en avons 24, puis nous en avons 24 ici. Alors faisons-le. Je vais donc simplement sélectionner ici et taper quelque chose comme s104. Je maintiens la touche Alt et je fais cela en même temps. Donc ça a l'air bien. Enfin, pour le contour des boutons, ce que je veux faire, c'est le remplacer par le pointeur de la souris. À l'intérieur de la couverture. Je vais encore une fois le changer en blanc, puis changer la couleur de mon texte pour peut-être ce paragraphe h3, disons et voyons, changer la couleur de ce contour à trois ans paragraphe également. Laisse-moi me cacher pour que tu puisses le voir un peu mieux. Comme ça. N va hériter de toute cette largeur. Ainsi, lorsque je clique sur l'aperçu très rapidement, vous pouvez voir ce que nous avons jusqu'à présent. Alors réservez cette voiture, adorable. Et nous avons des options C uniquement. Oui, je pense que cela fonctionne bien. Et au lieu de faire des allers-retours avec le texte ici, ce que je peux faire, c'est simplement connecter. Vous vous souvenez donc de la façon dont nous avons créé cette collection CMS précédemment, et voici le modèle Scars. Et ici, vous pouvez voir la voiture de votre choix. Actuellement, nous sommes sur une page Lamborghini Hurricane, mais vous pouvez la modifier à tout moment. Vous pouvez donc obtenir des textes à partir du champ de sélection des voitures, et je vais sélectionner le nom. Donc, comme nous sommes à bord de l'ouragan Lamborghini, ce nom y sera inscrit. Ensuite, celui-ci va également apparaître, sélectionner le champ prix de la voiture. Et c'est juste le modèle normal qui va y être envoyé. Maintenant que ce modèle bleu a le rembourrage en bas, je vais m'en débarrasser, mais H3 Blue et je vais l'appeler voitures, modèles de voitures, parce qu' il se trouve ici. Je vais m'en débarrasser parce que cela hérite de cet espacement ici même. Et le contenu de la voiture. Peut-être pourrions-nous avoir un peu de rembourrage de ce côté. Alors peut-être que nous pouvons taper quelque chose comme huit ou quelque chose comme ça sur le côté droit. Voyons voir. Oui, je pense que huit suffiront, simplement parce que l'entreprise veut se développer sur plus petites tailles et simplement s'endetter. En gros, le contenu de cette voiture est presque terminé, mais ce dont nous avons besoin en plus, c'est de cette étiquette. Créons donc un autre div. Appuyez donc sur Control K, tapez en définition. Et mets ça en haut, juste ici. Et pour cela, ce que nous pouvons faire, par exemple, c'est l' appeler voiture ou label. On y va. Et pour la voiture et l'étiquette, ce que je peux faire, c'est leur donner un peu de largeur. Je vais donc lui en donner 108. Ce sera donc ma largeur et la largeur maximale sera d'environ 140. Peut-être. Nous pourrons vérifier cela plus tard et voir si cela fonctionne. Pour la couleur de fond. Ce que nous pouvons faire, c'est choisir la couleur de la carrosserie. Comme ça. Parce que si je vous emmène voir notre design, vous verrez que c'est ce qu'il fait. Ici. Ce que nous ferons, c'est inclure ces éléments dans. Donc, tout d'abord, j'ai besoin de déposer ces éléments à l'intérieur. Appuyez donc sur Ctrl K, tapez dans l'image. Pour l'image, ce que je veux, c'est être photographiée depuis des voitures, disons un terrain. Et voyons l'étiquette de type de voiture, qui est ce dont nous avons besoin. Et dans cette voiture, parce que c'est une super voiture, vous pouvez voir qu' elle arrive de ce terrain. Désolée. Et maintenant, sur l'étiquette actuelle, ce que je dois faire, c'est inclure le texte de ce paragraphe. Donc, ce que je peux faire, c'est appuyer sur Ctrl K, taper P, passer au paragraphe. Et donnons-lui un paragraphe. Voyons voir, voyons les textes étiquetés. Parce que c'est en fait plus petit et que nous avons cette classe, il suffit de s'y inscrire. Et je peux sélectionner ceci. Voyons voir, donnons-la à Texas Super Car. Mais avant de le faire, je voudrais le sélectionner et recevoir des textos provenant de voitures. Et ce sera un type de voiture. Cela va donc dépendre du type de voiture lui-même. Et voilà. Maintenant, pour que cela colle l'un à l'autre, je vais activer la flexbox. Assurez-vous qu'ils sont centrés ici. Et voyons voir, assurez-vous que notre image ne présente aucun appariement étrange, contrairement à nos textes. Alors, débarrassons-nous de cela. Allons-y avec zéro. Maintenant, ils sont centrés et ce sera, voyons voir, l'icône d'une étiquette de voiture. Je vois Et si je reviens à notre conception, vous pouvez voir que nous avons une distance de huit entre les deux. Il y aura donc juste la bonne marge de huit. Et enfin, ajoutons un peu de rembourrage à l'intérieur. Donc, ce que je peux faire, c'est peut-être pour une étiquette de voiture, je peux y ajouter 16 étiquettes de chaque côté. Je pense que ça a l'air bien. Mais pour les largeurs , on y va aussi avec 140. On y va. Je peux même faire une réinitialisation. Voyons à quoi cela ressemble. Génial. D'accord. Voyons 24 de chaque côté, juste ici. Alors allons-y avec 24. Encore une fois, en maintenant ma touche Alt enfoncée. Et voilà. Et de ce côté, je vais en mettre 24 juste pour qu'il corresponde à mon contenu ci-dessous. Mais ici, vous pouvez voir que nous avons ce problème, nous devons donc lui donner une certaine largeur. Alors allons-y avec 140, je pense, parce que c'est le plus long. Voyons voir, quelque chose comme trente deux, peut-être. Nous pouvons lui donner une largeur maximale d'un tiers e à, je pense que cela fonctionnera très bien. Et la largeur ici sera, disons, 132. Je pense donc que ça va être une bonne chose. Et je ne vais pas m' occuper de la taille parce que j'ai déjà intégré ce jumelage, mais je pourrais ajouter une interdiction supplémentaire de huit peut-être. Et cela va juste me donner de l'espace supplémentaire à l'intérieur. Enfin, son rayon d' angle est de quatre, alors réglons-y très rapidement. Donc, sur l'étiquette actuelle, je vais faire défiler l'écran vers le bas en taper quatre et ajouter ce rembourrage à l'intérieur. Alors on y va. Nous avons maintenant notre carte. Donc, si je passe d'une page à l'autre, nous voilà face à un ouragan Lamborghini. Vous pouvez consulter celui-ci, par exemple, et voir à quoi cela ressemble pour le Maclaurin car le texte est un peu plus long. Et si je passe à celui-ci, par exemple, vous pouvez voir que tout cela change, y compris celui-ci. Mais je ne suis pas vraiment fan de ce à quoi cela ressemble. Alors peut-être que nous pouvons le changer. Ce n'est donc pas pareil, mais de toute façon, cela permet de bien l'espacer. Nous avons donc l'étiquette actuelle et nous pouvons peut-être l'ajuster à quelque chose d' encore moins 128, peut-être quelque chose comme ça. Alors maintenant, quand on passe de l'un à l'autre, oui, ça a l'air un peu mieux. Donc, lorsque je clique sur l' aperçu ici, vous pouvez même le faire ici et voir à quoi ils ressemblent tous. Je vais donc arrêter la vidéo ici car nous en sommes déjà à 16 minutes. Et à notre retour, nous allons commencer à aborder cette section qui est un peu plus exigeante que celle-ci. Alors je t'y verrai. 181. Modèle de voitures: Très bien, reprenons là où nous nous sommes arrêtés et abordons la partie la plus difficile de ce projet, car nous devons maintenant créer cette page et les éléments qui s'y trouvent. Et ils vont être assez délicats, mais essaie juste de me suivre. Sinon, vous pouvez toujours simplement cloner ce projet ou l'ouvrir et essayer de le refaire une fois de plus. Alors tout d'abord, commençons par un div. Appuyez donc sur Control K, tapez div. Et cette division va s'appeler voiture. Galerie de voitures. Peut-être les informations de votre voiture, disons. Laisse-moi vérifier mon projet original et voir. Donc une galerie de voitures parce que ce sont les informations sur la voiture. Oui. La galerie de voitures. Et à l'intérieur de cette galerie de voitures, je vais appuyer sur Control K en div. Et cette division s' appellera Car Hero Image, IMG. Et si je suis endetté, je peux le mettre dans ma boîte à lumière. Appuyez donc sur Control K, tapez dans la boîte à lumière. On y va. Avec la boîte à lumière. Il est complètement vide, vous devez donc extraire des informations de quelque part pour commencer par le configurer. Alors, procurez-vous des médias à partir de voitures. Et le premier champ que je vais faire est de sélectionner, disons, l'image d'un héros de voiture. Alors retournez ici. Voyons voir, ma boîte à lumière fonctionne. Et donnons-lui le nom de Car Hero, Lightbox. Des images. Et voilà. Et maintenant, ce que je dois faire, c' est là où il est écrit image, je vais la sélectionner et voir, nous devons la configurer pour qu'elle puisse extraire des images. Obtenez donc des images de voitures et sélectionnez un champ, disons une image de héros de carte. Et comme nous sommes sur Lamborghini Hurricane, cela fonctionne, mais pas une carte de voiture mais une image de héros automobile. Et voilà. Donc numéro un. Maintenant que c'est terminé et que tout est prêt, nous devons y mettre cette étiquette que nous avons vue ici, qui dit « c » sur toutes les images. Réglons donc rapidement cette question. Donc, ce que je vais faire ici, à l'intérieur de l'image du héros de la voiture, c'est appuyer sur Control K, taper def et le positionner juste au-dessus de ma boîte à lumière. Et je vais lui donner le nom C. Toutes les images. Et donnons-lui un rembourrage de 12 de chaque côté. 121 dans chaque style, comme celui-ci. 12 de chaque côté. Voyons quelque chose comme ça. Et je vais lui donner une couleur de fond de blanc pur, c'est de la dette. Et à l'intérieur de ça, ce que je peux faire, c'est peut-être que tu avais la largeur maximale. Largeur maximale de 145, juste pour qu'il ne soit pas complètement sur le côté. La hauteur va être automatique. Et à l'intérieur de cela, je vais rapidement ajouter un paragraphe. Appuyez donc sur Ctrl K, tapez P pour le paragraphe. Et je vais taper mon texte et voir, voir toutes les images. On y va. Et voyez si le style fonctionne. Oui, parce que c'est hériter de tous les paragraphes qui fonctionne très bien. Maintenant, en ce qui concerne les images des héros automobiles, ce que je peux faire , voyons voir, c'est mettre ceci, voyons voir. L'image du héros automobile va donc être relative. Celui-là. C'est tellement relatif. Et cet intérieur va être absolu. Changeons donc la position en absolue, comme ça. Et mets-le dans le coin droit. Maintenant, pour ce qui est de ce paragraphe, je pense que oui, il le conserve. Donc, si je passe à zéro, ça devrait rester pareil. Et enfin, ce que je peux faire c'est jouer un peu avec le positionnement. Alors peut-être que je pourrais en choisir un et peut-être en avoir un en bas ou peut-être deux. Voyons où cela nous mène. Oui, je pense que deux fonctionnent très bien pour cette affaire. Mais si je clique sur l'aperçu, cliquez ici, vous pouvez voir que nous n'avons plus que cette image dans notre boîte à lumière, nous devons donc en ajouter d'autres. Et pour ce faire, nous allons regarder de près cette voiture et une galerie sur cette image de héros automobile. On y va. Et à l'intérieur des informations sur la voiture, je vais appuyer sur Control K et taper la liste des collections. Et voilà. Cette liste de collections sera connectée à la première galerie de voitures. Et il y aura ces quatre images, si vous vous en souvenez. Donc, si je vais ici et que je vais lui donner un nom, disons « voitures », galerie. Un. Comme ça. Accédez à mes paramètres et assurez-vous d'en obtenir les images. La source est donc celle-ci. Donc, les voitures Gallery One, ce qui est bien, retournent ici, et je dois évidemment l'attribuer. Donc liste de collection, élément de collection. Ici, vous pouvez voir que nous avons ces images, donc nous en avons 234,5. Ils ne sont pas dans le bon ordre. Donc, ce que nous pouvons faire très rapidement, c' est voir, voyons voir. Peut-être pouvons-nous traiter la liste des collections et afficher sous forme de boîte flexible comme celle-ci. Et peut-être faire en sorte qu'il y ait un espace entre les deux. Pour ici. Voyons ce que nous pouvons faire. Collection, liste, objet, voiture, galerie 1. Pour une raison quelconque. Il ne me montre pas les images. Galerie 1. Et voilà. Il me montre les images mais me montre les images d'arrière-plan. Donc oui, je devrais mettre la boîte à lumière à l'intérieur. Alors débarrassons-nous de celui-ci. Ce que je peux faire, c'est à l'intérieur de l'objet de la collection, ou je vais appuyer sur Control K, taper dans la boîte à lumière et mettre cette boîte à lumière dedans. Alors maintenant, vous pouvez voir que nous avons cette boîte à lumière comme ça. Je vais lui donner à peu près le même nom que le premier. Je vais donc y aller directement. Car Hero, images de lightbox. Sélectionnez donc celle-ci, des Car Hero ou peut-être des images de Car Lightbox. Eh bien, encore mieux maintenant, nous vous proposons les mêmes images de Car Hero Lightbox. On y va. Donc exactement la même classe. Et enfin, nous devons le connecter. Donc, si j'ouvre l'image et que j'en tire des images, vous dites « galerie de voitures ». Alors cliquez ici et c'est parti. Nous avons maintenant toutes nos images à l'intérieur. Maintenant, une chose sur laquelle nous devrions travailler est un peu d'espacement ici. Alors voyons voir, récupérez des médias à partir de voitures. Car Gallery 1, c'est très bien. Maintenant, tout est connecté. Mais en fait, je ne le veux pas. Parce que si j'appuie sur Aperçu, maintenant, vous voyez qu'il ne se connecte pas Je dois donc le connecter à d' autres boîtiers lumineux. Je crois. Donc, lié aux autres boîtes à lumière ici, le nom du groupe devrait être une galerie de voitures, un restaurant ou une galerie. OK, si je clique sur Aperçu, cette galerie de cours s'affiche toujours. Permettez-moi de voir quel est le problème ici. Alors galerie de voitures, essayons celle-ci. On y va. Nous avons donc maintenant ce 1 234,5. Tout fonctionne comme il se doit. Tu peux voir à quoi ça ressemble. Et maintenant, ce que je peux faire, je pense, c'est qu'au lieu de cela, nous allons jouer un peu avec certains paramètres. Donc, au lieu que ce soit une flexbox, je pourrais peut-être la transformer en grille. Créez quatre colonnes ici et supprimez cette deuxième ligne. Appuyez sur OK. Et je pense que c'est bon. Donc, cette collection répertorie, voyons voir, la première galerie de voitures. Oui, la galerie 1 de Keras peut avoir une certaine marge en haut et la marge devrait être de 24. Alors allons-y avec 24. Marge. On y va. Nous avons donc maintenant la première galerie de voitures. Ce que nous pouvons faire dans ce cas c' est essayer un doublon effronté . Appuyez donc sur Control C, Control V. Maintenant, renommons cette classe pour dupliquer cette classe, appelons-la Gallery to. Et à l'intérieur de cette galerie pour. Essayons en fait de le relier à cette autre boîte à lumière. Donc, liste de collection. Voyons ce que nous pouvons faire. Pouvons-nous le relier d'une manière ou d'une autre ? Nous ne pouvons pas. Voyons donc ce que nous pouvons faire d'autre ? Alors débarrassons-nous de cela. Et ce que je peux faire dans ce cas c'est simplement ajouter une nouvelle collection. Contrôle K, recommence. Donc, en tapant une collection ou une liste comme ça, nous devrions également la lier à la galerie de voitures. En fait. Et cela va lui donner un nom. Donc, ce que nous pouvons faire, c'est retourner ici, à la galerie de voitures, dans ce cas. On y va. Et cela va nous le montrer. Donc 67,8. Souvenez-vous donc de ce que nous avons fait avec cet article de la collection que nous avons mis dans la boîte à lumière. Alors faisons-le ici. Donc, liste de collection, collection, élément, tapez Control K dans Lightbox. Je t'ai dit que ça allait être difficile. Et maintenant, nous devons les connecter. Une lightbox devrait donc se connecter à celle-ci. Alors sélectionnons-le à partir d'ici, je pense aussi obtenir une image de la galerie de voitures. On y va. Cela montre cela. Donc 5678. Oui. Voyons ce que nous pouvons faire dans ce cas. Je pense donc que nous pouvons avoir sur la liste des collections les grilles comme nous le faisions précédemment, placer dans la grille et lui donner une grille de trois colonnes de large, peut-être quatre colonnes de large. Il conserve donc la même dimension, s'en débarrasse ici, cliquez ici et accédez aux paramètres. Et je dois m'assurer qu'il est relié à d'autres caissons lumineux. Liaison du boîtier avec d'autres caissons lumineux. Et quel était son nom ? Encore une fois ? Galerie de voitures. On y va. Clôturons donc tout cela. Allons ici. Galerie de voitures. On y va. Maintenant, lorsque je clique sur l' aperçu rapide, cliquez ici. Non, il n'y a toujours pas de lien pour une raison quelconque, alors essayons encore une fois. Ainsi, vous ne pouvez voir aucun objet trouvé pour une raison quelconque. Voyons donc dans le lien «  Paramètres » de la lightbox. Je peux peut-être lui donner un cours. Voyons voir, cette boîte à lumière reçoit du contenu multimédia provenant de la deuxième galerie automobile. Et essayons-le. Maintenant. On y va. Il aurait donc dû provenir des médias. Alors maintenant, lorsque je clique sur ces pages, vous pouvez voir que nous avons les huit images. Et quand je les ai échangés, vous pouvez voir que tout fonctionne à merveille. Maintenant, une dernière étape est que je dois essayer de le masquer. Donc, ce que je peux faire, c'est fermer tout cela, revenir à mon style, sélectionner l' outil Course Gallery et essayer de masquer ces éléments pour voir si cela fonctionne. Et c'est le cas. Donc 2345678. Il est donc là sur la page, il n'est tout simplement pas visible. Je peux donc même utiliser mes flèches ici et faire une liste à gauche et à droite. Vous pouvez le voir dans ce cas, afin que je puisse passer de l'un à l'autre. Tout fonctionne comme il se doit. Ce n'est tout simplement pas visible. Donc, j'espère que cela fait 14 minutes dans cette vidéo, vous vous rendez compte que même parfois j'ai l' ouverture que j'ai conçue ici, mais parfois même cela ne fonctionne pas correctement. Vous devez donc faire preuve de créativité à cet égard. Vous devez l'imaginer, vous devez y travailler. Et parfois, ces problèmes vont apparaître. Mais avec le temps, vous allez avoir plus de problèmes que vous résoudrez mieux en tant que concepteur et développeur . Je vais arrêter cette vidéo ici. Et dans la vidéo suivante, nous allons continuer avec les informations ci-dessous. Et je vais vous montrer comment ajouter ces différentes sections. Et en gros, ça va se répéter encore une fois. Nous allons le connecter. Mais avant de le faire, passons rapidement à ce sujet. Passons donc à Cadillac Escalate, par exemple, et vous verrez que c'est le cas. Donc, si je clique sur l'aperçu ici, cliquez sur escalate. Tout est connecté comme il se doit, ce qui est agréable à voir et cela nous fait gagner beaucoup de temps. Nous créons donc pour la première fois une mise en page pour nos clients. Et puis une fois qu'ils changent, vous pouvez voir qu'il devrait être mis à jour. Je pense que pour une raison ou une autre, il n'a pas été mis à jour. Essayons donc celui-ci. Je dessine une promenade. Il est donc mis à jour ici, mais pas ici. Il me montre maintenant ces couleurs vives. Donc, si je passe à la suivante, elle m'indiquera peut-être une distance ou une marche à pied à cause de la mise à jour. Vous pouvez donc voir qu'il me montre le Range Rover, Vogue. Mais si je reviens à Vogue et que je clique sur l'aperçu, il me montre désormais le Range Rover Vogue, que je recherchais au départ. Cela fonctionne donc. Il a juste besoin d'un peu de temps pour être mis à jour afin que vous puissiez voir que tout fonctionne comme nous le souhaitons. Revenons à Lamborghini car c'est là que nous avons commencé. Et comme je l'ai dit dans la vidéo suivante, nous allons commencer par la section suivante. Alors je t'y verrai. 182. Modèle de voitures: Continuons maintenant là où nous nous sommes arrêtés. Et je viens de me rendre compte que ce n'est pas à l'intérieur d'une division. Appuyons donc sur Control K et tapez dans div et à l'intérieur parce que cela devrait être une galerie de voitures, mais je l'ai juste placé à l'extérieur pour que cela n'ait pas d'importance. Appelons-la Car Gallery Top peut-être ou Main Kalgoorlie ou quel que soit le nom que vous voulez donner à la vôtre. Et mettons-le ici. Ça devrait aller ici. Cela devrait aller au-dessus, cela devrait aller au-dessus de cela, et tout devrait fonctionner comme prévu. Jetons-y un coup d'œil. Oui. Tout fonctionne donc comme il se doit. Et nous n'allons pas encore nous occuper du responsive car cette section occupera la totalité de la section, sur toute la largeur de la section, et contiendra juste le 12ème rembourrage à l'intérieur. Nous allons également masquer ces images et n'avoir qu' une seule image principale. Mais lorsque vous cliquez, vous pouvez évidemment également avoir votre mise en page ici. Vous pouvez voir à quoi cela ressemble sur différentes pages, car il ne s'agit que d'un composant principal qui s'affichera correctement sur chaque écran. Revenons donc ici, et revenons à l'édition car nous devons créer la section suivante, qui sera cette section de présentation. Alors allons-y et faisons exactement cela. Maintenant que nous avons le haut de notre galerie actuelle, j'ai besoin d'appuyer sur Control K et de mettre un div, que j'appellerai aperçu. Comme ça. Dans l' aperçu, je vais mettre la hauteur maximale de 196, qui est la hauteur maximale de ce que nous avons créé précédemment. Je vais avoir la couleur d'un blanc pur, comme ça. Et je vais avoir un rayon d'angle de huit, je crois. Oui. Alors rentrons à l'intérieur et voyons ce dont nous avons besoin. Nous avons donc besoin que H3 Control K tape en H pour le type de titre en H trois. Et cela va enfin prendre en compte la topographie dont nous avons besoin Nous allons donc la conserver et je vais taper une vue d'ensemble. Et pour cela, je vais ajouter une classe combinée ici, et je vais l' appeler par exemple trois ans. Informations sur la voiture. On y va. Et ici, nous allons peut-être mettre un peu de rembourrage ou de marge. Voyons voir. Allons-y avec zéro marge. Allons-y avec zéro marge. Et je vais mettre la meilleure paire de 24. Et je vais mettre, disons, une marge gauche de 24. Cela va juste me laisser un peu de place pour la vue d'ensemble. Ce que je peux faire, c'est peut-être voir voir. Je peux juste mettre ma marge maximale de 24 points. Je vais juste pousser cette section ici. Voyons voir, peut-être, oui, c'est ça. Faisons donc appel à Control K une fois de plus car nous devons maintenant saisir ces informations. Créez donc un autre div, le bloc. Et ce bloc, je vais appeler Car overview parce que c'est ce que c'est. Et ce sera notre réseau. Mais avant cela, nous devons nous occuper de ces petites sections ennuyeuses. Donc, si je vous ramène ici, nous allons avoir une grille de quatre colonnes et deux lignes contenant huit éléments au total. Chaque élément se trouvera dans une division distincte. Et cette division sera la vraie. Voyons donc ceci, qui est la flexbox. Commençons donc. Je vais appuyer sur Control K une dernière fois. Il y a eu une division. Et à l'intérieur de ce bloc div, que je vais appeler production ici. Oups. Je ne savais pas que j' étais en train de changer cela. Revenons donc à ici. Débloquez donc la production de clauses. Ici. On y va. Et à l'intérieur de ce div, je vais mettre le contrôle d'image K dans l'image, comme ça. Et je vais obtenir une image à partir du champ de sélection. Et voyons ce que nous pouvons faire. En fait, non, je ne vais pas créer d'image parce que nous les avons déjà. Ce sera donc, voyons voir, un calendrier, une icône comme ça et laissez-le le saisir tout de suite. Choisissez donc l'image, laissez-moi trouver l'icône de mon calendrier, voilà, celle-ci à côté. Ce que nous aurons, c'est, voyons, un paragraphe, de type Control K dans le paragraphe PIE. Et il contiendra les paramètres des paragraphes, ce qui est génial. Ici. Recevons des textes provenant d'un champ sélectionné, et cela se fera au cours de l'année de production. Voyons voir, année de production, production ici. On y va. Production ici. Ça a l'air génial. Enfin, ce que je vais faire, c'est transformer cela en une pile, m'assurer qu'ils s' alignent comme ça et m'assurer que mon paragraphe est réglé sur P. Voyons ce que je peux faire. Tous les avis peuvent être ou des cartes P. Oui, faisons un examen et éliminons cette marge inférieure. Et voilà. Maintenant, ils vont y aller. Et ce que je vais faire avec celui-ci, c'est voir combien il y en avait ici. Je pense que l'espacement était de 16. Charmant. Revenons donc ici et saisissons simplement 16 pour la bonne marge, ce qui ne fera que la saisir. Ne vous inquiétez pas pour l'instant, car nous allons simplement le mettre dans un autre emballage. Alors voyons voir. Ce que nous pouvons faire, c'est donner un aperçu du cours, ce que je peux faire, c'est créer une grille. Allons-y avec quatre colonnes. Comme nous l'avons dit, les annélides ont deux rôles, ce qui est bien, nous l'avons déjà. Sélectionnez donc cette production ici, appuyez sur Contrôle C. Mais avant cela, laissez-moi vérifier quelque chose. Je vais juste le mettre au centre. Et voyons voir, parce que c'est un enfant en grille, mais Flexbox pense que ce n' est pas très beau ici. Oui, je pense que c'est bien en fait. Donc Control C, Control V. Et la suivante est ce que nous appellerons une classe dupliquée. Nous appellerons Mileage. Pour le kilométrage. Il s'agira d'une icône de kilométrage par classe dupliquée et remplacera l'image par le kilométrage. Donc, encore une fois, vous pouvez utiliser la recherche si vous le souhaitez. Je vais juste mettre ceci et pour le texte au lieu de l' aperçu, je vais utiliser le kilométrage. On y va. Maintenant, appuyez sur Control C, Control V. Sur la prochaine, nous allons dupliquer la classe. Ce sera du type de carburant. Allons-y tout de suite pour entendre le remplacer par le type de carburant à haute voix. Et je vais remplacer cette icône de type de carburant ICN dupliquée par cette icône de type de carburant. Et remplacez-la par l'icône du type de carburant, qui est l'icône d'une pompe. Laisse-moi voir où il se trouve. On y va. Génial. Un dernier point que je voudrais ajouter est le contrôle C. contrôle V sur cette ligne indique que si je duplique la classe, ce sera une transmission. Boîte de vitesses. Et sélectionnons le texte correspondant. Transmission, où elle se trouve, où c'est le niveau de transmission. Et pour celui-ci, nous allons le dupliquer et l' appeler icône de transmission. Génial. Et remplaçons simplement l' image par la transmission, qui est celle-ci. Et nous y voilà. Alors maintenant, allons-y et ajoutons-en un nouveau. Contrôle C, contrôle V, contrôle C, et contrôle C, contrôle V. Passons maintenant à ceux-ci. Tout d'abord, dupliquons celui-ci. Et ce sera le type de moteur. Dupliquons celui-ci. Et ce seront des portes. Celui-ci sera composé de sièges. Et le dernier sera la garantie. Et voilà. Alors maintenant, allons-y un par un et remplacons-les ici. Ce sera donc une garantie. Remplaçons cette icône de garantie et remplacons-la par la garantie, qui correspond à celle-ci. Le prochain devrait être Voyons voir, euh, les sièges. Tapez donc des sièges peints. Et cela devrait être remplacé ici. Les graines, ICN, remplacent donc l'image par le siège, qui se trouve ici. Il s'agit de Doors. Alors sélectionnez-le ici. Encore une fois, lorsque vous faites cela, une fois, il se connectera et peu importe ce que votre client créera une nouvelle page, il connectera simplement ces éléments dans n, tout fonctionnera parfaitement. C'est ce qu'on appelle des portes. Icône. Pour que l'icône sache ce que nous voulons. Trouvez l'icône de la porte, et la voici, juste ici. Et enfin, ce seront les types de moteurs. Remplaçons-le donc ici. Ici, les grades de type de moteur et remplaçons cela ont pris une classe et un type de gène ICN. Et remplaçons enfin ça. Et nous serons prêts à utiliser le moteur, qui est celui-ci. C'est génial. Enfin, ce que je veux faire, c'est parce que nous avons cette vue d'ensemble des voitures en réseau. Ce que vous pouvez faire, c'est mettre du rembourrage. Mettons donc le jumelage des deux côtés, environ 20 ici. Et donnons-lui une marge en haut et en bas. Alors voyons voir ici. Nous en avons donc déjà 24 et en dessous, nous en avons 32. Alors faisons-le. Donc, si je reviens ici, ce que je peux faire, c'est revenir dans le top 24, revenir au bas. Ou peut-être mieux encore, je pourrais mettre une marge ici. Donc 24 parce que je veux de l'espace à l'extérieur et 32 parce que je veux qu'il appuie sur n. Mais pour une raison ou une autre, il n'a pas poussé dedans. Voyons la vue d'ensemble. Alors peut-être devrai-je le mettre sur la carte elle-même. Alors, touchez zéro ici. Et je peux vous taper tous en fait n en tapant automatiquement pour la marge inférieure et cela devrait régler le problème. Pas de commande d'épingles ici non plus. Habituellement, cela le corrige automatiquement, mais cela n'a pas d'importance. Traitons-en ici. Donc, ici, je vais taper zéro, mais pour le jumelage, je vais utiliser 32 en bas. Et maintenant, cela résout bien le problème. La dernière chose que je veux faire est de m' assurer que cet espacement est correct. Donc, ce que je vais faire ici, c'est que nous en avons 24. Ce que je peux faire, c'est modifier légèrement ma grille. Et pour les rangées, je peux en choisir 24 ce qui va les pousser un peu plus loin. Peut-être que nous pouvons avoir cet espacement de 32. Je pense que ça va très bien les regrouper. Et maintenant, nous avons, je pense que nous avons beaucoup plus de marge de manœuvre pour afficher toutes nos icônes et tout notre contenu. Donc, une dernière chose que je voudrais vous montrer ici, car je veux terminer cette vidéo ici. Ensuite, nous allons passer à la section suivante de la vidéo suivante. Donc, quand je passe d'un chœur à l'autre, disons que nous sommes en 2021 et qu'il y a autant de kilomètres. Lucy est là. Vous pouvez voir qu'il a autant de kilomètres, mais il fait 22 pouces. Le type de moteur est une batterie. Nous avons deux ans de garantie. Donc, si je passe à une Porsche Cayenne, par exemple, nous avons cinq portes. Nous avons ce kilométrage, nous avons un an, tout est mis à jour en temps réel. Et c'est là toute la beauté de ces modèles de CMS Webflow car vous créez un modèle. Une fois que tout le contenu que vous ou votre client avez créé sera automatiquement mis à jour. Revenons donc à notre ouragan car c'est ce que nous avons édité. Et comme je l'ai dit, nous allons nous arrêter ici car dans la prochaine vidéo, nous allons créer description du véhicule qui figurera juste en dessous. Mais en fait, parce que c'est assez simple, faisons-le dans cette vidéo. Appuyez donc sur Control K, tapez en def et appelez cette description du véhicule « description ». Et ce que je vais faire, c'est simplement utiliser la couleur blanche ici, comme ça. Allons-y avec huit pour le rayon d'angle. Et en termes de dimensions, voyons ce que nous pouvons faire ici, c'est tout d'abord lui donner 24 % de la marge en haut. On y va. Je vais juste voler ce texte et le coller ici. Il conservera les mêmes paramètres qu'avant. Enfin, ce que je veux faire c'est mettre le texte enrichi à l'intérieur. Appuyez donc sur Control K, tapez du texte enrichi et assurez-vous simplement de le connecter depuis les voitures. Et je vais sélectionner une description du véhicule, et elle sera insérée dans cette description du véhicule. Et enfin, appelons-le, disons texte de description du véhicule. On y va. Je veux juste m'assurer que j'ai du rembourrage sur le côté gauche des 24 ou 24 pouces. Et cela ne fera que l'intégrer. Et je peux mettre le rembourrage supérieur aussi bien que 24 peut-être. Pour la description du véhicule elle-même, je peux choisir 32 en bas. Et voilà. Cette section est terminée et elle va extraire les différentes informations que vous y avez saisies à partir de celles que vous y avez définies. Et comme c' est configuré comme ça, nous pouvons peut-être y aller et apporter des modifications supplémentaires. Mais je pense que c'est là que je voudrais terminer cette vidéo, car dans la vidéo suivante, nous aborderons les spécifications des véhicules. Et si je le montrais, nous devons maintenant nous en occuper et cette vidéo dure déjà 15 minutes, donc je vous verrai dans la vidéo suivante. 183. Modèle de voitures: Reprenons là où nous nous sommes arrêtés avec les spécifications du véhicule. Et en gros, c'est la même section. Il y a juste ces grilles remplies à l'intérieur. Revenons donc à Webflow. Sélectionnez la division d'informations sur ma voiture Control K pour avoir été div. Et c'est ce que l' on appellera la spécification du véhicule. Spécification du véhicule , ligne droite, marge, haut 24, marge inférieure 32. Et nous pouvons lui donner cette couleur de fond blanche. Et nous pouvons opter pour un rayon d' angle de huit. Ensuite, je peux aller à l'intérieur garder et le coller ici. Oups, réessayons. On y va. Ici, où il est écrit tous les avis, je vais le remplacer par une description du véhicule. Ci-dessous. Je vais saisir les informations sur le véhicule. Désolé, spécifications du véhicule. On y va. C'est ce que je voulais. Alors allons-y et clôturons tout cela pour que cela ne nous dérange pas. Alors maintenant, quand je l'ouvre, je dois ensuite mettre un bloc de texte. Appuyez donc sur Ctrl K, tapez du texte, bloc de texte, donnez-lui une classe de bloc de texte. On y va. Et maintenant, je vais mettre dans la catégorie des combinaisons, peut-être, je ne sais pas, des voitures, des modèles. On y va. Et je l'ai fait parce que je vais pouvoir ajouter un rembourrage de 24 de ce côté. Charmant. Et peut-être pouvons-nous apporter des modifications supplémentaires au style. Voyons donc ce que nous pouvons faire ici. Peut-être pouvons-nous ajouter la marge en haut de 24, en bas de 32. Et comme nous avons cette classe de combo ne fera que l' affecter. Maintenant, en dessous de cette touche Control K, tapez def, ajoutez un nouveau div, qui s' appellera performance. Et cette performance sera assurée par une grille, qui hébergera tous nos articles. Mais avant de commencer, je vais d'abord inclure un peu de rembourrage de chaque côté, peut-être 24, comme nous l'avons fait sur le dessus avec celui-ci. Donc, si je sélectionne celui-ci, laissez-moi vérifier. Oui, nous en avons 20. Vous pouvez augmenter ce chiffre à 24. Donc c'est très agréable parce qu'ici nous en avons 24 et maintenant tout fonctionne comme il se doit. Maintenant, avec cet ensemble de performances , je peux appuyer sur Control K et taper div. Et à l'intérieur de ce bloc div, j'aurai besoin de mettre ce texte. J'aurai donc juste besoin de blocs de texte à l'intérieur d'ici. Alors voyons voir. Dans le cadre de la performance, je vais passer de zéro à 100 km/h, comme dans ce K h. Et à l'intérieur de cela, je vais appuyer sur Control K, taper un bloc de texte. Et utilisez la classe de bloc de texte. Et utilisez une classe supplémentaire de voiture, voyons voir, la description des modèles de voiture, la description modèle de cours. Parce que ce que je veux ici, c'est utiliser le normal, tout est comme il se doit. Mais ici, il devrait contenir quelques textes. Alors voyons voir, peut-être que je pourrais même le réduire en taille. Alors peut-être 16 ans. Celui-ci sur 40, c'est trop. Allons-y avec 32. Comme nous sommes à la description d'un modèle de cours, il fonctionnera parfaitement et vous pourrez y insérer le texte. Donc, tout d'abord, sélectionnons ceci et saisissons de zéro à 100 K M H. C'est parti. Appuyez sur Control C, Control V. Et puis sur le suivant, connectez simplement ce champ. Alors on y va. Maintenant, sur celui-ci, je vais le transformer en une pile, alors assurez-vous qu'ils sont comme ça. Donc, connexion de chaque côté. Maintenant, ce que je peux faire, c'est sélectionner mes performances et les transformer en grille. Et ce que je vais faire, c'est créer deux colonnes, ce qui est bien. Et ici, j'aurai trois rangées. Ajoutez donc une ligne supplémentaire ici. Et voyons voir, la distance devrait être de 32, elle devrait être de 24, je pense. Appuyez sur OK, et revenons à XD et vérifions très rapidement. Ils sont donc 24 et c'est très bien. Revenons à ici. Je vais donc simplement appuyer sur Control C Control V. Control C Control V. Il suffit de remplir tous mes champs très rapidement pour pouvoir y ajouter des informations supplémentaires. Donc, ce que je peux faire ici, c'est qu'il y a zéro à 100. Dupliquons celui-ci. La prochaine sera constituée de vannes, comme ça. Et sélectionnons cela et appelons cela des voyelles. Et choisissez celui-ci. Et voyons où sont nos vannes ? Ils le sont, ils sont adorables. La prochaine devrait être à pleine vitesse. Et le terrain lui-même devrait être à pleine vitesse. Donc, dupliquez celui-ci, à toute vitesse. Et changez simplement ce bloc de texte pour qu'il passe à la vitesse maximale à l'intérieur de l'endroit où nous nous trouvons. Voyons à haute voix la vitesse maximale, maximale et maximale. Ensuite, la suivante en dessous devrait être la puissance. Et je vais taper Power. En fait, saisissez-les tous pour que je sache ce qu'ils sont. Donc des cylindres. Et ce dernier devrait être Torque. Connectons donc l'alimentation. Voyons où nous en sommes. Du pouvoir, du pouvoir, de la beauté. Et cela devrait être des cylindres. Dupliquons donc cette classe. Et cela devrait être des cylindres. Et enfin, ce dernier devrait être Torque. Alors duplique-le. Et connectons simplement cela au couple comme ça. Cette section est maintenant terminée. Ce que je peux faire ensuite, c'est parce que nous sommes prêts à être performants. Je vais voir l'espacement et la distance est de 32. Je peux donc peut-être le donner, alors sélectionnez la performance et donnez-vous la marge inférieure de 32, peut-être comme ça. Et voyons voir, cette spécification de véhicule a une marge inférieure de 32, mais je ne le veux pas. Je veux vraiment que le rembourrage soit 32. Cela suit donc tout ce que je fais ici. Nous allons sélectionner ce texte, appuyer sur Contrôle C, Contrôle V, et le déplacer en dessous de ma performance. Et le suivant devrait parler de sécurité, de sécurité comme ça. Et en gros, je vais faire de même pour la sécurité que j'ai faite ici. La différence, c'est que je vais avoir une configuration un peu différente. Nous allons donc sélectionner ce bloc de texte, appuyer sur Ctrl K en tapant div. Et à l'intérieur de ce bloc div, que je vais appeler entrée de sécurité en 24 de chaque côté. Comme ça. Je vais en faire une grille. Mais maintenant, il va avoir deux colonnes, mais 245 lignes différentes. Donc 2345 lignes différentes. On y va. Maintenant, à l'intérieur de cela, vous appuyez sur Control K, tapez en def. Et ce premier devrait être, voyons voir, la sécurité dans la forme. Peut-être que je peux l'appeler colonne de gauche ou colonne de droite. C'est vraiment à vous de décider comment vous voulez le faire. Mais je pense que cela va très bien fonctionner pour celui-ci. Mais je peux le faire, c'est peut-être simplement mettre des blocs de texte. Je n'ai même pas besoin de bloquer. Voyons donc ce que nous pouvons faire ici. Appuyez donc sur Ctrl K, tapez dans le bloc de texte. Comme ça. Donnons-lui un style de bloc de texte et donnons-lui une description du modèle de cours en classe combinée. Oui, ça marche bien. Laisse-moi regarder les textes. Ce que nous avons ici. C'est génial. Appuyez donc sur Control C, Control V, Control V, Control V, V, V, v, V, V, V, V, jusqu'à ce que je remplisse tout mon texte. Et maintenant, ce que je vais faire, c'est copier et coller le texte. Maintenant, ce texte est très important car il reflétera tous les éléments que possède réellement votre voiture. Ainsi, par exemple vous pouvez voir une assistance au freinage si adaptative avec maintien et autres dispositifs de ce genre. Mais comme nous n'avons pas utilisé le système de gestion de contenu à cette fin, car il est évident que certaines voitures, en particulier les voitures plus anciennes, peuvent avoir deux ou trois caractéristiques de sécurité différentes alors que les voitures plus récentes, surtout avec ces voitures classiques, ou disons que les voitures de luxe, comme dans ce cas, auront environ 1 000 fonctionnalités différentes. Il est donc très difficile de juger de ce que vous pouvez faire à l'intérieur de l'endroit où vous vous trouvez. Mais dans ce cas, nous pouvons peut-être demander nos clients de remplir eux-mêmes ces informations. Donc, dans ce cas, comme vous pouvez le voir, nous avons maintenant cette grille. Donc, sécurité, nous en avons 24 de chaque côté, ce qui est fantastique, mais je peux ensuite appuyer sur Control C, Control V. Déplacer ceci en dessous. J'espère que ce n'est pas ici mais ici. Pour une raison ou une autre, il ne l'a pas fait. Allons à Control Z. Textblock à voix haute. Et déplaçons simplement le champ de sécurité juste au-dessus. J'ai donc clairement quelques bugs avec le Webflow. On y va. Donc, la sécurité, la prochaine étape sera la commodité du conducteur. Ce que je voulais dire tout à c'est que votre client n'aura peut-être pas ces informations prêtes à être incluses dans le CMS. Peut-être que la meilleure option pour eux serait saisir ces informations manuellement plus tard, car comme je l'ai dit, certaines voitures sont équipées exactement des mêmes systèmes, comme l'ABS, freins de stationnement, les caméras de surveillance de nos jours, mais pas les autres voitures. C'est donc peut-être une sage décision plutôt que à votre disposition pour mettre à votre disposition pour votre client et de simplement lui fournir ces informations afin qu'il puisse manuellement accéder au site, y accéder, double-cliquez et remplacez, supprimez ou modifiez simplement les champs du design ER sans le casser. Parce qu'ici, nous allons juste avoir une grille à l'intérieur. Donc ça va être très simple. Dupliquons celui-ci. Cela va être pratique pour le conducteur. Et j'adore travailler avec des grilles la même raison. Vous pouvez donc voir que j' utilise simplement la même grille, mais je remplace simplement le texte dans un autre texte. Voyons voir. Et parce que nous n'utilisons qu'une seule classe combinée pour cela, savoir la description du modèle de voitures. C'est juste hériter de cette classe de comp. Et cela nous montre simplement ce que nous voulons voir en premier lieu, l'espacement en haut et en bas, c'est exactement ce que je veux vraiment. Allons-y avec celui-ci. Allons-y avec celui-ci. Intégration au smartphone. On y va et on en a deux autres comme ça. Et enfin, comme ça. On y va. Maintenant que c'est terminé pour le confort du conducteur, j'en ai une autre. Appuyez donc sur Control C, Control V. Et je vais essayer de le positionner juste en dessous de zéro. Essayons donc de le faire de cette façon. Appuyez sur Control C, Control V sur celui-ci. Et je vais positionner mes blocs de texte juste au-dessus. Ce sera une question de sécurité. Supprimer la classe. Mais supprimez le doublon. Ce sera une question de sécurité. Et ici, je vais simplement taper en toute sécurité. Et encore une fois pour la sécurité. Nous allons donc dupliquer cette classe et renommer la classe pour que la sécurité existe déjà. Voyons voir. Ce sera en fait extérieur. Extérieur. Et cela devrait dire extérieur comme ça. Donc, ici, à l' extérieur, nous allons avoir un peu moins d'objets. Donc parce que nous avons ici une classe combinée de exterior, la classe que nous venons de copier. Je vais également vous montrer comment gérer cela. Double-cliquez ici. Ensuite, double-cliquez ici, contrôle C, contrôle V. J'ai les enfants voleurs d' étoiles, que j'ai également sur ma voiture. Ils ne te donnent même plus le pneu de secours. Il vous suffit de réparer votre pneu, d'acheter ou de vendre. En gros, si tu es coincé au bout du fil. Maintenant que nous en avons pour l'extérieur, vous pouvez voir que ces quatre font défaut. Je vais donc simplement m' en débarrasser comme ça. Et maintenant, il ne nous reste que ces champs vides. Donc, comme cela a sa propre classe, je peux simplement supprimer les lignes. C'est pourquoi j'adore travailler avec ces grilles, très simples à réaliser. Et comme l'intérieur est exactement le même que celui-ci, je vais appuyer sur Control C Control V. Et sur Control C Control V juste ici. Déplacez-le juste en dessous. Ou déplacez-le juste en haut où vous le souhaitez. Ici. Nous allons juste taper en intérieur. Et nous allons avoir terminé en quelques secondes. Parce que la dernière section a en fait besoin d'être peaufinée. Ce ne sera pas aussi simple que celui-ci, mais je vais également vous montrer une petite astuce pour accélérer les choses. Alors cliquons ici, contrôlez C, contrôle V, double-cliquez sur Contrôle V, Contrôle V. C'est parti. Et une dernière chose , Control V. Maintenant que c'est fait, je vais choisir celui-ci parce que c' est notre intérieur. Dupliquez donc l'intérieur de la classe. Vous pouvez le voir parce que c'est l'extérieur, c'est l'intérieur. Cela fonctionne très bien. Et une dernière chose que je voudrais vous montrer, c'est parce que nous avons ces dimensions, qui sont les suivantes. Et nous devons les extraire du CMS. Alors, comment pouvons-nous nous en sortir avec des dettes ? Clôturons tout cela en fait. Laisse-moi. Il suffit de voir ce que j'ai fait ici. Donc, ce que je peux faire ici, c'est prendre ces informations. Voyons voir, c' était une performance. Je peux donc appuyer sur Control C, Control V pour coller cette section et la faire glisser jusqu'ici. Et je peux ensuite déplacer ces deux-là vers le haut, comme ça. Ensuite, je peux utiliser mon manuel Control C Control V et coller juste en dessous de mon intérieur, comme ça. Et comme il y en aura un peu plus, je vais utiliser cette performance et je vais dupliquer la classe et l'appeler dimensions. Dimensions. Et maintenant, parce que j'en aurai besoin de quatre de chaque côté, sauf ici, mais j'en aurai quand même besoin de quatre. Allons-y et ajoutons parce que nous en sommes maintenant aux dimensions, vous pouvez cliquer ici et simplement ajouter une nouvelle ligne. Et ce sera vide, mais il y aura une quantité à l'intérieur. Alors réglons-y. Donc, cette première, nous allons la dupliquer. Cela s'appellera hauteur. Celui-ci sera appelé poids. Celui-là. Alors, il suffit de le dupliquer. Il s'appellera Linked. Le prochain s' appellera Boot Space. Celui-ci s' appellera Wheelbase. Ce sera le cas, voyons ce que nous avons réellement supprimé ici. Donc réservoir de carburant, donc renommer, réservoir de carburant comme ça. Et copiez-en et collez-en un de plus. Et cette dernière en bas va être mouillée. Ramenons donc cela lorsque la largeur de la scène sera dupliquée. Et enfin, double-cliquez et tapez tout cela en hauteur. Cela va être lié. Ce sera l'empattement. Ce sera du poids. Ce sera Brightspace. Et la capacité du réservoir sera remplie. Et enfin, connectons-les simplement. Alors celui-ci, connectons-le à la largeur. Voyons donc où nous en sommes ici. Je pense que c'est ici, on y est. C'est la largeur. Il s'agit de la capacité du réservoir de carburant, qui est celle-ci. Ce sera pour l'empattement. C va se baser, la base va se baser, là où elle se trouve. Puissance. Empattement. Génial. Ce sera pour l'espace de démarrage. Commençons par l'espace supérieur du coffre. Donc, pour une raison ou une autre, cela ne fait que remplacer leur position. Donc, la longueur, la longueur, c'est ici. Ce sera pour les poids. Voyons voir, attendre, attendre, attendre, attendre, attendre, attendre, attendre. Et enfin, ce sera pour la hauteur, comme ça. Et maintenant, tout est terminé. Laisse-moi tout détruire. Donc, si je clique sur l'aperçu dès maintenant sur cette page, nous avons ici nos images telles que nous les avons expliquées au fur et à mesure. Cette vue d'ensemble. Nous avons, nous avons une description égale, nous avons des spécifications dans lesquelles nous avons des performances. Peut-être pouvons-nous ajuster cela un peu afin d'obtenir un peu meilleur espacement. Je pense que nous l'avons , ce qui est excellent. Nous avons la commodité du conducteur, à l'extérieur, à l'intérieur et à l'intérieur. Et cela devrait enfin indiquer les dimensions. Réglons donc ce problème très rapidement. Dimensions. Et comme il s'agit d'un modèle de cours classique, je vais changer sa couleur pour différencier légèrement, comme vous le voyez ici. Cela correspond donc un peu plus à ces titres en tête. Et je pense que c'est en gros la dernière chose à faire est de connecter cette carte pour la suivre. Et comment pouvons-nous le faire est en fait très simple. Vous pouvez donc sélectionner la carte d'action de la voiture. Et vous pouvez revenir en haut ici. Et pour le poste, je vais choisir Sticky. Et tu dois le dire à qui tu veux qu'il colle ? Je vais donc lui dire de s' en tenir à peut-être 20. Vous pouvez voir que nous avons déjà ces options par défaut. Alors maintenant, regardez cette magie. Laisse-moi me trouver pour que tu puisses voir un peu mieux. Donc, ici, tout fonctionne, tout est comme il se doit. Mais maintenant, quand je commence à faire défiler la page et qu'il atteint 20 %, ça va rester. Et ça va tenir. Et cela suivra quoi que nous fassions. Cela va suivre un moment quand il aura atteint la fin de la section, il va juste s'arrêter. Et maintenant, quand je commence à faire défiler la page, tout va bien fonctionner. Vous pouvez donc voir à quel point c'est très simple à faire. Et j'adore vraiment cette fonctionnalité. Et si nous passons à Carol Calculate, par exemple et que lorsque je commence à faire défiler la page, vous pouvez voir que l'effet se produit déjà. Il défile déjà. Une dernière chose que nous devons faire si je vous ramène à XD, c'est que nous avons ceci, notre sélection exclusive, et il suffit de coller et je la connecterai plus tard. Revenons donc à notre page d'accueil ici. Les pages d'accueil utilisent donc exactement cette section. Alors partons d'ici. Collections exclusives. Appuyez donc sur Control C, puis accédez à nos pages de modèles de cours, contrôle V. Et je vais le mettre ici. Mais dans ce cas, je vais renommer cette catégorie de voitures de sélection exclusives, modèles. C'est parti, car nous devons apporter quelques modifications. Donc, ce que je vais faire ici, c'est à l'intérieur du conteneur, passons à l'emballage de la liste des collections. Et c'est ici que je vais dupliquer la classe et saisir des modèles de voitures. Et ici, passons très rapidement aux paramètres. Ici. Ce que je peux montrer, c'est commencer par un. Commençons à huit heures, par exemple , cette fois ou non, commençons à un. Mais pour celui-ci, trions la commande. Voyons donc ce que nous pouvons faire ici. Passons donc à une commande aléatoire. Et cela devrait très bien fonctionner. Pourquoi il n'a pas choisi cela. Passons donc à un ordre aléatoire, cliquez sur Enregistrer. Et maintenant, quand je passe à l'aperçu, vous pouvez voir que nous sommes là, mais nous avons toujours notre Lamborghini, ce que nous ne voulons pas voir. En fait. Ce que je peux faire ici, c'est un mélange aléatoire. Passons à autre chose. Alors peut-être que nous pouvons opter pour quelque chose d'un peu différent. Tu peux te fier au nom. Quelque chose d'un peu différent. Peut-être créé du plus récent au plus ancien. Peut-être que nous pouvons le montrer. Essayons donc ça. Donc, quand je clique sur l' aperçu ici, et quand je passe à, disons escalader. Voyons si ça aide. C'est le cas, mais quand je suis passé à McLaren, par exemple, il devrait maintenant être mis à jour et déplacé. Peut-être devrions-nous peut-être nous en procurer un peu plus. Nous devons donc montrer que les filtres ou les égaux ne sont pas égaux, peut-être que le nom n'est pas égal. Cliquez sur Enregistrer, spécifiez une valeur valide. Je devrais peut-être me renseigner là-dessus, mais je pense aux œuvres les plus anciennes aux plus récentes, sauf lorsque la voiture est montrée. Vous pouvez donc le voir ici. Donc ça marche. À mon avis, la meilleure version est celle-ci. Donc, pour commander au hasard, cliquez sur Enregistrer. Donc, quoi que vous puissiez, cela montrera que je peux même ajouter un nouveau filtre ici, le créer et peut-être en afficher encore plus ci-dessous. Donc je ne sais pas, vous pouvez faire ce que vous voulez en gros ici, mais voir toutes les voitures est le bouton que nous allons lier dans l'une des prochaines leçons. Mais pour l'instant, laissez-moi vous en tenir là. Enfin, récapitulons rapidement ce que nous avons fait, car nous en sommes déjà à 25 minutes, ce qui est l'une des leçons les plus longues à ce jour. Nous sommes allés de l'avant et avons créé ceci, cela fonctionne , cela tient, créé ces éléments, tous ces éléments. Et finalement, nous l'avons créé. Et je pense que cette marge supérieure devrait être légèrement inférieure à mon avis. Voyons donc ce qu' il a fait à l'origine. Oui. J'adorerais les années 200, donc je pense que c'est bien. Contactez-nous. Tout fonctionne donc comme il se doit. Et comme je l'ai dit, nous traiterons responsive un peu plus tard dans ce cours, et nous allons corriger cet espacement. Maintenant que c'est terminé, nous pouvons passer aux pages suivantes, qui concernent les prêts, et nous contacter. Et lorsque nous aurons terminé ces pages, nous pourrons peut-être régler les problèmes de réactivité que nous rencontrons. Et peut-être pourrons-nous alors nous adapter un peu plus en profondeur à des problèmes tels que celui-ci et comment pouvons-nous changer cela ? Cela nous montre donc un ordre aléatoire, ce qui n'est pas la page sur laquelle nous nous trouvons actuellement. Je vous verrai donc dans la prochaine vidéo où nous aborderons la page des prêts. Je t'y verrai. 184. Couper les cartes de voiture: Avant de poursuivre notre travail sur Webflow, nous devons d'abord relier toutes ces cartes, cartes aux pages elles-mêmes. Ainsi, lorsque notre utilisateur clique sur l'une de ces cartes, il est amené à consulter la page réelle de la voiture et à en savoir plus sur la voiture elle-même. Nous voici donc dans Webflow et comment nous pouvons le faire. C'est vraiment très simple. Je ne l'ai pas fait exprès parce que je voulais vous montrer comment ces correctifs peuvent être réalisés. Nous voici donc dans nos cartes de voiture, sur notre page d'accueil. Donc, quand je clique ici, vous pouvez voir que je n'ai aucun lien. Vous devrez donc lier toutes vos pages et tous vos actifs si vous voulez qu'ils mènent quelque part, qu'ils mènent vos utilisateurs quelque part. Alors, comment pouvons-nous le faire à l'intérieur de la carte de voiture elle-même Je vais appuyer sur Control K et taper link block. Il vous suffit maintenant de cliquer sur le bloc de liens. Il va le mettre ici et ne t'en fais pas trop. Nous allons associer les valeurs dans une seconde. Ce que je vais faire, c'est le positionner ici, par exemple, puis utiliser les informations de ma carte de voiture, placer dans ce bloc de liens, puis l'image de la carte de voiture la mettre également dans le bloc d' envoi. Et vous pouvez maintenant voir que le style est complètement faux. Cela est maintenant souligné nos textes, ce que nous ne voulons pas. Sélectionnez donc votre blog de liens. Allez ici, où se trouve la topographie ? Et vous pouvez voir que la déclaration est définie par défaut. Cliquez simplement ici où il est indiqué « aucun ». Et cela va supprimer tout votre style à partir de là. Nous avons donc maintenant un bloc de liens numéro quatre. Ce que je vais faire, c'est dire renommer cette classe et l'appeler car, hard link, block, comme ça. Et maintenant, cela aura la même valeur pour les trois car ils sont connectés. La dernière chose à faire est de le connecter à quelque chose. Ainsi, lorsque vous sélectionnez le bloc de liens de votre carte de voiture, cliquez ici et rendez-vous ici où il est indiqué page de collecte. Lorsque vous cliquez dessus, cela vous amène à la voiture actuelle. Il suffit donc de cliquer ici et la carte que vous avez réellement sélectionnée s'ouvrira. C'est donc notre voiture actuelle. Vous pouvez le configurer pour ouvrir un nouvel onglet si vous le souhaitez, mais je ne vais pas le faire. Et rappelons-nous qu'il s' agit d'un bloc de liens vers une carte de voiture. Ce que nous devons faire, c'est le configurer pour toutes nos pages. Mais tout d'abord, testons-le et voyons s'il fonctionne. Tout fonctionne donc comme il se doit. C'est l'escalade, par exemple si je clique dessus, cela m'amène à la page d'escalade, ce que je veux en fait. Mais ici, lorsque je fais défiler la page vers le bas et que je clique, vous pouvez voir que cela ne fonctionne pas. Donc, ce que nous allons faire, c'est sortir du mode aperçu, revenir à nos pages, passer aux voitures, car c'est là que toutes nos voitures sont connectées. Et quand je clique ici, vous pouvez voir que nous n' avons aucun bogue de lien car nous devons également le connecter ici. Sélectionnez donc votre carte de voiture, appuyez sur Contrôle K, tapez le bloc de liens, mettez-la dedans, puis déposez simplement vos objets à l'intérieur. Sélectionnez votre bloc de liens. Et nous allons lui donner une classe de cartes, un bloc de liens de carte. On y va. Et vous pouvez le voir tout de suite, cela va supprimer le style que nous avions créé précédemment. Et il ne nous reste plus qu' à connecter cette collection. Choisissez la page de collection. suffit donc de cliquer ici où il est indiqué page de collection, choisir une page de collection, de choisir la voiture actuelle. Et maintenant, toutes ces voitures sont connectées. Donc, si je clique sur l'aperçu très rapidement et que je sélectionne quelque chose comme Porsche Cayenne, cliquez sur le bouton droit pour ouvrir la page Porsche Cayenne, mais nous avons toujours le même problème ici. Nous devons donc le faire également. Ainsi, tant que nous sommes sur un modèle de cours, peu importe la page. Dans ce cas, nous sommes à nouveau sur le Bosch. Nous devons le faire encore une fois. Donc, si je clique là, appuie sur Ctrl K, tape le bloc de liens, mets-le là. Et encore une fois, apportez les informations de ma carte de voiture à l'intérieur et l'image de ma carte de voiture. Vous pouvez donc imaginer cela comme une superposition avec un bloc de liens de site Lincoln, une carte, un bloc de liens de carte. On y va. Et il va hériter du même style. Nous allons cliquer ici, puis ici, choisir la page de collection, la voiture actuelle, et le tour est joué. Mais maintenant, nous avons un autre problème. Nous avons donc ces trois-là. Donc, quand j'ai cliqué sur l'aperçu, souvenez-vous que nous sommes sur le Porsche Cayenne. Donc, ces trois-là fonctionneront très bien. Donc, quand tu cliques juste là, ça m'amène à Lucy. Et il va être mis à jour. Alors donnez-lui juste un peu de temps. Mais nous avons quand même Lucid Air ici. Et nous sommes sur Lucy, leur page, ce que nous ne voulons pas parce que cela n'a aucun sens. Donc, lorsque je clique juste là pour sortir du mode aperçu et que je clique sur l'emballage de la liste des collections pour cette collection de voitures exclusive sur la page de mon modèle de cours. Ce que je peux faire, c'est revenir à mes paramètres ici. Et voici mon ordre de tri et j'ai mon filtre. Je vais donc ajouter un nouveau filtre. Et ici, je vais installer quelque chose comme une voiture. Et je vais choisir si ce n' est pas une voiture actuelle. Je ne veux donc pas que ce soit ce que je suis en train de regarder. Donc, par exemple, je regarde Lucy là-bas. Je ne veux pas qu'il soit là parce que je suis déjà en train de le regarder. Alors montrez-moi une autre voiture. Donc, quand j'ai cliqué sur Enregistrer, comme vous pouvez le voir, j'ai simplement changé ces éléments. Et maintenant je peux le faire, j'ai juste choisi le shuffle aléatoire. Je peux donc le faire si je le veux ou je peux choisir autre chose. Je vous ai déjà montré comment procéder. Alors maintenant, comme vous pouvez le voir, nous sommes sur une page d'erreur lucide. Tout fonctionne donc comme il se doit. Nous avons tous huit images. Ils fonctionnent et ils collent au sommet. Donc, si je fais défiler la page jusqu'en bas, vous pouvez voir que nous avons notre collection exclusive et qu'il n'y a plus de Lucid Air. Alors testons-le. Lorsque je clique sur Cadillac escalate, par exemple, nous ne sommes qu'une page d'escalade. Donc, lorsque je fais défiler la page vers le bas, on ne voit plus d'escalade. Et c'est comme ça qu'il est facile de connecter cette maison très simplement. C'est à mettre en place. C'est pourquoi c'est important. Et comme je l'ai dit, je l'ai volontairement omis comme ça parce que je voulais vous montrer la puissance des blocs de liens. Vous pouvez placer ces blocs de liens sur les images. Vous devez, vous pouvez créer une image en tant que lien. Mais si vous le souhaitez, par exemple sur la page des prêts, nous avons cette image avec trois images différentes. Peut-être souhaitez-vous tout mettre en tant que bloc de liens unique. Vous pouvez donc simplement mettre un blog de liens en tant que style de superposition. Il l'explique déjà ici et cela mènera vos utilisateurs quelque part s'ils cliquent dessus, ou vous pouvez aller dans l'autre sens et simplement styliser les trois images pour qu'elles soient des liens distincts. Et vous allez donc obtenir les mêmes résultats. Tout dépend donc vraiment de vous et de la mise en page que vous souhaitez réaliser dans votre conception. 185. Page de prêts: Allons-y maintenant et créons une page de prêts. Donc, à partir des pages sombres, cliquez ici et saisissez des prêts. On y va. Cliquez sur Créer et vérifiez simplement si le corps a hérité du style qu'il a. Donc, ce que nous allons faire, tapez Control K dans la navigation, Control, K, N tapez dans le formulaire, Control K tapez sur la carte et Control K tapez dans le pied de page. Maintenant que vous l'avez fait, nous pouvons sélectionner le type Body hit Control K dans la section. Ajoutez une classe de section. Déplacez donc la section juste en dessous de notre barre de navigation. Et à l'intérieur de cette section, si vous voulez contrôler K, tapez def et lui donner une classe de conteneur, comme ça. C'est génial. Et ce que je peux faire, c'est qu'à l'intérieur de ce conteneur, je peux mettre ce texte, mais je vais juste en créer un autre à l'intérieur. Appuyez donc sur Control K, tapez en définition. Et celui-ci, je vais nommer un rappeur de Lone Hero comme ça. Et à l'intérieur de cet emballage de héros, permettez-moi d'appuyer sur Control K, de saisir titre H1 auditif et de saisir H1, que nous avons déjà créé, qui est centré. On y va. Comme ça. Permettez-moi de copier et coller du texte à l'intérieur comme ça. Et puis ce que je peux faire, c'est en créer un autre, disons que Control K tape dans div. Et cette division de Donnez-lui un nom de prêts, d'images de héros. Et je vais en fait en faire une grille. Mais avant de le faire, permettez-moi d'ajouter mes images Control K à l'image épingle. Et cette image, je vais lui donner l'Audi RS 5. Donnons-lui le nom d'Audi S5. Et encore une fois, tapez Control K dans l'image. Et cette image sera celle du Range Rover, qui est celui-ci. Et appelez ça une gamme Over Voc comme ça. Enfin, ce que je veux faire, c'est en une grille avec de bonnes notes. Enfin, ce que je peux faire ici, c'est peut-être porter ce chiffre à 24, peut-être pas. Restons-en à 16 car cela conservera la même consistance pour celui-ci. Ce que je vais faire, c'est l'aligner en bas à droite ici. Et celui-ci est déjà aligné vers le bas. Mais juste pour être sûre, et je pense que c'est une bonne chose. C'est excellent et c'est ce dont nous avons besoin pour cette section en particulier. Et donnons-lui une classe de prêts aux héros qui, et maintenant sélectionnons le body hit Control K type been section. Nous pouvons donc ajouter la nouvelle section. Donnons-lui une classe de position de section juste en dessous de cette section, comme suit. Et nous appellerons la prochaine rubrique. prêts sont des prêts comme ça. Et à l'intérieur, appuyons sur Turning Div, tapant container. Disons que les prêts sont les principaux prêts parce qu'ils indiquent les lignes directrices du marché. Les lignes de tête, c'est parti. Et à l'intérieur de cela, ce que nous pouvons faire, c'est peut-être mettre dans un autre emballage ou quelque chose comme ça. Voyons ce que nous pouvons faire. Permettez-moi de créer un autre div, donc Control K tape en def. Et au lieu de parler de « wrapper », appelons-les «  meilleurs prêts du marché » comme ça. Et à l'intérieur de ça, mais je peux appuyer sur Control K dans le titre. Choisissez h trois. Et h trois devrait avoir h trois. Voyons voir, il fait noir. Donnons-le au centre. Tellement centré et centrez-le simplement comme TO. Permettez-moi donc de copier et coller le texte à l'intérieur. Et pour cette section, je vais lui donner une distance de 200 peut-être même moins. Je ne sais pas. Voyons à quoi cela ressemble une fois prévisualisé. Oui, 200 c'est bien parce que ce sera toujours lisible et ce sera toujours une scène à partir d'ici. Continuons donc ainsi et créons-en un autre. Donc Control D div. Et cette division, je vais appeler des prêts pour réduire les avantages, comme l'endettement. Et à l'intérieur de ça. Créons-en un premier. Donc Control K tape def dans ce div, ce que je vais appeler, voyons voir, simple commodité. Je vais inclure l'image Control K. L'image va être simple et pratique. Trouvons-le juste ici. C'est donc cette icône. Et en dessous de cette icône, je vais à nouveau mettre le h trois, donc Control K pour épingler le hareng. Utilise l'âge de trois ans, et oui, on peut utiliser n'importe lequel. Passons donc à un simple inconvénient pour le texte. Et en dessous, je vais appuyer une fois de plus sur Ctrl K en tapant p pour le paragraphe. Et ce paragraphe va contenir ce texte. Mais pour le paragraphe, utilisons P en gris parce que je vais lui donner la couleur grise à partir d'ici les notes. Enfin, ce que je peux faire, c'est les placer dans une boîte flexible verticale, assurant qu'ils sont centrés comme ça. Ce que je peux aussi faire, c'est peut-être parce que cela vient de la gauche, peut-être que je peux le donner à l'âge de trois ans centré sur le fait que nous avons juste en haut. Ou était-ce Qu'est-ce que c'était ? H3 centré sur l'obscurité. OK, donc H trois sombres puis centrés. Génial. Maintenant que nous sommes endettés, mais je peux me contenter de cela, nous pouvons peut-être lui donner une distance de 24 pour atteindre le sommet. Appuyons sur Se débarrasser de celui-ci. Et au sommet, on peut lui donner une marge maximale de 24 points comme ça. Et enfin, avec cette icône qui va s'appeler « Voyons voir, simple commodité ». Icm. Donnons-lui la marge inférieure de 24, par exemple super. Maintenant que c'est terminé, je vais transformer les avantages de ce prêt en grille, lui donner une autre colonne, débarrasser de cette ligne et peut-être ajouter quelque chose comme, je ne sais pas, 24 ici, 32. Voyons à quoi cela ressemble. C'est bien pour le moment. Alors fermons-le. Appuyez sur Control C, Control V, Control V sur celui-ci et sur les prêts, les avantages, je vais juste lui donner une marge maximale de 64 pour le pimenter un peu. Maintenant, celui-ci, je vais dupliquer la classe et renommer en options de paiement. Et permettez-moi de copier le texte et de voir s'il convient. Est-ce que. On y va. Passons tout de suite à cette dernière question pour avoir l'esprit tranquille. Donc, dupliquez la grille de tranquillité d'esprit. Et changeons cela. Paiements dupliqués. Icône. Remplaçons-la par une image de lieu et retrouvons-la ici. Voyons donc où il se trouve. C'est parti. Donc, note de l'icône de paiement. Et enfin, remplaçons celui-ci. Il suffit donc de le dupliquer et de l' appeler Tranquillité d'esprit, ICN. Trouvons-le et voyons où il se trouve. C'est celui avec le bouclier, qui est celui-ci. On y va. Maintenant que c'est terminé, nous pouvons jouer encore plus avec ces paramètres si nous le voulons. Mais je pense que c'est très bien. Mais je vais ensuite créer cette section si je l'applique à notre design, qui est fait pour cela. Ce que nous pouvons faire dans ce cas, c'est copier cette section que nous avons sur notre page d'accueil et ajuster légèrement et modifier ces positionnements un peu plus tard. Donc, pour gagner un peu de temps, mais je peux revenir à la page d'accueil. Utilisez cette section. Contrôle C. Accédez ensuite à notre page de prêts. Sélectionnez notre Body Control V et positionnez-le ici. On y va. Maintenant, au lieu de dire qui nous sommes, je vais dupliquer ce cours et l'appeler partenaires. Comme ça. Ici, je vais le dupliquer. Parce que l'image du partenaire, cliquez sur le rouage, remplacez l'image et trouvez l'image de mon partenaire. On y va. Charmant. Enfin, prenons le texte et remplacons-le ici. Comme ça. Et enfin, ce que nous avons, c'est qui a l'expérience entre les prêts ? C'est toi, tes prochains ? On y va. C'est très bien. Enfin, ce dont nous avons besoin, c'est que nous devons peut-être le mettre seul dans une division. Ou nous pouvons même simplement mettre des images à l'intérieur. Essayons donc cela d'abord et voyons comment cela fonctionne. Ou ce que nous pouvons faire, c'est simplement le faire. Appuyez sur Control K en mode def. Et je vais mettre cette image dans un div comme celui-ci. Maintenant, ce bloc div a besoin d'une hauteur de 100 % ses parents et d'une largeur de 60 %, je crois. Est-ce que c'était la largeur de l'image ? Voyons voir. Maintenant, la largeur maximale est de 100 %. Alors faisons-le. La largeur maximale est de 100 %. Mais pour une raison ou une autre, cela ne me permet tout simplement pas de le faire. Essayons cette astuce une fois de plus. Ce sera donc, disons, 60 %. Et débarrassons-nous de celui-ci. Et ce contenu. Au lieu de nous contenter, je vais dupliquer le cours et parler de partenaires. Du contenu, comme ça. Et je vais lui donner une largeur de, disons, 30 % ou peut-être 40 %. Oui, je pense que ça va très bien marcher avant de passer à autre chose, laisse-moi vérifier la maison et voir si elle tombe en panne ici. Ça ne l'a pas fait. Alors lisons. Revenons donc aux poumons. Et maintenant que nous l'avons fait, nous allons utiliser ce bloc div, l' appeler, le renommer, l'appeler en partie nerfs, images. Et pour le positionner, choisissons un parent. Et à l'intérieur de cela, appuyez sur Ctrl K, tapez dans l'image. Choisissez une image. Et je vais choisir l'un d'entre eux. Donc, cette fois 1,1 fois de plus, alors appuyez sur Contrôle K pour taper dans l'image. Pour cette image, je vais choisir l'autre partenaire. J'espère ne pas avoir exporté. On y va. Et maintenant, jouons avec eux. Ce sera donc un crédit-bail. Alors appelons-le comme ça. Ce sera Santander. Et pour les deux, évidemment, nous allons mettre le positionnement. Donc, au lieu d'une position statique, je vais la changer en position absolue. Et cela va me montrer que l' absolu est réservé aux images des partenaires, et c'est le cas ici. Donc, en tant que leasing , faites de même. Jouons donc avec le positionnement. Voyons donc quelque chose comme ça. Je peux peut-être mettre le bronzage au top. C'est vrai. C'était comme ça ? Oui, ça l'était. Donc en haut à droite, ns Leasing se trouvera en haut, en bas à gauche. Parfois, il faut aller en haut à droite et le leasing S en bas à gauche. Et jouons simplement avec certains paramètres. Santander peut donc aller ici, quelque chose comme ça. Peut-être. Ça peut aller jusqu'ici peut-être. Donc encore une fois, ces bugs de positionnement. Allons-y donc avec la marge inférieure cette fois, comme ça. Et allons-y avec la gauche qui veut quelque chose comme ça. Essayons donc de l'imiter. Nous en avons donc 20 sur le côté et cinq. Allons-y cinq. Et allons-y en 20. Oups. Alors maintenant, allons-y avec dix. Voyons pourquoi cela se produit. Donc, si je clique ici puis ici, c'est parti, ça marche très bien. Lorsque vous cliquez sur Aperçu, cela fonctionne à nouveau, sorte que tout se passe comme il se doit. Et en gros, c'est notre page terminée. Vous pouvez voir à quel point c' est facile lorsque vous avez tous ces éléments et que vous pouvez simplement les regrouper. Je ne comprends pas vraiment pourquoi cela se passe avec ces images. Il suffit de rebondir à gauche et à droite. Si je clique ici puis ici, vous pouvez voir que tout va bien. Mais ensuite, lorsque je fais défiler la page de haut en bas et que je fais autre chose, elle rebondit simplement sur sa place. Il faut donc toujours comprendre ces choses. Et c'est essentiellement la vie d'un développeur. C'est donc en gros tout pour notre page de prêts. La seule page qui nous reste à vraiment concevoir est cette page Contactez-nous, qui va être très simple à réaliser. En gros, il suffit d'ajouter une image. Je vous verrai donc dans la prochaine vidéo où nous allons terminer cela. 186. Page de contact: Allons-y maintenant et créons cette dernière page. Donc, ici, je vais cliquer sur la nouvelle page, taper Contactez-nous, cliquer sur Créer. Et ici, vérifions encore une fois le corps, la couleur de la carrosserie, c'est bon. Alors ici, faisons de même pour contrôler le type K dans la navigation. Type de contrôle K dans le formulaire, type de contrôle K dans la carte, contrôle K saisie dans le pied de page. Et une dernière chose que je veux faire ici est de taper Control K dans div. Et appelons ce bloc de divisions, disons un showroom d'observation comme celui-ci. Et à l'intérieur de ce div, qui aura une largeur de 100 %, largeur maximale est de 100 % parce que je veux que cette image prenne le contrôle de la largeur totale. Kate, j'ai été photographiée. Et choisissons une image qui sera celle-ci. On y va. Et je vais juste l'appeler une image d' une salle d'exposition d'araignées. Et cette image occupera 100 % de l'espace. Et en gros, c'est tout pour cette page, vous pouvez voir à quel point elle est très simple à créer. Vous pouvez peut-être mettre un texte de présentation ici, mais je ne pense pas vraiment que ce soit nécessaire. Et je pense que c'est suffisant pour notre page. En gros, nous pouvons maintenant commencer à nous connecter. Ce sont des liens. Je vais donc arrêter la vidéo ici et je vais vous parler dans la vidéo suivante. Nous allons connecter tous ces liens et tous ces boutons ils nous mènent quelque part au lieu de nous retrouver sur une page vide. Je te verrai donc dans la prochaine vidéo. 187. Ajouter des liens: Dans cette vidéo, nous allons créer nos liens. Nous allons lier nos pages dans la navigation et connecter nos boutons aux pages elles-mêmes. Me voici donc dans Webflow, me voici sur la page d'accueil. Et c'est vraiment très simple à faire, notamment parce que nous utilisons ces symboles dans Webflow. Comme je l'ai mentionné, vous pouvez voir que ces symboles sont connectés sur toutes nos pages Nous pouvons donc les ajuster et, euh, en faire ce que nous voulons. Nous en sommes donc aux voitures, et je vais sélectionner ce lien de navigation. Et quand je l'ai sélectionné ici, j'ai voulu me dire dans les paramètres où je voulais aller. Je vais donc l' amener sur ma page. Choisissez une page, des voitures. Et il peut s'ouvrir dans cet onglet ou dans un nouvel onglet, et vous pouvez choisir différentes options de charge utile. Donc prefetch, pre-render default, je vais juste choisir default. Vous pouvez même utiliser des attributs personnalisés ici, afin de pouvoir nommer vos attributs comme vous le souhaitez. Mais je ne vais pas trop t'embêter avec ça. Cela est très utile dans les liens vers les pages, surtout si vous avez de longues pages de destination. Vous pouvez simplement imaginer que la navigation va être bloquée car elle se trouvera tout le temps en haut de la page. Et il y aura, disons, six éléments de navigation différents dans cette navigation. Cet identifiant pour les liens vers une page est donc très utile car sur cette page, vous pourriez avoir, disons, des témoignages, un formulaire de contact, une galerie, un portfolio. Vous pouvez avoir tous ces éléments dans votre navigation. Ainsi, lorsque vous cliquez dessus, vous accédez à cette section de votre site Web. C'est très utile et vous pouvez également le faire dans XD et Figma. Mais ici, c'est très utile car dans vos sections elles-mêmes, vous pouvez sélectionner cette section et dire : « Voici qui nous sommes ». Je vais simplement indiquer si nous avions qui nous sommes ici dans la navigation, je nommerais une section de bureau, je lui donnerais un identifiant de qui nous sommes. Et puis, lorsque mes utilisateurs cliquent sur qui nous sommes ici, l'ensemble du site Web défilera vers le bas jusqu' à cette section en particulier. Ces identifiants sont donc très utiles lorsque vous souhaitez les utiliser. Mais ici, nous allons simplement le laisser tel quel. Ensuite, nous aurons des prêts, donc je vais faire de même. Alors, page et voilà, vous pouvez voir, nous pouvons nous amuser. Donc, pour appeler quelqu'un directement par e-mail, pour envoyer un e-mail directement via des fournisseurs de messagerie externes tels que Gmail ou Hotmail section pour créer un lien vers différentes sections et fichiers. Si vous souhaitez télécharger un fichier, puis permettre à vos utilisateurs de le télécharger. Bien entendu, il y a des limites dans ce domaine. Je vais quitter la page. Comme je l'ai dit. Cela va nous mener aux prêts, dans cet onglet. Il va donc s' ouvrir dans cet onglet. Et enfin, faisons de même pour nous contacter. Passons donc à la page, choisissons la page. Allons-y avec nous contacter. Cet onglet. On y va. Maintenant que c'est corrigé, testons-le d'abord. Faisons un aperçu ici. Passons aux voitures. Et ça va m'amener à ma page de cours, à obtenir des prêts. Cela va m'amener à la page des prêts et cela me montre que je ne peux pas m'en sortir pour une raison ou une autre. Nous y voilà car il n'a pas pu être enregistré, cliquez sur Contactez-nous. Et cela m'amène à la page Contactez-nous (voitures). Mais quand je rentre chez moi, lorsque je clique sur mon logo, cela ne m'amène nulle part Je dois donc le lier. Passons donc à la page, retournons à la page d'accueil. Passons au mode Édition. Dans notre barre de navigation, vous pouvez appuyer sur Entrée pour pouvoir la modifier. Sélectionnez votre logo, qui est le suivant. Et ce que je veux faire, c'est faire la même chose. Donc, au lieu d'une URL externe, ce que je veux faire est de me lier à la page. Je peux choisir une page qui est la page d'accueil et le préchargement sera effectué par défaut. Maintenant, revenons en arrière et testons-le rapidement. Ainsi, lorsque je clique sur Aperçu, que je vais Prêts et que je sélectionne mon logo, je clique dessus. Ça va m'emmener ici. Mais si je reviens à mes poumons, testons-le dans le pied de page. Vous pouvez voir que cela fonctionne toujours. Je vais essayer de le réparer. Je peux peut-être l'ajouter sous forme de grille. De cette façon, cela ne restera pas hors de propos. Nous avons donc ce même logo et vous pouvez voir que lorsque je le survole, il change. Le lien se propage donc parce que nous l'avons extrait de notre navigation. Donc, quand je clique dessus, ça devrait me prendre, mais ce n'est pas le cas. Voyons donc quel est le problème. Ainsi, lorsque je sélectionne mon pied de page et que je choisis le pied de page de mon logo, accède à l'URL externe de sélection. Alors emmenez-moi à la page, emmenez-moi à la maison. On y va. Et voyons voir ça. Voici donc Nab, un lien. Donc, quand je clique sur Paramètres ici, je dois encore le modifier ici. Alors faisons-le. Voici des pages cars, des prêts de pages, et la dernière est une page contactez-nous. Alors on y va. Maintenant, nous avons tout cela et assurez-vous de configurer les icônes des réseaux sociaux comme vous le souhaitez. Je vais simplement le laisser vide pour le moment car je ne pense pas qu'il soit nécessaire de le lier à cette page. Ce que je veux faire, comme je l'ai dit, c'est y aller. Comme vous pouvez le voir maintenant, c'est réglé, mais quand je clique sur aperçu, c'est juste jouer avec moi. Donc je vais juste le faire. Donc, qui nous sommes rappeur au lieu de flexbox, je vais choisir la grille. Cette grille, disons que je vais la positionner de manière à être un peu plus étroite, quelque chose comme ça. Et je vais me débarrasser de la deuxième rangée, quelque chose comme ça. On y va. Et puis à l'intérieur, je vais sélectionner ceci. Et essayons-le avec ceci ou avec la hauteur. Débarrassons-nous de la largeur. On y va. Mais maintenant, nous devons également ajuster cela. Contenu. Débarrassez-vous également de la largeur. Ça y est, ça marche maintenant. Et enfin, ajustons cette grille. Donc, lorsque je clique ici pour ajuster ma grille, je vais simplement ajuster ce texte pour il soit un peu plus étroit que cette image. Vous pouvez donc l'ajuster encore plus. Et vous pouvez voir que nous avons une marge ici parce que vous pouvez voir où se termine l'image de ce côté. Et voilà. Maintenant, cela va être beaucoup plus simple pour nous de le faire. Lorsque vous cliquez ici dans la grille d'édition et que vous êtes en mode tablette, vous pouvez simplement ajouter une autre ligne et supprimer la colonne. Et cela va juste se propager et s'étendre ici, comme vous pouvez le voir. Et nous devons maintenant ajouter un peu d'espacement ici et nous assurer que cette marge est supprimée de ce côté. Touche zéro. Comme ça. Et je peux continuer, sélectionner les images de mon partenaire et m' assurer que ma largeur est de 100 %. On y va. Et maintenant, il ne me reste plus qu'à ajuster cela. Voyons donc que cette image partenaire est, disons que la largeur est de 100 %. On y va. Et je vais juste sélectionner celui-ci et l'ajuster manuellement. C'est tellement apaisant ici, par exemple, et vous pouvez voir l'espacement sur les côtés gauche et droit qui correspond au rembourrage que nous avons inclus précédemment. Vous pouvez donc voir à quel point cela est utile lorsque vous commencez à travailler avec la tablette. Je me laisse un peu emporter, mais je ne vais pas trop en faire ici. Permettez-moi simplement d'inclure une marge de 64. On y va. Et maintenant, vous pouvez voir à quoi cela ressemble sur une tablette et il en sera de même sur un mobile. Nous allons simplement devoir apporter quelques modifications supplémentaires à nos images. Mais comme je l'ai dit, ne nous laissons pas trop emporter pour le moment. Voici la vidéo sur les liens. Et vous découvrirez ces designs réactifs un peu plus tard. Ici, nous avons la page actuelle consacrée aux prêts et vous pouvez voir qu'elle est bleue. C' est ce que nous voulions en premier lieu montrer à nos utilisateurs où ils se trouvent sur le site Web lui-même. Donc, si je reviens aux voitures, cliquons sur Aperçu. Revenez aux voitures et sélectionnez l'une d'entre elles. Allons-y avec Lamborghini. Vous pouvez voir que nous ne sommes pas du tout sur les voitures car il s'agit de cette page externe. Donc, si j'y reviens et que je dis quelque chose comme Cadillac Escalade, nous y arriverons peut-être. Cela ne me le montre pas, mais lorsque je clique sur les voitures et que je visite des voitures, nous avons maintenant ce lien bleu et la même histoire pour nous contacter. Revenons donc à la page d'accueil. Et ce que je veux faire, c'est commencer à lier ces boutons. Ce bouton. Emmenons-le quelque part. Donc, si je clique sur la page, que je choisis une page, je vais voir les voitures, et tu pourras ouvrir un nouvel onglet si tu le souhaites. Je ne vais pas m'embêter avec de nouveaux onglets pour le moment. Nous allons garder ça ici, voir toutes les voitures. Nous allons laisser le lien vers la même page. Donc les voitures, parce que je veux qu' ils voient toutes les voitures, ce que nous proposons Avantages Contactez-nous. Et puis ça, vous devez l' ajuster dans votre tableau de bord. Vous devez donc ajuster la destination vers laquelle vous envoyez des liens et vers laquelle vous envoyez des messages. Et ça va fonctionner de cette façon. Donc, si je vous amène aux paramètres du projet, vous pouvez voir les formulaires ici pour recevoir des notifications de la part de qui il s'agit. Vous pouvez donc le remplacer par votre nom. Alors, définissez l'étiquette et ainsi de suite. Pour les soumissions de formulaires j'ai actuellement ma propre adresse e-mail ici. Bien entendu, lorsque vous envoyez ce projet à votre client, vous allez saisir l'adresse e-mail de votre client ici, et il va donc envoyer sa ligne d'objet. Vous pouvez voir, par exemple, le nom du site pour un nom, juste pour qu'ils sachent d'où vient le formulaire. Répondre à l'adresse. Vous pouvez donc saisir des adresses personnalisées, leur modèle d'e-mail. Vous pouvez saisir la dette et la soumission du formulaire , ne peut-elle pas être incluse dans un e-mail de notification officiel ? Alors c'est lequel ? Et vous pouvez même inclure la recapture. Ce n'est pas le cas pour le moment, vous pouvez cliquer ici pour l'activer , puis ajuster ces paramètres comme vous le souhaitez. Et comme je l'ai mentionné précédemment, vous pouvez intégrer des formulaires supplémentaires ici. Revenons au designer et revenons à Lincoln car nous n' avons pas trop d'éléments, donc nous allons bientôt terminer. Comme je l'ai dit, nous l'avons déjà fait. Donc, quand je vais dans les paramètres, vous pouvez voir que nous allons maudire, ce qui est très bien. Je l'ai déjà expliqué. Pour la carte, vous n'avez pas besoin de lier quoi que ce soit, car lorsque vous cliquez dessus, l'utilisateur est redirigé vers Google. Donc c'est très bien. Et si vous utilisez des voitures ici, nous n'avons pas besoin de relier quoi que ce soit. C'est très simple. Dans les poumons. Ce que nous pouvons faire, c'est nous contacter. C'est la même histoire, disons par exemple que je vais entrer mon nom complet, mon adresse e-mail, mon téléphone, et le message, hé, je m'intéresse à tes poumons et ainsi de suite. Vous pouvez donc comprendre pourquoi ces forums de contact sont vraiment utiles sur chaque page car peu importe ce que fait l'utilisateur, il contient le formulaire de contact. Ils peuvent donc simplement envoyer le formulaire de contact sur ce qu'ils font actuellement, ce qui les intéresse, en l'occurrence à propos des prêts. Donc je m'intéresse à tes poumons. Comment fonctionne-t-il ? Qui est ton partenaire ? qui puis-je parler et ainsi de suite. C'est ainsi que cela fonctionne. Et passons à la section Contactez-nous. Enfin, contactez-nous. Nous n'avons rien à faire ici. Et la dernière chose que je veux faire pour cette vidéo est un modèle de voitures, car à l'intérieur, nous avons trois boutons. Revenons donc d'abord à ce point, car nous savons déjà ce que nous voulons faire. Et ici vous pouvez voir la page Collection. Je ne veux pas qu'il soit redirigé vers la page de collection. Je voulais l'amener à la page des chemins de fer. Et la page normale sera consacrée aux voitures parce que voir toutes les voitures, c'est les y emmener pour voir la liste des voitures. Vous pouvez ouvrir un nouvel onglet. Vous pouvez le faire par défaut. Et ce que je vais faire dans ce cas, c'est ouvrir un nouvel onglet. Pourquoi est-ce que je veux faire ça ? Parce que peut-être, je voudrais peut-être comparer les deux voitures. Disons que cela m'intéresse, vous avez des modèles BMW, par exemple je regarde sous un angle. Je veux aller voir toutes les voitures, en regarder une autre et simplement comparer les deux en deux onglets. Ou vous avez exactement les mêmes voitures mais avec une couleur différente. Alors peut-être que je veux ouvrir des images dans Lightbox dans les deux onglets. Et je veux comparer l'apparence de la voiture dans différentes couleurs. C'est pourquoi c'est utile. Ici. Ce que nous avons, c'est réservé cette voiture. Ce que nous pouvons faire maintenant, c'est par exemple soit accéder à l'URL et les envoyer au formulaire, soit accéder à la section Pages et choisir une section de page. Et disons un message à peut-être, voyons ce que cela fait. Ainsi, lorsque j'appuierai sur l'aperçu, réserve le message de cette voiture, il m'y enverra. Mais peut-être que je peux les relier à quelque part par ici. Alors allons-y. Passons au formulaire e-mail, essayons peut-être ça. Alors quand j'apprends que nous réservons cette voiture, tu y vas. Cela va m'amener au formulaire e-mail, qui est exactement ce que je veux. Je ne veux donc pas qu'ils perdent trop de temps. Je les veux. S' ils sont intéressés, ils peuvent simplement cliquer ici. Ou c'est pourquoi nous avons utilisé une bonne expérience utilisateur dans ce cas. S'ils sont en haut de la page et qu'ils souhaitent réserver rapidement la voiture, ils peuvent cliquer ici, cela les redirigera vers le formulaire. Mais s'ils sont quelque part par ici, cela les suit toujours. S'ils font défiler la page jusqu' ici et disent, vous savez, quoi, je tiens à réserver, voici le formulaire de contact, qu'ils ne puissent pas le manquer. C'est une bonne expérience utilisateur, c'est une bonne solution de design thinking là-bas. Enfin, ce que nous voulons, ce sont des options de prêt C. Ce que je veux, c'est les diriger vers une page de prêts comme celle-ci. Et encore une fois, vous pouvez l' ouvrir dans un nouvel onglet. Pourquoi ? Parce que je veux peut-être qu'ils lisent tout sur ces prêts, mais dans un nouvel onglet pour qu'ils puissent comparer la voiture qu'ils recherchent actuellement et les prêts que nous proposons, peut-être qu'ils le font avec Santander dans ce cas ou en leasing, quel que soit le cas. C'est toujours un bon processus de réflexion que de leur donner des options. Et dans ce cas, l'option serait d'ouvrir deux onglets afin qu'ils puissent comparer les deux options et voir ce qui leur convient le mieux. Alors on y va. Maintenant que c'est terminé, nous avons tout lié. Tout fonctionne comme il se doit. Donc, lorsque je clique sur l'aperçu ici, cliquez ici. Tout cela fonctionne très bien. Dans la vidéo suivante, nous allons parler du responsive design. Et je vais vous montrer comment transformer certains de ces designs en modèles réactifs. Et ce sera une vidéo assez rapide parce que nous avons déjà fait quelques préparatifs, mais si nous avons des problèmes, je vais peut-être la décomposer en deux ou trois vidéos, juste pour que ce soit facile pour vous à suivre. Je vous retrouve donc dans la prochaine vidéo où nous aborderons la tablette. 188. Tablette réactive: Très bien, commençons maintenant par le design réactif, et commençons par la tablette. Et nous allons d'abord nous occuper de la page d'accueil. Ensuite, au fur et à mesure que nous avançons , je voudrais passer aux pages suivantes, mais tout sera exactement pareil. Vous allez simplement ajuster certains de ces éléments ici et là. Et vous avez déjà vu dans la vidéo précédente à quel point c'est très simple de le faire sans plus attendre, commençons. Par défaut, nous avons donc déjà notre navigation, qui fonctionne dans toutes nos sections, ce qui est tout à fait correct. Ce que je veux faire ici c'est entrer ici où il est écrit « tablettes ». Ouvrez cette section. Et tout d'abord, je ne veux pas qu'il y ait autant de place au sommet. Permettez-moi donc d'ouvrir ma section et de la réduire à peut-être 40 pixels. On y va. Et ouvrons l'emballage des héros. Parce que nous avons activé cette disposition flexible. Dans ce cas, je vais choisir la verticale. On y va. Et maintenant, il ne me reste plus qu' à faire quelques ajustements. Voici donc mon héros. Contenu. La largeur est de 60 %. Je vais le mettre à 100 % , car cela occupera tout l' espace disponible proposé. Et quand il s'agit de ces pourcentages, c'est vraiment très simple à mémoriser. Pensez-y simplement, où se trouve votre contenu. Dans ce cas, contenu de notre héros se trouve à l'intérieur de l'emballage du héros, mais ce héros de l'emballage se trouve à l'intérieur du conteneur, et ce conteneur contient 20 paires de chaque côté. Ainsi, lorsque je passe la souris, vous pouvez voir où se trouve ce jumelage. Donc, peu importe ce qu'il y a à l'intérieur de mon contenant, il ne sera pas plus large que ceux-ci, cette largeur du contenant étant rembourrée à 20 % de chaque côté. C'est donc très simple à calculer et à comprendre. Maintenant, faisons quelque chose d'un peu différent. Nous avons donc ici la largeur, la hauteur de notre image de héros. Ce que je vais faire, c'est baisser. Ce que je peux faire, c'est peut-être fixer ce chiffre à, disons, des centaines. Voyons si c'est trop. Et voilà. Et je ne veux pas que ce soit à 100 %. Je pense que ça va très bien se passer. Ce que je peux faire ici, c'est peut-être placer ce contenu au centre, car il sera beaucoup plus facile de le faire évoluer de cette façon. Alors appelons-le le centre. Et n'oubliez pas que les modifications que vous apportez sur une tablette n'affecteront pas la taille de l'ordinateur de bureau. Donc, quand on clique ici et qu'on clique sur le bureau, tout est exactement pareil. Mais quand je change de tablette, cela affectera la taille de la tablette et du téléphone. Mais lorsque vous apportez le changement de bureau , cela affectera tout. Cela se répercute donc du bureau vers le bas, et non l' inverse dans Webflow. Revenons donc au centre et mettons simplement notre texte au centre. Ce que vous pouvez également faire, c'est peut-être en faire une boîte flexible et en faire un centre de cette façon. Mais dans ce cas, disons simplement que c'est centré. Positionnons maintenant cela de manière à ce qu'il soit centré. En fait, vous savez quoi, nous pouvons le faire, alors allons-y réellement, disons que c'est une Flexbox verticale. Et je vais juste tout mettre dans un centre comme ça. Il me sera beaucoup plus facile d' ajuster ces choses plus tard. Et en fait, examinons la taille du téléphone et vous pourrez voir comment il s'adapte au texte. Enfin, pour ces plus petites tailles faudra ajuster la taille de nos textes, mais nous y arriverons dans une seconde. Parlons d'abord de la tablette. Pour cette section en particulier, ici. Il a déjà fait le travail pour nous d'une certaine manière. allons donc sélectionner notre emballage dans ce cas, Nous allons donc sélectionner notre emballage dans ce cas, afin d'avoir la grille, afin qu'il sache quoi faire. Permettez-moi de l'ajuster parce que nous avons ces deux colonnes, c'est génial. Il suffit d' ajuster le contenu à l'intérieur avec l'image. La largeur maximale est de 100 %. Allons-y avec 100 % pour la largeur et cela complétera. Ce que vous pouvez faire, c'est ajuster la hauteur, la largeur ou quelque chose comme ça, mais je ne pense pas que ce soit nécessaire. Ce que je peux faire ici, c'est aussi aligner mon contenu afin que vous puissiez justifier vos articles au centre, mais je ne veux pas que vous le fassiez dans ce cas. Je veux qu'ils s'étirent pour remplir tout l'espace. Ici, pour ce texte, ce que je veux faire, c'est peut-être ajouter une marge de 64. Et je pense que ça va très bien se passer. C'est lisible, c'est lisible, c'est bon. N Quand j'ai commencé à réduire la taille, vous pouvez voir comment cela s'ajuste. Ainsi, lorsque je clique ici, lorsque je clique ici, vous pouvez voir à quel point il suit facilement , comment il s'ajuste facilement et que tout fonctionne comme il se doit. Comme. Là-bas. On y va. Passons maintenant à cette section. Et ici, nous avons également une grille pour l'emballage de la liste des collections. Donc, ce que je vais faire dans ce cas, c'est voir. Nous avons en fait la Flexbox, mais peu importe. Mais nous avons ici une grille. Laisse-moi juste voir. Oui, sur une liste de collection elle-même. Donc, si j'ajuste cette grille, ce que je vais faire ici, c'est me débarrasser de certaines d'entre elles jusqu'à ce que je n'en aie qu'une et en ajouter deux de plus ici. On y va. Et je vais garder le bouton car j'en ai toujours besoin. J'ai toujours besoin qu'ils y aillent. Et lorsque je commence à dimensionner ici, vous pouvez voir qu' il s'ajuste automatiquement et s'adapte à l'espace restant. Et vous pouvez voir que l'espacement est maintenu. C'est pourquoi j'adore les grilles car elles sont très faciles à utiliser. Si nous réduisons un peu ce que nous proposons, corrigeons cette section. Ici, sur le conteneur. Nous n'avons rien mais ici, sur notre emballage, nous avons en fait une flexbox. Passons donc à la verticale. Et ce que je vais devoir faire, c'est définir mon image et aller jusqu'aux marges, définir ma marge, c'est 64 par exemple et voyons ce que nous pouvons faire avec ces textes. Il existe de très nombreuses options différentes que vous pouvez faire ici. Mais ce que je peux faire ici, disons que je peux l' étirer ou augmenter ma largeur à 100 %. Essayez-le, quelque chose comme ça, puis essayez de le centrer ou non. Je ne sais pas. Peut-être que ce que je peux faire, c'est parce qu'ils sont au centre, peut-être que je pourrais tous les placer sous forme de flexbox à la verticale. Et puis peut-être pourrais-je centrer le contenu à l'intérieur. Sélectionnez donc chacun d'entre eux. Cliquez sur la flexbox verticale pour centrer le contenu. Cliquez ici, Flexbox verticalement au centre du contenu. Et nous y voilà. Nous avons maintenant le contenu au centre. Et encore une fois, lorsque vous commencez à dimensionner, vous pouvez voir comment il s'adapte parfaitement à la taille disponible pour chaque point d'arrêt particulier. Cette image est superbe. Nos avantages, abordons-en maintenant également. Je vais aller à mes avantages sociaux. Ça va être un peu différent. Donc, quand j'appuie sur Vertical, passons à l' horizontal parce que c'était pour l'emballage réel des avantages de l'image. Voyons ce que nous pouvons faire ici et quels en sont les avantages. Inversons cette grille. Donc, quand je l'ajuste ici, nous avons trois colonnes et aucune ligne. Ajoutons donc deux lignes supplémentaires et débarrassons-nous de ces colonnes. On y va. Nous avons donc maintenant le contenu au centre. Mais maintenant, ce que nous devons faire, c'est ajuster la taille réelle de notre conteneur. Donc, lorsque j'appuie ici et que je maintiens ma touche Shift et ma flèche vers le haut , je vais m'ajuster à 800, disons. Je pense que ça va être très bien. Et c'est très bon. Et voilà. Cette section est donc terminée. Et enfin, pour le Contact Us, car encore une fois, c'est la grille. N'oubliez pas, mais je peux le faire tout de suite, ce qui me fera gagner beaucoup de temps, c'est d'appuyer sur Modifier tout de suite car cela se propage sur mes pages. N'oubliez pas que je peux aller dans mon contenant et dans l'emballage de mon formulaire. Je peux sélectionner mon bloc de formulaire. À l'intérieur de ça. J'ai ce formulaire à retenir, et voici cette grille. Donc, quand j'appuierai sur Modifier sur ma grille, je devrai peut-être voir voir. Je pourrais peut-être ajouter une ligne supplémentaire comme ça. Retournez dehors. Et je vais sélectionner mon adresse e-mail ici. Je vais le parcourir. Ça va pousser le téléphone vers le bas, passer le téléphone en travers. Et nous y voilà. Chacun de ces champs occupe maintenant toute la largeur de notre grille et le bouton reste le même. Mais que pouvez-vous faire avec votre bouton ? N'oubliez pas que nous justifions ce droit, ici même. Ce que je peux faire, c'est justifier qu'il soit parti. Et je peux simplement cliquer dessus et en agrandir la taille. Ou je peux le mettre au centre, quelque chose comme ça et il peut occuper toute la largeur. Je peux utiliser la pleine largeur et appeler ce bouton form btn, juste pour que nous ayons un style différent. Peut-être que je peux opter pour la largeur de 100 % dans ce cas. Et je peux suivre le texte qui se trouve au centre. Et c'est bien parce que nous avons un forum btn, qui va juste prendre cette largeur. On y va. Désormais, lorsque vous passez à la taille de votre choix, elle occupera toujours toute la largeur de votre écran. Et nous devons revenir à l' exemple pour pouvoir voir le formulaire complet se dérouler. Vous pouvez donc voir qu' il est coupé ici parce que nous avons 20 rembourrages de chaque côté, qui est en fait ce que nous voulons au départ. Tout fonctionne bien ici. Ce que nous pouvons faire sur les tailles les plus petites et les plus petites, c'est en fait couper dans cette taille. Passons donc à la tablette. Et revenons ici où il est écrit carte, entrez à l'intérieur. Ce que je peux faire avec la carte. Voyons ce que nous avons ici sur l'emballage. Nous faisons en sorte que le flux active le flux vertical. Et ce que nous pouvons faire, c'est peut-être mettre ces trois éléments dans une grille ou simplement les laisser ainsi, peut-être un par un. Donc, en ce qui concerne le contenu, voyons voir, je peux peut-être porter la largeur à 100 %. Comme ça. Mais parce que l'emballage est à 100 %, voyons voir, et le contenu se trouve à l'intérieur. Je ne sais pas vraiment pourquoi il occupe cette place. Il possède un rembourrage de 20 %. Il devrait conserver ce jumelage de 20, mais ce n'est pas le cas pour une raison quelconque. Voyons 2020 de chaque côté comme ça, où nous serons en pourcentage de contenu et alignons-nous sur la gauche. On y va. Maintenant, ça fonctionne. Et maintenant, pour ce qui est du texte qu'il contient , je peux peut-être lui donner cette classe de comme ça parce que je veux centrer mon titre. sautant ici, cliquez sur le centre et centrez également celui-ci. Cliquez ici. Et puis, comme je l'ai dit, tu peux en faire ce que tu veux. Vous pouvez les placer dans une grille , puis vous assurer qu'il y a trois colonnes de large. Ensuite, vous pouvez ajuster cette grille ou simplement les placer au centre de toute façon. Donc, ce que nous pouvons faire ici, c'est voir, peut-être que nous pouvons placer notre contenu au centre. Non, je dois mettre un nouveau div ici. Faisons-le donc rapidement. Sélectionnons notre zone de texte, contrôlez K, tapez deve, ils ont un bloc. Et appelons ce formulaire ou cette carte. Informations cartographiques. Et je vais y indiquer les heures d'ouverture. Allez, numéro de téléphone et adresse. On y va. Transformez ensuite ces informations cartographiques en une grille. Je vais avoir trois colonnes. Je ne vais pas avoir de querelles. On y va. Maintenant, comme vous pouvez le constater, tout fonctionne comme il se doit et s'intègre très bien à l'intérieur. Et il s'enroule très bien. Et cela me donne ce rembourrage en bas parce que je n'en ai pas pour ma carte, mais je trouve que cela fonctionne plutôt bien. Donc, quand je le change ici, il fonctionne toujours, mais pas sur la plus petite taille. Nous pouvons donc peut-être corriger cela sur la plus petite taille. Quelque part par ici, il commence à se briser, mais nous y remédierons dans un instant. Mais en gros, pour notre carte, c'est tout. Donc, revenons à l'exemple, c'est maintenant corrigé. Et enfin, pour notre pied de page, parlons du pied de page lui-même. Je pense que cela fonctionne très bien, même à cette échelle. Même à cette échelle. Peut-être, peut-être quelque part par ici. Donc peut-être qu'en ce qui concerne la taille du téléphone, nous pouvons le diviser un peu. Sélectionnez donc le pied de page, appuyez sur Entrée. N'oubliez pas que cela va propager le changement dans l'ensemble de notre conception. Passons donc à notre enveloppe de pied de page car il s'agit d'une grille. Nous pouvons appuyer sur Modifier dans la grille. Et ce que nous pouvons faire ici, c'est peut-être, voyons voir, peut-être que nous pouvons ajouter une ligne supplémentaire comme ça. Et peut-être pouvons-nous nous débarrasser d' une colonne. Et voilà. Alors maintenant, nous avons juste, maintenant faisons, avons deux colonnes juste pour le plaisir de le faire. Ce que je vais faire ensuite, c'est venir ici et ajuster mes icônes sociales à cet endroit. Cela va se propager. Ajustons-le à ici. Et ici, je vais le mettre au centre. Utilisez mes icônes sociales, assurez-vous qu'elles sont au centre. On y va. Il se trouve au centre par défaut. Et ce que je peux faire, c'est ajuster ces changements, car vous pouvez voir nous avons une marge de 64, en haut et en bas. Trop, à mon avis. Nous pouvons donc peut-être le réduire à 32 ou quelque chose comme ça. 33. Passons à 30 pour manuellement car il ne veut pas m'écouter. 32. Charmant. Et ici, ce que nous pouvons faire, c'est peut-être utiliser nos icônes sociales en bas de page et apporter cette modification supplémentaire. Voyons voir. Nos liens. Je n'ai aucune valeur. Donc, ici, nous pouvons dire quelque chose comme 32, je crois, ou 24, peut-être. On y va. Enfin, le pied de page d'un logo n'a que le rembourrage sur le côté gauche, pour une raison ou une autre, réduisons ce pourcentage à zéro. Et ce rembourrage, voyons voir. Oui, je pense que c'est bien. Je pense que nous allons simplement laisser les choses comme ça. Donc, quand je regarde sur ma tablette, ils sont toujours comme ça et je peux faire défiler vers le bas jusqu'à la taille la plus basse possible. Ensuite, lorsque je clique ici et que je commence à faire défiler la page, vous pouvez voir qu'il reste là et que vous pouvez voir les différents appareils sur le côté. Alors laisse-moi me cacher pour que tu puisses voir ça un peu mieux. Donc voici, quand je commence à faire défiler la page, vous pouvez voir un Kindle Fire Galaxy Note plus trois. Lorsque nous nous arrêterons et que nous commencerons à faire défiler la page ici, je verrai de nouveaux appareils. Donc, Kindle Fire Galaxy Tab à quand je commence à monter, Surface Pro Tools, Surface Pro. Donc, quand je marche ici, vous pouvez voir toutes sortes d' iPad et de Microsoft Surface. Ce sont donc toutes tes tailles. Et il en va de même pour le téléphone. Quelque part par ici, vous pouvez voir la console de divertissement Nintendo. Il s'agit d'un iPhone SE, Phi of S et d'un iPod touch antérieur. Donc, de très petits appareils. Et quand il commence à ramper, vous pouvez voir tous ces diamants en bas à droite. Vous pouvez les voir apparaître et me montrer toutes ces valeurs. Encore une fois, la version tablette est pratiquement terminée. Donc, quand je vais juste en haut, la navigation fonctionne toujours parce que nous l'avons corrigée dès le premier jour. Et cet effet de survol ne sera pas visible de toute façon, car vous allez d'abord utiliser votre onglet. Ici, nous n'avons pas besoin d' un survol, mais encore une fois, il ne sera pas visible car il ne réagira pas à votre doigt. Ici. Ce que nous pouvons faire, c'est parce que tout est en quelque sorte, oui, gardons simplement ces textes là où ils sont. Mais peut-être étendre ce paragraphe pour remplir l'espace. Alors, comment faire ? Cliquez sur votre paragraphe. Et allons-y avec une largeur de 100 %. Ou nous devrons, je pense, ajuster manuellement pour quelque raison que ce soit. Alors allons-y. Oui, tu y vas. Parfois, cela fonctionnera très bien. D'autres fois, vous devrez l'ajuster manuellement, mais vous pouvez voir à quel point c'est très simple. Et maintenant, quand je commence à faire défiler la page, il va recadré dans ce paragraphe et l' ajuster comme vous pouvez le voir pour qu'il s'adapte à l' espace disponible dont je dispose. Mais je dois d'abord l'ajuster manuellement car il est très important que vos utilisateurs n'aient pas ou n'aient pas le train à glace. Ce qui signifie que si les rangées sont belles, ils seront très vite fatigués. Donc, une dernière chose que je veux faire ici pour l'espacement c'est que je ne pense pas que nous ayons besoin d'un trop grand espacement ici. Alors voilà, c'est bon. Ici, c'est peut-être bon. Voyons donc combien nous en avons ici. Nous sommes donc une section de conteneurs emballés, nous en avons 200. Alors peut-être que nous pouvons en avoir 200, peut-être 150, quelque chose comme ça. Et ici, dans cette section, nous pouvons peut-être aussi en avoir 150. Juste pour que nous puissions affiner un peu nos sections. Ici, dans cette section, nous pouvons également en avoir 150 comme ça. Je ne suis pas vraiment fan de cette mise en page pour le moment, mais peut-être que nous pouvons faire ici, c'est faire la même chose que nous avons fait avec nos paragraphes. Il suffit donc d'étendre les textes. Quelque chose comme ça. Vous voyez si le texte est centré, il ne l'est pas. C'est donc là le problème. Revenons donc en arrière et sélectionnons notre bloc de texte et je vais lui attribuer une classe distincte sur ce que c'est, offre, une offre centrée comme ça. Et je vais juste le centrer. Et ici, je vais opter pour une offre centrée sur l'offre. Assurez-vous qu'il est centré. Nous y voilà, et voici l'offre centrée. Et maintenant, quand je commencerai à augmenter la taille de ces petites tailles, cela occupera l'espace restant. Et en fait, cela va très bien espacer le texte. Vous pouvez voir comment cela fonctionne ici. Une dernière chose que je peux faire est peut-être de faire en sorte la garantie logicielle n'ait aucune largeur. Peut-être que ce bloc de texte peut avoir une largeur de 100 %. Voyons si cela fonctionne. Ce n'est pas le cas. Ce que vous pouvez également faire, c' est le limiter à quelque chose on appelle CH, qui est le caractère. Donc, si nous optons pour 60 CAH, cela va simplement l'étendre pour que cela ne fonctionne pas. Vous devez l' ajuster manuellement ici, mais cela n'a pas d'importance. Je pense que cela fonctionne toujours bien. Ce que je pourrais faire, c'est ajuster l'espacement ici, vous pouvez voir en bas que nous en avons 32, offrir une garantie, nous en avons 32. Alors peut-être que je pourrais ajuster cela pour améliorer un peu ma lisibilité afin de pouvoir opter pour 40. Je pense que je sélectionne mon offre de maintenance, que je clique ici, choisis 40 et que je propose des prêts. Il n'y en a pas, mais il y a encore beaucoup de place ici. Avantages. Tout semble aller bien. Je peux peut-être faire la même chose ici, mais je pense que c'est lisible. Je pense que c'est lisible. Ça a l'air bien. Ça a l'air bien. Peut-être pourrions-nous ajouter un rembourrage supplémentaire ici, mais parlons de cette marge. Donc, ici, sur cette section, la marge est de 150, c'est génial. Passons à la section suivante. Marges jusqu'à 100. Passons donc à 150. Et enfin, sur le formulaire Contactez-nous, si je clique à l'intérieur, passons à 150 et souvenons-nous que cela sera ajusté pour chaque page. Accédez à la carte et ajustez leur 2150. Enfin, allez dans mon pied de page, appuyez sur Entrée et réglez également ce chiffre sur 150. Une dernière chose que je veux faire ici c'est d'aller sur la carte. Et ici, je veux faire cet ajustement et le réduire un peu. Alors peut-être que je peux opter pour 40. Et voilà. Et cette obscurité H2 sur laquelle nous sommes centrés ou sur laquelle nous sommes centrés, peut-être que je pourrais aussi en choisir 40. On y va. Maintenant, c'est bien centré et nous avons juste un peu plus de marge de manœuvre en contrebas. Ce que je peux faire avec deux cartes, c'est que je peux peut-être maintenir la hauteur à 450 ou quelque chose comme ça, pas 150, mais 50. Et voilà. Je pense que c'est beaucoup mieux sur un écran plus petit. Et puis vous pouvez aussi y aller ici, peut-être que pour 50, cela ne fonctionne pas vraiment. C'est génial. Donc, quand je clique à l'intérieur, sélectionne ma carte, peut-être 350. Et voilà. Je pense que cela fonctionne bien mieux. Quand je passe à la taille la plus petite possible. Peut-être qu'ici, je peux y aller avec 250. On y va. Et je pense que cela fonctionne très bien. Alors on y va. Notre tablette est pratiquement terminée pour notre page d'accueil. Ce que nous pouvons faire ensuite, c'est peut-être passer à la page suivante pour les voitures et régler ce problème immédiatement. Donc, cela fonctionne essentiellement comme il se doit. Tout ce que je veux faire, c'est peut-être ajuster le positionnement de ce cercle. Je clique donc simplement dans le coin, faisant glisser légèrement vers le bas. Et je pense que c'est très bien jusqu'à présent. Oui. C'est donc une bonne chose pour cette collection exclusive. Ce que nous pouvons faire, adaptons-le. Donc, tout d'abord, pour cette section. Ce que nous avons dans le conteneur c'est qu'il n'y a aucun jumelage, ce qui est génial. Nous allons donc simplement laisser les choses comme ça. Nous n'avons aucune marge. Mais pour celui-ci, je veux qu'il reste à 1 h 20, peut-être quelque chose comme ça, ou peut-être 150, mais pas plus que ça. Et enfin, pour cela, il y a la section des collections exclusives. Mais n'oubliez pas que nous avons cette grille dans la liste de collection de voitures. Donc, ce que je vais faire, c'est que nous avons huit voitures. Je vais frapper ici. Et au lieu de cela, ce que je peux faire, c'est disons des colonnes, je vais m'en débarrasser et en garder deux pour le moment. Vous pouvez donc voir que nous avons maintenant deux colonnes et je pense qu'il y a beaucoup de détails à 768, ce qui est excellent. Plein de détails. Tu peux appuyer dessus, tu peux le toucher, tu peux faire n'importe quoi. Formulaire de contact. Quand je rentre, il y en a encore 150. Mais là, j'ai cette marge inférieure. Alors peut-être que nous pouvons ici sélectionner cette section. Voyons d'où vient la marge. Voyons l'emballage de la liste Car Collection. Ici, nous avons une marge de 64, alors débarrassons-nous de cette marge, descendons à zéro. Et maintenant, cet espacement est assez bien corrigé, ce qui, je pense, fonctionne très bien. Vous pouvez voir ici toutes les modifications que nous avons apportées. Tout fonctionne comme il se doit, y compris la navigation. Donc c'est bien. Nous n'avons pas vraiment besoin de faire quoi que ce soit ici. Passons maintenant au discours sur le prêt et voyons à quoi cela ressemble. Donc, ce que nous pouvons faire ici, parce que n'oubliez pas que nous avions ces voitures sur une grille. Je vais juste les garder comme ça. Je veux faire du montage en gros. Je ne les toucherai pas. Je vais juste les garder. Et je veux qu'il évolue comme il est, ressemble à une seule image. Laissons donc les choses telles quelles. Pour la section suivante, je vais ajuster ce chiffre à 150, peut-être 20. Parce que maintenant nous avons assez d'espace, je vais sauter à l'intérieur d'ici. N'oubliez pas que nous avons cette grille pour les prêts et les avantages sociaux. Je vais cliquer ici. J'ajoute simplement deux autres lignes comme ça. Je vais me débarrasser de ces chroniques. Il va remplir le contenu, tout se passe comme il se doit. Et ajustons un peu l' espacement pour que l'espacement entre les lignes soit 32. Je pense que cela fonctionne très bien et qu'il s'adaptera parfaitement à toutes les tailles. Comme vous pouvez le voir, il va renseigner ces informations. Ce que nous pouvons faire, c'est que sur les plus petites tailles, vous pouvez voir cela pousse le texte vers la gauche. Donc, ce que je peux faire ici, c'est sélectionner P gray et ajouter une classe de combo centrée. On y va. Et je vais juste centrer mon texte comme ça. Et je vais ajouter cette classe combinée à tout cela. Il suffit donc de sélectionner Ajouter centré. On y va. Et maintenant, quand je commence la mise à l'échelle, vous pouvez voir que l' échelle part du centre et qu'elle ne s'aligne pas vers la gauche Tout fonctionne donc comme prévu et comme il se doit. Nous avons déjà fait cette section précédemment. Peut-être que ce que nous pouvons faire ici, c'est avoir un peu plus de marge de manœuvre parce que nous avons enregistré ces images. N'oubliez donc pas que nous en avons ajouté 64. Allons-y avec 80 sur cette affaire. Je pense que c'est bien. Et voyons si nous avons un jumelage supplémentaire ici. Je ne pense pas que nous le sachions. Donc, l'emballage n'a pas de contenant, n'en a pas. a pas dans la partie inférieure, donc c'est très bien. Nous contacter, c'est bien. On y va. Et la dernière page que je souhaite aborder dans cette vidéo est contactez-nous. Alors réglons ça parce que nous en sommes déjà à 27 minutes. Donc pour nous contacter, il n'y a vraiment pas grand-chose à faire ici car tout est déjà configuré comme il se doit. Nous avons donc ici l'image de la salle d'exposition. Vous pouvez ajuster la taille si vous le souhaitez, mais je ne vais pas m' embêter ici. Il est 01h50, donc je vais en rester là. Donc, si j'appuie sur Entrée, vous pouvez voir 150. Peut-être pouvons-nous ajouter la classe de combo ici et l' ajuster un peu, mais je ne vais pas vraiment m'embêter. Vous pouvez avoir une marge négative avec celui-ci et sa taille, mais je ne pense pas que ce soit nécessaire. Je pense que cela semble tout à fait correct. Une dernière chose que je voudrais aborder pour la tablette, c' est de parler du CMS, du modèle de voitures. Donc, ici, ce que nous pouvons faire, c' est positionner ce chiffre à la baisse. Clôturons donc tout cela comme ça. Nous avons donc des informations sur les voitures et nous avons une carte d'action automobile. Et c'est ce que nous prévoyons au départ. Ainsi, lorsque je sélectionne mon conteneur, vous pouvez voir que nous avons une flexbox. Donc, quand je touche la verticale, je pousse cette carte complètement vers le bas à la fin. Donc, ce que je peux faire, c' est appuyer au centre juste ici, ou je peux le garder vers la gauche. Je peux utiliser les informations de ma voiture et utiliser la largeur. Vous pouvez voir que c'est 65 %. Je peux y aller à 100 %. C'est parti, et ça va combler l'espace restant. Ma mise en page va être cohérente, mais maintenant nous avons un problème avec notre carte. Ici. Je vais également taper à 100 %. Il va renseigner ces informations. Je vais utiliser ce bouton. Ce que je peux faire peut-être, c'est peut-être lui donner une marge de, disons, 40 ou quelque chose comme ça pour cette dimension de tablette. Et je veux que cette mise en page reste tournée vers la gauche. Ici, ce dont nous avons besoin, c'est que la position soit statique. Ce n'est plus vraiment collant, comme c'était le cas ici. Donc, encore une fois, vous pouvez voir qu'il reste ici. Cela reste ce que nous voulons. Et sur une tablette, vous allez simplement publier ce contenu jusqu'en bas. Cela a bien été dimensionné, nous n'avons donc pas à nous inquiéter à ce sujet. Nous avons trois voitures, c'est super. Cette échelle, cette échelle, tout est comme il se doit et comme nous le voulons. Une dernière chose que je veux faire est de sélectionner contenu de ma carte de vente aux enchères de voitures. Venez ici et ajoutez une marge de 64, par exemple, et je pense que ce n'est pas le contenu, désolé, mais la carte d'action de la voiture. Entrez dans le top 64. On y va. Et maintenant, nous avons cette séparation. 64, c'est peut-être trop. Allons-y avec 32.32 qui fonctionne bien. Je pense que dans ce cas particulier, en ce qui concerne ces images, nous pouvons peut-être sélectionner cette option. Et voyons voir, car il s'agit d'une liste de collection. Je peux accéder à la liste des collections et la masquer. Maintenant, quand j'appuie sur l'aperçu, voyons si cela fonctionne. C'est le cas. Il est donc toujours caché, mais il me montre toujours toutes ces différentes images. Et je peux toujours utiliser mes flèches gauche et droite pour faire défiler mes huit images, ce que je voulais. Alors, à toutes les images, lorsque vous utiliserez un stop there, cela les redirigera vers cette page. Je pense donc que ce sont des choses fantastiques pour notre mise en page. Et tout fonctionne très bien, jusqu'aux très petites tailles que vous allez aborder dans la vidéo suivante. Mais en gros, pour la tablette et la plupart du temps ici en mode portrait mobile, tout fonctionne comme il se doit. Nous ajusterons cela un peu plus tard, nous ajusterons cela et ajusterons toutes ces choses. Mais pour l'instant, tout fonctionne comme il se doit, y compris cela , sauf pour les très, petites tailles, que nous allons traiter dans un instant. Vous pouvez donc le voir ici. Donc, lorsque je suis sur un ordinateur de bureau, nous avons trois cartes. Dès que je suis passée au doublet, nous n'avons plus qu'une seule carte et elle fonctionne jusqu'à la plus petite taille possible. Mais nous allons nous en occuper dans un instant. Alors on y va. C'est notre réactif. Tout est comme prévu, tout fonctionne comme prévu. Donc, dans la vidéo suivante, nous pouvons peut-être aborder ces tailles de portrait mobile et de paysage mobiles. Parce qu'il y a quelques points de rupture supplémentaires et quelques conseils que je peux vous donner pour ces tailles. Mais nous avons déjà fait la majeure partie du travail, donc tout ira bien sauf pour le portrait mobile, où nous devons commencer à modifier la taille de nos polices. Alors je t'y verrai. 189. Paysage mobile: Travaillons maintenant sur les tailles réactives de nos téléphones. Donc quand je suis arrivée ici, tablette, nous l'avons déjà fait. Et quand nous téléphonons, nous pouvons commencer à ajuster certaines de ces choses. Donc, à l'intérieur du paysage, je pense que tout cela fonctionne bien, mais peut-être que je pourrais commencer à apporter des modifications ici, mais je voudrais apporter quelques modifications supplémentaires ici. Commençons donc par cela. Voyons ce que nous avons ici. Nous pouvons donc peut-être commencer à apporter quelques modifications à l'intérieur d'ici. Peut-être que cette section devrait avoir une marge plus petite. Alors allons-y avec 100. Regarde à quoi ça ressemble. Je pense que c'est bien. Alors peut-être que nous pouvons simplement maintenir toutes nos sections à 100. Par souci de cohérence. Je pense que c'est bien. Avantages. 100, on y va. La taille est bonne et le formulaire de contact est valide. Ce que je peux faire ici, c'est que le présentateur passe à 100. N'oubliez pas que cela se répandra dans tout notre design. Allons ici, entrez, tapez 100 ici, nous l'avons déjà en tant que configuration. Andrew a déjà ajusté la taille de cette carte. Donc, quand je rentrerai ici, enfin, passons à 100. Nous revenons à l'exemple. Et je pense que tout fonctionne bien jusqu'à un certain point, mais nous allons corriger cela dans la taille suivante. Mais pour l'instant, je pense que tout semble bien sur un écran d'accueil, sauf ici. Alors peut-être, peut-être que je peux commencer à apporter quelques modifications ici. Nous y sommes donc, centrés sur les 1. Et je peux vous donner la classe combinée de, disons, téléphone. Ici. Ce que je peux faire, c'est commencer à apporter quelques modifications. Donc pour le H1, je peux appeler ici au lieu du 64, peut-être que je pourrais opter pour le 56, voir à quoi ça ressemble. Ou peut-être 48. 48 semble bien ici pour cette image. Ce que je peux faire, si vous vous en souvenez, si nous allons jusqu'ici, nous aurons une largeur et une hauteur fixes. Alors peut-être que nous pouvons ajuster cela. Et passons à la largeur de quelque chose de plus petit, comme quand t, quelque chose comme ça. Et nous pouvons ajuster manuellement ces deux éléments, quelque chose comme ceci et ceci à quelque chose comme ça. Ensuite, nous pouvons les ajuster manuellement , les déplacer vers le bas, sélectionner celui-ci et le déplacer légèrement vers le haut pour obtenir quelque chose comme ça. On y va. Enfin, ce que je peux faire pour cette section en particulier, c'est au lieu d'un cinquième, allons-y avec 100. N va très bien fonctionner . Comme tous les autres. Donc, à l'intérieur du téléphone, du téléphone ou du paysage, vous pouvez voir à quoi cela ressemble. C'est génial, c'est génial. Réduisons-le au plus petit. Je pense que c'est bien. On y va. Donc ça a l'air bien. Donc, dans le plus grand paysage des téléphones, même dans ce cas, cela fonctionne très bien. Donc, quand je clique sur l'aperçu et que je l' affine vers le bas, tout semble correct. Je pense donc que c'est une bonne chose. Revenons à cette page et ajustons certaines de ces autres pages. Passons donc aux voitures et voyons ce que nous avons sur place. Donc, tout d'abord, ajustons ce cercle. Rétrécissez-le un peu pour voir à quoi cela ressemble. C'est très bien. Gardons donc le cercle là où il se trouve. Ce H1 était centré. Ça a l'air bien. Découvrez cette collection exclusive. Tout d'abord, pour cette section, nous allons la garder telle quelle. Mais pour cette section, nous allons passer 100 faces de notre emballage publié par le guérisseur et notre liste de collections, car c'est notre grille, cliquez sur Modifier la grille. Et je vais me débarrasser de mes chroniques. Il suffit donc de cliquer sur une colonne. Parce que ce sont des voitures. Il devrait afficher les huit voitures. Il suffit donc de les compter. 12345678. On y va. Cela fonctionne donc à merveille. Nous contacter est une bonne chose car nous l'avons déjà configuré. C'est bien. C'est bien. Cette page est maintenant terminée. Vous pouvez voir à quel point c'est simple. Passez aux prêts. Comme je l'ai mentionné, je vais le garder tel quel. Mais ici, je vais suivre ce cours. Passons rapidement à la page d'accueil et voyons ce que nous avons fait pour le H one ici. Nous avons donc le téléphone centré sur les héros de la classe H1. Passons donc aux poumons. Sélectionnez celui-ci. Voyons H1 centré. Laisse-moi voir ce que je peux faire ici. Alors laisse-moi rentrer chez moi. Et commencez à explorer un peu. Nous avons donc ici un téléphone centré, et pour le téléphone, nous l'ajustons à 48,86. Dans ce cas, je ne pense pas que nous ayons besoin d'un T6, nous pouvons donc le réduire à 56. Maintenant, peut-être 64. Voyons voir. Ce que nous pouvons faire. Je ne sais pas. 70 à 72 fonctionnent bien. Alors 48, 72, c'est super. Passons aux poumons. Et donnons-lui un H. Tu vois, il fait déjà 38 ans. Voyons voir, peut-être que nous pouvons vous en donner 48. Cela peut être 60, 72. On y va. Je pense que cela fonctionnera très bien pour ces plus petites tailles jusqu'à ce que nous atteignions cette taille. Alors nous allons le changer. Donc ici ça marche bien. Ici, pour ces images, nous pouvons peut-être ajouter un peu de marge de manœuvre, donc peut-être 40 pixels, quelque chose comme ça. Je pense que cela fonctionnera très bien pour celui-ci. Abaissons-le à 100. Nous avons déjà réglé ce problème. Cela fonctionne donc très bien pour cette section. Au lieu de 200, passons à 100, qui va très bien croître. Et ici, ce que nous pouvons faire, c'est peut-être commencer à les centrer. Alors peut-être qu'à cette taille, nous pouvons peut-être le centrer, centrer celui-ci et également centrer notre paragraphe. Voyons si cela change. Oui, vous pouvez voir que cela n'a pas affecté ce changement, c'est ce dont je parlais. vous pouvez le voir sur la tablette, cela n'a affecté que ce point de rupture parce que c'est à ce moment-là que nous avons commencé à jouer. Donc tout cela fonctionne. Eh bien, ça a l'air génial. Si nous allons maintenant à la page Contactez-nous. Nous n'avons pas vraiment besoin de changer quoi que ce soit ici. Tout est fait pour nous. Enfin, passons au modèle de cours et voyons ce que nous pouvons faire ici. Alors voilà, restons-en à ce stade. Je pense que cela fonctionne. OK. Ce n'est pas fantastique, mais ça marche. OK. Vous pouvez voir qu'il fait 480 pixels, nous allons donc le modifier ici car il tombe beaucoup en panne. Donc, voici ce que nous allons faire, c'est peut-être laisser tout cela. Oui, je vais en fait tout laisser tel quel parce que c'est à l'intérieur d'une grille. Et ce que je peux faire ici, dans ce cas, c'est peut-être que je peux ajuster ça ou quelque chose comme ça. Voyons voir, car cela se trouve à l'intérieur d' un contenant que l'on appelle le contenu d'une carte de vente aux enchères automobiles. Alors peut-être pouvons-nous commencer à jouer un peu avec eux ou maintenant, gardons-les à la plus petite taille possible. Laissons les choses comme elles sont ici. Ou peut-être que je peux le placer au centre. Voyons à quoi ça ressemble. C'est donc au centre et transformons-en une flexbox, nous assurant que tout est centré. Et maintenant, vous pouvez voir le problème que nous avons ici. Donc si je place ceci au centre et celui-ci au centre, cela ne fonctionnera pas correctement. Donc, ce que je peux faire pour ce bouton, c'est peut-être lui donner une largeur de 80 %. Voyons voir et centrez le texte à l'intérieur. Utilisez ensuite ce bouton, donnez-lui une largeur de 80 % et centrez le texte à l'intérieur. Et voyez ce que je peux faire ici. Donc non. Voyons si cela se corrige. Ce n'est pas le cas. Oui, tu peux voir quel est le problème ? J'ai une marge ici, alors débarrassons-nous de cette marge. Et maintenant, ils sont centrés ici pour l'étiquette actuelle Ce que je peux faire, c'est avoir une marge ici, m'en débarrasser. Et cette carte d'action pour voitures. En fait, voyons voir ce que nous pouvons faire ici. Je peux peut-être le savoir. Je peux peut-être mettre ceci, m' assurer que mon contenu est au centre. Voyons voir si nous réglons sur automatique de ce côté et sur automatique de ce côté, cela placera ce contenu au centre. Mais maintenant, ce que je veux faire, c'est peut-être ajuster ce contenu, mais je crains que cela n' en réduise la largeur. Alors gardons-le là où il est. Et ici, je vais peut-être en ajouter un peu plus. Salle de respiration. Peut-être 40 ou 20 ans. Peut-être 20 ici aussi. Voyons voir. 20. Non, parce qu'il y en a 24. Allons-y avec 24 également. Et ici, pour une marge maximale, nous n'en avons pas vraiment besoin, donc je pense que ça va très bien fonctionner. On y va. Et maintenant, enfin, abordons cette dernière section, qui est celle-ci, et ajustons-la à 100. Et voilà. Nous avons terminé de concevoir et de modifier le paysage mobile. Dans la vidéo suivante, nous allons aborder les portraits mobiles. Alors je t'y verrai. 190. Portrait mobile: Très bien, alors enfin, parlons du portrait mobile. Je suis donc sur la page d'accueil. Je vais cliquer ici. Et tout d'abord, ajustons cela. Donc, voici ce que je vais faire c'est réduire considérablement la taille. Peut-être 32. Voyons à quoi cela ressemble. Et cela peut être 48. Peut-être. C'est très bien. C'est bien, c'est bien, mais l'image ne va pas bien. Image du héros. Dans ce cas, pour une largeur, je peux maintenir la touche Shift et la flèche du bas enfoncées. Comme vous pouvez le voir, cela va la réduire à 270 peut-être. Je pense que ça va très bien fonctionner. Cela, nous pouvons le réduire, nous pouvons le réduire beaucoup. Et ce que nous pouvons faire, c'est activer automatiquement et nous assurer de le positionner ici, mais de l'ajuster juste ici. On y va. Nous y voilà et nous l' adaptons peut-être un peu à ce qui se passe par ici. Je pense que ça va très bien fonctionner. Même si je redimensionnerai jusqu'à la plus petite taille possible, vous pourrez toujours le voir au moins un peu. Peut-être que quelque chose comme ça fonctionnera un peu mieux. Donc, quand j'en viens à la plus petite taille, vous pouvez voir à quoi cela ressemble. Enfin, l'image du héros. Et ce que nous pouvons faire, c'est que, voyons voir, la hauteur n' est pas quelque chose. Réglons la hauteur sur automatique. Quelque chose comme ça. Et je vais juste régler ce problème maintenant et le réduire complètement. Au fur et à mesure que la largeur augmente, la hauteur augmente automatiquement. C'est ce que je veux pour les tailles. Voilà. Il s'agit donc de la plus petite taille possible. Il s'agit de notre plus grande taille. Peut-être que nous pouvons même descendre avec une largeur pour atteindre quelque chose comme ça. On y va. Nous allons donc passer à la plus grande taille. Voyons ce que nous pouvons faire. Ce n'est peut-être pas la bonne solution. Donc, pour mon image, je vais la redimensionner ici. Voyons voir. Il n'a qu'une largeur. Donc, si je passe à 100  % comme ça, cela devrait régler le problème. Ou même 80 %. On peut peut-être opter pour une image de héros. Peut-être pouvons-nous inclure le rembourrage de dix pixels, disons. Cela va donc l' empêcher de sortir. On y va. Et je pense que cela a très bien résolu le problème. Ici, nous pouvons simplement le laisser tel quel. Nous avons une marge de 100, ce qui me semble assez important. Mais peu importe. Nous pouvons simplement le laisser tel quel. Pour ce qui est de ce bouton, nous pouvons peut-être définir des hauteurs à certaines largeurs ou quelque chose comme ça. Allons-y avec une hauteur minimale de peut-être 50 pixels, quelque chose comme ça. Il conservera donc toujours cette hauteur minimale de 50 pixels. Et à l'intérieur, je vais centrer mon texte. Donc, peu importe ce qui se passe, ça va toujours évoluer comme ça , quelque chose comme ça. Ce n'est donc ni trop petit, ni trop plein de noix. Cela fonctionne très bien sauf pour le texte. Centrez-le comme ça. Et lorsque vous commencerez à évoluer, tout ira bien. Peut-être ces espacements, nous n'avons pas besoin qu'ils soient aussi grands. Nous en avons donc 64, peut-être que nous pouvons descendre à 40. Et pour ce qui est de l'ensemble de la section, nous en avons des centaines. Continuons donc comme ça. Je pense que cela fonctionne bien. Cela fonctionne bien sur toutes les tailles, nous n'avons donc pas vraiment à faire grand-chose. Ici. Voilà. Ce bouton, hauteur minimale 50. Il va donc hériter de ce style que nous avons déjà défini. C'est très bien. Tout cela fonctionne bien, l'imagerie fonctionne bien. Cela fonctionne très bien. N'oubliez pas qu'il s'agit d'un appareil si petit, 240 pixels. Donc c'est vraiment, vraiment, voyons ce que c'est. Donc Nintendo Entertainment System, N E S. Alors voyons voir. Peut-être passer à quelque chose comme un S. Oui, alors c'est ça. C'est ça. C'est la taille pour laquelle nous concevons ici. N'oubliez donc pas de ne pas prêter trop d'attention à ces très petites tailles et personne ne les utilise vraiment. Mais quelle que soit la raison, mauvaise ou pire, nous pouvons toujours l'ajuster et apporter des modifications si nécessaire. Ce que je veux faire ici, parce que cela fonctionne comme il se doit. Je veux ajuster cela. Alors allez à l'intérieur de ma carte ici, souvenez-vous que nous avons inclus cette grille. Je vais donc aller là où nous sommes rappeurs, là où nous sommes contents, adorables. Et voici notre carte en quatre. Je vais frapper juste là. Et je vais l'ajuster sur trois lignes, comme ça, et ajouter une seule colonne. On y va. Maintenant que la dette fixe et pour la carte, ce que je peux faire, c'est ajouter une marge inférieure de 40 peut-être, juste pour pouvoir pousser ce texte un peu vers le bas. Ainsi, lorsque je réduis complètement la taille, tout fonctionne comme il se doit. Enfin, pour le pied de page, ajustons et apportons également quelques modifications. Ce que je peux faire, c'est appuyer sur Entrée ici. Ainsi, même sur les tailles les plus petites, cela fonctionne. Mais laissez-moi simplement prendre ces liens. Et ce que je peux faire parce que c'est un enfant du réseau. Je peux peut-être les transformer en flexbox ici. Allumez à la verticale, assurez-vous qu'ils sont centrés. Et maintenant, cela fonctionne quelle que soit la taille dans laquelle vous vous trouvez. Tout évolue très bien comme ça. Peu importe la taille dans laquelle vous vous trouvez. Maintenant que cela fonctionne, nous pouvons passer à une autre page, qui porte sur les voitures dans ce cas. Cela fonctionne comme il se doit, jusqu'à la plus petite taille possible , sauf celle-ci. Donc, ce que nous pouvons faire ici, c'est réduire ce chiffre de 32 %. Et ce 248. On y va. Ou peut-être même plus, mais je ne pense pas que ce soit nécessaire. Gardons-le là où il est. Donc ce 32, 32, donc il en hérite. Ce que nous pouvons faire dans ce cas, c'est réduire légèrement le cercle, mais je ne pense pas que ce soit nécessaire. Je pense même que cela ajoute un peu de charme. Ainsi, tout fonctionne même sur les plus petites tailles, ce qui est génial. formulaire fonctionne très bien. Cela fonctionne très bien. Sauf ici. Voyons où nous allons jusqu'au bout. Ce que nous pouvons faire, c'est centrer ces informations. Qu'en pensez-vous ? Donc, si je clique ici, que c'est l'adresse et que je centre le contenu à l'intérieur, utilisez la colonne du numéro de téléphone juste ici. Centrez le contenu à l'intérieur, venez ici, centrez le contenu. Maintenant, quand je commence à redimensionner, ça a l'air normal, sauf celui-ci. Maintenant, gardons-le à gauche. Gardons-le simplement aligné à gauche. Je ne veux pas que cela fonctionne trop dur dans ce cas, car il s'agit d'un contenu plus long, ce contenu plus court et centrage peuvent sembler un peu étranges dans ce cas. Alors gardons-le comme ça parce qu' il s'enroule bien. Revenons à l'exemple. Passons à notre page de prêts. Voyez où nous en sommes ici. Je ne pense pas que les changements nécessaires ici, peut-être que nous pouvons faire, c'est le changer à 30, alors que c'est déjà le cas à 32. Donc c'est bien. Tout fonctionne comme il se doit déjà s'il s'agit d'une dette. Cela fonctionne très bien. Cela fonctionne bien, contactez-nous. Tout fonctionne bien, sauf ces deux-là. Donc, ce que nous pouvons faire, c'est en définir un peu, vous pouvez voir que la largeur maximale est de 100 %. Donc, ce que je peux faire, c'est disons une largeur minimale de 50 pixels. Utilisez celui-ci, d'une largeur minimale de 50 pixels, afin qu'il ne descende pas en dessous de 50 pixels de largeur. Et vous pouvez voir à quoi cela ressemble. Alors peut-être que 50 c'est trop. On peut peut-être opter pour 20 pixels et 20 pixels. Quelque chose comme ça. Voyons voir. Oui, donc ça commence à s' effondrer juste ici. Vous pouvez donc voir l'iPhone mini, 13 mini. Donc en dessous, quelque part par ici, soit 310 pixels. Nous pouvons donc ajuster la largeur minimale de dix pixels comme ça. Et je vais m'en débarrasser. Alors allons-y. Largeurs maximales. Disons que je ne sais pas à 100 % ici ou peut-être 100 pixels. Oui, allons-y avec 250. C'est une largeur maximale. Et il s'agit d'une largeur maximale de 250 pixels. Charmant. Alors maintenant, quand je commencerai à augmenter, je vais diminuer. Allons-y avec une largeur de 250. Cela peut représenter jusqu'à 50 décès. Et maintenant, quand je commence à dimensionner, tout se ressemble. Essayons donc 150. Voyez ce que cela fait ces tailles les plus petites possibles comme ça. Oui, je pense que 150 fonctionne mieux parce que cela montre toujours l'image et permet de les positionner là où nous voulions qu'elles soient. Et au lieu d'une largeur minimale de dix pixels, je peux opter pour une largeur minimale de 80 pixels ou quelque chose comme ça. Donc, juste pour qu'il ne soit pas trop petit. 80 pixels, et c'est parti. Alors maintenant c'est terminé. C'est très bien. Tout va bien. Nous avons cette page de contact. Passons rapidement à l'endettement. Voyons voir, nous n'avons pas à apporter modifications ici. Tout va bien. Enfin, passons au modèle de cours et voyons ce que nous pouvons changer ici. Donc, tout d'abord, nous devons ajuster cela car il ne cesse de se casser. Donc, ce que je peux faire dans ce cas, oubliez pas que nous avons ce rembourrage inférieur sur chacun de ces arrière-plans, c'est que je peux ajuster l'espacement de mes lignes afin de pouvoir opter pour 24 ou quelque chose comme ça. Donc, ce que je vais faire c'est le diviser en deux. Nous aurons donc 2468 en deux. Nous aurons donc quatre lignes différentes comme ça. Et nous allons avoir deux colonnes différentes de ce type. On y va. Et pour une raison ou une autre, elle ne l'a pas respectée. Gardons donc ce like ou cette vue. Nous avons le jumelage. Voyons un aperçu de la voiture. Peut-être pouvons-nous introduire ce jumelage et voir ce qui se passera. Pas grand-chose, vraiment. Alors essayez peut-être avec une marge pas trop importante. Alors, ce que nous pouvons faire, c'est peut-être étendre cela vers le bas. Peut-être aurons-nous besoin d'un peu de hauteur car nous sommes plafonnés à 196. Ce que nous pouvons faire, c'est opter quelque chose comme 500 ou quelque chose comme ça, puis essayer d'augmenter ce chiffre. On y va. Allons-y donc avec 32 ici également. Maintenant, quand je commence à dimensionner, cela fonctionne jusqu'aux tailles les plus petites, jusqu'à quelque part par ici peut-être. Alors, encore une fois, ce truc avec Nintendo. Donc quelque part par ici fonctionne toujours. Je vais donc simplement conserver cette mise en page. Je ne vais pas trop m' inquiéter à ce sujet. Ce que nous pouvons faire en fait, c'est qu'à l'intérieur d'ici, ce qui nous donnera un peu plus de marge de manœuvre, je vais réduire cet écart à 24. Ce que cela va me permettre de faire , c'est que ce sera beaucoup plus proche, même pour les plus petites tailles, quelque chose comme ça. C'est ce que l'on appelle la description qui fonctionne bien. Les spécifications des véhicules ne le font pas. Alors changeons cela. Passons donc à la description des spécifications. C'est bien. Cette action spécifique. Voyons maintenant où nous en sommes. Nous allons donc nous adapter ici car nous en avons six. Voyons ce que nous pouvons faire ici. Peut-être pouvons-nous ajuster la largeur de ceux-ci, quelque chose comme 0,75 POUR 0,754. Et je vais réduire ce chiffre à 24. Voilà. Alors maintenant, les fractions de ces colonnes sont en fait beaucoup plus étroites. Vous pouvez donc voir que le contenu va beaucoup mieux coller. Ou si vous ne voulez pas voir ça, vous pouvez simplement venir ici et débarrasser d'une colonne pour la faire baisser. J'en ai donc besoin de six au total. Alors 123, on y va. Et celui-ci, FR, sera, disons, un POUR comme ça. Et maintenant, nous avons la mise en page complète du contenu et nous allons simplement la conserver comme ça. Il suffit donc de se débarrasser de la deuxième colonne et de s'en tenir à une colonne pour la même histoire de sécurité. Voyons donc ce que nous pouvons faire. Nous pouvons traverser la colonne chaude et voir de combien il nous en faut. Nous avons donc besoin de 123451 FR. Alors 12345, adorable, frappe, c'est fait. Et parce que son texte va très bien s'adapter. Nous allons faire de même ici. Alors sois très vif d'esprit. Débarrasse-toi de celui-ci. De combien il nous en faut. Animé. Passez à la suivante, qui est l'extérieur. Débarrasse-toi de celui-ci. Ajoutez-en également les nouveaux ici. OK. Passez à l'intérieur. Même histoire. Assurez-vous donc d'être à un FR, pour la largeur. Parce que de cette façon, tout s'intégrera parfaitement et fera de même ici. Voyons les lignes 123. C'est génial. Maintenant, tout va être beaucoup plus évolutif et paraître beaucoup plus cohérent, naturel ici. Enfin, pour jeter ce que nous avons, c'est sur les tailles les plus petites possibles, nous avons ceci. Voyons donc si le texte à l'intérieur d'ici est centré, ici, il est centré. Donc, comme il hérite de ces 50 pixels, je peux même ajouter la classe combo, ce que je peux même ajouter la classe combo, je ne vais pas faire parce que je suis vraiment content de cette mise en page, de son apparence. Je pense que c'est bien, car qui utilise vraiment quelque chose en dessous de ces tailles ? Quelque chose comme cet iPhone SE Phi of S plus tôt. Je ne pense pas que quelqu'un utilise quelque chose de petit. Nous avons donc ici notre collection qui fonctionne bien, tout fonctionne bien. Et c'est en gros tout. C'est notre design réactif terminé. Et dans la prochaine leçon, nous allons en fait commencer et aborder quelques animations. Je vais donc vous montrer comment configurer autant de patients et comment jouer avec les animations. Je vais vous expliquer comment les animations fonctionnent dans Webflow et ce à quoi vous devez penser lorsque vous créez ces animations dans Webflow. 191. Animations dans le webflow: Dans cette vidéo, nous allons aborder l'animation, mais je veux juste vous montrer la petite erreur que j'ai commise précédemment. Donc, si je le ramène à Webflow ici, j'ai essayé réduire la taille de ces images ici. Mais ce que je peux faire, c'est ajouter des classes distinctes , puis ajuster la largeur et la hauteur ici. Cela permettra de maintenir ces tailles cohérentes. Donc, peu importe ce que je fais ici tout au long de ma conception, vais les garder cohérents. Alors laissez-moi vous le montrer ici même. Faisons quelque chose comme Hiro, Hiro, Key, Image Phone ici. Donc, lorsque j'ajuste la largeur et hauteur pour obtenir un métronome de 80 pixels, voyons ce que cela fait. Et une hauteur de 80 pixels. Comme je suis sur ce téléphone, cela ne devrait pas se propager ici. Vous pouvez donc voir ce qu'il fait. Et c'est la même histoire ici. Donc, si je dois me débarrasser de celui-ci, supprimer la classe, et passons au téléphone de garantie Hero. Allons-y maintenant avec une largeur de 80 pixels, une hauteur de 80 pixels. Et il se propagera bien et conservera la même cohérence que celle que nous l'avons fixée. Ici. Je pourrais peut-être le déplacer un peu, peut-être grossièrement ici, pour que vous puissiez voir à quel point cela devient fastidieux de temps en temps lorsque vous jouez avec ces éléments. Je pense donc que cela fonctionne bien. Enfin, tout l'intérêt de cette vidéo est l' animation dans Webflow. Et l'animation peut parfois être très complexe, mais ce n'est pas forcément le cas. Vous pouvez le rendre aussi simple que vous le souhaitez. Donc, ce que nous voulons ici, c'est que si je passe à l'animation, vous pouvez voir que nous avons un déclencheur d'élément et que nous avons déclencheur basé sur un déclencheur de page Vous pouvez voir ici ce qu'il fait. Il déclenche simplement la page entière une fois qu'elle est chargée. Et le déclencheur des éléments va déclencher cet élément lui-même. Passons donc à ici. Et laissez-moi épingler ça ici. Il reste donc cohérent. Nous avons donc ici ce contenu sur les héros. Donc, ce que je vais faire, c'est que pour le déclencheur des éléments, je vais cliquer sur ce Plus. Et vous avez déjà des animations préparées , puis vous avez des animations que vous devez préparer vous-même. Donc, ici, vous pouvez voir quand je les appuie et que je déclenche, vous pouvez voir un clic ou un appui de la souris. Que se passera-t-il alors ? la souris, qui est ce que nous avons déjà gros, lorsque nous survolons avec notre bouton, vous pouvez voir ce que nous avons. Ensuite, vous devez déplacer la souris sur l'élément. Alors, lorsque je déplace ma souris, que se passe-t-il ? Vous pouvez définir et vous avez des millions d' exemples différents en ligne. J'ai voulu que mon discours soit le plus simple possible, mais encore une fois, le plus complexe possible. Mais c'est ajustable pour tout le monde et je ne vais pas trop aborder, mais vous pouvez vous rendre sur award.com avec trois w. Donc un www.com. Et vous pouvez voir toutes sortes d' animations de ce type. Lorsque vous passez la souris, ces dégradés se déplacent en arrière-plan. Vous pouvez suivre ma chaîne YouTube Alex sur le design, où je vais aborder à l'avenir ces tutoriels sont nombreux, car beaucoup de designers les demandent, donc nous n'allons pas trop parler de c'est maintenant. Faites défiler l'écran jusqu'à la vue. Alors, que se passe-t-il lorsque cet élément apparaît dans la vue ? C'est ce que nous allons faire. Et lorsque vous faites défiler la page vers la vue, que se passe-t-il ensuite ? La barre de navigation s'ouvre. Que se passera-t-il alors ? Changement d'étape ouvert vers le bas, diapositive de modification. Donc toutes ces choses. Alors allons-y avec, disons, le déclencheur de page. Voyons ce que nous avons là-bas. Ainsi, la souris se déplace dans la fenêtre d'affichage pendant que la page défile, la page se charge et que la page défile. Je vais appuyer ici pour déclencheur de l'élément et taper scroller pour voir. Et ce que je peux faire ici, c'est sélectionner l'action. Et vous pouvez voir que je sélectionne uniquement ce contenu de héros. Mon action sera donc glissante. Je vais me glisser par la gauche. Mon décalage sera peut-être d'environ huit, et le délai pourrait être inférieur trois millisecondes ou quelque chose comme ça. Quand je clique sur Aperçu, vous pouvez voir à quoi cela ressemble. Donc 8.3 et je vais sélectionner mon image de héros, et je vais faire exactement de même. Alors faites défiler l'écran pour voir. Diapositive plutôt depuis la gauche, je vais choisir depuis la droite. Et je vais dire quelque chose comme huit et peut-être cinq. Ça va donc être un tout petit peu plus lent. Vous pouvez donc voir à quoi cela ressemble. Je vais cliquer sur Preview. Vous pouvez voir à quoi cela ressemble. Donc, quand nous y reviendrons, passons maintenant à l'ensemble de cette section. Et ce que nous pouvons faire, c'est défiler jusqu'à la vue, sélectionner une action. Je vais choisir une diapositive. Par le bas. Et voilà. Offset. Allons-y avec huit et plus tard. Allons-y avec dix millisecondes cette fois. Donc, quand je clique sur l'aperçu, vous pouvez voir que cela s'appelle interview parce que c'était juste un tout petit peu au-dessus de la ligne de flottaison. Passons maintenant à cette section lorsqu'elle apparaîtra. Je vais faire de même. Mais peut-être pouvons-nous nous nourrir, par exemple pour apparaître et disparaître. Alors peut-être que nous pouvons atténuer un décalage de huit, un retard de dix peut-être. Et voyons ce que cela fait. Nous avons donc simplement tendance à entrer ou à disparaître. Et vous pouvez également modifier le moment où vous faites défiler la page vers le bas de votre écran. Nous pouvons également commencer le fade, le Fade Out offset de huit, le retard de dix. Voyons donc ce que tout cela apporte. Faisons défiler l'écran jusqu'en haut. Donc, nous avons ceci, puis nous avons ceci. Peut-être que vous faites défiler la page vers la vue et que vous faites défiler la page vers la sortie de la vue. Vous ne pouvez même pas le voir car il est déjà éteint. C'est donc essentiellement ce que je veux. Mais peut-être pouvons-nous définir ce décalage à zéro milliseconde. Et peut-être que cela peut être, je ne sais pas, 3 % ou quelque chose comme ça. Donc, quand je vais quelque part par ici, cela s'estompe et s'estompe à peu près par ici. Vous pouvez donc même réduire complètement ce décalage. Revenez à zéro et voyez ce que cela fait ici. Donc je pense que c'est bien. Et enfin, ce que je voulais vous montrer, c'est ceci. Nous pouvons donc définir ces paramètres de déclenchement. C'est essentiellement pour que vous puissiez aborder les éléments ou la classe. Je peux donc m'inscrire au cours. Vous pouvez donc voir la collection exclusive, c'est ma section, la section collection exclusive. Je vais aborder l'ensemble du cours. Et je ne vais pas charger cette animation sur tablette, paysage et portrait. Pourquoi ? Parce que je veux que les gens sauvegardent leur connexion Internet, peut-être sur les tablettes. Gardons-le sur une tablette, mais pas sur téléphone, paysage ou portrait, ce qui ne fera que rendre notre site Web un peu plus rapide lors du chargement. Vous pouvez faire de même avec celui-ci. Je peux donc m'en débarrasser d'ici et d'ici. Et pour ce qui est du principal, je vais le garder à l'intérieur juste pour le plaisir. Ce que nous pouvons faire, c'est peut-être faire quelque chose d'un peu différent. Nous avons donc notre offre d'emballage, puis nous avons du contenu et nous avons cette image pour commencer, parce que nous sommes sur un ordinateur de bureau. Ce que nous pouvons faire, c'est donner un nom à cette image, afin que nous puissions renommez cette classe et nous pourrons l'appeler notre offre, IMG, juste pour savoir de quoi il s'agit. Nous pouvons passer à l'animation et au déclencheur des éléments. Et nous pouvons le faire en faisant défiler l'écran pour voir l'action. Ensuite, nous pourrons nous débarrasser de ceux-là. Vous pouvez donc sélectionner une animation Action Play Scroll tout en faisant défiler la vue Les limites de l' animation sont les suivantes lorsque l'élément est totalement invisible et lorsqu'un élément est entièrement visible. Ainsi, vous pouvez même ajuster la dette. Ainsi, vous pouvez ajouter un décalage, vous pouvez commencer à sortir. Commence alors à sortir. Et vous pouvez ajouter un peu de colère, peut-être environ 20  %, quelque chose comme ça. On y va. Ce que nous pouvons faire, c'est que nous n'avons aucune animation, nous devons donc commencer une animation. Ce sera donc notre offre d' animation ou notre offre d'animation d'images. On y va. Donc, à zéro pour cent, nous allons dire, disons, opacité, ce qui sera quelque chose comme zéro pour cent. On y va. Et voilà, laisse-moi me débarrasser de moi pour que tu puisses voir ce que je fais. Je réduis donc simplement l'opacité ici à 0 % et en assouplissant, je vais en configurer deux entrées et sorties. Et voilà. C'est à 0 %. Donc, quand je passe à l' aperçu en direct et que je passe à environ 6 %, je repasse à l' opacité du style. Et ce sera à 100 %, et ce sera en quad. Vous pouvez donc voir à quoi cela ressemble. Donc, quand je commencerai à faire défiler la page, ce sera là. Et quand je m'en éloignerai, ça disparaîtra complètement. Donc peut-être que 6  %, c'est un peu moins. Ramenons-le donc à environ 20 %. Ainsi, lorsqu'il commence à défiler, vous pouvez le voir apparaître facilement peut-être environ 40  % ou quelque chose comme ça. Et voilà. Ou peut-être même passer à 80. Voyons ce que cela fait. Pas grand-chose, donc c'est à 100 ici. Alors peut-être que nous pouvons en définir un de plus et lui donner une opacité d'environ 40 %, quelque chose comme ça. Donc, lorsque nous commençons à faire défiler la page ici, puis ici, cliquez sur Enregistrer. Faisons un aperçu et voyons à quoi cela sert. On y va. Vous pouvez donc voir que c'est vraiment une diapositive. Vous pouvez le voir juste en bas. Très légère décoloration, comme ça. Et vous pouvez également apporter les modifications nécessaires au fondu. Ce que je veux pour cette section ou ce contenu d'offre en particulier , c'est simplement qu'il soit mis en place. Alors faites défiler l'écran pour voir. Action, peut-être disparaître, disparaître. Décalage, peut-être que je peux le régler sur cinq et retarder peut-être dix millisecondes, quelque chose comme ça. Donc, quand je clique ici, vous pouvez le voir apparaître, donc c'est juste un léger retard, donc il disparaît. Et lorsque vous quittez la vue, vous pouvez faire disparaître le destin, une fois de plus. Et je ne veux pas qu'il soit décalé, alors testons-le, voyons à quoi cela ressemble à un fondu. Et quand il s'éteindra comme prévu, il disparaîtra . Celui-là. Ce que nous pouvons faire, c'est peut-être, je ne sais pas, peut-être que nous pouvons continuer à ne pas aimer, mais peut-être que je peux simplement utiliser ce déclencheur d'avantages pour faire défiler vers la vue. Je peux glisser par le bas. On y va. Et je pourrais peut-être proposer un petit décalage et un peu de retard, quelque chose comme ça. Voyons si un retard énorme fait différence. Oui, c'est le cas. Comme vous pouvez le constater. Vous pouvez voir à quoi cela ressemble. Donc, quand je clique encore une fois, c'est parti. Il y a tellement de retard dans la mise en place. Donc quelque chose comme 460. Je pense que cela fonctionne très bien. En ce qui concerne le formulaire de contact, ce que nous pouvons faire, c'est faire en sorte que les mêmes éléments déclenchent qu'il se répande dans notre design. Appuyez donc sur Entrée pour que nous puissions le modifier. Les éléments se déclenchent, nous allons passer à la vue. Et je peux faire une pause et attendre. Peut-être allons-y avec 350 millisecondes. On y va. Au lieu de cela, par la gauche, je vais partir du bas. Offset, peut-être cinq, juste pour avoir au moins quelque chose. Et cliquons sur Aperçu et dormons ce que nous faisons. Donc des avantages. Et vous pouvez voir le formulaire. Et nous allons faire de même pour ceci et pour notre pied de page. Voyons donc Map, Kit, entrez le même parchemin dans la vue. Et je peux opter pour quelque chose comme des diapositives du bas, 400. Et ça peut être à cinq heures. On y va. Et je ne vais pas le montrer sur mobile et en portrait. Nous y voilà, revenons à l'exemple et je vais faire de même pour ici. Cliquez donc sur votre animation et supprimez-la simplement une fois de plus d' ici, par souci de rapidité, faites de même pour le pied de page. Pour le dossier, faites défiler l'écran jusqu'à l'affichage. Sans eux, ce que je peux faire, c'est peut-être voir, nous pouvons voler, nous pouvons tomber, nous pouvons faire toutes ces choses. Peut-être disparaître. Allons-y avec 400. Et cela peut être cinq. Fais-toi fondre. On y va. Revenons maintenant à l'exemple. Allons, revenons au sommet. Cliquez sur Aperçu. Ceux-ci à mettre en place. Cela fonctionne toujours bien. Donc, quand je viendrai ici, cela va disparaître. Cela va s'estomper. Cela va s'estomper. Vous pouvez voir à quel point ces sections sont en retard, ce que nous voulions au départ. Et c'est génial. La page d'accueil est donc terminée. Passons aux voitures. Donc, pour la voiture, ce que nous pouvons faire, c'est peut-être faire une animation un peu différente. Donc, cet élément qui se déclenche lorsque le défilement vers la vue va s'alimenter et que le délai sera assez important. Donc 600, par exemple cette affaire. Et allons-y avec dix. Et cette image de carte défilera pour apparaître, peut glisser, glisser vers le haut depuis le bas. Et allons-y avec quelque chose comme 100. Et ça peut être cinq. Allons donc en avoir un aperçu. Vous pouvez donc voir à quoi cela ressemble. Et je ne vais pas le montrer sur ces deux-là , quelque chose comme ça. Et vous pouvez également définir les actions personnalisées ici, ou vous pouvez définir l'Easing personnalisé. Mais je pense que ça va très bien fonctionner. Ainsi, peut-être pourrions-nous ajuster cela un peu plus. Comme du sirop contre la toux. Peut-être cinq, juste pour que ce soit un peu plus rapide comme ça. Et notre collection exclusive existe déjà. Peut-être que nous pouvons également l'atténuer . Ainsi, toute cette section défilera pour apparaître ou, lorsque vous faites défiler l'entretien, vous pouvez même la configurer de manière à ce que l'interaction continue s' anime au fur et à mesure que les éléments s'agrandissent. Viewport. Je ne vais pas le faire parce que nous avons huit éléments, donc le simple fait de défiler la page vers la vue fonctionnera très bien. Appuyons sur Fade ici, et allons-y avec environ 400 millisecondes d'effacement. On y va. Cliquez, et c'est parti. Nous avons donc maintenant ces deux-là. Et nous avons pris contact avec nous. Nous l'avons partout. Cela fonctionne très bien. Peut-être que pour le pied de page, nous pouvons peut-être l'ajuster pour qu'il soit un peu plus lent, car il est plus rapide, pas plus lent. Au lieu de 400, peut-être 300. On y va. Alors maintenant c'est terminé. Passons maintenant aux prêts. Et ce que je veux faire avec les poumons, c'est faire trois animations différentes ici. Donc pour ici. Mais avant, je suis vraiment désolée pour ça. Revenons aux voitures et ajustons certaines d'entre elles. Ça, d'accord. Et ça, c'est pour ces deux-là. On y va et on a réparé le reste. Passons donc aux prêts. Et ici, je vais faire défiler la page pour accéder à la vue. Je vais dire sélectionner la diapositive. Par le haut. Nous y voilà, quelque chose comme des centaines. Et puis ils peuvent glisser de chaque côté. Alors faites défiler la page vers la vue, glissez de la droite, 300. Et cela devrait être fait défiler pour afficher les diapositives par la gauche, 300, quelque chose comme ça. Et enfin, nous allons traiter de cette section ci-dessous. Donc, tout d'abord, les choses apparaissent d'abord dans la vue. Je vais choisir le destin, pas le glissement, mais le destin. Et quelque chose comme 400. Ça va être bien et le décalage sera d'environ cinq. Alors testons-le. On y va. Je pense que ça va très bien se passer. Et ensuite, pour ces deux-là, ce que nous pouvons faire, car il s'agit essentiellement de notre dernière section. Nous pouvons peut-être oublier cela depuis des sites comme celui-ci et y mettre fin. Ils ne vous font pas perdre trop de temps et vous pouvez bien sûr jouer avec ces éléments comme vous le souhaitez. Donc, en défilant dans la vue, je vais définir l'action. Et tout d'abord, débarrassons-nous de ceux-ci. Et avant de le faire, voyons si nous l'avons configuré pour cela. Nous ne l'avons pas fait. Faisons donc en sorte de régler ce problème. On y va. Et les textes peuvent rester les mêmes car cela ne prend pas trop de bande passante. Ainsi, les images des partenaires défilent dans la vue, sélectionnez l'animation Action Play Scroll. Ici, ce que nous pouvons faire, c'est lisser, c'est que 50 pour cent se voient proposer une animation d'image. Ajoutons-en un nouveau. va donc y avoir des partenaires, de l'animation, des partenaires, de l' animation d'images comme ça. Donc, à zéro pour cent, nous allons dire, disons que l'opacité va être de 0 %. À 9 %, ce sera une opacité à 40 %. Et ici c'est 13 %. Peut-être pouvons-nous faire en sorte que l' opacité soit à 100 % en entrée, en sortie quatre pour faciliter la tâche, en sélectionnant celui-ci dans notre quad et en sélectionnant celui-ci en quatre entrées et sorties. Permettez-moi de passer un peu à l'échelle, sur l'aperçu et de voir ce que nous avons jusqu'à présent. Vous pouvez donc voir qu'il s'agit simplement d'un léger assouplissement. Faites juste attention à ce coin de votre écran. Et voilà. Donc, un peu d' animation et tout fonctionne bien. Et je voudrais faire passer ce texte de côté. Alors, configurons-le ici. Vous pouvez cliquer sur Enregistrer ici , puis revenir à votre animation. Ainsi, lorsque je sélectionnerai le contenu de mon partenaire, cela m'amènera directement ici. Donc, ici, en faisant défiler votre vue, nous pouvons le faire, mais je vais simplement utiliser un défilement vers la vue. Et je vais dire quelque chose comme slide parce que nous avons déjà utilisé ceux de la droite. Quelque chose comme cent 50 millisecondes. Peut-être. Cliquez sur Aperçu. On y va. Donc ça a l'air bien et je pense que c'est bien. Enfin, il ne nous reste plus qu'à nous contacter. Je ne vais rien animer ici. C'est déjà fait pour moi. Mais parlons simplement de la page du modèle de voitures et je n'en ferai pas trop ici. La seule chose que je peux peut-être mentionner ici est celle-ci. Donc, sur l'animation, parce que vous pouvez simplement imaginer que les internautes parcourent ces pages de gauche à droite et qu'ils en ont un peu assez de vos animations, surtout si vous êtes en les utilisant imprudemment dans chaque section. Cela peut donc être un peu fastidieux de temps en temps. Donc, dans cette section, tout ce que je veux faire, c'est peut-être animer cette carte. Peut-être légèrement, mais je ne pense pas que ce soit nécessaire non plus. Je ne sais pas Je pourrais peut-être modifier toute cette section. Alors voyons voir. Les éléments se déclenchent, défilent pour apparaître, agissent, disparaissent et retardent d'environ 50 millisecondes. Voyons à quoi cela ressemble. On y va. Donc rien de trop important. Peut-être que je peux ajuster ces 200 millisecondes ou quelque chose comme ça pour que ça ressemble à un chargement de page comme ça. Et je pense que c'est vraiment tout ce qu'il y a à voir ici. Je voudrais qu'il soit peut-être animé, mais allons-y. Pour cette section. Faisons défiler la page vers la vue, ou disons qu'elle s'estompe, 200 millisecondes s'estompent. Je pense que ce sera suffisant. Donc, quand j'ai cliqué sur l'aperçu. En venant ici, vous pouvez voir à quoi cela ressemble . C'est très bien. On y va. Les animations de notre site Web sont terminées. Et bien sûr, vous pouvez aller de l' avant et jouer avec cela beaucoup plus en détail. Ce que je n'ai pas mentionné, c'est que vous pouvez combiner différents éléments. Voyons donc si je souhaite animer cette image pour une raison quelconque, je peux accéder au déclencheur de l'élément. Ensuite, je peux dire quelque chose comme en faisant défiler la page dans la vue, ce que je vous ai déjà montré. Et puis faites défiler l'écran, placez une animation d'exploration. Je vais m'en débarrasser comme déjà mentionné, puis je pourrai ajouter une nouvelle animation ici. Ce que je n'ai pas mentionné, c'est que vous pouvez les ajouter tous en même temps. Vous pouvez également filtrer et faire des animations sur les filtres, vous pouvez cliquer ici et supprimer l'animation. Donc, lorsque vous allez ici, faites défiler l'écran jusqu'en bas. Laisse-moi me cacher pour que tu puisses le voir. Vous avez ces transformations 2D et 3D. Donc, ce que vous pouvez faire en termes de dose c'est que si je vous montre quelque chose comme des transitions, vous obtenez cette opacité. Ainsi, lorsque vous placez le curseur sur l'opacité, par exemple , nous avons ici l'opacité. On y va. Mais si j'ajoute un état de survol à cette image, je peux maintenant ajuster cette opacité et la déplacer afin de passer en mode non-état. Voyons voir quand je clique sur l'aperçu, vous pouvez voir une légère opacité, mais bien sûr, vous pouvez l'ajuster, le déplacer et le positionner comme vous le souhaitez. Donc, en gros, disons 275 millisecondes, je peux ajuster cela pour qu'il soit quelque chose comme ça. On y va. Et je peux même ajouter une nouvelle animation à l'intérieur. Donc, lorsque vous passez le curseur, vous dites de passer à l' état non étatique pour ajouter une transition afin que je puisse y passer. Mais je n'en ai pas vraiment besoin pour le moment. Et je vais juste m'en débarrasser. Ce que je voulais vous montrer, c'est nos transformations en 2D et 3D. Donc, ce que vous pouvez faire, c'est également en survolant ou en charge, vous pouvez modifier les valeurs x. Donc à gauche et à droite, qui vont augmenter l'échelle via des valeurs qui vont augmenter la hauteur et les valeurs Z. Vous avez déménagé, vous avez de l'échelle, vous avez une rotation, vous avez un biais, toutes sortes de choses différentes. Vous pouvez donc ajuster cela. Vous avez votre boîte d'ombres pour l'arrière-plan pour laisser tomber des ombres, vous avez vos différents filtres. Donc tu as ta plèvre ici. Luminosité, contraste, teinte, saturation, toutes sortes de choses différentes. Et vous pouvez en ajouter un pour qu'il apparaisse dans certains cadres, puis en ajouter un autre pour qu'il apparaisse dans différents cadres. Enfin, vous avez ces filtres de fond, qui sont fondamentalement les mêmes que celui-ci, mais pour votre arrière-plan, pas pour l'image elle-même dans ce cas. Vous pouvez donc les combiner avec les animations de base que je vous ai déjà montrées. Enfin, ce que nous pouvons faire c'est utiliser le déclencheur de page. Rentrons donc chez nous ici. Il se charge donc une fois de plus, comme ça. Et puis comme ça. Donc, déclenchement de la page, chargement de la page. Et nous pouvons démarrer une animation. Vous pouvez maintenant ajuster l'animation de chargement pour l'ensemble de votre chargement. Cela se produit donc uniquement sur le bureau, par exemple et vous pouvez commencer une animation. y a pas d'animations. Je peux donc cliquer ici et commencer à animer ça. Disons donc l'animation de la page d'accueil. On y va. Et ici, je peux cliquer ici. Et puis disons, je ne sais pas, que les textes, la couleur, la taille ou le masquage montrent quelque chose ou quoi que ce soit d'autre. Masquer Afficher, je peux sélectionner l' élément que je souhaite masquer. Disons donc celui-ci. Cachez, montrez. Et je peux définir cela comme état initial. Et maintenant, quand je commence à animer vers le bas, par exemple ici à la fin, je peux masquer les éléments d'affichage. Je peux sélectionner l'élément après la session précédente avec l'assouplissement du délai. Vous pouvez donc choisir Display. Vous pouvez faire toutes sortes de choses différentes ici. Et vous pouvez vraiment approfondir l' animation et Workflow propose un excellent cours sur leur site Web Webflow Academy. Alors peut-être que vous pouvez y jeter un œil et voir à quoi cela ressemble. Mais pour l'instant, je vais juste laisser ça tel quel. Et je vais juste mettre fin à ces animations, car nous en sommes déjà à 26 minutes et nous pouvons vraiment avancer d'une heure à parler de ces animations, mais souvenez-vous simplement, peu importe ce que vous faites créez mieux dans le logiciel de conception de votre choix. C'est Adobe XD, Figma, Sketch, peu importe. Vous pouvez recréer cela dans Webflow et en ajouter beaucoup plus. Donc des transitions entre les pages, des effets de survol sur les éléments, des animations sur différents éléments, des animations d' arrière-plan sur ces différents arrière-plans, par exemple, nous avons ici ces cercles. Peut-être que lorsqu'ils sont en vue, ces cercles peuvent s'animer et se déplacer. Donc, si je le montre, je peux peut-être sélectionner celui-ci comme état initial. Et puis pendant que mon utilisateur regarde l'écran, celui-ci peut s'animer et suivre ce chemin jusqu' ici, puis rebondir vers ici ou quelque chose comme ça. Peut-être que cette image de voiture peut grandir, rétrécir et revenir en arrière. Ainsi, toutes sortes d' animations différentes peuvent être réalisées ici même dans Webflow. Mais en gros, cette vidéo ne couvrira que les bases, comme je l'ai mentionné, car nous serons là toute la journée. 192. Édition et exportation de codes: Et voilà, nous arrivons à la fin de ce Webflow construit. J'espère que tu t'es bien amusé. Il est maintenant temps de lancer ce site Web et d' exporter notre code. Comme je l'ai mentionné précédemment, vous devez avoir le plan payant pour le faire. Mais vous pouvez toujours vous lancer sur le domaine Webflow, ce que nous allons faire, mais vous ne pouvez pas exporter de code avec un forfait gratuit. Laissez-moi vous montrer comment faire exactement cela. Donc, quand je clique ici et que je t'emmène ici, tu as ces options. Vous avez donc cette option de partage. Vous pouvez donc avoir votre lien de partage uniquement, copier ce lien et inviter éditeurs invités. Si vous voulez que quelqu'un d'autre le modifie, vous devez avoir votre forfait payant pour le faire. Ou vous pouvez simplement copier et partager ce lien avec vos clients. C'est donc une excellente option. Comme dans votre logiciel de conception ou de votre choix. Vous pouvez partager le lien et vos clients pourront voir ce que vous avez fait. Ils peuvent jouer avec les animations. Ils peuvent voir la réactivité que vous avez faite. Et ils vont voir cet aperçu ici même pour pouvoir cliquer sur ces différents points d'arrêt. Et ils peuvent voir que cette animation se déroule en temps réel, ce qui est idéal pour vous donner des commentaires. Et vous pouvez même les inviter à collaborer avec vous sur ce projet en particulier. À côté, nous avons un code d'exportation, n'inclut pas les fonctionnalités ou le contenu du CMS. Vous pouvez exporter le contenu des collections depuis le panneau des collections. C'est donc ce dont nous avons parlé. Vous pouvez héberger avec Webflow pour tirer pleinement parti du CMS, du formulaire de commerce électronique et des fonctionnalités de recherche. Mais si vous imaginez que, par exemple pour ce projet, nous n'avions pas de CMS, nous avions juste des pages statiques et nous voulons exporter quelque chose comme ça. Voici à quoi ressemblera le code . Il vous suffit donc de cliquer ici où se trouve cette icône de code. Vous avez votre code HTML, votre CSS, votre JS, qui est pour les animations. Et enfin, vous avez votre atout. Cela va donc très bien regrouper tous nos actifs. Nous les avons déjà sur un ordinateur de bureau, mais vous avez besoin de ces ressources si vous souhaitez déplacer ce site Web vers un autre hébergement. Disons donc que je ne veux pas héberger avec Webflow. Je souhaite héberger avec hébergement ici ou Bluehost, ce que j'ai mentionné précédemment. C'est pourquoi vous avez besoin de tous ces atouts. Ce que vous allez obtenir alors, c'est d'appuyer sur Préparer le zip. Passons à la préparation de vos fichiers dans un dossier zip en deux ou 3 minutes environ Selon le temps de traitement, nous préparerons ces fichiers pour vous. Ensuite, vous pouvez prendre ce fichier zip et le télécharger directement dans le dossier racine de votre hébergement ai déjà fait de nombreuses fois auparavant, mais plus récemment, pour mon système de conception appelé Système de conception Inception, cette page est entièrement conçue et préparez-la dans Webflow, exportez-la depuis Webflow et téléchargez-la simplement sur mon propre hébergement. Je n' héberge pas cette page sur Workflow. Et c'est aussi simple que cela. En gros, vous pouvez voir le code HTML, vous pouvez voir à l'intérieur de la balise body ici ce que nous avons. Nous avons donc toutes ces divs de base. Donc, contenez une section Navbar du conteneur, tout ça. Nous avons donc l' emballage de héros que nous avons ajouté. Vous pouvez voir le texte ici. Vous pouvez voir le bloc de texte de rupture centré sur Siqueiros C'est la classe, et c'est le nom du div. Et puis nous avons cela en termes de CSS, ce que nous avons, c'est que nous avons ces marges, sections, toutes sortes de choses différentes. Vous pouvez donc imaginer ce que nous avons fait visuellement. Nous devrons saisir tout cela dans notre code. C'est pourquoi Webflow est génial, car vous pouvez ajouter tout cela à l'intérieur. Vous pouvez donc voir que pour la flexbox, pour l'alignement des éléments, pour la marge, vous avez tout cela. Et en JS, vous avez toutes les animations que vous avez faites pour l'introduction, pour le chargement des pages, toutes sortes de choses différentes. Et ici, vous pouvez voir que vous avez cette licence de flux de travail, mais si vous voulez vous en débarrasser, vous devez payer ce plan d'agence. Je pense que 35 dollars par mois ou quelque chose comme ça, cela servira à étiqueter votre code en blanc et à ne pas afficher le flux Web qui s'y trouve . Enfin, je veux montrer que c'est publié. Vous pouvez donc choisir la destination de publication. Vous pouvez choisir de publier sur le lien Webflow IO. Et vous pouvez fermer, accéder aux options avancées et activer le SSL. En gros, si vous vendez quelque chose sur votre site Web, il affiche simplement ce verrou sécurisé à côté de votre navigateur. Du HTML réduit, qui va simplement réduire le code il contient et le rendre organisé et compressé. CSS et JS, ça va faire la même chose. Et vous pouvez utiliser des en-têtes de cadre sécurisés qui, si vous passez la souris dessus, protègent votre site de plusieurs types d' attaques de click jacking en limitant l'intégration de différents côtés. Tout le monde ne peut donc pas intégrer votre site Web dans ses blocs, par exemple ou quelque chose comme ça. Je vais donc juste m'en servir. Je ne vais pas utiliser de domaine personnalisé, vous pouvez donc cliquer sur Publier pour le sélectionner. Domains va prendre quelques instants et quand il sera prêt, il sera publié. Et puis vous êtes publié avec succès. Et maintenant, ce que nous pouvons faire, c' est ajuster certains de nos paramètres de référencement. Et généralement, lorsque je fais cela, j'aime travailler et ajuster le référencement en même temps. Ou, une fois l'ajustement effectué, il suffit de commencer. J'aimerais préparer mon référencement, mais à dessein, je ne voulais pas vous embrouiller car tout le monde ne s' intéressera pas au référencement. Évidemment, lorsque vous travaillez pour vous-même, c'est vous qui en êtes responsable, à moins que votre client n'engage un expert en référencement. Mais si vous le souhaitez et si vous savez comment le faire, vous pouvez apprendre les bases du référencement très rapidement, même sur YouTube, et simplement appliquer ces connaissances via votre flux Web. Sites Web. Le référencement est, bien entendu, l'optimisation pour les moteurs de recherche qui vous aider Google à trouver, indexer et optimiser votre site Web. Et plus vous êtes performant en référencement et plus vous avez de compétences en matière de référencement , mieux le site Web de votre client sera classé dans les résultats de recherche. Dans la vidéo suivante, nous allons donc aborder un peu le SEO. Et je vais juste vous montrer quelques réglages de base que tout le monde peut utiliser. 193. Optimisation du SEO: Très bien, laissez-moi maintenant vous montrer quelques paramètres de référencement que vous pouvez utiliser et que tout le monde peut utiliser Inside Buffalo, peu importe votre niveau d'expérience ou non. Donc, lorsque je vais directement sur notre site , je peux cliquer ici où il est écrit pages. Et voici les paramètres de cette page d' édition. Lorsque vous cliquez ici, vous l'avez probablement remarqué lorsque nous avons créé ces pages, mais il ne s'agit que des paramètres de base du référencement, car la façon dont vous écrivez votre code affecte directement le référencement. Mais comme nous n' écrivons pas de code dans Webflow, nous utilisons simplement des composants prédéfinis et nous utilisons simplement le générateur de pages et cette structure lorsque vous utilisez les meilleures pratiques, cela n'a évidemment pas d' importance car les meilleures pratiques vous aideront en matière de référencement. Mais si vous bloquez simplement des éléments sur une page sans aucune structure, sans utiliser, disons, des sections, car cette section indique Google indexe votre site que, accord, c'est section de cette page. À l'intérieur de cette section, nous avons le conteneur. Je sais donc qu'il contient certains éléments. À l'intérieur de ce contenant, nous avons un emballage. Je sais donc que l'emballage enveloppe du contenu. Et à l'intérieur de cet emballage, j'ai dit que j'avais, par exemple , je ne connais pas le contenu des héros, donc je sais que c'est le héros qui est censé atteindre le sommet. Nous utilisons également H1, H2 , H3, H4, etc. pour les titres. Et nous utilisons volontairement H1 en haut de la page, H2 en dessous de trois ans. Ensuite, nous avons utilisé des blocs de texte pour les éléments de texte et pour les plus petits éléments de texte, nous avons utilisé des paragraphes. C'est une bonne pratique à faire. Parce que Google aura beaucoup plus de mal à beaucoup plus de mal indexer votre site Web et à l'optimiser pour les recherches, car il comprendra également ce que vous faites pour les images dont nous avons parlé, ces balises alt, lorsque vous optimisez vos anciens textes pour chaque image, ce que vous êtes censé faire. Mais j'en ai oublié beaucoup à dessein pour ce cours, car cela nous prendra des heures et des heures. Mais vous devez le faire pour chaque image qui aidera vos images à être affichées dans la recherche d'images. Donc, chaque image que vous créez, que vous téléchargez, chaque icône, chaque photo. Veillez à toujours utiliser les textes alternatifs et à toujours utiliser le texte descriptif si nécessaire en fonction de l'image, comme je l'ai expliqué. Donc, ce que nous avons ici, si nous descendons jusqu'au bout, nous trions jusqu'au sommet. Nous avons une page d'accueil, nous pouvons donc bénéficier d' une protection par mot de passe, ce que nous ne ferons pas car nous n'en avons pas besoin dans le cadre d'un plan de site. Vous pouvez donc ajouter un plan de site pour vous décharger de vos dettes. Donc, paramètres de référencement, ce que nous pouvons faire ici , c'est à quoi ressemble le résultat de la recherche. Donc, balise de titre, titre de la page. Il s'agit du titre optimal de la page. Donc ce que je peux faire ici s'appelle ça un salon. Et ici, vous pouvez voir à quoi cela ressemble sur Google, sur la recherche, une araignée, des voitures exclusives. Et puis Meta Description. Décrivez la page. La longueur optimale de la description est comprise entre 155 et 300 caractères. So showroom de voitures exclusif, concessionnaire automobile exclusif. Réglons simplement ce problème. Concessionnaire automobile exclusif dans le centre de Belgrade. Nous savons donc que nous pouvons nous connecter directement à l'aide de la méta-description. Nous pouvons connecter la carte car nous l'avons déjà fait à l'aide de Google Maps. Il saura donc une fois de plus nous poster et nous en montrer plus aux personnes qui se trouvent dans la région de Belgrade ou dans la zone d'enquête. Désormais, le titre du graphe ouvert est quelque chose lorsque vous partagez votre site Web sur des réseaux sociaux tels que Facebook, Twitter, LinkedIn, Pinterest. Donc, ce que vous pouvez faire, c' est comme une balise de titre SEO, comme une méta-description quelque part. Et si quelqu'un partage votre page sur les réseaux sociaux, ce sera exactement pareil. Et vous pouvez ajouter l'URL de l'image ouverte, l'URL de l'image Open Graph, que vous devez télécharger. Ouvrez Graph si vous souhaitez que votre site Web soit partagé sur les réseaux sociaux. Il suffit donc d'aller sur ce site Web et de télécharger l'image dans ces dimensions de votre site, vous pouvez simplement télécharger une capture d'écran, par exemple, et cette capture d'écran est lorsque vous partagez quelque chose, disons à Facebook des histoires ou des publications sur Facebook, quelle que soit l' image extraite du site Web, c'est cette image. Et vous pouvez exclure cette page des résultats de recherche du site. Et vous pouvez dire le titre de la recherche, pareil, pareil. Et enfin, le code personnalisé. Si vous devez saisir un code personnalisé à l'intérieur de l' étiquette principale avant l'étiquette corporelle. Vous pouvez le faire ici. En général, vous le faites pour certains scripts, comme Google Pixel, par exemple lorsque vous le faites vous-même. Mais ici, nous avons une intégration directe, donc elle se manifestera d'elle-même. Ou si vous avez une discussion externe, par exemple, vous allez vous endetter. Ils se trouvent généralement à l'intérieur de l'étiquette frontale. Si vous utilisez quelque chose comme Google Analytics, peut-être ou quelque chose comme ça. Donc, ce que je vais faire, c'est simplement copier ceci. Et il dirait juste ici. Ensuite, où il est écrit voitures, dossier parent, nous savons comment je vais l'utiliser ici. étiquette de titre indique « voitures ». Alors voyons voir. Des voitures à vaches. Oui. Voyons voir. Balise de titre. Est-ce ce que vous voyez en haut de la page ? Alors peut-être que nous pouvons opter pour quelque chose comme des voitures araignées, des voitures garées. Voici donc l'URL réelle, website.com forward slash cars. Mais nous allons juste vous montrer quelque chose comme des voitures araignées, peut-être. Tout cela sera donc laissé intact afin que nous ne modifiions pas la dette. Ensuite, nous pourrions aller jusqu'aux poumons. Et pour les prêts, je peux obtenir la même chose ici. Mais peut-être pouvons-nous simplement changer cela. Concessionnaire automobile si exclusif dans le centre de Belgrade. Peut-être pouvons-nous faire quelque chose comme les meilleurs prêts automobiles exclusifs dans le centre de Belgrade car il s' agit de prêts. On peut donc parler d'une araignée, de prêts automobiles. C'est parti, cliquez sur Enregistrer. Et enfin, contactez-nous. Ce que nous pouvons faire, c'est revenir à Pages. Cliquez ici, contactez-nous. Ce que nous pouvons faire, c'est le contact dans le cadre des voitures. On y va. La méta-description garantit que c'est la même chose. Contactez-nous et conduisez la voiture de vos rêves dès aujourd'hui. Peut-être quelque chose comme ça. Vous pouvez donc voir à quel point c'est simple. Tout le monde peut le faire, mais cela aide vraiment Google à indexer vos images, à trouver n parce que cette image s'appelle une salle d'exposition d'araignées, comme vous pouvez le voir ici. C'est ce dont nous avons parlé et vous pouvez même le souligner. Alors, contactez-nous. Peut-être que nous pouvons ajuster cela un peu. Alors, contactez-nous et visitez peut-être notre salle d'exposition pour conduire la voiture de vos rêves ou quelque chose comme ça, juste pour relier davantage l'image à la méta-description elle-même. Et voici ce que nous avons, c'est que nous pouvons le faire. Nous pouvons donc opter pour la balise title. Peut-être. Je ne sais pas, en utilisant le champ de collection si nécessaire. Nous pouvons donc peut-être ajouter un champ de nom. Et voilà, méta-description. Nous pouvons peut-être ajouter Slug, qui est cette rangée orange ou Vogue. Et voilà. Vous pouvez également ajouter des champs supplémentaires. Voyons peut-être, peut-être aussi le nom. Et nous n'avons pas besoin de limaces, alors débarrassons-nous de ça. Nous pouvons ajouter un nom. Je vais donc dessiner notre Voc. Et voilà. Et peut-être que nous pouvons avoir du slash ici ou quelque chose comme ça. Une araignée fait partie des voitures ou repérez voitures exclusives ou quelque chose comme ça. Nous ne voulons donc pas qu'il soit trop grand. Découvrez des voitures exclusives. Donc, quand ça change, parce qu'en ce moment c'est ranger ou marcher, quand ça passe plus tard à Lamborghini Hurricane, il y aura toujours un observateur, des voitures exclusives, mais juste une Lamborghini Hurricane avant cela. Et le nom ci-dessous va également être optimisé. Utilisez les paramètres Open Graph. Pareil, pareil. C'est pareil, pareil. C'est la même chose que celle que j'ai mentionnée. Alors voilà. Vous pouvez voir à quel point c'était très simple. Ces quelques éléments nous ont vraiment aidés à optimiser le référencement de notre page. Et c'est en gros tout. C'est tout ce que tu peux faire. Dans quelques minutes. Vous pouvez voir qu'il ne m'a fallu que 8 minutes pour réaliser quelque chose comme ça à un niveau vraiment basique. Mais vous pouvez y aller très en profondeur. En termes généraux, je recommande , comme je l'ai mentionné, de télécharger la Fab Icone, télécharger le clip Web. Vous pouvez définir le fuseau horaire, assurez-vous de le faire. Ensuite, nous avons l'hébergement. Si vous voulez rester ici, vous devez acheter le plan. Comme nous l'avons mentionné, nous avons les éditeurs. Ainsi, qui sera votre éditeur pourra modifier et publier. Ensuite, nous avons la facturation, nous avons le référencement, nous pouvons donc ajuster cela. Donc, en matière d'indexation, je ne veux pas qu'il soit indexé parce que c'est essentiellement un site Web d' entraînement. Je ne veux donc pas qu'il apparaisse dans les résultats de recherche. Plan du site. Vous devriez ajouter un plan du site si vous ne savez pas comment faire, c' est très simple à faire. Il existe des sites Web. Vous pouvez simplement accéder à votre fichier de conception et voir toutes vos pages ou simplement revenir ici sur le site Web. En gros, vous avez une maison, des voitures, des prêts, contactez-nous et vous n'avez qu'une seule page. C'est donc tout ce que vous devez faire dans votre plan du site : la vérification du site Google. Vous pouvez donc accéder à la console de recherche Google, y créer votre compte et le revendiquer comme votre propriété. Et vous allez obtenir cet identifiant de vérification, collez-le ici. Ces deux-là vont se parler en arrière-plan. Et vous avez cette URL de balise canonique. Vous pouvez en apprendre davantage à ce sujet ici. Ces quelques modifications permettront d'améliorer encore votre site Web. Ensuite, nous avons les formulaires, comme je l'ai déjà mentionné, assurez-vous d'y inclure l'adresse e-mail de votre client et non vos propres polices de messagerie. Nous avons déjà fait les polices Google, donc c'est très bien. Les sauvegardes ne feront que de belles intégrations et du code personnalisé. Donc, en gros, c'est tout ce qu'il y a à voir. Nous l'avons, il est donc publié. Allons publier pour sélectionner les domaines. Et voilà, il va publier ce site Web publié avec succès, cliquez sur Fermer. Et quand je reviens voir mon designer, je peux voir à quoi cela ressemble. Et maintenant, sur mon profil, tu vas pouvoir voir ce site Web et tu vas pouvoir le cloner. Parce que je vais le rendre colonial pour vous. Je pense que ce n'est peut-être pas le cas parce que nous avons ces images. Peut-être parce que vous avez le contenu de ce cours, n'est peut-être pas la meilleure option pour le faire. Peut-être dans le futur. Faites-moi savoir si vous souhaitez que je le fasse, écrivez-moi un e-mail et dites-moi si vous souhaitez que je crée ce fichier complètement vierge afin que vous puissiez inclure vos propres images , puis cloner ce fichier . Parce que je ne suis pas vraiment sûr, car tous les membres de la communauté Web seront en mesure de le cloner. Et nous avons ces droits de licence sur ces images. C'est donc la seule raison pour laquelle je voulais, j'aime faire ça. Mais en gros, c'est tout. Vous pouvez voir à quel point ce référencement est très simple à réaliser. Au niveau débutant. De toute évidence, vous avez des agences de référencement qui s'occupent de cela à plein temps. Ils optimisent les mots clés, puis vous utilisez ces mots clés dans vos textes. Vous allez donc optimiser toutes ces choses. Alors fais juste attention à ça. Mais ce que vous pouvez faire en tant que designer, en tant que concepteur d'interface utilisateur UX, c'est simplement vous occuper ces techniques de base en matière de référencement et je de ces techniques de base en matière de référencement et je pense que tout ira bien au bout du compte. 194. AFFECTATION de l'article 17: Votre mission pour cette section est évidemment de construire à mes côtés et d'essayer de créer ce que nous avons conçu précédemment. Maintenant, dans Webflow, si vous rencontrez des problèmes, je vous fournirai un lien vers le fichier colonial afin que vous puissiez simplement le et l'utiliser dans votre projet déchirer et voir ce que j'ai utilisé, ce que créé si vous vous embrouillez à tout moment. Mais, et c'est un énorme mais je tiens à le mentionner. Essayez toujours de suivre, car comme je l'ai mentionné précédemment dans la section design de ce cours, c'est la meilleure façon d' apprendre si vous utilisez simplement des fichiers finis, si nous il suffit de remplacer les images, y entrer et de les appeler les vôtres. Tu n' apprendras jamais le design. Vous n'aurez jamais appris le développement de cette façon. Et c'est toujours le meilleur moyen et la meilleure approche à suivre. Si vous êtes bloqué quelque part, si vous faites une erreur, veillez à toujours regarder ces leçons à un rythme un peu plus lent. Certains de ces joueurs ont cette option. Si ce n'est pas le cas, vous pouvez l'arrêter, vous pouvez le revenir en arrière, vous pouvez le regarder plusieurs fois. Enfin, si vous n' avez tout simplement pas de réponse, ne vous inquiétez pas, vous pouvez toujours me contacter et je suis toujours là pour vous aider à tirer l'une des leçons de la classe. 195. SECTION 18: Les études jouent un rôle crucial dans votre portefeuille, car vous ne voulez pas vraiment montrer à vos clients l'image finale et le résultat final. Vous voulez leur montrer le processus. C'est ce que l'on appelle l'étude de cas. Quel est le problème que vous avez réellement résolu au cours de ce projet ? Quelle est l'approche que vous avez réellement adoptée pour ce projet ? L'avez-vous commencé par les recherches que vous avez entamées avec les wireframes ? Avez-vous commencé avec le logiciel préféré de votre choix ? Vous avez commencé avec des images ? Quel a été votre processus au cours de ce projet ? Parce que des responsables du recrutement et des experts en design qui recherchent aide en matière de conception et qui embauchent des designers. C'est ce qui les intéresse dans votre processus, pas dans les résultats finaux, car chaque designer, Altair, peut créer un beau design restant fonctionnel. Pourquoi avez-vous réellement pris ces décisions ? Pourquoi avez-vous fait ceci et pas cela ? C'est à cela que servent les études de cas. Ils sont donc extrêmement importants. 196. Qu'est-ce qu'une étude de cas: Une étude de cas n'est rien de plus qu'une longue présentation de votre travail. Votre travail peut être votre travail de conception, ou ce peut être notre produit pour le créer. Et nous aborderons cette partie un peu plus tard dans ce cours. Mais à toutes fins utiles , il ne s'agit que d'une présentation de votre travail. Maintenant, pourquoi ? Formulaire long et quelle est la différence entre le formulaire long et le formulaire abrégé ? Eh bien, c'est court. La présentation est quelque chose que vous voyez tous les jours sur Dribble. Et les sites Web comme Dribble ne sont en fait qu' une capture d' écran d'une partie de votre travail, qui peut être une section d'en-tête de votre site Web, par exemple, ou une maquette de votre application qui est déjà terminé. Eh bien, l' étude de cas est une longue présentation que vous voyez habituellement sur les balises. Il s'agit d'une étude de cas car elle aide vos utilisateurs et les spectateurs de cette étude de cas, étudier votre processus, à étudier vos étapes et à étudier comment vous atteignez ce résultat final, qui est par exemple conception d'un produit ou d'une application design, conception Web ou quelque chose comme ça. Cela ne se limite pas strictement à la conception de l'interface utilisateur et de l'expérience utilisateur. Cela peut également être excellent pour l'image de marque. Il peut être excellent dans la conception de logos, rien que pour sa longueur. Cela va varier en fonction du projet en question. Par exemple, si vous venez de concevoir un logo, il sera un peu plus court car la conception d'un logo ne comporte pas trop d'étapes. Lors de la conception de l'interface utilisateur, si vous concevez, par exemple , un site Web de 20 pages différentes, elles sont toutes réactives et vous devez créer des wireframes papier. Bien entendu, les wireframes de votre logiciel préféré vont varier et vous aurez beaucoup plus d'étapes à suivre que, vont varier et vous aurez beaucoup plus d'étapes à par exemple conception d'un logo. Donc, en gros, il s'agit d'une étude de cas en bref. Et dans les prochaines leçons de ce cours, nous allons explorer ce que vous devriez inclure dans votre étude de cas. Quelles sont les étapes à suivre et quelques excellents exemples de présentation pour vous aider à démarrer vos études de cas. 197. Éléments à inclure: Il existe de nombreux éléments différents que vous pouvez inclure dans vos études de cas. Et au cours des 15 années que j'ai passées dans ce secteur, j'ai découvert que certains éléments fonctionnaient mieux que d'autres parce que certains éléments m'ont vraiment aidée à raconter comment cette conception s'est développée au fil du processus, un processus de création tardif et/ou le processus par lequel vous avez travaillé sur ce projet en particulier et d' autres empêchent vraiment vos spectateurs d' aller droit au but. Parce que le but d' une étude de cas est d'attirer des spectateurs potentiels qui peuvent devenir des clients. J'espère que c'est quelque chose que vous recherchez ou si vous voulez simplement montrer à vos pairs pour qu'ils comprennent votre processus et comment vous êtes parvenu à ces résultats finaux. Dans cette vidéo, nous allons donc discuter certains éléments majeurs à inclure, à mon avis, car je vois ces éléments constamment se répercuter certaines présentations intéressantes que j'ai trouvées en ligne. Voici donc cette petite introduction rapide et quelques éléments majeurs à inclure dans votre étude de cas. Encore une fois, cela va varier en fonction de votre secteur d'activité, en fonction du créneau dans lequel vous vous trouvez. Parce que toutes les industries n'auront pas besoin de ces éléments et que toutes les études de cas n'en auront pas besoin . Si le projet est plus court, par exemple s' il est plus long. Donc, la première chose à faire est d'inclure des textes, décrire ce que fait chaque section et chaque élément. Ne surchargez donc pas vos spectateurs, mais donnez suffisamment d'informations sur le projet. Donc, par exemple, si vous avez conçu un site Web, n'entrez pas trop dans les détails. Par exemple, je me suis réveillé un matin et le client m'a contacté. Personne ne veut entendre ça. Ça va droit au but. Soyez bref, concis, mais soyez précis quant aux éléments que vous essayez de décrire dans votre texte. Faites en sorte que les images racontent l'histoire clé ici. Mais le texte n'est là que pour aider à ancrer l'idée orale, la conception orale, votre présentation orale. Il est donc juste là pour vous aider à tirer parti de vos images. Parlez donc la langue de votre public et ne soyez pas trop technique. Ce que je veux dire par là, c'est est votre public cible ? Votre public cible est-il des designers ? Ensuite, vous pouvez parler en termes tels que j'ai utilisé le redimensionnement réactif dans Adobe XD, et que j'utilise différentes tailles de tableaux d'art, etc. Mais si vous essayez d'attirer clients plutôt que de parler la langue qu'ils comprendront, car ils ne savent probablement pas ce qu' est Adobe XD au départ. Peut-être ne devriez-vous pas en faire une dette en bonne place dans votre projet. Bien entendu, vous devriez le mentionner à quelques reprises tout au long de votre étude de cas. Assurez-vous de vous en tenir à ce que vos clients comprennent. Donc, par exemple, s'il s'agit d'une entreprise de beauté, assurez-vous de parler de produits de beauté, du processus d'obtention de ce design en particulier. Utilisez le langage qu'ils comprendront s'il s' agit du public cible que vous ciblez. Bien entendu, si cela est perçu par les directeurs artistiques, ils connaissent bien sûr Adobe XD et tous ces outils, mais ne soyez pas trop techniques non plus avec les textes que vous essayez de raconter ici. Donc, encore une fois, si vous travaillez dans l'industrie de la beauté, veillez à maintenir cet équilibre. Décrivez donc les outils que vous utilisez et décrivez également le créneau dans lequel vous vous trouvez. Décrivez le processus dans lequel vous vous trouvez et utilisez des jargons techniques propres à ce créneau en particulier, mais n'en faites pas trop et ne compliquez pas trop les choses. Encore une fois, les textes ne sont là que pour aider vos images, raconter une meilleure histoire. Ensuite, nous avons des images. Comme je l'ai mentionné, utilisez des images pour compléter vos textes. Les images doivent être liées à l'histoire que vous racontez. Une imagerie d'actualité qui aide votre reportage, et pas n'importe quelle imagerie. Et si tu peux les prendre toi-même. Ce que je veux dire par là, par exemple si vous travaillez dans le secteur de l'automobile et que vous parlez de voitures, ne vous contentez pas de montrer l'image d'une montagne. Parce que quel est l' intérêt de cette image ? Raconter cette histoire ne sert à rien. Cela n'aide pas à vendre l'idée de ce design en particulier. Alors ne l'utilisez pas. Utilisez des images qui iront bien avec vos présentations et qui auront du sens. Comme je l'ai dit ici, prenez des photos si vous le pouvez. Tout le monde en possède un Vous pouvez donc simplement utiliser votre téléphone et prendre une photo de votre processus en vous montrant en train de travailler sur ce projet, créant par exemple maquettes papier. Ou vous pouvez prendre votre téléphone et le donner à quelqu'un, vous savez, par exemple membre de votre famille ou votre meilleur ami ou quelque chose comme ça. Ou tu peux même le faire toi-même. Si vous ne voulez pas que quelqu'un vous aide, vous pouvez simplement placer votre téléphone derrière vous. Par exemple, prenez une photo, quelque chose comme ça. Donc, par-dessus votre épaule lorsque vous travaillez sur votre ordinateur, par exemple ou de ce côté. Ou si vous regardez l'aperçu de ce design, vous pouvez simplement montrer votre téléphone comme ceci, sous un angle où vous tenez ce téléphone et montrez ce design. Cela vous aidera vraiment à raconter une histoire, car cela montrera à vos clients cibles et à votre public cible que vous vous intéressez vraiment à ce projet. Que vous avez vraiment consacré beaucoup de réflexion et d'efforts à ce projet. Et que vous prêtiez vraiment attention aux détails pour nos réalisateurs, en particulier ceux qui cherchent à engager des designers. Cela va jouer un rôle crucial dans leurs décisions, car ils peuvent immédiatement voir que vous êtes le designer qui prête attention à ces petits détails. Et cela va vraiment porter ses fruits à long terme. Assurez-vous donc de faire attention à de petits détails comme celui-ci. Mais encore une fois, n'en faites pas trop. Ne vous contentez pas de prendre des photos de vous au hasard et de les mettre simplement dans votre étude de cas. Raconter une histoire n'aide pas, mais quelques images ici et là vous aideront vraiment à vendre l'idée de ce design en particulier. Ensuite, nous avons un guide de style et un système de conception. Présentez donc votre guide de style ou système de conception pour montrer que vous êtes organisé et structuré. Encore une fois, pour nos directeurs, c'est extrêmement crucial, mais aussi pour nos clients, car ils peuvent voir tous ces éléments se réunir dans le design final, présenter le plus des éléments importants que vous utilisez, mais n'en abusez pas. Placez les dégradés pour couper votre image en bas si elle est trop longue. C'est particulièrement important pour les très longs projets et les études de cas très longues , car dans vos guides de style , les systèmes InDesign peuvent contenir des centaines d'éléments différents, mais tous les éléments ne sont pas importants. Par exemple, vous pouvez afficher des couleurs, vous avez utilisé des polices, peut-être des boutons, peut-être des forums, des éléments, des éléments plus importants comme ça. Ensuite, introduisez simplement un léger dégradé, qui alimentera simplement ce système de design pendant que vos spectateurs défilent vers le bas. Vous ne les surpassez donc pas, car encore une fois, guide de style et le système de conception ne sont pas le résultat final, ils ne sont qu'un outil qui vous aidera à obtenir le résultat final, ce qui devrait bien sûr être tout en bas de votre guide de style. Mais nous en reparlerons un peu plus tard dans ce cours. Enfin, utilisez les couleurs de votre projet et de votre guide de style dans votre présentation pour que l'image de marque soit parfaite. Ce que je veux dire par là, par exemple si vos couleurs principales sont le bleu et le gris, ne vous contentez pas d'utiliser le rose parce que le rose n'apparaît jamais dans votre design, jamais dans votre processus. Alors pourquoi les mettre dans votre présentation ? Veillez à utiliser les couleurs de votre guide de style et de votre système de conception. Si vous en avez un, si vous n' avez pas de guide de style ou de système de conception, votre projet est trop petit, il est simplement travaillé sur une page de destination. Quoi qu'il en soit, je vous recommande vivement commencer à utiliser des guides de style et des systèmes de conception car ils sont extrêmement importants pour le développement futur de ce produit en particulier. Mais si vous ne les avez pas, veillez à utiliser les couleurs que vous avez dans votre design, dans votre présentation. Parce que de cette façon, l'image de marque sera à la hauteur. Vous seriez étonné de voir combien de fois je vois cela dans les présentations en ligne, surtout lorsque je cherche des designers à embaucher pour m' aider dans mes projets. Donc je vois ça tout le temps. Veillez à ne pas répéter cette erreur car encore une fois, pour nos réalisateurs, cela montre surtout que vous prêtez attention aux petits détails. Ensuite, nous avons des maquettes papier, alors présentez-les dans un exposé du problème. Défi lors des phases conceptuelles de votre étude. Nous parlerons des phases un peu plus tard dans ce cours. Mais en gros, cela signifie que vous devez présenter votre étude de cas par étapes. Donc, le début se fait par ici et la fin par là. Les utilisateurs doivent donc faire défiler l'écran jusqu' au bas pour obtenir ce résultat final, gros une méthode de progression. Les utilisateurs progressent donc au fur et à mesure qu'ils défilent vers le bas et ils commencent par les étapes les plus difficiles de ce projet à des fins d'idéation, peut-être des textes sur des pages blanches et maquettes papier parce que Proposer des cadres, c'est avant tout une question d'idées. Montrez donc des images de création ainsi que des images numérisées avec une imprimante ou votre téléphone. Ce que je veux dire par là, c'est ce que j'ai expliqué précédemment lorsque quelqu'un d'autre vous prend en photo en train de créer ce filaire, vous pouvez le faire vous-même. Vous pouvez simplement utiliser un stylo et du papier et utiliser un formulaire comme celui-ci. Je prends simplement une photo de toi en train de créer ce wireframe. Encore une fois, n'en faites pas trop, mais assurez-vous d'en inclure quelques-unes ici et là, juste pour vous aider à raconter une meilleure histoire et à vendre le concept oral à vos spectateurs. Donnez suffisamment de détails pour compléter l'histoire que vous racontez, mais ne surchargez pas votre public. C'est exactement ce que j'ai dit. Et assurez-vous d'être modéré dans toutes ces sections. Donc, si nous examinons le guide de style et le système de conception, je l'ai mentionné par le dégradé, je veux dire la même chose pour les maquettes en papier, par exemple vous pouvez utiliser une bande d'images qui sera horizontale ou pouvez le mettre sur le côté juste pour afficher ces maquettes papier et pour montrer votre processus. Et bien sûr, vous pouvez faire quelques images ici et là vous montrant comment vous créez ces maquettes en papier. Ensuite, nous aurons un cadre filaire, alors montrez-le dans les concepts et les parties de test de votre étude de cas. Encore une fois, nous y reviendrons un peu plus tard. Et bien sûr, vous pouvez toujours revenir à ces leçons et les étudier un peu plus. Présentez-les sous forme d' image en perspective, en images et en maquettes. Encore une fois, vous pouvez simplement enregistrer votre wireframe depuis Adobe XD sous forme d'image. Vous pouvez le mettre en perspective en 3D, par exemple vous pouvez le montrer en images. Donc, comme je l'ai mentionné, vous pouvez le montrer. Quelqu'un prend une photo de vous, par exemple d'ici, de profil ou filaire sur votre téléphone, par exemple. Donc, de ce point de vue, supposons que vous utilisiez cette image filaire en mode prototype de Adobe XD, par exemple et enfin, dans les maquettes, vous pouvez utiliser la maquette d'un appareil de bureau, d'un ordinateur portable, appareil téléphonique, quoi que vous fassiez, et présenter une maquette de la même manière que votre wireframe. Si vous pouvez créer certains écrans, ils font partie de votre design de manière à pouvoir être cliqués et intégrés à votre présentation. Quel que soit l'outil que vous utilisez, vous pouvez le faire. Mais comme j'utilise XD, est natif dans XD, vous pouvez simplement partager une partie de votre prototype afin de partager un tableau d'art unique, par exemple, puis l'intégrer votre site Web si vous ont cette fonction ou si ce n'est pas le cas, vous pouvez simplement le faire dans des balises. Parce que Begins s'intègre bien Adobe XD car il fait partie de la famille Adobe, It's Adobe Product Beacons l'est. Vous pouvez donc simplement utiliser ce lien depuis votre Adobe XD, puis l'intégrer dans la présentation de vos balises. Ensuite, les gens peuvent cliquer dessus , puis naviguer avec vous. Elle. Assurez-vous qu'il raconte une histoire et qu'il complète votre texte, images, votre papier, vos maquettes et autres éléments. Cela vaut donc pour tout ce que j'ai mentionné précédemment. Ne submergez donc pas vos spectateurs par des dizaines de ces images filaires, car n'oubliez ce n'est pas le résultat final. ne s'agit que d'une partie de votre contribution au résultat final. Conception de l'interface utilisateur terminée. On y va. Assurez-vous donc de le montrer lors des étapes de test et de résultats de votre étude de cas. Ce que je veux dire par là, c' est que vous pouvez le montrer en cours de test à vos utilisateurs. Donc, si vous avez des utilisateurs dans la pièce, par exemple, vous pouvez prendre des photos de personnes utilisant votre design sur le téléphone ou sur ordinateur portable ou de bureau , peu importe. Et vous pouvez le montrer au stade des résultats, qui est généralement la dernière étape de votre étude de cas. Alors, à quoi cela ressemble à la fin, quoi cela ressemble à un produit fini, peut-être que votre application ou votre site Web est déjà lancé. Ensuite, vous pouvez donner un lien pour que les gens puissent le voir. Tout au long de votre étude de cas. Ils apprennent comment vous l'avez créé comment vous résolvez les problèmes en cours de route. Et maintenant, il existe un lien en direct qui permet aux utilisateurs d'y accéder si vous travaillez sur un projet privé. Donc vous n'avez pas l' intention de le coder, vous n'avez pas l'intention de le mettre en ligne, alors tout va bien. Vous pouvez le présenter sous forme de prototypes cliquables, de maquettes 3D et d'images, comme je l'ai mentionné précédemment pour tous ces autres éléments. Et vous pouvez également enregistrer quelques vidéos montrant l'inaction de vos écrans et les joindre à notre étude de cas. Encore une fois, si vous utilisez Adobe XD, vous pouvez simplement enregistrer un prototype et télécharger cette vidéo pour une présentation en canettes ou sur votre site Web. Vous pouvez donc simplement intégrer cette vidéo à l'intérieur et les utilisateurs peuvent cliquer dessus pour leur montrer , par exemple, votre structure de navigation ou votre navigation entre deux ou trois écrans ou quelque chose comme ça. C'est le résultat final de votre travail. Assurez-vous donc que le design de votre interface utilisateur se démarque de votre présentation. C'est l'argument de vente. C'est le point final de votre étude de cas. Ainsi, les utilisateurs font défiler la bas pour voir la conception finale de votre interface utilisateur, pour voir le produit fini. Assurez-vous donc qu'il se démarque davantage que les autres parties de votre étude de cas. Parce qu'une fois de plus, c'est cette partie qui vous fait vraiment connaître en tant que designer et reflète véritablement l'étude de cas et votre processus en tant que designer. Veillez donc à le faire ressortir. Enfin, nous avons d'autres éléments à prendre en compte. Ainsi, selon le créneau, vous êtes indépendant du projet sur lequel vous travaillez. Ces éléments peuvent fonctionner et ne pas fonctionner. Veillez donc à faire attention au style oral de votre produit, du créneau général dans lequel se trouve votre client. Maquettes 2D et 3D en différentes étapes. Alors, qu'est-ce que la 2D ? Qu'est-ce que la 3D ? De toute évidence, la 2D, c'est ceci, et cela. La 3D est ceci et cela , par exemple , vous pouvez utiliser n'importe quel angle différent de vos maquettes et de vos conceptions. Adobe XD possède ces fonctionnalités 3D qui vous permettent d'utiliser votre tableau d'art et de le créer en 3D. Et vous pouvez enregistrer l'image au format PNG comme celui-ci, puis la télécharger votre présentation si vous souhaitez avoir des prototypes cliquables. J'ai donc mentionné que si vous travaillez dans XD, il vous suffit d'intégrer le prototype Think Video. Donc, encore une fois, vous pouvez le faire en enregistrant votre écran tenant un téléphone ou derrière l'ordinateur portable. Donc, le style Walk-through est ce que j'ai mentionné. Vous pouvez simplement appuyer sur Enregistrer dans XD si vous l'utilisez. Et ces autres styles sont les suivants, par exemple quelqu'un d'autre peut prendre son téléphone et placer simplement ainsi au-dessus de votre épaule, par exemple , vous utilisez votre design sur votre appareil pour pouvoir démarrer prototype cliquable à la fin du projet, puis vous pouvez simplement l'utiliser sur votre téléphone et quelqu'un d'autre pourra vous enregistrer. Et bien sûr, vous pouvez faire de même sur votre ordinateur portable ou de bureau. Éléments de fond. Voici donc ce qu'il est dit, BG Elements juste pour être un peu plus court, vous aider à définir vos intérêts visuels et pour vous guider dans votre étude de cas. Bien entendu, cela dépendra de votre projet. Donc, si vous avez des feuilles, par exemple si vous travaillez dans un environnement et une entreprise basés sur la nature, vous pouvez utiliser des feuilles comme éléments de fond. Vous pouvez utiliser des fleurs, vous pouvez utiliser différents éléments graphiques et éléments géométriques, par exemple cercles, des carrés et des triangles, et certains éléments graphiques différents, par exemple des diamants . Enfin, vous pouvez utiliser des icônes pour bien correspondre à tous ces éléments d'arrière-plan. Encore une fois, n'en faites pas trop. Ils aident simplement à maintenir l' intérêt de ce public et à faire défiler un peu plus loin. Des dégradés et des flous s'ils correspondent au style du projet, mais n'en faites pas trop, car je vois souvent des dégradés tout au long de l'étude de cas et cela vous fait vraiment mal aux yeux. Cela vous ennuie vraiment au bout d'un moment et n'oubliez pas beaucoup de personnes sont malvoyantes. Il va donc être très difficile pour eux de voir ces dégradés. Et en gros, pour distinguer vos dégradés de votre design, surtout s'ils sont daltoniens, etc. Assurez-vous donc d'utiliser des dégradés et des flous à quelques endroits, juste pour pimenter un peu votre design. Nous avons des autocollants et des emojis. Bien entendu, l'utilisation dépend du projet nutritif. Supposons que vous travailliez sur un projet pour une banque. De toute évidence, vous n'allez pas inclure d'autocollants ou d'emojis. Ou peut-être que la banque s'adresse à un public plus jeune et c'est ce qu'elle essaie de cibler. Alors peut-être que dans ces cas, les autocollants et les emojis pourraient avoir du sens. Utilisez donc simplement votre bon sens ce que vous essayez de créer. Ce ne sont donc là que quelques-uns des éléments que j'aime utiliser dans mes études de cas au fil des ans. Et ce sont là les éléments que j'ai découvert que certaines grandes entreprises et designers que certaines grandes entreprises et designers utilisent tout leur temps pour compléter leur présentation de design et raconter une meilleure histoire. Vous pouvez utiliser certains d'entre eux. Vous pouvez tous les utiliser, mais peu importe ce que vous utilisez, assurez-vous que cela vous aide à raconter une histoire et assurer qu'il correspond à votre marque et à votre créneau. Parce que sinon, il s'agit simplement de coller des éléments et de les rendre plus difficiles à comprendre pour les gens. Et bien sûr, si vous essayez de trouver un emploi en utilisant votre étude de cas, cela va simplement éloigner les directeurs artistiques et les responsables des ressources humaines parce qu'ils voient des centaines de designers sur au quotidien et ils peuvent vraiment savoir qui est bon qui ne l'est pas à propos de ces petits changements. Assurez-vous donc de faire attention à ceux-ci. 198. Créer une structure d'étude de cas: Dans la dernière vidéo, nous avons parlé des éléments que vous devriez inclure dans votre étude de cas, mais comment les structurez-vous pour faciliter la compréhension et la consommation ? C'est le sujet de cette vidéo. Nous avons donc créé une structure pour votre étude de cas. Organisez vos études de cas de manière à ce qu' elles soient plus faciles à lire et à comprendre , car il ne sert à rien de simplement mettre ces éléments sur une page. Ils doivent vraiment avoir une structure cohérente qui ait du sens et montre à vos spectateurs que vous prêtez vraiment attention à cette étude de cas et à votre travail de conception dans son ensemble. Donc, selon mon expérience et à mon avis, le projet, l'intro et le brief devraient vraiment passer en premier. Et en haut de la page, peut-être dans votre présentation, vous devriez avoir quelque chose comme une image de couverture, présentant peut-être le résultat final, le résultat de votre projet et de cette étude de cas. S'il existe une application mobile, vous devriez peut-être placer une jolie maquette 3D avec un titre à côté, juste pour montrer et raconter de quoi il s'agit réellement. Et peut-être une phrase sur ce que fait réellement l'application ou le site Web. dessous de cela, à mon avis, et selon mon expérience, les problèmes se répercutent directement sur la conception. Bref. Décrivez en quoi consiste le projet, mais soyez bref et concis. Ne donnez pas trop de détails au cas où vous seriez sous contrat de confidentialité. Donc, par exemple, ce que je veux dire par là c'est que si vous travaillez pour un constructeur automobile, ne vous contentez pas de dire que le constructeur automobile a été fondé en 1954, par exemple, et décrivez à votre façon les détails de l'histoire de la fondation. Tout le monde s'en fout. Vous pouvez mentionner ce détail. Par exemple, les entreprises fondées en 1954, supposons qu'elles comptent 20 000 employés. Alors tu vois ce que je veux dire ? Soyez bref et concis et poursuivez l'histoire, car personne n'a le temps de tout lire à ce sujet Il peut simplement aller sur le site Web en question sur lequel vous avez travaillé, par exemple lire tout ce qui concerne son histoire ou s'il s'agit d'une entreprise connue, ils peuvent simplement consulter Wikipedia s'ils souhaitent vraiment savoir plus sur l'entreprise elle-même. Votre projet ne concerne pas l'entreprise elle-même. Il s'agit des produits qu'ils vendent, d'un service qu'ils proposent ou des bonnes actions qu'ils accomplissent s'ils sont à but non lucratif ou quelque chose comme ça. Donc, encore une fois, assurez-vous d'être bref dans votre conception. Bref, il suffit de donner l'essentiel pour que votre public soit informé et de vous raconter une histoire à travers votre étude de cas. Ce que je veux dire par là est ce que j'ai mentionné dans la vidéo précédente. complimente vos textes avec vos images et ce que j'entends par accords de confidentialité, ne mentionnez pas les informations personnelles des employés. Par exemple, John est le réalisateur ici habite dans ces trois-là, c'est son numéro de téléphone. De toute évidence, c'est stupide. Ne fais pas ça aussi. Ne mentionnez pas leurs informations personnelles. Ainsi, par exemple vous pouvez mentionner les fondateurs s'ils sont d'accord avec vous, et ils le feront généralement parce que c'est une bonne relation publique, mais ne mentionnez pas les autres employés s'ils n'en sont pas satisfaits. Ne mentionnez jamais leurs informations personnelles telles que leurs numéros de téléphone , adresses e-mail, pages Facebook , pages LinkedIn, ne le faites pas. Est-ce que ces personnes veulent le faire ? Ils le feront sur leur propre site Web, mais ne commettez pas la même erreur que tant de designers, ce que j'ai vu dans votre étude de cas. De plus, ne mentionnez pas les bénéfices s'ils ne le font pas Je le veux. Parce que cela va vraiment montrer à leurs concurrents comment ils s'en sortent et cela va vraiment nuire à leur avantage dans ce cas. Donc, par exemple, vous pouvez dire qu'ils ont augmenté de 20 % au cours du dernier trimestre, mais ne le faites pas. Par exemple, ils gagnent 20 000 dollars de plus le trimestre dernier qu'ils ne le faisaient auparavant, car cela révélera vraiment à leurs concurrents ces informations sensibles. Alors fais juste attention à ce genre de choses. Encore une fois, soyez concis et allez droit au but. Ensuite, nous sommes là. Problème que tu as vendu. Quel est le principal problème que vous avez rencontré dans le ce projet et comment l' avez-vous résolu ? La conception du site Web n'est pas le principal problème. C'est un problème, c'est un travail que vous avez accepté et conçu que vous avez créé. Vous avez donc créé ce design de site Web, mais quel est le problème avec ce design de site Web ? Donc, par exemple, s'ils ont notre gamme de produits, par exemple et que les conversions ne sont pas tout cela. Eh bien. C'est le problème que vous essayez de résoudre. Par exemple, si l'image du produit n'est pas trop grande et les acheteurs potentiels ne comprennent pas en quoi consiste le produit. Vous augmentez peut-être la taille de cette image. Il a positionné les boutons ici et là , puis a augmenté de 20 % la conversion à long terme, par exemple au cours des six prochains mois. est donc le problème que vous résolvez. Cela devrait être le point clé que vous mentionnez dans votre étude de cas, car une fois de plus, cela montre à vos futurs employeurs que vous vous occupez vraiment de petites choses comme celle-ci, ce qui va en fait devenir un gros problème s'il n'est pas résolu à temps. Ne dites pas comment créer une application, mais quel problème vous avez rencontré et comment votre application l'a résolu. C'est exactement ce que j'ai mentionné. Donc, par exemple, si disons, restons-en à la page du produit. S'il ne fonctionne pas bien, il ne répond pas. Disons que sur ordinateur de bureau, mobile, désolé, sur ordinateur de bureau, ordinateur portable et doublets, disons « Acheter maintenant  », le bouton fonctionne très bien, mais sur mobile, il se perd. Peut-être que vous augmenterez la conversion de, disons, dix pour cent au cours des trois prochains mois en faisant simplement en sorte que ce bouton reste collé et en le faisant, c'est ainsi, puis il commence à crawler quand les utilisateurs commencent à défiler au-delà d'un certain point. C'est donc le problème que vous résolvez et vous augmentez la conversion de dix pour cent. Ce n'est qu'un exemple parmi d'autres. Bien entendu, chaque projet comportera des problèmes différents et vous devrez les résoudre en tant que concepteur. Ce n'est que l'un d'entre eux. Ensuite, nous avons des défis auxquels vous avez été confrontés. Y a-t-il eu un défi particulier auquel vous avez été confronté lors de la création de votre design ? Les défis peuvent être des délais courts, des problèmes d'utilisateurs, le développement de nouvelles idées, de longs tests, une mise en œuvre, etc. Soyez concis et laissez votre étude de cas raconter une histoire, mais donnez suffisamment de contexte pour que les spectateurs puissent comprendre de quoi vous parlez sans donner trop de détails. Supposons donc qu'une fois que vous avez créé les concepts initiaux, les utilisateurs ont naviguer dans l'application. Donc, par exemple, le défi que vous avez dû relever est de simplifier la navigation. Vous avez ainsi permis aux utilisateurs de mieux comprendre et d' atteindre plus rapidement leur destination. n'est donc qu'un des défis, par exemple développement de nouvelles idées dans ce cas, disons que l'on crée rarement concepts originaux et que les utilisateurs l'apprécient. Mais les fondateurs, par exemple, eu cette nouvelle idée et ils pensent vraiment en avoir besoin pour le moment. Vous devez donc le développer très rapidement et l'introduire dans le design existant et les concepts existants que vos utilisateurs ont déjà appréciés. Ce n'est donc qu'un exemple parmi des millions d'autres. Assurez-vous donc de mentionner «  Défiez votre visage », mais encore une fois, soyez concis. Ne leur parlez pas à vos spectateurs dans cette partie de votre étude de cas. Ensuite, nous avons les concepts que vous avez créés. Les concepts ne sont donc pas des produits finis, mais des idées et des versions de votre design. Les concepts peuvent être des maquettes en papier. Il peut s'agir de wireframes. Encore une fois, ce que j'ai mentionné dans la vidéo précédente, vous pouvez les montrer sur votre téléphone si vous les utilisez, vous pouvez montrer à vos utilisateurs ce que j'ai également mentionné dans la vidéo précédente. Il peut s'agir de maquettes papier, de maquettes filaires, de concepts d'interface utilisateur, mais aussi de concepts effrayants, ainsi que tests d' interface utilisateur et de tests utilisateurs. Ce sont donc tous les éléments que vous pouvez inclure dans les concepts que vous avez créés et vous pouvez répartir ces concepts dans votre étude de cas. Ce que j'ai mentionné dans une vidéo précédente et ce que nous allons aborder dans les prochaines vidéos sur la structure globale. Montrez-leur d'une manière intéressante, mais ne le faites pas. C'est à cela que sert le chapitre sur les résultats. Encore une fois, les concepts ne sont pas des produits finis. Ce ne sont que des idées que vous avez mises en place. Par exemple, le papier wireframe n'est pas le produit fini, mais le résultat l'est. Encore une fois, veillez à ne pas abuser avec les concepts et à mettre en évidence le résultat à la fin, car c'est le résultat qui compte en fin de compte et ce que toutes ces semaines et ces mois de conception, test et de travail sur ce projet vous ont mené à l'aboutissement de ce projet. Assurez-vous donc de le mettre en évidence. À la fin de votre étude de cas, nous organisons des tests auprès des utilisateurs, afin que vos utilisateurs puissent les tester et vous donner des informations sur ce que vous avez découvert façon dont ils gèrent votre concept. Quelle réponse t'ont-ils donnée ? Comment s'est réparti votre groupe de test d'utilisateurs ? Quel âge avaient-ils ? Quelle est leur profession et ainsi de suite. Montrez des images de vos concepts. Le concept est testé à côté du texte pour donner une meilleure perspective à vos spectateurs. Ce que je veux dire par là, c'est par exemple que vous pouvez créer toutes sortes de graphismes différents. Ainsi, par exemple, vous pouvez montrer des graphiques entre les utilisatrices et les utilisateurs masculins, nombre d'heures qu'elles passent à tester. Vous avez trouvé que la première option était meilleure que la deuxième, par exemple, et vous pouvez afficher tous ces éléments à côté de votre texte sous forme d'images, de graphiques et de graphiques, et dans la forme d'icônes. Vous pouvez donc combiner tous ces éléments pour vraiment raconter une histoire sur les tests utilisateurs et Ababa sur la façon dont vous résolvez tous ces problèmes en faisant appel à vos utilisateurs, qui vous ont aidés à tester vos concepts pour arriver au résultat et à l'idée finale. Si vous n'avez jamais fait de tests utilisateurs, je vous recommande vivement commencer à le faire pour commencer à l'apprendre, car cela vous aidera vraiment à améliorer les résultats de votre éventuelle solution pour le site Web AP où que vous soyez. Mais les tests sur les utilisateurs ne sont que cela. Il s'agit simplement de tester lorsque l' application ou le site Web est en ligne. C'est à ce moment-là que les vrais utilisateurs vont entrer en jeu. Ces tests vous aident donc vraiment à comprendre, avant de vous lancer comment vos utilisateurs vont interagir avec votre design. Nous avons conçu un résultat, n'est-ce pas ? À propos du temps que cela a pris, nombre d'heures que vous passez aux itérations que vous avez effectuées, etc. C'est là que vous avez besoin de texte, du moins parce que le design se chargera de tout, mais il inclura certaines informations et étapes importantes de votre projet. Ce que je veux dire par là, c'est par exemple projet m'a pris six mois à terminer. Au cours de ces six mois, nous avons effectué par exemple 20 tests utilisateurs différents , 40 wireframes différents. Nous avons 100 maquettes papier différentes. J'ai bu, je ne sais pas, 200 tasses de café et des trucs comme ça. Veillez donc à inclure tous ces détails, car ils vous aideront à vendre l'histoire à vos futurs employeurs et aux futurs utilisateurs. Vous pouvez inclure les heures de test, nombre de tests effectués, comme je l'ai dit, pour aboutir à cette conception, ainsi que quelques réflexions finales et vos coéquipiers vous aideront ce projet s'il y a étaient quelconques. Donc, si des membres de votre équipe ont travaillé avec vous sur ce projet en particulier, assurez-vous de les mentionner. S'ils ne veulent pas montrer leurs images. Une fois de plus, nous revenons à cette NDA et à toute cette histoire de confidentialité. Ensuite, mentionnez simplement leurs noms et vous pourrez toujours laisser le profil de leurs balises. Tu peux quitter les profils dribble, LinkedIn, etc. Et si vous êtes l' élément clé de cette équipe, par exemple si vous êtes le fondateur d'une équipe, si vous êtes le PDG de votre propre entreprise, par exemple, assurez-vous de vous montrer plus visible que toutes ces autres personnes parce que les personnes qui vous embauchent en tant qu'agence, par exemple , voudront savoir qui est le principal homme ou la principale fille de cette entreprise. Ils vont donc vouloir voir qui est à l'origine de cette opération. Et si vous vous placez un peu au-dessus de ces gens, pas comme ici, je suis comme ça et ces gens ne sont pas comme ça. Non. Mais si ces personnes sont comme ça, assurez-vous de vous comporter comme ça ou simplement de vous positionner au-dessus d'elles juste pour le montrer à vos futurs employés. Oui, je suis la personne qui anime cette émission et vous devez me contacter pour, par exemple parler de votre futur projet. C'est donc juste ma structure. C'est la structure que j'ai trouvée qui a fonctionné au fil des ans, pas seulement pour moi, mais aussi pour de nombreuses personnes de l'industrie, en particulier les grandes marques et les grands designers. Encore une fois, tous les éléments de cette structure ne fonctionneront pas tout le temps sur chaque projet. Mais la majorité de ces éléments vont très bien fonctionner. Assurez-vous donc de les explorer et de les utiliser à bon escient. Parce qu'une fois de plus, ils sont là pour vous aider à raconter une histoire et simplement pour vous aider à vous opinion orale sur votre projet, votre flux de travail et sur vous-même en tant que designer à New Étude de cas sur York, lorsque tous vos éléments sont structurés de manière à ce que les utilisateurs puissent facilement les suivre. 199. Exemples d'études de cas: Dans cette vidéo, je vais vous montrer quelques exemples géniaux de week-ends que vous pouvez trouver en ligne. Il existe des milliers d'exemples différents le week-end, notamment pour que vous puissiez les parcourir et consulter d' autres sites Web. Vous pouvez consulter les sites Web personnels des créateurs que vous admirez pour consulter leurs études de cas et comprendre comment ils s' y prennent. Et assurez-vous de comprendre qu' aucune étude de cas n' est identique aux autres études de cas. Même pas par le même designer, car chaque étude de cas raconte une histoire différente. Il raconte différentes parties de ce projet final et montre vraiment un design différent. Voici donc quelques-unes des plus récentes que j'ai trouvées. Mais bien sûr, vous pouvez sauter ici et effectuer une recherche, par exemple , sur l' interface utilisateur, dans une étude de cas sur l'expérience utilisateur, et obtiendrez des milliers d'études de cas différentes. Et bien sûr, vous pouvez les parcourir et voir comment ils ont été créés. Nous avons donc ici ce concept d'application d'autopartage, et c'est ce que j'ai mentionné dans la vidéo précédente. Assurez-vous d'inclure une sorte d'image de couverture afin que vos utilisateurs puissent bien comprendre. Et bien sûr, vous pouvez passer à l'avenir dans UI UX, et ensuite vous verrez le meilleur travail sur Behance , enseigné par l'équipe du week-end. Encore une fois, dans le concept de l'application de partage des coûts, vous pouvez voir que vous nous devez du temps papier pour 2021 et qui l'a conçu et quelqu'un. Nous commençons donc l'image d'une voiture et je ne vais pas entrer dans trop de détails sur tout cela car cette vidéo va durer 3 heures. Je vais juste passer de l'un à l' autre, mais assurez-vous de faire attention à tous ces éléments que nous avons mentionnés précédemment dans ce cours. Le projet. Quel était l'objectif du projet ? Flux d'utilisateurs ? Alors, comment les utilisateurs navigueront dans votre application, les couleurs et les polices. Ils n'ont donc pas le système de conception que j'ai mentionné. Ils ont ces couleurs et ces polices, ce qui est très bien également. Vous montrez simplement à vos employés potentiels comment vous l'avez créé. Nous avons des prototypes, des écrans, donc ils ont été intégrés directement dans les maquettes de l'appareil. Ce que nous avons ici est une sorte de vidéo. Nous avons donc un écran de chargement. C'est ce que j'ai mentionné. Nous avons un écran de connexion, donc la navigation complète ici. Et vous pouvez voir tout de suite que cela ressemble vraiment à un wireframe. Et je pense que c'est leur produit fini, mais vous pouvez bien sûr également le faire par étapes filaires. Et nous avons le produit fini ici, comme vous le voyez. C'était donc le wireframe après tout. Nous avons donc le produit fini et nous avons ces maquettes par rapport à ce que j'ai mentionné, nous avons ces maquettes en mode sombre et nous avons des chars à la fin. Vous pouvez donc lier votre Instagram Dribble sur Telegram ou ce que vous voulez ici, votre propre site Web personnel. Et bien sûr, appréciez ces designers une fois que vous aurez fait défiler la page vers le bas. Et c'est ce que j'ai mentionné à propos de vous, vos coéquipiers ou de tout ce que vous souhaitez inclure à la fin. Vous pouvez donc le faire en votre nom, bien sûr également sur votre propre site Web. Nous avons une fourchette, donc développement d'une application alimentaire saine. Et je peux relier tout cela dans le PDF et, en fait, dans notre testament. Vous pouvez donc consulter le PDF joint à ce cours, et vous pouvez simplement cliquer sur ces liens pour accéder à ces présentations sans avoir à les parcourir. Vous pouvez le constater par vous-même tout de suite , puis vous pouvez simplement accéder aux profils de ces créateurs. Et bien sûr, vous pouvez voir qu'ils en ont beaucoup plus sur chacun de leurs profils. Donc, juste le raccourci qu'il vous faut. Nous avons donc une fois ces maquettes en perspective, quoi consiste le projet, quels en sont les objectifs ? Ainsi, vous pouvez voir l'étendue du travail. Qu'a fait exactement ce designer ? Vous recherchez la solution optimale ? Ils avaient donc fait des recherches à la concurrence. Nous avons donc notre flux ici. Donc, de l'idée à la création d' hypothèses, en passant par le prototypage de la recherche. Aucune de ces étapes n'est donc ce qui compte pour vous en tant que designer, car ces étapes vont changer d'un projet à l'autre. Donc, parfois vous allez avoir une création d'hypothèses, parfois non. Parfois, vous devrez faire des recherches. D'autres fois, les clients ont effectué des recherches pour vous, prototypage et une fois de plus des recherches sur le système de conception. ne sont donc pas tous ce que vous devez inclure. Encore une fois, ils vont varier d'un projet à l'autre pour prototypage de projet pour la vérification des hypothèses. Nous l'avons donc ici. Nous avons des maquettes 3D ici. Donc juste un peu épicé ici et là. Ce que j'ai mentionné précédemment ne submerge pas vos spectateurs. Nous avons le produit fini ici avec tous ces éléments de fond, des images d'arrière-plan. Vous pouvez donc voir l'éclaboussure de lait et toutes ces plantes juste au premier plan, nous pouvons voir une personne tenant la maquette. Donc, tous ces éléments mentionnés, que j'ai mentionnés précédemment dans les leçons précédentes. Nous avons ces maquettes 3D et tous ces éléments sautent à l'extérieur pour montrer qu'il y a d'autres éléments sur ces pages. Nous avons des images qui correspondent bien au texte. Vous pouvez donc voir les statistiques et profil, un entonnoir de vente supplémentaire. Vous pouvez donc voir tous ces détails. Remise en argent jusqu'à 20 %. Tous ces petits détails aident donc à vendre une histoire aux spectateurs potentiels. Encore une fois, cliquez sur Appréciation car nous l'apprécions vraiment. Nous avons un studio, page de prêt pour la conception Web et le développement Web. Et vous pouvez voir ces deux designers. C'est donc ce que j'ai mentionné. Si vous gérez un studio, vous pouvez avoir plusieurs propriétaires. Sur votre page de balises. Le site Web a été construit en utilisant tilda et en modifiant le code, analysant les concurrents, et nous pouvons voir cette belle structure. Donc, introduction, avantages, services au travail, travail en cours. À propos de nous Donc, tout cela, nous avons la typographie ici. Je vais faire défiler la page un peu plus vite car vous pouvez voir la longueur de ce site Web. Nous avons cette superbe animation. Et je dirais qu'à propos de ces maquettes, c'est vraiment une bonne idée parce que ce n'est pas le cas. L'âge n'est qu'un écran de base. Il ne montre pas de partie spécifique. Et c'est ce que je vois tout le temps. Les concepteurs utilisent des iPhones, qui datent de plusieurs générations. Je l'ai fait également pour mes produits. Et vous allez le voir dans une prochaine vidéo. Mais assurez-vous que si vous utilisez ces maquettes pour utiliser des maquettes sans visage, en gros, vous ne pouvez pas dire de quel appareil il s'agit, quelle taille il s'agit. Et il restera toujours sur la bonne voie. Et en gros, parce que cela ne montrera pas les éléments d' un certain appareil. Si nous faisons défiler la page vers le bas, vous pouvez voir d'autres exemples. Vous pouvez voir à quoi cela ressemble sur un téléphone et sur un ordinateur de bureau. Versions anglaise et russe, on peut voir la grille ici, qui est bien sûr une animation de défilement importante, ce qui est fantastique. Vous pouvez également voir ces éléments sortir des tablettes initiales affichant la page. Et merci d'avoir regardé. Vous avez donc ici votre appréciation. Nous avons des sites Web de concessionnaires automobiles, qui seront présentés à l'avenir dans XD et à l'avenir dans UI UX. Donc, encore une fois, assurez-vous de vérifier cela et vous pourrez voir plusieurs propriétaires. Nous avons donc quatre personnes ici. Donc, les sites Web des concessionnaires automobiles pour Mercedes Benz, Ukraine sont résumés. Ils ont donc voulu créer un nouveau site Web plus efficace pour remplacer les anciens. C'est donc un excellent brief et montre le problème oral qu'ils ont. Le site Web précédent était basé sur le modèle officiel de Benz, ce qui entraînait une faible facilité d'utilisation en taux de conversion et un manque de fonctionnalités nécessaires. C'est donc le problème que vous résolvez immédiatement au sommet. C'est pourquoi j'ai dit de ne pas perdre trop de temps, d'aller droit au but. Pourquoi redessiner l'ancien site Web ? C'est donc le problème qu'ils ont résolu les objectifs du projet. Vous pouvez donc continuer. Encore une fois, je vais laisser les liens dans le PDF afin que vous puissiez lire tous ces détails. Nous pouvons voir de belles images vivre ce que c'est que d'être assis au volant. Voici donc les problèmes qu'ils ont résolus. Alors, quand souhaitez-vous planifier un essai routier, par exemple simplement à pied ou en voiture , il est facile de le réserver sur votre téléphone. Encore une fois, des images pour compléter ce dont vous parlez. Configuration facile de l'essai routier. Vous pouvez donc voir qu'ils font du marketing auprès des plus jeunes dans ce cas. La recherche filtre donc la manière dont ils résolvent ce problème. Et nous pouvons faire défiler la page un peu plus vers le bas. Paiements automatiques, API uniquement, prêt directement aux clients. Vous pouvez voir cette belle animation de tous ces différents écrans, du catalogue PDF à la boutique en ligne. C'est également le problème, car la majorité d'entre eux, en particulier les constructeurs automobiles traditionnels , envoient donc vos catalogues PDF et vous devez cliquer sur les liens contenus dans Des bouilloires PDF pour accéder à la boutique en ligne, ce qui est ridicule de nos jours, il suffit de lancer une boutique en ligne. Mais vous seriez étonné de voir combien de ces anciennes entreprises le font toujours. Caractéristiques et fonctions de contrôle complètes. Vous pouvez voir la grille tout de suite. Détails tels que les marges, les gouttières, les colonnes, etc., les polices et les couleurs. Nous avons cette belle présentation ici, qui porte sur la marque, ai mentionné précédemment. Vous ne voyez pas de couleur jaune ici, par exemple parce que le jaune n'apparaît nulle part dans les polices et les couleurs d'origine, par exemple alors ne l'utilisez pas également ici. J'apprécie. Enfin, nous avons ce Mother Care, figure dans une interface utilisateur utilisateur. Donc le plus grand intégrateur de solutions numériques de Moscou. Nous pouvons donc voir ici les couleurs. Ils ont utilisé. C'est un détaillant britannique spécialisé dans les produits de maternité en général pour les enfants de moins de huit ans. C'est ça Vous n' avez pas besoin d'entrer dans trop de détails sur ce qu'ils font. Si les gens veulent vraiment en savoir plus sur ce qu'ils font, ils peuvent également cliquer sur le lien et accéder à l'entreprise. Nous avons donc une boutique en ligne, quoi elle ressemble sur l'ensemble du marché mondial Il y a maintenant plus de 100 magasins sur le territoire, ce qui est formidable. App et moi aimons beaucoup ces petits extraits de textes. conception de l'application est réalisée dans un style léger et moderne, ce qui se voit vraiment, cela se voit immédiatement aux chefs de projet et aux directeurs artistiques. Mais quelqu'un qui cherche, qui se trouve probablement dans ce créneau, ne saura pas ce qu'est le style moderne Enlight. Ils aiment juste le belvédère, mais ils ne savent pas de quel style il s'agit. Et cela les aide vraiment. S'ils vous contactent pour un projet comme celui-ci, ils peuvent faire référence à ces textes. Par exemple, je veux vraiment que tu crées cette application pour moi dans un style léger et moderne, comme tu l' as fait pour cette marque. Il est donc très utile de raconter une histoire à vos utilisateurs et de faciliter la conversation plus tard. Nous avons donc des icônes ici. Peut-être que quelqu'un ne saura pas que ce ne sont pas des illustrations. Ce sont des icônes en 3D. C'est vraiment facile à lire et à comprendre. Nous avons un deuxième écran Web, beaucoup d'air et une structure de page claire. Encore une fois, le texte aide à vendre une histoire et ces éléments de fond, comme cette couleur ici et ces chiffres ici, aident également à raconter une histoire. J'ai beaucoup aimé ces textes, ces bribes. Je pense qu'ils font vraiment du bon travail. Version donc sombre avec fond sombre, avec les maquettes sombres à l'intérieur, vous pouvez voir l'espacement, quel point elle fonctionne bien. Je pense donc que c' est quelque chose comme 300 pixels ou quelque chose comme ça, peut-être même un peu plus dans l'espacement. Et vous pouvez constater un espacement constant entre tous ces détails d'arrière-plan. Prêter attention aux couleurs. Les couleurs qu'ils utilisent sont présentes tout au long de la présentation. y a vraiment pas de couleurs étrangères. Vous pouvez le voir sortir de la maquette. Encore une fois, cela fait vraiment un compliment, eh bien, de quoi vous parlez. J'aime beaucoup ces couleurs. J'aime beaucoup la façon dont ils racontent une histoire et la façon dont les écrans sont connectés. Peut-être que nous partons d'ici, puis nous allons entendre, puis nous allons entendre à partir de là, nous allons entendre. J'aime donc beaucoup cette équipe de projet de style walkthrough. C'est ce que j'ai mentionné. Vous pouvez donc vous placer en tant que chef de projet ici au sommet. Donc responsable de l'UX. Ensuite, vous pouvez lister tous vos coéquipiers en dessous de vous. Si vous l'êtes encore une fois, la caractéristique clé et le membre clé de cette équipe sont là pour l'apprécier. Et vous pouvez voir le plus grand intégrateur de solutions numériques de Moscou, ce qui est idéal pour notre slogan, pour votre entreprise. Encore une fois, ce ne sont là que quelques-uns de mes exemples que j'ai découverts récemment. Mais comme je l'ai mentionné, il existe des millions d' exemples différents le week-end. Encore une fois, j' aime particulièrement les balises pour les études de cas, car vous aident vraiment à comprendre tous les elles vous aident vraiment à comprendre tous les détails que nous avons mentionnés tout au long de ce cours. Et j'espère que vous avez vu dans ces exemples qu'une fois de plus, les exemples présentés ici seront liés dans le PDF. Vous pouvez simplement cliquer sur ces liens dans un PDF et y accéder facilement et parcourir à nouveau avec moi cette vidéo sur ce que nous avons mentionné dans ce cours pour vraiment vous aider comprenez tous ces éléments que vous devez inclure. Encore une fois, assurez-vous de bien comprendre. Une fois de plus, une vaste étude de cas est différente. Chaque projet est différent, donc pas tous les projets, et j'espère que vous l'avez vu dans cette vidéo, sont tous des études de cas, mais ce sont tous des théories complètement différentes, des éléments différents, il y a un espacement différent. Ils utilisent des rythmes différents, des couleurs, des polices, une iconographie et d'autres choses de ce genre. Donc, encore une fois, ils utilisent tous la même structure des éléments que j'ai mentionnés, mais ils ne suivent pas tous exactement la même structure. Ils s'y prennent de différentes manières, mais ils aident à raconter une histoire , l' objectif final étant aider vos utilisateurs et vos spectateurs à comprendre quel a été votre rôle dans cette histoire projet et quelles sont les mesures que vous avez prises pour obtenir le résultat final. 200. Rédaction de contenu: Lorsque vous rédigez le texte à inclure dans vos études de cas, veillez à l'écrire dans une langue que vos utilisateurs comprendront. Encore une fois, nous revenons à ce que j'ai dit au début de ce cours. N'utilisez pas un langage trop compliqué, qui ne parle pas à votre public cible. Assurez-vous de parler avec eux comme avec un ami. Si c'est le ton que tu veux adopter. Si c'est un ton plus corporatif et plus sérieux, c'est très bien. Mais s'il s'agit de vos utilisateurs, si vos utilisateurs veulent comprendre ce que vous dites dans un langage très simple, que ce soit vraiment occasionnel peu importe que ce soit vraiment occasionnel ou professionnel . Ce qui compte au final, c'est qu'ils comprennent ce que vous essayez de leur dire. Donc, si je vous ramène très rapidement à cet exemple que j'ai mentionné dans la vidéo précédente. Vous pouvez donc voir ce texte. Mettez donc en place des recommandations personnalisées pour proposer les meilleures offres de produits. Comme vous pouvez le constater, ils ne le mentionnent pas ici. Par exemple, j' ai utilisé XD pour créer deux piles afin de m'assurer que le bouton droit est plus grand et d' entrer dans trop de détails compliqués et inutiles. Ce qu'ils ont dit, c'est mettre en place recommandations personnelles pour proposer les meilleures offres de produits. Ainsi, lorsque vous créez votre texte, veillez à faire attention aux détails, tels que ces mélanges, afin d'être bref, concis, d'aller droit au but et faire en sorte que votre design parle. C'est tout l' intérêt de l'étude de cas des designers est de mettre en valeur votre design, et non de montrer vos compétences en rédaction ou en présentation, qui seront acquises au fil des années travail. Vous ne serez donc pas en mesure de créer des présentations d'un niveau aussi élevé dès le début. Mais avec le temps, la pratique , les projets, vous vous améliorerez. Ensuite, vous arriverez au niveau de ces présentations que je vous ai montrées précédemment, par exemple à des niveaux encore plus élevés. Encore une fois, à la fin de cette vidéo, veillez à ce qu'elle soit concise. Assurez-vous de parler dans une langue vos utilisateurs et vos spectateurs comprendront. Assurez-vous donc de le cibler et de vous adresser aux spectateurs et aux utilisateurs qui vont comprendre et qui constituent votre public cible, parce que vous essayez d'être embauché ou que vous essayez de vous faire connaître à vos collègues designers, qui constituent votre public cible , puis parlez dans cette langue. 201. Conseils de présentation: Dans cette leçon, je vais vous donner quelques conseils de présentation en fonction de ce que vous présentez. Sautons donc tout de suite. Il s'agit de l'un de nos produits. C'est ce que l'on appelle le flux filaire, les organigrammes, et vous pouvez le trouver sur un réseau de donneurs en ligne. Je vais laisser le lien dans le PDF et vous pourrez y accéder. Et bien sûr, vous pouvez accéder à tous mes cours, tous mes produits numériques grâce à mon abonnement. Je vais également laisser le lien vers cela. Si ça t'intéresse. Vous pouvez cliquer sur leur joint et accéder à tout ce que j'ai créé. Nous avons donc ici un tableau des gaufres, qui n'est qu'un de nos produits. Et je voulais le montrer parce que c'est un peu différent de votre étude de cas classique. Il s'agit néanmoins d'une étude de cas, mais c'est une étude de cas pour un produit numérique. Il raconte donc une histoire différente. Il ne montre pas vraiment tous ces détails. Nous avons donc 200 écrans, 200 éléments, deux papiers, et nous avons des versions claires et foncées. Vous avez donc de petits extraits de texte ici, mais j'essaie de les afficher ici, exemple les versions claires et foncées. Et je le montre ici, donc j'essaie juste de vendre l'ensemble du produit également. Donc, si nous faisons défiler la page vers le bas, vous pouvez voir le bouton Acheter maintenant ici, afin que vous puissiez acheter immédiatement. Mais j'essaie de vendre l'histoire orale du produit lui-même. Donc, les versions claires et sombres, si nous défilons vers le bas, nous avons des composants adaptatifs. composants qui sont interconnectés, interagissent entre eux et qui changent de place, d'éléments changeants. Alors, qu'est-ce qui est inclus ? J'essaie de montrer qu' il existe 400 composants Web et le mobile dans trois formats de fichiers. Photoshop, Sketch et XD sont donc des composants parfaits, couches super organisées polices Google gratuites aux mises en page papier, didacticiel vidéo inclus pour vous aider à démarrer. Rien que celui-ci nous a permis de vendre des dizaines d'exemplaires de ce produit, car beaucoup de ces designers débutants ne savent pas vraiment à quoi il sert. Je ne sais pas vraiment à quoi l' utiliser, achetez-le. Et quand ils ont regardé le didacticiel vidéo, ils sont époustouflés. Au fil des ans, j'ai reçu de nombreux e-mails expliquant comment les didacticiels vidéo aident réellement mes acheteurs à comprendre comment utiliser mes produits améliorer l'expérience utilisateur de votre projet. C'est pourquoi vous allez utiliser ces organigrammes. En créant des organigrammes et en planifiant à l'avance, vous pouvez gagner beaucoup de temps lors des dernières étapes du projet, à vous et à vos clients, en réduisant le temps que vous consacreriez aux maquettes et plus tard pour l'interface utilisateur. Il explique donc immédiatement à quoi sert le projet, à quoi sert le produit. Et cela aide vraiment à vendre de l'histoire, car vous pouvez voir tous ces différents éléments combinés pour créer ces écrans. Cela aide donc vraiment les utilisateurs à comprendre comment ils peuvent utiliser ce produit s' ils l'achètent. Structure de couches organisée. Je partage donc toutes ces captures d'écran ici. Et si vous ne le voyez pas correctement, je peux zoomer de plus près. Vous pouvez donc voir Photoshop, vous pouvez voir un croquis et vous pouvez voir x D, juste ici. Vous pouvez voir cette structure de fichiers organisée. Donc, des organigrammes de toute complexité. Vous pouvez donc combiner et connecter tous ces organigrammes de différentes manières. Prêt pour l'impression. Je montre donc simplement un format de lettre américain prêt à être imprimé au format A4 afin que vous puissiez imprimer ces quatre graphiques si vous devez les montrer en personne à vos clients ou à vos coéquipiers. Variations illimitées. Je montre donc juste un tas de variations différentes ici, afin que vous puissiez les combiner comme vous le souhaitez. Ensuite, je montre cette icône, je propose un ordinateur portable, et je montre des éléments Web, de la lumière, qui sont ces éléments lumineux, 200 éléments lumineux pour les organigrammes du site Web. Et je commence par la catégorie des en-têtes. Vous pouvez donc voir comment le texte contribue réellement à ancrer l'histoire orale et le produit dans ce cas, le combinant avec des images. C'est donc ce que je disais. Je ne parle pas d'une diapositive Web Elements. Donc, par exemple je ne dis pas ici, ils ont tous un fond blanc pour aider vos éléments à se démarquer de la foule. Parce que cela aidera vos utilisateurs malvoyants mieux comprendre le produit. Je n'en vois rien. Fab Elements allume 200 éléments lumineux pour l'organigramme du site Web afin que les utilisateurs puissent comprendre  : Oh, ce n'est pas pour le mobile, c'est pour le site Web et la catégorie pour les en-têtes. Vous pouvez voir le contenu, les sliders, le portefeuille de contrats à terme, etc. Et si nous faisons défiler la page encore plus vers le bas, les éléments mobiles sont légers, afin que les utilisateurs puissent savoir, accord, donc c'est également pour les appareils mobiles. Génial. Donc j'en ai 200 ici, 200 là-bas, super. Nous avons donc des catégories de connexion pas à pas, etc. Et puis quand ils défilent jusqu'ici. Comme vous pouvez le constater, la présentation est extrêmement longue car elle comporte des dizaines d'éléments différents. Web Elements sombres. Donc, d'accord, je peux combiner un clair et un foncé ou je peux utiliser du clair ou du foncé tout de suite. Génial. Je n'ai donc pas à perdre de temps créer ces éléments clairs ou sombres plus tard. Quel est l'intérêt de cette présentation en premier lieu ? Il est un peu plus lent à charger car il est énorme. Vous pouvez voir combien de temps je fais défiler la page ? Et c'est ce que j' essayais de vous dire dans les leçons précédentes. Imprimez vos organigrammes Web, montrez-les à votre équipe ou à vos clients et établissez la mise en page avec eux. Et vous pouvez voir cette image des organigrammes ici. Des notes imprimées sont prises. La collaboration se déroule ici, ou vous pouvez imprimer vos organigrammes mobiles et les montrer à une équipe ou à des clients qui élaborent la mise en page avec eux. Nous avons donc un téléphone portable, nous avons la même chose, nous avons le groupe, nous avons toutes ces informations. Et j'ai décidé de fermer ces images. Tout d'abord, je combine mes organigrammes, je les imprime. J'ai pris le temps d'apporter certaines de ces modifications, faire certains de ces croquis. Ensuite, j'ai pris le temps de ranger tous ces éléments et de prendre une photo car cela m' aide vraiment à raconter une histoire à mes utilisateurs et aux acheteurs potentiels de ces produits. Parce que cela les aide vraiment à mieux comprendre comment ils peuvent les utiliser. Pour zoomer complètement. Vous pouvez le voir descendre, balayez vers le haut. Vous pouvez voir que ce n'est pas le cas, alors n'allez pas ici. Et vous pouvez voir tous ces éléments dans ces deux organigrammes. Et enfin, à la fin, ce que je voulais vous montrer, c'est ceci. Faites donc défiler l'écran un peu vers le haut. pouvez lire Love by Web Donut pour vous aider à créer de jolis designs. Donc juste un petit slogan en bas. Et sur mon site Web, vous pouvez voir que nous proposons plusieurs produits différents de la même catégorie et cliquez sur Voir plus de produits pour découvrir tous ces autres produits de la même catégorie ou différentes catégories. Mais si je commence mon premier parchemin, vous pouvez voir combien de temps cela va prendre pour atteindre le sommet. Il est donc extrêmement long et ne se charge pas en temps réel, mais vous pouvez obtenir une photo. Je laisserai le lien dans le PDF, comme je l'ai dit, afin que vous puissiez accéder à ce produit juste pour l'explorer, pour voir cette présentation. Mais c'est l'étude de cas. Néanmoins, une étude de cas peut consister à vous vendre en tant que designer, à vendre votre service ou à vendre votre produit. Il s'agit de l'étude de cas du produit. Dans ce cas, et bien sûr, je l'ai fait pour tous nos produits. Il va donc être un peu différent d'un produit à en fonction de sa taille , de ses activités , de son public cible, etc. Mais le but de cette vidéo est de vous aider à comprendre que l'étude de cas est vraiment là pour vous aider à vendre quelque chose. Qu'il s'agisse de vous-même en tant que designer, demander à quelqu'un d'autre de vous embaucher, s'il s'agit d'un produit comme dans ce cas, s'il s'agit d'un service que vous fournissez tel que la conception de sites Web, conception d'applications et autres choses comme ça. Assurez-vous toujours de parler à vos utilisateurs, à vos spectateurs et à vraiment les aider à comprendre de quoi il s'agit. Comme je l'ai mentionné à plusieurs reprises, votre étude de cas peut porter sur le service, produit ou vous-même. Vous vous vendez donc en tant que designer qui propose ce package. Alors, assurez-vous d'être à ce sujet. Assurez-vous de raconter une histoire et de la rendre aussi facile à comprendre que possible. Parce que tout le monde, nos designers, ne sont pas tous des experts et les clients ne sont pas tous les mêmes. Certains clients vont comprendre. Oui. OK. Je sais ce qu'est Adobe XD, par exemple quelles sont nos piles, quelles sont les couches, mais les autres clients n' en sauront rien. majorité des clients ne Croyez-le ou non, la majorité des clients ne possèdent même pas d'ordinateur. Ils font donc tout leur travail sur leur téléphone ou leur tablette. Et l'application de bureau, disponible sur un ordinateur de bureau, ne leur semblera pas familière car ils n'ont pas du tout d'ordinateur de bureau. Assurez-vous donc de faire attention à toutes ces choses et votre étude de cas se transformera comme un fou. 202. AFFECTATION de l'article 18: Votre devoir pour cette section est d' utiliser n'importe lequel de vos designs, mais pas ceux de cette classe, car dans ce cas, tout le monde créera des designs à partir de cette classe. Je vous conseille donc vivement de créer votre propre design personnalisé et présenter dans votre étude de cas Si vous n'avez pas de site Web, c'est très bien. Comme je viens de le mentionner, vous pouvez utiliser des balises. C'est un outil fantastique pour créer ces longues études de cas sur le forum et vous pouvez les publier pour que tout le monde puisse les voir. Ensuite, une fois que vous vous adressez réellement aux clients ou que vous souhaitez qu'ils s'adressent à eux, vous pouvez les orienter vers l'étude de cas et leur montrer simplement votre façon de penser et votre façon de résoudre les différents problèmes. 203. SECTION 19: Dans cette dernière section du cours, nous allons parler des différents endroits où vous pouvez trouver un emploi UI UX, et des différentes plateformes que vous pouvez utiliser pour le faire. Commençons donc. 204. Agence VS freelance: Lorsque vous recherchez un emploi, vous devez d'abord comprendre les différences entre travailler en tant que travailleur indépendant et travailler dans une agence. De toute évidence, lorsque vous travaillez au sein d'une agence, les personnes qui travaillent dans cette agence ont poste dédié pour vous trouver quoi faire, pour trouver de nouvelles tâches quotidiennes, pour vous payer votre salaire mensuel, et pour couvrir toutes les dépenses que vous pourriez avoir, par exemple la nourriture, la facture d'électricité, la facture Internet , etc. De plus, dans la majorité de ces endroits, vous aurez votre propre équipement. Si vous n'avez pas votre propre ordinateur, par exemple vous en aurez un une une une fois que vous aurez réellement commencé à travailler, alors que vous n'avez pas votre propre ordinateur en tant que travailleur indépendant, vous allez commencer à l'utiliser. Néanmoins, lorsque vous travaillez en tant qu'indépendant, vous avez évidemment beaucoup plus de liberté pour travailler où vous le souhaitez, pour faire ce que vous voulez. Et deuxièmement, par exemple, si cela convient mieux à votre emploi du temps et à votre vie, car tout le monde n' est pas pareil. Vous pouvez travailler le matin ou le soir car certaines personnes, en particulier les familles, préfèrent travailler davantage le soir, car cela leur donne une plus grande liberté parce que les enfants ont besoin d' être endormis, par exemple, ou parce que vous avez beaucoup plus de temps libre le soir plutôt que le jour. D'autres personnes aiment travailler très, très tôt le matin, terminer leurs tâches à cette heure-là parce que c'est ce qui leur convient. Tout le monde est donc différent à cet égard. Mais quoi que vous choisissiez, quoi que vous décidiez de faire, tout dépend vraiment de vous. Une chose que vous devez retenir de ce cours, c'est que vous pouvez faire les deux. Vous pouvez être embauché dans une agence et travailler en tant qu'indépendant en même temps. Ou vous pouvez commencer en tant que travailleur indépendant puis passer à l' agence ou vice versa. Ou comme je l'ai dit, vous pouvez travailler les deux en même temps. Tout dépend également de vous face à l'essor de l'actualité de ces dernières années. Et de plus en plus de postes à distance sont ouverts dans le monde entier et plus en plus de sociétés brassicoles optent pour le travail à distance parce qu'elles constatent que leurs dépenses sont bien inférieures. car ils n'ont pas à conserver toute l'entreprise dans l' ensemble du personnel du bâtiment. Ils n'ont pas à payer pour de grands bâtiments, d'énormes officiers avec toutes ces factures. Donc, pour un grand nombre d' entreprises, cela ne fera que croître d'année en année ici. Il est beaucoup plus avantageux pour vous, en tant que travailleur, de travailler à distance de toute façon. Donc, que vous travailliez pour une agence ou en tant que travailleur indépendant, il y a de fortes chances que vous trouviez un poste indépendant ou à plein temps à supprimer. 205. Concours de design: Une excellente option, en particulier pour les débutants, est de participer à des concours de design. Et ces contextes peuvent concerner les petites entreprises ou les grandes marques mondiales. Et il y a une nette distinction entre les deux. Et dans cette vidéo, je vais vous montrer quelques sites Web où vous pouvez essayer participer à ces concours et gagner en confiance en tant que designer. Développez vos compétences en discutant avec les clients, comprenant le brief en tant que designer et en élaborant votre portfolio en tant que designer. N'oubliez pas que je vais laisser les liens dans un PDF pour tout ce qui est abordé dans cette section du cours. Assurez-vous de consulter cet assemblage PDF. Cliquez sur ces liens pour accéder facilement à tous ces sites Web et les essayer vous-même. Le premier site Web que nous avons ici est 99 designs.com. C'est un site Web connu depuis des années. Et comment cela fonctionne, vous pouvez simplement parcourir les concours et cela fonctionne presque exactement de la même manière. Parcouvrons donc les concours, par exemple, et découvrons que toutes les catégories peuvent porter sur la conception de sites Web et d'applications, et toutes les sous-catégories peuvent être conceptions de pages Web ou concepteurs WordPress ou quelque chose comme ça. Et vous pouvez le voir ici, donc c'est le prix que vous allez obtenir si vous gagnez ce concours. C'est le temps dont vous disposez pour participer dans ce contexte, et c'est le nombre de designs déjà présents dans ce contexte. Un conseil que je peux vous donner à propos non seulement de 99 designs, mais aussi de sites Web de ce type : si vous pouvez rechercher des clients qui donnent des commentaires, des clients qui ne donnent pas de commentaires, attendez généralement la dernière minute parce qu'ils sont évidemment occupés par leur travail, et qu'ils fournissent ensuite simplement des commentaires aléatoires. Tu ne veux pas ça. Vous voulez des clients qui recherchent activement et fournissent des commentaires. Ensuite, une fois que vous aurez remporté l'un de ces concours, vous discuterez avec eux de la création leur site Web sur Webflow et de leur montrer comment l'héberger sur Webflow. Tout ce dont nous avons parlé dans le cours jusqu'à présent. Mais ce qui est crucial ici, c' est que vous allez les convaincre avec votre design, puis passer à Webflow, que vous allez évidemment facturer plus tard pour la dette service supplémentaire, mais 900 modèles, assurez-vous de le consulter. Il existe différentes catégories ici et ici , avec les sous-catégories que vous pouvez même choisir par secteur d'activité, vous pouvez afficher les filtres ici. Donc, toutes ces choses, alors assurez-vous de vérifier, créez votre compte. Et il en va de même pour le design crowd, un site Web un peu moins connu que 99 designs, mais qui peu moins connu que 99 designs, permet néanmoins d'y trouver des clients. L'essentiel que vous devez retenir propos de 99 designs et Design Crowd c'est qu'ils sont destinés à des contextes plus restreints, mais cela signifie que ce sont généralement les entreprises où les prix sont, par ex. Je ne sais pas, entre 1 500 et 1 000 dollars, quelque chose comme ça, ce qui a l'air génial. Mais vous pouvez également trouver d' autres entreprises et autres concours pour développer des marques mondiales, par exemple si vous accédez à des sites Web tels que your water, qui est en fait la plateforme d'innovation marketing. Et vous pouvez tout savoir sur la communauté dans les projets et quelque chose comme ça. Ils créent donc ces concours pour les grandes marques mondiales. Vous pouvez donc voir Coca-Cola, Deutsche Bank, Mealer, Henkel, toutes ces marques. En gros, cela fonctionne : vous explorez, vous vous connectez, afin de créer le projet, puis de le créer et de l'évaluer. C'est ainsi que cela fonctionne réellement pour les marques, mais pour vous, vous allez comprendre que le projet était de créer un compte gratuit ici. Vous allez recevoir les projets par e-mail, puis vous pourrez participer à ces projets, un peu comme avec les designers et designers absurdes, mais sur votre eau et votre maison de talents, qui est le prochain site que je voulais vous montrer. Il peut s'agir de très grandes marques. Il y a quelques mois, par exemple, j'ai reçu l'e-mail concernant une campagne menée par Mercedes-Benz avec, je crois, une maison de talents, je crois. Et ils choisissaient 50 designers différents pour leur remettre des prix, allant de 2 000€ à 10 000€ ou quelque chose comme ça. Et je pense que le prix principal était même une voiture. Cela peut donc être énorme, pas seulement à cause de l'argent, pas seulement à cause du prix lui-même, mais aussi à cause des liens que vous pouvez établir avec ces marques. Et imaginez que vous travailliez avec une marque, disons la petite boulangerie de maman ou autre, et Mercedes Benz, laquelle est la meilleure à ajouter à votre portefeuille ? Pense juste à ça. Ne pensez donc pas seulement au prix immédiat, mais aussi à l'impact que ce concours aura sur votre carrière plus tard. Donc, encore une fois, votre maison d'eau et de talents, je laisserai les liens dans un PDF. N'oubliez pas de les consulter. Vous pouvez voir les slips ici. Jetons donc un coup d'œil à un brief créatif. Vous pouvez donc voir un paon juste ici. Moteur Unreal. C'est pour l'un des films, je crois. Oui. Vous pouvez donc voir toutes sortes de marques différentes ici. Nationwide, Building Security, Absolut Vodka, une grande marque. Encore une fois, Downton Abbey, qui était l' émission de télévision, Seinfeld. Toutes sortes de grandes marques sont donc présentes et elles proposent des slips créatifs décents. Bien entendu, vous pouvez consulter l'appel à candidatures. Vous pouvez soumettre leur période de sélection. C'est à ce moment-là que le client a déjà choisi cette option pour CLEA, par exemple s'il a déjà choisi les soumissions gagnantes puis passe au tour final ou choisit simplement le sélecteur final, sélection finale, et il suffit de les faire tous gagnants et de leur donner tous les prix. Alors assurez-vous d'y jeter un coup d'œil. Comme je l'ai dit, soyez patient avec ces sites Web car la plupart du temps vous ne gagnerez rien. Mais cela peut sembler être le cas, mais vous allez en fait acquérir beaucoup d' expérience et de compétences générales que vous n'apprendrez nulle part ailleurs. Vous devez traiter avec des clients afin de comprendre ces compétences générales et les appliquer dans votre futur travail. 206. Plateformes de concert: plateformes de concerts sont une autre option qui pourrait vous convenir. Et ces plateformes ne sont en fait que de petits projets sur ces plateformes, lesquels différents designers ont mordu. Le plus connu est Upwork. Et vous avez probablement entendu parler d'Upwork. C'est ici que vous créez votre portefeuille et que vous pouvez soumettre toutes ces propositions à vos clients. Vous pouvez donc trouver du design et de la créativité. Nous pouvons aller chercher du travail et vous pouvez même améliorer vos compétences ici. Donc, en gros, cela fonctionne comme un client publie un brief ou un brief de conception et que différents designers soumettent une offre pour ce brief et pour ce poste. Vous allez pouvoir gagner en explorant d'autres tutoriels et blogs en ligne , car cela relève de l'art pur. Comment vous pouvez l'aborder pour être plus comparable avec d'autres clients, par exemple avec d'autres designers. Je recommande donc vivement Upwork, surtout si vous ne faites que commencer et que vous le faites comme des boules de neige. Lorsque vous commencez tout juste, il sera difficile de trouver un client. Mais lorsque vous trouverez le client, il vous laissera un avis. Cet examen vous aidera plus tard à attirer plus de clients afin que cela ne fasse que des boules de neige. N'abandonnez pas. Si vous n'obtenez pas d'emploi tout de suite, continuez simplement à soumettre, continuez d'essayer, assurez-vous de suivre toutes les règles et directives. Parce que j'ai entendu tellement d'histoires d'horreur lesquelles les concepteurs du groupe essayaient de tromper le système et de forcer les gens à tromper le système et dans lesquelles les concepteurs du groupe essayaient de tromper le système et de forcer les gens à leur donner du travail et d'autres choses de ce genre. Alors ne fais pas ça. Assurez-vous d'être aussi précis que possible en respectant les règles. Par conséquent, vous allez obtenir le poste beaucoup plus rapidement. La plateforme suivante est Freelancer, qui fait exactement la même chose. Assurez-vous donc de cliquer ici pour parcourir les offres d'emploi. Et comme je l'ai dit, je vais laisser le lien dans le PDF, personnes par heure, exactement la même histoire. Assurez-vous donc d'explorer les trois et de voir lequel vous convient le mieux. Peut-être que tu pourrais essayer les trois et voir où tu peux trouver le travail. Vous pouvez voir ici les concepteurs d'interface. Ils sont donc toujours à la recherche de personnes qui font cela. Et vous pouvez consulter un développeur Web et vous pouvez même leur trouver des emplois de flux de travail sur ces trois plateformes. Et enfin, ce que je veux vous montrer, c'est du haut vers le bas. Du haut vers le bas, c'est un peu différent parce que c'est l'une de ces plateformes d' enchères, mais ce n'est pas le cas parce qu'elle dispose d'un processus de sélection. Et vous pouvez voir que les trois meilleurs talents indépendants du monde sont sur cette plateforme, car ils sont très rigoureux dans du monde sont sur cette plateforme, car ils leur processus de sélection et de recrutement une fois que vous vous êtes classé parmi les meilleurs, meilleure équipe. Pour ainsi dire, ils vont vous donner du travail tout le temps. C'est donc à vous de décrocher ces emplois dès qu'ils seront disponibles. Et vous pouvez même travailler en tant que développeur Web ici, mais je vais vous montrer quelques sites Web complets dédiés un peu plus tard. Mais en gros, cela fonctionne comme suit : vous allez suivre ce processus d'embauche. Si vous réussissez, vous ferez partie d'une équipe, pour ainsi dire d'une équipe virtuelle. Et par conséquent, vous aurez accès à un plus grand nombre de ces opportunités d'emploi et de ces postes. Je vous propose donc trois plateformes différentes et une serviette Top, alors assurez-vous de choisir celle qui vous convient le mieux. Encore une fois, même largeur, les concours de design ne sont pas découragés de se lancer facilement rapidement. Vous devez essayer tout cela jusqu'à ce que vous obteniez votre première position. Cette première position vous permettra d'obtenir votre deuxième position, votre troisième position. Ensuite, il vous sera beaucoup plus rapide d'obtenir vos emplois supplémentaires et vos prochains emplois, car vous aurez toute cette expérience et tous parcours sur ces plateformes. 207. Nomades numériques: Être un nomade numérique est formidable car vous pouvez travailler où vous voulez dans le monde, vivre où vous voulez dans le monde et travailler en même temps. C'est le but de ces sites Web. C'est le but de ces postes. Parce que le fait de savoir dès le départ que vous n'êtes pas lié à votre maison, par exemple vous pouvez toujours être chez vous et vivre sur votre lieu de travail, ces emplois. Mais j'essaie juste de vous dire que c'est là tout le problème. Ils sont d'accord avec le fait que quelqu'un soit distant. Vous pouvez donc vivre en Inde, par exemple, et travailler pour une entreprise américaine, et vice versa. Peu importe où vous vous trouvez dans le monde, vous pouvez occuper l' un de ces emplois. Ce ne sont donc que trois sites Web, et vous pouvez en trouver beaucoup sur Google, il suffit de rechercher des emplois de nomades numériques. Et le premier est Digital Nomad Dot World Slash Job. Vous pouvez donc trouver un travail indépendant, à temps plein, à temps partiel, sous contrat temporaire. Donc toutes sortes de choses différentes. Ils ont même une entrée de gamme , ce qui est bien. Vous pouvez voir que la majorité d'entre eux sont dans une région éloignée où il est écrit États-Unis, par exemple parce que c'est un travail à plein temps, mais peut-être que vous pouvez même essayer de trouver ce travail à distance si vous négociez avec eux, c'est temporaire, par exemple suggérer un, disons un projet ou quelque chose comme ça. Ensuite, nous avons les emplois à distance et celui-ci fonctionne sur nomad.com slash jobs. Vous pouvez donc trouver toutes sortes d'emplois différents ici et vous pouvez voir que le design est là, donc vous pouvez ****** ça. Donc, si je pouvais vérifier le design, vous pouvez voir des emplois de designer UX, d'interface utilisateur , de designer, de graphiste, etc. Ensuite, nous avons Remote Ok.com Slash Digital Nomad Jobs. Et vous pouvez effectuer une recherche par lieu I, où se trouvent vos clients dans le monde, par salaire tout de même, vous pouvez trouver le salaire ici. Donc 70 pour l'éternité, quels que soient les avantages, quels que soient les avantages que l'on obtient. C'est donc un excellent site Web pour cela. Et vous pouvez trouver toutes sortes de résultats différents ici. Mais recherchons, disons, le design des développeurs. On y va. Et comme vous pouvez le voir, toutes sortes de jobs de design différents ici. Nous avons donc un ingénieur de test, ingénieur de pile, développeur de conception ou une interface utilisateur utilisateur ou toutes sortes de postes différents. oubliez pas de consulter ce site Web et de vous souvenir de la même histoire que toutes les leçons précédentes, y compris celle-ci. Si une chose échoue, essayez-en une autre, puis une autre, et voyez où cela vous mènera. Si vous voulez obtenir un travail à distance plutôt que de participer à un concours de design, tant mieux, vous pouvez ajouter ce travail à distance à votre portefeuille, vice versa, il fonctionne de la même manière. Alors peut-être que vous allez obtenir trois emplois en même temps. Qui sait ? Il suffit d'être constant, persévérant, et vous obtiendrez ce poste à la fin de la journée. 208. Plateformes de conception: Les plateformes de conception peuvent être un excellent moyen de trouver un emploi. Et pas seulement le travail, mais même avec des amis qui sont dans le même bateau que vous, vous pouvez entrer en contact avec d'autres designers que vous aimerez travailler, vous pouvez leur envoyer des messages. Vous pouvez échanger des ressources géniales que vous avez trouvées en ligne, par exemple des cours en ligne comme celui-ci, Wink, Wink, ou vous pouvez échanger vos livres préférés sur l'UX design, peut-être quelques conseils et astuces sur travailler avec certains types de clients. C'est donc un excellent moyen de développer votre réseau et de communiquer avec d'autres designers tout en restant chez vous. Je vais vous montrer trois de mes sites Web préférés et vous pouvez bien sûr les explorer et en découvrir d'autres. Le premier est donc celui des beacons et Behance est l'un des plus anciens sites Web du marché. C'est génial car le week-end vous pouvez créer votre propre portefeuille. Si vous n'avez pas votre propre site Web personnel, vous pouvez le créer le week-end C'est fantastique car vous pouvez créer ces présentations détaillées qui sont idéales à des fins d'études de cas. Et vous pouvez toujours diriger vos clients vers ces études de cas et ils pourront y voir toutes sortes de détails différents dont nous avons parlé dans la section des études de cas de ce cours. De plus, c'est formidable car, comme je l'ai dit, vous pouvez entrer en contact avec la communauté. Vous pouvez explorer la communauté et vous en inspirer et aussi apprendre parce qu'elle géniale et qu'elle a cet onglet de diffusion en direct ici, que je diffuse parfois en direct avec eux, en particulier avec Adobe XD et autres applications Adobe. Mais vous pouvez trouver un emploi ici assez facilement. Vous pouvez donc accéder à des offres d'emploi ici, en haut de la page. Créez votre profil, évidemment, vous aurez alors des indépendants à plein temps et des créatifs embaucher et vous pourrez également enregistrer des emplois pour plus tard. Alors, comment faire, disons indépendant. Et vous pouvez le voir ici, ce qui vous permet de rechercher toutes sortes de champs de catégories différents. Ou je peux filtrer via UI UX, par exemple, et vous pouvez voir UI UX n'importe où, n'importe où. Et ils sont tous indépendants. Vous pouvez voir que nous avons 56 postes indépendants différents. Si vous souhaitez postuler, vous allez le faire directement pendant le week-end. Assurez-vous donc d'avoir votre profil afin publier le travail que vous avez fait précédemment. Et c'est tout sur Dribble. Ce sera un peu différent car lorsque vous allez trouver du travail, votre site d'emploi est gratuit, mais pour les projets indépendants, vous devez avoir un compte Pro. Joe Board ressemble donc à ceci. Ainsi, lorsque vous allez ici, vous pouvez filtrer. Disons que vous êtes designer. Disons UX, disons conception Web, cliquez sur Filtrer. Et ça va vous être visible partout. Et vous pouvez choisir un contrat indépendant à temps plein et l'ouvrir à distance. Et vous pouvez voir que certains d'entre eux sont adaptés à distance, par exemple celui-ci, celui-ci, celui-ci. Ainsi, vous pouvez trouver toutes sortes de postes différents lorsque vous êtes indépendant. Ce que vous pouvez voir, c'est le budget immédiatement. Donc, certains d'entre eux, filtrons-les via l'interface utilisateur, conception Web UX, comme nous le faisions précédemment. Filtrez les résultats. Voyons ce que nous avons. Nous avons donc 16 nouveaux projets publiés aujourd'hui. Ils ont donc beaucoup de nouveaux projets, mais encore une fois, vous devez payer au dribble pour ce service en particulier. Vous pouvez donc voir toutes sortes de postes différents et c'est génial car vous pouvez voir le budget. Vous allez donc aborder cela la manière que j'ai déjà mentionnée précédemment. Vous pouvez donc leur proposer un service de conception adapté ce budget particulier, puis leur proposer Webflow en tant que vente incitative. Vous pouvez leur dire à quelqu'un du genre : « D'accord, nous allons créer ce design, qui est bien, mais vous n'avez pas de développeur. Peut-être que je peux le développer pour vous dans Webflow, ce sera génial pour vous car il sera facile à mettre à niveau, à gérer, à ajouter de nouvelles informations, à échanger. Vous n'avez pas à vous occuper de plugins mais de mises à jour, toutes sortes de choses différentes. Et l'hébergement est inclus à l'intérieur. Ça va être assez facile. vente incitative, à mon avis, en particulier pour les petites entreprises qui ne savent pas ce que vous faites. Et enfin, le site final amusant est celui-ci, qui est conçu comme une actualité. Et sur Designer News, ils ont ces sections sur les emplois. Vous pouvez cliquer ici et vous pouvez répertorier par développement de la conception, stage contractuel à temps plein, à temps partiel , indépendant, convivial à distance, ou vous pouvez même saisir une allocation si vous souhaitez être géographique spécifique. Enfin, vous pouvez tous les ouvrir dans un nouvel onglet, mais vous devez préparer votre portefeuille. Il s'agit essentiellement d'un blog, vous pouvez donc cliquer sur des articles et lire différents types d'histoires, entrer en contact avec d'autres designers, comme je l'ai mentionné, mais ils ont cette section emploi et la section podcast. Vous pouvez donc cliquer dessus et l'appliquer à ces différents postes. Alors voilà. Même histoire que toutes les précédentes, que je vous ai déjà montrées dans ce cours. Assurez-vous de le tester, d'appliquer le mélange pour qu'il soit persistant, être cohérent, d'avoir un portefeuille en ordre et de continuer à appliquer. L'un d'eux va te trouver ce travail. Vous pouvez le doubler, ou vous pouvez même aller plus loin et les essayer tous en même temps. C'est déjà à vous de décider, augmentez votre temps, mais assurez-vous de ne pas abandonner. Assurez-vous de rester concentré, persévérant et vous obtiendrez un emploi à la fin de la journée. 209. Emplois en ligne: Outre ces méthodes dont nous avons parlé précédemment, lorsque vous créez un design et que vous offrez ensuite un service de flux de travail, vous pouvez accéder à des sites Web dédiés où vous pouvez trouver des offres d'emploi Webflow. Vous pouvez accéder à Webflow et demander à devenir un développeur Webflow certifié. Ils vont vous dire de vous envoyer des prospects cette façon et vous pourrez facilement trouver un emploi. Vous pouvez vous adresser à différentes agences. Vous pouvez accéder à LinkedIn, créer un profil, y ajouter votre portfolio Web complet, par exemple la section du site Web gratuit Webflow dont nous avons parlé dans la partie Webflow de ce cours. Ensuite, vous pouvez indiquer que votre portefeuille vous permettra d'obtenir des prospects et des offres d'emploi de cette façon. Mais dans cette leçon, je voulais simplement montrer deux sites supplémentaires sur lesquels vous pouvez trouver facilement des tâches liées au flux de travail. Tout d'abord, nous n'aurons aucun code. Cela fonctionne, c'est que vous appliquez ici et que cela ressemble à une serviette de finition. Ils vont tout le temps t'envoyer des jobs. Vous devez donc passer différents tests au cours desquels ils peuvent tester vos connaissances sur Webflow. Et tu dois remplir ton profil, tu dois leur montrer un portfolio. C'est pourquoi j'ai dit que vous pouviez joindre ceux de la publication gratuite Webflow que vous avez créés dans votre profil Webflow et les mettre dans votre portfolio. Tu peux leur montrer ton expérience. Sur la base de votre expérience, vous serez payé. Même histoire que tous ces différents sites Web. Enfin, nous avons des E/S flottantes ou distantes. Donc, un site d'emploi numéro un pour trouver des emplois sur Webflow et recruter des talents. Vous pouvez donc vous rendre ici, effectuer une recherche par lieu, profession, type d' entreprise et expérience. Donc, poste d'entrée de gamme, par exemple pour télécharger un designer. On y va. Eh bien, l'huile par concepteur et développeur, n'importe où. Donc toutes sortes de postes différents. Je pense que c'est un site Web fantastique. Je vais laisser un lien vers celui-ci dans un PDF. Assurez-vous de le tester, assurez-vous de l'essayer. Et encore une fois, même histoire. Je me répète dans toutes ces différentes leçons, mais assurez-vous de persévérer. Si tu n'obtiens pas celui-ci, tu auras le suivant. Alors continuez d'essayer, essayez toujours de répéter les étapes que vous avez faites lorsque vous avez trouvé un emploi et essayez d'innover un peu lorsque vous trouverez votre prochain emploi. Et assurez-vous de combiner ces sites Web Webflow avec des sites Web de conception et assurez-vous de proposer des ventes incitatives Webflow et de voir ce qui vous convient le mieux. Est-ce simplement que Webflow ajuste design lorsque vous décidez que ce sera beaucoup plus simple, pour que vous puissiez concentrer tous vos efforts dans un seul panier, par exemple, mais avant cela, vous devez tout essayer encore une fois. 210. Conseils de portefeuille: Une dernière chose à propos des emplois, c'est votre portefeuille, car c'est votre portefeuille qui vous permettra d' obtenir votre prochain emploi. Il est donc très important d'en avoir un bon. Dans cette courte leçon, je voudrais simplement vous donner quelques conseils et indications sur la façon dont vous gérez votre portefeuille. Donc, la première chose sur laquelle vous devriez vous concentrer est si vous deviez embaucher quelqu'un, ce que vous rechercheriez chez cette personne. Donc, par exemple, si dans ce cours nous construisions un site Web sur les voitures, et disons que vous ne faites que créer des sites Web sur les voitures. Ce sera donc un excellent portfolio pour vous permettre de postuler à un poste de conception de site Web sur les voitures. Tu vois où je vais. Ainsi, dès que vous aurez trouvé un emploi, dès que vous aurez organisé votre portefeuille d'une certaine manière, il vous sera beaucoup plus facile de trouver un emploi, mais assurez-vous de postuler. Disons que dans ce cas, restons-en à ce scénario. Si vous travaillez uniquement avec des voitures de largeur et que vous vous intéressez à des voitures de marques automobiles, vous allez vous adresser à différentes marques de voitures, et non à des maquilleurs, à des artistes musicaux ou à d'autres artistes de ce genre. Vous allez simplement concentrer tous vos efforts sur ce créneau. Vous pouvez toujours inverser la tendance plus tard, mais surtout lorsque vous commencez, il est préférable de concentrer tous vos efforts sur un créneau ou un secteur, car c'est ainsi pour vous permettre de créer votre portefeuille de manière beaucoup plus simple, cibler tous vos prochains prospects et de présenter votre argumentaire de vente, de cibler tous vos prochains prospects et de présenter votre argumentaire de vente, par exemple pour organiser tous vos documents de la même manière. contrats, comme des propositions, des modèles, des cahiers de conception. Toutes ces choses dont nous avons parlé dans ce cours seront bien meilleures et beaucoup plus simples à faire pour vous. Donc, si vous vous concentrez uniquement sur un type de secteur ou un type de niche, vous pouvez également travailler avec des clients locaux, des clients mondiaux. Cela n'a pas vraiment d'importance. Vous devez toujours avoir votre portefeuille. Enfin, une dernière chose que je peux te donner. Un dernier conseil que je peux vous donner à propos votre portfolio est d'y avoir toujours votre image. Parce que les gens aiment te voir. Les gens aiment travailler avec des gens et non avec une marque ou un ordinateur. Ils veulent voir qui tu es. Assurez-vous de le mettre dans votre portefeuille. Assurez-vous de mettre des choses différentes à votre sujet. Es-tu bruyant ou silencieux ? Vous aimez les choses sombres ? aime les vêtements légers, comme je ne sais pas, vêtements voyants qui aiment rester assis dans le noir ou les blagues, regarder des films, faire du vélo, avoir des milliers de chats. Qu'est-ce qui vous différencie de tous les autres designers ? Il peut être très petit, il peut être très grand. Cela n'a pas d'importance. Assurez-vous simplement de le mettre dedans. Cela va vous humaniser plutôt que de laisser les clients vous considérer comme une machine. N'oubliez pas que ces personnes parcourent des milliers de portefeuilles différents. Il faut donc se démarquer de la foule afin d'attirer leur attention et d'être embauché. Assurez-vous donc de faire exactement cela. Enfin, lorsque vous formatez votre travail, assurez-vous de commencer par le haut et de descendre jusqu' en bas, comme nous l' avons mentionné dans la section des études de cas sur l'expérience utilisateur. Assurez-vous de toujours commencer par le haut. Le problème que vous avez résolu en bas de votre présentation sera le résultat final. Enfin, pour ce cours, je tiens à vous souhaiter bonne chance dans votre travail. Chasser. Assurez-vous de ne jamais abandonner. Assurez-vous d'être persévérant , assurez-vous d'être cohérent. Ça va être difficile. Vous allez faire face à des rejets tout le temps, mais continuez à persévérer et vous trouverez l'emploi de vos rêves le plus tôt possible. Merci beaucoup d'avoir regardé cette leçon et cette partie du cours. Et encore une fois, bonne chance dans ton travail. Chasser. 211. Conclusion de cours: On y va. Nous arrivons à la fin de ce cours. Merci beaucoup d'avoir regardé. Et j' espère vraiment que vous apprendrez quelque chose de nouveau, que vous allez mettre en œuvre certains de ces apprentissages dans votre processus de conception. Et je te souhaite sincèrement bonne chance dans tes recherches d'emploi. Si vous n'en avez pas, si vous en avez déjà un véritable souhait, vous devez trouver un modèle ou l'améliorer en utilisant certaines des techniques que vous apprendrez. N'oubliez pas que si vous êtes bloqué pendant ce cours ou après avoir regardé ce cours, vous pouvez toujours me contacter. Vous pouvez toujours me contacter par e-mail, par exemple ou via ce site Web. Je suis toujours là pour t'aider et je serais heureuse de le faire. Assurez-vous de suivre certaines de ces méthodes. S'ils ne vous conviennent pas, vous pouvez les ignorer à une date ultérieure. Si vous décrochez un emploi dans une entreprise , assurez-vous de toujours explorer son processus, car toutes ces entreprises ont mis en place des processus différents. Si vous travaillez en tant que travailleur indépendant en solo, chaque client sera légèrement différent. Et lorsque vous travaillez avec ces plateformes, chaque plateforme sera légèrement différente. Essayez donc de comprendre ce qui fonctionne pour vous, car c'est la chose la plus importante ici. Si vous n'aimez pas travailler avec des mood boards, ne les utilisez pas. Si vous n'aimez pas travailler avec des maquettes en papier, ne les utilisez pas. Ne vous embêtez pas trop sur l'une de ces étapes en cours de route. Ce sont toutes des étapes importantes du processus de conception. Mais si vous constatez en cours de route que certains d'entre eux ne fonctionnent pas pour vous, ne les utilisez tout simplement pas. Ne vous embêtez pas trop avec l'un d'entre eux. Parce que si cela ne fonctionne pas pour vous, ne l'utilisez pas. Merci encore une fois d'avoir suivi ce cours N' oubliez pas de consulter ma chaîne YouTube, où Alex parle de design. Je vais également le lier quelque part dans ce cours. Je crée tout le temps des tutoriels UI UX. Je crée un grand nombre de ces différents cours en permanence et je suis toujours là pour vous aider. J'ai également un groupe Facebook, alors n'oubliez pas de le rejoindre si vous souhaitez y publier vos travaux aux côtés de vos camarades pour qu'ils puissent les voir. Ou si vous voulez simplement avoir à nouveau quelques commentaires rapides de ma part. Et enfin, merci beaucoup d'avoir regardé. Et je vous souhaite vraiment bonne chance dans tout ce que vous faites dans le domaine de l'UX. Prends soin de toi.