Tag Archives: mobile UI

UI animation mobile interfaces tubik blog

Motion for Mobile. 20 Creative Concepts of UI Animation.

A lot of trends have stepped aside but motion keeps its top positions in the domain of user experience for mobile and web. Animation has become an essential part of the effective user interfaces making them more interactive, fun and user-friendly.

 

Tubik designers know how helpful the well-crafted animation can be for usability of digital products, especially for mobile applications. Adding to diverse design ideas and practical examples shown on our blog before, today a fresh set of concepts with sophisticated UI animations is ready for your attention. Let’s take a look at them.

 

Vegan Recipe App

 

vegan_recipe_app_ui_animation_tubik

 

This is a concept of Vegan Recipe app enabling to choose the dishes based on vegetarian principles and add the necessary ingredients to the shopping list. Here you can see the basic set of interactions including choice of recipes with the horizontal swipe. When users tap on the specific recipe, they can see the detailed information on its ingredients and nutrition. The tab bar includes simple icons helping to navigate in the app.

 

Tasty Burger App

 

burger_app_ui_animation_tubik

 

Another food concept is fresh and juicy Tasty Burger App allowing users to order a traditional burger from the menu or customizing any option for themselves adding or removing the ingredients. The item screen is focused on the high-quality photo of the chosen burger making users want it even more. The ingredients are displayed at the bottom of the screen so users can add or remove them without efforts since it’s one of the easiest tap areas to reach. And finally a yellow CTA button “Add to Cart” helps to complete the purchase.

 

The menu screen includes brand name on the top to increase recognizability. Users can apply filters for the fast search or pick an item from “special offers”. All the UI elements in menu screen are structured due to the sufficient visual hierarchy allowing users to interact with the app.

 

Mobile Game App

 

mobile_game_interactions_tubik

 

This is the animated concept showing interactions for a mobile game Chicken Attack. It allows players to create their own networks via the set of random matches which can be skipped or added. The triadic color scheme makes UI look more playful and funny flat illustrations of chickens bring the positive emotions. The animation shows how an egg breaks and one more chicken, presenting a player, joins a team. This way the basic operation of adding a player becomes lively and gets a strong association with the theme of the game.

 

Business Card App

 

business_card_app_animation_tubik

 

Here’s the UI concept of Business Card App, an application for creating, keeping and sending contact data in a form of virtual business cards. For users working at multiple positions, it may save a set of cards as you can see in the animation. Cards in the user’s set appear by dragging the first one down.

 

Watering Tracker App

 

watering_tracker_app_ui_tubik

 

watering_tracker_app_interactions_tubik

 

Here are two screens presenting some interactions for a watering tracker. It reminds users to water the plants as well as tracking the watering stats for every plant. When users accomplished watering they push a custom button with water drops and it changes into a check sign. In addition, there is the information showing when a plant needs to be watered next time, so when people confirm watering it changes the data immediately.

 

The second screen presents a feature of adding a new plant to the list. Users can take a photo of a plant and the app automatically defines what it is and how it should be watered.

 

Photo App

 

tubik_photo_app

 

Here’s a UI concept for a photo app. It’s a social network which allows photographers to present their portfolios elegantly and connect to the world. The current view shows a profile screen with a photo gallery. Users can see view photos with a swipe and tap to open the full-sized versions.

 

Homey App

 

homey_app_interactions_tubik

 

It is the UI concept for Homey, the app enabling users to apply the functionality of smart home in their dwellings. The featured screens show that users can choose the room and see the basic data about them like temperature, humidity, and energy consumption. Also, people can tune the settings and see the expenses as well as turn saving mode and security of different levels. All the interactions are animated with the use of colors which looks especially deep on the dark background.

 

Loading Motion for iPhone X

 

loading_animation_iphonex_tubik

 

Here’s a concept of a content loading animation shown in the status bar of iPhone X. When users drag it down the rainbow animation appears. This is a bright way to decrease the tense of waiting and entertain users for a moment.

 

Balance App

 

balance_app_interactions_tubik_design

 

This is a concept of the Balance App, a mobile application for tracking finances. It helps users to check the balance of their bank cards easily, check the expenses along particular categories and keep updated how much money left to the limits set by the user. The designer has chosen the green color as the basis as it is often associated with safety, confidence, and growth. The smooth animation demonstrates the transition from one screen to another.

 

Travel Brightly App

 

travel_app_interactions_tubik_animation

 

This is a user interface concept for Travel Brightly App. It’s a mobile application providing information about various destinations around the world. The app collects various offers on accommodation and tickets to them and enables users to share their reviews. The feature making the app really special is bright custom illustrations for every presented place. Graphics are followed with names of cities and both demonstrate the animation when users choose a city.

 

Mobile Menu Interactions

 

menu_interactions_ui_animation_tubik

 

Here’s the concept presenting interactions with the menu of categories for a simple app enabling a user to collect and track all kinds of daily activities.Contrast colors and bold typography also contribute much to making navigation clear and intuitive. Smooth motion supports usability and elegance of interactions.

 

Learn Chinese App

 

learn_chinese_app_interactions_tubik

 

This is a UI concept of Learn Chinese application presenting the cards to learn Chinese characters and pronunciation. One side of a card shows the user a character and the other side allows for seeing its transliteration and translation as well as enables to hear it. Users can save the cards, mark them studied or non-studied and learn various thematic collections. The interesting motion makes learning process brighter and more interactive.

 

Book Swap App

 

book swap app interaction design

 

Here’s a UI concept of a book swapping application. It organizes the books by cards: each book card has a unique design that matches its cover. The animated concept shows the interactions with the feed showing books and their owners, and also the card of two books to be swapped. Moreover, the animation can be seen in the smallest details including CTA button “Swap” with moving arrows.

 

WineYard App

 

UI animation wine app

 

This is WineYard, the application enabling users to learn about different kinds of wine, get tips on serving them and food to combine with. Also, the app gives information where the chosen wine can be bought based on user’s location. When users push “View more”, the full data about an item appears in a smooth motion while other UI elements such as a photo and title fade away.

 

Cinema App

 

cinema app interaction ui animation

 

This is a UI design concept of a mobile application for the cinema chain. The first screen features interactions with the home screen showing the list of films. Films are presented via posters placed closely to each other so that users could see more options at once. Tapping on a poster people go to a screen of the particular film with all the necessary details.

 

The second screen shows the flow of choosing and booking the seat. Picking up a particular showing, users can see the available seats, pick the ones they like and book them, paying right from the app.

 

Music News App

 

music_news_app_animation_tubik

 

This is a creative concept for Music News App helping collects lyrics, news and quizzes about music all in one place. UI is presented via a bright color scheme and custom illustrations which make an app look original. The background of a home page applies geometric shapes which change their place and colors when users swipe through the screen.

 

NGIN App

 

car app interface

 

NGIN is the conceptual application for smart car control. The app automates the process of regular data collection informing users about the technical state of the vehicle and conditions of its exploitation. The presented screen gives the user basic current stats like average speed, distance, fuel consumption and useful notifications. The animation shows the interactions with the graph curve of the speed for the chosen period and the notification which features glitch effect to add a bit of fun and support the general stylistic concept.

 

Home Budget App

 

home budget web interface

 

home budget interface animation

 

Home Budget application allows users to manage their expenses and incomes, creating the extended database for tracking financial flows and changes getting comprehensive stats. The animation makes interactions and navigation more intuitive despite a significant amount of data.

 

The second concept shows interaction with the feed of financial operations for the current day and the hamburger menu.

 

Food App

 

recipe card UI animation

 

This is a mobile application providing users with database of recipes. It helps to find recipes on the basis of the supplies users currently have at home or create a shopping list to buy ingredients that are missing. The concept shows the process of interactions with recipe cards. Users can choose the right card with a side swipe. Unobtrusive and elegant animation during the first interaction can prompt about the additional functionality that is hidden under the card and available on swipe down. For this project, designers offered several variants of the layout and motion — check them in a case study.


As you can see, animation can become an effective solution for various problems in user interface design. Well-crafted motion components can improve the navigation and make the interactive process even more user-friendly.

 

Recommended reading

 

UI Animation: Eye-Pleasing, Problem-Solving.

Creative Motion: 12 Concepts of Interface Animation.

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

Animated Interactions. Motion on Purpose.

UI Animation. Microinteraction for Macroresult.

Interface Animation. The Force of Motion.

Case Study: Toonie. UI Animation Development.


Welcome to see the designs by Tubik on Dribbble and Behance

ui desing interface food app recipe list

UI Experiments: Options for Recipe Cards in a Food App

Good food is good mood — for most people that has been true for decades and centuries. Taking up the big part of human time and activity, no wonder food became one of the hot topics in tech progress. There is a whole bunch of mobile and web interfaces solving a diversity of problems connected with food: websites and applications for cafes and restaurants, recipe apps and social networks, food ordering and food delivery apps. Whatever is the goal behind UI design for a food app, that’s cool when it’s not only helpful but also delicious and attractive.

 

Earlier we have already shared numerous ideas on interface design for this theme. Today let us present a fresh food app design case study, this time concentrated on several recipe card concepts. In this project, Tubik designers Anton Morozov, Ernest Asanov and Vlad Taran took a chance of UI experiments and analysis for a variety of approaches to content and navigation of recipe cards.

 

information architecture for designers

 

Project

 

UI design of a mobile application on cooking and recipes

 

Introduction

 

