Our Blog

Nuestro equipo de especialistas quiso compartir algunos artículos sobre tecnologías, servicios, tendencias y novedades de nuestra industria en la era de la transformación digital.

Tools to make an Interactive Prototype

Tools to make an Interactive Prototype

The creative process to design an efficient interface and user experience is crucial in a Mobile Application Development project, since important variables depend on it, such as the adoption rate of end-users, as well as the general satisfaction index.

For this reason, software development companies place a lot of emphasis on optimizing the design and approval process, validating all proposals before starting the development phase, which is the one that consumes the most resources; resorting then to the use of tools such as the Interactive Prototype.

Today, there are many tools that provide the opportunity to review all phases of a project, stimulate feedback among team members, and not least: it gives us a fairly clear idea of what the project experience will be like. user.
Taking into account the importance of this phase in a development project, we have compiled the best tools to make an interactive prototype:

Flinto
It is an application produced for MacOS, widely recognized and used by the most demanding designers to create interactive and animated prototypes in software development. Among its main functionalities, we could name the following:

  • Animated transitions:Flinto has an excellent transition designer that allows you to create your own animated transitions in a very simple way. You do not need to schedule, or schedule, the transition designer is quite intuitive, you just have to place any element where you want and it will be ready.
  • Various behaviors: With the behavior designer you can create micro-interactions within the screens, a perfect function if you want to add loop animations, buttons, scrolling animations or switches.
  • Scrolling feature: You can add scrollable areas with just one click and also create amazing animations based on the scrolling found in the behavior designer.
  • Drawing Resources: excellent drawing tools that will allow you to design simple models to your liking or edit texts and shapes inserted from Sketch. You can even make animations of vector curves.

Learn more about Flinto on their website.

JustInMind:
It is a fairly intuitive and dynamic tool for creating prototypes “all in one” recommended for applications and web pages, with it you can review from wireframes to highly interactive prototypes.
JustInMind will allow you to start a project from the beginning, for example, go from clickable wireframes to 100% interactive prototypes in order to have a very broad idea of mobile gestures, online interactions, making the UX / UI work easier. Among its main functionalities are:

  • Efficient design: with this tool you can choose the size, style and distribution of all kinds of elements in the user interface in order to adjust it to the appearance of your screens.
  • Online interactions: You have the possibility to design web experiences through a wide catalog of interactions and animations, ranging from simple links to increasingly complex interactions.
  • Infinity of mobile gestures: You can choose from a wide variety of gestures that will allow you to slide, move, touch, rotate and even pinch the prototype of your mobile application.
  • Liquid design: defines liquid containers thanks to which the elements of a page will be able to adapt without problems to the different screen sizes, aspect ratios and orientations.
  • Automatic size adjustment: It will allow you to instinctively change the size of the groups of elements on each page, saving multiple changes in the software design and giving a real space for creation.
  • Featured Object Attachment: This feature enables object retention in containers or displays, a feature that combined with free movement provides more responsive experiences.

Want to know more about JustInMind? Check their official site.

InVision
This tool gives you the facility to share and comment on a project live with the client, making it an excellent strategy to manage and streamline times and processes.
You can also manage the versions of your projects by synchronizing Illustrator or Photoshop with the app, preventing you from getting lost in a maze of folders and layers of various files. Some of its features include:

  • Presence of click and over-click: You can choose between click or scroll access points to indicate what are the user flows in the prototype.
  • Access points to other windows: InVision enables you to configure links that link to other screens in your prototype, external URL style, anchor points, quick access and more.
  • Template design: thinking about those recurring elements such as menus, this function enables you to configure templates with access points for this type of need and apply them globally to the prototype through a click.
  • Gesture Inclusion and Transitions: Gestures like double tap and swipe can be added to show interactions in the prototype and enhance the user experience in real life.
  • Various interactions and animations: Introduce animations such as pulling down or to the right to reveal the interaction capacity of your prototype.

Check Invision website to know more about their tool.

