loading...
Cover image for 50+ free tools and resources to create awesome user interfaces

50+ free tools and resources to create awesome user interfaces

davidepacilio profile image Davide Pacilio Updated on ・8 min read

“You’re only as good as the tools you use”

This saying has been around for years and highlights the importance of using the correct tool for the job. This motto applies to hundreds of different fields and disciplines, and luckily for us, to the design too.

From my experience as a senior product designer, there is almost nothing more important than the correct tools to create a nice user interface. The right set of pictures or a well-balanced colour palette can make a huge difference between a poor and decent UI.

I’m going to share a list of free and very useful resources/tools that I use daily to create users interfaces (websites, landing pages, web applications, etc…) for my clients, and for my projects Cruip and SaaS Landing Page.

To allow you to easily find a specific set of resources/tools, I divided the list into different categories:

So if you’re looking for a free set of icons, just jump to the iconography category.

A final note: This list doesn't include some of the most popular resources to create user interfaces like Unsplash (for the Photos & Videos category), or Google Fonts (for the Typography one). Why? You probably already know them.

50+ free tools and resources to create amazing UIs:

Photos & Videos

Coverr

Coverr

Beautiful, free videos for your homepage background.

Mixkit

Mixkit

Awesome stock video clips, stock music & premiere pro templates all completely free!

Pexels

Pexels

The best free stock photos & videos shared by talented creators.

Photo Creator

Photo Creator

Create realistic stock photos from thousands of models, objects, and backgrounds.

Unscreen

Unscreen

Remove video and GIF backgrounds 100% automatically.

Remove Background

Remove Background

Remove the background of any image 100% automatically.

Generated Photos

Generated Photos

The most practical way to get high-quality generated faces for commercial content.

Duotone

Duotone

Convert any photo to a duotone in seconds.


Illustrations

Open Peeps

Open Peeps

100% free hand-drawn illustration library.

Smash Illustrations

Smash Illustrations

Free mix & match illustration constructor.

Open Doodles

Open Doodles

A collection of free sketchy illustrations.

Control Illustrations

Control Illustrations

108 free flat illustrations with customisable characters.

Ouch!

Ouch!

Free vector illustrations to class up your project.

Avataaars Generator

Avataaars Generator

A simple web app for generating hand-drawn avatars.

Faux Code Generator

Faux Code Generator

Turn real code (Github Gist) into faux code (SVG image).


Palette

Parametric Color Mixer

Parametric Color Mixer

A colour palette composer inspired by audio parametric equalisers.

CSS Gradient

CSS Gradient

A simple and colorful CSS gradient generator.

Colorsinspo

Colorsinspo

Thousands of beautiful colour palettes you can use in one click.

Color Hexa

Color Hexa

A free colour tool providing information about any colour and generating matching colour palettes, shades/tints for your designs.

Color Space

Color Space

Generate nice colour palettes, gradients, and matching colour schemes for your next project!

Palettte App

Palettte App

Create, analyse and edit smooth colour palettes.

Colorable

Colorable

A colour combination contrast tester.


Typography

Freebiesbug (free fonts)

Freebiesbug (free fonts)

Handpicked free fonts and typefaces for web and graphics designers.

Fonts Arena

Fonts Arena

Free fonts, and free alternatives to premium fonts.

Befonts

Befonts

Download the free fonts for personal or commercial use.

Font Squirrel

Font Squirrel

Download thousands of completely legal, high quality, free fonts.

Fontjoy

Fontjoy

Easily mix and match different Google Fonts for the perfect pairing.

Type Scale

Type Scale

Preview and choose the right type scale for your project. Experiment with font size, scale and different web fonts.


Animations & Effects

Smooth Shadow Generator

Smooth Shadow Generator

Make a smooth shadow with easing curves.

CSSeffectsSnippets

CSSeffectsSnippets

A collection of CSS effects made with Vue.js.

Separator Generator