In general terms, the designers got the task to design a food app for users who love cooking. It included the recipe database which was constantly updated. Also, the application had a supplies manager. To make UX more extended, it allowed users to find the recipes on the basis of the supplies they currently had at home or create a shopping list to buy ingredients that were missing.

 

According to the brief which presented the client’s preferences, the food app design had to include the following functionality.
 

Required Features
 

1. Search bar
2. Filter button (Information about the number of results and applied filters)
3. Recipe cards (Recipe picture + Title)

 
Optional Ideas
 

• Ratio of ingredients you have to the total number the recipe requires
• Cook time
• Calories
• X button to hide that recipe and show fewer recipes like that
• Add to shopping list button
• Like / save button
• Recipe author and his/her profile picture
• Review score
• Favorite count
• Main ingredients
• Share
• Direct link to view the recipe source
• Consider what type of layout for the recipe feed will work best, grid vs single column.

 

Problem

 

The client provided the team with a lot of information and ideas on the main screen. The designers had to analyze and prioritize all the points, as there was a high risk of overloading the screen. On the basis of research and analysis, the user scenarios were created to determine which information about the meal in the recipe is found the most important.

 

Solutions exploration: benefits and pitfalls

 

The designers worked out several options for recipe cards presentation which would effectively present the core data on the limited space of a mobile screen. Considering that the recipe card presented the key element of interaction in this app, the final decision had to be grounded on the balance of logic and emotion, effective navigation and aesthetic satisfaction. Having tried different directions, the designers defined three various options of content and controls placement in the layout.  Among them, the creative team had to choose the variant corresponding to target audience expectations. Here are the options.

 

а) Recipes shown as a list

 

Benefits: more content can be shown on the screen.

Pitfalls: the photo content looks too small.

 

ui desing interface food app recipe list
 

 

b) Recipes shown as cards (like Pinterest)

 

Benefits: the dynamic height of the cards allows for placing photos of any layout metrics and headlines of any length

 

Pitfalls: the column for notes and additional elements is too narrow. Card manipulations such as adding ingredients into the shopping list, hiding the similar recipes and sharing the recipes to social networks led to applying the long press/force touch which was not the most obvious solutions for users.

 

recipe card UI design food app
 

 

c) Big recipe cards

 

Benefits: photo content attracts maximum attention
 

Pitfalls: the screen features only one recipe, the additional functionality still isn’t obvious for users.

 

recipe card UI animation

 

Final solution

 

The creative team preferred the emotional variant. Coming out to the market, the product has to be ultimately attractive. That will enable to collect the feedback and analytics data which can be used as a basis for the next stage of the creative search for solutions enhancing user experience. Unobtrusive and elegant animation during the first interaction will prompt about the additional functionality that is hidden under the card and available on swipe down.

 

Additional details: filters placement

 

The filter panel allows a user to sort out the list of recipes. The user can apply pre-sets: for example the preset “cook” shows only the recipes based on the ingredients currently available for the user. Also, the filters can be manually customized. The panel is placed in the bottom part of the screen to add more convenience to the operations with the app by one hand.

 

recipe card animation tubik

 

Bottom line

 

In Apple, they say: “…the first thing we ask is what do we want people to feel?” Not everyone considers the issues connected to users’ feelings and emotions before they start creating a new digital product. Today most designers strive for functionality. However, when people’s feelings and emotions become a priority, the product gets the features and details which let the users love it.

 

Recommended reading

 

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

 

Watering Tracker. UI for Home Needs.

Home Budget App. UI for Finance.

Night in Berlin. UI for Event App.

Big City Guide. Landing Page Design.

Vinny’s Bakery. UI Design for E-Commerce.

Upper App. UI Design for To-Do List.

Health Care App. UI for Doctors.

Wedding Planner. UI Design Concept.

Toonie Alarm. Mobile App UI Design.

SwiftyBeaver. UX/UI Design for a Mac Application.


Welcome to see designs by Tubik on Dribbble and Behance

faq on web and mobile ux design

FAQ: Does a Small Business Need a Website?

Being a field of diverse directions and numerous purposes, design has always brought up a lot of issues on the crossroads of professional activities and sciences. It’s time for a new set of answers covering the frequently asked questions in the domains of web, mobile and graphic design: having given a big bunch of answers on Quora recently, we would like to share our ideas with Tubik Blog readers as well. So, today we are briefly covering the following topics:
 

  1.  Is it important for a small business to have a website?
  2. How can UI/UX design strategically influence a company success?
  3. What motivates mobile-app start-ups to hire UX designers?
  4. Who buys graphic design services?

 
Let’s get started!
 

creative_ux_design_illustration_tubik

 

How important is it for a small business to have a website?

 

In short: if you can reach your customers via the Internet, it IS important to think about a website for your business.

 

Going deeper, we can face a lot of pathetic expressions saying the main and only reason is that everything is on the Internet now. I wouldn’t be so categorical on that. Real life still exists, and some businesses, especially small local ones, effectively operate without websites in their own vision of success. Not all the businesses strive to conquer the world — and it doesn’t leave us right to tell they aren’t successful or helpful or effective or profitable. Let’s say, you live in a quite small village and supply local citizens with home-made cheese. You have your own range of clients and you have no reasons to move further as all the cheese you may produce with your capacities is bought like hot cakes. The profits you get are enough for your vision of peaceful and successful life. Is it a small business? Yes, sure. Does it need a website? According to the stakeholder’s goals, no, it doesn’t.

 

However, the Internet really revolutionized the way of running businesses. With devices cheaper, more accessible and easy-to-use, more and more people turn to buying, selling, marketing, communicating and getting information from the internet resources. So, today it’s one of the top reasons why people make a decision on starting a website: they have an offer which may be potentially interesting to other people on the Web and bring the profits to the entrepreneur.

 

financial_service_website_tubik

 

This way to go is really reasonable, and there is a huge variety of approaches to websites for business use. It can be anything, from a simple one-page website giving the basic description of the professional and contact data to complex web platforms providing the variety of business directions or extensive portfolio. It may be a small e-commerce platform, with a full cycle of direct sales from order to payment and delivery, or it may be a corporate website whose aim is to present the services or goods as well as the ways of getting them. This can be the reason for not only fully packed websites of broad functionality but also landing pages fulfilling the same need.

 

usability_interfaces_ux_design_tubik

 

Having a website, the business gets a broader perspective and becomes closer to users, who are often used to googling as the fastest way to find everything they need, from basic goods to special services. If your potential clients can be caught in this process of browsing, you definitely have to try it and a company website is a primary step. Nevertheless, it’s important to remember that the website will become another item in your budget: time, effort and in all likelihood money will be invested in the website creation and maintenance. For big and well-established businesses it may be not a pinch of a problem but for a small business, it is a concern demanding to weigh all pros and cons. So, on the stage of decision-making, it’s cool to discuss the issue with experts and other businessmen, read the case studies and reviews to know what the possible further scenarios may happen, how important they are for the business growth and what you would better start with.

 

Landing Page Animation Tubik Studio

 

The reasons, which might get you hesitate if you need your own website being a small business, can be the following:

  • the specific nature of the business doesn’t make it possible and viable to reach your clients online
  • the expenses on the website aren’t reasonable and do not open real perspectives on the business growth
  • the small business has another alternative platform for its activity which is profitable for its aims (for example, you make hand-crafted toys which are successfully bought via Etsy-shop and it creates the strong online presence for the business).

 

Anyway, if the business strives to transfer from small to medium or big and isn’t going to spend ages for it, the website is a worthy investment.

florist shop website design

 

How can UI/UX design strategically influence company success?

 

There are several aspects to consider, first of all depending on the type of business activity and relations. Among the cases when web and mobile UX design can significantly influence company performance, we could mention the following ones.

 

1. The company gets its profits via a digital product

 

In this case, UX/UI is definitely one of the core issues influencing growth, progress and success of the company. Thoughtful UX (logics, transitions, the flow of user journey and interactions) and effective UI (visual performance, typography, visual hierarchy, emotional appeal and aesthetic satisfaction) lay the solid foundation for achieving business goals set behind the digital product and therefore profits of the company.

Why is it so? Because UX/UI design:

  • strengthens brand image and enhances brand awareness
  • enables users to solve their problems with the product demonstrating a high level of usability
  • supports efficient sales funnel and educates a user about the product
  • applies visual hierarchy to make navigation through the interface intuitive and in this way grows the level of conversion
  • transforms tone and voice of the product as well as a flow of interactions which are appropriate for a particular target audience.

 

cinema app interaction UI

 

As it was mentioned in the book Design For Business, 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 the fast and easy way. Nevertheless, if the product is of poor quality, successful design isn’t going to make it better. Think about the product and its user first, only then the design will give it the chance to beam at full.

 

2. The company presents an e-commerce platform

 

Obviously, the 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 the target user.

 

jewellery ecommerce app

 

3. The company uses the digital tools and services for communication of its personnel and data analysis

 

Nowadays there are more and more companies that use apps or websites for productive communication inside the team: some of them apply external stuff, while the others create the apps which correspond to their specific needs. In this case, UX again is a strategically important direction to invest time and money in: it enables employees to work more productively while managers to analyze data in fast and precise manner. These factors directly influence the rates of general profits and expenses of the company.

 

health care app calendar tubik

 

Here we’ve mentioned only three of possible directions when UI/UX contributes to general company performance, still, there are many of them. Working on different design projects here in Tubik, we’ve checked how different can business goals be but definitely, design opens numerous ways to support them.

 

