Skip to content

Apple Fitness +

Tags: web, design, color, layout

https://www.apple.com/apple-fitness-plus/

Layout

First off, I’m obsessed with this text layering with the hero image of the athlete. When you reload, you can get different person performing a different exersise. Apple has always been the 🐐 at creating beautiful assets that fit extremely well with their minimalist backgrounds, agreessive text, and smooth animations. The reason I love this so much is because it gives an eyecatching depth, sense of motion, great subject focus without interupting from the flow of the page.

Another thing I really appreciate is the use of shadow to give this perspective that makes it feel like everything is mounted on a white wall in a gallery, or like a top down view. I also really like how the shadow bleeds over the restricted content width to make it feel like the navigation and media respect the same boundries.

This is best seen on here where the iPad is neatly inline with the content boundries, but the shadow is allowed to bleed over to keep the same persepective.

In this last image there’s the perfect amount of content to fill the space without it being distracting to the text or iPhone with the app. Also, if you pay attention to how the content is layered and scrolls with parallax, it really feels smooth and ellegant.

Color

These screenshots showcase just incredible color usage and balance. Even the yoga subject is methodically wearing the grayscale apparel to fit the theme. This grayscale up against the neon yellow green brings amazing contrast to the content.

Typography

They do a great job of stacking agressive text here to balance the image on the right. My only real critisim is that the text following “Miles of inspiration.” is visually hard to read and is a little lengthy, and heavy. I imagine this would look very imbalanced with such a dark image and text that doesnt fill the same amount of vertical height. I tried adjusting the font-weight and color while inspecting and it was very difficult to lower the weight and font darkness while keeping the same balance. I think this might be possible if the lighter text matched the subject’s shirt color on the right, in color and in vertical height.

🍟 100%

✌🏼