Today’s class covered the art of interactions and how those interactions can build up to create an immersive and narrative story. I was really excited for this class as it taps into another field I love doing – animating.
“The days of static sites are well and truly behind us; at the macro level we expect interactivity; at the micro-level, similarly, we expect feedback, communicated clearly through our interface’s interactions.”
Like every aspect of the digital world, as we advance into the future there is more emphasis on quality and making stuff work for a reason. On web pages, this is no different. Both micro and macro animations have separate purposes to benefit the design as a whole. Macro interactions are institutionalized into the design – large parts of the UI that move a large amount of content, while on the other hand micro-interactions are smaller interactions that contain responsive feedback to the user.
Examples of Immersive Scrolling
For these examples that Kyle has provided us, I have decided to focus on different elements of animation. I will then share my thoughts and ideas on how I could possibly implement these animations into my own projects.
Snow Fall – Responsive Scrolling
Snow Fall is an early rendition of an immersive website that includes the use of animations upon scroll. These interactive articles, by the Washington Post, take the user on a journey/story through an almost fatal event. It uses manual scrolling by the user to unfold the events of what happened whilst giving them visual feedback to the pace of the user. It is extremely helpful for creating a linear journey and balanced pace for the viewers. This is an extremely helpful concept as it can help unfold information like the status of the Apollo crew in space e.g. route/quotes.
If the Moon was only One Pixel – Horizontal Scrolling
This is one I keep seeing again & again because it’s so flawless. If the moon was only one pixel uses horizontal scrolling from a 1:1 pixel ratio to achieve a sense of scale in their story. This can be potentially implemented into my project showing the distance between the crew and the moon.
Vinny’s Bakery – Parallax Scrolling
One example that Kyle provided really caught my eye – Vinny’s Bakery. This website uses a parallax scrolling effect to create a fully reactive and ‘floating’ website. Everything is used to glide in and out and give a smooth experience for the user. Almost like an advertisement on a subway underground screen. This can be a really rewarding effect to have, although a bit more sophisticated than most, especially on Webflow. If done correctly it can provide a sense of professionalism and appropriately balance the pace of my content. Additionally, looking for ways I can implement these animations into my own project can almost create the appearance of a secretive classified operation by using both the suttle fade-ins & parallax scrolling.
Big Apple Hot Dogs – Gradual Scrolling
Big Apple Hot Dogs uses gradual scrolling to liven up their unique characters thus making them more emotionally responsive. Creating an excellent immersive experience. A prime example of this would be seen at the very bottom where both parent and child hotdog are seen connecting hands. It uses masks and gradual moving positions to achieve this. I could potentially use this for my crew section and make them hold gradually hold equipment (astronaut helmet) as if they are about to enter the rocketship. This can prepare the viewers and create a buildup.
Apple – Fixed Position Scrolling
While I feel like Apple are masters at immersive storytelling I want to focus on one of their features in particular as it has really caught my eye; the use of the AirPods being fixed to the screen to fit into the case. I found this really innovative but actually really easy to implement in a website or prototype. This has sparked many ideas for me such as fixating the Apollo 11 space shuttle to the screen as it lands on the moon. This could also potentially scroll past content like quotes which could be a fantastic way of climaxing the story and bringing it to the end.