Conception Web pour débutants : comment concevoir un site Web dans Adobe XD (UX/UI)

1. Bienvenue: La plupart des gens pensent qu'il faut dépenser des milliers de dollars un diplôme en design ou pour des camps d'entraînement immersifs pour obtenir votre étoile dans l'industrie du design aujourd'hui, mais ce n'est tout simplement plus le cas. Si vous comprenez les principes fondamentaux d' un bon design et que vous mettez en œuvre ces stratégies de conception, ce projet de design d' intérieur, je vous promets que vous serez en mesure de réussir votre carrière de designer. Je l'ai mentionné avec Steel et je suis un graphiste autodidacte qui gère mon entreprise à plein temps sur mon ordinateur portable, ce qui me donne essentiellement la liberté de faire davantage de choses que j'aime sur un base fréquente. Je me concentre principalement sur l' image de marque, la conception de sites Web et la rédaction de cafés de vente pour les entreprises et les secteurs de la santé, du bien-être et du coaching. Et j'ai travaillé avec des clients tels que Clear Skin Lab, The Future Quote, Sophie, Dear, Qian Harmony et bien plus encore. Je n'ai pas de diplôme en design et, en théorie, n'ai pas les qualifications requises pour pouvoir me qualifier de designer. Mais j'ai pratiquement tout appris par moi-même sur le tas en mettant en œuvre des stratégies que j'ai apprises dans le cadre de cours tels que celui-ci Mon portfolio prouve qu' on peut devenir designer quoi qu'il arrive. Si vous êtes prêt à décrocher votre étoile dans l'industrie du design, vous devrez apprendre à faire preuve de débrouillardise, à travailler et à commencer à mettre en œuvre des stratégies pour mettre en valeur votre portefeuille de manière à vous pouvez présenter en toute confiance un argumentaire ou des services à vos clients idéaux. Je crois sincèrement en l'apprentissage actif, c'est pourquoi j'ai créé à l'intention des clients des dossiers pour le projet de classe. Tout au long des différentes leçons de ce cours, vous serez en mesure de suivre et de mettre en œuvre vos apprentissages dans les projets de classe que j'ai créés pour vous. Ce cours est conçu pour tous ceux qui souhaitent se lancer dans le secteur de la conception Web, qu' ils soient indépendants ou dans le monde de l'entreprise, ou pour ceux qui souhaitent en savoir un peu plus sur le site Web processus de prototypage et Adobe XD. Merci de m'avoir choisi pour participer à votre parcours de conception, et j'ai hâte de commencer. 2. Présentez-vous: Maintenant que tu en sais un peu plus sur moi, je veux te connaître à un niveau plus personnel. Présentez-vous dans la section de discussion ci-dessous en indiquant votre nom, votre âge , vos antécédents en design, votre origine et les aspects de l'industrie du design qui vous intéressent le plus. Ce sera une excellente occasion de nouer liens avec d'autres étudiants qui suivent également ce cours et qui en sont à une période de carrière similaire à la vôtre, ou de nouer avec des personnes qui suivent ce cours les industries que vous aspirez à devenir. Je vais y aller en premier. Je m'appelle Angelica, j'ai 25 ans. Je suis un graphiste indépendant spécialisé dans l'image de marque, conception de sites Web et rédaction. Je travaille dans l'industrie depuis plus de trois ans et ce n'est pas fini J'adore relever des défis ma créativité au quotidien et en travaillant avec de multiples clients sur quotidien et en travaillant avec de multiples modèles commerciaux différents, dans de nombreux États et pays différents. L'une de mes activités préférées de tous les temps mon entreprise de design est de pouvoir aider entrepreneurs de tous les secteurs d' activité à créer une base d'attache qui leur permet se présenter en toute confiance à à leurs clients et à diffuser leur mission dans le monde entier. Maintenant c'est ton tour. Assurez-vous de vous présenter dans la section de discussion ci-dessous. 3. Projets de votre cours: J'ai créé un PDF de classe qui accompagne tous les différents dossiers de projet que je passe en revue dans ce cours. Ainsi, vous pouvez facilement référencer des devoirs à votre rythme. N'oubliez pas de vous rendre dans la section Ressources pour télécharger votre PDF, puis nous pourrons passer à la section des projets de classe. Dans le PDF, vous trouverez les quatre dossiers clients, ainsi que les différents paramètres de conception et les défis associés à chaque mission. Vous trouverez également une liste de ressources qui regroupe les différentes plateformes utilisées au quotidien dans mon entreprise de design. Dans ce cours, je vais passer en revue l'ensemble de mon processus pour chaque brief de projet. Et vous serez également en mesure de suivre et de mettre en œuvre ces stratégies dans votre propre projet de classe premier projet est un studio de yoga appelé Alchemy Yoga. Ils n'ont aucun atout de marque, c' est-à-dire pas d'images , de couleurs, de café ou d'image de marque, mais souhaitent créer un site Web neutre et organique . appelé Catch 35. Ils possèdent des actifs de marque existants tels que le logo, menu, les images et le café. Et ils sont en activité depuis plus de dix ans et souhaitent moderniser leur site Web. Et en gros, vous allez utiliser leurs actifs de marque existants et moderniser leur site Web d'une manière qui vous convient un peu. Dans le troisième brief de projet, vous avez toutes les rênes créatives pour concevoir un site Web et votre propre style. Vous aurez deux options. La première option consiste à remanier le site Web d'une entreprise ou d'une marque de votre choix. Et la deuxième option est de concevoir un site Web pour un client de rêve, ou de faire croire que ce projet est conçu pour vous aider à découvrir votre propre style de design dans le secteur dans lequel vous aspirez, dans le cadre d'une expérience. avec différents éléments de design qui vous attirent naturellement. Et le brief du projet est de concevoir votre propre site Web. En tant que designer, le défi sera d'utiliser vos propres images et de rédiger votre propre texte de site Web qui vous indiquera , en tant que designer recherché, vous trouverez mon processus exact sur la façon dont j'aborderais chaque dossier client en fonction des paramètres définis pour les projets. Vous serez également en mesure de suivre et de mettre en œuvre toutes ces différentes stratégies en fonction de ce que vous avez appris dans chacun des dossiers clients. J'ai tellement hâte de commencer. Assurez-vous de télécharger le PDF dans la section des ressources. Et je te verrai dans la prochaine vidéo. 4. Ressources en conception graphique: Donc, avant de vous montrer mon processus exact de conception de sites Web, je voulais vous présenter très rapidement certaines de mes ressources les plus appréciées mon processus exact de conception de sites Web, je voulais vous présenter très rapidement certaines lors de la conception d'un site Web et prototypage. un site Web en termes d'inspiration en matière de design, si vous avez déjà travaillé dans le domaine du design, vous avez probablement entendu parler de nombreuses ressources de ce type, mais Pinterest est évidemment un très bon endroit pour trouver l'inspiration. Vous pouvez simplement effectuer une recherche dans la barre de recherche ou design Web et le design de marque, le design éditorial. Et je vais également vous montrer que dans mon processus de conception, plus tard, Behance est une autre très bonne plateforme pour les graphistes en général Vous pouvez y trouver de l'inspiration pour la conception de sites Web, conception de logos source d'inspiration, et entrez également en contact avec d'autres designers. Et dribbler avec trois B est également une très bonne ressource pour les designers. Vous pouvez l'utiliser comme hub pour trouver inspiration pour des applications, des sites Web, marques, à peu près tout ce que vous pouvez trouver sur Dribble en matière de design. Ce sont donc les trois principales sources d'inspiration en matière de design que j'utilise au quotidien dans mes projets. Et ils sont tous très, très utiles pour trouver des polices, icônes et d'autres actifs de marque. J'utilise deux ressources principales. Le premier est Envato Elements. J'ai donc un abonnement mensuel à Envato Elements. Je pense que cela en vaut vraiment car vous payez un abonnement mensuel, mais vous avez ensuite accès à toutes sortes de polices, toutes sortes de graphiques, toutes sortes de modèles. Et vous pouvez vraiment l'utiliser comme ressource pour trouver des icônes. Ainsi, même si je consulte les modèles graphiques, vous verrez également qu'il existe des maquettes que vous pouvez utiliser dans vos projets de marque. Et j'adore vraiment cette plateforme et je l'utilise vraiment au quotidien pour trouver l'inspiration pour tous mes projets. Vous pouvez trouver des icônes, tout ce à quoi vous pouvez penser, vous pouvez probablement le trouver sur Envato Elements. J'adore vraiment cette plateforme. C'est honnêtement ma plateforme de prédilection pour tout ce que j' utilise en termes de design Creative Market est un autre endroit vraiment intéressant à trouver. Polices, icônes, modèles graphiques, etc. J'ai déjà acheté des packs de polices ici. Et ce que j'aime vraiment à propos de Creative Market, c'est qu'ils proposent de très bons modèles pour l'image de marque. Plus précisément, je dirais, mais vous pouvez trouver à peu près dans la plupart Creative Market, qu'il s'agisse de modèles de réseaux sociaux, maquettes, de CV, présentations ou de tout ce qui concerne le design, vous pouvez le trouver sur Creative Market. Ce sont donc les deux principaux sites que j' utilise pour trouver des polices, des icônes, parfois des images libres de droits, parfois des vidéos libres de droits, très souvent des maquettes pour mes projets de marque. Donc, si je veux présenter l'un des logos que j'ai conçus sur une vitrine. Ils ont des maquettes où vous pouvez le faire. Voici donc mes deux principales ressources sur les domaines dans lesquels je trouve la majorité des actifs de ma marque, et honnêtement, ce sont dans lesquels je trouve la majorité des actifs de ma marque, mes deux ressources les plus appréciées que j'utilise au quotidien pour trouver une palette de couleurs. Coolers.co est donc un très bon forum pour essayer de trouver des palettes de couleurs. Je l'utilise également au quotidien. Ce qui est vraiment utile également, c'est qu'ils ont des noms colorés. Donc, si vous concevez un guide de marque, vous pouvez également l'utiliser car certains de vos noms de couleurs figurent dans votre guide de marque. Coolers.com est donc une très bonne ressource pour trouver couleurs et le générateur de palettes de couleurs sur Canva. sais pas vraiment comment vous arrivez ici depuis la page d'accueil, mais je me contente généralement du générateur de palettes de couleurs Google Canva et cela apparaît. Ce qui est vraiment génial c'est que vous pouvez télécharger n'importe quelle image , puis ils vous montreront une palette de couleurs basée sur l'image que vous avez choisie. C'est donc très utile si vos clients ont leurs propres images et que vous souhaitez tirer des couleurs de leurs images C'est également une très bonne ressource pour cela. 5. Comment concevoir un site Web de conversion élevé: Avant de me lancer dans mon processus de conception, je voulais vous présenter très rapidement les différentes fonctionnalités qui vous aideront à créer un site Web à fort taux de conversion à notre époque. Vous ne devez pas seulement créer quelque chose de joli, mais vous devez également créer quelque chose stratégique pour commercialiser la marque avec laquelle vous travaillez. Donc, si vous savez comment concevoir vos sites Web avec une mentalité d'entonnoir, vous serez en mesure de présenter des résultats à vos clients de bien plus qu'un simple site Web. Je vais donc simplement vous présenter certaines des fonctionnalités, celles que j'ai sur la majorité de mes sites Web. Tout d'abord, nous voulons parler de la création d'un entonnoir stratégique sur votre page d'accueil. Si vous êtes designer et que vous n'avez aucune formation en marketing, vous ne savez peut-être pas vraiment ce qu'est un entonnoir. En gros, un entonnoir marketing permet de créer une approche plus stratégique entre amener une personne qui ne connaît pas la marque à vraiment la connaître, à atteindre les marques et à travailler ensemble. Positionner stratégiquement quelqu'un pour qu'il atteigne réellement la marque pour laquelle vous concevez un site Web afin qu'il puisse augmenter ses ventes, réserver un appel, acheter un produit, etc. cette nature. La clé est donc de s'assurer qu'ils agissent réellement sur l'action principale vous souhaitez qu'ils entreprennent. La page d'accueil d'un site Web est donc une première impression et une introduction à la marque C'est pourquoi il est extrêmement important de la concevoir de manière à canaliser les internautes sur l' ensemble du site Web. Une chose à noter est que votre page d'accueil doit comporter une description détaillée de chaque page du site et doit naturellement encourager les internautes à passer à l'étape suivante, qui consiste à naviguer parcourez le reste du site pour en savoir plus ou pour prendre des mesures à la fin de tout cela. Donc, en ce qui concerne votre page d'accueil, votre page d'accueil doit renvoyer vers chaque page intérieure que vous avez. Donc, si j'ai une page de services, je veux m'assurer que sur ma page d'accueil, je touche la page des services. Si j'ai une page de portfolio, je veux m' assurer de toucher la page Portfolio sur ma page d'accueil. La page d'accueil sert d'entonnoir vers le reste de votre site Web. Donc, quel que soit votre âge dans votre navigation, vous devez vous assurer de toucher ce point sur la page d'accueil. Pour y parvenir, vous pouvez donc vous assurer désigner une section sur la page d'accueil pour chaque page du site Web. Comme vous le voyez sur le côté droit, il y a des appels à l' action à peu près sur chaque page et chaque section fait référence à ces différentes pages. Donc, si vous regardez attentivement ici, sur le côté droit, vous verrez que ces appels à l'action renvoient en fait aux différentes pages qui se trouvent dans la navigation principale. Une autre chose est de vous assurer que 80 % des sections de votre page d'accueil doivent comporter un appel à l'action. Et c'est pour les appeler à l'action. Cliquez sur la page suivante Pour en savoir plus sur la marque, pour contacter la marque pour acheter des produits. L'essentiel sur votre page d'accueil est de vous assurer que la majorité des sections de votre page d'accueil contiennent une sorte d'appel à l'action afin que nous puissions orienter les internautes vers la suivante de manière stratégique . page du site Web. Et enfin, toujours, toujours, incluez le dernier appel à l'action sur toutes les pages du site. Désormais, la plupart des sites Web ont un appel à l'action principal, en particulier lorsque vous débutez, mais ils peuvent parfois avoir plusieurs appels à l'action. Supposons, par exemple, que vous ayez une page de services ainsi qu'une page de cours. Sur la page des services, vous devez vous assurer que le pied de page contient l'appel à l'action pour réserver un appel commercial ou pour nous contacter pour en savoir plus sur la manière dont vous pouvez travailler ensemble. Ensuite, sur la page du cours, vous souhaitez explicitement appeler à l'action le fait que vous souhaitez que quelqu'un achète. Cela devrait donc être le dernier appel à l'action sur la page de notre cours. Assurez-vous d' avoir un appel à action sur chaque page principale. Ce n'est pas votre page d'accueil. Cela devient un peu verbeux, mais tout cela aura du sens une fois que j'aurai terminé mon processus. Ensuite, vous pouvez toujours faire référence ces points plus tard , lorsque vous vous lancerez dans la conception de votre propre site Web . La prochaine étape est de vous assurer d'avoir une accroche captivante et une copie cohérente, le héros de votre site Web, tout ce qui se trouve au-dessus de la ligne de flottaison. La première chose que vous voyez lorsque vous arrivez sur un site Web doit être écrite de manière claire et captivante. Ils doivent servir de point de repère à l'ensemble de votre marque pour vous assurer d'attirer les gens. C'est essentiellement un facteur décisif pour savoir si le prospect intéressé doit continuer à lire votre site Web ou s'il doit passer à autre chose et penser que ce n'est peut-être pas pour moi. Assurez-vous que votre texte est rédigé de manière stratégique de manière à décrire ce que propose la marque et le problème lui-même. Sur le côté droit, lorsque mes clientes, Sophie, qui est la coach en matière d'estime de soi, nous avons créé cette section consacrée aux héros pour nous assurer que nous apprenions auprès des bonnes personnes qu'elle sert. Et s'ils ne conviennent pas, ils seront généralement en mesure de le savoir dès la première section du site Web. Et il vaut mieux s' assurer de dissuader les clients qui ne lui conviennent pas le plus tôt possible. Il est donc très important de s'assurer que votre héros appelle réellement à l'action votre âme sœur, vos clients ou la marque. Donc, sur ce site Web que nous avons, il peut y avoir des milliers de choses sur votre liste de choses à faire. n'y a qu'un seul : vous, en tant que coach d'estime de soi, je vous aide à concevoir une vie qui met vos dons uniques et vision de la vie afin que vous puissiez vivre la vie. Tu ne peux pas arrêter de penser à. Cela crée un sentiment qui captive les intérêts de quelqu'un qui pourrait penser, oh, oui, que je mérite de vivre une vie plus épanouie. Et je vais en savoir plus sur ce que ce coach a à offrir, certaines choses pour vous assurer inclure dans votre héros ce qu'il est, ce que fait exactement la marque. C'est pour qui ? Qui appelez-vous à agir et pourquoi en ont-ils besoin ? Quel problème êtes-vous en train de résoudre ? Ce sont donc les principaux éléments que votre crochet doit couvrir dans la section principale au-dessus du pli. Ensuite, trois à cinq couleurs de marque et une cohérence globale. Les couleurs jouent donc évidemment un rôle important dans la cohésion d'un site Web, est pourquoi il est absolument essentiel de choisir une palette de couleurs et de s'y tenir. Lorsque nous nous en tenons à une palette de couleurs cohérente, nous sommes en mesure de donner vie à une marque grâce couleurs et de susciter différentes émotions fonction des couleurs que nous choisissons. Sur le côté droit, vous pouvez voir que la cohésion est vraiment renforcée par les couleurs principales. Nous avons donc trois couleurs principales, comme le bleu, le jaune et l'orange. Et puis nous avons les couleurs d'accent, c' est-à-dire le blanc et le blanc cassé pour créer ce contraste. Je dirais donc deux à trois couleurs principales et éclatantes. Et puis vous pouvez avoir du blanc, du blanc cassé et du noir. C'est généralement ce que j' utilise dans mes palettes de couleurs. Si une marque veut être un peu plus dynamique, j'aurai peut-être une palette de couleurs secondaire. Mais dans la plupart des cas, en particulier sur un site Web, il est très important de ne pas choisir plus de trois à cinq couleurs de marque. Vous pouvez donc garder cette cohérence tout au long. Voici donc quelques moyens d'y parvenir Comme je l'ai mentionné dans la vidéo précédente, coolers.com est vraiment un excellent moyen de renforcer les couleurs de votre marque. Et encore une fois, assurez-vous d'utiliser trois à cinq couleurs cohérentes comme couleurs principales de votre marque. La prochaine étape est la cohésion des éléments visuels et de l'imagerie. L'imagerie évoque des émotions sans avoir à dire quoi que ce soit et joue un rôle crucial dans la définition de la personnalité de la marque. Il est très important pour un site Web d' avoir des éléments visuels cohérents, qu' il s'agisse d'images libres de droits, d'une séance photo de marque, d' illustrations ou d'une iconographie, peu importe ce que vous choisissez votre site Web sur lequel vous travaillez, il est essentiel qu' ils fonctionnent tous ensemble. Ces deux projets en bas à droite sont donc bas à droite deux projets sur lesquels j'ai travaillé. Des approches évidemment très différentes à ce que nous essayions de réaliser pour le Clear Skin Lab, nous voulions qu'il soit vraiment amusant, ludique et féminin. Pour la clé de l'harmonie. C'était un peu plus technique et nous voulions suivre la voie de l'illustration, ce qui était vraiment cool. Et évidemment, ces illustrations vont très bien ensemble. Pour les illustrations, je les ai trouvées sur Envato, puis pour ces images, je les ai trouvées sur Pexels, qui est vraiment un excellent site d'imagerie libre de droits. Pour y parvenir, vous pouvez donc essayer d'encourager votre client à investir dans une séance photo. Vous pourriez vraiment les aider à remédier à ce problème en s' inspirant de Pinterest et en créant un moodboard, puis en le donnant à votre client, pour qu'il le donne au photographe avec lequel il choisit de travailler. Il s'agit donc vraiment de vous assurer que vous êtes en mesure de capturer l'essence de la marque par le biais d'images. Lorsqu'il s'agit de demander à votre client d'investir dans une séance photo, autre méthode consiste à vous assurer que source d' illustrations ou d'images provenant d'un créateur. Pour le laboratoire Clear Skin, vous pouvez constater que de nombreuses images fonctionnent bien ensemble, car elles ont été réalisées par un ou deux photographes principaux que j'ai trouvés sur Pexels. Il m'a donc fallu un certain temps pour les trouver. Mais évidemment, plus on passe de temps à essayer de trouver de bonnes images, plus elles se refléteront également dans l'harmonie de la marque Qian. Même illustrateur, j'ai légèrement modifié les couleurs, mais cela a vraiment donné vie à la marque principale, ce qui était vraiment très cool à voir. La prochaine étape est une barre de navigation claire et concise. Sur le côté droit, nous avons plusieurs marques avec lesquelles j'ai travaillé par le passé et les différentes mises en page de navigation que nous avons créées pour chacune d'elles. Donc, en gros, votre navigation doit être claire et permettre à votre public de comprendre ce qui se passera une fois que je cliquerai sur une nouvelle page. Si un site Web propose plusieurs offres différentes, il est conseillé de classer les éléments dans des dossiers à l'aide d'une flèche déroulante pour réduire au maximum votre barre de navigation. Pour y parvenir, vous pouvez donc créer des sessions déroulantes pour des catégories similaires. Ainsi, si vous avez plusieurs cours, par exemple, vous pouvez créer un menu de cours avec une liste déroulante reliant tous vos différents cours afin de vous assurer que la barre de navigation de mai est relativement propre. Une autre méthode consiste à demander explicitement vos clients quelles pages intérieures ils ont imaginées pour leur site Web. Cela aide vraiment vos clients à vous communiquer ce qu'ils espèrent réaliser avec le site Web en tant que concepteur. Et une autre chose est que vous voulez vous assurer que les éléments du menu cohérents dans toute la structure du site Web. Ainsi, par exemple, le laboratoire Clear Skin propose trois appels à l'action, et chaque appel à l'action est une série de mots. Mais ce n'est pas grave , car cela fonctionne pour cette marque. Cela n'aurait aucun sens si vous aviez plusieurs séries de mots , puis un mot pour l'élément de navigation suivant. Assurez-vous donc d'avoir un mot ou un menu en plusieurs mots, si cela a du sens. Vous parcourez donc ces différents éléments de menu et barres de navigation pour voir ce que vous aimez en termes de mise en page. Oui, c'est très utile dans ce sens également. Je sais que je l'ai mentionné au début de la vidéo, mais un appel à l'action unique sur chaque page est tellement essentiel. Vous voulez demander à vos clients quel est le principal appel à action que vous souhaitez un prospect lance lorsqu'il consulte votre site Web. C'est un très bon point de départ pour vous assurer que vous êtes en mesure de concevoir un site Web d'une manière qui fonctionne de manière stratégique et crée du succès pour vos clients. Assurez-vous donc de toujours l'inclure au bas de votre page, puis de donner aperçu des raisons pour lesquelles quelqu'un devrait se précipiter , pourquoi quelqu'un devrait acheter, ou que doit-il faire ensuite ? En gros. Un site Web, une page de vente ou quoi que ce soit d'autre que vous concevez pour encourager quelqu'un à agir, à promouvoir une marque, à vendre un produit, à vendre un service. Et l'appel à l'action principal doit être répété non seulement sur l'ensemble du site Web et sur toute la page de vente ou sur toute cette page, mais également en bas de page pour réitérer le principal appel à l'action, vous voulez que quelqu'un prenne en charge. Une autre partie très importante et importante de la conception de sites Web est de s'assurer que vous divisez les gros morceaux de texte. Souvent, certains ont un client qui essaie de communiquer ce qu'ils proposent Les mots et la copie peuvent devenir très, très verbeux. C'est donc votre travail en tant que designer de vous assurer d'aider vos clients à diviser de gros morceaux de textes en différentes sections. L'essentiel devrait donc être que la copie sur le site Web soit très facile à digérer. Personne, et je veux dire, personne n'aime lire des paragraphes et des paragraphes de contenu. Vous voulez donc vous assurer de pouvoir communiquer votre message de la manière la plus simple possible pour vous assurer de le faire passer. Quelques moyens de diviser de gros morceaux d'impôts, de les diviser en différentes sections ou d'utiliser des puces, des icônes et des images. Sur le côté droit, vous pouvez voir que cette section est évidemment composée de mots, mais comme je l'ai divisée en différentes sections, cela facilite la lecture. C'est quand même beaucoup de mots, mais ensuite beaucoup de mots divisés en sections plus petites, ce qui encourage généralement le lecteur à le lire. Si tout cela était répertorié comme une section blanche vide, cela ressemblerait à un document Word et personne n'aime lire. Les gens sont naturellement attirés visuellement par les choses en fonction de leur apparence. Certains moyens d'y parvenir sont donc évidemment d'utiliser des puces lorsque cela est possible, diviser de gros morceaux de texte en plusieurs sections et vous assurer d'utiliser une hiérarchie des types claire et cohérente. Ainsi, sur le côté droit, vous pouvez également voir la hiérarchie des types. Vous avez des sous-titres, vous avez la police d'en-tête principale, vous avez la police de paragraphe, vous avez la police d'appel à l'action. Vous avez la section de notification en bas. C'est également une police différente. Donc, essayez simplement de rendre les gros morceaux de textes aussi agréables que possible. Ensuite, la hiérarchie des types est la hiérarchie des types. Et honnêtement, l'un de mes aspects préférés du processus de création de marque consiste à sélectionner des polices de caractères stratégiques pour créer une personnalité de marque et une marque plus mémorable. Il est donc très important de vous assurer d'avoir une police pour vos en-têtes, une police pour vos paragraphes, une police pour vos appels à l'action, une police pour vos sous-titres, généralement si vous utilisez une police avec empattement, donc comme une police tourbillonnante comme celle que j'utilise dans mon en-tête, il est bon d'utiliser une police sans empattement dans le formulaire de paragraphe. Et au fur et à mesure que vous concevez davantage de sites Web et de marques, vous comprendrez mieux quelles polices vont généralement bien ensemble. Donc, en général, si vous utilisez une police serif, c'est un peu plus complexe que d'utiliser une police Sans Serif plus minimale. Les paragraphes sont, le sous-en-tête aide en quelque sorte à séparer ces gros morceaux de texte et à rendre les choses un peu plus intéressantes visuellement. Ce sont donc les sections principales. N'oubliez pas de consulter la fin du classeur de votre classe pour trouver d' autres ressources de conception et des conseils utiles. Ensuite, vous pourrez toujours revenir et faire référence cette vidéo plus tard, une fois que vous aurez terminé le processus de conception. Mais je vais passer en revue tous ces différents aspects de la conception d'un site Web au fur et à mesure que je passerai conception d'un site Web au fur et à mesure que je revue les projets de mes clients. Plus tard dans ce cours, je voulais simplement les aborder et vous expliquer très rapidement certaines des principales fonctionnalités avant de nous plonger dans ces vidéos de processus. 6. Accueil Les instructions et l'anatomie: Dans cette vidéo, je vais passer en revue les instructions de copie. J'ai créé cette ressource pour que vous puissiez utiliser dans vos projets clients pour ce cours, ainsi que pour de futurs projets clients, soyez indépendant ou au sein d'une entreprise ou d'une entreprise que vous êtes travaillant dans. En gros, cela vous aide ici, n'est-ce pas ? La copie du site Web que vous utiliserez pour les sites Web de vos clients et qui optimiseront réellement l'expérience utilisateur. Ce message a une conception Web globale. Vous aurez donc des clients qui ne savent pas comment rédiger leur propre copie de site Web. Dans cette vidéo, je voulais vraiment aborder très rapidement le flux d'utilisateurs type dans le message global de la marque. Évidemment, cela changera en fonction du secteur du client pour lequel vous concevez un site Web. Mais cela vous donnera une idée générale. partir des designs UX que nous avons créés dans la dernière vidéo, j'ai également créé un look similaire ici et je l'ai décomposé en différents paragraphes de textes que nous pouvons utiliser pour aider à guérir Rate Copy. C'est incroyablement utile. Ou vos clients, s'ils n'ont pas leur copie. Et ce que je fais généralement dans mes projets de conception, c'est de placer ces déclarations directement dans un Google Doc et de collaborer avec mes clients jusqu'à ce que nous soyons satisfaits de l' orientation de la copie. Donc je vais juste passer en revue ça avec toi. N'hésitez pas à utiliser ces instructions de copie dans vos conceptions pour les brefs projets de vos clients ultérieurement. Ou vous pouvez simplement l'utiliser dans vos projets clients avec vos vrais clients. Je vais juste passer à pied. De toute évidence, nous avons le logo dans le coin supérieur gauche et dans l'en-tête principal. Cela inclura donc votre logo, votre menu, votre principal appel à l'action. Si vous travaillez avec une marque de commerce électronique, elle peut également inclure un lien vers le panier ou une barre de recherche. Il ne s'agit que de fonctionnalités de champ générales que vous auriez dans votre en-tête principal. Et puis vous avez l'image du héros, qui est essentiellement l'endroit principal au-dessus du pli. La première chose que les gens voient lorsqu'ils accèdent à votre site Web. Donc, ce que vous voulez faire matière de copie et ce que vous voulez faire en sorte vos clients fassent, c'est de vous assurer d'avoir une déclaration très percutante sur la marque qui attirera l'attention de votre public. C'est très important parce que le héros de votre site Web est essentiellement une personne qui visite votre site Web, un prospect, un utilisateur ou toute autre personne de votre public. Oh, ce site Web est pour moi. On dirait que c'est pour moi. Ou peut-être pensent-ils, oh, que ce site Web correspond à ce que je recherche en ce moment, je peux passer à autre chose. Vous devez donc vous assurer que, dans cette déclaration, dans votre section consacrée aux héros, vous parlez de manière précise et précise des problèmes que vous résolvez, à qui vous vous adressez et à ce que vous offrez exactement. En tant que designers, c'est tellement important et cela prend beaucoup de temps. Parfois, nous nous éloignons des choses centrées sur les messages parce que nous sommes attirés par les jolies choses. Mais la règle numéro un que j'ai en matière conception Web est de m'assurer que vous avez des sites Web qui convertissent. C'est pourquoi j'ai l' impression d'avoir si bien réussi dans ma carrière, c'est parce que tout ce que je conçois vise à orienter les gens vers une action principale que nous voulons que notre public entreprenne sur un site Web. Pour ce site Web, cela peut par exemple être destiné à un fournisseur de services ou à un créateur de cours. Essentiellement, vous voulez vous assurer que le texte contribue réellement à enrichir le parcours de l'utilisateur, qu' il accède à votre formulaire de contact, qu'il ait acheté un cours ou qu'il lise des informations sur votre services. Nous voulons essentiellement les faire avancer vers le bas de l'entonnoir afin qu'ils soient plus près du départ paiement d'un service ou de la collaboration avec vous. La première section est donc le héros, puis nous avons une autre section qui est une description plus approfondie qui aide à établir un lien émotionnel. Si essentiel que votre site Web communique la mission et le message de votre client d'une manière vraiment authentique. Vous ne faites que vendre, vendre, vendre sans vraiment régler les problèmes que vous résolvez, vous pourriez effrayer vos clients. En gros, vous dites que je suis le meilleur sans vraiment me concentrer sur les raisons égoïstes lesquelles votre public pourrait rechercher quelqu'un comme vous. Encore une fois, une autre introduction, une autre caractéristique commune est la présentation des différents services ou offres. Disons que nous proposons la conception de sites Web et l'image de marque, mais nous proposons également un cours en ligne ou quelque chose comme ça. Nous voulons nous assurer que les sections s'adressent à chacune des pages intérieures spécifiques que vous possédez. Donc, comme vous pouvez le voir ici dans ma navigation, j'en ai assez sur le portefeuille de blogs sur les services. Le parcours utilisateur de ma page d'accueil suivra le même format. Nous avons donc la section Accueil, qui est le héros. Nous avons une courte section À propos. Vous avez une section de services. Cela présente le blog, puis nous avons un portfolio. Plus d'informations sur la marque et la finale, contactez-nous. Vous pouvez donc voir que cette conception Web et cette invite de copie s'adaptent vraiment à tous les éléments, tous les différents liens de la barre de navigation. Encore une fois, nous avons le héros, nous en savons un peu plus sur la marque. Nous avons une présentation des services. Nous sommes attirés par le blog, nous avons le portfolio, nous avons rencontré le fondateur, puis nous avons pris contact. C'est donc quelque chose que vous pouvez créer lorsque vous créez l'anatomie du site Web sur lequel vous travaillez. Et c'est également très utile si vous créez un modèle que vous souhaitez utiliser encore et encore. Parce que la plupart du temps, les seules choses qui changent sur les sites Web sont les images qui changent complètement l' apparence générale d'une marque, la police ou les couleurs. C'est donc un très bon point de départ. Encore une fois, en s'appuyant sur la conception de l'expérience utilisateur. Encore une fois, nous avons l'expérience utilisateur, mais à la place, nous avons copié les instructions. N'hésitez donc pas à utiliser ces instructions de copie. J'ai lié ce fichier dans Google Drive, la section des projets de classe. Assurez-vous donc de le télécharger avec votre classeur. Et vous pourrez également utiliser dans les projets de vos clients. Je voulais donc simplement vous montrer cette ressource car c'est un bon visuel de la façon dont vous pouvez concevoir un site Web sans aucune imagerie, avec des couleurs très simples, avec des polices très simples. Et puis aidez également vos clients et aidez-les, accord, afin de leur transmettre le bon message. 7. Bref 1 : un studio de yoga: Bienvenue sur le premier dossier client, duquel nous travaillerons avec un studio de yoga. Vous pouvez donc trouver cette invite de projet dans votre classeur que j'ai fourni dans la section de téléchargement des cours. Je vais également passer en revue le brief et les informations générales du client et passer en revue l'ensemble de mon processus avec vous afin que vous puissiez vraiment comprendre la façon dont j'aborde les projets des clients lorsqu'ils me sont présentés, toute évidence, l'expérience d'un client change en fonction du client. Je voulais donc vraiment exprimer cela dans les différents dossiers clients que je vous ai présentés. Nous avons donc quelques missions différentes que vous pouvez choisir parmi Orfeo, vous pouvez toutes les choisir librement ou n'hésitez pas à choisir une, ou vice versa. Je vais juste zoomer ici pour que nous puissions vraiment comprendre la première question. Donc, le premier client est un client nommé Alchemy Yoga. Il s'agit d'un studio de yoga basé à Portland dont la mission est d'apporter un sentiment de calme dans la vie d'un plus grand nombre de personnes de tous horizons. Nous pensons que le yoga peut vous transformer à la fois sur le tapis et en dehors. Vision du site Web de la part des clients. Je veux que le site Web soit très neutre tout en restant très terreux. J'aime une esthétique minimaliste parce que j'ai l'impression qu'elle dégage une sensation de calme, d'invitation et d'équilibre. alchimie yoga est un espace où des personnes de tous les horizons peuvent venir s'entraîner et y trouver un sentiment de calme, parfois mouvementées et chargées. Je veux vraiment que cela apparaisse sur le site Web afin que les gens se sentent instantanément invités à la marque et l' espace dans lequel nous exerçons nos activités. Certains adjectifs qui décrivent le yoga alchimique seraient donc attentifs, terreux, organiques, neutres, suscitant un sentiment de calme, de chaleur et de confiance. Le principal défi du projet est que la marque est une start-up. Ils n'ont aucune image. Cela est très courant dans le domaine de la conception Web, en particulier lorsque vous travaillez avec startups ou de nouveaux propriétaires d'entreprise, ou des personnes qui essaient simplement de lancer votre idée d'entreprise. Ils ont donc besoin d'aide pour trouver des images libres de droits qu'ils peuvent utiliser comme espace réservé jusqu'à ce qu'ils soient en mesure de réaliser leur propre photo de marque. Ils n'ont pas non plus d'expérience dans la rédaction de textes de sites Web et un seul guide pour les aider à formuler le message de la marque à leur public. Tels sont les principaux défis que nous rencontrons avec les projets de ce site Web. Cela se produit très souvent lorsque quelqu'un vient vous voir. Ils veulent un beau site Web, mais ils n'ont pas encore de belles images. Si tel est le cas, vous pouvez soit encourager votre client à investir dans une séance photo de marque avec un photographe local et de sa région. Vous pouvez également leur proposer des images libres de droits qu' ils peuvent utiliser pour le moment et qu'ils pourront ensuite utiliser comme source d'inspiration pour notre future séance de marque avec notre future séance de marque avec un photographe lorsqu'il sera prêt à investir dans shooting de marque. Il s'agit donc de l'un des principaux défis du projet pour cette mission. Je veux que vous conceviez et prototypiez la page d'accueil du site Web d'alchimie yoga dans Adobe XD ou tout autre outil de prototypage que vous utiliserez. J'utiliserai Adobe, mais n'hésitez pas à utiliser Figma ou toute autre plateforme que vous êtes à l'aise avec. Voici donc quelques conseils utiles et les étapes du projet. La première chose à faire serait de vous assurer que vos images sources sont libres de droits. Il est très important que vous passiez du temps à rechercher des images que vous utiliserez. Parce que souvent, l'imagerie, la septicémie , le ton des couleurs vous devez sélectionner les polices, le positionnement de la façon dont vous allez concevoir le site Web. Et cela servira de base. Je sélectionne souvent les couleurs de ma marque pour un site Web en fonction de l'imagerie. C'est donc un bon point de départ et c'est un point que je commencerai lorsque je parcourrai mon processus. La prochaine étape serait de choisir les couleurs d'une marque en fonction de l'imagerie. Je viens donc de le mentionner. J'aime souvent choisir les couleurs de ma marque en fonction l'imagerie, car cela permet de créer et maintenir une apparence plus cohérente puis de prototyper la page d'accueil du site Web. Donc, pour ce projet en particulier, je ne ferai la page d'accueil du site Web que si vous voulez faire l'ensemble du site Web par tous les moyens, allez-y. Mais pour ce projet, puisqu'il s' agit de notre premier projet client, je me concentrerai uniquement sur la page d'accueil. Un défi facultatif que vous pouvez choisir d'accepter ou de refuser serait d' utiliser les instructions de copie fournies dans ce cours et de rédiger la copie pour vos clients. C'est souvent très difficile pour les designers, car en tant que designers on ne nous apprend pas nécessairement à écrire du café, mais à rendre les choses visuellement agréables. Donc, si vous voulez vous lancer un défi et trouver Mark, copiez pour Alchemy Yoga. N'hésitez pas à le faire et vous pourrez vraiment les aider à formuler leur message de marque. Et c'est quelque chose de très courant également dans le domaine du design. Si vous pouvez écrire, copier et concevoir des sites Web, vous aurez plus de pouvoir, vous vendrez beaucoup plus de services. N'hésitez donc pas à relever ce défi facultatif. Personnellement, je n'utiliserai que pompes à copie dans le prototype de mon site Web, mais n'hésitez pas à faire autrement. Donc, tout d'abord, je vais commencer par trouver de l'inspiration. C'est toujours par là que je commence tous mes projets de design parce que je veux vraiment me faire une idée de ce qui existe. Évidemment, je suis designer depuis un certain temps déjà, donc je sais déjà dans quelle direction je veux m'orienter. Mais s'il s'agit de votre introduction au design, c'est toujours une très bonne idée de vous inspirer du yoga, de laisser libre cours à votre créativité afin de vraiment avoir une idée du design que vous sera en train de créer. Je vais consulter le site Web de yoga et je ferai de même sur Pinterest. Et maintenant, il existe de nombreux sites Web différents que nous pouvons commencer à utiliser pour nous inspirer. Maintenant, certains adjectifs qu'ils utilisaient étaient très terreux, minimalistes et propres. J'adore donc vraiment ce look et je vais continuer à m'inspirer pour représenter les différents adjectifs listés dans le dossier client. Pour que je puisse vraiment une idée de la marque et de la direction que nous allons prendre. Encore une fois, je vais juste ouvrir quelques styles de conception de sites Web minimaux dont j'ai beaucoup aimé l'apparence, mais qui ne semblent pas trop clichés. J'ai l'impression que parfois, dans l'espace design c'est presque trop basique. Si cela a du sens. Je veux que ce soit minimal. Je veux que ce soit propre, mais je ne veux pas que ça ait l'air trop cliché. Je vais juste commencer à ouvrir différents styles de conception Web minimaux. Je vais donc faire une conception Web minimale et rechercher cela. Vous n'avez pas besoin de rechercher mises en page de conception Web dans l'espace yoga. Vous pouvez rechercher différents styles de conception de sites Web , puis les recréer dans le yoga Il est plus courant de recréer un style ou un thème que de trouver l'inspiration d'un site Web, en particulier dans votre niche pour laquelle vous concevez. Encore une fois, je vais continuer à rechercher des designs de sites Web minimaux. J'ai vraiment aimé celui-ci. Je vais juste continuer à chercher, à taper quelques adjectifs différents sur Pinterest juste pour m'assurer qu'on me montre des choses différentes, vraiment comme celle-ci. J'adore sa texture. Maintenant, j'ai quelques designs différents que j'aime bien et j'ai beaucoup aimé les couleurs ici. Nous avons des couleurs très neutres, des couleurs très douces. Et parce que certains des adjectifs utilisés étaient belliqueux, organiques, minimalistes, dignes de confiance, propres, simplistes. Je veux vraiment que cela se manifeste. Maintenant, j'ai de l'inspiration pour la conception de sites Web. Et encore une fois, je vais simplement les examiner de plus près. Vous êtes sur Pinterest et vous voyez un site Web que vous aimez. Vous pouvez faire défiler l'écran vers le bas et vous recevrez recommandations qui ressemblent à celles que vous aimez. C'est donc également très utile lorsque vous recherchez de l'inspiration pour la conception de sites Web. J'ai vraiment adoré cette phrase. J'ai l'impression que l' ambiance estivale est vraiment bonne. J'ai aussi adoré les vendredis d'été et oui, c'est tout pour le moment. Ensuite, j'ai une source d'inspiration en matière de design que je peux utiliser comme base. Encore une fois, je n'ai pas d'images, je n'ai pas de couleurs de marque. Je n'ai rien. Je pars complètement de zéro. Donc, la prochaine chose que je vais faire est de trouver des images libres de droits. Je vais donc ouvrir un nouvel onglet et passer aux pixels. C'est mon outil de prédilection pour les images libres de droits. Il s'agit probablement de nombreux autres sites Web sur lesquels vous pouvez trouver des images libres de droits. Il existe également des plateformes payantes sur lesquelles ils peuvent trouver des images. J'utilise des pixels. C'est ce que j'utilise pour peu près tous les projets de mes clients qui ont besoin de leur propre source d'imagerie, mais n'hésitez pas à en utiliser une autre de votre choix. Je vais chercher un professeur de yoga parce que, encore une fois, nous voulons faire savoir que nous travaillons avec une marque de yoga et qu'elle n'a pas encore d'images. Nous voulons simplement avoir une idée des types d' images qu'ils peuvent utiliser pour représenter leur marque. J'adore celui-ci, et je vais juste commencer à les télécharger. Je vais donc simplement cliquer sur Télécharger. Je vais le faire pour un tas d'images différentes. J'aime vraiment cette atmosphère de plein air et de terre, j'ai l'impression que c'est un centre de bien-être. Je vais donc télécharger celui-ci. J'adore ça aussi. J'adore les couleurs terreuses d'ici, alors je vais également télécharger celles-ci. Et souvent, ce que vous constatez, c'est que vous pouvez évidemment voir que c'est le même photographe qui l'a fait . Donc, si je clique dessus dans un nouvel onglet et que je l'ouvre, vous commencerez à voir des images du même photographe. Vous pouvez donc les télécharger, ou vous pouvez même ouvrir le photographe lui-même et accéder directement à sa collection. Et peut-être qu'ils ont ici une collection spécifique à l'image que vous recherchiez. Donc j'adore vraiment Pexels. J'ai l'impression qu'il y a beaucoup de très bonnes photos ici. Et j'essaie de m'éloigner de l'imagerie la plus élémentaire. Nous avons donc ici toute une collection d' images cohérentes, qui transmettent un message. Cela met vraiment en valeur l' idée du bien-être et du yoga matinal et toutes ces très belles vibrations terreuses. Il y a aussi des vidéos ici , ce qui est génial. J'adore ça. J'adore cette photo. Je vais donc le télécharger. En gros, je vais simplement continuer à télécharger des images qui, selon moi , représentent la marque. Il faut donc un certain temps pour essayer de rechercher différentes images de yoga. Tu n'es pas obligée de me copier exactement. N'hésitez pas à le faire à votre rythme et à prendre le temps de déterminer le type de marque de yogourt que vous souhaitez créer. Donc, si je vais chez Pexels, il y a peut-être une autre série d' images dont j'ai vraiment aimé l'apparence. Et je peux aussi regarder ça. J'ai beaucoup aimé l'idée de demander à un professeur de s'adapter. J'ai l'impression que cela communique également l'essentiel. Objectif d'un studio de yoga. J'ai l'impression, comme ils l'ont dit, des gens de tous les horizons. Je pense à quelque chose qui serait également vraiment unique. C'est trouver une image qui, Oh, j'adore celle-ci. Je pense qu'une autre chose qui serait vraiment unique serait de trouver des images de personnes de tous les groupes d'âge, de toutes les diversités, tous les sexes, de toutes les ethnies, etc. différentes choses pour vraiment communiquer le fait que l'alchimie et le yoga ont spécifiquement mentionné qu'ils se soucient de personnes de tous horizons. Nous ne voulons donc pas que tout soit trop flexible car nous ne voulons pas attirer uniquement des personnes très flexibles. Ils veulent évidemment attirer des personnes de tous les horizons. Je tiens donc vraiment à le communiquer. Je vais donc peut-être consulter un yoga et voir ce qui se passe. Il va défiler vers le bas. J'ai aussi adoré cette imagerie maussade pour me faire une idée des cours que j'aime, peut-être, qui ont voté. Je vais donc enregistrer ça. Et en gros, nous n' utiliserons probablement pas la majorité de ces photos. La meilleure idée est de vraiment les utiliser comme base de votre image de marque et de votre site Web. Encore une fois, je vais juste faire défiler la page et chercher d' autres Kodos de classe de groupe. Alors j'adore celui-ci. J'adore aussi celui-ci. Et évidemment, elles proviennent toutes du même photographe. Vous pouvez voir les mêmes modèles, la même scène. Je souhaite que vous mettiez cette vidéo en pause jusqu'à ce que vous ayez fini de vous procurer des images libres de droits. Il s'agit de la première tâche des projets de ce client et elle est essentielle pour établir les bases du site Web. Je veux donc que vous trouviez toutes les images qui, selon vous , représentent l'alchimie et le yoga. Et une fois que vous aurez fait cela, je veux que vous revisiez cette vidéo et que nous puissions poursuivre avec le reste du cours. J'ai donc maintenant un dossier complet contenant un tas d'images différentes représentant l'alchimie et le yoga, d' après mon interprétation de la marque. Évidemment, si vous travaillez avec un client, vous obtiendrez probablement des informations beaucoup plus spécifiques sur la marque que le brief client que je vous ai présenté. Mais c'est vraiment un excellent point de départ. Nous avons donc l'imagerie et l'inspiration en matière de conception Web à utiliser comme point de départ pour la marque. Je vais donc simplement examiner certaines de ces idées et vraiment commencer à jouer avec les différentes expériences utilisateur de mon fichier Adobe XD. J'aime aussi beaucoup celui-ci, donc je vais aussi l'ouvrir . J'adore cette police de script, ses formes et ses textures. Je veux donc commencer par ceci. Je vais juste diviser les écrans, ouvrir mon fichier XD et commencer à jouer avec ça. Donc, pour en revenir à la façon dont je prototypais soit l' UX soit un site Web, je vais essentiellement faire la même chose ici et concentrer sur les différents éléments d'un site Web. Nous avons donc un carré ici, une autre forme ici pour représenter cette forme artistique. Et encore une fois, nous allons contourner les virages. Je vais donc continuer, cliquer ici et contourner les coins. Parfait. Ce sont donc des formes différentes. Ensuite, je vais également m' assurer qu'il y a un logo ici. Alors logo, trouvez juste une police que je peux utiliser pour l' instant comme logo. Maintenant, cela n'a pas besoin d' être parfait, car nous le peaufinerons à nouveau plus tard. Mais encore une fois, nous voulons simplement avoir une idée générale de la direction que nous allons prendre. Tout cela aura du sens au fur et à mesure que nous passerons revue les différents éléments de conception. Mais je vais simplement le garder tel quel pour le moment, car il est très minimal. Nous l'avons donc. Maintenant, ce que je vais faire, c'est ouvrir les différentes invites de copie parce que, comme je l'ai mentionné dans le brief client, ce client n'en a aucune copie Nous voulons donc nous assurer de représenter la copie d'une manière spécifique à l'alchimie yoga. Je vais donc ouvrir ces invites de copie. Et cette invite de copie est ouverte. Et ce que je vais faire, c'est simplement copier et les coller mes autres documents afin de pouvoir les copier-coller et les coller ici. L'avantage d' Adobe XD est que vous pouvez copier et coller entre des fichiers, ce qui facilite grandement les choses. Je vais donc changer la couleur des polices en noir. Je vais l'aligner à gauche et modifier la taille juste pour qu'elle corresponde à ce design particulier. En fait, je veux également représenter un bouton ici. En espérant que c'est ici, je deviendrai noire. Et encore une fois, nous pourrons changer ces couleurs au fur et à mesure. Mais encore une fois, c'est un très bon point de départ. Et j'en ai un autre ici. Je voulais enregistrer le bouton, le mettre en gras et m'assurer qu'il est en blanc pour que je puisse le voir. Un moyen rapide de passer à cet outil de sélection est de cliquer sur V. Et ce bouton sera automatiquement sélectionné ici, ce qui est très utile pour le glisser-déposer. Ensuite, nous avons cela. Et puis je vais également utiliser cette même police pour la navigation. Ça va aussi le ramener ici , le rendre noir. Nous voulons donc vraiment représenter une marque de yoga ici. Alors, quels sont les différents éléments de la barre de navigation qui se trouveraient à la page d'accueil ? Peut-être. Peut-être que les cours, le yoga, les cours de yoga, c'est peut-être la même chose. Donc, carnet de contact sur le yoga maintenant, des cours sur peut-être plutôt que sur, je vais mettre la philosophie juste pour qu'elle soit adaptée directement à l' offre réelle de la marque. Ensuite, je vais également m' assurer de les centrer et de les distribuer. Je vais donc les centrer verticalement puis les répartir horizontalement. Ensuite, je vais également ouvrir mon réseau. Donc, si je clique sur l'apostrophe Command Shift, nous pouvons ouvrir nos grilles et commencer à aligner les éléments sur notre grille que nous avons maintenant Je veux également l'aligner sur la grille extérieure afin que nous avoir le look que nous voulons obtenir. Nous l'avons donc. Vous avez le logo ici. Je vais donc mettre ça en ligne ici. Et je vais à nouveau fermer les réseaux. Nous avons donc une déclaration puissante. Et maintenant, je veux faire ceci. Je vais donc l'ouvrir. Donc, à l'heure actuelle, il est considéré comme le héros du site Web. Et encore une fois, la partie la plus importante des sites Web. Vous voulez vous assurer que cela soit visuellement captivant. Maintenant, ce que je veux faire à partir de là , c'est intégrer des images afin de mieux comprendre différentes couleurs que nous pouvons utiliser sur l'ensemble du site Web. Je vais donc ouvrir mon onglet Finder. Nous avons des images ici. Et je veux jouer avec ce que je veux utiliser comme en-tête principal des sites Web. Je vais le glisser-déposer parce que j'ai l'impression qu'il représente une classe. Peut-être ajuster cela pour que nous puissions mieux le voir. J'adore aussi celui-ci. Je veux donc jouer avec différentes images afin de me faire une idée de la direction à prendre. Vous pouvez voir que les bordures sont ouvertes. Je vais donc surligner les images et m' assurer que la bordure n'est pas cochée. Elles se ressemblent un peu trop. Donc, en fait, je veux prendre une photo différente qui ait une sorte de texture. Je vais prendre cette photo. Et en fait, j' aime beaucoup la façon dont cette forme forme les coins du site Web. Donc, en fait, je vais garder celui-ci tel quel pour le moment. Pour allonger un peu les choses. Je vais également aligner un peu plus la barre de navigation principale barre de navigation principale en haut. Je vais juste suggérer que j'ai l'impression que je n'aime pas nécessairement ce type de look, comme le type de look décentré, je vais expérimenter ce à quoi il ressemblerait s'il était centré. Et c'est parfaitement vertical. Je ne suis pas sûre d'aimer ça. Mais peut-être que je veux juste acheter le sapin. Je vais donc l'agrandir et peut-être simplement obtenir les arbres de cette photo. Parce que je veux créer une sorte de texture. Ce n'est pas exactement ce à quoi je veux que ça ressemble. Mais j'ai l'impression que je veux vraiment une sorte de texture biologique neutre ici. Je vais donc continuer et retourner à Pexels. Et je vais rechercher une texture esthétique et voir ce qui en ressort. J'espère pouvoir trouver quelque chose qui pourra être utilisé dans cet espace. Et cela peut prendre un certain temps de jouer avec différents mots clés, car ce n'est évidemment pas ce que je recherche. C'est bien trop coloré. Je vais donc juste taper sur l' esthétique et voir ce qui se passe. Ça pourrait être bien, mais ce n'est pas vraiment ce que je recherche. Je vais donc simplement l' ouvrir dans un nouvel onglet. J'adore ces couleurs, très minimalistes, neutres. Peut-être que si je cherche un minimum, quelque chose d'autre apparaîtra. Oui, c'est exactement ce que je recherche. Je vais simplement télécharger certaines de ces photos de texture. Nous pouvons toujours l'ajuster une fois que nous l'avons intégré à la conception. Mais je veux vraiment quelque chose de très neutre, de très élégant. Peut-être même chercher des ombres juste pour obtenir texture organique neutre dont le client parle brièvement. Je veux trouver quelque chose qui puisse représenter cela. Peut-être que le bio est un autre mot clé. Je peux lever les yeux. Esthétique organique et minimaliste. Oh oui, j'adore l'ombre ici. Vous savez, il faut parfois quelques essais de mots clés différents pour que ce que vous recherchez apparaisse. Il s'agit donc simplement d'un jeu de devinettes sur le référencement. J'adore donc l'ombre et quelque chose dans ce sens serait parfait pour ce que je recherche. Cela correspond donc certainement beaucoup plus à l'ambiance que j'espère obtenir. J'adore aussi cette serviette ici. C'est une serviette ou peut-être une couverture. Mais encore une fois, je veux créer de la texture, mais d'une manière organique très neutre. Donc je vais m'en tenir à ça pour le moment. Je vais voir s'il y des ombres similaires ici, qui le sont, ce qui est génial. J'adore le look différent des ombres. Je vais donc continuer à en télécharger quelques-unes afin de pouvoir vraiment jouer avec toutes ces différentes textures du design. Pour en revenir à mon fichier Adobe XD, je vais récupérer depuis les textures que j'ai trouvées et je vais simplement les remplacer ici. Donc, je préfère vraiment ce look. Mais j'ai l'impression qu'il fait encore un peu trop sombre Je vais donc désactiver un peu l'opacité pour obtenir cet effet, mais d'une manière un peu plus neutre. On retrouve cette texture un peu, mais elle est légèrement plus fraîche et plus douce. Je vais donc juste jouer avec l'opacité. Et j'ai l'impression que cette photo ne correspond pas nécessairement à cette couleur. Je veux quelque chose de similaire dans le sens de la couleur, mais aussi représentatif de la marque. Nous ne faisons que jouer avec images jusqu'à ce que quelque chose soit juste. Je vais ajuster cette opacité pour vous voir. C'est peut-être mieux. En fait, j'aime beaucoup le look qu'il a eu jusqu'à présent. Je vais également l' étendre pour que la texture soit un peu plus estompée. Je vais peut-être trouver le coin sombre. Super. J'adore ça. S'estompe légèrement. Et je n'aime pas ça, les formes se chevauchent comme ça. Je vais donc en fait ajouter une bordure ici. Je vais en faire 20 avec une bordure et je vais en fait le rendre blanc pour qu'il ait l' air de se fondre dans la masse. J'aime, j'aime, aime ça jusqu'à présent. Et c'est une bonne base que nous pouvons ensuite utiliser pour choisir les couleurs de la marque. Je suis donc satisfaite cette section consacrée aux héros du site Web et maintenant je vais sélectionner les couleurs, vraiment apporter la cohésion de ce site Web. Donc, comme je l'ai mentionné, la première chose à faire est de choisir des couleurs en fonction de l'imagerie. Je vais donc simplement dessiner un carré ici, désactiver la bordure et utiliser cette pipette pour choisir une couleur sur cet écran. Je vais donc jouer avec ça. Encore une fois en utilisant la pipette. Je vais juste essayer de sélectionner les couleurs des images que je pourrais peut-être utiliser sur ce site Web. Il y a du vert ici. Je voudrais peut-être intégrer cela au design. Je vais juste essayer de trouver un tas de couleurs différentes. Ensuite, je pourrai utiliser un outil de sélection de couleurs pour vraiment finaliser la cohésion du site en termes de couleurs. Alors peut-être même un ton plus clair ici, pareil. Peut-être que ce mur arrière peut représenter, non ? Vous pouvez donc déjà constater que vous pouvez constater une certaine cohésion en termes de couleurs simplement en sélectionnant des couleurs à partir d'images. De toute évidence, une bonne photographie a du sens en raison des couleurs qu'elle contient. Le choix des couleurs à partir d'images est donc un très bon point de départ. Une fois que je l'aurai fait. Je me rends ensuite sur un site Web appelé coolers.com, qui est un très bon générateur de couleurs pour choisir des palettes de couleurs très rapidement. C'est l'un de mes sites Web pour choisir des palettes de couleurs. Je vais donc simplement sélectionner cette couleur copier le code hexadécimal et le coller ici. Alors je vais le verrouiller. Une fois que j'aurai saisi le code hexadécimal, il pourra générer des palettes de couleurs en fonction du code hexadécimal que j'ai saisi. Supposons que je veuille aussi mettre cette couleur verte parce que je l' aime vraiment et je pense que ce serait une très belle couleur de marque. Ensuite, je peux les mettre l' un à côté de l'autre, les verrouiller. Ensuite, les prochaines couleurs qui me seront présentées seront les couleurs qui vont avec. En fait, j'ai l'impression que c'est peut-être trop sombre. Je vais donc essayer d'utiliser uniquement une couleur verte pour voir quelles sont les différentes couleurs qui correspondent vraiment à la marque que je suis en train de créer. Encore une fois, nous optons vraiment pour un look minimal. Je veux donc vraiment trouver des couleurs très neutres. J'adore cette couleur champagne, donc je vais la verrouiller en continuant à appuyer sur la barre d' espace jusqu'à ce que je sois satisfaite de la palette de couleurs finale. Ce n'est donc pas forcément ce que vous devez faire pour choisir les couleurs. C'est une excellente ressource pour commencer si vous avez mal à trouver des couleurs cohérentes Nous avons un œil pour les couleurs. C'est également très bien et vous pouvez également le faire par tous les moyens. Je vais donc simplement le copier. Une bonne règle de base est de ne pas sélectionner plus de cinq couleurs. Vous pouvez donc voir que cette couleur et cette couleur sont très similaires. Je vais donc supprimer celui-ci et le remplacer par celui-ci. J'ai également l'impression que c'est un peu trop sombre et je veux vraiment ajouter du noir pour le texte également. Je vais donc le remplacer par une couleur noire. Nous allons donc avoir du noir, légèrement vert. J'aime les disposer du plus foncé au plus clair pour pouvoir vraiment les voir côte à côte. Je n' aime pas forcément cette couleur pâle, alors je vais essayer de trouver une teinte différente. En fait, j'aime beaucoup cette couleur. J'adore ces deux couleurs. Ensuite, peut-être que nous opterons pour le général White. Une autre chose que j'aime faire lorsque j'essaie d' obtenir la bonne teinte est choisir la même couleur à partir de la couleur que j'ai essayé de faire correspondre précédemment. Ensuite, allez dans le sélecteur de couleurs et déplacez lentement mon curseur jusqu'à ce que je trouve une couleur qui me convient relativement. J'aime beaucoup cette nuance de blanc et elle est très, très subtile, ce que j'adore. Je vais opter pour ça. Et encore une fois, ce n'est qu'un point de départ. Supposons que si je passe revue l'ensemble du processus du site Web et que ces couleurs ne correspondent pas réellement au reste de l' imagerie, je pourrais les ajuster plus tard. Enregistrez-le en tant que palette de couleurs finale. J'en suis content. Je peux passer aux couleurs et cliquer sur plus d'une. Je les ai toutes surlignées et je pourrai ensuite sélectionner les couleurs très facilement lorsque je modifierai quelque chose. Alors disons, par exemple, que je veux changer couleur de ce bouton en vert. Il y change automatiquement, veut que toute sa barre de menu soit également verte. Cela peut se faire là-bas. Si je veux changer toute la couleur d'arrière-plan pour qu'elle soit grise, je peux le faire aussi, mais je ne le suis pas parce que je veux juste que ce soit du blanc. Voici quelques ressources pour trouver des couleurs. Nous commençons donc à avoir une vision un peu plus cohérente. Et ce que je vais faire en fait, c'est l'étendre un peu plus loin et l'agrandir légèrement. La prochaine chose que je veux faire est de revenir aux invites de copie , puis je vais créer la section suivante du site Web. Je vais juste copier et coller toute cette section parce que je veux qu'elle soit au format similaire. Et c'est généralement une bonne règle de base pour s'assurer que vous avez des positions alternées. Supposons donc que si le texte se trouve sur le côté droit, la section suivante, que la taxe devrait se trouver sur le côté gauche, ou qu'elle soit divisée en colonnes de trois textiles différents alternés , est vraiment très importante. Nous l'avons donc. Je vais le supprimer et je vais en faire un composant. Je vais donc les regrouper, faire un composant, le faire glisser et le déposer ici. Encore une fois, nous voulons une sorte d' imagerie qui ait du sens ici. Je vais donc poursuivre et peut-être dessiner un carré, parce que je veux peut-être un carré dans cette section ici. Je veux m'assurer qu'il est aligné par rapport au centre. Je vais donc simplement faire un glisser-déposer. Je vais activer ma grille pour voir où j' en suis dans mon dessin. Et je vais l' aligner au centre. Ouvrez ma photographie et voyez quel type de photo je souhaite ensuite ajouter ici. Encore une fois, j'adore vraiment ce look, il est trop grand. Donc, ce que je vois maintenant et quelque chose que je n'aime pas particulièrement en ce moment ne signifie pas nécessairement que c'est faux. C'est juste quelque chose que je n'aime pas nécessairement, c'est que cette partie blanche descend jusqu'en bas. Donc, ce que je veux faire, c'est jouer avec ce fond d'une couleur différente. Je vais donc simplement dessiner une boîte ici, désactiver la bordure, et peut-être sélectionner une couleur différente et l'envoyer au verso. Donc je n'aime pas vraiment ça. Peut-être que cette couleur blanc cassé peut être bonne ici. OK. J'aime ça en fait. Je vais donc m'assurer que les bordures correspondent. Je vais donc choisir le sélecteur de pipette de la bordure comme ça. Il semble donc que c' est vraiment cohérent dans ce sens. J'aime bien ça. Je ne sais pas si j'aime ces deux couleurs ensemble. Je vais donc jouer légèrement avec cette teinte, et je veux qu'elle corresponde à cette couleur. Je vais donc sélectionner cela et remonter lentement jusqu'à ce que je trouve quelque chose qui me semble vraiment naturel en termes de correspondance des couleurs. C'est très subtil. Je ne veux pas qu'il soit complètement blanc, mais je veux vraiment qu'il ait une petite teinte pour mettre en valeur les différentes sections. Alors j'adore cette couleur. Je pense que c'est très neutre. Je vais également faire correspondre la bordure. Je n' aime pas nécessairement le vert, alors je vais le remplacer ici, le dissocier, puis sélectionner la barre de remplissage. Et encore une fois, je vais simplement utiliser le sélecteur de couleurs jusqu'à ce que je trouve quelque chose qui me convient. J'adore cette couleur, pas tout à fait verte, mais on a quand même cette sensation terreuse. Il est un peu plus léger, ce que j'adore. Je vais le regrouper, le copier et le coller et le mettre ici. J'obtiens donc certainement un look bien meilleur et cohérent. Et je suis vraiment content la direction que nous avons prise jusqu'à présent. Continuons donc. Je vais juste ajuster légèrement ces logos. Et puis dans la section suivante, je vais revenir aux instructions de copie, copier ces différentes sections, les placer ici, puis continuer à les créer ici. Maintenant, je vais me concentrer sur la section Offres, puis je vais créer un autre rectangle et le renvoyer à la fin. Donc, si vous cliquez avec le bouton droit de la souris et que vous cliquez sur Envoyer vers la page précédente, vous pouvez le faire, ou vous pouvez cliquer sur ces commandes, Command Shift et le crochet gauche, puis tout devrait revenir à la fin. Et puis encore une fois, j'ai envie de jouer avec les différentes couleurs. Ces couleurs ne sont pas encore parfaites, donc je n'ai pas vraiment envie de m'y engager pour le moment, mais j'adore vraiment leur , mais j'adore vraiment look jusqu'à présent. Je vais Tout et je vais rendre le texte blanc, et je vais également rendre la bordure blanche. Et encore une fois, nous avons ici une approche beaucoup plus cohérente. J'adore vraiment ce style de design et j' ai l'impression d'avoir vraiment l'impression minimale que j' espère produire avec ce design en particulier. Encore une fois, ce n'est pas parfait. Nous finaliserons les styles de texte à la fin. Mais encore une fois, c'est un très bon point de départ. Nous l'avons donc. Je vais juste y aller et ajouter ça ici. Ce que je veux faire, c'est redonner cette texture. Je vais le copier, le coller ici et l'agrandir pour que nous ayons à nouveau cette texture. Et ce que je veux faire, c'est peut-être une section de contact ou une section à propos, mais quelque chose qui me permette de concevoir quelque chose de vraiment unique pour le sprint. Je vais donc ouvrir à nouveau ma grille et dessiner un rectangle ici à cause de ma grille et l' aligner au centre. Et je vais désactiver la bordure et m'assurer que le fond est blanc. En fait, tu sais quoi, je veux peut-être une bordure, mais au lieu que ce soit cette couleur, je veux que ce soit cette couleur. Donc je vais en faire 20. Et encore une fois, cela crée un look cohérent. Une bonne règle de base est de vous assurer que vous n'avez pas plus de cinq couleurs de marque sur un site Web pour vous assurer que tout est cohérent. Je vais donc simplement sélectionner cette couleur en noir parce que je pense il n'est pas nécessaire que ce soit cette couleur au centre. Je vais l' ajuster un peu, le rendre plus grand. En fait, je vais y mettre fin. Je vais en faire une page de contact, le formulaire de contact. Allez-y, allez ici, copiez-le, contactez-nous ou réservez votre prochain cours. Je vais simplement le remplir ici. Copiez et collez ce centre. Ensuite, copiez le bouton. Nous avons tout cela au centre. Je suis plutôt content de la façon dont cela s'est passé. Maintenant, ce que je veux faire, c'est finaliser la police. Je vais donc cliquer sur tous ceux que je vois. Et je vais juste passer en revue les polices et voir ce que j'aime et ce qu'ils n'aiment pas. Et essayez vraiment de trouver une police qui représente ce à quoi je veux que cette marque ressemble. Je ne sais pas exactement quel type de police de style j' aimerai le look. Mais je vais jouer et j'espère trouver quelque chose qui me plaît. J'aime beaucoup cette police. J'ai l'impression que c'est très minimal. Je vais le réduire légèrement parce que je l' aime peut-être un peu plus. Oui, j'aime bien ce look. J'ai l'impression qu'il dégage l'ambiance minimale que j'espère créer. Tu l'as. Ensuite, je vais également les modifier, dissocier parce qu' ils sont regroupés. Et assurez-vous que c'est la même police. Donc, pour me faciliter la tâche, je vais l'ajouter à Character Styles. Je vais tous les sélectionner en cliquant sur l'un d'entre eux , en maintenant la touche Shift enfoncée , puis en cliquant sur chacun d'eux. Ensuite, je vais cliquer sur Retour. Ensuite, je vais le sélectionner en blanc. Et j'adore ce look jusqu'à présent. Juste pour rendre les choses un peu plus cohérentes, je vais ajouter un sous-en-tête ici. Alors je vais juste écrire quelque chose. je n'ai pas vraiment aimé ces boutons. Texte de ces boutons. J'aime le fait que Proxima Nova corresponde à cela, mais je n'aime pas la police des boutons, donc je vais modifier cela en cliquant ici, ici. Ici. Je vais également cl 8. Brief 2 : un restaurant méditerranéen: bref, nous travaillons avec un restaurant appelé catch 35. Je vais donc simplement lire le dossier client, puis je vous montrerai les différents actifs avec lesquels je vais travailler. À partir de là, je vous expliquerai l'ensemble de mon processus de création de site Web pour prototypage d'un site Web complet Adobe XD Catch 35 est un bar-salon chic et restaurant méditerranéen. situé dans la ville de Chicago. Ils ont une cuisine ouverte et une atmosphère branchée pour le plaisir de leurs clients et sont au service clients depuis plus de dix ans. Ils souhaitent renommer leur site Web pour le rendre un peu plus intemporel, tendance et moderne. La vision du site Web pour le client, ma vision pour le nouveau site Web Catch 35 est moderniser l'apparence générale du site Web. Notre intérieur est très monochrome et élégant, donc j'adorerais le voir apparaître sur notre site Web. Je veux que le site Web soit très visuel avec un minimum de texte afin de créer une atmosphère plus tendance, luxueuse et moderne. Je suis vraiment inspiré par les designs éditoriaux modernes et tendance. Certains adjectifs décrivent le style général qu'ils recherchent : élégant, tendance, mature, moderne, intime, une atmosphère animée avec un décor élégant. Le défi du projet est que comme le restaurant est ouvert depuis quelques années, il possède des actifs de marque existants dont ils ne veulent pas se séparer. Le logo et les éléments de marque existants sont imprimés et présentés dans plusieurs secteurs de l'entreprise, notamment les menus, les cartes de visite et les publicités locales. L'imagerie fait également partie intégrante de la marque et nous voulons présenter ce restaurant d'une manière très intéressante sur le plan visuel. Pour cette mission, je souhaite que vous conceviez et prototypiez le site Web complet de Catch 35 afin que nous puissions le visualiser entièrement et naviguer à la page suivante du site pendant qu'il était en ligne. Quelques conseils utiles pour vous aider à démarrer sont donc de rechercher des sources d' inspiration pour la conception de sites Web éditoriaux afin de vous faire une idée de la direction que vous souhaitez donner aux actifs. Nous avons autre chose Comme mentionné dans le dossier client précédent, j'ai toujours adoré choisir les couleurs des marques en fonction de l'imagerie et parce qu'elles ont déjà des images de leur intérieur, de cette équipe, de la nourriture qu'elles proposent. offre, je veux vraiment m'assurer que les couleurs sont choisies en fonction l'imagerie, car c'est une partie si importante de leur marque qu' ils veulent représenter. Et puis la troisième chose est que je veux que vous prototypiez l'intégralité du site Web dans Adobe XD. Je vais vous expliquer l'ensemble de mon processus de conception, non seulement de la page d'accueil, mais aussi des pages intérieures, et de la création de liens afin que vous la présentiez à votre client avant de passer en mode développement ou si vous travaillez avec un développeur, vous pouvez réellement simuler ce à quoi vous souhaitez que le site Web interagisse et donne l'impression qu' un utilisateur parcourt chaque page du site Web. Je vais donc simplement passer en revue tous les différents actifs dont nous disposons. Ici. Nous avons la copie du site Web , une page d'accueil, un menu, informations sur les heures et l'emplacement des pages, et la possibilité de faire une réservation. Donc 12345 pages, il semble qu'il n'y en ait pas beaucoup. Je veux donc vraiment présenter une sous-marque d'une manière très agréable sur le plan visuel en utilisant des images. Jetons donc un coup d' œil à l'imagerie. Vous pouvez le consulter dans Google Docs, mais je l'ai déjà téléchargé sur mon bureau. Je vais donc simplement vous montrer les différents atouts de la marque. Nous avons donc le logo, très simpliste. Nous avons le menu existant, ce qui nous permet de nous faire une idée des différentes choses qu'ils proposent. Et puis nous avons une sorte de texture. Si nous voulons utiliser ce gris, si nous ne voulons pas l'utiliser, c'est bien aussi. Mais juste quelque chose qu'ils ont de leur ancien concepteur de logo qui est utilisé pour leur menu. Nous avons donc les atouts de la marque. Ensuite, nous avons ici de nombreuses images différentes. Nous avons donc vraiment envie d'une ambiance sombre, intime, chaleureuse, d'un rendez-vous galant, de la nourriture vraiment chic, des chefs professionnels. Je veux donc vraiment présenter toutes ces différentes choses sur le site Web. Et un point important, comme mentionné dans le dossier client, c'est l'ambiance. C'est très luxueux, j'adore vraiment son look. Et toutes ces images sont libres de droits. Vous remarquerez donc qu'ils ne s' emboîtent pas tous parfaitement, mais n'hésitez pas à utiliser l'un d'entre eux pour vraiment représenter le look que vous souhaitez avoir. Souvent, lorsque nous travaillons sur des dossiers de clients, nous avons une multitude d'images différentes basées sur différents photographes . Certaines images vont pas nécessairement avec d'autres. Votre travail consiste à associer l'imagerie au design que vous créez. Donc, pour commencer, je vais aller sur Pinterest pour commencer à m'inspirer. Certains mots clés qu'ils avaient mentionnés étaient le design éditorial, le design des restaurants. Je tiens vraiment à le montrer. Je vais donc me renseigner sur le design éditorial. Ensuite, je vais ouvrir un autre onglet parce que je veux aussi rechercher des designs de restaurants. Je souhaite créer une fusion entre un site Web éditorial généralement utilisé pour la mode haut de gamme et un restaurant. Je vais donc me renseigner sur conception de restaurants et de sites Web. Ensuite, je vais également passer à conception éditoriale. Design éditorial, restaurant. Nous aurons quelque chose à voir. Je vois de nombreux menus, ce qui n'est pas nécessairement ce que je recherche. Je vais juste regarder les différents designs de sites Web de restaurants. Nous avons donc celui-ci. Oui, j'adore celui-ci. Nous voulons que ce soit très simpliste , car il y aura beaucoup d'images. Je ne recommande donc pas d' utiliser beaucoup de couleurs ou motifs visuels, car ils contiennent beaucoup d'images. Je veux que la marque soit mise en valeur à travers l' imagerie existante, car c'est essentiellement ce pour quoi les gens paient lorsqu'ils se rendent dans ce restaurant. J'aime bien ce look. Je vais simplement continuer à ouvrir les choses dans de nouveaux onglets jusqu'à ce que je trouve quelque chose qui m'inspire vraiment. J'aime vraiment ce look. Et c'est très utile lorsque vous cliquez sur des designs qui vous plaisent , une toute nouvelle recherche s'affiche. Prends vraiment ça à ton avantage. J'aime généralement ouvrir les choses dans de nouveaux onglets. N'hésitez pas à créer votre propre tableau pour le projet sur lequel vous travaillez. Je le fais généralement pour les clients afin de m'assurer que tout est au même endroit et de pouvoir ouvrir les choses lorsque je travaille sur conception d'un site Web l'espace de quelques semaines ou de quelques mois. Mais elle rend les choses vraiment faciles. Je vais simplement continuer à examiner toutes ces choses. J'ai beaucoup aimé l'ambiance sombre et maussade et je pense que c'est ce que je veux présenter sur le site. Mais encore une fois, cela peut changer en fonction de l'imagerie que nous choisissons. J'aime beaucoup cette police de script volumineuse avec cette grande police sans empattement. C'est donc quelque chose qui pourrait être vraiment cool que nous présentions. Donc, en gros, j'ai quelques sites Web différents. Nous optons évidemment pour une ambiance vraiment sombre et maussade car c'est ce qu'ils ont mentionné vouloir dans la conception de leur site Web. Maintenant que j'ai quelques pièces que je peux utiliser comme source d'inspiration, je vais ouvrir le fichier. Maintenant. Je vais juste prendre certains des atouts de la marque et les intégrer au design. Donc, tout d'abord, je vais mettre le logo, qui se trouve ici. Et souvent, ils obtiennent un projet de conception de site Web avec des actifs de marque existants. Parfois, quelques-uns sont également créateurs de marque. Les clients peuvent venir vous voir avec des marques, mais parfois aussi, des personnes possèdent déjà des actifs existants. Et si vous vous spécialisez uniquement dans la conception de sites Web et essayez ensuite de reprendre leurs actifs existants, redessinez-les d'une nouvelle manière sans trop vous éloigner des actifs de marque d'origine. C'est également une compétence très utile. Nous y avons le logo. Et parce que la plupart des sites Web que j'ai consultés pour inspirer ont une image d' arrière-plan représentant le héros. Je vais également jouer avec cela dans mon design. Je vais donc dessiner carré pour qu'il corresponde à toute la section des héros, désactivant la bordure. Ensuite, je vais ouvrir mes images. Je veux vraiment trouver quelque chose qui communique l'essentiel, l'au-delà et la sensation de cette RAM. Je veux donc vraiment que vous trouviez quelque chose qui montre à quel point j' aime vraiment cet intérieur. Je vais donc mettre cela en toile de fond. Je vais l'envoyer à la fin parce que c'est sur un fond sombre. En fait, je veux remplacer le logo la variante blanche du logo. Je vais donc le télécharger là-bas. Et j'aime vraiment un peu plus ce look. Maintenant, je vais ouvrir les invites de copie du site Web pour voir quelles sections ils souhaitent. Je vais simplement le copier pour avoir la possibilité de le coller dans mon fichier XD ci-dessous. Cliquez dessus pour vraiment simuler le design que je souhaite créer. Je vais créer une zone de texte, coller dedans. Nous allons maintenant jouer avec la police de caractères. Donc, je vais juste prendre une couleur d' ici et en faire 22. Je voulais également avoir une police d'en-tête différente. Je voudrais donc peut-être créer mes propres en-têtes, car certains éléments du Google Doc n'ont pas réellement d' en-têtes, mais des paragraphes. Donc, en termes de conception, je sais que les en-têtes aident en quelque sorte à diviser différentes sections de la conception. Ainsi, même si mes clients ne m'ont donné que cette copie, je peux toujours ajouter différentes copies pour embellir un peu plus le site Web. Nous l'avons donc. Et je vais également créer une autre zone de texte ici. Création d' expériences exceptionnelles. Je vais en faire une taille d'en-tête. Et maintenant, je vais trouver des polices qui, selon moi, représentent la marque. Et peut-être que je voudrais même le en haut de cette section principale, comme nous l'avons vu dans les pièces d'inspiration que nous avons trouvées Pour l'instant, je vais le mettre là vraiment voir la différence. Et je vais juste aller en haut de mes polices et cliquer dessus pour vraiment voir ce que j'espère. De plus, comme je suis encore au stade expérimental, je vais expérimenter différents types de textes et peut-être préférer des majuscules, ce qui créera une expérience différente . Je vais donc les avoir tous les deux. C'est juste pour que je puisse voir le texte. Je vais créer une légère superposition sur cette image. Je vais donc simplement dessiner un autre bloc sur ce même bloc. Rendez-le noir. Ou même je vais tirer une couleur de cette image. Alors revenez, organisez l' envoi vers le dos, et organisez également cet envoi vers retour. Je vais maintenant modifier l'opacité de mon incrustation. Nous obtenons donc une expérience de couleur plus personnalisée, tout en conservant l'aspect général. Et cela permet également à notre texte de ressortir encore plus. Je vais y aller. Maintenant, je vais m' amuser avec les polices. Je vais l'étendre un peu plus pour qu'ils ne se chevauchent pas. Je veux tout de même qu'il corresponde au logo et à la marque. Il n'est donc pas nécessaire que ce soit parfait ici si nous avons ouvert Ryan's pour choisir nos polices et nos couleurs. Mais encore une fois, nous voulons vraiment nous assurer qu'il correspond au logo car c'est le principal atout de la marque. Nous voulons nous assurer que le site Web correspond également à cela. J'aime donc beaucoup cette police haute, donc je vais juste la mettre de côté parce que je pourrais avoir envie de l'utiliser plus tard. Je vais quand même parcourir les polices juste pour voir s'il y a autre chose qui attire mon attention. J'aime bien cette police de script. Je voudrais peut-être m'en servir pour embellir. Je vais donc également le mettre là-haut. Et il s'agit vraiment d'essayer de trouver des polices qui se marient bien ensemble. Souvent, il est très utile de faire correspondre différents styles de polices pour différents types de textes. Ainsi, un en-tête, par exemple, si vous avez un en-tête avec empattement, vous pouvez utiliser une police de paragraphe sans empattement ou vice versa. Maintenant, je veux créer une page « Réservez maintenant », car il s'agit d'un restaurant Le principal appel à l'action sera de réserver. Je veux donc le montrer ici. Ce n'est peut-être pas une couleur que j'utilise ici, mais je peux l'utiliser ailleurs sur la page. Je voulais juste voir à quoi ça ressemblerait. Je vais donc copier et coller ce bouton ici pour le moment. C'est parfois à cela que ressemble votre espace de conception. Il s'agit simplement de mettre un ensemble de ressources différentes que vous pourriez aimer et que vous voudrez peut-être utiliser comme référence lorsque vous commencez à finaliser votre conception. Il se peut donc que je ne le veuille pas, mais je voudrais peut-être qu'il figure sur une section blanche pour indiquer que mes sections blanches contiennent peut-être un appel à l'action jaune. Mes sections les plus sombres ont un appel à l'action en blanc. Alors je vais le faire en blanc et en noir. Je veux aussi continuer et créer mon en-tête. Alors, accueil sur le menu, sur le menu, sur les heures et le lieu. Et je veux une section qui fasse référence au bouton Réserver maintenant. Je vais donc m'y mettre et copier ceci. Mets-le ici. Je ne sais pas si j'aime cette superposition d'images Je vais donc la copier et coller une nouvelle option ici afin de pouvoir vraiment comparer les designs. Je vais donc le déplacer vers le bas. Ensuite, je vais également dessiner un rectangle derrière lequel j' ai toujours cet effet sombre, mais qui se trouve dans sa propre barre de menu. Je vais utiliser l'outil Color Dropper pour sélectionner une couleur et l'envoyer au verso. Je ne suis pas encore sûre de l'aimer, mais ce n'est pas grave. Nous en sommes encore à cette étape du processus de conception où il est normal que les choses ne soient pas encore parfaites. Et tout tourne autour de l'expérience d'apprentissage, vraiment centrée sur l'ensemble. Je vais supprimer ce bouton ici. Je veux peut-être que ce soit blanc. Je vais donc jouer légèrement avec cette couleur. Donc je veux vraiment que ce soit un onyx noir. Et je n' aime pas vraiment cette police. Je vais donc changer pour quelque chose d' autre qui pourrait me plaire. Et j'aime bien cette police, Belgium. Je vais donc l'utiliser comme police d'appel à l'action principale. Utilisez des majuscules pour créer un look cohérent. Développez ceci. Peut-être que je vais changer cela pour simplement réserver une table. Super, j'adore ça jusqu'à présent. Et maintenant, je peux choisir la police qui va avec. Nous avons donc une police d'en-tête, une police d'appel à l'action et une police de menu, et nous n'avons pas encore nécessairement de paragraphe, donc je vais le copier, le coller là. Je vais l'enregistrer dans mes couleurs pour pouvoir enfin changer de couleur ici. Je vais sortir de là. Je vais vous remplacer par 44. Ensuite, je vais également récupérer ce bouton d'appel à l'action ici. Je vais donc simplement ajouter cette couleur sur le côté gauche. Je ne sais pas si je vais l'utiliser, mais je le veux vraiment comme référence. Je vais aller chercher cette couleur d' ici et la fabriquer, d'accord. Je vais y aller et déplacer ça. Nous voulons donc maintenant trouver un paragraphe simpliste. Je crois que j'aime ça, mais je vais jouer avec la hauteur de la ligne. Pas assez d'espace. Nous avons ici un appel à l'action. Je veux tester à quoi cela ressemblerait avec cet appel à l'action jaune. Je vais y aller et le déplacer ici. Et je veux en fait augmenter légèrement ces opacités. Ce n'est pas ce que je veux. Je vais donc lui donner la même couleur. Oui, j'ai vraiment aimé ce look d'onyx très foncé. J'ai l'impression que cela contribue à créer une sensation plus luxueuse. Et je pense qu' en les voyant côte à côte, j'aime vraiment beaucoup plus ce côté droit . Alors je vais continuer avec celui-ci. Nous avons un livre d' appels à l'action. Ensuite, nous avons le menu. Vous allez souvent sur des sites Web pour consulter le menu. Nous l'avons donc ici et je veux le présenter dans cette section. Maintenant, je veux créer un collage, car une grande partie de ce site Web est consacrée à l'expérience culinaire. Je veux donc créer une sorte de collage présentant les différents repas qu'ils proposent et les différents plats qu' ils peuvent entendre. Je vais donc simplement dessiner un tas de carrés ici et J'espère vraiment pouvoir créer ce collage. Regarde. Je ne sais pas encore si c'est comme si Lee était parfait. Mais pour l'instant, j'ai l'impression d'aimer ça. Donc je vais juste continuer et ajuster cela encore plus. Et pour le moment, je ne fais que regarder les choses. C'est très bien parce que nous pouvons toujours trouver de la musique plus tard. Pour cette section, je souhaite vraiment présenter les différents aspects des marques. Je vais donc l' agrandir. En fait. Je vais aller de l'avant et ouvrir les différents actifs dont nous disposons. Et ils ont mentionné qu'ils souhaitaient qu' une grande partie du site Web soit composée d'images. Je tiens donc vraiment à le montrer ici. Vous voulez un mélange de boissons, de nourriture et de tout ce qui inclut essentiellement l'expérience culinaire ou donne un aperçu de ce que propose la marque. Nous voulons aussi quelques personnes, donc ce sont toutes de très belles photos, mais je veux aussi créer une ambiance. Cela se manifeste donc souvent lorsqu' il y a des personnes sur des images. Nous l'avons et je vais désactiver la bordure une fois que les images seront en place. En fait, je vais le faire en pleine largeur comme ça. Alignez-le vers le bas pour créer cet effet de collage complet. Interdisez la même largeur. Je vais également ajuster la césarienne pour qu' ils créent tous un collage. , j'aime bien ça. J'ai l'impression que ce n'est pas encore le collage parfait, mais c'est très bien. Je vais en fait étendre cela pour qu'il soit légèrement plus petit. Nous avons donc un motif parallèle comme celui-ci, étend sur toute la largeur, toute la largeur, mais ce n'est pas le cas. Je veux donc créer le même effet ici. Peut-être qu'ici, nous le rendons légèrement plus large, agréable. Vous voulez peut-être voir à quoi cela ressemblerait si c'était à pleine hauteur. D'accord. Je pense que j'ai aimé ça jusqu'à présent. Je veux juste voir à quoi cela ressemblerait si les deux s' étendaient sur toute la hauteur. Juste un peu cool. J'aime ça parce qu'il a toujours cette apparence parallèle. Une autre chose qui pourrait être étrange est le fait que c'est légèrement surcentré. Je vais donc vérifier avec mes grilles et les aligner pour qu'elles semblent un peu plus centrées. Nous avons donc ce look de collage et nous communiquons clairement l'ambiance du site Web. Je vais donc y aller et le réduire encore plus. Je vais même agrémenter cela d'une taxe latérale. Je suis donc un grand fan du texte latéral. Je l'utilise à peu près dans la plupart de mes projets de design pour mes clients, car cela permet de créer une apparence et une sensation différentes. Alors je vais y aller et taper. Ensuite, je vais centrer tout cela, le regrouper, puis mettre en évidence tout cela. Centrez-le verticalement. Alors j'adore ça. J'aime vraiment ce look. Ensuite, je vais aller chercher le prochain exemplaire pour la page d'accueil et le mettre ici. Il s'agit donc en fait d'une section permettant de visualiser le menu. Je vais donc supprimer ce menu d'appel à l'action ici, car il y en a une copie pour consulter l'argent. Je vais mettre un tableau, je vais le copier, le coller ici. Et je veux utiliser le même noir, mais au lieu d'avoir une superposition d'opacité, je vais simplement le rendre entièrement noir, puis je vais rendre le texte blanc. Maintenant, je vais retourner sur mon Google Doc et taper dans cette section. Je vais aller chercher cette section ici parce que je veux toujours un sous-en-tête. Je vais donc procéder à une rotation. Vous obtenez du blanc et vous le faites glisser ici. Je vais centrer tous ces centres. Nous l'avons donc et j'aime vraiment le look de ce site Web jusqu'à présent. Enfin, nous avons le dernier appel à l'action de ce Google Doc. Nous avons donc la possibilité de réserver une table. Encore une fois, je vais simplement copier et coller cette section ici, coller ici. Alignez tout sur la gauche parce que je veux que vous divisiez ce centre. Écoutez, vous pouvez voir que c'est centré, c'est centré, c'est centré. Je veux donc être capable de créer quelque chose qui nous permette de rompre cet équilibre central. Donc je vais continuer et aligner ça à gauche. Et encore une fois, je vais simplement copier et coller une image, la mettre ici. Je vais le remplacer par une sorte d'image. Donc, jusqu'à présent, j'adore ça. Je veux donc vraiment essayer d' expérimenter avec ce format sur toute la largeur. Je vais donc simplement le copier et le coller à nouveau afin de pouvoir facilement comparer mes designs. C'est vraiment essentiel si vous essayez de comparer des différences très subtiles dans InDesign. Je vais donc simplement couvrir toute cette largeur. Je vais donc maintenir la touche Shift enfoncée et elle s'étendra automatiquement sur toute la largeur si je n'appuie pas sur Shift . La mise à l'échelle sera redimensionnée, mais pas les images. Donc, en maintenant la touche Shift enfoncée, vous pouvez vraiment créer cet effet. Je vais également le déplacer vers le bas pour voir si je l'aime et si je ne l'aime pas. Je vais donc l' augmenter légèrement pour que nous ayons toujours cet effet. Alignez-le vers le bas et j' aime vraiment que le look sur toute la largeur soit beaucoup plus beau. Je vais donc continuer à concevoir en gardant cela à l'esprit. Tout semble vraiment bien jusqu'à présent. Je suis donc content de la façon dont cela se présente. Et maintenant, je veux créer la page de menu. Je vais donc juste ajuster cela jusqu'à ce que je sois certain que c'est parfait pour le déplacer là-haut. Et ces deux-là sont revenus. aime me rendre compte que je suis satisfaite de l' apparence des choses. Alors maintenant, je vais poursuivre avec ce design. J'en suis content. C'est certainement mon préféré parmi les deux. Je vais donc les supprimer si vous voulez les conserver dans votre boîte à outils et dans votre référence afin que vous puissiez vraiment voir la progression, alors vous pouvez simplement les y conserver. Mais pour l'instant, je vais le garder là et le déplacer vers bas parce que c'est le design avec lequel je vais continuer à avancer. Je vais donc simplement le nommer en double-cliquant ici et en tapant catch 35. Ensuite, je vais le copier-coller afin que nous continuions à avoir cette apparence cohérente. Et la page suivante sur laquelle nous allons travailler est le menu. Nous avons le menu et les atouts ici, et il n'est pas vraiment nécessaire qu'il soit si spécial. Ce que nous voulons faire ici n'est qu'une vitrine. Il n'est pas nécessaire que ce soit parfait, car c'est juste quelque chose qu'ils ont déjà conçu. Je vais donc simplement le glisser-déposer. Et je vais le mettre ici comme ça. Je vais le renommer pour le menu Catch 35. Nous avons notre menu ici. Et j'ai envie de créer quelque chose qui soit visuellement un peu plus agréable à regarder. Nous avons donc le menu et je veux qu'il soit cliquable sur le site Web. Mais pour l'instant, je souhaite également une image différente pour représenter les différentes parties du menu. Je vais donc simplement dessiner ce carré et faire un écran partagé ici. Je suis un grand fan de ces sections d'écran. Ensuite, je vais prendre certaines de ces photos ici pour vraiment mettre en valeur une marque. Je vais créer cette opacité et récupérer le même bloc de couleur à partir d'ici, le copier et le coller, et le faire glisser ici pour que nous puissions toujours créer ces effets sombres et maussades. Je vais le renvoyer. C'est donc la chauve-souris. Je vais le prendre pour qu' il n'apparaisse pas dans le menu. En fait, je vais déplacer le menu ici pour qu'il soit entièrement cliquable et ouvrir ma grille et étendre sur toute la largeur de la grille. Peut-être pas sur toute la largeur parce que ce serait trop grand, mais peut-être que je vais le mettre ici. Je vais mettre une sorte de texte ici. Je vais le copier-coller parce que c'est le même design. Et juste pour donner à ceci et à cela un aspect légèrement différent, je vais simplement essayer en sorte que ce soit un fond jaune. C'est peut-être trop et c'est très bien. Mais je veux juste l'expérimenter pour jouer avec le look que nous recherchons. Ok, pas trop, pas trop fan. J'ai aimé que le jaune soit subtil, mais je veux que ce blanc soit légèrement différent de cette section. Je vais donc simplement dessiner une boîte ici, désactiver la bordure, la renvoyer au dos et la modifier légèrement, en l' ajustant pour qu'elle soit une teinte plus foncée. Je suis donc content de son apparence. Je viens de copier ce texte d'ici. C'est très bien. Cela vous donnera simplement l'occasion d' encourager votre client à créer un nouveau paragraphe de texte. Donc, si vous le souhaitez, vous pouvez modifier cela. Mais pour le cas d'utilisation de ce projet, je vais le faire comme ça. Et en fait, je vais étendre ce menu sur toute la largeur de la grille. Et maintenant, nous avons la page à propos. Je vais donc copier à nouveau la page d'accueil et créer la page À propos à la fin de cette vidéo. Une fois que vous aurez créé chaque page, je pourrai vous montrer comment créer un lien vers le site Web complet. Et c'est très utile lorsque vous créez des maquettes pour votre client. Et cela met vraiment en valeur la marque, ce qui est vraiment très utile. Nous avons donc la page à propos et allons-y et examinons la copie que je vais supprimer. En fait, je vais le garder, mais je vais le déplacer vers le haut, dissocier et le rendre blanc. Je vais le supprimer et le diviser en deux sections différentes. Ensuite, je vais à nouveau changer l'arrière-plan avec une autre image. J'adore son look. Et disloquez cette section créée avec amour et passion. Et maintenant, je veux présenter les propriétaires. Je vais donc dessiner deux carrés dans ma grille et les aligner sur chacune des grilles. Ensuite, je vais avoir deux photos de chacun des frères. J'ai l'impression qu'ils sont trop rapprochés. Donc je vais juste m'y intéresser. Ensuite, nous avons le blanc. Je vais le mettre en majuscules, puis faire ce centre soit beaucoup plus grand et qu'il en soit de même ici. Ensuite, je vais recommencer à regarder nos photos. Allez-y, fermez mes frontières. Ensuite, nous avons une autre photo de l'autre frère. Nous l'avons donc. Ensuite, nous avons les heures et le lieu. Je tiens donc à le montrer également là-bas. Je vais donc également copier la pièce principale. concentrons donc maintenant sur les heures et le lieu. Nous avons donc laissé revenir à la copie qui est maintenant en place. Je vais récupérer celle-ci ici parce qu' elle est déjà alignée à gauche pour cette section Je veux en fait essayer de créer une section cartographique ici. Il ne sera pas possible de cliquer ici, mais je veux juste afficher une carte. Je veux donc vous présenter quelques heures et lieux. Nous avons cette section et je vais ouvrir Google Maps. Et juste pour le plaisir, je vais aller de l'avant et zoomer. Et je vais juste mettre cette carte ici. C'est un faux client, donc ils n' ont pas vraiment de localisation, mais je vais juste faire semblant que c'est quelque part ici. Je vais juste faire semblant que c'est gros et je vais faire une capture d'écran. Ensuite, je vais le récupérer sur les captures d'écran de mon bureau et le déplacer ici. Je veux pouvoir présenter un Mac ici afin que les gens puissent l' ouvrir facilement sur Google. Je vais déplacer cela ensemble, le centrer verticalement. Nous y avons donc nos heures d'ouverture et notre lieu de travail. Je vais voir à quoi ça ressemblerait si je tourner sur toute la largeur. Et ils s' améliorent beaucoup quand c'est corrigé, puis je vais copier et coller cette section et déplacer ici pour avoir la dernière section que nous pouvons ajouter. Ça a l'air bien jusqu'à présent. Ensuite, nous avons le livre sur une page de tableau. Donc je vais juste le copier et le coller. Ensuite, je vais créer un formulaire. détails du formulaire sont donc le nombre de personnes, la date et l'heure. Nous avons donc ceci, je vais juste le copier-coller à nouveau. Permettez-moi de regrouper ce livre sous forme de tableau. Je vais juste garder cette section très, très simple. Je vais donc dessiner quelques cases ici. La police du paragraphe principal le rend noir. Nous avons donc le nombre de personnes, la date et l'heure. Donc, en fait, je les veux sur la gauche. Gardez-le tel quel. Alors réservez une table. Je vais également dessiner un triangle parce que je veux ces dates et heures soient affichées dans une liste déroulante. Je vais donc dessiner un triangle, le remplir en noir, le faire pivoter et le déplacer ici, puis je vais le réduire pour qu'il paraisse naturel, lieu de faire la même chose dans la section temporelle, cela signifie simplement qu'il existe une section où nous pouvons saisir la date et l'heure. Nous l'avons donc. Et ce que je veux faire, c'est créer le même effet en arrière-plan. Je vais donc l'envoyer à la fin. Et ce que je veux vraiment faire, c'est créer un carré intérieur pour qu'il ressemble un peu plus à une forme. Éteignez-le, centrez-le dans cette section et c'est à l'arrière. Et encore une fois, je vais envoyer l'arrière-plan à la fin. Et puis il y a le fait qui nous permet de vraiment réserver une table. Je vais donc regrouper cette section. En fait, je vais les déplacer vers le bas. Encore une fois, je vais mettre en évidence cette section, la regrouper. Ensuite, je vais centrer toutes ces différentes sections. Je souhaite également créer un effet une bordure, car il s'agit d'une pièce importante de la marque. Je vais donc simplement créer une bordure jaune. Elle le rend légèrement plus unique et signifie un appel à l'action. J'ai un livre, un tableau, et maintenant j'ai toutes mes différentes pages. Nous avons donc la page d'accueil, le menu, les horaires et le lieu, puis le livre, une page de tableau. Maintenant que je l'ai, je suis heureuse de les supprimer, mais vous pouvez vraiment voir où j'ai commencé par rapport à ma fin. Et ce n'est qu'une partie du processus de conception. Votre premier design ne sera pas parfait, mais au fur et à mesure que vous parcourez les différentes sections des pages de manière plus cohérente, il apparaîtra maintenant que je les regarde côte à côte, Je vois que j'ai utilisé cette image deux fois, donc je vais simplement la remplacer par une autre image. Ensuite, je vais supprimer ces sections ici. De plus, j'ai remarqué qu' il s'agit également des mêmes images, celle-ci parce que je l'ai copiée et collée. Je vais donc remplacer cette image. image tellement différente juste pour avoir un look et une sensation légèrement plus agréables. J'aime, j'aime, j'aime. Comment cela s'est passé jusqu'à présent. Maintenant, je veux prototyper le site Web. J'ai conçu chacune de mes pages. Maintenant, ce que je veux faire c'est m'assurer que tous les boutons sont cliquables, de sorte que lorsque quelqu'un clique sur ce bouton, cela mène à un livre, à une page de tableau. Ainsi, pour tous les appels à l'action, vous devez essentiellement vous assurer que tous les boutons sur lesquels vous souhaitez cliquer sont regroupés. Donc, comme le texte et ce rectangle sont deux éléments différents, vous devez vous assurer de les regrouper. Ainsi, si vous cliquez sur la police et maintenez la touche Shift enfoncée , puis cliquez également sur le rectangle, vous pourrez les regrouper et vous pourrez le faire à l'aide des différents boutons de votre page. Et cela est très utile pour la section suivante, qui sera consacrée au prototypage du parcours utilisateur réel de ce site Web. Nous allons donc faire de même pour cela. Nous avons le et, mais nous avons regroupé tous les différents éléments. Maintenant, nous allons cliquer sur ce bouton prototype dans le coin supérieur gauche. Nous allons maintenant être en mesure de nous assurer que tous les boutons renvoient à l' endroit où ils doivent être placés. Nous avons donc la barre de navigation principale et nous voulons maintenant nous assurer que chaque élément de menu de la navigation pointe réellement vers le bon endroit où nous voulons que tout soit placé. Je vais donc continuer et cliquer sur Accueil. Et je veux que cela aboutisse à cette page d'accueil. Je vais continuer et cliquer sur Accueil. Et puis pour le menu, je veux que cela aille sur la page du menu. Alors je vais juste y aller, prendre cette flèche et la pointer là. Et vous verrez qu'une fois que j'aurai cliqué sur ce bouton, devrais accéder au menu. Je vais faire de même avec la page à propos, en leur indiquant la page des heures et du lieu. Accédez aux heures et au lieu, puis nous réservons une page de tableau. Nous allons réserver une table. Nous y voilà donc. C'est le menu complet. Et ce que nous voulons faire alors, c'est le faire. Même chose pour tous les boutons ci-dessous. Nous avons donc une table de réservation et je veux que entonnoir soit utilisé pour réserver une page de table. Je vais y aller et le mettre là-bas. Il s'agit de chats 35. Je vais donc mettre cela sur la page à propos. Cela dit, consultez notre menu. Je vais donc le mettre sur la page du menu. Puis celui-ci parle enfin à nouveau de table à godets. Je vais donc ajouter cela au livre sous forme de page de tableau. Enfin, comme nous voulons que ce menu soit présenté dans tous les modèles, je vais le prendre et en faire un composant. À partir de là, je pourrai supprimer toutes ces différentes sections. Alors je vais y aller et le faire. Je vais glisser-déposer ce composant ici. Vous verrez qu'une grande partie est déjà configurée pour être redirigée vers les bonnes pages. Il y a à peu près les heures et le lieu. La seule chose qui manque, cependant, c'est cette maison. Je veux donc m'assurer que la page d' accueil mène à cette page. C'est donc aller à la maison. Et nous allons faire exactement la même chose avec ce bouton « livre a table ». Cela permettra d'accéder à la page du livre un tableau. Nous ferons de même avec ce menu. Je vais donc supprimer ce menu et le remplacer par le composant. Ensuite, nous avons la page d'accueil. Je vais donc double-cliquer dessus à nouveau et je vais m' assurer que cela aboutit à cette page. Et la page à propos n'est pas cliquable car nous serons sur cette page, puis nous aurons cette section de tableau du livret. Encore une fois, transférez cette section vers le livre sous forme de tableau. Ensuite, nous ferons de même pour les heures et le lieu. Supprimez cette section ici , récupérez cet élément, faites exactement la même chose. pointent tous dans la même direction. Et puis nous avons la maison. Vous voulez vous assurer que cela mène à la page d'accueil. Nous avons les heures et le lieu, puis nous avons une table, puis nous en réservons une. Enfin et surtout, nous faisons exactement la même chose pour cette page. Prenez l'élément composant, faites-le glisser et déposez-le dans le livre, une page de tableau. Ensuite, nous voulons utiliser le bouton d'accueil et nous assurer qu'il est dirigé vers l'accueil. Ensuite, nous allons le modifier et l'ajuster. Parce que pour une raison ou une autre, c'est le cas. En restant ensemble, nous l'avons. Et enfin, nous l'avons. Maintenant, nous pouvons parcourir ce site Web comme s'il s'agissait d'un vrai site Web et je vais vous montrer exactement comment cela a fonctionné. Mais c'est très utile lorsque vous présentez un site Web à votre client pour la première fois Il est beaucoup plus facile d'apporter des modifications de conception à ce stade de votre processus de conception Web lorsque vous êtes en l'intégrant s 9. Bref 3 : découvrez votre style de conception: troisième brief de projet consiste essentiellement faire ce que vous voulez dans votre propre style. La mission principale est donc de repenser site Web d'une entreprise ou d'une marque que vous aimez dans votre propre style. Vous pouvez également concevoir un site Web pour un client de rêve, qu'il soit existant ou imaginaire. Donc, s'il y a un influenceur que vous aimez vraiment, ou un coach ou un mentor que vous aimez vraiment, vraiment. Vous pouvez créer un site Web fictif pour cette personne ou vous pouvez créer un faux personnage représentant une personne du secteur dans laquelle vous aimeriez travailler dans le projet. Pour ce projet, vous avez les rênes créatives nécessaires pour aller dans la direction Choisissez une marque dans un secteur dans lequel vous aimeriez travailler afin de profiter pleinement de ce que le changement de marque d'un site Web ressemblerait à. Vous pouvez choisir parmi pratiquement tous les types de secteurs tels que la santé et le bien-être, les technologies de rupture, la mode, coaching et le développement personnel dans le commerce de détail, les médecins en design d' intérieur, les dentistes, avocats, et la liste s'allonge encore et encore. s'agit donc que de quelques secteurs qui peuvent vous intéresser à des projets d'inondation que vous souhaitez réaliser pour quel secteur et pour quel type de clients. Il y a donc deux options ici. La première option consiste à repenser la page d'accueil ou le site Web complet de l'entreprise ou de la marque de votre choix. Donc, s'il y a une marque de commerce électronique que vous aimez vraiment, ou s'il y a une marque personnelle que vous aimez vraiment proposer une idée de site Web repensé pour cette personne, puis la concevoir de manière à J'aime entrer. Explorez donc vraiment les styles de design qui vous intéressent et essayez également de trouver l'inspiration pour quelque chose qui vous intéresse en tant que style de design. Il s'agit simplement d'explorer votre style de design et voir ce qui vous attire naturellement. deuxième option consiste à concevoir la page d'accueil ou un site Web complet pour un client de rêve et un secteur dans lequel vous aimeriez travailler. Et évidemment, j'ai énuméré un certain nombre d'industries ci-dessus. Vous pouvez soit créer un faux personnage de client, soit choisir une personne dont vous savez qu'elle serait essentiellement votre client idéal. Voici donc les deux options : vous pouvez soit uniquement la page d'accueil, soit créer le prototype complet du site Web, comme nous l'avons fait dans descriptif du projet, avec quelques conseils utiles option consiste à rechercher une entreprise. la marque que vous aimez et redessinez leur site Web et votre propre style. N'hésitez pas à utiliser leurs images, leurs textes, etc. Mais assurez-vous de citer le design original si vous souhaitez le mettre en valeur dans votre portfolio. Vous ne pouvez donc pas vraiment dire, oh, j'ai conçu un site Web pour Google, par exemple si vous ne faites que redessiner Google et votre propre style, mais oui, en gros, simplement en vous assurant de créditer l'original la marque et le projet amusant que vous vouliez recréer. Si vous ne trouvez pas de marque, vous pouvez également rechercher l' inspiration pour votre site Web sur Pinterest, Behance ou Dribble and Redesign. agisse de l'un des sites Web que vous aimez il s'agisse de l'un des sites Web que vous aimez ou de l'un des sites Web d'un secteur que vous aimez, ils ont votre propre style. Pour la deuxième option, vous avez la possibilité de créer un personnage client pour un client de rêve et de créer un site Web pour cette personne. Vous pouvez le mettre en forme de la même manière ces dossiers clients sont présentés dans cette classe. Vous pouvez soit l'écrire , soit, si vous ne voulez pas l' écrire, vous y allez. Une autre option pour ce personnage fictif est de trouver des images libres de droits pour les clients de ses rêves et de les intégrer à votre conception Web. Vous pouvez donc soit vraiment le présenter par le biais d'une copie que vous avez écrite qui représente un faux client. Vous pouvez également utiliser les instructions de copie que je vous ai également montrées dans ce cours. Je vais donc opter pour la deuxième option. Je vais créer un faux personnage de client et vous montrer comment je l'aborderais. Je ne sais pas encore vraiment dans quel secteur je vais me lancer. Mais je pense qu'au fur et à mesure que je trouverai de l' inspiration sur Pinterest , je serai en mesure de déterminer avec quel type de client je souhaite travailler. Je vais donc simplement rechercher un design de site Web neutre. En tant que designer, je dirais que mon style est beaucoup plus minimaliste et neutre. Je suis donc très attirée par les marques Inspire plus féminines aux couleurs neutres. C'est donc généralement ce qui m'attire. Je n'ai pas seulement travaillé avec des marques dans ces domaines, mais j'adore concevoir de manière très neutre. Donc c'est totalement dans mon style, juste les couleurs neutres et tout ça, c'est vraiment ce que j'adore. Je vais donc simplement en ouvrir quelques-uns afin de pouvoir commencer à m'inspirer pour ce à quoi je veux que inspirer pour ce à quoi le site Web que je crée ressemble. J'adore les couleurs ici, j'adore les carrés dans les carrés ainsi que cette section d'images Je pense que ce que je vais faire pour cette marque est en fait conçu pour un entraîneur. J'ai déjà conçu de nombreux sites Web pour de nombreux entraîneurs et de nombreux espaces différents. Et je dirais que l'une de mes spécialités est de créer des sites Web pour les entraîneurs , peu importe Spicer. Je vais donc vous montrer comment je passe par ce processus lors de la conception d'un site Web. Je vais donc commencer par aller sur Pexels et télécharger des images. De plus, si vous n'êtes pas très précis sur le type de client pour lequel vous souhaitez créer. Vous pouvez également simplement regarder Pexels et voir quelles sont les bonnes images. Ensuite, créez le personnage basant sur les images que vous trouvez, comme si cette fille fabriquait des bougies. Si je trouve beaucoup de bonnes images représentant une personne fabriquant des bougies, je peux créer un site Web pour un fabricant de bougies, par exemple parce que l'imagerie joue un rôle important dans ce que nous créons. Je vais donc continuer à télécharger des images qui, selon moi, correspondent à mon style et à celles qui m'attirent, puis nous nous en occuperons à partir de là. J'ai maintenant un tas d'images que j'ai trouvées sur Pexels. Je vais simplement commencer à jouer avec le site Web en me basant sur les images que je trouve. Ensuite, je vais créer la personnalité de mon client en essayant explorer les différentes directions de conception que je pourrais suivre avec cette marque, car c'est un style à suivre et il n' y a aucun paramètre de conception. Je vais simplement m'en servir comme d'un exercice exploratoire pour remettre en question mon processus de conception. Je vais donc suivre cette direction. Je vais donc poursuivre et ouvrir un fichier XD. Je vais donc simplement dessiner quelques rectangles ici pour pouvoir glisser-déposer des images que j'ai aimées, puis copier quelques-unes pour pouvoir facilement référencer des photos qui m' attirent et puis créez un moodboard d' images avant de me plonger dans le projet. Parce qu' il existe évidemment de nombreuses manières différentes de concevoir ce site Web, mais je veux m' assurer que toutes les couleurs et les images vont de pair car j' utilise principalement des sites libres de droits imagerie. Je veux donc m'assurer de créer ce mood board avec images dont je sais et qui, selon moi, peuvent fonctionner ensemble. Je vais juste y jeter un œil, aime vraiment cette couleur. Et je veux voir s'il y a des couleurs que je peux trouver dans ce style. Il y a donc évidemment beaucoup de pastels Hanks. Je ne sais pas encore vraiment ce que serait cette marque. Je veux que ce soit amusant et ludique dans un sens. Donc, tout ce qui a ces couleurs pastel amusantes et éclatantes peut être utilisé sur mon site Web. Je vais donc continuer à glisser-déposer. Certains d'entre eux ne sont peut-être pas exactement ce que je recherche. Vous voyez donc un schéma ici. Toutes ces images vont de pair et je sais toujours pas ce que devrait être la marque, mais j'aime ces couleurs et je m' inspire de ces couleurs. Alors je vais commencer à jouer avec ce que je prends. C'est possible. Je suis certainement plus attirée par une marque créative, qu'il s'agisse d'un illustrateur, d'une personne dans le domaine de la création, parce qu'il y a plein de formes vraiment amusantes et dessins, personnages et choses créatives intéressantes. Je veux donc m'assurer que cette marque soit perçue comme une marque très créative et amusante. Maintenant, en utilisant ces images, je vais retourner sur Pinterest et rechercher un peu plus d'inspiration, le domaine de la création. Je peux donc simplement jouer avec différents designs. Je vais donc ouvrir Google, mais aussi Pinterest, puis taper un site Web coloré. Et peut-être que dans celui-ci, je ferais un site web pastel. J'ai aimé ces vêtements à carreaux et leurs couleurs neutres. Celui-ci est vraiment cool. Celui-ci est vraiment cool. Je vais m'en inspirer. Je les adore, le minimalisme, mais aussi les petites touches de couleur. Et je vais l'utiliser et le combiner avec d'autres choses que je connais en matière de design et j'espère pouvoir créer quelque chose de vraiment unique. Je vais juste régler mon écran pour pouvoir facilement cliquer entre les deux. Je vais donc juste taper un nom, histoire de l'art. Je ne sais pas, juste un nom aléatoire qui représente l'ambiance de la marque que nous recherchons. Ensuite, je vais également jouer avec différents logos. Je vais donc l'utiliser également en minuscules, Justice, puis jouer avec différentes polices. Notre divertissement et notre créativité. Je vais juste aller en haut de ma liste de polices. plupart des polices que j'utilise dans mes projets ont été achetées sur Creative Market ou Envato Elements , car j'ai tellement de polices dans mon répertoire maintenant que je crée depuis si longtemps, Je devais simplement parcourir mes polices telles quelles, puis explorer ce que j'aime. Mais si vous n'avez aucune police, je vous conseille explorer des ressources telles que Envato Elements ou Creative Market pour trouver le style de police que vous souhaitez expérimenter. Il existe de nombreux packs de polices qui peuvent être utilisés dans plusieurs projets différents. donc vivement d'investir dans des polices personnalisées. Absolument, je n'aime pas vraiment ce nom, donc je vais peut-être essayer quelque chose d'autre, donc je vais simplement utiliser les deux et voir ce que j'aime, un peu comme celui-ci. Mais je veux quelque chose d'un peu plus créatif qu'une police minimale. Donc je vais juste continuer à vivre ce genre de situation. Je pense que cela pourrait être amusant s'il est utilisé correctement. La plupart du temps, je vais juste le changer en noir. C'est donc un peu plus facile pour moi de voir en termes de style. Ici, je ne cherche pas seulement des polices pour le logo, mais aussi des polices qui pourraient également être utiles pour les en-têtes et les paragraphes principaux. Je vais donc opter pour l' une de ces polices. Déplacez-les tous à l'intérieur. C'est vraiment comme ça. J'ai l'impression que c'est très artistique. Eh bien, voyons voir. Je vais juste l' expérimenter d' abord. Centrez-le simplement. Je vais dessiner des rectangles pour essayer de sélectionner une couleur de l'une de mes images ci-dessus dans celle-ci et hors de la bordure. Ensuite, je vais juste l' agrandir un peu plus. Ensuite, je vais désactiver la bordure, utiliser mon sélecteur de remplissage, peut-être jouer avec du jaune et du rose. Hé, allons-y pour l'instant dans une sélection et faisons-en une sorte de blanc. Je vais donc essayer de trouver une épouse de l'une de ces couleurs, peut-être. Je vais donc juste copier et coller, ai essayé de sélectionner un blanc différent. J'adore vraiment cette photo, alors je vais juste voir à quoi elle ressemblerait. Et évidemment, j'ai beaucoup aimé cette photo, donc je vais juste la mettre ici pour le moment. Maintenant, l'essentiel, c' est que je cherche des couleurs qui me plaisent. Alors voyons voir. Je veux que ce soit très artistique. Vous en avez besoin pour être utilisé. Je vais maintenant essayer de sélectionner une couleur à partir de l'une de ces images. Par ici. Je veux que ce soit l'en-tête principal et je vais essayer de trouver une couleur que j'aime, peut-être une teinte légère, plus foncée, peut-être pour ajouter de la couleur. Je vais également continuer à jouer avec d' autres personnes. Pas tout à fait. Oui. J'ai donc vraiment aimé ce contraste. Et puis, évidemment, je l'ai retiré de là. Donc je vais juste le garder pour le moment quand je dessinerai un bouton. Nous pouvons donc lancer une sorte d'appel à l'action. Peut-être jouez avec la bordure de couleur foncée 3. Ensuite, je vais dessiner et toucher. Ensuite, je vais essayer de trouver une police minimale. Jouez avec l'espacement. Peut-être que je veux le tester sans bordure. Couleur de remplissage, T, couleur de l'écran. Et puis ce bouton, pour aller bien, je l'aime beaucoup plus. Je vais donc juste ajuster un peu cela. Maintenant. Je vais également ajuster cette police. Ensuite, testez simplement d'être de cette couleur. , j'aime bien ça. Et je veux jouer avec la forme ici. Je vais donc y aller et le faire. Allume ma grille pour que je puisse l' aligner sur le côté. Je vais ouvrir Pinterest très rapidement et rechercher quelques designs différents, de l'inspiration créative et des mises en page. Je vais donc aller sur Pinterest et passer en revue certains d'entre eux pour voir comment je peux créer un effet unique qui crée également quelque chose d'intéressant. Je vais donc expérimenter avec une section principale qui traverse , puis trois images ci-dessous. Je vais ouvrir mon fichier XD. Déplacez ceci un peu plus bas ici pour allonger un peu plus mon dossier. Prenez ce copier-coller, supprimez cette section, mettez-la en vert. Alors je vais prendre cette police. ce que j'ai. Je vais le réduire légèrement parce que je pense que c'est trop grand. Alors prenez ceci, collez-le pour le moment. Je vais juste faire du texte de Lorem Ipsum ici et aller sur Google et rechercher le générateur Lorem Ipsum, copier et coller cet irrégulier, le support, désactiver l'espacement des lettres, augmenter la taille, changer la hauteur de la ligne, étirez-la. peux essayer de le retourner sur le côté pour créer le look que je souhaite obtenir, copier et de le coller et de le mettre également de l'autre côté. Centrez tout cela verticalement. Cool. J'aime bien le look jusqu'à présent je vais ajouter un bouton ici. Regroupez-le, centrez-le verticalement. Payez. présent, j'adore le look des robots. Oui, j'aime vraiment ça. Je vais essayer d' ajouter un menu ici. Donc cheval vert. Ensuite, je vais ajouter un bouton ici. Nous allons verrouiller cet arrière-plan afin que je ne puisse pas le modifier en cliquant sur la commande L ou en regroupant ce bouton , puis en alignant les éléments verticalement. Ensuite, je vais simplement déplacer cela un peu et les distribuer de manière égale. Alors je veux juste voir cet espacement. Je vais faire en sorte que l'espacement soit de 80 pixels entre chaque section. Je vais juste en faire une marque personnelle. Centrez-le verticalement, centrez-le dans la grille. J'adore donc le look qu'il a eu jusqu'à présent, je veux vraiment essayer de l'avoir au centre. Donc je veux juste voir à quoi ça ressemblerait. Je suis à peu près comme ça. Je vais donc simplement tracer une ligne ici parce que je veux peut-être séparer l'en-tête de la section principale et même le rendre collant. Je vais donc simplement expérimenter cela. Peut-être étendre cette photo. Ce sont des hauteurs égales, doivent être légèrement surélevées, légèrement plus hautes. Je vais juste déverrouiller cet arrière-plan parce qu'ils l'ont déjà verrouillé. Ensuite, je vais l'aligner sur cette section afin de pouvoir tout centrer verticalement. Centrez verticalement, puis je vais copier et coller ceci. Faites de même pour le haut, car cela permet vraiment de diviser ces sections, de les centrer verticalement. Ensuite, je vais renvoyer ces deux arrière-plans au verso. Super. J'adore vraiment ça jusqu'à présent. La prochaine chose que je voudrais faire est aborder les différents services. Je vais donc garder cette section ici, copier et la coller trois fois, activer ma grille pour pouvoir les aligner. Cool. Maintenant, la prochaine chose que je veux faire est de déplacer des images dans ces images. Je vais donc simplement commencer et ouvrir ceci. J'aime donc beaucoup cette image en couleur. Je vais juste le déplacer ici, mais je voudrais peut-être m'en servir pour plus tard. La prochaine chose que je veux faire est de dessiner des rectangles ici. Et je vais lui donner la même couleur que celle de la partie supérieure. En fait, je vais lui donner la même couleur que ce vert, peut-être avec une bordure, mais en lui donnant une couleur blanc cassé, changeant la taille en dix. Ensuite, je vais copier et coller cette couleur de fond. En fait, je vais juste expérimenter avec une bordure extérieure. Je vais donc le copier-coller et appuyer sur Shift pour l'agrandir un peu. Je vais juste verrouiller cet arrière-plan pour pouvoir jouer avec ce que je fais. Je vais enlever le remplissage, ouvrir une bordure et le rendre vert. Ensuite, je vais faire en sorte que la bordure soit de la taille Chu, puis je vais la centrer. Je veux donc essayer d'avoir cette ligne extérieure dans ces images. Donc, jusqu'à présent, j'aime vraiment ça. Je vais le copier et le coller sur les autres images et faire de même ici. Allumez ma grille et assurez-vous que bord extérieur est aligné sur la grille. Donc j'aime vraiment ça. C'est certainement un look beaucoup plus épuré que ce que j' essayais auparavant, car il y a des lignes ici. Maintenant, je veux m' assurer qu'elles sont de la même taille. Il s'agissait donc d'une ligne de deux pixels. Je vais donc m' assurer que cette ligne sur la bordure est également constituée de pixels, juste pour m'assurer que nous avons cette cohérence en termes d'épaisseur de ligne. Ensuite, je vais prendre cette section et la copier et la coller. Prends cette couleur verte. Faites cette taille. Ou peut-être êtes-vous en train de suivre une formation pour suivre cette description ? Débloquez cet arrière-plan, étendez-le plus bas qu'une expérience avec ce type de couverture. Peut-être réduisez-le légèrement , car il s' agit d'une section de paragraphe plus petite. Puis centrez le tout verticalement, horizontalement. Je vais donc juste le déplacer un peu vers le bas, puis appuyer également sur un bouton. Je vais donc récupérer ce bouton d'ici. Juste pour des raisons de design, je vais l' étendre sur toute la largeur. J'ai l'impression que je ne veux pas vraiment de description et peut-être que je voudrais l'ajouter en tant que sous-en-tête. Apprenez donc à votre rythme. Peut-être que je trouve ce bouton un peu trop fort. Donc, ce que je vais faire, c'est dessiner une flèche parce que cela signifierait essentiellement la même chose, mais d'une manière plus simple. Je vais donc m' assurer que c'est vert. Zoomez un peu, copiez-collez-le, ajustez-le, puis faites la même chose de ce côté. Assurez-vous que ces points sont autour de cela afin que nous puissions également créer une arête pointue autour de ceux-ci. Je vais donc les regrouper et les garder tels quels. Et j'ai l'impression que c'est certainement une façon beaucoup plus simpliste de présenter ce que quelqu'un apprend. J'aime vraiment le look Jusqu'à présent, j'ai adoré les couleurs, le minimalisme adore aussi les polices et le verrouillage de l'arrière-plan. Je vais juste le déplacer vers le bas et je veux voir à quoi cela ressemblerait si c'était le cas, donc j'aime bien ça. Je vais donc continuer ainsi, juste pour les regrouper. Ensuite, je vais également ajouter section Alarm Ipsum ici. Centrez-le. Ensuite, je vais copier et coller cette ligne ici. Et parce que je veux aussi aider à décomposer cette section. Dissociez donc ce qui peut s'étendre sur toute la hauteur. On dirait que ces lignes sont peut-être de couleurs différentes. Je vais donc juste essayer de faire des expériences avec ça. Vous ajoutez une couleur différente. Ça va refroidir, ça a l'air mieux. Je pense donc que cela signifie que cette ligne est incorrecte. De la couleur aussi. Je vais donc m' assurer que cette commande est sélectionnée. J'adore donc le look qu'il a eu jusqu'à présent. Je vais juste déplacer cela parce que je pourrais peut-être même changer les polices plus tard ou jouer avec une autre police. Je vais donc copier et coller cette couleur ici. Et une autre façon vraiment cool de sélectionner les couleurs est de prendre la couleur principale que vous utilisez et d'essayer trouver la même teinte mais dans une couleur différente. Je vais donc déplacer ça pour voir s'il y a des couleurs qui me plaisent. Et vous pouvez déjà voir que ces couleurs semblent fonctionner ensemble simplement parce qu'elles sont d'une teinte similaire. Je vais en changer l'opacité. J'aime bien cette couleur, mais j'ai l'impression qu'elle ne fonctionnera pas dans cette section à moins d'avoir une image plus claire. Je vais donc voir quelles autres images j'ai. Et s'ils voulaient travailler ici, je reviendrais à cette teinte de vert. Et puis une autre façon utile de choisir des couleurs consiste à utiliser la même couleur, puis à déplacer le détecteur de couleurs ailleurs sur l'écran. Il conserve donc toujours cette cohésion des couleurs. Un peu comme une couleur vert cassé. Je suis plutôt content de ça. Je vais désactiver cette section de bordure et peut-être essayer de diviser cette section. Maintenant, copiez et collez ceci ici, dissociez-le. Allume ma grille pour que je puisse tout aligner. Je vais simplement ajouter cette couleur sur le côté pour pouvoir la sélectionner un peu plus facilement. Je vais retourner à mon générateur Lorem Ipsum, copier ceci, passer à XD. J'ai l'impression que cette couleur est encore un peu trop proche car elle rend la lecture un peu plus difficile, mais je veux quand même utiliser cette couleur verte comme couleur principale du texte. Je vais donc essayer de trouver une couleur très légèrement plus claire. Une autre chose que je peux expérimenter est de prendre cette couleur claire et de trouver une teinte légèrement , légèrement, légèrement plus claire. Ou nous pouvons simplement le faire blanc parce que j'ai vraiment beaucoup aimé le look. Je vais donc m'en servir pour le moment. Ensuite, je vais saisir l'appel à l' action qui vient d'en haut. Une autre chose que je pourrais essayer est d' essayer de sélectionner cette couleur comme l'une des couleurs. Je veux juste expérimenter ça. Je ne sais pas si c'est exactement ce que je vais faire, mais je veux le voir ici et voir à quoi cela ressemblerait. C'était aussi une couleur rouge. Par exemple, est-ce que cela semble suffisamment cohérent pour sembler logique ou si ce n'est pas le cas du tout ? Donc, j'aime bien les teintes combinées, je pourrais trouver une teinte légèrement différente des mêmes couleurs. Je pense donc que c'est un peu trop aléatoire. Je vais donc revenir à cette couleur principale. Oups. Oui, je ne le pensais pas. Je vais faire cet écran, puis peut-être faire une teinte légèrement plus foncée que ce vert. Gardez-le tel quel, puis utilisez-le peut-être comme teinte différente. Très, très légère différence de teinte à cet endroit. Ce n'est pas exactement pourquoi, mais hors ligne. Ensuite, déplacez-le un peu vers le haut et centrez-le verticalement. Cool. En fait, je suis très content de son apparence. Je vais simplement ajouter une autre section ici parce que j'ai un appel à l'action qui mentionne les ateliers. Je vais donc ajouter les forêts. Les ateliers, comme je le faisais auparavant, veillent à ce que tout soit espacé de 80 pixels. Il va mettre en évidence cette section, la centrer parce qu'elle semble légèrement déséquilibrée. Je vais donc créer ce service, ce cours. Je suis vraiment content du résultat similaire à ce que j'ai fait lors de l'une des leçons précédentes. Je vais en faire un en-tête autocollant. Je vais donc simplement regrouper tout cela et le mettre au premier plan. Et puis ici, sur le côté droit, je vais cliquer sur position fixe lors du défilement. Ainsi, lorsque j'appuie sur Play et que je regarde le prototype, je peux réellement voir à quoi il ressemblerait. Je vais donc tout examiner pour voir s'il y a autre chose que je voudrais changer pour le moment. Je pense que je suis content de la façon dont cela s'est passé Je vais donc simplement appuyer sur Play, pour mettre en pleine largeur. Et j'ai vraiment adoré les couleurs. J'adore la façon dont il défile. J'aime le minimalisme, j'aime les couleurs. Les polices fonctionnent très bien ensemble. Et oui, je suis vraiment content de la façon dont ça s'est passé. Je vais donc y aller et enregistrer ça. C'est mon ordinateur de bureau. Donc, si je clique sur ce titre, je peux l'appeler page d'accueil de Vanessa. Et puis, si je clique sur Commande E, je peux continuer et l' enregistrer sur mon bureau. Ensuite, à partir de là, je pourrai le télécharger dans la section des projets de classe et parcourir en quelque sorte le projet pour lequel j'ai décidé de créer à qui il est destiné, pourquoi je l'ai fait et quel en est l'objectif. Et puis, oui, j' espère que vous aimeriez suivre mon processus de création de cette mise en page. Et j'ai hâte de voir ce que vous allez créer. Si vous choisissez de travailler sur ce brief de projet pour votre projet de classe, n'oubliez pas de le télécharger dans la section des projets de classe. J'ai hâte de voir ce que tu vas créer. 10. Bref 4 : votre marque personnelle: Donc, pour le brief du projet, vous allez concevoir et prototyper un site Web pour votre propre marque personnelle. En tant que designer, avoir votre propre base d'accueil en tant que designer est vraiment important, car permet aux futurs clients de vraiment vous connaître et de connaître votre marque, ainsi que le type de projets sur lesquels vous avez travaillé dans le passé. En étant capable de mettre en valeur votre portefeuille. Pour cette mission, deux options s'offrent à vous. Vous pouvez soit concevoir la page d'accueil votre marque personnelle en tant que designer prometteur. Vous pouvez également concevoir un prototype de site Web entièrement interactif, comme nous l'avons fait et un brief de projet pour votre propre marque. En tant que designer personnel, le plus grand défi ici est de vous confier la rédaction vôtre. copie du site Web pour présenter votre argument de vente unique aux clients de vos rêves. C'est une très bonne façon de mettre en pratique la façon dont vous vous présentez dans le monde en tant que designer. Vous vous sentez donc en confiance pour présenter les services que vous offrez. Cela vous donnera également l'occasion de vous adresser aux différents secteurs et types de clients avec lesquels vous avez toujours rêvé de travailler. N'hésitez pas à utiliser les instructions de copie que j'ai fournies précédemment pour vous aider à orienter votre processus de rédaction. J'ai donc déjà mon propre site Web de marque, mais je travaille sur un autre projet de design. Je vais donc travailler là-dessus pour les projets de ce cours en particulier et pour ce site Web, je vais particulièrement concevoir uniquement la page d'accueil. Et voici quelques exercices pour vous aider à démarrer. Les idées clés sont de vous aider à réfléchir à ce à quoi vous voulez que votre marque ressemble. Je vais ouvrir un fichier Adobe XD et le mettre côte à côte afin pouvoir noter quelques idées différentes que j'ai pour la marque de design que je suis en train de créer. J'ai donc un fichier Adobe XD vierge et je vais juste écrire quelques idées différentes. Alors peut-être voulez-vous avoir un nom de marque ou vous voulez simplement être connu sous votre propre nom ? J'ai mon propre nom de marque, côté maman, mais je crée également une entreprise de design distincte, donc je vais le faire pour ce projet. J'ai donc le hub de marque qui est le nom de l'entreprise que je vais créer. Et je voudrais juste noter quelques adjectifs. Je veux que ce soit minimal, moderne, sophistiqué, chic, encore une fois nourrissant. Pour l'instant, ce sont les principaux adjectifs auxquels je souhaite que cette marque ressemble. Maintenant, évidemment, je pense à cette marque depuis un certain temps déjà. Je connais donc déjà la direction du design que je voulais suivre. Mais juste pour recueillir quelques idées, comme toujours, je vais commencer par Pinterest, dribbler et participer pour trouver l'inspiration. Je vais donc ouvrir Pinterest, la page d'accueil et rechercher des sites Web de créateurs. Et peut-être n'aimez-vous même pas nécessairement cette apparence. Mais s'il y a des designers que vous suivez sur Instagram, par exemple ou TikTok, et que vous avez aimé le look de leur site Web. N'hésitez pas à utiliser également leur site Web comme source d'inspiration. J'ai également de nombreuses ressources sur mon Pinterest. Donc, si vous allez sur mon Pinterest, vous pourrez également voir les différents tableaux que j'ai créés pour de nombreux projets différents. J'en ai un sur l'inspiration en matière de conception Web, la conception de pages de destination dans tous ces différents aspects du monde du design. N'hésitez donc pas à l'utiliser comme ressource. Je vais simplement consulter mon tableau d'inspiration pour la conception de sites Web et voir ce que je peux trouver ici. J'aime vraiment ce look moderne et épuré, et j' opte pour ce style. Je veux vraiment qu'il s' agisse d'un noir et blanc neutre , car je pense que c'est la marque que je suis en train de créer qui a le plus de sens. Je vais donc continuer à ouvrir des sites Web qui correspondent en quelque sorte au style. J'ai également créé un tableau Pinterest avec quelques idées de design pour imagerie, la topographie et la mise en page de sites Web. Je vais donc m' y intéresser également. J'ai mes propres images que je vais utiliser dans ce projet. Mais pour l'instant, je vais commencer à jouer avec différents designs. J'en ai donc quelques-uns que j'ai ouverts ici. J'adore vraiment ce look éditorial, alors je vais jouer avec ça. Je vais dessiner des carrés. Il ne s'agit que de quelques espaces réservés aux images pour le moment. Je vais également taper le nom de la marque ici. La marque est si grande et je vais en fait jouer avec quelques polices différentes dans différents styles. Je veux donc jouer avec ça en majuscules, et je veux aussi jouer avec ça en majuscules. Donc, évidemment, je ne vais pas parler de stratégie de marque ici, donc je vais simplement choisir un simple mot pour commencer. Je vais donc essayer de trouver une police qui me plaise pour rendre cette police noire pour je puisse la voir un peu mieux, mais comme ça. Je vais donc simplement copier et coller ceci, puis continuer jusqu'à ce que je trouve d'autres polices dont j'ai vraiment aimé l'apparence. Je vais juste zoomer un peu pour voir. J'ai vraiment aimé ce look minimaliste ici. Je vais juste le copier. En fait, j'aime bien la police minimaliste ici, donc je vais opter pour celle-ci pour le moment. Encore une fois, je pourrai toujours modifier cela plus tard. Ce n'est qu'un point de départ. Si vous vous concentrez sur la création de votre propre marque, vous pouvez passer du temps ici. Absolument. Mais pour le cas d' utilisation de ce projet, étant donné que je ne me concentre pas sur marque, mais sur la mise en page de sites Web, je vais simplement utiliser ce mot-symbole simpliste pour le moment, que j'adore vraiment. Je pense que c'est un peu trop grand. Je vais juste me concentrer là-dessus. Ensuite, je vais jouer avec les topographies. Ensuite, je vais créer une zone de texte et taper mon crochet. Je veux donc expliquer à quoi sert la marque et à qui elle s'adresse. Vous souhaitez créer un crochet en fonction de ce pour quoi vous concevez. Pour moi, le hub de marque sera un endroit où je proposerai des modèles de conception Web et des modèles de marque de toutes sortes. Je veux donc être en mesure de communiquer cela dans le hook principal du projet. Je vais donc choisir une police différente pour cet en-tête. En fait, j'aime bien ces polices éditoriales. Je vais vraiment aller de l'avant avec ça. Ensuite, je vais également créer une autre zone de texte pour le syndrome de police des paragraphes. Ensuite, je vais le changer en 22. Brand est votre guichet unique pour tous vos besoins en matière de design. Et je vais zoomer et changer cette police pour une police plus minimale. Votre guichet unique pour tous vos besoins en matière de design. Peut-être que moi n'aimons pas nécessairement cette police, alors je vais y aller si elle est trop grande. Alors peut-être que je vais penser que c'est 24, changer la hauteur de la ligne à 40. Non, je n' aime pas forcément ça ensemble. Je vais donc changer police des paragraphes et je ne pense pas vraiment être obsédée par cette police Je vais donc juste en créer une copie pour l'avoir au cas où je voudrais y revenir, mais je vais également expérimenter d'autres designs. Cette police me plaira peut-être, alors je vais la revoir. Et je viens de le mettre ici. Je vais le mettre en plein écran pour que vous puissiez en profiter pleinement. Maintenant, je veux que ce site Web soit assez haut de gamme. Je veux donc qu'il soit très moderne, simpliste, propre, et je veux vraiment que cela se voit dans sa topographie. La topographie est très importante dans ce cas. Je ne veux pas que ce soit trop extrême, mais je ne veux pas non plus que ce soit trop basique. Et puis allez-y pour le moment. Maintenant, je vais en fait créer une barre de navigation. maison tellement nucléique sur les chevaux. Peut-être que je vais mettre en contact les chevaux du portefeuille ici. Je vais donc les distribuer horizontalement et voir à quelle distance ils se trouvent. Je vais m' assurer qu'ils sont tous 100 pixels l'un de l'autre. Je vais faire de même de ce côté. Si vous déplacez simplement les flèches de vos touches, lorsque vous cliquez sur quelque chose, vous pouvez les déplacer, choisissant un pixel à la fois. Et maintenant, je vais les sélectionner et les réduire, en modifiant espacement entre les lettres de 40 ou 6 000. Peut-être le remplacer par un demi-boulon. Nous l'avons donc. Et en fait, j'ai envie de créer la barre de navigation. Je vais donc dessiner une boîte ici, couper l'eau et y aller. Mais je ne veux pas qu'il ressemble entièrement à Onyx Black. Je le veux comme des noirs légèrement nécessaires. Donc, vous l'avez, envoyez-le à la fin. Ensuite, vous pouvez en quelque sorte y voir les textes. Je vais donc le souligner. Si je clique sur Shift et que je clique sur l'arrière-plan, cela désélectionnera l' arrière-plan et ne sélectionnera que le texte vraiment utile. Ensuite, je vais centrer cela. Génial. J'adore à quoi ça ressemble jusqu'à présent. Ensuite, je vais glisser-déposer des images. J'ai donc ici plein de photos que j'ai prises avec un photographe et je vais en utiliser certaines sur mon site Web. Je vais donc procéder à un copier-coller de certains d'entre eux. Et je veux refaire cette forme arrondie. Éteins la bordure. Et je vais aussi trouver la texture que j'ai trouvée dans le yoga alchimique. Alors je vais prendre celui-ci, ai adoré, le faire disparaître un peu. C'est donc très, très subtil. Je vais en fait faire en sorte que cela s'étende sur tout l'écran et m' assurer qu'il est centré. Je veux que ça soit là. Je vais en fait supprimer ce style. Je me demande également à quoi cela ressemblerait si je l'étendais sur toute la largeur. Maintenant, j'adore le fait d' avoir de la texture ici. Il est toujours très neutre et blanc, mais il y a maintenant une texture très, très légère. Vous voulez donc créer une bordure juste pour vraiment obtenir l'effet que je souhaite. En fait, je ne pense pas vouloir la frontière ni le rayon. Je vais l'éteindre. Je vais juste m' étendre sur la moitié de l'écran pour me présenter en tant que marque personnelle. Les gauches alignent en fait ces centres. En fait, je vais cliquer sur Command Z parce que j'ai préféré l'autre design. Donc je vais y retourner et procéder de cette façon. Je vais le désactiver à nouveau. Éteins ça. Je veux toujours avoir cet effet, mais à l'intérieur, je vais le mettre de ce côté. Ensuite, je veux créer un bouton ici. Et je veux qu'il soit rempli de blanc. Créez un bouton extérieur en forme de ligne extérieure , copiez le bouton de menu et changez la couleur de remplissage en noir. Tapez-le pour nous contacter. Je vais également faire en sorte que la bordure soit également noire. Cool. Jusqu'à présent, j'aime bien ça. Je ne sais pas si j' aime cette photo, alors je vais essayer d'en trouver une autre. Je vais mettre celui-ci ici. Glissez et déposez celui-ci. Peut-être que la bordure est noire, changez-la en 50. Et j'ai l'impression que cela correspond légèrement au look que je souhaite obtenir un peu plus. Je ne suis pas sûre d'aimer ça. Bouton « Entrez en contact », je vais donc le modifier. La couleur de remplissage doit être noire , le texte doit être blanc. Je n'aime toujours pas cette photo. Je vais donc juste y aller et peut-être le changer pour quelque chose comme ça. Et j'ai l'impression que cela correspond mieux à l'ambiance qui y règne. Je vais donc fermer la bordure et la couvrir pour en faire une boîte pleine dans l'Hyrum. J'adore vraiment à quoi ça ressemble jusqu'à présent. Je vais voir à quoi ça ressemble sans ce contexte. Et je trouve que ça a l'air un peu plus net et je veux quand même que ce soit un accent Je vais donc l' étendre sur toute la largeur et l'intégrer à la section suivante. Nous l'avons donc. présent, j'adore son look. Je vais juste centrer cet incroyable logo, je trouve que ce logo est légèrement trop grand, donc je vais juste le réduire légèrement. Je vais assortir ce noir au noir qui est sur ma chemise ici. Je vais donc le désactiver, cliquer sur ce sélecteur de couleur et sélectionner ce noir. Et vous voyez certainement que cela aide à réunir les couleurs un peu plus de manière cohérente. Je vais donc faire la même chose avec les boutons. présent, j'adore ça. Maintenant, je vais simplement regarder mon inspiration en matière de conception de sites Web pour voir quelles sections je pourrais vouloir suivre. Voyons donc ici que nous avons un magasin de service et un blog. Un peu plus sur toi. Que se passe-t-il d' autre ici ? Qui sommes nous ? Je vais faire défiler la page vers le bas pour voir ce que j'aime et ce que je n'aime pas. vais l'ouvrir dans un nouvel onglet parce que j' aime beaucoup les bordures ici et j'aime aussi le fait que toutes les balises H1, comme les balises de titre, soient en minuscules. Je pourrais donc aussi expérimenter cela, et peut-être même une police différente. J'adore les couleurs ici et j'adore les images. Un design vraiment cool, conçu pour que entrepreneur du cœur du pays puisse déjà développer votre entreprise et réussir à long terme. Et je vais aussi simplement expérimenter différents textes, car je ne suis pas complètement convaincu par ce texte. Je vais juste y aller et voir ce que j'aime. Et encore une fois, vous n'êtes pas obligé de suivre exactement ce processus. Mon processus change en grande partie en fonction du design que je suis en train de concevoir, mais cela varie vraiment. Parfois, je me dis que j'aime bien cette police. Et puis, dès que j'en ai fini avec la mise en page complète, j'ai décidé que je ne l'apprécierais peut-être pas autant que je le pensais. Il est donc très important de faire confiance à votre intuition lorsque vous concevez. Et plus vous vous entraînez, plus vous aurez l'œil pour ce que vous aimez et ce que vous n'aimez pas. Et aussi, une autre chose à noter est que ce n'est pas parce que vous l'aimez que cela signifie que votre client l'apprécierait. Il est donc très important de ne pas trop s' attacher à vos créations et de ne pas être perfectionniste. Je pense que c'est très difficile pour les personnes travaillant dans le domaine du design et de la création en général. Parce que, évidemment, nous aimons créer jolies choses et nous sommes attirés par les jolies choses, d'où le secteur dans lequel nous évoluons. Mais il est très important de ne pas être trop perfectionniste, car même si vous le présentez et que vous pensez que c'est le site Web le plus parfait, vos clients ne l'aimeront peut-être pas. Et cela fait partie du métier de designer et du processus de création. Donc, surtout au début, assurez-vous de concevoir des choses que vous aimez, mais que vous ne vous y attachez pas nécessairement trop. Je vais donc continuer à essayer de trouver une police qui me plaît. Je sais qu'il est toujours un peu plus difficile de ne pas être perfectionniste lorsque vous concevez pour vous-même. Souvent, les designers transmettent leur propre marque sur des sites Web ou à d'autres designers parce que nous pouvons et simplement être comme dans notre tête à propos des designs que nous créons. Je vais donc continuer à le faire jusqu'à ce que je trouve quelque chose qui me plaise. Je veux plutôt une police de style plus éditorial, si longue et si haute. Cette police me plaira peut-être, alors je vais juste la copier et la mettre de côté parce que c'est peut-être oui, j'adore ça. Je n'aime pas vraiment les minuscules, alors je vais juste passer cet examen. J'ai vraiment aimé le look. Je dois avoir l'impression que cela pourrait aussi être légèrement plus grand. Ajustez cela et peut-être que je veux vraiment jouer avec tout cela centré. Écoute ça. Et je ne peux pas vraiment ajuster cela parce que même si cela semble être un carré, il n'y a pas de véritable grille ici Je vais donc simplement dessiner un carré pour pouvoir centrer ce texte. Je pourrais toujours le supprimer. Ensuite, je vais centrer cela. J'adore ça jusqu'à présent. Ensuite, je vais parler de qui il s'agit et ce que quelqu'un pourrait rechercher exactement lorsqu'il consulte ce site Web. Donc, en tant que designer, votre objectif est de vous assurer que vos clients savent exactement qui vous aidez, dans quoi vous vous spécialisez. Et les deux premières sections doivent toujours porter sur votre entreprise et les solutions que vous proposez. Je vais donc continuer et ajouter une section ici, pour l'allonger légèrement. Pour moi, le centre de marque sera une boutique de modèles qui s'adresse spécifiquement aux entreprises qui débutent. Peut-être n' ont-ils pas assez d'argent pour payer un package de conception complet. Souvent, l'image de marque et le site Web peuvent coûter entre 5 et 10 000$. Et peut-être que si une marque n'en est qu'à ses débuts, elle n'a pas les fonds nécessaires pour les dépenser. marque de costumes sélectionnés, surtout s' ils ne savent pas que leur idée d'entreprise fonctionnera Une marque de costumes sélectionnés, surtout s' ils ne savent pas que leur idée d'entreprise fonctionnera ou s'ils le font simplement de côté testant et en expérimentant différentes choses. Je voulais donc créer la marque qui devait devenir une plaque tournante pour les débutants. Donc, qu'il s'agisse de cours, de modèles , de stratégie de marque, etc., c'est essentiellement pour cela que je voulais créer le hub de marque. C'est donc ce dont je veux parler dans la copie. Je sais que c'est là le défi et que vous devriez peut-être simplement le concevoir sans le texte au préalable, mais comme il s' agit de ma propre marque, je pense que je peux écrire la copie au fur et à mesure que je le conçois, puis je disons que je serai en mesure d'avoir une vue d'ensemble complète de tout ce que j'ai à offrir. Je veux que les boutons soient en majuscules, alors je les ai tapés en minuscules. Mais si je clique dessus, tout sera automatiquement mis en majuscule, et tout sera automatiquement mis en majuscule, c'est exactement ce que je veux. Et j'ai en fait l' impression que le texte du paragraphe est très petit par rapport au texte de l'en-tête. Je vais donc ajuster légèrement cela et peut-être aussi ajuster l'espacement. Et je pense aussi que je dois ajuster cela. Je vais juste avoir 70 ans. Incroyable. Je vais donc les enregistrer en tant que styles de caractères afin de pouvoir les modifier facilement. Ensuite, je vais faire la même chose ici avec ces éléments de contenu. Je vais changer cela et aussi changer cela. Regroupez cela. Et puis je vais continuer à faire même chose pour centrer le texte dans cette section. ce que nous avons. Je pense également qu'il doit y avoir une sorte d' embellissement ici. Également. J'ai l'impression que ce n'est pas conforme. Je vais juste m' assurer qu'ils sont en ligne, car c'est le héros. Je pourrais en fait agrandir la police car elle pourrait être considérée comme une balise H1. Ce n'est pas parfait. Je ne sais pas vraiment si je suis du genre à aimer, à aimer, mais je pourrais y revenir. J'ai souvent l'impression qu'en tant que designers, nous pouvons être tellement perfectionnistes et je n'aime toujours pas cette section, mais c'est très bien. Je pourrais y revenir à la fin, ou peut-être est-ce parce qu'il s'agit de trois lignes. Je peux donc peut-être le supprimer parce que j'ai l' impression de l'avoir dit de toute façon, des solutions de conception personnalisées pour l'entrepreneur. Et pensez aussi à la copie. Cela joue un rôle dans la conception. Vous voulez donc vous assurer que tout est conçu à la hauteur. Et j'ai l'impression que tout cela doit vraiment être laissé de côté. Je sais que je me suis concentré, aligné, mais je pense en fait que c'est pour cela que je n'aime pas. Je vais donc les aligner au centre , puis aligner les paragraphes à gauche. Et j'ai vraiment l'impression que j'aime beaucoup plus ça. Je vais juste l' aligner sur la grille pour m'assurer qu'il fonctionne. Et je vais tester, en revenant à l'autre texte. Et puis en fait jusqu'à 55. C'est peut-être un bouton que je vais tester sur toute la largeur du bouton, en lui donnant un peu plus d'espace. Je pourrais créer une sorte d'icône ici parce que je trouve que c'est un bon espace, mais je pourrais mettre une icône ici, donc je vais simplement la dessiner comme espace réservé pour le moment. Ou je peux aussi tester le fait d'avoir parfois un sous-en-tête qui aide à séparer l'espace négatif. Je vais donc le dessiner ici. Bienvenue dans la marque. Mets tout en majuscules. OK, je vais juste laisser ça tel quel pour le moment et je pourrais y revenir plus tard. Cette section me plaît jusqu'à présent, mais je souhaite ajouter quelques ornements sur le côté pour la personnaliser un peu plus. Je vais donc prendre cet en-tête et le tourner sur le côté. Donc, si vous accédez à cette section circulaire et que vous cliquez sur Shift, elle pivotera automatiquement de 90 degrés. C'est exactement ce que je veux faire ici. Et je veux le même ornement sur le côté. Je vais donc procéder à la rotation ici également. Tu sais quoi ? En fait, je pense que je n'aime pas fait d'avoir ça non centré. Je pense que, comme c'est comme un gros morceau de texte sur lequel atterrir, je veux l'aligner au centre , puis ajouter les ornements sur les côtés. Je vais donc essayer de le faire et voir si j'ai aimé le look. Et j'ai plutôt envie de faire un collage. C'est peut-être quelque chose que je peux expérimenter ici. Alors cela va probablement changer. Je vais juste les ajuster. Je vais le transformer en une arche ouvrir mon dossier de photos et faire un glisser-déposer. J'ai donc déjà une section avec un tas de pièces de portfolio. Je vais juste y aller et regarder, voir s'il y a quelque chose qui me plaît. J'ai beaucoup aimé celui-ci car la couleur ne correspond pas nécessairement exactement au design, mais nous pouvons toujours l' affiner plus tard. Celui-ci serait mieux là-bas et y serait une sorte d' embellissement. En fait, je veux créer un effet de bordure qui soit blanc. Je vais donc utiliser la pipette pour qu'elle ait l'air naturelle. Légèrement plus petit. Et vous pouvez le supprimer et voir quoi il ressemblera s'il est parfaitement parallèle, comme ça , afin que je puisse les centrer tous les deux. J'ai vraiment l'impression d'être déjà en train de trouver un écho dans ce domaine, bien plus encore. Je vais donc simplement copier et coller ceci parce que je veux conserver cette section et je pense qu'en copiant vos créations, vous pouvez toujours revenir en arrière si quelque chose ne vous plaît pas. ai donc simplement copié et collé. Cliquez ici, cliquez sur Commande C, puis sur Commande V pour le coller. Et puis je vais juste ajouter ceci au cas où vous voudriez changer quelque chose ici. Je vais donc faire le même effet que celui que j'ai essayé de faire précédemment. Ensuite, je vais l'aligner à gauche, aligner à gauche, ma grille. Et je vais le redéfinir et l'ajouter. Je vais faire le même effet que dans le design précédent. Mais ce que je vais faire, c'est l'avoir dans cette section, je vais le copier-coller et le placer ici pour que vous puissiez également le glisser-déposer entre les sections, ce qui est vraiment utile. Je vais aborder la question de l' opacité ici parce que c'est peut-être cette texture que je n'aime pas vraiment. Donc je vais le rendre très, très, très subtil. Je suis allé si loin. Ensuite, je voudrais parler de mes services. Donc je vais juste le mettre ici. Je veux que cela soit cohérent, donc je vais également ajouter un sous-en-tête ici. Je veux faire un saut de ligne ici, donc je vais juste tracer cette ligne. J'ai les différents modèles que je vais proposer , puis je vais les battre horizontalement. Je vais l'agrandir légèrement car il s' agit d'un en-tête mais d'un en-tête plus petit. Donc je vais en faire 24. Créez cette police, et je vais créer ce moteur. En fait, je vais la garder telle quelle et la coller. Je vais en fait modifier ces deux chiffres pour créer davantage de données sur les clients. Donc 1234, je vais le changer en fait, je vais le mettre en haut et faire ces chiffres. vais simplement l'ajouter pour que je puisse vraiment les aligner correctement. Je vais donc le copier et le coller plusieurs fois. Ensuite, je vais les aligner et les répartir horizontalement pour qu'ils soient tous égaux. Éteignez-le et regroupez-les tous. Ensuite, je peux continuer et le modifier ou deux. C'est vraiment bien à faire. J'ai l'impression que l'image de marque et la rédaction sont un peu plus cohérentes. Voici donc les différents modèles que je vais créer pour créer des marques semi-personnalisées que vous pourrez mettre à jour. Votre histoire réelle sur Instagram et vos modèles de publication. Instagram de marque est une véritable force pour conserver un look cohérent. C'est une bonne règle de base pour vous assurer que les paragraphes que vous concevez ont la même longueur. Mais juste pour conserver cette apparence cohérente, elle changera en fonction de la taille de l'écran sur lequel le site Web est visualisé. Mais encore une fois, cela contribue à maintenir cette cohésion et cette unité. C'est donc ce que je sais. La prochaine chose que je veux montrer est mon portfolio. Et comme un portfolio est très visuel et, en tant que designer, nous proposons de nombreuses couleurs différentes pour nos designs. Je recommande de présenter votre portfolio sur un fond clair. Donc, ce que je vais faire maintenant, c'est dessiner un carré ici et le rendre noir. Ainsi, la section suivante peut être blanche et pour revenir en arrière, désactiver la bordure, puis utiliser la couleur de fond. Pour ce faire, je vais tout surligner et le rendre blanc, ainsi que la bordure en y. Et je voudrais le décolorer légèrement. Je voulais juste le tester pour voir si je l'apprécierais vraiment. Peut-être que j'ai même essayé d' utiliser une couleur de fond à partir de l' une des photos, voir si cela fonctionnera. Je vais juste la garder en noir en fait parce que je ne pense pas que les couleurs s'y prêtent bien, mais je vais changer cette photo parce que ce n'est évidemment qu'une copie de celle ci-dessus. Jetez donc un œil à mes différentes images. J'aime bien celui-ci, mais je sens que j'ai besoin d' être de l'autre côté. Je vais donc simplement déplacer ça ici, puis le déplacer. Je vais rendre cette opacité encore plus légère, peut-être même cinq. Nous avons donc toujours cette texture, mais elle reste très légère. En fait , je vais l'agrandir légèrement pour que nous puissions avoir un peu plus de cette photo. Incroyable. Donc, j'aime vraiment le look de celui-ci jusqu'à présent , parce que je l'aime plus que celui-ci. En fait, je vais le retourner et le supprimer, pour ne plus avoir à le voir et nous le voyons certainement se mettre en place. Donc, jusqu'à présent, j'adore ça. La prochaine chose que je veux montrer est mon portfolio. Je vais copier et coller ce centre ici, centrer leur portfolio, leurs travaux récents. La porte Maintenant, je veux présenter mon portfolio. J'ai un tas de pièces ici dans la section de mon portfolio. Je veux donc le montrer ici. J'en ai envie Sibley. Et je veux réellement créer un effet de défilement, donc je vais vous montrer comment procéder. Je vais donc faire en sorte que cette étendue soit sur toute la largeur. Je vais en prendre deux autres et m'assurer qu'ils sont hors réseau. Vous verrez donc qu' il y a un carré ici, mais qu'il sort du réseau, ce qui est tout à fait normal. Je vais vous montrer comment créer un effet de défilement dans Adobe XD, ce qui peut être très utile pour représenter quelque chose que vous voudrez peut-être concevoir une fois en mode développement. Je vais donc passer en revue quelques-unes des différentes pièces de mon portfolio et les mettre ici pour vraiment mettre en valeur la marque et ce que je crée. Alors je vais le mettre là. Je souhaite présenter un grand nombre de vos différents travaux d'une manière tout à fait unique. Si vous avez besoin de passer du temps à créer des images comme celles-ci, je le fais généralement et je passe du temps à la fin de mon projet à créer des contenus que je peux publier sur les réseaux sociaux. Et je pense que c'est toujours très utile de le faire. Je vais fermer la frontière. Nous avons donc toutes les pièces de notre portfolio et je veux vous montrer comment créer un effet de défilement. Cela peut donc être très utile lorsque vous essayez de présenter un concept à un client. Et vous voulez montrer que vous souhaitez créer lorsque vous la développez, ou si vous souhaitez communiquer à un développeur effet que vous souhaitez que cette section particulière ait. J'ai donc six pièces dans mon portfolio. Je vais le surligner pour pouvoir créer un groupe. Donc, si vous cliquez sur la commande G, elle sera automatiquement regroupée. Ou si vous cliquez avec le bouton droit de la souris, vous pouvez cliquer sur le groupe ici. Vous verrez donc qu'ils sont tous regroupés. Et pour créer l'effet de défilement, utilisez ces boutons ici. Nous avons donc un défilement horizontal. C'est si vous voulez un défilement vertical, et si vous voulez fois un défilement horizontal et vertical pour cette section, je veux créer un défilement horizontal. Je vais donc choisir le défilement horizontal. Et je vais ajuster cela aussi légèrement ici. Et je veux commencer par le début de la grille pour créer tous les effets. Je vais donc simplement activer ma grille pour pouvoir la mettre en valeur. Et je veux en fait dessiner une flèche ici pour indiquer qu'il s'agit d'une section déroulante. Je vais le rendre noir. J'ai maintenant une flèche ici pour indiquer cet effet de défilement. Si je continue et que j'appuie sur Play up ici sur ce site Web. Je vais donc cliquer sur ce titre ici, appuyer sur Play. Et maintenant, nous consultons le site Web. Je vais juste le mettre en plein écran pour que nous puissions le voir. Vous l'avez et nous pouvons maintenant faire défiler la page, ce qui est très utile pour présenter votre travail. J'adore donc cet effet. Et enfin, nous avons la page de contact. Je vais donc simplement copier cette section et cette section. Oh, en fait, avant de le faire, je voulais créer un bouton ici pour créer un lien vers le portfolio. Et nous avons la section de contact final. Nous avons donc pris contact. Pourquoi ? Je vais centrer cela et je vais le centrer l'un sur l'autre. En fait, je veux le rendre plus petit, similaire en largeur. Et je vais les centrer tous les deux, les déplacer sur le côté. Et je veux créer l'effet d' embellissement que j'ai essayé de faire plus tôt dans cette vidéo. Je vais donc le faire pivoter vers la gauche et maintenir la touche Shift enfoncée pour m'assurer qu' il fait parfaitement 90 degrés Je vais allumer ma grille pour voir où je me trouve. Je vais faire la même chose de l'autre côté. Je vais donc le copier et le coller, faire pivoter en maintenant la touche Shift enfoncée, et nous aurons le même effet ici. Jusqu'à présent, j'adore ce look minimaliste. Et ce que je veux vraiment faire c'est créer cet en-tête collant. Je vais donc regrouper tout cela et corriger la position lors du défilement. Cela signifie que lorsque je fais défiler la page, cela continuera de figurer en haut, ce qui facilitera grandement la navigation sur le site Web. J'ai généralement cette fonctionnalité sur la plupart de mes sites Web, simplement parce que je pense qu'il est important pour un client de pouvoir accéder à d'autres pages de votre site Web sans avoir à faire défiler la page vers le haut. retour au menu. Cela crée également une véritable expérience de marque car les logos restent en haut de gamme. J'ai donc regroupé cette section et, si je clique avec le bouton droit de la souris, je veux m'assurer qu' elle se trouve tout en haut de la page, au-dessus de tous les différents éléments situés en dessous. Vous pouvez donc cliquer sur Mettre au premier plan puis nous cliquons sur Exposition lorsque vous faites défiler la page, ce qui signifie que nous voulons que ce soit un en-tête rémanent. Maintenant, si nous appuyons sur Play pour visionner le prototype, nous obtenons cette apparence d'en-tête collante qui donne vraiment l' impression d'une véritable expérience de marque. Et je constate que maintenant que j'ai cet en-tête autocollant, je n'aime pas l'apparence de l'en-tête sur certaines de ces images Pour créer une séparation, je veux vraiment créer un en bas de l'en-tête. Je vais donc le dissocier, le réduire légèrement parce que je pense qu'il est encore un peu grand. Déplacez-le légèrement vers le haut pour avoir un en-tête plus petit. Centrez-le verticalement. Ensuite, ce que je vais faire, c'est tracer une ligne à la base de l'en-tête. Donc, si vous codez et que vous voulez apprendre à coder, ce n'est pas un fait que vous pouvez faire avec du CSS, donc c'est très facile. Je vais faire en sorte que la bordure soit blanche pour que vous ne puissiez pas la voir, mais vous pourrez la voir une fois que nous l'aurons regroupée et en aurons fait un en-tête autocollant. Je vais donc regrouper tout cela et faire la même chose, le placer au premier plan et m' assurer de cliquer sur une position fixe lors du défilement. Je vais également le centrer parce que maintenant c'est légèrement décentré. Je vais donc aller consulter mon site Web. Et j'aime que la hauteur de cette barre de navigation soit un peu plus élevée. Et puis, comme vous le voyez , une très, très légère bordure crée une séparation lorsque vous faites défiler la page. Et je pense que cela permet simplement une expérience légèrement meilleure et que cela correspond au même ordre ici, en particulier noir sur noir, cela contribue à créer cette séparation. Et puis nous avons le portefeuille. Et cette section, comme mentionné précédemment, vous permet évidemment de faire défiler la page et de vraiment présenter un design interactif avec ces éléments. J'espère donc que c'est logique. J'espère que vous avez apprécié de me voir créer cette vidéo et ce processus de création de ma propre marque. Je vais donc l'exporter afin de pouvoir le télécharger dans la section des projets de classe. Si je clique sur le titre et que je clique sur la commande E, ouvre automatiquement mon Finder et je vais le nommer site Web de la marque personnelle. Ensuite, à partir de là, je peux le télécharger et partager sur mes plateformes de réseaux sociaux. Vous l'avez donc. C'est ainsi que je créerais ma propre marque personnelle. J'espère que vous avez apprécié cette vidéo sur le processus et j'espère que vous avez trouvé des informations utiles et des effets de défilement personnalisés. Et je vous verrai dans la prochaine vidéo. 11. Merci: Et c'est une enveloppe. Merci beaucoup de m'avoir choisi pour participer à votre parcours de conception. Et j'ai hâte de voir tes créations. N'oubliez pas de télécharger vos projets de classe dans la section des projets de classe. Car j'aime vraiment donner mon avis sur vos créations et aussi voir sur quoi vous travaillez. Si vous avez apprécié ce cours, je l'apprécie vraiment. Si vous pouviez me laisser un avis afin que je puisse constamment m'améliorer et voir ce qui écho auprès des étudiants qui suivent mes cours. N'oubliez pas de me suivre sur Skillshare pour être courant de mon prochain cours que je publierai, et pour communiquer avec moi sur les réseaux sociaux sur Angelica Steel sur Instagram, TikTok, ou consultez mon site Web à l'adresse Angelica steals.com. Merci de m' avoir choisi pour participer à votre voyage. Et j'ai hâte de voir vos projets de classe.