Tag Archives: tubik lab

Tubik Studio Weather App

Weather in UI Design. Come Rain or Shine

Perhaps, one of the most diverse objects of modern digital design is weather. Graphic designers work out loads of icons and illustrations in different styles, UI/UX designers create new concepts of weather applications and widgets, so users get more and more options for getting such a simple but vital information as weather forecast and the like. Despite the bulk of numerous weather apps which is growing bigger and bigger, it is still one of the most popular topics for designers as it goes to basics of human everyday life.


Users have a great benefit, being able to choose among loads of weather apps and services of different complexity, style, features, colors and so on. Moreover, the target audience of this sort of product is almost unlimited and totally diverse, therefore different ideas and concepts if done according to the laws of basic visual efficiency and common sense, will find their users.


Tubik Studio designers, working on various UI/UX projects, have also presented different design concepts for weather applications. So, this post is sharing our works and ideas on the topic.


Basic points of UI for weather applications


Design of the user interface for a weather application is usually concentrated on the idea of being informative and clear. This really is the thing which does not include a lot of copy on the screen, so it is very important to find the scheme and layout in which the user will need just a quick glance to get all the data he or she needs. That provides the broad space of creativity for designers as well as becomes a great challenge as any kind of weather app requires keeping the wise balance between the creative visual representation and extremely high level of usability.


Both aspects – visual and usable – need to be taken into account. If designer doesn’t think thoroughly enough on solutions providing easy and pleasant user experience and enhancing usability as the basic point, the app will risk losing the audience because functionality is the first thing that retains users to such kind of basic apps. On the other hand, concentration only on the layout and transitions while seeing visual design as the secondary and minor aspect is also the high risk, since being usable and well thought-out but visually boring and usual the app will not attract users’ attention and could get lost among the numerous competitors. So, designer should think over both perspectives and look for the ideas to make the design concept pleasant-looking, clear, efficient and understandable.


Tubik studio icons


Practice shows that the limitations for designer’s creativity in case of weather applications are much lower than in a lot of other types of products. As weather apps do not usually use long copy on the screens and apply a lot of visual details, the aspects of readability and efficient data presentation are different from for example the screens of a blog app or a social network. Therefore, designers can try various color pallets and combinations, different forms and shapes, interesting textures, visual effects or interface animation, original fonts or unique icons – anything that will support clear visual perception of the data necessary for a user.


Colors and shapes


In case of UI design for weather applications there is no strict trend, requirement or recommendation about using light or dark background. It happens, for instance, with more copy-based products in which the aspect of readability is activated with perception of big amount of text: in this case it could be recommended to try light background for making the layout more user-friendly and text more legible. In case of weather apps and widgets any combinations of colors, sometimes very unexpected, could work efficiently as far as they provide visual support for the data and enable the user to see and understand what they need in fast and easy way.


Moreover, interesting combinations of colors and shapes can also provide a kind of aesthetic pleasure for the user that can become a reason to choose this particular product among the competitors along the personal user’s taste. So, the range of colors is perhaps one of the widest in this case of design work. The weather concept accomplished by Sergey Valiukh for Fuse has become a good case of practical example.


weather app ui design by Tubik Studio

Weather App Screens by Sergey Valiukh


Organization of the data on the screen is one more important aspect to think over. One of the fresh Dribbble shots by Tubik Studio designer Tamara features organization of the data along the cards with the basic and additional information needed for the user. The user can choose the place (filtered as city, region, country and the like) and get the card which shows basic data such as temperature and weather characteristics (sunny, cloudy, cold, etc.) and additional data such as date and time according to the local time zone. It can be especially useful for users who travel a lot and need to know how to estimate their time and routines considering local situation.


tubik studio design

Weather Concept by Tamara


Graphic elements


Graphic elements for weather applications are among the most essential things to put time and effort in. Weather apps, as it was already mentioned, are highly visual and data perception has to take seconds so graphic elements should first of all be concentrated on increasing usability. A designer has to remember that this kind of app could be used on different devices, in different environments (bright or poor light around, for example), very often on the go. People with different levels of sight will need to use it. So, to be useful and usable, the app should apply the graphic material which will be not only visually appealing and stylish but also easily perceived in various conditions.


