{"id":4550,"date":"2018-03-29T15:22:11","date_gmt":"2018-03-29T12:22:11","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4550"},"modified":"2023-07-24T11:47:42","modified_gmt":"2023-07-24T11:47:42","slug":"case-study-offcents-explainer-video-production","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/","title":{"rendered":"Case Study: OffCents. Explainer Video Production"},"content":{"rendered":"<p><span style=\"color: #333333;\">An animated promotional video is a creative way of product marketing. These small catchy videos can show all facets of a promoted object in the best way proving people it\u2019s worth of their time and money. That\u2019s why an animated video is one of the efficient marketing tools helping to encourage people to buy a certain product or use the services of a company.<\/span><\/p>\n<p><span style=\"color: #333333;\">We\u2019ve already shared our cases showing animated promo video production of a <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-opera-year-in-review-video-design\/\">year-in-review video for Opera Software<\/a> and an animated <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-binned-promo-video-design\/\">video for Binned<\/a>. Today we present a new case of an explainer video production. The task was assigned to studio designers Denis Boldyriev and Andrew Drobovich. Let\u2019s take a look at the creative stages of the graphic and motion design process.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9850\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/11\/tubik-graphic-designer.jpg\" alt=\"tubik graphic designer\" width=\"1000\" height=\"666\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/11\/tubik-graphic-designer.jpg 1000w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/11\/tubik-graphic-designer-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/11\/tubik-graphic-designer-768x511.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/11\/tubik-graphic-designer-150x100.jpg 150w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Project<\/span><\/h2>\n<p><span style=\"color: #333333;\">Graphic and motion design for an explainer promo video presenting the mobile application.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Process<\/span><\/h2>\n<p><span style=\"color: #333333;\">Our designers received the task from a product company <a style=\"color: #333333;\" href=\"https:\/\/offcents.com\/\" rel=\"nofollow\">OffCents<\/a>. The mobile app aims at fighting global warming and environmental pollution. It provides real-time, automated tracking of carbon emissions from transportation. From the OffCents application, users choose to offset their carbon footprint from any number of their car, train, or airplane trips. The app helps users to control a number of emissions and purchase offsets or Verified Emission Reductions (VERs). This way people fund various carbon-reducing projects and support a healthier environment.<\/span><\/p>\n<p><span style=\"color: #333333;\">The company made a request to create an animated promo video for the OffCents app. The video was expected to be an explainer assisting users to understand the specifics of a product as well as the benefits it can bring to them and the environment. In our article <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/step-by-step-guide-to-custom-promo-video-design\/\">Step by Step Guide to Custom Promo Video Design<\/a>, we\u2019ve already described the stages of animated video production. They usually include the following steps:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\"><strong>research stage<\/strong>: target audience and market research<\/span><\/li>\n<li><span style=\"color: #333333;\"><strong>pre-production stage<\/strong>: scriptwriting and storyboarding<\/span><\/li>\n<li><span style=\"color: #333333;\"><strong>production stage<\/strong>: creating\u00a0<\/span>graphic<span style=\"color: #333333;\"> assets and animation<\/span><\/li>\n<li><span style=\"color: #333333;\"><strong>post-production stage<\/strong>: video editing, adding sounds, music, and voice-over, etc.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">User and market research is an essential stage of the creative process since it\u2019s an effective way to gather the core information about the target audience including their age, preferences, and goals. Moreover, market research helps to analyze competitors and create a product that will stand out from the crowd. The research stage can be done beforehand by a client or by a designer as a part of a project. In our case, the client supplied our team with all the needed information.<\/span><\/p>\n<p><span style=\"color: #333333;\">The client came to us with the ready-made script. It was quite a basic description containing the preferred timing of the video, general description of the scenes, and their sequence. However, before the creative team went to the production stage, graphic designers created a storyboard.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10076\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-video-production-1-1.png\" alt=\"graphic design video production\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-video-production-1-1.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-video-production-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-video-production-1-1-768x432.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-video-production-1-1-1024x576.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-video-production-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Illustration<\/span><\/h2>\n<h3><span style=\"color: #333333;\">Storyboard<\/span><\/h3>\n<p><span style=\"color: #333333;\">A storyboard is the set of graphic assets organized in the sequence of their flow for the video. Storyboard visualizes the designers\u2019 ideas giving a better understanding of the future video flow. This way the design team and the client can discuss the details of the visual part as well as the sequence of scenes before the motion design process begins. A storyboard can include images of various fidelity, from simple sketches to detailed illustrations. The choice usually depends on the requirements and urgency of the project. When clients have only a basic understanding of what they want to get not having strong visual preferences, it also may be good to use mood boards showing a variety of possible styles and flows to feel better what they want to see.<\/span><\/p>\n<p><span style=\"color: #333333;\">At the early stage of the ideation process, Tubik designers have developed a set of sketches showing the basic idea for the video. Every image in the storyboard was discussed and approved by the client in terms of the general idea and goals set for the video. The story in the video told about the environmental pollution, nature, and benefits of the app. Here is a storyboard made for OffCents.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10077\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/storyboard-offcents-promo-video-design.png\" alt=\"storyboard offcents promo video-design\" width=\"1920\" height=\"1370\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/storyboard-offcents-promo-video-design.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/storyboard-offcents-promo-video-design-300x214.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/storyboard-offcents-promo-video-design-768x548.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/storyboard-offcents-promo-video-design-1024x731.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/storyboard-offcents-promo-video-design-150x107.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p><span style=\"color: #333333;\">Due to the set of quick sketches, the designers managed to present their ideas to the client and quickly make a decision on the essential points which had to be included in the promo. After several discussions and considering all the aspects such as specifics of the target audience, clients and designers agreed upon the stylistic preferences and the message of the story. The team could start the production process.<\/span><\/p>\n<h3><span style=\"color: #333333;\">Color choice<\/span><\/h3>\n<p><span style=\"color: #333333;\"><a href=\"https:\/\/blog.tubikstudio.com\/color-in-design-influence-on-users-actions\/\">Colors have a great impact<\/a> on visual perception, so the choice of the general color palette is a crucial step in graphic design. To help the clients make their decision, the designer provided a client with color variations of the same scenes. The illustrations were shown in warm and cold combinations. Also, the designer experimented with the saturation and brightness of the color palette. Here you can see the variations of a single scene with different colors.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10093\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/video-production-process-graphic-design1-1-1.png\" alt=\"video production process graphic design\" width=\"1100\" height=\"618\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/video-production-process-graphic-design1-1-1.png 1100w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/video-production-process-graphic-design1-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/video-production-process-graphic-design1-1-1-768x431.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/video-production-process-graphic-design1-1-1-1024x575.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/video-production-process-graphic-design1-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10092\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-color-choice-1-1.png\" alt=\"video production process graphic design\" width=\"1100\" height=\"618\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-color-choice-1-1.png 1100w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-color-choice-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-color-choice-1-1-768x431.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-color-choice-1-1-1024x575.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-color-choice-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10091\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-for-video-production-1-1.png\" alt=\"video production process graphic design\" width=\"1100\" height=\"618\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-for-video-production-1-1.png 1100w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-for-video-production-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-for-video-production-1-1-768x431.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-for-video-production-1-1-1024x575.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/illustration-for-video-production-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10090\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/color-choice-illustration-1-1.png\" alt=\"video production process graphic design\" width=\"1100\" height=\"618\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/color-choice-illustration-1-1.png 1100w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/color-choice-illustration-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/color-choice-illustration-1-1-768x431.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/color-choice-illustration-1-1-1024x575.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/color-choice-illustration-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h3><span style=\"color: #333333;\">Patterns<\/span><\/h3>\n<p><span style=\"color: #333333;\">Original patterns can make the video graphics look harmonic and native as well as add some fun to the appearance of the future promo. Since the OffCents promo video is focused on the environmental topic, the designer decided to apply some patterns similar to those we can see in nature.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10089\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/patterns-video-production-tubik-1-1.png\" alt=\"video production process graphic design\" width=\"1920\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/patterns-video-production-tubik-1-1.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/patterns-video-production-tubik-1-1-300x188.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/patterns-video-production-tubik-1-1-768x480.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/patterns-video-production-tubik-1-1-1024x640.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/patterns-video-production-tubik-1-1-150x94.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<h3><span style=\"color: #333333;\">Illustrations<\/span><\/h3>\n<p><span style=\"color: #333333;\">Knowing the style, color palette, and patterns, the designer went to the creation of <a href=\"https:\/\/blog.tubikstudio.com\/how-to-create-original-flat-illustrations-designers-tips\/\">digital illustrations<\/a>. Here are some of the final results.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10088\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-offcents-illustration-1-1.png\" alt=\"video production process graphic design illustrations\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-offcents-illustration-1-1.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-offcents-illustration-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-offcents-illustration-1-1-768x432.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-offcents-illustration-1-1-1024x576.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-offcents-illustration-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10087\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/design-for-video-production-tubik-1-1.png\" alt=\"video production process graphic design\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/design-for-video-production-tubik-1-1.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/design-for-video-production-tubik-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/design-for-video-production-tubik-1-1-768x432.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/design-for-video-production-tubik-1-1-1024x576.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/design-for-video-production-tubik-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10086\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustrations-tubik-1-1.png\" alt=\"video production process graphic design\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustrations-tubik-1-1.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustrations-tubik-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustrations-tubik-1-1-768x432.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustrations-tubik-1-1-1024x576.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustrations-tubik-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10085\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-flat-illustration-1-1.png\" alt=\"video production process graphic design\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-flat-illustration-1-1.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-flat-illustration-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-flat-illustration-1-1-768x432.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-flat-illustration-1-1-1024x576.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-flat-illustration-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10084\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustration-tubik-1-1.png\" alt=\"video production process graphic design\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustration-tubik-1-1.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustration-tubik-1-1-300x169.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustration-tubik-1-1-768x432.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustration-tubik-1-1-1024x576.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-illustration-tubik-1-1-150x84.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p><span style=\"color: #333333;\">As you can see, the designer chose flat design illustrations which help to keep the balance between the elements of fun and the serious topic of global warming. The bright <a href=\"https:\/\/blog.tubikstudio.com\/color-theory-brief-guide-for-designers\/\">color palette<\/a> sets the happy mood of the video showing how the app can make the world a better place.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10083\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/offcent-illustrations-graphic-design-1-1.png\" alt=\"video production process graphic design\" width=\"1920\" height=\"513\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/offcent-illustrations-graphic-design-1-1.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/offcent-illustrations-graphic-design-1-1-300x80.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/offcent-illustrations-graphic-design-1-1-768x205.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/offcent-illustrations-graphic-design-1-1-1024x274.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/offcent-illustrations-graphic-design-1-1-150x40.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Motion design<\/span><\/h2>\n<h3><span style=\"color: #333333;\">3D<\/span><\/h3>\n<p><span style=\"color: #333333;\">After all the illustrations were ready, the next step was to animate the scenes with a 3D view for the most global parts. They were designed to be catchy and set the emotional and aesthetic links to the viewers. Here you can see the process of <a href=\"https:\/\/blog.tubikstudio.com\/creative-ui-design-concepts-3d-graphics\/\">3D animation<\/a> in three steps, from the schematic to the detailed one.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/255695041?autoplay=1&amp;autopause=0\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Animation<\/span><\/h3>\n<p><span style=\"color: #333333;\">The final stage fully relayed on the motion designers. All the scenes represented in the digital illustrations were animated into a united story looking bright and attractive.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10082\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/design-animation-1-1.gif\" alt=\"video production process graphic design\" width=\"800\" height=\"450\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10081\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/animated-promo-video-production-1-1.gif\" alt=\"video production process graphic design\" width=\"800\" height=\"450\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10080\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/graphic-design-animation-tubik-1-1.gif\" alt=\"video production process graphic design\" width=\"800\" height=\"450\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10079\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/promo-video-design-tubik-1-1.gif\" alt=\"video production process graphic design\" width=\"800\" height=\"450\" \/><\/p>\n<p><span style=\"color: #333333;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4581\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/promo-video-design-tubik-1.gif\" alt=\"promo video design tubik\" width=\"800\" height=\"450\" \/><\/span><\/p>\n<p><span style=\"color: #333333;\">Here you can see a piece of animation workflow made in Adobe AE.<\/span><\/p>\n<p><span style=\"color: #333333;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/255702179?autoplay=1&amp;autopause=0\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Post-production<\/span><\/h2>\n<p><span style=\"color: #333333;\">When the visual part was created, the client provided the designers with the music and the voice-over made by professional voice-actors. Choosing the voice for a video, it\u2019s important to sure it corresponds to the offer and mood of the video and the tone matches the preferences of the target audience.<\/span><\/p>\n<p><span style=\"color: #333333;\">After combining the sound with the visual part, an animated promo video for OffCents was ready. Here\u2019s the result.<\/span><\/p>\n<p><span style=\"color: #333333;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/249638226\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Useful articles and case studies<\/span><\/h2>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/step-by-step-guide-to-custom-promo-video-design\/\">Step by Step Guide to Custom Promo Video Design<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-opera-year-in-review-video-design\/\">Case Study: Opera. Year-in-Review Video Design<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-binned-promo-video-design\/\">Case Study: Binned. Design for Promo Video Production<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/how-to-create-original-flat-illustrations-designers-tips\/\">How to Create Original Flat Illustrations: Designer\u2019s Tips<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/dont-stay-still-why-brand-needs-an-animated-logo\/\">Don\u2019t Stay Still. Why Brand Needs an Animated Logo<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The case study on creative flow of video production of OffCents, the app contributing to the healthy environment: check stages of graphic design and animation.<\/p>\n","protected":false},"author":3,"featured_media":10078,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,4,6],"tags":[183,191,212,248,336,369,10,370,11,379,16,380,17,517,57,518,100,522,138,523,144,524,147,525,170,567],"coauthors":[],"class_list":["post-4550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-case_study","category-illustration","tag-explainer-video-production","tag-flat-illustration","tag-graphic-design","tag-illustration","tag-motion-design","tag-product-promo-video","tag-3d-animation","tag-product-video","tag-3d-graphics","tag-promotional-video","tag-animation","tag-promotional-video-production","tag-animation-case-study","tag-video-design","tag-case-study","tag-video-design-case-study","tag-design","tag-video-design-process","tag-design-process","tag-video-design-services","tag-design-services","tag-video-production","tag-design-studio","tag-video-production-article","tag-digital-illustration","tag-2d-art"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case Study: OffCents. Explainer Video Production<\/title>\n<meta name=\"description\" content=\"The case study on creative flow of video production of OffCents, the app contributing to the healthy environment: check stages of graphic design and animation.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: OffCents. Explainer Video Production\" \/>\n<meta property=\"og:description\" content=\"The case study on creative flow of video production of OffCents, the app contributing to the healthy environment: check stages of graphic design and animation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-29T12:22:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:47:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/case-study-explainer-video-production-tubik.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/\",\"name\":\"Case Study: OffCents. Explainer Video Production\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/case-study-explainer-video-production-tubik.png\",\"datePublished\":\"2018-03-29T12:22:11+00:00\",\"dateModified\":\"2023-07-24T11:47:42+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The case study on creative flow of video production of OffCents, the app contributing to the healthy environment: check stages of graphic design and animation.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/case-study-explainer-video-production-tubik.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/case-study-explainer-video-production-tubik.png\",\"width\":1920,\"height\":1080,\"caption\":\"case study explainer video production tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: OffCents. Explainer Video Production\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study: OffCents. Explainer Video Production","description":"The case study on creative flow of video production of OffCents, the app contributing to the healthy environment: check stages of graphic design and animation.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: OffCents. Explainer Video Production","og_description":"The case study on creative flow of video production of OffCents, the app contributing to the healthy environment: check stages of graphic design and animation.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-03-29T12:22:11+00:00","article_modified_time":"2023-07-24T11:47:42+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/case-study-explainer-video-production-tubik.png","type":"image\/png"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/","name":"Case Study: OffCents. Explainer Video Production","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/case-study-explainer-video-production-tubik.png","datePublished":"2018-03-29T12:22:11+00:00","dateModified":"2023-07-24T11:47:42+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The case study on creative flow of video production of OffCents, the app contributing to the healthy environment: check stages of graphic design and animation.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/case-study-explainer-video-production-tubik.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/case-study-explainer-video-production-tubik.png","width":1920,"height":1080,"caption":"case study explainer video production tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-offcents-explainer-video-production\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: OffCents. Explainer Video Production"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=4550"}],"version-history":[{"count":5,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4550\/revisions"}],"predecessor-version":[{"id":14466,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4550\/revisions\/14466"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/10078"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4550"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}