Over the last couple of months, I’ve found and kept 7 new website inspiration tools that I use pretty much every time I design a new website.
Some are more niche than offers, but I think anyone that typically reads my content could also benefit from them. If nothing else, they’re cool!
Read this on medium.com.
Starting strong, this website offers a free collection of over 5,000 community made UI elements. Ranging from button to checkboxes and everything in between!
It’s an awesome way to find design inspiration, make changes and then easily copy it over to your website. It’s also 100% free for personal and commercial use which is awesome to see, not many tools still have a free plan.
You can create a free account to save designs for later but I prefer to just bookmark them as I have enough accounts as it is! Also, nothing worse than switching accounts and losing all your saved components.
You’ve probably already heard of Dribbble.com, which is why I put it in second place.
If you’re having a completely stunning design concept, then this is the right place for you. I find most designs very aesthetic but not very functional, so whenever I see something I like it often has to be changed quite a bit.
Please don’t just copy designs as well, take inspiration and made every website unique!
Just like uiverse.io, Dribbble is completely free to browse however their are Pro plans for creators and designers wanting more features and designs. Dribbble is also used by many designers to showcase their work and get hired too.
If you find a design you like, you can often reach out directly to the artist and hire them!
Similar to uiverse.com, Lordicon offers an amazing repository of 24,000 animated icons. The free plan has much less than this, but it’s still amazing for what they offer.
With 5,900 icons on the free plan and an additional 18,100 icons in the Pro plan I doubt you’ll run out of icons anytime soon.
So next time you’re creating a website and the icons feel a little flat and boring, using Lordicon to add some spice and really make your site pop!
You can also export the icons in a range of different formats, with the most common being a Lottie file which comes out as a JSON:
How to Add Telephone Links to Your Website
So you’ve gone through all the trouble of creating a stunning website for your business,…
Who Owns Microsoft?
Microsoft is one of the largest and most recognisable companies on the planet, operating in…
Microsoft Clarity – The Definitive Guide
I know I’m late to discovering this tool, but for anyone else out that that…
PowerShell Where-Object | Super Easy Object Filtering
Morning everyone! I wanted to revisit a root topic of mine: Windows PowerShell! If you…
Best Plugins For WordPress
If you’ve ever setup a WordPress website before, you’ll have probably seen the dizzying amount…
How To Turn Off iPhone 15
You might think you’re being dumb but trust me, I had to Google how to…
Quite cool that this tool runs entirely off GitHub pages, but aside from that it’s a nice simple tool that allows you to create custom border radius shapes.
With an easy graphical interface that exports the CSS require, it’s definitely one that should be on your list:
If you’ve ever tried to create a gradient on your website and found that it creates horrible banding artefacts between the colours, then you need to use this cool.
In short, it changes the gradients from linear to easing, something that is sorely missing from vanilla HTML and CSS.
You can use the graphical menu to design your gradient, and use the second CSS generated to implement it:
The first CSS block is what the easing gradients should look like in CSS, and might do at some point in the future. But for now, we need to use the second CSS block.
This was created by Andreas Larsen who also have a number of other useful projects to check out.
Items is a huge collection of AI generated assets for websites and other creative projects.
with 350 free assets and a total of 904 assets as part of their paid plan.
Such a super useful tool when you want to add some flare to your website. Rather than another stock image, you can use an eye-catching object instead.
Whilst the base ui.glass website is based around a modern CSS UI library based entirely around glass morphism. The tool I wanted to show today was their free glass morphism generator.
Whilst it can’t give you the HTML, the CSS is a goldmine for finding awesome looking component designs.
Glass morphism, at least for me, is a design that takes so much time and care that it often outweighs implementing it. Using glass morphism on a flat colour website doesn’t instantly make it more interesting either, you need an already interesting website to fully appreciate the style.
Thanks for reading! I hope you’ve learnt something and put a new tool in your belt.
Enjoy! 🎉