Tag Archives: Photoshop

Tubik Studio Dribbble shot

Tubik Monthly Review. October.

New month has come bringing new ideas, new projects and new hopes. Nevertheless, as usual, we start it reviewing what was done in October to sum up a bit of our efforts and present them in our Tubik Monthly Review. So, let’s remember together what this month was full of except hard and inspired work on current projects.


In October we enriched Tubik Studio Dribbble page with new shots. Here is the full collection of Tubik Studio shots, which can be checked full size with the attachments if you follow the links.


tubik studio website

Basic Grammar for Designers by Marina Yalanska


tubik studio character illustration

BIGGIE & 2Pac by Arthur Avakyan


hamburger_menu tubik studio

Hamburger Menu Animation by Valentyn Khenkin


ribbet animation tubikstudio

Ribbet Collage by Kirill


tubik studio ui design passfold

Case study: PassFold by Marina Yalanska


tubik studio ui concept

Veggie App Concept by Polina Makarevych


tubik studio design ui

Calendar App by Ludmila Shevchenko


passfold logo tubikstudio

Case study: PassFold Logo by Marina Yalanska


ribbet animation tubik studio

Ribbet Collage 2 by Kirill


passfold logo design tubik

Passfold logo options by Arthur Avakyan


illustration tubik studio

Night Work… by Ildar Aleksandrov


icon logo tubik studio

Saily ghost icon version by Arthur Avakyan


tubik studio sticker design

Halloween Sticker (Freebie) by Ildar Aleksandrov


Also we have published new articles here in our Blog. October brought our readers two new case studies about the PassFold project, in which we told about UI design and logo design for the mobile application. Both posts are packed with bright images showing the design flow to our readers. Also we published a new set of Tubik Studio Quote Collection: this time it gathered 30 quotes by famous design experts. Two other articles were concentrated on the ways of optimization and improvement of design process: one post told how to optimize the process of resizing mockups for different screen sizes in Photoshop, while the latest post in the blog was concentrated on the essence and benefits of prototyping for UX design by example of work with Pixate tool.


No doubt, in October we published tons of photos showing studio daily life and design processes on our Instagram page

Tubik Studio designer


…and were happy to share our articles on our Medium page.

Tubik Studio on Medium


So, turning over the October page of Tubik Studio life, we are moving full of inspiration to create something new, useful and bright to share with you in our next monthly review. Happy November to everyone!

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

Tubik Studio optimization method

How to effectively resize mockups for different screen sizes in Photoshop

One of the most common problems in design of applications and its further transition to developing stage is the requirement of app adaptation to different resolutions. It takes certain part of the time devoted to design, and although in big companies the team can include the special person assigned to accomplish this type of staff, in most cases this task rests on the designer’s shoulders.


As our UX/UI designer Konst says, it is impossible to consider yourself a UX specialist until your own work process is as efficient as possible. This particular thought makes him constantly explore and study new ways and tricks of optimizing his work and increasing its quality. While many companies and individual designers are moving to work with more modern and specialized software for UI/UX design such as Sketch, there still are a lot of them who work with Photoshop. Moreover, as we have already mentioned before in our previous post, the more tools you can use, the more flexible you are in solving tasks as different tools and soft are efficient for different problems.


One of the ways of optimization for his own design process which Konst found for himself enables the designer significantly reduce the time needed for adaptation. Certainly, it is not a silver bullet, but it can be useful for those who have to adapt their designs to many resolutions.


tubik studio designer

Tubik Studio designer Konst  working on the project


In substance, this method applies drawing in 1x in points with further pixel auto-scaling according to the set density of dpi/ppi.


Besides general benefits, there are also the following positive points if the method:
1) It makes possible to use the points indices directly both for margins and types (that is by no means unimportant)
2) It isn’t necessary to scale the design manually in the process of adaptation to a new resolution.
3) It isn’t necessary to scale types visually.


So, let’s get started investigating the process itself.


First of all, the most important thing is to customize the file of your project correctly. The most important aspect at this stage is the size of the operating zone of the project and the resolution pixel/inch.


The definition of point is more or less clear for everybody who worked on design for iOS. However, meaning of resolution should be discussed in more details.


