Tag Archives: prototype

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

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

 

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

 

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

 

Tubik Studio

 

Define the problem

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

tubik studio work

 

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

 

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

 

Problem: I want to know the action is done.

 

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

 

switch animation tubik studio

Switch Control Animation

 

hamburger_menu tubik studio

Hamburger Menu Animation

 

hamburger button tubik studio

Hamburger button interaction

 

tubik studio button ui

Tab Bar interaction

 

add button animation

Add Button interaction

 

pageindicator tubik studio

Rubber Indicator

 

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

 

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

 

pull_to_refresh tubik studio

Pull To Refresh

 

preloader animation tubik studio

Preloader

 

pull to refresh animation tubik

Pull to refresh

 

pull-down animation tubik studio

Pull Down — Hourglass

 

tubik studio pull down

Pull Down — Space Ship

 

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

 

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

 

— they inform user about the level of progress

 

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

 

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

 

tubik studio motion design

GIF for the Timeline App

 

tubikstudio motion design

GIF of Dynamic Scroll

 

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

 

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

 

sport app motion ui tubik studio

GIF for Sport App

 

tubik studio motion design ui

Cards Animation

 

UI Design Interaction Tubik Studio

Boat Station App

 

tubikstudio blog app ui animation

Blog App

 

Problem: I want to see the key things first.

 

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

 

tubik studio tapbar ui

Tapbar Interactions

 

tubik studio behance weather app

GIF for the Weather App

 

App screens by Tubik Studio

Resto App 

 

Problem: I want to feel the interaction natural.

 

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

 

tubik studio_social_network

GIF For Social Network 

 

tubik_studio_book_swap

Book Swap App

 

Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu

 

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

 

Landing Page Animation Tubik Studio

Landing page animation

 

landing page animation Tubik studio

Landing page animation

 

landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver

 

tubikstudio ui animation website design

Bjorn Website

 

 

Problem: The screen/page is boring.

 

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

 

calendar-app animation tubik

Calendar App Animation

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

tubik studio application recipes and cooking

Recipes App

 

juicy player UI Tubik Studio

Juicy Player

 

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

 

Tubik quote UI animation

 

Recommended reading

 

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

 

Interface Animation. The Force of Motion.

 

Animated Interactions. Motion on Purpose.

 

UI Animation. Microinteraction for Macroresult.

 

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

 

How to Use Animation to Improve UX

 

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

 

Experience Design Essentials: Animated Microinteractions In Mobile Apps

 

The ultimate guide to Web animation


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

tubikstudio graphic design ui

Tubik Monthly Review. April.

One more month has brought interesting projects, active work, productive discussions, inspiring communication, creative search and bright memories. As usual, we start a new month with a quick review of what has already been done, so let’s look through some of April’s achievements.

Traditionally, we will start with a set of Dribbble shots presented by studio designers. 

 

tubik studio ui animation

Animated Interactions by Marina Yalanska

 

tubikstudio swiftybeaver landing

SwiftyBeaver Landing Page by Ludmila Shevchenko

 

swiftybeaver logo design

SwiftyBeaver Logo by Arthur Avakyan

 

website design concept tubikstudio

BRMC Website by Konst

 

InVision for UI prototyping tubikstudio

Prototyping with InVision by Marina Yalanska

 

ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko

 

 

website animation ui tubikstudio

BRMC Website — Animation by Konst

 

tubikstudio weather app

Weather Icons Presentation by Valentyn Khenkin

 

tubikstudio graphic design ui

Mascot Magic in Branding by Marina Yalanska

 

Tubik studio character animation

Daily Stuff by Alla Kudin

 

tubikstudio graphic design illustration

Ryiadh Tour Guide by Valentyn Khenkin

 

tubikstudio ui animation website design

Tubik Studio | Björn by Ernest Asanov

 

tubikstudio ui app design

Visual Perception. Icons vs Copy by Marina Yalanska

 