What motivates mobile-app start-ups to hire UX designers?

 

The step of hiring a UI designer for a mobile-app start-up is a very logical thing to do: thought-out design of a digital product is the solid foundation for the nice introduction to the market. Among the factors of impact on this decision, we would mention USP and MVP which build up the bridge between business and design perspectives.

 

USP

 

A mobile app is a product which means it has its USP (Unique Selling Point). User interface design is the way to strengthen it and present in the correct way.

 

If USP is defined at the pre-design stage that means that all design solutions can be made to support it. That is a good foundation for efficient branding supported by recognizable and consistent interface design which enhances better interaction and memorability. USP directly influences:

 

  • integration of brand identity into the interface to enhance brand awareness
  • building up principles of interaction and user experience in terms of efficient presentation and providing benefits of USP
  • creating problem-solving user interface that clearly reflects USP and provides fast and easy way to getting it
  • creating and selecting content which will support general design concept and show users the advantages of the product and corresponds to target audience expectations
  • design of a landing page that will have the structure and content directly presenting USP to target audience
  • applying design tactics that increase conversion of the app screens etc.

 

As a practical example, we can remember the story of creating UI design for Saily App, a local service of user-to-user e-commerce. The customers defined its USP from the very start: it is a local community app allowing neighbors to buy and sell their used stuff, so it provides people with the ability to sell their own things or quickly search for the needed ones sold in their location. This idea became the solid basis for all the design solutions around branding and user interface of the app, setting bright experience and friendly communication. If you are interested to read the details and see visual design process, welcome to read case studies on logo design and UI design for the app.

 

saily UI screens tubik studio

 

MVP

 

Many startups follow the path of MVP (Minimum Viable Product) which is a product with the set of minimal functions and features which are logically completed and sustainable providing the most important and basic functions for the core target audience. This means that the basic version of the product, able to fulfill key operations which are solving target audience’s problems, is created as live and starts real functioning as soon as possible. The approach is opposite to the strategy of creating a full design and comprehensive functionality for all the product features for the broader target audience and only afterward launching it on the market.

 

MVP approach has several benefits:

 

— as it starts from the simple and basic version of the product, it doesn’t take a long time to provide design and development and makes possible to start playing on the market faster. It’s especially actual for diverse technological ideas and concepts as they are always at risk to outmode by the time all the design, development and testing cycle is finished;

 

— it enables designers, testers, analysts, managers and marketing specialists to collect data of real users’ interaction with a product, reveal the bugs, understand their wishes and pains deeper and use all that information in design and presentation of further, more complex versions of the product. Although testing should be done at the stage of development, it is impossible to predict all the potential problems of interaction with a product before real users start this interaction. MVP enables to do it faster and make next versions more efficient;

 

— if thoughtfully made and carefully presented, MVP can play the role of bait attracting target customers and allowing its creators to see if the target audience was defined properly and analyzed deeply enough;

 

— next versions of MVP usually present quite massive functional additions so depending on the target it may work as the way of positive and dynamic user experience, different from slight changes in the products whose functionality was fully developed before the launch.

 

Therefore, in terms of design MVP is the strategy of step-by-step movement on the market, when every next step is based on the analysis of the previous one from the actual data collected from real users. That means that designer should also apply the strategy of gradual design, carefully applying only core features which are really vital for the MVP as the start of the journey. It greatly influences the number of screens and content on them, necessary transitions and notifications which users really need at this stage of using the product, level of complexity and sophistication of graphic materials and animation etc. UX/UI designers should remember that MVP always has a definite core target audience and the solutions to interactions, experience, visual perception etc. Knowing these core users makes the design task more particular and the result will be more customer oriented thus efficient. Next versions of the product will provide broader functionality and in this way will broaden the circle of users, but it will work in the case when core target audience is caught by MVP.

 

Successful MVP is directly connected to the USP of the product. Here USP plays an even bigger role as it enables to make the product user-centered and in this case the chances of making it efficient and attractive to users get much higher. Presenting the product solving particular problems of a particular group of people in many cases proved itself as an effective strategy with the perspective of further growth of both functionality and audience. This strategy works especially well for various startups which start with limited budget used wisely for practical presentation of the vital features of the product: if MVP is thought out properly, at this first stage they already start monetization of the product, attract users and at the same time apply practical data analysis in further stages of design. It’s easy to see that the role of UI/UX design here gets even higher as MVP is actually the chance of making a good first impression. Spoiling it with bad design can have a crucially bad result for product’s promotion as well as good design can build up a solid foundation for product growth.

 

upper app UI design case study
Upper App which started as an MVP

 

The mentioned ideas present good motives for hiring a UI designer for creating a brand new app.

 

Who buys graphic design services or products?

 

First of all, let’s quickly review what stands behind the notion of graphic design services. Basically, graphic designers do the job of communication to others by means of graphic (visual) elements such as images of different style and complexity, types and fonts, pictograms, shapes and sizes, colors and shades, lines and curves etc. A graphic designer makes all those elements of visual perception transfer the message, so he makes them functional. Therefore, we could say that graphic designers are artists applying their talents mostly not in pure art, but communicating and purposeful art.

 

illustration_design_in_progress_tubik

Modern graphic design broadly covers all spheres of human life which deal with visual communication, from books and posters to sophisticated mobile applications or 3D animation. Let’s look into directions in which graphic designers can express their creativity for the sake of solving problems and satisfying needs, in particular, it includes:

 

  • editorial and book design
  • illustration
  • identity (logo and branding) design
  • icons and pictograms
  • typography
  • interface graphics and elements
  • print advertisements
  • big print items such as posters and billboards
  • signs
  • infographics and mapping
  • packaging etc.

 

cinema_fan_illustration_graphic_design_tubik

 

Therefore, anyone interested in getting a graphic outcome for the mentioned purposes is a potential buyer of graphic design services, in particular:

 

— businesses from very small to major, in need of branding, rebranding or creating the extensive corporate identity
— people who need special original graphics to present their personal brand
— book publishers
— publishers of periodical mass-media
— advertisers
— product design teams or customers who need custom graphics for their websites and mobile applications
— diverse agencies and organizations who need posters, stickers, labels and the like for their events, campaigns, offices etc.
— educational institutions for creating various graphics with educational objectives (classroom posters, printables, handouts, toys and games images etc.)
— cartoon and game creators.
Certainly, the list can be continued, still even now its clear that there are many variations who can become the potential customer for a graphic designer.

 

Today’s brief FAQ review is over, but new answers are coming very soon, stay tuned!

 

most popular design articles in tubik blog


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

Welcome to read us on Quora

CTA buttons design tips tubik blog

Call for Attention. Powerful CTA Button Design.

An effective interaction system of a digital product consists of small elements which have their tasks and functions. To make the sufficient system, it’s vital to pay attention to all the details.

 

Buttons are core interactive components of user interfaces which play a significant role in the quality UX as well as conversion rates of websites and applications. UI buttons vary according to their features and can be divided into different types. A new article is devoted to the type called call-to-action (CTA) buttons covering their essence, role in the intuitive navigation and the importance of business goals. Let’s see what makes CTA buttons stand out from the crowd learning from the best practices.

 

mobile interaction design tubik blog

 

What’s a CTA button and why is it important?

 

A call-to-action (CTA) button is an interactive element of any user interface both web and mobile: its major aim is to induce people to take certain actions that present a conversion for a particular page or screen, for example purchase, contact, subscribe etc.

 

Traditionally, CTA buttons are easy to notice, even more, designers intentionally create them that way so that people couldn’t resist to clicking it. That’s why they are usually bold buttons containing microcopy with a particular call-to-action (e.g. “Learn more” or “Buy it now”) which encourages us to push it.

 

Lead generation and purchase rise are the basic business goals which calls-to-action can be created for. When a button design is compelling enough to immediately attract the attention of potential clients, it can entice them to click and go to the next stage such as filling a short contact form or making a preorder of a product.

 

ux_design_practices_article

 

This way website visitors and app users can be led through a sales funnel from one stage to another helping them to learn the details about the product or service. Even professionally worked out content may not guarantee the high level of user engagement. Without CTA buttons people are more likely to scan content quickly and just leave it untouched.

 

Some may think that a sufficient call-to-action button design applies only a big size and bright color to accomplish all its objectives. Still, there are much more aspects ensuring the effectiveness of CTAs. Let’s see what they are along with the practical examples of their appropriate usage.

 

choice of color in UI design

 

What makes a powerful CTA button?

 

Size

 

Size is one of the most common tools helping to divide UI components according to their importance. The bigger an element is, the more noticeable it becomes. Since CTAs’ prior goal is to draw users’ attention, designers usually try to make them stand out among the other buttons on the screen, especially via noticeable size.

 

Large buttons have high chances to be noticed and clicked still you have to keep some limits. A compelling call-to-action button is usually big enough to be quickly found but not too big so that the visual composition and hierarchy of the layout wouldn’t be spoiled. Market leaders often provide recommendations on the effective sizes of buttons in their guidelines. For example, Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.

 

burger_app_ui_animation_tubik

 

Color and shape

 

