Tag Archives: prototyping

design navigation UI UX tubik studio

UI/UX Design Glossary. Navigation Elements.

One of the basic features of product usability is thoughtfully created navigation. It doesn’t matter if the visual performance is creative, stylish, original, catchy and so on and so forth, in case the users don’t know where they are and how they could reach their goals with the website or app. Whatever is the reason that brings users to your digital product, the high level of respecting them means letting them know what is going on and where they are going at every step of interaction with it. Earlier we have already published the Glossary posts with key terms for the topics of usability and web design as well as business terms and abbreviations. This time the perspective will get focused on navigation aspect: let’s check out what parts and elements of the interface are responsible for this vital issue. 

 

Dribbble shot Tubik Studio

 

Navigation

 

In its basic meaning, the word navigation names the sphere of human activity responsible for enabling a vehicle to get from one place to the other, controlling and supporting this process. According to etymology dictionary, the term has deep roots and comes from the Latin word navigare «to sail, sail over, go by sea, steer a ship,» which in its turn is based on two words: navis «ship» and agere «to set in motion, drive, drive forward». So, to navigate is to make possible for someone or something to cover the planned route. This is the foundation from which the numerous meanings of this word took the start and adjusted in many other spheres.

 

In terms of user experience design, the concept of navigation is one of the basic notions setting the usability. Navigation in this case could be generally defined as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The aspect of efficient navigation has a great impact on setting positive user experience: users start using apps or websites with particular aims and expectations, and that’s designers’ task to set the best and easiest route to solving users’ problems.

 

The aspect of helpful and seamless navigation in UI should be thought-out from the early stages of creating user interface. Users are navigated via interface with a number of interactive elements such buttons, switchers, links, tabs, bars, menus, fields and the like, some of which will be described more in details below.

 

Here in Tubik we support the workflow in which all the basic navigation issues, such as layout, transitions, elements placement and functionality, are set on the early phase of UX wireframing and then checked with simple prototype to make sure all the important operations and options are clear for users. Neglecting this essential aspect sets high risks that all the other effort on design can be just wasted, so it’s much more user- and client-friendly to start with the basics.

 

Tubik Studio UI sketches

 

Menu

 

Menu is one of the core navigation elements. It is a graphical control that presents the options of interactions with the interface. Basically, it can be the list of commands — in this case options will be presented with verbs marking possible actions like, for example, «save», «delete», «buy», «send» etc. Menu can also present the categories along which the content is organized in the given interface, and this can be the high time for using nouns marking them.

 

Menus can have different locations in the interface (side menus, header menus, footer menus etc.) and different ways of appearance and interaction (drop-down menus, drop-up menus, sliding menus etc.) Any solution, which designer makes about menu functionality, appearance and placement in general layout, should be based on thoughtful user research, analyzing not only potential wishes and expectations of target audience, but also their tech literacy and possible environments in which the digital product could be used. Well-designed menu can significantly speed up the process of achieving goals and satisfying needs that lays the solid foundation for positive user experience.

 

tubikstudio ui app design

 

Here is the example of mobile blogging app interface which features left-side menu presenting the categories of content. The copy describing positions in the menu is supported with icons presenting recognizable visual mark for the category.

 

mobile app design tubik studio

 

The presented app UI concept shows the type menu applying the effective technique of color marking: when users move to a particular category, the specific background color is used for all the content in it, which forms strong associations and quick perception of the nature and theme of data the user sees.

 

CTA

 

Behind the widely used abbreviation CTA, designers and content creators mean call to action. This is actually the word of phrase which stimulates users to interact with a product in a way and for the aim it is designed for. CTA elements are the interactive controls which enable users to do the action they are called to. Typical types of such interactive elements in the layout are buttons, tabs, or links.

 

In the interfaces of all kinds, CTA elements are the core factor of effective interaction with the product, which plays the crucial role in usability and navigability. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That sets the high risk for poor conversion rate and general user experience. That’s why this navigation element should draw particularly deep designers attention. In any interface, it should be one of the most prominent and quickly noticeable parts to inform users how the product can be helpful or useful for them.

 

Contact List Concept Scrolls Tubik

 

As we mentioned in the article with tips on copy content in UI, some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized images such as a telephone receiver for making a phone call or the envelope for opening received mail. The app interface presented above shows this case: the button with a receiver is the most prominent interactive element on the screen navigating user to achieving their goals with app quickly, and it doesn’t need the copy to let users understand what action can be done with it.

 

However, when the image of an icon is not so obvious or can be misleading, it is more effective to use double scheme, when the icon, button, or link is supported with the copy.

 

landing page UI design tubik studio

 