Also we have presented new studio work on Behance, this time showing the set of interfaces featuring app design with custom weather icons and illustrations.

Behance presentation icons tubikstudio

Weather icons Behance presentation

 

We also have published some new articles with our ideas on general and specific design issues here in Tubik Blog. In case you have missed out on any of them, here’s the list of what were the themes to discuss in April:

  • Graphic Design. Communication Beyond Words. The article about basic aspects of modern graphic design as a professional sphere. Here we consider the definition of graphic design, its directions, skills and qualities needed for work and also support all that stuff with examples created by studio designers.
  • Tubik Reading List on Design. Issue 3. New set of recommended fresh articles about various UI/UX design issues as well as the short review for a design book of the week. 
  • Design Tool Review. Prototyping with InVision. The review of the popular prototyping tool for designers. Analysis of practical benefits of InVision for creating efficient workflow and user-friendly designs.
  • 10 TED-Talks for Creative People. The fresh set of inspiring and informative TED-talks. This time 10 recommended speeches from experts are focused on diverse aspects of creativity. Enjoy watching!
  • Mascot Magic. Personifying Your Brand. The article about mascots as the design element with a strong potential in brand and content management. Here we consider main advantages and requirements to efficient mascots.
  • Visual Perception. Icons vs Copy in UI. The article analysing relations between copy and icons in app and web user interfaces in perspective of natural visual perception. Supported with practical design examples and recommended reading.

 

Tubik blog design article

 

This month we also actively shared our ideas and experience answering questions about design issues on Quora. Here are the most popular ones covered in April:

Why are illustrations important for UX design?

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

— In UIs, do people recognize icons faster than words?

— Why is it important for UX designers to work in teams?

— What is graphic design?

 

Tubik Studio on Quora

 

April brought many unforgettable moments of collaboration, creativity and friendship which we actively shared with our followers in studio Instagram page.

 

tubik studio designers

 

tubik studio design team

 

Getting closer to global design community as well as everyone interested in this sphere, we shared our ideas and experience via Medium and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.

Also in April studio team was featured in the article Photo Tour of Tubik Studio revealing a bit of studio history as well as everyday routine and work conditions in WhatPixel Blog.

 

tubikstudio design office

 

One more month went to history but brought fresh prospects and new aims which we are keen to realize in new projects, concepts, meetings and articles. Get inspired!


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

invision prototyping tool tubikstudio review

Design Tool Review. Prototyping with InVision.

Prototyping is one of the important stages of efficient UI/UX design process as it allows trying design solutions and test them practically before moving to high-fidelity design polishing as well as product development.

 

In one of our previous articles we have already mentioned the benefits of prototyping for designing strong and positive user experience and reviewed one of popular prototyping tools Pixate. Today we are going to continue this conversation describing the other efficient software for prototyping called InVision.

 

General description of the tool

 

InVision is the comprehensive prototyping software supporting the process of designing user interfaces for mobile applications and other sorts of digital interactive products. Now it is one of the major players on the market, perhaps due to constant improvement and extensions of the functionality which the company adds to the product as well as the strong informative support via their Blog which share diverse cases and articles on design.

 

invision prototyping in tubik studio

The basic idea behind InVision is fast and easy creating live prototype from static images of any fidelity level. The tool provides the ability to upload wireframes which can be more or less detailed and with the functional facilities of the software they are automatically transformed into the prototype of the app. It is possible to follow the necessary transitions, to test the buttons, to analyse the layout in the mock-up of the device interface.

 

tubik studio design

 

Working over numerous project on UI/UX design for mobile applications here in Tubik Studio, we are usually keen to try different tools and software to increase productivity and — what is more important — efficiency of design workflow and communication with the customers. These are the reasons why InVision prototyping tool has become popular here in cases of app design. Being simple and clear in its interface, it doesn’t scare clients who can be easily involved in the process; in addition, it provides numerous functions enabling designers to make the process of testing design faster and easier in terms of productive teamwork.

 

