Tag Archives: app design


UI Animation: Eye-Pleasing, Problem-Solving.

Animation applied in user interfaces is the topic drawing high attention and provoking hot debates nowadays. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristic of modern apps and websites.


Why do users love motion so much? Mostly, because animation supports the essence of actual and real interaction, it creates the level of feelings and perception close to what people have when they are interacting with a physical object in real life. This sort of feeling can boost user experience rate of positiveness really high as the more natural user feels, the less effort is needed to deal with the app or a website and the more clear it is how it works. Certainly, it makes users satisfied. No secret, satisfaction and pleasure are among top things encouraging people to use the product again.


Like everything that is put into the interface and process of interaction with it, animation must be a functional element, not just a decor. Considering motion elements while planning user journey around the digital product, designer should deeply analyze its potential for increasing usability, utility and desirability of the product before making a decision to apply it in the layout or transitions. Animation in UI requires thoughtful approach and always needs to have a clear purpose set behind. Advantages and utility of using it in the interaction process have to be obvious and outweighing possible disadvantages. Animation should become icing on the cake, not a fly in the ointment.


Tubik Studio


Define the problem


One of the best approaches to make animation functional not only attractive is to reveal the problems that it potentially can solve. It can be done at all the stages of design process:


user research will let you know who the target users are, what’s their age, preferences, level of tech literacy, environments and conditions at which the product will be used, and plenty of other factors from the users’ side that can influence user experience;


marketing research will give the insights of existing products, their strong and weak sides as well as methods of forming user loyalty, which is the good basis for defining USP solving particular users’ problems as well as original ways of the product presentation and performance;


UX wireframing stage will enable to think over the logic of interaction, layout and transitions and get the first assumptions of the points which can be strengthened with animation;


prototyping stage will reveal new aspects of live interaction with the screens;


UI design stage will provide the complex of visual presentation for the product scheme and system setting a new perspective of applying animation into the app or website;


 user testing will show if the decisions made about animated elements were correct and their benefits really outweigh possible pitfalls.


tubik studio work


At every stage, if designer sets the goal to reveal possible big or small problems users can have, animation as well as any other design element can take the role of problem-solver for the case.


Let’s review some typical problems that can be solved by means of interface animation.


Problem: I want to know the action is done.


This is one of the problems that can be easily and quickly solved by animated details applied in UI. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform user in split seconds activating all the potential of fast visual perception.


switch animation tubik studio

Switch Control Animation


hamburger_menu tubik studio

Hamburger Menu Animation


hamburger button tubik studio

Hamburger button interaction


tubik studio button ui

Tab Bar interaction


add button animation

Add Button interaction


pageindicator tubik studio

Rubber Indicator


Problem: I want to know that action is in progress.


This is also a huge area of application for diverse motion design potential. When users interact with a digital product, they want to know what is going on at every single step. Making users wait in uncertainty is the risk of losing those users. Still, when users are informed, waiting can be not so annoying and stressful. So, this aspect should always be taken into account and there are many ways to support it via interface animation. This is the high time for pull-to-refresh indicators to come into play and show their best.


pull_to_refresh tubik studio

Pull To Refresh


preloader animation tubik studio



pull to refresh animation tubik

Pull to refresh


pull-down animation tubik studio

Pull Down — Hourglass


tubik studio pull down

Pull Down — Space Ship


Problem: I can’t see the progress and don’t understand how long it will take.


Quite often it’s not enough just to let users know that the process is going on. They often want more: to see how fast it is progressing and how long it will take. Again, interface animation can be a great helper here. Load bars and progress bars, animated timelines and other dynamic elements can kill several birds with one stone:


— they inform user about the level of progress


— they can become the entertaining element blunting negative experience of waiting in the process of interaction


— designed and animated in an original way, they can become a viral feature which users will want to share with others and engage more users into action.


tubik studio motion design

GIF for the Timeline App


tubikstudio motion design

GIF of Dynamic Scroll


Problem: I don’t want to make my screen a mess.


That is really a vital thing to think over in the interface design. If the screen or page looks like mess overloaded with tons of data which is not clearly organized, it will require additional effort from the user to understand how it works and where the needed information can be found. The more effort, the higher chances are getting that users will go away in search of simpler solution. In vast majority of cases users wish to have apps and websites that will simplify and improve their life, perhaps even will do some job for them rather than will take additional effort and time on interaction. Animation can be a good way to enhance interaction with various data blocks and sections and make everything feel organized even in highly data-saturated and complex interfaces.


sport app motion ui tubik studio

GIF for Sport App


tubik studio motion design ui

Cards Animation


UI Design Interaction Tubik Studio

Boat Station App


tubikstudio blog app ui animation

Blog App


Problem: I want to see the key things first.


Visual hierarchy and clear navigation are always a great concern for designers creating interactive digital product. Users’ attention should be immediately drawn to the key element of interaction according to its goal and conditions. Animated interface elements present great supportive force for this aspect, enabling faster and more distinct visual marking of important elements in the layout.


tubik studio tapbar ui

Tapbar Interactions


tubik studio behance weather app

GIF for the Weather App


App screens by Tubik Studio

Resto App 


Problem: I want to feel the interaction natural.


This is the problem that most users will not be able to formulate, still it has a great influence on user experience. If users say something like «I’m not sure what’s wrong but there’s definitely a thing», try thinking over more natural interaction. Animation in the interface can create pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural.  Again, users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.


tubik studio_social_network

GIF For Social Network 



Book Swap App


Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu


This sort of problem is also popular in interaction with web interfaces. Thought-out movement of layout elements while the webpage is scrolled can enhance user experience significantly and create the feeling of one integral smooth interaction rather than several separate parts or blocks of the page. All in all, it’s pleasant and engaging, and these emotions are a good factor of retaining users.


Landing Page Animation Tubik Studio

Landing page animation


landing page animation Tubik studio

Landing page animation


landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver


tubikstudio ui animation website design

Bjorn Website



Problem: The screen/page is boring.


Obviously, talking about interfaces, people often move functional side and usability to the foreground, as key or sometimes even the only aspect requiring consideration. And that’s right and logical, still it cannot null the fact that people are driven not only by logic. There are also such big factors as emotional and aesthetic satisfaction able to influence user experience greatly. Thoughtful balance of utility and usability on the one hand with emotions and aesthetics on the other can bring user-friendly product. And animation is a great booster in this perspective of interface design. It can mark out the beauty of colors and gradients, breath life into layout, make movements dynamic or vise versa smooth, strengthen the power of UI elements with motion and original transitions.


calendar-app animation tubik

Calendar App Animation


ui animation cafe app tubikstudio

Cafe Coupon App


Contact List Concept Scrolls Tubik

Contact List Concept


tubik studio application recipes and cooking

Recipes App


juicy player UI Tubik Studio

Juicy Player


So, definitely, animation in user interfaces has massive potential in solving diverse problems of interaction. Still, even the slightest piece of motion added into UI requires thoughtful approach analyzing not only advantages but also possible drawbacks. Animation should support the user, that is its main goal in the interface.


Tubik quote UI animation


Recommended reading


Diverse issues of applying animation in UI design have been an object of professionals’ attention for a considerable period. Here is the collection of articles for those who would like to read more on the topic.


Interface Animation. The Force of Motion.


Animated Interactions. Motion on Purpose.


UI Animation. Microinteraction for Macroresult.


UI in Action. 15 Animated Design Concepts of Mobile UI.


How to Use Animation to Improve UX


Functional Animation In UX Design: What Makes a Good Transition?


Experience Design Essentials: Animated Microinteractions In Mobile Apps


The ultimate guide to Web animation

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

Tubik Studio iOS development

Case Study: SqueezeOutSwitch. Animation in Code.

UI animation has been the subject of hot debates for a long time. Designers work over the sophisticated animations to make interfaces attractive, original and functional while developers often support the idea that slick and complex animation takes more effort in the process of development than necessary.


As you know from our previous posts devoted to the issues of interface animation, here in Tubik we support the position that wisely used animation is the powerful and multi-functional tool enhancing user experience. We checked that on numerous design projects of diverse purposes. Our complex motion design concepts have been used by developers who like challenges and want to present high-level skills in coding.


Broadening our professional horizons, we also started sharing our design concepts on GitHub, to show how design, even quite complex and specific, can be brought to life with code. Today we will look at more detail at SqueezeOut Switch animation of the interface interaction.


button animation tubik


The design concept Switch Control Animation was presented on Dribbble featuring animated switch control that can be used for accepting or declining the changes on any settings screen. The main motion design style the designer aimed at was adding some gum effect when the control is switched on and off. And this sort of design details can become a bit of challenge for developers.


The animation in code representation is made of two parts.


The first part works like that: when user makes a tap on the screen, the circle has to move to the opposite side until it is covered by the baffler. Then animation slightly slows down, the circle changes its appearance, goes up to final point and features bouncing. The baffler also shows the animated pulsing with the circle. The oscillations decay.


