Pictures With A Purpose: How Illustrations Make Amazing UIs

What is illustration?

The Merriam-Webster dictionary defines illustration as

“something that serves to illustrate: such as
a: a picture or diagram that helps make something clear or attractive
b: an example or instance that helps make something clear”

and to illustrate as

“to provide with visual features intended to explain or decorate”

A “picture” is a very broad term as illustrations are used in a variety of places from books and textbooks to ads and video games. From many faces and many facets of Illustration, we are going to talk about digital ones used in designing the interfaces of business-related entities like websites, mobile applications, logos, social media assets, various marketing collateral, etc. 

Sometimes, illustrations and graphic design get mixed up. The difference is that illustration may be a part of graphic design and the latter is a much broader concept that involves different aspects of marketing, art, and technology. Graphic designers communicate a company’s ideas into visual forms wherever this company is visually present. They work with fonts, shapes, colors, images, print design, photography, animation, logos, billboards, etc.
Another difference is that illustrations can be used for artistic purposes and serve as decoration whereas graphic design is always commercially-oriented and is known as “commercial art”. Over the years, it evolved to become the rich and powerful tool it is today.

“Content precedes design. Design in the absence of content is not design, it’s decoration.” 

– Jeffrey Zeldman

What illustrations mean for business

Pictures and illustrations when they are not outright technical, are often thought about as adornments. But going beyond beauty, what is “beautiful” in terms of benefits for businesses? That’s what many entrepreneurs want to find out and what many creatives are used to explain on a daily basis. If you come down to it, illustrations are just another design technique. 

• Content with relevant images gets 94% more views.
• Information with images is remembered 55% better.
• Facebook posts with pictures get 2.3 times more engagement.

These are just some of the facts that show the power of visual content. It becomes clear that, in plainer words, you can’t do without it. However, for your visuals, you generally have to choose between photos and digital illustrations (unless you decide to do use both, but their proper combination is a whole nother business). There are definitely more photo-based websites and apps out there than ones with custom illustrations. 
Design is the heart of any successful business endeavor and we are happy to live in times when this idea is getting its recognition. More and more companies, big tech ones among them, pay more attention to design and make use of custom illustration services. Having had more experience with them during the last couple of years, we know that illustrations are indeed a powerful tool for generating interest in your products or services that can make a real difference to your business.
The booming popularity of illustrations may even make them look superior to photos. The point is though is that instead of making a cargo cult out of them and using custom graphics blindly just for the sake of them, it’s better to understand what they are capable of, what they can and cannot do in business. The point is not where to find illustrators, but how to find those who understand the work you do and have skills for it.

“Design used to be the seasoning you’d sprinkle on for taste; now it’s the flour you need at the start of the recipe.”

— John Maeda

Use cases of illustrations in interface design

Sometimes, the solid and reliable feeling that photos give makes them a more suitable candidate for a particular type of website or app. Take a website dedicated to HVAC services. The photos of real-life devices and people tending to them are the first things that come to mind (though illustrations can also be present there in the form of schemes). Photos seem more suitable in FMCG and retail. Other times, the subject is less tangible and requires a more abstract and creative approach that only illustrations can give. It all comes down to a brand and its goals. We at Shakuro start working on a project by finding out what tasks a client has and what messages and ideas they need to communicate. And only then the search for solutions begins.
So when to use illustrations in design? There are dozens of suitable places and instances:

• A hero section is a great place for character illustrations. 
• Emails, especially when celebrating a holiday or user achievement or in a marketing campaign. 
• Onboardings, reference materials, and anywhere where a user might feel lost and confused and you feel the navigation system needs help and you want to highlight important elements that get passed by. A little bit of extra help in the form of reassuring and explanatory pictures is always welcome. 
• Anywhere with large amounts of text. Illustrations and graphic elements in general act like water helping a user to digest their “digital food” easier.
• When you want to picture a reward — badges, medals, stickers, etc. — and motivate a user for further action.
• Branding — mascots are a great example.
• Notifications and alerts.
• Stickers, don’t forget about stickers.