Why should you try prototyping?

 

As we have already mentioned plenty of times in our earlier blog posts, prototyping is the essential stage of design process when user interface for mobile application or a website is created. Being based on our practical experience, we can definitely say that prototyping is the stage when testing can save the time, effort and money.

 

Let’s see, how the process is going on here in the studio. After setting clear objectives for the product, conducting user and market research, defining and analyzing target audience designer starts working on the initial UX design solutions. This is the time when the living organism of the future product gets into its skeleton and all the elements that have to be included start functioning as the united system. The designer thinks over all the layout, forms the group of screens, decides on their functionality and transitions, thinks over the most efficient variants of placement for interactive elements and CTAs. The result of this process, based on great deal of thinking and analysis, is initially given out as a system of UX wireframes. This is usually the set of screens done in limited color palette and its main goal is to set all the logic and functionality of the future application. And this is the high time when the team involved in design process could apply a prototype to make a full analysis of design solutions before starting UI design stage.

 

tubikstudio UX design

 

Lively and clickable prototype tested in the mock-up of an actual device screen you design for is the great and fast way to reveal any sort of problems influencing usability of the product. It lets all sides of the design process – designers, managers, testers and clients – have actual experience of interaction with the future product, to ensure that there are no missing parts or unnecessary steps in the process, to test if all the elements are logical and placed right.

 

The great advantage of InVision tool is that due to its functionality its now rather easy to apply the technology of prototyping, in fact, almost at all the stages of design process as it is not time consuming to upload the static images of the screens and form the prototype with them. That means that it’s possible to start effective testing from the very first groups of screens to see how they provide logic of the layout and transitions.

 

invision prototyping tubikstudio

 

Moreover, in case of using the tool it is also possible to test all the UI decisions in the clickable prototype and see them actively used. The designer can apply animation and simulate gestures using tools’ native functionality to make the prototype felt even more realistic and the experience very close to natural.

 

The power of collaboration

 

What we especially appreciate about InVision software here in Tubik Studio is its strong and constant support of efficient collaboration in design process. Knowing that fast feedback from the client is a vital feature of effective and productive design workflow, creators of this tool made it convenient and clear not only for designers and project managers who are usually fast in dealing with different tools and soft, but also for those customers who are not really avid software users and it takes some effort for them to deal with new tool. InVision has good navigation and is user-friendly for different types of users.

 

The tool enables creators to get a clickable prototype and at the same time to communicate on every smallest part of it. That means clients are able to set their feedback not only to particular screen but even to a particular element of the screen such as button or toggle, shade or shape, piece of copy or graphic icon – anything. It provides the functionality of multiple threads and therefore designers, managers and clients can discuss particular elements quickly and set more productive workflow together.

 

invision prototyping tool tubikstudio review

 

 

Additional features

 

Except the general functionality of prototyping process, some important additional features of the tool should be also mentioned:

 

— Easy and fast integration with other design tools for efficient work, such as Sketch of Photoshop, for example, from which the wireframes can be directly uploaded to InVision.

— Supporting cross-platform experience: the tool provides the ability to set sizes and resolutions of different devices you design for. This feature is highly applicable in the process of responsive design and mobile adaptations.

— Easy control and marking of project statuses for efficient project management.

— Functionality for creating and presenting mood boards, brand boards, galleries and style guides.

— Tools for direct live communication right from the project account. Especially appreciated by the teams working remotely.

— Saving versions history to easily compare several versions of design solutions.

— Diverse functions and features for creating high-fidelity prototypes that can be used for user-testing before the stage of development.

 

invision tool tubik studio review

 

So, the software has shown itself as the important tool improving teamwork and the process of testing design solutions as well as tight collaboration with the customers. Those positions are among the key points of efficient design process providing thought-out, high-quality and user-friendly designs.


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

tubikstudio ui ux design

UI/UX Design Glossary. Steps to Usability.