Visually attractive size is only one aspect of a powerful CTA. To make the buttons even more noticeable it’s vital to choose sufficient color and shape. The thing is that human mood and behavior highly relates to the visual surroundings. Our mind reacts to colors and shapes while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. Psychology science has specific branches devoted the influence of different colors and shapes on our consciousness. In our previous articles, we described the role of this impact on the design solution. Here are brief guides on the common meaning which colors and shapes have.

 
Color meanings:
 

  • Red. Confidence, youth, and power.
  • Orange. Friendly, warm, and energetic.
  • Yellow. Happiness, optimism, and warmth.
  • Green. Peace, growth, and health.
  • Blue. Trust, security, and stability.
  • Purple. Luxurious, creative, and wise.
  • Black. Reliable, sophisticated, and experienced.
  • White. Simple, calm, and clean.

 
Shape meanings:
 

  • Squares and rectangles meanings: discipline, strength, courage, security, reliability.
  • Triangles meanings: excitement, risk, danger, balance, stability.
  • Circles, ovals, and ellipses meanings: eternity, female, universe, magic, mystery.
  • Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.

 

Traditionally, CTA buttons look like horizontal rectangles since people got used to perceiving this shape as clickable buttons. In addition, it is recommended to design CTAs with rounded corners because they are thought as they point inside of the button drawing attention to the copy.

 

Color choice depends on various aspects which make the process more complicated. Designers need to consider such factors as the basic color of the composition as well as potential preferences and psychological peculiarities of the target audience. There is one condition which is vital to keep in mind while choosing colors for CTA: buttons and background colors should be contrasting enough so that CTAs would stand out from the other UI components.

 

dating_app_landing_page_tubik

 

 

Placement

 

The placement of CTA buttons is crucial for their capability. If they are located in the areas where users’ eyes can’t catch them, other visual aspects such as color and size might not work efficiently. But how to understand what placement is more prosperous?

 

Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. Considering this fact, designers may learn the most prominent scannable areas and place call-to-actions within the user’s path.

 

According to different studies, including the publications by Nielsen Norman Group, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is the most common for web pages with big amount of content such as blogs, news platforms. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences.

 

Z-pattern is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right.

 

These patterns allow designers to place CTAs in the spots of highest attention, such as top corners and put the other points requiring attention along the top and bottom lines. Also, it is a good idea to place CTA buttons at the center of the layout, especially when it isn’t overloaded with other UI elements.

 

gourmet_herbs_website_design_tubik

 

Microcopy

 

Microcopy plays a significant role for the efficiency of call-to-action. It is defined as the small components of text which serve as hints for users. To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage.

 

CTA microcopy is actually a call which tells users what action they will take if they click the button. The powerful CTA microcopy is usually short but consistent so that it could quickly catch users’ attention.

 

bright_vibe_calendar_app_ui_tubik

 

Call-to-action buttons are one of the most powerful sales tools in e-commerce and an influential factor of good conversion of a page or screen. Designers need to understand the importance of CTAs and pay deep attention to all the details having an impact on their performance. Follow Tubik Blog to get more tips on CTA design.

 

Recommended reading

 

UI/UX Design Glossary. Navigation Elements.
UX Design Glossary: Interface Navigation Elements. Set 2.
7 Tips to Enhance Mobile Interactions
3C of Interface Design: Color, Contrast, Content.
9 Effective Tips on Visual Hierarchy
Take It Easy: Tips for Effort-Saving User Interfaces.


Welcome to see designs by Tubik on Dribbble and Behance

design trends review tubik blog

Review of Popular Interface Design Trends in 2017

The new year 2018 is closer and closer, so stepping into a phase of fresh challenges and new horizons, we would like to look back and remember what the ending year has been marked out with. Here we’ve gathered the collection of trends which won the big place in web and mobile interfaces of 2017 supporting most of them by designs from Tubik team.

 

Functional minimalism

 

Quite a big number of mobile applications and websites continued and evolved design solutions based on the principles of minimalism. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message.

 

Major features often mentioned in terms of minimalism approach include:

  • Simplicity
  • Clarity
  • Expressive visual hierarchy
  • High attention to proportions and composition
  • Functionality of every element
  • Big amount of spare space
  • High attention ratio to core details
  • Typography as a significant design element
  • Eliminating non-functional decorative elements

 

Surely, the list can be continued but even the given positions show that minimalism in UI appears to be a user-friendly trend. Applied wisely, it helps to see the core elements of the interface and makes user journey intuitive and purposeful. Moreover, minimalist interfaces usually look sophisticated and uncluttered bringing aesthetic satisfaction as one of the factors of desirability in UX.

 

UI animation wine app

 

Brutalism

 

The trend of brutalism in digital design started rocketing last year and got even brighter expressions in 2017. It is often described as a style that aims at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts and accents of aesthetic visual performance. In contrast, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to a plain HTML page. Being used thoughtfully for the appropriate goals and audience, it features the high level of originality and gives the unique look to a digital product. It may be liked or disliked, but it is never left unnoticed.

 

Typography integrated into images

 

Bold and catchy typography also kept its high presence both in web and mobile layouts. This year it got a new breath with a widely spread technique of cutting or inscribing the title keyword or a headline into the visual elements on the page. The approach strengthens the harmonic integrity of the layout elements and makes typography felt tightly united with everything in the interface.

 

web ui design city guide

 

Animated hero banners

 

In web design, hero banners are big images catching user’s attention in the first seconds of interaction with a website. They usually contribute much to the attractive visual presentation of the main content. Hero banners proved themselves as highly effective in setting the mood or transferring the message. Moreover, as well as any other striking graphics on web pages, this is a kind of content which is both informative and emotionally appealing. Prominent hero banners can satisfy multiple goals such as:

  • catch users’ attention
  • transfer the message visually
  • support the general stylistic concept
  • set the needed theme, mood or atmosphere
  • demonstrate the core benefits or items effectively.

 

This year they were often strengthened with original animation breathing life into images and making them even more engaging.

 

dance academy landing page animation

 

Custom theme illustrations

 

Accomplished in different styles and complexity level, custom illustrations are actively covering more and more space on web and mobile UI, adding the quick perception of the information and setting the solid ground for originality. Web and mobile interfaces apply custom mascotsicons and  illustrations to enhance the looks of a page or screen as well as boost usability and intuitive navigation. In addition, images improve the accessibility of UX design pushing the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.

 

The highest diversity here, perhaps, was featured in theme illustrations supporting websites and apps. They appeared to move to the next level, becoming more complex, sophisticated, stylish, and metaphorical.

 

financial_service_website_tubik

 

Unframed layout

 

Big background images or patterns without any frames have been observed quite frequently in the web interfaces this year. It allowed users to feel the layouts more airy and spacious while the background image deeper and stronger not breaking the interaction with the feeling of boundaries or limits.

 

Big City Guide tubik

 

Variety of interface animation

 

As well as in the previous year, 2017 didn’t experience any loss in the issue of interface animation. Not only does it add life and motion to the interaction process but also significantly improves usability. User experience becomes more informative and engaging while manipulations with the elements of interaction get more clear and respond to the user in an understandable way. So, this year designers worked well on a variety of buttons, tabs, charts, preloaders and scroll animations.

 

watering_tracker_app_ui_tubik

 

UI-friendly branding

 

2017 could be definitely mentioned as the year of rebranding: a big number of global and local companies, products and brands changed their logos mostly towards simplification of forms and details. One of the reasons for the trend was striving for better usability and navigability of brand elements as more and more businesses competed for the higher online presence. So, both new and redesigned logos were created to be more UI-friendly and effectively perceived on a variety of digital devices and layouts. Furthermore, animated logos became a trend making symbols more interactive and strengthening brand awareness.

 

logo_animation_tubik_design

 

 

 

 

Monochrome UI

 

Growing interest in minimalistic design for maximum functionality resulted in a considerable presence of monochrome UI solutions. These layouts usually look stylish, harmonic and non-distractive. However, designers have to invest much time and effort to make them not boring while the core elements of interaction instantly visible.

 

jewellery ecommerce app UI

 

Progress of dark backgrounds

 

Mobile and web interfaces applying color palette with dark background have not only saved but also grown their presence. In particular, they are often applied in the digital products based on visuals rather than copy. Dark backgrounds are traditionally associated with grace and prestige, they deepen the perception of images and can make the interface less contrast and more natural to see in different environments. Moreover, this approach now corresponds to preferences and expectations for quite a broad target audience who like this style.

 

cinema app interaction UI

 

Light space for copy

 

Another trend got especially popular for interfaces based on the dark background scheme. It featured one more approach to proper readability in them which is often the issue of debates: applying boxes or spaces with light background for core data blocks, designers solve this problem and add elegant contrast to the screen or page.

 

watering tracker app design tubik

 

Sophistication and contrast in fonts choice

 

With numerous new fonts created around, user interface designers have a broad field for creative experiments. Today typography is seen as not just the means of communication and sending a message to the user but also the integral part of all the design concept. So, professionals pay much attention to the choice and combination of fonts. This year we experienced new approaches to setting contrast with serif and sans-serif fonts making them work for strong visual hierarchy and appealing beauty of the interface.

 

web design UI tubik studio

 

Experiments with grids

 

With over a billion of websites coming into play, designers have to be more and more creative to make them both attractive and original. So, experiments with grid also won their place in the list of general design trends of the leaving year. The custom grid is the way to save the feeling of harmonic layout and placement of the elements with a higher level of flexibility and originality. However, this sort of creativity requires thorough research while the effective result often comes via several iterations tested and analyzed in terms of usability and visual perception.

 

Variety of landing pages

 

