Tag Archives: development

toonie alarm stickers ios tubik

IOS Tutorial: How to Add Your App Content to iMessenger.

Messengers have definitely become an integral part of everyday life for thousands of people: they are easy-to-use, quick and simple, and so helpful in exchanging information on the go and from anywhere you are. Moreover, with the rocketing progress of smartphone technologies, messengers are adding more and more functionality: right from the messenger you can send images and sometimes even files or documents, you can create group conversations, change the visual layout of the interface, classify your contacts etc. Recent years have also shown the instant wish people demonstrate in involving diverse graphics like emoji, stickers, animations, doodles and the like to make the chats brighter and to set the definite mood of communication.

 

One of the features, presented with iOS 10, became a great respond to this trend: Apple opened iMessenger to the third-party developers via the feature called iMessenger Apps. having created the apps for iOS, developers are now able to synchronize their content with iMessenger, be it a sticker, an audio file or even some interactive stuff. If the path has been overcome correctly, the content can be integrated right into the messenger.

 

Recently we have tested this feature in practice, having opened the sticker pack from Toonie Alarm directly to iMessenger, so today we offer our readers a brief tutorial on how to do it. Those, who will find this tutorial interesting and applicable in practice, presumably have the practice of work with Xcode and feel confident in coding UIKit-based iOS application.

 

toonie-sticker-screen

 

So, first of all, let’s mention once again that today we are working on the case when you have and iOS app, which is launched and operating, and its content (like images, photos, emoji, stickers, audio etc) can be potentially applicable to the process of communication via iMessage.

 

As we have dealt with stickers as a sort of shared content, a couple of words should be mentioned about the recommended format for the messages. For sticker packs, the file sizes recommended by Apple are:

  • Small: 100 x 100 pt @3x scale (300 x 300 pixel image)
  • Medium: 136 x 136 pt @3x scale (378 x 378 pixel image)
  • Large: 206 x 206 pt @3x scale (618 x 618 pixel image)

 

There are also the following limitations to the images used in the sticker packs:

  • Images can be no larger than 500 KB in file size.
  • Images can be no smaller than 100 x 100 pt (300 x 300 pixels).
  • Images can be no larger than 206 x 206 pt (618 x 618 pixels).
  • Image files must be PNG, APNG, JPEG, or GIF format; PNG for static stickers and APNG for animated ones are recommended because they handle scaling and transparent backgrounds much better than JPEG and GIF respectively.

 

If everything mentioned above is your case, then you have to start submitting the app content to iMessenger in the following way.

Add iMessage extension to your app

In project targets press «+» and select iMessage extension, as the screenshot shows:

 

imessage app ios extension

 

We will have an automatically generated MSMessagesAppViewController inheritor called MessagesViewController. It acts as the general view controller but is used to manage your Messages extensions.

 

When this controller loads, we should load stickers and present them in MSStickerBrowserViewController. The browser provides drag-and-drop functionality: the user can press and hold a sticker to peel it from the browser, then drag the sticker to any balloon in the transcript. The user can also tap stickers to add them to the Messages app’s input field.

 

The browser presents the stickers provided by its MSStickerBrowserViewController property. The data source can dynamically change the list of stickers at runtime. You can also customize the size of the stickers inside the browser.

 

[[MSStickerBrowserViewController alloc] initWithStickerSize: MSStickerSizeSmall];

 

sticker sizes apple ios

 

 

In the method createStickerBrowser, we create MSStickerBrowserViewController with small stickers and present it on our main view controller (MessagesViewController) as the child view controller. Data source for this browser is MessagesViewController

 

In the method loadStickers we load data(Stickers objects) from Core data and map it to MSSticker objects. To create MSSticker, you should describe the file URL with an appropriate image (LINK!), localized description limited to 150 characters, which will be used as an accessibility description of the sticker. Also, you can track errors which occur in SKSticker initialization via last output parameter — error.

 

As a browser data source,  MessagesViewController should implement MSStickerBrowserViewDataSource protocol which consists of two important methods. The first (numberOfStickerBrowserView) says how much stickers we should present and the second (stickerAtIndex) should return SKSticker for each index.

 

How to share data from the particular app with the extension?

 

In the case of Toonie Alarm, we had data in Core data database.

 

In the case of the same app group, create the app group in the Apple developer portal. If you need the detailed instruction on it, check it here.

 

Add it to your app ID and use for application target and extension. (select in target -> capabilities -> app groups).

 

After this, you will have the shared container for the app and the extension. And SQLite database will have this path:

 

NSURL*storeURL = [[NSFileManagerdefaultManager>] containerURLForSecurityApplicationGroupIdentifier:@»your group id»];

  storeURL = [storeURL URLByAppendingPathComponent:@»Alarms.sqlite»];

 

If you use some UserDefaults, you will need the following code:

NSUserDefaults *mySharedDefaults = [[NSUserDefaults alloc] initWithSuiteName: @»your group id»];

 

In case you want to use some classes from the app in your extension, just select your target in File inspector.

 

toonie alarm stickers ios tubik

 

If you had an old app on App Store and now want to add iMessages extension and share some data from Core data store, you will need to move existing database to the shared container instead of creating the new one.

 

Due to these operations, Toonie Alarm users now can use all the stickers they win in the app for their chats in iMessenger, totally for free. For apps of this kind, which have original and bright graphic alarms, simplification in the process of adding content to the native messenger is definitely a user-friendly policy which both the developers and designers here set as their primary aim.

 

toonie alarm UI design

 

Recommended reading

 

If you want to get more insights into the theme, here is the list of recommended materials to review:

iOS Human Interface Guidelines: Messaging

Create an iMessage App in iOS 10

iOS Shared CoreData Storage for App Groups

App Extension Programming Guide

 


Welcome to set up Toonie Alarm via App Store

Welcome to read the case study about coding UI animation for Toonie Alarm

tubik studio wireframing UI UX

UX Wireframing: Bedrock of Interface Usability.

In 4th BC Plato said: “The beginning is the most important part of the work”. Almost 24 centuries since then his words are still up-to-date in our realias. Buildings require a stable foundation to stand and give shelter for long as well as any project needs to be well-planned from the very beginning to avoid problems at the further stages. Wireframing is the early step of UI/UX design process when the structure of the project is being formed. The usability and efficiency of final product often depend on how well the wireframe is created at the very first steps of the design process. However, today designers still haven’t agreed upon the common opinion about wireframing: some of them consider it to be a key part of the design process while the others regard wireframing as the waste of time. But where does the truth lie?

 

We’ve already touched upon the topic of wireframing in our article about creating mobile applications, and since the topic remains actual and debatable, this time we want to devote the full article to the roots, nature, benefits and diverse issues of wireframing process as well as the reasons why it’s advisable for designers to apply it.

 

tubikstudio ui ux design

 

What’s a wireframe?

 

Wireframe is a simplified and schematic visual representation of a layout for website pages or screens of an application interface. Wireframes are similar to architectural blueprints: they are usually black and white illustrations, sometimes with bright marks or spots to outline specific areas or points, that give a clear vision of the project structure and connections between different parts.

 

Wireframing is effective at the beginning of design process when the main objective is to create product’s structure. Designers use wireframes to outline visual and typographic hierarchy on user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general interface clearly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes, with boxes and lines representing copy, pictures and all the interactive elements on the page.

 

Tubik Studio designer UX screens

 

Earlier we presented the typical creative flow for digital product we have here in Tubik by example of creating mobile apps and mentioned the set of stages in this process:

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

 

According to this list, it’s easy to see that UX wireframing is not the first stage of digital product creation, but it’s usually the initial phase of actual design, when the future website or application gets its first visual presentation, the sketch of its face and figure. The chances are high that the actual participants in creating digital products would agree with the idea offered by UXPin team in their book on wireframing: «Whether you’re building the next hot startup or a solid website or mobile application, wireframes are invaluable in keeping everyone on the same page – not just product managers, designers, and engineers. And they can be changed really quickly to accommodate the collaborative and iterative nature of product design and development, especially in agile startups and enterprises.»

 

Why do you need wireframing?

 

Wireframing is a fast and cheap way to plan the structure of the page or screen design. What’s more, it gives numerous advantageous opportunities not only for designers but for the whole development team and for clients too. First of all, a wireframe is the first visual representation of a designer’s abstract idea. This step ensures that the developers and the clients get a clear understanding of the project’s design. Furthermore, in case the client wants to make some changes, a wireframe is much easier to reshape since it doesn’t take much efforts and time to create one.

 

The other benefit a team gets from the wireframes is that developers can clearly see the placement of the elements on the page. Some software for creating wireframes allows seeing all the sizes and spacing by clicking a single button that saves time for both designer and development team. In addition, wireframing is quite inspiring for designers. It is flexible and provides much room for experiments which make the creative process more productive and presents the field for fresh outstanding solutions.

 

tubikstudio teamwork

 

In one of our previous articles we provided a bit of metaphor on the basic reasons why wireframing is always included in creative process here in Tubik. 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: vice versa, it will save your time and effort you would otherwise have to spend on redesign and attempts to find out why your product doesn’t work properly.

 

All in all, wireframing is an effective tool that can save time and money for both the team and the client. It helps organize development and design processes and reduce chances of problems on the future steps.

 

Types of wireframes

 

There is an opinion that a wireframe is exceptionally a low-fidelity paper sketch of the page structure with boxes and lines illustrating visual elements. Nevertheless, today modern technologies help designers create wireframes of different fidelity level within a short time and without great effort. Typically we can define 3 widely-used types of wireframes.

 

Low-fidelity wireframes. They are black and white illustrations focused on a “big picture” of the page. UI elements are shown as boxes and lines without detailed annotations. The wireframes of this kind are quite abstract, but they give a chance to see the basic structure of the user interface.

 

Tubik Studio UI sketches

 

Medium-fidelity wireframes. This type is created in a monochrome palette, often gray-scale which makes it similar to the previous one. The wireframes can be created both manually or via digital tools so that the UI components are more detailed and realistic. Copy elements such as headlines and headers are distinguished that assists to establish typographic hierarchy. Placeholders are filled with images and the comments describing their destination.

 

