BACK
BACK
BACK
Loading...

Blog / We Do /  Creating Ukraine25 FREE Avatar Generator

March 28, 2017 - Marina D

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. At 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 the 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 a huge expertise in different technologies and taking into account the requirements to 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 easy-to-use web app with 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 being not saved on a server is a usual one. The Ukraine25 project team also faced an issue with images that a user uploads being 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 percents. 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 of editing the photo through 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 the 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!

Request a quote

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Contact us Request a Quote

Your email address will not be published.

Required fields are marked *

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

subscribe to newsletter

Your email address will not be published.

Required fields are marked *

Ask a Question

Your email address will not be published.

Required fields are marked *

Sorry, this page isn't quite ready yet

redirecting to the old site

5

Mobilunity

cannot account for customer alterations, as the site may reflect changes made after the project was completed.

5