Badge Webflow Award Winner 2023

Top ressources pour devenir Web Designer Pro en 2024

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.

Publié le 
20/5/2024
Modifié le 
20/5/2024
5 min
Mignature des meilleurs ressources de design avec un badge jaune top 2024 et une image d'un bureau en fond

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

plateforme d'inspiration de sites web Awwwards

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

plateforme d'inspiration de sites 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

plateforme d'inspiration d'applications web et mobile Mobbin

Parfait pour ceux qui conçoivent des applications mobiles, Mobbin propose des inspirations pour iOS, Android et web apps.

Designspells

plateforme d'inspiration d'animations web 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

plateforme d'inspiration de sites web 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

plateforme d'inspiration de design deignspiration

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

plateforme de composants webdesign 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

Plateforme 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

banques d'images de la nature sur Unsplash

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

photos de chiens sur la plateforme d'images de Shopify

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

ia remove backgroud avec une photo d'un chien dont l'arrière plan est supprimé

Une IA qui détecte et supprime, en un clic, l'arrière plan de n'importe quelle image.

Squoosh.app

outil squoosh.app qui compresse une image en webp

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

banque d'incones SVG 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

material icons de google

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)

banque d'icones svg Iconify

Un plugin regroupant une multitude d'icônes gratuites, intégrables directement dans Figma.

5. Typographies

Google Fonts et Adobe Fonts

plateforme adobe fonts avec des exemples de typographies

Ces plateformes proposent des centaines de typographies gratuites et payantes, avec des aperçus des polices pour faciliter le choix.

Fontfabric et Glyphy

plateforme glyphy aveec des exemples de typographies fonts

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

plateforme typescale.com avec des titres

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

site du plugin CSS Peeper avec des codes HEX de couleurs

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)

interface de la plateforme material design de google

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)

page du blog de figma shortcut

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

espace de recrutement de la plateforme 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

plateforme de jobs en webdesign 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

site de ressources en web design 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 ! ✌️

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !