UX/UI Design : Toutes les bases pour bien démarrer (Guide complet)

Vous vous intéressez à l'UX et à l'UI ? Mais avec tout le contenu disponible, vous avez l'impression d'être perdus ? Comment devenir un meilleur designer ? Dans cette vidéo on revoit tous les fondamentaux pour vous assurer de bien comprendre et construire des bases solides 👊
Que vous soyez déjà designer, étudiant ou simplement un développeur intéressé par le sujet de l'UX et de l'UI, cette vidéo est faite pour vous.
Cette vidéo sous forme de guide donne un maximum d'informations basiques et nécessaires pour devenir un designer complet.
00:00:00 Introduction
00:01:40 Quelles problématiques bloquent les designers ?
00:04:50 Différences entre UI et UX
00:07:50 Enjeux et risques du design
00:10:40 Pyramide de l'UX
00:12:40 Domaines et activités de l'UX Design
00:13:50 La démarche centrée utilisateur
00:17:00 Le Design Thinking
00:17:35 Les 5 fondamentaux en UI
00:18:00 Couleurs et contrastes
00:18:54 Espaces blancs et alignements
00:19:45 Hiérarchie visuelle
00:20:15 Complexité VS Simplicité
00:21:10 Styles de texte
00:22:00 Astuces pour de meilleures interfaces
00:22:05 Formulaires
00:22:50 Tableaux
00:24:30 Checkbox et radio button
00:25:15 Cards et affichage d'informations
00:26:00 Gestion des erreurs
00:26:45 Popups
00:28:20 Lois de perception visuelle, théories de la gestalt
00:28:35 Loi de proximité
00:29:45 Loi de similarité
00:30:50 Loi de continuité
00:31:30 Effet Von Restorff
00:32:00 Loi de fitts
00:32:30 Attention partagée
00:32:55 Le nombre magique de Miller
00:34:00 Loi de Hick
00:35:30 Accessibilité
00:42:15 Conclusion
Ressources et liens de cette vidéo :
🙌 Templates UX gratuits : design.giannipolito.fr/template/
Pyramide de l'UX : uxdesign.cc/the-ux-pyramid-1e...
Formation (gratuite) Enterprise Design Thinking par IBM : www.ibm.com/design/thinking
Formation "Initiez-vous au design Thinking" par Laurène Castor : openclassrooms.com/fr/courses...
Toutes les lois de perception visuelle : lawsofux.com
A11y pour Figma : www.figma.com/community/plugi...
Cluse pour Sketch : cluse.cc
Lighthouse pour Google Chrome : chrome.google.com/webstore/de...
IBM Equal Access Accessibility Checker : addons.mozilla.org/fr/firefox...

[@benghorbeldonia4889]

Bravo !!!! Cours très instructif et on ne s'ennui pas grâce aux exemples utilisés ! On veut la suite :D

[@bonsplanspourtout7648]

Ah ça, Ça se sent la maîtrise de son domaine quoi!

[@GianniPolito]

Un grand merci ! La suite arrive, j'ai déjà le contenu, il ne reste qu'à tourner 😄

[@benghorbeldonia4889]

@@GianniPolito Trop hâte 😄 !! Merciiii beaucoup 🙏🙏🙏

[@mathosh1690]

Ta vidéo est tellement bien faite, merci beaucoup ! Triste qu'il y en est peu d'autres comme celles-ci sur ta chaine, j'espère en voir tout plein arriver prochainement !! Bon courage :)

[@fuiung6948]

Très clair et fluide, bravo. Il faut continuer ! :D

[@patatrah]

Merci Gianni pour cette vidéo très claire, bien construite et pédagogique ! J'ai pu aller rapidement voir ce qui m'intéressait et tes exemples d'interfaces rendent tes explications encore plus claires. Je surveillerai tes prochaines sorties de vidéos 👍

[@GianniPolito]

Merci Patatrah! Hâte d'avoir tes retours sur les prochaines vidéos (qui arrivent très bientôt)

