Tag Archives: case study

andre landscape tubik studio logo design

Case Study: Andre. Rebranding Logo.

Branding is never about just visual perception or verbal message. Branding is about the whole image people get hearing the name of a company or seeing its brand identity signs. So, designing the signs and symbols which make a brand recognizable and transferring the appropriate message is a job with great responsibility. Still, there is one more stage of the process when this sort of responsibility get another shade. It happens at the point of branding redesign.


We have already published case studies with the stories of creating logos and brand identity concepts at the early stages of their business path. However, this time the story will have another flavor as we are presenting you the case of logo redesign for a company that is already recognized and actively operating on the market. The task was to create new brand identity not breaking already gained links and associations. The designer assigned for this task was Arthur Avakyan whom you probably remember from cases of Ribbet, Passfold, Tubik, Saily and SwiftyBeaver logos.


andre logo design by tubik



Redesign of a logo for a commercial and holistic landscape firm Andre operating in landscape maintenance, tree care and design.



Pencil sketching, Wacom Intuous pen tablet, Adobe Illustrator, Adobe Photoshop




First of all it was important for the designer to study the conditions and philosophy of existing logo functionality, details about company activities and business goals and customer’s wishes about the redesign process. It should be mentioned that redesign for existing companies and products can have different levels of breakaway from the existing versions: some companies decide upon fully new design which has nothing in common with the current branding, while others keep the track of changes carefully and gradually, with minor alterations eliminating the risk of losing recognizability on the market.


The second approach was taken as a basis in this particular story, because Andre is a company that has already won its audience on the market. That means any design change should be done with respect to the company’s history and philosophy as well as brand image grown through the years. Therefore, new design had to take its roots from the existing branding, but offer some refreshment and add some trend.


andre logo design case study


Certainly, to find the sign representing the brand, the designer needs to know as much as possible about the brand, its business goals and statement. Andre is a medium-size company based in the USA and providing all sorts of services linked to landscape care and design of any complexity. The company is family-owned so its name origins from the last name of the family. The customers wanted a new logo to be quite classic, memorable, enduring and setting the strong association with land care.  So, it was important initially to provide the visual sign that will instantly inform observers about the nature of the business and create positive vibes via harmonic combination of shapes and colors.


After the market research and getting deep into the requirements and background of the company, the designer worked over the first series of sketches and offered the first version for redesign. It was based on the round shape and featured green leaves as the central element of composition. The designer also selected the corresponding version for the name lettering so that it looked readable and harmonic in combination with the image, supporting it but not overloading general visual presentation. Combination of several shades of green with light blue set the image connected to key concepts of business activities: nature, landscape, plants, trees, sky. The designer applied smooth and rounded lines of different stroke weight and provided the variants filled with color as well as glyph one.


andre logo design Tubik


Another concept offered more linear and geometric variant also featuring the leaf motif and using a shape inside reflecting the form of capital A letter.


Andre logo design Tubik


Although the offered style was appropriate, the customers insisted on applying the mascot in the logo image. The choice was made in favor of a bird and the designer offered the graphic option featuring the bird as a logo image. It also was applying the form of the leaf in the image used separately, but in combination with lettering the leaf was placed closer to the letters.


Andre logo design Tubik


One variant of a logo featuring the bird mascot used the image with the shorter beak and an eye featuring the mimic expression of smile.


andre logo design Tubik


The idea of “smiling” positive expression was also tried in the variant in which the bird was inscribed into the circle. The beak directed upwards moved out of the circle setting the feeling of progressive flight, while the wing featured the form and visual marks of the leaf.


Andre logo design Tubik


The general concept of applying the bird in the logo was set and agreed upon, but the customer and the designer decided on trying another iteration experimenting on simplification of the bird’s silhouette to make the logo not only attractive and meaningful, but also clearly visible and legible in any size. This stage of creative search resulted in a new shape combining the visual concept of a bird and of a leaf in one image.


Andre logo birds Tubik studio


The final choice was made in this direction, which efficiently presented the mascot in clear simple forms, preserved color combination associated with the nature of the offered services and vibes of green and natural background.


Andre logo design final by Tubik
This case of logo design has proved once again that user research, market research, thorough attention to the customer’s requirements and inspired creative search together make a great basis for efficient, informative and attractive branding. Don’t miss the next case which will show the application of the described branding solutions on diverse set of branded items.


Andre logo design final Tubik

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

Welcome to see designs by Tubik Studio on Dribbble and Behance

tubikstudio website design ui

Tubik Monthly Review. May.

The summer has come full of bright colors and moments of life. Traditionally, we start it reviewing and analysing what happened during the last month. So, let’s look together what May has brought to studio life.


The month brought out new shots published on Dribbble by studio designers: there were presented diverse design concepts of websites and landing pages, mobile applications, interface animation and character animation, lettering, logo and branding design. Follow the links if you are interested to see all the details full-size.


tubik studio landing page toys

Henderson — Handmade Toys by Vladyslav Taran


contact list design concept tubik studio

Contact List Concept by Eugene Cameel


tubik studio ui design dark

