Tag Archives: HCI

Tubik Studio iOS development

Case Study: SqueezeOutSwitch. Animation in Code.

UI animation has been the subject of hot debates for a long time. Designers work over the sophisticated animations to make interfaces attractive, original and functional while developers often support the idea that slick and complex animation takes more effort in the process of development than necessary.


As you know from our previous posts devoted to the issues of interface animation, here in Tubik we support the position that wisely used animation is the powerful and multi-functional tool enhancing user experience. We checked that on numerous design projects of diverse purposes. Our complex motion design concepts have been used by developers who like challenges and want to present high-level skills in coding.


Broadening our professional horizons, we also started sharing our design concepts on GitHub, to show how design, even quite complex and specific, can be brought to life with code. Today we will look at more detail at SqueezeOut Switch animation of the interface interaction.


button animation tubik


The design concept Switch Control Animation was presented on Dribbble featuring animated switch control that can be used for accepting or declining the changes on any settings screen. The main motion design style the designer aimed at was adding some gum effect when the control is switched on and off. And this sort of design details can become a bit of challenge for developers.


The animation in code representation is made of two parts.


The first part works like that: when user makes a tap on the screen, the circle has to move to the opposite side until it is covered by the baffler. Then animation slightly slows down, the circle changes its appearance, goes up to final point and features bouncing. The baffler also shows the animated pulsing with the circle. The oscillations decay.


The second variant takes place when user tries to move the circle manually, like pressing it and pulls to the needed side and then can release. While the user pulls the circle, it changes its position within acceptable range, up to maximum stretching of the baffler. The baffler stretches only to one side in that case. If the user releases the circle not taking him to the middle of the switcher, it gets back to its initial position and pulses. The baffler will just get back to the initial point. If the user takes the circle further than the middle of the switch, it goes to the opposite side, both the circle and baffler pulsing, and the circle changing its image.


Animation of the circle movement doesn’t create any problems. This is the standard task which can be solved with UIView animation and CASpringAnimation. However, animation of the baffler is more challenging.


In case when animation is done with Core Animation, setting the initial and final path, then the arc performance is unpredictable. In addition, the form of animation can be inappropriate and the problems with color change can raise.


In animation, the change should be done discretely. When should it be done? If you do it in advance, then the good point is when path is at its initial stage, which means it features the straight line in the middle of switch. So, you have to create an array with the set of paths and colors and place it into CAKeyframeAnimation. The approach gives the working outcome, still the code will look messy and illegible. Moreover, the circle will need to be moved manually for synchronization.


In this case we can use CADisplayLink (timer of screen redrawing) and manipulate with presentationLayer (the copy of the layer which is visible on the screen at the moment). In the method launching CADisplayLink, we will change the path for the buffler. The points which form this path depend on the position of the circle in the switcher. The position of the circle is animated with UIView animation. Therefore, animation with UIView will smoothly change the bearings of the circle layer, while we are changing the path of the buffler on the basis of those bearings.


The path for the buffler feature two UIBeziePaths.


UI animation code


The first one goes from the point 1 to the middle of the circle edge at point 3. Control point for this curve is point 2, it proportionally depends on how far the circle moved out. The second line goes from point 3 to point 5 and its control point is point 4. In this way we can get the line of the buffler edge smoother.


The method of forming path for the particular extreme point




The method of animation on tap  



For reaction on pan we added UIPanGestureRecognizer. Here is the method that processes it



Welcome to review the GitHub source code for this animation. New cases are coming soon!

Welcome to see designs by Tubik Studio on Dribbble and Behance

tubik studio landing page design

Soft Landing. 10 Design Concepts of Landing Pages.

What makes the journey by air good? Easy take-off, smooth flight, breathtaking view from the air. And soft landing with feeling safe and convenient. These final minutes of getting to your destination can become the icing on the cake, enhancing comfort and excitement of the flight, or vise versa, the dark spot crossing out all the amazement and positive moment if landing is hard and unpleasant, perhaps confusing or painful. Landing really does its job.


In webdesign it works similar. For many users well-thought-out landing page will be the good experience of getting to the right destination and starting a journey around the website from the proper point. In our previous article sharing the details of design for efficient landing pages we mentioned that process of creating landing pages lies on the crossroads of design, marketing, user research, psychology and other spheres dealing with people, their behavior and solving their problems. 


Here we have collected 10 different UI design concepts accomplished by studio designers. They represent different landing page reflecting various business goals, natures of presented offer and visual styles supporting the purpose.


Landing page for the shop selling organic products


Tubik studio landing page design


The aim of the presented landing page is to promote a shop of organic food. It is composed in several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. So, all the visual accents, first of all key images of food selected carefully to immediately transfer the appropriate message to the user, support the basic theme. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation and the visual elements were selected to support the general theme and provide immediate visual perception of basic idea.


We can also see that in this case the designer chooses quite short and condensed copy blocks which provide users with basic data and give the links to learn more following the call-to-action. At the same time keywords describing the most important benefits like ‘organic’, ‘home-made’, ‘quality’ are marked out visually so that they could be noticed at once. This strategy is wise as users do not need to spend much time reading to learn about the service, but see the opportunity to learn more any time they need. 


Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh


Landing page for a website providing services for everyday life


landing page design by TUBIK

Here is the landing page concept designed for a website of the agency that presents its services. The variety of provided services is echoed by the variety of colors used in the interface. The designer’s aim was to make it lively, vivid and attractive, creating catchy first impression and supporting positive user experience with engaging design solutions. Dynamic motion accents add much to the general stylistic solution whereas good combination of fonts with balanced contrast of layout elements create the field of good visual perception and enhance readability.


landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko


Landing page for museum exhibitions


Tubik studio UI animation

Tubik Studio | Museu by Ernest Asanov


This example presents a landing page promoting art exhibitions. The idea behind it is to make this sort of promotion aesthetic and unobtrusive for the user as well as highly informative. The balance of minimalism and utility appealing is kept by means of style, color and motion. The minimalistic presentation still is highly informative and successfully uses the studies along eye-tracking for applying the most important layout elements in the zones of the highest usability.


As we mentioned in the article devoted to benefits of dark background in UI, color of background can be not only the effective field of presentation but also the carrier of its own message. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige and power. That is, perhaps, one of the reasons why many powerful brands build their visual presentation around black-and-white scheme with dark dominating and light presenting and informing the recepient. Playing out this aspect in interface design can provide additional support to other design solutions and general presentation of the product which we can definitely observed in the presented design concept. Dark background make the images of the exhibits look more deep and stylish while the readability doesn’t suffer being supported with the right choice of fonts.


Landing page for a non-profit charity organization


Tubik studio landing page ui


The provided example shows the design concept of a landing page for a non-profit organization accomplished. It uses considerable copy blocks and supporting visual elements to set the understanding of the club activity. Decision on the amount of copy used on the page should be the aspect of thorough research and testing as it directly and highly influences conversions. However, it doesn’t mean that every landing page should contain minimal number of words. If it presents a famous company product or service or informs about special offers, sometimes short and concentrated copy is enough to encourage users. However, if a new unknown product or service is presented, it is important to provide users with more information persuading them to follow call to action. So, in this case copy becomes a tool of engagement and informing as the service is not concentrated on the product that can become the primary visual accent, but with the activities that should be verbally described.


tubik studio landing page design

Arts, Culture & Education Curation | Landing by Polina


Landing page for a native Mac application


tubikstudio swiftybeaver landing

SwiftyBeaver Landing Page by Ludmila Shevchenko


Here is a landing page for SwiftyBeaver native Mac application whose target audience is developers. As we can see it is designed in minimalistic manner and concentrates users’ attention on short copy about the product’s functionality and CTA enabling to request a free beta access. Although the page provides other important links, they are designed in a way not distracting from the main elements providing conversion. The work on landing page for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main visual design solution was made around the colored accents echoing the design solutions of the application interface layout. 


Landing page for a gym




Here is the landing page of a gym presenting all the basic information necessary for user: general description, provided services, trainers, prices and location. Slight colorful accents and motion effects are used to make the interface more engaging and scrolling more smooth. In this sort of service selection of appropriate motivational images is vital as people associate workouts first of all with attractive and athletic body and positive energy. So, photos applied in design presentation support this particular aim creating clear and obvious perception of the theme and benefits of the service. Bold and strong font applied for headlines adds to both fast readability of key messages and general visual consistency of all the design.


