Have you ever looked at one of these websites (Kinsta, Intercom) and said: “Oh no, they don’t have stock photography. I don’t like this page.” No, never and that’s because when it comes to how you represent your brand on your website, photography isn’t the be-all end-all.
I understand that just entering Pixabay, Unsplash, Pexels or any other stock photography website’s URL in the address bar where you can get images like the guy sitting in the yellow couch with his laptop might come in handy and save you a lot of time, but there are times where you can just simply add a bunch of style and personality to your website with illustrations – more so if you use animated illustrations. And these types of resources might also save you from the logistical nightmare than a photoshoot can be.
Creating illustrations like this is something that requires a lot of work and it’s also something that not all of us have the chops to do. However, not having this particular skill shouldn’t be limiting in making your website visually appealing. Because on this post, I have rounded up 5 of the libraries where you can find illustrations for websites and use them on your projects. They each have their own particular styles, but all of them are in line with today’s trends.
So, let’s hop to it!
I’m going to put this one first, because it is the most recent one I used for the Web App Template and I loved using it. With the premium plan, you get more than 2000 resources, which include both flat and animated icons, as well as flat and animated illustrations (the ones used for the aforementioned template). For only $50 you can get this plan and start creating some amazing designs, but I’d be wary though, because they mention on the website that they have plans to increase it as their library keeps growing bigger and they even talk about moving everything to a subscription model.
They also have a free plan that gives you limited options and the files are only in code and PNG format. This one works if you’re not too sure of purchasing and just want to get a feel of the illustration style.
Once you create an account, the app can get a little buggy but it is usually no more than 2 times and using it is extremely simple. On the left, you’ll have a panel with four libraries (icons, animated icons, illustrations and animated illustrations). The one you select will have its resources on the center with a right panel for you to choose the colors that fit your brand and an export choice.
One thing to note with Shape.so is that if you’re going to with the animated options, the downloadable file will be a JSON file that you can’t upload to the media library for security reasons. And while there is a code to override this, there is an easier path to implement these animations.
You install a plugin called WP Bodymovin, which accepts the JSON files and even previews them. Here is a video on how to use it:
Undraw is a fun library of SVG illustrations created and constantly updated by Katerina Limpitsouni that’s not only extremely easy to use, but also free and without any obligation to give attribution.
Once you enter the site, all you need to do is click on the green “Browse Now” button and there will you have the massive library of illustrated images that with one simple click you can already download either in SVG for the web (which unlike Shape.so, you can upload to your WordPress media library) or PNG for social media.
With Undraw’s illustrations, you can give them at least one of your brand’s colors by using the color picker that’s on the top and inputting whichever hex color code you want. It will change parts of the illustrations to that color.
Created by Pablo Stanley, this one is also a free library that consists entirely of – you guessed it – humans. The difference with the other two is that the illustrations you will find in this library are entirely customizable. That’s right, when you click on the “Get the library” button on the website you will be taken to a dropbox folder with 3 subfolders for flat assets (which then is divided into many other subfolders for the different parts of the human body), Sketch files and Studio files. So, if you are savvy in these two tools, you can go bananas with the illustrations and get that perfect look you’re looking for.
This is an independent web designer who has designed a library of icons and illustrations which are free for personal and commercial use. As he points out in his website, this means that we can do whatever we want with them.
To be honest, this is the one that I’ve used the least, but not because of the style, which is amazing, but because of the lack of customization options. And this is not a knock on him, because as a web designer myself, I’m sure he has other projects in web design.
However, just like with Undraw, you can download the illustrations from this place pretty easily. And the best thing is that he also has sets of illustrations based on certain industries which certainly make it easier for us. So, for example, if you’re designing a website for an SEO agency and in your meetings you’ve talked about using illustrations, you can download this guy’s SEO illustration set and work it into the design.
The last one the list goes to the Australian web designer James Daly’s project DrawKit, which is a combination of free and premium resources. On the free side, you can find illustrations in a wide range of categories that go from abstract designs like the “A ok” sign to social media based illustrations like a guy browsing through his phone.
If you’re going for more of an interactive look and want some animations, he has two packs of “10 smooth, looping, animated scenes” that work just like with Shape.so. A JSON file format that you can use in your WordPress website projects via the WP Bodymovin plugin. Both of these packs are paid and they both cost $39.
One of the things that I have not mentioned about the benefits of using illustrations in your websites is how much you can get in terms of speed. Compared to a high quality high resolution stock photo you can get from Pexels, all of the illustrations that are a part of these libraries weigh virtually nothing. So your server isn’t going to use that many resources for loading them and you can get faster loading times (learn how to optimize your website for speed here). Even with the animated illustrations used via the WP Bodymovin plugin, they are rendered in the page as SVG code, and not as an image file per se.
However, just like I said with photography at the beginning of this post, illustrations – both flat and animated – aren’t I said it with photography at the beginning of this post, illustrations shouldn’t also be essential for your web design projects.
I really don’t think – and this is just my opinion – that a law firm is going to reflect its brand and message through illustrations. So, plan your design well with the brief and the communication you have with your client or if it’s personal project take a deep look into how you want it to be represented, and then you can make the decision whether or not to use illustrations.
Hope you had fun reading this list. There is currently one template in our library that uses illustrations, but we expect to have many more in the future.