Practice shows that structured data is a great way to work optimization and that is one of the reasons why old good stuff like phone directories, dictionaries, vocabularies and glossaries, databases and sets of formulas are still applicable and convenient for everyday use. Order and organization make it easy and fast to find everything needed. And today we decided to make a step to this sort of optimization and provide the first set of definitions for some basic terms in the field of UI/UX design.

 

No doubt, today there are many various publications and online resources providing helpful and informative support for designers and explaining the necessary terms. In our previous articles we also get involved in this global process while describing practical cases of design. Today we would like to systematize some of the explanations here concentrating on UI/UX design issues enhancing usability and support the definitions with the links to the articles where we gave more details on the topic. So, let’s move on!

 

UX (User Experience)

 

It is the general attitude and emotional feedback that user has on different stages of using the product. In terms of digital products, such as websites or applications, UX is a comprehensive term involving all the possible stages of user engagement. UX is based on several key factors such as usability, utility, desirability, attractiveness, speed of work etc. If all the logic and possible issues of product implementation into real life are analyzed and designed properly, it forms positive user experience which means that users are able to satisfy their needs in fast, easy and pleasant way. Positive user experience is one of the strongest factor of retaining users.

 

UX Wireframing

 

It is the process of creating general structure of the designed application or website. It’s usually accomplished via the set of schematic screens or pages of low or middle level of fidelity. The aim of this stage is setting clear and orderly structure of all the layout, transitions and interactions on the basis of user’s problems and pains which the product is going to solve.

 

In one of our previous articles we provided a bit of metaphor on that. When we think about building the house, for example, we usually mean the process of physical appearance of the construction rather than tons of projects, drawings and calculations made on paper. And yes, physically it’s possible to build the house without any project as well as it’s possible to create the interface out of thin air. However, in this case you shouldn’t be surprised if one day the house will crack and collapse without any visible reasons as well as the app looking amazing and stylish won’t bring you any loyal users. If you want to have a reliable house, a durable mechanism, a powerful application or a highly-functional website, the recipe is the same – take your time for thorough planning and projecting. This is not going to waste your time, vise versa, it will save your time you would otherwise have to spend on redesign and attempts to find out why your product doesn’t work properly.

 

That is the aim of UX part of design process. UX wireframing stage should be heavily based on user research, competition research and analysis of all the data obtained. In the outcome, it creates the clear scheme whose complexity depends on the product functionality and reflects all the system of transitions and interactions as well as placement of all the elements of the interface based on their optimal use flow. In some cases, wireframing done in pencil sketching or rough drafts is enough, although preferably it is accomplished with the special tools and software optimizing design process and increasing performance.

 

UX design Tubik Studio

Read more on this topic in our previous article

 

UI (User Interface)

 

User Interface is actually a finalized interactive field in which the user interacts with the product. It includes all the tools of increasing usability and satisfying target users’ needs and wishes. All the features of visual perception as well sound and tactile feelings influencing the product use and interaction with is should be analyzed and optimized here to the purpose of the app or a website is designed. For example, such aspects as color palette, types and fonts, shapes and forms, illustration and animation and so on and so forth are able to affect the performance of the final product greatly in both positive and negative way.

 

In general terms, the UX research and wireframing stage is about how the website or application works while UI is how it looks. Both these stages include work on successful interactions, but UX deals more with logic, connections and user behavior while UI stage provides visual representation of all the concept. It means that ideally designer should first work on UX part with concentration on layout, making it more powerful, thought-out, clear and easy to use. Without this vital work you highly risk creating pure mess out of the user interface.

 

After the UX part is tested by prototype, agreed upon and the concept of layout, transitions and features are accepted, the designer starts the UI design part. This is the time when a newborn heart and brain of your product is clothed with its skin and bones. Here the product gets its real color scheme, forms and features of the layout details, styles, animated elements and so on.

 

All the UI solutions directly influence the positive or negative user experience, so the processes of UX wireframing and UI design should mutually support each other and follow the same strategy otherwise the efficient solutions of one stage will not work on the other.

 

