How do designers create those cool illustrations for their landing pages, websites, UIs, and mobile apps? Do they draw them from scratch? Do they purchase them? Do they hire an illustrator to create them?
If you're not an illustrator and not so great at drawing or using the pen tool, or maybe you're just a beginner to digital graphic design, have no fear! In this illustration tutorial, I'm going show you some of my favorite free, pre-made vector illustration packs and then I'll show you how I tweak these illustrations to make them perfectly match different styles, brands and UI designs and at the end, I'm going to take it up a notch and show you my personal trick to making these digital illustrations look really custom and professional. All without having to draw a single thing.
Undraw
Undraw was one of the first free open source, vector illustration collections to really gain widespread popularity among designers. Created by Katerina Limpitsouni, a lot of companies have her to thank for saving them countless hours and dollars by providing this free-to-use resource of illustrations that require no attribution.
LUKASZADAM
Lukasz Adam makes amazing vector illustrations in so many different beautiful styles. His collection features everything from tech graphics to travel and finance. It's the perfect place to checkout industry-specific finds. And he's always updating them with new and clever concepts. He also has some wondering premium resources so do check those out as well.
Loomies
One of the more whimsical, cartoon style illustration collection, this vector pack vector pack features many cute everyday scenes and is available as SVG PNG as well as for Sketch, Figma Adobe XD and more.
Illustrations.co
When Vijay Verma isn't making sushi his makes awesome illustrations and sharing them for free over at illustrations.co. I particularly love his unique color combinations and graphical style that is at once modern and nostalgic. Find everything here from trending things like COVID illustrations and graphics as well as other one-off unique creations.
Drawkit
Updated weekly, Drawkit has some of my favorite illustration styles, you can find some really minimalist classy illustrations as well as totally avant-garde shapes and renderings. I love getting the latest hits in my inbox each week.
Humaaans
Humaaans by the one and only Pablo Staley takes things up a notch. This illustration pack is a library for Sketch that lets you customize the symbols; changing out body parts, changing up the skin color and even their poses. What I appreciate most about Pablo's characters is their diversity and the ability to customize not just them, but their environment too.
Stubborn
Stubborn is another great library for Sketch, Figma and adobe XD that features a free character and scene generator. Combine different people and different places to set the perfect ambiance.
Bottts
Not looking for illustrations of people? How about cute little robots! Pablo Stanley does it again with this awesome free collection of cute little robo illustrations.
Indian Doodle
Indian doodle illustration pack is a beautiful black and white, they are elegant, minimalist and simple and just what some projects call for. get them over at iconscout.com
Product Hunt Illustrations
And naturally, I will do the only proper thing and finish off this list with kitties 🐱These adorable little Product Hunt-inspired rascals and perfect for non-human related projects or when you just want to add a little extra does of cuddly to your UI designs.
As of now all of the illustrations mentioned are free for personal and commercial use, but make sure to check the license before using them in your own design projects.
One issue with using free illustrations is that it's easy to look like everyone else if you use them right out of the box, but with a few easy tweaks you can make them look quite custom.
One of the easiest ways to do this is by changing up the colors and the background with simple graphical shapes and elements:
Circles
Add simple circle behind or around your illustrations.
Blobs
Add blob shapes behind your illustrations or mask your background scene in a blob to create texture and foreground separation. Here's how I create these cool blobs without having to draw them yourself!
Small shapes
User smaller shapes to create a sense of energy, movement and rhythm.
Big colorful glows
Big soft color flows are great for creating depth of field behind your illustrations.
Icons
Show what your characters are doing by integrating icons into the background.
Unique color combinations
Try muted pastels or an unusual high contrast colors to make your artwork stand out.
Minimal or outlined
Try using really simple black and white or minimal illustrations with a pop of color.
Environment (inside or outside)
Set the ambiance by creating indoor or outdoor digital environments such as looking out of a window or into a room.
Scenes only
Try removing the characters altogether and just creating interesting environments.
Combine these ideas!
Create blob, mask it with an environment add some small shapes and just have fun creating and tell the story. After all, that's what illustration are all about, telling a beautiful visual story!.
If you want to see my customizations in action check out this video.
Looking for more resources to help you design the rest of your product? Check out these free UI Kits for product teams.
And as a final word, I'm so grateful to all of these talented and generous designers who've shared their art with us and made my work as a product designer that much more beautiful and impactful. As designers, we all know how much time effort and love we put into the things we create. So my one request is that if you do use any of these resources, link back in some way or share them on social media and pay it forward!