SwiftyBeaver UX by Tubik Studio

The UX wireframes for SwiftyBeaver project

 

High-fidelity wireframes. These wireframes are created via digital tools. The core difference from the other types is that high-fidelity wireframes are built in color and present the screens in the view close to the final visual performance. The fonts are styled and visual elements are created with textures and shadows. The designer pays more attention to the sizes and alignment of UI components. It’s actually the static version of the app or website presented page-by-page or screen-by-screen. So, in distinction from the previous stage, they are called UI wireframes.

 

UI design by Tubik Studio

UI Wireframes for Passfold App

 

Wireframing vs Prototyping

 

High-fidelity wireframes tend to be often confused with prototypes because they are created in colors and look realistic, similar to a fully accomplished project. Nevertheless, these concepts present different stages of design process, have different aims and focuses. As we’ve already mentioned, wireframes are focused mostly on the structure of the page. On the other hand, prototypes are created to give the more detailed look at the UI elements, their style and alignment: the biggest difference is that prototypes give the opportunity to test the interactions between the user and the interface similar to the final product. As we mentioned in UI/UX Glossary, 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. However, prototypes should not be seen as the analog 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.

 

Interactions need to be thought out well and similar to the final result and checked thoroughly before the development team starts their work. Making alterations, adding elements and changing transitions is much more time-consuming and expensive at the stage of development, that’s why it’s important to check the usability of the UI elements in advance. Prototyping is much more efficient and useful as the step between UX design and UI design. So, here in Tubik we support the workflow having the sequence «UX – prototype – UI».

 

The prototypes on UI stage can be created for the 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 can 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. Anyway, the solution of applying prototyping at different stages of UI process should be approached individually according to the requirements and goals of every particular case.

 

Prototypes are created on the basis of the static wireframes, making them clickable and interactive, so the designer can try out if the interface is clear and usable for a real user. This kind of testing is a key step in the design process because it allows identifying possible problems and difficulties with user interactions. There are various prototyping tools providing functionality on checking usability of the design solutions, and research platforms which make the process even easier.

 

invision prototyping tool tubikstudio review

 

Efficient wireframing tools

 

Today, designers are not limited in choosing tools for wireframing: there are plenty them, free and paid, to set up the productive design flow. The number of tools is growing so fast that it’s easy to get lost among them.

 

Wireframing is an integral part of the design process here at Tubik, so our designers need a flexible and effective tool for creating wireframes which can be effective both for individual and complex team tasks. The long path of probes has led us to Sketch.

 

Sketch is a professional design software that allows creating the variety of art and design projects. The program is vector-based and gives the opportunity to work with layers and shapes which can be easily manipulated via the tools panel. Sketch is an effective tool for UI/UX designers because it can be applied at different stages of the design workflow starting from wireframing. The features which we see as advantages are quite convincing.

 

It’s vector-based. This means designers can use vector shapes and scale them without losing quality. Moreover, the artboard is still pixel aware which is a core thing for creating quality web and app design.

 

Effective guidelines. You can see dimensions of the components and spacing between them only by holding the alt key. This is helpful not only for designers but also for developers. When designer shares the wireframes with the development team, they can define the placement and details of UI components and layout without designer’s explanations.

 

Grids. Unlike many other tools, Sketch provides in-build grid feature that saves designers’ time since they don’t need to create it beforehand.

 

Native font rendering. It often happens that fonts in a browser look absolutely different compared to the PSD and it ruins the whole picture. Nevertheless, Sketch uses native font rendering that makes fonts feel more natural and accurate in browsers.

 

It’s fast. Sketch is a tool oriented on web and app design, so the functionality is more concise compared to other software in the field. This makes it lighter, so it works much faster not overloading the computer which saves time (and nerve!) for designers.

 

tubik studio design process ux

 

Yet, there is one specific feature about Sketch: it works only on Mac and there are no exceptions. Nevertheless, if you don’t have one, you shouldn’t give up. There is still a classic option — Adobe Photoshop. Yes, it may work a bit slower but it is an efficient tool for creating wireframes, and many designers are sincerely linked to it as a multipurpose tool. Moreover, you should remember that not all the customers are ready to accept the assets in Sketch, so Photoshop will save the game in this case. It proved itself as the efficient tool. Among newer options, the star of Adobe Experience Design (XD) is also rising and winning its positions on the market and in design flows.

 

And, for the last point here, if you are keen to creating interactive high-fidelity wireframes, you’ll need additional tools to make them clickable prototypes. For this stage, we could single out InVision and UXPin: these tools help to add the interactivity to wireframes creating efficient samples for gathering feedbacks from the team and clients.

 

Tips on how to make your wireframing efficient

 

There are no big secrets about creating a quality wireframe still some tips on how to make it more productive can be mentioned for the bottom line:

 

Do thorough research beforehand. Do not start wireframing process before you outline the goals, USP, target audience and the problems which should be solved with the product.

 

Keep them simple. The aim of a wireframe is to create a structure of the page design, details go after.

 

Use a monochromatic palette for UX wireframes. Our experience proves that design process is more productive if the designer leaves detalization for the next step.

 

Write annotation. If the designer plans to present a wireframe to the team, it would be good to include annotations. They help to catch and understand the ideas quicker and deeper.

 

Gather feedback. Try to ask opinions of your team members and perhaps even potential users, if possible, at this stage. It is an effective way to improve your work and save your time for later stages needing more sophisticated design.

 

Use a grid. It helps to place all the components in the efficient way for users’ perception.

 

tubik studio wireframing UI UX

 

Recommended reading

 

Here is the collection of recommended materials for further reading in case you would like to read more on the theme.

The Guide to Wireframing (E-book)

The Wireframe Perfectionist’s Guide

Using Wireframes to Streamline Your Development Process

What is a Wireframe: Designing Your UX Backbone

Jargonbuster: mockups, wireframes, prototypes

What’s the difference between wireframes and prototypes?

10 tips to improve your wireframes in the web design process

9 Free to Use Wireframing Tools


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

Welcome to read the articles about UI Navigation Elements

ios development interview

From QA to iOS Development: Life Story of the Career Switch.

Switching the career path and changing long-term ambitions is never an easy choice. Still, in many cases this step is feasible, living up the new hopes and professional growth. In the sphere of web/app design and development this sort of situation is, perhaps, even more common than in the others due to dynamic and rocketing progress of information and communication technology in the world. New professions and positions pop up like mushrooms after the rain, opening totally new perspectives and allowing professionals to set new ambitions.

 

Our today’s story is of this kind: Tubik iOS developer Maxim Pedko will share his experience of the career switch from QA engineering and project management to iOS development. Check out the interview and get inspired!

 

iOS developer tubik studio

 

How did you make the decision on your career choice?

 

Actually, I had quite extensive and various experience: before the first step in development, I worked as a QA engineer and project manager. Still, my big dream getting stronger and stronger was to create real products by myself. One day, working over current tasks, I realized that I have to change my life and try something new that will get me closer to my ambition. I had studied the basics of PHP, web development, CMS and it even let me earn something for a living, but didn’t give me real pleasure from my work. I developed simple plugins for CMS WordPress, but I didn’t feel it like the full-scale development as the plugins were focused mainly on correction of existing design according to client’s requirement, not more. That job wasn’t bad, it was just not the one for me as I didn’t get either aesthetic or professional inspiration.

 

Why did you choose Apple as the field for your career growth?

 

I deeply and sincerely fell for iPhones and other products by Apple after their first presentation. That distant day when Steve Jobs presented a new revolutionary buttonless mobile phone with beautiful photorealistic interface, called iPhone, they won me over with their design and usability. Since then, I have been a keen fan of Apple, although unfortunately I didn’t have a chance to get their devices for myself. Certainly, a lot of things have changed since the presentations of the first iPhone, iOS, iPad, yet I am still the supporter of this company products and philosophy.

 

Swift vs Objective-C. Why did you choose Swift?

 

Before I started programming for iOS devices, I had analyzed the well-known and established Objective-C and newer Swift. For me, the issues to consider were the following:

  • Swift is easier readable than Objective-C
  • Swift is easier maintained and supported
  • Swift requires less amount of code
  • Interactive coding is available at Swift Sandbox
  • Swift is the platform for the future, as Apple have outlined their intent of the full switch to this programming language.

 

ios development interview

 

Where does the way of iOS developer start?

 

To start developing iOS applications, first of all you need high motivation and wish to grow professionally. Without the great desire to self-develop and study the field in detail, it’s better not to start, moving yourself to the further search of the domain you are interested in. Starting the career in iOS development, you should be ready to some aspects that won’t let you do it from the very first day. For instance, you won’t be able to code iOS apps without a computer from Apple! You will need Xcode which works only on MacOS.

 

I have tried the software that is argued to enable developers to code for iOS on other operational systems: it took me ages to install it via virtual machines and tune the soft into more or less working condition, still it didn’t work efficiently and heavily overloaded the computer. There were even the moments when I got so frustrated that wanted to throw away my computer through the window and forget it as a nightmare. So, I had to accept the rules of the game that there’s no other way than coding for iOS on MacOS.

 

Another essential thing to mention is that to develop iOS apps you really need only Apple computer still it’s not required to buy all the existing devices like iPhones, iPads, Apple Watches etc. Xcode has simulators of all the devices with which the application will be potentially used so having developed the application for one of them, you can instantly test it on the simulator of the device.

 

ios development glossary

 

Anyway, if you have bought an Apple computer, set up Xcode and are ready to code iOS apps, you will need the reliable source of information, knowledge and practice in studying Swift. There are numerous materials on this topic shared via YouTube, such as video lessons and vlogs; also you will definitely find the text-based sources like blogs and forums for developers, but the most reliable, actual and truthful source of data for you is the official website for Apple developers.  Another useful resource is Swift website  presenting lots of tutorials and practice for studying Swift coding and I would also recommend the interactive course Developing iOS 9 Apps with Swift. No doubt, to keep up-to-date, iOS developer should never miss conferences and presentations  from Apple.

 

What are the other domains of knowledge needed in this sphere?

 