Here are some of fresh UI design examples for different types of products from Tubik Studio portfolio on Dribbble:

 

tubik studio web ui design

Birds of Paradise Encyclopedia by Vladyslav Taran

 

home page landing tubikstudio

Comics Shop Home Page by Dima Panchenko

 

tubik illustration interface

Simple Blog App by Sergey Valiukh

 

Read more on this topic in our previous article

 

Prototyping

 

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to enable a designer, a customer and a user to check the correctness and appropriateness of the design solutions.

 

The value of prototypes in the sphere of app and webdesign has rocketed for the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, prototype will be the great help.

 

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX – prototype – UI.

 

The prototypes on UI stage are created more for presentation of application general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise it would be much harder to change inefficient solution after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

 

Read more on this topic in our previous article

 

Icon

 

An 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.

 

Tubik studio icons

 

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.

Read more on this topic in our previous article

 

Microinteraction

 

Microinteraction is one particular case of user’s interaction with the product completing one particular task. For example, when you press the “like” button (anyhow it looks like) and see that your like has been counted (the number has changed, the button changed the color or became inactive, the copy on the button informed you that you have done the action, the copy under the button or other interactive element informs that you are in the list of those who liked, and so on), that is the case of microinteraction. When you fill in the proper text field with the search request and send it to the system, that is one more case. Microinteractions happen when we follow or unfollow someone in a social network, rate the blog post or set the timer – hundreds of things we do, in most cases not willing to think over those simple steps too much. Microinteractions in most cases aren’t even consciously fixed by the user – and that is actually one of the important tasks for a designer to make them as natural, clear and fast as possible.

tubikstudio ui design

BuonApp by Ernest Asanov

 

Read more on this topic in our previous article


 

The first set of our design glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets. If there are any specific terms you would like to see explained, described and illustrated, feel free to contact via direct message in our Facebook page or Twitter as well as our Quora representative. New definitions are coming soon!


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

Welcome to read us on Quora

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_tubikstudio

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

Tubik Studio prototyping with Pixate

Benefits of prototyping for UX design with Pixate

The process of user experience design for any mobile application is a very responsible stage on the way to the final product, which will satisfy the user. In our previous articles we have already mentioned that UX process is the basis for successful UI as it develops the whole logic of the application, makes possible to think over the efficient transitions and layout as well as consider all the ways to make user experience as positive as possible.

 

The important way to check out and test all the solutions made on the stage of UX design is prototyping. Here in Tubik Studio we are keen to try different tools of prototyping to test the efficiency of UX. Earlier we promised to share our experience of work on prototypes and discuss the benefits of different tools in more detail. So, this post is going to be the first in the set and this time we would like to consider main benefits of prototyping and tell you about the tool for this aim called Pixate.

 

The essence and role of prototyping

 

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to enable a designer, a customer and a user to check the correctness and appropriateness of the design solutions.

 

The value of prototypes in the sphere of app and webdesign has rocketed for the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, prototype will be the great help.

 

tubik studio motion designer

Tubik Studio designer Kirill, always keen to try the best options for prototyping

 

Tubik Studio motion designer Kirill, having extensive experience of work with prototypes, defines them as the step of vital importance in the process of creating successful UX. Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, he says that in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So the workflow should have such a sequence: UX – prototype – UI.

 

The prototypes on UI stage are created more for presentation of application general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise it would be much harder to change inefficient solution after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

 

The first and most important role of prototype is to check and test the functionality rather than the beauty and appearance of the product. Practice shows that testing UX with prototype enables to make the stage of UI design less time and effort consuming. It’s easy to ground: if you test UX solutions with prototype, you are able to reveal and fix the basic bugs and problems before you start working on UI tasks. If you don’t, the risk to devote a lot of time to UI design which will be not so efficient and so will have to be changed is much higher. Redesign of the complete UI is more difficult and long process than testing the design at UX stage with a simple prototype.

 

