Custom Responsive Fan Website

Animation Front-end Development

Client Profile

My young nephew and his busy momma like to read and play on the internet together.

Project Summary

I turned a CSS animal character into a custom-built, interactive children's activity.

Project Goal

To create an experience that my sister-in-law and nephew could enjoy together to celebrate an upcoming holiday

Team & Timeline

Spring 2018 • Four weeks of independent wireframing, design, and development

Responsibilities

  • Concept Creation
  • UX Writing
  • Custom Coding

Tech & Tools

  • HTML, CSS, JavaScript
  • CodePen
  • Font Awesome

Description of Work

I'd like to introduce you to Millie, the cute bunny who will one day grow up to be an Assistant Easter Bunny. She's the main character of my animal-themed project completed during my Master's program. When this project was assigned, I decided I would use this as an opportunity to help out my family by creating a website that a child could safely play on.

The design of this site is pretty simplistic so that a child (or child with their parent) could easily scroll to the area of interest. The custom coding ensures that the page will function consistently across devices; for example, if you tap or hover over her, she'll stick her tongue out at you (my nephew's favorite activity right now). Additionally, Millie's eyes will occasionally blink helping to capture the child's attention and making Millie lifelike.

There are also a few stories that mom and child can read together about Millie. They are short and written to be very relatable for the child. Simply click the button and a new random story will appear. Finally, there is a simple, interactive egg decorating game that the child can do independently - just click a color then click the egg for a colored stripe to appear.

And, the final result was a hit! This site has been enjoyed by many different children at this point and hopefully more will get to have some fun with it too! Children ask to decorate Millie's Easter egg every year!

I do believe there is a lot of potential to expand upon this project. For example, I would love to add more stories to Millie's Adventures (and children have asked for this); and, I think it would be advantageous to add different egg patterns that can be decorated.

mockup of millie the bunny website

Millie the Bunny Website

View Live Site

Feedback

"Brittany - excellent work. This site looks beautiful and is really fun to boot! I love how you found different little CSS tidbits and pieced them together to create something so cohesive. Your color choices are awesome, the bunny is so cute and the blinking animation really brings her to life. The nav is fantastic and your Easter egg coloring widget is so cool." - Evaluating Professor