Tag Archives: mobile app

toonie alarm time picker

The Ultimate Guide to Creating a Mobile Application

Most modern people would find it difficult to imagine their day using the smartphone «just for calls». Most mobile devices jumped far beyond the primary goal behind them — making phone calls and sending simple instant messages. Today even quite a simple mobile presents a platform to house various applications for everyday use that turns thousands of people into grateful users of more and more apps. Simple or complex, informative or entertaining, minimalist or packed with bright and catchy details, practical or joyful, meeting the user needing them, they make life better. The variety of apps available today enables users to do the great variety of things using their mobile phone only. Setting an alarm for tomorrow, calculating expenses for the next week or sending mum a selfie via messenger app, vast majority of users don’t even imagine how many people stand behind these simple everyday operations.

 

Earlier in our articles we have already unveiled the typical steps of creating interface design for mobile applications. Today let’s go further and set the full path of creation for a mobile app, from setting the idea to its release in App Store.

 

As well as in any creative process, making a mobile application out of the thin air is a sophisticated process which has its individual peculiarities and features in every particular case. Still, on the basis of Tubik Studio extensive experience of creating diverse applications, it is possible to define several typical creative stages for this process, such as the following:

 

— setting the task and initial scope of works

— estimation

— user/market research

— UX wireframing

— prototyping

— UI design

— animation

— software architecture planning

— iOS development

— testing

— release

— updates.

 

Although you see the sequence of stages, it doesn’t mean that every further phase starts only when the previous one is completed. It’s impossible to imagine this kind of linear dependence as many processes and stages are interconnected even not being consequent in the presented list. Moreover, some of them like testing or estimation come up here and there being spread for all the process of app creation.  Now let’s go along this way step by step to see how a subtle idea becomes a real mobile app.

 

tubikstudio app ui design

 

Setting the task and initial scope of works

 

As we have already mentioned in the article considering logo design stages, the point of setting the task is the foundation of all the design and then development process. At this point the team of designers and developers should obtain maximum information from the client to mark the right way to the goal. The one who walks without a destination in mind, will possibly come nowhere. In product design it works the same way: to get the result, you should clearly set the goals from the very start of the path. It doesn’t mean that the goals should stay totally the same at the end of the journey: the proper level of flexibility has to be set as the objectives can modify more or less in the creative process, research and testing. Still, if the general goals are not set at the start, the creative process can get easily transformed in a mess.

 

Another vital tip, which we have seen through long practice, is that communicating with clients you should get not only their wishes but also try to get the ideas and reasons behind these wishes. If you understand why your customer wants to see particular colors, shapes or transitions, it will be easier for you (if necessary) to justify other methods of realization for these ideas which would give the result desired by the customer and at the same time user-friendly and thoughtfully consuming resources or enabling interactions.

 

The more information you get from the client, the better it is for setting the right direction. Design briefs, calls and Skype-conferences, chat in Slack, brainstorming sessions, mood-boards can all form the good starting line for productive work. In our case, this point of journey is started by sales managers and business analysts who take over the first line of communication with clients and are experienced on setting the bridge between the customer and creative team.

 

tubik studio clients service

Tubik Studio Head of Operations Kate uses all the means to communicate with clients and get into projects

 

At this stage, it is highly advisable to get the data about:

  • the nature of the product and its USP
  • the target audience
  • geographical targeting (if available)
  • the keywords with which the company represents its identity
  • preferred structure and functions clients see as vital in the app
  • preferred visual features (color palette, general style, special features, connection with other already existing digital products or brand strategy etc.)
  • potential technologies, devices and surfaces at which the app will be used
  • need of consistency with existing corporate identity (if available)
  • nature of data processing, need of server side and additional technologies
  • specific preferences

 

Obviously, the list is not completely full, still it contains the most important positions needed for setting a general design and development flow. The outcome of this stage is the diverse set of information blocks establishing the basis for further estimation of the project, planning logical milestones and sprints as well as working our efficient design and development solutions.

 

Estimation

 

The data collected at the previous stage enables business analysts and sales managers to provide the client with the first-level estimation of the time needed for the project and therefore the planned costs. As in any creative process, it is practically impossible to make one totally exact estimation which will stay the same during the whole project: this is the the data which should be got back to and reviewed after every stage of design process. Certainly, there can be some cases of products that are quite simple, have clear structure and do not include many screens or elements, so estimation will be quite exact from the very first stages of processing client’s data and wishes. However, the more complex is the project, the highers are the chances of estimation reviews and adjustments. One more vital thing to mention: this reviews do not necessarily mean growing pricing or timing, as in the creative process designers and developers can find the ways of optimization for design and technology solutions which can even shorten the initial estimation.

 