gym landing page concept by Tubik

Gym Landing Page by Dima Panchenko


Landing page for the shop selling travel gear


Travel Gear Landign page by TUBIK


This one features the layout of a landing page for e-commerce. The company presented by it sells gear for extreme sports and active traveling so images were selected to set immediate understanding of the main theme. The page includes general description of the shop, presents ability of transition to the catalog via description of hot offers and also has testimonials part to provide users’ opinion about the service. Good combination of visual elements on the background as well as dynamic photos support the clear setting of the theme and provide the strong associative link to potential buyers enganging them and informing about the nature of the offer.


tubikstudio travel gear landing


Travel Gear Landing Page by Tania Bashkatova


Landing page for a service selling wood products


landing page TUBIK design


Here is a landing page concept for the company offering handcrafted wood products for everyday life. The main design idea was to use wooden textures in some parts of the page to visually maintain wooden atmosphere and create a feeling of naturalness. The dark background helps to emphasize the colorful elements and make the overall color scheme more intense and stylish. Types and fonts were carefully selected and tested in order to strengthen general composition and provide readability for all the copy elements on the page.


TUBIK webdesign landing page

Wood Products Landing Page by Alla Kudin


Landing page for a digital non-profit product


landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver by Vladyslav Taran


The landing presented here has the aim to inform users about a free education service Capitoledge Screensaver which provides the opportunity to use screensaver for studying capitals. Here you can see the upper part of the landing page which features interesting and engaging animation activated by smooth scrolling. Visual presenation is full of air due to light background which also provides easy readability and quick perception of the background map image. 


Landing page for an adventure agency


landing page design TUBIK

Adventure Agency Website by Valentyn Khenkin


Here is the concept design, presenting a landing page for an adventure agency specializing in air-balloon tours. All the information blocks are supported with bright thematic photos while copy blocks move users through the sales funnel stages. Again, light background feels harmonic and naturally adds air to general design presentation.


So, practice shows the diversity of techniques and methods to make a landing page informative and attractive. Nevertheless, to retain users, trendy and pleasantly-looking design should just cover effective functionality and user-friendly solutions which are accomplished according to business goals and user research. Otherwise, beautiful design will work like a hard landing immediately erasing all the positive vibes caught during the flight and that is a fast way to reduce conversion rates which are actually the main purpose of landing pages. Put usability, informative value and functionality first, think over the logic, transitions and intuitive navigation — and visual design will become a great support for smooth and effective landing!


Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.

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

tubik studio home page design

Home Sweet Home. Strategies of Home Page Design.

Home is usually associated with the place where you feel comfortable, convenient and safe. That is why, perhaps, the saying «Home is where your heart is» has gained its popularity. For many of us, web network has become an integral part of everyday life, both professional and personal, so no wonder the word «home» describing the main page of a website stays much more common and frequently used than all the other versions.


Talking about webdesign, home page in fact is the place which should make the interaction with a website of any complexity convenient and positive. Any designer wants to create it as a place where users can find everything they need easily and quickly. So, this object of design effort is strategically significant as most users dealing with a final web product in vast majority of cases have a chance to interact with a home page, even if its not a place from which they start a jorney around the website.


Earlier, we have already provided our readers with general explanation of home page and its typical features in the issue of UI/UX glossary devoted to web design issues. This time let’s extend the basics with some ideas and strategies important to consider designing home page.



What is a home page?


Home page is the most popular name for the main page of the website. It is called home as it usually provides starting point with many further directions for the user, containing direct links to the most important areas of interaction with a website. In other words, it can be also named initial page or index page. Home page is mostly the start of users’ journey if they are directed to the site by search engines which means that it is the page which is visited by the biggest number of website users.


In addition to essential links to different website parts, home page often contains search field, basic onboarding functionality for personalized sites, different areas of navigations showing users diverse categories of data. It might also contain engaging welcome messages and copy blocks featuring slogan and/or explaining benefits of the website or objects it presents.


More than a decade ago famous expert in usability Jakob Nielsen wrote Top 10 Guidelines for Homepage Usability in which he said: “Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that’s not even a square foot in size. For good reason. A homepage’s impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company’s face to the world. Increasingly, potential customers will look at your company’s online presence before doing business with you — regardless of whether they plan to close the actual sale online.” Long time has passed since then but clear and user-friendly home page is still the issue of vital importance for an efficient website.


Home page is actually a basis of good navigation which is usually the core of positive user experience. Messy interface and badly designed layout can become the reason of user confusion and annoyance.

tubik studio homepage design

Event Agency Webpage by Tania Bashkatova


What does a home page usually include?


The aspects of interaction with a website home page should advisably provide the following data:


— the nature/theme of the website: the users need to understand immediately if they deal with a company website, professional blog, e-commerce website, social network, personal blog, educational platform etc.;


branding elements or other stuff supporting the web product identity: home page should be easily recognizable, memorable and identified by users among tons of others. Thoughtfully accomplished branding can be used to serve these goals, at least presented with a logo and corporate color palette. It plays the vital role for commercial and corporate websites which should feature strong connection with a particular brand or company; however, for non-profit or personal websites elements of identity also have a great impact on boosting usability and memorability;


goals and utility of the website: it’s important to let users know what is the purpose of the website and what users’ needs it can satisfy. When users are provided with this sort of data during the first interaction with a website, they are ready to devote their most precious resource — time — to know more;


ability to search around the website content: the search field or button should be easily seen and recognizable as well as located in the area of high visual intensity according to eye-tracking trends;


navigation elements providing the ability to move to different sections and pages starting from the home page: the home page becomes the starting point of the route from which the user should get the ability to move to any essential and meaningful part of the website an also get back home any moment and from any point of journey;


contact information and preferably data about creators or responsibles: the home page is the place where users expect to get provided with the basic information about who creates, maintans and curates the website and how to contact people in charge if there is such a need;


— links to social networks: support of social networks is not only an effective tool of social marketing but also the good way to communicate to users. Social networks are now used by thousands of users on regular basis, so there will be always the ones who are interested to see how the website is positioned in the environment which is common and clear for them as well as contact via usual social network tools instead of looking for the means of communication on the website. Considering and applying this trend can be one more step to positive user experience;


testimonials or information supporting trust to the website: mentioning famous clients or partners as well as the signs of social popularity can be a catchy factor to learn more and further invesigate the website content.


Defined target audience and rigorous user research, made on the earliest stage of interaction and visual design, enable designers to sort out layout elements of the highest priority according to target audience’s needs, expectations and  peculiarities of psychological perception. Preferably, the components of the highest priority should be placed in the pre-scroll area of the home page to make their perception fast.


As home page is actually the front door to the website, definitely it should provide all the strategically vital information about the website which a user should be able to absorb in split seconds. It’s important to remember that not many users tend to spend much time investigating a new website: in most cases there is a couple of minutes to attract their attention and inform about the website while they are scanning the page. If this short time is used wisely to communicate the observers about the theme and benefits they can get, they will be ready to spend more time to learn further and browse the site.


For this reason, it is highly advisable for web designers to learn more about psychological and physiological aspects of user interaction with web products, in particular color psychology and studies about eye scanning trends, for example the investigations by Luke Wroblewski and Nielsen Norman Group. They are deeply helpful for designers seeking to create home pages with high level of usability which directly influences general conversion and bounce rates of websites. Knowing how users tend to scan the web pages, designer can apply the most important elements in the zones of the highest visibility and in this way make the page quickly informative and catching attention of target users or readers.


tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov


Should all the traffic be directed to home page?


The answer considerably depends on the nature and complexity of the website. The biggest deal to think over is the user attention and its concentration on definite areas of the websites in terms of solving a particular problem or satisfying particular needs.


For simple one-page websites this question is not actual: indeed, they represent only a home page which satisfies one or multiple functions and there is no other place where the traffic could be directed from the outer sources. The same happens if the website is not complex, home page in not overloaded with diverse links and navigation elements, so conversion can be reached right from the home page while other pages play secondary roles. In this case directing all the traffic to the most informative part of the site, which also enables a user to accomplish necessary action and get what they need, is a good idea.