Separator Generator

A collection of customisable CSS section separators, with the possibility to easily copy the code.

Animista

Animista

A place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

Draggable

Draggable

A lightweight, responsive, modern drag & drop library.

Block Reveal Effects

Block Reveal Effects

Ideas for revealing content in a schematic box look.


Iconography

IconStore

IconStore

A library of free vector icons for personal and commercial projects, designed by first-class designers.

CSS Icons

CSS Icons

Open-source CSS, SVG and Figma UI Icons available in SVG Sprite, styled-components, NPM &
API.

Icon Transition Generator

Icon Transition Generator

Create a snappy transition between two icons and download the SVG code.

Tilda Icons

Tilda Icons

A collection of 700+ free icons for landing pages.

Ikonate

Ikonate

Fully customisable & accessible vector icons.

Eva Icons

Eva Icons

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

Animated Icons

Animated Icons

400 free animated icons downloadable in JSON for Lottie, GIF, and After Effects format.


Patterns & Shapes

CSS Patterns

CSS Patterns

CSS only library to fill your empty background with beautiful patterns.

Get Waves

Get Waves

A simple web app to generate svg waves, unique every time.

Blob Maker

Blob Maker

Create organic SVG shapes in just a few seconds.

Rad Lines

Rad Lines

A web tool for generating SVGs of polygons for plotting.

Patterns

Patterns

Free collection of beautiful patterns for all vector formats.

Scribbbles

Scribbbles

100+ vectorised scribbbles to spice up your design projects.


Utility

Nucleo App

Nucleo App

A powerful application to collect, customise and export all your icons.

Checklist design

Checklist design

A collection of the best UX and UI practices.

Design System Repo

Design System Repo

A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.

CSSPeeper

CSSPeeper

Inspect styles in a simple, well-organised & beautiful way.

AI Image Upscaler

AI Image Upscaler

Enlarge and enhance images automatically using AI.


Conclusion

I hope you enjoyed this list of free tools and resources. Hungry for more? Take a look at part 2 here.

Discussion

pic
Editor guide
Collapse
v6 profile image
🦄N B🛡

Avataaars generator is as useful as its name evokes ship theft on the high seas.

I'm using it as we speak. Look at this guy, see how smug he is? Maybe it's because he just found this list of useful stuff:

smug-af-nathaaan-avataaar

Also, this piraaate who died happy, doing what he loved, "...stabbing Windows and having it bleed..."

piraaate-who-died-happy-avataaar

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Super cool resources! 🔥

For those who're still hungry for more resources, I wrote a post earlier this year:

Collapse
michaelandreuzza profile image
Collapse
madhusudanbabar profile image
Krypton

Awesome 😍 😍

Thread Thread
michaelandreuzza profile image
michael-andreuzza

Thanks mate 💪💪💪

Collapse
abbeymaniak profile image
abbeymaniak

Nice tool, thanks bro

Thread Thread
michaelandreuzza profile image
michael-andreuzza

You are very welcome mate !

Collapse
mrsid profile image
Mr Sid

Awesome...All in one😍😍😍

Thread Thread
michaelandreuzza profile image
michael-andreuzza

💪💪💪💪

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

That's bookmarked already. Cool stuff!

Thread Thread
michaelandreuzza profile image
michael-andreuzza

For real?? How cool thank you so much man that means a lot to me.

Collapse
kudapara profile image
Kudakwashe Paradzayi

Amazing post. I'll definitely add some of your contributions on the Curated Design Tools repo.

GitHub logo kudapara / curated-design-tools

A curated list of the tools we use to enhance our design wokflow.

curated-design-tools

A curated list of the tools we use to enhance our design wokflow.

Design Applications

  • ExcaliDraw (⭐ Open Source ⭐) -Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
  • Adobe XD - Wireframe, design, prototype, present, and share amazing experiences for web, mobile, voice, and more.
  • Figma - Figma helps teams create, test, and ship better designs from start to finish.
  • Sketch - A digital design toolkit that helps you work and collaborate faster in design, wireframing and prototyping projects.