Dark Side of UI Design by Marina Yalanska


online magazine design tubik studio

Daily Bugle Online Magazine by Dima Panchenko


tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov



SwiftyBeaver. UI Design for Mac App by Marina Yalanska


landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko


tubik studio logo design case study

Case Study: SwiftyBeaver Logo by Marina Yalanska


lettering tubik studio design

Rapture Lettering by Denys Boldyriev


tubik studio application recipes and cooking

GIF Animation for Recipes and Cooking by Sergey Valiukh


monster intro animation tubik studio

Epic Monster Intro Animation by Kirill


Contact List Concept Scrolls Tubik

Contact List Concept Scrolls by Eugene Cameel


We have published some new articles about general and specific design issues as well as practical case studies here in Tubik Blog. In case you missed any of them, here’s the list of topics considered in May:


  • Dark Side of UI. Benefits of Dark Background. The article continues the topic of effective color choices in user interface design. This time it is devoted to the benefits and pitfalls of dark background in UI design solutions for websites and mobile applications.
  • SwiftyBeaver. UX & UI Design for a Mac Application. Fresh case study on UX and UI design process. Detailed description of creating user interface for SwiftyBeaver, a Mac application presenting the first integrated logging platform for Apple’s Swift programming language.
  • Case Study: SwiftyBeaver. Designing Logo. New case study on logo design continuing the story of comprehensive design process for SwiftyBeaver, the integrated logging platform for Apple’s Swift programming language. Packed with graphics demonstrating various creative stages.
  • Landing Page. Direct Flight to High Conversion. The article is devoted to the basics of landing pages design. Considers the issues of conversion, CTA, USP, copy, visuals and other elements of efficient landing. Packed with examples by studio designers and recommended reading.


swiftybeaver article tubik studio


This month we also actively shared our ideas and experience answering questions about design issues on Quora. Here are the most popular ones which got most readers’ attention in May and some of them got featured in Quora Digest:


Why are illustrations important for UX design?

— Why hasn’t Facebook updated their UI to a more modern design?

What is the difference between UI and wireframe?

— In website design, what are the pros and cons of dark text over light background vs light text over dark background, and is one better than the other?


Tubik studio on Quora

May was full of unforgettable moments of brainstorming, collaboration, creativity and friendship which we, as usual, actively shared with our followers in studio Instagram page.


tubik studio designers instagram


Tubik studio design team


Getting closer to global design community and all those who have keen  interest in this field, we shared our ideas and experience via Medium and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.


So, welcome to join us wherever it’s convenient for you. Bright and positive summer to everyone, we are ready for a new month, new projects, ideas and meetings, fresh design concepts and wise tips from experts. Stay tuned!

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

SwiftyBeaver logo case study tubik studio

Case Study: SwiftyBeaver. Designing Logo.

In our previous case study we told you the story of UI and UX design for SwiftyBeaver describing the design process in detail and supporting it with the visual variants of different stages. Today we want to continue with unveiling logo design process.


swiftybeaver logo design tubik studio




Design of a logo for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.




Pencil sketching, Adobe Illustrator, Adobe After Effects




As we mentioned in case study on UI and UX design, SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language. It is aiming at developers as its basic target audience. The product supports all the devices belonging to Apple device family.


Design practice of previous projects accomplished by studio designers, such as Saily App or Passfold, proved that tight interconnection of design solutions on branding and user interface for the same product features higher level of efficiency. Both mentioned cases showed that in brand positioning and promotion, using the concept of strong corporate style and applying the elements of branding such as logo, lettering and illustrations consistently was the effective strategy. It is also important to remember that user interface of an application or a website is not just a sort of static or moving images — it is the field of active interaction. Interaction with the product via the interface enhances much higher memorability potential of brand elements as well as general stylistic concept. Following this approach for SwiftyBeaver project, user interface designer Ludmila Shevchenko and logo designer Arthur Avakyan worked in tight collaboration to get the design solutions that will effectively support each other.


Naturally, the initial stage of general concept search tried the variants of mascot. As the name of the product includes “Beaver”, in the first sketching set the designer presented variants of this animal as a key mascot. There was also a variant of original presentation of “S” and “B” as two basic letters of the product name. In addition, this first set included a bit more abstract version based on the set of lines featuring the movement of beaver’s tail.


swiftybeaver mascot tubik studio design

swiftybeaver logo design tubik studio


The variant based on lines was accepted as the basic concept practically at once. Although the mascots can be a powerful tool of branding, this time the strategy was different. The target audience as well as the nature of the product is quite specific so more abstract version of the logo could show more flexibility in its expressive potential. Founder and CEO of SwiftyBeaver Sebastian Kreutzberger was very attentive to details and open for discussions. He decided upon the variant with stripes because it made a logo meaningful as logs the app is based on like the logs of trees are stripes so it presented a strong visual metaphor. Additionally, he liked the colored stripes of famous 70s and 80s logos so he wanted to have a logo that would look vintage and at the same time super modern. So, this direction was developed further.


swiftybeaver logo sketches tubikstudio design


