Website Design Analysis: Apple

Apple, known for the iPhone, iMac and iPad to name a few, is one of the largest multinational technology companies in the world. It is therefore imperative that their website meets the modern day standards. You’d expect a technology company to have a well designed and responsive website, otherwise, how can you trust their products? I definitely don’t think Apple let themselves down with their website’s design.

The homepage is welcoming, modern, simple and clean, allowing the brand to really show its products off and make them the primary focus. This is actually the main purpose of their website, to sell and advertise their products. No one goes on the Apple site to find out who they are. Their global status means they are more popular than the apple you’d find in your fruit bowl.

The design of their homepage has a very effective use of white space that ensures as a customer, your eye is drawn to the product on the image slider. The homepage is relatively short, especially if you ignore the footer and this stops visitors needing to scroll to find what they are looking for. If the page you want isn’t listed in the menu bar, it will likely be in the footer or as a link in the page content.

The page design itself spreads the full width of your browser window and there is no chance the responsive design will cut off content as product imagery in the main slider just resizes to stay central in the design. Interestingly, the four sections below the slider are not composed from an image and text, neither do they use a button. Each box contains an image that has the text as part of the image and the whole section can be clicked on to activate the link. Just like the Nike design that I analysed before, the website’s content proves to be just as important as the design of the website itself.

The whole site’s design definitely has a modern and professional feel to it and this is down to the neutral colours, minimalistic icons and the lightweight sans serif typeface. The top menu is comparatively small when you consider their prominence in some other site designs. The white text and icons are clearly legible, standing out from the black header that contains them. Icons can often help build up a brand identity and Apple use simple outline icons that are easy to identify and understand. The company logo sits left aligned in the menu bar and becomes the link back to the homepage from subpages. Often a logo will sit above the navigation bar, but with Apple it has become a feature of it. It is only by excellent branding that Apple are able to do this. If the brand did not have the global presence that it does, there may be a need to have the logo larger than the menu text.

Although the design mainly uses black and white, along with grey in the footer area and dark grey text, a complimenting blue has also been used so that it is clear where links can be activated, and if nothing else, it adds a subtle hint of colour to the design and also gives Apple’s branding team something else to work with. If you were to remove all of the imagery from the page, but keep all of the text and colours the same, you’d probably still be able to identify the website as Apple’s.

Imagery and user experience definitely help make Apple’s website appealing and modern. Their use of photography is spot on, drawing us to their products that look slick and new, something many of us crave in a phone or tablet. Drop shadows appear quite frequently throughout the site, helping products appear to sit and in some cases hover above their neutral backgrounds. Not only do these shadows give the impression the product is sitting in front of you, but they also help the product stand out from other content. And I don’t know about you, but I’m definitely more likely to click on a product that looks great and grabs my attention.

Take the iPhone page as an example. Now, this screenshot only shows the content at the top of the page, but already your eyes are drawn to the product imagery. And with these products are the familiar captions and blue links. The design gives these products room and although it could be argued, too much room, I feel the designer has got it just right. Not only do the products get breathing space from one another but, the large size of the sections also make the design less squashed. If the sections were smaller, you might get the impression you’re looking at rows of squashed advertising banners.

At first it may seem like all product images are the same on the Apple website, a cutout product with a shadow. This is not the case. When you scroll down the iPhone page you soon find sections that stretch full width where a photo is the the background, as well as the container of a product.  

This screenshot shows a prime example. The use of a shallow depth of field achieved by the photographer using a large aperture, creates a neutral bokeh background, while also showing the product in detail. The typography sits neatly on top of the blurred background and remains easy to read. Although the image style is different to those at the top of the page, it is still obvious whose website you are on due the typography and colour usage.

Even further down the page, the image style changes slightly again. A full spread background image is used, but this time, the majority of it is in focus, however a darker overlay has been applied to ensure that the white text contrasts with the background and remains legible. While the  imagery style does change, you still get the sense that the images all belong to Apple due to their use of typography and text layout.

Another interesting design feature on the Apple website is the design of the ‘Apple Watch’ page. Elements of the page, mainly the products, are animated as the user scrolls down the page. It’s designed more like a vertical slider than a page. When you scroll the watches slide up and bobble slightly; the background colour slowly changes and the text vanishes and new text pops up. I think this is a really unique and clever design feature and does limit the length of the page. The motion of the watches add some fun to the design and will captivate viewers, which referring back to my original point, is what the website is all about. If your target audience enjoys visiting your site they are more likely to go back there.

Overall, I must say I really like the Apple website design and I think this is mainly down to the typography and colours they have used that create a modern and reliable look and feel. The design is consistent throughout and minimalistic, it lets the content do the talking. I think I’d say I’m quite drawn to the site due to their product images and photography styles, and these really come to light with the simple IA. This wireframe probably wouldn’t work for a company that don’t use this style of photography and who aren’t in the technology industry. The design has to suit the content and vice versa, just like it needs to suit the brand.