Design Study: the MacBook Air Page

We studied the main apple.com page. Now let’s compare that with the page for the MacBook Air: https://www.apple.com/macbook-air/ Believe me, Apple is not paying me to direct you to their page. It’s a decent product, but as a web developer I genuinely think it’s worth talking about what this page does.

When you first land on this page, it shows an animation of the macbook air sort-of positioning itself on screen. The picture of the computer starts larger and gets smaller. The word “air” behind it is animated too. It reminds me ever-so-slightly of those old Flash introductions people use to launch when you visited web pages in, like, 2007. Those were visually interesting, but the lasted like 40 seconds and ain’t nobody got time for that. This little animation on the Macbook Air page takes like 1 second, and it doesn’t stop you from scrolling or anything. Overall the effect is kind nice.

Aside from that, the page is sparse, sterile, monochrome.

Something weird begins to happen when you scroll down. Everything is animated. Animated MacBooks appear closed and then the screen opens for you. Text slowly inches slightly upward until resting in its final position—and that’s all the text. As you scroll down, every paragraph of text does that. And that thing with the laptop appearing closed and then opening for you by animation—that isn’t just a one-off either. I see that at least twice. It keeps doing this all the way down until the bottom where you see three MacBooks open for you.

To say the least, I find this distracting and annoying. As a little flourish when I first arrived on the page, it was almost charming. (I definitely would not say “delightful”, which is my standard of excellence for design.) Doing this thing with the text once would be OK, maybe. Actually it reminds me forcibly of those old PowerPoint presentations where people would use transitions for every line of text.

I didn’t start this review of Apple’s web page expecting to have negative things to say, but I think this particular design was a miss. By the way, glancing over a few other pages, it looks like they really love doing this thing where stuff animates as you scroll down. I would say it’s kinda cool so long as the animation is novel. And when you have done it once on a page, then it’s not novel ever again on that page. You could do the rising-text thing once. You could have a bar graph drawn with animation in front of the user once. After that, it’s done. Don’t repeat yourself. No more animated bar graphs. It’s not that cool. It’s not cool enough to apply it to every element of the page from top to bottom. You may as well have an animated GIF of a blinking “WOW” sign.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s