I have to admit that basic knowledge plays the vital role for professional growth in this field. Before you start to learn programming not being a native English speaker, you have to understand that without knowing English solidly you’ll get the experience when the best and the most reliable sources on not only iOS, but also programming in general are shut for you. That’s the reason to constantly improve and practice the language even if you think you know it well.

 

If you don’t own Apple computer working on MacOs, it’s not the reason to get in despair. You have to plan your steps and study everything that you will potentially need in the future. Before starting iOS development, I had studied operations in client-server applications, REST API, basics of OOP, databases, base operators, types of data, — everything that can be studied before starting real practice in coding on Swift.

 

Could you share your real experience that allows considering the possible risks?

 

As I’ve mentioned, to get real experience you will obviously need an Apple computer. If you don’t have it, try asking your friends or finding hubs where you’ll be able to try actual programming on Mac. It’s vital to understand if you really want to continue your professional way in the sphere as, you see, the start needs some basic capital, at least in the form of quite expensive hardware.

 

When you start getting real experience in development, don’t be afraid to start coding for real simple projects and get precious practice of both development and communication with customers. That’s important to make your name in this highly competitive sphere and open new perspectives for complex and interesting projects in the future.

 

If by any reason you are afraid of freelance platforms or frightened to be cheated, working over your own projects you should carefully plan the tasks and set the deadlines. There are many good sources where you can buy lessons or get them free, and there you are provided with the practical tasks which you are obliged to complete. You have to be persistent, try and study, be always open to new knowledge in development, — this is the only productive way to the day when you start creating efficiently working code.

 

As for me, to get the knowledge and practice of iOS development without having my own Apple computer, I did my best to get enrolled to Tubik Studio as an intern. To get more practice and have more hours of effective studying, I took the risky step having left my previous workplace and devoting the maximum of time to progress in what I saw my future. After two month the risk paid off: I got an offer of the full-time developer’s position in iOS department. Moreover, I’ve got the precious experience of working in team of professionals that opens the door to more complex, sophisticated and significant projects, shut for freelancers working solo.

 

tubik studio developers testing

 

And my message to those who start this way is the following: it’s not enough to buy the original computer, it’s not enough to narrowly focus on one aspect of the job without studying the others. It’s vital to realize that whatever is the sphere of development you see yourself in, you should get filled with new knowledge on a daily basis, and only persistence, hard work and self-education will bring you to being a productive and highly-skilled developer.


Welcome to read more articles on iOS and web development

mobile application QA testing tubik studio

Precious Errors: Testing iOS Mobile Applications.

No doubt, mobile devices present an integral part of human life these days. Development of mobile applications demonstrates rocketing progress: they become a reliable helping hand for a person in the variety of life aspects, such as communication, business, entertainment and the like.

 

The simplicity of installing and usage is making mobile apps more and more popular and sets them apart from web applications. Still, it has to be noted that the former cannot fully replace the latter due to numerous reasons. Having discussed the issue with Tubik QA engineer Olga Krasnokutskaya, today we would like to review some benefits and features of testing iOS mobile apps.

 

testing

 

Types and features of testing mobile apps

 

No doubt, every case of creating a mobile application is a sort of unique story. It needs its own deep research and specific approach to design solutions and their realization in code. Still, there are some general schemes and methods that are applicable to most cases. Olga says that working on iOS apps she takes Mobile Testing Cheat Sheet as a basis and adapts it for every specific case. As we mentioned in the full guide to creating a mobile app, testing is one of the crucial phases: it helps to reveal bugs before the app is brought out to real users. Testing enables to understand the quality of the app and find the way to improve it via real interactions.

 

The main difference of a mobile application in comparison to a web app is the requirement of its installing on device which has a particular platform, OS version, screen size, and variety of functions the device is able to fulfill, such as making and receiving calls, texting, taking calls and doing loads of other operations simultaneously. Let’s review the types of testing deeper in detail.

 

Installation testing

This type of testing can be carried out both in simulators and real devices. However, here in Tubik testing on a variety of real devices is recommended as a more efficient method, because simulators do not reflect all the functionality of real devices and variety of possible users’ actions. For example, simulator in Xcode can give incorrect presentation of interface elements on the screen and doesn’t allow testing an accelerometer and a camera.

 

Updates testing

Testing doesn’t end when an app is launched and used by real users: it’s a never-ending journey. Another important type is testing updated versions of the app saving all the data.

 

For installation of the mobile app on the device, we use several services of app distribution such as HockeyApp, Fabric, TestFlight. Each of them has both benefits and drawbacks. For instance, Hockeyapp allows installation of different app versions, while Fabric provides installation of earlier versions of the app and then updating them with later versions saving the data. TestFlight is needed to release the app on AppStore and is convenient for testing new features as it uses production certificate which speeds up check of the new build and its release on AppStore.

 

mobile application testing

 

Compatibility testing

This type of testing enables to check if the unit of testing is correctly integrated on devices with different operation systems and on the screens of various resolutions. It’s also important to mention that, according to the latest requirements to app distribution via AppStore, any mobile app created for iPhones has to perform correctly on iPad.

 

Stress testing

One of the big advantages of the mobile application is the ability to use them “on the go”. However, this aspect determines a constant change of the Internet source and signal — GPRS/3G/4G/WiFi; users can interact with the application in conditions of good or bad connection, repetitive disconnection, Plane mode. Incoming calls and messages, device locking, limited memory available, battery charge level or accidental taps – all those things can have a great influence on the app performance. Creative approaches to testing of this kind in maximum diversity of cases is highly recommended.

 

Functionality testing

This type checks the feasibility of functional requirements. Testing the functions of the app, it’s advisable for QA specialist to create test-cases or detailed check-lists. The documentation of this sort can be helpful for the team in defining possible “weak spots” even at the early stage when project requirements are analyzed.

 

Gesture testing

Gestures present the core distinctive feature of mobile apps in comparison with web apps. Naturally, this difference of interactions advances specific demands to designers, developers and QA engineers working over the product. Gesture testing checks the operability for the variety of gestures such as touch, swipe, tap, multi-touch, 3D-touch, turn, shake etc.

 

Multitasking testing

This sort of testing is aimed at correct app performance under conditions of several active apps on the background or when the tested app is minimized. Considering the specific nature and features of the device, the application should perform adequately in case of an incoming call or screen lock, without crashing or losing data.

 

Localization testing

Another aspect to be checked is localization, in particular the format of dates and time, translation, UI adaptation etc. What makes a real difference in comparison with testing this aspect for web applications is the screen size of a mobile device. On the one hand, the content in different languages should occupy the same place on the screen to save the style and visual consistency; on the other hand, it has to be adapted considering specific features of a particular country. For example, the content for the Arab countries has to be reflected in an inverted manner and requires other sizes of buttons due to specific nature of their writing.

 

Usability testing

Mobile applications for iOS have to comply with iOS Human Interface Guidelines to get to the AppStore. Basically, it has to be convenient for the user to read and use the app using one hand which means that the content and fonts have to adapt to the screen size. It’s also important to check that users understand the warnings and notifications about errors.

 

Testing mobile applications is mostly handled in environments and conditions which are maximum close to real life when there are several background active apps and actively used devices with a variety of settings, apps and cash data. It’s also highly advisable to remember — or it’s even better to create a detailed check-list – about the system settings of the device used for this aim, to avoid some unwanted cases, like, for example, activation of saving mode right in the process of the test.

 

The time-consuming aspects of app testing are imitation of incoming calls and SMS, inputting long texts, creating videos for bug-reports, handling tests on every kind of real device.

 

testing digital product

 

Tubik QA engineer Olga says that knowledge on the variety of test types, their benefits and pitfalls, tools and types of devices is an issue of great impact, still practice plays an even bigger role for performing high-quality tests of mobile applications for iOS. It’s not reasonable to state that having a considerable experience in testing web applications, QA specialist will easily plan and accomplish mobile app testing. Certainly, there are basic methods and principles which mostly deal with functionality, still, nothing can work better than practical experience, enabling a tester to reveal more bugs in the process of mobile app development in the future. We have to remember that the price of the error found before the release is much lower for the client than the one found after launching the product. Another aspect to consider is that it’s impossible to reveal all the potential errors due to the massive amount of incoming data in terms of limited time. That is when theory becomes a great help for QA specialists because it lets them to reduce the number of test cases via using the established techniques and methods with saving the necessary test covering.


Welcome to read The Ultimate Guide to Creating a Mobile Application 

year in review tubik studio design

Tubik Studio 2016. Year in Review.

Bright, fast and furious, the year 2016 is over. For Tubik Studio it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. Traditionally, we start every new stage of our workflow remembering the most significant points of what has already been done, and today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked 2016 for our team.

 

Being active on Dribbble, we published over 170 shots. Welcome to look through the set of top positions in the categories of UI/UX design, animation, branding and illustration. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Twenty UI/UX shots

 

tubik studio web design

Page 404

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

tubikstudio library widget

Library Widget

 

tubikstudio ui webdesign

Comics Shop Home Page

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Christmas graphic design tubik studio

Magic Christmas App

 

tubikstudio homepage design

Event Agency Webpage

web design UI concept tubik studio

The Big Landscape

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

health care app UI design

Health Care App

 

website design tubik studio

Adventure Agency Website

 

landing page UI design tubik studio

Website on cooking seafood

 

tubikstudio graphic design illustration

Ryiadh Tour Guide

 

tubik studio design

Weather App Concept

 

mobile app design tubik studio

Moneywise App

 

travel app tutorial tubik studio

Travel App Tutorial

 

snake battle app UI design

Snake Battle

 

toonie alarm UI design

Toonie Alarm

 

online magazine design tubik studio

Daily Bugle Online Magazine

 

book swap app tubik studio

Book Swap App

 

Top Twenty Animated shots

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

landing page animation Tubik studio

Magic.co landing page animation

 

 

tubik_studio_book_swap

Book Swap App

 

Landing Page Animation Tubik Studio

Organic — landing page animation

 

tubik studio healthy food animation

Healthy Food App 

 

tubik studio application recipes and cooking

Recipes App

 

tubikstudio ui design

BuonApp

 

website design UI

Architecture Firm

 

Tubik studio UI animation

Museu

tubik studio ice ui website

Ice Website

 

tubikstudio ui animation website design