Among the graphic elements vital for efficient weather app, icons should be mentioned the first. In one of our previous articles we have already described importance of elaborate work on this vital element of any interface. In case of weather apps icons have great field of expression as they actually become highly informative elements. Being aware of this, designer Arthur Avakyan created the original set of weather icons for Tubik Studio, which is now available on Envato, Creative Market and Tubik Lab. All the icons follow the laws and standards of proportions and composition and will look recognizable and meaningful in different variants of color pallets and combinations. Also they all were tested by designer in the range of sizes to check that their recognizability doesn’t decrease in any case of use.


weather_icons tubik studio

Weather Icons Set by Arthur Avakyan


To represent how these icons work in layout, Valentyn Khenkin presented the concepts of weather app seen on iPad screen. It shows the location, the weather around — the temperature, pressure and other details. And the majority of screen space is covered by the illustration of the city which creates nice style and is recognizable as a support of the feature of location.


tubik illustration design

Weather Icons Presentation by Valentyn Khenkin


illustration weather tubik studio

Weather App by Valentyn Khenkin


Interface animation can become a good way to liven up the graphic elements as you can see in the animated interface by Sergey Valiukh. Animation adds movement and action, enhances efficient and fast microinteractions and makes perception of the data even faster and somehow entertaining.

tubik studio behance weather app

GIF for the Weather App by Sergey Valiukh


So, designing UI for weather applications, designers have a broad perspective for their ideas and concepts, choosing different design solutions and it is rather easy to move out of the box. However, any ideas made about the layout, graphic elements and animations have to pursue the goal of creating user-friendly, fast and clear interface which could preferably have the great support of attractive and stylish looks.

tubikstudio designer illustration


Extensive discussions appear and follow the topic — and certainly, they will move on to the future — about the weather apps design and finding the best solution which could be universal for everyone. Nevertheless, every day millions of users, having different tastes and preferences, different favorite styles and characters, different feelings of what feels comfortable and looks nice for them in particular, use this sort of simple apps as a part of their routine. The more variants of looks and features will be designed, the wider range of diverse options that endless target audience will get to find the one which fits their particular needs and wishes. And that is, obviously, a user-friendly way.


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

Tubik Studio icons set

Icons in UI design. Great Power of Small Details

In one of our previous articles called  Iconic Simplicity. The Vital Role of Icons we have shared our vision on the importance and features of icons in efficient UI/UX design. Our designers always work thoroughly on icons for every project we take over. Going further, Tubik Studio designer Valentyn Khenkin created special UI concepts to present icons at work in different applications. The presentations are created on the basis of original icons packs made by Tubik Studio designer Arthur Avakyan.


Multimedia Icons Presentation was already published on Behance and featured at App Design Served. It was followed by Valentine’s Day Icons Presentation which presented one more UI concept showing other type of environment for design. So, today we decided to tell a bit more on those presentations here.



Multimedia Icons Presentation


The first UI concept was created on the basis of Multimedia Icons Set by Arthur Avakyan

icons tubik studio


To present some items from the set in practice, Valentyn Khenkin designed the UI concept of Media Player App. The screens of the player designed for the concept demonstrate the icons with well-thought out placement and functionality presented via their symbolic meaning and simple easily recognizable forms.

Tubik Studio icons presentation


tubik studio ui design


On the screens you can see the icons from the presented set featuring all the necessary functions (Play/Pause, Back/Forward, Repeat, Mute etc.). On the feed screen three more functions were presented with icons, which provide not only clear metaphors and symbols, but also the particular style features and bright visual details.  The aim of both designers was to create the icons which do not overload the general layout of the screens, look harmonic with the background and create simple and clear user interface, easy to use in any environment. Therefore, all the icons were carefully drawn and shaped.

Tubik Studio icons set


So, this concept shows the important part of such small details as icons in creating efficient UI design that feels integral and stylish through all the app.


tubik studio animation icons


Valentine’s Day Icons Presentation


One more set of icons was specially created by Arthur Avakyan for Valentines Day theme.

