Project Brief

• Create a visual narrative in the form of a website.

  → To become comfortable with the use of code to create visual forms and to push the limits of CSS as a drawing medium.

• Requirements
  • Only HTML & CSS.
  • All visuals made with CSS. Absolutely no images (GIF, PNG, JPEG, WebP or SVG).
  • Minimum three frames/pages.

Expectations

• I have no experiences with coding, so I knew it would be difficult to start because I am afraid of it ^^;; (Still procrastinate on working on it so handed in late… 🙇)

• I want to keep it simple by
  • considering the use of colour, simple lines and graphics
  • use as few words as possible

Ideation

I sketches different ideas for the story:

I started with the fishing idea, but gave up later. More in the ‘storyboard’ part.

The final pick →

It’s a story about a rainbow losing its colours, and we have to help it find the colours back.

Rainbow losing colours = When I’m sad

The objects that bring back the colours = things that make me happy :D

Visual Research

For the graphic elements (how to tell a compelling story using simple shapes like circles)

I like the atmosphere in these images using simple palettes and compositions.

I also looked through the past works from the students in 2023 class. Here are a few examples that helped me a lot in thinking about how to balance my story and the level of coding that I can handle:

Storyboard

1st Attempt: Fishing

OK I didn’t notice I gave up on this idea so quickly that it has only one frame ><

But I can’t draft the scene that I’m satisfied with, and I got frustrated & left the project for a few days._.

2nd Attempt: Rainbow (Failed)

I tried brainstorming new stories, but I realized I shouldn’t waste so much time thinking of a new one. Instead, I flipped through the drafts and chose the Rainbow story to work on. Although I haven’t started the coding part, I feel more accomplished after finishing the storyboards.

3rd Attempt: Rainbow (OK!)

After I started working on the codes, I found the process too complicated for me. So I tried to reduce the frames but keep the framework of the story. Here is the final storyboard:

Coding

(I forgot to screenshot the process) I didn’t know where to start. So I started with the basic HTML and CSS set-up, such as incorporating the font from Google Font.

Some parts that I
struggle the MOST:

• I gave up the handdrawn effect of the rainbow…

• I tried different methods to hide the object and make them appear when hovering
  • but then at last it’s a very simple code :D (thank you: https://www.shecodes.io/athena/113-how-to-create-transparent-elements-with-css)

    

I rely a lot on online tutorials. But I also learnt a lot after figuring out how they actually code to make things happen.

My css file turns out to be a mess. I think I have to organize them better next time for the projects.

Although it’s not a complicated web, I think it’s a miracle for me to complete it (although late 🧎) after 2 weeks of lessons! The moment you refresh the page and see the ideal effect is the best part :DDDDDDD!!!

Resources

(My life-savers)

https://stackoverflow.com/questions/27730476/css-design-rainbow

https://css-tricks.com/the-shapes-of-css/

https://www.youtube.com/watch?v=TPc03KcidIo

https://codepen.io/tmrDevelops/pen/NPXodB

https://www.shecodes.io/athena/75845-how-to-remove-underline-in-a-button

https://codepen.io/datasmartteacher/pen/bGVoZJg

https://www.youtube.com/watch?v=NQUPAm-QluA

https://codepen.io/yochans/pen/vYxPdKz

https://stackoverflow.com/questions/62403621/how-can-i-create-sun-like-lines-around-a-circle

https://smokinclove.github.io/writeups/drawing-a-strawberry-with-css-border-radius-and-gradient/

https://www.shecodes.io/athena/113-how-to-create-transparent-elements-with-css