# Top ressources pour devenir Web Designer Pro en 2024 Documentation3 minPublié le May 20, 2024Dernière mise à jour le ![Mignature des meilleurs ressources de design avec un badge jaune top 2024 et une image d'un bureau en fond](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa382a9f518b59f3f467_664b48583e391d5c011051b3_ressources-design-2024.jpeg)Sommaire [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Résumez cet article avec une IA[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Points clés de l'articleQue 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](/fr/services), 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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3c2a9f518b59f3f563_664b553b27ac3e2f16953b0b_www.awwwards.com.webp) 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. - [Awwwards](https://www.awwwards.com/)[‍](https://godly.website/) - ‍[Godly](https://godly.website/) ### Dark.design ![plateforme d'inspiration de sites Dark.design](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4c9_664b55890197e3f77b9ac0a4_www.dark.design.webp) 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. - [Dark.design](http://Dark.design) ### Mobbin ![plateforme d'inspiration d'applications web et mobile Mobbin](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4bd_664b556229d7a8c24db1ab94_mobbin.com.webp) Parfait pour ceux qui **conçoivent des applications mobiles**, Mobbin propose des inspirations pour iOS, Android et web apps. - [Mobbin](https://mobbin.com/) ### Designspells ![plateforme d'inspiration d'animations web Designspells](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4d1_664b55c420ab06caffadd29c_www.designspells.com.webp) 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. - [Designspells](https://www.designspells.com/) ### 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. - [Navbar.gallery](https://www.navbar.gallery/) - [‍](https://www.navbar.gallery/)[Footer.design](https://www.footer.design/) ### Minimal.gallery ![plateforme d'inspiration de sites web minimal gallery](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4cc_664b545aa059eac3407942c2_minimal.gallery.webp) Minimal.gallery fait une selection de **sites web ayant des designs épurés et simples**. Pour des inspirations minimalistes, vous serez au bon endroit. - [Minimal.gallery](https://minimal.gallery/) ### Designspiration ![plateforme d'inspiration de design deignspiration](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4e1_664b547407b1f6b1058d80be_designspiration.com.webp) Une plateforme originale pour trouver des i**nspirations 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. - [Designspiration](https://www.designspiration.com/) ## 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. - [Relume](https://library.relume.io/?via=digidop) ### Flowbase ![plateforme de composants webdesign Flowbase](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4da_664b565d062d0d7b3fd846e8_www.flowbase.co.webp) 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. - [Flowbase](https://www.flowbase.co/) ### Figma Community ![Plateforme Figma Community](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4d4_664b56c6b9bd50519a336edf_www.figma.com-community.webp) 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. - [Figma Community](https://www.figma.com/community) ## 3. Images, illustrations et vidéos ### Unsplash et Pexels ![banques d'images de la nature sur Unsplash](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4ea_664b56e4a059eac3407bf9cd_unsplash.com_fr_t_nature(Mackbook%2520Pro).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. - [Unsplash](https://unsplash.com/fr) - [‍](https://unsplash.com/fr)[Pexels](https://www.pexels.com/fr-fr/) ### Shopify Photos ![photos de chiens sur la plateforme d'images de Shopify](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4e4_664b574bf9252e25be8fc4ef_www.shopify.com.webp) 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. - [Shopify Photos](https://www.shopify.com/stock-photos) ### 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. - [Midjourney](https://www.midjourney.com/) - [‍](https://www.midjourney.com/)[Runway](https://runwayml.com/) ### Remove.bg ![ia remove backgroud avec une photo d'un chien dont l'arrière plan est supprimé](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4e7_664b52d5578dffbda6035e96_remove.bg-ia.webp) Une **IA qui détecte et supprime,** en un clic, **l'arrière plan** de n'importe quelle image. - [Remove BG](https://www.remove.bg/fr) ### Squoosh.app ![outil squoosh.app qui compresse une image en webp](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4ba_664b53603e83d03b3202f733_squoosh.app-compresse-image-webp.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é ! - [Squoosh (by Google)](https://squoosh.app/) ## 4. Banques d'icônes ### Iconoir ![banque d'incones SVG iconoir](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4c6_664b53c0320fe718405239a2_iconoir.com-banque-icone-svg.webp) 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. - [Iconoir](https://iconoir.com/) ### Material Symbols et Remixicon ![material icons de google](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4d7_664b5c1afa38ab98c77fa997_fonts.google.com-material-icons.webp) Tout comme Iconoir, ces plateformes offrent, dans un autre style, des **centaines d'icônes gratuites en SVG**, modifiables directement depuis les plateformes. - [Material Symbols (by Google)](https://fonts.google.com/icons) - [‍](https://fonts.google.com/icons)[Remixicon](https://remixicon.com/) ### Iconify (plugin Figma) ![banque d'icones svg Iconify](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f504_664b57c2471df61bc6582d4d_icon-sets.iconify.design.webp) Un plugin regroupant une **multitude d'icônes gratuites, intégrables directement dans Figma**. - [Iconify](https://iconify.design/) - [‍](https://iconify.design/)[Plugin Figma Iconify](https://www.figma.com/community/plugin/735098390272716381/iconify) ## 5. Typographies ### Google Fonts et Adobe Fonts ![plateforme adobe fonts avec des exemples de typographies](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4dd_664b587fe2d085e199a49f2d_fonts.adobe.com.webp) Ces plateformes proposent des centaines de **typographies gratuites et payantes,** avec des aperçus des polices pour faciliter le choix. - [Google Fonts](https://fonts.google.com/)‍ - [Adobe Fonts](https://fonts.adobe.com/) ### Fontfabric et Glyphy ![plateforme glyphy aveec des exemples de typographies fonts](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6710fa3b2a9f518b59f3f4c0_664b58a39bae3c770cd0b6b4_glyphy.io.webp) 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. - [Fontfabric](https://fontfabric.com/) - [‍](https://fontfabric.com/)[Glyphy](https://glyphy.io/) ### Typescale ![plateforme typescale.com avec des titres](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67224d59f80f82a32e102221_664b58cb121fc73825baef3f_typescale.com.webp) 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. - [Typescale](https://typescale.com/) ### CSS Peeper ![site du plugin CSS Peeper avec des codes HEX de couleurs](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67224da4019e6a39dba52ea6_664b58ede882eabf3b5fb360_csspeeper.com.webp) 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. - [CSS Peeper (extension)](https://chromewebstore.google.com/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?pli=1) ## 6. Blogs et Podcasts ### Material Design (Google blog) ![interface de la plateforme material design de google](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67224dd6b18d0d296af8ee76_664b501f0a353eb2b11af86c_m3.material.io.webp) 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**. - [Material Design (by Google)](https://m3.material.io/) ### Shortcut (Figma blog) ![page du blog de figma shortcut](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67224e02e0ed2a5e96150138_664b51550a353eb2b11c6fef_figma-blog-shortcut.webp) 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. - ‍[‍](https://m3.material.io/)[Shortcut (by Figma)](https://www.figma.com/blog/) ### 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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67224e68a4c0d70afc2269ad_664b51e04c476af429815a85_dribbble-jobs.webp) 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**. - [Dribbble Jobs](https://dribbble.com/jobs) ### Boooom.co ![plateforme de jobs en webdesign boooom.co](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67224ebb0d02df02b16298a7_664b5230589816b4b8961e78_boooom.co-jobs-webdesign.webp) 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. - [Boooom.co](https://boooom.co) ## 8. Bonus ### Designresourc.es ![site de ressources en web design designresourc.es](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67224f04ed0433e531ca4101_664b5958d8bf1bc8b3f8d9e5_designresourc.es.webp) Pour aller plus loin, voici une plateforme regroupant **diverses ressources pour le design**, idéale pour découvrir de nouveaux outils et inspirations. - [Designresourc.es](https://designresourc.es/) > Pensez à partager cet article à d'autres designers ! ✌️ [ ](#)![Thomas Labonne](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a45970e82f1635d9e4d7f_thomas-website%20(1).webp)Thomas LabonneCo-fondateur[ ](/fr/team/thomas-labonne)[ ](https://fr.linkedin.com/in/thomas-labonne-digidop)[ ](#)+1200 lecteurs ## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives. [S'inscrire ](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter ](https://digidopfr.substack.com/) ## Articles qui devraient vous intéresser ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir ### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026 [Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir ### Webflow lance Source. Notre avis sur ce shift. [Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir ### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA [Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles ](/fr/blog)Les meilleurs projets web commencent par une conversation[Discuter avec un expert ](/fr/contact)[Réserver un appel ](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)