The second variant takes place when user tries to move the circle manually, like pressing it and pulls to the needed side and then can release. While the user pulls the circle, it changes its position within acceptable range, up to maximum stretching of the baffler. The baffler stretches only to one side in that case. If the user releases the circle not taking him to the middle of the switcher, it gets back to its initial position and pulses. The baffler will just get back to the initial point. If the user takes the circle further than the middle of the switch, it goes to the opposite side, both the circle and baffler pulsing, and the circle changing its image.


Animation of the circle movement doesn’t create any problems. This is the standard task which can be solved with UIView animation and CASpringAnimation. However, animation of the baffler is more challenging.


In case when animation is done with Core Animation, setting the initial and final path, then the arc performance is unpredictable. In addition, the form of animation can be inappropriate and the problems with color change can raise.


In animation, the change should be done discretely. When should it be done? If you do it in advance, then the good point is when path is at its initial stage, which means it features the straight line in the middle of switch. So, you have to create an array with the set of paths and colors and place it into CAKeyframeAnimation. The approach gives the working outcome, still the code will look messy and illegible. Moreover, the circle will need to be moved manually for synchronization.


In this case we can use CADisplayLink (timer of screen redrawing) and manipulate with presentationLayer (the copy of the layer which is visible on the screen at the moment). In the method launching CADisplayLink, we will change the path for the buffler. The points which form this path depend on the position of the circle in the switcher. The position of the circle is animated with UIView animation. Therefore, animation with UIView will smoothly change the bearings of the circle layer, while we are changing the path of the buffler on the basis of those bearings.


The path for the buffler feature two UIBeziePaths.


UI animation code


The first one goes from the point 1 to the middle of the circle edge at point 3. Control point for this curve is point 2, it proportionally depends on how far the circle moved out. The second line goes from point 3 to point 5 and its control point is point 4. In this way we can get the line of the buffler edge smoother.


The method of forming path for the particular extreme point




The method of animation on tap  



For reaction on pan we added UIPanGestureRecognizer. Here is the method that processes it



Welcome to review the GitHub source code for this animation. New cases are coming soon!

Welcome to see designs by Tubik Studio on Dribbble and Behance

ToonUP design by Tubik Studio

Tubik Products: Feel the Way of Outsource Clients.

Design is always the story of creative process for a particular purpose. However, the story itself can be written in a hundred of different ways and styles. It can be done individually or become the result of effective teamwork. It can be simple or complex. It can be narrow and specific or multipurpose. It can be outsourced or fully accomplished in-house. There are tons of shades for this story and all of them influence the final result that goes to users.


Here in Tubik Studio we have had the lucky opportunity to create a considerable number of design stories, all so different but all so definitely bright. It gave us the opportunity to feel all the benefits and pitfalls of design provided in terms of outsource partnership. To go further and get even closer to final users, to feel all the pains of our clients and all the variety of steps needed for creating an efficient product out of thin air, we have decided to make the next step and launch our own digital products. Extended design practice we have got through the years encouraged us to dive into all the path of product creation, testing, promotion and analysis to obtain that precious knowledge that will enable us to be even more helpful for our clients all over the world.


design studio TUBIK


No doubt, full-scope product design is not the way to start light-headedly. First of all, we had to analyze how design provided in outsorce differs from product design provided in-house. Let’s look over some insights together.


Outsource design


Being a team with a broad portfolio of outsource projects and having studied experience of our clients as well as plenty of successful product companies, we have marked out the following points needing consideration.


In outsource design process you are given a particular design task. That means you are able to concentrate on design tasks only as the strategic decisions are mostly made on the customer’s side. In practice, however, this disclaimer works a bit differently: creating design solutions solving users’ problems and bringing profit to the customers, designers can and often should influence the strategy of the product progress on the market. Anyway, all the final decisions and small or big changes of the product strategy are made by the customers team as they bear the final responsibilities and all the alterations or suggestions should be made in tight collaboration with the side launching the product.


In outsource design you work on the task you are assigned for, you are not a chooser of the strategy and not a decision-maker if this product is needed and if the idea behind it is good or bad. You have to study how to like and love any idea you have to work with because it is the only way to create good result and by the way to earn money. That is not in your scope of work to get into deep layers and tell the client that this idea will not work — your task is to make it work. That is what you are paid for.


In outsource design you need to have good skills of getting dip into the business goals and correspondent wishes of your client. In fact, if you are lucky you get a clear task supported with outlined target audience of the final product, perhaps marketing plan and ideas on client’s stylistic preferences. In other cases, you will get just a general line containing highly blurred task like «I want you to design a social network for drivers» and that is the part of the job to get all the details of how the clients sees it. It can be done by designers, sales and project managers, but whoever the doer of this vital job is, it is the only way to make the process of collaboration on the stage of design smooth and resultative.


—  In outsource design you aren’t always provided with the opportunity to communicate with stakeholders and influence their decisions. You are hired to accomplish a particular scope of works. It has to be mentioned that for many designers it is a benefit as they start work with a particular task in mind and do not need to get involved deeply at predesign or post-design stages. However, there also can be projects at which after launch of the product designers are later given additional tasks on maintenance and alterations of the existing product.


Design Studio Tubik


Product design


— In product design accomplished in-house all the scope of stages from ideization up to sophisticated testing and maintenance is done by one team. This means that designers get more chances of being involved into all the phases of strategical decision-making upon the product which is even more creative and analytical job but at the same time requiring more diverse skills and much higher responsibility.


— Full-scope in-house product design goes much further than actual design tasks. It includes all the creative cycle, with complex of tactic and strategic plans, ideas on commercialization and promotion, budgeting and content marketing, product philosophy and full-scope branding and so on and so forth. It means that the team will need diverse specialists that will establish solid foundation of specific skills strengthening design and bringing effective product into life.


— In product design the creators are the stakeholders. This certainly means deeper involvement of all the participants into creative process and at the same time more responsibilities.


Product design is the domain of higher financial and creative risks. In outsource design, especially when the process is already tuned and clear, the earnings can be more predictable and flexible in budget planning of the company.


— Product design suggests deep concentration on one project and one aim for a long time while outsource projects can be different and support the feeling of refreshment. Should be said,  none of the ways is better or worse, they are just different and sometimes what is one designers’ meat is other designer’s poison according to the individual peculiarities of nature and creative approach.


To sum up, in outsource design you are a vital part of the product creation and support while in product design you are actually in the heart of all the processes being not a part but the whole story. In outsource design you are a sort of hired executive while in product design you are a stakeholder with all the responsibilities of this not-so-easy job.


Broadening the horizons: Tubik upcoming products


Considering all those issues, we have decided to know it first hand: the work was organized in several direction so that our team could obtain as broad experience of full product cycle as possible and it could bring us even closer  to the pains, problems and pitfalls which our clients tackle on their way. We have set the purpose to create products helpful for their target audience and adding some social value as well as giving us comprehensive experience of full path of goal-centered design.


So, the directions in which we are working over the digital products are:

— content

— entertainment

— business

— education.


The first two of the mentioned points are actually represented with the products by Tubik team we are happy to announce. «Content» direction is presented with recently launched website Design4Users and «Entertainment» direction is presented with an application ToonUp which is really close to its release.




Design4Users Tubik Studio


Design4Users is a blog devoted to diverse design issues solving users’ problems. It is organized via the basic categories such as «Branding» «Product» «Print» and «UI/UX» and plenty of more detailed tags in the mentioned domains. This resource was started with the aim to provide designers, customers and all those who are interested in this sphere of human activity with a wide variety of useful and interesting content supported with attractive and functional design. The blog is designed, developed and curated fully by Tubik studio team.


Tubik Studio design team




ToonUp is a brand new alarm application for iPhones designed and developed by Tubik team. At the moment it is being prepared to release and its live version is coming up very soon. In this case, we have set the purpose to combine functionality with entertainment and support the product of everyday use with stylish graphics, which have been recognized our house specialty by great deal of clients, and gamification elements. If you would like to get updates about its release and sweet bonuses from our team, welcome to sign up here or keep up with the news on its Facebook page.


toonup application tubik studio


In our next articles and case studies we will tell you more about the creative process for these products and unveil some considerations on product design features, issues and requirements. Follow the news!

Welcome to see designs by Tubik Studio on Dribbble and Behance

Welcome to Design4Users

tubik studio landing page design

Soft Landing. 10 Design Concepts of Landing Pages.

What makes the journey by air good? Easy take-off, smooth flight, breathtaking view from the air. And soft landing with feeling safe and convenient. These final minutes of getting to your destination can become the icing on the cake, enhancing comfort and excitement of the flight, or vise versa, the dark spot crossing out all the amazement and positive moment if landing is hard and unpleasant, perhaps confusing or painful. Landing really does its job.


