Transcription
1. Bande-annonce du cours: Bienvenue dans le
cours d'introduction à la conception UI UX. Dans ce cours, nous allons
apprendre les bases de la conception de l' interface utilisateur utilisateur à l'aide de la
plateforme gratuite Figma, qui crée des produits ensemble. m'appelle Amy, je suis votre professeur
pour ce cours. Je suis designer
depuis plus de trois ans travaille sur de nombreux projets sur des applications mobiles
et Web savoir si vous
souhaitez apprendre
le design. Et c'est la
première fois que vous concevez
ou concevez votre faisceau
depuis un certain temps. Et maintenant tu vas
apprendre Figma. Ce cours est fait pour vous. Dans ce cours, nous
allons apprendre les concepts
essentiels de conception de l'interface utilisateur et de l'expérience utilisateur. Et pourquoi Figma
est un outil si puissant et comment vous aider dans
vos projets de conception. Passons à la première
partie du cours.
2. Conception de l'interface utilisateur et de l'interface utilisateur: Tout d'abord, il est important de
définir ces deux termes, conception de l'
interface utilisateur ou la conception de l'interface utilisateur concerne l'expérience
esthétique. Pour donner un exemple concret, pensez à l'application mobile
que vous utilisez tous les jours. conception de l'
expérience utilisateur ou la conception ont aidé à décider
quelles fonctionnalités, quels éléments
constitueraient ce produit, comment cela fonctionnerait et qui vous vous
sentez lorsque vous les utilisez. Ça a toujours l'air un peu
compliqué, non ? Les concepteurs d'interface utilisateur et d'interface utilisateur sont
ce que nous utilisons, mais essayons de décomposer
cela pour rendre l'expérience utilisateur et l'interface
utilisateur un peu plus claires que
l'expérience implique beaucoup de choses
différentes . que vous ressentez, où vous êtes, vos motivations se situent au
moment où vous les faites. Que se passe-t-il quand
on fait quelque chose ? Quelle a été la réaction ? Il y a beaucoup de choses impliquées dans la façon dont vous vivez quelque chose. Regardons maintenant
l'interface Word. Et l'interface est une chose
particulière avec laquelle vous faites une ou plusieurs
interactions. Pensez par exemple à
une télécommande avec, mais c'est une chose avec
laquelle vous interfacez pour réaliser quelque chose. C'est donc la vraie
différence entre l'expérience utilisateur et
l'interface utilisateur. Donc, l'expérience,
tout ce que vous ressentez, ce que vous voulez toutes les
manières dont vous pouvez le faire. Et une interface est
cette chose tangible avec
laquelle vous interagissez pour
obtenir quelque chose de spécifique. Les concepteurs d'interface utilisateur et d'expérience utilisateur travaillent
souvent sur les mêmes projets et souvent en même temps, mais ils sont réellement
responsables de choses très différentes. Le concepteur d'interface utilisateur est
chargé de représenter visuellement tous ces concepts et idées de
manière à ce que l'utilisateur sache
exactement comment les utiliser. Concepteur UX responsable de
l'expérience globale, la
compréhension des utilisateurs
et de l'aide à donner des concepts et des moyens d'améliorer l'
expérience des utilisateurs. Et on se voit dans la deuxième partie.
3. Qu'est-ce que la FIGMA: Dans cette partie, nous
explorerons Figma, apprendrons ce que c'est et comment nous pouvons
commencer à l'utiliser. Nous allons passer en revue certains de ces sujets
essentiels qui vous permettront vous préparer à concevoir de
magnifiques projets UI UX. Figma est un logiciel de
conception de premier plan qui aide les équipes et
les individus à créer des designs plus rapidement et
plus efficacement. Figma présente quelques avantages. Plus important encore, pour
vous, vous pouvez commencer gratuitement si
vous travaillez seul. Utilisé par de nombreuses
entreprises car il offre
également une très
bonne collaboration. Ainsi, plusieurs
personnes peuvent travailler sur le même fichier de conception en
même temps. Très vite aussi. Il fonctionne sur n'importe quel ordinateur, que vous
ayez un
Mac, un PC ou Linux, peu importe ce que vous avez,
il fonctionne directement dans le navigateur et il dispose
également d'un laboratoire mobile. Vous pouvez donc prévisualiser vos
créations sur un écran mobile. y a donc aucun inconvénient à commencer
avec un outil comme Figma. C'est une excellente ressource pour
ceux qui débutent une nouvelle expérience utilisateur IN. C'est donc le site Web
que vous venez d'aller sur figma.com. Je suis déjà connecté, mais vous pouvez vous inscrire très rapidement même avec votre compte
Google. Commencez à utiliser
la version du navigateur. Mais si vous souhaitez
utiliser l'application de bureau, vous pouvez cliquer ici
Bonne application de bureau et ouvrir votre compte
de la même manière. Mais avant de nous lancer
directement dans Figma, je voudrais vous montrer la façon dont je vous recommande de commencer. Donc tu veux juste
commencer à t'entraîner. Maintenant, je ne vais pas vous demander de commencer
à concevoir
quelque chose à partir de zéro parce que je pense que ce serait
très difficile avec quelqu'un. Surtout si vous êtes
un débutant complet dans ce domaine et que vous n'
avez aucune connaissance des principes de
conception et d'
autres choses de ce genre. La meilleure façon de
commencer
est donc de copier
d'autres designs jusqu'à la fin. La raison pour laquelle c'est si
bon est que vous pouvez voir comment le
design a été créé. Ainsi, lorsque vous êtes
coincé sur quelque chose, vous pouvez réellement voir comment
cette personne qui a créé cela a obtenu un effet particulier
ou un signe de figure. C'est très bien
au début parce que vous n'
allez pas les vendre. Vous n'allez pas
dire que vous concevez
quelque chose lorsque vous l'avez copié
à partir de quelqu'un d'autre. C'est juste pour
votre propre pratique et c'est vraiment une bonne
façon de commencer.
4. Commencer avec la figma: Commencez. Maintenant, fais-le. Je voulais
commencer par un modèle. Et ce que j'ai littéralement fait, c'est
que j'ai cliqué sur la communauté. Donc, lorsque vous regardez cela, vous trouverez une branche de kits d'interface utilisateur où je peux
rechercher des applications d'achat. Et c'est une bonne
chose à propos de Figma. Il existe de nombreuses ressources
gratuites dans la communauté que vous
pouvez utiliser pour commencer à entraîner à intégrer à vous
entraîner à intégrer à
votre design afin de ne pas
avoir à repartir de zéro. Et j'ai choisi cette application d' achat
en ligne comme exemple. Et j'ouvre ici. Après avoir cliqué sur
ce bouton ici, obtenez une copie indiquant
Copy to Figma account. Et je peux commencer à éditer ça. Très bien,
nous avons maintenant une copie de ce fichier que nous allons
utiliser comme point de départ. Donc dans Figma, comme vous pouvez le voir, je peux simplement faire défiler vers le haut et vers le bas pour voir les différents
écrans et fichiers de disque. Et je peux très facilement les
réorganiser. Vous remarquerez que dans le fichier
d'origine, ils étaient placés côte à côte et que j'ai une disposition plus
verticale. Et je peux le déplacer avec
le curseur de la souris comme ça. Et je peux effectuer un zoom avant et un
zoom arrière d'un simple pincement sur mon trackpad
afin de voir tous mes écrans. Disons maintenant que je veux
commencer à faire face à ce design, ce que je fais, eh bien, juste
pour vous donner les bases. Sur la gauche, j'
ai juste une section de calque. Ensuite, lorsque je
sélectionne un élément, j'obtiens les paramètres de
cet élément sur la droite. Nous allons donc commencer étape par étape pour repenser cet écran de connexion. Et au fur et à mesure, nous utiliserons des formes, des
couleurs et des icônes spécifiques. Avant de commencer, nous allons
ajuster notre environnement pour ajouter un nouvel écran à côté de
l'écran de connexion d'origine. Maintenant, la première étape pour
concevoir un nouvel écran, vous devez choisir
le cadre qui enveloppe toutes les
formes d'écran comme ceci. Nous cliquons ici et choisissons un
cadre à redessiner comme suit, n'importe quel format pour notre écran. Mais ce que nous allons faire
maintenant pour préparer le cadre, nous allons choisir
ici dans cette partie gauche, le type de cadre
adapté à notre utilisation. Et dans ce cas, nous
choisissons l'iPhone 13 Pro Max et le déplaçons
à côté de celui-ci comme ça. Nous commençons maintenant par
l'en-tête du téléphone. Et nous utiliserons les
plug-ins pour l'icône. Cliquez avec le bouton droit de la souris ici
et choisissez Plugins, plus de plug-ins pour gérer nos plugins à utiliser
lors de la conception. Vous trouverez ici de nombreux plugins
utiles. Mais maintenant, nous allons
choisir l'icône si cinq. Après avoir rendu le
plug-in, cliquez sur Installer. Nous pouvons maintenant utiliser l'
icône à cinq connexions. En commençant par l'icône Wi-Fi. Nous choisissons cette icône et cliquons sur l'icône d'
importation
pour être disponible dans notre nouvel écran. Et nous terminons le reste des
icônes avec la même méthode. Maintenant, nous redimensionnons les icônes
et nous déplaçons vers le haut comme ça. Vous pouvez regrouper ses trois icônes déplacer facilement
dans le contrôle. Et l'heure simplement avec
l'outil de texte comme celui-ci. Et nous changeons maintenant la couleur de
fond comme sur les autres écrans.
Sélectionnez le cadre. Et ici à droite,
descendez un peu et cliquez ici. Comme vous voyez cette palette de couleurs, nous pouvons choisir une couleur comme celle-ci, ou utiliser ce petit
outil, le sélecteur, puis cliquer sur l'endroit où vous voulez prendre la même couleur. Nous allons maintenant ajouter cette grande icône avec la même méthode
que l'autre. Nous écrivons shopping et
choisissons l'icône nouvelle envie. Ensuite, nous allons créer
le champ de nom avec l'outil rectangle. Lequel ? Une pub d'ici. Et nous changeons la couleur de
sa bordure en blanc. Ici, sur la droite. Nous choisissons
ce paramètre de course. Ensuite, nous pouvons augmenter la taille de la bordure de
trois pour être plus claire. Et maintenant, nous changeons
sa couleur en rouge. Mais il est toujours nécessaire d'ajuster le
rayon de la frontière comme ça. Ici, en haut
à droite, il y a le paramètre de rayon de la bordure. Nous pouvons maintenant ajouter l'autre
champ dans le bouton. Copiez et collez le premier champ car ils ont
une forme similaire. Et n'oubliez pas de
changer la couleur des boutons. Ensuite, nous ajouterons ces deux
icônes comme les autres. À l'aide de l'icône. Si je branche. Maintenant, nous nous déplaçons à
chacun à sa place. Mais comme vous pouvez le voir ici, l'icône a disparu. Vous l'avez désélectionnée, cliquez avec le bouton droit la souris et choisissez
Placer au premier plan. Encore une fois, il est nécessaire changer les couleurs en
blanc pour les deux icônes. Nous allons maintenant ajouter les
textes pour les deux champs
et nous connecter au bouton. Et continue d'ajouter le mot de passe
oublié juste en dessous du bouton avec la même méthode. Mais tu dois être
plus mince que les autres. Pour modifier ce paramètre. Vous sélectionnez le texte, allez à droite et cliquez
sur cette liste de sélection. Choisissez ensuite la taille
que vous souhaitez. Pour nous. Nous allons maintenant choisir le moyen. Enfin, nous terminons par cela. Cette partie contient trois icônes et la
phrase juste en dessous. Nous allons choisir différentes icônes de
l'écran d'origine, que je vois plus
cohérentes avec notre écran. Et n'oubliez pas de changer la couleur des
icônes dans l'entête. Nous avons donc utilisé dans ce nouvel écran les outils de base de Figma et
comment installer et utiliser les plugins. Néanmoins, il existe d'autres outils et choses à apprendre et à concevoir
avec Figma, comme les prototypes. Vous avez maintenant créé
quelque chose qui est très proche du design
original. Comme vous pouvez le constater, commencer avec un modèle
déjà présent dans Figma vous permet de tricher
au début et de
copier des éléments. Et vous devriez simplement rechercher des ressources
gratuites qui ont des
conceptions d'
applications mobiles ou Web et commencer à les gérer. Découvrez comment recréer
ces éléments. Et au fil du temps, vous commencerez à intérioriser tous
les principes. Bien sûr, à un moment donné, c'est vraiment bien si
vous commencez à vous
familiariser avec la
théorie du design. Mais c'est une façon de
commencer sans s'enliser. Peut-être que tu peux changer. Vous ferez un
peu de pratique, un peu de théorie et commencerez à appliquer ce que vous avez appris. Mais c'est une façon de
commencer sans connaître de théorie et de
justifier des plans d'adaptation. Maintenant, la prochaine étape
serait de commencer à
concevoir des choses dans Figma lorsque vous serez à l'
aise avec cela et vous pourrez recréer
tout ce que vous voyez. Vous pouvez donc voir une
application que vous aimez n'est pas déjà
créée et
qui est volumineuse. Alors peut-être que vous regardez
dans Instagram ou toute autre application que vous aimez ou dans l'application Watts
ou quoi que ce soit d'autre. Et vous pouvez commencer à
concevoir cela dans Figma lorsque vous commencerez à vous familiariser plus en plus avec l'outil. Et l'étape suivante
consiste à examiner une application qui, selon vous,
pourrait être améliorée. Peut-être que votre
application bancaire est vraiment très mauvaise et que vous avez toujours voulu
bien l'améliorer maintenant que vous
savez suffisamment utiliser Figma pour commencer
à créer un nouveau design. J'espère donc que cette vidéo vous
a été utile. Et si vous avez
des questions sur les prochaines étapes, quelque chose sur lequel vous êtes bloqué, contactez-moi dans mon e-mail et je vous verrai
dans la prochaine vidéo.
Amine Abdelkebir, UI/UX Designer