Bjorn Website

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

apple even animation tubik studio

Apple Event Animated Graphics

 

gym landing page concept by Tubik

Gym Landing Page

 

tubik studio animated illustration

Lowrider

 

tubik_toonie_help_screens_interaction

Toonie Alarm tutorial

 

animation design

Night Run Animation

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

animated tutorial

Social Network Tutorial

 

motion design tubik studio

Rocket Animation

 

Top Ten Branding shots

 

business cards design

Deetu Business Cards

 

logo design music app tubik studio

Switch-up logo

 

logo design tubik studio

fOxygenic logo

 

andre logo design tubik studio

Andre logo 

 

logo design branding tubik

Pickitout logo

 

lion browser logo tubik studio

Lion browser logo icon

 

snake battle logo for game app

Snake Battle Logo

horsy logo design branding

Horsy Logo

 

logo design by Tubik studio

Elephun logo

 

logo animation tubik studio

Realli logo

 

Top Ten Illustration shots

 

Rio 2016 Illustration tubik studio

Rio 2016

 

graphic design illustration tubik studio

Californication Bus

 

tubikstudio space wallpapers

Free Space Wallpapers

 

character illustration tubik studio

Indian Dreamcatcher

 

Christmas graphic design tubik studio

Christmas Spirit Illustration

 

game character design tubik studio

Ulf the Viking

 

tubik illustration jazz tales book

Tales of the Jazz Age Book Cover

 

tubik studio illustration graphic design

Muscles Magazine

 

star-wars-rogue-one_tubik_studio_illustration

Star Wars Rogue One Illustration

 

badges illustration tubik studio

PukaPal Badges

 

Top Ten Articles in Tubik Blog

 

2016 brought a great deal of new posts in Tubik Blog to share our ideas, case studies and experience. Here is the list of some articles which got shared and read by big number of readers.

 

tubik blog article

Visual Perception: Icons vs Copy in UI

 

Tubik Studio Interface Animation

UI Animation: Microinteraction for Macroresult

 

toonie alarm time picker

The Ultimate Guide to Creating a Mobile Application

 

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

 

lion browser logo tubik studio

Logo Design: Creative Stages.

 

tubikstudio ui ux design

UI/UX Glossary: Steps to Usability.

 

web design tubik studio

Home Sweet Home. Strategies of Home Page Design.

 

tubik studio ui design dark

Dark Side of UI: Benefits of Dark Background.

 

ios-developers-tubik-studio

Review of Popular Trends and Tools for Developers in 2016

 

UI design trends

Review of Popular Design Trends for Interfaces in 2016

 

Top Five Tubik News

 

Growing diversity of services

In 2016 we formed the full team of specialists able to create and maintain a digital product from scratch to release: today we are a comprehensive full-cycle digital agency, with experienced specialists in the domains of branding, UI/UX design for websites and applications, graphic design of any complexity, motion design, iOS and web-development, QA testing.

 

collaboration-process-app-design

 

Variety of outsource projects

2016 brought us the great bunch of outsource design and development projects for diversity of businesses and organizations. They established broad experience of collaboration with different customers, including big and well-known clients. One of the latest projects of 2016 was a «year-in-review» video for Opera.

 

 

In-house iOS application: Toonie Alarm

In 2016, to get closer to our outsource clients, we have set the purpose to create in-house studio products helpful for their target audience and adding some social value as well as giving us comprehensive experience of full path for creating and promoting digital products. In the domain of iOS app design, the product created and released by Tubik in 2016 is Toonie Alarm, entertaining and funny free alarm app for iPhones rewarding users for waking up with cute stickers. 

 


 

In-house content project: Design4Users

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.

 

design4users blog

 

Free e-books by Tubik team

Additional big news was the start of Tubik Magazine, the set of free e-books from us about different aspects, approaches and tips on design and development. The first issue called Design for Business presented a variety of business points and terms important to consider for designers working over goal-centered design for companies and brands. The second ebook called Logo design was devoted to creative stages and strategies of efficient logo design. Both books are supported with practical cases. Welcome to read them or download totally for free.

 

tubik studio free ebook design for business

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. No doubt, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora as well as kept everyone updated with studio news via Twitter, FacebookTumblr and Flipboard.

 

new-year-photo

 

Even this quite brief review makes obvious that 2016 was full of everything for our team. And we are ready for new challenges, perspectives and projects in 2017 which will definitely open many new unforgettable creative pages. 

 

 

Warm greetings for everyone from Tubik Studio, we wish you amazing and successful year 2017!

web-ios-development-trends 2016

Review of Popular Trends and Tools for Developers in 2016

The software technology is constantly evolving, and internet users as well as people creating digital products expect innovations and progress in this field. To provide high-quality development services for clients and final users being competitive on the market, it’s highly advisable for designers and programmers to keep an eye on mainstreams in the professional sphere and try the latest and greatest advances. Although it doesn’t always mean that new tools and trends will immediately replace the current, still the strategy of setting up the sails for every wind usually provides higher level of professional flexibility and growth.

 

The year 2016, which is quickly leaving day by day, has brought a lot of news as well as established some already known tools, trends and techniques even more solidly via practice and updates. Web and app developers have got new frameworks, updating technology and powerful development tools. We have discussed what Tubik Studio developers find popular and important to mention in the domain in 2016 and today want to share the ideas with our readers. So, here is the list of broadly used programming languages, frameworks and tools as well as updates which quickly won their place in the process. As usual, this year development trends and popular choices are driven by greater efficiency, increased customization and ease of use. Let’s check what has been found essential in iOS and web development.

 

iOS development

 

The constantly changing world of mobile phones, tablets and other devices means that businesses keep app developers busy all the time requiring high professional level and flexibility. Every latest version and update of iOS operating system brings new facilities, opportunities and challenges for developers. The following stuff was widely used in creating great variety of iOS apps this year.

 

ios development glossary

 

Alamofire

 

Alamofire is a Swift-based HTTP library for iOS and Mac OS X. It uses NSURLSession and the Foundation URL loading system to provide first-class networking capabilities in a convenient Swift interface that simplifies a number of common tasks for the developers. Alamofire offers chainable response and request methods, JSON parameter and response serialization, authentication, network reachability, Unit and Integration test coverage and many other features. It was initially written in Swift and did not inherit anything from Objective-C.

 

ReSwift

 

ReSwift is Redux implementation of the unidirectional data flow architecture in Swift. The ReSwift library allows everybody to dive into the code, understand every line and contribute. It also supports Swift 2.2 through to Swift 3. ReSwift is quickly growing beyond the core library, providing experimental extensions for routing and time traveling through past app states. It provides separating app components into three important concerns: State, Views and State Changes.

 

Firebase

 

Firebase is a BaaS (Backend-as-a-Service) that started as YC11 startup and grew up into a next generation app development platform on Google Cloud Platform. It supports the web, iOS, OS X, and Android platforms. Traditionally configuration of a server requires fetching data via some API that is written in order to retrieve data from the server. Firebase simplifies storing and retrieving the data via a third party service and comes with its own API. The platform was acquired by Google in October 2014 and received a significant number of new features in May 2016. In the new version, Firebase takes many of Google’s existing developer tools, like Google Cloud Messaging and combines them with new and current Firebase services, among which app indexing, crash reporting, hosting, cloud messaging, AdWords, AdMob, storage, real-time database and others.

 

Swift

 

Before Swift came into play, Objective-C had been the main programming language used by developers for OS X and iOS operating systems and their APIs. Swift, introduced at Apple’s 2014 WWDC, brought its own dose of revolution. In general description, Swift is a general-purpose, multi-paradigm, compiled programming language broadening the previous scope of operating systems as it was developed for iOS, OS X, watchOS, tvOS, and Linux. The latest version Swift 3 got improvements which made code-writing more natural and consistent. By downloading Xcode 8 developers can easily use this new version and move automatically from previous to latest Swift 3 syntax.

 

Tubik Studio iOS development

 

Front-end development

 

Front-end developers also mention dynamic progress in the domain of tools and software, mostly based on the updates of already established platforms and programming languages. JavaScript holds its leading positions because the language is usually used to make web pages more interactive, create games, animations, dropdown menus and take extensive control over the web interface. A large number of web development frameworks have come into JavaScript recently and many of them have already established huge communities such as Angular, Meteor, React and Backbone. Let’s look through the most popular JS frameworks and libraries essential to remember as effective and broadly used in 2016.

 

web developer tubik studio

 

Angular.js

 

Angular.js is a complete, JavaScript-based, open-source, front-end web app framework maintained by Google. It is a common technology to provide a solid base foundation for developers working with the latest industry standards and requirements. The framework provides a set of modern features for rapid app development. New version of Angular.js is called “AngularJS 2” and has been provided with the improved structure and development features. Now it enables to get improved and simple form of validation, two-way data binding, routing and animations. The second version is totally different from previous one, requiring ES6 and TypeScript knowledge.

 

Backbone.js

 

Backbone.js is a framework with a RESTful JSON interface and based on the model–view–presenter (MVP) architectural pattern. The main concept of the framework is that all server-side functions should flow through an API, minimizing the amount of code that needs to be composed for achieving the same powerful functionality of more sophisticated web frameworks. Backbone is a popular web development framework for JavaScript developers because its usability modules are easy to understand, and also it presents a straightforward learning curve. For example, Trello is built using Backbone.js for all the models, views, and routes. Backbone.js 1.3.3 was released in April 5, 2016. The bugs of 1.3.0 — 1.3.2 versions were fixed in the 1.3.3 and it also provided new methods and improvements.

 

MeteorJS

 

MeteorJS is a free and open-source JavaScript web framework written using Node.js. It simplifies the development of real-time mobile and web app that can be built with a singular development interface. Any web app built with Meteor is also automatically compatible with mobile devices. The developers can convert the existing web apps into mobile apps and release them in the most popular mobile app stores. Meteor is also full-stack framework supporting native JavaScript language for building modern and scalable web and mobile apps. The public package repository Atmosphere has thousands of published packages that let to create multiplex apps. The latest versions of MeteorJS are 1.4.2.3 — 1.4.3-beta.1. The main feature is enhanced rebuild performance focusing on the complex apps development. The framework has become more modular with parts that can be packaged, maintained and evolved independently.

 

