Homepage history: Apple.com

What can you learn from studying the homepage of an iconic brand?

There’s perhaps been no brand more influential on modern design as a whole than Apple. Whether it’s through the use of their hardware (like MacBooks, iPhones, iPads), their software (iMovie, Keynote), or their marketing (I’m a Mac, I’m a PC) — Apple has had an impact on everything from graphic design to hardware to web. By looking at their homepage iterations over some of the most formative moments in the company’s history, we’ll see how Apple has expressed their brand and pushed web design and development to new heights.

Before we dive in, we have to give an immeasurable shoutout to The Internet Archive — the web’s literal time machine — because without their Wayback Machine, we would not have been able to find any of these images. 

Apple.com in the 1990s

Don’t get us wrong, we love 90s style web design. But we won’t be focusing too much on this era of Apple’s designs as it’s before most of their defining products came to light. This homepage is from early 1997, around the time Steve Jobs had returned to the company as an advisor through the NeXT Computer acquisition

The 1990's version of the Apple website, a very-HTML forward site with basic information about the Mac OS 8, CD-Roms, and more. It features a left sidebar for navigation that is red and featuures simple hyperlinks with no design.

If you can remember the internet in the mid to late 90s, this should look pretty familiar. Vertically stacked navigation was pretty common for sites during this time. The 1997 homepage included three separate GIFs in the hero and a two column layout that stretches down the page. This layout and aesthetic didn’t last for much longer — simplicity and focus were on the way. 

Let’s jump ahead to 1999.

Power Mac and a simpler, hero-driven homepage

Apple's hero-driven homepage in 1999, featurea a large product impage of its Power Mac G4, a physical computer system.

This homepage (October 1999) comes to us two years into Steve Jobs’ return to the CEO position. You can see more focus here in what the site is highlighting. The navigation from the left is gone and content is centered and kept concise. The hero image has a clear focus: the Power Mac. The smaller secondary boxes draw attention to other products or features that are designed to help sell the power of Macs and what you could do on them (remember the days of downloading trailers?). The “Hot News Headlines” ticker section was the only motion on the page, and headlines would appear one word at a time. 

Apple.com in the 2000s

iMac and tabbed navigation

Apple's homepage in 2000, featuring tabbed navigation at the top reminiscent of binder tabs on divider pages. The hero image is of 5 iMac computers in pink, orange, purple, green, and blue.

The homepage above is from May of 2000, featuring colorful, translucent iMac desktops. As you can see, many of the hallmarks of the last design remain: content is centered and “Hot News” is still rotating in. 

But there’s a new navigation bar at the top of the page. The arrival of tabbed navigation — a navigation bar that mimics physical folder tabs — was huge because it influenced so many other websites during the early 2000s. And while the tabs didn’t last past the 2010s, the top navigation position is still extremely common in website design, and remains the navigation position Apple uses to this day. 

It’s worth pointing out that through the 2010s, the hero images on Apple’s homepage were usually rasterized — text baked into the image — and not friendly to web accessibility. But using alt text for images (which Apple did do) was a way to make this content more accessible.

iPod and design system consistency

Apple's homepage in 2001, featuring the just-released first generation of iPods with the text: "Say hello to iPod. 1,000 songs in your pocket." The tabbed navigation is still present, as well as hot new headlines below the hero image.

When the iPod launched in November 2001, Apple’s influence on modern design really started to gain traction. Colorful commercials with silhouettes dancing and pithy copywriting made Apple stand out in the advertising world. Another notable thing about this era of Apple’s homepage is that the presence of their design system was palpable. The search button and “Hot News” bar matched the style of the navigation menu.

The Apple homepage in 2005, with iTunes taking center stage as the hero image. The tabbed navigation treatment is still present, as well as the Hot News Headlines below the hero.