tubik studio st valentine icons


Designing icons for the set, the designer took much time and effort to make them clear, recognizable and meaningful in the general layout of user interface. Based on this, Valentyn Khenkin worked out one more UI concept demonstrating broad functionality of this set even beyond the seasonal topic of St. Valentine’s Day celebration.

Tubik Studio icons presentation


To demonstrate the icons in action, the designer created the concept of Dating App. It is designed and thought-out as a sort of social network for dating and easy communication. Here you can see the Profile screen, the Calendar screen and Feed screen. The Profile screen shows user’s data and statistics as well as featuring the use of icons of the presented set in the tapbar. The icons represent main steps of navigation and at the same time become a harmonic addition to the general visual representation of the screen.


tubik studio dating app concept


The Calendar screen shows the interactive calendar of the app where the vector icons are represented as symbols of the gifts and actions planned for the particular date. Also, the small icon on the avatar becomes a little symbol of marking a person you are dating with. So, the icons become the efficient tool of visualization of navigational functions as well as marking specific data. Moreover, they play the role of visual elements not only functional, but also decorating the screens, making them lively, cute and stylish. As in the previous case, all the shapes, proportions and curves were accomplished with great attention for the mentioned aims.

Tubik Studio icons set


So, the second presentation also shows the great potential and high level of functionality of such small elements as icons.

Tubik Studio Dribbble shot


UI Kits


Working on different projects in Tubik Studio, our designers prepare UI Kits — the sets of user interface elements that can be integrated in various web or app design. Now we are also working on ready-made UI Kits universal for different projects which will be presented for designers  in  our online shop Tubik Lab. Working on the concepts for icons presentations described here, the designer also prepared the UI Kits.

Tubik Studio UI Kit


Tubik Studio UI Kit


The work on icons and concepts continues to present even more options and high creative potential of icons as vital elements of user-friendly interface and successful interaction providing positive user experience. Our designers have already created and presented several packs of icons, including the ones shown here, on DribbbleBehance, Creative Market, Envato as well as our own online shop for designers Tubik Lab.  Hopefully, our work will be helpful for other designers and perhaps will save some time and effort for those who are in search of necessary icons for their projects.


Now we are also preparing the articles which will tell you more about the full path of icons design, from the rough sketches to polished digitized versions. Don’t miss them in our next posts.

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

Tubik Studio icon design

Iconic Simplicity. The Vital Role of Icons

They are small but vital for the efficiency rate of any application or website. They look simple but take loads of time and effort to feel that way. They follow you on any step of interaction with a product although users rarely – say never – think how important they are for the success and speed of this interaction. They have the power to do anything with a user: help, support, engage, encourage, clarify, simplify or vise versa confuse, annoy, disorient and so on and so forth. They are iconic in effective user interface. They are icons.


The vital role of icons is not a secret for web and app designers now, it is mentioned in numerous articles and books on design, presented in workshops and webinars, shown in numerous case studies. We decided to add our two cents to this bulk of knowledge about icons, as this theme seems really constant and demanded.


The Essence of an Icon


Basically, app or desktop icon is an image which having a kind of symbolic and metaphoric potential becomes the element of navigation in the process of interaction. In deeper explanation, icon is the visual symbol representing some action, thing, person, real or virtual.


In many cases icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage therefore making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.


Being so multifunctional and comprehensive, icons of the apps and websites can be:

    • interactive, i.e. directly representing buttons, controls and any other elements of interaction
    • clarifying, i.e. visually explaining some functions, categories, actions, not being the direct element of interaction themselves
    • decorating and entertaining, i.e. having lower functionality and higher aesthetic potential, providing decorative addition to general style, for example featuring some seasonal celebrations etc.

tubik studio ui concept

The example of interactive icons: Veggie App Concept by Polina Makarevych


tubik studio product design

The example of clarifying icons: Passfold project by Tamara

easter icons tubik studio

The example of decorative icons: Easter and spring themed icons by Arthur Avakyan


The Features of Icons


Some basic features of efficient icons include being:

  • meaningful

