“This is the 14th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

Illustration is one of the cornerstones of web design. It attracts users’ attention and gives a professional impression.

Trying to learn a design tool and do it yourself can take a lot of time. Finding a professional designer can be expensive.

Fortunately, there are free online resources that can help you. I’ve collected 16 great free resources that you can use in your next project.

Resource site

unDraw

A design project with beautiful SVG images that you can use for free. You can choose the main colors of your illustration so you can easily adapt them to your design.

IRA Design

You can select, play, and mix 5 gradient colors to fit each character you want to use in your project. Many themes can be selected from characters, objects, backgrounds, and so on.

Ouch

Ouch helps creators who can’t draw overcome the lack of quality graphics. Download free PNG and SVG illustrations to enhance your products.

DrawKit

Awesome resource for hand-drawn vector illustrations and ICONS. Illustrations are sorted through theme packs of up to 100 illustrations per pack.

Humaaans

Mix and match character illustrations. Change hairstyle, jacket, trousers, etc. Rotate and position your human element as you wish.

illu-station

An easy to use site with many high quality illustrations. Similar to unDraw, users can also set the primary color to adjust the illustration according to the project theme.

blush.design

Choose a collection of styles, experiment with variations until you create the art that tells the story, and then download the PNG or SVG of your creation.

Glaze

Illustrations are categorized by people, places, teamwork, animals, mindfulness, business, health, technology, and more. Free illustrations are available in PNG format.

ManyPixels

Various illustration types, such as outline, single color, isometric, flat line, and two-color. Users can set the main color of the illustration to suit your specific design.

Open Doodles

A unique collection of vector illustrations based on hand drawn sketches. Download the source file or create your own using the generator.

Storyset

Free customizable illustrations for your next project. With online editing capabilities, you can even animate illustrations to give them some life.

Skribbl

The global community of aspiring creatives brings you more and more free hand-drawn illustrations.

OpenPeeps

Hand-drawn character illustration. Libraries work like building blocks made of vector arms, legs and emotions. You can mix these elements to create different peeps.

Illustratious

An excellent collection of colour illustrations and animated Lottie files.

LukaszAdam Illustrations

Download illustration packs created by illustrator, both designers and developers can use Lukasz Adam personally for free, using the MIT license.

Absurd.Design

If you are looking for something out of the box and want to stand out, then these illustrations are highly recommended for you.

The original English

Simple design

With the above resources, we front-end engineers can also do design, daily I need to design the first diagram for the blog and the public design of the first diagram, the following to share my design method.

  • The first step

Create an appropriate frame using figma, for example 900*383

  • The second step

Download an appropriate illustration

  • The third step

Extract some keywords from the text

  • The fourth step

Determine the primary color of the design. We’re incolorhunt.co/You can search by the main color, or the color in the illustration

  • Step 5

Adjust the color and layout of the text to look like the first image in this article

Select Frame in the lower right corner to export the image directly and you’re done!

Feel free to share so that other developers can benefit too.