Process

Using illustrations to enhance user experience design is now a well-checked and effective design practice. Pictures help to transfer the needed messages faster, set the mood, and provide aesthetic satisfaction. For the big pack of Real Bitcoin website illustrations, it was essential to stick to the following principles reflected in all the artworks:

• consistency: reflecting a variety of ideas, messages, and compositions used across the different website pages, the illustrations keep a consistent style to support the integrity of the user experience
• informativeness: all the illustrations aim to transfer or enhance a particular message, help present the benefits of the service
• emotionality: the style, color palette, visual metaphors, and characters in the illustration pack empower the emotional appeal as a part of user experience

People Illustrations

Real Bitcoin is the platform connecting people to quite a virtual topic and the highly technological theme of cryptocurrencies. What’s more, their target audience is people who are not deeply into the theme of cryptocurrencies yet. So, it was vital for them to add a solid and powerful human element to the first impression and all the experience of dealing with the website and set a quick and clear connection to the world of people, not the digital reality. That’s why a large pack of illustrations with human characters was developed based on the ideas of diversity and friendliness, communication, and support. With the images on the website pages, the product communicates to the visitors via a number of human characters of different ages, races, social statuses, and interests, unveiling the benefits of cryptocurrencies for different groups of users. Here are some of them.

Custom Graphics

One more task for the illustrator was to create a set of informative and symbolic illustrations that would help to beautify informative content blocks and contribute to the visual support of the message. As people perceive, decode, and memorize images faster than words, such visual elements both increase the informativeness and scannability of the webpages as well as add to the general stylistic concept. Here, Real Bitcoin website visitors will find a variety of well-recognized visual prompts on money, banknotes, wallets, coins, and gadgets for interacting with the world of digital products, and also diverse graphs, charts, and upward arrows to symbolize financial growth, progress, and development.

This project demonstrated how much informative power, emotion, and style can well-crafted custom illustrations contribute to the website design, not only making a considerable positive impact on its attractiveness but also enhancing the usability and desirability of the presented products and services.

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

Magma Math. Web Design for Educational Platform

Dance Festival. Creating a Set of Event Poster Designs

Soaplanet. Soap Brand Packaging Design with Travel Spirit

Carricare. Identity and UX Design for Safe Delivery Service

Uplyfe. Identity Design for Health App

Devpost. Hero Illustrations for Hackathons Platform

ShipDaddy. Identity and Web Design for Shipping Service

Physica Magazine. Web Design and Graphics for Scientific Blog

Nova Post Advent Calendar. UI/UX Design and Christmas 3D Art

Nibble Health. Identity and UX Design for Healthcare Fintech Service

Ready Set Recover. Web Design and Illustrations for Surgery Recovery Platform

ProAgenda. Identity and Website Design for Golf Management Service

The illustrations in the post belong to their proprietors, are the object of copyright, and cannot be used by the third side for any goals.

Originally written for Tubik Blog, graphic content by tubik

Сообщение Illustration Case Study: Visual Storytelling for Real Bitcoin Website появились сначала на Design4Users.

Whatever is your artistic manner and workstyle, the major advice from our illustrator is like that: never stop where you are. Only the constant learning process can allow you to achieve creative development and not to get stuck on the sidelines of the information field.

But how to search for the needed data and process it properly?

These are the questions Yaroslava asked herself working on a new set of illustrations called Curious Cat. In addition, in this art project, she wanted to try new stylistic techniques that are often found in printed graphics but rarely in web illustrations.

Practical advice: If you want to reinforce and develop a certain stylistic skill, work on a consistent set of illustrations, not a single artwork. In this case, you get a hand in it, your creative approach is more systematic and complex. What’s more, you will tackle the difficulties which may not arise in one piece of art, and the customer, seeing a series of artworks, will catch the general style more accurately and understand that this artwork is not just accidental something taken out of thin air.

Stage 1: Color Palette

