Tag Archives: design agency

Binned case study storyboard

Case Study: Binned. Design for Promo Video Production.

Creating a catchy and stylish promo video for a product or service is a challenging task. However, if realized wisely, it pays itself, becoming another powerful tool for growing brand awareness and promotion. Earlier we already unveiled the creative process of making a year-in-review video for Opera Software designed by Tubik team; today’s case study is going to show you a new story on graphic and motion design for a video introducing Binned, the local cleaning service based in the USA. This time the challenge to participate in animated promo video production was assigned to studio designers Arthur Avakyan and Andrey Drobovich. Let’s have a look at the creative flow.

 

video design animation tubik

 

Task

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

 

Process

Binned is a 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.

 

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

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.

 

binned video design storyboard

binned video design storyboard

binned video design storyboard

 

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.

 

Binned case study storyboard

 

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.

Binned video design

 

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. 

 

binned_promo_video_animation_tubik

 

binned_promo_video_animation_tubik 

binned_promo_video_animation_tubik

 

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.


Welcome to read a case study on Binned Brand Identity Design

Welcome to check Binned Video project in Tubik Portfolio

Welcome to read a step-by-step guide to design for promo video production

upper app UI design case study

Case Study: Upper App. UI Design for To-Do List.

Famous author and motivational speaker Zig Ziglar once said: «You were born to win, but to be a winner, you must plan to win, prepare to win, and expect to win.» Planning our day and managing our tasks is the significant job we have to do regularly and devotedly in case we seek for success. Tons of books, articles and interviews from successful and productive people generally send the global message: to be productive you have to plan your day and tasks distributing your time and effort wisely. 

 

Would you like to have a reliable helping hand in the process of planning your days and setting goals effectively and without any distractions? Welcome to try Upper, simple and elegant free application for iPhones, designed and developed by Tubik team. Today this motivating app is featured and spinning up at Product Hunt, so we’ve also decided to unveil some details of the to-do list design and functionality with our readers.

 

Upper App to-do list tubik

 

Task

 

Full-cycle UI/UX design for the simple and motivational productivity app for iPhones.

 

Process

 

Creating the to-do list application, Tubik team realized the high scale of competition in this sphere of utilities: that was a step into the red ocean. Still, as it usually happens in the fields covering wide and diverse target audience, a variety of the products is another user-friendly feature: it allows choosing the styles and features every particular user likes. Continuing the theme of personal productivity, which was started with our previous app Toonie Alarm, we’ve established the goal to present the to-do list UI of totally different look and functionality deeply focused on personal and professional motivation.

 

 upper app UI design

 

In UX perspective, the to-do list design was concentrated on extremely simple interactions and intuitive navigation, while in UI aspect the core concerns gathered around high readability level and visual hierarchy that would allow users to use the app easily in any environment and on the go. In addition, working on the visual performance of the app user interface, Tubik designer Ernest Asanov made a general stylistic concept choice in favor of minimalist and elegant solutions.

 

Functionality

 

When our team made a decision to design to-do list, the basic idea set behind Upper was creating a helpful list app design, deeply concentrating user’s attention on the tasks and deadline. That’s why it doesn’t include complex functionality, distractions or decorations. It presents only the features and elements needed for time and task management.

 

Functions and features provide the following:

  • All the features of the app are free for everyone
  • Upper Streak Challenge motivate users to complete all the tasks for the day
  • Statistics of tasks completion
  • Simple and clear navigation
  • Easy adding, deleting and marking tasks
  • Eye-pleasing slight animation
  • Instant sharing achievements with friends

 

upper app UI design case study

 

Design and Layout

 

Interactions: The basic functionality of the app is built around user’s ability to create the list of tasks which can be saved for the particular date and time, easily deleted or marked complete. In addition, Upper analyzes task completion progress and shows stats to keep users updated and motivated. The absence of distractions, simple screen design and thought-out typography make the content highly readable and allow using the app easily in any environment and on-the-go.

 

upper app UI design case study

 