No doubt, this year landing pages have witnessed the new lap of their development and diversity. Businesses and social projects tend to use them regularly for effective presentation of special services, sales, offers or issues striving for focused user’s attention. Landing pages also have proved themselves as an effective method of promotion for native mobile apps. Based on user and market research as well as testing, they can be defined as a user-friendly trend, providing necessary information and interactions in clear and accessible way saving users’ time and effort. From the business perspective, they also work well, giving companies the flexible tool for original and effective communication with better targeting.

 

design agency landing page

 

Creative parallax

 

With more accessible and improved tools for motion design,  scroll animation saved its positions of broadly applied technique both for in web and mobile. Creative and original parallax enhances scrolling experience making it natural for human eye and adding grace for such a basic operation.

mood messenger landing page

 

Promo videos for web marketing

 

Different types of promotional videos were boosted to appear on screens and pages. No wonder as they serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and enhances them with a power of storytelling. All the mentioned factors tend to make the presentation via video strong and memorable especially if based on high-quality graphic design and animation. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time learning about products or services, especially the new ones. In these conditions, videos have become the way of communication which is dynamic, informative and attractive. However, the issue of loading speed for a webpage moves forward and should be tested carefully for on different devices.

 

 

Gamification mechanics supporting UX

 

This year has witnessed growing interest to gamification applied in a variety of interfaces, not only for entertainment but also for utilities and business products. In the tech world, the word “gamification” stands for the technique of exerting game mechanics into the non-game environment, such as websites and mobile applications. Challenges, rewards, points, badges, leaderboards and other stuff of this kind help designers to think over the ways of effective user motivation and retaining.

 

upper app UI design case study

 

Boxes and cards as layout elements

 

One more trend in UX design of 2017 moved around the diversity of cards and boxes in web and mobile layouts. They played their essential role in setting visual hierarchy and making the pieces of information quickly scannable. Moreover, they successfully contributed to the general harmony and shapeliness of a page or screen. 

 

bikers website blog

 

Geometric elements as a part of style

 

Supporting the previous trend, geometry vibes got featured in many interfaces this year. Variety of simple and complex shapes, patterns, lines and curves has been found in numerous design solutions on both traditional and innovative combinations.

 

wedding_theme_website_ui_design_tubik

 

Experimental color palettes and combinations

 

The trend of color probes hasn’t lost its popularity, bringing out new original combinations. No wonder, color is one of the most powerful ways to add quickly perceived message and mood to an interface as well as make its looks original and attractive. Anyway, effective color experiments are not just pure creativity: even the most creative and surprising combinations are based on the knowledge of color theory, color psychology and virtuosity of user interface designers. 

 

book swap app interaction design

 

No Lorem Ipsum

 

This year has continued the increasing attention to content quality and performance. In user interfaces, content and design and interconnected: creators have to make them successfully support each other instead of fight for users’ attention. That’s why today more and more designers prefer real content instead of well-known Lorem Ipsum, even in cases of initial ideation for design concepts. It gets designers, clients and content makers closer to real experience and natural feel of interactions.

 

dating_app_landing_page_tubik

 

No doubt, 2017 was the year of diversity in interface design — and this can be called one of the most user-friendly trends. Every day millions of users, having different tastes and preferences, various favorite styles and characters, particular feelings of what is comfortable and looks nice for them, use simple and complex apps and websites as a part of their routine. The more variants of looks and features will be designed, the wider range of diverse options that endless global community of technology users will get to find the one which fits their specific needs and wishes. Anyway, soon we’ll see what the next year will bring out and what new creative challenges it will set for UX designers.


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

mobile interaction design tubik blog

7 Tips to Enhance Mobile Interactions

The quality of mobile design can be measured simply. When the process of usage is so smooth and effortless that people don’t even think about it, it is the sign of the professional design work. On the other hand, if there are some problems in the interaction system, users will definitely notice them and won’t be pleased about it.

 

Mobile apps are expected to be clear and easy to operate so that they could be effectively used anytime and anyplace. Designers’ task is to create an intuitive interface which will guide users within the app helping them operate its functionality without problems. In this article, we describe the essential aspects of the effective mobile interaction system along with the tips helping designers to create intuitive design.

UI navigation elements

 

Increase learnability

 

Every designer strives at creating a unique product with original interactions and navigation systems. Such an approach allows standing out a crowd and being noticeable on the market. However, creating absolutely new environment designers have to think how users will adjust to it.

 

If the interaction system of a mobile application has no logic and sequence or it doesn’t respond to needs of the target audience, it may be frustrating and annoying. That condition is critical for UX, so people will simply give up on trying to decipher an app and quit it.

 

To avoid this kind of outcome, designers need to care about learnability of the interactive elements. Learnability stands for how easy tasks can be attained during the first usage and how quickly users learn from the previous experience. To increase learnability, designers need to keep it simple and clear helping quickly adjust to it. Also, the system should be consistent and logical so that users could identify the repeating patterns and use a mobile app intuitively.

 

Consider multiple holds

 

We all are different in many ways, even how we hold smartphones. The way of holding smartphones depends on various factors including the situation and conditions in which the app is used as well as the task we need to accomplish.

 

There are three common types of holding a mobile. The first is when we take it with one hand and navigate it with a thumb. Another way is to hold a smartphone in one hand and interact with it with the forefinger of the other hand. Also, the type which is common for chatting people is holding a phone in two hands using both thumbs for actions. Of course, there are other types of holds but these three are thought to be the most common.

 

interaction_models_mobile_interfaces

Source

 

thumb-zone-mapping_UI_design

Source

 

Considering this fact, designers have to figure out if the layout elements placed effectively for different holds. One-handed hold requires special attention since it has the most limited space of reach. To make the interaction process within a mobile app effortless it may be a good idea to put the key components at the bottom of the screen so that users would be able to reach tap areas easily. In addition, the interactive elements should be big enough so there would be no chance for a mistap.

 

user motivation design

 

Apply recognition patterns

 

When a new app can be used intuitively it means that the designer did a good job. To provide intuitive interactions, UI design has to contain recognition patterns. They are the elements which users are already familiar with and those which give slight hints on how an app works. The thing is that using an application we are expecting to see certain things associated with the definite kind of product. For example, working with e-commerce apps we are used to seeing cart icons along with CTA buttons “Buy”. Familiar elements in a new app make people feel more confident in their actions.

 

Users become accustomed to things quickly and their absence makes them feel uncomfortable. That’s why, if you plan to use custom interactive elements, don’t forget to add some standard components. This way a new application won’t overwhelm with an absolutely unfamiliar environment and will help to learn quickly.

 

ux design for ecommerce tubik blog

 

Make a clean UI

 

A big pitfall of mobile UI design is small screens of the devices. Designers have to figure out how to include all content in a short space without turning user interface into clutter. Clean UI design helps effectively interact with a product since all the core elements can be easily reached.

 

To create neat mobile UI it is recommended to use icons as interactive components. Copy elements often can be too big for the small screen, so icons are a sufficient alternative. They can explain a function visualizing it with simple shapes and it helps to save the space on the screen. However, during usability testing, it should be thoroughly checked if the icons are perceived appropriately and transfer the right message.

 

Decrease the number of actions

 

Probably, many of us have the experience of using an annoying mobile app which made us take a long way before we could finally accomplish the task. It may often be caused by ineffective interaction system which employs too many actions and the unnecessary functionality.

 

Mobile apps usually serve as problem-solving assistants, so it’s vital for them to be designed ergonomically. It means that designers have to apply only core functional elements which will get the users right to the point they needed. Minimum of actions won’t make your product look primitive. It will help a mobile app be effective and pleasing in usage. Remember that people mostly rate the quality of an application not by extraordinary features but how helpful it is.

 

tubik_photo_app

 

Add game mechanics

 

Based on the facts described above, we can say that an effective mobile interaction system should be simple and clear to use so that it could be operated without problems.

 

However, simplifying the interface it’s vital not make it boring. Apps which seem ordinary have fewer chances to gain users’ attention. That’s why it’s important to bring some emotional aspects into applications that look standard at the first glance.

 

To make the process interesting and catchy, it may be a good idea to use gamification. It is the technique of exerting game mechanics into the non-game environment like mobile applications. Various challenges and leaderboards along with the awards and stickers motivate users to interact with a product more and come back to it constantly.

 

What’s more, implementing a game mechanic called a user journey is an effective way to create clear layout and transitions. A journey is user’s progression stages at the time of usage. Designers create UX that way so that people could go step-by-step through the various features which gradually change depending on needs of the target audience. An approach helps to avoid problems with incomprehensible interactions and functions.

 

Last but not least, gamification adds the element of fun. Users enjoy entertainment, challenges, and competitive spirit similar to video games, so they are encouraged to go back. People always need some kind of recreational activity so that they could escape from everyday routine for a bit. By adding the fun element into a casual application, you help to reduce some stress and relax for a moment.

 

toonie alarm UI design

 

Don’t forget about testing

 

Mobile interaction design aims at creating a user-friendly product which will be pleasant to use under different circumstances. But how can a designer define if an app is usable enough and distinguish possible problems in UX? This is when usability testing comes into play.

 

Usability testing is an essential stage in creating mobile apps helping to evaluate it by testing on the potential audience. It is usually conducted at the UX building stage before a project goes to the development team so that inefficient solutions could be changed easier and faster.

 

Various usability testing methods allow identifying problems and bugs and quickly eliminate them. This way designers can improve all the aspects of UX ensuring user satisfaction.

 

So, before you deliver a project to the development team remember to handle testing. Test it by yourself, on your colleagues, on the potential users and then you’ll get the desired outcome.

 

choice of color in UI design

 

