Transcription
1. Introduction au cours: Bienvenue dans le
cours
interactif et amusant le plus simple qui soit. Cela vous fera passer des principes fondamentaux de
la conception et du développement d' UIUX à ce qu'il faut pour
maîtriser cette compétence Avant de commencer, laissez-moi vous montrer ce que
nous allons apprendre. J'ai bifurqué ce cours sur conception et la recherche
UIUX où vous apprendrez les facteurs, les étapes et tout ce qui concerne En ce qui concerne la conception et le développement de l'interface utilisateur, je l'ai encore une fois divisé en
principes fondamentaux de conception graphique, lesquels vous serez
familiarisé avec des outils tels que Photoshop,
Illustrator et Figma Développement de l'interface utilisateur, nous
apprendrons les bases du HTML, du
CSS et du JavaScript. Maintenant, pour une petite introduction à mon sujet, je suis Mariam et voici mon visage,
et vous pouvez trouver mon travail
sur Mariam Un petit
aperçu de caeojourney en guise d'avertissement, j'ai toujours
démontré que j'étais dans le domaine de l'animation
depuis J'ai suivi des cours d'animation PSE
au premier cycle. J'ai ensuite été sélectionnée pour
des stages chez Deloit en
tant que graphiste Mais en 2019, je me suis sentie confinée. C'est alors que je suis
tombé sur le design UIUX. Depuis que j'ai
découvert le design UIUX, je n'ai jamais regardé en arrière car ce domaine est
amusant et très demandé J'ai maintenant six ans
d'expérience, c'est
pourquoi je pense qu'il est
temps de passer à autre chose en enseignant mes compétences sur des
plateformes en ligne. Commençons.
2. Qu'est-ce que le design UX ?: OK, alors que signifie UX ? C'est l'expérience utilisateur
et qu'est-ce que cela signifie ? C'est la façon dont les utilisateurs interagissent
avec quelque chose. Maintenant, que signifie le design ? C'est l'apparence et la
fonctionnalité de quelque chose. Alors, que se passe-t-il lorsque nous
associons les
deux termes , design UX ? Le design UX consiste donc essentiellement à
concevoir
l'apparence et le fonctionnement de quelque chose pour le
rendre simple et amusant pour les autres. Toujours confus, examinons quelques exemples de bons et de mauvais UX
pour mieux comprendre l'UX. Allons-nous ? Maintenant, quelques
exemples d'une bonne expérience utilisateur peuvent être votre brosse à dents
, une bouteille d'eau ou simplement un interrupteur Permettez-moi de vous expliquer
cela un peu plus en détail. Le fonctionnement des brosses à dents consiste simplement à mettre du dentifrice sur la brosse
et à vous C'est ça. À quoi
sert une bouteille d'eau ? Nous ouvrons la bouteille,
en buvons et la fermons. C'est à peu près tout. À
quoi sert un interrupteur ? Nous l'allumons et l'
éteignons simplement lorsque nous avons besoin de lumière. Voilà à quel point une bonne expérience utilisateur est simple. Passons maintenant aux grands designs. La première photo
provient d'un restaurant. C'est une carte meno, et nous
savons tous qu'il est difficile de
choisir des plats une carte meno lorsqu'aucune photo n'est
fournie et lorsqu'
il y a
trop de plats Que diriez-vous d'une machine à laver ? Il y a tellement de boutons qu'il est parfois difficile de démarrer
une machine à laver à moins d'
avoir des conseils. Pareil pour le four à micro-ondes. Ne compartimentons pas
nos exemples en fonction de cela. Examinons un autre
exemple de baisse normale. Il s'agit d'un exemple de
porte à pression et à traction. C'est un exemple classique de la façon dont les
designs peuvent prêter à confusion, que vous ne
soyez pas certain
de pousser ou de tirer une porte. Lorsqu'il y a des poignées des
deux côtés de la porte, la poignée suggère de
tirer vers la porte à pousser, mais le panneau a poussé, ce qui crée évidemment de la confusion. Un bon UX est une plaque plate pour pousser et une
poignée pour tirer. Ce design vous indique clairement
ce qu'il faut faire. Aucun panneau n'est nécessaire. À présent, je pense que nous avons compris
le sujet de l'UX design. Examinons maintenant les facteurs liés aux conceptions
UX. L'une d'elles portera sur les attentes des utilisateurs. Le deuxième sera la facilité d'apprentissage. Le troisième est la liberté et le contrôle, et le quatrième est la
surprise et le plaisir. Examinons cela avec
un exemple de flipcard. Maintenant, nous ouvrons l'application
Flipcard et nous voyons tous les produits populaires que les gens achètent immédiatement
lorsque nous y accédons Si nous voulons quelque chose
en particulier, il suffit de
rechercher le produit dans
la barre de recherche,
et c'est rechercher le produit dans
la barre de recherche, ce que les utilisateurs
attendent de Flipcard Je pense que Flip Card fait un très bon travail en
répondant à ce facteur UX. Dès que vous entrez dans Flip
Cart, que faites-vous ? Vous recherchez le produit
souhaité et une fois que vous l'avez obtenu, vous l'achetez. Je ne pense pas que ce soit difficile du tout,
même en tant que premier utilisateur. C'est parce que
l'apprentissage est facile lorsque j'utilise cette application. Et si je change d'avis et que je souhaite annuler cette commande ? Que dois-je faire ? Est-ce que j'
ai le choix ? Ce sera un gros problème. C'est assez facile aussi, ce qui permet de cocher
le troisième facteur. Quel est le quatrième facteur ? C'est une surprise et un délice. Tout ce que contient le panier SuperCinsFlip, les codes promo,
les affiches de vente, les brochures et les cadeaux fournis avec la commande,
m'
intriguent et j'utilise encore Nous savons maintenant ce qu'est un bon UX , un
mauvais UX et nous
connaissons les facteurs. Mais comment concevoir le design UX ? Il devrait y avoir des
étapes et des étapes pour le faire. Cliquez sur la vidéo suivante pour découvrir les
étapes de l'UX design.
3. Étapes de la conception UX: d'un
UIC comporte cinq étapes clés processus de conception d'un
UIC comporte cinq étapes clés : comprendre,
analyser, idéer,
valider et Passons en revue chacune
de ces étapes afin de pouvoir appliquer efficacement ces principes à
nos projets. La première étape est de comprendre. Imaginez que votre patron vous ait assigné un
nouveau projet client. Première étape, tu comprends. Vous vous asseyez avec le client pour bien comprendre
sa vision. Il ne s'agit pas simplement de poser des questions au niveau de la
surface, il s'agit d'aller au
cœur du projet. Vous poserez des questions telles quel est l'objectif
du produit ? Quels sont les utilisateurs cibles ? Quelles palettes de couleurs
envisagez-vous ? Quels sont les
besoins et les objectifs de l'entreprise ? Vous devez également effectuer des recherches sur
les utilisateurs des produits, les concurrents et les tendances
du secteur. À ce stade, l'objectif est d' absorber le plus d'informations
possible afin de bien comprendre ce que le client et les utilisateurs
attendent de ce projet. Une fois que vous avez rassemblé
toutes les informations, il est temps de les analyser
et c'est notre deuxième étape. Ici, nous allons mener des enquêtes
quantitatives et
qualitatives. Que sont les enquêtes qualitatives ? C'est là que vous allez
approfondir les connaissances des utilisateurs. En interrogeant un
petit nombre d'utilisateurs, vous leur posez des questions
ouvertes pour obtenir des réponses riches et détaillées Par exemple, si vous
concevez une plateforme d'
apprentissage du fitness, interrogez peuvent
être des passionnés Voici quelques
questions ouvertes que vous pourriez poser. Comment maintenez-vous la cohérence
de votre programme de remise en forme ? Quels sont les défis auxquels vous faites face
lorsque vous essayez de rester en forme ? Que pensez-vous de l'utilisation des plateformes
en ligne pour l'éducation
physique ? Désormais, les questions ouvertes
permettent aux utilisateurs de fournir des réponses
plus réfléchies et
élaborées qui
vous aident à comprendre leurs véritables
besoins et leurs points faibles. Parlons maintenant des enquêtes
quantitatives. Il s'
agit davantage de chiffres. Vous allez envoyer des questions
fermées à un plus grand nombre de personnes afin d'
avoir une perspective plus large. Maintenant, que sont les questions
fermées ? Ils nécessitent des réponses spécifiques
limitées,
telles que oui ou non, ou un choix
parmi les options données. Regardons quelques exemples. À quelle fréquence fais-tu
de l'exercice chaque semaine ? Utilisez-vous régulièrement des
applications de fitness ? Regardez-vous et
suivez-vous des vidéos de fitness ? Avec les enquêtes quantitatives, vous collectez des données sur
les tendances et les modèles, ce qui est tout aussi important
pour comprendre besoins des
utilisateurs
à plus grande échelle ou à grande échelle. Une fois que vous aurez collecté
les deux types de recherches, vous créerez des
personas d'utilisateurs et des cartes d'empathie Ces outils vous aident à
visualiser qui sont vos utilisateurs, ce dont ils ont besoin et
ce qu'ils doivent penser des problèmes que
votre produit vise à résoudre. Qu'adviendra-t-il de la
prochaine étape ? Passons à l'idéation. Maintenant que vous avez une
solide compréhension des deux premières étapes, il est temps de passer à l'idée.
C'est la partie la plus amusante. Vous allez générer autant d'
idées que possible, farfelues qu'elles puissent paraître. À partir de là, vous allez
commencer à réfléchir, à
dessiner, à créer des cadres io, à
concevoir et à prototyper L'objectif ici est d'organiser toutes les idées et les idées sous
forme de solutions tangibles. Passons maintenant à la
quatrième étape, qui est la validation. Vous avez déjà votre design
et votre prototype, mais comment savez-vous qu'ils
fonctionneront pour les utilisateurs, n'est-ce pas ? C'est là que la validation
entre en jeu. Les tests d'
utilisabilité sont une méthode populaire. De vrais
utilisateurs interagiront avec votre produit pour voir à quel point il est
facile à utiliser pour eux. Une autre méthode est le
test AB où vous présentez deux versions différentes de votre design et déterminez laquelle
est la plus performante. Les commentaires issus de ces tests sont froids car ils mettent en évidence les forces et
les faiblesses de votre conception. Ensuite, nous répétons et
c'est notre cinquième étape. Le processus de conception UX ne s'arrête pas une fois le
produit validé. Il est temps de peaufiner et d'améliorer. Vous allez prendre en compte les commentaires que
vous avez reçus, passer en revue vos conceptions et
apporter les modifications nécessaires. Ensuite, vous allez tester à nouveau. Ce processus itératif se poursuit
même après le lancement de votre produit , à mesure que les besoins des utilisateurs
et les tendances du marché évoluent Ce cycle, qui comprend, analyse, idéation, validation
et itération, constitue l'épine dorsale d'une conception UX réussie Il ne s'agit pas d'un processus ponctuel, c'est un processus continu qui
garantit que votre produit continue de s'améliorer au fil du temps. Dans la vidéo suivante, examinons les principes fondamentaux de la
conception graphique.
4. Les bases de la conception graphique: Qu'est-ce que le design graphique ? C'est tout ce que vous voyez
qui implique des lignes, des formes,
des textures et un équilibre. Décomposons-le.
Les lignes peuvent être fines, épaisses, courbes, tout ce qui sépare les
éléments et ajoute du sens Par exemple, le site Web du New
York Times. Il utilise des lignes pour guider vos
yeux à travers le contenu, ce qui facilite la navigation dans l'interface utilisateur et rend les choses
extrêmement simples. Nous avons deux types de formes, les formes géométriques et les formes organiques. Maintenant, que sont les formes géométriques ? Cercles carrés, triangles,
polygones, hexagones. Ce sont eux que tu
connais depuis l'école. Des formes organiques comme
les feuilles, les nuages, les montagnes qui proviennent de la nature et apportent une ambiance plus
fluide et naturelle On les appelle des formes organiques. Parlons maintenant des formulaires. La forme est juste une forme avec de la
profondeur, de l'ombre et de la lumière. Donnez de l'ombre, de la lumière
et de la profondeur à un cercle
plat , et boum,
vous obtenez une sphère Il en va de même pour le triangle. Regardez cette carte de menu. La façon dont les ombres,
les lignes et les formes fonctionnent ensemble rend ce design
plus interactif et amusant. Sans ces éléments, il
serait plat et terne. Il en va de même pour cette affiche. Parlons maintenant de l'équilibre. L'équilibre consiste à faire en sorte
que les choses soient équilibrées. Cela dépend de la couleur, de la taille, du nombre d'éléments et de la façon dont vous utilisez l'espace négatif. Trouvez l'équilibre et
votre design sera harmonieux
et il vous suffira d'écrire. Tout comme cette conception Web. Les textures peuvent faire
ou défaire un dessin. Utilisés, ils ajoutent de la profondeur, abusent, et c'est le bordel Comme ce design, où trop de texture a gâché
l'apparence générale. Parlons maintenant de
la règle des tiers. Il divise votre dessin
en neuf parties égales, vous
aidant à créer une composition
équilibrée. Par exemple,
regardez cette photo. En décentrant le
sujet, il met l'accent à la fois sur le
modèle et sur l'arrière-plan, ce qui rend l'image plus dynamique. La plupart des designs suivent cette règle car elle
guide naturellement le regard du spectateur. Mais parfois, le casser
peut être tout simplement efficace. Je veux dire, expérimenter à
la fin de la journée est essentiel. Ce sont également les
sites Web qui vous seront
utiles dans votre carrière graphiste
ou de concepteur URUX Qu'il s'agisse d'icônes ou d'images, elles sont toutes libres Restez à l'affût et nous
verrons comment la mise en page et la composition
réunissent
tous ces éléments pour créer de superbes designs.
5. Mise en page et composition: La mise en page et la composition
sont essentielles dans le design. Ils apportent structure et clarté grâce à cinq
grands principes :
proximité, espace blanc, alignement, contraste, hiérarchie
et répétition. Décomposons-les. La proximité consiste à
regrouper des éléments
connexes afin de rendre le contenu plus clair et plus facile
à comprendre. Prenons, par exemple, ce CV. Les détails tels que
l'éducation, l'expérience et les compétences sont soigneusement
regroupés. Nous pouvons facilement vous suivre. Tout est à sa place, ce qui le rend super lisible. Regardez maintenant ce
site Web appelé Slice. Vous pouvez voir comment le texte et les
graphiques sont regroupés. Texte à droite,
graphiques à gauche, tous les éléments connexes
sont rapprochés, ce qui crée un
sentiment de proximité. Il en va de même pour les cartes concernant le paiement automatique des
comptes
et l'analyse des dépenses Même si les
designs sont différents, ils sont regroupés pour
communiquer sur un seul sujet. Ensuite, l'espace blanc, également appelé espace négatif. Il s'agit d'utiliser l'espace
vide pour réduire encombrement et améliorer la clarté.
Pensez-y comme ça. Avez-vous déjà vu ces images
minimalistes où deux couleurs seulement sont utilisées, alors que vous
voyez clairement
deux hommes face à face une clé ou des ours s'étreignant C'est le pouvoir des espaces
blancs dans le design. Rendre les visuels complexes
simples et propres. Sur l'alignement où
tout se met en place. Regardez ce
site Web de carte de crédit appelé OneCard. Vous remarquerez que
le texte est aligné à gauche et les
graphiques à droite. Encore une fois, la proximité et
les espaces blancs sont également utilisés ici.
Peux-tu les remarquer ? Que ce soit à gauche, à droite ou au centre, l'alignement permet de garder les choses organisées
et visuellement attrayantes. Passons maintenant à Figma pour explorer l'alignement grâce à
une activité pratique Voici quelques formes que
nous allons aligner sur
les bords de ce cadre. Mais avant
cela, commençons par créer un
fichier de design dans Figma Allez-y et créez
votre nouveau fichier de conception. Assurez-vous de nommer
votre fichier de conception. Je vais appeler ce fichier
mon premier projet Figma. Maintenant, je vais également
renommer ces pages. La première page sera consacrée aux
principes fondamentaux de l'alignement. Je vais maintenant coller
le
travail de base sur l'alignement que j'ai fait pour vous en cliquant simplement
sur Control C,
Control V, ou je pourrais simplement cliquer avec
le bouton droit de la souris et copier. Coller. Maintenant, commençons. Première forme, je
vais l'aligner en haut à gauche sur le haut droit et
celle-ci au centre en haut. Ces outils sur la droite sont très pratiques pour
l'alignement. Venons-en aux triangles. Celui-ci au centre gauche, le dernier triangle
au centre droit, et celui du milieu
reste au centre. Passons maintenant aux cercles. Le premier en bas à gauche, le
dernier cercle en bas à droite et le cercle
du milieu en bas. C'est à peu près tout
pour cette activité. Découvrons maintenant le contraste. Le contraste est essentiel pour faire ressortir les
éléments, attirer l'attention et montrer
ce qui est important dans le design. contraste peut faire ou
défaire votre design, nous devons l'utiliser judicieusement. Prenons l'exemple de Cred. Ils misent beaucoup
sur le noir et blanc. Pourquoi ? Parce qu'elle recherche une ambiance minimaliste et élégante qui reflète la sophistication
et la simplicité, en accord avec son image de marque
haut de gamme Honnêtement, il s'
agit de créer un impact visuel fort sans
submerger l'utilisateur. Pour vérifier le contraste, nous disposons d' outils tels qu'Adobe
Contrast Checker Il permet de garantir l'
accessibilité de votre design en prévisualisant le texte
normal, le texte
volumineux et les éléments
graphiques Je recommande de choisir
deux couleurs contrastantes qui réussissent les trois tests : texte
normal, texte volumineux
et éléments graphiques. S'ils ne passent pas,
ils fatigueront les yeux de
votre utilisateur et n'oubliez pas de vérifier
son daltonisme. Selon des études,
un homme sur 12 et une femme sur 200 sont
daltoniens dans le monde. Utilisez le bouton du correcteur
de contraste
pour simuler le daltonisme Cela garantit que votre design
est clair pour tout le monde. Voici quelques exemples de
bons et de mauvais contrastes pour
que vous puissiez voir la différence. Parlons maintenant de hiérarchie. Pensez à la hiérarchie dans le design comme à une chaîne de commandement sur
le lieu de travail. En tant que débutant, vous ne
montrez pas immédiatement votre travail au
client Il est d'abord transmis à
votre chef d'équipe, puis au responsable et enfin au client
après plusieurs approbations. Le même concept
s'applique au design. La hiérarchie guide les utilisateurs
à travers votre contenu, en mettant l'accent sur ce qui est
le plus important. Prends soin de toi encore une fois. Notez que les en-têtes sont grands et gras, le corps du texte est beaucoup plus petit C'est la hiérarchie en action. Il vous indique où
chercher en premier. J'ai compris. OK.
Passons maintenant à la répétition. La répétition renforce
la cohérence et l'identité
de votre design C'est pourquoi nous nous en tenons à une palette de couleurs, à des styles de
police et à des composants
définis tout au long d'un projet. Qu'il en soit ainsi même si le projet compte une
quarantaine de pages Web. Regardez Eudemi ou
Skillshare, par exemple
, leurs fiches de cours
sont répétées à de
nombreuses reprises dans la mise en page, ce qui renforce la structure de
conception et la lisibilité Parce qu'en fin de compte,
vous voulez inciter les utilisateurs à s'inscrire
aux cours
au lieu de voir
la mise en page d'Udemi ou de Skillshare Nous avons traité de la
mise en page et de la composition. Ensuite, les polices et la typographie. Rendez-vous dans la prochaine vidéo.
6. Vidéo suivante - Mercredi prochain ; restez à l'écoute: Salut, les gars, juste un
petit avertissement. Ma prochaine vidéo sortira mercredi
prochain. Mais si vous ne voulez pas attendre, rejoignez mes cours interactifs
en
ligne pour des sessions en face à face
avec des commentaires en temps réel. Pour plus de détails, contactez mon
responsable via Whatsapp via le lien dans la biographie ou
rendez-vous sur Mare Purves point Rendez-vous au prochain cours ou
dans la prochaine vidéo. Tata
Mariam Parvez, Fueled by coffee and driven by what my h
