LearnApple.com Rolls Out New Design


writes on January 27, 2011

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?


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

16 Responses to “Apple.com Rolls Out New Design”

  1. Hello! Quick question that’s totally off topic.
    Do you know how to make your site mobile friendly? My web site looks weird
    when browsing from my iphone. I’m trying to find a template or
    plugin that might be able to fix this issue. If you have any recommendations, please share.

  2. Light Vvv on February 2, 2011 at 3:35 am said:

    Actually I don’t like the new design,it seems a lit bit rough.

  3. Shum Kam League Lexue aq, EN Isha Nuk eh ri Apple.com mendore WebKit … Dallimi ESHTE rëndësishëm i. Apple ESHTE arsyeja PSE garlic ESHTE preference EMI, EN, and furcation For me vjetër Metalik sjelljen imazhit laughs and Sprite CSS3 qe mbështesni besimin?


  4. erickaweb on January 30, 2011 at 8:38 pm said:

    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.

  5. I like it, especially the “glossy” look to the navigation bar.


  6. It’s an improvement, but the gratuitous animations are exactly that.

  7. I think we can sum up the argument for use of animations in once sentence: “See, we don’t need flash!”

  8. ReDDs (Macme.org) on January 27, 2011 at 7:49 pm said:

    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. 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!

  10. 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


    animation without purpose = visual distraction

  11. 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.

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

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

    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…

  13. 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.

  14. 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….


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

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

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop