Best Free UI/UX Design Tools/Resources 2020
As a designer, often wondered which new tools and utilities, other designers are using? So here is a list of all the tools and utilities famous around the world in designers.
Contents
- UX Design Education
- Inspiration
- Colour
- Components
- Mockups
- Design System
- Font
- Prototyping Tools
- Free Stock Photos
- Tools that speed up your workflow
- Collaboration Tools
UX Design Education
Found the world-class UX Design Courses.
1. Interaction Design Foundation - UX Foundation Courses
Your one-stop design school to learn new design skills.
Website | Courses | Topics | Join our community
2. Udemy
We share knowledge with the world.
3. Dribble
Learn to think like a UX designer and gain the concepts, skills, and confidence to build your UX career.
4. Coursera
We envision a world where anyone, anywhere has the power to transform their lives through learning.
Inspiration
These are the websites where the world’s top design talents share their works and ideas.
1. Behance -Top Creative Work On Behance
Showcase and discover the latest work from top online portfolios by creative professionals across industries.
2. Dribble - Discover the World's Top Designers & Creative Professionals
Dribbble is where designers gain inspiration, feedback, community, and jobs and are your best resource to discover
3. Awwwards - Website Awards(Best Web Design Trends)
Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers and designers.
4. Mobile UI Design Patterns
Mobbin - Latest Mobile Design Patterns
Check out the hand-picked collection of latest mobile design patterns from apps that reflect the best in design.
mobbin.design.com
5. UI Sources (Real App Interaction)
UI Sources | Mobile Design Patterns and Interactions
Over 500+ interactions from the world's best designed and highest-grossing apps.
6. Bestfolios - UI/UX Design Portfolio Inspiration and Showcase
The largest collection of the best portfolio websites from top designers in the industry.
7. Muzil Design Inspiration
Designers' Secret Source: all the design inspiration you need. Served fresh.
Color Tools
Use these tools to explore different color schemes quickly.
1. Adobe Color
Create color schemes with the color wheel or browse thousands of color combinations from the Color community.
2. Color Tool — Material Design
Color Tool — Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
3. Muzil Color Palette Generator
Color Palette Generator - Create Beautiful Color Schemes
Search, discover, test and create beautiful color palettes for your projects
4. Colorable (Color contrast tester)
#000000 on #fff9b0
Contrast is the difference in luminance or color that makes an object (or its representation in an image or display)
5. ColorBox
ColorBox by Lyft Design
Colorbox is a color tool to produce color sets.
6. Web Gradient
Free Gradients Collection by itmeo.com
Come to WebGradients.com for 180 beautiful linear gradients in CSS3, Photoshop, and Sketch.
7. Brand Colors
BrandColors — official brand color hex codes
The biggest collection of official brand color codes around. Includes hex color codes for 500+ brands including…
8. Color Hunt
Color Hunt — Popular Schemes for Designers and Artists
A curated collection of the most popular and trendy color palettes. Get the perfect color ideas for your design.
Components
Drawing illustration could be time-consuming, why not start with this template and use it as a draft/underlay and build your design on top of that?
1. Undraw (Illustration)
unDraw | Colorful illustrations
Open-source illustrations for every project you can imagine and create.
2. Ouch by Icons8 (Illustration)
Free vector illustrations - Ouch.pics
Creators who don't draw face the problem of the boring content for app screens, articles, landing pages, and emails.
3. Opendoodle (Illustration)
Open Doodles - Free sketchy illustrations
A library of sketchy illustrations of people free for personal and commercial use.
4. Glaze (Illustration)
Glaze | Illustrations
Free illustrations, for everything. Memorable products, brands, & presentations start with our curated royalty-fr
5. Iconscout (Illustration)
Iconscout - Curated SVGs, Vector Icons, Illustrations, 3D graphics, and Lottie Animations
Iconscout comes with integrated Plugins, conversion Tools, and simple, powerful Editors that enhance and streamline your workflow.
6. UI Faces (Avatars for design mockups)
UI Faces - Avatars for design mockups
An aggregator that indexes various free avatar sources that you can use in your design mockups by copy-paste, API, plugins…
7. Freepik (Star Vectors and Illustrations)
A collection of star vectors in various styles and illustrations with over 30 collections and 290k images.
Mockups
1. Facebook Design — Devices (Various HQ Device Mockup for download)
Facebook Design — Devices
Images and Sketch files of popular devices.
2. Free Mockup World
UI & UX - Best Free Mockups
Big library of high quality best free UI & UX mockups
3. Is Graphics
Free Mockups and Design Tools [PSD, Sketch, Figma]
Huge collection of free mockups, patterns, illustrations, scene creators, DIY scenes, for Photoshop, Sketch, and Figma
4. The Mockup Club
The Mockup Club - Best Free Mockups
A directory of the best free design mockups for Photoshop, Sketch, Figma, and InVision Studio.
Design Systems
1. iOS Human Interface Guideline - Apple
Design - Apple Developer
Find documentation and resources for designing great apps for Apple platforms.
2. Material Design — Google
Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source.
3. Airbnb Design
Building a Visual Language
Behind the scenes of our new design system, This article is part of a series on our new Design Language System.
4. Uber Design
Uber Brand
With our company’s growth and new direction, we need a brand identity that is efficient to use, flexible across applications, and able to feature localized content in a globally consistent way.
5. Shopify Polaris
Our style guide helps us collaborate across disciplines to build a great experience for all of Shopify’s merchants.
6. Atlassian Design
Use Atlassian’s end-to-end design language to create straightforward and beautiful experiences.
7. Microsoft Design
8. Facebook Design Tools and Resources
A collection of tools and resources from Facebook Design.
Font
1. Google Fonts
Google Fonts
Making the web more beautiful, fast, and open through great typography
2. Typewolf
What’s Trending in Type · Typewolf
Typewolf helps designers choose the perfect font combination for their next design project-features web fonts in the…
3. DaFont
DaFont - Download fonts
Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.
4. Font Squirrel
Free Fonts! Legit Free & Quality “ Font Squirrel
Font Squirrel scours the internet for high quality, legitimately free fonts.
5. Font Inspiration
Typ.io: Fonts that go together
Here at Typ.io, we're revealing designers' decisions for all to see; peeking under the hood of beautiful websites…
Prototyping Tool
Create a testable design prototype for your interviewee and get feedback
1. Adobe XD
UI/UX design and collaboration tool | Adobe XD
Adobe XD is your UI/UX design solution for website and mobile apps creation. Design, prototype, and share. Try it now.
2. Invision
InVision | Digital product design, workflow & collaboration
InVision is the digital product design platform used to make the world's best customer experiences.
3. Figma
Figma: the collaborative interface design tool.
Figma helps teams create, test, and ship better designs from start to finish. Meet our customers Packed with design…
4. Sketch
The digital design toolkit
Seamless integration to the Mac app makes saving to Cloud as easy as hitting ⌘S. From there, you can organize designs…
5. Origami Studio
Origami Studio - Design Prototyping
A new tool for designing modern interfaces, built and used by designers at Facebook
6. Framer
Framer | A lightning fast interactive design tool.
A framer is coming to the web. Learn more › Why Framer X Resources Framer X Framer is coming to the web. Learn more › The…
7. Principle
Principle
The principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a…
8. Overflow
Meet Overflow
The world's first user flow diagramming tool tailored for designers. Build and present beautiful user flow diagrams…
Stock Photos
1. Pexels
Free stock photos · Pexels
Free stock photos you can use everywhere. ✓ Free for commercial use ✓ No attribution required
2.Unsplash
Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock…
3. Burst By Shopify
Free Stock Photos: High-Res Images for Websites & Commercial Use
Stunning stock images, perfect for blogs and websites Explore stock photography by category, all free for commercial…
4. Moose
Moose - Free Stock Photos
A collection of stock photography in a single style. Good for collages. Free for commercial use.
Tools that speed up your workflow
1. Glitch Image/Gif/Video Generator
PHOTOMOSH
Glitch images, videos, or webcam using WebGL effects. Save output as image, gif, or video.
2. Duotone Image Generator
Duotone by ShapeFactory | Create Beautiful Free Duotones
Find beautiful free duotone images to use in any project, or make custom duotone images by uploading your own image and…
duotone.shapefactory.co
3. Compressor.io (Image compression tools)
Compressor.io - optimize and compress JPEG photos and PNG images
Compressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining…
4. TinyPNG (Image compression tools)
TinyPNG - Compress PNG images while preserving transparency
Excellent question! Let me give you a side by side comparison. Below are two photos of my cousin. The left image is…
5. Remove.bg (Background removal tool )
Remove Background from Image — remove.bg
made with ♥ All trademarks, service marks, trade names, product names, logos, and trade dress appearing on our…
6. Service Design Toolkit
Service Design Toolkit - Downloads
This toolkit is an introduction to the methodology of service design
Collaboration Tools
1. Zeplin (Collaboration & Handoff tool)
Zeplin
Connected space for product teams. Handoff designs and style guides with accurate specs, assets, code…
2. Realtime Board (Collaboration Tool)
Team collaboration software & online whiteboard for teams | Miro
Scalable, secure, cross-device, and enterprise-ready team collaboration tool for distributed teams. Join 2M+ users &…
