DEV Community

Cover image for 50+ Free tools and resources to create awesome user interfaces (Part 2)
Davide Pacilio for Cruip

Posted on

50+ Free tools and resources to create awesome user interfaces (Part 2)

After the success of the first post, and incited by several of you to publish a second edition, I decided to spend a few hours this weekend to release the Part 2 of 50+ free tools and resources to create awesome user interfaces.

As for the first post, the whole list has been divided into different categories, including:

So if you’re looking for a free set of icons, just click on the Iconography link above.

Before we jump right in, I would like to thank all fellow devs for kindly sharing with me their favorite open-source projects after the release of the first post. Without their contribution, this second edition wouldn’t have been possible 🙌

50+ free tools and resources to create amazing UIs (Part 2):

Tools

Responsively

Responsively

A web browser that aids responsive web app development. Preview all target screens in a single window side-by-side.

Photopea

Photopea

An online, free, photoshop alternative that anyone can use.

Free Logo Maker

Free Logo Maker

Create beautiful logos in minutes (by Namecheap).

Pastel

Pastel

Pastel makes it super easy to invite your clients and teammates to leave useful comments directly on your live websites.

Whimsical

Whimsical

Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.


Illustrations

Handz

Handz

H A N D Z is a free 3D illustrations of diverse hands gestures.

Toy Faces Library

Toy Faces Library

Toy Faces is a fun diverse library of 3D avatars for your design mockups and personal use. The entire bundle costs $10, but you can download 8 3D avatars for free.

Blush

Blush

Blush makes it easy for anyone to add stunning illustrations to their work. With collections made by artists across the globe, there's something for everyone, and every project.

Vector Creator

Vector Creator

Create free personalised illustrations from 3000+ elements.

Diversity Avatars

Diversity Avatars

Diversity Avatars is set of 59 free inclusive avatars to use in your products, projects, or anywhere you want to.

Streamline Lab

Streamline Lab
80 free colorful illustrations to use in your presentations, application onboarding or marketing websites


Photos & Videos

Pixabay

Pixabay

Over 1 million of free high quality photos, videos, and vectors.

Magdeleine

Free photos

Hand-picked free photos for your inspiration.

Burst

Burst

Beautiful free stock photos for websites and commercial use (by Shopify).

Reshot

Reshot

Tons of uniquely free stock photos. Handpicked & non-stocky.

Gratisography

Gratisography

Free use-as-you-please pictures that stand out.

ISO Republic

ISO Republic

Thousands of Free High-Resolution CC0 Photos and Videos.

Mazwai

Mazwai

Stunning free stock footage clips, hand-picked by a team of video professionals. Simple licensing, and no sign-up required.

Image Colorizer

Image Colorizer
Colorize black and white images automatically.


Typography

Beautiful Web Type

Beautiful Web Type

Guide to only the best open-source typefaces.

Fontfabric

Fontfabric

100% FREE—Beautiful typeface collection—Sans, Serif, Script, and more.

Font Library

Font Library

Font Library is a gallery of high-quality fonts. Free downloads and quality support.

100 Days of Fonts

100 Days of Fonts

100 Days Of Fonts is a project by Do-Hee Kim exploring Google Font pairings for over 100 days. I personally consult this list when I need some inspiration for a new Cruip template.

1001 Fonts

1001 Fonts

Over 200K free fonts in 12092 families. Free to download for personal and commercial use.

Free Typography

Free Typography
The best free fonts, typefaces, and typography.


Iconography

Essentials

Essentials

More than 300 icons, made on a precise 2px grid with a unique geometric style. Free to use anywhere you want.

266 FREE responsive icons

266 FREE responsive icons

Free 266 responsive icons in 3 sizes (16/20/24px) created with pixel-perfect, dedicated for Interface design and wireframes.

Material Icons Library

Material Icons Library

Free collection of 1000+ icons for popular graphics tools.

Unicons

Unicons

Open-source vector icons and icon-font library.

Tabler Icons

Tabler Icons

A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Feather Icons

Feather Icons
Simply beautiful open source icons.


Palette

Image to Colors

Image to Colors

Upload an image to generate a color palette based on the image's primary colours.

Happy Hues

Happy Hues

Happy Hues is a color palette inspiration site that acts as a real world example as to how the colours could be used in your design projects.

Piggment

Piggment

Create the perfect gradient palette and get inspired to make something beautiful.

Coolors

Coolors

Generate or browse beautiful color combinations for your designs.

Colorbox

Colorbox

Colorbox is a color tool by Lyft Design to produce color tints and shades.

Picular

Picular
Picular is a rocket fast primary color generator using Google's image search.