Basic functional buttons are placed in the bottom of the screen, which supports usability for users with big devices. Different swipe gestures allow a user to mark the task complete or delete it from the list. Core information such as dates, the words for the closest days (tomorrow, today), the number of tasks and days in Upper Streak are presented in the uppercase font, supporting both efficient visual hierarchy of the layout elements and the harmonic consistency in combination with the product brand name.

 

Upper App to-do list 7

 

Upper Streak: The original feature of Upper App is user motivation with special challenge of non-breaking plans and increasing productivity potential. The app motivates to complete all the planned tasks via Upper Streak Challenge. Streak is the period during which users don’t interrupt completing the tasks with Upper: it shows the achievement of being consistent and productive and encourages not to stop and break the progress. Seeing your determination, the app will challenge you with the bigger number of tasks, so users are motivated to get organized and complete the plans with Upper without missing a day.

 

upper app UI design case study

 

Color and style: The task list design is performed in the minimalist and elegant style of the layout based deeply on quick functionality and intuitive navigation. What is more, users are provided with the variety of skins and can choose between dark, light and red skin depending on their personal taste and wishes. At the moment the app is presented in dark skin, but next update coming very soon will enable to activate any of the three palettes.

 

upper app UI design case study

 

User-friendly navigation, supported with slight eye-pleasing animation, will help users to focus on their tasks.  No ads, no complications, no extra copy, interface motivating to create short concise notes for the tasks – nothing will distract from the goals. Application provides the simple calendar, allows saving notes conveniently, check stats and plan anything from everyday stuff to business objectives.

 

upper app UI design case study

 

To get more information on design and interactions, you can also review the full presentation of Upper App design or check full pack of the details via Upper Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Upper App via App Store

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

tubik studio freelance teamwork

Design Workstyle. Freelance vs Teamwork.

Modern time and development of technology brought people much more ways and choices of their work style and routine. The broad availability of the Internet and its endless opportunities gave lots of workers, especially in creative spheres, the chance of being more flexible and resourceful about organization of work process which is productive and convenient for all the sides. However, all the styles of work have not only their benefits but also drawbacks, and it’s really important for a professional to consider them before making the choice in favor of the particular working routine.

 

Most of the designers working in Tubik Studio have tried in practice both workstyles which are typical for today’s designers in the sphere of web, app and branding design: most started their path as freelancers before getting into team. So, using the advantage of real life experience we would like to discuss high and low sides of freelance and work in the studio or agency. Obviously, a lot of things have already been discussed in numerous articles over this topic, but, perhaps, our thoughts can also become useful for those who are considering the theme.

tubik designers

 

Freelance

 

No doubt, due to the new technological horizons couple of decades ago freelance became the new and broad perspective of organizing work routine. It opened wide opportunities for those talented people who could not leave their homes, such as for example disabled or parents of babies and toddlers. This kind of workstyle brought easy solutions for a lot of problems and let the people realize their abilities against all the odds, so very soon it was taken over and improved by huge number of professionals in different spheres. The accents moved a bit: a lot of people made the choice of freelancing not because they didn’t need to go to an office but first of all because they could work for themselves and be the only people responsible for their own decisions, choosing the partners or customers and depending on themselves. Freelance workstyle gave them the feeling of freedom.

 

Benefits

— You are free to choose the projects and customers you want or do not want to work for;

— You make your own choice of place and time of work;

— You do not depend on other people and are able to estimate your own productivity;

— You decide what kind of tools to use for any stage of the project you work on;

— You don’t spend money on transport and other costs obvious for those who work in the office;

— You control your workload and decide on the flow and priorities of projects;

— You are totally responsible for your creative decisions and are free to stop work on the project whenever you want.

 

Drawbacks

— Less (or absent) guarantees of successful payment;

— Less (or absent) guarantees of steady workload;

— No support in creative blocks and problematic issues;

— Great amount of time spent on communication with customers, which can be not only time consuming but also highly stressful);

— Work under pressure of responsibility 100% of time;

— Absence or lower amount of live communication with colleagues on regular basis;

— No financial support in cases of sickness or holidays.

 

tubikstudio designer

Studio designer Violetta as well as most other designers in the studio tried the best and the worst of freelancing

 

Responsibilities

— You are the person responsible for communication at all levels;

— You are the person of the business controlling the financial flows, income and expenses;