This flow is close to perfect in cases of full-stack teams: it means that business analyst can involve designers and developers into the assessment process from the earliest steps of analysis and estimation which is able to provide more real and exact planning of time and costs. Furthermore, specialists participating in discussion are able to contribute a lot of knowledge and experience on technical details and factors influencing time and resources needed for the app design and development.

 

Design Studio Tubik

 

User/market research

 

This is the stage when being based on the established task and aims, UI/UX designer starts the path with getting deeper into the environment in which the future application will function. The research stage usually moves on in two directions simultaneously: user research and market research.

 

User research means getting deeper into details of core target audience to understand their preferences and psychological peculiarities, the influence of different factors like colors, stylistic decisions and logic of interaction on emotions and experience of the defined group, the sources of information and creative performance ways which could engage users and make them active. Marketing research means exploring the market segment, primarily in the perspective of creative solutions used by competitors. Visual design presumes creating original and recognizable style that will make the product stand out of the crowd and draw potential customer’s attention.

 

Famous guru of advertising David Ogilvy emphasized the great importance of research for creating effective result: «Advertising people who ignore research are as dangerous as generals who ignore decodes of enemy signals.» Time has changed the means, goals and technologies, still vital role of research established even stronger. Neglecting the research stage and relying only on their creative intuition, experience and talent, designers risk failing this task as they will not know the conditions of the app functioning and will not be able to make it efficient, user-friendly and original.

 

tubik studio UI designers

 

UX Wireframing

 

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

 

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

 

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

 

tubik studio design process ux

 

Prototyping

 

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

 

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

 

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So, here in Tubik Studio we support the workflow having the sequence «UX – prototype – UI».

 

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

 

invision prototyping tool tubikstudio review

 

UI (User Interface) Design

 

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

 

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

 

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

 

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

 

Tubik Studio

 

Animation

 

Telling about the details and benefits of interface animation used in mobile apps, we mentioned that the most efficient way is to consider this aspect through all the creative stages. However, the high time to apply it in practice is when UI design is basically accomplished and general stylistic concept is agreed upon.

 

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

 

tubikstudio ui design

 

After this stage is accomplished, the visual details approved and agreed upon, designers transfer the assets to developers who are going to do the magic of making them alive. Also, this is the good time to review the estimation once again and plan the clear sprints on development on the basis of thought-out design.

 

Software architecture planning

 

A noteworthy detail is that scalability is one of the most important things for a mobile application. Planning of software architecture can take place as a stage parallel to design. This is a complex process: it usually includes a lot of iterations, with a constant feedback loop between design team and development team. The main goal of architecture planning is to create constructive and integral plan for the software architecture of the app (front-end and back-end). At this stage developers decide on the most efficient technical and technological solutions for actual realization of the app and maintaining its operability. The decisions depend on various factors, for example the nature of the product and data it processes, complexity of design solutions, necessity to save data and availability of log-in functionality etc. Back-end development sets the bridge of the app with the web and supports synchronization of data in both directions.

 

iOS development

 

The actual process of coding the app here in Tubik is done in Xcode as the effective and flexible platform with broad functionality for iOS developers. As it is defined on the official website, «Xcode is Apple’s integrated development environment (IDE). You use Xcode to build apps for Apple products, including iPad, iPhone, Apple Watch, Apple TV, and Mac. Xcode provides tools to manage your entire development workflow—from creating your app to testing, optimizing, and submitting it to the App Store.»

 

Xcode only runs on Macs and has everything developers need to build iOS apps. There are no official ways to launch it on a Windows or Linux PC. This means that if somebody wants to develop an iPhone, iPad, Apple Watch, Apple TV and Mac apps but doesn’t have a Mac, he or she will need to buy it.

 

Two basic and most popular programming languages for iOS development are Objective-C and Swift — we considered benefits and drawbacks of each in our earlier post. Since 2014, Swift language has been used by Xcode for coding more often than Objective-C, which is a difficult language for developers to learn and code. Still, Objective-C is a good fit for early iPhone hardware which has less RAM and slower processes and it is also effectively applicable for maintaining and updating the apps initially created in it. Swift keeps step with modern hardware and it is also faster in the process of coding, it is more easy-to-use, shorter and secure. For creating iOS 10 apps, Xcode 8 and the iOS 10 SDK need to be installed, also available from Apple. There are significant changes to the Swift language and the SDK in this version of Xcode.

 

