Boost Your Workflow & Creativity with Best Web Design Resources in 2024

Boost Your Workflow & Creativity with Best Web Design Resources in 2024

Design Gradients

In terms of selecting colors, Design Gradients is a fantastic website that can be viewed in both light and dark modes. The website allows you to view various gradients combined with closely related colors.


Color Hunt

If someone seeking color combinations for a website's style guide, then Color Hunt is a fantastic website to explore. It offers a wide range of color combinations with a useful filter that allows you to select the exact colors you need. You can sort the color combinations by popularity or by tag, making it easy to find what you're looking for.


Jitters

If you're looking to animate elements inside your website, Jitters is a great tool that lets you do this. Their onboarding experience was great and a testament to showcase what you'll be able to do once you learn their system, which essentially is animating components. And they've got some examples here. Then their editor inside of the browser actually lets you view and customize them or create your own.


Lottie Files

Lottie Files is another website very similar. They also help you build animations for a website. The files they produce, which are animated, can reduce a GIF, which is 300 kilobytes, down to a file that's only 6 kilobytes. There's also a library of pre-existing animations, or you can always build your own with their custom editing software, similar to the one from Jitters.


Font Joy

If there are too many choices, Font Joy is a website that reduces this by using a generator that automatically picks them for you. All you really have to do is use their slider to select how similar or dissimilar each one of the fonts for the header and paragraph will be. Of course, you can preview all their fonts, which is substantial, but this is too much for me.


Fontshare

To find good-looking fonts, Fontshare is a website that lets you search and preview how text might look like on your website. You'll be able to change the different sizes of your text, but one of the features I like most is pairs, which actually selects good pairings for fonts of headers as well as paragraphs, as this is something I struggle to always do.


Humaans

In terms of illustrations, Humaans is a website that allows you to mix and match different types of images of people, and you can customize your own images as well, selecting what the hair, body or clothes look like. These illustrations look perfect in apps or in different sections for web designs. Then on the website Blush, you can take these and customize them, having them look however you want, and exporting them as well, like this YouTuber which I created with a Transparent background. The Blush website has quite a few different types of illustrations you can use and customize, or even search up.


Open Peeps

OpenBeeps is another hand-drawn illustration library of people. Just like with Humans, you can use Blush to customize the look of each one of these, letting you mix and match different types of bodies, faces, expressions, and much more. Or if you're lazy like me, you can just select a shuffle to do this automatically.


Icons8

For even more illustrations, Icons8 is one of the favorite websites for web designers. It has a huge library of assets, even these handy 3D hands, which I love this clay morphism effect that you can utilize for web designs. You can download these assets to use in 3D software, or even just as a PNG on the back of a hero section. The Icons8 website has a whole section called Ouch, which is full of illustrations. Not just these 3D hands, but all sorts of 3D, trending, and universal type illustrations. These are beautifully designed and even animated, giving life to a web design or even an icon that you otherwise wouldn't be able to get if you're trying to just do this yourself.