Moreover, this version got closer to the general visual design of user interface for the application. As it was described in the previous case study, UI design widely used color lines as markers for categories of log entries and the chosen concept of logo provided strong connection of UI design and branding. Therefore, the next stage of design process of elaborate and thorough work on the slightest nuances. Different versions of curves and length of the lines were tried and discussed in search of the most harmonic variant.


swiftybeaver logo design by tubik studio


swiftybeaver logo versions tubik studio design


The color palette also echoed the colors chosen for UI design and supported them with smooth gradients. So, user interface of the platform, landing page and logo were cojoint via colored elements.

SwiftyBeaver ui screens tubikstudio


tubikstudio swiftybeaver landing


The original version of logo was colorful, but monocromatic version was also accomplished and tested to provide branding solutions with high level of flexibility.


SwiftyBeaver logo final tubikstudio


SwiftyBeaver logo mono tubik studio


Another issue to consider was the choice of font for company name lettering featured with logo image. Several options that could work effectively with the logo and correspond with the nature and general design of the product were offered and discussed. The set of potential variants included diverse variants from strict and straight to smooth and curvy. Finally, the font was chosen to provide a good combination with the fonts of the app interface. The client chose that particular font because found it appropriately curved and perfectly matching the curves in the logo.


swiftybeaver logo fonts tubikstudio


The approved variant of logo image and lettering was also supplied with the design of animated version. It was accomplished with the help of Tubik Studio motion designer Kirill. The designer and the client took considerable amount of time and discussion optimizing the physics of the ball to look and feel as natural as possible.


swiftybeaver animated logo tubik studio design


And one more important task to move on with was design of an app icon. To prove its efficiency, designers tested it on different devices and in different sizes to ensure that it didn’t lose its recognizability or didn’t get dirty in smaller size.


swiftybeaver icon variants tubik studio


Logo design for SwiftyBeaver was one more case proving that there are no unimportant details in branding. It was one more project full of elaborate sketching, thorough work on the slightest hues and gradients, numerous variants with different length, width and placement of the elements to make a catchy, harmonic and stylish logo that will represent the nature of its product.

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

Welcome to see designs by Tubik Studio on Dribbble and Behance

Tubik Studio UI UX designer

SwiftyBeaver. UX & UI Design for a Mac Application.

Today we would like to present you a new case study on UX and UI design. This time it is a full design path for SwiftyBeaver project.


SwiftyBeaver ui by Tubik studio case study




Design of user interface for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.




Sketch, Adobe Illustrator, Adobe After Effects.




SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language, also supporting Objective-C. First of all, it is aiming at developers as its basic target audience. The product supports all the devices belonging to Apple device family. User interface designer had to consider basic and advanced needs of people involved in developing process to make it easier, faster and more productive. The assignment to work over design solutions was given to one of Tubik Studio UI/UX designers Ludmila Shevchenko who says that the project was really a memorable task totally different from everything she had accomplished before. To get more detailed description of the product and its functionality, welcome to read its presentation on Medium. And now let’s look a bit closer at some steps of user interface design for the product.


Tubik Studio UI UX designer


In software engineering logging should be mentioned among key factors of developers’ routine. It is an integral part of development process helping developers to understand flow, logic and state of an application. Log entries inform them about the state of the application as well as the issues of its actual operating. Therefore, user interface for this sort of product needs to support high level of visibility for changes, intuitive navigation and presentation of big data bulks with high level of readability and visual marking of key details. The basic objective was to design a platform which will be easy to use, informative, supporting broad functionality for professionals and seamlessly integrated with any Apple device.


At UX design stage the designer worked over layout and navigation design solutions concentrated around three basic issues:
— the way log entries should be shown in the stream, as a general feed or separated by filters
— the method log entries or the part of the stream history will be saved
— the channels of creating code or working over the existing code.


SwiftyBeaver UX by Tubik Studio


Obviously, this part of design process, based on specific knowledge about the field, needed tons of discussions and tight collaboration with a client, the founder and CEO of SwiftyBeaver Sebastian Kreutzberger. Being a developer himself, he brought out the idea which was deeply user-centered and problem-solving in terms of application for developing process, thus his detailed explanations of the operations were helpful for setting convenient and efficient layout, transitions and navigation of the interface at UX wireframing stage. Thorough analysis of the target audience and unique selling points of the product allowed paying attention to the practical aspects of the product’s functionality.


UI design was concentrated around two major challenges: to present data efficiently in a way that will be quite traditional for developers but at the same time to make it a bit more engaging and stylish via non-distracting design elements and animation. Therefore, the design concept was based using dark background common for coding platforms and software as well as bright color accents and gradients to add some style and make important accents noticeable.


So, visual presentation was not the only thing about colored elements. Using common color marking recognizable for developers, the platform supported easy navigation and visibility of key elements. Colors marked types of logging entries both in the names of categories and the stream feed. The designer offered four UI concepts on this basis, with different fonts and variants of visual marking entries and errors.


SwiftyBeaver UI concepts by Tubik Studio