In this case, the artist proceeded from a style that was based on imitation of manual printing graphics. So, she chose 3 primary colors, the overlay of which would give her all the necessary palette and convey the spirit of screen printing. To reach that effect, she selected a brush in Procreate that creates the necessary texture. A more time-consuming but also the more effective method is creating your own brushes using textures from real materials. Yaroslava also added a neutral gray color and a couple of paper textures to the palette.

Stage 2: Theme

The artist was looking for an abstract theme that could have a logical sequence of illustrations and, at the same time, encourage her to search for new expressive techniques and compositions.

As a result, the choice was focused on the theme called Process, so the illustrations aimed at reflecting various stages of the research and creation process. Also, this series had a mascot character: the curious and clever Cat.

The illustrator took the basic and crucial stages of the creative process as themes for the illustrations in the set:

• statement of a question
• research
• data systematization
• analysis of the received data
• hypotheses
• solution

Stage 3: Process

It’s easy to see that the creative process starts much before the first line or word gets down on paper, canvas, or artboard. So, the set of artworks about the Curious Cat reflects will help us to define, describe, and illustrate the design flow for a series of digital illustrations.  If you project this list of points onto the creative process for illustration, then it might flow in the following way.

Statement of the question

• What goals do I set for myself?
• What do I want to achieve?
• Which illustrators do I like?
• What is in their work that caught my attention?
• What is my work missing?
• What skills would I like to upgrade?
• How can I reveal the topic?

It doesn’t mean to ask these questions all together at once, it’s enough to concentrate on a couple of aspects that are of interest at the moment since the tasks change and the entire analysis process needs to be done anew each time.

Research

This stage includes collecting references, selecting works of illustrators whose work inspires you, reading articles on the topic under study (in this case, about different kinds and approaches to the creative process), or perhaps even not this topic directly but the one that will really motivate you to work (for example, biographies of famous creative people you like), and creating a library or mood board of photo fragments you like.

Data systematization

It is a vital stage. It defines how you processed the information gathered at the previous stages and were able to structure it. For example:

• The works of this group of illustrators catch my attention and emotions with the transfer of movement.
• In this group of photographs, I adore a beautiful combination of colors.
• The description I read in the article helps to convey the problem more precisely.

Data Analysis

Analysis of the obtained data in case of the illustration process lies in the:

• creation of sketches
• trying various color selections
• thinking over the plot
• considering a character image.

The artist realized that this particular project needed a character. It was the best was to reach the consistency and united look of the different artworks. What’s more, the character was effective in clarifying the terminology and actions as well as humanizing and personalizing quite abstract notions and phenomena.

Here you can see the search process for the character images that went through several iterations before the Curious Cat was found as the best choice.

Hypotheses

This stage goes in parallel with the analysis. And often, for illustrators, it looks like creating sketches and possible variations, ideas on how you can get the best for the required plot, which composition, angle, or shape is more advantageous for conveying the essence, which colors will emphasize the mood and set the needed atmosphere.

Solution

The solution is the sum of all the stages passed and implemented in the illustration. The final result may seem simple and uncomplicated at first glance, but only after deep processing and analyzing the information, this result will be not random or accidental but will be based on experience and practice. What’s more, the set of illustrations opens a broader perspective for visual storytelling.

Hopefully, the stages described above will motivate you to try such a systematic approach in your illustration experience. Also, welcome to check more practical tips and examples by Yaroslava: in our earlier articles, she shared guides on how to build up your original style of illustration and also, she shared the creative process step-by-step in the case studies on narrative illustration, interface illustration, and theme illustration devoted to the Olympic Games.

Illustration Collections and Digital Art Case Studies

If you want to see more collections of illustrations or discover how they work in particular design projects, here’s the set of posts for you.

Book Illustrations for Visual Storytelling

45 Inspiring Illustrations About Workspaces, Creativity and Art

20+ Atmospheric Digital Illustrations: From Landscapes to City Views

Digital Art: 40+ Inspiring Illustrations on Diverse Themes