Design tools

  • Grabient - Beautiful and simple UI for generating web gradients.
  • Blob Maker - Make organic svg shapes for your next design.
  • Coolors - Generate perfect color combinations for your designs.
  • Metatags - Edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!
  • Css filters - Visual playground…

Feel free to open a pull request if you want 😉

Collapse
nikhil17_namal profile image
Nikhil N Namal

I've contributed few buttons on CSSeffectsSnippets, happy to see you use it. 🙌

Collapse
ahmetcetin profile image
Ahmet Cetin

great list, thx. check this out for images/videos:

pikwizard.com

All images/videos containing people are model released, so you can use them in commercial projects as well, unlike in many other "free" image sites.

Collapse
davidescobar007 profile image
Jorge David Escobar

absolutely helpful. thanks

Collapse
ansmtz profile image
ansmtz

Fantastic. Now I want to use all of this immediately!
Thank you!

Collapse
waylonwalker profile image
Waylon Walker

Amazing List here.

I just discovered better-mobile-inputs.

Collapse
ev_jennie profile image
Eugenia Evtushenko

Hey, the UI Bakery UX/UI Designer has just published the article on the 2020 UX/UI design trends with the relevant tools and interfaces examples. Check it out: uibakery.io/post/2020-ux-ui-design...

Collapse
duc profile image
Aryan Godde

This post is pure gold. Love it !!! I want a part two please 🙏😅

Collapse
musharof profile image
Musharof Chowdhuy

Many of them are my favorite tools, thanks for such a great content.

Collapse
zonayedpca profile image
Zonayed Ahmed

Take a look at this one: gradienta.io
They also have an editor to make gradient: gradienta.io/editor

Collapse
madhusudanbabar profile image
Krypton

Awesome collection,
Thanks for sharing 😇

Collapse
sherlockmac profile image
Ali Afghah

Awesome! Thank you for sharing.

Collapse
javaarchive profile image
Raymond

Where have I been? There are so many amazing tools out there that I haven't yet discovered. Wow! Thank you so much for this post!!

Collapse
romainlt profile image
Romain Lt

Awesome ! Thank you ;)

Collapse
16am profile image
16am

Amazing colloction 💥

Collapse
webdev_chen profile image
Uchena Miller

This post helped a lot

Collapse
m121 profile image
Mateo Perez Salazar

Wowwwwww this is gold!!!!!!. thanks a lot for this

Collapse
helloejsulit profile image
Ej Sulit 🇵🇭

I don't know where to start, but THANK YOUUUU!!!

Collapse
tetiross profile image
Rostyslav Semanyshyn

This is awesome list! Thanks!

Collapse
alaindet profile image
Alain D'Ettorre

Amazing resources, thank you!

Collapse
leodevhub profile image
León

OMG thnks :0

Collapse
panshak profile image
Panshak

Wow! Awesome!.. Just awesome! I'm not familiar with most of them, and they're tools that will really be useful for me.

Collapse
mateuschmitz profile image
Mateus Schmitz

Wow, awesome list. Thanks for sharing!

Collapse
thoughtinstinct profile image
SparklingINsilence

Wow, super useful. Very kind of you to share 😍

Collapse
delta456 profile image
Swastik Baranwal

Damn.. THIS IS SO AMAZING I LOVE YOU!!

Collapse
thekaveshan profile image
The-Kaveshan

This is so awesome!

Collapse
chisholmd profile image
chisholmd

I am so glad I followed the link in the newsletter :) Terrific collection of tools I had no idea existed. Thanks

Collapse
code_regina profile image
Regina

This is amazing! Thank you for publishing this awesome resource for user interfaces. I did not even know remove background existed and it will be so very helpful to future projects!!!!!