As it has been mentioned above, icon is graphic element which has high symbolic potential. It means that creating the icon, first of all a designer should define what is its role and meaning as the separate element and as the part of general layout. Talking about more earthy things for a kind of metaphor, the best chefs always say that everything that is 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.


  • clear

Behind the clarity here we mean making the icon understandable. That is one more feature supporting icon’s being meaningful. In fact, what it the point of being meaningful if nobody except the creator understands this meaning? For the icon, lack of clarity is the death knell. Instead of speeding up and easing the process of interaction, such icon will confuse the user and bring out poor user experience.


  • simple

Simplicity of icons is still a kind of debatable issue. Actually, designers agree that icons should be simple but still argue about where is the level of simplicity needed. Anyway, here in the studio we support the idea that any icon should be as simple as it is required for its particular aim and function and the designer working on it should stand on the foundation of following the existing guides for icons design and omitting any unnecessary details that can overload the image. However, at the same time it’s important to remember about the general style and other elements of visual representation of the whole app or website concept. Successful consideration and combination of these factors will result in efficient icons.


tubik studio st valentine icons

Valentine’s Day icon set by Arthur Avakyan


  • recognizable and unique

To make the icon recognizable, the designer needs to become a researcher before starting with the task. Taking the time for exploration and analysis of the existing icons and thorough investigation of the competition can create the significant basis of making the icon easily remembered and catchy. If a designer finds the way to make the icon recognizable not losing its main meaning, it will become the first step of attracting the user in conditions of active competition as well as will provide positive feature for user experience as the user won’t be annoyed losing the time on looking for the necessary icons which aren’t recognizable at once.
The feature of uniqueness mentioned here doesn’t mean creation of absolutely unique stuff every time you need the icon, but thinking on some even slight flavour of uniqueness via small changes or details can make the icon more recognizable both in the AppStore or PlayMarket and on the screen of user’s device.


  • aesthetic and attractive

For sure, remembering that icon is a visual representation of the meaning, it’s important to take the graphic and aesthetic side of the issues into account. Visual appeal is the first step to encourage the user get into the meaning you represent behind the icon and at the same time it is the important element making the product regarded as attractive, beautiful and stylish. Following the principles of coloristics, proportions and other features making the result of graphic design successful is always very helpful in creation of great appearance for the icon meaning.

icon logo tubik studio

Saily ghost icon version by Arthur Avakyan


  • flexible

As nowadays more and more various sizes and resolutions get into the game, flexibility and scalability is included into the list of key features making icons efficient. Good icon should be seen, readable and recognizable in different sizes and environments therefore it is one more process that should be thoroughly considered while creating icons.


  • consistent

Icons as well as the other elements of layout have to feel consistent as they often become the most powerful conventions and signifiers. For instance, if there are several icons in the app – as it usually happens – they should follow the same style, concept and correspond to the general design solution for the app, supporting the harmony of visual representation and interaction instead of breaking it with non-consistent elements.

media icons tubik studio

IT Office Icons Set by Polina Makarevych


Creating icons for various design projects in Tubik Studio, we try to keep the principles mentioned above carefully combining them with every piece of unique design we work on. Except creating handcrafted icons for projects, we have also presented several packs of icons on Dribbble, Behance, Creative Market, Envato as well as our own online shop for designers Tubik Lab. There you can find the sets of seasonal icons such as the ones devoted to St.Valentine’s and Easter theme, and more universal ones such as Office and Multimedia icon sets.


tubik studio animation icons

Multimedia Icons Presentation by Valentyn Khenkin


In our next posts we are going to tell you about the process of designing icons in more detail, from the rough sketching to polishing digitized version.

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

Welcome to Tubik Lab

Tubik Studio design

Tubik Lab: the way from concept to real service

Here in our blog we have already told you about interesting projects we accomplished for our customers. But today’s post is about the long-term in-house project we have done in Tubik Studio with a view to creating an additional pitch for designers to present and sell their works.


Being a design studio that is always trying to improve and develop, we decided to set tighter connection with designers, buyers and users making this process as broad as possible. The great way to try it was to get more comprehensive experience and create something for ourselves that we would be able to design, use, analyze, test and improve from the very start. The first step on this path was work on design for our site and blog to share more with customers, users and other designers. However, that was not the only step we dream to make.