[@mathildevidal876]

Merci beaucoup pour cette formation très instructive !

[@leotadadi5381]

Merci pour cette vidéo essentielle, qui m'aide durant ma reconversion professionnelle !

[@m_f25]

Mec c'est incroyable ! Continue ce genre de forma d'apprentissage :)

[@GianniPolito]

Merci beaucoup! Oui je vais continuer. Il y a un sujet spécialement que tu avais en tête ?

[@williamsalomon4032]

Vidéo exceptionnelle, bravo et merci pour le contenu très instructif et le soin apporté à sa présentation, rien à redire, c'est parfait.

[@GianniPolito]

Avec plaisir William !

[@16EvaJade08]

Merci. Pour ce cours super pédagogique.

[@venoms9078]

Bravo ,des vidéos j'en ai consommé ces dernière années , votre format frôle la perfection c'est impressionnant.

[@GianniPolito]

Merci Venom pour ce feedback très positif !

[@isa8383]

Excellent !!! 👍 Merci beaucoup pour ces précieux conseils 🙏

[@GianniPolito]

Avec plaisir, merci Isabelle

[@lezigh8491]

Précision, concision, clarté... Du travail de pro accessible au plus grand nombre. Un grand MERCI ! Longue vie à ta chaîne !

[@GianniPolito]

Merci beaucoup Le Zigh, à très vite

[@user-gn6mj7yw3g]

super vidéo merci pour l'investissement et la simplicité d'explications pertinentes !

[@llalogann]

Merci pour la video, son contenu, le découpage et les liens dans la description, c'est parfait !

[@GianniPolito]

Avec plaisir llalogann !

[@aurelien1024]

Merci beaucoup pour cette vidéo ! Concise pour parler de tous ces aspects et très facile à comprendre !

[@GianniPolito]

Avec plaisir, oui je voulais faire condensé !

[@khemiridhafer8826]

Merci pour tes explications claires

[@ThePapillon2011]

Très clair et fluide, j'ai trop aimée la vidéo ;) Merci !

[@GianniPolito]

Un grand merci Rima!

[@stellavedaysha7994]

Magnifique, j'ai appris tellement de choses . Merci bcp

[@GianniPolito]

Avec plaisir Stella !

[@raptor78455]

Merci pour cette vidéo instructive, c'est clair et complet 😁

[@GianniPolito]

Merci beaucoup pour ton feedback Antoine !

[@LeGrandNain88]

Merci, beaucoup de notions que je n'avais pas trouvé ailleurs ! Très intéressant et très visuel avec de nombreux exemples, on comprends vite !

[@GianniPolito]

Merci Jai Rem ! Avec plaisir

[@Lingatsu]

Intéressant !

[@alexandre8869]

Super introduction par l'exemple de cette discipline. Je suis motivé à m’abonner et à lire sur le sujet.

[@GianniPolito]

Merci pour ton abonnement Alexandre!

Super introduction bravo !

[@GianniPolito]

Merci beacoup!

[@maliksmall9972]

Merci. Le contenu de la vidéo est fluide et claire.

[@nhupham7264]

C'est super votre vidéo. Elle m'aide à la fois apprendre de UI/UX et à aprrendre francais aussi. Merci à vous et bravo pour votre travail.

[@GianniPolito]

Merci à toi de l'avoir regardée !

[@laureimbertie4069]

Super bien. Merci bcp pour tout ce partage.

[@GianniPolito]

Avec plaisir Laure

[@thomaslepretre1477]

très clair, très complet ! Merci beaucoup !

[@GianniPolito]

Avec plaisir Thomas!

[@madamen3706]

Super vidéo ! Merci pour ce résumé au top !

[@GianniPolito]

Avec plaisir Madame N !

[@skaffen]

Excellent, un cours pas trop long avec des bonnes bases, merci !

[@GianniPolito]

Avec plaisir Skaffen!

[@mohamedlourak312]

Je vous remercie vivement. C est magnifique ce que vous faites