iOS development swift objective-c

 

In this phase of mobile app creation, iOS developers think over the architecture of the app, write the code, integrate functionality to created UI, edit source code, debug and finally export the app to the App Store. Also, writing unit tests and running integration testing are relevant steps in this phase. The Interface Builder is one of Xcode features and it is alternative to hand coding the client-side part, allowing developers to put the app code together visually. This feature allows dragging and dropping different visual controls into the app code. AutoLayout helps to control the app presentation based on the size of the user’s screen. With Storyboard, developers can see what each screen of the app actually looks like, while Preview Mode delivers a prior acquaintance of what the app will look like when it is done.

 

Lots of mobile app developers are of opinion that a text editor is generally necessary, even though it is theoretically possible to do the entire coding inside Xcode. Handling long and complex codes can become particularly confusing, unless programmers use a text editor that supports all relevant programming syntaxes.

 

ios development tubik swift objective-c

 
In most cases, while part of developers team is building client-side part, the other part are coding, integrating and linking to the front-end server-side components of an app such as database, APIs, middleware and etc.

 

It also should be noted that planning the workflow and the number of people involved into the development process depends first of all on the complexity and urgency of the project. For small projects, one iOS developer may be able to create all components of software architecture for the app. For multilayered complex projects, at least a couple of programmers should be engaged, having experience in software architecture and good expertise in both client-side and server-side development.

 

The main task of this phase is to make a fully working app which is scalable and integrated to all required server-side components like a database, APIs, and other related infrastructure it needs to run. If clients aren’t ready to build the original server-side infrastructure, they can buy a Backend as a Service (BaaS) software bundle or other products. The bundles include a variety of storage options and features, but they aren’t completely “turn-key” as well as they  often do not provide the options of deep and comprehensive analytics. It means the client needs a developer who understands back-end engineering to integrate it into the app.

 

web development

 

Testing

 

“Quality is never an accident; it is always the result of intelligent effort”, John Ruskin once said and it’s definitely true when it comes to a digital product testing.

 

Testing is one of the crucial phases of the entire app design and development lifecycle, it can help to find bugs before the app is brought out to actual users. App Store will not accept any apps that have compiling errors and bugs, so the mobile app being prepared to submitting has no chances with those kinds of issues. In the majority of cases, users abandon the app if it has functionality problems, no matter how promising and engaging it seems. Even the simplest apps can be successful for commerce, business, advertising and other aims if they work correctly and efficiently, according to target audience’s expectations and solving their problems .

 

Testing doesn’t mean that developers do not provide the upper quality. To set the analogy, the fact that every book, magazine or newspaper issue goes through editor’s eye doesn’t say that journalists or writers are not talented and qualified. Different specialists have different goals and skills in the process to increase general productivity and efficiency, and it works the same way for design and development of mobile apps. Supposing that developers have done a great job and made no mistakes, the task of testing is not only finding errors. Quite the opposite, it helps to understand the quality of the app and find the way to improve via real interactions.

 

mobile app testing

 

Automated testing got really popular now because it is effective, cheap and reliable. iOS Simulator and other testing tools such as Appium, Frank, Calabash and others are available to help to run the app through the testing process and point out the issues requiring attention. Continuous testing at all stages helps to keep small bugs from becoming major issues later on.

 

In the process of testing, developer usually goes all the way through the app on a device or in the iOS Simulator of Xcode, screen by screen, to ensure there are no bugs or errors and everything works properly. Fixing or debugging can be done right in Xcode.

 

All aspects of the app should be tested. Developers will need to check it across different devices (iPhone, iWatch, iPad, iPod, etc.) as the points like screen resolution, processors, battery life and memory will be different and can significantly affect how the app runs. They also test functionality (Do all the functions work well?), handling and loading time (Will it slow down if traffic increases?), and UX (How easy is it to use?). In addition to above-mentioned issues, developers review crash reports to see what should be fixed.

 

tubik studio developers testing

 
Here are some types of testing applied in the process of mobile app creation:
 

Functional testing. It is the most basic test for any application to ensure that it is working according to the defined requirements and there are no functions missed in the process of interaction.

 