Having agreed upon the general stylistic concept with the customer, the designer moved on in course of layout simplification. The interface of the product is data-driven therefore it has to exclude any sort of distraction and avoid repetitive elements to prevent the interface from being cluttered. So, it was decided to exclude the copy featuring the type of log entry in the fields of messages. Only color marker was left becoming the central element of the connection between log entry and the categories whose names were provided in the upper part of the screen.


The provided set of screens featured different concepts for visual presentation of color markers and entries saved by the user. Understanding the importance of navigability for the interface of such high practical value and information intensity, the designer tried to use the maximum of conventions power. The markers using the colors easily decodable by developers were also supported by the star sign as a popular and clear marker of saving the object to favorites or elements needing further attention later.


Among all the versions, the final decision was made upon the most minimalistic one. It used colored lines along the message body and small yellow star for saved entries. All the colored elements as well as the background color and shades of hovered elements were carefully tested to get the high level of visibility and pleasant-looking efficient contrast.


SwiftyBeaver ui screens tubikstudio


One more key element of design that needed deep attention was a choice of fonts. Actually, in design process around any interface the choice of an appropriate font has a great influence on general usability and presentation of the product. However, in such a specific interface as SwiftyBeaver, which is highly concentrated on textual material, the weight of font choice got even bigger. Moreover, the product is not rich in graphics materials such as icons or illustrations, so font becomes a major element of visual design for the product. The designer took her time to test various solutions and select the font which would be both beautiful and easily readable for users.


The background was accomplished in different shades of very dark blue which appeared to be more harmonic and smooth in creating pleasant contrast than black color. To make the entries text more readable, the background behind them is changing slightly in shades one by one: it marks the limits of every entry but without unnecessary distraction for the user. Hovered elements were highlighted while the others were dimmed. Slight gradients made the color markers look more stylish.


SwiftyBeaver Style Guide by Tubik Studio


The aspect of entry length also was an object of deep consideration. There was such a way to go: the stream could show the fields of fixed height and if the entry was longer it could be hidden showing only a part of the message and opening full view on click. However, after research and testing this solution wasn’t found effective. It was decided to show the full text of each entry as it was more user-centered and excluded additional operations and clicks. Therefore, the designer paid deeper attention to the slightest aspects of kerning and spacing of the lines and work with efficient copy placement.


SwiftyBeaver UI screens Tubik Studio


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 accent again was made around the colored accents echoing the design solutions of the application interface layout.


tubikstudio swiftybeaver landing


In addition, Ludmila accomplished graphic design task which resulted in illustrations presenting the features and benefits of the product.


SwiftyBeaver Illustration by Tubik Studio


Another design task accomplished by Tubik Studio for SwiftyBeaver was work on logo design for the app.


swiftybeaver logo design


We will tell about it in our next case study, coming very soon. Don’t miss!

Welcome to see designs by Ludmila Shevchenko on Dribbble and Behance

Welcome to see designs by Tubik Studio on Dribbble and Behance

Ribbet ui by Tubik studio

FAQ Design Platform.The Role of Branding in UI Design

Today’s issue of our FAQ Design Platform in Tubik Blog will concentrate on issues along the role of some visual  elements of branding for creating efficient and high-quality user interface design. The answer is based on the thoughts we have provided for the question on Quora which you are always very welcome to read and where we are happy to share our ideas, knowledge and experience.

Tubik Studio on Quora


So, the original Quora question we are answering today was the following.


Why is branding essential in user interface?


Let’s start with clear definitions of the core term here to specify what will be meant behind it in the answer. So, branding in general is the set of marketing and psychological techniques and steps aiming at promotion of a product, service, persona etc. first of all via setting a brand.


Brand in this case means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market. This image can be created in tons of diverse ways which can be visual, verbal, touchable etc.


In terms of graphic design assets, branding can be realized via the set of visual elements, the most widely used of which are:

— logo;

— brand colors;

— typography: lettering as a part of the logo or full representation of the logo (wordmark); types and fonts used via digital as well as physical products representing the brand;

— graphic elements such as, for example, illustrations, design of letterheads, business cards and other print assets;

— templates for corporate presentations etc.


Ribbet interface design Tubik Studio

Interface for Ribbet project featuring logo lettering


In the discussed question covering the aspect of branding in UI design, branding supposedly means first of all a set of visual elements defining brand style which can be applied in the interfaces such as logo, typography, brand colors  and the like. All of them together are a powerful tool of creating visual recognizability of the product as well as its style. Being based on the analysis of target audience and marketing/ customer research, branding in this sense plays the vital role on product promotion as visual perception is very fast and easy for most people, much easier than reading the text and much more memorable than listening to speech.


Path 1: From branding to UI


Answering on the basis of practical experience of work in UI/UX projects accomplished by studio team, we could confidently say that branding IS essential in user interface, especially in case if you want to use the interface as the additional flow of user attraction as well as the way to increase brand awareness. If you take the time on proper marketing and user research, define your target audience, analyse competition and on the basis of all that data have branding elements, first of all logo, created by a professional designer before launching the process of UI design, your product immediately gets higher chances of getting recognizable faster and easier.


