The niche e-commerce website for the water brand uses different atmospheric videos to make the user experience positive and emotional.

Types of Video Content in Interfaces

People are overloaded daily with tons of diverse information coming from various channels. So, make no mistake, most visitors to a website or users of a mobile application aren’t going to spend much time learning about products or services, especially the new ones. In these conditions, video can become another effective way of communication, informative, dynamic, and attractive.

A catchy video crafted with an understanding of the target audience is a tool for attracting customers’ attention as well as a well-checked method of informing them quickly and brightly. Video content activates several channels of perception – audio, visual, motion – simultaneously, and usually does that wrapped in telling a story. Such a combination of factors often makes a video presentation strong, emotional, and memorable.

Hero section video used as a part of the home page for the gardening company website

Content and Goals Perspective

From the perspective of the content packed in motion and the goals set behind it, there are several popular types of videos we can often come across on different websites and applications.

Welcome (introduction) video: these are videos mostly used on websites, especially company and portfolio websites. This video usually aims at welcoming and greeting visitors and introducing a company, service, or person in a friendly and lively manner. Another option is the “about” video created to tell more about the company, people working for it, mission, achievements, etc. Videos of this kind should be quite short, concise, and telling a visitor the core information that could engage them to see more.

Promotional (commercial) video: this type of video rooting in TV commercials and movie trailers. It’s created to inform people about a product, service, event, brand or company, new release or premiere, major updates of the product, and so on, and so forth, in a way that encourages people to learn more, buy, or join in. It’s a video playing a big part in increasing brand awareness and focused on getting the target audience aware of the offer and its benefits.

Promotional video presenting Carricare brand

Showcase (showreel) video: that’s another type of video coming from the movie industry. It’s a video showcasing a set of previous works by a person or company. This one is usually quite long, about 2-3 minutes, and is often used as an impressive addition to the portfolio of people representing various creative spheres like design, animation, filmmaking, acting, modeling, marketing, and the like.

Tubik showreel videos

Short showcase video giving a glance at the icon design project for HUAWEI EMUI 10

Showcase video for the case study about the design process for the Glup delivery application

Video testimonial: these videos share the feedback from buyers and users, show them describing their experience with the brand, product, or company, this way sharing the signs of trust and loyalty and contributing to positive brand image and reputation.

Background video: this kind of video is used as a part of website design when the background of a page is chosen not to be static. As technical improvements in web development don’t stop, video backgrounds and any other kind of video integration into web pages aren’t seen as a great challenge anymore. So, web designers often turn to full-screen videos as a way to capture people’s attention, create the needed atmosphere, and give an instant glance at the product or service.

Background videos on the landing page promoting the mindfulness application.

Mywony website design uses full-screen video setting the instant connection to the nature of the product

Website for the editorial about insomnia uses a background video to instantly set the mood

Product video: these pieces of video are widely used as a part of the e-commerce user experience, in particular on product pages and landing pages, to give details about the product’s features and advantages, and inform customers about the problem-solving potential of the product.

Pet Shop website uses video content to demonstrate the products they offer in the proper environment and the way to connect faster to buyer’s needs

Hero section video: that’s another kind of web page video that is used as a part of the hero section, which is the above-the-fold part of the web page, often the home page, that includes a prominent and attractive piece of content, be it an image, video, text, slider or other elements. Choosing a video for the hero section, designers often breathe life into it, make it dynamic and strengthen its emotional appeal.

Hero video for PointZero25 event agency website

Hero section video used on the confectionery website home page

Video guides and tutorials: these are classic how-to videos. They present video instructions of a different kind showing the step-by-step process of interacting with a product, a piece of information (for example, a recipe), etc.

Explainer video: basically, this video explains to the visitor what the website, app, product, company, or service is about, and often answers the most frequent questions that may arise about it. Being a part of branding strategy, it is focused on presenting the benefits of the product or service and explanation about how to. It often employs storytelling showing the flow of interaction or sharing particular cases and situations, and infographics helping to understand the effect quickly.

Explainer video for OffCents

Entertaining videos: these videos are more about fun rather than information. Their main goal is to encourage emotional feedback and make it connected to a particular product, brand, or company. What’s more, videos of this kind have a high virality potential as having fun; visitors may want to share it with their friends or audience in social networks, this way spreading a word about the brand.

Educational videos: these videos usually become a part of educational platforms and can present a diversity of content, from specially crafted models explaining the processes to videos of wildlife or people doing different jobs.

Educational videos about wildlife integrated into the Nature Encyclopedia app

Design and Technical Realization Perspective

From the perspective of how it’s made, we could mention such common types of video content for UI design:

Live-action videos: these videos are closest to the classic filming process and feature real people, objects, or locations. Their major benefit is a strong collection with real life that has the great power of setting associations and encouraging viewers’ empathy.

Atmospheric live-action video as a part of the home page hero section for the Lumen Museum website

Example of a live-action video combining human talk and visual demonstrations

Fitness application using video tutorials on how to do exercises

Screencast videos: this video type captures the screen this way, showing particular processes. It is especially effective for various tutorials and product videos presenting digital products and software.

Screencast video capturing the illustration process in Procreate

Live-action screencast videos: as it’s clear from the name, this type presents a combination of two previous types. In this case, viewers can simultaneously see what is going on the screen and the person giving explanations.

Animation (cartoon) videos: these videos are very close to cartoons, which means that they present the animated sequence of many still images that can be presented in a variety of visual styles: 2D (flat), 3D (having dimension and depth), and stop-motion (capturing individual frames and combining them in a sequence).

Animated video created as visual storytelling support for the article about gamification in UI design

