Quand on travaille dans le web, le graphisme ou le design, on finit rapidement avec une quantité impressionnante de favoris. Un générateur de dégradés par-ci, un outil pour créer une animation par-là, un convertisseur SVG que l’on retrouve six mois plus tard par hasard…
Design Minis part justement de ce constat. Le site rassemble de petits outils spécialisés dans le design, avec une idée simple : chaque outil doit remplir une tâche précise et la faire correctement.
Au moment où nous rédigeons cet article, Design Minis affiche 144 outils répartis dans de nombreuses catégories : images, SVG, typographie, couleurs, animations, arrière-plans, effets, 3D, icônes, mise en page, vidéo, CSS ou encore accessibilité.
Vous pouvez découvrir directement Design Minis.
Design Minis, c’est quoi exactement ?
Design Minis fonctionne avant tout comme un annuaire d’outils pour designers et développeurs front-end.
Ce n’est donc pas une suite graphique à installer ni un concurrent direct de Figma ou Photoshop. Le site référence plutôt des applications indépendantes capables de résoudre rapidement un problème précis.
Vous recherchez un outil pour retirer le fond d’une image ? Il y en a un. Vous voulez créer un easing CSS sans régler manuellement votre cubic-bezier ? C’est également prévu. Vous avez besoin d’un mockup, d’un effet holographique, d’un SVG ou d’une animation de texte ? Là encore, vous trouverez plusieurs solutions.
C’est précisément ce qui rend Design Minis agréable à parcourir : on découvre des outils que l’on n’aurait probablement jamais pensé à rechercher directement sur Google.
Comment trouver un outil sur Design Minis ?
L’interface reste volontairement simple.
Une barre de recherche permet tout d’abord de retrouver un outil par son nom ou son usage. Ensuite, des filtres permettent de parcourir les différentes catégories : Effects, Backgrounds, Motion, Images, SVG, Illustration, 3D, Color, Video, Typography, Layout, Icons, CSS, Accessibility, Whiteboard et Fun.
Le site indique également le modèle économique de chaque service. Vous pouvez donc identifier rapidement les outils gratuits, freemium ou payants.
Enfin, le classement peut notamment être effectué selon les nouveautés. C’est intéressant, car Design Minis n’est pas seulement une liste de vieux services connus : de nouveaux projets y sont régulièrement ajoutés.
Les outils pour travailler les images
La catégorie dédiée aux images est probablement l’une des plus intéressantes.
Parmi les outils disponibles, Cutout mérite clairement que l’on s’y attarde. Il permet de supprimer automatiquement l’arrière-plan d’une image directement dans le navigateur.
L’outil utilise un modèle de segmentation et permet ensuite d’affiner le résultat. Vous pouvez déplacer les contours, ajouter un léger feather, utiliser des pinceaux pour effacer ou restaurer certaines zones et comparer le détourage avec l’image originale.
L’image finale peut conserver un fond transparent ou recevoir une couleur. L’export est disponible en PNG, WebP ou JPEG. Surtout, l’image reste sur votre appareil et aucun compte n’est nécessaire.
Autre outil intéressant : Plinth.
Ici, l’objectif est de transformer une simple capture d’écran en présentation beaucoup plus travaillée. Contrairement aux générateurs de mockups très basiques, Plinth utilise notamment la perspective, les ombres et différentes sources de lumière pour donner davantage de profondeur au résultat.
Il est possible d’utiliser un fond uni, un dégradé ou une photo, puis d’ajouter différents effets visuels. Plusieurs captures peuvent également être intégrées dans une même composition. L’export peut atteindre 4096 pixels en PNG ou JPEG.
La catégorie Images regroupe également des outils comme Image Flow, Shatter, Signal, Refract, Motifs ou encore Image to ASCII. Design Minis permet ainsi de passer rapidement d’un besoin très classique à des expérimentations graphiques beaucoup plus originales.
Design Minis pour convertir et créer des SVG
Les développeurs et intégrateurs devraient également jeter un œil à la partie consacrée aux SVG.
Trace est particulièrement intéressant. Vous lui fournissez une image PNG et l’outil tente de reconstruire de véritables formes vectorielles plutôt que d’intégrer simplement l’image originale dans un fichier SVG.
Cela permet ensuite d’ouvrir le résultat dans Figma ou Illustrator et de modifier réellement les formes obtenues.
Trace détecte également les différentes couleurs du visuel. Il peut supprimer un arrière-plan uniforme, lisser les contours, gérer les angles et permettre de modifier ou masquer certaines couleurs avant l’export.
Le SVG peut ensuite être téléchargé ou son code directement copié. Le traitement est effectué sur votre appareil et ne nécessite pas de compte.
Dans la même catégorie, Design Minis référence notamment Cursor Lab, HalftonePro, loguitoc ou encore Aura by Deslove.
Des outils pour les icônes et les illustrations
Design Minis possède également des sections consacrées aux icônes et à l’illustration.
On y retrouve par exemple Gridcraft et FUIbar dans la partie Icons, ainsi que Mozayk et SUMIIID pour l’illustration.
L’intérêt est surtout de pouvoir explorer ces ressources directement depuis le même annuaire au lieu de multiplier les recherches.
On peut également tomber sur des outils plus expérimentaux. Holosticker, par exemple, permet de transformer une illustration en sticker holographique découpé avant d’exporter le résultat en PNG.
Couleurs, dégradés et arrière-plans
La création de couleurs et d’arrière-plans occupe une place importante sur Design Minis.
Gradient Builder permet par exemple d’expérimenter différents dégradés à partir des formes, des couleurs et du fond.
Pour aller plus loin, Gradient Lab permet de travailler des dégradés animés basés sur des shaders. Le résultat peut ensuite être exporté sous forme d’image PNG ou de vidéo allant jusqu’à la 4K.
Sfumato adopte une approche encore différente. Cet outil permet de créer des compositions avec des effets lumineux, du verre, des arrière-plans animés, des images et de la typographie. Les créations peuvent ensuite être exportées sous forme d’images, d’animations ou même de code utilisable sur un site.
Design Minis référence également Gradlab, Merucav, Pixel animator, Light Stroke Tails et un outil de vérification du contraste des couleurs.
Cette dernière catégorie peut être particulièrement utile lorsque vous souhaitez vérifier la lisibilité d’une interface et travailler son accessibilité.
Des animations sans passer des heures dans After Effects
La partie Motion mérite elle aussi le détour.
Gifted répond à un besoin extrêmement simple : fabriquer un GIF directement depuis le navigateur. Vous importez vos différentes images et l’outil génère l’animation, sans création de compte et sans envoyer les images vers un serveur.
Pour les développeurs, Easings — CSS Cubic-Bezier Editor est également très pratique. L’outil propose 29 courbes cubic-bezier prédéfinies, mais permet aussi de créer la vôtre en déplaçant directement les poignées.
Une prévisualisation montre immédiatement le comportement de l’animation. Une fois satisfait, vous pouvez récupérer le CSS ou le JavaScript correspondant.
On retrouve également dans cette catégorie Orelin, Mockupreel, Dithr, Sliick, Mirrors, Bloop et Swayro. Certains sont gratuits, d’autres fonctionnent avec un modèle freemium ou payant.
Typographie et texte animé
La typographie possède également sa propre section.
Swash est l’un des outils les plus complets de cette catégorie. Il permet de créer du texte animé sans avoir à fabriquer manuellement chaque animation avec des keyframes.
Des modèles modifiables sont proposés, avec des animations lettre par lettre, des mises en page suivant des chemins, des effets 3D, des polices variables et différents shaders. Le résultat peut ensuite être exporté en MP4 ou en GIF directement depuis le navigateur.
Design Minis référence également Fluid Letters, Movulab, Inbetween et FontFreezer.
Pour un designer web, cette section peut facilement devenir une source d’inspiration pour créer un titre, une animation de landing page ou une présentation plus originale.
Mise en page et interface
Certains outils s’intéressent à des détails que l’on pourrait presque considérer comme insignifiants… jusqu’au moment où l’on doit réellement les régler.
Corner Radii en est un bon exemple.
Son unique objectif consiste à calculer et visualiser correctement les rayons de bordure imbriqués. Cela peut sembler très spécifique, mais lorsqu’un bloc arrondi se trouve à l’intérieur d’un autre bloc arrondi, utiliser exactement le même border-radius sur les deux éléments produit rarement un résultat parfaitement harmonieux.
On retrouve aussi dans la catégorie Layout des outils comme FlipCut ou Causal, tandis que Background Studio mélange mise en page, effets et création d’arrière-plans.
Effets graphiques et 3D
Design Minis devient particulièrement amusant lorsque l’on commence à explorer ses outils expérimentaux.
La catégorie Effects regroupe par exemple Nexus, Caustic, DotForge, GEOMETRIC, Liquid Orb Editor ou encore Been there.
Pour la 3D, on retrouve notamment Valessa et paperlab.
D’autres services mélangent plusieurs disciplines. Sticky permet par exemple d’habiller une forme 3D avec des effets chrome, verre ou holographiques.
UI Camera, de son côté, est présenté comme un outil de photographie produit destiné aux logiciels. Il associe ainsi présentation d’interface, image et environnement 3D.
Ce ne sont pas forcément des outils que vous utiliserez tous les jours. En revanche, ils peuvent donner de très bonnes idées lorsqu’il faut sortir d’une présentation ou d’un mockup classique.
Et il reste encore beaucoup de choses à explorer
L’intérêt de Design Minis vient justement de cette diversité.
Le site ne s’arrête pas aux générateurs d’images ou aux outils de couleurs. Il possède aussi des sections dédiées à la vidéo, au CSS, à l’accessibilité, aux whiteboards ainsi qu’une catégorie Fun pour les projets plus expérimentaux.
Autrement dit, ce n’est pas le genre de site sur lequel on vient uniquement chercher un outil précis.
On peut très bien ouvrir Design Minis pour trouver un convertisseur SVG et repartir vingt minutes plus tard avec trois générateurs d’effets, un outil d’animation CSS et une nouvelle manière de présenter ses captures d’écran.
Design Minis est-il gratuit ?
L’utilisation de Design Minis est gratuite. Le site sert d’annuaire et ne demande pas la création d’un compte.
En revanche, tous les outils référencés ne sont pas forcément gratuits. Les fiches indiquent clairement si le service est Free, Freemium ou Paid. Cela permet d’éviter de découvrir uniquement à la dernière étape qu’un export nécessite un abonnement.
Design Minis développe également certains de ses propres outils gratuits.
Concernant la confidentialité, le site indique ne pas créer de compte utilisateur, ne pas utiliser de réseau publicitaire et ne pas déposer de cookies pour les visiteurs. Les outils hébergés directement par Design Minis traitent par ailleurs les images localement dans le navigateur.
Attention toutefois : la majorité des fiches renvoient vers des services externes. Une fois sur ces sites, ce sont leurs propres conditions, tarifs et politiques de confidentialité qui s’appliquent.
Mon avis sur Design Minis
Design Minis fait partie de ces sites dont le concept paraît évident une fois qu’on l’a découvert.
Il ne cherche pas à remplacer vos logiciels habituels. Son intérêt est plutôt de vous éviter de sortir une grosse application pour une petite tâche et, surtout, de vous faire découvrir des outils créés par des designers indépendants.
J’apprécie également le fait que l’annuaire ne se limite pas aux outils les plus connus. On tombe régulièrement sur de petites applications très spécialisées, parfois gratuites, capables de résoudre un problème en quelques secondes.
Si vous faites du webdesign, du développement front-end, du graphisme ou simplement beaucoup de créations visuelles, Design Minis mérite clairement une place dans vos favoris.
La discussion