Ah… Apple. If I had a penny for every time we’ve had Apple referenced to us by our agency clients…

The fact is that Apple websites are undeniably beautiful, utterly considered and well composed. What surprises many of the agencies that reference Apple is that, from a web development perspective, their websites are not particularly technically challenging (and thus not especially expensive).

Also, just to make very very clear, we didn’t build this website for Apple (as awesome as that would have been).

Hero Animation

This sort of beautiful yet subtle transition just screams “Apple,” and similar work is a common request for us. It is also relatively simple to accomplish.

As the user scrolls through the section, you can see the background text shrink, and the headphones grow. To break it down more technically, as the user scrolls, these elements have transform: matrix() applied (more info for the nerds here: ​​https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix()) that increases and decreases the scale of each element, respectively.

This kind of simplicity, used to create a visually beautiful effect, is a recurring feature.

Video

One of the great tricks in almost all Apple websites is the clever use of video to do things that would be incredibly expensive in code. This attractive spinning crown effect is created by a looping video, indeed here is the link: https://www.apple.com/105/media/us/airpods-max/2020/996b980b-3131-44f1-af6c-fe72f9b3bfb5/anim/crown/large_2x.mp4

The rest of the watch is just an intelligently cut out PNG file: https://www.apple.com/v/airpods-max/c/images/overview/design_crown_body__dnzmz5cex9ua_xlarge.png

Now, thinking back to my web development freelancer days, these kind of pieces of work were loathsome – it’s just endlessly tweaking pixels, at myriad screen sizes, to make sure the video and image always align. Is it fun work? No. Is it quick? Nope. Is it expensive? No, not particularly – not compared to trying to animate this all from scratch.

Indeed, this touches upon a wider discussion we have with agencies – how to make advanced animations affordable? Bespoke CSS3/JS animations are crazy expensive whereas it will often be considerably cheaper for the agency to create the animation desired in AfterEffects, export JSON via BodyMovin and then have us implement it via Lottie (I covered this in more detail in the PLUS example).

Fixed Scroll/Scroll Jacking

Yeah, this one is hard, lol. I just wanted to share it because I love it so much. We regularly implement scroll-jacking/page-locking in our projects and 9.5/10 I hate it (with the exception of times where the whole page is in locked sections, like using this library: https://alvarotrigo.com/fullPage/).

However this is such an elegant way of implementing this. I think the difference is the subtle up/down motion in line with your cursor, so it doesn’t feel like you are fully locked (and thus no longer in control).

I can’t lie and say that this is “easy” to implement but equally, it’s not ground-breaking development. It uses the same transform: matrix() as the hero section, except using translateY (up/down motion) instead of scale.

More Video

This is another illustration of clever use of video to create visual interest and motion, without breaking the bank on development. Essentially this section is a glorified carousel, actioned on scroll, that loads a video in the first screen (with an image backup as well).

Again, it feels lux, high-end and composed – but isn’t the hardest thing in the world to accomplish.

Working on Existing Platforms

Away from the amazing design and smooth animations, there is always a challenge when working on projects with large corporates. For SMEs, most of the time, the website is a stand-alone asset, so it is easy to recommend “ok, let’s use WordPress, and we’ll get WPEngine for the hosting” and that part of the job is done.

Large corporates bring platforms. And systems. And aggressively unhelpful IT teams.

We’ve had more than a handful of projects go completely awry when we’ve been brought into a project late in the day, once all the designs have been signed-off (often after endless bruising encounters with every major stakeholder in the corporate), and then to discover there is no mechanism to build the site as it should.

Maybe the platform doesn’t allow for bespoke front-end code; sometimes internal IT teams have endless penetration-testing requirements (and are booked out for six months solid); maybe after the entire design phase, they discover what they really want is a drag-and-drop editor.

This is all to say, tread carefully around large corporates and get on a feasibility call with their IT team as soon as you possibly can – absolutely before you put a mouse to Figma. Even better, you can grab one of us to try and ask the more technical questions that make all the difference.

Cost

Oh boy, what to charge! As this is a single-page site, our standard quoting approach doesn’t really work so I tend to grab (reasonable) numbers from the air.

What I would take in consideration is:

• There are many, many animations here, and though each is relatively simple, there will be endless, endless hours of fiddling and tweaking – so this needs to be costed for
• Apple is a large corporate, which means endless stakeholders, often senior ones who won’t engage until the end of the process and then have all kinds of ideas that need to be implemented.
• We will tend to front-load some scope creep in this case, allowing us to be somewhat magnanimous down the line
• Apple is a large corporate, so they can bloody well afford it
• Our “flexible” pricing can go both ways, and a number of our agency clients have told us to increase our rates/pad the days because, well, the client can afford it – and I am perfectly happy with this

So, how much would we charge? Well, I’d likely start with a range of £10k-15k+VAT ($13k to 18k for our US readers) and see where we ended up, for instance, many of our agency clients add a margin to our fees so we have to always be mindful of that.

‍