Tag Archives: flat design

opera video design case study tubik

Case Study: Opera. Year-in-Review Video Design.

A picture is able to tell a lot instantly. It can inform, call associations,  set the mood and atmosphere, give the insights and wake up curiosity, get people inspired or engage further considerations and do that all in a beautiful and attractive manner. Still, to spark all that amazing potential, the picture needs to be created by a professional, who knows how to do that magic via talent, skills and experience.

 

Having the whole set of such professionals on-board, 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.

 

opera video graphic design case study tubik

 

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 the 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 Tubik team is strong at.

 

Meanwhile, the early stage of discussions on 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.

 

opera video animation case study

 

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

 

opera video animation case study

 

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.

 

opera video animation case study

 

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

 

opera video animation case study

 

Another illustration was designed to present the feature of Video Pop Out, enabling users to watch videos while browsing. 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 sea shore and people having fun — everything allows viewers to understand easily that this user-friendly innovation was added in summer.

 

opera video animation case study

 

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. 

 

opera video animation case study

 

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.

 

opera video animation case study

 

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.

 

opera video animation case study

 

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.

 

opera video animation case study

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

 

opera video animation case study

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 design 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.

 

opera video design case study tubik

 

In their testimonial to 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 the case of fruitful collaboration and bright finale for the extremely busy design year.


Welcome to check out the presentation of Opera project in Tubik Portfolio

Welcome to see the designs by Tubik Studio on Dribbble and Behance

Case study Ribbet Designing illustration

Case study: Ribbet. Designing Illustration.

It is not a secret that the fast-paced and dynamic development of web and app design brings new trends into other spheres of creativity in non-stop mode. No doubt, illustration is one of the fields which is constantly and significantly affected by all the numerous changes and currents in the Web. Working on different projects and preparing various shots for Dribbble and Behance, Tubik Studio designers get regularly updated on how multipurpose and versatile can illustration be. So, today we would like to present you the new case study, this time about illustration for a web online editing service.

 

Earlier we have already presented here the case study telling about the creation of a logo for the online editor Ribbet by Tubik Studio designer Arthur Avakyan. This article continues telling about the collaboration with the same customer. This time the assignment was concentrated on illustrations for the site created by the other designer Evgeniy Tomashevsky.

 

Tubik Studio designer

Evgeniy Tomashevsky working on sketches

 

Task

Designing thematic illustrations for the specific feature of online photo editor Ribbet.

 

Tools

Pencil sketching, Adobe Illustrator

 

Process

Undoubtfully, most — if not all — the illustrations in the web fulfill several functions instead of one. They should be not only decorative stuff but can also become important features of the user interface and in cohesion with other elements of the layout help to guide a user and make using the site faster, easier and more enjoyable.

 

The illustrations accomplished by Tubik Studio for Ribbet were no exception. To be more particular, the task for the designer was to create a pack of thematic illustrations that would reflect the ideas of popular annual events. The images were intended to work as fancy cards which could be used for instant creating invitations for birthdays, weddings, parties as well as nice postcards and other pretty stuff.

 

So, given to the task, the whole pack of illustrations needed to have the same format and style providing the feeling of consistency. Moreover, it was important to make it corresponding to the general design of the site. This requirement was eased due to previous studio work: Tubik Studio designers had worked with Ribbet on new design of the site and new logo, which soon are going to be presented on the site itself and are already widely seen in Ribbet social networks accounts. So, starting work on illustrations, the designer had already got the general concept of the editor design. It influenced on the general style of the images as well as a selection of appropriate colors and shades.

 

Case Study Ribbet Tubik Studio

General design of the website and logo for Ribbet by Tubik Studio 

 

In the process, it was also vital to remember that the images had to obtain a high level of adaptability and be recognizable, bright and clear in all sizes possible to be seen at. Moreover, they had to be ready to save their beauty and style in the printed version as well. As you can see, the designer had to keep loads of things in his mind.

 

The first stage of the work required making choice about the general stylistic decision which would satisfy all the parts of the assignment. Although there are numerous stylistic trends for digital illustration nowadays, in this case, a search of the style was not really long and the decision was made to create all the pack of illustrations in flat design stylistics. It matched efficiently with the general stylistic concept of the site and was obviously defined as trendy and diverse.

 

After deciding on the general style, the next stage witnessed the most creative and elaborate part of the process which was classic old-school pencil sketching. The designer worked hard and devoted a lot of soul and passion to creating catchy details, pleasant-looking backgrounds and bright characters that would be easily recognizable, capturing, stylish and fancy.

 

Illustration in sketches

 

Illustration in sketches

 

Illustration in sketches

 

Illustration in sketches

Tiny part of sketching stage

 

When all the ideas were completed and agreed-upon, the sketches were converted into their digital body by means of Adobe Illustrator.

 

One more part of the task included sophisticated and thorough work with color. The reason was that it had to correspond not only with the general design of the site but it was also vital to reflect color associations which users typically have for specific holidays, events and special occasions. This kind of multipurpose solution could make the user experience even more effective and pleasant. So, the designer accomplished this work with a deep research of common color associations about holidays and only afterward selecting the colors that would fulfill both association and general consistency sides of the editor idea.

 

Having processed each image thoroughly, the designer presented bright and catchy images for the pack of thematic fancy cards, some of which you can see below:

 

Independence Day

Independence Day card

 

St_Patrick_s_day

St. Patrick’s Day card

 

Thanksgiving

Thanksgiving Day card

 

Remembrance_day-01

Remembrance Day card

 

NY_eve

New Year card

 

Mother_s_day

Mother’s Day card

 

Father_s_day-01

Father’s Day card

 

Valentine_s_day

Valentine’s Day card

 

Wedding_day-02

Wedding Day card

 

As it can be seen, the images covered the wide range of religious, public and family holidays.

 

The customer, fully satisfied with all the work presented, has already been using the images actively in their social network accounts as the promotional materials for new features of Ribbet service.

 

Case study Ribbet Designing illustration

The set of cards from Ribbet Facebook page

 

This assignment was full of creativity and inspiration. It has become one more case proving how much sophisticated and rigorous work should be done to create the bright multipurpose digital illustration. It also showed that doing preliminary research can help to make the result even more efficient.


Welcome to see other works by Tubik Studio on Dribbble and Behance