Motion graphics videos: these ones are based on animated graphic elements, for example, shapes or text, aimed at catching attention, impressing, and setting the theme, but not employing storytelling. They also become a great help in cases when complex or abstract information should be visualized in a way that is easy to understand.

Motion graphics video background for digital transformation agency

Ecommerce website design using impressive motion graphics video for the home page hero section

Photomontage videos: this video type imitates a slideshow, combining a set of photos in an animated sequence that can be supported by special effects, voice-over, or music. This type can work effectively to present various events, charities, or social issues, tell about companies, mark achievements and milestones, and the like.

Whiteboard videos: this is a captivating type of video, where the story, guide, or information flow is unveiled as a picture drawn step-by-step on the whiteboard.

Typographic videos: this is a type of video based on moving text. It helps to make text content perform in a more dynamic and emotional way and engage users that are not keen on reading static text content not to miss core messages. In most cases, it is supported by the voice-over or sound accompaniment enhancing the message.

360-degree (immersive) videos: trendy and getting more and more popular, this type of video records a view in all directions at the same time, this way allowing the viewer to get the full panoramic view. These are, in particular, effectively used as a part of the shopping or booking user experience.

Functions of Video in UX Design

Being a type of content that is quite complex in production and often needing much effort for smooth integration, videos in user interfaces are often in question. However, there are different functions they can cover, often better and faster than other types of content. So, by analyzing the target audience and business goals and considering these functions, designers and creative teams make a decision if they need a video and, if yes, what type is better for their objectives and budget. Let’s take a quick glance at them.

Information

The core factor in making video content considered a part of the user interface is making the information flow clear and easier to perceive. In many cases, a short 1-minute piece of video can share a chunk of information that would take far more time from the visitor reading it in text or trying to understand it from screenshots, mockups, and the like. That is a basic reason why various explainers, tutorials, and guides work well in video format.

No doubt, background videos applied to many web pages or screens now make them visually and emotionally appealing as well as informative, as the image instantly captures users’ attention much faster this way. Also, it supports the feeling of the integrity of all the layout elements.

An explainer video on the home page of Credentially website is placed in the above-the-fold area and lets visitors quickly check the benefits of the service

Atmospheric video integrated into the museum website design concept quickly gives visitors a glance at it in a realistic and dynamic way

Demonstration and Presentation

One of the strongest points of video content is the ability to demonstrate products or services using all the channels of perception at the same time. If visitors are interested, watching the video, they can consume quite a lot of information in a very short time without the need to scroll, read, see the pictures, and keep all those different pieces of information in mind in the process. As the human attention span is quite short, video often allows for using it effectively and gets higher chances of visitors’ engagement and website conversions. For instance, explainer videos or product videos allow for catching how to deal with it while the visitor is on the wave of interest. As well, for services that are focused on visual outcomes like design, advertising, illustration, art, modeling, and so on, well-crafted showcase videos can become the fastest way to the future client’s heart.

Video demonstrating Fitness App interactions

Short videos used instead of static images to demonstrate the options of models on niche accessories website lets customers learn more about the product and get a positive impression

Video demonstration of the product in the Drink Recipe application helps to impress users and supports the atmosphere of a bar or restaurant

Storytelling

Another strong point of video content is its ability to tell a story in a smooth and engaging way, according to the laws and techniques of visual storytelling, supported with voice narration or music enhancing that effect. People like stories: they clarify things, illustrate situations, are often fun and aesthetic, they are often easier to perceive and remember. In most cases, videos based on storytelling feature a plot that moves through 3 basic phases: showing pain points, activating emotions, and offering the solution.

Promotional video for the cleaning service tells an illustrated story using cute characters and sharing positive vibes

The video version of the case study on design for the Annual Awwwards 2020 website

Atmosphere

As well as images, many videos integrated into UI are super powerful in setting the needed atmosphere, which is a part of customer experience with the offered service, product, place, or event. This way, it pushes demonstration to a higher level, letting the visitor catch the vibe in split seconds. That’s one of the reasons why immersive videos are getting more and more popular and demanded.

The background video for the home page of the agricultural holding website impresses with the atmosphere from the first minute

The hero section video of the website for forest camping creates the needed cozy atmosphere from the very start of interaction with the website

The atmospheric hero section video on the winter holiday website shares the views of the destinations users can travel to, and this way lets them get stunned and dive into the mood instantly

Emotion

Whatever logical and clever people are, many of our decisions are partly or fully based on emotions, not only facts. “I feel it,” “I like it,” “I want it” – aren’t these reasons often stronger than any logic, calculations, and analysis? Video content is often a good way to cover that point: as it employs multiple perception channels and can collect various factors of influence together in a time-saving concentrated piece, the chances it sets the emotional connection to the audience get much higher.

Hero section video for a horse riding club sets strong emotional appeal

Archive video added to the article devoted to the historical period strengthens the emotional appeal of the page

Points to Consider

Loading Time

This is a core thing to consider when you decide upon video integration into the website or application. This issue requires a thoughtful approach from developers and thorough testing. That’s especially vital for the web pages that are expected to attract much organic traffic but can be downgraded in search results just because the loading time of the page is too long while the bounce rate is high as some visitors won’t wait long to see the page and will just move away. Think twice, consider technical options, and do your best to test that aspect. Otherwise, there won’t be much effect from even a very well-crafted video if it’s not even got a chance to be seen.

Contrast Issue