React.js

 

React.js is an open-source JavaScript library for data rendered as HTML. It is maintained by Facebook and the main area of expertise is supporting implementation of a Virtual DOM. The Virtual DOM is compared with the current state of the DOM generating a list of operations that make the current DOM look like the new one. Those operations are applied quickly in a batch. React.js v15.4.0. was released in November 16, 2016. In the new version, React DOM implementation was moved to the React DOM package.The upgrade solves a few problems such as errors of React DOM import in the same file as the snapshot testing renderer. The version can visualize React components in the Chrome Timeline allowing to see which components are mounted, updated and unmounted.

 

CSS frameworks

 

CSS processors emerged in web development many years ago having quite limited set of features in their early version. Yet, nowadays they are the key points for CSS development. The processors extend CSS with variables, operators, interpolations, functions, mixins and many other usable assets. At the moment, Less and SASS are mentioned among the most popular preprocessors with the large feature sets. However, the news that Bootstrap 4 is migrating over to SASS gives it a slight edge over Less in 2016.

 

programming languages fron-end

 

Bootstrap

 

Bootstrap has become even more popular over the last years. Like any effective front-end framework, Bootstrap includes CSS, HTML and JavaScript components. It adheres to responsive web design standards allowing to develop flexible websites of all complexities and sizes. The framework typically includes the latest and best features because it is continually updated. For example, Bootstrap added themes that met Google material design guidelines shortly after they were published and it was also upgraded to use SASS as a CSS preprocessor.

 

Foundation

 

Foundation is a highly advanced front-end framework useful for designing responsive and flexible websites. The framework supports GPU acceleration for smooth animations and has Fastclick.js for fast rendering on mobile devices. It runs on the SASS preprocessor and includes the Foundation-developed data interchange attribute, which allows loading lightweight HTML sections for mobile and bigger HTML sections for larger screens. Foundation is used by Facebook, eBay and Mozilla, but it is quite complex and may not be suitable for beginners. The version 6.3.0-rc3 was released in December 9, 2016. It has a number of the improvements such as the updates of components and fixed errors of previous version.

 

Back-end development

 

Nowadays lots of programming languages and their frameworks, such as PHP, Java, Ruby and the like, are used for efficient back-end development. Let’s check out the list of popular languages and frameworks often chosen for web projects.

 

web development and programming

 

PHP

 

PHP is an HTML-embedded programming language. The main aim of the language is to allow creating dynamically generated pages quickly. Its frameworks are used for back-end development and widely used for the complex web services. One of the main PHP development concepts is to reuse generic components and modules for faster creation and better performance of the projects. The frameworks allow keeping the codes organized, facilitating scalability and ensuring long-term maintenance.

 

Laravel

 

Laravel is an open-source web framework intended for the development of web apps following the model–view–controller (MVC) architectural pattern. The framework has a lot of fresh features and lightweight templating engine that helps developers complete the most frequent tasks like authentication, sessions, queuing and caching. Laravel has a micro-framework Lumen focusing on lean management. It helps to develop sub-projects and micro-projects and allows programmers to put them into the main framework by just copying the code into the particular project. Laravel 5.3 was released in August 23, 2016. The new features are focused on speeding up developer’s performance by adding the set of extra improvements for common tasks, for instance Laravel Scout (a driver based full-text search engine for Eloquent), Laravel Passport (the technology deploying OAuth2 server), Laravel Mailable, Laravel Notifications, Laravel Echo (an improvement to the existing event broadcasting system), a new $loop variable of Laravel Blade and a huge overhaul of documentations.

 

Yii

 

Yii is an open source, object-oriented, component-based, MVC framework, easy to use for developing web apps and APIs. It has a reliable code generator allowing to save time writing code to connect to the database and also it uses the ActiveRecord pattern for object-relational mapping which means less SQL code to write. The main benefit of the framework is the ability to decrease the complexity of developer’s work. Products created with the Yii framework are characterized as efficient, extensible and easy to maintain. The latest version of Yii was released on October 20, 2016 presenting a complete rewrite of Yii on top of PHP 5.4.0.

 

Symfony

 

Symfony is an open-source web framework built on top of components such as Drupal, Ez Publish, and phpBB. These components are reusable PHP libraries used to complete tasks like creation, routing, object configuration, authentication, templating, etc. Symfony APIs also enable easy integration with third-party apps and Symfony can be used with popular front-end frameworks such as AngularJS. The latest version of Symfony was released in December 13, 2016 with enhanced performance and fixed bugs for providing the reliable workflow.

 

Node.js

 

Node.js is an open-source, cross-platform, JavaScript runtime environment that allows developers to run JavaScript code on the server, outside a browser. It is built on top of Google Chrome’s V8 VM engine supporting JavaScript in the chrome browser. Node.js wins high popularity because it enables to build large scale, real-time and scalable mobile and web apps with only JavaScript. As the Node.js ecosystem grew, the frameworks also started to showing progress and speeding up the development workflow. There are many Node.js frameworks that simplify building real-time web apps, among them the following:

 

Node.js Express — a minimalist and flexible framework built on top of node.js and has taken node.js to the next level by providing high-level wrappers around node.js APIs. The framework offers all the features required for developing high-quality web apps, mobile apps and APIs. Express also qualifies as Node.js rest API framework.

 

KOA — a lightweight framework for developing web apps and APIs. KOA requests flow through middleware in a stack-like manner allowing developers to perform actions downstream then filter and manipulate the response upstream. KOA generators also greatly increase readability and robustness of the app.

 

Sails.js. — a web framework that sets platform for easy building custom, enterprise-grade Node.js apps. The framework is designed to resemble the MVC architecture from frameworks like Ruby on Rails but it has more modern, data-oriented style of web app development. Sails.js has all the features required for building anything from a small scale chat client to an enterprise grade web app.

 

Ruby

 

Ruby is dynamic, object-oriented, open source programming language with a focus on simplicity and productivity. Moreover, Ruby has framework which supports high level of flexibility for developer in the process of creating code for particular aims. Ruby on Rails is a development tool to give web developers libraries providing structure for all the code they write. Actually, it is a server-side web app framework that extends Ruby programming language. This framework uses Ruby to dynamically assemble HTML, CSS, and JavaScript files. Rails helps developers to build websites and web apps abstracting and simplifying common repetitive tasks. Rails 5.0 was released on June 30, 2016, introducing Action Cable, API mode, and Turbolinks 5.

 

ruby-on-rails web development

 

Java EE

 

Java EE is a platform for creating large-scale apps and software in the Java programming language. It includes a runtime development environment as well as an API and has additional features in comparison with the standard edition, including web services, distributed architectures, multi-tier architectures and object-relational mapping.

 

.NET Framework

 

.NET Framework is a technology that supports building and running the next generation apps and web services. The framework consists of the common language runtime and the .NET Framework class library. The common language runtime is the foundation of the .NET Framework. The technology provides language interoperability across several programming languages (each language can use code written in other languages).

 

copywriting for digital products

 

Even this review, briefly describing popular tools and software, shows that the sphere is constantly growing and offering new opportunities for both developers and users. Whatever broad and diverse the list of tools will be, in practice developers choose what is better for them only by taking their own steps and breathing life in digital products via code. The best tool, software and technique is the one that enables to provide the final product which is effective, user-friendly and solid in performance. That’s the biggest intention we had compiling this list: providing developers with food for thought on trying something new and reviewing which important things the year has brought. No doubt, the next year will be even more powerful in innovation for app and web development sphere so let’s look forward to them together!


Welcome to read more articles on web development

toonie alarm UI design

Case Study: Toonie. UI Animation Development.

In most cases, when users deal with animation in the interface, it takes short seconds and feels as natural as a breath. Being far from design and development routine, it’s almost impossible to imagine that these brief and simple interactions take long hours of thorough work presenting mix of science and art. 

 

In our previous articles we had numerous chances to show you diverse UI animations solving users’ problems and enhancing usability, still they were mostly presented in design perspective. Today’s  case study will set the link between design and development for iOS mobile applications: it will show you collaboration of UI designers, motion designers and iOS developers working over animation for Toonie Alarm. Previous case studies already let you see the creative process for user interface and mascot design, but this time you will come along step-by-step guide on how animation was created for the app. 

 

Time Picker animation

 

Time picker in the alarm application is actually the core part of interaction with the app and the primary element at which motion design and development play the vital role for establishing both usability and visual harmony. Let’s see how science, calculations and code are able to transform into beauty and style.

 

toonie alarm UI animation

 

All the content of animation is placed on custom subclass UIView, for this case we call it AnimatedDayView.

 

layers_scheme toonie-ui-animation

 

The bottom layer is Infinite UIScrollView (1 on the scheme above). It is the endless scroll view that includes the copies of the image below.

 

toonie scroll animation

 

There are numerous ways of realization for endless scroll. The main idea of replacement in scroll view is to recalculate the size of the scroll view and replace the invisible previous image showing the new one and adding the one for the future.

 

In the case of animated time picker for Toonie, we took the starting point as 6 AM, therefore the middle point is 6 PM and the ending point is 6 AM of the next day.

 

The next layer is Stars UIImageView (2). This UIImageView is added over the scroll view and goes round its centre; during this process the Alpha of the layer is changed. It means that in the daytime it is transparent while in the evening time it gradually appears.

 

stars_ui-view_scroll_animation

 

The next layer is CALayer for the sun and the moon— SunMoonBackgroundLayer. It isn’t seen on the scheme as it has the same size as AnimatedDayView. It also rotates around its centre which is below the visible frame of the screen (5).

 

On the SunMoonBackgroundLayer, there are two more layers — for the moon (3) and the sun (4). The layer of the moon rotates to the same angle as SunMoonBackgroundLayer but in the opposite direction. The sun rotates to the higher number of radians.

 

