Concevoir un site Web de portfolio simple dans Figma ma

1. Bienvenue: Salut, je suis tellement contente que tu sois là. Je m'appelle Viros et je suis un designer UX travaillant chez Deloit. Avez-vous déjà rêvé de concevoir un site Web de portfolio qui soit non seulement beau, mais qui prenne beaucoup moins de temps ? Eh bien, si c'est quelque chose que vous recherchez, alors je suppose que ce cours vous convient parfaitement. Dans ce cours, nous allons utiliser Figma pour concevoir un site Web de portfolio de deux pages Le design va être très simple et je vais vous expliquer tout ce dont vous avez besoin pour le concevoir. Nous aborderons les bases de FigMA et nous passerons à la conception des différentes pages Nous allons concevoir une page d'accueil, puis nous allons passer à autre chose et concevoir une page à propos de moi. Le design sera simple mais très professionnel et vous prendra beaucoup moins de temps. Si c'est quelque chose pour lequel tu es prête, je te verrai en classe. Merci beaucoup. 2. Introduction à Figma ma ma: Salut, voilà. Bonjour, bienvenue dans le cours et j'espère que vous aimerez ce cours. Donc, ce que nous allons apprendre, apprendre à créer un site Web de portfolio très minimal et esthétique. Vous pouvez être quelqu'un qui est déjà designer, cherche à créer un site Web de portfolio ou quelqu'un qui commence tout juste à se lancer dans le design ou le design. De toute façon, vous aurez besoin d' un bon site Web de portfolio. ce que nous allons faire dans ce didacticiel ou dans ce cours exactement ce que nous allons faire dans ce didacticiel ou dans ce cours. Qui suis-je ? Eh bien, je m'appelle Perros et je suis designer UX senior Je travaille chez Deloit en Inde, Bangalore, et je fais du design depuis plus de quatre ans maintenant J'ai débuté en tant que graphiste et je suis progressivement passé au design UX. J'aime beaucoup travailler sur des designs minimalistes, mais en même temps très utilisables. Pour ce cours de design, il n'y aura pas beaucoup de cloches et de sifflets, mais le design sera très épuré et minimal Commençons. Je vais m'en sortir. Peut-être que je vais juste me réduire un peu et le mettre ici. Donc, ce que vous voyez à l'écran, c'est FIGMA. Donc, lorsque vous vous inscrivez pour la première fois à FIGMA, laissez-moi vous dire ce qu'est FIGMA FIGMA est un logiciel de conception spécialement conçu pour le design UX ou non pour le design UX, mais pour le design d'interface utilisateur utilisant le design d' interface Les personnes qui travaillent sur les conceptions d'interface sont appelées UI designer ou UX designer. C'est pour quelqu'un qui est très nouveau et qui ne connaît pas la terminologie. Pour les personnes qui ont déjà expérience, soyez indulgent avec moi. Ainsi, lorsque vous lancez FigMA, vous voyez quelque chose comme ça Le bouton d'accueil, lorsque vous cliquez dessus, se peut que cette page soit complètement vide si vous démarrez InFima pour la première fois J'ai beaucoup de choses à faire ici. Mais lorsque vous cliquez sur ce design, vous verrez que Figma quelque sorte créer un nouveau fichier de design ici, s'appelle Untitle J'ai déjà créé un fichier qui portait le nom du site Web du portfolio. Si vous souhaitez modifier le nom, vous suffit de double-cliquer et vous pouvez lui donner n'importe quel nom. Pour l'instant, je vais juste annuler. Je suppose que vous êtes nouveau à Figma et je vais simplement vous quelques outils de base de Figma afin que nous commencions ce cours en gardant tout le monde à Même si vous êtes nouveau, vous pouvez suivre. Vous voyez, Figma a trois ou quatre voies différentes. La partie supérieure est l' endroit où se trouvent nos fichiers. Vous pouvez voir que le fichier de travail actuel est celui-ci, qui est en cours de sélection. Il s'agit d'un autre dossier. Vous pouvez ouvrir de nombreux fichiers différents ici. De plus, si vous souhaitez accéder à la page d'accueil, cliquez simplement sur Accueil. Sur le côté gauche, vous avez un panneau dans lequel vous avez un fichier intérieur, vous avez des pages, vous pouvez donc avoir plusieurs pages et vous pouvez concevoir sur plusieurs pages dans un même fichier Donc, en ce moment, nous en sommes à la première page, et dans la page, vous pouvez également avoir plusieurs couches en cours. Au fur et à mesure que nous commencerons à concevoir, vous verrez ces couches apparaître. Donc, sur le côté droit, vous avez peu d'outils. Ce panneau est donc très dynamique et il change essentiellement en fonction de l'outil que vous utilisez actuellement. Et en bas, nous avons une barre d'outils. heure actuelle, nous avons sélectionné notre outil de déplacement, et voici cette flèche de pointage qui est utilisée pour déplacer des objets ici et là. Nous avons deux autres outils à l'intérieur. Ainsi, où que vous voyiez ce chevron ou cette flèche, cela signifie qu'ils contiennent des outils cachés, mais nous allons rester très brèves et nous n' examinerons que les outils de base et les plus utiles que nous utiliserons lors Le premier est, bien sûr, notre outil de déménagement, que nous utiliserons largement pour déplacer des choses ici et là. Ensuite, nous avons l'outil de cadre. L'outil de cadre est comme un cadre ou une planche à dessin dans laquelle vous créez un cadre d'une certaine taille et à l'intérieur de ce cadre, vous allez concevoir C'est là que les différentes tailles d'écran entrent en jeu. Vous créez un cadre pour ordinateur de bureau, vous créez un cadre pour le design mobile et, en gros, il s'agit simplement d'un conteneur conçu en continu Ensuite, vous avez un outil à ruban adhésif et un outil de forme à l'intérieur, vous avez beaucoup de formes différentes, une ligne rectangulaire, une flèche, une ellipse, une étoile, un polygone, etc. Ensuite, vous avez ce stylo que vous n'utiliserez pas beaucoup. Si vous n'allez pas dessiner à la main des graphiques vectoriels, je ne pense pas que vous les utiliserez. Si vous n'utilisez pas de stylo, il y a très peu de chances que vous utilisiez un crayon. Ne parlons pas de ça. Le prochain outil que nous allons utiliser de manière intensive est notre outil de texte. L'interface utilisateur est essentiellement composée de deux choses. Nous avons différentes formes, puis nous avons du texte. Ces deux éléments fusionnent pour créer du design. Vous pouvez juste que c'est très basique. Ce n'est même pas correct, mais c'est une définition très basique Si vous regardez n'importe quel design, vous verrez qu'il y a beaucoup de formes, de graphiques et de textes. En gros, ce n'est pas la définition, mais plus ou moins, j'essaie juste de faciliter les choses. Vous disposez alors d'un outil commun. L'outil courant entre essentiellement en jeu lorsque nous travaillons avec quelqu'un d'autre et qu'il peut ajouter des commentaires sur notre conception, puis nous pouvons répondre à ces commentaires. Excuse-moi. En gros, c'est ça. Telles sont les bases de Figma. Alors démontrons simplement quelque chose. Je vais passer au cadre et lorsque je clique sur le cadre, vous voyez que le côté droit vient d'être changé. Vous avez différents préréglages prédéfinis et nous allons opter pour le bureau Lorsque je clique sur Deck Stop, vous voyez un cadre apparaître, et vous pouvez maintenant le déplacer à l' aide de l'outil de déplacement. Voyons ce que nous pouvons faire maintenant. Maintenant que nous avons le cadre, nous pouvons voir qu'il existe de nombreuses options différentes, que nous aborderons dans les prochains chapitres. Ensuite, nous avons le remplissage. Le remplissage est essentiellement la couleur du cadre. Très facile Remplir. La couleur que vous souhaitez remplir. Facile, facile Nous avons donc une couleur blanche, puis à l'intérieur, nous pouvons créer un rectangle. En utilisant notre outil de mise en forme, vous pouvez déplacer ce rectangle. Si vous voulez créer une ellipse, vous pouvez créer une ellipse. Lorsque vous avez commencé l'ellipse, vous avez remarqué que les sauts n'étaient pas parfaitement ronds Ça va partout. C'est de la pop gratuite. Mais si vous appuyez sur la touche Shift, elle se déplace maintenant dans le bon rapport. Alors maintenant c'est réglé. Je veux dire, il ne se déforme pas. C'est ainsi que vous enregistrez le rapport hauteur/largeur. Maintenant, si vous cliquez ici, vous voyez différentes formes ou différents objets, nous aurons différentes options dans le volet de droite. Maintenant, ajoutons également du texte. Et vous pouvez agrandir ce texte. Donc oui, ce sont les bases mêmes de FIC MA. Et vous verrez au fur et à mesure que nous avançons, vous commencerez à apprendre toutes ces options, tous ces outils, et ça va être amusant. Fais-moi confiance. Alors oui, je vous verrai dans le prochain chapitre et nous allons commencer. D'accord. 3. Conception de la page d'accueil Partie 1: Hey, bienvenue encore une fois. Donc, ce que nous allons faire maintenant, c'est commencer par la première page. Donc, comme je l'ai dit, il s'agira d'un site Web de portfolio minimal très simple. Et supposons, faisons quelques suppositions. Nous allons donc commencer par ici. Alors, pour qui nous créons ce site Web. Donc, le nom est, disons, John Doe. C'est un nom très courant, nom fictif que nous utilisons et quel est le travail de cette personne ? Disons, euh, designer, devrions-nous prendre designer ou photographe. Je pense que ce que fera cette personne façonnera l'apparence du portfolio car s'il s'agit d'une personne qui photographie beaucoup, le portfolio sera largement dominé par l'imagerie. Beaucoup d'images en taille réelle, alors que s'il s'agit, disons, d'un concepteur d'interface utilisateur, cela concernera écrans et la conception des interfaces, ainsi que de nombreux textes expliquant le processus de conception. Que devons-nous prendre ? Imaginons, par exemple, qu'il soit concepteur d'interface utilisateur. Nous présenterons également quelques-uns des projets. Pour les projets, nous utiliserons simplement images fictives provenant peut-être d'un dribble ou d'une main B. Je ne vais pas utiliser mes propres images car peu d'entre elles sont protégées par des droits d'auteur et certaines d'entre elles sont soumises à un accord de Je ne veux donc pas avoir de problèmes juridiques. Donc oui, je pense que cela suffirait. Commençons donc maintenant. Tout d'abord, nous allons également vous expliquer comment créer des pages. Voici notre première page. Si je double-clique, je peux le nommer intro Gardons donc cette page telle quelle et cliquez sur cette icône en forme de plus. Cela ajoutera une autre page, qui est la page deux, et nous pouvons dire design, oui, donnons-lui simplement le nom design. Passons à notre outil de cadre et créons notre index du cadre. C'est la première étape qui va être franchie. Et parlons du site Web. Donc, site Web du portfolio, ce que nous essayons réellement de faire. Nous essayons de montrer qui nous sommes, ce que nous faisons et de mettre en valeur ce que nous avons déjà fait. Pour ce faire , nous utilisons une configuration très basique d'un site Web, notre barre de navigation, puis le héros principal ou la zone de vitrine, puis le pied Ce sera très basique, très simple. Tout site Web, tout bon petit site Web que vous voyez, suit en fait le même chemin. Nous aurons donc la barre de navigation. Commençons donc par masquer les détails. Ce sera, disons, Navbar. Et si vous appuyez simplement sur R, il se transformera en rectangle. C'est ce que j'ai fait en ce moment. C'est notre NAB. Donnons à ce NAB une couleur différente. Ensuite, nous en avons une autre qui est notre introduction de base à notre héros, quel que soit le nom que vous voulez, puis vous avez cette zone où vous présentez certaines choses Donnons-lui une couleur plus foncée. Ce que j'ai fait en ce moment, c'est juste le dupliquer et pour le faire rapidement, il suffit de cliquer, puis d'appuyer sur Alt Je suis sur une machine Windows, donc Alt J'ai oublié quel est l'équivalent d'Alt sur un Mac ou je pense que ce n'est pas une commande, désolé, le contrôle c'est pour la commande. J'ai juste oublié. Quel que soit le substitut aux mathématiques, veuillez l'utiliser. Si je maintenais la touche Alt enfoncée, puis que je clique et que je fais glisser, vous pouvez voir que la double flèche signifie qu'elle est dupliquée, et ce sera un pied Faites-en un pied de page. Et cela lui donne une couleur différente. Nous avons l'idée de base, nous avons indiqué où les choses vont se passer. Sans le déranger et sans aller le copier. Vous pouvez également utiliser les raccourcis, Control C, Control V, et il vous suffira copier-coller et de faire une copie dupliquée. Supprimons maintenant ces blocs et commençons à mettre un guide. Vous mettez un guide, venez ici et cliquez sur le guide de mise en page. Au moment où vous cliquez, cela vous donnera beaucoup de notes, très petite grille, mais vous devez passer aux colonnes. Et une fois que vous avez des colonnes, vous pouvez voir que vous pouvez les utiliser . Si vous connaissez bien le système de grille, vous pouvez utiliser ces 12 colonnes, comme vous le souhaitez. Mais restons très simples. Nous allons en choisir un, qui est comme plein. Ensuite, nous allons donner une certaine marge. Ce qu'est la marge, c'est, euh , les espaces, en dehors de l'endroit où vous voulez travailler, en gros. Vous pouvez regarder Google, mais j'essaie juste de rester très simple. Je ne vais pas entrer dans les détails absolus, quelle est la bonne définition. Vous pouvez simplement regarder toutes ces choses sur Google. Sachez simplement quel est l'objectif de ce cours : vous pouvez commencer à concevoir des termes et des définitions que vous pouvez toujours apprendre. Mais il n'y a pas de substitut à la conception, vous devez donc concevoir le design. Donnons-lui donc un 32 pixels. Donc, dans beaucoup de design, vous verrez des gens en utiliser 32, 16, 8. Donc, en gros, pour que les choses restent cohérentes , nous utilisons des multiples , vous savez, quatre, quatre sur 28, quatre sur trois, 12, quatre sur 416. C'est pourquoi nous utilisons ces 16, 24 et ainsi de suite. La gouttière est l'espace entre deux colonnes. Donc, pour le moment, il n' apparaît pas parce que nous n'avons qu'une seule colonne, et c'est pourquoi nous n'avons pas de gouttière Mais si vous voulez changer cela, une gouttière apparaîtra Disons que nous en avons deux. Vous voyez maintenant que nous avons une gouttière de 20 pixels et si nous l'augmentons, cela augmente également Maintenant que notre écran est configuré, commençons par concevoir la barre de navigation. Ce qui se trouve dans la barre de navigation, c' est essentiellement votre logo et tous les liens importants vers lesquels vous souhaitez que tous les liens importants vers lesquels vous souhaitez que votre utilisateur navigue sur le site Web Pour un site Web de portfolio, cela se traduit par la première chose que vous aurez, c'est votre nom. Pour le site Web de votre portfolio, l'identité est essentiellement votre nom. Ensuite, nous pouvons avoir des liens vous concernant. Nous pouvons également avoir des liens indiquant où vous contacter Si vous avez un LinkedIn, bla, bla , peu importe ce que vous voulez ajouter, vous pouvez commencer Commençons par le logo. Ici, je vais mettre le logo très simple. Ça va être un texte très simple, John Doe, passons-le ici. Maintenant, ce que nous pouvons faire, c'est lui donner une police différente. Mais pour le moment, je vais juste choisir J'aime bien cette police, en fait. En fait, j'aime beaucoup cette police, mais vous pouvez aussi commencer par Inter. Inter est une police méchante, géniale. J'adore ça. Et puis vous pouvez également jouer avec le poids, le poids de la police. Donnons-lui donc un peu de variété. Vous pouvez avoir la moitié du nom en gras, puis l'autre moitié, nous pouvons l'avoir en gras. Disons. Ensuite, nous pouvons également ajuster l'espacement. Ça a l'air très beau. Si vous voulez vérifier l'espacement, il vous suffit de sélectionner l' élément, d'appuyer sur Alt et déplacer votre c de l'endroit où vous voulez voir l'espacement et il vous indiquera que c'est 57 Passons à 64 parce que c'est un multiple de quatre ou huit, selon ce que vous voulez. Ouais. John Doe, nous avons notre logo ou le premier élément de la carte. Faisons juste quelques liens. Sur moi ou sur moi, vous pouvez simplement écrire à ce sujet. Faisons en sorte que ce soit un traitement plus léger, et ce ne sera pas si grave. Je suppose que 24, je suppose que 32 l'étaient. Et aussi, restons à zéro pour moi ou peut-être pourrions-nous le réduire un peu plus et le remplacer par un A normal . Je trouve que cela a l'air bien parce que ce n'est pas très bruyant, mais en même temps, cela n'est pas caché. Tout ce que nous faisons, c'est de trouver un équilibre visuel entre tout. Ensuite, nous allons simplement le copier-coller et le contacter. Maintenant, vérifions l' espacement, cliquez ici, appuyez dessus et passez simplement le pointeur de la souris dessus Vous pouvez simplement vous déplacer et vous pouvez voir un espacement différent Donc, en gros, nous avons maintenant la lecture du NaBBA. Vous pouvez jouer dans la monture prototype. Tu peux juste voir à quoi ça ressemble. C'est l'option de présentation. Elle ouvrira la présentation et vous montrera essentiellement à quoi ressemble tout cela, ce que vous avez conçu jusqu'à présent. Ça a l'air bien. Je pense juste que nous avons besoin de plus d' espacement des deux côtés. Faisons en sorte que ce soit 48. Maintenant, quand nous revenons, ça a l'air bien. Nous pouvons également essayer de l' aligner sur cela. Nous l'avons donc déjà positionné et voyons à quoi il ressemble maintenant. Ça a l'air bien. Nous pouvons donc maintenant passer à autre chose et commencer à concevoir le reste de la page. 4. Conception de la page d'accueil Partie 2: Mettons donc quelques informations ou une introduction sur la personne. Disons bonjour. Je suis un designer UI Qx travaillant chez Google. Google. Je conçois des interfaces amusantes et agréables à utiliser simplifient la vie des gens. Nous avons donc écrit une introduction d'un litre sur la personne, voyons juste combien et voici à quoi elle ressemble Pas mal. Ça a l'air bien. Maintenant que nous avons utilisé le nom de l'entreprise Google. Mettons également simplement le logo Google. Je veux dire, c'est ajouter une petite touche. Ces petites choses feront donc toute la différence. Logo Google SIG. Ça fait éclater quelque chose. Maintenant, nous sommes là. Utilisons ce logo et je viens de le copier-coller ici. Maintenant, vous pouvez voir, je veux dire, cela ajoute une petite touche de couleur. Alignons-le simplement. Et si on peut l'agrandir, c'est parfait. Maintenant, c'est un arrangement très basique, mais jouons avec et essayons de voir comment nous pouvons réellement fabriquer ce bâton dans un endroit où il semble, je veux dire, cela n'a pas l'air étrange. En ce moment, il se passe beaucoup de choses ici. Ce logo et ce logo sont très contradictoires. Essayons donc de le supprimer et de faire de la place ici. Que diriez-vous de tout déplacer vers le bas ou vers le haut , de le réduire un peu, puis de le mettre ici. Maintenant, vous verrez que cela a l'air plutôt beau, et cela n'a pas l'air déplacé. Mm. Parfait. Donc ça a l'air bien. Maintenant, allons-y aussi. Oui, ça a l'air mieux. Le design UOI consiste essentiellement à déplacer des objets jusqu'à ce vous sentiez que cela a du sens ou que cela a du sens. En tant que designers, nous passons beaucoup de temps à déplacer objets ici et là jusqu'à ce que tout ait un sens. Nous faisons des allers-retours voir ce que nous avons fait et à quoi cela ressemble. C'est amusant. Gardons-le sur deux lignes et groupons-le. Quel est le groupe si je déplace simplement ceci, vous verrez que ce sont deux choses différentes. Si je veux tout déplacer en même temps, il suffit de faire glisser et de tout sélectionner, puis d'appuyer sur Ctrl G. Cela regroupera ces deux éléments dans un seul groupe. Maintenant, quand je déplace ça, tout. Avançons ensemble. Tu vois ? 128 c'est bien. Mettons-nous juste à l'écart. C'est une bonne chose. Passons maintenant à la création des pièces du portfolio et à la manière dont nous allons les créer. Commençons d'abord par mettre quelques blocs. Deux blocs, on peut mettre deux blocs, on peut sélectionner les deux et on peut le faire en taille réelle. Maintenant que nous avons placé les blocs là où nous voulons que les pièces du portefeuille soient placées. Trouvons juste quelques designs de Dibble ou je ne sais pas. Peut-être que nous utiliserons, euh, ce que vous dites, Unsplash Quand on passe aux plugins, vous pouvez voir dans les plugins que vous obtenez Unsplash comment vous y arrivez, c'est-à-dire que vous pouvez accéder à gestion des plugins et simplement y ajouter du splash Alors lançons Splash, il viendra et nous lui donnerons un design d'interface utilisateur. Voyons si ça nous rapporte quelque chose. Cela nous apporte beaucoup de choses. Utilisons-le simplement parce que c'est essentiellement Figma et nous allons l'utiliser Donc, quand je clique, cela a en quelque sorte appliqué cette image à cette boîte. Maintenant, si je sélectionne la deuxième case, donnons-lui une autre image, utilisons simplement une très bonne image accrocheuse. Mm. Lequel utiliserez-vous ? Encore une fois, quand j'ai dit que nous passions beaucoup de temps à déplacer des éléments ici et là, nous passons également beaucoup de temps à sélectionner des images et nous passons également beaucoup de temps à passer d'un formulaire à l'autre juste pour voir quelle police sera la plus belle. J'ai vraiment du mal à sélectionner l'image qui doit être cohérente. Mais juste pour faciliter les choses, choisissons celui-ci car il s' agit d'une image d'écran. Et maintenant, vous voyez, nous avons deux images et quand je passe à notre critique, vous voyez, maintenant nous avons le Navba, le contact, les liens, en gros, une petite introduction et aussi deux des Mais pour le moment, ces deux images ne nous donnent aucune information sur ce que sont ces images. Nous devons ajouter quelques détails supplémentaires à ces images. Voyons comment nous allons procéder. Tout d'abord, si vous le souhaitez, vous pouvez simplement les envoyer par la poste les coins sont très nets en ce moment. Les angles vifs sont fondamentalement acceptables. Mais la tendance est aux angles arrondis. Tout, des Apple aux iPhones en passant par toutes les interfaces que vous pouvez voir sur mobile Tout le monde a des coins arrondis, donnons juste un peu de rondeur aux coins. Excusez-moi. L'option que nous allons utiliser est le rayon d'angle, et c'est à cet endroit que nous allons en mettre quatre et voyons quels sont ces deux-là. Cela a arrondi les coins de quatre pixels. Maintenant, quand nous allons ici, nous pouvons voir ces looks arrondis, beaux, beaux. Commençons maintenant par ajouter un peu de contexte à ces blocs d'images, à ce qu'ils sont. Si tu veux, tu peux juste les fabriquer. Restons-le un peu plus court. Et la raison pour laquelle je vais vous dire pourquoi c'est que chaque fois que quelqu'un accède à un site Web, si quelque chose ne va pas, cela lui indique que la page contient plus d'informations et qu'il doit faire défiler la page vers le bas pour voir plus de contenu. Sinon, s'il y a un écart et que cet écart se situe exactement là où se termine cette fenêtre, ils ne sauront jamais qu'il y a quelque chose en bas de la page et ils ne feront jamais défiler Ajoutons maintenant quelques éléments ici. Donc, la première chose que nous allons ajouter ici est le nom du projet. Hum, disons. Donc, en gros, je veux lui donner un nom où il indique immédiatement ce que vous avez fait. Euh, concevoir Pigma ou des designers. Donc, en gros, cela n'a aucun sens parce que cette personne a travaillé chez Google, mais maintenant j'ai utilisé quelque chose de Pigma, et je suis vraiment désolée que cela n'ait aucun sens Alors changeons simplement. Changeons ou peut-être que nous le pouvons parce que je veux dire, cette personne, disons qu' elle travaillait chez Sigma pour Google Donc oui, c'est logique. Oui, je me suis trompé. Oui. Pour les designers, allons-le un peu plus petit et à quoi ressemble-t-il ? Pas mal, mais nous pouvons continuer à le faire quelque chose comme ça. Ou nous pouvons le laisser tomber un peu plus et simplement l'utiliser. 24. C'est 16. Parfait. Designing Figma pour les designers De plus, si vous le souhaitez, vous pouvez également en ajouter un peu plus sur l'ensemble de ce projet. Comment expédions-nous le nouveau design de PGM avec mode profondeur pour l' événement Pig Mas 2024. Je veux dire, c'est juste que je l'ai inventé, mais tu as compris, non ? Nous l'avons donc maintenant. Je peux passer à deux lignes. Donc, en gros, il peut également avoir en une seule ligne. Donc, en gros, il s'agit simplement d'ajouter du contexte. Mettons simplement les choses en place et nous allons agir très rapidement pour les réaliser. C'est bon. Nous avons donc ajouté un peu d'intron Vérifions-le. Et nous avons besoin de certaines informations pour montrer qu'il s'agit d'un lien et qu'ils peuvent cliquer ici et partir Créons un petit bouton avec, disons, ouvrir ou afficher. Tapons simplement view, puis nous pouvons également lui donner une flèche. Commençons donc par lui donner un fond. Encadrons simplement cela. Lorsque nous l'encadrons, nous pouvons simplement contrôler le trait que nous pouvons donner et nous pouvons également contrôler la taille de celui-ci. Vous pouvez le voir ici. Et en gros, ce qui s' est passé, c'est que cela devient une mise en page lorsque nous lui donnons un cadre en ce moment, c'est une forme libre. Il n'y a donc pas de rembourrage ou d'intégration. Ce que nous allons faire, c'est le changer en horizontal. Une fois que nous l'avons changé en horizontal, vous pouvez voir que quelques autres options se sont ouvertes. C'est quoi ça ? Il s'agit de notre rembourrage horizontal et il s'agit de notre rembourrage vertical En gros, cela va ajouter de l'espace à l'intérieur du conteneur. Donc, lorsque je l'augmente, vous voyez que cela ajoute de l'espace à l'intérieur du conteneur et aussi ici. Maintenant, ce que nous allons faire , c'est essentiellement lui donner un avantage arrondi. Maintenant, cela ressemble beaucoup à un bouton. Et vous pouvez utiliser n'importe quoi à la place de l'affichage ou simplement n'importe lequel, mais il existe certaines directives, certaines meilleures pratiques en matière d'interface utilisateur ou d'écriture d'expérience utilisateur. Vous pouvez suivre cela, mais je ne vais pas entrer dans les détails. Tout ce que vous allez utiliser pour votre site Web, utilisez-le simplement. Maintenant, vous voyez, donnons-lui le temps de se rafraîchir. Maintenant c'est joli. C'est joli. Maintenant, ils savent qu'il y a un lien qui est vue, maintenant Figma a une chose, qui s'appelle autoayout Ce que cela va faire, c'est tout mettre dans un style de mise en page. C'est donc plus facile pour vous lorsque vous espacez. Par exemple, je l'ai déjà espacé de quatre pixels, euh, si je clique sur les deux et que j' appuie sur Shift A. Cela l'ajoutera dans un cadre et en gros dans la mise en page extérieure, et il détectera automatiquement quel devrait être l'alignement À l'heure actuelle, ces deux éléments sont empilés verticalement. Il s'ajoutera verticalement. Voyons maintenant ce qui se passera si je sélectionne ceci et ceci , puis que je clique sur Shift A, qui est un adolon, cela signifie automatiquement que maintenant tout ce morceau et ce bouton sont empilés horizontalement et que tout est correctement aligné et aussi, si vous voyez si je change l'alignement, cela changera l'alignement Maintenant, ce que je peux faire, c'est simplement copier et coller ceci ou un autre. Et disons que si je veux réduire l'espacement, vous pouvez voir que je peux simplement utiliser cette icône là où il y a écart horizontal et cela me donnera 48 Mais supposons simplement que nous optons pour ce design. Donc, si quelque chose a un titre plus petit, ce bouton ne sera pas aligné correctement et dans chaque vignette, le placement sera très différent Alors gardons les choses telles qu'elles étaient avant. titre et ce sous-titre commencent donc à l'extrémité gauche et le bouton est aligné vers la droite. Continuons comme ça. allons donc maintenant développer cela et maintenant nous pouvons simplement tout copier-coller et dupliquer. En gros, maintenant nous avons quatre cravates, changez les photos. Je vais à nouveau lancer le plugin Unsplash. Et disons que je dessine, donnons simplement ceci. Disons, monsieur, que dois-je lui donner ? En tant que tel. Ils ont déjà utilisé celui-ci. On ne peut pas utiliser ça. N. Nous n'obtenons pas de bonnes images. Je pense que cela prendra beaucoup de temps si je continue à chercher de cette façon. Nous n'utiliserons donc que quelques images aléatoires pour le moment, mais assurez-vous que vous utilisez absolument les meilleures images pour votre portfolio. Et je suppose que celui que nous avons obtenu est le bon. En gros, nous avons maintenant notre grille de pièces de portefeuille. Donnons également un peu de contexte ici, quoi nous examinons exactement examinons examinons certaines œuvres. Ainsi, chaque fois que vous avez un texte plus long que vous souhaitez simplement raccourcir, double-cliquez simplement sur ce bord, et il le raccourcira exactement là où se trouve le texte. Alignons-le également 32, c'est bien. Voyons à quoi ça ressemble. Ça a l'air bien. Voyons si nous pouvons le changer en moyen. Oui, je trouve que ça a l'air bien. Cela fonctionne. Voyons quel est l'espacement ici. Ça va. Environ 88. OK. Maintenant, quand nous venons ici, nous voyons que c'est bien. Nous avons la barre de navigation, ou nous pouvons aussi faire une chose Nous pouvons libérer de l'espace et pousser légèrement la barre de navigation vers le haut Gardons-le 32. Maintenant que vous voyez cela un peu d'espace, je veux dire que nous ne pouvons pas le voir. Ce que je vais faire, c'est aller un peu plus loin. Voyons voir, 64. Maintenant, vous voyez que du texte est visible et nous allons simplement le laisser là. Ou si je peux juste essayer de le déplacer vers le haut. Voyons 96 96. Voyons une petite chose rapide. Pour cette vue, nous lui avons accordé un traitement particulier, alors que pour ces liens, il s'agit de simples liens Ce que nous pouvons faire, c'est rendre les liens un peu différents en termes de couleur ou de forme. Donc, en gros, à cet endroit, il ne sera visible lorsque quelqu'un survolera le bouton Donc, pour le moment, nous n'allons pas entrer dans le détail et faire différents états du bouton. Nous ne concevons pas les différents états en fonction de son apparence active ou de son apparence. Donc, ce que je vais faire c'est juste lui donner une petite touche de couleur. Utilisons donc simplement la couleur, qui attire essentiellement votre attention Utilisons-le simplement. si nous utilisions la même couleur, cela aurait-il l'air bien ? Je ne pense pas que ça aura l' air bien. Je ne sais pas. Ça a l'air d'aller bien. Ça a l'air d'aller bien. Vous pouvez également utiliser ce bouton. Mais maintenant que nous l'avons fait, voyons si nous pouvons opter pour une couleur légèrement différente. Euh, mettons juste ce bleu foncé. Oui. Je pense que cela fera l'affaire. C'est très bien. Maintenant que nous avons changé à un endroit, nous pouvons simplement contrôler C, puis aller ici et coller pour remplacer. Cela va faire, c'est coller ceci en remplaçant l'ancien bouton. Permettez-moi de faire la même chose à l' autre. Et maintenant, notre page ressemble à ceci. Cela indique clairement qu'il s'agit d'un bouton et que ce sont également des liens auxquels l'utilisateur peut accéder Notre page est donc presque terminée. Ce qui doit être fait ensuite, c'est le pied de page. Le pied de page n'a pas besoin d'être très élaboré. Cela peut être très minime. Pour cela, nous voulons essentiellement donner un pied de page très basique, euh, probablement le nom, pas le nom, peut-être les coordonnées où quelqu'un peut rapidement contacter l'adresse e-mail ou le numéro de téléphone 5. Conception de la page d'accueil Partie 3: Alors allons-y aussi. Réduisons-le donc un peu plus et changeons de couleur pour lui donner un séparateur horizontal afin de tout diviser C'est bon, comme ça a l'air. Je pense que ça a l'air bien. C'est juste que nous devons diminuer la taille. Maintenant, ça a l'air bien. Je pense qu'il a juste besoin d'un peu plus d'espacement, et je pense que ça a l'air bien Finissons le potier rapidement et notre page sera terminée. Et avec cela, je pense que nous sommes de retour sur la bonne voie. Allons simplement dire bonjour sur no.com. Le téléphone doit être réduit à 12, disons, qu'il soit beau. Ça a l'air bien. Nous pouvons également mettre le numéro de téléphone plus 91 un, un, deux, trois, quatre, cinq, six. Si vous allez ici, nous pouvons voir maintenant que nous avons les coordonnées et que nous pouvons jouer avec le placement. Mais en gros, pour cela, vous pouvez simplement utiliser un encombrement très minimal ou inférieur pour le pied de page Alignons-le simplement. Voyons voir maintenant. Je trouve que ça a l'air bien. Vous voulez pouvoir en ajouter un peu plus en utilisant certaines icônes et en utilisant la façon dont vous les ajoutez. Encore une fois, allez dans Plugin, et si vous n'avez pas de plugin, vous pouvez y aller. Je vais juste vous montrer comment ajouter un plugin. Allez à la page d'accueil. Et depuis chez vous, vous pouvez voir qu'il existe un onglet appelé Communauté. Et lorsque vous accédez à Community, vous pouvez voir que vous avez des plugins. Et si vous recherchez simplement une icône, vous obtiendrez de nombreux plugins différents. Quand vous voyez qu'il y a un onglet pour le plugin au fur et à mesure que je me branche, je peux simplement l'ouvrir ou simplement et être ajouté à ce plug-in. J'ai déjà quelques plugins pour les icônes. J'utilise beaucoup Fs pour les icônes et je les aime vraiment. Mettons-les simplement en tas. Maintenant, OK. Voyons juste quel type nous voulons. Nous voulons un homme ordinaire et nous avons notre icône masculine ici. Donc, peu importe ce que vous voulez utiliser, je vais juste utiliser celui-ci. Nous avons aussi Pow. Pour le pion également, nous utiliserons ICA. Utilisons celui-ci. heure actuelle, quand je fais glisser et déposer, suffit de glisser-déposer, mais pas à l'intérieur ce DetptFrame, je vais simplement le retirer à l'extérieur et le déplacer Maintenant, il est dans ce bureau. Réduisons-le simplement. À l'heure actuelle, c'est 24 x 24 pixels et ça aussi. Ce que nous allons faire, c'est le réduire à 16 x 16 pixels. Et lorsque vous marchez avec, euh, des ratios fixes vous pouvez simplement cliquer sur ce bouton. Je vais verrouiller ou déverrouiller le rapport hauteur/largeur. heure actuelle, comme nous avons une icône, celle-ci est déjà verrouillée. Parfois, vous l' aurez déverrouillé et lorsque vous en augmenterez un, l'autre n'augmentera pas car il est déverrouillé Ce que vous devez faire, c'est que si vous ne l' avez pas activé, il suffit de l'activer. Maintenant, lorsque vous modifiez le premier, le second sera automatiquement modifié. Même chose avec ça. Et ce que nous allons faire, c'est simplement, euh, sélectionner ceci et cela et Shift Control, appuyer sur Shift A, ce qui ajoutera les deux dans la mise en page automatique. La mise en page automatique est juste un moyen plus rapide d'aligner les éléments et de laisser de l'espace entre tout Vous n'avez donc pas à simplement utiliser vos boutons pour déplacer des objets. Euh, ici et là, je vais simplement appuyer sur Shift A pour l'ajouter à la mise en page automatique et vous pouvez voir que l'espace entre les deux est de cinq, je vais simplement le réduire à quatre et tout est aligné Il en va de même pour ça. Voyons comment cela va fonctionner. Si je continue, puis que je sélectionne et appuie sur Auto yout, vous verrez que tout sera aligné , mais l'espace est toujours grand Je peux donc simplement cliquer ici, appuyer sur quatre et c'est fait. Maintenant, je vais appuyer à nouveau sur Shift A. Maintenant, vous voyez que tout s'aligne. L'espacement, 16, mettons-le là. Même chose pour voir si ça a l'air bien. Nous allons vérifier l'espacement. Gardons-le 24 Pi et aussi 24 ici. Nous allons maintenant supprimer l'espace supplémentaire et il vous suffit de cliquer avec le bouton droit de la souris. Lorsque vous cliquez avec le bouton droit de la souris, le cadre est sélectionné et vous voyez que lorsque j' arrive sur le bord, l'icône du curseur change, puis appuyez sur la touche Ctrl, puis déplacez-la vers le haut. Maintenant ce que vous avez, laissez-le simplement s'actualiser et maintenant voici ce que vous avez, je vais simplement le déplacer. Je vais m'installer quelque part ici. Maintenant, vous avez un pied de page très minimal, ce qui semble bien Vous avez donc votre nom ainsi que l'e-mail et le numéro. Très minimal, très facile. Et c'est ainsi que vous créez une page d'accueil très simple pour la conception d'un site Web de portfolio. Donc, dans le chapitre suivant. Ce que nous allons faire, c'est également concevoir une page à propos et pour le contact, nous pouvons concevoir un formulaire ou simplement, si vous le souhaitez, vous pouvez simplement l'ajouter ou le lier à LinkedIn, ce qui fonctionne très bien, je crois. Concevons également une autre page sur la page et vous aurez alors un site Web minimal très basique pour votre portfolio. Je suppose que vous vous amusez bien jusqu'à présent, parce que je m'amuse beaucoup à le concevoir. C'est donc très rapide, très facile. Et vous pouvez simplement commencer à ajouter les vôtres, vous savez, différents ajustements de conception et différentes petites choses et simplement Donc oui, j'ai vraiment hâte. 6. Concevoir la page À propos + prototypage: Bon retour. Maintenant que nous avons créé notre page d'accueil, allons-y et créons une autre section de la page A. Oui. Nous allons donc commencer par simplement dupliquer ce TextOpt et ce que nous faisons, c'est garder tous les guides et tout le reste intacts, et nous allons simplement supprimer les éléments que Nous n'avons pas à supprimer la barre de navigation et nous n'avons pas non plus à supprimer le pied de page Maintenant que nous avons tout supprimé. À quoi devrait bien servir la page « About me » ? En gros, votre photo dans la tête et écrivez pour expliquer qui vous êtes, et c'est quelque chose qui sera personnel à chaque personne. Donc, si vous travaillez, disons, en tant que photographe, l'intro ou le texte de la section À propos de moi seront différents pour vous En gros, vous devez juste passer un peu de temps et, vous savez, écrire pour que cela reflète qui vous êtes. Nous allons commencer par ajouter un headshot. Faisons simplement un rectangle ici. Et si je crée un rectangle, c'est parce que je veux mettre une image à l'intérieur de ce rectangle. Il suffit donc de le sélectionner, accéder aux plug-ins, et encore une fois, nous utiliserons le plugin Splash. Portrait droit. Voyons voir, le nom est John Doe, nous allons donc sélectionner quelque chose qui reflète John Doe. Trouvons donc quelque chose qui soit beau. Que diriez-vous de quelque chose d' amusant que je recherche. Devrions-nous simplement l'utiliser ? Peut-être que nous pouvons y aller. Nous pouvons utiliser celui-ci. Il y a un joli bouquet à l'arrière. Utilisons-le. Vérifie l'espacement. Nous allons le déplacer vers, je suppose que dans le précédent, nous avons l'espacement à 96 Nous en ferons 96 ici également. Maintenant, ce que nous allons faire, c'est mettre un paragraphe vous expliquant en quoi consiste ce John do. Ce que nous allons faire, c'est ajouter du texte, appuyer sur T ou vous pouvez simplement venir ici, cliquer ici sur le bouton Et ce que nous allons faire ici, c'est cliquer et faire glisser. Ce qu'il va faire, c'est mettre une zone de texte. Mettons donc une zone de texte ici et j'écrirai juste quelque chose Lam Epson Cela donne quelque chose. J' ai écrit ceci parce que je voulais utiliser disons que nous utiliserons l'IA pour le réécrire Figma dispose désormais d'une capacité d'IA intégrée, vous pouvez donc l'utiliser Cette fonctionnalité s'appelle Rewrite this et je vais juste lui donner un petit paragraphe d'introduction rapide pour la page à propos de moi de John of UI UX designer travaillant chez Google Il s'appelle John Doe. Voyons s'ils peuvent le réécrire. Et cela prendra du temps et cela vous donnera tout à fait ce qu'il faut, je crois. Utilisons-le simplement. Ce que je vais faire, c'est simplement augmenter l' espacement entre les lignes Faisons-en un à 50 %. Nous essayons juste de remplir une partie de l'espace. Donnons-lui un peu d'espace. Nous avons donc maintenant notre page qui ressemble à ceci. Et vous pouvez voir que ça a l'air bien. Ça a l'air bien. C'est simple et ça va et vient avec à peu près la page d'accueil que nous avons conçue. Ce que nous pouvons également faire, c'est ajouter quelques informations de contact, par exemple , vous pouvez m'écrire à John doe@gmail.com. Quelque chose, quelque chose comme ça. Très basique, euh, très minimal. Vous pouvez également essayer de le réduire un peu pour qu'il remplisse cet espace et ajoute un peu plus d'espace blanc. Donc oui, et tous les autres liens que vous devez ajouter, vous pouvez simplement les ajouter ici. Si vous souhaitez également présenter des objets personnels, comme des photos de loisirs, vous pouvez également les mettre ici. Mais pour l'instant, je ne vais pas le faire. Mais vous pouvez trouver sur le Web de nombreuses sources d'inspiration différentes pour ce de l'apparence d'un site Web. Je vais juste le donner et c'est presque terminé. Ce cours ne visait donc pas à en faire plus, mais simplement à concevoir quelque chose qui soit beau et que vous puissiez faire en très peu de temps, tout en ayant l'air très beau et réalisé de manière professionnelle. Une autre chose que nous devons faire est lorsque vous êtes déjà sur la page à propos, il n'y a pas de distinction claire entre le lien actif et le lien par défaut. Nous allons donc simplement y ajouter, disons, un rectangle afin que les gens puissent savoir qu' ils se trouvent sur cette page. Il existe de nombreuses façons de le faire, mais c'est la plus simple et la plus rapide Vous pouvez également essayer de mettre un trait comme nous l'avons fait sur ce bouton d'affichage et d'afficher le trait actif comme ça. Mais pour l'instant, je vais m'en tenir à ça. Et pour ce qui est du contact, je pense qu'au lieu de cela, nous pouvons simplement le remplacer par LinkedIn afin que de nombreuses informations de contact soient déjà fournies sur le site Web, mais nous voulons simplement permettre aux recruteurs d'accéder plus facilement au LinkedIn Nous venons de nommer LinkedIn. Nous allons également le faire ici. Nous l'appellerons LinkedIn. Et nous l'avons ici. C'est notre page d'accueil, et c'est ainsi qu'elle a l'air très propre, très minimale. Pendant que nous faisons cela, faisons juste un peu de prototypage Ce que nous allons faire, c'est arriver à l'onglet Prototype, et ce que nous allons faire, c'est maintenant vous pouvez voir que partout où je survole, vous verrez cette icône plus Disons que si vous le souhaitez, il s'agit d'un groupe. Ce sera lié en tant que groupe. Donc, si vous voulez simplement entrer, double-cliquez simplement pour accéder au A. Je vais simplement faire glisser et vous verrez une flèche sortir et je vais simplement la pointer vers ce texte de trois, qui signifie qu'il est ce qui signifie qu'il est maintenant lié à cette page. Nous avons quelques options d'interaction, comment l'interaction se déroulera. Ce sera soit un clic, soit un retard, soit autre chose. Pour le plus simple , nous utiliserons onclick et nous garderons onclick et nous tout exactement comme ça Maintenant, lorsque vous revenez à votre présentation, voyez si vous cliquez sur, vous verrez cette boîte apparaître sur A, qui signifie qu' un lien de prototype actif part de A. Lorsque je clique sur À propos, vous voyez la page changer. Il s'agit essentiellement de lier des pages, comme vous le faites sur un vrai site Web, et c'est ainsi que vous l'avez fait. Mais nous avons également besoin d'un moyen de revenir à la page d'accueil. Ce que nous allons faire, c'est sur ce logo, nous allons simplement le renvoyer à la page d'accueil. Maintenant tu l'as. Maintenant, quand je clique ici, je suis de retour ici. N'est-ce pas cool ? Si vous débutez avec FigMa, il vous faudra un certain temps pour vous familiariser vraiment avec le prototypage ou simplement l'utilisation de la dent Je suppose que c'est ce que nous voulions aborder dans ce cours. Je proposerai peut-être un cours plus long avec des fonctionnalités plus avancées, mais sachez simplement que ce cours a été conçu pour un exercice de conception très basique et très rapide que vous pouvez faire et créer votre site Web de portfolio. Si vous avez des questions, vous pouvez simplement commenter Skillshare ou simplement m'écrire une requête De plus, je vous invite vivement à créer votre propre projet et publier dans la section des projets afin que je puisse voir les choses géniales que vous faites. Si vous avez besoin d'aide, je serai disponible pour vous faire part de vos commentaires. Quoi que vous fassiez, je vous ferai part de mes commentaires. Alors, s'il vous plaît, publiez vos projets, et j'ai hâte de tous les voir . Merci beaucoup et j'espère que cela vous a plu. Si vous regardez ce cours pendant le Nouvel An ou à Noël, je vous souhaite un très joyeux Noël et une très bonne année Merci beaucoup d' avoir suivi ce cours. Au revoir. 7. Merci: Nous sommes donc arrivés à la fin du cours et j'espère que vous avez aimé apprendre et que vous travaillez déjà sur la conception de votre site Web de portfolio. Donc, si vous avez conçu quelque chose, j'aimerais le voir et si vous avez besoin d'aide ou de commentaires, je me ferai un plaisir de vous les fournir également. Donc, pour le projet de classe, je veux que vous téléchargiez le design sur lequel vous travaillez ou que vous avez déjà terminé, et si vous avez le moindre doute, hésitez pas à me le demander. J'espère que cette nouvelle année sera très joyeuse et productive pour vous. J'ai donc beaucoup de plaisir à vous donner ce cours et j'espère que vous avez apprécié la même chose. Merci beaucoup et bonne journée.