Lily's Storybook Process

Original Idea/Inspiration

For my storybook, I wanted to do a fun choose your own adventure-like concept. I was inspired by the idea of making art come alive. I decided to go with the night at the museum idea to tell a a similar story like one of my favorite childhood movies. The goal was to gameify the story and make it super interactive for the user to enjoy.

I brainstormed of simple, yet iconic paintings I could recreate with organic shapes. I landed on Keith Haring because I thought his linework would be easier to code but also really enjoy his colorful and lively style. I wanted to to have a feel like a children’s book and was thinking a lot of the kid’s book “Goodnight Moon” when choosing colors and overall look.

Sketch of idea
Original sketch of idea including musuem, 1 point perspective room, and Keith Haring painting recreation
night of the museum movie, 1-point perspective room, Keith haring pictures, goodnight moon book
My moodboard for inspiration featuring Night at the Museum movie reference, Goodnight Moon Children's book, Keith Haring paintings, and 1-point perspective room for reference

Process: Figma

The layout proces helped me plan a lot of what was feasible in coding. It allowed me to really think out what will be the most plausible when it comes to the coding. I originally wanted to do a different Keith Haring painting but went with the dog painting because I discovered it would be a lot easier to code. I also figured that making a 1 point perspective room would be the best way to convey dimension to a 2d space.

Figma file of museums
The original layout of the museum frames on Figma
Figma file of room
Laying out the 1-point perspective room in Figma
Figma file of Keith Haring Painting
The rough layout of the Keith Haring Painting
Keith Haring Painting
Original Keith Haring paitning I was basing my image from/figcaption>

Process: HTML and CSS

I would say the hardest parts were formatting the museum building and learning fixed, absolute, and relative. I had to completely redo the positioning a few times.

I also found this TikTok and thought it would add a dynamic element to the day and night page of the storybook so I applied it to be a moon and sun’s color and glow.
Link to TikTok Tutorial

The middle part of the story was also a challenge to code when figuring out the size of the trapezoids. I struggles a lot with making it so their sizing would be responsive to the expansion of the window. Eventually I played around with the vh and vw and before and after feature in css. I was also going to have the paintings from the grid exercises skewed on the wall but realized that would be too complex and did not want to take away emphasis from the main panting.

In the final part of the story i animated the noise drawings to shake a little as if the dogs were barking. I also added audio to make the dogs come to life even more.