After some period of hard, inspirational and active teamwork on a wide variety of projects, Tubik Studio CEO Sergey Valiukh and CFO Valentyn Khenkin started thinking about one more important project to be called Tubik Lab. It was considered as the original product by Tubik Studio to create a platform for presentation, selling and buying design product by the studio designers. The more projects and concepts Tubik Studio designers created, the more often the idea of Tubik Lab service was discussed and analyzed. It didn’t take a long time to decide on practical realization of this service.


Tubik LAb by Tubik Studio


The basic idea of Tubik Lab was to make the place for promotion and purchasing in-house design products. Designers in the studio work not only on real projects but also create a lot of concepts and graphic elements like icons or interface animation. They actively present them on specialized design platforms such as Dribbble and Behance. These platforms are great places for creating portfolios and getting in touch with potential customers. However, if somebody wants to buy, let’s say, icons or a UI kit, it could be more convenient to do it on the sites which are created and tested specially for these aims. It can make the process of buying and selling much faster and exclude unnecessary steps.


It should be also mentioned that the project of Tubik Lab have never had any aim to create a sort of unique product in the field and compete with well-established, effective and promoted platforms such as Envato, Creative Market or UI8. Moreover, being aware of all their benefits and inspired by their efficiency, Tubik Studio has also got the shops on Creative Market and Envato. The idea behind Tubik Lab was to try the challenge of building up the original and simple product first of all for special studio needs and goals, including the prospects of creating more functionality in the future. Studio managers wanted to try creating this kind of platform so that the designers could have additional possibilities to present studio products while the buyers could get everything they need easily. In addition, the original service would give the studio new experience in comprehensive design and support as well as the chance of testing the service in all the stages.




Therefore, the idea was formed, the traditional studio brainstorm sessions gave loads of details to keep in mind and the process was launched. The designer, who took over most work on this in-studio project, was Valentyn Khenkin.


Tubik Studio designer

Tubik Studio designer and CFO Valentyn Khenkin


He carried out the careful research of similar services as well as market needs of the target audience. Afterwards, the intensive and rigorous process of design started. Now it has already crossed its finish line. You can observe the results in Valentyn’s shots on Dribbble and Behance presenting the service. So, it is coming very soon. It is targeted for studio designers’ work first of all, but in the future it will also be ready to support any designers who would like to present their works to buyers in such way.


Tubik Lab by Tubik Studio


Tubik Lab by Tubik Studio


To provide general description, Tubik Lab is created as a multipurpose platform for designers of any kind and buyers who are interested in acquiring design concepts or ready-made elements. Everything is designed with the main aim: to make it easy, fast and convenient place where designers and buyers could achieve their goals. Here designers will be able to present and sell UI/UX kits, icons, mock-ups, templates, concepts and any other product of design activity. And buyers will get clear product descriptions, pleasantly-looking catalogs and simple way from product to payment. The features defined as the most important from the earliest stages of design are high usability, utility and simplicity.


Tubik Studio


The sign-up process is simple as basically it is accomplished in one click through any of mostly used social services like Facebook, Twitter or Google+. After registration, the user will be also able to set the e-mail in account settings so that the notifications could be sent to update the user about the news of the service.


To guide designers and customers, simple horizontal menu is used to show basic categories of the products. As graphic products are the basis for the site functionality, they are made the center of attention. That means that site uses light and neutral background to make presentation of items preview convenient and the customers are never distracted by any other non-functional elements of the layout.


The product page was also designed to be clear and concise. It includes all the information needed for the customer about the product being viewed.


Tubik Studio


The most important feature the designer worked on thoroughly was to make fast and easy process of buying the product. He managed to simplify the process to three-four clicks without any distracting details or steps. All the functional elements are carefully thought-out and tested to create pleasant user experience for buyers.


Tubik Studio


Now the smallest details and features are being polished and tested, so Tubik Studio is going to launch the service in work very soon.


Tubik Studio