In webdesign it works similar. For many users well-thought-out landing page will be the good experience of getting to the right destination and starting a journey around the website from the proper point. In our previous article sharing the details of design for efficient landing pages we mentioned that process of creating landing pages lies on the crossroads of design, marketing, user research, psychology and other spheres dealing with people, their behavior and solving their problems. 


Here we have collected 10 different UI design concepts accomplished by studio designers. They represent different landing page reflecting various business goals, natures of presented offer and visual styles supporting the purpose.


Landing page for the shop selling organic products


Tubik studio landing page design


The aim of the presented landing page is to promote a shop of organic food. It is composed in several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. So, all the visual accents, first of all key images of food selected carefully to immediately transfer the appropriate message to the user, support the basic theme. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation and the visual elements were selected to support the general theme and provide immediate visual perception of basic idea.


We can also see that in this case the designer chooses quite short and condensed copy blocks which provide users with basic data and give the links to learn more following the call-to-action. At the same time keywords describing the most important benefits like ‘organic’, ‘home-made’, ‘quality’ are marked out visually so that they could be noticed at once. This strategy is wise as users do not need to spend much time reading to learn about the service, but see the opportunity to learn more any time they need. 


Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh


Landing page for a website providing services for everyday life


landing page design by TUBIK

Here is the landing page concept designed for a website of the agency that presents its services. The variety of provided services is echoed by the variety of colors used in the interface. The designer’s aim was to make it lively, vivid and attractive, creating catchy first impression and supporting positive user experience with engaging design solutions. Dynamic motion accents add much to the general stylistic solution whereas good combination of fonts with balanced contrast of layout elements create the field of good visual perception and enhance readability.


landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko


Landing page for museum exhibitions


Tubik studio UI animation

Tubik Studio | Museu by Ernest Asanov


This example presents a landing page promoting art exhibitions. The idea behind it is to make this sort of promotion aesthetic and unobtrusive for the user as well as highly informative. The balance of minimalism and utility appealing is kept by means of style, color and motion. The minimalistic presentation still is highly informative and successfully uses the studies along eye-tracking for applying the most important layout elements in the zones of the highest usability.


As we mentioned in the article devoted to benefits of dark background in UI, color of background can be not only the effective field of presentation but also the carrier of its own message. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige and power. That is, perhaps, one of the reasons why many powerful brands build their visual presentation around black-and-white scheme with dark dominating and light presenting and informing the recepient. Playing out this aspect in interface design can provide additional support to other design solutions and general presentation of the product which we can definitely observed in the presented design concept. Dark background make the images of the exhibits look more deep and stylish while the readability doesn’t suffer being supported with the right choice of fonts.


Landing page for a non-profit charity organization


Tubik studio landing page ui


The provided example shows the design concept of a landing page for a non-profit organization accomplished. It uses considerable copy blocks and supporting visual elements to set the understanding of the club activity. Decision on the amount of copy used on the page should be the aspect of thorough research and testing as it directly and highly influences conversions. However, it doesn’t mean that every landing page should contain minimal number of words. If it presents a famous company product or service or informs about special offers, sometimes short and concentrated copy is enough to encourage users. However, if a new unknown product or service is presented, it is important to provide users with more information persuading them to follow call to action. So, in this case copy becomes a tool of engagement and informing as the service is not concentrated on the product that can become the primary visual accent, but with the activities that should be verbally described.


tubik studio landing page design

Arts, Culture & Education Curation | Landing by Polina


Landing page for a native Mac application


tubikstudio swiftybeaver landing

SwiftyBeaver Landing Page by Ludmila Shevchenko


Here is a landing page for SwiftyBeaver native Mac application whose target audience is developers. As we can see it is designed in minimalistic manner and concentrates users’ attention on short copy about the product’s functionality and CTA enabling to request a free beta access. Although the page provides other important links, they are designed in a way not distracting from the main elements providing conversion. The work on landing page for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main visual design solution was made around the colored accents echoing the design solutions of the application interface layout. 


Landing page for a gym




Here is the landing page of a gym presenting all the basic information necessary for user: general description, provided services, trainers, prices and location. Slight colorful accents and motion effects are used to make the interface more engaging and scrolling more smooth. In this sort of service selection of appropriate motivational images is vital as people associate workouts first of all with attractive and athletic body and positive energy. So, photos applied in design presentation support this particular aim creating clear and obvious perception of the theme and benefits of the service. Bold and strong font applied for headlines adds to both fast readability of key messages and general visual consistency of all the design.


gym landing page concept by Tubik

Gym Landing Page by Dima Panchenko


Landing page for the shop selling travel gear


Travel Gear Landign page by TUBIK


This one features the layout of a landing page for e-commerce. The company presented by it sells gear for extreme sports and active traveling so images were selected to set immediate understanding of the main theme. The page includes general description of the shop, presents ability of transition to the catalog via description of hot offers and also has testimonials part to provide users’ opinion about the service. Good combination of visual elements on the background as well as dynamic photos support the clear setting of the theme and provide the strong associative link to potential buyers enganging them and informing about the nature of the offer.


tubikstudio travel gear landing


Travel Gear Landing Page by Tania Bashkatova


Landing page for a service selling wood products


landing page TUBIK design


Here is a landing page concept for the company offering handcrafted wood products for everyday life. The main design idea was to use wooden textures in some parts of the page to visually maintain wooden atmosphere and create a feeling of naturalness. The dark background helps to emphasize the colorful elements and make the overall color scheme more intense and stylish. Types and fonts were carefully selected and tested in order to strengthen general composition and provide readability for all the copy elements on the page.


TUBIK webdesign landing page

Wood Products Landing Page by Alla Kudin


Landing page for a digital non-profit product


landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver by Vladyslav Taran


The landing presented here has the aim to inform users about a free education service Capitoledge Screensaver which provides the opportunity to use screensaver for studying capitals. Here you can see the upper part of the landing page which features interesting and engaging animation activated by smooth scrolling. Visual presenation is full of air due to light background which also provides easy readability and quick perception of the background map image. 


Landing page for an adventure agency


landing page design TUBIK

Adventure Agency Website by Valentyn Khenkin


Here is the concept design, presenting a landing page for an adventure agency specializing in air-balloon tours. All the information blocks are supported with bright thematic photos while copy blocks move users through the sales funnel stages. Again, light background feels harmonic and naturally adds air to general design presentation.


So, practice shows the diversity of techniques and methods to make a landing page informative and attractive. Nevertheless, to retain users, trendy and pleasantly-looking design should just cover effective functionality and user-friendly solutions which are accomplished according to business goals and user research. Otherwise, beautiful design will work like a hard landing immediately erasing all the positive vibes caught during the flight and that is a fast way to reduce conversion rates which are actually the main purpose of landing pages. Put usability, informative value and functionality first, think over the logic, transitions and intuitive navigation — and visual design will become a great support for smooth and effective landing!


Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.

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

tubikstudio animation ui

Food for Thought. 10 Tasty UI Concepts for Eating and Cooking.

Many decades ago famous writer George Bernard Shaw, known for his sharp tongue and sparkling sence of humor, said: “There is no love sincerer than the love of food.” With the course of time nothing actually has changed: food is still among the most important, discussed and loved aspects of everyday life. The sphere of design features it in diverse faces and directions combining traditional visualization with new techniques and approaches.


UI design is no exception. The basic idea behind UI/UX design is to create interfaces solving problems and satisfying users’ wishes. As eating is one of basic human needs, no wonder we can find numerous applications and websites devoted to this theme. We also take active part bringing new ideas and polishing existing solutions in design projects and concepts for websites and mobile apps. As well as with real meals presentation, visual design for digital products of this sort is a real food for thought.


Like with nicely performed meal, well-done attractive UI is able to increase the level of users’ expectations and catch their attention and senses immediately. However, even the most creative delivery of a meal is not able to save the situation if the food itself is low-quality and vapid. The same happens with UI. If designer doesn’t think much about the product itself, its logic, convenience, effective layout, being focused only on beautiful presentation, the risk of creating dead product is incredibly high.


In our previous article devoted to role of icons in UI we mentioned: the best chefs always say that everything put on the plate should be edible. According to the latest trends, we support the same idea when it comes to icons as well as the other elements of layout: everything that is put on the screen should be functional. Therefore, any icon used in the interface should have its meaning and function. Without it, an icon is just a kind of empty stub, making the layout of the screen or web page dirty with the unnecessary elements. This philosophy works well with other interface elements like copy, illustrations, photos, animation, color combinations, typography choices etc.


Here we have collected 10 different UI design concepts accomplished by studio designers. They represent different aspects reflecting topic of food: some of them are devoted to cooking theme, some present the direction of eating out, the others are connected to selling food. The nature of functionality platforms are also different: the concepts feature interfaces of  mobile applications, websites and landing pages. If you are interested to see more details, just follow the links. Let’s review them all. Bon appetit!


Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu by Sergey Valiukh


