The Ultimate Design Resources for UI/UX Designers

Inspiration

• Awwwards: Platform for awards recognizing the best web design trends.

• Baubauhaus.: Source providing inspirational content on art, design, and visual culture.

• Behance: Platform showcasing works of creative professionals.

• Brutalist Websites: Collection of websites embracing the brutalist design approach.

• Mobbin: Explore and discover app user interfaces.

• Colossal: Source offering vast and impactful content on art, design, and visual culture.

• Deck.Gallery: Collection of visually appealing and curated design presentations.

• Dribbble: Platform to discover works of the world's top designers and creative professionals.

• Empty States: Source providing inspiration and examples for empty state designs.

• Figmalion: Figma-related news and community-based knowledge resources.

• Game UI Database: Database containing video game user interfaces.

• GoodUI: A/B tested design patterns and ideas for higher conversion rates and growth.

• Land-book: Gallery providing inspirational web design examples.

• Landings: Inspirational and example landing page designs.

• Landing Pages: Resources explaining various aspects of landing page designs.

• Metronic: Popular admin dashboard theme.

• Pafolios: Best design portfolio examples and case studies.

• Pttrns: Collection of mobile app designs and patterns.

• Really Good Emails: Platform for reviewing effective email designs.

• Screenlane: Source for web and mobile UI design inspiration.

• Siteinspire: Source for web design inspiration.

• The FWA - Awards: Platform recognizing excellence in web design through awards.

• UI Tips for Landing Pages: Useful UI tips for landing pages and apps.

• Httpster: Source for website design inspiration.

• Web Design Inspiration: Curated catalog of web design inspiration.

• Dark Themed Web Design Inspiration: Source for inspiration on dark-themed web design.

• Dark Mode Design : Election of websites with inspiring dark mode design.

• calltoinspiration: Digital Purple Hat for UX Designers & Developers

• Refero: Explore real-world designs from the best products

• Toolkit Design: Design info and resources

Visual Elements

Color Tools & Resources

• Tint and Shade Generator: A simple tool to generate tint and shade variations of a given color.

• Eva Design System: Deep learning color generator: Deep learning-based color generator within the Eva Design System.

• CSS Color Names: A collection of 147 colors with CSS color names for easy reference.

• Adobe Color: Create a color wheel and explore color palettes with Adobe Color.

• ColorSpace: Generate color palettes and gradients with ColorSpace.

• Coolors: A fast and intuitive color schemes generator by Coolors.

• Canva Colors: Canva Colors' color wheel for color theory and calculations.

• Colorffy: Generate CSS color gradients effortlessly with Colorffy.

• Mesh: Design stunning mesh gradients with Mesh.

• Mesh Gradients Generator: MagicPattern's tool to generate beautiful mesh gradients.

• Generate Mesh Gradients: Create and customize mesh gradients for free, with PNG export.

• Tailwind CSS 11 Colors: Generate 11-color palettes for Tailwind CSS with the official generator.

• Color Safe: Ensure accessible web color combinations with Color Safe.

• Color Scale Generator: Generate smooth color scales with Scale.

• Spectrum- Web Generator: A simple and beautiful color palette generator by Open Color.

• Actionable Color Palettes: Explore and use actionable color palettes for your designs.

• Mobile Palette Generator: A tool specifically designed for generating color palettes for mobile apps.

Typography Tools & Type Foundries

• Type Scale: Visual calculator for creating harmonious type scales.

• Fonts In Use: Explore real-world examples of typefaces in use.

• Typewolf: Stay updated on the latest typeface trends with Typewolf.

• Typographica: A curated collection of typeface reviews and commentary.

• MyFonts: Purchase and download a wide variety of fonts.

• Google Fonts: Explore and discover fonts available on Google Fonts.

• Adobe Fonts: Adobe's font library for discovering, syncing, and using fonts across projects.

• typo/graphic posters: A collection of typographic posters showcasing creative designs.

