Changes to the Apple.com Design

Apple.com has undergone some adjustments to its design in the past week or so, changes that, if you weren’t paying close enough attention, you may not have even noticed.

Although many reports are referring to this as a “redesign”, I think it’s difficult to classify it as such. There certainly are some significant changes, but the changes are not exactly a complete overhaul as was the case for CNN.com in late 2009.

Nonetheless, the changes are significant to web designers, so I’ll briefly look at them here. If there’s anything about the changes that I’ve neglected to mention, feel free to comment.

 

A Redesigned Navigation Bar

The most significant change (albeit still a somewhat subtle one) is the look of the navigation bar. Apple has one of those navigation bars that, design-wise, everyone loves and envies. It seems impossible that it could be improved. Well, they were somehow able to find ways to make it even better looking and more intuitive.

Here is the old navigation bar:

Apple's old navigation bar

Here is the new:

Apple's new navigation bar

Changes include:

  • It’s darker
  • The gradient has been replaced by bolder glossy look
  • The logo’s appearance is simplified
  • The search box is smaller (more on that below)

I think it really takes a great team of designers to make what really are fairly significant changes to the look of a very important UI element, while still giving the impression that nothing has changed. It just goes to show that visual details are often not as important as the overall feel of the design.

 

The Flexible Search Box (WebKit Only)

Being obviously WebKit-biased, the Apple design team have included some WebKit-only enhancements, one of which is associated with the search box.

In most browsers, clicking into the search box will brighten its background to a more readable white. In Chrome or Safari, the search box animates using CSS3 Transitions to become wider and arguably a little more usable. The screen grab below shows the search box in Chrome after it has animated to become wider:

The flexible WebKit-only search box

To accommodate the size of the search box, the other navigation items and the logo resize themselves.

I like this feature; it adds a feeling of intuitiveness. But it has, in my opinion, a small flaw: It doesn’t go back to its initial state after you remove focus. Of course, if something was typed into the search box, then you wouldn’t want the size to change back, but I think it should return to its normal state if it loses focus and remains empty.

Of course, since it’s extremely unlikely that anyone will click into the search box and not type anything, I suppose this is an insignificant omission.

 

The Navigation Bar’s Animated Entry (WebKit Only)

Another small WebKit-only feature is the animated entry of the navigation bar. I don’t remember seeing this effect on their site before, so I am assuming this is another new feature. The animated entry only happens on the home page, and only once per browser session. This is good practice and a good lesson for developers adding animated effects to their interfaces.

The animated entry of the nav bar

As visualized in the screen grab above, the navigation bar enters from off-screen, probably using CSS3 keyframe animation, along with JavaScript to control when the animation should or shouldn’t occur.

 

The Animated Product Browsers (WebKit Only)

Another recent addition is the use of animation on some of the product pages. CSS3-based animations are used on the Mac and iPod product browsers, one of which is shown below:

The Animated Product Browser

The products animate when you first arrive on the page, and if you switch between sub-categories, the visible products scurry away and new ones jump into their place. This is done via CSS3 keyframe-based code, some of which is shown below:

Some of Apple's code for keyframe animations

On non-WebKit browsers, the product browser’s animation switches to simple JavaScript-based fading. Although this kind of thing is not ideal in every circumstance (since it essentially amounts to “code forking”), it is a realistic option for developers and designers today who want to code for the best possible browsers and provide less enhanced functionality for the rest.

 

Search Box Auto-Suggest

[UPDATE] As pointed out by a number of people in the comments, the auto-suggest is not a new feature. Our inclusion of this as a “new feature” was based on another article that reported that the auto-suggest was new. Nonetheless, we’ll keep this section because it is a good feature that has the potential to make a website a little more usable, and provides a good example for other developer and designers to follow, if it fits with their project.

The Ajax-driven auto-suggest drop-down appears as you type a search query:

Search Suggestions on Apple.com

As shown in the screen capture above, not only does the drop-down show search results that match the typed characters, but the results are accompanied by product photos and descriptions. I think the photos are more valuable in this spot than the descriptions, but overall this has the potential to streamline product search and conversions.

 