And so on. In fact, illustrations can be used in any type of digital media. This incredible versatility is what makes them so popular and loved by designers and users alike. Digital illustrations have been a trend of every recent year, 2021 is no exception. They evolve along with technology, business needs, and people’s preferences and expectations.

Some of the popular illustration styles in commercial projects

Let’s look at what’s trending today in graphic design illustrations.
After photos, especially stock ones, started to fail in creating the right kind of impact, illustrations stole the show to such a degree that today it’s hard to dispute their popularity. Some design critics even say that there is too much good stuff even and things started to look the same. Whatever your opinion is, if you take a commercial product with an illustration, it is likely to be done in one of the following styles: 

Line art

This style includes everything that is drawn with lines, without shadows, colors, gradients, and semitones. A line becomes the only means of visual expression. In 2020, line art became an absolute hit, a faithful friend and partner to minimalism.
Line art is simple in form and content, and clearly conveys the brand message, so it can be safely called universal. In the ocean of eye-catching graphics with every pixel striving for attention, its calm and elegant appeal may even look refreshing. For example, when we showed the set of illustrations for the Channel D dental video system, we received many comments about how fresh and powerful they looked.

Flat

If you take a general look at the modern digital illustrations, you can see that many of them are, so to speak, “flat”. These are the most popular illustrations on Dribbble as of today:

You can identify flat-style pictures by a minimal number of used forms and colors and the absence of elaborate decorative details like complex shadows and textures. 
Flat illustrations are part of the major trend called “Flat design” which is characterized by simple shapes with 2D images, simple and intuitive interfaces, well-chosen fonts, and pleasant and minimal color palettes. Flat design became popular in the 2010s when Microsoft released a new system with a minimalist style, as opposed to Apple’s skeuomorphism, design dominated by realistic effects.
Thanks to its features, the flat style helps to keep illustrations focused on the point and creates the feeling of a stylish and modern digital resource, making the content easier to perceive.

There are different variations of flat style. Sometimes you can see little “complexities” present like granular gradients:

Semi-flat

Also called semi-realism, it is, generally speaking, a part of flat design that also you could also place in a separate category. It became popular several years ago, influenced by Google’s Material Design. Light shadows make flat pictures a little more spatial.

Pseudo 3D

Next step — increasing the complexity level with more elaborate attention to detail. We mentioned pseudo 3D as one of the design trends of 2019. Soft shadows and gradients make the design more layered and interesting. 

3D

And finally, full 3D, opposed to flat design. This is one of the most promising trends that is gaining more and more popularity thanks to the advancements in technologies. It uses both old, skeuomorphic design techniques, and new ones based on the latest tech achievements. 3D illustrations look rich and attract the attention of users.

What illustrations in UI design do for businesses

Coming to the main point of this article — describing and showing you the ways graphic design and illustration services make an impact with strong and attractive visuals.

Communicate and explain ideas

Let pictures do the talking. The main purpose of graphic design and illustrations as its part is to communicate certain messages with the help of images, colors, and typography. 
If you’re strong at explaining things with words, a powerful word-message might be enough. Humans are visual creatures though. Approximately 65% of the population are visual learners. You might be an auditory or kinesthetic one, some researchers still claim that over 90% of the information an average person processes is visual regardless of their predisposition. Visuals are processed insane 60,000 times faster than text by the human brain. In other words, pictures are much easier to digest than written words however short a message and they can express your idea more vividly.
Remember the last time you were racing through emojis or stickers searching for that exact one that totally expressed your mood and attitude😄 The message just wouldn’t have been so great without it.
A collaboration of text and visuals is what makes wholesome content desirable like a meal tastes even better if it’s coupled with a delicious condiment and served in stylish and pretty tableware.
Take a look at these illustrations we created for Kobil — German digital security hard and software provider. 