The reason is simple: UI designer working on the interface, its color palette, shapes, types and fonts, illustrations and icons, will consider design solutions appropriate and corresponding to the general branding concept of the product that will make them mutually supporting each other. It provides more natural and harmonic feeling of the brand in general and the particular interface as the integral part of this brand.


Providing you with practical examples giving real experience, we could mention case studies by Tubik Studio designers on branding and UI design process for the Saily App and Passfold. Working on branding style and then UI solutions for e-commerce and mobile application, studio designers understood how beneficial strong mutual support between branding and general interface design can be for the product and its further promotion. Practice proved that this strategy was completely right. Welcome to run through the details and graphics of design process following the links below:

passfold logo tubikstudio

Case Study: Passfold. Designing Logo


PassFold UI by Tubik Studio

Case Study: Passfold. Designing UI


Tubik Studio designer

Case Study: Saily. Designing Logo


Tubik Studio UI designer
Case Study: Saily App. Designing UI


Both cases have proved that in brand positioning and promotion, using the concept of strong corporate style and applying the elements of branding such as logo, lettering and illustrations consistently was the effective strategy. It is important to remember that user interface of an application or a website is not just a sort of static or moving images — it is the field of active interaction. Interaction with the product via the interface enhances much higher memorability potential of brand elements as well as general stylistic concept.


Path 2: From UI to branding


One more important question to ask here on the basis of everything above mentioned is the following: is it possible to create the efficient UI design without particular branding elements designed beforehand?  The answer is certainly positive. Yes, it’s possible and there are lots of examples. However, in this case UI will not work on brand recognizability as effectively as if with branding elements included. These two different powers of attracting and engaging customers will somehow work separately, not supporting each other.


However, if UI is really amazing and product is useful, in case it gets popular there can be a reverse process: UI itself becomes the strong element of branding due to its popularity and determines all the further solutions on branding design. For example, it happens that customers cannot afford design of branding and UI design for a product simultaneously, let’s say, when it is a startup with a limited budgeting. Certainly, they will start with UI design and general stylistic concept will be accomplished  right in the process of interface creation out of thin air, not being based on previously made decisions about branding and promotion. If the product, being useful, usable and well-designed, becomes popular and at the later stage its owners decide on creating particular graphic assets for branding, it is highly probable that this sort of solution will be based on already existing UI graphics as soon as it already represents the product and is the basis of brand awareness and brand image.


tubik studio landing page design

The concept of landing page design by Polina forming strong feeling of branding via graphic design solutions


There are also cases when general branding elements such as logo, corporate colors, fonts and the like are totally different from stylistic concept of UI for the product. It is sometimes done purposefully in case when marketing strategy for some reason presupposes that there shouldn’t be visual connection of brand image with the product and an application or a website should not be strongly associated with the brand in general. However, in cases when this kind of difference is not the part of well-thought-out strategy but just a lapse in general design and marketing process, it can have really negative influence on promotion and conversion rates.


This is all for today. We’ll answer the next set of answers soon here in our blog. The FAQ platform outlines several directions, so it features the questions, frequently asked by customers, designers, and users. We are open to share our experience, so if you have any questions, feel free to ask them via direct message in our Facebook page or Twitter as well as our Quora representative. We are looking forward to your questions!

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

Welcome to read us on Quora

Tubik Studio Review

Tubik Monthly Review. January

Traditionally, we start a new month in Tubik Studio with a moment of looking back at what has been done in the previous one. New year has started with new interesting projects and concepts, diverse shots on Dribbble, new plans and hopes and new articles in Tubik Blog. So, let’s look a bit closer at what January has brought up.

tubik studio office


In January we filled up our Dribbble portfolio with fresh shots featuring concepts for web, app, motion and logo design. Glad to mention that this month brought us two bright debut shots for the team, both featured in Dribbble weekly replays. Here’s the set of January shots.


tubik studio design UI

Photo Retouching Service by Alla Kudin


tubik studio UI design

HomeBid — Live Furniture Auction by Violetta


tubik studio app design

Social Network. UX for Communication by  Marina Yalanska


tubik studio app design

Entertainment App by Ludmila Shevchenko


tubik studio design

Structure – Architecture Blog by Ernest Asanov


tubik studio logo design

Tootl Logo by Ildar Alexandrov


tubik studio design

Microinteraction for Macroresult by Marina Yalanska


tubik studio web design

Web Template by Sergey Valiukh


tubik studio design

Weather Concept by Tamara


tubik studio design UI

Weather in UI Design by Marina Yalanska


tubik studio UI design

Messenger App by Ludmila Shevchenko


tubik studio design UI

Randomizer concept by Vladyslav Taran


tubik studio web template

Luxury Real Estate Web Template by Sergey Valiukh


tubik studio UI design

Offer App Coupon by Daria


tubik studio UI design

Case Study. Saily UI Design by Marina Yalanska