Both in web design and design of mobile applications the resolution of 72 dpi is the equivalent of 1x resolution. It became custom on the basis that this is a standard resolution for creation of a new file and in this resolution 1 pixel equals 1 point. Explaining the method, the designer didn’t stop on the position of standard resolution in details providing the link to the detailed Guide on DPI.


In the given case, the project we are creating is the one for Iphone 6 with screen resolution of 750*1334 pixels, 2x Retina screen, in other words 375*667 points. While the resolution in pixels can differ, a point is the constant measure and its actual presentation directly depends on the resolution parameter. In our case, we set 144 dpi that is equal to 2x modificator in design of application for iOS. So, now our 1 point is not 1 pixel but 4 pixels. It happens because the point contains more pixels with increasing resolution and now it takes the space of 2 x 2 pixels.


Then we can start drawing. It’s important to consider here the following nuances:

  • Set the Rules of the document in Points (Right click — -> points);
  • Avoid divisional measures of the objects in points;
  • Avoid divisional measures of the objects placement;
  • Avoid multiplying the measures from the guideline by any modificator; they should be used directly, i.e. navigation bar is drawn with the height of 44 points, not 88 as we would do in pixels;
  • Instead of pixel grid, it’s better to use the grid of 1 point. It makes drawing more convenient.


When the project for iPhone 6 is accomplished, it’s time to adapt it for iPhone 6+ or convert the project according to the given settings.
It is known that design for iPhone 6+ needs to be accomplished in 3x, which equals to resolution of 216 pixels per inch. Before, you would have to adjust all the design manually to iPhone 6+ requirements, while with this method it is not required.


To make the explanation more applicable, the current instruction will be devoted to re-sizing mock-ups from 5s directly into 6+.


1. First of all, we want to check that our mock-up uses correct settings. The size for canvas is set in Points. Resolution 144.

Tubik Studio optimization method


The correctness of the settings can be checked in the mock-up itself, if you set on the rulers first points and then pixels, checking the size of the same elements with marque tool. If everything is done right, then the pixel measure should be twice as big as the point measure.

PS optimization Tubik Studio


2. Now we start adaptation from 5s into 6+. First, we want to increase the size of the canvas so that it corresponded to the parameters of the new device. To do it, open «Image/Canvas Size…». In the current case we need to enlarge the canvas from 320×568 tо 414х736. Pay attention to the anchor point as the sized will get enlarged relatively to this point. Here the designer chooses the top left corner as to it he has already anchored the elements to its edge and such up-sizing will allow additional work on positioning of these elements.


Photoshop optimization Tubik Studio


3. This is how the project will look like after up-sizing. Left – before, right – after. As you can see, the canvas actually got bigger.

Photoshop optimization Tubik Studio


4. Having checked the pixels/points, it’s possible to see that there are some minor mismatches. 414 points is the right measure but the width of the mock-ups resolution for 6+ is 1242, not 828. The point is that we have set the resolution of 144, i.e. 2x.

Photoshop optimization Tubik Studio


5. To correct above mentioned, we move to «Image/Image Size…». There we are able to see the sizes of our canvas in points and its current resolution in pixels. First we choose «Fit To: custom». This parameter allows using further settings correctly.


As the size of the canvas in points is correct, we have to adjust its pixel measure. For this aim, we change the resolution from 144 to 216 that is going to correspond to the resolution 3x. After inputting the measure of 216, the number of pixels should change at «2208 x 1242″ which we need.

Tubik Studio Photoshop optimization


6. After this we press OK. Now by example of any element with the fixed measure in points we can check if the resolution in pixels changed properly.

Photoshop Optimization Tubik Studio


It’s done now! You need only to move the elements of the design and fix them to actual edges, but in general, main objects are already on their places. Therefore, you needn’t worry about the sizes of the icons and buttons if you followed the guidelines.

Photoshop Optimization Tubik Studio

The screens for the project for Unique Publishing, in which Konst applied his method


Optimization is the great step to efficiency of the workflow as it can save time and make it free for more creative tasks. Here in Tubik Studio we always share our ideas how to optimize the process saving time and effort but not losing in quality as it is strategically important in work on complex design tasks.

Welcome to see other works by Konst on Dribbble 

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


Case Study: Echo. Designing User Experience and User Interface.

