Mix & Match Prototype


This weeks assignment was about designing an interface that allows the user to combine image layers in different ways and producing artworks. I’ve builded an interactive tool that you play with the layers like changing the clothes, hair etc. of a character. I’ve inspired from the paper dolls. Paper dolls are figures cut out of paper or thin card, with separate clothes, also made of paper, that are usually held onto the dolls by paper folding tabs. I remember them from my early ages they were appeared in magazines and newspapers.

gif4.gif

I’ve created my asset folder with the png images I’ve created in Photoshop and illustrator. I didn’t pay too much attention to detail on my doll, basic idea was to make it fun. I wanted to use real textures on the clothes. I want to add more assets and features in the future to this project.

This app is coded in HTML/CSS and Javascript. You can reach the code from the link;

CODE

gif3.gif
Screen Shot 2020-10-04 at 11.06.32 AM.png

PROCESS

Adobe Illustrator

Adobe Illustrator

CodeSandBox

CodeSandBox