In 2022 we launched an enterprise to develop the Apple landing pages grouped into their Mac division. The initiative pursued several fronts, including challenging ourselves to use Webflow interactions – native interactions.
Backups on key landing pages within the Mac lineup.
Our enterprise sought to develop a backup on the landing pages of the Apple products belonging to their Mac division : the Macbook Air, Macbook Pro, iMac, Mac Mini, the all-new Mac Studio, the Mac Pro, and also the Apple displays.
Apple landing pages engage. First and foremost, they present readers with a story worthy of reading about the product. In this case, the XDR Display Pro. A clean visual design language boosts the storytelling. And on top of it all, interactions that respond to the user's scroll make it an even more engaging experience.
Available for developers, designers, and storytellers.
Our Webflow backend project is wide open and available to creatives to study how Apple treats visual and written storytelling for their products and how their landing pages behave in terms of interactions . It is available for free.
Responsive breakpoints.
We used all of the breakpoints for responsiveness available on the Webflow builder. The Apple landing pages are heavy in animations on desktops and lighter on mobile devices. On mobile, the top side menu and the footer are more than just a size reduction of their desktop counterparts. They are different. This is most notable on the footer, which turns into an accordion on mobile. A tiny detail, right? That's just Apple being who they are. And that's just us caring about the minor details as well.
Blocks stack vertically on mobile, using EM measures anchored to a VW root block instead of pixels.
Apple's burger menu is more than a simple reduction of its desktop counterpart.
Reaching the footer on mobile uncovers links grouped into toggles.
Video, Lotties, and interactions.
Combining Webflow background videos, Lottie files, and on-scroll interactions allowed us to recreate the immersive experience the XDR Display Pro offers visitors. Following what Apple does, the animations work on desktop browsers for sizes up to around 1980 wide. At larger sizes than that the user experience variates slightly.
Outline in a pinch.
In summary: we used Webflow native functionalities to develop the Apple XDR landing page on-scroll interactions, recreating the product immersive storytelling experience we all love.
Credits to the brains behind the project development
%20(1).gif)
.png){kind=icon}
.gif)
.gif)
.gif)
