Storybook Process

Inspiration

Going into this assignment I knew that I needed to rely on basic geometric shapes because I have never coded before. I wanted to use one element which could be used multiple times in order to portray a full story. To get inspiration, I began by searching for examples of CSS designs made by other artists, focusing on the most rudimentary ones. I particularily liked one of an avacodo couple, which led me to the idea of an egg.

Avacados
Avacados by Julie Park, Codepen

Research

The next thing I needed to do was find out how to create an egg in css that looked like a character. It's one thing to make an oval, and another to make an inanimate object come to life. I watched several YouTube videos about how to make simple designs in one div. Through watching these videos I began to have a greater understanding of how to use my css sheet to my advantage.

YouTube thumbnail
YouTube series: Drawing with HTML & CSS

Refinement

As a brand new coder, accomplishing my final design took many hours of trial and error. I knew I wanted to use an egg, but I wasn't sure how to create a visual story. I began coding some other elements that I thought would be simple, but also work with the story, such as a frying pan and a plate. My first major problem was figuring out how to keep everything from moving when the browser changed. Throughout the entire project, I was constantly looking up coding solutions online and using Codepen to learn the tricks of the trade.

CSS Mistakes
Trial and Error

Reflection

If I were to do this project again, I would have a clearer plan for the narrative before I went to code anything. I didn't create any sketches, instead opting to go straight to experimenting with code. By not having a clear idea of what each new page would be, the process of creation took much longer than it otherwise could have. However, I learned a lot about how powerful (and tedious) CSS is.

Storyboard
Storyboarding