A simple mobile interaction system is not that easy to create. It requires hard work, concentration and lots of practice before you receive sufficient results. Stay tuned!

 

Recommended reading

 

Take It Easy: Tips for Effort-Saving User Interfaces.

Gamification in UX. Increasing User Engagement.

Color Matters. 6 Tips on Choosing UI Colors.

Mobile Typography: 8 Steps Toward Powerful UI.

Small Elements, Big Impact: Types and Functions of UI Icons.

Tests Go First. Usability Testing in Design.

Gamification Mechanics in UX: Smart User Journey.

Mobile UI Design: 15 Basic Types of Screens.


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

tubik studio sport fitness app design

Keep Fit. UI Design for Fitness Apps.

A professional athlete Billie Jean King once said: “Sports teaches you character, it teaches you to play by the rules, it teaches you to know what it feels like to win and lose — it teaches you about life.” Sports has become a part of our routine a long time ago. Even more, today a healthy lifestyle is a top trend which constantly grows its popularity across the world.

 

Fitness apps are the key helpers for people who strive to get fit. Their functionality gives a lot of opportunities and makes keeping fit easier. Understanding the significant impact of these applications on users’ everyday life, designers do their best to activate the problem-solving potential of fitness apps. Today’s article describes common screens and essential UI elements for fitness apps.

 

sport app motion ui tubik studio

Sports App Interactions

 

Sign-in and profile screen

 

Fitness app is something like a pocket instructor telling you what to do and gives a feedback on your achievements. To make it more comfortable and personalized, designers need to create an effective profile UI.

 

Before users obtain their profiles they usually go through the sign-in process. Fitness apps, as well as the other ones, can allow logging in via social networks still there are some aspects which users have to fill in to create a personalized profile. The applications usually require the personal data including age, gender, weight, and height which helps to define users’ physical condition. Profile creation is often similar to filling in an application form. This way users can easily provide the needed information to make a profile more personalized.

 

The major objective of a fitness app is to help users in their self-improvement, the reason why profiles should contain not only the personal data but also the user’s achievements such as the number of burnt calories or personal records in sports. It’s important to not to overload the profile screen with the unnecessary information otherwise user interface may look chaotic.

 

Home screen

 

It’s a core element for any type of apps. Home screens serve as the main point where users start the journey within a product. Creating UI for home screen designers need to think of it as a center of navigation and make sure users will be able to operate it easily. 

 

First of all, home screen should provide access to the other parts of the app. Designers can choose various ways of the presentation from a sidebar with minimalistic icons to the clickable subheaders leading to the different sections of app content. The choice often depends on the number of features provided by the product as well as the platform which it is meant for.

 

Activity screen

 

People who aim at getting fit always have to do various physical activities. Fitness apps provide users with the feature which helps to track how active they are during a day. To make a sufficient UI for activity screen, designers include different kinds of activities and sports. Traditionally, fitness apps provide tracking time spent on sports as well as measuring the distance which users cover during a day. The distance can be calculated in two ways: walking is measured by the number of steps and running is usually measured in miles (kilometers).

 

The information about users’ activity is often presented via diagrams of various forms. Such presentation contributes the effective visual perception of the data which includes many numerals. Also, designers often apply custom icons representing each kind of activity. This way the screen looks clean and neat even if users have a really active life.

 

fitness_app_ui_landscape_tubik

Fitness App

 

Heart rate screen

 

The heart is an engine which lets our body live and function, so it’s important to follow its condition daily. Many fitness apps can be connected to the various devices such as fitness wearables which allow measuring pulse. The applications usually transfer the data gathered with devices on a heart rate screen.

 

User interface representing the feature should be simple with the minimum of elements so that it could be easily operated. Since the process of pulse measuring takes some time it may be a good idea to supply the UI with sufficient animation which will show the loading process. For example, motion designers can animate an illustration of the heart showing it beats. Custom illustrations along with motion design can make UI look more proficient and make the process of the pulse measuring more interactive.

 

Sleep tracking screen

 

Nice sleep is a guarantee of the human health. Sportspeople know it better than anyone else and always try to control the time and quality of their sleep. Fitness apps show the gathered information during a night which includes the time and stages of sleep. There are four stages of sleep: the first and the second are called light sleep, the third is deep sleep and the fourth is rem sleep. The applications track these stages and in the morning users can see the statistics. The data on sleep is often shown as graphs.

 

Calories screen

 

They say that fitness people are obsessed with calories. Well, there is truth in the words because if you want to get fit it’s vital to control what and how much you eat. As we said above, fitness applications show the information on the number of burnt calories based on the activity results. The calories data can be displayed on the activity screen as well as on the personal profile. However, it may be an effective solution to create a separate screen to provide users with the expanded information on the lost calories.

 

Sport app UI design

Sports App

 

Progress screen

 

To stay motivated and continue self-improvement, it’s important to know that the hard work gives results. The progress screen shows the statistics about users achievements along with failures. Here the graphs will be the best choice. If people have the progress, they see that their results are getting better and the scales on the graphs go higher.

 

Schedule screen

 

There can be many sports activities in different time and different places so the schedule seems to be essential in this situation. The screen of schedule is standardized, but to make it unique and original, designers can add some interesting icons representing various sports directions.

 

Goals screen

 

Goals move us to achieve more and more, especially if we talk about fitness. People start doing sport because they have some goals like losing weight or shaping up. In fitness applications, users set maybe a bit less radical goals but easier to achieve on a regular basis. They often include walking a certain number of steps per day or week along with burning the fixed amount of calories.

 

The screen of goals can be presented as a sheet divided into categories: to do, doing, done. This way users will see how much they have managed to achieve and what they need to strive for. In addition, designers can settle the system of awards which will help users be even more motivated. We’ve already described awards as effective gamification tools which contribute increasing user engagement. You can find detailed info in our previous articles.

 

tubik_studio_bebright_app

BeBright App

 

The sport requires persistence and fortitude and so does the creation of sufficient UI design. Learn the basics, add some inspiration and you can surprise yourself. Stay tuned!

 

Recommended reading

 

If you want to learn more about common screens for various mobile apps, here is the list of helpful articles revealing tips on mobile UI design and its components.

Mobile UI Design: 15 Basic Types of Screens.

Feel the Beat. UI Design for Music Streaming Services.

Spectacular Design. Elements of Cinema App UI.

 

fitness_app_ui_design_article


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

ui design for music apps

Feel the Beat. UI Design for Music Streaming Services.

People like listening to music. It’s an axiom and never a question. As Friedrich Nietzsche said: “Without music, life would be a mistake.” And who would argue? All of us listen to music daily. Some may prefer rock, others — classical compositions still no one misses a chance to enjoy their favorite tracks. Considering this fact, the need of having a twenty-four-hour access to music seems as a today’s must-have.

 

It’s hard to say how many music service products exist today but the industry constantly grows so designers have lots of work to do. We devote a new article to the peculiarities of UI design for music streaming services. Let’s see what screens are typical for this type of digital products and what elements their UI requires.

 

What do users expect from music streaming products?

 

Music streaming products aim at providing users with an access to the various musical tracks from all over the world. There are both free and paid services trending on the digital market and they are available for different devices including PCs and smartphones. Of course, all music streaming apps strive at uniqueness still they have a common base of tasks to accomplish. Let’s see what this kind of products usually offers to their users.

 

Online and offline music streaming. The majority of music players usually provide online streaming so that users could enjoy various tracks without downloading them on their devices. However, people can’t always have an access to the Internet so the feature enabling to download certain compositions and play them seems to be essential.

 

Playlists. Music streaming products contribute thousands of different tracks but even the biggest music lovers won’t listen to all of them. Playlists are a core part of music players. They allow users to choose and combine their favorite compositions for different mood and situations.

 

Music flow. Sometimes, people get bored of their playlists and want just some random tracks to play. Music flow is a list of tracks based on the users’ preferences which never repeats itself.

 

Radio channel. They say all new is well overlooked old. Even having a quick access to the favorite music, there are still many radio lovers. In-app radio channels are a nice alternative to the flow as well as an element of entertainment.

 

Music storage. Not all the tracks can be free to listen, which is why music players often give the possibility to buy paid tracks and add them to their playlists.

 

Equalizer. People perceive music differently so the need of sound settings is obvious. Equalizer helps to make music sound in the best way for a user by regulating music tones.

 

music streaming app design

BeatSync App

 

Screens for music service products

 

Based on the users’ needs designers have formed a standard set of screens (pages) which are typical for this kind of product. Let’s see what they are and which UI elements they usually include.

 

Home screen

 

Any digital product has a page or a screen where users start their journey within a product each time they launch it. A home screen is also known as the main page of a digital product. It received its name as it provides a starting point with many further directions for a user.

 

A home page of music streaming products often contains direct links to the most important areas of interaction with an application such as a personal profile, playlists, search field, and music store. Also, a home page provides an insight on music updates as well as the recommended music for a user.

 

Traditionally, UI of a home screen for a music app is made in minimalistic style. Recommendations and music novelties are presented via pictures of album covers or artists’ photos followed by captions saying the name. This way the search process becomes more intuitive and pleasant.

 

Profile screen

 

Profiles are a tool making interaction within a product more personalized. They allow operating with the information effectively and make user experience individual for everyone. As for music products, personal profiles assist developers to gather information about users’ tastes and preferences in music genres and artists. Based on the data, an app will provide listeners with recommended music as well as interesting fresh tracks.

 