• Proportio.app: Tool for adjusting font-size and line-height proportionally.

• Doppler: Doppler helps you choose fonts for your website.

• Modulator: Experiment with variable fonts and create custom type styles.

• The Good Line-Height: Learn about the importance of good line-height in typography.

• 99 Font Pairings: Explore and experiment with 99 font pairings for your projects.

Type Foundries

• Commercial Type

• Dalton Maag

• Colophon Foundry

• Darden Studio

• Type Network

• Velvetyne

• FontShop

• The Northern Block

• Fonts by Hoefler&Co.

• HvD Fonts

• Just Another Foundry

• Klim Type Foundry

• Lineto

• Fonts - Mark Simonson

• MVB Fonts

• Okay Type

• Optimo

• Letters from Sweden

• Parachute Type Foundry

• Process Type Foundry

• Suitcase Type Foundry

• Swiss Typefaces

• TypeTogether

• Production Type

• Good Type Foundry

• Independent Swiss Type Foundry

• Sharp Type

• French Type Design foundry

• Dinamo Typefaces

• CoType Foundry

• Emma Marichal

• Hot Type

• Typelab

• Undercase Type

• Marie Boulanger

• Margot Lévêque Studio

• Ethan Nakache

• Emilie Vizcano

• Atipo Foundry

• Post Italic Type Foundry

• Type Foundry

Icon Resources

• Remix Icon: An open-source icon library, Remix Icon offers a wide range of customizable icons.

• Noun Project: The Noun Project provides a vast collection of free icons and stock photos for various purposes.

• Font Awesome: Font Awesome icon library.

• Flaticon: Flaticon offers thousands of free vector icons in various formats, including SVG, PSD, PNG, and EPS.

• Emoji Homepage: Emoji homepage allowing users to copy and paste emojis with ease.

• Atlas Icons: Atlas Icons offers a collection of icons suitable for various design projects.

• İconsvg: Quickly customize SVG icons for your project with ICONSVG.

• Heroicons: Heroicons provides a set of free, MIT-licensed high-quality SVG icons for you to use in your web projects.

• Icônes: Icônes is a large resource containing icon libraries.

Visual Assets

Image Resources

• Unsplash: Unsplash offers a vast collection of high-quality, royalty-free images and pictures for various creative projects.

• Shutterstock: Shutterstock provides a diverse range of stock photos, images, vectors, videos, and music for creative use.

• Pexels: Pexels is a platform offering free stock photos, copyright-free images, and pictures for various purposes.

• Flickr: Flickr is a platform where you can find inspiration through a vast community of photographers sharing their creative works.

• Librestock Photos: Librestock is a free stock photo search engine that aggregates photos from various sources.

• Picjumbo: Picjumbo provides a collection of free stock photos, offering a variety of high-quality images for different projects.

Illustration/Vector Resources

• Open Peeps: Open Peeps is a hand-drawn illustration library that allows you to mix and match various elements to create unique characters.

• unDraw: unDraw provides open-source illustrations that can be used freely for various projects, allowing customization to match your ideas.

• Freepik: Freepik offers a wide range of free vectors, stock photos, and PSD downloads for design projects.

• Directory of Illustration: Directory of Illustration is a platform connecting illustrators with potential clients, showcasing various illustration styles and portfolios.

• Pattern Generator: This pattern generator allows you to create seamless, royalty-free patterns for use in your design projects.

• 3dicons: 3dicons is an open-source 3D icon library that provides a collection of icons for use in three-dimensional design projects.

• Khagwal 3D Illustration Pack Library: Khagwal 3D offers a free 3D illustration pack library, providing a variety of 3D illustrations for download.

• ManyPixels: ManyPixels offers free-to-use clip art images and vector illustrations, covering various themes and styles.

• Shapefest: Shapefest is a massive library of free 3D shapes, allowing you to download and use them in your projects.

• Lukaszadams: A collection of free SVG illustrations licensed under CC0, suitable for use in websites and other projects.