Are you not clear about the benefits of making an Interactive Prototype? We let you know in our blog post “Benefits of making an interactive prototype“.
Fluid UI
Ideas can be prototyped in no time thanks to Fluid UI, and not only that, it is possible to share, collaborate and feed back with the opinion of your team, recommended for small applications.
Design the layout of the primary views of your app linking each view to controls that connect with others, giving way to a more interactive, dynamic and representative demonstration of the final result. Its main characteristics are:

  • Effective prototyping: it has a fairly complete and pre-built user interface kit to design materials, Wireframing, iOS, among others.
  • Collaboration in real time: provides the possibility for the entire team to work simultaneously on the same prototype.
  • Dynamic previews: Adding interactions to your prototype will be more fun, efficient and productive thanks to the visual linking function.
  • High and low fidelity: Fluid UI is compatible with any style you require, regardless of whether it is a high or low fidelity prototype.
  • Access from any device: it is possible to access the prototypes in the desktop app or by logging on to the Internet, without any problem.
  • Mobile testing available: With Fluid UI you can test your prototypes on various mobile devices, such as phones or tablets, through free playback apps.

For more information about Fluid UI, visit their website: https://www.fluidui.com/

Proto.io:
Perhaps its most outstanding feature is the inclusion of an engine that allows you to create animations for mobile applications through a timeline that will determine how long the animation will last. Other of its functionalities are:

  • Easy drag and drop action: Special for moving files from the desktop directly to the panel for quick loading, making it easier for you to find all your assets.
  • Masking Tool: Mask, crop, frame or create animations without leaving the Proto.io editor.
  • Various animations available: They include scale, move, rotate, resize and fade and can be applied to any element.
  • Actions: With an extensive series of actions, you can navigate, use logic, control emails, GIFs, audios, videos, switch screens, make a call, visit a URL and more.
  • Export as HTML: Ideal for previewing and storing the project even offline, as well as for downloading all Javascript, CCS, and HTML files plus all project assets.

At https://proto.io/ you will have the opportunity to know all the details of this tool.

Summary
The good user experience is becoming an end rather than a means thanks to the weight it has on companies achieving their business objectives.
A satisfied user is not only more likely to use our application more, increasing the possibilities of monetization, but also tends to recommend it more, allowing more users to be reached without investing so many resources in marketing and recommendation.
If you want to know more about our development services, we invite you to visit our Mobile Development page.

Benefits of Interactive Prototyping

Benefits of Interactive Prototyping

A good design must be built on a stable and correct foundation, therefore, the first steps in the design process are decisive for obtaining good results. When we refer to the prototyping phase, it is made up of several stages where many are usually little representative sketches of the final result.

The idea behind this type of sketches is to distribute, point and indicate the content that the design will carry. Instead, other representations can be an almost exact sample of what the design will be, especially visually.

However, when it comes to app designs, for example, which can be perfectly extrapolated to web design, it must be taken into account that everything that the user is going to interact with is being designed; therefore, the static prototype will fall short when it comes to showing how the user is going to relate to it and what their experience will be like, regardless of whether this prototype represents the final result very well.

This makes it clear that the user experience is one of the most important bases for development since it depends on how much end-users will be able to adapt to the proposed design. The prototypes then serve as a preview of what the interaction with the app will be like, this is the importance of the prototype during the design and development phases.

What is a prototype?
It’s a superficial working model of the application. It provides quite useful information about the scope, needs, and expectations associated with the development of apps and web pages. It is considered a preliminary interactive sample of the idea before it becomes a complete product, which functions as a bridge between the design phase and the final product.
Prototyping applications is a must in the application development process, as it provides insight into the features and flow that will be incorporated into it, as well as giving a general idea of what end users can expect.

Types of prototyping

Low fidelity prototypes

It is known as the simplest type of prototype that is based on broad concepts of the final product developed. The level of detail and realism is low; Its main objective is to test and validate the design from the beginning of development. Low-fidelity prototypes are quicker to create, represented as very basic hand-drawn diagrams, and show how design flows from one stage to another.

Medium-fidelity prototypes

Significantly greater detail and interactions are added to this prototype class and are capable of usability testing. In addition, they have areas that provide a navigation guide to users within the application and provide prior information about their experience. Each action built into the app has an associated basic visual design, which can validate other interactions within the prototype.

High Fidelity Prototypes