[@GianniPolito]

Avec plaisir Mohamed !

[@bombilafou]

Très utile, surtout pour les débutants, merci à vous

[@Jay-pr7bo]

franchement ta vidéo est grave interessante, j'adore

[@solomanantenarandriantsoa7862]

Super guide ! très instructif 😃

[@GianniPolito]

Merci beaucoup!

[@GDevWeb]

Vidéo très instructive, merci 😉

[@icapservices1536]

Merci beaucoup C'est vraiment clair et intéressant Notamment la partie Ui et l'accessibilité (norme RGAA notamment)

[@GianniPolito]

Merci! Oui tellement important l'accessibilité

[@laurentdessi2783]

Félicitations. Cette vidéo est juste parfaite. Un grand merci pour ce partage, ma foi.

[@GianniPolito]

Avec plaisir Laurent !

[@pierrickgrangier8301]

Bravo et merci pour la qualité de cette vidéo ! On comprend mieux les bases à acquérir pour optimiser une expérience utilisateur, ce qui n'est pas aussi simple qu'il n'y parait. Merci encore et une nouvelle vidéo sur la méthodologie de travail ? :-)

[@GianniPolito]

Merci Pierrick pour ton commentaire ! Oui c'est en effet très vaste, et il y a beaucoup à apprendre. Qu'entends tu par méthodologie de travail?

[@raainier]

merci pour cette vidéo, je connaissais pas le concept UX/IX j'ai regardé juste par curiosité mais j'ai l'impression d'avoir refait le monde là ahah bonne continuation

[@GianniPolito]

Merci beaucoup! Oui c'est une vidéo complète sur l'UX/UI

[@borishelvas5547]

Perfect ! Comme toujours

[@GianniPolito]

Avec plaisir Boris

[@RoobMannschaft]

Super ET cela m'a beaucoups Aidé à réaliser Mon projet!!!

[@GianniPolito]

Génial, content de voir que ça a pu t'aider !

[@hassounyproduct.9736]

très itule, merci pour le boulot et recherche effectuée🙌

[@GianniPolito]

Avec plaisir Hassouny 🙏

[@PowerMusic697]

J'ai vraiment aimer ce cours.

[@GianniPolito]

Ravi que tu aies apprécié le cours!

[@lalafatimachannel9155]

Vous êtes le meilleur vidéos extra merci

[@GianniPolito]

Merci à vous 😊

[@TomCodeur]

Au top, merci ;)

[@GianniPolito]

Avec plaisir 🙂

[@roselecorre976]

Super vidéo !!! Top ! Merci à toi :-)

[@GianniPolito]

Merci à toi 😊

[@breathoflife9614]

Superbe vidéo ! Totalement novice, ça nous montre vraiment l'importance du UX/UI Design notamment sur les sites qu'on utilise quotidiennement.

[@GianniPolito]

Ravi d'avoir pu t'aider !

[@alexisneto7610]

Très pédagogue, super vidéo, merci !

[@GianniPolito]

Avec plaisir Alexis!

[@xfuzionr3458]

Beau travail !

[@GianniPolito]

Un grand merci !

[@user-bh3ge1ks9g]

Merci d'avance

[@aminatacoulibaly1242]

Merci beaucoup pour la vidéo

[@GianniPolito]

Merci à toi Aminata !

[@aleksandramoskovchuk7222]

Merci beaucoup 😊

[@GianniPolito]

Avec plaisir!

[@Saiintss7]

Hello, très instructif ! Proposez-vous des formations plus détaillées (type UDEMY) pour aider à construire un projet de A à Z et complètement fonctionnel ?

[@funwithsarah1586]

Vidéo très complète : merci !

[@GianniPolito]

Avec plaisir !

[@danfleser4933]

Interesting tips

[@GianniPolito]

Thanks so much Dan!

[@sekolinfofana1922]

Merci pour la vidéo, c'est vraiment intéressant

[@GianniPolito]

Avec plaisir Sekolin

[@sekolinfofana1922]