Performance testing. This type covers client application performance, server performance and network performance. For example, it checks the performance specifications and behavior of the app under certain conditions such as low battery, bad network coverage, low available memory and etc.

 

Memory testing. This type checks that each application maintains optimized memory usage throughout the user surfing.

 

Interruption testing. An app may face various interruptions while working, such as incoming calls or network coverage outage and recovery. This kind of testing shows what will the app do under these conditions. The common types of interruptions are:

 

  • Incoming and Outgoing calls, SMS or MMS and different notifications;
  • Low memory warning
  • Cable insertion or removal
  • Network outage or recovery
  • Media Player on/off
  • The device power cycle, such as low battery notification etc.

 
Security testing. It checks vulnerability of the app to hacking, authentication and authorization policies, data security, session management and other security standards.

 

Usability testing. It is carried out from the early stages of app creation to verify if the app fulfills the established objectives and tasks getting a good response from users. As Joyce Lee, the representative of Human Factors Design at Apple mentions: «Usability answers the question, “Can the user accomplish their goal?»

 

Submitting / Release

 

Finally, there comes the day when the app is alive and ready to be introduced to its users. In order to be submitted to the App Store, it needs to join the iOS developer program. Apple reserves the right to review and approve the app before it can go live. In any case, it is advisable to plan around a week or so to have the information reviewed and approved by Apple. If the app will be used for commercial purposes, additional step to submission via filling in short surveys will be included in the process and will need the separate approval which is usually expected within a day. Process of  the app release in the App Store takes a few steps, including configuring the code, creating a profile, creating a listing, then submitting it through Xcode for certification. It might involve a few fixes and re-submissions, so it is helpful for iOS developer to know the ways and what to expect.

 

As you can see, the way, which a mobile application goes through, is quite complex and includes variety of steps ensuring its functionality, beauty and quality of performance. Don’t miss our next articles that will provide deeper insights into each of the stages as well as tools and tips for better design and development process.


 

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

Toonie Alarm UI design

Case Study: Toonie Alarm. App UI Design.

Designing a product for everyday use, it is vital to ground it on the thorough market research, thought-out design presentation and deep analysis of the target audience. No wonder: the stuff like note-apps, alarms, to-do lists, calculators, calendars and the like surround users in their everyday life, help in common situations and sometimes add color to the routine. We have checked that well and now would like to present you the first case telling the design story of the brand new alarm app for iOS called Toonie Alarm which today is featured on Product Hunt and has reached top-5 in the category Tech in 4 hours after featuring.

 

Toonie Alarm UI design

 

Task:

 

Full-cycle UI/UX design for the simple and engaging alarm app for iPhones.

 

Process:

 

The design process for this case was different from typical ones in the studio as before it we had worked more on outsource projects which means that creating initial product concept and setting the task was done mainly by the client’s side. The process for Toonie Alarm took the other direction and gave us what it was set for: the feeling of full product creation process from the very first steps. We had to set the idea and test it competitive potential, establish its USP and marketing plan, branding and usability foundation and all the other stuff like this.

 

Initially the idea behind the app was to create a simple alarm clock with attractive design and consistent element of motivation and support for such a basic and often far-from-pleasant process as waking up. The basic brand image was set as fun, cute, bright and cheerful, and marketing research supported this concept with the analysis of competition and ideas on adding original features to the app.

 

User research and analysis enabled the team to form the USP for the product on the basis of the following set of key features:

  • All the features of the app free for everyone
  • Simple, clear and intuitive navigation
  • Bright and pretty interface
  • Huge set of beautiful stickers
  • Achievements and rewards for waking up
  • Eye-pleasing interactive animation
  • Animated time picker
  • Instant sharing achievement with friends.

 

Let’s look over the details of UI created by Tubik designers.

 

Cute Mascot

 

In one of our previous articles we have already mentioned the great role of mascots in branding and UI design. As for Toonie Alarm, the idea of applying the mascot was set almost instantly as mascot is not only a sort of communicator between interface and user, but also a great representative of the brand able to enhance its recognizability. Moreover, it has a great impact on easy establishing the voice and tone of the product, creating the feeling of natural communication and supporting the mood. That was the point when Toonie was born to be a funny cheerful bird, whose mission is to make the world  brighter and help users to interact with the alarm. It informs users about news, rewards, errors and just adds some fun and color to everyday life.

 

Toonie Alarm mascot design

 

