The Ultimate Design Resources for UI/UX Designers

Kemal Salih CARFİ

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

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.

The Ultimate Design Resources for UI/UX Designers

1. Inspiration

2. Visual Elements

Color Tools & Resources

Typography Tools & Type Foundries

Type Foundries

Icon Resources

3. Visual Assets

Image Resources

Illustration/Vector Resources

4. Practical Tools

Useful Tools

Figma Plugins

AI Tools

5. UX Tools & Resources

UX Tools

UX Articles

6. Design System Resources

Written by Kemal Salih CARFİ