• IconScout: IconScout offers a large collection of icons, illustrations, 3D illustrations, and Lottie animations available for download.

Practical Tools

Useful Tools

• Voice Flow: Voice Flow is a platform for designing, prototyping, and building voice applications.

• MockFlow: MockFlow is a comprehensive design and collaboration platform for building wireframes, prototypes, and UI designs.

• remove.bg: remove.bg is an online tool that allows you to remove the background from images automatically.

• Clean Mock: Clean Mock is a tool for creating and customizing mockups for web and mobile applications.

• Snazzy Maps: Snazzy Maps provides a collection of customizable Google Maps styles for enhancing map designs.

• Spline: Spline is a 3D design tool that enables you to create immersive web experiences without coding.

• Webflow: Webflow is a web design and development platform that allows you to build responsive websites visually.

• Overflow: Overflow is a user flow diagramming tool that helps visualize and present user journeys.

• SVGator: SVGator is an online tool for animating SVG files without the need for coding.

• LottieFiles: LottieFiles is a platform for discovering, testing, and implementing Lottie animations in web and mobile projects.

• Lottie Lab: Lottie Lab is a tool for optimizing, compressing, and previewing Lottie animations.

• Framer: Framer is a prototyping and design tool that allows you to create interactive and responsive designs.

• Jitter Video: Jitter enables creators and teams to easily design stunning animated content and interfaces.

Figma Plugins

• Aninix - UI Animation: Aninix is a Figma plugin designed for creating UI animations within the Figma environment.

• Arc: Arc is a Figma plugin that assists in creating visually appealing arcs and curved shapes.

• Autoflow: Autoflow is a Figma plugin that automates the process of creating flowcharts and diagrams.

• Batch Styler: Batch Styler is a Figma plugin that allows you to apply styles to multiple layers simultaneously.

• BlendingMe: BlendingMe is a Figma plugin for easily experimenting with and applying blending modes to layers.

• Color Blind: Color Blind is a Figma plugin that simulates different types of color blindness to help designers create more accessible interfaces.

• Contrast: Contrast is a Figma plugin that evaluates the color contrast of text layers to ensure accessibility.

• Eight Shapes Specs: Eight Shapes Specs is a Figma plugin designed for creating design specifications and style guides.

• Fig3D: Fig3D is a Figma plugin that adds 3D effects to your layers, providing depth and perspective.

• Fill Rule Editor: Fill Rule Editor is a Figma plugin that allows you to customize fill rules for shapes.

• Get Waves: Get Waves is a Figma plugin for generating customizable wave shapes for design elements.

• Jitter: Jitter is a Figma plugin for adding jittery, random movement to your layers for a dynamic effect.

• Lottie Files: Lottie Files is a Figma plugin for integrating Lottie animations directly into your designs.

• Perspective Toolkit: Perspective Toolkit is a Figma plugin for adding realistic perspective to your designs.

• Radial Generator: Radial Generator is a Figma plugin for creating radial designs and patterns.

• Skew: Skew is a Figma plugin for applying skew transformations to layers.

• SkewDat: SkewDat is a Figma plugin for easily skewing and distorting layers.

• SmoothShadow: SmoothShadow is a Figma plugin for creating smoother and more realistic shadows.

• Snapshot: Snapshot is a Figma plugin for saving and managing different versions of your design.

• Sorter: Sorter is a Figma plugin for sorting layers and frames within your Figma document.

• Storyset by Freepik: Storyset by Freepik is a Figma plugin providing a collection of customizable illustrations for storytelling.

• Style Organizer: Style Organizer is a Figma plugin for organizing and cleaning up your layer styles.

• To Path: To Path is a Figma plugin for creating a path animation effect on layers.

• Tracer: Tracer is a Figma plugin for tracing bitmap images and converting them into vector shapes.

• Typeout: Typeout is a Figma plugin for creating typewriter-like text animations.

• Visual Sitemap: Visual Sitemap is a Figma plugin for generating visual sitemaps to plan website structures.