@@GianniPolito on est ensemble

[@GianniPolito]

@@sekolinfofana1922 Toujours!

[@hamzabourabia9420]

respect et bravo

[@GianniPolito]

Merci Hamza

[@radoherihajason3364]

J'arrive un peu tard, super vidéo j'ai beaucoup appris ! petit truc à 28:02, La chanson c'est "human AFTER all" humain APRES tout !

[@GianniPolito]

Haha en effet bien vu !

[@lahcennaitelmoudni7510]

tres instructif

[@GianniPolito]

Merci Lahcen!

[@hanskemka1052]

j'aime bien

[@aureliendardenne9645]

Merci beaucoup pour ces tips, je débute totalement dans ce domaine et ça m'a donné une bonne idée ce ce qu'il en est. Pourrait-tu nous indiquer comment tu as fait tes slides surtout pour qu'elles soient interactives comme avec l'exemple des radio buttons et checkbox ?

[@GianniPolito]

Bonjour Aurélien et ravi de voir que tu as pu mieux appréhender le domaine de l'UX ! Ces slides ont été faites sous Figma, avec notamment les interactive components !

[@ilanmoreau5198]

Je rejoins les autres commentaires : super vidéo pour entrer en matière ! Est-ce qu'une suite arrive bientôt ? 😁 Encore merci pour ton travail

[@GianniPolito]

Merci Ilan! Je suis justement en train de monter une vidéo qui parle de tout ce qui faut savoir quand on veut une UX/UI mobile !

[@ilanmoreau5198]

@@GianniPolito Génial

[@deck614]

