Atlas Design – Créer de belles interfaces
Atlas Design – Créer de belles interfaces
  • Видео 17
  • Просмотров 87 432
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
▬▬▬▬▬▬...
Просмотров: 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 ?

Комментарии

  • @saidamerzouki6550
    @saidamerzouki6550 Год назад

    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 :(

  • @PopooChannel
    @PopooChannel Год назад

    C'EST un peu complexe avec les opacités sur les mêmes plan de travail, y'a moyen de s'y perdre

  • @alainportant6412
    @alainportant6412 Год назад

    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

  • @dukecookie9021
    @dukecookie9021 Год назад

    tu regales

  • @afriquemodel2375
    @afriquemodel2375 Год назад

    j'ai pas loption delai

  • @pascalinecte7137
    @pascalinecte7137 Год назад

    Très bien fait !! <merci ca m'a beaucoup aidé :) j'espere qu il y en a d'autres :)

  • @cha2589
    @cha2589 2 года назад

    Merci beaucoup pour ce tuto :) Plus qu'à dupliquer la logique pour un 3 slides haha !

  • @yannngonga8355
    @yannngonga8355 2 года назад

    S’il te plaît doit on mettre l’icône à gauche ou à droite du texte ?

  • @jibubble8228
    @jibubble8228 2 года назад

    Merci ! :)

  • @Judaak_
    @Judaak_ 2 года назад

    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 ..)

  • @Thérèse_Hortense
    @Thérèse_Hortense 2 года назад

    En 6 minutes tu me parles mieux que d'autres en 8h de vidéo... Merci 👌

  • @thomaschausson9239
    @thomaschausson9239 2 года назад

    Merci BG

  • @atakankartas129
    @atakankartas129 2 года назад

    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 ? :)

  • @BHuot-xk7wo
    @BHuot-xk7wo 2 года назад

    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 :)

  • @davidj4123
    @davidj4123 2 года назад

    Les astuces sont géniales

  • @spip931
    @spip931 2 года назад

    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 ;-)

  • @RT-cz6fr
    @RT-cz6fr 3 года назад

    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 :)

  • @benjaminbaert275
    @benjaminbaert275 3 года назад

    Simple et clair, merci

  • @spip931
    @spip931 3 года назад

    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 ;-)

  • @ericbertrand2608
    @ericbertrand2608 3 года назад

    Vidéo très intéressante. Je m'abonne.

  • @u.tassinari2916
    @u.tassinari2916 3 года назад

    j'ai pas l'option délai 5:10

    • @Tibiscuit_OW2
      @Tibiscuit_OW2 2 года назад

      De même :/ que faire ?

    • @Tibiscuit_OW2
      @Tibiscuit_OW2 2 года назад

      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

  • @yuanjiaowang3753
    @yuanjiaowang3753 3 года назад

    merci

  • @sebastienbret260
    @sebastienbret260 3 года назад

    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

  • @nico.d3107
    @nico.d3107 3 года назад

    Super tuto ! merci beaucoup pour ton travail !

  • @-Veronik.
    @-Veronik. 3 года назад

    Merci beaucoup Axel ! Vos tutos sont toujours très enrichissants (formations UDEMY 👍). Belle continuation ! ✅

    • @AtlasDesignFR
      @AtlasDesignFR 3 года назад

      Merci beaucoup pour votre retour Ronie ! Bonne journée :)

  • @Zaphy_Z4phy
    @Zaphy_Z4phy 3 года назад

    J’ai adoré, hyper simple et hyper rapide à faire 😮

    • @AtlasDesignFR
      @AtlasDesignFR 3 года назад

      Merci ! Si tu as des suggestions d'effets, n'hésite pas :)

  • @Chaine621
    @Chaine621 4 года назад

    Simple, clair, rapide ! Bravo !

  • @simontorzec5405
    @simontorzec5405 4 года назад

    Merci pour cette vidéo

  • @melaniechzl
    @melaniechzl 4 года назад

    Salut! Super tes vidéos, quel est le plugin similaire sur Xd ?

    • @AtlasDesignFR
      @AtlasDesignFR 3 года назад

      Hello Mélanie, merci ! Tu as le plugin Stark qui semble faire la même chose dans leur version gratuite www.getstark.co

  • @xccraftcx
    @xccraftcx 4 года назад

    from my point of view the labels for email and password fields are still needed for a good ux

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      Yes, I agree! Thank you for your feedback :)

  • @kevindenon2336
    @kevindenon2336 4 года назад

    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

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      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

  • @cn-code9262
    @cn-code9262 4 года назад

    great concept

  • @philippejuin9577
    @philippejuin9577 4 года назад

    On pourrait dire "L'espace négatif est éclairant". Merci Axel

  • @sarahlilsakhli4075
    @sarahlilsakhli4075 4 года назад

    Merci pour ce tuto tout bien expliqué !! 😊 👌👍

  • @lesmedulistes
    @lesmedulistes 4 года назад

    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 ! 😀

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      Génial ! Ravi que les vidéos te plaise :)

  • @lesmedulistes
    @lesmedulistes 4 года назад

    Super idée ces "formations" vidéo en design. J'adore le concept, merci à toi ☺️

  • @michael-375
    @michael-375 4 года назад

    Salut... Sympa la vidéo / du coup je m'abonne. :-)

  • @clementbermon3566
    @clementbermon3566 4 года назад

    C'est moi ou j'ai un gros problème de son sur cette vidéo ?

    • @-Veronik.
      @-Veronik. 3 года назад

      Bonjour Clément, pour info, je n'ai pas eu de soucis audio... Bonne journée !

  • @aesdistribution6603
    @aesdistribution6603 4 года назад

    Tuto rapide et très explicite ! Et surtout en français ! Merci beaucoup !

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      Merci pour votre retour :) Je vous avez des suggestions de tutoriels, n'hésitez pas à m'en faire part. Belle journée !

  • @shinrakeyp
    @shinrakeyp 4 года назад

    L'état des composant c'est une nouvelle feature ?

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      Oui c'est arrivé il n'y a pas si longtemps même si maintenant ça doit déjà faire quelques mois :)

  • @designerluka.r2493
    @designerluka.r2493 4 года назад

    Toujours au top ^^

  • @taab84
    @taab84 4 года назад

    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

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      C’est totalement ça ! Et plus on prend conscience de ça, meilleures seront nos interfaces 🎯

  • @davidpro5277
    @davidpro5277 4 года назад

    L'exemple donné sur le site des impôts; Et bien je te rejoins totalement, c'est bordélique !

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      On a même pas l’information sur le fait qu’un champ soit obligatoire ou non (ça m’a même surpris parfois)

    • @davidpro5277
      @davidpro5277 4 года назад

      @@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 !

  • @AtlasDesignFR
    @AtlasDesignFR 4 года назад

    Que pensez-vous de cette définition ? Et avez-vous aimé ce format de vidéo ?

    • @arsougt8897
      @arsougt8897 3 года назад

      Un ux designer doit-il forcément être un web designer ?

  • @boblol77470
    @boblol77470 4 года назад

    Il n'y a pas de système me de grille layout sur XD ?

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      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 👍

  • @nialetrong5900
    @nialetrong5900 4 года назад

    Merci beaucoup pour ce tutoriel ! J'ai un projet à rendre sur XD et ta vidéo va beaucoup m'aider !

  • @designerluka.r2493
    @designerluka.r2493 4 года назад

    C'est nickel ^^ Tu pourras faire une vidéo pour moi ? AuroX.NoXid#5947 sur discord

  • @nghtmre76
    @nghtmre76 4 года назад

    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é,

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      Merci pour ton retour Sébastien :) Si tu as des idées de tutos plus complets qui te plairait, hésite pas

    • @nghtmre76
      @nghtmre76 4 года назад

      @@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.

    • @nghtmre76
      @nghtmre76 4 года назад

      Ok je retire ma proposition, je viens de voir que vous le faite déjà.

  • @davidpro5277
    @davidpro5277 4 года назад

    Personnellement, j'aime bien les petits tutos comme celui-ci !

    • @AtlasDesignFR
      @AtlasDesignFR 4 года назад

      Merci pour ton retour David :) Si tu as des suggestions n'hésite pas 👍

  • @TomCodeur
    @TomCodeur 4 года назад

    Au top ta vidéo ! Merci pour toutes tes corrections :)