The end of 2005 marks the beginning of the end for “Hot News Headlines” consistently being on the homepage — it’s sunsetted starting in 2006 (but gets added back for a bit towards the end of the early aughts). By this point, people didn’t need media headlines to convince them how amazing Apple products were. Apple had established its presence in the design and tech worlds. 

iPhone, OS X Leopard, and a new navigation style

Two images side by side of Apple's homepages in 2007. Both feature dramatic all-black backgrounds, and the left introduces the first-ever iPhone, with an image of the photo taking up the entire hero. The second image on the right introduce's Apple's Leopard OS system in the hero.

When the iPhone was introduced at Worldwide Developers Conference (WWDC) in early 2007 (the homepage on the left), Apple.com used a dark background for the announcement. The dramatic color shift forced you to focus on the iPhone at the center of the screen. 

But notice how the white navigation sticks out in contrast with the rest of the page. By the time Mac OS X Leopard came out in June 2007 (the homepage on the right), the navigation had gone gray and icons were more skeuomorphic — where interfaces are intended to mirror real life objects. This began a great era in Apple’s design history, with icons like Safari’s becoming a realistic-looking compass, or iMovie’s looking like a camera slate.

Need creative inspiration, like, every week?

Join more than 800,000 people getting the best, coolest, and latest in design and no-code each week.

Sign up for Webflow Inspo

Sign up for Webflow Inspo

MacBook Air and CTAs in the hero

Apple's homepage in 2008 introducing the MacBook Air. The navigation no longer is a tabbed treatment but instead a flat, horizontal navigation menu.

At the beginning of 2008, Apple introduced the Macbook Air, and with it, one of our favorite commercials they’ve ever produced. But notice how this homepage uses a practice Apple had been doing for quite some time in their heroes up to this point: the dual calls-to-action (CTA). These links point you to watch the commercial or to follow the guided tour, and sometimes clicking the actual image in the hero would take you to another page entirely — like a product overview page. It’s a strategy designed to get a lot of mileage out of limited screen real estate and one that Apple does superbly well to this day. The page doesn’t feel crowded, but the website visitor has a lot of options to explore.

Apple.com in the 2010s

iPad’s dramatic entrance

Apple's homepage in 2010 introducing the first iPad. The hero image is larger than ever and features a product image of an iPad laying flat, which helps conceptualize the real size of the product.

The announcement of the iPad in April of 2010 was a dramatic moment for the company — cementing its new product category of tablets. Opening the homepage with this perspective shot only enhanced the intrigue. Apple’s hero wasn’t confined to a specific size, so they could show the iPad at an angle, showing visitors that it was clearly larger than an iPhone. 

The death of Steve Jobs

Apple's homepage in 2011, stripped back with a simple image of Steve Jobs, memorializing the company's leader after his death with the simple text of "Steve Jobs. 1955-2011" beside a black and white headshot of him.

When Steve Jobs passed away in October 2011, many organizations and people put out tributes — but none were as simple and impactful as Apple’s. This iconic photograph was the only image on the page and it linked to this memorial site, which features messages from people who were inspired by him and his work. 

Flat design enters the chat with iOS 7

The Apple homepage in 2013 introduing iOS 7 for mobile devices. This hero image is zoomed shots of the iPhone and iPad running on iOS 7.

With the arrival of iOS 7 in September 2013, Apple took several new directions with their homepage. First up: a flatter design that was more minimalist and a slightly abstracted take on skeuomorphism. Flat design is distinctly two-dimensional and tends to feature bright colors that grab your attention. This design shift was a precursor to the short-lived neumorphism trend, which is essentially a hybrid of skeuomorphism and flat design. 

Secondly, there was a change in typography to Helvetica, which would be replaced by Apple’s own San Francisco typeface just three years later after people complained about thin Helvetica fonts. 

Lastly, the whole page was a carousel, which auto advanced through several full-page experiences. While it may not have been the most accessible practice to use only a carousel, it gave every announcement the chance to have center stage. This wasn’t a layout Apple used often on their homepage, so while they abandoned it soon after, they still use carousels as smaller components on occasion.