Anything Else?

That seems to cover the major changes in the recent re-tooling of the Apple.com design. Are there any other significant changes to the design or code that I haven’t mentioned here?


This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

What do you think of the changes to the Apple.com design? Are there any changes that we haven’t mentioned here?

  • Alex

    Search field is animated in ff4 as well.

  • http://www.2dforever.com Tom

    I believe the auto suggest on the search box was there on the previous design as well.
    Just to point that out.

    • Piotr

      YEp!!! that glossy bar is so last season (acctually few seasons back)!

  • JohnDale

    Sorry but for all of Apple’s design impetus, they’ve gone a step backward with the glossy bar. I saw the design 2 days ago and I was utterly unimpressed. Seriously, all I could think about was Windows Vista!

    The previous menu bar had a subtle eternal feel to it. It could have lasted 50 years and would have still remained vogue.

    • Nate

      John, I agree 100%. I don’t like the design changes to the sites. Unnecessay and unimpressive. The glossy half-split gradient navigation reminds me of web design trends back in like 2005. Don’t like the changes.

      • Bill

        Funny, I thought about Vista as well!

  • V1

    The autosuggest has been there for quite a while now, it’s not new anymore.. It’s actually quite old..

  • http://deliciousroom.com/ Yaro

    The navbar looks like Windows Vista. IMO

  • http://www.adwokatkaminski.pl adwokat

    A good site can be always better. Even apple – actually the top trendsetter in the world.

  • sfebson

    Hm. If I write “IE only” page it will be wrong BUT making “WebKit only” is acceptable?
    Looks to narrow minded for me.

    • Dutch

      It’s a big difference. Webkit only means in almost all cases that there’s a progressive feature (besides that there’s a fallback for non-webkit browsers). IE only means… well, yeah.. you know what.

  • Dutch

    Wasn’t auto-suggest already implemented in the old design? I don’t know if images were also visible, but I’m 99% sure that auto-suggest isn’t a new function. And you forgot to mention that the site is written in HTML5.

  • rivus

    The AJAX driven auto suggest search has been there for years. This is not a new feature. They might have pimped a little.

    • http://www.impressivewebs.com Louis

      Yeah, many have pointed that out. Unfortunately, I relied on information in another article, and they said the auto-suggest was new.

      Would be nice to know if the auto-suggest has been changed (with the photos), as some have suggested.

      Thanks for the heads up.

  • http://www.cranialstudios.com Benjamin U

    I personally find the new design better.
    The horizontal scrolling in the prduct bar was cool a few years ago, and then became nothing but a gimmick. the new design is cleaner, a bit bolder (not hugely), and IMHO a bit more usable.

  • Luis Larrea

    I tried it on my Android phone and I noticed that you can swipe through the categories.

  • http://www.codinggenius.com Clay

    They’ve also added a subtly textured/noised background to the site. No longer the plain stark white background they were so famous for. Yet they’ve naturally pulled off the texture in a delightfully clean minimal way.

    • randy

      That has been there for awhile.

  • Marin

    I can just report that “The Flexible Search Box” is working under latest firefox (minefield) build.

    “The Navigation Bar’s Animated Entry” knida work (it doesn’t slide in, it just “appears” with a slight delay).

    Tested with OpenSUSE 11.3 and Minefield 4.0b11pre (2011-01-31).

  • Shaun

    The search auto-suggest has been around since long before this latest round of enhancements…for years now.

  • http://www.benstokesmarketing.co.uk Web design Shrewsbury

    I think the most positive change to the Apple website was the Animated Product Browsers (WebKit Only). This has helped users see Apples selected products so much easier. Every website should evolve over time, this is what keeps the users coming back.

    Nice post :)

  • http://kurtzenter.com Alex

    The Search Box Auto-Suggest is there since 2007 or so.

  • http://www.ospreye.com ospreye

    Redesigning existing elements, especially menu navigation that is not necessarily adding new functionality, is not always an easy task. Thanks for pointing out these changes that Apple has made. The search box auto suggest is one feature that Apple has had for quite a long time now, and not new to the site, although definitely worth the mention in this article. It’s more of a cosmetic update, and sometimes cosmetics are just as important as features.

    I think it’s important to be careful not to implement functionality on web sites just to replicate what other big sites are doing, such as Google, but to things in a way that is relevant to the core objectives and mindset of the site in question. I would much sooner implement a auto suggest for a product-oriented site based on Apple’s design, than I would say Google’s or the one one Yahoo.com.

  • David Young

    As interesting as the CSS3 enhancements are, I’m actually bothered by the fact that Apple chose to enhance the site for only webkit-based browsers. From a user experience based perspective, I would think Apple would want those enhancements to be available to all users, rather than the limited market audience that webkit-based browsers currently hold. If you have to (or are going to) use javascript as a fallback platform for animation, then you really should make the user experience a priority, and use javascript to progressively enhance the navigation, search field, etc. so that all visitors to apple.com get the same experience.

    To me, this seems to be using CSS3 for the sake of using CSS3. It brings to mind the old adage: Just because you CAN do something doesn’t necessarily mean you SHOULD do something.

  • http://www.adrianfraguela.com Adrian

    I like the new design. A lot cleaner.

    Although the point you made about the autosuggest has been there for a long time. I remember using it as far back as last year.

  • http://www.tedcolegrove.com Ted

    They also put small grain on their background.
    http://images.apple.com/home/elements/gradient_texture20101116.jpg

  • http://molbal.co.cc Bálint Molnár

    I don’t know why didn’t they code the transformations with jQuery animation, that would be cross-browser compatible.

    I’m disappointed with this :/

  • http://www.albert-pak.com Al

    I saw those changes over the weekend on Apple’s website, definitely navi bar was the first thing that popped out to me. After browsing for a little bit more, I noticed the animations of products and such. Definitely liking those small changes on Apple’s site. Awesome job.

  • Josué Agüero

    I think that this new design comes with the new user interface the OS X Lion will have, they will reflect all to be an unified design.

  • http://resolutionink.com Mel Hogan

    It’s a great example of paring down a design to its bare essentials. Reminds me of when Google.com went to the search field only design, electing to only show the subsequent page content when the user interacted outside of the search box.

  • http://www.sametomorrow.com/blog adam

    I think I prefer the old site, the small functionality changes of the new site is better but, as far as design only this one is a bit too ‘drop shadow’ overkill. The nav bar doesn’t look as clean or sharp kind of dirty imo, just seems like a little bit too much filter use than normal or maybe its more obvious now on the darker colors. I’m sure I’m one of the very few that don’t like the new design as much though.

    • JohnDale

      You are not alone. It seems others are liking it just because its Apple. The functionality is great, but how on earth can anyone compare this new 2005-style glossy menu bar to the near-perfect one they had previously?
      The old menu bar was a design inspiration for so many works i saw around. Well, this new bar also gives inspiration, about what NOT to do with a menu bar design.

  • unqtom

    Vista top bar is soo 2005, and so unlike Apple, so I am really dissapointed – I am sure the same guys “designed” iTunes 10 “logo” too.

    http://www.apple.com/macmini/design.html
    MacMini “Design” page also uses CSS3 Animation for opening bottom panel, little touch.

  • http://jim-silverman.com/ Jim

    i actually prefer the site on non-webkit browsers. the css3 animations are way over done and superfluous. whatever happened to simple and minimalistic?

  • http://www.impressivewebs.com Louis

    For those who commented on the “auto suggest”. I had a feeling that was an incorrect assumption, but I didn’t remember seeing that before myself.

    I based a lot of what I wrote in this article on other reports of the design, one of which was this one:

    http://thinkvitamin.com/design/apple-com-rolls-out-new-design/

    In that article, the author says that the auto-suggest was new. I couldn’t verify that fact, but I included anyhow assuming they knew what they were talking about. Lesson learned. :)

    I’ll send a small rewrite to Walter for that section.

    Thanks for everyone’s comments. We did kind of rush this one out, so our apologies for that oversight.

    On that same topic, can anyone verify if the drop-down was in fact “pimped out” in comparison to previous versions, as someone else implied?

  • knalle

    This is a step back IMO.

    The other day I just came to think of why Apple had abbandoned the glossy buttons / UI. It was prettey obvious: Their products had become increasingly more shiny… E.g. look at the Iphone1 –> 4: more and more glossy. So therefore the content on the site (that is their products) should stand out as shiny/glossy rather than the UI.

    … and then I see this… their new design. ummm… never thought they would start animating and go glossy again like that :-S

  • http://www.yourwebdepartment.com Flavio Mester

    Personally, I agree with #30. I liked the textured background but can’t avoid a feeling of Apple having a Microsoft moment with this nav bar. Looks good but not unique anymore, and overall perhaps a bit too glossy.

    On the other hand for some reason the site kind of feels more like an app now. Perhaps that’s the subliminal idea, Apple pushing the notion that everything is bound to become an app (?)

    Still looks beautiful though, in my opinion. I guess we’ll all — including Apple — will need some time to let it sink in.

  • http://www.vivoocreative.co.uk Luke

    I agree with the above comment :/

  • Jack

    Whenever something change, people start to complain. Not only on the web but in life. You can’t stop bitching. I think the new design is definitely better. Things just get better over time. Don’t tell me ‘It could have lasted 50 years and would have still remained vogue’. That’s ridiculous. Not even for 5 years.

  • http://www.martymccolgan.com web design derry

    Like the new design the dark grey is alot better looking

  • http://www.threeseventwo.com Franco Scaramuzza

    I think they also incorporated a textured background in their web design.

    • http://www.martiandesign.com David Platt

      yep

  • http://distance-calculator.co.za/ distance calculator

    why does everyone think the apple site is so cool? it has hardly changed in so long, and in my opinion it is very dated looking

  • anon

    the new bar is weird. I mean, It’s dark, what the…? everything else stayed the same.
    The macs etc… are still in the light grey, the little gradients on everything else are the same, heck even the ‘submenu’ is still the same color.

    And what’s with the stupid gloss, especially how it’s done(with a very clean line in the center), I never got that, on anything.

    Bad move IMO.

    ow and the most important part, what does it matter actually? Why is it such big news that apple changed some small things?

    I have to agree with

  • RS

    How is an auto resizing search box “intuitive”? This site normally has great articles, but this one is pretty shallow…

    • http://www.impressivewebs.com Louis

      For a number of reasons.

      First, because it gives you more room to type. Small search boxes are annoying to use. So, when it expands, it is more usable.

      Second, design on the web (and elsewhere) is not just about looks, it’s about overall feel. When the box animates, it gives it an inviting feeling. Some might disagree, but I think it adds to the intuitiveness.

      Finally, the fact that it starts out smaller means it doesn’t take up unnecessary space and it doesn’t overshadow other design elements. Search boxes can be somewhat ugly when they’re white and too big. They obviously don’t want the design focused on that element, so they made it dark and smaller to start.

  • http://www.ravi.uxdsign.com Ravikumar V.

    Man, it looks cool

  • http://www.maxdoro.nl Daan

    I really like the new navigation bar. And the texture fits as well.
    The previous version was good, but i think this is a tiny bit better :)

  • C

    Ok, so I read this on my iPhone, and waited till I got back to my computer to write this.. The animations happen in FireFox4.. the animation has a hiccup on my iPhone4. Maybe we should remove the webkit only thing? Or maybe i’m only seeing it because of a -moz tag and magic from wizards.

  • http://www.jaavedkhatree.com.au Jaaved

    I like the auto resizing feature with the search box – it certainly adds to usability. I find it annoying to have to scroll through a tiny text field to check for typos.

    I’m not a fan of the ‘Vista-like’ nav bar… Perhaps they could have kept the gradient and gone with a darker shade at the same time?

    As for the animated products – it feels gimmicky. I didn’t mind the older scroll system they had in place and found that to be quite useful.

    Still though, it’s not like these design changes are going to scare off millions and ruin their bottom line. It might ruffle a few feathers of those in the armchair designer army though! ;)