Outils gratuits pour designer vos projets
Il y a quelque temps j'ai voulu designer un projet perso. J'ai farfouillé sur la toile en cherchant quels outils, gratuits, me permettraient d'arriver à mon but et j’ai été conquis par ceux listés ci-dessous.
J'ajoute qu'ils sont tous utilisables sur navigateur et possèdent un espace de stockage en ligne. Vous pouvez y accéder depuis n'importe quelle plateforme sans rien installer. C'est pas beau ça ?
Gravit Designer (dessin vectoriel)
Tout comme Adobe Illustrator ou Inkscape, cette application permet de faire du dessin vectoriel et ainsi de créer des illustrations, logos, schémas, etc.
L'interface est claire et ergonomique, on s’habitue rapidement à l’outil et le nombre de fonctionnalités sont suffisantes pour la plupart des travaux.
- Gravit peut s’utiliser sur toutes les plateformes depuis un navigateur web ou être installé sur Mac, PC, Linux et ChromeOS.
- Il offre un espace de stockage en ligne pour vos créations.
- L’application propose aussi une version PRO payante qui ajoute quelques améliorations comme augmenter la densité de pixels sur vos exports PDF, pouvoir importer des fichiers Illustrator, sketch, EPS ou augmenter la taille du stockage cloud. Le détail est ici. Mais personnellement, les fonctionnalités gratuites sont bien suffisantes.
Figma (prototypage)
Figma est un concurrent direct à Sketch et va vous permettre de créer les prototypes de vos applications web, mobile, smartwatch et je ne sais quoi encore. Son principal avantage sur Sketch est qu’il est gratuit, et disponible sur toutes les plateformes via navigateur web.
Là encore l'interface est facile à prendre en main, l'outil vous permet de configurer des actions et des animations sur votre prototype, et il est possible de modifier un fichier à plusieurs en même temps. Bref c'est un outil incroyable !
Il existe plein de kit UI comme pour Material Design ou Bootstrap. Des initiatives se créent autour, comme figma.cool qui propose des ressources, add-ons et articles sur Figma. Vous pouvez même facilement partager vos créations sur Dribbble. C’est vraiment l’outil de prototypage du moment !
- Figma peut s’utiliser sur toutes les plateformes depuis un navigateur web ou être installé sur Mac et Windows.
- Il offre un espace de stockage en ligne pour vos créations.
- Il faudra payer un abonnement si vous voulez travailler avec une grosse équipe.
Rive (animation vectorielle)
Et là, cerise sur le gâteau, avec Rive vous allez pouvoir créer des animations à partir de dessin vectoriel. Animations que vous allez pouvoir intégrer dans vos applications et contrôler avec votre code.
Rive est plus compliqué à utiliser que les autres. L’interface semble simple et est bien agencée mais il y a plusieurs choses à comprendre, comme le fonctionnement des bones, de l’outil IK Pose, en plus de la partie animation. Heureusement pour nous, il existe plein de tutoriels pour bien comprendre tout ça.
Pour le moment on ne peut exporter ses fichiers qu’en binaire ou JSON, formats qui servent à exécuter votre animation dans votre code. Pas de GIF,MP4, ou format semblable pour le moment, vous allez devoir utiliser d'autres outils pour cela car le vrai but de Rive est d'exécuter vos animations avec votre code !
Rive a changé de nom depuis sa création, le projet s'appelait Flare avant 2019 Ne soyez pas troublé pendant vos recherches, Rive, Flare, c’est la même chose.
Le projet est encore jeune, bouge beaucoup et est aussi sujet à quelques bugs. Notamment sur l'import de CSV, n'hésitez pas à ouvrir un ticket si vous trouvez des bugs.
Dans Rive, les animations que vous construisez vont réellement s'exécuter dans votre application. Pour l'instant il n'existe des runtimes que dans quelques langages dont Flutter et Javascript
- En version gratuite, vos créations sont publiques, et il faut souscrire à un abonnement pour garder vos projets privés.
- Vos fichiers sont hébergés sur le cloud par Rive.
- Rive 2 a été annoncé récemment et permettrait de manipuler des fichiers à plusieurs en même temps et proposerait une application desktop en plus du client web