- Видео 17
- Просмотров 87 432
Atlas Design - Créer de belles interfaces
Франция
Добавлен 20 мар 2020
Cette chaine vous apprend à designer de belles interfaces.
Comment créer un overlay (popup) dans Figma ?
Vous allez apprendre à ajouter un overlay sur vos designs. C’est justement cet effet utilisé pour ajouter des popups.
➡️ 4 règles fondamentales à connaitre : atlasdesign.fr/4-regles-essentielles
📦 Ressources
UI kit utilisé pour ce tutoriel : www.figma.com/community/file/836596421863073964/Mobile-UI-kit
👉 Vidéos à regarder ensuite :
Créer une ombre moderne : ruclips.net/video/QcAXAV5-oDY/видео.html
3 règles pour designer des boutons : ruclips.net/video/4JMqT6IiDmM/видео.html
C'est quoi un UX designer ? : ruclips.net/video/zqAKfJZmu9o/видео.html
▬▬▬▬▬▬▬▬▬ Sommaire ▬▬▬▬▬▬▬▬▬▬
00:00 : Introduction
00:11 : Mise en place du projet
02:43 : Ajouter l'effet d'overlay
06:36 : Démonstration avec un UI Kit
▬▬▬▬▬▬...
➡️ 4 règles fondamentales à connaitre : atlasdesign.fr/4-regles-essentielles
📦 Ressources
UI kit utilisé pour ce tutoriel : www.figma.com/community/file/836596421863073964/Mobile-UI-kit
👉 Vidéos à regarder ensuite :
Créer une ombre moderne : ruclips.net/video/QcAXAV5-oDY/видео.html
3 règles pour designer des boutons : ruclips.net/video/4JMqT6IiDmM/видео.html
C'est quoi un UX designer ? : ruclips.net/video/zqAKfJZmu9o/видео.html
▬▬▬▬▬▬▬▬▬ Sommaire ▬▬▬▬▬▬▬▬▬▬
00:00 : Introduction
00:11 : Mise en place du projet
02:43 : Ajouter l'effet d'overlay
06:36 : Démonstration avec un UI Kit
▬▬▬▬▬▬...
Просмотров: 6 363
Видео
Design Review : correction de la maquette de Julien
Просмотров 2574 года назад
Merci à Julien de m'avoir envoyé sa maquette. Dans cette vidéo nous allons voir quelques axes d'amélioration pour celle-ci. ➡️ 4 règles fondamentales à connaitre : atlasdesign.fr/4-regles-essentielles 👉 Vidéos à regarder ensuite : Créer une ombre moderne : ruclips.net/video/QcAXAV5-oDY/видео.html 3 règles pour designer des boutons : ruclips.net/video/4JMqT6IiDmM/видео.html C'est quoi un UX desi...
Nouveauté Figma : des milliers de ressources disponibles
Просмотров 3484 года назад
Découvrez l'onglet "communauté" dans #Figma pour télécharger des plugins et des ressources graphiques (comme des UI kits, des designs systems, ...) ➡️ 4 règles fondamentales à connaitre : atlasdesign.fr/4-regles-essentielles 👉 Vidéos à regarder ensuite : Créer une ombre moderne : ruclips.net/video/QcAXAV5-oDY/видео.html 3 règles pour designer des boutons : ruclips.net/video/4JMqT6IiDmM/видео.ht...
Tutoriel Adobe XD - Créer une page de connexion d'app mobile
Просмотров 6534 года назад
Ce tutoriel vous explique comment créer une page de connexion dans #AdobeXD pour une application mobile. 🔥 Formation complète sur Adobe XD : courses.atlasdesign.fr/adobe-xd-cours-complet 👉 Vidéos à regarder ensuite : Créer une ombre moderne : ruclips.net/video/QcAXAV5-oDY/видео.html 3 règles pour designer des boutons : ruclips.net/video/4JMqT6IiDmM/видео.html C'est quoi un UX designer ? : rucli...
Bouton avec un l'effet Ripple Tutoriel Adobe XD
Просмотров 1,3 тыс.4 года назад
Créer un bouton dans #AdobeXD avec le Ripple effect (effet de "vague" quand on clique dessus). On va utiliser les composants et leurs états pour réaliser cet effet. 🔥 Formation complète sur les animations dans Adobe XD : courses.atlasdesign.fr/adobe-xd-maitriser-les-animations 👉 Vidéos à regarder ensuite : Créer une ombre moderne : ruclips.net/video/QcAXAV5-oDY/видео.html 3 règles pour designer...
Concept fondamental : L'espace négatif en UI Design
Просмотров 7704 года назад
L'espace négatif définit l'espace vide qu'il y a entre les éléments d'une interface (c'est ce qui créé la structure et l'harmonie d'un #design réussi. ➡️ 4 règles fondamentales à connaitre : atlasdesign.fr/4-regles-essentielles 👉 Vidéos à regarder ensuite : Créer une ombre moderne : ruclips.net/video/QcAXAV5-oDY/видео.html 3 règles pour designer des boutons : ruclips.net/video/4JMqT6IiDmM/видео...
Adobe XD - Créer un modal de confirmation
Просмотров 1 тыс.4 года назад
➡️ Cours GRATUIT pour améliorer instantanément ses designs atlasdesign.fr/4-regles-essentielles ▬▬▬▬▬▬▬▬▬ Informations ▬▬▬▬▬▬▬▬▬▬ Ce tutoriel #AdobeXD t'explique comment créer un modal de confirmation en moins de 15 min. On va même créer ensemble 2 icônes pour enrichir l'expérience de nos utilisateurs. ▬▬▬▬▬▬▬▬▬ 📦 Ressources ▬▬▬▬▬▬▬▬▬▬ Fichier source à télécharger : axelparis.fr/download/gixx7...
Tutoriel Adobe XD - Loader animé en cercle
Просмотров 4,1 тыс.4 года назад
➡️ Cours GRATUIT pour améliorer instantanément ses designs atlasdesign.fr/4-regles-essentielles ▬▬▬▬▬▬▬▬▬ Informations ▬▬▬▬▬▬▬▬▬▬ Créer un loader en cercle animé dans #AdobeXD en seulement quelques minutes. Cet effet se base sur la bordure en pointillée des cercles. 🚀 Formation complète sur les animations dans Adobe XD : courses.atlasdesign.fr/adobe-xd-maitriser-les-animations ▬▬▬▬▬▬▬▬▬ 📦 Ress...
Comment créer une ombre moderne ? (UI Design)
Просмотров 1,2 тыс.4 года назад
➡️ Cours GRATUIT pour améliorer instantanément ses designs atlasdesign.fr/4-regles-essentielles ▬▬▬▬▬▬▬▬▬ Informations ▬▬▬▬▬▬▬▬▬▬ Comment créer une ombre moderne dans Adobe XD, Figma etc... ? Je vous montre ma technique en vidéo ! ▬▬▬▬▬▬▬▬▬ Liens ▬▬▬▬▬▬▬▬▬▬ 💬 Rejoignez le Discord : atlasdesign.fr/discord 🎨 Apprendre le design : atlasdesign.fr #ombre #uiDesign
C'est quoi un UX Designer ?
Просмотров 8584 года назад
➡️ Cours GRATUIT pour améliorer instantanément ses designs atlasdesign.fr/4-regles-essentielles ▬▬▬▬▬▬▬▬▬ Informations ▬▬▬▬▬▬▬▬▬▬ Le métier d'UX Designer est encore assez récent et sa définition peut pas mal varier. J'aimerais donc vous donner ma définition personnel : "Ce métier à pour but d'améliorer l'expérience et la satisfaction qu'un utilisateur aura en utilisant votre interface (site we...
7 RÈGLES pour designer des BOUTONS
Просмотров 9354 года назад
➡️ Cours GRATUIT pour améliorer instantanément ses designs atlasdesign.fr/4-regles-essentielles ▬▬▬▬▬▬▬▬▬ Informations ▬▬▬▬▬▬▬▬▬▬ Les boutons sont des éléments essentiels de vos designs. Ils représentent les actions que l'utilisateur pourra effectuer. Dans cette vidéo, je vais passer en revue 7 principes de base en me basant sur un article médium rédigé par Nick Babich. ▬▬▬▬▬▬▬▬▬ 📦 Ressources ...
UI Design : 3 règles pour designer des boutons !
Просмотров 1,7 тыс.4 года назад
➡️ Cours GRATUIT pour améliorer instantanément ses designs atlasdesign.fr/4-regles-essentielles ▬▬▬▬▬▬▬▬▬ Informations ▬▬▬▬▬▬▬▬▬▬ Dans cette vidéo, vous allez apprendre à designer de beaux boutons en UI design. Pour cela, nous allons parler de couleurs et de contraste #WCAG, d'espacement ou "padding" et enfin des coins arrondis (ou border-radius). ▬▬▬▬▬▬▬▬▬ 📦 Ressources ▬▬▬▬▬▬▬▬▬▬ En savoir pl...
Présentation de la chaine
Просмотров 9404 года назад
Apprends à créer de jolis sites web ! #présentation
Animation automatique dans Adobe XD (avancé)
Просмотров 23 тыс.4 года назад
➡️ Cours GRATUIT pour améliorer instantanément ses designs atlasdesign.fr/4-regles-essentielles ▬▬▬▬▬▬▬▬▬ Informations ▬▬▬▬▬▬▬▬▬▬ Ce tutoriel vous explique comment réaliser une animation automatique avancée dans Adobe XD. On utilisera la transition "délai" pour enrichir notre animation. ▬▬▬▬▬▬▬▬▬ 📦 Ressources ▬▬▬▬▬▬▬▬▬▬ 🔥 Formation sur les animations dans Adobe XD (8€ offert) : courses.atlasde...
Ajouter une icône dans un bouton : les règles à connaitre !
Просмотров 2,4 тыс.4 года назад
➡️ Cours GRATUIT pour améliorer instantanément ses designs atlasdesign.fr/4-regles-essentielles ▬▬▬▬▬▬▬▬▬ Informations ▬▬▬▬▬▬▬▬▬▬ Vous allez apprendre à ajouter une icône dans un bouton. Je vais utiliser Figma pour vous expliquer les différentes règles que j'applique à chaque fois que j'utilise des icônes. ▬▬▬▬▬▬▬▬▬ Liens ▬▬▬▬▬▬▬▬▬▬ 💬 Rejoignez le Discord : atlasdesign.fr/discord 🎨 Apprendre l...
J'améliore la maquette graphique d'un abonné !
Просмотров 3504 года назад
J'améliore la maquette graphique d'un abonné !
Comment créer un Slider dans Adobe XD ?
Просмотров 41 тыс.4 года назад
Comment créer un Slider dans Adobe XD ?
Hello, j'ai un souci, je souhaite en plus d'envoyer une overlay, ajouter un hover mais je n'arrive pas à faire les 2 en créant pourtant un composant et en faisant le proto depuis les composants :(
C'EST un peu complexe avec les opacités sur les mêmes plan de travail, y'a moyen de s'y perdre
Ok mais tu fais des sites avec ça, ou c'est pour faire joli... o, ma dit qu'il y avait un plugin MUI ^pour convertir ça en code, mais peutetre que CXD le fait tout seul
tu regales
j'ai pas loption delai
Très bien fait !! <merci ca m'a beaucoup aidé :) j'espere qu il y en a d'autres :)
Merci beaucoup pour ce tuto :) Plus qu'à dupliquer la logique pour un 3 slides haha !
S’il te plaît doit on mettre l’icône à gauche ou à droite du texte ?
Merci ! :)
Je cherche justement ça, mais sur html+css haha (et je galère un peu à trouver à vrai dire, mais peut être que je cherche mal ..)
En 6 minutes tu me parles mieux que d'autres en 8h de vidéo... Merci 👌
Merci BG
hello, merci pour le tuto, je fais la meme manip mais quand je bouge mon composant pour le "slide" il slide pour l'état par défaut également, tu peux me dire pourquoi ? :)
Top ton tuto Axel ! D'ailleurs je trouve que ton élocution pour les formations est vraiment agréable pour ceux qui souhaitent apprendre :) D'ailleurs si tu proposes des formations d'animations sur Figma comme ceux que tu as fais pour XD, je suis preneur :)
Les astuces sont géniales
Bonjour, Merci pour ce tuto. Comment faire pour que le défilement soit en boucle et automatique ? D'avance merci pour votre réponse Bonne journée ;-)
up :)
Bonjour, J'ai un petit probleme et j'aurais aimé savoir si tu pouvais m'aider ! Lorsque je sélectionne un élément dans "Prototype" et que je le glisse sur un autre plan, l'animation "Fondu" reste et il est impossible de modifier l'effet de transition :( j'ai tout essayé mais ca ne marche pas...pourrais tu m'aider ? Merci :)
Simple et clair, merci
Bonjour, Merci pour ce tuto. Je souhaiterai faire une animation (avec un overlay qui va du bas vers le haut) mais que ça se déclenche au survol de la souris (en fait comme sur ce CodePen codepen.io/hexagoncircle/pen/XWbWKwL) et non pas au clic comme dans votre tuto. Le mieux que j'ai réussi à faire c'est un overlay "classique" (c'est à dire qui s'affiche, sans aucune animation) au survol de la souris. Est-ce qu'on peut faire la même chose, sur XD, que sur mon exemple ? Si oui comment SVP ? D'avance merci Bonne journée ;-)
Vidéo très intéressante. Je m'abonne.
j'ai pas l'option délai 5:10
De même :/ que faire ?
Enfait c'est bon, il faut faire attention à sélectionner tout le plan de travail, et non pas le background sans faire exprès par exemple
merci
Merci pour ce tutoriel et ceux suivi sur Tuto.com. Peu de tutoriel sur des sliders et encore moins sur des sliders avancés et plus complexes. Petite question suite à cette exemple, mon déclenchement pour aller d'un slider à un autre ne se fait pas sur un élément graphique mais sur le rollover de mon bouton-composant flèche (ce composant est à l'intérieur du composant menu), mais en phase de protoypage je ne peux lui donner comme choix de destination la slider 2 (la destination proposée pointe vers l'état du composant bouton flèche et pas mon slider 2). Y at-il un truc qui m'échappe ? Autre question relatif au slider : J'ai trois slide qui sont des composants avec des éléments invisibles par défaut et un état ou ces éléments sont visibles (ces trois slides sont dans un composant slider avec leurs trois états (slide 1, slide 2, slide 3), cela fonctionne mais lorsque je met mon composant slider à l'intérieur d'une page (avec des boutons qui pilotent la navigation) les animations sont saccadées ceux qui n'est le cas mon art board ou j'ai conçu le slider. J'espère ne pas avoir été trop confus dans l'exposé de ces questions Merci de votre retour
Super tuto ! merci beaucoup pour ton travail !
Merci à toi Nico 😊
Merci beaucoup Axel ! Vos tutos sont toujours très enrichissants (formations UDEMY 👍). Belle continuation ! ✅
Merci beaucoup pour votre retour Ronie ! Bonne journée :)
J’ai adoré, hyper simple et hyper rapide à faire 😮
Merci ! Si tu as des suggestions d'effets, n'hésite pas :)
Simple, clair, rapide ! Bravo !
Merci Romain :)
Merci pour cette vidéo
Salut! Super tes vidéos, quel est le plugin similaire sur Xd ?
Hello Mélanie, merci ! Tu as le plugin Stark qui semble faire la même chose dans leur version gratuite www.getstark.co
from my point of view the labels for email and password fields are still needed for a good ux
Yes, I agree! Thank you for your feedback :)
Superbe vidéo. Comme tutoriel si possible comment utiliser figma et quelques ressources de cours que tu connais qui pourrais aider à le prendre en main
Merci Kevin, c'est prévu ! Les prochaines seront plus sur Adobe XD mais Figma arrive par la suite. SI tu veux commencer dès maintenant, j'ai sorti ce week-end un cours pratique sur la création d'une landing page dans Figma (elle est au tarif de lancement jusqu'à samedi prochain ^^) courses.atlasdesign.fr/figma-creer-une-landing-page?coupon=LANCEMENT
great concept
Thanks ;)
On pourrait dire "L'espace négatif est éclairant". Merci Axel
Merci Philippe !
Merci pour ce tuto tout bien expliqué !! 😊 👌👍
Merci pour ton retour Sarah 😇
Je vais bientôt investir dans le pack adobe !! Je reviendrai vers tes vidéos qui m'intéressent énormément en vrai, surtout vu que je débute la dedans ... mais j'ai depuis peu une chaine RUclips, alors je vais pouvoir améliorer mon contenu !! Merci ! 😀
Génial ! Ravi que les vidéos te plaise :)
Super idée ces "formations" vidéo en design. J'adore le concept, merci à toi ☺️
Merci beaucoup ;)
Salut... Sympa la vidéo / du coup je m'abonne. :-)
C'est moi ou j'ai un gros problème de son sur cette vidéo ?
Bonjour Clément, pour info, je n'ai pas eu de soucis audio... Bonne journée !
Tuto rapide et très explicite ! Et surtout en français ! Merci beaucoup !
Merci pour votre retour :) Je vous avez des suggestions de tutoriels, n'hésitez pas à m'en faire part. Belle journée !
L'état des composant c'est une nouvelle feature ?
Oui c'est arrivé il n'y a pas si longtemps même si maintenant ça doit déjà faire quelques mois :)
Toujours au top ^^
Merci 🙏
@@AtlasDesignFR ^^
je suis développeur web et si je suis le résumé du contenu de votre video: je faisait de l'UX design sans même m'en rendre compte
C’est totalement ça ! Et plus on prend conscience de ça, meilleures seront nos interfaces 🎯
L'exemple donné sur le site des impôts; Et bien je te rejoins totalement, c'est bordélique !
On a même pas l’information sur le fait qu’un champ soit obligatoire ou non (ça m’a même surpris parfois)
@@AtlasDesignFR Moi je cherchais l'option "Réduction d'impôt pour les œuvres caritatives"; ça m'a pris au moins 5 mn, même avec l'aide !
Que pensez-vous de cette définition ? Et avez-vous aimé ce format de vidéo ?
Un ux designer doit-il forcément être un web designer ?
Il n'y a pas de système me de grille layout sur XD ?
Si :) Il est d'ailleurs pas trop mal ! J'avoue que je ne l'utilise pas souvent mais ça m'aurait bien été utile pour cette vidéo ^^ Merci du retour 👍
Merci beaucoup pour ce tutoriel ! J'ai un projet à rendre sur XD et ta vidéo va beaucoup m'aider !
C'est nickel ^^ Tu pourras faire une vidéo pour moi ? AuroX.NoXid#5947 sur discord
Les astuces comme ça, c'est très bien. Merci des conseils. Je pense qu'il faut les 2 formats. Grand tuto projet complet et petite astuce. En tout cas merci pour le boulot effectué,
Merci pour ton retour Sébastien :) Si tu as des idées de tutos plus complets qui te plairait, hésite pas
@@AtlasDesignFR pas trop d'idée pour l'instant, mais c'est gentil de proposer. En tout cas pour moi qui ne suit pas très créatif, vous êtes une source d'inspiration. Je sais pas si vous pourriez faire (sur le volontariat bien sur) refaire le design de certain site avec votre vision... je sais pas si je suis compréhensible. En tout cas bon courage à vous.
Ok je retire ma proposition, je viens de voir que vous le faite déjà.
Personnellement, j'aime bien les petits tutos comme celui-ci !
Merci pour ton retour David :) Si tu as des suggestions n'hésite pas 👍
Au top ta vidéo ! Merci pour toutes tes corrections :)