toonie alarm mascot design

 

App Tutorial

 

App tutorial is an important part of the interface which helps users to get informed on the basic interactions. In Toonie Alarm it consists of three screens that tell the user about the functionality of the app. Small concise copy blocks are supported by smooth and pleasant animation of transitions to create the feeling of integrity and cheerful mascot featured as the consistent element and the center of the screen graphic composition.

 

Toonie Alarm Tutorial design

 

Home Screen

 

The home screen shows the alarms which user already set for particular time and days and the tab with funny stickers already collected for waking up. Active alarms toggles feature the animated sun. Left swipe opens active options for the particular alarm.

 

Toonie Alarm UI design

 

Stickers Screen

 

Various stickers become the reward for waking up at the particular period. Moreover, waking up several times at this time, users can level up their stickers and enrich their collection. All the stickers can be shared to social networks to mark users’ achievements.

 

toonie alarm stickers

 

Toonie alarm stickers screen

 

Time Picker

 

Another prominent feature of the app is the animated time picker. The app has simple navigation and nice motion makes it even more intuitive. Picking time for the alarm, users can enjoy animated march of night and day.

 

Toonie Alarm time picker screen

 

Animated Stickers

 

Animated stickers make interaction even more lively and enjoyable and also enhance user experience making the interface attractive and playful.

 

toonie alarm stickers

 

Logo Style

 

Logo design keeps style of lettering associated with fun and entertainment and creating harmonic link to the fonts typical for cute cartoons.

 

Toonie Alarm logo

 

Product Video

 

To catch more details and see the interactions with the app in real, welcome to review the video guide on Toonie Alarm.

 

 

You can also review the presentation of Toonie Alarm design on Behance or check full pack of the details via Toonie Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Toonie Alarm via App Store

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

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

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

 

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

 

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

 

Tubik Studio

 

Define the problem

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

tubik studio work

 

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

 

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

 

Problem: I want to know the action is done.

 

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

 

switch animation tubik studio

Switch Control Animation

 

hamburger_menu tubik studio

Hamburger Menu Animation

 

hamburger button tubik studio

Hamburger button interaction

 

tubik studio button ui

Tab Bar interaction

 

add button animation

Add Button interaction

 

pageindicator tubik studio

Rubber Indicator

 

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

 

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

 

pull_to_refresh tubik studio

Pull To Refresh

 

preloader animation tubik studio

Preloader

 

pull to refresh animation tubik

Pull to refresh

 

pull-down animation tubik studio

Pull Down — Hourglass

 

tubik studio pull down

Pull Down — Space Ship

 

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

 

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

 

— they inform user about the level of progress

 

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

 

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

 

tubik studio motion design

GIF for the Timeline App

 

tubikstudio motion design

GIF of Dynamic Scroll

 

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

 

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

 

sport app motion ui tubik studio

GIF for Sport App

 

tubik studio motion design ui

Cards Animation

 

UI Design Interaction Tubik Studio

Boat Station App

 

tubikstudio blog app ui animation

Blog App

 

Problem: I want to see the key things first.

 

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

 

tubik studio tapbar ui

Tapbar Interactions

 

tubik studio behance weather app

GIF for the Weather App

 

App screens by Tubik Studio

Resto App 

 

Problem: I want to feel the interaction natural.

 

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

 

tubik studio_social_network

GIF For Social Network 

 

tubik_studio_book_swap

Book Swap App

 

Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu

 

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

 

Landing Page Animation Tubik Studio

Landing page animation

 

landing page animation Tubik studio

Landing page animation

 

landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver

 

tubikstudio ui animation website design

Bjorn Website

 

 

Problem: The screen/page is boring.

 

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

 

calendar-app animation tubik

Calendar App Animation

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

tubik studio application recipes and cooking

Recipes App

 

juicy player UI Tubik Studio

Juicy Player

 

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

 

Tubik quote UI animation

 

Recommended reading

 

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

 

Interface Animation. The Force of Motion.

 

Animated Interactions. Motion on Purpose.

 

UI Animation. Microinteraction for Macroresult.

 

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

 

How to Use Animation to Improve UX

 

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

 

Experience Design Essentials: Animated Microinteractions In Mobile Apps

 

The ultimate guide to Web animation


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

Tubik Studio iOS development

Case Study: SqueezeOutSwitch. Animation in Code.

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

 

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

 

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

 

button animation tubik

 

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

 