We also had an active month publishing new articles in Tubik Blog. In case you could miss something, let’s review the topics of the month:

  • Social Network Design. UX for Communication. The article gathering general points important to consider in the process of creating efficient UI/UX design for social networks of different kinds
  • UI Animation. Microinteraction for Macroresult. The article considering use and purpose of interface animation in UI/UX design in the aspect of efficient microinteractions. Supported with practical ideas and examples from Tubik Studio team.
  • FAQ Design Platform. Diversity of the Job. The fresh set of frequently asked questions about design in new FAQ Design Platform issue. This time it reviewed popular questions about different aspects of digital design as a job. Based on Tubik Studio answers at Quora.
  • Weather in UI Design. Come Rain or Shine. The article about some principles and practical ideas about UI design for weather applications and widgets. Supported with weather concepts by Tubik Studio designers.
  • Project Management. Design Process Backstage. The article considering the role of project management in successful design process. Here we gathered some important points and practical tips from Tubik Studio Project Manager.
  • Case Study: Saily App. Designing UI. The second case study about design for Saily App. This time it is devoted to description of user interface design for the application and packed with loads of images and animations to show more about the process.

Tubik design studio


As usual, we had a lot of everyday bright and memorable moments of team work, communication, creativity and rest, posted regularly for our over 15K followers in studio Instagram page.

tubik studio designer


Also, we shared our ideas and thoughts via Medium, WordPress and Quora and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.

tubik studio on medium

So, leaving one more dynamic month behind, all the team is full of inspiration looking forward to new interesting and active work.

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

Tubik Studio UI design Saily app

Case Study: Saily App. Designing UI

In one of our previous case studies we have told you about a logo which Tubik Studio designed for Saily App. To continue this bright design story, today we are going to get you to some backstage of UI redesign for Saily App.


Tubik Studio UI designer



Redesign of UI for the mobile application for local user-to-user ecommerce.



Sketch, Adobe After Effects, Adobe Illustrator




User Interface


To remind for those who have missed our previous case study, Saily is a local community app allowing neighbors to buy and sell their used stuff. Although it is a sort of e-commerce app, it includes a strong feature of communication between users. One of the essential accents brought out by Saily App team puts a deep focus on design and culture at the core of everything they do. User interface redesign of the app, accomplished by Tubik Studio designer Tamara, according to the client’s vision of the product needed to have the fun and entertaining feel and look. Bearing it in mind and setting the task to make the product trendy, clear and easy-to-use, the designer created the new image for Saily App which presented new visual concept and featured new functional points the clients wanted to add to user experience.

Saily UI design tubikstudio

Tubik Studio designer Tamara working on Saily App screens


In the process of research and analysis of existing general concept of layout and transitions, the designer concentrated on UI solution which put bright accents at the most important features and provided fast and easy microinteractions. E-commerce is the process which a user needs to feel as clear and fast; in addition, the features should be informative and easily recognizable for rather diverse target audience.


So, UI design points that must be thought out were the following:

  • easily understandable layout and navigation
  • recognizable icons
  • graphic elements not creating unnecessary distraction from the main points
  • the process of inputting the data about the item as simple and user-friendly as possible
  • interface elements showing data about the item not looking overloaded but containing all the necessary information
  • efficient communication available from any point of the application
  • funny and entertaining graphic elements all harmoniously supporting the same style concept and preferably original to create additional recognizability for the app.


Screen Tubik Studio UI


The general stylistic concept, which was chosen to support the idea of funny and uptown interface which should at the same time be informative and useful, moved around light background and a lot of bright accents in navigation and notification elements of the interface. As it’s easy to see from the grand-list above, due to this decision the screens get a lot of air and light background promotes good readability which is essential in the case of e-commerce app. Moreover, light background gives efficient field of presentation for any kinds of items brought out to sales.


The search followed two directions: actually the search of the actual items and search along the requests that were made by other users. In requests users left the information about the wished item. Also the user could save the history of own requests. Requests made by users gave additional channel of easy matching sellers and buyers letting them know what is actually on-demand at the time. Moreover, requests could be filtered by location and make the process of matching the buyer and the desired item even more efficient. Search field was hidden in the process of reviewing the content not to distract the user and open more space.


One of the decisions made to add some interesting visual features was the colorful highlighting of the content photos to make them look interesting and attract user’s attention. Colors were used to visually support navigation via color coding creating conventions and increasing the level of usability. Categories in the navigation were represented with background photos and original icons.


saily categories ui tubik studio


All the icons for the app were unique and customized so that they could create harmony of visual perception with all the other graphic elements and at the same time add to general originality of visual design of the screens.


Tapbar included the basic navigation items enabling the user to activate feed, search, communication features and add a new item or request.


saily UI screens tubik studio


All the items, as you can see, were organized along the cards. The card of the item showed all the necessary information about the thing for sale and enabled the potential buyer to connect with the seller at once. To visually present the item, which users wanted to sell, they could upload and customize one to four photos which user could add from his/her own device gallery or take a photo right out of the app screen. Sharing function was transferred to the separate screen so that not to overload the card.


One more functional side of the application to mention is the features of chatting and planning. As the app is positioned as highly social, simple and usable chatting feature was seen among the essentials and organized along the standard and common scheme of native chats without too much experimenting so that even the users without frequent experience of communication via digital channels could feel comfortable with this chat.