Work on this in-studio project gave us valuable experience of feeling all the sides of the project in practice being both creators of the service and designers who can use the service. And at the same time, knowing the specific features of the design market, we could test it as potential buyers using the service to purchase some design stuff like UI and UX kits, templates, icons and others. So, we hope that in the future our idea, now getting its real life, will be interesting and useful not only for studio designers but also everybody who cares and wants to present their work in design sphere.


Welcome to see other works by Valentyn Khenkin on Dribbble and Behance

Welcome to see works by Tubik Studio on Dribbble and Behance

Animation case study by Tubik Studio

Case Study: Animation. Designing Motion

This post continues our set of case studies. In addition to previous cases on designing logo and working out user experience and user interface, we would like to present the one on animation design.


Nowadays animation has a lot of various functions from highly practical to purely decorative ones. The animation we are analyzing this time is thematically decorative. This is the piece of motion graphics developed by our animation guru Kirill as a rebound on Easter and spring icons created by Arthur Avakyan.


Animation by Tubik Studio

Animation based on Easter icons


Easter icons

The set of Easter and spring icons by Arthur Avakyan


As well as the icons, the animation piece is the product uniquely created by Tubik Studio at all the stages.


tubik studio designers brainstorm
Kirill and Arthur Avakyan working together on animation of original images



Creating a piece of animation applying specified tools with the aim of promoting the icons set.



Adobe Illustrator, Adobe After Effects



The idea of the animated shot was based on the set of Easter icons by Arthur Avakyan.


Easter icons


Inspired by their style, the designer for Tubik Studio Kirill decided to choose two of them as the material for a motion design sample. The work had not only decorative and entertaining, but also promotional aims as it was going to become the animated versions to present the icons as the product for buyers. Somehow, it was not the usual work as the designer wanted to combine the idea with practising the Shape tool of Adobe After Effects.


It should be mentioned that earlier the animations for the studio works were created in Adobe After Effects through the traditional way of splitting up the image into separate elements and than manipulating them in After Effects. Despite a lot of positive features, this way of processing images for motion graphics has an important practical disadvantage for complex projects: the elements, which are being manipulated, are raster and therefore they are badly sensitive to changes of the shape and/or size.


Splitiing the lements for animation

Splitting the original images on raster elements for manipulation in Adobe After Effects


So, this shot became a kind of an experiment because the designer made it the first serious work using the After Effects tool called Shape. This tool is highly functional and allows to change shapes and transform images and elements in a smooth and fine way with the opportunities of sophisticated adjustment.

tubik studio motion designer

Kirill concentrated on creating animation


Animation in process


Animation in process


Animation in process

Processing the images to create the animated shot


One more essential thing about Shape is that it makes possible to create a dynamic shadow which is natural, lively and corresponds to the movements of the objects. This can be seen in the animation presented. This time work with a dynamic shadow was much simpler due to the Shape tool. It provides designers with higher level of functional abilities for creating more complicated and interesting motion graphic works.


Dynamic shadow in animation

Creating dynamic shadow makes animation lively


Easter piece of animation was the first work fully based on After Effects Shape and this shot gave the designer a chance to feel all its advantages. Since then, Kirill has been actively applying Shape working with animation for interfaces which nowadays is included into the list of top practically useful motion graphics.


Major benefits of the Shape tool to be mentioned are the following:

— it gives more additional features than PNG
— it provides automatic processing and adjustment of changes during manipulations with an image
— it gives significantly smaller size of the final file and that feature makes it highly attractive for work with customers while sending the files
— it creates one and the single file without tying it up to the elements as in PNG.


Processing images for motion design is always creative and full of thorough work on details and nuances. Thus, tools and features providing a motion designer with opportunities to process images faster not losing in efficiency are always highly appreciated by designers. So, they obviously have to be the subject of consideration for developers of designing software. And no doubt, that is all fair to say about the Shape tool of After Effects.


Welcome to see other works by Kirill on Dribbble

Welcome to see other works by Arthur Avakyan on Dribbble and Behance

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

Welcome to see the Easter Icons Pack by Tubik Studio on Creative Market and Envato