The animation in code representation is made of two parts.

 

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

 

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

 

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

 

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

 

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

 

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

 

The path for the buffler feature two UIBeziePaths.

 

UI animation code

 

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

 

The method of forming path for the particular extreme point

 

 

 

The method of animation on tap  

 

 

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

 

 

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


Welcome to see designs by Tubik Studio on Dribbble and Behance

ToonUP design by Tubik Studio

Tubik Products: Feel the Way of Outsource Clients.

Design is always the story of creative process for a particular purpose. However, the story itself can be written in a hundred of different ways and styles. It can be done individually or become the result of effective teamwork. It can be simple or complex. It can be narrow and specific or multipurpose. It can be outsourced or fully accomplished in-house. There are tons of shades for this story and all of them influence the final result that goes to users.

 

Here in Tubik Studio we have had the lucky opportunity to create a considerable number of design stories, all so different but all so definitely bright. It gave us the opportunity to feel all the benefits and pitfalls of design provided in terms of outsource partnership. To go further and get even closer to final users, to feel all the pains of our clients and all the variety of steps needed for creating an efficient product out of thin air, we have decided to make the next step and launch our own digital products. Extended design practice we have got through the years encouraged us to dive into all the path of product creation, testing, promotion and analysis to obtain that precious knowledge that will enable us to be even more helpful for our clients all over the world.

 

design studio TUBIK

 

No doubt, full-scope product design is not the way to start light-headedly. First of all, we had to analyze how design provided in outsorce differs from product design provided in-house. Let’s look over some insights together.

 

Outsource design

 

Being a team with a broad portfolio of outsource projects and having studied experience of our clients as well as plenty of successful product companies, we have marked out the following points needing consideration.

 

In outsource design process you are given a particular design task. That means you are able to concentrate on design tasks only as the strategic decisions are mostly made on the customer’s side. In practice, however, this disclaimer works a bit differently: creating design solutions solving users’ problems and bringing profit to the customers, designers can and often should influence the strategy of the product progress on the market. Anyway, all the final decisions and small or big changes of the product strategy are made by the customers team as they bear the final responsibilities and all the alterations or suggestions should be made in tight collaboration with the side launching the product.

 

In outsource design you work on the task you are assigned for, you are not a chooser of the strategy and not a decision-maker if this product is needed and if the idea behind it is good or bad. You have to study how to like and love any idea you have to work with because it is the only way to create good result and by the way to earn money. That is not in your scope of work to get into deep layers and tell the client that this idea will not work — your task is to make it work. That is what you are paid for.

 

In outsource design you need to have good skills of getting dip into the business goals and correspondent wishes of your client. In fact, if you are lucky you get a clear task supported with outlined target audience of the final product, perhaps marketing plan and ideas on client’s stylistic preferences. In other cases, you will get just a general line containing highly blurred task like «I want you to design a social network for drivers» and that is the part of the job to get all the details of how the clients sees it. It can be done by designers, sales and project managers, but whoever the doer of this vital job is, it is the only way to make the process of collaboration on the stage of design smooth and resultative.

 

—  In outsource design you aren’t always provided with the opportunity to communicate with stakeholders and influence their decisions. You are hired to accomplish a particular scope of works. It has to be mentioned that for many designers it is a benefit as they start work with a particular task in mind and do not need to get involved deeply at predesign or post-design stages. However, there also can be projects at which after launch of the product designers are later given additional tasks on maintenance and alterations of the existing product.

 

Design Studio Tubik

 

Product design

 

— In product design accomplished in-house all the scope of stages from ideization up to sophisticated testing and maintenance is done by one team. This means that designers get more chances of being involved into all the phases of strategical decision-making upon the product which is even more creative and analytical job but at the same time requiring more diverse skills and much higher responsibility.

 

— Full-scope in-house product design goes much further than actual design tasks. It includes all the creative cycle, with complex of tactic and strategic plans, ideas on commercialization and promotion, budgeting and content marketing, product philosophy and full-scope branding and so on and so forth. It means that the team will need diverse specialists that will establish solid foundation of specific skills strengthening design and bringing effective product into life.

 

— In product design the creators are the stakeholders. This certainly means deeper involvement of all the participants into creative process and at the same time more responsibilities.

 

Product design is the domain of higher financial and creative risks. In outsource design, especially when the process is already tuned and clear, the earnings can be more predictable and flexible in budget planning of the company.

 