However, for complex websites and platforms, especially if they satisfy multiple needs of broad target audience, this approach can be the step killing profitability and reducing conversion rates. The user can get scared, distracted or even annoyed with the tons of information they have to get through to find what they need, especially if the needs or wishes are focused on a particular narrow goal. Using landing pages in case when you need to concentrate user’s attention on something important, to make it noticeable and easily available can be the efficient way of solving this problem. Landing page is a tool to emphasize one item, to make it quickly found and reduce delays in cases when target user seeks for specific operations, services or items. This is the issue of especially high importance in case of ecommerce websites when unwise design solutions bring to poor user experience and financial losses. If you want to know more about effective use of landing pages, welcome to read about the topic in detail in our previous article.  Anyway, the approach in every case should be based on user research and then thorough user testing.


What are important aspects of efficient home page?


Among the numerous aspects essential for such an essential zone of high functionality as home page, we would define the following aspects as the ones definitely deserving attention:

— clear intuitive navigation and balanced visual hierarchy

— application of different menu types enabling to avoid overloaded page design

— utility of the applied layout elements

— readable copy easy to scan

— length of copy blocks that correspond to target users’ needs and expectations

— usage of language (vocabulary, syntax, modality, keywords etc.) which is understandable and appealing to target audience

— intensity of graphic visual content

— short loading time of the webpage

— thought-out and efficient search

— responsiveness of the webpage when it’s opened on different devices and screens with various resolutions

— effective application of keywords

— good balance of tradition and innovation

— accessibility of the home page from any point of the website

— easy and clear recognizability of the home page in comparison with the other pages of the website

— consistency of visual design solutions

— visible and informative call-to-actions

— defining most important content to get it supported and strengthened with visual design solutions.


Here are some more design concepts for home pages accomplished by Tubik Studio designers.


home page landing tubikstudio

Comics Shop Home Page by Dima Panchenko


tubik studio design

Structure – Architecture Blog by Ernest Asanov


Recommended reading


Here are some more articles we could recommend for those who would like to get deeper into the topic of home page design. Some of them are classics while the others represent the ideas around quite modern and fresh trends, anyway all are useful for those who want to design helpful, usable and attractive home pages :

Top 10 Guidelines for Homepage Usability

6 Features a Prospect Needs to See on your Homepage Design

The Ten Most Violated Homepage Design Guidelines

5 Things to understand before designing Homepage for your start-up website

113 Design Guidelines for Homepage Usability

36 E-commerce Homepage Design Best Practices from the Experts

6 Elements of Outstanding Homepage Design

Home page principles

How eye scanning impacts visual hierarchy in UX design

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

tubik studio graphic design illustration

Tubik Monthly Review. June.

Hot summer days are full of bright impressions, various design projects, creative brainstorms and productive teamwork. Starting a new month, let’s remember what was done in June.


Our Dribbble page got new shots presenting various design concepts: graphic design, mobile interfaces, landing pages, animations were posted by studio designers.  Let’s look through the June shots. If you are interested to see all the details  full-size, just follow the links.



Vinny’s Bakery by Ernest Asanov


icon pack tubik studio

Bright Icon Pack by Ludmila Shevchenko


tubik studio landing page design

Landing Page. Design Issues by Marina Yalanska


character illustration tubik studio

Indian Dreamcatcher by Arthur Avakyan


travel app tutorial tubik studio

Travel App Tutorial by Denys Boldyriev


3d animation tubik studio

BeBright App 3d Animation by Kirill


book swap app tubik studio

Book Swap App by Ludmila Shevchenko


web design tubik studio

Web Design Glossary by Marina Yalanska


tubik studio healthy food animation

Healthy Food App by Ernest Asanov


gym landing page concept by Tubik

Gym Landing Page by Dima Panchenko


tubik studio illustration graphic design

Muscles Magazine by Denys Boldyriev


tubikstudio travel gear landing

Travel Gear Landing Page by Tania Bashkatova


Surely, we took a chance of publishing some articles here in Tubik Blog about actual design issues. In case you missed any of them, look through the list of topics discussed in June:

  • UI/UX Glossary. Web Design Issues.  New set of UI/UX design glossary focused on basic terms used in webdesign sphere. Here you will find the explanations and examples of webdesign as a sphere of human activity, responsive design, home page, landing page, footer and header.
  • ITEM 2016. Conference Connecting Experts. The review of ITEM-2016, big IT conference held in Dnipro, Ukraine, which became a bright start of our summer. Great speakers and guests from different countries, wide range of topics and many bright moments of professional communication.
  • Design Is a Job. 30 Honest Quotes by Mike Monteiro. Fresh set of quotes about design issues. This time it is based on useful and helpful book «Design Is a Job» by Mike Monteiro, the co-founder of Mule Design who is deeply and sharply honest about not only the benefits but also pitfalls of design process.
  • FAQ Design Platform. Human-Centered vs User-Centered. Are the Terms Different? The issue of FAQ Design Platform concentrated on slight nuances in definitions of human-centered and user-centered design with examples by studio designers.
  • Business Terms in Design for E-Commerce. Sales Basics. When in Rome, do as the Romans do. When in business, know what the business people talk about. First set of key business terms for designers who work for e-commerce: conversion, sales funnel, sales channels, niche, 4P etc.
  • UI in Action. 15 Animated Design Concepts of Mobile UI. The diverse set of design concepts providing practices by studio designers in interface animation. Motion design ideas for various mobile applications, supporting layouts from slightest motion accents up to core interactions.
  • Short but Vital. Key Abbreviations in Design for Business. The article continues to set the bridge between business and design. This time we consider popular abbreviations such as MVP, USP, B2B, B2C, C2C and their influence on design solutions in perspective of UI, UX and branding.


tubik blog article


As usual, we were keen to actively share our knowledge and experience answering questions about various design topics on Quora. Here are the most popular ones in June:

What blogs can help me become well versed in UI, UX and usability standards?

— What is a home page?

What is a landing page?

— What’s the difference between human-centered design and user-centered design?


Tubik studio on Quora


Design events were also a bright part of the month. In June the team of studio managers attended the conference ITEM-2016 and designers attended Shuba meetup.


ITEM conference IT Tubik managers


Tubik studio designers


June moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page.


tubik studio design office


tubik studio designer ecommerce


Definitely, we didn’t miss the chance to share our ideas and experience via Medium and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.


Welcome to join us wherever it’s convenient for you. Positive summer vibes and bright inspiration to everyon. Let’s meet a new month of projects, ideas, meetings, fresh design concepts and wise tips from experts. Stay tuned!

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

tubik studio design business

Business Terms in Design for E-Commerce. Sales Basics


«Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.» (Erik Spiekermann)



Modern design has multiple faces, sides and directions. Some of them are more artistic than the others which are deeper concentrated on profits and goals. However, any way it goes design is the sphere with different perspective. Design is goal-oriented and problem-solving activity applying art to serve people.


«Whether you are helping to launch a new business from scratch, or making incremental changes to an existing product, or something in between, any design task you undertake must serve a goal. It’s your job to find out what those goals are.» (Mike Monteiro)


Talking about the sphere of web and app design, one of the most practical and goal-oriented fields of creativity is design for e-commerce. In this domain, there are many factors influencing design decisions and lots of relevant aspects to study and research. Designing a product for ecommerce, be it a website, a web or mobile application, branding design, advertising materials, designers work within various limitations built by particular product or service features, target audience, marketing and promotion strategy, business goals, budget and investment plan etc. Design becomes a tool working when used properly. Therefore, to use it efficently, the designer needs to know the basics of business and economy as the goal of design process in this case is creating an app or a website raising money and built on business techniques and methods. Moreover, quite often designers creating e-commerce platforms and products work in team with marketologists, advertisers, researchers, analysts and psychologists all of whom have a purpose to increase the level of profit brought by the final product.


So, today we decided to start collecting and explaining here basic business terms which are important in the process of digital design for e-commerce. Considering this list can make the designer much closer to marketologists and provide great help for better communication. In addition, keeping the aspects mentioned below in mind on the earliest stages of design such as UX research and wireframing is a good way to effective solutions increasing profits on the solid well-thought-out logic of interaction. The set of terms can be also useful for project managers involved in the process and managing collaboration between different sides of the same process.