Today we are going to start the set of case studies about various projects and concepts Tubik Studio has worked on. Case study is a great way to share the experience and outline the issues essential to consider while working on projects of different kinds and aims.


This time we are going to look closer at the Echo project. You could have seen some stages and elements of this work in Dribbble shots by Sergey Valiukh, the head of Tubik Studio team. Now it is high time we looked through the project in greater detail.




Pencil sketching, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, Sketch 3.0, Pixate.




The task at hand was very clear and at the same time quite broad: to create the social network enabling users to deal with music on their mobiles and other devices. According to this purpose, there were distinguished the following basic functions:

– To download and syncronize media-files from other online platforms and social networks such as YouTube, SoundCloud, Spotify etc.

– To upload the files from the desktop library of media files

– To generate playlists in fast and easy way

– To organize the stream in the image and manner of a radio station.


The author also considered the additional functions, one of which was to enable the simultaneous general streaming from several different devices, for example, when people gather at the party or anywhere they want to listen to music together.


Working on the task, the designer had to take into account two important pre-conditions:

– High level of competition as there are a lot of already promoted and popular music services in the web and app sphere

– The maximum possible level of adaptability and responsiveness of all the versions of the application that was expected to be used on all possible kinds of gadgets. It was vital to provide 100% adaptability of all the features in order to maintain high usability level.




User Experience (UX)


Music is an integral part of human life, but at the same time that is not the sphere where people would like to make any additional efforts. For most listeners in most cases music is where a person relaxes or, vice versa, gets energy — not the place for hard work demanding elaborate skills. The wider is the target audience of the music service, the simpler and clearer it should be. Everything the user needs here is clear navigation and fast work. However, considering the number of competitors on this market, it’s necessary to think also about something original in design so that the service can stand out of the crowd.


Taking all these issues into account, the designer started the work on the site from the research of existing products and creating the concept of user experience. The decision was made to begin with designing the mobile version which was supposed to be more widely used and simpler for the target users. Next stage of design was going to provide implementation of the mobile version into web.


Screens for user experience

Working out the screens


On the basis of the review and analysis of existing social networks, the following screens were planned:

– Launcher screens (educational steps animation)

– Sign-in screen (including login, registration, password recovery)

– User main screen (feed, profile, stream creation, audio files addition, search, slide menu)

– Screen of settings and editing profile


Let’s look into details of all the screens mentioned.


Launcher screens (educational steps animation)/ Sign-in screen (including login, registration, password recovery)


Launch of the application started with the slides which were animating while scrolling and the user got the basic description of the service. After the last slide the sign-up/sign-in screen appeared with the basic set of standard operations (e-mail — password — password recovery). The service was integrated into all widely used social networks so it provided direct logging in with the profiles on Facebook, Twitter, Google+ and so on. After registration, the application made possible to link up all the user’s accounts in social networks to share the streams and see the friends’ streams. Therefore, after the user signs up, he/she is offered to follow the friends from other accounts or find new friends according to musical tastes.


Profile Screen Echo Case Study


User main screen (feed, profile, stream creation, audio files addition, search, slide menu)


The profile was designed to work in 3 different modes:

– DJ Mode (Party Mode) — made possible to download audio files, create playlists as well as send invitations to listen to the playlists for the limited number of people.

– Home Mode — made possible to play the songs from the playlist remotely on different devices within the radius of a room

– Listener Mode — made possible to download and listen to both own and friends’ playlists.


Feed Screen for Echo Case Study


Extended feed screen for Echo case study


Player screen for Echo case study


Screen of settings and editing profile


This screen contained standard settings: connect or disconnect with social networks, push-notifications settings, changing password, deactivation of the account, signing out.


Due to the fact that many screens were required and convenient transition was needed, the designer chose to construct the application with slide menu. The sandwich button on the left enabled opening the menu panel for transition to different sections. Also there was the list of users recommended for following. These recommendations were based on musical tastes, location, circles of friendship etc. In addition, there was a separate notifications screen which reflected activity of the followers to the user’s posts in the service or in social networks.


Navigation menu screen for Echo case study
In iPad version, the split-view was implemented. The sandwich menu and slide menu were set in the left edge of the screen. The size of the posts adjusted to the tablet.