Integration of video content, especially full-screen backgrounds well-spread these days, requires much skill and effort to find the right contrast and hierarchy of elements and integrate the navigation and text content properly so that the page wouldn’t turn into an illegible mess. Test the contrast on various screens, devices, and in different environments to make sure it doesn’t spoil general readability and doesn’t break navigation leaving users lost in all that beauty.

Other Ways to Communicate

Make no mistake; video content is not a cure-all or a magic wand, as it could seem from everything mentioned above. Not all people like videos. Not all of them, interacting with your website or app, find themselves in conditions that are convenient for watching a video. So, don’t make the video your only way of communicating with visitors or customers. Support it with other ways of communication, like text and images. Otherwise, you risk losing a part of the audience just because video as a way of getting information is not comfortable for them. The “Show, don’t tell” rule may work, but the “show and tell” works better in this case.

Manipulations

Take care of allowing a visitor to manipulate the video where it’s needed, especially if it’s long and heavy. Think twice about using autoplay, as it may appear less convenient for your audience than the ability to control if they want to watch a video or not. Make sure that the user can control the volume of the sound part as audio autoplay as soon as the web page or screen is loaded is reported to be one of the most annoying aspects of the user experience. Put shortly, consider all the basic manipulations that will allow users to feel more confident with the video content in your web or mobile product.

Mobile Adaptation

What looks well on a desktop or TV, may not work at all on a much smaller mobile screen. As more and more digital interactions of different kinds move to mobile these days, this aspect should also be well-considered and tested for all types of content, including videos. Make sure that it looks clear and legible and is well-adjusted to the mobile screen of any kind.

Mobile adaptation for a niche e-commerce website selling accessories

Sure, that’s only the tip of the iceberg in such a deep and diverse issue as video implementation into user experience design, so we’re going to share more examples, UX practices, and tips about it. Anyway, this article may help UX designers, marketing specialists, and businesses to take into account the different benefits and pitfalls of using video content on websites and mobile apps. Stay tuned, and don’t miss the updates!

Useful Reading

For those, who want to dive deeper into the topic, here’s a list of handy articles:

UX Design: Types of Interactive Content Amplifying Engagement

Photo Content in User Interfaces: When and How It Works

Aesthetic Usability: Beauty on Duty for User Experience

5 Basic Types of Images for Web Content

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

How to Improve Website Scannability

The Anatomy of a Web Page: Basic Elements

How to Design Effective Search

Web Design: 16 Basic Types of Web Pages

Videos as Instructional Content: User Behaviors and UX Guidelines

Step-by-Step Guide to Custom Promo Video Design

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение UX Design: How Video Content Can Enhance User Experience появились сначала на Design4Users.

Project

Illustration, motion design, identity and user interface of the original intro for a brand of wedding dresses.

Brand

MYWONY is a modern line of personalized wedding dresses with special attention to high quality, elegant details, perfect fit, and feminine silhouettes. The history of the brand dates back to 2012, starting from a small wedding workshop created by a tandem of two designers. Today, the wedding collections of MYWONY are popular with brides from different countries around the world.

Idea

The task for the creative team was to think over a brand intro that would give a boost to the brand promotion via the web and would have the virality potential. The design team assigned to the project consisted of the illustrators Yaroslava Yatsuba and Marina Solomennikova, motion designer Andrew Drobovich, and art director Sergey Valiukh. It was important to find a way of trendy promotion that would not only harmonically work with quite a traditional website theme but also boost the brand image with an original story.

Iteration 1: Animated Cartoon Based on Nature Vibes

What story could support the feelings of a woman preparing for her wedding? Whatever are the times, trends, fashion, rules, and innovations, some things that never change: for every bride-to-be, her special day is her personal kind of fairy tale. The first idea for the brand intro was based on the idea maximally close to the brand name – My Wood Nymph. Having researched the market, the creative team decided upon a promo campaign that would feature the story of a wedding dress made right by nature, with all the tenderness and harmony. The interactive part of the brand intro design was stretched on branded items in visual details to provide the consistency of the brand image and its communication with users.

Visual Brand Updates

Together with the development of the visual stylistics, the designers updated the logo design. The wordmark got a more elegant and sophisticated look with the trendy and readable font and was complemented with acute, the graphic element which created the association with the French language and France as a known home of world fashion. But the association was not all the sign was needed for: the practical value of the acute was helping the visitors and client to easier understand how to read the brand name and where to put the accent.

The phrase with the abbreviation of which the brand name MYWONY was constructed

The brand logo wordmark upgraded with sophisticated font and acute mark

The label design featuring a vertical and horizontal version of the brand logo

The graphic designer Yaroslava Yatsuba developed the stylistic concept that would be applicable for the brand intro cartoon and also the physical branded items to give a consistent look to all the details, like packaging, gift cards and so on. The botanical illustration was chosen as a basis of the concept and stretched on graphics featuring animals.

Gift card design

Packaging design

Story

Coming to the brand intro, the creative team built up a tender story full of magic and showing how nature itself created a very special dress for the bride’s very special day. The graphics feature the style of traditional watercolor art filled with nuances and air, rich color palette, and detailed drawing.

In motion, the cartoon used the technique close to stop-motion animation. Together with lovely music, it supported the atmosphere of the fairytale and allowed the viewers to enjoy the artistic performance. Here’s what the first presentation of the video looked like.

The concept was presented to the clients and approved. But a story wouldn’t have been good enough if it hadn’t had an unexpected twist. In several days after the presentation, the team got a friendly message from the client with the words “It seems you are being spied on…” :

What could be said here? Great minds think alike, nothing more. Whatever different were the stories and the styles of the promo campaigns, it was clear that after the Dior campaign, the work on MYWONY brand intro had to be started from scratch. The creative team had to make a twist half-way and develop a totally new idea.

