Comment créer un portfolio UX et se faire remarquer | Jasmine Jones | Skillshare
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Comment créer un portfolio UX et se faire remarquer

teacher avatar Jasmine Jones, UX Designer

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Intro

      1:12

    • 2.

      Introduction personnelle

      3:16

    • 3.

      Introduction du projet

      1:31

    • 4.

      Étude de cas

      8:09

    • 5.

      Concevoir et publier avec Squarespace

      6:13

    • 6.

      Concevoir et publier avec Webflow

      7:08

    • 7.

      Conclusion

      0:20

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

1 571

apprenants

3

projets

À propos de ce cours

Dans ce cours, vous apprendrez ce qu'il faut pour créer un portefeuille UX successful Un excellent portfolio est de loin l'un des aspects les plus importants de la prise dans le design UX/UI All les gens sont négligés, car leur portfolio représente mal leur travail et leur personnalité. Laissez votre travail en montrant vos meilleurs travaux de la meilleure manière possible. Vous apprendrez l'anatomie d'un portefeuille UX/UI qui vous permettra d'être engagé. Nous verrons les composants clés que les entreprises cherchent et comment les donner vie avec la mise en page et le design.

Rencontrez votre enseignant·e

Teacher Profile Image

Jasmine Jones

UX Designer

Enseignant·e

Hey there, I'm a Jasmine. I design software and applications. I'm currently working at Starbucks helping connect people with their much needed morning coffee. Originally from southern United States, I moved to the west coast to work on cool projects at awesome places. On my journey, I've learned a lot about entering the UX design field. There's so much I wish I would have known, now I hope to share all I've learned. 