The issue of great importance here was to thoroughly calculate at which number of degrees should each layer be rotated and how far should the scroll go on. The scroll presents the easiest part. The input variable is always time, that is the hour and minutes which user chose on UIDatePicker. With this data, it’s quite simple to calculate the scroll view shifting. Initially it will be zero, which in our case is equal to the time of 6 AM as we set above. Imagine that user has picked the time 9.10 AM. We can understand which number of pixel the view has to shift down or up when we calculate the difference of the time in minutes (190 minutes) and transforming them into pixels. All the scroll ground presents 24 hours, so its height presents 24 hours, therefore 1 minute=image_height/minutes_per_day (60*24). Knowing the value of 1 minute, it’s not difficult to calculate how many pixels are set into 190 minutes. The only thing left to do is to move the scroll on the required number of pixels, which can be also negative in cases when the new time is less than the previous setting.

 

The next important parameter is Alpha of the stars. It can be calculated with understanding at which particular place on the background image we are at the current position. It means that at 6 AM in the top part of the image the stars should have Alpha 0 value because the morning starts. And the stars are ignored, aka kept in Alpha 0, up to 6 PM, and then Alpha value should be gradually increasing so that at midnight Alpha reached 1. The calculation of dynamics and intensity here can be different depending on desired visual effect. The core thing is that we have the basic parameter which we can rely on: the current position on the background image. And it can be easily calculated knowing the time set by the user. With alteration of Alpha motion, attractive visual performance can be effectively reached.

 

To calculate the angle of rotation, we take 360 degrees for 24 hours. So, 0 degree = 6 AM. We calculate the difference in minutes, find the number of degrees per minute and set the degrees required for shifting.

 

Another element of animation is clouds. They appear due to NSTimer. It adds one of the graphic variants for clouds (the app uses three graphic versions) with random coordinate of Alpha (transparency) beyond the limits of the screen on the right side. After that animation of movement (changing the centre) starts from right to left. The timer is launched with the random interval.  After the animation is finished, the cloud is gone.

 

toonie alarm time picker

 

Sun switch

 

Another piece of animation that required attention and creativity was the switch on the Alarm Screen, the actual element of interaction showing that the alarm is set and active or not. Design solution supporting general visual performance of the app was to make the toggle look like the animated sun when alarm was in the active position.

 

toonie switch UI animation

 

Looking over the accomplishment of the presented motion via code, we see that this is the UIView which contains several layers.

 

toonie-ui-switch_animation

 

The first layer is the background of the hole in the switch (1) which has a rectangular shape. Above it, there is the circle — the toggle of the switch (2) which is the centre of the sun. It can move leftwards or rightwards. Another layer is the sun rays (3). They are set as the separate layer because they have the endless animation of rotation.

 

When the switch is off, the rays change their Alpha to 0 and animation stops. Over all the mentioned layers, the largest layer is placed which is the background of the switch (4). This is also the rectangular layer which has a mask CAShapeLayer drawn with two UIBezierPaths.

 

 

The mask cuts off the layer of the required shape and switch gets a look of the final view. For interactive controlling, two Gesture Recognizers are added: UITapGestureRecognizer for pushing and UIPanGestureRecognized for pulling the toggle.

 

This practical case shows that making animation which will realize its problem-solving potential looking attractive and natural is a demanding task requiring thoughtful approach and collaboration of designers and developers for users’ sake. If you want to test everything described above in real interaction, just set Toonie and see how it works. And don’t miss new cases telling more stories of creative process.


Welcome to set up Toonie Alarm via App Store

Welcome to read case studies about user interface design and mascot design for Toonie Alarm

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

ruby on rails web development

Ruby on Rails Development: Benefits and Pitfalls.

Any driver in the world knows: it doesn’t matter how powerful, innovative and high-tech is your vehicle if you have no chance to try it on the good road. This small everyday situation easily shows that lots of things, concepts and activities are deeply interconnected and mutually influence each other. In digital design and development, it works the same way: there’s a huge lot of factors having an impact on the final result. Bad design will spoil well-written code as well as badly developed code can bury the most sophisticated design solutions. Every side plays its big role in the final outcome which should present a user-friendly product.

 

Earlier we have already given closer insights into the definition, processes and tools for web development. Today’s post is going to continue the theme presenting considerations on a particular tool for web development Ruby on Rails and reviewing its benefits as well as possible pitfalls that need to be taken into account.

 

Brief background

 

Let’s start with a tiny bit of history. Ruby is dynamic, object-oriented, open source programming language with a focus on simplicity and productivity, created by Yukihiro “Matz” Matsumoto and first released in the 1990s. It powers famous websites such as the original version of Twitter, Hulu, Living Social, Basecamp etc. Many companies use Ruby in some capacity: BBW, Cisco, CNET, IBM, JP Morgan, NASA, and Yahoo. Moreover, Ruby has framework which supports high level of flexibility for developer in the process of creating code for particular aims.

 

“Ruby is named after the precious gemstone; it’s not an abbreviation of anything. When I started the language project, I was joking with a friend that the project must be code-named after a gemstone’s name (àla Perl). So my friend came up with «ruby». It’s a short name for a beautiful and highly valued stone. So I picked up that name, and it eventually became the official name of the language.” said Yukihiro «Matz» Matsumoto, the creator of Ruby, in his interview about the roots of the programming language.

 

Ruby on Rails is an open-source web application framework for the Ruby programming language optimized for programmers’ sustainable productivity. David Heinemeier Hansson extracted Ruby on Rails from his work on the project management tool Basecamp at the web application company also called Basecamp. Hansson first released Rails as open source in July 2004. Major brands like Amazon and eBay even have Rails projects.

 

“Rails (Ruby on Rails) was extracted from my work on Basecamp—a project collaboration tool from 37signals. So it was motivated by needs, not predictions. And I believe that’s a big part of why we’re currently enjoying such success. I didn’t try to imagine what some programmers might need for a fantasy job. I just built what I needed to get my work done with a smile.” says another interviewee David Heinemeier Hansson, the creator of Ruby on Rails.

 

ruby on rails web development article

 

What is Ruby on Rails?

 

Ruby on Rails often just called “Rails” is a development tool to give web developers libraries providing structure for all the code they write. Actually, it is a server-side web app framework that extends the Ruby programming language. Ruby presents the operating language for Rails the same way as PHP does for Symfony and Zend or Java does for Struts. Rails combine Ruby programming language with HTML, CSS, and JavaScript to create a web app. This framework uses Ruby to dynamically assemble HTML, CSS, and JavaScript files. Rails helps developers to build websites and web apps abstracting and simplifying common repetitive tasks.

 

Rails apps operate upon a model–view–controller (MVC) pattern. Many other web frameworks use this pattern, such as AngularJS (JavaScript), Django (Python) and CakePHP (PHP).This means that the apps are divided into three parts: models, views, and controllers. These components have the following roles:

 

Models. They are used to represent forms of data used by the app and contain the logic to manipulate and retrieve that data. In Rails, a model is represented as a class. These forms of data are not low-level like strings or arrays.

 

Views. They are the templates (typically formed of a mix HTML and Ruby code). Views are used to build up the data that users of web app see in their browsers or through other clients. They can be rendered as HTML for web browsers, XML, RSS or other formats.

 

Controllers. Controllers provide the logic that binds together models (their associated data) and views. They process input, call methods and deliver data to the views. In Rails, controllers contain methods known as actions that, generally, represent each action relevant to the controller, such as “show”, “delete”, “view”, etc. The framework can be used with various operating systems such as Windows, Mac OS X and Linux; various databases such as SQLite, MySQL, PostgreSQL and others; various web servers such as Apache, Nginx, etc.

 

Talking about operations via the platform, developers usually mention several core principles. Among the main ones, convention over configuration (CoC) should be mentioned. It means that developers don’t have to spend a lot of time configuring files in order to get setup, Rails comes with a set of conventions which help speed up development.

 

Another important principle of software development in Rails is don’t repeat yourself (DRY). It encourages developers not to make duplications in their code and isolate functionality in small functions or files. The principle helps to make code modular, easier to understand, read and debug. When code is duplicated, the outcome becomes more complex, making it more difficult to maintain and more vulnerable to bugs.

 

Ruby on Rails uses Representational State Transfer (REST) architecture that rests around the relations between the client and the server. The architecture helps to create logic around the app and code that developers find highly intuitive and functional.

 

Another key feature is RubyGems, a package manager that makes it easy to create and share software libraries (“gems”) extending Ruby. RubyGems provides a reliable and simple system to install “gems”. Anyone can upload them to the central RubyGems website, making the “gem” immediately available for installation by others. The RubyGems website is where developers obtain the most recent version of Rails.

 

ruby on rails web development

 

Benefits and drawbacks of Rails

 

As well as any tool or software, Ruby on Rails has its strong sides and pitfalls that need to be considered. Let’s briefly review both aspects on the basis of various feedback from developers.

 

Benefits for developers on Ruby on Rails

 

Large Community. Generally, Rails is more than development tool, it is also the large community. The members share their works, often use the same tools, and support each other. The informal community provides a diversity of jobs, recruiters, meetups, conferences, examples of businesses building websites with Rails, and clients funding startups. It is no surprise that Rails is popular on social coding resource Github. This aspect is particularly helpful for beginners.

 