Iteration 2: Space Adventure Cartoon

The second iteration started from the question: should the brand intro really be another princess-like and super-cute stuff? For such content, there were little chances of not getting lost in the red ocean of the tough competition in the wedding industry. And the previous version showed it brightly. Both designers and stakeholders were keen to rise something really out of the box to fight for the target audience’s attention.  In the process of research and brainstorming, they came up with an idea of an interactive space western cartoon “Save the Fiance” to give the brand an exclusive viral factor of promotion and let it stand out.

Story

The intro entertains and engages visitors with a story that combines the traditions of illustration for comics, cool sci-fi vibes and slight animation adding dynamics. The characters face challenges and fight to save their love, so that is the eternal story close to any loving couple but performed in modern looks. The plot puts the wedding in the center of the story and makes the wedding dress the symbol of a woman’s love, power, and fondness. This way, the intro supports the MYWONY brand strategy with the power of storytelling. Just for a quick reminder, storytelling in design and marketing is a technique of building users’ engagement, emotional feedback, and empathy with a story that traditionally has a plot, characters, theme, and decor.

Sketches

After having decided upon the general plot and heroes, the designers had to choose the visual stylistics that would balance between the ideas of superhero comics and romantic cartoons, not taking the viewers away from the main topic of love and romance that overcomes any obstacles. So, the illustrator started the creative search of the characters and the environment from sketches.

At this stage, the creative team also agreed upon the limited color palette that made the color details even more visually expressive, allowed to echo the style of classic sci-fi comic books and added the atmosphere of magic and mystery to the story.

Character Design

After the basic concept was agreed upon, the illustrator devoted time and effort to the detailed work on the characters and scenery.

The heroine of the story captured in a dynamic posing

Facial expression details reflecting the character’s emotions

The battle scene development

Details of the environment and minor characters

From one episode to the other, the illustrator moved through picturing all the scenes to creating a storyboard.

Storyboard

As we mentioned in our guide to creating promo videos, a storyboard is the set of organized graphic assets. The illustrations were arranged in the sequence of their flow for the cartoon plot. This technique is not a new thing: its early version is said to be invented by the Walt Disney Animation Studio in the 1930s and has been adopted by many animation studios around the world. Storyboard visualizes storytelling and gives a better idea of the video or comic flow. It also allows the design team and the client to discuss the details about the visual part and the sequence of scenes before motion designer starts the actual animation.

Episodes and UI Design

Let’s check the final illustrations for the episodes of this romantic story presenting the wedding dress as a source of superpower for a modern woman.

The user experience with the cartoon reminds reviewing a comic book: the visitors move from one episode to the other diving into the story. No hurry, the viewers have all the time they need to look into the details of a graphic adventure.

The illustrations are performed in a minimalist interface: it features the non-obtrusive brand logo in the top left corner, the hamburger button in the top right corner hiding the list of all the episodes, and the sign of audio activated in the bottom left corner. This simple navigation is just a supportive element here, it doesn’t distract from the story. Also, there was designed the start screen welcoming the visitor to begin the adventure and informing that the cartoon has sound so the headphones are needed for better user experience.

Also, it’s worth mentioning that the visual elements of the brand intro are also used on the website and branded stuff like gift cards to provide visual consistency of the brand image in a variety of channels.

The flower illustrations from the brand intro are featured on the About Us page of the website

Animation

Although the cartoon was not designed as a video flow, the animation was applied to a variety of details in the episodes to make the story even more dynamic and expressive.

Also, the designers and developers added some hidden interactions into each episode, a sort of “easter eggs” for attentive viewers. For example, the users could try boosting the spacecraft or make the aliens shoot.

Together with sounds and music, it lets the viewer plunge into the atmosphere of space adventure.

Check the full version of the brand intro

The idea and the work of the creative team have already got the recognition from the professional design community, for example, it won the FWA of the Day.

Useful Articles and Case Studies

Florence App. Illustrations for Healthcare Service

Inspora. Brand and UI Design for Virtual Stylist

OffCents. Explainer Video Production

Binned. Design for Promo Video Production

Step by Step Guide to Custom Promo Video Design

5 Reasons to Make Animated Video for Your Product

Design for Web: Promotional Videos. Benefits and Pitfalls

Originally written for Tubik Blog

Сообщение Design Case Study: Brand Intro Cartoon for Wedding Dresses Brand появились сначала на Design4Users.

Project

Graphic and motion design for an explainer promo video presenting the mobile application.

Process

Our designers received the task from a product company OffCents. 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.

The company made a request to create an animated promo video for 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 Step by Step Guide to Custom Promo Video Design, we’ve already described the stages of animated video production. They usually include the following steps:

• research stage: target audience and market research
• pre-production stage: script writing and storyboarding
• production stage: creating graphic assets and animation
• post-production stage: video editing, adding sounds, music, and voice-over, etc.

User and market research is an essential stage of the creative process since it’s 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 which will stand out 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.

The client came to us with the ready-made script. It was quite a basic description containing 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.

Illustration

Storyboard

A storyboard is the set of graphic assets organized in the sequence of their flow for the video. Storyboard visualizes the designers’ 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 an only 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.

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.

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.

Color choice

Colors have a great impact 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 saturation and brightness of color palette. Here you can see the variations of a single scene with different colors.

Patterns

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.

Illustrations

Knowing the style, color palette, and patterns, the designer went to the creation of digital illustrations. Here are some of the final results.

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 color palette sets the happy mood of the video showing how the app can make the world a better place.

Motion design

