Badge Webflow Award Winner 2023

Top resources for becoming a Web Designer Pro in 2024

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.

Published on 
20/5/2024
-
Amended on 
20/5/2024
-
5 min
Mignature of the best design resources with a yellow top 2024 badge and an image of an office in the background

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

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

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

Perfect for those designing mobile apps, Mobbin offers inspiration for iOS, Android and web apps.

Designspells

Designspells web animation inspiration platform

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

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

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

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

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

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

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

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

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

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

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

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

These platforms offer hundreds of free and paid typefaces, with font previews for easy selection.

Fontfabric and Glyphy

glyphy platform with sample fonts

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

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

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

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

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

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

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

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! ✌️

Ready to take your website to the next level?

Improve your online visibility thanks to Digidop's experience, excellence and reactivity!

Stay in touch with Digidop news!