tubik studio design testing

Prototyping lets the designer check UX solutions with the experience close to real use

 

The simplest prototypes have been the paper ones and even they are highly efficient in understanding the main concept of layout elements and transitions. Nowadays, the variety of different tools and services for digital prototypes is incredible and gives designers the opportunity to choose those, which are more appropriate for their work and task. They really improve matters in the process of design, especially in the sphere of app design as the modern tools of prototyping create the prototypes very close to native apps and therefore user experience can be tested deeper and closer to reality.

 

A bit of practice: Pixate

 

Pixate is one of the various modern tools creating prototypes for mobile applications.

 

prototyping pixate tubikstudio

 

It provides the wide range of functions to create efficient prototypes, which are animated and look very close to the native apps. Pixate was one of the pioneers adding native animation to make prototypes more efficient.

 

Pixate prototyping tubikstudio

 

Pixate has a clear and simple functional scheme and layout that doesn’t require a lot of time and effort from the designer to study how to create a prototype. This is a very important trait for such a tool as most designers highly appreciate any opportunity to save their time when possible and use the tools which are clear, intuitive, fast and highly efficient.

pixate prototype tubik

 

Pixate can also be described as a flexible tool whose features provide various opportunities to present the content in the created prototype. Moreover, Pixate allows separating layers and embedding interactions such as Tap, Double Tap, Drag, Scroll, Pinch and others. No need to say, how happy the designer can be to use all this things creating the prototype close to real product.

Pixate prototyping tubik

 

As the functional potential of the tool is very close to real app appearance in presentation of UX solutions, it makes the process of testing UX quick and easy. You can intitally customize the prototype to your target device.

Pixate prototype ui tubik

 

It is not a secret that in UX design process attention to details and thinking-out the ideas to make operation of the app easy and pleasant for the user are essential. Prototype made with Pixate on this stage gives the chance of testing all the elements of layout and the process of screen transitions. Sometimes the smallest details which are missed in the general scheme of app design cannot be revealed from the wireframes easily, but are easily seen in the process of testing the prototype. So, prototype provides the prompts to the designer and allows feeling the real experience of transitions, using buttons, understanding the propriety of all the elements placement in the layout and the role of every element in real experience.

Tubik Studio prototyping with Pixate

 

The benefits of prototyping

 

Summing up, by example of work with Pixate, we can conclude upon the basic benefits of prototypes.

 

Benefits for designers:

  • Clear and intuitive tool, not requiring much time and effort to study how to use
  • Flexible in the ways and methods of content presentation in the prototype
  • Contains customized animation and provides the prototypes which feel and look as native apps
  • Efficient in testing UX solutions and sharing it for testing with the customer or tester

 

Benefits for customers:

  • Simple and intuitive features of the tool make easy to understand how to use the prototype.
  • It doesn’t require any specific knowledge or skills to test the prototype
  • It doesn’t need special devices or technical characteristics of the devices on which the prototype can be used
  • It provides high level of feeling the real experience as the prototypes looks and feels very close to real app.

 

All the mentioned features are highly valuable especially for the customers who are non-designers and have never had experience of working with wireframes and understanding UX-schemes and flows.

 

In our next articles we will share the practical workshop on all the flow of prototype creation and also will tell you about other efficient tools helping designers to improve their work and make both customers and users happy.


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

faq by Tubik Studio

Design FAQ platform: questions from designers

We continue with answering most frequent questions which Tubik Studio designers and managers are often asked. Two previous sets were devoted to the issues interesting for customers so this time we decided to give our opinion about the questions we are frequently asked by designers.

 

What tools do you usually use for prototyping?

 

Prototyping is a very important part of the design process. Creating UX/UI, we develop the system of screens, transitions, analyze how different elements of the layout will influence on general efficiency of an application or a website. Therefore, prototype is a great way of testing the work in progress so that the designer could reveal the bugs and problems spoiling the product. Moreover, prototype give the opportunity to present the customer the working model of the product on different stages of its creation.

 