These have the highest level of design and functionality built into the product prototype, making them much closer to the final product. Although high-fidelity prototyping is accomplished after a time-consuming process, its benefits are more than valuable. For example, most are used to identify errors during usability testing and to discover problems in the workflow.

Incorporating design elements and components give high-fidelity prototypes the appearance of the final product and enable very realistic interactions with the user. They are fully interactive, even clickable, making it one step closer to client and investor validation.

Main benefits of the interactive prototype

Brings user interface design to life

While end users can view and comment on the paper version of an application, they will not fully understand the nature of key interactions until the application is developed. Creating a clickable prototype is the most logical step in design where what is being developed really comes to life.

It enables users to provide valuable feedback in the proper context

By using a prototype, all scenarios are revealed in a way that users can truly appreciate. Since users see the appearance of an application that is working, their comments will be almost as valuable as having a fully functional application.

Helps reduce overall development time

Carrying out multiple changes to a prototype is much simpler and allows for timely user feedback while keeping the focus on site or application coding. All this instead of worrying about going back in stages of the process due to pre-production or post-production usability issues.

It works as a useful reference tool for developers

Prototypes can be used to illustrate functionality in a way that displays specs cannot. For example, if developers need to understand how a specific widget or control will work, they can use the prototype to answer functionality questions.

Some recommended tools

  • Relative Wave has an interactive prototyping tool called Form, which has a fairly active community.
  • Pixate is another interactive prototyping tool that is usually quite professional. With a complete tool, Pixate Studio makes it possible to make prototypes in an easy and fast way and similar to other design suites such as Photoshop or Flash.
  • Facebook has an interactive prototyping tool called Origami, and also a quite communicative community as expected on this social network.
  • Invision is probably the best-known interactive prototyping tool and also the most “corporate” of all. Anyone in the project can leave specific comments and discussions at each location, and even allow collaboration in real time.
  • Framer is a Javascript framework for developing interactive hi-fi prototypes. It is a very complete tool and with many features that are worth considering.

Summary
Sometimes, when interactive prototypes are not developed as part of the process, design changes can negatively impact code.

At Huenei we understand that recoding an application in the development phase not only takes more time, effort and money, it can also affect the development schedule.

That is why we include the development of the prototype as a fundamental part of the process, which guarantees a successful development, with fewer errors and successful results.

If you want to know more about our development processes, we invite you to visit our Mobile Development section.

Advantages of React for building apps

Advantages of React for building apps

Faced with an increasingly competitive market, making updates and improvements has become a necessity for a large number of companies and companies. These improvements should not only be made quickly, they should also be focused on user experience, usability and information security, where their compatibility with other platforms is also checked.

Above all the CTOs and CIOS of mass-use companies such as e-commerces need to develop various applications in order to meet the needs of different market sectors, which in turn are compatible for different devices. Therefore, one of the main advantages of React Native lies in its usability in various platforms and mobile operating systems.
Is your app getting heavy for so many features? We invite you to read our entry “Do I need Microservices for my App?”, where we discuss how they can help keep it fast and smooth.

React is literally making all these processes much more efficient. This framework reduces the effort made by the work teams in half the time, as it offers the possibility of managing everything from this platform.

What is React Native? Why choose it?
React Native is one of the best open source systems designed for mobile application development. He uses Javascript to write mobile multiplatform applications designed for iOS and Android, based on declarative elements to create a mobile user interface.

Javascript is the most widely used programming language in the world, so React Native is perfect for beginners who need to learn faster and can develop applications without the need to include a new language.
For this framework there is only one native code, thanks to this it will be possible to develop various functionalities and innovations in innumerable types of projects. React Native is recognized for being the OpenSource of many developers, it means a point in favor of using this platform.

By choosing this framework you will have access to any feature that your project requires, in addition you will have the support of a large community that can provide you with a safe guide preventing your projects from being incomplete.

Main advantages of React Native