Le Design Thinking, l'UX et l'UI se pratiquent - partiellement - depuis la préhistoire ... Mais nous ne le savions pas :D et chaque "concepteur-trice" n'utilisait pas toute la palette des possibles! Elle/Il se contentait de ce qu'elle/il maitrisait le mieux, en fonction de sa personnalité et de ses interactions avec les "clients" les plus prévisibles ou connus. Théoriser cette façon de faire et le diffuser est donc vital. (Je viens de la préhistoire de l'informatique :D )

[@tanguypay]

Merci pour ta vidéo. A vrai dire, dans ton exemple de Heinz, il y a 3 générations de bouteilles qui peuvent bien expliquer l'UX. La première bouteille (qui n'est pas montrée explicitement sur tes slides) est une bouteille (lourde) en verre avec un couvercle devissable (les tâches sur les nappes et les murs venaient du fait qu'on devait taper au cul de la bouteille pour en faire sortir de la sauce). La deuxième que tu montres et qui est LA belle évolution design est une bouteille en plastique malléable (légère) équipée d'un bouchon-verseur. Enfin, la troisième est une révolution (c'est le cas de le dire) de la deuxième : ils ont "juste" renversé la bouteille en collant l'étiquette à l'envers (et en modifiant le galbe du récipient). Donc, la bouteille Heinz a vécu non pas une, mais deux révolutions design.

[@GianniPolito]

Exactement, des évolutions successives pour toujours améliorer leur expérience avec le produit !

[@jean-baptistehuet9426]

belle vidéo, un com pour le réf. Merci

[@GianniPolito]

Merci à toi

[@adelm2887]

Quel est le nom de la musique de fond au début (et les autres si possible, elles sont géniales !) Sinon, vidéo très claire et intéressante ! Merci 😉

[@antoinecandy]

Bonjour Gianni ! Merci pour cette vidéo, j'ai beaucoup appris ! As tu fait ce diapo avec Figma ?

[@GianniPolito]

Bonjour Antoine, bien vu! J'ai utilisé Figma pour les slides, notamment pour les transitions

[@JeanDeusdedit-wi4vf]

bonjour toujour !

[@benhayounraniya8876]

Bonjour, je vous remercie pour ce contenu très riche et constructif. J'aimerais suivre une formation ( maximum 1 an ) comme un DU par exemple d'UX / UI design en parallèle à mon master et alternance. Aurez-vous quelques une à me conseiller ? L'objectif est de maitriser la théorie mais surtout de pouvoir commencer mon portfolio. Merci

[@GianniPolito]

Bonjour Benhayounraniya! C'est une bonne question, 1 an c'est vrai que ça peut être court, mais ça dépend des études que vous êtes en train de faire ! Si vous voulez le faire en parallèle, alors plutôt s'orienter sur une formation en ligne, comme openclassroom, ou coursera. Pour commencer ça peut être pas mal. Dans tous les cas, pour remplir le portfolio, le meilleur moyen c'est les side projets. Soit en tant que freelance, bénévole (asso ou amis) ou encore sur des études de cas fictifs

[@fabienzabik1339]

Merci pour le contenu, on sent le recul et l'effort pédagogique. Je suis concepteur de systèmes industriel et je peine à trouver du contenu UX Ui qui me permettrait d'améliorer l'ergonomie et l'efficacité de nos IHM. Les objectifs diffèrent de ceux du Web. Est ce que vous avez des livres à me conseiller pour du design UX/UI sur ces sujets industriels d'IHM ? Merci d'avance

[@GianniPolito]

Hello Fabien! En effet, aujourd'hui on parle moins d'IHM, et plus d'UI. Les systèmes industriels est un thème très précis des interfaces applicatives d'employés. Mais les principes d'UX restent les mêmes (récolte du besoin, alignement, prototypage, tests, itérations...). Donc je recommanderais les classiques pour démarrer : "méthodes de design UX" de Carine Lallemand et "ergonomie web & ux design" d'Amelie Boucher

[@thomasdelcroix8057]

On révise pour demain :) a demain a l'fges :)

[@GianniPolito]

J'espère que l'exam s'est bien passé pour toi 😉

[@Bijuuu007]

Popschool est un bon établissement de formation pour ux/ui designer ? Que me conseillez-vous pour me former en ui/ux designer ? Quel établissement ? Le lieu ? Si c’est gratuit pour les demandeurs d’emploi ? S’il vous plaît

[@GianniPolito]

Hello! Pop school fait partie de ces nouvelles écoles/organismes de formation qui proposent des formations accélérées (en quelques mois) en conception ux/ui, en cible principale les personnes cherchant une reconversion. Je connais de nom, et ça a l'air d'être sérieux. Maintenant il pourrait être intéressant de demander à d'anciens élèves ou de faire les portes ouvertes !

[@jacquesphilippefadonougbo7531]

Bonjour, J'ai suivi votre vidéo. Et c'est très intéressant. Merci beaucoup pour l'explication détaillée. Mais je voudrais poser une question : Quelle est la différence entre la maquette réalisée et le site Web en vrai ? Est-ce-que la maquette réalisée représentante déjà le site Web en vrai ? Si c'est non, alors comment obtenir le site Web en vrai à partir de la maquette réalisée ?

[@GianniPolito]

Merci de ton commentaire ! Oui le but de la maquette est de représenter le plus fidèlement à quoi va ressembler le site final! La grosse différence entre les 2, c'est que le site web est codé, il est donc dynamique. Pour le coder, il faut soit le coder soit même, soit passer par un développeur ou bien encore l'intégrer soit même avec un outil comme "elementor". En espérant que ma réponse t'aide !

[@romfasul]

Whaoh

[@MrGarmot]

Excellent contenu, très instructif Cependant je suis à la recherche d'un UX Designer pour un projet à Paris, je t'en serais reconnaissant si tu m'en recommande un. Merci

[@GianniPolito]

Bonjour Cilyt, et merci de ton commentaire. C'est un peu compliqué de te proposer des profils ne connaissant pas ton projet ni ce que tu cherches exactement. Tu peux par contre aller poster un message sur le Slack de l'association Flupa, dans le channel emploi, en décrivant ton besoin. Je sais que plusieurs entreprises ont trouvé leur nouveau designer en faisant comme ça. Très bonne continuation

[@KmT81]

Très bon Cours ,bien détaillé . Ce qui m'interesserait ,c'est aussi le graphique ou peu être facilitation d'atelier car j'aimerais créer Un Site Personnel d'Arts appliqués ,de dessin et de placer en page de couverture des portraits dessinés, aquarelle, Nom en logo ,fond de couleur choisi. Comment faire ? J'aimerais être Auto-Entrepreneur en créant mon Site Personnel Artistique . Je sors d'une formation en design ,mais je suis en train de réapprendre car j'ai eu quelques difficultés.

[@GianniPolito]

Hello Khemt, si j'étais toi je chercherais une vidéo sur comment réaliser un portfolio, ça pourrait beaucoup t'aider :)