— Product design suggests deep concentration on one project and one aim for a long time while outsource projects can be different and support the feeling of refreshment. Should be said,  none of the ways is better or worse, they are just different and sometimes what is one designers’ meat is other designer’s poison according to the individual peculiarities of nature and creative approach.

 

To sum up, in outsource design you are a vital part of the product creation and support while in product design you are actually in the heart of all the processes being not a part but the whole story. In outsource design you are a sort of hired executive while in product design you are a stakeholder with all the responsibilities of this not-so-easy job.

 

Broadening the horizons: Tubik upcoming products

 

Considering all those issues, we have decided to know it first hand: the work was organized in several direction so that our team could obtain as broad experience of full product cycle as possible and it could bring us even closer  to the pains, problems and pitfalls which our clients tackle on their way. We have set the purpose to create products helpful for their target audience and adding some social value as well as giving us comprehensive experience of full path of goal-centered design.

 

So, the directions in which we are working over the digital products are:

— content

— entertainment

— business

— education.

 

The first two of the mentioned points are actually represented with the products by Tubik team we are happy to announce. «Content» direction is presented with recently launched website Design4Users and «Entertainment» direction is presented with an application ToonUp which is really close to its release.

 

Design4Users

 

Design4Users Tubik Studio

 

Design4Users is a blog devoted to diverse design issues solving users’ problems. It is organized via the basic categories such as «Branding» «Product» «Print» and «UI/UX» and plenty of more detailed tags in the mentioned domains. This resource was started with the aim to provide designers, customers and all those who are interested in this sphere of human activity with a wide variety of useful and interesting content supported with attractive and functional design. The blog is designed, developed and curated fully by Tubik studio team.

 

Tubik Studio design team

 

ToonUp

 

ToonUp is a brand new alarm application for iPhones designed and developed by Tubik team. At the moment it is being prepared to release and its live version is coming up very soon. In this case, we have set the purpose to combine functionality with entertainment and support the product of everyday use with stylish graphics, which have been recognized our house specialty by great deal of clients, and gamification elements. If you would like to get updates about its release and sweet bonuses from our team, welcome to sign up here or keep up with the news on its Facebook page.

 

toonup application tubik studio

 

In our next articles and case studies we will tell you more about the creative process for these products and unveil some considerations on product design features, issues and requirements. Follow the news!


Welcome to see designs by Tubik Studio on Dribbble and Behance

Welcome to Design4Users

tubikstudio animation ui

Food for Thought. 10 Tasty UI Concepts for Eating and Cooking.

Many decades ago famous writer George Bernard Shaw, known for his sharp tongue and sparkling sence of humor, said: “There is no love sincerer than the love of food.” With the course of time nothing actually has changed: food is still among the most important, discussed and loved aspects of everyday life. The sphere of design features it in diverse faces and directions combining traditional visualization with new techniques and approaches.

 

UI design is no exception. The basic idea behind UI/UX design is to create interfaces solving problems and satisfying users’ wishes. As eating is one of basic human needs, no wonder we can find numerous applications and websites devoted to this theme. We also take active part bringing new ideas and polishing existing solutions in design projects and concepts for websites and mobile apps. As well as with real meals presentation, visual design for digital products of this sort is a real food for thought.

 

Like with nicely performed meal, well-done attractive UI is able to increase the level of users’ expectations and catch their attention and senses immediately. However, even the most creative delivery of a meal is not able to save the situation if the food itself is low-quality and vapid. The same happens with UI. If designer doesn’t think much about the product itself, its logic, convenience, effective layout, being focused only on beautiful presentation, the risk of creating dead product is incredibly high.

 

In our previous article devoted to role of icons in UI we mentioned: the best chefs always say that everything put on the plate should be edible. According to the latest trends, we support the same idea when it comes to icons as well as the other elements of layout: everything that is put on the screen should be functional. Therefore, any icon used in the interface should have its meaning and function. Without it, an icon is just a kind of empty stub, making the layout of the screen or web page dirty with the unnecessary elements. This philosophy works well with other interface elements like copy, illustrations, photos, animation, color combinations, typography choices etc.

 

Here we have collected 10 different UI design concepts accomplished by studio designers. They represent different aspects reflecting topic of food: some of them are devoted to cooking theme, some present the direction of eating out, the others are connected to selling food. The nature of functionality platforms are also different: the concepts feature interfaces of  mobile applications, websites and landing pages. If you are interested to see more details, just follow the links. Let’s review them all. Bon appetit!

 

Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu by Sergey Valiukh

 

