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 😅
Top comments (0)