It can be developed on multiple platforms at the same time
At the time of developing an application, there are at least two OS options that can be chosen: iOS or Android for which it is necessary to learn Objective-C and Swift or Java and Kotlin respectively. Therefore, if your projects are based on developing an app for iOS or Android with React Native, all processes will be much more efficient.
Using Objective-C, Swift or Java it would be necessary to develop two separate applications from each other. With React Native more than 90% of the base code can be shared, which greatly reduces the time to market while maintaining the same quality standards.

It is especially favorable for front developers accustomed to React, since React Native uses the same components to create a mobile interface for users. Therefore, those who have developed mobile applications with React, find in React Native an easy to understand counterpart, also based on a Javascript framework.

It has the largest user community
Since it is the most recognized OpenSource, it is natural that many developers have access to all its features so you can count on the advice and guidance of this great community. In addition, React Native has native APIs ready for use, as well as many of the APIs that have been developed by the community itself.

Many users in communities like GitHub React or Chat Reactiflux offer their codes for free to use or modify according to your needs. Thanks to these codes, new solutions have been created, maximized efficiency during the development of a PPP or proposed new quality standards.

Perfect for mobile devices
React Native has an intuitive and modular interface that allows developers to learn more about someone else’s project and continue working on it if they wish. For development teams, this feature is one of its main advantages and the one that facilitates the process of creating updates for applications.

We invite you to read our blog post “React Native vs Flutter: A Battle of Giants“, where we compare both frameworks.

No problem if you want to use the native code
Using native codes such as Swift, Java or Objective-C combined with the React Native language, as well as creating complete applications in this framework will always be the developer’s decision, taking into account your preferences and the results you expect to obtain.

The idea of combining React Native with other programming languages can be beneficial when the developer must add third-party services to their application that may not be in their mother tongue. React Native allows you to use a programming technique known as “bridge” to make this possible.

It has very good references from large companies
Uber Eats, Facebook, AirBnB and even Instagram trusted React Native to achieve amazing results as we know. The large volume of users who visit these applications continuously was the key to be shown that React Native provides the best performance, maintenance and scalability so necessary for a good application.

All these applications are the example of how to implement this framework successfully. Therefore, if you want to create an application capable of receiving a very wide audience, this framework is an excellent option.

You can update the apps you are developing in real time
Updating changes in real time is another of the great advantages of this framework. Thanks to this feature it is possible to add innovative functions as well as correct errors in record time. For example: if you are developing a project and want to see the changes made immediately, you can keep two windows open. One that contains the code and another that shows the changes, in this way the development process becomes more agile and efficient.

It represents a significant saving in time and money
React Native allows you to use the same code in different OS, which translates into tremendous savings in development time and production cost. With this framework, development time has been reduced to more than half. And although the cost savings are not as significant, it can be convenient enough, depending on the investment you are making.

Conclusion
In the IT world there is an uncountable number of technologies, frameworks, methodologies, etc. Each has its own advantage and specific use, based on the specific needs of the business; Being React is just one more framework of this universe, and although it is highly effective, it will depend on the nature of the project what technology to use.

If you want to know what is most convenient for your project, we invite you to learn more in our Mobile Development section. You can also Send us a Message and an expert will contact you shortly.

Our app needs Microservices?

Our app needs Microservices?

When we start creating an application, we usually select a single programming language and a single database manager, this is how we manage to develop a single back-end application. However, when the application we have developed is reaching many more users, we also need a greater number of resources and we will need to annex much more functionality.

This functionality needs to be maintained and it is right at this point where the application becomes more complex, because it is growing in both code and functionality, so it is very likely that we have to divide our application to manage it in a much more efficient.

It is there where the microservices alternative arises as a way to be able to section an application of the backend into different parts that will be communicated separately. In this way, each of these parts can communicate with each other and have a specific function and each one can evolve independently of the others, without interrupting.

What are microservices?
They are a type of architecture that serves to design applications by breaking down their main functions into independent services, which ideally will work separately (and also, will fail separately) without affecting others.
It should be noted that this architecture is one of the most recommended for large applications, because it is also possible to develop them in different programming languages, even in different databases. This is one of the ways in which you can create a giant application and manage to manage its complexity with all success.

What are microservices for? Do I need microservices for my App?
Microservices are used for software development that require a high level of scalability and availability, agile development and that are also easy to maintain, in other words, they are often used for applications that are really large.