The first of presented concepts is a mobile application for restaurant visitors. It features animated interaction with the screen presenting basic view of restaurant menu.  The names of categories are presented via effective combination of highly readable copy and clear meaningful icons for quick visual perception. Simple design with animated accents which immitate interaction with physical objects is a good way to bring positive user experience.


App screens by Tubik Studio

GIF for the Resto App  by Sergey Valiukh


Another piece of interaction for the same app shows one more block of its functionality. It’s a simple restaurant app for checking in and receiving feedback from clients and visitors of different restaurants. The main idea was to provide a simple and easy-to-use interface based on animation and color accents. Restaurant profile shows how many visitors were there and how many of them liked it. The whole app enables to vote for several different features of each restaurant such as «cuisine», «drinks», «comfort», «service» etc. Visual support with high-quality photo content featuring food and drinks enhances stylish looks and feeling the theme.


recipe website design Tubik Studio

Cooking Website by Ludmila Shevchenko


Here is the concept of a cooking website where users can find interesting recipes, add their ones and read useful articles devoted to food topic. The piece of interface is iPad version of layout. The designer chooses light background adding air to the screens and providing environment for efficient readability for different blocks of copy. Color markers are used to define the categories of content.


ipad interactions animation

iPad App Interactions by Sergey Valiukh


This one is an iPad application for booking tables in restaurants. To show its functionality and strengthen it with gorgeous food images, the designer chose an experimental bar profile page. It’s a venue where users can order fruit and seafood, and the profile page which contains everything to go with booking a table, sharing and saving this venue. Animation shows the interactions of user flow showing what happens once the «Book» button is tapped.



Vinny’s Bakery by Ernest Asanov


This one a the design concept of a website for a small bakery selling homemade bread. Here you can see the home page presenting the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. He followed the philosophy of minimalism which is user-friendly, attractive and informative. On the basis of the design solutions it is easy to assume that this is the service positioning itself as a producer of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is the style provided by the webpage: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action.


Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh


The aim of the landing page above is to promote a shop of organic food. It is composed in several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation and the visual elements were selected to support the general theme and provide immediate visual perception of basic idea.


tubikstudio ui design

Tubik Studio | BuonApp by Ernest Asanov


Here is the interface of a social network for those who like cooking and want to communicate and get updated about this topic in fast and easy way. The app enables using all the scope of social functions: sharing recipes, making discussions, chatting, following, uploading images, collecting favorites and so on. Nice and smooth animations supports general stylistic concept and shows interactions within app functionality. As we usually do here in Tubik Studio, the designer followed the idea of keeping the balance of usability and attractive looks of the interface.


ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko


No doubt, good food is the great way to feel the world more positive and that is the key message behind the presented animated interface design. This is the concept of a mobile application for a chain of cafes providing the functionality for saving coupons and discounts and then using them buying tasty stuff. Interface animation is added to make the screen and interactions more lively and engaging and enable easy microinteractions. Icons and illustrations look bright and add positive vibes, even small layout elements like the icon for notifications are reflecting the basic theme and support consistency of general stylistic concept.


tubik studio healthy food animation

Healthy Food App by Ernest Asanov


Here you can see the screens of the mobile app organized around the idea of healthy lifestyle and providing recipes and tips on healthy food. Engaging graphic elements and correspondent color solutions are used to set the theme as well as enable fast visual perception of information which is supported with unobtrusive motion design accents. Animation is also used to show various interactions with a product. Together all those features support user-friendly, attractive and informative interface design.


tubik studio application recipes and cooking

GIF Animation for Recipes and Cooking by Sergey Valiukh


This is a design concept for the recipe application. With it, users can add recipes to their collections or find the ones online, categorize and organize their recipe books and categories, form menus and shopping plans. So, here you can see some interactions livened with motion design. They feature the process when the user is choosing the item from the list of categories and then from the list of particular recipes in one category. The implementation of the concept will be soon available free at GitHub.


So, practice shows the diversity of techniques and methods to make an app or website tasty and attractive. Nevertheless, to retain users, trendy and pleasantly-looking design should just cover effective functionality and user-friendly solutions. Otherwise, beautiful design will work like a cover without a sweet inside and that is the fastest way to lose the users. Put usability and functionality first, think over the logic, transitions and intuitive navigation — and visual design will become a great icing on the cake!


Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.

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

tubik studio graphic design illustration

Tubik Monthly Review. June.

Hot summer days are full of bright impressions, various design projects, creative brainstorms and productive teamwork. Starting a new month, let’s remember what was done in June.


Our Dribbble page got new shots presenting various design concepts: graphic design, mobile interfaces, landing pages, animations were posted by studio designers.  Let’s look through the June shots. If you are interested to see all the details  full-size, just follow the links.



Vinny’s Bakery by Ernest Asanov


icon pack tubik studio

Bright Icon Pack by Ludmila Shevchenko


tubik studio landing page design

Landing Page. Design Issues by Marina Yalanska


character illustration tubik studio

Indian Dreamcatcher by Arthur Avakyan


travel app tutorial tubik studio

Travel App Tutorial by Denys Boldyriev


3d animation tubik studio

BeBright App 3d Animation by Kirill


book swap app tubik studio

Book Swap App by Ludmila Shevchenko


web design tubik studio

Web Design Glossary by Marina Yalanska


tubik studio healthy food animation

Healthy Food App by Ernest Asanov


gym landing page concept by Tubik

Gym Landing Page by Dima Panchenko


tubik studio illustration graphic design

Muscles Magazine by Denys Boldyriev


tubikstudio travel gear landing

Travel Gear Landing Page by Tania Bashkatova


Surely, we took a chance of publishing some articles here in Tubik Blog about actual design issues. In case you missed any of them, look through the list of topics discussed in June:

  • UI/UX Glossary. Web Design Issues.  New set of UI/UX design glossary focused on basic terms used in webdesign sphere. Here you will find the explanations and examples of webdesign as a sphere of human activity, responsive design, home page, landing page, footer and header.
  • ITEM 2016. Conference Connecting Experts. The review of ITEM-2016, big IT conference held in Dnipro, Ukraine, which became a bright start of our summer. Great speakers and guests from different countries, wide range of topics and many bright moments of professional communication.
  • Design Is a Job. 30 Honest Quotes by Mike Monteiro. Fresh set of quotes about design issues. This time it is based on useful and helpful book «Design Is a Job» by Mike Monteiro, the co-founder of Mule Design who is deeply and sharply honest about not only the benefits but also pitfalls of design process.
  • FAQ Design Platform. Human-Centered vs User-Centered. Are the Terms Different? The issue of FAQ Design Platform concentrated on slight nuances in definitions of human-centered and user-centered design with examples by studio designers.
  • Business Terms in Design for E-Commerce. Sales Basics. When in Rome, do as the Romans do. When in business, know what the business people talk about. First set of key business terms for designers who work for e-commerce: conversion, sales funnel, sales channels, niche, 4P etc.
  • UI in Action. 15 Animated Design Concepts of Mobile UI. The diverse set of design concepts providing practices by studio designers in interface animation. Motion design ideas for various mobile applications, supporting layouts from slightest motion accents up to core interactions.
  • Short but Vital. Key Abbreviations in Design for Business. The article continues to set the bridge between business and design. This time we consider popular abbreviations such as MVP, USP, B2B, B2C, C2C and their influence on design solutions in perspective of UI, UX and branding.


tubik blog article


As usual, we were keen to actively share our knowledge and experience answering questions about various design topics on Quora. Here are the most popular ones in June:

What blogs can help me become well versed in UI, UX and usability standards?

— What is a home page?

What is a landing page?

— What’s the difference between human-centered design and user-centered design?


Tubik studio on Quora


Design events were also a bright part of the month. In June the team of studio managers attended the conference ITEM-2016 and designers attended Shuba meetup.


ITEM conference IT Tubik managers


Tubik studio designers


June moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page.


tubik studio design office


tubik studio designer ecommerce


Definitely, we didn’t miss the chance to share our ideas and experience via Medium and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.


Welcome to join us wherever it’s convenient for you. Positive summer vibes and bright inspiration to everyon. Let’s meet a new month of projects, ideas, meetings, fresh design concepts and wise tips from experts. Stay tuned!

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

tubik studio design for business

Short but Vital. Key Abbreviations in Design for Business.

Design is the job whose aim is to achieve the goal and usually it is done by multiple means, techniques and tricks. Anyway, design is a professional activity that has to solve a problem. In design perspective even purely artistic elements have to perform some task and play their role in achieving the goal. In the vast majority of cases we design not for ourselves or our clients: we design for users who have pains, needs and wishes and our task is to set the goals and find effective solutions. It’s like math: you get the problem — you find the formula and way to solve it — you work over the solution — you get the result. To get the result you need to set the goal at the very first step of design process.