3D

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 3D animation in three steps, from the schematic to the detailed one.

Animation

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.

Here you can see a piece of animation workflow made in Adobe AE.

Post-production

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’s important to sure it corresponds to the offer and mood of the video and the tone matches the preferences of the target audience.

After combining the sound with the visual part, an animated promo video for OffCents was ready. Here’s the result.

Useful reading

Step by Step Guide to Custom Promo Video Design
Case Study: Opera. Year-in-Review Video Design
Case Study: Binned. Design for Promo Video Production
How to Create Original Flat Illustrations: Designer’s Tips
Animated Logos: Why, Where, How to Use

Originally written for Tubik Blog

Сообщение Design Case Study: Explainer Video Production появились сначала на Design4Users.

Task

Graphic and motion design for promotional video production presenting the local trashbin cleaning service.

Process

Binned is a service supporting a cleaner and healthier environment for the local community by washing and deodorizing the trash bins outdoors. The idea to support the brand promotion with the short, bright and catchy animated video was absolutely logical for this case: trashbins cleaning is not the topic to which people are ready to devote their precious time and read about all the benefits. Meanwhile, the promo video with funny and friendly characters could become a good way to inform the potential users of the service about all its advantages in short seconds.  Moreover, activating multiple directions of perception, video was found impactful in stimulating positive emotional appeal which was to the client’s liking.

At the first stage of collaboration with the company, Tubik team created the brand identity for the service including the logo in static and animated versions as well as the pack of branded items – you could have seen the detailed design story in our previous case study. The promo video had to look consistent with the visual style applied to branding and support the idea of the helpful service improving the quality of everyday life for its clients and making the environment healthier for everyone.

Binned logo

Storyboarding and graphic design

At the first stage, the client and the team agreed upon the visual concept for the video and general story it should transfer. Having got the brief and basic script of the video from the client, the graphic designer started the research and developed the first rough version of a storyboard for the story in the footage. As it usually does in the process of creating promotional videos for a company, storyboard means the illustrations arranged in the sequence of their flow for the video. They featured the images of a bin as a mascot presenting the service and the main character. In general terms, the video presented the story about a dirty and smelly trashbin which was really sad about its condition but then the truck of a cleaning service came and solved the problem quickly: dirt, insects and bad smell are removed and the bin is happy to serve people again. Below you can see the set of sketches for this stage. For this project, the graphic designer applied Adobe Photoshop for both digital sketches and final detailed illustrations.

After discussing the flow with the client and agreeing upon the final number and sequence of shots for the future video, the next step meant creating a final storyboard for the video showing the scenario scene by scene. In a funny and friendly way, the short story showed the problems, which potential target audience could have, and the ways how Binned solves them easily. The style chosen for the video reflected the idea of the hand-drawn cartoon with a friendly and cute mascot. The color palette was focused on green and blue shades associated with a clean and healthy environment. One by one, the graphic designer made the final version of every part in the storyboard sequence following the consistent style and visual performance.

One of the microtasks at this stage was creating the funny images of the rats, insects and harmful bacterias that inhabit dirty trashbins and threaten the healthy lifestyle of the local people. Even being the negative characters of this story, they still supported the general cute and funny look chosen for the video.

As we mentioned in our guide to design in promo video production, at this stage it’s vital to set a constructive dialogue between the design team and the client: every single image in the storyboard should be discussed and approved in terms of general idea and goals set for the video. Motion design has many specific features and designers have to be ready to explain them: it can happen that clients express ideas and wishes which technically can overload the footage or look bad in the limited timing. Getting deeper into the goals and results which the client expects, designers looked for the optimal solutions which would make the video both good-looking and effective.

Animation

When all the storyboard was agreed upon, it was a good time to continue with motion. Here you can see how motion designer worked on visual details in different parts of the video: the magnifier glass featuring the process of a trashbin inspection, the process of loading the bins into the service truck and washing, the bins jumping happily after the wash. The design tool chosen for this type of animation was Adobe After Effects.

It was another project for Tubik that proved the benefits of having graphic and motion designers in one team as they work together on all the details and assets from the earliest stages of the creative process and can consult with each other any moment it’s needed. It makes the workflow dynamic and productive enabling the client to get the video without wasting time on trying to bring several teams together.

Outcome

After the animation of all the shots was finished, it was thoroughly checked along the required timing and harmonic combination with the voice-over.  Here’s the final version of the video.

Binned project added one more bright page to the Tubik history providing the extensive case of participation in brand strategy for a service company, from creating visual identity elements up to consistent brand style guide and promo video. Don’t miss the updates, new case studies are just around the corner.

Originally written for Tubik Blog
Welcome to read a case study on Binned Brand Identity Design

Сообщение Design Case Study: Binned. Promo Video Production появились сначала на Design4Users.

What’s a promotional video?

Don’t want to sound obvious still there is no better explanation than to define a promo video as the one created to promote a company or its product. This type of videos is made that way so it could encourage people to buy a certain product or use the services of a company. They are usually small catchy videos showing all facets of a promoted object in the best way to prove people it’s worth of their time and money. Since promotional videos are popular and widely-used, everyone tries to find ways to make their videos original and creative. That’s why designers offer businesses promo videos created in different styles that stand out among thousands of the others because they are unique and catchy.

Types of promo video

Promo videos can serve many business purposes so there are different types each created to achieve certain objectives. For example, one of the most commonly used types of promotional videos is an introduction video. Its aim is to tell people about a business, its offers, and reasons why someone should care about it. An intro promo video works best for startups willing to present themselves and interest their potential clients. This type of video needs to be informative still short and entertaining so that it could catch the viewer’s attention.