In mobile application the difference between Android and iOS is that the design of the upper bar (navigation bar for iOS and action bar for Android) has different functional abilities. In general, action bar for Android, in addition to navigation, includes filters, sharing, data about the current screen. Considering these UI peculiarities of the action bar for Android, the content of slide menus was reflected identically in both versions as the acceptable controller for both operating systems in the aspect of mobile applications. For Android version design was completed according to the guides of material design so the structure of slide menu was the same as for iOS but the appearance was different.


For the web version of the service the designer used typical structure when header and slide menu duplicated functionality of the application with alterations on the size of the desktop for the web-version. Therefore, there were more posts visible in the feed in case of adaptation of mobile application to the web.


Everything mentioned above shows that the designer didn’t make the attempt of experimenting and that was motivated by the desire to provide the highest possible usability and utility level. As it has already been outlined before, the application was created for fast and easy usage in everyday situations, so from the user experience standpoint, any experiments and extreme innovations in the typical scheme of social network could scare users, make them feel the application confusing and result in poor user experience.


So, the main area of designing something original to distinguish the application was UI.


User Interface (UI)


The Blur effect was taken as the basis: the bars with data or statements blurred the background. The following animation was used on the player screen: the basic background showed the artwork, which presented the album cover for the composition playing. The background of the screen was blurred with the round unblurred central part, around which the effect of the rotating playing record was created with typical visual details.

UI player screen for Echo case study


Visual design of the screens was distinctly distinguished according to their functionality. The screens of entertaining character (feed, profile, navigation bar) were designed with wide application of blur effect: it was dimmed out and the text data was presented in white color. However, standard screen such as settings or profile editing were designed in the simple style with light background and dark text.


Navigation Menu and Profile screens for Echo case study


The feed screen reflected the stream of friends and included the artwork being the album cover for the composition playing, the avatar and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views and online listening.


UI iPad Feed screen for Echo case study


One more screen designed here was extended feed screen. Tapping or clicking on the stream, the user could obtain extended data including all the information from the feed screen described above together with detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application.


UI Feed and Extended Feed screens for Echo Case Study




One of the most important stages while designing UX/UI of an application or web-site is its testing. Practice shows that sometimes ideas, which look brilliant on the first glance, turn out to be absolutely impractical for target users. That happened with the first version of the Echo project described above.


Having analyzed the results of user-testing and having worked with focus groups, the author obtained the information that the original design doesn’t work as it was desired. The thing getting the most negative feedback from users was blur effect in extended feed screen. The screen looked dirty and the text seemed unreadable. Animation and non-standard effects demanded long loading that is unacceptable for such simple operations. The feed screen contained too little body of the stream with overloaded controllers whose functionality was not really essential on that screen.


So, on the basis of user feedback, there was made the decision to change the design of the screens. The solution found for them was the following: the blur effect was totally eliminated because its appearance in PSD was absolutely different from what was seen in real, especially low-resolution screens.


UI Navigation menu and Profile screens v2 for Echo case study
To provide maximum of cleanness and simplicity, all the screens were designed with light background, elegant and laconic uniquely designed icons. The feed screen contained less data and the posts had bigger size. Extended feed looked much simpler although saving the idea of animation.


Feed and Extended feed screens v2 for Echo case study


Player Transfer Animation for Echo case study


Transition from feed to extended feed was realized by tapping or clicking at artwork on the feed screen: it was given in smaller size in feed and got bigger while transition proportionally to the whole screen and under it all the information about the post (the avatar and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views and online listening, detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application) was shown on the white background. To make it even more convenient, in case of vertical scrolling of this screen the big image of the artwork hid into the navigation bar leaving the place for the content below.


Extended Feed Animation for Echo case study


Web-version was simplified to one-page site with the functionality of viewing the screens and profile.


Web feed screen for Echo case study


Work on this project gave our team valuable experience. It shows that modern ui/ux designer should always consider user’s needs and wishes that are vital in creating successful experience and therefore provide high level of desirability. Moreover, Echo project also proved that a designer should always be ready to update or even redesign his work and this decision has to be based on real testing of the product.


Modern ui/ux designer should always consider user’s needs and wishes that are vital in creating successful experience and therefore provide high level of desirability.



Welcome to see other works by Sergey Valiukh on Dribbble and Behance

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