Introduction

Building UIs is such a strenuous task, and building cool UIs is even more challenging, such a process consumes a lot of time and energy, from building UI components, designing graphics, picking colors, and praying that you won't change your mind later on. But are you doing it in the best possible fashion? Are you making use of the astonishing tools out there?
The web is currently full of tools and resources that can help you build better looking UIs, in a marginally less time. In this post, I'll be showing you where you can get everything you need for building your next projects, from the beginning, till the end.

💡 NOTE: All the resources mentioned in this post, are completely free to use. Yes, that's right! FREE

Table Of Content

• Color/Theme Related Resources
• Icons & Emojis
• Illustrations and Drawings
• Pre-built UI Components

Color/Theme Related Resources

Colors are an essential part of an application, and good use of colors is the backbone of making a nice, wonderful and attractive user interface.

Coolors

This website is among the most popular on the list for generating color palettes, I think you should always start here, create a temporary palette, then change it later if necessary

Realtime Colors

You can also use this website to pick your color palette, and view it in real time (as the name suggests) to see how the colors are looking like on an actual website. In addition to colors here, you can also test out for fonts, which is great for getting inspiration before you start creating your own design. If you are out of ideas, click Randomize, and the website will give you some inspiration! in Real Time 😉

Icons & Emojis 🚀

Icons are everywhere, you can't have a website without icons or emojis, so here are some of my personal favorites.

Icons

Bootstrap Icons

I love bootstrap icons, in fact, I use them in almost every project, they are simple and they look amazing, they also come in different variants i.e filled, outlined etc..

Flowbite Icons

If you've read my previous posts, then you'd already know I love Flowbite, and they recently released Flowbite Icons, so I have to mention them here!

Emojis

Microsoft Fluent Emojis

Lastly, before we move on, I want to quickly mention Microsoft's Fluent Emojis, those emojis are 3D and they look super cute, so give them a go.

Moving on to the next section...

Illustrations & Drawings

Creating nice looking graphics takes tons of time not to mention the required creative skills to actually design them, so here are three resources for you!

unDraw

Plenty of graphics to choose from, all high quality, plus you can change the color accents to fit them with your color palette. You can also download them in two formats (PNG || SVG)

Many Pixels

Same story as before, high quality, with changeable color accents

Magic Pattern

This website can help you generate background patterns, gradients and much more, it's not 100% free though, but you can still use a lot of its features for free.

Last but not least...

Pre-built UI Components

There are plenty of components that you really don't want to rebuild on your own, there's no point in reinventing the wheel every time, right?

Ui Verse

Here you can find a plethora of variants for many UI elements, such as buttons, forms, loaders, and much more.

Final Words

That's it for this post, I think you now have every possible asset you may need for building beautiful UIs and save up a lot of time and design overhead. If you enjoyed this post, please tell me in the comments section so that I can make a part 2 or modify this post if there are other valuable resources that are worth mentioning in here.
Maybe a whole series dedicated to exploring the available tools and libraries for building user interfaces easily can be cool too 😅