The copy is fine and clear. But it would’ve been too stiff without those lovely mellow pictures we added to explain and reinforce it.
And here is a part of the design we did for Builddie — a smart home tech company.  An exciting subject made more exciting using our digital illustration services.

Visuals act as easy-to-get metaphors that strengthen the idea of a text and sometimes symbolize the whole point of a product or a service, like these illustrations for a digital art school: 

Drawn images come to the aid of designers when it comes not to objects, but to phenomena or feelings. With the help of illustrations, you can take an abstract idea and express it in an imaginative way, making your message sound more powerful and beautiful. You can portray literally whatever you like, regardless of style and concept. With photos, you could struggle too much and in vain to be able to represent some concept in an exciting and convincing way. Moreover, photos are too accurate and precise for some purposes.

Oftentimes, making a photo of some situation would be too difficult, costly, or even impossible.
Like this picture of Salvador Dali that we did for an online art marketplace: 

Evoke emotions

Humans are much more emotional beings than logical. That’s not to put one thing against the other. It’s just what makes us human is the ability to feel a wide spectrum of emotions — love, admiration, happiness, fear, joy, anger. We love to feel and love when somebody makes us feel. Today, when to find products and services that offer rational benefits is relatively easy (if you are in search of professional graphic design services, for example, you can find many companies that do it on a decent level), instead of quality, we get hooked on emotions. 
Experienced emotions make things associated with them memorable and distinguishable. When we look at a certain picture and feel something, we could later recognize it among others, and can even share it with friends to make them a gift of the same emotions.
Check out these cute guys reminding you of some of the best 4th of July moments:

Illustrations act as mood-setters, affecting us on a visceral level. This phenomenon makes illustration services an excellent fit for branding, making people feel a particular way about a brand. Meaningful pictures influence the audience’s mind and psyche creating a positive brand image and doing it really unobtrusively, managing customers’ expectations. As they say, if you don’t shape your image, your customers are going to do it by themselves and you might not like the result.
That is why it’s so important for a company owner to convey the meaning and vibe of their brand to an illustrator or graphic designer.

Design must seduce, shape, and most importantly, evoke an emotional response. 

— April Grieman

Provide entertainment, friendliness, and a (more) human approach

When designers and marketers have a task to display a large chunk of information, they know that it’s better to alternate parts of the text with graphics. Otherwise, the experience might end up too dull for a visitor. Users usually don’t read every word of digital content these days, they scan, using titles, subtitles, lists, images, and other prominent elements of a page as point references. Every guide on writing articles for a blog would highlight the importance of structuring a piece of writing the way to incorporate those elements.
It depends on a visitor’s needs. If you are reading these words right now, you are finding this piece of content containing enough value for you to spend your time on. But you could have equally well used this article for inspirational purposes, taking in the graphics only and maybe reading the titles to understand the flow and what belongs where.
It works especially well in social media. Great visuals make people linger on your ads and posts, making campaigns more effective and even making people follow you just to get more of those pretty pictures.

Aside from entertaining a visitor, illustrations also make concepts look more friendly and human. For example, when we were designing a new look for the Multifamily Modeling company, we chose illustrations to dilute the “seriousness” of an investment consultancy but kept them clean, professional-looking, and corresponding to the mood, tone, and voice of the brand.

Tell a compelling story

Many brands not only develop a single style for their products but also choose a hero, invent their world and legend. This is a great way to subtly convey to customers the goals and values of the brand. Storytelling is also a fantastic selling technique because it allows you to connect with and relate to your audience. 
When people from GermanLanguage.ph — an online school that teaches the German language to medical workers from South Asian countries — approached us with a task to make their website more relatable, we came up with a story to connect the business with their audiences. It then took form in the hands of a designer and illustrator, grew, and developed. The story tells about a Filipino nurse who struggles abroad but finds a better job and life opportunities in the end.

This broad story supports the stories of real-life strong people who had succeeded on this path and acts as a source of inspiration and reassurance. We have a separate article about this case where you can read about it in detail.
Having complete control over characters and scenes when crafting a story, an illustrator enhances the story of a brand, breathing life to its new meaning and giving birth to something new and better. What’s more, it is the pictures that allow brands to be more friendly and tell stories not only to consumers but also to the employees.

