Découvrez 100 outils de webdesign essentiels pour les métiers de designer Web (designer UI) et celui de l’intégrateur Web.
Bien différencier les outils par métiers
A chaque étape de la création d’un site Web professionnel ou d’une application en ligne, en dehors des logiciels de création simples, nous différencions les outils pour chaque métier selon que vous êtes webdesigner (webdesigner indépendant, webdesigner en agence, spécialiste UX, spécialiste UI) ou intégrateur web.
Outils spécifiques
Designer UX : outils de tests d’expérience utilisateur, utilisabilité, prototypage, arborescence.
Designer UI ou Designer Web : outils de tests de conception visuelle et d’accessibilité, conception visuelle, ressources créatives, outils de création vectorielle et illustrations, retouche photo et compositing, banques d’image, studios photos photographes professionnels, image de marque, utilisabilité, charte graphique, maquettage graphique.
Intégrateur Web (à ne pas confondre avec le développeur Web) : outils de tests d’accessibilité, intégration des fonctionnalités statiques, animations CSS, JS, maquettage fonctionnel, prototypage HTML/CSS/JS, CMS, préparation des composants et gabarits de pages statiques (vues).
Tendances
Figma s’est imposé comme un outil de conception d’interface complet utilisé à la fois par le Designer UX, l’UI Designer, l’intégrateur et le développeur.
Les outils de webdesign collaboratif sont là pour vous aider à mieux voir l’avancée régulière des créations, à vérifier la conformité des prototypes avec la maquette.
1. Les outils du Designer UI
Arborescence
Maquettes fonctionnelles zoning, wireframe
- Balsamiq
- Charte ergonomique Usabilis
- Figma ✨
- Markup.io (échanges en temps réel)
- Sprig (tests utilisateurs)
- Wireflow
Visuels
- Affinity Designer
- Artboard Studio
- Corel Vector
- Designstripe
- Envato Elements
- Icones
- Illustrator ✨
- Lottie files
- Magic Eraser
- Mixkit
- Motionity.app
- O-dan ✨
- Palette.fm (colorisation des images)
- Potlabicon (icônes SVG animées)
- VectorMaker
- Watermark remover
Illustrations libres de droit
Charte graphique, règles de conception visuelles
- Adobe Illustrator
- Adobe XD
- Axure RP
- Brandmark
- Canva
- Figma / Figma Community
- Invision Studio
- Sketch (Mac OS)
- Penpot
Couleurs
- Adobe Color ✨ / Adobe Color create image (palette à partir d’une image)
- Coolors
- Colorhunt
- Colorzilla
- Happyhues
Typographie
Maquettes graphiques et modèles de page
- Adobe XD
- Framer
- EditorX
- Glimpse
- Marvel
- PandaSuite
- Penpot / Penpot Community
- UI Generator
- UIsual
- Uidesigndaily.com
- UI Snippets
- Visbug
Maquette graphique – accessibilité
Extensions pour Figma
Mockup
2. Les outils de l’intégrateur
Accessibilité Web
- Accessibility checker
- Checklist A112Y Project
- IBM Equal Accessibility Checker
- Sa11y ✨
- Wave ✨
- Whocanuse
Intégration CSS
- Almanac CSS
- BEM Cheat Sheet
- CanIUse
- Chrome DevTools
- CSS Gradient
- CSS Layout
- CSS Tricks
- Grid Layout Generator
- Headless UI
- LayoutIt (CSS Grid)
- Layout Pattern
- Menu Cool
- NextUI
- Pattern CSS
- Stylify.dev
- StripeGenerator CSS
- Superbase UI
- Tailkit
- Transition CSS
Intégration CSS Grid
- CSS Grid Generator Netifly (CSS Grid)
- CSS Grid Generator Pw (CSS Grid)
Intégration des animations CSS
- AnimateCSS
- Keyframes App (animations CSS)
Intégrations JavaScript
Intégration des animations JS
Intégration , animations SVG
Intégration frameworks CSS
- Bootstrap
- Bulma.io
- TailwindCSS ✨
Intégration frameworks et librairie JS
Intégration CMS WordPress
Intégration NoCode
Intégration worflow
- Locofy.ai (transformation conception Figma en code frontal prêt pour la production pour React, React Native, Nextjs, HTML-CSS et Gatsby).
Optimisation d’images
Templates
Trousse à outils
Ressources, veille, inspiration
- 99Designs
- Awwwards
- AdCreative
- BDM Tools
- Bypeople
- CSS Design Awards
- Craftwork.design
- Designshock
- Land-book
- Landing Folio
- Muz.li
- Nice Very Nice
- OnePage Love
- SaaS Pages
- Tooltester (revue d’outils)
Liste compilée par Stéphane ARRAMI