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.
ALMIGHTY : Plus de 50 tweaks pour améliorer votre expérience MacOS
📌 ALMIGHTY est une application MacOS qui contient plus de 90 tweaks qui améliorent votre expérience sur Mac. L’application est principalement constituée de commandes Terminal compilées dans une application avec une interface agréable.
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.
DORA.RUN : Réalisez des sites web 3D animés sans code
📌 DORA est un outil de conception et publication de sites web 3D animés, en ligne, sans nécessiter de compétences en programmation, donc noCode et possédant même un module de conception assisté par IA.
PARABOL : Outil pour vos réunions agiles
📌 PARABOL propose une gamme complète d’outils pour faciliter les réunions agiles et améliorer la collaboration au sein des équipes, que ce soit pour la planification, l’estimation, la réflexion ou l’établissement de connexions plus profondes entre les membres de l’équipe.
INVIDEO : Edition vidéo assisté par IA
📌 INVIDEO est un éditeur vidéo en ligne qui permet aux utilisateurs de créer des vidéos de qualité professionnelle sans avoir besoin de compétences ou de logiciels d’édition vidéo avancés. INVIDEO simplifie la création de vidéos grâce à des modèles prêts à l’emploi que vous pouvez rapidement personnaliser, même si vous ne l’avez jamais fait auparavant
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…
SCREENRUN : de belles vidéos annotées directement
📌 SCREENRUN est un service gratuit en ligne qui permet de créer de superbes vidéos à partir d’une simple capture d’écran ou d’un enregistrement d’écran en quelques clics, ajoutez une piste musicale et des annotations, l’animation se fera automatiquement. Ensuite, vous n’avez plus qu’à la partager au format mp4.
CAPCUT : Application de montage vidéo en ligne gratuite
📌 CAPCUT est un outil de montage de vidéo en ligne gratuit qui vous aide à créer des vidéos vraiment sympas, et ceci très simplement.
ARTEATER : Créer un gif en mode Flipbook
📌 ARTEATER est un service en ligne permettant de créer un GIF animé depuis une série d’illustrations que vous aurez dessinées dans une série de cases composant l’animation.
MOTIONITY : Création de vidéos animées
📌 MOTIONITY est un éditeur d’animation gratuit et open source accessible directement sur le web.
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.
SNACK THIS : Notion to PPT
📌 SNACKTHIS est un outil en ligne de création d’animation de texte, et de transformation de Notion en Présentation à la PPT.
CAVALRY : Application motion design
📌 CAVALRY est une nouvelle #application de #MotionDesign et d’animation.
#cmondary #UX #Tools
WAVES : Animated background CSS / JS
📌 WAVES est un #snippet sur #Codepen proposant en quelques lignes de #HTML / #CSS / #JS une #animation de votre #background sous forme de vagues. Super sympa !
#cmondary
RIVE : Animation intéractive
📌 RIVE est un outil d’ #animation qui vous permet de concevoir, d’animer vos créations à la manière d’ #AfterEffect, avec donc une #timeline et des #keyframes. Cependant l’intérêt de cet outil réside dans le fait que l’on puisse directement interagir sur les animation en temps réel.
La version 2, encore en beta, est également disponible et permet la #coopération en ligne avec votre team :
https://beta.rive.app/
#tools #MicroInteraction #animation #cmondary
DRAMA : outil de prototypage
📌 DRAMA se présente comme un #outil tout en un. Prototypage, #animation et #Design.
J’adore ce type d’initiative, car je pense que l’on cherche tous l’outil ultime qui fera tout, mais il n’existe pas encore. Cela me fait également penser à NOVA STUDIO qui est également un bon concurrent.
#Tools #prototyping #cmondary
SVG ARTISTA : Animation svg
📌 SVG ARTISTA est un service en ligne permettant d’animer n’importe quel #SVG.
Quelques paramètres sont disponibles, mais globalement l’animation se fera sur le filet, ainsi que sur le remplissage.
Très simple d’utilisation, je vous invite à essayer 😉
#Tools #animation #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
FLIGHT ICON : bibliothèque d’icons animés
📌 FLIGHT ICON est une bibliothèque d’icons animés.
Disponible en .GIF ou JSON. Elle s’avère très pratique surtout lors de la communication avec les développeurs.
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
Lightwell
📌 LIGHTWELL propose une version FREE FOREVER, Elle ne permet de disposer de l’ensemble des fonctions d’export, mais cela reste un bon outil d’animation Timeline + Keyframe.
Uselightbox.com
📌 LIGHTBOX est un outil d’animation pour les illustrateurs qui possèdent une tablette tactile. Très simple d’utilisation l’application vous montre la frame précédente et vous invite à créer la suivante, à la manière d’un FLIPBOOK. Gratuit et sympa
FLARE : motion design app
📌 FLARE est un service en ligne permettant d’animer vos créations très simplement avec un outil TimeLine + KeyFrames, comme le propose After Affect / Hype / Kite Compositor. L’intérêt est ici de pouvoir s’essayer gratuitement et rapidement à l’animation, directement depuis son navigateur. De nombreux projets sont disponibles librement et vous permettront de les retro-ingenieurer afin de comprendre comment ils ont été réalisés !! Pratique
Myndset
📌 MYNDSET est un jeu de carte permettant de booster votre créativité. Les créateurs lancent un Kickstater le 14 mars. Affaire à suivre.
Choosing the right animation-tool
📌 Je parle souvent d’outils d’animation sur linkedin.
Projection de MERCATOR
📌 Toujours sur le sujet des projections de cartes. Petite animation trouvée sur twitter, montrant la différence entre une projection MERCATOR vs TAILLE RÉELLE des territoires émergés. Il est intéressant de voir comment ce type de représentation conditionne notre perception du monde. Certain pays continent perde un peu de leur superbe, une fois les tailles réelles respectées…
KITE : Animation HTML
📌 J’adore KITE pour rapidement animer les créas réalisées sous sketch , et maintenant sous XD également. Vraiment beaucoup plus accessible que After Effect (dans tous les sens du terme), Il permet même de générer du code directement intégrable à vos applications. Je ne comprend toujours pas pourquoi Sketch n’intègre pas nativement une timeline + Keyframe
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.
Invision Studio VS Adobe XD
📌 ADOBE XD vs INVISION STUDIO – Meilleur que SKETCH ??
CSS ONLY FLOAT LABEL
📌 CSS ONLY FLOAT LABEL est un code CSS hébergé sur le génial codepen illustrant merveilleusement bien l’animation d’un libellé passant de l’intérieur du champ de saisie , au dessus du champs de saisie. Personnellement, je considère comme une bonne pratique, à complété d’un control de surface indiquant si le champs est OK ou KO 😉
FLOW : outil d’animation
📌 FLOW sort de beta et passe enfin en version 1.
CHEATSTORMING
📌 Un article très interessant sur le CHEATSTORMING
Micro intéractions
📌 Sujet récurrent pour moi, Les micro-interactions, et animations au service de l’expérience utilisateur.
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 !
Animation sur maquette
📌 J’avoue que c’est assez fort !!! Avec le petit making of à la fin qui va bien !
Micro-intéractions
📌 Encore un article sur les micro-interactions, rédigé par Pablo Stanley
Phase : outil de conception
📌 PHASE est un futur outil de design et prototypage qui semble avoir du potentiel.
SPIRIT JS est un outil d’animation avec timeline et keyframe
📌 SPIRITjs est un outil d’animation avec timeline et keyframe pour Designers et Développeurs.
WEBFLOW : outil de conception complet
📌 WEBFLOW permet maintenant de créer des animations en reprenant un peu le concept de l’inspector de KEYNOTE.
FLOW animator
📌 J’avais déjà évoqué FLOW et ceux qui me connaissent un peu, connaissent ma passion pour les outils avec des Timelines 😉
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/
SVGator : animation de fichier SVG
📌 SVGator est un futur service d’animation de fichier SVG, à la sauce After Effect, avec Keyframes et timeline. C’est typiquement le type de projet que j’adore. A l’heure actuelle je me tourne plutôt vers TUMULT HYPE, mais je compte bien essayer ce petit soft dès qu’il sera disponible 😉
STORYBOARDER : logiciel gratuit d’animation
📌 STORYBOARDER est un outil vraiment sympa pour animer vos illustrations crayonnées.
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
12 principles of UX in Motion
📌 L’animation étant une part importante du Feedback fournis aux utilisateurs, il s’avère important d’en comprendre les principes et usages.
Micro-Interactions Reward the User
📌 Article intéressant : Micro-Interactions Reward the User
Kiteapp.co
📌 Enfin un outil d’animation sympa, abordable, et facile de prise en main .