“Every great design begins with an even better story.”

— Lorinda Mamo

Enhance brand personality

A brand transcends the product and the company. As every brand has a unique look that requires a unique approach, so there is a lot of character in a talented drawing, which is very beneficial for branding.
Digital illustrations are perfect for distilling the brand image and encapsulating it into one bright entity that combines all the power of its appeal. A lot of companies have eye-catching and memorable mascots for this purpose that add life and soul. 
The illustrated character acts as a decoration or toy, creating an atmosphere and making the brand, its website, or app unique, unlike all others. The beauty of using this technique is that you can come up with any character or mascot that visitors will remember for a long time.
We created this friendly fox for the HostAdvice web-hosting information center:

And here’s one for the Crizit software design and development consultancy:

Digital illustrations become the visual embodiment of a brand’s image. They can be fine-tuned to the target audience’s tastes and preferences very accurately, creating a special vibe.
For example, Documo is a next-generation document automation platform. They are all about helping businesses digitize their document workflow while also creating better environmental conditions. Here’s a glimpse of illustrations we created for their website to reflect on their mission:

Motivate for further actions

According to a research study on the effectiveness of illustrations, people are 323% better at following directions with illustrations than they are at following directions without them. Every time a visitor uses a website or an app, they want to get some kind of result that requires a certain set of actions. If they are not familiar enough with the product, it might be hard for them to understand where to start and what to do next, so a visual aid is needed. Large and small illustrations help to easily create a “path” and show directions. 
You can directly use this approach when designing instructions or in a more subtle way. When designers need users to do something, they can add reassuring pictures to interfaces and into messages that could themselves act as motivations, giving users an appealing feeling of success, a pleasant sensation of doing the proper thing. It might look like it’s a small thing but it’s small things that matter. 

Provide beauty and appeal

Graphics add style and creativity to a product and have a deep, long-term impact on the human psyche. Illustrations make websites and apps more attractive, versatile, and interesting. There’s only this much you can do with photos, while the number of styles you can create your illustrations with is infinite. That is why many companies hire illustrators. 

Along with entertainment, you’d probably think that beauty has nothing to do with functionality. But can’t beauty be a benefit on its own? Aesthetics in design is a fascinating subject.
Fine-tuning the style for the needs of a particular audience is a useful thing. AdCentrl – an ad automation system based on cloud, tracking, and smart tech. Sounds complicated, right? And also has the potential to appear too dry. We wanted to convey their modern attitude with a set of gorgeous neon illustrations:

The sheer beauty of a masterfully created picture can be a benefit on its own:

Soothe and comfort

Illustrations are also widely used in situations when users face “undesirable” actions like technical malfunctions, error messages, etc. They are more friendly and approachable than photos, that’s why you have higher chances of “getting away with it” if you use drawn pictures than photos of real-life people.
Take a look at this picture that can be used for such a situation:

And this is our 404 page for Builddie:

Not so frustrating now, is it?
Adding illustrations like this humanizes people behind the screen, dispels the tension, and evokes the feeling of trust in a brand that troubled itself enough to come up with and implement such an idea.
All in all, a user is left with a lasting memory of a nice attitude.

“People value design that values people.”

— Mark Jenkins

What illustrators (and designers) do to make their works effective

There is no universal methodology that can be applied to any given project. Even when it doesn’t involve and need a particularly high level of artistic creativity, a lot depends on a designer’s gut feeling (and years of experience that make this feeling exist). There are, however, certain principles that might be useful for capitalizing on illustrations’ effect and exploring their full potential.
When designing a website or an app, all the tasks that illustrations perform are usually combined with other aspects of design to achieve higher efficiency.
Illustrators think about how to make their works:

