uiverse.io : La galaxie d’éléments UI gratuits pour vos projets
📌 uiverse.io est une immense bibliothèque open-source d’éléments d’interface (UI) gratuits, créés en HTML/CSS par une communauté de passionnés, prêts à être copiés-collés.
-
-
ANIME.JS : La bibliothèque JavaScript ultra-légère pour des animations web fluides ⚡
📌 ANIME.JS est une bibliothèque JavaScript ultra-légère et polyvalente, conçue pour créer des animations web fluides et performantes. Avec seulement quelques kilobytes, elle offre une API intuitive pour animer tout type d’éléments : CSS, SVG, attributs DOM et objets JavaScript.
-
SUPERDESIGN : Open Source Design Agent
📌 Superdesign.dev est une extension VsoCode / Cursor / Windsurf / etc… qui révolutionne la création d’interfaces grâce à l’intelligence artificielle. Pensé pour s’intégrer directement dans les éditeurs de code modernes, il permet d’explorer, tester et générer plusieurs pistes de design en quelques secondes.
-
DOCFIX : Reimagine ton dock macOS
📌 DockFix est une application conçue pour transformer complètement votre expérience sur macOS et propose une personnalisation poussée de votre Dock, ouvrant la porte à des options inédites. Plus qu’un simple ajustement visuel, DockFix permet d’aller au-delà des limites imposées par macOS.
-
WINS : Apporte une gestion des fenêtres au niveau système sur Mac
📌 Wins est une application macOS inspirée de l’expérience fluide de la gestion des fenêtres de Windows. L’objectif est simple : rendre chaque interaction plus rapide, plus intuitive, et surtout plus productive.
-
SITER : Outil de création de sites web No-code
📌 Siter.io est une application qui permet de créer des sites web sans coder. En quelques minutes, il est possible de concevoir et publier un portfolio, une landing page ou un site de présentation avec une liberté totale sur le design.
-
CEREBRAS CODER : Générer des applications en moins d’une seconde
📌 CEREBRAS CODER est une application qui simplifie la création de vos projets en déléguant le code à une IA. J’ai fait un test avec le jeu 2048, et j’ai obtenu un résultat super en seulement 3 prompts, grâce à une génération de code instantanée et optimisée.
-
10 astuces de conception incontournables pour élever votre marque en 2025
Aujourd’hui, nous allons voir ensemble dix astuces de conception qui vous aideront à faire une bonne première impression.
-
LOTTIELAB : Vos animations simplement
📌 Lottielab est un outil de motion design en ligne, pour les équipes de produits. Importez des éléments depuis vos outils de design préférés, comme figma, ou créez-les de toutes pièces dans Lottielab. Animez facilement et rapidement, avec une interface intuitive et des fonctionnalités puissantes.
-
UNICORN : Créez des scènes animées et interactives pour votre site web.
📌 UNICORN est un service permettant d’améliorer votre site Web avec des effets WebGL stylés, du mouvement et de l’interactivité, rapidement, en quelques minutes.
-
CALBAR : Mini-calendrier est à portée de clic.
📌 CALBAR est une application simple qui vous permet d’avoir un mini calendrier toujours disponible dans votre barre de menus Macos. Plus de nombreuses fonctionnalités pratiques pour aller plus loin dans votre expérience.
-
20 compétences techniques indispensables pour les UX designers en 2024
📌 Je vous mets ici une traduction d’un article vraiment sympa sur les compétences clés d’un UX designers. Je me suis permis également d’amender, de compléter et d’ajouter un certain nombre de commentaires 😉
-
Rive – L’application d’animation pour les designers
📌 RIVE EDITOR est une application qui vous permet de concevoir des animations complexes avec une riche interactivité, et ces animations se traduisent de manière transparente en code que les développeurs peuvent utiliser directement. Pensez-y comme un pont entre le monde des visuels et celui des produits fonctionnels et opérationnels.
-
SUMOPAINT : Edition d’images en ligne
📌 SUMOPAINT est un service en ligne d’édition d’images permettant de dessiner, combiner des images, leur appliquer des filtres, ou encore des éléments texte. Plus de 300 pinceaux différents ainsi que de nombreux effets sont disponibles.
-
WORDANCE : Vos textes animés, en musique
📌 WORDANCE permet de réaliser rapidement des vidéos promotionnelles à partir de textes et de fichiers audio.
-
PLASK.AI : Le motion capture facilement
https://plask.ai/ 📌 PLASK est un service d’animation 3D basé sur l’intelligence artificielle. Il permet aux utilisateurs de créer des animations réalistes, a base de motion capture, mais sans avoir besoin d’un costume de capture de mouvement. Le service fonctionne en utilisant un modèle d’apprentissage automatique pour analyser des vidéos de personnes en mouvement. Le modèle…
-
Critères ergonomiques de Nielsen & Molich mais aussi les 8 règles d’or de Shneiderman
📌 LES CRITERES ERGONOMIQUES CE BASTIEN ET SCAPIN restent mon réferentiel numero 1 en terme de conception. Ils permettent de conserver à l’esprit les exigeances auxquelles mon interface doit répondre ainsi que le niveau d’éxigeance dans le détail de la conception, en ne s’arretant pas au cas nominal !
Ci dessous la traductions de 2 autres grilles de critères heuristiques, plutot connus, mais une petite piqure de rappel ne fait pas de mal 😉
-
MAGICA VOXEL : Création 3D en Voxel
📌 MAGICA VOXEL est une plateforme de création et de modélisation 3D qui offre une expérience intuitive et puissante pour les artistes et les amateurs de voxel art. MagicaVoxel offre un environnement convivial pour la création de modèles 3D pixelisés.
-
BATFI : Augmenter la durée de vie de la batterie de votre Mac
📌 BATFI est une application MacOS vous proposant de remplacer la gestion classique de votre batterie par une application plus personnalisable et offrant des fonctionnalités d’optimisation de la durée de vie de votre batterie.
-
CSS LAYOUT : Bibliothèque de composants et animations CSS
📌 CSS LAYOUT est une librairie de centaines de composants pour les développeurs web qui cherchent à créer des sites web professionnels et visuellement attrayants. La collection comprend un large éventail de composants, tels que des menus de navigation, des boutons, des formulaires et des cartes, tous conçus à l’aide des techniques de mise en page CSS.
-
BLOCKBENCH : Un éditeur de modèles 3D facile à utiliser pour le low-poly et le pixel-art.
📌 BLOCKBENCH est un outil gratuit, de création 3D low-poly mettant tous les outils à votre disposition pour rendre le processus de création de modèles low-poly aussi simple que possible.
-
GIFSKI : Video 2 GIF
📌 GIFSKI est un outil gratuit permettant de convertir vos vidéos en animations GIF en utilisant les fonctions sophistiquées de pngquant. Il produit des GIFs animés qui utilisent des milliers de couleurs par image.
-
PROTOTYPER : Donnez vie à votre conception avec du code dans Figma.
📌 PROTOTYPER est un plugin Figma permettant d’injecter directement du code dans vos prototypes figma.
-
ANIMIX : De puissantes animations dans Figma
📌 ANIMIX est un plugin FIGMA proposant de créer des animations directement depuis Figma.
A la manière d’After Effect, vous disposez d’une Timeline et de Keyframes pour laisser libre cours à vos idées. -
IPREVIEW : Plus de formats supportés pour votre MacOS preview
📌 IPREVIEW est une application MacOS qui résout le problème de certains fichiers qui ne peuvent pas être prévisualisés dans macOS Finder, Quick Look et surtout Spotlight.
IPREVIEW vous aide à améliorer considérablement l’expérience macOS en fournissant la mise en évidence du code, la prévisualisation du rendu Markdown et Jupyter, la prévisualisation des images Webp et Avif et l’affichage de leur taille, la prise en charge d’une variété de fichiers de modèles 3D et la prévisualisation des animations, la prise en charge du mode sombre, etc. -
ARQ : Outil NoCode de réalité augmentée
📌 ARQ vous permet de créer et de travailler des animations 3D, à l’aide d’objets 3D et d’une timeline, et de créer des interactions complexes avec ceux-ci.
-
MOKO : Bibliothèque SVG et Lottie dans le cloud
📌 MOKO est un outil qui permet de stocker vos visuels, illustrations et animations aux formats SVG ou Lottie.
#cmondary -
JITTER • L’outil MotionDesign dans votre navigateur.
📌 JITTER est un outil MotionDeisgn, en ligne, vous permettant d’animer facilement vos créations et d’exporter vos créations sous forme de vidéos ou de GIF, le tout, directement depuis votre navigateur.
-
PREVIEWED : Customizable 3D Mockup
📌 PREVIEWED est un générateur de mockup 3D. Une fois vos mockups créés, l’outil vous permettra de créer des vidéos animées de votre mockup en quelques minutes.
-
DAVINCI RESOLVE : Application montage video
📌 DAVINCI RESOLVE est une application gratuite, alternative à AfterEffect.
#cmondary #Tools #Video -
VOLT : Kit Gratuit pour FRAMER
📌 VOLT est un #kit gratuit pour #Framer. Il regroupe 11 prototypes et permet donc d’essayer très simplement le #prototypage dans Framer. Parcourez les #prototypes, puis prévisualisez-les, dupliquez-les et essayez les différentes animations, interactions et l’ensemble des possibilités offertes par FRAMER
#cmondary -
GUIDE : From Sketch / Figma to After Affect
📌 ARTICLE très complet sous forme de guide pas à pas pour créer de petites animations, et micro-intéractions sous after effect après importation des sources Sketch / Figma.
L’idée est simplement d’utiliser les animations sous #AfterEffect pour donner vie à votre interface et montre comment toutes les éléments doivent se comporter et interagir. -
USE ANIMATIONS : librairie d’icônes animés au format JSON
📌 USE ANIMATIONS est une librairie d’icônes animés au format JSON.
Très pratique pour donner rapidement du feedback à l’utilisateur, sans trop surcharger les devs 😉 #Icons #Animation #Feedback #UI #cmondary -
15 meilleurs plugins FIGMA
📌 FIGMA se dote de plugins et comble par la même occasion son « retard » sur SKETCH. Ici un article sur les 15 meilleurs
-
FIGMOTION – Figma Plugin
📌 FIGMOTION est un plugin permettant de créer des animations dans FIGMA.
-
Animation TIPS
📌 ARTICLE très intéressant sur les caractéristiques d’une bonne animation, d’un bon design d’interaction. Toujours à garder à l’esprit : – Les animations doivent être pertinentes – L’animation doit soutenir l’interaction – L’animation ne doit jamais ralentir l’expérience – L’animation doit être naturelle – L’animation doit refléter l’image de marque – L’animations doit tenir compte de la faisabilité technique
-
MOKUP
📌 MOKUP est un outil de prototypage qui monte très discrètement, mais qu’il faut garder du coin de l’oeil.
-
The ultimate guide to proper use of animation in UX
📌 GUIDE détaillé sur la manière de réaliser de bonnes animations motion. Le tout avec de nombreux exemples et de petites animations explicatives très graphiques.
-
Motion Periodic Table
📌 FOXCODEX est un tableau périodique du MOTION DESIGN.
-
Anima : padding in sketch
📌 ANIMA continue de s’imposer comme étant LE plugin SKETCH incontournable, avec l’annonce d’une fonction PADDING permettant de retailler les boutons et champs de saisie à la taille du texte qu’ils contiennent (adieu PADDY le plugin dédié…)
-
Micro intéractions
📌 Sujet récurrent pour moi, Les micro-interactions, et animations au service de l’expérience utilisateur.
-
TIMELINE Sketch Plugin
📌 Le plugin Sketch TIMELINE (de anima) se met à jour et propose dans sa version 2 de créer des composants interactifs.
-
Brush.ninja
📌 BRUSH NINJA est un service web permettant de créer de petites animations GIF, frame par frame.
-
Three-dots
📌 THREE DOTS est un petit projet sur Github sympa qui fourni 14 types différents d’animations CSS , des fameux 3 petits points qui vous invite à patienter. Il est amusant de retrouver sur une même base de 3 petits points , différentes conventions de signifiance des codes (Chargement, traitement en cours, écriture en cours, ….)
-
ANIMISTA
📌 j’avais déjà écris sur ANIMISTA, mais je crois bien qu’ils viennent d’ajouter de nouvelles animations CSS. Il est possible maintenant d’agir sur une animation du background, de texte en opening, en ending. Toujours aussi simple d’utilisation !
-
Micro interactions – UX Design
📌 Un nouvel article sur l’importance des animations en tant que feedback !
-
LIGHTWELL : design to code pour application mobile
📌 LIGHTWELL est une application permettant de créer des applications interactives pour iPhone et bientôt Android.
-
Haiku Animator
📌 HAIKU est un projet assez proche de SVGator, et permet donc de créer des animations intéractives.
-
WEBFLOW : outil de conception complet
📌 WEBFLOW permet maintenant de créer des animations en reprenant un peu le concept de l’inspector de KEYNOTE.
-
Sketchgif.me : sketch plugin
📌 GIFME est un plugin pour sketch permettant l’ajout de GIF directement dans sketch.
-
Motion Design : Le recueil
📌 Très bon article sur le Motion Design. J’aurai tendance à utiliser KITE ou HYPE TUMULT pour effectuer ce genre de projet. Je compte bien essayer rapidement SVGATOR pour les petites animations de feedback et les intégrer à un proto (https://app.svgator.com/) Et enfin pour compléter cet article, je vous met un lien un autre article sur le même sujet :
https://www.webdesignerdepot.com/2017/10/3-smart-ways-to-engage-users-with-animation/ -
Petit tuto de Pablo Stanley sur l’utilisation de Keynote
📌 Un petit tuto de Pablo Stanley sur l’utilisation de Keynote pour réaliser des animations de parallax.
-
12 free AE tutorials for UX
📌 Parce que j’aime vraiment After Effect que cela reste un outil très puissant pour matérialiser les animations, transitions, et feedbacks de vos interfaces. Voici des petits tutoriaux pour ceux qui voudraient s’y essayer 😉
-
MOCKINGBOT est un clone gratuit de INVISION
📌 MOCKINGBOT est un clone gratuit de INVISION
-
STORYBOARDER : logiciel gratuit d’animation
📌 STORYBOARDER est un outil vraiment sympa pour animer vos illustrations crayonnées.
-
SUPERNOVA : conception d’interface et application mobile
📌 SUPERNOVA est une application qui va vous permettre de transformer votre création Sketch en application mobile.
-
Micro Interactions et Ergonomie
📌 les animations ne sont pas seulement esthétiques mais permettent d’être en accord avec un certain nombre de critères ergonomiques
-
All The UX Prototyping Tools Ever
📌 UX Prototyping Tools
-
Mitya
📌 Mitya est un outil permettant de créer des prototypes animés
-
GRAVIT Designer
📌 Je voulais créer un article sur le sujet, mais d’autres l’ont fait avant moi, cependant GRAVIT est un clone de Sketch Gratuit qui mérite que l’on parle de lui.
-
Pixofield
📌 KEYSHAPE, Un logiciel de motion design (gratuit) pour créer des petites animations 2D avec timeline
-
Justinmind
📌 JUSTINMIND est un outil de prototypage vraiment prometteur.
-
Pixate
📌 Pixate veux rendre le prototypage et la conception d’applications plus accessibles et plus faciles.