— You set the deadlines and have to control them by yourself;

— You work from home or any other place and should control the influence of the conditions on your productivity;

— The scope of work you can supply is limited by your personal abilities and talent;

— You have to be strong-willed and highly organized to efficiently separate your work time and personal time.

 

Bottom line

This way of work demands high level of total and absolute responsibility in case the person wants to become really successful rather than just make a living. In the sphere of design you have to become a “Jack of all trades” being able to organize efficient workplace, fast and easy communication, keeping deadlines, controlling finance and improving as a professional all at the same time.

 

Teamwork

 

Talking about design sphere, teamwork usually means that you become a part of design studio or agency. Certainly, this style of work is different from the one described above not only in terms of workflow itself but also in terms of process organization.

 

tubikstudio teamwork

 

Benefits

— In most cases a team consists of diverse professionals in design and this gives a broad space of creativity and high chances of getting involved in complex design projects;

— Work in a team has higher level of stability in workload, planning time and finances;

— In many cases it gives the faster way of successful presenting yourself as for international design community as a result of accumulated efforts of all the team members;

— Teams include not only designers but also managers who are real and important support in terms of communication with customers, including the cases of solving conflicts and misunderstandings that are unavoidable in full-time creative work; moreover, it saves your time which you are able to devote to pure creativity instead of organizational and communication issues;

— Team has a great advantage of brainstorming and collective mind that can become very supportive especially in case of creative block or complex task;

 

project management discussion

 

— Team can take big and complex design projects splitting the parts of it to the designers who are the most capable of producing final result good for all the team productivity;

— Team provides regular communication both with designers and managers which is good for self-improvement and building social relationship;

— You have clear separation of your working space and personal space which is a vital condition of personal comfort for many people;

 

tubik studio

 

— You have a feeling of somebody to back you up that can give you more confidence;

— Team has more variants of promotion and presenting its members. In case of design sphere, it is sometimes less time-consuming and faster way to get involved into the community and take the support and popularity being a part of the team;

 

tubikstudio designers

 

— The flow of information exchange and circulation is much faster and more efficient that increases the level of general team productivity and problem-solving potential;

— Team can bring good friends into your life as well as inspiration and live energy absorbed from the other people around. 

 

tubik studio designers

 

Drawbacks

— You have to organize your routine according to the schedule of work with a team whichever flexible could be the variants offered to you;

— You have to get ready to be a part of a group. That’s vital to know that even presenting yourself as a designer you are working in the team and for the team;

— You are working in a set of restrictions and in many cases you are assigned for the projects, not choosing the tasks but getting them for your consideration and accomplishment.

 

Responsibilities

— You have to be aware that you are the part of team but as well the team is the integral part of your image;

 -You are always involved in more or less active communication flow which is natural for any kind of work. That means that you should take into account interests, habits, characters and thoughts of other people around you;

 -You have to consider not only your personal interests and prospects but also the interests and prospects of the team.

 

tubik studio brainstorm

 

Bottom line

Teamwork has its own responsibilities, seems more than for frellance, although in most cases it is an illusion. Teamwork provides the chance of taking the best from delegating responsibilities between the people who are the best for the role, so a designer has more time for pure design and creative work as well as professional self-improvement not bothering so much about management and organizational issues.

 

tubik studio ceo

 

Conclusion

 

Definitely, none of the benefits or drawbacks are absolute: as all the people are different the methods of workstyle for their best productivity should also be various. No secrets or tricks, just one man’s loss is the other man’s gain. Some of us are amazing team players while the others prefer full responsibility and decision-making only on their own shoulders. None is bad or good, all those things are extremely individual.

tubik studio brainstorm

 

Inside the studio we have gathered people who are consciously keen and able to take all the advantages of teamwork. It never ever means that any of them has lost their freedom, as all people in the studio have enough of their own private space and the chances of work not being disturbed. However, this kind of freedom is always supported with all the team who are invisibly behind you and ready to back up any moment it’s needed. So, we think that teamwork organized wisely and thoughtfully doesn’t take away designers’ individual space or freedom — vise 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.


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

TUBIK_STUDIO

Tubik Studio in Personalities: Sergey Valiukh.

