How Apple Has Influenced Web Design Over the Years
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…
1996
Yeah… I know…
1999
2000
2000 marked the introduction of the iconic “bubble” tabs… which would stick around for a long time.
2001
2004
2006
By 2006, many of the styles associated with the modern “Apple” aesthetic began to take shape on their site.
2008
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.
Organized Information
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.
Consistent Brand
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.
Product Shots
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.
Apple’s iPad 2 site shows off an interactive demo of it’s Smart Cover accessory where users can change color of the iPad and the case, and swipe or drag (depending on device) to fold the cover. And no flash!Icons
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.
There’s an icon for that.Interface Influence
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
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.
Tapbots
Notice thace Tapbots uses the same large, page-dominating hero image followed by three lesser apps featured below.
Pixelmator
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
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.
Cult of Mac
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.
Gibson
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
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
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Wow… it always blows my mind when I look at older versions of Apple’s site… it almost feels sacrilegious or something to believe that ever looked like that 1996 screenshot. The fact that Apple has developed such a refined, sophisticated visual style over just the past couples years is testament to how quickly moving design trends are on the net. Great article Connor!
I really don’t think Apple has influenced web design, they just have great designers (Although lately some of their stuff is borderline tacky – iTunes & Mac app store icons).
Some mac ‘cult’ following sites are obviously blatant copies, but I don’t think it’s fair to claim that anything white and grey with navigation at the top is influenced by Apple.
Good points Luke – I agree that every site that’s white/grey isn’t necessarily influenced directly by Apple… but if I had a dollar for every time I had a client tell me that they want their site to look “more Apple-y” during the creative brief phase, I’d be a rich man – so it’s hard to argue with the Apple Zeitgeist that exists in the minds of lots of web designers (and their clients) ;)
I made a similar design once. I was not influenced by Apple (PC user & Apple hater reporting for duty) and anyone who says otherwise is just plain wrong. Luke, as you said, most of the presented designs are nought but copies. Apple has its recongniseable style – which is good. But being copied by Apple cultists doesn’t make that style an influential one. Apple is not the inventor of minimalism or the use of white (nor the wheel, contrary to what some people I know appear to think). While a good article, the argumentation should be refined to convince me of Apple truly being influential in the area of web design.
Good points mingos – I think it’s easy to forget how polarizing the issue of Apple vs PC really is for some people out there… as if liking/respecting the design of one somehow invalidates the other. The simple fact remains that Apple, love their products or hate them, is an influential design-driven brand that has inspired quite a few people out there – many of whom are web/graphic designers. I happen to be a PC user myself as well (although not an Apple hater by any measure), but I’d never discount the brilliance of Apple in the field of design. Are they the huge influential juggernaut that some people make them out to be? Perhaps… perhaps not, but to completely ignore their brand’s place as an influential force in the industry would be a bit silly. There’s a reason why people know what you mean when you say a website design is “like Apple”. The same can’t be said for many of their competitors (and I’m looking at the full spectrum of brands, not just MS).
Brandon, I’m not trying to invalidate Apple’s influence on the design trends or in any other field, I’m far away from that. It’s an influential brand, no doubt about it. What I meant was that some of the examples provided, as remarked by Luke, were copies rather than something clearly “inspired by Apple” – and that’s not what I expected to find. More examples such as Gibson or Symphony sites would be very welcome, definitely more than sites that are related to Apple and its products. Perhaps sites such as smalltransport.com, 280slides.com or perhaps mint.com would, in my mind, make the article more complete. It drew my attention precisely because my chronic Apple phobia kicked in ;).
Thanks for the excellent clarification Mingos. I was more or less trying to head off the whole Apple vs. Pc debate rather than trying to rebut your comment specifically … It just happened to be the best place to place my own thoughts :) if you have any other links that would make good additions to this article, keep posting them and I’ll post a small revised section tomorrow. Cheers!
I made a similar design once. I was not influenced by Apple
True, because you were influenced by other designers INFLUENCED by Apple.
This article is interesting and explores some of the common design techniques that Apple uses very effectively in their website. However, I don’t think they had a massive influence on web design in general. If anyone pioneered minimalist web design it was Google.
What influence did they have before 2008 ? I don’t recall seeing any similar websites, they did not even have anything special until recently ..
That’s a good point (and one that’s made indirectly in the article) – the most influential marks that Apple has made (at least in terms of visual styling in web designs) have really only been in the past handful of years… then again, there aren’t many brands that can look back to before 2007 and have much to gloat about over their visual identity as compared to today’s standards.
I can see this becoming a Mac vs PC debate. ;)
Ha, that’s what I’m seeing in the very, very near future.
Didn’t mean to direct the comments that way, sorry.
No worries at all mingos ;)
i think under 2008 was quite bad apple website from my point of view :)
2008 – present design was cool, but i dont like their Navigation LOL.
And i don’t think that Apple has influence all web design, but i must be honest that i like their web design (generally), very cool and simple, and the important thing is easy to read even though they have many information of their product.
** i mean that Apple did not influence all web design….
apple has influence on web design.
look at the apple products they have all rounded corners! XD
Surely the fact that designers are copying Apple, whether it be at the request of the client or lack of their own ideas, is given proof of Apple’s influence?
And Apple design was heavily influenced by early Braun design.
If Apple’s sites hasn’t influenced, then iOS, icons,… have.
All are their products. Somehow, somewhere. :)
Its crazy to see what they have developed from and how there simplistic design has shaped design accross the board.
Nice article, but I do not agree on Apple influencing web design. I think that this article shows that apple’s designers did a very good job at perfectionising their website, and were very much on top of the design trends. But I think the part that they ‘influence’ is the mac fan/cult websites, and not so much the web in general.
I dont agree that apple has influenced webdesign. They just went with time. And to be honest those sites you present to be inspired by apple are all lousy designs. They’re obviously made by designers without much experience at all. If you think those are good then you’re an amateur yourself.
And how other designers have influenced Apple over the years :)
http://gizmodo.com/#!343641/1960s-braun-products-hold-the-secrets-to-apples-future
http://www.businessweek.com/innovate/content/jun2007/id20070629_200809.htm
Designers borrow, restyle, reinvent, inspire and get inspired. Nothing that is being designed is completely new, if you realise this. I feel that newspaper design has stongly influenced web design when CSS came along and web design took things further to influence news paper design in its turn.
There are always designers who reach a larger public, to whom the design is new. Then, the designer who reaches a certain critical mass is dubbed the ‘inventor’ of the design. However, I saw a very interesting speech by Bill Buxton (he’s of Microsoft so of course he likes to bash Apple) who showed images, products (a touch screen (glass) Casio watch from the 80′s!) and footage of things we all thought they were invented by Apple. Apple just have top notch designers who know where to look for inspiration.
Better yet: I think that Apple ‘owns’ marketing, the design helps. If you are world’s best product designer but you do not have the ability to reach out and touch your user, your awesome designs will remain unsuccesful. Yet, they might inspire those who are able to get the design ‘out there’, running off with the credits you might deserve. As long as you know it was your design, you can be proud of it, I think.
“I think Picasso one said ‘Good designers borrow, great designers steal’ and we have always been shameless at stealing great ideas.”- Steve Jobs
Good design is influential. Period. With the exception of the 1996 design, Apple’s sites have been a breath of fresh air. Sure, it’s easy to look back and criticize their pre-2008 designs, but those of us who were around back then remember that the industry went absolutely gaga over those glass menu tabs in 2000, and there were scads of tutorials in design magazines and on websites detailing how to replicate them. That was in an era of hideous Flash UI’s and tediously over-designed “skip intros.” Meanwhile, Apple.com was clean and usable.
It may look gaudy to us now, but that 2001 Apple site was hot shiz back then, and everyone knew it. No influence before 2008? Please. Where were you guys?
@Tanja – Maybe Apple’s designers were indeed influenced by early Braun design. If so, great. Like I said, good design is influential.
@Adrian – I would argue that Google pioneered “anti-design,” not minimalism, and that the focus of Apple’s and Google’s sites are so radically different you can’t even compare their aesthetics.
Last thing. Influence is about having an effect on (or the power to shape) something, in this case web design. Sometimes influence manifests itself in direct imitation. It’s safe to say that Apple has been widely imitated (even the pre-2007 Apple), and there are plenty of good/bad Apple-inspired sites out there to prove it. But influence isn’t limited to imitation. I’ve never designed a site that “looks” like Apple’s, but I’ve been influenced by their aesthetic, which exemplifies time-honored design principles. And I think it’s reasonable to assert that any designer who’s been to Apple’s site has been influenced by it, either consciously or subconsciously, because good design is influential. Period.
Maybe this article should have been “How Apple Uses Good Design Practice” or similar, then.
Apple didn’t invent minimalism, they just popularized it.
Extreme transformation from 2006 – 2008 : THAT is actually when the transformation to uber coolness from awfulness has taken place. Wonder who they hired in this period! :)
Great post. It´s incredible how a brand keeps cool through years.
Nice article great research..