Plenty of websites and mobile applications are created with a sort of business idea or scheme behind. That makes them goal-oriented and customer-oriented. For designers it can be both help and challenge: they get a clear goal, which means they know what result is expected, but with the goal they also get a set of limitations and restrictions to consider. Designing for business, it is necessary to understand not only user experience and behavior, psychology behind interaction and decision making, but also business goals and processes which influence general result. It is important to understand business language to have a quick contact with customers, who sometimes don’t know much in design, but definitely know what are their business goals and expectations.


In our previous post devoted to basic business terms we have already started building the bridge between business and design process. There you can read about business and design relations in ecommerce, get the definitions of conversion, sales funnel, sales channel, niche market, 4P theory etc.


tubik blog article


Today’s post continues the topic with vital abbreviations which are now an integral part of business communication. Making orders for design and development services, customers can mention those abbreviations in scope of work and philosophy of product, they should be included in business and content strategy. Understanding them and knowing design aspects of their realization results in goal-oriented and user-centered design which is able to solve problems and bring profit.


So, let’s get started!



=Unique Selling Point / Unique Selling Proposition


Definition. Unique Selling Point (Unique Selling Proposition) is the element of marketing and promotion strategy which presents the most important benefit (or set of benefits) that people can get with the product or service. This is actually a feature which makes the offer unique and different from the others on the market. This is what marks the offer out of the competition.


The article published by Kissmetrics Blog and giving several practical examples mentions: «Instead of attempting to be known for everything, businesses with a unique selling proposition stand for something specific, and it becomes what you’re known for.» That is a good explanation of how USP is beneficial for business itself and why it should be also considered at design stage. For most cases of business practice, the attempt to offer everything for everyone is the utopy which goes nowhere. Specific offers to definite target audience give much more, especially at the start of the way.


Design aspect. USP is an important thing to define at the first stage of ideation and development of business strategy and design solutions that correspond to it. Outlining the USP is one of the hardest tasks as it actually influences on all the design process as well as ways to present and promote the product. However, starting work without understanding what is going to be the USP is mostly like starting traveling without any particular place or destination in mind: it can be a sort of exciting experience, but nobody knows what it will bring in the end. Business trips are never planned like this and business goals are hardly achieved that way.


If USP is defined at pre-design stage that means that all design solutions can be made to support it. That is a good foundation for efficient branding supported by recognizable and consistent interface design which enhances better interaction and memorability. USP directly influences on:


— design of a logo and brand identity

— understanding the mission of the offered product, its tone and voice which directly influence visual and graphic design presentation

— application of identity in the elements of interaction (website, mobile application, interactive displays, presentation in social networks etc.)

— building up principles of interaction and user experience in terms of efficient presentation and providing benefits of USP

— creating user interface that clearly reflects USP and provides fast and easy way to getting it

— creating and selecting content which will support general design concept and show users the advantages of the product

— design of a landing page that will have the structure and content directly presenting USP to target audience

— applying design tactics that increase conversion of the webpages or app screens

— strategy of SEO and copywriting which will support design solution and consistency of the offered benefits etc.


It’s also important to realize that USP is not a business statement or business goal itself. It is the benefit that the provider shows and outlines as essential and beneficial for users. Business goal is the result which company wants to obtain, business mission statement is a sort of 3D presentation (the directions of business development and its results for company’s clients, employees and owners), while USP is what company shows to clients and users as good and worthy for them.


tubikstudio ui animation website design

Tubik Studio | Björn by Ernest Asanov


For practical example, let’s imagine a company launching a website selling books. Suppose, the business goal is to sell 5000 books via the service for the first year. To do it, the company needs to attract visitors with a feature that will differ it from the others on the market. Say, the website will provide the ability for live communication support in choosing books provided 24/7. A user will be able to ask any question about the range of presented books any moment when it’s desired and get the immediate feedback, which is very convenient for customers. That is what the service chooses as its USP and declares to users as the feature differing it from the competition. Buyers do not need to know the business goal as how many sales are expected to be done or how much profit the company wants to earn. Buyers need to know what is especially good and comfortable for them so much that they should come to this company and not to the other. When it is defined at the first steps of creating the product, design becomes the powerful tool to inform users about the benefits, strengthen their power, make them look as attractive as possible for this particular target audience.


Moreover, knowing the USP with which the product is or going to be positioned on the market, UX designer is able to find the best ways and techniques to provide users with the ability to get what they want quickly and easily. Navigations, usability solutions, layout and transitions — everything will make user experience more positive and efficient while business goal more achievable.  This is how thoughtful design works for business.


Therefore, at the earliest stages of design process, project documentation should definitely include the data about USP. If design and marketing are done within one company, it is highly advisable that management, marketologists and designers get together and discuss the general strategy of work to avoid misunderstandings. If design is outsorced and provided by the other side it is recommended for designers and project managers to get as much information about the USP as possible. This will save money and effort for both sides as this way reduces issues of redesign that can come up when the task is very general and blurred as well as will provide the result which is more customer-oriented and adjusted to business goals of the company.


As a practical example, we can remember the story of creating new branding and UI design for Saily App. This is a local service of user-to-user e-commerce. The customers defined its USP from the very start: it is a local community app allowing neighbors to buy and sell their used stuff, so it provides people with the ability to sell their own things or quickly search for the needed ones sold in their location. This idea became the solid basis for all the design solutions around branding and user interface of the app, setting bright experience and friendly communication. If you are interested to read the details and see visual design process, welcome to read case studies on logo design and UI design for the app.


tubik studio UI design




=Minimum Viable Product


Definition. MVP is a product with the set of minimal functions and features which are logically completed and sustainable providing the most important and basic functions for the core target audience. This means that the basic version of the product, able to fulfill key operations which are solving target audience’s problems, is created as live and starts real functioning as soon as possible. The approach is opposite to the stategy of creating full design and comprehensive functionality for all the product features for broader target audience and only afterwards launching it on the market.


Design aspect. MVP approach has several benefits:

— as it starts from the simple and basic version of the product, it doesn’t take long time to provide design and development and makes possible to start playing on the market faster. It’s especially actual for diverse technological ideas and concepts as they are always at risk to outmode by the time all the design, development and testing cycle is finished;

— it enables desiners, testers, analysts, managers and marketologists to collect data of real users’ interaction with a product, reveal the bugs, understand their wishes and pains deeper and use all that information in design and presentation of further, more complex versions of the product. Although testing should be done at the stage of development, it is impossible to predict all the potential problems of interaction with a product before real users start this interaction. MVP enables to do it faster and make next versions more efficient;

— if thoughtfully made and carefully presented, MVP can play the role of bait attracting target customers and allowing its creators to see if target audience was defined properly and analyzed deeply enough;

— next versions of MVP usually present quite massive functional additions so depending on the target it may work as the way of positive and dynamic user experience, different from slight changes in the products whose functionality was fully developed before the launch.


Therefore, in terms of design MVP is the strategy of step-by-step movement on the market, when every next step is based on the analysis of the previous one from the actual data collected from real users. That means that designer should also apply the strategy of gradual design,  carefully applying only core features which are really vital for the MVP as the start of the journey. It greatly influences the number of screens and content on them, necessary transitions and notifications which users really need at this stage of using the product, level of complexity and sophistication of graphic materials and animation etc. UX designers should remember that MVP always has a definite core target audience and the solutions around interactions, experience, visual perception etc. Knowing these core users makes the design task more particular and the result will be more customer oriented thus efficient. Next versions of the product will provide broader functionality and in this way will broaden the circle of users, but it will work in case when core target audience is caught by MVP.


Successful MVP is directly connected to the USP of the product. Here USP plays even bigger role as it enables to make the product user-centered and in this case the chances of making it efficient and attractive to users get much higher. Presenting the product solving particular problems of a particular group of people in many cases proved itself as efficient strategy with perspective of further growth of both functionality and audience. This strategy works especially well for various startups which start with limited budget used wisely for practical presentation of the vital features of the product: if MVP is thought out properly, at this first stage they already start monetization of the product, attract users and at the same time apply practical data analysis in further stages of design. It’s easy to see that the role of UI/UX design here gets even higher as MVP is actually the chance of making a good first impression. Spoiling it with bad design can have crucially bad result for product’s promotion as well as good design can build up solid foundation for product growth.


sport app motion ui tubik studio

GIF for Sport App by Sergey Valiukh






Definition. B2B is the term used in business, marketing and economy to mark the relations of the sides in the business process like «business-to-business». B2B means that one company provides products or services aimed at the other companies’ business activities. The target audience of the offer is not individual customers but businesses. Nature of relations has a direct impact on business process, strategy, promotion and therefore any design stages involved in this scope. Actually, if we are talking about outsorce design and development services, they are a direct example of B2B.


Let’s mention the same company which sells books. They need a website which will provide quite broad functionality for big amount of users. They monitored the market of webservices and found out that hiring an outsorce company for design and development is cheaper for them than creating an in-company department of such specialists. This is the start of B2B relations as design studio provides their services for another business — a bookshop.


tubik studio design UI

Photo Retouching Service by Alla Kudin




= Business-to-Consumer


