Duration: 2 weeks
Tools: Figma, Affinity Designer2, HTML, CSS, JavaScript
Thankfully, many people like my illustration style (which I appreciate). Some of them often ask me to draw them. However, I frequently find that people don’t like it when I draw their portraits. “Do I look like this?” I was tired of this question.
Therefore, I decided to make people create their own avatars with my illustration style. This project started from this idea.
At first, the option select section was on the left side of the screen. But since right-handed users are more than left-handed, I decided to display it on the right side of the screen.
Also, a drop-down menu is changed to text buttons due to my limited development skill. The save icon button is removed in the final product because of the same reason.
To get user feedback, I added a contact popup. I am aware that providing a whole contact form with advanced text fields would encourage users to give more feedback. However, due to my lack of coding skills, I couldn’t create this feature.
In this project, making an actual working product was the priority. So I had to give up on some UX improvements here. I want to fix those problems and develop this project further in the future.
For the illustrations, I used Affinity Designer2. As a person who can’t stand for Adobe’s monthly fee, Affinity is the best alternative option. They provide most of the features that Adobe Illustrations has. Most importantly, they don’t charge you monthly.
I also made it responsive. In a tablet/mobile environment, the option select section is displayed at the bottom of the screen.
The coding was a pretty tough journey. As I mentioned, my coding skills are limited since I’m not a developer. I created an option select feature by adding a class and changing its display. Of course, my js code became super long.
To change the hair color, I added a class with a filter property. I used css-color-filter-generator(https://angel-rs.github.io/css-color-filter-generator/) to make the closest colors.
I wonder how developers will react to my code(I honestly just want to terrify them).
This is the final look of the project.
Some people sent me their avatars that they made using the website. It was good to see people actually use my product & enjoy it.
Yunyeong Kim
Email: yunyeong305@gmail.com
LinkedIn: https://www.linkedin.com/in/yunyeongkim0305
Portfolio: https://www.behance.net/yunyeong3026b1
