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
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
As the name suggests, this platform focuses on websites with a "dark" design. Ideal for those seeking inspiration specific to this style.
Mobbin
Perfect for those designing mobile apps, Mobbin offers inspiration for iOS, Android and web apps.
Designspells
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 is a selection of websites with clean, simple designs. For minimalist inspiration, you've come to the right place.
Designspiration
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
Similar to the Relume component bank, Flowbase offers components for Figma, Webflow and Framer, with UI examples for interfaces and dashboards.
Figma Community
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
.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
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
An AI that detects and removes the background of any image with a single click.
Squoosh.app
This tool compresses and formats images in WebP for better web performance. All with very little loss of quality!
4. Icon banks
Iconoir
Provides clean, minimalist icons, editable in SVG. Ideal for adapting icon size, thickness, colors or even shapes.
Material Symbols and Remixicon
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)
A plug-in featuring a host of free icons that can be integrated directly into Figma.
5. Typefaces
Google Fonts and Adobe Fonts
These platforms offer hundreds of free and paid typefaces, with font previews for easy selection.
Fontfabric and Glyphy
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
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
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)
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'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
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
This platform specializes in web design jobs. You'll find jobs all over the world.
8. Bonus
Designresourc.es
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! ✌️