Variety of gems. “Gem” is the software package that contains a package Ruby app or library. Commonly it is used to extend or modify functionality in Ruby apps. Some “gems” provide command line utilities to help automate tasks and speed up developer`s work. They are all publicly available at RubyGems.

 

Cost-effective. The process of building functionality with Rails is fast because it has the collection of open source code available within the community and set of conventions. Ruby on Rails also runs on a free operating system and works with mostly free databases and web servers. These features provide less number of working hours, quick development process and low overall cost.

 

Code Quality. Rails use Ruby programming language whose code has a high level of readability. This aspect increases productivity with the lower need to write out separate documentation or comments, making it easier for other developers to pick up existing projects.

 

Tester’s perspective. Rails has been developed with a focus on testing and has good built-in testing frameworks.

 

Diversity of tools. Rails provides fantastic variety of tools that help developers to deliver more features in less time. For example, it has a standard structure for different web apps in which all the common patterns are are available for programmers.

 

Flexibility. It is one of the biggest pros of using Ruby on Rails. For example, Rails interacts perfectly with technologies and frameworks like AngularJS. This factor offers developers opportunity to separate layers of the app and use multiple technologies.

 

web development ruby on rails

 

Potential Ruby on Rails problems and limitations

 

Performance. Some developers complain that Rails apps are not as fast as Java or C. The statement is generally true, but for the majority of apps, it is fast enough. Rails web app may become a little slow and bloated when it is large although a high-skilled programmer has the means to tune the performance up whenever it is necessary. There is also the option of running the app under JRuby, so it will show the same performance characteristics as Java.

 

Hosting Issues. Not all website hosts can support Rails. The main reason is that Rails can be more resource intensive than PHP, a fact which deters some providers. Alternatively, there is a number of hosts (Virtual Private Servers) such as Amazon EC2, EngineYard, Linode or Rackspace, which can satisfy Rails developers’ needs.

 

Popularity. The number of Rails developers is growing year by year as more people switch to it from other programming languages. Yet, Rails is still not as popular as Java and PHP. Probably, one of the reasons for this is that the language is relatively difficult to learn especially compared to PHP. However, one of the main differences between the Rails and others in this aspect is the big amount of open source code (“gems”) which is publicly available. “Gems” are helpful for beginners because they appreciably simplify the process of web development.

 

Lack of documentation. It can be hard to find good documentation for the less popular “gems” and for libraries which make heavy use of mixins. Developers often end up finding the test suite playing the role of documentation and they have to rely on it to understand the behavior of the written code. This aspect isn’t bad in its essence, as the test suite should be the most up-to-date representation of the system; however, it can still be frustrating having to dive into code, when sometimes written documentation would have been much quicker.

 

web development

 

Let’s draw up the balance. Rails is a huge web app framework with a great number of built-in features. It can be used to create either small or large app, but it tends to use more memory and resources than the other frameworks and performance can be a bit lower. In the majority of cases, Rails apps will be composed of many tens of files and have tight structure of models, views, and controllers. Anyway, nowadays the framework is popular because it is powerful, standardized, reasonable and well-established.


Welcome to read more articles on web development

mobile application testing

The Brief Guide to Testing Mobile Interfaces

Mobile technology and smart devices have already brought massive and significant changes in human behavior, communication, way of thinking and lifestyle. In fact, the boom of apps popularity can be seen in plenty of industries, among which we can easily sort out some noticeable ones such as Media (magazines and newspapers), Travel (maps), Medicine (patient records), Finance (apps for real-time trading), Education (translators and dictionaries) and Social (games and social media platforms). With steady and obvious progress of the sphere, mobile and web apps are definitely going to become more critical for personal, professional and business success and efficiency. So, creating and launching a new application, all sides of its production should test the solutions and environment as well as practical quality of design and development outcome. Extensive practice we have got here in Tubik Studio proves that this is the well-lit way to providing users with positive experience and helpful products.

 

Testing is vital for product quality

 

In our previous article, devoted to the full cycle of creating a mobile application, we have already mentioned the great part of testing in providing high quality products, able to solve problems and improve lives. As it was outlined in general terms, testing is one of the crucial phases of the entire app design and development process: it helps to reveal bugs before the app is brought out to actual users. Practice shows that in the majority of cases, users abandon the app if it has functionality problems, no matter how promising and engaging it seems. Vice versa, 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 designers or 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.

 

Peter Drucker once said “Quality in a service or product is not what you put into it. It is what the client or customer gets out of it.”  In the majority of cases, if users see that anything in the app is broken or it constantly takes large loading time preventing them from quick accomplishment of the task at hand, the risk is really high that they will bounce it and never come back. That’s why testing phase is the hidden hero of mobile app development.

 

Today we are going to concentrate more on perspective of testing mobile apps, as websites testing has its own specific features worth another article. So, let’s review the basic steps and aspects important for effective digital product testing.

 

mobile app testing

 

Start with the type of the app

 

Mobile app testing has plenty of challenges based on multiple factors: there are some compromise decisions testers or developers need to consider and choices they need to make on combinations of different techniques and methods to be used. One of the aspects to think over is the nature of the app itself directly influencing the process and limits of testing. In this perspective, the following basic categories of the apps should be mentioned.

 

Native apps. The apps of this sort are created specifically for one platform, aka operating system of device. They can take full advantage of all the device features such as the camera, the list of contacts, the flashlight, the accelerometer, the compass or others, and are installed via an app store (Google Play, Apple’s App Store, Microsoft store, etc.).

 

Mobile web apps. They are mobile-optimized websites that look and feel like native apps, still they are run by a web browser.

 

Hybrid apps. This type representatives provide the mix of native apps and web apps. Like native apps, they are installed through app stores and can take advantage of the numerous features available on device. As well as web apps, they rely on HTML being rendered in a web browser.

 

Toonie Alarm UI design

 

The type of the app under construction directly influences all creative stages from UX wireframing to final check of all the code. Different operational systems set their own guidelines and recommendations on design solutions and performance, development tools and restrictions. Neglecting those limitations and rules, creators could fail submitting the app to open use and turn all the creative process into wasted time and effort.

 

Plan the testing levels

 

Starting actual work over the app, creative and production team needs to consider a testing plan combining different testing levels. Testing is not the process taken as one single stage or action: it is spread via different stages. Schematically, this process can develop in vertical and horizontal directions. Vertical dimension is presented with testing levels and usually deals with going deeper to the code and functionality from separate units to whole app, its connection with the server if needed, and its technical correspondence to the requirements. Horizontal dimension deals with different aspects of app performance and user experience.

 

Taking the testing levels to account, their basis is variety of tests grouped according to the stages when they are used in the development process, or by the level of specificity of the test. The main task of testing levels is to identify missing areas and prevent overlap and repetition between the development phases. Let’s briefly describe the various levels of testing.

 

Unit testing. This testing is commonly done by the developers to make sure that their code is working correctly: they test the sections of code like classes, functions, interfaces, etc.

 

Integration testing. Integration testing is done when particular units are integrated with each other, with the aim to test the behavior and functionality of each unit after integration. This testing level is usually carried out by a software testing engineer. There are a few types of integration testing such as big bang integration testing, top down and bottom up.

 

System testing. Here the name says everything: at this level all the components of the app are tested as a system in order to ensure that the product at the pre-launch stage meets the specified requirements. As the app is almost ready, it can be tested in the environments really close to the actual in which users will get their experience once it is deployed.

 

Acceptance testing. The main objective of this testing level is to evaluate whether the app system complies with the user requirements and whether everything is ready for release.

 

ios-developers-tubik-studio

 

Define the types of testing

 

All aspects of the app usage should be tested. Designers, developers and testers will need to check it across different devices as the points like screen resolution, processors, battery life and memory are different and can significantly affect on the efficiency and performance of the app, functionality, handling and loading time, as well as UX and UI solutions.

 

Among the variety of types, applied to test the mobile app at different stages of its creation, we should definitely mention the following list.

 

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. The primary focus of this testing is on easy and quick use of an app, simple on-boarding and user’s satisfaction with the entire experience. For higher efficiency and productivity of general creative flow, this type of testing should start much earlier than any single line of code will be written, from the first schemes and transitions put into UX wireframes.

 

Installation testing. At the initial stage on installation, the app should add required software to the device automatically. And uninstalling, it should remove all the available content and databases from the device which are used by the app. So, this type of testing checks that the install/uninstall flow goes properly.

 

Functional testing. It is the most basic test for any app to ensure that it is working according to the defined requirements and there are no functions missed in the process of interaction. Functional testing mainly includes finding possible specific bugs of the device or navigation issues of the app. This type of testing should be done at the primary stages of development. In enables developers or testers to check and measure database or network queries with response times, crashes and memory issues.

 

Performance testing. Rather stressful part of any app testing is performance test revealing the omissions which left unnoticed during functional and user interface testing. This testing is required to be done on actual device only so it means the whole app is coded t this stage. This type covers client-side, server 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.

 

Interruption testing. An app may face various interruptions being in active mode, such as incoming calls or network coverage outage and recovery. This kind of testing shows what the app will do in this variety of cases. 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.

 

Memory testing. This type checks that each app maintains optimized memory usage throughout surfing. As mobile devices have definite limits of available memory, this testing is crucial for the appropriate product functioning.

 

Security testing. It checks vulnerability of the app to hacking, authentication and authorization policies, data security, session management and other security standards. The fundamental objective of security testing is to ensure that the app data and networking security requirements are met according to standards.

 

Tubik Studio iOS development

 

Don’t forget to test design

 

One of the huge mistakes that could be done about testing it planning this part not earlier than the development stage starts. Obviously, the product getting live via code presents wider perspective of testing its actual functionality and performance. Still, we should remember that any digital product is not just code — it is the set on user interactions which should be thought-over and designed thoroughly with target audience in mind. Therefore, testing should take its first steps at the stage of wireframing to check if all the elements take their places, communicate to users, provide them with feedback from the system and what is more, achieve the goals and solve users’ pains.

 

Numerous prototyping tools enable to simplify and speed up the process of testing user interface so that developers obtained the verified version of design not taking major design alterations in the process of development. This is the efficient way to optimize the general creative flow and provide maximum efficient outcome at every stage. Prototyping gets testing sides, be it client, designer or even potential users, closer to real interaction with the concept of the future interface. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to check the correctness and appropriateness of the design solutions way before they will be transferred to developers.

 

The most effective point to involve prototyping for testing design is the step between UX wireframing and UI design.  The prototypes on UI stage can also be created for presentation of application general looks rather than for testing and improving its functional features. Still, it’s crucial that usability should be thoroughly checked first of all at the UX stage, otherwise it will be much harder to change inefficient solution after having accomplished a lot of work on UI and then development.

 

All the numerous aspects of design testing are definitely worth a separate article which will continue this topic in our blog very soon.

 

InVision for UI prototyping tubikstudio

 

Check the code thoroughly

 

When the design is transformed into code, the developers and testers need to make sure that all the quality and performance nuances are considered and included. Pointers in this area are testing on actual devices and simulators. Testing on devices is proceeded on the actual handset where app is installed, run and tested. Testing in simulator applies the software that can accurately imitate a mobile phone.

 

Simulator testing is useful at the primary stages of development as it allows quick and efficient checking the app, but it doesn’t fully measures performance and usability which should have their healthy doze of actual human testing. Still, automated testing got really popular now because it is effective, cheap and quite reliable. iOS Simulator as well as testing tools such as Appium, Frank, Calabash and others are available to support moving the app through the testing process and point out the issues requiring attention.

 

Continuous testing at all stages lays the strong foundation for keeping small bugs from becoming major issues later on. The final testing is conducted on actual devices so that crashes and hangings could be identified. Testing on device is obligatory for every app as it provides developers with actual data on the app behavior in different environments.

 

Test and measure after launch

 

Another mistake that should be avoided is stopping testing after the product is launched. Contrarily, testing will get even more diverse and comprehensive as it will inform the sides maintaining the app viability and efficiency about behavior, problems and preferences of real users. This information is the direct route to product improvements providing users with the updates they really need and want.

 

testing digital product

 

Mobile technology is transforming the way of using devices. Smartphones and tablets of all kinds are rapidly becoming the valid method of interaction between consumers and businesses. People use mobile apps to connect socially, find information, order and track goods, book places and set appointments and do hundreds of other operations improving their lives regularly. It is important to build an app with all features and functionality that are required. If the app is created without effective testing plan, users are likely to come across unexpected bugs and errors. In the modern world with tough and growing competition in this field, the risk is high that they will quickly lose interest to the app while thoughtful testing and analysis is the solid way to avoid this risk.

 

Recommended reading

 

Diverse issues of applying testing at different stages of creating digital products have been an object of professionals’ attention lately. Here is the collection of recommended sources on further reading for those who would like to read more on the theme.

 

Testing Strategies and Tactics for Mobile Applications

 

Mobile: Native Apps, Web Apps, and Hybrid Apps

 

Beginner’s Guide to Mobile Application Testing

 

Mobile Testing: Complete Guide to Test your Mobile Apps

 

17 Strategies for End to End Mobile Testing on both iOS and Android

 

Levels Of Testing

 

Software Testing Levels

 


Welcome to read The Ultimate Guide to Creating a Mobile Application

ios development glossary

IOS Glossary: Architecture, Patterns, Xcode.

As soon as you know the basics, you set the foundation for growth. It works the same way for any job and there is no any secret that many significant innovations are still grounded on diverse knowledge boosting potential and force of creativity. So, today let’s do our homework on the basics and add one more article to the set of the professional glossary. Earlier we have already published the Glossary posts with key terms for the topics of UI/UX design and web design as well as business terms and abbreviations. This time the perspective will get changed a bit, featuring the first set of terms in the theme of iOS development. Let’s get started briefly reviewing the basic notions common for the sphere of iOS development.

 

iOS

 

Basically, widely known iOS is the well-established abbreviation taking its roots from the phrase «iPhone Operating System» which was created originally for the system of mobile devices produced by Apple such as iPhone, iPad and iPodTouch and now also AppleTV. 

 

User interfaces created for iOS are made on the basis of direct manipulation involving multi-touch gestures. Interface control elements present a variety of functions and forms including buttons, sliders, and switches. Gestures taking place in the process of interaction with such type of interface are also various, for instance, swipe, tap, pinch, and reverse pinch; what is more, they all have specific definitions in the context of the iOS operating system. Some iOS applications even use internal accelerometers which can react to the cases of shaking or rotating the device in three dimensions. Another typical feature is portrait and landscape mode switching.

 

From the standpoint of development, Apple gives steady preference to simple and durable things, and this concept is applied to their products, applications, tools and frameworks. It is expected that when an iOS developer builds an app for iPhone, it will run on any other device with the iOS. This aspect of iOS development can save a large amount of time for programmers as writing code, let’s say, for iPhone, the developer uses the same programming language for all Apple’s computing devices. Said otherwise, an application created for iPhone can later be even integrated into Mac.

 

In both UI/UX design and development for iOS, specialists making screens and writing code, apply their flight of creativity in terms of definite rules and guidelines to keep. The apps which don’t keep those guidelines risk failing to submit their app to Apple ecosystem of devices. Working on the digital products intended to be used in iOS, professionals need to know iOS Human Interface Guidelines and always keep and eye on updates and fresh recommendations. The set of guidelines for designers states: «As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you’ll need to meet high expectations for quality and functionality». Actually, the same position works the same way for developers who are offered samples, guidelines and support to find the optimal solutions for user-friendly and effective digital products.

 

ios-developers-tubik-studio

 

 

iOS architecture

 

As it was mentioned before, iOS allows users to interact with their devices and products using gestures such as swiping, tapping and pinching. These finger actions are typically performed on touch screen displays, which provide fast response and accept inputs from multiple fingers.

 

The iOS architecture can be pictured as four abstraction layers that define it:

 

Cocoa Touch. The layer containing a variety of frameworks which define the appearance of the app. It also provides the basic app infrastructure and support for main technologies such as multitasking, touch-based input, push-notifications, and many high-level system services.
Media. The layer with graphics, audio, and video technologies which developers use to implement multimedia experiences in the apps. The technologies in this layer make enable building apps that look and sound excellent.

 

Core Services. The layer that consists of essential system services for apps. Main services are the Core Foundation and Foundation frameworks, which define the basic types that all apps use. It also contains individual technologies to support features such as location, iCloud, social media, networking, etc.

 

Core OS. The layer including services such as the security, local authentication and core Bluetooth frameworks.

 

Apple recommends developers to write code to the highest applicable layer whenever possible, and only use the lower-level frameworks for features not exposed at higher levels.

 

Architecture design patterns

 

In software development, architecture design pattern is the matter of structure. It is not a finished architecture that can be transformed directly into code. Patterns are similar to the case of reliable practices that the developer can use to solve common problems building an application or system.

 

In general terms, architecture pattern in the case of development could be described as a reusable solution that could be repetitively applied to the issues that frequently rise within a particular context of development and engineering interactions. This sort of patterns takes into account various limitations and restrictions including the problems of hardware performance, availability, the environment of use and even particular business goals.

 

Among main architecture design patterns we could mention:

  • MVC (Model–view–controller)
  • MVP (Model–view–presenter)
  • MVVM (Model–view–view-model)
  • VIPER (View-interactor-presenter-entity-routing)

 

First three types of architecture design patterns assume putting the entities of the app into one of 3 categories:
Models – give the controller/ presenter/ view-model the data to populate view.

Views – display content and are populated by the controller/ presenter/ view-model. Each screen of the app is a ‘view’ which includes buttons, text, menus, fields and etc.

Controllers/ Presenters/ View-models – control behavior of the app. Apps are based on event-driven programming, controllers/ presenters/ view-models receive, process and return events.

 

Tubik Studio iOS development

 

To see how it works in practice, let’s take MVC pattern and describe it a bit more in detail. The model-view-controller (MVC) is an architecture design pattern that breaks code down into three parts: user interfaces (views), data (model), and the software that communicates between the two (controller). The building blocks of apps are objects — arrays of code organized with MVC pattern. Each screen of the app is a view: the data model controls the content it displays, and the controller manages communication between the view and the model. The model-view-controller is just one of the architecture design patterns developers use while building the app, still it is popular in development.

 

Xcode

 

Xcode is Apple’s integrated development environment (IDE) and it is the main tool for building iOS apps. iOS developers can work applying either Objective-C or Swift, in fact, using only Xcode. This software only runs on Macs and there are no official ways to launch it on a Windows or Linux PC.

 

Xcode has tons of features for iOS development, among which:

 

Interface Builder. It allows designing and testing user interface without writing a code. Interface Builder helps to prototype and then connect the interface to the source within the Xcode editor.

Source Editor. It is a professional editor with code completion, code folding, syntax highlighting, and messages that display warnings, errors, and other context-sensitive information.

Continuous Integration. It is a feature of OS X Server controlling server-side bots that continuously build, analyze, test, and even archive Xcode projects.

XCTest Framework. It assists in building unit tests that check iPhone, iPad, Apple Watch, Apple TV and Mac apps performance.

iOS Simulator. It allows prototyping and testing app during the development process. This testing tool simulates iOS, watchOS, and tvOS devices before testing the app on an actual device.

 

iOS programming languages

 

Two fundamental programming languages for iOS development are Objective-C and Swift. The benefits and drawbacks of each language were considered in our earlier post.

 

At the moment Objective-C is commonly described as the general-purpose, object-oriented programming language adding Smalltalk-style messaging to the C programming language. Before Swift came into play, Objective-C had been the main programming language used by developers for OS X and iOS operating systems, and their APIs. Swift, introduced at Apple’s 2014 WWDC, brought its own dose of revolution. In general description, Swift is a general-purpose, multi-paradigm, compiled programming language broadening the previous scope of operating systems as it was developed for iOS, OS X, watchOS, tvOS, and Linux. Swift was designed to enable work with Apple’s Cocoa and Cocoa Touch frameworks as well as the large body of Objective-C code already written for Apple products. 

 

Initially Swift was intended to be more resilient and safer than Objective-C, and also more concise and developer-friendly. It was built with the LLVM compiler framework including in Xcode 6 and using the Objective-C runtime library that enables C, Objective-C, C++ and Swift code to run within one program.  Therefore, it enhances broadening professional horizons for developers making their work more efficient. That was the milestone when developers started their discussion of what is better, tradition or innovation.

 

Since 2014, Swift language has been used by Xcode for coding more often than Objective-C. Objective-C is the initial programming language for building OS X and iOS software and in perspective of all the apps coded for iOS, it presents a superset of the C-programming language and provides object-oriented programming and dynamic runtime. Nowadays, Objective-C is a good fit for early iPhone and it is also effectively applicable for maintaining and updating the apps initially created in it. Swift in its turn is newer  and more flexible programming language for Apple devices that has the best features of C and Objective-C, without the constraints of C compatibility. It keeps step with modern hardware being faster in actual process of coding as well as shorter, more secure and easy-to-use. 

 

tubik ios development

 

Read more about the topic in our previous article 

 

Anyway, the choice of the programming language, framework, method, and tool for creating iOS apps should be based on the intention to provide the efficient product to both the client and the final user. 

 

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


Welcome to read the articles by Tubik Studio on web and app development

Welcome to read us on Quora