The example above features the landing page for a web platform devoted to cooking seafood. The headline of the page presents a call to action and immediately sets the theme by both verbal and visual means. Still, this call to action is not interactive. The active CTA elements are clickable buttons informing users that after clicking they can see more information on the particular topic or recipe. The bright color enhances visual hierarchy on the page and draws users’ attention to the key interactive zone.

 

Bar

 

Bar is a section of user interface with clickable elements enabling user to quickly take some core steps of interaction with the product or it can also inform user on the current stage of process. Among the basic types of bars, we could mention:

Tab bar — in mobile applications, it appears at the bottom of an app screen and provides the ability to quickly switch between different sections of an app.

 

tubik studio tapbar ui

 

Loading bar — the control informing user on the current stage of action, when the process is in active stage and user can see the flow via timing or percentage shown in progress.

 

tubik studio motion design

 

Progress bar — provides feedback on a result of the current process so far, for example, showing how much of the planned activity has been done.

 

juicy player UI Tubik Studio

 

Button

 

Button is, perhaps, one of the most popular elements of any interface. Button is the element which enables user to get the appropriate interactive feedback from the system along a particular command. Generally speaking, button is a control with which user directly communicates to the digital product and sends the necessary command to achieve a particular goal, like, let’s say, send the email, buy a product, download the data, turn on the player and tons of other possible actions. One of the reasons why buttons are so popular and user-friendly is that they efficiently imitate interaction with the objects in physical world.

 

Modern UI buttons demonstrate high diversity and can serve plenty of purposes. Typical and frequently used buttons which present an interactive zone, usually clearly marked out for visibility and having a particular geometric shape and often supported with the copy explaining what action will be fulfilled via this button. Designers usually apply considerable time and effort for creating effective and noticeable buttons that are harmonically added into general stylistic concept but are contrast enough to stand out in the layout.

 

tubik studio page 404

 

Besides, we could also mention several types of buttons with additional functionality, widely used in mobile and web interfaces.

 

Hamburger button — the button hiding the menu: clicking or tapping it, user sees the menu expanding. It is called so as its form consisting of three horizontal lines looks like typical bread-meat-bread hamburger. Nowadays it is a typical element of interaction, still highly debatable due to the number of pros and cons.

 

Most users who visit and use websites on the regular basis know that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus free the space making the interface more minimalist and full of air as well as allow massive saving place for other important layout elements. This design technique also provides additional benefits for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices. Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used. The arguments against hamburger menu are based upon the fact that this design element can be confusing for people who do not use websites regularly and can get misled with the sign which features a high level of abstraction. So, the decision about applying hamburger button should be made after user research and definition of target audience’s abilities and needs.

 

tubik studio ice ui website

The presented website concepts uses hamburger button to hide the menu and support general minimalist approach to the visual performance of the layout.

 

Plus button — the button that being clicked or tapped presents the ability to add new content, be it a new contact, post, note, position in the list — anything user could do as the basic action with the digital product. Sometimes, tapping this button users are directly transferred to the modal window of creating content, in other case there is also a medium stage when they are given additional option to choose from and make adding the particular piece of data more focused.

 

tubik studio button ui

 

Here is the concept showing that plus button first enables a user to choose the category of the added content (image, video, text) and only then directs to the particular screen where it can be done. This practice takes seconds still makes experience more user-friendly as designers can present users with modified options of adding content for every particular case.

 

Share button — the button enabling a user to share the content or achievement directly to social networking accounts. In vast majority of cases, it is presented with icons which present a brand sign of particular social networks and are easily recognizable.

 

Switch

 

Switch is a control that enables users to switch the option on or off. Again, it is applied with the high level of efficiency and popularity in modern interface because it presents the direct imitation of switches people are accustomed to in real life. The important point of consideration here is that states of the switch should be visibly clear and brightly different, so that user could avoid applying effort to understand if the option is active or not. Various sorts of contrast and slight animation can make solve the problem making the experience simple and user-friendly.

toonie switch UI animation

Here is the switch turning on and off the alarm in Toonie app. Animation makes the interaction smooth and natural, while changed color of the tab and the toggle transforming into spinning sun let users instantly understand whether the alarm is active. If you want to see the full case study on how this animated element was designed and developed, welcome to check the details here.

 

Picker

 

As it becomes clear from its name, picker allows users to pick the point from the row of options. It usually includes one or several scrollable lists of distinct values, for example, hours, minutes, dates, measurements, currencies etc. Scrolling the list, users choose and set the needed value. This type of interactive element is widely used in the interfaces which have the functionality of setting time and dates.

 

toonie UI animation

 

Checkbox

 