Case Study: Fulfill. Illustrations and Web Design for 3PLs Marketplace

Case Study: Roebuck. Mobile Design and Illustrations for Educational App

Case Study: World Humanitarian Day. Illustrations and Video for United Nations

Case Study: ABUK. Custom Book Cover Design for Audiobook App

Case Study: Moonworkers. Digital Illustrations on Film Production

5 Basic Types of Images for Web Content

10 Reasons to Apply Illustrations in UI Design

Originally written for Tubik Blog, graphic content by tubik arts

Сообщение Illustration Process: Creative Steps of Making Illustration Set появились сначала на Design4Users.

Project

Creating a series of illustrations for the digital products and marketing needs of the company involved in the movie industry.

Idea

Due to its beauty and creative flexibility, illustration rockets with a constantly growing number of websites and mobile apps as one of the ways to enhance the usability, aesthetic, emotional and visual appeal of the interface. What’s more, artworks subordinate to the particular goal work well to set the storytelling for a company, brand, digital product, or specific marketing campaign. The Moonworkers project was about activating all the mentioned points.

Developing the brand and its presence on the web, the company operating in the industry of movie production and talent acquisition for it, turned to us with the task of creating a set of original illustrations that would present the features, benefits, and nature of the services.

The important issues to consider for the illustrations were the following:

• consistent style
• inclusion of references to famous films and cartoons
• clear visual presentation of the particular points and benefits (for example, secure payments, team management, etc.)

After the market research and creative search for the general style, the designer worked on the color choice that had to keep consistent for all the series. The color search resulted in an eye-pleasing palette harmonically combining warm and cold shades. The next step was to integrate prompts from known movies into the business-like artworks to make the experience feel fun as well as connect the users to the movie industry via recognizable details and characters.

Let’s check the result of that creative process.

Illustrations

Here are the final illustrations to be used for UX and marketing goals. Dynamic, often irregular composition, multilayered perception from the core element to tiny details integrated into the image, emotional characters, visual prompts on film production and positive color combinations all together set the needed effect. The artworks were designed to be applied to web or mobile interfaces, banners, social media marketing, and other goals. Welcome to review the set of final illustrations. Have you guessed all the movies coded in them?

The illustration visualizing the process of searching for candidates to participate in a particular movie.

The artwork imitating the process of casting potential actors.

The illustration showing the atmosphere of actors’ casting and hiring process.

The illustration devoted to the topic of creative team management.

The artwork featuring the details of the video production process.

Another illustration unveiling some details and processes typical of the movie production process.

 The elegant digital illustration featuring the process of user profile creation.

One more illustration sharing the atmosphere of creating a user profile for the talent in the film production industry.

The illustration that transfers the idea of easy communication.

The digital artwork that reflects a deep concentration on the creative process.

The artwork transferring the idea of payment security.

A bit more digital art on financial issues, this time connected to secure payment via web and mobile.

Another illustration of the payment theme, this one sharing the idea of payment success.

Cheerful characters in the picture are devoted to free transactions.

Cute vintage TV set in the illustration for the website 404 pages

The Moonworkers was a great creative challenge for the artist: she had to keep all the series of artworks consistent not only visually but also emotionally, and at the same time, she needed to combine them with the diversity of characters and ideas. Stay tuned; new cases on digital illustrations are coming soon.

Case Studies on Graphic Design and Illustration

OK Boomer. Trivia Game Design and Branding

Real Bitcoin. Creating Website Illustrations

Devpost. Hero Illustrations for Hackathons Platform

Book Illustrations for Visual Storytelling

Quisine. Branding Design for Food Delivery Service

Dicey. Logo and Mascot Design for Party Game

MYWONY. Storytelling with Brand Intro Design

Florence App. Illustrations for Healthcare Service

Tubik in Paris. Design Process for Narrative Illustration

Winter Olympics Illustration. Step-by-Step Process

Real Racing. Graphics for Mobile Game

Originally written for Tubik Blog, graphic content by tubik

