Whether you are already in the field of Web Design or aspiring to become one, some of these tools will undoubtedly be very useful to you!
Since launching our Digidop web agency over three years ago, we have tested hundreds of tools, some more useful and reliable than others. In this article, we present you with a selection of the most effective web design resources and tools for 2024.
Feel free to share these resources with other designers who might need them.
1. Inspiration Platforms
Awwwards and Godly
These sites are essential for discovering innovative and inspiring web designs. They feature many examples of award-winning websites recognized for their innovations in design, animation, and content, thus allowing you to stay at the forefront of design trends.
Dark.design
As the name suggests, this platform focuses on websites with a "dark" design. It’s ideal for anyone looking for specific inspiration in this style.
Mobbin
Perfect for those who design mobile applications, Mobbin offers inspiration for iOS, Android, and web apps.
Designspells
For examples of animations and interactions, this platform is a treasure trove. Whether for hover effects or click animations, you will find countless ideas.
Navbar.gallery and Footer.design
These two platforms specialize in curating inspirations for Navbars (navigation bars) and Footers. They are ideal for finding ideas for dropdown menus, mega menus, progress bars, and more.
Minimal.gallery
Minimal.gallery curates websites with clean and simple designs. If you’re looking for minimalist inspirations, you will be in the right place.
Designspiration
An original platform to find design inspirations by color. Designspiration allows you to search for design ideas based on specific color palettes. Just 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 reusable components for Figma and Webflow.
Flowbase
Similar to the Relume component library, Flowbase offers components for Figma, Webflow, as well as Framer, along with UI examples for interfaces and dashboards.
Figma Community
The Figma Community is full of inspirations for landing pages, UI elements, mockups, etc. Designers can duplicate these elements for free to use in their own projects. Figma also has many very useful plugins like HTML to Design, which transforms a webpage into Figma design via a URL.
3. Images, Illustrations, and Videos
Unsplash and Pexels
.webp)
These two stock photo platforms are among the most extensive and high-quality, offering free images and videos for all types of projects.
Shopify Photos
Shopify also offers a stock photo library, particularly useful for specific themes. You don't even need to have Shopify to download these free resources.
Midjourney and Runway
These two artificial intelligences generate images and videos from textual prompts, offering immense creative flexibility.
Remove.bg
An AI that detects and removes, with one click, the background from any image.
Squoosh.app
This tool compresses and formats images into WebP for better web performance, all with very little loss of quality!
4. Icon Libraries
Iconoir
Offers clean and minimalist icons, editable in SVG. Perfect for adjusting the size, thickness, colors, or even the shapes of the icons.
Material Symbols and Remixicon
Similar to Iconoir, these platforms offer, in a different style, hundreds of free SVG icons, editable directly from the platforms.
Iconify (Figma plugin)
A plugin containing a multitude of free icons, directly integrable into Figma.
5. Typography
Google Fonts and Adobe Fonts
These platforms offer hundreds of free and paid fonts, with previews of the typefaces to facilitate selection.
Fontfabric and Glyphy
Fontfabric and Glyphy both offer various typefaces, from the most original to the simplest. Glyphy also provides a library of unique symbols that could substitute those from traditional libraries like Material Symbols.
Typescale
Once you’ve chosen your typography, Typescale is the tool you'll need to define consistent sizes between your H1, H2, H3 titles, and various text elements. This free tool also provides live visual projections to facilitate decision-making.
CSS Peeper
This Chrome extension allows you to identify, with one click, the CSS properties of any website, including the typographies used.
6. Blogs and Podcasts
Material Design (Google blog)
Material Design is a resource that brings together design system elements from Google, among others. You will find a "Blog" tab featuring articles on the latest trends and innovations in design.
Shortcut (Figma blog)
The Figma blog, Shortcut, is a high-quality resource for staying updated on the latest trends in web design, with in-depth analysis. For example, you'll find numerous studies on the latest trends in AI, UX, collaboration in web design, and more.
Podcasts Design Better et Parlons Design
These two podcasts interview specialists (product designers, graphic designers, UX designers, motion designers, etc.) and cover a wide range of topics within the design world.
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!