The list of prototyping tools which designers of Tubik Studio use for different goals is rather wide: Pixate, InVision, Marvel, Framer, Flinto, Origami. Usually the choice of the tool and its correspondence depends both on the task and on the preferences of the designer assigned to accomplish it. All the mentioned tools have their benefits and complications. However, now we could define two of them which have settled on the top of the list.

 

The first one is Pixate. It has been tested on numerous projects and proved its efficiency. The most important points to be mentioned are high-quality animation of transitions.

 

pixate

 

The second tool which is now becoming more and more popular with our designers is InVision.  Being constantly updated and improved, this tool for prototyping creates more and more opportunities and features. It provides the wide range of functional features which enable a designer not only easily create efficient prototypes, but also set the field for fast feedback in the process. It accomplishes easy export of graphic content from Sketch. It also has a plugin for Adobe Photoshop that provides additional opportunities of quick and efficient creation of prototypes and synchronization of changes. We have already mentioned in our previous articles that fast and clear feedback is one of the vital conditions of successful collaboration with a client. InVision provides everything that is necessary to fulfill this need.

 

invision

 

It’s really helpful that it makes possible to comment not only on separate screens but even separate elements of the layout. Moreover, recently presented opportunities of creating boards and synchronization with Slack provide even more chances of fast prototype creation, testing and analysis. InVision is the tool which makes the process of prototyping far less time-consuming and more effective due to wide functionality for feedback. So, the designers could get more time for creative work rather than its technical realization.

 

invision
As we are getting the questions about prototyping more and more often, now we are preparing the series of case studies and articles analyzing use of these tools in design process in greater detail and with practical examples.

 

How do you track the projects? What is your choice of product monitoring solutions?

 

As well as for the previous case, during the process of active work we have tried various tools for tracking the projects and communication with customers. We have already practically tested Basecamp, Trello, Asana, Jira, Redmine and others. Obviously, all of them are great tools that improve the process of work enabling customers, managers and designers communicate easily and provide updates on the projects as soon as possible.

 

Our personal preference for projects monitoring as well as in-studio information flow is Trello. This tool is simple, effective, clear and intuitive. That is very important because not all the customers are keen users of technologies and they should be provided with the option which doesn’t need special knowledge or much time to get into its functions. This tool for communication provides clear systems of boards and cards which have a gear deal of features. It makes possible to split any task into sprints and enables to carry out the project providing constant updates and presenting images.

 

trello

 

It is easy to set deadlines (due-dates), delegate specific tasks to specific people, create check-lists and mark out the most important and urgent tasks. It also has one more really precious feature. Trello has not only thoroughly thought-out website, but also efficient and smart applications for iOS and Android. This gives additional opportunity for fast feedback so it saves time, efforts and makes management of the projects very comfortable for the customers. Trello is great option for creating the spot where designers, project managers and customers could together make the fast and effective workflow.

 

trello used by Tubik Studio

 

Choosing the tool of tracking and management, we always take into account the task of the project and the preferences of the customer. That is why we use not only Trello, but also other tools helpful in this issue. However, we always present and explain our scheme of workflow in Trello to the customers and in most cases they agree with our choice. But it should also be said that we are flexible and never miss the opportunity to try new tools. The sphere of design is lively and dynamic as well as the field of project management. That’s why on the basis of practical experience we suppose that trying and testing new tools is keeping our eyes on the ball never missing new prospective improvements.

 

Sure, we could say much more about Trello as well as other tools of tracking and monitoring, so you will be able to see more detailed descriptions and reviews of these tools in next articles of our Blog.

 

How do you organize in-studio communication flow?

 

No doubt, communication inside the studio is a significant condition of successful work. Designers and project managers need to have constant opportunity of exchanging information in the process, sometimes discuss general questions and share interesting or useful data. This infoflow is the pulse of the team which makes all the things in the studio go round.

 