Next type having popularity among companies is a product presentation video. Many businesses are looking for creative ways to tell about their products and a custom promo video is a trending tool now. The video can shortly present product features and tell about its value for users. Another type combines features of the two previous. These are landing page videos which aim at driving users to take expected actions such as purchasing or signing up. They usually are meant to present some unique offers which people can get by taking certain action like leaving contacts or else.

To gain people’s trust, companies often share testimonials from satisfied clients on their websites. Video testimonials are an effective way to show that a company is trustworthy and can bring values. One more approach to product promoting is short entertaining videos. This type usually doesn’t seem like promo videos because it isn’t centered on a product or a company. The videos are meant to catch people on the emotional level by showing funny, heart-moving, or thoughtful video pieces having a short plot and a promoted product can appear as a secondary element. Quite often, if done and introduced originally, the videos of this sort get viral and present additional support to the brand.

All the types of promo videos can serve as effective marketing tools. However, a company needs to choose the type accurately according to business tasks that the video is meant to accomplish.

Product presentation video for Toonie Alarm

Is a custom promo video profitable for businesses?

Custom promotional video creation requires time, money, and effort to spend, so obviously many companies are concerned with the question “What benefits will we receive from it?”. Here is the answer.

People perceive video faster than copy. Psychological research shows that human brain processes video material much faster than text. It means that people need to take more effort to read a copy of company’s offers rather than watch a video. That’s why, by placing a presentation promo video on a website, a company increases the chances that more people will know about their product. Also, a quality video can accurately transfer the message which a company wants to tell to its possible customers.

Video increases conversion rates. Since people perceive video better than text, they are more likely to be influenced by it. It is easier to gain users’ trust when they are able to see how the product works in a real time. If people trust a company and are interested in their offers, they more willingly take action such as signing up or trying a demo. What’s more, a powerful promo video is an effective way to retain users longer rather than a great amount of copy.

Good search engine results. A major part of the Internet content consists of text data. Video content has less competition so the users searching keywords are more likely to find a video on the first page. To achieve even better results, a promo video needs to have well-thought SEO with the appropriate keywords in the headline, tags, description, etc.

Better social sharing. People are crazy about nice videos and the thing they like even more is sharing these videos with their friends. Videos are mobile and easy to share, the reason why it can be easily spread across social networks. Businesses should keep in mind that buyers are the best marketers they have, so it’s vital to encourage users to share the links.

Video receives real-time feedback. Internet users like commenting videos and discussing it with the others. It allows a company to see what people say about them and their product. Analyzing the feedbacks, a company can make significant improvements.

Better branding recognition. If a company creates an interesting and original video, people are more likely to remember them. The thing is that video has the influence on the visual memory as well as the echoic one so the chances that users will recognize a brand increase twice compared to elements that are perceived only visually.

Creative video helps to stand out from the competition. Video marketing isn’t a new approach, even more, it’s been a top tool for decades. However, technology is evolving and so do approaches to video creation. Original and quality video can help a company stand out from competitors.

Promo video for PassFold project designed and animated by Tubik team

Promo video pitfalls to consider

Certainly, there is no ideal approach to product marketing: considering video as a promo tool, you need to keep in mind possible pitfalls it may bring. First of all, the creation of a powerful promotional video requires spending money and time. To make an effective video, professionals need to handle many processes: from scripting and video recording to video and sound editing. Original video will need unique graphic material and high-quality animation, so if a company wants a quality video, it must be ready to invest in it.

In case a company decided to make a promo video, they need to make sure it’s done right. Bad quality video can affect brand reputation almost as hard as a bad quality product. Also, promotional videos have to be useful and interesting otherwise the users may consider it as disrespect to their time which is also not the best thing for company or brand image.

One more thing you need to think about once you’ve applied a promo video is that not all people would like to spend their time watching it. It means that there must be another way for buyers how to learn about a product. It can be a short piece of copy that users could quickly scan and decide whether they’re interested or not.

And, finally, we shouldn’t forget about the technical side. High-quality videos can overload the server of the website so it works slowly. When you include a video as a content element, it should be thoroughly tested on different devices and conditions. It helps to make sure there will be no technical problems that may make users frustrated.

Case Studies

In the end of 2016, Opera, a web browser developed by Opera Software, presented their promo video devoted to their achievements over the past year. It was a short animated video called «Opera 2016: Year in Review» with illustrations showing their acquirements. To make this project done, Opera Software collaborated with the Tubik design team.

The main idea of this project was to create a positive and cheerful video presenting the fresh innovative features the company added in the web browser during the past year. It was agreed that the video must consist of illustrations accomplished in the 3D flat style and lush colors. Each illustration would present lifestyle object composition devoted to a specific month when a feature was delivered. The accent was made on the typography since Opera wanted to emphasize the useful opportunities their users have now. That’s why designers come up with the decision that animation of the elements should be minimalistic so that it couldn’t distract users. Here is the result.

Welcome to read a detailed case study on Opera video production.

Another case study to remember was participation in video production process for Binned, a USA-based service supporting cleaner and healthier environment for the local community by washing and deodorizing the trash bins outdoors. The idea to support the brand promotion with the short, bright and catchy animated video was absolutely logical for this case: trashbins cleaning is not the topic to which people are ready to devote their precious time and read about all the benefits. Meanwhile, the promo video with funny and friendly characters could become a good way to inform the potential users of the service about all its advantages in short seconds.  Moreover, activating multiple directions of perception, video was found impactful in stimulating positive emotional appeal which was to the client’s liking. Here’s the final video.

Welcome to read a detailed case study on Binned video production.