This microservice architecture is perfect for these huge applications and is especially aimed at those that are already functioning and that need a better way to manage to continue growing, because they are generating a greater mass of users than in turn, They generate a larger volume of data. An example of the so-called huge applications can be Amazon, Ebay, Netflix, Uber, among others.

To find out if your app will need microservices, simply consider if it is beginning to expand, if it begins to have high requirements for scalability, portability, flexibility and availability. But if you’re just starting with an application, it’s probably best for you to apply a monolithic architecture to your project.

Main advantages

  • With the growth of the application, the complexity of its management does not become more difficult as it happens with a monolithic architecture where as the application expands, the number of lines also grows, the documentation becomes increasingly complicated and seems impossible make complex modifications; In addition, the inconvenience arises that new developers cannot start working on the project. All these issues that used to be a problem with microservices have been perfectly resolved.
  • It is possible to maintain development teams that work together on the same project without any difficulty. For example, you can have microservices developed in javascript using mongoDb with a specialized team for it, but it is also possible to have another microservice developed by a Java team that uses MySQL or Oracle as a database, without problems to join your work and make it work within the same application.
  • It greatly favors the reuse of code of which many can be products already packaged for use or can be their own developments that can also be used for different applications within the same company.
  • The reduction of time to market is another advantage. Thanks to microservices, it is much faster to develop functionalities that reach the customer or the end user faster.
  • The microservices support the evolution of the project in a simpler way, since it is easier to make isolated modifications because in the end each microservice has a functionality documented and normally exposed with an Api, so it is quite easy to make modifications to a small component to refactor it or to optimize it, unlike a monolithic architecture.
  • In addition, microservices allow much more efficient scalability, enables the developer to install only part of the application. For example, if it is believed that an ecommerce will receive a large number of calls, it will only be necessary to scale the front-end part and the back-end part can be left without scaling, not counting that there are a lot of solutions for scalability and the high availability of any application using microservices.

Some disadvantages

  • Difficulty organizing work at the beginning in mobile development teams: In small applications it can be much easier to develop a monolithic architecture than a microservice architecture, where it will be more complicated to lift it and much more complex to manage it.
  • It requires complex integration tests.
  • Greater complexity to achieve efficiency in software development teams: naturally, having microservices, new needs arise, for example, having a wide variety of services will require a “orchestrator”, specialized software that already has the configuration of all the application, where at any time you can press a button and the software will lift all microservices and configure them to run all at the same pace.
  • Another of the needs that arise when having microservices is a registration and discovery service, especially if your application has scalability and elasticity properties, that is, at any time you may need what service to scale according to demand or when developers do so. require.
  • Centralized log registers to integrate all the elements: a central configuration service is necessary so that it is not necessary to configure service by service, but a centralized service can be provided so that when a particular service is lifted, this register is arranged to look for the configuration that corresponds to it.
  • If you have a large number of services, integrating and managing them can be very complex: in this sense, communication in microservice architectures is much more complex since synchronous and asynchronous communication is available.

Summary
As human knowledge about software progresses, many technology companies find increasingly ingenious and creative ways to increase the quality and efficiency of the end result, thus making it possible for the end user to obtain a quality product.

The issue to consider is that consumers and users become increasingly demanding and demand superior products, forming a virtuous circle that is difficult to keep up with.

To learn more about how we can optimize your mobile application, visit our Mobility section.

Do I need a progressive web application?

Do I need a progressive web application?

Progressive web apps is a term that is given to a new generation of applications that increase its functionality, as the capabilities of the device on which they run, increase, hence the word progressive. The next part of the web name refers to that they are built using web development standards, some already known as HTML, CSS, and JavaScript; and a new generation of JavaScript APIs. The final app part is because Progressive Web Apps behave like native web applications, but use web technologies.

What makes a web application, a Progressive Web App?
In very simplistic terms, they are web pages that behave like native applications. It is a very simple prayer, but also very deep. Native apps (iOS, Android for example) have historically had a number of advantages over web pages, like which ones? Local storage, run offline, push notifications, performance, hardware access, access to device home screen, among others.

