final project design brief

project summary

For the final project, I plan on updating my portal page to cycle through all the seasons. Currently my portal page cycles through just spring and winter through a CSS hover. With the final project, I want the page to automatically cycle through spring, summer, fall, and winter with JavaScript. I would change the src with document.querySelector as well as add other elements (music, mouse cursor, any other complex javascript additions).

project goals

Being a fan of the aesthetics of each nature, I want to create a strong narrative based on the ephermality of each season. At the beginning of the quarter, I only knew how to use the hover feature within CSS to change the picture only once. But now that I have more experience with JavaScript, making my original image of the portal page seems possible. Of course, I want to do more than just change the background of the banner as the only improvement for the final project. I'll overlook all the tutorials, studios, and demos we've done over the past quarter and see how I can apply them to this project.

design strategies

Structure wise, the final project will look extremely similar to the original portal page if not the same. I like to keep everything simple so that most of the visual interest is kept within the banner image, which will already be distracting enough with its imagery and animation of falling objects. To keep the website theme welcoming and soft on the eyes, I plan to continue to use pastel colors that will also change based on the current season banner. I'll also have opaque seasonal items (snowflakes, cherry blossoms, etc.) in the background to strengthen the nature theme of the message while also not overcrowding the website.

interaction strategies

For now, the season change will happen automatically with JavaScript based on a setTimeout function. I was also thinking about having the banner be a controllable carousel with side buttons where users can freely choose when to switch seasons. Either way, when the seasons change I want to give a visual cue that'll happen a few seconds before the season changes. Maybe to add some more elements to the page, hovering over one column could reveal a seasonal theme that's different for each of the four columns. Also hovering over them would play a seasonal sound effect (maybe for summer a ukulele sound would play?).

experience goals

I want users to walk away from this project with a strong and lasting impression. My past projects have always involved a simplistic background with more emphasis on the layout and empty space to create a balanced and minimalist design. With this project however, I want to step away from that comfort zone and create something that's less minimalistic and focuses more on graphics. That's why I wanted to create more seasonal banners as well as create the hover backgrounds for each column so that there's more visual interest people are more intrigued by. At the same time, I don't want the website to be too overwhelming for users to navigate through.