Сообщение Illustration Case Study: Digital Artworks on Film Production Theme появились сначала на Design4Users.

The term “illustration” originates from the Latin “illustrare” whose meaning is to light up, illuminate, explain. An illustration may either serve as a supplement to the text or fully replace it. The series of illustrations can tell a kind of small story by means of visuals. It has to be clear and transfer the needed message properly.

To show it in the real project, in this case study, we are unveiling the design process on the narrative digital illustration by Tubik designer Yaroslava Yatsuba. Earlier we shared her tips on creating flat illustrations and the case study on sports illustration. This time you are welcome to check how the set of narrative illustrations was created for a cartoon “Paris Je T’aime”.

Project

Creating the series of narrative illustrations for the story “Paris Je T’aime”.

Process

Idea

The story features the adventures of the cute and cheerful dachshund Tubik in Paris. The initial volume of graphics set for the project was around 10 digital illustrations.

Stage 1. Rough Pencil Sketch

At this stage, the designer made research, collected references, and analyzed them. The first sketch was made frontal as at this phase it was important to catch the idea, the sequence of scenes, and plot while the composition could be worked out later. In the process, the number of shots was reduced from 12 to 8: the designer left only the most recognizable landmarks and united some illustrations into one.

First quick sketch

A bit more detailed working out one of the illustrations.

Stage 2. Compositional Sketch

Having developed the draft storyboard, Yaroslava moved to work on the elaborate drawing which will become the basis of the digital illustration. Here she considered the composition of a shot, try interesting perspectives and stylistic effects. So, she redrew the sketch from the perspective of the dog’s eye, added the effect of the Fish-eye lens and made the angle of descent steeper. All that added dynamics, drive, and fun to the illustration.

Working out the main character

Together with composition, the designer developed the image of the main character, a funny dachshund dog. First, she drew 6 different concepts for finding its looks.

Then she worked out the digital image for the chosen concept.

Having made a choice on one of the variants, she worked on the dynamics of its movements as the plot required to show that the dog runs across Paris twining round it.

Designer’s tip: Study the books on character animation, they teach much about transitions and movements.

Analysis of dynamic motion of the character

Detalization of the character

Stage 3. Color and Texture

Color
After setting up the composition and appearance of the main character, the designer drew that all in vector and moved to one of the hardest artistic challenges – the choice of the color palette. She wanted to make the illustrations bright and catchy so the choice was made on juicy colors. In the final set, there were 6 colors plus white.

Textures
Textures and ragged edges add originality to illustrations. For this series, the designer used the object’s masks and art brushes for the outline. That added the feeling of hand-drawn book illustrations.

Colors and textures chosen for the series

The elements of composition to one of the illustrations

Final Result

And here are all the shots for the series. Check the story of how a funny dog traveled around Paris and fell in love with the city.

“Err, where am I?”

“That looks interesting, doesn’t it?”

“I must see everything!”

“Unbelievable, so many halls…”

“Selfie with Mona!”

“Hey, guys, where’s the exit?”

“Ah, that’s so beautiful!”

“Paris, I love you!”

Useful Reading

Here’s a bunch of articles and case studies for more reading on graphic design and digital art:

Design Process: How to Create Catchy Flat Illustrations

Winter Olympics Illustration. Step-by-Step Process

Case Study: Creating a Mascot for a Party Game

Case Study: Brand Intro Cartoon for Wedding Dresses Brand

Creative Jobs: What Graphic Designers Do

Functional Art: 10 Big Reasons to Apply Illustrations in UI Design

5 Basic Types of Images in Web Design

Hero Images in Web Design: When, Why, and How to Use

Originally written for Tubik Blog

Сообщение Case Study: Step-by-Step Process for Storytelling Illustration Set появились сначала на Design4Users.