Planning functionality was realized via “meetings” feature which enabled a user to fix the time and day of meeting with the seller/buyer in the app calendar and see this information at the card of the item. In the «meetings» mode the image of the item got smaller and moved to the field of the item description while the bigger image featured the image of the meeting place and data.


So, user’s feed could switch in three different modes and show the chats, meetings and requests. In the own card of item, the seller could also change different status of the item to inform the users who could potentially get interested in it. Also application enabled the user to add some items to favorites not to lose their trace in the great bulk of items.


saily ui design tubik studio


User’s profile showed basic information like name, location, followers/following and also activation of the chatting function as one of the basics. The preview of the item card included the photo, main description with the category color code, the price and ability to add it to favorites right from the preview.


All UI solutions obtained via numerous discussions and iterations turned around the high level of usability and efficiency which should be supported with all the visual elements available on the screen.




In the previous case study we have mentioned the Saily brand mascot which is a funny little ghost having its own legend. Logo created for the brand by Tubik Studio designer Arthur Avakyan was just the start of branding process which continued with the next step of branding in UI design.

Tubik Studio logo design Saily app


The mascot as well as the other funny and user-friendly characters were used in numerous funny illustrations which presenting a sort of entertaining element at the same time became the tool of informing the user about the issues or problems demanding attention.


Illustration Saily Tubik Studio design

Saily Illustration Tubik Studio


Also the team of UI designer Tamara, illustrator Arthur and motion designer Kirill created several animations which livened up the screens, supported general cool style and at the same time had the functions of informing the user about the state of processes such as pull-to-refresh animations or loaders.


Tubik Studio Saily Animation

Enable location animated screen


Animation Saily Tubik Studio 1

Enable notification animated screen


Animation Saily by Tubik Studio

Pull down to refresh animation


Saily Animation by Tubik Studio

Search Screen Animation


So, Saily App project became a great and bright challenge for designers to make a trendy, funny and attractive but highly efficient and informative application with user interface aimed at wide and diverse target audience and having strong element of socialization.

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

Welcome to see other works by Tamara on Dribbble 

Welcome to read a case study on Saily Logo Design

Welcome to learn more about Saily app

Tubik Studio Year Review

Tubik Studio 2015. Year in Review.

It’s hard to believe, but 2015 is almost over. For Tubik Studio this year was dynamic, bright and rich in meetings, shots, interesting projects and non-stop professional growth.

This year, being active on Dribbble, we have published around 140 shots. Here we offer you to look through the set of top positions in the categories of UI/UX design, illustration and animation. Following the links, you will be able to see all their detailed descriptions and full-size attachments.


Top Twenty UI/UX shots


Tubik studio traveller app UI

Traveller App by Ludmila Shevchenko


tubik studio social network ui

Social Network by Sergey Valiukh


Tubik Studio UI design

Analytics App by Ludmila Shevchenko


tubik studio UI app

Skydeck App by Konst


tubik studio design ui

Calendar App by Ludmila Shevchenko


tubik studio ui design

Book Review by Sergey Valiukh


tubik studio ui app design

Task Management App by Ludmila Shevchenko


tubik studio ui design ipad

Octopus Bar iPad App by Sergey Valiukh


tubik studio music_app

Music App by Ludmila Shevchenko


tubik studio app design

GIF for Sport App by Sergey Valiukh


tubik studio design ui ux

Sea Schedule by Valentyn Khenkin


tubik studio dribbble shot

Sea Schedule Mobile by Valentyn Khenkin


tubik studio app ui

Time Management App by Tamara


tubik studio graphic ui

Travel Notes App by Ludmila Shevchenko


tubik studio blog app

Blog App by Ludmila Shevchenko



Good Sign App Concept by Polina Makarevych


app design tubik studio

 ECHO App v2.1 by Sergey Valiukh


artgallery ui tubik studio

Art Gallery App by Ludmila Shevchenko


app interface tubik studio

Emotional App by Daria


dribbble shot tubik studio

Eventflow App by Dima Panchenko


Top Twenty Animated Shots


tubik studio motion design

GIF for the Timeline App by Sergey Valiukh


tubik studio button ui

GIF of the Tap Bar Concept by Sergey Valiukh


tubik studio tapbar ui

GIF of the Tapbar Interactions by Sergey Valiukh


ipad interaction tubik studio

GIF — Portrait vs Landscape by Sergey Valiukh


tubikstudio motion design

GIF of Dynamic Scroll by Sergey Valiukh


tubik studio_social_network

Gif For Social Network by Sergey Valiukh


app design tubik studio

 GIF for the ECHO App v2.1 by Sergey Valiukh


tubik studio pull down

GIF for Pull Down — Space Ship by Tamara 


hamburger button tubik studio

Hamburger button by Kirill


ui concept animation tubik studio

UI Navigation Concept by Ludmila Shevchenko


calendar-app animation tubik

Calendar App Animation by Kirill


 preloader animation tubik studio

Preloader by Kirill


ipad interactions animation

iPad App Interactions by Sergey Valiukh


ui concept animation design

UI Animation Concept by Alla Kudin


