Maîtrise de la conception créative d'UX/UI avec Figma

1. Introduction du cours: Bonjour, les gars. Je m'appelle Ran SiBlhh, je suis designer XI, artiste conceptuel, codeur créatif et graphiste, et bien d'autres choses encore J'ai 20 ans d' expérience dans le domaine auprès de nombreux clients. J'ai créé ce cours, le Creative UHI Design Master with FIGMA, pour vous aider à transformer vos idées de design en expériences numériques conviviales Dans ce cours complet, nous irons au-delà des notions de base et vous guiderons tout au long du processus de conception, du concept initial à un PolGPTOtype Vous maîtriserez Figma, l'outil de pointe du secteur, couvre les briefs créatifs, les recherches approfondies, l'analyse des concurrents, le mood board, la stratégie de contenu et les cartes de navigation Vous vous plongerez ensuite compétences pratiques telles que l'encadrement métallique, la mise en page, le travail avec la typographie et Blocage de contenu et même conception dynamique et interaction prêtes à l'emploi. Apprenez à recevoir efficacement des commentaires et à les présenter en toute confiance dans votre travail, et à créer guide de style robuste pour une cohérence professionnelle Pour améliorer encore votre apprentissage, je vous fournirai des fichiers HTML détaillés équipés pour ce cours afin de vous aider à obtenir le plus d' informations possible, ainsi que des questionnaires pour tester vos connaissances à chaque étape Préparez-vous à libérer votre potentiel créatif et créer un design qui se démarque vraiment. 2. Ce qui m'influence: R Pour les designers, reconnaître l'importance de l'influence va au-delà leurs propres créations pour englober le vaste paysage des designs existants En observant et en analysant le travail des autres, il ne s'agit pas de le reproduire, mais de discerner le principe influent sous-jacent qui rend ces conceptions efficaces ou efficaces En déconstruisant une interface réussie, un concepteur peut identifier les indices subtils modèles intuitifs et des techniques de persuasion qui guident le comportement des utilisateurs, leur permettant d'internaliser ces informations et de les appliquer à leurs propres projets. Les designers critiques et moins efficaces révèlent les pièges dans les domaines où l'influence a été mal appliquée ou négligée apprentissage discontinu issu de la conscience collective du design renforce la capacité du concepteur à exercer son influence de manière intentionnelle et éthique, aboutissant finalement à plus percutante et Jetons un coup d'œil à certains de mes influenceurs. Le portfolio de Colin Moy est un excellent exemple à suivre. Est spécial en raison de son interface utilisateur Ux hautement interactive et engageante. une des caractéristiques les plus remarquables est l'utilisation créative des yeux qui épelent son nom dans la section des héros Ces yeux ne sont pas seulement une surprise visuelle , ils ont également une fonction fonctionnelle. Cliquez dessus, activez-les en mode clair et foncé, Tuggle et déclenchez une animation où les yeux suivent le visiteur Invitant subtilement à une exploration plus approfondie du site. Cette stratégie intelligente combinée à un style de pool de jeu cohérent, où O est dans la navigation, par exemple sur portfolio et le contact, sont cliquables pour révéler plus d'informations, contribuent à une expérience utilisateur unique et mémorable qui fidélise les visiteurs et les encourage à approfondir son travail Autre site de Justin Solly, le design se distingue par son interactivité exceptionnelle, mélange visuel dynamique d'esthétique, son mélange visuel dynamique d'esthétique, qui lui ont valu les distinctions de site du mois et de site primé du Le site propose une animation interactive captivante , un en-tête interactif et WebGL, une interaction avec la souris qui créent navigation très engageante et immersive L'interaction dynamique des éléments permet à l' utilisateur de rester activement impliqué Il utilise le menu Brutal Style avec une touche ludique lorsque vous le survolez Ce menu présente des résumés de projets, accompagnés d'un effet d'écran de latence caractéristique de Windows, ajoutant un élément mémorable et interactif à la navigation Le design intègre une évolution continue de la typographie couleur et de l'animation, aboutissant à une expérience qui donne envie de jouer dans un jeu Cela est encore renforcé par une transition de page unique et des études de cas horizontales offrant une nouvelle approche de l'affichage du contenu. Autre site également créé par Carlos Carr le site est conçu en mettant l'accent sur le contenu dynamique et le système de conception, démontrant une compréhension avancée de la manière dont expériences numériques peuvent s'adapter et évoluer Cela suggère une approche avant-gardiste du développement et de la conception Web. rupture avec les structures de portefeuille traditionnelles, le site Web agit comme une archive interactive où chaque œuvre est traitée comme une entité distincte plutôt que d'être regroupée par thème. La navigation est gérée de manière unique biais d'une barre de recherche et de balises spécifiques, qui redéfinissent fondamentalement la façon dont l'utilisateur interagit avec le portfolio en inversant la navigation habituelle L'utilisation de plateformes telles que Webflow et Spline indique une conception graphique et animée sophistiquée Cette combinaison se traduit probablement par une expérience visuelle riche et très engageante pour les visiteurs. Autre site intéressant de l'agence Milly, le design du site est considéré comme spécial en raison de son expérience utilisateur hautement interactive et unique, qui lui a valu des reconnaissances telles que les Awards Mobile Excellence Et figurez comme l'un des flux Web , dix exemples de portefeuilles standard. Le site propose une expérience distinctive et engageante, mise en valeur par un mode X ray et un code personnalisé complet. Cet élément contribue à une interaction dynamique et mémorable pour les visiteurs. Les accords issus de plateformes tels que les mots soulignent le haut niveau de sa conception et de son développement, signalant ainsi une UXI innovante et percutante La conception intègre des mises en page intéressantes et de subtils détails personnalisés, ce indique une approche méticuleuse et créative qui va au-delà de la structure conventionnelle d'un site Web C'en est un sur mon site préféré, qui s'appelle Flakes. Il est très apprécié et considéré comme spécial en raison de son mélange innovant de minimalisme et de maximalisme, interactivité exceptionnelle et de son exécution technique sophistiquée Il a reçu de nombreux prix et est présenté par une plateforme de design prestigieuse, notamment des prix. Le site équilibre magistralement une base minimaliste avec des éléments maximalistes Il utilise une grande police variable d'animation, une palette de couleurs éclatante mais non conventionnelle, puis pour recréer des détails, une expérience visuelle rapide et riche sans Il propose une animation complète basée sur le défilement, éléments complexes en trois D, dont un logo en trois D exigeant, et transition fluide grâce des technologies modernes telles que nm point Gs, Vlt et Web DO interactions subt, telles que la transformation du curseur en source de lumière sur un ordinateur de bureau améliorent encore l'engagement des utilisateurs En rupture avec les menus traditionnels de plusieurs pages, play.com propose un parcours fluide sur une seule page Les projets sont présentés via le screencast de Concess, permettant aux visiteurs de saisir rapidement le travail sans se laisser submerger par un contenu excessif, en privilégiant L'un de mes deux préférés est un pixel étrange. Le site a fortement mis l'accent sur l'utilisation de l'animation pour créer un design visuellement époustouflant et innovant. Cette focalisation sur le mouvement améliore l'engagement et ajoute des couches dynamiques à l'expérience utilisateur. Les pixels de tranchée font appel à une utilisation créative de la couleur, souvent avec des schémas de contraste élevés avec des accents éclatants, tels qu'une touche de jaune sur une base blanche et noire Ceci est combiné à une utilisation stratégique de grandes typographies en gras pour faire forte impression et améliorer l'identité visuelle Le design trouve souvent un équilibre entre minimalisme et impact Il repose sur des lignes épurées, des mises en page fracturées et une palette de couleurs limitée pour obtenir French Pixels se concentre sur la création d' une expérience numérique qui va au-delà de la simple fonctionnalité, mais qui cherche à susciter l'émotion dans chaque projet Leur portfolio présente divers travaux notamment la conception d'applications Web et de commerce électronique Le design du curseur est l'un de mes meilleurs éléments de ce site Web. Cela rend l'interactivité très belle et très engageante Ensemble, ces éléments contribuent à la répétition étrange des pixels pour créer un design web original et mémorable. Notre dernier sur la liste est Dennis Snellenberg. Dennis a reçu de nombreuses récompenses, notamment la mention de Rona Bal et le site du jour Cette reconnaissance souligne la haute qualité, l' innovation et l'impact de la conception et du développement de ce site Web Ses créations se distinguent par leur animation necro subtile mais sophistiquée, transitions fluides et leur élément interactif attrayant Ces détails contribuent de manière significative à peaufiner et immerger l'expérience utilisateur, donnant au site une apparence dynamique et réactive. En tant que designer et développeur indépendant, Dennis Kraft est un site web évolutif de Scratch qui s'intègre parfaitement au design Cette approche holistique garantit que fonctionnalité et l'esthétique sont parfaitement intégrées, ce qui se traduit par un projet d'une grande efficacité et d'une grande qualité. Sa maîtrise des outils de développement Web modernes tels que Webflow, HRB CMS bibliothèques d'animation telles que Framer motion et GSap lui permet de quitter expérience visuellement riche et hautement interactive qui repousse Essentiellement, le site Web de Dennis est spécial car il incarne la fusion harmonisée de compétences esthétiques, brillantes et techniques et d' une compréhension approfondie de l' utilisateur et de la production, toutes validées par la reconnaissance de l' Donc, comme vous, les gars, voici la somme de mes influenceurs. Vous devez toujours trouver les personnes qui vous influencent et essayer de vous tenir au courant de toutes les nouveautés dans le domaine. C'est le moyen de vous assurer que vous êtes sur une page en tant que designer. 3. En savoir plus sur les briefs créatifs: Le cahier des charges est un document important pour notre processus. Le cahier des charges est un document important pour notre processus. Car avec cela, nous déterminerons quels sont les objectifs du projet. Il est important de recueillir plus d'informations possible auprès du client, car ces informations nous aideront à définir l'objectif de notre opportunité de conception de produit et les risques que nous pouvons avoir dans notre conception Pour notre projet, nous allons créer une marque Tikocden. Nous allons très bien lire le brief que nous recevons du client et comprendre tout ce qu' il souhaite pour son design. Comme vous avez vu toutes les informations ici, comme l'essence de la marque, les objectifs visent à créer un site Web immersif à frappe visuelle qui intègre l'identité de TKUBND Comme vous le voyez également, le public cible, la direction du design, la palette de couleurs, la typographie, tous les éléments dont nous avons besoin pour la conception de notre site Web Il s'agit d'un autre type de brief créatif que j'ai créé moi-même. Il s'agit de votre propre brief créatif que vous pouvez envoyer à votre client pour vous représenter ou représenter votre travail. Ce n'est pas nécessaire, mais c'est quelque chose qu'ils devraient envisager. Comme vous l'avez vu, nous avons antleduction, un exemple de question comme pourquoi nous engager ? Le processus de conception de sites Web, ce que nous donnons comme exemple, comme la compréhension de la marque , du concept, de l'évaluation et de la révision, ce nos clients ont à dire si vous avez déjà des commentaires de clients sur vos travaux antérieurs, le prix de chacune de vos œuvres. Il s'agit d'un autre brief créatif que j'ai créé moi-même également avec le fichier HTML. Vous pouvez le voir, c'est plus détaillé. Il possède tous les éléments nécessaires à la compréhension d'un brief créatif. Le site Web indique le public cible, l'identité de la marque, les exigences en matière de contenu, les spécifications techniques, calendrier et les livrables Vous voyez que toutes les questions nécessaires peuvent être posées. Si vous avez reçu un brief de votre client et n'avez aucune question à laquelle vous devez répondre, vous pouvez créer un autre brief de votre part et lui envoyer toutes les questions et les informations dont vous avez besoin de plus pour recueillir auprès de lui. Quel est l'objectif principal site Web de votre marque de vêtements ? Quels sont les trois principaux concurrents sur votre marché ? Qu'est-ce qui rend votre marque de vêtements unique par rapport à la concurrence ? Quel est votre public cible principal, votre âge, votre sexe, vos centres d'intérêt et votre niveau de revenu ? C'est ici qu'il va remplir. Comme vous l'avez vu, je viens de créer un fichier HTML, mais celui-ci doit être un fichier PDF pour que le client puisse le remplir. Ici, le besoin de contenu est le besoin d'intégration. Vous envoyez uniquement la question que vous n'avez pas reçue dans le brief créatif de votre client. Ne demandez pas les mêmes réponses qu'il vous a déjà données. Après avoir lu le brief, vous devez toujours vous aligner sur l'objectif du client. Ensuite, vous continuez à communiquer avec le client en lui envoyant des concepts et en recueillant ses propres commentaires. Bref, le brief est le moyen de poser la bonne question. Nous devons d'abord comprendre qui nous sommes en tant que designers et qui est notre client. Nous sommes designers pour l'utilisateur ou nous concevons pour nous-mêmes. C'est une question importante à se poser dans le cadre de chaque projet. Une fois que nous avons compris qui nous sommes en tant que concepteurs, pour ce projet, nous devons savoir que le client attend de nous que nous atteignions ses buts et objectifs. Ces objectifs peuvent être de vendre un produit, de développer votre activité, d' embaucher du nouveau personnel, de vous faire connaître ou d' expliquer vos services. Et ils peuvent même être tous réunis sur le même site Web informatif. Notre objectif en tant que designer est donc d'atteindre ces objectifs, et pour cela, nous devons nous aligner sur la marque, ses valeurs et sur sa façon de communiquer. Revenons au brief. Le brief est un document qui permettra d'obtenir des informations sur les clients. Ces informations seront utilisées pour comprendre le projet, la marque pour laquelle nous travaillons, le secteur dans lequel la marque est située et les produits liés au projet. Telles sont certaines des questions que nous pouvons poser dans le mémoire. Qu'espérez-vous réaliser avec le site Web ? Quelle est l'histoire de la marque ? Quel est votre différentiel ? Quelle est votre position sur le marché ? Y a-t-il ou non des limites en termes de budget et de temps ? Quel est votre public cible ? Nous l'avons déjà vu. Quels sont vos serveurs et produits ? La réponse à notre question peut venir d'une autre manière. Nous pouvons les obtenir par le biais d'une réunion, d'un appel vidéo, d'un document écrit ou même dans le manuel de marque lui-même. Il y a peut-être des réponses à nos questions. Nous devons savoir que toutes les réponses ne viendront pas de première main. C'est pourquoi il est important de se poser la bonne question. Cela nous donnera des informations pertinentes pour notre produit. Quelques recommandations à garder à l'esprit au moment où nous passerons à une brève phase et que nous souhaitons obtenir la meilleure réponse de la part des clients, la question que nous posons peut nous offrir différentes possibilités créatives. Lorsque nous demandons ce que nous attendons vraiment, c'est d'élargir le champ d' action de notre projet. Nous ne voulons pas le limiter. N'ayez pas peur de poser toutes les questions, nous nous donnons des informations précieuses pour créer notre produit. Voici quelques questions que vous pouvez également générer pour recevoir plus d' informations de la part de votre client. Qu'est-ce qui les a inspirés ? Si la marque était une personne, comment se comporterait-elle ? Ont-ils un style qui les identifie ? Il s'agit de la première phase du lancement de notre produit. Il est important de bien lire le brief créatif, prendre en compte les éléments clés et tout ce qui vous permet de vous aligner sur l'objectif de votre client. 4. Apprendre la recherche et la concurrence: Le processus d' investigation et de découverte est essentiel pour créer un projet réussi, car il nous donne beaucoup d'informations sur le secteur dans lequel nous allons développer le projet. Le processus d' investigation et de découverte est essentiel pour créer un projet réussi, car il nous donne beaucoup d'informations sur le secteur dans lequel nous allons développer le projet. En plus de nous montrer des opportunités créatives, le risque est que le projet puisse avoir entre autres choses. Je pense que c'est l'un des processus les plus importants je fais en tant que designer. Voyons un peu plus en détail. Au cours de cette étape, nous menons notre propre processus d'enquête pour trouver les informations pertinentes, opportunités et les risques que le projet peut présenter Il est important de nous aligner sur le client dans ce processus afin de nous assurer que nous comprenons le projet de la même manière, l'objectif à atteindre en tant que design, à savoir créer un site Web informatif d' une marque TCO où les gens peuvent découvrir une collection de vêtements raffinés de manière conviviale et intéressante Opportunité de design. Nous explorerons les différents effets sur les images afin de créer une expérience plus interactive. Nous voulons également présenter des moyens intéressants de filtrer le projet, qui soient également différents de la catégorie traditionnelle. Recommandation technologique, nous devons avoir un gestionnaire de contenu, une optimisation des images, un site Web optimisé pour les appareils mobiles, animations et des transitions conçues pour les appareils mobiles. Considérations relatives à la marque. Une grande partie de la proposition graphique du site Web sera basée sur l'image qui a créé le portfolio. autre côté, nous avons du mal à communiquer les différents aspects de la marque. Observation à propos de l'utilisateur. Il s'agit de jeunes ayant accès à Internet haut débit pour naviguer sur le site. Une grande partie du trafic qui atteindra la page se fera via Instagram. C'est pourquoi plus de 50 % des utilisateurs verront la version mobile du site Web. Les personnes qui visiteront le site sont des personnes sensibles au design, c'est pourquoi nous prendrons grand soin des détails de la page. Le projet peut également comporter des risques à prendre en compte. Dans ce cas, les navigations et les fonctionnalités de base de la page peuvent être difficiles à utiliser Charge visuelle élevée par rapport au nombre d'images, manque d'informations sur le site du projet une fois que celui-ci est déjà en ligne. Quelle est la fonction de la carte de navigation ? Définissez la dernière section qui constituera le site Web. Comprenez les flux de navigation entre les sections du site. Comprenez le type de contenu que chaque section peut contenir. Au début, nous devons examiner certains des autres concurrents qui ont un excellent design de site Web. Comme vous pouvez le voir ici, comme ce site de Gucci, il est très riche en images, de très bonnes qualités L'expérience est tellement simple et minimaliste. Zara est également l'un des sites Web importants à considérer. Le site est également si simple. Il est facile de s'y retrouver et de le comprendre. Vous voyez la structure du site où vous pouvez trouver toutes les informations nécessaires. Une étape importante que je fais toujours est également de consulter les avis de chaque site que j'utilise. Ici, vous pouvez en apprendre davantage sur les avantages et les inconvénients de ce site Web. J'ai bien lu les critiques négatives des gens pour comprendre quelles erreurs je ne dois pas commettre dans la conception de mon site Web. Dans mon processus, il est très important d'y jeter un coup d'œil et de bien l' étudier. J'ai lu tous les mauvais commentaires et les bons commentaires et je comprends quelle est la faiblesse de ce site. Comme vous le voyez ici, sur un support, nous pouvons lire une étude de cas sur le site Web de Zara, sur façon dont l'esthétique du design peut influencer l'intention d'achat Comme vous pouvez le voir ici, j'ai un PDF très détaillé sur le site Web. Comme vous pouvez le constater, la taille de la thèse sur le style en fonction du risque de vitesse du site est la conversion Vous devez donc toujours trouver un équilibre entre l' impact du sacrifice et la convivialité et l'accessibilité pour le design. Comme nous l'avons déjà dit, il est très important que le site ait un excellent design, mais aussi qu'il soit très facile à naviguer et à lire. Les obstacles à la navigation perturbent le flux de commerce électronique standard . Une fonctionnalité de recherche efficace érode absence d'avis clients diminue la confiance et perturbe le parcours d'achat C'est donc quelque chose que vous pouvez envisager. Si votre site est du commerce électronique, il sera très efficace de mettre une section pour les avis de votre client. Voici un fichier HTML que j'ai créé pour vous permettre mieux comprendre les éléments de support et d'amélioration de votre site Web. Ici, vous pouvez comprendre tout ce qu'il toujours prendre en compte pour créer un excellent site Web. Le schéma de couleurs, la typographie, l'imagerie et les graphiques, les directives de typographie, l' accessibilité, l'exemple de contraste des couleurs Les sections de sécurité et de maintenance ne sont pas destinées à vous en tant que concepteur, mais au développeur. Vous pouvez lire toutes ces informations ici pour en savoir plus sur la conception du site Web et sur la manière dont il devrait être efficace. Nous nous attardons sur chacun de ces éléments et nous les comprenons très bien. Chaque étape que vous effectuez avant de commencer votre conception vous donne une feuille de route et facilite grandement votre travail. Enfin, cette fois-ci, les outils que je recommande d' utiliser pour la carte de navigation, Mero Whimsico et Il est important de comprendre que la carte de navigation est le point de départ pour organiser notre projet. Nous en verrons plus dans la prochaine leçon. 5. Rassembler des références pour le moodboard: Dans cette liste, nous parlerons de la recherche d'inspiration et de références pour notre projet Il s'agit d'une étape très importante avant de commencer qui nous permettra de réfléchir à différentes idées pour rendre notre projet plus intéressant. L'inspiration peut venir de n'importe où, mais avec un processus clair, il sera beaucoup plus facile de trouver une idée intéressante que nous pourrons utiliser ultérieurement dans notre produit. Dans ce processus de conception, nous nous assurons de créer le moodboard où nous rassemblons toutes les références et inspirations que nous trouvons pour d'autres projets sur le Web, dans les livres ou même dans les expositions d'art. De cette façon, nous nous assurons de créer quelque chose qui communique ce que nous voulons et qui se démarque des autres contenus privés. Pour commencer la recherche de références, nous aimerions commencer par rechercher des projets ou des entreprises appartenant à la même catégorie que notre client. Par exemple, si notre client est une entreprise qui produit des lunettes, nous pouvons rechercher une entreprise similaire dans la région. entreprises qui sont des concurrents directs de nos clients ou des entreprises situées dans d'autres pays qui entrent dans la même catégorie. De cette façon, nous nous assurons de savoir quelles sont les idées intéressantes de la catégorie, comment les autres entreprises communiquent et ce que nous devons éviter. Pour nous assurer que nous créons un projet qui se démarque des autres. Ensuite, nous pouvons étendre notre recherche à des catégories similaires à notre projet. Par exemple, la marque Tiko sera un site Web. L'utilisation d'images sera très pertinente. Nous pourrons donc rechercher un projet dans lequel ils utilisent des images. Par exemple, en architecture, où chaque jour nous recherchons un projet qui nous intéresse. Ensuite, peut-être en train d'examiner un projet d'une autre catégorie ou d'autres industries. Trouvons des idées. Comme vous pouvez le voir ici, ce site Web s'appelle Word. Vous pouvez trouver quelques exemples que vous pouvez parcourir et trouver de nombreuses idées. C'est l'un des sites qui utilisent des images pour leur propre création. Il y en a beaucoup que vous pouvez consulter partout. Cela ne fait pas partie de notre catégorie, mais j'ai trouvé qu'il était important de l'examiner car je veux connaître un nouveau Creative ID. Jetons un coup d'œil à l'un des exemples présentés ici. Comme vous l'avez vu, ce site Web utilise une belle mise en page d'images. Cela peut être une idée pour notre site Web. Je vais donc en savoir plus sur son fonctionnement et sa navigation. Comme vous l'avez vu, le site Web est très beau, consultez ces sites Web pour avoir des idées sur des exemples d'interactivité Ici, l' interaction du curseur est très belle en affichant de nombreuses images pendant que vous faites glisser Un autre style à prendre également en compte est le style du noir et blanc. Il a beaucoup de graphisme, mais il repose principalement sur les formes géométriques et la typographie L'interactivité est quelque chose spécial que je n'ai jamais vu auparavant Lorsque nous cliquons ici, vous voyez l'élément carré apparaître avec le curseur. Le style typographique et les lignes le rendent si spécial et très différent des autres sites Web C'est quelque chose que nous pouvons envisager pour notre site Web. Nous pouvons le créer d' une manière différente. De toute façon, je ne pense pas que je vais choisir quelque chose comme eux parce que je ne peux même pas créer plus de design sur une marque de vêtements, mais avec un parcours différent. Par exemple, je vais créer une marque urbaine de style Switch, je peux envisager quelque chose comme ça. Le site awa.com est également une excellente source d'inspiration. Ce site web avec beaucoup d' expérience et de reconnaissance , publie et récompense des projets numériques depuis de nombreuses années. Je recommande vivement ce site Web pour trouver des projets numériques, un peu plus expérimentaux et qui sortent d'un design de site Web traditionnel. Un autre site que j'ai trouvé très important aussi c'est Ana. Il ne s'agit pas d'un site Web axé sur le design ou d'un projet numérique, qu'il permette aux utilisateurs de créer des tableaux de bord et de télécharger des images et des liens sur n'importe quel sujet Similaire à Pintors et il devient très populaire de devient très populaire Il comporte de nombreuses catégories que vous pouvez parcourir et apprendre en tant que professionnel. Comme cet exemple d' illustration générale, il possède un beau design que vous pouvez intégrer à vos œuvres. Ce site Web pieux trouve constamment une nouvelle page Web où vous pouvez rechercher de nouvelles références et de nouvelles sources d'inspiration Parce que nous pouvons facilement voir nouvelles idées en mouvement et en animation. Il existe de nombreuses références à vérifier et vous donner de bonnes idées. Comme celui-ci, lorsque je clique sur un exemple, donnez-moi toutes les informations pour la conception du site Web, les éléments qu'ils utilisent dans la conception de leur site Web, comme le fonk, le framework , l'hébergement, le style, etc. Et aussi, en bas, vous trouverez un autre site similaire. Continuez à vérifier, à apprendre et à recueillir plus d'informations et références jusqu'à ce que vous trouviez ce qui correspond à l'idée qui vous vient à l'esprit. Load More est très intéressant car il est axé sur le projet pour les appareils mobiles et adopte une approche de conception très expérimentale Il semble important de créer des catégories pour nos références car cela sera beaucoup plus utile lors de la conception. Par exemple, pour notre projet, peut orienter la décision que nous prenons concernant la typographie Comme vous pouvez le voir dans cet exemple, je vais choisir quelque chose comme son ser. Il avait l'air moderne et propre. Je peux également envisager un autre type de typographie. Cela a plus de formes géométriques sur les bords. La faute de frappe est très belle, mais je ne pense pas qu'elle ne corresponde pas à l'identité de la marque C'est une typographie très belle et propre que je peux également considérer Nous examinons ici certaines des couleurs que nous pouvons utiliser sur notre site Web. Les couleurs sont très intéressantes. Je ne veux pas utiliser plus de cinq couleurs sur ce site, et il se peut que je choisisse quelques degrés pour chaque couleur. Cette couleur est là, le corail rouge et la forêt verte sont très beaux. Je pense déjà que je pourrais envisager cela pour mon produit. Ici, nous pouvons examiner une partie de l'interaction entre la mise en page des images. C'est très important et cela me donne déjà une idée de l' effet de parallaxe Comment pouvons-nous filtrer le contenu que nous allons avoir sur notre site Web. Nous pouvons filtrer le contenu par couleur ou par catégorie. J'ai également trouvé des idées que je pourrais choisir ou non, je ne suis toujours pas sûre. Je présente ici toutes les références pour la conception de mon site Web à vérifier par catégorie. J'ai mis uniquement la faute de frappe, les couleurs, les images, les graphismes, les liens et l'interaction Tout cet élément servira de projet de feuille de route pour ma création. Je chercherai toujours des idées ici et reviendrai à la référence pour développer mon imagination. Maintenant, tout cela est pour notre référence. Nous verrons comment créer un moodboard et comment commencer à réfléchir à des idées. Continuons dans le moins suivant. 6. En savoir plus sur les stratégies et l'architecture: Dans Stratégie et architecture, c'est la clé pour comprendre le contenu de notre site Web. C'est pourquoi nous allons l' organiser de manière claire afin que nos utilisateurs consomment correctement. Deux disciplines sont responsables de ce contenu, la stratégie de contenu et l'architecture de l' information. C'est pourquoi nous voulons en parler un peu. Maintenant, commençons. Pour les comprendre, il faut savoir que chacun de ces problèmes résout pour sa part, la stratégie de contenu. Alors, la question du contenu devons-nous concevoir pour un site Web ? Un conseil à garder à l'esprit en matière de stratégie de contenu. En tant que designer, nous devons alléger le plus possible le fardeau du client Cela signifie un support et le client avec le contenu. Souvent, notre client connaît très bien notre produit ou service, mais la plupart du temps, vous n'avez pas le temps de le quitter spécifiquement pour nous et votre site Web. C'est pourquoi ici, en tant que designer, nous allons entrer et évaluer le contenu pour nous aider à démarrer et à intégrer notre projet Nous allons créer un contenu initial qui sera un espace réservé, afin d'avoir plus tard une conversation avec notre client Et nous pouvons l'affiner avec lui. L'architecture de l'information a résolu la question suivante : comment devons-nous structurer le contenu du site Web ? Pour commencer par la phase de stratégie de contenu, d'architecture de l'information, nous devons très bien comprendre notre projet. C'est pourquoi nous avons effectué une phase de recherche axée sur la découverte. Cette phase nous a donné tous les outils nécessaires pour comprendre l'objectif et structurer correctement notre projet. Maintenant que nous avons compris notre projet, il est temps de commencer à proposer notre contenu. Nous pouvons le faire de deux manières. Nous pouvons discuter d'une éventuelle liste. Ensuite, nous imaginons ce que le site Web peut contenir. Pour commencer, nous avons un exemple de ce que notre site Web peut contenir en option. Il peut avoir une maison sur le look book, le magasin et la carte. C'est le cas s'il s'agit de commerce électronique. Mais pour notre site Web, il suffit de penser à la page d'accueil concernant le contact et le support M. Pour commencer, je vais ouvrir l'esprit ici. Je vais créer une architecture pour mon site Web. Les éléments dont mon site Web peut avoir besoin sont l'accueil, contact, le Look Book et le support. J'ajoute un autre sujet, peut-être magasin pour la maison, j'ai besoin de filtres. Diapositive inversée, suivez-nous sur un autre sujet pour le contact, le courrier et le numéro. Je vais en ajouter un autre qui nous concerne, et il y aura deux sous-thèmes, à savoir les discussions d'équipe et la publication Je peux également ajouter des services. Tout cet élément peut figurer sur l'une de chaque option. Exemple d'agent AI pour l' assistance et l'assistance téléphonique. Ce magasin propose des pièces de collection, les méthodes de paiement à coup sûr et le prix. Peut également avoir des mesures Maintenant, pour le livre, il devrait avoir une mise en page. Je devrais avoir une collection, et aussi des images, des photos d' images. Comme nous l'avons vu ici, nous avons un sous-thème dans chacun de nos sujets Maintenant, c'est aussi ce que j'ai créé moi-même avec un code HTML sur une architecture avec des notes. Comme vous le voyez, chacun a également un sous-thème, comme par exemple, portfolio immobilier, filtrez les projets, suivez-nous La phase du projet peut comprendre une étude de cas nous concernant, une discussion, publication par l'équipe, des paroles, des services, et nous avons également le contact. Il s'agit de l' architecture principale du hub de mon site Web. Je peux modifier de nombreux éléments si je le souhaite. Un autre fichier que j'ai également créé peut vous aider dans votre travail. C'est une question d'architecture. Comme vous le voyez, il contient des informations informatives. Dans chaque mise en page sur laquelle vous cliquez, elle s'agrandit pour pouvoir la quadriller très facilement avec toutes les informations que vous avez ici. Cela serait très utile pour comprendre comment créer votre propre site Web. Ce fichier, vous pouvez l' avoir avec vous dans chaque projet que vous réalisez. Je vous donne ici la possibilité de changer la couleur et d'ajouter plus de mise en page et plus d'informations. Comme vous le voyez, je peux en choisir ou en créer un nouveau. Je l'ai trouvé très utile pour chacun de mes projets. J'ai toutes les informations et idées nécessaires à me présenter avant de commencer mon design. Essayer de l'utiliser vous sera très utile. Donc, comme vous l'avez vu les gars, pour quitter notre projet, nous passons par de nombreux processus avant même de commencer la conception proprement dite Nous commençons par la race créative. Nous avons fait une recherche, nous avons rassemblé des références et nous avons préparé l' architecture et la stratégie. Et j'ai trouvé chacun de ces processus très important. Avec cette méthode, nous garantissons l'efficacité de votre conception. 7. En savoir plus sur le WireFraming: Le processus de câblage est essentiel pour nous aligner sur notre client en ce qui concerne la structure et la navigation de notre site Web De plus, c'est le point de départ pour trouver des solutions créatives des problèmes qui sont souvent résolus de manière ennuyeuse. Commençons par créer notre proposition visuelle. wireframes sont des schémas très généraux dans lesquels nous montrons comment nous allons organiser le contenu de chaque page La première chose que nous allons faire est de créer le plan de travail. Nous pouvons voir toutes les options de taille disponibles. Je vais choisir celui de bureau. Nous avons déjà la table de travail. Je vais modifier un peu la taille pour améliorer un peu la proportion et nous allons le renommer Maintenant, je peux changer la couleur en blanc. Ensuite, nous allons mettre le nom du logo. Bien sûr, si vous avez un logo, vous l'avez déjà créé, vous pouvez mettre à la place du Tikkuname Ce n'est qu'un exemple. Nous allons maintenant quitter toutes les autres options relatives à la structure de notre site Web. Contactez-nous à propos de nous. Copiez et collez. Alors, regardez le livre. Ensuite, nous les organisons en haut et essayons de modifier la taille de la faute de frappe Nous devons toujours créer un équilibre d' échelle pour cela, nous avons besoin le logo soit plus audacieux que toutes les autres options J'essaie de les arranger, lequel vient en premier, lequel vient en second. Suivez le guide de Figma pour mettre le bon espace. OK. Maintenant, avec un outil rectangulaire, je vais créer une mise en page. Je veux créer quelque chose de différent, donc je peux créer des rectangles plus petits et des plus grands. D'accord, ici j'ai créé quatre rectangles formes et de couleurs différentes En bas, je vais ajouter d'autres options. Je peux ajouter, par exemple, collection, une catégorie et commencer. J'ajoute aussi avec de la couleur et tout. Essayez maintenant de les arranger et de modifier la taille de la police. Essayez maintenant de les arranger et de modifier la taille de la police. Ici, nous abandonnons notre option de navigation sur notre site Web d'une manière différente, par exemple avec une couleur Nous pouvons parcourir la collection en fonction de la couleur ou du style, par exemple avec des catégories comme les pantalons, vestes ou les manteaux ou quelle que soit la catégorie. Maintenant, je vais encadrer chacune d'entre elles. Je clique sur chacune d'elles et je fais une sélection de cadres. Et donnez-leur un coup aussi. De cette façon, je veux les faire ressembler à un boton. Ensuite, nous allons créer une mise en page automatique. Et essayez de changer le motif et la taille. D'accord ? OK. Ajustez le motif en tas. Gardez une brindille. Je vais l'arrondir. Et je vais faire de même pour les autres bouteilles. OK. Faites de même pour les catégories, le style et les couleurs. Faites de même, arrondissez-les. Créez le motif et les dimensions de la mise en page. Maintenant, comme vous le voyez ici, nous avons cinq boutons parfumés et de formes différentes. L'ancien bouton, je veux le remplir avec du noir, changer également la police et le rendre blanc. Je voulais le différencier des autres boutons et le rendre plus spécial. Je pense donc également à changer la façon dont nous organisons notre option au sommet, selon la méthode de base classique. Pour celui-ci, je veux changer un peu et arrêter une autre façon de présenter notre option. Je vais donc les mettre dans un carré. OK. OK. Ça y est. Nous allons maintenant copier-coller le plan de travail et supprimer tous les éléments Nous allons créer une autre page. Je change le placement de l'option et je place chacune d'elles dans un coin. Maintenant, je veux encadrer tout le plan de travail. OK. Maintenant, dans la grille de mise en page, nous en créons une. Ensuite, nous allons choisir non pas une grille mais une colonne. Nous choisissons le numéro d' une colonne, qui est 12. C'est l'un des chiffres les plus connus qu'ils utilisent dans la conception du site Web. Ensuite, je change de couleur et je la fais légèrement décolorer. OK. Je vais maintenant changer la valeur de la marge à 20 pixels , soit l'espace entre la colonne et le bord de la page. Et la gouttière sera de 32 pixels. Avec cela, nous pouvons ajuster tous nos éléments à cette marge pour donner plus de place à l'image. Dans la mise en page, écoutez, nous allons approfondir la façon de déterminer les valeurs d' une bonne grille et d'une bonne mise en page. La prochaine chose que nous allons faire est de créer le titre du projet. C'est l'un des éléments les plus importants de la page interne du projet. Par conséquent, la hiérarchie que nous allons donner en typographie, elle doit être très large par rapport aux autres éléments Je dois aussi l'agrandir. Nous allons nommer le titre, la route, deux étoiles. Faites-le en gras, alignez-le très bien. Pour ce projet, nous voulons créer de très grandes images et parcourir les différentes images du projet. Pour ce projet, nous voulons utiliser des images grandes et petites et qu'elles occupent plusieurs colonnes. Nous créons des carrés lunaires de différentes formes et tailles, modifions l'espacement, les cadres étant également espacés pour explorer la créativité Avec cette chronique, il est très facile de tomber dans une solution que l'on voit très facilement sur d'autres sites Web. Par exemple, utiliser une mise en page où l'image occupe trois colonnes, etc. Cependant, ce que nous voulons créer ici, c'est un système intéressant dans lequel les utilisateurs ont le sentiment de pouvoir interagir avec la page lorsqu'ils la font défiler. Pour cela, nous allons utiliser des images d'une proportion différente, et nous allons utiliser une petite mise en page pour disposer les images à différents endroits. En plus de cela, je vais créer le test, nous pourrons voir toutes les informations. Au fur et à mesure qu' ils parcourent le projet et qu' ils voient les images, ils peuvent également lire la description ici. Ajoutons un titan et aussi un sous-titre. Nous allons dire description pour moment et ajouter le paragraphe que nous voulons. Vous pouvez mettre n'importe quoi parce que ce n'est qu'un exemple. Ce ne sera pas le site Web final. Nous allons donc créer le titre de manière audacieuse et l'autre de manière moyenne ou régulière. Je peux également changer la petite couleur, les petits carrés, leur donner de la couleur, pour donner du style à ma page et de la cohérence à l'autre page. Donc, comme vous l'avez vu ici, les gars, nous utilisons les colonnes pour créer la page de la collection, et nous avons également créé la page principale. Nous allons continuer dans la prochaine leçon. 8. Apprenez la différence entre les types de création de fil: Et maintenant, pour terminer, nous allons créer le pied de page et ajouter des informations de contact afin que les gens puissent communiquer avec eux quand ils le souhaitent Cela peut être une façon intelligente d'ajouter les coordonnées dans chacune des pages en bas de page. Les gens peuvent y accéder facilement aux coordonnées chaque fois qu'ils en ont besoin. Nous devons garder à l'esprit que nous pouvons utiliser ce pied de page et le reste des pages qui le nécessitent Les coordonnées sont les suivantes. Le numéro, la rue la ville l'e-mail, c'est sûr. Et aussi, je peux ajouter les plateformes de réseaux sociaux et les lier avec la flèche. Chaque fois que l'utilisateur clique sur l'une de ces flèches, il prend ce média social spécifique. Continuez à vérifier que l' espacement est correct pour les trois Nous terminons ainsi notre photo et la page interne du projet. est très important de garder à l'esprit lors de la conception wireframes, c'est qu'ils peuvent être réalisés avec une fidélité différente Par exemple, les wireframes à faible fidélité. Ils ne contiennent pas autant de détails. Ils peuvent même être réalisés à la main, et ils sont utilisés lorsque nous voulons valider une idée très rapidement. D'autre part, les wireframes haute fidélité , beaucoup plus proches du design, contiennent beaucoup plus de détails le contenu qui sera affiché sur le site Web Généralement, ces types de wireframes utilisent des projets beaucoup plus complexes Niveau de fidélité choisi, ce que nous voulons atteindre dans nos wireframes Cela a beaucoup à voir avec le secteur dans lequel nous travaillons et les préférences des clients, entre autres aspects. En tant que designer, je pense que le niveau de fidélité que nous atteignons ici est suffisant pour poursuivre le processus et démarrer la phase de conception visuelle. Enfin, à ce stade, la manière dont nous représentons les idées auprès de nos clients est très importante . De plus, que nous nous alignons sur eux et qu'ils se sentent très en sécurité avec nous lorsqu'ils passent à l'étape suivante , à savoir le design visuel. Pour cela, je recommande de toujours représenter le cadre filaire sous la forme d'un prototype Figma Pour quitter le prototype, je vais apporter les wireframes Dans ces wireframes, nous organisons le contenu des deux pages dont nous avons besoin La première est la page A où nous organisons toutes les informations dont nous disposons sur la marque. Les informations sont très simples. Nous nous contentons d'ajouter et de mettre les informations nécessaires sur la marque de manière très créative et organisée. Ici, nous pouvons ajouter quelques images de la marque, l' exemple le plus important de Tipo Nous pouvons mettre un paragraphe sur la marque et son histoire, et peut-être aussi sur une collaboration qu'ils ont eue ou des actualités médiatiques célèbres ils ont parlé s'ils l'ont déjà fait, car en tant que nouvelle marque, ils n'auront pas de couverture médiatique pour eux. Où se trouvent également toutes les villes où se trouve la marque ? Et en bas, nous avons ajouté les mêmes informations de contact. La dernière page sera la page de contact où nous mettrons les différentes données dont nous disposons afin que les gens puissent entrer en contact avec la marque. La dernière chose que nous allons faire est de créer un prototype très simple, capable de représenter les structures métalliques et de les utiliser d'une manière très claire pour nos clients. Pour créer le prototype, nous cliquons sur le côté droit de l'écran où il est écrit prototype, et nous commençons à lier les éléments que nous voulons utiliser. Cliquez sur l'élément que nous voulons utiliser lors de la représentation auprès de notre client. Par exemple, je souhaite que cette image m'amène à la page de collection ou à la page interne du produit. Pour cela, je sélectionne ce cercle avec le bouton plus qui apparaît sur le bord droit. Je le fais glisser sur la page suivante. Par exemple, je veux que cette image m'amène à la page A. Lors de la vente aux enchères, nous choisissons un clic sur un clic, accédons à la page A et nous choisissons Dissolve. Et puis laissez-le agir 300 millisecondes. Ensuite, laissez agir 300 millisecondes. Nous allons maintenant lier d' autres options, comme le contact. Tout d'abord, je veux ajouter Autoayout , puis je vais le lier à la page de contact à Nous avons la même option en cliquant et en dissolvant. Nous associons toutes les options de contact à la même page de contact. Tous les A que vous avez dans chaque page, vous les liez à la même page AS. Le TICO le renvoie à la page d'accueil et le Lookbook le renvoie à la page du livre Nous continuons donc à faire de même, reliant toutes les options à leurs pages. Nous allons donc créer le flux sur la première page. Ces outils nous permettent de créer des prototypes beaucoup plus libres. Mais dans notre cas, ces options sont suffisantes. De cette façon, nous avons créé notre prototype que nous pourrons naviguer et présenter à notre client. Enfin, nous nous assurons que le lien mène également à la page d'accueil, comme nous l' avons déjà dit, et que tout se trouve à sa place continue de vérifier et de bifurquer. Nous avons déjà un prototype à partager avec notre client. Je vais accéder à la vue du prototype en cliquant sur le bouton d'affichage et vérifier si tout fonctionne. Si je clique sur le contact, redirigez-moi vers la page de contact. Si je clique sur la collection, redirigez-moi vers la page de collection. À propos de nous, redirigez-moi vers la page À propos de nous avec une jolie animation de dissolution. Découvrez-nous. Emmenez-moi également à la page de collection. Cliquez sur Teco pour accéder à la page principale. À la fin du processus de conception filaire, il est très important de prendre en compte certaines recommandations afin de nous assurer que nous sommes correctement alignés avec notre client Et de cette façon, de pouvoir l' utiliser sans problème lors de la phase de conception visuelle. Je vais vous parler de tout dans cette prochaine leçon. 9. Quelles recommandations sur les wireFraming: Et recommandation de wireframing. À la fin de la phase filaire, il est important de savoir comment nous sommes présentés à notre client et de nous aligner sur notre client pour vous faire comprendre l'importance de la structure, du contenu et de la navigation de cette phase contenu et Dans cette leçon, je vais vous donner certaines recommandations pour garantir le succès de la phase filaire Commençons donc. La recommandation que j' ai formulée concernant les wireframes est d' abord adaptée aux clients Ce que nous devons examiner dans le processus filaire, la structure, la navigation et le contenu Ici, il est important de ne pas définir ce qu' est le design car il s'agit phase très importante pour définir ce qu'est la structure. J'aime penser que les wireframes sont une maison grise. Cette maison de construction grise, vous savez comment vous y retrouver. Vous entrez dans la maison, vous savez que la cuisine est là. Vous savez que le canapé, la salle de bain et la chambre sont là. Cependant, il n'y a toujours pas de couche de design . En tant qu'utilisateurs, nous pourrons naviguer dans chacune des sections, c'est dans le blanc que nous pourrons, pour ainsi dire , face aux œuvres grises ou aux cadres métalliques . Nous pouvons entrer et naviguer dans notre maison d'une bonne manière. C'est pourquoi, dans cette phase de structuration , nous voulons décider de ce dont notre maison a besoin pour déterminer ce vous avez besoin pour arriver à White Work ou à la conception finale La deuxième recommandation est que les wireframes sont le point de départ pour définir le contenu que nous vivons avec le site Web C'est pourquoi il est important de vous aligner sur le client dans lequel se trouvera le contenu, car c'est lui que nous organiserons pour qu'il puisse être consommé de manière appropriée. Ainsi, lorsque nous présenterons les wireframes au client, il sera en mesure de déterminer si nous organisons les informations de la meilleure façon La troisième recommandation concerne le design. C'est comprendre que les wireframes ne constituent pas une limite à notre C'est en soi l'occasion d'explorer les différentes manières d' afficher notre type de contenu. Quatrièmement, les wireframes ne sont que le point de départ de notre projet Donc, avec le client, nous convenons ce que nous pouvons avoir en termes de contenu. Il se peut toutefois que nous continuions à l' ajuster à l'avenir. Quelle serait la meilleure façon d' organiser tous ces contenus ? Comme vous le voyez, alors que nous parlons de notre recommandation, nous examinons des exemples très importants. Je vais vous donner les liens pour chacun de ces sites Web. Nous parcourons tous ces sites Web. Ils utilisent tous la même méthode de cadrage et de colonne. Vous voyez comment ils organisent leur contenu à partir d'images, de fautes de frappe et d'informations Tout semble équilibré et bien organisé et peut être utilisé correctement Lorsque nous avons terminé notre stratégie de contenu et notre processus filaire, il est temps de commencer notre phase préférée, savoir la phase de conception visuelle L'un des éléments importants de cette phase est la mise en page. Commençons donc. 10. En savoir plus sur les grilles et les mises en page outs: Le premier élément que nous prenons en compte est le choix d'une grille et d'une mise en page, où nous organiserons tout notre contenu. Dans cette leçon, nous allons parler des différents outils que nous utilisons pour concevoir, en plus de l'opportunité créative que cela nous offre. Il s'agit d'outils dont nous disposons pour organiser et composer le contenu de notre site Web. L'un des deux types que j'utilise dans mon travail est le premier type, celui mise en page, que nous allons explorer maintenant. C'est le plus utilisé dans le design web, et celui-ci se compose le mieux d'une colonne. Pour l'utiliser, il suffit d'assimiler un plan de travail vierge, puis d'ajouter une Et dans cette option de grille extérieure, par défaut, Figma quadrille cette grille en fonction de carrés de dix pixels Mais je vais changer l'option en cliquant ici et en modifiant la colonne de l'équipage de la grille. Comme nous pouvons le voir par défaut, Figma crée cinq colonnes, je changerais le nombre d'une colonne à 12, car la disposition à 12 colonnes est l' une des plus utilisées dans la conception Web, car elle peut facilement être divisée en 64, trois et deux, et elle est également très flexible pour travailler sur différentes tailles d'écran L'option que je peux rapidement définir ici est la marge, qui est la distance entre notre mise en page et le bord de notre écran. Et la gouttière, qui correspond à la distance entre notre froid et le tracé, s'adaptera à la taille que nous souhaitons Pour adapter cette mise en page aux différentes tailles d'écran, je vais dupliquer mon plan de travail et en changer le nom Je vais changer la taille de mon plan de travail à 800 pixels, car c'est une taille généralement utilisée pour concevoir des tablettes Et c'est la même option, je vais changer le nombre de colonnes. La marge entre la mise en page et le bord de l'écran et l'espace entre les colonnes. Et pour m'adapter aux appareils mobiles, je vais faire de même. Changez d'abord le nom. Je vais modifier la largeur de mon plan de travail à 300 pixels. Quelles sont les tailles que nous utilisons habituellement pour concevoir les appareils ? Cette mesure peut légèrement varier en fonction du produit. Enfin, je vais modifier le nombre de colonnes. Habituellement, quatre ou six colonnes sont utilisées pour le mobile, la marge entre les colonnes et la bordure, et je vais laisser, dans ce cas, le même espace entre les colonnes. Celles que nous avons créées sont l'une des mises en page les plus utilisées dans conception Web et nous offrent de nombreuses opportunités créatives à explorer. Par exemple, dans ce projet que j'ai conçu, j'ai utilisé la même grille de 12 colonnes, mais j'ai toujours cherché une manière beaucoup plus créative de jouer avec l'espace. Par exemple, je cherche à créer un rythme différent avec l'espace occupé par chacun des modèles. De cette façon, la navigation est devenue beaucoup plus intéressante. Dans cette page, comme dans le détail de chaque projet, je cherche à générer des moments où travers des éléments qui occupent plus ou moins de colonne, on fait confiance à la hiérarchie et au contraste. De plus, j'utilise des éléments qui occupent toutes les colonnes. Des éléments qui occupent chacun 50 % du plan de travail, ou je cherche à explorer de nouvelles utilisations de la mise en page De cette façon, nous recherchons une disposition de 12 colonnes, non un obstacle à l'exploration de nouvelles solutions créatives Par exemple, nous cherchons à ce que la disposition du texte, de l'image et des espaces blancs soit beaucoup plus coûteuse. Et bien que nous soyons guidés par la même disposition de 12 colonnes, donnons-nous beaucoup plus de liberté créative pour proposer des choses plus risquées. Dans le détail du projet, nous pouvons voir que l'utilisation des colonnes donne beaucoup plus d'importance à l'espace blanc, ce qui a créé une lecture très intéressante. De plus, nous essayons de créer un équilibre entre les images, le texte et les espaces blancs afin de donner une sensation très agréable aux utilisateurs qui visitent la page. en revenir à notre projet, nous pouvons voir comment la disposition des 12 colonnes a guidé la plupart des décisions de conception que nous avons prises au fil des pages. Et nous pouvons voir comment nous cherchons à explorer différents arrangements de textes et d'images dans chacun des modèles. L'autre type de mise en page que j' utilise s'appelle le graphe de Vander. Je l'utilise si je vois l'opportunité de créer quelque chose de beaucoup plus visuel, impressionnant ou expérimental, car cela nous permet d'utiliser plus librement l'espace Pour créer cette mise en page dans figma, vous devez le faire manuellement, et nous allons vous montrer comment La première chose à faire est de créer lignes diagonales d'un coin à l'autre sur l'ensemble de notre page. Ensuite, nous créons une ligne verticale au milieu de la page. Et après les coins inférieurs vers le haut au centre de la page. Alors c'est le contraire. Et nous répétons la même chose depuis les coins supérieurs. De cette façon, nous voyons que les intersections sont abandonnées entre toutes ces Et à partir d'eux, nous allons commencer à créer des lignes verticales et horizontales. OK ? OK. OK, accélérez en copiant et en collant. OK. Ce processus peut être répété plusieurs fois au fur et à mesure que la recherche entre les lignes que nous créons sort les lignes que nous créons sort Ici, nous créons une autre horizontale que nous reproduisons au niveau du trou. Et cette dernière verticale est beaucoup plus proche du bord. OK. Continuez. Continuez, en quittant plus de lignes. Plus de lignes. Nous pouvons répéter cette opération autant de fois que nous le souhaitons en fonction du nombre de guides dont nous avions besoin pour notre conception. Une fois que nous aurons tous les conseils, je réduirai un peu l'opacité Je vais le regrouper et verrouiller la couche pour pouvoir créer notre proposition de design sur le dessus. De cette façon, nous avons une mise en page qui nous laisse autant de liberté créative et que nous pouvons utiliser moments où nous voulons avoir un impact ce que nous ne voulons pas trop dépendre de la 12e colonne. Ce type de mise en page a été utilisé dans un projet tel que ce site Web. Comme vous pouvez le constater, la disposition des éléments est très différente du projet que je vous ai montré précédemment. Cela permet d'utiliser davantage un espace d'angle. De plus, c'est un type de mise en page très utile pour les sites Web où la navigation est un peu plus expérimentale. Comme je l'ai déjà dit, ce type de mise en page, nous l'utilisons lorsque nous voulons créer un impact visuel très fort et aussi attirer. Un autre projet auquel ce type de mise en page a également été utilisé, c'est ce site Web. Il a disposé l'élément dans le coin sur les côtés. Cependant, le projet est très progressif, l'adresse devant être beaucoup plus libre et interactive. Servez-le très bien au début du projet pour prendre la première décision de conception. Le dernier sujet que je souhaite aborder dans cette liste est l' espacement vertical entre les éléments Je m'assure généralement que l' espace au-dessus et en dessous de chaque élément comporte également des multiples de huit pixels. De cette façon, nous pouvons créer une cohérence dans notre design quelle que soit la taille de l'écran sur lequel nous allons être visualisés. Et nous facilitons également le travail des développeurs qui travailleront sur notre projet. Un moyen simple de créer cet espacement vertical dans notre projet avec les différentes tailles que nous allons utiliser et qu'il y en a plusieurs à huit Avec les outils rectangulaires, nous créons ces barres. Nous multiplions chaque chiffre par huit. OK ? OK. Dans ce cas, j'ai créé 4 à 56 pixels. Ensuite, nous pouvons utiliser ces blocs pour nous assurer que l'espacement de notre projet est correct Cependant, le moyen le plus simple de le faire dans FDM consiste à sélectionner n'importe quel élément et à utiliser la touche option sur Mac ou la touche Alt sur Windows pour mesurer la distance entre les différents éléments De cette façon, nous pouvons ajuster l'espacement existant. Et avec cela, nous nous assurons que notre design sera beaucoup plus cohérent. Et que les espaces seront beaucoup plus organisés fur et à mesure que l'utilisateur fera défiler la page et qu'il se retrouvera avec différents éléments de la page Nous avons déjà défini nos grilles et notre disposition claires pour notre conception, et dans la prochaine leçon, nous allons commencer à bloquer notre conception finale 11. Préparer les ressources dans Photoshop: Bien, avant de commencer à bloquer notre page Web, nous allons commencer par préparer certains éléments dont nous avons besoin pour nos cages. Nous allons ouvrir Photoshop. Nous allons créer n'importe quel document, puis nous allons importer les images dont nous avons besoin. OK ? Comme vous le voyez ici, nous avons différentes images. La première chose que je dois faire est de supprimer un arrière-plan. Après avoir supprimé l'arrière-plan, je dois nettoyer davantage l'image. Après avoir supprimé l'arrière-plan, nous allons sélectionner le masque et cliquer sur Sélectionner le masque. Nous allons entrer ici quelques options dans lesquelles nous avons de nombreuses diapositives à modifier pour améliorer notre masque Nous commençons donc par le rayon, le tissu lisse, la plume Essayez de le modifier jusqu'à ce que vous voyiez que votre masque est meilleur. OK. Comme vous le voyez ici, je peux voir que c'était déjà trop, donc cela a effacé une partie du visage J'ai donc besoin de m'affaiblir à nouveau. Ça a l'air bien, mais j'ai encore quelque chose à nettoyer pour nettoyer les égalités. Eh bien, je vais le faire au pinceau. Il suffit de sélectionner la masse, puis avec la couleur noire, je vais effacer certaines parties des boucles d'oreilles dont je n'ai pas besoin. OK, les choses semblent mieux, je suppose. Peut-être que je joue un peu avec les arêtes. Plus de rayon. Je pense que cette fois c'est plus beau. OK. Nous allons maintenant faire de même pour une autre image. Supprimez l'arrière-plan, puis sélectionnez le masque et modifiez les diapositives OK, le rayon, B. Je trouve que ça avait l'air sympa. Il y a encore quelque chose que vous devez modifier, vous pourrez le faire plus tard Maintenant, je veux juste l' enregistrer au format PNG. La dernière chose à faire est créer une affiche en corail rouge, puis au recto, je vais créer des Earthtones OK ? Maintenant, pour ce qui est de l'idée, je veux en faire une partie séparée. La partie supérieure et la partie inférieure signifient une couche séparée. Donc, à partir de l'outil de sélection du milieu du marché, je vais sélectionner la partie supérieure, puis avec Control G, je la quitte sur une nouvelle couche. Ensuite, je supplie la couche principale et je supprime la partie supérieure. OK ? Maintenant, comme vous le voyez, j'ai les deux et une couche différente. OK ? Il ne reste plus qu' à exporter chaque couche seule. Vous pouvez l'exporter au format GPEG ou au format PNG. OK, c'est si simple ? Nous venons de créer des actifs pour notre page Web, un design. Si vous n'avez pas besoin de ce dont j'ai besoin en ce moment pour la conception de mon site Web, ce n'est pas nécessaire. 12. Démarrer le blocage du site: OK, maintenant nous allons commencer à bloquer notre site Web. OK, maintenant nous allons commencer à bloquer notre site Web. La première chose que nous devons créer est la page principale. Donc, avec l'outil métrique, je vais créer un rectangle et lui donner une dimension. La dimension sera de 1440 x 900. Ensuite, je vais changer la couleur en blanc. D'accord. D'accord. D'accord. Maintenant, je crée un tao en en faisant un cadre. Alors, bien sûr, je change le nom et je le nomme comme « maison ». La dimension que nous avons ici est celle qui va apparaître sur le bureau de l'utilisateur. Dans le guide de mise en page, nous allons utiliser le principe des colonnes. Nous l'avons déjà vu dans les leçons précédentes. Donc, à partir de la note, nous allons passer aux colonnes. Remplacez la colonne par 12, la marge par 22 et la gouttière par 20 D'accord ? Maintenant, je dois réduire l'opacité Donc. La dimension, vous pouvez la modifier selon la façon dont vous souhaitez que votre site Web s'affiche. Je peux agrandir l'exemple horizontalement. Je fais juste un rectangle comme celui que nous avons ici. Vous pouvez jouer avec une dimension différente fonction de la conception de votre site Web. Maintenant, je veux donner une autre couleur à mon rectangle. J'essaie de me rapprocher de la couleur du site Web. Nous allons avoir une leçon séparée à ce sujet. Nous allons voir plus en détail comment procéder. OK, donnez-lui un badge de couleur et éclaircissez-le. Maintenant, je vais quitter ma mise en page. Donc, la première chose que je dois créer est un rectangle dans le coin juste ici. Je veux faire un petit rectangle. Je veux avoir des tailles différentes. Je l'arrondis à coup sûr et je change de couleur. Rendez la couleur plus foncée pour le contraste, bien sûr. D'accord ? Maintenant, je vais quitter un autre rectangle. Cette fois, je vais quitter un autre rectangle en copiant un. Je copie le même rectangle en le maintenant enfoncé et en le faisant glisser. Quittez ensuite le rectangle du milieu pour l'agrandir. Faites de même lorsque vous souhaitez l'agrandir, maintenez simplement la touche Ctrl enfoncée et vous faites également glisser le pointeur. Maintenant, je continue à copier sans médicaments. Continuez toujours à regarder le protecteur du montage pour effectuer l'espacement correct. Je veux le rendre plus grand. Donc, dans la page principale, je veux avoir quatre mises en page avec différentes formes et différentes tailles. C'est ainsi que nous créons l'équilibre. Tu vois juste ici. J'essaie d'agrandir un peu mon rectangle pour créer un équilibre sur la page principale. D'accord. L'espacement doit toujours être le même et doit être correct. D'accord ? Drogue prise par la flèche. Je continue de peaufiner la taille de mon rectangle. Le rectangle du milieu ici, je veux changer de couleur. Peut-être orange. Pourquoi maintenant, je vais le laisser orange. Maintenant, ce que je veux faire, est aussi changer la couleur du grand rectangle. C'est le premier bloqueur à voir à quoi cela va ressembler avant de passer aux images. Je veux voir au début à quoi tout va ressembler. Maintenant, je veux ajouter une image au plus grand rectangle. Je souhaite ajouter une image. J'ai une image juste ici. J'aime la couleur de cette image car c'est en grande partie ce que j'ai en tête. Passez donc à l'image, puis téléchargez-la depuis l'ordinateur. Au fur et à mesure que vous voyez comment l'image s'intègre dans le rectangle, je dois la déplacer vers le bas pour montrer les visages de la fille. Donc, pour ce faire, au lieu de remplir, on se met à foutu. D'accord. Vas-y, puis déplace ton image vers le bas. Je trouve que ça a l'air bien. D'accord. Les choses semblent assez bonnes. Il suffit de les mettre au milieu. D'accord. Voilà à quoi ressemblait notre première mise en page. Je trouve la couleur correctement quand j'en ai besoin, donc je vais faire de même pour les autres rectangulaires Aptimaget time, je laisse juste Maintenant, bien sûr, nous allons créer les options. C'est l'architecture de ma page principale. À la maison, changez la couleur en blanc. D'accord ? D'accord. Il s'agit de nos premiers guides de blocage, mais nous verrons tout de même plus en détail plus tard la typographie et la couleur Je dois donc modifier la taille de mon option ici. Essayez de le placer correctement. Nous devons maintenant créer les autres options. Maintenez la touche Alt et Drug enfoncée pour créer d'autres copies. D'accord. D'accord. Vérifiez l'espacement. D'accord. D'accord. Essayez de vérifier l' espace et toujours avec le guide de Figma. C'est très utile. D'accord. Je vais maintenant nommer chaque option. La première que nous avons ici concerne les collections. Le second sur nous et le contact est si simple. C'est l'option sans péché que vous pouvez avoir sur le site Web, mais votre site Web peut être plus compliqué et avoir plus d'options C'est selon le design, vous devez le faire. Par exemple, s'il s' agissait du commerce électronique, il y aura certainement plus d'options. Nous allons avoir une catégorie, nous allons avoir le magasin, nous allons avoir la carte. Nous allons avoir beaucoup, beaucoup de choses, les gars. C'est comme le portfolio d'une marque. Donc, après avoir changé les tailles, j' essaie de bien les placer. Maintenant, si vous avez un logo en tant que B&G, vous pouvez l'importer et le mettre dans le coin Mon logo ne sera qu'une faute de frappe, je vais donc le créer seul en tapant le nom sur la couleur Une autre chose que je dois faire ici est cette mise en page orange. Nous devons créer une option ici avec des tons et des symboles de terre lointains. Je vais le rendre plus audacieux et changer la couleur en blanc Cette mise en page, que j'ai créée ici sera la mise en page pour la couleur du filtre. C'est pourquoi j'ai voulu le créer différemment. Lorsque vous concevez votre site Web, vous devez toujours réfléchir à chaque option vers laquelle elle va mener et à quoi ressemblera la page vers laquelle nous renvoyons. Et une autre chose à laquelle vous pensez toujours lorsque vous concevez un site Web est l'animation. Quel élément vous devrez animer et quels éléments vous les laisserez statiques. Alors maintenant j'ai créé ici Tone and Tumble , puis ici, nous devons créer un contraste typographique par tailles Je vais donc changer la taille de Rooted in Nature, le personnaliser pour vous. Pour l'instant, je veux qu'il paraisse plus petit. Je peux également modifier l'espacement entre les tiges terrestres et les échantillons Nous essayons de trouver la meilleure structure pour ce produit. Nous restons dans la liste suivante. 13. Créer la page Collection: Nous allons donc maintenant continuer en créant la page de collection. Comme vous le voyez ici, la première chose que j'ai dû faire était d'aimer le guide des règles. Il vous suffit de choisir l' option de guide à rouleaux, puis à partir du haut, vous tracez une ligne pour la placer en haut, et une autre ligne, je la mets en bas. C'est pourquoi je suis sûr d'avoir la même taille pour chaque page. OK. Maintenant, il suffit de créer un rectangle un peu plus grand et je mets dans le premier rectangle, j'ajoute une image. Ensuite, j'ai apporté mon poster qui devait le créer dans Photoshop et je l'ai posé par-dessus l'image. Ce n'est pas grave, les gars, c'est exactement comme avant. La seule nouveauté que nous avons faite, c'est d'ajouter cette affiche recrutée dans Photoshop au-dessus de l'image. Maintenant, je veux réduire l' opacité afin de mieux voir comment l'ajuster sur l' image puis la recadrer Je fais des saloperies. Quand on le recadre, on le coupe d'une taille, donc je dois faire de même pour l'autre côté P ici. OK. Maintenant, je sélectionne celui-ci, je passe à zéro, puis je le recadre de cette façon Je vais encore une fois à A merdique. C'est pour dire. OK. Maintenant, de cette façon, assure-moi de ne sélectionner que la partie dont j'ai besoin. Maintenant, je vais essayer de les poser correctement pour m'assurer qu'ils ne se ressemblent pas. OK ? Essayez donc de faire glisser le pointeur en maintenant la touche Ctrl enfoncée et essayez de bien vous superposer l'un sur l' autre. OK. OK. Continuez à le peaufiner jusqu'à ce que vous le fassiez correctement Maintenant, revenons à l'opacité. Faisons en sorte que l'opacité soit de 100 %. Maintenant, comme vous l'avez vu, nous allons apporter l'image que nous avons créée dans Photoshop. OK. Nous le posons sur le fond. Ensuite, avec l'outil rectangle, je vais créer un rectangle. Essayez de les placer au milieu. OK. OK. C'est ainsi que Try tweak vous permettra de trouver la bonne position Maintenant, je dois changer de couleur. Il se peut donc que je passe au vert. Essayons le vert et l'orange. Alors finalement, j'ai décidé de les faire orange. Maintenant, je vais créer une phrase sur chacune d'elles pour les mettre au carré. Rendez-le audacieux. OK. En d'autres termes, je le réduis en capital, je suppose. Je ne vais pas gagner de capital , puis prendre la taille de la position Maintenant, je pense déjà aussi que je vais animer cette partie Donc, chaque fois que j' ajoute un élément, je me demande comment il va être animé. Et en fonction de cela, se peut que je le positionne différemment. Ici, je vais parler de leur palette. Comme c'est le cas ici. Maintenant, je dois arranger l'image en haut. Donc je choisis. Maintenant, je vais apporter ces deux images. J'ai déjà arrêté. Je crée simplement un rectangle plus grande taille, puis je l' arrondis et je télécharge l'image depuis l'ordinateur comme nous l'avons fait auparavant dans la liste précédente. Alors je les pousse vers le bas. OK. Maintenant, je dois citer un robot Avec un rectangle, faites simplement un petit enchevêtrement, puis arrondissez-le, alignez-le au milieu. OK. Ensuite, poussez-le sur le bas, donnez-lui une couleur. Le bouton doit toujours être d'une couleur à contraste élevé. Donc, je vais juste nommer le bouton. Explorez davantage. OK. J'ai créé ce rectangle vert et je l'appelle palette naturelle et j'y ajoute toute glace sans importance Vous pouvez ajouter n'importe quel gel que vous pourriez avoir perdu sans importance. Non, je copie ces images, et je vais voir si je laisse faire ou si je laisse faire quelque chose. OK. OK. Je vais les positionner d' une manière différente pour créer un équilibre, mais d'une manière différente. Dam est sûr que nous allons les changer car nous n'aurons pas les mêmes images. Pour changer la taille de mes rectangles, appuyez vers le haut Certaines idées vont et viennent pendant que je conçois le guide du site Web. Je ne m'en tiens donc pas toujours aux choses que j' ai en tête lorsque je commence. Cela change toujours en fonction de ce que je pense de l'animation et du design. Maintenant, je cite d'autres rectangles. Et en bas, je vais également avoir ce petit rectangle vert. Nous allons avoir le site Web. Maintenant, j'ai ces palettes. Je l'ai mis à côté de moi pour choisir quelques couleurs. Il s'agit de la couleur primaire. Ensuite, nous verrons comment nous allons rendre le tableau de couleurs parfait pour le site Web. Maintenant, ce que j'ai fait, c'est juste que j'ai changé les images de chaque rectangle. J'ai déjà une idée de la façon dont je vais l'animer. Nous verrons plus tard. Maintenant, à chaque image, je dois ajouter une description. Eux ou le premier. Je pourrais dire un blazer, une veste, une veste portés dans le cadre d'une pêche intelligente Ce n'est qu'un exemple, les gars, donc je n'essaie pas de changer la taille de mon texte. Faites-le également plus petit, alors je vais mieux le positionner. OK. Nous allons faire de même pour les autres images. Mets-le ici. Et le gel, peut-être deux autres choses, comme le costume. Un blazer et un pantalon décontractés peuvent ressembler au vert, nous le faisions auparavant, changeant la taille, en modifiant le poids de la police Signifie moyen, normal ou gras. Nous continuons de faire de même pour la troisième image. D'accord, nous disons blazer chic et décontracté, éclatant, et nous le nommons blazer et pantalon Peut-être devrions-nous prendre un costume décontracté . Que pouvons-nous faire de plus pour notre page de collection ? Nous allons voir. Tout d'abord, je dois très bien positionner la description. OK. Je peux également changer la couleur du rectangle ici. Je ne veux pas avoir la même couleur, ou je pourrais faire quelque chose de bien mieux en créant une image comme arrière-plan. Maintenant, pour les deux derniers rectangles, j'ai créé une image en arrière-plan. Tu sais juste comment faire avec ce type, donc ce n'est pas important. Ce n'est pas important, je sais déjà comment faire. C'est également très simple. Je viens de quitter six petits rectangles. Je les arrondis un peu, puis j'ai fait de même en sélectionnant chaque carré et en ajoutant une image sur chaque carré. Ajoutez une image dans chaque carré. J'essaie de changer la taille du lit ici. OK. Faites-le plus grand. Ensuite, je vais placer trois images au milieu et l'autre à l'extérieur de la page. Pourquoi j'ai fait ça ? Je l'ai fait parce que je vais animer cette partie, et pour l'animer, j'ai besoin de six images, et je n'ai besoin que de trois images pour apparaître à chaque fois Donc, comme je vous l'ai dit, les gars, lorsque vous travaillez sur le design, vous pensez déjà à l'animation. En fonction de cela, vous positionnez votre contenu. Maintenant, nous devons les rapprocher et les aligner les uns à côté des autres avec le même espacement, d'accord ? OK. OK. OK, super. Je pense à ajouter d'autres images. D'accord, je peux créer plus d'images si j'ai besoin d'animer davantage cette partie Après réflexion, j'ai décidé de mettre les images au port. OK ? Je les mets donc dans le bob et je change les images. Ki. C'est tellement simple. Ce n'est pas compliqué. Maintenant, j'ai cette texture de papier qui semble pliée, ne donne effet qu'à ma dernière image de fond. Je le pose donc sur l'image. OK. Je sais déjà comment faire ça. Je vais maintenant passer au point où se trouve l'option de mélange Ensuite, je vais choisir un mélange. Je vais choisir de multiplier. Alors voilà à quoi ça ressemble. Je pense à réduire l' opacité de la texture. Je ne veux pas avoir un tel effet, juste besoin d'un peu. Réduisez donc l'opacité. Ensuite, j'efface la texture. Contrôle du rhume et médicaments. OK. En bas, j'ai créé ce rectangle vert, et j'ai dit : 2025, d' accord, réservez-le ou vous pouvez emporter ce dont vous avez besoin. En bas, vous pouvez même mettre les coordonnées de la marque. Square sera présent sur chaque page. Placez au premier plan ou le rectangle et la grenouille parce que je veux qu'ils soient au-dessus de l'image. OK. Maintenant, je voulais créer un autre rectangle, l' agrandir, et je vais également lui appliquer une image. OK ? Il vous suffit de le sélectionner, d'accéder à l'image et de sélectionner une image dans le calcul. déjà si simple, nous l'avons déjà fait. C'est l'image que nous avons. Je dois l'agrandir. Maintenant, une autre chose me vient à l'esprit en ce moment. J'ai cette palette de couleurs ici et je pensais l'utiliser en bas de page. Je lui donne une nouvelle touche. OK. Je vais le redimensionner et le mettre en bas J'en ai besoin juste dans le coin. Redimensionnez-le de cette façon. OK, donc je vais créer un rectangle et lui donner une gamme de couleurs, je le réduis, puis je le copie et j'en fais un autre plus grand. OK ? Maintenant, j'ai décidé de mettre l'autre rectangle en bas, et l'autre, j'y ajoute un pouce. Au rectangle inférieur, j'ai ajouté la palette de couleurs. Ensuite, je le redimensionne, je le réduis et je le place dans le coin inférieur Maintenant, j'ai ici un tampon que j'ai créé moi-même. Ce tampon, je devais le mettre en bas. Juste joint pour rendre ma page plus créative dès le départ, ajoutant cette texture, en ajoutant un tampon, en ajoutant cette palette de couleurs, par exemple . Quelques idées peuvent vous venir pendant que vous travaillez sur le design. Quelques idées, vous en avez peut-être déjà. Combinez simplement toutes les idées que vous avez en tête et essayez de trouver quelque chose plus créatif. Ne pensez pas toujours de la manière classique comme tous ceux qui essaient d'être plus créatifs et ouverts à essayer de nouvelles choses. Maintenant, essayez de l'arranger en haut. Maintenant, j'ai d'autres timbres ici. Je vais faire des bêtises et en choisir un pour le mettre également en bas de MyPage Nous passons au prochain guide de cours. 14. Réaliser les pages finales: Alors, bonjour les gars, nous allons maintenant créer la dernière page principale de notre site Web. Je viens de créer une autre page, l' agrandir et de l'encadrer. Ensuite, je mets juste en haut de la page à propos de Tiko, puis ce sera en gras Puis j'ai arrêté les IFRS, en parlant de la marque. Tout ce que tu peux dire, un exemple. Pas de problème Et mettez-le également dans la couleur blanche. Ce sera la page A nous. Maintenant, en bas, je vais mettre le carré dont j'avais besoin dans chaque page qui pourrait être un contact ou dans mon cas, j'ai mis 2025 tous les droits réservés. C'est donc si simple. Nous allons maintenant créer un rectangle. Je vais l'arrondir, puis l'agrandir. J'en fais une partie en dehors de la page. Créez ensuite un autre rectangle par-dessus. Je ne l'ai mis que sur la partie que je dois supprimer. Sélectionnez les deux, puis passez à l' option située en haut et sélectionnez soustraire. De cette façon, nous avons supprimé la partie dont nous n'avions pas besoin en dehors de la page. Nous ne laissons que la moitié du rectangle. Maintenant, sélectionnez le rectangle, et je vais choisir une image à partir de mon ordinateur. Maintenant, merdique et j'essaie de positionner cette image. À propos de nous Paige, je veux que ce soit plus simple. Je n'ai pas besoin de beaucoup d' informations, comme nous l'avons vu dans les leçons de Pergus Ici, nous optons pour une approche tellement plus simple, mais créative et élégante. Maintenant, j'essaie juste d'aligner l'image. C'est la meilleure façon dont je dois le faire. Je vais le mettre au fond. Ensuite, j'aligne également le texte. Maintenant, je vais copier la même page, puis supprimer certains éléments dont je n'ai pas besoin. Copiez le 2025 le droit réservé, mettez-le en bas, puis je vais changer la couleur du carré. C'est si simple. Ce sera la page de contact. Donc, avec l'outil rectangle, je vais créer un grand rectangle. Je lui donne une couleur. Ça va peut-être être rouge. OK. Ensuite, je crée un petit rectangle horizontal. Je crée le premier. Copiez-en ensuite et créez-en un autre et un autre. Le troisième, je veux qu'il soit plus grand puis en créer un autre, le mettre en bas. Ce sera plus petit parce que ce sera le bas. D'accord, je lui donne une couleur plus contrastée car je veux que ce soit l'élément le plus important que l'utilisateur puisse voir lorsqu' il accède à la page. Je vais donner un nom à chaque boîte. Le nom sera en gras et en couleurs contrastées Je vais dire votre nom complet, adresse e-mail et votre message. C'est ce qui va être la boîte pour la tâche électronique. En bas, je vais dire envoyer un message. Ce seront mes fesses, accord ? OK. L'idée ici est que le client peut envoyer un message en saisissant son nom, adresse e-mail, écrire le message que vous souhaitez communiquer avec la marque, puis cliquer sur Envoyer un message et la marque recevra son message. OK, je facilite le contact. Maintenant, en bas, je vais apporter ce qui a été écrit dans les leçons précédentes, l'e-mail, le numéro, la ville et les liens vers la page des réseaux sociaux. Essayez de bien les aligner. OK. OK, c'est si simple. Les pages ne sont pas compliquées. Ils ont tout le nécessaire, mais de manière élégante. Je vais maintenant changer la couleur de ces informations. OK. OK. OK, c'est ce dont nous avions besoin maintenant. Alors je les ai mis juste là. Et c'est tout. Ce sont les pages principales dont nous avions besoin pour notre site Web. Nous les avons déjà créés. Nous voulons en savoir plus sur la faute de frappe, sur la couleur. Nous allons voir quelle est l'interaction. Il y a encore beaucoup de choses à aborder dans notre classe. Alors continuons. 15. Travailler avec la typographie dans Ui: La typographie est la partie la plus fondamentale d'un projet de design Par conséquent, il est très important que nous disposions d'un processus clair pour le choix du téléphone. En plus d'avoir règles très claires pour la création de la palette typographique, tout cela va nous permettre de créer une proposition beaucoup plus solide Nous avons besoin qu'il soit aligné sur l'objectif de notre client et qu'il se démarque des autres. La typographie est l'un des éléments les plus fondamentaux de la proposition de design Allez donc jusqu'à affirmer ce qui représente plus de 90 % du succès du projet. Par conséquent, nous devons suivre certaines règles de base pour garantir le succès de notre produit. La première de ces règles de base est de traiter chacun de ces projets différemment. Chaque projet est un mot différent. Cela signifie que lorsque chaque produit arrivera sur lequel je pourrai travailler, je n'aurai pas envie d' appliquer la même stratégie que celle que j'ai implantée dans un produit précédent dans ce nouveau produit Avec chaque produit, nous résolvons un problème de communication. Cela se reflète dans le texte. Lorsque nous parlons de textes, nous parlons de typographie Pour faire une sélection de typographie pour chacun de nos projets, nous communiquons avec notre utilisateur La deuxième de ces règles de base est que nous devons avoir un objectif très clair en ce qui concerne le choix de la police. La deuxième de ces règles de base est que nous devons avoir un objectif très clair pour le choix de la police. La décision doit découler de l'alignement de notre client et de notre marque. Chacune des décisions que nous prenons en matière de typographie est propre à chaque problème que nous essayons de résoudre Par conséquent, le choix de la police implique de nombreuses considérations. Ce que nous devons prendre en compte. Il faut notamment tenir compte du fait que la typographie doit être un équilibre entre quelque chose d'émotionnel qui touche l'utilisateur et quelque chose de naturel En même temps, il doit avoir une personnalité caractéristique, mais aussi pratique que nous pouvons utiliser à différents moments. Enfin, il doit être lisible afin que les utilisateurs n'aient pas de problèmes à lire le texte de la page Web. Mais nous avons également besoin d'une flexibilité qui nous serve dans un contexte différent. autre considération que nous devons prendre en compte lors du choix nos téléphones est que les polices devraient nous aider à optimiser la lisibilité, c'est que notre utilisateur puisse les lire correctement pour améliorer l'accessibilité En d'autres termes, lors du choix de cette police, ils n'auront aucun problème de lecture afin que tout le monde puisse lire le contenu La dernière chose à faire est d' optimiser l'utilisabilité. Grâce à cette sélection typographique, l'utilisateur parcourt la page pour trouver du contenu de manière très simple La troisième de ces règles est qu'il faut bien connaître les principales caractéristiques de la police. Par exemple, sa classification principale, ses caractéristiques les plus caractéristiques et la différence entre elles. De plus, lorsque nous sélectionnons une police, nous parlons de diverses choses qui ont une réaction en chaîne. Par exemple, sélectionnez la police et, ce faisant, nous devons tenir compte de la taille. Lors de la sélection de la taille, nous tiendrons compte de l'interligne. Et avec cet espacement, nous devrons décider quel est le fond et la couleur de police Une autre caractéristique importante lors la sélection de la police est la hauteur du X. Nous pouvons avoir deux polices différentes, mais elles sont dans la même partition, et lorsque nous les comparons, nous allons voir que les cases typographiques sont différentes Après avoir sélectionné une police et la taille que nous allons utiliser pour le texte, l' une des relations et décisions les plus importantes que nous prendrons est la taille du fil. Un bon point de départ est de multiplier la taille de la police par 1,5, puis de modifier les valeurs en fonction de la police que nous utilisons. Comme dans le design éditorial, il est important que nous prenions en compte le nombre de caractères que nous utilisons par ligne. Car un paragraphe avec une ligne de contexte très courte ou très longue peut nuire à la lisibilité Il s'agit d'un guide que nous pouvons utiliser comme base avec différents scores qui nous aideront à nous assurer que le texte principal de notre site Web reste lisible sur tous les appareils. Enfin, l'une des caractéristiques les plus importantes à prendre en compte lors de la sélection d'un téléphone est son format. Habituellement, on trouve deux formats, TTF et WOFF. La grande différence entre ces deux formats est que le WFF est assimilé et destiné à être utilisé dans un produit numérique tandis que le TTF contient des informations pour une impression et une sérigraphie Je souhaite maintenant partager quelques conseils pour une bonne sélection de polices. La première chose que je recommande est de rechercher directement les sources sur le site Web d'une fonderie , à savoir les entreprises chargées de démissionner et de distribuer les fonds Certaines de mes maisons de fonderie préférées sont Pen gram Pen gram, Clean Type, Snopon et Grilli Le deuxième conseil consiste à utiliser trois tailles de police très différentes comme base. Cela vous aidera à créer des moments de lecture afin que l'utilisateur puisse avoir contraste entre les polices et ainsi pouvoir mettre en évidence chacun des textes. Gardez également à l'esprit que ces bases typographiques que nous sélectionnons, nous pouvons les modifier au fur et à mesure que nous concevons notre produit Le troisième et dernier conseil que je souhaite partager avec vous est limiter le nombre de polices que vous utilisez dans le produit. Il est très important d' avoir une source comme base et d'ajouter d'autres sources au cas où cela serait essentiel ou qui générerait de la valeur dans le produit. Nous devons prendre en compte le nombre de poids typographiques disponibles dans notre typographie de base et les utiliser avant de rechercher des sources supplémentaires Par exemple, lorsque vous travaillez sur un projet, le client peut vous envoyer un manuel contenant différentes polices. Mais pour notre projet, nous allons rechercher notre faute de frappe et nous limiter à une ou deux polices La première que nous avons dans le menu est la baie de polices. Vous pouvez simplement le télécharger, puis ouvrir et le faire fonctionner en arrière-plan. Comme vous le voyez, il y a beaucoup de téléphones différents. Chaque police a un poids et une taille différents. Vous pouvez choisir un exemple avec lequel travailler, et il sera actif sur votre ordinateur. Maintenant, Google Phones est un autre sur la liste. À partir de là, nous pouvons rechercher les polices qui conviennent à notre projet. Comme vous le voyez, je recherche quelque chose comme exemple, mocerf et clean. D'autres ont peut-être des formes géométriques. J'ai déjà choisi certaines des choses avec lesquelles je veux travailler, puis je vais cliquer pour les télécharger. OK. Un autre point à vérifier est le partage des polices. Vous pouvez choisir une police puis afficher toute sa famille. Prenons un exemple : vous avez gras moyen en italique moyen, K. Vous pouvez même vérifier les chiffres à quoi ils ressemblent et les lettres à quoi ils ressemblent Cela vous donne également la possibilité de jouer avec la taille, voir à quoi ressemblera le texte lorsqu' il sera déjà mouillé. À quoi ressemblera le texte avec différentes tailles et différents poids de police. C'est un très beau site pour démarrer un film. Un autre site que vous pouvez également consulter est mplust.com. Ici, vous pouvez également voir qu'il existe de nombreux choix erronés et chaque police ressemble à un choix ou même à son apparence sur un type de produit différent. Ici, vous pouvez acheter ou trouver un téléphone gratuit, mais il y a 1 million de choix parmi un plus grand choix. Mon téléphone est également un autre endroit où passer. Vous trouverez également de nombreux choix que vous pouvez acheter ou certains d'entre eux sont gratuits. Je vous montre déjà également à quoi cela ressemble sur votre projet graphique. Donc, une fois que vous avez téléchargé vos téléphones et que vous devez les utiliser dans le FeGMA en ligne, vous devez télécharger le programme d'installation de la police Il vous suffit de le télécharger ouvrir, de l' installer et de le faire fonctionner. Nous allons maintenant nous lancer dans notre projet et appliquer les polices que nous avons choisies. La première chose dont j'ai besoin, c'est de créer différents types de polices et de vérifier les meilleurs choix. Donc, le premier que j' écris ici, je vais choisir Donser D'accord ? Je vais essayer de vérifier les différentes familles de poids qui fonctionnent et copient et essayer de choisir différents types de poids. Voici à quoi il ressemblait dans un bol, à quoi il ressemblait dans un médial, et voici à quoi il ressemblait dans un bol normal Je pense que je suis peut-être déjà d' accord avec ce choix. Supprimons donc et appliquons cette faute de frappe à mon travail. Je vais peut-être vérifier avant d'autres types. Mais non, je vais coudre avec beaucoup de bon sens. C'est le côté. J'ai besoin que tu sois encore plus audacieuse ici. Je ne pense pas à l'audace ou au très audacieux et j'opte pour le plus d'audace. Pour le texte suivant, je vais choisir la même police mais d'une manière différente. Je vais le mettre en mode moyen ou régulier. Ou peut-être Seibold le médium. Après ça. J'ai donc choisi un médium. Maintenant, nous faisons de même pour l'autre texte également. Le logo va ouvrir les yeux, également très gras. Les autres options, je vais choisir une option qui me plaît. Pour ouvrir les stylos, je verrai ensuite si je choisis la taille moyenne, en gras pour enfants, la taille moyenne. Faites de même pour les autres. J'ai deux pages principales ici parce que j'ai quelques idées sur l'animation me faudra peut-être deux pages, mais nous verrons plus tard. Nous faisons donc de même pour la même page. OK. Pour la page de collection, je vais également faire de même, choisir un tableau supplémentaire, pour le titre, puis choisir à nouveau. Donc, comme vous l'avez vu ici, les gars, je ne travaille qu'avec une seule police et avec des poids différents. J'ai donc choisi ici. Ça ne vous dérange pas, les gars, si certaines structures ont l'air différentes. Ce n'est qu'un exemple. Nous verrons plus tard la bonne structure lorsque nous serons animés. Ici, j'essaie juste d' expérimenter avec le Père Noël. D'accord ? Mais vous avez déjà vu le design de la page de collection dans la page de blocage. Ce n'est qu'une expérience. OK. Nous continuons donc à choisir les polices dont nous avons besoin et à les appliquer à notre page. Ce n'est pas quelque chose que l'on voit des gars faire la même chose. Certains titres seront écrits dans la même police, mais avec des poids différents, comme gras et le normal ou le moyen, faites de même pour About us. Le titre sera certainement en gras et le texte sera moyen ou normal. Ça y est. OK, je remplace celles ici par des minuscules. OK. OK. OK. OK, fais de même pour le reste. Restez informé avec les mêmes traits différents. Je me limite tellement ici en ne travaillant qu' avec une seule police de caractères À mon avis, c'est la meilleure façon de travailler. Je n'irai jamais plus loin que deux polices. Je préfère toujours ne travailler qu'avec une ou deux polices au maximum. C'est la façon la plus propre de travailler, mais de toute façon, vous pouvez en faire plus avec quatre ou trois Ce sont tes idées. Quoi qu'il en soit, je ne vous conseillerai jamais d'utiliser plus de quatre téléphones au maximum, d'accord ? Et la meilleure façon de travailler est d'utiliser une ou deux polices. Cela crée de la cohérence et ne crée pas de chaos dans le design. OK, alors c'est ça, les gars. Voici ce que nous devons savoir à propos de cette faute de frappe. J'espère que vous comprenez très bien comment travailler. Nous ne nous sommes pas compliqués. Nous avons vu tout le nécessaire pour réaliser un beau design réussi. Nous continuons donc. Dans la prochaine leçon, nous allons voir comment travailler avec Cool. 16. Travailler avec les couleurs dans Ui: Habituellement, la couleur d'un site Web est fonctionnelle et indique les actions que nous pouvons effectuer sur un site Web. De plus, il met en évidence les couleurs liées à la marque. Cependant, nous pensons que nous pouvons lui donner trop de jeunesse créative. Si nous les utilisons correctement, dans cette écoute, je parlerai de l'utilisation de la couleur et de la page Web et de la manière je parlerai de l'utilisation de la couleur et de de les appliquer de manière plus créative. Ceci est un brief créatif pour décliner. Soi-disant, je me suis créé. Nous serons en mesure de comprendre quelles sont les bonnes utilisations et la palette de couleurs qu'ils ont dans leur marque. Comme vous le voyez ici, la palette de couleurs est très riche. Il présente de la crème chaude, du vert forêt, du sable doré, du rouge corail et du beige doux. Les informations que nous avons ici pour chaque couleur, le code du g, du RGB et du CMYK. C'est ce que la marque souhaite que soit sa palette de couleurs. En bas, nous pouvons avoir l'application de couleur, les couleurs d'arrière-plan, le premier plan, la couleur du texte et l'élément du site Web Je vous donne un exemple de la façon dont la couleur peut aller avec chaque exemple, la couleur du texte et la couleur de l'arrière-plan. Il est très important de passer en revue et en apprendre davantage sur chacun d'eux. Un élément très important est la combinaison de contraste. Nous avons un contraste élevé et un contraste moyen. C'est tout ce que je fais pour garantir une lisibilité et une accessibilité optimales sur tous les supports de marque Le guide colorimétrique de la marque. Voici également de bonnes informations à connaître sur l'utilisation principale, la couleur de support et l'accessibilité. Comme vous pouvez le voir, voici toutes les informations. Il s'agit de l' application de couleur pour la marque. Donc, lorsque je travaille sur la page Web, nous devons nous aligner sur ce brief ici. Maintenant, je veux vous montrer quelque chose de très intéressant : ce site Web appelé Colors. Ici, nous pouvons commencer par générer une palette de couleurs. Nous allons essayer de recruter la palette de couleurs à partir de ce que nous avons dans le brief. Si vous voulez vous faire une idée palettes de couleurs avec lesquelles vous pouvez travailler, il vous suffit de générer rapidement une palette de couleurs et continuer à cliquer sur l'espace pour avoir une palette de couleurs différente. Cliquez toujours sur l'espace pour avoir une palette de couleurs différente. Si vous trouvez un exemple, une couleur importante et que vous voulez la laisser et changer les autres couleurs, il vous suffit de vous connecter. OK ? Ou si vous voulez vous débarrasser d'une couleur, il vous suffit de cliquer sur X. Maintenant, comme vous le voyez ici, lorsque je clique sur l'espace, donnez-moi un autre type de couleur. Toute cette option que nous avons ici est de verrouiller et de modifier. Donc, pour avoir la même couleur, nous allons simplement apporter le code et l'insérer dans chacune de ces palettes de couleurs. Ensuite, nous le verrouillons avec la même chose pour l'autre couleur. Jusqu'à ce que nous ayons cette palette de couleurs, vous l'avez juste devant la vue. Maintenant, je vais juste télécharger. OK. Vous pouvez également consulter la palette de couleurs tendance Ils vous donnent une idée de certains d'entre eux que vous pouvez utiliser pour votre travail. Une autre option permet également de vérifier le contraste des coins à vérifier. Ici, vous allez mettre le texte d'arrière-plan et de premier plan que vous allez utiliser et voir si le contraste est lisible et qu'il est bon Comme vous l'avez vu ici, nous répondons simplement au code de la couleur du texte et à la couleur de fond. Nous voulons choisir dans le brief, nous voulons choisir les codes. Comme vous le voyez ici, il fait de très bons tests. Ainsi, nous savons que nous pouvons travailler en toute sécurité avec cette couleur. Vous pouvez toujours vérifier une autre couleur. Et avant de voir. Ceci est un exemple, la couleur de l'arrière-plan est le premier vert et la couleur est le beige doux. Donc ça dit très bien et donne-lui un bon chiffre. Je sais donc que je peux également utiliser ce type de combinaison. Ceci est un autre site Web avec un texte en couleur. Vous pouvez également laisser tous les liens de toutes les sources sur le matériel de classe. Peut-être que j'ai un type de palette de couleurs différent, et j'ai aussi un autre type de couleur de contraste. Comme nous l'avons vu, j'ai mis des couleurs d'arrière-plan et de premier plan et j'ai expliqué comment elles contrastent les unes avec les autres Ce sera un guide que je pourrais utiliser dans mon travail ? J'ai également créé un degré pour chaque couleur que nous y avons vue. Je vais maintenant appliquer les couleurs à ma page Web et pour ce faire, je veux choisir avec le bouton « Je supprime la couleur » en sélectionnant chaque objet. Je vais sélectionner le badge souple pour l'arrière-plan de la couleur de la page principale. Ensuite, je vais choisir le rouge colal pour cette mise en page. Même rouge pour cette mise en page. Arrose-le. Ils ont l'air plus intéressants. Maintenant, je vais choisir la couleur rouge pour le logo. Je vais choisir la couleur de l'option. Vous respectez toujours le cahier des charges de votre client concernant la couleur. Forcé au vert, le born va également être forcé au vert, les carrés du bas vont être forcés à passer au vert, et la couleur du texte va être douce. La couleur a des rouleaux dans chacune des pages Web. donc de certaines couleurs des visages, de certains éléments que nous avons besoin d'elles pour dominer et pour attirer le regard de l'utilisateur. Nous devons donc créer ces éléments dans un contraste élevé, comme par exemple les boutures ou des informations très importantes OK. Je continue donc à ajouter la forêt verte pour l'élément du bas. Je veux qu'ils soient moins contrastés. Alors maintenant, comme je le vois, j'ai créé une autre page, ce sera le sélecteur de couleurs Je fais juste un rectangle, y applique une image. Je mets les informations en bas, puis je crée un petit carré. Autre page, il y a une image et chaque image a un petit carré et aussi un peu de description. Maintenant, je veux choisir la couleur de chaque image et la placer sur ce carré. Donc, par exemple, la première couleur, il y a ces signes sombres, mettez-la dessus et aussi ce petit carré ici, sera une fleur orange, ajoutez-la à ce carré. Et là aussi, je vais ajouter la même couleur que le brun. De la même couleur que le brun. Ces pages seront liées les unes aux autres. Nous verrons plus tard dans l'action d'ancrage. C'est tellement simple, ce n'est pas compliqué. Vous avez vu comment nous les avons créés avec Dieu pour faire correspondre la couleur des images à la couleur du carré. Maintenant, je continue de changer les couleurs du texte par rapport à avant la façon dont il est contrasté OK. Nous continuons à ajouter à l'autre le même élément, la même couleur. OK. OK, maintenant un peu cette page. OK. Ne vous inquiétez pas, les gars, si vous voyez quelque chose que vous ne comprenez pas sur les pages ici, ce ne sont pas les pages que nous allons utiliser. Comme je vous l'ai dit, ce ne sont que des pages expérimentales. Les pages que nous allons utiliser pour notre interruption sont celles que nous avons déjà créées dans nos leçons. OK ? Continuons donc. Peut-être que je change également la couleur de cette page et que je choisis la couleur d'envoi. Bien sûr, la couleur rouge ne contraste plus avec la couleur d' envoi que nous avons utilisée Je pourrais donc la remplacer par une couleur plus contrastée, à savoir la couleur douce. Ensuite, les cases, je les changerai pour envoyer de la couleur. Et bien sûr, j'ai besoin de l'élément le plus contrasté de ma page, c'est le bouton Je vais inscrire en rouge deux-points tous les boutons de mon site Web ici, ils seront de couleur rouge, qui est la couleur la plus contrastée Je peux également changer ce texte en forêt verte. Texte également ici pour Green Forest, ainsi que l'autre texte. OK ? OK. Essayez d'expérimenter davantage avec la couleur. Alors j'ai décidé de changer la couleur de la page pour le beige et le carré pour envoyer, d'accord ? Je pense que c'est mieux. Chaque couleur a son rôle dans cette page Web, essayez de les appliquer correctement fonction de chaque rôle et de la manière dont vous allez guider les yeux de l'utilisateur. Enfin, nous parlerons des accessibilités et des couleurs. Lorsque nous concevons une page Web, une application ou un produit numérique, il est très important de prendre en compte le contraste et l' accessibilité des utilisateurs. L'accessibilité, c'est prendre en compte toutes ces personnes qui peuvent être malvoyantes. C'est pourquoi nous devons être prudents dans le choix des couleurs et dans la façon dont nous les vérifions. Pour cela, je vais vous montrer deux outils intégrés à figma. C'est la même chose que nous avons déjà vue au début, pour ce qui est du contraste. Ici aussi, nous pouvons l' avoir en figma. Ce plugin s'appelle contrast. Et il nous indiquera si le schéma de couleurs sélectionné est accessible ou non Ce que le A signifie, c'est quand il y a un très gros texte, et le A c'est si cela fonctionne quand il y a du texte long. Par exemple, dans ce cas, lorsque nous avons un fond rouge avec des typographies noires superposées, ou du vert foncé, cela fonctionnera Cependant, lorsque nous avons un fond noir avec une faute de frappe rouge, cela ne fonctionnera pas Lorsque le texte est long, il se peut que cela ne fonctionne pas. Nous pouvons faire de même avec un autre examen. Je vous montre qu'ici, cela montre que vous travaillez très bien. Comme nous l'avons déjà vu dans le premier cours, je voulais également vous montrer comment utiliser le plugin dans fegma Voilà, les gars, voici comment appliquer la couleur à votre design. J'espère que vous comprenez très bien et que vous savez comment utiliser le contraste, et que vous savez comment utiliser guider les yeux de l'utilisateur et rendre les choses très lisibles pour l'utilisateur. 17. Ajouter les éléments graphiques: OK, les gars, ici, nous allons vérifier certains éléments graphiques dont nous aurons besoin pour notre site Web. Éléments graphiques, nous les utilisons pour améliorer notre page Web. Ne faites pas de dégâts en créant des éléments accablants. Nous n'utilisons que des éléments que nous pensons pouvoir ajouter à notre design. Nous pouvons commencer ici par un exemple en SVG sur ce site Web SVG. Vous pouvez télécharger de nombreux éléments tels que des carrés ARO ou autres, ou vous pouvez utiliser Illustrator pour créer vous-même vos propres éléments, par exemple à l'aide de l'outil géométrique, puis les enregistrer au format SVG ou PNG Je préfère toujours le SVG car je peux changer la couleur directement dans le Figma Voici également un aperçu gratuit, c'est un autre site Web que vous pouvez également télécharger à partir de certains graphismes, de certaines textures ou de tout ce dont vous avez besoin Pour en revenir à notre projet, nous avons tous les éléments dont j'ai besoin. Je vais changer la couleur de cette flèche. Directement ici, je peux changer la couleur rouge. La première chose que je vais ajouter est cette flèche que j'ai créée moi-même. Je souhaite appliquer cette page sur le corail rouge. Puis un autre tampon, je l'applique également sur l'autre modèle dans un petit côté. La première chose à faire est d'appliquer les flèches gob. Cela se trouvera dans chaque page en bas. Il en va de même pour les flèches carrées, que je souhaite modifier dans la page du sélecteur de couleurs Alors éditez ici et je vous donne un coup de pouce. Certains petits éléments peuvent également être animés si je le souhaite. se peut que j'anime ces flèches carrées car elles me serviront de guide Je continue d'appliquer les flèches gob sur les autres pages. OK, faites glisser un élément devant moi ici pour voir ce que je vais ajouter et ce que je ne vais pas ajouter. Voici la collection de couleurs. Je vais ajouter un autre tampon juste en bas. OK. OK. Je vais maintenant ajouter ce motif de points. Je souhaite retoucher devant chacune de ces images. Comme vous l'avez vu, je ressens un peu plus l'espace avec élégance en ajoutant cet élément. Faites-le pour chacune de ces images ? Non, il a aussi un autre tampon. C'est nul, et je vais le mettre en bas, là où il est plus petit OK. OK. J'ai aussi ce carré. Je dois le mettre au milieu. Je vais l'ajouter à ma clé. Au bas des couleurs de la collection, lorsque j'ai la page de collection, j'ajoute cet autre rectangle. J'ajoute cet autre rectangle en bas. J'ajoute cette image, et j'ajoute également cette palette de couleurs en bas, puis je vais créer deux rectangles et une autre division OK. Maintenant, je vais ajouter des images au dessus de l'image, je vais créer deux petits rectangles Ensuite, j'ajouterai une couleur provenant de la même image. Je veux quand l'utilisateur visite la page du sélecteur de couleurs. Lorsqu'il clique sur Explore Moe, vous le redirigez vers cette partie de la page. Je vais maintenant ajouter de la couleur à ces petits rectangles. À l'aide du collyre, choisissez la couleur de l'image. C'est si simple. Maintenant, je vais ajouter une petite description ici. Maintenant, comme vous le voyez, j'ai créé ce petit extracteur de couleur ici même en HDML Ici, lorsque vous ouvrez ce fichier, vous pouvez avoir cet extracteur. Il vous suffit de télécharger n'importe quelle image et, par défaut, vous allez créer une palette de couleurs et ajouter ces cercles sur Vous pouvez déplacer les cercles pour obtenir des couleurs différentes et obtenir une palette de couleurs différente. Vous pouvez également cliquer sur le bouton plus ajouter de la couleur à votre palette de couleurs, ou vous pouvez faire glisser le pointeur et supprimer une partie de la palette de couleurs. Pour chaque couleur, nous vous donnons également le code hexadécimal. Cela sera donc très utile pour tout travail ou projet que vous menez, les gars. Je vais donc vous le laisser, ainsi que le matériel pour le cours. Nous continuons d'appliquer certains éléments à nos pages. Nous ajoutons ces petits cercles Also à la page couleur de la collection. Allez ajouter et remplir les espaces, mais de manière équilibrée et créative. Comme vous l'avez vu ici, les gars, quelque chose que vous remarquerez peut-être comme cette page couleur, je l'ai mise dans ce fichier PNG que nous avons créé dans Photoshop. L'image est simplement placée sur le côté arrière-plan pour l' agrandir également et fait partie de l'arrière-plan de la page. Vous remplissez les espaces avec cet élément graphique. Comme vous l'avez vu, nous avons créé le sélecteur de couleurs et créé la page correspondante, et il était également très beau Ce sont des pages facultatives que vous pouvez créer, mais c'est aussi une façon très agréable et créative pour l'utilisateur d' explorer la collection d'une manière différente et de lui offrir une expérience différente. Maintenant, nous avons terminé tout le processus de conception et nous allons commencer le processus d'animation. 18. Apprendre la conception de mouvement: I En plein milieu du design numérique, inclure de l'animation dans une proposition de design visuel peut faire toute la différence entre un excellent site Web et un site ordinaire. Dans cette leçon, nous allons donc parler de motion design. Le principe fondamental à prendre en compte et l'opportunité et les outils dont nous disposons aujourd'hui pour créer des animations pour le web. Commençons. Une fois la phase de conception visuelle de notre projet terminée, nous pouvons commencer à ajouter des animations, des interactions et d'autres éléments graphiques. Cela ajoutera beaucoup d' interactivité à la proposition et rendra notre design beaucoup plus intéressant Dans cette leçon, nous parlerons du motion design, qui englobe toutes les propositions d'animation que nous allons créer sur notre site Web. Pour commencer, nous allons parler plusieurs principes de base de l'animation, qui nous permettront d' arrêter d'animer des propositions très innovantes et qui ont beaucoup de personnalité Le premier principe à prendre en compte est la rapidité, qui fait référence à la durée de l'animation du début à la fin. Si la durée est courte, disons moins d'une seconde, nous ferons bouger l'élément très rapidement. Mais si la durée est beaucoup plus longue, nous ferons en sorte que l'animation paraisse beaucoup plus lente. Et le deuxième principe à prendre en compte est Ethen. Qu'est-ce que l'accélération ou l'accélération des éléments ? Pourquoi l'animation se produit-elle ? De nombreuses animations par défaut sont linéaires, ce qui leur donne un aspect un peu double et sérieux. Mais en jouant avec cet élément, nous pouvons créer des animations beaucoup plus expressives et avec beaucoup plus de personnalité. Afin de mieux comprendre ce principe, il existe des outils qui nous permettent de visualiser les changements de vitesse et de facilité et ainsi de comprendre comment chacun d'entre eux affecte notre animation. Par exemple, ce site Web appelé eins.com nous permet de jouer avec différentes valeurs pour comprendre les changements entre l'une et l'autre Pour commencer la durée ou la vitesse, qui fait référence au temps qu'une animation peut prendre du début à la fin, dans ce cas, la valeur par défaut est de 1 000 millisecondes C'est une seconde. Si je remplace cette valeur par une valeur beaucoup plus petite, nous pouvons constater que l'animation se produit beaucoup plus rapidement. Je vais laisser la valeur en milliers. Et sur le côté gauche, nous pouvons explorer l'assouplissement. Il s'agit de l'accélération ou de l'accélération des éléments. L'assouplissement est visualisé à l'aide de courbes équivalentes à une valeur mathématique Easy in signifie que notre animation va s' accélérer vers la fin. Et au fur et à mesure que je modifie la valeur de l'easy in, nous constatons que cette accélération devient beaucoup plus évidente. Et inversement, la facilité de sortie signifie que notre animation s'accélère au début. Et puis ça a ralenti à la fin. Comme nous pouvons le voir dans cet exemple, chacune de ces options d' accélération a obtenu une valeur différente sur la courbe sûre. Cette valeur peut être transmise au développeur du projet pour s'assurer que l'animation est telle que nous l'imaginons Enfin, la facilité d' entrée signifie que l'animation s'accélère au début et aussi à la fin, ce qui permet de mieux comprendre les notions d'assouplissement et de rapidité. Nous pouvons commencer à générer des animations beaucoup plus intéressantes et ayant beaucoup plus de personnalité. Par exemple, en jouant avec les valeurs d'accélération et de vitesse, nous pouvons réaliser une proposition d'animation comme celle-ci. Nous pouvons voir comment évoluent la proposition d'animation et les autres détails. Au fur et à mesure que la personne fait défiler la page, elle essaie de refléter la marque. OK. Cela nous amène à un point très important, savoir ce que nous allons utiliser dans notre animation. C'est grâce aux attributs de la marque avec laquelle nous travaillons. Cela orientera la plupart des décisions que nous prendrons en matière d'animation. Et il en sera de même si la marque est irrévérencieuse. Par exemple, cette marque de dispositifs d'aide communique de manière très claire et très directe avec l'utilisateur, en témoigne cette proposition d'animation qui utilise un mouvement très lent et très accéléré pour animer les éléments de la page, tels que le texte et l'illustration Un autre cas différent est celui livraison de raviolis sur le site Melhip Ce site Web souhaite créer une expérience proche du gain vidéo. Par conséquent, utilisez une animation beaucoup plus expressive. Et avec des ressources telles que rebonds et d'autres éléments pour rendre votre animation beaucoup plus divertissante et pas simplement pour communiquer le message de manière directe Enfin, cette marque d'articles pour la maison essaie d'être beaucoup plus délicate et subtile dans sa forme telle qu'elle est présentée sur son site Web. se reflète également dans l'animation, qui a une vitesse beaucoup plus lente et des mouvements très subtils qui correspondent à la personnalité de la marque. Pour notre projet, nous allons utiliser des animations plus intéressantes. Cela s'appelle Parallex Animation. L'animation parallèle est une technique de conception de site Web selon laquelle les images au sol se déplacent plus lentement que les images au sol, créant ainsi une illusion de profondeur et d'immersion, comme lorsque l'on regarde un objet par la fenêtre d'une voiture à proximité, brouille rapidement et paysage semble se déplacer Nous allons voir comment le faire et l'appliquer. Par exemple, pour un projet comme celui-ci, vous devez partager des exemples de références avec le client. Pour s'aligner sur le type d' animation qu'ils vont implémenter dans le cadre du développement. Il est donc très important de nous aligner sur les personnes qui seront chargées de mettre en œuvre l'animation. Du fait des outils, de la quantité d' animations ou de l'effort nécessaire pour les mettre en œuvre, cela peut varier en fonction du projet et du temps dont nous disposons. Enfin, ce sont les programmes que j'utilise le plus et que je recommande pour créer des animations pour une page Web. Tout d'abord, il y a After Effect, qui est l'un des programmes les plus utilisés au monde. Ensuite, il existe un outil ate qui vous permet d' exporter l'animation que nous avons créée after effect dans un format qui facilite l'implémentation de cette animation sur la page. Enfin, il y a Green SOC, une bibliothèque de code conçue pour l'animation et qui vaut vraiment la peine d'être apprise. Si vous êtes intéressé par le développement de la page, c'est sûr. Une fois la proposition d'animation terminée, nous passons à la création de l'interaction et de la micro-interaction sur le site Web. 19. Créer l'animation de la parallèle verticale ation ation à: Oh Pour créer une micro-interaction dans l'interaction utilisateur, nous devons comprendre ce que nous pouvons implémenter avec notre site Web, ce qu'ils sont et comment les créer. Nous abordons ici en détail le sujet essentiel de la conception Web. Commençons. Une micro-interaction dans un produit est une interaction qui permet ou aide les utilisateurs à effectuer la tâche, soit en passant de la page d'accueil au projet, soit en passant par le contact. micro-interactions sont présentes partout sur le téléphone portable, sur l'ordinateur, dans notre appareil électroménager ou même dans l'environnement Dans le domaine de la conception numérique, nous avons plusieurs exemples. Dans les boutons, le défilement ou dans la barre de navigation. Les micro-interactions jouent un rôle très important dans l'expérience utilisateur car elles nous aident à améliorer, grâce à l'interactivité, la convivialité d'un produit Je vais vous montrer quelques cas pour l'étude professionnelle. Vos différentes micro-interactions ont été bien mises en œuvre. Par exemple, sur ce site Web, les éléments apparaissent d'une belle manière et font déjà ressentir à l'utilisateur l' expérience. Il semble que vous deviez explorer davantage le site Web. Sur ce site Web, la micro-interaction entre la façon dont il détecte entre. Cela devait donner l'idée aux utilisateurs qu'il allait voir quelque chose de très intéressant. Sur ce site Web, vous avez également une micro-interaction où vous invitez l'utilisateur à ouvrir le menu, pour pouvoir naviguer dans les autres sections telles qu'il les a implantées Le logo est bien debout et l'élément commence à passer par-dessus. Cela donne une très bonne lisibilité du projet et permet également d'interagir avec celui-ci à l'écran Nous allons maintenant commencer le processus de notre interaction. La première chose que nous devons créer ici est l'animation de parallaxe verticale Et pour cela, nous allons avoir de nombreuses parties et cadres séparés de la page de collection. Ce que j'ai fait, c'est de copier-coller la partie où se trouvent les tons de terre, notamment un rectangle avec l'image et ce graphique en tons de terre. Je l'ai mis dans un cadre seul, puis je copie et colle également un autre cadre. Et cette fois, je vais l' agrandir en bas. Ensuite, j'ouvre le graphique. Un côté va aller vers le haut et l' autre va le comprimer vers le bas. Et comme vous le voyez ici, je place le carré de la nature à l'extérieur ainsi que le carré de palette à l'extérieur et l'image en bas. Ensuite, une chose importante à faire est de vérifier le contenu du clip. De cette façon, tous les éléments que vous avez en dehors de la page ne sont pas visibles. Je vais maintenant passer à l'option prototype, et je vais commencer à créer l'interaction. Nous allons donc maintenant créer l'interaction. D'accord ? Nous allons donc cliquer sur Naviguer vers la collection 2, Smart Animate, et nous allons maintenant passer à 600 millisecondes Nous allons rétablir une interaction de la même manière. L'idée est donc que chaque fois que nous cliquons sur le graphique pour ouvrir le graphique et que nous révélons l'image qu'il contient. Donc, comme vous l'avez vu ici, les gars, c'est la position de chacun de nos éléments. J'ai vu ici la partie graphique de Born, il faut que je la comprime davantage. Alors je l'ai fait aussi. De plus, au début du cadre, vous devez toujours créer un flux. J'ai donc déjà créé le flux. Maintenant, cliquons sur le bouton Play et voyons à quoi ressemble notre animation. Nous cliquons donc. Nous cliquons donc puis l'image apparaît. Maintenant que nous avons vu que nous avons cette position ici, nous allons également copier cette collection, puis comme vous l'avez vue ici, je les ai positionnées en bas à l'extérieur, je les ai positionnées en bas à l'extérieur comme nous l'avons vu dans le précédent, comme vous l'avez vu auparavant. Maintenant, dans le cadre de la collection 3, je vais pousser le graphique et l'image révélés vers le haut, les faire disparaître. Et le top. Vous pouvez les voir dès maintenant car il s'agit d'un contenu de clip. Vérifié, fais-le et vérifie. Tu vas voir ce que j'ai fait. Je pousse le tout vers le haut puis je place le cadre inférieur à place et je le positionne de cette façon. Donc, l'idée que j'ai faite est de les placer à l'extérieur. Ensuite, lorsque vous apparaîtrez sur le cadre, ils vont faire comme ça. Ils vont donc s' animer en saisissant chaque carré par le côté et l'image va apparaître Je vais donc créer un autre flux, puis je vais créer l'interaction entre le deuxième et le troisième. Essayons de voir ce que nous avons maintenant. Donc, comme vous l'avez vu ici, je clique simplement sur Fermer, je clique à nouveau et c'est parti. Non, je vais créer une nouvelle interaction entre les deux. Donc, de la collection deux, la collection trois, créez le flux, puis de la collection deux à la collection trois. Je vais faire glisser le curseur vers la collection 3, Smart Animate lent à 600 Cette fois, l'animation va fonctionner par dragon. OK, donc vous avez vu juste là, la position dans l'image précédente et la position dans l'unité centrale. Cela va créer notre animation et elle va être lancée par glisser-déplacer. Alors, vérifions-le. OK, alors cliquez sur Révéler le glissement, et c'est ainsi que l' animation apparaîtra lorsque nous ferons glisser le pointeur. Cliquez, cliquez à nouveau pour fermer. Cliquez pour ouvrir, faites glisser et c'est ainsi que l'animation apparaîtra. OK. En bas , nous avons également ce cadre plus long parce que nous allons le positionner comme vous l'avez vu. Donc, au bas de ce cadre, nous ne l'avons pas vu comme avant, mais dans le même cadre en bas, nous avons ces deux images en bas. Nous allons donc copier ce cadre et le mettre en premier, je dois le mettre ici. Je dois insister sur ce point. Ensuite, pour la prochaine collection d'images f, nous allons faire de même, pousser le cadre précédent vers le haut et ne faire apparaître qu'une seule image ici. D'accord ? Donc, lorsque je vérifierai le contenu du clip, je vais vous montrer à quoi il ressemble. C'est ce que tu as vu. Comme vous l'avez vu dans le cadre précédent, je le pousse vers le haut, fais disparaître, puis je place cette image à la place, et l'autre image, je la laisse dans le trou. Je ne veux pas qu'ils apparaissent ensemble. Je veux qu'ils apparaissent un par un, d'accord ? Je vais donc avoir différents types de cadres. Cela va révéler la première image. Et la deuxième image va révéler la deuxième image. Faites en sorte que la création d'une collection soit correcte en copiant le code de collection. Et cette fois, nous n'allons rien pousser vers le haut. Je vais juste faire apparaître l'autre image dans l'autre cadre. Maintenant, dans l'image suivante, nous allons avoir deux images. Dans l'autre cadre, nous allons faire apparaître le bouton. Commençons donc, cliquez pour faire apparaître une image, faites glisser à nouveau, une autre image apparaît. Ce que nous allons faire, c'est créer la même chose en copiant et en collant et en extrayant de la page principale de la collection l'autre partie , à savoir ces trois images. N'oubliez pas de toujours créer le flux. Voici un exemple de création du flux quatre. Comme vous l'avez vu, l'animation était la même que celle du drag précédent. Naviguez dans la collection deux, la collection quatre, et passez également de la collection quatre à la collection cinq en faisant glisser le pointeur. Drug Navigator et Smart Animate. Et voilà, nous l'avons fait un peu plus vite huit millisecondes par seconde au lieu de 600 800, pour le rendre plus lent. Essayons-le maintenant. Si cela apparaît et plus lentement. Vérifiez tout. Pour le moment, c'est tout ce que nous avons. Image suivante, je vais juste copier-coller, puis je vais faire apparaître le bouton dans ces six images par cadre. Allongez-le et ramenez l'autre élément de la page de collection, apportez un autre élément, copiez-collez et positionnez-les au bas du cadre six. Nous allons animer ces éléments dans l'image suivante. Donc, dans la septième image, nous allons d'abord pousser toutes les images précédentes vers le haut. Ensuite, nous allons le remplacer en divisant le cadre suivant. Passons donc à la prochaine ligne. 20. Créer l'image révélatrice: Dans cette écoute, nous allons donc créer l'image révélant l' animation par le masque. Donc, la première chose que je dois faire est de créer un rectangle de la même taille que l'image. Je vais arranger le carré derrière l'image. Nous allons simplement le faire en abaissant le carré situé sur les couches situées derrière l'image. Sélectionnez-les ensuite. Ils devraient être au-dessus l'un de l'autre, les gars, d'accord ? Sur la section de la couche. C'est très important. Sélectionnez ensuite les deux. Tout d'abord, je veux les regrouper. Vous pouvez donner au groupe le nom que je veux. OK. Maintenant, je sélectionne les deux. Je sélectionne le rectangle et l'image. Accédez ensuite à l'option ici et cliquez sur Utiliser comme masque. Comme vous l'avez vu dans le calque ici, cela a créé le masque de mon image. Maintenant, ce que je dois faire, c'est compresser l'image. Je sélectionne le rectangle, pas l'image, le rectangle, puis je le pousse vers le bas pour le faire disparaître. OK. Maintenant aussi pour animer le texte, je vais donc le positionner à l'extérieur Je souhaite également animer cet élément graphique, donc je vais d' abord faire en sorte que l'opacité Copiez maintenant le cadre. Appuyez sur le cadre précédent vers le haut , puis poussez l'autre cadre sur la page. Au mainframe, juste ici. Maintenant, ce que je veux faire, c'est corriger la position du frère. Je veux qu'ils apparaissent dans le mainframe. Je les place vers le bas. Maintenant, je fais apparaître une partie de l'image. Je fais également apparaître 50 % de l'opacité du graphique, et j'insère un peu dans le texte Découpez un autre cadre. Et cette fois, je vais vous le révéler, je vais faire en sorte que l' opacité soit de 100 et que je pousse le texte jusqu'à sa position finale OK. Je vais maintenant créer l'interaction. Donc, faites glisser, naviguez deux dans la collection sept, animez intelligemment. Je vais faire en sorte que ce soit lent. 600 millisecondes. Fais de même. Cette fois, je vais choisir l'option après délai, une milliseconde, une milliseconde Accédez à la collection 8, animation intelligente et lente. Facile à sortir. Maintenant, je vais quitter Flow. Commencez par la collection 6. Passons au Prototype. Cliquons sur Play et voyons ce que nous avons. Maintenant, je fais glisser, j' apparais, je fais glisser, je tape les boutons, je fais glisser, je drogue, et maintenant la révision de l'image. Mais j'ai cette animation de révélation d'image et d'animation de texte. OK. Je dois changer quelque chose dans l'interaction. Je vais le rendre lent et le faire 600, d'accord ? Donc c'est mieux. Au lieu de « easy out », je le remplace par « slow ». Maintenant, nous allons simplement copier la même méthode pour les deux autres images. Avant cela, je voudrais le réduire davantage et voir l'animation maintenant. J'ai l'air sympa. D'accord ? Nous allons donc faire de même pour les autres images. Vous allez copier le cadre huit , puis pousser le précédent vers le haut, puis créer les autres images comme nous l'avons fait auparavant. Alors voyons voir OK. C'est l'image que tu dois copier pour les autres, d'accord ? Continuons donc. 21. Créer l'animation horisontale parallèle: I Maintenant, après avoir créé l'image révélant le masque pour les trois images et créé deux cadres pour chaque image, nous allons maintenant avoir 12 cadres par défaut. Voici donc notre cadre 12. En bas, nous allons avoir cette image ici comme arrière-plan, l'image de l'arrière-plan, image de l'arrière-plan, que nous avons copiée depuis la page de collection. Maintenant, en bas, nous plaçons cette partie de notre page de collection où nous allons animer la parallaxe horizontale Donc, dans ce cadre, je place les images à l'extérieur ainsi que le carré à l'extérieur. J'ai poussé le cadre précédent vers le haut avec les autres. OK, c'est comme ça que tu le vois. Ensuite, nous allons copier le même cadre. Maintenant, avant de cliquer pour vérifier à nouveau le contenu du clip, je voulais vous montrer d'où je l'ai amené, les gars. C'est là que j'ai apporté toute cette partie. Il nous reste encore des parties à faire pour animer. Mais maintenant, nous allons animer cette partie. Contenu du clip. Je positionne donc mon élément comme ceci, je découpe le contenu pour le rendre invisible. Nous allons pousser ce cadre vers le haut. Ils peuvent donc également appuyer sur l'arrière-plan. D'accord ? Nous poussons l' autre vers le haut. Nous positionnons maintenant les trois images à l'intérieur. OK. Copiez le même cadre insérez différentes images à l'intérieur et faites glisser l' autre vers l'extérieur. Copiez à nouveau le même cadre. Cette fois, nous allons pousser ce cadre vers le haut. Au lieu de cela, nous allons d' abord faire apparaître ce carré à l'intérieur, le positionner de cette façon. Encore une fois, copiez, je vais également pousser davantage l'arrière-plan vers le haut dans les autres cadres et faire apparaître également les trois autres images. OK. Il s'agit donc de la position finale de l'animation. Nous l'avons mis ici. En bas, je veux mettre tous ces derniers éléments ici. Je vais juste les placer là. C'est si simple, les gars, positionnez-vous dans le cadre précédent, puis repositionnez-le comme vous voulez qu'il apparaisse Maintenant, pour celui-ci, je veux également créer un masque comme nous l'avons fait auparavant, créer une rétention sur la même taille de l'image. Vous le positionnez en bas, vous le positionnez derrière l'image, puis vous le pressez pour le faire disparaître. Copiez le cadre, poussez le cadre précédent vers le haut. Prenez l'autre , puis révélez l'image. Il suffit de révéler l'image. Cette fois, je n'ai pas créé deux cadres pour le dévoilement. Je viens de créer un cadre. Appuyez également maintenant sur le tout vers le haut et faites simplement l'image prenne sa place dans le cadre principal. D'accord ? Faites ensuite une autre copie du cadre, puis créez le dernier élément de la page de collection ici dans l'astafray Je peux même aller plus loin et animer cette animation également la palette de couleurs, mais je ne vais pas le faire pour cette partie Ensuite, nous allons créer l'interaction si simplement, d'accord ? Continuons dans la prochaine leçon. 22. Créer des animations de composants: Et bonjour, les gars. Dans ce cours, nous allons créer différentes choses. Nous allons créer une animation de composants. Je vais donc prendre cette mise en page, puis je vais l' encadrer dans Autoayout Ensuite, je vais attendre et faire glisser le pointeur pour quitter. Maintenant, la première chose que je dois faire est de le sélectionner. Sélectionnez-le, sélectionnez-le, puis allez dans Contrainte ici et placez-le au milieu. Et puis il suffit de copier-coller. Vérifiez la contrainte au même endroit au milieu. Ensuite, je vais choisir l'échelle deux et l'adapter à 1,3. Il se peut que je change un peu moins l'échelle, par exemple 1,2. Genre 1.2, d'accord ? Sélectionnez maintenant les deux. Accédez à l'option ici et créez un ensemble de composants. Renommez le composant. Je vais l'appeler Layout One. Non, créez l'interaction. L'interaction se déroule donc comme suit. Chaque fois que nous survolons l'image, nous devons l'agrandir. Pour cela, nous allons passer en survolant, passer à l'image 23, animer intelligemment, puis modifier OK ? Ajustez cette courbe comme suit Je recrée l'interaction. Je l'ai fait comme ça, puis je suis allé dans les ressources et j'ai recherché Layout One. Les actifs, vous les trouvez sur la gauche de la page, vous allez dans les actifs et recherchez la mise en page 1. Ensuite, vous le déposez et vous le remplacez par la mise en page statique. OK, maintenant positionne-le très bien. Passons maintenant au prototype et voyons ce que nous avons. Comme vous le voyez ici, pendant que nous survolons l' image, elle est agrandie. OK ? Ainsi, chaque fois que nous survolons, l'image augmente. Certaines choses doivent être modifiées. Il en était de même pour l'autre mise en page. Donc, ce que nous avons fait d'abord, j'ai regroupé l'image et le tampon, puis j'ai fait la même chose qu'avec le précédent. J'ai fait de même avec l'autre, j'ai créé la contrainte centrale. Ensuite, je l'ai redimensionné à 1.2. Maintenant, nous créons l'interaction de la même manière tout en survolant, animons intelligemment après avoir créé l' ensemble de composants à Passons maintenant aux actifs, partons de là et remplaçons-les par la mise en page statique Remplacez-le ici. Et chaque fois que je survole l'un d' entre eux, ils augmentent. Je dois modifier la taille et la position. Je vais donc ici à la page principale et j'essaie de modifier leur position J'essaie de modifier un peu leur position. Corrigez donc la position en modifiant un peu les tailles de ma mise en page pour la faire paraître plus propre. OK. OK, c'est ça. Passons au cours suivant. 23. Créer l'animation de transition de page: Et bonjour, les gars. Nous allons maintenant travailler sur nos transitions de page. Donc, la première chose que nous allons faire, est de revenir à nos cadres et de quitter l'interaction. Lorsque vous faites glisser, naviguez vers la collection 13, Smart Animate Slow 600, nous pouvons le remplacer par un autre chiffre ou le laisser dire Nous voyons notre animation, et en fonction de cela, nous décidons. Alors maintenant, faites la même chose 13-14 en faisant glisser. Même lenteur et 600. 14 à 15, pareil pour le médicament, passez à 16. Maintenant, je prends de la drogue, Navigate. Ragate aussi, puis drogués, les mêmes gars jusqu'à la dernière page Maintenant, ce que je vais faire, c'est redimensionner chaque page. Continuez donc à saluer le flux, puis vérifiez. Je pense à créer à nouveau le flux. C sur le sol juste ici. Donc, avant de nettoyer notre travail, je dois vérifier ce que nous avons maintenant. Cliquez sur faire glisser, faites glisser L'image révèle la parallaxe horizontale, faites glisser à nouveau, la parallaxe horizontale, puis l'image révèle la parallaxe ici Ensuite, le tampon apparaît également. OK. C'est donc ce que nous avons maintenant. Travaillons donc sur notre transition de page. La flèche le reliera à la page d'accueil. Toutes les flèches que j' ai dans chaque page, je veux les relier à la page principale. Donc, chaque fois que je clique sur la flèche , je reviens à la page principale. Nous allons cliquer sur « cliquer », Naviguer vers la page d'accueil », «   Disol » et « ralentir OK. OK. Maintenant, cliquez. Je me ramène à la page. Ne vous inquiétez pas, les gars. Certains éléments ne se trouvent pas dans la même couche. Je vais arranger ça. Je dois donc faire de même pour chaque flèche en bas de page. Nous allons maintenant lier l'option de collection à la page de collection. La première image sur Click and Dissolve et les mêmes vals. Continuez maintenant à lier les autres options. Alors, liez AS à l'AutsPageo ici. l'AutsPageo ici. Même option au clic. Naviguez, dissolvez et toujours la même option. Continuez maintenant à lier les autres éléments. Maintenant, contactez. Si vous cliquez sur chaque option et le bouton plus n'apparaît pas, cela signifie que votre option n'est pas encadrée. Vous devez revenir à la phase de conception, cliquer dessus et sélectionner le cadre avant de pouvoir appliquer une interaction à. OK, donc j'applique le contact sur la page de contact et à propos de nous à la page à propos de nous, la collection à la page de collecte. Maintenant, je souhaite lier cette mise en page à la page du sélecteur de couleurs. Ainsi, chaque fois que quelqu'un clique sur cette mise en page, il est redirigé vers la page du sélecteur de couleurs OK. OK. Ensuite, reliez également la flèche à la page principale, comme nous l'avons fait auparavant. Il en va de même pour les autres flèches. OK. Essayons donc de voir ce que nous avons maintenant. Cliquez. Emmenez-moi au sélecteur de couleurs OK. Cliquez sur Condor Take me back. Maintenant sur la page de collecte, un médicament, un médicament. OK. OK. Vérifiez ce que nous avons déjà, mais nous en verrons plus dans la liste finale des interactions. Et nous allons corriger subsff. La transition de page fonctionne donc très bien. Chacun le lie à chaque page cible. Passons à la dernière leçon concernant l'interaction. 24. Créer l'interaction finale: Nous sommes sur le point de terminer notre leçon d'interaction. La dernière étape, nous allons peaufiner et corriger certaines choses, et nous allons également travailler sur la page du sélecteur de couleurs OK ? Allons donc voir ce que nous avons maintenant. Je clique dessus sur quelques trucs. Comme je le vois, je peux cliquer et agrandir correctement. C'est très sympa. Je voulais modifier l'échelle des composants. Faites-le moins. Vous pouvez le faire un par un, exemple 1.1 ou où vous le souhaitez. OK ? Donc, comme vous le voyez maintenant, cela fonctionne mieux. Maintenant, ce que j'ai fait à toutes mes pages, je les fais glisser du bas jusqu'à ce qu'elles atteignent la taille principale. Lorsque vous avez du contenu de clips, vous pouvez le faire très facilement. Mais maintenant, je vais créer cette interaction de flèche, je vais créer un ensemble de composants ici. Je vais faire de la première flèche une opacité nulle, encadrer au début Je dois l' encadrer, puis le copier. La contrainte doit également être au milieu, puis la première doit être l' opacité zéro et la seconde l'opacité 100 Sélectionnez ensuite à la fois créer un ensemble de composants et renommez-le. OK. Ensuite, après l'avoir renommé, je passe au prototype et je crée l'interaction La première introduction se fera après un délai, une milliseconde, une animation intelligente et douce, et fera de même pour l' Il faut donc commencer à zéro, puis devenir 100, puis revenir à zéro, puis continuer comme ça La boucle animée ne s'arrêtera jamais. OK. Nous allons maintenant le remplacer par le StatticErrw Nous allons accéder aux ressources et rechercher Arrow. Voilà, tout semble propre maintenant. Comme vous l'avez vu ici, ce que j'ai fait, les gars, oublié de vous le dire ici mais pour ce qui est de la page de collection en couleurs, j'en ai créé de nombreux cadres. Chaque image, je la place dans un cadre. Il suffit de copier puis de faire de même, pousser le cadre vers le haut et de le remplacer par l'autre cadre et ainsi de suite jusqu'à ce que le cadre lasa ressemble à ceci OK ? J'ai donc ajouté cette flèche dans chacun des cadres. Nous faisons la même chose qu'avant. Créez de nombreux cadres. Chaque cadre doit avoir une image différente. Il suffit de copier le cadre, placer les autres éléments en bas du cadre principal et de poursuivre la même procédure. Jusqu'à ce que vous ayez chaque image dans un cadre différent. Rien qu'en bas de page, je l'ai laissé comme ça plus grand que l'autre. Alors c'est tout. Nettoyez toutes les pages et placez-les dans la bonne position. OK. Ce que j'ai fait pour le sélecteur de couleurs est tellement simple Je lie chaque carré au cadre de l'image qui a la même couleur. Il s'agit du bouton « En savoir plus ». Je le lie au bas de la page du Color College. OK ? Nous allons donc voir, je vais voir ça. Voyons donc l'animation. Comme vous le voyez, on clique, on scanne. Maintenant, nous allons à la page de collection, nous glissons, glissons, glissons. OK, revue d' image, revue d' image, revue d'image ici aussi. Parallaxe horizontale. OK ? OK. La critique de l'image de celui-ci. OK. Vas-y, c'est ça. Maintenant, cliquez sur la flèche pour revenir à la page principale. Cliquez sur le sélecteur de couleur, cliquez sur n'importe quel carré Tout d'abord, vérifions-le. Il s'agit du composant que nous avons créé. Maintenant je clique dessus. Je m' amène à cette image. Cliquez sur la flèche, ramenez-moi. Ramène-moi, choisis une autre couleur. Ramène-moi. L'animation est la même, dissoute et lente. Cliquez et ramenez-moi. Maintenant, si je clique, je peux faire glisser le pointeur vers le bas pour voir, cliquer sur En savoir plus et m' emmener sur cette page. OK. Cliquez sur la flèche pour revenir à la page principale. Maintenant, à propos de nous, ramène-moi en arrière. Dirigez-moi vers la page à propos de nous, flèche, contact. Cliquez sur les liens auxquels ils seront liés au cours de la phase de développement. OK, alors c'est ça. C'est toute notre interaction. Que nous avons créé pour notre site Web. C'est beau, créatif et soigné. Nous avons pu naviguer sur notre site Web très facilement et tout est lisible. 25. Découvrez les gestes et les interactions: Les détails graphiques et gestuels du processus de conception nous permettent de créer des détails qui surprennent nos utilisateurs Dans cette écoute, nous allons parler différentes manières d'ajouter des détails graphiques et du gester à notre proposition de design et de créer également un autre niveau d' interaction avec les utilisateurs Commençons. Ces détails ou interactions supplémentaires incluent la modification des curseurs par défaut lorsque nous visitons la page du site Web et une autre interaction supplémentaire qui ajoute beaucoup d'interactivité avec les utilisateurs et rend également l'expérience beaucoup plus amusante pour La seule limite que nous avons à ce stade est que les gester sont généralement difficiles à mettre en œuvre, car ils nécessitent une technologie de pointe et de nombreuses connaissances en matière de développement Mais d'un autre côté, les détails graphiques sont beaucoup plus simples et peuvent ajouter beaucoup de personnalité au design que nous avons réalisé. Pour donner un exemple de ces détails graphiques, je vais montrer plusieurs exemples. Et dans cet exemple de page Web, la première chose que vous voyez est la barre noire en bas avec le message qui s'anime et qui se répète. Et les utilisateurs le voient lorsqu'ils visitent la page Web. Le deuxième détail graphique est le curseur. Ils ont changé le curseur qui était par défaut légèrement plus grand et avec un type pixelisé Cela correspond très bien à la personnalité de la page. De plus, le curseur change lorsque nous interagissons avec un autre élément de la page. Enfin, ils voulaient ajouter cette section, nous permettre de faire glisser les cartes sur la page. Ce détail qui donne beaucoup de personnalité au projet, et c'est ce que l'utilisateur trouve très intéressant. Un autre site Web d'Also, ils ajoutent des détails très intéressants et ajoutent également de la personnalité au projet. Ce détail est un masque qui se déplace à l'aide de la souris et que vous pouvez voir dans la construction arrière des nœuds typographiques Il s'agit d'un détail relativement facile à implémenter lors du développement Et l'utilisateur le trouvera également très amusant. Ici, je veux vous montrer plusieurs exemples tirés d'un autre site Web où les détails graphiques et autres interactions rendent l'expérience utilisateur beaucoup plus amusante lors de la navigation sur la page. Par exemple, ce site Web de Feldman Studio regorge d'interactions qui permettent aux utilisateurs de créer une expérience lorsqu'ils naviguent sur la page En utilisant une action telle qu'un clic et un glissement, permettez aux utilisateurs de créer l'expérience. Par exemple, dans cette section, les cercles en arrière-plan réagissent au mouvement de la souris. Également en cliquant sur la page et en ajoutant des cercles intégrés à l'arrière-plan. Cela crée également une expérience très intéressante. Dans le modèle suivant, lorsque je déplace la souris, j'ajoute de légers creux au bas de la page De plus, les détails, bien qu'ils ne fassent pas partie de la proposition de conception visuelle en tant que telle, sont des éléments que nous pouvons proposer et ajouter à la page et qui rendent le résultat final beaucoup plus intéressant, que ce que nous faisons se démarque beaucoup plus des autres pages Web. Une autre page web que j'ai trouvée est également pleine de détails intéressants et d' interactions, Nathan Tokyo, où chacun de ces modèles réagit différemment à l'action que l'utilisateur fait avec la souris. Par exemple, dans ce modèle, la lettre change. Dans la suite, il y a des animations très amusantes. En général, chaque modèle réagit différemment à l'interaction de l'utilisateur. Ce qui rend l' expérience de visite du site Web très intéressante et très amusante. Et sans aucun doute, c'est page Web dont vous vous souvenez toujours. Chacun des modèles peut être différent, comme vous le voyez ici. Et certaines d'entre elles sont très faciles à mettre en œuvre sur le site Web, et elles rendront ce que nous pensons beaucoup plus amusant pour les utilisateurs, car nos propositions de design se démarqueront également des autres. Et ce qui s'est passé sur ce site, où je déplace la souris, je génère différentes images, en plus de l' image du centre. Suivez le mouvement de la souris pour créer un effet très intéressant. De plus, avec ce site Web, par exemple en tant que portfolio de designer, vous combinez des animations et d'autres détails graphiques plus simples tels que le changement du curseur ou ces changements de couleur en arrière-plan. Nous pouvons créer une proposition qui, même si elle n'a pas beaucoup de contenu, se démarque visuellement. Dans ce type de site Web, l'expérience est créée au fur et à mesure que l'utilisateur interagit avec celui-ci, et c'est quelque chose que nous avons trouvé très intéressant. Un autre site Web, nous pouvons consulter celui-ci de Daniil Spedzek. élément central de la télévision joue un rôle important dans l' introduction de Chaque fois que je choisis une option, nous montre une séquence animée sur le téléviseur, ce qui la rend si différente et si belle. Et chaque fois que je clique, le projet de travail apparaît sur le site. Autre exemple sur ce site Web où il possède un globe iFrame, vous pouvez interagir, comme un vaisseau spatial faisant le tour de ce Et chaque fois que vous optez pour une option click u Ball, pendant que vous cliquez dessus, vous la redirigez pendant que vous cliquez dessus, vous la redirigez vers une autre page, elle fonctionne C'est une façon très intéressante et créative de vérifier les œuvres. Et pour ce site Web, l'élément central est cet élément en trois D avec lequel vous pouvez interagir avec l'œuvre et la faire défiler pour la voir. Cela semble tellement plus simple, mais tous ces éléments donnent de la personnalité à ce site Web. Ici, le dernier site Web que je veux consulter est ce site Web qui vous donne des instaga de personnes nées dans les années 90 ou dans les années 80, où vous pouvez voir un vieux produit, le poser sur une table et avec lequel vous pouvez interagir En cliquant sur chacun de ces projets, il vous en donne le nom et vous montre également une vidéo animée sur This is a nostalgia alphabet C'est une expérience très créative et très belle à vivre qui provoquera beaucoup d' émotions chez de nombreuses personnes. Ce site Web peut également créer un lien avec les utilisateurs qui sont tombés sur cette erreur. Toujours en bas, nous avons ce clavier avec les touches cliquables Chaque fois que vous cliquez sur l'un d'entre eux, vous êtes redirigé vers un autre site de réseau social tel que X ou Instagram. En général, l'expérience de ce site Web donne beaucoup de plaisir et donne beaucoup de bonheur aux utilisateurs. Je suis donc toujours resté avec lui et je peux lui rendre visite plusieurs fois. Enfin, je tiens à vous inviter à toujours être très ouverts aux possibilités qui vous permettent de concevoir et de développer un site Web, car plus de nouvelles technologies sont très intéressantes et méritent également d'être étudiées. Cela nous permettra également de créer un projet de conception et de développement Web de la manière la plus simple, ainsi que d'autres ressources telles que des vidéos et son, ainsi que l'intelligence artificielle. Ces limites de ce que nous pouvons réaliser sont de moins en moins nombreuses avec l'apparition des nouvelles technologies. Cela nous ouvre de nouvelles possibilités pour rendre nos œuvres plus créatives et plus faciles. À ce stade, nous devrions avoir terminé la proposition de conception de notre site Web. Cependant, certains processus sont tout aussi importants que la conception pour garantir le succès de notre produit une fois que nous aurons finalisé la conception de notre projet 26. En savoir plus sur la représentation et le retour: Représentation et feedback. Présentation au client Dans le cadre d'un processus de conception, il est important d'avoir une communication affirmée avec notre client Car cela nous aidera également à clarifier nos idées et à poursuivre ainsi le projet. Cette écoute nous expliquera comment présenter une proposition de design à notre client. Une bonne relation avec notre client permettra au projet de continuer à avancer et de voir le jour. Certaines des recommandations à présenter au client sont les suivantes : il est important de lui faire comprendre comment les décisions de conception soutiennent ses objectifs. En plus de leur faire comprendre le processus sous-jacent à chaque décision. Cela nous aidera à montrer client que tous les éléments que nous avons décidés sont justifiés pour une raison ou une autre. Ensuite, pour chaque point de décision, nous montrerons que nous avons pris notre décision en fonction du brief et du projet de recherche. Cela signifie que si nous décidons de prendre une couleur, par exemple le rouge, nous allons vous montrer d'où proviennent ces informations dans ce brief. Troisièmement, lorsque nous proposons des idées de design plus créatives et plus risquées, nous pouvons montrer à nos clients comment les choses les rapprochent d'entreprises beaucoup plus innovantes et les éloignent de leurs concurrents. Quatrièmement, pour que le client vous donne une idée de ce que vous allez recevoir au final. Ce que nous aimons faire et c'est une bonne pratique, c'est de quitter le prototype de Figna dans sa version desktop et mobile Cela vous permettra de vous rapprocher de ce que vous recevrez lorsque la page sera déjà développée. Cinquièmement, en abordant la question de l'interaction et du mouvement. Ce que nous aimons faire, et c'est une bonne pratique, c'est de faire progresser ou de montrer la progression de cette animation réalisée dans After Effect. Nous utilisons également des références d'autres sites Web pour que nos clients comprennent de manière beaucoup plus claire ce que nous voulons réaliser avec le produit Sixièmement, à la fin de chaque étape de conception, il est important de recevoir l'approbation du client. Cela permettra d'éviter des retards et des revers à l'avenir. Cette autre recommandation pour représenter votre travail auprès du client, un autre élément important de la communication avec notre client est de pouvoir recevoir ses commentaires. Nous constatons souvent que le processus de feedback nous empêche de créer une proposition de design intéressante et créative. Mais si nous créons ce processus manière organisée et en cliquant, cela peut nous aider beaucoup à améliorer notre proposition et à créer quelque chose de plus en plus intéressant. Le bon processus de feedback est très important pour pouvoir avancer dans le projet de manière organisée. De plus, il est essentiel de créer une bonne relation avec nos clients. Et pour cela, c'est très important. Les commentaires sont précis, exploitables et visibles pour l'ensemble de l'équipe Il est très important que nous ne considérions pas le client comme une personne qui tue la créativité dans le projet. Au contraire, nous devons considérer comme un allié et faire partie de l'équipe de conception. Je recommande d'éviter les commentaires immédiats et variables. Certains commentaires peuvent provenir d' une réunion ou d' une présentation, mais il est très important qu'à la fin, nous consolidions le tout par écrit. Ce sont là des points que nous considérons comme très importants. Le feedback doit être visible. Il est important de disposer du feedback écrit et d'un outil permettant à toute l'équipe de le visualiser. Les commentaires doivent également être clairs. Dans le processus de feedback, il est important de détailler à quelle partie du design nous faisons référence, par exemple, à quelle page, à quelle section ou à quel appareil. Les commentaires doivent également être exploitables. Il est important d'éviter toute ambiguïté et de souligner ce qui devrait être différent et comment Enfin, de nombreux outils nous permettent d' organiser les commentaires, tels que Notion, Asana ou Trello L'important est que ce soient des outils utilisables par toute l'équipe. À la fin de la phase de conception et de feedback avec le client, la dernière étape consiste à s'assurer que ce que nous avons créé tout au long la phase de conception se reflète de la même manière dans le développement. Comme vous l'avez vu ici, tout ce dont nous parlons à ce sujet. C'est écrit en détail dans ce fichier HTML du guide UX UI, que j'ai créé moi-même pour vous et pour ce cours. Nous le laissons entrer dans la source matérielle de la classe pour que vous puissiez l' ouvrir et l'utiliser. C'est tellement simple, comme les autres fichiers HTML que j'ai créés, il suffit de double-cliquer dessus pour apparaître dans le navigateur et vous pouvez le parcourir. Dans la leçon suivante, nous allons parler du Guide de style. 27. En savoir plus sur le guide de style: Il est très important de s'assurer que le design que nous créons sera intégré au produit final. Les guides de style sont un très bon outil pour cela. Ici, nous pouvons générer des règles claires sur le style de conception d'un site Web, telles que la typographie, couleur et les composants, entre autres choses, qui sont très utiles pour démarrer le processus de développement Voyons pourquoi ces guides de style sont importants pour notre projet et comment nous pouvons en créer un. Dans ce guide de style, l'idéal est de pouvoir organiser les polices, les couleurs et l'espacement, autres composants que nous utilisons dans la phase de conception de notre site Web, afin de garantir que le résultat final du projet soit exactement tel que nous l' imaginons et le concevons titre de recommandation, il est très important de se mettre d'accord avec les personnes qui seront chargées du développement du projet avant de quitter le guide de style le guide de Dans les valves, ils vont utiliser sur des sujets tels que la typographie, la couleur, l'espacement, etc. De cette façon, nous nous assurons que si la typographie est implémentée en pixels, par exemple, nous le ferons également dans le guide de style De même, également si les couleurs doivent être utilisées en hexadécimal en Go, entre autres. Sur Internet, nous pouvons trouver nombreux exemples de guide de style et système de design que nous utilisons par les plus grandes entreprises du monde. L'un des plus célèbres et importants s'appelle Material Design by Goog Et sur leur site Web, nous pouvons trouver toutes les finitions et toutes les recommandations pour l'utilisation du style et des composants qu'ils utilisent dans leurs projets. C'est un très bon guide pour commencer et pour nous donner une idée de la façon de créer un guide de style et tard ou plus tard, de compléter un système de conception. Par exemple, nous pouvons voir la définition de la couleur. Quelle est l' utilisation suggérée des couleurs, combinaisons, de l'accent, des couleurs principales et secondaires, entre autres. Ce guide complet comprenait des ressources telles que le fichier Figma, documents techniques pour la mise en œuvre lors du développement Comme nous pouvons le constater, il s'agit guide très complet et complet, car il existe de nombreux projets numériques basés sur la conception de matériaux. Nous pouvons également trouver la définition, la typographie, les recommandations d'utilisation, ainsi que l'échelle typographique Recommandé par Google, basez-le sur leurs polices roboto et noto En plus de la section principale d'un style, qui sont la couleur et la typographie, nous pouvons trouver une section complète dédiée aux composants rejetés dans le projet Par exemple, l'un des plus importants est le flacon. Nous pouvons trouver ici des exemples d'utilisation, recommandation, de restriction, entre autres. Nous avons également une section dédiée aux composants très importants, qui incluent les spécifications de conception de tous les ensembles. exemples incluent également les geogs, les menus, les barres de navigation et bien d'autres ressources techniques pour le développement Tous les projets numériques ne nécessitent pas un guide de style complet. Je recommande de commencer par styles et composants les plus importants dont nous savons qu' ils sont utilisés tout au long du projet et développer progressivement à mesure que le projet évolue. Un autre exemple que j'ai trouvé également très intéressant est le système de conception d' IBM, appelé carbone. Nous pouvons trouver les différentes directives du principe de conception le plus important qu'ils utilisent pour créer tous leurs projets numériques. Comme dans le cas de la conception des matériaux, il existe des recommandations et des explications sur l'utilisation de la couleur en plus de l'utilisation de la typographie, appelée IBM Plex dans le cas de l' ABM L'échelle typographique, l'utilisation de différents styles limitent entre autres. À partir de ce système de conception, il convient de souligner la section consacrée au mouvement, car elle reflète très bien la manière dont nous pouvons donner vie aux valeurs des marques, telles que la productivité et l'expression dans les propositions d'animation. En outre, il inclut un autre sujet important, espacement. Nous définissons également l' échelle d'espacement en fonction des pixels Enfin, nous pouvons voir qu' ils ont des sections complètes. Pour de nombreux composants, par exemple, formulaires dans chacun des champs, barres de progression pouvant être utilisées dans un projet numérique différent. Ce système de conception est très complet et très bien expliqué. Je recommande donc de jeter un œil, comprendre chacun des composants proposés pour le prendre comme exemple lors de la création d'un système de conception. Pour notre projet, il est facile de comprendre qu'il peut également être utilisé par toutes les personnes dans le vide. dernier exemple dont je veux parler concerne le système de design Milk Chimp, bien qu'il soit beaucoup plus simple que les autres que nous venons de voir, il contient des éléments essentiels pour comprendre comment créer un projet numérique basé sur la marque Par exemple, pour la définition des couleurs, commencez par la couleur principale de la marque, puis ajoutez une couleur fonctionnelle et une couleur de feedback pour accentuer la couleur du message de réussite ou d'erreur aux moments où nous voulons attirer l'attention. Comme nous pouvons le constater, la définition de chaque couleur contient les éléments essentiels à utiliser dans le projet. Par exemple, la définition de l'inaccessibilité des valeurs higadisimal pour savoir si chaque couleur peut être utilisée avec un texte en noir ou blanc ou avec une Ce système de conception explique également de manière très claire l'utilisation des grades afin que équipes de conception et de développement puissent les utiliser. Et pour ce qui est de la typographie, il est également expliqué très facilement comment utiliser chacun des poids et du site, fois dans les titres et les paragraphes Et incluez également les composants les plus courants tels que les boutons dans leurs différents états, les tableaux et des éléments plus globaux tels que la navigation. Comme nous pouvons le constater, ce système de conception est beaucoup plus concret que les autres que nous avons vus. Mais c'est un très bon guide pour l'équipe de conception et de développement, qui inclut ce qui est nécessaire pour créer un projet numérique en utilisant la marque du chimpanzé mâle C'est également un excellent outil pour gagner temps dans le processus de conception et de développement. De cette façon, nous nous assurons également que le résultat de notre projet sera le plus cohérent possible. Pour continuer, je pense qu'il est très important de faire la différence entre le guide de style et le système de conception. Depuis ces termes, ils sont souvent utilisés pour désigner des sujets similaires. En bref, le guide de style est une définition de base d'un élément, tel que la typographie, la couleur, espacement et les composants de base à utiliser dans le développement D'autre part, le système de conception est utilisé dans projets beaucoup plus complexes et robustes. Il est généralement créé lorsqu'il existe un processus constant d' ajout, de modification et de suppression de composants entre la conception et le développement . Il existe de nombreuses informations sur le système de conception sur Internet. Comme c'est un sujet très pertinent aujourd'hui, en particulier dans les entreprises technologiques ce projet nécessite une mise à jour constante et une grande cohérence à mesure qu'un projet prend de l'ampleur. Le composant qui nous permet d'utiliser un élément qui sera utilisé sur d'autres pages, toutes variantes du même composant à utiliser dans notre projet de conception. Par exemple, voici tous les états que le démarrage peut avoir Et le dernier outil que je recommande d'apprendre est l'autoayout qui vous permet de créer un groupe d'éléments différents et de les synthétiser de manière très simple Pour mon projet, j' utilise généralement ces sites Web pour la typographie Exemple, une fonderie de tipo. Il s'agit d'un site Web très intéressant pour le poids typographique Nous vérifions comment le téléphone a été utilisé. Il y a beaucoup de choix, et c'est également représenté d'une très belle façon. Je pense que la définition principale est très importante pour mener à bien le projet de développement. Par exemple, la première chose faire est de créer un guide sur la typographie, et de définir tous les styles à utiliser pour les titres, les paragraphes et les autres éléments de texte qui peuvent être utilisés dans la proposition de conception Chacune de ces définitions inclut l'utilisation que vous vouliez lui donner taille et du poids de la police. Par exemple, ce sont de grands titres comme H un, H deux et H trois, qui définiront ensuite les valeurs de ces téléphones. Ainsi, la personne qui va développer le projet pourra trouver la définition exacte de la typographie pour chacune de ces utilisations abandonnées Cela est très utile et permet de gagner beaucoup de temps dans le processus de développement. Assurez-vous également que le style sera mis en œuvre comme nous l'imaginons De la même manière, nous définissons les styles des paragraphes et incluons, à partir de la taille, comme l'espacement, les poids de la source, entre autres Et dans cette partie, je voulais inclure un autre style de texte que nous utilisons tout au long de la page, mais qui n' entre pas dans la définition du titre ou des paragraphes Par exemple, des numéros, des liens, qu'ils soient internes ou externes. Je pense qu'une telle définition claire de la police facilitera grandement la vie de la personne qui sera chargée du développement du projet. De plus, vous pouvez créer une cohérence dans la conception d' écrans tels qu'un mobile ou une tablette ou des écrans beaucoup plus grands. Et cet instinct inclut également une certaine définition de la couleur. Par exemple, la couleur principale de la marque avec ses cochons respectifs est un code décimal, ce qui la rend beaucoup plus facile à implémenter dans le développement du projet ainsi que les couleurs complémentaires, nous utilisons le plus souvent dans les filtres du peg De même, cette section d'une couleur peut continuer à être complétée, par exemple, avec différentes teintes ou nuances pour chaque couleur que nous pouvons utiliser dans différentes actions, comme le survol sur les boutons ou dans éléments complémentaires tels qu'une illustration ou Avant de poursuivre, je voudrais vous montrer quelques exemples de mes précédents travaux. Dans cet exemple de site Web, j'utilise cet élément très simple pour le rendre spécial. J'ai joué avec une faute de frappe et créé ce cercle géométrique qui continue de tourner en boucle Et aussi la transition que je rends si belle à chaque fois que je clique en bas, elle montre la couleur et m'amène à une autre page. Un autre site Web que j'ai créé est également plus simple, animant cette barre en bas en boucle, et l'utilisateur peut interagir avec la sphère sur laquelle il se fait un signe de tête Tu peux voir si je clique sur travailler. Je n'ai pas d'images ici, mais voici comment on passe d' un plat à l'autre est très simple, mais aussi très créatif. Ce site est très sympa car j'ai travaillé sur l'interaction des barres de couleurs ici même. Chaque fois que je survole, je peux interagir avec ces barres Ils constituent l' élément central de mon site Web. Ensuite, lorsque je choisis chacune de ces options, vous pouvez voir comment fonctionne la transition. J'ai tellement compté sur les couleurs de ce site pour arrêter de cette façon. Maintenant, comme vous le voyez ici pour mener à bien notre projet de développement, je pense que sa définition de base de la couleur est largement suffisante. Enfin, je voulais aussi ajouter que j'ai mis un guide pour une couleur ici. Tu peux vérifier. Enfin, je voulais également ajouter un guide sur l'espacement, lequel nous définissons les espaces qui doivent se trouver entre tous les éléments de la page Pour ce guide d'espacement, je m'appuie sur huit pixels déjà expliqués dans les leçons précédentes et je définis également la relation entre l' espacement des mises en page sur ordinateur de bureau et mobile C'est pourquoi il est beaucoup plus clair pour le développeur définir cet espacement dans la feuille de style Et nous pouvons également continuer à compléter ce guide de style en réutilisant les composants que nous utilisons sur toute la page Web Par exemple, les boutons renvoient entre autres. Mais c'est un très bon début. S'aligner sur le développeur du projet et garantir que le style que nous proposons dans Figmre se reflète la même manière dans la phase de développement du projet Je crois également qu'il est plus important qu' un guide de style d'avoir une très bonne communication avec les personnes en charge du développement, de tout le style et de toutes les composantes de notre projet. fois toutes les étapes de conception terminées, l'étape suivante est le développement du projet. Ici, nous terminons toute la conception du site Web que nous avons commencée à partir du brief créatif, de la recherche et de la stratégie à suivre tout au long du wireframing, la phase de conception, ainsi que des éléments graphiques, l'interaction, du motion Toutes ces leçons que nous suivons vous permettent de créer une bonne conception de site Web propre et lisible pour n'importe quel client, pour n'importe quel projet. J'espère que vous avez appris tout le nécessaire pour commencer votre voyage. C'est tout et j'espère que cela vous sera très utile. Merci d'avoir suivi ce cours. 28. Projet de classe: À la fin de ce cours, vous appliquerez toutes les compétences et techniques que vous avez apprises pour concevoir un site Web complet centré sur l'utilisateur un concept à un prototype interactif Votre défi consiste à sélectionner créneau commercial ou l'idée qui vous inspire, il s'agisse d'un café local, d'une marque de mode durable, d'une start-up technologique unique ou même d'un portfolio personnel. Vous créerez ensuite un site Web réactif , engageant et hautement interactif qui répond parfaitement à son objectif et à son public cible. Ce projet n'est pas qu'un exercice. C'est l'occasion pour vous créer un portfolio puissant, montrer au cas où vous êtes capable de relever un défi de conception FOUXUI du début à la fin pour un scénario réel de votre choix