Oftentimes, the marketing team handles the illustrations found on a company’s website. These images are typically created by graphic or brand designers, and they focus solely on marketing objectives. However, product designers often view these pictures as decorative add-ons. They may choose not to use them at all or leave areas within the design labeled as "picture to be inserted here."
Nevertheless, incorporating graphics can greatly enhance the user experience while also solving various interface design challenges. In this article, I will share examples of how I, as a product designer, have utilized illustrations in my work. Additionally, I will provide tips on how to quickly learn to draw suitable images, even if you lack prior experience.
How illustrations improve the user experience
1. Visualization of site / article / page content
The title picture of the page can reveal the whole essence of the content below. Not only to show the user what this page is about in general, but also to describe in detail what the company does or what the application does.
2. An illustration of “how it works” or a step-by-step process
Adding pictures to the "how it works" blocks can improve readability and speed up comprehension. Visualizing textual information can assist users in understanding complex step-by-step processes more quickly, particularly when dealing with intricate schemes.
3. Product visualization
It often happens that there are no photos of the product, or they are too poor quality. In this case, you can draw illustrations. Even schematic contour pictures can help to show the product and remove a lot of questions from the user. If we are talking about a lot of similar products, illustrations will help to distinguish them from each other in the list and show their similarities/differences.
4. Visualization of the scheme of a complex process
Instead of a complex flowchart of a process (for example, production), you can draw an illustration where all the stages and the relationship between them are schematically shown. This makes the scheme clearer for a user who does not even have specialized knowledge.
5. Error screen improvement
You can add illustrations on the error screens "nothing was found", "something went wrong" etc. They not only fill the empty space, showing that the page has loaded completely but also mitigate the frustration of the errors themselves.
6. Also the usual use of illustrations
Naturally, do not forget about the usual functions of images. They are needed for landing pages to illustrate text. Also for onboarding mobile applications to describe the basic functions, as well as for instructions on the use of physical objects.
Techniques for quickly creating illustrations
It would seem that when vector illustrations are needed for a website /application /presentation, you can go and buy them on the stock. But in real life, in real cases, this usually does not work out. You have to spend hours surfing on ready-made pictures, and eventually compromise: take not what you need to accurately convey the meaning, but what is there. Therefore, it is much more reliable to draw pictures yourself, even if they are not perfect. Here I will tell you how to do it quickly.
1. Outline illustrations based on photos
The simplest method that is available to any confident user of the vector editor. You just need to take a suitable photo and outline the objects.
You can assemble a picture from several photos and get a complete composition. You can fill individual shapes with color, as well as use variable line thickness to highlight individual objects. Something can be completed manually. Some necessary elements that are not in the photos.
The main advantage of such a technique is that it is easy to master and scale. You do not need to be able to draw, understand the anatomy and rules of composition, and spend a lot of time mastering it. At the same time, you can easily convey all the necessary information in the illustrations. In addition, you can make a long series of images in a single style, which can be difficult when using stock illustrations from different authors.
The disadvantage of the approach is "boring" unemotional pictures that convey meaning, but do not cause a lot of emotions and are poorly remembered. The technique is ideal as an entry point into the field of creating vector illustrations for those who have never done it. And also a way out of the situation when there is no illustrator in the team, and there are no suitable pictures on the stock
2. Flat vector illustrations
As you master vector graphics, you can gradually move to the next level. Start simplifying the contours obtained from the photos, give them a unique shape, use color, and, most importantly, volume. Gradually, you can start creating your own objects without any references.
Such images make it possible to convey the meaning much better - to highlight the necessary objects, and remove unnecessary ones, create unique scenes that cannot be found in photos. In addition, the pictures are much more vivid and emotional. When mastering the technique, a unique style inevitably arises, even if initially you will imitate other artists' forms and approaches. Therefore, the images will also become unique, which is always useful for prominence a website or application from competitors.
Drawing such pictures will already take a lot of time. Both for mastering the technique and for creating the pictures themselves. It will take a long time to pull out all the vector shapes, and colors and add volume using shadows and highlights. However, if you fill your hand on outline pictures before that, it will be much easier to master this technique. You can create contours in an illustrator, and add volume in Photoshop. With the help of noise in shadows and glare, you can take pictures even more attractive, close to real drawing techniques on paper or canvas.
2. Isometric illustrations
The next step is the transition to isometric, "pseudo-3D" images. This technique is the most difficult to master, but it gives the best result - 3D illustrations that allow you to convey dynamics and create more complex compositions. You can put many objects in one illustration and show various relationships between them.
In theory, everything is very simple - you need to build guides in three dimensions and start drawing with geometric primitives, gradually complicating. The classic angle between the horizontal guides is 120 degrees, but you can also change it a little, depending on the scene.
You can start with the pseudo "low-poly" technique, where all objects will be quite primitive, and consist of cubes and balls. It's both faster and sometimes looks more interesting.
For the first sketches, you can use photos or pictures from stock - to pick up the composition and understand the shape of different objects (cars, people, furniture, etc.). Creating detailed rough scenes greatly speeds up the work, where the objects will already be correctly positioned and all the details are thought out. These sketches can be approved by the customer - and then start drawing the final illustration.
With further development, it is already possible to move away from classical isometry and add perspective - to make the scenes even more dramatic and voluminous. For example, as in this illustration:
Thanks for your attention. In the following articles, I will talk about how I apply my drawing skills in product design. For example, to draw tables that will not only be convenient, but also beautiful.