Transcription
1. Introduction: Bonjour tout le monde. La vidéo d'
aujourd'hui explique comment
créer votre site Web de
portfolio de conception UX. Je suis Kristine et je suis une designer de
produits UX slash travaillant
à San Francisco. Cette vidéo est un
didacticiel étape par étape qui explique comment créer votre portfolio
en moins d'une heure. C'est le portfolio que j'ai créé dès mon camp d'entraînement en
UX design. Et c'est le même portefeuille
qui m'a aidé à décrocher mon premier emploi à temps plein en conception
UX. Après un mois après avoir terminé mon
camp d'entraînement pour ce tutoriel, j'utiliserai Wix pour
créer mon site Web. Je ne recommande pas non plus à
quiconque débute dans la conception
UX de coder
son propre site Web ? Non, non, non, ne perds pas
ton temps à faire ça. Je sais
que certaines personnes offrent ces conseils et c'est peut-être ce
qui les
intéresse vraiment , sauf si vous devenez développeur et c'est ce
que vous voulez faire. Ne perdez pas votre temps à
apprendre à coder car c'est
un tout, une autre bête. Je ne pense pas que cela vaut vraiment votre temps vous fasse perdre de l'énergie et vous concentrer sur
ce
qui est vraiment important, à savoir
améliorer vos conceptions et itérer la
stratégie de contenu de votre cas. études. Je ne suis pas non plus fan de
n'avoir que
des versions PDF de votre portfolio. Si vous postulez
pour travailler dans le secteur de la technologie, vous devriez suivre les normes de
l'industrie ? Et ce qui est la
norme du secteur, c'est que vous avez un site Web de portefeuille. Les camps d'entraînement Ux ne vous
apprendront pas
comment créer votre site Web de
portfolio. Ils vous donneront
des invites de projet afin que vous puissiez créer vos maquettes et
proposer des livrables. Mais ils ne
vous apprendront pas vraiment à rédiger des études de cas ou à utiliser un créateur de site Web
pour publier votre site Web. J'ai arrêté beaucoup de designers sur LinkedIn, j'ai regardé
leurs portfolios, lu de nombreuses études de cas pour comprendre comment structurer
mes propres études de cas. Tout ce que je
vais partager avec vous aujourd'hui était quelque chose
dont j'aurais vraiment aimé que quelqu'un me parle
ou fasse du contenu à l'époque. Alors, tu es le bienvenu. Je tiens également à
préciser que cette vidéo ne couvrira comment créer le contenu de votre portfolio. Ce sera une
vidéo séparée parce que je ne
veux pas que cette vidéo dure une heure. Alors je t'ai eu. Mais pas aujourd'hui
sans plus attendre. Allons construire.
2. Créer votre site web de portfolio: À la fin de cette vidéo, nous allons créer quelque chose qui ressemble à ce portfolio. Il s'agit de mes premiers portfolios de
conception UX. Il y a donc beaucoup de
choses que j'aurais faites différemment si j'
y retournais. Mais je vais juste vous montrer à quoi cela ressemblait
à l'époque. Il s'agit d'une
mise en page très basique de ce ressemble
habituellement
un portfolio de conception UX. n'y a rien de vraiment
fantaisiste là-dedans. Il s'agit d'une grille deux par deux
avec des études de cas. Et je vous recommande avoir au moins trois
à cinq études de cas, dont
au moins deux à trois
sont liées à la conception UX. Les autres peuvent être
davantage liés au design visuel ou au graphisme. La première étude de cas
que vous devriez avoir est le projet dont vous êtes fier et
celui avec lequel vous pourriez
interviewer et dont vous parleriez davantage sur votre site. Nous allons donc
construire l'une des études
de cas est
mon étude de cas Levi's. Ce que c'est vraiment, c'est un tas de texte et d'images
simplement placés sur une page. y a rien de vraiment génial dans cette étude de
cas non plus. C'est plutôt une
question de contenu. Et encore une fois,
cette vidéo ne traitera pas de la manière d'élaborer
le contenu d'une étude de cas. J'ai déjà rédigé le contenu des études de cas
et je les mettrais dans un document
Word dans mes notes Tout le
contenu est écrit ici simplement parce qu'il est plus facile de
déplacer les choses, est plus facile d'écrire et de modifier
mon étude de cas à ce sujet, plutôt que d'avoir à
tout changer sur mon site Web
et il y a moins va-et-vient lorsque vous
rédigez vos études de cas avant de travailler réellement sur
développer votre portefeuille. Commençons donc par
le tout début. Vous créez un nouveau
compte et vous allez créer un nouveau site en haut
à droite. Et ce que cela va faire, c'
est vous expliquer comment
configurer votre portefeuille. Je veux donc un site web de designer. Je veux simplement choisir un modèle car cela me fera
gagner beaucoup de temps. Le modèle que j'ai choisi. Il y a beaucoup de modèles comme
« Oh, celui-ci est sympa. J'irais avec celui-ci. Je crois avoir vu celui-ci être utilisé par un autre designer. Celle-là est plutôt cool, mais celle que j'ai utilisée
, je n'arrive pas à la trouver. OK. Je pense que c'est
parce que j' utilise actuellement ce modèle, donc je ne peux plus, je ne peux plus l'utiliser. Faisons-le. Je suis un peu déçue parce que maintenant mon portfolio va être
un peu différent, mais c'est bon, d'accord, oui,
c' est un bon modèle. Ce que je vais faire, c'est supprimer certaines
de ces choses. La première chose que j'
aime faire est d'aller dans le gestionnaire de thèmes et de
changer de textile. J'aime bien les
textiles de celui-ci, donc je vais juste le garder
tel que c'est peut-être le paragraphe. Je veux le changer
pour autre chose. J'aime bien Avenir light,
mais Georgia fonctionne. D'accord, passons à
ce qui est disponible ici. Je vais donc ajouter du texte, des
titres, des textes thématiques. Mettez le titre un. Et ça va être Bonjour, je suis Christine, je vais y
mettre un emoji. Alors ce n'est clairement pas moi. Je vais donc changer d'
image, télécharger des médias. Ce que je vais faire, c'est recadrer ça pour qu'il soit
plus centré. Comme ça. Parfait. Pop up. Je vais faire Chun, Chun,
John Buns, Chun,
Buttons, Buttons. Ce n'est pas pertinent. Ces petits textes ne sont pas pertinents. Je vais également
ajouter un paragraphe. Et ce qui est bien, c'est
que vous pouvez personnaliser chaque texte, personnaliser, personnaliser
l'interligne pour qu'il ne soit pas aussi
serré. Ouais, j'aime bien ça. OK. Je vais déplacer
cela un peu
pour que la grille soit là
pour vous aider à rester dans cet espace, de sorte que lorsque quelqu'un regarde votre
portfolio sur un iPad, tout votre contenu, tous les le contenu important
n'est pas en dehors de cette grille, vous pourrez
donc
tout voir d'une belle vue. Je vais juste le sortir. Vous pouvez ajouter une barre sociale. Ce que j'aime dans l'
éditeur Wix, c'est que vous pouvez Shift, maintenir la touche Maj enfoncée, cliquer sur tout le contenu et
le déplacer vers le bas. C'est comme travailler sur Figma. C'est génial. Et au fur et à mesure que
nous descendons, nous allons utiliser cet
espace pour mettre notre étude de cas. En fait, je vais
supprimer toute cette ligne parce que je vais mettre. Mon travail. Mon travail. OK. Je vais juste avoir
une simple grille deux par deux. Donc, avant cela, je vais changer
le logo ici, ajouter mon propre logo. Je vais donc mettre
l'image, mes téléchargements. Nous allons l'ajouter à la
page et me procurer un logo. Oups, j'ai dessiné
ça sur Procreate. Je suis née et je me suis dit : « Je vais me faire un logo ». En fait. Je vais me
cacher à propos de nous va travailler sur la page À propos. Je vais supprimer ça. OK ? Ce que c'est, c'est que tu peux
y mettre un point d'ancrage. Vous pouvez ajouter une ancre au site. Donc, une fois que vous avez ajouté cela, cette ligne, en cliquant dessus vous
amènera à
l'endroit où la ligne commence. Je vais ajouter un blog parce que je veux
montrer que je blogue, créer une nouvelle page et
mettre un blog et que ce soit mes éléments de deuxième ligne. Vous voyez donc ici le
blog de travail à propos de ce logo, nous allons également
créer un lien vers la page d'accueil. Vous allez donc à la page d'accueil. Oui. Terminé. Si je suis sur une page différente
et que je clique sur ce logo, cela me ramènera
dans cette section bio était vraiment important, c'est
que vous indiquiez très clairement ce que vous faites, qui vous êtes et pourquoi
quelqu'un Devrais-je vous engager ? Mon portefeuille actuel
dit designer de produits, mais lorsque j'étais
en transition vers l'UX à ce moment-là, je me qualifiais
de concepteur UX parce que je ne faisais pas vraiment
partie d'une équipe produit et que je ne possédais pas
un produit depuis la conception initiale
jusqu'au déploiement final. Je n'étais pas le propriétaire du produit. Vous pouvez écrire un
petit texte de présentation
sur ce qui vous rend spécial. Mais honnêtement, la biographie de chacun
est la même pour l'UX design. Je ne transpirerais pas trop passerais pas trop de temps
sur cette section. Passons à la
section de travail
afin de construire cette grille
deux par deux, vous allez aller sur
Ajouter et cliquer sur la case. On y va. Voici
ma boîte contenant, et je vais faire la même
taille pour 67. Une fois que vous avez cette case, vous allez ajouter
une interaction de survol. Nous allons utiliser une interaction de
survol plus tard. Ensuite, vous allez
ajouter une image. Je vais cliquer sur le
Levi's. Je l'ai ajouté. Je vais mettre ça au 467, attacher à la boîte. Et je vais aller en vol stationnaire, et je vais choisir les effets, accord, donc je vais le
faire grandir. Oups, je vais
personnaliser ça. Je vais le faire
croître légèrement de 110 %. Donc, si nous regardons cela, Let's preview va s'agrandir. Je veux aussi un peu d'ombre. On y voit une petite ombre. En fait, les ombres sont trop fortes. Donc, lorsque vous survolez, je voulais aussi avoir
une superposition sombre. Donc je vais
aller dans le conteneur, mettre ça dans la même dimension. Nous l'utilisons donc je l'
ai aligné. Ensuite, je vais
rendre ce produit opaque à 50 %. Ensuite, je
souhaite également ajouter du texte. Je vais donc ajouter
du texte blanc. Et je vais l'
appeler UX design. Ensuite, je vais ajouter
un autre titre par-dessus. Pourquoi ? Alignez-le au centre. OK, alors voyons un aperçu
en fait. Donc, chaque fois que je survole, c'est écrit
Levi's UX Design. Maintenant, ce que je vais
faire, c'est que je vais Control Command ou Command C, coller et coller
ceci sur la page. Ensuite, je vais juste
changer la copie et les images. Alors je clique sur cette image, je
change d'image, change d'image, je mets
ça pour le lignage, ce qui était un travail de
graphisme que j'ai fait. Changer d'image, mettre, toucher. Et là, nous
avons déjà la grille. Et je vais y aller et me changer. Le titre design graphique, Touch, marketing design, UX design. Et je vais faire baisser un peu ces
gars-là. Voyons donc un aperçu. Ayez la
lignée de rumeurs de Levi's et retouchez-la. Nous allons maintenant créer
une première étude de cas. Je vais donc aller sur les pages et
je vais créer une page appelée Levi's Hide.
Oui, on y va. D'accord, la page existe toujours, mais elle est maintenant masquée dans le
menu. Je vais commencer à ajouter des textes. Je vais ajouter mon en-tête. Je commence toujours par rédiger mon étude
de cas d'abord, puis je commence à
ajouter des images pour compléter ce que j'
écris dans mon étude de cas. Donc j'ai déjà le titre de
cette façon, je ne vais pas faire
des allers-retours et j'ai un
tas de textes ici. Je vais juste faire du
copier-coller. Ajoutez donc du texte sur le thème des textes. Je vais également mettre plus d'
interligne, plus facile à lire. Ensuite, je vais
ajouter une image. Je vais télécharger en bloc
toutes les images de mes études de cas. Il s'agit de l'image principale. Ce que j'
aime aussi dans cet éditeur Wix c'est que vous pouvez ajouter plusieurs
images à la fois. Si je le voulais, je peux simplement les
sélectionner en bloc et les ajouter à la page. Je ne vais pas faire ça
parce que ça va
être un peu chaotique. Je vais donc simplement
ajouter deux images. Huit, vingt-huit,
vingt au centre, alignez-le. Boom. Copiez ensuite ce titre. Et copiez et collez le
problème et le processus. Oh, quelque chose a changé. Oups. Oh, vous pouvez aussi commander
Z et il reviendra à ce qu'il était.
À l'époque. J'ai senti que je
devais mettre des post-its. Je pense que si je devais
refaire mon portfolio maintenant, si j'avais terminé le
camp d'entraînement maintenant, je ne
mettrais
probablement pas de
post-it parce que c'est quelque chose que beaucoup de designers juniors proposent. À moins que vous ne laissiez une initiative
à l'échelle de l'entreprise ou une très grande équipe pour une
session de remue-méninges dans une entreprise réelle. Je pense juste que ce
n'est pas
un artefact aussi précieux à avoir
dans votre étude de cas. Si tu veux le dire,
tu peux, tu n'as pas à le faire. Je ne le ferais probablement pas
si je devais y retourner. Maintenant que nous avons créé
l'étude de cas Levi's, nous allons la relier
à cette miniature ici. Alors, comment allons-nous procéder ? Est-ce que nous allons cliquer sur
le conteneur. Allez au survol. Parce que tu vas
cliquer sur l'état du survol. Vous allez ajouter
pour survoler un bouton. C'est donc un hack
que j'ai trouvé sur Google parce que je n'arrivais pas à
comprendre comment lier
une page à cette boîte. Je vais donc
modifier le design. Rendez l'arrière-plan transparent, allez dans Texte et réduisez complètement
le texte du bouton
pour que vous ne le voyiez pas. Vous allez le
lier à une page. Je vais cliquer sur Levi's. Nous sommes prêts à partir, nous
allons donc le prévisualiser. Oh, il y a un survol sur les
boutons ou nous allons garder l'opacité à 0. Donc, la boîte grise
, puis montrez-le. Je vais cliquer dessus. L'étude de cas va
apparaître, mais je ne veux pas cette transition
étrange. Donc, afin de
supprimer l'animation, nous allons passer aux
transitions de page, cliquez sur Aucune. Ce que ça va faire, c'est
retourner à la page d'accueil. Vous allez
cliquer sur l'étude de
cas Levi's et cela
éliminera cette animation étrange quand
nous aurons terminé et que nous l'avons créée.
3. Questions et réponses: Quand je vous ai demandé sur Instagram de
soumettre vos questions, beaucoup d'entre vous m'ont demandé combien de détails c'
était trop de détails ? Pouvez-vous expliquer ce qui doit être documenté et ce qui ne devrait pas être documenté ? J'ai essayé de faire des recherches en ligne. Les réponses que j'obtiens sont si vagues je ne suis pas sûr
des parties du processus que je dois souligner ou souligner avant créer
votre site Web pour passer une bonne partie de votre
temps à réfléchir à l'UX de votre et clarifier
le message. La meilleure façon d'y parvenir est rédiger vos
études de cas avant d'
ajouter des images à chacun de vos projets et de répondre à
ces trois questions. Premièrement, quels étaient
les produits et quel était le problème que
vous essayiez de
résoudre pour le numéro deux, comment avez-vous résolu ce problème ? Qu'est-ce que tu as fait, numéro trois ? Eh bien, comme résultat ou résultats parce que vous résolvez ce
problème avec vos conceptions. Une autre personne a mentionné que j'
entends toujours des choses différentes entre me concentrer
sur les visuels et me
concentrer sur le fait de raconter l'histoire. C'est lequel ?
Vous avez besoin de raconter une histoire avec des visuels convaincants ? C'est ma réponse. Donc la réponse est vraiment
que vous devriez avoir les deux. Je sais que cette phrase, raconter
une histoire est utilisée tout le temps dans la
conception UX sans vraiment de moyens, est-ce que les gens comprennent ce que vous essayez de dire
aux gens ? Comprenez que ce que vous avez réellement
fait pour résoudre le problème était un problème et un véritable problème
commercial ou utilisateur. Et pas simplement une requalification
d'une application que vous aimez. Je me demanderais donc quels
détails sont importants
pour tous ceux qui
lisent mon étude de cas pour
les aider à comprendre ce que j'ai
fait de ce projet. Et ma règle de base est que si
un lycéen peut lire votre étude de cas et comprendre ce que
vous avez réellement fait. C'est une bonne étude de cas, car toute personne n'ayant aucune expérience conception
UX ou en projet
devrait être en mesure comprendre ce que vous essayez de
corriger avec vos conceptions. Et au lieu de
tout montrer comme étant votre valeur par défaut, vous devriez
réfléchir sérieusement aux parties intéressantes de vos projets
que vous
voulez vraiment mettre en évidence et comment
les aborder en tête de vos études de cas afin d'attirer l'attention
des gens. Et comment progressez-vous
naturellement dans le partage de la manière dont vous définissez
l'espace problématique ? Quels types de solutions
avez-vous proposées,
comment avez-vous validé vos
conceptions et quel a été le résultat des
remaniements que vous avez effectués ? Une autre question
était que les responsables du recrutement voyaient parcourir
autant de portefeuilles. Comment vous démarquez-vous ? Est-ce que tu restes super simple ? Ou beaucoup d'informations, clarté du message
est vraiment importante. C'est donc quelque chose
que vous devez toujours
prendre en compte lorsque vous
travaillez sur votre étude de cas est-ce que les gens comprennent
ce que j'essaie de dire ? Si vous êtes quelqu'un qui
débute dans le design UX, la seule chose qui peut
vraiment vous démarquer est d'avoir une bonne conception visuelle
dans vos études de cas Je vois tellement de portefeuilles
de camps d'entraînement que seuls ont des wireframes
très basse fréquence. Et ils sont très rapides,
je vais être honnête, certains d'entre eux sont
vraiment moches et je suis genre, tu es designer. Vous devez connaître les
bases du design visuel. Je vais avoir
tellement de haine en disant que je vais juste être vrai. Il existe un moyen de rendre les
bonnes zones de texte et boîtes
grises
plus jolies que la moyenne. J'ai essayé de montrer 90 % des images que je
montre dans mon étude de cas. 90 % d'entre elles sont
des maquettes haute fidélité. Je montre rarement des wireframes. Et vous vous demandez peut-être : «
Eh bien, Christina, je n'ai pas de formation
en design visuel. Je n'ai tout simplement pas
l'œil pour ça. Que dois-je faire ? Vous pouvez développer un I
et je crois vraiment que design
visuel est quelque chose
que vous pouvez améliorer. Avant, je n'étais pas très
douée en design visuel et maintenant, comme les gens me le disent, j'ai beaucoup aimé ton esthétique. Un bon moyen est d'étudier
un bon design visuel. Et toutes ces sources sont
publiques pour vous. Vous pouvez consulter de nombreuses bibliothèques de systèmes de conception de différentes entreprises, telles que
Google Material Design et Airbnb ont également leur système de
conception en public que vous pouvez
voir et que vous pouvez voir le style de leurs
boutons et de leurs composants. Il est très important que
vous vous familiarisiez avec les différents composants de
l'interface utilisateur utilisés
dans les différentes applications. Téléchargez un tas d'applications
différentes pour voir quels types de designs ils utilisent et quels types d' interactions utilisent
pour différents flux. Ainsi, lorsque vous étudiez le design et que vous regardez
beaucoup de bons designs, c'est ainsi
que vous pouvez développer
ce qu'est un bon design visuel. Et je te verrai plus tard. Au revoir.
Christin Watts, Product Designer