Vectors & Shapes

Shape Divider

Shape Divider

Shape Dividers makes it easy for designers and developers to export beautiful SVG dividers for their projects.

Trianglify

Trianglify

Tweakable, one-of-a-kind hero images for your next project.

Free SVG Maps

Free SVG Maps

Hundreds of free SVG maps available in high and low details.

Worldvectorlogo

Worldvectorlogo

Download hundreds of vector logos from brands you love.

Logolix

Logolix
Free logos for your projects! No attribution required.


Inspiration

Webframe

Webframe

800 web app screenshots for inspiration on your next app.

SaaS Landing Page

SaaS Landing Page

The best SaaS landing page examples for design inspiration.

Nicely Done

Nicely Done

A curated showcase of the best digital products.

UI Design Daily

UI Design Daily

1000+ open-source UI designs, updated daily.

Mobbin

Mobbin
Discover the latest iOS UI design trends and patterns.

UI Garage

UI Garage
Daily handpicked UI inspiration & patterns.


Utility

Resizing App

Resizing App

Convert, optimise, crop, and resize images online in only one easy click. Free and unlimited.

TinyPNG

TinyPNG

Smart PNG and JPEG compression - compress up to 20 images at the same time, for free!

Favic-o-matic

Favic-o-matic

Favic-o-Matic generates favicons, both .ico & .png, and the HTML code needed to make your website look awesome on every browser and every device.

Screely

Screely

Instantly turn your screenshot into a beautiful mockup.

Sneakpeekit

Sneakpeekit

Desktop, tablet, and mobile printable grids for design wireframing.

Font In Logo

Font In Logo

Discover the fonts used on your favorite brand logos.


Conclusion

I hope you enjoyed this second edition of 50+ free tools and resources to create awesome user interfaces. Do you’ve other resources to recommend? Please feel free to contribute by commenting below - we might end up writing a third edition :)

Top comments (21)

Collapse
 
ckissi profile image
Csaba Kissi • Edited

Thank you man for a great collection #2.

Btw Tabler icons have now a site that allows you to change the stroke, color, and size and copy directly to the clipboard.

I've created it for my own needs but it's free for all now at tablericons.com

Collapse
 
abbeymaniak profile image
Abiodun Paul Ogunnaike

Awesome

Collapse
 
abdullahsajjad026 profile image
Abdullah Sajjad

You are surely gonna bookmark it.
resourcesmark.vercel.app/

Collapse
 
michelle profile image
Michelle Wirantono

Thanks for this awesome collection!

I'm really inspired by the designs shared on dribbble.com/, but I was having a difficult time finding the right tool to design my own UI - this definitely helped a lot!

Collapse
 
lifecanvasdev profile image
LifeCanvasDev • Edited

Also look at these sites for more free (PD/CC0) resources:

PublicDomainPictures.net
publicdomainpictures.net/en/

Public domain vectors - Royalty-free vector clip art, svg
publicdomainvectors.org/

kissCC0
kisscc0.com/

OpenGameArt.org
opengameart.org/

*Edit: I tried to include a screenshot for each of the above sites, but must have done something wrong, because no images were added. If someone knows how to properly add images, please let me know and I will do so ;)

Collapse
 
vuelancer profile image
Vuelancer

You can have this link and it will be useful for you!

Collapse
 
losteden1 profile image
Alex Vasilevsky

Hi Davide, I want to suggest a tool for creating visual sitemaps — octopus.do
I hope it will be helpful for your collection. Tnx.

Collapse
 
1link profile image
1Link.Fun

For the image to color, I also built a website before:

jwenjian.github.io/gradex

It's built on the grade.js and free for use, post it here to someone who need it. 😸

Collapse
 
aaronsmith9797 profile image
Aaron9797221

Hi! It's great to read this because it's very informative and covers almost all platforms, from premium to free. I'd also like to suggest that you add VanceAI to this list. VanceAI is yet another online photo enhancer that includes both basic and advanced features. It performs admirably and is extremely simple to use. It uses AI techniques to automatically help you improve image quality without any hassle. Please visit vanceai.com/ for more information and a free trial; for more photo enhancer reviews, please visit topten.ai/photo-enhancers-review/.

Collapse
 
tracey profile image
Tracey

I just tried this amazing image enhancer. It worked nicely and solved my problem perfectly, thank you for the recommendation!

Collapse
 
raunakhajela profile image
Raunak Hajela

This is a very good collection. Thank you for sharing these buddy ❤️

Collapse
 
mahmoudalieng profile image
Mahmoud1Ali3ng

I highly appreciate your work man! Thank you so much.