Concevez votre site Web avec le design Web Figma |

1. Introduction au cours: Lorsque vous êtes dans une start-up ou que vous créez simplement une nouvelle entreprise, vous avez généralement très peu de capital. Dans le monde d'aujourd'hui, il est très difficile de gérer un quelconque type d' entreprise sans avoir une certaine présence en ligne. C'est pourquoi nous avons surpassé le prototypage. Des outils tels que Figma sont pratiques et vous permettent de créer gratuitement le prototype du site Web ou de l' application en utilisant le moins de ressources possible vous permettent de créer gratuitement le prototype du site Web ou de l' application en utilisant le moins . Supposons, par exemple, que vous travailliez une start-up éducative et que votre équipe vous demande de créer un site Web en HTML, CSS et JavaScript. Supposons que vous soyez un professionnel et que vous créez cette page d' accueil éducative pour une start-up en deux jours. Après avoir examiné votre travail, l'un des membres de votre équipe vous demande de changer la couleur d'arrière-plan. Vous devrez parcourir votre base de code. Vous devez modifier la feuille de style en cascade et déployer à nouveau le code, ce qui est très inefficace et vous fait perdre beaucoup de temps. Cependant, ces mêmes changements Figma sont très simples. Vous pouvez toutefois modifier l' arrière-plan en accédant à votre pipette et en sélectionnant la couleur que vous souhaitez donner à votre arrière-plan. Ce n'est qu'un exemple très basique et à mesure que les choses avancent, ce ne sera peut-être pas aussi simple. En tant que nouvelle start-up ou nouvelle entreprise, votre objectif devrait être de créer quelque chose en utilisant le moins de ressources possible avec des logiciels tels que Figma, qui changent la donne. Oui. Puis répète quelqu'un qui a travaillé comme ingénieur logiciel au cours des 20 dernières années. Et l'un de ses articles mentionnait qu'investir dans le processus de conception, que ce soit en faisant appel à un concepteur d'expérience utilisateur ou simplement en vous formant, rapportera d'énormes dividendes. À long terme. C'est là qu'intervient Figma. Cela vous permet d'investir dans le processus de conception et valider ce que vous avez construit avec vos collègues. Ce cours s'adresse aux fondateurs de startups, aux nouvelles entreprises ou à tous ceux qui souhaitent apprendre Figma et utiliser ces connaissances pour concevoir un site Web ou une page de destination. Bien que l'objectif principal de ce cours soit Sigma, nous aborderons également d'autres aspects importants de la conception Web tels que l'alignement, palette de couleurs, la topographie, l'inspiration, le logo, wireframing. m'appelle Otto et je serai votre instructeur dans ce voyage. Et si vous êtes prêt, commençons. 2. Commencer avec Figma: Bienvenue à tous. Nous allons maintenant commencer avec Figma. Si vous avez déjà un gros problème sur votre appareil et que vous avez également une certaine expérience avec cela. N'hésitez pas à sauter cette partie de la vidéo, en supposant que c'est la première fois que vous utilisez Figma Commençons par ajouter sigma sur notre navigateur Web. Assurez-vous de sélectionner sur la partie épaisse de mon site Web qui apparaît. Cela vous redirigera vers la page d'accueil de Figma. Et si vous avez déjà un compte ou si vous devez vous connecter. Toutefois, si vous n' avez pas de compte, appuyez sur Get Started et connectez-vous avec Google ou fournissez vos informations et créez un compte une fois connecté, voici à quoi cela devrait ressembler. Souvent, il n'est pas nécessaire de recréer quelque chose à partir de zéro. Nous pouvons toujours nous appuyer sur ce que d'autres ont déjà créé. Par exemple si vous vous rendez dans la communauté, Ginny peut trouver des ressources, qu'il s'agisse d'obtenir icônes, des wireframes ou tout ce qui se trouve entre les deux. Supposons, par exemple, que vous recherchiez une page de destination pour une start-up. Vous pouvez appuyer sur le Web et saisir la page d'accueil de démarrage. Et voilà. Nous avons une variété de modèles parmi lesquels choisir. Celui-ci a beaucoup de réactions, il doit donc être bon. Il peut en obtenir une copie en appuyant sur, obtenir une copie. Une fois que tu l'auras ouvert. Par exemple, si nous passons simplement à la section des héros, vous pouvez voir que cela a pris beaucoup plus de temps, mais avec l'aide de la communauté, vous pouvez créer la page de destination de votre startup en moins de temps. Notre projet principal pour ce cours sera de créer une page de destination pour les startups. Cependant, pour vous donner une vue d'ensemble complète, nous ferons la plupart des choses à partir de zéro. 3. Page d'atterrissage de démarrage du projet 1: Bienvenue à tous. Le premier projet de cette classe consiste à créer une page de destination de démarrage l'aide de ce fichier sigma partagé dans la communauté. Le but de cet exercice est de vous aider à créer une page de destination pour une startup et gagner un minimum de temps en tirant parti des ressources créées par la communauté Figma. Dans le cadre de cet exercice, supposons que nous souhaitions créer une page de destination pour un créateur de site Web sans code sous pH. Si nous allons ici ou à la section, et si nous parcourons le Hero pH, nous pouvons voir une variété de modèles. Entrez dix, ça a l'air génial, ou un site Web sans code. Cependant, en-tête 15, le titre est beaucoup plus petit. Je vais donc simplement sélectionner cela pour cet exercice en allant vers notre gauche et il vous suffit de sélectionner l'en-tête 15, j'appuie sur la touche Ctrl C, qui le fera copier. Passons à la section des composants et créons une nouvelle page en dessous en appuyant sur ce bouton plus, renommé page de destination à 17 ans et en appuyant sur Control V. Passons au Page de fonctionnalités et voyez si nous pouvons trouver quelque chose qui correspond à notre section de héros. La fonctionnalité 37 semble correspondre au titre que nous avons dans notre section consacrée aux héros. Nous pouvons donc copier cela en accédant à la fonctionnalité 37 à partir d'ici. Appuyez sur la touche Ctrl C, collez-la à nouveau sur notre page de destination et assurez-vous qu'elles sont alignées. Il est également bon d' avoir une page sur laquelle nous pouvons afficher ce que nous proposons. Et à partir de là, si nous passons au trait P, vous constaterez que j'ai choisi cookies six. Ça a l'air super, super. J'espère donc revenir à notre page de destination. Supposons que nous sommes une entreprise basée sur les abonnements. Et si nous examinons les tableaux de prix pour les mineurs, il existe une variété d' options parmi lesquelles choisir. Le tableau des prix A3 est excellent. Pour simplifier les choses, je vais m'en tenir au tableau des prix 5. Nous allons donc également le copier sur notre page de destination. Maintenant, ajoutons une section thématique. Passons à la page de l'équipe. Quatre, ce serait super. J'ai dit que cela nous permettrait de rester cohérents avec les palettes de couleurs. Nous avons déjà l'équipe chargée de la copie du bouton vert pour revenir à la page de destination. Ajoutons deux éléments supplémentaires et nous aurons presque terminé avec une page de destination de démarrage de base. Passons à la section contact. Et après avoir parcouru la page pour voir ce qui me convient le mieux, je trouve que les contacts, le sexe sont très chouettes. Reproduisons donc cela sur notre poste de travail. Et enfin, les CMS sont mis sur notre page. Et voici où nous pouvons avoir une section sur les entreprises, une section de ressources ou tout ce qui convient à votre entreprise, selon la nature de ce que vous faites. Foot or Five est très beau car il contient une partie où vous pouvez autoriser vos utilisateurs à s'abonner à des newsletters. Je vais donc en choisir un à pied ou cinq et les reproduire sur notre page de destination, ce qui vous permettra présenter rapidement vos designs aux autres. Vous voulez donc le présenter aux autres. Vous pouvez simplement l' améliorer en appuyant sur Présent. Et une fois qu'il est chargé, vous pouvez appuyer sur ces heures. Et cela vous permettra de présenter rapidement vos idées aux autres. Et en un rien de temps, nous avons pu créer une page de destination très attrayante grâce à la communauté Pigma. Ainsi, lorsque vous créez une page de destination de démarrage ou quoi que ce soit d'autre en général, selon ce que vous essayez de créer, certaines choses peuvent être différentes ici et là, mais les bases restent cohérentes. Par exemple, pour les sites Web, vous aurez toujours une barre de navigation, une section dédiée aux héros, une section Contactez-nous. Et je l'ai aussi mise, même si vous n'êtes pas web designer, vous devriez au moins essayer d' obtenir les droits fondamentaux. Dans la prochaine section de ce cours, nous passerons donc en revue des éléments tels que les palettes de couleurs, typographie, l'alignement, les moodboards, les wireframes. Et à la fin du cours, nous espérons que vous aurez suffisamment de connaissances pour concevoir votre propre page de destination. 4. Guide de présentation de projet: Bienvenue à tous. Dans cette vidéo, je vais passer revue les étapes à suivre pour obtenir de l'aide, poser des questions et partager vos projets au cours de cette classe. Je vais d'abord commencer par la façon de partager un projet. Vous pouvez partager un projet , mettre fin aux discussions. Et ici, à perte, à vous de partager un projet. Une fois que vous avez cliqué dessus. Par exemple, pour soumettre l'exercice, nous avons parcouru la page d'accueil de démarrage. Vous pouvez le partager en vous rendant ici en haut et en appuyant sur ce bouton bleu qui indique partager. Et assurez-vous que tous ceux qui ont suivi ce lien peuvent le voir et le faire sélectionner. Et copiez simplement le lien. Et une fois que vous l'avez fait, retournez à la section des projets sur Skillshare. Assurez-vous de spécifier le projet sur lequel vous travaillez. Par exemple, ce projet est le premier, alors assurez-vous de l' étiqueter comme projet 1. À l'atterrissage, sur la plage. Et cliquez sur le lien ci-dessous. Et vous pouvez appuyer sur et envoyer. Si vous avez toujours voulu partager une image. Vous pouvez également le faire en téléchargeant une image. Si vous avez des questions, vous pouvez également consulter cette section où il est écrit « posez une question et posez-vous une question » et je ferai personnellement mon mieux pour répondre à votre question. Enfin, n'hésitez pas à entamer une conversation à tout moment de ce cours. Parce que la participation est appréciée. Par exemple, s'il y a quelque chose qui vous sera bénéfique ou si vous avez un conseil, nous pouvons les partager en entamant simplement une conversation et en la publiant. Nous avons plusieurs projets dans cette classe. Et si vous oubliez comment partager votre projet, revenez simplement à cette vidéo. 5. Les bases de Figma pour vous lancer: Revenons maintenant à notre page d'accueil Figma en appuyant sur Retour aux fichiers. Et créons notre premier nouveau fichier en le créant sur un fichier InDesign. Si nous sélectionnons un cadre ou un F. Cela nous permet de choisir parmi les différents cadres disponibles, c'est très bien. Nous pouvons voir tous les cadres disponibles. Si nous sélectionnons la marge du bureau. Cela nous donnera une largeur de 0, 14, 40 et une hauteur de 1024. Si vous sélectionnez dans la liste déroulante à côté de l'icône rectangulaire en haut, cela vous permet de l'ajouter à votre cadre, par exemple sélectionnant cette option. Et si vous souhaitez le dupliquer dans tout votre cadre, vous pouvez le faire en appuyant sur Ctrl C et Control V. Cependant, une meilleure approche serait d'appuyer sur l'élément et d'appuyer sur tout en le faisant glisser vers la droite. Cela peut également être fait pour plusieurs articles. Une fois que vous avez tout surligné et sélectionné tout sauf un objet perdu, vous pouvez le déplacer où vous le souhaitez. Et nous pouvons changer la couleur de la cloche de nos voitures en surlignant tout à droite. Sous remplissage, nous pouvons sélectionner notre couleur. Nous pouvons ajouter un rectangle. Et nous pouvons envoyer le rectangle à l'arrière en cliquant dessus avec le bouton droit de la souris et en appuyant sur Send to Back. Et nous pouvons améliorer l'apparence du rectangle en ajustant le rayon sur faux. Et ça a l'air bien mieux. Et si vous souhaitez ajouter du texte, appuyez sur ce t-shirt en haut, qui vous permettra de saisir du texte. Et nous pouvons obtenir un texte factice à partir d'un site Web de générateur de texte factice et remplir la partie texte. Cela fait beaucoup de textes. En voici assez. Vous l'avez peut-être déjà deviné, nous le construisons en tant que composant de témoignage ou produit pour notre premier tutoriel Think My Short. Si vous avez remarqué que les témoignages concernent généralement une personne. Commençons donc par un porte-cholestérol à l'image de la personne. Et cela peut être fait en sélectionnant cette option et en créant un cercle. Et ce cercle pour être égal, nous pouvons simplement saisir 50 par 50. Et cela nous donnerait une forme plus arrondie. Le cercle se dirige, alors amenons-le au premier plan. suffit de cliquer dessus avec le bouton droit de la souris et Crestone passe au premier plan. Bien que nous l'ayons clairement , nous ne pouvons pas le voir parce qu' il contient exactement le même remplissage, nos rectangles, donc nous pouvons apporter un changement rapide en allant simplement remplir, en modifiant de la couleur au blanc. Ajoutons maintenant le nom de la personne juste à côté de l'avatar. Ça a l'air très grand, donc on peut en réduire la taille à environ huit. Nous pouvons également insérer un autre texte dans le titre d'une personne. Maintenant, minimisons davantage la taille du titre. Supposons que vous souhaitiez répliquer le composant que vous avez créé. Comme vous l'avez demandé, sites Web contiennent généralement plusieurs avis, non l'avis d'une seule personne. Vous pouvez procéder simplement en surlignant tout, appuyant sur Alt et en le faisant glisser vers la droite. Ou une autre façon de le faire est de le surligner et d'appuyer sur l'option Create Component. Et une fois que vous avez créé un composant, pouvez y accéder en accédant à vos ressources. Et à partir de là, vous pouvez simplement le faire glisser et le placer dedans. Cela peut vous faire gagner beaucoup de temps, surtout si vous travaillez encore et encore sur le même composant tout au long du projet. Et avant que cela ne soit terminé, passons en revue la fonction stylo de Figma, qui vous permet essentiellement créer votre propre forme personnalisée Vous pouvez y accéder en haut à partir d' ici en sélectionnant Gone Pen. Et une fois que vous avez sélectionné le stylo, vous pouvez dessiner la forme de votre choix. Et la façon dont cette fonction du stylet fonctionne, elle fonctionne en cliquant et en faisant glisser le pointeur jusqu'au point suivant. Et une fois que vous avez connecté tous les points, vous pouvez le remplir avec la couleur de votre choix en sélectionnant sur ce seau à peinture. Il existe bien plus, beaucoup plus de fonctionnalités que le Sigma. Cependant, nous avons abordé tout ce dont nous avons besoin pour démarrer les projets que nous aborderons dans ce cours. 6. Alignement et grille: Lors de la conception de nos startups ou de notre entreprise, cette page de destination, notre objectif est de rendre notre site visuellement attrayant et convivial. Et l'alignement joue un rôle important car il nous aide à créer un équilibre entre le contenu et le contenu. Vous avez donc une idée de ce à quoi ressemble cet alignement. Nous allons passer en revue quelques exemples. Le premier exemple, lequel pensez-vous est le meilleur ? Les éléments à notre droite sont les éléments à notre gauche. À notre gauche, tout semble bien organisé. L'espacement semble parfait tout comme l'alignement. Cependant, à notre droite, tout est partout. Nous ne voyons aucun alignement ni ordre. Bien que les Foursquare des deux côtés soient exactement les mêmes, la seule différence réside dans la façon dont ils ont été alignés et aussi dans leur espacement. Et cela a fait la différence entre un design accrocheur et un design authentique et séduisant. Le même schéma peut être observé dans notre deuxième exemple. Et aussi notre troisième exemple. Vous vous demandez peut-être comment vous assurer que les choses sont correctement alignées. Et la réponse est d'ajouter des grilles de mise en page pour votre design. Ajoutons une nouvelle page et créons un nouveau cadre. Sélectionnez sur le bureau. Et en cours de conception. Sélectionnez l'option qui dit grille de mise en page. Et sélectionnez les paramètres de la grille de mise page, convertissez-les de niveau colonne et modifiez le compte 5 à 12. Et nous voyons qu'il n'y a pas d'espace entre les deux extrémités. Voyons donc les marges des compléments à 140 et de la gouttière à 30. L'ajout d'une grille de mise en page vous permettra d'avoir un cadre de référence clair qui vous aidera à rester en ligne. Par exemple, nous pouvons créer une barre de navigation et nous assurer que tout est aligné. Peut contenir un texte pour notre logo. Nous pouvons avoir un espace réservé à l'image. Et ensuite, alignez cela sur notre paragraphe de texte. À moins que nous ne puissions ajouter une ligne en bas. Comme vous pouvez le constater, en ajoutant des pains Leo, nous avons pu obtenir un alignement et un espacement corrects. Et cela nous a permis de créer un équilibre entre le contenu et la mise en page. En résumé, le fait d'avoir un alignement garantit que tous les éléments sont alignés les uns par rapport aux autres. Pour vous assurer que votre page de destination ou votre site Web est plus professionnel et ordonné. Pour plus de détails sur la grille, j'ai inclus une référence créée par Figma à propos de la grille de mise en page. Les valeurs de cette grille ont été sélectionnées sur la base d'un excellent concepteur Web. 7. Obtenir l'inspiration: Vous vous demandez peut-être si vous devriez concevoir quelque chose comme un site Web à partir de zéro. Ou vous vous demandez peut-être comment les autres font un excellent design ? Et la meilleure réponse est de s'inspirer des autres. Maintenant, vous pourriez vous demander, eh bien, comment puis-je m'inspirer ? Eh bien, vous pouvez vous inspirer en visitant des sites Web comme ici. Bill.com est un site Web qui vous permet de voir de superbes designs Web, designs de produits et bien d'autres choses intéressantes. Dans le cadre de cette classe, supposons que vous essayez de concevoir une page de destination de démarrage. Ainsi, dans la section Web design, vous pouvez saisir la page de destination de démarrage. Actuellement, je ne suis pas connecté, je ne pourrai donc pas enregistrer ce design. Assurez-vous donc de créer votre compte. Et une fois que vous aurez créé un compte, vous pourrez enregistrer votre design. Une fois connecté, je peux enregistrer ce design. Donc, dans le cadre de cet exercice, disons que je suis intéressé par ce design. Je peux créer une nouvelle collection, lui donner un nom aussi. Page d'accueil de démarrage. Et appuyez sur Créer une collection. J'aurai une collection liée à cette collection. Disons que je suis intéressé par ce design. Je peux l'ajouter à la page d'accueil du démarrage. Vous pouvez en ajouter autant que vous le souhaitez, mais en avoir trois est suffisant pour vous permettre de commencer. La page de destination que vous essayez de créer. Alors maintenant, sous votre profil, vous pouvez accéder à vos collections. Et dans mes collections, nous avons la première page de destination et nous pouvons voir les trois pages de destination avec Peck. Si vous recherchez un site Web qui fournit plus de détails, rendez-vous ici. Si nous saisissons la page de destination de démarrage. Si nous ouvrons simplement l'un d'entre eux, nous pouvons constater qu'il est très détaillé par rapport aux exemples et au résumé en dribble avant concevoir votre application ou votre site Web Il est recommandé de découvrez ce que font les autres personnes de votre domaine. Cela signifie que vous n'avez pas à tout concevoir à partir de zéro. 8. Intro à encadrement filaire: Avant de définir les frais d'atterrissage, fait d'avoir un wireframe nous aidera à comprendre et à consulter le site Web à l'avance, ce qui nous fera gagner du temps à long terme. Par exemple, il est plus facile de créer des rois au stade du wireframe que d'avoir à apporter ces modifications après avoir déployé la durée de vie du site. une façon simple d'y réfléchir. Cette maison possède des plans avant sa construction. Les wireframes servent de modèle pour les sites Web. Revenons à la communauté Figma. Appuyez sur les wireframes. Cherchons un kit filaire minimal. Et celui-ci, conçu par une personne appelée Bonnie Hong, a l'air bien car il suscite beaucoup de réactions. Nous allons donc en obtenir une copie en appuyant sur cette copie getter, qui la dupliquera automatiquement sur votre Figma. Ainsi, une fois que nous l'avons ouvert, si nous accédons aux actifs et aux composants ouverts, nous pouvons voir que nous avons un avatar, bouton principal et tout ce dont nous avons besoin pour démarrer le wireframing de notre site Web, que nous aborderons dans la dernière section de ce cours consacrée au projet. 9. Intro du projet principal: Bienvenue à tous. Notre projet final consiste à créer une page d'accueil pédagogique pour les startups. En commençant par le wireframing jusqu' à la création du design final de la figma. À la fin de ce projet, vous serez en mesure d'appliquer ce que nous avons couvert vos propres projets et de créer le design Web Figma pour votre start-up ou entreprise actuelle. Bien que nous puissions nous inspirer de sites Web tels que Dribbble ou Behance. Je recommande d' essayer d'abord Figma en tant que communauté, surtout si vous n'avez pas beaucoup de temps. J'ai dit qu'au moins vous obtiendrez des fichiers déjà conçus que vous pourrez facilement ajuster et utiliser à bon escient, comme celui que nous avons abordé dans l'une de nos vidéos précédentes. Cela dit, commençons. 10. Créer une planche d'inspiration: Les récompenses sont généralement utilisées comme source d' inspiration pour générer de nouvelles idées. Accédez à behance.net et recherchez une start-up éducative ou un site Web design. Et n'hésitez pas à sélectionner l' extérieur surconçu des start-up éducatives. Parce que nous cherchons simplement à nous inspirer. Ce site web a été conçu par une agence de marketing. Ça a l'air bien. Nous pouvons l'ajouter à notre mood board. En le sauvegardant. Nous pouvons créer un nouveau mood board et l'appeler page d'accueil pédagogique pour les startups. J'aime aussi ce design web. Bien que ce soit pour une société de développement de logiciels. Les palettes de couleurs ressemblent à des motifs et elles sont belles jusqu'à présent. Ajoutez-le donc également au mood board que nous venons de créer. Sélectionnons-en un autre conçu pour finaliser notre moodboard. Peut-être que pour notre dernière page , recherchons la page de destination des startups. Cela semble bon jusqu'à présent. Ajoutons donc celui-ci à notre mood board. Maintenant, revenons à notre profil Behance et passons à la section Moodboard. Nous pouvons voir que nous venons de sauvegarder les mood boards. Notre dernière étape consiste à mettre tout cela sur Figma afin de disposer d'un seul endroit où nous pouvons tout visualiser en même temps. Et maintenant, je vais juste mettre tout cela sur Figma. Et si vous êtes juste en train de regarder et que vous n'avez pas créé le mood board, hésitez pas à récupérer les fichiers du projet et à télécharger le fichier Figma contenant le mood board que nous venons de créer. 11. Accueil Wireframe: Créons maintenant un wireframe en utilisant le kit de wireframe minimal que nous avons dupliqué précédemment. Une fois que vous avez le kit Wireframe minimal, ouvrez-les Figma. Commençons par ajouter une page et la renommer en wireframe. Pour la page d'accueil de démarrage, après avoir sélectionné en vert. Et en ce moment, nous concevons pour un ordinateur de bureau. Donc, dans le menu déroulant du bureau, sélectionnez Bureau. Nous allons d'abord commencer par créer notre barre de navigation. Dans la vidéo précédente, nous avons créé un mood board et nous l'avons ajouté à notre fichier Figma. Alors, allons-y ici. Nous avons tout au même endroit, alors tapez mood, mood board. Et je peux reproduire cela en accédant à notre mood board. Et sous les couches, si vous les sélectionnez, cadrez-en une, contrôlez C. Et si vous revenez au mood board, pouvez simplement le dupliquer. En appuyant sur Ctrl V. Nous allons d'abord créer notre barre de navigation. Et avant cela, créons une grille de mise en page pour que tout reste aligné. Si nous revenons à notre mood board, ce que vous trouverez être Coleman est désormais un bar arborant le logo de l'entreprise. Section de contact à propos de nous. Et selon la nature de votre start-up ou de votre entreprise, vous apporterez des ajustements mineurs. Je n'ai pas reçu d'appel à l'action dans votre barre de navigation. Nous serions également une bonne idée d'obtenir notre barre de navigation. Passons aux actifs. Et sous la rubrique Ressources, ce kit filaire est livré avec une barre de navigation déjà créée. ne nous reste donc plus qu'à gagner ces deux heures. Nous constatons que le bouton Get Started se trouve en dehors de la grille, ce qui nous a plu. Et nous pouvons résoudre ce problème en double-cliquant sur Get Started. Et à notre droite. Si vous appuyez sur ces trois points, détachez l'instance. Une fois que vous l'avez détaché, vous pouvez simplement le déplacer hors du cadre de la barre de navigation. Et nous pouvons faire de même pour notre composant d'en-tête. Déplacez-le à l'extérieur, et nous pourrons faire de même pour le logo. Nous pouvons retirer ce cadre. Il est donc désormais plus facile de naviguer. Nous pouvons avoir notre logo en haut. Nous pouvons nous assurer que tout est aligné en surlignant les éléments de notre barre de navigation puis en sélectionnant les centres verticaux d' alignement. Et oui, ça a l'air mieux. Au lieu d'un bon départ. Je vais juste remplacer cela par « entrer en contact ». Et maintenant, nous pouvons revenir aux couches et partir. En fait, toutes les pages de destination ont une sorte d' image sur leur page d'accueil. Revenons à la page Wireframe. Peut accéder aux actifs. Représentez que nous placerions une image. Bizarre. Donc 598 sur quatre ou 46 devraient suffire. Maintenant, si nous revenons à notre mood board, nous pouvons constater que toutes les entreprises l'ont fait. Je suis une brève description de ce qu'ils proposent pour le texte. Voyons si nous avons des ressources dans nos actifs. Si nous passons à Assets et au kit Wireframe, nous pouvons voir qu'il existe des contenus différents. Et il se trouve qu'il y a une section consacrée aux héros dont nous pouvons tirer parti. Donc, pour l'instant, nous avons déjà surveillé un espace réservé aux images. Nous pouvons donc simplement prendre cette portion par Copia. Vous pouvez obtenir Control C, revenir à notre structure filaire, le coller nouveau et vous assurer qu'il est aligné. Oui, ça a l'air assez bien. Nous n'avons pas besoin de ce deuxième bouton pour que je puisse le supprimer. Si nous revenons à notre mood board, nous pouvons avoir quelque chose comme ça et inscrire le nom de notre entreprise pour le moment. Disons que le nom de notre entreprise est UB Event. Donc, avant le paragraphe, M. propose cela. Et s'il vous plaît, quelque chose qui aurait du sens à dire pour une start-up éducative. Je suggère de réussir en apprenant efficacement. L'apprentissage ne doit pas être considéré comme un événement connexe, mais plutôt comme faisant partie intégrante de la vie et de la croissance. Au lieu de commencer mieux et de remplacer les textes par quelque chose comme en savoir plus. Il est très difficile de déplacer des objets dans ce cadre Il est donc préférable de détacher chaque instance. Plaçons une flèche. J'ai remarqué que la barre de navigation est un peu basse, alors déplacons-la un peu vers le haut en surlignant tout et en la remontant. Oui, c'est bien. Nous pouvons également déplacer l'image et le texte un peu vers le haut. 12. À propos de nous Wireframe: Pour la section À propos de nous, tout est assez similaire à ce que nous avons fait. Nous pouvons le copier en appuyant sur la touche Alt tout en faisant glisser le pointeur vers le bas. Créons un petit en-tête suivi d' un bref Logan et d'un paragraphe expliquant ce que nous proposons. Ce peut être notre short, Logan. éducation abordable et de qualité. Au lieu de ce texte factice, je vais le remplacer par quelque chose de plus logique. Abaissons cela un peu plus bas pour faire de la place qui nous entourent qui seront chargés du maintien de l'ordre. Nous pouvons décrire un texte, le placer ici et écrire sur nous. Et ça le rend un peu plus grand. Cette police a l'air bonne. Et oui, c'est à peu près tout pour la section À propos de nous. 13. Plan de prix Wireframe: Nous allons maintenant créer notre wireframe pour la tarification et cela pour trouver l'inspiration. Et si nous revenons au mood board, recherchez des informations sur les prix. Nous pouvons constater que le troisième mood board a un prix d'inspiration. Nous pouvons donc recréer quelque chose comme ça pour nous-mêmes. Nous pouvons voir qu'il y a un titre, un titre et un paragraphe plus petits . Allons-y en allant sur, Il va recadrer kit en double-cliquant sur le contenu central. Pour l'instant, nous avons juste besoin de l'en-tête et du paragraphe pour pouvoir simplement copier ce Contrôle C et le recoller. Ou nous pouvons placer cet en-tête à un prix abordable. Dans notre mood board, nous pouvons voir le petit en-tête en haut. Nous pouvons donc l'obtenir en accédant à la section À propos de nous. Je viens de me rendre compte qu' il y avait un peu d'espace, alors je l'ai supprimé et vous appuyez sur la touche Alt et faites glisser le pointeur vers le bas. Je peux facilement le dupliquer. Nous pouvons remplacer cela par des usines de tarification. Nous pouvons avoir un paragraphe d'appel à l'action où nous pouvons voir quelque chose en parallèle, investir en vous grâce à notre contenu de qualité. Dans notre kit filaire. Nous n'avons rien trouvé à utiliser. Nous pouvons donc rapidement recréer les rectangles. En passant au rectangle, en créant une forme rectangulaire. Nous pouvons voir que chacun d'entre eux contient une sorte de description de la clé d'abonnement, suivie du prix et de certaines des choses qu'elle propose. Avec un appel à l'action. Pour la R1, je pense n' en avoir que trois. La première version serait donc la version gratuite. Assurez-vous qu'il est centré. Et remplacez-le simplement par 0$. C'est un peu petit, alors augmentons la taille de la police à environ 32 ou même. 36 devrait être une bonne chose. Donc pour la version gratuite, nous sommes dans une start-up éducative. Nous pouvons avoir, nous pouvons offrir quelque chose à côté. Les étudiants peuvent avoir accès à n'importe quelle matière. Limitation de quatre leçons. Je peux simplement le dupliquer, réduire la taille à environ 15. Centrez-vous sur un autre service que nous pouvons offrir . Les étudiants peuvent publier jusqu'à cinq questions par mois. Assurez-vous que tout est espacé de manière égale. Et les gens pourront avoir accès à deux problèmes de pratique. Et nous pouvons avoir un appel à l'action, comme celui que nous pouvons voir sur le mood board. Pour ce faire, nous pouvons accéder aux actifs, aux composants et ajouter un bouton principal. Nous allons avoir quelque chose, disons 543. Assurez-vous qu'il est centré. Ces arêtes vives ne sont pas très belles, nous pouvons donc les rendre plus arrondies en modifiant le rayon d'angle à environ 14. Oui, ça a l'air bien mieux. Hopi, c'est facile. Puisque je cherche à avoir une version standard et une version premium. Il peut simplement conduire avec cela en appuyant sur Alt. L'espacement semble parfait. La prochaine est notre version d'abonnement standard. Dans la version standard, nous pouvons facturer environ 10$ par mois. La différence moyenne serait que les personnes qui se sont abonnées à un accès illimité aux leçons peuvent publier un nombre illimité de questions par mois. Il en va de même pour les problèmes de pratique. Et évidemment, si, pour le bouton principal, nous devons passer à quelque chose comme s'abonner. Et notre dernière version serait la version premium. La version premium coûtera 19$ en permanence. Et nous pouvons le supprimer et simplement dupliquer sur notre modèle haut de gamme. La seule différence que la prime aura par rapport à la norme serait de recevoir des commentaires instantanés d'un expert. Faisons en sorte que cela soit conforme à l'arrestation. L'alignement semble un peu décalé. Ici. Il y a beaucoup d'espace entre la tarification et les fonctionnalités proposées par l' abonnement. Cependant, ici, il n'y a pas beaucoup de place. Donc, pour tenir compte de cela, nous pouvons simplement augmenter légèrement cette hauteur et la déplacer. Et nous pouvons faire de même pour tous. Nous pouvons sélectionner tout cela une fois et le déplacer. Et assurez-vous qu'il est aligné sur la version standard et la version premium. Et cela a l'air bien et il y a un bon espacement. Et il suffit de changer cela au lieu de « désolé, nous sommes libres de nous abonner ». Et oui, c'est à peu près tout pour notre plan tarifaire. Et il ne manque qu' une chose. Cependant, nous pouvons constater que l'espacement entre les différentes versions d'abonnement est le même. Si vous regardez nos limites, nous constatons que la version premium se rapproche de la limite tandis que la version gratuite est plus éloignée. Nous pouvons donc résoudre ce problème en mettant tout en évidence en même temps. Appuyez sur la touche Ctrl et déplacez-la légèrement jusqu'à ce que nous ayons l' impression que tout est centré. Et oui. 14. Contactez-nous Wireframe: Créons maintenant notre section contact. Si nous revenons à notre mood board, nous pouvons constater que la première page de destination présente un excellent design que nous pouvons reproduire ou notre section Wireframes Contactez-nous. Créons d'abord un en-tête pour notre section contextuelle. Nous pouvons facilement l'obtenir en appuyant sur Alt pendant que je fais glisser le texte vers le bas. Changeons le style de police de la police en gras à la police normale. Passons également à une sorte de contexte selon lequel, avant cela, j'ai besoin d'étendre le cadre. Alors utilisez le bureau et faites-le glisser vers le bas. Pour créer un arrière-plan. Nous pouvons simplement obtenir un rectangle et l'ajouter. Placez la page Contactez-nous au premier plan. Créons également une aversion pour le soleil, sur le mood board. Et fais de même, Bring it on. Et nous pouvons avoir quelque chose comme n'hésitez pas à me poser des questions. Après, recréons ce bouton sur notre wireframe en obtenant un rectangle. Et pour qu'il soit visible, changeons le remplissage du gris au blanc. Et nous voulons qu'il soit ovale. Changez donc leur rayon à 20 ou même plus. 25. On peut ajouter, disons son nom. Cela le change en clair et change la couleur du noir au gris. Ou nous pouvons simplement avoir la couleur noire et changer de 100  % à environ 50 %. Oui, ça a l'air bien mieux. Réduisons la taille de police à environ 14. Et assurez-vous que c'est bien centré. Oui, ça a l'air bien. Nous pouvons faire de même pour l' e-mail et l'objet. Surligner. Un motif. Lorsque vous sélectionnez Alt, faites glisser le pointeur vers le bas changer le nom en objet de l'e-mail. Il nous faut une autre boîte ou le message. Il suffit d'appuyer sur Alt, de le faire glisser vers la droite et de l'agrandir. Faisons en sorte qu'il soit plus petit. Assurez-vous qu'il est aligné vers le bas. La section dispersée des textes qui voit le message. Ça a l'air parfait. Il ne nous reste plus qu'un bouton et une ligne. Nous pouvons le recréer facilement. Cependant, pour le bouton, nous pouvons simplement l'obtenir à partir des actifs. Faites glisser le bouton principal. Bien sûr, il est aligné et peut permettre au texte et au rayon de parler. Ou même drôle. C'est marrant, il est plus beau que le mien. Ajoutons un rectangle. La couleur passe au noir, et assurez-vous que teinte est saturée et lumineuse et passez de 100 % à 40 %. Oui, ça a l'air mieux. 15. Blog Wireframe: Dans les vidéos précédentes, nous avons pu créer un wireframe pour notre page d'accueil ou tarification de notre section À propos de nous Nous contacter et, au lieu de fonctionnalités, le remplacer par un journal. Et dans cette vidéo, nous allons créer notre wireframe ou la section blog à partir de notre mood board. Voyons si nous pouvons trouver section de blog oblique que nous pouvons utiliser pour notre wireframe. la deuxième page de destination, vous avez toujours quelque chose que nous recherchons, une section blog. Revenons à notre structure filaire. Commençons par vérifier si nous disposons déjà d'un kit de conception de blog que nous pouvons utiliser à partir de nos ressources. Si nous passons au kit Wireframe et passons au contenu central, commençons par copier l'en-tête à côté du bureau, côté du sous-titre. Revenons à notre structure filaire, control C, control V. Revenons maintenant aux actifs. Nous pouvons simplement copier l'un d'entre eux et le dupliquer. Il suffit donc de sélectionner l'un ou l'autre. Ce porte-image a l'air un peu grand, alors essayez de le minimiser. Détachons d'abord l'instance. Ce message devrait suffire. Maintenant, appuyez sur Alt. Faites glisser le pointeur vers la droite. Assurez-vous qu'il est centré. Puis, une fois que nous avons tout obtenu, vous revenez à notre mood board, vous pouvez voir qu'ils ont un petit journal qui s'additionne en haut, mais un titre plus grand et des sous-titres plus petits. Nous pouvons donc avoir quelque chose comme ça. Pour le blog. Nous pouvons obtenir un texte qui a exactement la même police. Donc Altoid traîne de moitié vers le bas. Cela s'est converti en Logan Stan. Remplaçons ce texte par quelque chose comme rester à jour. Pour notre sous-rubrique, nous pouvons avoir quelque chose côté de nos dernières actualités matière d'éducation et rester informés. Enfin, il ne nous reste plus qu' à apporter quelques modifications à ce texte. Habituellement, les blogs ont tendance à porter le nom de l'auteur. Ainsi que l'image de l'auteur. que nous allons faire. Maintenant. Accédez à Assets. Et sous composants, vous pourrez trouver un arbitrage. Nous pouvons ajouter l'avatar. Nous déplaçons ce centre de contenu et en minimisons la taille, environ 40. Il a l'air un peu plus petit, alors allons-y. Ajoutons maintenant du texte, le nom de l'auteur. Alors, prenons notre rectangle. Fixons également un rendez-vous. Bien sûr. Les données de ces listes publiées sur les logos publiées listes ajustent la couleur de notre texte en ajustant le pourcentage entre teinte, la saturation et la luminosité à environ 50 %. Faisons de même pour le nom de l'auteur. Nous pouvons maintenant le dupliquer sur les deux autres éléments du journal. Il suffit d'appuyer. J'ai placé tout ce qui est sélectionné, appuyez sur la touche Alt et faites glisser le pointeur vers la droite. signe ne semble pas centré. Cela suggère donc que nous allions au mood board. Nous pouvons voir qu'il existe également ces composants pour montrer que nous pouvons passer d'une page à l' autre ou la section blog où nous pouvons recréer quelque chose de similaire en sélectionnant sur ce cercle et faites-le environ dix par dix personnes, Alt. Tout en faisant glisser le pointeur vers la droite. Assurez-vous que c'est bien centré. Pour montrer que P est la page exacte sur laquelle nous sommes N, nous pouvons la surligner en modifiant les couleurs pour indiquer simplement que nous sommes cette page. 16. Cadre filaire: Bienvenue à tous. Il ne nous reste plus que la dernière partie de notre structure filaire, qui consiste à créer la section de bas de page de notre page de destination. Si vous revenez à notre mood board, les pages de destination de cette start-up disposent d'un moteur approprié que nous pouvons utiliser comme source d'inspiration pour créer le nôtre. Nous pouvons commencer par créer une sorte de fond. Avant de faire ça. Ensuite, votre ordinateur de bureau. Pour créer plus d' espace, appuyez sur le rectangle de Rex et créez un espace réservé en arrière-plan. Voyons si nous avons des ressources pour notre pied de page dans notre section des actifs. Et si nous passons au composant, nous y sommes, il se trouve qu'il y a une section de bas de page dans laquelle nous pouvons apporter notre wireframe. Et actuellement, cela ne correspond pas à notre parcours. Essayons donc de détacher l'instance afin de pouvoir la déplacer. Actuellement, nous ne sommes pas en mesure de déplacer aucun de ces éléments. Cependant, si nous la détachons, l'instance pourra la déplacer vers l' extérieur et supprimer ce fond blanc. Nous pouvons également déplacer les éléments à un niveau individuel. Nous n'avons besoin d'aucune de ces icônes. J'ai donc dit de le supprimer ou de le supprimer. Alignons les choses. Coûts du logo. Donc, ici, nous avons beaucoup d'éléments dont nous n'avons pas besoin dans ce cadre. Nous pouvons supprimer la section des maisons. Supprimez également les conditions d'utilisation les plus longues et la confidentialité à propos de nous. Ajustons le texte pour les polices. Ils sont très petits. Nous pouvons le changer de petit, mi-gras, à juste grand, mi-gras. Et aussi pour le contact. Assurez-vous que l'espacement est correct. Oui, nous n'avons pas besoin de prix. Au lieu de fixer des prix, prenez quelque chose comme une entreprise. Et sous Entreprise, nous pouvons avoir des éléments tels que les prix, l'assistance sur les blogs, et y aller régulièrement. police pourrait même être meilleure. Et la couleur change à 100 %, ou la couleur noire à environ 50 %, 60 % sont les fonctionnalités que nous proposons. Nous pouvons avoir quelque chose comme un support lunaire, une partie éducative façon de passer la souris, peut-être un espace pour recueillir les commentaires des clients. la section contact, nous pouvons avoir le compte e-mail de l'entreprise, le numéro de téléphone, l'adresse, l'entreprise. Pour améliorer l'apparence, déplaçons les contacts un peu plus loin. Faisons en sorte que les fonctionnalités soient saisies entre les deux. En plus de tout le contenu dont vous avez besoin. Tu retournes à notre mood board. Vous pouvez voir que tous les moodboards ont un endroit où les utilisateurs peuvent fournir leur adresse e-mail pour s'abonner à notre newsletter. Créons simplement quelque chose pour notre page de destination. Assurons-nous d' avoir suffisamment d'espace, alors déplaçons-nous. Cela devrait suffire. Ce n'est pas un en-tête qui indique « pipe ». Notre newsletter et changez la taille de police de très grande à petite, normale. Bien sûr, c'est aligné. Créons maintenant un bouton, comme celui que nous avons vu sur notre mood board. Invite les utilisateurs à saisir leur adresse e-mail. Et nous pouvons le faire en allant dans le rectangle, créant une forme rectangulaire. Et changez la couleur en blanc pour qu' elle devienne visible après rayon de l'ordre du jour à environ 20. Donnons une copie de l'e-mail par le haut. Il suffit d'appuyer sur la touche Alt, de la faire glisser tout en la faisant glisser vers le bas. Assurez-vous de le placer à l'avant. Assurez-vous que tous les éléments de nos aliments sont orientés, qu'ils sont alignés pour tous les mettre en valeur et que les centres verticaux sont alignés. Oui, ça a l'air bien mieux. ne reste plus que deux. Juste le nom de cette entreprise. Oui. Nous avons pratiquement terminé de créer notre wireframe. 17. Note finale sur Wireframe: Vous pensez peut-être que nous avons passé beaucoup de temps à créer ce wireframe et vous pensez peut-être qu'il n'a pas apporté de valeur ajoutée. Pourquoi ne pas simplement créer un véritable site Web ? Nous nous sommes fait une grande faveur en construisant un wireframe. Cela nous permet de valider notre hypothèse de démarrage ou d' entreprise en utilisant le moins de ressources possible. Imaginez si vous avez créé un site Web ou une application et que votre équipe est cofondatrice qu'elle souhaite la page de contact que vous avez conçue soit révisée. Une fois que vous aurez créé le site Web, auriez perdu beaucoup de temps avec un tel wireframe sur lequel vous pouvez facilement vous appuyer Figma vous permettra de communiquer avec les autres et de recevoir feedback. Et une fois que tout le monde est sur la même longueur d'onde, vous pouvez passer à l'étape suivante, qui consiste à lui donner une belle apparence en concevant la véritable page de destination sur Figma. 18. Créer votre logo: Avant de nous lancer dans la création de notre design, nous allons d'abord créer un logo. À moins que vous n'envisagiez d'avoir un texte car votre logo n'était que le nom de votre entreprise. sites Web que nous utiliserons pour créer notre logo sont appelés semi-complets et vous pouvez y accéder en tapant asheville.shopify.com, en appuyant dessus et en commençant. Et en fonction de la nature de votre entreprise et branche d'activité dans laquelle vous évoluez. Comme nous sommes une start-up éducative, nous opterons pour l'option technologique. Aux fins de cette vidéo. Ici, pour le visuel, les styles, vous pouvez sélectionner jusqu'à trois options futuriste, créatif et moderne. Et après ce prix, sur la page suivante. Et si nous y retournons, nous avons déjà notre nom. Tu serais inventé. Mais pour l'instant, nous allons simplement laisser le champ vide. Je vous recommande de sélectionner toutes les options ici afin de gagner du temps si vous en avez besoin à l'avenir. Après avoir constaté qu'il existe de nombreux logos générés par l'IA parmi lesquels nous pouvons choisir. Le logo, ça a l'air bien. Une fois que vous avez appuyé sur Modifier, vous pouvez même faire en sorte que le thé aime la police qui apparaît, ainsi que les différentes couleurs. La police. Je vais juste le remplacer par le corrélatif. Dans les prochaines vidéos, nous passerons en revue les différents types de typographie. Je veux que le style de police soit normalisé. C'est pourquoi j'opte pour une décoration. Mais la morale sera abordée dans la prochaine vidéo. Et voyez lequel vous voulez. Celui-ci a l'air bien. Je vais donc poursuivre avec cette tante et appuyer sur Next. Et puis goûtez ça. Oh, félicitations, vous avez votre nouveau logo. Le package de logo inclut toutes ces options. Ce téléchargement précédent. Cependant, pour télécharger, vous devez fournir votre e-mail et également votre mot de passe ou vous pouvez simplement vous connecter. J'ai déjà un compte, donc je peux simplement me connecter. Une fois connecté, vous pouvez appuyer sur Télécharger. Et si vous recevez cette notification, vous informant que tous les fichiers du package de logo et de conception ont été envoyés à votre adresse e-mail. Attendez trois ou quatre minutes et vérifiez votre courrier électronique et vous obtiendrez probablement un fichier compressé à partir duquel vous pourrez le télécharger. Appuyez donc vers le bas. Une fois que vous l'avez téléchargée, vous pouvez voir tous les différents endroits où vous pouvez utiliser l'image. Pour l'instant, nous voulons juste le logo transparent pour notre prochain exercice. Alors, ayez ça à portée de main. 19. Une palette de couleurs: Bienvenue à tous. Dans cette vidéo, nous allons passer en revue certains outils que nous pouvons utiliser pour créer notre palette de couleurs. Et nous verrons également quelques exemples de ce à quoi ressemble une mauvaise palette de couleurs. Permettez-moi donc de commencer par vous poser une simple question. que vous feriez confiance à une entreprise dont le site Web ressemble à celui-ci ou passeriez-vous une commande auprès d'elle ? Personnellement, je ne ferais pas confiance à un tel site Web. Il y a beaucoup trop de couleurs denses. Où est la personne qui l'a conçu ? Il veut que nous nous concentrions sur le texte de fond. Il n'y a même pas de barre de navigation appropriée. Quels sont donc les outils qui peuvent nous faciliter ce processus et potentiellement nous aider à éviter de ressentir de mauvaises palettes de couleurs. Commençons par visiter un site Web appelé human, qui vous permet de créer d' incroyables palettes de couleurs ou combinaisons de couleurs. Vous appuyez sur le site Web. Rubrique. Il existe une option où vous pouvez choisir entre un magazine ou un monochrome. Augmenter le nombre à partir d'ici. Si vous appuyez sur trois, vous en aurez plus. Mais avoir une palette de quatre couleurs est suffisant pour notre exercice. Chaque fois que vous souhaitez en générer un nouveau, vous pouvez simplement transmettre la génération. Si vous souhaitez voir un site Web basé sur des illustrations, vous pouvez effectuer ce réglage à partir d'ici. Et en fonction du nombre de palettes de couleurs que vous souhaitez utiliser, vous pouvez augmenter le nombre. Vous pouvez même télécharger votre propre image et la voir. Ce site Web est particulièrement utile si votre logo est simplement composé de lettres qui ne sont pas un design. Nous pouvons avoir une idée rapide de ce à quoi nous attendre. C'était ton logo. 20. Extraire la palette de couleurs à partir du logo: Dans cet exercice, nous allons échantillonner la couleur de notre logo, bien que nous puissions échantillonner les couleurs manuellement. Grâce aux sites Web avancés, Grâce aux sites Web avancés ce processus est aujourd'hui beaucoup plus facile. Notre premier exercice consiste à obtenir des échantillons de couleurs pour les palettes de couleurs que nous utiliserons pour notre structure filaire. Visitez les sites Web appelés colors point C-O et accédez à Outils. Ce site Web vous permet de télécharger votre logo et génère des couleurs qui correspondent au logo, ce qui vous fait gagner du temps. Appuyez sur le générateur OnStart. Ici. Chaque fois que vous appuyez sur la barre d'espace, elle génère des palettes de couleurs que vous pouvez utiliser. Cependant, dans notre cas, nous cherchons à créer une palette de couleurs à partir de l' image que nous venons de télécharger. Nous devons donc d'abord décompresser le dossier zip que nous avons reçu au lycée. Je vais juste créer un nouveau dossier, le renommer en Logo et copier tout ce dossier. Maintenant, il nous sera plus facile de le télécharger sur le site Web depuis le bureau, de sélectionner le logo. Et passons à l'option Transparent. Et vous pouvez jouer avec cela pour voir quelles combinaisons conviendraient le mieux à votre site Web. Jusqu'à présent, nous avons du noir et du bleu clair. Vous pouvez appuyer sur Suivant. Et on peut même l' ouvrir dans le générateur. Nous pouvons verrouiller cette première option, la deuxième option, et modifier les trois autres car elles ressemblent à peu près à ce que nous avons sur le côté gauche. Nous pouvons appuyer sur la barre d'espace et voir ce que nous pouvons faire. Nous pouvons même sélectionner notre propre couleur. Par exemple, j'aimerais que mon site ait des couleurs blanches. Il en sera donc tout à fait sûr. Ensuite, je complète le reste jusqu'à ce que je trouve la couleur que je veux. Je peux appuyer sur la barre d'espace. Oui, ça me semble bien. Maintenant, je peux l'exporter sous forme d'image. Nommez-la palette et appuyez simplement sur Exporter. Et cela nous donnera l'image téléchargée. Comme nous en étions presque à la moitié de ce cours, j'apprécierais que vous laissiez un commentaire disant : À bientôt dans la vidéo suivante. 21. Projet d'échantillonnage de couleurs: Bienvenue à tous. Dans cet exercice, nous allons échantillonner les couleurs de n'importe quelle image que nous avons. Supposons, par exemple, que vous ayez une page sur votre site Web et que votre contenu soit présenté, sauf en ce qui concerne vos couleurs. Nous allons simplement suivre les étapes décrites dans la vidéo précédente et obtenir la combinaison de couleurs afin de gagner du temps. Tout d'abord, il faudrait exporter l'image. Vous pouvez avoir un aperçu rapide. Appuyez sur Exporter. Une fois que vous avez cet exposant, hello n'est pas égal à zéro. Nous pouvons simplement déposer l'image que nous venons de télécharger et le tour est joué, nous avons la combinaison de couleurs. La première me semble bonne. Cependant, vous pouvez choisir ce que vous voulez et jouer avec. Tous les exportent sous forme d'image. Il suffit de le nommer Color One. Et le sport. Une fois que vous avez téléchargé l' image, nous pouvons simplement la récupérer ici et la minimiser. Que ça a l'air bien mieux. Une fois que nous l'aurons. Nous pouvons facilement échantillonner les couleurs. Sélectionnez sur le cadre. Sélectionnez sur la pipette. Et voyons si l'orange conviendra parfaitement. C'est très sombre, alors réduisez peut-être le pourcentage de 100 à 40. D'abord. Essayons la couleur verte. Le vert est beau jusqu'à présent, nous allons donc nous en tenir au vert au lieu de l'orange. M pour la boîte au lieu de noir. Nous pouvons avoir de l'orange. Cela semble bien meilleur que ce que nous avions au départ, bien que cela ait légèrement changé. En ce qui concerne les textes. Nous y reviendrons dans le cadre du prochain projet où nous discuterons de la topographie et nous ajusterons le texte en conséquence pour le rendre encore meilleur. Cette partie du cours de l'exercice consiste à appliquer ce que nous venons de faire avec celui-ci. Je veux que vous exportiez cette image sur le site web appelé colors C0. En raison de l'échantillonnage des couleurs. Comme nous l'avons fait pour cette vidéo. N'hésitez pas à les partager lors de la discussion. 22. Typographie: Bienvenue à tous. Dans cette vidéo, nous allons passer en revue la topographie. La topographie est généralement utilisée pour améliorer l'attrait visuel, établir une sorte de hiérarchie et créer un sentiment d'équilibre sur votre site Web ou ailleurs. Il est recommandé de ne pas utiliser plus de trois styles de police par site Web. Site Web. Personnellement, je m' en tiens à deux seulement. J'obtiens les polices dont j'ai besoin, généralement auprès de Google Fonts. Si vous accédez à Google Fonts et à la section des catégories, vous pouvez voir que nous avons les quatre polices principales. Serif, sans, Serif, Display et écriture manuscrite, également connue sous le nom de script. Vous aurez peut-être juste besoin de le savoir pour certaines familles de points qui ont généralement une sorte de queue à la fin de chaque lettre. Le sans serif est le suivant et le plus utilisé de nos jours. Vous allez voir cela sur de nombreux sites Web. Le point suivant s'appelle la police d'affichage. Il est généralement préférable d'avoir ce type de police sur un titre. Et pour des raisons de sécurité, vous préférez utiliser le système sans empattement plutôt que l'affichage, car les écrans très décorés et peuvent être difficiles à lire si vous utilisez l'entrée dans les paragraphes. Qui vous montre à quoi cela ressemble si vous l'utilisez dans un paragraphe. Vous pouvez donc voir que c' est très difficile à lire par rapport au San-Serif, qui est plus facile à lire sur la glace. La dernière famille étrangère aussi, je vais passer en revue, c'est l'écriture. Cela va de soi. Il est généralement bon d' avoir une écriture manuscrite pour les gros titres. Comme un café ou je peux créer une entreprise. Et c'est à peu près tout pour cette leçon. Dans la prochaine leçon, nous aurons un projet de typographie. 23. Projet de typographie: Bienvenue à tous. Appliquons donc à la que nous avons appris concernant la typographie pratique ce que nous avons appris concernant la typographie en passant en revue quelques exercices. Dans l'un de nos exercices précédents, nous avons examiné l'échantillonnage fixe la couleur en fonction de l'image. Et dans cet exercice, l' accent sera mis sur l' ajustement de la topographie. Vous n'avez pas ce fichier Figma. Vous pouvez le trouver dans le dossier du projet. Nous allons d'abord commencer par cet en-tête. Double-cliquez dessus. Et à partir de l'onglet Exporter, nous pouvons voir que la police est ou bouteille. Lorsque vous sélectionnez la police pour essayer de trouver un style de police, il y avait plus de six styles de police. Si vous vous demandez comment vous pouvez trouver cela, vous pouvez voir il existe différents styles de police. Par exemple, si nous passons à la lumière, elle deviendra plus légère. Actuellement, nous sommes fous. Cependant, si vous accédez à Google Font, vous pouvez toujours trouver différentes polices. Renvoyez ça à Poppins. Comme il s'agit de l'en-tête principal, nous voulons que les gens y prêtent attention. Cela porte le téléphone à au moins 64. Et comme vous pouvez le constater, lorsque vous avez des mots très gras, la meilleure chose à faire est de réduire l'espacement entre les deux pour qu'ils soient plus beaux. Cela semble bien meilleur que ce que nous avions au départ. En ce qui concerne les textes. Nous n'allons rien changer. Nous allons juste avoir ce texte factice et le modifier pour qu'il apparaisse également. Pour un texte plus clair, il est préférable d'avoir un certain espacement. Ensuite, il ne reste plus qu' ajuster ce style de police. Il n'est pas centré, alors assurez-vous qu'il est centré. Et peut-être le remplacer par «  normal » et « mi-gras ». Et ça a l'air bien mieux. Nous avons maintenant une sorte de hiérarchie. L'exercice de cette partie de ce cours consiste à ajuster les images deux et trois. Actuellement, nous sommes sur le point de. À présent. Je suppose que vous avez déjà échantillonné la couleur dans le cadre de l'exercice précédent. Pour ce projet, vous n' avez qu'à vous soucier de l' ajustement de la topographie et rien d'autre. 24. Conception de page d'accueil: Bienvenue à nouveau. Nous allons maintenant continuer là où nous avons arrêté de faire la partie filaire de la vidéo et nous allons maintenant concevoir la structure filaire proprement dite. Nous allons commencer par dupliquer le wireframe en appuyant simplement sur le bureau à partir d'ici ou juste en haut. Nous devons appuyer sur Alt. Et lorsque vous sélectionnez Alt, faites glisser le pointeur vers la droite. Choisissons simplement ce design. Si vous souhaitez utiliser un logo que nous avons créé précédemment, vous pouvez simplement accéder au dossier du projet et l' obtenir, puis le récupérer à partir de là. Ou si vous avez votre propre logo qui vous a été envoyé par e-mail par le lycée, vous pouvez également l'insérer ici. Depuis le dossier du projet. Avec des ressources plus faibles, vous pourrez les trouver tous. Nous pouvons l' envoyer directement à Figma. Au lieu du logo, je le remplacerai par le logo actuel. Assurez-vous simplement de le minimiser. Ça a l'air bien pour le moment. Ayez également une idée des palettes de couleurs auxquelles nous allons nous en tenir à quatre designs, ce serait une bonne idée de les avoir quelque part en haut. Si vous accédez au dossier du projet, vous pouvez également trouver la palette de couleurs. Vous pouvez donc simplement le retirer de là et le minimiser. Taille. Qu'est-ce qui est considéré comme petit ? Donnons une sorte de couleur de fond pour la première page. Il suffit donc d'ajouter un rectangle cliquer avec le bouton droit de la souris et de l' envoyer à la fin. Après. Laissez-nous sélectionner la palette de couleurs bleues. Cependant, comme vous pouvez le constater, notre logo disparaît. Donc, c'est parti, assurez-vous de régler la teinte, la saturation, la luminosité et réglez cette valeur à environ 50 %. Que nous pouvons également voir notre logo et qu'il est bien plus beau. Il serait également judicieux de définir le style de topographie. Vous vous en tiendrez à ce design filaire. donc Il s'agit donc de créer un rectangle et de mettre un texte. J'ai choisi deux polices pour ce wireframe Poppins et the cabin. Vous pouvez choisir ce que vous voulez pour être sûr. Et rien de plus. Permettez-moi simplement d'élargir cela. Je vais passer d'Enter à Poppins. Deuxième police. Je vais changer ça en cabine. Et il suffit de laisser un peu d'espace entre les deux. Pour l'en-tête. J'utiliserai principalement une police Poppins. Également pour nos éléments de la barre de navigation. Assurez-vous d'apprendre à détacher le style défini en cliquant simplement sur le style de détachement juste à côté du texte. Pour chacun d'entre eux. Une fois que vous êtes détaché, changez simplement la police pour ouvrir. Maintenant, changeons la police dans le balancier primaire, nous avons saisi deux carbones. Pareil pour celui d'ici. Et aussi le texte, le texte du paragraphe. Changeons la couleur des boutons principaux. En détachant la couleur d'ici et en sélectionnant l'orange plutôt que l'orange, je préfère avoir plus d'orange pour qu'elle soit facilement visible. Idem pour ce bouton principal en haut. Vous touchez les instances. Et la seule chose qui reste, d'accord, c'est l'image de la page d'accueil. Pour l'image, j'ai visité un site Web appelé andro. Avant de passer à 100, voyons ce que proposent les autres start-up présentes sur le moodboard. Ils ont tous une sorte d'illustration. Ce site Web semble donc être une bonne solution. Parfois, garder les choses simples est la meilleure façon de procéder. Tapons simplement la technologie. Et le premier a l'air bien. N'hésitez pas à sélectionner la personne que vous souhaitez sélectionner. Assurez-vous de le télécharger. Je devrais mentir et le supprimer. Il suffit de le retirer et d'essayer de déplacer leur grille de mise en page. Comme vous pouvez le constater, c' est une erreur parce que nos antécédents sont satisfaisants et que cela ne semble pas très beau. Donc, ce que nous pouvons faire, c'est visiter un site Web appelé Supprimer l'arrière-plan ou simplement Supprimer BG. Il suffit de télécharger cette image. D'ici. Nous pouvons simplement le télécharger et revenir à notre Figma. Déplacez ceci et remettez-le en place. Cela semble bien meilleur que ce que nous avions vu précédemment. Juste pour que tu aies une idée. Voilà à quoi cela ressemblait auparavant. Ça a l'air bien mieux. 25. À propos de nous Design: Pour la section À propos de nous, tout est assez similaire à ce que nous avons fait pour notre page d'accueil. Cependant, que nous sommes sur la bonne voie. Voyons ce que l'autre start-up commence à faire grâce à notre mood board. Et comme vous pouvez le constater, bon nombre de ces startups l'ont fait. Ensuite, Scholar sur la page d'accueil, puis les pages suivantes ne sont que des couleurs blanches unies. Nous allons donc nous en tenir à ce fond blanc. Ou voyons si nous pouvons trouver un meilleur arrière-plan. Sélectionnez un rectangle, assurez-vous de l'envoyer à l'arrière. Et à partir de là, essayons de le réduire à 50 %. Oui. C'est plus beau que d'avoir un fond blanc uni, à mon avis, au-dessus des listes d'expérimentateurs de 30 % pour voir la différence et certainement un peu vers le bas. Donc c'était 40 ou 50, ça devrait aussi aller. Mais quatrièmement, cela semble bon jusqu'à présent. Pour le titre principal, comme nous l'avons fait dans la section précédente , nous avons parlé de la police Poppins. Faites-le, assurez-vous de vous détacher de l'instance, tapez et Poppins ou «  À propos de nous » et du paragraphe. Passons à la police carbone. Détachez l'instance où ils sont plus IID, pop et il ne nous reste plus qu'une image. Si nous consultons notre mood board, pouvons voir de nombreuses images et illustrations affichées. Revenons donc à Andrew. Ici, nous voulons dire que nous sommes une start-up éducative. Je tape donc « éducation ». 12 ont tout à fait raison, ça me semble bien. Assurez-vous donc d'avoir téléchargé et supprimé cet espace réservé à l'image. Mais nous avons oublié de faire quelque chose , à savoir supprimer l'arrière-plan. Assurez-vous donc de le télécharger et de le télécharger en arrière-plan gratuitement. Et ça a l'air bien mieux. Agrandissez la taille. Oui, c'est tout pour la section À propos de nous. 26. Conception de plan de prix: Pour notre section de tarification sur la page de destination, nous laisserons l'arrière-plan tel quel, ce fond blanc. L'essentiel sera exactement ce point. Nous allons commencer par l'en-tête. Vous pouvez voir qu'il y a un point est attaché. Tu peux simplement te détacher. Ils sont toujours éphémères. Les plans tarifaires semblent se détacher du carbone. Pour ces en-têtes. Pour nos différents modèles de tarification, nous pouvons ouvrir les valeurs de prix. Allons dans sa cabine. Et aussi pour les différentes fonctionnalités que nous proposons. Et aussi pour les boutons. Ça arrive. Donc oui, c' est à peu près tout pour le plan tarifaire. 27. Contactez-nous Design: Passons maintenant à la section Contactez-nous, au blog et au pied de page. Et d'après le mood board qui nous a inspiré, nous pouvons voir qu'il y a une sorte de contexte. Changeons le fond de gris à autre chose. Cette fois, optons peut-être pour un bleu plus foncé. Et diminuons le pourcentage de 100 à 80. Ce texte est à peine visible, alors détachez l'instance grise et placez-la en noir. Au lieu d'être régulier. Accédez au style clair ou au point Contactez-nous où nous allons le détacher de l'instance et optez pour la police Poppins. Nous nous en tiendrons aux cabines pour le sous-alinéa et à Poppins pour le nom, adresse e-mail et le reste. Et au lieu du fond noir, détachons-le et remplacons-le par l'orange foncé que nous avions plus tôt. Le Contact Us est placé très près du bord afin que nous puissions le déplacer légèrement vers le bas. Et ça a l'air bien mieux. Bien que la section Contactez-nous plus belle que celle que nous avions initialement, peut encore être améliorée en modifiant le remplissage de l'arrière-plan. Il suffit donc d'appuyer sur le remplissage et sur le dessous au lieu de le maintenir, d'appuyer sur le linéaire. Et à mon avis, cela semble bien meilleur que ce que nous avions au départ. Il a l'air beaucoup plus propre et s'intègre bien dans la page suivante. 28. Conception de blog: Pour la section blog, ajoutez une couleur de fond. Nous allons d'abord commencer par ajuster la police. Je vais opter pour la cabine, puis le pompage. Ou l'en-tête. Cabines pour le sous-alinéa. Ouvre pour ça. Titres. Cela se produit pour le sous-alinéa. Ouverture du nom de l'auteur, cabine pour la date. Si tu remarques. Le nom Matthew est beaucoup plus proche que celui des jeux de noms, ce qui montre qu'il y a une certaine incohérence. Nous pouvons donc ajuster cela en surlignant tout et en tirant vers la droite. Ou nous pouvons même ajouter des grilles de mise en page et faire une estimation rapide de l'espacement. Ça a l'air mieux. En ce qui concerne l'image. Bien que nous puissions visiter des sites Web tels que des pixels qui vous fournissent une image de stock gratuite. Nous parlons de conseils pour les étudiants. Et heureusement, il y a comme une image de stock qui indique des étapes. Utilisons cela à notre avantage. Cela ne doit pas nécessairement être la même chose que les mots, mais plus c'est proche, mieux c'est. Essayons de placer l'image. Ça n'a pas marché. Il suffit donc d' activer les grilles de mise en page. Nous pouvons alors voir qu'il s'étend de cette grille de mise en page jusqu'ici. Et nous pouvons avoir ce cadre de référence rapide en tête. Et placez l'image de manière à ce qu'elle paraisse très grande, réduisez-la simplement. Ce que nous pouvons faire, c'est simplement voir la taille de l'image à côté de ses 367 x 28. Nous pouvons donc le faire en appuyant sur 367 et en ajustant la hauteur de deux à 80. Et en alignant cette image sur l'autre. Où tu pourras faire la même chose pour les deux. Pour l'instant, je vais juste télécharger cette image. Ça a l'air très joli. Et nous pouvons minimiser l'image AT regardons simplement ce qu' elle était, soit 367 sur 28. Nous allons donc en faire 367 sur 80. Détachez-le car cela pose des problèmes. Oui. Faisons en sorte qu'il soit aligné. Car l'informatique va être assez facile. Il vous suffit de saisir du code. La première image semble bonne. Et minimisez le détachement pour que cela ne cause aucun problème et minimisez-le. Allie la police. Ensuite, assurez-vous simplement qu'il est aligné. Et ça a l'air bien. Désactivez les grilles de mise en page. Et il manque quelque chose. L'espacement n'est pas uniforme , alors revenons en arrière. C'était censé le faire. Comme vous pouvez le voir, ces deux images mesurent 6367 sur 280. Cependant, le premier ne l'est pas. Assurez-vous donc de détacher cela, car c'est la cause du problème, les proportions limitées. Une fois que vous l'avez retiré, expliquez que l'espacement est égal. Et il ne lui reste plus que sa peinture, une image de profil. Et nous pouvons le faire simplement en obtenant quelques portraits. Et c'est aussi la même ou la coordonnée du rayon pour le rayon coronaire. Donc, si on optait pour 38,4, ce serait exactement ce qu'il faut. Vous pouvez simplement le mettre dessus. Nous pouvons faire de même pour l'image suivante. Retirez-le et placez-le simplement. Et faites de même pour le suivant. Supprimez la grille de mise en page. Oui, la section blog, elle a l'air géniale. 29. Conception de pied de page: En ce qui concerne la section de bas de page, nous allons d'abord commencer par obtenir notre logo en haut. Appuyez sur la touche Alt et faites glisser le pointeur vers le bas. Déplacez le logo. Ensuite, nous ajusterons la police. Les en-têtes. Ouvert. L'e-mail Can Company tout le reste pour l'avoir. Enfin, il ne nous reste plus que l'arrière-plan et voyons quelle couleur correspondrait parfaitement. Alors détachez le rembourrage. Nous optons pour le bleu foncé. Comme vous pouvez le constater, vous ne pourrez pas voir notre logo. Nous revenons à notre mood board. Les pieds de page ont généralement une couleur unie. Essayons d'y aller parce que la couleur orange, laisse-moi essayer de jouer avec les pourcentages pour voir s'améliorer. À 60 %. Il a l'air bien mieux que ce que j'ai vu à 100 %