tubikstudio design office teamwork


Business Basics


Today’s section is focused on basic terms used in the domain of economics and business strategy mostly concentrated on sales in their broad understanding. Taking them into account and analysing significantly increases the chances of creating efficient digital product.


«A satisfied customer is the best business strategy of all.» Michael LeBoeuf


E-commerce (Electronic Commerce)


«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful.» (Jeff Bezos)


Definition. E-commerce is the direction of business activity when the process of providing customers with goods or services is done by means of electronic devices and the Internet. This sort of communication and finalization of sales adds some new aspects to data management, sales channels, advertising, presenting goods and services and moreover — enabling full cycle of commerce operations, including payments, delivery and refunds.


The last decade witnessed booming ecommerce development. Today it provides the opportunities for not only e-trade both from businesses to buyers but also online auctions and user-to-user sales platforms. E-commerce systems and activities today include presenting and booking wide range of services, e-banking, commercial operations with e-money and e-wallets, diverse forms of e-marketing and many other things which customers are using more and more often on everyday basis.


Design aspect. Obviously, success of e-commerce activity depends on several factors among which:

— quality of the product or service offered

— quality of the content presenting the offer to customers

— quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.


So, it’s easy to see that UI/UX design part plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of target user.


Designing e-commerce website or mobile app, designers should definitely consider the following aspects:


— operational simplicity

— strong branding

— security of users’ data

— effective use of visual elements

— clear data presentation via menus, catalogues etc.

— user’s ability to leave feedback about goods and services

— easily available general and contact information about the business providing goods or services

— design that supports the offer not overshadowing it.


tubikstudio ui animation

Product Card Animation by Alla Kudin




«It’s much easier to double your business by doubling your conversion rate than by doubling your traffic» (Jeff Eisenberg)


Definition. Initially in terms of e-commerce, conversion is the index showing how many visitors actually moved to the end of the way they were offered actually buying a product. So, for e-commerce conversion transforms visitors (users) into buyers.


Design aspect. Today ecommerce uses wide range of techniques, so in terms of web or app platforms meaning of conversion also gets broader. In modern terms of comprehensive and numerous functions and needs, which users are able to fulfill with online resources and digital products, conversion is the rate of cases when visitors did the action they were called to. And that can be not only buying something.


For example, in our article about landing pages which are recognized as one of strong tools for e-marketing and e-trade we mentioned that conversion can be also fixed in case of:


  • moving to direct use of a product
  • subscription
  • transition to the other page
  • downloading an app or a file
  • providing some information
  • answering the question in the survey
  • starting free/discounted trial use of a product
  • browsing a library
  • reading more detailed description of the product or service etc.


Therefore, conversion for a webpage or app screen can mean different actions that correspond to sales or marketing strategy of the particular business.


Conversion means that your page transforms passive users into active. They don’t just observe the information given to them, but also do the action which is offered by this page. So, conversion is one of the most important indices of the web page or app screen efficiency which is vital for business. It is a metric reflecting focus on engaging visitors with data performance and stimulating them to make the action which is a part of a business plan.


For designers the factor mentioned above means that if they create design concentrated on conversion rates via positive user experience, their work will result in website or app bringing profit both for user and business.


Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh


Read more and review the examples on this topic in our previous article


Sales Funnel


«Communications is at the heart of e-commerce and community.» (Meg Whitman)


Definition. Sales funnel (in other words — purchase funnel) is a technique which is deeply customer-focused and based on gradual involvement of a customer into the process that potentially gets finalized with the act of actual purchase. When this technique is applied, the customer moves through several stages of involvement providing him/her with necessary information about the product and benefits persuading to make a purchase.


Basic sales funnel includes the following stages:


— Introduction (Awareness). User gets the initial information about the product, its brand name and nature. In other words, user learns that the product or service exists on the market.


— Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.


— Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.


— Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing-up about core benefits of the offer, data about additional bonuses or special offers, engaging call to actions and explanation of purchase process.


— Purchase. User makes a decision and takes the ability to make a purchase. The sale is done.


— Retaining (Repeating the experience). User gets the opportunity to leave feedback, obtain additional contacts supporting the offer, subscribes to updates, gets the chance to repeat the purchase easily if desired.


Design aspect. In terms of e-commerce, sales funnel is highly effective commercial technique supported with diversity of functions digital products can offer. Knowing the priciples of sales funnel leads to customer-centric, informative and engaging design solutions. Sales funnel can be either fully represented on the website or landing page as well as in mobile application or from outer source,  for example social media taking over the mission of awareness and interest and directing engaged traffic to the platform enabling the product.


In addition, sales funnel stages thought out and applied properly can work as a sort of filters letting quickly inform users about the product or service and move to the next stage those who are potentially more interested while saving time and effort for those who are looking for something other.


However, sales funnel designed carelessly can play the opposite role: it can confuse users who are potential buyers and turn them out of the website or app without taking a chance to know proper information about the offer.


Sales funnel should be applied and designed on the basis of thorough research of target audience and market segment. Moreover, it should be carefully tested from the very start of its implementation to measure if all the stages work efficiently. Practice proves that even minor design changes can bring big changes.


website design concept tubikstudio

BRMC Website by Konst


Sales Channel


«It is not your customer’s job to remember you.It is your obligation and responsibility to make sure they don’t have the chance to forget you.» Patricia Fripp


Definition. Sales channels are the ways through which the potential customers come to the point of e-commerce, be it a website or mobile application with which they can realize the actual purchase.


Design aspect. Designing for e-commerce, it is important to take into account maximum of the possible sales channels which are really numerous in the Internet, from social networks to specialized forums, influencer’s reviews and tailor-made advertising campaigns. Researching and understanding those channels gives broader prospects to the actual point of sale which you are designing for.


There are several vital asects to remember about:


— Sales channels should be initially concentrated on target audience. There is always the place and time to broaden the perspective as soon as core target audience is involved. However, the attempts to «sell for all» and «design for everyone» from the launch can bring to waste of effort, time and money spent on design and promotion. Move gradually and measure the efficiency of design solutions at every step.


— Sales channels will work effectively from initial awareness stage if they witness strong connection to general brand identity. That is the reason to develop guidelines for online sources presentation in brandbook considering all the details of visual presentation and mission statement. Consistency is a powerful tool of both design and marketing.


— Sales channels should direct traffic to the places which enable users quickly get informed and make the actions they come for. For example, if the post in Facebook invites users to participate in summer sale, they should be directed right on the landing page of this sale, not to the home page of the website.


The mentioned factors thought out at the stage of thinking over UX design solutions are able to make a good impact on conversion and sales rates.




«We will continue to see a convergence of the digital and physical world. Those who conquer that trend will be market leaders.» John Phillips


Definition. In business, niche means concentration of the offer on specific needs, wishes and problems of a specific target audience. Niche market is a specialized market segment which is aimed at specific market needs with a close view on its demography, education level, level of income and purchase abilites etc. For example, when one company produces software generally used for creating and editing textual materials for broad target audience while the other is adopted for specific needs of copywriters and editors (grammar checking, plagiarism analysis, synonyms prompts etc.), the latter one presents the niche business.


Design aspect. Designing for niche market and niche product, it’s important to learn all the details about the target audience as it is going to be quite specific and more details are usually influencing the process of design and marketing. Applying psychology of color, copy targeted at potential clients, deep analysis of their needs and providing efficient layout, easy transitions, clear data presentation and aesthetic features that suit this particular audience is good way to high profit. In addition, creative ways to emphasize specific nature of the product or service by means of design such as branding and original UI solutions can help the product to stand out of the crowd and stay competitive.


tubik studio ui animation

Bonano e-commerce interactions by Vladyslav Taran


Maslow’s hierarchy of needs


«It is quite true that man lives by bread alone — when there is no bread. But what happens to man’s desires when there is plenty of bread and when his belly is chronically filled?

At once other (and “higher”) needs emerge and these, rather than physiological hungers, dominate the organism. And when these in turn are satisfied, again new (and still “higher”) needs emerge and so on. This is what we mean by saying that the basic human needs are organized into a hierarchy of relative prepotency» (Abraham Maslow, 1943).


Definition. One of the basic psychological theories widely applied in business on both micro- and macroeconomical levels. Developed by Abraham Maslow, it is focused on the hierarchy of human needs and consequently factors of motivation.


