Depuis près de 3 ans, nous avons pu à tester des centaines d'outils et parcouru de nombreuses ressources en web design. Voici notre sélection à connaitre en 2024 pour n'importe quel designer ou designeuse.
Que vous soyez déjà dans le domaine du Web Design, ou que vous souhaitiez le devenir, certains de ces outils vous seront sans aucun doute très utiles !
Depuis plus de trois ans que nous avons lancé notre agence web Digidop, nous avons été amené à tester des centaines d'outils, certains plus utiles et fiables que d'autres. Nous vous présentons dans cet article une sélection de ressources et d'outils de web design les plus efficaces en 2024.
N'hésitez pas à partager cette ressources à d'autres designers qui pourraient en avoir besoin.
1. Plateformes d'inspiration
Awwwards et Godly
Ces sites sont des incontournables pour découvrir des designs web innovants et inspirants. Ils référencent de nombreux exemples de sites web primés, pour leurs innovations en matière de design, d'animation, de contenu et permettent ainsi de rester à la pointe des tendances en design.
Dark.design
Comme son nom l'indique, cette plateforme se concentre sur les sites web au design "sombre". Idéale pour ceux qui cherchent des inspirations spécifiques à ce style.
Mobbin
Parfait pour ceux qui conçoivent des applications mobiles, Mobbin propose des inspirations pour iOS, Android et web apps.
Designspells
Pour des exemples d'animations et d'interactions, cette plateforme est une mine d'or. Que ce soit pour des hover effects ou des animations au clic, vous trouverez de nombreuses idées.
Navbar.gallery et Footer.design
Ces deux plateformes se sont respectivement spécialisées dans le référencement d'inspirations de Navbar (ou barres de navigation) et de Footer (ou pieds de page). Idéal pour trouver des idées de dropdown menus, méga menus, progress bars, etc.
Minimal.gallery
Minimal.gallery fait une selection de sites web ayant des designs épurés et simples. Pour des inspirations minimalistes, vous serez au bon endroit.
Designspiration
Une plateforme originale pour trouver des inspirations de design par couleur. Designspiration permet de chercher des inspirations de design correspondant à des palettes spécifiques. Vous n'aurez qu'à intégrer des code HEX ou selectioner des couleurs dans la barre de recherche.
2. Outils de conception
Relume
Un outil très puissant pour générer des sitemaps et wireframes à l'aide d'une IA. Relume offre également des centaines de composants réutilisables dans Figma et Webflow.
Flowbase
Similaire à la banque de composants Relume, Flowbase propose des composants pour Figma, Webflow mais aussi Framer, avec des exemples d'UI pour des interfaces et des dashboards.
Figma Community
La Figma Community regorge d'inspirations de landing pages, d'éléments UI, de mockups etc. Les designers peuvent dupliquer ces éléments gratuitement pour les utiliser dans leurs propres projets. Figma dispose aussi de nombreux plugins très utiles comme HTML to Design, transformant via une URL, la page d'un site web en design Figma.
3. Images, illustrations et vidéos
Unsplash et Pexels
.webp)
Ces deux banques d'images sont parmi les plus fournies et qualitatives, offrant des images et vidéos gratuites pour tous types de projets.
Shopify Photos
Shopify propose également une banque de photos libres de droits, particulièrement utile pour des thématiques spécifiques. Il n'est d'ailleurs pas nécessaire d'avoir Shopify pour télécharger ces ressources gratuites.
Midjourney et Runway
Ces deux intelligences artificielles génèrent des images et vidéos à partir de prompts textuels, offrant une flexibilité créative immense.
Remove.bg
Une IA qui détecte et supprime, en un clic, l'arrière plan de n'importe quelle image.
Squoosh.app
Cet outil compresse et formate les images en WebP pour une meilleure performance sur le web. Le tout avec très peu de perte de qualité !
4. Banques d'icônes
Iconoir
Propose des icônes épurées et minimalistes, modifiables en SVG. Idéal pour adapter la taille, l'épaisseur, les couleurs ou même les formes des icônes.
Material Symbols et Remixicon
Tout comme Iconoir, ces plateformes offrent, dans un autre style, des centaines d'icônes gratuites en SVG, modifiables directement depuis les plateformes.
Iconify (plugin Figma)
Un plugin regroupant une multitude d'icônes gratuites, intégrables directement dans Figma.
5. Typographies
Google Fonts et Adobe Fonts
Ces plateformes proposent des centaines de typographies gratuites et payantes, avec des aperçus des polices pour faciliter le choix.
Fontfabric et Glyphy
Fontfabric et Glyphy offrent tous deux des typographies variées, de l'originale à la plus simple. Glyphy propose d'ailleurs, en complément, une librairie de symboles très originaux qui pourraient venir substituer à ceux des librairies classiques comme Material Symbols.
Typescale
C'est l'outil dont vous aurez besoin, une fois votre typographie choisie, pour définir des tailles cohérentes entre vos titres H1, H2, H3, etc. ainsi que vos différents textes. Cet outil gratuit offre également des projections visuelles, en direct, pour faciliter la prise de décision.
CSS Peeper
Une extension Chrome permettant d'identifier, en un clic, les propriétés CSS de n'importe quel site web, y compris les typographies utilisées sur un site.
6. Blogs et Podcasts
Material Design (Google blog)
Material Design est une ressource regroupant des éléments de design system de Google, mais pas uniquement. Vous y retrouverez un onglet "Blog" qui regroupe des articles sur les dernières tendances et innovations en matière de design.
Shortcut (Figma blog)
Le blog de Figma, Shortcut, est une ressource très qualitative pour rester informé des dernières tendances dans le monde du webdesign, avec une analyse approfondie. Vous y trouverez par exemple de nombreuses études sur les dernières tendances en matière d'IA, d'UX, de collaboration dans le webdesign, etc.
Podcasts Design Better et Parlons Design
Deux podcasts interviewant des spécialistes (product designer, graphistes, UX designers, motion designers, etc.) et couvrant une large gamme de sujets dans le monde du design.
7. Plateformes de Job
Dribbble
Eh oui, vous ne le saviez peut-être pas, mais la plateforme Dribbble a tout un espace dédié, proposant des offres d'emplois pour tous types de designers.
Boooom.co
Cette plateforme est spécialisée dans le référencement de jobs dans le web design. Vous y trouverez des jobs dans le monde entier.
8. Bonus
Designresourc.es
Pour aller plus loin, voici une plateforme regroupant diverses ressources pour le design, idéale pour découvrir de nouveaux outils et inspirations.
Pensez à partager cet article à d'autres designers ! ✌️