• Useful. Whereas many pictures on Dribbble are created just for the pleasure of it, at the foundation of every commercial work lies the concept of its usefulness. When exploring ideas for their next work, illustrators and their project managers set a concrete goal in terms of what task a particular picture is going to solve — explain, delight, attract, etc. It may be decorative as well, but it should never distract a visitor from a product. A good illustrator has the imagination of the artist and the ability to stay firmly on the ground when there is a need to create something that is not only beautiful but also functional.
• Captivating. Beauty is a matter of taste, but there are things that can be outlined more accurately like elegance and a positive, inspirational attitude. 
• Strong. A product needs a strong message and visuals. For this reason, designers don’t put too many pictures in one interface to avoid oversaturation. A picture in an interface is not for fancying it up.
• Original. There are certainly popular styles of illustrations that we’ve outlined above, that seem to be preferred by many and produce desired effects. A piece of graphics still needs to be original enough to not merge too much with others. Every creator has mastery over some set of styles and a natural inclination towards choosing some of them. We make sure to pick an illustrator with the ability to match their skills with the needs and vibe of a project. 
• Suitable. For instance, the choice of colors can make a huge difference.

An ideal illustration is one that conceptually accurately works with a creative idea while complementing rather than repeating the message. It is visually prominent, while not overloaded. It conveys reality, while doing it in an interesting way.

Why choose professional illustration services

Unless you have some working experience in graphic design, creating something fresh your audience could interact with is going to be hard. Art that lies at the heart of illustration as a grand notion that tells us how fine and subtle the creating process can be and how surprising the audience’s reaction can sometimes be also. Quick and sloppy options won’t do, and we’re not trying to disfavor the appeal of doodly-style graphics. 
Take a look at this picture that Mailchimp used as part of their famous new brand to represent automation features:

Looks like a job for a couple of minutes. Does it?
Success is never easy. This picture is just the tip of the tip of the iceberg that is their rebranding strategy that involved an illustration system and the work of six professionals.

Look at how beautifully they conveyed the idea of help and progress. Could they have reached the same result with the help of some other medium? They could’ve, but not quite the same. Without this whimsical abstract style, they would not have been able to appear just this fresh, fun, creative, and human-oriented. 
That took months of work by people with years of experience of being able to see various options, choose the most suitable one for a particular project, and implement it, telling the story of a brand. Without this level of expertise, it’s hard to orientate in the vast and spectacular world of graphic design. To avoid wandering in the dark, reach out to a guy with a lamp.
If you’re just getting off your feet and are at the beginning of your journey and not sure that you want such a comprehensive approach just yet, you can still try it out and order several separate illustrations.
How much does it cost to hire an illustrator? What you need to know is that an average illustration takes 8-16 hours to make. The hourly rate for custom illustration services mainly depends on an illustrator’s geographical location and expertise. We charge from $50/hour and up for our outsourced illustration services.
There’s still one more option. You can buy illustrations that are ready-made, like the ones we have on Lottie, have them customized and use them commercially. The only drawback is that they are not custom. Otherwise, they are high-quality illustrations that are royalty-free and can even be fully customized to match your business’s style including colors and everything.

In closing

So what are the takeaways?
The recent years brought illustrations to the forefront of design and content marketing. They are more than pretty pictures that grab your attention. They do that and many other things like informing, explaining, motivating. Various surveys and studies show that humans tend to absorb more information and do it easier if they are stimulated by graphics. Based on our experience, our team continually tests the effectiveness of the illustrations, just as we test the effectiveness of every other element of projects we undertake. Each stage of the illustrative work is consulted and reviewed by other team members: designers, developers, project managers, and creative producers.
If you want to hire an illustrator and illustrations are a new medium for you, contact us to help you explore them. We’ll ask you a lot of questions, define your values and goals to come up with the most suitable way to express what you are trying to say.
Meanwhile, take a look at more examples of illustrations on our graphics page on Dribbble, in Behance, and read some stories in our portfolio where we tell how we used illustrations in commercial projects.
Good luck and make the most of it!

“A picture is a poem without words.”

— Horace