The Ultimate Design Resources for UI/UX Designers
11 min readJan 22, 2024
1. 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.
- Interfaceingame: Explore a collection of video games interfaces, screenshots, and clips.
- 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
2. 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.
3. 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.
4. 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.
- Screensizes: A complete guide for Apple displays
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.
5. 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.
6. 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.