Voir le profil complet

Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Intro: Bienvenue pour créer un portefeuille UX et vous faire remarquer. Je suis Jasmine. Je suis un concepteur UX/UI vivant à Seattle, et j'ai de l'expérience dans des entreprises telles que Starbucks et Microsoft. La chose qui a été mon point d'entrée pour obtenir des entrevues et même être embauché, a été mon portefeuille. Non pas parce que c'est le travail le plus magnifiquement conçu, mais parce qu'il met en valeur moi-même et mon processus UX. Plus que jamais, entreprises ont besoin de voir comment vous créez un projet du début à la fin. Dans ce cours, nous allons passer en revue étape par étape tous les éléments clés dont vous avez besoin dans votre portefeuille ; comment le présenter, le publier et regarder de superbes exemples. Je vais également partager des conseils de conception et de publication en utilisant Webflow et Squarespace. Pour rendre tout aussi simple que possible, j'ai créé une feuille de calcul dans laquelle vous pouvez entrer votre propre contenu pour vous aider à démarrer. N' hésitez pas à partager votre portefeuille à tout moment pour obtenir des commentaires. 2. Introduction personnelle: La première section de votre portfolio sera votre introduction personnelle. C' est vous qui vous présentez à votre employeur potentiel. Vous voulez parler un peu de vos compétences, expérience passée, et un peu de votre personnalité. C' est génial d'ajouter une photo. Gardez à l'esprit que les entreprises embauchent des personnes, donc elles veulent avoir une idée de qui vous êtes et de ce que vous pouvez faire. Une chose à garder à l'esprit est la position UX qui vous intéresse. Vous devriez adapter votre portefeuille aux personnes avec lesquelles vous voulez travailler dans les industries dans lesquelles vous voulez travailler. Si vous voulez être un concepteur d'interaction, vous devriez adapter votre portefeuille pour mettre en évidence ces compétences en particulier, une grande chose à faire est de rechercher une offre d'emploi actuelle sur LinkedIn. Vous pouvez voir ce qu'ils recherchent spécifiquement en termes d'expérience et de compétences, et assurez-vous de les mentionner dans votre introduction personnelle. Votre introduction personnelle comportera deux éléments clés. Le premier est votre titre. Votre titre sera composé de votre nom, de votre lieu de résidence et de votre rôle UX préféré. C' est là que vous voulez faire beaucoup de recherches sur, dans quelle partie du processus UX vous voulez être impliqué. Voulez-vous être plus du côté de la recherche ou peut-être du côté de la conception visuelle. J' ai une liste de nombreuses options différentes ici dans la feuille de calcul pour vous aider à commencer. Assurez-vous de faire des recherches si vous n'êtes pas familier avec certains de ces termes. La deuxième composante de votre introduction personnelle est votre description. C' est la majeure partie de votre introduction personnelle. C' est là que vous allez entrer un peu en détail sur vos compétences, votre expérience et votre personnalité. Une chose clé à savoir est que beaucoup de personnes qui regardent votre portefeuille sont en fait des recruteurs. Le département UX va donner à un recruteur une liste des exigences, généralement une liste des compétences des choses qu'il recherche. Ensuite, ce recruteur va examiner votre portefeuille pour voir si vous correspondez à certaines de ces compétences. Assurez-vous de regarder une liste. Celui que j'ai ici dans la feuille de travail est un bon endroit pour commencer sur différentes compétences UX générales que vous devriez penser. Reportez-le à votre recherche et voyez ce que les différentes entreprises et les différents rôles recherchent également. La plupart du temps, ils correspondent à ce que le recruteur cherche. Dans la feuille de calcul. J'ai un modèle où vous pouvez entrer votre propre contenu pour vous aider à commencer avec une auto-description. Fondamentalement, vous entrez simplement vos propres informations dans les champs en surbrillance bleu. N' hésitez pas à changer ce modèle comme vous le souhaitez. C' est juste pour vous aider à commencer au cas où vous n'auriez aucune idée de quoi écrire. Voici un excellent exemple d'introduction personnelle. Voici le portefeuille UX de Tom Petty. Il commence par une belle photo de Tom qui donne une conférence, suivie du titre de Tom, qui est cette phrase échangeable qui explique ce que fait Tom, tels que les produits de conception, les services, etc. peu de détails sur ce que Tom a fait, choses qu'il aime faire, et une brève description de ce que vous pouvez trouver dans son portefeuille. C' est un excellent exemple pour vous aider à démarrer. Il a également un design très propre et simple. 3. Introduction du projet: Après votre introduction personnelle, vous voulez avoir une liste de tous les projets sur lesquels vous allez faire une étude de cas. Ce sera une liste d'environ 3 à 5 projets au total. Vous voulez brièvement mentionner un peu le projet et ensuite avoir un lien vers l'étude de cas. Examinons brièvement une liste de contrôle de toutes les choses que vous devriez inclure dans l'introduction de votre projet. Tout d'abord, vous voulez avoir un titre du projet. Ce sera probablement juste le titre du produit lui-même. Ensuite, vous voulez avoir pour qui vous avez fait ce projet, soit votre employeur, votre client ou peut-être même vous-même, alors vous voulez avoir la durée nécessaire pour terminer le projet. Ensuite, la chose la plus importante est une description du projet. Cela devrait être d'environ trois phrases longues où vous discutez brièvement de ce que c'est. En outre, vous voulez avoir un lien, juste en bas, vers l'étude de cas elle-même. Tout cela devrait aller avec une photo. La photo doit être de haute qualité. Il pourrait même s'agir d'une vidéo ou d'un gif, mais rien de trop profond, juste assez pour attirer notre attention et nous donner envie cliquer pour en savoir plus dans l'étude de cas. Ce sont là de très bons exemples d'introduction d'un projet. Remarquez comment ils ont tous des photos de haute qualité, un titre clair en gras, suivi d'une description, et un excellent CTA pour voir l'étude de cas elle-même. Tous ces exemples sont de très bons exemples d'introduction d'un projet. Je recommande fortement d'utiliser ceux-ci comme exemple pour vous. 4. Étude de cas: Pour commencer votre étude de cas, nous allons ré-énumérer toutes les choses que vous aviez dans l'introduction de votre projet. Il est agréable de peindre une image et de donner un contexte aux coulisses de la façon dont ce projet s'est réuni. List, quel a été votre rôle dans ce projet ? Pour quelle entreprise ou client avez-vous fait cela ? Quel est ce projet ? Était-ce pour iOS, Android, était-ce un site web ? Réinscrire la durée du projet. Plus important encore, avec qui avez-vous travaillé ? Combien de designers, ingénieurs, chefs de projet, peut-être même que vous avez travaillé avec le PDG. Ensuite, vous voulez lister l'objectif du projet. Quel était le principal défi et comment avez-vous mesuré le succès ? Avez-vous eu une idée ou une certaine attente pour le projet lorsque vous avez commencé ? Après cela, vous voulez entrer dans le processus. C' est là que vous allez donner un bref aperçu de toutes les différentes phases auxquelles vous avez pensé. Pensez à vos projets en étapes et listez-les. Faites-nous savoir quelles mesures nous devrions prendre en compte. Voici une liste des différentes méthodes de processus que vous pouvez utiliser dans votre plan. Par exemple, comment ce projet a-t-il commencé ? Ça a commencé par une réunion d'affaires ? Est-ce que ça a commencé par la recherche ? Pensez à l'endroit où le projet a commencé, d' où vient le problème. Comment le problème a-t-il été identifié ? Ensuite, vous voulez commencer à penser à où vous êtes allé de la recherche. Avez-vous fait un remue-méninges avec les designers ? As-tu commencé à tester tout de suite ? Encore une fois, utilisez cette liste de processus comme exemple et pensez à toutes les différentes phases. Idéalement, vous auriez au moins cinq phases différentes pour parler. Mais encore une fois, cela va être subjectif pour votre projet lui-même. Voici un exemple d'un bref aperçu du projet de quelqu'un. Il énumère la recherche, conception d' interaction, la conception visuelle et le développement frontal. Ce sont toutes les grandes étapes qu'il est sur le point d' entrer en détail pour toute son étude de cas. Ensuite, c'est votre panne. C' est là que vous allez dans chaque étape individuelle et expliquez ce qui s'est passé. C' est le moment d'entrer dans le détail du processus que vous avez décrit. Essayez d'inclure n'importe quel visuel en cours de route. Avez-vous des croquis précoces que nous pouvons voir ? Vous pouvez prévisualiser le projet final en haut de la page, mais vous voulez vous assurer d'afficher les visuels pertinents en cours de route. À la fin de la ventilation, il faut répondre à ces types de questions. Qui est le public cible ? De quelles personnes avez-vous dû travailler ? Où sont les compromis ? Quels étaient les indicateurs de performance clés ? N' oubliez pas de souligner votre contribution individuelle en cours de route. Regardons maintenant un exemple d'étude de cas. C' est le portefeuille de mon ami Wilian et c'est un de ses projets. Lorsque vous atterrissez pour la première fois sur la page, il a une grande référence visuelle du projet lui-même. Ça s'appelle vacaybug. C' est vraiment génial en haut de votre étude de cas d'avoir une dernière maquette de ce qu' est le projet ou une indication de ce que nous sommes sur le point de nous lancer. Après votre référence visuelle, vous souhaitez ventiler les informations que vous aviez dans l'introduction de votre projet, telles que votre rôle, le contexte derrière les projets, comme la durée, individu ainsi que les personnes avec qui vous avez travaillé, type de projet qu'il s'agit, et les liens en direct vers le site lui-même. Ici, nous pouvons voir où Wilian décrit l'ensemble du processus de ce projet. Nous savons que nous allons parler de recherche, de conception d' interaction, de conception visuelle, marketing et de réflexion sur les produits. Automatiquement, nous pouvons voir quelles sont les différentes phases de cette étude de cas. Alors que nous faisons défiler vers le bas, nous pouvons voir que Wilian a brisé chaque section, de tous les processus d'une manière vraiment grande et audacieuse. Maintenant, nous savons que nous sommes sur le point de tout lire sur les recherches qui ont été faites pour ce projet. En faisant défiler vers le bas, nous pouvons voir qu'il y a références visuelles qui accompagnent les conclusions, les questions auxquelles on a répondu. Ici, nous avons différentes personnalités de qui est pour ce projet. Personas est un excellent moyen de peindre l'image de votre public cible, ce qui est l'une des questions auxquelles vous voulez répondre dans votre étude de cas. Ensuite, après avoir vu cette analyse concurrentielle, nous devrions voir la phase suivante, qui est les interactions. Il est très important d'avoir des croquis et des trames à faible fidélité. Habituellement, dans un processus UX, vous allez commencer avec des esquisses de faible fidélité afin qu'il puisse peindre l'image que vous avez été impliqué dans l'ensemble du processus. Ici, Wilian décrit toutes les différentes esquisses et ce qu'elles ont conduit. Alors que nous faisons défiler, nous pouvons voir que nous sommes dans la troisième phase maintenant, qui est l'exécution. C' est là que nous allons commencer à voir les derniers morkups. Je vais aussi avoir un lien vers cette étude de cas afin que vous puissiez passer à travers et vraiment lire tous les détails. Je voudrais simplement vous donner un bref aperçu des éléments que vous devriez inclure dans votre étude de cas. Remarquez comment chaque référence visuelle a beaucoup de contexte quant à ce que nous regardons. Vous ne voulez pas simplement vider l'image toutes vos références visuelles. Vous voulez vous assurer que vous les inscrivez dans votre processus comme celui-ci. On dirait qu'on est presque à la fin du projet. Je voudrais prendre note de cette section de l'étude de cas, qui mesure le succès. Vous voulez vous assurer, au tout début de l'étude de cas mentionner quel est le but de ce projet, et ensuite, à la toute fin, de voir que vous avez atteint cet objectif ? Qu' auriez-vous pu faire différemment ? C' est quelque chose qui manque beaucoup d'études de cas, même celles qui ont des phases et beaucoup de références visuelles. Ils ne montrent pas nécessairement si le projet a été couronné de succès, ce qui est vraiment important. Pour commencer avec votre étude de cas, examinons une liste de contrôle de certaines choses que vous devriez envisager d'inclure. Tout d'abord, vous voulez définir votre projet en étapes. Remplacez ces étapes par des phases réelles de votre projet. Par exemple, changez l'étape 1 à la recherche, si c'était la première étape de votre étude de cas. Ensuite, vous voulez commencer à penser à répondre à certaines de ces questions en cours de route. Comment ce projet a-t-il démarré ? Quel problème essayez-vous de résoudre ? Ensuite, vous voulez commencer à penser à qui vous conceviez ce projet. Avez-vous fait un remue-méninges ? Si oui, avec qui ? Voici quelques visuels en cours de route que vous devriez penser à inclure, tels que des personnages, des captures d'écran, des recherches, des croquis de données. J' ai une idée de différents visuels que vous devriez inclure du début de votre étude de cas à la fin, vous pouvez voir les visuels ici. À la troisième étape, comment avez-vous testé vos idées ? Comment saviez-vous quelle idée était correcte ? Avez-vous des filaires ou des prototypes ? Avec qui avez-vous travaillé pour expédier ce produit ? Comment cela a-t-il changé en cours de route ? Avez-vous exploré différentes options d'interface utilisateur ? Si c'est le cas, montrez ça. Ensuite, à la fin de votre projet, vous voulez montrer les maquettes finales. Vous voulez nous montrer quel était le résultat final. Avez-vous résolu le problème que vous avez répertorié à l'étape 1 ? Ce sera un excellent moyen pour vous de commencer à réfléchir à façon dont vous pouvez recueillir vos pensées lorsque vous regardez votre étude de cas. 5. Concevoir et publier avec Squarespace: Examinons maintenant la conception et la publication de votre portfolio. Je vais utiliser Webflow et Squarespace, car ces deux outils facilitent la conception et la gestion de votre contenu. Lorsque vous êtes prêt à commencer à concevoir votre portefeuille, vous devez savoir si vous voulez créer votre portefeuille à partir de zéro ou utiliser un modèle existant. Les deux sont vraiment d'excellentes options pour UX, cela dépend juste de la créativité que vous voulez utiliser dans votre portefeuille. Webflow va vous permettre de créer votre portfolio complètement à partir de zéro en utilisant du code. Alors que Squarespace va vous donner un très bon modèle pour travailler hors de. La grande chose à propos de UX, c'est que le travail devrait parler de lui-même. Cela signifie que vous pouvez utiliser un modèle et être tout aussi réussi que quelqu'un qui crée son portefeuille à partir de zéro. Cela dépend vraiment de votre vision de votre portefeuille, et de la créativité que vous ressentez est nécessaire pour communiquer vos projets. Par exemple, le portefeuille de Tom Petty du cours précédent, avait un design très propre et simple, quelque chose que vous pourriez très bien réaliser avec un modèle. Dans son portfolio, son travail parlait de lui-même, et son travail pouvait facilement être mis en valeur avec des maquettes et des photographies. Mais d'un autre côté, Williams portfolio à partir de l'exemple de l'étude de cas, a créé son portfolio à partir de zéro parce qu'il voulait avoir éléments personnalisés et des animations pour élever son travail. Ces animations et éléments ont contribué à améliorer notre compréhension de son projet. Quoi qu'il en soit, ces deux outils seront d'excellentes options pour vous et votre portefeuille. S' assure que vous disposez de tous les matériaux nécessaires lorsque vous commencez à concevoir. Vous devez être en mesure de brancher toutes vos références visuelles dans votre contenu sur lequel nous avons travaillé jusqu'à présent. Pour commencer avec Squarespace, vous devez décider quel modèle vous souhaitez utiliser. Ici, dans la feuille de calcul, j'ai les meilleures options pour le portefeuille UX. Le premier modèle est Jasper Jin. C' est en fait modèle Squarespace qu'ils ont créé avec UX à l'esprit. La page de destination va se concentrer sur vos projets. Une chose que vous remarquez probablement est qu'il n'a pas d'espace pour votre introduction personnelle. Si vous deviez aller avec ce modèle, vous devrez modifier juste en dessous où il est dit Jasper Jin et ajouter une section pour votre introduction personnelle. La grande chose à propos de Squarespace est qu'il dispose d'une liste d'options de conception que vous pouvez faire glisser et déposer dans n'importe quel modèle. L' une d'entre elles est l'option de paragraphe. Ensuite, à partir de là, votre introduction de projet sera en vol stationnaire pour chacun de vos projets. Ce modèle n'affiche pas les descriptions détaillées dont nous avons parlé pour l'introduction de votre projet, mais il y a suffisamment de place pour avoir toutes ces informations ici. La meilleure chose à propos de ce modèle est la page d'étude de cas réelle. Il a cette très grande animation que vous faites défiler chacune des différentes sections animées, ce qui le rend vraiment facile à lire et met beaucoup d' accent sur chaque phase de votre étude de cas. Donc, si vous êtes intéressé à avoir l'animation défilante, je vous recommande d'aller avec Jasper Jin. Quelque chose à noter pour Squarespace est que vous ne pouvez pas personnaliser les animations. Vous devriez trouver un modèle contenant les animations que vous recherchez, ou vous pouvez utiliser Webflow et créer vos propres animations personnalisées. Le modèle suivant s'appelle York. Celui-ci est très similaire à Jasper en ce qu'il a cette animation de défilement pour la page d'étude de cas. La chose qui est différente dans celui-ci est que vos introductions de projet peuvent avoir différentes variations dans les tailles. Le Jasper utilise une grille où chaque projet aura la même taille exacte. Alors que celui-ci, si vous avez des visuels où vous avez l'impression que vous avez besoin de prendre toute la largeur du site comme celui-ci, par exemple, peut-être que vous devriez utiliser celui-ci à la place. Quelque chose à noter est que ces deux modèles ont des navigations simples en haut du site, ce qui est vraiment important. Très probablement, votre navigation aura un bouton d'accueil, qui abritera vos projets et votre introduction personnelle, ainsi qu'un lien vers chaque étude de cas. Ensuite, une page A propos et potentiellement une page Contact. Vous pouvez lister une section contact sur votre page d'accueil ou dans votre section À propos, ou il peut avoir sa propre page. Tous sont d'excellentes options. Si vous pensez que votre section de contact ne reçoit pas assez de clics, je vous recommande d'avoir la section de contact dans la navigation elle-même. Pour votre page à propos, je voudrais aller plus en détail sur votre processus identifié ainsi que d'aller plus dans votre personnalité. Le modèle suivant s'appelle Stella. C' est en fait le modèle que j'ai utilisé pour mon portfolio. La chose que j'ai aimé à propos de ce modèle était la section d'introduction du projet. J' ai aimé comment je pouvais poser un texte sur une photo très facilement avec le bouton En savoir plus. Lorsque je regardais ce modèle, je pouvais facilement voir comment mon travail pouvait s'intégrer dans ces sections. J' ai aussi aimé la couleur avec des arrière-plans. J' ai utilisé ceci ici pour ma page de contact, et j'ai l'impression que cela aide vraiment cette section à se démarquer. Un inconvénient de ce portfolio est qu'il n'avait aucune animation sur aucune de ces pages. La seule animation que j'ai pu ajouter à la mienne était le défilement Parallax, qui était la seule animation qui m'intéressait. Heureusement, j'ai pu personnaliser ce modèle avec cette animation, mais la plupart des animations doivent venir avec le modèle lui-même. L' animation de transition que nous avons vu dans les deux autres modèles, lorsque vous faites défiler la page, n' était pas quelque chose que je pouvais réaliser avec celui-ci. Il est donc très important d'imaginer comment votre travail et votre présentation vont s'intégrer dans ces modèles. Vous voulez choisir celui qui représente le plus la façon dont vous envisagez l'aménagement de tout votre travail. 6. Concevoir et publier avec Webflow: Maintenant, jetons un coup d'oeil à Webflow. Webflow est un outil vraiment génial, car il vous permet de concevoir votre portfolio à partir de zéro, et de le publier dès que vous avez terminé dans le même outil. Dès que vous avez fini de concevoir, vous pouvez cliquer sur « publier » et il est instantanément mis en ligne. Webflow est également livré avec des modèles. Je n'ai moi-même utilisé aucun des modèles de Webflow parce que je pense que tout le but d'utiliser Webflow est de le concevoir vous-même, mais si vous voulez utiliser un modèle, si vous allez sur leur site principal, vous pouvez voir les options là. Je ne suis pas sûr qu'ils soient aussi pensés que les modèles créés dans Squarespace, mais cela peut vous aider à commencer au cas où vous n'êtes pas très familier avec CSS ou HTML. Maintenant, vous n'avez pas nécessairement besoin de connaître le code pour utiliser Webflow, mais c'est très utile. La façon dont Webflow fonctionne, c' est qu'il vous donne une interface de conception similaire à une esquisse de type outil de conception. Lorsque vous glisser-déposer dans différents éléments, comme une barre de navigation par exemple, il ne va pas atterrir sur votre canevas aussi fluidement que dans un logiciel de conception, et c'est parce qu'il utilise HTML comme cadre. Vous devez comprendre comment HTML et CSS organisent le contenu, pour vous aider à comprendre pourquoi les choses ne fonctionnent pas comme elles devraient l'être. C' est le portefeuille de Wilian, et nous sommes en mesure d'aller dans le design nous-mêmes et voir comment il a créé certains de ces éléments. Vous pouvez voir au tout début qu'il utilise probablement une barre de navigation dans le panneau de gauche ici. Voici toutes vos différentes options avec lesquelles vous devez travailler. Vous avez des sections, des conteneurs, des grilles et des colonnes. Ceux-ci sont tous basés sur HTML. Blocs Div, éléments de liste, paragraphes, encore une fois, tout HTML. Mais ils ont aussi des éléments reconnaissables que vous pouvez glisser et déposer comme une barre de navigation. Une grande chose à propos de Webflow est qu'il essaie de vous aider à créer des éléments qui sont réactifs. Avec cette barre de navigation que nous avons créée, nous pourrions aller en haut de l'écran et cliquer sur le mode tablette, ou le mode téléphone pour voir comment ils sont réactifs, et il semble qu'un menu hamburger est comment il sera réactif. Maintenant, parce qu'il s'agit d'un outil de conception, Webflow a des choses planifiées de navigation comme celles qui sont intégrées dans le logiciel lui-même. Si vous vouliez que la navigation fonctionne d'une manière différente, vous pouvez certainement le faire. Revenons au mode Bureau. Votre panneau de gauche va avoir tous vos éléments de mise en page, ainsi que des boutons où vous allez placer dans les photos. Ensuite, sur la droite, vous allez tout styliser en termes de couleur, de sélection de polices, d'espacement. Voici l'introduction personnelle de Wilian. Il a trois colonnes, chacune avec une photo et une description, un peu sur ce qu'il fait en tant que designer UX. Si vous vouliez avoir quelque chose de similaire à cela, vous allez ici dans la section de gauche, et cliquez sur « colonnes ». Je vais les placer ici, et ensuite ça va me donner la possibilité de décider combien de colonnes je voudrais avoir. Faisons trois. Maintenant, je vais faire glisser une photo. Vous pouvez voir que la photo va automatiquement s'aligner à gauche. C' est parce que encore une fois, nous utilisons HTML comme cadre, et en HTML, tout s'aligne automatiquement à gauche. Ce n'est pas aussi simple que d'utiliser un modèle dans le sens où nous pouvons faire glisser n'importe quoi, faire glisser un élément n'importe où sur la page. En fait, nous allons devoir entrer et travailler dans le CSS pour obtenir sa position comme nous le voulons. Mais avant de le faire, je vais ajouter du texte, donc il y a un paragraphe, et heureusement avec Webflow, vous êtes capable d'éditer les choses des autres sans réellement enregistrer. Alors Wilian devra m'appeler pour me demander ce que j'ai fait à son portefeuille. Cela permet simplement à Webflow de construire une communauté cas où vous seriez intéressé par la façon dont d'autres personnes conçoivent certaines choses. Vous pouvez facilement accéder à leur site Web, ouvrir dans Webflow et le voir par vous-même. Maintenant, j'ai une photo, et un élément de paragraphe dans chaque section. Maintenant, je veux centrer toutes mes photos pour qu'elles soient centrées dans chaque colonne. Je vais aller au panneau de style. Il y a plusieurs façons de le faire. Ici, c'est ainsi que vous contrôlez le rembourrage de combien il y a de chaque côté de votre élément. Maintenant, la chose à propos du rembourrage est que, vous devez vérifier à quoi il ressemble de manière réactive sur un téléphone et sur une tablette, parce que si vous avez beaucoup de rembourrage, il va également se traduire sur votre téléphone, puis le rembourrage peut repousser complètement votre image de l'écran. C' est ainsi que savoir un peu sur CSS va vous aider lorsque vous utilisez Webflow. Il est préférable d'utiliser des pourcentages, par exemple, dans la section de rembourrage. Maintenant, repositionnons cette image pour qu'elle soit centrée. Si nous faisons défiler vers le bas, regardons comment Wilian a centré tous ses objets. On dirait que chaque colonne a son propre rembourrage. Cette section verte représente ici le rembourrage. Maintenant, nous avons toutes nos images centrées, et nous avons un style de colonne très similaire à celui de Wilian. Je veux juste noter que, faire ces choses prend un peu de temps par rapport à l'utilisation d'un modèle. En utilisant un modèle, vous pourriez facilement ajouter un espaceur, par exemple, sur Squarespace, qui est juste un glisser-déposer, et vous pouvez instantanément centrer les choses. Bien sûr, sur Webflow n'était pas terriblement difficile, mais certaines choses vont prendre un peu plus de temps dans Webflow parce que vous le créez à partir de zéro. Si vous avez le temps de flasher complètement votre portefeuille, je vous recommande au moins de lui donner un coup d'oeil pour voir si c'est pour vous. 7. Conclusion: Merci beaucoup d'avoir terminé ce cours. Faites-moi savoir si vous avez des questions concernant votre portefeuille UX et assurez-vous de consulter la feuille de calcul. Il va avoir des liens vers toutes les ressources, des exemples supplémentaires et des astuces et astuces. Enfin, assurez-vous de lier votre portefeuille afin que vous puissiez obtenir des commentaires. Merci.