All in all, videos have taken a big part in our life, the reason why we should take all the benefits from it. Stay tuned!

Recommended reading

Step by Step Guide to Custom Promo Video Design.

Beginner’s Guide to Online Video Marketing: Making a Video (Part 1)

How Ecommerce Businesses Can Generate Organic Traffic with Video Marketing

The Top 16 Video Marketing Statistics for 2016

27 Video Stats For 2017

Originally written for Tubik Blog

Сообщение Benefits and Pitfalls of Promo Videos for Web появились сначала на Design4Users.

Wonderful World of IKEA

Sand Of Time: HBO Asia Commercial

Geoff

Audi A5 2017: Pure imagination

temi – Breakthrough Robotic Technology

Tough day: Leo’s amazing day and his breton top

Monster

The Race from EDF

iPhone X

Little moments from HP

If you want more nice and stylish commercials with great stories, check our previous set of Christmas commercials and catch some holiday vibes.

Сообщение Art of Video Design: Beautifully Crafted Commercials появились сначала на Design4Users.

Having the whole set of such professionals onboard, we finished the last year with an interesting and challenging project. In December Tubik team got the chance of creative collaboration with Opera to work on the bright and catchy year-in-review video. You could already have seen the video and design process presentation in Tubik Portfolio, and today we invite our readers to take a deeper look at this design story in a new case study.

Task

Design of a short animated video “Opera 2016: Year in Review” within a tight timeline.

Process

Introducing a customer, Opera is a web browser developed by Opera Software. According to Opera Software, it had more than 350 million users worldwide in the 4th quarter 2014. Total Opera mobile users reached 291 million in June 2015. According to SlashGeek, Opera has originated features later adopted by other web browsers, including Speed Dial, pop-up blocking, browser sessions, private browsing, and tabbed browsing.

The initial stage of project discussion with the customer showed that they needed an animated video accomplished in an attractive manner immediately setting a positive and cheerful mood. The video had to present the essential milestones of the year when Opera, one of the actively used web browsers around the world, presented fresh innovative features to its numerous users. Opera team enjoyed bright colors and lifestyle object compositions and the approach they wished to use for the video was to devote each composition to a specific month when a particular feature was delivered. It was agreed that the visual performance should feature the 3D flat style, minimalistic animations, and lush colors – everything that the Tubik team is strong at.

Meanwhile, the early stage of discussions on the creative process also established the biggest challenge of the project: the timeline was extremely short. The team of designers had only 5 days for design and animation of 8 complex flat illustrations full of details, transforming the company message, looking bright and fresh, and keeping visual consistency to look natural in one video. This was the type of project that proved the great power of teamwork when all the participants of the creative process worked like a clock.

Illustrations

The first creative stage of the project had to result in a set of flat illustrations presenting the prominent innovations of the year: Ad Blocker, Battery Saver, Video Pop-Out, Personal News, VPN, Faster Startup, Currency Converter. All the illustrations had to present the interiors decorated with bright details close and clear for every user, and also set the atmosphere of the particular season and the visual element showing the presented browser feature. In this way, combined in the video and replacing each other, the illustrations would support the feeling of the year flowing. Here is the final set presented to motion designers who had to do further work on breathing life into the pictures.

This is the intro illustration opening the video, setting a cheerful mood, and giving a strong link with the brand.

This illustration presents the feature of native Ad-Blocker, which Opera presented in spring, so the color palette corresponds to the shades traditionally associated with this time of the year.

The next illustration presents the feature of Battery Saver, which got active in late spring: the season is supported with a general bright and sunny color palette, flowers in the vase, and green trees outside the window.

Another illustration was designed to present the feature of Video Pop-Out, enabling users to watch videos while browsing. The big window shows the green plants and blue sky and the diagonal light shadows let us guess the shiny sun, the table sets the scene with a couple of books and a glass of lemonade, and even the video on the screen shows the seashore and people having fun – everything allows viewers to understand easily that this user-friendly innovation was added in summer.

The next artwork is associated with the feature of a personal newsreader. A bit darker sky, a bit longer shadows, some clouds, the cup of tea and red-ripe apples on the tree say: when users got the ability to read the news right from their browser, the summer had almost finished.

The feature of built-in VPN enhancing the privacy of browsing was set up in autumn, which us immediately clear from the view with yellow trees outside, while the passport seen on the table sets the strong connection with the matter of privacy.

Next illustration featured the faster speed of start-up loading, so the key visual element of the composition is the speedometer shown on the computer screen. It immediately sets association with the issue of speed while the color palette chosen for this artwork enables users to feel the vibes of deep autumn.

The last innovation to present was the built-in currency converter enabling users to shop online faster and easier. Some details in the picture, like the calculator, the decorative recognizable model of a shop placed on the shelf, the delivery truck behind the window as well as the layout on the screen set the atmosphere of shopping, while the outside view and the gifts let us know it’s the busy time of buying Christmas presents.

Having a full set of illustrations approved by the client, motion designers came into play and presented the variants of transitions, while graphic designers worked on the fonts for the short descriptions to be used in the video. The fonts had to look highly readable and correspond to the general stylistic concept.

The sample of animated transitions between the slides livened up with the natural movements of the details close to motion in real life.

The sample of the fonts used on the slide in combination with the illustration

Final video

Five days of hard and coordinated work of the design team resulted in the final video of about 40 seconds showing the full set of key innovations Opera presented in 2016.