In addition, a personal account is a good way to add features of a social app to a music streaming product. This way users can unite in a virtual community of a certain product and share the personal info with the others.

 

The principle of a profile page design remains similar for all types of products. First of all, a profile page should be clear in use. The amount of the information has to be limited otherwise a profile screen may look too complex. What’s more, it’s vital to make sure the navigation system is intuitive so that it wouldn’t have to take much effort to puzzle out the app.

 

UI Navigation menu and Profile screens v2 for Echo case study

Echo app

 

Search screen

 

Hunting for new songs is a daily routine for true music lovers. Designers need to make sure it goes easily and leaves only pleasant impressions. UX for search screen should be well-thought and intuitive so that users could quickly find what they need. An essential part of a search screen are filters helping to sort the received results. There are some typical filters for a music app which include genre, artists, songs albums and a year of release.

 

Playlist screen

 

Music lovers like creating their own playlist for every occasion. Obviously, every music app is obligated to provide their users with such a feature. Playlist screen looks similar on different apps: it’s a list of tracks showing the name of the song, singer or band, and the length of the soundtrack. Also, designers can add a small image of the album this track belongs to. In case a song has no image there still should be an icon, for example, with a music note.

 

Player screen

 

The page which people visit most of the time using a music app is a player. People can control what they listen and how they listen to it via the player. The feature allows switching, stopping and starting a track with standard buttons which are easily recognized. This set is usually placed centrally on the bottom of the screen. The major part of the screen is typically taken by the image attached. Also, sometimes instead of a picture, many designers apply music visualizer as a central part of the screen. Visualizer is a good opportunity to reveal the imagination and creativity which is always inspiring for designers.

 

tubik studio music_app

Music App

 

Music feed screen

 

If a music streaming service provides a possibility to add friends and follow other users, a music feed should also be considered. Feed is usually known as a constantly changing list of news and other data users choose to follow. Music feed includes the updates on the friends’ pages as well as news from the pages of particular artists they follow.

 

Designers make a simple clear UI for music feed which isn’t overloaded with visual details. It allows people to scan quickly through the feed not getting overwhelmed with tons of information.

 

ui design for music app feed screen

Echo app

 

Settings (equalizer screen)

 

Each app needs to have settings screen but a music app requires one specialized option. Besides other standard settings, they provide a possibility to tune the sound of the music. Depending on the music genre experienced listeners adjust the loudness of specific frequencies via an equalizer. Equalizers often look similar to vertical graphics responsible for certain frequencies which users can regulate with sliders. The designers often do experiments with equalizer UI to be certain it’s not boring to use.

 

Music store

 

As we said above, not all the music can be free so a music store comes in handy. UI design for music store usually borrows some principles of e-commerce design. First of all, paid music is presented in a catalog with relevant filters for the search. Clear visual elements support the product not overshadowing it.

 

app UI design Tubik Studio

Singify App

 

Music has always been a source of inspiration for people around the world. Trends may constantly change but music will never step aside as well as products providing us with our favorite tracks. So, possibly, sooner or later each designer will create their own new music product.

 

Recommended reading

 

Mobile UI Design: 15 Basic Types of Screens

 

Case Study: Echo. Designing User Experience and User Interface


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

gourmet_herbs_website_design_tubik

Sell Like Hotcakes: UI Designs for E-Commerce.

In many cases when we are buying something, it’s not just about getting new things. It’s often about feeling and memories, dreams and achievements, changing ourselves inside and outside, sharing and giving, improving and learning… The advent of new technologies opened new perspectives for both shoppers and sellers, and the process of upgrading this type of relations is in active progress. A decade or two ago, buying something on the Internet was not included in a typical daily routine while now getting things and services in a couple of clicks cannot surprise anyone.

 

This state of things sets new challenges for the sellers, with efficient and appealing digital products for e-commerce ahead. “If you do build a great experience, customers tell each other about that. Word of mouth is very powerful,” said Jeff Bezos, the founder of Amazon, the biggest global online retailer. Today’s generation of shoppers is different in its vast majority: they are ready to buy almost everything online, they want to see the simple way to do it, they demand secure payment and fast delivery — and good design to present that all. That’s why websites and applications for e-commerce are so various: they have to attract their customers without getting lost in the ocean of the online competition. Well-designed user experience, based on research of the market and target audience as well as nice and effective visual performance, grows the chances of getting profits: in e-commerce sphere, the connection between design and profits is tighter than anywhere else.

 

Today we would like to offer you the set of interface concepts created by Tubik designers with the issue of e-commerce in mind. Here you’ll find the websites, mobile applications and landing pages aimed at selling products and services.

 

Website for a florist shop

 

web design florist store ecommerce

 

Flowers present the popular way to express various feelings and celebrate special occasions. Here’s the design concept for the online florist store: the general stylistic concept is light, minimalist and airy while prominent theme photos set the mood and inform users about the nature of the e-commerce offer. The home page sets the theme, establishes branding with the logo and slogan and shares some information about the service. The header gives the instant access to the extended menu of items hidden behind the hamburger button as well as provides the links to search, wishlist and shopping cart presented with minimalistic stroke icons. The footer includes the links to important service pages and accounts in social networks.

 

florist shop website design

 

Another page shows the catalog of items organized in cards: each presents the high-quality photo which is vital for this kind of business, price, and ability to add it to the cart or save to the wishlist right from the catalog page. There’s also the cloud of tags marking popular categories for better navigation.

 

florist shop website design

 

If the user wants to learn more about the particular offer, it can go to its product page, like the one shown above, and check the details.

 

Application for the e-commerce jewelry store

 

jewellery ecommerce app UI

 

Here’s a set of interactions for the app design concept of the online jewelry shop. The presented screens show the starting point of interaction with the app from the splash screen to the catalog showing categories of goods and special offers. The app provides theme photos setting the instant visual associations with the offered items while icons are stroke and minimalistic not to distract buyers’ attention. The color palette features pastel shades which look sophisticated on general layout full of light and air, and that feeling is supported with smooth and unobtrusive animation of the interface elements.

 

jewellery ecommerce app

 

The presented screens show the animated interactions with items: you can see how users can choose a product from the catalog, check its details and rating. They can also share the product cards to their social network accounts and open check out. Visually, the center of the visual composition is focused on the images presenting the items, while icons are stroke and minimalistic not to distract buyers’ attention.

 

Application for a cinema

 

cinema_app_ui_design_tubik

 

Despite the Internet, movie portals and super TV-sets we have in our homes, going to the cinema is still one of the most enjoyable and popular ways to spend free time either alone or together with friends and family. We follow the premiers, check the schedules, discuss acting and special effects afterward. And obviously, it is another perspective for e-commerce challenge. Here’s a sort of creative experiment — a mobile application for a cinema chain called Cinema App. The home screen shows the list of films presented with instantly recognizable posters. Tapping on the one among them, users see a screen of the particular film with all the necessary details: genre, trailer, description, rating, as well as the showings for the particular city for a particular date.

 

cinema app interaction ui animation

 

And this is the flow of choosing and booking the seat. Selecting a particular showing, users can see the available seats, choose the ones they like and book them, paying right from the app.

 

Landing page for dance academy

 

dance_academy_website_interactions_tubik

 

Here is the animated set of interactions for the landing page of the dance academy called HeartBeat. The elegant and minimalistic layout shows prominent theme images, gives short descriptions of the activities and links to core areas of information as well as provides the contact form to get in touch. The top section includes the horizontal slider which informs users about the upcoming workshops. Scrolling down, users can read brief descriptions about the academy and the types of classes it offers with buttons enabling to learn more, and they can use the simple contact form to get in touch. The designer was inspired by the photos of dancers by NYC Dance Project, Paul B. Goode, Andrew Eccles, Paul Kolnik, and rich animation of the dancers added a special experience to scrolling. This approach creates a sort of wow-effect to support aesthetic satisfaction which corresponds to the preferences of the target audience. This is the effective example of selling the original type of services with sophisticated design solutions and a good balance of beauty and simplicity.

 

Website for herbs and spices store

 

web design UI tubik studio

 

This is the design concept of The Gourmet, the online market for herbs, spices, seasonings and all that kind of stuff. Here you can see a product page presenting a particular item with the prominent theme image, description, price, and ability to add the item to the cart. The minimalist header provides the links to the core areas of the website while hamburger menu hides the extended catalog. Moreover, here designer tried a creative experiment: this concept applies design techniques traditional in e-commerce for fashion but the type of goods is very different – they are for eating and cooking.

 

Bookshop Website

 

online_bookshop_website_design_tubik

 

The famous author Stephen King once said: “Books are a uniquely portable magic” and numerous generations of readers prove it all the time. More and more people now use the Internet as the source to both learn about books and buy them. To support this direction of e-commerce, here’s the design concept for an online bookshop Book Pitch. The interface uses light and airy background and includes several theme blogs showing news, bestsellers, categories of items and reviews from readers. The visual presentation is strengthened with slight scroll animation.

 

bookshop website animation

 

Landing page for selling exhibition tickets

 

museum website

 

Although the sphere of art doesn’t look directly linked to e-commerce, the connection really exists: more and more users are buying and booking tickets online. Here’s the interface for this service — a landing page promoting an art exhibition. The idea behind it was to make this sort of informative promotion aesthetic and unobtrusive for the user as well as highly informative. It applies the horizontal scroll with the smooth animation of cards presenting key exhibits, shows the locations and dates and prominent call-to-action for buying a ticket.

 

