Let’s see what we can learn about design from Apple. I’m not here to criticize. I just want to observe. Design is pretty much that entire company’s business model.
Across the top I see a small sicky nav bar, black background. It’s minimal. I hate sticky headers. They aren’t so bad when they are this small, but still it shouldn’t be there.
The font family is sans-serif. There’s nothing odd or remarkable about these fonts. It’s something called “SF Pro Display” that looks exactly like every other sans-serif font. It looks like pretty much the same font for body and for headings.
The text is black on an off-white background, and there is basically nothing here but black text, off-white background, and pictures of the products. The products are boldly colorful, but the canvas behind them is monochrome. Buttons to buy or learn more are just plain blue links.
At the top is a banner offering me financing on a new phone. Below that is a large photo of the phones, arrayed like a stack of magazines, candy colored.
What can we learn about Apple from the colors of their products? They offer black and white, and the rest are colored like children’s toys or bubble gum wrappers Based on our study of color from previous design posts, I’d say these hues are not toned with mixtures of gray. These are pure hues, or they are tinted or shaded, but not toned. There is nothing neutral in them, or so it looks to me. I’m not sure what this says about Apple or about the people who buy Apple products or about us all.
Are their really people who would pay close to a thousand dollars for a phone the color of a lemon candy? Even if you like bold colors (and I like them fine), do you really think every day until you buy a new phone you will want the same bold color?
The apple.com main page itself is organized in a layout typical of many, many websites since Bootstrap became so mainstream. It is a series of panels. At the top I see full-width panels with graphics and text centered horizontally. Further down I see side-by-side blocks—essentially a two-column display in these panels. This is a design any web design beginner could emulate using Bootstrap—or perhaps even using one of those build-it-yourself website things like Wix. (I tried Wix once and I couldn’t stand it for more than 10 minutes.)
The overall design gives a sense of space. There is a huge amount of white space surrounding the candy-colored gadgets. Here we don’t see the panels alternating in color. They all have the same off-white color. But in between the panels are thin margins of white—true white or close. We also see that true-white in between the side-by-side square blocks toward the bottom.
Oh, and I guess somebody at Apple is selling his extra cheese grater.
To me the surprising thing about this website is how easy it would be for another person to replicate the overall design. There is nothing inventive in the design itself. I’m not suggesting that is a bad thing. The attention to detail is admirable. For example, those pics of their products do have background colors, and they match the background of the underlying page element so you can’t see any division at all between the gadget and the web page. Try making that happen yourself if you think it’s easy. Try photographing something and making it look like it’s sitting naturally on a transparent background. I don’t think these pictures are photos. I think the images are computer-generated—right down to the shadows and reflections.
Some things we can note by their absence. There is nothing animated. Nothing spinning or flashing. Not even a carousel that flips through its pictures all by itself. Nothing that moves. I approve of that very much. A web page shouldn’t do anything at all unless and until you interact with it. (Exception: playing a piece of media, when that is the whole purpose of the page.) Also, there is no annoying mouse hover behavior. Nothing annoying happens—nothing happens at all—if I let the mouse hover over words or over menu items. No pop-up menus, no popover preview with more information about the product.
Perhaps it goes without saying, but there is no audio either. I think as a society we can all agree that web pages should not have background music. We tried that, and it sucks.
This page is just waiting for me to do my thing, and it’s not hurrying me along at all. I like that. It’s peaceful. The Apple website has the luxury of being so peaceful and stateless because it doesn’t need to show ads to stay alive. This is where the ads take you. We’re already here.
The MacBook Air page has a similar aesthetic, but it behaves very differently ( https://www.apple.com/macbook-air/ ). I’m going to comment on that one in a different post.
adamcross.blog 