Flat nav, thin gutters

The Apple homepage in 2014, with a brand-new site navigation menu that's both flat and slightly transparent. The hero image is a full bleed image of a child's bedroom with a ten and children presumably watching a movie on an iPa in the tent. The hero text reads: "From one gift come many."

By 2014, the navigation on Apple.com had gone fully flat. Here, we can also see a time when they played with navigation transparency so you can still see the rich image behind it. The sub sections were expanded and the gutters between were reduced to a thin width. With busy photography, this could have felt chaotic, but with Apple’s restrained approach, the effect is one of elegance and order.

iPhone X changes the game

The Apple homepage in 2017 highlighting the new iPhone X with a brand new hero image layout. At the top of the page, the site nav menu is no longer transparent but rather black. Below it is a horizontal image of the iPhone laying flat. Below this is a 2x3 grid image layout with close up shots of the phone, people using it, and features like Portrait mode for the camera.

When the iPhone X entered the arena in November 2017, Apple tried something very different. That pattern of a hero and three to four tiles below it? Gone. The whole page was devoted to the iPhone X and product photography. The hero had one shot, a heading, a subheading, and two links. 

The page was elongated and contained boxes that spotlighted distinct iPhone features. Hovering over the boxes revealed the feature names and the boxes worked as jump links to specific sections on the product overview page. The shot of the beveled edge at the bottom of the page was actually a video that played upon hover or allowed you to click to watch the fully guided video. 

Apple.com in the 2020s

The war in Ukraine

The Apple homepage in March 2022, featuring a homepage banner drawing attention to the crisis in Ukraine to encourage site visitors to donate to Unicef to offer relief support. The hero image is a CTA for college students, reading "Get supercharged for college" above a hero image of a Macbook and two iPads collated.

Today, the Apple.com homepage features a navigation full of Apple’s most popular products — from phones and computers to the Apple Watch and AirPods. The heroes often mirror campaigns running on TV and in an Apple store — like this one featuring a back to school campaign.

In March 2022, they began showing a banner right below the navigation menus that asked folks to donate to Unicef to support families affected by the war in Ukraine. This came right as CEO Tim Cook also encouraged the company’s employees to make donations that he would then match. 

Below the hero are the now familiar tiles as the page extends. At the bottom, a carousel rotates through Apple TV+ originals (we personally can’t wait for the next season of Severance).

A snippet of the carousel on the Apple homepage highlighting content in its AppleTV+ library. This particular image spotlights TV Show Ted Lasso.i

iPhone 14

Apple's homepage in September 2022. The entire page has gone full black, and the hero image is a close up shot of the top half of a purple iPhone 14 Pro.

When the iPhone 14 was released in September 2022, a dark purple device with shiny edges took over the above-the-fold section of the Apple homepage. 

The “learn more” page for the iPhone 14 matches the homepage’s energy with up-close images of the sleek new device, smooth animations showing off the functionality, and scroll-triggered gradient effects that change the color of text or the background. 

The last time the latest iPhone took up this much homepage real estate was back in 2017 with the release of the iPhone X. For three generations of iPhones, the focus was on refinement and improvement rather than major changes. But iPhone 14 marks the beginning of a new era with major upgrades including camera improvements, advanced safety features, and Dynamic Island. 

Apple describes Dynamic Island as “a truly Apple innovation that’s hardware and software and something in between.” This upgrade enables users to see apps, notifications, music, and more all in a small fixed widget at the top of the home screen — explaining why Apple introduced Dynamic Island as “the new face of iPhone.” 

Apple excels at setting trends

Whether you’re an Apple enthusiast or not, there’s no denying this brand’s influence in the design world. From the physical storefronts to the online homepage, Apple is meticulous about its visual appeal. And anyone who’s seen the text bubbles in group chat turn green after the addition of a new member knows — aesthetics matter.

Related Articles

Responses

Your email address will not be published.