Progressive web applications are halfway between the previous two: they are basically web pages, but by using Service Workers and other technologies they behave more like normal applications than web applications.
Through Service Workers and other technologies, progressive web applications can continue to run in the background without having to live within the browser. In the mobile, it is possible to install them as another application and also in Windows through the mediation of Google Chrome and Mozilla Firefox. Windows 10 will add support for progressive web applications in the Microsoft Store in the next big update.

Main advantages
A PWA is like a responsive website but:

  • It has a native application interface.
  • It works independently of the internet connection.
  • Send push notifications.
  • It is updated automatically.
  • It is installable.

A PWA is like a mobile application but:

  • It can be found through any search engine.
  • It can be shared through a URL.
  • It is distributed via the web (avoiding the mess of the app stores).

Some disadvantages
What are its disadvantages compared to a native mobile application?
They have limited performance and consume more battery since the native code (Swift, Objective C or Java) is faster than the web code (since it is interpreted instead of compiled).

A PWA cannot access all device-specific functionalities such as communication between applications, access to contacts or advanced camera functionalities.

Summary
Progressive web applications are a natural evolution of web applications that blur the barrier between the web and applications, being able to perform tasks that generally only native applications could perform. Some examples are notifications, operation without an Internet connection or the possibility of trying a lighter version before downloading a real native application.

Flutter vs React Native: a battle of giants

Flutter vs React Native: a battle of giants

Many designers and application programmers are in a real debate.
In one hand, we have a React Native, a platform developed by Facebook, the first to go to market; On the other there is Flutter, developed by Google and who has won a significant number of followers in the past two years.

We know that many beginners, experts and leaders in the technology sector have their doubts about which platform will be the reference in the market, we present this comparison.

Flutter

In simple words, it is a mobile app SDK that is open-source and allows the software developer to write an application with a single codebase and compile on both IOS and Android platforms. The main agenda is to deliver high-performance apps that work seamlessly on every platform.

Flutter 1.0 has been launched in December 2018.
Pros

  • Customized user-experience
  • Highly creative and productive
  • Create native mobile apps with a single codebase for Android and IOS
  • Continues debugging from where the apps left off lastly
  • No compatibility issues with different OS versions

Cons

  • Dart is a new language in the market
  • Lack of user support under software testing and limited libraries to be accessed by the app developers
  • Does not cover web apps
  • It does not involve Continuous Integration under the Flutter development

React Native

Is a JS Framework that assists the developers to write real and natively rendering mobile applications for the IOS and Android platforms. Its basis is React that involves Facebook’s JavaScript library. This helps in building user-interfaces that targets the mobile platforms instead of the browsers. It supports the developers in creating the React App by using the JSX platform that is an extension to JavaScript and an ES6 based syntax.

Pros

  • Building the Cross-platform mobile apps.
  • Time-saver and affordable.
  • Its mobile apps can be built using Web technology.
  • The software development company can use the native control and modules to improve the performance.
  • Accelerates and speeds up the development process.
  • As the code is reusable, so it is cost-effective too.

Cons

  • It’s still under improvement stage.
  • It just has a small collection of the ready-made components.
  • It uses JS library, so developers need to place a close watch on the malicious codes.

Comparison Between Flutter and React Native

  • Programming Languages Used: Flutter uses Dart as the programming language whereas React Native uses JavaScript and React.
  • Creators and Launch Date: Google developed Flutter in Jan 2015 (1.0 in December 2018), and Facebook developed React Native in May 2017.
  • Adoption by the Community: React Native has big community followers, whereas the community members are slowly adopting Flutter.
  • Components Library: The Flutter platform has a smaller library, whereas the library component of the React Native is broad and inclusive.
  • Adaptation of the Components: In Flutter, the components are not adaptive but have to be configured manually. In React Native, the components are adaptive automatically.
  • Hot Reloading: Both Flutter and React Native supports the hot reloading. You can write the code, save it, and the platform will automatically display it.
  • Architecture: The main architecture of Flutter is BLoC, and that of React Native is Redux.

Summary

In general, both technologies involve an agile software development process and have their benefits. If you are not sure what technology to use for your project, we recommend you visit our Services – Mobile Development section to provide the advice you need.