Definition. One more way of business relations in which business provides products or services directly to individual buyers or end consumers.


Remembering the case with a bookshop selling online, its business is built along the B2C scheme. It presents and sells books to individual buyers and its aim is to involve as many customers as possible. It needs to strengthen its presence online communicating directly to potential buyers so for this aim it can use online e-commerce spot, blog, forums, social networks etc. The graphic material, ways and style of communication, visual presentation and brand identity will work differently than for B2B and will need other approach because psychologycal background of the interaction is different.


gym landing page concept by Tubik

Gym Landing Page by Dima Panchenko



= Consumer-to-Consumer


Definition. It’s definitely clear that presented term features one more type of business relationship when operations are done directly from consumer to consumer. This term has grown its presence significantly with the boost of ecommerce because nowadays the internet provides broad opportunities for such sort of business. The best known way of C2C relationship is platforms for online auctions, sales etc. Creating such platforms, designers have to consider peculiarities of interaction in terms of this business scheme. Design in this case is usually done for the third party which creates this platfrom allowing users to operate on it selling and buying their stuff.


saily UI screens tubik studio

Saily App by Tamara


Design aspect. People involved in design process for products and services have to consider the types of relations chosen for the particular project. Actually, the type of business scheme initially defines target audience and nature of interactions which are key factors for efficient and user-friendly design solutions. Designing for business should supposedly involve methods of visual and content presentation which are different from the one presented directly to end users. It’s easy to see by examples of numerous landing pages: the ones aimed at companies use content, language, visual and graphic elements, placement of data blocks different from those which are targeted at individual buyers or users.


Neglecting the aspect of business relations increases risk of creating design which will not provide high conversion rate even being sophisticated, stylish and attractive visually. Psychological background behind design solutions has to support a particular business schemes or strategy. Here in Tubik Studio we have had broad experience of design for all the mentioned schemes so below you will find some ideas we would like to share on the basis of that practice.


Designing for B2B, it’s important to remember that:

— design solutions shoud consistently strengthen branding and company policy which is important for other business side. If website or landing page represents, let’s say, a service as accomplished by well-prepared and professional team of specialists with their policy and statement, it is appreciated and trustworthy so builds better bridge for collaboration;

— implementation of design elements in social network marketing of B2B company, using the same style, voice, corporate colors and graphics, specially designed branded items etc. is one more way to strengthen brand awareness by means of design;

— consistent and thought-out content strategy combining visual and textual material with careful selection of visuals and copy is able to fulfill all the stages of sales funnel and bring better conversion of the website, landing page or application of B2B company;

— concise and minimalistic solutions in design and copywriting work efficiently in most cases because they save time and effort of busy stakeholders and entrepreneurs. Good variant of scenario is when they are given concise core information at the first stage of interaction but always have the chance to read more if they are interested (as well as avoid reading huge copy blocks if they don’t want). Surely, this solution should be based on thorough user research, but anyway it has high potential to make user experience more positive and effective;

— business is done differently in different countries. It should be always considered together with the nature of business relations as the factor making considerable impact on the level of trust and wish to collaborate. Selection of graphic content and layout of the elements on the screen or page should go under analysis in this perspective as some graphic elements, photos, gestures, word combinations, color choices which are efficient and clear for one region or culture can be totally inacceptable or even offensive for the others. Creation of several landing pages targeted locally can be an effective solution;

— the aim of a website or other piece of design presenting B2B company is not to grow a huge flow of traffic but to engage and direct leads which belong to target audience and are potentially open and able to take part in business collaboration or partnership good for both sides. It’s important to keep in mind that retaining customers in this case plays not less role than involving them into the game.


Designing for B2C it important to consider that:

— the target audience can be more diverse so design solutions which will effectively transer the necessary message to the user can require more universality;

— visual presentation should be catchy and original as in this sphere competition is very high;

— in many cases website or platfrom for B2C provides full way up to the process of buying and delivery. Terms of data protection and security need high attention here. Neglecting this aspect will get the company name associated with bad service so will make a big hole in its reputation;

— the website has to be technically ready to support a really big number of users simultaneously as frequently more offers are available than in B2B so the flow of users potentially interested in buying it can get higher quantities;

— strong and consistent presentation of the brand in social netwroks featuring the same design solutions is certain must-have. Not only does this strategy offer more marketing opportunities, but also supports better direct communication with consumers and shows the company’s opennes to discussion as one more reason to trust. The same visual design should be used consistently cross all the platforms to increase brand awareness and create strong associations;

— the aspect of virality works effectively in this type of business relations and can be used via design features like interesting animations, engaging illustrations and characters, brand mascots, Easter eggs, funny or encouraging videos etc.


Designing branding and interfaces for C2C, it’s advisable to consider that:

— the platform should be intuitively navigated and clear to use for people with different level of tech abilities and on various devices;

— engaging and original UI desing solutions are a good way to set the first contact and involve users into active interaction;

— thought-out placement of layout elements and visual hierarchy can increase conversions and that will be the strong reason of user retention;

— UX of user-to-user communication (chats, discussions, comments, sharing etc.) should provide diverse features and broad possibilities;

— user interface visual design should provide good universal background and environment for presentation of various products and services;

— the platform will need an efficient and quick system of user support.


tubikstudio designers


Recommended reading


Here are some more articles we could recommend for those who would like to get deeper into the topic:


What a Unique Selling Proposition Really Means & Why Your Business MUST Have One

6 Incredible Examples of B2B Web Design

10 MUST DO’s Before You Start Designing Your B2B Website

Design is Marketing

The Importance of Design in All Marketing Campaigns

The Role of Design in Business

Refining Design for Business

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

tubikstudio ui app design

UI in Action. 15 Animated Design Concepts of Mobile UI.

Animation in UI is a tool of great power breathing life into the process of interaction. It helps user to get fast feedback, provides opportunities for fast and easy microinteractions, marks out key elements of the layout and adds engaging feeling of live and dynamic process. Used wisely, it is able to add more positive vibes to user experience. It is especially true for mobile applications which have to be organized along guidelines in terms of limited space of the screen and at the same time provide informative and functional interface.


Tubik Studio animation


In our previous articles we have already provided ideas about the role of animation in UI design, its potential in boosting effective microinteractions and popular purposes for using animated microinteractions. With rapid growth of mobile devices animation got even more significant popularity and diversity, enabling fast and easy processes for touchable interfaces, especially on-the-go. Therefore, animation is an effective way to make the product simple, clear, bright and user-centered. Today we would like to support that idea with a bit of practice via the set of design concepts by studio designers. It includes motion design practices for animated interactions in mobile user interfaces of different kinds, stylistic choices and functionality. So, welcome to review!


tubikstudio blog app ui animation

GIF for Blog App by Tubik team

Presented UI features the concept of a blogging app for everyday use. It features lots of images, and the news feed consists of topic-colored tiles for the posts. By tapping on the post author the users are brought to their profile where like in any other social network they can follow/unfollow the person and browse through their recent activity. Slight motion effects add the unobtrusive feeling of interacting with physic objects and livens up the visual presentation.


tubik studio_social_network

GIF For Social Network by Sergey Valiukh

Animation features user interactions with a mobile application presenting social network. People usually want to see this sort of app fast, dynamic and clear. Interactions are presented here by simple motions based on colorful UI accents. They show the functionality of the screen and add slight lively vibes to the interface.


art gallery app ui tubikstudio

GIF for Art Gallery App by Tubik team

It is well-known that designers should be careful with animated elements in UI as too much animation confuses a user, but if a motion accent supports the general layout it brings better conversions. Here designers showed animated interaction in the art gallery mobile application featuring the set of events previews and transition to more detailed information about the particular event. The vertical movement is highlighted with colorful diagonal lines which are keeping the same structure across all the screens.


sport app motion ui tubik studio

GIF for Sport App by Sergey Valiukh

Sport apps are popular nowadays as more and more people use their devices to support their trainings, keep the data and track the progress. So here is the design concept for such an app demontrating functionality via animated interactions. The structure is very simple: it consists of a side menu and content. Menu moves from left to right to show all the app sections. The main idea is to make some «rubber effect» for the content when the side menu opens. It serves one goal — to make all content details visible even when menu is open on the screen. Colour palette is all about fresh and bright scheme to motivate users to act and in combination with slight motion accents it creates good mix.


tubikstudio ui animation

Product Card Animation by Alla Kudin

Presented design concept features animated interactions within a product card in the shopping app. Users can move the photos showing catalogue items,  set the size, see the price and add to cart. Here animated elements support high level of usability: they immediately inform the user about completion of the action. That provides fast and easy microinteractions and saves key data within one screen. At the same time, animation doesn’t overload interaction process and supports clear navigation.


calendar-app animation tubik

Calendar App Animation by Kirill

This concept presents one more design idea for the app of everyday use with a calendar enabling the person to schedule appointments and add notes. Bright interface playing out rich pallete and gradients is supported with smooth and stylish animated accents providing harmonic support to general visual presentation.