Trying to find the best solution for this purpose, we used two tools simultaneously. Trello, mentioned above, was used for aims of sharing the data: we create boards on which save necessary links, documents, images, ebooks or discussed long-term projects and issues. For fast information exchange and current questions or discussions Skype-chat was used efficiently for a long time.

 

However, recently we have changed our preferences after Slack being introduced in our work process by the clients of the studio — the company Fuse Tools. Being already aware of its advantages, Fuse Tools team insisted on using it instead of Skype as more multifunctional option for fast and successful collaboration.

 

slack

 

Analyzing its functions, Tubik Studio managers made a decision to test the tool in terms of full-time studio communication instead of Skype. After several days all the team accepted this change as Slack really provides wider field for work not only as a chatroom but also for sharing and saving data. One more thing that has become a bias towards Slack is the possibility to configure different integration including Trello for faster and smoother workflow.

 

All these features brought Tubik Studio team round to use Slack together with Trello as the basic tools for in-studio communication.

 

Do you use Photoshop or Sketch as the basic tool for design?

 

Nowadays the fight Photoshop vs Sketch is becoming more and more active. There are loads of articles and reviews, case studies and interviews in which people analyze benefits and drawbacks of Photoshop and Sketch. And, being designers taking active part in modern design process, we are also often asked which of these editors we prefer.

 

The answer we would like to give is really simple. There is no any vs. There shouldn’t be any war between the options which can complement each other. Obviously, now there is no any perfect and ideal software for design: if it existed, everybody would use only this ideal choice and there wouldn’t be any need for fight. So, we suppose that modern designers provided with a number of tools should study how to take everything possible from them instead of trying to decide which one is better.

 

Here in Tubik Studio we believe that the only single thing that a designer should think about is the high quality of the final product. The highest. Quality. Possible. Period.

 

That’s why we use the variety of tools and software here, share our experience and always thoroughly watch the newest trends and upgrades of design software opportunities. The tool is just a tool. The only thing important is to make the customer and the users of the final product happy. Its vital to think about implementation of the product into real life and making it the one which provides high conversions. People, who use the product, do not see the tools. They see the work which is good or bad. Therefore, knowing the advantages and drawbacks of different soft and tools, designers are very well armed to find the best tool for any particular problem.

 

Designer of Tubik Studio

 

So, we always analyze the task before choosing the tool appropriate for its accomplishment. However, in general terms in most cases we use the benefits of different design tools in the following way.

 

Our practice shows, that Sketch is really helpful and efficient in the research and UX stage of the design process. Adobe Photoshop is effective for preparation of graphic sprites and creation of unique UI elements. Adobe Illustrator is great as the basic vector editor for creating illustrations and icons. And together they present a powerful engine for high-quality and elaborate design. That is the reason why we never waste time arguing which one is better.

 

photoshop

 

sketch

 

As it has already been mentioned, we never stop the process of learning and follow the pulse of design world. Now we are testing the new vector graphic design software from Apple which is called Affinity Designer. It is a promising product and we are keen to see its possibilities closer. It provides a lot of functions for creating icons, elements of UI, illustrations and so on. It has more clear and intuitive interface than Illustrator and provides the opportunities for real-time making adjustments and applying effects independently from the size and complexity of the image processed. In future we are planning to share our experience of working with this tool in our Blog.

 

Therefore, on the basis of everything mentioned above, we can confidently say that every tool, editor, software has its strong and weak points. In some sprints of the process simple pencil and sketchbook will be the best way to get the result efficiently. So the best practice is to analyze the task thoroughly and decide on the most efficient tool for this particular task.

 


 

This is all for today. We’ll answer the next set of questions next Tuesday here in our blog. The FAQ platform is planned in several directions, so there will appear 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 any time of day via direct message in our Facebook page or Twitter. We are looking forward to your questions!

See you next Thursday!


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