If you’re aiming to become a top-tier web designer, having a robust set of tools and resources at your disposal is essential. Here, we’ve curated a list of some of the best web design resources that you should bookmark. These tools and platforms will not only streamline your workflow but also inspire you to create stunning websites.

1. Dora AI

• Feature: Generates complete websites from a simple prompt.
• Usage: Type a prompt (e.g., “observatory with photos of galaxies and space”), and it generates a website. You can then edit the text, images, and layout.
• Price: Free credits available; upgrade required for full editing capabilities.

2. Relume

• Feature: Generates site structures for Figma and Webflow.
• Usage: Create sitemaps and layouts for various types of websites quickly, then customize in Figma or Webflow.
• Price: Information not specified.

3. Tilebit

• Feature: Provides pre-made components for Webflow.
• Usage: Copy headers, sections, etc., into Webflow, then customize them as needed.
• Price: Cheaper than Reloom, exact pricing not specified.

4. Flowbase

• Feature: Component library for Webflow, Figma, and Framer.
• Usage: Copy components from Flowbase into your design tool and customize them.
• Price: Free and paid options available.

5. Land-book

• Feature: Inspiration site for web and landing page design.
• Usage: Browse by categories like portfolios or pricing pages for design inspiration.
• Price: Free.

6. Godly.website

• Feature: Showcases well-designed tech and SaaS websites.
• Usage: Filter by categories like Web3, AI, or SaaS to find inspiration.
• Price: Free.

7. Dark.design

• Feature: Features websites with dark designs.
• Usage: Browse dark-themed websites for inspiration.
• Price: Free.

8. Mobbin

• Feature: Showcases app design screens.
• Usage: View and get inspired by screens from popular apps, filter by Android or iOS.
• Price: Free.

9. Mesh Gradients

• Feature: Download gradient packs for design use.
• Usage: Download gradients as AI files, PNGs, or JPEGs.
• Price: Free.

10. InspoVault

• Feature: Offers design inspiration across various categories.
• Usage: Bookmark and view designs for inspiration.
• Price: Free.

11. Navbar.Gallery

• Feature: Collection of navigation bar designs.
• Usage: Browse navbars by categories like search bars or dropdowns.
• Price: Free.

12. StoryTale.io

• Feature: Provides 3D assets and illustrations.
• Usage: Filter by asset type like backgrounds, icons, or mockups.
• Price: Free and paid options available.

13. Contrast Checker

• Feature: Tool for checking text contrast on websites.
• Usage: Adjust colors and test for accessibility compliance.
• Price: Free.

14. TypeScale.com

• Feature: Helps design typographic scales for websites.
• Usage: Adjust scales, font sizes, and see how it looks on various devices.
• Price: Free.

15. Colors.eva.design

• Feature: Generates color tints and shades.
• Usage: Click on a color to copy its code and use it in your design tool.
• Price: Free.

16. Footer.design

• Feature: Inspiration for footer designs.
• Usage: Browse footers by style like grid or illustrative.
• Price: Free.

17. Magnify AI

• Feature: Upscales images.
• Usage: Upload an image and enhance its quality.
• Price: Free credits available; upgrades for higher quality.

18. Squoosh.app

• Feature: Compresses images without quality loss.
• Usage: Drop images to compress them, great for optimizing web images.
• Price: Free and paid options available.

19. StartupWebsites.co

• Feature: Collection of beautiful websites for inspiration.
• Usage: Browse by style like minimal or functional.
• Price: Free.

20. Minimal.gallery

• Feature: Showcases minimal and functional website designs.
• Usage: Browse various categories for inspiration.
• Price: Free.

21. InterfaceInGame.com

• Feature: UI inspiration for game design.
• Usage: Browse in-game UIs and download for reference.
• Price: Free.

22. DarkModeDesign.com

• Feature: Features websites with dark modes.
• Usage: Browse for inspiration specifically for dark-themed websites.
• Price: Free.

23. Font Ninja

• Feature: Chrome extension to identify fonts on websites.
• Usage: Hover over text to see font details, sizes, and colors.
• Price: Free and paid options available.

24. Fonts in the Wild

• Feature: Displays fonts used in different websites.
• Usage: View and download fonts used in web designs.
• Price: Free.

25. Heroicons

• Feature: SVG icons library by Tailwind CSS.
• Usage: Copy SVG icons and use them in your designs.
• Price: Free.

26. DrawKit.com

• Feature: Illustrations and assets for web design.
• Usage: Browse and download 2D, 3D, and animated assets.
• Price: Free and paid options available.

27. IconScout.com

• Feature: Provides icons, illustrations, and 3D assets.
• Usage: Search and download a variety of design assets.
• Price: Free and paid options available.

28. Blush.design

• Feature: Illustrations for web design.
• Usage: Download and use free or paid illustrations.
• Price: Free and paid options available.

29. EmailLove.com

• Feature: Email design inspiration.
• Usage: Browse email designs by category like SaaS.
• Price: Free.

These resources provide a wide range of tools, assets, and inspiration for web designers, helping streamline the design process and enhance creativity.