DEV Community

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

50+ free tools and resources to create awesome user interfaces

Davide Pacilio on May 12, 2020

“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 j...
pic
Editor guide
Collapse
v6 profile image
🦄N B🛡 • Edited

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
mrsid profile image
MrSid

Awesome...All in one😍😍😍

Thread Thread
michaelandreuzza profile image
michael-andreuzza

💪💪💪💪

Collapse
abbeymaniak profile image
abbeymaniak

Nice tool, thanks bro

Thread Thread
michaelandreuzza profile image
michael-andreuzza

You are very welcome mate !

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
davidescobar007 profile image
J. David Escobar

absolutely helpful. thanks

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
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
waylonwalker profile image
Waylon Walker

Amazing List here.

I just discovered better-mobile-inputs.

Collapse
ansmtz profile image
ansmtz

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

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
musharof profile image
Musharof Chowdhuy

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

Collapse
duc profile image
Aryan Godde

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

Collapse
ckissi profile image
Csaba Kissi

Great collection of tools. I would like to contribute to the list with my latest project. Free collection of customizable Tabler icons from Pawel at tablericons.com

Collapse
vincenius profile image
Vincent Will

Awesome list - thanks for adding my CSS Separator Generator :D

Collapse
imphilippesimo profile image
imphilippesimo

Awesome 🔥🔥🔥

Collapse
theserverlord profile image
Atharva Kulkarni

Thanks a lot for the list.

Collapse
milladka profile image
Collapse
tobiastotz profile image
Tobias Totz

Wow, that are awesome resources! Thank you for sharing them <3
I bookmarked many of them and looking forward to use them for upcoming projects :)

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
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
Code_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!!!!!

Collapse
yougotwill profile image
William Grant

Great post! Thanks for all these new resources!

Collapse
venkateshaj profile image
venkatesh-aj

Hi there, I've created a color palette tool called colorsui.com. It's a free color tool.

Collapse
demetrius18 profile image
webcodingdev

Really awesome content

Collapse
nalani profile image
nalani5210

This list is great!

At the same time share a free online tool website, hoping to help fans jsonformatting.com/

Collapse
tomwilusz profile image
Collapse
tomwilusz profile image
Collapse
alextomas80 profile image
Alex Tomás

👏🏻👏🏻👏🏻

Collapse
ramyokasha profile image
RamyOkasha

thank you ❤

Collapse
cyntss profile image
Cynthia 🏳️‍🌈 Sanchez

Wow.. this list is AMAZING!

I would add also EOS icons to the list icons.eosdesignsystem.com/, as they are purely open source icons and 100% customizable.

Thank you for sharing!

Collapse
adilvelizade0 profile image
Adil Velizade

Please follow instagram : @master_javascript

Collapse
theme_selection profile image
themeselection • Edited

Great list. 🤩 We have also prepared the list of Best Open Source Web Development Tools.

Collapse
vrushank profile image
vrushank

If someone is looking for best design resources, must refer this post: dev.to/theme_selection/best-design...

Collapse
mynamejs97 profile image
Arshit

Thanks :) Great collection! It’s really very useful.

Collapse
mbejda profile image
Milos Bejda

Add twitpile to the list!
twitpile.com

Collapse
qq449245884 profile image
qq449245884

Hello, I like your article very much. May I translate your article into Chinese and share it with Chinese developers?I will attach a link to the original and the author's name.

Collapse
hakeemmidan profile image
Hakeem Almidan

illustrations potential addition: undraw.co/illustrations

Collapse
hari_prasath12 profile image
Hariprasath

Awesome tools..

Collapse
makampos profile image
Collapse
eliowar28 profile image
Eliomar Garzon

Oh dude this post it's so greeeat. Thanks man.

Collapse
seanolad profile image
Sean • Edited

Dude, you deserve for real props on this one. HOOOOLY, like this is great! I definitely needed this to take my web dev to the next level.

Collapse
ckissi profile image
Csaba Kissi

I would like to contribute with my latest side project that ables you to configure more than 550 SVG icons named Tabler Icons

Collapse
hamo225 profile image
Tarek Hamaoui

wonderful! thanks!

Collapse
klausbert profile image
Klausbert

There is something for anyone here, thanks!!

Collapse
studiotobs profile image
Uncle.Tobi

Thank you!

Collapse
pb profile image
Pawel

Great Post 🙌. All of them are fabulous.
Thanks for sharing.

Collapse
alionides profile image
Collapse
carlmultimedia profile image
Camilo Rincon

Awesome, this resources are really helpful thanks ! :D

Collapse
storytellercz profile image
Jan Dvorak

Interesting, will check them out.
One addition for React (and styled-components) devs when it comes to icons: styled-icons.js.org/

Collapse
kartiknair profile image
Kartik Nair

Wow fontsarena looks awesome! I've been looking for something like that since a long time. Thanks man ❤️

Collapse
manojnaidu619 profile image
Manoj Naidu

Amazing! You saved a lot of my time.

Collapse
keleshii profile image
Jabarii

Amazing Content!!!

Collapse
saidlagauit profile image
Collapse
rahilka profile image
Rahilka Simonova

Great list! Thanks a lot for sharing!!

Collapse
dnafication profile image
Dina

I found design checklist a great resource.