Type in Motion

This project took many different stages to complete. I had never used or learned about HTML or CSS before this project. The first step to this project was learning to use the new code to create working animations or websites. This involved learning the different transformations, like skew, rotate, translate, and scale. Furthermore, learning how to change colors and differentiate which element on the screen was the element in the code. To aid in my struggle with learning the new coding and web design principles, I took an only course to learn more about the ways to utilize HTML and CSS to my full advantage. 

Following the first animations, which went over simple ideas like transformations. I was taught how to make simple animations, like a text crawl and a bouncing logo across the screen, to use as inspiration for the final designs. 

The client that I chose for his final designs was the TD Garden. I thought of making one design for each of the teams that called the stadium their home, the Boston Bruins and the Boston Celtics. The last design I wanted to be something that could be up year-round, but still referenced those teams. He decided to utilize the text crawl for this third design. However, to help include some more elements that would be seen at games, I also included simple artwork of a basketball, hockey puck, and whistles. These are simple elements that would be easily recognizable to the fans and viewers. 

The other two designs were made in Illustrator and did not necessarily follow the text crawl or bouncing logo design. The Celtics were a simple slide motion, of the basketball coming in from the right side and the text sliding in on the left side, with the background of a basketball court. While this animation is simple, it helped to show a clear message. As for the Bruins’ design, that design was a little bit more complex. For that design, the text would remain stagnant, but the elements around it would move. The elements that moved we snowflakes in the corners with a slight opacity change and “pucks” that represented players that moved individually from one another. This design was by far the most complex because of all the different elements that needed to be coded for. All in all, this project expanded my knowledge and skills to incorporate HTML and CSS.