[@KmT81]

@@GianniPolito Ok ,ça marche merci! je vais regarder ça en tout cas, je continue de suivre tes vidéos. Elles sont très bien.

[@kawwz]

Salut, j'ai entendu que tu travaillais sur Lille, dans quel genre d'etudes superieurs te situes-tu ? Et aussi quel agence ? Merci

[@GianniPolito]

Je travaille en effet sur Lille, à IBM :)

[@jonathandjosseu1420]

MERRRRRRCCCCCIIIIIII

[@GianniPolito]

Mais de rrrrrrrrieeeeen 😄

[@Tsayart]

Bonjour ! J’ai pas compris en quoi l’exemple des bouteilles de ketchups illustre la différence entre UI et UX .. qui a fait quoi dans l’histoire ?? Ou qui est représenté par quoi ??

[@GianniPolito]

Hello The illustrArtor, la bouteille de ketchup est utilisé comme un objet physique pour représenter le produit numérique. Toutes les autres notions sont dans le slide en fond :)

[@Sokhyrr]

ton adresse apparaît à 30:16 fais attention, sinon très bonne vidéo!

[@safwanfaresse8575]

Qu'est ce qu'une boucle infini

[@k-rapidtv4338]

Bonjour peux tu revenir sur le salaire d'un UX/UI SVP

[@GianniPolito]

Pourquoi pas, tu veux savoir quoi exactement ?

[@k-rapidtv4338]

@@GianniPolito je suis entrain de me former en Concepteur UX. Je reçois chaque jour des offres d'emploi et donc je veux me préparer par rapport à la prétention salariale pour un débutant. Le travail est estimé à combien par mois? Ou par projet?

[@ayoubagbani530]

Bonjour je suis Designer mais je connais rien en coding est ce que peux devenir UX designer ?

[@GianniPolito]

Bonjour Ayoub! Oui c'est tout à fait possible, même si ça aide de savoir un peu coder

[@ayoubagbani530]

@@GianniPolito je connais un peu du html5 et css3 c'est tout :)

[@GianniPolito]

@@ayoubagbani530 c'est déjà très bien! Tu as les bonnes bases pour l'aspect front

[@AlainMazy]

Tu es Belge?

[@GianniPolito]

Ah non pourquoi cette question?

[@waffagaming7856]

Voir UI en compétences UX 🙃

[@GianniPolito]

Eh oui, les interfaces ont un impact majeur sur l'expérience utilisateur. Donc créer des UI est une des compétences clé de l'UX 😉 Mais je comprends que tu puisses tiquer!

[@M_WKM]

Pour ta loi de hick : L'interprétation ou l'explication est fausse car en fait c'est parce que on connaît pas les produits que l'utilisateur a du mal a choisir pas parce que il prend du temps car il y a trop de choix, Donc c'est le manque de connaissance des produits et le fait que les produits soit se ressemblent soit se différencie pas beaucoup

[@GianniPolito]

Merci pout to commentaire! C'est la première fois que je vois ce paramètre de non-connaissance des produits dans l''explication de la loi de Hick, c'est intéressant à noter en tout cas

[@marcotutoscrea]

Tuto 3D photoshop kzbin.info/www/bejne/rIS0cqt-gpV_faMsi=ZFEmXohoxiwMiwau