tubik studio motion design

GIF for the Timeline App by Sergey Valiukh

This example shows two UI interactions inside one animation: timer progress and pull down. This is a one-screen app with the minimum of functionality (timer) and the maximum of animation to concentrate user’s attention on the «time flow». Timer can be started by Start button or by pull-down. Of course, such transitions are much more for fun, but they will definitely attract users who like visually original solutions and custom graphic design.


ui concept animation tubik studio

UI Navigation Concept by Ludmila Shevchenko

One more bright animated concept shows navigation design within the mobile application informing the user about city news. Catchy colors and stylish icons are strengthened with original motion design solution for active elements appearing on the tap and enabling further directions of transition.


tubik studio animated interface

Force Touch Slide Menu by  Kirill

Another animation concept for the same city news app activates one-touch interaction and shows one more interaction in navigation of the app, this time adding transition to user profile.


tubikstudio ui design

Tubik Studio | BuonApp by Ernest Asanov

Here is the interface of a social network for those who like cooking and want to communicate and get updated about this topic in fast and easy way. The app enables using all the scope of social functions: sharing recipes, making discussions, chatting, following, uploading images, collecting favorites and so on. Nice and smooth animations supports general stylistic concept and shows interactions within app functionality.


tubikstudio motion design

GIF of Dynamic Scroll by Sergey Valiukh

This concept features a screen of a global social network. The idea was simple: to show user’s timeline with different kinds of posts such as check-ins, media content and stuff from user’s friends or their own. The task here was to add simple game accents which wouldn’t make the simple network too cluttered and would not distract the user. The final decision was to make parallel timelines: the main vertical timeline and bright animated horizontal one. The function of the latter is to show the user where the last post was in terms of place and time.


ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko

No doubt, good food is the great way to feel the world more positive and that is the message behind the presented animated interface design. This is the concept of a mobile application for a chain of cafes providing the functionality for saving coupons and discounts and then using them buying tasty stuff. Interface animation is added to make the screen and interactions more lively and engaging and enable easy microinteractions.


Contact List Concept Scrolls Tubik

Contact List Concept by Eugene Cameel

This concept is the animated version of the user interface for a contact list app. It features variants of vertical and horizontal scroll as well as other interactions with the application. Animation not only livens up the process of interaction but also strengthen stylistic concept of the app with special visual effects.


tubik studio motion design ui

GIF Animation by Sergey Valiukh

This simple mobile app consists of just a couple of screens and simply allows to track the current location of your followers on the map. Here is the home screen animation and its dynamics in the process of search, and also the search results gallery. Animations imitates movement of physical cards which makes interaction with neatly organized data base engaging and clear for user.


tubik studio healthy food animation

Healthy Food App by Ernest Asanov

Here you can see the screens of the mobile app organized around the idea of healthy lifestyle and providing recipes and tips on healthy food. Engaging graphic elements and correspondent color solutions are used to set the theme as well as enable fast visual perception of information which is supported with unobtrusive motion design accents. Animation is also used to show various interactions with a product. Together all those features support user-friendly, attractive and informative interface design.


In bottom line it’s important to remember: animation which is applied in the interface should have a clear purpose enhancing general user experience. In vast majority of cases, UI designer and motion designers try to find design solutions in which animated elements will satisfy multiple options increasing usability and desirability of the interface.


Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.

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

tubik studio design business

Business Terms in Design for E-Commerce. Sales Basics


«Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.» (Erik Spiekermann)



Modern design has multiple faces, sides and directions. Some of them are more artistic than the others which are deeper concentrated on profits and goals. However, any way it goes design is the sphere with different perspective. Design is goal-oriented and problem-solving activity applying art to serve people.


«Whether you are helping to launch a new business from scratch, or making incremental changes to an existing product, or something in between, any design task you undertake must serve a goal. It’s your job to find out what those goals are.» (Mike Monteiro)


Talking about the sphere of web and app design, one of the most practical and goal-oriented fields of creativity is design for e-commerce. In this domain, there are many factors influencing design decisions and lots of relevant aspects to study and research. Designing a product for ecommerce, be it a website, a web or mobile application, branding design, advertising materials, designers work within various limitations built by particular product or service features, target audience, marketing and promotion strategy, business goals, budget and investment plan etc. Design becomes a tool working when used properly. Therefore, to use it efficently, the designer needs to know the basics of business and economy as the goal of design process in this case is creating an app or a website raising money and built on business techniques and methods. Moreover, quite often designers creating e-commerce platforms and products work in team with marketologists, advertisers, researchers, analysts and psychologists all of whom have a purpose to increase the level of profit brought by the final product.


So, today we decided to start collecting and explaining here basic business terms which are important in the process of digital design for e-commerce. Considering this list can make the designer much closer to marketologists and provide great help for better communication. In addition, keeping the aspects mentioned below in mind on the earliest stages of design such as UX research and wireframing is a good way to effective solutions increasing profits on the solid well-thought-out logic of interaction. The set of terms can be also useful for project managers involved in the process and managing collaboration between different sides of the same process.


tubikstudio design office teamwork


Business Basics


Today’s section is focused on basic terms used in the domain of economics and business strategy mostly concentrated on sales in their broad understanding. Taking them into account and analysing significantly increases the chances of creating efficient digital product.


«A satisfied customer is the best business strategy of all.» Michael LeBoeuf


E-commerce (Electronic Commerce)


«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful.» (Jeff Bezos)


Definition. E-commerce is the direction of business activity when the process of providing customers with goods or services is done by means of electronic devices and the Internet. This sort of communication and finalization of sales adds some new aspects to data management, sales channels, advertising, presenting goods and services and moreover — enabling full cycle of commerce operations, including payments, delivery and refunds.


The last decade witnessed booming ecommerce development. Today it provides the opportunities for not only e-trade both from businesses to buyers but also online auctions and user-to-user sales platforms. E-commerce systems and activities today include presenting and booking wide range of services, e-banking, commercial operations with e-money and e-wallets, diverse forms of e-marketing and many other things which customers are using more and more often on everyday basis.


Design aspect. Obviously, success of e-commerce activity depends on several factors among which:

— quality of the product or service offered

— quality of the content presenting the offer to customers

— quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.


So, it’s easy to see that UI/UX design part plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of target user.


Designing e-commerce website or mobile app, designers should definitely consider the following aspects:


— operational simplicity

— strong branding

— security of users’ data

— effective use of visual elements

— clear data presentation via menus, catalogues etc.

— user’s ability to leave feedback about goods and services

— easily available general and contact information about the business providing goods or services

— design that supports the offer not overshadowing it.


tubikstudio ui animation

Product Card Animation by Alla Kudin




«It’s much easier to double your business by doubling your conversion rate than by doubling your traffic» (Jeff Eisenberg)


Definition. Initially in terms of e-commerce, conversion is the index showing how many visitors actually moved to the end of the way they were offered actually buying a product. So, for e-commerce conversion transforms visitors (users) into buyers.


Design aspect. Today ecommerce uses wide range of techniques, so in terms of web or app platforms meaning of conversion also gets broader. In modern terms of comprehensive and numerous functions and needs, which users are able to fulfill with online resources and digital products, conversion is the rate of cases when visitors did the action they were called to. And that can be not only buying something.


For example, in our article about landing pages which are recognized as one of strong tools for e-marketing and e-trade we mentioned that conversion can be also fixed in case of:


  • moving to direct use of a product
  • subscription
  • transition to the other page
  • downloading an app or a file
  • providing some information
  • answering the question in the survey
  • starting free/discounted trial use of a product
  • browsing a library
  • reading more detailed description of the product or service etc.


Therefore, conversion for a webpage or app screen can mean different actions that correspond to sales or marketing strategy of the particular business.


Conversion means that your page transforms passive users into active. They don’t just observe the information given to them, but also do the action which is offered by this page. So, conversion is one of the most important indices of the web page or app screen efficiency which is vital for business. It is a metric reflecting focus on engaging visitors with data performance and stimulating them to make the action which is a part of a business plan.


For designers the factor mentioned above means that if they create design concentrated on conversion rates via positive user experience, their work will result in website or app bringing profit both for user and business.


Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh


Read more and review the examples on this topic in our previous article


Sales Funnel


«Communications is at the heart of e-commerce and community.» (Meg Whitman)


Definition. Sales funnel (in other words — purchase funnel) is a technique which is deeply customer-focused and based on gradual involvement of a customer into the process that potentially gets finalized with the act of actual purchase. When this technique is applied, the customer moves through several stages of involvement providing him/her with necessary information about the product and benefits persuading to make a purchase.


Basic sales funnel includes the following stages:


— Introduction (Awareness). User gets the initial information about the product, its brand name and nature. In other words, user learns that the product or service exists on the market.


— Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.


— Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.


— Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing-up about core benefits of the offer, data about additional bonuses or special offers, engaging call to actions and explanation of purchase process.