Its presentation found at Simply Psychology website features  5 levels of human needs featured by the theory:


1. Biological and Physiological needs — air, food, drink, shelter, warmth, sex, sleep.


2. Safety needs — protection from elements, security, order, law, stability, freedom from fear.


3. Love and Belongingness needs — friendship, intimacy, affection and love, — from work group, family, friends, romantic relationships.


4. Esteem needs — achievement, mastery, independence, status, dominance, prestige, self-respect, respect from others.


5. Self-Actualization needs — realizing personal potential, self-fulfillment, seeking personal growth and peak experiences.


Design aspect. Having read the points of the theory, it’s easy for a designer to ask: «What does it have in common with design process?» The link perhaps doesn’t look really obvious, but it is fundamental in motivating people to use or buy products or services on different levels of economic relationship. Designing for e-commerce, which is one more type of human relationship, with a specific goal and ability to apply the mentioned theory can produce user-friendly and customer-centric product achieving its target audience and solving its problems.


Certainly, it’s great when designer is able to involve professional marketologists into all the stages of the creative process and apply their professional knowledge and skills in design form. However, this opportunity isn’t always available. Moreover, designer able to analyse economic basics and business factors influencing the design scheme and logic gets the higher level of proficiency.


In design for e-commerce, it is good to understand from the early stages of the process what stage of the Maslow’s pyramyd the core target users are at. Answering this question, designer is able to talk to users’ in their language and find the solutions that resonate in their hearts and minds the best. Users’ needs form their motifs, triggers that can catch their attention, words that can touch them, length of copy and calls to actions that they are ready to accept and follow. Analyzing the level of needs and expectations, designer is able to find the most efficient layout and informative graphic elements. Knowing and feeling the user is the solid foundation for problem-solving goal-oriented design.


ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko


4P Theory


“People don’t call it e-commerce anymore. It’s called omni-commerce, and it’s the idea that digital permeates every step of the purchase chain from product discovery to trial to pricing to actual purchase.” (Tolman Geffs)


Definition. Famous 4P theory, presented by Neil H. Borden and later grouped by E.Jerome McCarthy, also known as marketing mix, has become highly popular and efficient in business strategy, including e-commerce sphere. It states that product launch and lifecycle is based on four «P» factors: product, price, place, promotion. Business Case Studies website simply formulates it the following way:


«When marketing their products, firms need to create a successful mix of:

  • the right product
  • sold at the right price
  • in the right place
  • using the most suitable promotion.»


Marketing case studies prove that missing even one of four mentioned positions can waste all the effort and reduce the levels of profit and brand awareness significantly.


Design aspect. No doubt, 4P theory is highly applicable in design for e-commerce. The Price of product is usually the furthest part from designer’s decisions as it is decided and given by the stakeholders ordering design part of work. In perspective of Product it works only partly being applicable to those cases when users buy digital products or services, let’s say mobile applications, which also need UI/UX design.


However, talking about the other two factors we can see how actual they are in terms of design effort and creativity. Indeed, designers creating websites or apps for e-commerce, create the right Place for trading and are responsible for making this place comfortable, attractive and correspondent to the product nature as well as target audience expectations. As for the Promotion, today online marketing features numerous ways of presenting the product and achieve the target audience; it’s effectiveness also significantly depends on design decisions. 


Neglecting close interconnection and mutual influence of all those factors on the final result increases risk of poor rates. Design decisions made on the basis of those factors supporting each other help to provide pleasant, positive, easy-to-use and user-focused e-commerce platforms.


Tubik studio UI animation

Tubik Studio | Museu by Ernest Asanov


The bottom line


The set of business terms and their definitions given above builds the bridge between business strategies and designs able to efficiently support them. However, it’s very easy to get overwhelmed with all those techniques and forget the first and most important thing. There are no any sophisticated design solutions, marketing techniques and any sort of magic which will sell the bad product for a long time. Surely, there can be some effect, but it will never retain the users. Positive experience of interaction with a website will not overcome bad experience of interaction with low-quality product or service.


The offer is the key. Design is an actionable and helpful tool on every stage of launching, presenting and promoting the product, informing users about it and selling it in fast and easy way. Nevertheles, if the product is of poor quality, successfull design of e-commerce platform isn’t going to make it better. Think over the product and its user first, only then design will give it the chance to beam at full.


«To satisfy our customers’ needs, we’ll give them what they want, not what we want to give them.» Steve James


tubik studio designer ecommerce


Don’t miss our next article which is going to present the set of business terms useful for UI/UX and graphic designers in terms of marketing and user research. Stay tuned!

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

tubik studio UI designers

FAQ Design Platform. Human-Centered vs User-Centered. Are the Terms Different?

Today’s issue of our FAQ Design Platform in Tubik Blog will concentrate on the difference of terms «human-centered» and «user-centered» which now have become a sort of basic ones for the sphere of web and app design. The answer is based on the thoughts we have provided for the question on Quora which you are always very welcome to read and where we are happy to share our ideas, knowledge and experience.


Tubik studio on Quora


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


What’s the difference between human-centered design and user-centered design?


That’s really true that the two terms mentioned in the question are widely used replacing each other in different contexts and percieved as equals. The difference between the meaning people put behind those words is really slight and blurred that it is easy not to notice it at all. However, with a content manager onboard holding a degree in linguistics and being a keen lover of slightest semantic nuances, we decided to get deeper in the issue. As research and practice show, although these terms in fact have the same roots, the idea they present is viewed in a bit different perspective.


It can be supposed that human-centered design is the process of creating things deeply based on general natural characteristics and peculiarities of human psychology and perception. It doesn’t matter if you design furniture, cars, stationery, TVs, websites or anything else — any object of design can be made human-centered on the ground of psychology, physiology, sociology and other sciences analysing human life and interaction with the environment. It means that human-centered product will be not only nice but also functional according to psychological traits and features typical for big groups of users.


A really good and simple definition is found in the article «Characteristics of Human Centered Design»: «…human centered design can be defined as the process that places the human needs and limitations in a higher priority compared with other targets during the design thinking and production differential stages. During this process, the designer is required not only to analyze and come up with solution for existing problems, but test and validate the designed products or service to achieve planned targets in the real world.»


For example, there are basic conditions of general physical human abilities, color perception, contrast perception, readability, interaction with a product in different environments that are typical for vast majority of people. Let’s say, typically people are not able to see in the darkness, and the darker is the environment, the harder it is for most people to percieve something visually, doesn’t matter what age, education level, social layer, professional skills you represent. This is a common human physical characteristic. Neglecting it means creating a product which people will not be able to use properly being limited in their abilities. 


Creating objects which people are going to interact with, designers have to be aware of those traits and take them into account in the process. That is the reason to study at least the basics of psychology, physical and emotional perception for designers who would like to create things convenient and friendly for people in general. We also believe that is a strong reason to involve psychologists, behaviorists, physiologists and other experts into the process of design.


ipad interaction tubik studio

GIF — Portrait vs Landscape by Sergey Valiukh


Here you can see the interactive concept of transition from portrait to landscape mode. It is based on general ability and necessity of any user of digital product used on iPad to get the feedback from the system that the action of transition from one mode to the other is done. If it is done smoothly and with quite natural speed, that is one more element of positive user experience, sometimes even unnoticed as the microinteraction takes split seconds. The presented example actually imitates interaction with a physical object and therefore makes user experience more clear and positive for users of different age, gender, educational background etc. This is actually the small piece of human-centered design solution.


Continuing the theme, user-centered design is more focused and concise version of human-centered design with deeper analysis of target audience. It is concentrated on not only human characteristics and perception in general but also specific traits and features of target users to make problem-solving potential of the designed product as high as possible in perspective of its users. This is the stage when details about the target user of design object start playing their role: defining target audience, designer takes into account age, gender and social status, potential education level and professional background, influential social factors and typical environments of product usage etc. On this basis, designer makes deeper research on preferences and peculiarities, special aspects of interactions, specifying general human-centered ideas with important details of target audience’s preferenсes, emotional and physical perception traits as well as levels of technology awareness and tons of other factors. This is what we usually do on the stage of user research here in Tubik Studio and practice shows this stage is vital for creating problem-solving and user-friendly designs.


