Tag Archives: developers

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

 

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

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 design

The Ultimate Guide to Creating a Mobile Application

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

 

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

 

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

 

— setting the task and initial scope of works

— estimation

— user/market research

— UX wireframing

— prototyping

— UI design

— animation

— software architecture planning

— iOS development

— testing

— release

— updates.

 

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

 

tubikstudio app ui design

 

Setting the task and initial scope of works

 

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

 

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

 

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

 

tubik studio clients service

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

 

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

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

 

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

 

Estimation

 

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

 

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

 

Design Studio Tubik

 

User/market research

 

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

 

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

 

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

 

tubik studio UI designers

 

UX Wireframing

 

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

 

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

 

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

 

tubik studio design process ux

 

Prototyping

 

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the 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.

 

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

 

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

 

The prototypes on UI stage can be created for 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 will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solution after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

 

invision prototyping tool tubikstudio review

 

UI (User Interface) Design

 

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

 

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

 

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

 

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

 

Tubik Studio

 

Animation

 

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

 

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

 

tubikstudio ui design

 

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

 

Software architecture planning

 

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

 

iOS development

 

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

 

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

 

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

 

ios development glossary

 

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

 

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

 

ios development tubik swift objective-c

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

 

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

 

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

 

web development

 

Testing

 

“Quality is never an accident; it is always the result of high intention, sincere effort, intelligent direction and skillful execution; it represents the wise choice of many alternatives”, William A. Foster once said and it’s definitely true when it comes to a digital product testing.

 

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

 

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

 

mobile app testing

 

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

 

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

 

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

 

tubik studio developers testing
Here are some types of testing applied in the process of mobile app creation:
Functional testing. It is the most basic test for any application to ensure that it is working according to the defined requirements and there are no functions missed in the process of interaction.

 

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

 

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

 

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

 

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

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

 

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

 

Submitting / Release

 

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

 

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


 

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