Checkbox is graphical UI element which is used to mark a particular piece of content, usually setting the choice for the binary options. It is another element setting the bridge with the real world as it looks really similar to the process of filling in tests, questionnaires and other stuff of this kind when you put a tick or color the box to mark the option. Checkboxes and switches can be found in any type of user interfaces, especially in the sections of user, screen or page settings. Also, checkboxes present a common part of navigation in apps and websites with functionality of task managers, to-do lists, time trackers and the like.

 

todo list UI app tubik studio

 

Here’s the example of design concept for the mobile to-do app for complex tasks. Tapping the checkbox, users marks the task as done and it automatically gets faded, the copy is colored differently and the font gets bolder to support the contrast of this task with the one which are still in progress.

 


 

Today’s set of our glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets — the next one will continue the issues of navigation with deeper insights into types of menus and buttons, tags, breadcrumbs and icons. 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!

 

Recommended reading

 

Here is the set of recommended materials for further reading for those who would like to get deeper into this topic and learn more on the theme.

 

iOS Human Interface Guidelines

 

Navigation patterns for ten common types of websites

 

3 essential rules for effective navigation design

 

Perfecting navigation for the mobile web

 

Understanding Web UI Elements & Principles

 

User Interface Elements

 

The Most Creative Mobile Navigation Patterns

 

Basic Patterns for Mobile Navigation


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

Welcome to read us on Quora

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 Dribbble shots

Tubik Monthly Review. November.

Following the tradition already established in our Blog, every month we take our time to sum up what was done and set new goals. So, welcome to Tubik Monthly Review, which this time is devoted to some of our works, thoughts and ideas published in November. And as usual, we would be happy to do it with our readers.

Traditionally, we start with the set of Dribbble shots posted by Tubik designers during the last month. Our Dribbble account got more bright works on illustration, UI design, motion and icons design. Following the links, you can see all the shots full size with their descriptions.

 

tubik studio ui design

Media Player Concept by Valentyn Khenkin

 

calendar-app animation tubik

Calendar App Animation by Kirill

 

tubik studio product design

ABC of Product Design by Marina Yalanska

 

tubik studio illustration

Owl by Ildar Aleksandrov

 

tubik studio animation icons

Multimedia Icons Presentation by Valentyn Khenkin

 

tubik studio music_app

Music App by Ludmila Shevchenko

 

saily UI screens tubik studio

Saily App by Tamara

 

tubik studio ui design ipad

Octopus Bar iPad App by Sergey Valiukh

 

tubik studio ui app design

Emotional App by Daria

 

product_design_tubik studio

ABC of Product Design. Part 2 by Marina Yalanska

 

UI design tubik studio

Start App by Violetta

 

good_sign_app_tubikstudio

Good Sign App Concept by Polina Makarevych

 

UI kit tubik studio

Free Eco UI Kit  by Dima Panchenko

 

icons in ui tubikstudio

Iconic Simplicity by Marina Yalanska

 

Also we enriched our Behance profile with a new presentation which was featured at App Design Served.

Tubik Studio dribbble shot

Behance Multimedia Icons Presentation

 

We were also active here in the Blog, having prepared several new articles. We have shared our ideas about important features of efficient product design organized along the letters of the alphabet. They were posted in the articles ABC of Product Design and ABC of Product Design. Part 2.  Then we added the post with our recommendations about books on UI/UX design in the post Design books set: UX, UI, HCI. Improving with experts. The other post in the blog last month called Iconic Simplicity. The Vital Role of Icons was about the types and features of icons as the vital part of effective and successful UI/UX. As usual, we are always keen to share our experience and discuss new ideas as well as basics of design, so this month we are preparing new articles and case studies for our readers.

 

Certainly, we filled up our Instagram page with new photos featuring our everyday life and work…

Tubik Studio Designers

 

… and we were active and eager to answer questions about design, UI/UX, tools, processes and prototyping at Quora that resulted in a great number of views and gave us a chance of being helpful to those who are interested in design.

Tubik Studio at Quora

 

In addition, in November Tubik Studio CEO Sergey Valiukh took part at Ping IT conference in Odessa as a speaker and told about our studio work principles and organization.

tubik studio ceo conference

 

Obviously, apart from everything mentioned above, we all had interesting and complex work on various design tasks on UI/UX, logo and branding, illustrations and motion design. One more good news about last month: understanding the integral role and importance of the correct and appropriate copy for successful and efficient design of different products, such as landing pages or branding items for example, we broadened our scope of services with copywriting. So the magic of words since now can be also professionally provided by Tubik Studio via copywriting tasks together with any kind of design tasks in which we are already really experienced.

 

So, with a new flash of inspiration and creativity, we have started the winter, looking forward to Christmas and New Year, hoping for better and being happy of chance to do the work we love.


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

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