So, it can be said that human-centered design is the first obligatory step to making the product applicable, while user-centered solution is the next step to make it concentrated on pains and needs of specific category of users.


Let’s look at one more example.


Contact List Concept Scrolls Tubik


Contact List Concept Scrolls by Eugene Cameel


This design concept for a contact list looks nice and voguish. It presents two different variants of scrolling the directory and refreshes traditional interaction experience. It is grounded on basic aspects of readability, contrast, visual hierarchy, provides clear feedback to user’s actions and necessary functions. It follows basics of coloristics, logics and visual harmony. Certainly, it is human-centred. No doubt, big proportion of teenagers and millenials, people who use diverse interfaces every day and see them as an integral part of their life, will be engaged and would like to try it. However, for older people this sort of interface can seem a bit scary and overloaded as well as somehow darkish comparing to simple traditional interfaces based on light background. So, this user-centered interface responds to the wishes and preferences of narrower target audience.




Here is one more case featuring web design concept by Ernest Asanov. It represents interface design for a website presenting online bakery selling. On the basis of the design solutions it is easy to assume that this is the service positioning itself as a producer of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Therefore, the website is designed aimed at particular target audience. As we mentioned in one of our previous articles about benefits of dark background in user interfaces, dark color solutions can form popular associations in visual perception. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige and power. This is the style provided by the presented design: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action. The designer worked out the solutions that will look attractive and informative for target users wishing to feel the exclusivity and high-quality of the product and able to pay more than average. Therefore, this example also shows the techniques of not only human-centered, but deeper user-centered design.


However, supporting previous answers given by other professionals along this question on Quora, it also has to be mentioned that in modern design, especially in digital field like creating applications and websites, human-centered design and user-centred design are most often inter-replaced and used basically as full synonyms. Perhaps that happens because in this sphere most products are created and updated for certain category of users rather than “for all and everybody”. Moreover, users of all the digital products are people, therefore all the solutions should get based on the positions of human-centered design. Certainly it doesn’t mean that universal interfaces cannot be found: they do exist and we apply some of them on daily basis, so they are a good example of general human-centred design that successfully applies knowledge about features typical for great majority of users. However, they are closer to the exceptions which prove the rule.


So, in terms of web and app design we can assume that description of design as “human centered” or “user centered” just shows different levels of detalization in design process, different stages one of which considers human interaction features and the next gets deeper in details of certain categories of users, thier needs, wishes and problems.


The great example of synonymic perception of the terms is the video powered by IDEO (Design Kit), great experts in human-centered design.



Again, it’s important to emphasize that the definitions given represent our personal vision of the terms based on linguistic nuances of given terms and practical experience of processes in design studio with all respect to other points of views.

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

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

Welcome to read us on Quora

Landing page design by Tubikstudio

UI/UX Glossary. Web Design Issues.

Perhaps you remember our previous issue of UI/UX Glossary dedicated to general terms of creating design with high level of usability. We were discussing the difference between UI and UX, which are often confused, explained the process and aims of wireframing and prototyping, presented our explanations of icons and microinteractions.


Today continuing the stream we are going to provide some new entries to our glossary, this time concentrated more on web design elements and techniques.


Web Design


Web Design is a term defining design field featuring all the activities connected with creation and maintenance of websites and pages both as pieces of practical interaction and the product with certain aesthetic qualities. Web design process includes full cycle of production path from the initial idea sketched roughly in pencil to elaborate visual performance, information architecture and updating design in the process of actual website use.


Web design as a term can also name the result of mentioned activity direction, which means that this word is used to describe structure, functionality, style and appearance features of a website or a webpage interface. In addition, web design also can include content generation and management.


So, it’s easy to see that the term itself is very broad and comprehensive. Due to this fact, web design as a domain of human activity lies on the crossroads of many sciences and practices. Among them we should mention:

  • drawing and composition
  • painting and coloristics
  • logic and schematism
  • analysis and statistics
  • visual arts
  • programming
  • user research
  • psychology
  • copywriting
  • branding and marketing etc.


Covering diverse aspects of a website functionality and appearance, some designers work in teams every member of which specializes in a particular sphere while the others can work out different of the mentioned aspects individually. Anyway, in vast majority of cases web design is the sphere of digital products which have to be functional and user-centered. As famous American designer Charles Eames said “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose” and his words totally reflect the idea of modern web design.


The authors of the book “Research-Based Web Design & Usability Guidelines” mention: “To ensure the best possible outcome, designers should consider a full range of user-interface issues, and work to create a Web site that enables the best possible human performance.” Working over a website, designers have to concentrate on such aspects as:


usability (the website is convenient, clear, logical and easy to use)

utility (the website provides useful content and solves users’ problems)

accessibility (the website is convenient for different categories of users)

desirability (the website is attractive and problem-solving, it retains users and creates positive experience which they are ready to repeat).


Here are some examples of web design concepts created by Tubik Studio designers.


tubik studio design UI

Randomizer concept by Vladyslav Taran


tubikstudio ui animation website design

Tubik Studio | Björn by Ernest Asanov


website design concept tubikstudio

BRMC Website by Konst


Home Page


Home page is the most popular name for the main page of the website. It is called home as it usually provides starting point with many further directions for the user, containing direct links to the most important areas of interaction with a website. In other words, it can be also named initial page or index page. Home page is mostly the start of users’ journey if they are directed to the site by search engines.


In addition to essential links to different website parts, home page often contains search field, basic onboarding functionality for personalized sites, different areas of navigations showing users diverse categories of data. It might also contain engaging welcome messages and copy blocks featuring slogan and/or explaining benefits of the website or objects it presents.


More than a decade ago famous expert in usability Jakob Nielsen wrote Top 10 Guidelines for Homepage Usability in which he said: “Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that’s not even a square foot in size. For good reason. A homepage’s impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company’s face to the world. Increasingly, potential customers will look at your company’s online presence before doing business with you — regardless of whether they plan to close the actual sale online.” Long time has passed since then but clear and user-friendly home page is still the issue of vital importance for an efficient website.


Home page is actually a basis of good navigation which is usually the core of positive user experience. Messy interface and badly designed layout can become the reason of user confusion and annoyance.


Here are some examples of home pages created by Tubik Studio designers.


home page landing tubikstudio

Comics Shop Home Page by Dima Panchenko


tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov


Landing Page


Recently we published an article devoted to functionality and efficiency of landing pages. Let’s remember key points here.


Landing page in its basic wide meaning is the term used for analytics to describe any page where the user started his or her journey around your site, in other words, where a user lands on the website. However, today the other, more specific meaning is used much more often to define a landing page. Behind this term, people understand the special web page created for presentation of the specific product, service, features or options so that the visitor could get necessary information quickly and easily not being distracted. That is why the analysts say a landing page is in most cases of marketing and presentation of particular product or service is much more efficient than home page. Home page can have too many options and getting through all of them to find the particular product the user can get distracted from making the decision, lose interest or even get annoyed.


Why is landing page needed? As we mentioned in the case study about designing a landing page, it is easy to answer this question with a little metaphore. Imagine, you are going to visit, let’s say, New York to walk around Manhattan. That is the dream of your life. Finally you find the service which offers to take you to New York City fast and cheap. Great, isn’t it? You pack your bag, you charge your camera, you get up full of admiration as the dream of your life is going to get real. And then you are taken by those amazing people who offered you the realization of your dream to the entrance point of New York City. They leave you there to find Manhattan or any other place you want by youself. How do you like it now? Who knows, perhaps you will be not so happy after exhausting journey around the huge city looking for the place you want. Wouldn’t it feel great to be taken right to the destination, fresh and ready to admire and absorb positive emotions? Wouldn’t you as a customer be happier to reach your goal faster and easier? Sure, yes.


That is actually what a landing page does. When a person obtains the information from the outer source about the specific product, feature, information or service and clicks through the link to its provider, sure, he or she doesn’t dream to spend a lot of time looking for desired product or page among all the links and information provided on your homepage. The user wants to «land» directly at that very place which will make possible for him or her to get what they want as fast as possible and getting enough (but not too much) information to support their decision-making process. So, creating a well-thought-out landing page is really vital to strengthen marketing strategy and increase conversion rates.


In general, typical landing pages often have:


