Que tu sois déjà webdesigner freelance ou en route pour te lancer en tant qu’auto-entrepreneur, de nombreux outils et logiciels sont indispensables pour exercer ton métier. Qu’il s’agisse de recherche d’inspirations et de tendances actuelles en web design, ou de production en tant que telle, il est primordial de t’équiper des bons outils en freelance !
Aujourd’hui, on te propose un petit tour d’horizon de 30 outils et logiciels incontournables à connaître en tant que web designer freelance (ou non). De quoi compléter ta palette d’outils utiles pour te faciliter la vie et réaliser des prestations de qualité. Au programme : inspiration en web design, maquettes et mockups, création, typographies, etc. Let’s go !
Sommaire :
1. Les plateformes pour trouver l’inspiration en web design
2. Les outils pour créer des maquettes et prototypes web
3. Les outils pratiques en web design
a. Design et création graphique
b. Trouver et comparer des typographies
c. Créer des palettes de couleurs
d. Ressources et petits outils pour les webdesigners
· Behance : Behance est une bibliothèque Adobe de projets graphiques variés qui s’apparente plutôt à un véritable réseau social de créatifs. Pour beaucoup de designers, c’est un moyen de créer un portfolio en ligne pour mettre en valeur son travail de freelance. Mais c’est aussi une excellente plateforme pour t’inspirer en tant que créatif.ve et te tenir au courant des dernières tendances graphiques. La plupart des travaux postés y sont de très bonne qualité.
· Dribble : tout comme la précédente plateforme, Dribble se veut être une communauté de créatifs et de portfolios particulièrement qualitative. Si tu peux l’utiliser pour poster tes propres travaux en freelance, tu peux aussi l’utiliser pour trouver de l’inspiration en graphisme et web design. La plateforme permet aussi de consulter des annonces de prospects à la recherche du web designer parfait pour réaliser leurs projets.
· Creative Market : comme son nom l’indique, Creative Market est avant tout une marketplace sur laquelle tu retrouveras de nombreux produits digitaux liés à la création graphique (templates, illustrations, typographies, etc.). La plateforme propose aussi des thèmes Wordpress à acheter et de nombreuses ressources qui peuvent t’être utiles en webdesign. C’est aussi une belle petite source d’inspiration si tu souhaites uniquement observer ce qui s’y vend le mieux.
On entre maintenant dans le cœur du métier de web designer, et des logiciels utiles pour réaliser des maquettes ou prototypes web. Ici, on te présente des outils qui offrent à peu près les mêmes fonctionnalités, tout est ensuite une question de goûts, de spécificités de tes missions ou du matériel sur lequel tu travailles.
· Sketch : Sketch est une référence pour les web designers qui cherchent un outil simple, épuré et particulièrement adapté à la création pour le web. Il est en effet très utilisé pour concevoir des interfaces et reste financièrement très accessible pour un outil aussi complet. Cela dit, Sketch n’est pour le moment disponible que sur Mac.
· Figma : c’est l’alternative idéale à Sketch si tu ne travailles pas sur un environnement Apple. L’outil te permet lui aussi de concevoir des interfaces de sites web ou d’applications, tout en étant plus orienté vers la collaboration en équipe. Si tu travailles avec d’autres freelances sur des projets web, c’est donc sûrement l’outil qu’il te faut pour avancer ensemble. À noter qu’il dispose d’une version totalement gratuite.
· InVision : InVision est un « petit nouveau » dans le monde des outils d’UX / UI design, même s’il est déjà reconnu depuis quelques années. Il est particulièrement utile pour présenter un projet web à ton client, directement dans son navigateur, mais aussi en simulant un écran de tablette ou de smartphone. Il te permet aussi de concevoir tes prototypes directement sur l’outil et d’y intégrer des animations, interactions, etc.
· Balsamiq : un autre outil utile pour maquetter des interfaces et applications web. Très simple d’utilisation, il te permet de concevoir les prototypes et wireframes de tes projets web sans compétences particulières en programmation. Il est disponible pour Mac ou Windows, et reste très abordable en fonction du nombre de projets sur lesquels tu travailles.
· Marvel App : un outil complet et pratique pour créer des prototypes de sites web et d’applications mobiles fonctionnels. Il inclut des fonctionnalités pour concevoir tes interfaces sans autre logiciel, mais tu peux aussi y importer tes propres conceptions issues d’autres outils de création graphique. C’est aussi un outil entièrement SAS, c’est-à-dire sans installation de logiciel requise.
· Origami : un outil gratuit créé par Facebook. Il permet de créer des prototypes d’interfaces de ses applications, qu’il est possible de tester ensuite en conditions réelles. Le petit bémol : il n’est pour le moment disponible que sur Mac, même s’il permet de créer des prototypes pour Android.
· Mockingbird : un autre outil web qui ne nécessite aucune installation et te permet de créer des mockups et wireframes de sites web ou applications. Il est très simple d’utilisation, que tu sois webdesign débutant ou confirmé.
· Proto.io : un outil de prototypage d’applications mobiles avec une interface particulièrement intuitive. Si tu aimes travailler sur des outils esthétiques et très simples d’utilisation, c’est celui qu’il te faut. Il te fournit pas mal d’éléments à intégrer par drag and drop, mais aussi la possibilité d’importer tes propres éléments issus d’autres outils de conception.
· Screenfly : un petit outil fonctionnel pour tester un site web sur différents terminaux (écrans de toutes tailles, tablettes, smartphones, etc.). En tant que webdesigner, tu sais sans doute déjà qu’il est impératif de produire des interfaces responsive, ce qui n’est pas toujours évident à vérifier en conditions réelles.
On passe maintenant à la partie graphique et les ressources utiles autour du webdesign. Si tu es graphiste freelance, tu y trouveras toi aussi des outils et logiciels indispensables pour exercer ton métier de créatif.ve !
· Adobe Creative Suite : la suite d’outils de référence pour le design et la création graphique qu’on ne présente (presque) plus. Si tu es déjà familier.ère avec la suite CS, tu sais qu’elle est composée de nombreux logiciels en fonction de tes besoins : dessins vectoriels, retouches photos, mise en page de documents, etc. Pour le webdesign, on recommande particulièrement Adobe XD pour prototyper, ou encore les bibliothèques Adobe Stock et Adobe Fonts pour illustrer tes projets web. À noter que bien que très complets et répandus, les outils Adobe restent relativement chers avec un abonnement qui s’adapte tout de même à tes besoins.
· Affinity Designer : une alternative moins onéreuse à la suite Adobe, qui gagne de plus en plus de terrain chez les designers et graphistes freelances. Ici, pas d’abonnement mensuel mais un achat unique de licence. Même s’il ne se destine pas au web design à proprement parler, Affinity permet tout de même de concevoir des maquettes web vectorielles et dispose d’une version d’essai gratuite.
· Google Fonts : une très large bibliothèque de fonts Google et d’icônes à télécharger gratuitement. La plateforme est très intuitive et te permet de tester une phrase pour la voir en différentes typographies avant de faire ton choix, mais aussi de tester les langues disponibles pour chaque font. C’est particulièrement utile si tu travailles sur un projet web décliné sur plusieurs pays.
· Monotype : c’est une bibliothèque très importante de polices de caractères, mais aussi une plateforme utile pour consulter les dernières tendances. Et Monotype, c’est aussi un service de création de fonts sur-mesure, si tu ne trouves pas la typographie idéale pour ton projet.
· FontFabric : là aussi, il s’agit d’une plateforme de typographies simplifiée et intuitive, un peu comme celle de Google. Elle te permet de rechercher des fonts par catégories (serif, sans, script, etc.) et de tester un texte directement dans l’outil.
· FontRapid : tu préfères créer toi-même la typographie de ton projet web ? FontRapid est un plugin pour créer une font sur-mesure directement sur Sketch. Tout simplement !
· Adobe Color : un petit outil gratuit et mis à disposition par Adobe pour créer la palette de couleurs de ton projet web ou d’application. Il dispose de pas mal de petites fonctionnalités pratiques, comme la possibilité d’extraire automatiquement les couleurs d’une photo ou de sélectionner la combinaison qu’il te faut (palette monochrome, complémentaire, camaïeu, etc.).
· Colorwise : une bibliothèque de palettes de couleurs toutes prêtes si tu as besoin d’inspiration, ou de disposer rapidement d’une palette pour tester une maquette par exemple.
· Picular : une bibliothèque de nuances qui sort un peu des sentiers battus, puisqu’ici la recherche de couleurs se fait par mots-clés. Tu peux ensuite sélectionner chaque couleur retenue pour créer une palette directement sur l’outil.
· Webgradients : bien que l’utilisation de dégradés soit le sujet de nombreux débats entre web designers, certains projets s’y prêtent très bien encore aujourd’hui. Et Webgradients est une jolie bibliothèque de dégradés à utiliser dans tes projets web. Tu peux d’ailleurs les afficher en plein écran pour tester les différentes combinaisons.
· GradPad : un outil web qui te permet de tester et ajuster un dégradé de couleurs très simplement, et d’en obtenir le code CSS. Si tu as la flemme d’ouvrir ton logiciel de création graphique, GradPad est l’outil qu’il te faut.
· SVG Backgrounds : besoin d’un background graphique et esthétique pour ton projet de site web ou d’application ? SVG Backgrounds te permet de générer et personnaliser des backgrounds utilisables de suite (CSS ou SVG).
· UI Faces : si tu as besoin d’ajouter des utilisateurs fictifs sur un projet d’interface ou d’application, UI Faces va te sauver la vie. Plutôt que chercher des photos de profil type sur le web, l’outil te met à disposition un moteur de recherche avec différents critères (genre, âge, caractéristiques physiques, etc.) de photos libres de droits.
· Epic Spinners : une petite bibliothèque d’indicateurs de chargement animés, pour faire patienter les utilisateurs d’un site web ou d’une application.
· The Noun Project : une très grande bibliothèque d’icônes classées par thématiques pour illustrer tes interfaces web. Pour chaque icône, tu peux ensuite en modifier la couleur ou l’orientation, et la télécharger dans le format qui va bien. Cette plateforme est particulièrement riche en styles graphiques.
· Nibbler : tu viens de mettre en ligne un site web ? Nibbler te permet d’en faire un audit rapide et de mettre en avant ses qualités et défauts, notamment sur l’accessibilité, l’expérience utilisateur et la visibilité.
· XMind : pour certains sites web ou applications, il est parfois nécessaire de créer un mapping des contenus avant toute chose. XMind est un petit outil pratique pour brainstormer et organiser tes idées, que ce soit pour un projet web ou tout type de projet complexe.
· GraphicBurger : on termine avec une bibliothèque bien pratique de ressources pour mettre en valeur tes projets web. Tu y trouveras par exemple : des mockups pour présenter une interface à un client, des kits UI pour Sketch ou Photoshop, mais aussi des icônes, typographies, etc.
Nous voilà arrivés au bout de ce petit top 30 d’outils pratiques pour le web design. On espère que tu auras découvert de nouveaux outils pour faciliter ton travail ou pousser toujours plus loin la qualité de ce dernier. N’hésite pas à consulter notre top d’outil pour les community managers, ou encore celui pour les freelances en rédaction web, si tu as besoin d’outils spécifiques à ces domaines de compétence.
