Les 100 meilleurs outils de webdesign

Découvrez 100 outils de webdesign essentiels pour le métier de designer Web (designer UI).

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.

Les outils du Designer UI

1. Arborescence

1. Flowmapp
2. Figma
3. Miro
4. Octopus.do ✨
5. Visualsitemaps
6. Gitmind

2. Maquettes fonctionnelles zoning, wireframe

1. Balsamiq
2. Charte ergonomique Usabilis
3. Figma ✨
4. Markup.io (échanges en temps réel)
5. Sprig (tests utilisateurs)
6. Wireflow

3. Visuels

1. Affinity Designer
2. Artboard Studio
3. Corel Vector
4. Designstripe
5. Envato Elements
6. Icones
7. Illustrator ✨
8. Lottie files
9. Magic Eraser
10. Mixkit
11. Motionity.app
12. O-dan ✨
13. Palette.fm (colorisation des images)
14. Potlabicon (icônes SVG animées)
15. VectorMaker
16. Watermark remover

Illustrations libres de droit

1. Drawkit
2. Humaaans
3. Openemoji
4. Undraw

4. Charte graphique, règles de conception visuelles

1. Adobe Illustrator
2. Adobe XD
3. Axure RP
4. Brandmark
5. Canva
6. Figma / Figma Community
7. Invision Studio
8. Sketch (Mac OS)
9. Penpot

Couleurs

1. Adobe Color ✨ / Adobe Color create image (palette à partir d’une image)
2. Coolors
3. Colorhunt
4. Colorzilla
5. Happyhues

Typographie

1. Calligraph
2. Fontflipper
3. Font Ninja
4. Typescale
5. What Font This

5. Maquettes graphiques et modèles de page

1. Adobe XD
2. Framer
3. EditorX
4. Glimpse
5. Marvel
6. PandaSuite
7. Penpot / Penpot Community
8. UI Generator
9. UIsual
10. Uidesigndaily.com
11. UI Snippets
12. Visbug

Maquette graphique – accessibilité

1. Accessibility Cheatsheet
2. Colorable

Extensions pour Figma

1. Liste complète

6. Mockup

1. Mockuuups.studio

7. Ressources, veille, inspiration

1. 99Designs
2. Awwwards
3. AdCreative
4. BDM Tools
5. Bypeople
6. CSS Design Awards
7. Craftwork.design
8. Designshock
9. Land-book
10. Landing Folio
11. Muz.li
12. Nice Very Nice
13. OnePage Love
14. SaaS Pages
15. Tooltester (revue d’outils)

Liste compilée par Stéphane ARRAMI