1) General idea of the presented object (product, service, activity etc.) with call-to-action element. Users need to be provided with basic description of the benefits, preferably not too detailed but concise and useful. The aim of this element is to inform the user and provide a clear and noticeable oportunity to actively use this information via call to action element which can be presented with a button, link, contact form, subscrition field etc.


2) Testimonials and signs of trust. People usually tend to trust more to what is already used or tried by other people and recommended as worth attention. Therefore, testimonials from clients, considerable numbers of followers in social networks, awards and certificates can have a great impact on conversion rate.


3) Description of the main features. This block of information can be used as an additional information supporting description of basic functionality. It supplies a visitor with more details about the product or service, its abilities and technical characteristics, its influence on life and productivity and the like. It certainly makes the landing page longer and requires more attention from users so applying this block should be always thoroughly analyzed.


Here are some examples of landing pages created by Tubik Studio designers.


Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh


tubik studio landing page design

Arts, Culture & Education Curation | Landing by Polina


landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko


Read more and review the examples on this topic in our previous article


Responsive Design


The necessity of responsive design is based on the audience you want to cover for your website. Would you like your users to use your site from any device and feel it positive, useful and convenient anyway? Sure, every customer would being aware of growing popularity of mobile devices. And in this case we should say confidently: you obviously need responsive web design for website.


The idea behind responsive web design (RWD) is that the content and layout of a website should efficiently adapt according to the sizes and technical abilities of a device it is opened at. For most users, these changes are so subtle that it is easy to say “ Hey, guys, this is the same site on my smartphone which I looked through yesterday at my desktop. Nothing special has changed here!” And somehow these words can be the great praise of designer’s work. That will mean that the designer managed to keep all the meaningful elements and general layout of the desktop version efficiently and at the same time avoid making the page or layout elements too small, hardly seen or impossible to distinguish even on the much smaller screen of a mobile device. That is RWD in action.


Nowadays making the site non-mobile-friendly means to lose the part of audience which likes surfing and using the internet sources “on the go”. It’s vital to consider that this part of the audience is mainly the most active part, non-afraid of technologies, fast in browsing necessary information and options, easy-going in making internet purchases and try new products. That’s why neglecting the idea of RWD can bring real loss to the product which otherwise could be highly efficient and bring high conversion rates.


In the book «Responsive Web Design» experienced designer Ethan Marcotte says: «…web design is about asking the right questions. And really, that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility. In the first chapter, I said that the ingredients for a responsive design were a fluid grid, flexible images, and media queries. But really, they’re just the vocabulary we’ll use to articulate answers to the problems our users face, a framework for ordering content in an ever-increasing number of devices and browsers. If we’re willing to research the needs of our users, and apply those ingredients carefully, then responsive web design is a powerful approach indeed.»


Creating responsive web-design for a web-product means making it pleasant-looking, clear and functional in different sizing with optimal navigation that provides high level of usability. This technique relieves a owner from the necessity to develop several versions of the site as it provides one site with fast adaptation to different technical conditions, so RWD is also generally cheaper than creating several versions of the site. Responsive web-design makes the site flexible, easy to manage and nice to use. Moreover, you don’t need to publish your content several times for different versions and it saves your time or human resources. If these are the features you want your product to obtain, than consider responsive web design for your product from the earliest stages of its design and development. In addition, you will get higher positions in Google search engine as it supports the idea of RWD, so that is important part of general search optimization of your product. Therefore, it’s up to you whether to apply RWD for your web-product or not, but consider all benefits before making your decision.


Tubik Studio Tracking App


Read about this topic in our previous article




In terms of web layout elements, header is the upper (top) part of the web page. It is a significant and strategic part of the page as it is what people see before scrolling the page in first seconds of introduction to your website. Therefore, header should be informative and provide the most important information about the digital product so that users could scan it in split seconds. Header is also the area providing broad field for creative design solutions which should be catchy, concise and useful. Headers are often referred to as «Site Menus» and positioned as a key element of navigation in website layout.


Headers can include:


— basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors etc.

— copy block setting the theme of the product or service presented

— links to basic categories of website content

— links to the most important social networks

— basic contact information (telephone number, e-mail etc.)

— switcher of the languages in case of multi-lingual interface

— search field

— subscription field

— links to interaction with the product such as trial version, downloading from the AppStore etc.


Certainly the list above doesn’t mean that all the mentioned elements should be included in one webpage header — in this case, header section would be overloaded with information. On the basis of design tasks, designers, sometimes together with marketologisits, decide on the strategically important options and pick them up from the list or add the others.


The choice of typefaces for headers and the background color should get under highly rigorous research and testing as the aspect of readability in header plays vital role. User has to be able to scan and percieve this basic information as fast as possible without any sort of additional effort. Otherwise you risk providing non-user-friendly interface.


online magazine design tubik studio

Daily Bugle Online Magazine by Dima Panchenko


The design concept for a news website presented above features the header including the title of the website as a central element of the composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.


One more thing to remember is that there are different ways for a header to transform in the process of scrolling the page down. Some websites use fixed header, which always stays visible and active at any point of interaction with the website; others hide the header in the process of scrolling. There are also websites which do not fully hide the header but shrink it in size in the process of scrolling, which means that they hide secondary information and leave only the most important elements of the layout active and available during all the process of interaction.


Another design solution which is rather popular in perspective of header functionality is hiding basic links of data categories behind the hamburger button. It is called so as its form consisting of three horisontal lines looks like typical bread-meat-bread hamburger.


hamburger button tubik studio

Hamburger button by Kirill


This button is usually placed in header and nowadays it is a typical element of interaction. 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 minimalistic 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 as header elements. 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 UI design


Structure – Architecture Blog by Ernest Asanov


The presented design concept of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalistic principles featuring brand name lettering as a center of composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.


In one of the articles devoted to practices of header design, its author Bogdan Sandu mentions an important point that should be kept in mind:


People judge the quality of a website in just few seconds and a second impression is something absent on Internet. In conclusion, a website must be eye-catching else, it would be nothing more than a big failure.


Header can become a great help in presenting the essential data to the user quickly and providing positive user experience via clear navigation. However, that doesn’t mean that every website needs a header. There are many creative solutions providing designs applying typical header functionality in other zones of the layout. Every case of website design needs analysis and research of target audience for the product or service. 




According to everything mentioned above, it’s easy to understand that footer is the lower (bottom) part of the webpage. Footer usually becomes a marker of the end of a webpage. Also, being one more zone of global website navigation, in most cases footer provides additional field for useful links and data.


Footer can include:


— name and logo of the company or product

— links to user support sections, for example, FAQ page, About page, Privacy Policy, Terms and Conditions etc.

— credits to website creators

— contact info and forms

— links to company or product accounts in social networks

— testimonials and badges

— certification signs

— subscription field etc.


As well as header, footer is not the element found in 100% of websites. For instance, with some design tasks when designers apply infinite scrolling technique, traditional footer is not an effective navigation zone. However, in case of infinite scrolling, the idea of fixed footer can be also applicable and support navigation not losing this area. It should be said that for most users footer is a common place of looking for contact information, credits and sitemaps, so playing on this habit can be beneficial and fixed footer can become a good way in case when page has long scrolling area. Decision on using footer is always based on the idea of effective usability. Anyway, if footer is applied it should get in harmonic combination with all the other design solutions of the website layout and support general stylistic concept.


In the review of effective footer designs, Nathan Leigh Davis and the Creative Bloq team emphasize: «Designing a great footer is not about finding the best way to layout a lot of unrelated content, but the ability to prioritise and disregard unnecessary or superfluous information.» First of all, footer should provide information support and in this way strengthen the chances of positive user experience.»


The new 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 in which we are going to tell more about the types and fucntions of buttons, menus and other interactive elements of user interfaces. 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

tubikstudio website design ui

Tubik Monthly Review. May.

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


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


tubik studio landing page toys

Henderson — Handmade Toys by Vladyslav Taran


contact list design concept tubik studio

Contact List Concept by Eugene Cameel


tubik studio ui design dark

Dark Side of UI Design by Marina Yalanska


online magazine design tubik studio

Daily Bugle Online Magazine by Dima Panchenko


tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov



SwiftyBeaver. UI Design for Mac App by Marina Yalanska


landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko


