Link: spaydar.github.io
WDD Final Project Write-Up
Hello! For my final project I made a website for a fat cat stuffed animal that I gifted my girlfriend over the winter holidays. She immediately named him Prank (and his little cheeseburger is named Poo-poo). Thus, the website is named “Play with Prank!”
When you load my website, you arrive at a landing home page that shows Prank floating and spinning around (implemented with CSS keyframe animations). The title text is animated with a breathing effect -- a box shadow is cast as it expands/breathes in. The purpose of the breathing effect on the text is to bring life to the page; it seeks to make the page more approachable and fun. The breathing effect is also implemented with CSS keyframe animation. I also chose a sans-serif font that I thought was appropriate for the fun mood of the page.
There is a little blurb about Prank and prompt to click 1 of 3 buttons below that allow one to play with him. The buttons have a cartoon illustration and simple text-command to indicate which action will be performed if the button is pressed. The buttons are reactive in that they provide feedback to the user while one hovers over them. The cursor turns into a hand pointer, the button darkens, the button shifts up slightly, and a box-shadow is cast around it. This feedback ensures that the user knows when they engage with the page’s functionality, and when they don’t. The purpose of these buttons is to provide simple navigation to the pages where Prank performs an action.
Upon clicking one of the buttons, you are directed to another page at which Prank plays around, performing a certain animated action on an infinite loop; these actions include keyframe animations of Prank sliding down a slide, taking a swim, and eating his cheeseburger. The purpose of these animations is to be fun and provide the user a sense of really experiencing these actions (in the way they are timed). There are also timed text fades that display expressions for each of these actions to give the user an increased experience of the action and its speed, also implemented with keyframe animations. Each of these pages is equipped with a home button, with similar feedback to the landing page buttons, that lead the user back to the home page to select another action for Prank to perform.
PS -- I made all of the cartoon images from scratch in Adobe Illustrator :)
Thanks for reading!!
The link to the stuffed animal version -- https://tinyurl.com/prankfatcat