People ask the difference between a leader and a boss. The leader leads, and the boss drives. (Theodore Roosevelt)

 

Our studio nowadays is a full-fledged team of diverse designers, always full of inspiration and ready to solve the problem of any depth and height. And, you know, we have met and got together due to the person who one day took a risk to start this venture.

 

Valiukh

 

Sergey Valiukh — a founder, CEO and art director of Tubik Studio — is a professional artist, designer and architect, who has devoted his talent and inspiration to web/UI/UX design these days. Being a restless creator, he hasn’t chosen the way of individual path, but made possible for other talented guys to get together and create a friendly and collaborative team. And he is actually the center of this little world with high ambitions.

 

Tubik Studio designer

Working out a new project

 

Tubik Studio designers

Small brainstorm session at Tubik Studio

 

Being asked why among all the directions of art he has chosen the sphere of UX/UI and Responsive web design, he says this is the field which gives limitless opportunities to both creators and customers. To tell more, it’s vital for him to feel that he works for people and thinking about people.

 

tubik Studio Sergey Valiukh

Sergey Valiukh as a speaker at the conference «Anatomy of Design»: among the colleagues

 

Sergey Valiukh Tubik

Hosting Behance Portfolio Review Dnipropetrovsk: Sergey Valiukh with other speakers of the event

 

Sergey Valiukh Tubik

Sergey Valiukh as a speaker at Behance Portfolio Review Dnipropetrovsk

 

In Ukraine, where Tubik Studio is based, there are no many places where you can study to become a UI/UX designer. Although, starting from nowhere about two years ago, nowadays Sergey is certain that the only thing you need to become a professional in this field is desire and ability to work hard. On the one hand, he says, it’s much easier now than a decade or even five years ago considering that today there’s a huge number of resources such as e-books and sites, guides and manuals, social networks and professional platforms giving a designer the successful start. On the other hand, it’s complicated and hard as well as any other job, which is creative, full of responsibilities, interactive and developing in a highly competitive sphere. You should have no illusions; you should just work, study and improve yourself all the time.

 

Sergey Valiukh Tubik

Always keen to get updated

 

He doesn’t remember himself not drawing, sketching, painting — creating images of all kinds and sizes. Today as well, he starts the work on any project with a pencil in his hand. Although technologies are totally fantastic today, providing a designer with plenty of tools and software, creating a concept, he prefers to work out the idea by hand and soul and only then make it powerful with technologies. Moreover, being asked to give the advice for beginners in the field of Web/UI/UX design, he says that the old school shouldn’t be neglected: if you improve your skills of drawing and painting by hand, no doubt, that is going to help you in digital art.

 

Sketches by Sergey Valiukh

The set of sketches by Sergey Valiukh

 

He started as a freelance designer with no definite experience and clear vision of the job. He studied works and techniques of web-designers from all over the world, was open to improve, practise every single day and not to be afraid to perform the results of that practice on Dribbble and Behance to get feedback from other designers.

 

Gif station Valiukh

Animated screen for the Boat station app

 

gif_resto_app_dribbble_800x600

Animated screen for the Restaurant app

 

Animation Sergey Valiukh

Animated screen for mobile application

 

Now he has resounded in UI/UX design, and also has become the head of Tubik Studio uniting creative and stylish designers. Everybody knowing Sergey realizes that nothing of this was awarded or granted to him. It is just a result of hard work and positive thinking.

 

weather_app_800x600

Weather application screen concept

 

Dribbble shot

The concept of landscape and portrait view switching for iPad

 

The studio led by him is a fascinating place to work. We are very serious and thorough when it comes to work. Everybody here is always ready to help, we criticize each other’s work positively and constructively, share experience, so together we create a single mechanism for producing great final product. However, at the same time we are always ready to have fun together, to support each other and spend great time out of the studio. Being friends gives us a great chance to feel work like home. The experience of successful companies persuades: the more comfortable you feel at work, the more productively you go through all the stages of your job. And, you know, we feel it every day being inspired by the heart and soul of our team.

 

tumblr_noiy4jJcIx1untd01o1_1280

Tubik Studio hosting Behance Portfolio Review Dnipropetrovsk

 


Welcome to see the works 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