Kyle’s journeying immersively class showed us a great range of different types of narrative immersions built into websites through interactions and various elements to create a story. While I had a look at them and briefly discussed them individually, I want to do a more defined dissection into the one and only; Apple! – The God’s of digital web-based storytelling.
Apple is famous for its storytelling in selling products, features or technology. They seamlessly integrate their products into stories that are unique and personalized to the user/audience by employing immersive interactions, directed narratives, relative scenarios and a flexible structure.
Due to the vast nature and immersion of their website, I will be only focusing on one of their products to see how they use their colours, typography, animations/interactions to tell and build a story. Additionally, I will be separating areas of their page.
01. Introduction Screen
Clicking onto the “Learn More” section of the new iPhone 13 Pro the interactions start off the bat. The first thing you see is their signature name, “iPhone 13 Pro” This is then faded out to reveal another yet more scaled catchline of their newer devices “Oh. So. Pro” Apple can make this more apparent than the actual device name because they know you know them therefore establishing a connection to their brand is at the back of their mind. Additionally, it shows a brief yet concise overview of the exterior of their new iPhone 13 product in a video/gif format. However, we can only see a limited amount of this product as it is cut in half, this entices the reader to keep scrolling. At this stage, both the typographical, structural and video interactions/positions are both subtle and elegant in their rhythm. This is Apple’s attempt at drawing the user at a friendly yet inviting pace.
01. B). Introduction Screen Scroll
Scrolling down we see the hero being overlapped by new content. This represents Apple’s attempt of informing the reader they’re in for a ride. Additionally, Apple has known to use subtle interactions in their websites as their brand focuses on the minimalistic approach for perfection. However, this could be Apple’s attempt of showing the user what their product can do by breaking their artistic expressions. This is an extremely conning market technique.
02. Overview
Apple’s Overview page is different from its conventional relaxed visual mentality. It consists of a video background, that repeatedly plays the colours of their new phone in a teasing yet geometric pattern – However, this isn’t the main focal point of this section, the typographical elements are extremely innovative as their opacity strength increases at a certain ‘scroll point’ and dulls when out of that scroll point. This is extremely bold in capturing the audience’s attention – reading almost like a children’s play or a short narrative story. This also allows the viewer to read at the selective pace of the website.
03. Screen Size
In this section, apple cuts back to its conventional simplistic structural layout. It uses vast negative space, a typographical hierarchy upon their newest features and teases the new colour scheme of their phone on their screen. What’s important about this page is the parallax scrolling they use on their content and phone screens as the user scrolls in and out of the section. It creates a feeling of the content opening up as you scroll past it and scroll back in – almost in a secretive and nondisclosed way to the user.
04. Exterior Architecture
With this section, Apple showcases the outside visuals and technology of their phone in a two-column collage of images. Although, similar to their previous designs they are more visually abrasive and adventurous in this approach showcasing contrasting colours schemes (black & white) to almost create a build-up of the capabilities and features their product holds. Additionally, we can see the selection page to select various models of their new product. It uses a reel interaction of iPhones and tucks under relative content. This makes the user feel that this is their experience.
05. Camera Introduction
One extremely innovative feature that caught my eye straight away is on this section, it uses a PNG of their new iPhone, similarly seen in the introduction section. This time the iPhone is temporarily fixed to a certain position of the page so when you scroll, it scrolls with you. This makes it look like the content being displayed is coming out of the camera’s lense – almost personifying camera lenses as mouths. This makes the viewer feel like the camera/device is talking to them.
06. Photography Showcase
Apple’s showcasing photography section displays a similar column structure seems in the previous showcase of the exterior architecture, however, this structure is more distant and misaligned. This structure marks the beginning of apple’s revolution against its own minimalistic and chaotic values. Expressing itself in a more fun, rebellious and revolutionary manner. It uses subtle fading interactions in the content as you scroll to avoid too much chaos onscreen.
07. Video Showcase
Another interesting trick Apple has pulled is in the section, they use a full-screen width video that upon scrolling stops and scales out, engulfing the user in this immersive experience. This creates a sense that they are watching the screen only to take their eyes out of the ‘moment’. These videos are a good way for Apple to visually express their technology without adding any information.
The next part consists of parallax scrolling in a more subtle and vertical direction. This includes both the chaotic nature of the images and written content. This subtleness is to allow the reader to relax from the immersive explosion so far.
08. Snapshot
This section’s background is pitch black, the creates a ‘getting down to business type scene with the more detailed and technical features of the camera being displayed upon scrolling. Additionally, they mimic rapid parallax scrolling of a camera shutter into the title.
The next few sections prescribe a sense of emotional connection to the viewer. The first part includes a hand holding the iPhone, as we scroll the iPhone scales out and information transitions in saying, “No wonder your selfies look so good.” After this section, it shows a compilation of videos/gifs interaction with their products upon scroll interactions while adding the occasional fading in information. This is Apple’s attempt at establishing an emotional connection through its product. Almost enticing the audience and hiddenly saying, “Make memories with me, this can be yours”
As seen before Apple prescribes immersive scrolling through their various of interactions, it is no different here as they use scale, fading and parallax scrolling to gradually enrich the viewer on their newest state-of-the-art processor. However, they use scrolling to manage the pace and keep the viewer focused on a few upgrades at a time.
Skipping forward a section to the last section we can find Apple’s one last triumph to encase the user with a broad spectrum of new features in their upcoming update. This is the end of Apple’s climax into their immersive product’s story by the implementation of rapid parallax scrolling to display an abundance of devices at the viewer to showcase each different feature for their new update. After this moment we can see the immersive behavior and interactions get tamer again to allow the audience to absorb and acknowledge the journey they had just undergone. This ultimately allows them to reflect on their products through the quality, design and immersive storytelling making them more likely to acquire this product or at least keep it in mind.