The Design of Apple’s Website

A review of Apple.com’s website.

Ok, everyone knows who Apple is, what they make and almost everyone has visited their website at least once. Most people seem to think that the website looks fairly good, but when someone are inspired by it and tries to make something similar, they end up with something less than optimal. So what’s the trick, what is it that most people don’t see. Now lets take a look at the three things that they do that are absolutely magnificent.

1: Subtle Design Elements

To most people the buttons seems like fairly normal text, that changes color when you hover over it with your mouse, however there’s a subtle line in there, that enhances the letters, makes them stick out of the background. The subconscious notices this, but most people are not aware of this “trick” when they see webpages. Take a look at these magnified images.

Apple Menu Button

Apple Menu Button (Hover state)

The menubar itself is a gradient, between each button is not only a thin darker line, but a brighter line on each side. The menubar also has a thin brighter line at the bottom which separates it more from whats going on below. When you look at the text of the button in “normal” state, you can see there’s white text under the dark gray text which has been moved 1 pixel down, making the text seem like it’s inside the gray bar. In hoverstate you can see the opposite, when it’s white text it has a black outline 1 pixel above it, again to make it stand out from whats underneath. This is a much used trick by designers to make something pop out of your screen. Our eyes are made to see things in three dimentional space, and we approve (without knowing) of design that implements this.

Apple Frontpage Grid System

2: A Neat Grid

Apples frontpage uses a grid, most of you can see this immediately, but if one of these frames were moved slightly to one side, your eyes would tell you that “this does not look right”. A lot of great grid resources are available on the web if you want to learn more about implementing one into your design.

3: Huge Images

The strength of apple’s products are their design. Apples little gadgets look smoother than most other gadgets made out there. And apple uses this on their website by using huge images, and very little text. Apple also links directly to a video explaining why this new gadget is something you have to buy. Images and videos speak louder than words, especially when what you are selling is design. The image on the frontpage of their website now continues the white/gray-gradient style that Apple have been using on their gadgets for a long time. You KNOW you are on their website if you just stumbled upon a random link to “some gadget”, or “check this out”.

So.. What could have been done better?

Apple’s weakness shows when you get to their subpages. The grid from page one does not continue throughout the site. Swapping from a 4-grid to a 5-grid back to a 4-grid is not something that the eye catches in a good way. If they had done a 4-grid to a 6-grid it would still leave  a few shared grid-lines in the middle. Now apple has designed their site ages ago, so it’s a lot more narrow than what we designers think of as optimal for the common screen resolution today. Apple should widen their site, and remove the 5-grid elements.

Apple 5-Grid, What are you guys doing?

And then back to 4-grid?

Also as you can see from the 5-grid page, when apple tries to sell you something, they fill the page with spam. I will not download iTunes if a still image called “iTunes Showcase” seems spammy. That gives me the impression that the program live is probably even more so.

In conclusion I have to say this page is well build, but the maintainance of content is mediocre. These kinds of design-flaws are common when theres a team building a site without a well-planned structure. One team is responsible for one subpage, while another team builds the next page.

Lets hope the Apple web teams get a common grid template soon.

J.