Apple.com Rolls Out New Design

Apple’s website went down the other night and came back with a redesign.

Like those they’ve done in the past, many of the visual changes are subtle. Apple has always maintained simplicity in the visual design for their website, evidenced by these redesigns from 1998-2004.

The navigation bar has been updated to a darkened, glossier version with a simplified Apple logo and features updated search functionality. You’ll now see suggested results as you begin typing in your search, and if you’re using a WebKit browser, you’ll also enjoy a little animation when you focus on the search bar’s text area. CSS animations for WebKit are used heavily throughout the site—take a look at the Mac page, for example, where products animate into view and quickly slide away as you move between categories. There’s a tremendous amount of CSS animation going on in the background to make this happen.

So far, the Apple redesign has received a lot of positive feedback. What do you think? Do you like the new Apple.com design?

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

15 comments on “Apple.com Rolls Out New Design

  1. uhhhh, it’s the same EFFENG design. changing a couple of rounded corners on their visual elements does NOT a redesign make.

  2. Subtlety is a Design Zen that’s difficult to master. Don’t confuse subtlety with lack of change. There are functional improvements that accompany this tweak… that’s a redesign. Design is as much flow of user interaction as it is placement of pixels.

    On the flipside… I think it’s a bit backwards for Apple to be using Windows Vista Aero Glass style buttons… but that’s a different debate entirely… I’m an old fogey who’s partial to the real brushes metal look of days gone by….

    *sigh

    Amazing how we get attached we get to these things…. I’ve drank too much Apple Kool-Aide I think…

  3. The best part about this re-design is that I was on there earlier today and didn’t even notice it! That is awesome! I remember thinking it was odd that the horizontal scroll bar was gone from the product view, but the navigation did seem completely natural.

    To comment on @Andrews comment, a good redesign does necessitate a forklift replacement of everything. Sometimes a few tweaks here and there on an already good design are all that is really needed. Change for changes sake is not always a good thing.

  4. I with Shane, I didn’t even notice it at first. It wasn’t really a redesign. but more of a nip/tuck

    Dislikes:
    New glossy nav bar
    Search area (though I like the instant search feature).

    Likes:
    Simplified Apple Logo

    I really like the new mac page animations, but as @nickrp mentioned on Twitter last night… it seems very off brand the way they fly in (almost cartoony).

    Over time Im sure it will grow on me and I will eat my words, but until then…

  5. I saw this yesterday. Thanks for posting Allison! One thing I will note is that the nav for the mac breaks continuity when you select one of the items. It disappears. I do believe this was the same in the last design, but it’s a bit irksome. Example: select a product (MacBook Air) and you can no longer select any other products, so you have to click on Mac to get back. My 2 cents from a UI perspective.

  6. I think the visual design updates are a nice subtle update but I think the use of CSS animations and transitions set a bad example. The use of animation for the main navigation bar and the horizontal slider on the Mac page feel more like a demo of what Webkit can do than an enhancement to the user experience with clear purpose.

    Design without purpose = decoration

    and

    animation without purpose = visual distraction

  7. Until I read this, I hadn’t been on the new Apple.com wit Webkit… makes a significant difference. My preference would lean toward the old brushed metal image sprite with the new CSS3 behaviors, but I trust that Apple know what it’s doing!

  8. I’m not keen, but this could mean that Lion will end up looking a bit like this. If you remember, when the Beta for Leopard (10.5) came it still looked like Tiger (10.4) and then Apple changed it’s design at it’s release. So I think apple will do the same with Lion, at the moment, it still looks like Leopard and Snow Leopard, but they could change the design and that would be why they are beginning to make “Subtle” changes on Apple.com, to help users get used to the idea of the design style. Apple did the same thing in 2002 at the release of Mac OS X, changed the design of there website 6 months before to give an indication of what the new OS will look like.

  9. The degradation of their CSS3 styles to square corners and lack of drop-shadows in IE 8 and below is not a big difference in aesthetic. It’s rather subtle and I applaud them for moving forward in that arena.

    Interestingly, Apple has allowed usability to fail in IE 8 and below on their startpage: http://www.apple.com/startpage/ – the content does not come up in the “Hot News Headlines” section.