Apple is one of the biggest brands in the world and with that popularity comes great influence... Perhaps more than any other company in the world, Apple has played a hugely influential role in the way that products, applications, and websites are designed. In this article, we'll be discussing Apple's overall design style and how it's influenced a bunch of others.
A large part of Apple's overall marketing campaign comes from their highly popular website at Apple.com. Alexa ranks this site as #32 in popularity - which puts it ahead of sites such as the BBC, Craigslist and PayPal - not bad for a site that's basically just an online storefront for a single brand.
Apple's site has earned a reputation for it's attractive brand identity and clean layouts. Thanks to this reputation, it has influenced a wave of other sites to follow suit. Apple's design style is one that extends from product design and packaging all the way to the way that the sidebar widgets on their site are designs...
Apple.com Time Traveling
This article is going to focus mostly on the more recent iterations of Apple's website... but before we dig in too far, let's take a visit to Apple.com through the years (courtesy of the WaybackMachine). The important thing to remember here is that Apple.com, much like the rest of the internet, started out pretty ugly by today's standards. Click each image to see the actual capture from wayback...
2000 marked the introduction of the iconic "bubble" tabs... which would stick around for a long time.
By 2006, many of the styles associated with the modern "Apple" aesthetic began to take shape on their site.
Alright, now that we've walked you through the Apple site over the last 15 years, let's dig into what has made it so incredibly influential in the more recent iterations of their site.
Less is More
The biggest feature of Apple's influential web design is its minimalism. Apple keeps it simple by using large areas of white space and big margins to focus on single areas of content.
Apple's homepage normally features a large product shot with single tagline and some other pages linked under the fold. For example, at the time of writing, Apple features a large image of Apple's second-generation iPad with a large title and sub headline.
The assumed thinking behind this design choice is the Apple doesn't want to push everything onto you at once. Instead, they want you to click through to the individual product page where they can show off more information. Take this approach in contrast to Microsoft's homepage. Microsoft also has a large featured image but the page is cramped with multiple ads and the highlights at the bottom are even harder to read.
There are some areas of Apple's site that needs to convey a lot of information at once. It would be derogatory to the usability if it were split up. However, these areas still seem very clean and organized thanks to it all being confined to a grid.
Apple's current iPod site features a sliding hero image with three smaller ones positioned neatly below. This trio then breaks down into a further six items which creates a hierarchical sense. Apple features it's most important (and coincidentally, expensive) product at the top and shows off the lesser products below (such as software updates and accessories).
This pyramid effect is evident throughout Apple's site.
For most brands, retail prominence is a vital advertising medium. People might pick up your product on a store shelve and they will scan the packaging for information. Apple's retail experience is very different and, since you don't see the product before buying (in pretty much any location), there's no need to fill the packaging with text and advertising graphics.
However, the interesting thing is that Apple's website is designed in the same, minimalist way. Apple's style is seen across all of it's physical and virtual properties so you can identify an Apple box (or even product) as an Apple one, just as you could do to a website.
As we mentioned previously, Apple uses mainly singular, large photos of its products instead of multiple, smaller ones. As you visit one of their few product pages, the image takes center stage before any pricing, features or availability is mentioned. This particular technique plays very nicely into the general theory of visual hierarchy by bringing the product up first and foremost.
This theory is very simple but very effective in forming a good image of a product as a first impression.
Animation and Interactivity from New Web Standards
As you will know, Apple is a crusader for new web standards such as HTML5. Their own site reflects this by offering a selection of somewhat-novelty interactivity through the use of non-Flash web technologies.
We also know first hand that Flash is the number one reason Macs crash.
These little areas of animation also seem extremely functional in comparison to their Flash counterparts. The Flash-loathing gang is growing by the day and my use of Chrome regularly demonstrates the crashing of Adobe's popular plugin. The fact is, the heights that Flash offered prior to HTML5 are being replicated with better compatibility in the fifth revision of HTML.
The virtual boycott of Flash is something that Apple is influencing not from their website. Instead, it's a demonstration of what can be achieved with only the technologies compatible with Apple’s mobile devices.
As you navigate through Apple's site, you'll notice most of the marketing points have associated images that give a little vision into the otherwise boring marketing dribble. For example, Apple's Mac OS X site (pictured below) uses a large icon next to it's 64-bit OS section. The rest of Apple's points each have thier own icon too.
As you get deeper into Apple's site, the icons start becoming more apparent. When Apple try to demonstrate that this interation of their software is 40% faster, they use an image to highlight this. This breaks up the content and adds a little extra colour to Apple's otherwise plain design.
Apple's website is one thing that forms a big design influence but it's software has a similar effect. iOS uses a range of unique interface elements that have become apparent on web apps and websites alike. For example, iOS's toggle slider switch can be seen in a selection of web apps that use the style to toggle an action on or off.
Apple has pioneered a new age of user interface design, one that's clean and simple to use. The influence of Apple’s UI translates to a great experience on web applications that have took the idea of minimalist, simplistic interface with key functions being easily identifiable through the type of element being used. If you see a toggle switch, you know it has two key functions - most likely on and off.
Whilst the actual UI elements generate their own influence on web applications, the clean, minimalist style of the UX can also be seen as a having an impact on design. Everything from the icons to the gradient over menus in Mac OS X looks great. The subtle gradients demonstrated in the image below make the design look less than flat and remind me much of Chrome for Mac's clean gradient across the top.
Examples of Apple-inspired Designs
The following examples are a very small sampling of the wide variety of sites that have been either directly of indirectly influenced by Apple's approach to web design.
MacRabbit's product page takes influence from Apple's clean, monochromatic web design and interface styles. Also note the same apps and support logos are being used here as on Mac OS X.
Notice thace Tapbots uses the same large, page-dominating hero image followed by three lesser apps featured below.
Icons are another big feature in Apple's web design. There's a ton of well-designed, beautiful icons to be found on Apple.com and Pixelmator's site shows off a few more. There's some Apple-made icons in there, but the most are original and play nicely with the text shadowing.
Symphony demonstrates the same Z-layout as used on Apple's individual product pages with a logo on the left, followed by navigation, followed by large hero image.
As an Apple blog, Cult of Mac takes many design cues from the big A itself. The same, subtle gradients are used on the featured post set and the darker ones the menu bar.
To just look at Gibson indicates some sort of Apple influence. Everything from the Apple-ish trio of featured images at the bottom to it's inclusion on every "Apple-inflenced web designs" roundup on the net screams Apple.
Checkout's app promo site takes many of Apple's design principles into play inlcuding grey gradints, large product shots and even Apple's Hot News-style ticker.
Versions is a dark web design but one that uses the theory of white space well. Whilst the space itself is not white, it does use large amounts of empty space to effect. The custom icons are also used to demonstrate content.