Creating Ukraine25 FREE Avatar Generator

Being a social active company, Mobilunity always did something special on different occasions. The one who hardly expected such activity from companies could see that Mobilunity truly loves its customers either current or potential ones – the company prepared a number of videos with its employees sharing their greetings with people from other countries on their national holidays.

Going even further, the idea appeared how to make this even more entertaining and fun – to make an avatar app. Creating custom avatars is rather popular nowadays and there are plenty of so-called avatar websites that allow you to upload your photo and apply some custom elements like hats, mustache, crown or mask end so on. In the end, after tweaking the size and position of custom elements on your photo, one downloads the ready avatar for sharing or uploading to other websites.

Mobilunity wanted digital avatar maker to become a nice way of celebrating a national holiday by showing your identity and pride of belonging to one’s own nation. The pilot project was targeted at Ukraine’s Independence anniversary – 25 years of Ukraine’s independence. The team wanted to create a free avatar generator that would be available to everyone either living in Ukraine and feeling patriots of their country or those Ukrainians living abroad as well as representatives of other nations wishing to try the Ukrainian elements in their own image.

Create Free Avatar Generator for Your Country

Team of Ukraine25 development project

The web app to be created was intended to be available to those browsing Internet from their laptop and mobile devices regardless of the platform they use, therefore avatar web design should have been made responsive to look perfect on any device being used.

Besides the ability to upload user photos and apply design elements to them, the Ukraine25 avatar generator was supposed to be available in Ukrainian and English languages and allow sharing the generated avatars with friends through social networks.

The Development of Avatar Website

The timeframe for creating the digital avatar creator was pretty tough, and the team must have stayed within the tight budget. Having huge expertise in different technologies and taking into account the requirements of the project, WordPress-powered website was identified as the ideal option for the free avatar generator app.

Digital Avatar Creator for Ukrainians

Example of creating avatars with the help of Ukraine25 avatar generator

Simultaneously with the start of development, our web designers were quite busy creating custom graphic elements that users then applied to their photos in the Ukraine25 digital avatar maker. We wanted our app to be unique, so these graphic elements should have been created by us rather than used from other sources available on the market. The simple, but attractive design for the avatar generator website was created taking deep blue, the Mobilunity corporate color, as the main website color.

WordPress itself does not allow to make an avatar app without applying additional technologies. Our team used a number of WordPress plugins to allow social sharing, content localization, and the main functionality, which is what the app was built for – creating custom avatars. In particular, to achieve this goal, the team used Fabric.js, a JavaScript Canvas library, that enabled us to convert the uploaded photos to a HTML5 Canvas required as a container for graphics drawn using JavaScript.

Canvas runs on any device and this is what the team wanted to achieve – make the app that any user can use regardless of the device he uses the digital avatar maker on. With Canvas in conjunction with HTML5, Ukraine25 avatar generator app became an easy-to-use web app with a simple and nice-looking interface.

The Issues Solving While Development of Digital Avatar Creator

Every project completed by the team can “boast” with a set of difficulties that the team had to overcome and “surprises” that different technologies brought during the implementation. The digital avatar creator Ukraine25 was not an exclusion from this rule. There were multiple major issues that the team had to find the key to resolve. Here is the brief list of major issues that we encountered and solutions that we found to make this avatar generator app a success.

Saving Images on a Server of FREE Avatar Generator

When working with uploaded graphics, the issue with them is not saved on a server is a usual one. The Ukraine25 project team also faced an issue with images that a user uploads is not saved. To overcome this, the team applied the following approach: Canvas was used to generate images in base64 format, after that images are decoded and saved to the server in the png format.

Facebook Sharing

Having prepared the avatar, we found out that we could not publish it on Facebook prior to moderation. We discovered that Facebook uses the open graph tags, which acquire content when a page is loaded. That is why, as a solution, we decided to first save images on a server and load them only on the publication to Facebook step.

Mobile Makeup Issues

When dealing with Canvas, a relatively new technology for the team, we faced an issue that it is generated in absolute sizes only and does not provide the possibility to specify relative sizes in percent. To resolve this issue, which is quite important for proper displaying images on mobile devices that all have different screen sizes, the team tweaked canvas through applying different effects to make it universal for display on mobile devices screens.

Generating Canvas on iOS Devices

To have the ability to edit the photo by applying the avatar web design effects (filters and stickers) to it, Canvas should first be generated. However, as it turned out, everything is not simple as it was considered to be on iOS devices. The team faced the issue that after uploading a photo on iOS devices, it did not show up, and thus the Canvas was not generated. The team did not find an easy and evident solution that was ready to be applied. However, having spent some time brainstorming, our developers resolved this issue, which otherwise would be a killer for avatar generator on iOS devices.

Summary

Ukraine25 has become the first experience of creating avatar website for the Mobilunity team. The project showed that the team is capable of managing major technological issues within the tight timeframe that otherwise would prevent the app to appear. As a result, Mobilunity made an avatar app that was a fun way to celebrate 25 years of Ukraine’s Independence. The Ukraine25 avatar generator provided all of us, living in Ukraine or abroad, considering ourselves Ukrainians or just willing to stand together with us, with nice Ukrainian-style avatars that everyone could experiment with and then share on Facebook with their friends.

Hire dev team for a digital avatar maker development

With the birth of the Ukraine25 free avatar generator, the team gained precious experience working with Canvas.js, creating a unique avatar web design, resolving unexpected issues that showed up during the project run, though were not evident from the very beginning.

We now can proudly say that if you have some ideas that require involving Canvas.js, we are ready to help you with their implementation as we know the best way of how to do it. Mobilunity is always ready to take your project idea and transform it into a product for you either it be a digital avatar creator like Ukraine25  or another product built using this technology. Also, we are now offering our highly qualified team of programmers for hiring. If you already have a team and miss some of the specialists who can make an avatar app or provide avatar web design for your web app, we are ready to provide remote dedicated developers for hire.

So make sure you visit our website often to know more about the products created by the Mobilunity team!

Hire Mobilunity development team to create an interactive avatar website built with Fabric.js and HTML 5 Canvas!

All salaries and prices mentioned within the article are approximate NET numbers based on the research done by our in-house Recruitment Team. Please use these numbers as a guide for comparison purposes only and feel free to use the contact form to inquire on the specific cost of the talent according to your vacancy requirements and chosen model of engagement.

Contact us
Go Up