add button animation

GIF for the Add Button by Sergey Valiukh


landing page animation

Good.co Animation by Ludmila Shevchenko


sport_app_motion ui

Saily app logo by Tubik Studio

Case Study: Saily. Designing Logo

Logo design process has already been presented by us in previous case studies: we told about the logo for photo editor in Ribbet case study, PassFold logo for the mobile application for tickets/passes storage  and management as well as our own Tubik logo. All the previous cases show how thorough and sophisticated should the work on efficient logo be. Logo is the sign with the deep symbolic meaning that is the important part of UI design, branding and therefore successful promotion of the product.


This time we are going to tell about one more logo design process which was accomplished by Tubik Studio designer Arthur Avakyan for Saily app.

Tubik Studio designer

Arthur Avakyan creating variants of logo for Saily app



Designing a logo of the mobile application for local user-to-user e-commerce.



Pencil sketching, Adobe Illustrator





Saily is a local community app allowing neighbors to buy and sell their used stuff. Therefore it is a kind of e-commerce app but with solid communication feature. It is important to mention that the team which created the application puts a deep focus on design and culture at the core of everything they do. For the general UI design of the app, which was provided by Tubik Studio designer Tamara, the client set the task of fun and entertaining feel and look. So, logo had to follow the same requirements to create the harmony with general design concept.


Tubik Studio designer

Tamara working on UI design for Saily app


In this case of design process, designer Arthur Avakyan started with the variants of lettering as it was initially the basis of branding for the app. Traditionally the process started with handcrafted lettering versions in which special attention was paid to the initial capital letter S as it could potentially be further used for the application icon.

Tubik Studio logo design


Tubik Studio lettering


Although the lettering looked nice and the designer tried to keep the consistent and harmonic image, the customer wanted to continue the search of the concept which would look more funny and cool to create the feeling of user-friendly and far-from-formal product. So, next versions provided by the designer tried the variants of new letter combinations, connections and styles.


Here are the intermediate versions of digitized lettering which uses rather complex and elaborate lines and connections of all the letters into one integral image.

Tubik Studio lettering


Saily app logo by Tubik Studio


The next version presented lettering of the other style with simpler lines, less integral connection, which was provided in the previous version by linking the initial and the last letters. This version featured the initial letter S standing separate from the rest of the letters which was more logical in case of decision to use this letter on the icon or another logo variant.

Saily app logo by Tubik Studio


The client decided on the last version as the most readable and legible as well as flexible for developing further design solutions. The designer tried it in different colors and sizes to ensure that the font is easy to read and recognize in various environment.

Saily app logo by Tubik Studio



The second step of work on branding was design of the corporate character as well as in our previous case studies for Ribbet and Tubik logos. This time the mascot was a ghost and it had the amazing legend behind it, supporting and explaining the aim of the application for the target audience in funny and entertaining way. According to the original idea set by the creators of Saily app, the friendly ghost is called Casper and he really suffers from clutter in the people’s houses that doesn’t allow him to find the comfortable place to sleep. So, with the help of Saily app users are offered to sell their stuff which is unused anymore and free some space to make Casper happy.


Understanding the nature of the app and following the main requirement to make the mascot as cute as possible, the designer offered the first version, based on rounded forms and smooth lines, with friendly and cute look, big eyes and wide smile as the most prominent details, having outlined body and hands. The image was inscribed in the square-shaped icons with various color of backgrounds and mascot itself.

Saily app logo by Tubik Studio


Although the general idea was caught, the client wanted to continue the search and try other forms and options to achieve not only cute, but also trendy look. One more variant presents other forms and image of the ghost, removing such details as hands and making the icon look simple and clear. 

Saily app logo by Tubik Studio


For another iteration, it was decided to try the version in which the ghost took all the form of the icon.  In this case the designer also tried different color options as well as other type of facial expression.


Saily app logo by Tubik Studio


The images looked stylish and interesting, however one more iteration was included in the process. The creators of the app made a decision to feature not only e-commerce functions but also the strong element of gamification and a wide variety of illustrations to support the fun, cute and cool brand image. Considering this factor, the designer offered one more variant, which could be used in numerous and different backgrounds, fulfill diverse functional aims and also be used in the game with the same easily recognizable form. Thus, this version of the ghost was simplified, flat and rounded, and looked nice and stylish both inscribed inside the icon form and as the separate element of any environment. This solution was accepted as the most universal and flexible for different aims.

Tubik Studio logo design


To make sure that the mascot is efficient, it was tried on different backgrounds and with various color filling.

Tubik Studio logo design


The accepted design solution for the corporate mascot was further applied in numerous illustrations used on the screens and in the game featured in the app. Design process for them will be described in more details in our next case study devoted to UI design for Saily app.

Tubik Studio logo design Saily app


Tubik Studio logo Saily app

Saily app mascot ghost featured in the game


This case of logo design witnessed bright and diverse work on variants which would be not only bright and reflecting the nature of the whole app, but also flexible and for numerous aims, following the latest design trends and original to make the app branding easily stand out of the crowd.

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

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

Welcome to learn more about Saily app