For almost 3 years, we've been testing hundreds of tools and browsing numerous web design resources. Here's our 2024 must-have selection for any designer.
Whether you're already in the Web design business, or you'd like to become one, some of these tools will undoubtedly be very useful to you!
In the more than three years since we launched our web agency Digidop, we've tested hundreds of tools, some more useful and reliable than others. In this article, we present a selection of the most effective web design tools and resources in 2024.
Feel free to share this resource with other designers who might need it.
1. Inspiration platforms
Awwwards and Godly
![Awwwards website inspiration platform](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b553b27ac3e2f16953b0b_www.awwwards.com.webp)
These sites are a must for discovering innovative and inspiring web designs. They reference numerous examples of award-winning websites, for their innovations in design, animation and content, and help you stay at the cutting edge of design trends.
Dark.design
![Dark.design website inspiration platform](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b55890197e3f77b9ac0a4_www.dark.design.webp)
As the name suggests, this platform focuses on websites with a "dark" design. Ideal for those seeking inspiration specific to this style.
Mobbin
![Mobbin web and mobile application inspiration platform](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b556229d7a8c24db1ab94_mobbin.com.webp)
Perfect for those designing mobile apps, Mobbin offers inspiration for iOS, Android and web apps.
Designspells
![Designspells web animation inspiration platform](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b55c420ab06caffadd29c_www.designspells.com.webp)
For examples of animations and interactions, this platform is a gold mine. From hover effects to click animations, you'll find plenty of ideas.
Navbar.gallery and Footer.design
These two platforms specialize respectively in referencing Navbar (or navigation bars) and Foot er (or footer) inspirations . Ideal for finding ideas for dropdown menus, mega menus, progress bars, etc.
Minimal.gallery
![minimal gallery website inspiration platform](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b545aa059eac3407942c2_minimal.gallery.webp)
Minimal.gallery is a selection of websites with clean, simple designs. For minimalist inspiration, you've come to the right place.
Designspiration
![design inspiration platform deignspiration](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b547407b1f6b1058d80be_designspiration.com.webp)
An original platform for findingdesign inspiration by color. Designspiration lets you search for design inspirations corresponding to specific palettes. Simply enter HEX codes or select colors in the search bar.
2. Design tools
Relume
A powerful tool for generating sitemaps and wireframes using AI. Relume also offers hundreds of components that can be reused in Figma and Webflow.
Flowbase
![Flowbase web design component platform](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b565d062d0d7b3fd846e8_www.flowbase.co.webp)
Similar to the Relume component bank, Flowbase offers components for Figma, Webflow and Framer, with UI examples for interfaces and dashboards.
Figma Community
![Figma Community platform](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b56c6b9bd50519a336edf_www.figma.com-community.webp)
The Figma Community is packed withinspiration for landing pages, UI elements, mockups and more. Designers can duplicate these elements free of charge for use in their own projects. Figma also features a number of useful plugins, such as HTML to Design, which transforms a website page into a Figma design via a URL.
3. Images, illustrations and videos
Unsplash and Pexels
![nature image bank on Unsplash](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b56e4a059eac3407bf9cd_unsplash.com_fr_t_nature(Mackbook%20Pro).webp)
These two image banks are among the most extensive and high-quality, offering free images and videos for all types of projects.
Shopify Photos
![dog photos on Shopify's image platform](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b574bf9252e25be8fc4ef_www.shopify.com.webp)
Shopify also offers a royalty-free photo bank, particularly useful for specific themes. You don't even need Shopify to download these free resources.
Midjourney and Runway
These two artificial intelligences generate images and videos from text prompts, offering immense creative flexibility.
Remove.bg
![ia remove backgroud with a photo of a dog with the background removed](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b52d5578dffbda6035e96_remove.bg-ia.webp)
An AI that detects and removes the background of any image with a single click.
Squoosh.app
![squoosh.app tool to compress an image into webp](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b53603e83d03b3202f733_squoosh.app-compresse-image-webp.webp)
This tool compresses and formats images in WebP for better web performance. All with very little loss of quality!
4. Icon banks
Iconoir
![incone bank SVG iconoir](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b53c0320fe718405239a2_iconoir.com-banque-icone-svg.webp)
Provides clean, minimalist icons, editable in SVG. Ideal for adapting icon size, thickness, colors or even shapes.
Material Symbols and Remixicon
![material icons from google](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b5c1afa38ab98c77fa997_fonts.google.com-material-icons.webp)
Like Iconoir, these platforms offer, in a different style, hundreds of free SVG icons that can be edited directly from the platforms.
Iconify (Figma plugin)
![Iconify svg icon bank](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b57c2471df61bc6582d4d_icon-sets.iconify.design.webp)
A plug-in featuring a host of free icons that can be integrated directly into Figma.
5. Typefaces
Google Fonts and Adobe Fonts
![adobe fonts platform with typography examples](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b587fe2d085e199a49f2d_fonts.adobe.com.webp)
These platforms offer hundreds of free and paid typefaces, with font previews for easy selection.
Fontfabric and Glyphy
![glyphy platform with sample fonts](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b58a39bae3c770cd0b6b4_glyphy.io.webp)
Both Fontfabric and Glyphy offer a variety of typefaces, from the original to the simplest. In addition, Glyphy offers a library of highly original symbols that could replace those of classic libraries such as Material Symbols.
Typescale
![typescale.com platform with](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b58cb121fc73825baef3f_typescale.com.webp)
This is the tool you'll need, once you've chosen your typography, to define consistent sizes between your H1, H2, H3 headings , etc., as well as your various texts. This free tool also offers live visual projections to facilitate decision-making.
CSS Peeper
![Peeper CSS plugin site with HEX color codes](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b58ede882eabf3b5fb360_csspeeper.com.webp)
Aone-click Chrome extension foridentifying the CSS properties of any website, including the typography used on a site.
6. Blogs and Podcasts
Material Design (Google blog)
![google material design platform interface](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b501f0a353eb2b11af86c_m3.material.io.webp)
Material Design is a resource for Google's design system elements, but not only. You'll find a "Blog " tab featuring articles on the latest design trends and innovations.
Shortcut (Figma blog)
![figma shortcut blog page](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b51550a353eb2b11c6fef_figma-blog-shortcut.webp)
Figma's blog, Shortcut, is a top-quality resource for keeping abreast of the latest trends in the world of webdesign, with in-depth analysis. For example, you'll find numerous studies on the latest trends in AI, UX, webdesign collaboration and more.
Design Better and Parlons Design podcasts
Two podcasts interviewing specialists (product designers, graphic designers, UX designers, motion designers, etc.) and covering a wide range of topics in the world of design.
7. Job platforms
Dribbble
![recruitment area of the Dribbble platform](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b51e04c476af429815a85_dribbble-jobs.webp)
Yes, you may not have known it, but the Dribbble platform has a whole area dedicated to job offers for all types of designers.
Boooom.co
![webdesign jobs platform boooom.co](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b5230589816b4b8961e78_boooom.co-jobs-webdesign.webp)
This platform specializes in web design jobs. You'll find jobs all over the world.
8. Bonus
Designresourc.es
![web design resource site designresourc.es](https://cdn.prod.website-files.com/64760069e93084646c9ee428/664b5958d8bf1bc8b3f8d9e5_designresourc.es.webp)
To take things a step further, here's a platform of various design resources, ideal for discovering new tools and inspirations.
Please share this article with other designers! ✌️