💻

Essential Web Design Resources to Bookmark

Aug 4, 2024

Web Design Resources Worth Bookmarking

AI Tools for Web Design

  • Reelume: AI-powered wireframe generator.
    • Generates entire website mockups from a single prompt.
    • Example: Created a mockup in under a minute.
  • Musho: AI tool integrated with Figma.
    • Generates complete website designs based on prompts.

Color Resources

  • Design Gradients:
    • Displays gradients in light and dark modes.
  • Color Hunt:
    • Offers color combinations for style guides.
    • Features filters for popular and tagged colors.

Animation Tools

  • Jitters:
    • Tool for animating elements on a website.
    • Great onboarding experience; allows customization of animations.
  • Lottie Files:
    • Creates lightweight animations (6 KB files vs. traditional GIFs at 300 KB).
    • Library of pre-existing animations and custom editing software available.

Typography Resources

  • Fontshare:
    • Search and preview fonts, including font pairing for headers and paragraphs.
  • FontJoy:
    • Font pairing generator using a slider for similarity/dissimilarity.

Design Tools

  • Wix Studio:
    • No-code web design tool resembling Figma.
    • Features viewport resizing, inspector, and drag-and-drop functionality.

Illustration Resources

  • Humans:
    • Mix and match customizable illustrations of people.
  • Blush:
    • Customizable illustrations library; includes various types of art.
  • OpenPeeps:
    • Hand-drawn illustrations with customization options.
  • Icons8:
    • Huge library of 3D assets and illustrations, including animated options.
    • Section called Ouch with universal illustrations.

Online Courses

  • Envato: Free starter guide on graphics design.
  • Refactoring UI: Focuses on UI design and color selection.
  • The Ultimate Design Bundle: Comprehensive bundle covering Figma, design principles, and web design.
  • Design for Developers (by the presenter):
    • Covers fundamentals like color theory and practical application in design.
    • Includes a visually appealing book with videos for each chapter.

YouTube Channels to Follow

  • Saitori Graphics: Focus on graphic design fundamentals.
  • Design Course (Gary Simon): Covers a variety of design concepts.
  • The Creative Crew (Brad Hasse): Web design with a no-code twist.

Additional Resources

  • Desme's Best Design Resources of 2024:
    • Comprehensive site with a variety of design-related resources: color inspiration, design blogs, courses, icons, illustrations, fonts, prototypes, stock images, and more.