tubik studio logo design case study

Case Study: SwiftyBeaver Logo by Marina Yalanska


lettering tubik studio design

Rapture Lettering by Denys Boldyriev


tubik studio application recipes and cooking

GIF Animation for Recipes and Cooking by Sergey Valiukh


monster intro animation tubik studio

Epic Monster Intro Animation by Kirill


Contact List Concept Scrolls Tubik

Contact List Concept Scrolls by Eugene Cameel


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


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


swiftybeaver article tubik studio


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


Why are illustrations important for UX design?

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

What is the difference between UI and wireframe?

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


Tubik studio on Quora

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


tubik studio designers instagram


Tubik studio design team


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


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

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

tubikstudio graphic design icons

Visual Perception. Icons vs Copy in UI

Our eyes are a powerful instrument of getting great deal of information in split seconds. What is more, we do not need to apply too much effort: most of data is absorbed unconsciously. And that puts the issue of visual perception in the top significant concerns in the sphere of design, especially in product design which solves user’s problems and satisfies needs.


We have already shared our ideas about the role of icons in interfaces in the article describing their most important advantages. Today’s article deals with one of the aspects initiated by Quora questionIn UIs, do people recognize icons faster than words?” Having shared our ideas in the answer, we decided to provide its extended version here for our readers.


tubik studio icons design


The aspect of speed


Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces such as icons and their impact on general efficiency of the product has been an actual topic in global design community for a long time.


In the scientific research about visual perception, after theoretic analysis and the set of practical experiments,  A. Santella made a conclusion: “The fact that eye tracking is sufficient for some level of abstraction in our context makes an interesting point. It suggests that the understanding underlying abstraction, and perhaps other artistic judgments, is not some mysterious ability of a visionary few, but a basic visual competence. Though not everyone can draw, everyone it seems can control abstraction in a computer rendering.” People in general have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of high level of abstraction. That is the important fact designers widely use to improve usability and navigability of their solutions.


If the only aspect a designer is interested in using icons is speed, then the idea in the original question will work positively. Yes, in vast majority of cases people fix and percieve pictorial elements like icons and illustrations faster than words. Great proportion of users are visually-driven creatures by nature, so the following mechanisms of visual perception often work and should be considered in design process:


  • human eye fixes images much faster that written text
  • as psychologists claim, people need about 1/10 of a second to get a general perception of a visual scene or element (that speed is indeed impossible for textual items)
  • visuals are transmitted to the brain much faster and important pieces of information are often fixed by brain as visual images even if they were obtained via text perception
  • images are less vulnerable in combination with the background and surrounding elements while text is highly dependent on the aspect of readability
  • images have a tendency to stick better in long-term memory which means that in interactions with the interface people will not need to process and remember more data than it’s really necessary, so interactions get faster.


Moreover, icons and other sorts of visuals in the interface can make it more universal in cases when an app or a website is used by people from different countries. So, we can claim that using icons improves general comprehension. In addition, pictures push the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.


tubik studio tapbar ui

GIF of the Tab Bar Interactions by Sergey Valiukh


One the popular elements of layout where icons play highly practical value is a tab bar. Featuring interactive elements it has limited space capacity, therefore icons as the visual symbols of available interactions become an efficient design solution. The concept by Sergey Valiukh provided above shows that interface animation can liven up the visual elements and enhance microinteractions.


tubik studio design UI

Weather Icons Presentation by Valentyn Khenkin


Here’s one more example showing how icons provide a user with necessary information by visual means. Symbolic images of weather conditions are easy to understand and at the same time they save a lot of space and give the opportunity to make all the layout of the screen informative but not overloaded.


In user interfaces, where in many cases basic interactions should take seconds, this aspect is highly important and it is the essential reason to turn hell out of everything into graphic material. All the things mentioned above feature great advantage of visual elements of the layout, for example icons, as a tool of fast and easy interaction with the product. However, there are some more aspects to analyze before making final design decisions.


The aspect of meaning


On the basis of diverse design projects and concepts designed in Tubik Studio, we deeply believe that speed should not be the only reason to consider and analyze in the process of creating user interface layout. People can percieve icons super fast but if the message they transfer is not clear and can have double-reading, this speed will not bring positive user experience. Fast capturing of the icon bringing wrong understanding cannot be defined as recognition, it’s just fast noticing. Recognition means not only speed but also right action or information which this icon should bring to the user.


There are loads of widely-recognized icons such as a telephone receiver for a phone call, the envelope for mail, magnifier for search and so on. Certainly, using these icons you create much faster perception of the UI functionality than using copy instead of them. Nevertheless, in cases when the image of an icon is not so obvious, its usage should be thoughtlfully contemplated. If the icon doesn’t correspond with the goal and meaning it is assigned for, the speed of recognition doesn’t matter. That’s why there are cases when text transfers the idea or data more clearly and sometimes it is more effective to use double scheme, when the icon is supported with the text.


ipad interactions animation

iPad App Interactions by Sergey Valiukh


Here is the concept showing mutual support of copy and icons. This technique activates several elements of perception during one interaction and provides higher level of recognizability for call-to action elements. People, who instantly understand the symbol transferred with the icon, won’t pay big attention to the text. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstading or wrong interactions for people who can possibly misinterpret the meaning of the image. 


One more case when icons are often used together with copy are diverse side menus. Depending on the general stylistic concept of the interface icons can imply different level of complexity from simple stroke icons to sophisticated and detailed ones. 


tubik studio blog app

Blog App by Ludmila Shevchenko


This design concept of the blog app shows how icons can become a multipurpose visual element. In the presented interface they support the titles of the categories for blog posts. Textual presentation of the category is visually supported with good-looking and memorable image. At the same time, copy removes the possibility that different users can see different meanings of the images. What is more, in this case icons support another important function providing color markers for the categories. This technique makes interaction with the app faster and easier for users and at the same time enhances usability and navigation. 


Anyway, the decision on applying icon, text or both in the layout should be based on thoughtful analysis of the target audience and understanding the goals and conversions which have to be obtained via the interaction.


Reasons for applying icons in the interface


Summing up the points mentioned above, we can define several popular reasons of using icons in the interface:


— speeding up data perception

— enhancing memorability of the element via visual images

— improving navigation with visual markers

— saving up space on the screen or page when the long words or phrases are replaced with icons

— supporting copy material and providing its additional visual explanation

— supporting general stylistic concept and its harmonic expression in broad perspective.


PassFold UI design by Tubik Studio

User interface design solutions for PassFold project


Points to consider


Obviously, it is impossible to satisfy any user and consider every existing cognitive scheme, but still there are some general aspects which have to be thought out in the aspect of design with high visual perception:

— target audience (physical abilities, age, cultural background, general development and education level)

— typical user’s reading skills

— typical environment of product use

— level of global or local product spread

— level of recognition for the chosen graphics

— level of distraction/concentration provided by the graphics


All the mentioned points deal with human cognitive abilities influencing quality and efficiency of visual data perception. For designers, it’s important to bear in mind: it’s not enough to make users see the elements of the layout, it’s vital to make them recognize their meaning and quickly understand their message. Copy and icons should not fight against each other to see which one is stronger, they should support each other for the sake of better user experience.


Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu by Sergey Valiukh


Recommended materials


Diverse issues of visual perception have been an object of scientific and applied research for many decades. In terms of design issues, we could recommend the following articles for those who would like to know more :

What Designers Should Know About Visual Perception and Memorythe article by VanseoDesign analyzing basic aspects of visual perception in design perspective;


Design Principles: Visual Perception And The Principles Of Gestaltthe article by SmashingMagazine considering the principles of Gestalt theory essential for design practice;


Studies Confirm the Power of Visuals in eLearningthe set of ideas in Shift’s eLearning Blog based on the analysis of visual perception in interaction;


37 Visual Content Marketing Statistics You Should Know in 2016 – the article by HubSpot about trends on visual content with some stats;


From Icons Perception to Mobile Interactionthe scientific article about icons perception in mobile interfaces;


Visual Perceptionthe list of books on general aspects of visual perception which can possibly be helpful for those who are interested in the topic;


The Art of Seeing: Visual Perception in design and evaluation of non-photorealistic rendering – the theses of scientific research by Anthony Santella.

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

Welcome to read us on Quora

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