The first of presented concepts is a mobile application for restaurant visitors. It features animated interaction with the screen presenting basic view of restaurant menu.  The names of categories are presented via effective combination of highly readable copy and clear meaningful icons for quick visual perception. Simple design with animated accents which immitate interaction with physical objects is a good way to bring positive user experience.

 

App screens by Tubik Studio

GIF for the Resto App  by Sergey Valiukh

 

Another piece of interaction for the same app shows one more block of its functionality. It’s a simple restaurant app for checking in and receiving feedback from clients and visitors of different restaurants. The main idea was to provide a simple and easy-to-use interface based on animation and color accents. Restaurant profile shows how many visitors were there and how many of them liked it. The whole app enables to vote for several different features of each restaurant such as «cuisine», «drinks», «comfort», «service» etc. Visual support with high-quality photo content featuring food and drinks enhances stylish looks and feeling the theme.

 

recipe website design Tubik Studio

Cooking Website by Ludmila Shevchenko

 

Here is the concept of a cooking website where users can find interesting recipes, add their ones and read useful articles devoted to food topic. The piece of interface is iPad version of layout. The designer chooses light background adding air to the screens and providing environment for efficient readability for different blocks of copy. Color markers are used to define the categories of content.

 

ipad interactions animation

iPad App Interactions by Sergey Valiukh

 

This one is an iPad application for booking tables in restaurants. To show its functionality and strengthen it with gorgeous food images, the designer chose an experimental bar profile page. It’s a venue where users can order fruit and seafood, and the profile page which contains everything to go with booking a table, sharing and saving this venue. Animation shows the interactions of user flow showing what happens once the «Book» button is tapped.

 

tubik_studio_website_ui_bakery

Vinny’s Bakery by Ernest Asanov

 

This one a the design concept of a website for a small bakery selling homemade bread. Here you can see the home page presenting the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. He followed the philosophy of minimalism which is user-friendly, attractive and informative. On the basis of the design solutions it is easy to assume that this is the service positioning itself as a producer of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is the style provided by the webpage: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action.

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

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

 

tubikstudio ui design

Tubik Studio | BuonApp by Ernest Asanov

 

Here is the interface of a social network for those who like cooking and want to communicate and get updated about this topic in fast and easy way. The app enables using all the scope of social functions: sharing recipes, making discussions, chatting, following, uploading images, collecting favorites and so on. Nice and smooth animations supports general stylistic concept and shows interactions within app functionality. As we usually do here in Tubik Studio, the designer followed the idea of keeping the balance of usability and attractive looks of the interface.

 

ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko

 

No doubt, good food is the great way to feel the world more positive and that is the key message behind the presented animated interface design. This is the concept of a mobile application for a chain of cafes providing the functionality for saving coupons and discounts and then using them buying tasty stuff. Interface animation is added to make the screen and interactions more lively and engaging and enable easy microinteractions. Icons and illustrations look bright and add positive vibes, even small layout elements like the icon for notifications are reflecting the basic theme and support consistency of general stylistic concept.

 

tubik studio healthy food animation

Healthy Food App by Ernest Asanov

 

Here you can see the screens of the mobile app organized around the idea of healthy lifestyle and providing recipes and tips on healthy food. Engaging graphic elements and correspondent color solutions are used to set the theme as well as enable fast visual perception of information which is supported with unobtrusive motion design accents. Animation is also used to show various interactions with a product. Together all those features support user-friendly, attractive and informative interface design.

 

tubik studio application recipes and cooking

GIF Animation for Recipes and Cooking by Sergey Valiukh

 

This is a design concept for the recipe application. With it, users can add recipes to their collections or find the ones online, categorize and organize their recipe books and categories, form menus and shopping plans. So, here you can see some interactions livened with motion design. They feature the process when the user is choosing the item from the list of categories and then from the list of particular recipes in one category. The implementation of the concept will be soon available free at GitHub.

 

So, practice shows the diversity of techniques and methods to make an app or website tasty and attractive. Nevertheless, to retain users, trendy and pleasantly-looking design should just cover effective functionality and user-friendly solutions. Otherwise, beautiful design will work like a cover without a sweet inside and that is the fastest way to lose the users. Put usability and functionality first, think over the logic, transitions and intuitive navigation — and visual design will become a great icing on the cake!

 

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


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