I based my design on the notes the took over HTML coding basics. The original idea was to design an infographic, but later evolved to an interactive website. I wanted to challenge myself with this project going beyond graphic design and using UX/UI. My prototype was designed with index cards. I divided my notes into sections to cover what I learned. I cut, glued and taped the cards visualizing the interactions for the site. I then created a storyboard of the intro leading to my notes.

I had difficulty with the smart animated function in Adobe XD and instead used Adobe After Effects for the intro. All the design elements were created in Adobe Illustrator then imported to Adobe XD. The final design and color palette were influenced by the highlighters I used on the index card prototype. The changes I made were for better compatibility with online interaction. I added in a dark mode for those who prefer it.