— Purchase. User makes a decision and takes the ability to make a purchase. The sale is done.


— Retaining (Repeating the experience). User gets the opportunity to leave feedback, obtain additional contacts supporting the offer, subscribes to updates, gets the chance to repeat the purchase easily if desired.


Design aspect. In terms of e-commerce, sales funnel is highly effective commercial technique supported with diversity of functions digital products can offer. Knowing the priciples of sales funnel leads to customer-centric, informative and engaging design solutions. Sales funnel can be either fully represented on the website or landing page as well as in mobile application or from outer source,  for example social media taking over the mission of awareness and interest and directing engaged traffic to the platform enabling the product.


In addition, sales funnel stages thought out and applied properly can work as a sort of filters letting quickly inform users about the product or service and move to the next stage those who are potentially more interested while saving time and effort for those who are looking for something other.


However, sales funnel designed carelessly can play the opposite role: it can confuse users who are potential buyers and turn them out of the website or app without taking a chance to know proper information about the offer.


Sales funnel should be applied and designed on the basis of thorough research of target audience and market segment. Moreover, it should be carefully tested from the very start of its implementation to measure if all the stages work efficiently. Practice proves that even minor design changes can bring big changes.


website design concept tubikstudio

BRMC Website by Konst


Sales Channel


«It is not your customer’s job to remember you.It is your obligation and responsibility to make sure they don’t have the chance to forget you.» Patricia Fripp


Definition. Sales channels are the ways through which the potential customers come to the point of e-commerce, be it a website or mobile application with which they can realize the actual purchase.


Design aspect. Designing for e-commerce, it is important to take into account maximum of the possible sales channels which are really numerous in the Internet, from social networks to specialized forums, influencer’s reviews and tailor-made advertising campaigns. Researching and understanding those channels gives broader prospects to the actual point of sale which you are designing for.


There are several vital asects to remember about:


— Sales channels should be initially concentrated on target audience. There is always the place and time to broaden the perspective as soon as core target audience is involved. However, the attempts to «sell for all» and «design for everyone» from the launch can bring to waste of effort, time and money spent on design and promotion. Move gradually and measure the efficiency of design solutions at every step.


— Sales channels will work effectively from initial awareness stage if they witness strong connection to general brand identity. That is the reason to develop guidelines for online sources presentation in brandbook considering all the details of visual presentation and mission statement. Consistency is a powerful tool of both design and marketing.


— Sales channels should direct traffic to the places which enable users quickly get informed and make the actions they come for. For example, if the post in Facebook invites users to participate in summer sale, they should be directed right on the landing page of this sale, not to the home page of the website.


The mentioned factors thought out at the stage of thinking over UX design solutions are able to make a good impact on conversion and sales rates.




«We will continue to see a convergence of the digital and physical world. Those who conquer that trend will be market leaders.» John Phillips


Definition. In business, niche means concentration of the offer on specific needs, wishes and problems of a specific target audience. Niche market is a specialized market segment which is aimed at specific market needs with a close view on its demography, education level, level of income and purchase abilites etc. For example, when one company produces software generally used for creating and editing textual materials for broad target audience while the other is adopted for specific needs of copywriters and editors (grammar checking, plagiarism analysis, synonyms prompts etc.), the latter one presents the niche business.


Design aspect. Designing for niche market and niche product, it’s important to learn all the details about the target audience as it is going to be quite specific and more details are usually influencing the process of design and marketing. Applying psychology of color, copy targeted at potential clients, deep analysis of their needs and providing efficient layout, easy transitions, clear data presentation and aesthetic features that suit this particular audience is good way to high profit. In addition, creative ways to emphasize specific nature of the product or service by means of design such as branding and original UI solutions can help the product to stand out of the crowd and stay competitive.


tubik studio ui animation

Bonano e-commerce interactions by Vladyslav Taran


Maslow’s hierarchy of needs


«It is quite true that man lives by bread alone — when there is no bread. But what happens to man’s desires when there is plenty of bread and when his belly is chronically filled?

At once other (and “higher”) needs emerge and these, rather than physiological hungers, dominate the organism. And when these in turn are satisfied, again new (and still “higher”) needs emerge and so on. This is what we mean by saying that the basic human needs are organized into a hierarchy of relative prepotency» (Abraham Maslow, 1943).


Definition. One of the basic psychological theories widely applied in business on both micro- and macroeconomical levels. Developed by Abraham Maslow, it is focused on the hierarchy of human needs and consequently factors of motivation.


Its presentation found at Simply Psychology website features  5 levels of human needs featured by the theory:


1. Biological and Physiological needs — air, food, drink, shelter, warmth, sex, sleep.


2. Safety needs — protection from elements, security, order, law, stability, freedom from fear.


3. Love and Belongingness needs — friendship, intimacy, affection and love, — from work group, family, friends, romantic relationships.


4. Esteem needs — achievement, mastery, independence, status, dominance, prestige, self-respect, respect from others.


5. Self-Actualization needs — realizing personal potential, self-fulfillment, seeking personal growth and peak experiences.


Design aspect. Having read the points of the theory, it’s easy for a designer to ask: «What does it have in common with design process?» The link perhaps doesn’t look really obvious, but it is fundamental in motivating people to use or buy products or services on different levels of economic relationship. Designing for e-commerce, which is one more type of human relationship, with a specific goal and ability to apply the mentioned theory can produce user-friendly and customer-centric product achieving its target audience and solving its problems.


Certainly, it’s great when designer is able to involve professional marketologists into all the stages of the creative process and apply their professional knowledge and skills in design form. However, this opportunity isn’t always available. Moreover, designer able to analyse economic basics and business factors influencing the design scheme and logic gets the higher level of proficiency.


In design for e-commerce, it is good to understand from the early stages of the process what stage of the Maslow’s pyramyd the core target users are at. Answering this question, designer is able to talk to users’ in their language and find the solutions that resonate in their hearts and minds the best. Users’ needs form their motifs, triggers that can catch their attention, words that can touch them, length of copy and calls to actions that they are ready to accept and follow. Analyzing the level of needs and expectations, designer is able to find the most efficient layout and informative graphic elements. Knowing and feeling the user is the solid foundation for problem-solving goal-oriented design.


ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko


4P Theory


“People don’t call it e-commerce anymore. It’s called omni-commerce, and it’s the idea that digital permeates every step of the purchase chain from product discovery to trial to pricing to actual purchase.” (Tolman Geffs)


Definition. Famous 4P theory, presented by Neil H. Borden and later grouped by E.Jerome McCarthy, also known as marketing mix, has become highly popular and efficient in business strategy, including e-commerce sphere. It states that product launch and lifecycle is based on four «P» factors: product, price, place, promotion. Business Case Studies website simply formulates it the following way:


«When marketing their products, firms need to create a successful mix of:

  • the right product
  • sold at the right price
  • in the right place
  • using the most suitable promotion.»


Marketing case studies prove that missing even one of four mentioned positions can waste all the effort and reduce the levels of profit and brand awareness significantly.


Design aspect. No doubt, 4P theory is highly applicable in design for e-commerce. The Price of product is usually the furthest part from designer’s decisions as it is decided and given by the stakeholders ordering design part of work. In perspective of Product it works only partly being applicable to those cases when users buy digital products or services, let’s say mobile applications, which also need UI/UX design.


However, talking about the other two factors we can see how actual they are in terms of design effort and creativity. Indeed, designers creating websites or apps for e-commerce, create the right Place for trading and are responsible for making this place comfortable, attractive and correspondent to the product nature as well as target audience expectations. As for the Promotion, today online marketing features numerous ways of presenting the product and achieve the target audience; it’s effectiveness also significantly depends on design decisions. 


Neglecting close interconnection and mutual influence of all those factors on the final result increases risk of poor rates. Design decisions made on the basis of those factors supporting each other help to provide pleasant, positive, easy-to-use and user-focused e-commerce platforms.


Tubik studio UI animation

Tubik Studio | Museu by Ernest Asanov


The bottom line


The set of business terms and their definitions given above builds the bridge between business strategies and designs able to efficiently support them. However, it’s very easy to get overwhelmed with all those techniques and forget the first and most important thing. There are no any sophisticated design solutions, marketing techniques and any sort of magic which will sell the bad product for a long time. Surely, there can be some effect, but it will never retain the users. Positive experience of interaction with a website will not overcome bad experience of interaction with low-quality product or service.


The offer is the key. Design is an actionable and helpful tool on every stage of launching, presenting and promoting the product, informing users about it and selling it in fast and easy way. Nevertheles, if the product is of poor quality, successfull design of e-commerce platform isn’t going to make it better. Think over the product and its user first, only then design will give it the chance to beam at full.


«To satisfy our customers’ needs, we’ll give them what they want, not what we want to give them.» Steve James


tubik studio designer ecommerce


Don’t miss our next article which is going to present the set of business terms useful for UI/UX and graphic designers in terms of marketing and user research. Stay tuned!

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