Landing page for an online travel gear store

 

Travel Gear Landing page by TUBIK

 

Here is the layout of a landing page: 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 the general description of the shop, presents the ability of transition to the catalog via the description of hot offers and also has testimonials part to provide users’ opinion about the service.

 

Website for a bakery

 

Bakery website design case study tubik

 

Another example the concept of a bakery website for which we presented the full design case study here before. Here is the animated version featuring interactions with the website: home page, catalog the f offers and the page presenting a particular position. The designer followed the philosophy of minimalism which is user-friendly, attractive and informative. Dark background supports the brand image with the idea of the elite and exclusive offer as well as set the ground for sophisticated presentation of the sold items.

 

Randomizer for the online furniture store

 

tubik studio design UI

 

Here’s the concept of a randomizer that allows users to choose between many options of designer chairs in this case. However, the idea can be applied to any e-commerce digital product. This is a helpful thing as usually we don’t know what we want until we see it. Minimal and bold color palette and prominent item images make the interface helpful and intuitive for users.

 

Landing page for online farm grocery

 

Landing Page Animation Tubik Studio

 

As a famous writer George Bernard Shaw once said, there is no sincerer love than the love of food. This one is a landing page whose aim is to promote the shop of organic food. It is composed of several blocks presenting the products, highlighting some important aspects of service, call to actions and testimonials.

 

Website for the fashionable clothes shop

 

fashion clothes ecommerce website

 

Another example of design for e-commerce presents the layout of a catalog page for the website of a company selling fashionable clothes for women. The header includes the links to the global categories of the clothes and the page features the fresh arrivals with photos on models, pricing, and brief item description.

 

Useful articles

 

If you want to go deeper into the theme of design for e-commerce and learn more about strategies, principles, terms and practical cases, this set of articles can be helpful

Hit the Spot: Design Strategies for Profitable Landing Pages.

UX Design for E-Commerce: Principles and Strategies.

Business-Oriented Design. Know Your Target.

Case Study: Vinny’s Bakery. UI Design for E-Commerce.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics

Landing Page. Direct Flight to High Conversion.

Case Study: Saily App. Designing C2C E-Commerce App.


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

Welcome to read or download free e-books about Design for Business and Problem-Solving Web Design

bright_vibe_calendar_app_ui_tubik

Mobile Typography: 8 Steps Toward Powerful UI.

Mobile design heavily depends on every detail it consists of. Screens are quite small so designers need to choose elements thoughtfully trying not to overload user interface. Such a peculiarity makes typography creation for a mobile rather tough task. Mobile typography requires deep attention to the details from an appropriate kind of fonts to compelling tracking and alignment.

 

No matter how challenging it sounds, designers strive to build effective mobile design because smartphones are a huge part of our life. The article describes essential principles for compelling mobile typography.

 

tubikstudio ui app design

 

High level of legibility

 

Legibility is called a level of how distinguishable and recognizable the words and characters are in a text. The major objective of powerful typography is clear text which users perceive without efforts. Small screens and ambient light of mobile devices may become a problem on the way to creating legible typography. To avoid problems with legibility, designers need to consider all the factors influencing clarity of text.

 

Font size

 

In terms of mobile typography, the size does really matter. Some may think that on small screens tiny fonts will work best. It’s a misbelief. Small fonts on a bright mobile screen can make user’s eyes hurt from tension and bring a headache. Of course, modern devices allow screen zooming still it’s not always convenient for users to spare an unnecessary effort. Fonts in mobile UI should be big enough for users to read easily but not too big to save typographic hierarchy. The appropriate font size is a key to pleasing UX.

 

Leading

 

As we’ve mentioned in our previous article, leading is the spacing between the baselines of copy. In a mobile interface, leading is usually smaller compared to a desktop version. Wide leading may ruin the visual unity of text while too short space makes it badly legible. If a leading is done right, readers go fast from one text line to another and big pieces of copy become legible.

 

todo list UI app tubik studio

To-Do List App

 

Line length

 

To make body copy comfortable for reading in mobile interface, designers consider all the parameters including length of text lines. Optimal line length for a desktop screen won’t work same for mobile. Too long lines would go beyond screen borders, that is why designers are recommended to keep the number of character per line within 30-40.

 

White space

 

When design elements are tightly gathered in a bunch, the user interface looks messy and navigation is rather difficult. Designers need to give elements space to breathe bringing a relief to users’ eyes and mind. The size of mobile screens doesn’t allow using much of white space that’s why a balance between the elements has to be found.

 

UI animation wine app

Wine Year App

 

Fewer levels of hierarchy

 

Visual hierarchy is applied to organize content in interfaces clearly so that users could distinguish layout objects on the basis of their physical differences, such as size, color, contrast, alignment etc. Hierarchy divides content into levels assisting users to learn copy content gradually step by step without effort and get oriented in the digital product.

 

Web design usually contains three levels of copy content which include such elements as headings, subheaders, body copy, CTA buttons, and captions. However, small mobile screens don’t provide enough space for three levels, so designers apply only two. Elements of a secondary level such as subheaders step aside to make UI look clean.

 

mobile app design tubik studio

Moneywise App

 

Simplicity of fonts

 

A key feature of effective mobile UI is simplicity. Design should be clear and the navigation easy to use, so font choices have to be based on the requirements. First of all, it is recommended to keep a number of fonts within two or three to make text look solid. Designers often stop their choice on two types of fonts for mobile interfaces because it requires fewer levels of hierarchy than web design.

 

Moreover, kinds of fonts should also fit a simple and clean style. Novelty and decorative fonts may look illegible on small screens. Designers regularly combine a serif and sans-serif fonts to create enough contrast of copy elements in the layout. In addition, it’s good to reduce effects like a shadow for mobile fonts. On desktop screens, they may work nice but will make small mobile screens look overloaded.

 

book swap app interaction design

Book Swap Interactions

 

Delicate contrast

 

Contrast is an efficient tool for designers. It helps highlight vital UI elements as well as contribute a desirable level of text legibility. However, speaking of mobile interfaces, contrast may play a bad joke. Small screens, ambient light, and short fonts make a contrast image look unpleasant for users’ eyes. Reducing contrast between the background and copy elements, designers help users feel comfortable while reading text on a mobile screen.

 

Contrast can be created not only via colors but with sizes of fonts to set visual hierarchy. Nevertheless, mobile interfaces are short of space for giant headings, that’s why size contrast should be also reduced.

 

jewellery ecommerce app

Jewellery E-Commerce App

 

Responsive typography

 

People surf the Internet via all devices available today. That’s why responsive design is a key condition for a successful digital product. Typography is a vital part of design responsiveness. Wrong size, width, and placement of fonts have a big impact on a whole composition. Even the most insignificant changes may break the balance between all design elements.

 

Creating typography for a digital product, designers need to consider how it will look on different devices. Planning such things forehead helps to avoid unnecessary problems in the future.

 

cinema app interaction ui animation

Cinema App

 

Prioritized content

 

To make mobile interfaces simple and useful, designers need to take care of the wise content organization. Users want to have a fast access to information they are looking for and mobile screens can make the process complicated.

 

Mobile UI has no room for unnecessary copy elements. There should be only essential content thoughtfully prioritized. Based on users’ needs and preferences, designers set a structure assisting people to navigate within the product and find what they are searching for. Text elements are prioritized by size changes as well as different width or kind of font.

 

tubik_studio_book_swap

Book App

 

Clear text rags

 

Depending on the type of a product, designers apply appropriate alignment for text blocks. It can be placed on the left, on the right, centrally or it can be justified. However, speaking of mobile design many experts often stop their choice on left side alignment. This kind forms text where the beginning of each line is placed equally and the rags look similar to stairways. Such a structure helps users easily go from one text line to another and scan text fast and easily. If body copy alignment is justified (text lines placed equally), it has no rags either side. The text with such structure is difficult to scan on a mobile screen.

 

tubik studio healthy food animation

Healthy Food App

 

Functional typography

 

While computer users do the clicks and scrolling to interact with products, mobile screens should provide much more functionality. There are many text elements in mobile interfaces that allow users to accomplish certain actions like buying a product, making a call, going to a website and others.

 

Designers need to make sure users understand how the text elements work and enable them to complete the actions. Functional typography should be highlighted among the other and clickable elements should be big enough to tap on them.

 

menu_interactions_ui_animation_tubik

Menu Interactions

 

Things to jot down

 

Minimalism. Mobile screens are short of space, so try not to overload it. Simple fonts, clean style, and a minimum of elements will do their job.

Test the smallest first. Mobile devices have various sizes but the biggest problem is the smallest. Create your design based on how it will look on the tiny screens first. When it’s ready, you can easily adapt it to the bigger sizes.

Avoid decorative and cursive fonts. They don’t render properly on the small screens. Moreover, decorative fonts overload interface with unnecessary details.

Legibility first. Of course, it’s good to make beautiful catchy UI but sometimes all the colors, contrast, original fonts may hurt the legibility of copy content. A good-looking text is not enough. Make sure it is legible otherwise users won’t be able to read information and use your product properly.

 
jewellery ecommerce app UI

Jewellery App

 

Every mobile UI design project is an interesting challenge. Meet it with the knowledge and the results will please you.

 

Recommended reading

 

Meaningful Mobile Typography by UXPin group

 

Mobile UI Design: 15 Basic Types of Screens.

 

7 Simple Rules for Mobile Typography

 

Typography in UI: Guide for Beginners


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