In one of the previous articles, devoted to designing processes and work styles, we mentioned: the studio experience lets us believe that teamwork organized wisely and thoughtfully doesn’t take away designers’ individual space or freedom — vice versa, it adds to it the power of solid support and prospective ways for bigger and more complex, therefore more interesting and challenging projects and tasks. The project for Opera became one of the convincing proofs.

In their testimonial to the Tubik team, Opera Software team mentioned: “The loose storyboard and tight timeline we presented you with were undoubtedly a challenge but everyone is very happy with how well your team delivered on it!” No doubt, this project became not only a great and absorbing challenge but also a case of fruitful collaboration and bright finale for the extremely busy design year.

Design Case Studies

Design Case Study: Brand Intro Cartoon for Wedding Dresses Brand

OffCents. Explainer Video Production

Binned. Design for Promo Video Production

Step by Step Guide to Custom Promo Video Design

5 Reasons to Make Animated Video for Your Product

Design for Web: Promotional Videos. Benefits and Pitfalls

Originally written for Tubik Blog

Сообщение Design Case Study: Opera. Animation for Product Video появились сначала на Design4Users.

I will honor Christmas in my heart, and try to keep it all the year. Charles Dickens

Christmas has always been a special holiday, full of coziness, kindness and love, family warmth, and the flavor of a fairy-tale. Lots of people all over the world look forward to it as the most desired holiday full of rest, pleasure, nice meetings, beauty, and gifts, for sure.

Still, there are also people for whom Christmas starts much earlier, and advertisers are obviously among them. Advertising created for Christmas takes its highly special place applying a wide variety of artistic and branding techniques to amaze viewers and make their brand recognizable. It has to be mentioned that the best of them do not just present the brand, company, or service: they tell the stories and show the amazing graphics close to our feelings and making us believe in better things on this wonderful day.

Today’s post also opens the Christmas season here in Design4Users with a collection of stunning commercials, aka advertising videos, mostly from brands famous all over the world. It seems like they already see it as their responsibility to amazing their clients with new touching and bright stories of higher and higher quality. And we thankfully take that for granted and get amazed and touched as it actually was intended. So, let’s catch those vibes of Christmas magic wrapped up in the form of short and moving videos.

John Lewis Christmas Advert 2016 – BusterTheBoxer

This commercial is the short story of a little girl called Bridget who loves to bounce. When her mum and dad buy her a trampoline for Christmas, they soon discover that she isn’t the only one with a passion for jumping.

Sainsbury’s OFFICIAL Christmas advert 2016 -The Greatest Gift

This Christmas advert is a joyous Christmas musical created in stop frame animation featuring vocals by James Corden. It tells the story of Dave, a hard-working and devoted Dad, who realizes that the greatest gift he can give people this Christmas is his time.

Lidl Christmas Ad 2016: Homecoming

This video shares the latest Christmas campaign for Lidl. Homecoming captures the deep sense of place that each of us associates with Christmas, as grown-up siblings come together to reinvigorate the old family home as a surprise for their elderly father and soon the old home is filled with long-absent Christmas joy, as new memories are created and poignant ones set aside.

Seanytunes – Harrods Christmas Advert 2016

The commercial presenting an adventurous cartoon in British style produced for Harrods advertising campaign.

BBC Good Food’s Christmas Advert 2016

Funny Christmas advert from BBC Food fully loaded with extra cuteness of kids interviewed about this special celebration.

M&S 2016 Christmas Ad: Christmas with love from Mrs Claus

Epic and classy commercial “Meet Mrs Claus” for Marks and Spencer. This year the company launches the Christmas 2016 TV Advert campaign with a modern twist on the much-loved character Mrs Claus.

Lily & the Snowman advert for Cineplex

A little Christmas story about a magical snowman who annually puts on a show for a little girl. Still, over time, life pulls them apart. Will she remember to take the time for what she loved?

Holidays are coming – Coca-Cola Christmas

This is a classic and eternal commercial for Coca-Cola and it definitely couldn’t miss this list. Holidays are coming! See the famous parade of Coca-Cola trucks as they come to share the Christmas happiness.

Very.co.uk Christmas Advert 2016 – Get More Out of Giving

This one presents the story of a big-hearted woman as she makes her Christmas journey home from work. She spreads festive cheer by giving gifts and is accompanied by a flying heart. With each gift she gives, her heart reacts delightedly; growing in size as the faces of the men, women and children she gives to light up with Christmas glee. Once finally home she is awoken with a present from her little girl, and she sees that her daughter has the same love of giving as her.

John Lewis Christmas Advert 2014 – MontyThePenguin

Another funny story from John Lewis about the sincere friendship making people decide on the best possible Christmas presents.

Heathrow Airport Christmas Ad 2016 Coming Home

The fresh Christmas commercial for Heathrow Airport deeply positioning family values making people come home for Christmas as there is nothing better.

Cartier Christmas Ad 2016 – Winter Tale

New Light New York and Paris – the epic commercial created for Cartier Christmas Campaign.

Mercedes Benz Christmas Ad 2016 – Snow Date

Another romantic and touching story from Mercedes Benz showing that there is nothing that could stop love and devotion.

“The Wish Writer” – Macy’s Christmas Film 2015

Just when a young girl is finding it hard to believe in the spirit of the holidays, she and her brother discover a pen with magical wish-granting powers. The video lets us watch how they spread the magic of giving and generosity throughout town — one wish at a time.

Hopefully, this day got its dose of magic for you. Merry upcoming Christmas, don’t miss the new posts on the theme!

Don’t miss the inspirational collection of Christmas and New Year illustrations, atmospheric winter art, and another set of impressive commercials

Сообщение 14 Stunning Commercials Made of Christmas Magic появились сначала на Design4Users.