Catégories
Webdesign

Les 100 meilleurs outils de webdesign

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

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

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

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

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

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

Mockup

  1. Mockuuups.studio

2. Les outils de l’intégrateur

Accessibilité Web

  1. Accessibility checker
  2. Checklist A112Y Project
  3. IBM Equal Accessibility Checker
  4. Sa11y
  5. Wave
  6. Whocanuse

Intégration CSS

  1. Almanac CSS
  2. BEM Cheat Sheet
  3. CanIUse
  4. Chrome DevTools
  5. CSS Gradient
  6. CSS Layout
  7. CSS Tricks
  8. Grid Layout Generator
  9. Headless UI
  10. LayoutIt (CSS Grid)
  11. Layout Pattern
  12. Menu Cool
  13. NextUI
  14. Pattern CSS
  15. Stylify.dev
  16. StripeGenerator CSS
  17. Superbase UI
  18. Tailkit
  19. Transition CSS

Intégration CSS Grid

  1. CSS Grid Generator Netifly (CSS Grid)
  2. CSS Grid Generator Pw (CSS Grid)

Intégration des animations CSS

  1. AnimateCSS
  2. Keyframes App (animations CSS)

Intégrations JavaScript

  1. CSS2JS
  2. Piling JS

Intégration des animations JS

  1. Anim XYZ
  2. Party.JS
  3. ScrollReveal.js
  4. Theatre.js
  5. Tidy.js

Intégration , animations SVG

  1. Fffuel (SVG)
  2. GSAP

Intégration frameworks CSS

  1. Bootstrap
  2. Bulma.io
  3. TailwindCSS

Intégration frameworks et librairie JS

  1. Angular
  2. React
  3. Next Js Framework React
  4. VueJS

Intégration CMS WordPress

  1. CSSHero
  2. Divi
  3. Figma Plugin PxCode > Pxcode > WP – Pxcode University
  4. Local WP
  5. SVG 2 WP

Intégration NoCode

  1. Daftpage
  2. Webflow / Showcased Webflow

Intégration worflow

  1. 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

  1. ImageOptim (Mac)
  2. Responsivebreakpoints.com
  3. ShortPixel
  4. Squoosh.app
  5. TinyJpg
  6. TinyPng

Templates

  1. Boilerplate HTML5
  2. Camera WebGI landing pages
  3. Limey
  4. Typedream
  5. Virgo template

Tests navigateurs

  1. Browsersync.io

Trousse à outils

  1. Carrd
  2. Checklist design
  3. Notion Icons
  4. Responsively
  5. Type Scale
  6. Utopia Calculator

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

Voir aussi les outils du développeur front-end.