Conception Web complète de Figma à Webflow (nouvelle interface utilisateur)

1. Aperçu du cours: Les personnes qui tentent leur vie avec la conception de sites Web indépendants n'y parviennent pas. Ils sont confrontés à trois grands obstacles, et un à la fois, chacun de ces obstacles les éloigne de leur voyage. Ces cours sont en fait trois en un, trois parcours pour surmonter trois grands obstacles. Le principal obstacle numéro un, qu' apprendre à coder leur prend trop de temps. Des centaines de milliers d'étudiants s'inscrivent à des cours de conception de sites Web, mais seulement 10 %, à peine 10 % y parviennent. Je le sais parce que c'est ce qui m'est arrivé. Avant de savoir comment créer des sites Web, je n'étais qu'un concepteur visuel. Je concevais les maquettes, un prototype de site Web, et je le donnais à mon client, confiait ensuite ces conceptions au développeur Web, généralement un développeur Wordpress, généralement un développeur Wordpress, et cette personne construisait ensuite l'ensemble du site Web J'ai réalisé que je laissais beaucoup d'argent sur la table. Si je pouvais également créer l'ensemble du site Web, je m'occuperais de tout le gâteau. J'ai donc décidé de m'inscrire à des cours de codage et à des cours pour apprendre le design Web en termes de création d'un site Web et j'ai commencé à apprendre le HTML CSS, le JasScript et tout ça Maintenant que j'ai déjà travaillé sur vrais projets et que je sais ce que mes clients demandent, vrais clients demandent en termes de fonctionnalité du site Web, et ils demandent souvent des et des animations personnalisées compliquées et complexes interactions et des animations personnalisées compliquées et complexes. J'ai donc examiné comment cela pourrait être fait avec ce que je savais déjà et combien il me restait à apprendre. Quand j'ai examiné la situation dans son ensemble, je me suis rendu compte que c'était tout ce que j'avais appris jusqu'à présent. Je pensais qu'il me restait encore beaucoup à apprendre pour être en mesure de livrer ce que mes clients demandent habituellement. Mais en réalité, c'est ce qu'il en restait. J'ai mis tout le code de côté jusqu'à une date ultérieure indéfinie Mais ensuite, je suis tombé sur un outil de conception Web appelé Webflow, et cela Je l'ai ouvert, j'ai regardé des tutoriels vidéo. En quelques heures, je construis un site Web complet à partir de zéro avec des interactions personnalisées, sans modèles ni rien. J'ai été époustouflé, le coup de foudre. J'ai commencé à proposer à mes clients la conception et le développement complets du package. Les clients ont adoré le fait que je fasse tout cela, et ils ont commencé à affluer. C'est quelque chose qui ne m' est jamais arrivé auparavant. Webflow élimine le plus gros obstacle auquel vous serez confronté : le temps et le dévouement nécessaires pour apprendre à coder un site Web Avec Webflow, c'est plus rapide, plus fluide et beaucoup plus amusant Vous apprendrez à créer des sites Web incroyables aussi bons qu' un concepteur Web professionnel sans avoir à écrire une seule ligne de code. Webflow est une sorte de centrale laquelle de grandes marques comme Discord, Upwork et Dropbox confient Et les pouvoirs créatifs de Webflo sont si vastes que les meilleures agences de design du monde utilisent Webflow pour proposer des sites primés à des célébrités comme Lando Ainsi, vous pouvez être sûr que votre énergie est dirigée vers un outil vraiment puissant. Webflow est également un constructeur de sites IA, et ce qui rend Weblos AI unique, c'est que, contrairement aux constructeurs d'IA traditionnels, le résultat est entièrement modifiable par le biais de leur concepteur visuel Vous n'avez pas à vous battre avec un chatbot pour obtenir le look souhaité, mais ce n'est que la partie visible de l'iceberg Les entreprises ont besoin de bien plus qu'un simple site Web. Ils ont besoin d'un écosystème complet, outils de référencement puissants, d'un support multilingue, d'un CMS. Les personnes non techniques peuvent utiliser un espace permettant aux spécialistes du marketing de lancer des campagnes sans endommager le site, d'un moyen convivial de modifier le contenu du site, et Avec les autres IA Builders, vous êtes à peu près seul à tout mettre en place, mais Webflow propose tout cela prêt à l'emploi est la raison pour laquelle même le principal modèle d'IA au monde pour le codage, Cloud, a construit son site marketing sur Webflow Il y a une vidéo après ce titre, Qu'est-ce que Webflow. Vous pouvez le visionner si vous avez besoin de plus d'informations avant de vous inscrire au cours Après quelques élèves courageux qui ont réussi tout le processus d'apprentissage , le deuxième obstacle les attend. Ils ne peuvent pas vraiment bien concevoir. Parce que presque tous les cours de conception Web sont axés sur la partie technique, le codage, le HTML, le CSS, le JavaScript et tout le reste. Mais le design lui-même fait partie du domaine du graphisme. Des choses comme la théorie des couleurs, la typographie, la photographie, c'est plus de l'art Et la plupart d'entre eux n'ont jamais l'occasion d' acquérir cette compétence cruciale. Et ce que font la plupart des concepteurs de sites Web, qu'ils utilisent des thèmes et des modèles. Et parfois, c'est une bonne chose à faire, mais les clients bien rémunérés ne veulent pas d'un modèle de site. Ils ne vont pas payer des milliers de dollars pour installer un thème Word Press, n'est-ce pas ? Ils veulent un beau design personnalisé qui leur permettra de devancer leurs concurrents, quelle que soit leur activité. Et si vous êtes un concepteur Web capable de le faire, non seulement vous attirerez des clients bien rémunérés, mais votre concurrence sera également plus mince car peu de concepteurs Web savent comment s'y prendre Je vais donc vous apprendre le graphisme, mais uniquement ce dont le web a besoin. Ainsi, vous pouvez apprendre à concevoir des sites Web magnifiques et personnalisés. Vous n'avez pas besoin d'être créatif ou d'avoir des prérequis. Si vous pouvez déplacer une souris et voir les couleurs, je vous apprendrai à dessiner. Le design est assez simple. Il y a des règles , des directives et de nombreuses astuces cachées, et c'est vraiment amusant. Pour créer ces designs, nous allons avoir besoin d' un outil de conception d'interface. Vous voyez, les bons sites Web ne se créent pas tout de suite. Tout d'abord, vous devez concevoir un prototype. peu comme un dessin du côté non fonctionnel, puis vous le développez. Pour cela, nous allons utiliser le meilleur outil du marché, Figma C'est gratuit, facile à utiliser, mais puissant. Vous aurez des exercices de conception et des projets. Vous allez concevoir des sites Web d'entreprise, vous allez concevoir un blog. Vous découvrirez le processus des designers professionnels, de la rédaction d'un brief de projet à la conception du prototype final en passant par le cadrage Dans le troisième cours, vous apprendrez à utiliser une fréquence efficace , car de nombreux concepteurs de sites Web trébuchent lors de cette dernière étape. Ils sont très perplexes. Ils ne savent pas comment fixer leur prix. Ils ne savent pas comment rédiger des propositions gagnantes, comment aborder les clients, comment mener des négociations, etc. Enfin, je vais vous offrir un cadeau, un superbe site de portfolio que j'ai conçu et construit pour vous. Dès que vous aurez terminé ce cours, vous aurez un site de portfolio brillant et impressionnant avec travaux de portfolio issus de ce cours qui y ont déjà été publiés. La plupart des concepteurs de sites Web n'ont en fait pas de site Web personnel. Vous n'aurez aucune difficulté à impressionner vos clients potentiels Je suis acoshelli et je serai votre guide dans ce voyage. Il ne vous reste plus qu' à vous inscrire. 2. Qu'est-ce que Webflow ?: Dans cette vidéo, je souhaite répondre à plusieurs questions que vous pourriez vous poser à propos de Webflow. Alors, qu'est-ce que Webflow ? Webflow est un constructeur de site Web sans code qui ne ressemble à rien d'autre Il vous aide à concevoir et à créer des sites Web réactifs à partir de zéro, comme le ferait n'importe quel concepteur Web professionnel, mais sans écrire de code. Eh bien, en fait, Webflow l' écrit pour vous. Vous concevez tout visuellement pendant que Webflow écrit un code sémantique propre pour Vous pouvez ensuite exporter ce code ou le conserver et héberger le site Web dans Webflow En plus du concepteur Web, il s'agit d'une plate-forme CMS, un peu comme Wordpress, ce qui signifie que vous pouvez créer sites dynamiques complets tels que des blogs et des sites Web de commerce électronique. Et en voici une très grosse. Avec Webflow, vous pouvez créer des animations et des interactions riches S'il s'agit de coder, cela nécessite des connaissances avancées en Javascript. Mais dans Webflow, vous le faites visuellement sans même penser au code Apprendre Webflow, c'est comme apprendre une nouvelle superpuissance. C'est vraiment un outil révolutionnaire qui a changé le secteur Vous souhaitez des exemples de sites intégrés à Webflow ? Pas de soucis Les sites Webflow gagnent régulièrement des concours de design tels que awards.com C'est Oscarsoft Web Design, et cela en dit long lorsqu'un outil de conception visuelle est en concurrence avec sites Web codés sur mesure utilisant moteurs d'animation complexes conçus pour Après l'acquisition et l' intégration de Greensock par Webflow en 2025 , considéré comme le moteur d'animation Web numéro un, nous allons voir beaucoup plus de sites primés créés sites primés La même année, un site Webflow créé pour Lando Norris remporte le prix Side of the Year Les designs impressionnants ne sont pas la seule raison pour laquelle les marques optent pour Webflow Les performances et les fonctionnalités en sont une autre. Discord utilise Webflow pour le principal site marketing et le blog Upwork Two pour toutes leurs pages secondaires non liées aux applications, Dropbox pour leurs campagnes marketing et leurs lancements de produits. Et voici un petit coup d'envoi. Même le site marketing de Clod est sur Webflow. C'est ironique, car le caillot est le meilleur modèle de literie. Aucune de ces entreprises ne manque de développeurs pour coder manuellement ou vibe leurs sites Ils voient simplement plus d'avantages à utiliser Webflow. Si vous voulez d'autres exemples, vous pouvez consulter vitrines latérales de Webflow sur des sites tels que lapan Ninja, awards.com ou directement Quelques exemples suffisent pour montrer à quel point les possibilités que vous pouvez réaliser avec Webflow sont infinies que vous pouvez réaliser avec Webflow En tant que débutant dans le secteur de la conception Web, je suis sûr que vous voulez savoir comment Webflow se compare aux autres outils du secteur, y compris le codage Vibe choisir le bon outil pour le projet Il est extrêmement important de choisir le bon outil pour le projet. Il existe tellement d'options, et le simple fait de rechercher «   What's the best » sur Google vous donnera les mauvaises réponses, car il n'y a pas de meilleur Ils ont tous leur place et occupent un créneau bien particulier, et au sein de leur niche, ils sont très forts. Il est difficile de comparer tout cela, mais nous pouvons le faire à l'aide d'un petit graphique pratique appelé Magic Quadrant Par exemple, nous pouvons prendre deux aspects importants pour les sites commerciaux, puissance de conception et les fonctionnalités, et répertorier les outils les plus populaires à cette échelle. Nous obtiendrions quelque chose comme ça. Les outils de codage Vibe, je les réunit en un seul parce que, fondamentalement, ils sont tous identiques La méthode de construction et de conception est identique. C'est incitatif. Et la qualité de sortie dépend moins de la plateforme que du modèle d'IA utilisé. Je suppose donc simplement que c'est le meilleur modèle pour cette comparaison. Wix est doté de fonctionnalités très élevées en raison ses outils natifs pour les entreprises tels que les menus des restaurants, réservation d' hôtels, la planification, les événements, etc., et d'un solide marché d'applications pour d'autres fonctionnalités supplémentaires Mais tu ne gagnes aucun prix avec un côté faible. C'est idéal pour les personnes qui créent leur propre site, mais ne convient pas aux agences de design qui souhaitent proposer des designs haut de gamme très soignés. En termes de fonctionnalités, rien ne vaut Wordpress avec ses fonctionnalités quasi illimitées en raison de son énorme écosystème de 60 000 plug-ins. Mais les concepteurs visuels Wordpress comme Elementor sont limités par les widgets, ce qui signifie que vous devez utiliser des designs prédéfinis Oui, ils peuvent avoir de belles options, mais elles seront limitées. Et les résultats seront génériques puisque tout le monde devra puiser dans la même sélection de widgets et de composants. Bien sûr, pour des designs et des pièces de guerre totalement uniques , mais uniquement avec des sites codés sur mesure sans utiliser de constructeurs visuels. En ce qui concerne le codage vibe, ses fonctionnalités sont théoriquement illimitées Mais dans la pratique, la plupart de ces fonctionnalités ne sont pas une fonctionnalité de site Web prête à l'emploi. Il s'agit d'un code généré qu' un non-codeur peut avoir du mal à valider et à maintenir. Avec les plateformes traditionnelles sans code, quelles que soient les fonctionnalités qu'elles offrent, vous pouvez compter sur elles. Il a été testé au combat, construit et entretenu par des professionnels. Ceci est basé sur l' évaluation 2026 des outils d'IA. Elles s'amélioreront encore et, au fil du temps, elles évolueront légèrement sur l'échelle, mais les fonctionnalités rapides seront toujours moins performantes que les fonctionnalités robustes natives que vous n'avez pas à inventer de toutes pièces. En ce qui concerne la puissance de conception, le placement est moins discutable. Même un concepteur visuel compétent ne peut pas diriger de manière fiable l'IA pour produire des designs uniques haut de gamme. Croyez-moi, j'ai essayé. Ce n'est pas une limite de l'IA Tech. C'est une limite du langage naturel lui-même, car une image vaut 1 000 mots. Il est plus facile et plus rapide de dessiner notre vision nous-mêmes que de la décrire avec des mots. C'est pourquoi nous ne voyons aucun site primé sortir des outils de codage Vibe Seuls Webflow et Framer obtiennent leur place au-dessus de la ligne de référence primée Leurs sites apparaissent constamment sur sites de concours de design tels que awards.com, en particulier Webflow Les deux offrent un contrôle total sur le design et des éditeurs d'animation extrêmement puissants. Framer propose un animateur basé sur les dates, qui est simple et puissant, et Webflow propose un animateur basé sur la chronologie, que vous trouverez dans les outils d'animation professionnels tels qu' Adobe After Et par rapport à Framer, Webflow offre des fonctionnalités meilleures et mieux établies pour une utilisation professionnelle Le territoire où la haute fonctionnalité rencontre capacités de conception élevées est celui où les revenus sont élevés. C'est pourquoi Webflow est l'outil de choix pour les agences de design Notez que j'évalue ces outils pour les sites commerciaux et marketing, non pour les applications Web. Cette distinction est importante car les sites professionnels et les applications Web ont des besoins très différents et aucun de ces créateurs de sites conçu pour les applications Web, à l'exception du code Vibe Il y a d'autres aspects que l'on pourrait comparer et qui révéleraient une tout autre histoire. Par exemple, si nous comparons les fonctionnalités à la facilité d' utilisation, Webflow obtiendra des résultats très différents en raison de sa courbe d'apprentissage Webflow n'est pas quelque chose que vous pouvez simplement utiliser et commencer à créer des sites Web Ce n'est pas aussi intuitif que quelque chose comme un espace carré. Il a une courbe d'apprentissage. Et c'est principalement parce qu'il est basé sur la structure de code normale qu' un concepteur et développeur Web ordinaire utiliserait. Par exemple, vous ajoutez des éléments HTM dans Webflow et vous les stylisez à l'aide de classes CSS, comme vous le feriez lors du codage du site Web Si vous avez de l'expérience avec le HTML et le CSS, cela vous sera certainement utile. Mais si vous n'en avez pas, ne vous inquiétez pas. Je t'apprendrai tout au fur et à mesure. En fait, la courbe d'apprentissage de Webflow réellement à votre avantage, car c'est la seule qui vous pousse à apprendre principes fondamentaux immuables du développement Web, le modèle de boîte, la boîte flexible, les classes physique magnifiquement étrange du HTML et du CSS Ces fondations du Web ne mèneront jamais nulle part. Si un jour vous décidez de passer au codage ou au codage Vibe, vous emporterez ces connaissances avec vous C'est une compétence intemporelle. L'Ibeding est théoriquement le plus simple à utiliser. Il n'a pas de courbe d'apprentissage car il suffit de lui parler Mais pour les non-codeurs, cette simplicité se transforme en complexité maximale dès que vous vous heurtez à un obstacle Les barrages routiers sont plus courants qu'on ne le pense. Wix remporte cette catégorie. Il est à la fois fonctionnel et facile à utiliser. C'est leur créneau et ils le dominent. Il est conçu pour être convivial et accessible aux propriétaires d'entreprises non techniques. Toutes les fonctionnalités dont une entreprise peut avoir besoin, du référencement aux paniers d'achat, ne prennent que quelques clics dans une interface utilisateur guidée Vous pourriez penser, alors pourquoi ne pas apprendre les semaines ou l'espace carré puisque ce sont les plus simples ? Mais cette facilité vous nuit en tant que professionnel qui souhaite être rémunéré pour son expertise La simplicité permet à un plus grand nombre de personnes d'accéder au marché du travail lié à ces outils. Voici une sagesse à retenir pour vous. Si vous voulez gagner de l'argent, faire ce que vous faites ne peut pas être trop facile, car tout le monde peut réunir patients pendant une semaine pour acquérir une nouvelle compétence et ils inonderont le marché du travail. Mais s'il faut six ans pour acquérir une compétence, très peu de personnes vont rester aussi longtemps. C'est pourquoi les médecins et les dentistes sont bien payés et peuvent toujours trouver un emploi. Il n'y a pas d'argent facile dans ce monde. Soit il y a de l'argent dur, soit il n'y en a pas. Nous pouvons continuer et comparer différents aspects et nous obtiendrons des gagnants différents pour différents créneaux, comme Framer qui prend le pouvoir du design par rapport facilité d'utilisation et le codage Vibe qui prend un créneau où l'on doit atteindre une complexité unique relativement rapidement Tous ces outils trouvent leur niche et se concentrent sur eux, formant les aspects en faveur de ceux qui les rendront plus forts au sein de leur niche. Les deux derniers aspects significatifs que je veux montrer sont qui ne sont peut-être pas très importants pour la plupart des gens, mais très significatifs pour le secteur de la conception Web lui-même. Qualité du transfert au client. Pouvez-vous le confier à un client qui pourra ensuite gérer lui-même le site avec facilité et professionnalisme ? Le résultat final ressemble-t-il une création d'agence sur mesure ou à un projet à faire soi-même indépendant ou agence pour vendre facilement un service de conception Web haut de gamme, ils doivent être en mesure de résoudre les problèmes du client. Je vois que les clients doivent maintenir leur site Web à jour, ils doivent créer du contenu. Ils doivent mettre à jour le texte des pages. Ils doivent créer de nouveaux articles de blog, etc. Dans WordPress, ils doivent mettre à jour ce contenu dans un panneau d'administration Clunky très compliqué et peu convivial, qui ressemble à ceci Cet environnement comporte de nombreuses pièces mobiles, plus grand nombre d'endroits sur lesquels cliquer et un risque accru pour les clients de se retrouver dans des objets qu'ils ne devraient pas toucher Désormais, dans Webflow, les clients éditent le contenu directement du côté en direct. Pas de panneaux d'administration et d'éditeurs de texte étranges. Ils modifient exactement ce qu'ils voient. Ils peuvent modifier les photos, mettre à jour le texte, sans aucun moyen pour eux de se casser le côté. Be coding, par exemple, a un mauvais compte client. n'existe pas de tableau de bord visuel permettant à un client de gérer son propre blog ou boutique sans friction technique. Ils sont pratiquement exclus de leur propre site. Webflow est la référence absolue dans cette catégorie de mashup. système de gestion de contenu véritablement utilisable de Webflow et son interface utilisateur dédiée aux rôles tels que spécialistes du marketing et les éditeurs de contenu permettent aux entreprises gérer elles-mêmes leur site Les entreprises font constamment de la promotion, créent des campagnes, des pages, des événements, lancements de produits, etc. Ils ont besoin de plus qu'un simple site Web. Ils ont besoin d'un ensemble d'outils et de fonctionnalités de back office pour gérer l'intégralité de leur expérience Web. Le juste équilibre qu'offre Webflow entre le raffinement du design, les fonctionnalités et les fonctionnalités côté client est la raison pour laquelle il est devenu le premier choix pour les agences de design et les indépendants comme moi qui opèrent sur les marchés commerciaux Cela nous a donné le pouvoir de fournir des solutions de très grande valeur aux entreprises sans quitter la plateforme. Oui, avec une petite courbe d'apprentissage et une vitesse de construction plus lente, mais ce n'est pas l'aspect qui intéresse mes clients. Je ne peux pas leur vendre une plateforme parce que c'est facile pour moi d'apprendre. C'est un problème pour moi. Ils veulent du raffinement du design, puissance et de la facilité d' utilisation de leur côté. Choisir Webflow ne signifie pas que vous ne pouvez pas utiliser la puissance du codage Vibe Webflow possède également AI Builder. Il possède en fait deux AppGen qui fonctionnent comme un générateur d'applications AI traditionnel, tout aussi puissant que les autres constructeurs, en utilisant le meilleur modèle actuel, à savoir le cloud générateur d'applications AI de Webflow présente l'avantage supplémentaire de vous permettre de connecter des composants et du contenu CMS à partir de votre site existant Chaque site comporte des composants répétés tels que des barres de navigation, des pieds de page, des formulaires d'inscription, des sections de témoignages, etc. Pouvoir les intégrer directement dans votre invite est très puissant, autant plus que ces composants et éléments de base de données sont entièrement sous votre contrôle visuel dans l'éditeur standard de Webflow Cet AI Builder étend évidemment le plafond de fonctionnalités de Webflow, et je n'en ai même pas tenu compte dans mes comparaisons précédentes Les applications et les pages créées ici ne peuvent pas être modifiées dans Webflow Designer Vous allez devoir vous y frayer un chemin comme dans n'importe quel autre pool de codes Vibe Mais le deuxième outil d'IA de Webflow, le site Builder, est capable de générer un site visuellement modifiable Cette génération sera déployée dans le concepteur de flux Web où vous pourrez l'itérer visuellement Lors de la prochaine conférence, nous allons essayer ce constructeur côté IA. Je vais donc en aborder toutes les nuances. Il existe un autre type de site que vous pouvez créer sur Webflow, sites de commerce électronique, mais nous n' allons pas les aborder dans ce cours La demande de sites de commerce électronique beaucoup plus faible que celle des sites Web ordinaires. Ma recommandation serait donc de passer à la conception et au développement Web de sites de commerce électronique une fois que vous aurez acquis une expérience professionnelle réelle suffisante avec la conception Web régulière et générale. Cela n'a aucun sens de se lancer directement dans le développement Web complexe, un peu plus complexe, qui est le commerce électronique plutôt que les sites Web ordinaires, qui sont beaucoup plus simples et beaucoup plus directs. Webflow est gratuit jusqu'à ce que vous deviez publier le site Web, puis que vous payiez pour l'hébergement Mais l'hébergement est quelque chose que chaque propriétaire de site Web doit payer, même s'il utilise une plateforme gratuite comme WordPress. Mais tu n'as pas à t'inquiéter trop ce sujet. Ce n'est pas à vos frais. Les clients payent pour l'hébergement. En conclusion, Webflow a changé ma carrière et celle de tant d'autres personnes, et il peut faire de même pour vous 3. Teaser vidéo: Le cours comporte six parties. Dans la première partie, vous découvrirez les secrets d'un bon design. Dans la deuxième partie, vous pratiquerez le design sur des projets réels. Dans la troisième partie, vous découvrirez Webflow créant la page d'accueil d'une entreprise Dans la quatrième partie, nous allons réaliser un projet client du début à la fin. Je vais vous expliquer le même processus que celui que je fais avec chaque client. Nous allons commencer par créer un wireframing puis concevoir le site Web dans Figma, puis prendre le tout en main, concevoir et développer le blog dans Webflow, pour enfin le publier et le livrer Dans la cinquième partie, vous découvrirez les secrets pour gagner de l' argent en freelance, et la sixième partie contient plusieurs didacticiels avancés, fois sur le design et sur le flux Web Dans la vidéo promotionnelle, j'ai d'abord mentionné Webflow, mais nous allons commencer ce cours par le design car tout bon projet de site Web commence par le design Tout comme tout grand bâtiment commence toujours par les plans architecturaux, puis vient le moment où nous commençons à travailler avec Webflow, n'est que dans la troisième partie de ce cours que je voulais vous donner un petit avant-goût avant de continuer Alors allez-y et ouvrez-vous sur Webflow pour que nous puissions y faire un petit tour Vous devriez déjà avoir le compte Webflow de la leçon précédente Si ce n'est pas le cas, rendez-vous sur webflow.com et inscrivez-vous. Utilisez Google Chrome. C'est le concepteur de flux Web qui fonctionne le mieux dans ce domaine. Après votre inscription, vous accéderez à une version de cette page. Nous avons trois manières de créer un site dans Webflow. L'un d'eux est celui des modèles. marché Webflow propose plus de 7 000 modèles payants et gratuits. Ils sont absolument merveilleux. Ils sont étonnamment uniques en termes de modèles. Il y a de la variété. Ils ont des animations et des interactions riches. C'est un moyen très valable pour un concepteur Web de travailler. Vous pouvez installer des modèles pour un client, les modifier, les personnaliser en fonction de leur contenu, leur image de marque, de leur activité. Et fournissez des services de maintenance et de mise à jour continus du site. Comme ces modèles sont intégrés à Webflow, vous n'êtes pas lié à un modèle Ils sont entièrement modifiables et peuvent être complètement modifiés. La deuxième approche consiste à construire avec l'IA. C'est l'un des deux constructeurs d'IA de Webflow. C'est différent de la génération d'applications que j'ai montrée précédemment, qui est un outil de codage Vibe plus traditionnel Celui-ci fonctionne comme un générateur de premier brouillon. Faisons un test rapide à celui-ci. Vous pouvez choisir votre propre invite ou utiliser la mienne. Avant de générer le site, vous allez accéder à ce type de structure de page. Il s'agit d'une petite fonctionnalité pratique que Webflow propose, contrairement à d' autres constructeurs d'IA Cela nous permet structurer notre page, pas seulement notre page, mais aussi notre site avant que l'IA ne soit générée. C'est très utile car vous n' avez généralement pas tout structuré dans votre tête avant de pouvoir le dire à NAI Ce sont donc chacune des pages. Dans ces petites boîtes, ce sont des sections. Ainsi, par exemple, si nous avons oublié d'ajouter une sorte de section, nous pouvons venir ici et penser : «   D'accord, nous avons besoin d'une autre section en bas, comme une section FAQ avant ou après le formulaire de contact. Et Webflow va proposer ces nombreux types de sections parmi lesquels nous pouvons choisir Donc, en réalité, Webflows AI Builder est à la fois une sorte d'IA, mais aussi une bibliothèque de composants et de différentes mises en page qu'il propose Cela donne donc le meilleur des deux mondes : vous n'avez pas à tout créer vous-même, mais vous pouvez également utiliser l'IA. Ainsi, par exemple, nous pouvons ajouter une FAQ en bas de page, mais d'accord, j'ai peut-être changé d'avis. Je ne le veux pas en bas. Pas de problème Je peux le faire glisser vers le haut, puis vous pouvez consulter les différentes sections ici si elles fonctionnent, si elles ne fonctionnent pas, puis vous pouvez ajouter d'autres pages. Donc, si vous souhaitez ajouter plus de pages, en réalité, il y a une limite de cinq pages. Cela ne générera pas plus de cinq pages. Ainsi, si, par exemple, vous n'avez pas besoin d' page de services ou d'une page de contact, vous pouvez supprimer celle-ci, et vous pourrez désormais créer une nouvelle page, disons, de tarification. Ensuite, Webflow générera une page de tarification pour vous. Une fois la structuration terminée, vous pouvez cliquer sur Generate SI Cela va prendre quelques minutes, laissez-moi un peu de temps. C'est bon. Nous allons donc obtenir une mise en page de cinq ou quelques pages selon la quantité que vous avez générée. Et cet endroit est en fait comme une étape avant de le transférer au designer Wilo Cette étape nous permet, avant accepter les modifications apportées par l'IA, de les modifier et de les styliser encore plus. Ainsi, par exemple, nous pouvons accéder à l'une de ces pages en cliquant sur Modifier et nous obtenons une sorte d' interface conviviale pour mettre à jour certains styles et expérimenter, et proposant différents thèmes que vous pouvez changer et compléter Cela changera de couleur. Cela changera les différents styles et couleurs de titres. Cela mettra à jour de nombreuses informations sur le site, vous donnera une idée de la structure et le contenu restera le même. Mais maintenant, les couleurs ont changé et les polices ont changé, ce qui vous donne une idée de l' apparence de tout cela dans un style différent. Chacune de ces sections est modifiable. Par exemple, si vous cliquez dessus, cela ouvrira une vaste sélection de bibliothèques de composants et de bibliothèques de mises en page , et vous aurez différentes sections sur les héros, fonctionnalités, prix des galeries, etc. Et il s'agit actuellement d'une section de héros, et vous avez de nombreuses options différentes quant la façon dont vous souhaitez personnaliser cette section de héros. Et pour les constructions rapides, c'est en fait une excellente façon d' aborder les choses, car vous n'avez pas à vous débrouiller rapidement avec l'AIS et cela vous donne un peu plus de liberté pour choisir quelque chose que vous voyez visuellement et que vous aimez, et que vous pouvez modifier Par exemple, j' aime bien ce genre de sections qui contiennent des images dans le texte. Nous pouvons le mettre à jour. Cela vous donne ici la possibilité d'échanger des styles. Vous conserverez cette section, mais elle changera les couleurs en fonction la palette déjà utilisée au sein de ce thème. La palette de couleurs peut également être modifiée à partir d'ici. Par exemple, nous pouvons opter pour une couleur un peu plus intense, plus vibrante, comme le violacé, la fleur sacrée, Et vous pouvez voir que cela vous donne de très nombreuses variations de palette de couleurs. Toutes les sections sont mises à jour. Vous pouvez utiliser des thèmes sombres. Nous pouvons également mettre à jour la topographie. Nous pouvons mettre à jour le poids de la typographie, peut-être la rendre plus audacieuse Les tailles peuvent également être modifiées et légèrement plus petites. Nous pouvons mettre à jour les styles des boutons. À l'heure actuelle, nous avons ce type de design plat. Nous pouvons opter pour un design potentiellement un peu plus schumorphe, un peu plus clasmorphique, un peu plus clasmorphique Nous pouvons ajouter de nouvelles sections à partir d'ici. Par exemple, une section consacrée au logo serait très intéressante ici. La couleur et le style peuvent être mis à jour pour différentes sections comme celle-ci. On peut changer, par exemple, cette galerie n'est pas aussi intéressante, qui est un tas de photos. Ces photos sont toutes générées par l'IA, et pour le moment, évidemment, tout a l'air très semelles et mélangés. Vous allez devoir mettre à jour le contenu, mettre à jour les images pour le rendre plus personnel. Et une fois que nous aurons terminé les modifications, les styles que nous avons appliqués, ils seront tous reportés et appliqués à toutes les pages. Comme vous pouvez le constater, les couleurs, la typographie, le style des boutons, tout a été emporté partout, ce qui est très agréable Une fois que nous aurons terminé, nous allons cliquer sur Continuer la construction, et cela nous permettra d'accéder au concepteur de flux Web Le seul problème, c'est que sur le plan gratuit, vous n'avez que deux pages, nous allons donc devoir nous débarrasser de certaines de ces pages dont nous ne voulons pas. Nous pouvons peut-être garder une page de services. Et une page d'accueil. Ensuite, nous allons terminer dans Webflow Designer. Ici, nous avons le contrôle total façon dont nous pouvons modifier notre site, résoudre les problèmes que nous avons. Par exemple, nous pouvons mettre à jour nos images. Et corrigez des problèmes tels , par exemple, dans ce cas , quelle que soit la police et la façon dont les images sont placées, elles se touchent ici, ce qui n'est pas agréable. Ils ne devraient pas se toucher, afin que nous puissions résoudre ce problème. Maintenant, cela ne va pas être facile pour vous en ce moment car vous ne savez pas comment travailler avec ce designer. Vous ne savez pas comment ces éléments, comment fonctionnent les styles, les propriétés et tout cela, mais nous allons y aller. Cela nous donne un contrôle total. De toute évidence, nous pouvons facilement mettre à jour le contenu. Selon les changements, par exemple, je préférerais que ces logos soient étalés. Une fois que vous avez compris le fonctionnement de Flexbox, vous pouvez le faire très facilement en un seul clic Et si vous avez oublié et que vous vouliez ajouter de nouvelles sections, nous pouvons toujours le faire grâce à l'IA. Ces petits boutons de génération de mise en page apparaîtront. Ensuite, par exemple, nous pouvons ajouter une section de tarification, et le gain de Webflow nous donnera de nombreuses options de tarification que nous pourrons ajouter Il adaptera le contenu à notre site Web. Et si vous rencontrez un problème ici, il peut être supprimé, oui, nous avons le contrôle total, et nous pouvons prévisualiser notre page Web à partir d' ici et voir comment tout interagit et fonctionne Les images en ce moment sont terribles, mais disons. Le site web va être réactif tout de suite, vous pouvez le tester en rétrécissant ce canevas Vous pouvez voir qu'ils s'adaptent à différentes tailles. Et vous pouvez également voir à partir d'ici les différents points de rupture tels que le mobile, la tablette, etc. Mais travailler avec un site déjà construit sera trop déroutant pour un débutant. Pour apprendre les bases de la conception Web, nous devons repartir de zéro. Retournez au tableau de bord et créez un nouveau site. Dans un avion gratuit, vous ne pouvez avoir que deux sites gratuits. Donc, si vous avez déjà atteint cette limite en jouant avec AI Builder, vous pouvez simplement archiver l'un des sites à partir d'ici. Créez un nouveau site , puis choisissez un site vide. En tant que nouvel utilisateur, vous verrez cette fenêtre contextuelle d'intégration. Vous n'avez pas besoin de passer par là, mais vous pouvez le faire si vous le souhaitez. Sur la gauche, nous avons un navigateur. Il montre la structure de la page et de tous les objets qu'elle contient. À l'heure actuelle, il n'y a qu' un seul objet, le corps. À partir de l'icône plus, nous pouvons ajouter de nouveaux éléments. Ajoutons un conteneur que nous pouvons simplement faire glisser sur le canevas. Ajoutons également un titre et un paragraphe à l'intérieur. Et écris quelque chose dedans. Centrons le texte. Nous pouvons le faire en sélectionnant le conteneur et en appuyant sur l'alignement central sous typographie Et nous allons ajouter de l'espacement pour déplacer le texte au milieu de l'écran, maintenir le conteneur sélectionné et, avec votre souris, faire glisser la poignée de rembourrage supérieure Vous pouvez passer d'un mode d'aperçu pour voir à quoi ressemble votre page en temps réel. Si vous accédez à code Export, vous verrez le code que Webflow a écrit pour nous Le code HTML montre les objets que nous avons modifiés, tels que le conteneur, le titre et un paragraphe. Et dans le CSS, vous verrez les modifications de style que nous avons apportées, le rembourrage supérieur et l'alignement central Nous pourrions exporter ce code et l'héberger n'importe où ailleurs. La page fonctionnerait parfaitement en dehors de Webflow Two. Mais ce n'est pas ce que nous allons faire dans ce cours. La meilleure option est de publier notre page sur Webflow. Passez donc à publier et cliquez sur Publier dans les domaines sélectionnés. Une fois que c'est fait, cliquez sur le lien pour ouvrir le site en ligne. Votre toute première page Web créée à partir de zéro, moche et inutile, mais toujours une page Web. Sans savoir comment concevoir, tous nos sites Web auraient l'air aussi peu attrayants que celui-ci, même si nous étions des concepteurs professionnels de Webflow La compétence en design passe toujours en premier. Nous allons donc mettre le Webflow de côté pour le moment et apprendre et pratiquer bon design, puis dans la troisième partie, revenir au Webflow afin que la magie opère et que nous puissions concevoir et créer un magnifique 4. PARTIE 1 : LES SECRETS D'UNE BONNE CONCEPTION: Je n'ai pas étudié dans une école d'art. Je ne crois pas y être déjà entrée. Ma matière préférée à l'école était les mathématiques, et je n'aimais pas dessiner. Jamais de ma vie je n' envisagerais de devenir designer. Mon ami et partenaire commercial de l'époque, qui était graphiste, fréquenté une école d'art puis était graphiste régulier. Un jour, j'ai découvert qu' il ne savait pas dessiner. Il ne savait pas dessiner. Et je lui ai jeté un regard étrange. Que voulez-vous dire par « savoir dessiner » ? Vous êtes graphiste, non ? Et il dit : «   C'est amusant, n'est-ce pas ? Il explique que pour être designer, n'est pas nécessaire de savoir dessiner. Il n'est pas nécessaire d' avoir un talent inné pour la créativité ou d'être un artiste flamboyant Le design a des règles, des techniques et des directives, et il vous suffit d' apprendre à les suivre. J'ai été choquée. Je me suis dit : « Attends une seconde ». J'ai eu l'impression de découvrir un secret incroyable que ce monde me cache. Et dans cette partie du cours, c'est exactement ce que je veux vous apprendre. Toutes ces petites astuces et directives qui donnent à quelque chose un aspect tellement conçu. Et je veux vous apprendre et vous montrer à quel point il est simple de transformer quelque chose qui n' est qu' un contenu aléatoire en une belle composition de design. Je vais vous donner des devoirs et des exercices pratiques pour que vous puissiez mettre la main à la pâte. Sale. Nous allons apprendre à utiliser un outil de design appelé Figma C'est un outil simple, et nous allons l' apprendre étape par étape, donc nous n'allons pas le transformer à l'envers. Nous apprendrons de nouvelles fonctionnalités au fur et à mesure que nous nous entraînerons à travers différents modèles. Et en fait, le design n'est pas vraiment dans l'outil. On ne devient pas graphiste ou concepteur Web simplement en apprenant Photoshop. Ou un croquis ou quoi que ce soit d'autre. Sa conception est en réalité une échelle mentale. Ce n'est pas à cela, vous savez, la créativité laquelle les gens pensent vraiment. Il y a évidemment beaucoup de créativité à l'intérieur, mais il s'agit souvent d'une compétence mentale et d'une façon de voir les choses. Un peu comme la façon dont le mécanicien regarde la voiture et entend le moteur de la voiture , puis comprend simplement en regardant quelque chose et en entendant le son où serrer les vis et où les écouter. Je vais vous enseigner cette compétence précise en matière de design. Vous pouvez donc prendre une toile vierge et en créer quelque chose de très attrayant. Quelque chose pour lequel les gens vous paieront beaucoup 5. Commencer avec Figma: Nous nous intéressons au design, commençons par configurer Figma. Ce sera un bref aperçu. Je vais vous montrer une compréhension générale du fonctionnement de l'outil et toutes les fonctionnalités importantes dont nous aurons besoin pour concevoir des sites Web dans FIGMA Je vais vous les enseigner et vous les montrer au fur et à mesure que nous étudierons le matériel et selon vos besoins. Non, tout de suite. Donc, tout d'abord, téléchargeons FigMA, non ? Nous avons deux options : Mac et Windows. Je suis sur Mac, mais l'application Windows fonctionne et se présente de la même manière. Ainsi, même sous Windows, vous pourrez suivre parfaitement mes tutoriels. Si vous utilisez Linux ou un autre système d'exploitation, ne vous inquiétez pas. Vous pouvez utiliser FigMA directement dans votre navigateur. C'est génial, mais je recommande vivement d'utiliser une application de bureau si vous en avez l'occasion. Maintenant, installons-le. Sur un MAC, il suffit de le déplacer vers le dossier des applications, et c'est tout. Je ne sais pas comment fonctionne l' installation sous Windows, mais je suis sûr que ce n'est pas première fois que vous installez une application, alors suivez le processus d' installation habituel. Il s'agit de l'écran d'enregistrement initial. Inscrivez-vous auprès de Google si vous souhaitez vous faciliter la tâche ou inscrivez-vous par e-mail. Il va vous demander de vérifier votre adresse e-mail. Tu t'appelles Waco. Quel type de travail concevez-vous ? version gratuite de Figm présente certaines limites, mais rien de crucial pour un designer indépendant Vous pouvez facilement l' utiliser gratuitement pour toujours. Et nous allons arriver sur notre page d'accueil, qui est notre navigateur de fichiers. Tous vos fichiers Figma s'afficheront ici. Figma est basé sur le cloud, vous aurez donc besoin d' Internet pour l'utiliser Vous pouvez travailler hors connexion, mais uniquement si vous chargez le fichier avant de passer en mode hors connexion. Vous pouvez ensuite travailler avec un fichier et, une fois que vous serez de nouveau en ligne, il le synchronisera et le mettra à jour. C'est bon, mais je ne recommanderais pas de le faire. Vous ne voulez pas risquer de perdre votre dur labeur. Commençons par créer un nouveau fichier. Nous pouvons le faire d'ici. Nous sommes maintenant dans l'éditeur Figma. C'est ici que tout se passe. Il n'y a pas de quoi avoir peur, c'est très simple. Les fichiers ouverts s'afficheront sous forme d'onglet, un peu comme dans votre navigateur. Et si vous souhaitez revenir à la page d'accueil pour ouvrir un autre fichier, vous pouvez le faire à partir de cette icône ici. Ou si vous travaillez depuis le navigateur, vous pouvez cliquer sur le dossier parent du fichier ici. Il indiquera des brouillons dans la plupart des cas. Mais si vous travaillez dans le cadre d'un plan d'équipe, le nom de l'équipe ou du projet peut être indiqué. Dans cette liste déroulante, vous pouvez également sélectionner Retour aux fichiers Pour revenir au fichier, il suffit de sélectionner l'onglet Ouvrir si le fichier est toujours ouvert. Mais s'il n'est pas ouvert, tous vos fichiers apparaîtront ici dans l'onglet RSNS emplacement de ces fichiers sera plus précis soit dans le dossier des brouillons, soit dans l'un des dossiers de l'équipe Mais l'équipe est une fonctionnalité payante et le plan gratuit n' autorise que trois fichiers. Donc, au cas où vous recevriez un message indiquant que vous avez atteint le nombre limite de fichiers, il ne s'agit que des fichiers de l'équipe. Dans le dossier des brouillons, vous pouvez avoir un nombre illimité de fichiers gratuits. Et en tant que freelance, le dossier des brouillons fonctionnera parfaitement pour vous Passons en revue une barre d'outils ici. Comme vous pouvez le constater, il ne dispose que d'une poignée d'outils, rien à voir avec ce que vous pourriez obtenir dans Photoshop. premier est un outil de déplacement, l'outil par défaut sélectionné la plupart du temps. Il fait exactement ce qu'il dit. Il déplace des objets et interagit avec eux. Le suivant est l'outil de cadre. Il est similaire au plan de travail que vous pouvez obtenir dans d'autres outils de conception Tous nos designs débuteront par un cadre. En fonction de ce pour quoi nous concevons, nous devons choisir une taille spécifique, l'écran pour lequel nous concevons. Donc, soit nous concevons un écran pour un ordinateur de bureau, un ordinateur portable, un iPhone, etc. S'il s'agit d'un cours de conception Web, nous concevrons pour les ordinateurs de bureau et portables. Vous pouvez le dessiner, mais la meilleure option est de choisir l'une des tailles prédéfinies. Et choisissez l'écran dans ce menu déroulant. Il existe des iPhones, des Android, des tablettes et même des couvertures Facebook Nous allons évidemment choisir l'une des tailles d'écran de bureau. Vous n'êtes pas coincé avec ces dimensions. Si vous le souhaitez, vous pouvez le redimensionner comme suit. D'ailleurs, pour ce déplacement de la toile que j'ai fait, le terme technique utilisé pour le désigner est « panoramique » Pour ce faire, je fais glisser doigt sur mon pavé tactile Si vous utilisez un ordinateur portable, vous devriez pouvoir faire de même. Si vous utilisez une souris, pouvez utiliser la molette de défilement pour vous déplacer vers le haut ou vers le bas ou maintenir la touche Maj enfoncée, et elle se déplacera vers la gauche ou vers la droite. Mais une meilleure option avec la souris serait de maintenir la barre d'espace enfoncée pour activer un outil manuel, puis de cliquer et de diriger le canevas comme vous le souhaitez. Il y a aussi le zoom que vous devrez faire de temps en temps sur un pavé tactile Encore une fois, c'est facile. Il suffit de pincer avec deux doigts exactement comme vous le feriez sur votre téléphone. Et avec la souris, vous devez maintenir une touche Ctrl ou une commande enfoncée sur Mac pendant que vous faites défiler la page. Très bien, il y a ensuite un outil de mise en forme. Lorsque vous cliquez sur une petite flèche, elle vous permet de sélectionner l'une des formes suivantes, comme un rectangle, une ligne, etc. Dessinons un rectangle. C'est la première chose sélectionnée par défaut, et sur le cadre, vous dessinez un rectangle comme celui-ci. Cliquez et faites glisser. Même logique pour les autres formes. Ensuite, nous avons un outil Pen. Ne t'en fais pas pour le moment. Nous ne l'utiliserons pas tant que ça. À côté se trouve un outil de texte. C'est assez simple. L'outil de commentaire, c' est pour la collaboration. Lorsque vous l'envoyez à votre client ou aux membres de votre équipe pour qu'ils l'examinent, ils peuvent directement commenter chaque élément, un outil très pratique. Ici, nous avons le menu Actions, qui abrite de nombreuses fonctionnalités différentes. tous les paramètres et options de Figma Vous trouverez ici tous les paramètres et options de Figma, par exemple le mode Zoom ou le mode sombre En fait, je préfère le mode lumière. Vous pouvez ouvrir le menu à l'aide raccourci Ctrl K ou Command K sur Mac. Vous pouvez réellement voir tous les raccourcis lorsque vous placez le pointeur de la souris sur chacun de ces éléments de la barre d'outils Dans le menu Actions, vous trouverez des onglets pour les actifs et les plug-ins. Les actifs sont essentiellement de petits composants que nous créons dans notre fichier, nous y reviendrons plus tard. Et les plugins et widgets créés par la communauté sont comme des mini-applications qui peuvent rendre notre travail dans Figma plus efficace et plus productif Parfois ils sont payants, parfois ils sont gratuits. Ensuite, nous avons un mode Dev, autre fonctionnalité payante qui n'est pas nécessaire pour ce cours ni pour la conception de sites Web indépendants. Il s'agit d'une fonctionnalité destinée aux développeurs. Cela facilite le processus de transfert de conception lorsque le concepteur fournit les conceptions aux développeurs pour créer une application ou une interface Web Les développeurs pourront trouver tous les éléments et informations nécessaires dans un format et un langage qui leur seront plus utiles. C'est tout ce que vous devez savoir sur la barre d'outils pour le moment. De l'autre côté, nous avons le panneau des propriétés. amusant avec le panneau des propriétés, c'est qu'il change en fonction de l'objet que vous avez sélectionné. Nous sélectionnons un rectangle et nous obtenons toutes les propriétés de ce rectangle en particulier. Lorsque nous sélectionnons du texte, nous obtenons des propriétés, une police, une taille de texte légèrement différentes , etc. Nous explorerons chacune de ces propriétés ultérieurement lorsque nous en aurons réellement besoin. Pas besoin de s' inquiéter pour eux pour le moment. Enfin, sur le côté gauche, nous avons le panneau de navigation, qui comporte quelques sections différentes. Il y a le menu principal. Vous verrez nouveau tous les paramètres et options FiCMA Nom du fichier et certaines actions du fichier. Un fichier contre un actif. s'agit des mêmes éléments que ceux que vous trouvez dans le menu situé sous les pages, car notre fichier peut contenir plusieurs pages. Et la section des couches. Chaque nouvel élément que nous créons apparaîtra ici sous des couches. Maintenant, pourquoi est-ce appelé couches, et pourquoi pas des objets ou des éléments ou quelque chose comme ça ? Parce qu'ils sont couchés l'un sur l'autre. Ils existent dans l'espace stratifié. Par exemple, si nous voulons que le cadre violet passe en dessous, suffit de faire glisser cette couche il suffit de faire glisser cette couche et de la déplacer sous le rectangle gris. Tous ces objets sont les enfants de notre cadre appelé bureau. C'est là qu'ils vivent. Et si nous déplaçons de ces objets en dehors de ce cadre, vous verrez comment le panneau des calques sera mis à jour et déplacera l'objet en dehors du cadre sur le canevas général. C'est tout ce que vous devez savoir sur Figma pour le moment. D'autres fonctionnalités apparaîtront dans tous les exercices pratiques que nous allons faire. Si vous n'avez pas suivi, arrêtez de faire une pause et allez-y, faites-le maintenant, puis passez à la leçon suivante. Si, à un moment ou à un autre de ce cours, vous êtes bloqué, ce sont de nouveaux outils, ils sont parfois mis à jour et, vous savez, différentes choses changent, et je ne suis peut-être pas aussi rapide que de mettre à jour les écrans et tout le reste. Bien sûr, je le ferai, mais, vous savez, ils évoluent très vite, tous ces outils, et ils mettent à jour les écrans et l'interface utilisateur très rapidement. Je pourrais donc vous montrer quelque chose et il se peut qu'il disparaisse soudainement. Fais-moi savoir. Je vais arranger ça. Mais si tu es bloqué, tu peux toujours m'envoyer un message ou poser une question sur les forums de discussion. Moi ou un autre étudiant vous aiderons. 6. Commencer avec Figma: Nous nous intéressons au design, commençons par configurer Figma. Ce sera un bref aperçu. Je vais vous montrer une compréhension générale du fonctionnement de l'outil et toutes les fonctionnalités importantes dont nous aurons besoin pour concevoir des sites Web dans FIGMA Je vais vous les enseigner et vous les montrer au fur et à mesure que nous étudierons le matériel et selon vos besoins. Non, tout de suite. Donc, tout d'abord, téléchargeons FigMA, non ? Nous avons deux options : Mac et Windows. Je suis sur Mac, mais l'application Windows fonctionne et se présente de la même manière. Ainsi, même sous Windows, vous pourrez suivre parfaitement mes tutoriels. Si vous utilisez Linux ou un autre système d'exploitation, ne vous inquiétez pas. Vous pouvez utiliser FigMA directement dans votre navigateur. C'est génial, mais je recommande vivement d'utiliser une application de bureau si vous en avez l'occasion. Maintenant, installons-le. Sur un MAC, il suffit de le déplacer vers le dossier des applications, et c'est tout. Je ne sais pas comment fonctionne l' installation sous Windows, mais je suis sûr que ce n'est pas première fois que vous installez une application, alors suivez le processus d' installation habituel. Il s'agit de l'écran d'enregistrement initial. Inscrivez-vous à Google si vous souhaitez vous faciliter la tâche ou inscrivez-vous par e-mail. Il va vous demander de vérifier votre adresse e-mail. Tu t'appelles Waco. Quel type de travail concevez-vous ? version gratuite de Figma comporte certaines limites, mais rien de crucial pour un designer indépendant Vous pouvez facilement l' utiliser gratuitement pour toujours. Et nous allons arriver sur notre page d'accueil, qui est notre navigateur de fichiers. Tous vos fichiers Figma s'afficheront ici. Figma est basé sur le cloud, vous aurez donc besoin d' Internet pour l'utiliser Vous pouvez travailler hors connexion, mais uniquement si vous chargez le fichier avant de vous déconnecter. Vous pouvez ensuite travailler avec un fichier et, une fois que vous serez de nouveau en ligne, il le synchronisera et le mettra à jour. C'est bon, mais je ne recommanderais pas de le faire. Vous ne voulez pas risquer de perdre votre dur labeur. Commençons par créer un nouveau fichier. Nous pouvons le faire d'ici ou d'ici. Nous sommes maintenant dans l'éditeur Figma. C'est ici que tout se passe. Il n'y a pas de quoi avoir peur, c'est très simple. Les fichiers ouverts s'afficheront sous forme d'onglet, un peu comme dans votre navigateur. Et si vous souhaitez revenir à la page d'accueil pour ouvrir un autre fichier, vous pouvez le faire à partir de cette icône ici. Ou si vous travaillez depuis le navigateur, vous pouvez cliquer sur le dossier parent du fichier ici. Il indiquera des brouillons dans la plupart des cas. Mais si vous travaillez dans le cadre d'un plan d'équipe, le nom de l'équipe ou du projet peut être indiqué. Dans cette liste déroulante, vous pouvez également sélectionner Retour aux fichiers Pour revenir au fichier, il suffit de sélectionner l'onglet Ouvrir si le fichier est toujours ouvert. Mais s'il n'est pas ouvert, tous vos fichiers apparaîtront ici sur le RSNSTab emplacement de ces fichiers sera plus précis soit dans le dossier des brouillons, soit dans l'un des dossiers de l'équipe Mais l'équipe est une fonctionnalité payante et le plan gratuit n' autorise que trois fichiers. Donc, au cas où vous recevriez un message indiquant que vous avez atteint le nombre limite de fichiers, il ne s'agit que des fichiers de l'équipe. Dans le dossier des brouillons, vous pouvez avoir un nombre illimité de fichiers gratuits. Et en tant que freelance, le dossier des brouillons fonctionnera parfaitement pour vous Passons en revue une barre d'outils ici. Comme vous pouvez le constater, il ne dispose que d'une poignée d'outils, rien à voir avec ce que vous pourriez obtenir dans Photoshop. premier est un outil de déplacement, l'outil par défaut sélectionné la plupart du temps. Il fait exactement ce qu'il dit. Il déplace des objets et interagit avec eux. Le suivant est l'outil de cadre. Il est similaire au plan de travail que vous pouvez obtenir dans d'autres outils de conception Tous nos designs débuteront par un cadre. En fonction de ce pour quoi nous concevons, nous devons choisir une taille spécifique, l'écran pour lequel nous concevons. Donc, soit nous concevons un écran pour un ordinateur de bureau, un ordinateur portable, un iPhone, etc. S'il s'agit d'un cours de conception Web, nous concevrons pour les ordinateurs de bureau et portables. Vous pouvez le dessiner, mais la meilleure option est de choisir l'une des tailles prédéfinies. Et choisissez l'écran dans ce menu déroulant. Il existe des iPhones, des Android, des tablettes et même des couvertures Facebook Nous allons évidemment choisir l'une des tailles d'écran de bureau. Vous n'êtes pas coincé avec ces dimensions. Si vous le souhaitez, vous pouvez le redimensionner comme suit. D'ailleurs, pour ce déplacement de la toile que j'ai fait, le terme technique utilisé pour le désigner est « panoramique » Pour ce faire, je fais glisser doigt sur mon pavé tactile Si vous utilisez un ordinateur portable, vous devriez pouvoir faire de même. Si vous utilisez une souris, pouvez utiliser la molette de défilement pour vous déplacer vers le haut ou vers le bas ou maintenir la touche Maj enfoncée, et elle se déplacera vers la gauche ou vers la droite. Mais une meilleure option avec la souris serait de maintenir la barre d'espace enfoncée pour activer un outil manuel, puis de cliquer et de diriger le canevas comme vous le souhaitez. Il y a aussi le zoom que vous devrez faire de temps en temps sur un pavé tactile Encore une fois, c'est facile. Il suffit de pincer avec deux doigts exactement comme vous le feriez sur votre téléphone. Et avec la souris, vous devez maintenir une touche Ctrl ou une commande enfoncée sur Mac pendant que vous faites défiler la page. Très bien, il y a ensuite un outil de mise en forme. Lorsque vous cliquez sur une petite flèche, elle vous permet de sélectionner l'une des formes suivantes, comme un rectangle, une ligne, etc. Dessinons un rectangle. C'est la première chose sélectionnée par défaut, et sur le cadre, vous dessinez un rectangle comme celui-ci. Cliquez et faites glisser. Même logique pour les autres formes. Ensuite, nous avons un outil Pen. Ne t'en fais pas pour le moment. Nous ne l'utiliserons pas tant que ça. À côté se trouve un outil de texte. C'est assez simple. L'outil de commentaire, c'est pour la collaboration. Lorsque vous l'envoyez à votre client ou aux membres de votre équipe pour examen, ils peuvent directement commenter chaque élément, un outil très pratique. Ici, nous avons le menu Actions, qui contient de nombreuses fonctionnalités différentes, tous les paramètres et options Figma que vous pouvez trouver ici, par exemple le mode Zoom ou le mode sombre En fait, je préfère le mode lumière. Vous pouvez ouvrir le menu à l'aide raccourci Ctrl K ou Command K sur Mac. Vous pouvez réellement voir tous les raccourcis lorsque vous survolez chacun de ces éléments de la barre d'outils Dans le menu Actions, vous trouverez des onglets pour les actifs et les plug-ins. Les actifs sont essentiellement de petits composants que nous créons dans notre fichier, nous y reviendrons plus tard. Et les plugins et widgets créés par la communauté sont comme des mini-applications qui peuvent rendre notre travail dans Figma plus efficace et plus productif Parfois ils sont payants, parfois ils sont gratuits. Ensuite, nous avons un mode Dev, autre fonctionnalité payante qui n'est pas nécessaire pour ce cours ni pour la conception de sites Web indépendants. Il s'agit d'une fonctionnalité destinée aux développeurs. Cela facilite le processus de transfert de conception lorsque le concepteur fournit les conceptions aux développeurs pour créer une application ou une interface Web Les développeurs pourront trouver tous les éléments et informations nécessaires dans un format et un langage qui leur seront plus utiles. C'est tout ce que vous devez savoir sur la barre d'outils pour le moment. De l'autre côté, nous avons le panneau des propriétés. amusant avec le panneau des propriétés, c'est qu'il change en fonction de l'objet que vous avez sélectionné. Nous sélectionnons un rectangle et nous obtenons toutes les propriétés de ce rectangle en particulier. Lorsque nous sélectionnons du texte, nous obtenons des propriétés légèrement différentes. Police, taille du texte, etc. Nous explorerons chacune de ces propriétés ultérieurement lorsque nous en aurons réellement besoin. Pas besoin de s' inquiéter pour eux pour le moment. Enfin, sur le côté gauche, nous avons le panneau de navigation, qui comporte quelques sections différentes. Il y a le menu principal. Vous verrez à nouveau tous les paramètres et options FiCMA. Nom du fichier et certaines actions du fichier. File contre Asset Stab. s'agit des mêmes éléments que ceux que vous trouvez dans le menu situé sous les pages, car notre fichier peut contenir plusieurs pages. Et la section des couches. Chaque nouvel élément que nous créons apparaîtra ici sous des couches. Maintenant, pourquoi est-ce appelé couches ? Et pourquoi pas des objets ou des éléments ou quelque chose comme ça ? Parce qu'ils sont couchés l'un sur l'autre. Ils existent dans l'espace stratifié. Par exemple, si nous voulons que le cadre violet passe en dessous, suffit de faire glisser cette couche il suffit de faire glisser cette couche et de la déplacer sous le rectangle gris. Tous ces objets sont les enfants de notre cadre appelé bureau. C'est là qu'ils vivent. Et si nous déplaçons l'un de ces objets en dehors de ce cadre, vous verrez comment le panneau des calques sera mis à jour et déplacera l'objet en dehors du cadre sur le canevas général. C'est tout ce que vous devez savoir sur Figma pour le moment. D'autres fonctionnalités apparaîtront dans tous les exercices pratiques que nous allons faire. Si vous n'avez pas suivi, arrêtez de faire une pause et allez-y, faites-le maintenant, puis passez à la leçon suivante. Si, à un moment ou à un autre de ce cours, vous êtes bloqué, ce sont de nouveaux outils, ils sont parfois mis à jour et les choses changent, et je ne suis peut-être pas aussi rapide que de mettre à jour les écrans et tout le reste. Je le ferai évidemment, mais ils se déplacent très vite, utilisent ces outils et mettent à jour les écrans et l' interface utilisateur très rapidement. Je pourrais donc vous montrer quelque chose et il se peut qu'il disparaisse soudainement. Fais-moi savoir. Je vais arranger ça. Mais si tu es bloqué, tu peux toujours m'envoyer un message ou poser une question sur les forums de discussion. Moi ou un autre étudiant vous aiderons. 7. La mise en page est roi: jetez un oeil à cette conception de section héros. Ce design n'est pas mauvais du tout, mais il y a une chose qui ne va pas. Voyez si vous pouvez remarquer individuel. Chaque élément est la conception variable, mais la composition ensemble regarder un peu hors avant étaient de dessiner des lignes sur les bords de chaque élément, vous verrez que les éléments ne sont pas vraiment alignés. Réparer cela est assez facile. On ment juste. Les choses sont autant que nous pouvons. Une simple astuce. Changer le même design, regardant de maladroit, orteil, ordonné et poli. Maintenant, si je devais dessiner des lignes sur les bords, vous verrez une note simpliste avec deux accès verticaux principaux. Pourquoi aligner des objets fait-il mieux paraître une composition ? C' est exactement la même raison pour laquelle cette pièce est meilleure que cette pièce. C' est l'ordre. Nous évitons le chaos et cherchons l'ordre, et tout ce qui est ordonné, symétrique et organisé sera perçu comme plus beau que tout ce qui est chaotique et désordonné. Certaines des règles de conception les plus importantes concernent la mise en page. C' est une question de savoir où mettre les choses, comment les organiser, ce qui vient après quoi et les leçons à venir parleront de toutes les techniques de conception et les règles liées à la mise en page. Celui-ci concerne l'alignement, probablement l'une des règles de conception les plus simples, les plus basiques, mais l'une des règles de conception les plus puissantes. Juste un simple alignement peut rendre quelque chose conçu. D' autre part, le désalignement fera paraître un travail bâclé et amateur. Combien de développeurs Web qui n'ont pas d'arrière-plan dans la conception vont simplement déposer des éléments de la page au hasard où ils s'intègrent. Cela rend une page désordonnée et pas attrayante du tout, mais nous prenons toutes les chances d'aligner les objets les uns avec les autres. Ensuite, nous créons quelque chose qui semble statique, plus attrayant. Il y a six façons d'aligner les objets vers la gauche. C' est la façon la plus naturelle des choses de doublure. Parce que la façon dont nous lisons les langues occidentales de gauche à droite, il est le plus naturel à nos yeux de commencer à chercher des objets à partir du coin supérieur gauche. Ensuite, vous avez l'alignement central. Ceci est souvent vu dans les armes en dernier dans la conception d'impression. Si vous concevez pour un lapin, hébreu et d'autres langues à droite laisser que la plupart de l'alignement naturel serait des encoches d'alignement droit pour la taxe. Mais pour d'autres objets à et il y a trois façons similaires orteil les objets linéaires sur l' axe horizontal. Alignement central de la ligne supérieure à nouveau, mais les axes horizontaux et l'alignement inférieur. Presque vieux logiciel de conception aura des boutons d'action d'alignement, et ils utiliseront ces icônes exactes pour représenter ege Feed mes utilise trois cycles à, et je vais vous montrer où ils sont. Dans cet exemple, vous pouvez voir cela avec des objets de ligne sur leurs bords gauche. L' alignement est la première portée pour une bonne couche. Lorsque vous commencez à aligner les choses, vous verrez que la mise en page commence à former une sorte de structure. C' est ce qu'on appelle le Grand. C' est la façon d'organiser les éléments sur la page pour les mettre dans une structure reconnaissable. Mais quel design aime vraiment la cupidité qui est divisée en tailles égales ? Donc, si nous devions dessiner huit égaux avec des colonnes qui sont espacées uniformément et nous avons pris tous nos objets et les aligner avec ces colonnes, alors nous obtiendrions une mise en page qui se sent tellement plus équilibrée et conçue. Et la dernière étape de ce processus est de réutiliser les mêmes valeurs autant que possible. Le gaz vertical entre les objets est de 30 pixels, mais l'écart horizontal est de 60 pixels. Le bon geste ici serait de faire de cet écart horizontal 30 également. Maintenant, nous avons une mise en page vraiment équilibrée. Pourquoi coller la cupidité si importante ? Cela donne au public le sens de la clarté. Les accords ne sont pas bien établis, vous savez, ils sont implicites. Et là ça et le public le ressent en quelque sorte. Et quand Ah, quelque chose semble prévisible et familier et à cause de la croyance répétée, le public et le spectateur feront davantage confiance au site Web, et ils comprendront. Et ils savent que c'est le site qu'il ne va pas perdre leur temps. La règle du groupe est flexible sur toujours la conception à l'intérieur du grand Parfois, je le fais. Parfois, j'ignore huit. Parfois, j'ai accepté. Et puis, vous savez, je laisse les choses sortir parfois des contraintes sur les gars savoir beaucoup de designers exactement les mêmes, ce qui est, vous savez, ils pourraient ne pas l'utiliser, saluer complètement ou ils pourraient l'avoir d'une manière ou d'une autre. Mais, vous savez, utiliser plus de manière flexible. Mais pour vous, au début, je veux que vous utilisiez la cupidité parce que pour les débuts et quand vous apprenez à concevoir juste façon vraiment incroyable comment un peu enraciné cette grande habitude de conception à l'intérieur de vous, puis plus tard, vous pouvez et ne pouvez pas aller à ce sujet d'une façon un peu plus souple. Nous allons faire un exercice d'entraînement après cette leçon, et je vais vous montrer comment créer facilement un accord Inside Sigma et comment Teoh conçoit dans la grille. La plupart des règles de conception que nous allons parler dans ce cours peuvent être enfreintes, bien que si nous enfreignons une règle de conception, nous devons faire avec une intention, parce que si nous ne le faisons pas avec une attention dans laquelle nous ne sommes pas vraiment penser à, il, probablement été bâclée. Un design très commun Lee à utiliser dans la conception Web est un lee central, qui ne tombe pas vraiment sous une grille appropriée. Jetons un coup d'oeil à cet exemple. n'y a pas de grille proéminente sur cette section que les artistes libèrent, et les éléments au milieu ne créent aucune sorte de grille. Cependant, il semble toujours bon et n'a pas l'air bâclé du tout parce qu'il y a au moins un alignement. Vous pouvez briser la cupidité, mais il peut vraiment briser l'alignement. Nous pouvons sentir les éléments de thèse de ligne verticale imaginaire sont alignés avec la conception d'impression, l'alignement du centre rarement utilisé. Cependant, contrairement à l'impression, le site Web peut être consulté sur des centaines de tailles d'écran différentes n'importe où à partir d'un petit bout de smartphone. Un grand écran de télévision. En raison de ces avantages sont devenus sensibles. Le contenu peut se rétrécir ou se développer, en fonction de l'écran affiché sur l'impression. Le concepteur allait mouler les éléments à son absolu. Étaient Tout ce qui est imprimé n'allait pas changer de forme ou de taille. Donc vous savez qu'il obtiendrait un résultat optimal. C' est pourquoi vous voyez la mise en page folle dans les magazines, mais pas dans le Web. Donc c'est l'alignement et la cupidité en théorie. Ensuite, nous allons pratiquer l'alignement dans Great afin que vous puissiez le faire dans le cadre de votre processus de conception . 9. Devoirs : Alignement et grille rid: Dans cette vidéo, vous allez pratiquer l'alignement. Vous allez créer un design très simple dans Figma, et vous allez le soumettre dans le cadre d'un devoir Ensuite, c'est une vidéo de suivi, alors lancez votre Figma D'accord, nous n'allons donc rien concevoir d'utile. Le but de cet exercice est de pratiquer l'alignement et d'acquérir de l'expérience pratique avec Figma Nous allons esquisser une section héros d'une page Web, parfois aussi appelée en-tête ou au-dessus du pli. Nous n'allons rien faire d' extraordinaire, pas d'images, pas de texte, juste un tas de rectangles, peu comme un gribouillage Alors, quelle est la première chose que nous insérons lorsque nous commençons un design ? C'est exact. Châssis. Comme indiqué dans le didacticiel Figma, nous pouvons ajouter un cadre en sélectionnant l'outil cadre, puis en sélectionnant l'un des préréglages dans le panneau des propriétés. Nous allons sélectionner le châssis du bureau. Ensuite, nous allons définir notre grille pour ce cadre. Pourquoi ? Parce que nous voulons structurer notre site Web manière à ce qu'il soit propre et organisé. La configuration d'une grille dans Figma est très simple. Les grilles s'appliquent à chaque cadre individuellement, nous devons donc sélectionner le cadre, et dans le panneau des propriétés, nous aurons une option pour ajouter une nouvelle grille de mise en page N'oubliez pas de sélectionner le cadre, sinon celui-ci ne s'affichera pas. Par défaut, nous obtenons cette grille bidimensionnelle qui divise un cadre en petits carrés de dix pixels, mais ce n'est pas la grille que nous voulons. Ce que nous voulons, c'est une grille verticale qui divise la page en plusieurs colonnes. La grille de mise en page la plus utilisée dans la conception Web est la grille à 12 colonnes. Pourquoi 12 colonnes parce que ça divise très bien. 12 étant un multiple de trois et quatre, 12 colonnes peuvent être divisées en deux avec six colonnes de chaque côté. Il peut être divisé en trois chaque partie ayant une largeur de quatre colonnes, ou il peut être divisé en quatre, chaque partie ayant une largeur de trois colonnes. Les autres grilles de mise en page offriront moins d'options. Par exemple, une grille à dix ou huit colonnes peut être divisée en trois tailles égales, ce qui est très limitatif. Appliquez une grille de 12 points dans le menu déroulant, sélectionnez les colonnes dans le décompte, tapez la broche 12 Ajustons maintenant un peu l' espacement de notre grille. Le contenu du site Web n'est généralement pas présenté sur les bords. Il y a des marges sur les bords de tout site Web et le contenu est disposé au centre. Nous pouvons appliquer ces marges à notre grille ici même. Quelque chose comme 140 pixels devrait suffire. Si nous augmentons la marge, vous pouvez voir comment les colonnes commencent à se rétrécir. Une autre chose que j' aime ajuster ici est l'espacement entre les colonnes C'est ce qu'on appelle la gouttière. Par défaut, c'est 20 pixels, mais pour moi, ce n'est pas suffisant. J'aime créer une séparation un peu plus rapide entre les objets autour de 30 ou 40 pixels Très bien, c'est notre réseau. J'aimerais que vous créiez exactement la même grille avec les mêmes valeurs. C'est ici que nous allons présenter le contenu de notre site Web. La grille est une superposition. Vous ne pouvez pas le sélectionner avec votre souris, et nous pouvons afficher ou masquer la grille à partir d'ici. Il y a un raccourci à côté. Cela s'affiche pour Mac, c' est-à-dire Control G. Sur Windows, c'est probablement autre chose, mais vous pourrez le voir si vous êtes sous Windows. Et c'est là que va aller notre design. Ensuite, je veux donner à ce cadre une couleur de fond sans raison particulière, juste pour le fun. Comment s'y prend-on ? N'oubliez pas que pour tout objet que vous souhaitez modifier, vous devez d'abord le sélectionner. Le panneau des propriétés se met à jour instantanément lorsque vous le sélectionnez, et nous avons maintenant une option ici pour changer la couleur d'arrière-plan. Il s'agit d'un sélecteur de couleur très standard que vous pouvez voir sur presque toutes les autres applications de design ou non liées au design Plus tard, nous apprendrons la couleur plus en détail, et je vous montrerai également comment utiliser ce sélecteur de couleur comme un pro Vous pouvez choisir la couleur que vous préférez ou la garder blanche si vous le souhaitez. Si vous utilisez la couleur de fond et le contraste de la grille n' est pas bon, vous pouvez toujours ajuster la couleur de la grille. Tu vois, c'est bien mieux. Commençons maintenant par présenter quelques éléments généraux que nous aurions sur un site Web standard. N'oubliez pas que nous ne faisons qu' un filaire très simple, nous allons donc utiliser uniquement des rectangles Qu'est-ce que nous avons en haut de chaque site Web ? Une barre de navigation, qui contient généralement un logo et des liens vers différentes pages sur le côté. Dessinons un rectangle. Ce sera notre barre de navigation. Vous m'entendrez parfois utiliser un mot barre de navigation comme abréviation de barre de navigation. OK. J'aime être précis, alors je vais changer la hauteur de ce rectangle à 70 pixels à partir d'ici. Le H est une valeur pour la hauteur et le W est la valeur pour la largeur. Voici un petit conseil. Si vous appuyez sur les flèches de votre clavier vers le haut ou vers le bas, alors que vous êtes dans ce champ, vous pouvez augmenter ou diminuer les valeurs de cette manière. Et si vous maintenez la touche Shift enfoncée en même temps, au lieu d'augmenter la valeur d'un pixel, elle l'augmentera de dix pixels. OK, donnons à cette barre de navigation une couleur légèrement plus foncée. Donc, une fois de plus, si nous voulons ajouter un objet, nous le sélectionnons, et nous aurons toutes les propriétés dans le panneau ici, et nous pourrons changer la couleur du champ de ce rectangle à partir d'ici. Je vais le rendre noir, mais nous allons le rendre transparent. Ce curseur modifie ici la transparence de la couleur. C'est ce que l'on appelle communément opacité. Vous avez probablement déjà entendu ce terme. Vous pouvez également définir l'opacité à partir de cette zone de pourcentage. Réglons-le à 20 %. Il s'agit d'une petite astuce de design pour conserver la même palette de couleurs. Vous pouvez utiliser des couches noires ou blanches semi-transparentes Par conséquent, la couleur d'arrière-plan s'y répand et vous obtenez une couleur qui fait partie de la même palette de couleurs. Dessinons ensuite un logo sur le côté gauche. Nous allons dessiner un rectangle comme espace réservé au logo. C'est là que la grille commence à entrer en jeu. Lorsque nous commençons à dessiner des objets, nous allons les placer dans ces colonnes de la grille. Nos options sont soit de le placer dans une colonne, deux colonnes, trois, etc. Pour notre logo, nous avons la possibilité d' opter pour une ou deux colonnes. Allons-y avec deux. La grille simplifie considérablement notre processus de décision. Il suffit de choisir entre deux tailles au lieu de choisir entre des centaines de tailles de pixels différentes. Lorsque vous redimensionnez des objets, vous verrez les guides intelligents qui apparaissent lorsque votre objet s'aligne sur le bord de la colonne de la grille vous aider à les dimensionner Et changeons de couleur. La couleur dépend de vous. Une autre chose que je veux faire est de créer ce rectangle arrondi. Pour ce faire, nous devons modifier ce que l'on appelle un rayon d'angle. Je le veux complètement arrondi. Cette valeur dépend dimensions du rectangle, il suffit donc de l' augmenter jusqu'à ce qu' il soit complètement arrondi. Peu importe si vous obtenez une valeur très étrange. C'est notre espace réservé au logo. Nous avons maintenant besoin de liens de navigation. Je vais juste dupliquer cette boîte. Vous pouvez le faire de plusieurs manières. Les méthodes les plus évidentes pour accéder à Control C, Control V ou Command C, Command V sur Mac. Cela va le coller juste en haut, puis vous pourrez le faire glisser à partir de là. Mais ma méthode préférée pour dupliquer quelque chose est d'appuyer sur la touche ou sur Option sur Mac , puis de faire glisser cet objet. Cela va dupliquer l'objet d'origine. Réduisons ce pixel beige et rangons-le dans une seule colonne pour qu' il ressemble un peu plus à un lien. Maintenant, faisons-en glisser quelques autres et alignons-les sur des colonnes. Les guides rapides rouges vous aident à vous aligner. Cependant, Figma peut également effectuer l'alignement pour vous. Nous devons d'abord sélectionner les objets que nous alignons. Vous pouvez simplement faire glisser le curseur autour de vos objets. Nous pouvons maintenant aligner ces objets avec l'une de ces options. Vous pouvez probablement reconnaître les formes de la leçon précédente. La première option alignera les objets vers la gauche, mais ce n'est pas ce que nous voulons. Nous voulons que cette option centre les objets horizontalement. Et c'est vrai, c'est notre barre de navigation. Passons maintenant au reste du contenu. OK, qu'avons-nous notre section consacrée aux héros ? Un titre, c'est vrai. Encore une fois, dupliquons ce rectangle et faisons-le ressembler davantage à un titre Après le titre, nous avons généralement un paragraphe expliquant l' entreprise ou le produit Dessinons un petit quelque chose qui ressemble à un paragraphe. C'est bon. C'est notre espace réservé aux paragraphes Et après le paragraphe, nous avons généralement des boutons nous demandant de nous inscrire, d'en savoir plus, etc. Et c'est notre section consacrée aux héros. Voyons à quoi cela ressemble sans la grille. Voilà, un exercice très simple pour vous familiariser avec Figma et pour vous familiariser avec les premières étapes de la conception de sites Web Nous n'avons rien créé d'utile, mais nous avons franchi une étape très importante. Jeff Pesos, le PDG d' Amazon, aime ce dicton latin étape par étape avec férocité C'est ainsi que nous allons aborder ce cours. Nous allons faire un pas à la fois pour atteindre le but final avec acharnement. 10. Mise en page : importance de l'arche visuelle: rencontrer des liens voitures dot com l'un des sites les plus terrifiants que j'ai jamais vu. Qu' est-ce que cela rend certains sites si hilaramment terribles ? Et ce qui rend d'autres looks bien conçus déjà couverts ? La première grande raison que l'alignement de cette page déteste l'alignement de son allié anti. La deuxième grande raison est une hiérarchie visuelle. Chaque objet de cette page abandonnée exige notre attention en même temps. Nous ne savons pas où voir où commencer notre voyage, et cela peut être tellement accablant que nous préférons fermer la page. Maintenant, cette page il y a une hiérarchie visuelle très forte. Quelle est la première chose que vous avez regardée ? Probablement soit cet art funky, coloré sur le trajet, soit le titre. Puis vient le reste des éléments, un par défaut. Ces compositions nous ont pris par la main et nous ont guidés étape par étape sur ce qui était l'information la plus importante d'abord et deuxième et ainsi de suite. Regardez les deux boutons. Il y a une hiérarchie claire, même entre eux. Évidemment, le bouton complet est l'Alfa Doc. C' est ce qu'on appelle un rocher visuel, et c'est un principe fondamental d'un bon design. hiérarchie visuelle a beaucoup à faire. La façon dont notre attention fonctionne. Nous ne pouvons tout simplement pas nous concentrer sur plus d'une chose à la fois. Cela est particulièrement vrai en dehors de notre vision. La seule très petite fraction de ce que nous voyons est une haute définition. Le reste est un périphérique de basse résolution, er, flou périphérique. Faites ceci, faites un signe pouce vers le haut, mettez votre main devant vous et regardez directement votre miniature. Et ce petit quelque clou est la haute définition est la seule haute définition que vous voyez le reste hors. Il est faible rez et assez floue. La hiérarchie dans la conception commence par un point focal. Tom Hanks assis sur le banc est la cible visuelle indéniable de cette affiche. C' est le Hank le plus intéressant. Pensez à un point focal comme un projecteur sur une scène. Vous voyez comment cette étape n'est pas en fin de compte. C' est sombre et le plus ancien, mais les lignes brillent sur Michael Jackson, qui en fait le point focal évident à ce stade. S' ils avaient la scène complètement menti, alors tout le reste serait visible. Mais ce n'est pas leur but. Notre intérêt visuel est évidemment sur Michael, et les scénographes ont fait en sorte de donner au public exactement que nous pourrions Ce design ce graphisme gars le point focal de cette composition ? C' est le héros principal. C' est exactement pourquoi nous sommes pour deux que le graphique principal sur les pages. Le coup de héros a été Faire un peu d'auto-critique sur l'un de mes premiers travaux cette page de prêt qui a construit pour une agence immobilière. Je grince un peu quand je vois une erreur de conception dans le Sud mon travail précoce. Mais qu'est-ce que tu vas faire ? C' est le processus d'apprentissage. Le méchant clair de ce travail est certainement un manque de hiérarchie visuelle appropriée. Les formes en quelque sorte de ces essayant sans succès d'être le point focal. Cependant, ce n'est pas censé être au-dessus de cet Irak. Ce n'est pas le message principal de cette page. Alors comment se fait-il d'essayer de voler autant d'attention quand il y a une grande image de fond comme celle-ci ? D' habitude, c'est parce que nous voulions être le héros pour que le public commence là, mais ce n'est pas le cas ici. C' est sombre, de mauvaise qualité, et ce n'est pas clair ce qui se passe dans l'image. Sans oublier comment la formidable forme et les taxes qui s'en dégagent se demandent. Que fait cette image ? Terrible ensemble ? Il n'a aucune valeur. C' est juste ajouter plus de bruit à la composition. Jouer fond serait une énorme amélioration à cela. même chose avec la copie. n'y a pas de hiérarchie claire. Il est difficile de dire où le titre et le paragraphe commencent, parce qu'ils sont si semblables et de style quand on voit un bon design, souvent c'est une hiérarchie visuelle qui contribue à sa beauté. Qu' est-ce qu'il y a eu un site web ou un avocat composé appelé Vinson Schwartz. Quelle est la chose la plus importante sur cette page ? Facile. Le fait qu'il soit avocat à Boston ou c'est son propre dossier ? Ou c'est sa photo qu'on ne connaît pas ? Parce qu'il n'y a pas de hiérarchie. Tout ressemble à, Eh bien, on ne peut pas vraiment suivre le récit. C' est une toute autre histoire. C' est une amélioration à 100%, et je n'ai pas fait grand-chose. J' ai utilisé quelques astuces de conception pour créer une hiérarchie claire entre les objets, et je vais vous apprendre tout sur ces astuces plus tard dans cette partie du cours, afin que vous puissiez prendre quelque chose qui ressemble à un amateur, en plaçant des éléments sur la page au hasard et le transformer en guerre bien poli que vous pouvez être payé vraiment bien pour. Décomposer le classement élevé ici. Avons-nous un point focal ? Évidemment, c'est la photo de Vincent et comment le reste du haut est réglementé ? La seconde et l'importance ? Je dirais la balise de nom parce que c'est proche du point focal. Ça en fait partie. Ainsi, le spectateur va jeter un coup d'œil sur l'image et le nom en un rapide oh que le titre Bold All Caps . Quatrième est en fait le bouton avant la taxe parce que c'est ah, objet plus grand avec un peu d'espace blanc autour d'elle. Et enfin, ce haut avait du texte. Alors qu'est-ce que j'ai fait ici pour créer cette hiérarchie visuelle ? Comment ça se fait ? Et presque pas de hiérarchie ? Mais cela a un point vocal très distinctif et une hiérarchie visuelle clairement définie parmi les éléments croient que cela a à voir avec les tailles et les poids ou les éléments. La taille et le poids sont ce qui définit habituellement la hiérarchie. Il y a aussi d'autres façons, comme le contraste des cols ou des images qui attirent beaucoup d'attention et ainsi de suite. Mais les concepteurs s'appuient principalement sur la taille et le poids d'abord. Ce que j'ai fait était d'augmenter la taille de la photo. J' en ai fait le plus gros élément. C' est ça. Quel que soit le plus grand sur l'écran attirera le plus d'attention. C' est aussi simple que ça. Le rectangle violet derrière l'image attire également plus d'attention sur la photo. Sans elle, je devrais rendre la photo beaucoup plus grande. Ensuite, j'ai défini la hiérarchie entre le paragraphe titre et le bouton. J' ai fait le titre Big, Bold et tous les casquettes. Non seulement Up a rendu la taille amusante beaucoup plus grande que l'original, mais aussi fait extrêmement boule le. audace est ce que je qualifie souvent d'élément de poids. Ça a l'air lourd dans les familles de téléphone. Vous verrez même le style appelé Habit. Le paragraphe sous le titre est beaucoup plus petit que le titre. C' est comme David et le go Hyah ! C' est une attente téléphonique régulière, petites casquettes et petite taille de téléphone et le bouton que j'ai fait transparent avec seulement les bordures. Ceci est communément connu sous le nom de bouton fantôme. Vous ne voulez généralement pas l'utiliser comme bouton principal, mais pour les actions secondaires et dans les cas où vous voulez en diminuer l'importance. C' est un bon usage. Et enfin, j'ai utilisé un alignement de pâte pour le contenu avant qu'il ne soit tout simplement centré au milieu. Je ne ouvre votre alignement central, mais souvent il ne fait pas un bon travail et rendre le design look polir et organisé l' alignement gauche avec convenu fait certainement un meilleur travail comme un exercice amusant. Je veux que vous fassiez attention aux dessins qui vous entourent. Faites attention aux panneaux d'affichage et affiches, dépliants que les gens vous donnent et évidemment les sites Web. Et regardez, si le concepteur avait utilisé une bonne hiérarchie visuelle ou non, et ensuite, nous allons pratiquer la hiérarchie, rester autour. 11. Devoirs : hiérarchie visuelle: Dans cette vidéo, nous allons nous entraîner à la hiérarchie visuelle. Nous allons prendre le contenu du site Web de cet avocat et appliquer ce que nous avons déjà appris sur la hiérarchie visuelle et l'alignement, puis le mettre en pratique et l'appliquer à notre exemple. C'est une vidéo de suivi, alors allumez votre Figma Accédez au fichier Figma que j' ai lié dans les ressources. Les fichiers liés devraient automatiquement créer une copie dans votre compte une fois que vous vous connectez. S'il se trouve à côté du nom du fichier, il est indiqué en lecture seule ou verrouillé. Cela signifie qu'il n'a pas été dupliqué. Vous devez créer une copie du fichier avant de pouvoir le modifier. À côté du nom du fichier, cliquez sur la flèche et sélectionnez Dupliquer dans vos brouillons Cela créera une copie du fichier dans votre compte Figma, et vous pourrez modifier le fichier comme vous le souhaitez Maintenant, refaisons ce design. Nous devons simplement appliquer ce que nous avons déjà appris jusqu'à présent. Vous verrez comment la réflexion sur la hiérarchie et l'alignement va prendre en charge la majeure partie de la conception pour nous. Commençons par notre réseau. Tu te souviens comment l'ajouter ? Nous devons d'abord sélectionner le cadre, puis l'option de grille de mise en page apparaîtra dans le panneau des propriétés. Comme la dernière fois, les colonnes ont une largeur de 12 à 30 pixels, mais une marge de 60 pixels cette fois, car nous utilisons un cadre plus petit pour MacBook au lieu de l'ordinateur de bureau La barre de navigation s'adapte parfaitement aux bords de cette grille car c'est exactement ce que j'utilisais lors de la conception de la barre de navigation Pour cette raison, nous pouvons laisser la barre de navigation dans sa position. Vous verrez que les liens de la barre de navigation ne s'alignent pas sur les colonnes de la grille, mais ce n'est pas grave. Comme je l'ai déjà dit, la grille est une ligne directrice et non une règle contraignante. Nous n'avons pas toujours besoin de le prendre au pied de la lettre. Si nous alignons le bouton et les liens vers les colonnes, dans ce cas, nous n' obtiendrons pas les meilleurs résultats. Par exemple, une colonne est trop petite pour le bouton et deux colonnes sont trop grandes. Réfléchissons à la hiérarchie visuelle. Rappelez-vous quel est le nom de l' objet le plus intéressant visuellement, le point focal. Utiliser la photo comme point focal est une bonne idée. Lorsque vous avez des photos, en particulier de personnes, c'est généralement une bonne idée d' en faire le point central. Alors, comment s'y prendre ? La dernière fois, j'ai utilisé quelques astuces pour attirer davantage l'attention sur ce point, mais nous pouvons faire plus simplement que cela. Le rendre très grand fonctionne toujours. Si tu veux que quelque chose soit remarqué, fais-en un gros bébé. C'est aussi simple que ça. Comme il s'agit d'une photo verticale, comme vous pouvez le constater, elle ne constitue pas une bonne photo d' arrière-plan. Au lieu de cela, nous pouvons l'utiliser sur la moitié de l'écran. OK, donc cette photo couvre la barre de navigation. N'oubliez pas le panneau Calques. Comme il s'agit d'une couche supérieure, elle recouvre tout ce qui se trouve en dessous. Nous devons le déplacer en dessous de la barre de saisie. Nous pouvons le faire soit en le faisant glisser dans le panneau Calques, soit en utilisant plus facilement une option qui le fait pour nous Cliquez avec le bouton droit sur la photo et sélectionnez Envoyer à la page précédente. Cela enverra la photo jusqu'au dos. Maintenant, la barre de navigation est en haut. Mais comme la taxe sur la barre de navigation est obscure, nous ne pouvons rien voir, réglons ce problème Je vais désactiver la mise en page en grille afin de mieux voir ce qui se passe. Nous pouvons désactiver cette option pour l' ensemble du document à partir d'ici, mais vous verrez que j'utilise souvent un raccourci. Rendons maintenant les liens de la barre de navigation en blanc. Bien. Faisons la même chose avec le bouton. Ce n'est pas très visible. Je pourrais, bien sûr, inverser les couleurs, rendre le bouton blanc et le texte noir. Mais dans ce cas, une option plus esthétique consiste à utiliser un bouton fantôme ou un bouton semi-transparent. Changez le fond de fond en blanc et diminuez l'opacité du fond coloré d'environ 10 à 20 % J'aime beaucoup ces boutons semi-transparents. Ils ont un look très élégant. Vous pouvez voir comment notre design commence à prendre une bien meilleure forme grâce à de très simples modifications. Nous avons un point central indéniable dans cette composition. Maintenant, organisons mieux notre contenu et créons une hiérarchie visuelle entre eux. Alignons-les d'abord vers la gauche et insérons-les dans une grille. Nous devons maintenant décider quel sera notre message principal. Ici, nous devons commencer à réfléchir un peu plus en profondeur aux objectifs du site Web et aux visiteurs. Être designer, ce n'est pas simplement embellir les choses. Il s'agit souvent de réfléchir aux objectifs de votre conception et à la manière de les atteindre le plus efficacement possible. Une section dédiée aux héros de presque tous les sites Web doit répondre à trois questions pour l'utilisateur. Quel est le sujet de ce site Web ? Qu'est-ce que je vais obtenir de ce site Web et comment puis-je l'obtenir ? La première question est de savoir en quoi consiste ce site Web ? Eh bien, il s'agit de Vincent Schwartz, avocat spécialisé dans le divorce à Boston Maintenant, parmi ces deux informations, son nom et son avocat spécialisé dans le divorce de Boston, laquelle est la plus importante ? Cela peut dépendre d' autres facteurs. Par exemple, s'il s'agit d'un avocat bien connu, il serait plus important que son nom apparaisse en premier. S'il n'est pas connu, alors il est plus important de montrer que cette page concerne un avocat spécialisé dans le divorce à Boston. Supposons que le client nous dise que son nom est une information importante et doit être affiché comme information principale. Case, nous allons faire en sorte que le nom soit grand et audacieux. Je vais aller beaucoup plus loin pour le moment parce que le point focal, la photo, est tellement plus visible que je peux me permettre un texte plus grand. Dans mon exemple précédent, je ne pouvais pas aller trop loin car la photo était plus petite. Pour la police du titre, j'ai choisi Play pour police d'affichage et j'ai utilisé le style noir, qui est sa forme la plus lourde Une section entière de ce cours est consacrée à la typographie C'est un sujet important dans le domaine du design, et vous en apprenez beaucoup sur la façon de choisir les polices de manière à ce que vos créations soient belles. Dans cet exercice, vous pouvez choisir la police de votre choix, mais faites attention à la façon dont vous choisissez le poids et la taille de ces polices. Le poids de la police peut être sélectionné ici. nombre d'options que vous avez ici dépend de la famille de polices et du nombre de poids qu'elle contient. OK, comme j'ai choisi un style large et lourd pour le nom, je vais faire le contraire pour le texte de l' avocat spécialisé en divorce à Boston. Je vais garder la police utilisée choisir un style léger et la rendre encore plus petite. Le sous-titre ne rivalise certainement pas pour attirer l'attention Le nom donne tout ce qu'il faut à Spotlight , et c'est exactement ce que nous voulons. La hiérarchie entre les deux est claire. Ensuite, ajustons le texte du paragraphe. Je vais réduire un peu plus la taille du texte, et c'est tout. Le bouton « Je vais vivre tel qu'il est ». Je vais juste le réduire, et cela suffira à diminuer son importance. C'est tout Ça a l' air plutôt chouette. Qu'en est-il de la hiérarchie ? Avons-nous un point focal ? Tu paries que oui. Qu'en est-il du reste des éléments ? Nous avons notre titre qui est le texte le plus visible visuellement, puis le reste des éléments ayant différents degrés d'importance visuelle Et c'est tout. Si vous ne m' avez pas suivi, c'est maintenant à votre tour. N'hésitez pas à vous écarter de notre version si vous le préférez. L'important est d' atteindre deux objectifs, à savoir A, avoir un point focal et B, avoir différents niveaux d'importance visuelle entre les autres éléments. C'est à vous de décider si vous souhaitez utiliser différentes couleurs, pas de problème, différentes polices, différents arrangements, ou si vous pouvez recréer ma version pixel par pixel Ça n'a pas d'importance. L' important est que vous commenciez à penser comme un designer commenciez à remarquer et que vous ayez une hiérarchie visuelle dans votre esprit à tout moment 12. Mise en page : garde aux idées aériennes: entre ces deux mensonges horizontaux, juste les lions, sans compter leurs propres têtes, dont une hors de cette ligne est plus longue, Tout comme 8% des gens. Vous êtes probablement allé avec la ligne de fond, mais la vérité est que leur exactement la même longueur que le genre d'illusions d'optique se produisent tout le temps. Dans la conception, vous allez prendre deux objets, les mesurer et voir qu'ils sont souvent de taille exacte. Mais nos yeux disent que le cercle est légèrement plus petit que le carré. Alors, que faisons-nous dans de tels cas ? On y va ? Que dit le souverain, Ou faisons-nous confiance à nos yeux ? La plupart du temps, on va faire confiance à nos yeux. Cela signifie que si un objet semble légèrement plus petit que son homologue, nous devons compenser l'illusion d'optique et augmenter légèrement la taille jusqu'à ce que les deux apparaissent de taille égale. Ensuite, nous allons avoir des objets qui apparaissent de la même taille. Ceci est plus important que leur taille réelle de pixels car l'audience ne va pas sortir les règles et commencer à mesurer. Mais si quelque chose semble plus petit, ils trouveront qu'il devrait. Les illustrations sont des éléments graphiques courants que vous utiliserez dans vos conceptions Web. Beaucoup de fois, ces illustrations, ou Aikens, vont avoir de très, euh, formes. Ça fera la même taille. Les illustrations ont l'air très différentes les unes des autres. Dans cet exemple, Enveloppe sur le Rire semble plus grande. C' est accablant l'icône à droite quand ils sont censés avoir une hiérarchie égale. Bien que leurs tailles soient identiques, ils ont à la fois la même hauteur et la même avec, mais l'enveloppe a un corps beaucoup plus complet par rapport à cette tente. C' est ce que les concepteurs ont généralement appelé les moyens de sortir de l'objet, et les objets plus lourds auront l'air plus gros. Ils auront l'air plus large ou plus grand, nous devons donc compenser manuellement le corps tendu et plus léger en augmentant ses dimensions réelles de pixels. n'y a pas de règle sur le montant à augmenter. Cela doit être fait par je l'augmente jusqu'à ce qu'ils se sentent comme une taille égale. Ensuite, vous obtiendrez une composition équilibrée qui se sent alignée avec les tailles correspondantes. Ces minuscules petites nous disent ce qui fait que la page ressemble à elle a été conçue par un amateur ou un pro. La plupart des concepteurs Web et des développeurs qui n'ont pas de formation en design graphique ou tout ce est conçu en relation. Ils mesurent les choses par une règle. Et ce qui se passe, c'est que les résultats sont incohérents et assez maladroits, refusés ou l'utilisateur ne va pas remarquer ce qui ne va pas exactement avec une page. Ils le remarqueront, mais ils ne sauront pas exactement ce qui est hors avec elle, mais ils échoueront que la page ne soit pas citée unquote conçu. Voici une autre illusion d'optique très courante. Ce waas, un des premiers, est à moins que je reçoive de mon mentor de design. Chaque fois que nous devons mettre quelque chose, par exemple, taxe à l'intérieur de la boîte, que fait habituellement ? Trouvez le milieu exact du conteneur en place là, élément droit au centre. Le problème avec ceci est que le texte a l'impression qu'il coule. Il se sent même comme l'espace au-dessus du Texas plus grand que l'espace en dessous, sensation de couler n'est pas une bonne impression pour n'importe quel design. Au lieu de cela, ce que nous voulons faire, c'est d'affiner la taxe un peu vers le haut, sorte qu'il semble flotter pour se souvenir facilement. Considérez ça comme un vaisseau qui coule. Pas bon vaisseau flottant. Super. Cela ne signifie pas que vous devriez toujours le pousser vers le haut au lieu de vous aligner exactement au milieu. Parfois, ce ne sera pas nécessaire. Cela dépendra de la typographie, espacement et ainsi de suite, tout comme toutes les illusions d'optique. Soit il apparaît, soit il n'a pas besoin de réparer une illusion si elle n'existe pas. Mais si vous voyez ce naufrage, le fait, alors réparez-le. En fait, les objets plus lourds auront l'impression de couler Mawr, et les objets plus légers auront tendance à flotter. C' est fou à quel point c'est précis pour un monde réel. 13. Mise en page : Proximité: une chose. Les concepteurs débutants ont tendance à faire un espace sur les éléments également sur la page. Principalement, ils le font pour les remplir dans l'espace parce que tous les concepteurs débutants ont peur de l' espace vide . Plus à ce sujet dans la leçon ultérieure. Mais ce que le design aime réellement est de regrouper des éléments plus proches les uns des autres s'ils ont quelque chose en commun. Il s'agit d'un concept de conception appelé proximité. L' idée de base de la proximité est que les pensées qui sont liées devraient être rapprochées, et les choses qui ne sont pas liées devraient être plus éloignées. Dans cet exemple, j'ai déplacé tous les liens de navigation les uns des autres parce qu'ils sont liés. Ils ont le même contexte. Maintenant, le titre est plus proche du texte en dessous parce qu'ils sont liés. Les boutons sont un peu plus loin de la taxe, mais deux d'entre eux sont proches l'un de l'autre parce que ce sont des matraques d'action similaires. Ils offrent tous deux ce qu'il faut faire ensuite, et enfin la petite taxe sous le bouton vert. J' ai déménagé beaucoup plus près du fond parce que c'est une sorte de description sur les boutons afin qu'il puisse même exister sans elle. Maintenant que se passe-t-il si vous mettez des éléments non liés les uns aux autres bien, cela impliquera une relation, qui en fait n'existe pas. Par exemple, si nous mettons un slogan juste à côté des liens de navigation parce que hors de sa proximité, les utilisateurs vont facilement confondre le slogan avec un élément de menu et penseront qu'il s'agit d'un lien cliquable clip , surtout si ces ont un style similaire. La proximité est une ligne directrice de conception très utile. Non seulement il rend le contenu facile à comprendre et à digérer pour l'utilisateur, mais il le rend aussi joli et design. Et je suppose que vous savez que les choses qui sont simples et faciles à comprendre sont assez belles pour les utilisateurs. 14. Comment utiliser de l'utilisation de la typographie: tous les sites Web ont du texte là-dessus, et beaucoup de design dépend de la façon dont nous choisissons les styles taxés. C' est ce qu'on appelle la typographie. La typographie n'est pas seulement de choisir le bon téléphone. Il s'agit de choisir la combinaison de ces téléphones, les différents styles comme maigre et audacieux et régulier et attendre, choisir les bonnes polices de caractères et les téléphones pour les bonnes occasions et les contacts brillants. La topographie peut rendre le site Web de qualité et avec une lisibilité exceptionnelle. Ou il peut le rendre enfantin, ou peut-être hors de contacts ou sembler déroutant et très difficile à éliminer. Vous pouvez facilement avoir un site Web qui est uniquement typographie et qui le rend toujours bien et conçu sans aucun élément graphique. En fait, le site le plus populaire au monde est principalement le texte. Si les taxes si important dans la conception, alors il doit y avoir quelques règles et lignes directrices sur la façon de choisir le et de les utiliser, non ? Vous pariez qu'il y en a, et vous apprendrez tout à leur sujet dans quelques centimètres de moins. En suivant les lignes directrices simples, vos dessins auront fière allure. Vous m'entendrez utiliser les termes type de police et tombé interchangeablement type de court pour caractères, et la différence entre la police de caractères et la police est ce dans ce cas. Bonjour, Vatikai za famille de caractères qui a beaucoup de styles de téléphone différents en elle, comme la lumière, gras et ainsi de suite. Peu importe le terme que nous utilisons, pas vraiment, mais il est toujours bon de connaître la différence et de ne pas se confondre. Je me souviens que j'étais confus au début parce que tout le monde utilisait ce qu'ils voulaient et qu'il avait des téléphones, des types et des polices de caractères, et je me disais Est-ce que j'utilise la bonne chose pour mes dessins ? 15. Typographie : Le polices de caractères vient avec une personnalité: à chaque fois. Le visage a une personnalité. Certains sont amusants et ludiques, striés d'été et blonds, et d'autres se sentent académiques et fantaisistes. La personnalité d'une police de caractères est aussi importante que de choisir la bonne tenue pour la bonne occasion. Tu ne veux pas porter un short cargo à un rendez-vous. Dans un restaurant offensant , par exemple, une police appelée Proxima Soft serait très appropriée pour une page de vacances d'hiver, mais serait complètement déplacé sur une page qui vend de l'espace de bureau de luxe. Pourquoi est-ce le cas ? Parce que Proxima Soft a une personnalité décontractée et amicale, tout comme le nom de Heene. Les échelles sont douces et arrondies. Ils ont l'air d'être faits de neige. Il serait approprié pour les sites Web qui sont liés à des jours saints ou enfants. Nourriture décontractée, peut-être pour les sites Web qui veulent se sentir amical et accessible. Pourquoi ne fonctionne pas pour le luxe du site immobilier ? Pour commencer, la photo nous en dit beaucoup. Vous voyez cette série d'architecture rectangulaire er, qui est déjà dicter l'ambiance de cette composition. Il demande quelque chose de strié et droit, mais plus important encore, mange le contexte. luxe est le principal service, et il n'y a rien de luxe dans Proxima Nova Soft. D' un autre côté, une police appelée Adoni serait un excellent ajustement pour cette page. C' est une police d'apparence classique. Il a l'air sérieux, droit et chic, mais moderne. Exactement les mots que vous utiliseriez pour décrire un espace de bureau de luxe. Mais comment pouvons-nous dire Quelle est la personnalité de la police ? En fait, ce n'est pas si difficile. Il y a certaines classifications qui relèvent de chaque police. Ceux qui racontent déjà beaucoup d'histoire à propos de l'heure, passons en revue dans notre prochaine leçon. Et après cela, faisons un petit exercice pour pratiquer des personnalités de phase prototype tiefest. 16. Typographie : catégories de polices de caractères: La gestion des catégories de polices de caractères vous permettra de choisir plus facilement la bonne police, bonne police pour votre projet, car une grande partie de la personnalité dépend en quelque sorte de la catégorie, la catégorie générale générale à laquelle elles appartiennent Tout d'abord, la plupart des polices de caractères entrent dans ces deux camps, Serif ou Sans Serif La différence est très simple. Ces queues sur la lettre s' appellent Serifs. En français, sans signifie sans. Donc, Sans Serif signifie sans Serif, c'est aussi simple que cela. Outre ces deux grandes catégories, nous en avons deux autres. Affichage, parfois appelé décoratif et scripté. Passons en revue chacune d'elles. polices de caractères Serve comportent trois styles distincts. Ils sont à l'ancienne. Le style ancien est le style le plus populaire à Serafons. C'est une police de caractères classique et traditionnelle qui remonte à loin. Il s'agit du style le plus couramment utilisé dans l'impression, et la plupart des livres seront créés dans cette police de caractères Cependant, dans le domaine de la conception Web, sérifons à l' ancienne commencent à apparaître seuls les documents imprimés ont en général une définition plus élevée que minuscules serif et les lettres sont plus difficiles à voir à l'écran en raison de la faible résolution et du scintillement de l'écran C'est la principale raison pour laquelle polices San Serif sont devenues le style dominant du design numérique Bien qu'aujourd'hui les écrans soient plus en plus en plus en résolution, les polices Serif font leur grand retour, notamment dans les blogs et les magazines Internet Comme son nom l'indique, la police de caractères à l'ancienne a une personnalité très classique Ils peuvent être utilisés pour les sites Web qui souhaitent afficher un look raffiné et classique, par exemple, les restaurants haut de gamme, instruments de musique, les cabinets d'avocats, etc. Mais il peut également être assez neutre et utilisé pour des sites Web non classiques, en particulier pour le texte de paragraphes car il offre une grande lisibilité polices à empattements modernes peuvent être assez similaires à l'ancien La meilleure façon de savoir si la police est moderne est d'utiliser le serif plat Comme vous pouvez le constater, l'ancien style a un empattement incliné, mais le moderne Une autre caractéristique très distinctive est le contraste saisissant entre les épais et les fins Remarquez que la première patte du A est aussi fine qu'un cheveu. Mais le second est aussi épais qu'un poteau. Les modèles modernes sont fréquemment utilisés pour la mode et tout ce qui concerne le luxe. Bien qu'ils ne soient pas limités à cela, il peut être utilisé pour tout ce qui vous permet d'incarner une personnalité sérieuse, moderne et raffinée Dans l' exemple précédent, j'ai utilisé exactement le type serif moderne appelé Bedni Cependant, je réserverais caractères modernes uniquement aux gros titres et aux grandes technologies C'est généralement l' objectif principal pour lequel ils sont conçus, et ils ne sont pas très lisibles pour les textes longs Vous ne voudriez pas lire un blog entier écrit en Onyx Les faces en forme de dalle sont des boîtes, les portions sont plates et elles ne présentent pas contrastes épais et fins comme les deux autres Les téléphones Slap conviennent à tout ce qui semble mécanique ou résistant Tout comme le style moderne, ce n'est pas bon pour les paragraphes, réservez-le uniquement aux titres. La famille sensorielle sera le principal type que vous finirez par utiliser dans la plupart des projets. C'est le plus polyvalent. Il peut s'adapter à un design avec un large éventail de personnalités. C'est la batte la plus sûre de tous les styles. Il peut parfaitement fonctionner à la fois pour les petits paragraphes de texte et pour les grands textes d'affichage tels que les titres. Il existe différents styles au sein de la famille Sensor, tels que le grotesque, le géométrique et l'humaniste Je ne vais pas les examiner en détail car il n' y a pas de distinction significative entre eux pour que distinction significative entre eux pour je puisse attribuer une personnalité dominante à chacun d' Vous avez déjà beaucoup d' informations à vous fournir, alors économisons votre énergie cérébrale pour les tâches les plus importantes. En ce qui concerne les fontes San sari, elles doivent être évaluées individuellement car elles peuvent couvrir un large éventail de personnalités, allant du style ludique et doux au sérieux et au conservateur J'ai décomposé les styles parce qu'ils peuvent être regroupés beaucoup plus facilement en une catégorie utile, presque tous les empattements à l'ancienne auront la même personnalité traditionnelle classique Si je devais vraiment généraliser la personnalité des polices San Serif, je dirais qu'elles ont pour la plupart un aspect moderne, sérieux et neutre Les polices d'affichage ou décoratives sont généralement celles qui ont le plus de personnalité, mais cela ne veut pas dire que c'est une bonne chose Au contraire, ils ont le potentiel d'être assez stupides. Leur personnalité peut aller du type qui ressemble à une écriture sur un tableau noir à quelque chose qui peut être assez élégant La plupart du temps, vous devriez éviter ces types de visages en raison de leur personnalité impitoyable Mais parfois, ils se déclinent dans styles plus neutres et élégants, et ils peuvent être très beaux. Néanmoins, aussi neutre soit-il, il ne faut jamais l'utiliser pour le texte d'un paragraphe, mais uniquement pour les gros titres. Les polices de caractères des scripts sont basées sur l'écriture manuscrite. Tout comme l'affichage, vous utiliserez très rarement le style de script. Bien qu'ils puissent parfois s'avérer très pratiques, par exemple, si vous deviez concevoir un site Web pour une garderie, une police de caractères manuscrite ludique peut donner au site une belle personnalité, mais uniquement pour le texte du titre Identique à l'affichage, n'utilisez pas de scriptyle pour le texte du paragraphe. La plupart des polices de caractères ont été conçues dans un but précis Le concepteur avait une intention et une destination pour cette police, et généralement il la met dans la description ou la police, quel que soit le manuel fourni, selon l'endroit où vous vous trouvez la police, et vous aurez le type et vous aurez le type de description de l' endroit où vous pouvez l'utiliser Voici un conseil de pro. Si la description de la police indique qu'elle est destinée à un usage général, cela signifie qu'elle peut être utilisée en toute sécurité pour les paragraphes et les textes longs Mais s'il est indiqué que c'était de l'affichage, c'est vrai, c'est que c'était destiné à être affiché, cela signifie que même s' il ne figurait pas dans la catégorie affichage, cela signifie que l'intention du concepteur était de l'utiliser pour les gros titres. Ne l'utilisez donc jamais pour des paragraphes ou de gros textes longs, car ils ne lui conviendront tout simplement pas. Par exemple, il s' agit d'un téléphone Google appelé Railway. C'est très populaire. section indique que la police de caractères est destinée à afficher du texte tel que des titres et du texte volumineux, mais de nombreux concepteurs Web l'utilisent pour le texte de paragraphe, créant des milliers de sites Web, de thèmes et de modèles avec une lisibilité médiocre des paragraphes Cela aurait pu être évité s'ils avaient simplement lu le manuel. De nombreux concepteurs Web n'ont pas du tout suivi de formation en design. Apprendre ces directives et les suivre vous donnera certainement une dose d'avantage, même s'ils ont des années d'expérience. 17. Projet : personnalité de la typographie: Voici un exercice amusant sur les personnalités typographiques. J'ai écrit sept phrases différentes dans ce fichier Figma. Je veux que vous choisissiez la police de caractères pour chaque phrase qui vous semble appropriée Vous pouvez utiliser les polices installées sur votre ordinateur ou les polices Google fournies avec Figma Google Fonts est un excellent référentiel de nombreuses polices gratuites mais magnifiquement conçues. Lorsque vous cliquez sur le sélecteur de police dans Figma, vous pouvez choisir à la fois les polices installées sur votre ordinateur et les polices Google Fonts Il est très utile d'utiliser les fonds directement depuis cette liste déroulante. Ce que nous pouvons faire à la place, c'est aller sur le site Web de Google Fonts et y trouver la bonne police de caractères Mais avant de le faire, nous devons d'abord comprendre ce que nous recherchons réellement. Imaginez que nous créons un site Web pour chacune de ces entreprises, nous devons choisir des polices de caractères adaptées Nous devons avoir une idée de ce qui fonctionnerait, beau et conviendrait à chacune de ces industries. Voici un processus simple pour y parvenir. J'utiliserai le coach physique pour la démonstration. Je vais prendre les mots clés importants à partir de là. Ce serait un entraîneur de fitness ou de fitness et Google Images Je peux donc trouver des exemples du type de polices utilisées pour le thème du fitness. Mais un entraîneur de fitness ou de fitness ne suffit pas. Cela ne nous donnera pas d' exemples de design. Pour obtenir des exemples de design et de typographie réels, nous devons ajouter des mots clés tels que magazine, affiche , marque, logo, site Web, publicités Nous pouvons maintenant nous faire une bonne idée du type de typographie utilisé par les autres concepteurs Nous pouvons voir beaucoup de téléphones majuscules, gros et audacieux, ce qui est tout à fait logique, car la forme physique est associée à la force, aux muscles volumineux et aux formes symétriques Combinez cela avec ce que vous avez déjà appris sur les catégories de polices de caractères, et c'est tout Donc, pour l'entraîneur de fitness, je recherche une police de caractères symétrique et volumineuse, qui soit belle en abord, je vais taper ma phrase en majuscules parce que c'est le style que je veux vérifier. L'utilisation de notre texte réel pour l'aperçu facilite grandement la recherche de la bonne police. Je vais maintenant filtrer les résultats de ma recherche. Nous avons ici différents filtres assez similaires aux catégories dont nous avons déjà parlé. Nous avons Serif, qui a une personnalité classique, raffinée et luxueuse, évidemment peu adaptée au fitness Slab Serif pourrait potentiellement fonctionner pour la forme physique. Il a une forte personnalité mécanique. Sanseri Modern Minimal Neutral fonctionnera avec le fitness, car il fonctionne avec tout Parmi ces catégories pour le thème du fitness, Sans Serif est le meilleur endroit où choisir Malheureusement, je ne peux pas voir les versions en gras de ces polices directement d'ici. Cela aurait été une idée. Je vais plutôt devoir vérifier la version en gras individuellement sur la première page. Montserrat est une excellente option. C'est lourd, fort et encombrant, tout comme les muscles. J'aime l'équilibre et la symétrie de chaque lettre. Mais avant de choisir cela, souvenez-vous de ce que nous devons faire en premier. Nous devons lire le manuel. Assurons-nous que le concepteur n'a pas conçu cette police de caractères pour quelque chose qui ne convient pas au fitness Il dit qu'il a été inspiré par typographie urbaine, ce qui nous convient Il mentionne même des mots clés tels que le travail et le dévouement. Eh bien, n'est-ce pas génial ? travail et le dévouement sont directement liés à la forme physique, c'est fait. C'est notre police de caractères. Ensuite, accédez au fichier d'assignation et appliquez la police au texte. À noter, les fichiers de devoirs que j'ai partagés avec vous devraient automatiquement être dupliqués lorsque vous cliquez dessus. De cette façon, vous obtenez la copie du fichier sur votre compte Figma Mais si vous remarquez que le fichier n'est pas modifiable, dans ce cas, il n'a probablement pas été dupliqué L'une des raisons serait que vous n'êtes pas connecté à Figma sur votre navigateur. Vous devrez vous connecter , puis réessayer de cliquer sur le lien. S'il ne parvient toujours pas à créer une copie, accédez à myfile et dupliquez-la à partir de ce petit menu déroulant. Il s'agit maintenant de votre propre fichier Figma et vous pouvez le modifier comme vous le souhaitez Tous ces doublons sont automatiquement enregistrés dans votre compte Figma Donc, dans le sélecteur de police, je vais sélectionner Montserrat Par défaut, il sera de style normal, mais je le veux épais et gras. Je vais sélectionner son style le plus audacieux , appelé noir dans ce cas De plus, je veux qu'il soit en majuscules. Bien sûr, je peux le taper une fois de plus avec les majuscules, mais il existe un moyen plus simple de le faire. Ce lien ouvre ici des paramètres supplémentaires, et là, nous pouvons sélectionner des majuscules De cette façon, quelle que soit la façon dont je tape mes majuscules ou non, il s'affichera en majuscules et vous pouvez supprimer les majuscules en cliquant sur cette option C'est également ici que vous avez option de soulignement si vous en avez besoin. Dans cet encadré, je souhaite que vous expliquiez votre processus de réflexion sur les raisons pour lesquelles vous avez choisi la police. Donc, dans mon cas, j'écrirais ce que j'ai déjà décrit. Ne sautez pas cette dernière étape. Pour devenir designer, vous devez commencer à penser comme un designer afin de mieux comprendre chaque étape et chaque décision que vous prenez. Et en fait, les clients, vos clients apprécieront certainement cela. Je me souviens qu'ils l'ont toujours fait. J'enverrais cet e-mail avec, vous savez, étape par étape, les principales décisions de conception que je prendrais concernant les polices de caractères ou les polices de caractères et d'autres choses de ce genre Au début, j'aime bien le faire, mais ensuite je suis devenue un peu paresseuse. Et lorsque je n'ai pas écrit ces descriptions de mon processus de réflexion sous-jacent, révisions se sont multipliées parce que maintenant ils n' avaient plus confiance en mon choix. Et ils voulaient revoir et, vous savez, changer les polices, les couleurs ou des choses comme ça parce qu'ils pensaient que je les avais choisies de nulle part. Pratiquez donc absolument cela. Ensuite, lorsque vous travaillez avec vos clients, montrez-leur à quel point le processus de réflexion a été intégré dans les coulisses. 18. Typographie : Régler des caractères: C' est le titre d'ouverture du film Gravity. Faites attention à la façon dont le type est défini. Voici un autre de l'élévation du Chevalier Noir ou celui-ci de l'interstellaire. Vous remarquez la similitude ? Tous les trois ont un très large espacement des lettres. Autre espacement est l'un des attributs qui peuvent changer sur le téléphone et le personnaliser en fonction de vos besoins. Vous pouvez le rendre très serré et serré, ou vous pouvez le rendre agréable et aéré. Ce genre d'espacement blanc supplémentaire est appelé Panorama. C' est un truc de conception vraiment cool, et il crée en quelque sorte est agréable, fini et raffiné. Regardez et ajoute une importance supplémentaire à la taxe et donne l'impression qu'elle dit quelque chose très important. Si jamais vous êtes coincé avec un design très ennuyeux et fade, vous pouvez définir votre type dans Panorama et va instantanément aller Teoh. Donnez-lui un look agréable et raffiné. Par exemple, si j'ai besoin d'ajouter un titre supplémentaire à une taxe forfaitaire qui a déjà un titre, je peux prendre ce titre secondaire et le définir dans Panorama. Leur titre secondaire est maintenant très intéressant par rapport à ce que nous avions auparavant. Cela semble plus délibéré, ce sont des mains secondaires qui ne rivalisent pas avec le titre original. Il a son propre style spécifique, donc je vais pouvoir les répéter sur d'autres blocs de taxes similaires et être très identifiable. Un grand avantage de la composition Panorama est qu'elle vous permet de réduire votre téléphone à de très petites tailles sans perdre la lisibilité. J' ai supprimé l'effet panoramique ici, et la taxe est devenue beaucoup moins lisible. Cela signifie que je devrais augmenter la taille de l'avant, mais cela est maintenant trop en concurrence avec le titre principal. Je voulais être l'information secondaire, mais il est presque devenu le titre principal. Une chose à noter. Lorsque vous définissez le type de cette façon la plupart du temps, vous devez utiliser des majuscules. Cet effet ne fonctionne pas vraiment en minuscules. Ok, donc c'est à propos de l'espace blanc. Mais que diriez-vous d'un espacement plus serré ? Quand voudrait-on utiliser ça ? Un ? De tels cas, lorsqu'il s'agit de texte volumineux et lourd sur de grands espaces de texte entre les lettres, sont proportionnellement importants. Par exemple, je travaillais sur un site Web pour une entreprise de partage de scooters, Comme vous pouvez le voir, amusant une taille énorme amusant qui est assez audacieux et heureux. L' espacement des lettres par défaut pour ceux-ci se sentait un peu trop espacé pour moi, donc j'ai ajouté une lettre négative de base. Si j'utilise un titre très audacieux et volumineux, je veux créer une taxe qui semble audacieuse, lourde et concentrée dans un espace restreint. Une lettre refree Spacing est le contraire de ce que je veux réaliser, donc j'ai resserré les choses. Dans ce cas. La plupart du temps, vous voulez conserver l'espacement par défaut de l'échelle pour votre taxé. Mais dans des cas spécifiques, vous n'avez pas la possibilité de personnaliser le téléphone à vos besoins à la règle empirique. Si jamais vous ajustez la lettre, l'espacement que l' espacement accru au fur et à mesure que vous appelez devient plus petit ou plus léger et diminue la base, gagner devient de plus en plus audacieux. Comparons ces deux blocs fiscaux identiques. C' est la même taille de téléphone, et le texte est exactement le même. Leur différence réside dans leur espacement des lignes ou leur hauteur de ligne. Le type est assis en taille aérienne de 25 pixels. Le paragraphe de gauche a une ligne par défaut haute, mais à droite, on l'a augmentée. La ligne par défaut haute valeur hors zone est très serrée. Cela rend la taxe plus difficile à lire et à suivre l'augmentation de l'espacement des lignes sur les deuxième blocs. Texte mixte mawr Airy. Il se sent moins lourd, plus facile à lire. Et même si sa taille est plus longue, elle se sent moins intimidante que l'original. Intimidant impôts quelque chose pour réellement Wolcott pour. Habituellement, les gens ne lisent pas de texte sur les sites Web. Ils scannent. Ils recherchent frénétiquement des mots clés et des phrases pour trouver ce qu'ils recherchent ou pour décider si le site Web est pertinent pour eux. Le texte sur le trajet les aidera à numériser les taxes plus facilement et à trouver ce qu'ils recherchent. Vous pouvez essayer vous-même positivité et essayer de lire chaque taxe aussi vite que vous ne pouvez pas. Vous remarquerez que vous aurez beaucoup est votre vitesse et plus rapide sur le texte sur la droite, L' espacement des lignes d'origine aura l'impression de courir sur une salope sableuse, un peu draggy et lent. Ce problème devient extrêmement évident lorsque nous traitons de blocs de texte larges. Lorsque vous avez fini de lire une ligne de taxe dans ce bloc, sauter sur la gauche à la ligne trouver suivante est un défi. Il est très facile de se perdre, et vous devez compter sur la connexion des liens avec le contexte ou ah, doigt ou la règle. anciens téléphones viennent avec leurs propres lignes par défaut face et il change en fonction de la taille du téléphone . Certains téléphones qui sont très bien faits et bien équilibrés auront un meilleur espacement des lignes que d'autres. Ceci, par exemple, est l'une de mes polices préférées, appelée Avenir. La ligne par défaut de Heidi 34 pixels sur la taille du téléphone spécifique. Comme vous pouvez le voir, ce n'est pas très différent de l'ajustement que j'ai fait pour l'antenne. Donc, dans ce cas, je pourrais même laisser l'interligne comme valeur par défaut. Maintenant, il y a des moments où vous devez réduire les lignes faisant face au lieu de l'augmenter. Et c'est généralement lorsqu'il s'agit de taxes importantes et très audacieuses, surtout en majuscules la ligne par défaut. Cachez sur ces taxes un peu de place pour moi. J' ai choisi toutes les capitales et le téléphone lourd pour rendre les gros titres violets lourds et forts, concentrés en un seul endroit. Donc, dans ce cas, je vais diminuer la ligne haut juste un peu. Maintenant. Cette version est exactement ce que je cherchais. Nous pouvons penser à cela comme une gravité ont vos objets ont une gravité plus forte, donc ils poussent les objets plus proches et plus légers ? Pas autant, donc ils flottent dans l'espace et Fillmore Airy, parlant de points de téléphone, se trouvent régulier, semi gras, gros boulon supplémentaire ayant une ligne de cheveux maigre noir et ainsi de suite. Ce qui a été appelé poids ou styles de téléphone ou épaisseur. Chaque police de caractères aura son propre ensemble de poids, certains plus que d'autres. Les choses, par exemple, sont des poids de téléphone éteints. Un téléphone Google très populaire appelé Open Sense a cinq poids différents. Zone, d'autre part, a seulement deux régulier et gras. La police qui a ce petit poids est très difficile à utiliser. Sur un site web moderne, vous avez tellement d'endroits différents que vous devez protéger sur les paragraphes sur les boutons, barre de navigation, les menus déroulants, les titres, les titres secondaires, liens de pied de page et plus encore. Si vous choisissez un haut visage qui a seulement deux poids régulier et tirer, vous aurez beaucoup de mal quand vous avez besoin de créer une hiérarchie et le contraste entre un titre , un ESOP avait vous êtes fondamentalement laissé avec la taille de la taxe pour duel le lourd levage taxe blanche régulière sur fond sombre semble parfois rocher Pour compenser cette illusion d'optique, vous pouvez utiliser le poids plus léger. La taxe sur ces deux voitures ressemble maintenant à leur même poids, mais dans l'exemple précédent, la droite taxée semblait plus lourde. Laissez-moi vous montrer qu'une fois de plus, léger et régulier, une autre situation où nous pourrions avoir besoin d'ajuster le poids du téléphone est sur grand texte a augmenté la taille hors du téléphone. Il devient plus lourd à la fois de ce poids irrégulier dans ce cas. Mais parce que le premier est beaucoup plus grand, c'est des corps plus épais et plus lourds. Parfois, nous voulions regarder un poids similaire, juste des tailles différentes. Dans un tel scénario, nous devrons jumeler les styles légers et réguliers. Maintenant, la taxe importante et le texte plus petit ont l'impression qu'ils n'ont pas le même poids. Vous pouvez le faire dans l'autre sens pour en rendant les attaques plus petites un peu plus audacieuses, vous aurez besoin de quelque chose comme semi-chauve. Dans ce cas, si vous êtes police n'a pas assez de poids, alors vos mains sont serrées et vous ne serez pas en mesure d'obtenir des résultats optimaux. Choisissez des polices de caractères polyvalentes et ayant un nombre suffisant de poids. La plupart des visages de cravate utilisés par moteur et général aujourd'hui auront au moins quatre façons, ce qui est assez décent. Certaines faces de cravate complètes auront neuf poids différents, comme cette police appelée Montserrat. Tu ne vas pas manquer d'attente ici, donc on a un espacement des lettres, des lignes cachées et des appels téléphoniques. Ces attributs nous aident avec deux choses veulent principalement est de rendre l'impôt facile à lire, en particulier sur le corps et la grande taxe. Et deuxièmement, pour obtenir une très bonne hiérarchie visuelle entre différents éléments, éléments de texte, évidemment sur la page et dans la leçon à venir, nous allons pratiquer ce réglage de type exact entre la ligne hauteurs où vous envoyez tout ce truc, restez autour. 19. Assignment : type de réglage: La topographie est importante pour la conception de sites Web, et apprendre à définir correctement le type texte fera de vous un concepteur Web de haut niveau Dans cette vidéo, nous allons faire un petit exercice amusant sur le réglage du texte, ce qui signifie simplement qu'il s'agit de choisir la bonne taille de police, bonne hauteur de ligne, l'épaisseur de la police et l'espacement des lettres C'est tout Il s'agit simplement de combiner ces quatre éléments différents pour donner à quelque chose un aspect délibéré. Comme d'habitude, vous trouverez ce fichier figma dans les ressources, soit sur la page que j'ai mise lien, soit sous les ressources de cette vidéo Et dans ce fichier Figma, j'ai organisé cinq blocs de texte Chacune comporte un titre et un paragraphe. Chacun de ces blocs est configuré dans une police de caractères différente, la même police de caractères pour le titre et la paire de paragraphes Le nom du type figure juste ici, dans le coin. Ne vous inquiétez pas pour le contenu. C'est un texte factice que j'ai généré aléatoirement. Je veux que vous passiez en revue chacun de ces blocs et amélioriez le réglage du type pour chaque paire. Votre objectif est d' atteindre deux objectifs. Tout d'abord, une bonne lisibilité du texte. Cela peut être réalisé en ajustant principalement la taille des téléphones et la hauteur des lignes. Tous les blocs de texte sont définis dans leur hauteur de ligne par défaut pour certains de ces téléphones. Leur hauteur de ligne par défaut peut être assez lisible, Leur hauteur de ligne par défaut peut être comme Crimson Tax ici, mais pour d'autres, elle peut être un peu Il n'existe pas de règles spécifiques pour les hauteurs de ligne. Mesurez-le simplement en fonction votre œil, augmentez-le de haut en bas pour voir ce qui vous semble le plus agréable lorsque vous le lisez. Il en va de même pour la taille de police. Ils sont tous définis en 16 pixels, mais comme vous pouvez le constater, 16 pixels sont assez différents les uns des autres. Par exemple, 16 pour la taxe pourpre, c'est bien trop faible. Ensuite, votre objectif est d'obtenir une bonne hiérarchie entre le titre et le paragraphe Souvenez-vous de notre leçon sur la hiérarchie. En effet, la hiérarchie visuelle rend le design plus facile à suivre et plus agréable à regarder. Vous pouvez obtenir cette hiérarchie entre le titre et les textes en rendant le titre très gros ou très lourd, ou Pour atteindre ces deux objectifs, vous êtes autorisé à ajuster la taille de la police. Deuxièmement, le poids de la police. Et la hauteur des lignes. Vous n'avez pas à vous soucier de l'espacement des lettres. Gardez-les simplement tels qu'ils sont. De plus, ne modifiez pas le caractère ou la couleur, gardez-les tels quels. Vous êtes libre d'ajuster la position de chaque zone de texte. En fait, vous devrez probablement l' ajuster, car au fur et à mesure que vous commencerez à définir votre type, les éléments devront être déplacés en conséquence. Mais je veux que vous gardiez la largeur de chaque zone de texte telle quelle Ils ont tous une largeur de 500 pixels en ce moment. Je veux que vous travailliez dans le respect de ces contraintes et définissiez votre type de la meilleure façon possible dans ces dimensions. La hauteur de la boîte s'ajustera automatiquement. Permettez-moi de vous montrer le premier. Tout d'abord, assurez-vous d'avoir zoomé votre Canvas à 100 % Sinon, vous ne verrez pas la taille réaliste. Il existe de nombreuses manières de zoomer et dézoomer dans Figma Les deux méthodes les plus courantes consistent pincer le mot-souris sur un ordinateur portable. Cela fonctionnera probablement sur ordinateurs portables récents dotés de la fonction de pincement multipoint ou d' une autre méthode, qui consiste à utiliser la molette de votre souris et tout en maintenant la touche une autre méthode, qui consiste à utiliser la molette de votre souris Ctrl ou Commande enfoncée sur Mac Et si vous utilisez bien votre souris, faites simplement défiler la page vers le haut ou vers le bas, faites simplement défiler la page vers le haut ou vers le bas, et tout en maintenant la touche Ctrl ou Commande enfoncée, elle zoomera ou dézoomera. Ou ma méthode préférée, qui consiste simplement à faire passer le raccourci à zéro, zoomer instantanément à 100 %. Vous pouvez voir le raccourci si vous allez dans les quelques options, puis sous la liste déroulante, vous pouvez voir que Zoom à 100 % possède ce raccourci La plupart de vos travaux de conception devraient être effectués dans cet état normal. Sinon, vous ne verrez pas une image réaliste des tailles et des proportions. Cependant, vous pouvez zoomer et dézoomer lorsque vous en avez besoin pour une raison quelconque. Une fois que nous aurons vérifié que nous travaillons dans un état de zoom normal, je vais d' abord ajuster le titre. Je veux qu'il soit fin. Sous le nom de la police, vous pouvez sélectionner le poids de la police. Comme je l'ai déjà mentionné, les options disponibles ici dépendent de la famille de polices elle-même, et si vous avez installé tous les styles disponibles sur votre ordinateur ou s'ils sont fournis avec Figma Je choisis Thin. Maintenant, pour obtenir une bonne hiérarchie visuelle entre le titre et le graphique pyro, je dois augmenter la taille du titre Comme j'ai opté pour un titre fin, je devrais le faire encore plus grand que ce que je ferais pour un textile plus lourd J'appuie sur une flèche pointant vers le haut, ce qui augmente la taille du téléphone d'un pixel. Au fur et à mesure que j'agrandis mon texte, je fais également attention à l'endroit où se trouvent mes allégements fiscaux Comme la largeur de ma zone de texte est fixe, je ne peux ventiler la taxe qu'en fonction de sa taille ou de son poids. La réduction de la taxe est importante, car vous ne voulez pas que l'impôt soit réduit à un endroit étrange, comme par exemple, lors d'un article A et que le mot saute sur la deuxième ligne. Cela n'améliore pas la lisibilité. Dans cette phrase, le meilleur saut de ligne est lorsqu' un télescope est sur la deuxième ligne ou lorsque l'achat d'un télescope est sur la deuxième ligne. Je préfère même la deuxième version parce qu'il y a une faille logique dans la phrase les bases de quoi ? Acheter un télescope. J'aime bien l'apparence du titre. Je vais maintenant ajuster le texte du paragraphe. Dans la plupart des cas, je ne toucherais pas au poids du paragraphe et je le maintiendrais régulièrement. version normale est généralement la meilleure option pour le texte d'un paragraphe, mais comme j'ai fait en sorte que le titre soit assez fin, le paragraphe semble lourd en comparaison le paragraphe semble lourd en comparaison et détourne beaucoup d' attention du N'oubliez pas que dans la hiérarchie visuelle, nous définissons clairement quel doit être l'élément le plus visible, puis le deuxième élément le plus visible, et ainsi de suite. Je vais maintenant augmenter la hauteur de ligne de ce paragraphe. Hauteur de ligne par défaut de cette police, Roboto Roboto Je ne sais pas comment tu le prononces. C'est très serré. Cela ne constitue pas une bonne expérience de lisibilité. Je vais l'augmenter à partir de ce champ de hauteur de ligne. C'est bon. Ça a l'air super. Le titre est fin et élégant, mais attire tout de même l'attention, et le paragraphe t est une amélioration facile à lire par rapport à ce qu'il était auparavant Permettez-moi de vous montrer ce que je changerais si je choisissais plutôt un gros titre Dans ce cas, je réduirais en fait la hauteur de ligne du texte du titre N'oubliez pas que, comme je l'ai expliqué dans la leçon, lorsqu'il s'agit de texte volumineux et très gras, il peut être nécessaire de réduire la hauteur de ligne. C'est parce que les lettres ont une force gravitationnelle et que les objets plus lourds se rapprochent les uns des autres. Dans ce cas, je vais rétablir le poids normal du texte du paragraphe. J'évite généralement d'utiliser des poids fins pour le texte d'un paragraphe. Sur les écrans de bureau dont la densité de pixels n' est pas très élevée, ils peuvent être difficiles à lire. bon, c'est ça. Exercice très simple et amusant pour s'entraîner à régler le texte et à jouer avec différentes valeurs de , de taille de téléphone, etc. Et lors de la prochaine mission, je vais vérifier votre soumission. 20. Typographie : deux polices seulement seulement: Voici une règle importante à suivre lorsque vous choisissez des polices de caractères pour vos projets. Utilisez au maximum deux polices pour chaque projet et assurez-vous qu'elles ont une apparence différente. Discutons que la première moitié de ce rôle n'est que deux, car le déchiffrement de trop de styles de police est écrasant. Et deux vous donneront suffisamment d'espace pour toute personnalité spécifique que vous souhaitez dépeindre. Dites à travers une police d'affichage et ayez quelque chose de plus neutre pour le paragraphe et d'autres textes. Quant à la seconde moitié de cette règle, si vous utilisez deux polices trop similaires, vous avez l'impression de manquer un clic et choisir accidentellement le mauvais téléphone pour l'un d'entre eux. Le titre est un Open Sans dans leur paragraphe se trouve dans Roboto. Le seul contraste créé réside dans leur taille et le poids du titre. Si nous les mettons dans les mêmes poids et tailles, vous verrez qu'ils sont beaucoup trop similaires, mais pas les mêmes. Si vous allez avec deux types très similaires à un, j'y vais juste avec l'un d'eux. C'est une chose tout à fait raisonnable à faire. Dans cet exemple, je remplace Open Sans par l'écran Playfair. Cela semble nettement meilleur. Les contrastes entre ces deux polices de caractères sont donc très élevés. premier est un empattement moderne, et le second est un sans serif neutre qui offre une grande lisibilité pour un texte plus petit. Maintenant, cela semble délibéré et intentionnel. Vous ne voulez pas les meilleurs moyens de les faire et de bien paraître. Faites en sorte que cela se sente intentionnel. Parfois, vous pouvez enfreindre les règles, ignorer les directives et faire quelque chose qui est complètement hors de la ligne. Mais si vous, si cela vous semble intentionnel, il se penchera probablement raison pour laquelle l'apprentissage et la pratique de ces règles et directives de conception qui feront de vous un très bon concepteur web parce que votre paroisse se sentira et paraîtra intentionnels. On aura l'impression d' avoir mis du travail et de commencer le processus derrière. Et vous ne jetiez pas seulement choses autour de trouver suffisamment Open Sans et Roboto est un jumelage très couramment utilisé. Cela montre simplement qu'il existe une tonne de concepteurs Web qui ne comprennent pas les bons principes de conception. Et si vous suivez cette simple vue de directives typographiques vos conceptions seront beaucoup plus supérieures. Cela ne signifie pas que vous pouvez associer deux polices sans empattement ensemble. Quand c'est le cas, il faut juste que cela ait du sens. Par exemple, lorsqu'un couple à des types sensoriels, c'est généralement parce que je veux quelque chose avec une personnalité pour les textes en tête d'affiche, puis quelque chose neutre avec une excellente lisibilité pour le corps du texte, pour les prises de corps principaux, j'utilise souvent les mêmes polices de caractères dans tous les projets. En fonction de mon obsession pendant une certaine période, je choisis quelque chose qui est neutre et qui a beaucoup de poids de police comme Open Sans Roboto ou nouvellement de cette façon, j'ai beaucoup de liberté avec les compagnies aériennes. Je peux utiliser des polices avec des poids limités, mais un peu plus de personnalité. Et je vais choisir quelque chose qui correspond le mieux à la personnalité de ce projet particulier et de la marque. 21. Typographie : où trouver des polices: L'utilisation de téléphones en ligne est assez simple, et vous avez probablement déjà de l'expérience en matière de téléchargement et recherche de téléphones en ligne. Il existe de nombreuses options payantes et gratuites, alors passons en revue certaines de ces options. Des sites comme defont.com proposent une large sélection de fonds gratuits. Le problème avec les polices gratuites est qu'elles peuvent être conçues par designers amateurs qui les ont créées pour le plaisir ou pour acquérir de l'expérience en matière de conception de polices. Vous pourriez vous retrouver avec n'importe quoi, d' police mal espacée à une police pour chats. Évitez ce type de remboursement jusqu'à ce que vous ayez acquis une bonne expérience en typographie Et même dans ce cas, il vaut mieux se tenir à l'écart et éviter le type de fonds gratuits. Ils sont souvent surutilisés, ce qui signifie qu'ils les utilisent sur de nombreux modèles ou sites Web différents modèles ou sites Web différents, qu'ils les utilisent à tort, et ils ont tout simplement une très mauvaise réputation Les téléphones payants sont évidemment une meilleure option. L'un des avantages d'un fonds premium est qu'il peut donner à votre projet touche plus unique, car il n' pas aussi populaire et n'est pas trop utilisé Avec les téléphones payants individuels, vous payez pour chaque style, généralement entre 20 et 50 dollars. Donc, si vous voulez une famille entière avec tous les poids, cela peut coûter cher. De plus, vous devez acheter une licence pour chaque projet séparément. La meilleure approche avec les téléphones payants individuels serait donc d'acheter un ou deux styles pour un texte de titre Et comme corps du texte principal où vous avez besoin de beaucoup de poids différents, comme des bateaux et des bateaux supplémentaires, etc., vous pouvez utiliser des outils tels que vous pouvez utiliser des outils tels Google Phones et d'autres options que j'ai mentionnées. Il existe un moyen moins coûteux de mettre la main sur de nombreux téléphones haut de gamme, en utilisant des sites basés sur des abonnements. Les plus populaires sont les téléphones Adobe. L'ancien nom est Type kit. Les téléphones Adobe sont inclus dans leur abonnement Creative Cloud. Il s'agit d'abonnements à Photoshop, Illustrator et à d'autres logiciels Adobe. Donc, si vous vous y abonnez, vous obtenez plus de 7 000 téléphones Adobe. Le plan le moins cher coûte environ 10$ par mois, je pense, donc c'est une très bonne affaire. Personnellement, mon endroit préféré est Google Phones. C'est gratuit. Aucun souci de licence. Ils sont bien conçus. Il est organisé par Google, et Figma et Webflow l'accompagnent déjà Cela m'évite donc tant d' installation et tous ces maux de tête. Au début, je vous conseille de vous en tenir aux téléphones Google ou Adobe. Ensemble, deux fournissent suffisamment de téléphones dont vous aurez besoin pour n'importe quel projet. Une remarque importante à propos des polices en général est que les polices sont en fait des fichiers informatiques ordinaires. Cela signifie qu'ils peuvent être copiés et redistribués un nombre incalculable de fois. Donc, si vous avez un fichier pour ce téléphone en particulier, cela ne signifie pas que vous pouvez réellement l'utiliser. Pour utiliser une police pour un site Web dans le cadre de votre projet, vous devez soit avoir une licence que vous avez payée, soit la police elle-même doit être accompagnée d'une licence commerciale gratuite. Voici une extension de navigateur sympa que j'utilise fréquemment. Il s'appelle Font Phase Ninja et vous permet de voir la police utilisée par n'importe quel site Web. Je suis un type de geek. J'adore le look d'une police de caractères attrayante Ainsi, lorsque je vois un site Web qui utilise une police et une typographie magnifiques, je veux savoir de quoi il s'agit et l'enregistrer comme source d'inspiration pour mes futurs projets, ce qui signifie essentiellement que je peux le voler et l'utiliser ultérieurement dans mes projets Lien vers les ressources. Installez cette extension et commencez à remarquer différentes polices sur les sites Web que vous visitez Être curieux est le meilleur professeur de designer. fait de remarquer les designs qui vous entourent et de les examiner près vous apprendra beaucoup de choses et améliorera réellement vos compétences en design 22. Projet : Associer les polices de caractères: Très bien, lancez votre Figma heure de passer à un autre travail de typographie Nous allons mettre en pratique tout ce que vous avez appris jusqu'à présent sur les polices Comme lors de la mission précédente, j'ai organisé trois blocs de texte. Cette fois, ils sont tous en une seule police de caractères. Votre tâche consiste à choisir deux paires de polices pour chaque bloc de texte De plus, comme vous l'avez fait dans l'exercice précédent, définissez le type de chaque texte pour obtenir une bonne hiérarchie et une bonne lisibilité, comme vous l'avez fait la dernière fois Vous choisirez un total de six polices différentes, trois, quatre titres et 34 paragraphes de texte. Lorsque vous choisissez vos types de visages, je veux que vous utilisiez ce que vous avez appris sur la personnalité typographique. Nous regardons la vidéo sur les personnalités si vous en avez besoin. Je veux que vous réfléchissiez au contexte que vous choisissez et choisissiez l'une des polices de caractères qui montre la personnalité adaptée à ce contexte En lisant les gros titres, vous remarquerez que le premier texte traite voyages et d'Hawaï. La deuxième porte sur la cuisine et le barbecue, et la troisième sur la technologie. Maintenant, voici un indice. Le type avec la personnalité doit être celui du titre Pour le paragraphe, vous devez choisir quelque chose d'un peu plus neutre avec une grande lisibilité Au fait, si vous vous demandez pourquoi le texte ne se termine pas correctement, je n'y ai tout simplement pas mis l'article en entier. C'est juste un extrait de quelques articles de blog que j'ai choisis au hasard. Permettez-moi de faire une démonstration pour le premier. Le texte parle donc de voyages dans les îles d'Hawaï. Maintenant, je vais réfléchir à la sorte de police de caractères qui peut exprimer cette sensation de voyage sur de belles plages de sable Pour avoir une meilleure idée du style de ces images, je vais chercher sur Google quelques images d' Hawaï et voir s' il existe style de un style de typographie utilisé localement à Hawaï Avec une recherche rapide, je peux voir qu' il existe en fait certaines polices de caractères utilisées dans le thème hawaïen Je recherche également des choses comme des cartes postales et des panneaux à Hawaï. Regarde ça. J'ai maintenant des exemples authentiques de topographie réellement utilisée sur les îles et qui rappelleront aux gens Hawaï Il semble que la police de caractères manuscrite du script soit la voie à suivre Voyons ce que je peux trouver sur les polices Google qui correspondent à ce thème. Je vais filtrer uniquement les polices d' écriture manuscrite et je vais coller notre texte pour m'en donner une démonstration exacte I Vous pouvez voir qu'il existe plusieurs polices qui peuvent être tout à fait adaptées. Prêtez attention au nom de la police. Souvent, ils vous donneront des indications sur le thème de la police. Parce que j'ai googlé des images et des exemples réels. Au préalable, j'ai pu me faire une bonne idée d'Hawaï. Maintenant, le choix de la police est beaucoup plus facile car je peux reconnaître les similitudes entre les cartes postales et les panneaux. Lorsque je parcourt les polices, je recherche également celles qui ont une grande lisibilité Peu importe que ce soit un titre. Je veux toujours qu'il soit lisible. Des polices difficiles à lire comme celles-ci seront un mauvais choix, peu importe leur apparence. OK, je pense que j'ai assez de choix. Je vais maintenant lire le manuel de ces téléphones que j'ai sélectionnés pour voir à quoi ils étaient destinés. Je vois déjà un problème avec celui-ci. Sur les phrases en majuscules, comme dans mon titre, la lisibilité était meilleure, mais sur les mots minuscules, mais sur les mots minuscules la lisibilité était meilleure, mais sur les mots minuscules, la lisibilité diminuait considérablement. Oui, je vais utiliser des majuscules pour mon titre, mais que se passera-t-il si je change d'avis ? Cela limite considérablement mes options. Le second est le script de Kashan, Cashan Noure. La description du téléphone est assez neutre. Il ne semble pas qu'il était destiné à un thème très limité. Cela a l'air plutôt amusant et décontracté, exactement comme je m' imagine être à Hawaï, alors je vais y aller. Une chose que vous remarquerez ici est que le titre n'est pas vraiment aligné avec le paragraphe Cela se produit souvent avec un texte d'affichage de grande taille. Ils ont de l'espace supplémentaire et vous devrez régler ce problème manuellement. Dans le cas contraire, le dessin ne sera pas aligné. Souvenez-vous de notre leçon sur les illusions d'optique ce n'est pas Ruler qui compte dans le design, c'est l'œil. Si quelque chose ne semble pas aligné, cela signifie qu'il n'est pas aligné. Maintenant, ça va droit au but. Pour le paragraphe, je vais choisir quelque chose de neutre. Le choix évident serait une police sans sera. Un open sas est un choix évident. C'est une police très populaire et excellente. Roboto est une autre police très populaire. J'aime bien Lato. C'est une très bonne police que j'utilise fréquemment. Il y a un événement de style très sympa qui fait les gros titres. Et regardez ça. Lato signifie été en polonais. C'est certainement une police parfaite pour notre thème Hawaii. C' était un coup de chance. Un texte de paragraphe neutre, vous n'avez pas à vous lancer dans une recherche insensée pour trouver la bonne police conçue avec exactement le même sentiment. Je vais faire en sorte que le paragraphe ressemble davantage un gris foncé qu'à un noir à contraste complet. C'est un excellent moyen d' ajouter de la légèreté au texte d' un paragraphe sans utiliser un poids de police plus fin Évitez les épaisseurs fines pour le texte des paragraphes, car ils sont peu lisibles sur les écrans de faible résolution Voilà deux paires de téléphones pour un bloc de texte hawaïen. Il a l'air passionnant, mais il est élégant et facile à lire. Maintenant c'est ton tour. Encore une chose. En plus de chaque bloc de texte, je veux que vous écriviez raisonnement qui sous-tend vos choix en matière de téléphone, comme vous l'avez déjà fait dans l'attribution de la personnalité typographique. N'oubliez pas que l'écriture de votre processus de réflexion vous habituera à penser comme un designer. Vous commencerez à voir les choses dans dialogue plus profond et plus détaillé. Et aussi, vous vous rendrez souvent compte que vous avez choisi un téléphone sans y penser parce qu' il était peut-être juste joli. 23. L'art de la couleur: C'est l'un de mes projets de site Web. C'est un site Web pour une application de partage de trottinettes. Lorsque j'ai conçu ce site Web, j'ai choisi une couleur verte très vive. Le nom de l'application est go green. Les trottinettes sont électriques et respectueuses de l'environnement. Ce vert en particulier correspond donc très bien au concept. C'est la bonne teinte de vert. Mais mes clients avaient un plan différent, et ils m'ont demandé de le remplacer par ce vert. Ce produit est vert forêt ne convient pas à ce produit. Forest Green fonctionnera bien avec les entreprises liées au plein air, camping, à la randonnée, aux vêtements de plein air, à la pêche, etc. Mais ce n'est pas quelque chose qui relève de l'électricité et de la technologie verte moderne. Mais parfois, tu dois faire ce que dit ton client. Les couleurs peuvent faire ou défaire n'importe quel design. Nous sommes attirés par les couleurs que nous aimons et plutôt repoussés par celles que nous aimons, qu' il s'agisse de design Web ou d'autres produits comme les voitures, les vêtements, les bouteilles de ketchup, etc. Nous voyons peut-être le meilleur produit design, mais si nous n'aimons pas la couleur, nous ne l'achetons pas. Dans les leçons à venir, je vais vous apprendre à choisir et à travailler avec couleurs comme un pro pour donner à vos designs une belle apparence. Bâton. 24. Couleur : Échantillonnage des couleurs: eh bien, nous savons que la cueillette de bonnes couleurs est une chose très importante à faire dans les conceptions. Mais comment pouvons-nous savoir ce qui est une bonne couleur ? Et c'est quoi un mauvais collier ? Tu penses peut-être ? Oh non, j'ai un goût terrible dans les couleurs. Ne vous inquiétez pas, et j'ai un bon goût non plus. Mais il y a une astuce pour choisir les colliers, et l'astuce est de ne pas choisir les couleurs de votre chapeau ou directement à l'intérieur sigma, mais de toujours les couleurs d'une sorte d'inspiration. Cela peut être d'autres travaux de conception, comme des sites Web ou des illustrations ou des affiches, quoi que ce soit, ou même de re récompense comme des photos. Dans cette leçon, je vais vous apprendre comment utiliser le monde qui nous entoure comme notre inspiration pour nos couleurs simplement des couleurs du monde réel. Comme les gens, la nature, les animaux bien, presque toujours vous donnent des résultats. Pourquoi ? Parce que la plupart d'entre nous sont déjà d'accord qu'une orchidée est belle, mais un cafard, pas autant. Choisir un bon coloriste n'est que la moitié du travail. La seconde moitié correspond en fait aux bonnes couleurs ensemble. utilisation du monde réel est notre inspiration résout ce problème, aussi, parce que la plupart du temps le monde naturel fournit de grandes combinaisons de couleurs. Ces photos de la ligne est belle. Si nous trouvons une palette de couleurs qui est déjà sur cette image, nous pouvons être sûrs que la plupart du temps ces couleurs vont vraiment aller ensemble. Sinon, nous ne trouverions pas une photo de cette ligne comme attrayante. Affaiblir simple. Quelques couleurs dominantes de l'image. Et maintenant, nous avons une palette de couleurs qui est naturelle et harmonieuse. C' est là que ça devient intéressant. Disons que nous concevons une section qui ressemble à ceci. Si nous obtenons cette photo et l'utilisons dans notre design avec notre nouvelle palette de couleurs, nous allons obtenir des résultats vraiment beaux parce que nous ne faisons pas seulement correspondre les voitures ensemble, mais nous faisons en fait correspondre les couleurs avec notre image. Nous pouvons ensuite jouer et utiliser ces couleurs pour le texte ou les arrière-plans, ou créer des combinaisons de couleurs très intéressantes. Regarde ça. C' est comme une magie. Et j'étais dans celui qui est venu avec ces couleurs. Mère Nature l'a fait 25. Projet : Échantillonnage des couleurs: Faisons un exercice amusant sur l' échantillonnage des couleurs des images. J'ai préparé un fichier Figma pour cette mission. Il comporte trois cadres avec la même disposition. Il s'agit d'une mise en page Web très courante, avec une sorte d'écran partagé. 50 % de l'écran est consacré à l'image, puis 50 % au contenu. C'est une mise en page très simple à réaliser peut être très efficace et belle. Il vous sera utile de pratiquer cette mise en page pendant que nous pratiquons notre échantillonnage de couleurs. Il y a trois cadres dans ce fichier. Sur deux d'entre elles, je vous ai préparé des images et l'une d'elles est vide. Je veux que vous échantillonniez les couleurs de ces images pour chaque cadre et que vous peigniez le côté gauche du cadre avec une palette de couleurs. Sur la photo vide, je veux que tu choisisses ta propre photo. Vous découvrirez peut-être que toutes les photos ne sont pas un bon choix pour la palette de couleurs. Je veux également que vous utilisiez ce que vous avez appris jusqu'à présent et que vous l'appliquiez au côté gauche du cadre, la hiérarchie et à tout ce qui concerne la typographie Permettez-moi d'en faire une démonstration. Je vais utiliser un cadre vide. Tout d'abord, allons sur unsplash.com et trouvons une bonne photo. Unsplash est une excellente source de photos gratuites. Ils sont gratuits pour un usage commercial, pas seulement personnel, et ils ont, vous savez, une grande variété de photos différentes. Ils ne le sont pas très, ils ne ressemblent pas à du stock, ils sont donc assez naturels et beaux, même si, comme ils sont gratuits, ils sont beaucoup utilisés, mais nous parlerons de la photographie plus tard. D'accord, j'adore les montagnes, alors je vais choisir une belle photo avec vue sur les montagnes. Celui-ci est un bon choix. Il contient beaucoup de couleurs, ce sera donc amusant de travailler avec. Je vais d'abord créer un espace réservé pour l'image. Je vais dessiner un rectangle pour faire exactement la moitié du cadre. Nous allons vérifier la taille de notre cadre. Il fait 1 152 pixels. Maintenant, je vais faire du rectangle la moitié de cette taille. Voici une astuce intéressante de Figma. Je vais taper 1152/2, puis appuyer sur Entrée, et Figma fera le calcul C'est exactement la moitié du cadre. Je vais maintenant placer mon image. Vous pouvez directement faire glisser votre image dans Figma ou choisir l'option Placer l'image dans l'outil de forme Voici quelques points à prendre en compte lorsque vous travaillez avec des images et Figma Les photos que vous obtiendrez d'Osplash ou d'autres enseignes de stock seront assez grandes Donnez donc un peu de temps à Figma pour réfléchir, car l'image est en train de télécharger l'image ses serveurs avant de pouvoir la placer L'image sera placée dans ses dimensions d'origine. Comme cette image est très grande, elle semble super zoomée comme ça Mais comme cela fait partie du cadre, seul celui-ci est visible. Comme il est énorme, nous devons le redimensionner. Lorsque vous sélectionnez une image qui occupe tout l' espace du cadre, au lieu de sélectionner le calque d'image, elle sélectionne le cadre entier. Je trouve cela un peu ennuyeux, mais ce n'est pas grave. Pour sélectionner une couche photo, l'option la plus évidente est de la sélectionner dans le panneau Calques, mais le meilleur moyen est de cliquer sur l'image tout en maintenant la touche Ctrl ou Commande C'est une astuce très pratique. Gardez-le à l'esprit. Pour redimensionner la photo à des dimensions utiles, faisons un zoom arrière afin de voir les bordures de l'image Vous voyez ces lignes bleues, ce sont les bordures de l'image. L'image est vraiment grande par rapport au cadre. C'est pourquoi les bordures sont si éloignées du cadre. Nous pouvons saisir les poignées et redimensionner notre image. Maintenez la touche Maj enfoncée pendant cette opération pour conserver les proportions de l'image. Un élément d'image dans Figma est essentiellement un rectangle avec une image en arrière-plan. Vous n'êtes pas obligé de maintenir le quart de travail. Cela ne va pas déformer l'image, mais dans ce cas, je veux voir l'image d'origine, afin de pouvoir choisir exactement la partie de l'image à afficher Si vous placez une image sur un rectangle, elle remplira ce rectangle au lieu d' être une image indépendante. Une dernière chose à surveiller. Lorsque vous placez une image ou quoi que ce soit d'autre, assurez-vous que le calque se trouve sur cadre sur lequel vous travaillez, car en plus de ce cadre, il se peut qu' il soit accidentellement placé sur d'autres cadres situés à proximité. Ou il peut être placé sur la toile indépendamment de tous les cadres. S'il ne figure pas sur votre cadre, il ne se comportera pas comme vous le souhaitez. Cela pourrait vous rendre fou jusqu'à ce que vous le découvriez. C'est pourquoi je veux aborder toutes les manières possibles par lesquelles quelque chose pourrait mal tourner et ne pas se comporter comme prévu. C'est généralement ce qui cause la plus grande frustration lorsqu' on apprend quelque chose de nouveau, comprendre pourquoi quelque chose ne se comporte pas comme il est censé le Donc, s'il agit bizarrement, jetez un œil au panneau des fusées éclairantes et assurez-vous qu'il se trouve sur votre cadre Pour le faire glisser sur le cadre, votre curseur et la souris doivent être sur le cadre, en superposant le cadre Ensuite, il va le faire glisser à l'intérieur, et s'il sort en quelque sorte du cadre, il va le faire glisser hors du cadre et le placer sur le canevas ou ailleurs. Une dernière option pour importer une image dans Figma est de l'importer sous forme de remplissage d'image Sélectionnez le rectangle, cliquez sur les paramètres de remplissage des couleurs, puis sélectionnez l'image à partir de cette option. Vous obtiendrez cette image d' espace réservé à carreaux. Cliquez ensuite sur Choisir une image et sélectionnez simplement votre fichier image. Cela remplira votre couche avec cette image. La partie amusante de cette option est que vous pouvez le faire avec presque n'importe quel calque, même avec un calque de texte. Cela ouvre de nombreuses possibilités créatives à utiliser dans vos créations. Maintenant, l'une de ces options que vous utilisez pour importer votre image n'a pas vraiment d'importance. Le résultat est toujours un remplissage d'image. C'est ce qui arrive toujours. Même si vous placez simplement l'image sur le canevas, Figma crée simplement un rectangle et place l'image en guise de remplissage Dans ce cas précis, ma méthode préférée consiste à télécharger l'image directement dans nos rectangles, car c' est la méthode la plus contrôlée dans ce cas précis Nous savons que nous voulons que cette image fasse la moitié de ce cadre et nous avons déjà créé un rectangle d' espace réservé pour Il vaut mieux simplement y déposer l'image. est fort probable que votre image et la forme d' espace réservé vous lui avez créée ne soient pas exactement dans les mêmes proportions Lorsque vous remplissez votre forme avec l'image, l'image recadrée à certains endroits Il se peut que vous n'aimiez pas ce recadrage, vous devrez donc l'ajuster pour obtenir la position idéale Heureusement, nous pouvons le faire en sélectionnant une option de recadrage à partir d'ici , puis en déplaçant simplement notre image pour la positionner exactement comme nous le souhaitons Cet outil de recadrage fonctionne à peu près de la même manière que vous recadreriez une image sur votre téléphone Vous pouvez déplacer l'image, positionner où vous le souhaitez, et si vous avez besoin de l' agrandir ou de la réduire, vous pouvez également le faire. Remarque importante : lorsque vous modifiez la taille de l'image dans l'outil de recadrage, le redimensionnement ne bloque pas le rapport hauteur/largeur dès le départ. Vous risquez d'obtenir une image déformée si vous ne faites pas attention Une solution simple consiste à touche Maj enfoncée pendant le redimensionnement Cela bloquera le ratio d'aspécification lorsque vous redimensionnez, vous vous retrouverez avec des proportions originales et non une version pour crêpes Excellente. Notre image est prête. Maintenant, je vais styliser un peu mon texte. Vous pouvez placer votre propre texte dans le titre lorsque vous choisissez votre image Vous n'avez pas à vous soucier du paragraphe. J'ai utilisé le faux texte, la célèbre Loren Ipsum J'ai déjà les fontes en tête. Je ne les choisis pas en fonction d'images, mais vous pouvez le faire si vous le souhaitez. Le Playfair Display est une belle police de caractères dans un style de service moderne qui donne beaucoup de classe à la page Et le Lato est un excellent lien sensoriel pour tout type d'utilisation générale Maintenant, alignons nos éléments sur la grille. Vous souvenez-vous comment appliquer la grille au cadre ? Sélectionnez d'abord le cadre dans le panneau des propriétés sous la grille de mise en page, puis cliquez sur l'icône Plus. Par défaut, il s'agit d'une grille bidimensionnelle. Nous voulons des colonnes. Entrez 12 colonnes. L'espace de la gouttière est flexible. Vous pouvez généralement mettre 20 à 40. Je préfère 30 pixels. Appliquons également les marges. Les marges sont nécessaires car le contenu du site Web ne part pas des bords. Chaque site Web a une marge de contenu sur les côtés. Les meilleures marges dépendent de la largeur du cadre. Si nous concevons sur un grand écran de bureau, nos marges seront beaucoup plus importantes que si nous concevions pour le téléphone. Pour cette taille de cadre, 60 pixels, c'est plutôt bien. Y Une chose que vous remarquerez peut-être, c'est que mon espace réservé aux images ne s'aligne pas sur la grille On pourrait se demander, attendez une seconde, cette grille n'est-elle pas importante et n' alignons-nous pas nos éléments en fonction de notre grille ? Oui, c'est vrai, mais dans ce cas, notre image fait partie du canevas. Notre canevas est la couleur d'arrière-plan et les images d'arrière-plan de la page. Ils ont leur propre structure spatiale et ne respectent pas les règles de notre réseau. La grille est généralement destinée au contenu et aux éléments qui se trouvent au-dessus du canevas d'arrière-plan de votre page d'arrière-plan. S'il y a une chose que je n'aime pas dans le texte, c'est ce qu'on appelle les mots orphelins. une chose que je n'aime pas dans le texte, c'est ce qu'on appelle les mots orphelins Vous voyez ce seul mot sur la dernière ligne, c'est ce qu'on appelle un mot orphelin Dans le design, nous essayons d' éviter de tels orphelins. Ils donnent au paragraphe un aspect un peu maladroit. Ce n'est pas un crime grave de les laisser dedans, mais c'est un détail supplémentaire pour peaufiner votre travail. Dans ce cas, je romprai l'alignement avec la grille. De toute façon, ce n'est pas aussi fort sur le côté droit du texte parce que le texte est déjà irrégulier Il est normal de casser un peu la grille au profit de la correction d'un mot orphelin Il suffit de réduire la zone de texte jusqu' à ce qu' au moins un ou plusieurs mots apparaissent sur la dernière ligne pour donner à ce mot un ami Ce paragraphe semble désormais plus équilibré. C'est ce que vous recherchez en règle générale, un bloc de texte plus groupé et rectangulaire les lignes de texte étant plus uniformes dans la mesure où cela est possible Maintenant que nous avons préparé notre cadre, nous pouvons commencer à échantillonner notre palette de couleurs. Pour échantillonner une couleur de notre image, nous devons d' abord brouiller notre image Cela permet de faire la moyenne des pixels adjacents et d'obtenir une palette de couleurs plus précise, proche de ce que nos yeux perçoivent car nous ne voyons pas réellement ces pixels indépendants Dans la vraie vie, nous voyons une moyenne avec ses ombres, ses dégradés et tout ça L'outil de sélection de couleur d'un ordinateur est très précis, il saisit donc la couleur de chaque pixel Et chaque pixel n'est pas la représentation la plus précise de l'image globale. Sélectionnez l'image dans le panneau des propriétés, vous verrez l'option des effets. Ajoutez un nouvel effet en cliquant sur l'icône plus. Par défaut, cela ajoutera une ombre portée. Cliquez sur le menu déroulant pour voir les autres types d'effets et sélectionnez le flou des calques Par défaut, ce flou n'est généralement pas suffisant. Nous avons besoin d'un peu plus lourd. Pour augmenter le flou, cliquez sur l'icône, puis commencez à augmenter et arrêtez avant que les couleurs ne commencent à trop se mélanger. 24, c'est plutôt bien dans ce cas. Bien que ce ne soit pas un signe exact, vous aurez parfois besoin de beaucoup moins de flou, parfois plus, surtout si vous voulez échantillonner une couleur à partir de quelque chose de petit comme des yeux bleus ou un rouge à lèvres rouge, vous aurez besoin d'une valeur floue plus petite, sinon la couleur se mélangera trop Remarquez à quel point la palette de couleurs est très visible. Nous avons le bleu, ces couleurs marron clair et le brun foncé. Figma peut choisir ces couleurs pour nous à l'aide d'un compte-gouttes Dessine un rectangle. Cliquez ensuite sur ce champ pour changer la couleur du rectangle, puis sélectionnez le compte-gouttes Lorsque vous survolez l'image, nous choisirons la couleur à partir de ce pixel exact et peindrons le rectangle dans cette couleur Répétez le processus pour toutes les autres couleurs. nombre de couleurs que vous choisirez dépendra de l' image et de vous. Vous devez choisir les couleurs dominantes, celles qui sont indéniablement visibles et qui constituent le meilleur parti de l'image, et toutes les couleurs plus petites qui sont assez importantes incluent des tons neutres ainsi que le gris Maintenant que nous avons notre palette de couleurs, désactivez l'effet de flou sur l'image et commencez à peindre le contenu de gauche ces couleurs pour voir ce qui fonctionne et ce qui ne fonctionne pas Ajoutons un autre rectangle sur le côté gauche pour remplir notre arrière-plan. N'oubliez pas pourquoi cela couvre nos éléments car la couche se trouve en haut de la liste. Il suffit de le déplacer vers le bas pour qu'il soit organisé en arrière-plan. Vous pouvez également cliquer avec le bouton droit de la souris et sélectionner Envoyer à la page précédente. Cela enverra tout le chemin vers l'arrière. Essayons maintenant quelques couleurs de fond. Oublions ces couleurs neutres. Voyons la couleur qui va le mieux avec ce brun foncé. Oups, j'ai oublié de supprimer l'image l du texte quand je jouais avec Le bleu contraste très bien, et il peut être utile pour un design passionnant. Cette couleur vive envoyée n' est pas mal non plus. Voilà, je pense que celui-ci est le meilleur. vraiment nul pour les noms de couleurs, donc j'ai l'habitude de les rechercher sur des sites de couleurs. Celui-ci s'appelle Tumbleweed. Pour ce qui est d'un paragraphe, je peux choisir la couleur blanche. Même si cela saute trop et que le titre attire l'attention, dans de tels cas, je réduis l'opacité du texte blanc à Cela diminuera l' intensité de cette couleur blanche, et la couleur de fond s' imprégnera un peu car elle est transparente, ce qui conviendra parfaitement à l' arrière-plan. Nous pouvons également essayer le même dégringolement sur la taxe, ce qui n'est pas du tout un mauvais résultat Bien que je ne ferais jamais quelque chose comme ça, cela crée simplement une masse de couleurs au lieu de combinaisons de couleurs intentionnelles et naturelles . En ce qui concerne le paragraphe, n'optez jamais pour une option de couleur vive. Ça a juste l'air super amateur. couleur du texte d'un paragraphe Il est très difficile de définir correctement la couleur du texte d'un paragraphe. Pour les titres, les couleurs fonctionnent très bien car elles sont grandes et les couleurs éclatent correctement. Mais avec un texte de petit paragraphe, les couleurs intenses semblent étranges. Ils sont souvent difficiles à lire et ressemblent d'un directeur des ventes faisant une présentation PowerPoint. Par mesure de sécurité, utilisez simplement blanc ou du noir et jouez avec l'opacité Vous n'avez même pas à sécher l'une de ces options à partir des couleurs que vous avez échantillonnées C'est un peu risqué pour un débutant. Il est facile de se tromper. Cette option tumbleweod fonctionne , mais c'est un peu une chance car la couleur est atténuée et elle se trouve exactement dans la même palette que l'arrière-plan C'est aussi la couleur du titre. Dans toutes ces conditions, cela fonctionne. Supprimez l'une de ces conditions et elle risque de ne pas fonctionner. Cette piste d'opacité est une option parfaite et sûre. Les designers de tous niveaux adorent beaucoup l'utiliser. Tenez-vous-y pour le moment et une fois que vous aurez acquis un peu plus d'expérience, vous pourrez commencer à expérimenter davantage Dans ce cas, j'ai fait du blanc, mais sur un fond très clair, vous commencez par un paragraphe noir et diminuez l' opacité à partir de là Voyons d'autres arrière-plans de couleur. Oh, oui, ça a l'air magnifique aussi. OK, donc celui-ci me semble le plus organique et met vraiment en valeur la beauté du paysage. De plus, la couleur convient parfaitement au thème du plein air. Très bien, exercice très amusant pour commencer avec les couleurs et jouer avec elles. Après avoir soumis votre travail dans les devoirs qui suivent, vous trouverez le lien vers un fichier contenant une solution. Ne vous inquiétez pas si la solution n'est pas exactement la même que la vôtre. Il n'y a pas qu'une seule solution à cet exercice. 26. Couleur : ajuster les couleurs: Prenons un cran et rendons une couleur fière de toi. Vous avez déjà appris à des couleurs simples du monde qui vous entoure. Maintenant, apprenons à affiner ces échantillons de collier. Possibilité de trouver des couleurs de tombeau est une compétence très pratique, et nous vous laisserons clouer ces dessins. Une bonne partie de la magie de la conception est en couleur, donc nous voulons nous assurer que vous apprenez tous les secrets et devenez très confiant lorsque travaillez avec des colliers. Laissez-moi vous montrer comment et pourquoi on trouve des colliers de tombeau. C' est une photo magnifique. J' aime le contraste de couleur entre l'oiseau et l'arrière-plan. Je dis oiseau parce que je n'ai aucune idée de quelle naissance c'est. C' est un faucheur et un aigle ? Un fauconn ? Aucune idée. Simple ces deux colliers. Mais vous remarquez que les colliers, surtout le brun, ne touchent pas vraiment la marque ? Ces couleurs semblent ternes par rapport à l'image. Le truc, c'est que les plumes n'ont pas une couleur uniforme. Certaines parties sont mentées. Certaines pièces de l'étoile. La lumière se reflète également différemment sur différentes parties. Donc, tout cela donne une perception différente de l'échantillonnage d'une couleur à partir d'un seul endroit. Mais les couleurs sur l'oiseau sont plus légères, plus vibrantes et globalement semblent plus excitantes. C' est ce que nous pouvons faire pour tirer le meilleur parti de notre couleur en vig Ma ou tout autre auto conçu juste. ailleurs, nous avons cet outil de sélecteur de couleurs alertes apprendre à travailler cette chose très rapidement. Cette année est un spectre de couleurs sur cette pièce remplie, nous vous demandons pic. Une teinte est l'ingrédient principal qui rend le collier. Comme vous pouvez le voir, la teinte de ce collier est juste ici, où la poignée du curseur est sur le spectre. Deux autres ingrédients qui composent notre couleur sont la luminosité en saturation. La luminosité est l'axe vertical. Sur cette carte. C' est exactement ce qu'il dit. Comme le choléra est brillant est retiré verticalement sur la carte. Plus lumineux, la couleur devient. Et au fur et à mesure que nous descendons, la couleur devient foncée. Vous pouvez penser à cela comme la façon dont la lumière tombe sur la couleur. Pendant une journée ensoleillée d'été, vous pouvez voir un collier un spécifique vous pleinement car il y a beaucoup de lumière qui tombe dessus. Mais la nuit, dans votre chambre avec les lumières, tout quand il est noir et que vous ne voyez rien que tout est noir, même la couleur rouge la plus brillante. C' est pourquoi le cercle inférieur est complètement noir. Sur cette échelle, 0% de lumière signifie que nous ne voyons pas. La saturation n'est pas l'axe horizontal de cette carte. C' est l'intensité de ce Hugh particulier dans la couleur. Lorsque vous vous déplacez vers la droite, la saturation augmente et le collier devient plus intense. Et lorsque vous vous déplacez vers la gauche, nous appelons cela de saturation que la teinte commence à disparaître jusqu'à ce qu'elle soit complètement retirée de notre collier. Ensuite, on a un niveau de gris en noir et blanc. Photo est une photo entièrement saturée sur ce sélecteur de couleurs. Il y a une liste déroulante qui vous permet de basculer entre différents systèmes de gestion des couleurs par défaut. C' est des hacks, ce qui signifie du code hexi décimal. Changez ceci en HSB. HSB signifie exactement ce que je viens de parler de teinte, saturation et de luminosité. Les trois valeurs peuvent être vues ici. 1ère 1 émission seconde saturation dans les années trente. Luminosité. Le dernier pourcentage évalue l'opacité. Retourne à la porte Burt pour affiner la couleur. Nous gardons les qs d'aujourd'hui et jouons avec saturation et luminosité. Il est important de conserver la même valeur de teinte sinon, pour obtenir une couleur complètement différente qui ne correspondra plus à l'image d'origine. D' abord, je vais augmenter la luminosité parce qu'il fait trop sombre. La valeur de luminosité avant était de 78. Fini l'a augmenté. C' est 95 l'échelle à la fois sur la luminosité et la saturation et va de zéro à la maison, 100 comme pourcentage. Et maintenant diminuer la saturation juste un peu. Et nous obtiendrons un résultat comme celui-ci. C' est plus comme ça. Il se sent plus près du collier de l'oiseau que l'original. La même chose que nous pouvons faire avec le bleu. Il fait un peu sombre. Je vais juste augmenter la luminosité un peu, et c'est tout. De cette façon. Les deux couleurs sont vibrantes et lumineuses. Une telle amélioration de ce que nous avions avant Ceci est plus approprié pour la conception Web d'aujourd'hui. Regardez, sont des couleurs passionnantes qui contras les uns avec les autres très bien et globalement semble frais et moderne 27. Assignment : réglage fin des couleurs: Dans ce devoir, je veux que vous reveniez au fichier Figma du devoir précédent Passez en revue chaque cadre que vous avez conçu et affinez les combinaisons de couleurs finales que vous avez utilisées dans votre design. Permettez-moi de vous le montrer sur le même exemple que celui que j'ai fait moi-même. C'est le résultat final que j'ai accepté. Je pense qu'il peut être réglé avec précision, en particulier sur un fond brun foncé. Il fait un peu trop sombre et la transition entre l'image et le remplissage d'arrière-plan n'est pas aussi évidente. Il a certainement besoin d'un peu d'éclaircissement. Voici une porte. Dupliquez vos cadres lorsque vous travaillez sur une nouvelle variante. Le design implique beaucoup d' exploration et de révisions, prenez l'habitude d'avoir plusieurs versions d' un même écran. Je ne l'ai pas fait au début pour une nouvelle variante, je vais simplement continuer à modifier le cadre d'origine. Parfois, après 20 minutes passées à peaufiner et à changer des choses, je me retrouve avec une option qui n'était pas meilleure que la version originale, mais je n'avais aucun moyen de comparer Et le retour en arrière était trop difficile. Si vous ne conservez pas vos variations, il devient difficile de changer d'avis et vous vous contenterez souvent d'une option moindre. Pour dupliquer un cadre, procédez comme vous pouvez vous y attendre avec n'importe quel autre élément de Figma Sélectionnez le cadre et appuyez sur les touches C et V ou faites glisser le pointeur en appuyant sur la touche out ou sur option OK, sélectionnez le calque d'arrière-plan. Cliquez sur Échouer. Assurez-vous que la gestion des couleurs HSB sélectionnée et non HX ou autre. Pour me simplifier la tâche, j'ai une règle personnelle. J'augmente ou diminue les valeurs par incréments de dix. C'est juste pour limiter mes options. Sinon, je passerai peut-être le moins de temps à comparer 32 points de luminosité avec 33. Maintenez la touche Shift enfoncée et appuyez sur les flèches haut et bas pour augmenter ou diminuer les valeurs par incréments de dix Voilà. C'est bien mieux. Voyons si le réglage précis la couleur du titre donne de bons résultats La plupart du temps, je n'ai aucune idée de ce qui va fonctionner ou non. Le design, c'est beaucoup jouer et comparer les options. La luminosité est vraiment bonne, donc je vais juste jouer avec la saturation. Oh, voilà, c'est magnifique. Voyons l'avant et l' après. Regarde ça. L'original n'était pas mal, mais j'ai obtenu un résultat encore meilleur. Le texte est plus facile à lire dans la nouvelle version. La transition vers l' image est beaucoup plus évidente et le titre et arrière-plan semblent avoir été faits l'un pour l'autre C'est tellement amusant. J'adore jouer avec les couleurs. Le design est censé être amusant. Deviens fou. Amuse-toi bien avec. Si vous avez des difficultés avec quelque chose, postez vos questions dans la section questions-réponses et je vous aiderai 28. 31 Chasse aux couleurs NOUVELLE INTERFACE: Voici deux autres méthodes pour trouver des couleurs. Le premier, et mon préféré, le vol. Il n'y a rien de mal à voler des couleurs. Contrairement à d'autres œuvres créatives, les couleurs peuvent réellement appartenir à n'importe qui. Les designers empruntent donc des couleurs les uns aux autres tout le temps. Il s'agit essentiellement d'échantillonner les couleurs du travail d'autres personnes au lieu de celles de la photographie. C'est également une approche plus simple pour trouver les couleurs que d'échantillonner les couleurs de la photographie, comme nous l'avons fait. Il s'agit d'une option plus originale que vous pouvez commencer à appliquer immédiatement à votre travail. Il existe de nombreux sites Web qui créent du travail de conception et de l'inspiration. J'y ai consacré une leçon spéciale. Plus tard, nous aborderons plus en profondeur le thème de l' inspiration et son importance dans votre flux de travail. Pour l'instant, examinons un endroit où trouver l'inspiration en matière de couleurs, dribble.com Vous pouvez y trouver d'excellentes sources d'inspiration. La plupart du travail ici ne concerne même pas de vrais projets. C'est du show and tell, beaucoup d'explorations, d'idées et de pratiques de la part d'autres designers. Supposons que nous travaillions sur un site Web lié à la finance. Nous effectuerons une recherche par le mot clé Finance et trouverons beaucoup d'inspiration pour notre travail. Lorsque nous trouvons des couleurs qui nous plaisent, nous pouvons soit les échantillonner exactement de la même manière que nous l'avons fait pour les photos. Enregistrez simplement l'image et placez-la dans Figma, puis utilisez l'outil compte-gouttes ou utilisez un outil compte-gouttes distinct qui peut échantillonner les couleurs de Si vous êtes sur Mac, il dispose déjà d'un outil de pipette. C'est un utilitaire appelé colorimètre numérique. Si vous utilisez un PC, vous pouvez utiliser des extensions de navigateur. ColorZ, par exemple, est une très bonne extension Chrome pour cela La deuxième façon de trouver des couleurs consiste à utiliser des sites générateurs de couleurs tels que coolers.co Vous pouvez soit générer des palettes à partir de zéro, soit coller une ou deux couleurs que vous souhaitez utiliser et générer d' autres correspondances qui fonctionneront avec cette couleur. Voici une cassette pro. Évitez les couleurs brutes. Les couleurs brutes sont celles qui ont 100 % de saturation et 100 % de luminosité. C'est une erreur que commettent de nombreux non-designers lorsqu'ils conçoivent, par exemple, des présentations pour l'école ou travail ou des couvertures Facebook, etc. Ils utilisent souvent des couleurs de ligne comme celles-ci. Nous aimons généralement les couleurs présentes dans le monde naturel. Et rarement, vous obtenez de telles couleurs dans la nature. Même les exemples les plus extrêmes, comme Nemo ici, ne contiennent pas de couleurs brutes. Cependant, cela ne signifie pas que vous ne pouvez jamais les utiliser. Il peut arriver qu'il y ait des tendances ou que l'on veuille délibérément et intentionnellement utiliser quelque chose comme un vert fluorescent très vif , ce n'est pas un problème. Comme toujours avec le design, si c'est intentionnel, cela fonctionnera probablement, et si ce n'est pas le cas, cela peut être nul 29. Couleur : couleurs de marque: J' adore quand je travaille sur un projet qui ne vient pas déjà avec les couleurs de la marque. Cela signifie que je peux trouver la palette de couleurs parfaite pour le projet dans mes mains ne sera pas liée avec les couleurs existantes de la marque, et j'ai été plus libre d'explorer. Mais souvent, nous ne pouvons pas choisir nos propres couleurs. C' est une bonne nouvelle si le projet vient avec de bonnes couleurs de marque, mais pas aussi monétaire. Si le son de la couleur est aussi agréable. Comment savez-vous si vous devez utiliser des couleurs de marque sur le projet de site Web ne sont pas faciles. Si le projet a déjà un logo, cela signifie que vous devez utiliser la marque. Les couleurs devaient obtenir les couleurs du directeur du logo. Mais la meilleure chose à faire est de demander à vos clients le style Dieu ou les lignes directrices de la marque qui est venu avec le logo. Tu ressembles à ça. Il s'agit d'un guide qu'un concepteur de logo fournit habituellement de décliner chaque fois qu'ils fournissent des conceptions finales de logo. Il comprendra des couleurs primaires, secondaires et neutres. Il pourrait également avoir des lignes directrices sur la topographie et d'autres éléments de marque. Si un tel document existe que vous devez coller avec leurs coloristes et typographie fournis ici. L' existence de ce type dépend de combien le client était prêt à payer et à quel point un designer qu'il a embauché. S' ils sont allés bon marché et ont obtenu un logo sur Fiverr, alors ils pourraient ne pas avoir un guide de style du tout. Ou si le logo a été conçu il y a 10 ans par le neveu du propriétaire, il savait comment cliquer sur quelques boutons sur la boutique photo. Alors ils n'en ont certainement pas. Les couleurs laides sont très difficiles à travailler. Et si le client a économisé de l'argent sur la conception du logo que je peux presque toujours chauve-souris que les couleurs sur le logo vont être terribles. Les concepteurs de mauvais logo ont une compétence unique de voyager dans le passé et d'emprunter des couleurs des années nonante. Dans des moments comme ça, je suggère parfois aux clients ah, marque rafraîchir la couleur d'un frais de leur marque. Ils peuvent garder le logo dans la forme du logo, et une fois que j'ai conçu le site Web et que nous nous installons sur la nouvelle palette de couleurs, alors ils peuvent aller de l'avant et rafraîchir le logo existant avec les nouvelles couleurs. Si ce n'est pas possible et que les couleurs sont complètes, pourriez-vous. Ensuite, je vais limiter l'utilisation de leurs couleurs sur le site, et je vais utiliser des couleurs neutres MAWR comme les blancs, gris et, euh, euh, noirs parce qu'ils peuvent être utilisés avec n'importe quelle palette de couleurs et ensuite utiliser des options limitées ah peu et les versions limitées de leurs couleurs de marque. C' est un bon milieu entre le besoin de coller avec la couleur de la marque est de ne pas les utiliser tellement afin qu'ils ne rendent pas l'ensemble du site Web terrible. 30. Comment utiliser des photos pour créer des sites Web en bouche: les photos sont quelque chose que vous allez faire beaucoup. En tant que concepteur Web, c'est un ingrédient majeur pour faire de beaux designs. Lorsque de nombreux sites attrayants, vous verrez la beauté provenant principalement de la photo bien choisie . Avec la bonne photo et la topographie bien placée, vous pouvez obtenir des résultats vraiment époustouflants dans les leçons à venir. Je vais vous apprendre quelques astuces de conception sur la manipulation des photos pour créer des designs alléchants . 31. Photos : superpositions d'images: Une belle photo peut faire des merveilles pour un design. J'adore cette photo. C'est magnifique. Les couleurs sont magnifiques. C'est simple mais cela ressemble à un conte de fées, mais nous avons un problème avec cette composition. Il n'y a pas assez de contraste entre l'arrière-plan et tous les objets situés au-dessus. Le contraste est si faible que la plupart des taxes sont totalement illisibles Produire un design comme celui-ci comme résultat final est un travail terrible, même si tout le reste est parfait et l'image si belle. Comment résoudre ce problème en utilisant des superpositions ? En gros, placer des remplissages de couleur sur le dessus de l'image. La plus courante consiste à y mettre une couche foncée. Dans Figma, cela signifie ajouter un fond de couleur noire sur le dessus de l'image et ajouter de la transparence à ce champ jusqu'à obtenir un bon contraste, mais avant qu'il ne devienne trop sombre. Une autre méthode est appelée teinture. Il prend la photo et lui donne une teinte de couleur différente. Pour ce faire, vous prenez l'image et désaturez pour la transformer en photo en noir et blanc Et puis, encore une fois, nous ajoutons un fond de couleur, mais cette fois, au lieu du noir, vous choisissez une couleur différente. Cela donnera à l'image une teinte de cette couleur. Ceci est particulièrement utile si vous souhaitez utiliser les couleurs de la marque dans le design. C'est une astuce très pratique. Vous pouvez également appliquer le correctif à des endroits spécifiques plutôt qu'à la page entière. Par exemple, ici, j'ai placé un cadre transparent foncé derrière le contenu, et j'ai également ajouté un dégradé transparent foncé derrière la barre de navigation. Est-ce que vous le remarquez par intermittence ? Mais, en passant, je ne suis pas un grand fan de ces rectangles noirs placés au hasard derrière le contenu J'évite donc de les utiliser si je sais vraiment comment faire. L'utilisation de grandes images d'arrière-plan est une conception très simple. Il n'y a pas beaucoup de design réellement impliqué. Vous trouvez une photo impressionnante et y mettez votre contenu en blanc. Crée un design très attrayant sans trop d'effort. Et d'après mon expérience, les clients adorent. 32. Assignment : superpositions d'images: Dans cette vidéo, nous allons nous entraîner à appliquer des superpositions à nos images Alors allumez votre Figma et allons-y. Dans ce fichier Figma, j'ai préparé trois cadres. Le contenu est entièrement conçu et prêt. Votre tâche consiste à trouver des photos pour chaque cadre et à appliquer des superpositions d'images afin que le contenu soit bien visible Permettez-moi de vous montrer le premier. Nous avons donc cette section consacrée aux héros pour une application de méditation ou quelque chose comme ça. Je ne sais pas exactement. Je récupère ce contenu sur des sites Web aléatoires. Il faut d'abord trouver une photo. Allez donc sur splash.com et essayons de rechercher des photos de méditation Il n'est pas nécessaire que ce soit exactement la méditation. Vous pouvez rechercher ce qui vous convient, par exemple des lacs calmes, des eaux, de la nature, du ciel, des images essentiellement apaisantes et apaisantes. Lorsque vous recherchez des photos, il n'est pas nécessaire d'aller trop littéralement et de laisser l'image décrire tout ce qui se passe en action. Qu'en est-il des techniques permettant de retrouver des photos plus tard ? Cette photo me convient parfaitement. Vous pouvez utiliser la même chose ou autre chose à votre guise. Téléchargez ici. Maintenant, nous allons placer l' image dans Figma. Vous pouvez faire glisser l'image directement dans Figma si vous le souhaitez ou vous pouvez utiliser une option de localisation d' image à partir d'ici Sélectionnez votre fichier, puis une fois que vous avez placé cet ongle sur votre curseur, cliquez n'importe où sur le cadre pour placer l'image. L'image a été insérée dans ses dimensions d'origine, elle est donc super zoomée et réduisons-la un zoom arrière pour voir les poignées de l'image, puis saisissez simplement les poignées pour préciser la photo Vous verrez que FIMA ne déforme pas la photo si vous la réduisez bizarrement, ce qui est Ce n'est généralement pas le cas dans d'autres logiciels de conception ou dans de nombreux autres logiciels Mais cela signifie que certaines parties sont recadrées. Si vous ne voulez pas qu'aucune des parties soit recadrée, maintenez la touche Maj enfoncée pendant que vous réduisez l'image Cela va bloquer le rapport hauteur/largeur. Maintenant, nous devons renvoyer la couche d'image afin qu'elle se trouve derrière le contenu. Deux options : utiliser une carte de contrôle abrégée au clavier ou une commande plus un crochet. Une petite chose peut vous empêcher de vous retrouver lorsque vous cliquez sur l'image, Pigma sélectionne le cadre entier au lieu de l'image Utilisez donc la touche Ctrl ou le clic de commande pour sélectionner directement la photo. Le crochet gauche le renvoie vers l'arrière et le crochet droit le fait avancer. Et deuxième option, cliquez avec le bouton droit sur l'image, puis sélectionnez-la , renvoyez-la en arrière, et vous retrouverez en un seul mouvement. Il en va de même ici. Vous devez d'abord sélectionner l'image avec le clic Ctrl , puis appuyer sur le clic droit. Contrôle plus clic droit, et ça ne marchera pas. J'ai vraiment eu de la chance, l'image est superbe. Mais comme vous pouvez le constater, le contenu est très difficile à lire, alors appliquons notre superposition Sélectionnez la couche d'image et dans les options de remplissage, ajoutez une autre sensation en cliquant sur l'icône plus. Assurez-vous que le calque d'image sélectionné et non le cadre, sinon cela ne fonctionnera pas. Ensuite, commencez à jouer avec le contrôle d'opacité. degré de transparence dont nous avons besoin dépendra de l'image elle-même. Idéalement, nous voulons être aussi transparents que possible jusqu'à ce que le contenu devienne difficile à lire. Je pense qu'environ 30 % fonctionnent bien avec cette photo, et c'est tout ce que vous devez faire pour chaque cadre. Je vais maintenant vous montrer l'option de teinte afin que vous puissiez l'utiliser sur l'un des cadres Première étape de la teinture, nous devons rendre la photo en noir et blanc C'est super simple à faire dans Figma, il cliquer sur le fond de l'image et diminuer la saturation jusqu'en bas. Souvenez-vous des leçons de couleur saturation est la quantité de teinte de la couleur. 0 % signifie que la teinte a complètement disparu, donc aucune couleur. C'est ce qui se passe ici. L'étape suivante consiste à ajouter une teinte de couleur. Cela va être ajouté à ce remplissage de superposition. Nous allons changer la couleur noire pour autre chose. Vous pouvez également jouer avec l'opacité pour obtenir le meilleur résultat Vous pouvez également ajuster les autres contenus de la page s'ils ne fonctionnent pas correctement. Par exemple, le bouton d'inscription en haut est trop pâle, donc j'augmenterais légèrement l' opacité De plus, sur des revêtements teintés comme celui-ci, une pratique courante consiste à utiliser les couleurs de la marque C'est là que la teinte entre vraiment en jeu. Sinon, cela ne sert vraiment à rien, et il vaut mieux utiliser la photo originale avec des couleurs éclatantes. Par exemple, quelles que soient les couleurs de la marque, nous les utiliserions comme teinte et peut-être comme couleur de bouton. Si vous devez déplacer le contenu la page dans ces cadres, vous pouvez le faire car il arrive que quelque chose interagisse avec le contenu sur l'image d'arrière-plan . Si vous devez prendre ce contenu et l'aligner au centre, vous pouvez le faire si vous devez réduire un titre ou l'agrandir ou le réduire, vous pouvez le faire C'est à vous de décider, c'est sûr. Maintenant, terminez le travail avec deux autres cadres et soumettez les résultats des trois cadres du devoir par la suite 33. Photos : Techniques de Cropping - Cropping: Je suis un grand fan de la conception d'affiches de cinéma. La plupart d'entre eux ont un excellent travail de conception. C' est intrigant, excitant et souvent mystérieux. Je n'ai pas l'habitude de regarder des affiches de cinéma dans les rues et d'ennuyer ma copine avec des détails sur la typographie qui utilisaient. Et qu'est-ce qu'ils ont fait avec la photo et avec une sorte de truc de conception qu'ils ont utilisé dessus. Lorsque vous apprenez les principes fondamentaux d'un bon design, vous ne regarderez plus jamais les affiches de film de la même manière. Ici, sur ces deux affiches, je veux que vous remarquiez la similitude dans la façon dont les photos sont utilisées. Vous remarquez comment ils sont plein chapeau est invisible et il zoomé très étroitement sur leur visage. Ceci s'appelle Extreme Crop. Dans cette leçon et suivante, je vais vous apprendre plusieurs façons de recadrer une image. Comment cool a été conçu. Il y a même des astuces sur la façon de recadrer une photo. Commençons par une culture extrême. Rappelez-vous cet exemple de la leçon de couleur ? La photo originale hors ligne est en fait ceci, mais cette mise en page n'est pas aussi impressionnante que la précédente, malgré le fait que nous Seymour du Lion par rapport à la vue complète. Son regard est devenu beaucoup plus intense et un peu troublant. Il ajoute plus d'émotion et de drame à l'image. Il y a deux choses qui se passent ici. abord, il y a plus de concentration sur la partie la plus importante de tout être leur visage et surtout les yeux. Cela rend un tir plus intime. Les yeux nous parlent comme s'ils essayaient de nous donner un message ou de montrer sorte d'émotion, nous rendent plus curieux et intéressés par la seconde cachette. Certaines parties du sujet lit Mystère. L' histoire qui est sur l'affiche ne s'arrête pas là. Juste à côté de l'affiche, on dirait qu'il y a beaucoup plus à lire, que ce que nous voyons, qui signifie que nous voulons le savoir. Et nous voulons résoudre le puzzle de ce mystère. C' est ainsi que vous faites un design intéressant. La culture extrême n'est pas seulement utilisée sur les humains et les animaux. Il peut être utilisé sur des objets. Pour cela, un excellent exemple de culture extrême. Je suis tombé sur un site web découper des parties de la bicyclette rend la section plus intéressante. La clé pour clouer les cultures extrêmes est de ne pas aller au feu et de rendre l'objet méconnaissable. Le public doit comprendre quel début. Vérifiez instantanément sans plisser ou faire une pause, même pendant une seconde, jusqu'à ce que l'objet reste évident. Alors vous avez la liberté d'aller assez extrême. Par exemple, disons que vous concevez un site web pour un magasin de guitare. Au lieu d'utiliser la forme complète de la guitare, vous pouvez zoomer et recadrer à la tête de la guitare. On voit clairement que c'est une guitare. Absolument indéniable. Mais ce n'est pas plus intéressant de cette façon. On taquinait un peu un public. Nous passons un peu d'informations devant eux, mais aucune ne révélant toute la situation. Nous leur faisons finir le puzzle à votre contenu. Simple de couleur de la guitare. Rendre le texte plus léger pour ne pas rivaliser avec le titre et Bam ! Vous avez une excellente section. C' est intéressant et intrigant. Rappelez-vous la dernière chose à propos de la typographie et comment faire correspondre la personnalité et l'humeur du type Pace avec le contexte. Jetez un coup d'œil au titre des guitares classiques sans savoir quoi que ce soit sur les guitares. Le classique de la paroisse dicte déjà quel choix nous devrions faire avec une typographie utilisant une face de cravate géométrique moderne comme Futura serait si déplacé ici. Mais une police de caractères de script comme Apple Chancery, est un excellent match. Souvent, vous aurez besoin de concevoir pour un espace très étroit, par exemple, Ah, Ah, bannière horizontale pour les inscriptions à la newsletter dans un espace étroit comme ceux-ci, lorsque nous plaçons une image que le drame et la puissance dans les images diminuent parce que comme il est petite image en désaccord avec beaucoup d'émotion en elle, Mais il est perdu. Il y a une excellente solution à cela. On peut trouver un cadre qui raconte l'histoire. Dans ce cas, ce sont les visages et zoom dans cette image de ces cadres qui dépeint encore l'histoire de l' image. Le visage de l'enfant est mis au point, et les parties du visage de la mère sont suffisantes pour démontrer le mouvement de la photo comme amour et les vibrations heureuses au contenu. Et c'est tout. Maintenant, nous obtenons une bannière plus efficace que Motion est toujours là, et nous n'avons pas à filtrer pour comprendre ce qui se passe en dégâts. Cette astuce est très pratique pour Blawg Hatters et pages d'article trouver un cadre qui raconte l' histoire sur son propre recadrage à cela et Maintenant, vous avez un hander très intéressant pour une page bloquée . Un professeur de graphisme a appelé cette technique en regardant à travers les stores. Pensez-y non pas comme une photo recadrée, mais plutôt comme les parties de la vue que vous voyez en regardant à travers les stores. 34. 38 Soft crop NOUVEAU: Un autre type de culture est appelé culture molle. Le recadrage souple n'a pas de bord dur. L'image s'estompe progressivement. Cela se fait généralement en ajoutant une couche de décoloration sur le dessus de l'image Lorsqu'il est de la même couleur que le canevas, en particulier le blanc, il semble que l'image soit en train de disparaître. Cela semble naturel. Nous avons maintenant un excellent espace sur la gauche où nous pouvons ajouter notre contenu. Le résultat est fantastique. Le contenu est étalé sur la partie large de la composition. Cela lui donne un espace de respiration sain. Le contenu est aéré et gratuit, il est naturel, se fond dans une image de fond sans il se fond dans une image de fond sans la bloquer et créer du bruit supplémentaire Utilisons-nous les concepts de design que nous avons appris jusqu'à présent ? Vous pariez que nous le sommes. Il y a un point focal clair , à savoir le sommet de la montagne émergeant des nuages. Le reste du contenu est organisé selon une hiérarchie visuelle appropriée, commençant par un gros titre en gras, note et un alignement clairs C'est une astuce très simple mais super puissante. C'est l'une de mes techniques préférées où je travaille maintenant avec des images. Les écrans des ordinateurs de bureau et des ordinateurs portables sont assez larges. Pourtant, parfois, vous trouvez l'image parfaite, mais elle est verticale. n'est pas une bonne solution pour l'utiliser comme arrière-plan pour une section d'écran large comme celle-ci. La majeure partie de l'image est étrangement recadrée et perd son sens. C'est trop confus et facile à regarder, et il n'y a pratiquement pas d' espace pour présenter notre contenu. Presque jamais, au grand jamais, vous ne souhaitez placer une image verticale comme arrière-plan pour une section pleine largeur. Avec une récolte molle, nous obtenons un résultat totalement différent. La photo conserve tous ses aspects importants, et nous disposons d'un espace parfait pour y placer le contenu. Cette mise en page a un point focal clair, qui est le gars, évidemment. Le contenu est très lisible car il est sur fond blanc Si j'utilise une image verticale comme arrière-plan pleine largeur, j'obtiens un résultat très chaotique. Le contenu est en train de fusionner avec un point focal de l'image. Le texte n'est pas suffisamment visible. C'est difficile à lire et le tout est très bruyant. En revanche, avec un recadrage doux, nous donnons à chaque pièce de cette composition son propre espace, ce qui nous donne un aspect épuré et une grande asibilité Il est encore plus facile de travailler avec des photos sur fond noir uniforme . Il suffit d'échantillonner la couleur à partir du tout dernier pixel sur le bord de l'image. Remplissez l'espace avec cette couleur. Disposez l'image dans la position la plus appropriée et vous obtiendrez une mise en page facile avec beaucoup d'espace pour placer magnifiquement votre contenu. L'extension du bord de cette image cette manière peut fonctionner sur d'autres couleurs que le noir, mais cela nécessite une correction supplémentaire. OK. Sur une image comme celle-ci, si nous remplissons l'espace en utilisant cette méthode, nous obtiendrons un résultat comme celui-ci. Il existe une séparation stricte entre l'image et l'arrière-plan, ce qui est un défaut évident, et nous ne voulons jamais avoir un design présentant de tels défauts évidents J'espère que vous pourrez voir cette limite entre le sable et la couleur de fond. Peut-être que sur votre ordinateur, à cause de la compression vidéo, cela brouille ce bord dur Mais cela se produit parce que objets de la vie réelle ne sont jamais d'une seule couleur, pas même des objets uniformes comme le sable. Ainsi, lorsque nous échantillonnons une seule couleur de l'objet, il ne s'agit que de cette seule couleur. Une façon de résoudre ce problème consiste à appliquer le même dégradé de dégradé. Et dans ce jeu, au lieu d'utiliser du blanc, nous allons échantillonner cette couleur exacte à partir de l'image. À l'heure actuelle, le sable se fond doucement et naturellement dans cette couleur de fond Du côté vert, cependant, il y a beaucoup de textures et de mélanges de couleurs, sorte que le résultat n'a pas l' air aussi naturel. Ce n'est pas mal du tout. Il peut très bien être utilisé. Cependant, contrairement aux trois autres exemples présentés ici, le vert apparaît sous forme de dégradé superposé sur l'image Cela ressemble plus à un rideau qui se décolore au-dessus de l'image. C'est une très bonne chose à faire, et vous pouvez certainement l'utiliser. Cependant, il y a une astuce que j'utilise dans de tels cas, qui nous donne un aspect plus agréable. Laisse-moi te montrer. Si notre image n'est pas assez large pour remplir tout le cadre, nous pouvons prendre la partie de l' image qui est simple sans formes compliquées et étirer pour sentir l'espace restant. Il est important de n'étirer que cette partie de l'image au lieu d' étirer l'ensemble. Une partie simple ne contient pas beaucoup de détails et n'est pas précise. Ainsi, la partie importante de l'image est nette dans ses proportions d'origine. Vous ne pouvez pas le faire avec toutes les photos uniquement si l'arrière-plan de la photo est déjà flou ce qui peut permettre un étirement supplémentaire Au niveau de la copie, nous avons une très belle section qui semble naturelle le contenu est facile à lire et la section de pose est vraiment bien équilibrée. C'est ainsi que le design simple et amusant peut être de petites astuces qui vous donnent d'excellents résultats. La connaissance des astuces est ce pour quoi les designers sont bien payés. Mes clients qualifient généralement cela de magique, et ils me diront, Oh Vaca, nous avons besoin d'un nouveau design pour cette page Peux-tu faire ta magie ? Mais ce n'est pas de la magie. C'est de la science. 35. Assignment : recadrage photo: Dans ce devoir, vous mettrez en pratique techniques de recadrage que vous avez apprises jusqu'à présent Dans le fichier d'assignation, vous verrez trois cadres. Chacune possède son propre contenu et une image. Je veux que vous appliquiez un recadrage différent pour chaque image. Je vais vous montrer comment appliquer ces recadrages d'image dans un instant Sur le premier cadre intitulé Extreme Crop, je veux que vous appliquiez exactement ce recadrage extrême à l'image du garçon. En termes de mise en page, vous pouvez le faire en écran partagé comme vous l'avez fait lors des missions précédentes. Comme d'habitude, personnalisez le contenu en conséquence, choisissez vos téléphones, tailles, couleurs et alignez les éléments sur la grille. Sur le deuxième cadre, je veux que vous appliquiez un recadrage souple blanc. Je vais vous expliquer comment cela se fait. Sur le dernier cadre, je veux que vous appliquiez une couleur soft crop. Identique à la version blanche, mais en utilisant la couleur de l'image pour créer une transition fluide. Je vais aussi vous montrer comment faire. C'est bon. Commençons par une récolte extrême. Extreme Crop est très simple. Vous pouvez à peu près deviner comment cela va fonctionner. Je vais créer un écran partagé et recadrer cette image directement à l'intérieur. Maintenant, faisons de ce rectangle exactement la moitié de l'écran. Nous pouvons demander à Figma de faire le calcul à notre place. Le cadre est de 1 152 pixels en blanc. Tapez 1152/2, et nous obtenons exactement la moitié. Alignez-le sur le bord droit comme ceci. Ouvrez l'outil de recadrage. Trouvez maintenant les poignées de l' image et redimensionnez-la pour créer un effet de recadrage extrême, puis faites glisser l'image pour trouver votre place Voici quelques conseils pour effectuer cette culture. Il n'est pas nécessaire de recadrer parfaitement tous les côtés. Vous ne pouvez masquer qu'un côté du visage ou d'un objet. L'objectif du recadrage extrême est de créer mystère en masquant certaines parties du sujet ou en choisissant une petite partie de l'image entière et en ne racontant l'histoire qu' à travers cette tranche. Dans ce cas, je préfère centrer la phase des lignes. Cela fonctionne mieux avec les mises en page en écran partagé comme celle-ci. Si j'utilisais une mise en page pleine largeur, recadrage latéral conviendrait peut-être mieux. Autre conseil : lorsque vous recadrez une personne ou une image, cela doit se faire sur les bords du cadre Si vous recadrez une image et que vous la placez loin des bords, cette astuce ne fonctionne pas. Vous obtenez en fait un résultat très étrange. Il s'agit simplement d'une image étrangement recadrée qui est placée sur le Souvenez-vous de ce que j'ai déjà dit, public doit se demander ce qu'il y a au-delà des frontières. Le fait que nous y allions, c'est en fait comme regarder par une fenêtre. Ce n'est donc pas que l'image est recadrée, mais c'est tout ce que nous pouvons voir à travers la fenêtre Lorsque l'image est recadrée sur les bords, le public peut avoir l'impression que l'image dépasse ses limites Et c'est exactement la curiosité visuelle que vous créez ici. OK. Maintenant, pour ce qui est de la récolte molle, c'est assez simple également. Ce que nous devons faire, c'est placer un rectangle blanc décoloré sur le bord de l'image, afin de lisser bord final gauche de la Cela se fait à l'aide d'un remplissage en dégradé. Tracez un rectangle. Accédez au remplissage de ce rectangle. Sous ces petites cases, sélectionnez celle qui dit dégradé. Linéaire, radial, angulaire, en diamant. Ce sont tous des remplissages en dégradé. Vous remarquerez que le remplissage du rectangle commence par une couleur en haut et passe à une couleur différente en bas Nous voulons que ce soit de couleur blanche. À l'intérieur du sélecteur de couleurs, nous avons deux couleurs, début et la couleur de fin. Cela montre la même chose. Nous voulons que la couleur de départ soit blanche avec une opacité de 100 et que la fin soit blanche à nouveau, mais avec une opacité de 0 %, c'est-à-dire transparente Cela créera alors cet effet de décoloration. Voici une couleur de départ. Sur la carte des couleurs, faites glisser le point vers le coin supérieur gauche, car c'est là que se trouve le blanc. Si vous cliquez accidentellement sur cette ligne de dégradé, elle changera l'emplacement de début et de fin des couleurs Il suffit de les faire glisser vers leurs coins. L'arrêt supplémentaire peut être retiré d'ici. Procédez de même pour la couleur finale. S. Modifiez l'opacité à 0 % pour la couleur de fin. Nous avons maintenant un dégradé de blanc décoloré. Mais c'est une mauvaise direction. Nous voulons qu'il commence par la gauche et s'estompe à droite. Pour changer de direction, retournez à l'outil de dégradé et cliquez sur cette petite icône qui indique faire pivoter le dégradé. Cliquez dessus plusieurs fois jusqu'à ce que vous obteniez la direction souhaitée. Nous avons besoin que le blanc à 100 % commence par le bord gauche, puis disparaisse à 0 % vers la droite. Nous avons maintenant une direction correcte des dégradés. Nous positionnons maintenant ce remplissage juste au bord de l'image, là où il rencontre un fond blanc. Et voilà notre récolte molle. Vous pouvez également étirer ce dégradé de remplissage pour rendre le destin plus fluide. Comme vous pouvez le constater, la transition est un peu abrupte. Si vous étendez le remplissage du dégradé, il s'étale de manière plus uniforme et rend la transition plus fluide et plus naturelle. Maintenant, selon l'image, cela suffira parfois, mais parfois vous aurez tout de même une petite transition abrupte comme celle-ci Dans de tels cas, je duplique le remplissage en dégradé deux fois de plus, ce qui me donne un total de trois champs. Vous pouvez voir à quel point cela s'est déjà amélioré, mais nous pouvons encore faire un peu plus. Vous pouvez prendre chaque rectangle et le réduire ou l'étendre, en créant essentiellement trois champs de trois largeurs différentes Cela vous donne un peu plus de contrôle sur la correction des transitions brusques. Il n'y a pas de rôle précis ici. Vous jouez essentiellement avec leur positionnement et taille jusqu'à ce que vous trouviez le point idéal de la transition. Le choix d'une image est également important, certaines images fonctionnent mieux que d'autres. Avec le recadrage doux en blanc, vous devez opter pour une image avec un arrière-plan plus clair. Par exemple, un ciel de jour en arrière-plan constitue une bonne transition. Sur fond sombre, le fondu blanc n'est pas aussi efficace. Vous voyez ici, cela ne semble pas naturel. un fond noir et un fondu noir Comme vous pouvez le constater, un fond noir et un fondu noir fonctionnent bien mieux ici. Mais la solution idéale sur un arrière-plan comme celui-ci serait de choisir une couleur le bord de l'image et de l'utiliser comme arrière-plan pour ce fondu. Faisons-le sur cet exemple. Voici une astuce intéressante qui pourrait s' avérer utile à l'avenir. Cliquez avec le bouton droit sur l'image, puis cliquez sur Retourner horizontalement. Il reflète essentiellement l'image. Cela s'avère souvent très pratique. Par exemple, lorsque je veux placer un contenu sur le côté gauche, mais que l'image a un modèle sur la gauche et un espace vide sur la droite, je peux l'inverser et c'est fait. abord, nous devons prélever une couleur sur le sable et l'utiliser comme couleur pour le fond et le fondu. Sélectionnez le cadre. Cliquez sur arrière-plan, puis échantillonnez le tout dernier pixel de couleur de l'image. Zoomez de très près pour une meilleure prise en main et faites attention au zoom en pixels ici. Cela indique exactement quel pixel sera échantillonné. La raison pour laquelle nous sélectionnons le dernier pixel est de créer une transition aussi fluide que possible entre l'image et l'arrière-plan sans le remplissage en dégradé. Nous allons maintenant utiliser exactement la même couleur pour créer un remplissage dégradé. Copiez le code hexadécimal de la couleur depuis l'arrière-plan et insérez-le comme couleur de début et de fin dans le dégradé de remplissage Modifiez l'opacité à 0 % pour la couleur de la main. Maintenant, allez-y, appliquez ces cultures en conséquence à chacune des images, puis soumettez vos résultats dans le devoir qui suit, et je les examinerai. Comme vous le remarquerez, je n'ai probablement pas inclus le didacticiel d'étirement, de recadrage et d' étirement des photos dans cette vidéo, mais j'ai ajouté un didacticiel Photoshop dans la partie avancée de cette section, que vous pourrez apprendre à faire et pratiquer une fois que vous aurez terminé ce cours, car vous n'en avez pas vraiment besoin pour le moment. Il n'est pas nécessaire de le savoir, mais une fois que vous aurez terminé le cours et que vous pourrez parcourir ce matériel principal, jetez-y un coup d'œil et donnez-lui un. 36. Photos : règle des tiers: avez-vous déjà remarqué comment dans les films les acteurs sont souvent positionnés hors centre dans le cadre ? Après avoir appris cela, vous ne serez jamais en mesure de ne pas remarquer, et vous serez obsédé à ce sujet Chaque fois que vous regardez un film, les cinéastes et les photographes utilisent une technique appelée Règle des tiers pour ajouter un peu d'intérêt visuel au tir. Ça se passe comme ça. Si vous divisez un écran en trois parties égales, fois verticalement et horizontalement, l'intersection de ces lignes sera le visuel dans les endroits les plus intéressants pour placer votre sujet. Si l'objet est grand, comme Angelina Jolie ici que vous la placeriez sur toute la ligne verticale, et si c'est une image hors paysage comme celle-ci, alors vous positionneriez l'horizon sur l'une des lignes horizontales. Mettre un sujet dans le centre de la dette est quelque chose qui est attendu. Il est symétrique a un espace égal autour d'elle. C' est sûr et confortable. C' est aussi ce qu'un non-photographe ferait habituellement ou un non-designer. Vous prendriez une caméra et pointez directement sur le sujet, et c'est généralement ennuyeux. Mais placer votre sujet hors centre crée de la tension. C' est inattendu, mais semble intentionnel, comme il y a une raison cachée spécifique derrière cela, et nous voulons savoir ce que c'est. Une application de caméra sur votre téléphone a probablement cette option. Je sais. Je nous ai trouvés. Allumez-le et essayez-le. Vos photos s'amélioreront considérablement en faisant cela, pour démontrer ce point, jetons un coup d'oeil à cet exemple simple. Nous avons une boîte qui est placée dans le centre mort de la toile. La distance entre l'adresse des caméras et la boîte est identique de tous les côtés. Le résultat est la papeterie symétrique et la boîte au repos. Il ne bouge pas. Si nous déplaçons la boîte un peu au centre, cela ajoute instantanément de la tension. Mais ce n'est pas une bonne sorte de tension, car il semble que la boîte est censée être au centre. Mais ce n'est pas le cas. Cela ressemble à un jamais qu'un designer Miskell a mangé ou n'a pas remarqué. Mais si nous déplaçons la boîte assez loin du centre que le résultat semble intentionnel, il ne semble pas qu'elle soit censée être au centre, mais que c'est délibérément hors des parents. Cela crée une bonne sorte de tension, donnant comme un intérêt visuel. La règle des tiers est dans une loi, c'est plutôt une directive souple. Vous pouvez parfois aller assez loin de ces points d'intersection. Cette règle est très pratique lorsque vous travaillez avec des visages. Jetez un oeil à cet exemple. Le visage de ce modèle est au centre, hors du cadre, et cela donne l'impression qu'il est trop bas dans le cadre. L' espace vide au-dessus de sa main est en quelque sorte le presser vers le bas. Pour corriger cela, nous avons déplacé le modèle sur un hors des points d'intersection supérieurs utiliser toujours les yeux comme votre glace de guidage sont le point focal de tout visage humain. C' est là qu'on regarde toujours d'abord. Maintenant, c'est beaucoup mieux regarder, et l'espace au-dessus de lui est assez petit, donc il n'appuie pas sur lui. Et une autre bonne nouvelle. Cela fonctionne peu importe la taille du visage. La personne peut être loin dans le cadre ou de près extrême. Tant que nous garderons ces yeux alignés sur ce point d'intersection, ça aura toujours l'air correct. Regardez ce qui se passe lorsque nous zoomons. J' ai toujours l'air superbe. Nous allons zoomer plus belle apparence. Sans doute, une dernière fois a l'air bien. Peu importe à quel point reprendre en. C' est la beauté de la règle des tiers. C' est une ligne directrice super simple, mais peut rendre les photos beaucoup plus belles. Maintenant. La règle des tiers est une ligne directrice souple, et elle comporte des exceptions. Il y a beaucoup de cas où vous aurez de meilleurs résultats. Si vous ne suivez pas cette règle sur une image comme celle-ci, le centre est la meilleure position, et vous ne devriez pas utiliser la règle des tiers. Pourquoi ? Parce que le point de vue central est l'intention ici. La photo est dans la perspective de la première personne. Nous voyons la vue des yeux du gars et de son point de vue. Évidemment, le placement le plus naturel est le centre parce qu'il n'aurait pas de sens pour lui de voir les choses côté. Il y a d'autres exemples de position centrale étant le bon choix. Par exemple, lorsque le placement du sujet et d'autres éléments de l'image créent réellement l' intérêt visuel au centre, la route longe le marquage jaune de la route au milieu de cet espace entre les palmiers. Tout ce qui crée un intérêt visuel au milieu. Garder cet esprit prédominant vous aide à choisir de bonnes photos de meilleure qualité lorsque vous les recherchez sur les côtés de la photographie en stock , par exemple, si vous cherchez une photo pour un écran partagé comme dans notre exercice, alors dans ces cas, une photo avec le modèle qui est au centre est un meilleur choix parce que dans les cas d'un écran divisé , vous obtenez ce mode dépeint étroit sur la photo et dans les photos étroites. Ce n'est pas la meilleure option pour utiliser la règle des tiers. Mais si vous cherchez une photo d'arrière-plan, en particulier une photo sur laquelle vous allez placer un contenu, alors l'alignement hors centre sera le meilleur pari. Donc, de cette façon, vous allez regarder à travers les photos et vous trouverez un moment où il y a assez place pour que vous puissiez déplacer un sujet vers les pupilles un hors des lignes de la règle des tiers. 37. Photos : Unbox !: photos viennent toujours dans une boîte. C' est le format original lorsque vous exportez depuis votre appareil photo, ou même si vous avez téléchargé depuis notre site Web. Lorsque vous prenez une image en boîte, placez-la directement sur la toile, ce n'est souvent pas très impressionnant. C' est un objet séparé, ne fusionne pas avec l'espace, et il crée des boîtes supplémentaires autour de lui. Vous ne remarquez pas cela consciemment à propos de nos yeux font, et ils ont besoin de traiter ces boîtes supplémentaires qui ont été créées entre l'image et l' adresse hors de la toile. Prenons un exemple réel de l'un de mes projets de page de destination qui ont fait pour une clinique dentaire . J' ai utilisé cette image exacte pour ce projet, et c'est là que j'ai commencé. Alors, comment pouvons-nous améliorer une section avec une image comme celle-ci ? Nous devons penser en dehors de la boîte, littéralement déboiser l'image en supprimant complètement l'arrière-plan, mettre sur le bord inférieur droit, et maintenant, au lieu d'être une photo ennuyeuse giflée sur la page, ce modèle sort en quelque sorte de la page. Le fond blanc ne fonctionne pas vraiment avec cette image. Pouvez-vous deviner pourquoi ? Parce que le modèle porte un haut blanc. Ça fait un contraste terrible, et si ce n'était pour ses cheveux roux, elle s'estomperait. Comme l'image n'a plus d'arrière-plan, nous avons plus de liberté pour mettre notre propre couleur d'arrière-plan sur toute la toile. Cela nous donne plus de liberté d'expérimenter et de choisir des combinaisons de couleurs intéressantes et de rendre la conception de plus excitante. Cette couleur complète ses cheveux rouges, le contraste bien, et faire un très bon combo. En outre, cette couleur bleuâtre est un bon choix pour le thème de la dentisterie. Couleurs bleues, Fillmore Propre et sanitaire. Bon sentiment à créer pour la dentisterie et beaucoup d'autres couleurs serait un drapeau rouge pour une clinique dentaire comme le rouge et le rose. Ça nous rappellerait du sang, pas une bonne sensation. Souvent, j'aime ajouter une ombre derrière la devise. Ça lui donne l'impression qu'elle est debout devant un mur. Il ajoutait plus de dimension à l'espace. Il y a maintenant deux couches distinctes. Il y a un mur, et puis il y a un modèle debout devant lui. Vous n'avez pas nécessairement besoin d'appliquer une ombre. Vous pouvez toujours obtenir de bons résultats sans elle. Parfois, il ne sera même pas Borg cette fois. Cela fonctionne et rend un très bon résultat car c'est un tir direct sur le modèle et elle peut facilement être debout devant le mur. C' est le titre. Tu vois ce que j'ai fait avec le type ? C' est lourd, large et majuscule. C' est pour faire correspondre leur contexte hors de cette page. De larges dents droites au téléphone noir maigre ne serait pas aussi efficace ici, est-ce pas ? Nous devons toujours garder le sujet à l'esprit lorsque nous concevons tout ce que nous faisons sur la page crée des associations avec les gens. Les appels étaient des formes utilisées que nous choisissons tout ce qui va créer certains sentiments chez gens, tout comme ce que nous avons discuté dans la leçon de typographie sur les personnalités de Taipei. Ceci est conçu pensée, et c'est une échelle très importante dans l'ensemble des compétences de concepteur. Maintenant, ajoutez le reste de la copie à la barre de navigation, et nous avons une belle section de héros pour une clinique dentaire. Tu as remarqué pourquoi j'ai fait le bouton orange ? Parce que je l'ai échantillonné dans les cheveux de la fille. Ce n'est pas la couleur exacte. Comme vous pouvez le voir, j'ai fait le réglage de cette façon. Il est plus dynamique et adapté pour le déballage de site Web moderne. L' image nous a donné plus de liberté et de contrôle sur notre composition, elle a ajouté la profondeur. Chaque objet semble exister dans un espace partagé, mais sur différentes couches, tout comme dans le monde réel. Ceux-ci ont donné comme une section de héros très belle et intéressante. Vous n'avez pas nécessairement besoin de déboiser une image entière. Vous pouvez obtenir un résultat passionnant en prenant une petite partie de l'objet hors de son cadre. Par exemple, c'est ce que j'ai fait pour ce site Web. Sur un autre projet pour une entreprise de toiture. Je voulais mettre l'accent sur le toit en quelque sorte. Mais la disposition ne coupe pas vraiment la moutarde. Le toit est perdu dans la conception, donc j'ai pris la pointe du toit et je l'ai poussé à l'extérieur du cadre. Maintenant, le toit a gagné en lumière. C' est un point d'intérêt, plus les images et comme chose séparée plus. Il interagit avec la toile et d'autres éléments sur elle. C' est tout ce qu'il faut pour libérer et l'image de son cadre et le donner à la vie. On ne peut pas vraiment créer cet effet dans la figue MMA. Nous aurons certainement besoin d'un magasin de photos pour ceux-ci dans la partie avancée des scores. J' ai mis un tutoriel photo et une mission sur la façon d'obtenir cet effet et comment découper un sujet ou un modèle de l'image et en retirer l'arrière-plan. Ce n'est pas un effet essentiel, mais savoir comment faire fonctionner cet effet ouvre vraiment vos options dans le design à la fois. Vous supprimez l'arrière-plan du sujet. Il ouvre beaucoup d'options de conception différentes, comme ce qui s'est passé ici, parce que maintenant nous pouvons changer l'arrière-plan. Nous pouvons déplacer, disons les gros titres et taxer derrière les objets, et nous pouvons créer un peu plus de couches tridimensionnelles dans nos conceptions. Donc, quand vous atteignez la partie avancée de ce cours, certainement ne manquez pas ce tutoriel et pratiquez-le car il sera vraiment utile lorsque vous commencez à concevoir. 38. Photos: Choisissez vos photos comme un pro: Ces techniques photographiques seront inutiles si vous ne savez pas comment choisir les bonnes photos pour vos créations. Dans cette leçon, je vais vous apprendre à choisir des photos comme Pro. Les photos que vous utiliserez pour vos projets sont appelées photos de stock, vous pouvez télécharger sur des sites gratuits comme Osplash et sur des sites payants comme I Stock Osplash et sur des sites payants comme I Maintenant, la plupart des photos d'archives sont tout simplement nulles. Je suis sûr que vous avez visité des sites Web qui utilisent de telles photos. Quel est exactement le problème avec cette photo ? Les bouteilles ont l'air bien. Ils sont bien habillés, ils sourient. La photo est de bonne qualité et prise dans un cadre professionnel. Tout semble correct sur le papier, mais la photo est toujours nulle. Pourquoi ça ? Parce que c'est clairement faux. Il est clair que ce ne sont pas de vrais hommes d'affaires. Ce sont des mannequins qui font une pose stupide avec de faux sourires. Désormais, toutes les photos professionnelles sont réalisées de cette : un mannequin joue un rôle spécifique sur la photo, porte des vêtements qui ne sont pas les leurs, dépeint une émotion spécifique et est payé pour Et c'est très bien. Mais si la photo est bien faite, nous ne devrions pas être en mesure de dire ce qui se passe dans la réalité. Considère ça comme un film. Nous savons que ce sont des acteurs. Nous savons qu'ils ne se trouvaient pas réellement sur un navire en 1912. Ils portent des costumes et jouent une scène. Quand un film est réalisé, eh bien, on ne peut pas le dire. Nous oublions que c'est en fait faux et que ces gens font juste semblant La même chose se passe ici. Ils portent des costumes et font semblant. Mais contrairement aux bons acteurs, ces gars sont nuls. Savez-vous ce qui se passe lorsque vous utilisez une photo qui semble fausse ? Vous envoyez un très mauvais message à votre public. Si la photo est fausse et fait semblant, le site Web aura l' impression d'être faux et de faire semblant Aucune vraie personne ne se cache derrière ce site. Si je les appelle ou que je leur envoie un e-mail, je n'obtiendrai pas de réponse de vraies personnes ou pire encore, il pourrait même s'agir d'un site Web frauduleux. Il faut un peu d'entraînement pour distinguer les bonnes photos des mauvaises, mais voici trois questions à vous poser lorsque vous regardez des photos. La scène est-elle réelle ? Est-ce que quelque chose comme ça se produirait dans un scénario réel ? Les personnes qui travaillent au bureau se tiendraient-elles donc devant une caméra et se tiendraient-elles la main comme ça ? Si vous avez déjà travaillé au siège social, vous savez que la dernière chose à faire est de tenir la main de vos collègues et de vous tenir devant une caméra La réponse est donc clairement non. Fausse ou cette photo, par exemple, qu'en pensez-vous ? Cette scène est-elle réelle ? De toute évidence, non. Pour commencer, le gribouillage sur le verre est un charabia complet Ce sont des graphiques et des flèches aléatoires. Cela n'a aucun sens. C'est quoi ce bloc-notes ? C'est une façon tellement clichée de décrire une scène de bureau. Cette photo, en revanche, est une autre histoire. Cela ressemble à une réunion réaliste et les gens portent des vêtements que vous pourriez voir dans les bureaux modernes d'aujourd'hui. Ils discutent entre eux, comme c'est le cas lors des réunions, sans se tenir la main et regarder un tableau en verre avec des griffonnages absurdes Fausse La deuxième façon de reconnaître une mauvaise photo de stock est d'utiliser de fausses émotions ringardes Cela ne ressemble pas à une véritable émotion humaine d'excitation. La scène n'est pas non plus proche du monde réel sur cette photo. Avez-vous déjà tenu de la fausse monnaie dans une main et une loupe dans une autre ? Ou ce type qui est tellement enthousiasmé par de fausses bonnes nouvelles sur son faux ordinateur portable. Bien sec, mon pote. Exprimer de véritables émotions humaines devant un appareil photo dans un studio photo est une chose difficile. C'est pourquoi tant de ces modèles font un travail terrible. Ne récompensez pas leur piètre travail en utilisant leurs photos dans votre projet. Et ne gâchez pas non plus vos créations avec de telles photos. Il n'est pas difficile de savoir si le jeu d'acteur semble authentique. Voilà à quoi ressemble une véritable excitation. Pas ça. Même des émotions subtiles, comme un sourire normal, peuvent sembler très anormales et fausses, et lorsqu'elles sont bien faites, elles ont l' air authentiques et accueillantes Demandez-vous si les émotions semblent réelles, vous serez probablement capable de le dire assez facilement. Outre ce que font les modèles à l'intérieur de la photo, vous pouvez également facilement distinguer une mauvaise photo d'une bonne photo en prêtant attention à la scénographie. Par décor, j'entends tout sauf le modèle sur lequel la photo est prise, les objets photographiés, même les vêtements que porte le mannequin. Beaucoup de photos d'archives sont souvent assez anciennes. Ils ont été pris il y a longtemps, mais ils sont toujours vendus et utilisés sur des sites Web. Vous ne voulez vraiment pas utiliser une photo vieille de dix ans pour un site Web de start-up technologique moderne. En faisant attention aux vêtements, vous pouvez facilement identifier les photos datées. Pas besoin d'être une fashionista pour ça. Utilisez votre bon sens. Il n'est pas difficile de dire qu'aucune fille de son âge ne porterait quelque chose comme ça aujourd'hui. Cela ne signifie pas que la photo a été prise il y a longtemps. Parfois, les photos sont nouvelles, mais les photographes réutilisent la même garde-robe. Les studios photo conservent leur costume lors des tournages et le réutilisent avec d'autres modèles et de nouveaux scénarios des années plus tard. vêtements qui ne vont pas indiquent clairement que la scène est fausse, même si elle était moderne. Comme cette pauvre fille ici. Les studios photo essaieront également d'utiliser des vêtements neutres qui pourront être réutilisés des années plus tard afin de ne pas avoir à acheter une nouvelle garde-robe chaque année Vous verrez donc ce vêtement très mixte dépourvu de toute personnalité. C'est aussi un autre indicateur. Mais je pense que cette photo a une autre queue claire celle de l'écran d'ordinateur. Dans des ensembles bien conçus comme ici, vous verrez des gens porter des vêtements modernes et bien souvent adaptés à leur personnalité. Ils ressemblent à de vraies personnes, pas une simulation informatique. Prêtez attention aux objets du set. Demandez-vous s'ils semblent réalistes. Comme cette loupe et cette fausse monnaie, rien ne dit mieux faux La fausse monnaie et éloignez-vous de tout ce qui est abstrait. Par exemple, des ampoules. Mon Dieu, je déteste les ampoules. Les gens adorent utiliser une ampoule pour représenter des choses comme les idées, la créativité ou la pensée C'est trop utilisé, ça me donne la nausée quand je le vois. Une fois que je travaillais sur un site Web très haut de gamme, et à titre de suggestion, mon client m'a envoyé une ampoule à utiliser comme arrière-plan pour un site Web. J'ai failli aboyer sur l'écran de l'ordinateur. Les objets abstraits sont généralement une mauvaise idée. La plupart d'entre eux ressemblent exactement à cela. Abstraits, déroutants et souvent clichés car ils sont trop utilisés Votre design doit donner au public un sentiment de compréhension et d'authenticité. Tout ce qui est abstrait fera le contraire. Des pièces de puzzle clichées et des nuages au-dessus de la tête des gens. Ah. 39. Photos : où trouver des photos: D'accord, alors où trouver de bonnes photos ? Il existe des sources gratuites et payantes. Mon site de stockage gratuit préféré est unsplash.com. Vous l'avez déjà utilisé dans les devoirs. De nombreux sites proposent des photos gratuites, mais elles ne sont pas entièrement gratuites. Ils sont assortis de certaines règles relatives au droit d'auteur, telles que vous devez créditer l'auteur ou uniquement pour un usage personnel, mais pas pour un usage commercial. Unsplash est vraiment gratuit. Vous pouvez faire ce que vous voulez avec les photos, sans avoir à créditer l'auteur. Les photos sur unsplash.com sont très réalistes. plupart du temps, ils sont soumis par des photographes individuels du monde entier et non par des studios photo de stock. Pour cette raison, vous obtenez des scénarios très réalistes et des personnes qui semblent authentiques et réelles. Enfin, du moins la plupart du temps. Un autre site Web gratuit décent que j'utilise est packsals.com. La vente de packs est également entièrement gratuite, sans limites. Le concept et les photos sont très similaires à ceux d'Osplash, mais on y trouve un peu plus Les sites de photos gratuits ont cependant un inconvénient. Tout le monde les utilise. Et une photo particulièrement belle sera utilisée par de nombreuses personnes dans le monde entier. Ainsi, les photos que vous utilisez dans vos conceptions Web peuvent facilement être utilisées par de nombreux autres concepteurs Web pour leurs sites Web. moment donné, lorsque vous parcourez un grand nombre de ces photos gratuites provenant Onlash ou de Pack Seles et d'autres sites, vous commencez à les reconnaître sur de nombreux sites Web différents Et si le public voit cette photo utilisée sur d'autres sites Web, également cette photo utilisée sur d'autres sites Web, cela déprécie en quelque sorte le site Web Ce n'est plus si unique. va de même pour les sites de stock payants, mais comme ils sont payants, beaucoup moins de designers utiliseront ces photos pour leurs sites Web. De plus, les sites de stock proposent une sélection de photos bien plus large que les sites gratuits. C'est pourquoi, pour les projets bien rémunérés, je vous recommande vivement d' utiliser des sources payantes plutôt que des photos gratuites. Mon préféré sur les sites d' actions payantes est eStock. Ils ont l'une des meilleures photos de qualité avec des modèles et des scènes réalistes. Mais bien sûr, vous obtenez aussi de fausses photos ici. C'est inévitable, tant que les gens achètent ces saloperies. Je ne peux pas vraiment donner un chiffre exact sur le coût d'une photo en stock, car tout dépend du nombre que vous achetez, des plans d'abonnement et parfois de l'image elle-même. EyesToc est un peu plus cher. Une image ici coûte entre 9 et 24$. Mais avec les forfaits et les abonnements mensuels, vous pouvez obtenir de très bonnes remises Shutter Stock est une autre bonne source payante, et c'est beaucoup moins cher que l'ETOC Avec les forfaits prépayés, vous obtenez une image pour 10$ maximum. Le prépayé signifie l'achat d'un pack de 50$ pour cinq images. Pour les gros utilisateurs, vous pouvez obtenir un abonnement mensuel. Vous obtiendrez un certain nombre d'images gratuites par mois. Et descendez à 3$ par image et moins. L'une des options les moins chères mais les plus décentes est bigstok.com. Ici, le maximum devrait être d' environ 3$ par image avec les forfaits Contrairement à d'autres, Big Stock propose un essai gratuit de sept jours qui vous donne 35 images gratuites pendant cette période d'essai. N'oubliez pas, cependant, qu'ils demandent les détails de votre carte de crédit et que vous devez l'annuler avant le dernier jour, sinon vous serez débité. Prenez toutes ces informations sur les prix avec un grain de sel, car il s'agit sites Web indépendants et leurs prix peuvent changer très souvent. Cela dépendra également pays d'où vous venez ou de l'endroit où vous vérifiez les prix en raison des taxes et de la TVA. Mais en gros, c' est ainsi que fonctionne la tarification de ces trois sites Web et de nombreux autres sites d'actions payantes J'ai mis les liens vers ces sites Web, gratuits et payants, et un peu plus dans la page des ressources, afin que vous puissiez les consulter librement . 40. Projet : trouver des photos: Faisons maintenant un exercice amusant où vous allez chercher des photos d'archives. Dans ce fichier Figma, j'ai préparé trois cadres avec les titres et les descriptions de trois entreprises J'ai en fait récupéré du texte provenant de vraies entreprises et de leurs sites Web. Je veux que vous trouviez une photo appropriée pour chaque cadre, imaginant que vous êtes en train de concevoir leur page d'accueil et que vous avez besoin d'une photo pour la section des héros Vous n'êtes pas en train de concevoir dans le cadre de cette mission, alors ne vous inquiétez pas du format. Peu importe que l' image apparaisse en arrière-plan sous forme d' écran partagé ou de toute autre manière. Le but est simplement de choisir une image de manière réfléchie. Vous pouvez choisir des photos sur n'importe lequel de ces sites de photos gratuits ou payants, que ce soit Splash, Paxl , I Stock ou tout autre site Trouver la bonne photo pour votre projet prend du temps, et vous devez parfois consulter plusieurs sites pour vraiment la trouver. Je peux parfois passer quelques heures chercher la bonne photo pour une seule section de héros. Vous pouvez également utiliser des sites payants et simplement en prélever des échantillons sans payer. Vous pouvez faire une capture d'écran ou télécharger une image filigranée. Big Stock, par exemple, dispose d'un lien d'aperçu du téléchargement et vous pouvez utiliser cet exemple d'image. Ne vous inquiétez pas de la qualité, du format ou de la taille de l'image, mais je veux que vous n'utilisiez que des sites de stockage de photos, et non Google ou tout autre site où les règles de copyright sur les images sont strictes comme le scintillement ou le fait de récupérer la photo de quelqu'un Et pour chaque photo que vous choisissez, je veux que vous m'expliquiez pourquoi vous l'avez choisie. C'est ainsi que l'on prend l'habitude du design thinking. Vous ferez un bien meilleur travail et vos employeurs seront plus heureux si vous réfléchissez à chacune de vos décisions. Je vais vous donner un exemple ici. La première étape consiste à comprendre en quoi consiste l'entreprise et ce qu'elle propose. Réfléchissez ensuite au type de scène que nous voulons créer sur le site Web, compte tenu de l'entreprise et du texte. Cette activité aide donc d'autres entreprises à mesurer le bonheur de leurs employés. Cela me donne en quelque sorte l' idée que montrer des employés heureux fonctionnerait bien dans ce cadre. Dirigeons-nous vers nos sites et commençons par rechercher littéralement des employés heureux. Tous les trois ont donné des résultats très divers. Et comme vous pouvez le constater, Shutterstock étant la solution payante, elle a produit beaucoup plus de résultats que le splash et Lorsque vous effectuez la recherche, essayez différents types de mots clés. Parfois, une phrase clé littérale, comme « employés heureux », peut fonctionner, mais il est souvent préférable d' utiliser et de combiner des mots clés uniques Par exemple, dans ce cas, je souhaite que la scène se déroule dans un environnement de bureau. C'est une sorte de mot-clé difficile qui doit être présent dans la scène. Je peux donc simplement utiliser Office , puis quelques mots clés secondaires, comme sourire , bonheur, etc. Voici un tepe de pro. Lorsque vous voyez une photo de la qualité que vous aimez, mais qu'elle ne correspond toujours pas exactement à la bonne scène ou au bon modèle, trouvez le contributeur et recherchez dans ses photos. Sous copyright, il existe un lien du contributeur, c'est-à-dire du photographe ou du studio photo qui a mis en ligne cette photo sur le site. Si vous cliquez sur ce lien, vous verrez toutes les autres photos de ce contributeur. Toutes les pages d'archives ont leur propre façon d'afficher les photos des contributeurs et d'indiquer où trouver le lien, mais c'est le cas de la plupart d'entre elles. Et leurs propres méthodes de recherche dans les images d'un contributeur. suffit d'insérer votre mot clé pour affiner les résultats dans les photos du contributeur. Sans cette astuce, je devrais regarder des milliers de photos terribles. C'est une très bonne option pour les employés heureux. Téléchargez l'aperçu, puis placez-le simplement dans le fichier Figma Vous pouvez prendre une capture d'écran ou utiliser une option de téléchargement proposée par le site. C'est tout Pas besoin de concevoir quoi que ce soit. Laissez-le tel quel. Cela montre des employés heureux, ce qui est l'objectif de cette entreprise. La photo est moderne, l' atmosphère est détendue, sourires sont authentiques et dans l'ensemble, les films photo sont chaleureux et accueillants. Et c'est fait. C'est votre tâche. Aucun design n'est impliqué. Amuse-toi bien 41. 6 astuces de conception que tout concepteur doit connaître: le design est comme le spectacle de magie. Il y a des astuces qui rendent un travail beau et passionnant et quelque chose que les gens veulent payer, tout comme un tour de magie. Un bon design peut vous faire sentir émerveillé. Mais une fois que l'astuce est révélée, vous comprenez, c'est en fait assez simple, et vous commencez à réaliser que les anciens designers utilisent les mêmes astuces dans les prochaines vidéos. Je vais vous apprendre plusieurs astuces de conception qui vous aideront à créer de belles et très intéressantes désirs comme la magie. 42. Astuces de conception : Contraste: jetez un oeil à cette page. C' est un design très simple, mais assez efficace. Le truc de descente qui est fortement utilisé dans cette composition est appelé contraste. C' est ce contraste entre le titre gigantesque et le texte de paragraphe plus petit. Aussi Contras. Entre la lourdeur, hors du titre et la légèreté du paragraphe contrastent entre la partie noire du titre avec le bleu et le contraste entre le fond de vie et le gros bouton bleu. Je dois dire que c'est un peu bâclé sur l'alignement, bien que le contraste est très largement utilisé astuce de conception. Il nous aide également à créer une hiérarchie visuelle entre les éléments, et il peut s'exprimer principalement de trois façons. Contraste dans la couleur contraste dans la taille grande contre petite, puis contraste dans le poids comme lourd vs léger. Jetons un coup d'oeil à un autre site web. Remarquez-vous le contraste dans la couleur sur Vous faites large téléphoné et livre sur un fond rouge de mariée pour lui. C' est un Bulls, en revanche, voient le contraste de taille et de poids entre le titre et le texte. Au-dessus et au-dessous. Il contraste dans la conception réalise deux choses, Habituellement, d'abord, il nous aide à établir la hiérarchie visuelle sur la page et deuxièmement, il crée de l'intérêt. Mettez deux carrés identiques ensemble, et ça ne dit rien. C' est ennuyeux, mais souffler l'un d'eux à la taille extrême en comparaison, dans le grand contraste entre eux crée de l'intérêt. Maintenant, il semble qu'il y ait une histoire derrière elle ou créer un contraste dans le col, et il devient instantanément plus intéressant. contraste de couleur est créé en utilisant des couleurs complémentaires. Violet et jaune. Voici des couleurs complémentaires, et enfin, vous pouvez créer un contraste en utilisant le poids. Alors, comment pourriez-vous créer des Contras de poids entre ces boîtes en supprimant la sensation sur l'un eux et de vivre avec contour contour boîte pleine se sent plus lourd et boîte vide semble plus léger. Voyons comment cela fonctionne dans la pratique. Disons que nous travaillons sur un site Web pour les vélos et que nous concevons l'une des sections. Le client nous a donné un titre, un paragraphe de texte et une photo pour l'un de ses vélos. Disons que nous ne savons pas par où commencer, mais nous nous souvenons de ce truc de contraste. Voyons comment on peut l'utiliser. Commençons par un contraste de poids. Que pouvons-nous avoir un regard et que pouvons-nous faire de la lumière ? Pourquoi pas le titre par rapport au paragraphe ? Créons un joli contraste entre eux. Nous pouvons rendre le titre extra gras et tout en majuscules. On n'a pas à s'arrêter ici. Nous pouvons en fait ajouter un contraste d'attente, même dans le titre. Excellent. Cela l'a rendu encore plus intéressant car nous appliquons le contraste aux éléments. La vôtre remarque comment la hiérarchie visuelle commence à prendre forme. Ok, en haut. Faisons le contraste de taille. Superdimensionnons la première partie du titre et voyons ce qui se passe. Va grand ou rentre à la maison. Aligné les éléments correctement, D'accord. Ça commence à prendre forme. Nous pouvons utiliser la culture extrême que nous avons déjà appris et découper certaines parties de la bicyclette. Ça a l'air assez bien hier soir, mais au moins on a un contraste de couleur. Il y a déjà un contraste de couleur, bien sûr, puisque le fond est blanc, sombre taxe que le vélo sombre. Contraste très bien avec elle, mais nous n'avons pas à nous arrêter là. Nous pouvons ajouter une couleur supplémentaire dans une partie du titre, quelque chose qui va bien contraste avec le texte sombre affaiblir simple. L' orange de la bicyclette assis de cette façon va tuer deux oiseaux avec une pierre, une grande couleur pays entre orange et sombre titre. Et bien sûr, vous savez déjà qu'ils échantillonnent la couleur de la bicyclette nous aide à lier le design ensemble . C' est tout en appliquant un taux de contraste simple, plus une technique de support photo. On est passés de là à ça. Vous n'avez même pas besoin d'un logiciel de conception pour ce conduit dans Power Point. C' est mon préféré. Aller aux astuces dans la conception. Si jamais vous stockez sur les luttes avec faire le design look intéressant à un certain contraste, star beat couleur taille Wade, et je vous garantis qu'il améliorera instantanément vos conceptions. 43. Astuce de design : l'espace blanc: Est une affiche de la campagne publicitaire sur les pièces de rechange BMW. Il est écrit « BW » au lieu de « BMW ». En bas, il est dit d' utiliser des pièces d'origine. Tu as compris la blague, non ? C'est une publicité très intelligente. Mais ce n'est pas pour ça que je te le montre. Je souhaite présenter un énorme concept de design appelé whitespace Les espaces blancs sont des espaces vides autour des éléments. Dans ce cas, autour du titre BM, BW. Whitespace attire l' attention sur l'objet. Non seulement il est plus facile de voir l'objet, mais il devient beaucoup plus intéressant et important. C'est la page d'accueil de Yahoo. Il n'y a pas beaucoup d'espace ici. Il est difficile de dire ce qui est important sur cette page. Celui-ci, en revanche, est une toute autre histoire. L'importance des espaces blancs ne réside pas uniquement dans l'attention et la simplicité. C'est également votre design qui atteint son objectif principal. Si l' objectif principal de votre site Web est de permettre aux internautes de faire des recherches, vous feriez mieux de vous assurer que toute l'attention est dirigée vers cet objectif. Lorsque nous arrivons sur Google, nous savons instantanément où cliquer et où diriger notre attention. Il est beaucoup moins difficile de faire des recherches sur Google que sur Yahoo. Et il est bien plus probable que nous atteignions notre objectif sur Google que de laisser distraire par Yahoo et oublier ce que nous sommes venus chercher au départ Il n'est pas nécessaire que les espaces blancs soient blancs. Il peut être de n'importe quelle couleur. Il s'agit de tout espace inutilisé qui se trouve entre les éléments. Le mot blanc est un vestige de l'époque où le graphisme ne se produisait que sous forme imprimée et sur une feuille de papier blanc Jetons un coup d' œil à cet exemple. Supposons que vous travailliez sur le site Web d'une application de taxi, vous pourriez mettre une photo en arrière-plan et il n'y a rien de mal à cela. Vous pouvez également utiliser des espaces blancs pour attirer davantage l'attention sur le message et le bouton. Au fait, n'oubliez pas de teinter avec des superpositions d'images, parfois vous n'avez pas besoin de rendre la photo en noir et blanc Vous pouvez conserver la couleur de l'image tout en y ajoutant une teinte de couleur, comme dans ce cas. Vous savez, il y a longtemps, avant m'intéresser au graphisme, j'ai travaillé comme responsable marketing, et en tant que spécialiste du marketing, vous deviez créer de nombreux supports graphiques, des supports de conception tels que des dépliants, des brochures, des magazines ou des affiches, des publicités sur Facebook ou Google Adwords ou des couvertures Facebook ou autre j'ai travaillé comme responsable marketing, et en tant que spécialiste du marketing, vous deviez créer de nombreux supports graphiques, des supports de conception tels que des dépliants, des brochures, des magazines ou des affiches, des publicités sur Facebook ou Google Adwords ou des couvertures Facebook ou Et j'ai travaillé avec cet excellent graphiste qui est devenu plus tard mon mentor en design, en gros. Et lorsque nous nous asseyions et que je regardais ses itérations de design, j'ai toujours pensé que je regardais sa composition, quelle que soit la composition que nous faisions Parfois, cela ressemble à un livret pour notre entreprise. Et je dirais : Oh, vous savez, pourquoi ne remplissez-vous pas cet espace ? Il y a trop d'espace vide, et je n'ai jamais aimé l'espace vide quand il faisait les dessins, et je le poussais toujours à essayer de remplir cet espace vide avec quelque chose parce que je le sentais vide. Oh, mec, je n'en avais aucune idée à l'époque. C'est une réaction assez courante chez les designers débutants ou chez les clients qui n'ont aucune formation en design, qui n'ont aucune formation en design, mais qui envisagent le travail en portant une sorte de chapeau de designer ou du point de vue d'un designer. Ils ont cette insécurité à l'égard de l'espace vide, et ils essaient toujours de le remplir avec quelque chose. Pour eux, c'est comme s'il s'agissait d' espace vide et que ce n'était pas assez conçu. Gardez cela à l'esprit, aucun utilisateur ne se plaindra d'un trop grand espace vide. Cependant, ils seront gênés trop d' encombrement sur la page Mon site de portfolio personnel utilise beaucoup d'espaces blancs. Je voulais d'abord attirer toute l' attention sur moi, sur la personne à l'origine de l'œuvre. J'ai donc supprimé toutes les distractions et j'ai concentré toute mon attention sur moi. Apple le fait toujours de manière magistrale. Utiliser beaucoup d'espace blanc est un design très encombrant. Ce MacBook semble très important et bien plus précieux lorsqu' il est affiché comme ça espaces blancs améliorent presque tout, même sur les paragraphes. Vous vous souvenez de ce que nous avons appris sur l'interligne ? L'augmentation de l'espacement des lignes revient essentiellement à ajouter plus d' espace blanc entre les lignes Et devinez quoi ? Concevoir avec beaucoup d' espaces blancs est en fait plus facile que de concevoir sans. Dier Rams est ce designer industriel, surtout connu pour son travail pour Brown Il a inventé ces dix principes populaires pour un bon design Le dixième principe final est qu'un bon design est aussi peu design que possible. N'ayez donc pas peur des espaces blancs et n'ayez pas peur d'en faire moins. C'est juste un bon design. Il existe une exception avec des espaces blancs pour les éléments liés et faisant partie du même contexte qui liés et faisant partie du devraient être plus proches les uns des autres. placer un espace blanc entre eux les déconnectera et donnera l'impression d'être des objets séparés et indépendants, comme nous l'avons appris dans la leçon sur la proximité. Par exemple, le titre et le paragraphe de cette page, espaces blancs les déconnecteront l'un de l'autre. Cela permet de mettre davantage l' accent sur le paragraphe, mais il s'agit désormais d'un objet indépendant , ce qui augmente le nombre d' éléments que le spectateur doit traiter. Dans la version originale, le titre et le paragraphe semblent liés en raison de la proximité et seront perçus comme un seul groupe Un peu comme les liens de la barre de navigation, en raison de leur proximité et de leur regroupement, ils seront instantanément identifiés comme un seul groupe. Ce type de regroupement permet au lecteur de traiter facilement les éléments de la page, tout en étant plus organisé et plus significatif. 44. Astuces de conception : répétitions: C' est le travail d'Andy Warhol parce qu'il n'est pas vraiment un designer web, mais c'est un artiste pop très influent. Dans ces Warrick. Il utilise un truc de design populaire appelé Répétition. C' est quand vous prenez un article qui peut ne pas être intéressant en soi, mais répété plusieurs fois. Et maintenant, nous avons quelque chose de plus intéressant. Ceci est une page du site Zendesk. Vous pouvez voir ici comment la répétition des profils carrés dans le même style a créé une mise en page très intéressante. L' astuce de répétition ne s'applique pas seulement aux articles identiques. Vous pouvez être appliqué à presque tout, comme la mise en page d'espacement de style de couleur. Sa pétition hors couleur est celle qu'il est utilisé assez souvent et peut vraiment attacher le design ensemble. Vous voyez comment les couleurs du titre se répétent en tant que couleurs d'arrière-plan des images de profil . Si nous passons sous les images, vous verrez également ces couleurs être répétées dans ce paragraphe. La page serait beaucoup moins attrayante et intéressante si ces vêtements n'étaient pas répétés ailleurs. Savez-vous que c'est une répétition de plus qui se passe sur cette page ? C' est dans la mise en page. Hors des coups de profil, la position d'une personne, façon dont elle se dirige vers le trajet et leurs noms sont placés dans le coin supérieur gauche. C' est une répétition de la mise en page. Je suis un peu déçu qu'esta et les cendres profondes ne soient pas corrompues du bon côté . Comme le reste, ils gitent un peu la répétition A cause de ce détail, jetons un coup d'oeil à une autre mise en page. Répétition. Ceci est très commun sur le Web, et vous le verrez sur tant de sites Web. Vous voyez comment la mise en page est répétée. Une illustration d'un côté avait la ligne et le paragraphe de la ligne de l'autre côté comme exactement dehors. C' est exactement à la répétition. Appliquons la répétition dans la pratique. Dites, nous avons ce contenu de notre client. Ce sont les avantages de leurs services parce que chaque paragraphe, avec leurs manchettes, fait partie des mêmes contacts. Nous pouvons créer une répétition dans leur mise en page. Nous pouvons utiliser une mise en page d'écran divisé en divisant l'écran et la moitié exacte. Donc, sur la 1/2 placer la copie et de l'autre, placer une image complète à certaines images et les couleurs répétées et il peut sembler assez beau comme cela ont répété plusieurs éléments ici, ils disposent, évidemment, le répétition sur les colliers. Je suis en train d'échantillonner les couleurs des photos et de les répéter sur la façon de faire les gros titres et de terminer la répétition du style photographe. vieilles photos sont dans le même style, le tir du haut d'un élément qui est posé à plat sur un fond coloré. Que diriez-vous d'autres concepts de design ? Vous les remarquez ? Le contraste. Est-ce que j'ai appliqué en contraste ici ? Certainement. Vous verrez le contraste entre le titre et le paragraphe dans leur taille, leur poids et leur couleur. Évidemment, un énorme contraste entre les plaids de gauche et de droite, l'un étant blanc, autre étant de couleur vive. Que diriez-vous de l'espace blanc ? Il y a des espaces blancs partout, chaque bloc blanc où la copie Seitz a une bonne quantité d'espace blanc autour d'elle pour apporter leur tension et au contenu. Il y a même de l'espace blanc dans ces photos. Celui qui a pris ces photos, ils ont fait du bon travail à partir de là. Je peux sate bonne source reliant les ressources. Mais la raison pour laquelle la répétition est si puissante dans la conception est parce que la façon dont nous regardons le monde en tant qu'êtres humains, nous avons essayé de reconnaître des modèles sur tout ce que nous regardons, et quand nous reconnaissons un modèle, notre cerveau va un peu excité. Luke Luke. C' est la même grippe que j'ai vue tout à l'heure. Oui, je le suis. Le design intelligent est fortement lié à la psychologie humaine. Ce n'est pas qu'il y ait des lois de la physique qui régissent le design. C' est complètement centré sur l'humain dans la réalité, toujours nos designers. Nous sommes ceux qui exigent cette répétition, l'espace blanc et le contraste et toutes ces approches de conception parce que nous les aimons déjà. Vous savez déjà ce qui a l'air bien et ce à quoi ressemble. C' est comme de la nourriture. Vous savez déjà ce qui a bon goût et quel goût mauvais. Tu n'as pas à aller dans une école culinaire, Teoh. Apprendre quoi ? Ce qui a bon goût et quoi pas. Et si vous apprenez pour vos recettes et les pratiquez quand vous cuisinez quelque chose de bon, vous allez le remarquer, ainsi que tout le monde le fera. 45. Astuce de design : cohérence: Quel est le moyen le plus simple de distinguer un bon design d'un mauvais ? C'est grâce à la cohérence. En regardant le site Web et en constatant à quel point la mise en page, la typographie, les couleurs et tout le reste sont cohérents typographie, les couleurs et tout L'incohérence est très facile à déceler. Nous sommes habitués à reconnaître des modèles dans tout ce que nous observons, et il est très facile pour nous de remarquer des ruptures dans ces modèles Briser le schéma, c'est comme un bug dans la matrice. Parfois, il est difficile de dire exactement ce qui brise le schéma, mais c'est toujours facilement perceptible. Il est souvent préférable d'utiliser un mauvais design et d'être cohérent avec celui-ci, plutôt que d'avoir un beau design et de ne pas être cohérent. La cohérence n'est pas vraiment une astuce, mais plutôt un principe de conception. Je triche donc un peu en incluant cela comme l'une des astuces de conception La cohérence s'applique à tout, mais je l'ai divisée en plusieurs catégories pour en faciliter la compréhension. Le premier et le plus évident est la cohérence de la mise en page. C'est exactement l'un des objectifs de la grille. La grille est un excellent moyen de créer de la cohérence dans la mise en page. Lorsque l'alignement se répète sur la page, les utilisateurs le remarquent et commencent s'attendre à ce que les éléments soient disposés d'une certaine manière Lorsque cette attente est satisfaite, les utilisateurs ont une expérience joyeuse du site et ils font davantage confiance au site. D'une façon, je vois que les concepteurs Web perturbent souvent les cohérences de mise en page en mélangeant différents alignements de texte trois éléments de ce cadre sont alignés au centre les uns par rapport aux autres, ou du moins ils contiennent des cases, mais le texte du paragraphe est aligné à gauche. Cela rompt la cohérence de la mise en page et donne à la conception un aspect bâclé Nous devons choisir un style d'alignement et nous y tenir, soit nous les alignons au centre, soit nous les alignons à gauche. L'une ou l'autre de ces options convient tant que nous nous en tenons à un seul alignement. C'est un exemple évident. exemple plus subtil et moins évident est celui des incohérences entre les différentes sections de la page Par exemple, le contenu de la section centrale est aligné à gauche, tandis centre des autres sections est aligné. Ce serait tout à fait acceptable s'il s' agissait d'un type de texte différent, un titre secondaire ou autre, mais c'est le même titre, mais avec un alignement différent C'est assez subtil car cela se répartit entre différentes sections. Lorsque nous parcourons une page, nous ne voyons qu'une section à la fois Une incohérence aussi subtile n'est donc pas un crime Mais c'est une bonne habitude de s'en tenir à un style dans différentes sections et même sur différentes pages d'un site Web. Il est assez simple de créer de la cohérence dans la typographie. Nous devons simplement créer des styles de police spécifiques pour chaque occasion , puis nous y tenir. Un site Web contient différents types de textes. Il y a les gros titres. Ce sont généralement les plus grandes tailles. Ensuite, vous avez des titres plus petits tels que des titres et des sous-titres. Vous avez évidemment un paragraphe de texte, et vous avez des boutons. Vous pouvez avoir plus, par exemple, petites légendes et des textes de note de bas de page, des liens de menu, etc. L'essentiel est de définir un style unique pour chaque occasion et de s'y tenir. Par exemple, avoir un style de paragraphe et le conserver dans les sections, les pages et partout sur le côté. Dans Fig Mine et Webflow, ce style de texte est en fait l'un des futurs Nous allons donc nous entraîner à créer des styles de texte dans nos projets réels La cohérence des couleurs n'a presque pas besoin d'explication. C'est le plus évident et le plus simple à voir. La plupart du temps, nous travaillons avec la marque existante et un logo. Cela signifie que les couleurs ont été définies pour l'entreprise et que ces couleurs doivent être cohérentes, et que ces couleurs doivent être non seulement sur le site Web, mais aussi sur l' ensemble de sa représentation, qu'il s'agisse de dépliants, de cartes de visite, de PDF, de front-office, etc. Lorsque nous n' avons pas défini les couleurs de marque , nous le faisons nous-mêmes. Nous choisissons généralement une ou deux couleurs primaires comme le bleu et le vert dans cet exemple, et les autres couleurs sont le monotone, le noir, la grâce et le blanc Nous pouvons notamment briser les cohérences en mélangeant différentes formes sur la page Sur une page comme celle-ci qui possède ce bord ondulé arrondi et lisse, introduction d'une telle forme d'angle briserait la cohérence rendrait très étrange, mais le fait de conserver les mêmes formes lisses créerait la cohérence sur toute la page Il n'est pas nécessaire que ce soit exactement la même forme tant que la forme présente des caractéristiques similaires. Cette incohérence avec les formes peut en fait se produire dans des endroits très inattendus Par exemple, lorsque nous utilisons de telles découpes, elles créent des bords lisses sur la page Ils ne sont pas évidents, mais ils sont là. Lorsque nous plaçons une photo de boîte normale non découpée dans la section suivante, nous introduisons une nouvelle forme conflictuelle. Tout d'un coup, à partir de bords naturels lisses, elle est passée à des lignes droites et dures très strictes, et elle a même créé cette nouvelle forme qui n'existait pas auparavant. Comme je l'ai mentionné dans la leçon d'illusion d' optique, placer des objets et des formes sur une toile noire affectera cette toile et créera de nouvelles Cela est particulièrement vrai pour les lignes droites et les rectangles. Mais si nous réutilisons la découpe, les lignes dures et les formes étrangères disparaissent et la section devient cohérente avec la section du héros ci-dessus. En ce qui concerne les photos, nous devons également être cohérents avec le style des photos. Par style, j'entends un style photographique, comme les couleurs, les filtres, l'apparence des modèles, etc. Dans cet exemple, par exemple, je n'ai pas réussi à choisir des photos du même style. Celui de gauche a un aspect plus raffiné, tandis que le second est plus naturel. Le fonctionnement de la caméra semble également très différent. Je ne suis pas photographe, mais je remarque que cela n'a pas été pris dans le même studio ni par le même photographe. La plupart de ces photos auront un style très différent car elles sont prises par différents photographes et dans des scénarios différents. Il peut être assez difficile de maintenir la cohérence, mais il existe un moyen. L'une des solutions consiste à sélectionner des images provenant du même contributeur. J'en ai déjà parlé. De nombreux sites de stock auront cette option pour voir les photos du même contributeur, c'est-à-dire du même studio photo, du même photographe. Si nous choisissons les photos du même contributeur, nous obtiendrons plus ou moins les mêmes résultats car le même photographe aura le même style, même appareil photo et les mêmes habitudes de prise de photos. Même si ce n'est pas à 100 %, c'est pareil , car parfois ils auront juste des tournages différents et des manières de filmer différentes selon les scénarios. De plus, leurs styles peuvent changer d'année en année. C'est un moyen très simple et excellent de rendre votre design cohérent et montrer qu'il s'agit d'un design de haute qualité. Je sais que c'est un détail insensé auquel il faut prêter attention, mais quand il s'agit de design, diable se cache dans les détails L'attention portée à ces petits détails est ce qui différencie un designer médiocre d'un designer haut de gamme Enfin, je voudrais aborder la question de la cohérence en ce qui concerne les icônes et les illustrations. Le Web regorge d'icônes et d'illustrations. Ils constituent un excellent moyen de montrer différentes actions, de démontrer concept complexe ou simplement de donner à un design un aspect unique. Tout comme la photographie, la combinaison d' icônes de styles différents créera un look très irrégulier et impoli C'est pas marrant. En fait, les icônes et les illustrations sont encore plus impitoyables que les photos ordinaires Dans cet exemple, le style de la troisième icône est différent de celui des deux premières. C'est la même palette de couleurs, les nuances sont similaires, mais elle n' a toujours pas l'air à sa place. En fait, la différence ne tient qu'à un petit détail. Les deux premières icônes sont surlignées. C'est cette ligne noire qui délimite chaque objet du dessin. Mais le troisième ne l'a pas, et cela crée un look complètement différent. Dans cet exemple, les trois icônes proviennent du même pack et ont exactement le même style. Bien que de même taille, le premier à avoir des lignes plus fines lorsque le dernier est un peu plus épais. La troisième icône me pique les yeux. Le client non designer ne remarquera pas exactement ce qui ne va pas. Ils ne seront peut-être pas en mesure de mettre le doigt dessus, mais ils remarqueront de telles incohérences et n'auront pas l'impression que le design est très bon Pour éviter de telles incohérences dans les icônes et les illustrations, comme dans le cas des photos d'archives, choisissez-les auprès de la même source Mon endroit préféré pour obtenir des icônes est Flat Icon.com. Les icônes ici et ailleurs sont généralement organisées par packs. Toutes les icônes d'un même pack auront le même style, les mêmes tailles, la même épaisseur de lignes, etc. Lorsque vous choisissez des icônes pour vos projets, recherchez des packs plutôt que des icônes individuelles provenant de différents packs. Cela vous donnera un look uniforme et raffiné et vous permettra de concevoir comme un pro. 46. Astuces de conception : Superposition: voici un peu avancé mais très cool astuce de conception. Cette astuce rendra vos conceptions très solides. Les concepteurs débutants qui ont généralement peur et très, très, vous verrez le travail amateur en utilisant cette astuce. Donc, si vous utilisez cela, votre travail apparaîtra certainement comme un design pro, l'astuce est de prendre différents éléments et de les chevaucher. Voyez-vous comment la main de la statue se chevauche le titre National Geographic et aussi le cadre jaune ? Il rend le design plus intéressant et ajoute une dimension supplémentaire à la composition. L' exécution de cette astuce est assez simple. Vous prenez deux éléments distincts et les chevauchent. Il se lie à des éléments autrement déconnectés ensemble, et il crée également du drame dans le design. Quelque chose d'intéressant se passe dans nos yeux maintenant intéressé à résoudre le puzzle, faisant un vieux design et lié ensemble plutôt que juste placé sur la page au hasard. L' astuce est très commun. Dans la conception de la prison. Vous verrez des titres qui se chevauchent avec les personnes, des images les unes avec les autres, attaques avec des balises, vous le nommez dans la conception Web. C' est un peu plus mesuré et moins extrême que vous le voyez en impression. Comme vous pouvez le voir chevauchements dans Ces exemples sont plus subtils sur le trajet. Vous avez des images qui se chevauchent les unes avec les autres, mais elles ne créent pas de chevauchement complexe avec des blocs de texte et, à gauche, des chevauchements de texte pour l'image d'arrière-plan. Assez simple. Une raison pour laquelle j'aime cette technique est parce que vous pouvez ajouter à un design autrement fade et belle flair d'excitation a récemment travaillé sur sa section de prix. Habituellement, les produits ont plusieurs plantes de prix droit, et qui a un peu de tremblement à jouer avec et de créer un design intéressant. Mais celui-ci n'en avait qu'un. Mon design initial était quelque chose comme le sien, qui avait l'air très fade et ennuyeux. y a pas eu d'excitation aujourd'hui. Envoyez senti comme il a été juste mis au hasard là-bas. J' ai créé une nouvelle forme et je l'ai chevauchée derrière la boîte. Amélioration instantanée. Maintenant, c'est une forme non traditionnelle. Si vous introduisez quelque chose comme ça sur la page, vous devez le répéter à nouveau. Rappelez-vous la technique de répétition. J' ai donc utilisé la même forme et chevauchement astuce sur les autres endroits sur la page, ce qui a fait un très bon résultat. Voyons comment nous pouvons appliquer cela dans la pratique. Disons que nous avons une section sur la page où nous voulons montrer quelques images. Nous pourrions organiser ces images à quelque chose comme ça, ce qui est raisonnable mais un peu ennuyeux. Ou nous pouvons les chevaucher et créer amore. Visuel intéressant. Vous avez vu cette épouvantable 1 000 000 fois avec des collages photo. Eh bien, accord, on a quelque chose qui se chevauche ici sur ce qu'il faut faire quand on veut utiliser une seule photo. Simple. Dessinons la boîte et le chevauchons avec l'image. Et maintenant, nous avons un design intéressant. De plus, la photo n'a pas l'air d'y accrocher au hasard, mais on dirait qu'elle est posée là où elle appartient. La couleur de la boîte est importante. Dans ce cas. J' ai juste simple la couleur de l'image. Mais dans d'autres cas, c'est une bonne occasion d'utiliser la technique coloriste de marque ou de répétition pour répéter les couleurs travers la page. Une chose à noter. chevauchement. Beaucoup de fois casse la grille. Cette boîte d'arrière-plan n'est pas alignée sur le grand chevauchement et la création de notre épée sont des concepts opposés. Overlapping Trick essaie intentionnellement de briser l'alignement et d'apporter un peu de financement. La composition Briser le grand intentionnellement n'est pas un crime, comme je l'ai déjà mentionné le intentionnel est le clavier. Chaque décision de conception doit être intentionnelle, et si elle est alors en train de briser et de plier les règles, un peu est le bienvenu. Dans ce cas, nous ne jouons pas avec convenu que beaucoup. Les cases en arrière-plan. C' est une sorte de partie de l'arrière-plan de la toile de fond la taxe sur l'image et d'autres éléments sont assis sur cette toile, qui en soi n'a pas un grand Ce sont les éléments qui sont sur elle qui laissent sur la grille. La même chose vaut pour plein avec les images de fond. Ils sont séparés des caméras et sont assis sur le calque d'arrière-plan afin qu'ils n'aient pas besoin d'être alignés avec le grand. Faisons un exercice pour que vous puissiez pratiquer cette technique qui se chevauche. 47. Assignment : se chevaucher: Dans ce devoir, vous vous entraînerez à la fois à superposer des éléments et à répéter un peu Dans le fichier Figma, j'ai préparé un cadre contenant trois blocs de texte. Vous allez concevoir une section sur les avantages pour une application de voyage. D'après la façon dont j'ai présenté le texte, je pense que vous pouvez deviner que je veux que vous créiez cette mise en page alternée. Texte d'un côté et image de l'autre côté. Mais au lieu d'illustrations utilisant des photographies ordinaires, je veux que vous trouviez des photos pour chaque bloc de texte. De cette façon, vous vous entraînerez également à trouver des photos. Pour le style qui se chevauche, je veux que vous choisissiez un style et que vous l'utilisiez avec les trois blocs Vous pouvez utiliser un type de collage de photos ou de superposition. Cela vous obligera à trouver plusieurs photos pour chaque bloc. Vous pouvez également utiliser une photo et utiliser un cadre d'arrière-plan derrière la photo. Comme d'habitude, utilisez d'autres concepts que vous avez déjà appris, utilisez la grille, choisissez les téléphones , créez une hiérarchie, etc. Je ne vais pas faire d'exemple démonstration cette fois-ci car vous savez déjà comment faire tout cela. Amuse-toi bien. 48. Astuces de conception : Tension: partage beaucoup de similitudes avec la musique. Tout comme les designers. Les musiciens utilisent également astuce de contraste, qui peut être le contraste entre les notes élevées et les notes basses entre aller vite et aller lentement. Ils utilisent également la répétition, qui est le rythme du coulé. Ils utilisent même des espaces blancs, qui sont des pauses et des parties silencieuses de la musique. Encore une technique. Ces deux parts de champ s'appellent Tension dans la musique. C' est là que la mélodie commence à remonter. Ah, et c'est une sorte d'ajouter à l'élan, puis devient un peu plus dramatique et à moment donné une sorte d'explose dans cette nation de me tuer, par exemple, et la musique techno. Ça va à ce rythme très lourd. L' attention est quelque chose qui rend tout travail créatif intéressant, et il est utilisé dans d'autres domaines en plus du design et de la musique. Par exemple, dans la fiction, la tension est appelée suspense. Alors, comment la tension est-elle créée dans le design ? C' est un carré posé à plat sur la surface, en équilibre complet et en alignement central ? Il n'y a pas de tension ici. Rien ne se passe. Pas de drame. C' est solide et ancré. Et maintenant ? C' est une autre histoire, n'est-ce pas ? La place n'est plus à plat. il est debout sur son coin, qui semble que soit il va basculer sur le côté plat avec une inclinaison simple , nous avons créé beaucoup de tension. Incliner les éléments est une façon de créer l'attention. Il y en a plus. Vous pouvez déplacer des éléments vers le bord du cadre ou déplacer des éléments hors de l'équilibre ou des parties élevées de l'objet. C' est quelque chose que nous avons déjà joué avec dans le cadre du recadrage extrême. La tension est l'une des raisons pour lesquelles la culture extrême est une astuce si intéressante à utiliser . Et si la culture extrême est inégale, comme cette affiche de film, elle augmente encore plus la tension. Rappelez-vous que la règle des tiers Tension est exactement pourquoi cette règle fonctionne vraiment bien. Lorsque les objets dans le centre de la dette se sentent stables et un peu ennuyeux. Le placement hors équilibre peut créer un aspect plus intéressant visuellement. Le chevauchement est une autre façon de créer de la tension. Le chevauchement a d'autres avantages, comme l'ajout de dimension supplémentaire parce que les objets sont superposés les uns sur les autres ou parce que des éléments imbriqués lient le design ensemble. Mais cela ajoute aussi de la tension parce que deux objets interagissent maintenant les uns avec les autres d'une manière très intéressante. Une façon de créer une tension et un mouvement dans la conception est d'utiliser des formes diagonales ou inclinées. Ce genre de tension est très utile lorsque vous voulez représenter la vitesse et le mouvement dans votre conception. Pourquoi les formes diagonales créent-elles de la tension et le mouvement est-il très facile à démontrer ? C' est encore une image, mais nous pouvons sentir ce cercle sur le point de rouler. C' est ainsi que les angles au sentiment hors mouvement dans la conception. 49. Objet : tension: Dans ce devoir, vous allez pratiquer la tension. La méthode de fixation de la tension demande un peu de pratique. Je veux que tu te détendes et que tu joues. Ne vous inquiétez pas si vous n'êtes pas très satisfait du résultat, amusez-vous bien. C'est ainsi que fonctionne habituellement la tension. Vous faites des bêtises pendant un moment et à un moment donné, l'une des versions semble tout à fait correcte. Il y a un cadre dans ce fichier figma. Je veux que vous conceviez la section de manière à créer une certaine tension dans le design. Comme nous l'avons déjà mentionné, vous pouvez créer de la tension de plusieurs manières , par exemple en utilisant des angles. Comment utilisez-vous les angles ? Eh bien, souvenez-vous de la mise en page classique en écran partagé que nous utilisons habituellement pour de telles sections. Au lieu de les avoir à angles droits et droits, nous pouvons les incliner nous pouvons les incliner Pour modifier n'importe quelle forme dans Figma, suffit de double-cliquer dessus ou cliquer sur Modifier l'objet dans la barre d'outils Vous allez maintenant avoir ce genre de vue. Les points situés aux coins du rectangle peuvent être déplacés Faites-les glisser à votre guise pour former un rectangle incliné. Lorsque vous entrez dans votre Dunk Heat, ne l'oubliez pas, car l'écran est désormais verrouillé dans ce mode d'édition de la forme, et vous ne pourrez pas réellement cliquer sur un autre élément ni faire quoi que ce soit d'autre sur la page Il m'arrive de double-cliquer accidentellement sur des formes comme celle-ci, ce qui me place en mode édition et je ne suis pas capable de cliquer sur autre chose Je me demande ce qui se passe, et Vikma n'indique pas très clairement que vous êtes en mode édition N'oubliez pas que si vous ne parvenez pas à sélectionner un élément, cela signifie que vous êtes probablement en mode édition de l'une des formes. Nous pouvons maintenant utiliser la forme pour recadrer notre image. Nous pouvons soit remplir la forme avec une image, comme d'habitude, en plaçant simplement l'image à l'intérieur en guise de remplissage. Ou puisque nous avons déjà l'image sur la page, nous pouvons simplement modifier la forme de cette image. N'oubliez pas que l'image dans Figma n'est qu'une forme normale avec un remplissage d'image à l'intérieur Tout ce que vous pouvez faire avec un rectangle ou toute autre forme, vous pouvez le faire avec l'image 2. Nous pouvons simplement sélectionner l'image, cliquer sur Modifier l'objet et modifier les points de la forme pour créer une forme inclinée Si vous devez modifier la position de l' image à l'intérieur ou modifier la taille, vous pouvez le faire à l'aide de l'outil de recadrage. D'ailleurs, l'utilisation de telles formes pour recadrer des images de manière créative dans le design s'appelle le masquage La forme que nous venons de créer s'appelle un masque. Maintenant, agrandissez et positionnez l'image à l'intérieur du masque comme vous le souhaitez. Et là, en quelques clics, nous avons déjà une mise en page avec beaucoup de tension. Vous pouvez ensuite modifier la couleur de l'arrière-plan si vous le souhaitez. Vous pouvez également modifier l'angle et la position de votre masque. Une autre façon de créer une tension consiste à aligner un objet sur le bord. Cela, vous ne pouvez le faire qu' avec certains objets. Par exemple, vous pouvez le faire avec un titre ou du texte s'il est suffisamment grand Faire cela avec un texte de paragraphe donnera l' impression que c'est une erreur. J'utilise parfois ce type d'alignement des arêtes lorsque je numérote des étapes ou quelque chose comme ça Vous pouvez également créer des tensions en utilisant une disposition déséquilibrée ou en superposant certains éléments Par exemple, superposer le titre à cette photo ou mettre certains éléments d'équilibre . C'est bon. Maintenant c'est votre tour, vous avez déjà assez d'idées pour créer des tensions et n'oubliez pas de styliser le titre, le texte et le bouton Surtout, amusez-vous bien dans cet exercice, car lorsqu' il s'agit de tensions et de chevauchements de figures, le meilleur résultat est de vous amuser et de jouer avec Alors amusez-vous, jouez et voyez si cela fonctionne. Si ce n'est pas le cas, ne vous inquiétez pas trop. Cela viendra avec un peu de pratique. 50. PARTIE 2 : PRATIQUE : CONCEPTION 2:: vous avez terminé la première partie de ce cours, donnez-vous une tapoche sur le sac. Cette partie était une poignée. Excellent travail. Vous avez appris les secrets d'un bon design et comment rendre votre travail beau dans cette partie. On va devenir un peu plus sérieux. Ain designer page d'accueil du début à la fin, Allons-y. 51. La méthode imique: Je veux partager avec vous un sale petit secret de toutes les personnes créatives. Chaque designer, chaque artiste, chaque inventeur. Chaque musicien qui a vécu a utilisé cette méthode pour atteindre la maîtrise de son habileté. Cette méthode est appelée la méthode mimique. Vous voyez les étapes de début. Apprendre n'importe quel nouveau métier, c'est imiter les experts dans ce domaine. Donc, si vous voulez apprendre à cuisiner, vous prenez Gordon Ramses ou le livre de recettes de John Oliver, et vous commencez à pratiquer quelques recettes. Vous ne commencez pas par inventer la nourriture à partir de zéro. Vous commencez à imiter ces recettes, puis à les pratiquer. Et une fois que vous gagnez un peu d'expérience et un peu plus de confiance dans toutes les recettes cuisinées, vous commencez à les peaufiner un peu. Et puis à un moment donné, vous commencez à réinventer et à créer vos nouvelles recettes. Si vous apprenez à jouer de la guitare, vous ne commencez pas par écrire de nouvelles chansons, ni vous commencez par imiter d'autres musiciens, ce qui signifie que vous commencez à jouer leurs chansons. Et comme tous les autres guitaristes débutants, vous commencez par apprendre merveilleux. Beaucoup de concepteurs débutants sont pris au piège parce qu'ils pensent qu'au moment où ils commencent concevoir, à concevoir,ils doivent commencer à créer une œuvre nouvelle ou originale, et ils sont découragés quand cela n'arrive pas. Ils pensent qu'ils n'ont pas de talent pour cela, mais ils ignorent le coup de couteau le plus important, imitant les experts en imitant les experts. Non seulement vous obtenez de l'expérience et de la confiance, mais vous pratiquez également de très bonnes habitudes parce que chaque bon travail de conception est plein. Avec toutes les bonnes habitudes de conception que nous discutons dans ce cours ah, être la typographie et la cohérence de mise en page et toutes les astuces de l'espace blanc et la tension et chevauchement tout ce qui est en bon. J' ai un bon travail de conception, et vous pratiquez tout cela pendant que vous imitez quelqu'un en sorte de copier et de répliquer leur travail et d'inspirer en utilisant leur travail est une source d'inspiration. Et une fois que vous commencez à créer votre propre œuvre originale, vous avez déjà de très bonnes habitudes de conception ancrées en vous. Mimicking a trois étapes. La première étape est de faire face. Ça prend quelqu'un d'autre qui travaille, juste copier. Obtenez pixel par pixel comme jouer la chanson de quelqu'un d'autre ou vous cuisinez des lasagnes en utilisant une recette. Ceci est fait pour la pratique plutôt que pour des projets réels. Lorsque vous apprenez en copiant votre apprentissage beaucoup de décisions de conception humaine qui ont été prises par un professionnel. C' est là que commence chaque personne créative. Soyez tiré McCartney ou Picasso dans la deuxième étape, vous remixez. Il faut le travail de quelqu'un d'autre pour lui donner sa propre touche. Tout comme les recettes alimentaires. Vous commencez à peaufiner les ingrédients. Petit à petit. Vous changez ce téléphone, vous utilisez vos couleurs, modifiez les formes un peu. Maintenant, vous avez créé quelque chose de différent. Cependant, si vous assemblez deux œuvres, l'inspiration est clairement visible. Dans cette étape, vous pouvez déjà vous entraîner à travailler avec de vrais projets dans la troisième étape finale. Maintenant, vous ne tirez pas l'inspiration d'une œuvre particulière, mais plutôt comme plusieurs œuvres différentes ou des styles différents et peut-être même comme des tendances. Et ici, vous ajoutez encore plus de touche personnelle. Donc, le résultat final ne ressemble plus à un travail particulier. Et vous ne pouvez pas dire que c'est un remix sur ce site particulier ou ce design particulier , bien que parfois vous pourriez dire qu'il y a clairement une influence ou un style spécifique ou une tendance spécifique dans le design, n'y a pas de niveau au-delà. Il y a quelque chose comme un travail vraiment original, parce que si les choses ne sont pas vraiment basées sur la réalité et l'influence de la réalité et des styles existants , alors cela devient juste hors de propos et assez déroutant pour le public régulier. Un peu comme les articles de mode haut de gamme bizarres. Trop d'originalité conduira à des produits que les gens ne comprennent pas et ne veulent pas utiliser. Ça ne veut pas dire que les gens n'aiment pas les nouvelles choses. Ils dio. Les gens font peu profiter de vos sites Web qui ont l'air frais et votre styliste de mode crash technique . Mais ils apprécient ces choses parce que la plupart du temps, ils ressemblent à quelque chose du passé et à quelque chose d'existant, mais les regardent d'une perspective très nouvelle et nouvelle perspective. Donc, il est rafraîchi look de quelque chose de familier. Le goût du public est donc vraiment important pour qu'une œuvre particulière soit appréciée ou rejetée. Ce look étrange vestes, pull ou éponge balle travées est et familier à vous et moi. Mais il pourrait s'inspirer d'un autre Warrick et d'un public particulier. Ce spectacle pourrait être familier avec cette inspiration, sorte qu'ils pourraient facilement la comprendre et l'apprécier. Aujourd'hui, vous commencez à dire ça avec un visage droit. En outre, les étapes sont comme un bouton de volume, pas de transition de coupe claire de l'un à l'autre, mais plus comme une augmentation lisse de l'intensité, avec différents niveaux dans chaque étape. On va pratiquer ces trois étapes. Mais avant de le faire, nous devons d'abord apprendre à trouver la bonne inspiration et à fonder notre travail sur cela. Et faites ça à la place de Trecia une fois. Alors faisons-le ensuite. 52. Le plus grand secret des designers - Inspiration: Pablo Picasso cherchait une source d'inspiration pour son prochain travail. Il a été fasciné par l'art africain. Il s'est inspiré du masque Dogon Tribe et s'est lancé dans le style Kubi pour lequel il est le plus célèbre Comme vous pouvez le constater, la ressemblance est incroyable. Son travail était en fait très différent avant cette période. Une bonne inspiration peut également transformer votre travail. Supposons que vous travailliez sur un projet de conception d' un site Web pour une société financière. Votre premier réflexe pourrait être d'aller dans Google et de chercher des exemples d'autres sites Web financiers. Mais vous obtenez ici des modèles de données qui se ressemblent, et cela n'a rien d'inspirant Pourquoi Google est-il un mauvais endroit pour rechercher de l'inspiration en matière de design ? Parce que Google n'est pas un site Web qui propose un bon travail de conception Il a un objectif très différent : il recherche et classe les sites Web de manière à montrer du contenu qui existe, qui a autorité, existe depuis des lustres et a été visité par de nombreuses personnes. Et c'est exactement le contraire de ce que vous recherchez en matière d'inspiration design. Une recherche par mot clé pour trouver l'inspiration pour un site Web du ministère des Finances m' a mené à un article qui présentait des sites Web comme celui-ci, intitulé « conceptions de sites Web innovantes et inspirantes Pas étonnant qu'il présente tels modèles de données alors que l'article date de 2016. C'est bien trop vieux pour s'inspirer de la conception de sites Web. Ajoutez au fait que les sites Web mentionnés ont probablement été créés quelques années avant l'article. a aussi le fait que l'auteur n'est peut-être pas du tout un designer et que vous obtenez de terribles exemples de sites Web. Tant de designers débutants commettent cette erreur, ils cherchent l' inspiration pour la conception Web au mauvais endroit et commencent à imiter travail de conception Web très désuet ou moche Utiliser une inspiration de qualité pour vos projets vous permettra d'obtenir d' excellents résultats de conception. Et je vais vous apprendre mes endroits préférés pour trouver superbes et beaux sites Web ou une autre source d'inspiration en matière de design. L'un d'eux est dribble.com, Dribble Faisons la même recherche sur le site Web financier ici. Voici quelques résultats de près. C'est des kilomètres d'avance sur ce que nous avons vu sur Google. Le design, la mise en page et Carls air frais et modernes ici, pas dans les années 90 Dribble est essentiellement un jeu de designer qui montre et raconte. Pour contribuer, vous devez être invité par un membre existant, ce qui crée un certain niveau de point de contrôle pour éviter les mauvais travaux L'algorithme de recherche est différent de Google Two. Ici, l'un des paramètres de tri est le nombre de likes, c'est-à-dire le nombre de designers qui ont aimé le travail. C'est une meilleure façon de raconter un bon travail qu' un blogueur financier qui choisit des sites au hasard en fonction de ses goûts. Beaucoup de ces œuvres ne sont que des designers qui s'amusent. Cela signifie qu'ils n'ont même pas encore été transformés en véritables sites Web. C'est une source d' inspiration en avance sur son temps. Au bout d'un moment, vous commencez à suivre des designers que vous aimez et créez une très bonne inspiration personnalisée. Vous choisissez des designers qui ont un style de tige que vous aimez et qui mettent en valeur le design. J'utilise également ces deux sites Web pour trouver mon inspiration. Ces sites proposent des sites Web et des pages de destination en direct. Si vous ne savez pas ce qu'est une page de destination, il s'agit d'une page d'un site Web sur laquelle un visiteur atterrit. Il peut s'agir d'une page d'accueil de notre site Web ou de pages dédiées spéciales utilisées à des fins de marketing. J'aime beaucoup ces sites car ils sont vraiment bien organisés. Les captures d'écran sont bien affichées, et je peux voir le site Web en direct et le consulter plus en détail. Je peux même y voir des téléphones qu'ils utilisent, des tailles, des animations et des interactions, et même voir d'autres pages du site. C'est vraiment un excellent endroit pour trouver l'inspiration. Mon troisième endroit préféré pour trouver l'inspiration est en fait Pinterest. Bien que sur Pinters, il faut être un peu plus prudent, il ne s'agit pas de contenu sélectionné par des Donc, tout comme Google, vous pouvez avoir pas mal de pommes pourries. Mais je cherche l'inspiration sur Pinterest pour une seule raison. Ils ont un algorithme de recherche incroyable où, quelle que soit l'image que vous recherchez, ils peuvent trouver des styles similaires avec une précision incroyable. Par exemple, si vous trouvez un style de design qui vous plaît, cliquez sur cette icône. Et regardez ça. Sans même que je précise quoi que ce soit, ce sont des designs de surface dont le style est très similaire. Vous voyez comment les exemples de droite présentent des formes et des bords ondulés, lisses et arrondis, en particulier dans ce design particulier Le style est tellement similaire, c'est étrange. Voici un autre exemple pour un style totalement différent. Cette fois, pas de couleurs éclatantes ni de formes arrondies, mais plutôt des designs lourds en photographie. Il s'agit d'un outil très puissant pour un designer. Souvent, je trouve un style spécifique qui me convient, mais je ne peux pas voir d'autres exemples du même style parce que je ne peux pas les mettre correctement en mots. En venant sur pinras, je peux trouver de nombreux exemples du même style et collecter plusieurs pour m'inspirer Tout comme parce qu'une façon géniale mais un peu avancée de chercher l'inspiration est de la chercher en dehors du domaine de la conception Web. Par exemple, je travaillais sur ce projet qui était un site Web caritatif, et je voulais créer quelque chose et concevoir quelque chose de haut de gamme un peu différent, qui ne ressemble pas à d'autres sites Web caritatifs. Partout où je cherchais l'inspiration, je n'ai trouvé que ce thème très courant des enfants africains à l'air triste. Cela a l'air très cliché. Désolée, les enfants. Au lieu de cela, je suis allée chercher des affiches de films, car les affiches de films sont conçues de manière incroyable Ils dépeignaient beaucoup de drame et de tension. J'ai trouvé ce poster de Sicario, et j'ai beaucoup aimé le style. Je le faisais sur Pinters, ce qui m'a donné d'autres suggestions qui se ressemblent, puis boum, cette affiche est apparue Cela m'a donné des idées plus concrètes fusionner la photo d'une personne avec quelque chose d'autre, comme le visage de Peter Dinklag fusionnant avec la Cela m'a amené à créer une section dédiée aux héros qui ne ressemble en rien à un modèle de site caritatif. 53. Assignment : tableau d'ambiance: Lorsque les designers rassemblent différentes œuvres pour s'inspirer, ils créent ce que l' on appelle un moodboard Il s'agit essentiellement de rassembler toute source d' inspiration qui, selon vous sera utile pour votre projet. Ceci, par exemple, est un moodboard issu de l'un de mes projets clients Il y a des écrans de différentes pages d'accueil que j'ai trouvés sur les côtés que j'ai mentionnés précédemment. Vous pouvez même vous inspirer de votre travail personnel. Par exemple, l'un de ces clichés que j'ai mis ici est mon propre travail. L'inspiration ne doit pas nécessairement être la conception d'un site Web. Vous pouvez rassembler des illustrations que vous aimez, écrans d' applications, des œuvres d'art, d'architecture, photographie, des affiches de films ou, vous savez, masque Do Gun Tribe, comme Picasso. n'y a pas de règles. Il s'agit essentiellement de créer l'ambiance de votre projet, comme son nom l'indique. Dans cet exercice, nous allons nous entraîner à créer un moodboard Votre objectif est de vous rendre sur les sites Web d'inspiration que j'ai mentionnés précédemment et inspirer pour un site Web pour une application de partage Uber kin R. L'application elle-même n'est pas votre projet. Le projet est essentiellement un site Web, comme une page d'accueil pour l'application Right sharing. Permettez-moi de vous montrer un exemple. Je vais créer un moodboard pour un site Web de collaboration en équipe ou une page de destination Vous savez, comme Slack et Trello, si vous le connaissez Mes sites d'inspiration sont ouverts ici. Mais d'abord, je vais commencer à regarder les sites Web, je le sais déjà. Je vais vérifier que Slack Asana est un autre outil que je connais dans Trello et voir ce qu' Lorsque vous aimez un site Web une section ou une partie de la page, il vous suffit de prendre une capture d'écran. Nous organiserons toutes les captures d'écran et les images ultérieurement. OK. Jetons maintenant un coup d'œil sur d'autres sites d'inspiration. recherche dribble avec des mots clés n'est pas une bonne chose, alors essayez d'utiliser le moins de mots clés possible et des mots différents Celui-ci n'est pas mal. Souvent, sur Dribble, les concepteurs publient l'écran de la page complète, que vous pouvez voir dans la pièce jointe ici Ainsi, vous pouvez voir la page entière plus en détail. Je vais juste enregistrer la page entière. Ici, j'aime bien ces éléments d' interface qui se chevauchent. C'est sympa car cela donne une meilleure idée du produit. Voyons d'autres sites d'inspiration. Je passe généralement environ une heure à trouver l'inspiration. C'est une partie importante du processus de conception, et si je fais cette partie avec diligence, j'ai plus de facilité à concevoir Si ce n'est pas le cas, j'ai souvent besoin de revenir et de trouver plus d'inspiration. R. Pinterest est en fait endroit où je sauvegarde des inspirations aléatoires en dehors des projets si je navigue sur le Web au hasard et que je tombe sur un design intéressant, je l'enregistrerai sur Pinterest pour référence future. C'est un endroit idéal pour avoir votre propre collection personnelle. Vous pouvez créer votre tableau personnel sur Pinterest, puis installer l'extension de navigateur et enregistrer captures d'écran et des images du Web dans votre collection privée. Ensuite, vous pourrez revenir aux pintes plus tard lorsque vous chercherez de l' inspiration pour votre projet Je vais maintenant me concentrer sur le sujet, pas nécessairement sur les sites Web de collaboration en équipe. C'est pas mal. Cette section est très jolie. J'aime que les photos se chevauchent avec ces graphismes. La Paninja, ou Landbook, sont excellents parce que nous pouvons voir des sites en direct, ce qui peut nous donner des idées sur animations, les interactions et tout ça Je pense que nous en avons assez, et maintenant nous allons créer un moodboard dans Figma et y placer tous ces clichés Dessinez un cadre de base dans Figma et faites-y toutes vos captures d'écran J'utilise un fond sombre car la plupart des sites Web sont en blanc, ils auront donc une meilleure visibilité sur un cadre sombre. Peu importe comment vous les organisez ici. Vous pouvez les disperser comme bon vous semble. Moi. Et c'est tout ce qu'il y a à voir. C'est notre moodboard. Plus tard, nous apprendrons comment nous inspirer de toutes ces choses que nous avons collectées et comment les utiliser dans le projet pendant que nous le concevons. Maintenant c'est ton tour. Allez-y et inspirez-vous pour notre site Web dédié à l'application de partage R. 54. Projet : conception de la page d'accueil dans Figma: Sachez comment puiser l'inspiration pour nos projets, et nous allons maintenant apprendre à utiliser cette inspiration pour nos designs. Comme je l'ai déjà mentionné, la méthode d'imitation comporte trois étapes, à la copie, le remix et la dernière étape la création Dans cette leçon, nous allons nous entraîner à la première étape, la copie. Vous allez créer l'une des pages produits d'Apple. Votre objectif est de correspondre le plus possible à leur design , pixel par pixel. Ce faisant, vous acquerrez une expérience pratique précieuse. Vous vous entraînerez à concevoir des éléments de site Web très courants tels que des barres de navigation différents composants, chaussures, etc., et vous ferez tout cela sans avoir à vous soucier des couleurs polices, des mises en page et tous les éléments de conception, car vous ne faites que copier ce qui existe déjà à petit, comme apprendre à cuisiner ou à jouer de la guitare. Ouvrez le fichier Figma, lié à cette vidéo. Vous trouverez ici la capture d'écran de la page. Ce n'est pas la page complète. J'ai supprimé certaines sections pour simplifier les choses, et ce n'est peut-être pas la version actuelle, mais ça va. Ça ne nous intéresse pas. C'est un design assez simple et intemporel, il est donc parfait pour cette mission. Sur la droite se trouve un cadre vide dans lequel vous allez créer cette page exacte. Lorsque vous travaillez sur cette mission, je veux que vous remarquiez tous les principes de conception que vous avez appris jusqu'à présent. Comment utilisent-ils la hiérarchie visuelle ? Quelles méthodes de contraste utilisent-ils ? Comment alignent-ils les éléments, etc. Avec ce que vous avez déjà pratiqué dans Figma, vous en savez assez pour accomplir cette tâche, même si je vais commencer les choses et vous montrer certaines parties Sur ce cadre, j'ai inclus la capture d'écran de la page d'accueil. C'est caché maintenant. Si vous l'activez, vous verrez la version pâle de la capture d'écran J'ai diminué l'opacité, ce qui revient à sélectionner cette opacité de 30 % ici Ce n'est donc pas un problème, vous pouvez donc travailler sur le design et y mettre des éléments sans que la capture d'écran ne vous gêne. Ajoutons d'abord la grille au cadre pour nous aider à l'alignement. Sélectionnez votre cadre et sous le guide de mise en page, ajoutez une nouvelle grille, pas ce genre de grille à carreaux, mais ce que nous voulons, ce sont des colonnes, 12 comme d'habitude Et en utilisant cette section, cette section à trois colonnes, nous pouvons calibrer la grille car cela révélera les marges, la gouttière qu'ils Ainsi, par exemple, en commençant par les marges, commencez simplement à augmenter jusqu'à ce que vous atteigniez le bord de cette petite carte blanche si vous pouvez vraiment la voir, car l'enregistrement vidéo compresse le fichier et vous ne pourrez peut-être pas le faire, mais vous pouvez le voir ici, non ? Et la gouttière semble faire 20 pixels, donc elle fonctionne très bien placer cette grille sur cette page nous révèle comment Apple gère la mise en page et la distribution des éléments. Il s'agit d'une information très précieuse dans votre processus d'apprentissage. Vous pouvez examiner le fonctionnement d'autres modèles. Par exemple, nous pouvons voir que pour la navigation ici, dans la barre de navigation, dans le pied de page, ici même, ils ne suivent pas réellement les bords de la grille ou les bords du contenu principal Le contenu principal dans un endroit différent. La pratique de l'industrie consiste à tout aligner bord à bord sur le conteneur principal. Cela semble plus cohérent et plus net, mais Apple aura ses raisons. Peut-être une cohérence avec leur site d'achat, leur pile de code ou autre chose. Ne vous attendez donc pas à une correspondance stricte avec notre grille de 12 points. Oui, même s'il s'agit d'une norme industrielle selon laquelle les concepteurs utilisent une grille à 12 points, il s'agit davantage d'un guide vague que d'une règle stricte. De plus, nous utilisons les grilles Figma car elles nous aident lors de l'exploration du design Mais sur les sites de production, nous ne suivons plus la grille, car nous créons sites réactifs qui se rétrécissent et s'étirent comme un accordéon, et nous utilisons des règles de dimensionnement très différentes pour atteindre une telle réactivité, vous le verrez dans la section Webflow Insérons l'image du héros. J'ai enregistré tous les éléments d'image dans ce fichier afin que vous puissiez facilement les insérer dans votre design. Ils se trouvent dans ce sap d'actifs sous cette bibliothèque de composants, laquelle vous pouvez accéder d'ici. Les composants de Figma sont des éléments que nous pouvons créer et réutiliser ultérieurement C'est une fonctionnalité intéressante, et nous en parlerons plus en détail dans une dernière leçon. Mais pour l'instant, vous n'avez besoin que de ces composants pour récupérer les éléments de l'image. Vous pouvez également trouver ces images sur la page des composants que nous avons ici. C'est en fait l' endroit où Figma s' empare de tout, de tous ces composants Si vous supprimez un élément d'ici, il disparaîtra également de la page des ressources. Trouvez donc le héros photographié dans le panneau Actifs , puis faites-le glisser sur le canevas comme suit. Ensuite, alignez-le simplement pour qu'il corresponde au design, juste comme ça. Comme vous pouvez le voir, cette section de héros a un arrière-plan dégradé. Vous avez déjà travaillé avec le dégradé, je ne vais donc pas en faire la démonstration ici. Ce n'est pas grave si tu es bloqué. C'est comme ça qu'on apprend. Vous pouvez regarder la vidéo de l'exercice Soft Crop une fois de plus pour vous rafraîchir la mémoire si nécessaire. Mais je vais vous donner un bref aperçu des étapes à suivre. Pour créer ce dégradé, vous avez donc besoin d'un rectangle. Hein ? Au lieu du champ plein, qui est actuellement sélectionné, vous avez besoin du remplissage en dégradé. Et le dégradé s'arrête là. premier arrêt est celui-ci, deuxième arrêt est ici, et c'est de là que ça part De toute évidence, l'orientation n'est pas ce que vous voulez ici. Vous voulez la direction verticale, que vous pouvez simplement modifier en la faisant pivoter. Comme ça. ne vous reste plus qu'à échantillonner la couleur de ce bleu en haut, puis la fin doit être blanche car, comme vous pouvez le voir, elle se connecte, s'estompe et se connecte au reste de la page, qui est blanche C'est exactement ce que nous avons fait avec un exercice de recadrage souple. Vous savez donc comment vous y prendre. Peut-être que tu vas rester coincé, mais c'est bon. Je vais vous rafraîchir la mémoire, mais je ne veux pas vous montrer tous les détails. Ensuite, une fois que vous aurez fait cela, vous devrez évidemment placer ce rectangle derrière l'image de l'euro, ce que vous pouvez faire en arrangeant les couches, en ce moment, c'est en haut. Et pour le placer derrière, vous pouvez simplement faire glisser le calque vers le bas pour créer le rectangle situé derrière votre image, droite. Il existe également des raccourcis que vous pouvez utiliser, par exemple, placer le rectangle au premier plan, former le rectangle. Il est également renvoyé en arrière. Et comme vous pouvez le voir, il y a un raccourci à côté, que vous pouvez utiliser. Cela vous sera très utile dans l'ensemble. Alors mémorisez cette idée parce que Figma, tout fonctionne par couches et les objets passent devant et derrière quelque chose, et c'est ainsi que le panneau des couches est agencé, n'est-ce pas ? Donc, envoyez en arrière, et en arrière, nous l'enverrons couche par couche. Renvoyez-le à dos, nous l'enverrons jusqu'au bout. Donc, si je le renvoie, nous n'en avons pas besoin car il se trouvera complètement derrière la capture d'écran. Nous le voulons un par un, que vous pouvez réutiliser, support de commande, support de commande sur Mac, et monter et descendre. La police qu'ils utilisent est la police San Francisco Pro par défaut d'Apple , de P. Si vous utilisez un Mac, elle sera présente par défaut, vous pourrez donc la sélectionner dans Figma Mais si vous êtes sous Windows, ce n'est pas le cas par défaut. Il est possible de le télécharger. Apple dispose de ressources. Je vais vous indiquer que vous pouvez le télécharger et l' installer sur votre ordinateur. Mais en réalité, vous n'êtes pas obligée, car Inter est à peu près une copie du téléphone de San Francisco Vous pouvez donc simplement utiliser Inter et vous serez très proche du téléphone. Vous n'êtes pas obligé d' utiliser San Francisco. Mais si vous êtes sur un Mac, faites-le Utilisez-vous un téléphone San Francisco, qui est du SF Pro, puis commencez à essayer de faire correspondre les tailles et les poids. Vous pouvez jouer avec les tailles et les poids de police pour obtenir une correspondance précise. Vous n'avez pas besoin d'être très précis ici. Ce n'est pas grave si les lettres ne s'alignent pas exactement, mais si vous faites un effort supplémentaire et que vous essayez de trouver la correspondance exacte, ce sera un bon moment d'apprentissage. Il vous révélera comment les concepteurs d'Apple ont défini ce type ici. Quelle est l'épaisseur du texte, s'ils ajustent l'espacement entre les lettres, quelles différences de taille de police ont-ils prises pour créer une hiérarchie visuelle ? Ces informations seront captées par votre cerveau et s' y installeront la prochaine fois que vous travaillerez sur un projet. Ils utilisent ici un remplissage en dégradé sur leur texte, qui fonctionne comme n' importe quel autre dégradé. C'est juste en dessous du fond, et au lieu de la couleur unie, vous allez simplement choisir la couleur du dégradé. Et encore une fois, s'arrête ici, qui est le début, le début, la fin, et il vous suffit d'échantillonner une couleur d'ici, une autre couleur d'ici, par exemple, et d'échantillonner la fin ou le début. Oui, c'est la fin. Et puis quel que soit le début et c'est tout. Une chose que nous n'avons pas encore abordée est l'accident vasculaire cérébral. Par exemple, pour créer ce bouton, vous pouvez dessiner un rectangle, augmenter le rayon des coins à une valeur très élevée, afin qu'il soit complètement arrondi, et vous pouvez ajouter un trait à partir d'ici plus, puis vous pouvez supprimer le fond ou le rendre blanc, et c' est ainsi que vous obtenez le trait. Cette valeur contrôle ici le poids du trait. Ici, il s'agit simplement de la ligne deux, vous pouvez sélectionner à partir ici ou appuyer sur L. Et pendant que vous tracez cette ligne, maintenez simplement la touche Shift enfoncée, et cela bloquera l'axe, je suppose, et vous aurez une ligne parfaitement verticale. Mais si tu ne le tiens pas, alors ce sera comme ça. Cela vous permettra de vous déplacer et vous risquez ne pas obtenir une ligne précise et ressemblera à ceci. Donc, pour obtenir une ligne parfaite, maintenez la touche Shift enfoncée, et elle sera parfaitement verticale. Le poids est contrôlé de cette manière, tout comme le trait Line utilise également la propriété stroke. Et pour échantillonner la couleur, il existe en fait un joli raccourci que vous pouvez utiliser. Vous pouvez simplement appuyer sur I. Cela ouvrira un échantillonneur de couleurs, comme vous pouvez le voir, et quel que soit l'élément que vous avez sélectionné, il remplira la couleur principale de cet élément Donc, pour la ligne, ce sera un trait, pour autre chose, ce sera un remplissage. Pour changer la couleur ici, je ne me souviens pas que nous avons déjà couvert cette question à 55 %. Maintenant, diminuons un peu le volume du téléphone. Recyclez le matériau appelé au poids, pour pouvoir simplement styliser différemment une partie du texte, vous suffit de le faire glisser et de le sélectionner comme ceci. Vous l'ouvrez donc et vous échantillonnez la couleur. C'est ça. Et si vous devez même modifier une épaisseur de police différente ou quoi que ce soit d'autre, c'est faisable comme ça à partir d'ici Et c'est à peu près ce dont vous avez besoin ici. Tout le reste que vous voyez ici, ce ne sont que des rectangles. C'est-à-dire, par exemple, si vous avez besoin d'une section, ce pied de page et la section inférieure ont une couleur différente, qui est juste un rectangle Encore une fois, placez simplement le rectangle, échantillonnez la couleur dont vous avez besoin et envoyez le rectangle complètement au dos, quelque part, n' est-ce pas ? Eh bien, c'est une source, donc quelque part ici, n'est-ce pas ? C'est tout ce que tu dois faire avec ça. Ce sont également des rectangles. Et une dernière chose, le contenu ici, j'ai inclus parce qu'il y a une partie du texte, il y a beaucoup de texte ici, donc vous n'avez pas à taper tout cela. J'ai mis du texte pour ces blocs, vous pouvez donc simplement les copier d'ici. Et c'est tout. Amuse-toi bien 55. Conception de la page d'accueil d'une application de chat : Partie 1: Ces vidéos et les prochaines s'entraîneront au remixage, et ce sera notre premier type de projet complet, de la conception au développement Nous allons d'abord concevoir une page d'accueil, puis nous allons prendre cette page d'accueil construire et la développer dans Webflow Nous allons nous inspirer, et au lieu de la copier comme nous l'avons fait avec la page d'accueil de Figma, nous allons la remixer, utiliser notre propre contenu, nos propres photos et nos propres couleurs et changer certaines choses si nous le voulons et si nous J'ai trouvé ce très beau design de Philip Stich et Balcom Brothers sur Nous allons nous inspirer des designs de Philip, les remixer un peu et créer une nouvelle page d'accueil. Cette fois, je vais vous présenter le processus complet afin vous montrer les nouvelles choses que vous devrez apprendre dans Figma Ça va être intéressant. Cette démonstration est longue et se divise en quatre parties. Il est préférable de suivre, alors allumez votre Figma Comme toujours, le fichier Figma se trouve dans les ressources. Tout d'abord, configurons notre cadre. Vous verrez que la largeur de la capture d'écran est de 14 et 40 pixels. Il s'agit de la même taille qu' un cadre de bureau dans Figma. Maintenant, ajoutons notre grille au cadre. Je ne sais pas exactement quelle grille ils utilisent, mais nous allons utiliser notre propre grille à 12 points avec nos paramètres habituels, faisant correspondre leurs marges sur les bords. Pas la marge de la barre de navigation supérieure, mais celle du contenu Pour mesurer quoi que ce soit dans Figma, il suffit de dessiner un rectangle, puis vérifier les dimensions de ce rectangle Sa largeur est de 140 pixels, nous allons donc l'utiliser comme marge pour la grille. Là-bas. Maintenant, cela correspond étroitement à leur mise en page. Leur disposition présente certaines différences , comme la barre de navigation située en dehors de la grille, et certains autres éléments semblent également avoir une logique différente Mais pour nous, nous allons nous en tenir à notre réseau autant que possible. Bien. Nous allons commencer à concevoir le héros, d'abord l'arrière-plan. Utiliser nos propres couleurs personnalisées est un excellent moyen de remixer un travail Trouvons de l' inspiration pour les couleurs de Dribble. Pour vos designs, je veux que vous vous procuriez vos propres couleurs, comme je m'apprête à le faire. Je vais choisir quelques options. Capturez simplement votre inspiration ou enregistrez les images en cliquant avec le bouton droit de la souris et enregistrez-les sous. Nous les placerons dans Figma plus tard. J'aime vraiment ça. Les combinaisons de bleu, de jaune ou de bleu orange sont des paires de couleurs passionnantes. Maintenant, il vous suffit de placer vos captures d'écran dans Figma pour que nous puissions prélever des échantillons de couleurs à partir de là Ce que j'aime faire, c'est mettre une couleur comme arrière-plan et une autre comme bouton, puis voir comment le combo fonctionne ensemble. Certaines couleurs peuvent bien fonctionner les unes à côté des autres, mais si vous les superposez, elles risquent d'avoir un contraste très faible. R a Ils sont tous les deux très jolis, mais je vais opter pour l'option bleue. Vous pouvez verrouiller le calque d' arrière-plan depuis le panneau des calques afin qu'il ne vous gêne pas lorsque vous créez d'autres objets par-dessus. Ajoutons maintenant le contenu. Tout d'abord, nous devons choisir nos polices de caractères. Les polices, comme les couleurs, sont un bon endroit pour faire un remix facile Mais parfois, il se peut que nous aimions vraiment la typographie qu' ils utilisent et que nous souhaitions utiliser des polices identiques ou similaires Si nous connaissons la police qu'ils utilisent, tant mieux, mais si nous ne le savons pas ou s'il s'agit téléphone payant et que nous ne voulons pas payer, nous devons trouver une alternative similaire. C'est ce que je vais faire ici pour que vous puissiez apprendre à rechercher des polices alternatives. Je ne sais pas exactement ce qu'ils utilisent dans leurs créations, mais passons à Google Fonts voir si nous pouvons trouver quelque chose de similaire. Je vais donc affiner les résultats. Il s'agit clairement d'une police Sounds Seri. Je vais utiliser le même texte comme exemple, car cela permettra de trouver plus facilement des polices similaires. Remarquez à quel point les lettres sont symétriques. La lettre O est un cercle parfait au lieu d'un ovale habituel, et c'est un bon indice. Le plus révélateur est la lettre A. Ce n'est pas le A habituel que l'on retrouve dans la plupart des polices. C'est une sorte de style manuscrit. Ce sont des indices suffisants pour trouver des polices similaires. Regardez, Montserrat est assez similaire. Le O est également un cercle, mais les A sont différents. Je peux m'en servir si je ne trouve pas quelque chose de plus proche. Mais là, les pop ins correspondent très bien. Le O est un cercle, et le A est également du même style. Il y a quelques différences, mais c'est suffisant. Dans votre cas, vous pouvez soit utiliser le même téléphone, choisir le vôtre, soit vous le procurer en vous inspirant d'une autre source d'inspiration. Faisons correspondre le style. Il semble que le poids soit quelque peu semi-gras. La hauteur de ligne est plus étroite que la valeur par défaut, ce qui constitue une excellente décision de conception les gros titres comme celui-ci, vous avez besoin d'une hauteur de ligne plus étroite Souvenez-vous de ce que nous avons appris sur la gravité des épaisseurs de police. De plus, si vous regardez de plus près, vous verrez que les lettres se rapprochent les unes des autres. Il s'agit peut-être de la valeur par défaut pour leur police de caractères particulière, mais il est fort probable qu'ils réduisent l'espacement entre les lettres Encore une fois, c'est une bonne idée. Avoir une grosse police comme celle-ci est préférable avec un espace plus restreint Nous pouvons réduire l' espacement entre les lettres à partir d'ici. En ce qui concerne le corps du texte, si vous zoomez, vous verrez qu'il n'utilise pas la même police de caractères que le titre. C'est probablement une bonne idée, car le même téléphone n'est peut-être pas le meilleur choix pour le texte du paragraphe C'est trop symétrique. Le texte du paragraphe semble plus neutre et générique, peu comme Roboto pourrait même être le même, donc nous pouvons l'utiliser 56. Conception de la page d'accueil des applications de chat : Partie 2: Et nous sommes de retour. Je vais également utiliser des boutons arrondis. N'hésitez pas à remixer ici si vous le souhaitez et à utiliser des boutons rectangulaires Pour arrondir les boutons, il suffit d'augmenter rayon des coins jusqu'à ce qu'ils soient complètement arrondis. qui concerne la police, il semble qu'ils utilisent texte de paragraphe plus petit, mais un style plus épais. OK, ça a l'air correct. Le deuxième bouton est ce que l' on appelle un bouton fantôme. Ce type de combinaison de boutons est une excellente approche car souvenez-vous de ce dont nous avons parlé en matière de hiérarchie visuelle, à savoir que vous voulez guider visuellement votre public d'un élément à l'autre. Si vous avez deux boutons côte à côte et que vous utilisez le même style, le public ne pourra pas savoir lequel est le bouton principal qui mène à l'action principale de ce site. Pour créer ce bouton Ghost, nous devons supprimer le remplissage coloré et ajouter un trait à la forme. Changez ensuite la couleur du trait. Vérifie le réseau. Les boutons ne sont pas alignés sur la grille, mais ce n'est pas grave. boutons et les éléments fiscaux sont flexibles et ils se rétrécissent et s'agrandissent en fonction de la taxe Nous n'avons donc pas à les insérer dans une grille. Et parfois, il vaut mieux ne pas le faire. Mais dans ce cas, c'est assez serré et le fait de rétrécir les boutons ne fera pas de mal Je vais donc placer ces mauvais garçons sur une grille Passons à notre photo de héros. C'est un collage très intéressant. Avez-vous remarqué l'une des astuces de conception où vous avez abordé l'astuce qui se chevauche Créons un art similaire. Nous devons trouver et ajouter quelques photos similaires comme celles-ci D'accord, ça devrait faire l'affaire. Certaines de ces images fonctionnent, mais d'autres ne le font pas en combinant des images Souvenez-vous toujours de la leçon sur la cohérence. Combinez donc des images dont le style est très similaire. Par exemple, les deux sont similaires. Ils ne font pas face à l'appareil photo regardent pas et ils sont proportionnels les uns aux autres, ce qui signifie que les photos ont été prises à une distance similaire. Vous ne voulez pas associer les deux. On dirait qu'ils n'ont rien à voir l'un avec l'autre. La droite regarde dans la caméra, face droite, et elle est beaucoup plus proche de la caméra, ce qui agrandit son visage. Très bien, ces deux-là ont l'air bien. Les options de photos gratuites sont généralement assez limitées, et trouver le style correspondant est un peu plus difficile, alors gardez cela à l'esprit. R Maintenant, créons cette forme d' arrière-plan en pointillés Dessinez simplement un cercle, choisissez ellipse parmi les formes ou appuyez simplement sur O. Lorsque vous dessinez une ellipse maintenez le manche pour dessiner un cercle parfait Commencez ensuite à dupliquer les cercles horizontalement et verticalement pour créer une sorte de grille en pointillés A Sélectionnez-les tous. Cliquez avec le bouton droit de la souris et regroupez la sélection ou utilisez un raccourci Ctrl ou Commande G. Lorsque vous placez vos points derrière l'image, veillez à ce qu'il n'y ait pas de chevauchement étrange avec l'image. Observez comment les points sont bien placés autour de l'image et essayez d' utiliser un espacement égal Vous ne voulez pas créer de tension inutile en faisant quelque chose comme ça. Trouvons maintenant quelques écrans de maquette pour notre produit, tels qu'ils les ont ici et aussi quelque chose que nous pourrons utiliser plus tard ci-dessous Ce que nous allons faire, c'est trouver du design gratuit sur Figmas Community Vous pouvez le faire depuis HignashMePage, le tableau de bord, et il y a un lien, un onglet un Et je pense utiliser une sorte d' application de chat ou de collaboration d'équipe comme produit. Ça n'a pas vraiment d'importance. Tout ce qui correspond à nos designs fera l'affaire. Vous pouvez rechercher des mots clés tels que chat ou application de chat. Merci Il peut également s'agir d'un chat d'équipe ou d'un tableau de bord de chat, d'un chat en ligne ou d'un chat de bureau, pour obtenir plus de résultats liés au Web et pas seulement aux applications mobiles Ensuite, vous pouvez simplement passer en revue les différentes options, différents fichiers communautaires ici. Leur utilisation est gratuite. Vous pouvez les utiliser pour voir le contenu du fichier lui-même. Vous pouvez faire défiler l'écran jusqu' à l'aperçu, et ces pages se trouvent ici et vous pouvez passer à Ceci affiche réellement la page réelle sur le fichier FICMA, et vous pouvez passer, disons, à une page de conception dans ce cas, puis vous pouvez vérifier la bonne vue du design J'ai trouvé celui-ci précédemment, c'est ce que je vais utiliser. Vous pouvez utiliser le même ou un autre. Je l'ai inclus dans le fichier de mission sur une page d'écran de Hat App ici. Vous pouvez donc le récupérer à partir de là si vous souhaitez l'utiliser. Pour utiliser les fichiers communautaires, il suffit de cliquer sur ce bouton d'ouverture de Figma. Cela dupliquera le fichier dans votre compte Figma, et c'est votre fichier Vous pouvez le modifier comme vous le souhaitez. Pour intégrer cette maquette dans la conception de notre site Web, nous devons adopter la palette de couleurs Cela n'aurait aucun sens que la marque du site Web soit bleue, mais que le produit lui-même soit vert. Comme il s'agit d'un fichier modifiable, il est facile de changer les couleurs Il vous suffit de saisir le code couleur de votre design, sélectionner le cadre parent. Développez ensuite cette section qui parle des couleurs de sélection. Cela permet de révéler chaque couleur unique présente sur ce design. Trouvez ce vert et collez votre code couleur dessus. Appuyez sur Entrée, et cela mettra à jour tous les endroits où ce vert a été utilisé. Cet en-tête utilise une teinte plus foncée de ce vert, ce qui signifie que nous devons créer une teinte plus foncée de notre bleu, ce qui est simple à faire. Nous pouvons à nouveau coller de la couleur ici. Et à partir du modèle de couleur HSB, nous pouvons simplement diminuer la luminosité Comme vous pouvez le voir, c'est la même teinte, mais elle est plus foncée, et cela ressemble à l'effet recherché par le design original. Nous pouvons maintenant copier ce cadre entier dans notre fichier de projet et le reprendre à partir de là. Vous pouvez facilement copier des dessins entre différents fichiers, sélectionner le cadre et utiliser raccourci copier-coller très standard de Control C, Control V pour coller. Accédez à votre fichier, puis collez le dessin. Je pense que ces bulles de discussion seront agréables à utiliser dans notre photo de héros. Copions-le dans notre document et voyons comment nous allons les utiliser. Je pense que je vais en prendre quelques plus petites et les saupoudrer pour créer une sorte d'expérience de discussion entre ces filles. Je vais utiliser le jaune ici parce que je vais le mettre directement sur le fond bleu, donc le bleu ne marcherait pas. Et changez également les photos de profil pour les filles. R Je m' en suis bien sortie, en fait. Je vais ajouter cette ligne en pointillés. Ça suffit comme ça. Un trop grand nombre d'éléments peuvent ajouter au bruit. Mais il y a une chose que je n'aime pas, c'est le bouton jaune. C'était beau et visible auparavant, mais maintenant que l'art du héros contient du jaune, le bouton se bat pour attirer l'attention et essaie en quelque sorte de se connecter visuellement à l'œuvre d'art. La forme n'aide pas non plus. Le bouton est arrondi, et ces boîtes de message sont également arrondies, donc beaucoup trop de similitude. Le remplacement de la couleur par le blanc devrait résoudre ce problème. C'est bien mieux. Maintenant, l'œuvre d'art semble séparée et le contenu de gauche semble être une œuvre à part entière. C'était en quelque sorte une fusion avant. 57. Conception de la page d'accueil de l'application de chat : partie 3: Nous sommes de retour. Enfin, ajoutons le Na Bar, et nous en avons terminé avec l'action de nos héros. Créons un logo pour notre fausse application de chat, et donnons-lui un nom original, quelque chose comme une application de chat. Nous pouvons utiliser Poppins comme visage de discussion et créer ce contraste similaire entre fin et épaisseur, comme ils l'ont indiqué sur leur logo Souvenez-vous de cette astuce tirée de la leçon sur le contraste, combinant l'épais et le fin et le bam Vous avez un élément intéressant. Ajoutons quelques liens de navigation et le bouton à la fin. Voici un autre voyage sympa avec Pigma. Sélectionnez tous les liens et dans le panneau d'alignement, cliquez sur Nettoyer. Cela permet généralement de répartir les objets de manière égale entre eux. Mais nous pouvons aller plus loin et définir une marge exacte entre les éléments dès maintenant. Utilisons 30 pixels car il s'agit de la marge par défaut de la grille. Il nous faut un bouton. Créons un bouton à partir de l'un de ces liens. Lorsque nous plaçons un bouton dans la barre de navigation, il est généralement préférable d'utiliser la même vignette que le lien nag. Ça a l'air mieux. Utilisons la même marge de 30 pixels à partir du haut. J'appuie sur la touche « off » ou option » ici pour voir les distances entre les objets. Et nous allons tout aligner horizontalement au centre de la barre de navigation. Vérifiez toujours que vos designs sont visibles à 100 %, car ce sont les tailles et dimensions réelles qui seront indiquées sur le côté réel. Maintenant, pour la section centrale, je vais le faire un peu plus simplement, avec un paragraphe de titre et seul écran de notre application de chat que nous avons déjà Je vais utiliser exactement leur couleur de police. C'est ce que l'on pourrait appeler du noir, du noir, mais pas aussi saturé et net qu'un noir habituel. Je vais ajouter ce noir à notre palette. C'est également un bon choix pour notre palette, car il contient un peu de bleu à l'intérieur, comme une teinte bleue. Vous pouvez le voir dans la carte des couleurs. Supprimons l'espacement entre les lettres car ce titre n'est plus aussi gros et lourd, nous n'avons donc pas besoin d' autant d'espace restreint Faisons de même pour le texte du paragraphe. Je pense qu'ils utilisent une version allégée ici, mais je ne suis pas fan des téléphones à paragraphes plus fins , car ils sont parfois plus difficiles à lire sur des écrans en basse définition. Sur les téléphones, les tablettes et ordinateurs portables à écran Retina, c'est bien, mais sur les écrans de bureau avec une densité de pixels inférieure, ils ne seront pas aussi nets. Avez-vous remarqué la hiérarchie visuelle qu'ils ont créée ici ? Le paragraphe est plus petit, plus fin et de couleur plus claire. Je vais faire de même avec la couleur. Nous pouvons simplement diminuer l'opacité de notre thé. Et ça suffit. 70 %, c'est bien. Je ne vais pas prendre la peine de remplir celui-ci avec du vrai texte. Allons sur Google et générons du texte factice. Il existe des sites Web qui peuvent le faire pour nous. Il s'agit d'un site Web, par exemple. Nous pouvons spécifier la quantité de texte que nous voulons et il peut le générer pour nous , puis copier le texte et le coller dans nos designs. Centrez-le et ajoutons-le à notre grille. C'est un petit t. Donnons-lui un peu plus d'interligne. C'est à peu près juste. Je vais sauter le bouton et ajouter la maquette de notre application de chat imaginaire ici Maintenant, au lieu de tout copier dans notre document, je vais l'exporter sous forme d'image et placer cette image à la place. Nous simplifierons le travail et nous ne surchargerons pas notre page d'éléments inutiles. Pour exporter quoi que ce soit depuis Figma, sélectionnez-le et dans le panneau des propriétés, allez sur Exporter et cliquez sur Plus. Vous pouvez choisir un fichier différent pour la plupart Le format JPG est bon pour nous. Cette année, un x vous permet de modifier la taille de l'export. S'il indique un x, il sera exporté dans ses dimensions exactes. S'il s'agit de deux x, il doublera. Si vos dessins mesurent 200 pixels sur 300 pixels, l'exportation sera de 400 x 600 pixels. Cela sert à donner à nos actifs apparence belle et nette sur les écrans HD. Plus d'informations à ce sujet plus tard, ne prenons pas d'avance sur nos cellules, pour l'instant, un x fera très bien l'affaire. Plaçons notre maquette dans nos designs. Comme vous pouvez le voir ici, ils utilisent cette barre de navigateur dessus et aussi une ombre derrière le. Passons la barre du navigateur, mais ajoutons une ombre similaire à notre image. Les ombres sont sous effet. Cliquez sur l'icône Plus. La première chose est généralement l'ombre. Il a ajouté cette petite ombre. Ça n'a pas l'air très beau. Cliquez sur l'icône pour modifier les propriétés de l'ombre. Utilisons notre noir comme base de notre ombre et il contient ce petit bleu qui le fera ressembler davantage à celui de nos designs. Lorsque vous ajoutez de la couleur avec une opacité de 100 %, vous obtenez cette ombre étrange Ne fais jamais ça. Ce n'est pas vraiment une ombre. valeur par défaut de Fig. 25 % est généralement l'opacité maximale que vous souhaitez utiliser pour vos ombres Le flou est essentiellement la façon dont l'ombre se répand, la façon dont elle s'évacue. Jouez avec pour comprendre son fonctionnement. Ils utilisent un flou épais et une faible opacité sur leur ombre. J'aime bien ça et nous allons faire quelque chose de similaire. X et y sont le décalage de l'ombre, c'est-à-dire la direction dans laquelle l'ombre tombe. X pour le décalage horizontal et y pour le vertical. Lorsqu'ils sont à zéro, il tombe également sur les quatre côtés. Si nous ajoutons un décalage horizontal, remarquez comment l'ombre se déplace vers la droite. Si nous ajoutons un décalage vertical, il se déplace vers le bas. Ou si vous obtenez des valeurs négatives, cela augmente. Une bonne pratique de conception consiste à ajouter un décalage vertical y positif , car la lumière vient la plupart du temps par le haut, ce soit à l'extérieur au soleil ou à l'intérieur des plafonniers, et si la lumière vient du haut, elle projettera une ombre dirigée vers le bas Ça a juste l'air bizarre. Cela ne ressemble même pas à une ombre. Je vois souvent que les sites Web n' utilisent aucun offset, ce qui n'est pas très naturel. Cela signifie que la source de lumière vient directement de l'avant, comme si quelqu'un pointait une lampe torche sur un objet, ce qui n'est pas un scénario très courant. L'ajout d'un décalage horizontal n'est pas très courant. Certains designers le font, mais ce n'est pas mon truc, et je ne pense pas que ce soit une mauvaise chose à faire, sauf pour les éléments qui font partie de l'interface, comme cette image, les boutons, les cartes, etc. L'ombre avec uniquement le décalage vertical est la plus belle. Maintenez x à zéro et ajoutez uniquement un décalage vertical. Cela semble à peu près juste. Je regarde ici, je n'utilise aucune règle particulière en ce qui concerne les ombres, cherche simplement ce qui semble le plus beau, le plus naturel et presque invisible C'est généralement ce qu'il y a de mieux pour les ombres, qu'elles n'aient pas l' impression d'être là. Sinon, cela crée des formes supplémentaires que nos yeux ont besoin de digérer. Ils utilisent des formes arrondies sur leur maquette. C'est plutôt sympa. Les formes arrondies sont généralement les plus belles du design Web. Ils ont l'impression d'être des objets finis plutôt que des objets inachevés. Bien entendu, les bords stricts ont également leurs avantages. Encore une fois, il n'y a aucune règle en ce qui concerne l' arrondissement des coins, mais si nous l' associons à la rondeur des formes de la maquette elle-même, nous obtiendrons un aspect plus cohérent Et c'est plutôt sympa. Ajoutons ces motifs en pointillés derrière. L'utilisation de formes telles que ces points ou d'autres formes est une bonne idée. Ils ajoutent un niveau de dimension supplémentaire. Nous avons appris tous ces autres avantages grâce à l'astuce du chevauchement, car c'est ce qui se chevauche Il n'est pas nécessaire que ce soient les points. Il peut s'agir de cercles, de rectangles, triangles ou de toute autre forme Mais évidemment, cela doit avoir du sens. Ensuite, lorsque nous répétons ces points sur nos pages, nous obtenons les avantages de l'astuce de répétition. Il crée ce rythme du design comme un rythme dans une chanson et lie l'ensemble du design. R. D'accord, je vais passer les boîtes ici. Je ne vais pas les faire et passer à la section suivante tout de suite. 58. Conception de la page d'accueil des applications de chat : Partie 4: Et nous sommes de retour avec la quatrième partie finale. Voici une section d'appel à l'action. C'est là que vous demandez directement au public de prendre des mesures, résumant en quelque sorte la page entière Il comporte généralement des boutons ou directement le formulaire d'inscription. Ils utilisent le même violet, mais avec une opacité réduite, faisons de même avec notre bleu. C'est plutôt sympa. 10 %, c'est plutôt bien. Verrouillez la couche pour qu'elle ne vous gêne pas. En fait, je vais réduire ce titre ici, afin que le mot small passe à la ligne suivante. Ça aura l'air mieux. Ils utilisent un bouton blanc ici, mais je vais m'en tenir au bouton fantôme. J'appuie sur une touche out ou option ici pour voir les distances entre les objets. J'aime bien leur classement par étoiles et un petit exemplaire ici. C'est ce qu'on appelle la preuve sociale. Excellente idée d'inclure quelque chose comme ça dans les sections d'appel à l'action. Facilite la prise de décision pour les utilisateurs. OK, il nous faut une icône en forme d'étoile. Allons sur flaticon.com et cherchons une icône en forme d'étoile. Nous pouvons le télécharger gratuitement à partir de là. icônes ici sont gratuites pour un usage personnel, mais si vous voulez les utiliser quelque part, vous devez créditer l'auteur ou acheter son abonnement. Nous avons besoin du format SVG, qui est modifiable dans Figma Nous allons pouvoir changer de couleur si nous le voulons. Sur des sites comme Flat ICN, nous avons généralement deux formats de fichiers dans lesquels nous pouvons télécharger une icône, PNG et SVG mesure du possible, vous devez utiliser le format de fichier SVG pour les éléments tels que les icônes et les illustrations Pourquoi ? Pour deux raisons. Tout d'abord, le SVG est une image vectorielle. Cela signifie essentiellement que vous pouvez redimensionner l'image à l'infini Vous pouvez l'agrandir 1 000 fois et il ne perdra pas sa qualité. Il restera parfaitement croustillant. La taille du fichier n'augmentera pas non plus avec une image plus grande. C'est donc le format de fichier idéal pour la conception de sites Web, à la fois pour le chargement et la qualité des images. Le PNG, quant à lui, est un format basé sur les pixels, vous ne pouvez donc pas l'agrandir. Quelle que soit la taille de l'image d'origine , c'est ce à quoi vous êtes confronté. C'est pourquoi l'option de téléchargement PNG propose ici différentes tailles, alors que le SVG n'en a pas besoin La deuxième raison pour laquelle le SVG est meilleur est due à ses capacités d' édition Une icône SBG peut être modifiée dans Figma comme une forme normale Cela est utile car nous souhaitons souvent changer de couleur pour utiliser notre palette de couleurs personnalisée pour le projet. Le PNG n'étant pas modifiable, vous êtes limité à la couleur qu'il contient Dans ce cas, je souhaite changer la couleur de l'étoile et utiliser la couleur jaune de notre projet. Malheureusement, SVigi Download est une fonctionnalité premium sur une icône plate C'est généralement le cas avec grands sites de fournisseurs d'icônes comme celui-ci. Cependant, nous avons la possibilité de modifier la couleur directement sur le site et de la télécharger en PNG avec notre couleur personnalisée. Il vous suffit de créer un compte gratuit. Une fois connecté, vous pourrez modifier la couleur, coller le code hexadécimal de notre couleur personnalisée Et téléchargez gratuitement l'icône en PNG. Outre Flat Con, nous avons d'autres options à partir desquelles nous pouvons télécharger des icônes gratuites. Parfois, même des formats SPG gratuits sont disponibles. J'ai lié ces sites sur la page des ressources afin que vous puissiez les y trouver. Les icônes Material de Google sont l'une de ces options. Cherche l'étoile. Activez cette option pour qu'elle soit remplie Changez le style en arrondi et téléchargez-le en SVG. Nous pouvons changer la taille et la couleur et Figma, pas besoin de le faire ici Vous pouvez également simplement le copier à partir d' ici, puis le coller dans Figma utilisant Control V sur PC et Command V sur Mac Tu te souviens de cette astuce de rangement ? Non, je peux ajuster cet espacement d'ici. C'est bon, j'ai l'air affûté. Au lieu d'un bureau avec des ordinateurs, je vais utiliser une photo ici. Peut-être une photo d'une équipe, bureau ou d'un propriétaire de petite entreprise pour représenter ce que dit le titre Cette photo a l'air plutôt belle, peu comme une start-up avec une équipe qui travaille à différents endroits, elle a donc besoin d'une bonne plateforme de communication. Je joue juste ici pour voir ce qui fonctionne. Nous pourrions placer cette image comme arrière-plan en sections divisées , comme nous l'avons fait pour d'autres missions, mais je peux également m'en tenir au même style, car la cohérence sera récompensée et faire quelque chose comme ça et aux points situés derrière l'image. R Cela a Cela l'air plutôt bien, en fait. Le pied de page et c'est tout. Nous sommes proches de la ligne d'arrivée. Copions le logo et donnons-lui un col bleu. Il y a une microcopie sous le logo. Nous pouvons faire de même. Leur pied de page est divisé en quatre colonnes. Nous pouvons facilement organiser une mise en page similaire pour nous en utilisant notre propre grille de mise en page. Notre grille comporte 12 colonnes. Si on le divise en quatre, on obtient des blocs de trois points. Compte tenu des petits liens, trois colonnes peuvent être trop nombreuses Utilisons donc deux colonnes pour chaque bloc. divisant en six blocs En le divisant en six blocs, vous en retrouverez même plus sur une seule ligne C'est la beauté de l' utilisation d'une grille à 12 points. Il se divise en de nombreuses variantes flexibles. Je vais laisser ces deux colonnes vides, cet écart entre les liens du pied de page et le logo semble souvent très bon Cela crée cette séparation visuelle entre les deux, ce qui est logique car le logo est différent des liens du pied de page Bien, maintenant remplissons ces liens avec du texte aléatoire. Dans de tels endroits, il est toujours préférable d'utiliser exemple de texte réaliste plutôt que du texte factice de Loren Epsom, car selon la longueur du texte, vous devrez peut-être modifier légèrement la mise en page De plus, répéter le même texte semble moche. Mettons les icônes sociales et les autres liens en pied de page. Nous avons déjà fait beaucoup de choses. Ajoutons simplement la taxe sur les droits d'auteur, et c'est tout. H. Voilà, maintenant, corrigeons ces lacunes vides. J'utilise 180 pixels comme marge. n'y a pas de règle à ce sujet, en fait c'est basé sur son apparence, mais l'important est d' être cohérent quand c'est possible. Par exemple, j'utilise une marge de 90 pixels sur la section centrale Je vais donc essayer de réutiliser la même valeur avec d'autres marges. Mais parfois c'est trop ou pas assez. Dans de tels cas, j'essaierai d' utiliser des multiples de la même valeur, soit la moitié, soit le double, d'où les 180 pixels. Si ce n'est pas le cas, j'utiliserai une nouvelle marge. Parfois, nous devrons peut-être être un peu incohérents tant que cela nous semble juste. Maintenant, réduisons l' espace excédentaire en bas. N'oubliez pas de maintenir la touche Ctrl ou Commande enfoncée pendant que vous effectuez cette opération, sinon cela pourrait déformer le contenu à l'intérieur Une fois que vous avez terminé, sélectionnez le cadre et appuyez sur l'icône Play. Nous pouvons maintenant voir la présentation de notre design. air super. Une petite remarque à propos du mode de prévisualisation. Parfois, votre aperçu peut ressembler à ceci, c' est-à-dire que vous ne voyez pas l'ensemble du cadre. Si cela vous arrive, cela signifie que l'écran de votre ordinateur n'est pas aussi large que le cadre, et la taille de notre cadre est de 144 pixels, n'est-ce pas ? Donc, si votre écran est plus court, plus petit que cela, cela se produit généralement avec les ordinateurs portables. Dans ce cas, il ne va pas tout afficher à l'écran. Mais il existe une solution à ce suffit de passer la souris en haut ici, la barre apparaîtra et d'accéder aux options, puis de changer à partir d'ici, qui est maintenant à 100 %, de la modifier en fonction de vos besoins Et une fois que vous l'avez fait, le cadre s' adaptera à votre écran, quelle que soit la taille de votre écran. Maintenant, dans de rares cas, un autre problème peut survenir, cela peut ne pas aider. Et c'est le cas si vous avez sélectionné quelque chose de différent des paramètres du prototype. Donc, pour accéder aux paramètres du prototype, aucun cadre ni aucune couche ne sont sélectionnés. Cliquez sur le canevas pour que tout soit désélectionné, puis passez au prototype Et à partir du prototype, assurez-vous qu'aucun n'est sélectionné dans la liste déroulante des appareils. S'il y a un iPhone un ajustement personnalisé ou quelque chose comme ça, il y aura un écran d'iPhone étrange ou quelque chose d'étrange s'affichera ici en mode aperçu. Assurez-vous donc qu' aucun n'est sélectionné. Et quand on passe à l'aperçu, et si vous avez d'autres calques ici, j'ai d'autres calques et cadres sur la page. Il peut donc essayer de prévisualiser un autre cadre, assurez-vous de sélectionner le cadre de votre bureau puis de cliquer sur l'aperçu, puis il prévisualisera le bon cadre. Et c'est tout. En choisissant une excellente source d'inspiration, nous avons conçu et créé une page d'accueil fabuleuse. C'est le pouvoir d' une bonne inspiration. J'espère que vous avez apprécié le processus. J'ai hâte de voir votre soumission. Dans la prochaine partie de ce cours, nous allons créer cette page exacte dans Webflow. Restez dans les parages. 59. PARTIE 3 : DÉVELOPPEMENT WEB (WEBFLOW): nous allons faire une pause de conçu. Pour l'instant. Il y a d'autres leçons à venir sur la conception et un projet client complet du début à la fin. Mais on y arrivera. Maintenant. Amusez-vous en apprenant à créer des sites Web dans ces parties du cours. Vous allez apprendre à développer des sites Web en utilisant le flux d'épaves, et nous allons le faire en prenant la page d'accueil que nous venons de concevoir et en la construisant à l' intérieur du flux humide, alors allons-y. 60. Les bases du Web : Webflow designer: Vous l'avez déjà vu, mais voici un bref récapitulatif du contenu d'iFlow S'il s'agit de votre écran initial, il se peut que vous soyez sur d'autres pages. Il vous suffit donc de cliquer pour revenir au tableau de bord. Je travaillerai également sur le compte gratuit assurer que vous bénéficiez de la même expérience. Il existe tout un tas de modèles gratuits et payants, mais nous ne sommes pas là pour eux, nous allons donc sélectionner un site vierge. C'est ce qu'on appelle le designer. C'est là que toute la magie opère dans Webflow. Notre page, telle que nous la concevons, sera affichée sur cette toile blanche, et nous pourrons interagir avec les éléments directement sur cette toile. la barre d'outils de gauche, nous avons nos commandes pour revenir au tableau de bord, paramètres du projet ou à l'éditeur. En dessous, nous avons trois panneaux importants. Le premier est le panneau des éléments. C'est ainsi que nous ajoutons de nouveaux éléments sur la page. Ensuite, nous avons le panneau des pages. Cela affichera toutes les pages de notre site Web. À partir de là, nous pouvons ajouter de nouvelles pages , gérer leurs paramètres, etc. Sur un plan gratuit, nous n'avons que deux pages statiques, mais nous avons un peu plus de pages CMS. Et puis nous avons le panneau des navigateurs, qui ressemble un peu au panneau des couches de Figma, mais pas exactement le même car le Web fonctionne un peu différemment des outils d'interface de conception tels que outils d'interface de conception tels Vous n'avez pas à vous soucier des autres éléments la barre d'outils de gauche pour le moment. Nous les contacterons quand il le faudra. Au centre, vous avez ces différentes vues de l'appareil. C'est là que nous rendons notre site Web réactif et que nous l'optimisons pour différents appareils afin d' avoir un site Web moderne qui s'affiche parfaitement sur n'importe quel écran et n'importe quel appareil. Nous sommes également en mesure de redimensionner l'écran pour chaque appareil, comme le mobile, par exemple, et de l' optimiser pour qu'il s'affiche parfaitement sur tous les types d' appareils mobiles, et pas seulement sur un seul Lorsque vous le redimensionnez, vous pouvez voir qu'en différentes largeurs, il indique quels appareils populaires utilisent en quelque sorte cette largeur particulière Et pour publier le site sur Webflow, nous pouvons le faire à partir d'ici Vous pouvez le publier gratuitement sur le domaine de Webflow. Pour un domaine personnalisé, nous devons ajouter un plan d'hébergement. Et sur le côté droit, nous avons notre panneau de styles. C'est ici que nous manipulons et stylisons chaque élément de la page. Tu peux le reconnaître. C'est un peu similaire au panneau FigmaSpproperties du même côté Tout comme Figma, c'est ajouter tout ce qui est actuellement sélectionné Il existe de nombreuses propriétés similaires telles que la taille, la topographie, nom de police, les tailles, etc., ainsi que des effets tels que le flou et Il y a d'autres onglets sur le site, mais nous n'avons pas à nous en soucier pour le moment. Nous l'examinerons quand nous en aurons réellement besoin. Et c'est tout. Voici une brève introduction au design de Webflow 61. Les bases du Web : HTML et CSS: Lorsque la première page Web a été mise en ligne en 1991, voici à quoi elle ressemblait. Il est toujours en ligne, si vous voulez y jeter un œil. Cette première page Web a été créée par l'inventeur du Worldwide Web, Tim Berners Lee au Cern un laboratoire de recherche nucléaire en Suisse. Étonnamment, elle n'a rien à voir avec les ordinateurs En fait, je suis allé au CERN. J'étais en voyage d'affaires alors que je venais de mon travail, et j'ai été emmenée dans cette pièce où le Worldwide World Wide Web a été créé par Tim Berners Lee, et la chambre est totalement modeste croirait pas vraiment On ne croirait pas vraiment qu'il en est ressorti quelque chose de créatif. Cela ressemble simplement à un laboratoire de chimie ordinaire ou un laboratoire de physique d'un lycée ordinaire. Et on m'a raconté cette histoire. Apparemment, lorsque Tim a soumis son article sur le Worldwide Web, son superviseur, qui a écrit sur le journal pendant qu' il le commentait, a dit quelque chose de vague mais d'intéressant. Je suis sûr qu'à l'époque, aucun d'entre eux n'avait la moindre idée de ce que les sites Web et Internet finiraient par ressembler. Aujourd'hui, la toute première page Web a été créée en HTML, et c'est toujours ce dont sont faits tous les sites Web. Au fur et à mesure que nous apprenons Webflow, nous devons en fait apprendre comment fonctionnent le HTML et le CSS Nous n'allons pas apprendre à coder, mais nous allons apprendre la logique sous-jacente car tout dans Webflow est en quelque sorte basé sur cette logique HTML est simplement le contenu de la page Web, comme un titre, un paragraphe de texte ou une image Et chaque élément de ce contenu possède une étiquette qui indique au navigateur s'il s'agit du titre, d' un paragraphe, d'un lien ou de quelque chose d'autre C'est ce qu'on appelle un tag. Le HTML en lui-même n'est pas très joli. Il a une disposition verticale. Tout est empilé les uns après les autres. Vous ne pouvez pas vraiment superposer des éléments ou créer des grilles et des mises en page de colonnes C'est un peu comme un document texte où tout le contenu s'écoule verticalement l'un après l'autre. À l'époque, le design Web n'existait pas vraiment. y a pas eu beaucoup de conception, mais ensuite est venu le CSS, et le site Web a commencé à être complètement différent. Le CSS est le style du site Web. C'est ici que nous définissons à quoi doit ressembler chacun de ces éléments HTM. De quelle taille ils doivent être, de quelle police, de quelle couleur, comment ils doivent être disposés sur la page, s'ils doivent avoir des interactions avec le pointeur de la souris, etc. Une page Web contenant uniquement du HTML ressemble à un squelette, et après y avoir appliqué du CSS, elle ressemble à une personne entière. Dans Webflow, nous ajoutons des éléments HTM depuis le panneau des éléments. Et si nous examinons le tableau du codex, nous verrons que deux éléments HTML y ont également été ajoutés, une balise H pour le titre et une balise P pour le paragraphe Il s'agit d'éléments HTML non stylisés par défaut. Si vous vérifiez l'onglet CSS, vous verrez qu'il est vide. Nous n'avons pas encore ajouté de style à nos éléments. Le style est ajouté à partir de la droite dans le panneau Styles. Nous n'avons pas écrit de code ni de CSS nous-mêmes, mais Webflow l'a fait pour nous Maintenant, l'onglet CSS contient des informations de style. Il s'agit essentiellement d'une instruction qui dit : Si un élément a un titre, mettez-le en rouge et qu'il mesure 58 pixels de large. C'est simple. 62. Bases du Web : le modèle de boîte: Avant de commencer à créer notre page, je voudrais d' abord expliquer la structure d'une page Web. Chaque page Web est structurée selon ce que l'on appelle un modèle de boîte pour le HTM, chaque élément est en réalité une boîte. Quels que soient leur forme finale et leur contenu, ils commencent tous comme une boîte. Et toutes ces boîtes se trouvent en fait dans d'autres grandes boîtes, jusqu'à la dernière grande boîte où se trouve tout le reste. Et c'est notre page Web. Lorsque nous avons conçu notre barre de navigation dans Figma, nous avons simplement fait glisser nos liens exactement là où nous voulions qu' ils soient placés. Mais Figma et d'autres outils de conception utilisent un modèle différent. Le modèle en couches, vous pouvez le comparer des étagères en papier dans Figma Chaque nouvel objet se trouve au-dessus d'un objet existant, pas au-dessus de celui-ci, mais juste au-dessus de celui-ci. Il crée essentiellement une nouvelle couche d'espace et est le roi et le seul citoyen de cet espace. Si quelque chose d'autre se trouve juste en dessous, la partie inférieure ne sera pas visible du tout tant que nous ne l'aurons pas poussée vers le haut dans le panneau des couches. Exactement ce qui se passe lorsque vous placez des papiers les uns sur les autres. Aujourd'hui, les pages Web ressemblent davantage à des organiseurs de tiroirs. Lorsqu'un tiroir est divisé en boîtes qui, seules, peuvent être divisées en boîtes encore plus petites dans des tiroirs, les objets ne se superposent généralement pas. Ils se situent soit en dessous, soit l'un à côté de l'autre. Lorsque nous créons notre barre de sieste en HTML, nous allons d'abord prendre une boîte vide et y mettre notre logo et nos boîtes de liens. La plus grande boîte est appelée parent et les petites boîtes à l'intérieur sont appelées enfants. Et ces boîtes pour enfants sont similaires les unes aux autres, exactement comme vous vous y attendriez. Par défaut, ils vont se succéder car c'est ainsi que chaque animal fonctionne sans CSS. Ensuite, nous allons appliquer un style CSS. Toutes ces boîtes sont donc disposées horizontalement. Ensuite, en utilisant d'autres propriétés CSS et quelques boîtes supplémentaires, nous pouvons les distribuer exactement comme nous le souhaitons. Ne vous inquiétez pas, vous vous y habituerez en un rien de temps. Si jamais vous êtes coincé à essayer trouver comment faire fonctionner quelque chose, la solution est probablement une autre boîte. Webflow a la gentillesse de nous montrer les limites de nos boîtes Lorsque vous cliquez sur un élément, la boîte complète qu'occupe cet élément s'affiche. Comme vous pouvez le constater, même si notre titre est court, l'encadré s'étend sur toute la page C'est le comportement par défaut de la plupart des boîtes HTML sans qu' aucun CSS ne leur soit appliqué. Et par défaut, toutes ces boîtes se succèdent moins que vous ne les mettiez dans une autre boîte. 63. Webflow : hiérarchie des éléments: Lorsque nous créerons notre page dans Webflow, nous aurons de nombreuses boîtes La plupart des petites boîtes seront placées dans d'autres boîtes plus grandes, et ces boîtes plus grandes seront placées dans des boîtes encore plus grandes. Ne vous perdez pas dans cette jungle de boîtes. Webflow dispose d'un panneau de navigation, que vous pouvez trouver ici Ce navigateur est similaire au panneau Layers de Figma. Tout ce que nous ajoutons à notre page se trouve ici. Même les objets invisibles, les éléments de ce panneau sont organisés selon la logique du modèle de boîte. La première boîte de haut niveau qui contient tout ce qui se trouve à l'intérieur s'appelle le corps. Rien ne passe à côté ou à l'extérieur, tout y entre. C'est l' arrière arrière grand-père de toutes les boîtes pour enfants. C'est pourquoi vous obtenez cette légère indentation pour représenter la hiérarchie des éléments et pour montrer ce qui se trouve à l'intérieur boîte que nous appelons cette imbrication Le titre et le paragraphe sont imbriqués dans le corps du texte. Reflow nous montre cette hiérarchie avec les lignes deux. Si nous prenons une case vide et y mettons notre titre, la ligne apparaîtra. Cette ligne est un guide utile pour identifier facilement la hiérarchie des éléments. La hiérarchie est un élément important ici, de nombreuses propriétés sont transmises du parent aux enfants. C'est ce qu'on appelle l'héritage. L'enfant héritera des biens du parent, comme dans la vraie vie. Par exemple, si je change la couleur de police en rouge sur le parent, tout élément de texte que je dépose dans le parent sera également lu , tous. Quel que soit le type de texte, je le laisse tomber, titre et paragraphe, puce ou autre C'est jusqu'à ce que je passe outre. Nous n'avons pas besoin d'être des copies exactes de nos parents. C'est vrai. Si nous décidons d'être différents, nous pouvons modifier directement le style du texte l'élément enfant. C'est ce qu'on appelle le remplacement. Toutes les propriétés ne peuvent pas être héritées. Cela s'applique principalement aux textiles. Webflow peut nous montrer s'il y a un héritage sur un élément Voyez-vous comment certains styles sont surlignés en orange ? Cela signifie que le style est hérité et si vous cliquez dessus, il vous indiquera d'où il est hérité. Par exemple, sur la couleur, c'est sous forme de bloc, référence à la boîte parent que nous venons de modifier. Plus tard, j'expliquerai ce qu'est un déblocage. Le style est plutôt surligné en bleu. Cela signifie que nous avons directement stylisé cette propriété et qu'elle remplacera tous les styles du parent Vous n'avez pas besoin de bien comprendre cela pour le moment. Vous vous y habituerez au fur et à mesure que nous nous entraînerons et que nous créerons notre page. La deuxième représentation visuelle de la hiérarchie des éléments est visible dans la barre de navigation inférieure. Cela montre que le cap se trouve à l'intérieur du bloc, qui se trouve à l'intérieur du corps. Ils sont cliquables et vous pouvez sélectionner n'importe lequel des parents Mais il ne montre ni les enfants ni les frères et sœurs, seulement les parents jusqu'au corps. Pour une image complète, le panneau de navigation est une meilleure utilisation. Il en va de même pour le panneau de navigation. Si nous sélectionnons un élément dans le panneau comme Figma, nous modifierons l'élément exact dans Figma Lorsque nous déplaçons des éléments vers le haut ou vers le bas dans le panneau des calques , la position de l' élément ne change pas, il passe juste derrière ou devant un autre élément. S'ils se chevauchent, s' ils ne se chevauchent pas, rien ne se passe vraiment visuellement Mais dans Webflow, la position change. déplacement d'un élément de paragraphe dans le navigateur modifie l'ordre des poids élevés affichés sur le canevas Nous pouvons également le faire en nous déplaçant sur la droite sur le canevas, vous remarquerez que le panneau du navigateur se met à jour en conséquence Nous pouvons également faire glisser des éléments à l'intérieur des cases du panneau du navigateur et déplacer les cases entières, ce qui déplacera tous les éléments Trinle Children avec elle D'accord, cette structure Web peut sembler un peu confuse au début, mais ne vous inquiétez pas rapidement, vous vous y habituerez. 64. Webflow : section, conteneur, bloc de division: Bien, dans cette section, nous allons apprendre par la pratique au lieu d'apprendre Webflow fonctionnalité par fonctionnalité, nous allons réellement l' apprendre en créant notre page d'accueil que nous avons déjà conçue, et petit à petit, étape par étape, avec acharnement N'oubliez pas que nous allons apprendre tous les tenants et aboutissants de Webflow uniquement lorsque nous en avons besoin Je ne parlerai d' aucune fonctionnalité tant que nous n'en aurons pas réellement besoin pour l'utiliser pendant que nous créons et créons notre page d'accueil. Nous allons donc prendre le design que nous avons créé, puis chaque section par section, nous allons le revoir, le recréer et reconstruire dans Webflow Et commençons simplement avec notre contenu sur le côté gauche de la section des héros. Avant de commencer à créer quelque chose dans Webflow, vous devez d'abord planifier dans votre tête type de mise en page qui sera nécessaire Alors, qu'est-ce que nous avons ici ? Nous avons un fond bleu. Dans figma, nous utilisons un rectangle pour cela. Dans Webflow, nous n'avons pas de rectangle. Nous avons des boîtes à la place. Il existe trois types de boîtes vides dans Webflow. Vous les trouverez ici, dans le panneau Éléments. Le panneau Elements est l'endroit où Webflow conserve tous les nouveaux éléments dont nous avons besoin Il est divisé en catégories de besoins, comme la typographie, où vous avez un titre, un paragraphe et tous les éléments liés au texte Nous avons donc trois boîtes vides pour notre section d'utilisation générale, conteneur et un bloc de plongée. Une section est exactement ce qu'elle dit. C'est une boîte vide dans laquelle nous pouvons organiser une section de notre page C'est exactement ainsi que nous organisons nos designs, n'est-ce pas ? Nous avons une section consacrée aux héros, puis plusieurs sections ci-dessous. Enfin, la section de pied de page. Ce sont toutes des sections, et c'est ainsi que nous allons également nous organiser dans Webflow Le conteneur est l'endroit où nous mettons le contenu de notre page. Dans nos conceptions, c'est tout ce que nous avons placé dans les limites de notre réseau. La boîte la plus populaire en HTML est un bloc DV, abréviation de bloc de division. C'est une boîte vide et les éléments de base les plus utiles d'une page Web. C'est dans la catégorie de base. Lequel d'entre eux avons-nous besoin en premier ? Bien évidemment, une section. Ajoutons donc une nouvelle section à notre page. La section et le bloc DE sont des éléments identiques. Ils fonctionnent exactement de la même manière. Donc, tout ce que je décrit pour une section ce moment s'applique également au bloc DL. Ainsi, une section ou un bloc D est une boîte vide. Il n'y a rien dedans. Cette boîte n'a pas réellement hauteur tant que nous ne lui donnons pas une certaine hauteur. Webflow nous indique temporairement un peu de hauteur afin que nous puissions le remarquer et ne pas nous rendre fous de le chercher C'est aussi une boîte à discours. Lorsque vous y placez d'autres éléments, il s'agrandit pour correspondre à la hauteur de son élément enfant. Donnons-lui une couleur afin de mieux comprendre ce qui lui arrive. Nous pouvons le faire en arrière-plan. En ce qui concerne les éléments de base, le panneau Snile est très similaire au panneau de propriétés de Figma, vous pouvez donc l'utiliser très facilement Maintenant, si nous entrons dans l'aperçu, la section disparaît. Pourquoi est-ce le cas ? Parce qu' il est vide et n'a aucune hauteur de pixel. C'est invisible. Webflow lui donne simplement une hauteur temporaire juste à l'intérieur du concepteur de réseau, afin de nous aider à le voir Si nous faisons glisser un élément d'image à l'intérieur, il va s'étendre de zéro pixel à la hauteur exacte de l'élément d' image que nous venons de placer à l'intérieur. Maintenant, le tout est également visible en mode aperçu , car la hauteur de pixel n'est plus nulle. Si vous mettez quelque chose de plus petit à l'intérieur, comme une petite étiquette, elle va rétrécir. Mais il n'a pas vraiment rétréci. Il faisait zéro pixel. Il ne rétrécit qu' à l'intérieur du designer car il avait cette hauteur temporaire. J'espère que vous vous y habituez. Je me souviens que ce comportement étrange était un peu déroutant pour moi au début. Je voulais donc clarifier dès le départ afin que vous compreniez et que vous compreniez également la logique de base de la façon dont la structure est formée sur le site Web. Essayez-le vous-même dès maintenant, puis nous continuerons à personnaliser notre section. 65. Webflow : paramètres de taille: Nous sommes de retour. Maintenant, donnons à ce bloc div la même couleur bleue que celle de nos designs. Pour obtenir la couleur bleue exacte de Figma, sélectionnez la case de couleur ou un rectangle d'arrière-plan, puis copiez le code à partir de la couleur du champ Si vous ne parvenez pas à sélectionner le rectangle d' arrière-plan, n' oubliez pas de vérifier. Peut-être avez-vous verrouillé la couche parce que je sais que c'est ce que j'ai fait dans le didacticiel Vous l'avez peut-être également verrouillée. s'agit d'un code hexadécimal, que nous pouvons copier et utiliser sur Webflow, et il y apportera exactement la même couleur identique Dans Webflow, accédez au panneau Styles et faites défiler la page vers le bas pour trouver une propriété appelée arrière-plans Il y a le même champ pour le code hexadécimal, il suffit donc de coller votre code dedans Nous devons maintenant donner à notre bloc div une taille similaire à celle de notre rectangle Figma, et c'est là que les choses fonctionnent un peu différemment par rapport à Figma La raison en est que les sites Web sont réactifs. Ils peuvent augmenter ou diminuer en fonction de la taille de l'écran. Dans Figma, tout a une position et une taille fixes quel que soit l'écran ou le contenu Pour commencer, nous avons des commandes similaires à celles de Figma Vous avez la largeur et la hauteur où vous pouvez mettre des valeurs exactes comme vous le feriez dans Figma Nous ne pouvons pas faire glisser et redimensionner un rectangle depuis le canevas comme nous le faisons dans Figma Nous devons saisir des valeurs dans ces cases. Nous pouvons mettre des valeurs de pixels exactes les saisissant directement dans Figma Pour certains éléments, cela peut être une bonne chose à faire, mais pour la zone d'arrière-plan, ce n'est pas le cas car elle n'est pas réactive. Si mon écran est plus large que cette valeur, j'obtiens cet espace blanc parce que j'ai fait en sorte que la zone bleue ne fasse que 1 400 pixels de large, alors que mon écran est plus large que cela Et si l'écran est plus petit, ce n'est toujours pas bon car la boîte déborde alors Vous voyez ces lignes bleues, sont les limites de la boîte bleue, et elles sortent de la page. Souvent, les valeurs exactes en pixels ne sont pas bénéfiques pour le flux de travail. OK, alors quelle est la bonne option ? Si vous appuyez sur cette valeur Px ici, vous verrez toutes les unités que vous pouvez saisir dans ces champs. Après les pixels, nous avons un pourcentage. Avec les pourcentages, nous entrons maintenant dans le web adaptatif. Il s'agit d'une valeur réactive qui répond à la taille du parent. Si nous mettons 50 % de largeur de notre boîte, elle occupera 50 % de son élément parent. Et quel est le parent de cet élément ? Si nous vérifions cela sur le navigateur, nous pouvons voir que le corps est le parent Le corps de tout site Web est adaptatif et sa taille dépend de la largeur du navigateur. Cela signifie que 50 % du corps représente 50 % du navigateur. Donc, si nous réduisons la largeur du navigateur, nous pouvons le faire à partir d'ici en le faisant glisser Nous pouvons voir que notre boîte bleue se rétrécit automatiquement à mesure que le corps se rétrécit et qu'il n' y a pas de défilement horizontal VH et VW sont des unités importantes et très utiles. Ils représentent la hauteur et la largeur de la fenêtre d'affichage. La fenêtre d'affichage est identique à la taille du navigateur. Par exemple, lorsque nous faisons glisser cette poignée ici, nous pouvons voir la modification de la largeur de la fenêtre d' affichage ou de la largeur du navigateur affichée directement en pixels Ce serait donc la largeur de la fenêtre d'affichage. De même, il s'agit de la hauteur de la fenêtre d'affichage. Ces unités fonctionnent en pourcentage, donc 100 VW correspond à 100 % de la largeur de la fenêtre d'affichage et 50 VH à 50 % de la hauteur de la fenêtre d'affichage Déposons une autre boîte à l'intérieur, afin que nous puissions mieux le voir dans la pratique. Si boîte jaune se trouve à l'intérieur de la boîte bleue. Si nous utilisons des valeurs en pourcentage, le cadre jaune sera redimensionné par rapport au cadre bleu car il s'agit du parent Donc 50 % et 100 %. Ainsi, 100 % de hauteur couvrent 100 % de la hauteur de la boîte bleue, qui a sa propre valeur de 600 pixels. Maintenant, regardez ce qui se passe si nous mettons 100 VH à la place. Il couvre la totalité de l'écran visible. Cela dépasse même les frontières des parents. Il en va de même pour VW. 100 % le fait s'étirer jusqu'aux bords de l'élément parent. Mais 100 VW le fait s'étirer jusqu'à occuper toute la largeur de l'écran visible. À noter que nous utilisons généralement ces valeurs dans le champ correspondant, donc VW dans le champ de largeur et VH pour le champ de hauteur Mais cela ne signifie pas que vous ne pouvez pas les inverser. Habituellement, ce n'est pas nécessaire, mais dans de rares cas, vous voudrez peut-être le faire. La dernière unité est automatique, c' est-à-dire le dimensionnement automatique. Il s'agit de la valeur par défaut, de la largeur et de la hauteur. Lorsque le côté est réglé sur la hauteur automatique, la taille de l' élément change fonction de la quantité de contenu qu'il contient. Par exemple, réglons la hauteur sur automatique sur notre boîte bleue. Il a disparu parce qu'il est vide et lorsqu'il est vide et qu'il est automatique, cela signifie qu'il n'a aucune hauteur de pixel. Mettons quelques éléments à l'intérieur. Pour ajouter quelque chose de nouveau dans un élément existant, sélectionnez cet élément et Webflow le déposera à l'intérieur lorsque vous cliquerez sur un élément le panneau des nouveaux éléments Si j'ai sélectionné une section, elle sera insérée à l'intérieur, mais si vous ne voulez pas qu'elle se trouve dans un autre élément, sélectionnez le corps pour qu'elle soit déposée l'extérieur sur le canevas général. Si vous pouvez également faire glisser des éléments directement sur le canevas à partir du panneau des calques, pas du panneau des calques, mais du panneau des éléments. Mais ce n'est pas ce que je fais habituellement. J'aime bien l'autre solution, mais à vous de choisir celle que vous préférez si vous voulez faire glisser, vous faites glisser, si vous voulez simplement cliquer, cliquez. Ainsi, au fur et à mesure que vous ajouterez d'autres éléments à l'intérieur du bloc div, celui-ci s'étirera. Si nous définissons une hauteur de pixel spécifique, le bloc div respectera cette hauteur, quelle que soit la quantité de choses que vous y insérez. Les éléments en déborderont, tout comme votre poubelle lorsque vous êtes trop paresseux pour la sortir. En ce qui concerne la largeur, la boîte s'étirera jusqu' aux bords de son parent. Dans ce cas, la page complète car l' élément parent est le corps. Enfin, nous avons des minimums et des maximums. Ces règles fonctionnent conjointement avec une largeur et une hauteur normales. C'est une règle supplémentaire que de fixer les sols et les plafonds de nos éléments. Par exemple, si nous définissons la hauteur sur auto, le cadre bleu s'étirera en fonction du contenu qu'il contient. Mais si nous fixons une hauteur maximale, elle ne s'étirera que jusqu'à ce point. Les minimums et les maximums sont très utiles dans de nombreux scénarios différents. Par exemple, si nous avons un élément de carte comme celui-ci sur lequel nous voulons mettre du contenu, il peut s'agir d'informations, de formulaires, de prix, etc. Nous pourrions définir une hauteur exacte pour qu'elle corresponde à notre contenu, comme nous le ferions dans Figma Mais comme le Web est réactif, la taille du contenu peut changer d'un écran à l'autre, et nous allons obtenir quelque chose comme ça. Une meilleure solution consiste à utiliser la hauteur minimale au lieu de la hauteur exacte dans ce cas. Si nous mettons un minimum de 400 pixels, nous veillerons à ce que le cadre ne se rétrécisse pas parce qu'il n'y a pas assez de contenu à l'intérieur, et nous veillerons également à ce qu'il s' agrandisse en même temps que le contenu. Il en va de même pour la largeur. réglage de 400 pixels semble bien ici, mais si nous le réduisons, nous obtenons un débordement et il restera obstinément à 400 pixels Une meilleure option consiste à définir une largeur maximale de 400. Cela signifie qu'il ne s' étirera pas de plus de 400 pixels quoi qu'il arrive, mais qu'il diminuera en dessous si nécessaire. Voyons maintenant quelle valeur et quelles unités devons-nous entrer pour que cette boîte ressemble à notre design ? Pour la largeur, c'est évident, non ? Nous allons utiliser Auto parce que nous voulons qu'il s' étende d'un bord à l'autre. La largeur à cent pour cent nous apporterait le même résultat dans ce cas. Souvent, dans le domaine de la conception Web, il existe plusieurs moyens d'atteindre les résultats escomptés. Parfois, ils sont tout aussi bons, mais parfois l'un d'eux peut être légèrement supérieur. Avec de la pratique et quelques échecs, vous saurez bientôt lequel est le meilleur. Dans ce cas, Auto est préférable car c'est par défaut et cela signifie qu'il n'y a pas de code supplémentaire. Voici une astuce de Webflow pour rétablir la valeur par défaut d'une propriété, maintenez la touche enfoncée ou la touche option, puis cliquez sur la propriété Toutes les modifications que vous avez apportées seront effacées et les valeurs par défaut seront rétablies. C'est un raccourci très pratique. Autre conseil, si la propriété est en bleu, cela signifie que vous l'avez modifiée. Lorsque vous êtes confronté à un problème de taille essayez de comprendre pourquoi quelque chose n'agit pas comme il le devrait, vous pouvez facilement le scanner pour identifier les propriétés appliquées et celles qui pourraient contribuer au problème. Quand c'est orange comme ça, cela signifie que nous avons modifié les valeurs de développement, mais pas directement sur cet élément, mais sur l'un des parents. Dans ce cas, sur l'élément de carrosserie. En d'autres termes, il est hérité de l'élément corporel. Encore une fois, c'est un excellent moyen d' identifier d'où viennent certains styles. Bon, pour ce qui est de la hauteur, d' après ce que nous avons appris, nous savons que nous ne pouvons pas utiliser une valeur exacte comme Figma, car lorsque l'écran s'agrandit ou se rétrécit sur le mobile, il ne l'adopte pas Alors, comment le rendre adaptable ? Nous avons deux options solides. Tout d'abord, nous pouvons le garder automatique et laisser le contenu définir sa taille. Ensuite, nous pouvons utiliser VH, la hauteur de la fenêtre d'affichage. Comme nous n'avons pas encore mis notre contenu, essayons la deuxième option, 100 VH, soit 100 % d'un écran visible Cela signifie que peu importe taille ou l'extension de notre navigateur, la boîte s'adaptera instantanément à l'écran visible. Mais si notre navigateur est trop petit, boîte bleue peut parfois ne pas être suffisante pour notre contenu, et le contenu débordera de la boîte Alors pourquoi cela se produit-il ? Parce que le cadre bleu a une hauteur définie. Il ne s'étire pas avec le contenu, et la hauteur définie est égale à celle de la fenêtre du navigateur. Alors, comment pouvons-nous résoudre ce problème ? Nous savons que pour que la boîte mère soit étirée en fonction de son contenu, nous devons utiliser le redimensionnement automatique, n'est-ce pas ? De cette façon, nous nous assurons que la boîte bleue s'agrandit avec le contenu et que nous pouvons définir la valeur de 100 VH comme hauteur minimale Désormais, le cadre bleu aura au moins la même hauteur que le navigateur, mais pas plus petit que son contenu. C'est un arrangement parfait pour nous. Donc, pour récapituler, nous avons des valeurs de pixels pour saisir des dimensions fixes exactes Nous avons des valeurs en pourcentage pour la taille et l'élément par rapport à son parent. Nous avons VH et VW pour dimensionner les éléments en fonction de la taille du navigateur, et nous avons des minimums et des maximums pour définir les sols et les plafonds des 66. et marges de: Continuons avec notre design et ajoutons le contenu à la section des héros. Nous avons besoin d'un titre, d'un paragraphe et de boutons. Nous pouvons ajouter tout cela à partir du panneau Éléments. Assurez-vous qu'ils se trouvent à l'intérieur de cette section bleue. Tu te souviens pourquoi on les a mis dedans, non ? Parce que le Web fonctionne sur le modèle de la boîte. Tout va rentrer dans quelque chose. Bien, mettons maintenant notre copie dans ces éléments de texte. Double-cliquez simplement sur l' élément sur le canevas et commencez à taper ou à copier-coller depuis le fichier de conception. Je vais expliquer dans un instant pourquoi il y a ce nouvel espace blanc au-dessus de la boîte bleue. nouveaux éléments de Webflow sont généralement bloqués les uns après les autres et collés aux bords de leur apparence C'est ainsi que le HTML se comporte par défaut. Mais ce n'est pas ainsi que nous voulons les choses. Nous voulons les déplacer et créer un espacement entre eux. Alors, comment s'y prendre ? Dans Figma, c'est facile. Il vous suffit de faire glisser l'élément où vous le souhaitez. Mais sur les pages Web, cela n'est pas possible. Ces éléments peuvent en fait être déplacés ou déplacés où vous le souhaitez sur la page Mais le CSS a une astuce spéciale pour cela. C'est ce qu'on appelle le rembourrage et les marges. Nous pouvons le trouver dans catégorie d'espacement du panneau des propriétés Le rembourrage ajoute de l'espace à l'intérieur de l'élément et la marge ajoute de l'espace à l'extérieur de celui-ci Prenons notre bouton, par exemple. Par défaut, Webflow a appliqué un peu de rembourrage lorsque vous passez le curseur sur la propriété de rembourrage, il met en évidence l'espace en bas pour que vous puissiez le bas pour que vous puissiez le Dans ce cas, les valeurs sont définies en pixels, neuf pixels en haut et en bas et 15 sur les côtés. Vous pouvez augmenter ou diminuer en faisant glisser les poignées ou en saisissant directement une valeur, par exemple 100 pixels Voici une protéine. Si vous maintenez la touche Option enfoncée pendant que vous faites glisser la poignée, sera automatiquement appliquée la même valeur sera automatiquement appliquée de l'autre côté. Donc haut et bas ensemble ou gauche et droite ensemble. Et si vous maintenez la touche Maj enfoncée, la même valeur sera appliquée aux quatre côtés en même temps. De même, en marge, la seule différence est que l'espace est appliqué à l'extérieur, ce qui nous permet de placer nos éléments où nous le voulons. Ainsi, nous pouvons ajouter l'espace supplémentaire sur l'un des quatre côtés de cet élément, ce qui les repoussera alors en quelque sorte de leur place d'origine. Tout comme pour les tailles, nous avons toutes les autres unités à l'exception des pixels, bien que nous utilisions rarement d'autres unités pour le rembourrage et les marges Les unités de pixels sont généralement la solution. Donc, cet espace blanc au-dessus de la case bleue est en fait la marge de notre titre. Tout comme le bas, Webflow ajoute marges par défaut sur de nombreux éléments Si quelque chose ne va pas, vérifiez les valeurs par défaut dans le panneau des styles Ils détiennent généralement les indices. Dans notre cas, appliquons marges et des rembourrages correspondant à nos designs Nous connaissons déjà ces valeurs. À l'intérieur de la figure, sélectionnez l'objet maintenez la touche Option enfoncée et déplacez votre souris pour voir les distances entre le sélecteur et les autres Par exemple, nous pouvons voir que le contenu se trouve 140 pixels du bord gauche du cadre et que nous avons 209 pixels en haut. Comment utilisez-vous ces informations ? Nous pouvons appliquer le même rembourrage à notre boîte bleue. Maintenant, en fonction de la hauteur ou de l'écran du navigateur, ces 290 pixels peuvent ne pas fonctionner du tout. Sur une hauteur de navigateur inférieure, ces 290 pixels sont trop élevés. Le Web n'est pas statique comme Figma, et nous devons réfléchir à des valeurs qui seront réactives Alors, que voulons-nous réaliser ici ? Nous voulons que ce contenu apparaisse plus ou moins au centre, n'est-ce pas ? Quelle que soit la taille de l'écran, comme nous l'avons fait dans nos designs. Si nous utilisons des valeurs de pixels exactes, l'apparence sera très différente d'un écran à l'autre. Sur les navigateurs plus courts, le contenu aura l'air synchronisé en bas, mais sur les navigateurs les plus hauts, il se peut qu'il soit trop petit et que le contenu semble trop important en Nous pouvons donc utiliser à la place l'unité de hauteur de la fenêtre d'affichage VH. Cela calculera automatiquement le rembourrage, et si la taille de l'écran diminue ou augmente, le rembourrage rétrécira et augmentera Parfois, il faudra 20 VH, mais parfois autre chose. Cela dépend du contenu que nous avons, mais dans ce cas, quelque chose comme ça. Maintenant, si nous rétrécissons un peu trop l'écran, vous pouvez voir que le contenu est compressé en bas. C'est parce que nous n'avons pas ajouté le rembourrage inférieur. Lorsque l'écran est grand, il flotte en haut et il y a de l'espace en bas car nous avons attribué à notre boîte bleue une valeur de 100 VH, étirant pour remplir tout l'écran visible Mais lorsque cet écran visible est vraiment court, il ne reste plus d'espace en bas. Nous pouvons faire la même chose ici, afin d'ajouter exactement la même valeur VH au rembourrage inférieur Cela garantira un bon espacement en haut et en bas, quelle que soit la manière dont nous réduisons ou agrandissons le navigateur Bien, ajoutons maintenant des marges entre les objets. Supprimons cette marge supplémentaire de 20 pixels qui se trouve en haut du titre, car elle s'ajoute au rembourrage déjà existant la section des héros Cette disposition de mise en page semble être sur la bonne voie. Nous vérifions la réactivité verticale, mais que se passe-t-il si nous vérifions cela sur différentes largeurs ? Ce rembourrage gauche de 140 pixels ne semble plus être une bonne idée. Cela pousse trop le contenu vers la droite. Nous pourrions résoudre ce problème et définir des rembourrages individuels pour chaque taille d'écran ou peut-être même utiliser une unité réactive pour le rembourrage, comme VW pour la largeur de la fenêtre d'affichage Mais le moyen le plus courant le meilleur moyen et la meilleure solution pour cela consiste à utiliser un conteneur. Dans nos conceptions, la plupart des éléments se situent à l'intérieur des limites de notre grille. Cela nous donne un contenant invisible centré au milieu et tous ces éléments se trouvent à l'intérieur. C'est ainsi que la plupart des sites Web sont également présentés. Il a une mise en page centrale et ils placent tout dans cette mise en page, sauf s'il s'agit d'images d'arrière-plan ou d'éléments uniques. Nous pouvons facilement y parvenir en ajoutant un conteneur depuis le panneau des éléments. Nous allons placer le conteneur à l'intérieur la section et déplacer le reste des éléments à l'intérieur de ce conteneur. Pour ce faire, nous les faisons glisser un par un à l'intérieur. Vous pouvez le faire soit sur le panneau de navigation, soit sur le canevas Même résultat, les deux fonctionnent. D'habitude, je préfère le faire sur le navigateur, car je peux mieux voir ce qui se passe Nous n'avons plus besoin du rembourrage gauche de la section, nous pouvons donc nous en débarrasser Si vous vérifiez cela sur différents écrans, vous verrez que notre contenu est parfaitement centré en plein milieu Même sur des écrans plus grands, et tout cela est dû au conteneur. Laissez-moi vous donner une idée de ce qui se passe sans le contenant. Je vais simplement donner au conteneur une couleur de fond différente afin que vous puissiez voir clairement ses limites. Si vous placez plusieurs paragraphes à l'extérieur du conteneur, vous verrez qu'ils s' étirent bord à bord. Même sur les grands écrans, cela ne constitue pas une bonne mise en page. Le texte est trop long, ce qui nuit à la lecture. Mais lorsque vous déplacez les paragraphes à l'intérieur du conteneur, vous les centrez parfaitement C'est la puissance d' un conteneur et c'est l' élément de base de tout site Web. Le conteneur par défaut de Weblos est en fait un bon vieux déblocage, tout comme une section, mais il possède deux styles prédéfinis qui le font fonctionner comme un Tout d'abord, les marges automatiques sur les côtés. Cela ne fait que centrer le conteneur au milieu de la page. Les marges automatiques fonctionnent comme un ressort qui pousse l'élément par les côtés pour le maintenir centré D'un point de vue technique, il calcule la quantité d'espace vide laissé par l'élément et remplit cet espace vide avec des marges Si vous supprimez l'une de ces marges automatiques, le conteneur perdra son pouvoir de centrage et il épousera l' un des bords en fonction de la marge automatique que vous supprimez Cette astuce pour appliquer des marges automatiques est une bonne méthode à utiliser lorsque vous devez centrer quelque chose. Webflow propose même un petit raccourci pour le centrage, ce qui permet d'appliquer des marges automatiques sur les côtés Mais les marges automatiques ne suffisent pas à centrer quelque chose. L'élément doit avoir une largeur, et c'est la deuxième propriété du conteneur. Largeur maximale dans ce cas. Cela indique au verrou DV de ne pas s' étendre au-delà de cette largeur, mais cela permet de le rétrécir, ce qui le rend agréable et réactif Sans cette largeur, nous perdons instantanément cette qualité de conteneur et maintenant cet élément s'étire bord à bord comme la plupart des autres éléments. Il possède toujours des marges automatiques sur les côtés, mais elles sont désormais inutiles car les marges automatiques remplissent l'espace vide laissé par l'élément. S'il n'y a pas d'espace vide, il n'y a aucun espace qu'ils peuvent occuper. Cette largeur de conteneur est modifiable. Selon le site Web, nous pouvons le vouloir plus étroit ou plus large D'ailleurs, l'astuce de Figma augmenter les valeurs par incréments de dix fonctionne dans Webflow Maintenez la touche Maj enfoncée tout en appuyant sur les flèches vers le haut ou vers le bas pour augmenter ou diminuer ces valeurs par incréments de dix Dans notre cas, la largeur de notre conteneur est en fait différente car notre conteneur est notre grille, qui a une largeur définie dans Figma Nous pouvons mesurer la largeur exacte de notre grille en traçant un rectangle dessus et en vérifiant la largeur finale de ce rectangle Il fait 1 160 pixels. Nous pouvons appliquer cette largeur au conteneur à l'intérieur de Webflow. Selon l'écran que nous visualisons, le conteneur sera soit centré, soit épousera les bords Dans mon cas, c'est le dernier. Pourquoi ? Parce que 1 160 pixels est supérieur à la largeur actuelle du canevas, qui est de 992 pixels. Il ne reste plus d'espace pour entrer en jeu. Bien que sur des écrans plus larges, la disposition centrale est présente. Résolvez le problème sur les écrans plus étroits que notre conteneur, nous devons ajouter manuellement de l'espace sur les côtés Maintenant que nous utilisons déjà marges automatiques pour notre boîte à conteneurs, nous ne pouvons plus vraiment ajouter de valeurs de marge supplémentaires , mais nous pouvons faire autre chose. Nous pouvons ajouter du rembourrage soit sur le contenant, soit sur la section réservée aux parents Cela éloignera le contenu des bords. importe que vous ajoutiez du rembourrage au contenant Peu importe que vous ajoutiez du rembourrage au contenant ou à la section réservée aux parents Ces deux options sont également bonnes. Personnellement, j'ai l'habitude d'ajouter du rembourrage au parent, alors allons-y Cela nous donne une mise en page centrée qui est réactive et s'adapte parfaitement à tous les écrans. Sauf peut-être sur le plus petit écran mobile, la valeur de rembourrage que nous avons définie est trop élevée Nous devons donc l'ajuster et utiliser quelque chose de plus petit ici Mais nous n'allons pas le faire pour le moment. J'ai une section entière sur le responsive design, et nous allons corriger notre page Web sur tous ces petits écrans et appareils. Laissez-les tels quels pour le moment, même s'ils ont l'air cassés. Il suffit de travailler sur le point d'arrêt de base de l'ordinateur de bureau. C'est celui avec l'icône en forme d'étoile dessus. En fait, ne touchez pas non plus à ces points d'arrêt plus importants. Nous n'en avons pas besoin et si vous l'ajoutez, vous ne pourrez pas vous en débarrasser par la suite. Nous avons abordé la question de l'espacement sur le Web. Nous avons un rembourrage qui ajoute de l' espacement à l'intérieur de l'élément, marge qui ajoute de l'espacement à l'extérieur de l'élément, et nous avons couvert un conteneur, qui est un élément de base d'une page Web . Il centre parfaitement le contenu de notre page sur des écrans plus grands 67. Webflow : typographie Web: Maintenant, stylisons le texte. Les styles de police sont appliqués à partir d'ici, ce que vous connaissez bien. La première chose à faire est de choisir la police. Mais contrairement à Figma, nous avons une sélection limitée de polices Nos polices de caractères, nos fenêtres contextuelles et Roboto ne sont pas répertoriées. Cela signifie que nous devons ajouter ces polices à partir des paramètres du projet. Les paramètres du projet sont différents de ceux du concepteur, et nous pouvons accéder aux paramètres de police de ce projet à partir de ce lien. Ou dans le menu Hamburger, accédez aux paramètres du projet puis passez sous l'onglet Police Webflow nous offre trois options pour ajouter des téléphones. abord, Google Phones, qui répertorie tous les téléphones Google et pour les ajouter, nous devons les sélectionner puis les ajouter un par un. Nous ne pouvons pas tous les ajouter en même temps. En outre, les téléphones Adobe ou Typekit de la même manière. Comme je l'ai mentionné dans la leçon de typographie, cela nécessite un abonnement à Creative Cloud d' Adobe Une fois que vous avez souscrit cet abonnement, vous pouvez le connecter à votre compte sur Webflow, puis vous pouvez extraire des polices à partir de là Comme nous pouvons ajouter manuellement des téléphones personnalisés simplement en les téléchargeant. Dans notre cas, nous avons besoin de téléphones Google, nous allons donc simplement trouver des fenêtres contextuelles. Une fois que vous les avez trouvées, vous les sélectionnez et il vous sera demandé quelles variantes vous souhaitez inclure. Ces chiffres sont des grammages de police. Le CSS utilise des valeurs numériques pour représenter les différentes épaisseurs de police au lieu de les nommer. Et c'est ainsi qu'il est couramment cartographié. Vous allez devoir faire correspondre manuellement chaque épaisseur de police à l'un de ces chiffres. Pour trouver ce graphique, vous pouvez simplement utiliser les pondérations de police CSS de Google. Vous pouvez également vérifier votre police spécifique dans les polices Google et voir comment les numéros et les noms correspondent les uns aux autres. Voyons quels autres poids de téléphone nous utilisons. Nous en avons donc 600, 500 et normal pour les pop-ins, et nous en avons des normaux et 500 pour Roboto Nous pourrions bien sûr ajouter toutes les variations de poids, mais il est recommandé de ne pas les ajouter, car Webflow doit ensuite les charger et télécharger en quelque sorte ces polices sur le site Web, ce qui va allonger le temps de chargement de la page Les italiques sont des versions distinctes pour chaque poids. Comme vous pouvez le constater, nous n'avons pas utilisé d' italique dans notre conception, mais nous devons tout de même modifier pour les poids normaux et les poids en gras Ensuite, il montre ici les polices et styles de police que nous avons ajoutés à notre projet. Maintenant, il en va de même pour Roboto. Incluons également Bold 700. C'est un poids important pour le texte d'un paragraphe, même si nous ne l'avons pas encore utilisé. Si le designer est toujours ouvert, les nouveaux téléphones ne seront pas affichés tout de suite, alors actualisez le designer. Et voilà maintenant, nous avons des pop-ins et Roboto à l'intérieur. Vous verrez que les poids que nous avons ajoutés sont intégrés et activés, mais que ceux que nous n'avons pas ajoutés sont désactivés. OK, alors stylisons notre texte. Sema build était notre titre, normal pour le paragraphe et moyen pour le bouton Passons maintenant aux tailles et aux hauteurs de ligne. La taille du téléphone pour notre titre est de 75 pixels. Webflow n'ajuste pas automatiquement la hauteur de ligne par défaut Il hérite des valeurs des éléments parents, nous devons donc y mettre fin manuellement Maintenant, nous pouvons faire la même chose pour le paragraphe et le texte du bouton. Lorsque la hauteur de ligne est réglée sur automatique, vous pouvez trouver la valeur réelle en pixels en cliquant dans le champ, ce qui révélera la hauteur de ligne actuelle. Vous pouvez également modifier légèrement la valeur en appuyant sur les touches fléchées vers le haut ou vers le bas passer aux valeurs en pixels. Changeons les couleurs. C' est assez simple. Veillez simplement à ne pas confondre ces deux couleurs. L'une est la couleur du téléphone et en dessous se trouve une couleur d'arrière-plan. Nous voulons changer la couleur de la section typographie, mais la couleur de fond du bouton Webflow ne prend pas d' unité de pourcentage pour l'espacement des lettres, mais devinez quoi ? Nous pouvons juste faire le calcul. Le pourcentage est relatif à la taille de police. Il est donc négatif par rapport au pourcentage de la taille de police qui est de 75 pixels, fait que l'espacement des lettres est négatif de 1,5 pixel D'ailleurs, il en va de même pour la hauteur de la ligne. La valeur en pourcentage est relative à la taille de police. hauteur de ligne de 100 % serait exactement la même que la taille de police, et 200 % serait le double de la taille de police Vous pouvez également effectuer le calcul inverse et convertir la hauteur de ligne en pixels en pourcentage. J'espère que tu as fait attention à ton cours de mathématiques. Et ce sont nos contrôles de typographie. Il y a d'autres choses que nous pouvons faire avec la typographie, mais nous les laisserons pour plus tard Donc, pour récapituler, l'ajout de polices dans les projets Webflow se fait à partir des paramètres du projet Nous pouvons facilement ajouter des téléphones Google directement depuis le menu déroulant. Nous devons choisir les épaisseurs de police spécifiques dont nous avons besoin. Ces poids de police sont représentés par chiffres que nous pouvons consulter en ligne ou trouver dans Figma sous le code Tab Ensuite, nous avons des hauteurs de ligne dont nous pouvons à nouveau récupérer la valeur exacte des hauteurs de ligne dans l'onglet code. 68. Boutons et liens: Dans cette vidéo, nous allons aborder les boutons et les liens. Vous trouverez deux types de boutons dans le panneau Éléments. Et vous trouverez également deux types de liens. Cette dualité m'a un peu embrouillée au début et j'ai eu du mal à comprendre lequel utiliser et où Précisons pourquoi il y a deux liens et deux boutons Commençons par les liens. Le bloc de liens est un bloc de jour normal , sauf qu'il peut être lié. Vous pouvez mettre n'importe quoi dans le bloc de liens et le tout sera cliquable Le lien texte, en revanche, n'est qu'un lien texte. Tu ne peux rien y mettre. Pour lier les liens, nous sélectionnons le lien et cliquons sur l'onglet de configuration C'est ici que nous pouvons mettre à jour les paramètres des liens. Le premier est l'URL, où nous pouvons saisir la destination exacte. Ensuite, nous avons des pages. C'est ici que nous pouvons créer des liens vers d'autres pages de notre site Web, et c'est exactement l' option que nous utiliserions si ces liens n'étaient pas faux et si nous avions effectivement d'autres pages. Pour le moment, il n'affiche qu' une seule page, la page d'accueil, c'est là que nous en sommes. Ensuite, nous avons une section de page. C'est le cas lorsque vous créez un lien vers une section spécifique sur la même page ou même sur une autre page. Pour le moment, il est vide. Il y a une chose supplémentaire que nous devons faire pour pouvoir créer un lien vers une section. Nous y reviendrons à un moment donné. Et les deux derniers sont des liens électroniques et téléphoniques pour les adresses e-mail et les numéros de téléphone. lien e-mail ouvrira un client de messagerie par défaut que l'utilisateur a défini sur son ordinateur, par exemple, Outlook ou Gmail, et il ouvrira la nouvelle fenêtre de courrier avec adresse e-mail et la ligne d'objet préremplies avec les valeurs que nous y avons mises Dans mon cas, cela a ouvert une fenêtre GML parce que c'est ce que j'ai défini comme client de messagerie par défaut sur mon ordinateur Le numéro de téléphone est destiné aux appareils mobiles, sorte que la personne qui consulte le site sur son appareil mobile peut cliquer directement sur un lien pour appeler sans avoir à copier et à saisir les chiffres. Sur un ordinateur, c' est généralement inutile. Le message d'erreur s'affiche parfois. Maintenant, pour les boutons, nous en avons deux types, un bouton normal et un bouton de formulaire. Le bouton du formulaire peut avoir le même style qu'un bouton normal, mais il est uniquement lié au formulaire et envoie le formulaire lorsque vous cliquez dessus. Le bouton normal, quant fonctionne exactement comme un lien texte. Il possède les mêmes paramètres de lien, et tout comme un lien texte, nous ne pouvons pas y placer d'autres éléments. Cela signifie que vous pouvez créer des boutons à partir de liens textuels. Vous pouvez également créer des boutons à partir de blocs de liens, et si vous souhaitez créer un bouton contenant une icône ou une ligne de texte supplémentaire, les blocs de liens sont exactement ce que vous devez utiliser. Si jamais vous ne savez pas ce que fait chaque élément, utilisez une fenêtre contextuelle contenant plus d'informations dans le panneau des éléments. Chaque élément est surmonté d'un petit point d' interrogation. Cliquez dessus pour obtenir une explication rapide de ce que fait cet élément. Revenons donc à notre bouton, modifions la forme du bouton. Notre bouton dans Figma a une taille spécifique. Il mesure 168 pixels de large et 50 pixels de haut. Nous pouvons utiliser ces valeurs exactes, mais vous verrez qu'utiliser la largeur exacte n'est pas une bonne idée. Essayons d'abord de centrer le texte à l'intérieur de notre bouton. Comment s'y prend-on ? L'alignement vertical est assez simple. Nous pouvons simplement utiliser l'option d'alignement du texte et le centrer. Mais pour l'alignement horizontal, nous devons utiliser un rembourrage afin de pouvoir déplacer le texte jusqu'à ce qu' il semble centré Maintenant, voici pourquoi définir une largeur exacte est une mauvaise idée. Si, à un moment donné, nous décidons modifier le texte et qu'il est plus long, ce bouton ne s'ajuste pas et le texte doit déborder Une meilleure solution consiste à réutiliser la valeur de pédalage. Nous pouvons tirer parti de cette valeur de rembourrage directement dans nos designs. L'espacement à gauche et à droite est de 48 pixels. Nous pouvons utiliser ces valeurs pour appuyer sur les boutons. Supprimez la largeur et ajoutez un rembourrage de 48 pixels des deux côtés. Cela rendra notre bouton non fixe et il s'adaptera à la taille du texte Et enfin, les coins arrondis. Cela peut être modifié dans la section de bordure sous l'option radios. Comme nous l'avons fait dans Figma, nous pouvons simplement l'augmenter jusqu'à ce que le bouton soit complètement arrondi Donc, pour récapituler, nous avons deux boutons, normal et le bouton Formulaire. bouton de formulaire ne peut être utilisé que dans un formulaire, et le bouton normal est utilisé pour créer des liens vers d'autres pages, actions sur la page, des e-mails, des liens, des liens téléphoniques, etc. Nous avons deux types de liens, les liens textuels et les blocs de liens. Les blocs de liens sont comme des blocs DIV, des boîtes vides qui peuvent contenir de nombreux autres éléments, même d'autres DVBlogs, mais ils peuvent agir comme un lien normal Quant aux liens textuels, ils ne peuvent rien y imbriquer et ils fonctionnent comme du texte normal. 69. Webflow : cours CSS: Ajoutons maintenant notre deuxième bouton. Pour gagner du temps sur le style, nous pouvons dupliquer notre bouton blanc existant. Vous pouvez cliquer avec le bouton droit de la souris, puis dupliquer ou utiliser un contrôle C, un contrôle V, un raccourci normal ou une commande C, une commande V pour Mac. Lorsque vous faites cela, deux choses amusantes auxquelles vous ne vous attendiez pas se produiront. abord, au lieu de le coller en dessous comme le font la plupart des autres éléments, il est placé à côté Ce comportement est dû au style d'affichage par défaut appliqué aux boutons. Nous aborderons ce sujet dans la prochaine leçon. Dans cette leçon, nous allons aborder le deuxième comportement amusant. Lorsque nous essayons d'apporter des modifications à notre deuxième bouton, tout est appliqué au bouton d'origine. Il ne s'agit pas d'un bug. Au contraire, c'est probablement la fonctionnalité la plus puissante du CSS et l'une des raisons pour lesquelles le CSS a été créé en premier lieu. Cette fonctionnalité est appelée classe. Nous pouvons placer ce bouton à 100 endroits différents sur notre site Web, et en modifiant une instance, nous pouvons modifier tous les boutons de la même classe. Dans Webflow, cette classe est gérée à partir d'ici, un endroit appelé sélecteur Le sélecteur signifie ce qu'il dit. Il sélectionne une classe spécifique. Il y a d'autres éléments que nous pouvons sélectionner en plus des classes, comme un tag, mais nous y reviendrons plus tard lorsque nous en aurons besoin. Le bouton de dicton carré bleu est notre classe. Si vous sélectionnez le bouton d'origine, vous verrez qu'il a la même classe. C'est pourquoi les mêmes propriétés CSS s'appliquent aux deux. Mais si nous supprimons cette classe du bouton, nous perdrons toutes les modifications que nous y avons apportées et reviendrons aux paramètres ou aux propriétés par défaut. Mais ne vous inquiétez pas, nous pouvons sélectionner à nouveau la classe, et instantanément, toutes les propriétés reviendront. Lorsque vous recherchez une classe existante, commencez simplement à taper et Webflow filtrera les résultats de recherche Si la classe existe déjà, vous la verrez ici et vous pourrez la sélectionner. Si elle n'existe pas, vous pouvez créer vous-même une nouvelle classe et lui donner le nom que vous voulez. L'application d'une classe nouvellement créée n'aura effet sur notre bouton car aucune propriété CSS n'est appliquée à cette classe . Sur une classe nouvellement créée, nous pouvons appliquer de nouveaux styles, mais cela n'affectera pas le bouton d'origine. Les classes sont amovibles et peuvent être appliquées à n'importe quoi. Par exemple, nous prenons la classe My pretty button et l'appliquons au bouton d'origine. Les classes peuvent également être dupliquées ou renommées. Vous pouvez le faire à partir de cette petite liste déroulante. Renommez simplement et appuyez sur Entrée. Dupliquer un cours est un bon moyen de gagner du temps. Notre bouton Ghost possède de nombreuses propriétés identiques à celles de notre bouton principal Nous pouvons donc dupliquer ces propriétés et créer une nouvelle classe à partir de celui-ci. Maintenant, nous pouvons le nommer comme bon nous semble. Nous avons deux boutons avec les mêmes propriétés, mais des classes différentes. Ainsi, lorsque nous modifierons l'un, les modifications n' affecteront pas l'autre. Ou pour toute modification que nous devons apporter à l'élément, nous devons lui donner une classe. Nous ne l'avons pas fait jusqu'à présent car Webflow le fait automatiquement pour nous Si vous sélectionnez un élément que nous avons déjà modifié, vous verrez qu'une sorte de classe lui est appliquée. Si vous supprimez un nouvel élément, ce n'est pas le cas. Le sélecteur est vide. Dès que vous stylisez un élément, Webflow génère automatiquement un nom de classe pour nous Vous ne pouvez pas styliser un élément sans qu'une classe ne lui soit appliquée. Lorsque vous regardez le navigateur, vous verrez que les éléments sont nommés fonction de leur classe Changeons le nom de notre bloc div qui contient tout notre contenu. Notre boîte bleue est en réalité une section de héros qui contient tout ce qui se trouve dans cette section. Donnons-lui donc un peu de respect et nommons-lui un nom plus approprié, comme Hero Section. Bien, revenons à notre bouton Ghost. Maintenant que nous avons une classe différente, nous pouvons la styliser comme nous le voulons. Le bouton Ghost est fait du même matériau, mais le fond de fond est transparent et comporte des bordures. Vous pouvez également le faire en diminuant le curseur d' opacité, même résultat Il a complètement disparu de la page, mais le texte est toujours là Il est invisible car il est de la même couleur que notre arrière-plan. Changeons le texte en blanc. Et maintenant, ajoutons des bordures. Nous pouvons le faire directement sous la section frontière. Il est écrit zéro pixel. Si nous l'augmentons à un pixel, la bordure s'affichera, puis nous pourrons changer de couleur en blanc. Cela semble compliqué au début, mais c'est assez simple. Le style indique le type de bordure que nous voulons utiliser, ligne continue, tirets ou points Et ces carrés indiquent de quel côté on ajoute la bordure. heure actuelle, le carré du milieu est sélectionné, ce qui signifie que nous ajoutons les quatre côtés. Si nous sélectionnons le carré supérieur, nous ne pouvons modifier que la bordure supérieure. Enfin, il faut ajouter de l'espace entre deux boutons. À votre avis, que devrions-nous utiliser pour les marges ou le rembourrage ? Question astucieuse. Nous ne pouvons pas utiliser de rembourrage. Le rembourrage ne fait qu'ajouter de l'espace à l'intérieur de la boîte. Mesurez l'espace dans Figma. Nous utilisons un espace de 30 pixels, nous devons donc ajouter une marge gauche de 30 pixels sur le bouton Ghost ou une marge droite de 30 pixels sur le premier bouton. C'est bon, tout va bien. Pour récapituler dans cette leçon, nous avons appris à utiliser les classes CSS qui, dans Webflow, sont gérées via le panneau Styles Nous apprenons comment créer de nouvelles classes, comment Webflow crée automatiquement des classes pour nous et comment dupliquer des classes afin de pouvoir réutiliser les éléments existants sur notre page 70. Webflow : images: Dans cette vidéo, nous allons ajouter l' image de notre héros à notre page. Nous allons apprendre comment exporter des images depuis Figma, comment les importer dans Webflow et comment travailler avec des images dans Tout d'abord, exportons notre photo de héros depuis Figma. Dans Figma, nous avons créé ce graphique de héros avec plusieurs éléments différents Nous pourrions les exporter sous forme d'images indépendantes, mais ce serait un travail inutile et assez fastidieux à recréer dans Nous allons plutôt l' exporter sous forme d'image unique. De cette façon, vous gagnerez du temps et vous assurerez qu'il ressemble exactement à ce que nous avons conçu. Pour exporter quoi que ce soit depuis Figma, sélectionnez l'élément, puis dans le panneau des propriétés, cliquez sur l'icône Plus dans la section Exporter Et pour exporter plusieurs éléments en une seule image, il faut d'abord les regrouper. Sélectionnez tout, cliquez avec le bouton droit de la souris et appuyez sur la sélection du groupe ou utilisez le raccourci. Sélectionnez ensuite le groupe nouvellement créé et cliquez sur l'icône représentant un signe plus dans les paramètres d'exportation. Passons en revue ces différents paramètres d'exportation. Les résolutions d'écran se sont considérablement améliorées au fil des ans. Tablettes, smartphones, derniers ordinateurs portables haut de gamme comme le MacBook, ils utilisent des écrans à haute résolution, également appelés écran Retina Un DPI élevé signifie un nombre élevé de points par pouce, et leur densité de pixels est généralement deux fois supérieure à celle des écrans d'ordinateurs portables et de bureau courants. Cela rend les choses beaucoup plus nettes et nettes, sorte que vous n'avez pas ces bords pixelisés sur du texte plus petit ou sur les bords de l'image Pour optimiser nos images pour de tels écrans, on parle communément d'optimisation de la rétine. Nous devons doubler la taille réelle de notre image. Donc, à partir de cette option déroulante, nous sélectionnerons deux X. Et nous avons plusieurs formats de fichiers. format d'image idéal pour le Web est le SVG, car ils sont vectoriels, ont des tailles de fichier plus petites et peuvent être agrandis à l'infini sans perte Mais malheureusement, ils ne fonctionnent pas sur des images contenant de la photographie. En gros, tout ce qui est basé sur les pixels. Je n'expliquerai pas la différence entre les images basées sur les pixels et les images vectorielles. En bref, les formats de fichiers PNG et JPG sont basés sur les pixels et les SVG sont basés sur des vecteurs Comme nous utilisons la photographie, nous devons exporter au format PNG ou JPG. PNG et le JPG ou le JPAC présentent deux différences principales entre eux. Le premier est la taille. Les images JPEG sont généralement plus petites que images PNG ou en raison de la compression plus élevée, mais les images JAC peuvent avoir un arrière-plan transparent. Les PNG le peuvent Dans notre cas, nous devons donc exporter un PNG ou un JPAC et y inclure le fond bleu Si nous n'incluons pas ce fond bleu, il remplira automatiquement l'espace de blanc, et cela ne fonctionnera pas pour notre image. Idéalement, nous opterions pour le JPAC car la taille du fichier est plus petite et c'est vraiment important Pourquoi ? Parce que personne n' aime un site web lent. Et les images contenant des fichiers de grande taille sont un moyen de ralentir le temps de chargement d'un site Web. Mais si nous optons pour le JPAC, nous devons inclure un fond bleu, ce qui peut poser quelques problèmes Parfois, les couleurs des images exportées ne correspondent pas à 100 % aux couleurs du Web. Et nous avons besoin que ce fond bleu corresponde à 100 % au bleu de la section dans Webflow Si la transition ne se fait pas en douceur, les bords de l' image seront visibles. Je l'ai déjà testé sur cette image, et malheureusement, cela ne correspond pas. Les couleurs blanc et noir sont faciles. Elles correspondent toujours, mais les autres couleurs ne le sont pas autant. nous reste donc qu'une seule option , le PNG. Exportons. Très bien, importons notre PNG dans Webflow. Comme pour tout ce qui concerne Webflow, nous ajoutons de nouveaux éléments depuis le panneau Eléments Déposez l'image n'importe où pour le moment. Nous allons structurer la mise en page plus tard. Pour télécharger une image, double-cliquez sur l'image ou cliquez sur les paramètres ici. Cela ouvrira le panneau Actifs. Le panneau Ressources est l' endroit où Webflow enregistre toutes les images et tous les documents que vous téléchargez sur votre site Web Vous vous souvenez comment nous avons exporté cette image au format deux fois plus grand ? Nous pouvons dire à Webflow que cette image est deux fois plus grande et qu'elle est conçue pour une résolution élevée. Cela le réduira de moitié, comme c'est le cas sur nos designs. Chaque fois que vous téléchargez un très gros fichier image, Webflow affiche un signe d' avertissement à cet endroit, car les fichiers image volumineux ralentissent le chargement de votre site Le fichier image fait actuellement plus d'un mégaoctet, ce qui est assez Pour les utilisateurs dont Internet est plus lent, le chargement de l'image peut même prendre quelques secondes, et d'ici là, ils devront regarder un écran vide Heureusement, nous pouvons réduire considérablement la taille de ce fichier à l'aide de l'outil de compression d'image de Webflow. Accédez au panneau d'accès, survolez l'image et cliquez sur le menu déroulant Autres options Cliquez ensuite sur Compresser. Obtenez quelques formats de fichiers dans lesquels vous pouvez les convertir. L'AVF fera un très bon travail dans la plupart des cas, et vous pouvez en rester là Cela réduit la taille du fichier mieux que sur le Web P. Cependant, rares cas, en fonction de l' image, AVF peut nuire à la qualité Donc, si vous remarquez que la qualité est plutôt mauvaise, essayez avec l'option Web P. Mais vous allez devoir refaire le processus, supprimer l'image, la télécharger à nouveau, puis choisir le nouveau format de fichier. Cliquez à nouveau sur Compresser. Cela prendra un certain temps et vous recevrez cette notification indiquant que l'image a été compressée et convertie dans un nouveau format de fichier. Vous pouvez voir dans quelle mesure la taille du fichier a été réduite. Il est passé de plus de 1 mégaoctet à moins de 70 kilo-octets. Ce processus de compression, vous allez le faire avec chaque image, sauf si elle est déjà très petite, comme moins de 100 kilo-octets Mais vous n'êtes pas obligé de le faire une par une Une fois que vous avez toutes vos images dedans, vous pouvez agrandir le panneau Ressources et sélectionner plusieurs images pour les compresser toutes en une seule fois. Donc, pour les autres images, nous allons simplement attendre d'en avoir fini avec le site et les compresser toutes avant de publier le site. C'est tout pour le moment. Nous allons arranger l'image dans la prochaine leçon. Récapitulons donc. Pour ajouter des images à Webflow, nous devons d'abord les exporter depuis Figma à l'aide des paramètres d'exportation Les images créées à partir de plusieurs objets différents doivent d'abord être groupées. L'ajout d'images dans Webflow se fait en ajoutant d'abord l'élément image au canevas, puis en téléchargeant une image via le panneau Ressources Pour que notre site Web reste rapide, nous devons être attentifs à la taille de notre fichier image. 71. Webflow : propriété d'affichage: OK, alors comment placer cette image du bon côté ? Nous ne pouvons pas simplement le faire glisser comme nous le faisons dans Figma. Nous ne pouvons pas non plus l'aligner vers la droite. Souvenez-vous de ce que je vous ai déjà dit, si vous êtes bloqué et que vous essayez de trouver comment faire fonctionner les choses dans Webflow, l'indice est probablement une autre boîte Jetons un coup d'œil à notre mise en page. Nous avons une section consacrée aux héros. À l'intérieur, nous avons un contenant qui contient tout le contenu. Dans ce conteneur, nous avons des éléments que nous voulons disposer sur la gauche et une image que nous voulons disposer sur la droite. Nous devons donc d'une manière ou d'une autre diviser ce contenant en deux moitiés, la moitié gauche et la moitié droite et les placer l'une à côté de l'autre. Nous pouvons le faire en utilisant le bloc div. Nous pouvons mettre deux blocs div dans ce conteneur, puis mettre le contenu en conséquence. Attention, Webflow ajoutera nouveaux éléments dans votre sélection Après avoir ajouté un nouveau bloc div, il l'a sélectionné et le deuxième bloc div a été déposé à l'intérieur. Il suffit de le faire glisser depuis ce panneau de navigation. Maintenant, faites glisser l'image dans un bloc div et tout le reste dans l'autre bloc div. Et nommons ces blocs de jours en conséquence, à gauche et à droite. Là-bas. La structure est maintenant sur la bonne voie. Nous devons maintenant trouver comment les faire asseoir l'un à côté de l'autre plutôt que l'un sur l'autre. Il existe plusieurs façons de le faire de la meilleure façon possible. La méthode la meilleure et la plus acceptée pour organiser cela serait la fonctionnalité CSS appelée flexbox, que vous pouvez appliquer dans les paramètres d'affichage Passons en revue chacun de ces paramètres d'affichage et voyons comment ils se comportent. Par défaut, la plupart des éléments sont dotés de paramètres d'affichage définis pour bloquer. Bloquez les éléments, ils s'étendent d'un bord à autre et rien ne peut être placé à côté d'eux. Ils repousseront l' élément suivant sur la deuxième ligne. Ils le feront même si nous définissons une largeur plus petite et qu'il y a de la place pour d'autres éléments sur cette même ligne. Ensuite, nous avons le bloc en ligne. Les éléments des blocs intégrés sont aussi larges que le contenu qu'ils contiennent. Ils libèrent de l'espace restant, qui peut être occupé par d'autres éléments N'oubliez pas que lorsque nous avons dupliqué le bouton dans une leçon précédente, les boutons de Webflow sont définis par défaut sur un bloc intégré Ils n'occupent que l'espace de leur contenu. Donc, si vous assemblez deux blocs en ligne et qu'il y a de la place, ils seront placés l'un à côté de l'autre Ici, si nous réglons l' affichage sur un bloc intégré, rien ne se passe car le contenu, dans ce cas, est un texte fluide qui rendra la boîte aussi large que possible Mais si nous supprimons certains de ces textes, nous verrons que le cadre de sélection se rétrécit Cependant, sur un élément de bloc situé en dessous, cela ne se produit pas. Même si nous supprimons le texte, le cadre de délimitation occupe toujours toute la largeur de son parent Maintenant, j'ai dit que les éléments d'un bloc intégré libèrent de l'espace pour d'autres éléments à côté Alors comment se fait-il que le deuxième paragraphe n'ait pas sauté au-dessus ? Parce que le deuxième paragraphe est configuré pour bloquer, les éléments du bloc sont gourmands et qu'ils veulent occuper un étage entier rien que pour eux Mais si nous définissons également le deuxième paragraphe en bloc intégré, il ne s'affiche toujours pas Pourquoi ? Ils le veulent, mais il n'y a pas assez de place pour eux deux. Si nous raccourcissons le texte sur l'un d'entre eux, il y aura suffisamment d'espace et le deuxième bloc se déplacera vers l'étage supérieur. Cela se produira également si vous réduisez manuellement la largeur de l'un d'entre eux en appliquant une largeur fixe. Le troisième paramètre d'affichage est en ligne, pas de blocage. L'inline est la façon dont le texte se comporte à l'intérieur d'un élément. Il s'écoule comme des textes, les uns à côté des autres. Il n'a pas de valeurs de largeur et de taille. Il les ignorera même si vous le dites. n'est pas très utile affichage en ligne n'est pas très utile en dehors du texte, c'est donc en Ensuite, nous avons display none, qui masque l'élément. Ce n'est pas seulement invisible, mais cela n' affecte pas non plus la mise en page. Ce n'est pas transparent. Nous disons simplement au navigateur de ne pas le rendre et de l'ignorer complètement. Bien qu'il ne disparaisse pas complètement de notre site Web, il se trouve toujours dans le panneau de navigation. S'il était transparent, il occuperait toujours l'espace. Vous vous demandez peut-être à quoi en afficher aucun, mais il y en a beaucoup et nous y reviendrons. Ce n'est pas un affichage. Ensuite, nous avons une grille d'affichage. La grille CSS fait quelque chose qui n' était pas possible auparavant. Avoir un arrangement semblable à un tableau dans lequel vous pouvez déplacer des éléments comme vous le souhaitez avec une grande flexibilité et la possibilité d' avoir une disposition complètement différente entre les différents appareils. Nous n'allons pas passer par des tenants et des aboutissants du réseau en ce moment parce que nous n'en aurons pas autant besoin. Nous utiliserons plutôt la mise en page flexible, que nous aborderons dans la vidéo suivante. 72. avec Flexbox: En continuant là où nous nous sommes arrêtés dans cette vidéo, nous parlerons de flexbox et de la manière l'appliquer à la mise en page de notre section héros Flexbox est un moyen d'organiser et de distribuer le contenu à l'intérieur de cette boîte. Les paramètres flex affectent uniquement les enfants de ce bloc D et non le déblocage lui-même. Donc, dans notre cas, ces paragraphes, le conteneur lui-même n'est pas affecté Dès que vous sélectionnez la mise en page flexible, les nouvelles options s' affichent. C'est ainsi que nous distribuons les enfants à l'intérieur de la flexbox. Permettez-moi de vous montrer comment Flexbox peut distribuer son élément enfant Nous pouvons aligner les éléments à l'intérieur la boîte flexible à l'aide de cette boîte d'alignement. Les commandes sont assez intuitives. Il s'agit d'une grille de trois par trois représentant la boîte flexible. Nous avons trois options pour l'alignement supérieur, gauche, au centre et à droite. Nous avons trois options pour l'alignement inférieur, gauche, centre et droite, et nous avons trois options pour l'alignement central. Les alignements de base sont très simples car ils sont intuitifs La zone de ligne vous donne une représentation visuelle de ce qui va se passer. Des options peu intuitives se cachent sous ces deux menus déroulants. Pour l'alignement de l'axe Y, nous avons deux autres options : étirement et ligne de base. Le stretch est exactement ce qu'il dit. Étire les enfants flexibles pour occuper tout l' espace vertical de la boîte flexible. Si vous augmentez ou diminuez la hauteur de la boîte flexible, les boîtes se rétréciront et grandiront avec elle Il s'agit en fait du paramètre d'alignement par défaut de Flexbox. Vous pouvez le voir lorsque je réinitialise les paramètres alignés à partir d'ici. Il est réglé sur la gauche et s'étire. Cliquez n'importe où sur cette case d'alignement pour supprimer le paramètre d'étirement et vous permettre d'aligner les éléments sans étirement. L'alignement de la ligne de base concerne un texte. Il s'agit d'une ligne invisible sur laquelle les caractères sont alignés. Je ne pense pas avoir déjà eu besoin de cet alignement, vous pouvez donc l'ignorer pour la plupart. Sous le menu déroulant de l'axe X, nous avons deux autres options, l'espace entre les deux et l'espace autour. Voici les options de distribution dans Figma. Il répartit les enfants de manière uniforme. Première option, l'espace entre les deux permet de placer le premier et le dernier enfant même niveau que les bords de la boîte flexible Eh bien, dans mon cas, ce n'est pas vraiment plat parce que j'ai un rembourrage et une marge appliqués aux éléments Si je m'en débarrasse, il y aura une chasse d' La deuxième option, l'espace autour, est légèrement différente. Il répartit toujours les enfants de manière égale, mais il le fait en ajoutant espacement uniforme sur les côtés de chaque enfant, y compris sur le premier et le dernier enfant La première option est beaucoup plus utile et pratique. Celui-ci, pas tant que ça. J'ai rarement besoin de l'utiliser, vous pouvez donc vous concentrer sur la compréhension de l' espace entre les options. D'ailleurs, ces menus déroulants X et Y sont les commandes réelles de la flexbox. La boîte de ligne n'est qu' un guide visuel. liste déroulante X vous permet de contrôler la façon dont vous souhaitez aligner et répartir les enfants sur l'axe X. s'agit d'un axe horizontal et il en va de même pour l'axe Y, qui est l'axe vertical. La case d'alignement se verrouille un mode différent si vous sélectionnez les options d'étirement ou d'espacement entre les options, comme c'est le cas actuellement , car j'ai sélectionné de l'espace autour. La case d'alignement me permet uniquement de modifier l'alignement sur l'axe Y. Pour revenir à la normale, vous pouvez simplement rétablir l'alignement en X sur l'un des alignements standard Il en va de même pour le stretch. , il ne vous reste que des options d' alignement horizontal cas, il ne vous reste que des options d' alignement horizontal. Supprimez simplement l'étirement en revenant à un autre alignement standard et la case d'alignement fonctionnera à nouveau normalement. Par défaut, les enfants sont répartis horizontalement , de gauche à droite, mais nous avons la possibilité de passer à la verticale comme vous vous en doutez. Ils travaillent de la même manière, mais dans une direction différente. Mais vous remarquerez que l'alignement ne change pas sur l'axe Y. Le haut, le centre et le bas nous donnent tous le même résultat. C'est parce qu'il n'y a pas de place supplémentaire à l'intérieur de la flexbox. Les enfants occupent toute la hauteur disponible. La hauteur minimale que j'ai donnée à la flexbox ne laisse aucune place supplémentaire La taille des enfants prise ensemble est bien plus que cela. La flexbox finit par s'étirer avec les enfants Mais si j'augmente la hauteur de la boîte flexible pour laisser plus d'espace vide, vous verrez que la boîte d'alignement fonctionne exactement comme prévu Ce que j'aime dans le design web, c' est qu'il ressemble à un puzzle. Les choses se passent souvent bizarrement et vous essayez de comprendre pourquoi et de trouver une solution à votre C'est très satisfaisant quand vous résolvez le puzzle, mais c'est un gros casse-tête lorsque vous regardez l'écran essayez de comprendre ce qui se passe Très bien, fais attention à une chose. Avec une direction verticale, les options d'espacement et d' étirement ont désormais changé de place. L'étirement est désormais sous l'alignement X, et l'espace entre les deux est sous l'alignement Y. D'ailleurs, si vous ne comprenez pas la signification de chacune de ces options, simplement la souris dessus et lisez le texte explicatif ci-dessous Cela vous donnera une idée. Une autre option consiste également à trouver des explications dans la documentation de Webflows Ce que je fais habituellement, c'est que Google Webflow m'aide au nom d'un paramètre général, le premier résultat est la page concernant ce paramètre ou une page contenant une explication de ce paramètre quelque part en profondeur, que vous pouvez simplement trouver en effectuant une recherche dans la page en utilisant la Contrôle F. Par défaut, les enfants du lin essaieront de tenir sur une seule ligne dépassant le parent flexible si nécessaire Heureusement, flexbox dispose d'un autre paramètre qui nous aide à gérer de tels scénarios C'est ce qu'on appelle wrap et vous pouvez le trouver dans cette liste déroulante. L'emballage indique essentiellement aux enfants de passer à la ligne suivante s' il n'y a pas assez d'espace. Nous avons de nombreuses options différentes ici, mais il n'y en a généralement qu' une dont vous aurez besoin en fonction de votre orientation. Comme nous utilisons une direction horizontale et que les éléments sont répartis de gauche à droite, nous devons choisir l'une des options du groupe de gauche à droite. Et le meilleur moyen de savoir lequel vous avez besoin est regarder l'icône plutôt que le nom. L'icône en forme de flèche vous donne une meilleure représentation de ce qui va arriver aux enfants. Dans le cas du premier, les enfants partiront du haut, à gauche, et suivront un schéma en Z qui se répartira vers le bas et vers la droite. Vous pouvez voir cette action au fur et à mesure que j'y ajoute d'autres éléments. Dans le cas de la deuxième option, ils partiront du bas et se répartiront vers le haut et vers la droite, comme un Z inversé. La première option sera évidemment plus couramment utilisée, mais dans certains cas, vous devrez peut-être inverser le sens Maintenant, si nous avons une direction verticale, nous examinerons l'emballage de haut en bas. Mais rien ne se passe. Pourquoi est-ce le cas ? Parce qu'il n'est pas nécessaire d'emballer. L'encapsulage ne fonctionne que s' il est nécessaire de déplacer des éléments vers la colonne ou la ligne suivante. Comme notre boîte flexible n'a pas de hauteur fixe, elle continue de s' étendre en hauteur, de sorte qu' il n'est jamais nécessaire de l' emballer. Mais si nous lui donnons une hauteur au-delà de laquelle il ne pourra pas grandir, les enfants commenceront à s'enrouler. Sans emballage, cela se produirait. Ils vont simplement déborder à l'extérieur de la boîte flexible. Pour être honnête, ces options d'emballage peuvent être très confuses, alors ne vous sentez pas mal si vous n' arrivez pas à les comprendre. La meilleure façon de trouver le résultat dont vous avez besoin est simplement de jouer, de les sélectionner toutes, et l'une des options devrait être. C'est ce que je fais habituellement. Dans le menu déroulant de direction, avec toutes les options d'habillage, vous verrez deux options qui ne disent pas d'encapsulation, une ligne et une colonne unique Ces deux options inversent simplement la direction de nos enfants flexibles. Au lieu de la direction de gauche à droite, nous pouvons passer de droite à gauche. Et la deuxième option nous donne la possibilité d'inverser la direction verticalement. Si vous cliquez sur l'une des cases, vous verrez apparaître dans le panneau Propriétés des options spéciales pour le Flex Child. Cela nous permet de contrôler encore plus finement différents articles contenus dans la boîte flexible. Mais ne nous inquiétons pas des options Flexhild pour le moment. Flexbox peut être un peu difficile à comprendre en une seule fois. Donc, ne vous inquiétez pas si vous vous sentez un peu confus, si vous ne comprenez pas exactement ou si vous ne suivez pas toutes les options de mise en page que j'ai abordées en ce moment. Une fois que vous aurez commencé à l'intégrer et à jouer avec, vous vous y habituerez. Dans l'une des missions, j'ai ensuite intégré un jeu de flexbox, qui est une sorte de jeu de puzzle créé dans Webflow par l'équipe de Webflow C'est un excellent exercice de flexbox et un excellent moyen de pratiquer la flexbox et les différentes alignement Revenons à notre section consacrée aux héros et voyons comment nous pouvons utiliser Flexbox. Dans notre cas, c'est assez simple, en fait. Nous n'avons que deux blocs, à gauche et à droite. Nous pouvons appliquer une disposition flexible au conteneur. Mais n'oubliez pas que nous faisons de ce conteneur un conteneur standard sur toute notre page, même pour les articles non flexibles, afin de ne pas le gâcher. Nous pouvons simplement ajouter, oui, vous l'avez deviné, une autre case Déposez ces blocs gauche et droit à l'intérieur et appliquez-y une mise en page flexible. C'est dans la direction opposée. Nous pouvons bien sûr inverser cette tendance en utilisant l'option flexbox, mais nous devons plutôt les disposer correctement dans le navigateur Il suffit de faire glisser l'un sur l'autre. Nous avons maintenant notre option flex qui nous permet d'aligner ces blocs comme nous le souhaitons. La direction horizontale est exactement ce que nous voulons, donc nous la maintenons là, puis nous les alignons au centre et les poussons vers les bords pour avoir l'air parfait. Dans Figma, le contenu se situe un peu plus haut. Nous pouvons y parvenir en ajoutant une marge inférieure sur le bloc de gauche. Cela fera monter le contenu vers le haut. Vérifions-le sur un écran plus petit. Il y a deux choses qui ont besoin d'un peu de style. Tout d'abord, le contenu de gauche est un peu désordonné. Les boutons se sont tous foutus. C' est parce qu'il n'y a pas assez d'espace sur une ligne et que le deuxième bouton passe en dessous. Nous pouvons facilement résoudre ce problème en donnant au bloc de gauche une largeur minimale. , cela ne va pas se réduire au point où cela doit se produire. 400 pixels semble être une bonne idée. Maintenant, le bloc de gauche ne rétrécit pas au-delà de ce point. Et s'il n'y a pas assez d'espace, c'est l'image qui en pâtira. Le deuxième point est qu'ils sont un peu trop proches l'un de l'autre. Nous pouvons ajouter une marge supplémentaire dans le bloc de gauche pour repousser l'image. Ça a l'air plutôt bon. Les écrans des tablettes et des mobiles sont un peu plus désordonnés, mais nous nous en occuperons dans les leçons d'optimisation mobile Très bien, cela ressemble exactement à ce que nous voulons. Oui, les dimensions de l'image sont légèrement différentes de celles du design Figma, mais c'est normal Nous rendons les choses réactives afin qu'elles se rétrécissent et s'adaptent à la taille de l'écran Donc, pour récapituler, flexbox est ce qu'on dit, une boîte flexible. Il peut distribuer les éléments pour enfants dans le sens vertical ou horizontal. Une fois que vous avez défini la flexibilité d'affichage sur un élément, options d' alignement et de justification apparaissent. Trouver les bonnes options à partir d' ici est une question d'essais et d'erreurs Jouez simplement avec toutes les options jusqu'à ce que vous trouviez la mise en page qui vous convient. 73. Webflow vs tailles Figma: De nombreux étudiants se sont posé des questions sur les différences entre les tailles de Webflow de Figma et sur le lien entre la taille du canevas dans Webflow et la taille du cadre C'est en fait un très bon sujet et j'ai décidé de faire une leçon complète à ce sujet. Il y a ici plusieurs nuances que vous devez comprendre lorsque vous passez de Figma à Webflow Commençons par un concept appelé responsive design. Une section plus loin dans ce cours est consacrée au design réactif, et nous approfondirons ce sujet. Mais examinons les choses un peu, car sans cela, vous pourriez vous sentir un peu confus lors de la création de votre site Web. Tout site Web que nous créons sera consulté par les utilisateurs sur de nombreux appareils et écrans différents. visiterez donc votre site Web sur un MacBook air, certains sur un Lenovo ThinkPad, sur un PC de bureau personnalisé, sur un iPhone et sur des centaines d'autres appareils différents Tous ces appareils ont leurs propres tailles d'écran et résolutions. Un bon site Web devra tenir compte l'appareil de l' utilisateur, ajuster et répondre à cet appareil et sa taille d'écran respective afin fournir la meilleure version possible du site Web. C'est ce qu'on appelle le responsive design, et c'est exactement ainsi que nous allons créer notre site Web. Webflow vous facilite la tâche car il intègre une technologie de conception réactive Mais le design que nous avons créé dans Figma n'est pas du tout réactif Avant de concevoir notre page et Figma, nous avons choisi une taille de cadre particulière de 1 440 pixels et d' 1 440 pixels et Ce cadre est représentatif d'une résolution d'écran unique, un écran de cette taille exactement, estimé à environ 6 % de toutes les résolutions d' écran de bureau utilisées dans le monde entier. La hauteur n'est pas pertinente ici car contrairement à la largeur, la hauteur n'est pas fixe Nous l'augmentons à mesure que le contenu de la page Web augmente et sur un site Web réel représenté par un défilement de page. Vous avez peut-être deux questions valables. Comment pouvons-nous choisir cette taille de cadre particulière, qui n'est même pas si populaire ? Deuxième question, vous vous demandez peut-être : pourquoi n'avons-nous pas créé de design adaptatif dans FIGMA ? Permettez-moi de répondre d'abord à la deuxième question. Figma possède une balise réactive, comme la mise en page automatique, mais cette balise est loin des pouvoirs de réactivité réels qu'offre le Web Puisque nous sommes les développeurs de notre côté, nous pouvons tout aussi bien utiliser toute la puissance du responsive design et nous occuper de cette partie directement dans Webflow Nous devrions toujours le faire dans Webflow que nous utilisions Figma ou non, autant gagner Maintenant, répondons à la première question, pourquoi 1 440 pixels. résolutions des ordinateurs de bureau et portables varient entre 1 000 et 4 000 pixels de largeur C'est une gamme assez large. Vous pouvez voir sur cette image comment les tailles d'écran se comparent réellement les unes aux autres. Vous pouvez littéralement installer neuf écrans HD dans une résolution de quatre K. Par exemple, si vous travaillez sur un écran de 2 K et que vous décidez d'utiliser un Figma de taille d' image K correspondant, vous aurez beaucoup d' espace sur l'écran où vous pourrez créer votre design Vous pouvez mettre beaucoup plus de choses sur votre écran que quelqu'un qui utilise un petit netbook c. Un petit netbook couvre essentiellement une petite partie de votre cadre à deux K. Finissez facilement par mettre trop d'éléments ou de détails dans votre design qui ne rentreront tout simplement pas sur un écran plus petit. Cela vous compliquera la vie au fil du temps lors du réglage de la réactivité dans Webflow Quelle est la bonne taille de cadre alors ? La plupart des écrans de ceux des ordinateurs portables ou de bureau se situent quelque part entre cette fourchette. Les écrans à deux K et à quatre K sont assez rares et les utilisateurs de ces écrans n'utilisent généralement pas le navigateur en mode plein écran, car ce serait le but d'avoir un très grand écran lequel vous pouvez placer de nombreux éléments sur votre écran. Ensuite, nous concevons pour une plage d' environ 1 000 à 2 000 pixels. Choisir un écran au milieu de cette plage est la meilleure approche, Choisir un écran au milieu de cette plage est car la taille moyenne sera la plus facile à ajuster pour les grands écrans et à ajuster à la baisse pour les écrans plus petits. taille d'image Figma de 1 400 pixels est un bon candidat à cette fin, car elle se situe tout à fait au milieu Votre confort en tant que designer est également important. Vous pouvez donc choisir une taille d'image adaptée à la résolution de votre écran. Ainsi, lorsque vous utiliserez Figma, vous pourrez prévisualiser votre site Web tel qu'il apparaîtrait sur votre écran Donc, si la résolution de votre écran est un bon représentant d'une moyenne de 1280-1600, hésitez pas à l'utiliser pour la taille d'image de votre prochain Vous pouvez connaître la résolution de votre écran simplement en recherchant sur Google quelle est ma résolution d'écran et en consultant l'un des premiers sites Web Vous pouvez également voir la largeur de votre écran en accédant au mode d'aperçu dans Webflow et en vérifiant ce chiffre ici Il s'agit de la largeur du canevas visible. Lorsque votre navigateur est en pleine largeur, la résolution sera identique à la résolution réelle de votre écran. Mon écran, par exemple, a en fait une largeur de 14 à 40 pixels. C'est juste une heureuse coïncidence. Mais il n'est pas vraiment nécessaire de faire correspondre la taille du cadre dans Figma à la taille du canevas Webflow Tout ce que nous avons fait dans Figma n'est qu'une maquette d'un seul écran. Dans Webflow, nous créons un site Web fluide et réactif qui rétrécira et grandira en fonction de la taille de l'écran. Avec cette version de 14 à 40 pixels, nous construisons également des versions 12, 80, 1920 , 320 pixels et tout le reste. C'est un site Web qui se rétrécit et grandit comme un accordéon N'essayez pas de faire correspondre votre maquette Figma avec une précision de 100 %. Seule la même taille de toile peut ressembler à 100 % à vos créations. En dehors de cela, nous devrons nous adapter à la réalité d'un écran en particulier. Comme vous pouvez le constater, la largeur du canevas ou de l'écran visible change entre le mode d'aperçu et le concepteur. À l'intérieur du designer, mon 14 40 ne fait plus que 992 pixels maintenant. C'est naturel, car le mode concepteur comporte des panneaux latéraux qui occupent l'espace disponible à l'écran. Webflow permet de modifier cette largeur, voire de la transformer en largeur d' écran d'origine. Si je veux garder à l'esprit que l' augmentation de la largeur du canevas ne fournit pas une vue totalement réaliste, Webflow ne peut pas ajouter de pixels supplémentaires à mon Il s'agit plutôt d'un zoom arrière et d'une modification de l'échelle pour donner l'impression d'un écran plus grand Cela fait que chaque élément n' est pas fidèle à sa taille réelle. Il s'agit tout de même d'un aperçu utile car vous pouvez voir comment les éléments interagissent les uns avec autres et détecter les problèmes de mise en page. C'est comme si vous regardiez un écran de 1 400 pixels mais que vous vous trouviez un peu loin de celui-ci, tout le reste correspond à la réalité Le rétrécissement, en revanche, permet d'obtenir des tailles réelles car l' échelle reste à 100 % Ces icônes représentent ce que l'on appelle les points d'arrêt des appareils En fait, ils ne sont pas juste pour le spectacle. Ils peuvent adopter des règles personnalisées, des règles spécifiques à chaque point d'arrêt de l'appareil Mais pas besoin de s'inquiéter à ce sujet pour le moment. Nous les aborderons plus en détail plus tard dans la section réactive. Pour l'instant, tout ce que vous devez savoir, c'est que vous travaillez sur le point d'arrêt de base du bureau, celui avec une icône en forme d'étoile dessus C'est là que vous devez rester pendant cette étape et vérifier que vos conceptions se situent dans la plage de points d'arrêt du bureau, qui est de 992 pixels et En mode aperçu, vous pouvez redimensionner le canevas jusqu'à 992 pixels et jusqu' à 1 900 pixels pour voir à quoi il ressemble dans cette plage et vous assurer qu'il n'y a aucun problème de mise en page inattendu Tout cela constitue notre point de rupture unique pour les ordinateurs de bureau et chaque modification que nous apportons à 992 ou 1 900 s'applique simultanément aux Notre conception doit bien fonctionner pour les deux. Vous n'avez pas besoin de vérifier le côté des petits appareils, car nous le ferons dans la section suivante. Tout d'abord, nous allons tout intégrer dans le point d'arrêt du bureau et lui donner une apparence adaptée aux différentes tailles d'écran de bureau Dans la section de conception réactive, nous allons revoir notre page une fois de plus et apporter des modifications et des ajustements pour que tout soit beau pour toutes les petites tailles d'écran. N'ajoutez pas non plus ces points d'arrêt plus importants. Nous n'en avons pas vraiment besoin. Le design que nous avons créé utilise un conteneur d' une largeur maximale de 1 160 pixels. Aucun de nos contenus ne dépasse cette limite, Aucun de nos contenus ne dépasse à l'exception des couleurs d' arrière-plan des sections Les tailles réelles des éléments entre Figma et Webflow doivent correspondre Tant que vous regardez un état de zoom de 100 % dans Figma, application de cette même taille dans Webflow devrait vous donner plus ou moins la même Par exemple, une taille de téléphone de 75 pixels dans Figma devrait avoir la même apparence lorsqu'elle est appliquée dans Webflow Encore une fois, lorsque vous regardez un état de zoom à 100 %, quelle que soit la taille de l' image dans Figma ou Webflow, condition que l'échelle soit de 100 % dans les Le Webflow est que la taille du canevas modifiera toutes les autres choses. Ne vous attendez pas à ce que l'image du héros soit la même taille sur un écran de 992 pixels celle de Figma, car cette toile ne laisse pas assez d'espace pour adapter l'image à ses dimensions d'origine L'image sonne parce que l'image possède une propriété spéciale qui la fait rétrécir lorsqu'il n' y a pas assez d'espace. La taille de la police, par exemple, diminuera, mais la longueur du texte diminuera lorsqu' il n'y a pas d'espace. C'est ça. Telles sont les principales nuances de taille d' écran entre Figma et Webflow Si vous avez encore des doutes, faites-le moi savoir dans les questions-réponses. 74. Webflow : Navbar (application de chat): Dans cette vidéo, nous allons ajouter une barre de navigation à notre page. Webflow possède un élément de barre de navigation par défaut appelé barre de navigation, que nous pouvons ajouter depuis le panneau des éléments, faisant glisser vers le haut pour le placer en haut de la section héros La barre de navigation contient déjà des éléments. Voyons exactement de quoi est faite cette barre de navigation. Donc, à l'intérieur de l' élément parent de la barre de navigation, nous avons un conteneur. Ce conteneur est similaire à ce que nous avons fait avec contenu de notre héros centré au milieu avec une largeur maximale, sorte que les éléments sont joliment emballés à l'intérieur. Ensuite, à l'intérieur, nous avons trois autres éléments qui, encore une fois, sont des boîtes. Tout d'abord, la marque se trouve sur la gauche. C'est là que nous avons placé le logo. C'est dans la navigation que se situent ces trois fuites de navigation. Comme la plupart des autres choses, il ne s'agit que d'un bloc div normal, mais certains styles par défaut lui sont déjà appliqués. Nous pouvons changer ces cadrans si nous le voulons. Et troisièmement, nous avons un bouton de menu, mais il est invisible. Vous pouvez voir ici qu'aucun affichage n'est appliqué à cet élément, il est donc masqué. Le bouton de menu est invisible uniquement sur le bureau. Sur d'autres appareils, c'est visible, et vous pouvez comprendre pourquoi. Il s'agit d'une icône de hamburger qui affiche les liens de navigation cachés, vous connaissez probablement car c'est ce que proposent la plupart des sites Web Il est difficile d'installer des liens de navigation sur les appareils mobiles. Nous utilisons ce menu de navigation masqué et l'icône Hamburger qui contient ces liens barre de navigation agit comme n'importe quel autre élément HTML dans Webflow, mais elle possède également des options supplémentaires dans les paramètres Il existe une option permettant d' ouvrir et de fermer le menu. Le menu est essentiellement ce qui est caché dans les appareils mobiles. Dans la version de bureau, cela ne fait rien car le menu est visible à tout moment. Il existe trois types de menus ici : le menu déroulant, qui est le menu par défaut, droite et le menu de gauche. J'utilise principalement l'option déroulante par défaut. En dessous, il existe des options d'assouplissement. Cela concerne l'animation. L'assouplissement est une animation qui démarre lentement puis s'accélère. C'est ainsi que sont définies la plupart des animations sur le Web. Mais nous en parlerons plus loin dans la section entière consacrée aux interactions et aux animations. Je laisse tous ces paramètres par défaut. La seule chose que j'utilise ici est le menu ouvert et fermé, ce qui me permet de styliser visuellement le menu. Un autre paramètre utile ici peut être les options d'affichage du menu. Avec ce curseur, nous pouvons définir sur quels appareils il doit y avoir un menu déroulant et sur quels appareils laisser liens de navigation réguliers, comme sur la version de bureau Par exemple, si vous déplacez le curseur vers la droite, cela le désactivera des tablettes Cela signifie que sur les tablettes, nous verrons les liens habituels, et sur les plus petits, nous verrons le menu Hamburger Maintenant, adaptons la barre de navigation à notre design. Tout d'abord, le contexte. C'est très simple. Réglez-le simplement sur bleu à partir de la propriété d'arrière-plan. Vous remarquerez que le contenu de la barre de navigation ne s'étend que jusqu'à un certain point C'est parce que le contenu se trouve à l'intérieur du contenant, et ce n'est pas le contenant que nous avons fabriqué. Il s'agit d'un conteneur par défaut de Webflow qui n'est pas aussi large que le nôtre. Nous ne voulons pas de ce conteneur. Nous voulons plutôt utiliser le conteneur que nous avons déjà créé, comme celui dans lequel se trouve le contenu de notre héros. Alors, comment pouvons-nous utiliser notre conteneur à la place ? Tout comme la façon dont nous réutilisons n'importe quel autre élément en appliquant la même classe. Et vous verrez comment le conteneur change instantanément de largeur. Il s'agit de la classe que nous avons créée et que nous avons donnée à ce conteneur que nous avions précédemment stylisé Et si nous appliquons cela à ce conteneur de barre de navigation, tous ces styles et propriétés seront transférés dans ce conteneur de barre de navigation Tout comme nous l'avons fait avec les boutons, si nous décidons de modifier la largeur de notre conteneur par défaut à un endroit, il sera instantanément mis à jour à tous les autres endroits, comme par magie. Ensuite, nous devons insérer notre logo. Tout comme nous l'avons fait avec l'image du héros, nous allons exporter le logo et le déposer en tant qu'élément d'image. Contrairement à notre image de héros, cette fois, nous allons sélectionner SVG Pourquoi ? Parce que nous avons créé notre logo nous-mêmes dans Figma C'est une taxe normale en ce moment. Si nous l'exportons au format SPG, nous conserverons ses qualités vectorielles Il sera immédiatement optimisé pour la rétine. Il s'étirera à l'infini sans perte de qualité et la taille du fichier sera très petite Dans la plupart des cas, les fichiers SVG seront plus petits que les fichiers PNG et JPEG. Bien, une fois l'image exportée, ajoutez un nouvel élément d'image et téléchargez le logo comme nous l'avons fait la dernière fois. J'ai sélectionné des éléments de marque. Ainsi, lorsque je clique sur l'image, elle apparaît automatiquement dans cette case de marque. Mais le logo est collé sur le dessus. Comment résoudre ce problème ? Il existe de nombreuses façons d'en faire une ligne au centre. Le plus simple est probablement d' ajouter une marge supérieure à l'image elle-même. Nous allons maintenant styliser les liens de navigation. Nous allons le faire comme n'importe quoi d'autre. Mais d'abord, nous allons supprimer tous les autres liens nab et n'en conserver qu'un Nous allons lui appliquer un certain style afin que Webflow crée automatiquement une classe Nous pouvons maintenant dupliquer ce lien nab autant de fois que nous le voulons Et lorsque nous modifierons l'un d'entre eux, ils seront tous mis à jour instantanément. Vive le CSS. Nous allons donc appliquer les textiles appropriés, assez simplement. Et appliquez un espacement adapté à nos designs. Nous pouvons également mesurer l'espacement Figma et reproduire les espaces exacts ici L'espace sur le dessus de Figma est de 42 pixels, et sur le côté, il est de 30 Dans Webflow, nous utiliserons le rembourrage pour cela. Nous pourrions utiliser des bargins mais par défaut, il y a déjà du rembourrage et c'est plutôt sympa comme ça Sur le côté, nous utiliserons 15 pixels de chaque côté. De cette façon, le remplissage de deux liens voisins atteindra un total de 30 pixels En utilisant le rembourrage, le lien entier s'agrandira, de sorte que les utilisateurs pourront cliquer non seulement sur le texte, mais aussi sur l'ensemble de la boîte Vous verrez que le lien est cliquable même sur l'espace vide car ce n'est pas un espace vide, le tout est le lien lui-même. Enfin, ajoutons ce bouton. Cependant, au lieu d' utiliser un élément de bouton, je vais simplement créer un bouton à partir de l'un de ces liens de navigation. Dupliquez la classe afin que nous puissions apporter nouvelles modifications sans affecter les autres liens de navigation. Voyons maintenant quelles sont les propriétés de notre bouton dans Figma. Le textile est le même que les liens de navigation. Le fond est blanc, mais avec une opacité de 20 % et un rembourrage autour des taxes, 12 pixels en haut et en bas et 24 sur les côtés Nous allons recréer tout cela dans Webflow. Dans le sélecteur de couleurs Webflow, vous pouvez appliquer une opacité de 20 % à partir de cette zone nommée A pour valeur Alpha Je ne sais pas pourquoi Alpha et pourquoi pas O pour opacité. Cela a quelque chose à voir avec notre système de couleurs RGBA, mais qui s'en soucie Notre rembourrage est différent de celui de nos liens de navigation. Et nous avons des coins arrondis que nous pouvons placer dans la section de bordure. n'y a pas de valeur exacte ici, augmentez-la jusqu'à ce qu' elle cesse d'être arrondie Pas de problème si tu le repasses. C'est bon. À l'intérieur de Figma, nous pouvons voir qu'il a une marge de 30 pixels sur le dessus Et pour la marge de gauche, nous allons utiliser 15, car elle s'ajoutera à une marge de 15 % existante provenant du lien de navigation situé à côté. En raison du nouvel espacement, le logo est hors ligne, comme vous pouvez le constater Nous allons devoir aligner le logo au milieu avec le menu de navigation. Il va falloir l'aligner à l'œil nu. Enfin, vérifions-nous la fluidité et la réactivité de notre barre de navigation Comme vous pouvez le constater, ils sont pressés sur les bords, mais c'est parce que nous n' avons pas d'espacement supplémentaire La section Hero est parfaite car elle est rembourrée sur les côtés. Ainsi, lorsque la fenêtre du navigateur se rétrécit et que le conteneur se rétrécit avec elle, le rembourrage l'empêche d'être comprimée jusqu' aux bords Nous pouvons également appliquer le même rembourrage à notre barre de navigation. Et voilà, ça a l'air bien. C'est presque terminé. manque une petite mais importante chose : les effets de survol Aucun des liens ou boutons réagit lorsque je passe la souris dessus. Nous allons apprendre comment ajouter des effets de survol dans la prochaine leçon Bien, pour récapituler, nous apprenons comment ajouter une barre de navigation, l'anatomie de la barre de navigation, sa composition, les paramètres d' une barre de sortie et son fonctionnement sur les petits appareils Nous apprenons comment ajouter un logo dans une barre externe et comment styliser les liens dans le menu de navigation. 75. Webflow : liste de contrôle du débogage: Bien, que se passe-t-il si vous rencontrez un problème dans Webflow ? C'est le sujet de cette vidéo. Vous n'avez pas vraiment besoin de regarder cette vidéo correctement. Maintenant, c'est un tutoriel au cas où vous rencontreriez un problème. Parfois, je t'envoie voir cette vidéo. Lorsque vous publierez vos problèmes dans la section questions-réponses, je vous enverrai cette vidéo ou je vous demanderai de revenir à cette liste de contrôle du débogage de Webflow pour suivre les étapes, car elle permet résoudre de nombreux problèmes auxquels vous pourriez être confronté lors de la création de votre Non, tu n'es pas obligée de le regarder. Vous pouvez le regarder dès maintenant si vous le souhaitez ou y revenir plus tard lorsque vous êtes confronté à un problème que vous ne parvenez pas à résoudre. J'ai donc cette liste de contrôle ici. Cela comporte quelques étapes, et j'ai créé ici quelques problèmes, qui sont des problèmes courants auxquels mes étudiants sont confrontés ici et là, et ce ne sont pas des problèmes inventés. Ils sont très courants. Cela arrive. Je vais donc les passer en revue et vous montrer comment utiliser cette liste de contrôle de débogage, comment suivre différentes étapes et quoi elle est réellement très, très utile Voici donc ce paragraphe d'espace étrange qui est vraiment très grand, impossible à comprendre, comme ce qui se passe ? D'où vient cet espace ? On clique dessus, il ne s'y passe rien. Alors, que devons-nous faire dans ce cas ? Voyons ce que nous dit notre liste de contrôle. Étape 1 : supprimez la classe du suspect pour voir si le problème disparaît. Si c'est le cas, passez à l'étape 5. OK. Donc, dans ce cas, le suspect est probablement un paragraphe. C'est avec un paragraphe. Il se passe probablement quelque chose dans le paragraphe. Et nous avons un cours ici. Maintenant, nous pouvons supprimer ce backspace sur votre clavier, supprimer la classe, et hmm, le problème a disparu, n'est-ce pas Maintenant, annulez pour retourner le paragraphe dans l'élément. Contrôle Z sur PC, Commande C sur Mac. C'est annuler. Le cours est donc de retour. Et maintenant, étape 5, passez à l'étape 5. Voyons ce que nous apprend la cinquième étape. Une fois que vous avez identifié la classe à l'origine du problème, replacez-la sur l'élément. Nous l'avons déjà fait et avons commencé à réinitialiser chaque style de couleur bleue Vous devriez être en mesure de trouver un style particulier à l'origine du problème. Très bien, voyons voir Sélectionnez le bon paragraphe, la bonne classe, puis nous commençons à réinitialiser les classes surlignées en bleu Maintenant, le HTML, le CSS et simplement les pages Web et les sites Web fonctionnent de telle sorte que tout se trouve dans une classe. Tous les changements que nous apportons à des vies dans le cadre d'une classe. C'est pourquoi nous avons un cours ici. Une fois que vous l'avez supprimée et que vous avez retiré cette classe de ce paragraphe, toutes ces modifications sont supprimées. C'est pourquoi la suppression d'une classe est un bon moyen de vérifier si quelque chose est à l'origine d'un problème. Nous pouvons donc commencer par la réinitialisation, il existe un raccourci ici Cliquez sur l'option dans mon cas, je vais cliquer sur le PC. Ça n'a pas marché. Cela n'a pas suffi. Quand les choses ne marchent pas, j'annule, afin de ne pas tout gâcher et de ramener les choses à la normale. Voyons voir, cliquez sur Non, ça n'a pas marché. Cliquez sur l'option, non, cela n'a pas fonctionné. Bing. Regarde ça. Bingo. C'est ce que nous avons. Alors, qu'est-ce que nous avons ici ? Hauteur C'est de la typographie, donc cela signifie la hauteur de la ligne 160 pixels. Oh, je sais que nous voulions dire 160 %. Voilà. Problème résolu. Regarde ça. Ma liste de contrôle fonctionne Nous avons maintenant un autre problème ici. C'est aligné à gauche. C'est F align. Les boutons sont alignés au centre. Ce n'est pas un bon design. Vous voulez de la cohérence dans l'alignement. Soit tout est aligné au centre soit tout est aligné à gauche. Nous voulons donc que ces boutons soient alignés à gauche. Mais ce n'est pas Figma. Nous pouvons le faire glisser ici sur la gauche. Que faisons-nous ? Encore une fois, nous commençons par la première étape , à savoir si le bouton est suspect. Supprimons-en la classe qui n'a rien fait. OK. Voyons ce que dit notre liste de contrôle à ce sujet Supprimez la classe du suspect pour voir si le problème disparaît. Non, il n'a pas disparu. Bien, passons à la deuxième étape. Comme la suppression de la classe sur l'élément suspect n'a pas aidé, cela signifie que le problème provient d'un autre élément. Commencez par supprimer les classes du parent direct, puis du parent jusqu'au niveau supérieur, y compris l' élément body, jusqu' à ce que vous supprimiez la classe qui fait disparaître le problème. Très bien, voyons voir. Quel est donc le parent du bouton ? Nous pouvons vérifier cela et le trouver dans le navigateur. Nous avons un bouton et le parent est laissé en bloc. OK, c'est notre parent. Une autre façon de raccourcir pour trouver les parents est la flèche vers le haut. Cliquez sur O. Cela va sélectionner immédiatement l'élément parent. Nous pouvons maintenant supprimer la classe. Non, ça n'a pas marché . Je vais donc le rendre. Encore une fois, clé, et maintenant nous allons sélectionner un grand-parent, le parent des parents. Voici donc le parent. Le parent suivant est Zero Flax, non ? Debout, debout. Voilà. C'est sélectionné. Maintenant, nous en retirons. Non, ça n'a pas marché. Dommage. Encore une. Peut-être que celui-ci le fera. Voyons voir. Boum. Je l'ai fait. Qu'est-ce qui se passe avec ce type ? OK. Si vous trouvez la classe de buggy, nous sommes passés à l'étape 5 cinquième étape était exactement la même chose, nous avons déjà commencé à réinitialiser et à supprimer les styles bleus Non, ça n'a rien fait. Oh, je l'ai fait. Que s'est-il passé ? Voyons voir. Un centre de ligne. Donc, parent, dans ce cas, les paramètres d'alignement du texte d'alignement du parent affectent réellement les enfants. C'est logique. Il reste une ligne. D'accord, c'est un problème. Grand. Cool. Elles sont faciles. Passons maintenant à une question un peu plus difficile. Un autre problème fréquent que je rencontre chez mes élèves, c'est que nous avons l'image du héros, qui est tout simplement minuscule, minuscule. Il est serré dans tous les coins. Alors, que devons-nous faire dans ce cas ? Encore une fois, nous passons à la première étape, supprimer la classe du suspect. Celui-ci n'a même pas de classe, ne pouvons donc pas le supprimer. Donc ça ne vient probablement pas de l'image. Ensuite, nous quittions le parent, retirions, nous le retirions du parent, et ainsi de suite. Et une fois que nous aurons examiné cela, nous découvrirons que dans ce cas, cela ne fonctionne pas non plus. Nous sommes donc passés par la deuxième étape, rien ne se passe. Ensuite, nous passons à la troisième étape. Si le problème ne vient d'aucun des parents, il peut venir d'enfants ou de frères et sœurs. Nous allons donc devoir répéter le processus de la deuxième étape, mais nous allons devoir le faire pour les enfants ou avec les éléments frères et sœurs Maintenant, la façon dont fonctionne le Web, et c'est bizarre. Ce n'est pas intuitif, mais c'est ainsi que cela fonctionne. Le Web fonctionne comme un document. Avez-vous déjà travaillé avec le document Word ? Vous savez, lorsque vous déplacez quelque chose dans un document Word, par exemple essayez simplement d'agrandir un peu l' image, et les 20 pages de votre document sont complètement gâchées Oui C'est ce que sont les pages Web. Le premier Suisse qui a inventé les sites Web a utilisé un document pour créer une page Web à partir de celui-ci. Cela fonctionne donc fondamentalement. Le HTML fonctionne comme un document. Tout occupe de l'espace. Tout y fait bouger les choses. Ce n'est pas comme Figma. Figma est paisible Il fonctionne en couches. Tout le monde s'entend bien. Personne ne s' embrouille. Mais les documents sont gourmands et tout ne fait que se pousser les uns les autres. Ils sont comme des pays qui se battent pour le territoire. Donc, ici, il faudrait vérifier ce qui se passe avec les frères et sœurs. Donc, pour découvrir les frères et sœurs, maintenant nous n'avons pas de petit raccourci sympa à parcourir, nous devons donc passer par la navigation. Nous pouvons donc résumer tout cela ici, cliquez à nouveau sur l'image du héros. Une image de héros n'a pas de frère ou de sœur, d'accord. Si l'image du héros n'a pas de frère ou de sœur, alors on déplace le parent vers le haut, et on commence par le frère ou la sœur des parents Donc, oncles, tantes, c'est avec ça que nous travaillons. Si cela ne fonctionne pas, nous choisissons un grand-parent, des grands-parents, des frères et sœurs, etc. Nous continuons simplement à le faire. Et si le parent ou la sœur ne travaille pas et que nous le faisons les parents célibataires et que rien ne change, alors nous devons le faire pour les enfants Donc, neveux et nièces, non, cousins. On le fait pour les cousins. Alors, que nous apprend cette étape ? Répétez donc ce processus pour les enfants et les frères et sœurs. Donc même processus de suppression de classes. Il s'agit donc du frère de l'élément parent. Bloc gauche. Nous l'enlevons. Bam, ça a réglé le problème. Donc, comme cela a résolu le problème, annulez, nous savons que quelque chose arrive dans le bloc de gauche et presse ce type dans le coin de la rue Nous commençons maintenant avec notre processus habituel de réinitialisation de tous les styles bleus. Reset, ça l'a fait, mais pas vraiment. Réinitialiser, non. Réinitialiser. Bam, c'est celui-là. OK. Largeur minimale 800 pixels. Oh, ouah. Notre toile fait 992 pixels, et ce type veut en occuper 800 Cela représente près de 90 %. C'est super gourmand. Donc, si nous réduisons ce chiffre à 400, l'image a maintenant l'espace nécessaire pour grandir. Sympa. Et une dernière option, c'est qu'aucune de ces étapes ne fonctionnera. Il y a cet étrange espace qui vient d'en haut. Ce truc n'a même pas de suspect parce que je clique dessus et rien n'est sélectionné. Ce n'est pas le cas, aucun des éléments n'est là. Donc, si j'ai sélectionné quelque chose ici, je clique dessus, rien ne se passe. D'où est-ce que ça vient ? Encore une fois, pensez à un document Word, n'est-ce pas ? Dans un document Word, tout se bouscule et les paramètres s'emboîtent les uns dans les autres. Ils s'en prennent l'un à l' autre. C'est ainsi que cela fonctionne. Non, ce n'est pas la faute de Webflow, mais la faute de HTML. C'est ce à quoi Webflow doit faire face. Figma, perruques, encadreur, tout ça. Ce sont des couches d'abstraction. Ils créent à partir de ce code HTML et CSS, en ignorant cela, et ils créent une nouvelle couche d'abstraction que vous pouvez comprendre intuitivement afin que vous n'ayez pas à vous occuper des parties désordonnées du HTML et du CSS réels Donc oui, dans Webflow, vous devez passer par cet étrange obstacle à l'apprentissage, mais il s'agit d'une technologie fondamentale immuable Le HTML et le CSS ne mènent jamais nulle part. Les pages Web seront toujours basées sur la structure du document qui ne changera jamais Donc, si vous voulez apprendre à coder ou si vous voulez coder, peu importe, connaissances que vous avez acquises grâce à Webflow seront transmises à d'autres plateformes Dans des sites comme Wix, Framer, Figma, toutes ces connaissances font partie de cette Vous ne transportez ces connaissances nulle part. C'est bon. Alors, que se passe-t-il ici ? Lorsque nous ne savons pas ce qui se passe, nous commençons à supprimer et à suivre les étapes des éléments adjacents car il s'agit d'un document, n'est-ce pas ? Tout affecte, et généralement ce sera quelque chose de adjacent. Alors, par exemple, quel est l' élément le plus proche de cet espace blanc ? Ce sera cette section, la section de démonstration. Supprimez la classe. Eh bien, je viens de supprimer l'arrière-plan, mais comme vous pouvez le voir, sur la base de cette petite bordure, rien n'a changé. Cet espace blanc est toujours indépendant. Donc ça n'a pas marché. OK, remets-le dedans. Maintenant, qu'est-ce qu'un autre élément adjacent ? C'est cette rubrique. Passons au titre, retirez-le. Eh bien, ça n'a pas marché non plus. Hmm. Nous sommes donc quelque sorte à court de tous les éléments adjacents. Que faisons-nous maintenant ? Voyons voir. Donc, lorsque nous avons franchi toutes les étapes, rien ne se passe. Si la suppression de classes ou la réinitialisation des styles bleus n'ont pas aidé, ou même s'il n'y a pas de classes ou de styles bleus, commencez à réinitialiser les styles en orange. Euh, hein. Nous faisons donc, encore une fois, des éléments adjacents. Nous passons par une démosection. Avons-nous des couleurs orange ? On ne passe pas au titre ? Tu as des couleurs orange ? Nous le faisons. Et regardez ça. Maintenant, si je supprime la classe d'ici, le paramètre orange ne disparaît pas car il ne fait pas partie de la classe Tout ce qui est bleu, bleu, bleu, ils sont connectés. Ils font partie de la même classe. Mais les décors et les styles orange viennent d'un autre endroit où les styles ont été hérités, un sujet que nous aborderons dans les prochaines conférences. Lorsque vous cliquez dessus, cela vous indiquera que la valeur vient de bla, bla, bla Il vous indiquera réellement d' où cela vient. Et cette valeur ne peut pas être réinitialisée. Tu ne peux pas cliquer dessus. n'y a pas d' option de réinitialisation car elle ne fait pas partie de cette classe. Il ne fait pas partie de cet élément ou de cette classe. Nous ne sommes pas en mesure de le réinitialiser à partir d'ici. Nous n'aurions qu'à le réinitialiser à partir de l'élément d'origine. Mais ce que nous pouvons faire, et cela dit, commencer à réinitialiser les styles, c'est aussi, en ces termes, les remettre à leurs valeurs par défaut Quelle est donc la valeur par défaut d'une marge supérieure ? Webflow nous indique en fait que peu importe ce qui est gravé, sont des valeurs par défaut Largeur, la valeur par défaut est auto, hauteur, la valeur par défaut est auto. Et vous pouvez cliquer dessus et vous verrez qu'il est sélectionné Auto. Mais la largeur minimale est de zéro pixel, mais la largeur maximale est nulle. Il s'agit de la valeur par défaut de ces éléments ou comportement par défaut tel que l'affichage, la valeur par défaut est le bloc. Dans ce cas, nous savons que la valeur par défaut est zéro pour les marges et le rembourrage Nous pouvons donc faire zéro ici. Manuellement, nous pouvons réinitialiser. Et, madame, ça a marché. C'est donc ce qui était à l'origine du problème. C'est ça. Ce sont toutes les étapes de débogage. Dans 80 % des cas, cela sera très, très utile. D'autres fois, contactez-moi lors d'une séance de questions-réponses. Faites-moi savoir. Je vais t'aider. 76. Webflow: Hover State: Notre section consacrée aux héros est superbe en ce moment, mais il n'est pas très intéressant d'interagir avec elle. Lorsque nous déplaçons notre souris sur les éléments, ils ne réagissent pas vraiment. Ces effets sont appelés effets de survol ou de survol de la souris. En matière de conception Web, souvenez-vous de cette loi. C'est ce qu'on appelle la loi de Jacob sur l'expérience utilisateur. La loi stipule que les utilisateurs passent le plus clair de leur temps sur d'autres sites. Qu'est-ce que cela signifie ? Cela signifie qu'ils s'attendent à ce que votre fonctionne de la même manière que tous les autres sites qu'ils connaissent déjà. Si vous essayez d'être très original et de faire en sorte que votre site fonctionne différemment de ce à quoi les utilisateurs sont habitués, vous allez vous retrouver avec un site fantôme très original que tout le monde veut quitter instantanément. Les utilisateurs s' attendent donc à ce que les liens et les boutons réagissent lorsqu'ils passent la souris dessus. Ajouter des effets de survol et Webflow est assez simple et très amusant Ceci est géré dans cette liste déroulante appelée états. Après avoir sélectionné l' état de survol dans le menu déroulant, toute modification apportée aux styles s'appliquera à l' état de survol de cette classe Et juste comme ça, le bouton change l'opacité au survol Les états affichent désormais un point bleu pour indiquer qu'une modification a été apportée à l'état de survol Il existe d'autres États, comme Press and Focus, mais je n'y reviendrai pas tant que nous n'en aurons pas besoin. Nous n'avons pas conçu d'états de survol dans Figma. Je ne le fais pas non plus dans de vrais projets clients. C'est trop de travail supplémentaire qui n'est pas vraiment nécessaire. J'obtiens un effet de survol lorsque je suis en déplacement pendant le processus de création de Webflow De cette façon, je peux également visualiser son comportement. Nous pouvons modifier presque toutes les propriétés en survolant. De nombreuses animations amusantes peuvent être créées à partir de cela. Cependant, Webflow propose un autre moyen de créer des animations et des interactions, et c'est super incroyable Mais nous en parlerons plus tard. Pour les boutons, la modification du champ d'arrière-plan est un moyen simple et efficace d' ajouter un simple effet de survol, et il est facile de le faire en modifiant l'opacité de la sensation d'arrière-plan Vous pouvez l'utiliser comme technique de prédilection pour un effet simple et rapide. C'est plus facile que de mettre une couleur différente. Un autre moyen simple serait d'ajouter une ombre au survol. C'est une animation courante et amusante qui ajoute une dimension supplémentaire . Maintenant, avec notre bouton fantôme ici, nous ne pouvons pas diminuer l'opacité C'est déjà transparent. Mais ce que nous pouvons faire, c'est ajouter une fine couche de blanc transparent. Un peu comme ce bouton dans la barre de navigation, ajoute un fond blanc avec une opacité de 10 à 20 % Avec le bouton de la barre de navigation, nous pouvons soit rejouer avec l'opacité , soit la remplir de blanc à 100 % Lorsque vous le remplissez de blanc, nous devons également changer la couleur fiscale, car le texte est blanc et ne s'affiche pas. Heureusement, nous pouvons changer n'importe quel style au survol. Ainsi, sans problème, nous pouvons transformer le texte en bleu En ce qui concerne les liens de navigation, nous pouvons faire quelque chose de similaire, comme diminuer l'opacité , changer la couleur ou faire quelque chose d' encore plus intéressant Nous pouvons ajouter une bordure en dessous. Je ne veux pas souligner, c'est nul. Je veux dire une bordure sous toute la boîte de liens. Nous pouvons le faire dans les paramètres de bordure. Cochez la case qui indique la bordure inférieure. Cela devrait automatiquement sélectionner une ligne continue comme style s'il ne garantit pas que vous l'avez sélectionnée et qu'elle n'est pas définie sur X et que la couleur ne passe pas au blanc. C'est un bel effet exagéré qui nous convient, car nous utilisons un lien comme une boîte entière, et pas simplement comme un texte. Cela montre donc que tout cela est cliquable. Nous pourrions rapprocher cette bordure du texte en diminuant le rembourrage des boutons, mais j'aime bien qu'elle soit espacée comme ça Il y a une chose étrange qui se passe en vol stationnaire. Faites attention à la façon dont le contenu ci-dessous change légèrement chaque fois que nous survolons les liens Ce n'est certainement pas sympa. Cela se produit parce que la bordure de Tupixel augmente l'espace disponible dédié aux liens de navigation Cela repousse donc tout le contenu vers le bas. Alors, comment corriger ce comportement ? Nous devons d'une manière ou d'une autre nous assurer que la hauteur du lien Nab ne change pas au survol à cause de la bordure Et une façon de le faire est d'ajouter bordure Tupixel également à l'état normal Nous pouvons le rendre transparent pour qu'il ne s'affiche pas. De cette façon, la boîte de liens de navigation a une bordure de deux pixels dans les deux cas, de sorte qu'elle ne change pas de taille au survol. La seule chose qui change, c'est la couleur. C'est une bonne solution. À l' heure actuelle, les effets du survol passent assez brusquement d'un séjour à C'est un saut saccadé très instantané. Ce saut instantané n'est peut-être pas grand-chose, mais il est trop rapide pour que nous puissions enregistrer le changement Cela ne semble donc pas très naturel et fluide. Dans de tels cas, les concepteurs Web ajoutent un petit effet de transition, ce qui entraîne un léger retard dans la transition. Nous pouvons ajouter le style de transition à partir d'ici. Dans une liste déroulante, vous pouvez voir qu'il existe de nombreux types de transition Il répertorie tout ce qui peut avoir un effet de transition, comme l' opacité d'un élément ou la couleur d'arrière-plan Tous les styles ne peuvent pas faire la transition. Par exemple, vous voyez que le nom de la police n'est pas répertorié car le changement de police ne peut pas être animé, mais de nombreux autres paramètres de typographie le peuvent Dans notre cas, nous voulons changer de couleur de bordure, ce qui est une option disponible. Il existe deux autres valeurs  : duration et easing. La durée, c'est exactement ce qu'il dit. Combien de temps dure la transition en millisecondes ? La valeur par défaut de 200 millisecondes est assez bonne pour la plupart des effets de survol Vous pouvez donc la laisser Quant à l'assouplissement, cela peut sembler un peu compliqué, mais il est assez simple. En réalité, il s'agit en quelque sorte de formules différentes sur la vitesse à laquelle ils vont ou accélèrent et sur la rapidité ou lenteur avec laquelle ils ralentissent à la fin de la transition Laissons cela à la facilité par défaut. La plupart du temps, cela fonctionne parfaitement. Maintenant, si vous survolez les liens nuls, vous remarquerez que la bordure apparaît et disparaît en douceur, et c'est tellement mieux que cette transition saccadée qui se produisait auparavant Une dernière chose à noter, l'effet de transition doit être appliqué à l' état normal, et non à l'état de survol C'est ainsi que fonctionne le CSS. Nous pouvons faire la même chose pour les boutons et leurs transitions d'arrière-plan. Souvent, au lieu de sélectionner un type de transition spécifique, j'aime sélectionner toutes les propriétés. Cela appliquera les mêmes paramètres de transition à tout effet de survol. C'est juste une façon plus simple de le faire. Au lieu de rechercher un type de transition, nous voulons chaque fois appliquer un changement de survol différent Si un élément possède plusieurs propriétés qui changent au survol, comme la couleur de police, la couleur d' arrière-plan, les ombres, au lieu d'ajouter trois types de transition différents, vous pouvez simplement en ajouter un qui s'applique à tous sauf si nous voulons différents effets à des vitesses différentes, mais ce sera très rare. Le même effet de transition sur les autres boutons, et voilà. Tous les boutons et liens effectuent une transition agréable et fluide. Très bien, alors récapitulons ce que nous avons fait dans cette vidéo. Nous avons ajouté des effets de survol aux liens et aux boutons de notre section consacrée aux héros Les états du survol sont modifiés par rapport aux états du panneau Styles Nous pouvons changer presque tous les styles à l'intérieur de l'état de survol. Et pour que le passage de l'état normal au survol soit agréable et fluide, nous pouvons ajouter des transitions à partir des paramètres d'effet 77. Webflow : Section centrale (application de chat): La version de bureau de la section héros est complètement terminée. Nous ne l'avons pas encore optimisé pour les appareils mobiles et les tablettes. Mais ce que nous allons faire, c' est abord terminer la page entière, puis nous allons nous occuper de la réactivité et de l'optimisation mobile C'est en quelque sorte mon habitude de le faire. Certains concepteurs de sites Web vont faire chaque section par section, chaque bloc individuel qu'ils construisent, faisant de l' optimisation mobile en même temps. J'aime d'abord terminer la page entière , puis passer à l'optimisation mobile et à la réactivité. Pourquoi ? Parce que ce qui m' arrive souvent, c'est que j' envoie des versions de bureau ou quelle que soit la page que je suis en train de concevoir, je les envoie au client pour examen et il revient avec des révisions. Alors que se passera-t-il, ils seront comme si nous étions d'accord sur le design, parfois, vous savez, il y a des animations impliquées, n'est-ce pas ? Il y a des interactions, des effets d'horreur. implique donc différentes choses Cela implique donc différentes choses qui n'ont pas fait partie de la phase de conception, ou ils peuvent simplement changer d'avis lorsqu'ils voient la page en réalité. Donc, ce qui se passe, c'est qu'ils peuvent revenir avec différentes modifications que je dois apporter, et je pourrais supprimer complètement une partie de la section ou changer complètement la façon dont elle est présentée, etc. Et maintenant, toute cette réactivité et cette optimisation mobile que j'ai intégrées sont en quelque sorte perdues tout le temps De cette façon, je sais que je n'ai pas à passer plus de temps sur les versions mobiles tant que nous n' en sommes pas sûrs , que mon client n'a approuvé les designs et que nous savons que tout est prêt. Ensuite, à l'étape finale, je réparerai le mobile puis je créerai la réactivité de la page Et nous utiliserons ce processus, finirons d'abord la page, puis nous la passerons en revue et passerons en revue l'intégralité des versions pour tablettes et mobiles et tout le reste. Il est maintenant temps de construire cette section centrale. Nous allons simplement être beaucoup plus simples. Alors, de quoi avons-nous besoin en premier ? Nous pouvons jeter un œil à la structure de notre héros pour en avoir une idée. Il semble donc que nous ayons deux blocs div, un nommé section héros et autre conteneur situé à l'intérieur de cette section héros. Si vous vous souvenez, nous avons créé un conteneur en tant que bloc générique pour centrer notre contenu. Nous le réutilisons même dans la barre de navigation. C'est une bonne idée de réutiliser ce contenant partout sur notre site Web. De cette façon, nous avons une mise en page uniforme. Et si jamais nous décidons de modifier la largeur maximale, l'élargir ou de la réduire, nous pouvons le faire sur l'ensemble d'un site Web en quelques clics Pour la section des héros, nous n'avons rien fait de standardisé comme ça. Sinon, nous le réutiliserions également ici, mais ce n'est pas grave. Nous pouvons maintenant créer une section générique, nous pourrons réutiliser plus tard, comme nous l'avons fait avec le conteneur. Nous allons donc ajouter une nouvelle section. Nous allons mettre un autre contenant à l'intérieur. Nous appliquerons la classe de conteneur à ce conteneur. Et nous allons créer une nouvelle classe nommée section pour ce bloc de section. Et maintenant, ajoutons un peu de style à cette classe de section nouvellement créée. Une chose que nous pouvons emprunter à la section des héros est le rembourrage latéral N'oubliez pas ce rembourrage latéral, nous l'appliquons à la section des héros, afin que le contenu ne se retrouve pas sur les bords Nous savons que cela sera uniforme sur notre site Web et entre les pages, tout comme notre conteneur générique. Nous allons donc appliquer le même rembourrage à notre section générique Plus tard, si nous décidons de modifier ce rembourrage, nous pourrons le faire sur l'ensemble du site Web en modifiant simplement une instance de cette section Nous pouvons également ajouter du rembourrage en haut et en bas. Nous pouvons trouver ces informations dans Figma. Nous avons utilisé un Figma avec un espacement de 19 pixels pour séparer ce titre de la section des héros ci-dessus Nous pouvons donc réutiliser la même valeur ici, et nous pouvons l'appliquer à la fois en haut et en bas Voilà, nous avons maintenant une disposition de section générique avec un conteneur générique à l'intérieur. Nous réutiliserons exactement cette même structure dans d'autres sections similaires de notre page. Nous pouvons maintenant mettre nos éléments à l'intérieur et commencer à les styliser pour qu'ils ressemblent à nos designs. C'est ce que nous allons faire dans la prochaine vidéo. 78. Webflow : balises HTML: Commençons par styliser notre titre. Tout nouveau texte que nous ajoutons à notre page par défaut est défini en police aérienne. Ne serait-ce pas bien si vous pouviez leur donner un style par défaut, comme faire apparaître tous les titres et robotiser le texte des paragraphes, afin que nous n'ayons pas à les styliser chaque fois que nous ajoutons un nouveau titre Sur une petite page comme celle-ci, c'est très bien. Pas beaucoup de travail. Mais que se passe-t-il sur un grand site Web avec 20 pages différentes et encore plus d'articles de blog ? Nous pourrions bien sûr utiliser des classes CSS, mais il existe une meilleure façon de procéder. N'oubliez pas le champ de sélection, vous le connaissez déjà À partir de là, nous avons appliqué des classes CSS à nos éléments. En appliquant une classe à un objet, nous sauvegardons essentiellement les informations sur les styles et les propriétés. Plus tard, nous pourrons appliquer la même classe à un autre objet similaire. Dans le champ de sélection, l'OC indique de sélectionner une classe ou une étiquette est cette balise qui nous permettra de définir les styles par défaut de notre texte. Alors, c'est quoi un tag ? Une balise fait partie du HTML, tandis que la classe fait partie du CSS. Les balises sont exactement ce que nous avons ajouté à notre page. Le bloc Div est une balise nommée DIV et un titre est une balise nommée H one, et un paragraphe est une balise nommée P. Dans le HTML, c'est ainsi que de nouveaux éléments sont ajoutés, des balises. Il commence par indiquer le type de l'élément, c'est DV, H one, P, etc., et juste après, si une classe CSS lui est appliquée, le nom de cette classe CSS Vous voyez comment il est dit que la classe est égale à la section du héros. C'est exactement la classe que nous avons créée manuellement et que nous l'avons nommée ainsi. Alors, comment les balises nous aident-elles à définir les styles par défaut ? Eh bien, tout comme nous définissons un ensemble de propriétés et de styles d'une classe, nous pouvons faire exactement la même chose pour une balise HTML générique. Par exemple, pour le titre, au lieu de lui appliquer une classe puis de le styliser, nous pouvons sélectionner tous les en-têtes en H à partir d' ici, puis le styliser comme nous le faisons habituellement. Désormais, chaque fois que nous ajoutons un nouveau titre, le style par défaut lui sera appliqué sans qu'il soit nécessaire d' utiliser des classes. Et tout comme les classes, nous pouvons apporter une modification à chaque instance à la fois. Outre H one, nous avons d'autres balises de titre. Cliquez simplement sur les paramètres du titre et vous verrez. Nous sommes descendus jusqu'à H six. L'utilisation de ces différentes balises de titre est essentiellement le niveau. H one devrait être notre style de titre le plus élevé. Pour un titre secondaire, nous pouvons utiliser H deux et ainsi de suite. Si vous regardez nos designs et Figma, nous pourrions certainement définir différents niveaux de titres à partir de Le titre de la section des héros est le plus grand, il peut donc s'agir du titre H. Le titre de la section suivante peut être H deux et peut-être que ces en-têtes de bas de page peuvent être H trois ou H quatre Donc, si nous voulions définir une balise H two, nous la sélectionnerions ici et encore, nous allions au sélecteur Cette fois, le sélecteur nous montrera tous les H deux titres au lieu de H un, car c'est ce que nous avons Et nous pouvons styliser toutes les balises H two de notre site Web. Désormais, lorsque nous sélectionnons la balise H deux sur un titre, cette étoile sera automatiquement appliquée En passant, contrairement aux classes, les tags ne sont pas sélectionnés en permanence. Donc, dès que vous avez terminé de modifier l'élément et que vous quittez l'élément, ce sélecteur de balises disparaîtra. Donc, si vous le faites et que vous revenez à l'en-tête pour le modifier un peu plus, toute nouvelle modification créera une nouvelle classe et celle-ci ne sera pas appliquée à la balise Ainsi, chaque fois que vous apportez une nouvelle modification à la balise, assurez-vous de la sélectionner à chaque fois. Jusqu'à aujourd'hui, je n'arrête pas de l' oublier. Pour pouvoir sélectionner le tag, le champ de classe doit être vide. Sinon, comme vous pouvez le voir, il n'affiche plus l'option permettant de modifier le tag H two. Mais il existe un autre moyen de sélectionner et de modifier la balise elle-même, même si une classe est appliquée à l'élément. Vous pouvez le faire d'ici. Ce menu déroulant affiche toutes les classes et tous les tags de niveau supérieur que vous pouvez sélectionner et modifier directement. Le bleu est pour la classe et le rose pour les étiquettes. Par exemple, prenons notre titre et rendons-le rouge, mais pas le tag, mais juste cette instance particulière du titre. Comme vous pouvez le constater, le titre H one par défaut est inchangé car nous appliquons la couleur rouge à l'aide d'une classe et non d'une balise. Maintenant, si nous voulons modifier notre style H one par défaut, nous pouvons bien sûr le faire sur le titre ci-dessous, mais nous pouvons également le faire sur le style rouge en sélectionnant une balise de niveau supérieur dans le sélecteur Toutes les modifications que nous apportons maintenant seront également appliquées au style H one par défaut, et vous pouvez voir cela se produire en direct. Autre point à souligner, vous remarquerez que le style de couleur est rayé. Pourquoi est-il rayé C'est essentiellement Webflow qui nous indique que la propriété de couleur est remplacée par un sélecteur plus spécifique Les classes sont donc plus spécifiques, un peu comme des éléments enfants, et les balises ressemblent davantage à des éléments parents. Les classes remplacent donc les balises, comme les enfants héritent des styles du parent jusqu'à ce que nous définissions un style spécifique pour l' élément enfant. Il en va de même ici. La balise H one est un sélecteur de niveau supérieur, qui agira comme style par défaut jusqu'à ce qu' une classe plus spécifique remplace ce Une balise body est un bon exemple de cette hiérarchie. Si vous regardez à l'intérieur du navigateur, vous pouvez voir que le corps est la plus grande boîte dans laquelle tout le reste se Rien ne passe à côté du corps ou au-dessus de celui-ci. Une fois le corps sélectionné, accédez au sélecteur et cliquez sur Body O pages Vous pouvez maintenant définir certains styles sur cette balise body qui seront transmis à tous les éléments enfants. Cependant, uniquement pour les propriétés héritables telles que les textiles, les autres propriétés telles que les tailles, affichage et les bordures ne seront pas héritées Vous pouvez voir que Webflow a déjà appliqué certains styles de police par défaut Nous pouvons le constater parce que c'est surligné en bleu. Quels styles par défaut pouvons-nous définir ici ? Par exemple, nous savons que roboto est notre police principale sur les paragraphes et sur tout le reste, à l'exception des titres Alors pourquoi ne pas installer Roboto ici ? Nous pouvons également définir une taille de police, une couleur et une hauteur de ligne par défaut . Ainsi, chaque nouveau texte que nous ajouterons à notre site Web commencera par ces paramètres et aura beaucoup moins de style à appliquer. Bien entendu, nous ne sommes pas limités à ces valeurs. Les balises H one et paragraph étant des sélecteurs plus spécifiques, elles remplaceront ces paramètres C'est pourquoi le paragraphe a changé lors modification, mais pas le titre Les classes sont des sélecteurs encore plus spécifiques, qui remplaceront tous les autres textes, qu'il s' agisse du titre ou du corps Désormais, chaque nouvel élément de texte que nous ajouterons à la page sera en roboto et en gris sauf s'il s'agit de styles plus spécifiques Il existe d'autres balises que nous pouvons personnaliser, mais les balises headings et body sont les plus courantes et les plus utiles Dans notre cas, nous avons donc un tag H que nous stylisons exactement comme nos designs, et nous avons stylisé le body tag fonction de nos designs de paragraphes. Après avoir stylisé le body tag, vous remarquerez que parfois certains tags changent là où vous ne vous y attendiez pas. Par exemple, nos liens de navigation s'accordent sur une taille correspondant aux 18 pixels que nous avons définis pour la balise body. Et si nous cliquons sur le style de police, nous pouvons voir que cette valeur est héritée du corps. Même si une classe d' activation lui est appliquée. Pourquoi cela se produit-il ? Parce qu'à l'origine, lorsque nous personnalisions les liens de navigation, nous n'avions pas besoin de modifier la taille du téléphone ni la hauteur de ligne. Ce qui était réglé par défaut sur le boîtier était de la même taille de téléphone que celle dont nous avions besoin à l'époque. Mais maintenant que nous avons changé la taille du téléphone sur le body tag, nous avons compris ceci. Personnalisons ces liens de navigation à la taille qu'ils sont censés être de 14 pixels pour la taille du téléphone et de 16 pixels pour la hauteur de ligne. Et c'est bien mieux. Donc, pour récapituler, nous avons les classes CSS et les textes HTML. Les balises HTML sont des éléments eux-mêmes tels que des paragraphes, des en-têtes, des images, etc. Tout comme les classes, de nombreuses balises HTML peuvent être stylisées afin de créer un style général par défaut pour ces types d' éléments, comme tous les titres ou tous les paragraphes. La balise de style est une habitude professionnelle. Cela permet de gagner beaucoup de temps en fin de compte, est efficace et crée un code plus propre. Le tag le plus haut niveau que nous puissions styliser est le body tag. Si nous définissons un style de police sur la balise body, tous les autres éléments fiscaux du site Web, pas seulement une page, hériteront de cette police de la balise body jusqu'à ce que nous la remplacions par d' autres balises ou classes plus spécifiques 79. Webflow : Cours de combo: La section centrale ne comporte donc que trois éléments : le titre, le paragraphe et une image. Nous avons donc besoin des éléments de cordage dans Webflow. Maintenant, mettons notre contenu à l'intérieur et voyons où cela nous mène. Ensuite, exportons l'image. Cette fois, nous pouvons exporter du JPEG au lieu du PNG car l' arrière-plan est blanc, nous n'aurons donc aucune incompatibilité de couleur. Nous allons faire deux X pour optimiser la rétention. Comme nous avons exporté deux X, nous devons activer l'option DPI élevée. OK, ça ressemble presque à notre design. Nous devons tout centrer d'une manière ou d'une autre. Nous pourrions définir l'alignement du texte au centre du bloc div du conteneur, mais nous ne pouvons pas le faire sur notre conteneur générique, car cela centrerait les éléments partout et gâcherait notre contenu ailleurs, comme dans notre section héros. Nous pourrions, bien sûr, dupliquer cette classe de conteneur et en créer une nouvelle avec une mise en page centrale, mais cela va en quelque sorte à l'encontre de l'objectif d'avoir ce conteneur générique par défaut que nous allons utiliser sur le site Web. Heureusement, CSS a une solution super intelligente pour cela, les classes combinées. Laisse-moi te le démontrer. Nous avons un bouton générique ici. Appliquons notre classe de boutons existante depuis la section héros. Une fois que nous aurons atteint cette section depuis le design, au lieu du blanc, nous devrons utiliser la version bleue. Mais au lieu de dupliquer la classe de boutons, nous allons conserver la même classe de base et y ajouter une classe de combinaison Il y a maintenant deux classes dans le bouton de sélection, qui est la classe de base et la classe bleue, qui est la classe combinée Toute modification apportée à ce nouveau bouton à partir de maintenant n'affectera pas le bouton blanc d'origine. Mais l'avantage de la classe combo réside dans le fait que toutes les autres propriétés que nous n'avons pas touchées sont toujours héritées de la classe de boutons de base. Cela signifie que si nous décidons à un moment donné de changer le style de nos boutons, par exemple en les rendant carrés, en diminuant le rembourrage ou en modifiant le style de police Toutes ces modifications seront également reflétées sur le bouton bleu. Cependant, toutes les propriétés que nous avons appliquées à la classe combinée Blue ne seront pas du tout affectées. Cependant, toutes les propriétés que nous avons appliquées à la classe combinée Blue ne seront pas du tout affectées. Dans ce cas, les couleurs de fond et de texte. Ce n'est pas vraiment un crime si vous n'utilisez pas de classes combinées. Les personnes ordinaires qui visitent votre site Web ne sauront pas faire la différence si vous utilisez des classes combinées ou non. Et franchement, ils s'en fichent. Mais c'est ce que font les professionnels pour gagner du temps, produire un code plus propre et avoir un meilleur contrôle sur le site Web. Et bien sûr, je veux que vous deveniez un pro, créiez des sites Web de manière efficace et que plus d'argent en gagnant du temps lors du développement. Ces classes combinées correspondent à l'arbre d'héritage situé au bas de la hiérarchie. Ils héritent des styles de la classe de base qui, à son tour, hérite des styles de la balise associée Relatif est un mot important ici, car un paragraphe n' héritera d'aucune étoile d'une balise H ou d' une balise de titre, mais uniquement de la balise de paragraphe Et toutes ces balises héritent de certains styles de la balise body Et lorsque nous redéfinissons les styles, nous les redéfinissons par le bas Un style plus spécifique gagne. Ainsi, la classe combo peut remplacer tout ce qui se trouve au-dessus d'elle, la classe de base, la balise associée et la balise body De même, une classe de base peut remplacer tout ce qui se trouve au-dessus d'elle, mais cela n'affectera pas la classe de combinaison si cette classe de combinaison est responsable de ce type de style spécifique, comme la couleur du téléphone ou la couleur d' arrière-plan, etc. C'est exactement ce que signifie CSN, des feuilles de style en cascade, si vous mourez Les styles tombent donc en cascade du haut vers le bas, peu comme une cascade. Vous pouvez voir comment la classe de combinaison a été ajoutée au menu d' héritage. Et ce menu nous permet de sélectionner n'importe quelle étape de cette hiérarchie et de l'ajouter exactement à cette étape, par exemple, la classe de base D'ailleurs, ce menu d' héritage peut également indiquer quelle balise spécifique peut contrôler votre élément. La deuxième boîte rose indique les liens. Pourquoi ? Parce que les boutons sont des liens réguliers. Nous les carrelons simplement pour les faire ressembler à des boutons. Donc, si nous définissons des styles sur la balise links, vous remarquerez ces styles sur vos boutons jusqu'à ce que vous les remplaciez Bon, revenons à notre conteneur. Nous pouvons ajouter une classe combinée appelée center, puis modifier l'alignement du texte de la police. Cela devrait centrer tout notre contenu comme nous le souhaitons. À partir de ce moment, si nous avons besoin d' un autre conteneur avec un alignement central, nous pouvons appliquer cette classe combinée comme nous appliquerions une classe de base normale. Webflow affiche même les classes combinées liées à cette classe de base, afin que vous puissiez choisir une classe combinée existante À Voila, nous obtenons un conteneur centré. Quelques éléments que nous devons styliser dans notre section, savoir la largeur du paragraphe et l'espacement. Nous pouvons saisir l'espacement de notre dessin : 30 pixels en haut et 60 en bas Et bien sûr, nous pouvons saisir la largeur du paragraphe deux, qui est de 566 pixels Mais oups, ça arrive. Je sais que vous vous demandez peut-être pourquoi ce n'est pas centré ? N'avons-nous pas défini l'alignement central notre conteneur, mais regardez-le de plus près. Le texte lui-même est centré à l'intérieur de la boîte, mais la boîte ne l'est pas. Pourquoi la boîte n'est-elle pas au milieu ? Parce que le texte du paragraphe est configuré pour afficher le bloc et que l'option d'alignement du texte n'affecte pas les éléments au niveau du bloc. Cela n'affecte que le texte réel, le bloc intégré et les éléments en ligne Une façon de centrer l' ensemble de ce bloc de paragraphes consiste donc à changer l'affichage en bloc intégré. Cela peut sembler un peu étrange. Cela fonctionne sur un bloc intégré, mais pas sur un bloc normal, mais ce n'est pas grave. Tu vas t'y habituer. Une autre façon de le centrer consiste à définir des marges automatiques, comme nous l'avons fait avec le conteneur. N'oubliez pas ce que font les marges automatiques elles agissent comme des ressorts qui remplissent l'espace restant et poussent la boîte au milieu. Ces deux solutions sont valides, marge automatique ou bloc intégré, mais je penche pour l'utilisation marge automatique parce que si je suis confrontée à un bogue, que j'essaie de corriger quelque chose et que j'oublie ce que j'ai fait ici, je suis plus susceptible de supposer que le paragraphe est défini sur le bloc par défaut plutôt que sur le bloc intégré. Et c'est tout. Nous avons l'air bien. Pour récapituler, nous avons découvert les classes combinées et comment elles peuvent nous faire gagner beaucoup de temps Les classes combinées se trouvent au bas de l'arborescence hiérarchique Elles héritent donc des styles de tout ce qui se trouve au-dessus d'elles, mais elles peuvent remplacer n'importe lequel de ces styles hérités, et leurs modifications n' affecteront rien au-delà de leur niveau 80. Webflow : section CTA (application de chat): C'est bon. Nous allons créer notre section d'appel à l'action dans cette vidéo. De quoi avons-nous besoin ici ? Faisons une planification rapide dans notre tête. Nous avons donc l'image sur la gauche, contenu sur le côté, à peu près le même que dans notre section consacrée aux héros. Commençons par les bases. Nous allons ajouter une nouvelle section et lui donner une section de classe que nous avons créée. Ensuite, nous allons mettre un conteneur à l'intérieur et lui donner un conteneur de classe, puis nous allons le prendre à partir de là. Nous avons besoin d'une couleur de fond pour cette section. C'est en fait le même bleu, mais nous l'avons avec une opacité de 10 % Nous ferons la même chose dans Weblo, mais la question est comment allons-nous modifier l'arrière-plan de nos sections sans modifier arrière-plan de nos sections sans les mêmes sections de notre page Eh bien, si vous avez prêté attention à la leçon précédente, vous saurez que nous pouvons appliquer une classe combinée à la section sans avoir à la dupliquer. Là-bas. Désormais, le changement n'est répercuté que sur cette nouvelle section. Puisque notre disposition est similaire à celle de la section des héros, nous pouvons peut-être faire la même chose. Allons y jeter un œil. Nous avons une boîte flexible à l'intérieur d'un conteneur, et cette boîte flexible comporte deux blocs gauche et à droite placés l'un à côté de l'autre Construisons cela de la même manière. Nous avons donc ajouté un bloc div appliqué la classe flexbox et y avons placé d'autres boîtes collées sur les bords. Pourquoi ? Parce que si vous vérifiez les propriétés de la boîte flexible, vous verrez qu'elle est espacée entre les deux applications. Cela met les boîtes pour enfants sur le côté. Donc, tout ce que nous y mettrons sera également repoussé. OK, sur la gauche, mettons l' image. Nous devons d'abord l'exporter. Nous allons devoir trouver un moyen de faire en sorte que cette image reste collée sur le bord gauche comme nous l'avons fait dans nos designs. Mais mettons d'abord du contenu dans le bon bloc. OK, alors que se passe-t-il ici ? Les cases de gauche et de droite sont flexibles, elles ont donc la possibilité de se rétrécir et de grandir pour faire de la place l'une pour l'autre. Donc, dans ce cas, le paragraphe pousse les choses et fait rétrécir le bloc de gauche. Ce que nous pouvons faire ici, c'est appliquer une largeur maximale au bloc droit pour qu'il ne se déchaîne pas. Nous pouvons vérifier la largeur Figma et la définir comme largeur maximale, soit 467 pixels Maintenant, vous demandez-vous pourquoi ne pas fixer la largeur au lieu de la largeur maximale ? Parce que sur des écrans plus petits, nous voulons qu'il rétrécisse. Nous voulons concevoir de manière réactive. Est-ce un mot qui y est réactif ? Eh bien, nous voulons tous les deux concevoir de manière responsable et réactive. Donc, la plupart du temps, pensez à utiliser tailles maximales et moyennes plutôt que des tailles exactes. Je dois souligner ici que ce bloc est un enfant flexible, il rétrécirait encore même si nous lui donnions une largeur exacte. Cela se produit parce que c'est ce que fait Flexbox. Il gouverne ses enfants comme il le souhaite. Ils n'ont pas beaucoup leur mot à dire. Donnons à ce bloc une marge sur la gauche pour qu'il ne soit pas si proche de l'image. Bon, que faire de notre image maintenant ? Comment le mettre sur le côté ? Je sais que nous pouvons ajouter une marge négative au bloc de parentifs. Oui, c'est le truc. Marges négatives. Et voilà. Mais cela pose un petit problème. Sur un écran plus large, la marge négative que nous avons ajoutée ne sera pas suffisante. Pour résoudre ce problème, nous pouvons faire deux choses. Tout d'abord, nous pouvons utiliser des unités VW au lieu d'unités de pixels. Vous vous souvenez de ce que représente VW ? C'est exact. Volkswagen, mais il représente également la largeur de la fenêtre d'affichage. Donc, lorsque nous mettons quelque chose comme dix VW, cela signifie que la marge sera de 10 % de la largeur du navigateur. Donc, à mesure que le navigateur augmente, cela augmentera également. Ce n'est toujours pas suffisant. Nous pourrions ajouter quelques points supplémentaires et recadrer l'image sur des écrans plus petits. Mais il y a encore une chose que nous pouvons faire c'est d'élargir l'image elle-même, ce qui signifie que nous pouvons exporter une plus grande partie de l'image Lorsque nous avons créé ce graphique, nous avons en fait recadré l'image Nous pouvons donc en révéler davantage et exporter la version la plus large. De cette façon, nous aurons plus de flexibilité. Déplacez l'image au milieu pour qu'elle soit entièrement visible et que le cadre l'empiète. Sinon, si vous l' exportez, le contenu sera découpé en fonction du cadre. Et agrandissez l'image ou révélez-en une plus grande partie. Encore une fois, nous procédons à la même exportation. Vérifiez et revérifiez cette option haute résolution. Sinon, l'ancienne valeur de largeur sera conservée et la largeur de votre image ne sera pas mise à jour. Nous avons désormais plus de flexibilité quant à la quantité d'image que nous pouvons extraire de la page. Au fait, ce n'est pas un hack. C'est une bonne façon de faire les choses dans le domaine de la conception Web. Au bout du compte, ce n' est pas la méthode qui compte, mais le résultat. Bien, finissons le contenu. Souvenez-vous de ce que nous avons fait avec un bouton lorsque nous jouions avec les classes combinées. Nous allons attribuer à ce bouton une classe combinée bleue et lui donner un style. On peut faire la même chose avec un bouton fantôme. R Utilisons notre paragraphe pour ajouter de l'espacement. 30 pixels en haut et 60 pixels en bas. Et en fait, peu importe où vous ajoutez votre espacement. Vous pourriez même utiliser le titre et les boutons, mais cela nécessiterait que je modifie deux éléments En utilisant un intermédiaire, je peux ajouter de l'espace en haut et en bas. C'est moins de travail et moins de cours. Alors, qu' est-ce que nous avons ici ? Il y a une ligne, puis il y a une image d'étoiles et du texte à côté. Sur la base de cette mise en page côte à côte, nous savons que nous aurons besoin d' un bloc div supplémentaire uniquement pour ces deux-là. Cette fois, nous allons exporter les étoiles au format SVG car elles ne contiennent aucune photographie. Ils sont basés sur des vecteurs, donc parfaits pour le SVG. Comme je l'ai déjà mentionné, les SVG n'ont généralement pas besoin d' être compressés Ils sont déjà assez petits. De plus, les Spigs n'ont pas besoin de cocher l'option DPI élevée car ils sont exportés depuis Figma en taille unique, il n'est donc pas nécessaire de les réduire Ils auront l'air parfaitement délirants dans leur taille One X d'origine. Et même si vous les agrandissez autant que vous le souhaitez. R D'accord, alors comment mettre les étoiles et les tags côte à côte ? Chaque fois que vous voulez mettre quelque chose côte à côte, commencez par Flexbox. Il existe également d'autres options, mais flexbox vous donnera le plus de flexibilité la plupart du temps Cette boîte flexible que nous avons créée dans la section héros possède un alignement central Dans notre cas, nous voulons qu'il ait un alignement supérieur similaire à celui de notre conception, mais nous ne pouvons pas le modifier ici car cela gâcherait la boîte flexible d'origine gâcherait la boîte flexible d'origine et toutes les autres instances de la même boîte flexible D'accord, nous pouvons donc créer une classe combinée et lui donner le nom que vous voulez, puis modifier l' alignement vers le haut. Deux choses doivent encore être corrigées l'espacement entre elles et fait qu'il n'est toujours pas bien aligné sur le dessus Le texte est un peu trop bas, alors prenons le paragraphe et stylisons-le un peu. Marge de 20 pixels sur le côté, comme dans le dessin et une marge négative sur le dessus pour le déplacer vers le haut et l'aligner parfaitement avec les étoiles. Donnons-lui également une largeur maximale pour que le texte saute et se coupe où nous le voulons Oups, que s'est-il passé ici ? Cochez la case flexible. Bien entendu, cela a justifié une situation qui les pousse à Il suffit de le mettre sur la ligne gauche, et c'est tout. OK, ajoutons maintenant ce diviseur horizontal. Oh, attendez, il n'existe pas de webflow en ligne. Les lignes du Web sont constituées, comme d'habitude, de blocs div. Line est juste un div qui a une hauteur d'un pixel ou quelque chose de petit comme ça. Ajoutez un fond noir avec 15 % d'opacité. Donnez-lui une largeur. Et ajoutons des marges en haut et en bas pour espacer le contenu. C'est facile. Vous avez peut-être remarqué que parfois je nomme les classes moi-même et parfois je laisse Webflow créer automatiquement une classe pour moi Le fait est que nous devrions toujours nommer nos propres classes. Mais au début, c'est bon. heure actuelle, nous ne faisons que nous entraîner et nous apprenons Webflow Nous ne voulons donc pas nous torturer en prenant de nouvelles décisions supplémentaires sur la façon de nommer les classes et tout ça Pour l'instant, nous allons simplement nommer des classes importantes telles que flexbox, container ou section, quelque chose que nous allons certainement utiliser, et nous devons savoir comment nous les nommons. Et pour tout le reste, comme ces petits paragraphes ou quoi que ce soit d'autre, nous pouvons simplement laisser Webflow décider automatiquement pour nous Bon, pour récapituler, en fait, il n'y a rien à récapituler, car nous n'avons pas appris de nouveau concept dans cette vidéo, mais nous avons appris à utiliser ce que nous savons déjà de différentes manières, comme ajouter une marge négative sur car nous n'avons pas appris de nouveau concept dans cette vidéo, mais nous avons appris à utiliser ce que nous savons déjà de différentes manières, comme ajouter une marge négative sur l'image pour la mettre sur le côté ou utiliser un bloc div d'un pixel de hauteur pour créer une ligne et un peu plus d' entraînement avec 81. Webflow : Pied de page (application de chat): Dans la toute dernière section de cette page, le pied de page, la mise en page est assez simple Nous avons utilisé notre grille à 12 points pour diviser le pied de page en six blocs égaux Chaque bloc est composé de deux colonnes et un bloc est réservé l'espace entre le logo et les liens du pied de page L'option la plus évidente ici est d'utiliser Flexbox. Comme d'habitude, ajoutons la section et un conteneur à l'intérieur. Ajoutez un autre bloc et appliquez-lui notre classe flexbox habituelle Ajoutons maintenant un autre bloc div à l'intérieur, que nous appellerons colonne de pied de page Je vais lui donner un arrière-plan et une hauteur temporaires juste pour voir ce que nous faisons. Et tout comme dans nos designs, nous allons utiliser six colonnes. Il s'agira de colonnes de même largeur, sorte que l'ensemble de la boîte flexible sera divisé en six parties égales Nous pouvons le faire en utilisant des points de pourcentage, 100 % divisés par six, ce qui nous donne 16,666, et ainsi de suite Au lieu de faire le calcul par nous-mêmes, Webflow peut le faire à notre place, tout comme Figma À l'intérieur du champ de remplissage, tapez 100 % divisé par six. Si nous le dupliquons six fois, vous pouvez voir comment il occupe tout l'espace. Ajoutons les marges sur le côté, comme nous l'avons fait dans nos designs. Ils sont séparés par un espace de 30 pixels. Ici, nous devrions en ajouter la moitié de chaque côté, marge gauche et droite de 15 pixels. Ainsi, les marges des colonnes adjacentes ajouteront jusqu'à 30 pixels. Cependant, nous ne devrions pas avoir de marges sur les première et dernière colonnes, car ces marges ajouteront de l'espace supplémentaire au rembourrage déjà existant qui fait partie de la section div Ce n'est peut-être pas si grave, mais c'est une bonne habitude d'être constant. Nous pouvons le faire facilement en utilisant des classes combinées. Il suffit de créer d'abord une classe de combo et de supprimer la marge de gauche et la même chose sur la dernière colonne. C'est bon. Maintenant, mettons le contenu dans les colonnes correspondantes. Oh, au lieu d'utiliser un paragraphe pour du texte normal, nous avons une autre option pour le texte appelée textblock, que nous allons utiliser pour ce slogan sous le logo Le bloc de texte est essentiellement un div normal contenant du texte. Il fonctionne de la même manière qu'un élément de paragraphe, mais ils ont des objectifs différents. Vous devez utiliser le paragraphe pour le texte long de plusieurs lignes et le contenu principal de la page et les blocs de texte pour tout le reste qui n'est pas un titre, un paragraphe ou un lien. Vous pouvez utiliser les deux de manière interchangeable. Le résultat est le même, mais c'est une bonne habitude les utiliser à bon escient, car les moteurs de recherche et les lecteurs d'écran peuvent identifier la structure de votre contenu sur la page Une autre façon de créer un bloc de texte consiste simplement à double-cliquer dans un bloc div normal et à commencer à taper. Cela le transformera en bloc de texte. Pour les liens de bas de page, nous allons ajouter des éléments de lien réguliers Composons le lien avant de dupliquer cette façon, les doublons porteront la classe La couleur de la mousse montre déjà la couleur grise, mais pour une raison ou une autre, elle est toujours bleue sur la toile. C'est un comportement un peu étrange qui ressemble à un bogue du côté de Webflow. Il est exact que c'est bleu car la couleur grise de la balise body est remplacée par balise de lien plus spécifique, qui a une couleur bleue par défaut Donc, en réalité, le panneau des propriétés devrait être bleu et non gris, mais il y a peut-être une raison pour laquelle cela ne se produit pas, que je ne vais pas aborder maintenant car cela n' ajoute pas vraiment de valeur à cette leçon. Donc, pour résoudre ce problème, il suffit de sélectionner une autre couleur et de sélectionner à nouveau le gris. Il n'est pas nécessaire de le souligner pour pouvoir le supprimer en sélectionnant « Non sous la décoration du texte ». Nous avons besoin d'un effet de survol pour ce lien, sinon il ne ressemblera pas à des liens Nous pouvons simplement le transformer en col bleu au survol. C'est une option simple et efficace. Nous pourrions ajouter un effet de transition difficile ici, comme nous l'avons fait avec les boutons, mais ce n'est pas vraiment nécessaire. Cela ne représente pas beaucoup de changement, alors maintenons-le sans transition. Maintenant, dupliquons. Mais oups, ça les met côte à côte. Pourquoi est-ce le cas ? Peux-tu deviner ? Parce que l'affichage des liens est défini sur Inline. Cela signifie qu'il s'écoule comme du texte, ce qui est le cas. Ils vont donc aller l' un à côté de l'autre. Si nous appliquons plutôt un bloc d'affichage, nous savons ce qui va se passer. Il occupera toute une largeur et s'empilera les uns sur les autres. Mais cette méthode présente un petit problème, pas vraiment un problème, plutôt une expérience utilisateur idéale. Comme il s'agit d'un lien sur toute la largeur, cela signifie qu'il est possible de cliquer même sur un espace vide Contrairement à notre barre de navigation, où la même chose se produit, les liens interagissent même sur l'espace vide Mais ici, la bordure en bas représente bien le fait que le tout est un lien. Si nous ne faisions que surligner le texte, ce serait également étrange dans la barre de navigation Alors, comment pouvons-nous les empiler les uns sur les autres sans qu'ils s'étirent bord à bord ? En utilisant Flexbox. Nous pouvons donner au parent une disposition flexible et lui donner la direction verticale plutôt qu'horizontale. Ensuite, ligne gauche, assurez-vous de donner cette ligne gauche. Sinon, il s'étirera bord à bord par défaut comme un bloc. Et maintenant, ils sont empilés les uns sur les autres et aucun espace vide ne fait partie du lien. OK, stylisons notre titre. Au lieu d'appliquer une classe à ces titres de bas de page, définissons le style de l'une des balises d'en-tête, S H trois, peut-être C'est peut-être le bon niveau, H deux, que nous pourrions utiliser pour quelque chose de plus grand. Un titre de niveau intermédiaire. Vous souvenez-vous de la façon dont les tags étaient stylisés ? Nous devons sélectionner une balise dans le sélecteur, et nous sommes maintenant en mesure de styliser les trois balises H. Supprimons la marge supérieure et ajoutons une marge inférieure de 20 pixels comme dans les dessins. Et nous y voilà. Désormais, les trois balises H seront stylisées comme celui-ci par défaut. Vous remarquerez que les colonnes ne s'alignent pas sur le dessus comme c' est le cas dans le design Jetons un coup d'œil aux en-têtes de nos boîtes flexibles Vous voyez, cela indique un centre de ligne. Ce que nous voulons, c'est un haut linéaire au lieu d'un stretch. Comme d'habitude, ajoutons une classe combinée à cette boîte flexible avant d'apporter des modifications afin de ne pas gâcher les autres instances Il est préférable d'étirer car les colonnes vides s' étireront également et seront visibles. Finissons-en avec les liens. Supprimez l'arrière-plan. Et c'est tout. Dans ce projet pratique, nous n'allons pas lier ces pages car nous n'en avons pas d'autres, mais nous pourrions connecter le lien des contacts, par exemple, pour lier l'adresse e-mail, afin d'ouvrir une nouvelle fenêtre de courrier électronique et l'utilisateur clique dessus. Il suffit de saisir l' adresse e-mail dans ce champ. Nous pouvons sauter la ligne d'objet. Et nous pouvons faire la même chose pour la liaison téléphonique. Et aussi pour l'adresse du bureau, nous pourrions lier une URL Google Maps. Vérifiez l'ouverture d'une nouvelle fenêtre afin que Google Maps ne s' ouvre pas directement dans cette fenêtre forçant les utilisateurs à quitter le site. Et enfin, ajoutons le texte du copyright en bas. Nous allons à nouveau utiliser le bloc de texte au lieu de l'élément de paragraphe. J'ai ajouté le bloc de texte à l'intérieur du conteneur mais en dehors de la boîte flexible. Et nous pouvons ajouter une marge de 180 pixels sur le dessus, comme dans le cas de nos designs. Dans nos designs, le texte du copyright se trouve tout près du bas de la page, à 30 pixels du bas de la page. Mais dans Webflow, c'est beaucoup plus élevé car notre bloc de sections possède un rembourrage de 90 pixels Nous devons remplacer le rembourrage de 90 par 30 pixels. Mais avant cela, nous devons ajouter une classe combinée. Et voilà. Nous en avons terminé avec version de bureau de notre page. Passons au mode aperçu et voyons à quoi tout cela ressemble. Donc, pour récapituler, nous avons construit le pied de page en utilisant une disposition flexbox Nous avons donné un pourcentage de largeur aux colonnes de pied de page afin qu'elles se rétrécissent et s'étendent de manière égale, et nous avons laissé l'une des colonnes vide pour créer un espace entre le logo et les liens du pied Nous avons découvert un nouveau bloc de texte d'élément, comment il est utilisé pour texte autre qu'un paragraphe dans un usage plus général. Ceci conclut la section actuelle. Dans la section à venir, nous apprendrons comment rendre notre page réactive, afin qu'elle soit belle et conviviale sur n'importe quel appareil. 82. Introduction à la conception Web réactive Design: À l'époque du responsive design, les sites Web étaient réduits sur les appareils mobiles. De nombreux sites Web sont encore fabriqués ainsi jusqu'à aujourd'hui. Tout récemment, je cherchais des informations sur le système de paiement de Piers et je suis leur article d'aide 0R la page de l'article d'assistance, qui ressemble à ceci Il s'agit d'une version abrégée de leur site pour ordinateur. Utiliser ce type de site Web sur un téléphone portable est tout simplement super ennuyeux. Vous devez zoomer et déplacer, et vous connaissez la marche à suivre. Heureusement, avec Webflow, nous pouvons utiliser la puissance du design réactif et proposer à nos utilisateurs différentes mises en page et des mises en page réactives très spécifiques pour leurs téléphones et appareils spécifiques qu' ils consultent De cette façon, tout le monde bénéficiera d' une expérience optimale avec notre site Web. Dans cette section, c'est exactement ce que nous allons faire, rendre notre page d'accueil réactive et l' optimiser pour différentes tailles d'écran. Tout d'abord, voyons comment Webflow fonctionne en termes de réactivité À l'intérieur du designer, nous pouvons voir les commutateurs pour différents appareils. Le premier est celui des ordinateurs de bureau. C'est là que nous en sommes. Ensuite, il y a la tablette, le paysage mobile et le portrait mobile. En termes techniques, nous appelons ces points d'arrêt ou requêtes médiatiques Ils fonctionnent comme des points de contrôle demandant au navigateur de modifier le style des éléments si largeur du navigateur est d'une certaine taille et de certains pixels Par exemple, si nous modifions le style de l'affichage d'une tablette , cette modification ne sera pas affectée sur un ordinateur de bureau. Il s'agit essentiellement d'ajouter une règle CSS supplémentaire qui dit : si les fenêtres du navigateur ont une certaine taille, alors affichez un fond noir à la place. Et si nous décidons de changer la couleur d'arrière-plan sur la version de bureau, cette modification n'aura pas lieu sur l'affichage de la tablette car nous remplacerons la couleur d'arrière-plan Cela utilise la même règle d'héritage que tout le reste. N'oubliez pas que les classes combinées contiennent toutes les informations de style de la classe de base. Mais dès que nous changeons un style particulier dans la classe de combo, nous le remplacons définitivement Ainsi, aucune modification future de la classe de base n'affectera le style en question. Je parle de style particulier parce que c'est un mot clé important ici. Tout comme les classes, il en va de même pour les points d'arrêt, nous n'avons touché aucun autre style couleur d'arrière-plan Tout le reste sera donc hérité de la version de bureau chaque fois que nous apporterons la modification, comme cette bordure, par exemple. Les modifications que nous apportons aux différentes vues ne s'appliquent qu'aux styles. Si vous modifiez la structure de la page ou si vous ajoutez de nouveaux éléments, cela se reflétera partout. Pourquoi ? Parce que ces points d'arrêt sont des fonctionnalités CSS et ne font pas partie du HTML En CSS, nous stylisons les choses. Nous ne pouvons pas modifier le squelette de la page. Nous ne pouvons modifier que l'apparence, bien que nous ayons la possibilité de masquer et d' afficher des éléments à l'aide de CSS. Donc, si nous voulons quelque chose sur tablette mais pas sur ordinateur, nous pouvons simplement le masquer. Cette image est masquée dans la version de bureau, mais elle fait toujours partie du HTML et reste dans le navigateur, comme vous pouvez le voir Autre point à noter à propos des changements de style lorsque vous apportez une modification sur une tablette, toutes les modifications se répercutent sur le plus petit écran. En d'autres termes, le paysage mobile et le portrait mobile hériteront des modifications de la tablette et le portrait mobile héritera des modifications du paysage mobile Vous pouvez remplacer les styles sur les petits appareils, mais les modifications apportées sur les petits appareils n' auront aucune incidence sur les appareils plus grands Cela utilise la même hiérarchie d'héritage que les classes. portrait mobile hérite des styles du paysage mobile, qui à son tour hérite de ses styles de la tablette, qui hérite des styles Chaque point d'arrêt de l'appareil possède une plage. Nous pouvons voir cette gamme à l'aide de ce réviseur Canvas. La tablette s'étend jusqu'à un maximum de 991 pixels et se réduit à 768 Cela signifie que 992 pixels sont le point de départ de l'ordinateur de bureau et 767 pixels l'endroit où il devient mobile Les modifications que nous apportons à chaque point d'arrêt s'appliquent à la plage C'est pourquoi nous devons vérifier en redimensionnant le canevas à chaque vue pour nous assurer qu'il répond bien Par défaut, Webflow affiche les tailles les plus courantes dans chaque vue Lorsque vous redimensionnez ce curseur, vous verrez que Webflow affiche appareils courants pour cette largeur de pixels spécifique C'est un bon moyen pour nous de voir combien d'appareils sont concernés par nos modifications et de nous assurer que nous obtenons des conceptions et des versions optimales pour les appareils les plus populaires. Une chose à noter, nous ne sommes pas en mesure d'appliquer un style spécifique ou des appareils indépendants. Lorsque nous appliquons des styles au portrait mobile, ce style est défini pour l' ensemble des largeurs et des appareils dont la résolution d'écran se situe dans cette plage Il y a encore une chose que je voudrais vous montrer avant de passer à l'optimisation. Nous pouvons réinitialiser tous les changements de style que nous apportons en cliquant sur le style bleu puis sur Réinitialiser, comme nous le ferions avec les classes. La réinitialisation supprimera les remplacements et héritera de la valeur de la première taille de niveau supérieur Il est même indiqué ici, où sera hérité le style après la réinitialisation ? Dans ce cas, classe de section héros pour une version tablette. L'icône en face indique qu'il s'agit d'une version tablette. En tant que raccourci, maintenez la touche enfoncée ou sélectionnez une option lorsque vous cliquez et le système se réinitialisera immédiatement. Et pour la tablette, cela indique qu'elle reviendra à la version de bureau et vous pouvez voir avec une petite icône d'ordinateur portable Pour récapituler, nous sommes en mesure de modifier le style de nos éléments pour quatre tailles différentes : ordinateur de bureau, tablette, paysage mobile et portrait mobile Pour chacun de ces types d'appareils, nous avons également la possibilité de réduire et d' étendre le navigateur qu'il contient. Nous pouvons donc clairement voir à quoi ressemblera notre page Web pour un certain nombre d'appareils, par exemple un iPhone six ou sept. Les styles sont hérités de haut en bas, des appareils les plus grands aux plus petits, et non dans des directions opposées. Les changements sur mobile n'affecteront donc pas les tablettes ou les ordinateurs de bureau. Mais le changement sur tablette affectera le mobile. Très bien, ensuite, nous allons descendre et optimiser notre page pour ces appareils, commençant par la section des héros. 83. Réactif : section avec Hero - tablette: Bien, commençons donc par la section des héros. Nous allons procéder un par un pour chaque appareil et optimiser le style. Tout d'abord, la tablette qu'il vous faut. Quels sont les problèmes que nous pouvons identifier ici ? Nous avons l'image qui rétrécit trop à cause du manque d'espace Le contenu de gauche a une largeur minimale, si vous vous en souvenez, ce qui signifie que ce sont les images qui prennent le dessus. Ensuite, nous avons une barre de navigation qui doit être corrigée. Il va falloir voir si nous pouvons réellement intégrer nos liens habituels ici. Sinon, nous conserverons le menu des hamburgers et le styliserons. La section des héros est bien trop étendue pour deux raisons. abord, en raison du 100 VH que nous avons appliqué à cette section, et deuxièmement, en raison de ce rembourrage similaire de 20 VH. Voyons si nous pouvons adapter les liens de navigation. Alors, comment désactiver cette icône de hamburger et afficher les liens de navigation Nous pouvons le faire à partir des paramètres de la barre de navigation. Cliquez n'importe où dans la barre de navigation et accédez à SETI. Comme vous pouvez le voir, il est indiqué l'icône du menu pour tablette et ci-dessous. Si nous déplaçons le curseur vers les smartphones, cela le désactivera depuis la vue tablette En règle générale, pour l'expérience utilisateur, il est préférable d' afficher des liens plutôt que de ne pas les afficher. Pour des raisons évidentes, il est plus facile de le trouver et de s'y retrouver. L'immobilier sur tablettes et appareils mobiles est très important. L'espacement sur ces appareils doit être beaucoup plus petit que ce que nous ferions sur un ordinateur de bureau Supprimons donc le grand rembourrage appliqué à la section Au lieu de VH, cette fois, nous allons utiliser des pixels ordinaires car cela nous donnera un aspect plus prévisible, disons neuf pixels Très bien, l' espacement global pour le héros est plutôt bon et nous n' avons pas d'espacement excessif. C'est une bonne chose. Alors, que faire d'une image de héros ? C'est encore assez petit en comparaison. Le contenu de gauche est trop grand et il pousse l'image. Sur ordinateur de bureau, nous disposions de suffisamment d'espace pour pouvoir utiliser des titres aussi gros, mais là, ce n'est pas le cas, nous pouvons commencer à réduire la taille du bloc de gauche R donc Nous avons donc réduit le contenu, mais l'image ne grandit pas. Pourquoi est-ce le cas ? Parce que nous avons des paramètres de largeur minimale appliqués au bloc de gauche, et même si le contenu rétrécit, ce n'est pas le cas de la boîte elle-même Modifions donc cette largeur minimale. Très bien, ça a l'air plutôt bien. Nous allons tester la fluidité de cette mise en page en redimensionnant notre Génial. Cela s'écoule très bien sur l'ensemble de la page. La mise en page de la tablette pour la section héros est donc terminée. Toutes les modifications que nous avons apportées n' ont pas été répercutées sur notre bureau. C'est toujours comme ça que nous l'avons laissé. Passons maintenant aux vues mobiles. 84. Réactif : section de héros - Mobile 1: Comme je l'ai mentionné dans une vidéo précédente, les changements de style se répercutent sur des écrans plus petits. Ainsi, toutes les modifications que nous avons apportées à la tablette se répercutent également sur les vues mobiles. En général, c'est un bon début et peut même parfois donner de bons résultats pour les mobiles. Mais souvent, cela ne suffit pas, et nous devons également apporter des modifications supplémentaires sur les mobiles J'aime utiliser la même mise en page pour le paysage mobile et le portrait mobile. J'utilise le portrait mobile comme guide lorsque je planifie dans ma tête et j' essaie d'utiliser des solutions pour la vue paysage qui fonctionneront également en mode portrait. C'est juste un bon moyen de gagner du temps et de gagner en efficacité. Donc, sur la base de la vue portrait sur mobile, je sais que presque tout sera en disposition verticale. Peu d'espace pour les colonnes et les mises en page côte à côte. Il n'y a aucun moyen d'associer image et contenu du héros l' un à côté de l'autre. Nous devrons trouver une solution d'alignement vertical. Heureusement, nous avons Flexbox pour nous aider dans ce domaine. La direction par défaut de Flexbox est horizontale, mais nous pouvons changer cette direction à tout moment pour passer à la verticale Et les options d'alignement sont également mises à jour lorsque nous changeons de direction. Et ce changement de direction ne s' appliquera pas à la version de bureau. Là, il est toujours réglé à l'horizontale. C'est à quel point la flexbox est géniale. Nous pouvons modifier la mise en page sans modifier la structure HTML ni définir les styles sur des appareils spécifiques. Mais avant d'apporter ces modifications, attribuons à notre boîte flexible une classe combinée car nous utilisons cette boîte flexible par défaut ailleurs, exemple sur Footer, et nous ne voulons pas apporter toutes ces modifications à toutes les instances Et alignons le contenu au centre. La vue réelle sur le paysage n'est pas aussi haute. Pensez-y lorsque vous maintenez votre téléphone en mode paysage. Vous n'allez pas avoir un écran visible aussi haut. Ça va être plutôt comme ça. Cela signifie que l'immobilier vertical est très important pour nous. Essayons donc de réduire les espaces et de les adapter autant que possible. Par exemple, ce rembourrage pour cette section. Nous le réduisons déjà en mode tablette, mais nous devrions le réduire un peu plus. Il en va de même pour la marge du paragraphe. 40 pixels, ça a l'air correct. La photo est un peu trop haute et la majeure partie ne sera pas visible sur un seul écran, et l'utilisateur devra la faire défiler. Définissons donc la largeur maximale de cette image. Je définis la largeur maximale et non la hauteur car si vous définissez la valeur de la hauteur, cela se produira. La modification de la hauteur ne préserve pas le rapport hauteur/largeur, mais la valeur de la largeur le fait. Donc, sur les images, il est préférable d'utiliser la largeur pour les redimensionner. Bien, il s'est passé quelque chose d'intéressant ici. L'image ne rétrécit plus sur un écran plus petit et disparaît de la page. C'est ce qu'on appelle un débordement lorsque des éléments sortent de leur boîte parente. Vous rencontrerez souvent des objets débordants, en particulier sur les petits écrans Ce débordement peut se produire pour de nombreuses raisons et affecter l'ensemble de la page Pour une raison quelconque, l'image refuse de rétrécir, ce qui crée un espace supplémentaire sur toute la page. Alors pourquoi l'image ne rétrécit plus ? Parce que lorsque nous avons donné à une image une largeur maximale de 500 pixels, nous lui avons donné l'autorisation agrandir jusqu'à 500 pixels C'est ce qu'elle fait, en ignorant les dimensions de son élément parent. Ce type de comportement est courant avec les images. Certains autres éléments, par exemple un paragraphe, ne le feront pas, mais les images le feront parce qu'elles ont une largeur exacte dans le fichier. O a une largeur spécifiée dans les paramètres. Ainsi, par défaut, l'image essaiera toujours d'atteindre sa taille de fichier d'origine. Et lorsque nous fixons la largeur maximale à 500, elle s'arrête à 500, mais ne diminue pas au-delà tant que cela est autorisé. Pour éviter ce type de comportement, Webflow ajoute une valeur par défaut pour chaque image que vous déposez dans une largeur maximale de 100 % Cela signifie que l' image occupera au maximum 100 % de son élément parent. Pour cette raison, il est préférable de ne pas modifier cette valeur. Ce truc m'a toujours causé beaucoup de confusion et d' erreurs inutiles sur mon écran Alors maintenant, au lieu de styliser l'image elle-même, je préfère styliser le parent de l'image. De cette façon, nous pouvons éviter de nombreux comportements étranges en fin de compte. Très bien, donnons plutôt une largeur maximale de 500 pixels à l'élément parent. Maintenant, cela se comporte exactement comme nous le voulions. Il ne pousse pas au-delà de 500 et il rétrécit quand il le faut D'accord, nous pouvons conclure la vue du paysage ici. Nous avons toujours ce débordement horizontal, mais cela provient d'une autre partie de la page, et nous nous en occuperons une fois que nous y arriverons Nous devons styliser le menu Hamburger, mais nous le ferons au final une fois que nous aurons terminé avec toutes les vues de la section des héros Ensuite, nous allons passer à l'affichage portrait sur mobile. Restez dans les parages. 85. Réactif : section de héros - Mobile 2: Finissons-en avec la vue portrait. Presque tout déborde ici, mais nous pouvons corriger tout cela avec mesures similaires à celles que nous avons utilisées lors des vues précédentes Tout d'abord, libérons de l'espace en réduisant encore plus le rembourrage à 30 pixels. Idem sur la barre de navigation. Dans la barre de navigation, un rembourrage par défaut est appliqué au bloc de marque un rembourrage par défaut est appliqué au ordinateurs de bureau et les tablettes n'en ont pas, mais les mobiles, oui. Supprimons donc ce rembourrage En fait, j'ai oublié de le remarquer sur la vue du paysage. Il est là aussi, alors retirons-le de là. Il ne nous reste plus qu'à réduire la taille du contenu. d'abord, si vous regardez le bloc de gauche, vous verrez qu'il a une largeur minimale de 300 pixels, il refuse donc de rétrécir au-delà de ce point. Supprimons ce minimum et définissons-le sur automatique. Et diminuons la taille de la police du titre. Le truc avec le titre, c'est que sur l'écran le plus étroit, il faut le rendre très petit Sinon, on obtient un mot par ligne, ce qui n'est pas une idée. Cet écran super étroit est destiné aux anciens téléphones. L'utilisation du Web par ces tailles d'écran est très faible. J'ai vérifié les statistiques, et ils ne semblent même pas atteindre 1 %. Donc, la plupart du temps, je ne fais pas tout mon possible pour le rendre parfait pour ces tailles d'écran et pour sacrifier les tailles d'écran les plus courantes. Mais il existe un moyen de le rendre presque parfait pour l'ensemble de cette gamme. Au lieu de pixels, nous pouvons utiliser des unités réactives pour la police. Dans ce cas, VW pour la largeur de la fenêtre d'affichage. Si nous donnons aux amateurs environ 14 VW, cela devrait rétrécir et grossir bien avec la largeur de l'écran maintenant aux boutons. Avec les boutons, nous pouvons modifier le réglage de l' affichage. Ainsi, au lieu de s'asseoir l'un à côté de l'autre, ils peuvent se placer l'un sur l'autre. N'oubliez pas quel paramètre d'affichage correspond à ce bloc d'affichage, qui va l' étirer bord à bord. Supprimez ensuite cette marge gauche et ajoutez une marge supérieure pour créer une séparation, et c'est tout. Notre section consacrée aux héros est en quelque sorte terminée. Nous allons conserver la barre de navigation dans la prochaine vidéo. 86. Réactif : Menu de navigation (Appli de chat) ou ): Jusqu'à présent, nous avons modifié nos versions réactives. Dans cette vidéo, nous allons personnaliser bouton du menu de la barre de navigation ou, comme l'appellent les écoliers, le menu hamburger, vous savez, parce que l'icône ressemble en quelque sorte à un À l'heure actuelle, cela semble assez horrible, ne vous inquiétez pas. Ce n'est pas grave de le styliser. Commençons par styliser le bouton lui-même. L'icône du menu qui se trouve à l'intérieur peut être modifiée. Nous ne sommes pas coincés avec ça. Si nous voulons obtenir notre propre icône et l' ajouter à la place, nous pouvons simplement supprimer l'icône et ajouter un élément d'image dans le bouton de menu, qui est un simple div, et télécharger votre propre icône au format SVG ou PNG Cependant, le simple fait de conserver cette icône par défaut présente un avantage , car la couleur est modifiable à partir des paramètres de police, ce qui facilite le changement de couleur Nous pourrions également créer notre propre icône de menu à partir du bloc div. Parfois, je le fais lorsque je crée une animation super géniale pour mon client Pour l'instant, restons-en à une icône par défaut. D'abord, la couleur. Nous en aurons besoin en blanc. Nous pouvons changer la couleur du téléphone en blanc, et cela fera l'affaire. Lorsque vous personnalisez cet élément, limitez-vous au style de l'élément du bouton de menu plutôt qu'à celui de l'icône. Ensuite, augmentons la taille. C'est bien trop petit. Nous pouvons le refaire depuis les paramètres du téléphone, et 30 pixels devraient suffire. Et réduisons un peu le rembourrage. Le rembourrage détermine dans quelle mesure ce champ est cliquable et visible dans le menu déroulant Enfin, alignons-le sur le logo. Nous voulons qu'il soit centré et qu'il ne flotte pas dans les airs comme c'est le cas actuellement. Pouvons-nous le centrer ? Nous pourrions continuer et changer l'affichage de la barre de navigation en flexbox et faire tout cela Mais une option plus simple consiste simplement à ajouter une marge supérieure sur le bouton, puis à le tirer vers le bas. Nous devons le mesurer à l'œil nu. Vous pouvez mieux le voir en mode portrait, et 27 ou quelque chose comme ça semble être un bon choix. Nous n'avons pas besoin d'ajouter une animation de survol ici, car elle ne s' affiche que sur les mobiles sur lesquels nous n'utilisons pas de souris. Le survol est donc Maintenant, personnalisons l' intérieur du menu. Styliser à l'aveuglette n'est pas agréable, nous pouvons donc ouvrir le menu et le styliser lorsqu'il est ouvert Nous pouvons le faire à partir des paramètres, sélectionner n'importe quel élément de la barre de navigation, accéder aux paramètres, puis cliquer sur Afficher à côté de l'option de menu Cela permettra de garder le menu ouvert jusqu'à ce que nous le stylions. Il existe deux autres options de type de menu, mais je n'en suis pas un grand fan. J'aime bien cette version déroulante par défaut. Il est plus facile à utiliser et nécessite moins de style. Voyons maintenant la structure de l'ensemble du menu. Ce bloc de menu à boutons est exactement le même que celui qui contient tous nos liens dans la vue de bureau Sur le bureau, il n'a pas d'arrière-plan et est disposé horizontalement. Mais si nous y apportons des modifications sur ordinateur, ces modifications seront également répercutées sur l'affichage mobile. Il en va de même pour les modifications de mise en page. Donc, si un jour vous voyez des liens mobiles, arrangés bizarrement, vérifiez si vous avez apporté des modifications à la version de bureau Et dans ce bloc de menu Knob, nous avons tous les liens, y compris le bouton Donc, pour styliser l'ensemble du menu, nous allons d'abord styliser le menu de navigation, puis nous allons styliser les liens qu'il contient. Donnons-lui une couleur de fond différente. Notre couleur noire du design est plutôt belle. Ajoutons le même rembourrage sur côtés, comme dans notre section consacrée aux héros De cette façon, nous serons cohérents avec notre réseau. heure actuelle, les liens sont légèrement entaillés à l'intérieur car ils ont leur propre rembourrage, que nous allons supprimer une fois que nous aurons stylisé les Ajoutons également un rembourrage supérieur et inférieur, mais fixons-le à 30 pixels au lieu de 60 heure actuelle, nous avons des étoiles héritées du bureau, comme le soulignement sur le survol et les rembourrages Réparons d'abord ce rembourrage. Nous n'avons pas besoin de rembourrages latéraux. Et choisissons un haut et un bas égaux pour maintenir la belle séparation entre les liens. 20 pixels, ça a l'air bien. Nous n'avons pas besoin d'un effet de survol car il est destiné aux appareils mobiles. Comment pouvons-nous le supprimer de l'état de survol, que nous pouvons trouver ici sous États Cliquez sur X sous le style de bordure pour désactiver la bordure boutonnée Lorsque vous testerez cela, vous verrez que la bordure apparaît toujours. C'est parce que cette frontière activée non seulement sans survol, mais également à l'état normal Nous devons donc également le retirer de son état normal pour éviter ce comportement amusant. Et là maintenant, nous n'avons pas de survol. OK, maintenant le bouton, débarrassons-nous d'abord de la marge gauche. Passons ensuite à l' affichage en bloc intégré. À l'heure actuelle, il est prêt à se bloquer. C'est pourquoi ça s'étire comme ça. Pour une raison quelconque, le bouton s'aligne au milieu. Cela signifie qu' une sorte de propriété sur l'élément parent fait cela. Deux propriétés peuvent l'aligner au centre. Tout d'abord, la disposition de la boîte flexible, mais notre menu de proximité n'est pas une boîte flexible, donc ce n'est pas Ensuite, il y a un alignement de texte normal, ce qui serait logique car éléments des blocs intégrés peuvent être alignés à l'aide de l'alignement du texte Mais si nous vérifions l'alignement du texte du menu de navigation, celui-ci est réglé sur la gauche. Et c'est trompeur car en réalité, il n'est pas prêt à partir Si vous remplacez la propriété quelque chose d'autre, puis que vous la remettez dans l'alignement de gauche, cette fois, elle fera ce qu'elle dit. Cela semble être dû à Webflow. Je me trompe peut-être, mais il semble qu'il existe un alignement central par défaut sur le bloc du menu de navigation, et Webflow, pour une raison ou une autre, ne le reflète pas dans les styles Chaque fois que vous tombez quelque chose comme ça, suivez simplement votre logique, et si ce que vous voyez n'a pas de sens, jouez avec les styles, et parfois vous remarquerez qu'ils ne font que faire semblant. Une chose à noter, vous devez appliquer l'alignement au parent, et non au bouton lui-même. L'alignement du texte du bouton alignera simplement le texte à l'intérieur du bouton. Bien, diminuons la marge de ce bouton pour qu'elle corresponde au reste L'espacement que nous utilisons entre les liens est de 20 pixels en haut plus 20 en bas, soit un total de 40 Donc, totalisons cela à 40 ici. 20 depuis le dernier lien et 20 pour la marge supérieure. Et pareil pour la marge inférieure. L'espace réel en haut est de 30 pixels depuis le remplissage du menu et de 20 pixels depuis le rembourrage du lien de navigation Pour correspondre à ce total de 50 pixels, ajoutons les 20 pixels inférieurs du bouton Là-dedans, ça a l'air bien. Nous pouvons conserver l'effet de survol ici. Nous n'en avons pas besoin, mais cela ne fait aucun mal non plus. Et parfois, sur les boutons, c'est très agréable d'appuyer dessus et cela change en quelque sorte l'état. Enfin, ajoutons la même couleur de fond sur le hamburger Maintenant, pour cela, il est important ajouter cette couleur d'arrière-plan à l'état ouvert, car si nous ajoutons un arrière-plan à un état générique, nous obtiendrons l'arrière-plan même lorsque le menu sera fermé. Changer de style pour l'état ouvert revient un peu à changer de style pour l'état survol Il doit afficher cette étiquette verte, mais l'état ouvert n'est pas répertorié dans le menu déroulant de l'État Au lieu de cela, l'état ouvert doit être activé dans les paramètres en ouvrant notre menu. Il ne suffit pas d'ouvrir le menu. Assurez-vous que cette étiquette verte est présente. Le menu de navigation est peut-être ouvert, mais cette étiquette d'état ouvert n'apparaît pas, ce qui signifie que ce que vous allez modifier sera pas à l'état ouvert. Vous devez cliquer une nouvelle fois sur le bouton du menu pour que le badge soit mis à jour. Vous pouvez maintenant voir l'étiquette ouverte apparaître. Cela signifie que les modifications que nous apportons maintenant seront reflétées que sur l'état ouvert Nous pouvons maintenant changer la couleur de fond et arrondir le coin supérieur pour qu'il soit plus poli. Mais au lieu d'arrondir les quatre coins, nous allons simplement arrondir les deux premiers et faire en sorte que les deux derniers soient plats De cette façon, ils se connecteront en quelque sorte au menu. Pour ce faire, nous allons devoir sélectionner l'option des coins individuels à l'intérieur des bordures, puis sélectionner les deux coins supérieurs, puis les placer environ six pixels. Nous allons tester nos résultats dans l'aperçu. Et voilà, tout a l'air parfait. Il est également très beau en mode portrait. Nous n'avons pas besoin de changer quoi que ce soit sauf un petit détail. En mode portrait, nous avons un rembourrage de page différent. En paysage, nous en avons 60, mais en portrait, nous en utilisons 30. Nous n'avons même pas besoin d' ouvrir le menu pour cela, sélectionner le menu Nab dans le navigateur, de modifier le remplissage 60-30 et c' Nous avons donc conçu avec succès le menu Hamburger pour les appareils mobiles Nous avons modifié la couleur et la taille de l'icône en utilisant simplement les styles de police. Nous avons joué avec les marges et les marges du bouton de menu pour bien l'aligner dans la barre de navigation Ensuite, à partir des paramètres, nous avons ouvert le menu et stylisé l'élément de menu, vous avons donné l'arrière-plan que nous voulions et nous avons ajusté le rembourrage Nous avons apporté de petites modifications aux liens de navigation et à un bouton de navigation, supprimé le survol des liens et modifié les paramètres de remplissage Et nous avons appris à modifier le style du menu uniquement lorsqu'il est ouvert. La section Hero est entièrement terminée ici pour toutes les vues de l'appareil. Dans les prochaines vidéos, nous allons passer au reste de la page. 87. Réactif : débordement: Nous allons maintenant passer au bas et optimiser la section suivante de cette page. Et pendant ce temps, nous allons apprendre un nouveau concept appelé overflow Cette section s' affiche plutôt bien sur tablette et ne nécessite pas beaucoup de modifications. La seule chose que je vais changer ici est le rembourrage supérieur et inférieur de la section Comme je l'ai déjà mentionné, nous avons besoin d'un espacement un peu plus serré sur les petits appareils, donc 60 pixels devraient suffire Dans le paysage, nous avons un trop-plein. Lorsque vous obtenez ce type de débordement sur la page, trouvez l'élément qui dépasse ses marges parentes, qui sera à l' origine du problème Ici, il est évident que le paragraphe en est la cause car il se trouve en dehors des limites du conteneur et même de la section. La raison pour laquelle il ne rétrécit pas est qu'il a une largeur fixe Nous avons commis une erreur sur le bureau, et au lieu de définir une valeur réactive telle que la largeur maximale, nous lui avons donné une largeur fixe. Maintenant que ce paramètre n'est pas optimal non plus sur le bureau, il suffit de le styliser sur la version de bureau et de laisser les styles se répercuter sur le bas. Et avant de passer à autre chose, voyons vraiment ce qu'est le trop-plein ? S'agit-il d'un bug ou d'une fonctionnalité ? En fait, le trop-plein est une fonctionnalité très pratique. Il possède son propre cadre dédié aux styles. Permettez-moi de vous montrer comment cela fonctionne. Nous avons un bloc div ici. J'ai ajouté à ce div la largeur et la hauteur exactes. C'est 900 pixels sur 300 pixels. Si nous mettons plus de contenu dans ce bloc div, le contenu débordera Pourquoi ? Parce qu'il a une hauteur définie, 300. Il ne dépassera donc pas cette taille. Si nous supprimons cette valeur de hauteur, vous verrez que la boîte s' agrandira avec le contenu. Mais parfois, ce n'est pas ce que nous voulons, et nous voulons garder la boîte aux dimensions exactes. Si vous vérifiez les paramètres de débordement de ce bloc div, vous verrez qu'il est configuré pour être visible Cela signifie que le contenu débordant sera toujours affiché. Si nous le définissons comme masqué, le contenu sera découpé et il ne s'affichera pas quoi que nous fassions, même si nous essayons de le parcourir Mais dans de tels cas, nous avons une autre option pour faire défiler le contenu à l'intérieur. Mais cette option n'est pas très bonne car elle affiche toujours une barre de défilement horizontale et verticale, même s'il n'y a pas assez de contenu pour le faire défiler. Pour cela, nous avons une meilleure option, la dernière voiture. Cela affiche la barre de défilement uniquement s'il y a quelque chose à faire défiler. La barre horizontale a disparu, et si le contenu déborde verticalement, la barre de défilement s'affichera C'est toujours une meilleure option si vous créez un contenu défilant Juste pour noter que sur votre ordinateur, vous pouvez voir ou non cette différence. Cela dépend des paramètres que vous avez choisis dans votre système d'exploitation, sous Mac ou Windows. Autre point à noter, les paramètres de débordement sont définis sur l'élément parent, et non sur les enfants Donc, dans ce cas, nous l'avons placé sur ce bloc div blanc. Si nous le plaçons dans le paragraphe, cela ne servira à rien. Outre le défilement du contenu, une autre utilisation courante du paramètre de débordement est lorsque nous voulons découper du contenu, ce qui se fait généralement Nous ne voulons probablement jamais couper du texte. Par exemple, si nous avons une section contenant une image et que nous voulons découper l'excédent de cette image, nous pouvons masquer le trop-plein sur l'élément parent, et cela va découper l'image Très bien, finissons nos affichages mobiles. Nous avons toujours cet écart sur la page, mais cela est dû à autre élément dans une section différente. Nous nous en occuperons donc une fois sur place. Maintenant, faisons quelque chose à propos de ce look très étroit. la section Hero, nous avons changé le rembourrage à 30 pixels, mais nous ne l'avons jamais fait pour cette section Alors faisons-le. Et diminuons également le rembourrage vertical pour économiser l' espacement En fait, je vais également le réduire pour le paysage car l'espace vertical est encore plus important dans le paysage. Et réinitialisez la valeur en mode portrait Si vous les avez modifiées à un moment quelconque, il est préférable de réhériter les valeurs plutôt que de répéter les styles, car cela ajoute simplement code supplémentaire, dont nous n'avons pas besoin Enfin, faisons quelque chose pour remédier aux gros titres, trop gros pour le mobile. Maintenant, n'oubliez pas que le titre n'est pas une classe. Nous personnalisons le tag. Voici donc comment nous allons le styliser. Sélectionnez tous les en-têtes H one dans le menu déroulant du sélecteur , puis modifiez Cela modifiera tous les titres H one pour les portraits mobiles, mais n'affectera pas les autres appareils. Très bien, 35 pixels fonctionnent très bien. Enfin, que faire de cette image ? C'est trop petit pour être quoi que ce soit. Il y a une chose que nous pouvons faire. Nous pouvons faire disparaître l'image et découper le trop-plein en utilisant ce que nous venons d'apprendre Il faut d'abord augmenter la taille de l'image. Lorsqu'il s'agit de modifier taille des images dans les interviews en réponse, n'utilisez jamais ces paramètres. Cela modifie les paramètres HTML de l'image, ce qui va changer la taille partout sur tous les appareils. Vous pouvez également faire glisser l'image pour la redimensionner, mais ne l'utilisez pas non plus Cela modifie la même largeur que celle qui figure dans les paramètres. Ce que nous voulons plutôt changer, c'est le style CSS de l'image, car style CSS nous donne la flexibilité d'avoir différentes tailles sur différents appareils. Pour cela, sélectionnez l'image. Vous voyez cette largeur maximale de 100 %. Cela indique à l'image de ne pas devenir plus grande que son conteneur parent. C'est pourquoi il rétrécit. Comme il s'agit d'un scénario rare dans lequel nous souhaitons que l'image s' étende au-delà du conteneur et même au-delà de la page, nous allons modifier ce paramètre exact et le définir à environ 170 % Maintenant qu'elle sort de la page et qu'elle est plus grande, nous pouvons voir l'image un peu plus en détail. Mais nous avons une image qui déborde comme ça. Alors, que faisons-nous ? Nous devons masquer le débordement sur l'élément parent pour découper l'image Mais nous ne pouvons pas définir cela sur le parent direct, qui est le conteneur, car le conteneur ne va pas jusqu'au bord. La section le fait. Nous devons donc placer cette étoile de débordement sur la section, mais ajoutons-y la classe de combinaison pour qu'elle n'affecte pas toutes les sections Et voilà, l'image est coupée juste sur le bord de la section Nous avons donc appris le concept important du trop-plein et comment l' utiliser à notre avantage Overflow visible est un paramètre par défaut Il affiche donc tout contenu dépassant les limites de l'élément parent Oflow hidden va découper le contenu comme nous l'avons fait ici, Overflow Scroll et Auto laisseront le contenu défiler à l'intérieur Mais l' option de défilement affichera une barre de défilement persistante même s' il n'y a rien à faire défiler. 88. Réactif : section CTA (Appli de chat): La section d'action n'a pas l' air mal dès le départ. Nous pouvons créer quelques brindilles pour augmenter un peu la taille de l'image Tout d'abord, je pense que le titre est un peu trop gros. Ce n'était pas un problème dans la section ci-dessus où il y avait plus d' espace et des balises plus petites. Mais ici, il devient difficile de saisir plus d' un mot par ligne. Il s'agit d'une bonne règle empirique à utiliser. Si vous pouvez insérer au moins deux mots par ligne, la taille de police est peut-être trop grande. Si nous créons un site Web complet, nous serions confrontés à plus de limites quant à la taille du titre, donc je préfère m'en tenir N'oubliez pas que ce titre n'est pas un cours. Il s'agit d'une balise H one par défaut, donc c'est ce que nous allons styliser. Par défaut, le tag n' est pas sélectionné. C'est ce que nous devons faire à chaque fois que nous faisons du stylisme. Je vais donc utiliser la taille de téléphone de 35 pixels que nous avons utilisée sur l'écran mobile et en faire une taille H unique par défaut pour tous les écrans réactifs de la tablette au mobile. Cependant, le titre finit toujours par être enroulé exactement de la même manière sur trois lignes Le fait est que lorsque nous réduisons la taille du téléphone, l'image pousse le bloc de contenu et réduit l'espace disponible pour le Cela anéantit en quelque sorte nos efforts pour adapter le titre sur deux lignes Je vais donc donner une largeur minimale. 340, ça me paraît bien. Nous allons vérifier la fluidité. Sympa. Passons à autre chose. Ici, nous allons faire ce que nous avons fait avec une section consacrée aux héros. Changez la direction de la zone flexible en verticale et la ligne vers la gauche N'oubliez pas de créer d'abord une nouvelle classe de combinaison, sinon cela modifiera toutes les zones flexibles de la page Le bloc de contenu ne s'est pas aligné car sa marge est définie sur la gauche. Supprimons cette marge. Voyons voir. L'image est bien trop grande sur une version plus large. Réglons la largeur maximale de l'image, mais mieux encore, sur le bloc de gauche lui-même, comme je l'ai mentionné précédemment, chaque fois que je le peux, j'essaie de styliser le contenant de l'image plutôt que l'image elle-même, sauf dans le cas la vidéo précédente où nous avons dû directement styliser l'image. Ne t'inquiète pas Vous n'avez pas besoin de mémoriser toutes les règles et recommandations que je vous donne. Vous apprenez en commettant ces erreurs et en adoptant vos propres règles et habitudes, et Webflow est d'une grande aide dans cette procédure d'apprentissage Vous pouvez tout voir visuellement et vous pouvez voir les styles qui sont activés et qui peuvent être à l' origine du problème sans avoir à lire les lignes de code. Même pour ceux qui veulent apprendre à coder, je recommande tout de même d'apprendre d'abord avec Webflow car c'est une aide et un guide incroyables, et tout fonctionne exactement de la même manière que le code normal dans Webflow exactement de la même manière que le code normal dans Cette mise en page alignée à gauche ne fonctionne plus vraiment sur cette page car, comme vous pouvez le constater, nous avons effectué un certain alignement au centre sur la majeure partie de la page, et tout d'un coup , nous l'avons alignée à gauche, ce qui détruit la mise en page cohérente de cette page. Une meilleure approche serait donc d'avoir également celui-ci une disposition centrale. Et surtout sur les appareils mobiles, disposition centrale est une façon assez familière et assez courante de procéder à ces mises en page Maintenant, l'image elle-même peut être laissée telle quelle sur la ligne de gauche parce que, vu la façon dont nous l'avons conçue, elle ne fonctionnera tout simplement pas bien et ne sera pas belle si nous la plaçons simplement au milieu de la page, mais au moins nous pouvons faire en sorte elle ne fonctionnera tout simplement pas bien et ne sera pas belle si nous la plaçons simplement au milieu de la page, mais au moins nous pouvons faire en que le contenu soit sur la ligne centrale Et cela va la rendre beaucoup plus cohérente avec le reste de la page, même si l' image est toujours laissée sur une ligne parce que c'est une image, alors c'est l'idée de l'image qui est en quelque sorte découpée et supprimée de la page. Alors, comment pouvons-nous le faire ? Comment pouvons-nous effectuer un alignement central ? Maintenant, nous avons quelques options, mais l'une des façons de le faire est que la raison pour laquelle il s'agit d'un bloc div et d'un niveau de bloc. Donc, d'habitude, nous nous étendons bord à bord. Et s'il ne s'étire pas complètement, c'est parce qu' une largeur maximale lui est appliquée. Donc, ce que nous pouvons faire, c'est simplement supprimer cette largeur maximale ici, et elle s'étendra d'un bord à l'autre. Et puis ce que nous pouvons également faire c'est aligner le texte au centre. Et tout ce qui est du texte et tout ce qui se trouve dans un bloc de lignes, comme ces boutons, s'aligneront tous au centre de celui-ci. Pour ce diviseur, ce que nous pouvons changer, c'est que maintenant ce diviseur n'est pas un bloc en ligne C'est pourquoi il n'est pas centré, car il s'agit d'un niveau de bloc. Et en réalité, le navigateur et le code HTML voient ce bloc div tel qu'il est déjà bord à bord. n'y a rien à aligner au milieu car il s'agit d'un niveau de bloc. C'est ainsi que se comporte le niveau des blocs. Mais l'option que nous avons ici c'est que nous pouvons utiliser cette option de centrage Cela aura pour effet d' appliquer des marges automatiques sur les côtés. Et ces marges automatiques rempliront l'espace vide restant, elles le rempliront de marges. Et pareil ici, même marge ici, même marge ici va évidemment le placer au milieu du bloc. C'est exactement ainsi que fonctionnent nos conteneurs. Ils ont des marges automatiques sur les côtés, et c'est pourquoi ils se maintiennent au milieu, même s'ils ne sont pas dans le bloc de lignes. Ce gars ici s' étire déjà bord à bord, mais c'est une boîte flexible. Ce que nous pouvons faire, c'est simplement passer à un alignement vertical, et nous assurer que vous y avez appliqué une sorte de classe de combat ou une classe unique, et que ce n'est pas cette classe flexbox générique que nous utilisons partout Passez ensuite à la verticale, puis modifiez simplement l'alignement au centre. Et nous pouvons créer une lacune à cet égard. Nous pouvons utiliser cette fonction d'écart, qui permet évidemment d'ajouter une marge en haut ou une marge en bas des étoiles, qui fonctionne bien également, mais c'est une petite fonctionnalité très pratique. Nous pouvons l'utiliser et lui donner un peu d'espace entre les deux, et cela semble bien. Nous pouvons potentiellement réduire un peu cet espace. Quelque chose comme 60. Ensuite, augmentez un peu l' espacement entre ce contenu, et c'est très serré Donnons donc 30 en haut, 30 en bas. Ça a donc l'air un peu mieux et espacé. D'accord, je pense que ça a l'air bien mieux maintenant. Nous allons tester la réactivité. Plutôt bon. Et une chose que nous pouvons faire maintenant, c'est que, comme vous pouvez le constater, notre image est en fait trop découpée à l'extérieur. Ce que nous n'avons pas besoin de faire. Nous avons dû le faire lorsque nous le faisions sur cet ordinateur de bureau parce que nous essayions de le faire également pour les très grands écrans. Mais ici, nous avons plus de marge de manœuvre. Je pense que nous pouvons donc voir que c'est le maximum. C'est le maximum qu'il pourra atteindre. Nous pouvons donc, sur la base de cette taille, réduire cette marge négative. Jusqu'ici. Il y a donc une plus grande partie de l'image visible, ce qui occupe un peu plus d' espace et donne un meilleur aspect à la mise en page générale. Enfin, la version portrait. OK, ici, nous devons supprimer la largeur minimale définie sur le bloc de droite. Bien. L'impôt sur les gros titres est assez élevé pour le portrait, alors réduisons-le également. 27 pixels semblent corrects. C'est ça. Tous ont l'air chic. Il ne nous reste plus qu'un pied de page, et c'est terminé. 89. Réactif : Pied de page (Application de chat): Alors, qu'est-ce qu'on a là ? Il s'agit d'une boîte flexible contenant des colonnes. Ce pourcentage de largeur est appliqué aux colonnes. Tenons compte des vues mobiles lorsque nous créons une solution ici. Nous aurons besoin d'une sorte d'alignement vertical. Nous pourrions opter pour l' option verticale à partir de la boîte flexible, mais cela place tout à la verticale, même lorsqu'il y a de l'espace sur les côtés Une meilleure option consiste à utiliser une fonction d'encapsulation. Nous avons discuté de cette option dans une vidéo Flexbox, mais permettez-moi de vous rafraîchir la mémoire Par défaut, flexbox essaie de placer tous les enfants sur une seule ligne, qu'il s' agisse d'une ligne horizontale ou d'une ligne verticale Mais lorsque nous activons l'option d' enroulement, les enfants passeront à la ligne suivante ou passeront à la ligne suivante un par un selon leurs besoins. Modifions les paramètres de justification pour qu'il y ait cette colonne vide, qui était bien sur le bureau, mais qui n'était pas nécessaire pour les vues sur tablette et mobile. Nous aimerions que les colonnes soient alignées vers la gauche sans espacement supplémentaire Nous pouvons supprimer cette colonne vide car elle sera également supprimée du bureau. Mais ce que nous pouvons faire, c'est nous cacher en utilisant des styles. Donnons-lui une classe combinée afin de ne pas toucher aux autres colonnes, puis dans les options d' affichage, sélectionnez Masquer. L'affichage en mode non propriété masque l'élément et libère l'espace qu'il occupait Quoi d'autre ? Les colonnes ont les marges gauche et droite. Ainsi, lorsqu'ils passeront à la ligne suivante, cela créera de l'espace supplémentaire. Supprimons cette marge de gauche et n'utilisons que la droite, mais veillons à modifier la colonne contenant uniquement une classe globale. de combinaison est appliquée à la première et à la dernière colonne Une classe de combinaison est appliquée à la première et à la dernière colonne . Nous l'avons utilisé pour corriger certaines marges sur le bureau. C'est plutôt bien. Et ajoutons une marge inférieure pour que les colonnes de la deuxième ligne ne se coincent pas avec la première ligne. Sur les plus petites tailles, vous verrez qu'elles ne s'enroulent pas vraiment correctement et que les colonnes se serrent plutôt très étroitement. C'est parce que le pourcentage de largeur leur est appliqué, ce qui est bien sur le bureau, mais devient inutile dans ce type de mise en page. Alors débarrassons-nous de ça. Maintenant que la largeur de colonne est automatique, elle augmente avec le contenu à l'intérieur, ce qui rend la première colonne trop large. Nous devons lui donner une largeur maximale pour qu'il ne grandisse pas autant. Et c'est mieux. Et le tout s'intègre parfaitement à tous les points de vue. Une dernière chose que nous devrions modifier est l'espacement entre le copyright et les liens Je pense que 60 pixels , ce serait bien mieux. Jetons un dernier coup d'œil à l'ensemble. R Et c'est ainsi que s'achève développement complet de notre page. Dans la section suivante, nous allons passer en revue la finalisation de notre page, des éléments tels que la publication, le référencement, etc. Cela ne signifie pas que nous en avons complètement terminé avec Webflow Designer et le processus de développement Il reste encore beaucoup à apprendre, comme le CMS, les formulaires, les interactions et les animations qui peuvent donner à n'importe quel site Web un aspect si incroyable , si frais, si moderne et si professionnel. Mais nous allons apprendre tous ces concepts dans d'autres parties de ce cours. une part, nous allons les apprendre dans ce grand projet client que nous allons réaliser du début à la fin afin que vous puissiez expérience pratique sur la façon de tout démarrer avec un client avec des choses comme brief de projet, le wireframing et les conceptions puis passer à Webflow et développer un CMS et un blog dans Webflow, puis les interactions et enfin tout livrer, publier avec un domaine personnalisé, tout ça. Et nous avons aussi certaines parties que je vais intégrer à la partie avancée de ce cours car vous n'avez pas besoin de tout. Vous n'avez pas besoin de tout apprendre en une seule fois. J'ai donc intégré dans la partie avancée tout ce qui n' est pas une compétence et connaissances essentielles pour que vous des connaissances essentielles pour que vous puissiez démarrer en freelance. Ainsi, une fois que vous avez atteint la dernière partie avancée de ce cours , vous savez déjà tout ce qui est essentiel et qui peut vous aider à démarrer en tant que freelance Et pendant que vous êtes indépendant tout en recherchant un emploi, vous pouvez également continuer avec des pièces avancées , perfectionner vos compétences et vous améliorer 90. Mise en ligne : SEO (application de chat): La conception et la construction de la page Web sont entièrement terminées. Nous avons maintenant les derniers éléments à terminer et à publier. Tout d'abord, nous devons définir les paramètres de référencement. Le référencement est l'abréviation de l'optimisation des moteurs de recherche et de son ensemble de pratiques visant à rendre une page plus attrayante pour les moteurs de recherche tels que Google, Pink et Do Dot Go. Le référencement est un domaine à part entière, et nous n'allons pas entrer dans les détails dans ce cours. Cependant, il y a certaines choses dont nous devons absolument prendre soin. Pour Stars, il s'agit du titre et de la méta-description de la page. C'est ce qui apparaît généralement lorsque votre page apparaît sur Google. C'est un titre, et c' est une méta-description. Si vous ne le configurez pas, Google récupérera un texte aléatoire sur votre page Eh bien, ce n'est pas totalement aléatoire. Il a ses propres règles, mais nous voulons en avoir le contrôle et choisir exactement ce que nous voulons afficher. Nous pouvons les modifier dans les paramètres de page, que nous pouvons trouver dans le panneau Pages. Accédez à la page que vous souhaitez modifier. Dans ce cas, la page d'accueil. Toutes les autres pages que nous avons de notre côté apparaîtront ici, et chacune de ces pages possède ses propres paramètres individuels, accessibles à partir de cette icône en forme de roue dentée. Permettez-moi de réduire ces paramètres afin que nous puissions les passer en revue. Sous « général » ou « groupe », nous avons juste un nom de page. Le nom de cette page est celui qui apparaît dans Webflow. Il s'agit d'un nom interne, vous pouvez donc nommer ce que vous voulez ici. Dans le cadre du contrôle d'accès, nous pouvons gérer qui peut accéder à cette page et qui ne le peut pas. Cela est utile lorsque vous devez protéger votre page par mot de passe. Par exemple, s'il s'agit d'une page interne de l'entreprise contenant des données sensibles et que seules certaines personnes y ont accès. Dans les paramètres SEO, nous avons deux valeurs : title tag et meta description. Si nous laissons ce titre vide, Webflow utilisera le nom de page par défaut Au fur et à mesure que vous tapez ces champs, vous verrez un aperçu des résultats de recherche, ce qui est un bon moyen de définir ce titre et cette description géniaux. Il existe de nombreuses manières de nommer vos pages. Sur les pages d'accueil, il est courant de mettre le nom de votre entreprise ou d'un produit en premier, suivi d'une sorte de slogan Par exemple, Chat App, simple application de chat d'équipe. Et dans le champ de description, nous allons décrire la page. Comme il s'agit d'une page d'accueil, nous allons décrire le produit lui-même. Google et les autres moteurs de recherche tronquent la description au-delà d'un certain nombre de caractères, généralement jusqu'à 155 caractères. Les paramètres Open Graph sont similaires à ceux du référencement, mais il s'agit d'informations qui apparaissent lors du partage de contenu sur des réseaux sociaux tels que Facebook, Twitter, Link DIN et Pinterest. Par exemple, lorsque vous partagez un lien vers une voiture que vous venez d'acheter, Facebook peut extraire le titre, la description et même une photo à partir des paramètres graphiques ouverts de cette page. Si ces paramètres sont vides, Facebook extrait des informations de manière aléatoire ou parfois aucune information du tout. Nous pouvons mettre un titre et une description personnalisés, mais nous pouvons également vérifier ces options pour les rendre identiques au référencement. En ce qui concerne l' image graphique ouverte, pour cela, nous devons insérer un lien vers l'image, ce qui signifie que nous devons télécharger l'image quelque part puis obtenir le lien. Nous pouvons télécharger l'image directement sur Webflow dans nos ressources, puis obtenir l'URL à partir de là, ou simplement utiliser une image déjà téléchargée et obtenir le lien correspondant Il s'agit de l'URL de cette image qui est téléchargée sur les serveurs Webflow Copiez cette URL et collez-la dans le champ de l'image. Vous pouvez maintenant voir un aperçu de ce à quoi cela pourrait ressembler lorsque le lien vers cette page est partagé sur les réseaux sociaux. Deux autres paramètres ne sont pas liés au référencement. Les paramètres de recherche du site, qui peuvent sembler liés au référencement et à la recherche Google, mais ce n'est pas le cas. Il s'agit en fait de la fonctionnalité de recherche sur notre site Web. Vous voyez que nous sommes en mesure d'ajouter un composant de recherche sur notre site Web. Où les utilisateurs peuvent rechercher le contenu de notre site Web. Ceci est utile si nous avons un site Web basé sur le contenu comme un blog, commerce électronique, quelque chose où la recherche a du sens. Sur les petits sites Web, comme le site Web d' une entreprise ou un site de portefeuille, ce n'est pas vraiment nécessaire. La dernière option est le code personnalisé. Il ne va rien afficher pour le moment car vous devrez ajouter un plan d'hébergement pour débloquer cette fonctionnalité. Ça ressemble à ça. Le code personnalisé nous permet d' ajouter notre propre code externe à la page. Habituellement, c'est pour les applications tierces que nous voulons connecter à notre page Web ou une sorte de plugin JavaScript ou à tout ce qui est généralement externe, comme les trackers, les analyses et tout ce genre de choses, tout ce qui se trouve en dehors de Webflow, général, et nous pourrons simplement insérer le code personnalisé ici Bien, il y a donc encore une chose que nous devons faire avant de publier le panneau. Nous devons compresser toutes nos images. Accédez donc au panneau Ressources, agrandissez-le, sélectionnez toutes les images et cliquez sur Compresser. Et effectuez la compression de toutes les images en une seule fois. Cela va prendre du temps, notamment parce qu'il y a plusieurs images. Vous devrez donc soit attendre avant de publier, soit vous pouvez le publier maintenant, et une fois la compression terminée, republier le site une fois de plus Bien, toutes nos images ont maintenant été compressées et converties au format AV. Tu peux vérifier. Vous pouvez voir dans les paramètres de fichier d'une image comment elle a été convertie au format AV et comment la taille du fichier a été réduite. Et assurez-vous simplement de parcourir vos images. Et juste pour vérifier qu'il n'y a aucun problème de compression. Comme je l'ai mentionné précédemment, AVV effectue une compression assez importante La taille du fichier est très fortement réduite à une taille très petite, ce qui est bien, mais cela peut parfois produire des artefacts et quelques problèmes avec les images. Cela dépend vraiment de l'image, du type d'image dont il s'agit. Juste pour m'assurer qu'il n'y en a pas. Et si vous remarquez que certaines images présentent des problèmes avec une image, vous pouvez essayer une conversion Web P, puis effectuer une nouvelle conversion pour cette image spécifique en Web P. Et c'est tout. Notre site Web est maintenant prêt à être publié, ce que nous allons faire dans la prochaine leçon. Donc, pour récapituler, chaque page de notre site comporte des paramètres de référencement et d'autres paramètres. Nous utilisons le titre et la méta-description pour contrôler notre page dans les résultats de recherche sur des sites tels que Google. En plus de cela, nous pouvons définir des paramètres de graphe ouvert, qui sont en quelque sorte du référencement, mais aussi des réseaux sociaux comme Facebook, Twitter, etc. 91. Going Live : publication (application de chat): Publions enfin notre page. C'est une tâche assez simple. Accédez à la publication et cliquez sur Publier pour sélectionner un domaine. Donne-lui un moment. Et là. Notre page Web Pixel Perfect est en ligne et fonctionne parfaitement. Toutes les optimisations réactives que nous avons effectuées peuvent être testées en redimensionnant et en rétrécissant la fenêtre du navigateur Les boutons et les liens ne sont pas opérationnels le moment car nous ne les avons liés à rien. Nous n'allons pas le faire pour ce projet de pratique, mais nous le ferons avec ce gros projet client sur lequel nous allons travailler. Dans un premier temps, votre site Web sera publié sur le sous-domaine Webflow Afin de publier notre site Web sur un domaine personnalisé, nous devons ajouter un plan d'hébergement payant, puis nous pourrons publier notre site Web sur notre propre domaine. Les plans d'hébergement de Webflow sont proposés à des prix très décents . Ce site Web aurait juste besoin du plan de base. site Web basé sur un CMS est celui qui contient un blog ou autre type de contenu dynamique qui doit être géré via le CMS, qui est un système de gestion de contenu. Nous allons créer un site Web basé sur un CMS dans le cadre du prochain projet. Je ne vais pas montrer comment le publier sur un domaine personnalisé pour ce projet, mais je le montrerai pour le prochain. Avec un forfait gratuit, nous pouvons modifier le sous-domaine de notre site Web, passer à la publication et modifier ce champ comme bon vous semble, à condition que cela ne soit pas pris Pensez à cliquer sur Enregistrer. Et comme vous pouvez le voir sur le bouton publié, il s'agit désormais de votre nouvelle URL. Une dernière chose que nous devons changer est cette petite icône. C'est ce qu'on appelle un fabrican. heure actuelle, il affiche un flux Web, favori par défaut, mais nous pouvons le modifier à partir des paramètres du projet Il y a deux icônes ici. Le premier est ce fabrican qui apparaît sur un onglet du navigateur et le second est Web Clip Le clip Web est une icône qui apparaît sur iPhone lorsque vous enregistrez votre site Web sur un écran d'accueil. Si vous ne voyez pas de quoi je parle, Safari dispose de cette fonctionnalité qui permet en quelque sorte de mettre un site Web en signet Vous pouvez l'ajouter à un écran d' accueil et elle sera enregistrée à côté de toutes vos applications, comme n'importe quelle autre application. Je n'utilise jamais cette fonctionnalité, mais comme nous avons une option, nous devrions changer cette icône ici. Nous devrons créer une icône dans Figma, qui n'est qu'un fichier image normal, et nous devons créer une sorte d'icône à partir de notre logo Ajoutez simplement un nouveau cadre d' une taille de 256 x 256. Peint en bleu et donnez-lui peut-être des coins arrondis. Copiez ensuite le logo, supprimez tout sauf la lettre C. Agrandissez-le exportez-le au format PNG, et exportez-le au format PNG, et ce sera notre clip Web. En ce qui concerne le fabricant, il suffit de le réduire à 32 par 32. Un redimensionnement régulier ne fera pas l'affaire. Cela ne redimensionnera pas à la fois le rectangle et le texte proportionnellement Nous devons plutôt utiliser l'outil de mise à l'échelle, que nous pouvons trouver sous l'outil de déplacement. L'outil de mise à l'échelle redimensionne les objets groupés de manière proportionnelle. Donc, s'il y a un rectangle contenant du texte et des images, cela bloquera les proportions de tous les calques qu'il contient, puis les redimensionnera tous ensemble C'est un petit outil très pratique. Et exportez à nouveau le PNG. Ensuite, téléchargez chacun d'eux sur leur espace dédié. Les dimensions de ces icônes doivent être exactement 32 x 32 et 256 x 256. Wepplo ne vous permettra pas de télécharger une autre taille. Publiez à nouveau pour que les modifications prennent effet. Petite remarque pour les utilisateurs de Safari Safari ne met pas à jour le favicon immédiatement, même si vous l'actualisez plusieurs fois, il conservera l'ancien favicon Il le fait parce qu'il enregistre le favicon dans le cache et l'extrait de là au lieu de recharger et de le récupérer à la source à tout moment Donc, si vous devez mettre à jour le fabrican et voir dans Safari, la dernière version, vous devez soit effacer l'historique de navigation, soit vider le cache, et vous pouvez le faire à historique de navigation, soit vider le cache, et vous pouvez le partir de là à partir de l'historique, effacer l'historique ou j' aime utiliser si vous avez cet onglet développé, c'est plus facile car il effacera simplement le cache au lieu de l'historique de navigation qui contient d'autres trucs. Cache vide, et maintenant, lorsque vous rechargez, il devrait être mis à jour, vous accédez au dernier favican C'est tout ce que notre page Web est en ligne. Il est beau, précis et fonctionne bien, il est rapide, réactif et tout simplement incroyable. Remarquez à quel point la page se charge rapidement et sans effort. Webflow est l'un des avantages incroyables, car leurs serveurs sont incroyablement rapides et ils sont tout simplement très bien organisés et optimisés pour les pages et les sites Web créés dans Et nous avons également fait du bon travail parce que nous l'avons construit avec un très bon code propre, et le site Web fonctionne bien et se charge assez rapidement. Bon travail à nous. Ensuite, nous allons en apprendre davantage sur flux Web ou sur une fonctionnalité appelée éditeur. Restez dans les parages. 92. Passer en direct : éditeur: Ai-je déjà mentionné à quel point Webflow est incroyable ? C'est incroyable à quel point c'est incroyable. Outre le concepteur, il dispose d'une autre vue appelée éditeur, laquelle vous pouvez accéder d'ici. L'éditeur est un endroit où les clients et les collaborateurs peuvent modifier le contenu du site Web, et ils peuvent le faire directement sur le site en direct, littéralement du côté en direct. Pas de gestion de contenu ni d'éditeurs de texte laids. Vous pouvez simplement cliquer sur le contenu et commencer à le modifier. C'est tellement utile pour les clients que je ne peux même pas l'exprimer avec des mots. Vos clients ne sont généralement pas férus de technologie, et la dernière chose qu'ils veulent faire est de s'assurer que les systèmes de gestion de contenu fonctionnent Et la dernière chose que vous voulez, c'est que votre client vous envoie un e-mail chaque fois qu'il a besoin d'un petit changement dans le titre pour supprimer le coma ou y ajouter un nouveau mot Ce type de demandes vous arrivera une fois que vous aurez finalisé et expédié votre projet aux clients Eh bien, si vous êtes payé toutes les heures, c'est bien, mais si vous êtes payé par projet, vous travaillez gratuitement. Nous ne pouvons pas modifier les styles ou la mise en page à partir de l'éditeur intégré au concepteur. Ici, il ne s'agit que de contenu, qu'il s'agisse de texte, d'images ou de liens. Vous pouvez modifier une image simplement en cliquant dessus et en téléchargeant une autre Vous pouvez également modifier l'URL de destination d'un lien ou le texte. Les modifications ne seront pas répercutées sur le site en ligne tant que vous n'aurez pas cliqué sur le bouton Publier. Ensuite, toutes les modifications seront mises en ligne instantanément et c'est aussi simple que cela. Et évidemment, ces changements se refléteront également dans le concepteur, auquel nous pouvons passer à partir de là. Si nous voulons restreindre l' accès à certaines parties du contenu depuis l' éditeur, dans le concepteur, nous pouvons accéder au panneau de configuration des éléments et vérifier que les collaborateurs peuvent modifier cet élément. Et maintenant, le titre ne sera plus modifiable dans l'éditeur. Dans les paramètres du projet, nous pouvons ajouter des collaborateurs supplémentaires. Il est indépendant du compte principal et donnera accès à la gestion du contenu du site. Cela donne accès à l' éditeur pour les soumissions de formulaires, les paramètres de page, la création de nouveaux éléments du CMS tels que des articles de blog, etc. C'est donc l'éditeur assez simple, mais puissant. Il n'y a rien que nous ayons réellement à faire à ce sujet. Je voulais juste vous faire visiter les lieux parce que je ne travaille pas habituellement avec un éditeur parce que je travaille par l'intermédiaire du designer, mais c'est généralement quelque chose que vous enseignez à vos clients en leur disant : OK, donc c'est l'option et c'est comme ça que vous le faites. C'est ainsi que vous modifiez les pages et ainsi de suite. Webflow propose en fait des didacticiels sur l'éditeur, donc parfois vous pouvez simplement envoyer le didacticiel vidéo comme ça, ou vous pouvez enregistrer votre propre didacticiel vidéo, à C'est ainsi que s'achève la troisième et grande partie de ce cours, qui portait sur le Webflow et le développement Dans la prochaine partie, nous allons faire un projet de clan complet, restez dans les parages. 93. PARTIE 4 : PROJET CLIENT DU DÉBUT à la FINition.: dans cette partie du cours, nous allons concevoir et construire un projet complet comme nous le faisions pour le client. Je vais vous faire suivre exactement le même processus que moi. Nous avons maintenant un nouveau projet. Vous pratiquerez exactement ce qui est impliqué dans le projet rial et franchissez chaque étape du remorquage Project Brave, de l'encadrement des fils, encadrement des fils collecte d'inspiration, de la conception, puis de la construction et de la livraison de l'enchilada complète au client. Nous allons utiliser tout ce que nous avons appris jusqu'à présent. De plus, nous allons apprendre beaucoup plus de concept que nous n'avons pas encore couvert, surtout dans le flux humide. Par exemple, CMS, qui est signifie système de gestion de contenu dans son fondamentalement pleuré, flux puissance sur la façon de rendre site Web dynamique et contenu dynamique. Par exemple, blawg, où nous pouvons extraire des informations de la base de données au lieu de simplement construire une page statique pour chaque article. Nous pouvons juste avoir la base de données avec du contenu à l'intérieur de cette base de données comme un titre, le sous-nom , l'auteur et tout, puis il suffit de concevoir et de construire un modèle pour la page d'article et ensuite avoir le base de données extraire le contenu pour différentes pages que nous comme la mauvaise page charge et que l'utilisateur interagit avec un site Web, le deuxième grand sujet que nous allons couvrir ses interactions. C' est ainsi que vous construisez des éléments interactifs et des objets dans le flux de travail qui peuvent animer, se déplacer, disparaître des choses comme des formes pop art, déposer les boutons animés de Tom ou faire défiler des animations que quelque chose se passe, cache, révèle ou simplement change de forme sur un défilement et beaucoup de marque. Très bien, alors plongons directement dans. 94. Projet de client : Bon processus de conception: Habituellement, mon projet de site Web commence par le client m'envoyant un paragraphe de description de ce qu'ils veulent. Et d'habitude, ça se passe comme, Oh, hey, Vacco. Nous aimerions un site Web pour notre application sur, mais nous n'avons pas d'écrans, de contenu ou autre chose. Pourtant, il est très difficile de créer un site web entier hors. Pas de contenu, pas de bref de projet et pas d'écrans d'application ou pas de brio, informations précieuses que je peux utiliser pour le site Web qui est réaligné. C' est comme ça que les choses fonctionnent habituellement, et vous n'obtenez pas un projet parfait avec tout le contenu, les photos et les écrans d'application ou tout ce qui est prêt pour commencer à concevoir. Au début, je n'avais pas ah, le processus sur mon plan était de juste l'aile et juste aller avec le projet et voir où il va. C' était une idée terrible pour trois raisons. D' abord, je serais coincé. Je regarderais l'écran sans avoir aucune idée de quoi faire et quoi concevoir et penser. J' ai juste eu un bloc créatif ou quelque chose comme ça. Mais pas étonnant. Comment pouvez-vous concevoir quelque chose quand il n'y a rien à concevoir ? Le deuxième problème était grand pour moi parce que je passais beaucoup de temps à concevoir quelque chose et à créer et au moins à aimer une page ou peut-être avoir une page. Et j'enverrais ce résultat à mon client pour qu'il s'accorde en quelque sorte sur la direction créative et l' apparence que j'allais vers. Et souvent, je recevais un rejet complet et qu'il y aurait genre, tu sais, non, nous n' aimons pas ce style. On veut quelque chose de plus comme ça. C' était très frustrant pour moi au début, parce que je suis un peu agité Ted et je vais commencer à me dire que tous ces gars ne savent pas de quoi ils parlent. Ils n'ont pas un bon goût de design et juste me faire des boulots. Dis juste Ok, très bien. Et retournez au travail. Et Crumpley Bork sur un nouveau look. Le troisième problème était le suivant. Commencez mon travail et obtenez une sorte de résultats finaux avec, vous savez, passant par différentes itérations et enfin en acceptant le design. Mais souvent le mannequin. Le contenu était un contenu fictif à l'intérieur, sorte que la taxe était un contenu fictif. Pas de photos étaient parfois vraiment, parce que peut-être j'avais besoin de photo. Jusqu' à présent, les utilisateurs pour des témoignages ou des commentaires ou des membres de l'équipe photo ou quelque chose comme ça. Et ils ne doivent pas donner à mon client des devoirs d'orteil, aussi , vous savez, me fournir et écrire et rassembler tout le contenu dont j'ai besoin. Mais souvent, le client reviendrait avec une structure différente pour son contenu. Donc, par exemple, si j'ai conçu une section avec trois colonnes, le client reviendrait avec une copie pour deux ou peut-être cinq colonnes. Mais ce type de contenu est optimal. Si nous avons trois ou quatre colonnes pour deux, ce n'est pas très sympa. Et pour cinq, c'est juste trop de contenu pour tenir dans une rangée. Ce n'était absolument pas la faute de mon client. C' était à moi parce que je vais avoir un processus. Je n'avais pas de processus de conception ou de projet approprié à passer maintenant, ce qui est en train de le faire. Mais au moment où j'ai compris celui-ci et créé un processus de conception approprié et dans le processus de projet pour moi, les choses ont changé radicalement. C' est le projet qui s'est déplacé plus lisse et plus agréable. Ah, plus vite, dernières situations à traverser et c'est drôle. Mais la conception est devenue plus facile dans le passé. J' essayais juste de prendre tout le projet en une seule fois, comme me bourrer avec un brito plein en une seule fois, et c'était trop à gérer. J' étais en train de guider mes clients à travers les différentes étapes que nous avons dû franchir dans mon plan était juste, vous savez, aller dans la chambre, m' enfermer et puis une semaine plus tard a émergé avec ce site Web brillamment bien conçu et puis il suffit d'espérer et de prier que les clients l'ont aimé. Voici donc un processus en trois étapes que les grands designers passent par avant même qu'ils n'éprouvent même pas le premier pixel. La première étape consiste à définir un dossier de projet. Il s'agit d'une brève description des objectifs et des détails du projet. Le projet Brave pose des questions importantes comme Quel est le but du site et à qui est-il destiné ? Une réponse à ces questions vous permettra d'aligner à la fois vous et votre client sur la même page, en veillant à ce que tout le monde l'ait eu dans la même direction. La deuxième étape consiste à créer un tableau d'humeur et à obtenir les commentaires de vos clients à ce sujet. C' est quelque chose que nous savons déjà faire, et nous l'avons fait pour recueillir l'inspiration pour nous-mêmes. Mais si nous partageons cette botte ennuyée avec nos clients que nous pouvons en profiter davantage En partageant une planche d'humeur avec votre client, vous pouvez clouer un goût et un look et se sentir hors de votre projet car il y a beaucoup styles différents que vous pouvez aller avec, à droite, vous pouvez aller un peu plus de photographie ayant pour votre site Web, vous pouvez acheter mais aller un peu plus. Illustration lourde, un peu plus colorée, moins de couleur pour droite. Il y a donc beaucoup d'avenues différentes que vous pouvez prendre avec votre projet et vos conceptions. Et souvent, les clients ont des goûts très spécifiques. Donc, vous ne voulez pas trouver de l'information parce qu'ils ont du mal à s'expliquer et qu'ils ne savent pas que vous êtes le concepteur et que vous avez accès à toute l' inspiration dans le monde. Vous savez, ces sites comme paralysent nos intérêts et je vous prête livre et vous y allez et vous trouvez l'inspiration. Vous réunissez ceci et vous travaillez ceci pour avoir accès à ce genre d'inspiration. Mais ils ne le font pas que les sites Web qu'ils ne voient pas cela pourrait ne pas être si grand. Ils sont occupés à faire d'autres choses correctement, et en leur partageant cette information, vous pouvez clouer sur la même page de l'apparence et de la sensation, parce que si vous ne faites pas que ce que vous faites, c'est que vous devez passer par jusqu'à ce que vous arriviez à leur genre de goût et que juste tellement plus de travail à faire, n' est-ce pas ? Pourquoi pourrais-je passer par différentes itérations pour enfin clouer le goût dans Juste général , regarder et sentir hors du site où nous pouvons simplement prendre des exemples d'autres sites Web et d'autres sources d' inspiration et leur montrer OK, Lequel tu aimes ça pour ça ? La troisième étape de ce processus consiste à créer des cadres métalliques. Les cadres métalliques sont une sorte de croquis grossiers sur le site. Un squelette. Nous ne nous inquiétons pas du coloriste, de la typographie ou de tout besoin d'un design avide. Ceci est, par exemple, ou cadre de fil sur YouTube. Il montre ce qui va où et quel est le contenu. Très simple. Pas beaucoup de design qui se passe qu'il ressemble à un enfant a écrit, mais le cadre de vin a un énorme avantage parce que vous êtes en mesure de discuter avec votre client. Une partie très importante de ce site Web veut le contenu parce que la conception doit toujours tenir compte du contenu parce que la conception de notre petit paragraphe à ligne va être très différente d'une conception à partir d'un document 5000 paroisse, n'est-ce pas ? Donc, vous devez clouer le contenu. Qu' est-ce qui trie les photos pour le logiciel va les boutons et tout, Et faire cela pendant le processus de conception en passant par les situations pendant le processus de conception est juste beaucoup plus de travail et plus de gaspillage parce que vous devez vous soucier de chaque pixel unique sur l'appelant et les nuances de différentes couleurs et ombres et tout cela, qui est absolument sans importance lors de la discussion du contenu et lorsque le contenu change et une structure change, alors vous devez vider tout ce qui vous avez déjà conçu perdre votre temps, puis recommencer à zéro. Mais pendant le cadre métallique, c'est très simple car il n'y a pas grand-chose à concevoir. Vous n'avez pas à vous soucier de rendre tout aligné ou pixel parfait, droite, et vous ne serez pas frustré si Climb décide qu'ils veulent restructurer l'ensemble du contenu hors de la page garde tout le monde heureux et sur le même direction vers l'objectif final. Donc, les trois étapes de bon processus de conception notre mémoire de projet serait embarquer et nous sommes encadrés à la fin de chaque étape. Vous devez partager les résultats avec votre client et être d'accord avec eux et signer cela, parce que si vous ne faites pas cela, alors sorte de bits le but dont vous avez besoin pour obtenir les commentaires du client pour vous assurer que vous n'allez pas à un mauvais lorsque vous gardez vos clients dans les toilettes. Tout d'abord, ils ont l'impression d'avoir le contrôle du projet et ils adorent cette idée. Ils veulent savoir comment les choses se passent. Deuxièmement montre toujours que vous êtes un professionnel, que vous avez un processus de projet en cours, et ils savent qu'ils comprennent qu'ils le sont. Ils sont dans les grands chapeaux. Et une fois que vous aurez finalisé ces trois étapes, c'est alors que vous passez au processus de conception et que les résultats de conception que vous produisez seront beaucoup plus appréciés et appréciés par nos clients parce qu'ils ont fait partie du processus. Et c'est exactement ce que nous allons faire dans les leçons à venir. Coller autour 95. Projet client : brief de projet: Le projet doit commencer par un brief de projet, mais ce n'est pas souvent le cas. Un brief de projet ou un brief de conception est en quelque sorte un plan du projet. C'est en quelque sorte un guide et un accord entre deux parties selon lesquels vous allez aller dans une certaine direction et obtenir un certain résultat. Il existe différentes manières de passer et de créer des dossiers de projet, mais j'ai en quelque sorte ma propre méthode car je ne trouve pas de méthode officielle et adoptée par l'industrie qui soit très utile parce qu'elles contiennent trop d'informations et qu'elles ne sont pas vraiment pertinentes pour les entreprises quotidiennes et les scénarios de la vie quotidienne, comme le travail indépendant ou le fait pertinentes pour les entreprises quotidiennes et les scénarios de la vie quotidienne comme indépendant travailler et envoyer des informations à quelqu'un à travers le continent, ce n'est pas très utile pour les petits projets. Cela peut être utile pour les grandes entreprises, et c'est ainsi qu'elles définissent le brief du projet, car il doit être soumis à des comités et à un conseil d'administration pour ce genre de choses Mais lorsque je travaille principalement avec de petites startups, des entrepreneurs et des petites entreprises, ils n'ont pas besoin de tout Leur principale préoccupation est le temps et l'argent que la réalisation de ce projet le plus rapidement possible. Donc, pour moi, le brief de projet est essentiellement des réponses à certaines questions que j'ai besoin de connaître. Ce sont des questions que je pose lors de la réunion de lancement J'ai donc une première réunion avec mes clients, nous discutons de quelque chose là-bas, et j'ai préparé quelques questions Pour eux, je leur pose ces questions, et ils me donnent des réponses, puis à la fin de la réunion, je rédige en quelque sorte un brief de projet à partir de cette réunion, répondant essentiellement aux mêmes questions sur le papier, je le leur envoie afin qu'ils puissent convenir que je n'ai pas mal compris quelque chose, ou peut-être que nous avons eu un Les deux questions les plus importantes que je pose sont les suivantes : quel est l'objectif du site Web et à qui est-il destiné ? Vous ne pouvez pas vraiment concevoir une solution à un problème avant de savoir quel est le problème qu'il essaie de résoudre. J'ai besoin de connaître le public cible et les personnes qui utiliseront ce site Web. Un site Web destiné à un jeune 20 ans sera un peu différent d'un site Web destiné aux chefs d'entreprise âgés de 40 à 50 ans. Pour notre projet, j' ai déjà préparé un brief de conception, et c'est un modèle que j'ai créé à partir de mon propre brief de conception que j'utilise, et vous pouvez l'utiliser pour vos projets. Prends-le et sauvegarde-le. Voici ce que vous pouvez en faire. Lorsque vous vous rendez à une réunion, un chat ou à une conversation par e-mail avec votre client ou un employeur, avec votre client ou un employeur, gardez ce document à vos côtés et posez-leur ces questions. Vous affinerez ultérieurement ces questions et ajouterez d'autres ou en supprimerez certaines pour qu'elles fonctionnent pour vous. Une fois que vous avez terminé une réunion, remplissez-le, vous pouvez le faire pendant la réunion ou plus tard, sans différence. Exportez-le ensuite au format PDF. Et envoyez-le à votre client pour vérifier s'il est d'accord. Cela aura deux effets. abord, cela sera d' une grande aide pour votre client, car il arrive souvent que mes clients ne sachent pas ce qu'ils veulent. Et c'est quelque chose auquel vous ne vous attendriez pas, mais ils savent qu' ils veulent un site Web. Mais souvent, ils ne savent pas exactement pourquoi ils veulent le site Web, quel type de site Web ils veulent, et ils ont de nombreuses idées différentes, ce qui est très courant chez les terpreneurs, car beaucoup d'entrepreneurs sont dans leur tête, ils ont juste un million d'idées différentes bourdonnent dans leur tête, et ils sont enthousiastes à propos de tout et ils Et ils ont du mal à structurer leur idée et à structurer leur esprit de manière appropriée. En parcourant ces questions et réponses , puis en les lisant plus tard dans le format du brief de conception, vous leur donnez la possibilité de créer de la clarté dans leur tête. Vous êtes donc tous les deux sur la même longueur d'onde. La deuxième chose qui va arriver, c'est que vous aurez l'air plus professionnel. Cela montre que vous savez ce que vous faites et j'ai mis en place un système spécifique. ce fait, les clients auront davantage confiance en vous et en vos créations. Ils auront une meilleure expérience à la fin de la journée, car ils obtiendront ce qu'ils voulaient réellement parce qu'ils font confiance à vos créations maintenant. Et ils seront plus satisfaits des résultats, ce qui signifie qu'ils les partageront avec leurs amis qui sont souvent eux-mêmes des entrepreneurs, ce qui vous apportera plus de clients et plus Très bien, j'ai déjà rempli ce brief. Imaginons que nous ayons déjà eu une réunion avec notre client et que nous nous soyons mis d'accord sur ce brief. Notre client est une start-up qui construit une plateforme de collaboration en équipe. L'objectif de cette section est d' inscrire les utilisateurs pour un accès anticipé. Cela signifie que la plateforme n'est pas encore prête, mais que l'entreprise souhaite déjà commercialiser ses produits et susciter de l'intérêt. C'est une pratique courante pour les entreprises en démarrage d'avoir un site Web pendant leur processus de développement ou chaque fois qu'elles créent leur produit, car elles peuvent ainsi susciter certain intérêt en recherchant des investisseurs ou en essayant d'obtenir des relations publiques et une visibilité médiatique. Elles ont donc toujours besoin d'un site Web avant même de lancer investisseurs ou en essayant d'obtenir des relations publiques et une visibilité médiatique Elles ont donc toujours besoin un produit. Le public cible de ce site Web est constitué d'autres start-ups et équipes dont les employés travaillent à différents endroits. Le client souhaite un site Web moderne utilisant des photographies plutôt que des illustrations et avec un look épuré et minimaliste Le site Web va avoir un blog. Cela signifie que nous allons créer un CMS, qui devra collecter des soumissions de formulaires. C'est ça. Voilà à quel point le brief du projet doit être simple. C'est ce qu'on appelle bref, n'est-ce pas, alors faites en sorte que ce soit court et doux. 96. Projet client : Moodboard: Le conseil d'administration est quelque chose que j'ai toujours fait, mais je ne le partagerais pas avec un client. Je l'ai conservé comme processus de conception semi-interne. Au début, j'ai considéré le design comme un processus artistique dans lequel vous vous enfermez dans la pièce et, une semaine plus tard, vous créez des designs incroyables qui impressionnent complètement vos clients Mais c'est loin de la réalité. Souvent, vos clients ont certains sites Web et certains styles en tête. Et si vous ne vous entendez pas sur ce terrain d'entente et quelque chose qui sort de nulle part, il y a de fortes chances que vous ne répondiez pas à leurs attentes. Et tu trouveras peut-être quelque chose de mieux. Mais si vous ne répondez pas à leurs attentes, vous les décevez. Si vous vous mettez d'accord sur un moodboard, il y a de fortes chances que les designs que vous créez ressemblent aux attentes de vos clients Les rendre heureux et en redemander. Vous vous êtes déjà entraîné à créer un moodboard, nous allons donc sauter la partie où vous vous inspirez. Nous utiliserons plutôt un moodboard que j'ai déjà créé pour le produit de collaboration en équipe Je viens de supprimer et d' ajouter quelques photos supplémentaires. Dans le fichier Figma, vous trouverez ce moodboard Si vous voulez relever un peu plus de défis, vous pouvez utiliser le moodboard que vous avez créé dans le cadre de la même mission, mais je vous recommande d'utiliser celui-ci et de suivre Imaginons que nous ayons déjà convenu de ce moodboard avec le client Jetons un coup d'œil à ces exemples et nous pouvons commencer à remarquer les sections et les éléments qui nous Nous allons l' utiliser comme section dédiée aux héros. J'aime le contraste entre le vert et l'image en arrière-plan. J'aime aussi ces mises en page de cartes, similaires à celle-ci. À partir de là, j' aime beaucoup cette section, similaire à ce que nous avons déjà fait lors de l'exercice de remix J'aime aussi beaucoup ces cartes de témoignage, et j'adore cette couleur bleue, alors peut-être que nous utiliserons celle-ci C'est un beau bleu vif qui convient parfaitement à une photo. De plus, il correspond parfaitement au thème de la collaboration en équipe. Les entreprises, en particulier les plus grandes comme Blue. Le bleu est une excellente couleur car il fait preuve de propreté, transparence et de bonne conduite Mais bien sûr, il faut que ce soit bon blues parce qu'il y en a qui sont nuls Ici, j'aime les sections divisées, et j'aime aussi la façon dont les éléments d' interface sont incorporés à la photographie pour donner plus de vie aux photos. J'ai également ajouté cette photo de bas de page. J'aime ce style sombre, donc je vais faire un pied de page sombre comme celui-ci Partager un Moodboard, utiliser Figma est très simple. Figma est un excellent outil de collaboration, contrairement à d'autres outils comme Sketch ou Photoshop qui nécessitent l'utilisation d'applications tierces La collaboration Figma est intégrée à l'intérieur. Voici comment procéder. Dans le coin supérieur droit, vous avez le bouton de partage. Assurez-vous d'activer l'accès aux liens publics, sinon ils ne pourront pas voir le fichier, puis cliquez sur Copier. Il vous suffit ensuite de partager ce fichier avec vos clients. Ils ne seront pas en mesure de le modifier ou d'en faire quoi que ce soit d' autre que de commenter. Mais c'est un bon moyen de partager le moodboard que vous vouliez leur montrer Vous pouvez leur demander de commenter certaines choses qu'ils aiment et certaines choses qu'ils n'aiment pas. Voici un petit truc. Ouvrez une fenêtre de navigation privée dans un navigateur et collez-y vos liens, vous serez en mesure de vous assurer qu'ils peuvent accéder au fichier et voir ce qu'ils peuvent en faire Je déteste quand je partage quelque chose avec quelqu'un et qu'il me dit qu'il ne peut pas le voir. C'est juste une mauvaise expérience utilisateur et cela me fait honte lorsque cela se produit. En tant que concepteurs de sites Web, une bonne expérience utilisateur doit devenir notre mode de vie. Nous devons faire de notre mieux pour nous assurer que les clients, les collègues et évidemment les utilisateurs aient une bonne expérience avec tout ce que nous partageons ou créons. Parce que si on ne le demande pas, qui ? En le vérifiant dans le navigateur incognito, vous pouvez le voir exactement comme ils le verraient Parce que si vous le collez simplement dans votre navigateur habituel où vous êtes connecté à Figma, vous ne verrez que votre propre vue personnelle OK, ils peuvent voir le tableau, et depuis ce menu, ils peuvent accéder aux autres pages du fichier. Cependant, ils ne peuvent pas commenter à moins de se connecter ou de s'inscrire. Et s'ils sont connectés, ils auront ce type de vue. Cela ressemble à une vue normale. Ils peuvent voir toutes les pages et les couches sur la gauche. La fonction de commentaire est très pratique lorsque vous travaillez sur des projets. Pour commenter, nous devons cliquer sur cette option d'affichage des commentaires. Vous verrez le curseur de la souris prendre la forme de cette petite bulle. Nous pouvons déposer un commentaire n'importe où sur une page. Ainsi, lorsque vous partagez un moodboard avec vos clients, indiquez-leur comment faire des commentaires et demandez-leur leur avis sur Ils peuvent vous dire quelles étoiles ils aiment. Commenter des parties spécifiques plutôt que des captures d'écran complètes. Dans votre fenêtre, vous verrez ces commentaires se refléter instantanément. Activez simplement l'option de commentaire, ils apparaîtront même sur le côté droit. Aucune tâche ne suit cette vidéo puisque vous utiliserez exactement le même moodboard Vous pouvez le trouver dans le même fichier où se trouvait le brief du projet. C'est juste sur une autre page. Ensuite, nous allons créer des cadres métalliques. Restez dans les parages. 97. Projet de client : Pourquoi Wireframing ?: avant que j'ai eu mon processus de conception peut avoir vers le bas. J' ai souvent eu du mal à trouver des designs. Le problème était que je n'avais pas de contenu à concevoir. Vous ne pouvez pas vraiment choisir une police correcte. Si vous ne connaissez pas l'impôt qui va s'appliquer, vous pouvez concevoir une section sur les prestations. Si vous ne savez pas quels sont les avantages, vous pouvez choisir la bonne photo. Si vous ne savez pas quelle est la taxe à côté. Vous pouvez concevoir une page d'équipe si vous ne savez pas combien de membres d'équipe il y a. Une page d'équipe avec 55 membres de l'équipe va être très différente d'une page qui n'a que trois membres de l'équipe avec une biographie très longue. C' est à un moment donné que j'ai commencé à travailler avec cette merveilleuse agence australienne. Contrairement à moi, ils avaient un processus de conception approprié. La première application était d'écrire le contenu d'une page avant de faire des conceptions. Travailler avec eux m'a pris l'habitude d'écrire le contenu d'abord, et j'ai réalisé à quel point je me torturais en essayant de concevoir un morceau de page vierge. Une fois que vous avez le contenu, les décisions de conception deviennent évidentes et elles vous viennent facilement. Maintenant. Obtenir du contenu du client n'est pas très simple. La plupart du temps, ils n'ont aucune expérience sur l'écriture de la copie hors de la page juste là. Pas des rédacteurs. Ce ne sont pas des designers. Ils n'avaient pas beaucoup d'expérience avec cela, donc ils ne savent pas comment faire correctement. Et quelle est la meilleure façon de structurer une page ou un site Web, et ils ont besoin de notre aide pour cela. Beaucoup de designers ne le font pas, et ils transmettent la patate chaude au client, et évidemment le client viendra. Qui va revenir avec un contenu qui n'est pas très optimal pour une page, et le résultat final de la conception ne va pas être aussi bon, sens. Le client ne va pas obtenir les meilleurs résultats, et ils ne vont pas retourner pour plus d'affaires au concepteur. Perdre la situation perdre pour les deux côtés. Je suggère donc que nous devrions écrire du contenu pour nos clients ? Eh bien, quelque sorte. Mais pas vraiment. C' est là que les cadres métalliques entrent en jeu. génération de contenu pour moi fait partie de l'étape du cadrage de fil. Voici ce que je fais, c'est que je commence à créer des cadres métalliques. Je commence à penser à la structure du contenu et à essayer de déraciner la page de la meilleure façon possible, basé sur l'objectif de cette page particulière battre la page d'accueil ou une autre page de prêt ou tout ce qu'il est maintenant que mettre du texte sur la page, je commence à remplir ces blocs fiscaux avec un exemple de texte avec quelque chose qui, je pense, pourrait être utile pour cette section particulière. Je ne suis pas vraiment un coopérateur, et l'anglais n'est même pas ma langue maternelle, mais j'écris toujours le contenu autant que possible. Si vous êtes anglais n'est pas très bon, ne vous inquiétez pas pour ça. Ce n'est pas un problème parce que vous n'étiez pas dur pour vos compétences en anglais. Vous êtes engagé pour le design. Soyez juste devant votre client et expliquez-leur. Peu importe ce que vous mettez, il y a votre exemple et vos suggestions pour les aider, et ils devraient écrire leur propre contenu. Et ce qu'il peut aussi faire, c'est que vous n'avez pas à écrire cette copie. Vous pouvez les emprunter et les copier à partir d'autres sites Web. Donc, au cours de votre phase d'inspiration, vous avez probablement parcouru différents sites Web et trouvé quelques exemples qui sont d'un démarrage similaire ou des entreprises similaires, droit de sorte que vous pouvez saisir la taxe à partir de là et les copier et coller que. Mais assurez-vous toujours d'expliquer que vous n'écrivez pas de contenu pour eux afin que vous ne vous jugez pas pour ce contenu en ce sens que vous collectez cet exemple d'autres sites et peut-être même des concurrents. Et si vous êtes un peu dans la droite et envisagez de prendre un droit d'auteur en cours, vous pouvez donc ajouter cela à vos services. Les clients vous aimeront d'avoir enlevé cette partie de leurs mains. Tu gagneras plus d'argent, gagneras. Et une fois que j'ai fini avec le cadrage métallique, j'ai partagé avec mon client et lui ai demandé de réécrire le contenu et de supprimer quoi que ce soit s'ils veulent et de le remplir dans leurs propres salles. Avoir déjà une mise en page avec du contenu pré champ le rend plus facile pour eux. Teoh, c' est juste cette copie. Parce que sinon il est très difficile pour lui de comprendre ce que je voulais dire là et quel serait le but de la destruction, peut-être, et ces colonnes et ce qu'ils devraient écrire dans cela. Mais si je leur donne des exemples, alors ils ont l'idée et ils peuvent facilement sortir avec quelque chose de leur propre. J' évite d'utiliser Lauren Gibson et le texte factice comme ça autant que possible Mais parfois nous devons , et nous ne pouvons pas l'éviter, parce que parfois je dois créer une page pour ou un site Web pour un service financier compliqué que je n'ai aucune idée de comment décrire. Donc, dans ce cas, je vais utiliser la taxe factice ou peut-être les biographies ou les témoignages de quelqu'un ou quelque chose du genre. Il ne sert à rien de me remplir de quoi que ce soit et de perdre mon temps sur sa droite. On va utiliser un texte factice. Une autre grande raison pour laquelle utiliser le cadre métallique est en raison des dispositions, parce que les révisions font partie de tout processus de conception. Et si les révisions se produisent juste au cours de la face de conception, alors vous allez prendre beaucoup plus de temps, parce que alors vous pensez aux couleurs et rendre tout pixel parfait et perdre beaucoup de temps sur quelque chose qui vous avez déjà conçu et en quelque sorte attaché votre ah, ego à elle. Parce que la thèse ce qui arrive souvent avec les designers parce que quel que soit le travail que nous produisons, nous nous sentons en quelque sorte attachés à ce travail. Mais quand on fait des cadres métalliques, on n'y est pas attaché. Ils sont juste, vous savez, squelette moche qui ressemble à des griffons, et on peut changer la batterie facilement. Les révisions sont plus faciles est là et vous savez que les sentiments de personne ne se blessent. C' est un cadre métallique d'un de mes projets clients. Comme vous pouvez le voir, il est dépourvu de colliers de conception et est très rugueux. N' a pas d'images ou d'icônes. Je faisais ces sites pour une application de partage de scooters. Voyons ça vite pour que tu comprennes pourquoi j'ai fait. Et quel était mon processus de pensée. La barre de navigation est assez simple. Je n'ai même pas mis bas là-bas. Juste un taxing. C' est un logo. Au lieu d'une image de héros, il y a un espace réservé d'image, et c'est tout. À ce stade. Je n'ai pas décidé quel serait le héros, et ça n'est pas pertinent non plus. Bien que j'ai décidé de la mise en page, je voulais avoir un héros à droite et du contenu à gauche. Si je voulais un héros est un arrière-plan que je mettrais comme un fond d'étirement bord à hacher sur la section suivante, j'ai choisi d'avoir trois colonnes de contenu pour décrire comment le produit fonctionne en trois étapes pas beaucoup conçu, mais la mise en page est claire, et j'ai également pris la décision que comment cela fonctionne était une section importante à avoir juste après le héros. J' ai rempli le contenu moi-même, en réutilisant parfois les taxes des concurrents. Une partie importante est de donner l'exemple de taxe au client, de sorte qu'ils cliquent et commencent à écrire tout de suite sans beaucoup de recherche vers le haut. Ensuite créé une section avec une petite démonstration hors de l'APP avec un certain avantage. Mais nous allons sur le côté sur cette section de fait déjà eu une assez bonne idée de la façon de concevoir la section. Je voulais présenter l'application et leur montrer l'application en action. Donc, je prévois d'avoir une animation de cadeau vidéo sur l'application étant utilisé un peu plus de présentation et les avantages du produit, comme l'assurance stationnement gratuit et ainsi de suite. Ensuite, j'ai eu un prix et des sections de témoignage assez simple, et enfin nous avons appelé à la section d'action, et la nourriture ou les pages de clôture, en particulier les pages d'accueil avec la section froide à l'action, est une bonne idée. Vous voulez inviter les utilisateurs à faire quelque chose après avoir appris à connaître un produit ou un service que vous ne voulez pas laisser pendre. Leur indice est de ne pas savoir quoi faire ensuite. Vous pourriez les perdre donc Après avoir fini avec leurs cadres de feu, je l'ai partagé avec un client et leur ai donné des explications sur chaque section et le processus de réflexion derrière mes décisions. Et voici comment le design final a fini par chercher. Vous pouvez voir comment la mise en page et le contenu sont identiques, mais c'est un peu comme s'il avait été coloré dans. Voilà donc les raisons derrière l'utilisation de cadres métalliques dans votre processus de conception. Utilisez-les avant de concevoir Merci plus tard. 98. Styles Figma: Nous créons des wireframes, je vais vous apprendre deux fonctionnalités de Figma que nous n'avons pas encore abordées Nous allons en avoir besoin pour créer nos wireframes. Il s'agit de styles et de composants. Dans cette vidéo, nous allons aborder les styles. Vous savez comment, dans WPL, nous pouvons styliser les classes et les tags. Nous pouvons également faire quelque chose de similaire dans Figma. Par exemple, prenons un titre et lui donnons un style. Sous ces points, nous avons l' option pour les textiles. Si nous cliquons sur cette icône plus, cela créera un nouveau textile à partir du texte actuellement sélectionné. Nous pouvons le nommer H un, même manière que nous le faisons dans le flux Web lorsque nous stylons des textes O H one. Nous pouvons maintenant prendre n'importe quel autre texte et lui appliquer le style H one. Dans le panneau des propriétés, vous verrez que de nombreuses options d' édition sont désactivées, comme la taille du téléphone, la hauteur de ligne, etc. Mais nous avons toujours des éléments tels que couleur de remplissage et l'alignement du texte. Ils ne font pas partie du textile, ils peuvent donc toujours être édités. Cela n'affectera pas le textile lui-même. Il ne sera appliqué qu'à cette instance. S'il s'agissait de Webflow, nous ne serions pas en mesure de le faire. Tout serait modifiable et reflété sur toutes les instances avec la même balise ou classe Au sein des concepteurs d'interfaces comme Figma, ce comportement est plus logique Pour modifier un style, cliquez dessus, puis accédez au style d'édition. Nous avons la possibilité de modifier le style à partir d'ici. Vous pouvez modifier ce que vous voulez et vous verrez les modifications apportées au style, répercuteront instantanément sur toutes les instances. Cela ne semble pas grand-chose, mais lorsque vous avez plusieurs pages avec plusieurs titres sur chaque page, vous vous rendrez compte de leur taille. Nous avons également la possibilité de détacher le style. Cela vous permettra de modifier toutes les propriétés du texte et toute modification future du textile d'origine. Cela n'affectera pas le deuxième titre car il est désormais détaché de ce textile Si vous souhaitez supprimer le style, cela n'est pas très évident, mais cliquez dessus avec le bouton droit de la souris et vous obtiendrez une option de suppression. Les textiles ne sont pas la seule chose que nous avons dans la FIcMA. Presque toutes les autres propriétés du panneau peuvent avoir ces styles globaux. Remplissage, tracé, effets, même la grille. Le deuxième plus utile est toujours le style de couleur. Au même endroit, vous pouvez ajouter un nouveau style de couleur. Tout comme les textiles, il peut être appliqué à tous les autres éléments possédant une propriété de couleur. Peu importe qu' il s'agisse de texte ou de rectangle. Tout comme les textiles, les styles de couleurs sont grands. Je finis souvent par changer de couleur plusieurs fois lors de la conception d'un site Web. Je suis très pointilleux avec les couleurs et je peux facilement changer d'avis. Dieu bénisse les styles de couleurs. Ce sont les styles de Figma. S'applique à presque tout, f, co, texte, mise en page, g. Ensuite, nous allons aborder les composants. Restez dans les parages. 99. Composants Figma: Créons un bouton. Maintenant, si nous sélectionnons ce bouton et cliquons sur ce composant dans la barre d'outils, cela transformera ce bouton en composant. Que nous pouvons réutiliser dans notre fichier et les faire glisser à tout moment depuis l'onglet Ressources. Les composants de Figma sont le groupe d'éléments. Avec les styles, nous créons cette connexion globale pour un style en particulier. Mais avec les composants, nous pouvons créer une connexion globale pour plusieurs styles et pour chaque objet contenu dans ce composant. Le bouton d'origine est appelé le composant principal, et celui que nous venons de faire glisser s' appelle l'instance Les modifications que nous apportons au master seront répercutées sur chaque instance. Mais chaque instance peut remplacer les styles individuellement . Cependant, les modifications ne seront pas répercutées sur l'instance principale ou sur toute autre instance. Vous connaissez les classes combinées dans Weblo. Tout comme pour les classes combinées, les nouvelles modifications apportées au master n'affecteront que les styles qui n'ont pas été remplacés La première instance a changé la couleur en vert, tout comme le maître l'a fait, mais pas les deux autres ci-dessous. Pourquoi ? Parce que sur les deux ci-dessous, nous avons remplacé le remplissage en arrière-plan du bouton, mais sur le premier, nous ne l'avons pas touché Il hérite toujours du composant principal jusqu'à ce que nous le remplacions Tout comme les classes combinées de We Low, les autres styles que nous n'avons pas touchés et que nous n' avons pas remplacés seront toujours hérités du master Par exemple, si nous arrondissons les coins du bouton. L'une des grandes différences entre les classes dans Waffle et les composants dans Figma est que les classes ne contiennent pas d'autres Par exemple, si vous créez une classe pour une section de héros et que vous y insérez des titres, des boutons et des images, ces éléments ne font pas partie de la classe. Mais dans les composants Figma, ils le sont. Si je supprime un objet du composant principal, il sera supprimé de partout. Si j'avais un nouvel objet dans le master, cela refléterait toutes les autres instances. Il y a des éléments que vous ne pouvez pas annuler sur l'instance. Par exemple, quel que soit le composant. Vous pouvez supprimer ou ajouter de nouvelles couches à l'intérieur de l'instance. Je peux faire glisser ce rectangle à l'intérieur de l'instance, cela ne me permet pas. Je peux soit supprimer une couche existante du composant. Lorsque j'appuie sur Supprimer sur l'un des ingrédients, il disparaît, mais il est simplement masqué, et vous pouvez le voir dans le panneau des couches. La couche est toujours là, elle est juste cachée. Si je veux, je peux le montrer d'ici. Une autre chose que nous ne pouvons pas ignorer concerne les changements structurels tels que les tailles ou la position des couches à l'intérieur du composant Comme vous pouvez le constater, lorsque je sélectionne le rectangle, il n'y a pas de poignées de redimensionnement. Je ne peux pas changer ça. Cependant, nous sommes en mesure de modifier la taille de l'ensemble du composant. Le redimensionnement du rectangle n'est pas possible, mais nous pouvons le faire en redimensionnant l'ensemble du composant Si je modifie la taille du composant principal, il ne se répercutera le bouton bleu car il le remplace Mais cela ne concerne que la taille complète du composant. Si je change la taille du rectangle lui-même, ce bouton bleu est désormais impuissant et nous devons obéir Je ne peux pas non plus modifier la position du texte dans l'instance. Il n'y a aucun moyen pour moi de le déplacer. Maintenant, en ce qui concerne les éléments que nous pouvons remplacer, nous pouvons remplacer les styles de chaque élément, quels qu'ils soient Nous pouvons modifier la taille de l'ensemble du composant, comme je l'ai mentionné précédemment, et nous pouvons modifier le contenu Encore une fois, si nous le redéfinissons, quelles que soient les modifications que nous apportons au composant principal, elles ne seront pas reflétées Comme vous pouvez le constater, les deux autres boutons instantanément mis à jour leur texte, mais pas le bouton bleu. Nous sommes également en mesure de détacher les instances de leur composant. Vous pouvez le faire d'ici. Une fois détachée, elle cesse d'être un composant et ce sont des couches totalement libres et indépendantes. Une autre chose que nous pouvons faire avec les instances est de réinitialiser les modifications que nous leur avons apportées. Cette option réinitialisera chaque modification que nous avons apportée à l'instance et héritera de tout du maître Nous avons également la possibilité de réinitialiser uniquement certaines propriétés. Si nous sélectionnons le rectangle et revenons à l'option de réinitialisation, la liste déroulante met en évidence tous les styles qui ont été remplacés et nous pouvons les réinitialiser indépendamment Par exemple, nous pouvons réinitialiser le remplissage en arrière-plan, ou nous pouvons réinitialiser toutes les modifications du rectangle sans toucher aux modifications apportées texte à l' intérieur du bouton Si vous regardez de plus près le panneau du joueur, vous verrez que le composant principal possède cette icône en forme de losange à quatre carrés, et que l'instance possède cette icône en forme de losange unique. Pour localiser le composant principal, vous pouvez sélectionner n'importe quelle instance et cliquer sur Accéder au composant principal dans le panneau des propriétés. Cela fonctionnera même si le composant se trouve sur une autre page, mais pas s'il se trouve dans un autre fichier. Les composants A font partie de fichiers individuels. Pour ajouter un composant, vous pouvez soit le faire glisser depuis un panneau de ressources, soit simplement copier-coller un master ou une instance. Si vous souhaitez créer un nouveau composant, par exemple un bouton principal et un bouton secondaire. Détachez d'abord l'instance puis cliquez sur Créer un nouveau composant Si vous cliquez plutôt sur Créer un composant sur une instance active, cela créera simplement un nouveau composant au sein de l' instance en tant que partie intégrante de celle-ci. Cela devient bizarre, alors assurez-vous de le détacher d'abord. C'est tout pour le moment, vous vous habituerez aux composants avec de l'entraînement, et nous allons commencer cet entraînement par le câblage dans les prochaines vidéos 100. Kit de wireframe: Nous pouvons créer des wireframes de plusieurs manières. Il existe des applications tierces qui créent filaires, comme des maquettes balsamiques et des applications fantaisistes que j'ai Certains designers utilisent simplement un stylo et du papier et esquissent les wireframes de cette façon. C'est ce que je fais, mais uniquement pour mon processus de brainstorming, je ne le partage pas avec mes clients Le meilleur outil pour nous reste Figma. C'est ce que j'utilise ces temps-ci. Il est tout simplement plus facile d'y créer des cadres et de les partager avec le client . La partie collaboration et les commentaires leur permettent de commenter facilement peuvent également partager l'accès au fichier avec nos clients, et ils peuvent remplir le contenu directement dans Figma La meilleure façon de créer des wireframes dans Figma est d'utiliser des kits filaires, qui sont des bibliothèques de composants préfabriquées et prêtes à l'emploi. Nous pouvons les faire glisser directement depuis le panneau des composants, puis les placer sur la page et commencer à construire la page entière comme une structure qui sont des bibliothèques de composants préfabriquées et prêtes à l'emploi. Nous pouvons les faire glisser directement depuis le panneau des composants, et prêtes à l'emploi. Nous pouvons les faire glisser directement depuis puis les placer sur la page et commencer à construire la page entière comme la page entière Il existe de nombreux kits filaires disponibles en ligne, souvent gratuitement. Mais je n'étais pas très content de ce que j'ai trouvé. J'ai donc décidé d'en créer un pour vous, un kit simple et facile à utiliser basé sur ce que j'utilise moi-même. Et vous pouvez personnaliser ce kit filaire et l'utiliser vous-même dans vos futurs projets. Voici comment fonctionne ce kit. Depuis le panneau des ressources, nous allons faire glisser les composants prédéfinis dont nous avons besoin. Ils sont organisés comme suit dans le panneau des actifs. Nous avons des boutons. Nous avons des entrées telles que différents types de champs de formulaire, et nous avons des espaces réservés tels qu'un avatar, et nous allons construire notre structure métallique à l'aide de ces composants Outre ces éléments, j'ai également ajouté des icônes. Ce sont des icônes de design de matériaux gratuites de Google. Ce sont également des composants Figma. Vous pouvez les faire glisser, changer de couleur, etc. Le panneau des actifs comporte l'option de recherche, qui est très pratique. Cela permettra de rechercher tous les composants présents dans le fichier, y compris les icônes, car il s' agit également de composants réguliers. J'ai également créé des styles de texte et de couleur. Par exemple, lorsque nous avons besoin d'un titre pour notre section consacrée aux héros, nous en ajoutons un nouveau, comme d'habitude, et à partir des textiles, nous sélectionnons le premier titre ou un autre style de titre Lorsque nous avons besoin d'un paragraphe, nous ajoutons à nouveau un nouveau texte et choisissons un style de paragraphe à la place. J'ai également ajouté un style de couleur, afin que nous puissions instantanément donner une couleur à quelque chose sans, vous savez, nous inquiéter, le tester et proposer différentes versions de couleur. Nous utiliserons principalement ce s et cette phrase noirs. Il s'agit d'une belle palette de couleurs neutres idéale pour les wireframes J'aime les cadres métalliques qui ont l'air décolorés, semblent délibérément manquer de couleur, comme dans un livre de coloriage Pour que les clients comprennent qu'il ne s'agit pas d'un design. En ce qui concerne le moment où vous partagez des wireframes avec vos clients, assurez-vous d'expliquer votre processus et d'expliquer ce que sont les wireframes Souvent, ils ne sauront pas ce que sont les cadres métalliques. m'est arrivé une fois qu'un de mes clients pensait que ces armatures étaient des conceptions finales, et il n'en était pas très content, si vous pouvez l'imaginer. Les composants principaux et les styles que j'ai créés peuvent être consultés sur la page du kit filaire Si vous souhaitez apporter des modifications, vous pouvez ajouter ces instances principales à partir d'ici Vous pouvez également créer et ajouter d'autres composants si vous le souhaitez. Personnalisez ce kit filaire et utilisez-le comme modèle pour vos futurs projets Cela rendra votre étape de câblage fluide et rapide. Une remarque à propos des icônes. Si la recherche depuis le panneau des ressources ne donne aucun résultat, jetez un œil ici pour voir ce qui est disponible. Les noms de ces icônes ne sont peut-être pas aussi intuitifs. Par exemple, cette icône de corbeille s'appelle Supprimer, et la recherche dans la corbeille ne donnera aucun résultat Ouvrez ce fichier du kit filaire et assurez-vous d'avoir la copie d' un fichier dans votre compte Nous sommes maintenant prêts à commencer le wireframing. Nous y reviendrons dans la prochaine vidéo. Restez dans les parages. 101. Les wireframes - Page d'accueil partie 1: Dans cette vidéo, nous allons commencer à créer wireframes pour notre page d'accueil de collaboration avec Tam Dans le fichier du kit filaire, créez une nouvelle page en cliquant sur l'icône plus et nommez-la wireframes Nous allons ajouter un cadre et la grille, comme d'habitude. Cadre de bureau et notre grille habituelle à 12 points. Maintenant que nous savons comment créer des styles, sauvegardons ce superbe style pour utilisation ultérieure dans ce projet, car nous le pouvons, alors pourquoi nous allons nous faire gagner du temps plus tard. Pour que nous trouvions quelques idées sur le contenu et la mise en page que nous devrions avoir. Jetons un coup d'œil à notre brief de projet et au Moodboard. brièveté du projet est l'objectif et détails de haut niveau du projet, et dans Moodboard, nous avons une apparence, que nous avons déjà convenue avec notre client imaginaire Le site Web sera donc la norme pour les proies, mais l'objectif principal est d' obtenir des inscriptions à accès anticipé Ce sera notre appel à l'action. Nous savons qu'il y aura un blocage, et nous aurons également besoin d'un endroit où les gens pourront s'abonner à une newsletter. Jetons maintenant un coup d'œil au Moodboard. S. D'après le brief, nous savons que le client souhaite un site Web davantage basé sur la photographie que sur des illustrations. Je pense donc que cette approche de photo d'arrière-plan leur plaira et qu'elle constitue leur plaira et une bonne approche pour notre public cible. Nous pourrions trouver une photo à laquelle le public s'identifie, afin qu'il puisse s'y voir et cela nous aidera à entrer en contact avec le public. Sur cette base, définissons la section des héros. Nous avons besoin d'une photo d'arrière-plan, pas d'une vraie photo, mais juste d'un espace réservé Trouvez un élément d'image et faites-le glisser sur le canevas. Puis redimensionnez pour l' adapter au plein écran. Prenez une hauteur d'environ 800 pixels, ce qui est généralement une bonne taille pour la section des héros. Nous avons maintenant besoin d'une barre de navigation, d'un logo sur la gauche et des liens sur la droite. C'est assez simple. Utilisons le style d'en-tête 4 pour le logo. Style de lien pour les liens et bouton secondaire pour l'appel à l'action dans la barre de navigation. Je vais redimensionner le bouton pour le rendre plus petit car nous utiliserons une taille normale pour les boutons ordinaires Mm. Jusqu'ici, tout va bien. Passons maintenant au titre et au sous-titre Nous allons choisir un titre, un style et choisir la couleur noire dans le kit filaire Il est conseillé de s'en tenir à cette palette de gris neutre lors de la création de wireframes J'aime beaucoup cette palette. En fait, je l'ai volée dans un outil à armature métallique que j'utilisais par le passé. Outre les noirs et les gris, couleur primaire parmi ces options, ou choisissez votre propre couleur primaire si vous le souhaitez, mais tenez-vous-en à une seule. Si vous souhaitez modifier la couleur principale des boutons, la modification de la couleur du champ de l' ensemble du composant ne fonctionnera pas , car le contenu du composant est mixte. Le rectangle est bleu, mais le texte est blanc. Vous devrez donc modifier uniquement le rectangle. Mais la meilleure option est de changer le master. C'est pourquoi nous utilisons des composants. Sélectionnez une instance, puis cliquez pour accéder au composant principal et choisissez simplement une couleur différente pour l'arrière-plan de ce rectangle. Il en va de même pour le bouton secondaire, changez deux couleurs, une pour la bordure et une pour le texte. Dans mon cas, je vais m'en tenir à cette couleur primaire originale. Bien, j' ai déjà du contenu en tête. Je vais voler le gros titre à celui-ci, la collaboration instantanée pour les équipes distantes Comme je l'ai déjà mentionné, nous ne sommes pas des rédacteurs, nous n'avons donc pas besoin d'être parfaits avec le contenu Tout ce que nous pensons fonctionner fonctionne et donnera une idée à nos clients avec le moins de texte factice possible Ou demandez simplement à Cad GPT de rédiger du contenu pour vous. C'est une bonne chose à faire de nos jours. Je ne m'inquiète pas trop des distances ici, mais je m'assure quand même qu'il s'agit d'une ligne aérienne. Nous devons maintenant inciter les utilisateurs à faire quelque chose , notre objectif principal étant de recevoir leurs e-mails pour un accès anticipé. C'est ce que l'on appelle communément un appel à l'action ou un court CTA Le CTA est soit un formulaire, soit un simple bouton. Voyons ce que font nos inspirations dans ce cas. Beaucoup d'entre eux utilisent un formulaire avec un seul champ de courrier électronique. Je pense que c'est ce que nous devrions faire également. Nous pourrions avoir un formulaire contextuel, mais lorsqu'il s'agit d'un petit formulaire, particulier avec un seul champ, c'est une meilleure pratique car il est moins menaçant C'est là, aucun déclencheur n'est très transparent, demande à l'utilisateur juste un e-mail et il voit ce qui se passe Voilà, très simplement et rapidement, nous avons un wireframe pour notre section héros Grâce à cette clé filaire, n'a pas demandé autant d'efforts et nous n'avons pas eu à perdre de temps à choisir les téléphones et les couleurs C'est ainsi que vous devez travailler avec les wireframes, réfléchissant à la mise en page et au contenu sans vous soucier de l'apparence Dans vos projets réels, lorsque vous partagez le wireframe avec vos clients, vous pouvez ajouter des commentaires aux différentes sections et différents éléments de votre page pour leur montrer votre processus de réflexion Pour ce faire, passez en mode commentaire, et en cliquant n'importe où sur le cadre, vous pouvez ajouter de nouveaux commentaires. Les clients adorent voir le processus de réflexion que vous mettez en œuvre dans vos créations. Parce que lorsque vous créez un site Web et concevez un site Web pour une entreprise, vous ne leur offrez pas simplement quelque chose de joli avec lequel jouer, vous leur offrez une solution à leur problème. Souvent, vous apportez des solutions à plusieurs problèmes tels que la génération de ventes ou de trafic, création d'une présence en ligne une bonne marque et d'une certaine réputation. Un site Web élégant et moderne, qui créera une image et une réputation très spécifiques pour cette entreprise. Et vous devez montrer que vous comprenez parfaitement leurs problèmes et que vous avez trouvé des solutions potentielles. En d'autres termes, vous devez les vendre sur vos créations. Vous avez réalisé la première vente en les convainquant de vous engager pour vos services. Maintenant tu fais une autre vente. Tu n'en as pas fini. Vous faites une autre vente pour leur montrer que les designs que vous avez créés sont d'excellentes solutions aux problèmes auxquels ils sont confrontés en tant qu'entreprise. Je n'ai pas l'intention d'utiliser des arguments ou des techniques de vente louches lorsque vous expliquez vos créations Expliquez-vous simplement en tant designer et comment vous avez pensé de ces éléments que vous avez créés. Par exemple, ce champ de courrier électronique unique que j'ai mis dans les wireframes, je l'expliquerais au client, quelque chose comme ça Je suggère d'utiliser un seul champ de courrier électronique pour l'appel à l'action et l'abonnement au lieu de demander le prénom, le nom de famille, etc., car un seul champ de courrier électronique peu d'engagement de la part de l'utilisateur , il est moins menaçant, et comme il est également visible, nous pouvons l'adapter car si nous demandons plusieurs choses différentes, nous devrions mettez probablement un formulaire contextuel car nous occuperions alors trop de place. Mais en montrant le champ, un champ de courrier électronique est visible, nous montrons que nous sommes transparents. C'est la seule chose que nous demandons à ce stade pour le moment, et cet échange à faible engagement augmentera le taux d'abonnement global. Et c'est tout. Maintenant, si nous ne l'avons pas fait, et si nous n'avons pas expliqué notre processus de réflexion, y a de fortes chances qu'ils ne connaissent tout simplement pas le raisonnement qui sous-tend un remplissage, car ils ne sont pas des designers. Ils n'ont pas créé de sites Web et ils pensent du point de vue du propriétaire de l'entreprise et non du point de vue de l'utilisateur, n'est-ce pas ? Ils vont donc réfléchir, attendez, j'aimerais avoir plus d' informations sur les utilisateurs. J'aimerais connaître leur adresse e-mail, leur numéro de téléphone, leur numéro sécurité sociale, les détails de leur carte de crédit, etc. Maintenant, comme vous n'avez pas inscrit tous ces champs et que vous avez simplement indiqué votre adresse e-mail, ils ont l'impression que vous faites preuve de négligence, ou peut-être que vous n'avez tout simplement pas compris leurs défis commerciaux et ce qu'ils attendent de l' Ils auront donc l'impression que vous ne les comprenez tout simplement pas et que vous ne leur proposez pas de bonnes solutions pour leur entreprise. C'est donc notre travail en tant que designers d' éduquer nos clients sur des sujets comme celui-ci. Mais vous ne pouvez pas éduquer vos clients si vous ne vous informez pas vous-même au préalable. titre de lecture externe, je vous recommande donc de vous abonner à des blogs et à des bulletins d'information qui partagent informations, des recherches récentes et des nouveautés concernant essentiellement le design ou l' expérience utilisateur etc. Par exemple, le groupe Nielsen Norman est l'un de ces sites auxquels groupe Nielsen Norman est vous pouvez vous abonner, ils publient souvent des articles et des recherches sur les utilisateurs sujets d'expérience. De plus, prototyper point IO, qui propose cette newsletter n'est pas son objectif principal, mais elle inclut également les meilleurs articles, des articles de blog, généralement sur des sujets de design et d' expérience utilisateur et tout ce qui concerne le Web Si vous aimez les livres, je vous recommande lire Don't make me think de Steve Crook, un excellent livre sur expériences et la convivialité des utilisateurs du Web et des appareils mobiles Et un autre, le design d'objets du quotidien par Don Norman. C'est le même Norman du groupe Nielsen Norman. Et il ne s'agit pas vraiment de conception Web, mais plutôt d'objets et d'objets du quotidien que nous utilisons dans la vie réelle. Mais c'est une bonne introduction au parcours de l' expérience utilisateur et de la compréhension. Ce qu'il faut rechercher et, en gros, une sorte de philosophie qui sous-tend la conception d' objets et d'objets, y compris le Web parce que les gens interagissent avec lui, et en particulier le Web parce que c'est généralement un peu plus compliqué et un peu plus difficile d'interagir avec les utilisateurs que objets ordinaires que nous utilisons dans le monde réel, comme Fork. OK. Revenons donc à nos wireframes, mais nous allons continuer dans la prochaine vidéo 102. Les wireframes - Page d'accueil partie 2: Nous sommes de retour avec notre structure filaire sous le pli. Voyons laquelle des inspirations pourrait fonctionner pour notre prochaine section Ce serait une bonne idée de faire la démonstration du produit en montrant quelques écrans. Une section comme celle-ci pourrait fonctionner, les écrans d'un côté et le texte à côté. Nous pourrions voler du contenu sur Slack. L'utilisation du contenu des concurrents est une option valable. C'est ainsi que vos clients essaieront de se faire des idées de toute façon. Mais assurez-vous de mettre un commentaire dessus et d'indiquer d'où vous avez trouvé le contenu. Vous ne voulez pas qu'ils pensent que vous avez créé ce contenu et qu'à un moment donné, ils découvrent qu' il a été saisi auprès d'un concurrent parce qu'ils vont juste penser que vous venez découvrent qu' il a été saisi auprès d'un concurrent parce qu'ils vont juste penser de le voler, n'est-ce pas ? Ici, nous pouvons ajouter un lien pour en savoir plus vers d'autres pages potentielles qui expliqueront les fonctionnalités spécifiques plus en détail, comme ils l'ont fait ici. C'est un bon moyen de diriger visiteurs sur différentes pages du site Web, et cela apporte également un peu plus de détails au bloc de texte. Nous avons déjà un lien stylé. Il suffit de remplacer la couleur par votre couleur principale. Nous pouvons également ajouter une petite flèche à ce lien. À l'intérieur des composants, nous pouvons rechercher une icône, la saisir et la placer à côté. C'est tout pour la section. Maintenant, créons le reste des sections du corps. Je pensais à une section divisée comme celle-ci. contenu est du même style que celui que nous venons de faire, nous pouvons donc simplement le copier. Pour le graphisme, nous allons juste mettre le porte-image pour le moment. Ah, pour nos clients, nous expliquerons notre vision de ces images : nous allons créer une vue en réalité augmentée, en ajoutant des données de la plateforme à de vraies photos. Disons du contenu pour une gestion simple des tâches. Je vais l'écrire moi-même. Ne me jugez pas. Mm. Faisons une autre mise en page identique avec la photo. Répliquons simplement cela. Je maintiens la touche d' option enfoncée ici, donc elle se duplique lorsque je fais glisser le tout, mais vous devriez le savoir Je veux voir une métrique pour inverser la mise en page de cette section. Regroupez d'abord le contenu. Sélectionnez ensuite tout, et ces deux cercles roses devraient apparaître au milieu. Maintenez-le simplement et déplacez le contenu de l'autre côté. C'est si simple qu'un bébé pourrait le faire. Ajoutons maintenant une section dédiée aux témoignages. J'aime beaucoup celui-ci ici. Je vais le recréer presque tel quel. de vue du marketing, avoir des témoignages sur des sites Web de produits ou de services est une excellente idée Cela augmente la confiance dans la marque et le public se fait une meilleure idée du produit en lisant des expériences vécues par des personnes réelles. Une excellente façon de concevoir des témoignages est d' ajouter cinq étoiles, comme ils l'ont fait ici Les gens adorent voir comment quelqu'un a évalué le produit. C'est plus puissant et le simple fait d' indiquer cinq étoiles sur la page donne instantanément aux gens sentiment positif à l'égard du produit, car il existe une forte association dans le cerveau des gens liée à ces cinq icônes. C'est une petite technique psychologique. Vos employeurs apprécieront votre compréhension de ces choses. Et. J'ai donc juste essayé de le faire correspondre approximativement à l'inspiration, sans utiliser de couleurs spécifiques ou quoi que ce soit d'autre. Dans les designs réels, nous utiliserons étoiles dorées et la voiture blanche, mais ici, nous devons conserver la voiture grise, donc nous ne voulons pas nous soucier des ombres pour rendre la voiture blanche visible sur fond blanc. Il suffit maintenant de regrouper le tout et le dupliquer de la même manière que notre inspiration. Et le dernier à sortir du cadre. Une chose à noter ici, nous ne voulons pas que cette carte soit visible dans son intégralité. Nous voulons qu'il soit découpé comme dans l'inspiration. Alors, comment s'y prendre ? S'il ne se coupe pas , c'est parce qu'il ne fait plus partie du cadre. Vous pouvez le constater dans le panneau des calques. Lorsque vous déplacez un objet légèrement hors du cadre, Figma regarde votre curseur et décide si vous voulez le placer sur le cadre ou hors du cadre en fonction de cela Vous pouvez voir comment ce groupe est découpé lorsque le curseur se déplace à l'intérieur du cadre ou devient entièrement visible lorsqu'il se déplace en dehors du cadre Pour le déplacer en arrière, assurez-vous simplement que votre curseur se trouve à l'intérieur du cadre. Positionnez-vous ensuite à l'aide des touches fléchées ou de manière à ne pas déplacer le curseur vers l'extérieur. Fantastique Nous pouvons conserver la taxe sur les barrages dans les témoignages C'est quelque chose que nos clients devraient demander à leurs utilisateurs et le produire de cette façon. Ajoutons ces flèches plus légères, comme dans le dessin. F. Enfin, ajoutons un pied de page et finissons-en Comme je le fais souvent dans mes projets, je vais copier le contenu du pied de notre exercice précédent, car nous utilisons la même grille à 12 points et les colonnes sont parfaitement ajustées Cette réutilisation de différents composants entre différents projets provient un peu de paresse, mais fonctionne très bien en fin de compte Vous commencez à maîtriser ces éléments communs fur et à mesure que vous les utilisez dans différents projets et que vous commencez à comprendre les avantages et les limites de la mise en page, et à un moment donné, vous l'affinez jusqu'à obtenir un modèle personnel presque parfait. Maintenant, mettons à jour les couleurs et les textiles. M. M. Plus tard, au cours de la phase de conception, je pense utiliser un pied de page noir comme celui-ci Comme nous savons d'après notre dossier de projet que nous avons besoin d'un formulaire d'inscription à la newsletter, nous pouvons ajouter un formulaire de courrier électronique similaire ici, dans le pied Mmm, hum. Maman, hum . Mm. Maman, hum. M. M. H. M. M. M. M. Et voilà notre pied de page C'est bon. Les cadres métalliques pour les pages d'accueil Ensuite, nous allons câbler la page de l'article du blog. 103. Wireframes - Page d'article: Dans cette vidéo, nous allons créer des cadres pour la page de publication en bloc. En fait, une fois la page d' accueil terminée, les cadres métalliques pour le bloc de poteaux sont beaucoup plus simples car la barre de navigation est déjà terminée, le pied de page est terminé, il suffit de sortir par le milieu Nous n'avons fait aucune recherche pour trouver l'inspiration pour le bloc et le poteau. Trouvons quelques exemples et voyons ce que nous pouvons faire. Nous n'avons pas besoin de créer un moodboard pour cela. Passons rapidement en revue quelques exemples. Vous verrez que la majeure partie est de toute façon une mise en page assez standard Comme vous pouvez le constater, la plupart des exemples modernes ont une structure similaire, le titre et les détails de l' article en haut, puis l'image de couverture et le corps du texte Nous pouvons également faire la même mise en page. Copions d'abord le Na Bar. Cependant, dans la plupart des cas, vous voulez avoir la même chose sur l'ensemble du site Maintenant, en ce qui concerne le titre, il est courant d'utiliser une largeur étroite pour le contenu des publications Nous en avons parlé dans la partie consacrée au bon design. Le fait est que les paragraphes trop larges sont très difficiles à lire parce que vous commencez à perdre les freins de ligne. Une largeur maximale courante est d'environ 700 à 800 pixels pour le corps du texte. Faisons donc en sorte que le contenu encadré soit de 700. Cela inclut le titre. pas que le titre ait un problème avec la capacité de reproduction, mais puisque nous créons ce contenu, pour garder les choses Incluons-y également le titre. Sous le titre, mettons l'auteur de l' article et la date, comme dans d'autres exemples Dans bon nombre de ces exemples, j'aime la façon dont l'image de couverture va au-delà du contenu, au-delà du cadre que nous avons créé. Nous pouvons donc faire la même chose et créer peut-être 900 pixels pour l'image de couverture. Pour le corps, insérez simplement un texte factice. C'est sympa de terminer le post avec l'auteur et les détails. Nous l'avons déjà en haut, mais c'est une pratique courante de mettre l'auteur en bas également et un peu plus grand en ce moment. M. M. M. M. Après la page de publication, le site Web comporte généralement une fonction de commentaire à la fin. La plupart de ces sites Web utilisent des plug-ins tiers pour gérer les commentaires, comme Facebook et Discussion. L'utilisation de plugins de commentaires tiers est une excellente idée. La plupart des utilisateurs ont déjà Facebook ou Discuss, et ils peuvent commencer à commenter sans s'inscrire et tout ça. C'est ce que je fais aussi sur les sites web. J'utilise le plugin de discussion, qui est un peu mieux que Facebook car il donne au responsable du site plus de contrôle sur les commentaires et la modération Nous apprendrons également comment installer ce module de discussion, qui se trouvera dans qui se trouvera dans la partie avancée de ce cours, mais pour l'instant, il nous suffit de mettre un cadre métallique qui ressemble à une fonction de commentaire. Mmm, hum. Mm. Enfin, copions le. M C'est tout. Regardons le cadre filaire depuis le mode présentation. Sélectionnez un cadre et cliquez sur le bouton de lecture. air génial, nous pouvons maintenant partager cela avec un client, et c'est tout. Ils pourront également entrer eux-mêmes dans le mode de présentation à partir du fichier que vous avez partagé avec eux. Mais comme autre option, vous pouvez également partager directement le prototype. Lorsque vous partagez des liens Figma avec vos clients, c'est une bonne idée d' expliquer comment les choses fonctionnent, comment voir les commentaires Vous avez indiqué comment ajouter leurs propres commentaires, comment accéder au mode présentation, etc. Chaque fois que vous partagez quelque chose avec les clients, qu'il s' agisse de liens Figma, de flux Web ou autre, guidez-les toujours tout au long du processus, expliquez-leur et expliquez-leur comment faire en sorte que les choses fonctionnent Ne vous attendez pas à ce qu'ils découvrent tout seuls, toutes ces trames métalliques. Figma, les moodboards, les flux Web et les prototypes peuvent être accablants pour eux. Et s'ils n'ont pas été confrontés à un tel processus de conception, alors tout sera nouveau, tous ces nouveaux outils, et ils auront peut-être du mal à se débrouiller seuls Alors, guidez-les à chaque étape du processus, donnez-leur de petites explications sur la façon de faire quelque chose, peut-être des captures d'écran, parfois même petits didacticiels vidéo que vous pourriez faire. Et ils vont t' adorer pour ça. 104. Les wireframes - Blog Grid: Chaque blog a besoin d'une page où les utilisateurs peuvent parcourir tous les articles bloqués en un seul endroit. C'est ce que nous allons faire dans cette vidéo. Créez des cadres métalliques pour la page d'accueil des blocs. Mon design préféré pour le blog est une mise en page de notes, un peu comme dans cet exemple, mais dans notre cas, nous allons faire un peu plus simple. Nous n'avons pas besoin de chercher l'inspiration. Nous avons en fait quelque chose dans notre moodboard que nous pouvons utiliser Ce type de mise en page de cartes serait parfait pour notre page de blocage. Chaque carte-bloc comporterait une photo de couverture, un titre, quelques lignes du message et les détails de l'auteur Alors, préparons d'abord la page. Dupliquons la page de publication et travaillons-la à partir de là. Nous pouvons conserver la barre de navigation et le pied de page. On peut se débarrasser du reste. Et activons le réseau. Tout d'abord, nous pouvons mettre un titre dans un sous-titre. Nous pouvons le nommer blog ou derniers articles ou quelque chose comme ça. Créons maintenant une carte postale en bloc. Trois cartes d'affilée, donc ce serait la meilleure mise en page, je pense. Mmm, hum. Donnons-lui une couleur à partir de notre palette de couleurs pour cadres métalliques. Ensuite, nous avons besoin d'une image miniature nous pouvons faire glisser depuis l'onglet des actifs Ensuite, un titre et quelques lignes du billet de bloc lui-même. Le style du titre 3 devrait convenir au titre. M. Et pour le texte, je vais le sous-titrer. Le paragraphe semble trop long. Un conseil, restez fidèle aux styles de kits filaires Vous souhaitez limiter autant que possible vos décisions de conception à ce stade L'objectif est de se concentrer sur la structure et le contenu. Ça a l'air assez décent. Ajoutons maintenant l'auteur et date, comme sur la page de publication. M. M. M. M. Eh bien, c'est bien. Juste une dernière chose. Arrondissons les angles comme nous l'avons fait avec les cartes de témoignage En fait, nous ne devrions pas avoir peur d'arrondir les virages Cela devrait être laissé pour la phase de conception. Mais ce qu'ils ont fait, nous l'avons déjà fait sur des cartes de témoignage, alors autant le faire ici Cela arrondit le rectangle d'arrière-plan. Maintenant, comment arrondir le porte-image ? Si nous le faisons de la manière habituelle, les quatre coins seront arrondis, mais nous ne voulons pas que les coins inférieurs soient arrondis. Ça a l'air bizarre. Nous avons ici la possibilité d' arrondir des angles indépendants. Huit dans les coins supérieurs et zéro dans les coins inférieurs. Regroupons maintenant le tout , puis dupliquons-le pour créer une grille. Et nous y voilà. Je ne propose pas d' exemples de contenu individuels pour chaque carte, n'est pas vraiment nécessaire à ce stade. Cependant, dans les conceptions, nous le ferons, car lors de la présentation des conceptions, il est important de rendre le travail impressionnant et aussi proche possible de la réalité afin que les clients puissent mieux imaginer le résultat final Une dernière chose que nous devons ajouter est la pagination. Vous connaissez ces numéros de page à la fin de la grille, afin que les utilisateurs puissent passer à la page suivante. Avec Webflow, le meilleur moyen de créer une pagination est d'avoir les boutons suivant et précédent Nous allons donc faire glisser l'un des boutons depuis la liste des ressources. Changez la couleur pour quelque chose de plus subtil. N'oubliez pas que changer la couleur l'ensemble du composant lui-même ne fonctionnera pas. Vous devez sélectionner le rectangle d'arrière-plan et y changer la couleur. Maman, hum. Réduisez la hauteur du bouton, et c'est tout. Amenez le pied de page vers le haut et coupez l'espace supplémentaire du cadre. Mm. D'ailleurs, lorsque vous réduisez le cadre entier, peut parfois être redimensionné Cela a à voir avec les paramètres restreints de chaque élément du cadre. Je veux entrer dans les détails maintenant, mais si cela se produit, maintenez simplement la touche Ctrl ou Commande enfoncée pendant le redimensionnement du cadre, et cela ne le fera pas. C'est bon. Tous les cadres métalliques sont terminés. Nous pouvons partager cela avec notre client de deux manières. Soit nous pouvons le partager depuis un mode présentation, qui ouvrira chaque page individuellement, et pour parcourir les pages, nous pouvons simplement cliquer sur les flèches gauche et droite. Une autre méthode de partage consiste à partager le fichier lui-même. Avec les wireframes, je préfère partager le fichier car ce sont des wireframes, des croquis de progression du travail, croquis de progression du travail, donc ça me semble plus Les designs que j'aime partager en mode présentation donc plus proches de l' expérience finale d'un site Web. C'est tout pour les wireframes. Ensuite, nous allons commencer par les designs. Restez dans les parages. 105. Conception de la page d'accueil de TeamApp : Partie 1: Le moodboard, nous avons le wireframe. Nous sommes prêts à concevoir notre page d'accueil. Créons une nouvelle page, nommons-la design et copions le filaire ici car il nous sera plus facile de suivre le filaire au lieu de faire des allers-retours entre les À côté, ajoutons un nouveau cadre et notre grille habituelle à 12 points. OK, trouvons la photo de fond de notre section consacrée aux héros. J'aime bien cette photo parce qu'elle semble hors stock, un peu plus réaliste, montre qu'elle travaille à distance et elle est heureuse parce que notre plateforme de collaboration d'équipe est aussi bonne que cela. Le seul problème, c'est qu'elle est centrée, et nous voulons avoir une mise en page dans laquelle nous pouvons placer le contenu sur la gauche, sans que cela ne se chevauche avec son visage Si la photo est de bonne qualité, nous sommes en mesure de la déplacer et de la positionner sur le côté droit. J'ai inclus toutes les photos et tous les actifs dans le fichier de projet. Donc, si vous souhaitez réutiliser les mêmes photos, vous pouvez le faire, et vous pouvez le trouver sur la page des ressources. Mais si vous voulez opter pour votre propre interprétation, et je vous recommande vivement de le faire, trouvez vos propres photos et utilisez-les plutôt celle-ci. Mm. Mm. Ça a l'air plutôt bien. Il y a beaucoup d'espace, nous pouvons donc placer notre contenu sur la gauche. Maintenant, choisissons la typographie. Cette fois, essayons de trouver une police de caractères qui puisse fonctionner à la fois sur les titres et les paragraphes, pas pour une raison précise, mais juste pour nous entraîner Pour cela, nous devons trouver quelque chose de neutre, car nous allons l' utiliser pour un paragraphe, et quelque chose qui présente de nombreuses variations de poids. Nous pouvons affiner cela dans Google en utilisant un certain nombre de styles. Six styles en réalité, cela signifie trois poids différents, car chaque poids est associé à une version en italique Ce n'est donc pas vraiment suffisant. Je vais choisir au moins huit styles. Celui-ci s'appelle en fait work. Sans doute une bonne option. La cabine n'est pas mal non plus. Il suffit de vérifier rapidement le manuel des polices de caractères. N'oubliez pas que nous lisons toujours le manuel des polices ou que nous évitons les choix embarrassants Excellente. Tout est en sécurité dans cette description. Et maintenant, appliquons cette police à notre page. Au lieu de le créer à partir de zéro, je vais le copier à partir du wireframe ici Inutile de réinventer la roue à chaque fois. Je joue ici sans réfléchir, pour voir ce qui fonctionne le mieux. Je pense que cela suffira. Comme nous n'utilisons pas de poids plus lourd, il n'est pas nécessaire de rapprocher la hauteur de la ligne. La dernière masse signifie moins de gravitation à pleine capacité. J'espère que vous avez prêté attention à votre cours de physique à l'école et au texte du paragraphe. Nous devons ajouter une couche foncée sur l'image, sinon le contenu ne sera pas très visible Passons maintenant au formulaire d'appel à l'action. Je vais utiliser le bleu de ce dessin. Mais je vais en fait l' égayer un peu pour le rendre encore plus vivant Ils ont également ce jaune sur leur page, alors copions-le également. Peut-être que nous en trouverons une utilité. Vous êtes libre de choisir différentes couleurs si vous le souhaitez, selon vous, quel point vous voulez me suivre, pixel par pixel ou peut-être remixer un peu C'est bon de toute façon. deux approches ont une valeur d'apprentissage. Euh hein. Je ne fais que regarder les marges et les distances, sans vraiment suivre la grille, comme vous pouvez le constater Confiez toujours à vos yeux les directives et règles de conception. Les suivre aveuglément peut parfois donner résultats loin d'être optimaux Mm. J'essaie également d'éviter ce coin du meuble. Les objets de la photo et éléments de notre interface peuvent parfois interagir les uns avec les autres. Cela peut être une bonne interaction, mais cela peut parfois créer des tensions inutiles. D'accord, je suis jolie jusqu'à présent. Mettons une barre de navigation. A U h. Faisons des marges 12 haut et en bas et 20 sur les côtés. Si vous voulez créer un bouton fantôme ici, vous pouvez ou même faire en sorte que ce soit également fluide. N'hésitez pas à le remixer Ajoutons également un logo. Voici un autre moyen simple et rapide de créer un logo. Il suffit d'écrire le nom en petites majuscules et d'ajouter un point à la fin avec une couleur contrastante. Et voilà, vous avez un tout nouveau logo. Maman, hum. Jusqu'à présent, ça a l'air bien. Une chose que je veux corriger, cependant, c'est cette couche sombre sur l'image heure actuelle, nous utilisons une superposition complète, mais le mannequin n'a pas besoin d'être assise sous une couche foncée car nous n'avons aucun contenu devant Maintenant, comment l'illuminer tout en gardant autres parties sombres Nous allons utiliser un remplissage dégradé au lieu d'un remplissage solide, passer au remplissage que nous avons créé et remplacer par un dégradé radial. Cette fois, ce n'est pas linéaire. Pourquoi ? Parce qu'avec la radio, nous pouvons en quelque sorte la mettre en lumière. Nous pouvons maintenant positionner ce projecteur exactement là où nous voulons qu'il soit. Cette poignée de gauche réduit le rayon de ce cercle. Vous pouvez également jouer avec d'autres poignées pour obtenir le résultat exact que vous souhaitez. Bon, revenons maintenant à 40 % d'opacité. Et voilà. Son visage n'est plus sombre et semble globalement mieux. C'est un excellent moyen d' utiliser des images trop détaillées et contenant trop de détails. Vous pouvez créer des projecteurs sur vos points focaux, puis assombrir le reste de l'image Bien, arrêtons-nous ici et poursuivons le reste dans la vidéo suivante. 106. Conception de la page d'accueil de TeamApp : Partie 2: Et nous sommes de retour. Nous allons maintenant concevoir cette section. Nous allons avoir besoin de trouver des maquettes pour le produit afin de pouvoir le présenter Comme la dernière fois, je vais rechercher des ressources puis les importer dans Figma Je vais essayer différents mots clés tels que projet, tâche ou tableau de bord. J'ai déjà trouvé cette maquette, que je vais importer dans Figma puis l'utiliser Si vous souhaitez utiliser la même chose, vous pouvez consulter la page des actifs. Je l'ai mis là. Mais aussi, si vous voulez trouver quelque chose qui vous est propre, vous pouvez le faire, et vous pouvez accéder à la page Ressources où vous pouvez trouver différentes maquettes et modèles gratuits ou tout ce que vous pourriez inclure comme vitrine du produit Cet écran de réunion semble plutôt bon. Nous pouvons l'apporter et utiliser notre propre bleu. R Pour sélectionner le contenu d'un groupe, maintenez la touche Ctrl ou Commande enfoncée et sélectionnez avec votre souris Une sélection approfondie similaire à celle que vous effectuez en cliquant sur la même touche et en la maintenant enfoncée. Appuyez sur Shift au cas où vous voudriez désélectionner l'un des éléments Euh, comme cet écran est assez large, nous pouvons le déplacer hors du bord. C'est aussi une très bonne astuce. Je vais y ajouter une ombre pour le rendre plus visible. Voici une cassette de ses ombres. Rendez-les subtils comme s'ils n'attiraient pas l' attention. Si cela attire l'attention, c'est que c'est trop. Les bords de l' écran ne contrastent pas bien avec le fond blanc. Il y a une belle séquence que les designers utilisent dans ce cas. Nous pouvons utiliser un fond blanc cassé au lieu d'un fond purement blanc. Un peu comme ce qu'ils utilisent ici. Nous pouvons prendre cette couleur exo blanc cassé et appliquer sur l'ensemble du cadre en guise de fond. Voilà, c'est une énorme amélioration. Les bords de l'écran sont désormais beaucoup plus nets. Ah, euh , hein Maintenant, arrondissons les angles. C'est toujours une meilleure idée d'aborder de tels éléments d' interface. On dirait que c'est plus fini. Les coins pointus donnent l'impression que quelqu'un a abandonné à mi-chemin. Vous savez, ce serait bien de faire quelque chose comme ça, de sortir certains éléments de la maquette Cela va ajouter de la dimension et rendre le tout beaucoup plus intéressant. Mm voici une Figma cool Vous pouvez copier des propriétés et passer d'un objet à un autre. Comme pour l'ombre que nous venons de créer, sélectionnez une propriété dans le panneau, cliquez sur le bord pour la sélectionner correctement. Ensuite, contrôlez C pour le copier puis le coller sur l'élément souhaité. Vous pouvez également créer le style à partir de celui-ci et enregistrer ce style, puis réutiliser sur d'autres éléments. A Ça a air bien jusqu'à présent. Ajoutons le contenu. Et tout a l'air bien. Créons maintenant une section comme celle-ci. habitude, comme nous l'avons fait dans les autres exercices, nous avons la photo sur le bord, mais ces gars-là l'ont un peu différente. Ils ont un espace sur le bord et également entre les sections, nous pouvons donc faire de même. Nous voulons trouver des photos qui ont un peu d'espace libre pour que nous puissions placer les éléments de l'interface , comme dans l'inspiration. Une photo chargée ne fonctionnera pas. De plus, ce que j' aime souvent faire, c'est chercher des photos du même auteur. Lorsque vous utilisez des photos avec un style différent, cela crée un aspect irrégulier. Il est évident que les photos sont en stock et n'ont pas été prises dans le cadre d'une séance photo pour ce site Web Les photos du même contributeur auront souvent un aspect très similaire. Il aura le même style, même filtrage et un remplissage globalement similaire. L'utilisation de telles photos crée une incroyable cohérence sur la page. Dans notre cas, nous avons de la chance, le contributeur de la photo de notre héros possède d'autres photos que nous pourrions potentiellement utiliser. Je pense utiliser ces deux photos parce qu'elles sont prises dans la même scène sur ce canapé en cuir. C'est donc une cohérence encore plus grande. Nous allons avoir l'impression d'avoir créé notre propre séance photo pour ce site Web. Et je vais prendre certains éléments de la maquette elle-même du produit et les placer comme dans l'inspiration Il suffit de les placer quelque part sur la photo. H. Ça a l'air plutôt chouette. Nous avons eu de la chance avec ces photos. Ce n'est pas seulement le même style et la même scène, mais les deux modèles sourient et se regardent dans la direction de l'autre. 107. Création de page d'accueil de TeamApp : partie 3: Maintenant, pour la section des témoignages, copions la carte à partir du wireframe et apportons des modifications dessus Cela devrait théoriquement nous faire gagner du temps. Trouvons quelques photos de profil pour les témoignages. Mm. Une chose que vous ne devriez jamais faire est de partager avec votre client des designs contenant des photos factices répétées comme celle-ci Cela n'a pas l'air très beau et gâche en quelque sorte l'impact que votre design peut avoir lorsque vous le partagez avec un client. Même avec les noms, il ne faut pas vraiment beaucoup de temps pour trouver des noms aléatoires, mais le visuel est impressionnant, semble réel et peut être mieux apprécié. M. M. Certains plugins que vous pourriez utiliser pour Figma peuvent créer du contenu factice Celui-ci que j' essaie actuellement s'appelle Content real, et il peut en fait faire un très bon travail en créant des noms factices Dans cette page de ressources, j'ai mis un lien où vous pouvez trouver tous les plugins figma disponibles Vous pouvez passer par là et trouver différents connecteurs qui vous aideront à accélérer votre flux de travail. De même, ce que j'aime faire avec les paragraphes factices, c'est utiliser texte différent au lieu de simplement répéter exactement la même chose Vous voyez les wireframes, cela ne nous a pas dérangé parce que ce Ils sont censés avoir l'air mélangés. Mais c'est du design, nous voulons que les choses aient l'air aussi réelles que possible. Maman, hum. M. Très bien, j'ai l'air en forme. Je vais faire la même chose en le copiant à partir du cadre métallique et en le styliser juste là. Mmm, hum. Mm. Comme je l'ai déjà mentionné, je souhaite utiliser ce style sombre. Essayons d'utiliser notre bleu foncé. C'est bon, mais je vais le désaturer un peu pour qu'il y ait moins de bleu dedans J'aimerais que ce soit un peu plus subtil, plus noir ou gris. Heureusement, nous savons comment affiner les couleurs, n'est-ce pas ? Vous pouvez vous rafraîchir la mémoire en regardant une fois de plus la leçon de réglage précis dans la section couleur. Je vous ai enseigné de nombreux concepts dans ce cours, il est donc naturel qu'ils vous viennent à l'esprit. Reprendre ces leçons lorsque vous en avez besoin est un excellent moyen de consolider vos connaissances Nous pouvons supprimer une partie du bleu de la couleur en diminuant la saturation. Changez ce rack en H S B, qui correspond à la teinte, à la saturation et à la luminosité, pour que la deuxième case soit la saturation, et dans la valeur en pourcentage, diminuez-la simplement. C'est toujours la même teinte et cette nouvelle couleur s'intègre toujours bien dans notre palette. Il suffit de jouer avec les couleurs et les tailles ici. J'aime que les liens de bas de page soient flous et petits. Et c'est tout. Regardons-y en mode présentation. Notre page d'accueil est donc terminée et semble plutôt élégante. Il nous reste encore deux pages, la grille de blocs et la page des articles de blog, et nous y reviendrons dans les prochaines vidéos. 108. Conception de publication de blog: Le design de notre page d'accueil est en panne. Passons maintenant à la page des articles de blog. C'est ce que nous ont appris les wireframes. Copions ce cadre dans la page de conception afin de pouvoir le suivre facilement. Notre page d'accueil a un fond blanc cassé, mais sur le blog, je préfère l'avoir en blanc. C'est mieux pour la lisibilité du texte, ce qui est très important lorsqu' il s'agit d'articles de blog Nous allons donc copier-coller et utiliser barre de navigation directement depuis le design de la page d'accueil Il suffit de changer les couleurs. Pour les liens, le bleu foncé est bon, et pour le bouton, on peut garder le même style que celui-ci. Mais au lieu de couleurs blanches pour le texte et l'arrière-plan, nous pouvons utiliser notre couleur bleue principale. Pour le blog de l'auteur, nous n'avons pas encore de style spécial tel que la légende. Nous pouvons simplement appliquer le style de paragraphe d'abord, le détacher puis le modifier 15 pixels sont beaux et n'oubliez pas la couleur. Le gris serait bien ici, celui des styles locaux. Nous devrions créer un textile à partir de cela. J'aurais déjà dû le créer sur la page d'accueil. Il y avait de petits éléments de texte comme celui-ci, et si je l'avais fait là, nous aurions moins de décisions de conception à prendre ici et ils seraient tous liés, facilement modifiables et gérables à l'avenir Imaginez si le client revient et dit qu'il n' aime pas le style du téléphone, vous constaterez le véritable avantage de l'utilisation de styles. Nous avons maintenant le style de légende, et appliquons-le également aux données. R Pour l'image, prenons une Pour l'image, photo à partir de Splash ou de Pexels Il y a ce cercle à l'intérieur, donc ce que nous pouvons faire, c'est définir cette image comme un remplissage de ce cercle. Il suffit de retirer cette icône de son visage. Pour la photo de couverture, trouvons quelque chose, puis, comme pour l'image aérienne, modifions-le sous forme de remplissage d'image Excellente. Pour le corps, nous allons sélectionner le style du paragraphe et lui donner une couleur bleu foncé. Je n'opte pas pour la couleur grise comme sur la page d'accueil car le gris ne serait pas aussi bon en termes de lisibilité Sur la page d'accueil, c'était correct car le texte n' était pas aussi important. Mais ici, il s'agit d'un article de blog, et les gens doivent avoir une très bonne agréable expérience de lecture. Et s'ils plissent les yeux , si l'écran clignote ou s'ils ne voient pas correctement la police du texte, ils ne liront tout simplement pas une telle quantité de texte Et pour ce blog d'auteur, pareil, remplacez l'image, puis modifiez les styles de police et les couleurs. Bonjour, maman, hum. Une boîte de commentaires, laissez-la telle quelle. Inutile de le styliser car nous utiliserons un plugin qui a son propre style. De plus, inutile de recréer ce style ici, mais parfois je prends une capture d'écran d'un plugin et je l' insère à la place S'il est important mon client sache déjà à quoi ça ressemble. Et le pied de page est PZ. Nous pouvons copier et coller, mais il existe une meilleure option. Nous pouvons créer un composant à partir de celui-ci, car nous allons avoir ce pied de page sur trois pages différentes Ainsi, si nous décidons de modifier certaines conceptions, nous pourrons facilement modifier une instance, puis les trois seront mises à jour en même temps. C'est ça. Notre page d'articles de blog est terminée. Il nous reste encore une page, celle du taux de blocage, et nous allons le faire dans la prochaine vidéo. Restez dans les parages. 109. Conception de grille de blog: Dans cette vidéo, nous allons concevoir la page d'accueil des blogs. Cela va être assez facile car une grande partie est faite. Nous avons déjà des wireframes et une page BlogPost. Nous pouvons réutiliser les éléments de ces deux pages. Commençons par dupliquer la page du billet de blog. Supprimez tout ce qui s'y trouve à côté du titre et activons la grille Maintenant, organisez simplement le titre et le sous-titre. Maintenant, pour ce qui est des cartes, je vais en copier une à partir des wireframes et partir de là Si vous vous souvenez de notre inspiration, les cartes sont blanches sur fond gris. De cette façon, la carte est visible. C'est ce que je veux faire ici aussi. Nous allons donc peindre le fond en gris, Nous allons donc peindre le fond en comme sur notre page d'accueil. Nous pouvons maintenant changer la couleur de la carte en blanc. Ensuite, mettons l' image de notre publication sous forme de miniature. Tout ce que nous avons à faire est de mettre l'image sous forme de remplissage d'un rectangle. L'icône de l'espace réservé à l'image peut être simplement masquée ou supprimée Nous n'allons pas le raconter encore une fois. Nous avons besoin d'un autre niveau de style de titre que nous pouvons utiliser dans cette carte 22 en taille et semi-gras, je trouve que ça a l'air bien. Nous pouvons également activer la mise en majuscules du texte. Cela ressemblera davantage au titre du titre. Utilisons-le comme style de titre 3 au cas où nous aurions besoin de le modifier à l'avenir Passons maintenant au texte du paragraphe. Pour l'auteur et le bloc de date. J'aimerais qu'il soit plus petit que ce qu'il est actuellement. Il s'agit d'une information secondaire qui ne devrait pas avoir la même importance que le paragraphe. Je vais donc détacher le textile et le changer en 12 pixels. R Pour ce petit séparateur, je vais utiliser une tombe lumineuse. De tels séparateurs, je préfère toujours qu'ils soient plus clairs que le texte à côté Détachons l'avatar de l' auteur du composant. Et réduisons-le de dix pixels. R Nous pouvons ranger ces éléments à l'aide de la fonction d'alignement de Figma, les sélectionner puis les centrer horizontalement Ou comme l'appelle Figma, alignez les centres verticaux. Assurez-vous simplement que vous n'avez pas le groupe de couches, sinon cela ne fonctionnera pas. Nous pouvons également utiliser cette fonction de rangement ou de distribution pour les répartir uniformément. Et une fois que vous aurez fait cela, le nouveau champ s'ouvrira. C'est la distance entre les objets. Nous pouvons le remplacer par quelque chose comme dix et Figma distribuera les objets à dix pixels l'un de l'autre. C'est très pratique. Je laisse cet espace vide entre le paragraphe et le bloc auteur pour une bonne raison. Je prends en compte les occasions où un titre s'étend sur trois lignes De cette façon, nous nous assurerons que les cartes n' ont pas besoin de s'étirer et qu' elles ont toutes la même hauteur. Génial. La carte de blocage est prête. Nous pouvons maintenant les dupliquer pour créer la grille. Nous devrions mettre du contenu factice individuel sur ces cartes. Le présenter ainsi au client n'est pas cool. Ce que nous pouvons faire pour gagner du temps, c'est d'aller sur un blog et d'en extraire le contenu avec des images, des paragraphes, etc. Par exemple, nous pouvons aller sur medium.com et y trouver du contenu Pour télécharger des images, vous pouvez soit les capturer soit utiliser ce lien d'extension Chrome dans les ressources. Il scanne la page à images et vous permet de les télécharger facilement. D'accord , avec leurs noms, je vais utiliser le plugin content real. Je peux sélectionner toutes les couches de noms. Et en cliquant sur l'option des noms, il sera automatiquement renseigné avec des noms aléatoires. OK, faisons de même avec Aors. Assurons-nous simplement que le sexe des noms correspond correctement aux photos. Nous ne voulons pas d'une fille nommée Arthur. M. There. Tout va bien mieux maintenant. Cela semble réel et bien plus impressionnant qu'un simple contenu répété. Mais nous devons corriger l' espacement sur les blogs aor. Maintenant, les noms ont créé différentes lacunes. Dernière étape, le bouton suivant, nous pouvons simplement dupliquer à partir de wireframes et changer de couleur U. Tout comme nous le faisons avec les boutons secondaires, nous pouvons prendre la couleur grise et diminuer l'opacité C'est une astuce simple pour créer des couleurs à partir de la même palette. Nous ne l'avons pas fait dans les wireframes, mais ce serait bien d'ajouter une flèche à ce bouton pour représenter l'action suivante Je vais faire glisser l'icône directement depuis le kit filaire. H. Voilà. Ça a l'air sympa. Déplacez le pied de page vers le haut et c' est terminé avec une page de blog. R Tous les modèles de trois pages sont maintenant prêts. Nous partagerions cela avec le client, solliciterions ses commentaires et apporterions les révisions nécessaires. Designs, que j'aime partager depuis le mode présentation, cliquez sur Partager le prototype et envoyez ce lien au client. Il s'ouvrira directement en mode présentation, expliquez-leur comment naviguer entre les pages. Ce qui peut être évident pour nous n'est souvent pas très évident pour les clients. C'est ainsi que s'achève la section. Nous avons fait beaucoup de choses. Nous avons acquis une compétence très cruciale , à savoir le processus de conception. Nous sommes ensuite passés du brief du projet au moodboard puis au moodboard puis Enfin, nous avons fait les dessins, ce qui n'a pas été très difficile à cause de tous les petits pas que nous avons faits avant cela. Sans ces étapes, la conception aurait été bien plus difficile. Vos clients ne sauront pas comment fonctionne le processus de conception Web. Ils peuvent s'attendre , et ils le font souvent, à ce que vous vous asseyiez et commenciez créer le site Web immédiatement. Et souvent, ils préfèrent même cela parce qu' ils économiseront du temps et de l'argent et qu'ils auront un site Web opérationnel dès que possible. Mais créer des sites Web sans design peut donner de mauvais résultats, et généralement cela coûte plus de temps et d' argent, car les révisions sur site Web en ligne prennent simplement beaucoup plus de temps que conceptions ou même les révisions par rapport aux wireframes, ce qui est tellement facile à faire, Il suffit de déplacer des objets. Tu ne penses à rien. Imaginez maintenant tout ce que nous faisons dans Webflow, construisons tout, toutes les structures, et puis tout d'un coup, nous devons complètement repenser quelque chose et créer une nouvelle interaction ou une nouvelle mise Et il en va de même pour la phase de conception elle-même, car lorsque vous concevez, vous pouvez évidemment concevoir sans wireframes et sans contenu Mais lorsque vous avez des wireframes, que vous avez ce squelette et que vous concevez du contenu, les choses sont bien plus simples Et toutes les itérations que vous devez effectuer pendant la phase de structuration de votre page et de structuration du site Web sont beaucoup plus faciles à utiliser sur les beaucoup plus faciles à utiliser sur Pourquoi faire cela lors de la phase de conception ? Assurez-vous donc de renseigner vos clients sur votre processus de conception. Ils vous aimeront pour votre professionnalisme et pour la confiance que vous accordez à votre processus, même s'ils ont résisté au début Bien, la section suivante traite de la création de tout cela dans Webflow. Restez dans les parages. 110. Développement de Webflow 2: Très bien, C'est mes conceptions de construction de partie préférée à l'intérieur de Wetklo dans cette section. Nous allons construire cette conception de page d'accueil, et nous allons le faire en utilisant déjà tout ce que nous avons appris dans weap Low, mais aussi quelques nouveaux concepts que nous n'avons pas encore couverts. Dans la section suivante, nous allons apprendre les interactions, l' outil à l'intérieur du flux pleuré, et nous allons l'utiliser pour créer des interactions et des animations pour amener la page entière à la vie des interactions. Faire site Web plus excitant et impressionnant va être amusant. Et dans la section après cela, nous allons construire journal où nous allons apprendre le système de gestion de contenu CMS par flux humide et comment transformer n'importe quelle page en une page dynamique pour extraire informations de la base de données et comment réellement construire une base de données à l'intérieur, ah pleuré flux et comment le structurer afin que nous puissions créer le beau blawg avec différents champs dynamiques comme le nom de l'auteur, titres, photos pour couvrir les photos et tout ça. Donc, sans plus tarder, plongons dedans, restons autour 111. 2 : styles d'arrière-plan: Dans cette vidéo, nous allons créer une petite partie de la section des héros, uniquement l'image de fond. Pour ce faire, nous allons apprendre un concept que nous n'avons pas encore abordé en profondeur, à savoir les styles d'arrière-plan. Pour commencer, créons un nouveau projet. Le plan Webflow n'autorise que deux projets non hébergés, et si vous avez déjà atteint votre limite, ce que vous avez probablement fait, vous pouvez supprimer l'un de ces projets précédents, préférez le premier, le plus simple Nous allons nommer cette application d'équipe et choisir un modèle vierge. Comme d'habitude, nous commençons par la section. Nous utilisons déjà des styles d' arrière-plan pour définir un fond de couleur unie pour nos DVBlocks Mais ce n'est qu'une petite partie de ce que nous pouvons faire avec les styles d'arrière-plan. Tout comme Figma, nous pouvons également arrière-plan dégradés, des remplissages d'images et des superpositions de couleurs Tout cela est accessible en cliquant sur cette icône en forme de plus en arrière-plan. La première est l'image de fond. C'est ce que nous allons utiliser dans ce cas. Nous y reviendrons plus tard. Ensuite, nous avons le gradient linéaire, qui fonctionne de la même manière que FigmasGradient Pour modifier les couleurs de début et de fin, double-cliquez sur ces marqueurs. Vous pouvez également définir l'angle du dégradé. Dans Figma, nous utilisons ce bâton qui peut être déplacé manuellement Mais ici, nous devons régler l'angle en tournant ce cadran ou en cliquant simplement sur ces commandes de rotation ou en mettant le degré exact dans ce champ. Ensuite, nous avons le gradient radial. Dans Figma, nous pouvons déplacer le positionnement manuellement en faisant glisser le manche de ce stick, mais dans Webflow, nous pouvons le faire modifiant le positionnement sur cette la même manière, nous pouvons modifier taille du dégradé à partir de ces boutons. Ils ont des explications sur la façon dont la taille est déterminée, mais qui s'en soucie ? Il suffit de les changer pour voir ce qui fonctionne pour vous. La dernière option est la superposition de couleurs. Ceci est principalement utilisé pour mettre une couleur semi-transparente sur les images, comme ce que nous avons fait dans Figma, mais au lieu d'un dégradé, juste un remplissage solide Pour que cela fonctionne, nous devons ajouter une image en tant que couche supplémentaire et la placer sous la superposition Cela fonctionne exactement comme vous vous en doutez. Masquez, affichez, faites-les glisser, supprimez. Bien, dans notre cas, nous devons ajouter une image de fond. Nous devons exporter l'image depuis notre fichier Figma , puis la télécharger ici Oh, nous avons trois options de taille. Le premier est personnalisé, ce qui nous permet de donner des valeurs personnalisées à notre image. Le tuilage est activé par défaut. Nous devons le supprimer d'ici. Nous voulons que l'image s' étende et remplisse tout l' espace de la boîte. Pour cela, nous devons sélectionner la couverture. Une fois la couverture terminée, l' image sera redimensionnée et recadrée pour s' adapter à tout l'espace En d'autres termes, il couvrira tout l'espace. Avec un conteneur, l'image est redimensionnée pour s'assurer que toutes les parties de l'image sont visibles Ainsi, quelle que soit la manière dont vous modifiez les dimensions de l'écran ou la taille du bloc div, l'image entière sera toujours visible. Cela signifie qu'il y aura souvent des espaces vides. La couverture est donc la meilleure solution dans notre cas. Maintenant, comme vous pouvez le constater, le réglage du couvercle est très fluide. Il ajuste à la fois la taille et le recadrage pour que l' image couvre l'ensemble S'il le faut, il étirera l'image entière au-delà de sa taille d'origine. En matière de culture, nous avons contrôle sur le côté de la culture, ce qui est contrôlé dans le cadre des options de positionnement Cette carte de positionnement est un excellent moyen visuel d' ajuster et de voir laquelle fonctionne le mieux. Le positionnement par défaut, en haut à gauche, n'est pas très bon. L'ordinateur portable qu'elle regarde est vraiment important dans l'histoire. Sans l'ordinateur portable dans le cadre, nous ne savons pas ce qu'elle fait. L'image devient confuse. Compte tenu de ce fait, nous devons choisir une position où l'ordinateur portable apparaît à tout moment. Le centrage serait peut-être mieux. Cela permettra d'ancrer l'image par le centre et de recadrer tout excédent sur les quatre côtés. Pour le moment, c'est bon. Lorsque nous publierons le contenu, il se peut que nous devions l'ajuster. Mais on oublie encore une taille, la plus large. Nous devons également vérifier là-bas. Cela n'est peut-être pas visible pour vous, mais la photo est un peu floue ici. Pourquoi ? Parce que l'image que nous avons exportée mesure 1 440 pixels. C'est la taille de notre cadre design dans Figma. Ainsi, sur des écrans plus grands, il s'étirera et la photo perdra en qualité. heure actuelle, l'aperçu en pleine largeur que je regarde est de 1 920 pixels. C'est nettement plus grand que les 1 440, sorte que la photo dépasse sa taille d'origine Pour résoudre ce problème, nous devons exporter une image plus grande depuis Figma, et nous devons exporter une image suffisamment grande pour couvrir la plupart des tailles d'écran Et cela représente généralement 1 920 pixels. sont évidemment des résolutions plus importantes que cela, mais nous n'avons pas à devenir trop fous , car il ne s'agit que d'une très petite minorité. Et même dans ces cas, les personnes qui utilisent de très grandes tailles d'écran utilisent pas la pleine largeur de leur navigateur sur toute la taille de leur écran. Très souvent, ils continuent à le réduire et ils peuvent toujours le regarder avec une taille de 1920 pixels. OK, pour exporter une plus grande taille pour notre image, nous pouvons simplement saisir la largeur que nous voulons dans ce paramètre de taille. Entrez 1920 suivi de W pour la largeur. De cette façon, nous exporterons la photo en 1 920 pixels Y. ce cas, assurez-vous que l'image originale que vous mettez ici mesure au moins 1 920 Sinon, vous étirez simplement l'image comme du Spandex, et c'est la même chose qui se passe dans Webflow, donc c'est inutile L'image originale que j'ai placée dans Figma était grande. Je l'ai simplement réduit pour le positionner parfaitement dans le cadre. Nous pouvons maintenant revenir en arrière et le télécharger pour notre section héros. Et c'est tout. Nous avons appris à utiliser les styles d'arrière-plan dans Webflow, principalement en ce qui concerne le réglage de l'image, et comment positionner parfaitement pour s'assurer qu' il s'étire, se rétrécit et se rétrécit très bien sur de nombreuses tailles d'écran différentes J'ai ignoré quelques autres paramètres rarement utilisés dans les styles d' arrière-plan, mais maintenant, vous connaissez déjà mon style d'enseignement Je n'aime pas encombrer votre cerveau choses jusqu'à ce que nous en ayons réellement besoin. Nous allons continuer avec notre section héros dans la prochaine vidéo, alors restez dans les parages. 112. Webflow 2 : Navbar (application d'équipe): Dans cette vidéo, nous allons créer la barre de navigation. Si vous vous souvenez, la barre de navigation est un composant prédéfini de Webflow, que nous pouvons faire glisser directement sur les cavas à partir d'ici, et nous pouvons la styliser comme nous le souhaitons Voici une astuce cachée de Webflow. Appuyez sur Commande ou Ctrl E. Vous obtiendrez cette barre de recherche rapide. Ici, nous pouvons rechercher tous les éléments et trouver des actifs et bien plus encore. Vous pouvez rechercher dans la barre de navigation et la faire glisser directement sur la page ou simplement appuyer sur Entrée et nous l'insérerons automatiquement OK, alors que devons-nous faire avec une barre de navigation ? La première chose que j'ai remarquée, c'est la taille du contenant. La barre de navigation utilise une largeur de conteneur par défaut de 950 pixels ou quelque chose comme ça Si vous vous souvenez de la dernière fois, nous avons utilisé un contenant différent, mais quelle est la taille du contenant que nous voulons utiliser ? C'est assez simple à découvrir. Il suffit de mesurer le conteneur Figma, qui correspond exactement à la largeur totale de notre grille Tracez un rectangle dessus et voyez quelle est la largeur de ce rectangle. Cela fait 1 160 pixels. Maintenant, que devons-nous faire dans Webflow ? Il suffit de prendre le conteneur et lui donner une nouvelle largeur maximale. Pourquoi lui donnons-nous une largeur maximale et non la largeur normale ? Parce que la largeur normale n'est pas réactive. Nous voulons qu'il rétrécisse lorsque l'écran rétrécit, et une largeur normale le maintiendra à 1 160 pixels, quelle que soit la taille de l'écran La barre de navigation est collée sur les bords lorsque nous réduisons l'écran, nous devons donc y ajouter un peu de rembourrage Et voilà. Ensuite, nous devons changer l'arrière-plan. Notre barre de navigation dans le design est transparente. C'est facile à changer. Sélectionnez l'intégralité de la barre de navigation, pas seulement le conteneur, et changez la couleur en transparent OK, ajoutons maintenant le logo. Nous devons d'abord l'exporter depuis Figma. Nous allons l'exporter sous fichier SVG car pour les images vectorielles, c'est le meilleur format de fichier Il s'agit d'un fichier de petite taille, et il ne perd jamais en qualité peu importe à quel point vous l'étirez. Pour insérer le logo dans le cadre de la marque, nous devons d'abord supprimer l'élément d'image. Tu as vu ce que j'ai fait ici ? Très bien, puis recherchez une image. Et comme j'avais sélectionné un élément de marque, il est tombé directement à l'intérieur lorsque j'ai appuyé sur Entrée. Ensuite, personnalisons les liens. Mais d'abord, nous devons ajouter la police à notre projet. Nous utilisons un téléphone Google appelé Kavin. Elle ne figure pas dans la liste des polices ici, nous devons donc l'ajouter depuis les paramètres du projet. Nous pouvons accéder à cette page à partir de ce lien ici. Je t'emmènerai exactement au bon endroit. Je pense que nous utilisons la plupart des styles de téléphone, alors ajoutons-les tous. Et c'est fait, nous pouvons maintenant retourner voir le concepteur et commencer à construire ou à concevoir. Si vous avez laissé l'onglet Designer ouvert, assurez-vous de l'actualiser après avoir ajouté la police, afin que celle-ci apparaisse dans le menu déroulant. Maintenant, le moyen le plus évident d' appliquer un téléphone à quelque chose est de sélectionner l'élément et de changer la police. Mais cela n'utilise pas toute la puissance du HTML et du CSS. Si nous appliquons un style de police à un niveau élevé, il sera hérité par tous les enfants. L'élément le plus élevé de la hiérarchie est le corps. Nous pouvons accéder au corps depuis le navigateur. Une fois le corps sélectionné, allez dans le champ de sélection et dans le menu déroulant, sélectionnez Lorsque vous sélectionnez le body tag, vous verrez que certains styles de téléphone sont en bleu. Cela signifie que certains styles y ont déjà été appliqués par défaut. Nous pouvons changer le téléphone en cabine ici. Désormais, chaque nouvel élément, étiquette de paragraphe d' en-tête sera encapsulé par défaut jusqu'à ce que nous les remplacions Pourquoi cette approche est-elle préférable à la modification des polices directement sur chaque élément ? Eh bien, d'abord, cela fait gagner du temps. Mais, deuxièmement, en modifiant simplement la balise body, nous pouvons modifier la police sur l'ensemble du site Web en quelques clics. C'est ça. Les Navinks héritent maintenant de la police de la balise body. Vous pouvez même cliquer sur ce lien orange, qui vous indiquera qu'il hérite du style de la balise body Passons maintenant au style du reste des propriétés des liens. Changez la couleur en blanc à partir d'ici. Les autres liens étaient à la mode, pourquoi ? Parce qu'aucune classe de style ne leur est appliquée par défaut. En changeant de voiture sur la première, Webflow a créé automatiquement une nouvelle classe de style et l' a appelée lien de navigation Nous pouvons maintenant prendre cette classe et l'appliquer à deux autres, sorte que toutes les modifications s'appliquent à toutes. Nous avons cinq liens Nab dans le design et l'un d'eux est un bouton Nous allons modifier la taille des liens pour qu'elle corresponde à la taille du bouton. Si nous sélectionnons l'un d'entre eux et vérifions les propriétés d'espacement, vous verrez que leur taille est déterminée par le rembourrage Si nous modifions ces valeurs de rembourrage pour qu'elles correspondent au bouton de nos designs, nous obtiendrons la taille correspondante Le rembourrage du bouton dans les dessins est de 12 à la verticale et de 20 à l'horizontale Stylisons le dernier lien pour le transformer en bouton. Il suffit d'ajouter un arrière-plan et d'arrondir les coins. Mais nous ne pouvons pas simplement le coiffer dès le départ, n'est-ce pas ? Il a la même classe que les autres, il va donc modifier tous les liens. Que faisons-nous ? Ce cours combiné, bien sûr. Accédez au champ de sélection et saisissez un nouveau nom à côté du lien Nab Cela va lui donner une classe combinée. Le CSS distingue les majuscules et minuscules, donc peu importe que vous utilisiez des majuscules ou des minuscules Je préfère utiliser des minuscules pour gagner du temps. Webflow met automatiquement en majuscule. Je suggère d'utiliser des minuscules. La saisie est plus rapide et vous verrez également la différence entre les styles créés automatiquement par Webflow et ceux que vous avez créés manuellement Très bien, alors quelles sont les propriétés de notre bouton ? Il avait un fond blanc avec opacité de 20 % et des coins arrondis de quatre pixels Ce A pour Alpha vous permet de définir la transparence de la couleur. Mettez-en 20, et voilà. Les coins arrondis doivent être appliqués à partir d'ici sous le rayon de bordure. Excellent, corrigeons l'espacement maintenant. Dans nos designs, les liens sont situés à 30 pixels de ce bord supérieur. Nous pouvons le créer dans Webflow de deux manières, soit en ajoutant une marge de 30 pixels au-dessus du conteneur, soit en ajoutant un rembourrage de 30 pixels à la barre de navigation elle-même Le résultat est le même, mais le second est meilleur, pourquoi ? Parce que le conteneur est une classe que nous allons réutiliser ailleurs, il est donc préférable de le conserver intact. La classe Navbar, en revanche, sera utilisée que dans la barre de navigation afin que nous puissions la styliser en toute sécurité comme nous le souhaitons Comme vous pouvez le constater, le logo n'est pas centré. C'est à peine perceptible si vous ne voyez pas les limites du conteneur, mais nous ne pouvons pas ignorer ces détails. Nous voulons que notre site Web soit impeccable, une œuvre d'art. Alors, comment centrons-nous le logo au milieu ? Chaque fois que vous devez déplacer ou positionner quelque chose, commencez toujours par penser aux marges et au rembourrage Ces propriétés couvriront la majorité des cas. Nous pouvons simplement ajouter une marge supérieure au-dessus du logo, et c'est tout. Je mesure juste avec un œil. Nos liens de navigation n' ont aucun effet de survol sur eux pour le moment Cela rend la barre de navigation inactive et il n'est pas très amusant d'interagir avec elle La dernière fois, nous avons ajouté une bordure sous-jacente aux liens. Cette fois, nous pouvons faire quelque chose de différent, quelque chose de plus simple, comme changer de couleur. Voici l'un des effets de survol les plus simples, les plus rapides et les plus efficaces que vous puissiez utiliser sur de nombreux éléments interactifs Modifiez l'opacité au survol. Comment appliquer l'effet de survol aux éléments depuis l'état de survol, accessible ici Réglons l'opacité à 80 %. Et là, cet effet simple fonctionne également sur le fond. Ajoutons un effet de transition pour que le changement de survol soit agréable et fluide Cela doit être ajouté à un état normal, non à l'état de survol, mais cela affectera le survol On pourrait s'attendre à ce qu'il soit modifiable à l'intérieur de l'effet de survol, mais ce n'est pas le cas C'est ainsi que fonctionne le CSS dans ce cas. Il y a probablement une logique derrière tout cela. Testons la réactivité des ordinateurs de bureau, pas celle des mobiles. ce que nous ferons à la fin. Et c'est tout. La barre de navigation a l'air bien. Nous terminerons la section consacrée aux héros dans la prochaine vidéo. Restez dans les parages. 113. 2 : contenu de héros: Et nous sommes de retour pour créer le contenu de la section des héros. Pour Stars, nous avons besoin d'un conteneur, non ? Et donnez-lui une classe de conteneur que nous avons déjà créée la dernière fois dans le Napbar. Bien, mettons notre contenu dans le conteneur. Nous avons un titre, un paragraphe et un formulaire. Nous allons styliser le titre et le paragraphe de cette vidéo, mais nous allons créer le formulaire dans la prochaine section afin de pouvoir aborder formulaires de manière plus approfondie, car nous ne les avons pas encore abordés. Nous avons besoin d'espace sur les côtés, comme nous l'avons fait avec le napbar. Nous pouvons ajouter le rembourrage à la boîte des héros. Mais attends une seconde. Cela ne semble pas correct. La barre Nab est désormais encore plus serrée à l'intérieur. C'est parce que nous avons un rembourrage sur le Nab bar. Et la barre de navigation se trouve à l'intérieur du bloc héros Il y a donc deux fois plus de rembourrage, soit un total de 120 pixels Supprimons donc le rembourrage de la barre de navigation car nous n'en avons plus besoin. Celui du héros s'en chargera. Vous pouvez facilement réinitialiser n'importe laquelle des étoiles en cliquant ici. J'utilise généralement le raccourci, qui est Option plus clic. Je pense que ça devrait être Aclick pour Windows. Stylisons le titre. La taille est 55 et le poids est normal. Il en va de même pour les autres exemples de titre présents partout dans notre design Ce serait donc une bonne idée de styliser ce titre comme un tag H one et pas simplement comme une classe Vous vous souvenez de la différence entre une classe et un tag ? La balise est un élément HTML de base. C'est la façon dont vous indiquez au navigateur qu'il s'agit d'un titre, d'un paragraphe ou d'un bloc DO. Si nous stylisons directement une balise H one, nous serons en mesure de contrôler toutes les balises H one de notre site Web sans appliquer aucune classe à. Style tech, assurez-vous qu' aucune classe n'est sélectionnée. Le champ de sélection doit donc être vide. Parfois, vous l'oublierez et nous créerons directement le style d'un titre Cela créera automatiquement une nouvelle classe. Toute modification ne s'appliquera donc qu'à cette classe. Pour résoudre ce problème, supprimez simplement la classe et recommencez. Et sélectionnez tous les en-têtes H one dans le menu déroulant. Vous êtes en train de styliser le tag H one. C'est exactement ce que nous voulons. Nous avons besoin de la valeur de hauteur de ligne. Et comme nous ne modifions jamais la hauteur de ligne par défaut de ce titre, le champ indique actuellement Auto WAP ne prend pas cela comme une valeur, donc cela ne fonctionnera pas pour nous. Mais si vous cliquez dans le champ, les balises d'espace réservé vous indiqueront la hauteur de ligne par défaut en pixels, qui est d'environ 67 pixels Si vous souhaitez utiliser des unités de pourcentage plutôt des unités de pixels pour la hauteur de ligne, vous pouvez simplement faire le calcul. La valeur en pourcentage est relative à la taille du téléphone. Par exemple, une hauteur de ligne de 100 % correspond à la taille du téléphone. Pour un téléphone de 50 pixels, cela représente une hauteur de ligne de 50 pixels. hauteur de ligne de 200 % serait de 100 pixels, le double de la taille du Dans notre cas, nous pouvons prendre 67 et diviser par 55 ou la taille du téléphone, multiplier par 100, afin d'obtenir la valeur en pourcentage, soit environ 122 % Je préfère généralement utiliser des pourcentages car cela présente un avantage important Lorsque vous modifiez la taille de votre téléphone sur des écrans plus petits, vous n'avez pas besoin de modifier la hauteur de la ligne, car il s'agit valeur en pourcentage qui sera calculée en fonction de la nouvelle taille du téléphone. Alors que l'unité de pixels conservera cette hauteur lorsque vous modifiez la taille du téléphone. Vous vous retrouverez donc avec d' étranges situations de hauteur de ligne. Remarquez que le cadre de sélection reste inchangé. Cela est dû au fait que la hauteur de ligne est une valeur de pixel fixe. Alors que pendant le pourcentage de hauteur, le cadre de délimitation augmente et rétrécit en fonction de la taille du téléphone Bien, je ne vais pas le mettre en blanc, tu sais pourquoi ? Parce que la plupart de nos gros titres ne seront pas blancs. Ils seront de cette couleur bleu foncé. Définissons plutôt cette couleur bleu foncé ici, puis nous trouverons un autre moyen de changer celle-ci en blanc. Je vais entrer dans le mode d'édition des styles de couleurs afin de pouvoir copier le code couleur. Sinon, elle ne s' affichera pas dès le départ, car nous avons défini cette couleur comme style. J'aimerais également enregistrer cette couleur bleue d'une manière ou d'une autre, afin de ne pas avoir à chercher le code hexadécimal chaque fois que j'en ai besoin Entrez des variables. Vous remarquerez probablement ce petit point violet qui apparaît à chaque fois que vous survolez certains styles Cela vous permet d'enregistrer différentes valeurs que vous pouvez réutiliser et contrôler à partir d'un seul endroit. Par exemple, cliquez sur ce point, puis sur l'icône plus pour créer une nouvelle variable et nommez simplement cette variable, bleu foncé ou bleu marine ou comme vous le souhaitez. Cette couleur est maintenant devenue une variable que nous pouvons réutiliser ailleurs, par exemple sur un bouton. Il vous suffit de cliquer à nouveau sur ce point, et vous pouvez maintenant voir que la variable bleu foncé est disponible dans la liste déroulante, que nous pouvons appliquer à l' arrière-plan de ce bouton Si vous pensez que cela fonctionne exactement comme Styles Infigma, vous avez raison C'est exactement le même concept avec un nom différent et quelques autres petites différences, mais l'idée sous-jacente est la même. Par exemple, lorsque vous modifiez votre variable, toutes les instances de votre côté sont mises à jour. C'est le même comportement que Figma. Vous pouvez également dissocier la valeur de la variable, puis modifier la couleur indépendamment Figma affiche tous ses styles sur le panneau ici lorsqu'aucun élément n'est sélectionné, mais Webflow dispose d'un panneau dédié aux variables, lequel vous pouvez gérer toutes les variables en un seul Modifiez-les, supprimez-les, ajoutez-en de nouvelles. Cela montre tous les différents types de variables que vous pouvez ajouter. Lorsque vous supprimez une variable là où elle a été utilisée, vous recevez ce message. À partir de là, vous pouvez restaurer la variable ou la dissocier Et c'est à peu près tout. C'est une fonctionnalité simple mais utile. Très bien, passons à autre chose. Le tag H one est prêt. Si nous ajoutons un nouveau titre, nous reporterons maintenant les styles de titre Alors, que diriez-vous de cette couleur blanche pour le titre du héros ? celui-ci, nous pouvons simplement y ajouter une nouvelle classe , puis le styliser en blanc. J'aime ajouter un nom de classe blanc, dans ce cas, si la couleur est la seule chose que je change. De cette façon, le cours sait clairement ce qu'il fait, et je peux réutiliser ce cours chaque fois que j'ai besoin d'un titre blanc ou de tout autre texte blanc d'ailleurs Chaque fois que vous essayez d'appliquer une nouvelle couleur à un élément auquel une variable est déjà appliquée, vous devez d'abord dissocier la couleur de la variable, puis vous pourrez définir la couleur personnalisée Cette option apparaît lorsque vous cliquez dessus, non à partir de cette icône en forme de crayon. D'ailleurs, de nombreux noms de couleurs courants fonctionnent dans ce remplissage, vous pouvez donc simplement les taper, comme le blanc ou le noir, le rose, etc. Une autre chose que j'aimerais changer est la marge supérieure. Il existe une marge supérieure par défaut de 20 pixels sur les balises H one. Cela va ajouter de l'espace supplémentaire à notre espacement entre les sections Alors débarrassons-nous de ça. Si jamais nous en avons besoin, nous pouvons toujours l'ajouter au titre en question En ce qui concerne le paragraphe, nous n'allons pas styliser le tag. Nous allons plutôt styliser la classe car le paragraphe de la section héros est différent de celui du paragraphe ou du reste de la page. Enfin, positionnons correctement le contenu du héros au milieu C'est aussi simple que d' ajouter une marge sur le dessus, mais nous ne voulons pas ajouter de marge sur le conteneur. Nous allons réutiliser cette classe de conteneur sur notre page, et nous l'avons déjà dans la barre de navigation L'ajout d'une marge sur le dessus modifiera donc toutes les instances de ce conteneur. Nous pouvons procéder de deux manières. Nous pourrions ajouter une classe combinée au conteneur , puis à la marge. De cette façon, notre contenant de base sera intact, mais une meilleure option consiste à ajouter une boîte supplémentaire et à y mettre le contenu. Ensuite, nous pouvons personnaliser cette boîte comme nous le souhaitons. Je préfère cette option parce qu'elle est un peu propre et qu'elle offre plus de flexibilité en fin de compte. Ajoutez un nouveau bloc D et faites simplement glisser les éléments à l'intérieur. Il vous sera peut-être plus facile de le faire à partir du navigateur. Appelons ce dip-block un peu comme contenu héros » et ajoutons une marge similaire à celle que nous avons dans les designs. Donnons-lui une largeur maximale pour qu'il soit bien intégré à nos designs. voyez, l'utilisation du Dibblock séparé nous a déjà donné plus de flexibilité quant à ce que nous pouvons en faire Excellente. Nous allons vérifier la réactivité. Parfait. Maintenant, tout semble parfait. Il ne nous reste plus qu'un formulaire, que nous allons faire ensuite. 114. Webflow 2 : les formulaires: Et nous sommes de retour dans cette vidéo, nous allons apprendre les bases des formulaires dans le blog Dans le panneau Eléments, il y a une section spéciale dédiée aux formulaires et aux éléments de formulaire. La première étape consiste toujours à ajouter un bloc de formulaire, qui contient déjà certains éléments. Nous pouvons supprimer tout cela comme bon nous semble, et nous pouvons ajouter d'autres éléments dans le bloc de formulaire. Allons y jeter un œil. De quoi est fait ce bloc de formulaire ? Il y a trois groupes dans le formulaire, qui contiennent tout ce que nous voyons actuellement. Tout comme le champ et le bouton d' envoi , nous avons un message de confirmation qui est d' abord masqué et qui n'apparaît qu' une fois le formulaire soumis avec succès. Et le message d'erreur qui n'apparaît que lorsqu'il y a eu une sorte d'erreur lorsque l'utilisateur essayait de soumettre le formulaire. Si nous voulons ajouter de nouveaux éléments au formulaire, nous pouvons faire glisser des éléments tels que des listes déroulantes et une boîte de discussion à l'intérieur du Chaque champ de formulaire possède ses propres paramètres. Si vous cliquez sur cette icône en forme d'engrenage ou si vous double-cliquez sur le champ du formulaire, le réglage de ce champ de saisie s'affichera. Le premier élément des paramètres est le nom du champ. Ce nom est interne. C'est exactement ce que nous voyons dans la base de données. Les utilisateurs ne verront pas le nom. L'étiquette du champ se trouve à l'extérieur. Ce n'est pas dans les paramètres. Il s'agit simplement d'un bloc de texte normal situé au-dessus du champ lui-même, que situé au-dessus du champ lui-même, nous pouvons modifier et styliser comme nous le ferions avec n'importe quel bloc de texte. Mais si nous voulons un look plus minimaliste où l'étiquette se trouve à l'intérieur du champ et non à l'extérieur de celui-ci, comme c'est le cas dans nos designs, nous pouvons l'ajouter sous un champ réservé Ensuite, nous pourrons nous débarrasser de l'étiquette. Le paramètre suivant est le type de texte. Cela signifie quel type de texte est accepté dans ce champ. heure actuelle, il est configuré sur le courrier électronique, il n'autorisera donc que les e-mails et tout le reste provoquera une erreur. Si vous souhaitez collecter des noms et du texte normal, nous le configurerons sur plane, puis il acceptera toutes sortes d'informations. Vous avez également des options de mot de passe, de téléphone et de numéro. Ci-dessous, nous avons une option pour rendre le champ obligatoire et peut-être la mise au point automatique. mise au point automatique signifie que le champ sera sélectionné dès le chargement de la page. Pour un champ de sélection déroulant, cliquez sur Paramètres pour modifier la liste des choix qui se trouve dans le menu déroulant Vous pouvez modifier les choix, les supprimer, ajouter d'autres, les réorganiser, en gros tout ce que vous attendez Nous n'avons pas besoin d'une liste déroulante pour notre formulaire, nous pouvons donc nous en débarrasser Très bien, personnalisons notre formulaire. Dans nos designs, nous avons fait en sorte que le formulaire soit horizontal, le champ et le bouton côte à côte. Ici, ils sont alignés les uns sur les autres. Alors, comment pouvons-nous les aligner les uns à côté des autres ? Eh bien, le bloc de formulaire n'est pas différent de tous les autres éléments de cette page. Nous pouvons lui donner des classes et leur donner un style à partir du panneau Styles. La flexbox est un choix évident lorsqu'il s'agit d'alignement horizontal Assurez-vous de sélectionner l'élément de formulaire au lieu d' un élément de bloc de formulaire, car nous essayons d'aligner le champ et le bouton. Le bloc de formulaire contient les messages de formulaire, de réussite et d'erreur. Il va donc aligner ces trois éléments. C'est ce qui va se passer. Donc, une fois de plus, sélectionnez l'élément nommé form, puis donnez-lui un flex d'affichage. Nous pouvons maintenant personnaliser le champ et le bouton indépendamment. Notre champ mesure 56 pixels de hauteur, possède des coins arrondis et contient un texte de 16 pixels de couleur grise. Et maintenant, pour que le texte de l'espace réservé à l'intérieur du champ soit d'une couleur différente, vous verrez que le fait de changer de couleur n'y fait rien C'est parce que cette couleur de texte change la couleur du texte que l'utilisateur saisit réellement à l'intérieur. Vous pouvez le vérifier dans le mode de prévisualisation. Mais ce n'est pas ce que nous voulons changer. C'était bien comme ça. Pour définir le style du champ de l'espace réservé, accédez aux états du champ et sélectionnez l'espace réservé Nous pouvons maintenant changer la couleur du texte de l'espace réservé. Excellente. Passons maintenant au bouton. Donnons-lui un bouton de nom de classe. Le texte contenu dans le bouton de formulaire peut être modifié à partir des paramètres, comme les autres éléments du formulaire. C'est un peu différent des autres boutons sur lesquels nous pouvons modifier le texte directement en cliquant dessus. R Je veux que tu fasses attention à quelque chose ici. Vous voyez que le bouton est un peu plus haut qu'un champ. Mais le bouton n'a en fait pas de hauteur et son rembourrage n' est que de neuf pixels Alors pourquoi est-il si grand ? Cela est dû aux paramètres donnés à la boîte flexible parent. Vous voyez ici qu'il est écrit « Stretch ». Cela signifie que les enfants flexibles sentiront la hauteur de la boîte flexible jusqu'à indication contraire. Si vous modifiez cela, la hauteur changera en même temps. Mais vous vous demandez peut-être pourquoi le champ a une hauteur différente. Cela a à voir avec une marge par défaut appliquée au champ. Cette marge supplémentaire de dix pixels étire la boîte flexible. Le bouton a donc maintenant plus d'espace à remplir. Si nous supprimons cette marge du champ, le bouton se rétrécira et correspondra à la taille du champ. Mais gardons cette marge pour le moment. Parfois, lorsque nous avons plusieurs champs, nous avons besoin de cette marge. Nous pouvons résoudre ce problème en donnant simplement au bouton une hauteur fixe. Je veux que vous examiniez ce comportement de plus près , car vous rencontrerez souvent telles irrégularités dans Webflow ou général lorsque vous concevez et développez un site Web, car tous les éléments et tous les paramètres interagissent uns avec les autres et modifient la structure du site Web Une marge ici peut donc modifier autre comportement sur un élément très différent, n'est-ce pas, comme dans cet exemple. Chaque fois que quelque chose comme ça m'arrivait au début, je me disais toujours : « Oh, est-ce un bug ? Pourquoi ne fonctionne-t-il pas comme ça ? J'ai toujours pensé que c'était quelque chose avec Weblo. Ensuite, je parcourais le forum à la recherche ce bogue avec un bouton ou un formulaire ou quelque chose comme ça. Et puis, à un moment donné, j'arrive à la réponse, et la réponse serait alors assez simple. C'est pourquoi je veux que vous appreniez à chercher les indices lorsque vous êtes coincé dans quelque chose et à le considérer comme un casse-tête. Vous pensez toujours qu' il existe une solution. La réponse se trouve quelque part. Ce n'est pas que l'outil soit cassé, qu'il s'agisse d'un bogue ou que quelque chose ne fonctionne pas correctement, mais il y a une sorte de casse-tête à résoudre. je me souviens bien, et c'est Si je me souviens bien, et c'est souvent le cas, il est frustrant d'avoir affaire un outil, d' essayer de créer quelque chose ne pas suivre votre voie et de ne pas fonctionner. Vous pouvez ressentir de la frustration, vous pouvez vous décourager et vous pourriez ne plus aimer le processus. Je veux donc que vous respiriez un peu et que vous regardiez les choses de manière ce que ce soit un casse-tête et qu'il y ait un indice, et que vous ayez juste besoin de trouver la réponse. Vérifiez donc chaque élément et voyez quel style peut interagir avec autre chose. Et tu trouveras la réponse, et tu t'en sentiras très bien. Très bien, examinons le formulaire en mode aperçu. Tout semble bon, mais le bouton peut utiliser un effet de survol. Je ne sais pas pourquoi ce texte est si léger ici. est peut-être parce que nous avons joué avec le texte de l'espace réservé et avons allégé l'opacité. Quoi qu'il en soit, réappliquez simplement cette couleur grise ici et je résoudrai le problème Un simple état de sa peau fera un petit changement de couleur. Et c'est tout. Une autre chose que nous pouvons changer concerne les messages de réussite et d'erreur. Pour ce faire, nous devons d'abord afficher les états, ce que nous pouvons faire à partir des paramètres du formulaire. Sélectionnez le bloc de formulaire et accédez au panneau des paramètres. Ici, nous pouvons basculer entre les états de réussite et d'erreur normaux. Une fois que l'état de réussite est activé, vous pouvez interagir avec celui-ci et les modifier à votre guise. Nous pouvons même faire glisser d'autres éléments à l'intérieur ou modifier l'arrière-plan, le style du texte, etc. Au lieu de ce message de réussite, nous pouvons également rediriger les utilisateurs vers une autre page de remerciement, ce que nous pouvons faire en ajoutant une URL de redirection dans ce champ. Mais dans notre cas, nous allons conserver le message de réussite. Idem pour le message d'erreur, modifiez l'état pour l'afficher puis mettez-le en forme comme vous le souhaitez. Je suis plutôt d'accord avec ce message d'erreur par défaut et son style, alors gardons-le tel quel. Et c'est tout pour le formulaire pour le moment. Une fois notre site publié, nous testerons le formulaire sur le site Web en ligne et verrons comment nous pouvons gérer les soumissions de formulaires. 115. Webflow 2 : Maquette Section 1: Et nous sommes de retour dans cette vidéo, nous allons aborder une petite partie de la section suivante, uniquement le contenu. Rappelez-vous ce que nous avons fait sur le site Web précédent, nous avons créé un bloc de section générique. Nous lui avons donné des paramètres de remplissage par défaut, et c'est tout. Tout comme nous l'avons fait avec l'élément conteneur, d'avoir une telle section générique nous permet de bien contrôler la mise en page du site Web. Supprimons donc une nouvelle section, donnons-lui une classe. Donnez-lui un peu de rembourrage à la fois verticalement et horizontalement. Nous avons besoin de 60 pixels sur les côtés de la barre Maintenant, alors répétons-le. Pour le rembourrage vertical, utilisons 80, car dans nos designs, nous utilisons souvent un espacement de 160 pixels entre les sections, et 80 pixels haut et en bas font un total de Je n'ai pas de règle stricte sur le type de rembourrage à utiliser Selon le site Web, cela peut changer, et la plupart du temps, je ne fais que regarder les choses Et maintenant, déposons un autre conteneur à l'intérieur et appliquons le conteneur de classe existant. Dans les dessins, nous avons une couleur de fond blanc cassé, un peu bleue et grisâtre sur la page Nous l'avons fait pour avoir un meilleur contraste sur les cartes blanches que nous mettons sur la page. Appliquons ce contexte à la section générique. Le titre est déjà dans le bon style car nous avons stylisé le tag H one Nous ne l'avons pas fait pour le paragraphe, alors faisons de même, c' est-à-dire définissons le style d'une balise de paragraphe. Ainsi, tous nos textes de paragraphes génériques sont stylisés sans y ajouter de classes. Pour ce faire, sélectionnez d'abord le paragraphe, puis allez dans le champ de sélection et sélectionnez tous les paragraphes Très bien, maintenant, réglons les choses comme d'habitude, 18 pixels en taille, 26 pixels en hauteur de ligne, et récupérons le code couleur à partir de là. Excellente. Maintenant, pour ce qui est du lien En savoir plus, il y a deux éléments : texte et l'icône en forme de flèche. Il existe un moyen d' insérer une flèche sous forme de texte, comme un symbole, mais je prévois d'animer cette flèche à l'avenir, et dans ce cas, nous aurons besoin d'une flèche pour être un objet distinct Nous avons donc un élément de texte et un élément d'image. Passons à un lien texte. Tout comme pour le titre et le paragraphe, nous sommes également en mesure de styliser la balise Links. Donc, au lieu de ce bleu générique, nous allons le remplacer par notre propre bleu. Et tous les liens auront désormais cette couleur particulière. Maintenant, si nous établissons un lien hypertexte vers un autre endroit, il héritera de la couleur de cette balise de lien Mais nous ne pouvons pas trop modifier la balise Links, comme la taille du texte, par exemple, car les liens se trouvent à d'autres endroits, tels que les paragraphes , les boutons, etc. Donc, si nous lui donnons un style et si nous lui donnons à tous les liens une taille de 16 pixels, puis si nous lions quelque chose à l'intérieur du titre , d'une légende ou d'un autre type de texte, ils passeront tous à 16, par exemple comme celui-ci Donc, pour tout ce dont nous avons besoin pour le styliser avec un lien, définissons le style de la classe et non de la balise. Pour supprimer le soulignement du lien, il suffit d'accéder au texte de la déclaration et d'appuyer sur aucun. D'accord, nous avons maintenant besoin d'une flèche, qui n'est qu'un élément d'image. Exportons l'image de la flèche depuis Figma et insérons-la ici Exporter au format SVG, c'est mieux pour de telles images. Parfois, les exportations depuis Figma se retrouvent dans un dossier compressé au format zip Vous allez d'abord devoir l'extraire. Sur mon Mac, je vais juste double-cliquer pour l'extraire. Je pense que sous Windows, il suffit de cliquer avec le bouton droit de la souris puis d'extraire ici. Il y a un espace de quatre pixels avant la flèche. Cela ne correspond pas exactement à la taxe, alors ajoutons une marge négative en plus. Moins de deux pixels semble suffisant. OK, tout va bien, mais il y a un problème. Si vous consultez l'aperçu, vous verrez que le texte est un lien. Vous pouvez voir ce curseur passer d'une flèche pointeur à une main, mais l'icône en forme de flèche ne fait pas partie de ce lien. C'est un objet distinct. Ce n'est pas le meilleur arrangement. Idéalement, nous voulons que la flèche soit cliquable et fasse partie du lien deux Il existe une solution très simple pour cela. Il suffit de placer ces deux éléments dans un bloc de liens. Pour vous rafraîchir la mémoire, nous avons deux éléments de liaison à l'intérieur du panneau. L'un est un lien texte normal et l'autre est un bloc de liens. Un bloc de liens est comme un bloc div, mais c'est un lien. Donc, tout ce que nous y mettrons fera partie de ce lien. Nous ajoutons donc le bloc de liens, puis glisser ces éléments à l'intérieur de ce bloc. Mais nous pouvons en fait faire glisser l'élément de lien à l'intérieur, car cela n'est pas autorisé. Nous devons plutôt ajouter un bloc de texte normal. Comme vous pouvez le constater, dès que nous mettons du texte dans le bloc de liens, il devient bleu. C'est parce que ce bloc de liens fait partie de cette ancienne balise de liens que nous venons de personnaliser. Ajoutons cette classe à ce texte. Le soulignement est censé disparaître, mais ce n'est pas le cas. Nous devons supprimer le soulignement du bloc de liens lui-même. J'ai emprunté un itinéraire très étrange pour démontrer cette implémentation du lien. Mais si j'ai fait cela, c'est parce que cela aurait été une façon naturelle pour vous de penser, et ce sera une façon naturelle pour vous suivre ce processus car lorsque vous voudrez ajouter un nouveau lien, vous allez vous dire : OK, laissez-moi ajouter un lien texte, n'est-ce pas ? Ensuite, vous devrez peut-être ajouter une icône au bouton ou quoi que ce soit d'autre, et vous allez vous demander : A, comment puis-je faire cela ? Maintenant, cette icône n'est pas cliquable. Et vous pourriez être bloqué parce que vous savez que vous devez le découvrir. C'est pourquoi j'ai voulu emprunter ce genre de voie erronée afin que de voie erronée nous puissions comprendre exactement comment revenir et tout refaire de la manière que nous voulons réellement, car vous serez confronté à ce genre de scénarios lorsque vous voudrez construire quelque chose, vous optez pour la méthode naturelle selon laquelle vous supposez que cela fonctionnera, puis ce n'est pas le cas et vous vous êtes bloqué, et vous revenez en quelque sorte en arrière , puis vous réduisez un peu certaines choses. Ce genre d'essais et d'erreurs et le fait de suivre les chemins cahoteux de l'apprentissage seront la meilleure façon pour vous de comprendre ce concept Chaque fois que vous le faites vous-même et que vous créez vous-même un site Web, il y a un endroit où vous pouvez toujours vous rendre et trouver des réponses, et c'est WeBlofum dans leur communauté C'est une excellente communauté, les gens y répondent. Même Weblo a des gens qui travaillent pour cette communauté et pour le forum, et ils y donnent également des réponses Mais d'autres concepteurs de Webflow , comme moi et tout le monde, contribuent en quelque sorte et répondent aux questions Donc, si vous êtes coincé quelque part, recherchez-le sur Google et consultez les formulaires Webflow, car souvent d' autres personnes et d'autres concepteurs Web se posaient les mêmes questions que vous Vous y trouverez peut-être déjà des réponses Si ce n'est pas le cas, posez-vous la question et vous trouverez certainement quelqu'un qui vous aidera vous guidera et vous donnera des réponses. Et vous trouverez le lien vers le forum Webflow dans la page des ressources Alors allez y jeter un œil. C'est bon. Enfin, nous devons placer ces deux éléments côte à côte. Nous avons deux options. La première consiste à utiliser une zone flexible, mais la deuxième option, plus simple, consiste à modifier la propriété d'affichage du texte Pour le moment, c'est un bloc. Bloquer signifie qu'il s'étirera et occupera toute la ligne du parent. C'est pourquoi ARR est obligé de passer à la deuxième ligne. Mais si nous le changeons en bloc intégré ou en ligne, la flèche reviendra La flèche est un élément d'image, et les éléments d'image sont déjà définis par défaut sur un bloc intégré, c'est pourquoi nous n'avons pas besoin de le modifier Ajoutons l'espace en haut de ce lien En savoir plus. Très bien, si nous cochons le mode privé, la flèche fera partie du lien deux Et c'est exactement ce dont nous avons besoin. Enfin, nous devons donner à ce contenu une largeur maximale afin qu'il ne s'étende pas sur l'ensemble du conteneur. Nous n'allons pas toucher le conteneur, bien sûr, nous allons déposer un autre bloc div et déplacer tout le contenu qu'il contient. Donnons-lui une largeur maximale de 464 pixels , comme dans nos designs Et voilà. C'est bien mieux. C'est tout pour le moment. Nous ajouterons l'image dans la prochaine vidéo. Restez dans les parages. 116. Webflow 2 : maquette Section 2: Et nous sommes de retour. Dans cette vidéo, nous allons ajouter l' image à cette section. Comme d'habitude, nous devons exporter l'image, tout d' abord regrouper le tout et lui donner un nom. Nous ne pouvons pas exporter directement ces essais. Si nous le faisons, Figma exportera l'image recadrée. Vous pouvez le voir dans l'aperçu, mais nous ne voulons pas d'une image déjà recadrée Nous voulons qu'il soit recadré par les limites de la page elle-même, plutôt comme une partie cachée. Faites glisser une copie de l'ensemble de ce groupe ailleurs sur la page. Cela révélera le graphique dans son intégralité. Maintenant, nous pouvons l'exporter. Nous avons besoin de PNG et de deux résolutions X pour tina. Ajoutons un élément d'image dans ce conteneur , puis téléchargeons notre image. A Sélectionnez un DPI élevé puisque nous utilisons deux x. accord. Que devons-nous faire maintenant ? Nous avons déjà fait quelque chose de très similaire sur le site Web précédent, donc beaucoup de choses seront à peu près les mêmes. Nous avons besoin que l'image apparaisse sur la droite. Comme d'habitude, Flexbox est une excellente option pour cela. C'est également ce que nous avons utilisé la dernière fois. Pour créer une Flexbox, nous avons besoin d'un bloc Dao supplémentaire dans lequel nous allons placer le contenu et l'image Créons une nouvelle classe. Et changez l'affichage pour qu'il soit flexible. Réglons l' alignement au centre. Et pendant que nous y sommes, définissons le justifié à l'espace entre les deux. Pourquoi ? Parce que nous voulons que le contenu soit collé sur la gauche et que l'image soit collée sur le bord droit. Cela ne changera rien à ce stade car il n'y a vraiment pas d'espace à l'intérieur de la flexbox. Et la façon dont fonctionne l'espace entre les décors ressemble un peu à un ressort. Il insère un ressort entre les deux qui pousse les éléments sur les côtés. Mais sans espace, il n' y a rien à repousser. Si nous réduisons la taille de l'image, cela fonctionnera. Il va être pressé contre le bord de la boîte flexible. Si vous vous souvenez de la dernière fois, nous avons utilisé une astuce spéciale pour déplacer l'image vers le bord et au-delà, nous avons utilisé une marge négative. Nous allons donc faire la même chose ici. Maintenant, vous verrez qu' au début, la marge négative ne déplace pas l'image, mais qu'à un moment donné, elle commence à bouger. Pour être honnête, je ne suis pas sûre à 100 % de la raison pour laquelle cela se produit. Cela est certainement dû au fait que l'image est si grande et qu'elle dépasse les limites du parent. C'est pourquoi je conseille toujours ne jamais styliser directement les images. Déposez-les dans un blog div et personnalisez-le à la place. Vous allez avoir un comportement plus prévisible et plus approprié parce que Flaxbox fait des choses étranges avec les images, et il vaut mieux les avoir dans leur propre Dvlock dédié, puis il se comportera correctement, vous comprendrez ce qui se passe et vous n'aurez pas à faire face à un comportement étrange lorsque la marge ne bouge pas, puis à un moment donné, elle commence à bouger , et ainsi de suite. Mais cette fois, je n'ai utilisé que l'image pour que nous puissions tirer les leçons de nos erreurs. Une dernière chose que nous devons résoudre ici est ce problème de débordement Pour résoudre ce problème, nous devons indiquer à la section de découper les éléments s'ils débordent au-delà des bordures C'est simple Il suffit de régler le trop-plein sur masqué N'oubliez pas que le paramètre de débordement est défini sur le parent, et non sur l'image elle-même. Créons une classe de combo nommée overflow hidden. Nous ne voulons pas modifier notre section par défaut ensuite appliquer ce paramètre de débordement Excellente. Vérifions l'aperçu et la réactivité. Et nous en avons terminé avec cette section ? 117. Webflow 2 : sections de photos: Dans cette vidéo, nous allons créer cette section. La mise en page est très similaire à la section précédente que nous avons déjà faite, alors pourquoi ne pas simplement la dupliquer et partir de là. Sélectionnez la section entière et faites simplement le copier-coller : Contrôle C, Contrôle V. Je vais les déposer l'un après l'autre. L'ordre du contenu est inversé. Nous pouvons changer cela en faisant glisser l'élément d'image vers le haut, ce qui placera l'image en premier Une marge négative est appliquée à cette image , mais cette fois, nous n'en avons pas besoin. Pour supprimer cela, nous devons supprimer la classe car nous ne pouvons apporter aucune modification à la marge elle-même, cela affectera l'image précédente. Et maintenant, remplaçons-le par notre propre image. Cette fois, nous allons explorer le JPAG car nous n' avons pas d'arrière-plan transparent, et le JPAG est toujours une meilleure option que PNG en termes Mais nous allons tout de même le compresser dans notre compresseur d'image. Remplaçons le contenu. Oh, on y va. Supprimez la classe de combo Overflow de la section. Nous n'en avons plus besoin. OK, nous avons besoin d'un peu d'espacement entre les deux Ajoutons la marge à l'image. OK, alors qu'est-ce qui se passe ici ? Le contenu a été poussé vers la droite et hors de la page. L'image est censée rétrécir, mais ce n'est pas une autre raison pour laquelle il est préférable de déposer des images dans un Dibblog, en particulier lorsqu'il s'agit d'une boîte flexible Je pense que nous avons déjà retenu la leçon, alors intégrons-la à Dibblock Quand je dis envelopper quelque chose dans le DivLog, cela signifie essentiellement le placer dans un Diblog Créez une nouvelle classe et donnez-lui une marge de 60 pixels. Cette fois, l'image se rétrécit correctement. En fait, il ne s'agit pas de l'image, mais l'enveloppe d'image se rétrécit correctement et l'élément d'image obéit aux limites de son La section suivante est très simple. Dupliquez cette nouvelle section, modifiez l'ordre à l'intérieur de la boîte à drapeaux. Bien que, dans ce cas, nous ayons besoin la marge de l'autre côté, créez une classe compa pour l'élément image wrapper. Appliquez zéro sur la droite et 60 sur la gauche, puis remplacez le contenu. Excellente. Ces sections sont superbes. Dans la vidéo suivante, nous allons créer la section des témoignages Ça va être marrant. Restez dans les parages. 118. 2 : Composant de la glissière: Très bien, nous devons maintenant créer la section des témoignages Nous avons décidé d'utiliser ce type de curseur, parfois appelé carrousel, slider ou carrousel slider Pour créer cela dans Webflow, nous devons utiliser un composant très pratique appelé logiquement slider Dans cette vidéo, nous allons découvrir le composant slider, puis nous terminerons la section des témoignages dans une vidéo ultérieure Commençons par la section habituelle, le conteneur, etc. Puis dans un titre. Ajoutons maintenant un curseur, nous pouvons trouver simplement en cherchant dans un Quickfinder Ou dans le panneau des éléments, sous la section Avancé. Il s'agit d'un slider, un composant prédéfini qui offre une grande liberté de personnalisation, mais qui a parfois ses limites Comme presque tout dans Webflow, composants prédéfinis ne sont pas le seul moyen de créer de tels modèles ou composants Nous pourrions créer notre propre slider à partir de zéro, mais cela demande un peu plus de travail, et ce slider préfabriqué fait très bon travail la plupart du temps Le slider occupe toute la largeur de son conteneur parent. Donc, si nous le déplaçons directement sur le corps à l'extérieur de notre contenant et de la section, il s'étirera bord à bord. Voyons de quoi il est fait. Il y a quatre éléments à l'intérieur. Le premier est le masque. C'est là que vont nos diapositives. À l'heure actuelle, il y a deux diapositives par défaut à l'intérieur. Bien entendu, nous ne sommes pas limités à deux. Ensuite, nous avons les flèches gauche et droite, qui sont des blocs de liens avec une icône en forme de flèche à l'intérieur. Et le dernier, nous avons la navigation par slider. Ce sont les points blancs que vous voyez au milieu. Ils sont cliquables et vous redirigeront vers la diapositive correspondante La diapositive elle-même n'est qu'un bon vieux Dvbloc. Ils n'ont rien de spécial. Ils peuvent être stylisés comme n'importe quel autre développement et nous pouvons y déposer n'importe quel autre élément. Nous allons changer l'arrière-plan de chaque diapositive afin de mieux voir ce qui se passe. Vérifions-le en mode aperçu. Deux diapositives, les flèches rouges et bleues et points de navigation permettent de passer d'une diapositive à l'autre. En gros, ce qui se passe, c'est qu'il y a deux blocs DV placés l'un à côté de l'autre, horizontalement et que les commandes se déplacent entre ces blocs de plongée avec une certaine animation C'est tout. Il existe plusieurs manières de passer d'une diapositive à l'autre dans le concepteur à l'aide des commandes. Ou depuis les paramètres du curseur, qui possède ses propres flèches ou depuis cette liste déroulante où nous pouvons sélectionner exactement la diapositive que nous voulons C'est ainsi que nous passons d'une diapositive à l'autre afin de pouvoir les modifier individuellement. Nous avons deux options pour ajouter des diapositives. Tout d'abord, nous pouvons ajouter une nouvelle diapositive depuis le panneau des paramètres en appuyant sur Ed slide. Pour voir les paramètres du curseur, vous devez sélectionner certains éléments du curseur Comme vous pouvez le constater, nous avons maintenant trois diapositives. Cela a également ajouté un nouveau bloc DV de diapositives dans le navigateur. La deuxième option consiste à dupliquer l'élément de diapositive, soit en cliquant avec le bouton droit de la souris et le dupliquant, soit en utilisant le contrôle C Control V. La suppression des diapositives s'effectue de la même manière. Sélectionnez une diapositive sur le canevas ou dans le navigateur et appuyez sur la touche Supprimer Comme la diapositive n'est qu'un DVlock ordinaire, nous pouvons y ajouter d'autres éléments tels que du texte, des images, des boutons, etc. Nous venons de l'ajouter à la première diapositive. La deuxième diapositive bleue sera vide. Nous pouvons également ajouter du contenu similaire ou différent dans la diapositive bleue. Voilà donc le slider. Dans la vidéo suivante, nous allons transformer ce vilain slider en joli carusel fait de cartes de témoignage 119. Webflow 2 : curseur de témoignages: C'est donc le composant du curseur, mais ce curseur de flux a une apparence très différente de celle de nos modèles Les flèches sont différentes, leur placement est différent. n'y a pas de points de navigation et nous voyons plusieurs cartes à la fois. W sur cet élément de curseur, nous ne voyons qu'une seule diapositive à la fois. Mais ne vous inquiétez pas, nous pouvons réellement styliser le slider de manière à qu'il ressemble exactement à nos designs Ajoutons d'abord un espace entre le slider et le titre Comme pour toute autre chose, nous pouvons styliser l'ensemble de l'élément slider, qui est encore une fois un bon vieux bloc dV avec un tas d'autres éléments Sélectionnez l'élément curseur, attribuez-lui une classe et une marge supérieure de 120 pixels Débarrassons-nous de ce fond gris. Cela fait également partie de l'élément slider. Accédez aux paramètres d'arrière-plan et changez-le en transparent. Et changeons la couleur de la flèche pour qu'on puisse les voir. Les icônes ici sont une base de texte. Donc, si nous changeons la couleur du texte, la couleur des icônes sera mise à jour. Nous n'avons pas besoin de ces points de navigation, alors éliminons-les. Mais la suppression ne fonctionne pas. Weblo pense que nous n'avons pas besoin du slider et supprime le tout Il existe donc un autre moyen de supprimer quelque chose. sélectionnez aucun affichage, cela disparaîtra du continuum espace-temps Flottant quelque part dans une autre dimension. Ensuite, nous devons créer une carte de témoignage. Cela devrait être assez simple. Nous allons déposer un nouveau bloc DV dans l' une des diapositives et construire toutes les pièces nécessaires Donnez-lui une sorte de carte de témoignage, un fond blanc et les mêmes dimensions que dans nos designs Et au coin de la rue. Nous allons maintenant ajouter une ombre, comme dans Figma. Pour voir les paramètres de l'ombre, assurez-vous de sélectionner le bon objet auquel une ombre est appliquée. Si vous utilisez un style d'ombre comme je le fais ici, vous pouvez le dissocier du style afin de voir exactement ce qui se passe à l'intérieur Ce sont toutes les valeurs. Nous devons recréer l'ombre dans Webflow Il y a une valeur supplémentaire dans weblo the size, mais vous pouvez l'ignorer Comme vous pouvez le constater, la carte n'est pas entièrement visible, c'est le curseur qui la coupe. C'est parce que le curseur a une hauteur par défaut. Oui, il indique la hauteur automatique, ce qui signifie qu'il doit s'étendre en fonction de son contenu, mais ce n'est pas un autre cas où les valeurs par défaut ne sont pas vraies Tapez à la main automatiquement une fois de plus et appuyez sur Entrée. C'est bon, maintenant pour le contenu de la carte, nous avons les étoiles et le paragraphe. Nous devrons exporter les icônes en forme d' étoile depuis Figma, exporter les cinq étoiles en une seule, les regrouper s'il ne s'agit pas d'un seul groupe pour vous et les exporter au format SVG Nous devons appliquer un rembourrage sur la carte. Nous avons 40 pixels de tous les côtés, sauf le haut, qui en a 60. Nous avons besoin d'une distance par rapport aux étoiles, qui est de 30 pixels. Une petite marge négative pour mieux aligner les étoiles. Et nous avons besoin du bloc auteur. Exportez ces avatars sous forme de deux X P et G. Ajoutons un nouveau bloc Dive et organisons les détails de l'auteur à l'intérieur D'abord l'image, puis les deux blocs de texte. Donnez un peu de classe et de style au bloc de texte, de la même manière que Figma Nous devons maintenant déplacer le texte sur le côté de l'avatar. Comment pouvons-nous le faire ? Bien entendu, nous pourrions suivre le chemin habituel utiliser une boîte flexible, mais nous aurions besoin d'une boîte supplémentaire pour cela, et cela prend plus de clics Une option plus simple consiste à utiliser float. En position, nous avons un menu déroulant pour flotter et effacer. Ouvre ça. Il existe trois options : aucune, flotteur gauche et flotteur droit. Les icônes montrent en quelque sorte ce qu'il fait. Sélectionnez le flotteur gauche. Cela positionnera l'image à gauche du texte. Et c'est tout. Nous devons maintenant ajuster l' espacement à côté de l'image Ensuite, entre l'image et le paragraphe, qui fait 70 pixels. Enfin, nous devons ajouter une petite marge au-dessus du nom de l'auteur afin centrer le texte avec l'avatar. Maintenant, dupliquons cette première diapositive et voyons où nous en sommes. Comme vous pouvez le constater, nous ne voyons qu' une diapositive à la fois, mais nous voulons qu'elles s'affichent toutes côte à côte lorsqu'elles s'emboîtent et glissent entre les parties visibles et invisibles. Comme vous pouvez le constater, nous ne voyons qu' une diapositive à la fois, mais nous voulons qu'elles s'affichent toutes côte à côte lorsqu'elles s'emboîtent et glissent entre les parties visibles et invisibles. La raison pour laquelle nous ne voyons qu'une diapositive à la fois est liée aux paramètres de largeur de l'élément de diapositive. Il est réglé sur automatique, ce qui signifie qu'il va étirer 100 % de son conteneur parent. Si nous lui donnons une largeur fixe, il diminuera en conséquence. Donnons-lui donc la même largeur que notre carte de témoignage. Si vous remarquez que la boîte à diapositives a maintenant rétréci, elle est aussi large que la carte. Et maintenant, dupliquons-le. Supprimez les autres et dupliquez celui avec une largeur correcte. Et voilà. Maintenant, ils s'alignent exactement comme nous le souhaitons Ajoutons une marge sur la droite pour créer la séparation. OK, examinons le mode de prévisualisation pour voir où nous en sommes. Il y a quatre diapositives et elles glissent exactement comme nous le voulons, à une exception près. Dans notre design, la page affiche autant de cartes que possible et le reste disparaît de la page. Mais ici, ce n'est pas le cas. Ils apparaissent uniquement à l'intérieur du composant du curseur Alors, comment pouvons-nous changer cela ? Si vous sélectionnez un élément de masque, autre bloc D dans lequel toutes les diapositives sont imbriquées, vous remarquerez que dans les paramètres de débordement, il est défini sur Cela signifie que toutes les diapositives qui sortent des limites du masque sont découpées En fait, tout ce qui va au-delà est détruit. Même les ombres sur les cartes, si on y regarde de plus près. Pour les montrer, il suffit de changer cela en visible, et c'est parti. Toutes les cartes sont désormais visibles. Mais il y a un problème. Ils ne se découpent pas à la fin de la page, ils élargissent les limites de la page. Mais nous savons déjà comment résoudre ce problème, n'est-ce pas ? Il suffit d'appliquer le même style de overflow masqué à la section, comme nous l'avons fait avec l' image du tableau de bord Nous avons même un cours pour cela. Nous n'avons rien à changer, appliquez la même classe que celle que nous avons déjà appliquée dans l'une des sections. Excellente. Remplissons les cartes avec notre contenu, puis nous n'aurons plus qu'à occuper des flèches, et c'est R Il y a juste une chose que nous devons corriger avec les cartes. À l'heure actuelle, nous avons du contenu dont la hauteur est égale. Mais que se passerait-il si nous avions des témoignages de longueurs différentes ? La carte ne s'étend pas car sa hauteur est fixe. Remettons donc la hauteur en mode automatique. Il s'étend donc en fonction du contenu. Dans un vrai projet, vous devriez essayer de contrôler la longueur des témoignages Celui-ci est bon, mais quand la différence entre coupe longue et coupe courte est vraiment grande, alors il n'est pas très beau. Les témoignages peuvent être tronqués, ce qui signifie que vous pouvez les écourter. Mais si votre client ne veut pas qu'ils soient coupés, une mise en page différente est peut-être nécessaire. Quelque chose qui s' empile verticalement. Une telle option pourrait être une grille de maçonnerie. Une chose que je n' aime pas, c'est la façon dont les diapositives se déplacent. Plusieurs d'entre elles glissent à chaque clic, mais je préfère de loin que le glissement déplace une diapositive à la fois. C'est simple à corriger. La quantité de glissement est contrôlée par la largeur de l'élément de masque. Si nous changeons la largeur du masque pour qu'elle corresponde à la largeur de chaque diapositive, nous obtiendrons un mouvement correspondant à une diapositive à la fois. OK, ça a toujours l'air bien. La dernière chose dont nous devons nous occuper, ce sont les flèches. Pour cela, nous devons apprendre un nouveau concept, ce que nous allons faire dans la prochaine vidéo. Restez dans les parages. 120. Webflow 2 : Positionnement: Bon retour. Dans cette vidéo, nous allons nous occuper des flèches de notre curseur Pour les placer dans le coin inférieur droit de notre curseur, comme nous l'avons fait dans les dessins, nous devons apprendre un nouveau concept Ce concept s'appelle position. Position est un style CSS qui nous donne un énorme contrôle sur nos objets. Ce style peut être modifié à partir d'ici. Nous avons cinq valeurs de position différentes : statique, relative, absolue, fixe et fixe. Passons en revue chacune d'elles. J'ai organisé cinq cartes ici, et une par une, nous leur appliquerons différents réglages de position pour voir ce qui leur arrive. statique ou également appelée automatique est position par défaut de presque tous les objets. Les éléments statiques se comportent comme nous les connaissons déjà, comme un document Word qui s'écoule les uns après les autres. Les choses deviennent un peu plus intéressantes quand on est relatif. L'objet relatif est la position par rapport à lui-même. Je sais que cela ne te dit rien. Laisse-moi te le démontrer. Je vais faire une demande par rapport à cette case, et rien ne se passe. Très calme. Mais une chose s'est produite, les réglages de position disposent désormais de quelques commandes supplémentaires. Nous obtenons ces contrôles similaires à ceux que nous avons avec l'espacement. Nous pouvons ajuster ces valeurs et la boîte va se déplacer. Nous donnons essentiellement une marge supérieure de 100 pixels à la boîte. Cela fonctionne de manière assez similaire à une exception près, et vous verrez cette exception lorsque je vous montrerai ce qui se passe lorsque vous modifiez la marge au lieu de ce positionnement relatif. Vous voyez que la marge a modifié le flux de la page. La hauteur du conteneur parent a été augmentée car cette marge doit s'adapter à cet espace. Mais lorsque vous utilisez le positionnement relatif, le flux du document n' est pas du tout modifié. Vous pouvez déplacer l'objet où vous le souhaitez, mais dans le flux du document, il occupera uniquement son emplacement d'origine. Il s'agit d'un pouvoir de position relative. Nous l'avons complètement déplacée , mais les cartes imbriquées dans une boîte flexible n'ont pas du tout bougé Ils font comme si la carte était toujours là. Maintenant, en ce qui concerne la position absolue, l'objet Absolutely position est retiré du flux du document et il se trouve sur un nouveau calque, peu comme les objets de Figma Dans Figma, tous les éléments sont en quelque sorte parfaitement positionnés. Ils existent tous sur leur propre couche. Le positionnement absolu est souvent ce que nous utilisons lorsque nous devons superposer des éléments ou les superposer. Maintenant, un message important pour le positionnement absolu est ici Cela nous indique par rapport à quoi cet objet est positionné . Nous avons le même champ pour l'élément relatif, mais cela se dit toujours tout seul , car c'est ce que fait le relatif. C'est toujours une position par rapport à elle-même qui peut être modifiée. Mais l'élément absolu, il peut être relatif à n'importe lequel de ses éléments parents. Au début, vous verrez que c'est généralement relatif à l'élément du corps, c' est-à-dire par rapport à la page entière. Par exemple, si nous définissons la valeur de la position gauche sur zéro, elle sera située à zéro pixel du bord gauche du corps. heure actuelle, il n'est pas exactement sur le bord car il y a une marge sur les côtés. Si nous lui donnons une position de 100 pixels vers la gauche, il se déplacera de 100 pixels par rapport au bord. Et si nous lui donnons une marge supérieure de zéro pixel, il se déplacera jusqu'en haut de la page. Et ce contenant rose va donner l' impression que la boîte n'est pas vraiment là. Mais si nous consultons le navigateur, nous verrons que la boîte absolue fait toujours partie du conteneur Comme je l'ai dit, l' élément de survente peut être relatif à n'importe lequel de ses parents si nous choisissons de le faire Maintenant, pour choisir le parent, il y a une petite astuce à faire. Nous devons changer la position de ce parent pour qu'elle ne soit pas statique. Par exemple, si nous voulons que le R soit positionné par rapport au contenant rose, nous devons changer la position du conteneur pour qu' il soit autre que statique. Habituellement, nous le changeons en relatif, car c'est le moyen le plus simple de ne pas modifier le flux du document. Dès que vous modifiez la position des éléments parents, la case de position obsolète revient au conteneur rose et se positionne autour de ce conteneur se positionne autour de ce Si vous vérifiez les paramètres maintenant, vous verrez qu'il est indiqué par rapport au conteneur parent. Comme nous n'avons aucun pixel à partir du haut, il est positionné dans le coin supérieur gauche. Et lorsque nous modifierons cette valeur, elle se déplacera par rapport au conteneur parent. Maintenant, si nous voulons plutôt qu'il soit positionné par rapport à autre conteneur parent, par exemple le conteneur grand-parent, nous devrons changer la position de statique à autre position sur ce conteneur grand-parent Mais il y a une règle importante. Il va se positionner par rapport au tout premier élément parent qui n' a pas de position statique. Donc, pour le moment, rien ne s'est passé lorsque nous changeons la position du conteneur grand-parent car le conteneur parent rose a toujours une position non statique, donc la boîte continuera d'être relative à celle dans laquelle il Et si nous changeons la position des conteneurs parents en statique, cela se produira. Comme indiqué ici, cela est relatif au conteneur pour grands-parents Webflow propose ici quelques préréglages de position utiles pour un élément absolu C'est un moyen rapide et très pratique de changer de position. Coin supérieur gauche, coin supérieur droit, quatre en haut, quatre en bas, etc. Vous pouvez constater que lorsque vous modifiez les valeurs ci-dessous, il est plus facile d'aligner les éléments visuellement de cette façon au lieu de devoir calculer le nombre de pixels que façon au lieu de devoir calculer le nombre de pixels vous devez placer sur les quatre côtés. Ensuite, c'est la position fixe. Les éléments fixes sont positionnés par rapport à la fenêtre d'affichage, c'est-à-dire par rapport à la partie visible de la page à un moment donné Si nous choisissons l'un des préréglages, il sera corrigé en conséquence Comme vous pouvez le constater, l' élément fixe est exactement cela, fixe. C'est un peu comme un objet absolu retiré du flux de documents, n'affectant aucun autre élément, n'affectant aucun autre élément, posé sur un tout nouveau calque, et contrairement à un objet absolu, il est fixe par rapport à l'écran visible Peu importe où vous le faites défiler, il restera fixe. Cette position est souvent utilisée pour les barres de navigation. Vous savez combien de sites Web ont une barre de navigation qui est toujours fixée en haut de la page lorsque vous faites défiler Cela utilise une position fixe. Enfin, nous avons une position collante, ce qui est un peu délicat. Ce que fait Sticky, c'est qu'il agit en quelque sorte comme un élément fixe, mais uniquement dans son conteneur parent, plus facile à montrer qu'à expliquer. Donc pour le moment, rien ne se passe. Il agit simplement comme un élément statique normal car deux conditions doivent être remplies pour qu'il fonctionne. Tout d'abord, le parent doit être suffisamment grand pour qu'il y ait de la place pour qu'il puisse défiler à l'intérieur. Dans le cas contraire, cela ne sert à rien. Rendons donc le contenant un peu plus haut. Deuxième condition, nous devons mettre une valeur personnalisée généralement en première position. Par exemple, on peut mettre zéro. Et maintenant, vous allez voir que cela fonctionne. Ce qui se passe, c'est que cela est corrigé à l'écran pendant que nous faisons défiler le conteneur parent Une fois que l'élément collant atteint le bas du conteneur parent, il ne le dépasse pas. Ce que fait la valeur maximale, c'est qu' elle indique à partir de quel point il faut s'en tenir. Dans ce cas, il reste collé dès que l' élément collant se trouve à zéro pixel de la fenêtre d'affichage Si nous mettons quelque chose comme 30 pixels, cela collera dès qu'il sera à 30 pixels du bord supérieur de l'écran. Pour les objets qui poussent horizontalement et doivent rester horizontalement, au lieu de la position supérieure, nous utiliserions la valeur de position gauche ou droite. Je ne vais pas faire la démonstration de celui-ci car nous aurions très, très rarement besoin. Ce sont toutes les positions, statiques, qui sont la position par défaut pour presque tous les éléments, et elles s'enchaînent naturellement avec un document, relatives, qui est un peu statique, mais elle peut être déplacée de sa place sans modifier le flux du document et déplacer éléments voisins, absolue, qui est le positionnement sauvage du groupe, elle est retirée du flux de documents et est positionné par rapport au premier parent qui n' a pas de position statique. Corrigé, c'est comme l'absolu, mais c'est relatif à la fenêtre d'affichage, à l'écran visible, principalement utilisé pour les barres de navigation et le stick, ce qui est un peu fixe, mais en stéréo, il ne se principalement utilisé pour les barres de navigation et le stick, ce qui est un peu fixe, fixe que dans les limites de son conteneur parent D'accord, c'est l' idée générale du positionnement. Dans la vidéo suivante, nous allons utiliser ces connaissances et les appliquer aux flèches de notre curseur de témoignage. Restez dans les parages. 121. 2 : flèches de la glissière: C'est bon. Bon retour. Dans cette vidéo, nous allons enfin nous occuper de ces flèches sur le curseur Dans la vidéo précédente, nous avons appris une technique importante qui sera utile pour bien positionner ces flèches. Pour commencer, nous allons remplacer les icônes en forme de flèche par nos propres icônes Nous pouvons le faire simplement en supprimant les icônes existantes et en insérant un élément d'image à leur place Il suffit de faire glisser un élément d'image dans le bloc de flèches et insérer l'image de flèche que nous allons exporter depuis Pigma Il en va de même pour la flèche droite. R Maintenant, nous allons avoir besoin d'une fonction de position pour placer ces flèches en bas. Si vous regardez les paramètres de position, déjà définis comme obsolètes par défaut, contrairement à la position statique habituelle, ce qui explique pourquoi les flèches se trouvent au-dessus du curseur C'est ce que fait un positionnement obsolète. Cela retire l'élément du flux de page. Ils vivent dans une autre dimension, comme les couches et le figma. C'est exactement ce dont nous avons besoin Position obsolète avec un placement en bas à droite Une fois que vous avez appuyé sur la position inférieure droite, la flèche sera placée dans le coin inférieur droit de l'élément curseur Maintenant, pourquoi l'élément curseur ? Parce que c'est le premier parent qui n' a pas de position statique. N'oubliez pas que l'élément absolu de l'astuce est relatif au premier parent non statique. S'il n'y a pas un tel parent, ce sera relatif au corps. Dans ce cas, il sauterait au bas de la page. Donc, si vous constatez que cela ne fonctionne pas comme prévu, vérifiez le parent et assurez-vous qu'il est réglé sur relatif. Nous allons vérifier le design pour voir les distances. Les flèches sont situées à 60 pixels sous le curseur. Maintenant, voici une partie intéressante. Nous devons ajouter 60 pixels à l'une de ces valeurs de position, mais laquelle ? Essayons-les tous et voyons ce qui se passe. Aucun d'entre eux ne fonctionne réellement. Pourquoi ? La flèche est positionnée ainsi en bas à droite. Cela signifie zéro pixel à partir de la droite et zéro pixel à partir du bas. Les valeurs de position nous indiquent exactement cela. Si nous ajoutons 60 pixels en bas, cela se déplacera de 60 pixels vers le haut à partir du bord inférieur. Pour qu'il sorte du curseur, il faut passer à des valeurs négatives En fait, cela fonctionne plutôt comme ça. Il calcule la distance entre bas du curseur et le bas du bloc de flèches Nous devons souvent compenser la hauteur de l'élément. Au fait, assurez-vous de taper PX à côté de 60. Par défaut, comme vous pouvez le voir, il est indiqué en pourcentage. Le champ est donc défini sur une valeur en pourcentage. Et si vous tapez simplement 60, il pensera que vous voulez dire 60 %. Appliquons maintenant la même classe à la deuxième flèche, afin de ne pas avoir à refaire toutes ces modifications. Déplaçons la flèche gauche vers la gauche. Nous pouvons le faire en mettant de la valeur au bon endroit. Mais avant cela, attribuons à la flèche gauche une classe de combinaison. Dans le cas contraire, les modifications seront appliquées aux deux. Encore une fois, nous accordons de la valeur au bon endroit parce que nous vous éloigner ce montant du bon côté. Excellente. Regardons l' aperçu et voyons comment cela fonctionne. Il n'y a qu'un seul problème. Si vous regardez de plus près les blocs de flèches, vous verrez qu'ils se chevauchent en quelque sorte Les cases sont un peu trop larges, et dans l'aperçu, l' ensemble de la case est cliquable Ainsi, l'utilisateur peut également interagir avec l'espace vide. Un peu d'interaction avec l'espace vide est une bonne chose L'utilisateur n'a donc pas besoin d'être précis lorsqu'il s'agit de viser la flèche, mais trop le rend étrange. De plus, le chevauchement peut entraîner des problèmes car il s'agit de liens Pour résoudre ce problème, nous devons modifier la largeur des blocs de flèches. Donnons-lui de la taille. Je pense que 40 pixels, c'est bien. J'ai stylisé la flèche droite, qui contient la classe de base Ainsi, les deux flèches ont été mises à jour en même temps raison de la classe de base liée. Il y a encore une chose que nous pouvons faire avec les flèches. Nous pouvons les cacher à chaque extrémité. Nous pouvons le faire à partir des paramètres du curseur. Il s'agit en fait d'une meilleure expérience utilisateur. De cette façon, l'utilisateur sait dans quel sens il peut glisser et voir quand les témoignages sont arrivés à la fin Et il ne nous reste qu'une dernière section. Le pied de page. C'est ce que nous ferons ensuite. Restez dans les parages. 122. 2 : Pied de page (Appli Team): Au dos. Dans cette vidéo, nous allons créer la dernière section de la page d'accueil, qui est le pied de page Nous n'allons pas le construire à partir de zéro. Nous allons utiliser l' incroyable fonctionnalité de copier-coller de Weblo. En gros, nous allons copier l'intégralité du pied de page de notre précédent projet d'application de chat et le coller dans le projet en cours Il s'agit d'une fonctionnalité très pratique. Il vous permet de réutiliser des composants dans vos projets et de copier différents éléments ou composants à partir de projets Webflow d'autres personnes Par exemple, Webflow dispose d'une bibliothèque de projets de démonstration où d'autres concepteurs de Weblo peuvent présenter les projets qu'ils ont réalisés Souvent, si l'auteur l'autorise, vous pouvez cloner le projet et copier tous les composants à partir de là. Vous pouvez soit copier la page entière, soit copier des bribes. Vous trouverez ici des personnes qui partagent des éléments tels que des kits d'interface utilisateur ou des kits filaires Vous savez, ce kit filaire que nous avons utilisé dans Figma, oui, des interfaces comme ça se trouvent également ici Vous devrez créer vos propres kits , puis copier-coller les éléments et composants à votre guise. Très bien, voyons donc comment fonctionne ce copier-coller. Une fois que vous avez un projet dans votre compte, ouvrez les deux projets dans le concepteur, sélectionnez l'élément que vous souhaitez copier. Dans notre cas, une section de pied de page contenant tout ce qu'elle contient, appuyez sur Ctrl C ou Commande C, puis accédez au projet en cours et sélectionnez l'endroit où vous souhaitez le coller Dans notre cas, nous devons sélectionner le corps, donc le coller directement là et non dans une autre section. Appuyez ensuite sur Ctrl B, et c'est parti. Maintenant, le pied de page entier a été dupliqué dans notre projet actuel Nous pouvons modifier tout ce qui concerne ce pied de page sans affecter le projet original précédent Les styles ont été conservés et de nouvelles classes ont été créées. Lorsque vous copiez des classes portant le même nom, weblo renomme cette classe en conflit, comme indiqué dans ce Par exemple, la section du nom de classe que nous avons déjà dans notre projet actuel. Webflow a donc donné un nom différent à notre section dupliquée Autre chose, vous remarquerez qu' une fois que vous avez collé le pied de page, il ne ressemble pas l'original car certains styles sont hérités Par exemple, le téléphone texte n'a pas été transporté. Il montre la police de notre site Web pour ce projet, qui est la cabine. Le téléphone n'a pas été transporté car il hérite du corps. En réalité, c'est exactement ce que nous voulons. Nous ne voulons pas voir la couverture de ce projet. Nous voulons que la police soit celle qui figure dans notre projet. Très bien, maintenant personnalisons ce pied de page et faisons en sorte qu'il ressemble à nos designs Commençons par les classes, sections et conteneurs dupliqués , et remplacons-les par nos classes existantes. Tous les cours supplémentaires dont nous n' avons pas besoin peuvent être supprimés et nettoyés sur notre site Web. Nous pouvons le faire d'ici. Cliquez sur Nettoyer et Webflow nous montrera toutes les classes que nous n'utilisons pas actuellement sur notre page et les supprimera toutes. Et si nous n'en consommons pas, cela signifie que nous n'en avons pas besoin. Ensuite, créons une classe combinée pour la section de pied de page et changeons la couleur d'arrière-plan Nous allons également modifier l'espacement dans la section de pied de page, car elle est légèrement différente de la section habituelle I Maintenant, modifions les liens de Potter. La couleur est blanche avec 60 % d'opacité. Et nous devons également changer la couleur de Her en un bleu différent. Et excellent. Maintenant, le logo, qui est assez simple. Titres du pied de page suivant. Celui-ci est un peu plus intéressant. Il n'a pas de classe comme Footer links. C'est parce que dans le projet précédent, nous n'avions pas de classe pour ces titres de bas de page Nous avons plutôt utilisé le tag H Three. Ainsi, lorsque nous avons copié le pied de page, Webflow a simplement appliqué la balise H three du projet en cours Nous allons faire de même avec le style du tag H Three. Nous pouvons, bien sûr, créer une nouvelle classe ou changer tactique pour quelque chose comme h2h4 ou autre, mais le style H three semble le voir, il y a un espace supplémentaire Comme vous pouvez le voir, il y a un espace supplémentaire en haut du titre Débarrassons-nous de cet espace. Très bien, jusqu'ici tout va bien. Nous devons fixer la marge sur la section des témoignages. Vous voyez que la flèche est trop proche du pied de page. C'est parce que la flèche est un élément absolu. Il a ignoré la marge Atypil qui se trouve sur la section et qui se trouve au-dessus de N'oubliez pas de créer une nouvelle classe de combo, sinon vous modifierez également toutes les autres sections. Il possède déjà une classe de combinaison, mais ça va. Nous pouvons avoir plusieurs classes combinées. Compensons ce rembourrage supplémentaire. Enfin, il suffit de mettre à jour le contenu. C'est fait, et il ne nous reste qu'une chose : le formulaire de courriel. C'est ce que nous allons faire dans la prochaine vidéo. 123. Webflow 2 : Formulaire de pied de page: Dans cette vidéo, nous avons une dernière chose à faire pour terminer le pied de page  : le formulaire de courrier électronique Le titre d'un abonné à notre newsletter n'est pas un lien, c'est juste un titre, mais même style que les autres pieds de page ou liens Nous devons le transformer en un texte normal et supprimer cet effet Hor Voici comment nous allons procéder. Ajoutez un bloc de texte normal et attribuez-lui le même pied ou la même classe de lien. Maintenant, ce n'est plus un lien, mais l'effet Hover est toujours présent Pour nous en débarrasser, nous allons dupliquer une classe et lui donner un nom comme un texte d'abonnement. Nous pouvons maintenant passer à l' effet Hover et nous en débarrasser. Excellente. Créons maintenant le formulaire de newsletter. Commençons par copier le formulaire e-mail que nous avons déjà ci-dessus et partons de là. Et naturellement l'espacement va poser problème ici, surtout lorsque nous réduisons Nous allons donc devoir apporter quelques ajustements de mise en page Le contenu ici est une boîte flexible organisée en colonnes. Pour commencer, nous pouvons supprimer la largeur que nous avons appliquée aux colonnes du pied de page Cela les rend de largeur égale, quel que soit le contenu à l'intérieur, ce qui dans ce cas ne fonctionnera pas vraiment. Il existe également une colonne vide supplémentaire qui, auparavant un espace égal entre le logo et les liens. Cette fois, il va falloir le perdre. Et c'est une amélioration supplémentaire. Maintenant, changeons la largeur de la première colonne avec le logo à l'intérieur. Ça s'étire beaucoup trop. Excellente. Cela pourrait suffire. Maintenant, composons le formulaire. Maintenant, ce formulaire utilise les classes du formulaire de section héros ci-dessus, nous devons donc les dupliquer chaque fois que nous changeons quelque chose à l'intérieur, alors ne l'oubliez pas. Commençons par la couleur de fond du champ. Il semble y avoir un style par défaut sur la bordure du champ, alors changeons la bordure en transparent ou en zéro pixel. N'oubliez pas que le texte contenu dans le champ est le texte de l' espace réservé, qui peut être stylisé dans le menu déroulant de l'État Je sais que le bouton est un peu plus amusant. Nous avons décidé d'avoir un bouton forme de flèche placé en haut du champ, pas à l'extérieur. Nous avons donc dû payer pour notre créativité. Heureusement, nous avons déjà appris à utiliser la position, ce qui nous permet de prendre un tel arrangement. Nous devrons faire certaines choses pour que cela fonctionne. Transformons d'abord notre bouton en flèche. C'est assez simple. Nous allons mettre la flèche comme image de fond du bouton. Dans les boutons classiques, nous pourrions insérer directement la flèche à l'intérieur, mais lorsqu'il s'agit de boutons de formulaire, ils fonctionnent un peu différemment. Voici ce que nous devons faire. Supprimez le texte et le message de pondération contenus dans les paramètres du bouton, mais insérez par exemple une seule lettre Impossible de le laisser complètement vide, sinon Webflow insérera du texte par défaut Maintenant, supprimez la classe existante et créez une nouvelle classe, quelque chose comme un bouton fléché. Nous pouvons facilement faire disparaître la lettre en transformant le texte en couleur transparente. C'est tout. Maintenant, il ne sera plus visible. Le problème est résolu. Ensuite, exportez la flèche depuis FCma et ajoutez-la comme image de fond du bouton Nous devons modifier quelques paramètres ici. Retirez le carrelage et positionnez l'image en plein centre. Ensuite, supprimez le fond bleu en le transformant en transparent. Nous devons faire correspondre la hauteur du bouton à la hauteur du champ. Il ne correspond pas pour le moment car le champ comporte une marge supplémentaire en bas par défaut. Remplacez ce paramètre à zéro, et le bouton doit correspondre exactement à la hauteur. Si ce n'est pas le cas, vérifiez les paramètres du formulaire. Il s'agit d'une boîte flexible et il se peut qu'il y ait quelque chose là-haut, ou vous pouvez simplement modifier la hauteur du bouton manuellement, comme dans le champ qui devrait faire l'affaire. Ensuite, nous allons mettre le bouton en position absolue. Et alignez-le vers la droite. Au moment où vous effectuez cette opération, le bouton peut disparaître. Pourquoi ça, maintenant ? Parce que la position est relative au corps. Nous avons besoin que la position soit relative à son élément parent direct, qui est le formulaire. Rappelez-vous l'astuce : si nous changeons la position du parent en position relative ou autre , le bouton se positionnera par rapport au parent. Et cela réglera notre problème. Maintenant, faisons-le un test dans l'aperçu. Fonctionne toujours bien sauf une chose pour un e-mail très long, le texte va se mélanger à la flèche. Résoudre ce problème est très simple. Il suffit d'ajouter un rembourrage supplémentaire à l'élément de champ. De cette façon, le texte cessera de passer sous la flèche. Non, c'est parfait. Et nous devons également modifier le message de réussite pour activer l'état de réussite, sélectionner le bloc Formulaire, puis dans les paramètres, cliquer sur l'onglet Succès. Assurez-vous d'avoir sélectionné le bloc de formulaire et non le champ. Si vous sélectionnez uniquement le champ, différentes options s' afficheront dans les paramètres. Désormais, la zone s' élargit par rapport au champ du formulaire et modifie toute la structure du pied de page Ce n'est pas une bonne idée. Pour résoudre ce problème, nous pouvons donner à l'ensemble de notre bloc de formulaire une largeur fixe, la même taille que celle des dessins, soit 267 pixels. Cela permettra de conserver la même taille pour le champ, les messages de réussite et d'erreur. Maintenant, composons le reste. La taille du texte est trop grande par rapport aux autres contenus du pied de page Nous devons faire correspondre la taille de police. Et peut-être le dernier rembourrage. Et nous devons également mettre à jour le contenu. Quant au message d'erreur, il semble bien comme ça. Très bien, vérifiez la réactivité et voyez à quoi tout cela ressemble en mode de prévisualisation. Notre page d'accueil est terminée, et dans la section suivante, nous allons apprendre à utiliser l'outil d'interaction wFlows, afin de créer des animations pour notre page et de lui donner vie. Restez dans les parages. 124. Interactions : Donner de la vie à votre site Web Website: Sur le côté droit, où se trouvent tous les panneaux, il y en a un dédié aux interactions. Que sont donc les interactions ? En termes simples, c'est lorsque l'utilisateur interagit avec un objet de notre page, et ce faisant, quelque chose d'autre arrive à cet objet ou à un autre En utilisant les interactions, nous pouvons faire interagir la souris avec un élément. C'est ce qu'on appelle un déclencheur qui anime un autre objet même s' il n'a aucun rapport avec C'est ce qu'on appelle une action. Chaque interaction commence par le déclencheur. abord, nous devons sélectionner un élément avec lequel nous voulons interagir, puis sélectionner le type de déclencheur. Par exemple, l'interaction peut se déclencher lors clic ou d'un survol de la souris et d'autres options Il existe également des déclencheurs de page, ce qui signifie que nous n'avons pas à interagir avec un élément en particulier, mais une animation peut être déclenchée par des actions liées à la page. Par exemple, lors du chargement d'une page, chaque type de déclencheur possède son propre ensemble d'options. Par exemple, le survol de la souris peut être déclenché soit lors du survol, soit lors du survol L'une est lorsque la souris se déplace sur l'objet et l'autre lorsqu' elle s'en éloigne. Et enfin, vous avez les actions ou, en d'autres termes, l'animation. Dans la liste déroulante, vous verrez qu'il existe plusieurs préréglages tels que le fondu, la lumière, etc. Et la première option est l'animation costumée, et c'est là que la magie opère. Ici, nous pouvons spécifier quel élément doit être animé et nous pouvons créer un ensemble complet d'actions chronométrées Et nous obtenons cette chronologie de l'animation avec un contrôle précis de chaque action Il s'agit donc d'un aperçu rapide et approximatif des interactions. Ne vous inquiétez pas si vous n'avez pas tout attrapé. Nous allons apprendre cela lentement par la pratique, et dans la prochaine vidéo, nous allons commencer par quelques interactions simples. Restez dans les parages. 125. Interactions : interaction avec la carte 1: Dans cette vidéo, nous allons animer ces cartes ici Cela aurait vraiment l'air cool si ces cartes, au lieu d' être simplement statiques et fixées sur la photo, nous les animions. Je pense à quelque chose comme un glissement par le bas. Pour animer ces cartes, nous devons modifier légèrement notre mise en page existante Les cartes font actuellement partie de l'image de fond et peuvent être animées telles qu'elles sont actuellement. Nous aurons besoin de ces cartes sous forme d'images indépendantes Passons donc à Figma et exportons-les. Ces cartes sont recouvertes d'une ombre. Ils ne font pas grand-chose, alors débarrassons-nous de cela. Si nous voulons vraiment une ombre, nous pouvons toujours la modifier dans Webflow Nous allons les exporter en PNG. J'ai testé cela avec SVG Export, mais il s'est avéré que le fichier était plus volumineux que le fichier PNG Parfois, cela peut arriver, vous pouvez donc vous retrouver avec un SVG de grande taille, alors faites attention De plus, nous devons exporter la photo d'arrière-plan de manière indépendante. R Voyons donc quel type de mise en page nous avons et comment nous pouvons modifier cette mise en page. Il y a donc notre flexbox, qui contient deux blocs div, image et un wrapper de contenu À l'intérieur de l'enveloppe d'image, nous avons notre image actuelle. Voici ce que nous pourrions faire. Nous pouvons placer nos trois images dans l'emballage d'images ou utiliser un positionnement obsolu pour les cartes De cette façon, ils seront empilés au-dessus de l'image d'arrière-plan I Remplaçons la photo actuelle. C'est bon. Maintenant, attribuons la même classe à cette image , puis appliquons le positionnement absolu et partons de là. Rappelez-vous l'ajustement important avec des éléments absolus, ils ont besoin d'un parent avec une position relative. Comme vous pouvez le voir ici, à l'heure actuelle, cela indique que c'est relatif au corps. Nous devons être relatifs à l'enveloppe d'image. De cette façon, nous les positionnerons exactement où nous le souhaitons. Nous allons donc changer la position des enveloppes d'image en position relative. Au fait, la deuxième carte n'a pas disparu. C'est en dessous du premier. Ils sont exactement dans la même position parce que nous utilisons la même classe. Nous pouvons maintenant placer les cartes dans le coin supérieur droit, puis les déplacer à partir de là. Nous pouvons simplement rechercher les valeurs dans Figma. Dans quelle mesure sont-ils séparés des bords et utilisent-ils exactement ces valeurs ? Lorsque vous entrez ces valeurs, n'oubliez pas d' ajouter PX à la fin Sinon, il utilisera une valeur en pourcentage, ce qui enverra les cartes ailleurs. Mais pour une raison ou une autre , les valeurs de Figma ne fonctionnent tout simplement pas dans Webflow. Pourquoi est-ce le cas ? La différence vient du fait que dans Webflow, je travaille sur un canevas plus petit, d'une largeur de 992 pixels, alors que la taille de mon cadre dans Figma est Pour résoudre ce problème de réactivité, nous devons utiliser des unités réactives telles que le pourcentage, environ 10 % des deux côtés Positionnons la deuxième carte à son emplacement dédié afin mieux voir sur quoi nous travaillons. Pour ce faire, ajoutez-y d'abord une classe de combinaison , puis modifiez uniquement la valeur de la position supérieure. Il est préférable que la bonne valeur de position soit gérée par la classe de base, car ces deux cartes seront toujours à la même distance de la droite. Maintenant, la position de la deuxième carte n'est pas très cohérente entre les écrans. Pourquoi est-ce le cas ? Parce que les cartes n'ont pas une taille adaptée. Ils ont une taille fixe quel que soit l'écran. Sur un écran plus petit, la carte du haut couvre presque la moitié de l'image d'arrière-plan, mais sur un écran plus grand, elle n'en couvre qu'une fraction. Nous devons donc également adapter la taille des cartes. Nous pouvons le faire facilement en donnant aux cartes un pourcentage de largeur. Les tailles en pourcentage sont relatives à l'élément parent, qui dans ce cas est la colonne d'image. La taille de l'image principale est relative à la deuxième colonne de l'image. Ainsi, lorsque la colonne d'images se rétrécit, toutes les images qu'elle contient se rétrécissent avec elle Pour correspondre parfaitement à nos designs, je vais simplement remplacer temporairement l'image principale par celle que nous avions auparavant avec des cartes dessus, et je vais m'en servir comme guide pour dimensionner les cartes et leur position avec précision. Tu n'es pas obligée de le faire, mais c'est juste pratique pour moi en ce moment. Nous allons vérifier la réactivité. Sympa. Désormais, toutes les cartes sonnent proportionnellement à l'image principale Et maintenant, faisons la même chose avec le deuxième graphique. Si dupliquez la classe de cartes au lieu de créer une autre classe de combo, elle aura de toute façon une position différente sur la gauche Cette fois, nous n'avons pas besoin de modifier la position relative car le wrapper d'image est de la même classe que ci-dessus et il hérite du même positionnement relatif Excellente. Les mises en page sont prêtes Créons maintenant des interactions. 126. Interactions : interaction avec la carte 2: Bien, nos cartes sont toutes configurées et prêtes à être animées Commençons par celui-ci, en fait. La carte calendrier peut être plus simple. Donc, dans un premier temps, vous allez d'abord sélectionner la carte calendrier , puis accéder au panneau des interactions. Assurez-vous que cette option est sélectionnée. Sinon, nous n'allons pas configurer les interactions sur la carte, et vous allez peut-être configurer autre chose. Ici, Webflow dispose de deux versions du panneau d'interaction. Il y en a une avec GSAP et une autre concerne les interactions classiques. Dans ce cas, vous souhaitez sélectionner les interactions SAP. À partir des déclencheurs, nous devons maintenant cliquer sur le pointeur de la souris, sur le défilement, etc. Dans ce cas, nous allons animer cette carte qui, lorsque l'utilisateur fait défiler la page, s'anime, se glisse et apparaît en quelque sorte C'est un déclencheur de défilement. Sélectionnez Scroll, nommez cette diapositive. Et ce que nous pouvons faire pour cette carte, c'est la glisser vers la gauche. Appelons donc cette diapositive à gauche. Voici donc ce que nous avons maintenant. Nous avons un déclencheur et des actions. Montre exactement ce qui se passe. Carte calendrier Trigger Scroll. C'est notre déclencheur. Et maintenant, nous passons à l'action. Dans cette liste déroulante, nous allons avoir un tas de préréglages différents que Webflow vient de créer et auxquels certaines valeurs sont déjà appliquées, ainsi que certaines valeurs sont déjà appliquées, animations différentes avec Lotti Et la première, qui est la première, une animation personnalisée, qui va créer une animation vierge à partir de zéro, et c'est ce que nous allons sélectionner, afin que nous puissions facilement apprendre à créer des animations. Sélectionnez donc le premier. Nous allons maintenant passer à cette vue d'animation avec une chronologie et certaines propriétés que nous pouvons modifier. La première chose que nous voulons examiner , ce sont les propriétés. Donc, dans notre cas, nous voulons que ce soit sur la gauche et qu'il entre de gauche à droite. Ceci est défini par ces deux colonnes différentes et deux. Chaque animation a toujours un point de départ. Quel est son état d'origine ? Et puis où est-ce que ça s'arrête ? Est-ce qu'il grandit ? Commencez de manière invisible, puis il apparaît à partir de deux. Voilà ce que cela représente. Maintenant, dans notre cas, nous voulons que cela s' arrête là exactement comme nous l'avons conçu. Nous ne voulons donc pas vraiment changer quoi que ce soit sur les deux. Nous voulons changer quelque chose sur le formulaire. Sélectionnez donc parmi et cliquez à nouveau dessus pour en désactiver deux. Lorsque vous ne modifiez rien dans les deux, Webflow suppose que vous obtenez l' état initial dans lequel vous l'avez conçu Que voulons-nous donc changer ici ? Nous avons quelques options qui existent déjà. Nous pouvons ajouter d'autres propriétés que nous pouvons modifier et animer. Dans ce cas, ce que nous voulons changer, c'est opacité car nous voulons qu'elle apparaisse Nous voulons que cela soit invisible et qu'il apparaisse ensuite. Une autre propriété que nous voulons modifier est sa position sur l'axe X. Nous voulons qu'il se déplace de gauche à droite, et c'est l'axe X. Nous n'avons pas besoin de Y, ni d'échelle. Les valeurs positives nous incitent donc à partir de la droite. Nous avons besoin de valeurs essentiellement négatives. Négatif, disons 50 pixels. Vous ne voulez pas qu'il soit trop loin, il partira de 50 pixels négatifs, puis reviendra à sa position initiale de zéro pixel. Et pour ce qui est de l'opacité, nous voulons qu'elle commence à 0 % d' invisible et qu'elle passe à 100 %, ce qui est évidemment ce qu'elle va faire toute seule Nous n'avons pas besoin de le préciser. Maintenant, il s'agit d'une interaction de défilement que nous n'avons pas choisie, car elle fait défiler le mouvement, et ce n'est pas comme si elle apparaissait en une seule fois Et comme vous pouvez le constater, cette position de la chronologie évolue également. L'interaction Be Scroll comporte deux types d'interactions. La première est qu'elle déclenche. Une fois que vous accédez à quelque chose, il se déclenche et en joue un autre qu'il efface. Et ce que nous devons faire, c'est revenir à notre déclencheur. C'est notre déclencheur. Nous étions ici en ce moment. Il s'agissait d'actions. C'est là que nous en sommes à l'animation personnalisée. Et nous allons revenir au déclencheur de défilement, cliquer dessus, et nous allons avoir quelques options ici pour modifier les paramètres du déclencheur. Chaque déclencheur aura un ensemble d'options différent que nous pouvons modifier, par exemple, clic aura ses propres options, survol de la souris, le survol auront ses propres options, etc. Scroll propose différentes options ici. Le parchemin possède deux types de commandes. L'une est le gommage au défilement, et c'est ce qui est sélectionné par défaut C'est un gommage sur parchemin. Scrub signifie effacer la chronologie Il s'agit d'un langage de jargon issu de l'animation. La chronologie s'efface donc. Ce truc qui ressemble à une chronologie, ça s'appelle le nettoyage. C'est pourquoi cela s'appelle Scrub on Scroll. C'est donc ce qui se passe. Il est donc animé qui défile. Ce n'est pas ce que nous voulons. Ce que nous voulons, c'est le second, qui consiste à déclencher des actions. Et ce que cela fait, c'est qu'une fois le déclencheur atteint, l' animation est jouée en une seule fois. Et une fois que vous aurez remplacé cela par le déclencheur, vous aurez ce bouton de lecture ici. Et comme vous pouvez le constater, c'est exactement l'animation que nous voulons. Maintenant, autre option, revenons aux paramètres du déclencheur. Une autre option que nous devons changer est de savoir par où commence-t-elle réellement ? C'est le début. Où se déclenche le défilement ? Est-ce que cela se déclenche lorsque cette carte apparaît ici ? Est-ce qu'il se déclenche lorsqu'il apparaît au milieu ? Est-ce qu'il se déclenche lorsqu'il apparaît quelque part ici ? Et c'est là que nous pouvons définir où exactement le déclencheur se produit. Nous avons deux options ici, l'élément et la fenêtre d'affichage Et lorsque les deux s'alignent, c'est là que le déclencheur se produit. Donc, dans ce cas, ce que nous avons se trouve en haut de l'élément juste ici, et en bas de la fenêtre d'affichage La fenêtre d'affichage est identique à l'écran, écran visible de la page, en bas de la fenêtre Une fois que ces deux éléments se rencontrent, vous déclenchez l'animation de défilement. Comme vous pouvez le constater, nous avons clôturé en utilisant ces marqueurs. J'ai l'habitude de le désactiver, mais pour cette vidéo, c'est plutôt sympa. Je peux montrer exactement où se produit ce déclencheur. Et ce déclencheur se produira ici même, au tout début, lorsque nous pourrons réellement allons-y et laisse-moi vous le montrer sur la vraie page. Nous faisons défiler la page vers la droite, et faites attention en ce moment, c'est invisible Et dès qu'ils émettent, cela apparaît. Ce n'est pas ce que nous voulons, n'est-ce pas ? Nous voulons qu'il apparaisse quelque part lorsque nous sommes à mi-chemin de l'écran. Donc, ce que nous allons changer ici, c'est que, par exemple, si vous changez le haut vers le bas, comme vous pouvez le voir, le déclencheur passe maintenant vers le bas, remplacez-le par le centre. Je vais passer au centre, mais restons en haut. Nous allons maintenant modifier la fenêtre d'affichage. Si nous le changeons vers le haut, il se déclenchera ici. Donc, quand cela se rejoint ici, c'est trop loin, un bon endroit serait le centre. Donc, ici même, lorsque carte se trouve quelque part dans la page, c'est à ce moment-là qu'elle va se déclencher. Ces champs peuvent également prendre des valeurs telles que 20 à 80 % de l'écran, et des mots simples tels que haut au centre, bas. Très bien, c'est un placement parfait. Faisons-le tester. Lorsque vous testez, faites défiler les animations, sortez de l'endroit passez à l'aperçu, puis recommencez à zéro. Tu peux faire attention. Voici le début, voici le début du scroller Une fois que ces deux personnes vont se rencontrer, c'est alors que le déclencheur se produit. C'est plutôt bien. Maintenant, si vous voulez y rejouer, vous devez réinitialiser le mode d' aperçu une fois de plus, revenir et nous rejouerons. D'accord, c'est plutôt bien. En fait, je vais désactiver ces marqueurs. C'est distrayant Maintenant, autre chose, l'animation n'est pas très fluide. Et pour changer quoi que ce soit à propos de l'animation, nous revenons aux actions, et voici notre animation, une animation personnalisée, nous allons ici. Maintenant, comment modifier et rendre cette animation un peu plus fluide ? Et cela se fait par le biais de l' assouplissement et de la durée. À l'heure actuelle, l'assouplissement est défini sur linéaire , et nous avons quelques options différentes ici, mais ce que je vais faire, c'est cliquer sur celle-ci, et je vais vous montrer ici mieux comment fonctionne cette animation d'assouplissement. Chaque animation a son temps et sa progression. C'est le moment. C'est un progrès. Il est temps de progresser. Linéaire signifie qu' au fil du temps, même quantité de progression s' écoule dans l'animation Donc Bam Bam bum, bum, bum, bum, bum, bum au même rythme C'est pourquoi le linéaire ne constitue pas une animation très belle et intéressante. Vous pouvez prévisualiser cela à partir d'ici la boîte se déplace à un rythme constant. Ce n'est pas ce que nous voulons. Nous avons une autre option, celle de l'assouplissement. L'assouplissement signifie que cela commence lentement. Passons à l'extrême pour que vous puissiez mieux le voir. Démarre très lentement. Alors c'est le moment, non ? Très peu de progrès ont été réalisés au début. Non, non, aucun progrès, puis à mi-chemin, il bascule puis accélère, et tous les progrès sont réalisés par la suite Je peux le prévisualiser. Vous voyez, ralentissez puis accélérez. C'est de l'assouplissement. Ensuite, nous avons la possibilité de nous en sortir. Passons à l'extrême pour le rendre un peu plus visible. Ce qui se passe facilement, c'est qu'il démarre très vite. Beaucoup de progrès se font donc très, très rapidement, puis ralentissent et l' atterrissage se fait en douceur. Voyons voir. Il démarre donc très vite puis effectue un très bel atterrissage en douceur. Pour les animations qui apparaissent restent et atterrissent simplement au même endroit, c'est généralement ce que nous voulons. Nous allons donc rester à l'aise et utiliser Extreme ou toute autre option que nous ferons également. qui peut également être sélectionné dans cette liste déroulante est sorti, puissant Assiette Maintenant, c'est un peu trop rapide. Donc, la durée par défaut de Webflow le rend un peu trop rapide. Cela se fait en secondes, peut être converti en millisecondes, 1 seconde, deux secondes ou demi-seconde ou n'importe quelle décimale que vous pouvez faire . Essayons 1 seconde. Voilà. Maintenant, c'est fluide. Excellente. Essayons-le. Parfait. C'est ce que nous voulons. C'est bon. Maintenant, il en va de même pour les cartes d'événement. Sortons de ça d'ici. Encore une fois, nous allons sélectionner l'une des cartes d'événement, et nous allons cliquer à nouveau sur Scroll Trigger. Et cette fois, faisons en sorte que cela se fasse par le bas. Voiture d'événement Trigger Scroll. C'est ce que nous voulons. Modifions les paramètres des paramètres de défilement. Maintenant, voici une partie importante et je veux que vous vous assuriez que vous avez la même chose que moi, une cible pour chaque cible Chaque cible de l' interaction dans Webflow aura différentes manières de la cibler Vous pouvez cibler la classe, vous pouvez cibler directement l' élément. Vous pouvez cibler une page et d'autres options. Donc dans ce cas, c'est automatiquement parce qu'une classe est appliquée à notre carte, elle cible automatiquement par défaut, elle va sélectionner une classe. Et ici, nous sommes en mesure de sélectionner le cours que nous voulons. Et si vous désactivez cette option, vous pouvez voir que vous pourrez sélectionner n'importe laquelle des classes que vous avez déjà créées sur votre site. Et maintenant, une fois que je l'ai changé en flèche, par exemple, le fait d'être sélectionné n'a plus d'importance. Nous animons maintenant la flèche. Nous n'animons plus la carte. Maintenant, à quoi vous devez faire attention, fois que vous avez une carte d'événement, vous devez vous assurer que cette classe et cette classe partagent la classe de base , car si vous réglez le déclencheur sur ce type, voyons voir, faites défiler la page. Vous verrez que Webflow a ajouté à la fois la classe de base et la classe combinée, qui signifie que seule cette carte sera animée Nous voulons que cette animation et cette interaction s' appliquent aux deux. C'est donc là que vous devez vous en assurer. Classes, si différentes classes sont appliquées à vos cartes différentes classes sont appliquées à ou si elles ont une classe de combinaison, assurez-vous de sélectionner la classe de base. Et si vous avez accidentellement sélectionné l'une des cartes auxquelles une classe de combo est appliquée, retirez-la simplement de. Et appuyez sur Entrée ou quittez-le simplement. Et c'est maintenant le bon déclencheur sélectionné. Mais laissez-moi y retourner parce que je gâche tout ici. C'est bon. Nous avons donc le bon déclencheur, le bon défilement, la bonne voiture d'événement. C'est ce que tu veux. Si vous avez d' autres classes de base, vous devez les supprimer. Dans les paramètres, encore une fois, nous voulons que le haut de l'élément rencontre le centre de la fenêtre d'affichage, et c'est à ce moment-là que cela se déclenche, et nous ne voulons pas frotter lors Nous voulons des actions déclencheuses. Fermez, et maintenant nous allons ajouter une action. Animer. En fait, je vais désactiver ces marqueurs. Je sais qu'ils entrent juste dans le. Et dans ce cas, que voulons-nous animer, non ? Nous voulons à nouveau animer l'opacité. Nous ne voulons pas désactiver, alors je choisis entre désactiver deux. Deux sont déjà définis. Il s'agit de la position finale. Nous voulons animer l'opacité, mais nous ne voulons plus animer l'axe X. Nous voulons animer YxS. Nous n'avons pas besoin d'échelle. Nous voulons donc qu'il se déplace verticalement. C'est ce que fait YxS. Donc, en partant du bas, voyons qu'il s'agit de valeurs positives ou de valeurs négatives. Ce sont donc des valeurs positives. Donc 50 pixels depuis le bas, 0 % d'opacité, ce qui signifie qu'il est invisible, puis il apparaît C'est exactement ce que nous voulons. Maintenant, durée, 1 seconde, essayez de faire correspondre vos durées et d'assouplir partout. C'est plus agréable lorsque le même type d'animation s'anime au même rythme Et nous avons eu recours à une alimentation électrique simplifiée pour certains. Faisons-le tester. Sympa. Cela fonctionne très bien. Parfois, il suffit de noter une chose, parfois votre animation commence quelque part au milieu de celle-ci. Si vous jouez avec un animateur doté d'un panneau d' interaction, cela peut commencer au bout de 0,5 seconde ou quelque chose comme ça, et cela commencera au milieu ou quelque part plus tard n'est pas ce que tu veux. Donc, juste au cas où vous auriez une valeur ici, réinitialisez-la ou mettez-la à zéro. Et bien, passons en mode aperçu et testons-le . Parfait. Encore une fois. Excellente. Excellente. Et ce sont nos animations. Ces interactions étaient si simples à configurer, mais elles ont apporté beaucoup de vie à la page. Maintenant, la page semble un peu plus vivante, un peu plus conviviale et interactive. 127. Interactions : interaction avec les flèches: Dans cette vidéo, nous allons animer cette icône en forme de flèche au survol Ainsi, chaque fois que nous survolons le bloc de liens, l'icône en forme de flèche se déplace légèrement vers la droite Animation très simple. Tout d'abord, nous avons besoin de bons cours. Renommons-le donc en quelque chose d'un peu plus mémorable, comme une icône en forme de flèche C'est notre icône en forme de flèche, et le parent est notre bloc d'encre. Nous pouvons le laisser sous forme de bloc de liens. Cela fonctionne pour nous. Quel est donc notre élément déclencheur ? Notre élément déclencheur est l'ensemble du bloc de liens. Donc, chaque fois que je survole ici ou ici, la flèche doit s'animer Tout est donc le déclencheur. Donc, une fois que le bloc de liens est sélectionné, accédez au panneau des interactions, et nous sélectionnerons le déclencheur sur quel curseur Appelons ce lien hover. Et par défaut, il sélectionnera le déclencheur correct , à savoir Link block, la classe. Il sélectionne le bon car le bloc-encre avait été sélectionné avant d'ajouter un nouveau déclencheur Mais si vous ne le faites pas, vous pouvez évidemment simplement changer de cible à partir d'ici. Si vous avez sélectionné un élément ou autre chose, remplacez-le par la classe, et à partir de là, vous pouvez simplement trouver bloc Link de votre classe et l'appliquer. Maintenant, lorsque vous faites cela, assurez-vous que vous avez un bloc de liens de classe comme classe de base, et que c'est la même classe appliquée à tous les autres blocs de liens, car nous voulons réutiliser cette interaction partout. Donc, si vous avez une classe de base ou autre classe dupliquée ici ou autre, vérifiez simplement cela, assurez-vous que les autres éléments, autres blocs de liens ont la même chose. Et si vous en avez accidentellement sélectionné une avec ces classes de combinaison, supprimez simplement cette classe de combinaison supplémentaire. C'est bon. Alors, quel est le type ici ? Tapez la souris, entrez. C'est bon. C'est ce que nous voulons dans ce cas. Maintenant, nous devons mettre en place une action. J'aime bien le premier, l'animation personnalisée. Nous définissons ici quel est l'objectif de notre animation. Nous avions pour cible un déclencheur, avec lequel il interagit Maintenant, qu'est-ce qui est affecté et qu'est-ce qui est animé. À l'heure actuelle, il est dit que la cible est l'élément déclencheur. Dans ce cas, bloquez le lien. Ce n'est pas ce que nous voulons animer. Nous voulons animer l'icône représentant une flèche. Sélectionnez donc ceci et allez dans le menu déroulant afin que nous puissions changer la cible de notre animation Nous avons plusieurs options différentes et deux options principales que nous allons généralement utiliser pour cibler des éléments spécifiques. L'une consiste à cibler l'élément. Élément signifie que vous ciblez un élément spécifique très, très unique. Dans ce cas, uniquement cette flèche et pas les autres flèches ci-dessous. Puisque nous voulons réutiliser cette interaction, une meilleure approche est de cibler car ils ont également une classe d'icônes en forme de flèche partagée. De cette façon, nous pouvons avoir une seule interaction contrôlant tous les blocs de liens. Nous allons donc sélectionner la classe. Maintenant, dans ce cas, nous ne voulons pas cela. Nous ne voulons pas le blocage des liens. Nous ne ciblons pas cela, alors supprimez-le et appliquez l'icône en forme de flèche ou la classe que vous avez nommée à votre icône. C'est bien. Il suffit donc de vérifier la cible, l'icône en forme de flèche. Chaque fois qu'il précède un .in front, cela signifie qu'il s'agit d'une classe CSS C'est ainsi que vous écrivez des classes CSS dans le code. Pointez quelque chose. D'accord. Maintenant, qu'est-ce qu'on anime Nous voulons qu'il se déplace en vol stationnaire, non ? Donc, dans ce cas, nous ne voulons pas que from soit défini car from est tel quel. Nous voulons en définir deux. C'est ce qui se passe dans l'animation. Donc, si vous êtes sélectionné, cliquez simplement dessus sur Désélectionné pour qu'il apparaisse quelque sorte et que nous n' y toucherons pas Et si vous en avez désélectionné deux, vous pouvez les appliquer comme ceci Nous pouvons maintenant modifier certaines propriétés. Nous pouvons donc animer la flèche. L'opacité, nous n'en avons pas besoin, déplacez Y, nous n'en avons pas besoin, l'échelle, nous n'en avons pas besoin Ce dont nous avons besoin, c'est de nous déplacer sur l'axe X. Disons donc quelque chose comme huit pixels. Il se déplace de huit pixels, et les valeurs positives indiquent qu'ils se déplacent vers la droite. Des valeurs négatives signifieraient qu'ils se déplacent vers la gauche. Nous avons besoin de points positifs dans ce cas. Voyons voir, comme vous pouvez le voir, il bouge et s'anime. Nous allons maintenant tester cet aperçu interne. Plutôt bien. Il s'anime un peu trop lentement, alors que nous pouvons modifier la durée de l'arbre. Essayons 0,2. C'est plutôt bien. Mais évidemment, comme vous pouvez le voir, ça se bloque, non ? Il reste au même endroit. Nous voulons que cela se déplace directement au survol et au passage de la souris extérieur lorsque la souris part pour revenir à sa place d'origine Alors revenons en arrière. Nous allons maintenant configurer un nouveau déclencheur. Ce déclencheur était essentiellement activé avec la souris, et nous pouvons définir un nouveau déclencheur, un autre survol, toujours sur le bloc de liens Si dans votre cas, quelque chose a été sélectionné accidentellement sur le canevas et que cela change de classe, sélectionnez simplement la bonne classe. Et dans ce cas, nous allons changer le type de saisie par la souris de sortie. Déclenchez chaque feuille de souris. C'est exactement ce que nous voulons. Et à partir de la commande, nous pouvons réellement changer cela et lui demander de s'inverser, ce qui place l'animation en arrière par rapport à sa position actuelle. Et l'inverse signifie l'inverse de ces actions. Quoi que nous ayons mis en place, nous n'avons évidemment qu' une seule action ici. Cette action va donc simplement s'inverser. Faisons-le tester. Sympa. Tout fonctionne bien. Voyons maintenant les autres. Et comme vous pouvez le constater, instantanément, les autres fonctionnent également, et nous n'avons pas eu à appliquer l'interaction aux autres parce que nous utilisons des classes. Juste pour résoudre les problèmes, au cas où vous feriez des erreurs et que cela ne fonctionnerait pas pour vous ou au cas où les autres liens ne fonctionneraient résoudre les problèmes, au cas où vous des erreurs et que cela ne fonctionnerait pas pour pas pour vous, vérifiez d'abord ceci, activez votre panneau de stylet et vérifiez que vous avez une icône en forme de flèche ici, flèche que je peux appliquer ici, n'est-ce C'est Sam. C'est pareil. Et c'est pareil ici. Cette petite icône en forme de boulon vous indique que cet élément fait partie d'une sorte d'interaction, qu'il s'agisse d'un déclencheur ou d'une interaction. Notre panel nous le montre également. Donc, si vous faites défiler un peu, cela montre tous les éléments qui sont déclenchés ou font partie d'une sorte d'interaction. Nous avons également un panneau qui vous montrera toutes les interactions que nous avons sur cette page. Assurez-vous donc qu'il s' agit d'une icône en forme de flèche. partagent tous la même classe, et tous les liens Link Block partagent la même classe. Est-ce que Link Block est aussi pour moi. Bloquez les liens ici également. C'est pourquoi cela fonctionne. Ensuite, dans les interactions, vous devez vous assurer que survol indique que ce sont les classes sélectionnées, Link blog, class, link blog, hover leave, class, link block Et à l'intérieur de l'animation, encore une fois, cible, icône de flèche de classe. C'est ce que nous voulons. Maintenant, il y a un petit problème que nous devons résoudre car sur les petits écrans, vous ne pourrez pas le voir. Si tu fais attention, quand je passe le curseur sur celui-ci, l'autre s'anime aussi. C'est parce que nous ciblons une classe. Nous disons donc que chaque fois que je passe le curseur ici pour en savoir plus, animez une classe nommée oicon et il s'agit d'une classe nommée Il s'agit d'une icône Hero nommée classe, et celle-ci aussi. Tous les trois sont donc animés. Mais ce n'est pas ce que nous voulons. Ce que nous voulons, c'est uniquement animer celui qui se trouve à l'intérieur de l'élément déclencheur Et nous avons cette option. Cela fait donc partie des actions. Maintenant dans le déclencheur car c'est un problème avec l'arocon C'est donc tout ce qui est animé. Donc, dans les actions. Icône en forme de flèche. Ici, nous avons une option pour filtrer. Et nous avons peu d'options ici dans Direct Hob, l' une ou l'autre de ces options fonctionnerait. Et à partir de cette liste déroulante, nous voulons entrer dans l'élément déclencheur Il peut avoir sélectionné par défaut une classe ou autre chose, mais nous avons besoin d'un élément déclencheur intégré. Maintenant, cela nous indique cette icône de flèche animée qui se trouve à l'intérieur de l'élément déclencheur, pas toutes les icônes de flèche Maintenant, rejouons-le, agrandissons l'écran pour que nous puissions en voir deux ensemble. Et comme vous pouvez le voir maintenant, lorsque je passe le curseur sur celui-ci, l'autre ne s'anime pas Et c'est fait. Bien, ce sont donc les bases des interactions. Il existe une infinité de possibilités quant ce qui peut être fait avec les interactions dans Webflow Vous pouvez y aller et je vous conseille de le faire pour vous rendre à la vitrine Vous verrez des personnes créer des animations et des interactions complètement dingues Nous vous donnerons de bonnes idées sur ce qui peut être fait dans Webflow et vous donnerons une sorte d' inspiration pour de futurs projets Au début, les interactions peuvent sembler un peu intimidantes, mais en réalité, une fois que vous aurez surmonté ce petit obstacle, vous verrez à quel point elles peuvent être simples, amusantes et nombreuses options différentes dont vous disposez pour créer quelque chose de très interactif, de très beau Et vous serez capable de créer des interactions complexes en quelques clics, ce qui vous demanderait probablement mois de pratique du Javascript pour y parvenir sans le Web, plus de vidéos sur les interactions dans la partie avancée de ce cours, ce qui sur les interactions dans la partie avancée de ce cours, vous permettra d' approfondir vos connaissances et d'acquérir un peu plus de pratique Bien que ce que nous avons déjà appris soit tout à fait suffisant pour que vous puissiez commencer à travailler sur de vrais projets. Dans la section suivante, nous allons nous occuper de la version mobile de la accueil de notre site Web dans ce cas. Ensuite, dans la section suivante, nous allons tout apprendre sur le CMS et comment ajouter un blog à notre site Web. 128. Réactif : Navbar (application d’équipe): C'est bon. Dans cette vidéo, nous allons commencer à optimiser la version mobile de notre page d'accueil, commençant par la barre de navigation. Dans le projet précédent, nous avions rendu la barre de sieste entièrement visible sur la tablette. Voyons si nous pouvons faire de même ici. Pour afficher les nablns sur la tablette, sélectionnez la barre d'onglets et accédez au panneau des Vous trouverez ici les options pour l'icône du menu. Lorsque le curseur se trouve sur la tablette, cela signifie que le menu hamburger s'affiche la tablette et sur tous les appareils plus petits Si nous le déplaçons vers le bas, la tablette sera désactivée. C'est excellent. Pas besoin de changer quoi que ce soit. Tout va très bien. J'adore quand les choses se passent facilement comme ça. Voyons ce qu'il faut faire pour la barre Na dans le paysage mobile. Ce ne sont que des couleurs et un peu d'espacement. Dans le projet précédent, le menu déroulant s'étendait bord à bord, mais ce n'est pas le cas ici. C'est parce que nous avons un arrangement légèrement différent pour la barre N. Il se trouve dans cette section réservée aux héros, rembourrée, et le menu déroulant ne s'étend que jusqu'à la barre de sieste elle-même. Nous pourrions éventuellement faire un étirement si nous le voulions , peut-être en utilisant des marges négatives. Mais personnellement, je suis d'accord avec le fait qu'il ne s'étire pas bord à bord. Laissons donc les choses telles quelles. Pour changer la couleur du bouton de menu, il suffit de changer la couleur du texte du bloc. Ce sont des icônes de collage de polices, donc la couleur de la police va la changer. Il en va de même pour la taille. Il suffit d'augmenter la taille de la police et elle augmentera. Je pense que nous avons utilisé 30 pixels précédemment. Et ajustons le rembourrage pour l' ensemble du bouton cliquable Il est un peu trop grand. Idéalement, il aurait la même taille que les boutons et les liens de la barre, qui ont une hauteur de 44 pixels , je crois, donc si le texte mesure environ 30 pixels, alors un rembourrage de sept pixels devrait en faire 44 Maintenant, personnalisons l'état d' ouverture du menu afin de l' afficher pendant que nous le personnalisons, sélectionnons n' importe quel élément de la barre NAB, puis dans l' onglet des paramètres, cliquez sur Ouvrir le Maintenant, les éléments du menu sont cliquables et nous pouvons les sélectionner et les styliser. La couleur de fond provient de ce bloc de menu NAV. Sélectionnons-le et changeons l'arrière-plan je dirais, notre couleur bleu foncé que nous utilisons sur le pied de page Et pareil pour l'arrière-plan du bouton de menu. Lorsque vous modifiez l' état ouvert du bouton de menu, assurez-vous que le champ de sélection affiche cette classe ouverte verte C'est ainsi que nous définissons l'État ouvert. Parfois, le menu peut être ouvert, mais cette classe d'état ouvert n'existe pas Les modifications ne seront donc pas reflétées comme vous le souhaitez. Actualisez simplement le canevas et ouvrez à nouveau le menu. Donnons-lui un rembourrage approprié. Pouvez-vous remarquer pourquoi le bouton s'étire sur les bords ? Cela est dû au fait que l'affichage est configuré pour bloquer et que les éléments du bloc occupent toute la largeur disponible. Nous devons le modifier pour afficher le bloc intégré, comme les boutons par défaut Maintenant, c'est à peu près juste. Mais nous devons l'aligner sur la gauche. Nous avons eu ce défi similaire dans le projet précédent. Les blocs intégrés agissent un peu comme du texte. Donc, si le conteneur parent est aligné au centre gauche ou à droite, il conservera cet alignement Dans ce cas, le parent n'est pas un menu, mais il indique qu'il est aligné à gauche en réalité, ce n'est pas le cas. Cela arrive parfois. Il suffit donc faire des allers-retours et appliquer l'alignement à gauche manuellement pour que le changement soit reflété. Ajoutons également des marges gauche et supérieure pour aligner correctement le bouton. C'est bon, c'est mieux. Enfin, je vais arrondir les coins des arrière-plans. Cela donnera un look un peu plus joli. Nous n'en avons pas besoin des quatre côtés. Pour le bouton de menu, nous en avons besoin dans les coins supérieurs. Cliquez sur cette option pour lui ajouter des coins individuels. Pour le menu NaF, nous voulons qu'il soit dans tous les coins sauf le coin supérieur droit De cette façon, le bouton et le menu se connecteront bien, comme un seul objet. C'est parfait Voyons maintenant quoi cela ressemble en mode aperçu. Une dernière chose, vous voyez que le logo ici est légèrement rembourré Ce rembourrage n'existe pas sur les versions tablette et ordinateur de bureau. Webflow est en train de l'insérer sur les versions mobiles. Nous n'avons pas besoin de ce rembourrage parce que nous avons le nôtre, alors il suffit de s'en débarrasser C'est bon. Passons à la version portrait. Il n'y a en fait rien à ajuster pour le bar. Les rembourrages doivent être corrigés, mais cela fait partie de la section des héros C'est ce que nous allons faire dans la prochaine vidéo. 129. Réactive : section Héros: Et nous sommes de retour dans cette vidéo, nous allons adapter la section héros aux différents appareils. Il n'y a pas grand-chose à faire, donc cela devrait être rapide. Réduisons la hauteur de la section du héros sur la tablette. C'est trop grand dans ce cas. Quelque chose comme 680 pixels devrait être bon. Et nous devons ajuster la marge du contenu pour qu'il soit à nouveau centré. Cent 30 pixels, ça a l'air bien. Passons au paysage mobile. Au début, il semble qu'il n'y ait rien à corriger ici, mais nous pouvons oublier que nous ne voyons pas le véritable paysage mobile ici. C'est trop grand. Pour bien le visualiser, le mieux est de le vérifier sur un véritable mobile, mais nous pouvons réduire la hauteur du navigateur pour nous donner une idée approximative de ce avec quoi nous travaillons. Voici à quoi cela ressemblera . Rien n'est visible ici. L'espacement vertical est crucial dans le paysage mobile Nous devons donc rendre notre contenu plus précis et plus précis Tout d'abord, réduisons le rembourrage des sections. Et supprimez la hauteur fixe de la section du héros. Nous voulons qu'il soit automatique dans ce cas, donc qu'il soit aussi grand que le contenu. OK. De même, réduisons le rembourrage horizontal Sur les petits appareils, l'espace est rare. Je dirais un rembourrage de 30 pixels sur les côtés au lieu de 60. Ensuite, nous devrions réduire un peu la taille du téléphone ou la taille H par défaut est 55. Cela peut être un peu trop grand pour les mobiles. J'opterais pour 35 ou 40. N'oubliez pas que le style de titre provient de la balise H one. Pour ajouter une balise H one à tous les environnements mobiles, supprimez d'abord la classe appliquée, puis sélectionnez tous les en-têtes H one dans le menu déroulant sélectionnez tous les en-têtes H one Vous devriez avoir la même icône de paysage sur la gauche. C'est important. De cette façon, nous savons que nous affectons tous les appareils H un pour le paysage mobile et les ordinateurs de bureau, et non pour les tablettes ou les ordinateurs de bureau. Une fois en place, nous pourrons rétablir cette classe blanche. Une dernière chose pour la vue sur le paysage. Le contenu et l'image d'arrière-plan interagissent désormais beaucoup plus. Dans les versions ci-dessus, contenu se trouve sur une zone plane floue, mais ici, il couvre le visage du modèle Cela rend le texte difficile à lire. Déplaçons d'abord ce mot sur la ligne suivante. Mais cela ne suffit pas. Nous allons donc ajouter une couche foncée sur l'image de fond 30 % me semblent suffisants. Et c'est fait pour une vue sur le paysage. Le portrait a donc besoin de quelques éléments supplémentaires. Commençons par changer le sens vertical du formulaire afin que le champ se trouve en haut du bouton. C'est assez simple car nous avons défini ce formulaire comme une boîte flexible. Il suffit donc de changer de direction. Assurez-vous de sélectionner le bon élément. Il existe un formulaire et un bloc de formulaire. Ensuite, nous devons corriger l'arrière-plan du héros. C'est là que ce positionnement personnalisé est pratique car aucun des alignements prédéfinis ne fonctionne pour nous. Je pense que 55 % font un meilleur travail. OK, vérifions la fluidité. Oups, le champ ne s'étire pas complètement car sa largeur est maximale. Supprimons-le dans ce cas et définissons-le sur none. Cela le rendra aussi large que le parent. N'oubliez pas que les modifications de style apportées ces versions ne concernent que bas et non le haut de la hiérarchie Ce champ ne sera donc reflété que sur le portrait mobile et non sur paysage, la tablette ou l'ordinateur de bureau. Tout est fait pour la section des héros, essayons-la en mode aperçu, assurant que tout est beau et fonctionne correctement. Excellente. Nous allons continuer avec les sections suivantes dans les prochaines vidéos. 130. Réactive : section maquette: Et passons à la section suivante. Pour la tablette, c'est assez simple. Il suffit de déplacer cette image davantage vers la gauche. Lorsque vous cliquez dessus, vous verrez qu'il a une marge négative. C'est ce qui le fait tellement sortir de la page. Diminuez la marge négative. Je pense que ça a l'air plutôt bien. -350 pixels. Vérifiez la fluidité, et c'est tout. Passons maintenant au paysage mobile, commençons par le remplissage des sections Nous avons réduit le rembourrage horizontal de la section réservée aux héros Il fait 30 pixels. Nous n'avons jamais fait correspondre cela aux autres sections. Nous ne pouvons pas apporter la modification directement à cette section car une coboclasse y est appliquée Si nous réduisons l'espace, cela ne s'appliquera qu' à cette classe de composition et à aucune des autres sections Nous pouvons donc soit sélectionner une autre section qui n'a pas de classe de composition comme la suivante, par exemple, soit nous débarrasser de la classe de compilation pendant un moment Donnez du style à cette section, puis réinsérez la classe coo. Mais c'est plus compliqué. Nous allons donc simplement styliser cette section ci-dessous. Et bien sûr, cela a également appliqué le rembourrage de la section ci-dessus De même, nous pouvons modifier la valeur la plus appropriée et la réduire à quelque chose comme -260 pixels Encore une fois, vérifiez la fluidité. Une autre chose que j'aimerais corriger ici est le rembourrage vertical de la section En mode paysage, l'espace vertical est très limité. Si vous imaginez que vous voyez cela un environnement mobile réel, vous comprendrez qu'il y aura des lacunes où vous ne verrez pas vraiment beaucoup de contenu. Une chose à noter à propos de l'affichage paysage mobile, c'est qu'il ne s'agit pas uniquement du paysage mobile, mais aussi de certaines tablettes en flets ou quel que soit leur nom, car vous verrez dans le visualiseur qu'il affiche des tailles différentes selon les appareils Il ne s'agit donc pas simplement d'un paysage mobile en réalité, mais nous l'appelons paysage mobile simplement pour faciliter les choses. OK, nous avons donc un rembourrage vertical de 80 pixels sur nos sections par défaut Je vais le réduire à 60 pixels, comme nous l'avons fait précédemment pour sélectionner une section qui n'a pas classe de convo, et styler celle-ci OK, passons au portrait mobile. L'image de cette section n'est même pas visible. Nous allons donc faire passer la direction de la boîte flexible à la verticale. Il y a une autre direction que nous pouvons changer. Nous pouvons inverser l' ordre à l'intérieur de la boîte flexible, et il est plus logique d'avoir d'abord l'image. Et maintenant, nous pouvons styliser l'image. L'un des problèmes est que l'image est trop petite, nous devrions donc en augmenter la taille. L'augmentation de la taille de l' image comporte certaines choses à faire et à ne pas faire. Nous ne pouvons pas modifier la largeur à partir des paramètres de l'image. Il s'agit de paramètres d'image globaux. Donc, si nous changeons la taille ici, cela aura une incidence sur toutes les tailles d'écran. Vous voyez maintenant que l'image a disparu du bureau. L'idéal est donc de le styliser à partir du panneau des styles. Ici, il y en a un autre à ne pas faire. Ne donnez pas de style à la hauteur. Lorsque vous personnalisez la hauteur, rapport hauteur/largeur n'est pas préservé et vous obtenez une image en forme de spaghetti Les valeurs de largeur sont la meilleure option, mais là aussi, certaines choses se comporteront bizarrement Selon la situation, c' largeur fixe ou la largeur minimale qui convient le mieux. Par exemple, une valeur de largeur normale ne modifie pas la taille. Mais la largeur minimale fait un très bon travail. Non pas qu'il s'agisse d'un bogue ou d'une sorte de problème, il existe généralement une réponse à ces comportements mystérieux Dans ce cas, la largeur ne fait pas grand-chose car la largeur maximale est de 100 %, ce qui signifie qu'elle doit être aussi large que le conteneur parent. Il remplace essentiellement la largeur, mais la largeur minimale l'ignore car elle précède la largeur maximale Ne vous inquiétez pas si vous ne comprenez pas tout cela. D'habitude, je ne m'inquiète pas trop du raisonnement. Je joue simplement avec les valeurs et je vois laquelle fonctionne. C'est bon. Je dirais que 380 pixels ont l'air bien. Nous devons maintenant corriger la marge négative, peut-être aligner le bord de l' image avec le contenu. OK. Quelque chose comme -90 pixels. Et ajoutons une marge en bas. Parfait. Vérifie la fluidité, et c'est parti Je ne m'inquiète pas trop de la taille de l'écran, moins de 320 pixels de large. C'est une situation tellement rare surtout pour notre public cible, qui Je ne pense pas qu'aucun d' entre eux possède un Nokia en 95. En plus de cela, la fluidité est excellente. Nous allons continuer avec le reste dans la prochaine vidéo. Restez dans les parages. 131. 124 corps réactif NOUVELLE interface utilisateur: En reprenant là où nous nous sommes arrêtés, nous allons aborder les versions réactives de ces deux sections depuis le corps. Nous devons faire de la place dans cette section. Il n'y a pas assez d'espace pour que tout puisse rentrer. Pour commencer, nous pouvons réduire l'espace entre l'image et le contenu, disons 60 à 30 pixels Ensuite, nous pouvons supprimer ces images de la page. En réalité, tout comme la maquette ci-dessus. Il n'y a aucune raison pour que nous ne puissions pas le faire. Il suffit de définir une marge négative. Ça a l'air plutôt cool en fait. OK, ça ne suffit toujours pas. L'image est trop petite, car le contenu prend beaucoup trop de place et pousse l'image à se rétrécir. Ce que nous pouvons faire ici, c'est définir largeur maximale du contenu afin qu'il ne dépasse pas un certain point. Tout d'abord, renommons cette classe en wrapper de contenu afin de savoir avec quoi nous travaillons Cette classe est partagée entre les trois blocs de contenu. Nous pouvons maintenant donner à l'enveloppe de contenu une largeur maximale d' environ 50 %, ce qui devrait créer un aspect plus équilibré En fait, sur la version de bureau, le contenu devient également un peu volumineux. Je ne l'avais pas remarqué auparavant, mais cette image est un peu trop petite sur les écrans de bureau étroits. C'est bien sur les grands écrans, mais ce serait bien si nous augmentions sur les écrans de bureau plus étroits, comme mon canevas de 992 pixels ici Nous pouvons maintenant définir une largeur maximale de 50 % sur le bureau, car pour les écrans plus grands, elle sera plus large que celle que nous avons actuellement. Je vais simplement augmenter la largeur maximale actuelle en pixels à environ 410 pixels. Cela donne maintenant un peu plus de marge de manœuvre à l'image. Un maximum de 50 % avec, dans ce cas, ce n' est clairement pas suffisant. Augmentons-le un peu afin pouvoir adapter correctement le contenu. Je déplacerais simplement l' image un peu vers la droite pour que la fille soit plus visible. Passons maintenant au portrait mobile. La mise en page ici est déjà verticale. Pourquoi ? Parce que nous utilisons le même conteneur flexible que ci-dessus. Et lorsque nous l'avons stylisé ci-dessus, la même disposition verticale lui a été appliquée. Il suffit d' inverser l'ordre. Nous devons également supprimer la largeur maximale des emballages de contenu Puisque nous voulons que le contenu occupe toute la largeur, cette fois, n'en sélectionnez aucun dans la liste déroulante, il suffit d' ajuster l'image Ici, je vais réduire la marge négative à environ -30 pixels et ajouter un peu d'espace en dessous pour qu'elle ne soit pas collée au titre et zéro pixel sur le côté droit de C'est tout ce qu'il y a de la fluidité, c'est plutôt beau. Appliquons maintenant des ajustements similaires à la deuxième section, commençant par la tablette, car nous n'en avons rien touché. Tout d'abord, l'enveloppe d'image, nous avons besoin des mêmes marges que ci-dessus, mais dans des directions opposées Comme vous pouvez le constater, il y a ce débordement cause de l'image qui sort de la page Nous devons donc appliquer cette classe de combinaison que nous avons déjà pour la section de débordement C'est tout ce que le paysage mobile se porte très bien tout seul. Maintenant, pour le portrait mobile, nous avons besoin exactement du même espacement que sur l'image ci-dessus Le même style n'a pas été conservé sur celui-ci car une classe de combinaison est appliquée à ce wrapper d'images Et les marges gauche-droite sont remplacées par cette classe de combinaison Mais pas la marge inférieure, celle-ci a également été reportée à cet élément. Voilà. Le portrait mobile est superbe. Vérifiez la réactivité. Vérifiez le mode de prévisualisation pour les animations et tout ça. Assurez-vous que tout est en bon état et fonctionne correctement. Dans la vidéo suivante, nous passerons à la section des témoignages 132. Réactif : témoignage et pied de page: La section des témoignages est relativement simple. Pour la tablette, c'est bien comme ça. Il suffit de boire cet espace entre le titre et la diapositive. La moitié devrait être bonne. Le paysage mobile est également très bon. Maintenant, en mode portrait, nous devons modifier la largeur des cartes de témoignage Bien entendu, nous ne pourrons placer qu'une seule carte à la fois. La largeur est définie par l'élément de diapositive. Si nous passons de la valeur en pixels à 100 %, elle sera aussi large que le conteneur parent. Donc, en gros, il s'étire d'un bord à l'autre. Mais ce qui serait bien, c'est de montrer à l'utilisateur qu'il y a plus de témoignages, et qu'il ne s'agit pas d'un seul témoignage qui se trouve ici. Donc, si nous changeons la largeur à 90 %, cela devrait faire apparaître une petite partie de la carte suivante sur l'écran visible. C'est bien, mais le contenu est un peu trop restreint, alors allons-y de l'espace en réduisant les marges et les marges. abord, nous pouvons réduire de moitié la marge sur la droite, pour qu'une plus grande partie de la carte apparaisse à partir de la suivante, ce qui signifie que nous pouvons augmenter la largeur de la diapositive de plus de 90 % à peut-être 95 %. Passons maintenant au rembourrage, et c'est tout. Ensuite, le pied de page. Le pied de page, si vous vous en souvenez, n' a pas été créé à partir de zéro Nous l'avons copié de notre projet précédent. L'avantage de la réutilisation vos composants dans différents projets est Ils sont déjà optimisés. Toutes ces modifications réactives que nous avons apportées au premier projet seront intégrées au composant lorsque vous les copierez dans un autre projet. Inutile de le refaire. Un tel gain de temps. Cependant, nous devons apporter quelques ajustements car nous avons modifié la mise en page du pied de page Comme ce problème d'espacement, par exemple, probablement dans un projet précédent, nous avions un plan légèrement différent pour cela, mais ici, si vous vérifiez la version de bureau, les colonnes sont réparties de manière égale d'un bord à C'est également une très bonne mise en page pour la tablette. Réinitialisons donc le style afin qu'il hérite de la version de bureau Maintenant, dans le paysage mobile, nous pourrions peut-être modifier la justification de nouveau vers la gauche. Les colonnes sont un peu trop éparpillées. Nous pouvons aller plus loin et essayer d'aligner la colonne de l'entreprise sur la colonne d' abonnement ci-dessous. Il suffit de réduire la largeur de la colonne du logo. Et cet alignement le rend plus beau. Dans le portrait mobile, rétablissons la largeur de la première colonne à sa taille d'origine car il y a de l'espace et le slogan est plus beau sur deux lignes. La colonne d'abonnement est désormais enterrée en bas du pied de page Ce n'est pas vraiment le meilleur arrangement. Il serait préférable de le placer en haut, car personne ne se donnera la peine faire défiler vers le bas Maintenant, voici à quel point Flexbox est génial. Flexhil possède son propre ensemble de paramètres. Certains paramètres de taille permettent à chaque enfant de remplacer les paramètres généraux de taille de la boîte flexible, et nous pouvons également annuler l'alignement et Donc, si nous changeons l'ordre de notre dernière colonne, nous pouvons la créer en premier. Mais nous ne le voulons pas exactement d'abord. Nous préférerions qu'il soit placé après la colonne du logo. Mais ne vous inquiétez pas, nous pouvons le faire aussi. Il suffit de donner à la colonne du logo le même style de commande, et elle réapparaîtra en haut. Lorsque vous effectuez cette opération, assurez-vous qu' une classe de combinaison est appliquée. Sinon, cette modification s'appliquera à chaque pied ou colonne, et cela ne donnera pas les résultats escomptés. Je n'ai rien appliqué car nous avions déjà des classes combinées sur ces première et dernière colonnes. Très bien, vérifions la réactivité. OK, nous avons un problème de débordement avec le champ e-mail. La largeur fixe de 267 pixels est trop importante sur ce petit écran. Ainsi, au lieu de fixer, nous pouvons passer à une largeur maximale de 267 et modifier la valeur fixe à 100 %, sorte qu'elle s'étire lorsqu'il y a de l'espace. Un excellent. Oh, ça a l'air bien maintenant. C'est ça. La page d'accueil est terminée, et elle sera superbe, quel que soit l'appareil ou la taille de l'écran. Dans la section suivante, nous allons créer un blog , créé par un CMS web low super puissant, et nous allons tout apprendre à ce sujet. Ça va être amusant. Restez dans les parages. 133. 126 CMS: Jusqu'à présent, nous avons créé un site Web statique par opposition à un site Web dynamique. Cela ne vous dit probablement pas grand-chose. Laisse-moi t'expliquer. Supposons que nous ayons une page d'article pour notre blog. Lorsque nous avons besoin d'un nouvel article de blog, nous pouvons simplement dupliquer cette page et en modifier le contenu, sans problème. Et si, à un moment donné, nous décidions de modifier la mise en page de ce modèle de page d' article ? Eh bien, pas de problème. Nous pouvons copier ces modifications sur la deuxième page de l'article. Et lorsque vous avez 100 pages d'articles, vous êtes prêt à abandonner votre carrière de concepteur de sites Web. Il s'agit d'un contenu statique. Chaque page est indépendante l'une de l'autre et le contenu de cet article de blog n'existe que sur cette page en particulier. Entrez du contenu dynamique. Cette fois, le contenu ne se trouve pas dans chaque page Il se trouve désormais dans la base de données, bien organisé, un peu comme dans une feuille de calcul Ensuite, n'importe où sur le site Web, nous pouvons référencer n'importe lequel de ces éléments de base de données et les extraire pour les afficher sur la page. Cette base de données s'appelle CMS, abréviation de Content Management System. Je connais un nom très sexy avec un contenu dynamique. Nous n'avons qu'un seul modèle de page d'article, une page principale. Dans cette page principale, nous pouvons référencer ces éléments de base de données chaque fois qu'une page d' article est chargée. Webflow extraira le contenu approprié pour chaque élément. Maintenant, si nous apportons des modifications à cette page maître, elle se reflétera instantanément sur toutes les autres pages, même si nous en avons 5 000. C'est la puissance du Webflow, CMS et du contenu dynamique Nous allons tout apprendre à ce sujet dans cette section. Comment créer des éléments CMS, comment créer des pages maîtres, comment référencer le CMS , etc. Restez dans les parages. 134. Blog et CMS : Webflow CMS: Avant de commencer à concevoir et créer notre page d'articles de blog principal, nous devons d'abord créer une base de données pour notre blog. Cela se produit à partir du CMS Webflow, auquel nous pouvons accéder ici Il existe un lien vers des didacticiels vidéo de Webflow. Ils ont cet endroit sur le site Web appelé Webflow University Il contient un excellent contenu, couvre tous les aspects de Webflow Je recommanderai certainement de vous y familiariser. Ils ont à la fois des vidéos et des articles écrits. Le CMS ou la base de données de contenu de notre site Web est donc décomposé en ce que l'on appelle des collections. Imaginez une collection sous la forme d'une feuille de calcul indépendante. Supposons que si nous avions un très grand site Web comme EU Demi, nous aurions une feuille de calcul pour tous les cours, une feuille de calcul pour tous les articles de blog, une feuille de calcul pour toutes les pages d' aide et de support, etc. Créons notre première collection et voyons ce qui se passe. Dans notre projet, nous avons besoin d'une collection pour les articles de blog. C'est là que nous conserverons nos articles de blog avec les titres, les images, les tags, etc. Nous avons ici quelques options pour nommer la collection, quelques paramètres, une partie importante création de champs qui feront partie de cette collection. Encore une fois, considérez cela comme une feuille de calcul. Lorsque vous en créez une nouvelle, elle est vide, vous devez donc ajouter de nouvelles colonnes, n'est-ce pas ? Et vous allez donner un titre à ces colonnes comme le titre, balises du corps, le Ral de l'image, etc. C'est essentiellement ce dont il s'agit, et chaque ligne fait partie d' un groupe qui publie un article de blog particulier. Webflow propose ici des modèles de collection. C'est pour nous aider à démarrer certaines collections communes que nous pourrions créer. Inutile de dire que le premier est un article de blog, probablement la collection la plus courante pour tout le monde Une fois que vous aurez cliqué dessus, Webflow créera une nouvelle collection avec certains éléments nécessaires pour nous aider à démarrer Passons en revue chacune d'elles et modifions-les selon nos besoins pour notre blog. Tout d'abord, nous avons le nom de la collection. Ce n'est pas grave, comme vous le dites. Il est interne et n'est pas visible par le public. Webflow l'a appelé article de blog, que nous pouvons conserver. Vient ensuite l'URL de la collection. C'est ainsi que l'URL de chaque bloc de publication sera structurée, comme le montre l'exemple ci-dessous, c'est le mot qui vient juste après le domaine. Ici, je préfère utiliser le mot blog. C'est beaucoup plus précis que le mot « post ». Il est un peu plus courant d' utiliser un blog plutôt qu'un article. Et maintenant, les choses importantes. C'est de cela que sont faits chacun de nos articles de blog. Chaque champ est un type de contenu. Il existe de nombreux types de contenus. Par exemple, il y a du texte brut, du texte enrichi, préoccupez-vous de cela plus tard. Il y a une image, une couleur, un interrupteur pour activer ou désactiver quelque chose. Regardons notre article de blog et voyons de quel type de remplissage nous avons besoin Donc d'abord, nous avons un titre, non ? Dans Webflow, c'est le même que le nom du billet de blog. Eh bien, ce n'est pas exactement pareil, mais nous pouvons en faire un titre et faire en sorte que le nom et le titre soient identiques Le texte d'aide ci-dessous est destiné à nous et aux membres de l'équipe qui vont créer de nouveaux blocs de publications. Inutile de mettre quoi que ce soit ici. Le titre dit tout. Ensuite, nous avons un auteur et une date. Nous nous occuperons de l'auteur plus tard. Pour la date, nous n'avons en fait pas besoin d'ajouter de champ supplémentaire. Chaque nouveau bloc de publication que nous créons sera accompagné d'une date de création. C'est pourquoi il n'est pas inclus dans cette liste de champs. Passons au suivant, nous avons l'image principale d'un bloc de posts. Webflow a déjà inclus ce champ. Nous pouvons le déplacer en haut après le titre pour suivre la commande L'ordre n'a pas vraiment d' importance. C'est juste pour nous. Ensuite, dans notre blog, nous avons le corps de l'article. Grablo a également inclus un champ pour cela. Ce champ contient de véritables options supplémentaires, minimum et un maximum de caractères. C'est le cas si nous devons ajouter une sorte de limitation au contenu de notre blog. Je dirais que ce n'est pas nécessaire. Enfin, encore une fois, nous avons un auteur qui, cette fois, a un peu plus d'informations à ce sujet. Nous nous occuperons de l'auteur plus tard. Nous allons créer une collection séparée pour les auteurs. Le résumé des articles ne se trouve pas vraiment sur notre page de blog, mais nous en aurons besoin sur la page d'accueil de notre blog où nous affichons tous nos articles de blog sous forme de cartes. Dans le résumé de la publication, il est conseillé de limiter le nombre de caractères. Les cartes ont une mise en page très stricte, nous ne voulons donc pas que le résumé soit trop long. Dans nos conceptions, nous avons utilisé un résumé de trois lignes maximum. Cela fait environ 140 caractères. Maintenant, pour ce qui est de l'image miniature, elle figure sur la carte de blocage. Nous pouvons avoir cela comme champ indépendant ou nous pouvons simplement réutiliser la même image principale. Nous simplifierons la création de nouveaux articles de blog et réduirons le nombre de choses à télécharger. Fonctionnalité et couleur, nous n'en avons pas vraiment besoin dans ce cas, alors débarrassons-nous d'elles. Et voilà. Nous avons quatre champs qui constitueront chacun de nos blocs de publications. Sur le côté droit, nous avons un aperçu de l'éditeur qui montre les quatre champs que nous avons dans notre collection. Ce formulaire est ce que nous remplirons chaque fois que nous souhaiterons créer un nouvel article de blog. OK, cliquez sur Créer une collection pour terminer cette étape. Et c'est tout. Notre base de données d'articles de blog est maintenant prête. Donc, pour récapituler, nous avons la possibilité d' ajouter une base de données à notre site Web En d'autres termes, un CMS, un système de gestion de contenu. Dans cette base de données, nous avons la possibilité de créer de nombreuses collections différentes. Les collections sont des sortes de feuilles de calcul qui contiennent tout le contenu qui en fait partie Par exemple, un article de blog. Il s'agit d'une collection et de tous les articles de blog regroupés dans une seule feuille de calcul Chaque article de blog est composé d'un certain contenu tel que le titre, l'image principale et le corps de l'article Ces champs sont appelés champs de collecte, et nous avons le contrôle total sur ce que nous ajoutons et sur ce que nous supprimons. Dans la vidéo suivante, nous allons ajouter de nouveaux blocs de publications à notre CMS. Cochez autour de vous. 135. Blog et CMS : éléments CMS: Notre base de données pour Block post est prête. Nous pouvons maintenant commencer à créer et à ajouter de nouveaux articles de blog. Pour revenir à la collection Block Post, cliquez sur le CMS puis sur Block Post. Assurez-vous de ne pas cliquer sur l'icône en forme de roue dentée, cela vous amènera à l' endroit où vous pouvez modifier les paramètres. C'est un endroit pour ajouter de nouveaux articles de blog, mais cela peut également être fait depuis l'éditeur Nous pouvons ajouter de nouveaux messages de blocage à partir de ce bouton bleu. Webflow a en fait cette option pour générer du contenu factice pour nous Donnez-lui quelques secondes et vous l'aurez. Si vous cliquez sur l'un d'entre eux, vous ouvrirez le billet de blog. Ici, nous pouvons voir tous les champs que nous avons créés précédemment. Cette fois, le tout est rempli de contenu factice généré par Webflow pour nous Il y a un titre et une image principale. Nous avons le corps du message et le résumé du message. Tout cela est modifiable même après la publication et la mise en ligne de notre publication Créons un nouvel article de blog à partir de zéro afin de comprendre le fonctionnement de chacun de ces domaines Nous pouvons utiliser le contenu de nos designs. Alors allons-y et remplissons chacun de ces champs. Lorsque vous entrez le titre, il est automatiquement utilisé comme URL Si vous voulez avoir quelque chose de différent pour l'URL, pas de problème. Vous pouvez modifier cette URL ici. Je garde les titres et les URL toujours les mêmes. C'est juste plus logique de cette façon. Ensuite, nous avons l'image principale. Et je vais télécharger cette image ici. Maintenant, le corps de la poste est un type de film spécial. C'est ce qu'on appelle le texte enrichi. Nous pouvons mettre des titres dans le texte, les sous-titres, les images, les vidéos, les citations, les puces, etc. Nous avons différents types de titres. Nous avons des images. Nous n'avons pas besoin de fichiers individuels pour tout cela. Un seul fichier de texte enrichi peut prendre en charge tout le contenu de cette manière Et dans ce champ de texte enrichi, nous avons toute la liberté de styliser le texte de différentes manières ou d' ajouter des vidéos YouTube juste entre les textes. Cet événement comporte des commandes de mise en page pour afficher la vidéo dans de nombreuses positions différentes. Bien que le résultat final ne soit pas vraiment ce à quoi ressemblera le résultat final, celui-ci dépend de la façon dont nous stylisons ce bloc et nous en parlerons plus tard. Enfin, nous avons un champ de résumé des articles, qui est le suivant. Cliquez sur Créer pour l' ajouter à la base de données. Le statut indique que ce message est prêt à être publié. Cela signifie que la prochaine fois que nous publierons notre site Web, tous les articles de blog en attente seront mis en ligne. Mais dans notre cas, ils n'iront nulle part car nous avons simplement créé une base de données. Nous n'avons pas créé de page de blog qui va extraire ce contenu de la base de données. C'est ce que nous allons faire dans la prochaine vidéo. 136. Blog & CMS : page Collection: Nous avons donc créé une base de données pour notre blog, et c'est cool. Mais où est-ce visible sur notre site Web  ? Où sont ces articles de blog à part fait qu'ils sont cachés quelque part dans Webflow ? Eh bien, pour l'instant, nulle part, mais dans les prochaines vidéos, nous allons les mettre en lumière. Dès que nous créons une nouvelle collection dans le CMS, une nouvelle page est automatiquement créée dans le panneau Pages. En haut, il y a des pages statiques. C'est là que se trouvent nos pages d'accueil et toutes les autres pages que nous créons et qui ne font pas partie du CMS En bas, nous avons cette page appelée pages de collection CMS. Il s'agit de pages maîtres qui peuvent être renseignées par le contenu dynamique de la base de données. À l'heure actuelle, nous avons une page, un modèle de billet de blog. Je l'appelle un MasterPage Webflow, c'est un modèle. Je préfère en quelque sorte que Master Page ait plus de sens. Chaque collection CMS reçoit une page de ce type. heure actuelle, elle est complètement vide, comme toute autre nouvelle page que nous créons. Mais cette page va devenir notre page d'article de blog à partir de nos designs. Elle fonctionne de la même manière que n'importe quelle autre page statique avec une seule différence. Nous pouvons lier des éléments aux éléments de la base de données. Laisse-moi te le démontrer. Par exemple, nous avons un titre sur notre article de blog, n'est-ce pas ? Ajoutons un titre. Si nous écrivons du texte nous-mêmes dans ce titre, ce contenu sera statique, comme n'importe quelle autre page Mais comme il s'agit d'une page CMS, nous avons une option supplémentaire dans les paramètres de ce titre, un point violet à côté du champ de texte Lorsque vous cliquez dessus, vous verrez quelque chose de familier. Certains champs des paramètres de collection. Un gros titre de l'été à quelques dates. Comme il s'agit d'un titre, nous pouvons sélectionner le titre. tour est joué. Désormais, cet élément de titre n'est plus statique, il est dynamique et extrait du contenu de la base de Permettez-moi d'ajouter les deux autres champs, l'image et le corps du message. Tout comme nous l'avons fait pour le titre, pour l'image, nous devons ajouter un élément d'image Nous ne pouvons pas remplir un élément de titre avec une image ou un DVBlog avec un Les types de champs et d'éléments doivent correspondre. Eh bien, ne correspondez pas exactement, mais soyez compatibles. Par exemple, le champ de titre de notre CMS est du texte brut, compatible avec tout type d'élément de texte, qu'il s' agisse d'un titre, d'un bloc de texte ou OK, donc la même chose que nous allons faire avec l'image, cliquez sur Paramètres de l'image, puis sur ce point violet. Ici, nous n'avons qu'une seule option, l'image principale, car c'est le seul champ de notre base de données compatible avec l' élément image, ce qui est logique. Dès que je sélectionne le champ d'image principal, il lie et extrait le contenu de la base de données. Permettez-moi de le réduire un peu. Ajoutons le dernier élément du CMS, le corps du message. Ce champ du CMS est un champ de texte enrichi. Nous n'avons jamais eu à utiliser d'éléments de texte enrichi jusqu'à présent, et je peux maintenant lier cet élément de texte enrichi au champ du corps du message dans notre base de données. Et voilà. Il est instantanément rempli avec le contenu contenu dans le CMS. Maintenant, cette image de titre et texte font partie du même article de blog Lequel montre ici n'a pas vraiment d'importance. Une fois cette page publiée, tous ces articles seront mis en ligne et chacun d'entre eux publiera tous ces articles seront mis en ligne et chacun son propre titre, sa propre image et son propre texte la barre d'outils supérieure, nous avons cette option pour parcourir les différents articles de blog et voir à quoi ils ressemblent le moment, tout est assez moche, mais nous allons personnaliser et créer notre page comme d'habitude. contenu dynamique n'affecte pas la façon dont nous concevons la page. Donc, pour récapituler, pour chaque collection que nous créons dans la base de données CMS, Webflow crée automatiquement une page pour celle-ci Cette page, contrairement aux autres pages, est une page dynamique. Il a la capacité de se lier aux champs de la base de données et d'en extraire le contenu. Seuls les champs et éléments compatibles peuvent être liés entre eux, par exemple les champs d' image avec des éléments d' image ou champs de texte brut avec tout type d' élément de texte tel qu'un titre, blog de texte, un lien, etc. Dans la vidéo suivante, nous allons commencer à créer et à styliser cette page d'article de blog. 137. Blog et CMS : barre de navigation et titre: R Dans cette vidéo, nous allons commencer à créer notre page d'articles de blog. Pour accéder à cette page, vous allez dans le panneau des pages, et en bas, vous avez cette page avec une icône violette. C'est celui-là. J'ai déjà ajouté tout ce contenu ici, mais je vais m'en débarrasser complètement et repartir de zéro. Donc, sur la base de nos conceptions, la première chose dont nous avons besoin est une barre de navigation. Nous n'allons pas le construire à partir de zéro, évidemment. Nous le copierons depuis notre page d'accueil et nous le reprendrons à partir de là. Revenez donc à la page d'accueil, sélectionnez l'élément complet de la barre de navigation Assurez-vous de sélectionner le tout et pas seulement le conteneur, cliquez sur Ctrl C, puis revenez à la page de blocage et collez-la à cet endroit. Lorsque vous collez un objet, cliquez d'abord sur le canevas ou vous recevrez ce message d'erreur. Webflow doit savoir où exactement vous collez votre élément Nous y voilà. Eh bien, rien n'est visible le moment car notre barre de navigation est blanche Nous allons donc simplement styliser les éléments notre barre de navigation, comme dans nos designs En commençant par les liens, pour le moment ils sont blancs, nous devons donc les faire sombres. Pour ce faire, nous devons d'abord appliquer une classe de combinaison, puis lui donner un style. Sinon, cela changera les deux originaux sur la page d'accueil. Ensuite, appliquez la classe de combinaison au reste des liens. Pareil pour le bouton de navigation, nous avons besoin d'une classe de combinaison supplémentaire. L'arrière-plan du bouton est notre bleu principal avec une opacité de 15 % Enfin, le logo, que nous devons exporter depuis FIGMA. Il est collé sur les bords. Sur notre page d'accueil, la barre de navigation se trouve dans la section héros, qui est rembourrée C'est pourquoi il n'y est pas collé sur les bords. Mais ici, c'est en dehors de cette section. Nous pourrions également le mettre dans la section ici, mais une meilleure option consiste simplement à créer une classe combinée pour le Nabbar et à ajouter du rembourrage directement dessus Et c'est tout, la barre de navigation est prête. Passons au reste de la page de blocage, nous avons un titre, une image, le contenu Comme d'habitude, nous allons commencer par une section et un conteneur. La section est grise. C'est ce que nous utilisons sur la page d'accueil. Mais pour le bloc, nous avons décidé d'opter pour le blanc uni. Le truc avec Block Post, c'est que vous voulez une lisibilité maximale contenu est long, et si le contraste n'est pas suffisant ou s'il y a une sorte de diminution de la lisibilité pour une autre raison nous fera vraiment mal Créer une section blanche est simple, il suffit d'ajouter une nouvelle classe de combat, et c'est tout. Assurez-vous d'utiliser un autre nom, préférence un nom spécifique à la classe de base, comme une section blanche. Cela en dit beaucoup plus que le blanc, et nous veillons à ce que cela n' entre en conflit avec aucune autre classe. Je vais bien. Maintenant, ajoutons un titre. Nous savons déjà quoi faire avec ce titre, non ? Nous allons le lier à l'élément CMS. Excellente. Les limites de notre bloc de poteaux dans les dessins sont un peu différentes. Nous utilisons une mise en page plus étroite avec une largeur maximale de 700 pixels. Et la largeur maximale de notre conteneur générique ici est de 1160 pixels. Cela signifie que nous devons créer un conteneur différent pour notre article de blog. Donnons-lui donc une classe combinée ou peut-être même dupliquons la classe et donnons-lui une largeur maximale de 700 pixels. D'accord, ça a l'air bien. Ensuite, nous avons l'auteur et le segment de date, mais nous allons le faire dans la prochaine vidéo. 138. Blog et CMS : blocage d'auteur: Dans cette vidéo, nous allons créer cette ligne d'auteur et de date sous le titre Je pense que l'approche la plus simple serait d'utiliser une boîte flexible pour cela Ajoutons un nouveau bloc MTD et attribuons-lui l'auteur et la date de la classe Ajoutons ensuite une image. Ensuite, nous avons besoin d'un nom pour l'auteur. Ajoutez un blog textuel normal. Donnez-lui un nouveau cours. Personnalisez-le comme Figma. I Nous devons remplacer la propriété d' alignement de la boîte flexible quelque chose comme le centre Ensuite, nous avons ce diviseur. Nous pouvons utiliser un crochet pour cela ou simplement styliser un diblock avec une largeur et une couleur de fond Mais je pense que le crochet linéaire est plus facile. Je pense que c'est ce que nous faisons dans Side fix M de toute façon. Nous avons juste besoin d'une couleur différente pour cela. Et puis la date, réutilisons simplement le même blog de texte du même auteur et gardons même la même classe La date est la date de publication de cet article de blog en particulier. Nous pouvons déjà le lier au CMS. Nous n'avons pas eu à créer le champ de date car chaque élément du CMS l'accompagne. Nous avons même trois options de date différentes ici. Dans ce cas, nous avons besoin de le publier, mais comme vous pouvez le constater, il disparaît. C'est parce que nous n'avons pas encore publié notre site Web ni aucun article de blog, ce champ de date est donc vide. Utilisons un autre champ de date, peut-être créé ou mis à jour, et plus tard, nous pourrons le redéfinir pour publier. Ou qu'il en soit ainsi. La mise à jour est également un indicateur de date assez décent. Avec les dates, nous avons même la possibilité de modifier le format des dates. Cela sera important en fonction de l' endroit où vit notre public cible. Enfin, ajoutons une marge au-dessus du tout pour le séparer du titre Très bien, tout ça a l'air super. Maintenant, voici le truc. Cet auteur que nous venons de créer est un contenu statique. Lorsque nous publierons nos articles de blog, ils auront tous le même auteur, mais ce n'est pas vrai, n'est-ce pas ? Pour un blogueur indépendant, bien sûr, c'est toujours le même auteur, mais pour le site Web d'une entreprise, il y aura toujours plus d'une personne qui créera des blogs pour le site Web. Nous avons également besoin que ces informations sur l'auteur soient dynamiques, mais nous n'avons pas créé de champs CMS pour cela, nous ne pouvons donc pas encore les lier à la base de données. que nous allons faire dans la prochaine vidéo. 139. Blog et CMS : champ de référence: Comme nous l'avons indiqué précédemment, les éléments d' auteur sont actuellement statiques, même image d'auteur et le même nom pour chaque article de blog, même s'il y avait 5 000 articles en bloc. Nous devons transformer les auteurs en contenu dynamique. De cette façon, nous aurons plusieurs auteurs et en choisirons un pour chaque bloc de publication. Il existe deux manières de transformer l'auteur en contenu dynamique. La première consiste à ajouter un avatar et un nom d'auteur sous forme champs à notre collection d'articles de blog existante , quelque chose comme ceci. Ensuite, chaque fois que nous créons un nouvel article de blog, nous aurions la possibilité de télécharger l'image de l'auteur, le nom ou toute autre information relative à l'auteur. Ensuite, nous liions ces champs sur notre page et c'est fait. Mais cela signifie que pour les nouveaux articles de blog, nous devrons saisir les informations de l'auteur, télécharger une image, mettre son nom. Si vous voulez leur biographie ou d'autres informations, alors tout cela aussi, et répétez le même processus pour le prochain article, même si l'auteur est le même. Heureusement, il existe une autre option. Nous pouvons créer une collection séparée pour Aors. Comme nous l'avons fait avec le billet de blog, nous pouvons créer une base de données CMS pour les voitures laquelle nous enregistrerions toutes les aors avec leur profil, photos, leurs noms, leurs biographies, leurs coordonnées et toute autre information Ensuite, nous pouvons extraire toutes ces informations de la base de données dans nos articles de blog. Très bien, créons donc une nouvelle collection pour les auteurs Cliquez ici pour créer une nouvelle collection. Webflow propose également un modèle pour les auteurs, mais nous n'allons pas utiliser le modèle cette fois-ci, et nous ajouterons des champs à partir de zéro afin que vous puissiez mieux comprendre comment cela fonctionne Donc, pour commencer, il nous faut un nom. Tout fonctionne ici, c'est interne. Bien que l'URL soit automatiquement préremplie avec le même nom, nous pouvons changer cela L'URL est publique, et peu importe ce que nous y mettons. J'aime utiliser une forme singulière pour l'URL , car elle donnerait alors quelque chose comme les auteurs John Smith, et cela a plus de sens que les auteurs au pluriel Pour les champs, de quoi avons-nous besoin ? Évidemment, le nom qui y figure déjà. Ensuite, nous avons un avatar ou, en d'autres termes, une photo de profil. Et également au bas de notre article de blog, le segment des auteurs contient également une petite biographie Ajoutons ces champs. Lorsque nous ajoutons un nouveau champ, nous devons choisir de quel type de champ il s'agit, le champ et les informations en seront affectés. Dans ce cas, nous allons créer un champ pour l'avatar, donc il s'agira évidemment d'un type d'image. Nous pouvons rendre ce champ obligatoire. Ainsi, chaque fois que nous ajoutons un nouvel auteur, nous nous assurons qu' une photo de profil est toujours téléchargée. Ensuite, biographie de l'auteur, assez simple. Encore une fois, un texte brut. Nous avons une option pour un champ à une ou plusieurs lignes. Vous pouvez voir comment le champ change en mode aperçu avec plusieurs lignes, et cela dépend de l'entreprise, mais nous pourrions fixer un nombre maximum de caractères pour la biographie. C'est une bonne idée. Ainsi, nous n'aurons pas un auteur avec une biographie deux pages et une autre d' une phrase. Et créez une collection. C'est ça. Si nous devons modifier ou ajouter d'autres champs à cette collection, pas de problème. Nous pourrons toujours le faire plus tard. Enfin, demandons à Webflow d'ajouter des objets factices à cette collection Il peut parfois avoir besoin d'un petit rafraîchissement pour apparaître. C'est bon, notre collection est prête. Connectons-le à nos éléments sur notre page. Sauf que nous pouvons le faire maintenant. Il n'y a aucune option pour l' avatar et le nom de l'auteur. Pourquoi ? Parce qu'il s'agit d'une collection totalement indépendante qui n' a encore rien à voir avec le blocage des publications. Nous devons donc créer une sorte de lien entre ces deux collections, et cela se fait par le biais de champs de référence. Il s'agit simplement d'un autre type de champ dans la collection. Revenons à la collection d'articles de blog. Cliquez sur l'icône de réglage, et nous allons ajouter un nouveau champ. Et choisissez un type de référence. Maintenant, ce type d' élément nous permet d'extraire des informations d' une autre base de données, dans notre cas, la collection de l' auteur. Et dans une liste déroulante, sélectionnez une collection appropriée, à savoir les auteurs Rendez-le obligatoire et enregistrez et sauvegardez également la collection. Passons maintenant à l'un des articles de blog, et vous verrez que nous avons un nouveau champ qui est une liste déroulante pour les auteurs Et cette liste déroulante examine la base de données d' Aors et extrait des informations de cette base de Nous n'avons donc pas besoin de télécharger les informations relatives à l'auteur chaque fois que nous créons un nouvel article de blog. Passons en revue tous les articles de blog et choisissons un auteur pour chacun d'entre eux. Maintenant, lorsque nous reviendrons à notre page principale pour le billet de blog, nous aurons plus d'options dans les paramètres de reliure. Il y a une toute nouvelle section avec des champs de la collection de l' auteur Encore une fois, ces champs ne sont affichés que pour les éléments compatibles. Avatar n'est pas ici, mais Avatar est certainement disponible pour l'élément image. Sélectionnez ici le nom de l'auteur et l'avatar de l'image. Maintenant, lorsque nous passons d'un article de blog à un autre, les auteurs les mettent à jour en conséquence. Il y a cependant un problème avec l'avatar, mais nous allons nous en occuper dans la prochaine vidéo. 140. Blog et CMS : Object Fit: Nous nous sommes arrêtés là où l'avatar n'est pas à son meilleur. Cela est dû au fait que nous n'avons pas stylisé l'image de manière à ce qu' elle soit identique quel que soit le type de photo que nous téléchargeons heure actuelle, il change de forme en fonction de l'image elle-même. L'image que nous avions auparavant de Figma était déjà ovale et de bonne taille C'est pourquoi aucun style n' était requis. Sans un style approprié, nous devrions télécharger des images déjà recadrées et ovales Et laisser cela aux créateurs de contenu et aux clients n'est pas une bonne idée. Tout d'abord, cela ajoute du travail supplémentaire. Ensuite, nous devrions leur apprendre à faire un recadrage ovale, ce qui laisse beaucoup de place à l'erreur. Le mieux est de styliser notre espace réservé aux images de manière à ce qu'il soit esthétique, quelle que soit l'image insérée Tout d'abord, faisons-le ovale. Pour ce faire, nous arrondissons les coins de la frontière. Ensuite, nous avons besoin qu'il ait la même largeur et la même hauteur. Nous pouvons appliquer cette valeur dans les paramètres de l' image ou dans le panneau Styles. accord, la forme est bonne, mais si vous remarquez que l' image à l'intérieur est étirée, c'est le cas pour toutes les images qui n' ont pas les mêmes dimensions. Cela signifie si la largeur et la hauteur du fichier image d'origine ne sont pas de la même taille. Alors, comment résoudre ce problème ? CSS et Webflow ont une propriété pratique pour cela appelée object fit. Dans Webflow, il est raccourci pour s'adapter simplement. Tout ce que nous avons à faire ici est de demander une couverture dans le cadre de cette propriété adaptée. Ces paramètres sont assez similaires à ceux que vous voyez dans les styles d'arrière-plan. couverture ici fonctionne exactement comme elle fonctionne dans les images d'arrière-plan. L'image couvre tout l'espace de cet élément et la quantité excédentaire est simplement recadrée Cela a même les mêmes paramètres de position, tout comme les styles d'arrière-plan au cas où vous auriez besoin de changer de position. Mais dans notre cas, nous avons besoin que ce soit centré. Nous avons maintenant la meilleure solution, qui fonctionnera avec toutes les formes et formes d'image. Les créateurs de contenu sont libres de télécharger ce qu'ils souhaitent. Et tout cela se fait avec un en-tête de notre article de blog. Restez dans les parages pour le reste. 141. Blog et CMS : image principale: Dans cette vidéo, nous allons ajouter l'image principale et à nouveau lier à un champ CMS. Bien que cette image soit plus large dans nos designs, elle est plus large que le contenant du contenu. Il fait 900 pixels au lieu de 700. Cela signifie que nous ne pouvons pas placer cette image dans le même conteneur qu'un titre Nous avons besoin d'un autre contenant pour cela. Nous allons donc ajouter un nouveau conteneur, lui donner une nouvelle classe et y déplacer l'image. Je suis là maintenant, c'est à peu près juste. Dans nos designs, l'image a une certaine hauteur, ce qui la rend plus agréable. Et pour le moment, il ne fait que croître et diminuer en fonction de l'image d'origine Cela va créer une mise en page qui n'est pas uniforme et, dans certains cas, très étrange. Par exemple, si nous téléchargeons une grande image verticale, cela occupera une trop grande partie de la page en poussant le texte vers le bas. C'est, encore une fois, le même problème que nous avons rencontré avec l'avatar de l'auteur. Comme la dernière fois, nous pouvons résoudre ce problème en utilisant la propriété object fit. abord, nous devons donner à cette image la largeur et la hauteur que nous désirons. Pour la hauteur, c'est 450 pixels. R Mais que faisons-nous pour la largeur ? Nous ne pouvons pas lui donner 900 pixels car ce n'est pas toujours 900. Lorsque l'écran rétrécit, nous avons besoin qu'il rétrécisse. Maintenant, techniquement, nous pouvons faire car l'image a déjà un paramètre par défaut de 100 % de largeur maximale, elle continuera donc à rétrécir. Mais je préfère utiliser une valeur relative et lui donner 100 % de largeur. Cela rendra l'image aussi large que le parent, qui dans ce cas est notre conteneur de blocs modifié. Comme cela s'est produit avec les avatars, nous obtiendrons cette image déformée car nous modifierons le rapport hauteur/largeur de l'image d'origine, ce que nous allons facilement corriger en modifiant l'ajustement par rapport à Parfait. C'est désormais uniforme pour tout type quelle que soit la forme ou la taille de l'image, et la position et les dimensions seront les mêmes, et le résultat sera tout simplement superbe. Enfin, ajoutez simplement une marge supérieure à l'image pour qu'elle corresponde au design. C'est ça. Ensuite, nous allons travailler sur le corps. Restez dans les parages. 142. Blog et CMS : texte enrichi: Ensuite, nous devons ajouter le corps du message. L'ajout de ceci est relativement simple. Il suffit de faire glisser un élément de texte enrichi. Pourquoi du texte enrichi ? Parce que c'est le type de champ dans le CMS. Nous devons l'ajouter dans un autre conteneur. Le conteneur d'images étant plus large que les autres, nous avons besoin du même conteneur que celui que nous avons créé ci-dessus pour l'en-tête et y déposer du texte enrichi. C'est bon, c'est mieux. Et ajoutons une marge inférieure à l'élément d'image pour créer une séparation. Liez le champ CMS comme vous le faites avec n'importe quoi d'autre. Maintenant, voici une partie amusante. Nous devons apporter quelques modifications de style à notre élément de texte enrichi. Par exemple, faites correspondre la couleur du texte à celle que nous avons dans les dessins. Nous avons décidé d'utiliser une couleur plus foncée dans le design, et nous avons également besoin d'un certain espacement entre les différents paragraphes et les différents textiles Commençons par la couleur. Le moyen le plus évident serait de lui donner une classe et de changer la couleur de police. Cela permet de styliser une partie du texte, mais pas la totalité, surtout pas le texte principal , le paragraphe. Le paragraphe a son propre style, et il est remplacé par la balise HTML paragraphs, que nous avons stylisée dès le début de notre page Le texte enrichi n'étant qu'un élément parent, un paragraphe, qui est un élément enfant, peut remplacer tous les styles du texte enrichi Cela signifie que nous devons mettre en forme le paragraphe directement, mais pour le moment nous n'y avons pas accès. Une fois qu'il est connecté au CMS, nous pouvons sélectionner des éléments individuels à l'intérieur. Nous pouvons le déconnecter du CMS à partir d'ici, mais cela supprime ensuite tout le contenu factice qu'il contenait Nous allons donc simplement garder celui-ci connecté et ajouter un autre texte enrichi statique afin de pouvoir le styliser comme nous le souhaitons. La première chose à faire pour styliser un texte enrichi est de lui appliquer une classe. C'est important et vous verrez pourquoi dans un instant. Commençons par un paragraphe. Si nous mettons en forme un paragraphe comme nous le faisons habituellement, vous verrez que cela n' appliquera la couleur rouge à ce paragraphe en particulier. Et aucun autre paragraphe dans ce bloc de texte en forme de pont. Pour que nous puissions styliser tous les paragraphes à l'intérieur du bloc de texte en arête, nous devons procéder comme nous le faisons habituellement lorsque nous devons styliser tous les paragraphes sur le côté à l'aide de texte. Cliquez en dehors du champ pour sélectionner à nouveau des éléments individuels. Sélectionnez ensuite l'un des paragraphes, supprimez toute classe s'il y en a une et, dans le sélecteur, sélectionnez tous les paragraphes balisés Sous le sélecteur, vous trouverez ce petit message avec une icône plus, sélecteur de réseau à l'intérieur et le nom de votre classe de texte enrichi, quel que soit le nom que vous lui avez donné Si vous ne recevez pas ce message, cela signifie qu'aucune classe n'a été appliquée au bloc de texte enrichi lui-même. Sans la classe sur le blog de texte enrichi parent, vous recevrez ce message à la place. Assurez-vous donc de donner d'abord la classe Rich Text sum, toute classe unique n'a pas d' importance quant au nom que vous lui donnez. Une fois que la classe est présente, la sélection d'une balise vous donne possibilité d'imbriquer la balise dans votre classe de texte enrichi. Cela s'applique non seulement aux paragraphes, mais à tous les types d'éléments contenus dans le bit de texte enrichi, aux en-têtes, aux guillemets, aux éléments de liste, etc. Vous pouvez prendre note de cette vidéo à ce stade si vous souhaitez y revenir plus tard. Voici donc les étapes à suivre. Tout d'abord, assurez-vous que le texte enrichi possède une classe. Ensuite, sélectionnez le paragraphe à l'intérieur de votre texte enrichi. Vous pouvez sélectionner un paragraphe lorsque vous êtes dans le champ de cette façon. Cliquez sur le texte enrichi , puis sélectionnez un paragraphe comme celui-ci ou sélectionnez-le simplement dans le navigateur. N'importe quel paragraphe fera l'affaire. Troisièmement, dans le sélecteur, sélectionnez la balise rose pour tous les paragraphes ne sélectionnez pas cette option, vous ne ferez que mourir un paragraphe individuel. Enfin, cliquez sur cette icône plus pour imbriquer cette balise dans la classe de texte enrichi parent. Voilà à quoi cela devrait ressembler. Avec une flèche indiquant que lorsque vous êtes imbriqué dans le nom de votre classe, sans imbrication, au lieu de tous les paragraphes dans le texte enrichi, vous allez mettre en forme tous les paragraphes sur le côté. Ce n'est pas ce que nous voulons. Cette étape est facile à oublier. Cela m'arrive jusqu'à aujourd'hui. Et maintenant, tu peux te changer de style. Désormais, chaque type de paragraphe peut être stylisé en une seule fois. Même les autres types de textes hériteront du style de paragraphe sauf si vous leur appliquez un style plus spécifique Je sais que le texte enrichi est un peu confus, mais vous vous y habituerez au bout de quelques fois. Si vous supprimez la classe du texte enrichi, vous pouvez constater que tous les nouveaux styles disparaissent. Cela fonctionne donc essentiellement comme un style de classe normal, mais avec un contrôle plus précis des différents types de contenu qu'il contient La couleur rouge restante pour les autres textes provient de la classe principale du texte enrichi, nous pouvons donc la modifier ici. Vous pouvez voir maintenant que toutes ces modifications sont également appliquées à notre texte enrichi dynamique, car il possède la même classe. S'il n'avait pas la même classe, il ne serait pas affecté Ainsi, si votre texte enrichi connecté ne se met pas à jour avec les nouveaux styles, vérifiez qu'il n'a peut-être pas de classe ou qu'une autre classe lui est appliquée. Il contient d'autres types de contenu textuel que nous devons styliser. Pour les styliser, nous devons répéter le même processus. Par exemple, il s'agit d'un texte de type guillemet. C'est un élément intéressant à l'intérieur des blocs lorsque vous souhaitez citer quelqu'un. Nous pouvons donc les mettre en italique différemment, les rendre plus adaptés aux guillemets Plus grande hauteur de ligne, un peu plus d'espace autour. Nous ne pouvons même pas styliser la bordure. Nous pouvons également styliser les images. Par exemple, l'espacement est un peu trop serré autour des images Gardez juste une chose à l'esprit. L'image se trouve à l'intérieur d'un autre objet appelé figure. Il vaut mieux ajouter de l'espacement sur celui-ci. Il comprend également une légende à l'intérieur. Nous pouvons également styliser les puces. Ils sont vraiment petits en ce moment. Je vais le garder de la même taille que le texte du paragraphe. R Nous devons mettre trois titres en H parce qu'en ce moment ils sont blancs Je suppose que nous les avons stylisés en blanc quelque part sur la page d'accueil. Bien, nous n'avons pas besoin de tout changer. Voyons à quoi ressemble le contenu réel. Ajoutez peut-être un peu plus d' espacement pour les deux en-têtes. Tu as vu ce que j'ai fait ici ? J'ai fait une erreur et j'ai oublié d'imbriquer la balise dans la classe Rich Text. Donc, lorsque j'ai apporté les modifications de style, j'ai en fait stylisé les deux titres en H sur le côté. Ce n'est pas ce que je veux. Je vais donc réinitialiser le style, imbriquer le tag en cliquant sur cette icône plus, puis créer un style à partir de zéro. Débarrassez-vous du texte enrichi statique, et c'est tout. Si vous devez revenir et modifier le style, ajoutez simplement un nouveau texte enrichi et appliquez-y votre classe. C'est donc du texte enrichi. C'est peut-être un peu difficile à comprendre au début, mais avec un peu de pratique, vous vous y habituerez. Contrairement aux paragraphes ordinaires, aux titres ou aux manuels, le texte enrichi peut intégrer de nombreux types de contenu. Évidemment, nous pouvons les intégrer à tous les titres que nous avons. Nous pouvons mettre des images, nous avons des vidéos. Nous pouvons citer, mettre points, des chiffres et tout ça. Et dans Webflow, le style des éléments de texte enrichi possède ses propres instructions spécifiques que nous venons de suivre En gros, la première étape consiste à attribuer une classe au texte enrichi. Il a donc une classe très spécifique, non ? Il faut d'abord mettre en forme ce texte enrichi en particulier, n'est-ce pas ? Vous ne pouvez donc pas dire en gros que chaque texte enrichi de cette page paragraphe, dans tous ces blocs de remplissage de texte enrichi aura ce type de style spécifique. Au lieu de cela, vous dites qu'un texte enrichi avec ce style particulier est , disons, un texte riche super sympa. Les paragraphes de ces classes seront toujours ainsi. C'est ce que tu es en train de faire en réalité. Dans un deuxième temps, vous sélectionnez le tag approprié. Ainsi, lorsque vous souhaitez, par exemple, mettre en forme un paragraphe, vous sélectionnez tous les paragraphes, n'est-ce pas ? Ensuite, à la troisième étape, vous sélectionnez cette option d'imbrication En gros, vous dites que je ne stylise pas tous les paragraphes du site Web. Je stylise les paragraphes imbriqués dans cette classe, n'est-ce pas ? Vous dites : OK, c'est le cours. Et si j'applique cette classe à un texte enrichi, chaque fois que cela se produira, tous les paragraphes qu'il contient seront comme ça. Voilà donc les champs de texte enrichi, style et leur utilisation. L'exemple que j'ai donné se trouvait dans le CMS et dans le billet de blog. Il s' agit généralement d'un endroit où nous utilisons du texte enrichi, comme un blog ou un article. Donc, la plupart du temps, nous l' utilisons dans le CMS. Cependant, cela ne signifie pas que nous ne pouvons pas l'utiliser dans d'autres pages statiques ordinaires. l'ensemble du style, tout fonctionne exactement de la même manière, et vous pouvez l'ajouter à une page normale et leur donner exactement les mêmes instructions. Les instructions sur la façon de styliser un texte enrichi n'ont donc rien à voir avec un CMS. C'est ainsi que fonctionne Rich Text. 143. Blog et CMS : Bloc d'auteur inférieur: Et en continuant là où nous nous sommes arrêtés, nous devons maintenant ajouter le bloc d'auteur inférieur. C'est assez simple. Commençons par le nouveau bloc DV, que nous allons transformer en flexbox et ajouter un peu d'espacement Maintenant, pour ce qui est de l'image de profil de l'auteur, copions simplement celle du haut afin d'avoir moins de modifications à apporter. Nous avons maintenant besoin de quelques blocs de texte, mais nous allons les placer dans un autre bloc de jour afin qu'ils soient soigneusement regroupés sur le côté droit de la photo Connectez le texte au CMS. Ensuite, il suffit de les styliser individuellement. Et nous allons faire correspondre tous les styles tels qu' ils figurent dans les designs. Et voilà, tout est beau et stylé. Nous pouvons vérifier à quoi cela ressemble pour les différents messages de bloc en modifiant le message de bloc en haut. Et c'est tout pour ce blog. 144. Composants de Webflow: Dans cette vidéo, nous allons ajouter un pied de page à la page. Il n'y a rien de plus facile que ça. Nous pouvons copier le pied de page depuis la page d'accueil et le coller ici Il est prêt, rien à changer et il est déjà réactif. Mais il existe une meilleure façon de le faire. Imaginons maintenant que nous ayons un site Web contenant un grand nombre de pages, en particulier de pages statiques. Sur chacune de ces pages, nous aurons généralement la même barre de navigation et le même pied de page, n'est-ce pas ? Et parfois, certaines sections, comme une section d'appel à l'action, peuvent également être répétées. Nous aurons donc, disons, 20 ou dix pages sur toutes ces pages, le même composant, comme le pied de page, qui se répète encore et encore Maintenant, lorsque nous voulons modifier cela, n'est-ce pas ? Nous voulons modifier le pied de page, il faudrait modifier l'un des pieds de page, à droite, puis prendre ce pied de page, le copier, puis le remplacer sur toutes les autres pages Maintenant, en ce qui concerne les styles, nous pouvons facilement nous en occuper, non ? Nous avons déjà appris que nous avons des styles CSS, des balises HTML. Nous pouvons simplement nous rendre au même endroit et modifier une instance, et tout sera mis à jour sur l'ensemble du site. Mais qu'en est-il du contenu ? Qu'en est-il de l'ensemble du squelette et de la structure du pied de page ? Supposons que nous décidions qu'une colonne doit être supprimée, ou que nous devions remplacer le texte d' un petit titre cela corrige et change quelque chose Dans Figma, nous avons quelque chose qui résout ce problème, les composants Nous pouvons créer un composant, puis toute autre instance de ce composant peut être mise à jour partout, d' accord, jusqu'à ce qu'elle soit remplacée, évidemment Nous avons également quelque chose de similaire dans Webflow. À côté de l'onglet éléments, il y a un onglet pour les composants. Les composants Webflow fonctionnent comme les composants de FigMA. Tu t'en souviens ? Comment toute modification apportée au composant principal, même au contenu, mettra à jour toutes les autres instances de ce composant. Les composants de Webflow fonctionnent de la même manière. Nous pouvons créer un composant à partir de n'importe quoi, puis le réutiliser sur le site Web. Nous allons créer un composant à partir du pied de page. Je vais supprimer celui-ci et créer un composant à partir de celui de la page d'accueil. Pour créer un composant, il suffit de cliquer avec le bouton droit de la souris sur l'élément. Dans ce cas, la section entière contenant tous les éléments du pied de page et cliquez sur Créer un composant Donnez-lui un nom et créez. Il va passer au vert. Cela signifie qu'il s'agit désormais d'un composant. Vous verrez également un indicateur différent dans le navigateur portant le nom de ce composant Revenons maintenant au poste de blocage. Si vous allez dans le panneau Composants, vous verrez qu'il contient maintenant un composant de pied de Vous pouvez suivre ce composant sur la page ou dans le navigateur, assurez-vous de le déposer dans l'élément du corps Et là, tout le pied de page est là. Nous pouvons apporter des modifications aux composants de deux manières. Tout d'abord, nous pouvons modifier le composant principal. Cela signifie que toute modification sera appliquée à toutes les instances de ce composant sur le site. Permettez-moi de faire glisser une autre instance ici afin que nous puissions voir les modifications en temps réel. Pour modifier le composant principal sélectionné, cliquez sur Modifier le composant. Vous pouvez également cliquer avec le bouton droit de la souris et faire de même. Toutes les modifications que vous apportez ici seront appliquées partout. Peu importe la page sur laquelle vous modifiez le composant. Si vous cliquez sur Modifier le composant, cela affecte toujours le composant principal. Vous pouvez déplacer des éléments et faire attention à ce qui arrive à celui ci-dessus, car vous pouvez voir que les changements ont également été effectués, ou vous pouvez modifier le texte. Toutes les modifications ont également été mises à jour via d'autres instances. Peu importe la page sur laquelle vous modifiez le composant. Si vous cliquez sur Modifier le composant, cela affecte toujours le maître. Pour quitter le mode d'édition, cliquez sur le bouton retour en haut de la page. Vous pouvez également cliquer n'importe où sur le canevas ou appuyer sur Escape. Voyons maintenant la page d'accueil. Là-bas. Le changement s'est également répercuté instantanément sur cette instance. Pour le modifier à nouveau, il suffit de répéter le processus. Supposons maintenant que sur certaines pages, nous voulons un contenu différent, mais nous ne voulons pas modifier le composant principal, simplement un contenu différent sur la page de bloc. Nous pouvons apporter de telles modifications à l'aide des propriétés des composants. Entrez dans le mode d'édition du composant, puis sélectionnez l' élément que vous souhaitez modifier comme cet ajout. Et dans le panneau des paramètres à côté du texte, cliquez sur cette petite icône et créez une propriété. I Maintenant, cela nous permet de remplacer le texte par défaut de cet en-tête Pour remplacer le texte, vous devez d'abord quitter le mode d'édition des composants N'oubliez pas que chaque fois que vous êtes en mode édition, vous modifiez le composant principal. Lorsque vous cliquez sur Retour à l'instance et que vous sélectionnez normalement le composant, vous travaillez avec l' instance. Est-ce que c'est confus ? Oui, mais vous y arriverez après un peu d'entraînement. Comme vous pouvez le constater, l' élément de texte est désormais sélectionnable. Et si nous double-cliquons dessus, nous pouvons modifier le texte. Assurez-vous de double-cliquer sur ce titre dans l'élément de texte et ne pas double-cliquer accidentellement sur le composant lui-même, car vous allez alors passer en mode édition Double-cliquez donc sur cet élément. Nous pouvons maintenant réécrire et remplacer le texte par défaut. Cela ne touchera pas le composant principal. Cela ne changera que cette instance particulière. Vous pouvez répéter le même processus pour n'importe quel autre texte. Modifier le composant, la propriété de la tête. Retournez à l'instance et commencez à taper. Ou peut-être souhaitez-vous masquer ce formulaire d'e-mail sur certaines pages. Appuyer sur la touche Supprimer ne fonctionnera pas. Ce que vous devez faire est de sélectionner l'élément, dans ce cas toute la colonne de pied de page, puis d'accéder aux paramètres de cet élément Vous verrez ici une option de visibilité. Cliquez sur Créer. Cela ouvrira une option permettant de masquer ou d'afficher cet élément sur cette instance particulière. Si nous sélectionnons Masqué, vous verrez qu'il a disparu de cette instance, mais qu'il est toujours présent sur l'autre instance. C'est ce que l'on appelle les propriétés des composants et différentes options s'offrent à vous en fonction de l' élément que vous sélectionnez . Mais supposons que nous voulions que ces éléments reprennent leur forme d' origine et recommencent extraire des valeurs du composant principal. Nous pouvons le faire en réinitialisant ces propriétés à partir de ce panneau Lorsqu'une instance de composant sélectionnée et que vous n'êtes pas en mode édition, ce panneau affiche toutes les propriétés qui font partie de ce composant, et les propriétés que nous utilisons et redéfinissons apparaissent en bleu, peu comme dans le panneau des étoiles Cliquez sur le texte bleu pour obtenir une option permettant de rétablir la valeur de propriété par défaut. Et la réinitialisation de la visibilité du formulaire d'e-mail rétablira cette colonne masquée Une chose que vous remarquerez dans le panneau des paramètres est que toutes les propriétés que nous avons créées sont toujours présentes. Et si vous essayez de modifier du texte sur votre composant principal, vous verrez que cela ne vous y est pas autorisé. Cela est dû au fait que les propriétés que nous avons créées existent toujours et sont toujours connectées. Tant que la propriété existe, sa modification s'effectue à partir des paramètres de la propriété, l'endroit même où vous l'avez créée. Donc, si vous devez modifier le contenu de la propriété par défaut, vous pouvez le faire ici. Vous supprimez ces propriétés en mode édition, accédez aux paramètres de la propriété et cliquez sur Déconnecter. Maintenant, nous n'avons plus de propriétés, et toutes les instances ne seront pas modifiables et seront identiques au composant principal Parfois, nous voulons apporter des modifications importantes à l'une des instances, par exemple en modifiant l'ordre des colonnes. Dans ce cas, nous devons dissocier complètement l'instance du composant Cela peut être fait en cliquant avec le bouton droit de la souris sur l'instance, puis en dissociant l'instance Cela est désormais totalement indépendant du composant. Pour récapituler, les composants sont réutilisables et connectés, très utile pour les sections et les blocs répétés, tels que les barres de navigation et les pieds Vous pouvez créer un composant à partir de n'importe quoi. Il est possible d'apporter certaines modifications sur des instances telles que la mise à jour du texte ou le masquage de certains éléments. Et pour notre page, c'est presque terminé. Nous avons juste besoin d'optimiser les versions responsives, mais cette fois c'est assez simple. La majeure partie est prête. Restez dans les parages. 145. Blog et CMS : publication réactive: Et nous sommes de retour pour du responsive design. Il y a très peu de choses à faire, nous pouvons donc nous en occuper dans une seule vidéo. La barre de navigation nécessite quelques modifications pour le mode paysage. Fixons d'abord les marges. Notre section par défaut possède un rembourrage latéral de 30 pixels, mais la barre de navigation, dans ce cas, possède un de 60 pixels C'est parce que cette barre de navigation est un peu différente de celle de notre page d'accueil Il suffit donc de réduire le rembourrage à 30 pixels et le tour est joué. L'icône du menu doit être d'une couleur différente. Il est blanc, donc nous ne pouvons pas le voir pour le moment. Avant de changer la couleur, nous devons nous assurer d'appliquer une classe de combinaison au bouton de menu, sinon cela affectera celui de la page d'accueil. Ça a l'air bien. Voyons le mode de prévisualisation. Nous avons donc ici un petit conflit entre les couleurs de fond et de lien et la couleur des boutons de menu. Les liens se trouvent ici. Ils n'ont pas disparu. Ils sont simplement de couleur foncée pour la même raison que le bouton de menu. Nous venons de les modifier précédemment lors la conception de notre barre de navigation. Et comme ils doivent rester sombres, dans ce cas, nous ne pouvons que changer l'arrière-plan de ce menu déroulant. Donc, le changer en gris très clair va très bien se passer. Très bien, NABA s'affiche bien sur tous les écrans. Vérifions maintenant l'en-tête avec l'image principale. La tablette est très bonne. Le mode paysage semble bon à première vue, mais détrompez-vous, cela va être restreint. L'image qui est si haute va donc occuper trop d'écran visible. Cette image fonctionnera également mieux en mode paysage, notamment parce que c' est ce que les créateurs de contenu téléchargeront. Une hauteur d'environ 250 pixels devrait l'amener aux bonnes dimensions. De même, pour le mode portrait, il va falloir le réduire un peu plus. 150 pixels ont l'air bien. Je réduirai également l'espacement autour de l'image, à la fois en mode paysage et en portrait Il y a quelque chose d'amusant que nous pouvons faire avec l'image principale. Sur le bureau, nous avons cette mise en page non traditionnelle où l'image principale sort du conteneur principal, mais sur les petits écrans, cela ne se produit pas car le rembourrage des sections tout au même endroit Mais il existe un moyen de le contourner. Si nous donnons à l'image principale une certaine marge négative, cela annulera le rembourrage de la section La section tablette a donc un rembourrage de 60 pixels. Nous pouvons donc donner à l'image une marge négative de 60 pixels, ce qui annulera le rembourrage et rendra plus intéressante Mais au lieu d'appliquer la marge négative directement sur l'image principale, nous allons envelopper l'image dans un bloc div et y appliquer des marges négatives. Cela se répercutera également sur le mobile, mais nous devons nous adapter. Sur la section mobile, le rembourrage est de 30 pixels, nous devons donc également l'ajuster à 30 pixels négatifs Et ce sera exactement bord à bord. Maintenant, regardons le reste de la page. Le texte enrichi ne nécessite aucun ajustement. Il est déjà réactif et s' affiche bien sur tous les écrans. Sur le portrait, nous pouvons même réduire un peu d' espace sur la droite et rapprocher le contenu de celui-ci. C'est tout ce dont le pied de page n'a besoin de rien. Il s'agit du même pied de page que celui de la page d'accueil et il est déjà optimisé Cette page est maintenant entièrement prête et a l'air magnifique. Dans les prochaines vidéos, nous allons créer la page d'accueil du blog. 146. Blog et CMS : Page d'accueil du blog: Maintenant, une dernière page dont notre blog a besoin est cette page d'accueil du blog, cette grille que nous avons conçue. La page d'accueil du blog sera une combinaison de page statique et de contenu dynamique, contrairement à la page d'article de blog, qui est une page entièrement dynamique. Ce que nous allons faire, c'est créer une page statique normale , puis y insérer des éléments du CMS. Donc, pour commencer, créez une nouvelle page. Nous allons le nommer blog et nous assurer que le slug d'URL est blog. En commençant par la barre de navigation, elle est exactement la même que celle de notre page d'article de blog, nous pouvons donc la copier Mais au lieu de copier, il vaut mieux créer un composant à partir de celui-ci. Cliquez avec le bouton droit sur la barre de navigation et sélectionnez Créer un composant. Nommez-la barre de navigation et tout va bien. Nous pouvons maintenant le faire glisser vers la droite sur notre page de blocage. Ensuite, nous avons besoin de la section et du conteneur habituels. Nous avons un petit problème avec la couleur d'arrière-plan de la barre de navigation ici car nous avons besoin qu'elle soit grise Nous pourrions le faire glisser dans une section, mais nous devrions ensuite modifier les rembourrages et tout ça. Nous pourrions créer une classe combinée et lui donner un arrière-plan gris, mais cela signifie que nous devrons la dissocier du composant, ce qui n'est pas un problème, mais c'est bien qu'elle soit liée La meilleure option est d'envelopper la barre de navigation dans un autre bloc div et donner à ce bloc div une couleur de fond Toutes ces options sont appropriées et valides, mais celle-ci était la meilleure car je n'ai pas eu à modifier les éléments par défaut ou les symboles. Maintenant, ajoutons un titre et un sous-titre , c'est assez simple Et rien n'a besoin d'être modifié dans ce cas. Maintenant, pour ce qui est amusant, nous allons d'abord concevoir une carte statique, puis nous allons trouver comment la transformer en un élément dynamique qui extrait du contenu du CMS. Ajoutons un nouveau bloc DO et donnons-lui une classe de grille de blocs. C'est là que nous conserverons toutes les cartes-blocs avec une marge supérieure de 60 pixels. Ensuite, nous avons besoin d'un nouveau déblocage nommé block card. Faisons ce fond blanc. Donnez les coins arrondis et une certaine largeur. Pour l'instant, donnons à cette carte une largeur fixe. Nous n'allons pas utiliser une largeur fixe à la fin car nous allons l'organiser dans une mise en page en trois colonnes. Mais pour l'instant, faisons-le afin bien voir ce que nous concevons. Il disparaît quand on lui donne une largeur, il est vide. C'est pourquoi. Pas de soucis Ensuite, nous avons besoin d'une miniature. Cela nécessite une hauteur. La hauteur exacte par rapport aux dessins fera l'affaire. Nous pouvons ajouter une image aléatoire pour le moment afin de voir ce qui se passe. Et nous allons modifier le réglage d'ajustement en fonction de la couverture afin que l'image ne soit pas déformée. Il y a juste une chose : les coins de la carte-bloc sont arrondis, mais pas cette miniature Il sort des coins avec ses bords pointus. Cela se produit car par défaut, le débordement est visible sur n'importe quel bloc div. Mais si nous transformons le trop-plein en masqué sur la carte à bloquer, cela supprimera tout ce qui dépasse les limites, arrondissant ainsi les coins de la vignette Ensuite, nous avons besoin de contenu , que nous allons envelopper dans un bloc div. Donnez-lui un rembourrage de 20 pixels. Stylisons le titre en paragraphe. Pour le titre, nous pouvons créer l'une des balises, peut-être H deux ou H trois. N'oubliez pas comment styliser les balises de titre, modifiez la balise dans les paramètres, puis accédez au sélecteur. Une fois la fin terminée, vous aurez la possibilité de sélectionner cette balise en particulier et appliquer tous les styles d'enregistrement à partir des dessins, 22 pixels et semi-gras, etc. Et une dernière chose, enlevez la marge supérieure. Maintenant, pour le bloc auteur et date, nous aurons besoin d'un nouveau bloc do pour cela. Nous avons déjà exactement le même bloc sur la page de publication, je vais donc essayer de réutiliser la même classe ici. Il faudra cependant le peaufiner. Voyons les classes que nous y avons utilisées. Si nous appliquons ces cours, nous devrions obtenir les mêmes résultats. La copie serait une option plus simple, mais elle ne fonctionne pas avec les éléments dynamiques puisqu'ils sont liés. Très bien, maintenant, modifions-le en utilisant des classes combinées La taille de l'avatar est de 30 pixels au lieu de 40. Le texte est de 12 pixels. Et il a un espacement différent sur le côté, alors ajustons-le également. Et enfin, la marge supérieure. Une chose que j'aimerais ajouter à cette carte est un effet de survol. Une chose que nous pouvons faire est d' y ajouter une ombre d'arrière-plan au survol. Ce serait une bonne interaction. Nous savons déjà comment créer l'ombre, non ? Sur les cartes, nous l'avons fait sur les cartes de témoignage, et nous pouvons faire exactement la même chose ici et nous pouvons simplement réutiliser les mêmes valeurs pour l'ombre Ajoutons un effet de transition ce ne soit pas si brusque et saccadé Il y a un autre effet de survol que nous pouvons ajouter. On pourrait faire bouger un peu la carte. Ceci avec une ombre créera l'effet d' une carte soulevée en l'air. Très simple à faire en mode survol, avec un effet de transformation Et sur l'axe vertical, déplacez-vous d'environ deux pixels. Nous avons besoin de moins deux pixels pour le soulever. Les valeurs positives le déplaceront vers le bas. Nous n'avons pas besoin d'ajouter l'effet de transition car nous en avons ajouté un pour toutes les propriétés, ce qui prend également en charge la transition pour le déménagement. C'est pourquoi j'aime utiliser la transition de toutes les propriétés au lieu d' une transition individuelle pour chaque attribut. Excellente. La carte est prête, mais nous n'allons pas encore la connecter au CMS. C'est ce que nous allons faire dans la prochaine vidéo. Pour l'instant, finissons simplement la page. Nous devons ajouter le pied de page, ce qui est facile puisqu'il suffit faire glisser un composant de pied de page sur la Et c'est fait, super facile. Nous allons maintenant créer un lien vers cette page de blocage afin que les utilisateurs puissent accéder à cette page de blocage via la barre de navigation ou le pied de Sélectionnez ensuite le lien et accédez aux paramètres de Spanel. Connecté à la page de blocage, qui apparaît désormais dans une liste déroulante. Et même chose dans le pied de page. Et n'oublions pas la barre de navigation de la page d'accueil, car elle n' est pas connectée au composant Et c'est tout. Désormais, la page de blocage est accessible depuis n'importe où sur le site. Très bien, Unext, nous allons connecter le réseau au CMS. Restez dans les parages. 147. Liste de collection: Il existe deux manières d' extraire des éléments d'un CMS. La première consiste à utiliser des pages de collection. C'est ce que nous avons fait avec le billet de blog. Pour chaque nouvelle collection que nous créons, une page de collection sera automatiquement créée pour eux, laquelle nous pouvons accéder d'ici. Mais que se passe-t-il si nous voulons transférer le contenu du CMS ailleurs ? Par exemple, sur des pages statiques comme la page d'accueil ou sur la page de blog où nous avons toutes ces cartes bloquées. Entrez la liste des collections. La liste des collections est un élément qui peut être déplacé depuis le panneau des éléments sur n'importe quelle page et n'importe où sur la page Lorsque vous faites glisser une liste de collections sur la page, vous obtenez un tas de cases violettes vides. Il n'y a rien à voir ici pour l'instant. Tout d'abord, nous devons le connecter à une collection particulière. Dans notre cas, des articles de blog. Maintenant, nous avons compris. Les cases sont toujours vides, mais chaque case correspond au message en bloc dans notre base de données. La liste des collections affiche par défaut tous les éléments de cette base de données particulière. Nous avons le contrôle du nombre à afficher à la fois, mais nous en parlerons plus tard. Nous obtenons également ces commandes de mise en page. Notre grille de blocs comporte trois colonnes, nous pouvons donc facilement passer à cette colonne. Maintenant, nos cartes-blocs seront affichées dans une grille à trois colonnes, comme nous l'avions prévu. Eh bien, pas encore. Ils sont toujours vides. Si vous cochez le mode de prévisualisation, ils disparaissent. Pour commencer à lier des éléments au CMS, nous devons d'abord les faire glisser dans l'une de ces cases violettes. Une fois cela fait, chaque élément à l'intérieur gagnera en qualités dynamiques et nous aurons possibilité de nous connecter à un champ CMS spécifique. Dans ce cas, nous devons faire glisser le blockcard entier dans l'une des cases Peu importe lequel. Il n'est pas possible de sélectionner la totalité de la carte à bloquer dans le canevas, alors assurez-vous de la sélectionner dans le navigateur Ensuite, pendant qu'il est sélectionné, cliquez dessus et faites-le glisser dans l'une des cases violettes. Si c'est difficile, vous pouvez le faire depuis le panneau de navigation et le faire glisser dans l'élément de collection Bien, je suis sûr que vous avez des questions sur ce qui vient de se passer, sur raisons pour lesquelles les blocs-cartes se sont multipliés Le fait est que la liste de collection fonctionne un peu comme une page de collection. L'un signifie que tous agissent comme un seul organisme, comme une sorte d'esprit ruche Une fois que nous avons lié les éléments aux champs du CMS, le contenu approprié sera extrait. Connectons donc les éléments aux champs appropriés. Au moment où vous vous êtes connecté au champ CMS, le titre de chaque carte est mis à jour instantanément fonction du bloc de publication auquel elle est connectée Jusqu'à ce que nous établissions ces connexions, tous les éléments sont des éléments normaux et statiques, et chaque élément sera exactement la même chose. Jusqu'ici, tout va bien. Et changeons la date pour un format plus court. Nous devons apporter quelques modifications à l'espacement. Supprimons d'abord cette largeur fixe de la carte-bloc. Cela va nous gêner et tout gâcher. Nous ne voulons pas d'une carte fixe, nous voulons qu'elle soit fluide pour s'étirer et se rétrécir en fonction de la largeur de la page. un certain espacement est déjà Par défaut, un certain espacement est déjà appliqué à l' élément de collection Nous pouvons l'y ajouter au lieu d'ajouter de nouvelles propriétés d'espacement à la carte de blocage. Il est doté d'un rembourrage de dix pixels sur les côtés. Dans nos designs, l'écart entre chaque carte est de 30 pixels, soit 15 pixels sur les côtés. Et aussi la marge inférieure ou le rembourrage. Peu importe, l'un ou l'autre fonctionne. Passons maintenant à cette étrange distribution des cartes. Cela se produit lorsque les hauteurs de chaque objet sont différentes Ils sont donc disposés de manière désordonnée, brisant ainsi notre grille bien rangée Nous pouvons résoudre ce problème facilement avec une boîte flexible. Nous devons donc appliquer Flexbox au premier parent qui détient ces éléments de collection Ceci est la liste des collections. Assurez-vous de ne pas sélectionner le wrapper de liste de collections. C'est un grand-parent avec toutes ces choses à l'intérieur. Tout d'abord, vous allez regrouper tous les objets sur une seule rangée. Tout ce que nous devons faire ici, c'est activer l'emballage. Ensuite, nous obtenons exactement la mise en page que nous visons. Il y a juste une chose. Ces cartes ne sont pas réellement cliquables. Comment accède-t-on réellement aux pages bloquées qu' elles représentent ? Pour cela, nous avons besoin d'un élément de lien qui va se connecter à la page de blocage. heure actuelle, aucun des éléments n'est un lien, donc aucun des paramètres ne dispose d'une option permettant de lier l'URL au lien CMS. Nous devons donc transformer l'un d'entre eux en élément de lien. Cela peut être un titre, par exemple, qui peut être un lien ou une image miniature les deux, ou nous pouvons transformer la carte entière en Comment faisons-nous cela en utilisant l'élément Link Block ? Il faudrait donc mettre la carte entière dans le bloc Link. Toutes ces options sont très valables. Différents sites Web traitent cela différemment. Dans la mise en page actuelle que nous avons, j'aime que l' ensemble de la carte soit cliquable Si nous avions différents liens menant à différents endroits, par exemple le nom de l'auteur menant à la page d'un auteur, ou s'il y avait un lien vers une catégorie, nous ne serions pas en mesure de placer le tout dans le bloc Liens car vous ne pouvez pas imbriquer des liens dans d'autres liens. Mais dans ce cas, nous le pouvons. Alors allons-y. Ajoutez simplement un élément de bloc de liens à l'intérieur de l'élément de collection. Lorsque vous aurez obtenu les paramètres, vous aurez cette icône de page violette. Cela permet de créer un lien vers une page de collection. Choisissez-le et sélectionnez le billet de blog actuel. Maintenant, ce lien va accéder à cette page de publication de bloc. Enfin, déplaçons la carte entière à l'intérieur de ce bloc-encre. En fait, nous n'avons pas besoin de ce Diveblog supplémentaire. Nous pouvons appliquer la classe block card au bloc de liens lui-même et nous débarrasser du bloc div supplémentaire. Comme il s'agit désormais d'un bloc de liens, tout le texte à l'intérieur de la carte est souligné. Il s'agit simplement d'un comportement normal des liens. Nous pouvons supprimer ce soulignement dans les paramètres de décoration du texte. sélectionnez aucun. Jetons un coup d'œil dans l'aperçu et testons le lien. Il y a une chose qui m'embête hauteur des cartes est un peu différente. Pour être honnête, c'est bien comme ça, mais des hauteurs égales le rendraient plus beau. C'est ce que nous avons dans les designs, n'est-ce pas ? Toutes les cartes ont la même hauteur quel que soit leur contenu, ce qui rend la grille un peu plus nette. Pour faire de même, il suffit d' étirer les cartes pour remplir l'espace vide. L'objet de collection, puisqu'il s'agit d'un enfant flexible, s'étire déjà, mais le bloc-card ne l'est pas si on lui donne une hauteur de 100 %, cela remplira l'espace vide N'oubliez pas qu'il vous suffit de styliser l'un des blockcards et qu'ils seront tous stylisés de la Tout ça a l'air bien, sauf une chose. L'auteur et le bloc de date occupent des positions différentes partout. Dans nos designs, nous les avons collés en bas, ce qui crée une mise en page beaucoup plus agréable Comment pouvons-nous faire en sorte que cela se produise ? d'abord, si vous regardez l'élément parent, qui est le contenu de la carte, vous verrez qu'il ne s'étend pas jusqu'en bas. Donc, tout d'abord, nous devons absolument aller dans cette direction. Cette fois, 100 % de hauteur ne fonctionnera pas car cela signifie 100 % de la taille du parent. Block Card est le parent, qui est plus grand car il y a aussi l'image à l'intérieur Donc, si nous le donnons à 100 %, cela ne va pas simplement remplir l'espace vide, mais il va au-delà des frontières. Alors, comment pourrions-nous le faire remplir l'espace ? Voici une façon de créer pour le parent la carte de blocage, une boîte flexible avec un alignement vertical Ensuite, dans les paramètres Flex Child, nous pouvons modifier la taille pour l' étirer en fonction du contenu de la carte Maintenant, pour la deuxième étape, nous devons coller d'une manière ou d'une autre le bloc d' auteur en bas. Une option évidente consiste à transformer à nouveau le bloc de contenu en une boîte flexible avec alignement vertical Et remplacez les paramètres de justification par un espace entre les deux. Cela va pousser les objets vers les bords. Maintenant, le bloc auteur est collé en bas de chaque carte, ce qui est beau, mais cela permet également d'espacer uniformément le résumé des articles n'est pas ce que nous voulons. Nous voulons que résumé de l' article soit regroupé avec un titre C'est facile à corriger. Il suffit de placer le titre et le résumé de l'article dans un bloc div, et c'est tout Quand je dis envelopper quelque chose, cela signifie ajouter un nouveau bloc div et y mettre les éléments. Emballez comme un coffret cadeau. Et c'est tout. Regardons l'aperçu. Tout fonctionne très bien. Il y a une autre chose que nous devons faire. Nous devons ajouter une pagination. La pagination consiste à distribuer ces cartes-blocs sur différentes pages Nous ne voulons pas que toutes les cartes soient chargées sur cette page. Lorsque nous avons plus de 20 ou 30 cartes en bloc, cela ralentit la page. C'est pourquoi nous avons besoin de pagination. ce que nous ferons dans la prochaine leçon. Restez dans les parages. 148. Blog et CMS : la pagination: Dans cette vidéo, nous allons ajouter la pagination. Sans diviser les blockcards sur différentes pages, chaque blockcard Et lorsque nous avons beaucoup de messages de journal, cela ralentirait le chargement de la page et ne serait pas optimal. Pour 20 cartes, c'est exact. Mais pour 50, 60 ans et plus, cela ralentira considérablement la page. Pour créer une pagination dans la liste des collections , il suffit de cocher une case dans le panneau de configuration Nous décidons donc ici combien d'éléments doivent être affichés par page ? Nous voulons un nombre adapté à notre grille à trois colonnes, quelque chose qui soit divisible par trois, exemple neuf, 12, etc. Dix, ce n'est pas bien, car vous aurez alors des emplacements vides. Le nombre idéal peut être divisé en trois ou deux colonnes. 12 est la meilleure option. Ainsi, outre la pagination, il existe d' autres paramètres pour les listes de collections Jetons-y rapidement un coup d'œil. Les filtres sont cool et très pratiques. Par exemple, nous pourrions filtrer les publications par auteur ou les publications créées ce mois-ci. Ou nous pourrions ajouter des champs supplémentaires pour un tel filtrage dans les champs de notre collection. Ensuite, ces champs apparaîtront ici et nous pourrons filtrer les éléments en fonction de ceux-ci. Ainsi, par exemple, vous pouvez le faire en filtrant les catégories. Donc, chaque fois que nous créons un article de blog, nous choisissons une catégorie du blog, n'est-ce pas ? Nous dirions donc qu'il s'agit peut-être de cuisine, peut-être que c'est de la cuisine espagnole, cuisine italienne, de la cuisine française, peu importe. Et puis nous aurions des pages dédiées pour chaque catégorie, non ? Donc tous les articles de blog sur la cuisine française, tous les articles de blog sur la cuisine chinoise. Et sur chacune de ces pages, nous créerions ce filtre. Donc, ne montrez que ceux qui sont catégorisés et ont une catégorie de français et ceux qui ont une catégorie de nourriture chinoise, etc. Des options similaires s'appliquent au tri. Nous pouvons trier l'ordre des publications selon de nombreux critères et règles différents. Encore une fois, nous pouvons créer des pages distinctes pour différents ordres de tri , puis inclure ces liens en haut afin que les utilisateurs puissent y naviguer. Il existe un dernier paramètre, qui limite le nombre d'éléments affichés. Ceci est similaire à la pagination, mais cela limite le nombre total d'éléments et n'ajoute aucune page supplémentaire pour afficher d'autres éléments Un exemple pratique de cela serait suggestions de publication similaires sous un bloc de publication réel. Pour ce faire, nous ajouterions une autre liste dynamique ci-dessous. Nous le remplirions avec des articles de blog, puis nous en limiterions le nombre à deux ou trois Il ne montre donc que quelques suggestions de publications. C'est à quel point ces paramètres de liste de collections peuvent être simples et puissants . Une fois que vous avez activé la pagination, les boutons suivant et précédent vous passer d'une page à l' Le coiffage est donc assez facile. Il suffit de sélectionner le bouton. Donnez-lui une couleur de fond. Changez la couleur de la taxe. Ajoutez un peu plus d'espacement. Ajoutez un effet de survol. Ajoutez toujours des effets de survol aux boutons et aux liens. Il est important que les utilisateurs comprennent ce qu'est un objet interactif et ce qui ne l'est pas, et l'effet de survol est le meilleur moyen d'y parvenir Je lisais récemment une biographie de Steve Jobs, et j'ai lu cette phrase où il disait que la technologie doit vous donner impression de pouvoir les dominer. Et c'est tellement vrai. C'est pourquoi une technologie et des produits minimalistes simples sont toujours meilleurs que des produits compliqués dotés d'un ensemble de boutons et de cadrans Ainsi, chaque fois que vous créez et concevez vos sites Web, n' oubliez jamais la convivialité et la manière dont l'utilisateur va interagir avec celui-ci. Assurez-vous donc que s' il y a un bouton, assurez-vous qu'il a un effet de survol ou interagit avec celui-ci afin que nous puissions comprendre qu'il est possible de cliquer sur ce Hein ? Ou s'il existe un lien, est-ce que le lien change de couleur ? Y a-t-il une sorte d'indicateur indiquant qu'il s'agit du lien et que vous pouvez cliquer dessus et que cela nous mènera quelque part et ainsi de suite. Ce n'est pas si difficile, mais il faut faire attention et ne pas être paresseux, car beaucoup de concepteurs Web sont plutôt paresseux car s'ils ne l' étaient pas, ils n'auraient pas autant de mauvais sites Web qui nous rendent parfois fous. Bref, revenons à la pagination. Revenons donc au style de notre bouton. Nous pouvons appliquer la même classe au bouton précédent. Le nom de la classe n'a aucun sens. Je devrais peut-être utiliser le bouton de pagination. C'est un peu mieux. Lorsque vous sélectionnez un élément de la pagination, vous obtenez cette option supplémentaire dans les paramètres. Cela affichera le nombre de pages, ce qui est parfois utile à afficher. Nous pourrions également le styliser si vous le souhaitez, mais je pense que cela suffit. C'est ça. Notre bloc de publicité est terminé. Nous avons juste besoin de le rendre réactif et nous le ferons dans la prochaine vidéo. Restez dans les parages. 149. Blog et CMS : page de blog réactive: Maintenant, rendons notre page de blocage réactive. L'ordinateur de bureau fonctionne bien. Les cartes se rétrécissent à une taille raisonnable, nous pouvons donc toujours conserver trois colonnes. Sur les tablettes, c'est une autre histoire. C'est trop pour trois, nous avons donc opté pour deux colonnes. Nous pouvons modifier la mise en page à partir de ces paramètres. Cela va affecter la deuxième version de bureau. C'est global et non spécifique à un appareil. Mais c'est très simple. Ces articles se trouvent dans une boîte flexible avec l' emballage activé Cela signifie que les cartes passeront à la ligne suivante lorsqu' il n'y a pas de place. Si nous donnons à l' élément de collection une largeur de 50 %, cela organisera instantanément le tout en deux colonnes. Aussi simple que cela, ils s'étireront et se rétréciront pour occuper l'espace nécessaire. Maintenant, pour le paysage, c'est un peu délicat. Sur des tailles plus larges, c'est parfait. Mais si vous réduisez à la taille la plus petite, deux colonnes, c'est trop. L'une des options consiste à créer une disposition en colonne unique, nous devons donc définir la largeur à 100 %. Une seule colonne n'est pas mal dans ce cas, mais savez-vous quelle serait la mise en page parfaite ? Si nous pouvions avoir une disposition en deux colonnes , puis une largeur spécifique pour la transformer en une seule colonne. Par exemple, si nous fixons la largeur minimale de l'élément de collection à 300 pixels, les cartes seront ainsi réduites jusqu'à 300 pixels, puis elles seront enroulées sur la deuxième ligne, créant ainsi une disposition en colonne. Mais c'est une idée. Sur grand écran, nous avons cette lacune. Idéalement, nous voulons qu'il passe à 100 % de largeur dès qu'ils passent à une seule colonne. Heureusement, il existe une astuce avancée pour cela. Nous pouvons définir ces règles spécifiques dans paramètres Flex Child, sous les options supplémentaires. Supprimez les paramètres de largeur minimale avant de commencer à modifier cette partie. Il existe trois champs avec une valeur de croissance, réduction et une valeur de base. La combinaison de ces trois valeurs donne des résultats différents Je ne vais pas approfondir la logique de leur fonctionnement, mais je vais expliquer la seule variante dont nous avons besoin pour le moment. À l'intérieur de la base, nous pouvons définir une valeur comme 300 pixels. Ensuite, dans le champ de réduction, nous pouvons spécifier de ne pas réduire au-delà de cette valeur. La valeur de ce paramètre doit être zéro. S'il est égal ou supérieur à un, cela signifie qu'il peut être réduit au-delà de cette valeur. Ainsi, avec le rétrécissement réglé à zéro, il ne rétrécit pas au-delà et les cartes s'enroulent jusqu'à la ligne suivante. C'est comme fixer un minimum. Désormais, comme la croissance est définie sur zéro, elle ne croît pas au-delà de 300 pixels et ne diminue pas 00 signifie essentiellement ne pas grandir, ne pas rétrécir. Il suffit de le maintenir à 300 pixels. Mais si nous définissons la valeur de croissance à un, nous l'autoriserons à dépasser 300 pixels pour occuper tout l'espace disponible. Et cela nous donne une mise en page absolument parfaite où il y a deux colonnes complètes, et quand elle devient trop petite, elle se transforme en une seule colonne pleine largeur. Si vous n'avez pas complètement compris tout cela, ne vous inquiétez pas. C'est un concept délicat. Sachez simplement qu'un tel contrôle granulaire est une option lorsque vous en avez besoin Ensuite, aléatoirement, vous pouvez jouer avec différentes valeurs jusqu'à obtenir le résultat souhaité. C'est ce que je fais la plupart du temps de toute façon. Enfin, voyons le mode portrait. En raison des paramètres Flex Child que nous avons définis en mode paysage, le portrait passe automatiquement en mode colonne unique, mais avec un problème. Comme nous ne l'autorisons pas à descendre en dessous de 300 pixels, il dépasse les bordures de page. Maintenant que nous utilisons les paramètres Flex Child, nous ne pouvons pas modifier les paramètres ici car les paramètres Flex Child ignorent ces valeurs Nous rétablissons donc la valeur par défaut du flex child , qui est le rétrécissement si nécessaire, puis nous pourrons modifier la largeur de 100 %. Il y a une dernière chose que nous pouvons corriger. fait d'avoir un rembourrage sur les côtés crée ce petit désalignement par rapport aux bords de notre page Vous savez où tout notre contenu est aligné. C'est un peu pointilleux, mais j'aime que les choses soient aussi précises que possible Vous devriez également faire de votre mieux pour développer cette habitude. Être obsédé par les détails est une bonne qualité pour un concepteur Web Alors, comment corriger ce petit désalignement ? Nous ne pouvons pas avoir de classe de combo spéciale pour les cartes qui se trouvent sur les bords. Ils ne font qu'un, souvenez-vous, Hive Mind. Mais c'est très simple. Nous pouvons ajouter une marge négative au parent qui détient tous ces objets. -15 pixels des deux côtés et c'est fait. Les cartes sont maintenant alignées exactement sur les bords. Et c'est tout. Vraiment, c'est ça. Notre site Web est entièrement terminé. Il est réactif. Ça a l'air magnifique. Il est rapide et puissant. Les gens payent beaucoup d'argent pour ça. Dans la section suivante, nous apporterons touche finale et nous publierons le site Web. 150. Mise en ligne : référencement et publication: Commençons par SCO et quelques autres touches finales. Nous devons remplir les informations de référencement pour toutes nos pages, en commençant par la page d'accueil. Nous l'avons déjà fait auparavant, donc cela devrait être assez simple, l'exception de la page d'article de blog dynamique. C'est un peu différent. N'oubliez pas les paramètres d' ouverture du graphe. C'est pour tous ces réseaux sociaux, Facebook, Twitter, etc. Ou l'image, elle a besoin d'une URL. Nous pouvons choisir une image dans le panneau Ressources et obtenir une URL à partir de celle-ci. Je vais choisir cette image. Il suffit ensuite de saisir l'URL , puis de la coller dans le champ. Même chose pour la page du blog. Je n'ai pas de règles spécifiques sur ce que vous devez mettre sur le référencement tant que ce n'est pas vide. Le reste dépend de l'entreprise et du message que les clients souhaitent envoyer. Maintenant, une partie amusante, le référencement pour la page dynamique. Vous remarquerez un lien supplémentaire sur une page dynamique, ces liens violets pour ajouter un champ. Le nom du billet de blog peut donc être statique, non ? Le nom doit être identique au titre de la page du billet de blog Nous pouvons ajouter ce titre comme ceci. Voilà. Le nom de la page de blog. Et si vous cliquez sur ces flèches, vous pouvez facilement parcourir les différents articles. Nous pouvons ajouter quoi que ce soit d'autre devant ou après ce champ dynamique. Et à l'intérieur de la méta-description, nous pouvons ajouter un texte récapitulatif de l'article. C'est une autre raison pour laquelle résumé de l' article est un champ si pratique à avoir. Et pour l'image graphique ouverte, nous pouvons directement sélectionner l'image depuis le CMS. C'est génial, non ? Ainsi, chaque article comportera sa propre image principale. Tout ça, c'est pour le référencement. Nous avons besoin de certains liens pour nous connecter dans la barre de navigation et le pied Par exemple, le logo est une bonne pratique de le lier à la page d'accueil. C'est ce que les gens attendent. Quant aux autres liens, nous n'avons pas de pages pour eux, nous devons donc les laisser tels quels, sauf pour le blog que nous avons déjà connecté. N'oublions pas le pied de page. Nous devons également lier ce logo à la page d'accueil. Si vous ne voyez pas les paramètres des liens, c'est peut-être parce que vous avez simplement un logo sans bloc de liens. Seuls les éléments de lien peuvent être connectés à d'autres pages. Donc, s'il vous manque un lien, ajoutez simplement un nouveau lien au blog et déposez simplement votre image à l'intérieur. Vous n'avez même pas besoin d'ajouter une classe au lien, modifiez directement les paramètres. Excellente. C'est le bon moment pour vérifier tous les liens en mode aperçu et voir à quoi ils ressemblent sur différents écrans. J'adore le résultat. C'est un site Web beau, rapide et solide. Passons maintenant à la compression de l'image. C'est une étape importante car toutes nos images ont une taille de fichier assez importante, ce qui réduira le nombre de sites. Accédez aux ressources, agrandissez le panneau, sélectionnez toutes les ressources et appuyez sur Compresser. Certaines images ne seront pas sélectionnées pour être compressées, et ce n'est pas grave car certaines d'entre elles sont au format SVG et n'ont pas besoin d'être compressées Nous voulons les garder dans les SIG. Donnez-lui un peu de temps et vous recevrez une notification lorsque toutes les images auront été compressées. Maintenant, il s'agissait d'images sur nos pages statiques, mais nous avons également tout un tas d'images dans le CMS. Il y a des images à la fois dans les auteurs et dans la collection d'articles de blog. Nous pouvons effectuer la compression directement à partir d'ici, et cela compressera toutes les images en une seule dans l'ensemble du CMS dans ces deux collections. Cela prendra un peu plus de temps car il y a beaucoup plus d'images, mais nous n'avons pas à attendre ici. Nous pouvons simplement continuer avec les étapes restantes. Bien, avant de publier, passons aux paramètres du projet. Nous devons télécharger un favican comme nous l' avons fait la dernière fois. Rappelez-vous comment nous l'avons fait, nous avons dû créer un favican et des icônes de clips Web dans Figma Le favicon et le clip Web doivent être créés dans des tailles précises, 32 x 32 pour le favicon et 256 x 256 pour le Dessinons donc un cadre exactement de 256 x 256. Ensuite, donnez-lui un peu de couleur. Donc rayon d'angle. Créez une petite icône à partir du logo, et ça ira. Pour le fabricant, nous avons besoin d'exactement 32 x 32, mais nous ne pouvons pas simplement redimensionner le cadre tel quel car le texte à l'intérieur ne sera pas redimensionné mais nous ne pouvons pas simplement redimensionner le cadre tel quel car le texte à l'intérieur ne sera pas redimensionné Cependant, l'outil de mise à l'échelle est conçu exactement pour de telles fins de redimensionnement. Nous pouvons saisir les dimensions souhaitées et tout sera réduit proportionnellement. C'est ça. Exportez-les maintenant au format PNG dans un X et téléchargez-les dans les paramètres latéraux. Assurez-vous que les dimensions sont correctes, sinon cela provoquera une erreur. Et c'est fait. Nous pouvons maintenant cliquer sur publier sur le domaine Webflow Et c'est notre petit site web chic. Vérifions-le, vérifions-nous que tout fonctionne correctement. Ensuite, nous allons tester les formulaires et voir comment les soumissions de formulaires sont gérées sur Weblo. Restez dans les parages. 151. Passer en direct : soumission des formulaires: Y. Maintenant, testons nos formulaires. Nous avons créé un formulaire assez simple cette fois, juste une adresse e-mail. Nous pouvons devenir complètement fous avec les formulaires sur Webflow, mais qu'il s'agisse d'un formulaire rempli en T en une seule étape ou en plusieurs étapes, ils fonctionnent tous de la même manière La soumission s'est très bien passée. Il s'agit d'un comportement par défaut. La soumission se fait directement sur la page. Lorsque vous actualisez la page, ce message disparaît et nous pouvons renvoyer le formulaire. Nous ne sommes pas limités à cette version. Nous pouvons également rediriger les utilisateurs vers une autre page après la soumission, comme une page de remerciement ou une page de confirmation, peu importe. Pour cela, il suffit de créer cette page sur Webflow et d'ajouter l'URL dans les paramètres du formulaire Nous pouvons envoyer des soumissions automatiquement par e-mail. Nous pouvons fournir l'adresse e-mail d' une personne qui va recevoir des soumissions. Habituellement, c'est l'adresse e-mail de votre client, et il recevra un e-mail comme celui-ci. J'adore le fait que Webflow s'occupe également de cela, et je n'ai pas besoin de me procurer un plugin ou d'installer application tierce pour gérer les notifications et tout ça Nous sommes également en mesure de personnaliser ces notifications par e-mail lorsque notre site dispose d'un plan d'hébergement. Bien, voyons maintenant ce qu'il est advenu de notre formulaire envoyé. Accédez aux paramètres du projet et cliquez sur l'onglet Formulaire. C'est là que vous verrez la soumission. Il y a beaucoup de choses que nous pouvons faire avec ces soumissions. Nous pouvons supprimer. Nous pouvons l'exporter au format CSV. Une autre chose que nous pouvons faire est intégrer les soumissions de formulaires à d'autres applications. Par exemple, pour les outils de marketing par e-mail tels que Mailchimp, nouvelles soumissions peuvent être envoyées à ces plateformes de marketing par e-mail où vos clients peuvent en faire leur travail et publier de nouveaux bulletins d' information par e-mail, du matériel promotionnel et tout Et c'est tout ce qu'il y a à faire pour former des soumissions. 152. Introduction au freelancing: J'ai beaucoup appris jusqu'à présent. Excellent travail. À ce jour, vous avez une assez bonne expérience pratique avec Figma et Webflow Vous pouvez entreprendre un vrai projet et passer de la charpente à la conception puis à la construction de l' enchilata dans Cela ne signifie pas que vous savez tout faire. Je ne sais pas non plus tout faire, surtout lorsque les technologies du web changent constamment. Tu continues à apprendre. Lorsqu'un client me demande de faire quelque chose que je n'ai jamais fait, je vais en ligne et je cherche généralement des didacticiels vidéo s'ils existent. Si ce n'est pas le cas, je demande sur les forums. Et parfois, la plupart du temps, en fait, quelqu'un m'a déjà posé similaire et je peux déjà trouver une réponse sur un autre forum ou sur WebflowsFM, qui est une Je l'ai déjà mentionné , inscrivez-vous et allez sur Webflos et chaque fois que vous avez un doute, allez toujours sur la communauté Webflos et trouvez des réponses car chaque fois vous êtes bloqué, Je crée une solution pour le client. C'est le flux de travail quotidien d'un concepteur Web. Tu n'arrêtes jamais d'apprendre. Mais l'important, c'est que vous ayez suffisamment de bases pour entreprendre de vrais projets. Et c'est sur cela que nous allons nous concentrer sur cette partie du cours. Trouver du travail. Les concepts que vous apprenez peuvent également s'appliquer au travail à temps plein, mais nous nous concentrerons principalement sur le travail indépendant. Vous allez en apprendre davantage sur les stratégies de tarification, les propositions, plateformes de travail indépendant, les autres sites et les autres moyens de trouver du travail Et nous allons vous mettre en contact avec un superbe site Web de portfolio. Alors allons-y. 153. Site Web de portfolio: ai une entreprise avec deux de mes amis, et nous avons beaucoup embauché à l'époque. Et ce que la plupart des candidats feraient, c'est qu'ils se vendraient trop candidats feraient, c'est qu'ils se vendraient Ils venaient et disaient : « Tu sais quoi ? Oh, je ne suis qu'un débutant. Je n'ai pas beaucoup d'expérience , ah ah ah, mais, tu sais, j'apprends vite Mais ma conclusion en tant qu' employeur potentiel est que vous êtes nul. Comment puis-je le savoir ? Tu viens de me le dire. Il est difficile de se lancer dans une nouvelle profession, car les gens veulent engager des professionnels. Ils ne veulent pas des débutants, ils veulent des pros. C'est la vérité. Mais voici une grave erreur que beaucoup de gens commettent. Ils pensent qu'être un pro, c'est quelqu' un qui a des années d' expérience, pas du tout. Un pro est quelqu'un qui prend son travail au sérieux, quelqu' un qui semble capable de faire des choses et quelqu'un qui veut offrir excellent service à ses clients ou à ses employeurs. Alors, comment te faire passer pour un pro ? Pour commencer, il faut montrer ce que l'on est capable de faire. Et dans le design Web, cela se fait à l'aide d'un portfolio. Vous avez déjà conçu et développé deux projets dans le cadre de ce cours, et c'est déjà une bonne preuve. Mais ma recommandation serait de réaliser un autre projet, de la conception à la construction, en dehors de ce cours. Cela vous donnera trois pièces de portfolio, ce qui vous suffira pour commencer à postuler à un emploi. Et surtout, réaliser un autre projet indépendant vous donnera de la pratique et de l'expérience en dehors de ce cours guidé. Mais les pièces d'un portfolio ne suffisent pas pour avoir l' air d'un vrai pro. Nous avons besoin d'un site web de portfolio, car qu'en pensez-vous ? Un designer web professionnel n'aurait-il pas son propre site Web personnel ? Mais vous seriez surpris qu'un grand nombre de concepteurs de sites Web n' aient pas leur portfolio sur des plateformes telles que B hands ou Dribble, et c'est ce qu'ils partagent avec leurs clients potentiels, envoyant le lien vers leur profil contenant tous les travaux du portfolio téléchargés Je ne fais jamais ça. Tout d'abord, cela ne me fait pas passer pour un pro. En tant que concepteur Web indépendant, vous êtes essentiellement une entreprise qui fournit un service à vos clients, n'est-ce pas ? Et aucune bonne entreprise ne ferait jamais quelque chose comme ça. C'est comme être un photographe professionnel avec un portfolio uniquement sur Instagram. Je veux être un photographe professionnel qui possède son propre studio photo, pas seulement un profil Instagram. Ensuite, je les envoie chez d'autres bons designers. C'est juste une mauvaise idée. Je les aide à trouver quelqu'un d'autre. Je présente mon travail à côté des meilleurs travaux de design au monde. Et même si j'étais le meilleur candidat disponible pour eux, je n'ai plus l'air bien. Mon travail n'est pas aussi impressionnant que celui des meilleurs au monde. Et troisièmement, je perds l' occasion de leur présenter un argumentaire convaincant avec mon site Web, n'est-ce pas ? Je peux leur présenter mon processus de conception. Je peux écrire un contenu très convaincant et un droit de copie pour les convaincre que, vous savez, ils devraient m'engager Je pourrais les impressionner avec mon site Web lui-même, et je peux les inciter à agir pour qu'ils puissent me contacter ou, vous savez, soumettre un formulaire ou. Je ne dis pas que vous ne devriez pas avoir profils sur ces plateformes. Parfois, vous pouvez même y trouver du travail, mais ce n'est pas non plus un endroit pour orienter vos clients potentiels. De plus, vous êtes concepteur de sites Web. Vous n'avez jamais pensé à créer un site Web pour vous-même. Cela n'a tout simplement pas l'air sérieux. C'est comme être un mécanicien automobile qui n'a jamais possédé de voiture. site Web du portfolio peut faire beaucoup de ventes et de présentations pour vous Et des clients m'ont embauché simplement parce qu'ils aiment mon site Web. Sans même penser ou regarder le portfolio de mes pièces de portfolio, ils aiment vraiment le site Web lui-même. Sachant par expérience personnelle à quel point un bon site Web de portfolio peut vous aider, j'ai conçu et construit un site Web de portfolio génial pour vous. Ce modèle de portfolio est accompagné d'une mise en garde. De nos jours, beaucoup de mes étudiants travaillent freelance sur des plateformes comme Upwork et Nombre de ces étudiants utiliseront le même site de portfolio dans leurs projets de cours. Si vous envisagez également de travailler en freelance sur de telles plateformes, je ne vous recommande pas d' utiliser ce modèle de portfolio Il y a de fortes chances que le même client reçoive des offres de la part de deux de mes étudiants qui utilisent la même œuvre dans leur profil. Cela vaut également pour les projets de cours. En dehors des marchés indépendants, c'est bon. Le monde est vaste, mais marchés ressemblent davantage à de petits villages Dans ce cas, une meilleure approche serait de créer votre propre site de portfolio et quelques projets conceptuels indépendants. Ce sera également une bonne pratique pour vous. Vous pouvez également acheter un modèle de site de portfolio payant sur Webflos Il existe également des modèles gratuits, mais bien sûr, payants offrent de meilleurs designs, plus d'options et moins de chances que de nombreux autres freelances sur le marché utilisant le même modèle D'accord, donc si ces conditions vous conviennent, dans la vidéo suivante, je vais vous montrer comment installer ce site Web vous-même, comment ajouter votre propre contenu et comment apporter des personnalisations pour le rendre plus personnel 154. Visite du site Web Portfolio: Je vous montre comment installer un site Web et le déplacer vers votre compte Webflow Permettez-moi de vous faire visiter le site Web et de vous montrer ce qu'est le design thinking qui sous-tend tout cela Une partie du contenu que vous verrez sur une page est un texte d'espace réservé, comme ce titre Et dans la vidéo suivante où je vous montre comment installer ce site dans votre icône Webflow, vous allez remplacer le contenu générique par vos informations personnelles Le site Web est assez simple, comme les sites Web de portfolio sont censés l'être. Nous n'avons que deux pages, une page d'accueil et des pages CMS pour chaque projet. Le contenu du site Web est présenté dans un récit à la première personne. C'est un style que j' adore pour les sites web de portfolio. Si je regarde le portfolio d' une personne, je m'intéresse à la personne qui l'a créé Je veux donc assister à une interaction amicale afin de me faire une idée de la personnalité de cette personne. Vous souhaitez également avoir des informations claires sur ce que vous faites, quelle est votre spécialité Quel est le sujet de ce site Web ? Langage clair et direct. Je peux travailler avec toi ? Êtes-vous disponible pour travailler ? Comment puis-je travailler avec vous ? Quelles sont les étapes et ainsi de suite ? Également, présentation très directe du portefeuille. Certains sites Web de portfolio l' ont sur une page séparée, ce qui représente tout simplement trop de travail. Je dois trouver un lien, cliquer sur ce lien, attendre que la page se charge à nouveau pour enfin voir votre travail. J'aime donc montrer les pièces du portfolio sur la page d'accueil immédiatement après la section des héros. Ne te regarde pas droit dans les yeux. La façon dont vous présentez les éléments de votre portfolio est également importante. plupart des sites de portfolio que j'ai vus ont une manière créative très confuse mais souvent confuse de présenter des œuvres passées Souvent, ils n'utilisent que des miniatures, aucun titre, aucune description Tu dois arriver à une conclusion par toi-même. C'est pas cool de me faire travailler. Ici, comme vous pouvez le constater, tout est super clair. Nous avons un titre. Si nous ne savons pas de quoi il s'agit, il existe un titre plus petit indiquant les derniers travaux, a aucun moyen de s'y perdre. Une description du projet, ce qui est très important car de nombreux designers ne le font pas sur la page d'accueil. Il est possible que les clients ne consultent même pas la page du projet. Ils veulent obtenir des informations directement d'ici. Et il est important de leur dire de quel type de projet il s'agit. est vous qui l'avez conçu ? S'agit-il d'un travail individuel, d'un travail d'équipe ? Quel était votre rôle ? À quoi sert le site Web, etc. ? Ils veulent connaître ces informations essentielles pour comprendre ce qu'ils regardent J'ai également ajouté quelques balises pour fournir des informations lisibles sur des types de projets tels que le développement de Webflow, projet conceptuel. Dire qu' il s'agit d'un concept dans une balise est une façon subtile d'être honnête quant au fait qu'il s' agissait d'un projet conceptuel signifie qu'il ne s'agissait pas véritable projet rémunéré que vous avez réalisé pour une entreprise ou un produit existant. Mais vous l'avez fait soit pour la pratique, soit pour ce cours, soit pour toute autre raison. Vous voulez éviter toute déception gênante plus tard lorsque votre client vous posera des questions sur la société d'applications de chat pour laquelle vous avez travaillé. Et, bien sûr, de jolies maquettes du projet. La façon dont vous affichez les écrans du projet est également importante. La section « Ce que je fais » est exactement ce qu'elle dit. C'est un endroit où vous pouvez donner une description plus détaillée des services que vous offrez et présenter un peu plus de détails. Voici un conseil de rédaction professionnel. Si vous voulez écrire un texte convaincant, faites-le à leur sujet. Expliquez comment vous allez résoudre leurs problèmes et améliorer leur vie, et non pas à quel point la conception de sites Web et les idées de poupées sont votre passion. Enfin, section très évidente. S'ils veulent travailler avec vous, quelle est leur prochaine étape ? Regardons maintenant la page du projet. Les pages du projet sont assez simples, une description du projet et une grande capture d'écran. Il existe de nombreuses façons démontrer le travail de votre portfolio, mais c'est un style que j'utilise sur mon propre site Web, et je l'aime le plus. Certains designers aiment faire une étude de cas Ils auront donc une présentation détaillée du projet et une bonne explication du processus, des objectifs et des défis. En gros, une courte histoire sur la façon dont le projet s'est concrétisé. Il s'agit d'une excellente approche montre tout le travail que vous y avez consacré et montre à vos clients potentiels les coulisses de votre processus. La raison pour laquelle je ne fais pas cette étude de cas est simple. C'est beaucoup de travail. L' avantage n'est pas si important, principalement en raison de l'identité de notre public cible. En tant que concepteurs Web indépendants, nos clients sont 90 % du temps des entrepreneurs non concepteurs. Un bon portfolio avec de simples captures d'écran de votre mot de passe est suffisant pour eux. Ils ne vont pas approfondir l'étude de cas de toute façon Ils apprécieront votre présence et auront encore plus d'estime pour vous, mais la quantité de travail que nous devons consacrer à la création de l'étude de cas pour chaque portfolio est trop importante. Peut-être qu'au début, nous aurons assez de passionnés, mais plus tard, nous n'en aurons plus, et nous n'allons tout simplement pas maintenir notre site Web à jour à cause de cela. C'est là que nous allons nous tromper à l'avenir, car la mise à jour du portfolio va demander tellement de travail que nous ne le ferons tout simplement pas et nous nous retrouverons avec un ancien portefeuille, et c'est le pire des résultats. Vos conceptions vont changer en pro et général les tendances en matière de conception Web changeront, sorte que vos anciennes conceptions auront un aspect vieillot et non moderne. Mais s'il est très simple de le mettre à jour, vous serez davantage encouragé à le maintenir à jour. La proie du projet a donc juste besoin d'un paragraphe de description et d'une capture d'écran, que vous pouvez exporter directement depuis Figma, c'est tellement simple Le lien vers le site Web en ligne est facultatif. C'est très utile pour les clients qui étudient le projet. Ils peuvent voir le site Web en action jouer avec lui et voir tout le travail que vous avez effectué, pas seulement des captures d'écran, mais aussi des interactions et tout le reste. Bien que j'aie une règle à ce sujet, ne propose que des liens vers des sites Web en direct dont vous êtes fier. vrais sites Web clients sont des organismes vivants, et lorsque vous en avez terminé avec un projet, le client peut changer des choses sur le site Web. Ils peuvent ajouter une nouvelle section, changer les choses eux-mêmes, engager quelqu'un d'autre pour toute nouvelle mise à jour, etc. Ainsi, à un moment donné, vos précieux designs peuvent finir par paraître horribles, et vous ne voulez pas mettre en valeur un site Web qui a été ouvertement massacré Même si c'est vous qui massacrez. Eh bien, c'est ça. minimaliste, beau Site Web personnel minimaliste, beau et solide pour démontrer votre travail et montrer à vos clients potentiels votre professionnalisme et vos compétences en conception Web 155. Installing portfolio website: Dans cette vidéo, je vais vous montrer comment installer le site Web du portfolio dans votre propre compte Webflow Vous pouvez donc le personnaliser, modifier des éléments, modifier du contenu, même personnaliser le style et publier en tant que site Web personnel. J'ai créé une vitrine de ce projet ici. C'est un endroit où les concepteurs de Webflow peuvent partager leurs projets avec d'autres. Cliquez sur ce lien pour accéder à la page, aux liens contenus dans les ressources de cette vidéo. Une fois sur cette page, vous verrez ce bouton de clonage qui vous permet de cloner l' intégralité du projet dans votre propre compte. Cliquez dessus. Un message d'avertissement indique que nous pouvons créer un nouveau projet notre compte car nous avons atteint la limite. Dans le cadre du plan gratuit, vous ne pouvez avoir que deux sites non hébergés dans Webflow Donc, puisque vous avez déjà créé deux projets, l'application de chat et les sites Web TeamMP, vous serez confronté à ce problème Trois options s'offrent à vous. Passez à un plan payant, créez un compte distinct ou supprimez l'un des projets existants. Bien, une fois que vous aurez résolu ce problème de limite, vous pourrez créer un nouveau site. C'est ça. Vous avez maintenant votre version de ce site Web. Vous savez déjà comment faire tout ce que vous devez faire ici, mais laissez-moi vous montrer ce que vous devez modifier. Tout d'abord, le nom. Le logo n'est qu'une étiquette, alors inscrivez simplement votre nom comme vous le souhaitez, si vous voulez un prénom et un nom de famille ou simplement un prénom ou simplement un nom de famille, comme vous préférez. Il y a aussi le nom dans le titre. N'oubliez pas de changer cela. Il y a le nom dans le pied de page ainsi que dans le texte du copyright, inscrivez-y vos prénom et nom Enfin, il y a des noms dans les champs SEO. Page d'accueil à deux endroits et modèle de projet. Ensuite, il y a des liens de courrier électronique à deux endroits. Il y en a un dans la barre de navigation et un dans le pied de page. Comme on pouvait s'y attendre, la barre de navigation et le pied de page sont tous deux des composants donc également synchronisés sur la page du projet Ce sont des liens e-mail, vous devez donc mettre votre adresse e-mail dans le lien. Ainsi, lorsque les gens cliquent dessus, nouvel e-mail est pré-rempli avec votre adresse. R N'oubliez pas de modifier à la fois le texte et le paramètre du lien. C'est tout pour les informations personnelles. Le reste est du contenu que vous pouvez mettre à jour comme vous le souhaitez. Ou ne vous sentez pas libre de le garder tel quel, mais lui donner une touche plus personnelle serait une meilleure idée. Vous pouvez donner à ce site Web vos propres couleurs si vous le souhaitez. La mise à jour est très simple. Toutes les couleurs sont globales. Cela signifie que vous pouvez mettre à jour la couleur globale, et toutes les instances de cette couleur seront mises à jour instantanément. Cliquez sur Modifier et choisissez simplement une autre couleur sur la carte ou collez le code couleur. La même chose que vous pouvez faire sur la couleur de surbrillance. La même chose que vous pouvez faire sur la couleur de surbrillance. Quelle que soit la couleur que vous utilisez pour les arrière-plans, n'oubliez pas de mettre à jour les vignettes du projet Comme il s'agit d'images indépendantes, elles ne sont pas automatiquement mises à jour avec une couleur globale. J'ai préparé un fichier Figma pour ces vignettes afin que vous puissiez facilement les mettre à jour et en exporter de nouvelles ultérieurement. Laissez-moi vous montrer comment j'ai créé cet effet de surlignage afin que vous sachiez comment le réutiliser si vous le souhaitez. Le texte surligné se trouve à l'intérieur d'un bloc DV, qui contient un élément d'en-tête et un bloc DV normal comme Highlight a un positionnement absolu. C'est pourquoi il est empilé derrière le texte. Si vous souhaitez surligner un autre élément de texte, copiez simplement l' intégralité de cette zone de surlignage et modifiez le texte qu'il contient. En raison de ces points saillants, ce titre n'est pas un texte fluide Il s'agit d'un ensemble d'éléments en ligne indépendants placés les uns à côté des autres Pour déplacer l'ordre, vous devez donc faire glisser les éléments ou modifier l'ordre dans le navigateur N'oubliez pas que le texte surligné peut s'étendre sur deux lignes. Essayez donc de surligner un maximum de deux mots consécutifs, comme concepteur Web ou placez plusieurs cases de surlignage l'une à côté de l'autre si vous avez vraiment besoin d'un surlignage plus long. Les surlignages des liens fonctionnent un peu différemment. En fait, c'est beaucoup plus simple que les gros titres. Ce n'est qu'une ombre en forme de boîte. Et si vous devez appliquer ce style ailleurs, sélectionnez simplement une classe nommée yellow link. Et le texte surligné sera ajouté avec son effet de survol. Comme vous l'avez probablement remarqué, la page présente des interactions vraiment intéressantes, comme les surlignements lors du chargement de la page et cette ligne de défilement qui se déplace comme un serpent de haut en bas. Laissez-moi vous montrer où se trouvent ces objets. Si vous accédez au panneau Interactions, vous verrez qu'il y a trois interactions lors du chargement de la page. Il existe des interactions assez simples. Le premier contrôle ces points forts. deuxième concerne le contenu glissant, et le troisième concerne la ligne de défilement dans la boucle. n'aurez probablement pas besoin de modifier tout cela à l'exception d'un surlignage, car si vous ajoutez des éléments de surlignage, vous devrez également les ajouter à l'interaction. Par exemple, cette nouvelle zone surlignée ne s'anime pas. Le mieux est de simplement ajouter du texte dans les zones de surlignage existantes. Mais si vous devez vraiment en ajouter de nouveaux, voici ce que vous devez faire pour que le nouveau texte s'anime également L'animation des surlignages est très simple. La case varie simplement de 0 % à 100 %. C'est tout L'état initial est défini sur une échelle verticale nulle. Et puis il passe à un, ce qui signifie 100 %. Il pousse donc de 0 à 100 % dans sa taille d'origine. Et la même chose est faite pour chaque point fort indépendamment. C'est pourquoi le premier court, puis le second. Donc, pour animer le troisième, sélectionnez-le sur le canevas et dans les états initiaux, lorsque cette icône plus apparaît, cliquez dessus, sélectionnez l'échelle et mettez zéro sous la valeur X. Mais avant cela, désactivez ce verrouillage car cela préserve le rapport hauteur/largeur, ce que nous ne voulons pas. Nous voulons qu'il rétrécisse et qu'il grandisse uniquement horizontalement. Nous devons maintenant ajouter un état final, qui consiste à le ramener à un état, et nous allons l' ajouter à la fin. Pourquoi ? Parce que nous voulons qu'il s'anime l'un après l'autre, pas en même temps. Encore une fois, désactivez le verrou et placez-en un sous la valeur X. Lancez l'animation pour voir comment elle fonctionne. Cela fonctionne bien, il suffit de faire correspondre l'assouplissement à celui des autres. J'utilise quatre secondes et 0,6 seconde. Vérifiez donc l'aperçu. Je suis parfaite. En ce qui concerne les autres interactions, vous n'aurez probablement rien à changer, mais si vous le faites, tous les paramètres sont visibles pour que vous puissiez voir comment ils sont configurés et ce qui doit être modifié. Pour trouver ces interactions, vous devez sélectionner un élément approprié. L'interaction apparaît donc dans le panneau. interactions déclenchées par le chargement d'une page apparaissent en permanence, quel que soit l'élément sélectionné, mais pour celles qui ont un déclencheur d'élément, vous devez sélectionner l'élément déclencheur exact. Pour trouver ces interactions, vous pouvez les consulter dans le navigateur. Tous les éléments déclencheurs sont accompagnés de cette icône en forme d'éclair. Cela signifie qu'il y a une interaction sur cet élément. Par exemple, un emballage de boutons. C'est là que l'interaction avec le pointeur la souris pour le bouton est configurée. Bien, la dernière chose importante que vous devez savoir est de savoir comment gérer des projets. Ce sont des éléments du CMS, vous pouvez donc les gérer facilement dans le CMS. Je vais ajouter un nouveau projet afin que vous puissiez voir de quoi il s'agit. Nom, description, assez simples. Vous devez générer deux images pour les nouveaux projets, une miniature pour la page d'accueil et le plein écran du Le mode plein écran est simple. Dans figma, allez au design de votre page et exportez le cadre entier. Ensuite, téléchargez-la dans le champ correspondant, mais assurez-vous de compresser l'image, sinon le fichier sera très volumineux. Pour ce qui est de la miniature, rendez-vous ce fichier Figma que j'ai partagé avec vous, cliquez sur le lien vers les ressources Il existe une page appelée Ressources, laquelle vous pouvez créer vos miniatures Au fait, vous verrez ici qu'il y a un favican et un clip web Utilisez-le pour générer les vôtres et les mettre à jour dans les paramètres de votre projet. Faites glisser l'image à l'intérieur. Et positionnez-le comme vous le souhaitez. Et en va de même pour le groupe arrière. Exportez ensuite la miniature et téléchargez-la dans le CMS. Ensuite, vous avez une URL de site en ligne. Si vous laissez ce champ vide, le lien n'apparaîtra pas. Vous pouvez donc le laisser vide sans problème. Assurez-vous d'activer cette option. C'est pour que le projet apparaisse sur la page d'accueil. Je l'ai ajouté afin que vous ayez la possibilité de désactiver ou d' activer n'importe quel projet sur la page d'accueil. Si vous vous demandez comment j'ai fait cela, ce sont les filtres. J'ai donc créé ce bouton et sur la page d'accueil, puis j'ai créé le filtre pour la liste des collections en disant d'afficher ceux pour lesquels le bouton est activé. C'est assez facile. Ensuite, vous avez ces trois balises qui apparaissent sous le titre. Et c'est tout. Une fois que vous avez enregistré, allez sur la page d'accueil, vous pouvez voir que le nouveau projet va apparaître au-dessus des autres. Et il renvoie à la page du projet, qui est également prête. C'est tout ce que vous devez faire pour ajouter d'autres projets. D'ailleurs, ces projets sur la page d'accueil sont une liste de collection. Tu t'en souviens ? Le contenu est lié aux champs du CMS. En outre, un ordre de tri est appliqué à la liste des collections. Je l'ai réglé du plus récent au plus ancien en fonction de la dernière mise à jour de l'élément du CMS. Si vous souhaitez changer cet ordre de tri, vous pouvez le faire ici, du plus ancien au plus récent peut-être. Eh bien, ce sont toutes les choses importantes que vous devez savoir à propos de ce site. Si tu es bloqué, fais-le-moi savoir et je t'aiderai. 156. Trouver du travail en ligne: Pour travailler et où le trouver. Il existe de nombreuses façons pour un concepteur Web indépendant de trouver du travail La toute première option, qui est évidente, est d'utiliser des plateformes en ligne comme freelancer.com et évidemment org.com, ou localement, dans la ville où vous vivez et de nouer des contacts avec des acteurs de l'industrie, de créer un réseau avec des entreprises en démarrage, assister à des conférences techniques, faire des amis avec d'autres concepteurs Web à succès qui peuvent vous envoyer du travail, car ce arrive souvent avec les concepteurs de sites Web, c'est qu' ils sont complets parce que, vous savez, un designer ne peut créer qu'un seul site Web à la fois, n'est-ce pas ? Vous ne pouvez pas créer dix ou 20 sites Web simultanément. Les bons designers obtiennent donc très facilement un livre, puis ils envoient des œuvres à leurs amis ou d' autres personnes qu'ils recommanderaient à leurs clients, etc. De plus, LinkedIn et les sites d'emploi classiques comme Supercruter offrent suffisamment de moyens pour trouver Et si vous recherchez ceci sur Google, vous trouverez de plus en plus d'options. La question est de savoir laquelle de ces options est l' endroit idéal pour chercher du travail ? Des choses comme vos compétences actuelles, votre personnalité ou votre expérience, l'endroit où vous vivez, la ville dans laquelle vous vivez. Toutes ces choses détermineront laquelle de ces options vous convient le mieux à ce stade. Je peux vous dire lequel fonctionnera le mieux pour vous. Personne ne le peut, mais la meilleure approche consiste à choisir un à la fois et à parcourir la liste. Dans cette vidéo, je vais parler plateformes en ligne et de la recherche d'emploi sur les plateformes en ligne. Je vais vous donner un aperçu général des plus importants. Elles sont nombreuses. Il y a Upwork, il y a la fibre, il y a freelancer.com. Nombre de personnes par heure, tuile supérieure, etc. La liste est interminable. Et si vous le recherchez sur Google, vous en trouverez de plus en plus. Et chaque année, évidemment, de plus en plus de ces plateformes apparaîtront. La concurrence change au fur et à mesure que certains d'entre eux perdent leur première place, d'entre eux perdent leur première place, que d'autres les remplacent ou que de nouveaux apparaissent. Tout d'abord, Upwork. C'est là que j'ai trouvé mon succès. J'ai trouvé assez de travail sur Upwork pour être occupé à plein temps. Upwork est énorme. C'est une entreprise publique, ce qui signifie qu'elle négocie en bourse. Je pense que c'est la première plateforme de freelancing à devenir publique. Les emplois y sont nombreux, ce qui signifie que la concurrence est galopante ce qui signifie que la concurrence est J'ai une vidéo dédiée à Upwork et à la manière d' y parvenir, nous en parlerons donc en détail ici Je vais vous apprendre quelques stratégies pour réussir et quelques erreurs courantes à éviter. Ensuite, nous avons Fiber, qui est légèrement différente sur Upwork : les clients publient des offres d'emploi et les indépendants proposent des offres, mais sur Fiber, les indépendants publient services et les clients les achètent directement Par exemple, ce freelance affirme qu'il concevra un site Web Webflow réactif pour Et il propose trois forfaits différents, de base, standard et premium. J'aime bien cette approche basée sur le service sur la fibre optique. En fait, j'ai fait mon premier travail indépendant sur la fibre optique. C'était il y a longtemps. J'ai fait des designs de CV pour cinq dollars. À l'époque, en ce qui concerne la fibre optique, c'est le prix que vous ne pouviez facturer que cinq dollars et proposer quelques améliorations. Mais comme prix de base pour chaque service répertorié, il y avait cinq dollars, d'où le nom fibre. Ils ont changé d' approche depuis lors et vous pouvez désormais fixer le prix de vos services comme vous le souhaitez. J'ai souvent embauché des freelances sur fibre optique pour effectuer des petits travaux de traduction, de montage vidéo, etc. En tant que client, c'est formidable de simplement acheter un service qui ressemble à un produit fini complet. Pas de négociations et tout ça. D'ici, envoyez les détails, attendez quelques jours pour les résultats, et c'est fait. Vous définissez même des dates de livraison spécifiques que vous devez respecter une fois que vous avez obtenu toutes les informations et tous les actifs du client. Donc, si je devais créer un service de conception Web ici, voici probablement ce que je ferais personnellement. Je dirais que je vais créer un site Web pour un type d'entreprise spécifique. Par exemple, un site Web pour les indépendants ou un site Web de portfolio pour les comptables, etc. Je vais créer de nombreux concerts de ce type. est comme ça que ça s'appelle ici, puis je vais créer quelques modèles ou simplement utiliser des modèles de Webflow Marketplace Il existe de nombreux modèles magnifiques vendus sur Webflow, et il existe même de très bons modèles gratuits Je compterais le coût du modèle dans le prix total, utiliserais peut-être des modèles gratuits pour les prix de base, puis j'aurais des modèles payants à des prix premium. Ensuite, lorsque les gens achetaient mon concert, je leur demandais de choisir modèle qu'ils souhaitaient et de proposer des couleurs, types ou d'autres personnalisations en fonction de leur marque De cette façon, les clients savent à l'avance ce qu'ils obtiennent. Aucune discussion sur les designs, et je n'ai pas à concevoir et à créer un site Web complet à partir de zéro. Je simplifie grossièrement le processus ici, bien sûr. Je pourrais faire un cours complet sur ce sujet. N'oubliez pas que vous créeriez un service complet prêt à l'emploi pour vos clients. Vous devrez y réfléchir longuement pour créer un package vraiment intéressant, et nous ferons quelques essais et erreurs jusqu'à ce que vous obteniez le bon résultat. En fait, c'est exactement ce que je faisais avec la conception de CV. Je leur proposais environ cinq modèles de CV parmi lesquels choisir. Ils le choisiraient, puis je remplirais leurs coordonnées et c' était fait. Personne ne s'est jamais plaint du design parce qu'ils savaient ce qu'ils voulaient obtenir dès le départ Ensuite, nous avons LinkedIn. ne s'agit pas d'une plateforme de freelance typique comme Upwork ou Fiber Cela fonctionne très différemment. Sur LinkedIn, les clients ne publient généralement pas de petites offres d'emploi indépendant et n'attendent pas les offres. Il s'agit plutôt de vous positionner et faire découvrir ou de contacter directement les gens. Il existe différentes manières de travailler ici. Tout d'abord, vous pouvez utiliser la section des emplois et rechercher des postes tels que concepteur Web ou demander à LinkedIn lui-même de recommander des emplois en fonction de votre profil. Certains d'entre eux sont des postes indépendants ou contractuels, mais beaucoup sont des postes à temps plein, ce que je recommande certainement aux débutants d'envisager. En tant que débutant, vous souhaitez élargir au maximum vos options et ne pas vous limiter au travail indépendant. Si vous vivez dans une grande ville développée, vos options seront meilleures car les emplois ici sont orientés vers des recrutements locaux Mais il existe également des options à distance , que vous pouvez explorer pays par pays. Notez toutefois que même les postes distants nécessiteront souvent une embauche locale basée dans le même pays. Donc, si vous êtes basé dans un pays développé, cela réduira un peu vos options. Mais il n'est toujours pas à réduire. Beaucoup de mes étudiants ont trouvé travail à distance en dehors de leur pays. L'avantage de rechercher un poste plus permanent par rapport au travail indépendant est que vous n'avez besoin d'avoir de la chance qu'une seule fois Donc, même la stratégie de la botte de foin vaut la peine d'être essayée. Si vous êtes basé à U, cette limite de dépenses à l'échelle du pays vous est légèrement Pour les entreprises européennes, passer des contrats dans l'ensemble de l'UE est une pratique simple et courante. De nombreux postes permettront d'accueillir candidats de l'ensemble de l'UE. Mais ce n'est pas le principal avantage de LinkedTI. La véritable opportunité vient de la sensibilisation. De nombreux freelances sur LinkedIn recherchent des propriétaires d'entreprises, des fondateurs, des startups ou des niches spécifiques comme des dentistes, des salons ou des agences, et les contactent avec leurs Ou ils recherchent des publications d'autres personnes qui recherchent un concepteur Web ou un développement de site Web, puis ils envoient des messages directement à ces personnes. Beaucoup de mes étudiants mentionnent LinkedIn comme source de travail Cela vaut donc vraiment la peine d'être exploré. Si je commençais aujourd'hui, j'utiliserais certainement LinkedIn plus d'au moins une plateforme de freelance Ces trois plateformes offrent certainement le plus d'opportunités et devraient être la première ligne d' approche pour vous, mais il existe d'autres plateformes qui méritent d'être mentionnées. personnes par heure est en quelque sorte un mélange entre la fibre et Upwork Les clients peuvent trouver des freelances directement en recherchant des compétences spécifiques, puis en consultant profils des freelances et en les contactant En outre, ils peuvent publier des projets comme Upwork et freelancer et recevoir des propositions de Et tout comme Fiber, vous pouvez publier des services ici. Ils appellent ça des offres sur Fiber, ça s'appelle le concert. J'ai utilisé PeoplePerHour à la fois en tant que freelance et en tant que client J'ai fait quelques conceptions de CV ici à cette époque, et j'ai embauché des concepteurs et des développeurs Web à plusieurs reprises ici. Top tell est un site indépendant qui a une approche assez différente des autres. Ce site va être un peu tôt pour vous dans votre carrière, mais je vais quand même vous en parler pour que vous sachiez ce qui s'y trouve. Top Tell a un processus de sélection très rigoureux pour les freelances Ils font des entretiens, des défis, des revues de portfolio avant de vous accepter sur la plateforme. Ils veulent y trouver les meilleurs talents, d'où le nom des dix meilleurs. Comme ils le prétendent, seuls 3 % des candidats sont sélectionnés. Pensez donc à Toptal une fois que vous aurez excellé dans vos compétences. Cela signifie bien entendu que les clients qui recherchent des indépendants sur ce site recherchent un service haut de gamme et n'ont pas peur de payer en conséquence Comme vous pouvez le constater, même sur les plateformes en ligne, il existe des endroits où trouver un travail bien rémunéré. Dans l'ensemble, les possibilités sont infinies en ligne, mais la concurrence est également féroce, car il existe de nombreux concepteurs de sites Web. C'est le monde entier qui se dispute les services. Mais ne vous découragez pas. En réalité, la plupart des concepteurs de sites Web et la plupart des talents qui postulent pour des emplois sur ces plateformes sont nuls. Ils ne sont même pas médiocres. Ils sont en dessous de la moyenne. Les clients ont également du mal à trouver de bons talents. Souvent, mes clients, lorsqu' ils viennent me voir je suis occupé, que j'ai peut-être plein et que je n'ai pas la capacité de prendre de nouveaux projets, me demandent : « D'accord, alors connaissez-vous quelqu'un d'autre que vous pourriez recommander parce que nous sommes allés sur ce site et que nous n'avons trouvé personne concurrence et de la concurrence et du bruit qui se produit là-bas ». Il est un peu difficile de trouver le talent qui leur convient. Et le truc avec cette plateforme, c' est que parce que tout peut s'inscrire, qu'elle est ouverte le monde et que le monde est vraiment vaste, vous avez tellement de personnes qui s'y joignent sans même avoir la moindre compétence Par exemple, les gens prétendront qu'ils sont des concepteurs de sites Web et qu'ils feront tout avant même un cours de conception Web, n'est-ce pas ? Si vous pouvez imaginer, n'importe quel enfant ou n'importe qui vient ici et pense, vous savez, que je vais gagner beaucoup d'argent en ligne, et il commence par dire : «   Eh bien, faire de la conception de sites Web ». Je viens d'installer un site Square Space pour quelqu'un ou je viens d'apprendre à installer un thème WordPress. Et maintenant je suis concepteur ou développeur Web, non ? Et pour quelqu'un comme vous qui y a consacré tant de travail, et soyons honnêtes, ce cours était vraiment énorme. Donc, si vous travaillez et si vous y travaillez si vous prenez cela au sérieux, vous serez imbattable Et si vous offrez bon service et que vous offrez un bon service avec le peaufinage et les processus que vous avez déjà définis, en ayant un excellent site Web , en présentant des portfolios et en suivant quelques autres trucs et astuces que je vais vous enseigner plus tard dans cette partie du cours, vous aurez une longueur d' avance sur vous aurez une longueur d' avance concurrents qui ne font que déconner, un bon service et que vous offrez un bon service , avec le peaufinage et les processus que vous avez déjà définis, en ayant un excellent site Web, en présentant des portfolios et en suivant quelques autres trucs et astuces que je vais vous enseigner plus tard dans cette partie du cours, vous aurez une longueur d' avance sur vos concurrents qui ne font que déconner, pas sachant ce qu'ils font dans la réalité, et ce ne sont que des personnes choisies au hasard dans le monde entier. 157. 151 Trouver des studios de travail: Trouver du travail en ligne n'est pas le seul endroit. Nous avons également de nombreux emplois disponibles localement. Dans l'un de ces endroits se trouveraient des studios. Il s'agirait donc d' agences de marketing, d'agences numériques, agences de création, de studios de design. Je ne sais pas Ils portent de nombreux noms différents. Il s'agit essentiellement d' entreprises qui font conception de sites Web et du travail numérique pour leurs clients. Qui peut être un client individuel ou un client d'entreprise, n'est-ce pas ? Donc, s'il s'agit d' agences de publicité, par exemple des agences de marketing, elles sont embauchées par grande entreprise qui a besoin d' une page de destination ou d'un site Web. Donc, ce type de studios qu'ils embauchent, ils ont du personnel interne, n'est-ce pas ? De toute évidence, ils ont des concepteurs et des développeurs internes et tout ça. Mais ce qui se passe, c'est de nombreuses agences de taille moyenne, moyenne ou moyenne comme celle-ci et des studios. Ils ont peu de personnel en interne et ils ont comme une armée de travailleurs indépendants de Floride Ils font la majeure partie de leur travail. C'est ainsi qu'ils fonctionnent. Mon plus gros engagement professionnel a été en fait avec ce studio. Nous avons travaillé pendant longtemps. Ils m'ont envoyé une tonne de travail et j'ai beaucoup appris grâce à eux. Et cela ne signifie pas qu'il doit s'agir studios locaux pouvant provenir de différents pays, différentes villes et même de différents continents. Je travaille moi-même avec le studio qui se trouvait en Australie et très, très loin de chez moi, c' est-à-dire en Europe et au Portugal. Maintenant, la façon dont vous pouvez aborder les studios dépendra du cas par cas, mais voici quelques stratégies pour les aborder J'ai un ami qui est illustrateur et il a cette approche Alors qu'une fois que je lui ai demandé , comment obtenez-vous vos clients ? Parce qu'il ne travaille pas sur les plateformes de freelance de Floride. Et il m'a dit qu' il ne faisait que les spammer. Il a donc cette liste d'e-mails de différents clients potentiels tels que des agences, des entreprises, des agences de publicité qui publient des livres ou des magazines parce que c'est le type de clients avec lesquels il travaille. Et chaque fois qu'il a besoin de travail, en temps, il envoie des e-mails à l'aide d'un logiciel de messagerie. Et en gros, il va demander du travail en disant : «   Oh, avez-vous besoin d'un illustrateur ou quelque chose comme ça Je ne sais pas exactement quels sont les utilisateurs fiscaux et comment il les aborde, mais je sais qu'il se renseigne et demande s'ils ont besoin d'un illustrateur Et ce qui se passe, c'est que parfois, au moment précis, l'une de ces entreprises aura besoin d'un illustrateur pour ce moment précis Alors ils lui reviennent en disant que, oh oui, nous avons vraiment besoin d'un illustrateur Il est embauché. Et c'est une bonne approche parce que cela fait gagner du temps à l'autre. Ils n'ont donc pas à publier une offre d'emploi sur des plateformes de freelance ou ailleurs, à parcourir les portfolios de différentes personnes et à les interviewer à un niveau supérieur à tout cela C'est très facile quand quelqu'un est déjà venu vous voir au bon moment. Chaque studio de design aura son propre style de design, comme il le fait sur les sites Web. Nous aurons des approches spécifiques pour les designs. Il peut s'agir d'un peu plus de conceptions basées sur des illustrations plus de photographies, conception davantage basée sur le type et la mise en page. Donc, lorsque vous abordez cette question, lorsque vous décidez de vous adresser à ce studio de design, passez en revue des exemples de travail et la plupart d' entre eux auront évidemment leur portfolio sur leur site Web, les parcourront, comprendront et type de style qu'ils utilisent dans leur approche, ceux que vous associez au style ou que vous affinez votre portfolio de manière à ce ceux que vous associez au style ou que vous affinez votre portfolio de manière à comblent le fossé entre votre travail et leur portfolio pour qu'il corresponde autant que possible Parce que nous savions que cela s'appliquait aux studios. Ils vont voir s' ils ont moins que les dizaines et les centaines de candidats différents qu'ils recherchent. De toute évidence, ils vont avoir tendance à choisir quelqu'un qui correspond vraiment à leur style. Parce qu'ils savent qu'ils le feront, vous pourrez facilement vous intégrer à leur conception, à leur flux de travail. Ils n'ont donc pas à vous former si vous êtes illustrateur et qu'ils préfèrent les sites Web basés sur la photographie. Maintenant, ils devraient vous former à nouveau sur la façon de faire de la photographie, sinon ils devront complètement changer et modifier votre style de conception donc l'écart entre ce poste et votre portefeuille et vous augmenterez vos chances d'être embauché par eux. Lorsque j'étais à la tête d'une entreprise, nous l'avions mis en ligne et nous avions évidemment tout un tas de candidats qui y postulaient. Mais l'un de ces gars, l'un des candidats, s'est présenté à notre porte. Il vient d'arriver dans notre bureau et j'avais un curriculum vitae et un CV imprimés de lui. Et il vient de le remettre. Il a dit que j'allais aimer l'Ohio. Je postulais pour cette offre d'emploi et je voulais simplement la joindre personnellement à mon CV. Et j'ai été très surprise mais aussi très impressionnée de voir ces gars avoir la confiance et l'audace se présenter et postuler pour le poste Et lorsque j'ai dû passer en revue 200 demandes d'emploi différentes, une personne s'est vraiment démarquée , évidemment parce que vous vous êtes présentée. Personne d'autre ne l'a fait et personne d'autre n'a rien fait différemment. Et c'est drôle, j' aurais probablement jeté sa candidature s' il ne s'était pas présenté parce que CV, sa candidature n'était pas assez solide et son expérience n'était pas assez bonne pour ce que nous recherchons. Mais comme vous vous êtes présenté, votre amino est mémorable, j' aime bien cette confiance et qu'il a une attitude plutôt proactive et qu'il a obtenu l'entretien, il a sauté la partie entretien et est passé à la phase finale, à la phase sélection finale pour les trois autres finalistes Et il l'a obtenu uniquement parce qu'il s'est présenté. Parfois, il suffit de vous présenter et de remettre votre portfolio imprimé, car peu de personnes le font. Les personnes qui embauchent sont occupées et apprécient toute mesure supplémentaire que le candidat peut prendre. Personne ne peut vous rapprocher de l'opportunité d'emploi. Les personnes qui travaillent dans ces studios utilisent LinkedIn et Facebook peuvent certainement trouver des personnes qui travaillent dans ces studios, peuvent certainement trouver des personnes qui puis communiquer avec elles directement ou en utilisant d'autres sites de réseaux sociaux, probablement comme Facebook, Instagram, Twitter et leur envoyant des messages directs. Personnellement, je n'ai jamais fait ça, mais je connais beaucoup de freelances font des choses comme ça Ils entrent en contact avec les personnes qui sommeillent en vous, même celles qui recrutent les directeurs ou les fondateurs des studios. Si vous êtes ce genre de personne et si vous pouvez facilement entrer en contact avec des inconnus, essayez-le. Je ne suis pas ce genre de personne et ça ne marche pas pour moi, mais c'est peut-être bien pour toi. Donc, il suffit de le lancer comme une idée 158. Trouver un emploi : réseautage: autre option évidente mais souvent négligée réseautage est une autre option évidente mais souvent négligée pour trouver du travail. Dans toutes les grandes villes, il y a des essaims d'entrepreneurs et de startups qui se bousculent et essaient de faire fonctionner leur entreprise et ils ont tous besoin Vous êtes sur un très bon marché. Toutes les entreprises, qu'elles soient petites ou grandes, internationales ou locales, même les professionnels individuels comme vous et moi, les photographes, les coachs, les organisateurs de CMI, ont tous besoin d'un site Web Où travaillez-vous en réseau ? Commencez par Meet Up. Meet up, si vous ne l'avez jamais utilisé, est un lieu où les gens organisent différents événements autour d'un thème ou d'un sujet spécifique. Par exemple, ce groupe, Lisbon UX, organise différentes rencontres et événements liés au design dans ma ville. interprètes, les startups, les autres designers sont des contacts très précieux pour vous, et ils participent souvent à de telles réunions parce qu'ils organisent leur propre type de réunions et organisent leurs propres conférences, ateliers et différents types d'événements qui attirent les bonnes personnes qui pourraient vous être utiles en tant que Une fois, j'ai obtenu un concert dans le cadre d'un tel événement. J'ai déjà assisté à un atelier sur la façon de créer un cadre pour mon site Web Vraiment, j'ai participé à un atelier à ce sujet. Je n'avais pas besoin d'apprendre, mais je me suis dit : tu sais quoi ? Ça va être amusant. Et que sais-tu ? Ça m'a donné un concert Même si vous rencontrez Right Crowd en mitaps, vous vous rendrez compte que beaucoup d'entre eux n' ont pas un budget suffisant vous payer correctement pour des projets de sites Web C'est une bonne chose lorsque vous débutez et que vous sacrifiez un peu de salaire pour l'expérience et le réseau, mais ce n' est pas la meilleure option par la suite les conférences technologiques ou autres conférences liées aux startups sont un meilleur endroit pour trouver de plus gros poissons . Les startups se rendent souvent dans de tels endroits pour exposer leurs produits, trouver des investisseurs ou trouver des clients pour leur entreprise. Certaines de ces conférences sont payantes, il est donc préférable de les organiser ultérieurement, une fois que vous aurez commencé freelance et que vous aurez les moyens de vous payer un peu pour le marketing De nombreuses villes auront des incubateurs de startups et vous pouvez vérifier si votre ville possède de tels incubateurs, car ces lieux réunissent en quelque sorte de nombreuses startups, puis ils organisent toujours différents événements, démonstrations, etc., et beaucoup d'emplois et de travail indépendant peuvent être trouvés au sein de cet écosystème et de cet environnement Et beaucoup de personnes qui sont des sites Web, des concepteurs ou des développeurs forment public nombreux et entretiennent bonnes relations pour vous permettre de vous développer et de vous développer. Et si vous détestez le réseautage, ne le faites pas. Consacrez votre temps et vos efforts à quelque chose convient mieux à vous et à votre personnalité. Personnellement, je n' aime pas le réseautage. Je préfère mâcher du verre plutôt que d'aller parler aux gens. Il est toujours préférable de concentrer vos efforts sur quelque chose qui vous convient. J'ai une règle pour toi. Ne faites rien qui puisse vous faire détester le design Web. aimer et d'apprécier design Web est essentiel à votre succès. Un meilleur facteur de rentabilité et réussite que n'importe quel talent ou formation universitaire sophistiquée. Et votre passion pour la conception de sites Web dépend de beaucoup de choses qui l'entourent, car comme dans tout autre travail, il ne suffit pas de s' asseoir et de concevoir, n'est-ce pas ? Il y a la recherche de clients, la négociation, l'envoi de propositions, toutes les réunions et tout ce genre de choses. Alors, faites en sorte que le plus grand nombre de ces choses soient agréables, aussi. 159. 153 Trouver la fin du travail: Voici quelques-unes des nombreuses options qui s'offrent à vous pour trouver du travail indépendant. Je voulais vous montrer toutes ces options car les freelances oublient parfois qu'il existe d'autres sites pour trouver du travail que Upwork Je ne les ai pas tous couverts et je ne pourrais pas le faire. Les emplois proviennent souvent d'endroits inattendus, mais voici ce que vous devez faire. Exposez-vous à autant d'opportunités que possible. Frappez à autant de portes que possible Comme pour toute autre chose dans la vie, vous devez tenter votre chance le plus de fois possible, comme l'a dit Wayne Gretzky, vous ratez 100 % des photos que vous ne prenez pas Très bien, ensuite, nous allons plonger profondément dans Upwork, rester dans 160. Présentation d'Upwork: Au fil des années passées à travailler sur Upwork en tant que freelance et à recruter d'autres freelances, j'ai accumulé quelques trucs et astuces intéressants que j'ai utilisés pour réussir sur Upwork, et je souhaite partager ces conseils avec vous afin que vous n'ayez pas à perdre des années d' essais et d' erreurs à essayer de trouver comment faire fonctionner les choses J'ai donc mis tous ces conseils dans différentes vidéos et les ai en quelque sorte compilés sous différents thèmes. Mais avant de passer à ces conseils, permettez-moi de vous donner un bref aperçu d'Upwork C'est ainsi que fonctionne Upwork. Un client publie un travail qu'il souhaite accomplir, comme la conception et le développement d'un site Web pour une start-up. Ils fournissent des détails, parfois un budget prédéfini et parfois sans budget défini sous forme de taux horaire. Les freelances soumissionnent pour le poste, envoient des propositions avec les prix, puis le client répond aux propositions et entame une conversation avec les freelances qu'il aime Souvent, ils peuvent faire des entretiens par téléphone. Enfin, ils font leur choix et attribuent le poste à une personne. Le contrat et la facturation sont tous gérés via la plateforme. Si vous travaillez sur un taux horaire, vous allez suivre le temps via leur application. Tout le temps est automatiquement enregistré, le client en est automatiquement facturé et le mode de paiement du client est automatiquement débité C'est formidable car vous n' avez pas à vous soucier de la facturation, transferts d' argent, etc. Upwork est gratuit, mais vous devez payer des commissions sur ce que vous gagnez Supposons, par exemple, que vous facturez un total de 5 000$ à un client. Upwork conservera 10 %. La recherche d'emploi est assez simple. Vous pouvez rechercher des emplois par mots clés, compétences ou par d'autres filtres. Il sera important de faire une recherche correcte pour trouver les bons emplois. Les mots clés pour vous seront la conception de sites Web, la conception Web, le flux Web, la page de prêt, la page Web , le site Web réactif, etc. N'oubliez pas les pages de prêt. sont très demandés et sont plus simples que les Ils sont très demandés et sont plus simples que les sites Web. En termes de conception et de développement, pages de prêt sont toutes les mêmes pages Web que celles que nous avons créées jusqu'à présent. Il ne s'agit que d'une seule page au lieu d'un site Web entier. Les mots clés ne sont pas le seul moyen de recherche. Souvent, ce n'est pas la meilleure solution, car elle renvoie tout ce qui mentionne votre mot clé n'importe où dans l'offre d'emploi. La recherche de compétences peut être un peu plus ciblée dans de tels cas. Vous pouvez le faire à partir de la recherche avancée. Sélectionnez une compétence dans le menu déroulant et effectuez une recherche, mais une compétence à la fois, sinon, il recherchera des emplois correspondant à toutes les compétences que vous avez sélectionnées. Ce sont des compétences que lien a sélectionnées lors de la création du poste. Elles peuvent donc être un peu plus précises que de simples mots clés dans la description. Voici à quoi ressemble l' offre d'emploi habituelle. Il s'agit d'un projet de taux horaire. Ça se voit juste ici. Les descriptions de poste sur Upwork sont la plupart du temps assez mauvaises Souvent, peu d'informations détaillées sont fournies sur le projet. Les employés pourraient suivre une formation sur la façon de publier des descriptions de poste appropriées pour attirer le bon public. Pour postuler au poste, vous devez soumettre une proposition. Voici à quoi ressemble le formulaire de soumission de proposition. Vous sélectionnez les tarifs que vous proposez pour ce poste. Le type de facturation est défini par le client lui-même. Donc, s'il s'agit d'une facturation horaire, vous ne pouvez proposer que des taux horaires. Pour les taux forfaitaires, vous ne devez proposer que des taux forfaitaires. La lettre de motivation est un message que vous écrivez au client. C'est là que vous essayez de faire valoir votre point de vue et de les convaincre de vous engager, en gros. Le reste, comme votre portfolio, vos avis et tout ça, ils peuvent consulter directement sur votre profil. J'ai l'habitude de publier des offres d'emploi sur Upwork, ce qui m'a donné un avantage que les autres freelances n'avaient pas Je savais quelque chose qu'ils ignoraient. Et c'est ce que tu feras. Voici ce que dit un client après avoir publié une offre d'emploi. Une liste de propositions de freelances. Il s'agit de la page la plus importante où se produit la prise de décision par le client. C'est là qu'ils filtrent les freelances avec lesquels ils ne veulent pas travailler et choisissent ceux avec lesquels ils veulent J'ai plusieurs bons conseils pour réussir sur cette page et vous démarquer de la foule, mais plus tard. Le client peut voir le tarif que vous proposez ici, dans ce cas, horaire, puisque c'est ce que j'ai défini comme facturation du projet. Ils peuvent consulter vos revenus viagers sur Upwork, vos titres de poste et vos badges, dont nous parlerons plus en détail, ainsi que quelques lignes de la lettre de motivation Lorsque le client clique sur l'un d'entre eux, il accède à une vue de proposition, qui est essentiellement la même que le profil du freelance et la lettre de motivation Désormais, tous les autres détails de votre profil et de la lettre de motivation seront importants. Le client peut consulter les avis et les évaluations de l'emploi précédent, ainsi que le montant que vous avez gagné grâce à ces emplois. Ils peuvent voir votre portefeuille. Ce sont des captures d'écran que vous pouvez télécharger dans la section de votre portfolio. Ils peuvent voir tes compétences. Gardez ces compétences authentiques et concentrez-vous sur votre domaine. Ne mettez pas des choses comme Microsoft Word. Cela ne vous donne pas l' air d'un meilleur concepteur de sites Web, et ils peuvent consulter vos antécédents professionnels en dehors de Upwork si vous en ajoutez un Si vous avez des antécédents professionnels, c'est une bonne idée de les ajouter ici. L'expérience préalable compte également, et elle peut contribuer à renforcer votre crédibilité. Mais quoi que vous mettiez, il faut que ça soit beau. Votre job d'été chez KFC n' ajoutera rien. Et c'est tout. C'est un aperçu général d'Upwork. 161. Conseils 1-3 : Faire approuver votre profil: Vous pouvez obtenir du travail sur Upwork, vous devez d' abord obtenir une approbation C'est une mauvaise nouvelle au début, mais une fois que vous êtes approuvé, c'est une bonne nouvelle, car cela signifie qu'Upwork essaie de maintenir le marché agréable et serré Il n'y a donc pas trop de monde ni de travailleurs indépendants, car s'il y a trop de travailleurs indépendants, la concurrence est trop forte et les prix vont baisser Et en gros, ce ne sera pas un grand avantage pour les freelances qui travaillent sur Upwork, ni pour les clients, car ils devront alors faire face à tellement de freelances différents et à trop Lorsque vous ouvrez un compte en tant qu'indépendant sur Upwork, vous soumettez votre candidature, et ils doivent l'examiner dans les jours qui suivent, et ils l' approuvent ou la rejettent Si votre candidature est rejetée, ne paniquez pas, car vous pouvez nouvelle demande et il n'y a aucune limite quant au nombre de fois que vous pouvez présenter une nouvelle demande à Upwork. Vous améliorerez simplement votre profil, puis votre profil Et si cela ne fonctionne pas, encore et encore, l'expérience de ce processus de candidature n' est pas grand-chose à redire. moi qui l'ai fait. Cela a été accepté, fin de l'histoire. Mais il y a cet article que je vais mettre en lien dans les ressources, et je veux que vous lisiez cet article car il contient d'excellents conseils, et je veux que vous lisiez cet article avant de postuler à Apwork Et voici quelques conseils que je vole sans vergogne à cet article Upwork souhaite créer un équilibre sur le marché entre le nombre d'offres d'emploi publiées et le nombre de freelances qui soumettent des offres pour ces offres d' Donc, lorsque cet équilibre est un peu perturbé, et disons que quelqu'un publie un logo et que 1 000 indépendants soumettent une offre pour ce poste, les choses deviennent incontrôlables Ainsi, chaque fois que cet équilibre est perturbé, l'upwork ferme la porte à de nouvelles applications Postulez pour cette compétence particulière. Par exemple, s'il s'agit de concepteurs de logos, vrai, et que Pork a beaucoup trop de concepteurs de logos, mais pas assez d'emplois mais pas assez d'emplois publiés dans cette catégorie, alors ils vont en quelque sorte fermer temporairement la porte aux nouvelles candidatures et nouveaux freelances entrant dans cette catégorie Donc, jusqu'à ce que ce genre d' équilibre soit rétabli. Une façon d'éviter que cela ne vous arrive pendant votre processus de candidature est de montrer que vos compétences se situent en quelque sorte dans de nombreuses catégories différentes En tant que concepteur Web, vous tombez automatiquement dans plusieurs catégories. abord, dans la famille du développement, vous avez le design Web et mobile plus le développement Web, et dans la famille du design et de la création, vous avez la catégorie graphisme et design. Et peut-être même d'autres pour des choses comme l'expérience utilisateur et la conception de l'interface utilisateur puisqu'ils n'y figurent pas. Si vous avez d'autres compétences et que vous envisagez de faire d'autres tâches , comme le logo ou le design de marque, vous pouvez également les inclure. Mais ne vous étirez pas artificiellement, car le surcroît de temps en temps vérifier le niveau de compétence Ils peuvent donc faire des entretiens au cours desquels ils peuvent vérifier si vous savez et si vous êtes capable dans ces catégories Outre le choix des catégories, upwork vous demande également des compétences spécifiques que vous possédez Listez autant de compétences que possible, et Upwork dispose de cette énorme base de données de compétences dans laquelle vous pouvez effectuer une recherche, puis elle se remplit automatiquement et vous donne l'option que vous devez sélectionner Par exemple, en termes de conception Web, ce sont des compétences que vous pourriez facilement acquérir. Des choses comme la conception Web, évidemment, design réactif, Figma, le flux Web, prêt de pages, etc. Je ne choisis que les compétences réelles qui sont pertinentes pour le poste. Ne mettez pas Microsoft Word car cela ne correspond pas à votre catégorie de travail. Je vous laisse lire le reste des cassettes tirées de cet article lui-même. Il y en a quatre, alors jetez-y un coup d'œil. OK, revenons à mon propre contenu et ne pas voler les conseils des autres. Ne téléchargez pas de travaux de portfolio issus de ce cours. Voici pourquoi. Comme il y a beaucoup d' étudiants dans ce cours, et que beaucoup d'entre vous iront probablement sur Upwork pour postuler, vous finirez par postuler avec les mêmes éléments de portfolio si vous utilisez ceux que nous avons déjà intégrés dans ce et que nous avons conçus dans ce cours Et si c'est la même personne qui examine votre candidature sur Upwork, puis qu'elle voit deux candidats différents postuler avec exactement le même portfolio, cela va les inquiéter tous les deux 162. Conseils 1-3 : Faire approuver votre profil: Quelle est la première chose que dit votre client sur votre profil ou sur votre proposition ? Votre photo de profil. Ils prendront une décision importante simplement en regardant votre photo de profil. que nous faisons tous. Jouons à un jeu. Lisez 1-10 à quel point ce type a l'air compétent. Inutile d'analyser simplement un premier sentiment de 1 à 10, savoir quelle est sa probabilité de faire le travail Je vais certainement lui en donner dix. Il sourit, il est bien habillé, le décor est agréable. La photo a l'air professionnelle. Maintenant, qu'en est-il de ce type ? Je vais dire trois. Je n'ai rien vérifié d'autre sur son profil, mais il semblerait déjà qu'il veuille me scanner mon argent. C'est à quel point les photos peuvent être puissantes. Vous n'êtes pas obligée d'être belle ou jolie parce que ce n'est pas un concours de beauté, mais vous devez avoir l'air digne de confiance et compétente. Prenez une très belle photo de la tête et n'essayez pas de gagner du temps. Accédez à profil Facebook et prenez-en quelque chose à partir de là, car il est fort probable que sur votre profil Facebook, vous avez des photos sur lesquelles vous êtes soit cool, soit beau, soit jolie. Et ce n'est pas le critère à utiliser pour prendre une belle photo de chapeau, une belle photo de profil sur Upwork parce que les clients ne veulent pas que vous soyez, vous savez, beau ou joli ou que vous ressembliez à un gars cool Ce n'est pas ce qu'ils recherchent. Ils recherchent une personne compétente. Vous devez donc trouver une photo sur laquelle vous avez l'air digne de confiance et compétent, c'est-à-dire une photo sur laquelle vous regardez directement l'appareil photo, laquelle vous souriez préférence sur un fond uni. Maintenant, il n'est pas nécessaire de rattraper le retard en studio, évidemment, vous pouvez être sur fond de ciel, non ? Vous pouvez être sur un fond de quelque chose de simple, quelque chose qui n' attire pas l'attention et détourne pas l'attention de votre visage Si vous n'aviez qu'une heure pour préparer votre profil sur Apwork, consacrez 45 minutes la photo de profil et 15 minutes au reste D'où l'importance de la photo de profil. Et allez, c'est tellement facile. Nous avons des téléphones aujourd'hui. Oui, vous avez probablement un très bon smartphone qui prend de superbes photos. Il suffit de trouver un endroit vraiment agréable, de bien s'habiller, se faire couper les cheveux, peut-être de tailler votre barbe et de vous faire une belle photo dans la tête Upwork dispose d'un processus de vérification d'identité. C'est simple. Vous devez télécharger votre identifiant gouvernemental et passer un appel vidéo avec eux. Une fois vérifié, vous recevrez ce badge bleu. C'est un excellent moyen d'accroître la confiance dans votre profil avec très peu d'effort. Le titre est ce qui apparaît sous votre nom. Web designer est un titre dissident, mais c'est un peu ennuyeux. C'est ce que font la plupart des gens, donc vous ne vous opposerez à rien. Ajouter un peu plus de punch va faire beaucoup , par exemple, concepteur Web expert ou un concepteur Web P, concepteur Web rapide et efficace. Il en dit un peu plus sur vous, même s'il s'agit d'un titre autoproclamé, il se démarque tout de même. Imaginons qu'il y ait deux propositions. L'un dit web designer, et l'autre dit web designer expert. Vous serez un peu plus attiré par l'expert. Une approche encore meilleure consiste à mentionner les résultats finaux, par exemple, une conception et une construction de sites Web époustouflants, sites Web de premier ordre, une conception Web sans tracas Pour aller encore plus loin, vous pouvez même mélanger ces styles, comme un concepteur Web expert, des sites Web puissants et concepteur Web expert, des sites Web époustouflants ou professionnel de la conception Web, un service de premier ordre. Ce sont des propositions pour l'un des emplois que j'ai publiés, et il s'agissait d'un emploi sur une page de prêt. Maintenant, combien de ces titres de poste correspondent à ce que j'ai publié ? Un seul. Et même lui a le mot clé le plus important caché au plus profond du titre. Je recherche quelqu'un qui crée des pages de prêt. Comment savoir si vous êtes la bonne personne s'il n'y a aucune mention de pages de prêt dans votre titre ? Oui, les développeurs Web, Wordpress et PHP peuvent tous créer des pages de prêt. Mais comment puis-je le savoir ? J'ai demandé une page de prêt. Tu me donnes Wordpress comme réponse. C'est quoi Wordpress de toute façon ? Je ne suis ni développeur ni concepteur Web. Si c'était le cas, je créerais ma propre page de prêt. Je ne connais pas votre technologie et votre jargon. Je suis probablement un interprète qui a besoin d'une page pour quelque chose. Et même si je connaissais la technologie et que je connaissais tout le jargon, je voudrais quand même trouver quelqu'un qui se spécialise exactement dans ce que je demande Donc, si je demande que je dois terminer la page de prêt, je voudrais certainement choisir quelqu'un qui est un expert en pages de prêt ou qui expert en pages de prêt se spécialise uniquement dans les pages de prêt. Si je veux du marketing sur Facebook, peut-être des publicités sur Facebook, je veux quelqu'un qui soit un spécialiste du marketing publicitaire sur Facebook, non un spécialiste du marketing numérique en général. Ce sont des bananes. À quoi pensent-ils ? Il est trop facile concurrencer la plupart des indépendants de Samson Upwar Vous pouvez être le meilleur concepteur de sites Web du marché, mais s'il s'agit de vente de sockets, je n'arriverai jamais à accéder à votre portfolio. Upwork possède cette fonctionnalité appelée profils spécialisés. Vous avez donc un profil général comme un concepteur Web, puis vous pouvez avoir un profil spécialisé comme Webflow designer ou LandiPage designer Lorsque vous postulez à des emplois qui recherchent des concepteurs de flux Web, vous pouvez utiliser ce profil spécialisé et postuler avec celui-ci C'est bien plus efficace que de simplement postuler en tant que concepteur Web et de devoir expliquer dans la lettre de motivation que vous travaillez dans Webflow Ils n'arriveront peut-être jamais à lire votre lettre de motivation. Une autre information qui ressort vraiment des profils est le badge de réussite professionnelle. Pour obtenir ce badge sur Upwork, vous devez travailler avec au moins trois clients différents Vous ne pouvez donc pas y faire grand-chose. Tu n'as qu'à attendre. Mais il y a quelque chose que tu pourrais faire. Vous pouvez confier des projets extérieurs à Upwork pour répondre à ces exigences minimales le plus rapidement possible Vous pouvez trouver des personnes ou des entreprises de votre réseau qui ont besoin d'un site Web et réaliser un projet pour elles. Et vous pourriez leur accorder une réduction importante ou peut-être même créer le site Web à leur place pour un prix symbolique très modique en échange de le faire sur Upwork, fait tout le processus sur Upwork, avoir fait tout le processus sur Upwork, puis de vous faire part de vos commentaires à la fin situation gagnant-gagnant pour Au début, une situation gagnant-gagnant pour les deux fonctionne pour vous. Vous aurez du succès et vous obtiendrez ces exigences minimales sur Upwork, et en plus, ils auront un site Web à un prix très bas traitement par lots peut améliorer considérablement votre taux d' embauche Cela peut donc valoir la peine de suivre tout ce processus si vous avez du mal à obtenir des clients au début. Au cas où vous envisageriez de suivre tout ce processus, j'ai ajouté dans les ressources une page d' Upwork expliquant comment ils calculent ce score de réussite professionnelle Lisez-le d'abord afin de comprendre comment cela fonctionne. La formule n'est pas entièrement partagée car elle est secrète Il n'est donc pas garanti quand vous allez l'obtenir Mais ils donnent de bonnes indications sur son fonctionnement, afin que vous puissiez comprendre quand vous pouvez vous attendre à obtenir ce badge. 163. Conseils 10-12 : obtenir le badge « meilleur correspondant »: Chaque offre d'emploi peut faire l'objet d'une énorme quantité de propositions. Ici, il y en a 15. C'est déjà beaucoup, non ? Mais c'est en fait un peu plus petit. Les clients peuvent obtenir plus que cela, généralement 20 à 50 et parfois même plus de 50 propositions. Le client va-t-il passer en revue chacune d'elles ? Pas vraiment Ils garderont les yeux rivés sur le sommet. Qu'est-ce que cela signifie ? Tu dois trouver un moyen de finir au sommet ? Work met les meilleures allumettes sur le dessus et ajoute même ce badge brillant des meilleures correspondances sur leur proposition. Cela donne à ces indépendants avance sur tout le monde en dessous. En tant que freelance, vous ne savez pas si vous avez obtenu ce badge ou non, mais les clients potentiels le savent, et vous devez toujours viser à l'obtenir Alors, comment obtenez-vous ce badge ? Personne ne sait vraiment quel est l'algorithme qui sous-tend tout cela. Upwork ne partage pas vraiment ces informations, mais après avoir analysé les propositions que je reçois habituellement, j'ai défini plusieurs ingrédients clés Lorsque vous créez votre profil, upwork vous demandera de choisir votre niveau d'expérience Cette même question est posée aux clients lorsqu' ils publient l'offre d'emploi. Vous pouvez facilement voir le niveau d'expérience que le client a choisi pour le poste en question. Postulez au niveau d'expérience correspondant. C'est probablement le facteur le plus important pour déterminer ce lot. le poste que j'avais publié, je demandais un niveau expert, et la plupart des propositions provenaient de freelances de niveau intermédiaire ou débutant À quoi pensent-ils ? C'est une perte de temps pour tout le monde. Il y a suffisamment d'emplois dans chaque niveau, alors postulez pour ceux qui correspondent. Si vous n'aimez pas les emplois correspondant à votre niveau d'expérience, modifiez votre niveau dans le profil. C'est aussi simple que ça. Le deuxième critère le plus important semble être celui des compétences. Lorsque les clients publient l'offre d'emploi, ils sont invités à sélectionner les compétences spécifiques qu'ils recherchent chez un indépendant Ils reçoivent la même base de données de compétences que celle que vous avez utilisée dans votre profil, et vous pouvez également consulter ces informations sur l'offre d'emploi. Postulez à des emplois avec les compétences correspondantes. Par exemple, aucune de ces compétences n' est sélectionnée dans mon profil. Donc, si je postule à ce poste, je n'obtiendrais pas un bon score. Vérifiez donc toujours les compétences que le client a sélectionnées pour le poste et assurez-vous que vous les avez également dans votre profil, et qu'elles correspondent, car cela augmentera certainement vos chances d'être le meilleur candidat. Désormais, upwork ne vous permet de sélectionner qu'un maximum de dix compétences Il y aura donc certaines compétences connexes que vous devrez peut-être omettre. Mais parfois, vous trouverez un emploi qui utilise exactement les compétences que vous avez dû omettre. Dans ce cas, vous pouvez en supprimer certaines ajouter les compétences manquantes au poste et créer une correspondance. Il s'agit peut-être d'un petit hack dont Upwork est peut-être au courant, de sorte que l'algorithme peut ignorer les changements de profil de dernière minute Mais ça vaut quand même le coup d'essayer. Au moins, le client verra que vous possédez les compétences qu'il recherchait. Lorsque le client sélectionne le niveau d'expérience souhaité pour un indépendant, il indique la fourchette de prix approximative à laquelle il peut s'attendre Vous souhaitez faire correspondre votre enchère à la fourchette suggérée. Si le client a sélectionné un expert et s'est vu infliger une amende de plus de 50 dollars de l'heure, Upwork n'appréciera pas que vous enchériez 30 Vous vous faites perdre, à vous et à Upwork, en raison de l'augmentation de vos revenus. Pour savoir quelle est la fourchette de prix actuelle correspondant à votre niveau, vous pouvez presque publier une offre d'emploi pour accéder à l'étape et vous verrez les fourchettes de prix les plus récentes. Il ne faut rien pour faire ça. Vous n'êtes pas obligé de publier l'offre d'emploi à la fin. Ce n'est qu'une des étapes de l'assistant de publication d'offres d'emploi. Et vous pouvez le faire de temps en temps pour avoir les valeurs les plus récentes. 164. Conseils 13-14 : Proposez le bon prix price: Voici quelques conseils sur les prix. Beaucoup de freelances pensent que les clients optent pour des prix plus bas Et s'ils enchérissent bas, ils pensent qu'ils seront plus attrayants pour les clients, un peu comme une bonne affaire freelances qui ont ce type d'état d'esprit, ont un goût et une attitude négatifs à l'égard de l'upwork et de ces plateformes de freelancing, pensant que tout le monde se fait concurrence pour le prix, qu'il y a beaucoup de prix, de personnes en concurrence avec le prix, donc tout le monde est en train il y a beaucoup de prix, de personnes en concurrence avec le prix, de faire baisser les Mais ils ne pouvaient pas se tromper. Si c'était vrai, certains freelances ne seraient pas payés 500$ de l'heure sur Upwork Les sites Web sont des produits de grande valeur. Ils ne sont pas comme le papier toilette le moins cher qui se vend le plus. Les entreprises vont utiliser le site Web pour leur propre entreprise afin de réaliser plus de ventes, n'est-ce pas ? Cela représentera leur entreprise, leur activité et leur marque, afin qu'ils ne veulent pas du bon marché. Ils veulent des normes, ils veulent de la qualité. Et souvent, ils sont plus qu'heureux de payer pour cela. Comme beaucoup d'entre nous qui sont heureux de payer 1 000 dollars pour un iPhone, au lieu de payer 100 dollars pour Alcatel En enchérissant bas, non seulement vous gagnez moins d'argent, mais vous gagnez également moins d'emplois. Cela semble paradoxal, mais les clients préfèrent en fait des prix plus élevés Pourquoi ? Parce que le prix est un moyen de savoir si quelque chose est de qualité ou non. Nous savons que ce n'est pas toujours vrai, et nous en sommes conscients, mais nous pouvons souvent nous aider nous-mêmes, n'est-ce pas ? Nous utilisons donc le prix comme l'un des indicateurs pour déterminer si un produit sera de haute qualité ou non. En enchérissant bas, vous chuchotez discrètement à vos clients que vous êtes de moindre qualité Regardez cette liste de propositions. Plus bas vous faites défiler la page, plus la situation semble déprimante. Des personnes moins qualifiées, aucune évaluation, aucun emploi précédent, présentation moins bonne, et vous obtenez également des prix plus bas sur le bas de l'échelle. Donc, être au bas de l'échelle n'a pas l' air attrayant du tout. Les talents les moins expérimentés sont classés en bas. Des prix plus bas sont donc associés à une qualité inférieure simplement en regardant cette liste. Cette liste indique clairement au client qu'il doit faire attention aux prix bas. Dans ce cas, la baisse des prix ressemble à un signe d'avertissement et non à une aubaine En tant que client, lorsque j'embauche des freelances, je déteste me demander quel est votre budget, car la plupart du temps, je ne sais pas quel est mon budget Je sais que je veux que quelque chose soit fait, mais souvent je ne sais pas combien cela va coûter. Je ne sais pas quel est le bon rapport qualité-prix. Donc, poser cette question me met dans un état de confusion où je ne sais pas comment répondre. Mais lorsque vous publiez une offre d'emploi sur Upwork, en tant que client, et si vous optez pour un tarif forfaitaire, Upwork va vous demander quel est votre budget ? Et pour quelqu'un comme moi qui ne sait pas exactement quel est son budget et qui n'aime pas répondre à la question, nous essayons choisir le chiffre le plus bas qui nous vient à l'esprit. La dernière chose que vous voulez faire est de payer trop cher pour quelque chose. Donc, si je ne sais pas ce que coûte quelque chose, je vais opter estimations bien inférieures à ce que cela va coûter réellement parce que je ne veux vraiment pas payer trop cher Donc je ne veux pas dire, tu sais quoi ? Je paierai 2000 dollars pour ce travail. Et si ça ne coûte que 300 dollars ? Alors je vais partir du principe que les freelances vont abuser de moi parce que j'ai un budget aussi élevé Maintenant, tout le monde va essayer d'en tirer parti, et ils diront : « Oh, nous le ferons pour 2000, nous en ferons peut-être 1 500, et ainsi de suite, alors qu' en réalité, le travail ne coûtait que 300 dollars Donc, pour éviter de payer trop cher, vous constaterez que les clients paieront souvent budget bien inférieur ce qu'ils sont réellement prêts à payer Et au bout du compte, ils seront bien payés 203 fois plus que ce qu'ils proposent comme budget. Donc, lorsque vous voyez un chiffre sur le budget, ne le considérez pas comme 100 % vrai, c'est-à-dire que c'est exactement le montant d' argent dont ils disposent. Parfois c'est vrai, non ? Les entreprises disposeront donc exactement de cette somme d'argent pour ce projet. Mais souvent, ce n'est pas vrai. Ce sont juste des clients qui sortent des chiffres de leur tête. Et lorsque vous voyez ce budget, ignorez-le simplement et proposez quelle est la valeur du projet pour vous ? À moins que vous ne voyiez dans la description du poste qu'ils signifient explicitement que c'est leur budget le plus élevé et que c'est ce qu'ils vont payer. 165. Conseils 15-16 : Soyez le freelance à qui ils ne peuvent résister: succès d'un centre indépendant ne repose souvent pas sur les compétences, mais plutôt sur le service que vous offrez à vos clients. Vous pouvez être le meilleur concepteur Web, mais si les clients n' aiment pas travailler avec vous, si vous ne leur offrez pas un service de haute qualité, ils ne reviendront pas pour plus. Parce que ce qui arrive aux clients satisfaits , c'est qu' ils ne se contentent pas de vous demander plus de travail, mais aussi d' autres personnes. Ils recommandent leurs amis qui sont généralement des hommes d'affaires et des interprètes Leurs amis sont généralement d'autres hommes d'affaires et d'autres interprètes Ils ont donc un très bon accès pour vous apporter plus de travail. Une grande partie de mes clients sont en fait des références. Par exemple, je travaille avec un seul client. Ils sont très satisfaits parce que j'offre un service de très haute qualité, puis ils sont heureux de me recommander à leurs amis. Mais si je n'ai pas fourni un bon service, même si j'ai créé un bon site Web, mais qu'ils étaient, vous savez, peut-être que j'ai été négligent, peut-être que je ne le savais pas, je pense essentiellement à un service client Peut-être que je n'étais juste pas très gentil. Peut-être que j'ai simplement été impoli ou que je n'ai pas répondu à leurs e-mails leurs appels ou à quelque chose comme ça. Alors ils ne seront pas sûrs de me recommander à leurs amis parce que chaque fois que vous recommandez quelque chose à votre ami, vous voulez vous assurer de ne pas, vous savez, le décevoir, c'est vrai, que tout ce que vous allez leur recommander que tout ce que vous allez leur recommander sera bon et bénéfique pour eux Ils doivent donc être sûrs à 100 % que tout ce qu'ils obtiennent, tout ce qu'ils recommandent est bon pour leurs amis Voici donc quelques conseils pour devenir ce pigiste à qui clients reviennent sans cesse pour en savoir plus Savez-vous quel est le critère que les clients ne négligeront jamais ? Ils peuvent oublier des choses comme votre portfolio, votre expérience antérieure, peut-être même les évaluations d'emploi, mais il y a une chose qu'ils n'ignoreront jamais, et c'est la confiance. Est-ce que j'ai confiance en cette personne ? Si la réponse n'est pas oui à 100 %, c' que vous n'obtiendrez pas le poste. Peu importe à quel point tout le reste semble incroyable sur votre profil. Si je ne te fais pas confiance, alors tout peut être un mensonge. Tout ce que tu dis peut être un mensonge. Tout ce que je vois sur le profil peut être un mensonge. Tout ce que tu promets peut être un mensonge, et je ne te confierai jamais mon argent et mes affaires. La meilleure façon de perdre ma confiance en tant que client est d'essayer de me vendre quelque chose. Si vous essayez de me vendre quelque chose, vous avez un agenda, non ? Vous avez l'intention secrète de réaliser la vente. Et si je reconnais que vous avez ce programme, comment puis-je savoir que tout ce que vous dites est vrai, comment puis-je savoir que tout ce que vous essayez de faire vise à m'aider, mais pas seulement à votre avantage ? La solution est très simple. Changez votre agenda personnel pour passer de la vente à l'aide. Vous pourriez dire : « Attends une seconde », mais mon objectif est de vendre mes services, non ? Je fais des affaires. J' essaie de gagner de l'argent. Je ne suis pas ici pour faire de la charité ou du bénévolat. Comment puis-je modifier mon programme pour simplement aider lorsque j'ai besoin de vendre ? Je sais que c'est vrai, mais rien ne change dans la réalité. Rien ne change en surface. Tu vas quand même être payé. Tu vas quand même gagner de l'argent. Mais tout change au fond de soi. La façon dont vous parlez, la façon dont vous abordez vos clients, la façon dont vous communiquez avec eux, toutes ces petites milliers de microdécisions et micro-interactions changent lorsque votre objectif passe de la vente à l'aide. Et ça ne va pas passer inaperçu. Vos clients vous feront confiance instantanément, et cela compte souvent plus que votre portefeuille. Une chose incroyable et utile que vous pouvez apporter à vos clients est soulager la douleur qu'ils éprouvent dans ce domaine. Imaginez un instant que vous êtes propriétaire d'une entreprise qui a besoin d' un site Web et que vous vous rendiez dans des studios de design et que vous découvriez que, vous savez, vous ne pouvez pas vous permettre leurs prix astronomiques pour les projets de conception Web. Donc, ce que vous faites, vous vous rendez sur des plateformes de freelance comme Upwork pour, vous savez, un indépendant individuel qui facturera un peu moins Maintenant, réfléchissez à la confusion et à l'incertitude auxquelles vous devez faire face si vous n'êtes pas un interprète issu de ce domaine, de ce type d' industrie de la conception Web ou autre. Si vous ne faites que des activités commerciales régulières, vous ne connaissez probablement aucune de ces technologies. Tu ne sais pas où le construire. Vous ne savez pas ce qu'est Wordpress Webflow, HTML ou CMS. Vous ne savez pas trop comment juger qui est un bon freelance, qui est un bon concepteur Web et qui est un mauvais concepteur Web Vous faites donc face à beaucoup d'incertitude, et au fur et à mesure que vous ferez des recherches, vous découvrirez qu'au lieu d'obtenir des éclaircissements, vous devenez un peu plus confus. Comme vous pouvez le constater, les clients doivent s' inquiéter de tant de détails étranges et mettre leur argent en danger. Alors, comment pouvez-vous les aider ? Nous pouvons les aider de plusieurs manières, et l'une d'entre elles est certainement de leur dire et de leur montrer que nous avons compris le processus, n'est-ce pas ? Tout ce dont nous allons nous occuper pour eux qu'ils n'aient à se soucier de choses comme la technologie, n'est-ce pas ? Où allons-nous construire ce truc ? Où allons-nous lancer ce truc comme Webflow, non ? Ils n'ont pas à s'inquiéter du fait que nous nous en occupions. Nous pouvons également leur expliquer le processus , tout comme notre processus de conception, dans lequel nous allons passer du brief du projet, puis au wireframing, puis à la conception, puis enfin à la construction du tout dans Webflow et la construction du tout dans Webflow Nous pouvons donc expliquer que, vous savez, ils seront impliqués et auront le contrôle de chaque étape du processus afin qu'ils sachent ce qui se passe, et qu'ils n'aient pas à simplement engager une énorme somme d'argent en espérant que tout ira bien car ils seront impliqués dans l'ensemble du processus et ils auront la capacité d' apporter des modifications peaufinez le chemin en cours de route pour nous assurer que nous allons dans la bonne direction De cette façon, ils peuvent désormais assouplir notre partenariat, car ils voient que nous nous en occupons, que nous connaissons le processus et que nous pouvons le guider. Ainsi, ils peuvent désormais se détendre et ne pas avoir à prendre trop de risques en travaillant avec nous. Faites-le et ils vous mangeront les mains parce que les autres indépendants font probablement pas, n'est-ce Ce n'est pas eux qui les emmènent à ce processus guidé, mais vous. D'autres freelances sont là pour prendre leur argent, mais pas vous. Tu les soutiens. 166. Conseils 17 à 22 : Rédigez de très bonnes lettres de couverture: Emplois, vous devez généralement envoyer des lettres de motivation avec vos propositions. Il s'agit simplement d'un petit e-mail ou d'un message que vous envoyez à un client lorsque vous lui envoyez une proposition. Sur les plateformes apwork et freelancing, il y a généralement un champ que vous remplissez et que vous envoyez En dehors des plateformes, il s'agit généralement d'un e-mail que vous leur avez envoyé avec votre proposition. C'est ça. Le travail indépendant ne m'a pas appris à rédiger de bonnes lettres de motivation L'embauche de freelances l'a fait. En tant que cliente, j'ai reçu des lettres de motivation qui étaient excellentes parce qu'elles fonctionnaient bien pour moi en tant que cliente, et il y avait beaucoup de saloperies que je recevais qui rendaient beaucoup de freelances complètement indésirables Voici quelques conseils pour rédiger de sacrément bonnes lettres de motivation. Une lettre de motivation qui m'endort instantanément est l'endroit où le freelance parle de lui-même Je publie l'offre d'emploi, je décrit mon problème et la solution que je recherche, et vous répondez à quel point vous êtes incroyable. Presque tous ces freelances parlent d'eux-mêmes. Je suis ceci et j'ai cela. J'ai une telle expérience, et je l'ai déjà fait par le passé. Franchement, ma chère, je m'en fous. Dites-moi comment vous allez résoudre mon problème. Parlez-moi du projet. Comment peux-tu m'aider ? Montre-moi que tu es géniale. Ne t'en vante pas D'accord, si tu peux parler de toi , qu'en penses-tu ? Très facile Commencez à donner des idées. Imaginez qu'ils vous aient déjà embauché et commencez à réfléchir à leur projet. Comment allez-vous le concevoir ? Quelles seraient les choses amusantes à faire ? Envoyez des liens vers des sites Web d'exemple et dites que vous pourriez faire ce genre d'interactions ou ce type de section consacrée aux héros. Personne ne fait ça. Si je voyais une proposition avec des idées et des exemples, je dirais : « Merci ». Ce sont de bonnes idées. Tu me comprends. C'est ce que je veux. est fait, tu es embauché. Quels exemples concrets ? Voici une véritable lettre de motivation que j'ai envoyée sur Appwor qui m'a permis d'obtenir un emploi immédiatement sans entretien. Je commence par lier des exemples de pages. J'ai pris des modèles de pages de prêt, pas même mon travail, et je lui ai montré des exemples. Je lui ai montré ce que j'allais faire. Maintenant, il peut voir de ses propres yeux et je lui ai facilité la vie. Je lui ai ensuite donné un bref aperçu du processus, de la façon dont j'allais m'y prendre, en lui disant que cela aurait l'air bien et que la conversion serait efficace C'est son objectif, n'est-ce pas ? Il sait maintenant que je comprends son objectif. Ensuite, je pose des questions pertinentes qui montrent que je ne peins pas le tableau en rose, et j'ai pris en compte les détails du projet. Remarquez que je ne commence à parler de moi qu'après tout cela, là où cela parle de moi. Il y a un peu plus de bla bla chez moi, mais je l'ai recadré parce que je ne le ferais même pas aujourd'hui Je le garderais simplement sans ce paragraphe. Voici un autre exemple de bonne lettre de motivation que j'ai reçue sur l'une de mes offres d'emploi. Cette personne a plus de 50 000 revenus sur Upwork, et cela montre pourquoi Il va droit au but. Il est utile. Il va même me montrer comment attirer des visiteurs sur ma page. Il comprend mes objectifs et me pose des questions pertinentes. Le message est court et doux, ne perds pas mon temps avec des peluches en conserve N'essayez pas de gagner du temps en envoyant des modèles de lettres de motivation et des lettres de motivation automatiques. Je déteste les lettres de canette. Emmerdez-les et baisez ceux qui me les envoient. Vous gagnez du temps, mais vous me faites perdre le mien ? Non, merci. Les bons clients remarquent des lettres qu'ils peuvent envoyer à des kilomètres de distance, et ils ne vont même pas se donner la peine de les lire. Parfois, dans des lettres de motivation, vous voulez donner des exemples de vos travaux antérieurs, n'est-ce pas ? Donc, beaucoup de freelances vont faire référence à leur portfolio et les relier à l' Apwork Mais ce que vous pouvez faire et parce que vous avez un site Web, vous pouvez leur envoyer des liens vers votre site Web. Soyez des pièces de portfolio sur AP Work elles ne sont pas affichées de la manière la plus flatteuse qui soit Cependant, sur le site Web, ils ont l'air très attrayants parce que c'est votre site Web, ce sont vos produits, n'est-ce pas ? Tout est plutôt bien organisé. Et vous avez un peu plus de contenu, et c'est l'occasion de l' utiliser, vous savez, pour montrer que vous êtes non seulement , mais aussi très professionnel, que vous avez votre propre site Web et que vous les impressionnez par l'ensemble de votre présentation Mais seulement si vous voulez publier ce site Web sur votre domaine personnalisé personnel, parce que mon portfolio slash 123 points webflo point IO, n'a pas l'air très professionnel, a l'air amateur, et je ne prends personne de freelance au sérieux, qui m'envoie son portfolio, qui est sur point Webflow ou quelque chose comme ça ou point wiggly ou wix.com ce site Web sur votre domaine personnalisé personnel, parce que mon portfolio slash 123 points webflo point IO, n'a pas l'air très professionnel, a l'air amateur, et je ne prends personne de freelance au sérieux, qui m'envoie son portfolio, qui est sur point Webflow ou quelque chose comme ça ou point wiggly ou wix.com, parce que cela ne ressemble pas à vous prenez votre métier au sérieux. Donc, gagnez 15 dollars par mois pour le premier mois d'abonnement de Weblo, et vous aurez une longueur d'avance sur les autres freelances qui utilisent Et il vous suffit de payer le premier mois. Une fois que vous aurez commencé à gagner de l'argent, cela se rentabilisera tout seul. Sur la page où le client reçoit toutes les propositions, il peut déjà voir quelques premières lignes d'une lettre de motivation du freelance Beaucoup de freelances commencent par quelque chose comme « chère madame ». Est-ce ainsi que les gens se connectent ? Cher Monsieur Madame ? Cela semble tellement impersonnel et tout simplement bizarre. Je dis souvent celui-ci. Cher responsable du recrutement. C'est quoi ce bordel ? Responsable du recrutement, qui ? Hé, pourquoi m'appelles-tu par des noms aléatoires ? Et qui parle comme ça ? C'est en fait faute d' Upwork, car dans l'un de ses articles de blog, ils conseillent de faire appel à ce responsable du recrutement de cerfs, probablement écrit par l'un de leurs employés qui n'a jamais été indépendant ou client car c'est le conseil le plus stupide que j'ai Soyez donc prudent lorsque vous lisez les conseils d'Upwork lui-même. Donc, si tu peux dire ça, que dirais-tu ? Eh bien, laissez-moi résoudre un grand mystère. Que dites-vous lorsque vous saluez quelqu'un dans votre environnement de travail ? Dites-vous « chère sœur, madame » ou dites-vous « bonjour ». Bonjour Bonjour Bonjour. est aussi simple que ça. Pourquoi compliquer les choses Tous sont également professionnels et polis. Ne sois pas bizarre. Soyez simplement naturel et amical. C'est tout Certains d'entre vous viennent probablement de pays et de cultures où l' utilisation des mots «   monsieur » est en quelque sorte une exigence de politesse. Il s'agit, par exemple, d'un cas en Inde. Et quand je travaille avec des indépendants indiens, ils m'appellent toujours, monsieur Ils disent : « Bonjour, monsieur, oui, monsieur ». Merci, Monsieur. Ça m' embête un peu quand ils font ça N'utilisez pas sir avec tout le monde dans le monde, car cela ne fait pas partie de la culture de tout le monde. Par exemple, en Amérique du Nord, Grande-Bretagne et en Australie, le mot monsieur est utilisé dans des situations très impersonnelles Par exemple, lorsque vous voulez attirer l'attention d'un étranger, : « Oh, excusez-moi, monsieur, vous avez fait tomber quelque chose. Mais l'environnement de travail dans ces pays est plus convivial. n'y a aucune distance honorifique entre les personnes en raison de leur âge ou de leur poste Ainsi, jamais un employé n' appellerait son patron. Monsieur, même si ce patron était Bill Gates, ils diraient probablement quelque chose comme Bill ou M. Gates, mais pas, monsieur. Vous allez donc avoir l' air un peu étrange et impersonnel si vous l'utilisez avec des personnes qui ne sont pas habituées à ce genre de courtoisie Vérifiez d'où ils viennent et utilisez-les, monsieur, uniquement si cela est prévu dans ce pays. 167. Conseils 23 à 25 : Ne vous laissez pas suspendre ended: Parfois, les indépendants sont suspendus ou bannis du travail sur Internet pour avoir fait quelque chose qui va à l'encontre de leurs termes et conditions Je vais vous donner quelques conseils pour vous assurer que vous ne vous retrouvez pas dans une situation très délicate avec eux. Essayer d'être payé en dehors d' AppOrg est contraire à leurs termes et conditions Et s'ils soupçonnent que vous avez essayé de le faire, ils déformeront probablement votre compte. Cette raison est claire et simple. L'APOC gagne de l'argent sur les transactions et les transactions de paiement effectuées entre vous et le client Et si vous essayez d' effectuer ces paiements en dehors de la plateforme, ils ne rapportent pas d'argent et vous les énervez. Vous pouvez trouver plus d'informations à ce sujet dans leurs termes et conditions, et la clause s'appelle le contournement, pas la circoncision, et vous pouvez en savoir plus à ce sujet Cela s'applique non seulement aux projets en cours que vous recevez du client, mais également à tous les projets ultérieurs provenant du même client. Ils ont cette période de 24 mois de non-contournement. Donc, dès que vous commencez à travailler avec les clients, il y a une période de 24 heures pendant laquelle vous devez maintenir la relation avec ce client sur Upwork et être payé sur Upwork Il y a donc une sorte de déclencheur dans votre communication qui peut déclencher ce signal d'alarme. Donc, parce que la messagerie se fait à l'aide de la plateforme de messagerie Aforce, n'est-ce pas ? Dans ce message, vous évoquez des sujets tels que Pioneer. Ce seraient les mots déclencheurs du drapeau rouge qui déclencheraient instantanément cette suspension automatiquement. Si vous avez mentionné des choses comme Payoneer, PayPal, les virements bancaires, les IBAN, tout ce qui est en quelque sorte peut être associé au fait que vous essayez d' être payé à l'extérieur Et peu importe, même si le client est en quelque sorte à l'origine de la discussion et qu' il veut que vous soyez payé à l'extérieur, si vous êtes d'accord ou si c'est vous, si vous dites quelque chose comme oui ou autre, vous serez suspendu même s'il vous le demande. Assurez-vous donc que si le client vous le demande, vous savez, sortons ça de l'extérieur, disons non, vous voulez que les choses restent sur Upwork Désormais, la plupart des suspensions se font automatiquement. C'est juste que si vous mentionnez quelque chose, l'IA se déclenche, vous savez, et tout ça. Mais parfois, vous mentionnez PayPal non pas parce que vous vouliez être payé à l'extérieur, mais peut-être que vous donnez un exemple de site Web PayPal. Peut-être que vous essayez de concevoir un site Web destiné aux services bancaires ou peut-être que vous concevez un portefeuille électronique ou quelque chose lié au financement. Mais ce n'est pas grave car si vous êtes automatiquement suspendu, vous pouvez faire appel, puis un être humain examinera votre communication. Et s'ils sont convaincus que vous n' essayiez pas d'être payé à l'extérieur, mais que vous discutiez en quelque sorte de cela dans le cadre du projet, alors tout ira bien. Et ils vont lever l'interdiction. Bien entendu, si vous en discutez lors appel Skype ou d'un appel vidéo qui ne fait pas partie d'Upwork, n'est-ce Vous savez, il est impossible pour Upwork de le savoir, mais j'ai de bonnes raisons pour que vous restiez sur Upwork En fin de compte, le surmenage est une bonne chose. Cela permet à de nombreux indépendants de trouver du travail. Nous voulons tous qu'Upwork gagne de l'argent et ne fasse pas faillite Et si la plupart d'entre nous abandonnons notre relation d'upwork, un jour, ils fermeront tout simplement leurs portes Upwork, 10 %, ce n'est pas si gros. UDUmi, par exemple, prend au moins 50 % de ce que je gagne ici Donc, l'upwork n'est pas si mal. Enfin, ne pas avoir à s' occuper de la facturation est génial. Vos clients sont débités automatiquement. Vous n'avez jamais à vous occuper de la facturation et de la poursuite des paiements Cela permet d'économiser beaucoup de temps et de tracas. En tant que freelance, il arrive parfois que vous deviez courir après les clients pour vous payer à temps Mais avec Upwork, c'est bien parce que sa carte de crédit est automatiquement débitée Et si sa carte de crédit ne fonctionne pas correctement, le client est suspendu sur Upwork, donc vous le savez également Cela permet d'économiser beaucoup de temps et de tracas. N'inscrivez aucune compétence que vous n'avez pas sur votre profil. Upwork procède parfois une vérification aléatoire des compétences des indépendants, des tests oraux et à un entretien avec un indépendant pour s'assurer que tout ce qu'il estime être vrai est vrai Une fois que mon compte a été gelé à cause de ce test de compétences, ils ont en quelque sorte lancé le test de compétence sur mon compte, et j'ai eu un entretien avec un responsable du service client, qui m'a en quelque sorte interrogé sur le HTML et Et c'était étrange parce que je n'ai jamais fait du HTML et du CSS mes compétences, mais je suppose que, comme je faisais partie de la catégorie de conception Web, ils supposent que, vous savez, je suis censé connaître le HTML et le CSS, même si je n'ai jamais prétendu le savoir. Heureusement, j'ai pu faire appel et leur expliquer que je n'avais pas besoin HTML et du CSS pour faire mon travail. Je n'ai jamais prétendu le connaître, ils ont compris et ils ont débloqué mon compte Mais si je les avais eu dans mes compétences, j'aurais été complètement foutu. Le fait est qu'Upwork est une plateforme tellement grande il y a tellement de monde et tellement d'argent qui y circule, attire aussi de mauvais acteurs, qui essaient de jouer avec le système, d'ouvrir comptes frauduleux et se livrer à différentes activités frauduleuses Upwork fait donc preuve de beaucoup de diligence à ce sujet et sévit dans de nombreux comptes différents pour s'assurer que les personnes présentes revendiquent qui elles sont, revendiquent ou connaissent des compétences et qu' elles peuvent faire ce qu'elles promettent aux Assurez-vous donc que tout ce que vous mettez sur Aporc est vrai et authentique et que vous n'essayez pas de déjouer le système parce qu'il n'est pas trop tolérant Donc, même si quelque chose est fragile, supprimez simplement tout ce qui n'est pas vrai à 100 % 168. Conseils 26-28 : Ne vous faites pas arnaquer: Le travail est énorme, très important, et il y a beaucoup d' argent qui circule et beaucoup d' argent qui peut être gagné. Donc, quand il y a de l'argent, il y a toujours mauvais acteurs qui essaient d'arnaquer les gens. Voici quelques conseils pour ne pas vous faire arnaquer sur Upwork. N'effectuez jamais de travail gratuit ou d'essai sur Upwork. Il y a une escroquerie où certains ********* vous demandent de faire travail d'essai, vous devez effectuer travail gratuitement avant de pouvoir vous attribuer un emploi Ils doivent donc vous tester sur vos compétences ou quelque chose comme ça Et ce qu'ils font, c'est qu'ils demandent à de nombreux indépendants de faire ce travail gratuit, puis ils rassemblent ce travail gratuit, puis ils l'utilisent pour un autre client et sont en quelque sorte payés pour cela, sans faire eux-mêmes aucun travail Voici une vidéo de l'un des freelances d'Upwork qui a enregistré une telle Le lien se trouve dans les ressources si cela vous intéresse. C'est un conseil répété, mais cette fois pour une raison différente car non seulement parce que vous pouvez être banni par upwork, mais aussi parce que vous pourriez vous faire arnaquer si vous prenez des choses en dehors d' Si un nouveau client qui ne vous a pas encore payé et que vous n'avez jamais eu relation de travail vous demande de sortir de la plateforme pour économiser de l'argent ou, vous savez, de vous débarrasser de la commission, alors la sonnette d'alarme devrait retentir instantanément dans votre tête. De toute évidence, pour les clients, il est plus sûr de continuer à travailler, car ils ont certaines garanties dès le départ, n'est-ce Si les choses tournent mal, alors au moins le travail peut en quelque sorte intervenir et régler la situation Donc, lorsqu'ils vous demandent de prendre des objets de l'extérieur, c'est peut-être de mauvaise qualité, et si quelque chose semble de mauvaise qualité, c'est probablement 169. Tarification : combien facturez-vous ?: Bienvenue sur le sujet effrayant pour la plupart des freelances. Tarification. Combien facturez-vous ? Il est normal d'être confus au sujet des prix au début. J'étais également très confuse quand j'ai commencé. Je me souviens de mon tout premier projet de page de prêt que j'ai réalisé, j'ai facturé 200$. Et c'était beaucoup de travail, en fait. Je prêtais la conception et la construction de pages. J'ai écrit le texte et le contenu de la page de prêt. Il s'agissait de commercialiser le projet 2. J'ai créé des publicités sur Facebook, j'ai conçu bannières et des publicités sur Facebook et j'ai tout fait pour 200$. Ensuite, je suis passé au taux horaire, 20 dollars de l'heure, et c'était déjà une bonne augmentation pour moi, car à ce taux, j'ai pu subvenir pleinement à mes en travaillant en freelance à plein temps Ensuite, je suis passé à 30$ de l'heure, ce qui était mon tarif pendant un certain temps. Ensuite, j'ai doublé pour atteindre 60 dollars de l'heure. Et maintenant, je facture principalement un tarif forfaitaire et environ 5 000$ en moyenne pour la conception et la construction d'un site Web Augmenter de 30 à 60$ l'heure a été l'une des choses les plus difficiles à faire pour moi sur le plan émotionnel choses les plus difficiles à faire pour Je me sentais tellement coupable, surtout quand j'ai dû dire à mes clients existants que j' allais doubler le tarif qu'ils travaillaient déjà avec moi depuis un certain temps. Rationnellement, je savais que c'était logique, mais émotionnellement je transpirais à cause de l'anxiété Plus tard, j'ai réalisé que j'avais deux fausses croyances en tête. Tout d'abord, je projetais mes propres problèmes financiers sur les clients. Au lieu de le voir de leur point de vue, je l'ai vu de mon propre point de vue, en le comparant à mes propres habitudes de dépenses, en le comparant à mes propres habitudes de dépenses, en me sentant coupable d'avoir moi-même difficulté à payer 60$ de l'heure pour n'importe lequel Ensuite, penser que le prix que je facture est en corrélation directe avec mon niveau de compétence. Donc, si je facture le double, je devrais maintenant être deux fois plus doué. Et vous pourriez le penser, mais n'est-ce pas vrai ? Un prix plus élevé ne devrait-il pas être synonyme de meilleures compétences ? En fait, pas du tout. Voici la vérité la plus importante sur les prix. Le montant que vous facturez dépend de l'acheteur. Il y a cet incroyable coach d'affaires pour les créatifs. Il s'appelle Chris Doug, et j'ai assisté une fois à sa conférence sur les prix, et cela m'a époustouflé J'ai réalisé à quel point je ne savais rien de mes propres prix. Imaginez un scénario où deux clients potentiels vous contactent. Ils veulent tous les deux un site Web très similaire , le même nombre de pages , les mêmes fonctionnalités, quelque chose dont la conception et le développement prendront le même temps. Donc, évidemment, vous leur offrez le même tarif, mais ces clients ne pourraient pas être plus différents. Le premier est un comptable indépendant, un petit gars. Le second est un grand cabinet d'avocats qui gagne des millions de dollars par an. Qu'est-ce que tu en penses ? Un site Web la même valeur pour eux ? Absolument pas. Un nouveau site Web peut générer plus d'affaires pour ces deux clients, mais une augmentation du chiffre d'affaires pour le compte peut signifier 100 dollars de plus par mois, et pour le cabinet d'avocats, cela peut signifier 100 000 dollars supplémentaires par mois. Même site Web, même effort de votre part, mais énorme différence de valeur en fonction du client. Donc, quel que soit le tarif que vous offrez à ces deux clients, il est probablement trop cher pour le comptable et ridiculement bon marché pour le cabinet d'avocats Vous finirez par perdre les deux prospects. Vous pourriez penser : Eh bien, au moins, les cabinets d'avocats seront enthousiastes à l'idée d'obtenir un prix aussi bas, mais ils ne le seront pas. Payer 5 000$ pour un site Web qui pourrait leur rapporter 1 million de dollars supplémentaires par an semble irréaliste C'est un chiffre trop petit. Ils n'auront pas confiance en votre travail. Mais si vous ajustiez vos prix en fonction des personnes qui baissent, disons, offrant hypothétiquement 2 000 dollars pour le comptable et 20 000 dollars pour le cabinet d'avocats, vous pourriez finir par prêter ces deux emplois parce que les prix semblent raisonnables pour l'un ou l'autre Steve Jobs a payé 100 000 dollars pour le logo suivant. Les logos valent-ils 100 000 dollars ? Pour lui, ça l'était. Pour une petite start-up, le coût d'un site Web ne dépend pas de deux facteurs. Tout d'abord, qui paie ? Et deuxièmement, quelle est la valeur qu'ils s'attendent à en tirer ? La valeur attendue est également un facteur important à prendre en compte. Imaginez le même scénario avec un grand cabinet d'avocats, mais cette fois, il n'a pas besoin d'un site Web pour générer de nouvelles affaires. Ils ont juste besoin d'un site Web de quelques pages et de leurs coordonnées. C'est une autre histoire. Ils n'ont pas l'intention d'en tirer beaucoup de valeur, donc 20 000 dollars peuvent sembler trop chers à payer. Ils vont probablement payer plus que le comptable indépendant, mais pas autant que les 20 K. Donc, pour déterminer le juste prix à facturer pour le site Web, vous devez d'abord comprendre qui est votre client, puis comprendre quelle est la valeur qu'il compte en tirer. La valeur dépendra de chaque projet, et vous pouvez le découvrir en posant plusieurs questions telles quel est l'objectif du site Web et qu'est-ce qu'ils espèrent en tirer ? Quant aux clients, nous pouvons les diviser en quatre catégories. Un client privé est une personne qui paie le projet de sa poche. Il peut donc s'agir de professionnels indépendants comme nous, freelances, de consultants ou de startups qui n'ont pas de financement Ces gars-là, je dirais, leur maximum est de 2 000$, mais s'il y a beaucoup de valeur à tirer du site Web, ils peuvent augmenter En ce qui concerne les taux horaires, il est un peu plus difficile pour les clients de comprendre si est bon marché ou cher, car si vous ne savez pas combien cela va coûter, vous ne savez pas si, par exemple, 50 dollars de l'heure sont chers ou bon marché. Cela prend deux ou trois heures, c'est assez bon marché, mais si cela prend 100 ou 200 heures, c'est assez cher. Ce qui se passe avec les taux horaires, c'est que les clients utilisent généralement leur propre expérience et idées préconçues pour déterminer si un produit est bon marché ou cher en fonction du coût Et ils utilisent leur propre type de référence culturelle où qu'ils vivent, différents services qu'ils payent et les comparent à eux. Et ma règle en matière de taux horaires est de ne jamais descendre en dessous de 20 dollars de l'heure, car la plupart de vos clients viennent de pays développés et dans les pays développés, tout montant inférieur à 20 dollars de l' heure est très proche du salaire minimum. Et le salaire minimum est quelque chose que, vous savez, un concierge va être payé Vous offrez des services hautement qualifiés et vous ne devriez pas être payé au salaire minimum. Et si vous vous fixez le prix d'un concierge, vous allez avoir l' air d'un concierge et vous allez effrayer tous les clients honnêtes parce que personne ne veut que son site Web soit créé par un Ayez des studios et des agences comme des studios de création , des agences de design, des entreprises informatiques, etc. Il s'agit généralement d' agences et de studios de petite et moyenne taille , car les grandes agences ont la plupart du temps leur propre personnel à plein temps, ont la plupart du temps leur propre personnel à plein temps elles ne s'engagent pas et n'ont pas besoin d' engager des indépendants Lorsque vous travaillez avec des agences, taux horaire est généralement le taux horaire est généralement la meilleure solution pour deux raisons. Tout d'abord, c'est plus simple. Vous n'avez pas à renégocier chaque fois pour chaque nouveau projet Ensuite, en raison des révisions et des projets qui prennent une petite ampleur les projets s'agrandissent de plus en plus, et vous devez faire un peu plus de travail parce que ce qui se passe, c'est que lorsque vous concevez et construisez quelque chose, personnel de l'agence vous donne son avis. Ensuite, vous devrez effectuer les révisions, et ils les enverront au client, puis les clients auront leurs propres commentaires et leurs propres modifications à apporter, puis vous devrez effectuer une autre série de révisions. À taux fixe, le studio lui-même n'a pas à se soucier de ces révisions . Il va donc devoir tout accumuler s'il vous paie à l'heure. Maintenant, il va devoir être un peu plus attentif et un peu plus prudent quant au montant des révisions que vous effectuez, car cela provient du paiement qu'il reçoit de son client final. Et généralement, lorsqu'ils travaillent avec les clients finaux, ils ne travaillent pas sur une base horaire. Les entreprises ne travaillent généralement pas sur une base de taux horaire, mais elles travaillent par projet. Ils vont donc facturer un tarif forfaitaire au client final, et ils doivent s'assurer que tout ce que cela coûte ne soit pas trop incontrôlable. Et quand ils vous payent taux fixe, ils s'en fichent, et vous pouvez simplement, vous savez, travailler autant qu'ils le souhaitent. En termes de taux horaire, cela dépend vraiment du type de clients avec lesquels ils travaillent eux-mêmes. En général, je dirais qu'ils coûtent entre 20 et 17 dollars de l'heure. qu'ils ne dépasseront jamais Je pense qu'ils ne dépasseront jamais 17 dollars de l'heure, alors dans ce cas, pour eux, il serait logique d' embaucher un employé à temps plein et de lui soutirer le plus possible, n'est-ce pas ? Cela dépend également du pays dans lequel ils se trouvent, ou peut-être de la ville dans laquelle ils se trouvent, et du fait qu'ils travaillent eux-mêmes avec des clients locaux ou des clients en ligne. Parce que s'ils travaillent avec des clients locaux, et vous pouvez probablement le découvrir facilement, cela signifie que vous allez facturer plus cher, n'est-ce pas ? Parce que pour les clients locaux, les prix sont généralement plus élevés parce que vous avez un nombre très limité d'agences et de studios dans la ville et que vous rencontrez vos clients, et les choses se passent un peu plus à un niveau supérieur qu'en ligne parce que, vous savez, les grandes entreprises ne vont pas engager d'agence en ligne. Ils vont engager quelqu'un de région, quelqu'un qu'ils pourront rencontrer et quelqu'un qu'ils pourront poursuivre justice si les choses tournent mal. Si vous négociez avec des studios, n'ayez pas peur de baisser votre tarif habituel, car le flux de travail constant et la réduction des heures non facturables justifient totalement la réduction que vous allez leur accorder Lorsque vous travaillez avec des clients finaux directs, vous devez réellement faire des propositions, n'est-ce pas ? Vous devez envoyer des propositions ou des contrats négocier, passer des entretiens, etc. Mais lorsque vous travaillez avec un studio, vous ne le faites qu'une seule fois, n'est-ce pas ? Et puis à chaque nouveau projet qui se présente à vous, vous n'avez pas à passer par tout ce processus de négociation, d'entretien ou tout ce genre de choses parce que l' agence du studio s'en charge elle-même avec le client final Vous obtenez ainsi le projet qui est déjà prêt à démarrer et à construire. Ensuite, il y a les petites et moyennes entreprises. Il s'agit généralement d'entreprises de taille moyenne qui gagnent de l'argent ou de startups financées. Ces gars-là y vont probablement à partir de 2000 et jusqu'à un maximum de 1015 Enfin, vous avez de grandes entreprises avec de nombreux employés qui gagnent beaucoup d'argent, et ces gars-là commencent probablement à 15 000 dollars et plus. Mais vous n'avez pas à vous inquiéter pour ces gars-là car ils ne travaillent pas vraiment avec des freelances Ils aiment louer des entreprises et des studios, en particulier locaux. Alors maintenant, pas besoin de t'inquiéter pour eux car je n'ai jamais travaillé avec eux, et je ne connais pas de freelances qui finissent par travailler pour de grandes entreprises. Récapitulons Nous fixons donc nos prix en fonction de l' identité de nos clients, plus le site Web est précieux pour eux, plus nous le facturons. Pour comprendre qui sont nos clients, nous devons en savoir plus sur eux. Où sont-ils payés ? Qu'est-ce qu'ils espèrent tirer du site Web ? Ont-ils besoin d'un site Web pour eux-mêmes ou s'agit-il d'une agence ? Proposez ensuite le prix en conséquence. 170. Tarification : horaire vs taux fixe ed: Comparons les taux horaires aux taux fixes. Les deux ont leurs avantages et leurs inconvénients. L'avantage de facturer taux horaire est que c'est très simple. Vous n'avez pas vraiment besoin de vous tordre le cerveau pour calculer le prix à fixer pour un certain projet. Donnez simplement un taux et finissez-en avec lui. Inutile de négocier à chaque fois que vous recevez plus de travail pour le même client. Vous n'avez pas à vous inquiéter que les révisions deviennent incontrôlables. Plus de révisions signifie plus d'argent. Les réunions et la communication peuvent prendre beaucoup de temps. Certains clients peuvent souhaiter des réunions Skype régulièrement, mais si vous les facturez également, et vous devriez le faire, ils veilleront à ne pas vous faire perdre votre temps. Et s'ils le font, au moins vous serez payé pour cela. L'inconvénient du taux horaire est qu'il ne dit rien à la plupart des clients. Par exemple, 100$ de l'heure. C'est cher ou c'est bon marché ? Qui sait ? Si vous avez terminé en 3 heures, c'est bon marché, mais s' il vous faut 80 heures, c'est cher. Les clients auront également une réaction émotionnelle à certains taux horaires. Ils trouveront certains tarifs trop chers, même si le prix final est le même. Ils pourraient bien payer cinq 000 dollars pour le site Web, mais si vous leur dites 100 dollars heure, ils risquent de paniquer Il est plus difficile pour les clients de décider, car le taux horaire rend incertain le montant de la facture finale. Au fur et à mesure que vous gagnez en efficacité et en rapidité dans votre travail, vous gagnez moins par projet. L'avantage du taux fixe est qu'il est plus facile de vendre. Les clients voient un chiffre clair et ils s'en sentent plus en sécurité. À mesure que vous devenez plus efficace, vous gagnez plus d'argent. Cela vous donne donc une chance de gagner beaucoup plus d'argent par heure sans avoir l'air trop cher. Aucune limite quant au montant que vous pouvez facturer, alors qu'un taux horaire comporte des limites mentales. Par exemple, 300 dollars de l'heure seront une limite mentale pour la plupart des clients. L'inconvénient du taux fixe est que les révisions peuvent devenir incontrôlables si elles ne sont pas clairement définies. Par exemple, deux révisions gratuites, puis l'application d' un certain taux horaire. Et lorsque votre client demandera une troisième révision, vous commencerez à le facturer. Il peut parfois être inconfortable d'en parler. C'est assez inconfortable pour moi, mais j'ai retenu la leçon lorsque j'ai fini par gagner un salaire minimum sur l'un des projets à cause des révisions interminables. Autre inconvénient, le calcul est pénible. Vous devrez effectuer des calculs supplémentaires pour définir clairement le temps qu'il vous faudra pour terminer le projet et vous assurer d'en tirer un prix rentable. Cela implique beaucoup de conjectures, et tant que vous n'avez pas appris toutes vos leçons à la dure, vous finissez par perdre de l'argent Alors, lequel devriez-vous choisir ? Tout comme pour les montants, c'est une bonne idée d'y aller au cas par cas et client par facteur. Par exemple, dans le cas des studios et des agences, sa meilleure approche serait probablement d'opter pour des taux horaires. Et en ce qui concerne les privilèges finaux, optez probablement pour des taux fixes et des taux forfaitaires. Comme les taux fixes sont un peu plus difficiles à utiliser au début, il est normal d'opter pour des taux horaires pour J'ai moi-même un mélange de burritos. J'ai commencé avec un taux fixe, mais peu de temps après, j'ai réalisé que je perdais l'argent parce que je n' établissais pas correctement les estimations et que je perdais de l'argent sur les révisions. Ensuite, je suis passé au taux horaire, ce qui était excellent, et je l'ai maintenu pendant longtemps parce que c'était simple pour moi. J'adore la simplicité de et ce moment j' ai en quelque sorte les deux. mes clients de longue date, j'applique un tarif horaire, puis pour les nouveaux clients, je fais un taux fixe. Mais pour les clients à long terme, je travaille toutes les heures parce que je fais beaucoup je travaille toutes les heures parce que je fais beaucoup de types de travail différents, comme la conception d'interface utilisateur, par exemple , pour les applications mobiles, et ces projets sportifs peuvent prendre une ampleur monstrueuse ils sont étranges et il est impossible d'y fixer un taux forfaitaire Donc, vous savez, j' utilise juste toutes les heures parce que cela simplifie les choses et facilite un dernier critère à prendre en compte est de choisir ce avec quoi vous vous sentez à l'aise. Parce qu'en fin de compte, c'est votre travail et vous devez le faire tous les jours, et il est important de rendre chaque aspect de votre travail aussi agréable que possible. Et si quelque chose vous cause de l'anxiété comme cela a été le cas pour moi, alors vous pouvez sacrifier de l' argent pour votre tranquillité d'esprit et votre confort. 171. Modèle de proposition : Taux fixe: En ce qui concerne les plateformes de freelancing, façon dont vous envoyez des propositions, c'est à vous de décider Vous pouvez leur envoyer un e-mail, un message, le leur dire par téléphone ou leur envoyer un corbeau Tout dépend de toi. Tu es le patron. Certaines options sont meilleures que d'autres. Si vous voulez paraître sérieux et impressionner vos clients, envoi d'un document de proposition approprié et bien conçu est la bonne approche. C'est ce que font les freelances professionnels. Pour vous aider à conclure davantage d'offres, j'ai créé pour vous un modèle de proposition très solide. C'est un fichier Figma, le lien trouve dans les ressources Comme vous pouvez le constater, il est conçu dans le même thème que le site Web du portfolio. Cela vous aidera à définir votre marque personnelle, vous donner une apparence plus professionnelle, comme quelqu'un qui a pensé aux moindres détails. Vous vous démarquerez instantanément de la concurrence, et vous devez vous démarquer si vos clients ont le choix entre plusieurs freelances Permettez-moi de vous présenter le contenu et de vous expliquer pourquoi j'ai mis ce que j'ai mis et quels sont les éléments que vous devrez modifier lors de la génération d'une proposition. L'en-tête est assez simple. Modifiez le logo, mettez ce que vous voulez dans le titre. Vous pouvez même mentionner le nom de leur entreprise comme proposition de site Web de Google. C'est une belle touche personnalisée vos coordonnées et celles de votre client. La vue d'ensemble est un endroit où vous montrez que vous comprenez le projet et que vous savez ce que vous allez faire. Vous leur expliquez votre objectif et leur expliquez quel est le résultat final. Nous avons inséré une petite explication sur la façon dont leur site Web sera hébergé sur d'incroyables serveurs Webflow, ce qui le rendra sécurisé et ultra rapide C'est un bon endroit pour expliquer à quel point le résultat final sera bon afin de créer de l'enthousiasme. Non, tu ne vends pas à quel point tu es incroyable. Ils veulent un site Web, pas pour sortir avec vous. Ensuite, nous avons une ventilation des prix. Il s'agit d'un tarif forfaitaire. J'ai également créé un modèle pour les projets de taux horaires. Il a une table de prix différente et certains autres contenus sont également différents, ce que j' expliquerai plus loin. La ventilation des prix montre les différents aspects de votre travail. Si vous avez d'autres éléments, vous pouvez simplement dupliquer les lignes et en ajouter ou en supprimer comme vous le souhaitez. J'aime décomposer le design et le développement en éléments distincts. Il existe deux phases différentes, et pour certains projets, vous ne pouvez même effectuer qu'une seule d'entre elles. Par exemple, s'ils ont déjà des designs, vous pouvez simplement faire le développement de Webflow J'ai également ajouté des éléments supplémentaires qui sont inclus dans le prix. Cela augmente la valeur qu' ils retirent du prix, comme le développement réactif et les sessions de formation. De cette façon, la liste de prix semble beaucoup plus précieuse et pleine d'avantages qu'une simple valeur de 2 500$ J'ai l'impression qu'ils obtiennent beaucoup plus. À propos de ces valeurs particulières, je ne fais que donner des chiffres, ne veut pas dire que c'est ce que vous devez facturer. Vous pouvez facturer un montant inférieur ou supérieur à cette valeur. Tout dépend de la catégorie de clients avec laquelle vous travaillerez, comme nous l'avons indiqué dans la catégorie de prix. Je vais juste vous donner un conseil sur les valeurs. Utilisez des valeurs arrondies. Ne fais pas le 999. Ça va juste avoir l'air stupide. Vos clients savent que c'est vous qui fixez ces prix, que vous n'utilisez aucune équation de prix complexe , alors arrondissez-les au chiffre supérieur, sinon vous allez avoir l'air stupide Sous le tableau des prix, il y a une ligne indiquant que hébergement Webflow n'est pas inclus. La transparence est essentielle dans de telles relations. N'oubliez pas de mentionner les choses importantes entre guillemets , en particulier les coûts. Ensuite, nous avons une chronologie. C'est quelque chose que les clients veulent vraiment savoir. Donc, en décomposant autant que possible, les clients prennent de gros risques avec leur argent et leur temps. Ils veulent avoir le contrôle de leur projet. Ils veulent donc savoir exactement comment les choses vont évoluer, ils se sentent en paix et qu'ils vous feront davantage confiance. Il s'agit d'estimations approximatives. Les projets ne suivent jamais exactement le calendrier prévu. Cela ne dépend pas uniquement de vous rapidité avec laquelle les clients vous font part de leurs commentaires sur chaque phase, nombre d'itérations que vous effectuez et la rapidité avec laquelle ils fournissent le contenu nécessaire auront un impact significatif sur le calendrier du projet Il arrive souvent que d'autres tâches apparaissent au cours du projet. Ils pourraient vous demander de petites choses qui finiront par s'additionner. Si vous travaillez selon un taux horaire, ce n'est pas un problème. Mais dans le cas d'un projet à taux fixe, vous finirez vite par perdre de l'argent si vous ne mettez pas les choses au clair quant à ce qui va se passer s'il y a du travail supplémentaire qui dépasse le cadre principal, même s'il ne s'agit que de réunions supplémentaires qui prennent votre temps. J'ai moi-même dû l'apprendre à mes dépens. J'avais un client qui voulait le rencontrer presque tous les jours. Je pense qu'il aimait juste parler et réfléchir Mais pour moi, cela prenait trop de temps et je n'étais pas payée pour cela. Si vous fixez un taux horaire pour tout travail supplémentaire, tout le monde sera clair. La dernière partie concerne les termes. J'ai énuméré quelques points importants pour clarifier la façon dont les choses fonctionneront et éviter tout désaccord futur Ces conditions ne sont probablement pas juridiquement contraignantes. Leur objectif est la clarté, afin que tout le monde soit sur la même longueur d'onde. Par exemple, il dispose d'une structure de paiement. Lorsque vous travaillez avec des étrangers en dehors de la plateforme, vous devez effectuer un paiement initial À 25 %, c'est généralement une bonne idée. C'est ma structure, mais vous pouvez la modifier comme bon vous semble. Et évidemment, vous pouvez modifier n'importe laquelle de ces conditions ou ajouter les vôtres. Le format final peut être au format PDF ou vous pouvez même partager un lien vers la vue du prototype, comme je le montre en ce moment, mais je pense que le PDF est une meilleure option. Vous savez déjà comment exporter. Accédez simplement au panneau Propriétés, Exporter, choisissez PDF, et c'est tout. Je voudrais vous donner une règle en ce qui concerne l' envoi de propositions en dehors des plateformes. Ne les surprenez pas. Donc, lorsque vous envoyez une proposition et qu'ils en obtiennent la valeur, et cette valeur, si c'est peut-être trop pour eux ou si c'est cher, cela les surprendra, les choquera un peu et, vous savez, les décevra un peu Et comme vous le mettez dans le document et que vous l'avez déjà envoyé sous forme écrite et précise, ils n'ont aucun moyen de s'opposer ou de négocier et vous-même n'avez moyen de présenter des arguments et des avantages du prix, de leur dire et de leur expliquer pourquoi il est bon pour eux de vous suivre, etc., n'est-ce pas ? Vous n'êtes pas non plus en mesure de négocier ni de leur accorder une réduction parce que cela peut parfois être au prix comme marge de manœuvre, n'est-ce pas ? Vous mettez donc un peu marge pour vous assurer de pouvoir le négocier à la baisse s'ils souhaitent s'ils vous demandent la réduction, ou parfois vous pouvez même faire baisser le prix en supprimant le nombre de révisions ou en faisant quelque chose un peu moins ou, vous savez, il existe de nombreuses façons de faire bouger les choses pour faire baisser le prix si ils ne peuvent vraiment pas se permettre la valeur que vous leur avez donnée. La bonne approche consiste donc à discuter du prix lors de la réunion. Par exemple, vous n'êtes pas obligée de vous mettre enfin d'accord là-dessus, mais ce que vous pouvez faire, l'important, c'est donner une certaine marge de manœuvre Ils ne sont donc pas surpris lorsque vous leur donnez une valeur finale. Et ce que vous pouvez faire pendant la réunion, c'est ce que je fais, par exemple. J'ai une réunion comme s'il s'agissait d' une réunion Skype ou d'une réunion en face à face. Et lorsque nous participons à la réunion, je pose beaucoup de questions sur le projet, et j'ai déjà une sorte de valeur initiale en tête que je suis prête à accepter. J'ai en quelque sorte cette gamme, qui est comme un minimum pour lequel je suis prête à travailler et un prix idéal que je veux en tirer. Une fois que j'ai posé les questions, je comprends que si le site Web est juste une ou deux pages ou s'il s' agit peut-être d'un gros site Web avec, vous savez, 25 pages différentes ou un blog ou quelque chose comme ça. Et je leur propose une fourchette qui se situe peut-être entre un minimum de 4 000 et 6 000 dollars, puis je leur donne cette Et s'ils ont des objections , nous en discuterons, et je serai en mesure de leur accorder des avantages et de leur expliquer, vous savez, pourquoi c'est une bonne option pour eux et pourquoi le prix en vaut vraiment la peine. Et s'ils ne le font pas, par exemple , il se peut que je leur donne une valeur alors qu'ils s'attendaient à moins de 1 000. Maintenant, je sais que nous ne faisions pas bon ménage et, vous savez, je ne vais pas faire fonctionner un site Web pour un grand site Web, moins de 1 000. Je n'ai donc pas à me soucier de créer la proposition et d'envoyer des e-mails, tout le reste. Nous comprenons immédiatement que nous sommes vraiment dans un jeu différent ici, et que nous ne sommes pas un bon match Je gagne donc beaucoup de temps. Mais si nous sommes toujours dans cette bonne phase, nous pouvons négocier si nécessaire. Mais si le prix vous semble également intéressant, une fois la réunion terminée , je prépare la proposition, et je mettrais probablement environ 5 000$ pour le site Web. Maintenant, ils s'attendent à ce prix ils ne sont pas surpris, et nous avons conclu un accord 172. Modèle de proposition : Taux fixe: En ce qui concerne la proposition de taux horaire, Same ten a joué un rôle essentiel. La première différence réside dans le tableau des prix, bien sûr, beaucoup plus simple, avec un seul tarif. Parfois, vous souhaiterez peut-être avoir des taux différents pour différentes tâches. Vous pouvez ensuite ajouter un brut supplémentaire et définir un taux différent pour ce service. Je l'ai déjà fait avec mon premier client Webflow. À l'époque, je n'avais pas beaucoup d' expérience dans le développement et le Webflow Je venais de réaliser deux projets pratiques, mais j'avais une solide expérience en design et je savais que je ne serais pas très rapide dans Webflow J'ai donc accordé un tarif réduit pour la phase de développement afin d' être équitable avec mon client. J'ai ajouté un paragraphe ici pour expliquer comment les choses fonctionneront, par exemple disant que vous les facturerez toutes les deux semaines pour le temps enregistré pendant cette période. C'est à vous et à votre client de décider de la façon dont vous l'organisez. Si vous le souhaitez, vous pouvez facturer une fois par semaine ou une fois par mois. J'ai également apporté quelques modifications aux conditions, comme la structure de paiement et la politique d'annulation. N'utilisez pas ces termes comme un avis juridique. Je ne suis pas avocat et je n'ai pas non plus créé ces termes sur la base d' un quelconque cadre juridique. C'est à vous et à votre client bien comprendre certaines choses importantes. Nous parlerons des contrats dans la prochaine vidéo. Lorsque vous travaillez avec des taux horaires et en dehors des plateformes, vous devrez utiliser un outil de suivi du temps. Celui que j'utilise est Top Tracker. J'en ai essayé plusieurs, et celui-ci semble être le meilleur, autant plus qu'il est totalement gratuit. Du moins, pour le moment, c'est le cas. Il dispose d'une application de bureau. Une fois que je l'ai ouvert, tous mes projets en cours sont là, puis je sélectionne le projet et je commence le suivi. est aussi simple que ça. Je fais le suivi de tout ce qui concerne le projet. Cela ne doit pas se limiter à la conception et au développement, aux réunions, aux communications, etc. Tout cela fait partie du projet. J'ai mis le lien vers Top Tracker dans la section des ressources sous la rubrique productivité, où vous trouverez d'autres outils de travail indépendant Par exemple, les fichiers WAV, que j'utilise pour la facturation, sont également des outils de proposition en ligne Par exemple, Bonsai a ici une fonction de proposition. Je n'utilise pas ces outils de proposition en ligne car Figma, je peux concevoir ma proposition comme je le souhaite, en l'adaptant à ma marque et en général avec plus de flexibilité Mais avec ces outils, je dois m'en tenir à leurs modèles. Au cas où vous voudriez les essayer, les voici. Et c'est votre modèle de proposition. Utilisez-le, adoptez-le comme vous le souhaitez. J'ai mis ici des choses que j'utilise moi-même et que j'ai apprises au fil des ans en commettant des erreurs avec clients et en me retrouvant dans des malentendus Vous pouvez utiliser mon expérience comme point de départ. 173. Freelance Contract: C'est surprenant, mais je ne passe pas de contrats avec mes clients. Ça ne peut pas m'embêter. Cela rend les choses trop sérieuses. Et même si les choses tournent mal, je ne vais probablement jamais intenter une action en justice. Donc ça ne sert vraiment à rien pour moi. C'est pour cela que je m' assure que les choses ne se passent pas mal. Voici quelques précautions que je prends pour m'assurer que le projet se déroule bien et que je finisse par être payé. Cela s'applique principalement au travail en dehors de la plateforme. Sur les plateformes comme Upwork, le contrat y est géré Il est dans leur intérêt que vous soyez payé. Et si quelque chose ne va pas, ils joueront un rôle de médiateur et décideront qui a raison ou tort Que vous travailliez avec un contrat ou non , voici quelques précautions à prendre pour assurer que les choses ne se passent pas mal. abord, vous devez vous assurer que vous êtes clair avec votre client , afin qu'aucune surprise ne survienne au cours du projet. Pour cela, j'utilise mon document de proposition et je m' assure que tout ce qui pourrait apparaître à l'avenir y est indiqué . Et en cas de désaccord, nous pouvons toujours revenir à la proposition et voir ce qu'elle dit. Lorsque vous travaillez avec des clients à travers le continent, il est souvent plus facile de rompre un contrat, mais pas aussi facile de rompre et de détruire une relation interhumaine. Ainsi, lorsque je travaille avec des clients, comme je le fais habituellement avec des clients à l'étranger et sur tous les continents, j'essaie d'avoir un contact en face à face sur Skype , principalement parce que le fait d' interagir en face à face avec les gens et d' établir cette relation en face à face avec des clients à l'étranger et sur tous les continents, j'essaie d'avoir un contact en face à face sur Skype, principalement parce que le fait d' interagir en face à face avec les gens et d' établir cette relation en face à face crée un lien différent entre les clients et moi. Et rompre cette relation est beaucoup plus difficile s'ils m'ont déjà vue et si nous avons eu une interaction pendant l'appel plutôt que si j'étais juste un gars avec une photo de profil et un nom d'utilisateur ou simplement une adresse e-mail. De plus, je peux obtenir beaucoup d' informations sur mes clients en les voyant et en leur parlant. J'utilise mes capteurs foutus que Dame Nature m' a donnés, et je peux détecter s' quelque chose de douteux ou de louche. Avec les nouveaux clients, je les facture toujours étape par étape tout au long du projet. Je n'attends pas que l' ensemble du projet soit terminé pour finalement envoyer la valeur totale et j'espère qu'ils paieront. Si je travaille avec de parfaits inconnus avec lesquels je n'ai jamais travaillé et que c'est en dehors de la plateforme, je vais demander un paiement initial de 25 % De cette façon, je peux équilibrer les risques entre moi et le client, car si je leur demande un paiement initial de 100 % , ils assument tous les risques Et je ne veux pas mettre mes clients dans cette situation, ils ne seront pas prêts à le faire non plus, ou si je facture 100 % à la fin du projet, j'en prends tous les risques. En demandant seulement 25 % à l'avance, oui, ils prennent eux-mêmes un petit risque, mais il me reste au moins 75 % de mes paiements pour me motiver à faire le reste du travail Avec des clients existants avec lesquels j'ai déjà travaillé et en qui j'ai confiance, qui m' ont déjà payé pour des projets précédents et que j'ai toujours payé à temps, je peux me détendre et je peux facilement les facturer à la fin du projet, à 100 %. Mais c'est ce que je fais. Cela ne veut pas dire que c'est ce que vous devriez également faire, juger par vous-même et voir la relation que vous entretenez avec vos clients. J'aime aussi souvent avoir confiance en mes clients, et quand je constate que nous entretenons de bonnes relations, j'aime leur montrer que j'ai confiance en eux et que je ne me méfie pas d'eux, parce que si je leur fais confiance, ils savent qu' ils peuvent me faire confiance C'est en quelque sorte une question de réciprocité. Si vous leur faites confiance, ils se sentent obligés de vous faire confiance retour et créent simplement une très bonne relation. Mais si je me méfie toujours d'eux, alors, tu sais, relation va être un peu plus froide. En cas de mauvaise expérience, ajustez votre stratégie. Lorsque quelqu'un trahit votre confiance et ne vous paie pas à temps, assurez-vous de changer de stratégie, sans excuses, sans seconde chance et demandez des paiements initiaux Je n'ai eu qu'une seule fois un problème de paiement. Je travaillais pour la start-up. J'ai créé le site Web pour eux, et ils attendaient un investissement mais ils n'ont pas pu me payer à temps J'ai dû les poursuivre, mais je ne savais pas quand ils allaient me payer. J'ai dû les appeler et leur envoyer tout ça par e-mail. Ils ont fini par me payer et retard n'était pas si important, mais après ce moment, une fois qu'ils ont trahi ma confiance, c'est tout pour moi. Et puis au bout d' un moment, tout ce que j'avais à faire pour le site Web, je les ai simplement facturés d'avance. Ils disaient, tu sais, Oh, peux-tu le modifier ? Je me suis dit : « Bien sûr, voici le paiement initial. Tu me payes, je fais le travail. Si tu ne me payes pas, je n'y touche pas du tout. Si quelqu'un vous montre qu'il n'est pas digne de confiance, croyez-le et prenez les mesures appropriées. Si vous vous sentez plus en sécurité en signant des contrats ou si votre client en demande un directement, vous pouvez générer un contrat sur Bonsai Bonsai est une solution indépendante qui propose des propositions de facturation, etc., et propose également un contrat que vous pouvez générer pour des travaux de conception ou de conception Web spécifiques C'est un contrat vraiment sympa et personnalisable. Toutes les parties surlignées sont celles que vous modifiez et dans lesquelles vous insérez vos informations. Vous pouvez garder le repos intact car il a été créé par leurs avocats. modification des parties surlignées est très facile vous donne une option et vous pose des questions simples. Vous pouvez donc répondre à ces questions, et il se remplira facilement automatiquement dans une langue adaptée aux contrats Ils ont fait un excellent travail. Donc, si vous en avez besoin, inscrivez-vous simplement à Bonsai et générez un contrat. 174. Vendre Webflow à vos clients: Vos clients auront une expérience avec Webflow, voudront que le site Web y soit directement intégré et ils rechercheront spécifiquement des concepteurs de Webflow Mais pour d'autres, ils ne connaissent peut-être même pas Webflow, vous devrez donc en quelque sorte les convaincre d' utiliser Webflow comme plate-forme Ces clients peuvent être divisés en deux types. Ceux qui n'ont aucune exigence quant à l'endroit où vous allez créer le site Web. Et deuxièmement, ceux qui ont une préférence pour une plate-forme particulière, généralement WordPress. Vendre Webflow à ceux qui n' ont pas d'exigences ou de préférences particulières quant à l'endroit où vous allez le créer n'a pas vraiment besoin de beaucoup de conviction La plupart de mes clients sont comme ça, et ils font généralement confiance à mon expertise pour créer le site Web. La seule chose qui pourrait avoir besoin d'être un peu convaincante, ce sont les coûts d'hébergement de Webflow Mais il est important de noter que hébergement coûte également de l'argent pour d'autres options. Même s'il s'agit de Board Press, WordPress lui-même est gratuit, mais l'hébergement est payant. Le site Web doit donc se trouver quelque part. Ce sera généralement environ au moins 5$ par mois. Maintenant, là où le prix de l'hébergement privé baisse vraiment et le rend vraiment bon marché par site Web, c' est lorsque vous hébergez plusieurs sites Web, car les fournisseurs d'hébergement privés ordinaires , car les fournisseurs d'hébergement privés vous donnent également le prix que je vous ai donné en ce moment était pour un seul hébergement de site Web, mais avec une très petite augmentation de prix, je crois, deux 3 dollars par mois augmentez, maintenant ils vous offrent un plan différent qui vous permet d'héberger un nombre illimité de sites Web. Et c'est là que les prix baissent réellement par site Web. Mais le problème est que les clients réguliers ne peuvent pas vraiment utiliser cet avantage, car les clients réguliers ont généralement une seule entreprise et ont besoin d'un site Web, n'est-ce pas ? Ils ne bénéficieront donc jamais de l'hébergement de 100 sites Web différents sur un seul plan, car ils n'ont pas besoin de 100 sites Web différents. Ils n'ont qu'un seul site Web, non ? Et je parle d'un site Web parce que, bien sûr, nous pouvons avoir même sur Webflow, un seul site Web Nous ne paierons qu'un seul plan, mais nous l'avons fait, il peut avoir des milliers de pages. C'est une autre histoire. Je parle de différents sites Web sur différentes adresses Web et d'autres choses de ce genre, n'est-ce pas ? C'est donc le gros moyen d' économiser de l'argent sur l'hébergement privé. Maintenant, par exemple, si j'étais développeur Wordpress, je pourrais avoir mon propre compte, directement sur un seul plan d'hébergement, puis chaque site Web que je crée pour tous mes clients, je les hébergerais là-bas, n'est-ce pas ? Donc, par site Web maintenant, vous savez, le prix baisserait très, très bon marché, est-ce pas, parce que j' ai juste un compte, un plan d'hébergement, et puis chaque site Web y accède. Ensuite, je peux facturer à mes clients les frais d' hébergement annuels ou les frais de gestion pour chaque site Web, puis j' empocherais la différence. Et c'est évidemment ce que font de nombreux développeurs Web. Mais cela finit par un prix similaire pour le client en fin de compte. Donc, pour le client, il n'a pas vraiment beaucoup d'options, car aucun développeur Web ne laissera passer cette très bonne opportunité de gagner l'argent supplémentaire et de proposer un hébergement entièrement gratuit, n' est-ce pas, parce qu'il devrait encore payer pour cela et tout ça. Alors pourquoi l' offriraient-ils gratuitement ? Maintenant, pour d'autres avantages importants de Webflow, vous pouvez bénéficier de ce que l'on appelle un hébergement géré hébergement géré signifie qu'ils L'hébergement géré signifie qu'ils font beaucoup de choses en arrière-plan pour vous, des tâches dont vous ou votre client n'avez jamais à vous soucier, comme les sauvegardes automatisées, la sécurité, l'analyse et la suppression des logiciels malveillants, site du serveur, les mises à jour logicielles , l'amélioration des performances, et bien d'autres choses que je ne comprends pas et qui ne m'intéressent tant que tout est pris en charge. La maintenance de la sécurité est un problème majeur pour les serveurs. J'ai déjà eu un site Wordpress, que j'hébergeais moi-même sur un serveur à puce. Un jour, un malware s'est introduit et a bouleversé mon site. Le site s'allumait et s'éteignait constamment. Le malware utilisait toute la bande passante de mon serveur. Je n'arrivais pas à trouver comment enlever ce foutu truc. C'était mon site personnel, j'ai donc décidé de tout supprimer et d'annuler l'hébergement. Et si cela ne suffit pas faire la différence, alors c'est le cas. plans d'hébergement les moins chers vous offrent généralement un espace serveur dans un seul endroit, un ordinateur appelé serveur sur lequel se trouve votre site Web. Si je suis en Australie et que le serveur se trouve aux États-Unis, le contenu d'un site Web doit passer par des câbles entre les États-Unis et l'Australie. Cela crée une charge secondaire comme un escargot, mais l'hébergement Webflow est fourni avec ce que l' on appelle un réseau de diffusion de contenu CDN. Avec Webflow, votre site se charge depuis le serveur le plus proche de l'utilisateur Ainsi, si un utilisateur se trouve au Japon, le site Web se chargera depuis un serveur situé à proximité à Tokyo, et non depuis la Californie. Bien entendu, Webflow n'est pas le seul hébergement à proposer cela, mais dès que vous ajoutez une fonctionnalité CDN sur des serveurs classiques, les prix commencent à augmenter et se rapprochent du prix de Webflow Et si cela ne suffit pas, Webflow a encore une astuce dans sa manche Il s'agit d'un avantage que les serveurs gérés classiques ne présentent pas. Vous voyez, les serveurs ordinaires doivent être prêts à tout. Les utilisateurs peuvent installer WordPress, Juma, Drupal ou même les trois systèmes et les exécuter tous Cela ne pose aucun problème au serveur, mais cela signifie qu' il ne peut pas être entièrement optimisé pour exécuter correctement un seul système en particulier. Les serveurs Webflow ne doivent exécuter qu'un seul système, Webflow. Il est donc très bien réglé pour exécuter uniquement Webflow. Maintenant, bien sûr, il existe fournisseurs d'hébergement comparables qui répondent tous les avantages de Webflow, qui se spécialisent dans une plate-forme unique, sont gérés et incluent des fonctionnalités Cdian, mais ils finissent par être plus chers que Par exemple, WP Engine, un fournisseur populaire d'hébergement WordPress spécialisé qui possède les mêmes fonctionnalités similaires à celles proposées Webflow, commence à 35$ par mois. Alors voilà. Comparés à un site Web par rapport à un hébergement de site Web, les prix sont très similaires ou parfois même plus chers de l'autre côté. Si vous utilisez les mêmes fonctionnalités que ce type de Webflow. Et en fin de compte, si un site Web ne peut pas apporter plus de valeur à vos clients que 20$ par mois, quel est l'intérêt de ce site Web de toute façon ? Le deuxième type de clients aura des préférences pour une plate-forme spécifique, généralement Wordpress. Maintenant, avant de faire valoir votre point de vue et d'essayer de les convaincre d'utiliser Webflow, vous devez comprendre le raisonnement qui les sous-tend. Comment sont-ils arrivés à la conclusion qu' ils devaient utiliser WordPress comme plateforme ? Parce que Webflow n' est pas en mesure de répondre à une fonctionnalité ou à une exigence spécifique qu' ils ont parfois , vos clients peuvent avoir Par exemple, si l'équipe a utilisé un plugin WordPress le site Web précédent, probablement parce qu'elle avait un site Web sur Wordpress et qu'elle utilisait un plugin spécifique. Supposons que vous travailliez pour une clinique dentaire et qu'elle utilise un plugin Wordpress spécifique pour ses rendez-vous, comme, vous savez, la prise de rendez-vous, vous savez, comme des calendriers, puis, vous savez, les utilisateurs se rendent sur le site Web Il y a un calendrier, puis ils prennent rendez-vous, quelque chose comme ça, non ? Et ils utilisent ce plugin en particulier, et peut-être qu'ils le veulent vraiment parce que le personnel y est habitué ou parce qu'il est intégré d'une manière ou d'une autre à leur type de processus métier ou parce qu'il à leur type de processus métier ou intègre à d'autres applications qu'ils utilisent eux-mêmes, peut-être un autre CRM ou quelque chose comme ça Dans ce cas, c'est vrai, ils ont vraiment besoin, vous savez, pourboire à 100 % avec ce plugin. Vous n'êtes pas en mesure de le faire car si ce plugin est spécifique à Webflow, WordPress, vous ne pouvez rien y faire Maintenant, évidemment, il existe de nombreuses alternatives, des rendez-vous et des applications tierces qui ne sont pas spécifiques à une plate-forme. Et la plupart des très bonnes applications et des meilleures applications tierces sont comme ça. Ils ne sont pas spécifiques à une plateforme. Ce sont des sortes de codes que vous pouvez installer sur n'importe quel site Web. Et vous pourriez trouver l'alternative, mais s'ils veulent vraiment s'en tenir exactement à ce plugin, car pour une raison quelconque, vous ne pouvez rien y faire. Et la seule option est d' utiliser la plateforme WordPress, et c'est tout. Vous devez donc déterminer s'il existe une exigence à satisfaire, à laquelle ils doivent répondre, et si vous ne pouvez pas la satisfaire avec Webflow, vous devez transmettre ce client Et si vous n'avez trouvé aucune exigence à laquelle Webflow ne puisse répondre, dites-leur que vous avez une meilleure solution pour eux que WordPress et offrez-leur trois grands avantages de Webflow Tout d'abord, l'hébergement Webflow simple et performant. Tous ces points que j'ai mentionnés plus tôt, le CDN, une meilleure sécurité, plus rapide, moins de tracas, moins cher Deuxièmement, à quelle vitesse vous pouvez créer, itérer et diffuser leur site Web Le concepteur de flux Web, le codage d'un site Web à partir de zéro prend beaucoup plus de temps. Et troisième avantage, l'éditeur Webflow. C'est important pour les clients. Wordpress et les autres CMS sont source de confusion pour la plupart des gens. Ils sont laids, maladroits et lents, ils ne sont pas très agréables à utiliser. Vous devez vous rendre dans le back office et modifier le contenu à partir de là. Mais l'éditeur de Webflow se trouve directement sur le site en ligne. Les clients peuvent simplement se rendre sur le site Web en direct et commencer à modifier le contenu immédiatement. Et c'est ainsi que vous pouvez réellement plaider en faveur de Webflow auprès de vos clients Pas grand-chose à vendre en fait. C'est assez simple et direct. Personnellement, j'ai rarement besoin de plaider en faveur cela, car la plupart de mes clients font confiance à mon expertise. Ils ne sont pas très préoccupés par l' endroit où je vais construire, à cause des hommes d'affaires et des entrepreneurs Et souvent, je travaille même avec équipes qui sont plutôt des techniciens, des équipes de développement, et même elles ne se préoccupent pas vraiment de savoir et même elles ne se préoccupent pas où je , tant que c'est efficace pour moi, que je le produis et que je peux le crée, tant que c'est efficace pour moi, que je le produis et que je peux très bien l' itérer parce que c'est moi qui crée un site Web et c'est moi qui vais éditer ce site Web et tout ça Il faut donc que ce soit rapide et efficace pour eux, que je puisse leur faciliter Ils me demandent combien cela va coûter , leur indiquent le prix, et ils répondent : « OK, bien ». Mais dans les cas où Webflow semble certainement être la meilleure option pour eux et où il n'y a aucune limite , mais pour une raison ou une autre, vous vous heurtez peut-être encore à de la résistance de la part de vos clients, peut-être à propos du prix ou autre Alors tous ces avantages que j'ai décrits sont suffisants pour sceller l'accord. 175. Pour passer par les avancés: Toutes nos félicitations. Vous avez suivi la partie principale de ce cours. Toutes les vidéos à venir sont avancées, ce dont vous n'avez pas besoin tout de suite pour démarrer votre carrière de concepteur de sites Web indépendant. J'espère vraiment que vous avez apprécié le trajet. Je me suis rendu compte que ce cours était difficile et que vous avez tout appris, du bon design au développement de Webflow en passant par le travail indépendant réussi N'hésitez pas à revoir certaines leçons de temps à autre Ils colleront mieux et vous vous entraînerez encore plus. Pour les prochaines étapes, je vous recommande de pratiquer de manière indépendante en dehors de ce cours. Vous pouvez choisir un sujet ou un produit qui vous inspire et créer un site Web pour celui-ci. Ou même une meilleure option serait prendre en charge de vrais projets. Vous pouvez rechercher des projets au sein votre réseau, entre amis, membres de votre famille , collègues de travail, etc., et vous pouvez accepter des projets payants ou gratuits. Ou vous pouvez tout de suite commencer à chercher de vrais projets et vrais emplois sur Upwork et d'autres plateformes de freelancing Les didacticiels de cette section concernent à la fois le design et le Webflow Par exemple, ce didacticiel Photoshop sur la façon de découper un objet en arrière-plan, dont nous avons parlé dans la partie design de ce cours, mais nous ne l'avons jamais vraiment examiné comme une pratique car il s' agissait d'un didacticiel Photoshop un peu plus avancé. C'est pourquoi je l'ai mis dans cette partie avancée de la section ou intégration de code personnalisé, qui est destinée à Webflow, juste pour intégrer des applications tierces comme le plugin de commentaires, nous allons faire et quelques autres didacticiels vidéo dans la section avancée 176. Modal personnalisé (pop-up): Dans cette vidéo, je vais vous montrer comment créer un modèle personnalisé ou, en d'autres termes, une fenêtre contextuelle, quelque chose comme ça. Lorsque l'utilisateur clique sur le bouton, un modèle s'ouvre avec un formulaire. Les modèles sont largement utilisés et très pratiques. Mettre des formulaires à l'intérieur n'est qu'une utilité. Une option très détestée consiste à l'utiliser comme fenêtre contextuelle. Tu vois de quoi je parle ? Lorsque vous naviguez sur une page message marketing ennuyeux surgit de nulle part alors que nous n'avons cliqué sur rien Dans celui-ci, nous allons opter pour option moins controversée, un formulaire s'ouvrant lorsque l'utilisateur clique sur ce bouton Obtenir l'accès sur notre site Web TeamApp Construire cela dans Webflow n'est pas aussi simple qu'on pourrait le penser n'existe aucun composant modal prêt à que nous pouvons simplement ajouter à la page. Il y en a une qui s' appelle Lightbox, mais elle est principalement destinée aux images et aux vidéos Mais il n'y en a pas de formulaires ou quoi que ce soit de ce genre. Cela m'a surpris au début, et lorsque j'ai regardé le didacticiel sur la façon créer ce modèle avec un formulaire à l'intérieur. C'est à ce moment-là que j'ai compris quel type de plateforme de conception Web Webflow était un outil professionnel dans lequel vous pouvez créer des choses à partir de zéro, comme un développeur, simplement supprimer des composants prêts à Cela peut donc être surprenant pour vous aussi, mais c'est ce qui rend Webflow génial Commençons donc. Que se passe-t-il lorsque le modal s'ouvre ? Il y a une couleur d'arrière-plan qui se superpose en haut de la page entière, et il y a ce formulaire à l'intérieur, n'est-ce pas ? Puis, à la fin, tout disparaît. Construisons-le d'abord, puis nous nous occuperons des interactions. Je vais ajouter un bloc div et le mettre en haut de la page. Et nommez-le modal wrapper. C'est là que tout va aller. Nous devons maintenant le superposer sur tout l'écran. Nous pouvons le faire en position fixe et en sélectionnant complet. Donnons-lui une couleur pour voir ce qui se passe. Il recouvre donc le héros, mais pas la section qui le suit. Et il se trouve également derrière la barre de navigation, mais nous voulons qu'il soit au-dessus de tout Pour le superposer à tout, nous devons utiliser une fonctionnalité dont nous n'avons pas encore parlé, l'indice Z. Ce que nous pouvons trouver dans les paramètres de position. Il apparaît sur toutes les positions sauf automatique ou statique. Z représente l'axe Z, la profondeur. En gros, cela nous permet de contrôler l' empilement des éléments les uns sur les autres Par défaut, la plupart des éléments sont définis sur une valeur nulle. Si deux éléments se chevauchent, celui dont la valeur Z est plus élevée s'empilera dessus J'ai également lié le didacticiel vidéo Webflow sur index Z au cas où vous voudriez en savoir un peu plus à ce sujet Donc, si je remplace l'indice Z par un, il s'accumulera au-dessus de toutes les valeurs nulles. Super, mais c'est toujours derrière la barre de navigation. Pourquoi ? La barre de navigation n'indique pas qu' elle contient une valeur Z, mais comme la barre de navigation est un composant prêt à l' emploi, elle possède probablement un index Z par défaut provenant de Webflow, ce qui est logique car la barre de navigation sur vues mobiles possède un menu déroulant, qui doit être empilé au-dessus de tout si nous ouvrons le menu sur des appareils mobiles ou Si nous attribuons à notre modèle une valeur d'indice Z plus élevée, il s'empilera sur le dessus. Nous pouvons voir quelle est la valeur de la barre de navigation, mais je vais vous dire tout de suite qu'elle est de 1 000 Donc, si nous fixons le modèle à 1001, cela fera l'affaire. Si ce n'est pas pour vous, la valeur est peut-être différente. Il suffit d'aller de plus en plus haut jusqu'à ce que cela fonctionne. Il n'y a aucune limite à ce que vous pouvez faire. Mettez-en 10 000 si vous voulez. OK, enfin, rendons le wrapper modal un peu transparent, environ 80 % Ensuite, nous avons besoin d'un modèle au centre. Avant d'ajouter cela, transformons le wrapper en flexbox afin de pouvoir aligner le contenu au centre Le nouveau bloc div sera placé juste au milieu. Nommez-le modal et stylez-le. Neck, il suffit d'ajouter un contenu, un titre, un paragraphe et un bloc de formulaire. Nous n'avons pas de designs pour cela. Je l'utilise juste pour faire une démonstration. Nous avons déjà des classes pour l'élément de formulaire, alors réutilisons-les simplement comme button et filled. Je vais donner la largeur maximale modale, afin que le contenu s'intègre parfaitement à l'intérieur. Les champs ont une largeur maximale. C'est pourquoi ils coupent court comme ça. Excellente. Il nous faut encore une chose sur le modèle, un bouton fermé. Sinon, comment les utilisateurs savent-ils où cliquer pour fermer le modèle ? Nous pouvons placer quelque chose comme Annuler ou fermer sous un bouton ou une icône X dans le coin du modèle Optons pour une icône fermée car c'est un peu plus difficile. Vous en apprendrez donc plus. En réalité, vous savez déjà tout ce dont vous avez besoin pour le construire. Nous avons juste besoin d'une icône fermée, que nous pouvons obtenir à partir d'une icône plate. Puis positionnez-le dans le coin supérieur droit en utilisant le positionnement absolu. Mais lorsque vous faites cela, cela va passer au coin supérieur de la page, pas au modèle. Tu te souviens de ce que nous devons faire ? Nous devons régler le modal sur une position relative afin que l'icône soit positionnée par rapport au modèle. Là-bas. Nous pouvons maintenant bien positionner l'icône en donnant quelques marges. Juste pour info, les couleurs SVG sont modifiables dans Figma. Si nous le voulions, nous pourrions ouvrir ce SPG dans Figma et changer la couleur pour qu'elle corresponde à la palette du projet, mais nous n'avons pas à le faire pour le moment Nous pouvons plutôt réduire l'opacité à environ 30 % pour la rendre grise OK, regardons l'aperçu. Le curseur ne se transforme pas en main. J'aurais dû utiliser un bloc de liens au lieu d'un bloc div normal, mais ça va. Nous pouvons modifier manuellement le type de curseur depuis le panneau Styles. I C'est aussi simple que cela. Et nous pouvons augmenter l'espace cliquable afin que les utilisateurs n' aient pas à pointer le pointeur sur l'icône avec autant de précision Vous pouvez le faire simplement en augmentant le rembourrage de l'image. Mais maintenant, nous devrions réduire les marges, sinon c'est trop loin du bord, peut-être même supprimer les marges. Un effet de survol serait bien. Nous pouvons simplement augmenter l'opacité au survol et, bien sûr, lui donner un effet de transition pour qu'il soit agréable et fluide Et c'est tout. Le modèle est terminé. Maintenant quoi ? Nous avons besoin d'interactions, d'interactions étroites et ouvertes. Commençons par fermer puisqu'il est déjà ouvert. Notre élément déclencheur est évidemment l'icône de fermeture sélectionnée. Accédez au panneau Interactions. Assurez-vous que la version des interactions avec GSAP est sélectionnée ici et non les interactions classiques et sélectionnez le déclencheur qui est un clic Et ajoutez une nouvelle action. Animer. Alors, qu'est-ce qu' on anime ici Nous voulons animer le formulaire entier, le modèle entier, y compris l'arrière-plan, tout, n'est-ce pas ? heure actuelle, la cible est l'élément, qui est le déclencheur du clic. n'est pas ce que nous voulons. Nous voulons changer d'objectif. Sélectionnez la classe, supprimez-la et sélectionnez le modèle d'emballage. C'est le nom, le nom de classe de notre modèle d'emballage ici. C'est pourquoi le modèle d' emballage apparaît. Par défaut, sous filtre, il filtrera dans l'élément déclencheur, mais le wrapper du modèle ne se trouve pas dans l'icône fermée, donc nous ne le voulons pas Nous ne voulons pas ce type de filtrage, il suffit donc de le réinitialiser. Il est donc réglé sur aucun. Alors maintenant, que voulons-nous animer Nous voulons qu'il passe simplement à 0 %, visible à 100 % pour disparaître à 0 % d'opacité Joue-le et il disparaîtra. Peut le rendre plus rapide. Le changement passe à quelque chose d'un peu plus puissant. Mmm, hum. C'est mieux. Maintenant, si vous survolez le canevas, vous verrez que tous ces éléments sont sélectionnables sur le Et cela se produira également dans l'aperçu. Il disparaît, mais je ne parviens pas à sélectionner aucun de ces éléments ici . Je n'arrive pas à cliquer sur le remplissage. Je ne peux pas cliquer sur le bouton, rien de tout cela, et comme vous pouvez le voir, mon curseur change car il survole les champs et le bouton ici Le wrapper modal est donc toujours ouvert. J'ai juste diminué l'opacité. C'est donc juste transparent, mais il est toujours là. Pour changer cela, nous devons le supprimer complètement, et nous devons changer la visibilité en zéro, l'affichage en aucun. Non. Nous n'avons pas de propriété d'affichage ici sous visibilité car ce n'est pas quelque chose qui peut s'animer. Ce sont des propriétés qui sont animées et c'est l'action que nous avons sélectionnée car nous avons sélectionné Animer l'action. Nous n'obtenons donc pas cette propriété. Nous avons une autre option. GSP a cette option, qui est Alpha, et Alpha contrôle à la fois l'opacité et la visibilité, mais nous n'allons pas l' utiliser cette fois car nous voulons masquer complètement sur le canevas dans son état d'origine Nous allons donc ignorer cette version cette fois. Revenons maintenant à notre interaction. Et ajoutons une nouvelle action. Et cette fois, nous allons sélectionner Set. Ce type d'action n' a pas de propriétés qui s'animent, et elles ne vont pas s'animer, mais vous pouvez les définir, ce qui les définira immédiatement, passer instantanément à un nouveau style de Ajoutez une nouvelle visibilité et sélectionnez Afficher. À partir de l'affichage, ouvrez la liste déroulante et, comme vous pouvez le voir, nous avons le bloc de paramètres d'affichage habituel, en ligne, grade de lin No Nous allons sélectionner N. Nous n'en avons pas besoin. Nous n'avons pas besoin de cours. C'est une autre propriété qui peut être définie. Une classe spécifique peut être appliquée ou supprimée d'un élément. Et comme vous pouvez le constater, cette action a été ajoutée juste après l'animation, la première animation, que nous pouvons d'ailleurs nommer animation modale. Je l'ai facilement reconnu. Comme vous pouvez le constater, l' animation modale se joue, ce qui, dans ce cas, n' est qu'un changement d'opacité Il peut également s'agir d'autres éléments, comme l'échelle, par exemple, elle est petite, sa taille ou ses mouvements diminuent , elle descend légèrement dessous une fois l' animation terminée, puis l'affichage est réglé sur aucun. Et nous devons nous assurer que cela se passe ici et non quelque part entre les deux. Donc, si vous mettez à jour la durée de votre animation, notez que cette action ne suivra pas cela. Une fois que vous l'avez déjà définie, et une fois que vous l'avez déjà terminée, gardez simplement à l'esprit que cette action définie doit commencer à la fin, c' est-à-dire ici, et cela indique qu'elle commence à 0,2, exactement la durée que nous avions définie pour l'animation d'origine. Il peut être changé en 0,5, par exemple, et il sera placé quelque part ici au cas où vous auriez une animation plus longue. Maintenant. À l'heure actuelle, la cible est à nouveau définie comme déclencheur, c' est-à-dire l'icône fermée. Ce n'est pas ce que nous voulons. Nous voulons, encore une fois, que le wrapper modal soit la cible Changez donc cela pour supprimer ce modèle d'emballage. Encore une fois. N'oubliez pas, filtrez N. Très bien, alors vérifiez tout. Définissez une action. Nous pouvons nommer cet affichage « none ». Aucun affichage, modèle cible : wrapper. C'est exact. Commence juste à la fin de la première animation. Assurez-vous que ce n'est pas quelque part au début ou au milieu. Je vais interrompre cette animation. Et la propriété est cet affichage nul. C'est exactement ce que nous voulons. Et laissez-moi y retourner. Et lorsque vous jouez à ce jeu maintenant, sur le canevas, comme vous pouvez le voir , les éléments ne sont plus sélectionnables Nous pouvons également le tester ici. Fermez et le texte est sélectionnable, saisissez le champ sélectionnable. Tout cela fonctionne maintenant car l'emballage du modèle dans son intégralité a disparu. Génial. De plus, ce serait bien si nous pouvions déclencher la fermeture en cliquant sur la zone située en dehors du modèle. Donc, en gros, fermeture lorsque l'utilisateur clique sur l'espace d'arrière-plan. Maintenant, votre premier réflexe est peut-être l'ajouter à l'emballage du modèle, mais cela ne suffira pas Parce que même si cela fonctionne, il se déclenche également lorsque vous cliquez n'importe où sur le modal deux, même à l'intérieur des champs, car tout cela est imbriqué dans le wrapper modal de cliquer sur le formulaire revient donc à cliquer sur le wrapper modal Nous avons donc besoin d'un nouvel élément superposé au modal, et nous allons définir le déclencheur sur cet élément Donnez-lui un style similaire à celui de l'enveloppe modale, position fixe et pleine, pas besoin de couleur d'arrière-plan, gardez-le transparent Maintenant, si vous ajoutez cette zone fermée après le modèle, elle s' empilera au-dessus du modèle. Mais si vous le déplacez avant le modèle, modal s'empilera sur le dessus. En général, cet ordre change suffisamment, mais si, pour une raison ou une autre, ce n'est pas le cas, vous pouvez utiliser les valeurs de l'indice Z. Donnez un indice Z à la location de mannequins, par exemple deux et un pour la zone fermée, et cela fera l'affaire. A Ajoutez la même interaction étroite à cette zone fermée, et c'est tout. Maintenant, lorsque nous cliquons sur le modal lui-même, rien ne se passe, mais lorsque nous cliquons sur l'arrière-plan, il se ferme. Nous devons maintenant créer une animation de modèle ouvert. Nous allons commencer par masquer l'intégralité de l'emballage du modèle sur notre toile, car cela nous gêne, et si nous voulons créer, c'est le cas Nous pouvons donc simplement sélectionner le modèle d'emballage Et dans les paramètres d'affichage, n'en sélectionnez aucun. Maintenant, il a complètement disparu. Nous sommes en mesure de sélectionner tout le reste sur le canevas. Et si vous voulez y revenir et si vous souhaitez modifier et modifier le design, sélectionnez le modèle d' emballage et sélectionnez Display Flex car il s'agissait d'une mise en page flexible Et les paramètres Flex seront enregistrés afin que vous n'ayez pas à les modifier à chaque fois. OK, maintenant, notre déclencheur dans ce cas est le bouton. Sélectionnez le bouton Obtenir l'accès, accédez au panneau des interactions, cliquez sur Déclencher et appelez ce modèle ouvert. Et assurez-vous de cliquer sur Déclencher, puis cliquez sur ce bouton pour ajouter une nouvelle action Donc, d'abord, passez à l'action, nous n'allons pas faire d'animation. Pourquoi ? Parce que l'affichage du modèle d'emballage est défini sur Masqué Donc, la première chose à faire est d' activer l'affichage. Sinon, il n'y est pas. Et si nous animons l'opacité, elle va simplement animer opacité alors qu'elle est Donc ça ne marchera pas. Nous allons donc d'abord régler l'affichage et modifier la cible. Classe. Et sur quoi allons-nous régler l'affichage sur l'emballage du modèle Assurez-vous de supprimer ce filtre. Nous n'avons pas besoin de filtrer car l'enveloppe du modèle ne se trouve pas à l'intérieur du bouton. Quel est le paramètre d'affichage que nous voulons modifier ? Nous allons ajouter une nouvelle propriété, sélectionner afficher. Et dans le menu déroulant, nous allons sélectionner Flex car c'est le paramètre d'affichage que nous voulons voir apparaître sur l'emballage du modèle Nous n'avons pas besoin de ces choses. Maintenant, comme vous pouvez le voir, il est indiqué de démarrer à 0,2 seconde. n'est pas ce que nous voulons. C' est donc une chose dont tu dois t'assurer. Ici, sur la chronologie, comme vous pouvez le voir, je dirais que cela commence entre 0,01 et 0,2 seconde. n'est pas ce que nous voulons. Vous pouvez donc soit le faire glisser jusqu'au début sur le canevas de la chronologie, soit simplement le réinitialiser et tout revenir à zéro. C'est ce que nous voulons. Alors, vérifiez. Modifions-le pour afficher Flex. Nous avons donc un objectif. cible est le modèle d' emballage, à droite, commence à zéro seconde et affiche les modifications apportées au lin. C'est ce que nous voulons ici. Nous avons maintenant besoin de l'animation. Nous devons apparaître sur une nouvelle propriété, une nouvelle action, et sélectionner animer cette fois, changer à nouveau le déclencheur pour modéliser le wrapper. Pas de filtrage. Le nom de ce modèle apparaît. Et parmi les propriétés animées, que voulons-nous ? Nous voulons de l'opacité C'est ça. Et nous voulons qu'il passe de 0 % à 100 %. Et cette fois, nous allons en fait définir 0 % au début, car par défaut sur le canevas, nous n'avons pas changé le paramètre par défaut à 0 %. Donc, lorsque la page se charge sur l'enveloppe du modèle, elle sera à 100 %, oui, elle est invisible car nous avons défini le masqué mais l'opacité elle-même est Dans ce cas, nous devons donc spécifier ici soit ici dans l'animation, soit sur le canevas sous styles. Mais il vaut mieux le faire ici. Ainsi, lorsque nous travaillons sur le canevas, nous n'avons pas besoin de modifier également l'opacité, et le simple fait de passer en mode flex la fera apparaître immédiatement. Réglez donc l'opacité ici à zéro, car c'est là que nous voulons qu' elle s'anime à partir de 0 %, et nous voulons qu'elle s'anime à 100 %, entre 0 et 100 Comme vous pouvez le constater, maintenant que cela apparaît, et c'est lent, adaptons l'assouplissement et la durée à ce que nous avions déjà. Power Three. Et voyons voir. Vérifiez tout. Nous avons donc la cible, le modèle wrapper, la durée, 0,2 seconde, l' assouplissement, le type de deux opacité de 0 % à 100 % C'est tout bon. Et maintenant faisons-le un test. Il apparaît, disparaît en cliquant dessus. Ça paraît disparaître, c'est bien. Apparaît, disparaît sur l'icône fermée. Bien. Apparaît. Nous allons le tester. Il n'apparaît pas lorsque nous cliquons dans les champs. Bien. C'est bon. Tout fonctionne bien. Parfait. C'est ainsi que vous créez un modèle personnalisé dans Webflow On ne s'attendrait pas à ce qu'un outil aussi largement utilisé nécessite autant d'étapes, mais c'est ainsi qu'ils sont tous construits. Les développeurs doivent même tout coder à la main. 177. Google Analytics: Après avoir expédié votre site Web au client, la toute première chose que vous voudrez généralement configurer ou le client voudra que vous configuriez est une sorte d'outil d' analyse. Maintenant, il ne s'agit pas exactement d'un domaine de concepteur de sites Web pour analyser les données du site Web. Ce sont généralement les spécialistes du marketing qui le font ou le propriétaire de l'entreprise lui-même s'ils le comprennent Mais sa configuration nécessite généralement l' installation d' une sorte de script de code personnalisé ou d'une balise installée côté Webflow Et cette partie vous incombera souvent relèvera de votre responsabilité. Donc, en tant que concepteur Web, c'est une très bonne connaissance que vous devez avoir dès le départ. Et dans cette vidéo, je vais vous montrer comment installer l'outil d'analyse le plus populaire , Google Analytics. Accédez à analytics.google.com. Si vous ne l'avez jamais configuré, et si vous êtes connecté, vous arriverez probablement sur cette page. Si vous n'êtes pas connecté, Google vous demandera de vous connecter à votre compte Google. Sur cette page, cliquez simplement sur Commencer à mesurer. Mais si vous l'avez configuré par le passé, vous arriverez probablement tout de suite sur le tableau de bord, quelque chose comme ça. À partir de là, vous pouvez simplement créer et cliquer sur Créer un nouveau compte ou simplement sur un compte. Et puis vous allez arriver sur cette page dans les deux cas. Donnez un nom à votre compte, disons Team App dans notre cas, et nous le configurerons pour TeamApp. Cliquez sur Suivant. Pour le nom de la propriété, nommez-le quelque chose comme TeamApp website Donc, nous le savons, sélectionnez votre fuseau horaire, devise, sélectionnez votre secteur d'activité. Ce n'est pas vraiment pertinent non plus. Cela ne changera pas grand-chose en ce qui concerne les analyses. Ici aussi, sélectionnez des objectifs. Encore une fois, vous pouvez en sélectionner quelques-uns, comprendre le trafic Web ou applicatif. Et encore une fois, cela ne change pas grand-chose à l'analyse. Je vais juste que Google va vous recommander différentes choses à faire. Cliquez sur Créer, puis acceptez les termes et conditions. À partir de là, nous allons maintenant sélectionner la plateforme. D'où collectons-nous les données ? Vous savez, d'accord, c'est un site Web, alors sélectionnez Web. Et ici, indiquez l'adresse, qui est l' URL principale de votre site Web. Pour obtenir cette URL, vous pouvez revenir à votre projet. Oh et ce sera URL principale de votre site Web s' il est publié sur le domaine intermédiaire du sous-domaine Webflow Mais pour le client, lorsque vous publiez sur le domaine personnalisé réel du client, vous devez fournir le domaine personnalisé quel qu' il soit. Mais évidemment, nous allons le faire avec un sous-domaine, car le domaine personnalisé nécessite un plan d'hébergement Il vous suffit donc de sélectionner et de copier ce domaine et cette page ici même à l'intérieur, vous n'avez pas besoin d'ajouter que le HTTPS est déjà là, donc n'ajoutez pas à nouveau le HTPS et le nom du stream, appelez-le simplement site Web Les mesures seront donc déjà sélectionnées, la lecture peut continuer. Terminé. Nous avons maintenant un compte Google Analytics, mais nous avons besoin de quelques éléments supplémentaires à configurer du côté de Webflow Ce dont nous avons besoin pour Webflow, c'est donc de cet identifiant de mesure. Donc, si vous cliquez dessus accidentellement, si vous êtes ici, vous pouvez simplement cliquer à nouveau pour accéder à l'identifiant de mesure. À partir de là, il suffit de cliquer dessus et vous trouverez l'identifiant de mesure ici. Copiez cet identifiant de mesure, puis revenez à Webflow et à Webflow, accédez aux paramètres du site Et les paramètres internes passent à l'absence d'intégration. Et ici, nous suivons les différentes idées que Google nous donne. Il peut s'agir de Google Analytics ou de Google Tag Manager. Dans ce cas, il s' agit de Google Analytics. Nous allons avoir besoin de ce Google Analytics. Et comme vous pouvez le constater, Webflow vous dit qu' il faut commencer par G, n'est-ce pas ? Collez votre tag ici, assurez-vous qu'il commence par G, qu'il correspond exactement endroit et que vous copiez correctement cet identifiant. Une fois que vous l'avez rempli, cliquez sur Enregistrer, puis assurez-vous de publier. Parce que tant que vous ne publiez pas, cette balise ne sera pas installée sur votre site en ligne. l'heure actuelle, dans les paramètres pour qu'il soit diffusé sur le site en ligne, il va falloir le publier. Une fois que c'est là, vous pouvez visiter votre site. Ensuite, nous pouvons revenir à Analytics et le quitter, passer au suivant, puis passer à la page d'accueil. Cela indiquera qu' aucune donnée n'a été reçue de votre site Web pour le moment . Parfois, il faudra généralement un certain temps pour refléter les données et vous fournir toutes les informations. Mais souvent, au moins certains types de données sont immédiatement mis en ligne. Et comme vous pouvez le voir, il y a un utilisateur actif parce que je ai déjà ouvert dans ce navigateur, et il a déjà détecté qu' il y a un utilisateur actif. Et à partir des rapports, nous pouvons sélectionner un aperçu en temps réel, et nous verrons ici plus d'informations sur les utilisateurs. Et je ne vais pas entrer dans les détails. Google Analytics n'est qu'un autre sujet important qui nécessite un cours à part entière. Mais c'est ainsi que vous le configurez si votre client en a besoin, et c'est souvent le cas, et il vous demandera de le configurer Une fois que vous l'aurez configuré pour lui, analyse des analyses revient au client et à son équipe marketing. 178. Cookie Consent Installation: Dans cette vidéo et dans les prochaines vidéos, je vais vous apprendre à étendre fonctionnalités de votre site à l' aide d'un code personnalisé. Il s'agit d'une compétence très importante tout concepteur de sites Web aura besoin dans sa carrière, car la plupart des sites Web ne s'arrêtent pas au développement de Webflow Il existe généralement des outils externes dont un propriétaire d'entreprise aura besoin, par exemple des widgets de chat, outils de prise de rendez-vous , des outils de marketing, etc. La plupart du temps, cela se fait par le biais implémentation de code personnalisé. Mais ne t'inquiète pas. Il n'y a aucun véritable codage là-dedans. C'est juste un copier-coller du code d'un endroit à un autre. Et il faut juste un peu d' alphabétisation pour s'y retrouver dans ce code Cette compréhension élargira vos compétences en conception Web et vous permettra mettre en œuvre des outils et des solutions supplémentaires sur vos sites à l'aise . Désormais, les fonctionnalités de code personnalisé de Webflow sont payantes. Pour pouvoir suivre ce tutoriel, vous aurez donc besoin soit d'un plan d' espace de travail Webflow , soit d'un site hébergé Si ce n'est pas le cas et que vous ne souhaitez pas y investir pour le moment, vous pouvez ignorer ces didacticiels sur le code personnalisé pour le moment et y revenir lorsque vous avez un forfait payant ou que vous travaillez sur un projet client. Maintenant, juste après avoir installé l'outil Analytics sur un site Web, vous devrez généralement installer une bannière de cookies comme celle-ci. Si vous vivez dans l'Union européenne, cela vous est probablement familier dans certains États, États-Unis, le Canada, l' Australie, le Royaume-Uni Vous le savez certainement car nous recevons constamment ces bannières nous demandant d'accepter ou refuser les cookies de ces sites Web. Si vous ne vivez pas dans l'un de ces pays réglementés, vous ne connaissez peut-être pas ces bannières. Cependant, pour n'importe quel site Web, si vous voulez desservir le marché, si vous créez un site Web pour un client et que vous allez servir des utilisateurs soit aux États-Unis, dans des endroits spécifiques aux États-Unis. Si vous servez des utilisateurs dans l'Union européenne, au Canada et dans bon nombre de ces pays où les lois sur la protection de la vie privée sont strictes, vous devrez installer une bannière de consentement aux cookies et demander l'autorisation aux utilisateurs afin de pouvoir en quelque sorte les suivre et installer des cookies sur leur appareil. C'est à ce moment-là, par exemple, que nous avons fait lors de la dernière leçon, savoir installer un outil d'analyse, Google Analytics. C'est ce que nous avons installé. Par exemple, il s'agit de mon site Web, de mon site Web personnel, et vous verrez que je reçois ici des statistiques sur les utilisateurs pays d'où les gens le visitent, et cela se fait par le biais de cookies. Maintenant, lorsque vous le faites et depuis ces pays, vous devez obtenir le consentement. Dans le cas contraire, vous ne pouvez pas le faire en installant des cookies. Donc, si vous faites du suivi, devez utiliser un mode de suivi très différent. Tant que vous n'avez pas réellement installé le suivi, vous n' avez pas du tout à le faire. Vous n'êtes pas obligé d'installer une bannière de cookies ou consentement si vous lancez simplement le site Web. Donc, jusqu'à ce que nous fassions cette analyse, vous n'aviez pas à le faire , car parfois mes étudiants me demandent , car parfois mes étudiants me demandent si je dois installer une bannière de cookies sur mon site Web. Comment puis-je m'y prendre ? Eh bien, les suivez-vous réellement ? Utilisez-vous des outils tels que Google Analytics ? Ces outils utilisent-ils spécifiquement des cookies ou traitent-ils des données personnelles pour suivre les utilisateurs et comprendre leur comportement ? Dans ce cas, alors oui, nous devons l'installer. Si vous ne le faites pas, il n'est absolument pas nécessaire de le faire. Votre site Web n' utilisera aucun type de cookies marketing ou analytiques requis par la loi. Votre site Web utilisera, par exemple, uniquement un cookie de session, qui est un cookie nécessaire au chargement de la page et à la compréhension de la session . Cela ne fait pas vraiment partie de cette loi, et ce n'est pas ce que l'Union européenne et ces législations réglementent réellement Maintenant, pour ce didacticiel, nous allons avoir besoin d' un outil tiers, qui est une application de consentement aux cookies, une bannière, une plateforme de gestion du consentement , parfois appelée ainsi. Et cela doit être fait via l'une de ces plateformes. Vous ne pouvez pas le faire par le biais d'une simple bannière personnalisée qui s'affiche sur weblo Vous pourriez le faire, mais il y a beaucoup plus de logique. Là, étant donné que les bannières de consentement aux cookies que nous recevons et pour qu'elles soient conformes à la réglementation, ils doivent bloquer tous les scripts qui exécutent des cookies et installent des cookies et n'exécutent ces cookies et ne les installent après que l'utilisateur ait cliqué sur eux, sauf eux. Et si l'utilisateur clique sur Tout rejeter, ces cookies et scripts doivent être bloqués. C'est pourquoi presque tous les sites Web utilisent une solution tierce telle que Cookie Hub. existe un autre, comme Cookie Boot, et un autre appelé Consent Pro, qui peut être installé directement depuis le marché Webflow Et la raison pour laquelle j'ai choisi Cookie Hub dans ce cas, c'est parce que c'est la meilleure offre car Constant Pro est payé immédiatement. Si vous le souhaitez sur le domaine personnalisé. C'est gratuit sur le sous-domaine Webflow, mais c'est tout de suite payant. Vous devez le payer immédiatement. Et j'utilise ce Cookie Hub parce que j'en ai essayé plusieurs, et j'ai trouvé que celui-ci avait l' une des implémentations les plus simples Les prix sont bons et leur niveau gratuit est réellement utilisable. Et oui, il y a une limite. Sur ce que vous pouvez faire, combien de sessions par mois pouvez-vous avoir et combien de visiteurs pouvez-vous avoir, tout en restant utilisable. La première étape consiste donc à vous inscrire à Cookie Hub, à vous rendre sur cookie hub.com et à vous inscrire Il est dit essai de 14 jours, mais un essai de 14 jours vous donnera ces fonctionnalités premium. Il ne nécessite pas de carte de crédit, et après les 14 jours d'essai, il suffira de revenir au niveau gratuit , qui est gratuit et utilisable également Dans le domaine ici, je vais fournir domaine de mon site personnel car c'est là que j'ai le forfait payant. Dans votre cas, si vous avez un plan d'espace de travail Webflow et que vous pouvez utiliser un code personnalisé, vous pouvez fournir, par exemple, l'application Chat Tap et son domaine, quel que soit le domaine que vous avez utilisé pour cette application, qui se trouvera ici C'est le domaine, et c'est celui que vous pouvez appliquer ici. Et vous arrivez sur cette page, quelque chose comme ça qui montre domaine que vous venez d'ajouter, et qui indique qu'il s'agit d'un domaine de base de 30 000 visiteurs par mois, mais ça va ensuite passer à l'essai, puis ça va revenir au moins Je pense que c'est des milliers de visiteurs par mois qu'il autorise dans le cadre du plan gratuit. Nous devons maintenant configurer les choses cliquer sur les détails et passer à l'installation de configuration. Et sur ces pages, dans l'onglet Vue d'ensemble, nous avons plusieurs façons de configurer, en choisissant le code d'insertion manuelle. Et tu vas obtenir ce code. Il s'agit d'une méthode très courante et c'est exactement ainsi que se produisent presque toutes les applications tierces ou implémentations d'outils. Ils vous donnent un code. Il y a un guide d'implémentation et d'installation quelque part. Ils vous donnent ce code, et ils vous disent de le coller quelque part sur votre site Web. Et ils vous diront, dans ce cas, il nous dit coller dans la section d'en-tête au-dessus de tous les autres scripts. Il faut donc que ce soit le premier script qui s'exécute, puis tout le reste doit être exécuté par la suite. Dans Webflow, nous avons trois endroits différents où nous pouvons coller ou installer du code personnalisé Le premier élément du concepteur est le code embed. Une fois que vous l'avez ajouté au canevas, ce champ s'ouvre. Il agit d'un champ HTML, et le code peut y entrer. Il doit s'agir d'un code HTML. Et ce truc s' affichera en ligne, et vous pourrez le coller entre les contenus Vous pouvez avoir un titre ici, un code personnalisé ici, puis un autre contenu ici, puis le code personnalisé sera exécuté. Et si c'est quelque chose qu'il affiche, il s'affichera ici même sur la page. Et en général, ils ne s'affichent pas exactement sur la page, mais ils s'affichent en mode aperçu. Et c'est pourquoi il y a ce code personnalisé activé ici Ensuite, le code personnalisé sera exécuté sur l'aperçu. Parfois, s'il s'agit simplement d'un HTML simple et d'un code CSS et qu'il n'y a pas de Javascript, cela s'affichera également directement dans le concepteur. C'est donc un endroit. autre endroit où nous installons et pouvons coller le code personnalisé se trouve dans les paramètres d'une page. Et lorsque vous faites défiler la page vers le bas, vous avez ces deux champs, évidemment, désolé, pas celui-ci, ce champ. Maintenant, c'est évidemment que je suis déjà sur le plan secondaire payant, et c'est pourquoi ils sont activés. Si vous optez pour le forfait gratuit , ils seront évidemment verrouillés. Et il y a deux champs ici. L'une indique l'étiquette intérieure, l' autre l'étiquette avant l'étiquette corporelle. Et voilà, je ne vais pas m'y attarder en profondeur. Quelle est la différence entre les deux ? Et pour chaque solution de code personnalisé, ils vous diront généralement si vous les mettez à l'intérieur de l'étiquette principale ou si vous les placez à la fin avant l'étiquette corporelle. Et cela signifie généralement avant que la technologie corporelle ne se produise, c'est-à-dire juste avant la toute dernière chose sur la page. C'est le body tag, c' est le body tag. Donc, mettre quoi que ce soit avant la balise body signifie que tout ce que nous avons sur la page se trouve tout en bas. Donc, dans ce cas, juste une chose. Après le titre, il sera collé ici et il sera affiché en bas Habituellement, cela signifie qu' il n'est pas rendu. C'est juste une fois que nous ne voulons pas que cela interrompe quoi que ce soit sur la page. C'est pourquoi nous l'avons mis en dernier. Ce sont donc deux endroits, et voici la page. Donc, uniquement sur cette page, quelle que soit cette page, page de consentement aux cookies c'est là que cela sera installé, et il ne fonctionnera sur aucune autre page de notre site Web. Et la troisième place est le site blanc. Donc, si nous accédons aux paramètres du site, nous avons cet onglet de code personnalisé ici, et ici, nous avons ces deux champs exactement similaires dans la balise body avant la balise body, parfois appelée code de pied Et cela s' appliquera désormais à l'ensemble du site. Chaque page de votre site Web exécutera ce code. Dans notre cas, en ce qui concerne le consentement aux cookies et nombreuses applications de ce type, par exemple un widget de chat ou tout autre outil marketing, nous voulons généralement que ce soit blanc parce que nous voulons qu'il soit affiché sur chaque page de notre site Web. Et c'est ici que nous allons coller notre code de consentement aux cookies. Et c'est notre code, puis il vous suffit de l'enregistrer. Une fois que vous avez collé votre code et que vous l'avez enregistré, l'étape suivante consiste à le publier, car tant que vous ne le publiez pas, ce code n'est pas actif. Il est simplement enregistré ici directement dans le panneau des paramètres, et une fois que vous l'avez publié, il sera transféré sur le site en ligne. Une fois la publication finalisée, nous pouvons accéder à notre page et la rafraîchir, et nous devrions voir apparaître l'avis relatif aux cookies qui apparaît maintenant de notre côté. Cet avis relatif aux cookies peut désormais être personnalisé, et nous allons le faire à partir des paramètres du portail Cookie Hub. Cependant, quelques étapes supplémentaires doivent être franchies pour que cela soit complètement finalisé et fonctionne. Maintenant, si vous êtes ici, si vous êtes ici sur le tableau de bord, pouvez revenir aux détails ou simplement cliquer ici. Accédez à la personnalisation. Nous sommes maintenant en mesure de modifier certains éléments concernant son affichage. Comme vous pouvez le constater, l'une des choses qui se passe actuellement, c'est que je ne suis pas en mesure de cliquer. Je ne peux pas me déplacer. Il s'agit d'une politique en matière de cookies et d'une bannière de consentement aux cookies très intrusives et d'une bannière de consentement aux cookies Cela ne me permet d'aller nulle part. C'est ce qui se passe par défaut ici. Nous voulons donc décocher l'interface utilisateur de blocage. Ce blocage se produit sur des sites comme Facebook ou Google ou sur des sites d'actualités comme le New York Times, Tribune, etc. Qu'ils veulent vraiment que vous définissiez d'abord, vous allez accepter les cookies ou non et décider. Parfois, ils ne vous autorisent même pas à accéder à un site si vous n' acceptez aucun cookie et que vous n' utilisez pas leur site Web. Et parfois, ils vous l'autorisent, mais ils veulent que la décision soit prise immédiatement, ils ne l'autorisent pas, et ils veulent vraiment obtenir la confirmation. Parce que d'habitude, si vous ne forcez pas la confirmation, les gens vont simplement faire défiler le site et profiter du site sans jamais cliquer sur la bannière. Donc, dans ce cas, je vais le supprimer. Et une autre chose que nous pouvons faire est de changer l' endroit où il est affiché. Par exemple, une sorte de style de communication pour le mettre est une barre qui peut aller, par exemple, en bas. Et il existe une méthode courante et discrète qui vous permet de continuer à autoriser les internautes à utiliser votre site Web, qui vous permet de continuer à autoriser les internautes à utiliser votre site Web, sans les obliger à accepter ou à refuser les cookies, car vous n'êtes peut-être pas très important pour vous les suivre ou d'utiliser leurs données À partir de là, nous pouvons également modifier la palette de couleurs. Par exemple, dans mon cas, je choisirais peut-être le noir et blanc. Et puis les boutons peuvent être réorganisés, cookies, cookies de refus Et c'est généralement un très bon réglage tel qu'il est. Mais selon l'endroit où vous vous trouvez, vous devrez peut-être modifier l'emplacement des boutons en fonction quoi les gens sont habitués dans votre région, peut-être. Un autre centre de préférences que nous avons ici est celui-ci lorsqu'ils cliquent sur Paramètres des cookies. Cela s'ouvre et vous pouvez modifier ce qui est visible ici, ce qui ne l'est pas. Vous n'avez généralement pas besoin de vous en mêler. Il s'agit de l'icône qui reste sur la page. Ce n'est pas quelque chose que j'aime en général. Il existe un règlement selon lequel vous devez disposer d'un endroit où ils peuvent refuser le consentement aux utilisateurs, et cela pourrait être placé sous forme de lien quelque part dans le pied de page pour les paramètres des cookies Au lieu de ce type de bannière, je peux toujours me contenter de flotter sur le site Web. Donc je vais juste enregistrer tout ça. Et pour toute personnalisation personnalisée des téléphones ou autre, pour tout site Web qui a besoin d'un aspect vraiment personnalisé pour ces boutons, le CSS personnalisé peut être utilisé. Une fois que vous avez terminé, enregistrez et fermez, puis vous devez publier les modifications en attente. Ensuite, vous pouvez revenir sur le site et actualiser, laissez-lui un peu de temps. Et il m'a fallu quelques essais, puis finalement ça a marché. Et maintenant, vous pouvez voir que la bannière est différente. Maintenant que la bannière fonctionne, il semble qu'elle ne soit toujours pas conforme. Il ne fait pas vraiment ce qu'il est censé faire. Pour qu'il fasse ce qu' il est censé faire, et Cookie Hop peut réellement nous y aider, il doit rechercher les cookies et commencer à les bloquer. Donc, depuis la page des scans, elle a déjà effectué un scan pour moi, et si ce n'est pas le cas pour vous , vous pouvez demander un scan Le scan passera en revue vos pages . Il recherchera tous les scripts et codes personnalisés que vous utilisez sur votre site Web pour tous les scripts et codes personnalisés que vous utilisez découvrir ce qui doit être bloqué et s'il est capable de le bloquer. Maintenant, vu la façon dont nous avons configuré le code Google Analytics, voyons si ce centre d'action a déjà été créé. Dans les centres d'action, nous rencontrons généralement des problèmes. Ensuite, nous pourrons passer en revue ces différents problèmes et les aborder tels qu'ils sont. Donc, l'un des problèmes que vous allez rencontrer et si vous avez implémenté Google Analytics, à partir de là, vous allez avoir un problème sur Cookie Hub car Cookie Hub n'est pas en mesure de bloquer le script car Webflow injecte ce code et le script Google Analytics bien avant, puis ce script Donc, ce que nous devons faire ici, c'est que nous devons en fait supprimer d'ici en supprimant, cela ne permet pas de supprimer tout de suite. J'ai ajouté une nouvelle balise et supprimé une sauvegarde, et nous allons effectuer une installation manuelle à partir d' un code personnalisé sans installer Webflow à partir de ce champ Pour cela, nous devons accéder à Analytics. Analytics.google.com, encore une fois. À partir de là, il vous sera demandé de vous connecter au bon compte Google une fois connecté, puis vous pourrez le faire à partir d'ici. Si vous n'avez qu'un seul compte et qu'une seule propriété, celle-ci sera sélectionnée immédiatement, mais si vous en avez plusieurs, vous devez sélectionner ici. Une fois que vous êtes ici, recherchez des flux de données. C'est ce que nous avons mis en place la dernière fois. Et si vous vous souvenez, c'est ce que nous avons fait pour mon site Web, pour le site Web de TeamApp et j' ai des similaires ici, cliquez dessus Et la dernière fois, nous avons simplement saisi cet identifiant de mesure, mais cette fois, nous allons récupérer l'intégralité du script, que nous pouvons trouver dans View tag Instructions. Et sélectionnez installer manuellement, et nous allons obtenir ce code, et nous allons utiliser ce code. Il s'agit d'un code similaire à celui que Webflow est en train d'injecter. C'est juste qu'il injecte bien plus tôt. Et nous pouvons récupérer ce code d'ici. Il y a déjà notre carte d'identité à un endroit ici, un autre endroit ici. C'est là qu'il en a besoin. Si vous ne trouvez pas ce code sur votre tableau de bord Google Analytics, vous pouvez demander à Gemini ou à tout autre LLM me donner le dernier script de Google Analytics Et il fournira exactement le même script. Il aura juste ce Gxxxx et c'est là que vous devrez remplacer cet identifiant de mesure, puis le script sera exactement le Et l'identifiant de mesure était déjà là lorsque nous l'avons supprimé. Maintenant, une fois que vous avez ce code et vous avez correctement obtenu les identifiants de mesure, vous allez coller ce Google Analytics après le script Cookie b ici. Problème, tout le problème était que tout ce script que Webflow injecte avant puis exécute le Cookie Hub, et maintenant CookieHub n'est pas en mesure d'attraper ce script et bloquer avant que l'utilisateur ne puisse lui donner Donc, pour tous les autres outils que les applications tierces ou les outils que vous installerez sur votre site Web, les trackers ou peut-être un chatbot ou une prise de rendez-vous, tout ce qui utilisera des cookies, vous les installerez toujours sous le code Cookie Hubs Cookie Hub est donc capable de contrôler ces scripts. Une fois que vous l'avez correctement configuré, cliquez sur Enregistrer. Et encore une fois, publiez pour sélectionner les domaines, laissez-lui un peu de temps. Et une fois qu'il sera publié, nous pouvons maintenant retourner sur Cookie Hub et lui demander de le scanner à nouveau Et cette fois, une fois scanné, il devrait être capable de détecter correctement les cookies, et cela ne devrait pas nous poser de problème Cela prend généralement quelques minutes Vous pouvez donc vous en aller, faire une pause et revenir plus tard. Une fois que vous aurez terminé, vous n'aurez aucun problème détecté, ce qui signifie que tout est correct tout est correctement configuré dans l'aperçu, vous obtiendrez tout cela en bon état, aucun problème n'est détecté. autre part, lorsque les utilisateurs cliquent sur Autoriser les cookies, les cookies et Google Analytics se chargent, et c'est à ce moment-là cliquent sur Autoriser les cookies, les cookies et Google Analytics se chargent, que tout autre script nécessitant des cookies se charge et se lance. D'autres paramètres et personnalisations peuvent être nécessaires, mais cela dépend du site lui-même, scripts de suivi utilisés et de l'audience qu'il dessert Je ne vais donc pas m'y attarder ici Mais si vous avez un vrai projet et que vous avez besoin d'aide, publiez simplement dans les questions-réponses et je répondrai. 179. Code Embed + IA: Dans cette vidéo, nous allons faire un autre didacticiel de code personnalisé en pratique. Encore une fois, il s'agit d'une fonctionnalité payante de Webflow, devrez donc vous devrez donc disposer d'un compte Webflow payant, d'un compte d' espace de travail ou d' un plan d'hébergement sur l'un des La dernière fois, nous avons installé ce code personnalisé via les paramètres du site, et cette fois, nous allons utiliser cet élément d'intégration de code Dans ce scénario, nous allons passer en revue l'installation certains composants de code sources externes dans Webflow, et cela vous montrera dans quelle mesure vous pouvez étendre vos compétences et votre capacité à concevoir Webflow sans vous fier uniquement aux fonctionnalités natives de Webflow, mais également être en mesure d'intégrer fonctionnalités et un design provenant de Et nous allons également utiliser l'IA. Je vais vous montrer à quel point l' IA peut être puissante dans ce cas, pour vous aider à modifier le code et à le rendre utile pour l'implémentation de Webflow Dans la nature, il existe de nombreux sites Web et sites qui partagent des composants d'interface utilisateur open source. L'un des plus populaires est CodePen. C'est là que les développeurs créent quelque chose. Ils partagent l'implémentation de leur code, et d'autres développeurs sont en mesure de récupérer le code, de l' utiliser et de l' implémenter dans leurs conceptions et dans leurs sites Web. Une autre option, celle des UIRS, est également similaire à CodePen , mais elle est un peu plus simple Nous allons commencer par UIWors et je vais expliquer comment cela fonctionne je vais expliquer comment cela Tout d'abord, permettez-moi de vous donner un petit guide sur le fonctionnement des versets de l'interface utilisateur. Alors, allez à ivers point IO. Je mettrai également le lien dans les ressources. Et ce que nous avons ici, ce sont quelques composants créés, comme des boutons qui s'animent, éléments qui ressemblent à de simples composants autonomes créés, et ils comportent généralement des animations et des interactions amusantes, pas drôles, mais amusantes, mais amusantes , que le concepteur ou le développeur qui a créé ont pensé qu'elles étaient créatives Et vous pouvez accéder aux éléments, cliquer sur tout et nous verrons ici qu'il y a des éléments animés, dégradés, fluides et interactions avec lesquels vous pourrez interagir immédiatement. Et lorsque vous le survolez, vous serez déplacé pour obtenir le code Ensuite, il propose au HTML un CSS, que vous pouvez récupérer et implémenter où vous le souhaitez. Et pour utiliser le verset de l'interface utilisateur, je vais vous donner un petit conseil ici. Vous verrez cela comme du vent arrière et du CSS. Le tailwind est un framework et une bibliothèque basés sur le CSS, et pour l'utiliser dans Webflow, c'est et pour l'utiliser dans Webflow, un peu compliqué car cela signifie que nous devons extraire base de données ou la bibliothèque Web tailwind et l'importer sur notre site Web, ce qui complique les choses et cela peut entrer en complique les choses et cela conflit avec les classes CSS et la bibliothèque que nous avons sur le Web que nous ne voulons pas de telles dépendances. Nous voulons un CSS plus propre. C'est juste qu'ils appellent cela du CSS vanilla. Et si vous passez en revue ce filtre sans sélectionner ce filtre, vous verrez que certains d'entre eux porteront cette icône représentant le vent arrière. S'il n'en a pas, cela signifie qu' il n'est pas basé sur Tailwind, et vous pouvez l'utiliser tel quel en utilisant une implémentation standard du CSS Donc, lorsque vous examinez cela, assurez-vous parfois de sélectionner CSS, qui ne vous donnera qu' une implémentation simple sans dépendance à une bibliothèque externe telle que healin J'ai donc trouvé ces cartes ici. Ce truc là, et j'aime vraiment cet effet, quel qu'en soit l'effet. Et évidemment, nous pourrions potentiellement le créer nous-mêmes dans Webflow en utilisant les interactions Webflow Mais parfois, vous ne voulez pas essayer tout comprendre et vous voyez un composant simple très utile, vous pouvez simplement le saisir et le copier-coller dans Webflow Lorsque vous trouvez quelque chose qui vous plaît, vous cliquez ici, Obtenir le code. Et ici, nous allons avoir du HTML et du CSS. Donc, rien de compliqué ici. C'est exactement ainsi que nous travaillons également dans Webflow. Nous avons des éléments ou des balises HTML, et c'est exactement ce que nous ajoutons ici. Par exemple, DIV Block. C'est le DO Block. C' est ainsi que D Block est écrit. Et quand il est dit que la classe est égale à la pile de cartes, c'est exactement ce que nous ajoutons ici. Si nous nommons simplement cette pile de cartes, ce serait exactement la même implémentation dans Webflow, que vous voyez ici, classe DV, pile de cartes C'est ça. Et puis, quels que soient les styles que nous changeons, quels que soient les styles qui changent ici, ils sont ajoutés ligne par ligne, ils sont ajoutés sous cette classe de pile de cartes. C'est ce qui se passe ici. Cela nous est très familier. Et c'est une très bonne introduction pour vous et un bon moyen de vous salir les mains ou de vous mouiller dans un petit code. C'est vraiment une bonne idée de ne pas hésiter à implémenter un peu de code ici et là, car cela vous hésiter à implémenter un peu de code ici et là, permettra de mieux comprendre ce que vous pouvez faire avec Webflow ou simplement avec la conception Web en général, même si vous utilisez un autre outil, même s'il ne s'agit pas de Webflow Donc, ce que nous devons faire ici, c'est simplement copier ce premier code HTML, et créer une section simple, un conteneur, un paragraphe d'en-tête Appelons ce code personnalisé. Tutoriel. Donnons-lui un peu de rembourrage Centrez-le. D'accord. Et à l'intérieur, nous pouvons désormais ajouter du code embed. Dès que vous cliquez dessus, ce champ s'ouvre pour que nous puissions y coller le code. Ici, nous allons coller ce que nous avons copié, et cela va continuer à ajouter ce commentaire. Vous pouvez supprimer ce commentaire ou non. C'est ainsi que vous écrivez des commentaires en HTML. Et ce champ est un champ HTML. Seul le HTML y pénètre. Vous ne pouvez pas y mettre votre code CSS ou votre code JavaScript pur. Vous devez les placer dans des balises HTML. Ainsi, par exemple, la deuxième chose que nous devons copier à partir d'ici est ce CSS. Mais c'est du pur CSS. Donc, si nous le collons comme ça, vous obtiendrez ce texte blanc. Cela signifie qu'il ne reconnaît pas la langue, la façon dont elle est écrite. C'est du HTML et tout cela est écrit comme le CSS, il ne le reconnaît pas, c'est pourquoi il est effacé . Nous n'allons donc pas le faire. Et pour coller du CSS dans du code HTML, vous devez le placer dans la balise de style Et voici à quoi cela ressemble lorsque vous insérez quelque chose dans une balise en HTML Style entre crochets, style entre crochets, mais la balise de fin doit comporter une barre oblique Par exemple, nous faisons très souvent un tag H, n'est-ce pas ? Ensuite, vous les joignez à H un, et ceci est un titre Voici à quoi cela ressemble de mettre un titre dans un blog Chaque fois que nous mettons un titre, c'est la réalité en arrière-plan, c'est ce qui se passe. Juste une balise H one, balise d'ouverture ressemble à ceci, la balise de fermeture ressemble à ceci. Tout ce qui se trouve dans le HTML doit être fermé par une balise de fermeture. Si vous ne le faites pas, cela provoquera souvent une erreur et posera des problèmes pour s'assurer qu'il est fermé. Il en va de même pour le CSS. Une fois que nous avons ce boîtier, nous pouvons y mettre du CSS pur et simplement coller votre CSS ici et vous pourrez vous assurer qu'une fois que tout sera codé par couleur, cela signifie qu'il le lit correctement Il a commencé à comprendre qu'à partir de maintenant, nous disons au navigateur de lire en tant que CSS parce que nous l'avons appelé style. Et puis on se dit  : « Oh, on l'a compris ». Et puis des commentaires ici à nouveau. Ce sont des commentaires. Vous pouvez les supprimer si vous le souhaitez, mais c'est un bon guide pour vous ou si vous ne voulez aucune mention de leur auteur, je ne pense pas que vous deviez les référencer en fonction de la licence qu'ils fournissent. Je pense que c'est gratuit et que vous n'avez pas à référencer et à créditer l' auteur de ces composants. Voici donc comment vous écrivez des commentaires dans le CSS. C'est ainsi que vous écrivez des commentaires dans HTO. Une fois que c'est fait, cliquez sur Enregistrer et fermer. Et lorsqu'il s'agit de CSS HTML pur, Webflow l'exécute généralement directement lors de la conception. S'il inclut également du JavaScript, il ne le fera pas tout de suite à l'intérieur, et soit il ne fonctionnera que dans l'aperçu, et lorsque vous êtes en aperçu, assurez-vous d'activer le code personnalisé. Et puis généralement aussi, si vous avez du JavaScript à l'intérieur, vous exécuterez également JavaScript ici. Et puis, dans de rares cas , il ne s' exécutera même pas dans l'aperçu, et il ne s'exécutera que dans une page publiée en fonction du code que vous implémentez. La plupart d'entre eux s'exécuteront ici, mais certains doivent importer différentes dépendances, alors ils ne s' exécuteront pas ici car ils entreront probablement en conflit avec l'expérience des flux. Comme vous pouvez le constater, cela fonctionne déjà très bien. Nous pouvons y apporter quelques ajustements , par exemple, donnons-lui un peu d'espacement ici Et pour l'instant, disons que nous voulons qu'il soit centré, non ? Il s'agit donc de code et de Bd, et ce n'est qu'un bloc div générique normal, et vous le traitez comme un bloc div. Donc, comme il s'agit d'un bloc div par défaut, l'affichage est défini sur bloc, ce qui signifie qu'il va s'étendre bord à bord. Donc, une façon de ne pas étirer bord à bord est soit de lui donner une largeur fixe puis de le centrer en utilisant cette méthode, soit de lui donner un bloc en ligne. Et sa largeur sera définie par le contenu qu'il contient. Et dans un bloc large, il le place juste au milieu. D'accord, tout fonctionne bien, mais qu'est-ce que c'est, non ? n'y a aucun contenu ici. Comment travaillons-nous avec cela ? Comment modifier le texte ? Comment modifions-nous ? modifier la taille ou les couleurs ? Maintenant, tout ce qui est ici, parce que c'est un code et qu'il est mauvais, tous les styles, tous les contenus qu'il contient, cela ne se produit que par le biais du code à l'intérieur. Tout ce qui doit être changé doit être changé à partir d'ici. Nous ne pouvons contrôler que l'extérieur. Wrapper, qui est ce code et qui est mauvais, et nous pouvons y apporter différentes modifications , comme un placement ou une taille, mais tout le reste doit être changé via le code Imaginons , par exemple, que nous voulions créer ces images sous la forme d'un photosck Comment s'y prend-on ? Eh bien, c' est de là que vient la personnalisation de l'IA. Nous pouvons demander à AI de le faire. Nous pouvons donc prendre ce code. Nous pouvons aller à l'une des aumônes. Ils sont tous les trois CloudGemni HachBT. Ils vont tous très bien le faire. J'utilise Cloud dans ce cas parce que le cloud est généralement préférable avec du code, mais il s'agit d'un code très simple, et tous les trois vont faire un excellent travail dans ce domaine. Nous pouvons donc mettre à jour ce code pour que la carte supérieure soit remplie de l'image. Shift Enter, afin que vous puissiez ajouter une nouvelle ligne sans envoyer d'invite. Vous collez donc le code ici, et maintenant nous allons épingler JGiptCLotImage Pour lui donner une image, téléchargez vos images dans Webflow depuis le panneau Assets d'ici, trouvez une image sur splash ou paxels.com ou partout où nous trouvons habituellement nos Et une fois que vous les aurez téléchargées, j'ai déjà quelques images ici, et par-dessus, récupérez Copy Link. Et ce lien sera prêt pour la production sur notre site Webflow C'est un bon endroit pour charger vos images et nous pouvons contrôler nos images à partir d'ici Nous sommes capables de les compresser, et c'est une bonne méthode, et nous savons que nos images ne vont pas disparaître. N'utilisez donc pas d'URL qui ne fait pas partie de notre site Web. Qu'il s'agisse d'une URL de démarrage pexels.com, URL ou d'une autre URL, elle peut disparaître à un moment donné et nous n'en avons aucun contrôle Mais s'il s'agit de nos images, nous les contrôlons, et nous savons que si elles sont présentes, l'URL fonctionnera et sera toujours en ligne. Donc, une fois que vous avez l'URL, collez-la également quelque part. Maintenant, nous avons des instructions, nous avons mis tout le code que nous avons déjà dedans, et nous lui avons donné une image, et il comprendra que c'est l'image que nous voulons dire, et que c'est le code qui doit être mis à jour. Et voyons comment ça marche. Tu peux ignorer cela. Je suis en train de comprendre. Aujourd'hui, je ne sais pas. Il y a peut-être un problème avec le cloud, mais cela fonctionne toujours. C'est un appel d'outil auquel il n'est pas en mesure d'accéder. C'est bon. Maintenant, je vais vous expliquer ce qui se passe ici et ce qu'a fait Clot. Chaque LLM affiche le code obtenu de différentes manières, et c'est ainsi que le fait Cloud Habituellement, un aperçu s'ouvre ici. S'il est fermé et qu'il vous a simplement fourni un code comme celui-ci, il peut être téléchargé, mais nous n' avons pas à le télécharger. Il vous suffit de cliquer dessus. Je vais quand même ouvrir ce mode de prévisualisation. Et c'est un aperçu, mais cela peut généralement ne pas fonctionner, et dans ce cas, cela ne fonctionne pas. Cela ne montre pas les choses correctement. Vous pouvez donc ignorer cette partie et passer au code, et c'est le code que nous pouvons copier. Nous l'avons Et je vais vous montrer en Gémeaux Je l'ai déjà fait avec Gemini et HachPT, donc je peux vous montrer si vous comptez les utiliser et si vous avez potentiellement un abonnement à Gemini ou HAHPT et que Gemini ou vous Pas de problème non plus. C' est ainsi que cela fonctionne dans Gemini Gemini, dans ce cas, ne donne pas d'aperçu, mais met à jour le code et prend le code d'ici, copiez-le Cela fonctionne. Et dans HAGPT, un peu comme entre GPT mix of clot et Gemini, vous obtenez le code, qui peut être Et à partir de ce sélecteur, vous pouvez prévisualiser, et il vous donnera un aperçu Dans ce cas, cela fonctionne immédiatement sur Jajupt. Mais même implémentation. Maintenant, une fois que vous avez ce code, vous revenez à l'intégration, supprimez tout ce que vous aviez, collez ce nouveau code, et vous verrez que la plupart des choses sont exactement les mêmes Le style est toujours là. Vous pouvez cliquer sur Pretty FIT, ajuster le formatage. Et vous verrez que l'une des cartes principales a été mise à jour et que l'image d'arrière-plan a maintenant une URL, qui est l'URL ou la source de notre image. Et ces choses-là, carte est une classe et la principale à côté se trouve une classe combinée. C'est ce que nous faisons habituellement, non ? Nous avons une carte, qui est la classe de base. Il s'agit donc d'un style commun qui est partagé par tous les autres. Ensuite, avec les classes combinées, carte 1, carte 2, carte principale, les modifications sont apportées aux autres, enregistrées de près, et le tour est joué. L'image a été remplie et j'ai oublié de prévisualiser, donc tout fonctionne correctement. Et maintenant, nous pouvons potentiellement lui donner plus d'images et remplacer les autres par plus d'images. Supposons de copier le lien, revenir au cloud dessus, mettre à jour les deux autres cartes avec ces images. Ça en est un. Et ça l'est aussi. Ensuite, nous avons fait le travail, cliquez dessus pour pouvoir copier. Encore une fois, cela ne fonctionne pas ici. Passez au code, copiez-le, ouvrez-le, supprimez tout à nouveau, collez le nouveau code. Comme vous pouvez le voir, vous pouvez vérifier ici que première carte a maintenant un arrière-plan d' image, un arrière-plan d'image, un arrière-plan d'image sur les trois, enregistrer et fermer et tout a été mis à jour. Et maintenant, nous avons des images sur les trois. Et si nous voulons changer quoi que ce soit d'autre, par exemple, si vous souhaitez modifier les tailles, nous devons maintenant procéder aux modifications de taille. Encore une fois, par le biais du code, demandez à l'IA de changer quelque chose à ce sujet. Mais les tailles sont en fait assez faciles à modifier car vous verrez qu'elles sont appliquées quelque part. Vous pouvez voir que la pile de cartes a une taille, et c'est ce qui contrôle la taille de chaque carte, car les autres cartes ont une largeur de 100 % hauteur de 100 %. Elles sont donc dimensionnées en fonction de l'élément parent, qui a la taille ici Donc, si nous l'agrandissons, il le sera encore plus. Terminé. Si nous voulons qu'elles ressortent un peu plus pour voir plus d'images, faites autre chose, encore une fois, avec l'IA, expliquez-leur, introduisez-la. Je travaillerai très bien. Et c'est tout. Méthode très puissante pour développer vos compétences et vos connaissances sur la façon de travailler avec Webflow et d' étendre vos compétences en conception de sites Web Dans la vidéo suivante, nous allons implémenter de manière un peu plus complexe quelque chose de similaire à partir de CodePen. 180. CodePen + AI: Comme dans cette vidéo, nous allons faire une autre implémentation de code personnalisé. C'est une question légèrement plus compliquée et plus complexe. Et nous utiliserons également l'IA, et nous recevrons l'aide de IA pour modifier le code que nous allons obtenir. J'ai donc trouvé ce composant d'accordéon vraiment cool. Sur CodePen, ça a l'air vraiment bien. J'adore l'animation, et cela constituerait un très bon composant sur probablement n'importe quel type de site Web. Par exemple, ils pourraient être utilisés comme témoignages, non ? Il peut s'agir de l' avatar d'une personne, de son nom, de son titre et de son témoignage, nous ajoutons éventuellement comme citation ici ou comme citation Et puis vous avez d'autres photos de personnes, et l'arrière-plan peut être remplacé par autre chose . C'est une façon de procéder. Cela peut aussi être comme les fonctionnalités, vous savez, fonctionnalité un, la fonctionnalité deux, la description, etc. Ces catégories peuvent être utilisées de nombreuses manières différentes. C'est un composant vraiment sympa, peut être utilisé sur n'importe quel site. Non, nous pouvons certainement également le reconstruire dans Webflow. Mais évidemment, nous allons prendre un peu plus de temps pour le voir , l' examiner, le reconstruire et trouver un moyen de le faire. Alors que lorsque nous faisons une sorte de prototypage rapide, nous testons des idées, peut-être avec un client Parfois, nous nous disons  : « OK, laisse-moi voir. Laisse-moi laisser tomber ça. Vous travaillez avec un client, et vous allez lui demander Et ça ? Est-ce que ça va marcher ? Vous n'avez donc pas à perdre beaucoup de temps à tout créer et la création d' un site Web par Frankenstein est également un moyen vraiment valable de le faire Vous récupérez différents composants sur différents sites Web. Trouvez des composants open source sur des sites tels que CodePen, puis vous les implémentez petit à petit. C'est aussi une façon de procéder . Je vais donc vous montrer comment j'ai trouvé cela sur CodePen, afin que vous compreniez le processus de fonctionnement Passez donc à codepen point IO. Et je suis déjà connecté sur CodePen pour faire une recherche, il va vous demander de vous connecter Et une fois connecté, vous pourrez effectuer une recherche. J'ai cherché des cartes. Et la différence entre CodePen et UIERS est que le verset de l'interface utilisateur contient généralement des éléments un peu plus simples qui ne sont que du CSS C'est ça. L'avantage des UIV, c'est qu'ils sont faciles à mettre en œuvre car ils sont propres Ce sont du pur Javascript, désolé, du pur HTML, du pur CSS, et ils fonctionneront immédiatement lorsque nous les implémenterons et que nous les déposerons dans le code intégré à Webflow CodePen fonctionne un peu différemment. CodePen contient du HTML, du CSS, du JavaScript, et ils peuvent également contenir différentes bibliothèques, frameworks et dépendances Ils peuvent donc être plus puissants. C'est pourquoi vous pouvez en voir un peu plus. Certaines personnes déposent même des conceptions de pages de prêt entières ici et des conceptions de sites Web. Comme vous pouvez le constater, ce sont des pages entières ici qui sont partagées. Ce n'est évidemment pas ce que nous voulons. Nous ne voulons pas que la page entière soit implémentée. Parfois, les jeux, les trucs bizarres ont, vous savez, des animations et des composants intéressants. Vous pouvez donc avoir de bonnes idées que nous n'implémenterions évidemment pas dans son intégralité sur la page de destination. Nous trouverions quelques petits composants, des choses vraiment utiles comme celui-ci, les cartes, cela aussi, qui ont une bonne animation. Donc, une fois que vous avez trouvé quelque chose qui vous plaît, vous allez à l'intérieur et vous obtenez cette vue avec HTML, CSS et JavaScript. Et voici à quoi ressemblera chaque stylo à code. Vous pouvez le redimensionner, et voici le code, et il s'agit du terrain de jeu, pas du terrain de jeu, mais en fait de la vue du composant lui-même Et parfois, vous n' aurez que du HTML et du CSS et pas de Javascript , et parfois les trois langues dépendront du stylo lui-même. Une autre chose à prendre en compte ici est que le code contenu dans CodePen n'est peut-être pas du CSS ou du JavaScript pur et ce n'est pas le cas dans cet exemple Celui-ci utilise un préprocesseur appelé SCSS, et celui-ci utilise la bibliothèque jQuery, qui n'est pas du pur Javascript, et c'est une dépendance qui est Maintenant, l'IA va comprendre cela parce qu'elle comprendra comment c'est écrit et elle comprendra qu' elle utilise ces dépendances, mais nous pouvons lui dire de ne pas l'utiliser. Donc, comme d'habitude, nous allons simplement récupérer ce code, puis nous passerons à l'un des LLM, et nous vous demanderons de l' adapter à nos besoins Donc cette fois, je vais utiliser Gemini parce que j'ai atteint les limites du cloud, et c'est une bonne démonstration pour voir comment cela fonctionne sur un autre LLM Voilà et le processus sera le même sur les trois LLM Maintenant, ce que nous allons faire ici, c'est lui demander de réutiliser ce composant, et je vais utiliser quelques mots clés que vous devrez utiliser dans de tels cas Et le mot clé provient, dans ce cas, d'un stylo à code. Parce que CodePen comportera quelques nuances et que c'est un bon contexte à transmettre au chatbot Ils comprennent donc que, d'accord, nous récupérons ce code de CodePen, et s'il y a quelques nuances, il l'inclura en quelque sorte et il le saura Et puis une autre chose que nous allons vous dire à propos de Webflow, du code et du mal Et c'est une autre nuance que nous devons apporter car s'il s'agit d'un code Webflow potentiellement mauvais, j'espère qu'il comprendra que nous voulons que ce soit un code de sortie HTML que nous puissions coller dedans, et que nous ne créons pas réellement un environnement indépendant lorsque différents fichiers communiquent entre eux Ensuite, nous allons le compter pour en faire une implémentation standard Et c'est un autre mot. Il s'agit essentiellement d'un terme technique implémentation de la version vanille ou la version vanille. qui signifie qu'il n'y a pas de requête J, pas de réaction , pas de CSS, nous voulons que ce soit bon vieux JavaScript et CSS purs et réguliers. De cette façon, cela fonctionnera immédiatement dans n'importe quel navigateur, et cela fonctionnera dans Webflow, et nous n'avons pas à extraire de dépendances susceptibles d' entrer en conflit avec l'environnement Webflow C'est ce que nous ne voulons donc pas. Nous voulons simplement JavaScript et du CSS purs. Cela fonctionne donc dès le départ. Un autre mot-clé que nous voulons lui dire. Un autre contexte que nous devons transmettre à l'IA est que nous le faisons sur un site Web existant. Nous devons donc nous assurer qu' il comprend ce contexte, qu'il ne s'agit que d'un petit élément que nous allons coller dans notre site Web existant. Nous allons donc le dire. Il doit fonctionner sur un site Web existant. Et il y a ces références ici. Il y a un lien vers l'auteur. Il y a aussi quelque chose de l'auteur ici, donc nous pouvons nous en débarrasser. Nous n'avons pas besoin de crédit. C'est open source, et nous pouvons l'utiliser. Nous n'avons pas besoin de créditer les auteurs du code écrit, nous pouvons donc simplement nous en débarrasser. Supprimez donc toute référence aux auteurs. Et maintenant, nous commençons à coller le code, à saisir le code HTML, à le coller, à utiliser les touches Shift Enter , Shift Enter, Wrap, JavaScript Shift. Eh bien, c'est déjà là. J'y ai fait face. Et si vous avez des forfaits payants, c'est un peu plus complexe. C'est pourquoi les forfaits payants et les modèles payants de niveau supérieur feront un bien meilleur travail ici. Et les trois modèles vous permettent généralement, même avec le forfait gratuit, de jouer avec des modèles plus intelligents, comme Thinking et P. Et dans ce cas, je vais probablement essayer de réfléchir car P atteindra ses limites très rapidement au cas où nous voudrions communiquer avec lui. Euh, penser peut déjà faire un bon travail. Je vais donc utiliser la réflexion. Tu ne veux pas aller vite. Vous ferez probablement l' excellent travail également, mais je veux y réfléchir, afin qu'il commence à tenir compte des choses dont je lui ai parlé, à savoir qu' il s'agit d' un code Webflow intégré, que nous le voulons original, que nous le voulons sur le site Web existant, afin qu' il ne soit tout simplement pas craché Alors considérez ces choses. C'est donc sur Gemini on Cloud que vous pouvez sélectionner, comme Opus, des modèles supérieurs, et il en va de même pour Chacha PT, des modèles de réflexion supérieurs Et voyons voir, cette fois, cela va prendre un peu plus de temps puisque nous lui demandons également d'y réfléchir un peu plus en profondeur, de lui donner un peu de temps, et de voir quel en sera le résultat. C'est bon. Il l'a donc terminé. Voyons donc ce que c'est. C' est le plug and play. Bien. Nous voulons qu'il soit prêt à l'emploi. J'ai converti S CSS en Vena. Voilà. Je l'ai compris. Le jQuery a été remplacé par du javascript vanillé Super, super, super. C'est ce que nous voulons. Et j'ai supprimé tous les crédits d'auteur. Pour utiliser le Webflow. Dans Webflow, il suffit de coller le bloc entier ci-dessous dans un élément de code intégré. Génial. OK. Cela nous a donc donné un code complet en une seule fois. Cela ne nous a pas donné le HTML séparé, CSS séparé, il nous a juste donné tout en une seule fois. C'est exactement ce que nous voulons. Et nous pouvons simplement copier le tout à partir d' ici et voir comment cela va fonctionner. Et dans Webflow, encore une fois, nous allons ajouter du code et du mauvais code et tout coller ici Et jetons-y un rapide coup d'œil. Voyons voir. Donc le script est là, c'est bien. C'est du HTML, tout ça. C'est du CSS bien intégré dans les balises de style. Et ça tire, ce qui est génial. D'accord, il utilise donc une dépendance que ce code inclut déjà , à savoir les icônes. Et maintenant, nous ne pourrions potentiellement pas utiliser cette dépendance, débarrasser par le haut et alimenter le LLM avec nos propres icônes Nous pouvons donc vous dire que nous téléchargerions, comme nous l'avons fait pour les images, nous téléchargerions des icônes SPG et nous vous dirons également remplacer les icônes par telle ou telle icône SPG à partir de ces liens Mais c'est bon pour le moment. Nous pouvons certainement l'utiliser. C'est une police gratuite. Awesome est comme un jeu d'icônes gratuit, qui fonctionne comme une police Vous n'avez donc pas à appliquer chaque icône à l'aide d'une image . C'est un outil très pratique où vous pouvez extraire la police complète ici, puis vous pouvez les référencer dans le code. Enregistrez et fermez, et voyons comment cela fonctionne. D'accord, je pense que ça a l' air plutôt bien. Faisons-le tester. Fonctionne vraiment bien. Sympa. Il y a quelques problèmes ici, comme vous pouvez le constater, le texte est un peu bancal et aligné au centre, mais à part ça, tout fonctionne bien Maintenant, si vous le faites vous-même et que vous rencontrez d'autres problèmes, vous pourriez rencontrer cela parce que l'IA n'est pas prévisible. Vous devez en quelque sorte les guider correctement. Et selon le modèle que vous utilisez, s'il est rapide, vous risquez de faire des erreurs. S'il s'agit d'un meilleur modèle de réflexion, il fera généralement le meilleur travail. Donc, si vous rencontrez des problèmes, une capture d'écran. Donc, vous feriez une capture d'écran comme celle-ci et vous lui diriez : OK, c'est mal aligné ou quelque chose comme ça, et comment puis-je y remédier Ensuite, vous vous donnerez généralement une réponse, puis vous pourrez l'appliquer. Tant que le problème ne provient pas Webflow ou d'un problème provenant du Webflow, ce qui est le cas dans ce cas, et maintenant je vais vous montrer d' où cela vient Maintenant que ce centre est aligné, il est appliqué sur le conteneur, comme vous pouvez le voir sur la ligne centrale, qui va descendre en cascade, et tous les éléments à l'intérieur en hériteront Comme vous pouvez le constater, le code et l'élément bed héritent du conteneur six D'accord ? Il s'agit donc d'un alignement central, ce qui signifie que si le code embed hérite, cela signifie que tout ce qu' il contient, les styles de police qu' il contient, en hériteront en retour du code et du lit, sauf s'ils sont explicitement alignés à gauche à l'intérieur, ce qui Donc, ce que nous allons faire ici, c'est simplement sélectionner le code et le lit et simplement les modifier pour les aligner à gauche, et c'est tout, et cela devrait fonctionner. Et voilà, ça a marché. Et une autre partie que nous pouvons tester ici est que, comme vous pouvez le voir, il y a un petit écart ici, alors que là où se trouve notre original original n'avait pas cet écart. C'est bien centré. Donc, ce que nous pouvons faire ici, c'est que je pourrais le capturer, mais je pense qu'il comprendra si je le raconte. D'habitude, ce serait bien si tu savais comment le dire. Sinon, vous pouvez également parcourir le code C, et vous serez peut-être en mesure de le comprendre en fonction de ce que vous voulez, car il s' agit de classes nommées par des humains, ou des classes nommées par des humains Vous comprendrez donc l'ombre, ils l'ont nommée option active. Tu comprends ça, non ? Option étiquette active, probablement une de ces étiquettes en dessous, info, d'accord ? Et si nous étiquetons icône. OK, on comprend. Voici donc l'icône de l'étiquette. Nous savons où se trouve l'icône et les informations sur les étiquettes sont en blanc. Il s'agit donc probablement du texte, des informations principales en gras, Ifosab et aussi plus facile à voir car vous pouvez simplement regarder le texte, texte réel qui était inclus ici dans Donc, cette sœur blonde, je ne sais pas ce que c'est, mais comme vous pouvez le voir, nous pouvons trouver ce texte dans le code. Et puis nous pouvons voir que, d'accord, la classe est la classe main sub ici, donc c'est info main et sub. Nous pouvons donc y faire référence et indiquer au texte de l'étiquette que les informations principales et secondaires ont un petit espace blanc. Ils ne sont pas aussi ajustés que dans le composant Mginal Et bien, voyons ce que cela nous dit. L'écart est probablement dû à l' espace blanc situé avant la propriété qui préserve les sauts de ligne, bla, bla, bla. Remplacez les informations de l'étiquette. OK, donc ça n'a pas tout mis à jour. Nous pouvons vous demander de mettre à jour ou nous pouvons voir si nous pouvons facilement remplacer section d'information sur les étiquettes de votre CSA par cette version Titan, les informations sur les étiquettes, tout ça, n'est-ce Nous pouvons donc trouver exactement ce qu'il faut. Je pourrais aussi dire qu'il suffit de le régénérer à nouveau pour moi. Google lui a appris à ne pas régénérer l'intégralité du code à partir de zéro, car cela lui coûterait plus de puissance de calcul C'est donc être paresseux et cela nous dit de le faire vous-même, ce que nous pouvons faire et nous pouvons dire : OK, cela nous demande de remplacer infosection des étiquettes dans votre CSS par cette version titan D'accord, nous trouverons des informations sur l'étiquette, informations principales sur SAP. Informations sur l'étiquette. Nous avons trouvé des informations sur l'étiquette, informations signifient ici et des informations secondaires ici. Cela signifie donc que nous ne devrons pas le faire en une seule fois, nous allons donc devoir les remplacer ici. Et maintenant, infomin, nous l'avons déjà. Supprimons donc cela d'ici. Et info sub, c'est redondant. Il s'agit de l'ancienne version. Il s'agit de la nouvelle version que nous avons collée, nous l'avons donc supprimée Et voyons voir, croisons les doigts. On ne sait jamais avec l'IA. Pas mal Fonctionne très bien. Espacement plus serré Plutôt bon. Une autre modification et correction que nous pourrions avoir besoin d'apporter est réactive. Voyons à quoi ils ressemblent sur différentes tailles. Ça a l'air bien ici, et ça devient déjà un peu trop serré. Cela pourrait fonctionner ici. Voyons si cela fonctionnera sur le mobile. Et sur le mobile, nous n'en avons qu'un, et nous ne savons même pas ce qui se passe ici. C'est bon. Nous allons donc revenir à Gemini et nous lui dirons de le rendre réactif Et j'espère que vous aurez une idée de ce qu'il faut faire avec le responsive. Potentiellement, il pourrait effectuer un empilage vertical au lieu d'un empilement horizontal Évidemment, sur le mobile, on ne peut pas le rendre horizontal, non ? Il n'y a donc pas de place. Voyons donc si lui, quel que soit le Gémeaux, comprendra comment le rendre réactif. Pour apporter cette réponse, nous allons passer de la mise en page horizontale à la pile verticale Sympa. J'ai également conservé l'espace Titan en bon état, remplacé le bloc dans votre flux Web et je l'ai intégré mais je suis vraiment paresseux ces derniers temps Ça ne me donne pas tout. Maintenant, il me dit de simplement remplacer le style. Autant me donner le code HTML complet, mec. Qu'est-ce qui ne va pas chez toi ? D'accord. Retournons en arrière. Alors maintenant, il nous demande de remplacer le style, non ? Il nous a demandé de remplacer le bloc de balise de style dans votre intégration Webflow par Voici donc notre technologie de style. C'est ici que ça commence, et c'est là que nous allons le sélectionner, peut-être que nous soulignerons où il se termine. Ne surligne pas. C'est donc là que ça s'arrête, comme vous pouvez le voir, le style de fermeture. Donc, ce que nous allons faire, c'est sélectionner tout cela, les supprimer et les coller. Si vous ne voulez pas le faire, demandez-lui simplement de tout régénérer et me donner le code HTML complet une fois de plus Et voyons voir. Enregistrez et fermez. Voyons si rien n'est cassé. Ce n'est pas bon. Et voilà. Il fonctionne à la verticale. Ici, c'est logique. Ça va. Ici, ça ne va plus, et c'est bon. J'ai compris qu'ici, nous n'avons pas besoin de changer, mais sur le mobile, nous avons besoin de changer et nous pouvons le changer. Et évidemment, c'est maintenant que ma page n'est pas stylisée. J'ai besoin du rembourrage ici. C'est pourquoi ce n'est pas le cas, nous pouvons le faire, par exemple, donnant la section sur le titre, afin qu'elle ne soit pas compressée ici. Et maintenant, ils ne sont plus accroupis, et ça marche très bien. C'est plutôt bon. Pour toute autre modification que vous souhaiteriez, vous lui demanderiez de le faire. En remplaçant des images, vous lui demanderiez de remplacer des images, ou vous pouvez également le faire via le code. Vous pouvez facilement trouver l'URL de l'image. HTPS ce truc et vous pouvez le copier d'ici. L'une des images, vous la copieriez, vous copieriez le lien, puis vous la remplaceriez simplement dans le code ou vous demanderiez à l'IA de le faire. C'est tout et j'espère que c'était amusant et pas trop compliqué. Et si vous rencontrez des problèmes, faites-le moi savoir dans les questions-réponses et je vous aiderai. Ce n'est certainement pas quelque chose qui fonctionnera 100 % du temps. Chaque stylo à code a ses propres particularités. Ils utilisent des dépendances différentes. Ils utilisent des propriétés différentes qui peuvent être prises en charge partout. Et chaque LLM et IA le traiteront également un peu différemment. Et parfois, c'est le même LLM et l'IA qui vont le faire le mardi , et le mercredi, il va décider de vous proposer une solution complètement différente, n'est-ce pas Il n'est pas garanti à 100 % que toutes les solutions seront identiques. Mais cela vaut toujours la peine d'essayer, expérimenter cela, surtout aujourd'hui L'IA vous permet d'élargir vos compétences et d'élargir vos compétences en matière conception Web et de flux Web Il s'agit également d'une compétence transférable. Peu importe que vous le fassiez dans Webflow ou dans un autre outil de conception Web, ou que vous le codiez à la main, cela signifie que cela n'a rien à voir avec le blog Le code que nous obtenons ici est du code HTML et CSS que chaque constructeur, chaque créateur d'IA ou non, que WordPress utilise exactement de la même manière. Donc du HTML et du CSS partout. C'est donc une bonne chose d'apprendre pour vous. Et si vous avez le temps, je vous recommande vivement de suivre un base sur le HTML depuis le CSS cours de base sur le HTML depuis le CSS et le JavaScript, super, super fondamental, rien de compliqué pour vous permettre de simplement vous familiariser façon dont ces éléments sont liés les uns aux Non pas que vous ayez besoin de comprendre chaque propriété et tout le reste, comment créer, mais de comprendre le texte, comprendre comment le HTML communique avec le CSS et comment le CSS communique avec HTML, comment JavaScript est joué dans tout cela et comment cela se fait dans un seul fichier HTML par rapport à trois fichiers HTML différents, des fichiers CSS, des fichiers séparés, des fichiers CSS, des fichiers séparés, JavaScript, fichier séparé, qui est généralement la façon dont les sites Web sont compilés et construits. Ce serait donc une très bonne connaissance de base pour vous, qui vous aidera certainement, augmentera vos compétences et vous permettra d'utiliser Webflow et de manière plus avancée de n'importe quel autre outil de conception Web 181. Photoshop : comment créer un recadrage extensible: Bon, c'est l'heure de passer à Photoshop. Tutoriel pour la majeure partie du design, Figma est suffisant, mais dans certains scénarios, nous ne pouvons pas passer de Photoshop. C'est l'un d'entre eux. Si vous ne possédez pas encore Photoshop, vous pouvez bénéficier d'un essai gratuit de sept jours. Et si vous voulez l'acheter, il coûte environ 10 dollars par mois, ce qui inclut Photoshop, Light Room, tous les téléphones Adobe et 20 Go d'espace de stockage dans le cloud Vous pouvez télécharger la version d'essai Adobe.com, supprimer les téléchargements ou simplement télécharger Google Photoshop Si vous avez déjà utilisé votre version d' essai de sept jours de Photoshop par le passé, vous pouvez essayer Affinity Photo à la place votre version d' essai de sept jours de Photoshop par le passé, vous pouvez essayer Affinity Photo C'est une très bonne alternative à Photoshop et la plupart de l'interface et son fonctionnement sont assez similaires à Photoshop. J'ai inclus les ressources de liens, il propose un essai gratuit de dix jours, même si je ne vais pas vous montrer comment le faire en affinité, mais comme il en existe deux très similaires, vous trouverez probablement comment vous trouverez probablement comment le faire fonctionner également dans Affinity. Bon, revenons à Photoshop. Une fois le processus d'installation terminé, ce sera votre écran initial. Cliquez sur Ouvrir et sélectionnez le fichier photo. J'ai inclus cette image dans les ressources de cette leçon, afin que vous puissiez travailler sur la même photo si vous voulez une cassette de sauvetage rapide sur Photoshop Lorsque j'ai commencé à utiliser Photoshop, je finissais par perdre certains outils et options. Souvent, je regardais tutoriel Youtube pour apprendre quelque chose, mais je n'arrivais pas à trouver un outil qu'ils utilisaient dans la vidéo. Photoshop propose de nombreux raccourcis et de petites options vous permettant fermer facilement un onglet ou de supprimer un outil, etc. Je me retrouverais avec un pistolet à outils, sans panneau de couches, et aucune idée de la façon de les remettre en place. Je ne pourrais donc plus suivre un tutoriel car l'outil n'est pas là, cauchemar pour tout débutant quand on essaie de se familiariser avec ce nouveau logiciel et d' apprendre plein de choses en même temps, je perdrais beaucoup de temps à trouver comment le remettre en Voici l'astuce pour que tout revienne à la normale. Au cas où vous vous tromperiez , cliquez sur cette icône ici et sélectionnez Essentials. Si c'est ce que vous avez déjà sélectionné, cliquez sur Réinitialiser Essentials. Cela rétablira l'espace par défaut, tel qu'il était prêt à l'emploi la toute première fois que vous l'avez installé. Cela inclura deux onglets supplémentaires. Voici le didacticiel du guide Photoshop contenant des éléments essentiels. Je vous recommande de le lire plus tard si c' est la première fois que vous utilisez Photoshop. OK, je n'ai pas besoin de ces deux onglets ici, donc je vais les fermer. Si cette méthode ne revient toujours pas à la normale, cela signifie que vous avez modifié quelque chose dans les préférences. Dans ce cas, allez dans Préférences dans Windows, allez dans Préférences dans Windows, dans le menu Edition, puis sélectionnez Général. Et cliquez sur Réinitialiser les préférences pour quitter, redémarrez Photoshop, et tout redeviendra normal. Gardez à l'esprit toutes les préférences que vous avez intentionnellement modifiées dans le passé et qui seront transférées. Bien, revenons à notre photo. Vous trouvez souvent la bonne image de votre projet, mais elle n'est pas tout à fait à la bonne taille. Cette image, par exemple, fera une superbe photo d'arrière-plan. C'est propre, c'est simple. Il a un excellent contraste de couleur, mais il a un problème. La séparation entre la plage et l'eau traverse le milieu de l'image. Aucun des deux côtés n'est assez large pour héberger notre contenu, mais si nous pouvions étendre un peu plus l'un des côtés, nous aurions un arrangement parfait. Heureusement, nous pouvons le faire dans Photoshop. Dans le panneau des couches, vous verrez ce verrou sur la couche. Cela signifie que la couche est partiellement verrouillée et, à bien des égards, elle ne sera pas modifiable comme prévu Cliquez simplement sur ce verrou pour déverrouiller la couche. Sélectionnez maintenant cet outil de recadrage. Vous aurez ces poignées autour de l'image, faites glisser le côté sur lequel vous souhaitez créer le recadrage étiré. Cela ne fait que repousser les limites de notre plan de travail. Cliquez sur le crochet Une fois cela fait, il valide le changement. Sélectionnez maintenant cet outil de marquage rectangulaire au cas où vous verriez autre chose ici, cliquez dessus avec le bouton droit Cela ouvrira tous les autres outils qui font partie de ce groupe. Maintenant, faites glisser et sélectionnez la partie que vous souhaitez étirer. Assurez-vous de sélectionner des parties qui ne présentent aucun détail, qui sont déjà floues ou uniformes Vous ne pouvez pas faire cela avec des personnes ou des objets. Cela ne peut être fait que sur les arrière-plans et les parties floues, etc. Je sélectionne Extra sur le côté gauche juste pour m'assurer que tout le bord est sélectionné. Une fois sélectionné, allez dans Modifier et transformer gratuitement. Vous pouvez également appuyer sur la touche Ctrl ou Commande, comme indiqué ici. Maintenant, faites simplement glisser la poignée gauche et étirez l'image autant que vous le souhaitez. Puis cliquez à nouveau sur la coche, cela valide la modification que vous apportez à la sélection. Si vous avez de l'espace supplémentaire ici, sélectionnez Kroptolgain et recadrez-le Nous avons maintenant une image qui dispose d'une bonne quantité d'espace, nous pouvons donc mettre notre contenu pour enregistrer cette image. Cliquez simplement sur Fichier, Enregistrer sous, puis sélectionnez J. C'est tout. 182. Photoshop : Découper: compter un objet à partir de son arrière-plan est mieux vers le bas dans le spectacle photo ou photo d'affinité. Y a-t-il un autre logiciel similaire, qui est pour la manipulation de photos ? Commençons. partie la plus importante pour découper avec succès un sujet est en fait de choisir la bonne photo à des choses auxquelles nous devons prêter attention. L' arrière-plan et la position sont-ils hors du sujet ? Idéalement, nous voulons un arrière-plan qui soit clair et qui contraste vraiment bien avec le sujet. Découper des sujets de milieux difficiles peut être un travail fastidieux, et la dernière chose que vous voulez est de dépenser un demi-Knauer pour découper un sort de modèle dans vos désirs et réaliser que le modèle n'est pas un bon ajustement. Une bonne conception est généralement un résultat hors de beaucoup de directions. Imaginez Itérer entre trois sujets découpés, envoyer la version finale à votre client pour leur examen, puis grimper revient, disant que le modèle n'est pas vraiment leur public cible, et ils veulent quelqu'un un un peu plus âgé et habille un peu plus fantaisie. Ça va te rendre folle. Si découper le sujet n'est pas un travail rapide et simple. Le deuxième important, en fait, est la position du sujet sur la photo, découper un modèle qui est d'humeur assise et a beaucoup de sens. Nous devrions recréer la même position que vous êtes conçu, donc nous devrions, vous savez, faire asseoir le modèle sur quelque chose de très similaire taille et forme dans nos conceptions aussi , et que c'est trop. Besoin de moins de travail Les positions debout face à l'avant sont les meilleures pour les découpes et tous les angles de caméra comme ceux-ci demandent juste beaucoup de problèmes pendant le processus de conception. Parce que la caméra est face à elle de côté à partir du haut mince. L' espace dans lequel vous la mettrez doit refléter cela aussi. C' est faisable, mais vous vous heurterez aux obstacles et aux limites de vos conceptions. Ces photos, même si dans un fond simple, c'est toujours un mauvais choix, ignorant la partie quand elle est, vous savez, face loin de la caméra parce qu'elle porte un haut blanc et devant un blanc boutique photo de fond aura du mal à détecter les bords entre l'arrière-plan et le pull sur Splash est généralement pas l'endroit idéal pour trouver de telles photos. La plupart des photos ici sont prises dans des scénarios de la vie réelle en dehors du studio, ce qui n'est pas une mauvaise chose. Il offre une bonne sélection de photos de stock qui ne ressemblent pas à des stocks. Mais pour les images isolées, le meilleur endroit sont payés côté stock, Par exemple, gros stock dot com. Si vous ajoutez un mot-clé, isolé de remorquage tout ce que vous cherchez, il vous donnera principalement des photos en studio sur des arrière-plans simples. Ces photos fonctionneront le mieux pour découper le processus de spectacle photo sera super simple , et l'angle de la caméra et la position du sujet seront excellents pour votre travail. Ceci est un autre stock payé photos côté icône point ST point com. Ils proposent une sélection de photos, principalement sur des arrière-plans simples. C' est gratuit pour un usage personnel, donc je vais choisir une photo d'ici. C' est un excellent travail photo avec pour des découpes de sujets complets. L' arrière-plan joue en une seule couleur, et il y a une séparation claire entre le sujet et l'arrière-plan. C' est un travail facile. Vous pouvez choisir cette photo exacte à suivre ou choisir autre chose. Je vais lier l'image et les ressources. Je ne vais pas démontrer la suppression de l'arrière-plan sur des photos difficiles. Je ne veux même pas que tu apprennes à travailler avec des milieux difficiles. De cette façon, nous nous assurerons que vous prenez l'habitude de chercher les bonnes photos. Quand il s'agit d'isoler le sujet pour des photos difficiles, je fais autre chose. Je n'ai découpé qu'une petite partie de l'image. Je le montrerai plus tard. Ok, alors ouvrons notre image. Déverrouillez le calque en cliquant sur cette icône de verrouillage dans la boîte à outils sur les chaussures de gauche. orteil de sélection rapide planant au-dessus d'un outil vous dira ce que c'est un jour. La visite sera utilisée pour sélectionner le modèle et l'isoler de l'arrière-plan. Maintenant, sélectionnez les options de brosse à travers la taille qui n'est pas trop grande ou pas trop petite, sorte que nous pouvons facilement sélectionner la tomate et régler la dureté à 100%. Maintenant, commencez à sélectionner le modèle à partir du centre et couvrez lentement toute sa forme. Assurez-vous que ces lignes animées entourent ses bords et rien d'autre à sélectionner plus précisément, zoomant de très près en pincant votre gras tactile ou maintenez ou la touche d'option tout en utilisant votre molette de souris. Pour avoir un meilleur contrôle sur votre sélection, augmentez ou diminuez la taille de votre pinceau. Il y a un raccourci pour que vous n'ayez pas à aller dans le panneau des paramètres du pinceau tout le temps . Il suffit de cliquer sur les crochets. Clé gauche. On diminue la taille de la brosse et la droite l'augmente. Si vous avez envie de quelque chose de supplémentaire, maintenez la touche ou d'option et vous verrez que votre outil de sélection a maintenant un moins dessus. Lorsque vous relâchez, il revient à plus si plus ajoute à la sélection et moins soustrait. Tenir et commencer à supprimer les zones que vous plus sélectionnez si vous faites une erreur et que vous voulez revenir sous vente aux enchères et boutique photo fonctionne réellement un peu bizarre. Je me souviens que c'était très ennuyeux pour moi au début. C' est toujours parce que ça ne marche pas comme on s'y attendrait. Ainsi, le contrôle régulier Z ou commandes un jeune Mac va et vient sur votre dernière action. Donc, si vous voulez sous la dernière action que cela fonctionne comme vous vous attendez. Mais si vous appuyez à nouveau dessus, il refera la dernière action. Donc, en appuyant sur elle beaucoup de temps va juste d'avant en arrière, m'a conduit pas la première fois que je jouais dans la boutique de photos. Le réel sur Do voir ici dans les options d'édition est appelé Step Back Board et a un raccourci avec une option out dedans. C' est votre habituel sous et se comporte comme vous vous attendez à ce qu'il se comporte dans les fenêtres, ce qui devrait probablement être le contrôle. Je vais voir, mais juste au cas où, doubles vérifications et juste aller dans l'édition, puis aller à reculer et voir quel est le raccourci à côté de lui. Vérifiez votre adresse et assurez-vous que vous n'avez manqué aucun endroit. Ne vous inquiétez pas trop pour les cheveux lâches. Il suffit de sélectionner la ligne principale et puis nous allons fixer les cheveux plus tard, après que vous avez terminé de sélectionner cliquez, Sélectionnez et masque ici. Ceci est en fait disponible sur les nouvelles versions Photoshopped. Si votre version n'a pas ceci, alors cherchez affine ach ! Cela fonctionne presque de la même manière, mais ce nouveau futur de sélection et de masque est plus supérieur ici. Nous allons nettoyer notre sélection afin d'obtenir le résultat parfait. Voici un autre conseil important Photoshopped. Assurez-vous que vous avez sélectionné un calque correct. C' est le panneau des couches, tout comme la figure MMA. Si vous avez plus d'un calque. Assurez-vous de citer celui avec la photo dessus. Ok, donc ici, par défaut, cette transparence est diminuée. C' est une transparence de notre arrière-plan et de tout ce que nous n'avons pas choisi de glisser. Cela n'affecte pas la façon dont notre découpe ressemblera à un guide pour nous. 0 % montre l'image originale et pleine hauteur et 100 %. Tout ce que nous n'avons pas sélectionné. Il est utile de recevoir avec M. tous les détails. Augmentez-le à 100%. Comme vous pouvez le voir, il y a quelques imperfections sur ses cheveux. Le fond rose passe à travers ses cheveux. Mettons-la sur un fond blanc d'ici pour mieux voir que manger maison changer leur passage à 100%. Voici bien, cette fois il dit rapacité au lieu de transparence parce que le fond blanc est au-dessus de l'arrière-plan original, donc 100% opacité signifie qu'il est 100% visible. Ne vous inquiétez pas trop pour ça. Les cheveux ont besoin d'être réparés. En outre, si nous zoomons de près sur sa peau, les bords sont déchiquetés et non naturels. n'y a pas de bonne norme à utiliser dans n'importe quel design. Un bon design semble parfait quand il s'agit de petits détails comme celui-ci savent toutes les décolorations , et le chat devrait paraître lisse et naturel, comme c'est exactement le fond sur lequel elle a été prise. La laideur de la plupart des découpes sort des bords quand un tout juste ne sont pas bien raffinés. C' est perceptible, on dirait que quelqu'un a vraiment pris un magazine en papier, puis avec des ciseaux découpés. Le modèle de leur boutique photo heureusement est absolument incroyable. Et la fixation pour fixer les bords sont découpés. Nous devons sélectionner un outil d'affinage et de brossage à partir d'ici. C' est le 2ème 1 Gardez votre bouche dessus pendant une seconde, et il vous dira lequel il ISS parce que ces trois ont l'air assez similaire, tout comme nous l'avons fait avec l'autre taille de brosse, la brosse du panneau d'options ou en utilisant carré et lentement commencer à brosser sur les bords de ses cheveux. Et regarde ça. Ce qui se passe réellement ici, c'est que nous demandons à Photoshopped de regarder au-delà bords de notre sélection originale et de voir s'il y a des parties qui ressemblent à notre sélection et en même temps de supprimer les pixels qui ressemblent à eux font partie de l' arrière-plan. C' est pour ça que ce Ping a disparu. À l'aide du curseur d'opacité, vérifiez les autres pièces qui ont été manquées au cas où vous supprimez un peu plus, tout comme les autres prix de l'outil sur la sortie ou l'option. Tu verras que c'est un signe moins. Cela permettra de restaurer le bord d'origine, puis brossé à nouveau pendant que vous maintenez la touche de sortie. Ne vous inquiétez pas, il ne va pas soustraire de la sélection originale. C' est en gros de défaire ce qu'on vient d'ajouter. Ses cheveux ont l'air décent, mais il y a encore un collier rose qui tombe sur ses bords va enlever ça plus tard. Vérifions le reste de ses bords maintenant. Nous pouvons, bien sûr, faire le tour sur tout son corps avec cet outil d'affinement. Mais il y a un moyen plus rapide de le faire sur la peau et les parties qui sont assez simples et uniformes. Contrairement aux cheveux qui se font par ici. Détection des bords. C' est le même concept que l'orteil refinancé. Avec cela, nous pouvons dire à Photoshopped de regarder au-delà de notre sélection et de voir si nous avons manqué des pièces. Il est en pixel, donc un pixel signifie regarder un pixel après la sélection et ajouter les parties manquantes. Faites attention à la façon dont les bords se déplacent à mesure que nous augmentons deux pixels. Même dissidence dans ce cas, radios intelligentes signifie qu'au lieu d'utiliser un uniforme aux radios pixel partout, il utilisera une valeur personnalisée en fonction du bord. C' est utile si vous utilisez de grandes valeurs, mais j'aime réparer impair. Ajustez manuellement à l'aide de l'outil Affiner le bord Parfois, vous remarquerez que vous avez quelques correctifs supplémentaires comme celui-ci lorsque vous faisiez la sélection, ou vous avez manqué quelques endroits en arrière et la correction de la sélection après avoir mis tant de travail va être déchirant . Heureusement, nous pouvons ajouter ou enlever les taches ici avec un bout de brosse. Comme d'habitude signe plus ajoutera dans n'importe quel pixel C clic sur vous sentirez cela fonctionne un peu différent des outils précédents que nous avons utilisé deux autres outils. Ils font des calculs dans les endroits où vous appuyez sur celui-ci ne vous basez pas sur ce que vous appuyez, et une dernière étape que nous devons faire est d'enlever cet éblouissement rose de ses cheveux qui peut être fait automatiquement à partir d'ici. Sélectionnez les colliers de décontamination. Donne-lui un moment et Walla. Maintenant, la plupart du ping de ses cheveux a disparu. Quel travail incroyable il a fait. Cette étape est très dernière parce que si vous avez sélectionné après chaque clic que vous faites, cela va recalculer encore et encore fera les choses beaucoup plus faibles. Bien que quelque chose de drôle s'est passé ici, voyons si nous pouvons le réparer avec l'outil affine bord. Ok, mon Dieu, en fait toujours choisi une photo un peu délicate. Idéalement, choisissez une photo qui a un fond uni blanc ou gris. Les fonds froids finissent par se mélanger avec les bords. Bon, maintenant, maintenant, nous allons sortir sont découpés. Nous avons quelques options ici, les bâtards de choisir un nouveau calque avec un masque de calque. Mais ça le fait. Au lieu de couper le tout, il copiera la photo originale et lui appliquera un masque. Cette masse cachera l'arrière-plan et tout ce que nous avons fait. C' est la meilleure option parce que si nous remarquons quelque chose d'autre et que nous voulons apporter des changements, nous serons en mesure de le faire. Avec la nouvelle option de calque que nous voulons, l'arrière-plan sera parti pour toujours. A l'intérieur des couches, vous verrez. En outre, la photo originale est toujours là dans son ci-dessous, mais désactivée, donc elle n'est pas visible. Ça dérange notre copie avec le masque. Appliquez à ce que Sylar noir et blanc Il est le masque ou obtient La dernière étape est de sauvegarder notre fichier. abord, sauvegardons Ceci est un fichier de boutique photo pour tous les futurs toxicomanes. Le reste de la conception fera dans la figue MMA. Le fichier Photoshopped ne peut pas être important dans Sigma, donc nous devons utiliser le fichier PNG. PNG est celui qui gardera la transparence de notre chat à l'extérieur. J pack ne va pas fonctionner parce qu'il va remplir l'arrière-plan avec un col blanc. Lorsque nous exportons ceci en PNG, toute couche qui est qu'il ne le fait pas ne sera pas incluse dans l'exportation. Vous n'avez donc pas besoin de supprimer ces calques. Cachez-le. En outre, je voudrais recadrer l'espace supplémentaire, sélectionner le rognage et faire glisser l'adresse, aller à l'exportation de fichiers et exportateurs rapides. PNG. Maintenant, nous pouvons placer cette image dans la fig ma et choisir n'importe quel fond que nous voulons. Et c'est comme ça que vous faites des découpes dans la boutique photo 183. Photoshop : Stick : le cours d'inscription: Maintenant, je vais montrer comment couper Lee. Une petite partie d'une image est toujours la partie importante est de choisir la bonne image. Vous pouvez le faire avec n'importe quelle photo que vous pouvez sortir, se termine de l'objet comme des coins de table. Les mains, les jambes avaient des branches. Et donc tout objet qui a une pointe proéminente d'abord dans ce processus pour définir le conteneur de l'image. Le cadre dans lequel il est assis parce que vous avez quelque chose hors de ce cadre. Si vous allez utiliser la photo comme une photo d'arrière-plan complète que l'adresse hors de votre cadre, sont en fait pas visibles. Tu ne peux rien sortir. Je vais travailler sur cette image. Dans ce tutoriel. J' ai lié la même image afin que vous puissiez suivre. On peut facilement sortir cette année-là du quai. Cela signifie que notre cadre doit avoir une bordure supérieure s'il s'étire de haut en bas de l' écran que cette image ne fonctionnera pas du tout. Mais si j'utilise un cadre comme un cercle, par exemple, je peux sortir l'année sans problème. Alors nous allons d'abord encadrer la photo, tout comme nous le faisons fig Maintenant, nous allons créer un masque. Nous allons utiliser la même requête que nous l'avons fait précédemment dans la méthode de découpe. Mais cette fois, au lieu de choisir l'obscurité à partir de l'arrière-plan, nous allons sélectionner une partie du cercle de ce chien sur le marché. Tout droit, Cliquez dessus et sélectionnez la salle de marché elliptique. C' est un autre mot. Sélectionnez. Oh, je ne sais même pas ce que veut dire Marquis. Pas en traînant. Sélectionnez la face de la station d'accueil. Maintenez la touche Maj pendant que vous le faites afin que vous puissiez dessiner un cercle parfait pour obtenir une meilleure poignée. Vous pouvez appuyer sur la barre d'espace pour déplacer la sélection. Vous n'avez pas besoin d'obtenir ça parfaitement maintenant. Nous pouvons toujours redimensionner et repositionner l'image du chien. Plus tard, comme nous l'avons fait la dernière fois. Cliquez, sélectionnez et masquez ici. Vous êtes déjà familier avec cet éditeur de masques, mais nous n'allons pas ajouter un entendre quoi que ce soit. En fait, parce qu'on a besoin d'un masque de cercle parfait. Donc, tout de suite, allez aux options de sortie et sélectionnez un nouveau calque avec un masque de calque comme nous l'avons fait la dernière fois. Maintenant, nous avons le même arrangement que dans la méthode de découpe. Si vous avez besoin de repositionner ou de redimensionner l'image à l'intérieur. Nous pouvons le faire de la même manière, comme nous le faisons dans la Fig MMA. Sélectionnez d'abord l'outil Déplacer. Par défaut, le groupe de masse est verrouillé de sorte que vous pouvez déplacer l'image séparément. C' est déplacer un groupe entier pour déplacer juste l'image ou juste une masse rapide sur ce lien. Je peux l'entendre, contrairement à l'image du masque, et maintenant vous pouvez les déplacer séparément en sélectionnant soit l'image soit le masque dans la liste des calques. Vous remarquerez que le masque dans Photoshop est un espace défini, tel qu'il a été défini à l'origine. C' est pourquoi nous avons ces bits supplémentaires qui apparaissent ici. Si vous vous retrouvez avec ces bits supplémentaires après avoir déplacé votre image, vous pouvez simplement recadrer cela avec un bout recadré. Au fait, Photoshopped a cet orteil très main appelé History Panel. Au lieu de défaire sur et sur, vous pouvez aller directement au personnel que vous voulez subir. J' adore cet outil d'histoire, et Photoshopped rend le défait beaucoup plus facile. Ok, donc repositionner l'image à l'intérieur est facile. Il suffit de suivre les dommages autour, mais pour redimensionner l'image de sorte que le calque d'image, puis allez adit et transformer libre. Maintenant, vous pouvez saisir les poignées et le redimensionner comme vous le souhaitez. Maintenez, Shift, orteil bloque le rapport ici dans ma tête. J' imagine quelle partie je vais sortir pour pouvoir positionner l'image correctement. Maintenant que nous avons préparé notre ordinateur central dans lequel se trouve notre image, nous pouvons maintenant nous en tenir cette année-là. Pour ce faire, nous allons essentiellement découper un morceau des chiens ici comme une couche séparée et le placer sur le dessus de cette couche existante. Donc, le clic droit sur ce groupe de masse et dupliquez le calque. Maintenant à droite, cliquez sur le masque lui-même. Pas le calque entier, mais juste un masque et cliquez sur dilater le masque de calque. Maintenant, nous avons l'image complète sur le dessus. Si nous découpons un morceau de l'année de cette image complète et retirons le reste, nous obtiendrons l'effet de bâton exact voudrait. Donc, pour ce faire, nous faisons la méthode habituelle de découpe, tout comme nous l'avons fait dans la leçon précédente. Prenez un outil de sélection rapide. Définissez le bon pinceau parmi les options à partir d'ici, assurez-vous que vous avez sélectionné le pinceau avec le signe plus, pas le moins. Réglez la dureté à 100% et réglez le côté droit afin que vous puissiez sélectionner cette année facilement tourner. Ils le transmettront vers le bas pour voir le bord du cadre et sélectionneront en conséquence. Vous pouvez sélectionner plus de l'image en bas parce que cela ne va pas nous faire du mal. Il va juste être assis sur la photo existante. Quoi qu'il en soit. Ça a l'air bien. Maintenant, cliquez, sélectionnez et masquez. On voit les deux couches. Voici la couche de cadre, et juste un an plus tard, modifions l'orteil de fond blanc pour l'instant afin que nous puissions affiner le bord de l'année. Rappelez-vous comment affiner les badges, Sélectionnez le bord affiner et passez sur l'adresse. Ou il ajoute, dans n'importe quel cheveu manquant ou tout autre pixel manquant. Comme je l'ai déjà mentionné avec cette histoire, nous demandons à Photoshopped de regarder au-delà de notre sélection et de détecter les pixels manquants. Vous n'avez pas à affiner la base de l'année. Il va fusionner parfaitement avec l'image d'arrière-plan, Maintenant, allez aux paramètres de sortie et sélectionnez un nouveau calque avec un masque de calque et appuyez sur OK, là. C' est notre année qui sort. Mettons un fond blanc sur cela afin que nous puissions mieux voir les résultats. Créez un nouveau calque et cliquez sur la nouvelle sensation. Je peux entendre sélectionner la couleur unie et choisir le blanc. Maintenant, faites glisser ce calque en dessous de tout. Si vous allez utiliser un collier différent dans vos designs réels, vous pouvez doubler rapidement sur le terrain et changer l'appelant afin que vous puissiez le visualiser ici dans un spectacle photo avant d'exporter le résultat final. Par exemple, quand je mets ceci sur une couleur foncée, nous pouvons remarquer qu'il y a un peu d'éblouissement supplémentaire derrière l'oreille. Dommage que je n'ai pas vérifié celui-ci pour affiner la sélection, mais nous pouvons encore faire un peu de travail là-dessus. Même après que le masque a été appliqué, le masque est toujours édité à base de plantes. Si nous zoomons sur le repaire du masque, vous verrez que nous avons des parties en noir et blanc. Les parties blanches sont une partie visible du masque, et les parties noires sont cachées partie. C' est pourquoi la partie blanche a une forme hors de l'air. Si nous peignons largement sur cette masse, nous montrerons plus sur l'image. Permettez-moi de démontrer si je sélectionne un outil de brosse ordinaire et dessine dessus avec de la peinture blanche. Il va montrer plus de l'image, et si je conduisais avec une peinture noire dessus, il cachera tout ce qui est déjà visible pour basculer entre le pinceau blanc et le pinceau noir. Cliquez sur cette icône en forme de flèche en haut de ces cases en noir et blanc. Tout ce qui est sur le dessus est la couleur actuelle du pinceau. Il y a aussi un raccourci. Vous pouvez appuyer sur X sur votre clavier, et ensuite on basculera entre les deux. Ok, maintenant on peut enlever l'éblouissement supplémentaire derrière l'oreille. Je vais ajuster le pinceau pour le rendre lisse et plume, donc je ne crée pas de bords durs. Dans ce cas, je vais diminuer complètement la dureté et même diminuer leur passage à 50%. De cette façon, je vais brosser les pièces et d'une manière lisse et contrôlée, et c'est un meilleur résultat. Il peut ne pas être idéal sur un fond noir, mais fonctionne assez rapidement pour affiner cela pendant le visage masquant. Et n'oubliez pas de vérifier la vue sur le fond noir. Si vous envisagez de l'utiliser sur des arrière-plans sombres, la dernière étape est d'exporter les dégâts que nous allons exporter en PNG avec le fond transparent où vous avez plus de liberté de choisir des arrière-plans directement dans la figue mongering réelle processus de conception. Masquer l'arrière-plan, découper tout espace supplémentaire et sous exportation de fichier, cliquez sur Exportateurs rapides PNG. Et là, vous l'avez. Cela peut maintenant être important à l'intérieur de Sigma et l'utiliser sur différents arrière-plans.