Development of
Online Avatar Creator

Social networks and other media are now on a high rise. Multi-million deals are found, discussed, and closed in the social networks. That’s why it is very important not only for ordinary individual users but also for businesses to have high-quality identification online, in the Web. One of the most common online identification elements is user avatars. We see them everywhere: on discussion boards, in Facebook comments etc. However, everyone wants to be different, to demonstrate his or her difference by unique avatars.

That was the business idea of our Customer who came to us to order the online avatar creator development. The Customer wanted to create an online avatar maker that would allow all types of users - businesses and individuals - to enjoy professionally handcrafted user avatars to enhance their online presence.

DIGIS has agreed to help our Customer start an online avatar creator and performed all steps of needed to build an avatar creator online.

Our goal was to provide the Customer a powerful tool that can serve as a cartoon avatar maker, a full body cartoon avatar creator, and a realistic character creator.

The task was really challenging, since it was absolutely necessary to make the constructor work extremely fast, all the transitions nearly instantaneous and process large amounts of media data (avatars collections, pics) at the same time.

For the implementation, DIGIS used Canvas HTML5 element. Canvas is a very trendy tool and allows drawing awesome designs and images. But the problem is that native Canvas API is extremely low-level what makes drawing complicated figures or shapes quite difficult. That’s why we decided to utilize Fabric.js JavaScript library. It allows placing an object model over Canvas’ low-level methods and work directly with objects.

As for a tool to display the drawn objects, we used OwlCarousel2. It is a great JQuery plugin supporting CSS styles and JS scripts without loading the code with extreme amount of unneeded lines.

Undoubtedly, we went beyond the standard with backend development, providing crazy optimizations and speeding the server performance.

If you decide to go with cartoon avatar creator building, you need to think about Avatar Collections. They are a must if you want to store avatars.

In order to achieve efficient storage space usage, DIGIS picked up SVG format for the Kartunix engine. SVG format ensures superb quality and scalability of the graphics combined with the lowest possible requirements to the storage space.

In addition to that, SVG supports layers and that, in its turn, allows users to personalize their avatars by customizing hairstyles, nose & mouth shape, eye color etc.

As for the storage tool itself and its management, DIGIS chose MongoDB. MongoDB is extremely efficient in storing and managing such non-typical data as user avatars - they can be images of humans, aliens, and animals. MongoDB is also very flexible and allows for an easy configuration of the data sets without delays in their further fetching.

All these solutions enabled unprecedented speed of data trees processing with use of polished mathematical algorithms.

If you want to develop a cartoon avatar creator or build a cartoon online avatar creator today, you have to consider that people now use mostly mobile devices - phones/tablets - to browse the Internet. So you need to build your cartoon avatar image creator so as to allow its perfect look and work on mobile devices.

The situation is even more complicated as you also need to ensure your solution shows photos, profile pictures and other imagery properly on laptops and desktops as well.

This challenge can be countered by using the Responsive Design Approach. This approach allows satisfying web design requirements not only for existing displays but also laying the groundwork for the future, when some new data and graphic display formats and tools may pop up.

DIGIS implemented Responsive Design patterns in Kartunix project to build a framework for content to be viewed on any platform - mobile, desktop, tablet, gaming console etc. Responsive Design allows streamlined menus that simplify user interaction and ensures perfect user experience.

In addition to focusing on user experience and satisfaction, Responsive Design is perfect for monetization of the software - be in a standalone desktop or Web-based application - as it ensures great designing of the advertisement banners and other elements.