Advertisement
Industry

How Apple Has Influenced Web Design Over the Years

by

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.

Related Posts
  • Web Design
    Roundups
    Improve Your Web Design Workflow With Mac Computer Skills TutorialsMac computer skills roundup thumb
    Though the Web Design section here at Tuts+ is your home for all resources concerned with this fine art, we're joined by literally thousands of other tutorials on alternative topics. Many of these are pretty relevant so, in this roundup, we're going to take a look at some posts from our Mac Computer Skills section to see how they can help refine the workflow of Mac-equipped designers.Read More…
  • Web Design
    eCommerce
    Taking Shopify Theme Development FurtherShopify thumb
    In this final part of our Shopify series we will look at how a deeper knowledge of Liquid will enable you to make your themes even more flexible. This will help you deliver richer and more imaginative store designs.Read More…
  • Computer Skills
    OS X
    OS X System Recovery: Explored and ExplainedOsxrecovery retinathumb
    There may be a time, in the life of your Mac, where you need to restore or recovery your machine, either to try and solve problems you've encountered or simply clean house and start from fresh. In this tutorial, I'll show you through the various options for restoring or recovering your Mac and the process of bringing your Mac back to a clean, healthy state.Read More…
  • Design & Illustration
    Web Design
    SVG Files: From Illustrator to the WebSvg thumb retina
    Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser.Read More…
  • Computer Skills
    OS X
    50 Things You Probably Didn't Know About OS X MavericksMavericks400
    Mavericks, the latest major release of OS X (pronounced Oh-Es Ten), is version 10.9 of Apple’s desktop operating system. With, reportedly, over 200 new features Mavericks is no incremental update. Jonny Ive might suggest that “Apple has reimagined the operating system for the desktop”, but the truth is Apple has incorporated some of the best ideas from third-party developers and has sought to integrate some of the features of iOS (the operating system for the iPod Touch, iPhone and iPad) into it’s desktop big brother.Read More…
  • Web Design
    Design Theory
    Video in Web DesignDsfd video retina
    Video itself has been around for a long time; in films, on the television and now readily available to play on our phones, tablets and other devices. Video on the web has also been around for a long time. We started out with heavy-weight flash files of videos and animations, whereas now we have HTML5 video and so many more options for including video in our web pages. Heck, half the time it’s even just as easy as dropping some embed code into a website. In short, we’ve never had it as easy when it comes to using video on the web.Read More…