Boo!
A slightly spooky character creator.
Purpose
I wanted to learn JavaScript by creating an interactive website, and since Halloween was approaching, a spooky theme seemed appropriate. I also wanted to make something with visual appeal that would be fun to play with, for lots of people.
Technology
Boo! is written in plain JavaScript, HTML and CSS. It is published as a web page. HTML and CSS were relied upon first to implement features, and JavaScript was used when necessary. This approach makes the app faster and lighter. The app uses JavaScript to take user input and change the images of the character, in order to change their costume, etc. CSS was used to create the page layout and position the image elements correctly.
Design
The page layout and color scheme for Boo! were designed using a vector illustration app. From the beginning, Boo! was designed to be mobile-first, because most of the users would use it on their phone after having been texted the URL. The page is divided into two sections, one that stays on top to view the character, and one that scrolls below to select the options. These panels dynamically resize depending on the width of the window (i.e., if the user is on a phone or a desktop), so that the app looks good on various screen dimensions.
The illustrations for the app were created in a digital painting app, with the exception of the background image, which was created using vector graphics. The color scheme, font face and music for the app were chosen to complement the artwork and add to the spooky ambiance.
User Feedback
User feedback so far has been positive. It seems that users intuitively figure out how to use all the features in the app. The illustrations and overall vibe were praised. The biggest pain point seems to be a lack of an “export” option to share your character. This is accomplished in practice via screenshot, but not everyone is familiar with taking screenshots.