• Isometric: Isometric is a Figma plugin for creating isometric illustrations and designs.

• Typescales: Typescales is a Figma plugin for exploring and applying typographic scales to your designs.

AI Tools

• Imagine with Meta AI: Imagine with Meta AI is a platform for exploring and creating AI-generated art using Meta's AI technology.

• ChatGPT: ChatGPT is a language model developed by OpenAI, allowing users to have interactive conversations with AI.

• DreamStudio: DreamStudio offers AI-powered video creation and editing tools for content creators.

• Midjourney: Midjourney is a platform that uses AI to assist in managing and improving mental health.

• Adobe Sensei: Adobe Sensei is Adobe's AI and machine learning platform, integrated into various Adobe Creative Cloud applications.

• Galileo AI: Galileo AI provides tools for analyzing customer feedback and extracting insights using natural language processing.

• DALL·E: DALL·E is an AI model by OpenAI that generates images from textual descriptions.

• Khroma: Khroma is an AI-powered color palette tool that helps users discover and generate color combinations.

• Uizard: Uizard is an AI design tool that converts hand-drawn sketches into digital designs.

• Magnific AI: Magnific AI provides AI-powered image and video enhancement services.

• Leonardo AI: Leonardo AI offers solutions for designing and optimizing AI models for computer vision tasks.

UX Tools & Resources

UX Tools

• Adobe Color: Adobe Color is a tool for creating color palettes and includes features like the color contrast analyzer.

• Maze: Maze is a user testing and usability testing platform for designers and developers.

• Hotjar: Hotjar is a platform that provides analytics and feedback tools to understand user behavior on your website.

• 3M VAS: 3M VAS (Visual Attention Software) is a tool for analyzing visual attention to specific elements on a webpage.

• Visual Eyes: Visual Eyes is a platform for testing and improving website accessibility and user experience.

• GTmetrix: GTmetrix is a tool for analyzing the performance and loading speed of your website.

• PageSpeed Insights: PageSpeed Insights, by Google, analyzes the performance of web pages and provides suggestions for improvement.

• Checklist for Web Content Accessibility Guidelines 2.0: The W3C provides a checklist for Web Content Accessibility Guidelines (WCAG) 2.0, offering guidance on creating accessible web content.

• Checklist - The A11Y Project: The A11Y Project offers a comprehensive checklist for web accessibility to ensure websites are inclusive and usable for all.

• Accessibility Not-Checklist: Accessibility Not-Checklist provides a list of common mistakes and misconceptions related to web accessibility.

UX Articles

• Untools: Untools is a collection of thinking tools and frameworks to help individuals solve problems and make decisions.

• Playbook for Universal Design: Playbook for Universal Design provides a guide and resources for creating inclusive and accessible designs.

• Growth.Design: Growth.Design is a platform offering resources, case studies, and insights for professionals working in growth and product design.

• UX Tools: UX Tools is a curated list of tools for user experience and product designers, helping them discover and choose the right tools for their needs.

• Humane by Design: Humane by Design provides guidelines and resources for designing ethical and user-friendly digital products.

Design System Resources

• Design Systems Database: Design Systems Database allows you to explore top-notch design systems.

• Open design systems from the Figma Community: A collection of open design systems from the Figma Community.

• Design Systems Repo: Design Systems Repo is a collection of various design system resources.

• Design System Checklist: Design System Checklist outlines crucial steps to consider when creating design systems.

• Redesigning Design Systems: "Redesigning Design Systems" focuses on the redesign of design systems.

• Checklist Design: Checklist Design is a collection of the best design practices.

• UI Guideline: UI Guideline focuses on component standardization.

• Home | The Component Gallery: The Component Gallery is a collection of various design components and systems.

• How to Create a Design System: "How to Create a Design System" provides insights into the steps of creating design systems.

• Design Systems For Figma: A collection of Design Systems for figma from all over the globe backed by code.