So, if you are the one to master 3D art in Blender software, this post will be obviously handy. Here you will find 20+ from Roman Klco’s numerous tutorials showing the process of 3D modeling. This set features 3D artworks inspired by famous movies and cartoons. Here you will find places, buildings, characters, vehicles, objects, and details that will instantly remind you of known stories. Enjoy!

Jurassic Park

The Sopranos

Iron Man’s Garage

Harry Potter’s Patronus

Hogwarts

Hogwarts Express

Simpson’s House

Bumblebee Beetle

Star Wars Stormtroopers

Star Wars Millenium Falcon

Star Wars AT-AT

Star Wars X-Wing

Knight Rider

Friend’s Central Perk

Witcher

Witcher Castle

Avengers HQ

Futurama Ship

Futurama

Rick and Morty’s Garage

Kill Bill Character

Thor Character

Check more projects by Roman Klco on Dribbble

For more inspiration, check the video tutorials on Procreate illustrations, examples of awesome 3D illustrations, black and white illustrations, 3D portraits of famous people, dog illustrations, love illustrations, and other posts from our D4U Gallery in which we gather impressive creatives to share their art with you.

Сообщение 3D Art: Blender Tutorials by Roman Klco Inspired by Movies появились сначала на Design4Users.

Project

Creating original digital illustrations presenting the features and benefits of the healthcare service connecting nurses and patients.

Process

Florence is an online marketplace where self-employed nurses can find high-paying shifts across the UK. It removes the hassle of booking through agencies: nurses connect directly to clients and choose suitable shifts. The task for the designer was to create illustrations in which characters will reflect the nature of the service and the benefits it brings to improve life for both nurses and patients.

The first stage of the task required creating a set of sketches of nurses doing typical activities and elderly patients enjoying life.

At this stage, the graphic designer created six quite detailed sketches and then added two more. There weren’t too many alterations for them: just little changes were made to the nurses’ uniforms to give them more modern looks, and also the male nurse character was added.

Having discussed the hand-drawn sketches with the client, the designer made one of them digital and presented it in two color palettes based on the corporate color of the company (#7158CD) and its shades. Two-color schemes were chosen for it: four-color contrast harmony and analogous colors. The choice turned next to the four-color contrast harmony.

The next stage involved digitizing and detailing the sketches.

Then the designer moved on to creating an extended and complex illustration that would unite many sketches into one integral composition. The artist defined the task for herself to combine all those separate scenes harmonically, and this way to transfer the message about the core idea behind the app – connection with health workers that care about elderly people.

After the process of creative search in the aspect of effective composition, the designer came up with the idea of placing the characters on various gadgets. This way, each pair of elderly people would be connected to a nurse, and this way will transfer the key message: we are close, in the one-click distance, don’t worry, enjoy your life.

When all the parts of the image were digitized, and details were polished, the designer provided the clients with two options of the background color – cold and warm. The clients made a choice upon the warm one.

The variant with a cold background color

The variant with a warm background color

As we mentioned in the article devoted to hot UI design trends, the trend of custom graphics has opened a wider perspective of storytelling in the interfaces. More and more websites and mobile apps turn to specially designed characters showing the story, setting the atmosphere, sending the message, or presenting the benefits in a way that corresponds to the mood, tone, and voice of the platform. Original characters help to make the interactions more human-like, set strong visual associations with the real world, and instantly transfer the needed mood. What’s more, depending on the composition, the characters may become an effective tool to make the page or screen dynamic and lively. 

Useful Reading

Here’s a bunch of handy articles and case studies on graphic design and digital art:

Design Process: How to Create Illustrations for IT Blog or Landing Page

OK Boomer. Trivia Game Design and Branding

Real Bitcoin. Creating Website Illustrations

How to Create Original Flat Illustrations: Tips and Tricks

Real Racing. Graphic Design for Mobile Game

Winter Olympics Illustration. Step-by-Step Process

Creative Jobs: What Do Graphic Designers Do?

Originally written for Tubik Blog, graphic content by tubik

Сообщение Case Study: Brand Illustrations for Healthcare Service появились сначала на Design4Users.